/* ════════════════════════════════════════════════════════════════
   FastShip Dashboard — Production-tier polish layer
   Stacks on top of design-tokens.css + dashboard.css.
   Goals: depth, motion, affordance — feels like Linear / Stripe / Apple.
   ════════════════════════════════════════════════════════════════ */

/* ─── Global motion variables ────────────────────────────────── */
:root {
    --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
    --ease-out-quart: cubic-bezier(0.25, 1, 0.5, 1);
    --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
    --dur-fast: 0.16s;
    --dur-med:  0.28s;
    --dur-slow: 0.42s;
    --shadow-elev-1: 0 1px 2px rgba(15, 17, 21, 0.04), 0 2px 6px rgba(15, 17, 21, 0.04);
    --shadow-elev-2: 0 4px 10px rgba(15, 17, 21, 0.06), 0 10px 24px rgba(15, 17, 21, 0.06);
    --shadow-pop:    0 12px 32px rgba(15, 17, 21, 0.12);
}

html { scroll-behavior: smooth; }
body { overscroll-behavior-y: none; }

/* ─── Fade-in on load ────────────────────────────────────────── */
#app { animation: fsAppIn 0.4s var(--ease-out-expo) both; }
@keyframes fsAppIn {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ─── App header: real frosted glass + subtle elevation on scroll ─ */
.app-header {
    padding-top: 14px; padding-bottom: 14px;
    transition: box-shadow var(--dur-med) ease, background var(--dur-med) ease;
}
.app-header.is-scrolled {
    background: rgba(255, 255, 255, 0.92);
    box-shadow: 0 1px 0 rgba(0,0,0,0.04), 0 6px 14px -10px rgba(0,0,0,0.18);
}
.app-header h2 {
    font-size: 22px;
    background: linear-gradient(180deg, #1d1d1f 0%, #1d1d1f 100%);
    -webkit-background-clip: text;
    background-clip: text;
}
.app-header .role-tag {
    padding: 4px 11px;
    font-size: 10.5px;
    background: var(--color-ink);
    box-shadow: inset 0 0 0 1px rgba(255,255,255,0.06);
}

/* ─── Page hero (.ph) — eyebrow + huge headline cadence ──────── */
.ph {
    margin: var(--s-xs) 0 var(--s-xl);
    padding-bottom: var(--s-lg);
    border-bottom: 1px solid var(--color-divider-soft);
    flex-wrap: wrap;
    gap: var(--s-sm);
}
.ph h1 {
    font-size: 40px;
    line-height: 1.05;
    letter-spacing: -0.02em;
}
@media (min-width: 768px) {
    .ph h1 { font-size: 48px; letter-spacing: -0.028em; }
}
.ph::before {
    /* eyebrow rule line, hidden if h1 missing */
    display: none;
}

/* ─── KPI cards: depth + micro-motion ────────────────────────── */
.kpi {
    position: relative;
    background: var(--color-canvas);
    border: 1px solid var(--color-hairline);
    border-radius: 16px;
    padding: 20px 22px;
    transition: border-color var(--dur-med) var(--ease-out-quart),
                transform var(--dur-med) var(--ease-out-quart),
                box-shadow var(--dur-med) var(--ease-out-quart);
    overflow: hidden;
}
.kpi::after {
    /* subtle inner highlight, Apple-style */
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
    background: linear-gradient(180deg, rgba(255,255,255,0.6) 0%, rgba(255,255,255,0) 30%);
    opacity: 0;
    transition: opacity var(--dur-med) ease;
}
.kpi:hover {
    border-color: rgba(0, 0, 0, 0.18);
    transform: translateY(-2px);
    box-shadow: var(--shadow-elev-1);
}
.kpi:hover::after { opacity: 1; }
.kpi .label {
    font-size: 12px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--color-ink-muted-48);
    margin-bottom: 8px;
}
.kpi .value {
    font-feature-settings: "tnum" 1, "ss01" 1;
    font-variant-numeric: tabular-nums;
    font-size: 36px;
    letter-spacing: -0.025em;
    line-height: 1.05;
}
.kpi .sub {
    font-size: 13px;
    margin-top: 6px;
    color: var(--color-ink-muted-48);
}
.kpi.alert   { box-shadow: inset 3px 0 0 var(--color-danger); }
.kpi.success { box-shadow: inset 3px 0 0 var(--color-success); }
.kpi.warning { box-shadow: inset 3px 0 0 var(--color-warn); }
.kpi.alert:hover   { box-shadow: inset 3px 0 0 var(--color-danger), var(--shadow-elev-1); }
.kpi.success:hover { box-shadow: inset 3px 0 0 var(--color-success), var(--shadow-elev-1); }
.kpi.warning:hover { box-shadow: inset 3px 0 0 var(--color-warn), var(--shadow-elev-1); }

.kpi-grid {
    gap: 14px;
    margin-bottom: var(--s-xl);
}
.kpi-grid .kpi { padding: 18px 20px; }
.kpi-grid .kpi .value { font-size: 30px; }

/* count-up data hook (polish.js fills via data-target) */
.kpi .value[data-counting] { transition: none; }

/* ─── List / item card row ───────────────────────────────────── */
.card {
    padding: 16px 20px;
    border-radius: 14px;
    transition: border-color var(--dur-fast) ease,
                transform var(--dur-fast) ease,
                box-shadow var(--dur-fast) ease,
                background var(--dur-fast) ease;
    cursor: pointer;
}
.card:hover {
    border-color: rgba(0,0,0,0.22);
    transform: translateY(-1px);
    box-shadow: var(--shadow-elev-1);
}
.card:active { transform: translateY(0); }
.card .title {
    display: flex; align-items: center; gap: 10px;
}
.card .title::before {
    /* small accent dot — Apple Mail vibe */
    content: '';
    width: 6px; height: 6px;
    border-radius: 50%;
    background: var(--color-primary);
    flex: 0 0 6px;
    opacity: 0.85;
}
.card.is-paid .title::before    { background: var(--color-success); }
.card.is-draft .title::before   { background: var(--color-warn); }
.card.is-sent .title::before    { background: var(--color-danger); }
.card .amount {
    font-feature-settings: "tnum" 1;
    font-variant-numeric: tabular-nums;
}

/* ─── Tag pill: dot prefix + tighter typography ──────────────── */
.tag {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 10px 3px 8px;
    font-weight: 500;
    font-size: 11.5px;
    letter-spacing: 0.01em;
    background: var(--color-parchment);
    color: var(--color-ink-muted-80);
    border: none;
    box-shadow: inset 0 0 0 1px var(--color-divider-soft);
}
.tag::before {
    content: '';
    width: 5px; height: 5px;
    border-radius: 50%;
    background: currentColor;
    opacity: 0.7;
}
.tag-DRAFT    { color: var(--color-warn);    background: rgba(165,99,0,0.06); box-shadow: inset 0 0 0 1px rgba(165,99,0,0.15); }
.tag-BILLED   { color: var(--color-primary); background: rgba(26,39,68,0.06); box-shadow: inset 0 0 0 1px rgba(26,39,68,0.18); }
.tag-SENT     { color: var(--color-danger);  background: rgba(179,38,30,0.06); box-shadow: inset 0 0 0 1px rgba(179,38,30,0.18); }
.tag-INVOICED { color: var(--color-primary); background: rgba(26,39,68,0.06); box-shadow: inset 0 0 0 1px rgba(26,39,68,0.18); }
.tag-PAID     { color: var(--color-success); background: rgba(29,122,58,0.07); box-shadow: inset 0 0 0 1px rgba(29,122,58,0.2); }
.tag-VOID     { color: var(--color-ink-muted-48); background: var(--color-parchment); box-shadow: inset 0 0 0 1px var(--color-divider-soft); }

/* ─── Segmented control (chips look) ─────────────────────────── */
.chips {
    position: relative;
    display: inline-flex;
    gap: 0;
    padding: 4px;
    background: var(--color-parchment);
    border-radius: var(--r-pill);
    box-shadow: inset 0 0 0 1px var(--color-divider-soft);
    overflow: visible;
    margin-bottom: var(--s-lg);
}
.chip {
    position: relative;
    flex: 0 0 auto;
    padding: 7px 16px;
    border: none !important;
    background: transparent !important;
    box-shadow: none !important;
    border-radius: var(--r-pill);
    font-weight: 500;
    color: var(--color-ink-muted-80);
    transition: color var(--dur-fast) ease, transform var(--dur-fast) ease;
    z-index: 1;
}
.chip:hover { color: var(--color-ink); }
.chip.active {
    color: var(--color-ink);
    background: var(--color-canvas) !important;
    box-shadow: 0 1px 2px rgba(0,0,0,0.06), 0 0 0 1px rgba(0,0,0,0.04) !important;
}

/* Carrier chips: sliding pill */
.carrier-chips {
    padding: 4px;
    background: var(--color-parchment);
    border-radius: var(--r-pill);
    box-shadow: inset 0 0 0 1px var(--color-divider-soft);
    width: fit-content;
}
.carrier-chips button {
    border: none !important;
    background: transparent !important;
    box-shadow: none !important;
    padding: 8px 18px;
    color: var(--color-ink-muted-80);
    font-weight: 500;
    transition: color var(--dur-fast) ease;
}
.carrier-chips button:hover { color: var(--color-ink); }
.carrier-chips button.active {
    color: var(--color-ink);
    background: var(--color-canvas) !important;
    box-shadow: 0 1px 2px rgba(0,0,0,0.06), 0 0 0 1px rgba(0,0,0,0.04) !important;
}

/* ─── Tab bar: sliding indicator ─────────────────────────────── */
.tab-bar {
    position: fixed;
    background: rgba(255,255,255,0.86);
    border-top: 1px solid rgba(0,0,0,0.06);
}
.tab-bar button {
    position: relative;
    color: var(--color-ink-muted-48);
    transition: color var(--dur-fast) ease;
}
.tab-bar button.active { color: var(--color-primary); }
.tab-bar button .icon {
    transition: transform var(--dur-med) var(--ease-spring);
}
.tab-bar button.active .icon { transform: translateY(-1px) scale(1.08); }
.tab-bar button::after {
    content: '';
    position: absolute;
    top: 4px;
    left: 50%;
    transform: translateX(-50%) scale(0);
    width: 28px; height: 3px;
    border-radius: 2px;
    background: var(--color-primary);
    transition: transform var(--dur-med) var(--ease-spring);
    opacity: 0;
}
.tab-bar button.active::after { transform: translateX(-50%) scale(1); opacity: 1; }

/* ─── Buttons: refined press + focus ────────────────────────── */
.btn, button.btn {
    position: relative;
    font-weight: 500;
    padding: 11px 20px;
    transition: transform var(--dur-fast) var(--ease-out-quart),
                background var(--dur-fast) ease,
                box-shadow var(--dur-fast) ease;
    box-shadow: 0 1px 0 rgba(255,255,255,0.06) inset,
                0 1px 2px rgba(0, 102, 204, 0.2);
}
.btn:hover { transform: translateY(-0.5px); box-shadow: 0 2px 6px rgba(26,39,68,0.28); }
.btn:active { transform: translateY(0) scale(0.98); }
.btn-outline {
    box-shadow: inset 0 0 0 1px var(--color-primary);
    background: transparent;
}
.btn-outline:hover { background: rgba(26,39,68,0.04); }
.btn-ghost { box-shadow: none; }
.btn-ghost:hover { background: var(--color-parchment); }
.btn-success { background: var(--color-success); box-shadow: 0 1px 2px rgba(29,122,58,0.25); }
.btn-success:hover { box-shadow: 0 2px 6px rgba(29,122,58,0.32); }
.btn-danger  { background: var(--color-danger);  box-shadow: 0 1px 2px rgba(179,38,30,0.25); }
.btn-danger:hover  { box-shadow: 0 2px 6px rgba(179,38,30,0.32); }

/* Ripple */
.btn::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: radial-gradient(circle at var(--rx, 50%) var(--ry, 50%), rgba(255,255,255,0.32), transparent 60%);
    opacity: 0;
    transition: opacity var(--dur-med) ease;
    pointer-events: none;
}
.btn:active::before { opacity: 1; transition: none; }

/* ─── Form inputs ─────────────────────────────────────────── */
.form-group input,
.form-group select,
.form-group textarea {
    border-radius: 10px;
    padding: 12px 14px;
    transition: border-color var(--dur-fast) ease, box-shadow var(--dur-fast) ease, background var(--dur-fast) ease;
}
.form-group input:hover,
.form-group select:hover,
.form-group textarea:hover { border-color: rgba(0,0,0,0.22); }
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
    background: #fff;
    box-shadow: 0 0 0 4px rgba(26,39,68,0.14);
}
.form-group label {
    font-size: 13px;
    font-weight: 500;
    color: var(--color-ink-muted-80);
    text-transform: none;
    letter-spacing: 0;
}

/* Section header — Linear-style small caps */
.form-section-title, .section-h {
    font-family: var(--font-text);
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--color-ink-muted-48);
    margin: var(--s-xl) 0 var(--s-sm);
    padding: 0;
    border: none;
}

/* ─── Activity list — softer rows ─────────────────────────── */
.activity {
    border-radius: 16px;
    box-shadow: var(--shadow-elev-1);
    border: 1px solid var(--color-divider-soft);
}
.activity .act {
    padding: 14px 18px;
    transition: background var(--dur-fast) ease;
    cursor: pointer;
}
.activity .act:hover { background: var(--color-parchment); }
.activity .act .l {
    display: flex; align-items: center; gap: 10px;
    font-weight: 500;
}
.activity .act .l::before {
    content: '';
    width: 28px; height: 28px;
    border-radius: 8px;
    background: var(--color-parchment);
    box-shadow: inset 0 0 0 1px var(--color-divider-soft);
    flex: 0 0 28px;
    background-image: radial-gradient(circle at 50% 50%, var(--color-primary) 0 3px, transparent 4px);
}

/* ─── Search input ────────────────────────────────────────── */
.search-bar { position: relative; }
.search-bar::before {
    content: '⌕';
    position: absolute;
    left: 18px; top: 50%;
    transform: translateY(-50%);
    font-size: 17px;
    color: var(--color-ink-muted-48);
    pointer-events: none;
    z-index: 1;
}
.search-bar input {
    padding-left: 46px;
    padding-right: 46px;
    border-radius: var(--r-pill);
    box-shadow: inset 0 0 0 1px var(--color-hairline);
    border: none;
    transition: box-shadow var(--dur-fast) ease, background var(--dur-fast) ease;
}
.search-bar input:focus {
    box-shadow: inset 0 0 0 1px var(--color-primary), 0 0 0 4px rgba(26,39,68,0.14);
}
.search-bar::after {
    content: '⌘K';
    position: absolute;
    right: 14px; top: 50%;
    transform: translateY(-50%);
    font-size: 11px;
    font-weight: 600;
    color: var(--color-ink-muted-48);
    padding: 3px 7px;
    border-radius: 5px;
    background: var(--color-canvas);
    box-shadow: inset 0 0 0 1px var(--color-divider-soft);
    pointer-events: none;
    letter-spacing: 0.04em;
}

/* ─── Modal: refined entrance ─────────────────────────────── */
.modal-bd { transition: opacity var(--dur-med) ease; }
.modal-bd.show .modal {
    animation: modalIn var(--dur-med) var(--ease-out-expo) both;
}
@keyframes modalIn {
    from { transform: translateY(28px) scale(0.98); opacity: 0; }
    to   { transform: translateY(0)    scale(1);    opacity: 1; }
}
.modal {
    border-radius: 20px 20px 0 0;
    box-shadow: var(--shadow-pop);
}
@media (min-width: 720px) {
    .modal-bd { align-items: center; padding: var(--s-lg); }
    .modal { border-radius: 20px; max-width: 720px; }
}

/* ─── Toast: refined slide ────────────────────────────────── */
.toast {
    background: rgba(29, 29, 31, 0.96);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    box-shadow: 0 12px 32px rgba(0,0,0,0.24);
    border-radius: 12px;
    padding: 13px 20px;
}

/* ─── Loading skeleton ────────────────────────────────────── */
.loading {
    position: relative;
    padding: 0;
    text-align: left;
    color: transparent;
    background: none;
    overflow: hidden;
    min-height: 80px;
}
.loading::before,
.loading::after {
    content: '';
    display: block;
    height: 14px;
    margin: 8px 0;
    background: linear-gradient(90deg, var(--color-parchment) 0%, #fff 50%, var(--color-parchment) 100%);
    background-size: 200% 100%;
    border-radius: 7px;
    animation: shimmer 1.4s linear infinite;
}
.loading::before { width: 60%; height: 22px; margin-top: 4px; }
.loading::after  { width: 90%; }
@keyframes shimmer {
    0%   { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* ─── Empty state ─────────────────────────────────────────── */
.empty {
    padding: 64px var(--s-lg);
    color: var(--color-ink-muted-48);
}
.empty .icon {
    display: inline-flex;
    align-items: center; justify-content: center;
    width: 72px; height: 72px;
    border-radius: 50%;
    background: var(--color-parchment);
    box-shadow: inset 0 0 0 1px var(--color-divider-soft);
    font-size: 30px;
    margin-bottom: var(--s-md);
    opacity: 1;
}

/* ─── Login card: hero feel ───────────────────────────────── */
.login-wrap {
    background: var(--color-parchment);
    background-image:
        radial-gradient(ellipse 80% 50% at 50% -10%, rgba(26,39,68,0.06), transparent 60%),
        radial-gradient(ellipse 60% 40% at 50% 110%, rgba(26,39,68,0.05), transparent 60%);
}
.login-card {
    border: 1px solid rgba(0,0,0,0.06);
    box-shadow: var(--shadow-elev-2);
    border-radius: 22px;
    padding: 44px 36px;
}
.login-card h1 {
    font-size: 40px;
    letter-spacing: -0.03em;
    line-height: 1.05;
    margin-bottom: 6px;
}
.login-card .sub {
    font-size: 15px;
    color: var(--color-ink-muted-48);
    margin-bottom: 28px;
}
.login-card input { border-radius: 12px; padding: 13px 16px; }

/* ─── Scroll-to-top FAB (injected by polish.js) ──────────── */
.fs-fab {
    position: fixed;
    right: 22px;
    bottom: calc(var(--tab-bar-h, 60px) + 22px + env(safe-area-inset-bottom, 0px));
    width: 44px; height: 44px;
    border-radius: 50%;
    background: var(--color-canvas);
    color: var(--color-ink);
    border: 1px solid var(--color-divider-soft);
    box-shadow: var(--shadow-elev-2);
    display: flex; align-items: center; justify-content: center;
    font-size: 18px;
    cursor: pointer;
    opacity: 0;
    transform: translateY(10px) scale(0.9);
    transition: opacity var(--dur-med) ease, transform var(--dur-med) var(--ease-spring);
    z-index: 95;
    pointer-events: none;
}
.fs-fab.show { opacity: 1; transform: translateY(0) scale(1); pointer-events: auto; }
.fs-fab:hover { transform: translateY(-2px) scale(1); }
.fs-fab:active { transform: translateY(0) scale(0.94); }

/* ─── Command palette (cmd-K) ─────────────────────────────── */
.fs-cmdk-bd {
    position: fixed; inset: 0;
    background: rgba(15, 17, 21, 0.4);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    z-index: 500;
    display: none;
    align-items: flex-start;
    justify-content: center;
    padding-top: 12vh;
    animation: cmdkFade var(--dur-fast) ease both;
}
.fs-cmdk-bd.show { display: flex; }
@keyframes cmdkFade { from { opacity: 0; } to { opacity: 1; } }
.fs-cmdk {
    width: 100%; max-width: 560px;
    background: var(--color-canvas);
    border-radius: 16px;
    box-shadow: var(--shadow-pop);
    overflow: hidden;
    animation: cmdkIn var(--dur-med) var(--ease-out-expo) both;
}
@keyframes cmdkIn {
    from { transform: translateY(-12px) scale(0.98); opacity: 0; }
    to   { transform: translateY(0)     scale(1);    opacity: 1; }
}
.fs-cmdk input {
    width: 100%;
    padding: 18px 22px;
    border: none;
    outline: none;
    font-size: 18px;
    background: transparent;
    border-bottom: 1px solid var(--color-divider-soft);
}
.fs-cmdk ul { list-style: none; margin: 0; padding: 8px; max-height: 360px; overflow-y: auto; }
.fs-cmdk li {
    padding: 12px 14px;
    border-radius: 10px;
    font-size: 15px;
    display: flex; align-items: center; gap: 12px;
    cursor: pointer;
    color: var(--color-ink);
}
.fs-cmdk li[aria-selected="true"],
.fs-cmdk li:hover {
    background: var(--color-parchment);
}
.fs-cmdk li .kbd {
    margin-left: auto;
    font-size: 11px;
    color: var(--color-ink-muted-48);
    padding: 2px 6px;
    border-radius: 4px;
    background: var(--color-parchment);
    box-shadow: inset 0 0 0 1px var(--color-divider-soft);
}
.fs-cmdk-foot {
    padding: 10px 16px;
    font-size: 12px;
    color: var(--color-ink-muted-48);
    background: var(--color-parchment);
    border-top: 1px solid var(--color-divider-soft);
    display: flex; gap: 14px;
}
.fs-cmdk-foot kbd {
    background: var(--color-canvas);
    padding: 2px 6px;
    border-radius: 4px;
    box-shadow: inset 0 0 0 1px var(--color-divider-soft);
    font-family: var(--font-text);
    font-size: 11px;
}

/* ─── Desktop sidebar layout (≥1024) ─────────────────────── */
@media (min-width: 1024px) {
    body.signed-in {
        display: grid;
        grid-template-columns: 232px 1fr;
        grid-template-rows: auto 1fr;
        min-height: 100vh;
        padding-bottom: 0 !important;
    }
    body.signed-in .app-header {
        grid-column: 1 / -1;
        position: sticky;
    }
    body.signed-in #app {
        display: contents;
    }
    body.signed-in main {
        grid-column: 2;
        max-width: 1100px;
        margin: 0 0 0 0;
        padding: 36px 48px 64px;
    }
    body.signed-in .tab-bar {
        position: sticky;
        grid-column: 1;
        grid-row: 2;
        align-self: start;
        top: 64px;
        height: calc(100vh - 64px);
        flex-direction: column;
        padding: 16px 12px;
        bottom: auto;
        background: var(--color-parchment);
        border-top: none;
        border-right: 1px solid var(--color-divider-soft);
        backdrop-filter: none;
        gap: 4px;
    }
    body.signed-in .tab-bar button {
        flex: 0 0 auto;
        height: 44px;
        width: 100%;
        flex-direction: row;
        justify-content: flex-start;
        gap: 12px;
        padding: 0 14px;
        border-radius: 10px;
        font-size: 14px;
        font-weight: 500;
    }
    body.signed-in .tab-bar button .icon { font-size: 18px; }
    body.signed-in .tab-bar button::after { display: none; }
    body.signed-in .tab-bar button.active {
        background: var(--color-canvas);
        color: var(--color-ink);
        box-shadow: 0 1px 2px rgba(0,0,0,0.04), 0 0 0 1px rgba(0,0,0,0.04);
    }
    body.signed-in .tab-bar button.active .icon { color: var(--color-primary); transform: none; }
    body.signed-in .fs-fab { bottom: 28px; }
    .kpi-grid { grid-template-columns: repeat(4, 1fr); }
}

/* ─── Reduce motion (accessibility) ───────────────────────── */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
    }
    html { scroll-behavior: auto; }
}

/* ════════════════════════════════════════════════════════════════
   DARK MODE — opt-in via [data-theme="dark"] on <html>
   Auto-applied by polish.js based on saved pref or system.
   ════════════════════════════════════════════════════════════════ */
html[data-theme="dark"] {
    --color-canvas:       #0b0b0d;
    --color-parchment:    #131316;
    --color-pearl:        #18181c;
    --color-ink:          #f5f5f7;
    --color-body:         #f5f5f7;
    --color-ink-muted-80: #d4d4d8;
    --color-ink-muted-48: #8a8a90;
    --color-hairline:     #2b2b30;
    --color-divider-soft: #1f1f23;
    --color-primary:      #7b9fd4;
    --color-primary-focus:#9ab5e0;
    --shadow-elev-1: 0 1px 2px rgba(0,0,0,0.4), 0 2px 6px rgba(0,0,0,0.3);
    --shadow-elev-2: 0 4px 10px rgba(0,0,0,0.5), 0 10px 24px rgba(0,0,0,0.45);
    --shadow-pop:    0 12px 32px rgba(0,0,0,0.6);
    color-scheme: dark;
}
html[data-theme="dark"] body { background: var(--color-canvas); }
html[data-theme="dark"] .app-header { background: rgba(11,11,13,0.7); }
html[data-theme="dark"] .app-header.is-scrolled { background: rgba(11,11,13,0.92); }
html[data-theme="dark"] .tab-bar { background: rgba(11,11,13,0.86); border-top-color: rgba(255,255,255,0.06); }
html[data-theme="dark"] .login-wrap {
    background: var(--color-canvas);
    background-image:
        radial-gradient(ellipse 80% 50% at 50% -10%, rgba(41,151,255,0.10), transparent 60%),
        radial-gradient(ellipse 60% 40% at 50% 110%, rgba(41,151,255,0.07), transparent 60%);
}
html[data-theme="dark"] .login-card { background: var(--color-pearl); border-color: rgba(255,255,255,0.07); }
html[data-theme="dark"] .kpi,
html[data-theme="dark"] .card,
html[data-theme="dark"] .activity,
html[data-theme="dark"] .chart-wrap { background: var(--color-pearl); border-color: var(--color-hairline); }
html[data-theme="dark"] .kpi:hover,
html[data-theme="dark"] .card:hover { border-color: rgba(255,255,255,0.18); }
html[data-theme="dark"] .form-group input,
html[data-theme="dark"] .form-group select,
html[data-theme="dark"] .form-group textarea,
html[data-theme="dark"] .search-bar input,
html[data-theme="dark"] .login-card input {
    background: var(--color-pearl);
    color: var(--color-ink);
    border-color: var(--color-hairline);
}
html[data-theme="dark"] .form-group input:focus,
html[data-theme="dark"] .form-group select:focus,
html[data-theme="dark"] .form-group textarea:focus,
html[data-theme="dark"] .search-bar input:focus,
html[data-theme="dark"] .login-card input:focus {
    box-shadow: 0 0 0 4px rgba(41,151,255,0.22);
    border-color: var(--color-primary);
}
html[data-theme="dark"] .chips,
html[data-theme="dark"] .carrier-chips { background: #1a1a1e; box-shadow: inset 0 0 0 1px rgba(255,255,255,0.05); }
html[data-theme="dark"] .chip.active,
html[data-theme="dark"] .carrier-chips button.active {
    background: #2a2a30 !important;
    color: #fff;
    box-shadow: 0 1px 2px rgba(0,0,0,0.4), 0 0 0 1px rgba(255,255,255,0.08) !important;
}
html[data-theme="dark"] .modal,
html[data-theme="dark"] .ac-list,
html[data-theme="dark"] .sheet,
html[data-theme="dark"] .fs-cmdk,
html[data-theme="dark"] .kebab-menu { background: var(--color-pearl); border-color: var(--color-hairline); color: var(--color-ink); }
html[data-theme="dark"] .ac-list .ac-item:hover,
html[data-theme="dark"] .sheet-item:hover,
html[data-theme="dark"] .kebab-item:hover,
html[data-theme="dark"] .activity .act:hover,
html[data-theme="dark"] .fs-cmdk li:hover,
html[data-theme="dark"] .fs-cmdk li[aria-selected="true"] { background: #1a1a1e; }
html[data-theme="dark"] .toast { background: rgba(245,245,247,0.96); color: #1d1d1f; }
html[data-theme="dark"] .vol-badge,
html[data-theme="dark"] .chargeable-bar,
html[data-theme="dark"] .total-bar { background: #1a1a1e; }
html[data-theme="dark"] .tag-DRAFT    { background: rgba(165,99,0,0.12);  box-shadow: inset 0 0 0 1px rgba(165,99,0,0.32); }
html[data-theme="dark"] .tag-BILLED,
html[data-theme="dark"] .tag-INVOICED { background: rgba(41,151,255,0.12); box-shadow: inset 0 0 0 1px rgba(41,151,255,0.3); }
html[data-theme="dark"] .tag-SENT     { background: rgba(255,69,58,0.12);  color: #ff6961; box-shadow: inset 0 0 0 1px rgba(255,69,58,0.3); }
html[data-theme="dark"] .tag-PAID     { background: rgba(48,209,88,0.12);  color: #50e07a; box-shadow: inset 0 0 0 1px rgba(48,209,88,0.3); }
html[data-theme="dark"] .tag-VOID     { background: #1a1a1e; color: var(--color-ink-muted-48); box-shadow: inset 0 0 0 1px var(--color-hairline); }
html[data-theme="dark"] .fs-fab { background: var(--color-pearl); color: var(--color-ink); border-color: var(--color-hairline); }
html[data-theme="dark"] .loading::before,
html[data-theme="dark"] .loading::after {
    background: linear-gradient(90deg, #18181c 0%, #25252a 50%, #18181c 100%);
    background-size: 200% 100%;
}
html[data-theme="dark"] body.signed-in .tab-bar { background: #0f0f12; border-right-color: var(--color-hairline); }
html[data-theme="dark"] body.signed-in .tab-bar button.active {
    background: #1f1f24;
    color: var(--color-ink);
    box-shadow: 0 1px 2px rgba(0,0,0,0.5), 0 0 0 1px rgba(255,255,255,0.05);
}

/* ════════════════════════════════════════════════════════════════
   THEME TOGGLE BUTTON
   ════════════════════════════════════════════════════════════════ */
.fs-theme-toggle {
    display: inline-flex;
    align-items: center; justify-content: center;
    width: 36px; height: 36px;
    border-radius: 50%;
    background: transparent;
    color: var(--color-ink-muted-48);
    border: 1px solid var(--color-divider-soft);
    cursor: pointer;
    font-size: 15px;
    transition: background var(--dur-fast) ease, color var(--dur-fast) ease, transform var(--dur-fast) var(--ease-out-quart);
    margin-right: 8px;
}
.fs-theme-toggle:hover { background: var(--color-parchment); color: var(--color-ink); transform: rotate(15deg); }
.fs-theme-toggle:active { transform: scale(0.92); }

/* ════════════════════════════════════════════════════════════════
   SPARKLINE  (auto-injected into .kpi)
   ════════════════════════════════════════════════════════════════ */
.fs-spark {
    position: absolute;
    right: 16px;
    bottom: 14px;
    width: 88px;
    height: 28px;
    pointer-events: none;
    opacity: 0.95;
}
.fs-spark path.area {
    fill: rgba(0, 102, 204, 0.08);
}
.fs-spark path.line {
    fill: none;
    stroke: var(--color-primary);
    stroke-width: 1.5;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-dasharray: 240;
    stroke-dashoffset: 240;
    animation: sparkDraw 0.9s var(--ease-out-quart) 0.15s forwards;
}
.fs-spark circle.dot {
    fill: var(--color-primary);
    r: 2.4;
    opacity: 0;
    animation: sparkDot 0.3s ease 1s forwards;
}
@keyframes sparkDraw { to { stroke-dashoffset: 0; } }
@keyframes sparkDot  { to { opacity: 1; } }
.kpi.alert   .fs-spark path.line  { stroke: var(--color-danger); }
.kpi.alert   .fs-spark path.area  { fill: rgba(179,38,30,0.08); }
.kpi.alert   .fs-spark circle.dot { fill: var(--color-danger); }
.kpi.success .fs-spark path.line  { stroke: var(--color-success); }
.kpi.success .fs-spark path.area  { fill: rgba(29,122,58,0.08); }
.kpi.success .fs-spark circle.dot { fill: var(--color-success); }
.kpi.warning .fs-spark path.line  { stroke: var(--color-warn); }
.kpi.warning .fs-spark path.area  { fill: rgba(165,99,0,0.08); }
.kpi.warning .fs-spark circle.dot { fill: var(--color-warn); }
.kpi { padding-bottom: 46px; min-height: 124px; }
.kpi-grid .kpi { padding-bottom: 42px; min-height: 110px; }
.kpi-grid .fs-spark { width: 70px; height: 22px; bottom: 12px; right: 12px; }

/* ════════════════════════════════════════════════════════════════
   DRAG-TO-REORDER
   ════════════════════════════════════════════════════════════════ */
.kpi-grid > .kpi {
    cursor: grab;
}
.kpi-grid > .kpi[draggable="true"]:active { cursor: grabbing; }
.kpi-grid > .kpi.fs-dragging {
    opacity: 0.45;
    transform: scale(0.97);
    box-shadow: var(--shadow-elev-2);
}
.kpi-grid > .kpi.fs-drop-over {
    box-shadow: 0 0 0 2px var(--color-primary), var(--shadow-elev-1);
    border-color: var(--color-primary);
}
.kpi-grid > .kpi .fs-drag-handle {
    position: absolute;
    top: 12px; right: 12px;
    width: 22px; height: 22px;
    border-radius: 6px;
    color: var(--color-ink-muted-48);
    font-size: 12px;
    line-height: 1;
    display: flex; align-items: center; justify-content: center;
    cursor: grab;
    opacity: 0;
    transition: opacity var(--dur-fast) ease, background var(--dur-fast) ease;
}
.kpi:hover .fs-drag-handle { opacity: 1; }
.fs-drag-handle:hover { background: var(--color-parchment); }

/* ════════════════════════════════════════════════════════════════
   VIEW TRANSITIONS — Cross-fade with slight zoom for panel switch
   (Chromium 111+ / progressive — older browsers fall back to fadeIn)
   ════════════════════════════════════════════════════════════════ */
::view-transition-old(root) {
    animation: vtOut 0.22s ease both;
}
::view-transition-new(root) {
    animation: vtIn 0.32s var(--ease-out-expo) both;
}
@keyframes vtOut { to { opacity: 0; transform: scale(0.98); } }
@keyframes vtIn  { from { opacity: 0; transform: scale(1.01); } }