:root {
    --primary: #2563eb;
    --primary-hover: #1d4ed8;
    --danger: #dc2626;
    --danger-hover: #b91c1c;
    --success: #16a34a;
    --warning: #d97706;
    --bg: #f8fafc;
    --surface: #ffffff;
    --border: #e2e8f0;
    --text: #1e293b;
    --text-muted: #64748b;
    --radius: 6px;
    /* Raymand brand palette — blue + dark blue + orange.
       Dark blue is the dominant brand color (table headers); orange is
       reserved as a sparing accent (focus rings, highlights). */
    --brand-blue: #2563eb;
    --brand-dark-blue: rgb(30, 58, 95);  /* #1e3a5f */
    --brand-orange: #f59e0b;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    background: var(--bg);
    color: var(--text);
    line-height: 1.5;
}

/* Page / section titles take the Raymand dark blue — clear hierarchy,
   ties body chrome to the navbar + table headers. Form labels keep their
   muted grey (already differentiated from body text). */
h1, h2, h3 { color: var(--brand-dark-blue); }

[lang="fa"] body,
[lang="fa"] select,
[lang="fa"] input,
[lang="fa"] textarea,
[lang="fa"] button {
    font-family: 'Vazirmatn', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

/* Nav */
.main-nav {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    background: var(--brand-dark-blue);
    color: white;
    padding: 0.4rem 1.5rem;
    min-height: 48px;
    gap: 0.5rem 1.5rem;
    position: sticky;
    top: 0;
    z-index: 100;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
}
.nav-brand { font-weight: 700; font-size: 1.2rem; }
.nav-links { display: flex; flex-wrap: wrap; gap: 0.15rem; flex: 1; min-width: 0; }
.nav-links a {
    color: rgba(255,255,255,0.7);
    text-decoration: none;
    padding: 0.3rem 0.5rem;
    border-radius: var(--radius);
    font-size: 0.82rem;
    white-space: nowrap;
}
.nav-links a:hover, .nav-links a.active { color: white; background: rgba(255,255,255,0.15); }
/* Nav dropdowns */
.nav-dropdown { position: relative; display: inline-block; }
.nav-dropdown-toggle {
    display: block;
    color: rgba(255,255,255,0.7);
    padding: 0.3rem 0.5rem;
    border-radius: var(--radius);
    font-size: 0.82rem;
    white-space: nowrap;
    cursor: default;
    user-select: none;
    list-style: none;
}
.nav-dropdown-toggle::-webkit-details-marker { display: none; }
.nav-dropdown-toggle:hover, .nav-dropdown-toggle.active {
    color: white;
    background: rgba(255,255,255,0.15);
}
.nav-dropdown-menu {
    display: none;
    position: absolute;
    top: 100%;
    inset-inline-start: 0;
    background: var(--brand-dark-blue);
    border-radius: var(--radius);
    min-width: 150px;
    padding: 0.3rem 0;
    box-shadow: 0 4px 12px rgba(0,0,0,0.3);
    z-index: 100;
}
/* Desktop: show on hover */
.nav-dropdown:hover .nav-dropdown-menu { display: block; }
/* Also show when details is open (click/tap) */
.nav-dropdown[open] .nav-dropdown-menu { display: block; }
.nav-dropdown-menu a {
    display: block;
    color: rgba(255,255,255,0.7);
    text-decoration: none;
    padding: 0.4rem 0.75rem;
    font-size: 0.82rem;
    white-space: nowrap;
}
.nav-dropdown-menu a:hover, .nav-dropdown-menu a.active {
    color: white;
    background: rgba(255,255,255,0.15);
}
/* Section divider label inside a dropdown — non-clickable, dimmer, smaller */
.nav-dropdown-section {
    display: block;
    color: rgba(255,255,255,0.4);
    font-size: 0.68rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 0.5rem 0.75rem 0.2rem;
    border-top: 1px solid rgba(255,255,255,0.08);
    margin-top: 0.15rem;
    user-select: none;
    pointer-events: none;
}
.nav-dropdown-section:first-child {
    border-top: 0;
    margin-top: 0;
    padding-top: 0.25rem;
}

/* Hamburger toggle (hidden on desktop) */
.nav-toggle-input { display: none; }
.nav-toggle-label { display: none; }
.nav-collapsible { display: contents; }

.nav-right { display: flex; align-items: center; gap: 0.75rem; margin-inline-start: auto; flex-shrink: 0; }
.nav-user { display: flex; align-items: center; gap: 0.75rem; font-size: 0.85rem; flex-shrink: 0; }
.nav-user span { color: rgba(255,255,255,0.7); }
.nav-user a { color: rgba(255,255,255,0.9); text-decoration: none; }
.nav-logout { display: inline-flex; align-items: center; padding: 0.25rem; border-radius: var(--radius); }
.nav-logout:hover { background: rgba(255,255,255,0.15); color: white; }
.nav-user-mobile { display: none; }
/* Account dropdown */
.nav-account { position: relative; display: inline-block; }
.nav-account.nav-user-mobile { display: none; }
.nav-account-toggle {
    display: flex; align-items: center; justify-content: center;
    width: 32px; height: 32px;
    background: rgba(255,255,255,0.15);
    border-radius: 50%;
    cursor: pointer;
    list-style: none;
    color: rgba(255,255,255,0.9);
}
.nav-account-toggle::-webkit-details-marker { display: none; }
.nav-account-toggle:hover { background: rgba(255,255,255,0.25); color: white; }
.nav-account-menu {
    display: none;
    position: absolute;
    top: calc(100% + 0.35rem);
    inset-inline-end: 0;
    background: var(--text);
    border-radius: var(--radius);
    min-width: 200px;
    padding: 0.5rem 0;
    box-shadow: 0 4px 12px rgba(0,0,0,0.3);
    z-index: 100;
}
.nav-account[open] .nav-account-menu { display: block; }
.nav-account-info {
    padding: 0.5rem 0.75rem;
    border-bottom: 1px solid rgba(255,255,255,0.1);
    margin-bottom: 0.25rem;
}
.nav-account-name {
    color: white;
    font-weight: 600;
    font-size: 0.85rem;
}
.nav-account-role {
    margin-top: 0.25rem;
}
.nav-account-menu .nav-account-action {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    width: 100%;
    padding: 0.4rem 0.75rem;
    color: rgba(255,255,255,0.7);
    font-size: 0.82rem;
    text-decoration: none;
    background: none;
    border: none;
    cursor: pointer;
}
.nav-account-menu .nav-account-action:hover {
    color: white;
    background: rgba(255,255,255,0.15);
}

/* Container */
.container { max-width: 1200px; margin: 0 auto; padding: 1.5rem; }
/* Wider container for data-dense pages (planning, etc.) — kicks in on desktop. */
@media (min-width: 1280px) {
    .container.container-wide { max-width: 1500px; }
}
@media (min-width: 1600px) {
    .container.container-wide { max-width: 1700px; }
}
/* Full-width container — used by the redesigned Planning page; the page
   manages its own padding so it can take the entire screen on desktop. */
.container.container-fullwidth {
    max-width: none;
    width: 100%;
    padding: 1rem 1.25rem 2rem;
}

/* === Planning page (redesign) ============================================ */
.planning-header { margin-bottom: 1rem; }
.planning-header h1 { margin: 0 0 0.15rem; }
.planning-header p { margin: 0; }

.planning-form { margin-bottom: 1rem; }

/* Mode tabs */
.planning-tabs {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.5rem;
    margin-bottom: 0.75rem;
}
.planning-tab {
    text-align: start;
    padding: 0.7rem 1rem;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    cursor: pointer;
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    transition: border-color 120ms, background-color 120ms;
}
.planning-tab:hover { border-color: var(--primary); }
.planning-tab.active {
    border-color: var(--primary);
    background: #eff6ff;
    box-shadow: inset 0 -3px 0 var(--primary);
}
.planning-tab .tab-title {
    font-weight: 600;
    color: var(--text);
    font-size: 0.95rem;
}
.planning-tab .tab-hint {
    font-size: 0.8rem;
    color: var(--text-muted);
}

/* Input bar — single horizontal row on desktop so Category, Item picker(s),
   and Calculate sit on the same baseline. No visible label on Category;
   the dropdown's first option ("All categories") makes its purpose clear. */
.planning-input-bar {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 0.65rem 0.85rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}
.planning-input-filter {
    /* Now a bare <select>, not a wrapper div. Same height as the row inputs. */
    width: 100%;
    max-width: 100%;
    padding: 0.5rem 0.65rem;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: #fff;
    font-size: 0.9rem;
    height: 38px;
}

.planning-rows { display: flex; flex-direction: column; gap: 0.4rem; }
.planning-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    align-items: center;
}
@media (min-width: 992px) {
    .planning-input-bar {
        flex-direction: row;
        flex-wrap: wrap;
        align-items: stretch;
        gap: 0.6rem;
    }
    .planning-input-filter {
        flex: 0 0 220px;
        align-self: flex-start;
    }
    .planning-rows {
        flex: 1 1 360px;
        min-width: 0;
    }
    .planning-actions {
        flex: 0 0 auto;
        align-self: flex-start;
        border-top: none !important;
        padding-top: 0 !important;
    }
    /* Make the row inputs match the select's 38px height for clean alignment */
    .planning-row-grid input[type="text"],
    .planning-row-grid input[type="number"] {
        height: 38px;
    }
    .btn-icon { height: 38px; width: 38px; }
}
.planning-row-grid {
    display: grid;
    grid-template-columns: 1fr 130px 40px;
    gap: 0.65rem;
    align-items: center;
}
.planning-row-grid input[type="text"],
.planning-row-grid input[type="number"] {
    width: 100%;
    padding: 0.5rem 0.7rem;
    border: 1px solid var(--border);
    border-radius: var(--radius);
}
@media (max-width: 768px) {
    .planning-row-grid { grid-template-columns: 1fr; }
}

.planning-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    align-items: center;
    padding-top: 0.4rem;
    border-top: 1px dashed var(--border);
}

/* KPI banner */
.kpi-banner {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 0.75rem;
    margin: 1rem 0;
}
.kpi-tile {
    background: var(--surface);
    border: 1px solid var(--border);
    border-inline-start: 4px solid var(--border);
    border-radius: var(--radius);
    padding: 0.85rem 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}
.kpi-tile-bad { border-inline-start-color: #b91c1c; background: #fef2f2; }
.kpi-tile-ok { border-inline-start-color: #059669; background: #ecfdf5; }
.kpi-tile-warn { border-inline-start-color: #d97706; background: #fffbeb; }
.kpi-tile-info { border-inline-start-color: #2563eb; background: #eff6ff; }
.kpi-label {
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.kpi-value {
    font-size: 1.8rem;
    font-weight: 700;
    color: var(--text);
    font-variant-numeric: tabular-nums;
    line-height: 1.1;
}
.kpi-value-sm {
    font-size: 1rem;
    font-weight: 600;
    word-break: break-word;
    line-height: 1.3;
}
.kpi-sub { font-size: 0.85rem; color: var(--text-muted); }
.kpi-tile-bad .kpi-sub { color: #991b1b; font-weight: 500; }
.kpi-tile-ok .kpi-sub { color: #065f46; }

/* Split-pane results */
.planning-result-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
    gap: 1rem;
    margin: 0.5rem 0;
}
.planning-result-grid-single { grid-template-columns: 1fr; }
@media (max-width: 1100px) {
    .planning-result-grid { grid-template-columns: 1fr; }
}

.planning-pane {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 0.85rem 1rem 1rem;
    min-width: 0;
}
.pane-header {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.6rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid var(--border);
}
.pane-header h2 { margin: 0; font-size: 1.05rem; }
.pane-header-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    align-items: center;
}
.tree-toolbar { display: flex; gap: 0.4rem; flex-wrap: wrap; }
.planning-toggle {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.35rem 0.7rem;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface);
    cursor: pointer;
    font-size: 0.85rem;
    color: var(--text);
    user-select: none;
    white-space: nowrap;
}
.planning-toggle input[type="checkbox"] { margin: 0; accent-color: var(--primary); }
.planning-toggle:hover { border-color: var(--primary); }

/* ===== Warehouse-scope multi-select (custom checkbox dropdown) ===== */
.ms-select { position: relative; display: inline-block; }
.ms-trigger {
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    width: auto;
    min-width: 190px;
    max-width: 280px;
    cursor: pointer;
    text-align: start;
    background: #fff;
}
.ms-trigger:hover { border-color: var(--primary); }
.ms-trigger-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ms-caret { font-size: 0.7rem; color: var(--text-muted); transition: transform 0.15s ease; }
.ms-select.open .ms-caret { transform: rotate(180deg); }
.ms-select.open .ms-trigger {
    border-color: var(--primary);
    box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.15);
}
.ms-panel {
    position: absolute;
    z-index: 50;
    top: calc(100% + 4px);
    inset-inline-start: 0;
    min-width: 260px;
    max-width: 340px;
    background: #fff;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
    padding: 0.35rem;
    display: none;
    flex-direction: column;
    max-height: 340px;
    overflow: hidden;   /* the inner .ms-scroll owns the scrollbar */
}
.ms-select.open .ms-panel { display: flex; }
/* Search head is fixed; only .ms-scroll below it scrolls. */
.ms-panel-head { flex: 0 0 auto; padding: 0.1rem 0.1rem 0.35rem; background: #fff; }
.ms-scroll { flex: 1 1 auto; min-height: 0; overflow-y: auto; }
.ms-search {
    width: 100%;
    padding: 0.4rem 0.55rem;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    font-size: 0.85rem;
}
.ms-option {
    position: relative;
    display: flex;
    align-items: center;
    gap: 0.55rem;
    padding: 0.45rem 0.5rem;
    border-radius: var(--radius);
    cursor: pointer;
    font-size: 0.88rem;
    user-select: none;
}
.ms-option:hover { background: var(--bg, #f4f6fb); }
.ms-option input[type="checkbox"] { position: absolute; opacity: 0; width: 0; height: 0; }
.ms-check {
    flex: 0 0 auto;
    width: 18px; height: 18px;
    border: 1.5px solid var(--border);
    border-radius: 5px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #fff;
    transition: background 0.12s ease, border-color 0.12s ease;
}
.ms-option input:checked + .ms-check,
.ms-option input:indeterminate + .ms-check {
    background: var(--primary, #2563eb);
    border-color: var(--primary, #2563eb);
}
.ms-option input:checked + .ms-check::after {
    content: "";
    width: 5px; height: 9px;
    border: solid #fff;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
    margin-top: -2px;
}
.ms-option input:indeterminate + .ms-check::after {
    content: "";
    width: 9px;
    border-top: 2px solid #fff;
}
.ms-option-all { font-weight: 600; }
/* Off-plan warehouse row — visible for reference, but not selectable.
   A thin, soft strikethrough marks it as "not counted" without shouting. */
.ms-option-disabled { cursor: not-allowed; opacity: 0.6; }
.ms-option-disabled:hover { background: transparent; }
.ms-check-disabled { background: #f1f3f7; border-style: dashed; }
.ms-option-disabled .ms-opt-text,
.ms-option-disabled .ms-opt-sub {
    text-decoration-line: line-through;
    text-decoration-thickness: 1px;
    text-decoration-color: rgba(100, 116, 139, 0.5);
}
.ms-opt-text { display: flex; flex-direction: column; line-height: 1.15; min-width: 0; }
.ms-opt-sub {
    font-size: 0.72rem; color: var(--text-muted); font-weight: 400;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.ms-opt-tag {
    margin-inline-start: auto;
    font-size: 0.62rem;
    padding: 0.05rem 0.4rem;
    border-radius: 999px;
    background: var(--bg, #eef1f6);
    color: var(--text-muted);
    white-space: nowrap;
}
.ms-sep { height: 1px; background: var(--border); margin: 0.25rem 0.1rem; }

/* ===== Items list — "used in BOMs" (production usage) chips ===== */
/* Let the long free-text columns (part number, name) break so the table
   always fits its container instead of forcing a horizontal scroll when the
   extra "Used in" column is present. Scoped to those columns so codes in
   other columns never char-break. */
.items-list-table .col-break { overflow-wrap: anywhere; }
/* The two chips stay together on the first line (usage-chips is nowrap); the
   "+N" sits on its own line below them (a <br> in the markup). Keeps the
   column narrow — two short codes wide — so the name column keeps its width
   and rows stay ~2 lines instead of 3. */
.prod-usage-cell { white-space: normal; }
.prod-usage-cell .usage-chips { white-space: nowrap; }
.prod-usage-cell .usage-chip, .prod-usage-cell .usage-more {
    display: inline-block;
    padding: 0.05rem 0.4rem;
    margin-inline-end: 0.2rem;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 600;
    line-height: 1.5;
    text-decoration: none;
    border: 1px solid transparent;
}
.prod-usage-cell .usage-chip {
    background: #ede9fe;
    color: #5b21b6;
    border-color: #ddd6fe;
}
.prod-usage-cell .usage-chip:hover { background: #ddd6fe; color: #5b21b6; }
.prod-usage-cell .usage-more {
    background: var(--bg, #eef1f6);
    color: var(--text-muted);
    border-color: var(--border);
}
.prod-usage-cell .usage-more:hover { border-color: var(--primary); color: var(--primary); }

/* ===== Dashboard — device stock by group ===== */
/* --dg-accent scopes the panel's own color so two of these can sit on one
   page (admin sees the sales-style one and the production-style one) without
   either bleeding into the other or into unrelated components. */
.dg-panel {
    --dg-accent: var(--primary, #2563eb);
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 1rem 1.1rem 1.15rem;
    margin-bottom: 1.25rem;
}
/* Production's own identity: amber instead of blue, plus a top border the
   sales-style panel doesn't have — reads apart at a glance, not just on
   close reading of the text. The border-top lives only on the modifier
   (not the base .dg-panel) because _sales_report.html's outer section
   reuses .dg-panel as its base card style via `class="dg-panel sr-panel"`;
   putting it on the base class would have put an unrelated blue bar across
   the sales-report panel too. */
.dg-panel-production {
    --dg-accent: #d97706;
    border-top: 3px solid var(--dg-accent);
}
.dg-panel-head {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
    margin-bottom: 0.9rem;
}
.dg-panel-head h2 { margin: 0; font-size: 1.05rem; }
.dg-panel-total {
    margin-inline-start: auto;
    display: inline-flex;
    align-items: baseline;
    gap: 0.4rem;
    background: var(--bg, #eef1f6);
    border-radius: 999px;
    padding: 0.2rem 0.75rem;
}
.dg-total-label { font-size: 0.72rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.03em; }
.dg-total-value { font-size: 1.05rem; font-weight: 800; color: var(--dg-accent); }
.dg-manage { flex: 0 0 auto; }

/* Group selector tabs */
.dg-tabs { display: flex; flex-wrap: wrap; gap: 0.45rem; margin-bottom: 0.85rem; }
.dg-tab {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    border: 1.5px solid var(--border);
    border-radius: 999px;
    background: #fff;
    padding: 0.35rem 0.9rem;
    font-size: 0.86rem;
    font-weight: 600;
    color: var(--text);
    cursor: pointer;
    transition: border-color 0.12s ease, background 0.12s ease;
}
.dg-tab:hover { border-color: var(--dg-accent); }
.dg-tab.active {
    background: var(--dg-accent);
    border-color: var(--dg-accent);
    color: #fff;
}
.dg-tab-qty {
    background: color-mix(in srgb, var(--dg-accent) 10%, transparent);
    color: var(--dg-accent);
    border-radius: 999px;
    padding: 0.05rem 0.5rem;
    font-size: 0.78rem;
    font-weight: 800;
}
.dg-tab.active .dg-tab-qty { background: rgba(255, 255, 255, 0.22); color: #fff; }

/* Pane toolbar (description · device count · details toggle) */
.dg-pane-bar {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
    margin-bottom: 0.55rem;
}
.dg-pane-devcount { font-size: 0.78rem; color: var(--text-muted); }
.dg-details-btn { margin-inline-start: auto; }
.dg-details-btn.active { background: var(--dg-accent); color: #fff; border-color: var(--dg-accent); }

/* Tables (summary + per-device matrix) */
.dg-table { font-size: 0.85rem; }
.dg-table th.num, .dg-table td.num { white-space: nowrap; }
.dg-table .dg-total-row td {
    border-top: 2px solid var(--border);
    font-weight: 700;
    background: var(--bg, #f4f6fb);
}
.dg-row-empty { opacity: 0.55; }
.dg-item-name { display: block; font-size: 0.72rem; color: var(--text-muted); }

/* Share-of-stock bar in the summary view */
.dg-bar {
    height: 8px;
    border-radius: 999px;
    background: var(--bg, #eef1f6);
    overflow: hidden;
    min-width: 60px;
}
.dg-bar-fill {
    height: 100%;
    border-radius: 999px;
    background: var(--dg-accent);
}
.dg-empty-note { margin: 0; font-size: 0.78rem; color: var(--text-muted); }

/* ===== Dashboard — sales report ===== */
/* One accent hue per period so the four tiles read apart at a glance,
   reusing the palette the stat-card-cat-* classes already establish. */
.sr-panel {
    --sr-c1: #7c3aed;   /* today      — violet */
    --sr-c2: #0891b2;   /* 7 days     — cyan   */
    --sr-c3: #d97706;   /* 30 days    — amber  */
    --sr-c4: #16a34a;   /* 365 days   — green  */
}
.sr-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.75rem;
    flex-wrap: wrap;
    margin-bottom: 0.9rem;
}
.sr-head-title h2 { margin: 0; font-size: 1.05rem; }
.sr-basis {
    margin: 0.15rem 0 0;
    font-size: 0.74rem;
    color: var(--text-muted);
}
/* flex-shrink:0 would keep this row pinned to its full content width even
   when narrower than the panel, pushing the page into horizontal overflow
   instead of wrapping. min-width:0 is needed too — flex items default to
   min-width:auto, which silently overrides shrinking on their own content. */
.sr-head-actions {
    display: flex;
    gap: 0.4rem;
    flex-wrap: wrap;
    flex: 0 1 auto;
    min-width: 0;
    justify-content: flex-end;
    align-items: center;
}

/* Scope switch (All ⇄ Devices only) — a segmented pill; the active half
   lifts onto a coloured chip so the current scope is unmistakable. */
.sr-switch {
    display: inline-flex;
    padding: 3px;
    gap: 2px;
    background: var(--bg, #eef1f6);
    border: 1px solid var(--border);
    border-radius: 999px;
}
.sr-switch-opt {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.24rem 0.75rem;
    border-radius: 999px;
    font-size: 0.76rem;
    font-weight: 600;
    color: var(--text-muted);
    text-decoration: none;
    white-space: nowrap;
    transition: background 0.15s, color 0.15s, box-shadow 0.15s;
}
.sr-switch-opt:hover { color: var(--text); }
.sr-switch-opt.active {
    background: linear-gradient(135deg, #6366f1, #2563eb);
    color: #fff;
    box-shadow: 0 1px 4px rgba(37, 99, 235, 0.35);
}
/* Devices-only scope gets its own hue, so the panel's numbers are never
   mistaken for the full picture at a glance. */
.sr-switch-opt:last-child.active {
    background: linear-gradient(135deg, #a78bfa, #7c3aed);
    box-shadow: 0 1px 4px rgba(124, 58, 237, 0.35);
}
/* Drill-down banner on the order list when arriving from a sales tile. */
.so-period-banner {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
    margin: 0 0 0.75rem;
    padding: 0.5rem 0.75rem;
    border: 1px solid #ddd6fe;
    border-inline-start: 3px solid #7c3aed;
    border-radius: var(--radius);
    background: #f5f3ff;
    font-size: 0.85rem;
}
.so-period-label { color: var(--text-muted); font-size: 0.74rem; text-transform: uppercase; letter-spacing: 0.03em; }
.so-period-hint { font-size: 0.78rem; margin-inline-start: auto; }

/* Scope badge next to the heading, mirroring the switch colour. */
.sr-scope-badge {
    display: inline-block;
    margin-inline-start: 0.45rem;
    padding: 0.05rem 0.5rem;
    border-radius: 999px;
    background: #ede9fe;
    color: #5b21b6;
    border: 1px solid #ddd6fe;
    font-size: 0.66rem;
    font-weight: 700;
    vertical-align: middle;
}
/* .btn is defined later in this file, so match its specificity to win. */
.btn.sr-export { border-color: #16a34a; color: #15803d; }
.btn.sr-export:hover { background: #f0fdf4; border-color: #15803d; color: #14532d; }

/* Export range picker: the whole button is the <summary> of a <details> —
   clicking anywhere on it opens the dropdown to pick a period. */
.sr-export-dd { position: relative; }
.btn.sr-export {
    list-style: none;
    cursor: pointer;
    user-select: none;
}
.btn.sr-export::-webkit-details-marker { display: none; }
.sr-export-menu {
    display: none;
    position: absolute;
    top: calc(100% + 0.3rem);
    inset-inline-end: 0;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    min-width: 160px;
    padding: 0.3rem 0;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    z-index: 100;
}
.sr-export-dd:hover .sr-export-menu,
.sr-export-dd[open] .sr-export-menu { display: block; }
.sr-export-menu-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    padding: 0.4rem 0.75rem;
    font-size: 0.82rem;
    color: var(--text);
    text-decoration: none;
    white-space: nowrap;
}
.sr-export-menu-item:hover { background: var(--bg, #f8fafc); }
.sr-export-menu-default::after {
    content: '●';
    font-size: 0.5rem;
    color: #16a34a;
}
.sr-tiles {
    display: grid;
    /* Always four periods; minmax(0,…) so a long value can never widen a
       column past its share (auto-fit here would spawn empty 0px tracks). */
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.6rem;
    margin-bottom: 1rem;
}
.sr-tile {
    position: relative;
    border: 1px solid var(--border);
    border-top: 3px solid var(--sr-accent, var(--primary, #2563eb));
    border-radius: var(--radius);
    padding: 0.7rem 0.8rem;
    background:
        linear-gradient(180deg, color-mix(in srgb, var(--sr-accent, #2563eb) 7%, #fff) 0%, #fff 62%);
    min-width: 0;
    transition: box-shadow 0.15s, transform 0.15s;
}
.sr-tile:hover { box-shadow: 0 4px 14px rgba(0, 0, 0, 0.08); transform: translateY(-1px); }
/* Tiles drill through to the matching orders, so they're anchors now. */
a.sr-tile { display: block; text-decoration: none; color: inherit; }
a.sr-tile:hover { border-color: var(--sr-accent, var(--primary, #2563eb)); }
/* Brief dimming while the scope swap is in flight. */
.sr-panel.sr-busy { opacity: 0.55; transition: opacity 0.1s; pointer-events: none; }
.sr-tiles > .sr-tile:nth-child(1) { --sr-accent: var(--sr-c1); }
.sr-tiles > .sr-tile:nth-child(2) { --sr-accent: var(--sr-c2); }
.sr-tiles > .sr-tile:nth-child(3) { --sr-accent: var(--sr-c3); }
.sr-tiles > .sr-tile:nth-child(4) { --sr-accent: var(--sr-c4); }
.sr-tile-head { display: flex; align-items: center; gap: 0.4rem; justify-content: space-between; }
.sr-tile-label {
    font-size: 0.72rem;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.03em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.sr-trend {
    flex: 0 0 auto;
    font-size: 0.68rem;
    font-weight: 700;
    padding: 0.02rem 0.35rem;
    border-radius: 999px;
    white-space: nowrap;
}
.sr-up { background: #dcfce7; color: #166534; }
.sr-down { background: #fee2e2; color: #991b1b; }
.sr-flat { background: var(--bg, #eef1f6); color: var(--text-muted); }
.sr-tile-value { font-size: 1.7rem; font-weight: 800; line-height: 1.15; color: var(--sr-accent, var(--primary, #2563eb)); }
.sr-tile-sub { font-size: 0.7rem; color: var(--text-muted); text-transform: uppercase; }
.sr-tile-meta {
    margin-top: 0.3rem;
    padding-top: 0.3rem;
    border-top: 1px dashed var(--border);
    font-size: 0.73rem;
    color: var(--text-muted);
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
}
.sr-sep { opacity: 0.5; }
.sr-partial { color: var(--danger, #b91c1c); font-weight: 700; cursor: help; }

.sr-split { display: grid; grid-template-columns: 1.6fr 1fr; gap: 0.9rem; }
.sr-block {
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 0.7rem 0.8rem;
    background: #fff;
    min-width: 0;
}
.sr-block-head { display: flex; align-items: baseline; justify-content: space-between; gap: 0.5rem; margin-bottom: 0.5rem; }
.sr-block-head h3 { margin: 0; font-size: 0.86rem; font-weight: 700; }
.sr-peak { font-size: 0.72rem; }

/* Daily bars: each slot flexes, so 30 days fit any width without overflow.
   .sr-chart is the positioned ancestor, so the hover label below anchors to
   the chart (always inside the panel) rather than to an edge bar. */
.sr-chart {
    position: relative;
    display: flex;
    align-items: flex-end;
    gap: 2px;
    height: 96px;
    padding-top: 1.7rem;      /* room for the floating hover label */
    margin-top: -1.7rem;
}
.sr-bar-slot { flex: 1 1 0; min-width: 0; height: 100%; display: flex; align-items: flex-end; cursor: default; }
.sr-bar {
    width: 100%;
    background: linear-gradient(180deg, #6366f1 0%, #2563eb 100%);
    border-radius: 3px 3px 0 0;
    min-height: 2px;
    transition: filter 0.12s, transform 0.12s;
}
.sr-bar-slot:hover .sr-bar { filter: brightness(1.15) saturate(1.2); transform: scaleY(1.03); transform-origin: bottom; }
.sr-bar-zero { background: var(--border); min-height: 2px; }

/* Hover label — pinned to the top of the chart so it never overflows. */
.sr-bar-slot::after {
    content: attr(data-tip);
    position: absolute;
    top: 0;
    inset-inline-start: 50%;
    transform: translateX(-50%);
    background: #1e293b;
    color: #fff;
    font-size: 0.68rem;
    font-weight: 600;
    white-space: nowrap;
    padding: 0.16rem 0.55rem;
    border-radius: 999px;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.12s;
    z-index: 5;
}
[dir="rtl"] .sr-bar-slot::after { transform: translateX(50%); }
.sr-bar-slot:hover::after { opacity: 1; }
.sr-chart-axis {
    display: flex;
    justify-content: space-between;
    font-size: 0.66rem;
    color: var(--text-muted);
    margin-top: 0.3rem;
}

.sr-top-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.4rem; }
.sr-top-row { display: flex; align-items: center; gap: 0.45rem; font-size: 0.78rem; }
.sr-top-code { flex: 0 0 auto; font-weight: 600; text-decoration: none; }
.sr-top-bar-wrap { flex: 1 1 auto; min-width: 0; background: var(--bg, #eef1f6); border-radius: 999px; height: 8px; }
.sr-top-bar {
    display: block;
    height: 100%;
    background: var(--sr-rank, var(--primary, #2563eb));
    border-radius: 999px;
    transition: filter 0.12s;
}
/* Rank colours echo the period palette so the whole panel feels one system. */
.sr-top-row:nth-child(1) { --sr-rank: linear-gradient(90deg, #8b5cf6, #7c3aed); }
.sr-top-row:nth-child(2) { --sr-rank: linear-gradient(90deg, #22d3ee, #0891b2); }
.sr-top-row:nth-child(3) { --sr-rank: linear-gradient(90deg, #fbbf24, #d97706); }
.sr-top-row:nth-child(4) { --sr-rank: linear-gradient(90deg, #4ade80, #16a34a); }
.sr-top-row:nth-child(5) { --sr-rank: linear-gradient(90deg, #94a3b8, #64748b); }
.sr-top-row:hover .sr-top-bar { filter: brightness(1.1); }
.sr-top-units { flex: 0 0 auto; font-weight: 700; min-width: 1.6rem; text-align: end; }

@media (max-width: 768px) {
    .sr-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .sr-split { grid-template-columns: minmax(0, 1fr); }
}
/* Sub-assembly indicator (max-producible component table) */
.badge-subassembly {
    background: #ede9fe;
    color: #5b21b6;
    border: 1px solid #c4b5fd;
    font-size: 0.7rem;
    padding: 0.05rem 0.35rem;
    margin-inline-start: 0.4rem;
}
/* Max-mode row in max-mode (qty cell hidden) */
.planning-row-grid-max { grid-template-columns: 1fr 0 40px; }

/* Max-producible component analysis — children render as siblings in the
   same table. Lock column widths so adding rows can't shift them, then
   convey hierarchy with a connector character + per-depth background. */
/* Percentage widths so the table scales and headers fit even on a wide
   container. The Component column carries the bulk; numeric columns get
   enough room for "Buildable now" / "Max possible" without overlap. */
.max-analysis-table { table-layout: fixed; width: 100%; }
.max-analysis-table thead th { white-space: normal; vertical-align: bottom; }
.max-analysis-table thead th:nth-child(1) { width: 4%; }
.max-analysis-table thead th:nth-child(2) { width: 34%; }
.max-analysis-table thead th:nth-child(3) { width: 11%; }
.max-analysis-table thead th:nth-child(4) { width: 11%; }
.max-analysis-table thead th:nth-child(5) { width: 13%; }
.max-analysis-table thead th:nth-child(6) { width: 12%; }
.max-analysis-table thead th:nth-child(7) { width: 15%; }
.max-analysis-table .max-row-item { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.max-row-item .btn-disclose,
.max-row-item .btn-disclose-spacer {
    display: inline-block;
    width: 22px;
    margin-inline-end: 0.25rem;
    text-align: center;
}
.max-row-item .depth-connector {
    display: inline-block;
    width: 1.1em;
    color: var(--text-muted);
    font-weight: 600;
    margin-inline-end: 0.15rem;
}
/* Per-depth row background — entire row tinted so values stay column-aligned */
.max-row-depth-1 > td { background: #fafafa; }
.max-row-depth-2 > td { background: #f3f4f6; }
.max-row-depth-3 > td { background: #e5e7eb; }
.max-row-depth-4 > td { background: #d1d5db; }
/* Inner sub-assembly rows AND their descendants share the # accent. The
   root product (depth=0) and its direct leaves stay neutral — only the
   nested sub-assembly tree inside the BOM gets visually grouped. The macro
   sets data-in-sub="true" on every row in such a tree. */
.max-row[data-in-sub="true"] > td:first-child {
    color: #6d28d9;
    font-weight: 700;
    border-inline-start: 3px solid #8b5cf6;
}
/* Soft yellow tint for sub-assemblies whose subtree contains a shortage */
.warn-row > td { background: #fffbeb !important; }
/* Direct shortage rows take the existing red shortage-row tint and override */

/* Requirements analysis table column widths (6 cols, no Qty/Unit). */
.req-analysis-table thead th:nth-child(1) { width: 4%; }
.req-analysis-table thead th:nth-child(2) { width: 48%; }
.req-analysis-table thead th:nth-child(3) { width: 11%; }
.req-analysis-table thead th:nth-child(4) { width: 11%; }
.req-analysis-table thead th:nth-child(5) { width: 14%; }
.req-analysis-table thead th:nth-child(6) { width: 12%; }

/* Production-sequence summary table column widths (6 cols).
   First-child override so the # column isn't squashed by .data-table's
   2.5rem rule, mirroring the supply-summary fix. */
.seq-summary-table { table-layout: fixed; width: 100%; }
.seq-summary-table thead th { white-space: normal; vertical-align: bottom; }
.seq-summary-table thead th:first-child,
.seq-summary-table tbody td:first-child { width: 4%; text-align: center; color: var(--text-muted); }
.seq-summary-table thead th:nth-child(2) { width: 48%; }
.seq-summary-table thead th:nth-child(3) { width: 12%; }
.seq-summary-table thead th:nth-child(4) { width: 12%; }
.seq-summary-table thead th:nth-child(5) { width: 12%; }
.seq-summary-table thead th:nth-child(6) { width: 12%; }
.seq-summary-table thead th { position: sticky; top: 0; background: #eef2f7; z-index: 1; }

/* Per-step tables in the drawer get the same overall feel but slimmer. */
.seq-step-table { width: 100%; }
.seq-step-table thead th { white-space: normal; }
/* Step header chips — show how this step was sourced even when materials is empty */
.step-breakdown {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin: 0.3rem 0 0.6rem;
}
.step-chip {
    display: inline-flex;
    align-items: center;
    padding: 0.15rem 0.55rem;
    border-radius: 999px;
    font-size: 0.78rem;
    font-weight: 500;
    border: 1px solid;
}
.step-chip-stock { background: #ecfdf5; color: #065f46; border-color: #6ee7b7; }
.step-chip-wip { background: #fff7ed; color: #9a3412; border-color: #fdba74; }
.step-chip-scratch { background: #eff6ff; color: #1e40af; border-color: #93c5fd; }

/* Supply summary panel above the component analysis */
.supply-pane { margin-bottom: 0.75rem; }
.supply-summary-table { table-layout: fixed; width: 100%; }
.supply-summary-table thead th { font-size: 0.78rem; }
/* Override .data-table's `:first-child { width: 2.5rem; text-align:center }`
   rule which assumes col 1 is a row index — here col 1 is the Product cell. */
.supply-summary-table thead th:first-child,
.supply-summary-table tbody td:first-child {
    width: auto;
    text-align: start;
    color: inherit;
}
.supply-summary-table thead th:nth-child(2),
.supply-summary-table thead th:nth-child(3),
.supply-summary-table thead th:nth-child(4),
.supply-summary-table thead th:nth-child(5) { width: 130px; }
.result-toolbar-toggle {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    cursor: pointer;
    font-size: 0.9rem;
}
/* Search box on the component-analysis pane header */
.analysis-search-input {
    width: 240px;
    max-width: 100%;
    padding: 0.4rem 0.65rem;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    font-size: 0.9rem;
}
.analysis-search-input:focus { outline: none; border-color: var(--primary); }

/* Action list — flat shortage table */
.action-table th.num, .action-table td.num,
.planning-result-table th.num, .planning-result-table td.num {
    text-align: end;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}
.action-list { max-height: 70vh; overflow: auto; }
.action-list .data-table thead th {
    position: sticky; top: 0; z-index: 1;
    background: var(--brand-dark-blue);
}
.item-highlight td { background: #fef9c3 !important; }

/* Drawer */
.planning-drawer {
    margin: 1rem 0;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
}
.planning-drawer summary {
    padding: 0.7rem 1rem;
    cursor: pointer;
    font-weight: 600;
    color: var(--text);
}
.planning-drawer .drawer-body {
    padding: 0.5rem 1rem 1rem;
    border-top: 1px solid var(--border);
}
.drawer-section { margin: 0.75rem 0; }
.drawer-section h3 { font-size: 0.95rem; margin: 0 0 0.5rem; }

/* Compact multi-row planning input — column header + per-row grid. */
.plan-rows-header {
    display: none;
    gap: 0.75rem;
    padding: 0 0.25rem 0.4rem;
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.plan-row-grid {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    margin-bottom: 0.6rem;
    padding-bottom: 0.6rem;
    border-bottom: 1px dashed var(--border);
}
.plan-row-grid:last-child { border-bottom: none; padding-bottom: 0; margin-bottom: 0.4rem; }
.plan-row-grid input[type="text"],
.plan-row-grid input[type="number"] {
    width: 100%;
    padding: 0.5rem 0.75rem;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    font-size: 0.9rem;
}
.plan-row-cell { min-width: 0; }
@media (min-width: 769px) {
    .plan-rows-header,
    .plan-row-grid {
        display: grid;
        grid-template-columns: 1fr 140px 44px;
        align-items: center;
        gap: 0.75rem;
    }
    .plan-row-grid { padding-bottom: 0; border-bottom: none; }
}

/* Icon button — used for "remove row" ✕ */
.btn-icon {
    width: 36px; height: 36px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.05rem;
    line-height: 1;
    border-radius: var(--radius);
}

/* Planning result summary banner */
.plan-summary {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    align-items: center;
    justify-content: space-between;
    margin: 1rem 0;
    padding: 0.75rem 1rem;
    border-radius: var(--radius);
    border-inline-start: 4px solid;
    background: var(--surface);
    font-size: 0.95em;
}
.plan-summary-short { border-color: #b91c1c; background: #fef2f2; }
.plan-summary-ok { border-color: #059669; background: #ecfdf5; }
.plan-summary-plan { color: var(--text); }

/* Hierarchical shortage tree (planning) */
.supply-tree {
    list-style: none;
    margin: 0.5rem 0 1.5rem;
    padding: 0;
    font-size: 0.92em;
}
.supply-tree ul.tree-children {
    list-style: none;
    margin: 0;
    padding: 0;
}
.tree-node { margin: 0.05rem 0; }
.tree-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.3rem 0.5rem;
    border-radius: var(--radius);
    flex-wrap: wrap;
}
.tree-row:hover { background: var(--bg); }
.tree-indent {
    display: inline-block;
    width: calc(var(--depth, 0) * 1.4rem);
    flex: 0 0 auto;
}
.tree-bullet {
    color: var(--text-muted);
    width: 1.1em;
    text-align: center;
    flex: 0 0 auto;
    font-size: 0.85em;
}
.tree-bullet.tree-leaf { color: var(--border); }
.tree-toggle {
    background: transparent;
    border: none;
    padding: 0;
    width: 1.4em;
    height: 1.4em;
    cursor: pointer;
    color: var(--text-muted);
    font-size: 0.85em;
    line-height: 1;
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
}
.tree-toggle:hover { background: var(--bg); color: var(--primary); }
.tree-node.collapsed > .tree-children { display: none; }
.tree-code { font-weight: 500; }
.tree-code a { color: var(--primary); text-decoration: none; }
.tree-code a:hover { text-decoration: underline; }
.tree-qty {
    color: var(--text-muted);
    font-size: 0.9em;
    font-variant-numeric: tabular-nums;
}
.tree-node.tree-short > .tree-row { background: #fef2f2; border-inline-start: 3px solid #b91c1c; }
.tree-node.tree-warn > .tree-row { background: #fffbeb; border-inline-start: 3px solid #d97706; }
.badge-short { background: #fee2e2; color: #991b1b; border: 1px solid #fca5a5; font-weight: 600; }
.badge-warn { background: #fef3c7; color: #92400e; border: 1px solid #fcd34d; }
.badge-ok { background: #d1fae5; color: #065f46; border: 1px solid #6ee7b7; }

/* Disclosure button for inline expandable rows (e.g. sub-assembly breakdown) */
.btn-disclose {
    background: transparent;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    width: 24px; height: 24px;
    padding: 0;
    cursor: pointer;
    color: var(--text-muted);
    font-size: 0.7rem;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.btn-disclose:hover { background: var(--bg); color: var(--primary); }

/* Shortage-only toggle on planning result tables */
.result-toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    align-items: center;
    margin: 0.75rem 0 0.5rem;
    padding: 0.5rem 0.75rem;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
}
.result-toolbar label { font-size: 0.9rem; cursor: pointer; }
.shortage-only-active tr.non-shortage { display: none; }
.shortage-only-active tr.shortage-row td { background: #fef2f2; }

/* Alerts */
.alert {
    padding: 0.75rem 1rem;
    border-radius: var(--radius);
    margin-bottom: 1rem;
    font-size: 0.9rem;
}
.alert-success { background: #dcfce7; color: #166534; }
.alert-danger { background: #fee2e2; color: #991b1b; }
.alert-warning { background: #fef3c7; color: #92400e; }
.alert-info { background: #dbeafe; color: #1e40af; }

/* Page header */
.page-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.5rem;
    border-bottom: 2px solid var(--border);
    padding-bottom: 1rem;
}
.page-header h1 { font-size: 1.5rem; }

/* Buttons */
.btn {
    display: inline-block;
    padding: 0.5rem 1rem;
    border: 1px solid #cbd5e1;
    border-radius: var(--radius);
    background: #e2e8f0;
    color: var(--text);
    font-size: 0.875rem;
    cursor: pointer;
    text-decoration: none;
    line-height: 1.5;
    transition: all 0.15s ease;
}
.btn:hover { background: #cbd5e1; border-color: #94a3b8; }
.btn-primary { background: #1e40af; color: white; border-color: #1e40af; box-shadow: 0 1px 2px rgba(0,0,0,0.1); }
.btn-primary:hover { background: var(--brand-dark-blue); border-color: var(--brand-dark-blue); }
.btn-danger { background: var(--danger); color: white; border-color: var(--danger); box-shadow: 0 1px 2px rgba(0,0,0,0.1); }
.btn-danger:hover { background: var(--danger-hover); }
.btn-warning { background: var(--warning); color: white; border-color: var(--warning); box-shadow: 0 1px 2px rgba(0,0,0,0.1); }
.btn-warning:hover { background: #b45309; }
.btn-sm { padding: 0.25rem 0.5rem; font-size: 0.8rem; }

/* Tables */
.data-table {
    width: 100%;
    border-collapse: collapse;
    background: var(--surface);
    border-radius: var(--radius);
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}
.data-table th {
    background: var(--brand-dark-blue);
    padding: 0.75rem 1rem;
    text-align: start;
    font-size: 0.8rem;
    text-transform: uppercase;
    color: #fff;
    border-bottom: none;
    letter-spacing: 0.02em;
}
.data-table th a { color: #fff; }
.data-table th.lines-sortable:hover { background: var(--primary-hover); }
.data-table td {
    padding: 0.75rem 1rem;
    border-bottom: 1px solid var(--border);
    font-size: 0.9rem;
}
/* Mixed-direction content in inputs (where users may type Farsi + English)
   should render per-content direction. Cells and headings inherit the page
   direction instead so columns stay visually aligned; the browser's default
   bidi algorithm still handles LTR runs inside RTL text correctly. */
input[type="text"], input[type="search"], input[type="email"],
input[type="url"], input[type="tel"],
textarea {
    unicode-bidi: plaintext;
}
.data-table tbody tr:nth-child(even) { background: #f8fafc; }
.data-table tr:hover { background: #f1f5f9; }
.data-table th:first-child, .data-table td:first-child { width: 2.5rem; text-align: center; color: var(--text-muted); }
.data-table th:first-child { color: rgba(255,255,255,0.75); }
/* Opt-out for tables whose first column ISN'T a row number (e.g. trace
   stock-summary leads with "Warehouse"). The default first-child rule
   above would otherwise squash the cell to 40px and center-align it. */
.data-table.data-table-no-num th:first-child,
.data-table.data-table-no-num td:first-child {
    width: auto;
    text-align: inherit;
}
.data-table.data-table-no-num td:first-child { color: inherit; }
/* Restore the white header color — `color: inherit` above would drop it
   back to the document text color (dark), making the th look black on
   the dark header bar. */
.data-table.data-table-no-num th:first-child { color: #fff; }
/* Numeric columns: right-aligned tabular numerals so digits stack
   neatly and rows feel scannable. Apply class="num" to the <th> and
   matching <td>. */
.data-table th.num, .data-table td.num {
    text-align: end;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}
/* Sortable column header: hover hint + the arrow chunk reserves space so
   the header doesn't reflow when an arrow is added. Used on items
   /detail.html serials table. */
.data-table th.sn-sortable,
.data-table th.lines-sortable { cursor: pointer; user-select: none; }
.data-table th.sn-sortable:hover,
.data-table th.lines-sortable:hover { background: #dde7f3; }
.data-table th.sn-sortable .sn-sort-arrow,
.data-table th.lines-sortable .lines-sort-arrow {
    display: inline-block;
    min-width: 1ch;
    color: var(--primary);
    font-size: 0.78rem;
}
/* Cells that show stacked content (code on top, name below in muted
   text) shouldn't wrap awkwardly. Used on /reports/trace warehouse
   columns. */
.trace-timeline-table td { vertical-align: top; }
.data-table a { color: var(--primary); text-decoration: none; }
.data-table a:hover { text-decoration: underline; }
.data-table a.btn { color: var(--text); }
.data-table a.btn:hover { text-decoration: none; }
.data-table a.btn-primary { color: white; }
.data-table a.btn-danger { color: white; }

/* Badges */
.badge {
    display: inline-block;
    padding: 0.2rem 0.5rem;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
}
.badge-tutorial-mode { background: var(--warning); color: #fff; margin-inline-start: 0.4rem; font-size: 0.65rem; vertical-align: middle; }
.badge-electronics { background: #fef3c7; color: #92400e; }
.badge-connector { background: #e0e7ff; color: #3730a3; }
.badge-cable { background: #f3e8ff; color: #6b21a8; }
.badge-power { background: #fee2e2; color: #991b1b; }
.badge-mechanical { background: #f1f5f9; color: #475569; }
.badge-material { background: #fef3c7; color: #92400e; }
.badge-label { background: #fefce8; color: #854d0e; }
.badge-hardware { background: #f8fafc; color: #64748b; }
.badge-pcb { background: #fce7f3; color: #9d174d; }
.badge-pcba { background: #fce7f3; color: #831843; }
.badge-module { background: #d1fae5; color: #065f46; }
.badge-rf_components { background: #ecfdf5; color: #047857; }
.badge-product { background: #dbeafe; color: #1e40af; }
.badge-accessories { background: #e0e7ff; color: #3730a3; }
.badge-unknown { background: #f1f5f9; color: #94a3b8; }
.badge-inbound { background: #dcfce7; color: #166534; }
.badge-outbound { background: #fee2e2; color: #991b1b; }
.badge-transfer { background: #dbeafe; color: #1e40af; }
.badge-adjustment { background: #fef3c7; color: #92400e; }
.badge-production { background: #e0e7ff; color: #3730a3; }
.badge-draft { background: #f1f5f9; color: #64748b; }
.badge-active { background: #dcfce7; color: #166534; }
.badge-archived { background: #fee2e2; color: #991b1b; }
.badge-available { background: #dcfce7; color: #166534; }
.badge-shipped { background: #dbeafe; color: #1e40af; }
.badge-scrapped { background: #fee2e2; color: #991b1b; }
.badge-in_qc { background: #fef3c7; color: #92400e; }
.badge-qc_failed { background: #fce7f3; color: #9d174d; }
.badge-assembled { background: #e0e7ff; color: #3730a3; }
.badge-returned { background: #fef3c7; color: #92400e; }
.badge-in_repair { background: #fce7f3; color: #9d174d; }
/* User role badges */
.badge-admin { background: #1e40af; color: #fff; }
.badge-finance { background: #166534; color: #fff; }
.badge-warehouse { background: #92400e; color: #fff; }
.badge-planner { background: #6b21a8; color: #fff; }
.badge-sales { background: #0c4a6e; color: #fff; }
.badge-tester { background: #831843; color: #fff; }
.badge-support { background: #475569; color: #fff; }
.badge-production { background: #15803d; color: #fff; }
.badge-repair { background: #b45309; color: #fff; }

/* Completion-BOM badge */
.badge-completion { background: #fff7ed; color: #9a3412; border: 1px solid #fdba74; }
/* Virtual KIT badge — surfaced in the items list, sales availability, etc. */
.badge-kit { background: #ecfdf5; color: #065f46; border: 1px solid #6ee7b7; font-weight: 600; }

/* Support ticket status badges */
.badge-tk-open { background: #dbeafe; color: #1e40af; }
.badge-tk-in_review { background: #fef3c7; color: #92400e; }
.badge-tk-return_required { background: #fce7f3; color: #9d174d; }
.badge-tk-received { background: #e0e7ff; color: #3730a3; }
.badge-tk-under_repair { background: #fed7aa; color: #9a3412; }
.badge-tk-repaired { background: #d1fae5; color: #065f46; }
.badge-tk-shipped_back { background: #dcfce7; color: #166534; }
.badge-tk-closed { background: #f1f5f9; color: #64748b; }

/* QC status badges */
.badge-qc-passed { background: #dcfce7; color: #166534; }
.badge-qc-failed { background: #fee2e2; color: #991b1b; }
.badge-qc-in-progress { background: #fef3c7; color: #92400e; }
.badge-qc-required { background: #dbeafe; color: #1e40af; }
.badge-qc-optional { background: #f1f5f9; color: #64748b; }

/* QC checkpoint result rows */
.cp-pass { background: #f0fdf4 !important; }
.cp-fail { background: #fef2f2 !important; }
.cp-skip { background: #fafafa !important; }

/* QC checkpoint card */
.qc-checkpoint-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 1rem;
    margin-bottom: 0.75rem;
}
.qc-checkpoint-card.required { border-inline-start: 3px solid var(--primary); }
.qc-checkpoint-card.optional { border-inline-start: 3px solid #cbd5e1; }

/* Device capability strip above the QC checkpoint table — what the model
   name says this unit should have, so the tester knows which functions to
   exercise. Three states: present, absent, and not-stated-in-the-name
   (dashed), which is deliberately not styled as an absence. */
.qc-caps-title { margin: 0.9rem 0 0.5rem; font-size: 0.95rem; }
.qc-caps {
    display: grid;
    /* minmax(0,…) so a long label wraps instead of widening the track and
       pushing the page into horizontal overflow on a phone. */
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 150px), 1fr));
    gap: 0.5rem;
    /* Whatever follows — the history bar or the filter bar — otherwise sits
       flush against the cards. */
    margin-bottom: 1rem;
}
.qc-cap {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    min-width: 0;
    padding: 0.45rem 0.7rem;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface);
    font-size: 0.85rem;
}
.qc-cap-label { min-width: 0; overflow-wrap: anywhere; }
.qc-cap-mark { flex: 0 0 auto; font-size: 1rem; font-weight: 700; line-height: 1; }
.qc-cap-yes { border-color: #bbf7d0; background: #f0fdf4; }
.qc-cap-yes .qc-cap-mark { color: #16a34a; }
.qc-cap-no { border-color: #fecaca; background: #fef2f2; }
.qc-cap-no .qc-cap-mark { color: #dc2626; }
.qc-cap-unknown { border-style: dashed; }
.qc-cap-unknown .qc-cap-label,
.qc-cap-unknown .qc-cap-mark { color: var(--text-muted); }
.qc-caps-note { margin: 0.5rem 0 0; font-size: 0.75rem; color: var(--text-muted); }

/* QC test form — table-style checkpoint UI (mobile-friendly + desktop) */
.qc-history-bar,
.qc-filter-bar {
    display: flex;
    gap: 0.5rem;
    align-items: center;
    flex-wrap: wrap;
    margin-bottom: 0.75rem;
    padding: 0.5rem 0.75rem;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
}
.qc-history-bar select { min-width: 18rem; max-width: 100%; }
#qc-history-banner {
    margin-inline-start: auto;
    color: var(--primary);
    font-size: 0.85rem;
}
.qc-filter-label { font-weight: 600; }
.qc-filter-group {
    display: inline-flex;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;
}
.qc-filter-btn {
    border: 0;
    background: var(--surface);
    padding: 0.35rem 0.75rem;
    cursor: pointer;
    font-size: 0.85rem;
    border-inline-end: 1px solid var(--border);
}
.qc-filter-btn:last-child { border-inline-end: 0; }
.qc-filter-btn.active {
    background: var(--primary);
    color: #fff;
}

.qc-table th, .qc-table td {
    vertical-align: middle;
}
.qc-req-dot {
    color: var(--danger, #dc2626);
    margin-inline-start: 0.25rem;
    font-size: 0.7em;
}

/* Pass / Fail segmented control — large tap targets for mobile */
.qc-pf {
    display: inline-flex;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;
    min-height: 44px;
}
.qc-pf-btn {
    border: 0;
    background: var(--surface);
    cursor: pointer;
    font-size: 1.25rem;
    font-weight: 700;
    padding: 0 1.1rem;
    color: #475569;
    transition: background 120ms, color 120ms;
    border-inline-end: 1px solid var(--border);
    min-width: 3.5rem;
}
.qc-pf-btn:last-child { border-inline-end: 0; }
.qc-pf-pass.active { background: #16a34a; color: #fff; }
.qc-pf-fail.active { background: #dc2626; color: #fff; }
.qc-pf-btn:hover:not(.active) { background: #f1f5f9; }

.qc-more-btn {
    position: relative;
    min-width: 3rem;
}
.qc-more-indicator {
    position: absolute;
    top: 2px;
    inset-inline-end: 4px;
    color: var(--primary);
    font-size: 0.7em;
    line-height: 1;
}

/* Modal */
.qc-modal[hidden] { display: none !important; }
.qc-modal {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
}
.qc-modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(15, 23, 42, 0.5);
}
.qc-modal-panel {
    position: relative;
    background: var(--surface);
    border-radius: var(--radius);
    box-shadow: 0 10px 25px rgba(0,0,0,0.2);
    width: 100%;
    max-width: 32rem;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
.qc-modal-header,
.qc-modal-footer {
    padding: 0.75rem 1rem;
    border-bottom: 1px solid var(--border);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
}
.qc-modal-footer {
    border-bottom: 0;
    border-top: 1px solid var(--border);
    justify-content: flex-end;
}
.qc-modal-body {
    padding: 1rem;
    overflow-y: auto;
}

/* Inheritance chip — shown on a row whose values were carried over
   from a past session via the "Use as starting point" button. */
.qc-inherited-chip {
    display: inline-block;
    margin-inline-start: 0.5rem;
    padding: 0.05rem 0.4rem;
    font-size: 0.7rem;
    font-weight: 600;
    color: #b45309;
    background: #fef3c7;
    border: 1px solid #fde68a;
    border-radius: 999px;
    vertical-align: middle;
    cursor: help;
}
.qc-inherited-chip[hidden] { display: none; }
.qc-row[data-inherited-from]:not([data-inherited-from=""]) td {
    background: #fffbeb;
}

/* Read-only fields inside the More modal on completed sessions */
.qc-readonly-field {
    padding: 0.4rem 0.6rem;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    min-height: 1.5rem;
    word-break: break-word;
}
.qc-readonly-notes { white-space: pre-wrap; }

/* Read-only inspect mode — visually dim the table and block interaction */
body.qc-inspect-mode .qc-table { opacity: 0.85; }
body.qc-inspect-mode .qc-pf-btn,
body.qc-inspect-mode .qc-more-btn {
    pointer-events: none;
    filter: grayscale(0.3);
}
body.qc-inspect-mode .qc-filter-group { opacity: 0.6; }

/* Phone: stack the checkpoint name onto its own line so Pass/Fail keeps room */
@media (max-width: 600px) {
    .qc-table th, .qc-table td { padding: 0.5rem 0.4rem; font-size: 0.95rem; }
    .qc-pf-btn { padding: 0 0.8rem; min-width: 2.75rem; }
    .qc-more-btn { padding: 0.4rem 0.6rem; }
    .qc-history-bar select { min-width: 100%; }
}

/* Section headings */
.container h2 {
    border-bottom: 1px solid var(--border);
    padding-bottom: 0.5rem;
    margin-bottom: 1rem;
}

/* Forms */
.form {
    max-width: 600px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 1.5rem;
    box-shadow: 0 1px 3px rgba(0,0,0,0.06);
}
/* When .form lives inside the modern planning-pane shell (e.g.
   /inventory/create), the pane already provides the card chrome and the
   parent container is full-width — drop the legacy 600px cap and inline
   chrome so the form fills the pane instead of leaving empty whitespace
   on the right. */
.planning-pane > .form,
.planning-pane > form.form {
    max-width: none;
    background: transparent;
    border: 0;
    border-radius: 0;
    padding: 0;
    box-shadow: none;
}
.form-group { margin-bottom: 1rem; }
.form-group.checkbox-inline { display: flex; align-items: center; gap: 0.5rem; }
.form-group.checkbox-inline label { display: inline; margin-bottom: 0; }
.form-group.checkbox-inline input[type="checkbox"] { width: auto; margin: 0; }
/* Inline checkbox label — used inside .form-group when the label wraps the checkbox.
   Overrides the default block / bold / 100%-width rules below. */
.form-group .checkbox-label {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.95rem;
    font-weight: 500;
    color: var(--text);
    cursor: pointer;
    margin-bottom: 0;
}
.form-group .checkbox-label input[type="checkbox"] {
    width: auto;
    height: 1rem;
    margin: 0;
    flex: 0 0 auto;
}
.form-group label {
    display: block;
    margin-bottom: 0.25rem;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text-muted);
}
.form-group input, .form-group select, .form-group textarea {
    width: 100%;
    padding: 0.5rem 0.75rem;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    font-size: 0.9rem;
    background: var(--surface);
}
.form-group input:focus, .form-group select:focus, .form-group textarea:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(37,99,235,0.1);
}
/* Standalone styled text input — same look as .form-group input, for inputs
   that live outside a .form-group (e.g. the inline customer pickers). */
.text-input {
    padding: 0.5rem 0.75rem;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    font-size: 0.9rem;
    background: var(--surface);
    unicode-bidi: plaintext;
}
.text-input:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(37,99,235,0.1);
}
/* Inline action form — a handful of controls and a button sitting on one
   line, as used by the per-row actions on the returns case page. Controls
   outside a .form-group get no styling at all otherwise, which is what made
   bare <select>s look unfinished. Everything shares a 36px baseline so the
   labelled fields and the button line up instead of stepping. */
.inline-form {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
    align-items: flex-end;
}
.inline-form .field {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    min-width: 8.5rem;
}
.inline-form .field label {
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--text-muted);
    white-space: nowrap;
}
.inline-form input,
.inline-form select,
.inline-form .field > input,
.inline-form .field > select {
    height: 36px;
    padding: 0 0.6rem;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    font-size: 0.875rem;
    background: var(--surface);
    color: var(--text);
    width: 100%;
}
.inline-form input:focus, .inline-form select:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(37,99,235,0.1);
}
.inline-form .btn {
    height: 36px;
    padding: 0 0.85rem;
    display: inline-flex;
    align-items: center;
    white-space: nowrap;
}
/* A form used as one item inside a wider inline row (the release picker
   among the dispatch buttons) must not stretch its own children. */
.inline-form.inline-form-tight { gap: 0.4rem; }
/* Forms that exist only to wrap a single button (one per action, because
   each posts somewhere different) must not add their own box. */
.inline-form > form { margin: 0; display: flex; }

/* Why the unit came back — picked once, at intake. Compact options sitting
   side by side; without this the generic `.form-group label { display:block }`
   stretches every choice to the full width of the form. */
/* A grid, not a flex row: every option gets a real column, so a chip can
   never be squeezed narrower than its own text. Text wraps inside the
   border instead of spilling out of it, which is what a flex row did to
   the longer Farsi labels. */
.rma-op-picker {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
    gap: 0.5rem;
}
.form-group .rma-op-picker label.rma-op {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    width: auto;
    margin: 0;
    padding: 0.6rem 0.75rem;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface);
    cursor: pointer;
    font-weight: 400;
    font-size: 0.875rem;
    color: var(--text);
    transition: border-color 0.15s ease, background 0.15s ease;
}
.rma-op-picker label.rma-op:hover { border-color: #94a3b8; }
.rma-op-picker .rma-op input[type="radio"] {
    /* `.form-group input { width: 100% }` also matches this radio and blows
       it up to the full width of the chip, leaving the label text nothing
       to occupy. It needs its intrinsic size. */
    width: auto;
    margin: 0;
    flex: none;
    /* Nudged onto the title's line rather than the top of the box. */
    margin-block-start: 0.15rem;
}
.rma-op-picker .rma-op-body {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    min-width: 0;          /* lets long text wrap instead of overflowing */
}
.rma-op-picker .rma-op-title { font-weight: 600; line-height: 1.3; }
.rma-op-picker .rma-op-desc {
    font-size: 0.75rem;
    color: var(--text-muted);
    line-height: 1.35;
}
/* Selection is marked with a class set by the page's script, not with
   `:has(input:checked)`. The `:has` version highlighted whichever chip
   carried the `checked` attribute in the markup and never re-evaluated when
   the selection moved, so the highlight and the actual choice disagreed.
   One rule on top of the neutral base — nothing to fight over. */
.rma-op-picker label.rma-op.is-selected {
    border-color: var(--primary);
    background: rgba(37, 99, 235, 0.06);
}
@media (max-width: 560px) {
    .rma-op-picker { grid-template-columns: 1fr; }
}

/* Which capabilities an upgrade is asking for. Same compact-chip idea as
   the operation picker, one line each since the labels are short. */
.rma-option-picker {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}
.form-group .rma-option-picker label.rma-option {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    width: auto;
    margin: 0;
    padding: 0.45rem 0.75rem;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface);
    cursor: pointer;
    font-weight: 500;
    font-size: 0.875rem;
    color: var(--text);
}
.rma-option-picker label.rma-option:hover { border-color: #94a3b8; }
/* `.form-group input { width: 100% }` also matches this checkbox and would
   stretch it across the chip, leaving the label no room. */
.rma-option-picker .rma-option input[type="checkbox"] { width: auto; margin: 0; flex: none; }

/* Leaving quarantine: every button here moves real stock, so the group is
   set off from the plain status buttons above it. */
.rma-dispatch {
    border-top: 1px solid var(--border);
    padding-top: 0.9rem;
    margin-top: 0.75rem;
}
.rma-dispatch h3 { margin: 0; font-size: 0.95rem; }
.rma-dispatch-hint { margin: 0.2rem 0 0.75rem; font-size: 0.78rem; }
@media (max-width: 480px) {
    .inline-form .field { min-width: 100%; }
    .inline-form .btn { width: 100%; justify-content: center; }
}

.form-row { display: flex; gap: 1rem; flex-wrap: wrap; }
.form-row .form-group { flex: 1; min-width: 200px; }

.radio-card-group { display: flex; gap: 0.75rem; flex-wrap: wrap; }
.radio-card {
    flex: 1;
    min-width: 220px;
    display: flex;
    gap: 0.6rem;
    align-items: flex-start;
    padding: 0.75rem 0.9rem;
    border: 1.5px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface);
    cursor: pointer;
    transition: border-color 0.15s, background 0.15s;
    margin-bottom: 0;
}
.radio-card:hover { border-color: var(--primary); }
.radio-card input[type="radio"] { width: auto; margin: 0.2rem 0 0 0; flex-shrink: 0; }
.radio-card:has(input[type="radio"]:checked) {
    border-color: var(--primary);
    background: rgba(37,99,235,0.04);
    box-shadow: 0 0 0 3px rgba(37,99,235,0.08);
}
.radio-card-body { display: flex; flex-direction: column; gap: 0.2rem; }
.radio-card-title { font-weight: 600; color: var(--text); font-size: 0.9rem; }
.radio-card-desc { font-size: 0.8rem; color: var(--text-muted); line-height: 1.4; }
.form-actions { display: flex; gap: 0.5rem; margin-top: 1.5rem; }
.filter-bar {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    align-items: center;
    margin-bottom: 1rem;
    background: var(--surface);
    padding: 0.75rem;
    border: 1px solid var(--border);
    border-radius: var(--radius);
}
.filter-bar select, .filter-bar input[type="text"] {
    padding: 0.5rem; border: 1px solid var(--border);
    border-radius: var(--radius); font-size: 0.85rem;
    max-width: 100%;
}
.filter-bar select { max-width: 240px; }
.filter-bar input[type="text"] { min-width: 180px; }

/* Detail */
.detail-grid {
    margin-bottom: 1.5rem;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 1rem 1.25rem;
    box-shadow: 0 1px 3px rgba(0,0,0,0.06);
}
.detail-row:last-child { border-bottom: none; }
.detail-row {
    display: flex;
    padding: 0.5rem 0;
    border-bottom: 1px solid var(--border);
}
.detail-label {
    width: 150px;
    font-weight: 600;
    color: var(--text-muted);
    font-size: 0.85rem;
}

/* Login */
.login-page {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    background: linear-gradient(135deg, #1e293b 0%, #0f172a 50%, #1e3a5f 100%);
    padding: 1rem;
}
.login-container {
    max-width: 400px;
    width: 100%;
    text-align: center;
    background: var(--surface);
    border-radius: 12px;
    box-shadow: 0 20px 60px rgba(0,0,0,0.3);
    padding: 2.5rem 2rem 2rem;
}
.login-logo {
    width: 64px;
    height: 64px;
    background: linear-gradient(135deg, var(--primary), #3b82f6);
    border-radius: 16px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1.25rem;
    color: white;
}
.login-container h1 {
    font-size: 1.35rem;
    font-weight: 700;
    color: var(--text);
    margin-bottom: 0.25rem;
}
.login-subtitle {
    font-size: 0.85rem;
    color: var(--text-muted);
    margin-bottom: 1.75rem;
}
.login-form { text-align: start; }
.login-form .form-group { margin-bottom: 1.25rem; }
.login-form label {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.03em;
    margin-bottom: 0.35rem;
    display: block;
}
.login-form input[type="text"],
.login-form input[type="password"] {
    width: 100%;
    padding: 0.7rem 0.85rem;
    border: 1.5px solid var(--border);
    border-radius: 8px;
    font-size: 0.95rem;
    transition: border-color 0.15s, box-shadow 0.15s;
    background: var(--bg);
}
.login-form input[type="text"]:focus,
.login-form input[type="password"]:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
}
.login-form .btn-primary {
    width: 100%;
    padding: 0.7rem;
    font-size: 0.95rem;
    border-radius: 8px;
    font-weight: 600;
}

/* Help section */
.help-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1.25rem;
}
.help-category {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 1rem 1.25rem;
}
.help-category h2 {
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin: 0 0 0.6rem 0;
}
.help-topic-list {
    list-style: none;
    padding: 0;
    margin: 0;
}
.help-topic-list li {
    margin: 0.4rem 0;
}
.help-topic-list a {
    color: var(--primary);
    text-decoration: none;
    font-weight: 500;
}
.help-topic-list a:hover { text-decoration: underline; }
.help-article {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 1.5rem 2rem;
    line-height: 1.7;
    max-width: 880px;
}
.help-article h1 { font-size: 1.6rem; margin-top: 0; }
.help-article h2 { font-size: 1.2rem; margin-top: 1.6rem; padding-bottom: 0.3rem; border-bottom: 1px solid var(--border); }
.help-article h3 { font-size: 1rem; margin-top: 1.2rem; }
.help-article ul, .help-article ol { padding-inline-start: 1.4rem; }
.help-article li { margin: 0.3rem 0; }
.help-article code { background: rgba(0,0,0,0.05); padding: 0.1rem 0.35rem; border-radius: 4px; font-size: 0.88em; }
.help-article pre { background: rgba(0,0,0,0.04); border: 1px solid var(--border); padding: 0.8rem 1rem; border-radius: var(--radius); overflow-x: auto; }
.help-article pre code { background: none; padding: 0; }
.help-article blockquote { border-inline-start: 3px solid var(--primary); padding: 0.4rem 1rem; color: var(--text-muted); margin-inline-start: 0; }
.help-article table { border-collapse: collapse; margin: 0.8rem 0; }
.help-article th, .help-article td { border: 1px solid var(--border); padding: 0.4rem 0.7rem; text-align: start; }
.help-related {
    margin-top: 2rem;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 0.8rem 1.25rem;
    max-width: 880px;
}
.help-related h3 { margin: 0 0 0.5rem 0; font-size: 0.9rem; color: var(--text-muted); }
.help-related ul { margin: 0; padding-inline-start: 1.2rem; }
.serial-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.2rem;
}
.serial-rename-btn {
    background: transparent;
    border: 1px solid var(--border);
    color: var(--text-muted);
    border-radius: 4px;
    padding: 0 0.3rem;
    font-size: 0.75rem;
    cursor: pointer;
    line-height: 1.4;
}
.serial-rename-btn:hover {
    background: var(--primary);
    color: white;
    border-color: var(--primary);
}

.help-link-icon {
    display: inline-block;
    width: 1.1rem;
    height: 1.1rem;
    line-height: 1.1rem;
    text-align: center;
    border-radius: 50%;
    background: var(--primary);
    color: white;
    font-size: 0.75rem;
    text-decoration: none !important;
    font-weight: bold;
    margin-inline-start: 0.3rem;
    vertical-align: middle;
}
.help-link-icon:hover { background: var(--primary-hover); }
.nav-help-link {
    color: rgba(255,255,255,0.85);
    display: inline-flex;
    align-items: center;
    padding: 0.4rem 0.6rem;
    border-radius: var(--radius);
    text-decoration: none;
    transition: background 0.15s;
}
.nav-help-link:hover, .nav-help-link.active { background: rgba(255,255,255,0.12); color: white; }

/* Planning results */
.result-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 1.5rem;
    margin: 1.5rem 0;
}
.result-big { font-size: 1.5rem; margin: 0.5rem 0; }
.result-bottleneck { color: var(--danger); margin-top: 0.5rem; }
.bottleneck-row { background: #fef3c7 !important; }
.shortage-row { background: #fee2e2 !important; }
.highlight-leaf { background: #dcfce7 !important; }
.text-danger { color: var(--danger); font-weight: 600; }
.text-success { color: var(--success); }
.text-muted { color: var(--text-muted); }
.inactive { opacity: 0.5; }

/* Planning nav */
.planning-nav {
    display: flex;
    gap: 1rem;
    margin-bottom: 1.5rem;
    padding: 0.5rem 0;
    border-bottom: 1px solid var(--border);
    font-size: 0.9rem;
}
.planning-nav a {
    color: var(--primary);
    text-decoration: none;
}
.planning-nav a:hover { text-decoration: underline; }
.planning-nav strong { color: var(--text); }

/* Add line */
.add-line-section {
    background: var(--bg);
    border: 1px dashed var(--border);
    border-radius: var(--radius);
    padding: 1rem;
    margin-top: 1rem;
}

/* Assembly component cards */
.assembly-component-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 1rem;
    margin-bottom: 0.75rem;
}
.assembly-component-card.satisfied { border-inline-start: 3px solid var(--success); }
.assembly-component-card.unsatisfied { border-inline-start: 3px solid var(--danger); }

/* Composition tree */
.composition-tree { margin-bottom: 1.5rem; }
.tree-node { margin-bottom: 0.25rem; }

/* Chip UI for serial entry */
.chip-container {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    padding: 0.5rem;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface);
    min-height: 42px;
    align-items: center;
    cursor: text;
}
.chip-container:focus-within {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(37,99,235,0.1);
}
.chip {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.2rem 0.5rem;
    background: #e0e7ff;
    color: #3730a3;
    border-radius: 3px;
    font-size: 0.8rem;
    font-weight: 600;
    font-family: monospace;
}
.chip-remove {
    cursor: pointer;
    font-size: 1rem;
    line-height: 1;
    color: #6366f1;
    margin-inline-start: 0.15rem;
}
.chip-remove:hover { color: var(--danger); }
.chip-input {
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
    padding: 0.2rem !important;
    font-size: 0.9rem;
    flex: 1;
    min-width: 120px;
    background: transparent !important;
}
.chip-counter {
    font-size: 0.8rem;
    color: var(--text-muted);
    padding: 0.25rem 0;
}

/* Range helper */
.range-helper {
    display: flex;
    gap: 0.5rem;
    align-items: end;
    margin-bottom: 0.5rem;
}
.range-helper .form-group { margin-bottom: 0; flex: 1; }
.range-helper .btn { align-self: end; margin-bottom: 0; }

/* Scanner mode */
.scanner-toggle {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
    font-size: 0.85rem;
    color: var(--text-muted);
}
.scanner-toggle input { width: auto; }
.scanner-input {
    width: 100%;
    padding: 0.75rem !important;
    font-size: 1.2rem !important;
    font-family: monospace;
    border: 2px solid var(--success) !important;
    border-radius: var(--radius);
    background: #f0fdf4 !important;
}
.scanner-input:focus {
    box-shadow: 0 0 0 3px rgba(22,163,74,0.15) !important;
    border-color: var(--success) !important;
}

/* Searchable serial select (outbound/transfer) */
.serial-select-container {
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface);
    overflow: hidden;
}
.serial-select-toolbar {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.5rem;
    border-bottom: 1px solid var(--border);
    background: var(--bg);
}
.serial-search-input {
    flex: 1;
    padding: 0.35rem 0.5rem;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    font-size: 0.85rem;
}
.serial-search-input:focus {
    outline: none;
    border-color: var(--primary);
}
.serial-select-list {
    max-height: 220px;
    overflow-y: auto;
    padding: 0;
    margin: 0;
    list-style: none;
}
.serial-select-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.4rem 0.75rem;
    cursor: pointer;
    font-size: 0.85rem;
    border-bottom: 1px solid #f1f5f9;
}
.serial-select-item:hover { background: #f1f5f9; }
.serial-select-item input { width: auto; flex-shrink: 0; }
.serial-select-item code { font-size: 0.85rem; }
.serial-batch-info {
    font-size: 0.75rem;
    color: var(--text-muted);
    margin-inline-start: auto;
}
.serial-select-count {
    padding: 0.4rem 0.75rem;
    font-size: 0.8rem;
    color: var(--text-muted);
    border-top: 1px solid var(--border);
    background: var(--bg);
}
.toggle-link {
    color: var(--primary);
    cursor: pointer;
    font-size: 0.8rem;
    text-decoration: none;
    white-space: nowrap;
}
.toggle-link:hover { text-decoration: underline; }

/* Backup list */
.backup-list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-top: 0.75rem;
}
.backup-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.75rem 1rem;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--bg);
}
.backup-latest {
    border-color: #93c5fd;
    background: #eff6ff;
}
.backup-info {
    flex: 1;
    min-width: 0;
}
.backup-name {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.15rem;
}
.backup-name code {
    font-size: 0.85rem;
    color: var(--text);
}
.backup-meta {
    font-size: 0.8rem;
    color: var(--text-muted);
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
.backup-meta-sep::before {
    content: "\b7";
}
.backup-actions {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    flex-shrink: 0;
}
.backup-restore-details {
    position: relative;
}
.backup-restore-btn {
    color: var(--warning);
    border-color: var(--warning);
    list-style: none;
    cursor: pointer;
}
.backup-restore-btn:hover {
    background: #fffbeb;
}
.backup-restore-btn::-webkit-details-marker {
    display: none;
}
.backup-restore-panel {
    position: absolute;
    inset-inline-end: 0;
    top: calc(100% + 0.35rem);
    width: 320px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 0.75rem;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
    z-index: 10;
}

/* Nav search bar */
.nav-search {
    display: flex;
    align-items: center;
    flex-shrink: 1;
    min-width: 0;
}
.nav-search input {
    padding: 0.3rem 0.6rem;
    border: 1px solid rgba(255,255,255,0.2);
    border-radius: var(--radius);
    background: rgba(255,255,255,0.1);
    color: white;
    font-size: 0.8rem;
    width: 180px;
    min-width: 100px;
}
.nav-search input::placeholder { color: rgba(255,255,255,0.5); }
.nav-search input:focus {
    outline: none;
    background: rgba(255,255,255,0.15);
    border-color: rgba(255,255,255,0.4);
}

/* Sales order status badges */
.badge-so-draft { background: #f1f5f9; color: #64748b; }
.badge-so-confirmed { background: #dbeafe; color: #1e40af; }
.badge-so-ready { background: #fef3c7; color: #92400e; }
.badge-so-shipped { background: #dcfce7; color: #166534; }
.badge-so-cancelled { background: #fee2e2; color: #991b1b; }

/* Tutorial */
.tutorial-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 1rem;
}
.tutorial-card {
    display: flex;
    gap: 1rem;
    padding: 1rem;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface);
    text-decoration: none;
    color: var(--text);
    transition: box-shadow 0.15s;
}
.tutorial-card:hover { box-shadow: 0 2px 8px rgba(0,0,0,0.1); }
.tutorial-card-number {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--primary);
    color: white;
    font-weight: 700;
    font-size: 1.1rem;
    flex-shrink: 0;
}
.tutorial-card-body h3 { font-size: 0.95rem; margin-bottom: 0.25rem; }
.tutorial-card-body p { font-size: 0.8rem; color: var(--text-muted); margin: 0; }
.tutorial-step {
    border: 1px solid var(--border);
    border-radius: var(--radius);
    margin-bottom: 0.75rem;
    background: var(--surface);
    overflow: hidden;
}
.tutorial-step-header {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
    cursor: pointer;
    font-weight: 600;
    font-size: 0.9rem;
    user-select: none;
}
.tutorial-step-header:hover { background: var(--bg); }
.tutorial-step-toggle { margin-inline-start: auto; font-size: 1.2rem; color: var(--text-muted); }
.tutorial-step.open .tutorial-step-toggle::after { content: ''; }
.tutorial-step.open .tutorial-step-toggle { transform: rotate(45deg); }
.tutorial-step-body {
    display: none;
    padding: 0 1rem 1rem 1rem;
    font-size: 0.85rem;
}
.tutorial-step.open .tutorial-step-body { display: block; }
.tutorial-step-number {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: var(--primary);
    color: white;
    font-size: 0.75rem;
    font-weight: 700;
    flex-shrink: 0;
}
.tutorial-tip {
    background: #dbeafe;
    color: #1e40af;
    padding: 0.6rem 0.85rem;
    border-radius: var(--radius);
    font-size: 0.85rem;
}

/* Language toggle */
.lang-toggle-form { display: inline; }
.lang-toggle-btn {
    background: rgba(255,255,255,0.15);
    color: rgba(255,255,255,0.9);
    border: 1px solid rgba(255,255,255,0.3);
    border-radius: var(--radius);
    padding: 0.15rem 0.5rem;
    font-size: 0.75rem;
    font-weight: 600;
    cursor: pointer;
    line-height: 1.4;
}
.lang-toggle-btn:hover {
    background: rgba(255,255,255,0.25);
    color: white;
}
.login-footer {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.75rem;
    margin-top: 2rem;
    padding-top: 1.25rem;
    border-top: 1px solid var(--border);
}
.login-footer .lang-toggle-btn {
    background: var(--bg);
    color: var(--text);
    border: 1px solid var(--border);
}
.login-footer .lang-toggle-btn:hover {
    background: var(--border);
    color: var(--text);
}

/* Stat cards (dashboard) */
.stat-cards {
    display: grid;
    /* minmax(0, 1fr) so a track's minimum size is 0, not its content's
       min-content — otherwise one long unbroken value (e.g. a large IRR
       amount) forces its column wider and pushes the whole row (and the
       page) into horizontal overflow, most visibly on mobile's repeat(2,..)
       override below. */
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 1rem;
    margin-bottom: 1rem;
}
.stat-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 1.25rem 1rem;
    text-align: center;
    min-width: 0;              /* let long content wrap instead of forcing the card wider */
    overflow-wrap: anywhere;
}
.stat-card-value {
    font-size: 2rem;
    font-weight: 700;
    line-height: 1.2;
}
.stat-card-label {
    font-size: 0.8rem;
    color: var(--text-muted);
    margin-top: 0.25rem;
    text-transform: uppercase;
}
.stat-sub {
    font-size: 0.78rem;
    color: var(--text-muted);
    margin-top: 0.15rem;
    line-height: 1.4;
}
a.stat-card {
    text-decoration: none;
    color: inherit;
    transition: box-shadow 0.15s, transform 0.15s;
}
a.stat-card:hover {
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
    transform: translateY(-2px);
}
.stat-card-danger { border-top: 3px solid var(--danger); }
.stat-card-danger .stat-card-value { color: var(--danger); }
.stat-card-warning { border-top: 3px solid var(--warning); }
.stat-card-warning .stat-card-value { color: var(--warning); }
.stat-card-success { border-top: 3px solid var(--success); }
.stat-card-success .stat-card-value { color: var(--success); }
.stat-card-primary { border-top: 3px solid var(--primary); }
.stat-card-primary .stat-value, .stat-card-primary .stat-card-value { color: var(--primary); }
.stat-card-cat-0 { border-top: 3px solid #8b5cf6; }
.stat-card-cat-0 .stat-value, .stat-card-cat-0 .stat-card-value { color: #8b5cf6; }
.stat-card-cat-1 { border-top: 3px solid #0891b2; }
.stat-card-cat-1 .stat-value, .stat-card-cat-1 .stat-card-value { color: #0891b2; }
.stat-card-cat-2 { border-top: 3px solid #d97706; }
.stat-card-cat-2 .stat-value, .stat-card-cat-2 .stat-card-value { color: #d97706; }
.stat-card-cat-3 { border-top: 3px solid #16a34a; }
.stat-card-cat-3 .stat-value, .stat-card-cat-3 .stat-card-value { color: #16a34a; }
.stat-card-cat-4 { border-top: 3px solid #dc2626; }
.stat-card-cat-4 .stat-value, .stat-card-cat-4 .stat-card-value { color: #dc2626; }
.stat-card-active { box-shadow: 0 4px 12px rgba(0,0,0,0.12); transform: translateY(-2px); }

/* Responsive utilities */
.table-responsive { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.flex-row { display: flex; gap: 0.5rem; align-items: end; flex-wrap: wrap; }

/* Responsive */
@media (max-width: 768px) {
    .main-nav {
        flex-wrap: wrap;
        height: auto;
        padding: 0.75rem;
        position: relative;
    }
    .nav-brand { font-size: 0.85rem; white-space: nowrap; }

    /* Hamburger button */
    .nav-toggle-label {
        display: flex;
        flex-direction: column;
        justify-content: center;
        gap: 4px;
        cursor: pointer;
        padding: 0.4rem;
        border-radius: var(--radius);
        margin-inline-start: auto;
    }
    .nav-toggle-label:hover { background: rgba(255,255,255,0.15); }
    .nav-toggle-label span {
        display: block;
        width: 20px;
        height: 2px;
        background: white;
        border-radius: 1px;
        transition: transform 0.2s, opacity 0.2s;
    }
    /* Animate to X when open */
    .nav-toggle-input:checked + .nav-toggle-label span:nth-child(1) {
        transform: translateY(6px) rotate(45deg);
    }
    .nav-toggle-input:checked + .nav-toggle-label span:nth-child(2) {
        opacity: 0;
    }
    .nav-toggle-input:checked + .nav-toggle-label span:nth-child(3) {
        transform: translateY(-6px) rotate(-45deg);
    }

    /* Collapsible section */
    .nav-collapsible {
        display: none;
        width: 100%;
        flex-direction: column;
        gap: 0.5rem;
        padding-top: 0.5rem;
    }
    .nav-toggle-input:checked ~ .nav-collapsible {
        display: flex;
    }

    .nav-links {
        flex-direction: column;
        gap: 0;
        width: 100%;
    }
    .nav-links a {
        padding: 0.5rem 0.75rem;
        border-radius: 0;
    }

    /* Dropdowns collapsed by default on mobile — tap to expand */
    .nav-dropdown { display: block; }
    .nav-dropdown-toggle {
        padding: 0.5rem 0.75rem;
        border-radius: 0;
        font-weight: 600;
        cursor: pointer;
    }
    .nav-dropdown:hover .nav-dropdown-menu { display: none; }
    .nav-dropdown[open] .nav-dropdown-menu {
        display: block;
        position: static;
        box-shadow: none;
        padding: 0;
        min-width: 0;
        background: transparent;
    }
    .nav-dropdown-menu a {
        padding-inline-start: 1.5rem;
    }

    .nav-account.nav-user-mobile { display: inline-block; }
    .nav-account.nav-user-mobile .nav-account-menu {
        inset-inline-end: auto;
        inset-inline-start: 0;
    }
    .nav-user-desktop { display: none; }

    .nav-right {
        width: 100%;
        margin-inline-start: 0;
    }
    .nav-search {
        width: 100%;
    }
    .nav-search input {
        width: 100%;
    }

    .form-row { flex-direction: column; }
    .page-header { flex-direction: column; gap: 0.5rem; align-items: start; }
    .stat-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .data-table { font-size: 0.8rem; }
    .data-table th, .data-table td { padding: 0.5rem; }

    .filter-bar { flex-wrap: wrap; }
    .filter-bar select, .filter-bar input[type="text"] { flex: 1; min-width: 120px; }
    .page-header > div { display: flex; flex-wrap: wrap; gap: 0.5rem; }
    .flex-row { flex-direction: column; align-items: stretch; }
}

/* CSV upload pages: form pane on the left, column-reference pane on the
   right. Stacks below 1100px so mobile gets one column. */
.upload-grid {
    display: grid;
    grid-template-columns: minmax(0, 380px) minmax(0, 1fr);
    gap: 1rem;
    align-items: start;
}
@media (max-width: 1100px) {
    .upload-grid { grid-template-columns: 1fr; }
}

/* === Form polish (modern create/edit pages) ============================== */

/* Section heading inside a planning-pane: a subtle band that groups
   related fields. Lets a long form feel structured without screaming. */
.form-section {
    margin: 0 0 1rem;
    padding: 0;
}
.form-section + .form-section {
    margin-top: 1.25rem;
    padding-top: 1.25rem;
    border-top: 1px solid var(--border);
}
.form-section-title {
    font-size: 0.78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-muted);
    margin: 0 0 0.75rem;
}

/* Grid for form fields inside a section. Clean two-column on desktop,
   one-column on mobile. Use class="span-2" on a .form-group to make it
   span the full row (e.g. the long Name / Description fields). */
.form-grid {
    display: grid;
    /* auto-fit so wide screens get 3–4 columns instead of stretching 2 fields
       across the whole pane; phones still collapse to 1. */
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 0.85rem 1rem;
}
.form-grid .span-2 { grid-column: 1 / -1; }
.form-grid .form-group { margin-bottom: 0; }

/* Larger, more clickable form controls inside the modern shell. Scoped
   so the rest of the app keeps its compact look. */
.planning-pane .form-grid .form-group label,
.planning-pane .form-section .form-group label {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text);
    text-transform: none;
    letter-spacing: 0;
    margin-bottom: 0.35rem;
}
.planning-pane .form-grid .form-group input,
.planning-pane .form-grid .form-group select,
.planning-pane .form-grid .form-group textarea,
.planning-pane > form > .form-row .form-group input,
.planning-pane > form > .form-row .form-group select,
.planning-pane > form > .form-row .form-group textarea,
.planning-pane > form > .form-group input,
.planning-pane > form > .form-group select,
.planning-pane > form > .form-group textarea,
.planning-pane > form > .form-section .form-row .form-group input,
.planning-pane > form > .form-section .form-row .form-group select,
.planning-pane > form > .form-section .form-row .form-group textarea,
.planning-pane > form > .form-section > .form-group input,
.planning-pane > form > .form-section > .form-group select,
.planning-pane > form > .form-section > .form-group textarea {
    height: 40px;
    padding: 0.55rem 0.75rem;
    font-size: 0.92rem;
    background: #fff;
}
.planning-pane .form-grid .form-group textarea,
.planning-pane > form > .form-row .form-group textarea,
.planning-pane > form > .form-group textarea,
.planning-pane > form > .form-section textarea {
    height: auto;
    min-height: 72px;
}
.planning-pane > form input:disabled,
.planning-pane > form select:disabled,
.planning-pane > form textarea:disabled,
.planning-pane .form-grid .form-group input:disabled {
    background: #f3f4f6;
    color: #6b7280;
    cursor: not-allowed;
}
.planning-pane > form .form-row .form-group label,
.planning-pane > form > .form-group label {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text);
    text-transform: none;
    letter-spacing: 0;
    margin-bottom: 0.35rem;
}
.planning-pane > form > h2,
.planning-pane > form > .add-line-section > h3 {
    margin: 1.25rem 0 0.75rem;
    padding-top: 1.25rem;
    border-top: 1px solid var(--border);
    font-size: 0.78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-muted);
}
.planning-pane > form > h2:first-of-type {
    /* No top divider on the very first section heading */
    border-top: 0;
    padding-top: 0;
    margin-top: 1rem;
}
.planning-pane .form-grid .form-group .form-hint,
.planning-pane .form-section .form-group .form-hint {
    display: block;
    margin-top: 0.3rem;
    font-size: 0.75rem;
    color: var(--text-muted);
}

/* Toggle field (checkbox + label as a clickable card row) */
.form-toggle {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.7rem 0.85rem;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface);
    cursor: pointer;
    user-select: none;
}
.form-toggle:hover { border-color: var(--primary); }
.form-toggle input[type="checkbox"] {
    width: 18px;
    height: 18px;
    margin: 0;
    accent-color: var(--primary);
}
.form-toggle .form-toggle-text { font-size: 0.92rem; font-weight: 500; }
.form-toggle .form-toggle-hint {
    display: block;
    font-size: 0.75rem;
    color: var(--text-muted);
    font-weight: 400;
    margin-top: 0.15rem;
}

/* Sticky form-actions bar at the bottom of long forms (e.g. inventory
   create with many lines). Stays in view as the form scrolls. */
.form-sticky-actions {
    position: sticky;
    bottom: 0;
    z-index: 5;
    margin: 1rem -1rem -1rem;
    padding: 0.85rem 1rem;
    background: var(--surface);
    border-top: 1px solid var(--border);
    border-bottom-left-radius: var(--radius);
    border-bottom-right-radius: var(--radius);
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
    align-items: center;
    box-shadow: 0 -2px 6px rgba(0, 0, 0, 0.04);
}

/* Two-column item create/edit form (legacy; superseded by .form-grid
   for new pages but kept for any older callers). */
.item-form-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 0.75rem 1rem;
}

/* Per-Product card grid on /sales/ (one tile per Product item). Smaller
   minmax than the standard kpi-banner so many cards pack neatly. */
.kpi-banner.product-cards {
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
}
.kpi-tile.product-card .kpi-label {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.8rem;
    text-transform: none;
    letter-spacing: 0;
    color: var(--text);
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.kpi-tile.product-card .kpi-value {
    font-size: 1.5rem;
}
.kpi-tile.product-card .kpi-sub {
    font-size: 0.78rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Clickable KPI banner (anchor tiles) */
.kpi-banner-clickable .kpi-tile {
    text-decoration: none;
    color: inherit;
    transition: transform 100ms, box-shadow 100ms, border-color 120ms;
    cursor: pointer;
}
.kpi-banner-clickable .kpi-tile:hover {
    border-color: var(--primary);
    box-shadow: 0 2px 8px rgba(37, 99, 235, 0.12);
    transform: translateY(-1px);
}
.kpi-tile.kpi-tile-active {
    border-color: var(--primary);
    background: #eff6ff;
    box-shadow: inset 0 -3px 0 var(--primary), 0 1px 4px rgba(37, 99, 235, 0.1);
}
.kpi-tile.kpi-tile-active .kpi-label { color: #1e40af; }

/* Inline serials panel under a row */
.btn-serials {
    margin-inline-start: 0.5rem;
    padding: 0.18rem 0.5rem;
    font-size: 0.75rem;
    background: #fff;
    border: 1px solid var(--border);
    color: var(--text);
    border-radius: 999px;
    cursor: pointer;
    line-height: 1;
    white-space: nowrap;
}
.btn-serials:hover { border-color: var(--primary); color: var(--primary); }
.serials-row > td { background: var(--surface-alt, #fafafa); padding: 0.6rem 0.85rem; }
.serials-panel {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}
.serials-search {
    padding: 0.4rem 0.65rem;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: #fff;
    font-size: 0.85rem;
    max-width: 320px;
}

/* === Sales (redesign) ==================================================== */
.planning-input-search {
    flex: 1 1 240px;
    min-width: 0;
    padding: 0.5rem 0.65rem;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: #fff;
    font-size: 0.9rem;
    height: 38px;
}
@media (min-width: 992px) {
    .sales-filter-bar { flex-direction: row; flex-wrap: wrap; align-items: stretch; }
    .sales-filter-bar .planning-input-filter { flex: 0 0 200px; }
    .sales-filter-bar .planning-input-search { flex: 1 1 220px; }
    .sales-filter-bar .planning-actions { flex: 0 0 auto; align-self: stretch; border-top: none; padding-top: 0; }
}

.serial-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
}
.serial-chip {
    background: #eff6ff;
    border: 1px solid #bfdbfe;
    color: #1e40af;
    border-radius: 999px;
    padding: 0.15rem 0.5rem;
    font-size: 0.78rem;
    font-family: ui-monospace, SFMono-Regular, monospace;
    white-space: nowrap;
}
.serial-chip small { opacity: 0.65; font-size: 0.72rem; margin-inline-start: 0.2rem; }

.status-pill {
    display: inline-block;
    padding: 0.18rem 0.55rem;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 600;
    border: 1px solid transparent;
}
.status-pill-ok { background: #ecfdf5; color: #065f46; border-color: #a7f3d0; }
.status-pill-bad { background: #fef2f2; color: #991b1b; border-color: #fecaca; }
.status-pill-warn { background: #fff7ed; color: #9a3412; border-color: #fed7aa; }
.status-pill-info { background: #eff6ff; color: #1e40af; border-color: #bfdbfe; }
.status-pill-muted { background: #f3f4f6; color: #4b5563; border-color: #d1d5db; }

@media (max-width: 768px) {
    .hide-on-mobile { display: none !important; }
}

/* Order list status chips */
.so-status-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin: 0.5rem 0 1rem;
}
.so-status-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.35rem 0.7rem;
    border: 1px solid var(--border);
    border-radius: 999px;
    font-size: 0.85rem;
    text-decoration: none;
    color: var(--text);
    background: var(--surface);
    transition: border-color 120ms, background-color 120ms;
}
.so-status-chip:hover { border-color: var(--primary); }
.so-status-chip.active { border-color: var(--primary); background: #eff6ff; color: #1e40af; }
.so-status-chip .chip-count {
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

/* RTL flip for directional glyphs (→, ←, ↶, ↳, …). In LTR pages this
   is a no-op; in RTL the inline glyph is mirrored so "next" arrows point
   in the reading direction (←) without us having to swap characters. */
html[dir="rtl"] .rtl-flip,
[lang="fa"] .rtl-flip {
    display: inline-block;
    transform: scaleX(-1);
}

/* === Shared step wizard chrome (inventory txn + sales order) ============= */
.wiz-steps{display:flex;gap:0.5rem;list-style:none;padding:0;margin:0 0 1rem;flex-wrap:wrap;}
.wiz-steps li{display:flex;align-items:center;gap:0.4rem;padding:0.35rem 0.9rem;border-radius:999px;background:var(--surface);border:1px solid var(--border);color:var(--text-muted);font-size:0.9rem;}
.wiz-steps li.active{background:var(--primary);border-color:var(--primary);color:#fff;font-weight:600;}
.wiz-steps li.done{border-color:var(--primary);color:var(--primary);}
.wiz-steps .wiz-num{display:inline-flex;align-items:center;justify-content:center;width:1.4rem;height:1.4rem;border-radius:50%;background:rgba(0,0,0,0.08);font-size:0.8rem;}
.wiz-steps li.active .wiz-num{background:rgba(255,255,255,0.25);}
.review-summary{display:flex;flex-wrap:wrap;gap:0.5rem 1.5rem;margin-bottom:1rem;padding:0.85rem 1rem;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);}
.review-summary div{font-size:0.9rem;}
.review-summary .rs-label{color:var(--text-muted);font-size:0.78rem;text-transform:uppercase;letter-spacing:0.03em;display:block;}

/* === Order builder (catalog + cart) ====================================== */
.catalog-cart-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
    gap: 1rem;
    align-items: start;
}
@media (max-width: 1100px) {
    .catalog-cart-grid { grid-template-columns: 1fr; }
}

.catalog-pane {
    display: flex;
    flex-direction: column;
    /* Roughly fill viewport beneath the page header so the catalog scrolls
       internally rather than the whole page. */
    max-height: calc(100vh - 180px);
    min-height: 360px;
}
.catalog-filters {
    display: grid;
    grid-template-columns: 200px 1fr auto;
    gap: 0.5rem;
    align-items: center;
    margin-bottom: 0.6rem;
}
@media (max-width: 700px) {
    .catalog-filters {
        grid-template-columns: 1fr;
    }
}
.catalog-toggle {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0 0.4rem;
    font-size: 0.85rem;
    color: var(--text);
    white-space: nowrap;
}
.catalog-list {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    padding-inline-end: 0.35rem;  /* breathing room next to scrollbar */
}
.catalog-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, auto) 56px 38px;
    gap: 0.55rem;
    align-items: center;
    padding: 0.5rem 0.65rem;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface);
    transition: border-color 100ms, box-shadow 100ms;
}
.catalog-row:hover { border-color: var(--primary); }
.catalog-row.catalog-row-in-cart {
    border-color: #10b981;
    background: #ecfdf5;
}
.catalog-row-main { min-width: 0; }
.catalog-row-code {
    font-size: 0.92rem;
    line-height: 1.2;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.catalog-row-name {
    font-size: 0.82rem;
    color: var(--text-muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.catalog-row-cat { min-width: 0; }
.catalog-row-cat .status-pill {
    font-size: 0.7rem;
    padding: 0.1rem 0.4rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 100%;
    display: inline-block;
}
.catalog-row-stock { text-align: center; }
.catalog-row .btn-add {
    width: 38px;
    height: 32px;
    padding: 0;
    font-size: 1.1rem;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.catalog-row.catalog-row-in-cart .btn-add {
    background: #10b981;
    color: #fff;
    border-color: #059669;
}
@media (max-width: 700px) {
    .catalog-row {
        grid-template-columns: minmax(0, 1fr) auto 38px;
        grid-template-areas:
            "main cat add"
            "main stock add";
        row-gap: 0.2rem;
    }
    .catalog-row-main { grid-area: main; }
    .catalog-row-cat { grid-area: cat; align-self: start; }
    .catalog-row-stock { grid-area: stock; text-align: end; align-self: end; }
    .catalog-row .btn-add { grid-area: add; align-self: center; }
}

/* Cart pane: sticky on desktop so the line list stays visible while
   scrolling the catalog. */
.cart-pane {
    position: sticky;
    top: 64px;
    max-height: calc(100vh - 80px);
    overflow-y: auto;
    display: flex;
    flex-direction: column;
}
@media (max-width: 1100px) {
    .cart-pane { position: static; max-height: none; }
}
.cart-section {
    margin: 0.5rem 0 0.75rem;
    padding-top: 0.5rem;
    border-top: 1px dashed var(--border);
}
.cart-section-header {
    margin-bottom: 0.4rem;
    font-size: 0.85rem;
    color: var(--text-muted);
}
.cart-lines {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}
.cart-line {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 80px 32px;
    gap: 0.45rem;
    align-items: center;
    padding: 0.45rem 0.55rem;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface);
}
.cart-line-meta { min-width: 0; }
.cart-line-code {
    font-size: 0.88rem;
    line-height: 1.2;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.cart-line-name {
    font-size: 0.78rem;
    color: var(--text-muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.cart-line-stock {
    font-size: 0.72rem;
    color: var(--text-muted);
    margin-top: 0.1rem;
}
.cart-line-stock.low { color: #b91c1c; font-weight: 600; }
.cart-line-stock.ok { color: #065f46; }
.cart-line-qty {
    width: 100%;
    height: 32px;
    padding: 0.2rem 0.4rem;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    font-size: 0.9rem;
    text-align: center;
    font-variant-numeric: tabular-nums;
    box-sizing: border-box;
}
.cart-line .btn-remove-line {
    width: 32px;
    height: 32px;
    padding: 0;
    font-size: 1rem;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.cart-empty {
    margin: 0;
    padding: 0.85rem;
    border: 1px dashed var(--border);
    border-radius: var(--radius);
    background: var(--surface-alt, #fafafa);
    color: var(--text-muted);
    text-align: center;
    font-size: 0.85rem;
}

/* Order form: 2-col layout (customer + lines) on desktop */
.order-form-grid {
    display: grid;
    grid-template-columns: minmax(0, 380px) minmax(0, 1fr);
    gap: 1rem;
    margin-bottom: 1rem;
}
@media (max-width: 900px) {
    .order-form-grid { grid-template-columns: 1fr; }
}
.order-line-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 90px minmax(110px, max-content) 38px;
    gap: 0.6rem;
    align-items: center;
    padding: 0.55rem 0.6rem;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface);
    margin-bottom: 0.5rem;
    overflow: hidden;
}
.order-line-row > div { min-width: 0; }
.order-line-row input[type="text"],
.order-line-row input[type="number"] {
    width: 100%;
    height: 38px;
    padding: 0.45rem 0.6rem;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    font-size: 0.9rem;
    box-sizing: border-box;
}
.order-line-row .line-qty-cell input {
    text-align: center;
    font-variant-numeric: tabular-nums;
}
.order-line-row .line-stock {
    font-size: 0.8rem;
    color: var(--text-muted);
    white-space: nowrap;
    text-align: center;
    display: inline-block;
    padding: 0.18rem 0.55rem;
    border-radius: 999px;
    background: #f3f4f6;
    border: 1px solid #e5e7eb;
}
.order-line-row .line-stock.low { color: #991b1b; background: #fef2f2; border-color: #fecaca; font-weight: 600; }
.order-line-row .line-stock.ok { color: #065f46; background: #ecfdf5; border-color: #a7f3d0; font-weight: 600; }
.order-line-row .btn-remove-line {
    width: 38px;
    height: 38px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    font-size: 1.1rem;
}
@media (max-width: 768px) {
    .order-line-row {
        grid-template-columns: 1fr 90px 38px;
        grid-template-areas:
            "item item item"
            "stock qty remove";
        row-gap: 0.45rem;
    }
    .order-line-row .line-item-cell { grid-area: item; }
    .order-line-row .line-qty-cell { grid-area: qty; }
    .order-line-row .line-stock-cell { grid-area: stock; align-self: center; }
    .order-line-row .line-remove-cell { grid-area: remove; }
}

/* Order detail hero */
.order-hero {
    background: linear-gradient(135deg, #1e3a8a 0%, #2563eb 100%);
    color: #fff;
    border-radius: var(--radius);
    padding: 1.25rem 1.5rem;
    margin-bottom: 1rem;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}
.order-hero h1 { color: #fff; margin: 0 0 0.2rem; font-size: 1.6rem; }
.order-hero .order-hero-customer {
    color: rgba(255,255,255,0.9);
    font-size: 0.95rem;
    margin: 0;
}
.order-hero .order-hero-status {
    background: rgba(255,255,255,0.15);
    border: 1px solid rgba(255,255,255,0.3);
    color: #fff;
    padding: 0.5rem 1rem;
    border-radius: 999px;
    font-weight: 700;
    font-size: 0.95rem;
    letter-spacing: 0.05em;
}
.order-hero-actions { display: flex; gap: 0.5rem; flex-wrap: wrap; }
.order-hero-actions .btn { background: rgba(255,255,255,0.15); color: #fff; border-color: rgba(255,255,255,0.3); }
.order-hero-actions .btn:hover { background: rgba(255,255,255,0.25); border-color: rgba(255,255,255,0.5); }

/* Status timeline (DRAFT > CONFIRMED > READY > SHIPPED) */
.so-timeline {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0.4rem;
    margin: 0 0 1rem;
}
.so-timeline-step {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 0.5rem 0.75rem;
    text-align: center;
    font-size: 0.85rem;
    color: var(--text-muted);
    position: relative;
}
.so-timeline-step .step-num {
    display: block;
    font-size: 0.7rem;
    font-weight: 700;
    color: var(--text-muted);
    margin-bottom: 0.15rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
.so-timeline-step.done {
    background: #ecfdf5;
    border-color: #a7f3d0;
    color: #065f46;
}
.so-timeline-step.done .step-num { color: #065f46; }
.so-timeline-step.active {
    background: #eff6ff;
    border-color: #2563eb;
    color: #1e40af;
    box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.15);
    font-weight: 600;
}
.so-timeline-step.active .step-num { color: #2563eb; }
.so-timeline-step.cancelled {
    background: #fef2f2;
    border-color: #fecaca;
    color: #991b1b;
    grid-column: 1 / -1;
}
@media (max-width: 600px) {
    .so-timeline { grid-template-columns: repeat(2, 1fr); }
}

/* Operator queue */
.queue-pane { margin-bottom: 1rem; }
.queue-empty {
    margin: 0;
    padding: 0.75rem 1rem;
    background: #ecfdf5;
    border: 1px dashed #a7f3d0;
    border-radius: var(--radius);
    color: #065f46;
    font-size: 0.9rem;
}

/* Kit-serial block on Mark Ready */
.kit-serial-block {
    margin: 0.5rem 0 0.75rem;
    padding: 0.6rem 0.75rem;
    border: 1px solid var(--border);
    border-inline-start: 3px solid #8b5cf6;
    border-radius: var(--radius);
    background: #faf5ff;
}
.kit-serial-block-title {
    font-size: 0.85rem;
    font-weight: 600;
    color: #5b21b6;
    margin-bottom: 0.5rem;
}

/* Kit-child indented row in line items table */
.kit-child-row {
    background: var(--surface-alt, #fafafa);
    color: var(--text-muted);
}
.kit-child-row code { font-size: 0.85rem; }

/* Order detail: action bar */
.so-actions-bar {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 0.85rem 1rem;
    margin-top: 1rem;
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    align-items: center;
}
.so-actions-bar form { margin: 0; }

@media (max-width: 480px) {
    .container { padding: 0.75rem; }
    .btn { font-size: 0.8rem; padding: 0.4rem 0.75rem; }
    .form-group input, .form-group select { font-size: 16px; }
    .detail-row { flex-direction: column; }
    .detail-label { width: 100%; margin-bottom: 0.25rem; }
}
/* ===== User permissions editor (segmented control) ===== */
.perm-card {
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface);
    padding: 1.1rem 1.3rem;
    max-width: 720px;
    box-shadow: var(--shadow-sm, 0 1px 2px rgba(0,0,0,0.05));
}
.perm-intro { color: var(--text-muted); margin: 0 0 1rem; font-size: 0.9rem; }
.perm-cat {
    font-size: 0.72rem; font-weight: 700; text-transform: uppercase;
    letter-spacing: 0.05em; color: var(--text-muted);
    margin: 1.2rem 0 0.5rem; padding-bottom: 0.25rem;
    border-bottom: 1px solid var(--border);
}
.perm-cat:first-of-type { margin-top: 0; }
.perm-row {
    display: flex; align-items: center; justify-content: space-between;
    gap: 1rem; padding: 0.6rem 0; flex-wrap: wrap;
}
.perm-label { font-weight: 600; display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }
.perm-status {
    font-size: 0.68rem; font-weight: 700; letter-spacing: 0.03em;
    padding: 0.12rem 0.55rem; border-radius: 999px; text-transform: uppercase;
}
.perm-status.on  { background: #dcfce7; color: #166534; }
.perm-status.off { background: #f1f5f9; color: #64748b; }
/* segmented 3-way control: Default / Allow / Deny */
.perm-seg { display: inline-flex; border: 1px solid var(--border); border-radius: 8px; overflow: hidden; flex-shrink: 0; }
.perm-seg input { position: absolute; opacity: 0; width: 0; height: 0; pointer-events: none; }
.perm-seg label {
    padding: 0.38rem 0.95rem; font-size: 0.85rem; font-weight: 600;
    cursor: pointer; background: var(--surface); color: var(--text-muted);
    border-inline-start: 1px solid var(--border); user-select: none;
    transition: background 0.12s, color 0.12s; margin: 0;
}
.perm-seg label:first-of-type { border-inline-start: none; }
.perm-seg input:not(:checked) + label:hover { background: #f1f5f9; color: var(--text); }
.perm-seg input:checked + label { color: #fff; }
.perm-seg input[value="default"]:checked + label { background: #64748b; }
.perm-seg input[value="allow"]:checked + label   { background: #16a34a; }
.perm-seg input[value="deny"]:checked + label     { background: #dc2626; }
.perm-seg input:focus-visible + label { outline: 2px solid var(--primary); outline-offset: 1px; }
.perm-actions { margin-top: 1.1rem; padding-top: 0.9rem; border-top: 1px solid var(--border); }
@media (max-width: 560px) {
    .perm-row { justify-content: flex-start; }
    .perm-seg { width: 100%; }
    .perm-seg label { flex: 1; text-align: center; }
}

/* ===== Sales final-delivery inspection (OK / Not OK control) ===== */
.insp-seg { display: inline-flex; border: 1px solid var(--border); border-radius: 7px; overflow: hidden; }
.insp-seg input { position: absolute; opacity: 0; width: 0; height: 0; pointer-events: none; }
.insp-seg label {
    padding: 0.3rem 0.8rem; font-size: 0.82rem; font-weight: 600; cursor: pointer;
    background: var(--surface); color: var(--text-muted);
    border-inline-start: 1px solid var(--border); user-select: none; margin: 0;
    transition: background 0.12s, color 0.12s;
}
.insp-seg label:first-of-type { border-inline-start: none; }
.insp-seg input:not(:checked) + label:hover { background: #f1f5f9; color: var(--text); }
.insp-seg input[value="ok"]:checked + label { background: #16a34a; color: #fff; }
.insp-seg input[value="no"]:checked + label { background: #dc2626; color: #fff; }