/* ============================================================
   Suriya GPS finance — interface styles.

   Modelled on Vyapar, so the office is not learning a second visual
   language: dark navy sidebar, white top bar carrying the two big
   coloured "add" buttons, white cards on a light ground, figures in
   rupees with a round status badge beside them.

   On a phone the sidebar gives way to a bottom tab bar and a round
   "+" button, because entering from outside the office is the point.

   One stylesheet, no framework, no CDN. The content security policy
   allows styles only from this server and forbids inline ones, so
   everything the scripts need is a class in here.
   ============================================================ */

:root {
    /* Sidebar */
    --nav: #15264a;
    --nav-2: #1d3461;
    --nav-ink: #dce4f2;
    --nav-ink-dim: #8ea0c0;

    /* Actions. Blue is the default; red is reserved for a sale / new bill,
       the way Vyapar splits Add Sale from Add Purchase. */
    --primary: #1570ef;
    --primary-dark: #1059c4;
    --primary-soft: #e8f1fe;
    --sale: #e8372c;
    --sale-dark: #c92a20;
    --sale-soft: #fdeceb;

    /* Money keeps its own colours: they carry meaning, not decoration. */
    --green: #12a150;
    --green-100: #e6f6ec;
    --red: #d92d20;
    --red-100: #fdeae8;
    --amber: #b54708;
    --amber-100: #fef3e2;

    --bg: #f4f5f7;
    --panel: #ffffff;
    --panel-2: #f8f9fb;
    --ink: #1d2433;
    --ink-2: #5b6472;
    --ink-3: #8b93a3;
    --line: #e6e8ec;
    --line-2: #f0f1f4;

    --radius-lg: 14px;
    --radius: 10px;
    --radius-sm: 8px;
    --pill: 999px;

    --shadow: 0 1px 2px rgba(29, 36, 51, .05), 0 1px 8px rgba(29, 36, 51, .04);
    --shadow-lg: 0 14px 44px rgba(16, 24, 40, .24);
    --shadow-fab: 0 6px 18px rgba(21, 112, 239, .4);

    --sans: "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
    --mono: "Cascadia Mono", Consolas, "SF Mono", "Roboto Mono", monospace;

    --sidebar-w: 240px;
    --header-h: 60px;
    --tabbar-h: 62px;
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        --nav: #0e1727;
        --nav-2: #1a2942;
        --nav-ink: #d7e0ef;
        --nav-ink-dim: #7d8ba6;

        --primary: #529dff;
        --primary-dark: #7ab4ff;
        --primary-soft: #132440;
        --sale: #ff6f63;
        --sale-dark: #ff8d83;
        --sale-soft: #3a1b18;

        --green: #4ec77e;
        --green-100: #112a1c;
        --red: #f08a80;
        --red-100: #331613;
        --amber: #e0a356;
        --amber-100: #332509;

        --bg: #0d1017;
        --panel: #161a22;
        --panel-2: #1c212b;
        --ink: #e9ecf2;
        --ink-2: #a6aebd;
        --ink-3: #757d8d;
        --line: #262c37;
        --line-2: #1f242e;

        --shadow: 0 1px 2px rgba(0, 0, 0, .5), 0 2px 12px rgba(0, 0, 0, .3);
        --shadow-lg: 0 14px 46px rgba(0, 0, 0, .65);
    }
}

/* The same dark palette, chosen explicitly rather than inherited from
   the operating system. The page defaults to light. */
:root[data-theme="dark"] {
        --nav: #0e1727;
        --nav-2: #1a2942;
        --nav-ink: #d7e0ef;
        --nav-ink-dim: #7d8ba6;

        --primary: #529dff;
        --primary-dark: #7ab4ff;
        --primary-soft: #132440;
        --sale: #ff6f63;
        --sale-dark: #ff8d83;
        --sale-soft: #3a1b18;

        --green: #4ec77e;
        --green-100: #112a1c;
        --red: #f08a80;
        --red-100: #331613;
        --amber: #e0a356;
        --amber-100: #332509;

        --bg: #0d1017;
        --panel: #161a22;
        --panel-2: #1c212b;
        --ink: #e9ecf2;
        --ink-2: #a6aebd;
        --ink-3: #757d8d;
        --line: #262c37;
        --line-2: #1f242e;

        --shadow: 0 1px 2px rgba(0, 0, 0, .5), 0 2px 12px rgba(0, 0, 0, .3);
        --shadow-lg: 0 14px 46px rgba(0, 0, 0, .65);
        color-scheme: dark;
}


* { box-sizing: border-box; }

html, body { margin: 0; height: 100%; }

body {
    background: var(--bg);
    color: var(--ink);
    font: 14px/1.5 var(--sans);
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 { margin: 0; font-weight: 650; letter-spacing: -.01em; }
a { color: var(--primary); }
button { font: inherit; }
[hidden] { display: none !important; }

.mono { font-family: var(--mono); font-size: .94em; }
.num { font-family: var(--mono); font-variant-numeric: tabular-nums; text-align: right; }
.pos { color: var(--green); }
.neg { color: var(--red); }
.muted { color: var(--ink-3); }
.small { font-size: 12px; }
.nowrap { white-space: nowrap; }
.grow { flex: 1; }
.center { text-align: center; }
.right { text-align: right; }

/* ---------------------------------------------------------- sign in */
.gate {
    min-height: 100%;
    display: grid;
    place-items: center;
    padding: 24px 18px;
    background:
        radial-gradient(900px 420px at 50% -10%, var(--primary-soft), transparent 70%),
        var(--bg);
}

.gate-card {
    width: 100%;
    max-width: 404px;
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    overflow: hidden;
}

.gate-head {
    padding: 24px 26px 20px;
    background: var(--nav);
    color: #fff;
}

.gate-head h1 { font-size: 17px; }
.gate-head p { margin: 5px 0 0; font-size: 12px; color: var(--nav-ink-dim); }

.gate-body { padding: 22px 26px 26px; }
.gate-body .field { margin-bottom: 14px; }
.gate-foot {
    margin-top: 18px;
    padding-top: 15px;
    border-top: 1px solid var(--line-2);
    font-size: 12px;
    color: var(--ink-3);
    text-align: center;
}

/* ---------------------------------------------------------- shell */
.shell {
    display: grid;
    grid-template-columns: var(--sidebar-w) 1fr;
    grid-template-rows: var(--header-h) 1fr;
    grid-template-areas: "brand header" "nav main";
    height: 100%;
}

.brand {
    grid-area: brand;
    background: var(--nav);
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 0 18px;
}

.brand strong { font-size: 13px; color: #fff; letter-spacing: .01em; }
.brand span { font-size: 11px; color: var(--nav-ink-dim); }

.topbar {
    grid-area: header;
    background: var(--panel);
    border-bottom: 1px solid var(--line);
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 0 18px;
}

.topbar h2 {
    font-size: 16px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    flex: 0 0 auto;
    max-width: 240px;
}
.topbar .sep { width: 1px; height: 26px; background: var(--line); }
.topbar .grow { display: none; }

/* The transaction search Vyapar keeps in the top bar. Submitting it opens
   the ledger already filtered, which is where you were heading anyway. */
.topbar-search {
    flex: 1 1 120px;
    min-width: 0;
    max-width: 340px;
    margin: 0 6px 0 10px;
    /* It does the pushing, so the spacer div is not needed here. */
    margin-right: auto;
}
.topbar-search input {
    width: 100%;
    padding: 8px 12px 8px 32px;
    border-radius: var(--pill);
    background: var(--panel-2);
    border: 1px solid var(--line);
    font-size: 13px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238b93a3' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M20 20l-3.5-3.5'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: 10px center;
    background-size: 15px 15px;
}

.who { display: flex; align-items: center; gap: 10px; }
.avatar {
    width: 32px; height: 32px;
    border-radius: 50%;
    background: var(--primary);
    color: #fff;
    display: grid; place-items: center;
    font-size: 12px; font-weight: 700;
}
.who-text { line-height: 1.2; }
.who-text b { font-size: 13px; }
.who-text span { display: block; font-size: 11px; color: var(--ink-3); }

/* ---- sidebar ---- */
nav.side {
    grid-area: nav;
    background: var(--nav);
    padding: 12px 10px 24px;
    overflow-y: auto;
}

nav.side::-webkit-scrollbar { width: 8px; }
nav.side::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, .14);
    border-radius: 8px;
}

/* A group header folds its section away. Entering things stays open; the
   registers stay shut until somebody wants one. */
nav.side button.group {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 12px 0 2px;
    padding: 7px 10px;
    border: 0;
    border-radius: var(--radius-sm);
    background: transparent;
    color: rgba(255, 255, 255, .38);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .11em;
    text-transform: uppercase;
    text-align: left;
    cursor: pointer;
}
nav.side button.group:hover { background: rgba(255, 255, 255, .06); color: #fff; }
nav.side button.group .caret {
    font-size: 15px;
    line-height: 1;
    transition: transform .15s;
}
nav.side button.group[aria-expanded="true"] .caret { transform: rotate(90deg); }
nav.side .group-items { display: block; }

nav.side button {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 10px 11px;
    margin-bottom: 1px;
    border: 0;
    border-radius: var(--radius-sm);
    background: transparent;
    color: var(--nav-ink);
    font-size: 13.5px;
    text-align: left;
    cursor: pointer;
}

nav.side button:hover { background: rgba(255, 255, 255, .07); color: #fff; }
nav.side button[aria-current="page"] {
    background: var(--nav-2);
    color: #fff;
    font-weight: 650;
}
nav.side button .ico {
    width: 20px;
    text-align: center;
    font-size: 14px;
    opacity: .85;
}
nav.side button[aria-current="page"] .ico { opacity: 1; }
nav.side button kbd { margin-left: auto; }

main {
    grid-area: main;
    overflow-y: auto;
    padding: 18px 20px 70px;
}

.bottom-nav { display: none; }
.fab { display: none; }

/* ---------------------------------------------------------- buttons */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding: 9px 16px;
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    background: var(--panel);
    color: var(--ink);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    transition: background .12s, border-color .12s, transform .06s;
}

.btn:hover:not(:disabled) { background: var(--panel-2); border-color: var(--ink-3); }
.btn:active:not(:disabled) { transform: translateY(1px); }
.btn:disabled { opacity: .5; cursor: not-allowed; }

.btn.primary {
    background: var(--primary);
    border-color: var(--primary);
    color: #fff;
}
.btn.primary:hover:not(:disabled) {
    background: var(--primary-dark);
    border-color: var(--primary-dark);
}

.btn.sale { background: var(--sale); border-color: var(--sale); color: #fff; }
.btn.sale:hover:not(:disabled) { background: var(--sale-dark); border-color: var(--sale-dark); }

.btn.store { background: var(--green); border-color: var(--green); color: #fff; }
.btn.store:hover:not(:disabled) { filter: brightness(1.08); }

.btn.danger { background: var(--red); border-color: var(--red); color: #fff; }
.btn.danger:hover:not(:disabled) { filter: brightness(1.08); }
.btn.ghost { background: transparent; border-color: transparent; color: var(--primary); }
.btn.ghost:hover:not(:disabled) { background: var(--primary-soft); }
.btn.sm { padding: 6px 11px; font-size: 12px; }
.btn.block { width: 100%; padding: 11px; }
.btn.round {
    width: 34px; height: 34px;
    padding: 0;
    border-radius: 50%;
    background: var(--primary-soft);
    border-color: transparent;
    color: var(--primary);
    font-size: 17px;
}
.btn.round:hover:not(:disabled) { background: var(--primary); color: #fff; }

kbd {
    font: 600 10px var(--mono);
    padding: 2px 5px;
    border-radius: 5px;
    background: rgba(255, 255, 255, .12);
    color: inherit;
    opacity: .7;
}

/* ---------------------------------------------------------- cards */
.card {
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    margin-bottom: 14px;
    overflow: hidden;
}

.card > header {
    padding: 14px 16px;
    border-bottom: 1px solid var(--line-2);
    display: flex;
    align-items: center;
    gap: 10px;
}

.card > header h4 {
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .02em;
    color: var(--ink);
}
.card > header .actions { margin-left: auto; display: flex; gap: 7px; flex-wrap: wrap; }
.card .body { padding: 16px; }
.card .body.tight { padding: 0; }

/* ----------------------------------------------- headline figures */
.tiles {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    gap: 12px;
    margin-bottom: 14px;
}

.tile {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 16px;
    box-shadow: var(--shadow);
}

.tile .tile-main { flex: 1; min-width: 0; }

.tile .label {
    font-size: 12.5px;
    font-weight: 600;
    color: var(--ink-2);
}

.tile .value {
    margin-top: 6px;
    font: 650 23px/1.2 var(--sans);
    font-variant-numeric: tabular-nums;
    letter-spacing: -.02em;
    word-break: break-word;
}

.tile .note { margin-top: 5px; font-size: 12px; color: var(--ink-3); }

/* The round status badge Vyapar puts beside receivable and payable. */
.tile .badge {
    flex: none;
    width: 38px; height: 38px;
    display: grid; place-items: center;
    border-radius: 50%;
    background: var(--panel-2);
    color: var(--ink-2);
    font-size: 16px;
    font-weight: 700;
}

.tile.good .value { color: var(--green); }
.tile.good .badge { background: var(--green-100); color: var(--green); }
.tile.bad .value { color: var(--red); }
.tile.bad .badge { background: var(--red-100); color: var(--red); }
.tile.warn .value { color: var(--amber); }
.tile.warn .badge { background: var(--amber-100); color: var(--amber); }
.tile.info .badge { background: var(--primary-soft); color: var(--primary); }

/* ------------------------------------------- quick links / actions */
.quick-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: 10px;
}

.quick-item {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 14px 15px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--panel);
    color: var(--ink);
    font-size: 13.5px;
    font-weight: 600;
    text-align: left;
    cursor: pointer;
    transition: border-color .12s, box-shadow .12s, transform .06s;
}
.quick-item:hover { border-color: var(--primary); box-shadow: var(--shadow); }
.quick-item:active { transform: translateY(1px); }
.quick-item .ico {
    flex: none;
    width: 36px; height: 36px;
    display: grid; place-items: center;
    border-radius: 50%;
    background: var(--primary-soft);
    color: var(--primary);
    font-size: 16px;
}
.quick-item.sale .ico { background: var(--sale-soft); color: var(--sale); }
.quick-item.good .ico { background: var(--green-100); color: var(--green); }
.quick-item.warn .ico { background: var(--amber-100); color: var(--amber); }
.quick-item .qtext { flex: 1; min-width: 0; }
.quick-item .keys {
    display: block;
    font-size: 10.5px;
    font-weight: 500;
    color: var(--ink-3);
    margin-top: 2px;
}
.quick-item .chev { color: var(--primary); font-size: 15px; }

/* ---------------------------------------------------------- forms */
.field { display: block; margin-bottom: 2px; }
.field > label {
    display: block;
    margin-bottom: 6px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: var(--ink-2);
}

.field .hint { margin-top: 5px; font-size: 11.5px; color: var(--ink-3); }

input[type=text], input[type=password], input[type=number], input[type=date],
input[type=time], select, textarea {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    background: var(--panel);
    color: var(--ink);
    font: inherit;
}

input:focus, select:focus, textarea:focus {
    outline: 3px solid color-mix(in srgb, var(--primary) 22%, transparent);
    outline-offset: 0;
    border-color: var(--primary);
}

input:disabled, textarea:disabled, select:disabled {
    background: var(--line-2);
    color: var(--ink-3);
    cursor: not-allowed;
}

input.mono, textarea.mono { font-family: var(--mono); }
textarea { min-height: 72px; resize: vertical; }

.grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: 13px;
}
.grid.two { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.span-2 { grid-column: span 2; }
.span-all { grid-column: 1 / -1; }

.check {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 11px 13px;
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    background: var(--panel-2);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    user-select: none;
}
.check input { width: 17px; height: 17px; accent-color: var(--primary); }

.seg {
    display: inline-flex;
    width: 100%;
    max-width: 420px;
    padding: 3px;
    border-radius: var(--pill);
    background: var(--panel-2);
    border: 1px solid var(--line);
}
.seg button {
    flex: 1;
    padding: 9px 16px;
    border: 0;
    border-radius: var(--pill);
    background: transparent;
    color: var(--ink-2);
    font-size: 12.5px;
    font-weight: 700;
    letter-spacing: .02em;
    cursor: pointer;
    transition: background .14s, color .14s;
}
.seg button[aria-pressed="true"] { background: var(--primary); color: #fff; }
/* Direction keeps red and green: on a ledger those two mean minus and plus. */
.seg button.sent[aria-pressed="true"] { background: var(--red); color: #fff; }
.seg button.recv[aria-pressed="true"] { background: var(--green); color: #fff; }

.form-foot {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 14px 16px;
    border-top: 1px solid var(--line-2);
    background: var(--panel-2);
    flex-wrap: wrap;
}
.form-foot .spacer { flex: 1; }

/* ------------------------------------------------------ live readouts */
.readout {
    display: flex;
    flex-wrap: wrap;
    gap: 12px 26px;
    padding: 14px 16px;
    border-radius: var(--radius);
    background: var(--primary-soft);
    border: 1px solid color-mix(in srgb, var(--primary) 22%, transparent);
}
.readout div { line-height: 1.3; }
.readout .k {
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--ink-2);
}
.readout .v {
    font: 650 18px var(--mono);
    font-variant-numeric: tabular-nums;
    color: var(--ink);
}

.banner {
    padding: 12px 14px;
    border-radius: var(--radius);
    border: 1px solid;
    font-size: 13px;
    line-height: 1.45;
}
.banner.info { background: var(--primary-soft); border-color: color-mix(in srgb, var(--primary) 28%, transparent); color: var(--primary-dark); }
.banner.good { background: var(--green-100); border-color: color-mix(in srgb, var(--green) 28%, transparent); color: var(--green); }
.banner.bad { background: var(--red-100); border-color: color-mix(in srgb, var(--red) 28%, transparent); color: var(--red); }
.banner.warn { background: var(--amber-100); border-color: color-mix(in srgb, var(--amber) 32%, transparent); color: var(--amber); }
.banner.plain { background: var(--panel-2); border-color: var(--line); color: var(--ink-2); }
.banner b { font-weight: 750; }

/* ---------------------------------------------------------- tables */
.table-wrap { overflow-x: auto; }

table.grid-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    font-size: 13px;
}

table.grid-table th {
    position: sticky;
    top: 0;
    z-index: 1;
    background: var(--panel-2);
    color: var(--ink-2);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
    text-align: left;
    padding: 11px;
    white-space: nowrap;
    border-bottom: 1px solid var(--line);
}

table.grid-table th.num, table.grid-table td.num { text-align: right; }
table.grid-table td {
    padding: 11px;
    border-bottom: 1px solid var(--line-2);
    vertical-align: middle;
    /* Dates, vouchers and amounts must never break across lines. Columns
       that hold prose opt back in with .wrap below. */
    white-space: nowrap;
}
table.grid-table tbody tr:hover { background: var(--primary-soft); }
table.grid-table tbody tr.clickable { cursor: pointer; }
table.grid-table tfoot td {
    padding: 11px;
    font-weight: 700;
    background: var(--panel-2);
    border-top: 1px solid var(--line);
}
table.grid-table td.wrap { white-space: normal; min-width: 180px; }

.pill {
    display: inline-block;
    padding: 3px 9px;
    border-radius: var(--pill);
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: .04em;
    white-space: nowrap;
}
.pill.stock { background: var(--primary-soft); color: var(--primary); }
.pill.delivered { background: var(--green-100); color: var(--green); }
.pill.service { background: var(--amber-100); color: var(--amber); }
.pill.sent { background: var(--red-100); color: var(--red); }
.pill.recv { background: var(--green-100); color: var(--green); }
.pill.in-warranty { background: var(--green-100); color: var(--green); }
.pill.out-warranty { background: var(--red-100); color: var(--red); }
.pill.none { background: var(--line-2); color: var(--ink-3); }
.pill.admin { background: var(--nav); color: #fff; }
.pill.accounts { background: var(--primary-soft); color: var(--primary); }
.pill.engineer { background: var(--amber-100); color: var(--amber); }
.pill.editor { background: var(--primary-soft); color: var(--primary); }
.pill.viewer { background: var(--line-2); color: var(--ink-2); }

.filters {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: flex-end;
    padding: 14px 16px;
    border-bottom: 1px solid var(--line-2);
}
.filters .field { margin: 0; min-width: 130px; }
.filters .field.wide { min-width: 220px; flex: 1; }

.pager {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    border-top: 1px solid var(--line-2);
    font-size: 12.5px;
    color: var(--ink-2);
}
.pager .spacer { flex: 1; }

.empty {
    padding: 44px 20px;
    text-align: center;
    color: var(--ink-3);
}
.empty .big {
    width: 46px; height: 46px;
    margin: 0 auto 12px;
    display: grid; place-items: center;
    border-radius: 50%;
    background: var(--panel-2);
    font-size: 20px;
}

/* ---------------------------------------------------------- modal */
.modal-back {
    position: fixed;
    inset: 0;
    background: rgba(16, 24, 40, .5);
    display: grid;
    place-items: center;
    padding: 20px;
    z-index: 60;
    overflow-y: auto;
}

.modal {
    width: 100%;
    max-width: 560px;
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    max-height: calc(100vh - 40px);
    display: flex;
    flex-direction: column;
}
.modal.wide { max-width: 900px; }
.modal > header {
    padding: 16px 18px;
    border-bottom: 1px solid var(--line-2);
    display: flex;
    align-items: center;
    gap: 10px;
}
.modal > header h4 { font-size: 15px; }
.modal > header .close {
    margin-left: auto;
    border: 0;
    background: var(--panel-2);
    color: var(--ink-2);
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
    width: 30px; height: 30px;
    border-radius: 50%;
}
.modal > header .close:hover { background: var(--line); color: var(--ink); }
.modal .body { padding: 18px; overflow-y: auto; }
.modal .foot {
    padding: 14px 18px;
    border-top: 1px solid var(--line-2);
    background: var(--panel-2);
    display: flex;
    gap: 9px;
}
.modal .foot .spacer { flex: 1; }

/* ---------------------------------------------------------- toasts */
.toasts {
    position: fixed;
    right: 18px;
    bottom: 18px;
    z-index: 100;
    display: flex;
    flex-direction: column;
    gap: 9px;
    max-width: 380px;
}

.toast {
    background: var(--panel);
    border: 1px solid var(--line);
    border-left: 4px solid var(--primary);
    border-radius: var(--radius);
    box-shadow: var(--shadow-lg);
    padding: 12px 14px;
    font-size: 13px;
    animation: slide-in .16s ease-out;
}
.toast.good { border-left-color: var(--green); }
.toast.bad { border-left-color: var(--red); }
.toast.warn { border-left-color: var(--amber); }
.toast b { display: block; margin-bottom: 3px; }
.toast .detail { color: var(--ink-2); line-height: 1.4; }
.toast.going { opacity: 0; transition: opacity .25s; }

@keyframes slide-in {
    from { opacity: 0; transform: translateX(16px); }
    to { opacity: 1; transform: none; }
}

/* ---------------------------------------------------------- misc */
.kv { display: grid; grid-template-columns: max-content 1fr; gap: 9px 18px; font-size: 13px; }
.kv dt { color: var(--ink-3); font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; }
.kv dd { margin: 0; }

.chart-svg { width: 100%; height: 150px; display: block; }
.chart-svg rect.billed { fill: var(--primary); }
.chart-svg rect.received { fill: var(--green); }
.chart-svg line.axis { stroke: var(--line); stroke-width: 1; }
.chart-svg text { fill: var(--ink-3); font: 9px var(--sans); }
.chart-legend { display: flex; gap: 18px; margin-top: 10px; font-size: 12px; color: var(--ink-2); }
.chart-legend span::before {
    content: "";
    display: inline-block;
    width: 10px; height: 10px;
    border-radius: 3px;
    margin-right: 7px;
    background: var(--primary);
}
.chart-legend span.paid::before { background: var(--green); }

.spinner {
    width: 18px; height: 18px;
    border: 2px solid var(--line);
    border-top-color: var(--primary);
    border-radius: 50%;
    animation: spin .7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

.loading { display: flex; align-items: center; gap: 10px; padding: 34px; color: var(--ink-3); justify-content: center; }

.copy-box {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 12px 14px;
    border: 1px dashed var(--primary);
    border-radius: var(--radius);
    background: var(--primary-soft);
    font-family: var(--mono);
    font-size: 14px;
    word-break: break-all;
}

/* ---------------------------------------------------------- utilities
   Spacing and flex helpers, so no script has to set a style attribute.
   The content security policy forbids inline styles, which is what keeps
   an injected tag from being able to dress itself up as the real UI. */
.mt-xs { margin-top: 4px; }
.mt-sm { margin-top: 6px; }
.mt { margin-top: 12px; }
.mt-md { margin-top: 14px; }
.mt-lg { margin-top: 16px; }
.mt-xl { margin-top: 18px; }
.mb { margin-bottom: 12px; }
.mb-md { margin-bottom: 14px; }
.my-md { margin: 14px 0; }
.flush { margin: 0; line-height: 1.55; }
.note-top { margin: 12px 0 0; }
.sub-head { margin: 18px 0 8px; font-size: 13px; }
.summary-bar { margin: 14px 16px; }
.summary-bar.flush-x { margin: 0 0 14px; }
.row { display: flex; gap: 9px; flex-wrap: wrap; }
.row.center-y { align-items: center; }
.row.tight { gap: 5px; flex-wrap: nowrap; }

/* ============================================================
   Phone and tablet. The sidebar gives way to a bottom tab bar and
   a round "+" button, which is how this gets used away from a desk.
   ============================================================ */
@media (max-width: 880px) {
    .shell {
        grid-template-columns: 1fr;
        grid-template-rows: var(--header-h) 1fr;
        grid-template-areas: "header" "main";
    }
    .brand { display: none; }
    nav.side { display: none; }

    .topbar { gap: 8px; }
    .topbar h2 { display: block; font-size: 15px; flex: 1; }
    .topbar .grow { display: none; }
    .topbar .sep { display: none; }
    .topbar .who-text { display: none; }
    .topbar #btn-signout { display: none; }
    .topbar .topbar-add { display: none; }
    .topbar-search { display: none; }

    main { padding: 14px 14px calc(var(--tabbar-h) + 26px); }

    .bottom-nav {
        display: flex;
        position: fixed;
        left: 0; right: 0; bottom: 0;
        z-index: 40;
        height: calc(var(--tabbar-h) + env(safe-area-inset-bottom, 0px));
        padding-bottom: env(safe-area-inset-bottom, 0px);
        background: var(--panel);
        border-top: 1px solid var(--line);
    }
    .bottom-nav button {
        flex: 1;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 3px;
        border: 0;
        background: transparent;
        color: var(--ink-3);
        font-size: 10px;
        font-weight: 600;
        cursor: pointer;
        padding: 0 2px;
    }
    .bottom-nav button .ico { font-size: 17px; line-height: 1; }
    .bottom-nav button[aria-current="page"] { color: var(--primary); }

    .fab {
        display: grid;
        place-items: center;
        position: fixed;
        right: 16px;
        bottom: calc(var(--tabbar-h) + 16px + env(safe-area-inset-bottom, 0px));
        z-index: 45;
        width: 56px; height: 56px;
        border: 0;
        border-radius: 50%;
        background: var(--primary);
        color: #fff;
        font-size: 28px;
        line-height: 1;
        box-shadow: var(--shadow-fab);
        cursor: pointer;
    }
    .fab:active { transform: translateY(1px); }

    .toasts { left: 14px; right: 14px; max-width: none;
              bottom: calc(var(--tabbar-h) + 80px); }
}

@media (max-width: 560px) {
    .tiles { grid-template-columns: 1fr; gap: 10px; }
    .tile { padding: 13px 14px; }
    .tile .value { font-size: 21px; }
    .grid, .grid.two { grid-template-columns: 1fr; }
    .quick-grid { grid-template-columns: 1fr; }
    .filters { padding: 12px; }
    .filters .field, .filters .field.wide { min-width: 0; width: 100%; }
    .card > header { padding: 12px; }
    .card .body { padding: 13px; }
    .modal { max-width: none; }
    .modal .body { padding: 14px; }
    .modal-back { padding: 12px; }
    .form-foot { padding: 12px; }
    .form-foot .btn { flex: 1; }
    .readout { gap: 10px 18px; padding: 12px; }
    .summary-bar { margin: 12px; }
}

@media print {
    nav.side, .brand, .topbar, .filters, .pager, .actions, .toasts,
    .bottom-nav, .fab { display: none !important; }
    .shell { display: block; }
    main { overflow: visible; padding: 0; }
    .card { box-shadow: none; break-inside: avoid; }
    table.grid-table th {
        background: #eee !important;
        color: #000 !important;
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }
}

/* ---------------------------------------------------- challan lines
   One block per item on a delivery challan. The serial box only opens
   for lines that are tracked unit by unit. */
.line-items { display: flex; flex-direction: column; gap: 10px; }

.line-item {
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--panel-2);
    padding: 12px;
}

.line-head {
    display: flex;
    align-items: center;
    gap: 9px;
    margin-bottom: 11px;
}

.line-no {
    flex: none;
    width: 24px; height: 24px;
    display: grid; place-items: center;
    border-radius: 50%;
    background: var(--primary-soft);
    color: var(--primary);
    font: 700 11px var(--sans);
}

.line-name {
    font-size: 12.5px;
    font-weight: 600;
    color: var(--ink-2);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.line-total {
    margin-left: auto;
    font: 650 15px var(--mono);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.line-remove {
    flex: none;
    width: 28px; height: 28px;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: var(--ink-3);
    font-size: 17px;
    line-height: 1;
    cursor: pointer;
}
.line-remove:hover { background: var(--red-100); color: var(--red); }
.line-remove:disabled { opacity: .3; cursor: not-allowed; }

.line-grid {
    display: grid;
    grid-template-columns: 2.2fr 1fr 1.2fr;
    gap: 10px;
}

.serial-box {
    margin-top: 11px;
    padding-top: 11px;
    border-top: 1px dashed var(--line);
    display: grid;
    grid-template-columns: 1fr 2fr;
    gap: 10px;
}

@media (max-width: 560px) {
    .line-grid, .serial-box { grid-template-columns: 1fr; }
}

/* ============================================================
   The delivery challan as a document.

   This is the copy that travels with the goods and comes back signed,
   so it is laid out for paper first: A4, black on white, no shell
   furniture, and the signature block kept with the table.
   ============================================================ */
.doc-wrap {
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: 22px;
    max-width: 820px;
    margin: 0 auto 14px;
}

.doc-head {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    padding-bottom: 14px;
    border-bottom: 2px solid var(--ink);
}

.doc-head .firm { flex: 1; min-width: 0; }
.doc-head .firm b { display: block; font-size: 17px; letter-spacing: .01em; }
.doc-head .firm span { font-size: 12px; color: var(--ink-2); }

.doc-title {
    text-align: right;
    font-size: 15px;
    font-weight: 750;
    letter-spacing: .14em;
    text-transform: uppercase;
    white-space: nowrap;
}
.doc-title small {
    display: block;
    margin-top: 3px;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: .08em;
    color: var(--ink-3);
}

.doc-meta {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px 24px;
    padding: 14px 0;
    border-bottom: 1px solid var(--line);
}
.doc-meta .block { min-width: 0; }
.doc-meta .k {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--ink-3);
}
.doc-meta .v { font-size: 13.5px; font-weight: 600; margin-top: 2px; }
.doc-meta .v.mono { font-family: var(--mono); }

table.doc-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 14px;
    font-size: 13px;
}
table.doc-table th {
    text-align: left;
    padding: 8px 9px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .07em;
    text-transform: uppercase;
    color: var(--ink-2);
    border-bottom: 1.5px solid var(--ink-3);
    white-space: nowrap;
}
table.doc-table td {
    padding: 9px;
    border-bottom: 1px solid var(--line);
    vertical-align: top;
}
table.doc-table th.num, table.doc-table td.num {
    text-align: right;
    font-variant-numeric: tabular-nums;
}
table.doc-table tfoot td {
    padding: 10px 9px;
    font-weight: 750;
    border-top: 1.5px solid var(--ink);
    border-bottom: 0;
}
.doc-serials {
    margin-top: 5px;
    font: 11px var(--mono);
    color: var(--ink-2);
    line-height: 1.6;
    word-break: break-all;
}
.doc-serials b {
    font-family: var(--sans);
    font-size: 9.5px;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--ink-3);
}

.doc-note {
    margin-top: 14px;
    padding: 10px 12px;
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    font-size: 12.5px;
    color: var(--ink-2);
}

.doc-sign {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
    margin-top: 46px;
    break-inside: avoid;
}
.doc-sign .slot { border-top: 1px solid var(--ink-3); padding-top: 6px; }
.doc-sign .slot .who { font-size: 12px; font-weight: 600; }
.doc-sign .slot .sub { font-size: 10.5px; color: var(--ink-3); }
.doc-sign .slot.right { text-align: right; }

.doc-terms {
    margin-top: 18px;
    font-size: 10.5px;
    color: var(--ink-3);
    line-height: 1.5;
}

@media (max-width: 560px) {
    .doc-wrap { padding: 14px; }
    .doc-meta { grid-template-columns: 1fr; }
    .doc-head { flex-direction: column; gap: 8px; }
    .doc-title { text-align: left; }
    .doc-sign { gap: 24px; }
}

@media print {
    @page { size: A4; margin: 12mm; }

    /* Only the document prints. */
    body { background: #fff; }
    .doc-wrap {
        border: 0;
        box-shadow: none;
        padding: 0;
        max-width: none;
        margin: 0;
    }
    .doc-wrap .doc-head { border-bottom-color: #000; }
    table.doc-table { font-size: 11.5px; }
    table.doc-table th { color: #000; border-bottom-color: #000; }
    table.doc-table tfoot td { border-top-color: #000; }
    .doc-sign { margin-top: 56px; }
    .doc-sign .slot { border-top-color: #000; }
    .no-print { display: none !important; }
    .card { border: 0; }
}
table.doc-table td.nowrap, table.doc-table th.nowrap { white-space: nowrap; }

/* The per-board warranty verdict inside the service form. */
.line-warranty {
    margin-top: 10px;
    padding: 8px 11px;
    border-radius: var(--radius-sm);
    font-size: 12px;
    line-height: 1.45;
    background: var(--panel);
    border: 1px solid var(--line);
    color: var(--ink-2);
}
.line-warranty b { font-weight: 750; }
.line-warranty .muted { color: var(--ink-3); }
.line-warranty.good { background: var(--green-100); border-color: color-mix(in srgb, var(--green) 28%, transparent); color: var(--green); }
.line-warranty.bad { background: var(--red-100); border-color: color-mix(in srgb, var(--red) 28%, transparent); color: var(--red); }
.line-warranty.warn { background: var(--amber-100); border-color: color-mix(in srgb, var(--amber) 32%, transparent); color: var(--amber); }
.line-warranty.muted { color: var(--ink-3); }

/* ============================================================
   Delivery challan, laid out like the office's existing PDFs:
   a bordered form, centred company block, boxed field grid, and a
   goods table padded out with empty rows so it reads as a form.
   ============================================================ */
.cd {
    background: #fff;
    color: #111;
    border: 1px solid #9aa0a6;
    padding: 0;
    max-width: 820px;
    margin: 0 auto 18px;
    font-family: Arial, "Segoe UI", sans-serif;
    font-size: 12px;
}

.cd + .cd { margin-top: 24px; }

.cd-company {
    text-align: center;
    padding: 14px 16px 12px;
    border-bottom: 1px solid #9aa0a6;
}
.cd-company b {
    display: block;
    font-size: 19px;
    font-weight: 700;
    letter-spacing: .01em;
    margin-bottom: 10px;
}
.cd-company span { display: block; font-size: 11px; margin-top: 6px; }

.cd-title {
    text-align: center;
    padding: 9px 10px;
    font-size: 14px;
    font-weight: 700;
    border-bottom: 1px solid #9aa0a6;
}

table.cd-fields {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
}
table.cd-fields th,
table.cd-fields td {
    border: 1px solid #9aa0a6;
    padding: 7px 9px;
    vertical-align: top;
    font-size: 11.5px;
    text-align: left;
    font-weight: 400;
}
table.cd-fields th {
    width: 23%;
    font-weight: 600;
}
table.cd-fields td.val { white-space: pre-line; }
table.cd-fields tr.spacer td {
    border-left: 0;
    border-right: 0;
    border-bottom: 0;
    height: 12px;
    padding: 0;
}

table.cd-goods {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
    margin-top: 14px;
}
table.cd-goods th,
table.cd-goods td {
    border: 1px solid #9aa0a6;
    padding: 7px 9px;
    font-size: 11.5px;
}
table.cd-goods thead th {
    background: #e8eaed;
    font-weight: 700;
    text-align: center;
}
table.cd-goods td.sno { width: 8%; text-align: center; }
table.cd-goods td.type { width: 17%; text-align: center; font-size: 10.5px; }
table.cd-goods td.desc { width: 55%; }
table.cd-goods td.qty, table.cd-goods th.qty { width: 20%; text-align: center; }
table.cd-goods tr.blank td { height: 24px; }
table.cd-goods tfoot td {
    background: #e8eaed;
    font-weight: 700;
    text-align: center;
}
table.cd-goods tfoot td.label { text-align: center; }
table.cd-goods td.imei { font-family: "Cascadia Mono", Consolas, monospace; }

.cd-note { padding: 12px 2px 4px; font-size: 10.5px; }
.cd-prepared {
    display: flex;
    gap: 70px;
    padding: 12px 2px 4px;
    font-size: 11.5px;
}
.cd-legal { padding: 8px 2px 14px; font-size: 10.5px; }

.cd-sign {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    break-inside: avoid;
}
.cd-sign .box {
    border: 1px solid #9aa0a6;
    min-height: 70px;
    padding: 7px 9px;
    font-size: 11px;
}

.cd-body { padding: 0 14px 16px; }

/* Which sheet goes to the printer. */
@media print {
    .cd { border-color: #000; box-shadow: none; max-width: none; margin: 0; }
    .cd-company, .cd-title { border-bottom-color: #000; }
    table.cd-fields th, table.cd-fields td,
    table.cd-goods th, table.cd-goods td,
    .cd-sign .box { border-color: #000; }
    table.cd-goods thead th, table.cd-goods tfoot td {
        background: #e8eaed !important;
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }
    .doc-wrap.print-challan .cd.annexure { display: none; }
    .doc-wrap.print-annexure .cd.challan { display: none; }
    .doc-wrap.print-both .cd.challan { break-after: page; }
}
.pill.customer { background: var(--green-100); color: var(--green); }

/* ------------------------------------------------------- store tabs */
.store-tabs {
    display: flex;
    gap: 6px;
    margin-bottom: 14px;
    padding-bottom: 2px;
    overflow-x: auto;
    scrollbar-width: thin;
}
.store-tabs button {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    flex: 0 0 auto;
    padding: 8px 14px;
    border: 1px solid var(--line);
    border-radius: var(--pill);
    background: var(--panel);
    color: var(--ink-2);
    font-size: 12.5px;
    font-weight: 700;
    cursor: pointer;
    white-space: nowrap;
}
.store-tabs button:hover { border-color: var(--ink-3); }
.store-tabs button[aria-pressed="true"] {
    background: var(--primary);
    border-color: var(--primary);
    color: #fff;
}
.store-tabs .ico { font-size: 13px; }
.warn-text { color: var(--amber); font-weight: 600; }
/* A "used in assembly" row: product, quantity per unit, remove. */
.line-grid.used-in {
    grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) auto;
    align-items: end;
    margin-bottom: 8px;
}
.line-grid.used-in .line-remove { margin-bottom: 6px; }

/* ------------------------------------------------ assembly master rows */
.bom-row {
    display: grid;
    grid-template-columns: 34px minmax(0, 3fr) minmax(90px, 1fr) 60px 32px;
    gap: 8px;
    align-items: center;
    padding: 4px 0;
}
.bom-row .field { margin: 0; }
.bom-row .field > label:first-child:empty { display: none; }
.bom-head {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--ink-3);
    border-bottom: 1px solid var(--line-2);
}
.bom-rows .bom-row { border-bottom: 1px dashed var(--line-2); }
.bom-unit { font-size: 12px; color: var(--ink-3); }

/* ------------------------------------------------------------ tickets */
.nav-badge {
    margin-left: auto;
    min-width: 20px;
    padding: 1px 6px;
    border-radius: var(--pill);
    background: var(--red);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    text-align: center;
}
nav.side button kbd + .nav-badge { margin-left: 6px; }
.tile.clickable { cursor: pointer; }
.ticket-thread { display: flex; flex-direction: column; gap: 10px; }
.msg {
    max-width: 82%;
    padding: 10px 14px;
    border-radius: 12px;
    background: var(--panel-2);
    border: 1px solid var(--line);
    align-self: flex-start;
}
.msg.mine {
    align-self: flex-end;
    background: var(--primary-soft);
    border-color: transparent;
}
.msg .meta { display: flex; gap: 8px; align-items: center; flex-wrap: wrap;
             font-size: 12px; margin-bottom: 4px; }
.msg .text { white-space: pre-wrap; font-size: 13.5px; }
.readout .v.plain { font-family: inherit; letter-spacing: 0; }

/* --------------------------------------------------------------- help */
.flow-wrap { overflow-x: auto; padding: 6px 0 10px; }
.flow { display: flex; align-items: stretch; gap: 8px; min-width: max-content; }
.flow-step {
    width: 150px;
    padding: 8px 10px;
    border-radius: 8px;
    border: 1.5px solid var(--line);
    background: var(--panel-2);
    font-size: 12px;
}
.flow-step.customer { background: var(--primary-soft); border-color: var(--primary); }
.flow-step.us { background: var(--panel-2); border-color: var(--ink-3); }
.flow-step.both { background: var(--green-100); border-color: var(--green); }
.flow-step.decision { border-style: dashed; background: var(--amber-100); border-color: var(--amber); }
.flow-step.tiny { width: auto; padding: 3px 10px; display: inline-block; margin-right: 6px; }
.flow-who { font-size: 10.5px; text-transform: uppercase; letter-spacing: .04em;
            color: var(--ink-3); margin-bottom: 2px; }
.flow-name { font-weight: 700; font-size: 13px; color: var(--ink); }
.flow-sub { color: var(--ink-2); margin-top: 2px; line-height: 1.3; }
.flow-arrow { align-self: center; font-size: 18px; color: var(--ink-3); }
.flow-notes { margin: 10px 0 0 18px; font-size: 12.5px; color: var(--ink-2); }
.flow-notes li { margin: 3px 0; }

/* --------------------------------------------------- document revisions */
.cd-revised, .doc-revised { font-style: italic; color: var(--ink-2); }
.rev { padding: 10px 0; border-bottom: 1px dashed var(--line); }
.rev:last-child { border-bottom: 0; }
.rev-head { font-size: 13px; }
.rev-note { margin: 4px 0; font-style: italic; }
.rev-changes { margin: 4px 0 0 18px; font-size: 12.5px; color: var(--ink-2); }
.rev-changes li { margin: 2px 0; }

/* ---------------------------------------------------------------- bell */
.btn.bell { position: relative; font-size: 15px; padding: 4px 9px; }
.bell-count {
    position: absolute; top: -4px; right: -4px;
    min-width: 17px; padding: 1px 5px; border-radius: var(--pill);
    background: var(--red); color: #fff; font-size: 10.5px; font-weight: 700;
    text-align: center; line-height: 15px;
}
.bell-list { display: flex; flex-direction: column; gap: 6px; max-height: 60vh; overflow: auto; }
.bell-item {
    display: flex; gap: 10px; align-items: flex-start; text-align: left;
    width: 100%; padding: 9px 11px; border-radius: 10px;
    border: 1px solid var(--line); background: var(--panel); cursor: pointer;
    font: inherit; color: var(--ink);
}
.bell-item:hover { border-color: var(--ink-3); }
.bell-item.unread { background: var(--primary-soft); border-color: transparent; }
.bell-item.unread b::before { content: '● '; color: var(--primary); font-size: 9px; vertical-align: middle; }
.bell-ico { font-size: 16px; width: 22px; text-align: center; flex: 0 0 auto; }
.bell-body { flex: 1; min-width: 0; }
.bell-body b { display: block; font-size: 13px; }
.bell-filters {
    display: flex; flex-wrap: wrap; gap: 4px 14px; align-items: center;
    padding: 0 0 10px; margin-bottom: 10px; border-bottom: 1px solid var(--line);
}
.bell-filters .check { margin: 0; }
.empty + .btn { display: block; margin: 0 auto 18px; }
.bom-row.bom-head { padding: 2px 0 4px; }
.store-tabs .store-help {
    margin-left: auto; align-self: center; white-space: nowrap;
    font-size: 12px; color: var(--ink-3); text-decoration: none; padding: 6px 10px;
}
.store-tabs .store-help:hover { color: var(--primary); }