/* ─── SalesSync design system ─────────────────────────────────────────────── */

:root {
    /* Atlantic: ocean teal on deep navy, with an amber spark. Every pair here meets WCAG AA
       (text 4.5:1, bars/icons 3:1); change colours here, not in components. */
    --ss-bg: #f4f7f9;
    --ss-surface: #ffffff;
    --ss-fg: #0b2340;
    --ss-muted-fg: #516377;
    --ss-muted: #eef2f5;
    --ss-border: #dce4ea;
    --ss-border-soft: #e8eef2;

    --ss-accent: #0a7a93;            /* buttons, links, selection (white text 5.0:1) */
    --ss-accent-hover: #08667b;
    --ss-accent-soft: #e2f3f7;
    --ss-accent-strong: #075e72;     /* brand text on the soft tint */
    --ss-accent-fg: #ffffff;
    --ss-accent-rgb: 10 122 147;     /* for translucent rings and glows */

    --ss-anchor: #0b2340;            /* top bar, headings, target lines */
    --ss-anchor-fg: #ffffff;
    --ss-anchor-muted: #a9bfd1;      /* top-bar links (8.3:1 on the anchor) */
    --ss-brand-gradient: linear-gradient(135deg, #12aecf, #0b6fa4);   /* logo, top-bar line */
    --ss-hero-gradient: linear-gradient(135deg, #0d7f97, #0b6fa4);    /* headline tile (white text 4.6:1) */
    --ss-spark: #f5a524;             /* sparing bright accent */
    --ss-spark-fg: #2b1d00;

    --ss-ok: #15803d;
    --ss-ok-strong: #136f37;
    --ss-ok-soft: #e8f5ec;
    --ss-warn: #b45309;
    --ss-warn-soft: #fff3e0;
    --ss-danger: #b42318;
    --ss-danger-soft: #fdecea;
    --ss-info: #2a56b8;
    --ss-info-soft: #eaf0fc;
    --ss-destructive: #b42318;

    /* Charts (C# mirror: BrandColors) */
    --ss-chart-sales: #0b93b1;
    --ss-chart-open: #c97e06;
    --ss-chart-last: #c3e6ee;
    --ss-chart-target: #0b2340;

    --ss-radius: 0.875rem;
    --ss-radius-sm: 0.5rem;

    --ss-shadow: 0 1px 2px rgb(11 35 64 / 0.04), 0 1px 3px rgb(11 35 64 / 0.05);
    --ss-shadow-md: 0 2px 4px rgb(11 35 64 / 0.05), 0 6px 16px rgb(11 35 64 / 0.07);
    --ss-shadow-lg: 0 8px 16px rgb(11 35 64 / 0.06), 0 20px 48px rgb(11 35 64 / 0.10);

    /* Side margin of the page: grows with the screen, content always uses the full width. */
    --ss-gutter: clamp(1rem, 2vw, 2.5rem);

    /* Shell: top bar (3.75rem + its 3px line) and the side menu (wide, icons only) */
    --ss-topbar-h: calc(3.75rem + 3px);
    --ss-sidenav-w: 15rem;
    --ss-sidenav-rail: 4.25rem;
    --ss-backdrop: rgb(11 35 64 / 0.45);

    /* Tables and grids: column-group divider, zebra and hover rows (text on them keeps ≥ 4.5:1) */
    --ss-col-divider: #cfd9e1;
    --ss-row-alt: #f8fafb;
    --ss-row-hover: #eef6f8;
    --ss-head-bg: #f6f8fa;
    --ss-font: "Inter", "Segoe UI Variable Text", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;

    /* rep colours (demo reps; others come from UiHelpers.RepColor) */
    --ss-rep-craig: #3e6fd8;
    --ss-rep-moe: #b5487a;
    --ss-rep-eric: #2e8b57;

    /* Syncfusion tailwind3 theme → Atlantic. Every Syncfusion control the app uses reads these
       variables (the theme's few hard-coded indigo rules belong to TreeGrid, Gantt, RTE and
       Spreadsheet, which are not used). Same rgba(r, g, b) format as the theme. */
    --color-sf-primary: rgba(10, 122, 147);
    --color-sf-primary-bg-color: #0a7a93;
    --color-sf-primary-bg-color-hover: #08667b;
    --color-sf-primary-bg-color-focus: #08667b;
    --color-sf-primary-bg-color-pressed: #075565;
    --color-sf-primary-bg-color-disabled: #9bd3df;
    --color-sf-primary-border-color: #0a7a93;
    --color-sf-primary-border-color-hover: #08667b;
    --color-sf-primary-border-color-focus: #08667b;
    --color-sf-primary-border-color-pressed: #075565;
    --color-sf-primary-border-color-disabled: #9bd3df;
    --color-sf-primary-dark: #08667b;
    --color-sf-primary-darker: #075565;
    --color-sf-primary-light: #3fbfda;
    --color-sf-primary-lighter: #e2f3f7;
    --color-sf-primary-outline: #0a7a93;
    --color-sf-chip-primary-bg-color: #e2f3f7;
    --color-sf-chip-primary-bg-color-hover: #e2f3f7;
    --color-sf-chip-primary-bg-color-pressed: #cbeaf1;
    --color-sf-chip-primary-bg-color-disabled: #e2f3f7;
    --color-sf-chip-primary-border-color: #cbeaf1;
    --color-sf-chip-primary-border-color-hover: #a6dce8;
    --color-sf-chip-primary-border-color-pressed: #cbeaf1;
    --color-sf-chip-primary-border-color-disabled: #cbeaf1;
    --color-sf-chip-primary-icon-bg-color-hover: #a6dce8;
    --color-sf-chip-primary-icon-bg-color-pressed: #a6dce8;
    --color-sf-chip-primary-icon-color: rgba(7, 94, 114, .5);
    --color-sf-chip-primary-icon-color-hover: #075e72;
    --color-sf-chip-primary-icon-color-pressed: #075e72;
    --color-sf-chip-primary-text: #075e72;
    --color-sf-chip-primary-text-hover: #075e72;
    --color-sf-chip-primary-text-pressed: #0a7a93;
    --color-sf-chip-primary-text-disabled: #9bd3df;
    --color-sf-appbar-hover-bg-color-alt2: #3fbfda;
    --color-sf-rating-selected-hover-color: #0a7a93;
}

* { box-sizing: border-box; }

html, body {
    margin: 0;
    padding: 0;
    font-family: var(--ss-font);
    background: var(--ss-bg);
    color: var(--ss-fg);
    font-size: 14px;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

h1, h2, h3, h4 { margin: 0; }
a { color: inherit; }

.ss-app { min-height: 100vh; display: flex; flex-direction: column; }
.ss-main { flex: 1; padding: 1.75rem var(--ss-gutter) 2.5rem; width: 100%; min-width: 0; }

/* Blazor focuses the page heading after navigation (screen readers); no ring for that. */
h1[tabindex="-1"]:focus { outline: none; }

.ss-page-loading {
    display: flex; align-items: center; justify-content: center;
    min-height: 40vh; color: var(--ss-muted-fg); font-size: 0.875rem;
}

/* ─── Page header ────────────────────────────────────────────────────────── */

.ss-page-header { display: flex; flex-direction: column; gap: 0.25rem; margin-bottom: 0.25rem; }
.ss-page-title { font-size: 1.25rem; font-weight: 650; letter-spacing: -0.025em; }
.ss-page-subtitle { font-size: 0.8125rem; color: var(--ss-muted-fg); margin: 0; }

/* ─── Top bar ────────────────────────────────────────────────────────────── */
/* Menu button (small screens), brand, notice bell, user menu. The pages are in the side menu (below). */

.ss-topnav {
    position: sticky; top: 0; z-index: 50;
    background: var(--ss-anchor); color: var(--ss-anchor-fg);
    box-shadow: 0 1px 0 rgb(11 35 64 / 0.06), 0 4px 16px rgb(11 35 64 / 0.10);
}
.ss-topnav::before { content: ""; display: block; height: 3px; background: var(--ss-brand-gradient); }

.ss-topnav-inner {
    display: flex; align-items: center; justify-content: space-between;
    padding: 0 var(--ss-gutter); height: 3.75rem; gap: 0.75rem;
}
.ss-topnav-left { display: flex; align-items: center; gap: 0.5rem; min-width: 0; }

.ss-brand {
    display: flex; align-items: center; gap: 0.625rem; min-width: 0;
    font-size: 0.9375rem; font-weight: 650; letter-spacing: -0.02em; white-space: nowrap;
    color: inherit; text-decoration: none; border-radius: 0.5rem;
}
.ss-topnav .ss-brand:focus-visible { outline: 2px solid var(--ss-anchor-fg); outline-offset: 3px; }

.ss-logo-mark {
    display: block; flex-shrink: 0;
    border-radius: 25%;
    box-shadow: 0 2px 10px rgb(18 174 207 / 0.35);
}

/* Light-on-navy inside the top bar (the same classes elsewhere stay as they are). */
.ss-topnav .ss-avatar { background: rgb(255 255 255 / 0.14); color: var(--ss-anchor-fg); }
.ss-topnav .ss-menu-btn, .ss-topnav .ss-btn-ghost { color: var(--ss-anchor-muted); }
.ss-topnav .ss-menu-btn:hover, .ss-topnav .ss-btn-ghost:hover:not(:disabled) { color: var(--ss-anchor-fg); background: rgb(255 255 255 / 0.08); }
.ss-topnav .ss-menu-btn:focus-visible, .ss-topnav .ss-btn-ghost:focus-visible { outline: 2px solid var(--ss-anchor-fg); outline-offset: 1px; }

.ss-topnav-right { display: flex; align-items: center; gap: 0.5rem; flex-shrink: 0; }

.ss-avatar {
    display: inline-flex; align-items: center; justify-content: center;
    width: 2rem; height: 2rem; border-radius: 9999px;
    background: var(--ss-accent-soft); color: var(--ss-accent);
    font-size: 0.6875rem; font-weight: 650; flex-shrink: 0;
}

.ss-menu-btn {
    display: inline-flex; align-items: center; justify-content: center;
    width: 2.25rem; height: 2.25rem; border-radius: 0.5rem; border: 0; background: none;
    color: var(--ss-muted-fg); cursor: pointer;
}
.ss-menu-btn:hover { color: var(--ss-fg); background: var(--ss-muted); }

/* User menu (UserMenu.razor) */
.ss-usermenu { position: relative; }
.ss-usermenu-btn {
    display: inline-flex; align-items: center; gap: 0.5rem; max-width: 16rem;
    padding: 0.25rem 0.375rem 0.25rem 0.25rem; border: 0; border-radius: 9999px;
    background: none; color: var(--ss-anchor-muted); font: inherit; cursor: pointer;
}
.ss-usermenu-btn:hover, .ss-usermenu-btn[aria-expanded="true"] { background: rgb(255 255 255 / 0.08); color: var(--ss-anchor-fg); }
.ss-usermenu-btn:focus-visible { outline: 2px solid var(--ss-anchor-fg); outline-offset: 1px; }
.ss-usermenu-text { display: none; flex-direction: column; align-items: flex-start; min-width: 0; line-height: 1.2; text-align: left; }
.ss-usermenu-name { color: var(--ss-anchor-fg); font-size: 0.8125rem; font-weight: 550; max-width: 11rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ss-usermenu-role { font-size: 0.6875rem; max-width: 11rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ss-usermenu-chevron { flex-shrink: 0; }
.ss-usermenu-backdrop { position: fixed; inset: 0; z-index: 55; background: transparent; }
.ss-usermenu-panel {
    position: absolute; top: calc(100% + 0.5rem); right: 0; z-index: 60;
    width: min(17rem, calc(100vw - 2 * var(--ss-gutter)));
    background: var(--ss-surface); color: var(--ss-fg);
    border: 1px solid var(--ss-border); border-radius: var(--ss-radius-sm); box-shadow: var(--ss-shadow-lg);
    padding: 0.375rem;
}
.ss-usermenu-head { display: flex; flex-direction: column; align-items: flex-start; gap: 0.375rem; padding: 0.5rem 0.625rem 0.625rem; border-bottom: 1px solid var(--ss-border-soft); margin-bottom: 0.25rem; }
.ss-usermenu-head-name { font-size: 0.8125rem; font-weight: 600; overflow-wrap: anywhere; }
.ss-usermenu-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.ss-usermenu-item {
    display: flex; align-items: center; gap: 0.625rem; width: 100%;
    padding: 0.5625rem 0.625rem; border: 0; border-radius: 0.375rem; background: none;
    color: var(--ss-fg); font: inherit; font-size: 0.8125rem; text-decoration: none; text-align: left; cursor: pointer;
}
.ss-usermenu-item:hover { background: var(--ss-muted); }
.ss-usermenu-item:focus-visible { outline: 2px solid var(--ss-accent); outline-offset: -2px; }
.ss-usermenu-item svg { color: var(--ss-muted-fg); flex-shrink: 0; }
.ss-usermenu-sep { height: 1px; margin: 0.25rem 0; background: var(--ss-border-soft); }

@media (min-width: 768px) {
    .ss-usermenu-text { display: flex; }
}

/* Skip link: off-screen until focused (first Tab on a page). */
.ss-skip-link {
    position: fixed; left: 0.75rem; top: -4rem; z-index: 200;
    padding: 0.5rem 0.875rem; border-radius: var(--ss-radius-sm);
    background: var(--ss-accent); color: var(--ss-accent-fg); font-weight: 600; font-size: 0.8125rem; text-decoration: none;
    box-shadow: var(--ss-shadow-md);
}
.ss-skip-link:focus { top: 0.75rem; outline: 2px solid var(--ss-anchor); outline-offset: 2px; }
.ss-main:focus { outline: none; }

/* ─── Side menu (SideNav.razor, NavModel) ────────────────────────────────── */
/* Below 1024 px: an off-canvas drawer (hidden, so its links are not in the Tab order until it opens).
   1024 px and wider: a sticky sidebar beside the page, narrowed to icons by its toggle
   (.is-collapsed from .NET, html[data-ss-nav="collapsed"] from salessync.js before .NET runs). */

/* MainLayout: top bar across, then the menu (column 1, empty while it is a drawer) beside the page. */
.ss-app.ss-shell { display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-rows: auto 1fr; }
.ss-shell > .ss-topnav { grid-column: 1 / -1; grid-row: 1; }
.ss-shell > .ss-sidenav { grid-column: 1; grid-row: 2; }
.ss-shell > .ss-main { grid-column: 2; grid-row: 2; }

.ss-sidenav {
    position: fixed; top: 0; bottom: 0; left: 0; z-index: 70;
    width: min(18rem, 86vw);
    display: flex; flex-direction: column;
    background: var(--ss-surface); border-right: 1px solid var(--ss-border-soft);
    box-shadow: var(--ss-shadow-lg);
    transform: translateX(-100%); visibility: hidden;
    transition: transform 0.2s ease, visibility 0s linear 0.2s;
}
.ss-sidenav.is-open { transform: none; visibility: visible; transition: transform 0.2s ease; }
.ss-sidenav:focus { outline: none; }
.ss-sidenav-backdrop { display: none; }
.ss-sidenav-backdrop.is-open { display: block; position: fixed; inset: 0; z-index: 65; background: var(--ss-backdrop); }
body.ss-drawer-open { overflow: hidden; }

.ss-sidenav-head {
    display: flex; align-items: center; justify-content: space-between; gap: 0.5rem;
    height: calc(3.75rem + 3px); padding: 0 0.75rem 0 1rem; flex-shrink: 0;
    border-bottom: 1px solid var(--ss-border-soft);
}
.ss-sidenav-nav { flex: 1; overflow-y: auto; overscroll-behavior: contain; padding: 0.75rem 0.625rem 1rem; }
.ss-sidenav-area + .ss-sidenav-area { margin-top: 0.75rem; }
.ss-sidenav-area-btn {
    display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; width: 100%;
    padding: 0.375rem 0.625rem; border: 0; border-radius: 0.375rem; background: none; cursor: pointer;
    font: inherit; font-size: 0.6875rem; font-weight: 650; letter-spacing: 0.06em; text-transform: uppercase;
    color: var(--ss-muted-fg);
}
.ss-sidenav-area-btn:hover { color: var(--ss-fg); background: var(--ss-muted); }
.ss-sidenav-chevron { transition: transform 0.15s ease; flex-shrink: 0; }
.ss-sidenav-area.is-closed .ss-sidenav-chevron { transform: rotate(-90deg); }
.ss-sidenav-area.is-closed .ss-sidenav-list { display: none; }

.ss-sidenav-list { list-style: none; margin: 0.125rem 0 0; padding: 0; display: flex; flex-direction: column; gap: 0.0625rem; }
.ss-sidenav-link {
    position: relative; display: flex; align-items: center; gap: 0.75rem; min-height: 2.5rem;
    padding: 0.5rem 0.625rem; border-radius: 0.5rem;
    color: var(--ss-muted-fg); font-size: 0.8125rem; font-weight: 500; text-decoration: none;
    transition: background 0.15s, color 0.15s;
}
.ss-sidenav-link:hover { color: var(--ss-fg); background: var(--ss-muted); }
.ss-sidenav-link.active { color: var(--ss-accent-strong); background: var(--ss-accent-soft); font-weight: 600; }
.ss-sidenav-link.active::before {
    content: ""; position: absolute; left: -0.625rem; top: 0.375rem; bottom: 0.375rem; width: 3px;
    border-radius: 0 3px 3px 0; background: var(--ss-accent);
}
.ss-sidenav-icon { flex-shrink: 0; }
.ss-sidenav-label { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ss-sidenav-link:focus-visible, .ss-sidenav-area-btn:focus-visible, .ss-sidenav-collapse:focus-visible {
    outline: 2px solid var(--ss-accent); outline-offset: -2px;
}

.ss-sidenav-foot { display: none; flex-shrink: 0; padding: 0.5rem 0.625rem; border-top: 1px solid var(--ss-border-soft); }
.ss-sidenav-collapse {
    display: flex; align-items: center; gap: 0.75rem; width: 100%; min-height: 2.25rem;
    padding: 0.375rem 0.625rem; border: 0; border-radius: 0.5rem; background: none; cursor: pointer;
    color: var(--ss-muted-fg); font: inherit; font-size: 0.75rem;
}
.ss-sidenav-collapse:hover { color: var(--ss-fg); background: var(--ss-muted); }

@media (min-width: 1024px) {
    .ss-menu-btn { display: none; }
    .ss-sidenav {
        position: sticky; top: var(--ss-topbar-h); z-index: 40; align-self: flex-start;
        height: calc(100vh - var(--ss-topbar-h)); height: calc(100dvh - var(--ss-topbar-h));
        width: var(--ss-sidenav-w); flex-shrink: 0;
        transform: none; visibility: visible; box-shadow: none; transition: width 0.2s ease;
    }
    .ss-sidenav-backdrop.is-open { display: none; }
    body.ss-drawer-open { overflow: auto; }
    .ss-sidenav-head { display: none; }
    .ss-sidenav-foot { display: block; }

    /* Icons only */
    .ss-sidenav:is(.is-collapsed, :root[data-ss-nav="collapsed"] *) { width: var(--ss-sidenav-rail); }
    .ss-sidenav:is(.is-collapsed, :root[data-ss-nav="collapsed"] *) .ss-sidenav-nav { padding-left: 0.5rem; padding-right: 0.5rem; }
    .ss-sidenav:is(.is-collapsed, :root[data-ss-nav="collapsed"] *) .ss-sidenav-area-btn { display: none; }
    .ss-sidenav:is(.is-collapsed, :root[data-ss-nav="collapsed"] *) .ss-sidenav-area.is-closed .ss-sidenav-list { display: flex; }
    .ss-sidenav:is(.is-collapsed, :root[data-ss-nav="collapsed"] *) .ss-sidenav-area + .ss-sidenav-area {
        margin-top: 0.5rem; padding-top: 0.5rem; border-top: 1px solid var(--ss-border-soft);
    }
    .ss-sidenav:is(.is-collapsed, :root[data-ss-nav="collapsed"] *) .ss-sidenav-link,
    .ss-sidenav:is(.is-collapsed, :root[data-ss-nav="collapsed"] *) .ss-sidenav-collapse { justify-content: center; padding-left: 0; padding-right: 0; gap: 0; }
    .ss-sidenav:is(.is-collapsed, :root[data-ss-nav="collapsed"] *) .ss-sidenav-link.active::before { left: -0.5rem; }
    .ss-sidenav:is(.is-collapsed, :root[data-ss-nav="collapsed"] *) .ss-sidenav-label {
        position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
    }
}

@media (prefers-reduced-motion: reduce) {
    .ss-sidenav, .ss-sidenav.is-open, .ss-sidenav-chevron { transition: none; }
}

/* ─── Cards ──────────────────────────────────────────────────────────────── */

.ss-card {
    background: var(--ss-surface);
    border: 1px solid var(--ss-border-soft);
    border-radius: var(--ss-radius);
    box-shadow: var(--ss-shadow);
    display: flex; flex-direction: column;
    transition: box-shadow 0.2s;
}

.ss-card-header { padding: 1.125rem 1.375rem 0.5rem; display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; }
.ss-card-title { font-size: 0.875rem; font-weight: 600; letter-spacing: -0.01em; }
.ss-card-subtitle { font-size: 0.75rem; color: var(--ss-muted-fg); margin: 0.125rem 0 0; }
.ss-card-content { padding: 0.5rem 1.375rem 1.125rem; flex: 1; }
.ss-card-content.flush { padding: 0.375rem; }

/* ─── Grid helpers ───────────────────────────────────────────────────────── */

.ss-page { display: flex; flex-direction: column; gap: 1.25rem; }

.ss-grid { display: grid; gap: 1rem; grid-template-columns: 1fr; }
/* A cell never widens its column past the page (a long tile label pushed the sales orders tiles out at 800 px). */
.ss-grid > * { min-width: 0; }

@media (min-width: 640px) {
    .ss-grid-sm-2 { grid-template-columns: repeat(2, 1fr); }
    .ss-grid-sm-3 { grid-template-columns: repeat(3, 1fr); }
    /* 2 × 2 on tablets and beside the side menu; 4 in a row from 1280 px (below that a tile was ~180 px wide). */
    .ss-grid-sm-4 { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 1280px) {
    .ss-grid-sm-4 { grid-template-columns: repeat(4, 1fr); }
}

@media (min-width: 1024px) {
    .ss-grid-lg-3 { grid-template-columns: repeat(3, 1fr); }
    /* 4 or 5 a row when they fit beside the side menu, else they wrap (a fixed 4/5 spilled out of the page at ~1150 px). */
    .ss-grid-lg-4 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr)); }
    .ss-grid-lg-6 { grid-template-columns: repeat(6, 1fr); }
    .ss-grid-lg-main-side { grid-template-columns: 2fr 1fr; }
}

@media (min-width: 1280px) {
    .ss-grid-xl-4 { grid-template-columns: repeat(4, 1fr); }
}

/* ─── Stat card ──────────────────────────────────────────────────────────── */

.ss-stat { flex-direction: row; align-items: center; gap: 0.875rem; padding: 1.125rem 1.25rem; }

.ss-stat-icon {
    display: flex; align-items: center; justify-content: center;
    border-radius: 0.625rem; background: var(--ss-muted); color: var(--ss-muted-fg);
    width: 2.5rem; height: 2.5rem; flex-shrink: 0;
}

.ss-stat-icon--brand   { background: var(--ss-accent-soft); color: var(--ss-accent); }
.ss-stat-icon--blue    { background: var(--ss-info-soft); color: var(--ss-info); }
.ss-stat-icon--emerald { background: var(--ss-ok-soft); color: var(--ss-ok); }
.ss-stat-icon--amber   { background: var(--ss-warn-soft); color: var(--ss-warn); }
.ss-stat-icon--red     { background: var(--ss-danger-soft); color: var(--ss-danger); }
.ss-stat-icon--navy    { background: #e7ecf3; color: var(--ss-anchor); }

/* The headline tile (e.g. Sales YTD): the deeper brand gradient with white text. */
.ss-stat.ss-stat-hero { background: var(--ss-hero-gradient); border-color: transparent; color: #ffffff; box-shadow: 0 10px 24px -12px rgb(11 111 164 / 0.55); }
.ss-stat-hero .ss-stat-label { color: #ffffff; }
.ss-stat-hero .ss-stat-icon { background: rgb(255 255 255 / 0.18); color: #ffffff; }
.ss-stat-hero .ss-stat-arrow { color: #ffffff; }
.ss-stat-note {
    display: inline-block; width: fit-content; margin-top: 0.125rem; padding: 0.0625rem 0.4375rem; border-radius: 999px;
    font-size: 0.6875rem; font-weight: 650; line-height: 1.4; background: var(--ss-spark); color: var(--ss-spark-fg);
}

.ss-stat-body { display: flex; flex-direction: column; gap: 0.3125rem; min-width: 0; }
.ss-stat-label { font-size: 0.75rem; color: var(--ss-muted-fg); line-height: 1; white-space: nowrap; }
.ss-stat-value { font-size: 1.1875rem; font-weight: 650; line-height: 1; letter-spacing: -0.02em; white-space: nowrap; }

/* ─── Badges ─────────────────────────────────────────────────────────────── */

.ss-badge {
    display: inline-flex; align-items: center; gap: 0.3125rem;
    border-radius: 9999px; padding: 0.1875rem 0.5625rem;
    font-size: 0.6875rem; font-weight: 550; white-space: nowrap;
    line-height: 1.2;
}

.ss-badge::before { content: ""; width: 0.3125rem; height: 0.3125rem; border-radius: 9999px; background: currentColor; opacity: 0.7; }

.ss-badge-brand   { background: var(--ss-accent-soft); color: var(--ss-accent-strong); }
.ss-badge-amber   { background: var(--ss-warn-soft); color: var(--ss-warn); }
.ss-badge-blue    { background: var(--ss-info-soft); color: var(--ss-info); }
.ss-badge-emerald { background: var(--ss-ok-soft); color: var(--ss-ok-strong); }
.ss-badge-red     { background: var(--ss-danger-soft); color: var(--ss-danger); }
.ss-badge-navy    { background: #e7ecf3; color: var(--ss-anchor); }
.ss-badge-slate   { background: #eef1f4; color: #475569; }

.ss-text-brand   { color: var(--ss-accent); }
.ss-text-amber   { color: var(--ss-warn); }
.ss-text-blue    { color: var(--ss-info); }
.ss-text-emerald { color: var(--ss-ok); }
.ss-text-red     { color: var(--ss-danger); }
.ss-text-muted   { color: var(--ss-muted-fg); }

/* ─── Buttons ────────────────────────────────────────────────────────────── */

.ss-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 0.375rem;
    border-radius: 0.5625rem; border: 1px solid transparent;
    font-size: 0.8125rem; font-weight: 550; font-family: inherit;
    padding: 0.46875rem 0.9375rem; cursor: pointer;
    transition: background 0.15s, color 0.15s, border-color 0.15s, box-shadow 0.15s;
    text-decoration: none;
}

.ss-btn:disabled { opacity: 0.55; cursor: default; }

.ss-btn-primary {
    background: var(--ss-accent); color: var(--ss-accent-fg);
    box-shadow: 0 1px 2px rgb(var(--ss-accent-rgb) / 0.35);
}
.ss-btn-primary:hover:not(:disabled) { background: var(--ss-accent-hover); }

.ss-btn-outline { background: var(--ss-surface); border-color: var(--ss-border); color: var(--ss-fg); box-shadow: var(--ss-shadow); }
.ss-btn-outline:hover:not(:disabled) { background: var(--ss-muted); }

.ss-btn-ghost { background: transparent; color: var(--ss-muted-fg); }
.ss-btn-ghost:hover:not(:disabled) { background: var(--ss-muted); color: var(--ss-fg); }

.ss-btn-destructive { background: var(--ss-destructive); color: #fff; }
.ss-btn-destructive:hover:not(:disabled) { background: #912018; }

.ss-btn-icon { padding: 0.4375rem; border-radius: 0.5rem; }
.ss-btn-block { width: 100%; }

/* ─── List rows (dashboard cards) ────────────────────────────────────────── */

.ss-row {
    display: flex; align-items: center; justify-content: space-between; gap: 0.75rem;
    padding: 0.6875rem 0; border-bottom: 1px solid var(--ss-border-soft);
}
.ss-row:last-child { border-bottom: 0; }

.ss-row-main { display: flex; flex-direction: column; gap: 0.3125rem; min-width: 0; }
.ss-row-title { font-size: 0.8125rem; font-weight: 550; line-height: 1.1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ss-row-sub { font-size: 0.75rem; color: var(--ss-muted-fg); line-height: 1.1; }
.ss-row-end { display: flex; flex-direction: column; align-items: flex-end; gap: 0.3125rem; }

.ss-card-footer-link {
    display: flex; align-items: center; justify-content: flex-end; gap: 0.25rem;
    margin-top: 0.75rem; font-size: 0.75rem; font-weight: 500; color: var(--ss-accent);
    text-decoration: none; transition: color 0.15s, gap 0.15s;
}
.ss-card-footer-link:hover { color: var(--ss-accent-hover); gap: 0.4375rem; }

.ss-empty { font-size: 0.75rem; color: var(--ss-muted-fg); padding: 0.5rem 0; }

/* ─── Status distribution bars ───────────────────────────────────────────── */

.ss-dist-row { display: flex; flex-direction: column; gap: 0.4375rem; padding: 0.5rem 0; }
.ss-dist-top { display: flex; align-items: center; justify-content: space-between; font-size: 0.75rem; }
.ss-dist-label { text-transform: capitalize; color: var(--ss-muted-fg); }
.ss-dist-top span:last-child { font-weight: 600; font-variant-numeric: tabular-nums; }

.ss-track { height: 0.375rem; width: 100%; border-radius: 9999px; background: var(--ss-muted); overflow: hidden; }
.ss-track-fill { height: 100%; border-radius: 9999px; transition: width 0.5s ease; }

/* ─── Customer / rep cards ───────────────────────────────────────────────── */

.ss-detail-rows { display: flex; flex-direction: column; gap: 0.5625rem; border-top: 1px solid var(--ss-border-soft); padding-top: 0.8125rem; }
.ss-detail-row { display: flex; align-items: center; gap: 0.5625rem; font-size: 0.75rem; color: var(--ss-muted-fg); min-width: 0; }
.ss-detail-row span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.ss-card-actions {
    display: flex; align-items: center; justify-content: space-between;
    border-top: 1px solid var(--ss-border-soft); padding-top: 0.75rem; margin-top: auto;
}

.ss-status-dot { width: 0.4375rem; height: 0.4375rem; border-radius: 9999px; flex-shrink: 0; }
.ss-dot-emerald { background: var(--ss-ok); box-shadow: 0 0 0 3px var(--ss-ok-soft); }
.ss-dot-amber { background: var(--ss-chart-open); box-shadow: 0 0 0 3px var(--ss-warn-soft); }
.ss-dot-slate { background: #9ca3af; box-shadow: 0 0 0 3px #f3f4f6; }

.ss-scroll-row {
    display: flex; gap: 1rem; overflow-x: auto; padding-bottom: 0.5rem;
    scroll-snap-type: x mandatory;
}
.ss-scroll-row > * { scroll-snap-align: start; flex: 0 0 250px; }

/* ─── Auth pages ─────────────────────────────────────────────────────────── */

.ss-auth-shell {
    min-height: 100vh; display: flex; align-items: center; justify-content: center;
    padding: 1.5rem;
    background:
        radial-gradient(60rem 32rem at 15% -10%, rgb(18 174 207 / 0.12), transparent 60%),
        radial-gradient(50rem 30rem at 110% 110%, rgb(11 35 64 / 0.10), transparent 60%),
        var(--ss-bg);
}

.ss-auth-card {
    background: var(--ss-surface); border: 1px solid var(--ss-border-soft);
    border-radius: 1.125rem; box-shadow: var(--ss-shadow-lg);
    width: 100%; max-width: 400px; padding: 2.25rem 2rem;
}

.ss-auth-brand {
    display: flex; flex-direction: column; align-items: center; gap: 0.75rem;
    margin-bottom: 1.75rem; text-align: center;
}
.ss-auth-brand .ss-logo-mark { box-shadow: 0 8px 24px rgb(18 174 207 / 0.40); }

.ss-auth-title {
    font-size: 1.625rem; font-weight: 750; letter-spacing: -0.035em; line-height: 1;
    background: linear-gradient(120deg, #0b2340 0%, #0a7a93 70%, #12aecf 100%);
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent; color: #0a7a93;
}

.ss-auth-tagline {
    font-size: 0.8125rem; color: var(--ss-muted-fg); letter-spacing: 0.01em;
    margin-top: -0.25rem;
}

.ss-auth-heading { font-size: 1.3125rem; font-weight: 650; letter-spacing: -0.025em; }
.ss-auth-subheading { font-size: 0.8125rem; color: var(--ss-muted-fg); margin: 0.3125rem 0 1.5rem; }

.ss-auth-error {
    background: var(--ss-danger-soft); color: var(--ss-danger); border: 1px solid #f8d3cf; border-radius: 0.625rem;
    padding: 0.625rem 0.875rem; font-size: 0.8125rem; margin-bottom: 1rem;
}

.ss-notice {
    background: var(--ss-ok-soft); color: var(--ss-ok-strong); border: 1px solid #cdeAd6; border-radius: 0.625rem;
    padding: 0.625rem 0.875rem; font-size: 0.8125rem;
}
.ss-auth-error ul { margin: 0; padding-left: 1rem; }

.ss-field { display: flex; flex-direction: column; gap: 0.4375rem; margin-bottom: 1rem; }
.ss-label { font-size: 0.8125rem; font-weight: 550; }

.ss-input {
    width: 100%; border: 1px solid var(--ss-border); border-radius: 0.5625rem;
    padding: 0.5625rem 0.8125rem; font-size: 0.875rem; font-family: inherit;
    background: var(--ss-surface); color: var(--ss-fg); outline: none;
    box-shadow: var(--ss-shadow);
    transition: border-color 0.15s, box-shadow 0.15s;
}
.ss-input::placeholder { color: #9ca3af; }
.ss-input:focus { border-color: var(--ss-accent); box-shadow: 0 0 0 3px rgb(var(--ss-accent-rgb) / 0.16); }

.ss-validation { color: var(--ss-destructive); font-size: 0.75rem; }

.ss-checkbox-row {
    display: flex; align-items: center; gap: 0.5rem;
    font-size: 0.8125rem; margin-bottom: 1.375rem; cursor: pointer;
    color: var(--ss-muted-fg);
}
.ss-checkbox-row input { accent-color: var(--ss-accent); }

.ss-auth-footer { font-size: 0.8125rem; color: var(--ss-muted-fg); text-align: center; margin-top: 1.375rem; }
/* Plain links only: a link styled as a button keeps the button's colours (the "Sign in" button after choosing a
   portal password was teal on teal). */
.ss-auth-footer a:not(.ss-btn) { color: var(--ss-accent); font-weight: 550; text-decoration: none; }
.ss-auth-footer a:not(.ss-btn):hover { text-decoration: underline; }

.ss-auth-demo {
    font-size: 0.75rem; color: var(--ss-muted-fg);
    background: var(--ss-muted); border-radius: 0.625rem;
    padding: 0.75rem 0.875rem; margin-top: 1rem;
    display: flex; flex-direction: column; gap: 0.4375rem;
}
.ss-auth-demo code { font-size: 0.6875rem; color: var(--ss-fg); }

.ss-auth-demo-title { font-weight: 600; color: var(--ss-fg); }
.ss-auth-demo-row { display: flex; align-items: baseline; gap: 0.5rem; }
.ss-auth-demo-role {
    flex-shrink: 0; width: 4.75rem; font-size: 0.6875rem; font-weight: 600;
    text-transform: uppercase; letter-spacing: 0.04em; color: var(--ss-muted-fg);
}

/* ─── Calendar page layout ───────────────────────────────────────────────── */

.ss-calendar-layout { display: grid; gap: 1rem; grid-template-columns: 1fr; }

@media (min-width: 1024px) {
    .ss-calendar-layout { grid-template-columns: 280px 1fr; align-items: start; }
}

.ss-calendar-sidebar { display: flex; flex-direction: column; gap: 1rem; }

.ss-rep-filter { display: flex; flex-direction: column; gap: 0.25rem; }
.ss-rep-filter-title {
    font-size: 0.6875rem; font-weight: 600; text-transform: uppercase;
    letter-spacing: 0.06em; color: var(--ss-muted-fg); margin-bottom: 0.375rem;
}

.ss-rep-toggle {
    display: flex; align-items: center; gap: 0.5625rem;
    border: 0; background: none; font-family: inherit; font-size: 0.8125rem;
    padding: 0.4375rem 0.625rem; border-radius: 0.5rem; cursor: pointer;
    color: var(--ss-muted-fg); transition: background 0.15s, color 0.15s;
    text-align: left;
}
.ss-rep-toggle:hover { background: var(--ss-muted); }
.ss-rep-toggle.active { background: var(--ss-muted); color: var(--ss-fg); font-weight: 550; }

.ss-rep-swatch { width: 0.5625rem; height: 0.5625rem; border-radius: 9999px; flex-shrink: 0; background: #d1d5db; }

/* ─── Reps page ──────────────────────────────────────────────────────────── */

.ss-rep-head { display: flex; align-items: center; justify-content: space-between; }
.ss-rep-name { display: flex; align-items: center; gap: 0.5625rem; font-size: 0.9375rem; font-weight: 650; letter-spacing: -0.01em; }

.ss-pace-box {
    border-radius: 0.625rem; background: var(--ss-bg);
    border: 1px solid var(--ss-border-soft);
    padding: 0.6875rem 0.8125rem; display: flex; flex-direction: column; gap: 0.4375rem;
}

.ss-kv { display: flex; align-items: center; justify-content: space-between; font-size: 0.75rem; }
.ss-kv .muted { color: var(--ss-muted-fg); }
.ss-kv .strong { font-weight: 600; }

/* ─── Info panels (label above value, left-aligned) ─────────────────────── */

.ss-info-grid { display: grid; grid-template-columns: 1fr; gap: 1rem; }

@media (min-width: 640px) {
    .ss-info-grid { grid-template-columns: 1fr 1fr; }
}

.ss-info-field { display: flex; flex-direction: column; gap: 0.3125rem; min-width: 0; }
.ss-info-label {
    font-size: 0.6875rem; font-weight: 600; text-transform: uppercase;
    letter-spacing: 0.05em; color: var(--ss-muted-fg);
}
.ss-info-value { font-size: 0.8125rem; line-height: 1.55; overflow-wrap: anywhere; }

/* ─── Dialog internals ───────────────────────────────────────────────────── */

.ss-clickable-row { cursor: pointer; }

.ss-dialog-form { display: flex; flex-direction: column; gap: 0.9375rem; }
.ss-dialog-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0.9375rem; }
.ss-dialog-footer { display: flex; justify-content: flex-end; gap: 0.5rem; }

.ss-order-summary {
    border-top: 1px solid var(--ss-border-soft); margin-top: 0.5rem; padding-top: 0.8125rem;
    display: flex; flex-direction: column; gap: 0.4375rem;
}

.ss-items-table { width: 100%; border-collapse: collapse; font-size: 0.75rem; }
.ss-items-table th {
    text-align: left; padding: 0.4375rem 0.5625rem; color: var(--ss-muted-fg);
    font-weight: 550; font-size: 0.6875rem; text-transform: uppercase; letter-spacing: 0.03em;
    border-bottom: 1px solid var(--ss-border);
}
.ss-items-table td { padding: 0.4375rem 0.5625rem; border-bottom: 1px solid var(--ss-border-soft); }
.ss-items-table .num { text-align: right; font-variant-numeric: tabular-nums; }

/* ─── Syncfusion harmonisation ───────────────────────────────────────────── */

.e-grid, .e-schedule, .e-dialog, .e-calendar, .e-btn, .e-input-group, .e-dropdownbase {
    font-family: var(--ss-font) !important;
}

/* Grid: blend into the surrounding card */
.ss-card .e-grid { border: 0; border-radius: calc(var(--ss-radius) - 0.375rem); overflow: hidden; }
.ss-card .e-grid .e-gridheader { border-top: 0; background: transparent; }
.ss-card .e-grid .e-headercell { background: transparent; }
.ss-card .e-grid .e-headercelldiv, .ss-card .e-grid .e-headertext {
    font-size: 0.6875rem; font-weight: 600; text-transform: uppercase;
    letter-spacing: 0.04em; color: var(--ss-muted-fg);
}
.ss-card .e-grid .e-rowcell { font-size: 0.8125rem; padding-top: 0.8125rem; padding-bottom: 0.8125rem; }
.ss-card .e-grid .e-row:hover .e-rowcell { background: var(--ss-row-hover); }
.ss-card .e-grid .e-gridpager { border-bottom: 0; background: transparent; }
.ss-card .e-pager .e-currentitem { background: var(--ss-accent); border-radius: 0.375rem; }

/* Scheduler: blend into the surrounding card */
.ss-card .e-schedule { border: 0; border-radius: calc(var(--ss-radius) - 0.25rem); }
.e-schedule .e-appointment { border-radius: 0.375rem; }
.e-schedule .e-header-cells, .e-schedule .e-schedule-toolbar {
    font-family: var(--ss-font);
}

/* Mini calendar: fit its card */
.ss-card .e-calendar { max-width: 100%; border: 0; box-shadow: none; }
.e-calendar .e-content td.e-selected span.e-day { background: var(--ss-accent); }
.e-calendar .e-content td.e-today span.e-day { border-color: var(--ss-accent); color: var(--ss-accent); }
.e-calendar .e-content td.e-today.e-selected span.e-day { background: var(--ss-accent); color: #fff; }

/* Dialogs */
.e-dialog { border-radius: 1rem; box-shadow: var(--ss-shadow-lg); }
.e-dialog .e-dlg-header-content { border-radius: 1rem 1rem 0 0; }
.e-dialog .e-footer-content { border-radius: 0 0 1rem 1rem; }

/* ─── Blazor error banner ────────────────────────────────────────────────── */
/* Hidden by default; the framework toggles it visible only on an unhandled error. */

#blazor-error-ui {
    display: none;
    position: fixed; bottom: 0; left: 0; right: 0; z-index: 1000;
    background: var(--ss-danger-soft); color: var(--ss-danger);
    border-top: 1px solid #f8d3cf;
    padding: 0.75rem 3rem 0.75rem 1.25rem;
    font-size: 0.8125rem;
    box-shadow: 0 -4px 16px rgb(16 24 40 / 0.08);
}

#blazor-error-ui .reload { color: inherit; font-weight: 600; margin-left: 0.5rem; }
#blazor-error-ui .dismiss {
    position: absolute; right: 1rem; top: 50%; transform: translateY(-50%);
    cursor: pointer; font-weight: 600;
}

/* ─── Misc ───────────────────────────────────────────────────────────────── */

.status-bar-safe-area { display: none; }

@supports (-webkit-touch-callout: none) {
    .status-bar-safe-area {
        display: flex; position: sticky; top: 0;
        height: env(safe-area-inset-top); background: var(--ss-surface); width: 100%; z-index: 60;
    }
}


/* ─── Search, results and selection (orders, customers, stock) ───────────── */

.ss-search-row { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }
.ss-search-box { position: relative; flex: 1; min-width: 220px; }
.ss-search-box .ss-search-icon {
    position: absolute; left: 0.75rem; top: 50%; transform: translateY(-50%);
    color: var(--ss-muted-fg); pointer-events: none; z-index: 1;
}
.ss-search-box .e-input-group,
.ss-search-box .e-input-group.e-control-wrapper { padding-left: 1.75rem; }
.ss-filter-row { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }

.ss-result-list {
    display: flex; flex-direction: column; max-height: 320px; overflow-y: auto;
    border: 1px solid var(--ss-border); border-radius: var(--ss-radius-sm); background: var(--ss-surface);
}
.ss-result-row {
    display: flex; align-items: center; gap: 0.75rem; padding: 0.625rem 0.875rem; text-align: left;
    background: transparent; border: 0; border-bottom: 1px solid var(--ss-border-soft); cursor: pointer;
    font: inherit; color: inherit; width: 100%;
}
.ss-result-row:last-child { border-bottom: 0; }
.ss-result-row:hover, .ss-result-row:focus-visible { background: var(--ss-accent-soft); outline: none; }

.ss-selected-strip {
    display: flex; align-items: center; gap: 0.75rem; flex-wrap: wrap;
    padding: 0.75rem 0.875rem; border: 1px solid var(--ss-border); border-radius: var(--ss-radius-sm);
    background: var(--ss-muted);
}

.ss-list-banner {
    display: flex; align-items: center; justify-content: space-between; gap: 0.5rem;
    padding: 0.5rem 1.25rem; font-size: 0.8125rem; color: var(--ss-muted-fg);
    border-bottom: 1px solid var(--ss-border); background: var(--ss-muted);
}

.ss-tile-button { all: unset; display: block; cursor: pointer; border-radius: var(--ss-radius); }
.ss-tile-button:hover .ss-card, .ss-tile-button:focus-visible .ss-card {
    box-shadow: var(--ss-shadow-md); border-color: var(--ss-accent);
}

/* ─── Chips (order draft, loyalty assignments) ───────────────────────────── */

.ss-chip-row { display: flex; flex-wrap: wrap; gap: 0.375rem; }
.ss-chip {
    display: inline-flex; align-items: center; gap: 0.375rem; padding: 0.25rem 0.375rem 0.25rem 0.625rem;
    border-radius: 999px; background: var(--ss-accent-soft); color: var(--ss-accent);
    font-size: 0.75rem; font-weight: 500;
}
.ss-chip button {
    all: unset; cursor: pointer; width: 1.125rem; height: 1.125rem; border-radius: 999px;
    display: inline-flex; align-items: center; justify-content: center; font-size: 0.875rem; line-height: 1;
}
.ss-chip button:hover { background: var(--ss-accent); color: var(--ss-accent-fg); }

/* ─── Badges added for tiers, standing and audit ─────────────────────────── */

.ss-badge-black { background: #111827; color: #f9fafb; }
.ss-badge-outline { background: transparent; color: var(--ss-muted-fg); border: 1px solid var(--ss-border); }

/* ─── Credit position and order timeline ─────────────────────────────────── */

.ss-credit-strip {
    display: flex; flex-wrap: wrap; gap: 0.5rem 1rem; padding: 0.625rem 0.875rem;
    border-radius: var(--ss-radius-sm); background: var(--ss-muted); font-size: 0.75rem; color: var(--ss-muted-fg);
}
.ss-credit-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.5rem; }
.ss-credit-cell {
    display: flex; flex-direction: column; gap: 0.125rem; padding: 0.625rem 0.75rem;
    border: 1px solid var(--ss-border); border-radius: var(--ss-radius-sm); font-size: 0.8125rem;
}
.ss-credit-cell .muted { font-size: 0.75rem; color: var(--ss-muted-fg); }
.ss-timeline { display: flex; flex-direction: column; gap: 0.25rem; font-size: 0.75rem; }
.ss-timeline-row { display: flex; justify-content: space-between; gap: 1rem; }
.ss-timeline-row .muted { color: var(--ss-muted-fg); }

/* ─── Insights ───────────────────────────────────────────────────────────── */

.ss-insight-grid { display: grid; grid-template-columns: 1fr; gap: 0.625rem; }
.ss-insight {
    display: flex; flex-direction: column; gap: 0.25rem; padding: 0.75rem 0.875rem;
    border-radius: var(--ss-radius-sm); border: 1px solid var(--ss-border); border-left-width: 4px;
    background: var(--ss-surface);
}
.ss-insight-positive { border-left-color: var(--ss-ok); }
.ss-insight-warning { border-left-color: var(--ss-chart-open); background: var(--ss-warn-soft); }
.ss-insight-info { border-left-color: var(--ss-accent); }
.ss-insight-category { font-size: 0.6875rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--ss-muted-fg); font-weight: 600; }
.ss-insight-title { font-size: 0.875rem; font-weight: 600; }
.ss-insight-detail { font-size: 0.8125rem; color: var(--ss-muted-fg); line-height: 1.45; }

/* ─── Admin forms (pricing, budgets, audit) ──────────────────────────────── */

.ss-dialog-grid-3 { display: grid; grid-template-columns: 1fr; gap: 0.75rem; }
.ss-tier-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.75rem; }
.ss-tier-cell { display: flex; flex-direction: column; gap: 0.375rem; padding: 0.75rem; border: 1px solid var(--ss-border); border-radius: var(--ss-radius-sm); }
.ss-spf-form { display: grid; grid-template-columns: 1fr; gap: 0.75rem; }
/* Pricing page: "Roll items are charged the roll price from [40] m [Save]" */
.ss-roll-price-form { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 0.625rem; font-size: 0.875rem; }
.ss-roll-price-box { width: 6.5rem; }
.ss-audit-filters { display: grid; grid-template-columns: 1fr; gap: 0.75rem; }
.ss-budget-table td, .ss-budget-table th { white-space: nowrap; }

@media (min-width: 640px) {
    .ss-insight-grid { grid-template-columns: repeat(2, 1fr); }
    .ss-dialog-grid-3 { grid-template-columns: repeat(3, 1fr); }
    .ss-tier-grid { grid-template-columns: repeat(4, 1fr); }
    .ss-spf-form { grid-template-columns: 2fr 1fr 1fr 1.5fr auto; align-items: end; }
    .ss-audit-filters { grid-template-columns: repeat(4, 1fr); }
    .ss-credit-grid { grid-template-columns: repeat(4, 1fr); }
}

@media (min-width: 1024px) {
    .ss-insight-grid { grid-template-columns: repeat(3, 1fr); }
    .ss-audit-filters { grid-template-columns: repeat(7, 1fr); }
}

/* Type-ahead hint next to search boxes */
.ss-search-hint { white-space: nowrap; }
.ss-switch-row {
    display: inline-flex; align-items: center; gap: 0.5rem; flex-shrink: 0;
    font-size: 0.8125rem; color: var(--ss-fg); white-space: nowrap; cursor: pointer;
}
.ss-switch-text { cursor: pointer; user-select: none; }
.ss-card-header-wrap { flex-wrap: wrap; }
/* The layout's error boundary (a page threw and no handler caught it): a calm card with Reload. */
.ss-error-card { padding: 1.25rem 1.375rem; gap: 1rem; border-color: var(--ss-danger-soft); max-width: 40rem; }
.ss-error-card-head { display: flex; align-items: flex-start; gap: 0.75rem; }
.ss-error-card-icon {
    display: inline-flex; padding: 0.5rem; border-radius: var(--ss-radius-sm); flex-shrink: 0;
    background: var(--ss-danger-soft); color: var(--ss-danger);
}
.ss-error-card-text { margin: 0.25rem 0 0; white-space: normal; line-height: 1.45; }
.ss-link-button {
    background: none; border: 0; padding: 0; font: inherit; color: var(--ss-accent);
    text-decoration: underline; text-underline-offset: 2px; cursor: pointer;
}
.ss-link-button:hover { color: var(--ss-accent-hover); }


/* ─── New sales order: two-column layout with sticky summary ─────────────── */

.ss-order-layout { display: grid; grid-template-columns: 1fr; gap: 1rem; align-items: start; }
.ss-order-main { display: flex; flex-direction: column; gap: 1rem; min-width: 0; }
.ss-order-side { min-width: 0; }

.ss-section {
    display: flex; flex-direction: column; gap: 0.875rem;
    background: var(--ss-surface); border: 1px solid var(--ss-border); border-radius: var(--ss-radius);
    box-shadow: var(--ss-shadow); padding: 1.125rem 1.25rem;
}
.ss-section-title {
    display: flex; align-items: center; gap: 0.625rem; flex-wrap: wrap;
    font-size: 0.9375rem; font-weight: 600; letter-spacing: -0.01em;
}
.ss-section-note { margin-left: auto; font-size: 0.75rem; font-weight: 400; color: var(--ss-muted-fg); }
.ss-step {
    display: inline-flex; align-items: center; justify-content: center;
    width: 1.5rem; height: 1.5rem; border-radius: 999px; font-size: 0.75rem; font-weight: 700;
    background: var(--ss-accent-soft); color: var(--ss-accent);
}

.ss-customer-strip {
    display: flex; align-items: center; gap: 0.75rem; flex-wrap: wrap;
    padding: 0.75rem 0.875rem; border: 1px solid var(--ss-border); border-radius: var(--ss-radius-sm);
    background: var(--ss-muted);
}
.ss-customer-details {
    display: grid; grid-template-columns: 1fr; gap: 0.875rem;
    padding: 0.875rem; border: 1px dashed var(--ss-border); border-radius: var(--ss-radius-sm);
}

/* Stock suggestions dropdown */
.ss-suggest-anchor { position: relative; }
.ss-suggest {
    position: absolute; left: 0; right: 0; top: calc(100% + 0.25rem); z-index: 30;
    display: flex; flex-direction: column; max-height: 360px; overflow-y: auto;
    background: var(--ss-surface); border: 1px solid var(--ss-border); border-radius: var(--ss-radius-sm);
    box-shadow: var(--ss-shadow-lg);
}
.ss-suggest-row {
    display: flex; align-items: center; gap: 0.875rem; width: 100%; text-align: left;
    padding: 0.625rem 0.875rem; background: transparent; border: 0; border-bottom: 1px solid var(--ss-border-soft);
    cursor: pointer; font: inherit; color: inherit;
}
.ss-suggest-row:last-child { border-bottom: 0; }
.ss-suggest-row:hover:not(:disabled), .ss-suggest-row:focus-visible { background: var(--ss-accent-soft); outline: none; }
.ss-suggest-row:disabled { cursor: default; opacity: 0.6; }
.ss-suggest-row:first-child:not(:disabled) { box-shadow: inset 3px 0 0 var(--ss-accent); }
.ss-suggest-price { display: flex; flex-direction: column; align-items: flex-end; font-size: 0.8125rem; font-weight: 600; white-space: nowrap; }
.ss-suggest-qty { display: flex; flex-direction: column; align-items: flex-end; font-size: 0.8125rem; font-weight: 600; min-width: 3rem; }
.ss-suggest-empty { padding: 0.75rem 0.875rem; font-size: 0.8125rem; color: var(--ss-muted-fg); }

/* Lines table */
.ss-lines-table { min-width: 640px; }
.ss-lines-table th { font-size: 0.6875rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--ss-muted-fg); }
.ss-lines-table td { vertical-align: middle; }
.ss-cell-input { width: 7.5rem; }
.ss-cell-narrow { width: 6rem; }
.ss-lines-empty {
    display: flex; align-items: center; justify-content: center; gap: 0.625rem;
    padding: 1.5rem; border: 1px dashed var(--ss-border); border-radius: var(--ss-radius-sm);
    color: var(--ss-muted-fg); font-size: 0.8125rem;
}
.ss-tag {
    display: inline-block; margin-left: 0.375rem; padding: 0.0625rem 0.375rem; border-radius: 999px;
    font-size: 0.6875rem; color: var(--ss-muted-fg); background: var(--ss-muted);
}
.ss-tag-warn { color: #92400e; background: #fef3c7; }
.ss-cell-input .ss-tag { margin: 0.25rem 0 0; }

/* Summary panel */
.ss-order-summary-card { gap: 0.75rem; }
.ss-summary-row { display: flex; justify-content: space-between; gap: 1rem; font-size: 0.8125rem; }
.ss-summary-row .muted { color: var(--ss-muted-fg); }
.ss-summary-row .strong { font-weight: 600; text-align: right; }
.ss-summary-totals {
    display: flex; flex-direction: column; gap: 0.375rem;
    padding-top: 0.75rem; border-top: 1px solid var(--ss-border);
}
.ss-summary-total { font-size: 1rem; font-weight: 700; padding-top: 0.25rem; }
.ss-notice-ok, .ss-notice-warn {
    font-size: 0.75rem; padding: 0.5rem 0.625rem; border-radius: var(--ss-radius-sm); line-height: 1.4;
}
.ss-notice-ok { background: var(--ss-ok-soft); color: var(--ss-ok-strong); }
.ss-notice-warn { background: var(--ss-warn-soft); color: var(--ss-warn); }

/* Mobile action bar: shown only when the summary is not beside the form */
.ss-order-bar {
    position: sticky; bottom: 0; z-index: 20;
    display: flex; align-items: center; justify-content: space-between; gap: 1rem;
    margin: 0 calc(-1 * var(--ss-gutter)) -2.5rem; padding: 0.75rem var(--ss-gutter);
    background: color-mix(in srgb, var(--ss-surface) 92%, transparent);
    backdrop-filter: blur(10px); border-top: 1px solid var(--ss-border);
}

@media (min-width: 640px) {
    .ss-customer-details { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 1024px) {
    .ss-order-layout { grid-template-columns: minmax(0, 1fr) 340px; gap: 1.25rem; }
    .ss-order-side { position: sticky; top: 4.5rem; }
    .ss-order-bar { display: none; }
}

/* Clickable stat tiles and stacked progress (sales + open orders) */
.ss-stat-link { text-decoration: none; color: inherit; position: relative; transition: box-shadow 0.15s, border-color 0.15s; }
.ss-stat-link:hover, .ss-stat-link:focus-visible { box-shadow: var(--ss-shadow-md); border-color: var(--ss-accent); outline: none; }
.ss-stat-arrow { position: absolute; right: 0.875rem; top: 50%; transform: translateY(-50%); color: var(--ss-muted-fg); }
.ss-track-stacked { display: flex; overflow: hidden; }
.ss-track-stacked .ss-track-fill { border-radius: 0; }
.ss-track-open { background: var(--ss-chart-open); opacity: 0.85; }
.ss-swatch-open { background: var(--ss-chart-open); }

/* Search fallback notes */
.ss-suggest-note { display: flex; align-items: center; gap: 0.375rem; padding: 0.5rem 0.875rem; font-size: 0.75rem; color: #b45309; background: #fffbeb; border-bottom: 1px solid var(--ss-border-soft); }
.ss-search-note { display: inline-flex; align-items: center; gap: 0.25rem; margin-left: 0.75rem; color: #b45309; }

/* Quotes, cancellations, authorisations (Sep 2026) */
.ss-required { color: var(--ss-destructive); margin-left: 0.125rem; }
.ss-mt-xs { margin-top: 0.375rem; }
.ss-action-row { display: flex; justify-content: flex-end; align-items: center; gap: 0.25rem; flex-wrap: wrap; }
.ss-btn-sm { padding: 0.3125rem 0.625rem; font-size: 0.75rem; }
/* Chart with its Excel / PDF export toolbar (ExportableChart) */
.ss-chart-wrap { display: flex; flex-direction: column; gap: 0.25rem; min-width: 0; }
.ss-chart-toolbar { display: flex; align-items: center; justify-content: flex-end; gap: 0.25rem; flex-wrap: wrap; }
.ss-chart-toolbar .ss-btn-sm { padding: 0.25rem 0.5rem; }
.ss-chart-caption { font-size: 0.75rem; color: var(--ss-muted-fg); margin-right: auto; min-width: 0; }
.ss-chart-error { font-size: 0.75rem; color: var(--ss-danger); margin-right: auto; }
.ss-chart-caption + .ss-chart-error { margin-right: 0; }
.ss-flag-row { display: flex; gap: 0.25rem; margin-top: 0.25rem; }
.ss-flag { font-size: 0.625rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; padding: 0.0625rem 0.375rem; border-radius: 999px; background: #fef3c7; color: #92400e; }
.ss-tabs { display: inline-flex; gap: 0.25rem; padding: 0.25rem; border-radius: var(--ss-radius-sm); background: var(--ss-muted); }
.ss-tab { all: unset; cursor: pointer; padding: 0.4375rem 0.875rem; border-radius: calc(var(--ss-radius-sm) - 2px); font-size: 0.8125rem; font-weight: 500; color: var(--ss-muted-fg); }
.ss-tab.active { background: var(--ss-surface); color: var(--ss-fg); box-shadow: var(--ss-shadow); }
.ss-tab:focus-visible { outline: 2px solid var(--ss-accent); }
.ss-growth { display: flex; justify-content: space-between; gap: 0.5rem; font-size: 0.75rem; }
.ss-combined { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.75rem; }
@media (min-width: 640px) { .ss-combined { grid-template-columns: repeat(4, 1fr); } }
/* Reps page: which reps to show */
.ss-rep-picker {
    padding: 0.875rem 1.25rem; display: flex; flex-direction: row; flex-wrap: wrap; align-items: flex-end;
    justify-content: space-between; gap: 0.75rem 1.25rem;
}
.ss-rep-picker-main { display: flex; flex-direction: column; gap: 0.375rem; flex: 1 1 22rem; min-width: 0; max-width: 46rem; }
.ss-rep-picker-quick { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; }
.ss-rep-picker-quick .ss-row-sub { margin-right: 0.25rem; white-space: nowrap; }
@media (min-width: 1024px) { .ss-grid-lg-5 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr)); } }

/* ─── Spotlight: a short glow that shows where a tile click took the user ──── */
.ss-spotlight-target { scroll-margin-top: 5rem; }
.ss-spotlight { animation: ss-spotlight 2.2s ease-out 1; }
@keyframes ss-spotlight {
    0%   { border-color: var(--ss-border-soft); box-shadow: var(--ss-shadow), 0 0 0 0 rgba(10, 122, 147, 0); }
    15%  { border-color: var(--ss-accent); box-shadow: var(--ss-shadow), 0 0 0 3px rgba(10, 122, 147, 0.55), 0 0 28px 6px rgba(10, 122, 147, 0.30); }
    40%  { border-color: var(--ss-accent); box-shadow: var(--ss-shadow), 0 0 0 3px rgba(10, 122, 147, 0.20), 0 0 12px 2px rgba(10, 122, 147, 0.10); }
    60%  { border-color: var(--ss-accent); box-shadow: var(--ss-shadow), 0 0 0 3px rgba(10, 122, 147, 0.50), 0 0 24px 5px rgba(10, 122, 147, 0.25); }
    100% { border-color: var(--ss-border-soft); box-shadow: var(--ss-shadow), 0 0 0 0 rgba(10, 122, 147, 0); }
}
@media (prefers-reduced-motion: reduce) {
    .ss-spotlight { animation: none; border-color: var(--ss-accent); box-shadow: var(--ss-shadow), 0 0 0 3px rgba(10, 122, 147, 0.45); }
}

/* Read-only value in a form (e.g. the only warehouse there is to sell from). */
.ss-static-field {
    display: flex; align-items: center; min-height: 2.375rem;
    padding: 0.5rem 0.8125rem; border: 1px solid var(--ss-border); border-radius: 0.5625rem;
    background: var(--ss-muted); color: var(--ss-fg); font-size: 0.875rem;
}

/* ─── Filling the screen ───────────────────────────────────────────────────
   Charts, the calendar and the order capture area size to the viewport so large
   monitors are used; the clamps keep them sensible on laptops and phones. */
.ss-chart-box    { height: clamp(280px, 34vh, 560px); }
.ss-chart-box-md { height: clamp(240px, 28vh, 460px); }
.ss-chart-box-sm { height: clamp(170px, 20vh, 320px); }
.ss-chart-box-dialog { height: 260px; }   /* charts in dialogs: with ExportableChart ChartHeight="260px" */

.ss-calendar-card { height: max(560px, calc(100vh - 12.5rem)); height: max(560px, calc(100dvh - 12.5rem)); }

@media (min-width: 1024px) {
    .ss-order-main { min-height: calc(100vh - 12.5rem); min-height: calc(100dvh - 12.5rem); }
    .ss-order-main > .ss-section-grow { flex: 1 1 auto; }
    .ss-section-grow > .ss-lines-empty { flex: 1 1 auto; }
}

/* Many cards (e.g. one per rep code): as many per row as fit on wide screens. */
@media (min-width: 1600px) {
    .ss-grid-fill { grid-template-columns: repeat(auto-fit, minmax(400px, 1fr)); }
}

/* ── Warehouse: scan box (keyboard-mode scanners type the code and press Enter) ── */
.ss-scan { display: flex; flex-direction: column; gap: 0.375rem; }
.ss-scan-row { display: flex; gap: 0.5rem; align-items: stretch; }
.ss-scan-row .ss-input { flex: 1; min-width: 0; font-size: 1rem; letter-spacing: 0.02em; }
.ss-scan-hint { margin: 0; font-size: 0.75rem; color: var(--ss-muted-fg); }

/* Scan box camera (ScanBox.razor.js; only where the browser reads barcodes itself). The view is
   filled by the script: the video, the aiming frame and the last code read (data-state,
   data-paused and data-scanned are set there). */
.ss-scan-camera-btn { flex-shrink: 0; min-width: 2.75rem; padding: 0.4375rem 0.6875rem; }
.ss-scan-camera-btn.is-on, .ss-scan-camera-torch.is-on {
    background: var(--ss-accent-soft); border-color: var(--ss-accent); color: var(--ss-accent-strong);
}
.ss-scan-camera {
    display: flex; flex-direction: column; width: 100%; max-width: 40rem; margin-top: 0.25rem;
    border: 1px solid var(--ss-border); border-radius: var(--ss-radius-sm); overflow: hidden;
    background: var(--ss-surface); box-shadow: var(--ss-shadow-md);
}
.ss-scan-camera:focus { outline: none; }
.ss-scan-camera:focus-visible { border-color: var(--ss-accent); box-shadow: 0 0 0 3px rgb(var(--ss-accent-rgb) / 0.2); }
.ss-scan-camera-view {
    position: relative; width: 100%; aspect-ratio: 4 / 3; max-height: min(42vh, 22rem);
    background: var(--ss-anchor); overflow: hidden;
}
.ss-scan-camera.has-problem .ss-scan-camera-view { display: none; }
.ss-scan-camera-video {
    position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: opacity 0.2s ease;
}
.ss-scan-camera-view[data-paused] .ss-scan-camera-video { opacity: 0.45; }
.ss-scan-camera-aim {
    position: absolute; left: 12%; right: 12%; top: 28%; bottom: 28%; pointer-events: none;
    border: 2px solid rgb(255 255 255 / 0.9); border-radius: 0.75rem;
    box-shadow: 0 0 0 1px rgb(11 35 64 / 0.35), inset 0 0 0 1px rgb(11 35 64 / 0.35);
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.ss-scan-camera-view[data-state="starting"] .ss-scan-camera-aim { opacity: 0.35; }
.ss-scan-camera-view[data-scanned] .ss-scan-camera-aim {
    border: 3px solid var(--ss-ok);
    box-shadow: 0 0 0 3px rgb(255 255 255 / 0.9), 0 0 24px 4px color-mix(in srgb, var(--ss-ok) 55%, transparent);
}
.ss-scan-camera-view[data-scanned]::after {
    content: ""; position: absolute; inset: 0; pointer-events: none;
    background: color-mix(in srgb, var(--ss-ok) 22%, transparent); animation: ss-scan-flash 0.45s ease-out forwards;
}
@keyframes ss-scan-flash { from { opacity: 1; } to { opacity: 0; } }
.ss-scan-camera-code {
    position: absolute; left: 50%; bottom: 0.75rem; transform: translateX(-50%); max-width: calc(100% - 1.5rem);
    padding: 0.375rem 0.875rem 0.375rem 0.75rem; border-radius: 999px; pointer-events: none;
    background: var(--ss-ok); color: #fff; box-shadow: 0 2px 8px rgb(11 35 64 / 0.3);
    font-size: 0.9375rem; font-weight: 650; letter-spacing: 0.02em;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    opacity: 0; transition: opacity 0.2s ease;
}
.ss-scan-camera-code::before {
    content: ""; display: inline-block; width: 0.375rem; height: 0.6875rem; margin: 0 0.5rem 0.1875rem 0.125rem;
    border: solid currentColor; border-width: 0 2px 2px 0; transform: rotate(45deg); vertical-align: middle;
}
.ss-scan-camera-view[data-scanned] .ss-scan-camera-code { opacity: 1; }
.ss-scan-camera-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 0.75rem; padding: 0.5rem 0.625rem 0.5rem 0.875rem; }
.ss-scan-camera-msg { flex: 1 1 12rem; min-width: 0; font-size: 0.8125rem; line-height: 1.4; color: var(--ss-muted-fg); }
.ss-scan-camera.has-problem .ss-scan-camera-msg { color: var(--ss-danger); font-weight: 550; }
.ss-scan-camera-actions { display: flex; flex-wrap: wrap; gap: 0.375rem; margin-left: auto; }
.ss-scan-camera-actions .ss-btn { min-height: 2.75rem; }
@media (prefers-reduced-motion: reduce) {
    .ss-scan-camera-view[data-scanned]::after { animation: none; opacity: 0; }
    .ss-scan-camera-video, .ss-scan-camera-aim, .ss-scan-camera-code { transition: none; }
}

/* Warehouse home: module tiles */
.ss-module-grid { display: grid; gap: 0.75rem; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); }
.ss-module-tile {
    display: flex; gap: 0.875rem; align-items: flex-start; padding: 1rem 1.125rem;
    border: 1px solid var(--ss-border); border-radius: 0.75rem; background: var(--ss-surface);
    color: var(--ss-fg); text-decoration: none; box-shadow: var(--ss-shadow);
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.ss-module-tile:hover, .ss-module-tile:focus-visible { border-color: var(--ss-accent); box-shadow: 0 0 0 3px rgb(var(--ss-accent-rgb) / 0.14); }
.ss-module-tile .ss-row-title { font-weight: 600; }
.ss-module-tile .ss-row-sub { margin-top: 0.125rem; }
.ss-scan-result { display: flex; flex-direction: column; gap: 0.25rem; padding: 0.75rem 1rem; border-radius: 0.625rem; background: var(--ss-accent-soft); }

/* ── Users portal: permissions editor + Access denied card (module: user permissions) ── */
/* The user dialogs never overflow a phone screen (390px): side by side fields stack. */
.ss-user-dialog.e-dialog { max-width: calc(100vw - 1.5rem); }
@media (max-width: 479px) {
    .ss-user-dialog .ss-dialog-grid-2 { grid-template-columns: 1fr; }
}
.ss-perm-editor {
    display: flex; flex-direction: column; gap: 0.625rem;
    padding-top: 0.875rem; border-top: 1px solid var(--ss-border-soft);
}
.ss-perm-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 0.25rem 0.75rem; }
.ss-perm-note {
    margin: 0; padding: 0.5rem 0.75rem; border-radius: var(--ss-radius-sm);
    background: var(--ss-muted); color: var(--ss-fg); font-size: 0.8125rem;
}
.ss-perm-mode { display: flex; flex-wrap: wrap; gap: 0.5rem 1.25rem; }
.ss-perm-mode .e-radio-wrapper .e-label { font-size: 0.8125rem; font-weight: 550; color: var(--ss-fg); }
/* Role defaults / admin: the boxes are a read-only preview, so they look quieter than editable ones. */
.ss-perm-item .e-checkbox-disabled .e-frame { opacity: 0.55; }
.ss-perm-reset { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.5rem 0.75rem; }
.ss-perm-reset .ss-btn { background: var(--ss-surface); }
.ss-perm-group {
    margin: 0; padding: 0.625rem 0.75rem 0.75rem; min-width: 0;
    border: 1px solid var(--ss-border); border-radius: 0.625rem;
    display: flex; flex-direction: column; gap: 0.5rem;
}
.ss-perm-module {
    padding: 0 0.25rem; font-size: 0.6875rem; font-weight: 600;
    text-transform: uppercase; letter-spacing: 0.05em; color: var(--ss-muted-fg);
}
.ss-perm-item { display: flex; flex-direction: column; gap: 0.125rem; min-width: 0; }
.ss-perm-item .e-checkbox-wrapper .e-label { font-size: 0.8125rem; font-weight: 550; color: var(--ss-fg); white-space: normal; }
.ss-perm-desc { padding-left: 1.75rem; font-size: 0.75rem; line-height: 1.35; color: var(--ss-muted-fg); }
.ss-perm-summary { display: inline-flex; flex-direction: column; align-items: flex-start; gap: 0.1875rem; }
.ss-access-denied { padding: 1.5rem; gap: 0.5rem; max-width: 520px; }
.ss-access-denied .ss-page-subtitle { margin: 0; }
.ss-access-denied-action { width: fit-content; margin-top: 0.5rem; }
/* Sign-in page demo list: room for the "Controller" label. */
.ss-auth-demo-role { width: 5.75rem; }

/* ── Users portal: import from CSV/Excel (template → upload → preview → import) ── */
.ss-import-header { align-items: flex-start; }
.ss-import-body { display: flex; flex-direction: column; gap: 1rem; padding: 0.5rem 1.375rem 1.25rem; min-width: 0; }
.ss-import-step { display: flex; flex-direction: column; gap: 0.625rem; min-width: 0; }
.ss-import-step + .ss-import-step { padding-top: 1rem; border-top: 1px solid var(--ss-border-soft); }
.ss-import-step-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.5rem 1rem; }
.ss-import-step-title { margin: 0; font-size: 0.8125rem; font-weight: 600; color: var(--ss-fg); overflow-wrap: anywhere; }
.ss-import-text { margin: 0; line-height: 1.45; }
.ss-import-actions, .ss-import-counts, .ss-import-footer { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.ss-import-footer { justify-content: flex-end; }
.ss-import .ss-badge { text-transform: none; }
.ss-import-option { display: flex; flex-direction: column; gap: 0.25rem; }
/* The long label wraps beside the box on a phone (Syncfusion's label is inline-block and nowrap). */
.ss-import-option .e-checkbox-wrapper label { display: flex; align-items: flex-start; max-width: 100%; white-space: normal; }
.ss-import-option .e-checkbox-wrapper .e-frame { flex-shrink: 0; }
.ss-import-option .e-checkbox-wrapper .e-label { font-size: 0.8125rem; font-weight: 550; color: var(--ss-fg); white-space: normal; min-width: 0; }
.ss-import-help { border: 1px solid var(--ss-border); border-radius: 0.625rem; padding: 0.625rem 0.875rem; font-size: 0.8125rem; }
.ss-import-help summary { cursor: pointer; font-weight: 550; color: var(--ss-accent-strong); }
.ss-import-help summary:focus-visible { outline: 2px solid var(--ss-accent); outline-offset: 2px; border-radius: 0.25rem; }
.ss-import-columns { display: grid; grid-template-columns: max-content 1fr; gap: 0.375rem 1rem; margin: 0.75rem 0 0.5rem; }
.ss-import-columns dt { font-weight: 600; }
.ss-import-columns dd { margin: 0; color: var(--ss-muted-fg); min-width: 0; }
.ss-import-keys { margin: 0.375rem 0 0; padding-left: 1.125rem; display: grid; gap: 0.125rem; }
.ss-import-help code { font-size: 0.75rem; background: var(--ss-muted); color: var(--ss-fg); padding: 0.0625rem 0.3125rem; border-radius: 0.25rem; }
.ss-import-filter { align-self: flex-start; max-width: 100%; overflow-x: auto; }
.ss-import-filter .ss-tab { white-space: nowrap; }
.ss-import-table-wrap { overflow-x: auto; border: 1px solid var(--ss-border-soft); border-radius: 0.625rem; }
.ss-import-table td { vertical-align: top; }
.ss-import-table .ss-row-title { white-space: normal; }
.ss-import-wrap { overflow-wrap: anywhere; }
.ss-import-details { min-width: 14rem; }
.ss-import-user { min-width: 12rem; }
.ss-import-row-error td { background: color-mix(in srgb, var(--ss-danger-soft) 60%, transparent); }
/* Opening stock import: label batches of the imported rolls, and the imports on the stock take's timeline */
.ss-import-labels { display: flex; flex-direction: column; gap: 0.5rem; min-width: 0; }
.ss-st-import-labels { margin-top: 0.375rem; }
.ss-st-import-labels .ss-import-labels { margin-top: 0.5rem; }
/* The one-time sign-ins after an import: set apart so the admin notices them before leaving. */
.ss-import-signins {
    padding: 0.875rem 1rem; border-radius: 0.75rem;
    border: 1px solid color-mix(in srgb, var(--ss-warn) 35%, var(--ss-border)); background: color-mix(in srgb, var(--ss-warn-soft) 45%, var(--ss-surface));
}
.ss-import-step + .ss-import-step.ss-import-signins, .ss-import-signins + .ss-import-step { border-top: 0; }
.ss-import-secret {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 0.8125rem; letter-spacing: 0.04em;
    background: var(--ss-surface); border: 1px solid var(--ss-border); border-radius: 0.3125rem; padding: 0.0625rem 0.375rem;
    user-select: all; white-space: nowrap;
}
/* Phones: each row becomes a small card of label · value pairs. */
@media (max-width: 719px) {
    .ss-import-body { padding: 0.5rem 1rem 1rem; }
    .ss-import-columns { grid-template-columns: 1fr; gap: 0.125rem; }
    .ss-import-columns dd { margin-bottom: 0.5rem; }
    .ss-import-table-wrap { border: 0; overflow: visible; }
    .ss-import-table thead { display: none; }
    .ss-import-table, .ss-import-table tbody, .ss-import-table tr, .ss-import-table td { display: block; width: 100%; }
    .ss-import-table tr { border: 1px solid var(--ss-border); border-radius: 0.625rem; padding: 0.375rem 0.25rem; margin-bottom: 0.5rem; }
    .ss-import-table td { display: grid; grid-template-columns: 6.5rem minmax(0, 1fr); gap: 0.5rem; border-bottom: 0; padding: 0.25rem 0.5rem; }
    .ss-import-table td.num { text-align: left; }
    .ss-import-table td::before {
        content: attr(data-label); color: var(--ss-muted-fg); font-size: 0.6875rem; font-weight: 550;
        text-transform: uppercase; letter-spacing: 0.03em; padding-top: 0.0625rem;
    }
    .ss-import-details, .ss-import-user { min-width: 0; }
    .ss-import-row-error td { background: transparent; }
    .ss-import-table tr.ss-import-row-error {
        border-color: color-mix(in srgb, var(--ss-danger) 35%, var(--ss-border));
        background: color-mix(in srgb, var(--ss-danger-soft) 60%, transparent);
    }
    .ss-import-footer .ss-btn { flex: 1 1 auto; justify-content: center; }
}
/* ═══ Warehouse drop 1 · shelves and bins, roll items, roll labels (layout module) ═══ */

/* Shared bits: toolbar, status line, "show more", barcode text */
.ss-wh-toolbar { flex-direction: row; flex-wrap: wrap; align-items: flex-end; gap: 0.75rem 1.25rem; padding: 1rem 1.25rem; }
.ss-wh-field { display: flex; flex-direction: column; gap: 0.375rem; min-width: 0; flex: 1 1 14rem; max-width: 22rem; }
.ss-wh-field-grow { flex: 2 1 16rem; max-width: 34rem; }
.ss-wh-toolbar .ss-switch-row { min-height: 2.375rem; }
/* Uses bins / No bins with its switch button (UGF Q27) */
.ss-wh-bins-setting { display: flex; align-items: center; flex-wrap: wrap; gap: 0.5rem; min-height: 2.375rem; }
/* A warehouse without bins: its one place, shown instead of a bin step */
.ss-wh-place { display: flex; flex-direction: column; gap: 0.125rem; padding: 0.5rem 0.75rem; border-radius: var(--ss-radius-sm); background: var(--ss-accent-soft); color: var(--ss-accent-strong); }
.ss-wh-place .ss-row-sub { color: var(--ss-muted-fg); }
.ss-wh-status { display: flex; align-items: center; gap: 0.5rem 0.75rem; flex-wrap: wrap; }
.ss-wh-status > span:first-child { flex: 1 1 14rem; min-width: 0; }
.ss-wh-status .ss-btn-icon { margin-left: auto; color: inherit; }
.ss-wh-empty { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 1rem; padding: 1.5rem 1.375rem; }
.ss-wh-empty > div { flex: 1 1 16rem; min-width: 0; }
.ss-wh-summary { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.375rem 1rem; margin-bottom: -0.5rem; }
.ss-wh-summary-actions { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 0.25rem 1rem; font-size: 0.8125rem; }
.ss-wh-more { align-self: flex-start; margin-top: 0.25rem; }
.ss-barcode-text {
    font-size: 0.6875rem; font-weight: 500; color: var(--ss-muted-fg); letter-spacing: 0.05em;
    font-variant-numeric: tabular-nums; white-space: nowrap;
}
.ss-bin-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 0.25rem 0.5rem; font-size: 0.75rem; color: var(--ss-muted-fg); min-width: 0; line-height: 1.35; }
.ss-dialog-title { font-size: 0.875rem; font-weight: 600; }
.ss-wh-dialog.e-dialog { max-width: calc(100vw - 2rem); }
/* Badges here carry short phrases ("2 holding stock", "Roll · item rule"): keep sentence case. */
.ss-shelf-list .ss-badge, .ss-items-layout .ss-badge, .ss-lot-list .ss-badge { text-transform: none; }

/* Shelves and bins: one collapsible card per shelf; bins listed (and paged) only when open */
.ss-shelf-list { display: flex; flex-direction: column; gap: 0.625rem; }
.ss-shelf {
    border: 1px solid var(--ss-border-soft); border-radius: 0.75rem; background: var(--ss-surface);
    box-shadow: var(--ss-shadow); min-width: 0;
}
.ss-shelf.is-open { border-color: var(--ss-border); }
.ss-shelf.is-inactive { background: var(--ss-muted); }
.ss-shelf-head { display: flex; align-items: center; flex-wrap: wrap; gap: 0.375rem 0.625rem; padding: 0.5rem 0.75rem; }
.ss-shelf-toggle {
    all: unset; box-sizing: border-box; display: flex; align-items: center; gap: 0.625rem;
    flex: 1 1 12rem; min-width: 0; cursor: pointer; border-radius: 0.5rem; padding: 0.3125rem 0.375rem;
}
.ss-shelf-toggle:hover { background: var(--ss-muted); }
.ss-shelf.is-inactive .ss-shelf-toggle:hover { background: var(--ss-surface); }
.ss-shelf-toggle:focus-visible { outline: 2px solid var(--ss-accent); outline-offset: 1px; }
.ss-chevron { flex-shrink: 0; color: var(--ss-muted-fg); transition: transform 0.15s ease; }
.ss-shelf.is-open .ss-chevron { transform: rotate(90deg); }
.ss-shelf-title { display: flex; flex-direction: column; gap: 0.25rem; min-width: 0; }
.ss-shelf-name { font-size: 0.9375rem; font-weight: 650; letter-spacing: -0.01em; line-height: 1.2; }
.ss-shelf-desc { font-size: 0.8125rem; color: var(--ss-muted-fg); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ss-shelf-actions, .ss-bin-actions { display: flex; align-items: center; gap: 0.125rem; margin-left: auto; flex-shrink: 0; }
.ss-shelf-body { display: flex; flex-direction: column; gap: 0.25rem; border-top: 1px solid var(--ss-border-soft); padding: 0.5rem 0.875rem 0.75rem; }
.ss-shelf-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.5rem; padding: 0.25rem 0 0.375rem; }
.ss-shelf-bar-actions { display: inline-flex; flex-wrap: wrap; gap: 0.375rem; }
.ss-bin-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 21rem), 1fr)); column-gap: 1.5rem; }
.ss-bin-row { display: flex; align-items: center; gap: 0.5rem; padding: 0.375rem 0.125rem; border-bottom: 1px solid var(--ss-border-soft); min-width: 0; }
.ss-bin-row.is-inactive .ss-bin-check, .ss-bin-row.is-inactive .ss-bin-main { opacity: 0.65; }
.ss-bin-check { flex-shrink: 0; }
.ss-bin-check .e-label { font-size: 0.8125rem; font-weight: 600; color: var(--ss-fg); }
.ss-shelf-bar .e-checkbox-wrapper .e-label { font-size: 0.8125rem; font-weight: 500; }
/* Many bins each have a delete button: keep it quiet until it is pointed at or focused. */
.ss-bin-actions .ss-text-red { color: var(--ss-muted-fg); }
.ss-bin-actions .ss-btn:hover .ss-text-red, .ss-bin-actions .ss-btn:focus-visible .ss-text-red { color: var(--ss-danger); }
.ss-bin-main { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.ss-bin-desc { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }

/* Label printing bar: sticks to the bottom of the screen while anything is selected */
.ss-printbar {
    position: sticky; bottom: 0; z-index: 20;
    display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.5rem 1rem;
    margin: 0 calc(-1 * var(--ss-gutter)) -2.5rem; padding: 0.625rem var(--ss-gutter);
    background: color-mix(in srgb, var(--ss-surface) 94%, transparent);
    backdrop-filter: blur(10px); border-top: 1px solid var(--ss-border);
    box-shadow: 0 -6px 16px rgb(var(--ss-accent-rgb) / 0.06);
}
.ss-printbar-text { display: flex; flex-direction: column; gap: 0.125rem; font-size: 0.8125rem; min-width: 0; }
.ss-printbar-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; }
.ss-printbar-copies { display: inline-flex; align-items: center; gap: 0.5rem; }
.ss-printbar-copies .ss-label { font-weight: 500; white-space: nowrap; }

/* Bin range dialog */
.ss-range-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.75rem; }
.ss-range-preview {
    display: flex; flex-direction: column; gap: 0.25rem; padding: 0.625rem 0.875rem;
    border-radius: var(--ss-radius-sm); background: var(--ss-accent-soft); color: var(--ss-accent-strong);
    font-size: 0.8125rem;
}
.ss-range-preview.is-error { background: var(--ss-warn-soft); color: var(--ss-warn); }
.ss-range-codes { font-weight: 650; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.ss-range-note { font-size: 0.75rem; }

/* Roll items: groups on the left, item search and item rules on the right (stacked on phones) */
.ss-items-layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1rem; align-items: start; }
.ss-items-side { display: flex; flex-direction: column; gap: 1rem; min-width: 0; }
.ss-items-card { min-width: 0; padding-bottom: 0.5rem; }
.ss-items-card-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.5rem 1rem; padding: 1rem 1.25rem 0.5rem; }
.ss-items-card-head > div:first-child { min-width: 0; }
.ss-items-filter { flex: 0 1 14rem; min-width: 10rem; }
.ss-items-hint { margin: 0; padding: 0 1.25rem 0.5rem; }
.ss-items-pad { padding: 0 1.25rem 0.5rem; }
.ss-items-list { display: flex; flex-direction: column; padding: 0 0.75rem; }
.ss-items-row {
    display: flex; flex-wrap: wrap; align-items: center; gap: 0.375rem 0.75rem;
    padding: 0.5625rem 0.5rem; border-top: 1px solid var(--ss-border-soft); min-width: 0;
}
.ss-items-main { display: flex; flex-direction: column; gap: 0.25rem; flex: 1 1 12rem; min-width: 0; }
.ss-items-end { display: inline-flex; align-items: center; gap: 0.75rem; margin-left: auto; flex-shrink: 0; }
.ss-items-row.is-group { flex-wrap: nowrap; }
.ss-items-row.is-group .ss-items-main { flex-basis: 0; }
.ss-items-desc { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }
.ss-items-row .ss-action-row { flex-wrap: nowrap; }
.ss-items-card .ss-wh-more { margin: 0.25rem 1.25rem 0.25rem; }

@media (min-width: 1100px) {
    .ss-items-layout { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}

/* Roll labels: scan box, then the list to print */
.ss-labels-card { padding: 1.125rem 1.25rem; gap: 0.875rem; }
.ss-lot-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; counter-reset: ss-lot; }
.ss-lot-row {
    display: flex; align-items: center; gap: 0.75rem; padding: 0.625rem 0.25rem;
    border-top: 1px solid var(--ss-border-soft); min-width: 0; counter-increment: ss-lot;
}
.ss-lot-row::before {
    content: counter(ss-lot); flex-shrink: 0; width: 1.75rem; text-align: right;
    font-size: 0.75rem; font-variant-numeric: tabular-nums; color: var(--ss-muted-fg);
}
.ss-lot-main { display: flex; flex-direction: column; gap: 0.25rem; flex: 1; min-width: 0; }
.ss-lot-head { display: flex; flex-wrap: wrap; align-items: center; gap: 0.375rem 0.5rem; }
.ss-lot-number { font-size: 0.9375rem; font-weight: 700; letter-spacing: 0.02em; font-variant-numeric: tabular-nums; }
.ss-lot-item { font-weight: 500; }
.ss-labels-print {
    display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 0.5rem 1rem;
    padding-top: 0.75rem; border-top: 1px solid var(--ss-border);
}

@media (max-width: 480px) {
    .ss-wh-toolbar { padding: 0.875rem 1rem; }
    .ss-wh-field, .ss-wh-field-grow { max-width: none; flex-basis: 100%; }
    .ss-shelf-body { padding: 0.375rem 0.625rem 0.625rem; }
    .ss-range-grid { gap: 0.5rem; }
    .ss-items-card-head, .ss-items-pad, .ss-items-hint { padding-left: 1rem; padding-right: 1rem; }
    .ss-items-list { padding: 0 0.375rem; }
    .ss-items-filter { flex-basis: 100%; }
    .ss-labels-card { padding: 1rem; }
    .ss-lot-row::before { width: 1.25rem; }
}
/* ─── Warehouse: stock view, reconciliation, bin transfers, stock picker ───────
   (StockView, BinTransfers, StockPicker, StockPager, Components/Warehousing/*) */

/* Server pager */
.ss-pager { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem 1rem; flex-wrap: wrap; padding-top: 0.75rem; }
.ss-pager-info { font-size: 0.75rem; color: var(--ss-muted-fg); }
.ss-pager-buttons { display: flex; align-items: center; gap: 0.375rem; }
.ss-pager-page { font-size: 0.75rem; color: var(--ss-muted-fg); min-width: 3rem; text-align: center; font-variant-numeric: tabular-nums; }

/* Cascade picker: one column on phones, fields side by side when there is room */
.ss-picker { display: grid; grid-template-columns: 1fr; gap: 0.75rem; }
.ss-picker-field { display: flex; flex-direction: column; gap: 0.375rem; min-width: 0; }
.ss-picker-qty { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }
.ss-picker-qty .e-input-group { flex: 1 1 8rem; max-width: 12rem; }
.ss-picker-actions { display: flex; justify-content: flex-end; }
.ss-picker .ss-notice-warn { margin: 0; }
@media (min-width: 900px) {
    .ss-picker { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .ss-picker-actions, .ss-picker > .ss-notice-warn { grid-column: 1 / -1; }
}

/* Headings of the item / bin / lot views */
.ss-stock-head { padding: 1rem 1.25rem; flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.75rem; }
.ss-stock-head-main { display: flex; flex-direction: column; gap: 0.25rem; min-width: 0; }
.ss-stock-kicker { font-size: 0.6875rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: var(--ss-accent-strong); }
.ss-stock-title { font-size: 1.25rem; font-weight: 650; letter-spacing: -0.02em; overflow-wrap: anywhere; }
.ss-stock-desc { margin: 0; line-height: 1.4; }
.ss-stock-item-link { color: var(--ss-accent); text-decoration: none; }
.ss-stock-item-link:hover { text-decoration: underline; }
.ss-lot-number { font-family: ui-monospace, "Cascadia Mono", "Segoe UI Mono", Consolas, monospace; letter-spacing: 0.02em; }
.ss-stock-find { padding: 1.125rem 1.25rem; gap: 0.875rem; }
.ss-stock-empty { padding: 2rem 1.25rem; align-items: center; text-align: center; gap: 0.5rem; color: var(--ss-muted-fg); }
.ss-stock-empty p { margin: 0; }
.ss-counting {
    display: flex; align-items: center; gap: 0.5rem; margin: 0; padding: 0.625rem 0.875rem; border-radius: var(--ss-radius-sm);
    background: var(--ss-info-soft); color: var(--ss-info); font-size: 0.8125rem; line-height: 1.4;
}

/* Per-warehouse cards: app against Evo, the difference highlighted */
.ss-wh-cards { display: grid; gap: 0.75rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 17rem), 1fr)); }
.ss-wh-card { padding: 1rem 1.125rem; gap: 0.75rem; border-left: 4px solid var(--ss-border); }
.ss-wh-card.is-match { border-left-color: var(--ss-ok); }
.ss-wh-card.is-diff { border-left-color: var(--ss-warn); }
.ss-wh-card-head { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; }
.ss-wh-figures { display: grid; grid-template-columns: 1fr 1fr; gap: 0.75rem; }
.ss-wh-figure { display: flex; flex-direction: column; gap: 0.25rem; min-width: 0; }
.ss-wh-value { font-size: 1.0625rem; font-weight: 650; letter-spacing: -0.01em; font-variant-numeric: tabular-nums; }
.ss-wh-diff { display: flex; align-items: center; gap: 0.375rem; font-size: 0.8125rem; font-weight: 600; padding: 0.375rem 0.625rem; border-radius: var(--ss-radius-sm); background: var(--ss-muted); color: var(--ss-muted-fg); }
.ss-wh-diff span { display: inline-flex; align-items: center; gap: 0.375rem; }
.ss-wh-card.is-match .ss-wh-diff { background: var(--ss-ok-soft); color: var(--ss-ok-strong); }
.ss-wh-card.is-diff .ss-wh-diff { background: var(--ss-warn-soft); color: var(--ss-warn); }
.ss-lot-fact { padding: 0.875rem 1rem; gap: 0.3125rem; }

/* Responsive stock rows (bins, rolls, bin contents): stacked on phones, one row on wider screens */
.ss-stock-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.ss-stock-row { border-bottom: 1px solid var(--ss-border-soft); }
.ss-stock-row:last-child { border-bottom: 0; }
.ss-stock-link {
    display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "main end" "tags tags";
    gap: 0.375rem 0.75rem; align-items: center; padding: 0.75rem 0.25rem; color: inherit; text-decoration: none; border-radius: var(--ss-radius-sm);
}
a.ss-stock-link:hover, a.ss-stock-link:focus-visible { background: var(--ss-accent-soft); outline: none; }
.ss-stock-cell-main { grid-area: main; display: flex; flex-direction: column; gap: 0.3125rem; min-width: 0; }
.ss-stock-cell-main .ss-row-sub { overflow-wrap: anywhere; line-height: 1.35; }
.ss-stock-cell-main a.ss-row-title { color: var(--ss-fg); text-decoration: none; }
.ss-stock-cell-main a.ss-row-title:hover, .ss-stock-cell-main a.ss-row-title:focus-visible { color: var(--ss-accent); text-decoration: underline; }
.ss-stock-cell-tags { grid-area: tags; display: flex; flex-wrap: wrap; gap: 0.25rem; }
.ss-stock-cell-end { grid-area: end; display: flex; flex-direction: column; align-items: flex-end; gap: 0.25rem; font-variant-numeric: tabular-nums; white-space: nowrap; }
@media (min-width: 768px) {
    .ss-stock-link { grid-template-columns: minmax(0, 1fr) auto 9rem; grid-template-areas: "main tags end"; padding: 0.625rem 0.5rem; }
    .ss-stock-cell-tags { justify-content: flex-end; }
}

/* Lot history */
.ss-history { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.ss-history-row {
    display: flex; justify-content: space-between; gap: 0.75rem; padding: 0.75rem 0 0.75rem 0.875rem;
    border-left: 2px solid var(--ss-border); position: relative;
}
.ss-history-row::before {
    content: ""; position: absolute; left: -0.3125rem; top: 1rem; width: 0.5rem; height: 0.5rem; border-radius: 999px;
    background: var(--ss-accent); box-shadow: 0 0 0 3px var(--ss-accent-soft);
}
.ss-history-main { display: flex; flex-direction: column; gap: 0.3125rem; min-width: 0; }
.ss-history-main .ss-row-title { white-space: normal; line-height: 1.3; }
.ss-history-note { font-style: italic; line-height: 1.35; }
.ss-history-end { display: flex; flex-direction: column; align-items: flex-end; gap: 0.25rem; text-align: right; font-variant-numeric: tabular-nums; }

/* Reconciliation */
.ss-recon-filters { display: grid; grid-template-columns: 1fr; gap: 0.75rem; align-items: end; }
.ss-recon-switch { min-height: 2.375rem; }
.ss-recon-summary { display: flex; flex-wrap: wrap; gap: 0.375rem; margin-top: 0.875rem; }
.ss-recon-pill {
    display: inline-flex; align-items: baseline; gap: 0.3125rem; padding: 0.25rem 0.625rem; border-radius: 999px;
    background: var(--ss-muted); color: var(--ss-muted-fg); font-size: 0.75rem;
}
.ss-recon-pill strong { color: var(--ss-fg); font-variant-numeric: tabular-nums; }
.ss-recon-pill.is-match { background: var(--ss-ok-soft); color: var(--ss-ok-strong); }
.ss-recon-pill.is-diff { background: var(--ss-warn-soft); color: var(--ss-warn); }
.ss-recon-pill.is-match strong, .ss-recon-pill.is-diff strong { color: inherit; }
.ss-recon-diff { color: var(--ss-warn); font-weight: 650; }
.ss-recon-list { padding: 0 0.875rem; }
.ss-recon-grid { display: none; }
@media (min-width: 768px) {
    .ss-recon-list { display: none; }
    .ss-recon-grid { display: block; }
}
/* Badges holding free text (ages, counts) keep their own capitals. */
.ss-badge.ss-badge-plain { text-transform: none; }
.ss-loading-fade { opacity: 0.55; transition: opacity 0.15s; }
.ss-card .ss-counting { margin-top: 0.75rem; }
@media (min-width: 768px) {
    .ss-recon-filters { grid-template-columns: minmax(12rem, 16rem) minmax(0, 1fr) auto; }
}

/* Bin transfers (mobile first: Android handhelds with keyboard-mode scanners) */
.ss-transfer-top { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; flex-wrap: wrap; }
.ss-transfer-top .ss-tabs { max-width: 100%; }
.ss-transfer-warehouse { flex: 0 1 16rem; min-width: 12rem; }
.ss-transfer-card { padding: 1rem; gap: 0.875rem; }
.ss-transfer-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 0.375rem; }
.ss-transfer-step {
    all: unset; box-sizing: border-box; width: 100%; min-height: 3rem; cursor: pointer;
    display: flex; align-items: center; gap: 0.5rem; padding: 0.4375rem 0.625rem; border-radius: var(--ss-radius-sm);
    border: 1px solid var(--ss-border); background: var(--ss-surface);
}
.ss-transfer-step:disabled { cursor: default; opacity: 0.6; }
.ss-transfer-step:focus-visible { outline: 2px solid var(--ss-accent); outline-offset: 1px; }
.ss-transfer-step.is-done { background: var(--ss-accent-soft); border-color: transparent; }
.ss-transfer-step.is-done .ss-step { background: var(--ss-accent); color: var(--ss-accent-fg); }
.ss-transfer-step.is-current { border-color: var(--ss-accent); box-shadow: 0 0 0 2px rgb(var(--ss-accent-rgb) / 0.18); }
.ss-transfer-step-text { display: flex; flex-direction: column; gap: 0.125rem; min-width: 0; }
.ss-transfer-step-text strong { font-size: 0.8125rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ss-transfer-step .ss-step { flex-shrink: 0; }

.ss-feedback {
    display: flex; align-items: flex-start; gap: 0.5rem; padding: 0.6875rem 0.875rem; border-radius: var(--ss-radius-sm);
    font-size: 0.875rem; line-height: 1.4; font-weight: 500;
}
.ss-feedback svg { flex-shrink: 0; margin-top: 0.0625rem; }
.ss-feedback-ok { background: var(--ss-ok-soft); color: var(--ss-ok-strong); }
.ss-feedback-warn { background: var(--ss-warn-soft); color: var(--ss-warn); }
.ss-feedback-error { background: var(--ss-danger-soft); color: var(--ss-danger); }

.ss-transfer-lines { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.5rem; }
.ss-transfer-line {
    display: flex; flex-direction: column; gap: 0.5rem; padding: 0.75rem 0.875rem;
    border: 1px solid var(--ss-border); border-radius: var(--ss-radius-sm); background: var(--ss-surface);
}
.ss-transfer-line.is-invalid { border-color: var(--ss-danger); }
.ss-transfer-line-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 0.5rem; }
.ss-transfer-line-title { display: flex; flex-direction: column; gap: 0.25rem; min-width: 0; }
.ss-transfer-line-title .ss-row-sub { overflow-wrap: anywhere; line-height: 1.35; }
.ss-transfer-line-route { display: flex; align-items: center; gap: 0.375rem; flex-wrap: wrap; color: var(--ss-muted-fg); }
.ss-transfer-line-qty { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }
.ss-transfer-line-qty .e-input-group { width: 7.5rem; }
.ss-transfer-line .ss-notice-warn, .ss-transfer-line .ss-validation { margin: 0; }
.ss-transfer-tools { display: flex; flex-wrap: wrap; gap: 0.25rem; }
.ss-transfer-picker { padding: 0.875rem; border: 1px dashed var(--ss-border); border-radius: var(--ss-radius-sm); background: var(--ss-bg); }
.ss-transfer-whole { display: flex; flex-direction: column; gap: 0.375rem; padding: 0.75rem 0.875rem; border-radius: var(--ss-radius-sm); background: var(--ss-muted); }
.ss-transfer-whole .ss-chip-row { list-style: none; margin: 0.25rem 0 0; padding: 0; }
.ss-transfer-bar {
    position: sticky; bottom: 0; z-index: 5; display: flex; align-items: center; justify-content: space-between; gap: 0.5rem;
    margin: 0 -1rem -1rem; padding: 0.75rem 1rem; border-top: 1px solid var(--ss-border);
    background: color-mix(in srgb, var(--ss-surface) 94%, transparent); backdrop-filter: blur(8px);
    border-radius: 0 0 var(--ss-radius) var(--ss-radius);
}
.ss-transfer-confirm { flex: 1; min-height: 2.75rem; font-size: 0.875rem; }
@media (min-width: 640px) {
    .ss-transfer-card { padding: 1.25rem 1.375rem; }
    .ss-transfer-bar { margin: 0 -1.375rem -1.25rem; padding: 0.875rem 1.375rem; }
    .ss-transfer-confirm { flex: 0 1 auto; }
}

.ss-transfer-history { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.ss-transfer-doc { border-bottom: 1px solid var(--ss-border-soft); }
.ss-transfer-doc:last-child { border-bottom: 0; }
.ss-transfer-doc-head {
    all: unset; box-sizing: border-box; width: 100%; cursor: pointer; display: flex; align-items: center; justify-content: space-between;
    gap: 0.75rem; padding: 0.75rem 0.25rem; border-radius: var(--ss-radius-sm);
}
.ss-transfer-doc-head:hover, .ss-transfer-doc-head:focus-visible { background: var(--ss-muted); }
.ss-transfer-doc-head:focus-visible { outline: 2px solid var(--ss-accent); }
.ss-transfer-doc-head .ss-row-title { white-space: normal; line-height: 1.3; }
.ss-transfer-doc-body { padding: 0 0.25rem 0.875rem; overflow-x: auto; }

/* ═══ Warehouse: stock documents (drafts: transfers, adjustments, GRVs…) ═══
   Mobile first like the transfers: scan area and lines first, the check and the
   header beside them from 1024px, the action bar sticky at the bottom. */
.ss-draft-layout { display: grid; gap: 1.25rem; grid-template-columns: minmax(0, 1fr); align-items: start; }
.ss-draft-main, .ss-draft-side { display: flex; flex-direction: column; gap: 1.25rem; min-width: 0; }
@media (min-width: 1024px) {
    .ss-draft-layout { grid-template-columns: minmax(0, 1.7fr) minmax(19rem, 1fr); }
    .ss-draft-side { position: sticky; top: 1rem; }
}
.ss-draft-step { cursor: default; }
.ss-draft-scan .ss-transfer-step-text .ss-row-sub { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ss-draft-step-where { display: none; }
@media (min-width: 640px) { .ss-draft-step-where { display: inline; } }
.ss-draft-scan .ss-transfer-tools { margin-top: -0.25rem; }
.ss-draft-adjust-top { display: flex; align-items: stretch; gap: 0.5rem; flex-wrap: wrap; }
.ss-draft-adjust-top .ss-draft-step { flex: 1 1 12rem; width: auto; }
.ss-draft-waiting { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; flex-wrap: wrap; margin: 0; }
.ss-draft-entry {
    display: flex; flex-direction: column; gap: 0.75rem; padding: 0.875rem; border-radius: var(--ss-radius-sm);
    border: 1px solid var(--ss-accent); background: var(--ss-accent-soft);
}
.ss-draft-entry-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 0.5rem; flex-wrap: wrap; }
.ss-draft-entry-fields { display: grid; gap: 0.75rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr)); }
.ss-draft-entry .e-input-group { background: var(--ss-surface); }
.ss-draft-direction { align-self: flex-start; }
.ss-draft-direction .ss-tab { min-height: 2.5rem; padding-inline: 1rem; }
.ss-draft-reason { cursor: pointer; font: inherit; font-size: 0.8125rem; min-height: 2.25rem; border: 1px solid var(--ss-border); }
.ss-draft-reason.is-selected { background: var(--ss-accent); color: var(--ss-accent-fg); border-color: var(--ss-accent); }
.ss-draft-reason:focus-visible { outline: 2px solid var(--ss-accent); outline-offset: 1px; }
.ss-draft-pick-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.ss-draft-pick { display: flex; align-items: center; gap: 0.75rem; padding: 0.5rem 0; border-bottom: 1px solid var(--ss-border-soft); }
.ss-draft-pick:last-child { border-bottom: 0; }
.ss-draft-pick .ss-row-main { flex: 1; min-width: 0; }
.ss-draft-pick-qty { display: flex; flex-direction: column; align-items: flex-end; font-size: 0.8125rem; font-variant-numeric: tabular-nums; text-align: right; }

.ss-draft-lines-card .ss-card-content { padding-top: 0.25rem; }
.ss-draft-lines { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.625rem; }
.ss-draft-line {
    display: flex; flex-direction: column; gap: 0.5rem; padding: 0.75rem 0.875rem;
    border: 1px solid var(--ss-border); border-radius: var(--ss-radius-sm); background: var(--ss-surface);
}
.ss-draft-line.is-invalid { border-color: var(--ss-danger); }
.ss-draft-line-head { display: flex; align-items: flex-start; gap: 0.5rem; }
.ss-draft-line-head .ss-transfer-line-title { flex: 1; }
.ss-draft-line-total { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; justify-content: flex-end; font-variant-numeric: tabular-nums; }
.ss-draft-allocations { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.ss-draft-allocation {
    display: grid; align-items: center; gap: 0.375rem 0.75rem; padding: 0.5rem 0; border-top: 1px solid var(--ss-border-soft);
    grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "what remove" "route route" "qty qty" "note note";
}
.ss-draft-allocation.is-invalid .ss-draft-allocation-what { color: var(--ss-danger); }
.ss-draft-allocation-what { grid-area: what; display: flex; align-items: center; gap: 0.375rem; flex-wrap: wrap; min-width: 0; }
.ss-draft-allocation .ss-transfer-line-route { grid-area: route; }
.ss-draft-allocation-qty { grid-area: qty; display: flex; align-items: center; gap: 0.375rem; flex-wrap: wrap; font-variant-numeric: tabular-nums; }
.ss-draft-allocation-qty .e-input-group { width: 7rem; }
.ss-draft-allocation > .ss-btn-icon { grid-area: remove; }
.ss-draft-allocation-note { grid-area: note; }
@media (min-width: 640px) {
    .ss-draft-allocation { grid-template-columns: minmax(8rem, 1fr) auto auto auto; grid-template-areas: "what route qty remove" "note note note note"; }
}
.ss-draft-inline-note { margin: 0; }
.ss-draft-labels-row { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; flex-wrap: wrap; margin-top: 0.75rem; }

.ss-draft-header { padding: 1rem 1.125rem; gap: 0.75rem; }
.ss-draft-header-top { display: flex; align-items: center; gap: 0.375rem; flex-wrap: wrap; }
.ss-draft-facts { margin: 0; display: grid; gap: 0.5rem 1rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 9rem), 1fr)); }
.ss-draft-facts dt { font-size: 0.6875rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; color: var(--ss-muted-fg); }
.ss-draft-facts dd { margin: 0.125rem 0 0; font-size: 0.8125rem; display: flex; align-items: center; gap: 0.375rem; flex-wrap: wrap; }
.ss-draft-header-notes { display: flex; align-items: flex-start; justify-content: space-between; gap: 0.5rem; flex-wrap: wrap; }
.ss-draft-header-notes .ss-row-sub { display: flex; flex-direction: column; gap: 0.25rem; white-space: normal; }
.ss-draft-reference { color: var(--ss-fg); font-weight: 600; }
.ss-draft-notes { white-space: pre-line; }
.ss-draft-header-form { padding-top: 0.25rem; }
.ss-draft-timeline { margin: 0; }

.ss-draft-check .ss-card-content { padding-top: 0.25rem; }
.ss-draft-check-ok { margin: 0; display: flex; align-items: center; gap: 0.375rem; }
.ss-draft-problems { display: flex; flex-direction: column; gap: 0.5rem; }
.ss-draft-problems-title { margin: 0; display: flex; align-items: center; gap: 0.375rem; font-size: 0.8125rem; font-weight: 600; color: var(--ss-danger); }
.ss-draft-problems-title.is-warning { color: var(--ss-warn); }
.ss-draft-problems ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.375rem; }
.ss-draft-problem {
    display: flex; align-items: flex-start; gap: 0.375rem; font-size: 0.8125rem; line-height: 1.4; padding: 0.5rem 0.625rem;
    border-radius: var(--ss-radius-sm); background: var(--ss-warn-soft); color: var(--ss-warn);
}
.ss-draft-problem.is-blocking { background: var(--ss-danger-soft); color: var(--ss-danger); }
.ss-draft-problem svg { flex-shrink: 0; margin-top: 0.125rem; }
.ss-draft-checking { margin: 0; }

.ss-draft-bar-wrap { position: sticky; bottom: 0; z-index: 6; margin: 0 calc(-1 * var(--ss-gutter)) -2.5rem; }
.ss-draft-bar-wrap .ss-draft-bar { margin: 0; border-radius: 0; padding: 0.75rem var(--ss-gutter); flex-wrap: wrap; }
/* Solid: it sits under the sticky bar, over the lines scrolling past (a see-through hint let them show through on phones). */
.ss-draft-bar-hint { margin: 0; padding: 0 var(--ss-gutter) 0.625rem; background: var(--ss-surface); }
@media (min-width: 640px) {
    .ss-draft-bar-wrap .ss-draft-bar { justify-content: flex-end; }
    .ss-draft-bar-wrap .ss-draft-bar > :first-child { margin-right: auto; }
    .ss-draft-bar-hint { text-align: right; }
}

.ss-draft-posted { padding: 1rem 1.125rem; gap: 0.75rem; border-color: var(--ss-ok-soft); }
.ss-draft-posted-head { display: flex; align-items: center; gap: 0.75rem; flex-wrap: wrap; }
.ss-draft-posted-head .ss-row-main { flex: 1; min-width: 12rem; }
.ss-draft-posted-head .ss-row-sub { white-space: normal; line-height: 1.4; }

/* Phones: the filters take the whole row under the tabs (right-aligned they left an empty column); wider: beside the tabs. */
.ss-draft-filters { flex: 1 1 100%; }
.ss-draft-filters > .ss-st-filter { flex: 1 1 12rem; width: auto; }
@media (min-width: 640px) {
    .ss-draft-filters { flex: 1 1 auto; justify-content: flex-end; }
    .ss-draft-filters > .ss-st-filter { flex: 0 1 18rem; }
}
.ss-draft-empty { padding: 0.5rem 0; }
.ss-draft-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.ss-draft-list > li { border-bottom: 1px solid var(--ss-border-soft); }
.ss-draft-list > li:last-child { border-bottom: 0; }
.ss-draft-row {
    display: flex; align-items: center; gap: 0.75rem; padding: 0.75rem 0.25rem; color: inherit; text-decoration: none;
    border-radius: var(--ss-radius-sm); min-height: 3rem;
}
.ss-draft-row:hover, .ss-draft-row:focus-visible { background: var(--ss-muted); }
.ss-draft-row:focus-visible { outline: 2px solid var(--ss-accent); outline-offset: -2px; }
.ss-draft-row-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 0.3125rem; }
.ss-draft-row-title { display: flex; align-items: center; gap: 0.375rem; flex-wrap: wrap; }
.ss-draft-row-when { display: none; flex-direction: column; align-items: flex-end; font-size: 0.75rem; white-space: nowrap; }
.ss-draft-row-go { color: var(--ss-muted-fg); flex-shrink: 0; }
@media (min-width: 640px) { .ss-draft-row-when { display: flex; } }
/* ═══ Warehouse: stock takes (list, counting screen, review) ═══════════════
   Counting is mobile first: an Android handheld with a keyboard-mode scanner, used
   one-handed. Big bin, big scan box, clear feedback, large tap targets. */
.ss-st-filter { width: min(100%, 18rem); }
.ss-st-section { display: flex; flex-direction: column; gap: 0.625rem; }
.ss-st-empty { flex-direction: row; align-items: center; gap: 0.625rem; padding: 1rem 1.125rem; font-size: 0.8125rem; color: var(--ss-muted-fg); }
.ss-st-cards { display: grid; gap: 0.75rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 17.5rem), 1fr)); }
.ss-st-card { padding: 1rem 1.125rem; gap: 0.625rem; }
.ss-st-card-head { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; flex-wrap: wrap; }
.ss-st-card-number { font-size: 1rem; font-weight: 650; color: var(--ss-fg); text-decoration: none; }
.ss-st-card-number:hover, .ss-st-card-number:focus-visible { color: var(--ss-accent); text-decoration: underline; }
.ss-st-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 0.375rem 0.75rem; font-size: 0.75rem; color: var(--ss-muted-fg); }
.ss-st-progress { display: flex; flex-wrap: wrap; gap: 0.25rem 1rem; font-size: 0.8125rem; }
.ss-st-progress strong { font-variant-numeric: tabular-nums; }
.ss-st-actions { display: flex; gap: 0.5rem; flex-wrap: wrap; align-items: center; }
.ss-st-wrap { white-space: normal; line-height: 1.4; }
.ss-st-plus { color: var(--ss-ok-strong); }
.ss-st-minus { color: var(--ss-danger); }

/* Dialogs */
/* CssClass lands on the dialog and its full-screen container: size the dialog only. */
.e-dialog.ss-st-dialog { max-width: calc(100vw - 2rem); }
.ss-st-dialog-title { font-size: 0.9375rem; font-weight: 600; }
.ss-st-dialog-actions { flex-wrap: wrap; align-items: center; }
.ss-st-kinds { display: grid; gap: 0.5rem; margin: 0; padding: 0; border: 0; min-width: 0; }
.ss-st-kinds legend { padding: 0; margin-bottom: 0.4375rem; }
.ss-st-kind {
    display: flex; align-items: flex-start; gap: 0.625rem; padding: 0.75rem 0.875rem; cursor: pointer;
    border: 1px solid var(--ss-border); border-radius: 0.625rem; background: var(--ss-surface);
    transition: border-color 0.15s, background 0.15s;
}
.ss-st-kind input { margin-top: 0.125rem; accent-color: var(--ss-accent); }
.ss-st-kind.is-selected { border-color: var(--ss-accent); background: var(--ss-accent-soft); }
.ss-st-kind:focus-within { box-shadow: 0 0 0 3px rgb(var(--ss-accent-rgb) / 0.16); }
.ss-st-search { display: flex; flex-direction: column; gap: 0.4375rem; }
.ss-st-newlabel {
    display: flex; align-items: flex-start; gap: 0.5rem; padding: 0.625rem 0.75rem; border-radius: var(--ss-radius-sm);
    background: var(--ss-accent-soft); color: var(--ss-accent-strong); font-size: 0.8125rem; line-height: 1.4;
}
.ss-st-newlabel svg { flex-shrink: 0; margin-top: 0.125rem; }
.ss-st-qty-box.e-input-group input.e-input, .ss-st-qty-box input.e-input {
    font-size: 1.5rem; height: 3rem; text-align: right; font-variant-numeric: tabular-nums;
}

/* Counting screen */
.ss-st-count { width: 100%; max-width: 46rem; margin: 0 auto; gap: 0.875rem; }
.ss-st-head { display: flex; align-items: center; gap: 0.5rem; }
.ss-st-back svg { transform: rotate(180deg); }
.ss-st-title { font-size: 1.0625rem; font-weight: 650; letter-spacing: -0.015em; line-height: 1.2; }
.ss-st-count .ss-btn { min-height: 2.75rem; }
.ss-st-count .ss-btn-icon { min-width: 2.75rem; }
.ss-st-bin {
    display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 0.125rem 0.75rem;
    padding: 0.875rem 1rem; border-radius: var(--ss-radius); background: var(--ss-anchor); color: var(--ss-anchor-fg);
    box-shadow: var(--ss-shadow-md);
}
.ss-st-bin-label { font-size: 0.6875rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; color: var(--ss-anchor-muted); }
.ss-st-bin-code { font-size: 1.875rem; font-weight: 700; letter-spacing: -0.01em; line-height: 1.1; overflow-wrap: anywhere; }
.ss-st-bin-sub { font-size: 0.8125rem; color: var(--ss-anchor-muted); }
.ss-st-bin-btn { grid-column: 2; grid-row: 1 / span 3; background: transparent; color: var(--ss-anchor-fg); border-color: rgb(255 255 255 / 0.45); }
.ss-st-bin-btn:hover:not(:disabled) { background: rgb(255 255 255 / 0.12); }
.ss-st-bin.is-empty { background: var(--ss-surface); color: var(--ss-fg); border: 2px dashed var(--ss-border); box-shadow: none; }
.ss-st-bin.is-empty .ss-st-bin-label, .ss-st-bin.is-empty .ss-st-bin-sub { color: var(--ss-muted-fg); }
.ss-st-bin.is-empty .ss-st-bin-code { font-size: 1.375rem; color: var(--ss-muted-fg); }
.ss-st-bin.is-empty .ss-st-bin-btn { color: var(--ss-fg); border-color: var(--ss-border); background: var(--ss-surface); }
.ss-st-shelfbins { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.ss-st-scan .ss-scan-input { font-size: 1.125rem; min-height: 3rem; }
.ss-st-scan .ss-scan-row .ss-btn { min-height: 3rem; }
.ss-st-feedback {
    display: flex; align-items: flex-start; gap: 0.625rem; padding: 0.75rem 0.875rem; border-radius: 0.625rem;
    font-size: 0.875rem; line-height: 1.4; animation: ss-st-flash 0.35s ease-out;
}
.ss-st-feedback > svg { flex-shrink: 0; margin-top: 0.0625rem; }
.ss-st-feedback .ss-row-main { flex: 1; min-width: 0; }
.ss-st-feedback-title { font-weight: 600; overflow-wrap: anywhere; }
.ss-st-feedback-warn { display: flex; align-items: flex-start; gap: 0.375rem; font-size: 0.8125rem; }
.ss-st-feedback-warn svg { flex-shrink: 0; margin-top: 0.125rem; }
.ss-st-feedback--ok { background: var(--ss-ok-soft); color: var(--ss-ok-strong); }
.ss-st-feedback--info { background: var(--ss-accent-soft); color: var(--ss-accent-strong); }
.ss-st-feedback--warn { background: var(--ss-warn-soft); color: var(--ss-warn); }
.ss-st-feedback--error { background: var(--ss-danger-soft); color: var(--ss-danger); border: 1px solid #f8d3cf; }
@keyframes ss-st-flash { from { transform: scale(0.985); opacity: 0.6; } to { transform: none; opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .ss-st-feedback { animation: none; } }
.ss-st-item {
    display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; padding: 0.625rem 0.75rem;
    border: 1px solid var(--ss-accent); border-radius: 0.625rem; background: var(--ss-surface);
}
.ss-st-item-label { font-size: 0.6875rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: var(--ss-accent-strong); }
.ss-st-lines { list-style: none; margin: 0; padding: 0; }
.ss-st-line {
    display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: 0.25rem 0.5rem;
    padding: 0.5rem 0; border-bottom: 1px solid var(--ss-border-soft);
}
.ss-st-line:last-child { border-bottom: 0; }
.ss-st-line .ss-row-title { display: flex; align-items: center; gap: 0.375rem; flex-wrap: wrap; white-space: normal; }
.ss-st-line.is-missing { margin: 0 -0.625rem; padding-left: 0.625rem; padding-right: 0.625rem; border-radius: var(--ss-radius-sm); background: var(--ss-warn-soft); }
.ss-st-line-actions { display: flex; gap: 0.125rem; }
/* A counted line opens its quantity when tapped (the pencil does the same). */
.ss-st-line-tap {
    grid-column: 1 / 3; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 0.25rem 0.5rem;
    min-width: 0; margin: 0; padding: 0; border: 0; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer;
}
.ss-st-line-tap:disabled { cursor: default; }
.ss-st-line-tap:focus-visible { outline: 2px solid var(--ss-accent); outline-offset: 2px; border-radius: var(--ss-radius-sm); }
.ss-st-line-tap:not(:disabled):hover .ss-st-qty { color: var(--ss-accent-strong); }
.ss-st-qty { font-size: 1.0625rem; font-weight: 650; font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; }
.ss-st-line--plain .ss-st-qty { font-size: 0.875rem; font-weight: 550; }
.ss-st-bar {
    position: sticky; bottom: 0; z-index: 5; display: flex; gap: 0.5rem; padding: 0.75rem 0 0.25rem;
    background: linear-gradient(to bottom, transparent, var(--ss-bg) 35%);
}
.ss-st-bar .ss-btn { flex: 1; }

/* Review */
.ss-st-status { flex-direction: row; flex-wrap: wrap; align-items: flex-start; gap: 0.75rem 1.25rem; padding: 0.875rem 1.125rem; }
.ss-st-timeline { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.25rem; font-size: 0.8125rem; }
.ss-st-timeline .ss-text-muted { display: inline-block; min-width: 5.5rem; }
.ss-st-timeline .ss-st-expected { display: flex; flex-wrap: wrap; align-items: center; gap: 0.25rem 0.5rem; }
.ss-st-timeline .ss-st-expected .ss-row-sub { flex: 1 1 14rem; min-width: 0; }
.ss-st-tabs { align-self: flex-start; max-width: 100%; overflow-x: auto; }
.ss-st-approve { display: flex; flex-direction: column; gap: 0.5rem; padding: 0.75rem 0.875rem; border-radius: var(--ss-radius-sm); background: var(--ss-muted); }
.ss-st-approve ul { margin: 0; padding-left: 1.125rem; font-size: 0.8125rem; line-height: 1.5; }
.ss-st-approve-title { font-size: 0.75rem; font-weight: 650; text-transform: uppercase; letter-spacing: 0.05em; color: var(--ss-muted-fg); }

.ss-st-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.75rem; }
@media (min-width: 1024px) { .ss-st-stats { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; } }
/* Grids hide the item column on narrow screens; the item code then shows under the roll number. */
@media (min-width: 900px) { .ss-st-narrow-only { display: none; } }

@media (max-width: 480px) {
    .ss-st-stats .ss-stat { padding: 0.875rem; gap: 0.625rem; }
    .ss-st-stats .ss-stat-icon { width: 2rem; height: 2rem; }
    .ss-st-bin-code { font-size: 1.625rem; }
    .ss-st-head .ss-badge { display: none; }
}

/* ─── Stock take review: problems, moves, paging, background approval ───── */

.ss-label-sm { font-size: 0.75rem; }
.ss-st-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 0.75rem; padding: 0 1.25rem 0.75rem; }
.ss-st-toolbar-search { flex: 1 1 14rem; min-width: 0; max-width: 24rem; }
.ss-st-chips { display: flex; flex-wrap: wrap; gap: 0.25rem; padding: 0.25rem; border-radius: var(--ss-radius-sm); background: var(--ss-muted); max-width: 100%; }
.ss-st-chips .ss-tab { padding: 0.375rem 0.75rem; }
.ss-st-pager { padding: 0 1.25rem 0.875rem; }
.ss-st-pager .ss-pager { padding-top: 0.625rem; }

.ss-st-problems { gap: 0.625rem; padding-bottom: 1rem; border-left: 4px solid var(--ss-warn); }
.ss-st-problems.is-blocking { border-left-color: var(--ss-danger); }
.ss-st-problems .ss-card-title { display: flex; align-items: center; gap: 0.4375rem; }
.ss-st-problems.is-blocking .ss-card-title { color: var(--ss-danger); }
.ss-st-problems > p { padding: 0 1.25rem; }
.ss-st-problem-list { list-style: none; margin: 0; padding: 0 1.25rem; display: flex; flex-direction: column; gap: 0.5rem; max-height: 22rem; overflow-y: auto; }
.ss-st-problem { display: flex; align-items: flex-start; gap: 0.625rem; font-size: 0.8125rem; line-height: 1.45; }
.ss-st-problem .ss-badge { flex-shrink: 0; margin-top: 0.0625rem; }

.ss-st-moves {
    display: flex; align-items: flex-start; gap: 0.625rem; margin: 0 1.25rem 0.75rem; padding: 0.625rem 0.75rem;
    border-radius: var(--ss-radius-sm); background: var(--ss-accent-soft); color: var(--ss-accent-strong); font-size: 0.8125rem;
}
.ss-st-moves > svg { flex-shrink: 0; margin-top: 0.125rem; }
.ss-st-moves .ss-st-wrap { flex: 1; min-width: 0; }

.ss-st-approving {
    display: flex; align-items: flex-start; gap: 0.75rem; padding: 0.75rem 0.875rem; border-radius: var(--ss-radius-sm);
    background: var(--ss-accent-soft); color: var(--ss-accent-strong); font-size: 0.8125rem; line-height: 1.45;
}
.ss-st-spinner {
    flex-shrink: 0; width: 1.125rem; height: 1.125rem; margin-top: 0.0625rem; border-radius: 50%;
    border: 2px solid rgb(var(--ss-accent-rgb) / 0.25); border-top-color: var(--ss-accent); animation: ss-st-spin 0.9s linear infinite;
}
@keyframes ss-st-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .ss-st-spinner { animation-duration: 3s; } }

.ss-st-evo-changes { margin: 0.375rem 0 0; padding-left: 1.125rem; font-variant-numeric: tabular-nums; }
.ss-st-confirm { display: flex; flex-direction: column; gap: 0.5rem; }
.ss-st-confirm .ss-checkbox-row { color: var(--ss-fg); font-weight: 550; }

/* Counting: bin picker (searched on the server) and a new label's optional details */
.ss-st-binpick { display: grid; grid-template-columns: repeat(auto-fill, minmax(8.5rem, 1fr)); gap: 0.5rem; max-height: 18rem; overflow-y: auto; }
.ss-st-binpick-btn { flex-direction: column; align-items: flex-start; gap: 0.125rem; height: auto; min-height: 2.75rem; padding: 0.5rem 0.75rem; text-align: left; }
.ss-st-binpick-btn .ss-row-sub { font-weight: 400; }
.ss-st-lotdetails { display: flex; flex-direction: column; gap: 0.5rem; margin: 0; padding: 0.625rem 0.75rem; border: 1px solid var(--ss-border); border-radius: var(--ss-radius-sm); min-width: 0; }
.ss-st-lotdetails legend { padding: 0 0.25rem; }
.ss-st-lotdetails-row { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: 0.5rem; }
@media (max-width: 480px) {
    .ss-st-toolbar, .ss-st-pager { padding-left: 1rem; padding-right: 1rem; }
    .ss-st-moves { margin-left: 1rem; margin-right: 1rem; }
}

/* ── ScanBox: scans queue up while the page handles one ("2 waiting"), never dropped ── */
.ss-scan-field { position: relative; display: flex; flex: 1; min-width: 0; }
.ss-scan-field .ss-input { flex: 1; min-width: 0; width: 100%; }
.ss-scan-input.has-status { padding-right: 7rem; }
.ss-scan-status {
    position: absolute; right: 0.5rem; top: 50%; transform: translateY(-50%); pointer-events: none;
    max-width: calc(100% - 1rem); overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    font-size: 0.75rem; font-weight: 600; line-height: 1.4; color: var(--ss-accent-strong);
}
.ss-scan-status.is-shown { padding: 0.125rem 0.5rem; border-radius: 999px; background: var(--ss-accent-soft); }
@media (max-width: 479px) { .ss-scan-input.has-status { padding-right: 6rem; } }

/* ── Stock view: what the app is still to post to Evo (approved stock takes until the SDK posting) ── */
.ss-wh-waiting { color: var(--ss-info); font-weight: 550; }

/* ── Credit notes and postings ── */
/* Credit notes: the awaiting-approval notice, the editor's lines (credited, price, discount, stock back). */
.ss-credit-awaiting { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; margin: 0; }
.ss-credit-awaiting > span { flex: 1; min-width: 12rem; }

.ss-credit-head { padding: 0.875rem 1.125rem; }
.ss-credit-total { font-size: 1rem; font-variant-numeric: tabular-nums; }
.ss-credit-fields { display: grid; gap: 0.625rem 0.75rem; grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 900px) { .ss-credit-fields { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.ss-credit-fields .e-input-group { width: 100%; max-width: 9rem; }
.ss-credit-switch-row { display: flex; align-items: center; gap: 0.5rem; min-height: 2.25rem; }
.ss-credit-readonly { display: flex; flex-wrap: wrap; align-items: center; gap: 0.375rem 1.25rem; font-size: 0.8125rem; font-variant-numeric: tabular-nums; }
.ss-credit-line.is-skipped { opacity: 0.6; }
.ss-credit-back {
    display: flex; flex-direction: column; gap: 0.5rem; padding: 0.625rem 0.75rem; border-radius: var(--ss-radius-sm);
    background: var(--ss-bg); border: 1px dashed var(--ss-border);
}
.ss-credit-back .ss-draft-allocations .ss-draft-allocation:first-child { border-top: 0; }
.ss-credit-back-actions { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }
.ss-credit-suggest {
    cursor: pointer; font: inherit; font-size: 0.8125rem; min-height: 2.25rem; display: inline-flex; align-items: center; gap: 0.375rem;
    border: 1px solid var(--ss-accent); background: var(--ss-accent-soft); color: var(--ss-accent-strong);
}
.ss-credit-suggest:hover:not(:disabled) { background: var(--ss-surface); }
.ss-credit-suggest:focus-visible { outline: 2px solid var(--ss-accent); outline-offset: 1px; }
.ss-credit-suggest .ss-row-sub { color: inherit; opacity: 0.85; }
.ss-credit-nostock { display: flex; align-items: center; gap: 0.375rem; white-space: normal; }
.ss-credit-add { margin-top: 0.75rem; display: flex; flex-direction: column; gap: 0.5rem; }
/* Evo postings: the poster panel, the documents list and one document. */
.ss-posting-poster { padding: 1rem 1.125rem; gap: 0.75rem; }
.ss-posting-poster-head { display: flex; align-items: center; gap: 0.75rem; flex-wrap: wrap; }
.ss-posting-poster-head .ss-row-main { flex: 1; min-width: 12rem; }
.ss-posting-poster-head .ss-row-title { display: flex; align-items: center; gap: 0.375rem; flex-wrap: wrap; white-space: normal; }
.ss-posting-facts { grid-template-columns: repeat(auto-fit, minmax(min(100%, 8.5rem), 1fr)); }
.ss-posting-count {
    all: unset; cursor: pointer; font-weight: 650; font-variant-numeric: tabular-nums; color: var(--ss-accent-strong);
    text-decoration: underline; text-underline-offset: 2px; border-radius: 0.25rem;
}
.ss-posting-count:focus-visible { outline: 2px solid var(--ss-accent); outline-offset: 2px; }
.ss-posting-count.is-bad { color: var(--ss-danger); }
.ss-posting-staging { display: flex; flex-direction: column; gap: 0.375rem; padding-top: 0.625rem; border-top: 1px solid var(--ss-border-soft); }
.ss-posting-failures { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.25rem; font-size: 0.8125rem; }
.ss-posting-failures li { display: flex; flex-wrap: wrap; gap: 0.25rem 0.5rem; padding: 0.375rem 0.5rem; border-radius: var(--ss-radius-sm); background: var(--ss-danger-soft); color: var(--ss-danger); }
.ss-posting-filters { margin-bottom: 0.75rem; flex-wrap: wrap; gap: 0.5rem; }
.ss-posting-date { width: min(100%, 10rem); }
.ss-posting-row { all: unset; box-sizing: border-box; width: 100%; cursor: pointer; display: flex; align-items: center; gap: 0.75rem; padding: 0.75rem 0.25rem; border-radius: var(--ss-radius-sm); min-height: 3rem; }
.ss-posting-row:hover, .ss-posting-row:focus-visible { background: var(--ss-muted); }
.ss-posting-row:focus-visible { outline: 2px solid var(--ss-accent); outline-offset: -2px; }
.ss-posting-error { font-size: 0.75rem; color: var(--ss-danger); line-height: 1.4; overflow-wrap: anywhere; }
.e-dialog.ss-posting-dialog .e-dlg-content { padding-top: 0.5rem; }
.ss-posting-actions { display: flex; gap: 0.5rem; flex-wrap: wrap; }
.ss-posting-table-wrap { overflow-x: auto; margin: 0 -0.25rem; }
.ss-posting-table { width: 100%; border-collapse: collapse; font-size: 0.8125rem; }
.ss-posting-table th { text-align: left; font-size: 0.6875rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; color: var(--ss-muted-fg); padding: 0.375rem 0.5rem; border-bottom: 1px solid var(--ss-border); white-space: nowrap; }
.ss-posting-table td { padding: 0.5rem; border-bottom: 1px solid var(--ss-border-soft); vertical-align: top; }
.ss-posting-table .is-num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.ss-posting-desc { display: block; white-space: normal; max-width: 22rem; }
/* ── GRV and returns ── (the Evo source picker, goods received, packing lists, returns to supplier) */
.e-dialog.ss-src-dialog { max-height: calc(100vh - 2rem); }
.ss-src-dialog .e-dlg-content { max-height: calc(100vh - 8rem); overflow-y: auto; }
.ss-src { display: flex; flex-direction: column; gap: 0.75rem; min-width: 0; }
.ss-src-mode, .ss-src-range { align-self: flex-start; flex-wrap: wrap; }
.ss-src-filters { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.ss-src-search { flex: 1 1 14rem; min-width: 0; }
.ss-src-warehouse { flex: 0 1 14rem; min-width: 10rem; }
.ss-src-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.ss-src-list > li { border-bottom: 1px solid var(--ss-border-soft); }
.ss-src-list > li:last-child { border-bottom: 0; }
.ss-src-row {
    all: unset; box-sizing: border-box; width: 100%; cursor: pointer; display: flex; align-items: center; gap: 0.75rem;
    padding: 0.6875rem 0.25rem; min-height: 3rem; border-radius: var(--ss-radius-sm);
}
.ss-src-row:hover, .ss-src-row:focus-visible { background: var(--ss-muted); }
.ss-src-row:focus-visible { outline: 2px solid var(--ss-accent); outline-offset: -2px; }
.ss-src-row-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 0.25rem; }
.ss-src-row-title { display: flex; align-items: center; gap: 0.375rem; flex-wrap: wrap; }
.ss-src-account { overflow-wrap: anywhere; white-space: normal; }
.ss-src-empty { padding: 0.5rem 0; }
.ss-src-empty .ss-link-button { margin-left: 0.25rem; }
.ss-src-error { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; flex-wrap: wrap; margin: 0; }
.ss-src-back { align-self: flex-start; }
.ss-src-detail { display: flex; flex-direction: column; gap: 0.75rem; }
.ss-src-head { padding: 0.75rem 0.875rem; border-radius: var(--ss-radius-sm); background: var(--ss-muted); }
.ss-src-lines .ss-items-table td { vertical-align: top; }
.ss-src-line-done { color: var(--ss-muted-fg); }
.ss-src-chosen {
    display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; padding: 0.5rem 0.75rem;
    border: 1px solid var(--ss-accent); border-radius: var(--ss-radius-sm); background: var(--ss-accent-soft);
}
.ss-src-actions { display: flex; flex-direction: column; gap: 0.5rem; }
.ss-src-footer { margin-top: 0.25rem; }
@media (max-width: 639px) {
    .ss-src-lines .ss-items-table thead { display: none; }
    .ss-src-lines .ss-items-table tr {
        display: grid; grid-template-columns: 1fr 1fr; gap: 0.125rem 0.75rem; padding: 0.5rem 0; border-bottom: 1px solid var(--ss-border-soft);
    }
    .ss-src-lines .ss-items-table td { border: 0; padding: 0.125rem 0; }
    .ss-src-lines .ss-items-table td:first-child { grid-column: 1 / -1; }
    .ss-src-lines .ss-items-table td.num { text-align: left; }
    .ss-src-lines .ss-items-table td.num::before { content: attr(data-label) ": "; color: var(--ss-muted-fg); }
}

.ss-grv-top .ss-draft-step { flex: 1 1 10rem; }
.ss-grv-last-labels { display: flex; justify-content: flex-start; }
.ss-grv-line { display: flex; flex-direction: column; gap: 0.375rem; }
.ss-grv-progress { height: 0.375rem; border-radius: 999px; background: var(--ss-muted); overflow: hidden; }
.ss-grv-progress-bar { display: block; height: 100%; border-radius: inherit; background: var(--ss-accent); transition: width 0.2s ease; }
.ss-grv-progress-bar.is-full { background: var(--ss-ok); }
.ss-grv-progress-bar.is-over { background: var(--ss-danger); }
.ss-grv-line-text { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; flex-wrap: wrap; }
.ss-grv-line-text .ss-row-sub { white-space: normal; font-variant-numeric: tabular-nums; }
.ss-grv-evo { color: var(--ss-muted-fg); }
.ss-grv-evo-state { display: flex; align-items: center; gap: 0.25rem; }
.ss-grv-evo-warn { color: var(--ss-warn); }
.ss-grv-import-file { flex: 1 1 16rem; min-width: 0; }
.ss-grv-import-lines { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.25rem; font-size: 0.8125rem; }
.ss-grv-import-lines li { display: flex; justify-content: space-between; gap: 0.5rem; flex-wrap: wrap; }
.ss-grv-import-lines li.is-over, .ss-grv-import-lines li.is-over .ss-row-sub { color: var(--ss-danger); }
.ss-draft-label-batches { display: inline-flex; flex-wrap: wrap; gap: 0.375rem; }
.ss-rs-line { display: flex; flex-direction: column; gap: 0.25rem; }
.ss-rs-line .ss-row-sub { white-space: normal; }
.ss-rs-suggested .ss-card-content { padding-top: 0.25rem; }

/* ── Invoices and reservations ── */
/* The order an invoice or reservations page works on, its lines' figures, the sales order picker. Mobile first. */
.ss-inv-order { padding: 0.875rem 1.125rem; gap: 0.5rem; }
.ss-inv-order-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 0.5rem; flex-wrap: wrap; }
.ss-inv-order-head .ss-row-main { flex: 1; min-width: 12rem; display: flex; flex-direction: column; gap: 0.125rem; }
.ss-inv-order-head .ss-row-sub { white-space: normal; }
.ss-inv-totals { display: flex; gap: 0.25rem 1rem; flex-wrap: wrap; font-size: 0.8125rem; color: var(--ss-muted-fg); font-variant-numeric: tabular-nums; }
.ss-inv-totals strong { color: var(--ss-fg); }
.ss-inv-allowance-total { color: var(--ss-warn); font-weight: 600; }
.ss-inv-line.is-current { border-color: var(--ss-accent); box-shadow: 0 0 0 1px var(--ss-accent); }
.ss-inv-line.is-left-out { background: var(--ss-muted); }
.ss-inv-line .ss-draft-line-head .ss-btn { flex-shrink: 0; min-height: 2.25rem; }
.ss-inv-figures { margin: 0; display: grid; gap: 0.5rem 0.75rem; grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 640px) { .ss-inv-figures { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.ss-inv-figures dt { font-size: 0.6875rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; color: var(--ss-muted-fg); }
.ss-inv-figures dd { margin: 0.125rem 0 0; font-size: 0.9375rem; font-weight: 600; font-variant-numeric: tabular-nums; display: flex; align-items: center; gap: 0.375rem; flex-wrap: wrap; }
.ss-inv-charge { display: flex; align-items: center; gap: 0.375rem; flex-wrap: wrap; }
.ss-inv-charge .e-input-group { width: 6.5rem; }
.ss-inv-reserved, .ss-res-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.375rem; }
.ss-inv-reserved li {
    display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; font-size: 0.8125rem;
    padding: 0.375rem 0.625rem; border-radius: var(--ss-radius-sm); background: var(--ss-ok-soft); color: var(--ss-ok-strong);
}
.ss-inv-reserved li > span:first-of-type { flex: 1; min-width: 10rem; }
.ss-inv-allowance-note { margin: 0.75rem 0 0; display: flex; align-items: flex-start; gap: 0.375rem; }
.ss-inv-allowance-note svg { flex-shrink: 0; margin-top: 0.125rem; }

.ss-so-picker { display: flex; flex-direction: column; gap: 0.75rem; min-width: 0; }
.ss-so-picker-filters { display: flex; gap: 0.5rem; flex-wrap: wrap; align-items: center; }
.ss-so-picker-search { flex: 1 1 16rem; min-width: 0; }
.ss-so-picker-warehouse { flex: 0 1 13rem; min-width: 10rem; }
.ss-so-picker-period .ss-tab { min-height: 2.25rem; }
.ss-so-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; max-height: min(60vh, 32rem); overflow-y: auto; }
.ss-so-list > li { border-bottom: 1px solid var(--ss-border-soft); }
.ss-so-list > li:last-child { border-bottom: 0; }
.ss-so-row {
    display: flex; align-items: center; gap: 0.75rem; width: 100%; padding: 0.75rem 0.375rem; min-height: 3.25rem;
    border: 0; background: transparent; color: inherit; font: inherit; text-align: left; cursor: pointer; border-radius: var(--ss-radius-sm);
}
.ss-so-row:hover, .ss-so-row:focus-visible { background: var(--ss-muted); }
.ss-so-row:focus-visible { outline: 2px solid var(--ss-accent); outline-offset: -2px; }
.ss-so-row.is-selected { background: var(--ss-accent-soft); }
.ss-so-row:disabled { cursor: default; opacity: 0.6; }
.ss-so-row-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 0.25rem; }
.ss-so-row-title { display: flex; align-items: center; gap: 0.375rem; flex-wrap: wrap; }
.ss-so-row-customer { white-space: normal; }
.ss-draft-source { align-items: flex-start; }
.ss-draft-source .ss-row-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 0.125rem; }

.ss-res-page .ss-draft-scan { gap: 0.75rem; }
.ss-res-list li { display: flex; align-items: center; gap: 0.5rem 0.75rem; flex-wrap: wrap; padding: 0.5rem 0; border-top: 1px solid var(--ss-border-soft); }
.ss-res-list li:first-child { border-top: 0; }
.ss-res-list li > svg { color: var(--ss-ok); flex-shrink: 0; }
.ss-res-list .ss-row-main { flex: 1; min-width: 12rem; display: flex; flex-direction: column; gap: 0.125rem; }
.ss-res-list .ss-row-sub { white-space: normal; }
.ss-res-candidates { padding: 0.5rem 0.75rem; border-radius: var(--ss-radius-sm); background: var(--ss-muted); }
.ss-res-candidates .ss-draft-pick { flex-wrap: wrap; }
.ss-res-badge { white-space: nowrap; }
.ss-res-figure { display: inline-flex; align-items: center; gap: 0.25rem; color: var(--ss-ok-strong); font-weight: 550; }
.ss-posting-tabs .ss-tab { white-space: nowrap; }
.ss-credit-fields .ss-transfer-line-qty { flex-wrap: nowrap; }
.ss-credit-fields .ss-transfer-line-qty .e-input-group { flex: 1 1 auto; min-width: 0; }

/* ── Evo movements: what Evo moved outside the app (list per warehouse, resolve screen, importer status) ── */
.ss-em-status { flex-direction: row; align-items: flex-start; gap: 0.75rem; padding: 0.875rem 1.125rem; }
.ss-em-status .ss-row-main { display: flex; flex-direction: column; gap: 0.125rem; min-width: 0; }
.ss-em-error { font-size: 0.8125rem; color: var(--ss-danger); }
.ss-em-count { margin-left: 0.375rem; }
.ss-em-group { margin: 0.75rem 0 0.25rem; display: flex; align-items: baseline; gap: 0.5rem; flex-wrap: wrap; font-size: 0.8125rem; font-weight: 650; color: var(--ss-anchor); }
.ss-em-group:first-child { margin-top: 0; }
.ss-em-qty { font-size: 0.8125rem; font-weight: 650; font-variant-numeric: tabular-nums; }
.ss-em-qty.is-out { color: var(--ss-danger); }
.ss-em-qty.is-in { color: var(--ss-ok-strong); }
.ss-em-note { display: block; }
.ss-em-head { padding: 1rem 1.125rem; gap: 0.625rem; }
.ss-em-head-top { display: flex; align-items: center; gap: 0.375rem; flex-wrap: wrap; }
.ss-em-head-main { display: flex; align-items: baseline; justify-content: space-between; gap: 0.5rem 1rem; flex-wrap: wrap; }
.ss-em-head-main .ss-em-qty { font-size: 1rem; }
.ss-em-back { transform: rotate(180deg); }
.ss-em-bar { align-items: center; gap: 0.5rem; }
.ss-em-bar .ss-row-sub { flex: 1 1 6rem; text-align: center; }

/* ── Notifications (drop 3a): the bell, its panel, the notices page and My notifications ── */
.ss-sr-only {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden;
    clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
.ss-bell-wrap { position: relative; display: inline-flex; }
.ss-bell { position: relative; }
.ss-bell-count {
    position: absolute; top: 0.0625rem; right: 0.0625rem; transform: translate(35%, -25%);
    min-width: 1.125rem; height: 1.125rem; padding: 0 0.3125rem; border-radius: 9999px;
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--ss-spark); color: var(--ss-spark-fg);
    font-size: 0.625rem; font-weight: 700; line-height: 1; box-shadow: 0 0 0 2px var(--ss-anchor);
}
.ss-notice-backdrop { position: fixed; inset: 0; z-index: 55; background: transparent; }
.ss-notice-panel {
    position: absolute; top: calc(100% + 0.5rem); right: -0.5rem; z-index: 60;
    width: min(26rem, calc(100vw - 2 * var(--ss-gutter)));
    max-height: min(36rem, calc(100vh - 6rem)); display: flex; flex-direction: column;
    background: var(--ss-surface); color: var(--ss-fg);
    border: 1px solid var(--ss-border); border-radius: var(--ss-radius); box-shadow: var(--ss-shadow-lg);
    overflow: hidden;
}
@media (max-width: 479px) {
    .ss-notice-panel { position: fixed; top: 4.25rem; left: var(--ss-gutter); right: var(--ss-gutter); width: auto; }
}
.ss-notice-panel-head, .ss-notice-panel-foot {
    display: flex; align-items: center; justify-content: space-between; gap: 0.5rem;
    padding: 0.75rem 1rem; flex-shrink: 0;
}
.ss-notice-panel-head { border-bottom: 1px solid var(--ss-border-soft); }
.ss-notice-panel-title { margin: 0; font-size: 0.875rem; font-weight: 650; color: var(--ss-anchor); }
.ss-notice-panel:focus:not(:focus-visible) { outline: none; }
.ss-notice-panel-foot { border-top: 1px solid var(--ss-border-soft); font-size: 0.8125rem; flex-wrap: wrap; }
.ss-notice-panel-foot a { color: var(--ss-accent); text-decoration: none; font-weight: 550; }
.ss-notice-panel-foot a:hover { text-decoration: underline; }
.ss-notice-panel .ss-notice-list { overflow-y: auto; }
.ss-notice-empty { margin: 0; padding: 1.25rem 1rem; font-size: 0.8125rem; color: var(--ss-muted-fg); }
.ss-notice-error { margin: 0; padding: 0.5rem 1rem; font-size: 0.8125rem; color: var(--ss-danger); }
.ss-notice-list { list-style: none; margin: 0; padding: 0; }
.ss-notice-list li + li { border-top: 1px solid var(--ss-border-soft); }
.ss-notice-item {
    all: unset; box-sizing: border-box; width: 100%; cursor: pointer;
    display: flex; align-items: flex-start; gap: 0.625rem; padding: 0.75rem 1rem;
}
.ss-notice-item:hover { background: var(--ss-muted); }
.ss-notice-item:focus-visible { outline: 2px solid var(--ss-accent); outline-offset: -2px; }
.ss-notice-dot { flex-shrink: 0; width: 0.5rem; height: 0.5rem; margin-top: 0.375rem; border-radius: 9999px; background: transparent; }
.ss-notice-item.is-unread { background: var(--ss-accent-soft); }
.ss-notice-item.is-unread:hover { background: var(--ss-muted); }
.ss-notice-item.is-unread .ss-notice-dot { background: var(--ss-accent); }
.ss-notice-main { display: flex; flex-direction: column; gap: 0.1875rem; min-width: 0; }
.ss-notice-title { font-size: 0.8125rem; font-weight: 600; color: var(--ss-fg); overflow-wrap: anywhere; }
.ss-notice-item:not(.is-unread) .ss-notice-title { font-weight: 500; }
.ss-notice-body { font-size: 0.75rem; color: var(--ss-muted-fg); line-height: 1.4; overflow-wrap: anywhere; }
/* The bell's panel shows at most 3 lines of a notice (the notices page shows it all). */
.ss-notice-panel .ss-notice-body { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; line-clamp: 3; overflow: hidden; }
.ss-notice-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 0.25rem 0.5rem; font-size: 0.6875rem; color: var(--ss-muted-fg); }
.ss-notice-filters { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 0.75rem 1.25rem; padding: 0.875rem 1.125rem; }
.ss-notice-filter { flex: 0 1 16rem; min-width: 12rem; }
.ss-notice-page { padding: 0.25rem 0 0.75rem; gap: 0.5rem; }
.ss-notice-page .ss-pager { padding: 0 1rem; }
.ss-pref-card { padding: 1.25rem 1.375rem; gap: 0.875rem; }
.ss-pref-list { list-style: none; margin: 0; padding: 0; }
.ss-pref-list li + li { border-top: 1px solid var(--ss-border-soft); }
.ss-pref-row { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem 1rem; padding: 0.75rem 0; flex-wrap: wrap; }
.ss-pref-main { display: flex; flex-direction: column; gap: 0.1875rem; min-width: 0; flex: 1 1 18rem; }
.ss-pref-main .ss-row-sub { line-height: 1.4; white-space: normal; }
.ss-pref-mailbox { font-size: 0.75rem; color: var(--ss-info); line-height: 1.4; }
.ss-pref-choice { display: flex; align-items: center; gap: 0.625rem; flex-shrink: 0; }
.ss-pref-actions { display: flex; justify-content: flex-end; }
.ss-outbox-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 0.75rem; flex-wrap: wrap; }
.ss-outbox-figures { display: flex; flex-wrap: wrap; gap: 0.5rem 1.25rem; font-size: 0.8125rem; }
.ss-outbox-warn { color: var(--ss-warn); }
.ss-outbox-bad { color: var(--ss-danger); }
.ss-outbox-list { list-style: none; margin: 0; padding: 0; }
.ss-outbox-list li { display: flex; align-items: center; gap: 0.5rem 0.75rem; padding: 0.625rem 0; border-top: 1px solid var(--ss-border-soft); flex-wrap: wrap; }
.ss-outbox-main { display: flex; flex-direction: column; gap: 0.1875rem; flex: 1 1 18rem; min-width: 0; }
.ss-outbox-main .ss-row-sub { white-space: normal; line-height: 1.4; }
.ss-outbox-error { font-size: 0.75rem; color: var(--ss-danger); overflow-wrap: anywhere; }

/* ─── Cutting (drop 3b): supervisor board, my cutting, cutter count, short ends ─── */
.ss-cut-row { align-items: flex-start; }
.ss-cut-row:hover { background: transparent; }
.ss-cut-row.is-overdue { box-shadow: inset 3px 0 0 var(--ss-danger); }
.ss-cut-actions { display: flex; gap: 0.375rem; flex-wrap: wrap; justify-content: flex-end; flex-shrink: 0; }
.ss-cut-note { margin: 0; font-size: 0.8125rem; line-height: 1.45; overflow-wrap: anywhere; }
.ss-cut-note-back { padding: 0.5rem 0.625rem; border-radius: var(--ss-radius-sm); background: var(--ss-warn-soft); color: var(--ss-warn); }
.ss-cut-form-row { display: grid; grid-template-columns: 1fr; gap: 0.9375rem; }
@media (min-width: 480px) { .ss-cut-form-row { grid-template-columns: 1fr 1fr; } }
.ss-cut-cards { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.75rem; }
.ss-cut-card { padding: 1rem 1.125rem; gap: 0.5rem; }
.ss-cut-card.is-overdue { border-left: 3px solid var(--ss-danger); }
.ss-cut-card-head { display: flex; align-items: center; gap: 0.375rem; flex-wrap: wrap; }
.ss-cut-card-actions { display: flex; align-items: center; gap: 0.5rem 0.75rem; flex-wrap: wrap; }
.ss-cut-card-actions .ss-btn-primary { min-height: 2.75rem; padding-inline: 1.25rem; }
.ss-cut-dates { display: flex; gap: 0.5rem; flex-wrap: wrap; }
.ss-cut-dates > * { flex: 1 1 9rem; }
.ss-cut-subtitle { margin: 1rem 0 0.5rem; font-size: 0.875rem; font-weight: 600; color: var(--ss-fg); }
.ss-cut-subtitle:first-child { margin-top: 0; }
.ss-cut-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.ss-cut-table { min-width: 36rem; }
.ss-cut-table tr.is-current td { background: var(--ss-accent-soft); }
.ss-cut-table tfoot th { border-top: 1px solid var(--ss-border); color: var(--ss-fg); text-transform: none; font-size: 0.75rem; }
.ss-cut-table tfoot td { font-weight: 600; }
.ss-cut-length { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }
.ss-cut-length > :first-child { flex: 0 1 7rem; }
.ss-cut-check { width: 1.25rem; height: 1.25rem; margin-top: 0.125rem; accent-color: var(--ss-accent); flex-shrink: 0; }

/* -- Planning: reorder plan, item history panel, settings, stock reports -- */
.ss-plan-status { display: flex; flex-wrap: wrap; align-items: center; gap: 0.375rem 0.75rem; min-height: 1.25rem; }
.ss-plan-status .ss-row-sub { display: inline-flex; align-items: center; gap: 0.25rem; flex-wrap: wrap; }
.ss-plan-filters { margin-bottom: 0.75rem; }
.ss-plan-narrow { width: min(100%, 12rem); }
.ss-plan-grid .e-row { cursor: pointer; }
.ss-plan-desc { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }
.ss-plan-chips { display: flex; flex-wrap: wrap; gap: 0.25rem; }
.ss-plan-chips:empty { display: none; }
.ss-plan-num { align-items: flex-end; }
.ss-plan-num strong { font-variant-numeric: tabular-nums; }
.ss-plan-dialog .e-dlg-content { max-height: min(78vh, 900px); }
.ss-plan-facts { grid-template-columns: repeat(auto-fit, minmax(min(100%, 10rem), 1fr)); }
.ss-plan-facts dd { font-variant-numeric: tabular-nums; }
.ss-plan-suggested { font-size: 1.0625rem; color: var(--ss-anchor); }
.ss-plan-explain { border: 1px solid var(--ss-border-soft); border-radius: var(--ss-radius-sm); padding: 0.5rem 0.75rem; background: var(--ss-muted); }
.ss-plan-explain summary { cursor: pointer; }
.ss-plan-explain ul { margin: 0.375rem 0 0; padding-left: 1.125rem; display: flex; flex-direction: column; gap: 0.25rem; font-size: 0.8125rem; line-height: 1.4; }
.ss-plan-chart { display: flex; flex-direction: column; gap: 0.375rem; }
.ss-plan-tables { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 24rem), 1fr)); }
.ss-plan-tables section { display: flex; flex-direction: column; gap: 0.375rem; min-width: 0; overflow-x: auto; }
.ss-plan-table { width: 100%; border-collapse: collapse; font-size: 0.75rem; }
.ss-plan-table th { text-align: left; font-weight: 600; color: var(--ss-muted-fg); padding: 0.3125rem 0.375rem; border-bottom: 1px solid var(--ss-border); white-space: nowrap; }
.ss-plan-table td { padding: 0.3125rem 0.375rem; border-bottom: 1px solid var(--ss-border-soft); vertical-align: top; }
.ss-plan-table .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.ss-plan-table tr.is-old td { color: var(--ss-muted-fg); }
.ss-plan-table .ss-badge { margin-left: 0.25rem; }
.ss-plan-own { display: flex; flex-direction: column; gap: 0.625rem; border-top: 1px solid var(--ss-border); padding-top: 0.875rem; }
.ss-plan-own-grid, .ss-plan-settings-grid { display: grid; gap: 0.75rem 1rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr)); align-items: end; }
.ss-plan-exclude { padding-bottom: 0.375rem; }
.ss-plan-report-head { display: flex; flex-direction: column; gap: 0.625rem; margin-bottom: 0.75rem; }

/* ── Dispatch (drop 3c): list, packing, delivery, signature pad ─────────────── */
.ss-dispatch-page .ss-card { gap: 0.75rem; }
.ss-dispatch-count { margin-left: 0.375rem; font-size: 0.6875rem; padding: 0 0.375rem; }
.ss-dispatch-selected {
    display: flex; align-items: center; gap: 0.5rem 0.75rem; flex-wrap: wrap; margin-bottom: 0.5rem;
    padding: 0.625rem 0.75rem; border-radius: var(--ss-radius-sm); background: var(--ss-accent-soft); color: var(--ss-accent-strong); font-size: 0.8125rem;
}
.ss-dispatch-invoice { display: flex; align-items: center; gap: 0.75rem; padding: 0.75rem 0.25rem; }
.ss-dispatch-invoice .ss-check { width: 1.25rem; height: 1.25rem; accent-color: var(--ss-accent); flex-shrink: 0; }
.ss-dispatch-problem { color: var(--ss-danger); }
.ss-dispatch-head { padding: 1rem 1.25rem; }
.ss-dispatch-invoice-tag { white-space: nowrap; }
.ss-dispatch-invoice-tag + .ss-dispatch-invoice-tag::before { content: ", "; }
.ss-dispatch-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.5rem; grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); }
.ss-dispatch-steps li {
    display: flex; flex-direction: column; gap: 0.125rem; padding: 0.5rem 0.625rem; border-radius: var(--ss-radius-sm);
    border: 1px solid var(--ss-border-soft); background: var(--ss-muted);
}
.ss-dispatch-steps li.is-done { background: var(--ss-ok-soft); border-color: transparent; }
.ss-dispatch-steps li.is-done .ss-row-title { color: var(--ss-ok-strong); }
.ss-dispatch-steps li.is-problem { background: var(--ss-danger-soft); border-color: transparent; }
.ss-dispatch-steps li.is-problem .ss-row-title { color: var(--ss-danger); }
.ss-dispatch-steps .ss-row-sub { white-space: normal; line-height: 1.35; }
.ss-dispatch-address address { font-style: normal; display: flex; flex-direction: column; gap: 0.125rem; font-size: 0.9375rem; }
.ss-dispatch-mode { align-self: flex-start; max-width: 100%; overflow-x: auto; }
.ss-dispatch-target { max-width: 24rem; }
.ss-dispatch-actions { padding: 1rem 1.25rem; }
.ss-dispatch-group { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; margin: 0.75rem 0 0.25rem; font-size: 0.875rem; font-weight: 600; color: var(--ss-anchor); }
.ss-dispatch-group:first-child { margin-top: 0; }
.ss-dispatch-pieces { list-style: none; margin: 0; padding: 0; }
.ss-dispatch-pieces li { display: flex; align-items: center; gap: 0.5rem 0.75rem; padding: 0.5625rem 0; border-bottom: 1px solid var(--ss-border-soft); }
.ss-dispatch-pieces li:last-child { border-bottom: 0; }
.ss-dispatch-pieces .ss-row-main { flex: 1; min-width: 0; }
.ss-dispatch-pieces .ss-row-sub { white-space: normal; }
.ss-dispatch-qty { white-space: nowrap; font-size: 0.875rem; }
.ss-dispatch-package { border-top: 1px dashed var(--ss-border); padding-top: 0.25rem; }
.ss-dispatch-package:first-child { border-top: 0; }
.ss-dispatch-proof { display: flex; flex-direction: column; gap: 0.5rem; align-items: flex-start; }
.ss-dispatch-signature { max-width: min(100%, 22rem); border: 1px solid var(--ss-border-soft); border-radius: var(--ss-radius-sm); background: #ffffff; }
.ss-dispatch-photo { max-width: min(100%, 16rem); border-radius: var(--ss-radius-sm); }
.ss-dispatch-warnings { padding: 0.75rem 1.25rem; background: var(--ss-warn-soft); border-color: transparent; }
.ss-dispatch-warning-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.375rem; color: var(--ss-warn); font-size: 0.875rem; }
.ss-dispatch-warning-list li { display: flex; align-items: flex-start; gap: 0.5rem; }
.ss-dispatch-warning-list li svg { flex-shrink: 0; margin-top: 0.125rem; }
.ss-dispatch-invoice .ss-st-actions { flex-shrink: 0; }
.ss-dispatch-collect-row { list-style: none; padding: 0 0 0.75rem; }
.ss-order-dispatch a { text-decoration: none; }
.ss-sig { display: flex; flex-direction: column; gap: 0.375rem; }
.ss-sig-box {
    position: relative; width: 100%; height: clamp(10rem, 32vw, 14rem); border: 1px solid var(--ss-border);
    border-radius: var(--ss-radius-sm); background: #ffffff; overflow: hidden;
}
.ss-sig-canvas { position: absolute; inset: 0; width: 100%; height: 100%; touch-action: none; cursor: crosshair; display: block; }
.ss-sig.is-disabled .ss-sig-canvas { cursor: not-allowed; opacity: 0.6; }
.ss-sig-line { position: absolute; left: 1.25rem; right: 1.25rem; bottom: 28%; border-bottom: 1px dashed #c3ccd6; pointer-events: none; }
.ss-sig-hint { position: absolute; left: 1.25rem; bottom: calc(28% + 0.375rem); color: #6b7280; font-size: 0.875rem; pointer-events: none; }
.ss-sig-actions { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; flex-wrap: wrap; }

/* ─── Tables and grids: column groups, headers, numbers, rows ───────────── */
/* A divider separates GROUPS of columns that hold different data (Item | Supplier | quantities | suggestion), not every
   column. Mark the first column of each group: <th>/<td class="ss-col-group"> in tables, and on an SfGrid column
   CustomAttributes="@UiHelpers.ColGroup" (Syncfusion puts the class on the header and every cell of the column).
   Numbers: right-aligned columns (SfGrid TextAlign.Right, .num / .is-num cells) use tabular figures. */

th.ss-col-group, td.ss-col-group,
.e-grid .e-headercell.ss-col-group, .e-grid .e-rowcell.ss-col-group, .e-grid .e-summarycell.ss-col-group {
    border-left: 1px solid var(--ss-col-divider);
}
/* The divider runs the whole row height: keep the header text clear of it. */
.e-grid .e-headercell.ss-col-group, .e-grid .e-rowcell.ss-col-group { padding-left: 0.875rem; }

/* Tables: one header style, comfortable rows, zebra and hover. */
.ss-items-table th, .ss-plan-table th, .ss-posting-table th {
    font-size: 0.6875rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; color: var(--ss-muted-fg);
    background: var(--ss-head-bg); vertical-align: bottom;
}
.ss-items-table:not(.ss-import-table) tbody tr:nth-child(even) td, .ss-plan-table tbody tr:nth-child(even) td, .ss-posting-table tbody tr:nth-child(even) td {
    background: var(--ss-row-alt);
}
.ss-items-table:not(.ss-import-table) tbody tr:hover td, .ss-plan-table tbody tr:hover td, .ss-posting-table tbody tr:hover td { background: var(--ss-row-hover); }
.ss-items-table th.num, .ss-plan-table th.num, .ss-posting-table th.is-num { text-align: right; }
.ss-items-table .num, .ss-plan-table .num, .ss-posting-table .is-num { font-variant-numeric: tabular-nums; }
.ss-cut-table tbody tr.is-current td { background: var(--ss-accent-soft); }   /* over the zebra */

/* Syncfusion grids inside cards: a quiet header band, zebra rows, tabular figures in right-aligned columns. */
.ss-card .e-grid .e-gridheader .e-headercell { background: var(--ss-head-bg); }
.ss-card .e-grid .e-gridheader { border-bottom: 1px solid var(--ss-border); }
/* Never over a selected row (Syncfusion marks its cells e-active / e-selectionbackground). */
.ss-card .e-grid .e-row.e-altrow .e-rowcell:not(.e-active):not(.e-selectionbackground) { background: var(--ss-row-alt); }
.ss-card .e-grid .e-row:hover .e-rowcell:not(.e-active):not(.e-selectionbackground) { background: var(--ss-row-hover); }
.e-grid .e-rowcell.e-rightalign, .e-grid .e-summarycell.e-rightalign { font-variant-numeric: tabular-nums; }

/* ── Customer portal (drop 3e) ─────────────────────────────────────────── */
.ss-portal { min-height: 100vh; background: var(--ss-muted); }
.ss-portal-top .ss-brand { color: inherit; text-decoration: none; display: inline-flex; align-items: center; gap: 0.5rem; }
.ss-portal-nav { flex: 1; display: flex; flex-wrap: wrap; align-items: center; gap: 0.125rem; }
/* The portal keeps top-bar links (staff use the side menu); light on navy, like the staff top bar had. */
.ss-portal-nav .ss-nav-link {
    padding: 0.4375rem 0.875rem; font-size: 0.8125rem; font-weight: 500; border-radius: 9999px;
    color: var(--ss-anchor-muted); text-decoration: none; transition: background 0.15s, color 0.15s;
}
.ss-portal-nav .ss-nav-link:hover { color: #ffffff; background: rgb(255 255 255 / 0.08); }
.ss-portal-nav .ss-nav-link.active { color: #ffffff; background: rgb(255 255 255 / 0.14); font-weight: 600; }
.ss-portal-nav .ss-nav-link:focus-visible { outline: 2px solid #ffffff; outline-offset: 2px; }
.ss-portal-user { max-width: 16rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ss-portal-tile { display: flex; flex-direction: column; gap: 0.375rem; padding: 1.125rem 1.25rem; text-decoration: none; color: inherit; }
.ss-portal-tile:hover { border-color: var(--ss-brand, #0A7A93); }
.ss-portal-results { display: flex; flex-direction: column; max-height: 28rem; overflow-y: auto; margin-top: 0.5rem; }
.ss-portal-line { display: flex; align-items: center; gap: 0.75rem; padding: 0.5rem 0; border-bottom: 1px solid var(--ss-border-soft); }
.ss-portal-line .ss-row-main { flex: 1; min-width: 0; }
.ss-portal-qty { display: flex; align-items: center; gap: 0.375rem; width: 8.5rem; flex-shrink: 0; }
.ss-portal-filter { max-width: 22rem; }
.ss-portal-ref { max-width: 16rem; }
.ss-portal-doc { border-bottom: 1px solid var(--ss-border-soft); padding: 0.625rem 0; }
.ss-portal-doc > summary { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 0.75rem; cursor: pointer; list-style: none; }
.ss-portal-doc > summary::-webkit-details-marker { display: none; }
.ss-portal-doc-id { font-weight: 600; }
.ss-portal-doc-total { margin-left: auto; }
.ss-portal-doc-body { display: flex; flex-direction: column; gap: 0.5rem; padding: 0.625rem 0 0.25rem; }
.ss-portal-table-wrap { width: 100%; overflow-x: auto; margin: 0.5rem 0; }
.ss-portal-table { width: 100%; border-collapse: collapse; font-size: 0.875rem; }
.ss-portal-table th { text-align: left; font-weight: 600; color: var(--ss-muted-fg); padding: 0.375rem 0.5rem; border-bottom: 1px solid var(--ss-border); }
.ss-portal-table td { padding: 0.375rem 0.5rem; border-bottom: 1px solid var(--ss-border-soft); vertical-align: top; }
.ss-portal-table .ss-portal-num { text-align: right; white-space: nowrap; }
.ss-auth-card:has(.ss-quote-link) { max-width: 760px; }
.ss-quote-link { display: flex; flex-direction: column; gap: 0.75rem; }
/* Registration honeypot: off-screen for people and screen readers, still in the form for bots. */
.ss-honeypot { position: absolute; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }
.ss-account-picker { display: flex; flex-direction: column; gap: 0.5rem; }
.ss-account-chips { display: flex; flex-wrap: wrap; gap: 0.375rem; }
.ss-match { color: var(--ss-ok, #15803D); font-weight: 600; }
.ss-nomatch { color: var(--ss-muted-fg); }

/* ─── Touch screens (tablets, phones): tap targets of at least 44 px ────────── */
/* Buttons, tabs, boxes and menu entries were 25–35 px high, a slip on a warehouse tablet. Mouse screens keep the
   compact sizes. Syncfusion components get their own touch sizes through `e-bigger` on <html> (salessync.js). */
@media (pointer: coarse) {
    .ss-btn, .ss-input, .ss-usermenu-btn, .ss-sidenav-link, .ss-portal-nav .ss-nav-link { min-height: 44px; }
    .ss-btn-sm, .ss-sidenav-area-btn { min-height: 40px; }
    .ss-btn-sm { min-width: 40px; }
    .ss-btn-icon, .ss-menu-btn { min-width: 44px; min-height: 44px; }
    .ss-tab { display: inline-flex; align-items: center; min-height: 40px; box-sizing: border-box; }
}