/* Admin panel kit (includes/admin-kit.php). Office and setup pages share one visual
   language with the operational pages: it builds on ui-panels.css tokens and every
   rule is scoped under .ak (pages wrap in <div class="dp ak">). Tags are square and
   quiet, status is a dot and a word, red is for actions and warnings only. */

.ak {
    --ak-line: #e4e6eb; --ak-line-2: #eef0f3; --ak-border: #d3d6dc; --ak-border-hover: #a9adb6;
    --ak-field-h: 42px; --ak-row: 44px;
    display: flex; flex-direction: column; gap: var(--dp-gap);
}
.ak .ak-muted { color: var(--text-3); }
/* Kit pages carry their own figures strip, so the shared intro banner is redundant. */
body:has(.ak) .app-page-hero { display: none; }
.ak .ak-mono { font-family: var(--font-mono); }
.ak .ak-num { text-align: right; font-variant-numeric: tabular-nums; }
.ak .ak-nowrap { white-space: nowrap; }
.ak .dp-ico { width: 16px; height: 16px; flex-shrink: 0; }

/* ---- preview strip (previews only) ---------------------------------------------- */
.ak .ak-preview-bar {
    display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3);
    padding: var(--sp-2) var(--sp-4); border: 1px dashed #b9bdc6; border-radius: var(--radius-md);
    background: var(--surface); font-size: var(--fs-400); color: var(--text-2);
}
.ak .ak-preview-bar strong { color: var(--red-dark); }
.ak .ak-preview-bar a { flex-shrink: 0; font-weight: var(--fw-semi); color: var(--red-dark); }

/* ---- layout ---------------------------------------------------------------------- */
.ak .ak-cols { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--dp-gap); align-items: start; }
.ak .ak-cols.is-stretch { align-items: stretch; }
.ak .ak-s3 { grid-column: span 3; } .ak .ak-s4 { grid-column: span 4; } .ak .ak-s5 { grid-column: span 5; }
.ak .ak-s6 { grid-column: span 6; } .ak .ak-s7 { grid-column: span 7; } .ak .ak-s8 { grid-column: span 8; }
.ak .ak-s9 { grid-column: span 9; } .ak .ak-s12 { grid-column: 1 / -1; }
.ak .ak-stack { display: flex; flex-direction: column; gap: var(--dp-gap); min-width: 0; }

/* panel extras on top of .dp-panel/.dp-head/.dp-body */
.ak .dp-head h2 .ak-count { margin-left: var(--sp-15); font-weight: var(--fw-semi); color: var(--dp-head-meta); font-variant-numeric: tabular-nums; }
.ak .dp-head .ak-head-actions { display: flex; align-items: center; gap: var(--sp-2); }
.ak .dp-head .ak-head-actions a, .ak .dp-head .ak-head-actions button {
    display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 var(--sp-25);
    border: 1px solid rgba(255, 255, 255, .28); border-radius: var(--radius-sm); background: transparent;
    font: inherit; font-size: var(--fs-300); font-weight: var(--fw-semi); color: var(--white); text-decoration: none; cursor: pointer;
}
.ak .dp-head .ak-head-actions a:hover, .ak .dp-head .ak-head-actions button:hover { background: rgba(255, 255, 255, .12); }
.ak .dp-head .ak-head-actions .dp-ico { width: 14px; height: 14px; }
.ak .ak-panel-foot {
    display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--sp-2) var(--sp-3);
    padding: var(--sp-25) var(--sp-4); border-top: 1px solid var(--ak-line); background: var(--surface-2);
    font-size: var(--fs-300); color: var(--text-3);
}
.ak .ak-panel-foot a { color: var(--red-dark); font-weight: var(--fw-semi); }
.ak .ak-sub-head {
    margin: var(--sp-4) 0 var(--sp-2); font-size: var(--fs-250); font-weight: var(--fw-bold);
    text-transform: uppercase; letter-spacing: var(--ls-caps); color: var(--text-3);
}
.ak .ak-sub-head:first-child { margin-top: 0; }
.ak .ak-lead { margin: 0 0 var(--sp-3); font-size: var(--fs-450); color: var(--text-2); max-width: 80ch; }

/* ---- figures strip --------------------------------------------------------------- */
.ak .ak-figs {
    display: grid; grid-template-columns: repeat(var(--figs, 4), minmax(0, 1fr)) auto; align-items: stretch;
    background: var(--surface); border: 1px solid var(--ak-line); border-radius: var(--dp-radius); box-shadow: var(--dp-shadow); overflow: hidden;
}
.ak .ak-fig { display: flex; flex-direction: column; gap: 2px; padding: var(--sp-35) var(--sp-5); border-right: 1px solid var(--ak-line); min-width: 0; }
.ak .ak-fig > span { font-size: var(--fs-250); font-weight: var(--fw-bold); text-transform: uppercase; letter-spacing: var(--ls-caps); color: var(--text-3); }
.ak .ak-fig > strong { font-size: 28px; line-height: 1.1; font-weight: var(--fw-bold); color: var(--dp-ink); font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ak .ak-fig > em { font-style: normal; font-size: var(--fs-300); color: var(--text-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ak .ak-fig.is-warn > strong { color: var(--dp-amber); }
.ak .ak-fig.is-bad > strong { color: var(--red-dark); }
.ak .ak-fig.is-ok > strong { color: #1d7a3e; }
.ak .ak-figs-actions { display: flex; align-items: center; justify-content: flex-end; gap: var(--sp-2); padding: 0 var(--sp-5); }
.ak .ak-figs-actions:empty { display: none; }

/* ---- buttons ----------------------------------------------------------------------- */
.ak .ak-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2); height: 40px; padding: 0 var(--sp-4);
    border: 1.5px solid var(--dp-ink); border-radius: var(--radius-md); background: var(--surface); color: var(--dp-ink);
    font: inherit; font-size: var(--fs-450); font-weight: var(--fw-bold); text-decoration: none; cursor: pointer; white-space: nowrap;
    transition: background-color var(--t-base), color var(--t-base), border-color var(--t-base);
}
.ak .ak-btn:hover { background: var(--dp-ink); color: var(--white); }
.ak .ak-btn:focus-visible { outline: none; box-shadow: var(--ring-strong); }
.ak .ak-btn-primary { background: var(--red); border-color: var(--red); color: var(--white); }
.ak .ak-btn-primary:hover { background: var(--red-dark); border-color: var(--red-dark); }
.ak .ak-btn-dark { background: var(--dp-ink); color: var(--white); }
.ak .ak-btn-dark:hover { background: var(--black); }
.ak .ak-btn-danger { border-color: #b00d28; color: #b00d28; }
.ak .ak-btn-danger:hover { background: #b00d28; color: var(--white); }
.ak .ak-btn-sm { height: 32px; padding: 0 var(--sp-3); font-size: var(--fs-400); border-width: 1px; }
.ak .ak-btn[disabled], .ak .ak-btn.is-disabled { opacity: .45; cursor: not-allowed; pointer-events: none; }
.ak .ak-link {
    border: 0; background: none; padding: 0; font: inherit; font-weight: var(--fw-semi); color: var(--red-dark);
    cursor: pointer; text-decoration: none;
}
.ak .ak-link:hover { text-decoration: underline; text-underline-offset: 3px; }
.ak .ak-link-quiet { color: var(--text-2); }
.ak .ak-icon {
    display: inline-grid; place-items: center; width: 32px; height: 32px; padding: 0; border: 1px solid transparent; border-radius: var(--radius-sm);
    background: none; color: var(--text-2); text-decoration: none; cursor: pointer;
    transition: background-color var(--t-base), border-color var(--t-base), color var(--t-base);
}
.ak .ak-icon .dp-ico { width: 17px; height: 17px; }
.ak .ak-icon:hover { border-color: var(--ak-border); background: var(--surface); color: var(--dp-ink); }
.ak .ak-icon.is-danger:hover { border-color: #b00d28; color: #b00d28; }
.ak .ak-icon:focus-visible { outline: none; box-shadow: var(--ring-strong); }
.ak .ak-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2); }
.ak .ak-actions.is-end { justify-content: flex-end; }
.ak form.ak-inline { display: inline; margin: 0; }

/* ---- tags & status ------------------------------------------------------------------ */
.ak .ak-tag {
    display: inline-flex; align-items: center; height: 22px; padding: 0 7px; border-radius: 2px;
    border: 1px solid var(--ak-border); color: #2b2e35; background: #fafbfc;
    font-size: var(--fs-300); font-weight: var(--fw-semi); white-space: nowrap; text-decoration: none; line-height: 1;
}
.ak .ak-tag-ink  { border-color: #101014; color: #101014; background: #fff; }
.ak .ak-tag-mono { border-color: #101014; color: #101014; background: #fff; font-family: var(--font-mono); font-size: var(--fs-250); font-weight: var(--fw-bold); letter-spacing: .4px; }
.ak a.ak-tag-mono:hover { background: var(--dp-ink); color: var(--white); }
.ak .ak-tag-ok   { border-color: #9cc9ab; color: #1d6b38; background: #fff; }
.ak .ak-tag-warn { border-color: #e0bf86; color: var(--dp-amber); background: #fff; }
.ak .ak-tag-bad  { border-color: #b00d28; color: #b00d28; background: #fff; font-weight: var(--fw-bold); }
.ak .t-pallet { --t: #101014; } .ak .t-mixed { --t: #3a3d45; } .ak .t-carton { --t: #5f636c; }
.ak .t-bulk { --t: #868b95; } .ak .t-item { --t: #b3b7bf; }
.ak .ak-type::before { content: ""; width: 7px; height: 7px; margin-right: 6px; background: var(--t); border-radius: 1px; flex-shrink: 0; }
.ak .ak-tags { display: inline-flex; flex-wrap: wrap; gap: 4px; }

.ak .ak-status { display: inline-flex; align-items: center; gap: 7px; font-size: var(--fs-400); font-weight: var(--fw-semi); white-space: nowrap; }
.ak .ak-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: #9aa0aa; flex-shrink: 0; }
.ak .ak-status.is-ok { color: #1d7a3e; } .ak .ak-status.is-ok .ak-dot { background: #1d7a3e; }
.ak .ak-status.is-warn { color: var(--dp-amber); } .ak .ak-status.is-warn .ak-dot { background: #c98a12; }
.ak .ak-status.is-off { color: var(--text-3); } .ak .ak-status.is-off .ak-dot { background: #9aa0aa; }
.ak .ak-status.is-bad { color: #b00d28; } .ak .ak-status.is-bad .ak-dot { background: #b00d28; }

/* ---- tables -------------------------------------------------------------------------- */
.ak .ak-scroll { overflow: auto; max-width: 100%; }
.ak .ak-scroll.is-tall { max-height: calc(100vh - 180px); }
.ak .ak-table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: var(--fs-450); font-variant-numeric: tabular-nums; }
.ak .ak-table thead th {
    position: sticky; top: 0; z-index: 2; height: 38px; padding: 0 var(--sp-3); background: var(--surface-2); color: var(--text-3);
    border-bottom: 1px solid var(--ak-line);
    text-align: left; font-size: var(--fs-250); font-weight: var(--fw-bold); text-transform: uppercase; letter-spacing: var(--ls-caps); white-space: nowrap;
}
.ak .ak-table.is-dark-head thead th { background: var(--black-2); color: var(--white); border-bottom: 0; }
.ak .ak-table thead th.ak-num { text-align: right; }
.ak .ak-table tbody td { height: var(--ak-row); padding: 6px var(--sp-3); border-bottom: 1px solid var(--ak-line-2); vertical-align: middle; color: var(--text); }
.ak .ak-table tbody tr:last-child td { border-bottom: 0; }
.ak .ak-table tbody tr:hover td { background: #fafbfc; }
.ak .ak-table tbody tr.is-muted td { color: var(--text-3); }
.ak .ak-table tbody tr.is-flag td:first-child { box-shadow: inset 3px 0 0 var(--red); }
.ak .ak-table th:first-child, .ak .ak-table td:first-child { padding-left: var(--sp-4); }
.ak .ak-table th:last-child, .ak .ak-table td:last-child { padding-right: var(--sp-4); }
.ak .ak-table .ak-c-act { width: 1%; white-space: nowrap; text-align: right; }
.ak .ak-table .ak-c-act > * + * { margin-left: 2px; }
.ak .ak-code { font-family: var(--font-mono); font-weight: var(--fw-bold); color: var(--dp-ink); text-decoration: none; letter-spacing: .3px; white-space: nowrap; }
a.ak-code:hover { color: var(--red-dark); text-decoration: underline; text-underline-offset: 3px; }
.ak .ak-main { display: block; font-weight: var(--fw-semi); color: var(--text); }
.ak a.ak-main { text-decoration: none; }
.ak a.ak-main:hover { color: var(--red-dark); text-decoration: underline; text-underline-offset: 3px; }
.ak .ak-sub { display: block; margin-top: 1px; font-size: var(--fs-300); color: var(--text-3); }
.ak .ak-clip { max-width: 0; }
.ak .ak-clip .ak-main, .ak .ak-clip .ak-sub { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ak .ak-bar { display: block; width: 72px; height: 4px; background: var(--dp-cell-0); border-radius: 1px; overflow: hidden; }
.ak .ak-bar i { display: block; height: 100%; background: var(--dp-cell-3); }
.ak .ak-bar.is-ok i { background: #1d7a3e; }
.ak .ak-bar.is-warn i { background: #c98a12; }

/* ---- key / value ----------------------------------------------------------------------- */
.ak .ak-kv { display: grid; grid-template-columns: minmax(120px, max-content) minmax(0, 1fr); gap: 0; margin: 0; }
.ak .ak-kv > dt, .ak .ak-kv > dd { margin: 0; padding: 9px 0; border-bottom: 1px solid var(--ak-line-2); font-size: var(--fs-450); }
.ak .ak-kv > dt { padding-right: var(--sp-4); color: var(--text-3); font-weight: var(--fw-semi); }
.ak .ak-kv > dd { color: var(--text); min-width: 0; overflow-wrap: anywhere; }
.ak .ak-kv > dt:last-of-type, .ak .ak-kv > dd:last-of-type { border-bottom: 0; }

/* ---- forms ------------------------------------------------------------------------------ */
.ak .ak-form { display: flex; flex-direction: column; gap: var(--sp-35); }
.ak .ak-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-3) var(--sp-35); }
.ak .ak-grid.is-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.ak .ak-grid.is-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.ak .ak-grid.is-1 { grid-template-columns: minmax(0, 1fr); }
.ak .ak-grid > .is-full { grid-column: 1 / -1; }
.ak .ak-field { display: flex; flex-direction: column; gap: 5px; margin: 0; min-width: 0; }
.ak .ak-field > span:first-child, .ak .ak-label {
    font-size: var(--fs-250); font-weight: var(--fw-bold); text-transform: uppercase; letter-spacing: var(--ls-caps); color: var(--text-3);
}
.ak .ak-field > span:first-child em { font-style: normal; color: var(--red-dark); text-transform: none; letter-spacing: 0; margin-left: 4px; }
.ak .ak-field input:not([type=checkbox]):not([type=radio]):not([type=file]),
.ak .ak-field select,
.ak .ak-field textarea,
.ak .ak-input {
    width: 100%; height: var(--ak-field-h); padding: 0 var(--sp-3); border: 1.5px solid var(--ak-border); border-radius: var(--radius-md);
    font: inherit; font-size: var(--fs-450); color: var(--text); background-color: var(--surface); box-shadow: none;
}
.ak .ak-field textarea { height: auto; min-height: 84px; padding: var(--sp-25) var(--sp-3); line-height: 1.45; resize: vertical; }
.ak .ak-field select { padding-right: 34px; cursor: pointer; }
.ak .ak-field input[type=file] { font: inherit; font-size: var(--fs-400); padding: 8px 0; }
.ak .ak-field input:hover, .ak .ak-field select:hover, .ak .ak-field textarea:hover { border-color: var(--ak-border-hover); }
.ak .ak-field input:focus, .ak .ak-field select:focus, .ak .ak-field textarea:focus, .ak .ak-input:focus {
    outline: none; border-color: var(--red); box-shadow: 0 0 0 3px var(--red-tint);
}
.ak .ak-field input::placeholder, .ak .ak-field textarea::placeholder { color: var(--text-3); }
.ak .ak-field input.is-mono, .ak .ak-field .is-mono { font-family: var(--font-mono); }
.ak .ak-hint { margin: 0; font-size: var(--fs-300); color: var(--text-3); line-height: 1.45; }
.ak .ak-hint a { color: var(--red-dark); font-weight: var(--fw-semi); }
.ak .ak-check {
    display: flex; align-items: flex-start; gap: var(--sp-25); margin: 0; padding: var(--sp-25) var(--sp-3);
    border: 1px solid var(--ak-line); border-radius: var(--radius-md); background: var(--surface); cursor: pointer;
}
.ak .ak-check:hover { border-color: var(--ak-border-hover); }
.ak .ak-check input { width: 18px; height: 18px; margin: 1px 0 0; accent-color: var(--red); flex-shrink: 0; cursor: pointer; }
.ak .ak-check > span { display: flex; flex-direction: column; gap: 1px; font-size: var(--fs-450); font-weight: var(--fw-semi); color: var(--text); }
.ak .ak-check > span small { font-size: var(--fs-300); font-weight: var(--fw-normal); color: var(--text-3); }
.ak .ak-form-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2) var(--sp-3); padding-top: var(--sp-1); }
.ak .ak-form-actions .ak-hint { flex: 1 1 240px; }
.ak .ak-fieldset { margin: 0; padding: 0; border: 0; min-width: 0; }
.ak .ak-inline-form { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--sp-25); }
.ak .ak-inline-form .ak-field { flex: 1 1 160px; }

/* ---- search / segmented control -------------------------------------------------------- */
.ak .ak-search { position: relative; min-width: 0; }
.ak .ak-search .dp-ico { position: absolute; left: 13px; top: 50%; transform: translateY(-50%); width: 17px; height: 17px; color: var(--text-3); pointer-events: none; }
.ak .ak-search input {
    width: 100%; height: var(--ak-field-h); padding: 0 var(--sp-3) 0 40px; border: 1.5px solid var(--ak-border); border-radius: var(--radius-md);
    font: inherit; font-size: var(--fs-450); color: var(--text); background: var(--surface);
}
.ak .ak-search input:focus { outline: none; border-color: var(--red); box-shadow: 0 0 0 3px var(--red-tint); }
.ak .ak-seg { display: inline-flex; flex-wrap: wrap; border: 1px solid var(--ak-border); border-radius: var(--radius-md); overflow: hidden; background: var(--surface); }
.ak .ak-seg a, .ak .ak-seg button {
    display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0 var(--sp-35); border: 0; background: none;
    font: inherit; font-size: var(--fs-400); font-weight: var(--fw-semi); color: var(--text-2); text-decoration: none; white-space: nowrap; cursor: pointer;
}
.ak .ak-seg > * + * { border-left: 1px solid var(--ak-border) !important; }
.ak .ak-seg a b, .ak .ak-seg button b { font-weight: var(--fw-bold); color: var(--text-3); font-variant-numeric: tabular-nums; }
.ak .ak-seg a:hover, .ak .ak-seg button:hover { background: var(--surface-2); color: var(--text); }
.ak .ak-seg a:focus-visible, .ak .ak-seg button:focus-visible { outline: none; box-shadow: inset 0 0 0 2px var(--red); }
.ak .ak-seg .is-on, .ak .ak-seg [aria-selected="true"] { background: var(--dp-ink); color: var(--white); }
.ak .ak-seg .is-on b, .ak .ak-seg [aria-selected="true"] b { color: var(--on-dark); }
.ak .ak-toolbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--sp-3); }

/* ---- notices --------------------------------------------------------------------------- */
.ak .ak-note {
    display: flex; gap: var(--sp-3); padding: var(--sp-3) var(--sp-4); border: 1px solid var(--ak-line); border-left: 3px solid var(--dp-cell-3);
    border-radius: var(--radius-md); background: var(--surface); color: var(--text); font-size: var(--fs-450);
}
.ak .ak-note > .dp-ico { width: 19px; height: 19px; margin-top: 1px; color: var(--text-3); }
.ak .ak-note p { margin: 0; }
.ak .ak-note p + p { margin-top: 4px; }
.ak .ak-note strong { font-weight: var(--fw-bold); }
.ak .ak-note a { color: var(--red-dark); font-weight: var(--fw-semi); }
.ak .ak-note.is-warn { border-color: #ecd3a6; border-left-color: #c98a12; background: #fffbf3; }
.ak .ak-note.is-warn > .dp-ico { color: var(--dp-amber); }
.ak .ak-note.is-bad { border-color: #f2b8c2; border-left-color: var(--red); background: var(--red-light); color: var(--red-dark); }
.ak .ak-note.is-bad > .dp-ico { color: var(--red); }
.ak .ak-note.is-ok { border-color: #b9dcc4; border-left-color: #1d7a3e; background: #f5fbf7; }
.ak .ak-note.is-ok > .dp-ico { color: #1d7a3e; }

.ak .ak-empty { display: flex; flex-direction: column; align-items: center; gap: var(--sp-2); padding: var(--sp-6, 32px) var(--sp-4); text-align: center; color: var(--text-2); }
.ak .ak-empty .dp-ico { width: 26px; height: 26px; color: var(--text-3); }
.ak .ak-empty strong { color: var(--text); }
.ak .ak-empty a { color: var(--red-dark); font-weight: var(--fw-semi); }

/* ---- list rows (cards that are not tables) --------------------------------------------- */
.ak .ak-list { list-style: none; margin: 0; padding: 0; }
.ak .ak-list > li { display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-25) var(--sp-4); border-bottom: 1px solid var(--ak-line-2); min-height: var(--ak-row); }
.ak .ak-list > li:last-child { border-bottom: 0; }
.ak .ak-list .ak-grow { flex: 1; min-width: 0; }

/* ---- disclosure ------------------------------------------------------------------------- */
.ak details.ak-more > summary {
    display: inline-flex; align-items: center; gap: 6px; cursor: pointer; list-style: none;
    font-size: var(--fs-400); font-weight: var(--fw-semi); color: var(--red-dark);
}
.ak details.ak-more > summary::-webkit-details-marker { display: none; }
.ak details.ak-more > summary::before { content: "+"; display: inline-grid; place-items: center; width: 16px; height: 16px; border: 1px solid currentColor; border-radius: 2px; font-size: 12px; line-height: 1; }
.ak details.ak-more[open] > summary::before { content: "−"; }
.ak details.ak-more > .ak-more-body { margin-top: var(--sp-3); }

/* ---- detail head (one record: who / state / progress / count) ---------------------- */
.ak .ak-order-head { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1.2fr) minmax(0, 1fr) auto; gap: var(--sp-4) var(--sp-6, 32px); align-items: start; }
.ak .ak-order-head > div { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.ak .ak-order-head strong { font-size: 18px; font-weight: var(--fw-bold); color: var(--dp-ink); font-variant-numeric: tabular-nums; }
.ak .ak-order-head strong small { font-size: var(--fs-400); font-weight: var(--fw-normal); color: var(--text-3); }
.ak .ak-bar.is-wide { width: 100%; max-width: 260px; height: 6px; }
.ak .ak-bar-right { margin: 4px 0 0 auto; }
.ak .ak-steps { display: flex; gap: 0; margin: 4px 0 0; padding: 0; list-style: none; }
.ak .ak-steps li {
    position: relative; padding: 4px 12px 4px 10px; font-size: var(--fs-300); font-weight: var(--fw-semi); color: var(--text-3);
    background: var(--surface-2); border: 1px solid var(--ak-line); margin-right: -1px;
}
.ak .ak-steps li:first-child { border-radius: 2px 0 0 2px; }
.ak .ak-steps li:last-child { border-radius: 0 2px 2px 0; }
.ak .ak-steps li.is-done { color: #1d6b38; background: #f3faf5; }
.ak .ak-steps li.is-now { color: var(--white); background: var(--dp-ink); border-color: var(--dp-ink); z-index: 1; }

/* ---- inline row forms (qty + button inside a table cell) ---------------------------- */
.ak .ak-row-add { display: inline-flex; align-items: center; gap: 6px; margin: 0; }
.ak .ak-input.ak-qty { width: 76px; height: 32px; padding: 0 8px; text-align: right; font-variant-numeric: tabular-nums; }
.ak .ak-toolbar-body { padding: var(--sp-3) var(--sp-4); border-bottom: 1px solid var(--ak-line); flex: 0 0 auto; }
.ak .ak-pickscan { display: flex; gap: var(--sp-3); align-items: center; }
.ak .ak-pickscan .ak-search { flex: 1; }
.ak .ak-pickscan .ak-search input { height: 48px; font-size: 17px; font-family: var(--font-mono); }
.ak .ak-pickscan .ak-btn { height: 48px; }

/* ---- numbered flow (how a page works) ------------------------------------------------ */
.ak .ak-flow { list-style: none; margin: var(--sp-4) 0 0; padding: var(--sp-3) 0 0; border-top: 1px solid var(--ak-line); display: flex; flex-direction: column; gap: 8px; }
.ak .ak-flow li { display: flex; align-items: center; gap: var(--sp-25); font-size: var(--fs-400); color: var(--text-2); }
.ak .ak-flow b { display: inline-grid; place-items: center; width: 20px; height: 20px; border-radius: 2px; background: var(--dp-ink); color: var(--white); font-size: var(--fs-250); flex-shrink: 0; }

/* ---- responsive --------------------------------------------------------------------------- */
@media (max-width: 1599px) {
    .ak .ak-s3 { grid-column: span 4; } .ak .ak-s9 { grid-column: span 8; }
}
@media (max-width: 1280px) {
    .ak .ak-s3, .ak .ak-s4, .ak .ak-s5 { grid-column: span 6; }
    .ak .ak-s7, .ak .ak-s8, .ak .ak-s9 { grid-column: 1 / -1; }
    .ak .ak-figs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .ak .ak-fig { border-bottom: 1px solid var(--ak-line); }
    .ak .ak-fig:nth-child(2n) { border-right: 0; }
    .ak .ak-figs-actions { grid-column: 1 / -1; justify-content: flex-start; padding: var(--sp-3) var(--sp-4); }
    .ak .ak-hide-md { display: none !important; }
    .ak .ak-grid.is-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
    .ak .ak-cols > * { grid-column: 1 / -1 !important; }
    .ak .ak-grid.is-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .ak .ak-hide-sm { display: none !important; }
    .ak .ak-scroll.is-tall { max-height: none; }
    .ak .ak-preview-bar { flex-direction: column; align-items: flex-start; }
}
@media (max-width: 600px) {
    .ak .ak-grid, .ak .ak-grid.is-3, .ak .ak-grid.is-4 { grid-template-columns: minmax(0, 1fr); }
    .ak .ak-fig > strong { font-size: 22px; }
    .ak .ak-fig { padding: var(--sp-3) var(--sp-4); }
    .ak .ak-toolbar { flex-direction: column; align-items: stretch; }
    .ak .ak-seg { width: 100%; }
    .ak .ak-kv { grid-template-columns: minmax(0, 1fr); }
    .ak .ak-kv > dt { padding-bottom: 0; border-bottom: 0; }
    .ak .ak-kv > dd { padding-top: 2px; }
    .ak .ak-table { font-size: var(--fs-400); }
    .ak .ak-hide-xs { display: none !important; }
    .ak .ak-btn { height: 44px; }
    .ak .ak-form-actions .ak-btn { flex: 1 1 auto; }
    /* Tables stack on a phone: the first cell takes the full width, the rest flow on the
       next line, actions sit at the end. Opt out with .is-grid for short numeric tables. */
    .ak .ak-table:not(.is-grid) thead { display: none; }
    .ak .ak-table:not(.is-grid), .ak .ak-table:not(.is-grid) tbody { display: block; }
    .ak .ak-table:not(.is-grid) tbody tr { display: flex; flex-wrap: wrap; align-items: center; gap: 6px var(--sp-3); padding: var(--sp-25) var(--sp-4); border-bottom: 1px solid var(--ak-line-2); }
    .ak .ak-table:not(.is-grid) tbody tr:last-child { border-bottom: 0; }
    .ak .ak-table:not(.is-grid) tbody td { display: block; height: auto; padding: 0 !important; border: 0; text-align: left; }
    .ak .ak-table:not(.is-grid) tbody td:first-child { flex: 1 1 100%; }
    .ak .ak-table:not(.is-grid) .ak-clip { max-width: none; }
    .ak .ak-table:not(.is-grid) .ak-clip .ak-main, .ak .ak-table:not(.is-grid) .ak-clip .ak-sub { white-space: normal; }
    .ak .ak-table:not(.is-grid) td.ak-c-act { margin-left: auto; width: auto; }
    .ak .ak-table:not(.is-grid) .ak-bar-right { margin-left: 0; }
    .ak .ak-table:not(.is-grid) tbody tr.is-flag { box-shadow: inset 3px 0 0 var(--red); }
    .ak .ak-table:not(.is-grid) tbody tr.is-flag td:first-child { box-shadow: none; }
    .ak .ak-table:not(.is-grid) td[data-label]::before {
        content: attr(data-label); margin-right: 6px; font-size: var(--fs-250); font-weight: var(--fw-bold);
        text-transform: uppercase; letter-spacing: var(--ls-caps); color: var(--text-3);
    }
}
@media (max-width: 1100px) {
    .ak .ak-order-head { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 600px) {
    .ak .ak-order-head { grid-template-columns: minmax(0, 1fr); }
    .ak .ak-pickscan { flex-direction: column; align-items: stretch; }
    .ak .ak-row-add .ak-qty { width: 60px; }
}

/* ---- dispatch form: delivery address left, carrier + confirm right --------------- */
.ak .ak-dispatch { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: var(--sp-6, 32px); align-items: start; }
.ak .ak-deliver > h2:first-of-type { display: none; }   /* the shared panel's own "Deliver To" heading */
.ak .ak-deliver .form-grid { max-width: 1100px; }
.ak .ak-carrier { position: sticky; top: var(--sp-4); display: flex; flex-direction: column; gap: var(--sp-3); padding: var(--sp-4); border: 1px solid var(--ak-line); border-radius: var(--radius-md); background: var(--surface-2); }
.ak .ak-btn-block { width: 100%; height: 46px; }
.ak .ak-pickscan .ak-search input::placeholder { font-family: var(--font-sans, inherit); font-size: var(--fs-450); }
@media (max-width: 1100px) { .ak .ak-dispatch { grid-template-columns: minmax(0, 1fr); } .ak .ak-carrier { position: static; } }

/* ---- record identity head (item, customer, van …) ---------------------------------- */
.ak .ak-item-head { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--sp-4) var(--sp-6, 32px); padding: var(--sp-4) var(--sp-5); align-items: center; }
.ak .ak-item-id { display: flex; flex-direction: column; gap: var(--sp-2); min-width: 0; }
.ak .ak-item-code { font-size: var(--fs-450); color: var(--text-2); }
.ak .ak-item-desc { margin: 0; font-size: 22px; line-height: 1.25; font-weight: var(--fw-bold); letter-spacing: var(--ls-tight); color: var(--dp-ink); overflow-wrap: anywhere; }
.ak .ak-item-note { margin: 0; font-size: var(--fs-400); color: var(--text-2); }
.ak .ak-item-label { display: flex; flex-direction: column; align-items: flex-end; gap: var(--sp-25); }
.ak .ak-item-bc { padding: var(--sp-2) var(--sp-3); border: 1px solid var(--ak-line); border-radius: var(--radius-md); background: #fff; line-height: 0; }
.ak .ak-item-bc svg { height: 56px; width: auto; max-width: 340px; }
.ak .ak-qtyread { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px var(--sp-2); margin-bottom: var(--sp-4); }
.ak .ak-qtyread strong { font-size: 30px; line-height: 1; font-weight: var(--fw-bold); color: var(--dp-ink); font-variant-numeric: tabular-nums; }
.ak .ak-qtyread > span:not(.ak-bar) { font-size: var(--fs-450); color: var(--text-2); }
.ak .ak-qtyread .ak-bar { flex-basis: 100%; max-width: none; }
.ak .ak-mt { margin-top: var(--sp-3); }
.ak .ak-weight-normal { font-weight: var(--fw-normal); }
.ak .ak-table td.ak-wide { width: 50%; }
@media (max-width: 900px) { .ak .ak-item-head { grid-template-columns: minmax(0, 1fr); padding: var(--sp-4); } .ak .ak-item-label { align-items: flex-start; } .ak .ak-item-label .ak-actions { justify-content: flex-start; } }
.ak .ak-qtyread .ak-bar i { background: var(--dp-cell-2); }
.ak .ak-note + form, .ak .ak-note + .ak-form { margin-top: var(--sp-35); }

/* ---- filters, selection, side panels, bars ------------------------------------------- */
.ak .ak-filter { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--sp-3); margin: 0; }
.ak .ak-filter .ak-field { flex: 0 1 260px; }
.ak .ak-filter .ak-field input, .ak .ak-filter .ak-field select { height: 38px; }
.ak .ak-filter > .ak-link { align-self: center; padding-top: 18px; }
.ak .ak-table tbody tr.is-sel td { background: #fff7f8; }
.ak .ak-table tbody tr.is-sel td:first-child { box-shadow: inset 3px 0 0 var(--dp-ink); }
.ak .ak-sticky { position: sticky; top: var(--sp-4); }
.ak .ak-list-tight > li { padding: var(--sp-2) 0; min-height: 0; }
.ak .ak-list-tight .ak-grow .ak-sub { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ak .ak-hbars { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--sp-25); }
.ak .ak-hbars li { display: grid; grid-template-columns: minmax(90px, 140px) minmax(0, 1fr) 40px; align-items: center; gap: var(--sp-3); font-size: var(--fs-400); }
.ak .ak-hbars a { color: var(--text); font-weight: var(--fw-semi); text-decoration: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ak .ak-hbars a:hover { color: var(--red-dark); text-decoration: underline; }
.ak .ak-hbars strong { text-align: right; font-variant-numeric: tabular-nums; }
.ak .ak-hbar { display: block; height: 10px; background: var(--dp-cell-0); border-radius: 1px; overflow: hidden; }
.ak .ak-hbar i { display: block; height: 100%; background: var(--dp-cell-3); }
@media (max-width: 1280px) { .ak .ak-sticky { position: static; } }
.ak .ak-retry { display: flex; flex-wrap: wrap; align-items: center; gap: 6px var(--sp-25); }
.ak .ak-table td.ak-to-cell { width: 22%; }

/* ---- expanding detail row, paired inputs ------------------------------------------ */
.ak .ak-table tbody tr.ak-expand td { height: auto; padding: 0 !important; background: var(--surface-2); }
.ak .ak-table tbody tr.ak-expand:hover td { background: var(--surface-2); }
.ak .ak-expand-body { padding: var(--sp-3) var(--sp-4) var(--sp-4); border-top: 1px solid var(--ak-line); }
.ak .ak-expand-body .ak-list { background: var(--surface); border: 1px solid var(--ak-line); border-radius: var(--radius-md); }
.ak .ak-expand-body .ak-list > li { padding: var(--sp-2) var(--sp-3); }
.ak .ak-grid > .ak-span-2 { grid-column: span 2; }
.ak .ak-pair { display: flex; gap: 6px; }
.ak .ak-pair input { min-width: 0; }
.ak .ak-pair input[type=number] { flex: 1 1 55%; }
.ak .ak-pair input[type=text] { flex: 1 1 45%; }
.ak .ak-asn-rows { display: flex; flex-direction: column; gap: var(--sp-25); }
.ak .ak-asn-rows .asn-line { padding-bottom: var(--sp-25); border-bottom: 1px dashed var(--ak-line); }
@media (max-width: 600px) { .ak .ak-grid > .ak-span-2 { grid-column: auto; } .ak .ak-table tbody tr.ak-expand { padding: 0; } .ak .ak-table tbody tr.ak-expand td { flex: 1 1 100%; } }
@media (max-width: 600px) {
    .ak .ak-table:not(.is-grid) tbody tr.is-sel { box-shadow: inset 3px 0 0 var(--dp-ink); background: #fff7f8; }
    .ak .ak-table:not(.is-grid) tbody tr.is-sel td:first-child { box-shadow: none; }
    .ak .ak-list > li { flex-wrap: wrap; }
    .ak .ak-list > li > .ak-grow { flex: 1 1 100%; }
}

/* ---- zone cards ---------------------------------------------------------------------- */
.ak .ak-zones { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: var(--sp-25); }
.ak .ak-zone { display: flex; flex-direction: column; gap: 5px; padding: var(--sp-3); border: 1px solid var(--ak-line); border-radius: var(--radius-md); background: var(--surface); color: var(--text); text-decoration: none; transition: border-color var(--t-base), box-shadow var(--t-base); }
.ak .ak-zone:hover { border-color: var(--ak-border-hover); }
.ak .ak-zone:focus-visible { outline: none; box-shadow: var(--ring-strong); }
.ak .ak-zone.is-on { border-color: var(--dp-ink); box-shadow: inset 0 0 0 1px var(--dp-ink); }
.ak .ak-zone-name { display: flex; align-items: center; gap: 6px; font-weight: var(--fw-bold); color: var(--dp-ink); }
.ak .ak-zone-fig { font-size: var(--fs-400); color: var(--text-2); }
.ak .ak-zone-fig strong { font-size: 18px; color: var(--dp-ink); font-variant-numeric: tabular-nums; }
.ak .ak-zone-sub { font-size: var(--fs-300); color: var(--text-3); }
.ak .ak-zone .ak-bar.is-wide { max-width: none; }
.ak .ak-loc-items { display: flex; flex-wrap: wrap; gap: 4px var(--sp-25); align-items: center; }
.ak .ak-loc-items .ak-code { font-size: var(--fs-400); }
.ak .ak-full { color: var(--dp-amber); }
@media (max-width: 600px) { .ak .ak-zones { grid-template-columns: repeat(2, minmax(0, 1fr)); } .ak .ak-zone { padding: var(--sp-25); } }

/* ---- group rows inside a table ---------------------------------------------------- */
.ak .ak-table tbody tr.ak-grouprow th { height: 34px; padding: 0 var(--sp-4); text-align: left; background: var(--surface-2); border-bottom: 1px solid var(--ak-line); border-top: 1px solid var(--ak-line); }
.ak .ak-table tbody tr.ak-grouprow:first-child th { border-top: 0; }
.ak .ak-table tbody tr.ak-grouprow span { font-family: var(--font-mono); font-weight: var(--fw-bold); color: var(--dp-ink); }
.ak .ak-table tbody tr.ak-grouprow em { font-style: normal; margin-left: var(--sp-3); font-size: var(--fs-300); font-weight: var(--fw-semi); color: var(--text-3); }
.ak .ak-inline-main { display: inline; margin-left: 6px; }
@media (max-width: 600px) { .ak .ak-table:not(.is-grid) tbody tr.ak-grouprow { padding: 0; } .ak .ak-table:not(.is-grid) tbody tr.ak-grouprow th { display: block; width: 100%; padding: var(--sp-2) var(--sp-4); height: auto; } }
.ak .ak-table td.ak-clip { width: 32%; }
.ak .ak-table td.ak-clip.ak-to-cell { width: 22%; }
.ak .ak-table td.ak-clip.ak-wide { width: 50%; }

/* ---- van pages ---------------------------------------------------------------------- */
.ak .ak-pad { padding: 0 var(--sp-4); margin-top: var(--sp-35); }
.ak .ak-bad { color: #b00d28; }
.ak .ak-c-check { width: 40px; }
.ak .ak-c-check input { width: 16px; height: 16px; accent-color: var(--red); cursor: pointer; }
.ak .ak-table label.ak-main { cursor: pointer; }
.ak .ak-load-rows { display: flex; flex-direction: column; gap: 6px; margin-top: var(--sp-3); }
.ak .ak-load-head, .ak .ak-load-row { display: grid; grid-template-columns: minmax(0, 1fr) 110px; gap: 6px; }
.ak .ak-load-row .ak-input { height: 38px; }
.ak .ak-load-row select.ak-input { padding-right: 30px; }
.ak .ak-input.ak-zone-in { width: 160px; height: 32px; font-family: var(--font-mono); }
.ak .ak-panel-foot .ak-link { display: inline-flex; align-items: center; gap: 4px; }

/* ---- van cards (engineer portal: phone-first, one action open at a time) ------------ */
.ak .ak-vcards { display: flex; flex-direction: column; }
.ak .ak-vcard { padding: var(--sp-35) var(--sp-4); border-bottom: 1px solid var(--ak-line-2); display: flex; flex-direction: column; gap: var(--sp-2); }
.ak .ak-vcard:last-child { border-bottom: 0; }
.ak .ak-vcard-head { display: flex; justify-content: space-between; gap: var(--sp-3); align-items: flex-start; }
.ak .ak-vcard-title { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.ak .ak-vcard-title > strong { font-size: var(--fs-500); color: var(--dp-ink); overflow-wrap: anywhere; }
.ak .ak-vcard-qty { display: flex; flex-direction: column; align-items: flex-end; flex-shrink: 0; }
.ak .ak-vcard-qty strong { font-size: 26px; line-height: 1; font-weight: var(--fw-bold); color: var(--dp-ink); font-variant-numeric: tabular-nums; }
.ak .ak-vcard-qty span { font-size: var(--fs-300); color: var(--text-3); }
.ak .ak-vcard-last { margin: 0; font-size: var(--fs-300); color: var(--text-3); }
.ak .ak-vcard-acts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.ak .ak-vact { margin: 0; min-width: 0; }
.ak .ak-vact[open] { grid-column: 1 / -1; order: -1; }
.ak .ak-vact-btn { display: flex; align-items: center; justify-content: center; width: 100%; min-height: 40px; padding: 0 var(--sp-3); border: 1.5px solid var(--ak-border); border-radius: var(--radius-md); background: var(--surface); font: inherit; font-size: var(--fs-400); font-weight: var(--fw-semi); color: var(--text); cursor: pointer; list-style: none; text-align: center; }
.ak .ak-vact-btn::-webkit-details-marker { display: none; }
.ak .ak-vact-btn:hover { border-color: var(--dp-ink); }
.ak .ak-vact-btn.is-primary { border-color: var(--dp-ink); background: var(--dp-ink); color: var(--white); }
.ak details.ak-vact[open] > .ak-vact-btn { border-color: var(--red); color: var(--red-dark); background: #fff; }
.ak details.ak-vact > form { margin-top: var(--sp-3); padding: var(--sp-35); border: 1px solid var(--ak-line); border-radius: var(--radius-md); background: var(--surface-2); }
.ak .ak-vcard-label { display: inline-flex; align-items: center; gap: 6px; align-self: flex-start; font-size: var(--fs-300); font-weight: var(--fw-semi); color: var(--text-2); }
.ak .ak-vcard-label:hover { color: var(--red-dark); }
.ak .ak-mpad { margin: var(--sp-3) var(--sp-4) 0; }
.ak .ak-list > li.is-flag { box-shadow: inset 3px 0 0 var(--red); }
@media (max-width: 600px) { .ak .ak-vcard-acts { grid-template-columns: minmax(0, 1fr); } .ak .ak-vact-btn { min-height: 46px; } }
.ak .ak-vcard.van-item { border: 0; border-bottom: 1px solid var(--ak-line-2); border-radius: 0; background: none; box-shadow: none; margin: 0; padding: var(--sp-35) var(--sp-4); }
.ak .ak-vcard.van-item:last-child { border-bottom: 0; }

/* ---- customer page ------------------------------------------------------------------ */
.ak .ak-block { display: block; }
.ak .ak-addr-add { border-top: 1px solid var(--ak-line); }
.ak .ak-link-sm { font-size: var(--fs-300); align-self: flex-start; }
.ak .ak-field-wide { flex: 0 1 420px !important; }
.ak .ak-jump { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; flex: 1 1 100%; }
.ak .ak-jump a { display: inline-flex; gap: 5px; align-items: center; height: 26px; padding: 0 8px; border: 1px solid var(--ak-border); border-radius: 2px; font-size: var(--fs-300); font-weight: var(--fw-semi); color: var(--text-2); text-decoration: none; background: var(--surface); }
.ak .ak-jump a:hover { border-color: var(--dp-ink); color: var(--dp-ink); }
.ak .ak-jump b { color: var(--text-3); font-variant-numeric: tabular-nums; }
.ak details.ak-bundle { margin-top: 3px; }
.ak details.ak-bundle > summary { cursor: pointer; font-size: var(--fs-300); font-weight: var(--fw-semi); color: var(--text-2); }
.ak details.ak-bundle ul { margin: 4px 0 0; padding-left: 16px; font-size: var(--fs-300); color: var(--text-2); }
.ak .ak-cat-forms { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: var(--sp-5); padding: var(--sp-4); border-top: 1px solid var(--ak-line); background: var(--surface-2); }
.ak .ak-cat-form { padding: var(--sp-4); border: 1px solid var(--ak-line); border-radius: var(--radius-md); background: var(--surface); }
.ak .ak-cat-form.is-editing { border-color: var(--dp-ink); box-shadow: inset 3px 0 0 var(--red); }
.ak .ak-cat-form .ak-sub-head { margin: 0; }
.ak .ak-grid > .ak-check.is-full { grid-column: 1 / -1; }
#part-template { scroll-margin-top: 16px; }
@media (max-width: 1100px) { .ak .ak-cat-forms { grid-template-columns: minmax(0, 1fr); } }

/* ---- reports ------------------------------------------------------------------------- */
.ak .ak-rp-filter .ak-field { flex: 1 1 240px; }
.ak .ak-rp-apply { align-self: flex-end; margin-left: auto; }
.ak .ak-seg-radio label { position: relative; display: inline-flex; align-items: center; height: 36px; padding: 0 var(--sp-35); margin: 0; font-size: var(--fs-400); font-weight: var(--fw-semi); color: var(--text-2); cursor: pointer; }
.ak .ak-seg-radio label + label { border-left: 1px solid var(--ak-border); }
.ak .ak-seg-radio input { position: absolute; inset: 0; margin: 0; opacity: 0; cursor: pointer; }
.ak .ak-seg-radio label.is-on { background: var(--dp-ink); color: var(--white); }
.ak .ak-seg-radio label:has(input:focus-visible) { box-shadow: inset 0 0 0 2px var(--red); }
.ak .ak-rp-strip { display: flex; flex-wrap: wrap; align-items: center; gap: 6px var(--sp-2); margin-top: var(--sp-35); padding-top: var(--sp-3); border-top: 1px solid var(--ak-line); }
.ak .ak-rp-gap { flex: 1 1 var(--sp-5); }
.ak .ak-chip { display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 2px 0 8px; border: 1px solid var(--ak-border); border-radius: 2px; background: var(--surface); font-size: var(--fs-400); font-weight: var(--fw-semi); }
.ak .ak-chip a { display: inline-grid; place-items: center; width: 20px; height: 20px; border-radius: 2px; color: var(--text-3); }
.ak .ak-chip a:hover { background: var(--red-light); color: var(--red); }
.ak .ak-chip .dp-ico { width: 12px; height: 12px; }
.ak .ak-chart svg { width: 100%; height: auto; display: block; }
.ak .ak-hbar-label { font-weight: var(--fw-semi); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ak .ak-m0 { margin-left: 0; }

/* the chart helpers' "Day-by-day figures" disclosure: same table language as .ak-table */
.ak .chart-data { margin-top: var(--sp-2); }
.ak .chart-data > summary { font-size: var(--fs-400); font-weight: var(--fw-semi); color: var(--text-2); }
.ak .chart-data table { width: 100%; border-collapse: collapse; font-size: var(--fs-400); font-variant-numeric: tabular-nums; }
.ak .chart-data table th { height: 32px; padding: 0 var(--sp-3); background: var(--surface-2); color: var(--text-3); border-bottom: 1px solid var(--ak-line); text-align: left; font-size: var(--fs-250); font-weight: var(--fw-bold); text-transform: uppercase; letter-spacing: var(--ls-caps); }
.ak .chart-data table th.num, .ak .chart-data table td.num { text-align: right; }
.ak .chart-data table td { height: 32px; padding: 0 var(--sp-3); border-bottom: 1px solid var(--ak-line-2); color: var(--text); background: var(--surface); }
/* style.css:4687 paints table.list headers dark through a 4x :not([data-page]) chain
   (0,6,3) that no scoped selector can outrank; the chart helpers emit table.list. */
.ak .chart-data table.list th { color: var(--text-3) !important; background: var(--surface-2) !important; border-radius: 0 !important; }
.ak .chart-data table.list td { color: var(--text) !important; }
.ak .ak-field > .ak-seg { align-self: flex-start; }

/* ---- billing ---------------------------------------------------------------------- */
.ak .ak-rates { display: flex; flex-direction: column; }
.ak .ak-rate { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); padding: var(--sp-25) 0; border-bottom: 1px solid var(--ak-line-2); margin: 0; }
.ak .ak-rate:first-child { padding-top: 0; }
.ak .ak-rate > span:first-child { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.ak .ak-rate small { font-size: var(--fs-300); color: var(--text-3); }
.ak .ak-money { position: relative; flex: 0 0 132px; }
.ak .ak-money i { position: absolute; left: 11px; top: 50%; transform: translateY(-50%); font-style: normal; color: var(--text-3); font-weight: var(--fw-semi); pointer-events: none; }
.ak .ak-money input { width: 100%; height: 38px; padding: 0 var(--sp-3) 0 26px; border: 1.5px solid var(--ak-border); border-radius: var(--radius-md); font: inherit; font-size: var(--fs-450); text-align: right; font-variant-numeric: tabular-nums; }
.ak .ak-money input:focus { outline: none; border-color: var(--red); box-shadow: 0 0 0 3px var(--red-tint); }
.ak .ak-hbars-money li { grid-template-columns: minmax(80px, 110px) minmax(0, 1fr) 90px; }
.ak .ak-panel-foot > strong { font-size: var(--fs-500); color: var(--dp-ink); font-variant-numeric: tabular-nums; }
@media (max-width: 900px) {
    .ak .dp-head { flex-wrap: wrap; height: auto; min-height: 44px; padding-top: var(--sp-2); padding-bottom: var(--sp-2); row-gap: 2px; }
    .ak .dp-head-meta { white-space: normal; flex: 1 1 100%; line-height: 1.35; }
}
/* Long tables keep a bounded height on small screens too: a 1,000-row register stacked
   into the page buries everything below it. */
@media (max-width: 900px) { .ak .ak-scroll.is-tall { max-height: 70vh; } }

/* ---- emails ----------------------------------------------------------------------- */
.ak details.ak-mail pre { margin: 6px 0 2px; padding: var(--sp-25) var(--sp-3); max-height: 260px; overflow: auto; border: 1px solid var(--ak-line); border-radius: var(--radius-md); background: var(--surface-2); font: inherit; font-size: var(--fs-400); color: var(--text); white-space: pre-wrap; overflow-wrap: anywhere; }
.ak .ak-err { max-width: 280px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: #b00d28; }
.ak .ak-figs-actions .ak-status { margin-right: var(--sp-2); }
.ak .ak-err.ak-err-quiet { color: var(--text-3); }

/* ---- users ------------------------------------------------------------------------ */
.ak .ak-users { list-style: none; margin: 0; padding: 0; }
.ak .ak-user { display: grid; grid-template-columns: minmax(220px, 1fr) auto; gap: var(--sp-3) var(--sp-5); align-items: center; padding: var(--sp-3) var(--sp-4); border-bottom: 1px solid var(--ak-line-2); }
.ak .ak-user:last-child { border-bottom: 0; }
.ak .ak-user.is-off { background: var(--surface-2); }
.ak .ak-user.is-off .ak-user-id strong { color: var(--text-3); }
.ak .ak-user-id { display: flex; align-items: center; gap: var(--sp-3); min-width: 0; }
.ak .ak-user-id > div { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.ak .ak-user-id strong { font-size: var(--fs-500); color: var(--dp-ink); }
.ak .ak-avatar { display: inline-grid; place-items: center; width: 38px; height: 38px; flex-shrink: 0; border-radius: 2px; background: var(--dp-ink); color: var(--white); font-weight: var(--fw-bold); }
.ak .ak-user.is-off .ak-avatar { background: #9aa0aa; }
.ak .ak-user-tags { margin-top: 2px; }
.ak .ak-user-ctl { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: flex-end; gap: var(--sp-3); }
.ak .ak-user-form { display: flex; align-items: flex-end; gap: 6px; margin: 0; }
.ak .ak-user-form .ak-field { width: 160px; }
.ak .ak-user-form .ak-field input, .ak .ak-user-form .ak-field select { height: 32px; }
.ak .ak-user-toggle { margin: 0; }
.ak .ak-pad-kv { padding: var(--sp-2) var(--sp-4) var(--sp-3); }
@media (max-width: 1100px) { .ak .ak-user { grid-template-columns: minmax(0, 1fr); } .ak .ak-user-ctl { justify-content: flex-start; } }
@media (max-width: 600px) { .ak .ak-user-form { flex: 1 1 100%; } .ak .ak-user-form .ak-field { flex: 1; width: auto; } }

/* ---- settings ------------------------------------------------------------------- */
.ak .ak-st-status .ak-fig .ak-status { font-size: var(--fs-500); padding: 4px 0 2px; }
.ak .ak-tabs { display: flex; flex-wrap: wrap; gap: 0; border-bottom: 2px solid var(--dp-ink); }
.ak .ak-tabs .tab-btn { display: inline-flex; align-items: center; gap: 8px; height: 44px; padding: 0 var(--sp-5); margin: 0; border: 1px solid var(--ak-line); border-bottom: 0; border-radius: var(--radius-md) var(--radius-md) 0 0; background: var(--surface); font: inherit; font-size: var(--fs-450); font-weight: var(--fw-semi); color: var(--text-2); cursor: pointer; margin-right: 4px; }
.ak .ak-tabs .tab-btn:hover { color: var(--dp-ink); border-color: var(--ak-border-hover); }
.ak .ak-tabs .tab-btn[aria-selected="true"] { background: var(--dp-ink); color: var(--white); border-color: var(--dp-ink); }
.ak .ak-tabs .tab-btn:focus-visible { outline: none; box-shadow: inset 0 0 0 2px var(--red); }
.ak .ak-tabpanel { display: flex; flex-direction: column; gap: var(--dp-gap); }
.ak .ak-tabpanel[hidden] { display: none; }
.ak .ak-savebar { display: flex; align-items: center; justify-content: flex-end; gap: var(--sp-3); margin-top: var(--dp-gap); padding: var(--sp-3) var(--sp-4); border: 1px solid var(--ak-line); border-radius: var(--dp-radius); background: var(--surface); font-size: var(--fs-400); color: var(--text-3); }
.ak .ak-onhead { display: inline-flex; align-items: center; gap: 6px; height: 24px; padding: 0 8px; border: 1px solid rgba(255,255,255,.3); border-radius: 2px; font-size: var(--fs-300); font-weight: var(--fw-semi); color: var(--on-dark); }
.ak .ak-onhead::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: #9aa0aa; }
.ak .ak-onhead.is-ok::before { background: #3fbf6e; }
.ak .ak-onhead.is-bad::before { background: #ff4d63; }
.ak .dp-head .ak-head-actions form button { display: inline-flex; align-items: center; height: 28px; padding: 0 var(--sp-25); border: 1px solid rgba(255,255,255,.28); border-radius: var(--radius-sm); background: var(--red); color: var(--white); font: inherit; font-size: var(--fs-300); font-weight: var(--fw-semi); cursor: pointer; }
.ak .ak-addbox { border-top: 1px solid var(--ak-line); background: var(--surface-2); }
.ak .ak-addbox .ak-sub-head { margin-top: 0; }
.ak details.ak-row-edit > summary { font-size: var(--fs-300); }
.ak tr.ak-expand .ak-row-edit { padding: 6px var(--sp-4); }
.ak tr.ak-expand .ak-row-edit[open] { padding-bottom: var(--sp-4); }
.ak .ak-checks { display: flex; flex-direction: column; gap: 6px; }
.ak .ak-check-strong { border-color: var(--ak-border); }
.ak .ak-check-warn { border-color: #ecd3a6; background: #fffbf3; }
.ak .ak-field-narrow { max-width: 260px; }
.ak .ak-cmds { display: flex; flex-direction: column; gap: var(--sp-2); }
.ak .ak-cmd { display: flex; align-items: center; gap: var(--sp-2); }
.ak .ak-cmd code { flex: 1; min-width: 0; padding: 7px 10px; border: 1px solid var(--ak-line); border-radius: var(--radius-sm); background: var(--surface); font-family: var(--font-mono); font-size: var(--fs-300); overflow-wrap: anywhere; }
.ak .ak-steps-list { margin: var(--sp-2) 0 0; padding-left: 20px; display: flex; flex-direction: column; gap: 6px; font-size: var(--fs-400); color: var(--text-2); }
.ak .ak-addr { margin: var(--sp-2) 0; padding: var(--sp-25) var(--sp-3); border-left: 3px solid var(--dp-ink); background: var(--surface-2); font-size: var(--fs-400); }
@media (max-width: 600px) { .ak .ak-tabs .tab-btn { flex: 1 1 45%; padding: 0 var(--sp-3); font-size: var(--fs-400); } .ak .ak-st-status { --figs: 2 !important; } }

/* ---- devices -------------------------------------------------------------------- */
.ak .ak-bcs { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: var(--sp-3); }
.ak .ak-bc { display: flex; flex-direction: column; gap: 6px; padding: var(--sp-3); border: 1px solid var(--ak-line); border-radius: var(--radius-md); background: #fff; }
.ak .ak-bc.is-default { border-color: var(--dp-ink); box-shadow: inset 0 0 0 1px var(--dp-ink); }
.ak .ak-bc-code { display: flex; justify-content: center; padding: var(--sp-2) 0; line-height: 0; }
.ak .ak-bc-code svg { max-width: 100%; height: 48px; width: auto; }
.ak .ak-bc-title { display: flex; align-items: center; gap: 6px; font-weight: var(--fw-bold); color: var(--dp-ink); }
.ak .ak-bc-cmd { font-family: var(--font-mono); font-size: var(--fs-250); color: var(--text-3); overflow-wrap: anywhere; }
.ak .ak-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--sp-5); align-items: start; }
.ak .ak-split .ak-lead { margin: 0; }
.ak .ak-flow-inline, .ak .ak-flow-top { margin-top: 0; padding-top: 0; border-top: 0; }
.ak .ak-flow li { align-items: flex-start; }
.ak .ak-flow li b { margin-top: 1px; }
.ak .ak-qr { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: var(--sp-6, 32px); align-items: start; }
.ak .ak-qr-panel { display: flex; flex-direction: column; align-items: center; gap: var(--sp-2); padding: var(--sp-4); border: 1px solid var(--ak-line); border-radius: var(--radius-md); background: #fff; text-align: center; }
.ak .ak-qr-panel img, .ak .ak-qr-panel svg { width: 240px; height: 240px; }
.ak .ak-qr-payload { display: block; max-width: 100%; padding: 6px 8px; border-radius: var(--radius-sm); background: var(--surface-2); font-family: var(--font-mono); font-size: var(--fs-250); color: var(--text-2); overflow-wrap: anywhere; text-align: left; }
.ak .ak-tester input { height: 54px; font-size: 18px; font-family: var(--font-mono); }
.ak .ak-verdict { padding: var(--sp-3) var(--sp-4); border: 1px solid var(--ak-line); border-left: 3px solid var(--dp-cell-3); border-radius: var(--radius-md); background: var(--surface-2); font-size: var(--fs-450); color: var(--text-2); }
.ak .ak-verdict.is-ok { border-left-color: #1d7a3e; background: #f5fbf7; color: #1d6b38; }
.ak .ak-verdict.is-warn { border-left-color: #c98a12; background: #fffbf3; color: var(--dp-amber); }
.ak .ak-test-codes { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-3); }
.ak .ak-test-codes img { height: 64px; padding: 6px 10px; border: 1px solid var(--ak-line); border-radius: var(--radius-sm); background: #fff; }
@media (max-width: 1100px) { .ak .ak-split, .ak .ak-qr { grid-template-columns: minmax(0, 1fr); } .ak .ak-qr-panel { max-width: 340px; } }
/* panel footers colour plain links red; buttons inside keep their own colours */
.ak .ak-panel-foot a.ak-btn { color: var(--dp-ink); }
.ak .ak-panel-foot a.ak-btn:hover, .ak .ak-panel-foot a.ak-btn-dark, .ak .ak-panel-foot a.ak-btn-primary { color: var(--white); }
/* numbered steps: the number sits in a gutter so mixed inline text (<strong>, <a>) flows normally */
.ak .ak-flow li { display: block; position: relative; padding-left: 30px; min-height: 20px; line-height: 20px; }
.ak .ak-flow li > b { position: absolute; left: 0; top: 0; }

/* ---- printers / guide / sync ------------------------------------------------------ */
.ak .ak-pcards { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: var(--sp-3); }
.ak .ak-pcard { display: flex; flex-direction: column; gap: 6px; padding: var(--sp-35) var(--sp-4); border: 1px solid var(--ak-line); border-radius: var(--radius-md); background: var(--surface); }
.ak .ak-pcard > header { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2); }
.ak .ak-pcard > header strong { font-size: var(--fs-500); color: var(--dp-ink); }
.ak .ak-pcard-figs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-2); padding: var(--sp-25) 0; border-top: 1px solid var(--ak-line-2); border-bottom: 1px solid var(--ak-line-2); margin: 4px 0; }
.ak .ak-pcard-figs div { display: flex; flex-direction: column; }
.ak .ak-pcard-figs strong { font-size: 22px; line-height: 1.1; color: var(--dp-ink); font-variant-numeric: tabular-nums; }
.ak .ak-pcard-figs span { font-size: var(--fs-300); color: var(--text-3); }
.ak.ak-narrow { max-width: 920px; }
.ak .ak-guide { display: flex; flex-direction: column; gap: var(--sp-4); }
.ak .ak-verdict.is-bad { border-left-color: var(--red); background: var(--red-light); color: var(--red-dark); }
.ak .ak-guide-steps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--sp-25); }
.ak .ak-guide-steps li { display: flex; gap: var(--sp-3); align-items: flex-start; padding: var(--sp-3) var(--sp-4); border: 1px solid var(--ak-line); border-radius: var(--radius-md); }
.ak .ak-guide-steps b { display: inline-grid; place-items: center; width: 30px; height: 30px; flex-shrink: 0; border-radius: 2px; background: var(--dp-ink); color: var(--white); font-size: var(--fs-450); }
.ak .ak-guide-steps div { display: flex; flex-direction: column; gap: 2px; }
.ak .ak-guide-steps strong { font-size: var(--fs-500); color: var(--dp-ink); }
.ak .ak-guide-steps span { font-size: var(--fs-450); color: var(--text-2); }
.ak .ak-sync { display: flex; flex-direction: column; gap: var(--sp-25); }
.ak .ak-sync > div { display: flex; flex-direction: column; gap: 2px; padding: var(--sp-25) var(--sp-3); border-left: 3px solid var(--dp-ink); background: var(--surface-2); }
.ak .ak-sync span { font-size: var(--fs-400); color: var(--text-2); }
.ak .ak-log { margin: 0; padding: var(--sp-35) var(--sp-4); max-height: 320px; overflow: auto; background: var(--black-2); color: #e6e8ec; font-family: var(--font-mono); font-size: var(--fs-300); line-height: 1.55; white-space: pre-wrap; overflow-wrap: anywhere; border-radius: 0 0 var(--dp-radius) var(--dp-radius); }

/* ---- label preview / database ------------------------------------------------------ */
.ak .ak-lp-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 520px), 1fr)); gap: var(--dp-gap); align-items: start; }
.ak .ak-lp-cell .dp-body { display: flex; flex-direction: column; gap: var(--sp-25); }
.ak .ak-lp-cell .ak-onhead::before { display: none; }
.ak .ak-lp-printers { display: flex; flex-direction: column; gap: 4px; margin: 0; font-size: var(--fs-400); }
.ak .ak-lp-printers > span { display: inline-flex; align-items: center; gap: 6px; }
.ak .ak-lp-canvas { padding: var(--sp-4); border: 1px dashed var(--ak-border); border-radius: var(--radius-md); background: repeating-linear-gradient(45deg, #f6f7f9 0 8px, #fbfbfc 8px 16px); display: flex; justify-content: center; }
.ak .ak-figs-actions .ak-seg button { height: 32px; }
.ak .ak-db-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--sp-2); }

.ak .ak-notes { margin: 0; padding: var(--sp-3) var(--sp-4) var(--sp-4) 34px; display: flex; flex-direction: column; gap: 8px; font-size: var(--fs-400); color: var(--text-2); }

/* ---- API docs (api-docs.php) ------------------------------------------------ */
.ad .ad-layout { display: grid; grid-template-columns: 290px minmax(0, 1fr); gap: var(--dp-gap); align-items: start; }
.ad .ad-nav { position: sticky; top: 82px; max-height: calc(100vh - 98px); display: flex; flex-direction: column; background: #fff; border: 1px solid #d3d6dc; border-radius: var(--dp-radius); box-shadow: var(--ak-shadow); overflow: hidden; }
.ad .ad-filter { display: flex; align-items: center; gap: 8px; padding: 10px 12px; border-bottom: 1px solid var(--ak-line); background: #101014; color: #c9ccd3; }
.ad .ad-filter .dp-ico { width: 17px; height: 17px; flex-shrink: 0; }
.ad .ad-filter input { flex: 1; min-width: 0; height: 36px; padding: 0 10px; border: 1px solid #3a3d46; border-radius: 6px; background: #1d1e24; color: #fff; font-size: 14px; }
.ad .ad-filter input::placeholder { color: #9da1ab; }
.ad .ad-filter input:focus { outline: 2px solid var(--red); outline-offset: 0; border-color: var(--red); }
.ad .ad-nav-list { position: relative; overflow-y: auto; padding: 8px 0 12px; overscroll-behavior: contain; }
.ad .ad-nav-top { display: block; margin: 2px 10px 6px; padding: 8px 10px; border-radius: 6px; font-weight: var(--fw-bold); color: var(--text); text-decoration: none; }
.ad .ad-nav-top:hover { background: #eef0f4; }
.ad .ad-nav-h { display: block; margin: 12px 20px 4px; font-size: 11.5px; font-weight: var(--fw-bold); letter-spacing: .08em; text-transform: uppercase; color: var(--text-3); }
.ad .ad-nav-group a { display: flex; align-items: center; gap: 8px; margin: 0 10px; padding: 6px 10px; border-radius: 6px; border-left: 3px solid transparent; color: var(--text); text-decoration: none; min-width: 0; }
.ad .ad-nav-group a:hover { background: #eef0f4; }
.ad .ad-nav-group a.is-on { background: #fbe1e6; border-left-color: var(--red); }
.ad .ad-nav-path { font-family: var(--font-mono); font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ad .ad-nav-none { margin: 12px 20px; color: var(--text-2); }

/* method badges: filled, square — GET green, POST red, PATCH amber */
.ad .ad-m { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; min-width: 50px; height: 22px; padding: 0 6px; border-radius: 2px; font-family: var(--font-mono); font-size: 11.5px; font-weight: 700; letter-spacing: .04em; }
.ad .ad-m.is-get { background: #dff1e5; color: #17623a; }
.ad .ad-m.is-post { background: #fbe1e6; color: #a00b25; }
.ad .ad-m.is-patch { background: #fbedd2; color: #7a4f00; }

.ad .ad-main { display: flex; flex-direction: column; gap: var(--dp-gap); min-width: 0; }
.ad .ad-group-h { margin: 14px 0 -4px; padding-left: 12px; border-left: 4px solid var(--red); font-size: 20px; font-weight: 800; letter-spacing: -.01em; color: var(--text); }
.ad .ad-h3 { margin: 18px 0 8px; font-size: 12.5px; font-weight: var(--fw-bold); letter-spacing: .08em; text-transform: uppercase; color: var(--text-2); }
.ad .ad-code-inline { padding: 2px 7px; border-radius: 2px; background: #eceef2; font-family: var(--font-mono); font-size: 13.5px; color: var(--text); overflow-wrap: anywhere; }

/* getting started */
.ad .ad-start-grid { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: var(--sp-6, 32px); }
.ad .ad-start-grid .ad-h3:first-child { margin-top: 0; }
.ad .ad-kv { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 10px 16px; margin: 0; align-items: center; }
.ad .ad-kv dt { font-size: 12.5px; font-weight: var(--fw-bold); text-transform: uppercase; letter-spacing: .06em; color: var(--text-2); }
.ad .ad-kv dd { margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; line-height: 1.6; }
.ad .ad-auth td:first-child, .ad .ad-errs td:first-child { width: 120px; }
.ad .ad-start-note { margin-top: 14px; }

/* auth / status chips */
.ad .ad-auth-tag { display: inline-flex; align-items: center; height: 24px; padding: 0 9px; border-radius: 2px; font-size: 12.5px; font-weight: 700; white-space: nowrap; background: #eceef2; color: #23262d; }
.ad .ad-auth-tag.is-public { background: #dff1e5; color: #17623a; }
.ad .ad-auth-tag.is-write, .ad .ad-auth-tag.is-consume { background: #fbe1e6; color: #a00b25; }
.ad .ad-auth-tag.is-admin { background: #101014; color: #fff; }
.ad .ad-auth-tag.is-scanner { background: #fbedd2; color: #7a4f00; }
.ad .ad-auth-tag.is-ext { background: #fff; color: #23262d; box-shadow: inset 0 0 0 1px #c6cad1; }
.ad .ad-code { display: inline-flex; align-items: center; justify-content: center; min-width: 46px; height: 24px; padding: 0 7px; border-radius: 2px; font-family: var(--font-mono); font-size: 13px; font-weight: 700; background: #eceef2; color: #23262d; }
.ad .ad-code.is-2xx { background: #dff1e5; color: #17623a; }
.ad .ad-code.is-4xx { background: #fbedd2; color: #7a4f00; }
.ad .ad-code.is-5xx { background: #fbe1e6; color: #a00b25; }

/* endpoint card */
.ad .ad-ep, .ad .ad-start { scroll-margin-top: 82px; overflow: hidden; }
.ad .ad-ep-head { display: flex; align-items: center; gap: 12px; padding: 14px 18px; background: #101014; border-bottom: 2px solid var(--red); }
.ad .ad-ep-head .ad-m { height: 26px; min-width: 58px; font-size: 13px; }
.ad .ad-ep-path { flex: 1; min-width: 0; font-family: var(--font-mono); font-size: 18px; font-weight: 700; color: #fff; overflow-wrap: anywhere; }
.ad .ad-ep-tags { display: flex; gap: 6px; flex-shrink: 0; }
.ad .ad-ep-body { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); }
.ad .ad-ep-doc { padding: 18px 22px 20px; min-width: 0; }
.ad .ad-ep-ex { padding: 16px 18px 18px; background: #f3f4f7; border-left: 1px solid var(--ak-line); min-width: 0; }
.ad .ad-summary { margin: 0; font-size: 16px; font-weight: 600; line-height: 1.5; color: var(--text); }
.ad .ad-detail { margin: 8px 0 0; font-size: 14.5px; line-height: 1.6; color: var(--text-2); }
.ad .ad-none-p { margin: 16px 0 0; color: var(--text-2); }
.ad .ad-params td { vertical-align: top; padding-top: 10px; padding-bottom: 10px; line-height: 1.5; }
.ad .ad-params th:nth-child(1) { width: 26%; }
.ad .ad-params th:nth-child(2) { width: 9%; }
.ad .ad-params th:nth-child(3) { width: 10%; }
.ad .ad-pname { font-family: var(--font-mono); font-weight: 700; font-size: 14px; color: var(--text); }
.ad .ad-req { display: inline-block; margin-left: 6px; padding: 0 5px; border-radius: 2px; background: #fbe1e6; color: #a00b25; font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; vertical-align: 1px; }
.ad .ad-in { font-style: normal; font-size: 12.5px; color: var(--text-2); }
.ad .ad-err-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.ad .ad-err-list li { display: flex; align-items: flex-start; gap: 10px; line-height: 1.5; font-size: 14.5px; }
.ad .ad-returns { margin: 16px 0 0; font-size: 13.5px; color: var(--text-2); }

/* example tabs and code */
.ad .ad-tabs { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 10px; }
.ad .ad-tab { display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 14px; border: 1px solid #d3d6dc; border-radius: 6px; background: #fff; font: inherit; font-size: 14px; font-weight: 600; color: var(--text); cursor: pointer; }
.ad .ad-tab:hover { border-color: #a9adb6; }
.ad .ad-tab.is-on { background: #101014; border-color: #101014; color: #fff; }
.ad .ad-tab.is-try { margin-left: auto; border-color: var(--red); color: var(--red-dark); }
.ad .ad-tab.is-try.is-on { background: var(--red); border-color: var(--red); color: #fff; }
.ad .ad-tab .dp-ico { width: 15px; height: 15px; }
.ad .ad-pane-bar { display: flex; align-items: center; gap: 10px; min-height: 40px; padding: 6px 8px 6px 12px; background: #1d1e24; border-radius: 8px 8px 0 0; color: #c9ccd3; }
.ad .ad-req-line { flex: 1; min-width: 0; font-family: var(--font-mono); font-size: 13px; color: #e6e8ec; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ad .ad-lang { flex: 1; font-size: 12.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: #c9ccd3; }
.ad .ad-copy { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 10px; border: 1px solid #3a3d46; border-radius: 6px; background: transparent; color: #e6e8ec; font: inherit; font-size: 13px; cursor: pointer; }
.ad .ad-copy:hover { border-color: #9da1ab; }
.ad .ad-copy .dp-ico { width: 14px; height: 14px; }
.ad .ad-pre { margin: 0; padding: 14px 16px; max-height: 460px; overflow: auto; background: #101014; color: #e6e8ec; font-family: var(--font-mono); font-size: 13.5px; line-height: 1.6; white-space: pre; tab-size: 2; border-radius: 0 0 8px 8px; }
.ad .ad-pane > .ad-pre:not(:last-child), .ad .ad-reqbody .ad-pre { border-radius: 0; }
.ad .ad-pre .ad-k { color: #ffffff; font-weight: 700; }
.ad .ad-pre .ad-s { color: #9fe3b3; }
.ad .ad-pre .ad-n { color: #ffd38a; }
.ad .ad-pre .ad-l { color: #ff9aa9; }
.ad .ad-reqbody { background: #17181d; border-top: 1px solid #2a2c33; }
.ad .ad-reqbody summary { padding: 8px 14px; cursor: pointer; font-size: 13px; font-weight: 600; color: #c9ccd3; }
.ad .ad-reqbody[open] summary { border-bottom: 1px solid #2a2c33; }
.ad .ad-pane-note { display: flex; align-items: center; gap: 8px; margin: 10px 2px 0; font-size: 13.5px; color: var(--text-2); }
.ad .ad-pane-note .dp-ico { width: 16px; height: 16px; flex-shrink: 0; }

/* Try it */
.ad .ad-try { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px 12px; padding: 14px; margin-bottom: 10px; background: #fff; border: 1px solid #d3d6dc; border-radius: 8px; }
.ad .ad-try-field { flex: 1 1 200px; min-width: 0; }
.ad .ad-try-field > span em { font-style: normal; color: #a00b25; font-size: 11px; font-weight: 700; text-transform: uppercase; }
.ad .ad-try-field input { width: 100%; font-family: var(--font-mono); }
.ad .ad-try-go { flex: 1 1 100%; display: flex; align-items: center; flex-wrap: wrap; gap: 12px; }
.ad .ad-try-hint { font-size: 13.5px; color: var(--text-2); }
.ad .ad-try-ms { font-family: var(--font-mono); font-size: 12.5px; color: #c9ccd3; }
.ad .ad-try-img { display: block; max-width: 100%; background: #fff; padding: 10px; border-radius: 4px; }

@media (max-width: 1600px) {
    .ad .ad-ep-body { grid-template-columns: minmax(0, 1fr); }
    .ad .ad-ep-ex { border-left: 0; border-top: 1px solid var(--ak-line); }
}
@media (max-width: 1150px) {
    .ad .ad-layout { grid-template-columns: minmax(0, 1fr); }
    .ad .ad-nav { position: static; max-height: 340px; }
    .ad .ad-start-grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 600px) {
    .ad .ad-ep-head { flex-wrap: wrap; padding: 12px 14px; }
    .ad .ad-ep-path { flex-basis: 100%; order: 3; font-size: 16px; }
    .ad .ad-ep-doc, .ad .ad-ep-ex { padding: 14px; }
    .ad .ad-kv { grid-template-columns: minmax(0, 1fr); gap: 4px; }
    .ad .ad-kv dd { margin-bottom: 8px; }
    .ad .ad-tab.is-try { margin-left: 0; }
    .ad .ad-pre { font-size: 12.5px; max-height: 360px; }
    .ad .ad-auth td:first-child, .ad .ad-errs td:first-child { width: auto; }
}
/* Kit rules set display on many elements, which beats the UA [hidden] rule; scripts toggle hidden. */
.ak [hidden] { display: none !important; }

/* ---- previews index: same column widths in every group so the rows line up */
.ak .ak-pv-table { table-layout: fixed; }
.ak .ak-pv-table th:nth-child(1) { width: 200px; }
.ak .ak-pv-table th:nth-child(3) { width: 220px; }
.ak .ak-pv-table th:nth-child(4) { width: 150px; }
@media (max-width: 600px) { .ak .ak-pv-table { table-layout: auto; } }

/* shipments: the selected shipment opens under its row - details left, contents right */
.ak .ak-ship-detail { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: var(--sp-5); align-items: start; }
.ak .ak-ship-detail .ak-sub-head { margin-top: 0; }
@media (max-width: 900px) { .ak .ak-ship-detail { grid-template-columns: minmax(0, 1fr); gap: var(--sp-3); } }

/* ==== Look B (Lee picked it 2026-11-02): readable type, firmer edges, filled square tags,
   black table heads with the red line, figure cards like his Reports page. Later rules win
   over the base rules above, so these are the effective values. */
body:has(.ak) .content { background: #e6e8ed; }
.ak {
    --fs-250: 12.5px; --fs-300: 13.5px; --fs-400: 14px; --fs-450: 15px; --fs-500: 15.5px;
    --text-2: #2f323a; --text-3: #474a52;
    --ak-line: #d8dbe1; --ak-line-2: #e3e5ea; --ak-border: #c6cad1;
    --ak-row: 50px; --ak-field-h: 46px;
    --ak-shadow: 0 1px 2px rgba(16,16,20,.06), 0 4px 14px rgba(16,16,20,.05);
}
.ak .dp-panel { border: 1px solid #d3d6dc; box-shadow: var(--ak-shadow); }
.ak .dp-head h2 { font-size: 15px; }
.ak .ak-table thead th { height: 42px; background: #101014; color: #fff; border-bottom: 2px solid var(--red); }
.ak .ak-table tbody tr:nth-child(even):not(.ak-expand) td { background: #f7f8fa; }
.ak .ak-table tbody tr:hover td { background: #eef0f4; }
.ak .ak-sub, .ak .ak-hint { line-height: 1.45; }
.ak .ak-field > span { font-size: 12.5px; color: var(--text-2); }
.ak input, .ak select, .ak textarea { font-size: 15px; }

/* tags and status: filled tint, square 2px corners (Lee dislikes rounded pills) */
.ak .ak-tag { border-color: transparent; background: #eceef2; color: #23262d; border-radius: 2px; height: 24px; padding: 0 8px; }
.ak .ak-tag-ink, .ak .ak-tag-mono { background: #101014; color: #fff; }
.ak .ak-tag-ok { background: #dff1e5; color: #17623a; }
.ak .ak-tag-warn { background: #fbedd2; color: #7a4f00; }
.ak .ak-tag-bad { background: #fbe1e6; color: #a00b25; }
.ak .ak-status { padding: 3px 8px 3px 7px; border-radius: 2px; background: #eceef2; }
.ak .ak-status.is-ok { background: #dff1e5; }
.ak .ak-status.is-warn { background: #fbedd2; color: #7a4f00; }
.ak .ak-status.is-bad { background: #fbe1e6; }

/* figures: separate cards, number first */
.ak .ak-figs { background: none; border: 0; box-shadow: none; gap: var(--dp-gap); overflow: visible; }
.ak .ak-fig { background: #fff; border: 1px solid #d3d6dc; border-radius: var(--dp-radius); box-shadow: var(--ak-shadow); padding: var(--sp-4) var(--sp-5); }
.ak .ak-fig > strong { order: -1; font-size: 34px; }
.ak .ak-span-all { grid-column: 1 / -1; }
/* mcd-sync result: command output inside a notice, no dark log box */
.ak .ak-note .ak-log-inline { padding: 0; max-height: 220px; background: none; color: inherit; border-radius: 0; font-size: var(--fs-300); }

/* ---- Settings > System (settings.php) -------------------------------------- */
.ak .sy-panel { display: flex; flex-direction: column; }
.ak .sy-pad { margin: var(--sp-4) var(--sp-4) 0; }
.ak .sy-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); border-bottom: 1px solid var(--ak-line); }
.ak .sy-stats.is-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.ak .sy-stat { display: flex; flex-direction: column; gap: 4px; padding: 18px 20px; border-right: 1px solid var(--ak-line-2); min-width: 0; }
.ak .sy-stat:last-child { border-right: 0; }
.ak .sy-stat-label { font-size: 12.5px; font-weight: var(--fw-bold); letter-spacing: .07em; text-transform: uppercase; color: var(--text-2); }
.ak .sy-stat-num { font-size: 32px; line-height: 1.1; font-weight: 800; letter-spacing: -.02em; color: var(--text); font-variant-numeric: tabular-nums; }
.ak .sy-stat.is-warn .sy-stat-num { color: #8a5a00; }
.ak .sy-stat.is-bad .sy-stat-num { color: #a00b25; }
.ak .sy-stat-sub { font-size: 14px; line-height: 1.4; color: var(--text-2); }
.ak .sy-meter { display: block; height: 8px; margin: 4px 0 2px; border-radius: 2px; background: #e3e5ea; overflow: hidden; }
.ak .sy-meter i { display: block; height: 100%; background: #101014; }
.ak .sy-stat.is-ok .sy-meter i { background: #1d7a3e; }
.ak .sy-stat.is-warn .sy-meter i { background: #c98a12; }
.ak .sy-stat.is-bad .sy-meter i { background: #c8102e; }

.ak .sy-kv { padding: 6px var(--sp-5) 8px; }
.ak .sy-kv > dt { font-size: 14px; }
.ak .sy-kv > dd { font-size: 15px; }
.ak .sy-dd-sub { display: block; margin-top: 2px; font-size: 13.5px; line-height: 1.45; color: var(--text-2); }
.ak .sy-dd-sub.ak-err { color: #a00b25; }
.ak .sy-foot { display: flex; align-items: flex-start; gap: 8px; margin: auto 0 0; padding: 12px var(--sp-5); border-top: 1px solid var(--ak-line-2); background: #f7f8fa; font-size: 13.5px; line-height: 1.5; color: var(--text-2); }
.ak .sy-foot .dp-ico { width: 16px; height: 16px; flex-shrink: 0; margin-top: 2px; }

.ak .sy-h { margin: 0 0 10px; font-size: 12.5px; font-weight: var(--fw-bold); letter-spacing: .08em; text-transform: uppercase; color: var(--text-2); }
.ak .sy-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--sp-5); padding: 18px var(--sp-5) 6px; }
.ak .sy-block { padding: 18px var(--sp-5) 4px; }
.ak .sy-block + .sy-block { border-top: 1px solid var(--ak-line-2); margin-top: 14px; }
.ak .sy-block-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
.ak .sy-block-head .sy-h { margin: 0; }
.ak .sy-total { font-size: 22px; font-weight: 800; font-variant-numeric: tabular-nums; }

.ak .sy-bars { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.ak .sy-bars li { display: grid; grid-template-columns: minmax(110px, 38%) minmax(0, 1fr) 52px; align-items: center; gap: 12px; font-size: 14.5px; }
.ak .sy-bar-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ak .sy-bar { display: block; height: 10px; border-radius: 2px; background: #e3e5ea; overflow: hidden; }
.ak .sy-bar i { display: block; height: 100%; background: #101014; }
.ak .sy-bar-n { text-align: right; font-variant-numeric: tabular-nums; }
.ak .sy-empty { margin: 0; }

.ak .sy-stack { display: flex; height: 14px; border-radius: 2px; overflow: hidden; background: #e3e5ea; gap: 2px; }
.ak .sy-stack i { display: block; min-width: 4px; flex-basis: 0; background: #6b6f78; }
.ak .sy-stack i.is-in, .ak .sy-key.is-in { background: #101014; }
.ak .sy-stack i.is-out, .ak .sy-key.is-out { background: #c8102e; }
.ak .sy-stack i.is-adjust, .ak .sy-key.is-adjust { background: #a9adb6; }
.ak .sy-legend { list-style: none; display: flex; flex-wrap: wrap; gap: 6px 22px; margin: 10px 0 0; padding: 0; font-size: 14.5px; color: var(--text-2); }
.ak .sy-legend li { display: inline-flex; align-items: center; gap: 7px; }
.ak .sy-legend strong { color: var(--text); font-variant-numeric: tabular-nums; }
.ak .sy-key { display: inline-block; width: 12px; height: 12px; border-radius: 2px; background: #6b6f78; }

.ak .sy-counts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; margin-bottom: 14px; background: var(--ak-line-2); border: 1px solid var(--ak-line-2); border-radius: 4px; overflow: hidden; }
.ak .sy-counts > div { display: flex; flex-direction: column; gap: 2px; padding: 12px 14px; background: #fff; }
.ak .sy-counts strong { font-size: 22px; font-weight: 800; font-variant-numeric: tabular-nums; }
.ak .sy-counts span { font-size: 13.5px; color: var(--text-2); }

@media (max-width: 1500px) {
    .ak #tab-system .ak-s8, .ak #tab-system .ak-s4 { grid-column: 1 / -1; }
}
@media (max-width: 1800px) {
    /* the Lifetime panel is half width here: printer names need the full row */
    .ak .sy-split { grid-template-columns: minmax(0, 1fr); gap: 18px; }
}
@media (max-width: 1100px) {
    .ak #tab-system .ak-s6 { grid-column: 1 / -1; }
}
@media (max-width: 600px) {
    .ak .sy-stats, .ak .sy-stats.is-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .ak .sy-stat { border-bottom: 1px solid var(--ak-line-2); padding: 14px; }
    .ak .sy-stat:nth-child(2n) { border-right: 0; }
    .ak .sy-stat-num { font-size: 26px; }
    .ak .sy-split { grid-template-columns: minmax(0, 1fr); }
    .ak .sy-counts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .ak .sy-bars li { grid-template-columns: minmax(0, 1fr) 44px; row-gap: 5px; }
    .ak .sy-bar-name { white-space: normal; overflow-wrap: anywhere; }
    .ak .sy-bars .sy-bar { grid-row: 2; grid-column: 1 / -1; }
    .ak .sy-kv, .ak .sy-block, .ak .sy-split, .ak .sy-foot { padding-left: 14px; padding-right: 14px; }
}

/* ---- Projects list (projects.php) ------------------------------------------- */
.ak .pj-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; }
.ak .pj-tools .pj-cust { flex: 0 1 260px; margin: 0; }
.ak .pj-tools .pj-cust select { height: 38px; }
.ak .pj-tools .pj-q { flex: 1 1 220px; max-width: 360px; }
.ak .pj-tools .pj-q input { height: 38px; }
.ak .pj-table td { vertical-align: middle; }
.ak .pj-name { display: flex; align-items: center; gap: 12px; color: var(--text); text-decoration: none; }
.ak .pj-name:hover strong { color: var(--red); text-decoration: underline; }
.ak .pj-name .ak-tag { min-width: 52px; justify-content: center; }
.ak .pj-name > span:last-child { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.ak .pj-name strong { font-size: 15px; }
.ak .pj-table td.ak-num .ak-sub { display: block; }
.ak .pj-table th:first-child { width: 32%; }