/* ============================================================
   ADMIN DESIGN LAYER  —  scoped under .adm
   ============================================================
   Every backoffice screen used to carry its own <style> block, and a Razor
   <style> block is GLOBAL. Fifteen pages each redefining .input, .tbl, .panel,
   .badge and .btn-sm with slightly different numbers meant the same control was
   a different size depending on which screen you were standing on, and whichever
   page rendered last quietly won.

   This is the one definition. Pages keep only what is genuinely theirs.

   THE ALIGNMENT BUG THIS FIXES
   ----------------------------
   There was no box-sizing reset anywhere in the admin. Under the default
   content-box, an input with `width: 100%` plus 10px padding and a 1.5px border
   renders 23px WIDER than the grid cell holding it. In a two-column form that
   pushed the right-hand field out past its column, and every row drifted by a
   different amount depending on its own padding - which is exactly the ragged
   look the client photographed on the Product Pool screen.

   The reset below is the fix. It is scoped to .adm so the storefront, which was
   authored against its own rules, is untouched.
   ============================================================ */

.adm, .adm *, .adm *::before, .adm *::after { box-sizing: border-box; }

.adm {
    font-family: var(--font);
    color: #1A1A1A;
    /* 13 is the macOS body size and the densest step on the scale the storefront
       uses. A back office reads as a back office at 13; 14 was simply untethered. */
    font-size: 13px;
    line-height: 1.5;
}

/* ---------- scale ------------------------------------------------------- */
:root {
    --a-red: #A6192E;
    --a-red-dark: #8A1526;
    --a-red-tint: #FBEFF1;
    --a-ink: #1A1A1A;
    --a-body: #3B3B3B;
    --a-mute: #6E6E6E;
    --a-line: #E4E2DF;
    --a-line-soft: #F1EFED;
    --a-pale: #F7F6F4;
    --a-ok: #2E7D32;
    --a-ok-tint: #EAF4EB;
    /* 3.25:1 on white. Same colour, same failure, same fix as the storefront. */
    --a-warn: #8A6508;
    --a-warn-tint: #FAF3E0;
    --a-info: #2E5C8A;
    --a-info-tint: #EAF0F6;

    /* One control height everywhere. The single biggest reason the old screens
       looked untidy was inputs, selects and buttons all being a few pixels
       different from each other on the same row. */
    --a-ctl: 34px;
    /* The same ladder as the storefront: 6 for controls, 10 for cards. */
    --a-radius: 6px;
    --a-radius-lg: 10px;
}

/* ---------- text -------------------------------------------------------- */
.adm h1 { font-size: 22px; font-weight: 800; letter-spacing: -.01em; margin: 0; }
.adm h2 { font-size: 15px; font-weight: 700; margin: 0; }
.adm h3 { font-size: 15px; font-weight: 700; margin: 0 0 12px; }

.adm .sub { color: var(--a-mute); font-size: 13px; line-height: 1.55; margin: 0 0 16px; max-width: 88ch; }
.adm .muted { color: var(--a-mute); font-size: 13px; }
.adm .bold { font-weight: 700; }
.adm .mono { font-family: Consolas, 'SF Mono', ui-monospace, monospace; }
.adm .t-small { font-size: 12px; }
.adm .hint, .adm .gridhint { font-size: 12px; color: var(--a-mute); line-height: 1.55; }
.adm .gridhint { margin: 0 0 16px; max-width: 84ch; }
.adm .note { min-height: 16px; margin-top: 4px; font-size: 11px; color: var(--a-mute); line-height: 16px; }
.adm .note .err { color: var(--a-red); font-weight: 600; }
.adm .note .ok { color: var(--a-ok); font-weight: 600; }

/* ---------- notices ----------------------------------------------------- */
.adm .denied, .adm .viewonly, .adm .excbanner, .adm .err-inline.block {
    padding: 12px 16px; border-radius: var(--a-radius);
    font-size: 13px; line-height: 1.6;
}
.adm .denied { background: var(--a-red-tint); border: 1px solid #F2D5DA; color: var(--a-red); }
.adm .denied code { background: rgba(0,0,0,.06); padding: 1px 4px; border-radius: 6px; }
/* The icon is part of the sentence, so it rides the baseline rather than
   becoming a flex item and splitting the bold run off from the rest. */
.adm .denied > svg, .adm .viewonly > svg, .adm .excbanner > svg {
    vertical-align: -3px; margin-inline-end: 2px;
}
.adm .viewonly, .adm .excbanner { background: var(--a-warn-tint); border: 1px solid #EAD9AE; color: #7A5B00; margin-bottom: 16px; }

.adm .msg, .adm .rowmsg, .adm .err-inline { font-size: 12px; }
.adm .rowmsg { margin-inline-start: 12px; }
.adm .msg.ok, .adm .rowmsg.ok { color: var(--a-ok); }
.adm .msg.err, .adm .rowmsg.err, .adm .err-inline { color: var(--a-red); }

/* ---------- panels ------------------------------------------------------ */
.adm .panel {
    margin-top: 16px; background: #fff;
    border: 1px solid var(--a-line); border-radius: var(--a-radius-lg); padding: 16px;
}
.adm .panel-head {
    display: flex; justify-content: space-between; align-items: center;
    gap: 12px; margin-bottom: 16px;
}
.adm .subpanel { border-top: 1px solid var(--a-line-soft); padding-top: 16px; margin-top: 16px; }
.adm .subpanel:first-of-type { border-top: none; margin-top: 0; padding-top: 0; }

/* ---------- tabs, chips, toolbars --------------------------------------- */
.adm .tabs { display: flex; gap: 2px; border-bottom: 1.5px solid var(--a-line); margin-bottom: 16px; }
.adm .tab {
    background: none; border: 0; border-bottom: 2px solid transparent; margin-bottom: -2px;
    padding: 8px 16px; font-family: inherit; font-size: 13px; color: var(--a-mute); cursor: pointer;
}
.adm .tab:hover { color: var(--a-ink); }
.adm .tab.on { color: var(--a-red); border-bottom-color: var(--a-red); font-weight: 700; }
.adm .tab .count {
    display: inline-block; margin-inline-start: 8px; background: var(--a-line-soft);
    color: #656565; font-size: 11px; font-weight: 700; padding: 1px 8px; border-radius: 999px;
}
.adm .tab.on .count { background: var(--a-red-tint); color: var(--a-red); }

.adm .chiprow { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 16px; }
.adm .chip {
    background: #fff; border: 1px solid var(--a-line); border-radius: 999px;
    padding: 8px 12px; font-family: inherit; font-size: 12px; color: var(--a-body); cursor: pointer;
}
.adm .chip:hover { border-color: #CFCAC5; }
.adm .chip.on { background: var(--a-ink); border-color: var(--a-ink); color: #fff; font-weight: 600; }

.adm .toolbar, .adm .listtools, .adm .search-row {
    display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 16px;
}
.adm .toolbar label { font-size: 12px; color: var(--a-mute); }

/* ---------- forms ------------------------------------------------------- */
/* Two columns on a laptop, one on anything narrow. Fields are grid cells, so
   nothing needs a width of its own - that is what used to drift. */
.adm .grid2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 16px; margin-bottom: 16px; }
.adm .grid3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px 16px; margin-bottom: 16px; }
.adm .field.wide, .adm .field.full { grid-column: 1 / -1; }

.adm .field { min-width: 0; }
.adm .field label, .adm .lbl {
    display: block; font-size: 11px; font-weight: 700; text-transform: uppercase;
    letter-spacing: .06em; color: var(--a-mute); margin-bottom: 4px;
}
.adm .field .hint { margin-top: 2px; }

.adm .input, .adm .select, .adm textarea.input, .adm select.select {
    width: 100%; height: var(--a-ctl);
    padding: 0 12px;
    border: 1px solid var(--a-line); border-radius: var(--a-radius);
    font-family: inherit; font-size: 13px; color: var(--a-ink); background: #fff;
}
.adm textarea.input, .adm textarea {
    height: auto; min-height: 68px; padding: 8px 12px; line-height: 1.55; resize: vertical;
}
.adm .input:focus, .adm .select:focus, .adm textarea:focus {
    outline: none; border-color: var(--a-red); box-shadow: 0 0 0 3px var(--a-red-tint);
}
.adm .input:disabled, .adm .select:disabled, .adm textarea:disabled {
    background: var(--a-pale); color: #9A9590; cursor: not-allowed;
}
.adm .input::placeholder { color: #A9A39D; }

/* A quantity, a percentage or a price is a handful of characters. Letting one
   stretch across half a form is what made the old screens look unconsidered. */
.adm .field .input[type=number] { max-width: 160px; }

/* Width modifiers, so a search box does not stretch across a 1600px screen and
   a sort-order box is not as wide as a product name. */
.adm .input.wide { max-width: 380px; }
.adm .input.sm { max-width: 90px; }
.adm .input.code { max-width: 140px; }
.adm .input.nm { max-width: 260px; }
.adm .input.sort, .adm .input.stock { max-width: 78px; text-align: right; }
.adm .input.money { max-width: 96px; text-align: right; }
.adm .input.hex { max-width: 110px; }
.adm .input.dt { max-width: 140px; }
.adm .select.wide { max-width: 320px; }

.adm .row-inline { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
/* A text input on an inline row can take the slack; a dropdown cannot use it -
   a 400px-wide '— group —' select is just a long way to point at a short word. */
.adm .row-inline .input { flex: 1 1 200px; min-width: 140px; }
.adm .row-inline .select { flex: 0 1 220px; min-width: 150px; }
.adm .row-inline .btn-sm { flex: none; }

.adm .chk {
    display: inline-flex; align-items: center; gap: 8px;
    margin-inline-end: 16px; font-size: 13px; cursor: pointer;
}
.adm .chk input[type=checkbox] { accent-color: var(--a-red); width: 15px; height: 15px; }

.adm .swatch {
    width: 18px; height: 18px; border-radius: 6px; border: 1px solid var(--a-line);
    display: inline-block; flex: none;
}

/* ---------- buttons ----------------------------------------------------- */
.adm .btn, .adm .btn-sm, .adm .btn-add {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    height: var(--a-ctl); padding: 0 16px;
    background: var(--a-ink); color: #fff; border: 1px solid var(--a-ink);
    border-radius: var(--a-radius);
    font-family: inherit; font-size: 12px; font-weight: 600;
    cursor: pointer; white-space: nowrap;
    transition: background 140ms, border-color 140ms, color 140ms;
}
.adm .btn:hover:not(:disabled), .adm .btn-sm:hover:not(:disabled) { background: #000; border-color: #000; }
.adm .btn.new, .adm .btn-add, .adm .btn-sm.primary {
    background: var(--a-red); border-color: var(--a-red);
}
.adm .btn.new:hover:not(:disabled), .adm .btn-add:hover:not(:disabled), .adm .btn-sm.primary:hover:not(:disabled) {
    background: var(--a-red-dark); border-color: var(--a-red-dark);
}
.adm .btn-sm.ghost, .adm .btn.ghost {
    background: #fff; color: var(--a-body); border-color: var(--a-line);
}
.adm .btn-sm.ghost:hover:not(:disabled), .adm .btn.ghost:hover:not(:disabled) {
    background: var(--a-pale); border-color: #CFCAC5; color: var(--a-ink);
}
.adm .btn-sm.danger { background: #fff; color: var(--a-red); border-color: #F2D5DA; }
.adm .btn-sm.danger:hover:not(:disabled) { background: var(--a-red); border-color: var(--a-red); color: #fff; }
.adm .btn-sm.approve { background: var(--a-ok); border-color: var(--a-ok); }
.adm .btn-sm.reject { background: #fff; color: var(--a-red); border-color: #F2D5DA; }
.adm .btn:disabled, .adm .btn-sm:disabled { opacity: .45; cursor: not-allowed; }

.adm .link {
    background: none; border: none; padding: 0;
    color: var(--a-red); font-family: inherit; font-size: 13px; cursor: pointer;
}
.adm .link:hover { text-decoration: underline; }
/* Zeroing the browser default padding made stacked links collide ("EditActivate").
   Space them where they actually sit side by side rather than everywhere. */
.adm td .link + .link, .adm .row-actions .link + .link, .adm .actions .link + .link {
    margin-inline-start: 12px;
}

/* ---------- tables ------------------------------------------------------ */
.adm .tblwrap, .adm .matrix-wrap { overflow-x: auto; border-radius: var(--a-radius-lg); }
.adm .tbl { width: 100%; border-collapse: collapse; font-size: 13px; }
/* Every table needs a name. These sit under a visible heading, so repeating it on
   screen would be noise - the caption carries it for anyone who arrives at the
   table without having read the heading above it. Clipped rather than
   display:none, which would take it out of the accessibility tree as well. */
.adm .sr-only {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0;
}
/* COLUMN headers only. A row header is a th too, and it is a cell of data, not a
   label for the column - so it takes the body treatment below. */
.adm .tbl thead th {
    text-align: start; font-size: 11px; font-weight: 700; text-transform: uppercase;
    letter-spacing: .07em; color: var(--a-mute);
    padding: 8px 12px; border-bottom: 1px solid var(--a-line); white-space: nowrap;
}
.adm .tbl td,
.adm .tbl tbody th { padding: 12px 12px; border-bottom: 1px solid var(--a-line-soft); vertical-align: middle; }
/* The browser makes a th bold and centred; a row header here is simply the first
   cell of the row and should read exactly as it did when it was a td. */
.adm .tbl tbody th { font-weight: inherit; text-align: start; color: inherit; }
.adm .tbl tbody tr:last-child td,
.adm .tbl tbody tr:last-child th { border-bottom: none; }
.adm .tbl th.num, .adm .tbl td.num { text-align: end; }
.adm .tbl tbody th.num { text-align: end; }
.adm .tbl td.actions { text-align: end; white-space: nowrap; }
.adm .tbl td.actions .btn-sm + .btn-sm { margin-inline-start: 8px; }
.adm .tbl tr.clickable { cursor: pointer; }
.adm .tbl tr.clickable:hover { background: var(--a-pale); }

/* Controls sitting inside a table are shorter - a 34px control in a 10px-padded
   cell makes every row 54px tall and turns 20 rows into a scroll. */
.adm .tbl .input, .adm .tbl .select { height: 30px; font-size: 12px; }

/* ---------- lists ------------------------------------------------------- */
.adm .results, .adm .rolelist {
    border: 1px solid var(--a-line); border-radius: var(--a-radius-lg); overflow: hidden; background: #fff;
}
.adm .result-row {
    display: flex; justify-content: space-between; align-items: center; gap: 12px;
    padding: 12px 16px; border-bottom: 1px solid var(--a-line-soft); cursor: pointer;
}
.adm .result-row:last-child { border-bottom: none; }
.adm .result-row:hover, .adm .result-row.sel { background: var(--a-pale); }
.adm .row-actions { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }

/* ---------- badges ------------------------------------------------------ */
.adm .badge {
    display: inline-block;
    font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
    padding: 4px 8px; border-radius: 999px; white-space: nowrap;
    background: var(--a-line-soft); color: var(--a-mute);
}
.adm .badge.pub, .adm .badge.active, .adm .badge.approved, .adm .badge.ok { background: var(--a-ok-tint); color: var(--a-ok); }
/* --a-mute on --a-line-soft is 4.45:1 - just under. These badges carry their
   own, slightly darker grey rather than moving the token everything uses. */
.adm .badge.unpub, .adm .badge.inactive, .adm .badge.off, .adm .badge.man { background: var(--a-line-soft); color: #656565; }
.adm .badge.pending, .adm .badge.warn { background: var(--a-warn-tint); color: #7A5B00; }
.adm .badge.rejected, .adm .badge.danger { background: var(--a-red-tint); color: var(--a-red); }
.adm .badge.info, .adm .badge.module, .adm .badge.status, .adm .badge.sys { background: var(--a-info-tint); color: var(--a-info); }

/* ---------- KPI tiles --------------------------------------------------- */
.adm .kpi {
    background: #fff; border: 1px solid var(--a-line); border-radius: var(--a-radius-lg);
    padding: 16px 16px;
}
/* Both are spans in the markup, so they need to be told to stack. */
.adm .kpiv, .adm .kpil { display: block; }
.adm .kpiv { font-size: 26px; font-weight: 800; letter-spacing: -.02em; line-height: 1.15; }
.adm .kpil { font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--a-mute); margin-top: 4px; }

/* ---------- empty / loading -------------------------------------------- */
.adm .empty { text-align: center; padding: 44px 20px; color: var(--a-mute); }
.adm .empty .art { font-size: 26px; margin-bottom: 12px; opacity: .55; }
.adm .empty h3 { font-size: 15px; color: var(--a-ink); margin-bottom: 8px; }

/* ---------- narrow screens --------------------------------------------- */
@media (max-width: 900px) {
    .adm .grid2, .adm .grid3 { grid-template-columns: minmax(0, 1fr); }
    .adm .input.wide { max-width: none; }
}

/* ---------- email screen ------------------------------------------------ */
/* Added to the shared layer rather than to the page, so the next screen that
   needs a setting toggle, a pager or a preview panel inherits them. */

/* A setting and its switch: explanation on the left, control on the right. */
.adm .srow {
    display: flex; align-items: flex-start; justify-content: space-between; gap: 20px;
    padding: 16px 0; border-bottom: 1px solid var(--a-line-soft);
}
.adm .srow:last-child { border-bottom: 0; padding-bottom: 0; }
.adm .srow > div:first-child { flex: 1; min-width: 0; }
.adm .sw { display: flex; align-items: center; gap: 8px; flex: none; font-size: 12px; font-weight: 600; }
.adm .sw input { width: 16px; height: 16px; accent-color: var(--a-red); cursor: pointer; }

.adm .field.grow { flex: 1 1 220px; }
.adm .row-inline { align-items: flex-end; }

.adm .pager {
    display: flex; align-items: center; justify-content: center; gap: 16px; margin-top: 16px;
}

/* Cells that must not wrap, and one that must clip rather than stretch the table. */
.adm .tbl td.nowrap, .adm .tbl th.nowrap { white-space: nowrap; }
.adm .tbl td.ar, .adm .tbl th.ar { text-align: right; }
.adm .tbl td.clip { max-width: 260px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.adm .tbl.ro tbody th:first-child { color: var(--a-mute); width: 200px; font-weight: inherit; }
.adm .tbl .err { font-size: 11px; color: var(--a-red); margin-top: 4px; }

/* Confirmation of a save. Fixed so it is visible wherever the page is scrolled. */
.adm .toast {
    position: fixed; inset-block-end: 22px; inset-inline-end: 22px; z-index: 200;
    padding: 12px 16px; border-radius: 6px; font-size: 13px; font-weight: 600;
    box-shadow: 0 6px 20px rgba(26, 26, 26, .16);
}
.adm .toast.good { background: var(--a-ok-tint); color: var(--a-ok); }
.adm .toast.bad { background: var(--a-red-tint); color: var(--a-red); }

/* Email preview. The body is replayed inside a sandboxed iframe, so it cannot
   inherit these styles - or run anything of its own. */
.pvwrap { position: fixed; inset: 0; z-index: 300; display: flex; align-items: center; justify-content: center; }
.pvscrim {
    position: absolute; inset: 0; border: 0; padding: 0; cursor: default;
    background: rgba(26, 26, 26, .5);
}
.pv {
    position: relative; background: #fff; border-radius: 10px; overflow: hidden;
    width: min(760px, 94vw); max-height: 88vh; display: flex; flex-direction: column;
    box-shadow: 0 18px 50px rgba(0, 0, 0, .3);
}
.pvhd {
    display: flex; align-items: center; justify-content: space-between; gap: 16px;
    padding: 16px 16px; border-bottom: 1px solid var(--a-line);
    font-family: inherit; font-size: 13px;
}
.pvbody { flex: 1; min-height: 0; background: var(--a-pale); }
.pvbody iframe { width: 100%; height: 100%; min-height: 480px; border: 0; display: block; }