/* ==========================================================================
   Fleet Manager — Phase 5b: Slow-Network UX Kit (Audit Part D)
   Skeleton screens (D-1/D-2) · CLS guards (D-3) · Connection pill (D-5)
   Optimistic pending states (D-4) · Queued/Sending/Sent labels (D-5)
   ========================================================================== */

/* ── Skeleton primitives (D-2: exact-shape shimmer blocks) ── */
.fleet-skel {
    position: relative;
    overflow: hidden;
    background: #e2e8f0;
    border-radius: 8px;
    min-height: 1em;
}
.fleet-skel::after {
    content: "";
    position: absolute;
    inset: 0;
    transform: translateX(-100%);
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.65), transparent);
    animation: fleetSkelShimmer 1.4s infinite;
}
@keyframes fleetSkelShimmer {
    100% { transform: translateX(100%); }
}
body.dark-mode .fleet-skel { background: #334155; }

/* Block variants for cards / bars / circles */
.fleet-skel--bar    { height: 14px; margin: 8px 0; }
.fleet-skel--title  { height: 22px; width: 55%; margin: 10px 0; }
.fleet-skel--card   { border-radius: 18px; min-height: 110px; }
.fleet-skel--circle { width: 44px; height: 44px; border-radius: 50%; flex: 0 0 auto; }

/* skeletonHTML('list') — avatar + two lines per row, fixed height = no jump */
.fleet-skel-list { display: flex; flex-direction: column; gap: 14px; padding: 6px 2px; }
.fleet-skel-item { display: flex; align-items: center; gap: 12px; min-height: 48px; }
.fleet-skel-lines { flex: 1 1 auto; min-width: 0; }
.fleet-skel-lines .fleet-skel--bar { margin: 6px 0; }
.fleet-skel-row td { padding-top: 12px; padding-bottom: 12px; }
.fleet-skel-row .fleet-skel--bar { margin: 0; }

/* Shimmer is pure decoration — drop it on weak GPUs / reduced motion */
html.legacy-android-gpu .fleet-skel::after { animation: none; display: none; }
@media (prefers-reduced-motion: reduce) {
    .fleet-skel::after { animation: none; display: none; }
}

/* Container whose direct children get skeleton while [data-fleet-loading] is set */
[data-fleet-loading] > * { visibility: hidden; }
[data-fleet-loading]::before { content: none; }
[data-fleet-loading] { position: relative; }
[data-fleet-loading] > .fleet-skel-overlay { visibility: visible; }
.fleet-skel-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: inherit;
    z-index: 2;
}

/* ── Connection pill (D-5: Live / Reconnecting / Offline / Slow) ── */
#fleetConnPill {
    position: fixed;
    bottom: 14px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 2000;
    display: none;
    align-items: center;
    gap: 7px;
    padding: 6px 14px;
    border-radius: 999px;
    font-size: 0.78rem;
    font-weight: 600;
    line-height: 1.2;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.18);
    pointer-events: none;
    white-space: nowrap;
}
#fleetConnPill.is-visible { display: inline-flex; }
#fleetConnPill .fleet-conn-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex: 0 0 auto;
}
#fleetConnPill[data-state="offline"] {
    background: #dc2626;
    color: #fff;
}
#fleetConnPill[data-state="offline"] .fleet-conn-dot { background: #fecaca; }
#fleetConnPill[data-state="connecting"] {
    background: #d97706;
    color: #fff;
}
#fleetConnPill[data-state="connecting"] .fleet-conn-dot { background: #fde68a; animation: fleetConnPulse 1s infinite; }
#fleetConnPill[data-state="degraded"] {
    background: #fef3c7;
    color: #92400e;
    border: 1px solid #fbbf24;
}
#fleetConnPill[data-state="degraded"] .fleet-conn-dot { background: #f59e0b; animation: fleetConnPulse 1.4s infinite; }
@keyframes fleetConnPulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.35; }
}
/* Mobile: pill ko bottom-nav ke upar rakhein */
@media (max-width: 768px) {
    #fleetConnPill { bottom: 88px; }
}

/* ── Optimistic / pending button states (D-4) ──
   Keep the original label; spinner + dim + progress bar only. */
.fleet-btn-spinner {
    display: inline-block;
    width: 1em;
    height: 1em;
    border: 2px solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
    animation: fleetBtnSpin 0.7s linear infinite;
    vertical-align: -0.15em;
    margin-right: 6px;
    flex-shrink: 0;
}
/* Safety net: never show two rings on one busy button.
   Prefer the page's own ring when present; otherwise keep .fleet-btn-spinner. */
.fleet-pending-btn:has(.lp-spinner) .fleet-btn-spinner,
.fleet-pending-btn:has(.hbl-bio-spinner) .fleet-btn-spinner,
.fleet-pending-btn:has(.spinner-border) .fleet-btn-spinner,
.fleet-pending-btn:has(.spinner-grow) .fleet-btn-spinner,
.fleet-pending-btn:has(.btn-spinner) .fleet-btn-spinner {
    display: none !important;
}
/* When FleetUX owns the ring, hide the legacy fleet_core .btn-spinner. */
.fleet-pending-btn:has(.fleet-btn-spinner) .btn-spinner,
.fleet-pending-btn > .btn-spinner {
    display: none !important;
}
@keyframes fleetBtnSpin {
    to { transform: rotate(360deg); }
}
.fleet-pending-btn {
    position: relative;
    opacity: 0.88;
    pointer-events: none;
    overflow: hidden;
}
.fleet-pending-btn::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    height: 3px;
    width: var(--fleet-btn-progress, 0%);
    background: currentColor;
    opacity: 0.45;
    transition: width 0.15s linear;
    pointer-events: none;
}
/* Instant success tint while an optimistic action is in flight */
[data-optimistic].is-optimistic {
    position: relative;
}

/* ── Queued / Sending / Sent labels (D-5, Gmail-style) ── */
.fleet-queue-label {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 10px;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 600;
}
.fleet-queue-label--queued  { background: #fef3c7; color: #92400e; }
.fleet-queue-label--sending { background: #dbeafe; color: #1d4ed8; }
.fleet-queue-label--sent    { background: #d1fae5; color: #065f46; }
.fleet-queue-label--failed  { background: #fee2e2; color: #b91c1c; }

/* ── UX toasts (small, non-blocking feedback) ── */
#fleetUxToastHost {
    position: fixed;
    top: 14px;
    right: 14px;
    z-index: 2100;
    display: flex;
    flex-direction: column;
    gap: 8px;
    max-width: min(320px, calc(100vw - 28px));
}
.fleet-ux-toast {
    background: #0f172a;
    color: #f8fafc;
    padding: 10px 14px;
    border-radius: 10px;
    font-size: 0.82rem;
    line-height: 1.4;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.25);
    animation: fleetToastIn 0.22s ease;
}
.fleet-ux-toast--out {
    opacity: 0;
    transform: translateX(12px);
    transition: opacity 0.28s, transform 0.28s;
}
@keyframes fleetToastIn {
    from { opacity: 0; transform: translateY(-6px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ── CLS guards (D-3) ── */
/* Images with width+height attributes: browser native ratio preservation
   (prevents layout jump jab image late load ho) */
img[width][height] { height: auto; }
/* Scrollbar appear/disappear se page content na hile */
html { scrollbar-gutter: stable; }
/* Late-injected content (toasts, banners) existing content ko push na kare */
#fleetUxToastHost, #fleetConnPill { position: fixed; }