/* ============================================================
   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: 'Segoe UI', 'Inter', -apple-system, system-ui, sans-serif;
    color: #1A1A1A;
    font-size: 14px;
}

/* ---------- 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;
    --a-warn: #B8860B;
    --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;
    --a-radius: 7px;
    --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: 14px; font-weight: 700; margin: 0 0 12px; }

.adm .sub { color: var(--a-mute); font-size: 13.5px; line-height: 1.55; margin: 0 0 18px; 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: 12.5px; color: var(--a-mute); line-height: 1.55; }
.adm .gridhint { margin: 0 0 14px; 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 15px; 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 5px; border-radius: 4px; }
.adm .viewonly, .adm .excbanner { background: var(--a-warn-tint); border: 1px solid #EAD9AE; color: #7A5B00; margin-bottom: 14px; }

.adm .msg, .adm .rowmsg, .adm .err-inline { font-size: 12.5px; }
.adm .rowmsg { margin-inline-start: 10px; }
.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: 18px; background: #fff;
    border: 1px solid var(--a-line); border-radius: var(--a-radius-lg); padding: 18px;
}
.adm .panel-head {
    display: flex; justify-content: space-between; align-items: center;
    gap: 12px; margin-bottom: 14px;
}
.adm .subpanel { border-top: 1px solid var(--a-line-soft); padding-top: 18px; margin-top: 18px; }
.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: 18px; }
.adm .tab {
    background: none; border: 0; border-bottom: 2px solid transparent; margin-bottom: -1.5px;
    padding: 9px 14px; font-family: inherit; font-size: 13.5px; 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: 6px; background: var(--a-line-soft);
    color: var(--a-mute); font-size: 10.5px; font-weight: 700; padding: 1px 6px; border-radius: 99px;
}
.adm .tab.on .count { background: var(--a-red-tint); color: var(--a-red); }

.adm .chiprow { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 14px; }
.adm .chip {
    background: #fff; border: 1px solid var(--a-line); border-radius: 99px;
    padding: 6px 13px; font-family: inherit; font-size: 12.5px; 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: 10px; flex-wrap: wrap; margin-bottom: 16px;
}
.adm .toolbar label { font-size: 12.5px; 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: 14px 16px; margin-bottom: 16px; }
.adm .grid3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px 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: 5px;
}
.adm .field .hint { margin-top: 2px; }

.adm .input, .adm .select, .adm textarea.input, .adm select.select {
    width: 100%; height: var(--a-ctl);
    padding: 0 11px;
    border: 1px solid var(--a-line); border-radius: var(--a-radius);
    font-family: inherit; font-size: 13.5px; color: var(--a-ink); background: #fff;
}
.adm textarea.input, .adm textarea {
    height: auto; min-height: 68px; padding: 9px 11px; 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: 7px;
    margin-inline-end: 16px; font-size: 13.5px; cursor: pointer;
}
.adm .chk input[type=checkbox] { accent-color: var(--a-red); width: 15px; height: 15px; }

.adm .swatch {
    width: 18px; height: 18px; border-radius: 4px; 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: 7px;
    height: var(--a-ctl); padding: 0 15px;
    background: var(--a-ink); color: #fff; border: 1px solid var(--a-ink);
    border-radius: var(--a-radius);
    font-family: inherit; font-size: 12.5px; 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; }
.adm .tbl th {
    text-align: start; font-size: 10.5px; font-weight: 700; text-transform: uppercase;
    letter-spacing: .07em; color: var(--a-mute);
    padding: 9px 12px; border-bottom: 1px solid var(--a-line); white-space: nowrap;
}
.adm .tbl td { padding: 10px 12px; border-bottom: 1px solid var(--a-line-soft); vertical-align: middle; }
.adm .tbl tbody tr:last-child td { border-bottom: none; }
.adm .tbl th.num, .adm .tbl td.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: 6px; }
.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: 12.5px; }

/* ---------- 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: 11px 15px; 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: 10.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
    padding: 3px 9px; border-radius: 99px; 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); }
.adm .badge.unpub, .adm .badge.inactive, .adm .badge.off, .adm .badge.man { background: var(--a-line-soft); color: var(--a-mute); }
.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 18px;
}
/* Both are spans in the markup, so they need to be told to stack. */
.adm .kpiv, .adm .kpil { display: block; }
.adm .kpiv { font-size: 24px; font-weight: 800; letter-spacing: -.02em; line-height: 1.15; }
.adm .kpil { font-size: 10.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--a-mute); margin-top: 5px; }

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

/* ---------- 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: 14px 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: 12.5px; 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: 14px; margin-top: 14px;
}

/* 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 td:first-child { color: var(--a-mute); width: 200px; }
.adm .tbl .err { font-size: 11.5px; color: var(--a-red); margin-top: 3px; }

/* 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: 11px 16px; border-radius: 8px; 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: 12px; 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: 14px 18px; border-bottom: 1px solid var(--a-line);
    font-family: inherit; font-size: 13.5px;
}
.pvbody { flex: 1; min-height: 0; background: var(--a-pale); }
.pvbody iframe { width: 100%; height: 100%; min-height: 480px; border: 0; display: block; }