/* AERai Seller — application styles.
   Colors are theme tokens (light and dark below); components only reference tokens, so every page
   follows the selected theme. No inline styles are allowed (Content-Security-Policy), so all
   presentation lives here. */

/* ---------- Theme tokens ---------- */
:root,
[data-bs-theme="light"] {
    --app-bg: #f4f6fa;
    --surface: #ffffff;
    --surface-2: #f8fafc;
    --border: #e4e8ef;
    --text: #0f172a;
    --muted: #5b6779;
    /* Borders that identify a control (inputs, segmented switches): 3:1 against the surface (WCAG 1.4.11). */
    --border-strong: #808b9e;
    --brand: #2563eb;
    /* Keyboard focus: one ring for every control. */
    --focus: #2563eb;
    --brand-soft: rgba(37, 99, 235, 0.10);
    --positive: #047857;
    --positive-soft: rgba(4, 120, 87, 0.10);
    --negative: #dc2626;
    --negative-soft: rgba(220, 38, 38, 0.10);
    --warning: #b45309;
    --warning-soft: rgba(217, 119, 6, 0.12);
    --info: #2563eb;
    --info-soft: rgba(37, 99, 235, 0.10);
    /* Text on the soft backgrounds above (pills, deltas, soft buttons): darker so it keeps 4.5:1. */
    --negative-text: #b91c1c;
    --warning-text: #92400e;
    --info-text: #1d4ed8;
    --sidebar-bg: #0b1b33;
    --sidebar-fg: #b8c4d6;
    --sidebar-muted: #8796ae;
    --sidebar-hover: rgba(255, 255, 255, 0.07);
    --sidebar-active: #1d4ed8;
    --chart-bar: #b9cdf7;
    --chart-bar-current: #2563eb;
    --chart-grid: #e9edf3;
    --shadow: 0 1px 2px rgba(15, 23, 42, 0.04), 0 1px 3px rgba(15, 23, 42, 0.06);
    /* Raised above the page (save bar, floating panels). */
    --shadow-lg: 0 -4px 16px rgba(15, 23, 42, 0.08);
    --violet: #7c3aed;
    --violet-soft: rgba(124, 58, 237, 0.10);
    --teal: #0f766e;
    --teal-soft: rgba(15, 118, 110, 0.10);
    /* Product colors (worksheet grouping): readable as text on the surface, so dark mode lightens them. */
    --c-black: #1f2937;
    --c-white: #64748b;
    --c-gray: #6b7280;
    --c-red: #dc2626;
    --c-orange: #ea580c;
    --c-yellow: #a16207;
    --c-green: #16a34a;
    --c-teal: #0d9488;
    --c-blue: #2563eb;
    --c-navy: #1e3a8a;
    --c-purple: #7c3aed;
    --c-pink: #db2777;
    --c-brown: #92400e;
    --c-beige: #a8875a;
    --c-multi: #9333ea;
    /* Sidebar category colors: the sidebar is dark in both themes, so these are bright in both. */
    --nav-overview: #60a5fa;
    --nav-operations: #2dd4bf;
    --nav-bookkeeping: #a78bfa;
    --nav-tools: #fbbf24;
    --nav-admin: #fb7185;
    --sidebar-strong: #ffffff;
    --sidebar-border: rgba(255, 255, 255, 0.12);
    /* Type, spacing, and radius scales: new rules use these instead of one-off values. */
    --fs-xs: 0.72rem;
    --fs-sm: 0.8rem;
    --fs-md: 0.875rem;
    --space-1: 0.25rem;
    --space-2: 0.5rem;
    --space-3: 0.75rem;
    --space-4: 1rem;
    --radius-sm: 0.4rem;
    --radius-md: 0.6rem;
    --radius-pill: 999px;
}

[data-bs-theme="dark"] {
    --app-bg: #0b0f17;
    --surface: #121826;
    --surface-2: #171f30;
    --border: #232c3d;
    --text: #e5e9f0;
    --muted: #8b97ab;
    --border-strong: #66738c;
    --brand: #60a5fa;
    --focus: #60a5fa;
    --brand-soft: rgba(96, 165, 250, 0.14);
    --positive: #34d399;
    --positive-soft: rgba(52, 211, 153, 0.12);
    --negative: #f87171;
    --negative-soft: rgba(248, 113, 113, 0.12);
    --warning: #fbbf24;
    --warning-soft: rgba(251, 191, 36, 0.12);
    --info: #60a5fa;
    --info-soft: rgba(96, 165, 250, 0.12);
    --negative-text: #f87171;
    --warning-text: #fbbf24;
    --info-text: #60a5fa;
    --sidebar-bg: #080b12;
    --sidebar-fg: #a3aec0;
    --sidebar-muted: #7a879c;
    --sidebar-hover: rgba(255, 255, 255, 0.05);
    --sidebar-active: #1e3a8a;
    --chart-bar: #2a4472;
    --chart-bar-current: #60a5fa;
    --chart-grid: #1f2737;
    --shadow: none;
    --shadow-lg: 0 -4px 16px rgba(0, 0, 0, 0.45);
    --violet: #a78bfa;
    --violet-soft: rgba(167, 139, 250, 0.14);
    --teal: #2dd4bf;
    --teal-soft: rgba(45, 212, 191, 0.12);
    --c-black: #cbd5e1;
    --c-white: #f1f5f9;
    --c-gray: #9ca3af;
    --c-red: #f87171;
    --c-orange: #fb923c;
    --c-yellow: #facc15;
    --c-green: #4ade80;
    --c-teal: #2dd4bf;
    --c-blue: #60a5fa;
    --c-navy: #818cf8;
    --c-purple: #a78bfa;
    --c-pink: #f472b6;
    --c-brown: #d6a26a;
    --c-beige: #e2c9a0;
    --c-multi: #c084fc;
    --nav-overview: #93c5fd;
    --nav-operations: #5eead4;
    --nav-bookkeeping: #c4b5fd;
    --nav-tools: #fcd34d;
    --nav-admin: #fda4af;
    --sidebar-strong: #f8fafc;
    --sidebar-border: rgba(255, 255, 255, 0.08);
}

/* Bootstrap integration: surfaces and text use the tokens in both themes. */
:root,
[data-bs-theme] {
    --bs-body-bg: var(--app-bg);
    --bs-body-color: var(--text);
    --bs-secondary-color: var(--muted);
    --bs-border-color: var(--border);
    --bs-link-color-rgb: 37, 99, 235;
}

[data-bs-theme="dark"] {
    --bs-link-color-rgb: 96, 165, 250;
}

html, body { height: 100%; }
body { background-color: var(--app-bg); color: var(--text); font-feature-settings: "tnum" 1; }

.card {
    --bs-card-bg: var(--surface);
    --bs-card-border-color: var(--border);
    --bs-card-cap-bg: transparent;
    box-shadow: var(--shadow);
}
.card-header { font-weight: 600; font-size: 0.875rem; border-bottom-color: var(--border); }
.table { --bs-table-bg: transparent; --bs-table-hover-bg: var(--surface-2); --bs-table-border-color: var(--border); }
.table > thead th { color: var(--muted); font-weight: 600; font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.04em; }
.text-muted-token { color: var(--muted); }
.text-bad { color: var(--negative); }
.text-warn { color: var(--warning); }
.text-positive { color: var(--positive); }
.text-negative { color: var(--negative); }

/* ---------- Shell ---------- */
.app-shell { display: flex; min-height: 100vh; }

/* Sticky with its own scroll, so a long menu never stretches the page or scrolls away with the content. */
.app-sidebar {
    position: sticky;
    top: 0;
    height: 100vh;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    scrollbar-color: var(--sidebar-hover) transparent;
    width: 15rem;
    flex-shrink: 0;
    background: var(--sidebar-bg);
    color: var(--sidebar-fg);
    padding: 0.85rem 0.75rem 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
    transition: width 0.18s ease, padding 0.18s ease;
}

.sidebar-head { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; padding: 0 0 0.75rem; }
.app-brand { display: inline-flex; align-items: center; gap: 0.55rem; color: var(--sidebar-strong); font-weight: 700; font-size: 1.15rem; text-decoration: none; padding: 0.25rem 0.25rem; min-width: 0; }
.app-brand:hover { color: var(--sidebar-strong); }
.brand-text { white-space: nowrap; }
.brand-text span { font-weight: 300; }
/* The logo file is black ink on transparent; used as a mask so its color comes from a theme token
   (body text on the sign-in card) instead of being baked into the image. */
.login-logo {
    display: block; flex-shrink: 0; aspect-ratio: 459 / 209; background-color: currentColor;
    -webkit-mask: url("../img/aerai-logo.png") center / contain no-repeat;
    mask: url("../img/aerai-logo.png") center / contain no-repeat;
}
.brand-mark {
    display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
    width: 1.85rem; height: 1.85rem; border-radius: 0.5rem;
    background: var(--sidebar-active); color: var(--sidebar-strong); font-size: 1rem; font-weight: 700;
}

.nav-rail-toggle, .nav-toggle-label {
    display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
    width: 2rem; height: 2rem; padding: 0; border-radius: 0.5rem; cursor: pointer;
    border: 1px solid var(--sidebar-border); background: transparent; color: var(--sidebar-fg);
}
.nav-rail-toggle:hover, .nav-toggle-label:hover { background: var(--sidebar-hover); color: var(--sidebar-strong); }
.nav-rail-toggle .icon, .nav-toggle-label .icon { width: 1.1rem; height: 1.1rem; }
/* The rail is applied by script, so the button that toggles it only appears when script runs. */
html:not(.js) .nav-rail-toggle { display: none; }
.nav-toggle-label { display: none; }
/* Visually hidden but still focusable, so keyboard users can open the mobile menu. */
.nav-toggle { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.app-sidebar:has(.nav-toggle:focus-visible) .nav-toggle-label { outline: 2px solid var(--brand); outline-offset: 2px; }

.nav-links { display: flex; flex-direction: column; gap: 0.35rem; }

/* Categories: a .nav-group-* class sets --nav-accent, which colors the category's icon, rule, and current page. */
.nav-group-overview { --nav-accent: var(--nav-overview); }
.nav-group-operations { --nav-accent: var(--nav-operations); }
.nav-group-bookkeeping { --nav-accent: var(--nav-bookkeeping); }
.nav-group-tools { --nav-accent: var(--nav-tools); }
.nav-group-admin { --nav-accent: var(--nav-admin); }

.app-sidebar summary { list-style: none; }
.app-sidebar summary::-webkit-details-marker { display: none; }

.app-sidebar .nav-section {
    display: flex; align-items: center; gap: 0.6rem;
    padding: 0.45rem 0.75rem; border-radius: 0.5rem; cursor: pointer; user-select: none;
    font-size: 0.7rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em;
    color: var(--sidebar-muted);
}
.app-sidebar .nav-section:hover { background: var(--sidebar-hover); color: var(--sidebar-fg); }
.app-sidebar .nav-section > .icon { width: 1rem; height: 1rem; color: var(--nav-accent); }
.nav-section .nav-label { flex: 1; }
.nav-chevron { display: inline-flex; transition: transform 0.15s ease; }
.nav-chevron .icon { width: 0.9rem; height: 0.9rem; }
.nav-group:not([open]) > summary .nav-chevron { transform: rotate(-90deg); }

/* A thin rule in the category color ties its links together. */
.nav-group-items { display: flex; flex-direction: column; gap: 0.125rem; margin: 0.15rem 0 0.25rem 1.2rem; padding-left: 0.4rem; border-left: 2px solid color-mix(in srgb, var(--nav-accent) 35%, transparent); }

.app-sidebar .nav-link {
    display: flex; align-items: center; gap: 0.65rem;
    color: var(--sidebar-fg); border-radius: 0.5rem; padding: 0.42rem 0.65rem; font-size: 0.9rem;
    transition: background-color 0.12s ease, color 0.12s ease;
}
.app-sidebar .nav-link .icon { width: 1.05rem; height: 1.05rem; color: var(--sidebar-muted); transition: color 0.12s ease; }
.app-sidebar .nav-link:hover { background: var(--sidebar-hover); color: var(--sidebar-strong); }
.app-sidebar .nav-link:hover .icon { color: var(--nav-accent); }
.app-sidebar .nav-link.active { background: color-mix(in srgb, var(--nav-accent) 22%, transparent); color: var(--sidebar-strong); box-shadow: inset 3px 0 0 var(--nav-accent); font-weight: 500; }
.app-sidebar .nav-link.active .icon { color: var(--nav-accent); }
.nav-label { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.app-sidebar .nav-section:focus-visible,
.app-sidebar .nav-link:focus-visible,
.nav-sub-toggle:focus-visible,
.nav-rail-toggle:focus-visible { outline: 2px solid var(--nav-accent, var(--brand)); outline-offset: 1px; box-shadow: none; }

/* Inventory → Worksheet: the parent keeps its own link, and the chevron beside it folds the sub-pages away. */
.nav-subgroup { position: relative; }
.nav-subgroup > .nav-link { padding-right: 2.2rem; }
.nav-sub-toggle {
    position: absolute; top: 0.2rem; right: 0.25rem;
    display: inline-flex; align-items: center; justify-content: center;
    width: 1.6rem; height: 1.6rem; border-radius: 0.4rem; cursor: pointer; color: var(--sidebar-muted);
}
.nav-sub-toggle:hover { background: var(--sidebar-hover); color: var(--sidebar-strong); }
.nav-sub-toggle .icon { width: 0.9rem; height: 0.9rem; transition: transform 0.15s ease; }
.nav-subgroup > details:not([open]) .nav-sub-toggle .icon { transform: rotate(-90deg); }
.app-sidebar .nav-link.nav-sub { margin-left: 1rem; font-size: 0.85rem; }

.app-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }

.app-topbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    padding: 0.75rem 1.5rem;
    background: var(--surface);
    border-bottom: 1px solid var(--border);
}

.app-content { padding: 1.5rem; }
.topbar-actions { display: flex; align-items: center; gap: 1rem; }

/* Icon rail (desktop only): the sidebar shrinks to icons; labels are visually hidden, not removed,
   so screen readers still announce them, and site.js shows them as tooltips. */
@media (min-width: 769px) {
    :root[data-nav="rail"] .app-sidebar { width: 4.25rem; padding-left: 0.6rem; padding-right: 0.6rem; }
    :root[data-nav="rail"] .sidebar-head { flex-direction: column; align-items: center; }
    :root[data-nav="rail"] .brand-text,
    :root[data-nav="rail"] .nav-label {
        position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
    }
    :root[data-nav="rail"] .nav-rail-toggle .icon { transform: scaleX(-1); }
    :root[data-nav="rail"] .nav-chevron { display: none; }
    :root[data-nav="rail"] .app-sidebar .nav-section { justify-content: center; padding: 0.5rem 0; border-top: 1px solid var(--sidebar-border); border-radius: 0; }
    :root[data-nav="rail"] .nav-group:first-child > .nav-section { border-top: 0; }
    :root[data-nav="rail"] .app-sidebar .nav-section > .icon { width: 0.9rem; height: 0.9rem; }
    :root[data-nav="rail"] .nav-group:not([open]) > .nav-section > .icon { opacity: 0.55; }
    :root[data-nav="rail"] .nav-group-items { margin: 0; padding: 0; border: 0; }
    :root[data-nav="rail"] .app-sidebar .nav-link { justify-content: center; padding: 0.55rem 0; }
    :root[data-nav="rail"] .app-sidebar .nav-link .icon { width: 1.2rem; height: 1.2rem; }
    :root[data-nav="rail"] .nav-subgroup > .nav-link { padding-right: 0; }
    :root[data-nav="rail"] .app-sidebar .nav-link.nav-sub { margin-left: 0; }
    :root[data-nav="rail"] .nav-sub-toggle { top: auto; bottom: -0.1rem; right: -0.15rem; width: 1rem; height: 1rem; }
    :root[data-nav="rail"] .nav-sub-toggle .icon { width: 0.7rem; height: 0.7rem; }
}

@media (max-width: 768px) {
    .app-shell { flex-direction: column; }
    .app-sidebar { position: static; height: auto; overflow: visible; width: 100%; padding: 0.5rem 0.75rem; }
    .sidebar-head { padding: 0; }
    .nav-rail-toggle { display: none; }
    .nav-toggle-label { display: inline-flex; }
    .nav-links { display: none; padding: 0.5rem 0 0.25rem; }
    .nav-toggle:checked ~ .nav-links { display: flex; }
    .app-content { padding: 1rem; }
    .app-topbar { padding: 0.75rem 1rem; flex-wrap: wrap; row-gap: 0.5rem; }
    .app-topbar h1 { font-size: 1.05rem; }
    /* Marketplace, theme, and sign-out wrap under the title instead of running off-screen. */
    .topbar-actions { flex-wrap: wrap; gap: 0.5rem; }
}



/* ---------- Theme toggle ---------- */
.theme-toggle { display: inline-flex; padding: 2px; border: 1px solid var(--border); border-radius: 999px; background: var(--surface-2); }
.theme-toggle-btn {
    display: inline-flex; align-items: center; justify-content: center;
    width: 28px; height: 24px; border: 0; border-radius: 999px; background: transparent; color: var(--muted); padding: 0;
}
.theme-toggle-btn svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.theme-toggle-btn:hover { color: var(--text); }
.theme-toggle-btn.active { background: var(--surface); color: var(--brand); box-shadow: 0 0 0 1px var(--border); }
/* ---------- Marketplace switcher ---------- */
.market-switch { display: inline-flex; padding: 2px; border: 1px solid var(--border); border-radius: 999px; background: var(--surface-2); margin: 0; }
.market-switch-btn {
    min-width: 2.4rem; height: 26px; padding: 0 0.6rem; border: 0; border-radius: 999px; background: transparent;
    color: var(--muted); font-size: 0.78rem; font-weight: 600; letter-spacing: 0.02em;
}
.market-switch-btn:hover:not(:disabled) { color: var(--text); }
.market-switch-btn.active { background: var(--surface); color: var(--brand); box-shadow: 0 0 0 1px var(--border); }
.market-switch-btn:disabled { opacity: 0.45; cursor: not-allowed; }
.login-theme { position: fixed; top: 1rem; right: 1rem; z-index: 10; }

/* ---------- Dashboard ---------- */
.segmented { display: inline-flex; padding: 3px; border: 1px solid var(--border-strong); border-radius: 0.6rem; background: var(--surface); }
.segmented a { padding: 0.35rem 0.9rem; border-radius: 0.45rem; color: var(--muted); text-decoration: none; font-size: 0.875rem; font-weight: 500; }
.segmented a:hover { color: var(--text); }
.segmented a.active { background: var(--brand-soft); color: var(--brand); }
.segmented-sm a { padding: 0.25rem 0.7rem; font-size: 0.8rem; }
.segmented-count { margin-left: 0.3rem; padding: 0 0.35rem; border-radius: 999px; background: var(--surface-2); color: var(--muted); font-size: 0.72rem; font-weight: 600; }
.segmented a.active .segmented-count { background: var(--surface); color: var(--brand); }
.segmented a.has-warn .segmented-count { background: var(--warning-soft); color: var(--warning-text); }

/* Partial reloads (site.js): the section being refreshed dims until its new content arrives. The delay
   keeps quick answers from flickering. */
[data-fragment] { position: relative; scroll-margin-top: 1rem; }
[data-fragment][aria-busy="true"] { opacity: 0.55; pointer-events: none; transition: opacity 0.15s ease 0.15s; }
/* A thin bar runs along the top of the section while it loads, so a slow answer still shows progress. */
[data-fragment][aria-busy="true"]::before {
    content: ""; position: absolute; z-index: 6; top: 0; left: 0; height: 3px; width: 35%; border-radius: var(--radius-pill);
    background: var(--brand); animation: fragment-progress 1.1s ease-in-out infinite;
}
@keyframes fragment-progress { 0% { left: -35%; } 100% { left: 100%; } }
[data-fragment]:focus { outline: none; }

.dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; flex-shrink: 0; }
.dot-ok { background: var(--positive); }
.dot-warn { background: var(--warning); }
.dot-bad { background: var(--negative); }
.dot-info { background: var(--info); }

.kpi { padding: 1.1rem 1.25rem; }
.kpi-label { font-size: 0.78rem; color: var(--muted); font-weight: 500; }
.kpi-value { font-size: 1.85rem; font-weight: 650; letter-spacing: -0.02em; line-height: 1.2; margin-top: 0.25rem; }
.kpi-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 0.15rem 0.5rem; margin-top: 0.35rem; font-size: 0.78rem; color: var(--muted); }

.delta { display: inline-flex; align-items: center; gap: 0.15rem; padding: 0.05rem 0.45rem; border-radius: 999px; font-size: 0.75rem; font-weight: 600; white-space: nowrap; }
.delta-up { color: var(--positive); background: var(--positive-soft); }
.delta-down { color: var(--negative-text); background: var(--negative-soft); }
.delta-flat { color: var(--muted); background: var(--surface-2); }

.chart { width: 100%; height: auto; max-height: 300px; display: block; }
.chart .bar { fill: var(--chart-bar); }
.chart .bar-current { fill: var(--chart-bar-current); }
.chart .bar-future { fill: none; stroke: var(--chart-grid); stroke-dasharray: 3 3; }
.chart .grid { stroke: var(--chart-grid); stroke-width: 1; }
.chart .axis { font-size: 11px; fill: var(--muted); }
.chart .axis-strong { font-weight: 700; fill: var(--text); }
.chart .axis-group { font-weight: 600; fill: var(--text); text-transform: uppercase; letter-spacing: 0.04em; font-size: 10px; }
.chart .bar-value { font-size: 11px; font-weight: 600; fill: var(--text); }
.chart .bar-units { font-size: 10px; font-weight: 500; fill: var(--muted); }
.chart-summary { font-size: 0.8rem; color: var(--muted); }

.attention-list { list-style: none; margin: 0; padding: 0; }
.attention-item { display: flex; gap: 0.75rem; padding: 0.8rem 1.25rem; border-top: 1px solid var(--border); text-decoration: none; color: inherit; }
.attention-item:first-child { border-top: 0; }
.attention-item:hover { background: var(--surface-2); color: inherit; }
.attention-item .status-light { margin-top: 0.4rem; }
.attention-title { font-weight: 600; font-size: 0.9rem; }
.attention-detail { font-size: 0.8rem; color: var(--muted); word-break: break-word; }
.attention-go { margin-left: auto; color: var(--muted); align-self: center; }
.all-clear { display: flex; align-items: center; gap: 0.75rem; padding: 1.5rem 1.25rem; }
.all-clear-icon { width: 36px; height: 36px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: var(--positive-soft); color: var(--positive); }
.all-clear-icon svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }

.share { width: 100%; height: 6px; display: block; }
.share .track { fill: var(--surface-2); }
.share .fill { fill: var(--chart-bar-current); }
.product-title { font-weight: 500; max-width: min(22rem, 48vw); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.product-sku { font-size: 0.75rem; color: var(--muted); }

.stat-row { display: flex; justify-content: space-between; padding: 0.4rem 0; font-size: 0.875rem; border-top: 1px solid var(--border); }
.stat-row:first-of-type { border-top: 0; }
.stat-row .label { color: var(--muted); }
.big-number { font-size: 1.6rem; font-weight: 650; letter-spacing: -0.02em; }

.sync-list { list-style: none; margin: 0; padding: 0; font-size: 0.85rem; }
.sync-list li { display: flex; align-items: center; gap: 0.5rem; padding: 0.45rem 0; border-top: 1px solid var(--border); }
.sync-list li:first-child { border-top: 0; }
.sync-list .when { margin-left: auto; display: inline-flex; align-items: center; gap: 0.5rem; }

/* ---------- Shared components ---------- */
.search-input { max-width: 20rem; }
/* Long values (Amazon titles can be 200+ characters) are cut with an ellipsis; the full text is in the tooltip. */
.cell-truncate { max-width: min(28rem, 40vw); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.raw-line { font-family: var(--bs-font-monospace); font-size: 0.8rem; white-space: pre-wrap; word-break: break-all; }

/* ASP.NET always renders the validation summary container; hide it until it actually has errors,
   otherwise its alert styling shows an empty red box on first load. */
.validation-summary-valid { display: none; }

/* ---------- Sign-in ---------- */
.login-wrapper { min-height: 100vh; display: flex; align-items: center; justify-content: center; background: var(--sidebar-bg); padding: 1rem; }
.login-card { width: 100%; max-width: 24rem; }
.login-brand { color: var(--brand); font-weight: 700; }
.login-logo { width: 10rem; margin: 0 auto 1.25rem; color: var(--text); }
.code-input { font-variant-numeric: tabular-nums; letter-spacing: .4em; text-align: center; }

/* ---------- Shared: icons, soft buttons, pills, tags ---------- */
.icon { width: 1em; height: 1em; flex-shrink: 0; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; vertical-align: -0.125em; }
.min-w-0 { min-width: 0; }
.js .js-hide { display: none !important; }
/* The eye button needs site.js; without script it stays hidden and the password field works as usual. */
:root:not(.js) .password-toggle { display: none; }
.password-toggle-hide, .password-toggle[aria-pressed="true"] .password-toggle-show { display: none; }
.password-toggle[aria-pressed="true"] .password-toggle-hide { display: inline; }

/* Tinted buttons for secondary actions: clearly clickable, never the grey that reads as "disabled". */
.btn-soft, .btn-soft-ok, .btn-soft-warn {
    display: inline-flex; align-items: center; gap: 0.35rem;
    border: 1px solid transparent; font-weight: 500;
}
.btn-soft { color: var(--brand); background: var(--brand-soft); }
.btn-soft:hover, .btn-soft:focus-visible { color: var(--brand); background: var(--brand-soft); border-color: var(--brand); }
.btn-soft-ok { color: var(--positive); background: var(--positive-soft); }
.btn-soft-ok:hover, .btn-soft-ok:focus-visible { color: var(--positive); border-color: var(--positive); background: var(--positive-soft); }
.btn-soft-warn { color: var(--warning-text); background: var(--warning-soft); }
.btn-soft-warn:hover, .btn-soft-warn:focus-visible { color: var(--warning-text); border-color: var(--warning); background: var(--warning-soft); }
.btn-soft-bad { display: inline-flex; align-items: center; gap: 0.35rem; border: 1px solid transparent; font-weight: 500; color: var(--negative-text); background: var(--negative-soft); }
.btn-soft-bad:hover, .btn-soft-bad:focus-visible { color: var(--negative-text); border-color: var(--negative); background: var(--negative-soft); }
.btn-soft:disabled, .btn-soft.disabled,
.btn-soft-ok:disabled, .btn-soft-warn:disabled, .btn-soft-bad:disabled { color: var(--muted); background: var(--surface-2); border-color: var(--border); opacity: 0.8; }
.btn-primary { display: inline-flex; align-items: center; justify-content: center; gap: 0.35rem; }
.btn-icon { padding-left: 0.45rem; padding-right: 0.45rem; }

.pill { display: inline-flex; align-items: center; gap: 0.3rem; padding: 0.1rem 0.55rem; border-radius: 999px; font-size: 0.75rem; font-weight: 600; white-space: nowrap; text-decoration: none; }
.pill::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.pill-ok { color: var(--positive); background: var(--positive-soft); }
.pill-info { color: var(--info-text); background: var(--info-soft); }
.pill-bad { color: var(--negative-text); background: var(--negative-soft); }
.pill-warn { color: var(--warning-text); background: var(--warning-soft); }
.pill-running { color: var(--violet); background: var(--violet-soft); }
.pill-muted { color: var(--muted); background: var(--surface-2); border: 1px solid var(--border); }
.pill-running::before { animation: pulse 1.4s ease-in-out infinite; }
a.pill:hover { filter: brightness(0.95); }

/* Where a settlement paid in another currency came from (CA, MX): a bordered, stronger tint than the
   status pills so a converted payout stands out in a list of USD ones. Colors are the palette tokens,
   which have light and dark values. */
.pill-origin { --origin: var(--info); color: var(--origin); background: color-mix(in srgb, var(--origin) 18%, transparent); border: 1px solid color-mix(in srgb, var(--origin) 55%, transparent); letter-spacing: 0.03em; }
.pill-origin-ca { --origin: var(--c-red); }
.pill-origin-mx { --origin: var(--c-green); }

.tag { display: inline-block; padding: 0.05rem 0.5rem; border-radius: 0.35rem; font-size: 0.72rem; font-weight: 600; letter-spacing: 0.01em; }
.tag-orders { color: var(--brand); background: var(--brand-soft); }
.tag-inventory { color: var(--violet); background: var(--violet-soft); }
.tag-settlements { color: var(--teal); background: var(--teal-soft); }
.tag-ads { color: var(--warning-text); background: var(--warning-soft); }

.cell-sub { font-size: 0.78rem; color: var(--muted); }
.cell-sub.text-warn { color: var(--warning); }
/* Section tab bar: the pages of one area (Inventory) as tabs under the page title. Scrolls sideways
   on narrow screens instead of wrapping, so the active tab keeps its place. */
.section-tabs { display: flex; gap: 0.25rem; margin: -0.25rem 0 1.25rem; border-bottom: 1px solid var(--border); overflow-x: auto; scrollbar-width: none; }
.section-tabs::-webkit-scrollbar { display: none; }
.section-tab { display: inline-flex; align-items: center; gap: 0.45rem; padding: 0.55rem 0.8rem 0.6rem; margin-bottom: -1px; border-bottom: 2px solid transparent; color: var(--muted); font-size: 0.875rem; font-weight: 500; text-decoration: none; white-space: nowrap; }
.section-tab:hover { color: var(--text); }
.section-tab.active { color: var(--brand); border-bottom-color: var(--brand); }
.section-tab .icon { width: 1rem; height: 1rem; }
.section-tab-count { min-width: 1.25rem; padding: 0 0.4rem; border-radius: 999px; background: var(--brand-soft); color: var(--brand); font-size: 0.72rem; font-weight: 700; line-height: 1.25rem; text-align: center; }
.section-tab-count.is-warn { background: var(--warning-soft); color: var(--warning-text); }

.crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 0.35rem; font-size: 0.85rem; color: var(--muted); margin-bottom: 1rem; }
.crumbs a { text-decoration: none; color: var(--muted); padding: 0.1rem 0.45rem; margin: 0 -0.15rem; border-radius: 0.4rem; }
.crumbs a:hover { color: var(--brand); background: var(--brand-soft); }
.crumbs > span:last-child { color: var(--text); font-weight: 500; }
/* The "/" separators stay in the markup for screen readers' sake (hidden), drawn as a chevron. */
.crumbs > span[aria-hidden="true"] { font-size: 0; }
.crumbs > span[aria-hidden="true"]::before { content: "›"; font-size: 1rem; line-height: 1; color: var(--muted); opacity: 0.6; }
.page-footnote { font-size: 0.8rem; color: var(--muted); margin: 0.75rem 0 0; }
.quick-picks { display: flex; flex-wrap: wrap; gap: 0.4rem; }

.notice { display: flex; gap: 0.75rem; align-items: flex-start; padding: 0.8rem 1rem; border-radius: 0.6rem; font-size: 0.875rem; border: 1px solid transparent; }
.notice > .icon { margin-top: 0.15rem; font-size: 1.1rem; }
.notice-warn { color: var(--text); background: var(--warning-soft); border-color: var(--warning); }
.notice-warn > .icon { color: var(--warning); }
.notice-info { color: var(--text); background: var(--info-soft); border-color: var(--info); }
.notice-info > .icon { color: var(--info); }

.modal-content { background: var(--surface); border-color: var(--border); }
.dropdown-menu { --bs-dropdown-bg: var(--surface); --bs-dropdown-border-color: var(--border); --bs-dropdown-link-hover-bg: var(--surface-2); --bs-dropdown-link-color: var(--text); --bs-dropdown-link-hover-color: var(--text); font-size: 0.875rem; }
.dropdown-item { display: flex; align-items: center; gap: 0.5rem; }
.dropdown-item:disabled { color: var(--muted); }

@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } }

/* ---------- Amazon sync: header ---------- */
.sync-head { flex-direction: row; display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 0.55rem 0.9rem; }
.sync-head-status { display: flex; align-items: center; gap: 0.65rem; min-width: 0; flex: 1 1 auto; }
.sync-head-text { display: flex; align-items: baseline; gap: 0.6rem; min-width: 0; font-size: 0.85rem; }
.sync-head-label { font-weight: 650; white-space: nowrap; }
/* Long explanations (e.g. which credential is missing) are cut to one line; the full text is in the tooltip. */
.sync-head-detail { color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.sync-head-actions { display: flex; gap: 0.4rem; align-items: center; flex-shrink: 0; }
.sync-head-actions form { margin: 0; }
.conn-test { display: inline-flex; align-items: center; gap: 0.3rem; white-space: nowrap; font-size: 0.78rem; font-weight: 500; }
.conn-test-ok { color: var(--positive); }
.conn-test-bad { color: var(--negative); }

/* The SP-API light: green = live, red = not connected, amber = paused, blue = simulated. */
.status-light { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; display: inline-block; }
.status-live { background: var(--positive); box-shadow: 0 0 0 4px var(--positive-soft); animation: glow 2.4s ease-in-out infinite; }
.status-down { background: var(--negative); box-shadow: 0 0 0 4px var(--negative-soft); }
.status-paused { background: var(--warning); box-shadow: 0 0 0 4px var(--warning-soft); }
.status-sim { background: var(--info); box-shadow: 0 0 0 4px var(--info-soft); }
.status-running { width: 8px; height: 8px; background: var(--violet); animation: pulse 1.4s ease-in-out infinite; }
@keyframes glow { 0%, 100% { box-shadow: 0 0 0 4px var(--positive-soft); } 50% { box-shadow: 0 0 0 7px var(--positive-soft); } }

/* ---------- Amazon sync: tiles + toolbar ---------- */
a.tile { color: inherit; text-decoration: none; transition: border-color 0.15s; }
a.tile:hover { border-color: var(--brand); }
.tile-bad { border-color: var(--negative); }
.tile-bad .kpi-value { color: var(--negative); }

/* Settlements: payouts Amazon still holds, a full-width tile under the totals. */
/* Ad costs card on the Settlements list: the amount charged (sorts the list) beside spend per family. */
.ad-costs-tile-body { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 0.75rem 2rem; }
.ad-costs-charged { color: inherit; text-decoration: none; min-width: 10rem; }
.ad-costs-charged:hover .kpi-value { color: var(--brand); }
.ad-costs-families { flex: 1 1 20rem; }
.ad-costs-families .amount-breakdown { margin-top: 0.35rem; }
.ad-costs-families dt a { color: inherit; text-decoration: none; }
.ad-costs-families dt a:hover { color: var(--brand); text-decoration: underline; }
.deferred-tile-body { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 0.25rem 1.5rem; }
.deferred-tile .kpi-label .icon { width: 1em; height: 1em; vertical-align: -0.125em; }
.deferred-tile-foot { text-align: right; }
@media (max-width: 575.98px) { .deferred-tile-foot { text-align: left; } }

/* Deferred amounts beside settlement money: muted, with a clock, never part of the totals. */
.deferred-amount { color: var(--muted); text-decoration: none; }
a.deferred-amount:hover { color: var(--brand); }
.deferred-amount .icon { width: 0.9em; height: 0.9em; margin-right: 0.25em; vertical-align: -0.1em; }
.deferred-out { display: flex; flex-wrap: wrap; align-items: center; gap: 0.25rem 0.4rem; font-size: 0.875rem; color: inherit; text-decoration: none; }
.deferred-out .icon { width: 1em; height: 1em; }
a.deferred-out:hover strong { color: var(--brand); }
.deferred-by-sku > summary { cursor: pointer; list-style: none; }
.deferred-by-sku > summary .icon { width: 1em; height: 1em; vertical-align: -0.125em; }
.kpi-of { font-size: 0.95rem; font-weight: 500; color: var(--muted); letter-spacing: 0; }
.kpi-value-sm { font-size: 1.35rem; }
.kpi-foot .text-truncate { min-width: 0; }

.list-actions { display: flex; flex-wrap: wrap; gap: 0.4rem; align-items: center; }
.list-actions form { margin: 0; }
.list-toolbar { display: flex; flex-wrap: wrap; gap: 0.75rem; align-items: center; justify-content: space-between; }
.list-toolbar .filters { flex: 1 1 auto; }
.segmented .count, .count-badge { display: inline-block; min-width: 1.3rem; margin-left: 0.25rem; padding: 0 0.35rem; border-radius: 999px; font-size: 0.72rem; text-align: center; background: var(--surface-2); color: var(--muted); }
.segmented a.active .count { background: var(--surface); color: var(--brand); }
.filters { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; }
.filters .form-select { width: auto; max-width: 12rem; background-color: var(--surface); }
.search-box { position: relative; display: flex; align-items: center; }
.search-box .icon { position: absolute; left: 0.6rem; color: var(--muted); pointer-events: none; }
.search-box .form-control { padding-left: 1.9rem; width: 17rem; max-width: 100%; background-color: var(--surface); }

.auto-refresh { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.3rem 0.75rem; border-radius: 999px; font-size: 0.8rem; color: var(--violet); background: var(--violet-soft); }
.auto-refresh.is-off { color: var(--muted); background: var(--surface-2); }
.auto-refresh.is-off .status-running { animation: none; background: var(--muted); }

/* ---------- Amazon sync: table ---------- */
.schedule-table, .data-table { font-size: 0.875rem; }
.schedule-table thead th, .data-table thead th { font-size: 0.72rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted); background: var(--surface-2); border-bottom-color: var(--border); padding-top: 0.6rem; padding-bottom: 0.6rem; white-space: nowrap; }
.schedule-table td, .data-table td { padding-top: 0.75rem; padding-bottom: 0.75rem; }
.schedule-table tbody tr:hover, .data-table tbody tr:hover { background: var(--surface-2); }
.sort-link { color: inherit; text-decoration: none; }
.sort-link:hover { color: var(--brand); }
.schedule-name { display: flex; align-items: center; gap: 0.4rem; font-weight: 600; }
.schedule-name a { color: var(--text); text-decoration: none; }
.schedule-name a:hover { color: var(--brand); text-decoration: underline; }
.note-icon { color: var(--info); cursor: help; display: inline-flex; }
.schedule-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; margin-top: 0.3rem; }
.owner { display: inline-flex; align-items: center; gap: 0.25rem; font-size: 0.75rem; color: var(--muted); }
/* "Off" rows stay full contrast (nothing is greyed out); a left accent marks them instead. */
.row-off td:first-child { box-shadow: inset 3px 0 0 var(--warning); }
/* Bookkeeping mapping: a kind of amount with no QuickBooks account yet (exports are blocked until it has one). */
.row-unmapped td:first-child { box-shadow: inset 3px 0 0 var(--warning); }
.row-actions { display: inline-flex; gap: 0.35rem; align-items: center; justify-content: flex-end; }
.row-actions form { margin: 0; }
.toggle-form { margin: 0; }
.form-switch .form-check-input { width: 2.4em; height: 1.3em; cursor: pointer; }
.form-check-input:checked { background-color: var(--positive); border-color: var(--positive); }

.empty-state { display: flex; flex-direction: column; align-items: center; gap: 0.5rem; padding: 2.5rem 1rem; text-align: center; }
.empty-title { font-weight: 600; }
.empty-detail { font-size: 0.85rem; color: var(--muted); }

/* ---------- Amazon sync: add / edit form ---------- */
.form-section-head { display: flex; gap: 0.85rem; align-items: flex-start; padding: 1rem 1.25rem 0; }
.form-section-head h2 { font-size: 1rem; font-weight: 650; margin: 0; }
.form-section-head p { font-size: 0.82rem; color: var(--muted); margin: 0.1rem 0 0; }
.step { width: 1.6rem; height: 1.6rem; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; font-size: 0.8rem; font-weight: 700; color: var(--brand); background: var(--brand-soft); }
.form-section-body { padding: 1rem 1.25rem 1.25rem; }
.form-section .form-control, .form-section .form-select { background-color: var(--surface); }

.choice-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); gap: 0.6rem; }
.choice { position: relative; cursor: pointer; }
.choice input { position: absolute; opacity: 0; }
.choice-body { display: flex; flex-direction: column; gap: 0.4rem; height: 100%; padding: 0.75rem 0.85rem; border: 1px solid var(--border); border-radius: 0.6rem; background: var(--surface); transition: border-color 0.15s, box-shadow 0.15s; }
.choice-body .tag { align-self: flex-start; }
.choice-desc { font-size: 0.8rem; color: var(--muted); }
.choice:hover .choice-body { border-color: var(--brand); }
.choice input:checked + .choice-body { border-color: var(--brand); box-shadow: 0 0 0 1px var(--brand); background: var(--brand-soft); }
.choice input:focus-visible + .choice-body { outline: 2px solid var(--brand); outline-offset: 2px; }

.segmented-radio label { position: relative; margin: 0; cursor: pointer; }
.segmented-radio input { position: absolute; opacity: 0; }
.segmented-radio span { display: inline-block; padding: 0.35rem 0.9rem; border-radius: 0.45rem; color: var(--muted); font-size: 0.875rem; font-weight: 500; }
.segmented-radio input:checked + span { background: var(--brand-soft); color: var(--brand); }
.segmented-radio input:focus-visible + span { outline: 2px solid var(--brand); }

.switch-row { padding: 0.65rem 0; border-top: 1px solid var(--border); }
.switch-row:first-of-type { border-top: 0; }
.switch-row .form-check-label { font-weight: 500; }
.switch-row .form-text { margin: 0.1rem 0 0 2.9em; }

.summary-card { position: sticky; top: 1rem; }
.summary-text { font-size: 1.05rem; font-weight: 600; margin-bottom: 0.5rem; }
.summary-facts { list-style: none; padding: 0; margin: 0; font-size: 0.85rem; color: var(--muted); }
.summary-facts li::before { content: "•"; margin-right: 0.4rem; color: var(--brand); }
.summary-meta { display: grid; grid-template-columns: auto 1fr; gap: 0.2rem 0.75rem; margin: 0.9rem 0 0; font-size: 0.8rem; }
.summary-meta dt { font-weight: 500; color: var(--muted); }
.summary-meta dd { margin: 0; }
.danger-zone { margin-top: 1rem; padding-top: 0.75rem; border-top: 1px solid var(--border); text-align: center; }
.danger-zone .btn { display: inline-flex; align-items: center; gap: 0.35rem; }

@media (max-width: 992px) {
    /* Narrow screens: the status and the buttons stack, and the detail text may wrap. */
    .sync-head { flex-wrap: wrap; }
    .sync-head-text { flex-wrap: wrap; row-gap: 0.1rem; }
    .sync-head-detail { white-space: normal; }
    .sync-head-actions { flex-wrap: wrap; }
}

@media (max-width: 768px) {
    .search-box, .search-box .form-control { width: 100%; }
    .filters { width: 100%; }
    .filters .form-select { flex: 1 1 45%; max-width: none; }
    .summary-card { position: static; }
}

/* ---------- Hover tips ---------- */
.tip { display: inline-flex; vertical-align: -0.1em; color: var(--muted); cursor: help; font-size: 0.85em; }
.tip:hover, .tip:focus-visible { color: var(--brand); }
.tooltip { --bs-tooltip-bg: var(--text); --bs-tooltip-color: var(--surface); --bs-tooltip-max-width: 18rem; --bs-tooltip-font-size: 0.78rem; --bs-tooltip-opacity: 1; }
/* pre-line: a tip may list items one per line (e.g. what a settlement's other expenses are). */
.tooltip-inner { text-align: left; padding: 0.45rem 0.65rem; line-height: 1.4; white-space: pre-line; }
.kpi-label .tip, th .tip { margin-left: 0.15rem; }
th .tip { text-transform: none; }
/* A value whose tooltip adds information shows it: dotted underline in the info color (like <abbr>).
   :not(...) outranks the amount colors, so a cued amount reads as "more here"; its sign still shows.
   Status colors (pills, warnings, connection test) and headers keep their color; they only get the underline.
   site.js makes the plain ones focusable, so a click or tap opens the tip too. */
.has-detail { text-decoration: underline dotted; text-decoration-thickness: 1px; text-underline-offset: 0.2em; cursor: help; }
.has-detail:not(th, .pill, .text-warn, .conn-test) { color: var(--info); }
.has-detail:hover, .has-detail[aria-describedby] { text-decoration-style: solid; }
.has-detail:focus-visible { outline: 2px solid var(--info); outline-offset: 2px; border-radius: 2px; }
a.has-detail { cursor: pointer; }

/* ---------- Card toolbar + bulk selection ---------- */
.card-toolbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.5rem 1rem; padding: 0.6rem 0.9rem; border-bottom: 1px solid var(--border); }
.card-toolbar-title { display: inline-flex; align-items: center; gap: 0.3rem; font-weight: 600; font-size: 0.875rem; }
.card-toolbar-group { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem; }
.card-toolbar-group form { margin: 0; }
.bulk-bar { display: flex; align-items: center; gap: 0.4rem; margin: 0; padding: 0.2rem 0.25rem 0.2rem 0.75rem; border-radius: 0.5rem; font-size: 0.82rem; }
.bulk-bar.has-selection { background: var(--brand-soft); }
.bulk-count { color: var(--muted); margin-right: 0.35rem; }
.bulk-bar.has-selection .bulk-count { color: var(--brand); font-weight: 600; }
.select-col { width: 2.25rem; padding-right: 0 !important; }
.select-col .form-check-input { margin: 0; cursor: pointer; }
.schedule-table tbody tr.row-selected, .data-table tbody tr.row-selected { background: var(--brand-soft); }
.schedule-table .schedule-group-row > td { background: var(--surface-2); padding-top: 0.55rem; padding-bottom: 0.55rem; }
.schedule-table tbody.schedule-group + tbody.schedule-group .schedule-group-row > td { border-top: 2px solid var(--border); }
.schedule-group-title { display: inline-flex; align-items: center; gap: 0.4rem; font-weight: 700; }
/* The On switch and the row's buttons share the last column. */
.on-cell { display: flex; align-items: center; gap: 0.75rem; }

@media (max-width: 576px) {
    /* Two KPI tiles share a phone-width row; longer symbols such as "CA$" must still fit on one line. */
    .kpi-value { font-size: 1.4rem; }
}

/* Positioned so absolutely positioned children (e.g. .visually-hidden header labels) stay inside the
   scroll container instead of widening the page on phones. */
.table-responsive { position: relative; }
/* Inside a table, long titles are also capped by the table's own width (cqi), so a list that would only
   just overflow fits its card and keeps its header stuck to the page (see sticky table headers below). */
.table-responsive { container-type: inline-size; }
.table-responsive .cell-truncate { max-width: min(28rem, 40vw, 32cqi); }

/* Sticky table headers: every table's header sticks to the window while the page scrolls, below the
   card's toolbar when that sticks too (.has-sticky-head sets --sticky-head to the toolbar's height). A
   sticky cell only sticks inside its nearest scroll container, and .table-responsive is one (for sideways
   scrolling), so site.js gives a table that fits its card .is-sticky, which drops that overflow. A table
   too wide to fit keeps scrolling sideways and gets .sticky-float, a copy of its header that sticks to the
   window over the real one and follows the sideways scroll. Borders don't travel with sticky cells under
   border-collapse, so the header's bottom rule is drawn as a shadow; the background must be opaque or rows
   would show through. */
.table-responsive.is-sticky { overflow: visible; }
.is-sticky > .table > thead > tr > * { position: sticky; top: var(--sticky-head, 0); z-index: 2; background-color: var(--sticky-th-bg, var(--surface)); box-shadow: inset 0 -1px 0 var(--border); }
/* A totals row (the header's second row) sticks under the first; site.js sets --sticky-row1 to its height. */
.is-sticky > .table > thead > tr + tr > * { top: calc(var(--sticky-head, 0px) + var(--sticky-row1, 0px)); }
.sticky-float { position: sticky; top: var(--sticky-head, 0); z-index: 2; overflow-x: auto; overflow-y: hidden; scrollbar-width: none; background-color: var(--surface); }
.sticky-float::-webkit-scrollbar { display: none; }
.sticky-float > .table { margin-bottom: 0; }
.sticky-float > .table > thead > tr > * { background-color: var(--sticky-th-bg, var(--surface)); box-shadow: inset 0 -1px 0 var(--border); }
.data-table, .schedule-table { --sticky-th-bg: var(--surface-2); }
/* Totals row: the header's last row (tr.totals-row), stuck under the column names. */
.table > thead > tr.totals-row > * { font-size: 0.85rem; font-weight: 700; color: var(--text); text-transform: none; letter-spacing: 0; background-color: var(--surface-2); box-shadow: inset 0 -2px 0 var(--border); white-space: normal; }
.table > thead > tr.totals-row .cell-sub { font-weight: 600; }
.table > thead > tr.totals-row > .has-detail:not(.pill, .text-warn, .conn-test) { color: var(--info); }
.has-sticky-head > .card-toolbar {
    position: sticky; top: 0; z-index: 3; background: var(--surface);
    border-radius: var(--bs-card-inner-border-radius) var(--bs-card-inner-border-radius) 0 0;
}

/* ---------- Inventory ---------- */
.inventory-table td, .inventory-table th { white-space: nowrap; }
/* The product column stays put while the numbers scroll sideways on narrow screens. */
.inventory-table .product-col { position: sticky; left: 0; z-index: 1; background: var(--surface); min-width: 15rem; max-width: 22rem; white-space: normal; }
.inventory-table thead th.product-col { background: var(--surface-2); z-index: 3; }
.inventory-table tbody tr:hover .product-col { background: var(--surface-2); }
.inventory-table .col-group { border-left: 1px solid var(--border); }
.inventory-table .th-group { display: block; font-size: 0.65rem; letter-spacing: 0.06em; opacity: 0.75; }
.inventory-table .zero { color: var(--muted); opacity: 0.6; }
.product-cell { display: flex; align-items: center; gap: 0.7rem; }
.product-link { display: block; color: var(--text); text-decoration: none; }
.product-link:hover { color: var(--brand); text-decoration: underline; }
.product-sku { display: flex; flex-wrap: wrap; align-items: center; gap: 0.3rem; }
.tag-family { color: var(--teal); background: var(--teal-soft); }
.product-thumb { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; width: 40px; height: 40px; border-radius: 8px; object-fit: cover; background: var(--surface-2); border: 1px solid var(--border); color: var(--muted); }
.product-thumb-lg { width: 120px; height: 120px; }
.product-thumb-empty .icon { width: 18px; height: 18px; opacity: 0.7; }
.cover { display: flex; flex-direction: column; gap: 0.3rem; }
.cover-days { font-weight: 600; }
.cover-track { fill: var(--surface-2); }
.cover-ok { fill: var(--positive); }
.cover-warn { fill: var(--warning); }
.cover-bad { fill: var(--negative); }
.next-step { line-height: 1.35; cursor: help; }
.list-count { flex-wrap: wrap; column-gap: 0.35rem; }
.bulk-bar-row { flex-wrap: wrap; margin: 0.5rem 0.75rem; }
.bulk-input { width: 13rem; max-width: 100%; background-color: var(--surface); }
.inventory-table .select-col { width: 2.5rem; position: sticky; left: 0; z-index: 1; background: var(--surface); }
.inventory-table thead th.select-col { background: var(--surface-2); z-index: 3; }
.inventory-table.has-select .product-col { left: 2.5rem; }
.inventory-table tbody tr:hover .select-col { background: var(--surface-2); }
/* Pinned cells need an opaque background; layering the translucent highlight over the surface
   colour matches the rest of the selected row. */
.inventory-table tbody tr.row-selected .select-col,
.inventory-table tbody tr.row-selected .product-col { background: linear-gradient(var(--brand-soft), var(--brand-soft)), var(--surface); }
.family-create { display: flex; gap: 0.5rem; margin-bottom: 1rem; }
.family-list { list-style: none; margin: 0 0 0.75rem; padding: 0; border: 1px solid var(--border); border-radius: 0.6rem; }
.family-row { display: flex; align-items: center; gap: 0.5rem; padding: 0.5rem 0.6rem; border-top: 1px solid var(--border); }
.family-row:first-child { border-top: 0; }
.family-row form { margin: 0; }
.family-rename { display: flex; flex: 1 1 auto; gap: 0.35rem; min-width: 0; }
.family-row { flex-wrap: wrap; }
.family-rules { order: 10; flex: 1 0 100%; }
.family-rules > summary { list-style: none; display: inline-flex; align-items: center; gap: 0.35rem; }
.family-rules > summary::-webkit-details-marker { display: none; }
.family-rules-form { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 0.5rem 0.75rem; margin-top: 0.5rem; padding: 0.6rem; border-radius: 0.5rem; background: var(--surface-2); }
.family-rules-form label { display: flex; align-items: center; gap: 0.35rem; font-size: 0.8rem; color: var(--muted); }
.family-rules-form input { width: 5.5rem; }
.family-count { flex: 0 0 auto; min-width: 4.5rem; text-align: right; font-size: 0.8rem; color: var(--muted); text-decoration: none; }
.family-count:hover { color: var(--brand); text-decoration: underline; }
.home-stock-col { width: 9rem; }
@media (max-width: 767.98px) {
    .inventory-table .product-col { min-width: 11rem; max-width: 13rem; }
    .inventory-table .product-col .product-thumb { display: none; }
    .inventory-table .col-sold { display: none; }
}

/* ---------- Notifications ---------- */
.notify-bell { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 2rem; height: 2rem; border-radius: 999px; color: var(--muted); text-decoration: none; }
.notify-bell:hover, .notify-bell.has-unread { color: var(--text); }
.notify-bell .icon { width: 1.15rem; height: 1.15rem; }
.notify-count { position: absolute; top: -0.15rem; right: -0.25rem; min-width: 1.1rem; padding: 0 0.3rem; border-radius: 999px; font-size: 0.75rem; font-weight: 700; line-height: 1.1rem; text-align: center; color: var(--surface); background: var(--negative); }
.alert-list { list-style: none; margin: 0; padding: 0; }
.alert-row { display: flex; gap: 0.75rem; align-items: flex-start; padding: 0.75rem 1rem; border-top: 1px solid var(--border); }
.alert-row:first-child { border-top: 0; }
.alert-row.is-unread { background: var(--surface-2); }
.alert-row.is-unread .alert-title a { font-weight: 650; }
.alert-row .pill { flex: 0 0 auto; margin-top: 0.1rem; }
.alert-body { flex: 1 1 auto; min-width: 0; }
.alert-message { font-size: 0.875rem; }

.bulk-divider { width: 1px; align-self: stretch; margin: 0.2rem 0.25rem; background: var(--border); }

/* ---------- Product colors ----------
   A .sku-color-* class sets --sku; the pieces below use it, so one class colors a whole row or group. */
.sku-color-black { --sku: var(--c-black); }
.sku-color-white { --sku: var(--c-white); }
.sku-color-gray { --sku: var(--c-gray); }
.sku-color-red { --sku: var(--c-red); }
.sku-color-orange { --sku: var(--c-orange); }
.sku-color-yellow { --sku: var(--c-yellow); }
.sku-color-green { --sku: var(--c-green); }
.sku-color-teal { --sku: var(--c-teal); }
.sku-color-blue { --sku: var(--c-blue); }
.sku-color-navy { --sku: var(--c-navy); }
.sku-color-purple { --sku: var(--c-purple); }
.sku-color-pink { --sku: var(--c-pink); }
.sku-color-brown { --sku: var(--c-brown); }
.sku-color-beige { --sku: var(--c-beige); }
.sku-color-multi { --sku: var(--c-multi); }
.swatch { display: inline-block; flex: 0 0 auto; width: 0.75rem; height: 0.75rem; border-radius: 50%; background: var(--sku, var(--border)); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.12); vertical-align: -0.05rem; }
.swatch-none { background: transparent; box-shadow: inset 0 0 0 1px var(--muted); }
.color-chip { display: inline-flex; align-items: center; gap: 0.35rem; font-size: 0.8rem; color: var(--muted); }

/* ---------- Inventory worksheet ---------- */
.worksheet-table td, .worksheet-table th { white-space: nowrap; vertical-align: middle; }
.worksheet-table .sku-cell { position: sticky; left: 0; z-index: 1; background: var(--surface); min-width: 11rem; border-left: 4px solid var(--sku, transparent); }
.worksheet-table thead th.sku-cell { background: var(--surface-2); z-index: 3; border-left-color: transparent; }
.worksheet-table .sku-code { font-weight: 600; color: var(--sku, var(--text)); letter-spacing: 0.01em; }
.worksheet-table .sku-title { display: block; max-width: 16rem; overflow: hidden; text-overflow: ellipsis; font-size: 0.75rem; color: var(--muted); }
.worksheet-table tbody tr.sku-row:hover > td { background: var(--surface-2); }
.worksheet-table tr.group-head > th { background: color-mix(in srgb, var(--sku, var(--muted)) 10%, var(--surface)); color: var(--text); font-size: 0.8rem; text-transform: none; letter-spacing: 0; border-top: 1px solid var(--border); }
.worksheet-table tr.group-head .group-name { display: inline-flex; align-items: center; gap: 0.45rem; font-weight: 700; color: var(--sku, var(--text)); }
.worksheet-table tr.group-head .group-sub { font-weight: 600; color: var(--muted); }
.worksheet-table .col-send { background: color-mix(in srgb, var(--brand) 5%, transparent); }
.worksheet-table .change-input { width: 6.5rem; margin: 0.25rem 0 0 auto; text-align: right; }
.worksheet-table .change-input.is-changed { border-color: var(--brand); box-shadow: 0 0 0 0.15rem var(--brand-soft); }
.worksheet-table .send-input { width: 6.5rem; margin-bottom: 0.25rem; text-align: right; }
.worksheet-table .send-input.is-changed { border-color: var(--brand); box-shadow: 0 0 0 0.15rem var(--brand-soft); }
.worksheet-table .after-save { color: var(--brand); }
.worksheet-table .after-save.text-warn { color: var(--warning-text); }
.save-bar .shipment-ref { width: 14rem; max-width: 100%; }
.save-bar .change-note { width: 14rem; max-width: 100%; }
.save-bar-field { display: inline-flex; align-items: center; gap: var(--space-2); margin: 0; font-size: var(--fs-sm); color: var(--muted); white-space: nowrap; }
.save-bar-field .form-select { width: auto; }

/* Sends awaiting Amazon (Worksheet panel and Pending sends page). */
.shipment-id-form { display: flex; align-items: center; gap: 0.25rem; }
.shipment-id-form .shipment-ref { width: 12rem; max-width: 100%; }
.pending-table tr.pending-overdue > td:first-child { box-shadow: inset 3px 0 0 var(--warning); }
.pending-table .sku-cell { min-width: 11rem; }
.pending-table .sku-code { font-weight: 600; letter-spacing: 0.01em; }
.pending-table .sku-title { display: block; max-width: 16rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 0.75rem; color: var(--muted); }
.pending-table .pending-note { min-width: 10rem; max-width: 16rem; white-space: normal; }
.worksheet-table .action-due { color: var(--warning); font-weight: 600; }
.worksheet-table .action-late { color: var(--negative); font-weight: 600; }
.worksheet-legend { display: flex; flex-wrap: wrap; gap: 0.25rem 1rem; }
.save-bar { position: sticky; bottom: 0; z-index: 5; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 0.75rem; margin-top: 0.75rem; padding: 0.6rem 0.9rem; border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--surface); box-shadow: var(--shadow-lg); }
.save-bar[hidden] { display: none; }
.family-tabs { flex-wrap: wrap; }
@media (max-width: 767.98px) {
    /* On phones the SKU code is enough; titles would push the numbers off screen. */
    .worksheet-table .sku-title { display: none; }
    .worksheet-table .sku-cell { min-width: 6.5rem; }
}

/* ---------- Home-stock ledger ---------- */
.ledger-table td { vertical-align: middle; }
.ledger-table .ledger-when { white-space: nowrap; }
.ledger-table .cell-truncate { max-width: min(16rem, 30vw); }
.ledger-table .ledger-note { min-width: 10rem; max-width: 18rem; white-space: normal; }
.filters .date-filter { width: auto; max-width: 10.5rem; background-color: var(--surface); }
.ledger-units { font-weight: 700; }
.ledger-units.in { color: var(--positive); }
.ledger-units.out { color: var(--negative); }
.ledger-reversed { opacity: 0.55; }
.ledger-reversed .ledger-units { text-decoration: line-through; }
/* A row opened for editing (?edit=): its cells hold the form's inputs. */
.ledger-table tr.ledger-editing > td { background: var(--brand-soft); }
.ledger-table .ledger-edit-type { width: 12.5rem; }
.ledger-table .ledger-edit-units { width: 5.5rem; margin-left: auto; }
.ledger-table .ledger-edit-note { width: 100%; min-width: 9rem; }

/* ---------- Print: the worksheet as a clean sheet of paper ---------- */
@media print {
    .app-sidebar, .app-topbar, .no-print, .save-bar, .list-toolbar, .crumbs, .alert { display: none !important; }
    .app-main, .app-content { margin: 0 !important; padding: 0 !important; }
    .card { border: 0; box-shadow: none; }
    .table-responsive { overflow: visible; }
    .sticky-float { display: none; }
    .table-responsive > .table > thead > tr > *, .has-sticky-head > .card-toolbar { position: static; }
    .worksheet-table { font-size: 10pt; }
    .worksheet-table .sku-cell { position: static; }
    .worksheet-table tr { break-inside: avoid; }
    /* Printing one row group ([data-print-group]): the others are left out, and the toggles mean nothing on paper. */
    .printing-group .group-table tbody.order-group:not(.is-printing) { display: none; }
    .group-table .group-toggle, .expand-controls { display: none !important; }
    * { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}

/* ---------- Settlements ---------- */
.money { font-variant-numeric: tabular-nums; white-space: nowrap; }
.amount-neg { color: var(--negative); }
.amount-zero { color: var(--muted); }
.filters .filter-label { margin: 0 0 0 0.25rem; font-size: 0.8rem; color: var(--muted); white-space: nowrap; }

/* The payout at a glance: the net on the left, its four parts beside it. */
.settlement-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem 2rem; padding: 1.1rem 1.25rem; }
.amount-breakdown { display: flex; flex-wrap: wrap; gap: 0.4rem; margin: 0; }
.amount-breakdown > div { display: flex; flex-direction: column; padding: 0.35rem 0.75rem; border: 1px solid var(--border); border-radius: 0.6rem; background: var(--surface-2); min-width: 6.5rem; }
.amount-breakdown dt { font-size: 0.7rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted); }
.amount-breakdown dd { margin: 0; font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.amount-breakdown .amount-breakdown-total { border-color: var(--brand); background: var(--brand-soft); }
.totals-row .amount-breakdown { margin-top: 0.4rem; }
.totals-row .amount-breakdown > div { padding: 0.2rem 0.6rem; min-width: 0; }
.totals-row .amount-breakdown dd { font-size: 0.8rem; }
.order-payout { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 1rem; }
.order-payout .amount-breakdown > div { padding: 0.2rem 0.6rem; min-width: 0; }
.order-payout .amount-breakdown dd { font-size: 0.8rem; }

/* Order groups: a parent row per order that expands into its lines. Lines show without script;
   with it (html.js) they hide until the group is expanded. */
.group-table .toggle-col { width: 2.75rem; padding-right: 0; }
.group-table tbody.order-group { border-top: 0; }
.group-table .group-row > td { border-bottom-color: var(--border); }
.group-table .group-toggle { color: var(--muted); border: 0; line-height: 1; }
.group-table .group-toggle:hover { color: var(--brand); background: var(--brand-soft); }
.group-table .group-toggle .icon { transition: transform 0.15s; transform: rotate(-90deg); }
.group-table .group-toggle[aria-expanded="true"] .icon { transform: none; }
:root:not(.js) .group-table .group-toggle, :root:not(.js) .expand-controls { display: none; }
.js .group-table tbody.order-group:not(.is-expanded) .group-child { display: none; }
.group-table .group-child > td { background: var(--surface-2); padding-top: 0.45rem; padding-bottom: 0.45rem; font-size: 0.82rem; }
.group-table .group-child > td:nth-child(2) { padding-left: 1.5rem; }
.group-table tbody.order-group.is-expanded .group-row > td { background: var(--brand-soft); }
/* Advertising: the product column takes whatever width the figures leave and long titles end in "…", so the
   table fits its card and its header sticks to the page instead of scrolling inside a box. */
.ads-table .product-col { max-width: 0; width: 100%; min-width: 10rem; }
.ads-table .product-title { max-width: 100%; }
.child-desc { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem; }
.type-tag { display: inline-block; margin: 0 0.25rem 0.15rem 0; padding: 0.05rem 0.45rem; border: 1px solid var(--border); border-radius: 0.4rem; font-size: 0.75rem; color: var(--muted); white-space: nowrap; }
.js .group-table .group-row { cursor: pointer; }

/* ---------- Products & COGS ---------- */
a.tile[aria-current="true"] { border-color: var(--brand); box-shadow: inset 0 0 0 1px var(--brand), 0 0 0 0.15rem var(--brand-soft); }
.coverage-bar { vertical-align: middle; margin-right: 0.35rem; }
.products-table .col-family { width: 1%; white-space: nowrap; }
.products-table .col-cost { width: 11rem; }
.products-table .col-updated { width: 1%; white-space: nowrap; }
.cost-group { max-width: 10rem; flex-wrap: nowrap; }
.cost-group .input-group-text { background: var(--surface-2); color: var(--muted); border-color: var(--border); min-width: 2.25rem; justify-content: center; }
.cost-input { text-align: right; font-variant-numeric: tabular-nums; }
.cost-input::placeholder { color: var(--muted); font-style: italic; text-align: right; }
.cost-input.is-changed { border-color: var(--brand); box-shadow: 0 0 0 0.15rem var(--brand-soft); }
@media (max-width: 767.98px) {
    .products-table .col-family, .products-table .col-updated { display: none; }
    .products-table .product-col { max-width: 0; width: 100%; }
    .products-table .product-cell { gap: 0.5rem; }
    .products-table .product-thumb { width: 32px; height: 32px; }
    .products-table .product-title { max-width: 100%; }
    .products-table .col-cost { width: 7.5rem; }
    .cost-group { max-width: 7.5rem; }
    .cost-group .input-group-text { min-width: 0; padding-inline: 0.4rem; }
}

/* ---------- Accessibility foundations ---------- */
/* Skip link: hidden until focused, then the first thing on the page (WCAG 2.4.1). */
.skip-link {
    position: absolute; z-index: 1080; top: var(--space-2); left: var(--space-2);
    padding: var(--space-2) var(--space-4); border-radius: var(--radius-sm);
    background: var(--surface); color: var(--brand); font-weight: 600; box-shadow: var(--shadow);
    transform: translateY(-200%);
}
.skip-link:focus { transform: none; outline: 2px solid var(--focus); outline-offset: 2px; }
/* <main> takes focus only from the skip link or a script, never from a click, so it shows no ring. */
#main:focus { outline: none; }

/* One visible focus ring for the custom controls (WCAG 2.4.7); Bootstrap's own controls keep theirs. */
.segmented a:focus-visible, .segmented-radio input:focus-visible + span, .section-tab:focus-visible, a.tile:focus-visible,
.sort-link:focus-visible, a.pill:focus-visible, .notify-bell:focus-visible, .market-switch-btn:focus-visible,
.theme-toggle-btn:focus-visible, .crumbs a:focus-visible, .group-toggle:focus-visible, .tip:focus-visible,
.account-link:focus-visible, .page-link:focus-visible {
    outline: 2px solid var(--focus); outline-offset: 2px; box-shadow: none;
}
.page-link:focus-visible { z-index: 3; }

/* Sticky headers and the save bar never hide the control that has focus (WCAG 2.4.11). */
html { scroll-padding-top: 5rem; scroll-padding-bottom: 5rem; }

/* Inputs, selects, and checkboxes: borders strong enough to see the control (WCAG 1.4.11). */
.form-control, .form-select, .form-check-input { border-color: var(--border-strong); }

/* Small targets get a 24px hit area without changing the layout (WCAG 2.5.8). */
/* .nav-sub-toggle is already absolutely positioned, which also anchors its ::after. */
.tip, a.pill { position: relative; }
.tip::after, a.pill::after, .nav-sub-toggle::after { content: ""; position: absolute; inset: 50% auto auto 50%; width: max(100%, 24px); height: max(100%, 24px); transform: translate(-50%, -50%); }

/* Busy submit (site.js): the pressed button shows a spinner while the page works. */
.busy-spinner {
    display: inline-block; width: 0.85em; height: 0.85em; flex-shrink: 0;
    border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%;
    animation: busy-spin 0.7s linear infinite;
}
.btn.is-busy { cursor: progress; }
@keyframes busy-spin { to { transform: rotate(360deg); } }

/* Status messages follow the theme tokens. */
.alert { border-radius: var(--radius-md); font-size: var(--fs-md); }
.alert-success { --bs-alert-color: var(--text); --bs-alert-bg: var(--positive-soft); --bs-alert-border-color: var(--positive); }
.alert-danger { --bs-alert-color: var(--text); --bs-alert-bg: var(--negative-soft); --bs-alert-border-color: var(--negative); }
.alert-warning { --bs-alert-color: var(--text); --bs-alert-bg: var(--warning-soft); --bs-alert-border-color: var(--warning); }
.alert-info { --bs-alert-color: var(--text); --bs-alert-bg: var(--info-soft); --bs-alert-border-color: var(--info); }

.account-link { color: var(--muted); text-decoration: none; }
.account-link:hover { color: var(--brand); text-decoration: underline; }
.pager-summary { color: var(--muted); }

/* Phones: the account link moves from the top bar into the menu. */
.nav-account { display: none; margin-top: var(--space-2); padding-top: var(--space-2); border-top: 1px solid var(--sidebar-border); }
@media (max-width: 767.98px) {
    .nav-account { display: block; }
    .save-bar .shipment-ref, .save-bar .change-note { width: 100%; }
}

/* Reduced motion: no animations or transitions anywhere (WCAG 2.3.3). */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; }
}