/* ==========================================================================
   EBC — Asset Inventory & Monitoring System
   Admin interface. WordPress-style fixed drawer, mobile-first responsive.

   Breakpoints
     base    < 768px   phone + tablet portrait  — off-canvas drawer, stacked tables
     >= 768px          tablet landscape         — icon rail drawer
     >= 1024px         small desktop            — icon rail + wider content
     >= 1280px         desktop                  — drawer auto-expands (admin.js)
   ========================================================================== */

:root {
    /* Brand / UI palette */
    --c-bg:            #f0f0f1;
    --c-surface:       #ffffff;
    --c-surface-alt:   #f6f7f7;
    --c-border:        #dcdcde;
    --c-border-strong: #c3c4c7;
    --c-text:          #1d2327;
    --c-text-soft:     #50575e;
    --c-text-faint:    #787c82;

    --c-nav-bg:        #1d2327;
    --c-nav-bg-hover:  #2c3338;
    --c-nav-sub-bg:    #2c3338;
    --c-nav-text:      #c3c4c7;
    --c-nav-text-hi:   #ffffff;

    --c-primary:       #2271b1;
    --c-primary-dark:  #135e96;
    --c-success:       #00844a;
    --c-success-bg:    #ecf7f1;
    --c-warning:       #b26200;
    --c-warning-bg:    #fdf6e9;
    --c-danger:        #b32d2e;
    --c-danger-bg:     #fcf0f1;
    --c-info:          #2271b1;
    --c-info-bg:       #eef4fa;

    --topbar-h:        48px;
    --drawer-w:        60px;

    --radius:          6px;
    --radius-sm:       4px;
    --shadow-sm:       0 1px 2px rgba(0, 0, 0, .06);
    --shadow-md:       0 4px 14px rgba(0, 0, 0, .12);

    --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

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

/*
 * The HTML `hidden` attribute must win.
 *
 * A class that sets a display value (.ico, .field, .btn, .ack__issue) comes from
 * the author stylesheet and so overrides the browser's own `[hidden]{display:none}`,
 * which silently leaves elements on screen that JavaScript believes it has hidden.
 * This one rule is what keeps `el.hidden = true` meaning what it says.
 */
[hidden] { display: none !important; }

html { -webkit-text-size-adjust: 100%; }

body.ebc-body {
    margin: 0;
    background: var(--c-bg);
    color: var(--c-text);
    font-family: var(--font);
    font-size: 14px;
    line-height: 1.55;
    padding-top: var(--topbar-h);
}

a { color: var(--c-primary); text-decoration: none; }
a:hover, a:focus { color: var(--c-primary-dark); text-decoration: underline; }

h1, h2, h3, p, ul, ol, dl, dd, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }

code { font-family: var(--font-mono); font-size: .92em; background: var(--c-surface-alt);
       border: 1px solid var(--c-border); border-radius: var(--radius-sm); padding: 1px 5px; }

:focus-visible { outline: 2px solid var(--c-primary); outline-offset: 2px; }

.skip-link {
    position: absolute; left: -9999px; top: 0; z-index: 200;
    background: var(--c-surface); padding: 10px 16px; border-radius: 0 0 var(--radius) 0;
}
.skip-link:focus { left: 0; }

.ico { display: block; flex: none; }

/* ==========================================================================
   Admin bar
   ========================================================================== */

.ebc-topbar {
    position: fixed; inset: 0 0 auto 0; z-index: 60;
    height: var(--topbar-h);
    display: flex; align-items: center; gap: 8px;
    padding: 0 10px;
    background: var(--c-nav-bg);
    color: var(--c-nav-text);
}

.ebc-topbar__burger {
    display: inline-flex; align-items: center; justify-content: center;
    width: 40px; height: 40px; flex: none;
    background: none; border: 0; border-radius: var(--radius-sm);
    color: inherit; cursor: pointer;
}
.ebc-topbar__burger:hover { background: var(--c-nav-bg-hover); color: #fff; }

.ebc-brand { display: flex; align-items: center; gap: 8px; color: #fff; flex: none; }
.ebc-brand:hover { color: #fff; text-decoration: none; }
.ebc-brand__mark {
    display: inline-grid; place-items: center;
    width: 30px; height: 30px; border-radius: var(--radius-sm);
    background: var(--c-primary); color: #fff;
    font-weight: 700; font-size: 11px; letter-spacing: .5px;
}
/* .ebc-brand__name lives with the responsive brand block at the end of this file. */

.ebc-search {
    position: relative; flex: 1 1 auto; max-width: 560px; margin: 0 auto;
    display: none;
}
.ebc-search__icon {
    position: absolute; left: 10px; top: 50%; transform: translateY(-50%);
    color: var(--c-text-faint); pointer-events: none;
}
.ebc-search__input {
    width: 100%; height: 32px;
    padding: 0 12px 0 34px;
    border: 1px solid transparent; border-radius: var(--radius);
    background: rgba(255, 255, 255, .1);
    color: #fff; font: inherit; font-size: 13px;
}
.ebc-search__input::placeholder { color: rgba(255, 255, 255, .55); }
.ebc-search__input:focus { background: #fff; color: var(--c-text); border-color: var(--c-primary); }
.ebc-search__input:focus + .ebc-search__icon { color: var(--c-text); }

.ebc-topbar__actions { display: flex; align-items: center; gap: 4px; margin-left: auto; }

.ebc-iconbtn {
    display: inline-grid; place-items: center;
    width: 38px; height: 38px; border-radius: var(--radius-sm);
    color: var(--c-nav-text);
}
.ebc-iconbtn:hover { background: var(--c-nav-bg-hover); color: #fff; text-decoration: none; }

.ebc-user { display: flex; align-items: center; gap: 8px; padding: 0 4px 0 8px; }
.ebc-user__avatar {
    display: inline-grid; place-items: center;
    width: 30px; height: 30px; border-radius: 50%;
    background: var(--c-nav-bg-hover); color: #fff;
}
.ebc-user__meta { display: none; line-height: 1.2; }
.ebc-user__name { display: block; color: #fff; font-size: 12.5px; font-weight: 600; }
.ebc-user__role { display: block; color: var(--c-nav-text); font-size: 11px; }

/* ==========================================================================
   Shell + drawer
   ========================================================================== */

.ebc-shell { display: block; }

.ebc-drawer {
    position: fixed; top: var(--topbar-h); bottom: 0; left: 0; z-index: 55;
    width: 240px;
    background: var(--c-nav-bg);
    transform: translateX(-100%);
    transition: transform .18s ease;
    overscroll-behavior: contain;
}
.ebc-drawer__inner {
    height: 100%; display: flex; flex-direction: column;
    overflow-y: auto; overflow-x: hidden;
    scrollbar-width: thin;
}

body[data-drawer-open="true"] .ebc-drawer { transform: translateX(0); }

.ebc-drawer-backdrop {
    position: fixed; inset: var(--topbar-h) 0 0 0; z-index: 50;
    background: rgba(0, 0, 0, .45);
}
.ebc-drawer-backdrop[hidden] { display: none; }

.ebc-nav { flex: 1 1 auto; padding: 6px 0 16px; }
.ebc-nav__list > .ebc-nav__item + .ebc-nav__item { margin-top: 1px; }

.ebc-nav__link {
    position: relative;
    display: flex; align-items: center; gap: 10px;
    min-height: 40px; padding: 8px 12px;
    color: var(--c-nav-text); font-size: 13.5px; font-weight: 500;
}
.ebc-nav__link:hover { background: var(--c-nav-bg-hover); color: var(--c-nav-text-hi); text-decoration: none; }

.ebc-nav__item.is-active > .ebc-nav__link {
    background: var(--c-nav-sub-bg); color: #fff;
    box-shadow: inset 4px 0 0 var(--c-primary);
}

.ebc-nav__label { flex: 1 1 auto; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ebc-nav__caret { transition: transform .15s ease; opacity: .7; }
.ebc-nav__link[aria-expanded="true"] .ebc-nav__caret { transform: rotate(90deg); }

.ebc-subnav { background: var(--c-nav-sub-bg); padding: 4px 0 6px; }
.ebc-subnav[hidden] { display: none; }
.ebc-subnav__heading { display: none; }

.ebc-subnav__link {
    display: block; padding: 7px 12px 7px 42px;
    color: var(--c-nav-text); font-size: 13px;
}
.ebc-subnav__link:hover { color: #72aee6; text-decoration: none; }
.ebc-subnav__item.is-active > .ebc-subnav__link { color: #fff; font-weight: 600; }

.ebc-drawer__collapse {
    display: none;
    align-items: center; gap: 10px;
    width: 100%; min-height: 40px; padding: 8px 12px;
    background: none; border: 0; border-top: 1px solid rgba(255, 255, 255, .08);
    color: var(--c-nav-text); font: inherit; font-size: 13px; cursor: pointer;
}
.ebc-drawer__collapse:hover { color: #fff; background: var(--c-nav-bg-hover); }

/* ==========================================================================
   Main content
   ========================================================================== */

.ebc-main { min-width: 0; display: flex; flex-direction: column; min-height: calc(100vh - var(--topbar-h)); }
.ebc-page { flex: 1 1 auto; padding: 16px 14px 28px; max-width: 1500px; width: 100%; }

.page-head {
    display: flex; flex-wrap: wrap; align-items: flex-start; gap: 12px;
    padding-bottom: 14px; margin-bottom: 16px;
    border-bottom: 1px solid var(--c-border);
}
.page-head__title { font-size: 20px; font-weight: 600; line-height: 1.3; }
.page-head__subtitle { color: var(--c-text-soft); font-size: 13px; margin-top: 2px; }
.page-head__actions { margin-left: auto; display: flex; flex-wrap: wrap; gap: 8px; }

.section + .section { margin-top: 22px; }
.section__title {
    font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
    color: var(--c-text-faint); margin-bottom: 10px;
}

/* Cards ------------------------------------------------------------------ */

.card {
    background: var(--c-surface);
    border: 1px solid var(--c-border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
    padding: 16px;
}
.card + .card { margin-top: 14px; }
.card--table { padding: 0; overflow: hidden; }
.card__title { font-size: 15px; font-weight: 600; margin-bottom: 10px; }
.card__note { color: var(--c-text-soft); font-size: 12.5px; margin-top: 12px; }

.card--placeholder { text-align: center; padding: 40px 20px; }
.placeholder__icon {
    display: inline-grid; place-items: center;
    width: 56px; height: 56px; margin-bottom: 14px;
    border-radius: 50%; background: var(--c-info-bg); color: var(--c-primary);
}
.placeholder__title { font-size: 18px; font-weight: 600; margin-bottom: 8px; }
.placeholder__text { color: var(--c-text-soft); max-width: 56ch; margin: 0 auto 8px; }
.placeholder__meta { color: var(--c-text-faint); font-size: 12.5px; max-width: 60ch; margin: 0 auto 18px; }

/* KPI tiles -------------------------------------------------------------- */

.kpi-grid {
    display: grid; gap: 10px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.kpi {
    background: var(--c-surface);
    border: 1px solid var(--c-border);
    border-left: 4px solid var(--c-border-strong);
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
    padding: 12px 14px;
}
.kpi__label { font-size: 11.5px; font-weight: 600; letter-spacing: .04em;
              text-transform: uppercase; color: var(--c-text-faint); }
.kpi__value { font-size: 26px; font-weight: 600; line-height: 1.2; margin-top: 4px;
              font-variant-numeric: tabular-nums; }
.kpi__hint  { font-size: 11.5px; color: var(--c-text-faint); margin-top: 2px; }

.kpi--success { border-left-color: var(--c-success); }
.kpi--info    { border-left-color: var(--c-info); }
.kpi--warning { border-left-color: var(--c-warning); }
.kpi--danger  { border-left-color: var(--c-danger); }

/* Badges ----------------------------------------------------------------- */

.badge {
    display: inline-block; padding: 2px 8px;
    border-radius: 999px; border: 1px solid transparent;
    font-size: 11.5px; font-weight: 600; white-space: nowrap;
    background: var(--c-surface-alt); color: var(--c-text-soft); border-color: var(--c-border);
}
.badge--success { background: var(--c-success-bg); color: var(--c-success); border-color: #b6e0c9; }
.badge--info    { background: var(--c-info-bg);    color: var(--c-info);    border-color: #bcd6ea; }
.badge--warning { background: var(--c-warning-bg); color: var(--c-warning); border-color: #efd6a8; }
.badge--danger  { background: var(--c-danger-bg);  color: var(--c-danger);  border-color: #f0c0c1; }

/* Buttons ---------------------------------------------------------------- */

.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 6px;
    min-height: 36px; padding: 6px 14px;
    border: 1px solid var(--c-border-strong); border-radius: var(--radius-sm);
    background: var(--c-surface); color: var(--c-text);
    font: inherit; font-size: 13px; font-weight: 500; cursor: pointer;
}
.btn:hover { background: var(--c-surface-alt); text-decoration: none; }
.btn--primary { background: var(--c-primary); border-color: var(--c-primary); color: #fff; }
.btn--primary:hover { background: var(--c-primary-dark); border-color: var(--c-primary-dark); color: #fff; }
.btn--ghost { background: transparent; }

/* Notices ---------------------------------------------------------------- */

.notice {
    display: flex; align-items: flex-start; gap: 10px;
    padding: 11px 12px; margin-bottom: 14px;
    border: 1px solid var(--c-border); border-left-width: 4px;
    border-radius: var(--radius); background: var(--c-surface);
}
.notice__text { font-size: 13px; color: var(--c-text-soft); }
.notice__close { margin-left: auto; background: none; border: 0; color: var(--c-text-faint); cursor: pointer; }
.notice--info    { border-left-color: var(--c-info);    background: var(--c-info-bg); }
.notice--success { border-left-color: var(--c-success); background: var(--c-success-bg); }
.notice--warning { border-left-color: var(--c-warning); background: var(--c-warning-bg); }
.notice--danger  { border-left-color: var(--c-danger);  background: var(--c-danger-bg); }
.notice--info .notice__icon    { color: var(--c-info); }
.notice--success .notice__icon { color: var(--c-success); }
.notice--warning .notice__icon { color: var(--c-warning); }
.notice--danger .notice__icon  { color: var(--c-danger); }

/* Tables ----------------------------------------------------------------- */

.table-wrap { width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }

.table { width: 100%; border-collapse: collapse; font-size: 13px; }
.table th, .table td { padding: 10px 12px; text-align: left; border-bottom: 1px solid var(--c-border); }
.table thead th {
    background: var(--c-surface-alt); color: var(--c-text-soft);
    font-size: 11.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
    white-space: nowrap; position: sticky; top: 0; z-index: 1;
}
.table tbody tr:hover { background: var(--c-surface-alt); }
.table .num { text-align: right; font-variant-numeric: tabular-nums; }
.table__empty td { color: var(--c-text-faint); text-align: center; padding: 26px 12px; }

/* Below 768px the "stack" variant turns each row into a labelled card. */
@media (max-width: 767px) {
    .table--stack thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
    .table--stack tbody tr {
        display: block; padding: 8px 12px;
        border-bottom: 8px solid var(--c-bg);
    }
    .table--stack tbody td {
        display: flex; justify-content: space-between; gap: 14px;
        padding: 5px 0; border: 0; text-align: right;
    }
    .table--stack tbody td::before {
        content: attr(data-label);
        font-weight: 600; color: var(--c-text-faint); text-align: left;
        font-size: 11.5px; letter-spacing: .03em; text-transform: uppercase;
    }
    .table--stack .table__empty td { display: block; text-align: center; }
    .table--stack .table__empty td::before { content: none; }
}

/* Definition list -------------------------------------------------------- */

.deflist { display: grid; grid-template-columns: 1fr; gap: 2px 16px; font-size: 13px; }
.deflist dt { font-weight: 600; color: var(--c-text-soft); }
.deflist dd { margin: 0 0 8px; overflow-wrap: anywhere; }

/* Lifecycle strip + accountability equation ------------------------------ */

.lifecycle { display: flex; flex-wrap: wrap; gap: 6px; }
.lifecycle__step {
    position: relative;
    padding: 5px 10px;
    background: var(--c-surface-alt); border: 1px solid var(--c-border);
    border-radius: 999px; font-size: 12px; color: var(--c-text-soft); white-space: nowrap;
}
.lifecycle__step::after { content: "\203A"; margin-left: 8px; color: var(--c-text-faint); }
.lifecycle__step:last-child::after { content: none; }

.equation { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.equation__op { color: var(--c-text-faint); font-weight: 700; }
.equation__term {
    padding: 6px 12px; border-radius: var(--radius-sm);
    font-size: 12px; font-weight: 700; letter-spacing: .04em;
    border: 1px solid var(--c-border);
}
.equation__term--total { background: var(--c-text); color: #fff; border-color: var(--c-text); }
.equation__term--ok    { background: var(--c-success-bg); color: var(--c-success); }
.equation__term--warn  { background: var(--c-warning-bg); color: var(--c-warning); }
.equation__term--bad   { background: var(--c-danger-bg);  color: var(--c-danger); }
.equation__term--info  { background: var(--c-info-bg);    color: var(--c-info); }

/* Footer ----------------------------------------------------------------- */

.ebc-footer {
    display: flex; flex-wrap: wrap; gap: 4px 16px; justify-content: space-between;
    padding: 14px; border-top: 1px solid var(--c-border);
    color: var(--c-text-faint); font-size: 12px;
}

/* Blank layout ----------------------------------------------------------- */

.ebc-body--blank { padding-top: 0; background: var(--c-bg); }
.ebc-blank { min-height: 100vh; display: flex; flex-direction: column; align-items: center;
             justify-content: center; padding: 24px; gap: 18px; }
.ebc-blank__card {
    background: var(--c-surface); border: 1px solid var(--c-border);
    border-radius: var(--radius); box-shadow: var(--shadow-md);
    padding: 28px; max-width: 760px; width: 100%;
}
.trace {
    background: var(--c-surface-alt); border: 1px solid var(--c-border); border-radius: var(--radius-sm);
    padding: 12px; margin: 14px 0; overflow-x: auto;
    font-family: var(--font-mono); font-size: 12px; white-space: pre-wrap; word-break: break-word;
}
.ebc-footer--blank { border: 0; justify-content: center; }

/* ==========================================================================
   >= 768px — tablet landscape and up: permanent drawer

   Default state is the icon rail (60px). The drawer expands only when
   body[data-drawer="expanded"] is set — admin.js applies that automatically on
   screens >= 1280px unless the user has collapsed it (preference persisted).
   ========================================================================== */

@media (min-width: 768px) {
    .ebc-topbar__burger { display: none; }
    .ebc-search { display: block; }
    .ebc-drawer-backdrop { display: none !important; }

    .ebc-drawer { width: var(--drawer-w); transform: none; }
    .ebc-main { margin-left: var(--drawer-w); }
    .ebc-page { padding: 20px 20px 32px; }

    .ebc-drawer__collapse { display: flex; }

    .kpi-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .deflist { grid-template-columns: 180px 1fr; }

    /* --- expanded ------------------------------------------------------- */
    body[data-drawer="expanded"] { --drawer-w: 210px; }

    /* --- rail (default): icons only, submenus fly out on hover/focus ----- */
    body:not([data-drawer="expanded"]) .ebc-nav__label,
    body:not([data-drawer="expanded"]) .ebc-nav__caret { display: none; }

    body:not([data-drawer="expanded"]) .ebc-nav__link { justify-content: center; padding: 8px; }
    body:not([data-drawer="expanded"]) .ebc-drawer__collapse { justify-content: center; padding: 8px; }
    body:not([data-drawer="expanded"]) .ebc-nav__item { position: relative; }

    body:not([data-drawer="expanded"]) .ebc-subnav {
        position: absolute; left: 100%; top: 0; z-index: 70;
        min-width: 210px; padding-bottom: 6px;
        display: none;
        box-shadow: var(--shadow-md);
        border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
    }
    body:not([data-drawer="expanded"]) .ebc-nav__item:hover > .ebc-subnav,
    body:not([data-drawer="expanded"]) .ebc-nav__item:focus-within > .ebc-subnav {
        display: block;
    }
    body:not([data-drawer="expanded"]) .ebc-subnav__heading {
        display: block; padding: 9px 12px 7px;
        color: #fff; font-size: 12px; font-weight: 700;
        border-bottom: 1px solid rgba(255, 255, 255, .08);
    }
    body:not([data-drawer="expanded"]) .ebc-subnav__link { padding-left: 12px; }
}

/* ==========================================================================
   >= 1024px — small desktop
   ========================================================================== */

@media (min-width: 1024px) {
    .ebc-user__meta { display: block; }
    .ebc-page { padding: 24px 26px 36px; }
    .kpi-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* ==========================================================================
   >= 1440px — large desktop
   ========================================================================== */

@media (min-width: 1440px) {
    .ebc-page { padding: 26px 32px 40px; }
}

@media (prefers-reduced-motion: reduce) {
    * { transition: none !important; animation: none !important; }
}

/* ==========================================================================
   Forms
   ========================================================================== */

.field-grid { display: grid; gap: 14px; grid-template-columns: 1fr; }

.field { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.field__label { font-size: 12.5px; font-weight: 600; color: var(--c-text-soft); }
.field__help  { font-size: 11.5px; color: var(--c-text-faint); }
.field__error { font-size: 11.5px; color: var(--c-danger); font-weight: 500; }
.req { color: var(--c-danger); }

.input {
    width: 100%; min-height: 38px; padding: 7px 10px;
    border: 1px solid var(--c-border-strong); border-radius: var(--radius-sm);
    background: var(--c-surface); color: var(--c-text);
    font: inherit; font-size: 13.5px;
}
.input:focus { border-color: var(--c-primary); box-shadow: 0 0 0 2px rgba(34, 113, 177, .18); outline: none; }
.input:disabled, .input[readonly] { background: var(--c-surface-alt); color: var(--c-text-soft); }
.input.is-invalid { border-color: var(--c-danger); }
.input--static { margin: 0; display: flex; align-items: center; background: var(--c-surface-alt); }
textarea.input { min-height: 76px; resize: vertical; }
select.input { appearance: auto; }

.check { display: flex; align-items: center; gap: 8px; min-height: 38px; font-size: 13.5px; }
.check input { width: 18px; height: 18px; accent-color: var(--c-primary); }

.form-actions {
    display: flex; flex-wrap: wrap; align-items: center; gap: 10px;
    margin-top: 14px; padding: 12px 0;
}
.form-actions__meta { color: var(--c-text-faint); font-size: 12px; margin-left: auto; }

.page-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }

/* ==========================================================================
   Filter bar, sorting, pagination
   ========================================================================== */

.filterbar {
    display: flex; flex-wrap: wrap; gap: 8px; align-items: center;
    padding: 10px; margin-bottom: 12px;
    background: var(--c-surface); border: 1px solid var(--c-border); border-radius: var(--radius);
}
.filterbar__search { position: relative; display: flex; align-items: center; flex: 1 1 220px; }
.filterbar__search svg { position: absolute; left: 9px; color: var(--c-text-faint); }
.filterbar__search input {
    width: 100%; min-height: 36px; padding: 6px 10px 6px 30px;
    border: 1px solid var(--c-border-strong); border-radius: var(--radius-sm);
    font: inherit; font-size: 13px;
}
.filterbar__select {
    min-height: 36px; padding: 6px 8px; font: inherit; font-size: 13px;
    border: 1px solid var(--c-border-strong); border-radius: var(--radius-sm);
    background: var(--c-surface);
}

.th-sort { color: inherit; text-decoration: none; white-space: nowrap; }
.th-sort:hover { color: var(--c-primary); text-decoration: none; }
.th-sort.is-sorted { color: var(--c-primary); }

.col-actions { white-space: nowrap; width: 1%; }
.btn--sm { min-height: 30px; padding: 3px 10px; font-size: 12.5px; }
.btn--danger { background: var(--c-danger); border-color: var(--c-danger); color: #fff; }
.btn--danger:hover { background: #8f2425; border-color: #8f2425; color: #fff; }
.btn[disabled], .btn.is-disabled { opacity: .5; pointer-events: none; }
form.inline { display: inline; }

.pager {
    display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
    gap: 10px; padding: 10px 12px; border-top: 1px solid var(--c-border);
}
.pager__summary { color: var(--c-text-faint); font-size: 12.5px; }
.pager__list { display: flex; flex-wrap: wrap; gap: 4px; }
.pager__link {
    display: inline-grid; place-items: center; min-width: 32px; height: 32px; padding: 0 8px;
    border: 1px solid var(--c-border); border-radius: var(--radius-sm);
    background: var(--c-surface); color: var(--c-text); font-size: 13px;
}
.pager__link:hover { background: var(--c-surface-alt); text-decoration: none; }
.pager__link.is-current { background: var(--c-primary); border-color: var(--c-primary); color: #fff; }
.pager__link.is-disabled { opacity: .4; pointer-events: none; }
.pager__gap { padding: 0 4px; color: var(--c-text-faint); }

/* ==========================================================================
   Login
   ========================================================================== */

.login { width: 100%; max-width: 380px; }
.login__brand { text-align: center; margin-bottom: 18px; }
.login__mark {
    display: inline-grid; place-items: center; width: 52px; height: 52px; margin-bottom: 10px;
    border-radius: 12px; background: var(--c-nav-bg); color: #fff; font-weight: 700; letter-spacing: .5px;
}
.login__title { font-size: 17px; font-weight: 600; }
.login__sub { font-size: 12.5px; color: var(--c-text-faint); }
.login .card { padding: 22px; }
.login .btn { width: 100%; margin-top: 4px; }
.login__hint {
    margin-top: 14px; padding: 10px; border-radius: var(--radius-sm);
    background: var(--c-info-bg); color: var(--c-text-soft); font-size: 12px; text-align: center;
}

@media (min-width: 768px) {
    .field-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .field--full  { grid-column: 1 / -1; }
    .field--third { grid-column: span 1; }
}

@media (min-width: 1280px) {
    .field-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); }
    .field--full  { grid-column: span 6; }
    .field--half  { grid-column: span 3; }
    .field--third { grid-column: span 2; }
}

/* ==========================================================================
   User menu + notification badge (admin bar)
   ========================================================================== */

.ebc-iconbtn--badge { position: relative; }
.ebc-dot {
    position: absolute; top: 4px; right: 3px; min-width: 16px; height: 16px; padding: 0 4px;
    display: grid; place-items: center;
    border-radius: 999px; background: var(--c-danger); color: #fff;
    font-size: 10px; font-weight: 700; line-height: 1;
}

.ebc-user { position: relative; }
.ebc-user__summary {
    display: flex; align-items: center; gap: 8px; padding: 4px 6px;
    border-radius: var(--radius-sm); cursor: pointer; list-style: none;
}
.ebc-user__summary::-webkit-details-marker { display: none; }
.ebc-user__summary:hover { background: var(--c-nav-bg-hover); }

.ebc-usermenu {
    position: absolute; right: 0; top: calc(100% + 6px); z-index: 80;
    min-width: 190px; padding: 6px;
    background: var(--c-surface); border: 1px solid var(--c-border);
    border-radius: var(--radius); box-shadow: var(--shadow-md);
}
.ebc-usermenu__head {
    padding: 6px 10px; margin-bottom: 4px;
    border-bottom: 1px solid var(--c-border);
    color: var(--c-text-faint); font-size: 11.5px;
}
.ebc-usermenu__item {
    display: block; width: 100%; padding: 8px 10px; text-align: left;
    color: var(--c-text); font: inherit; font-size: 13px; border-radius: var(--radius-sm);
}
.ebc-usermenu__item:hover { background: var(--c-surface-alt); text-decoration: none; }
.ebc-usermenu__item--button { border: 0; background: none; cursor: pointer; }

/* ==========================================================================
   Tabs, permission grid, audit diff, misc utilities
   ========================================================================== */

.tabs {
    display: flex; flex-wrap: wrap; gap: 2px;
    margin-bottom: 14px; border-bottom: 1px solid var(--c-border);
}
.tabs__item {
    padding: 8px 14px; color: var(--c-text-soft); font-size: 13px; font-weight: 500;
    border: 1px solid transparent; border-bottom: 0; border-radius: var(--radius-sm) var(--radius-sm) 0 0;
}
.tabs__item:hover { background: var(--c-surface-alt); text-decoration: none; }
.tabs__item.is-active {
    background: var(--c-surface); border-color: var(--c-border);
    color: var(--c-text); font-weight: 600;
    box-shadow: inset 0 2px 0 var(--c-primary);
}

.perm-grid { display: grid; gap: 6px 16px; grid-template-columns: 1fr; }
.perm-grid .check span { font-size: 13px; }
.perm-grid code { margin-left: 6px; font-size: 11px; color: var(--c-text-faint); }

.diff summary { cursor: pointer; color: var(--c-primary); font-size: 12.5px; }
.diff__label { margin-top: 6px; font-size: 11px; font-weight: 700; color: var(--c-text-faint); text-transform: uppercase; }
.diff__json {
    max-width: 420px; max-height: 200px; overflow: auto; margin: 2px 0 0;
    padding: 8px; background: var(--c-surface-alt); border: 1px solid var(--c-border);
    border-radius: var(--radius-sm); font-family: var(--font-mono); font-size: 11.5px;
}

.mono  { font-family: var(--font-mono); font-size: 12px; }
.muted { color: var(--c-text-faint); }
.qty--danger  { color: var(--c-danger); font-weight: 700; }
.qty--warning { color: var(--c-warning); font-weight: 700; }

@media (min-width: 768px) {
    .perm-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1280px) {
    .perm-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}


/* ==========================================================================
   Documents: header, progress rail, line items
   ========================================================================== */

.doc-head {
    display: flex; flex-wrap: wrap; align-items: center; gap: 10px;
    margin-bottom: 12px;
}
.doc-head__id { display: flex; align-items: center; gap: 10px; }
.doc-head__no { font-family: var(--font-mono); font-size: 17px; font-weight: 700; letter-spacing: .02em; }
.doc-head__actions { display: flex; flex-wrap: wrap; gap: 8px; margin-left: auto; }

.rail {
    display: flex; flex-wrap: wrap; gap: 4px 0; align-items: flex-start;
    padding: 12px; margin-bottom: 14px;
    background: var(--c-surface); border: 1px solid var(--c-border); border-radius: var(--radius);
}
.rail__step {
    position: relative; flex: 1 1 90px; min-width: 90px;
    display: flex; flex-direction: column; align-items: center; gap: 6px;
    text-align: center;
}
.rail__step::before {
    content: ""; position: absolute; top: 7px; left: -50%; width: 100%; height: 2px;
    background: var(--c-border);
}
.rail__step:first-child::before { display: none; }
.rail__dot {
    position: relative; z-index: 1;
    width: 16px; height: 16px; border-radius: 50%;
    background: var(--c-surface); border: 2px solid var(--c-border-strong);
}
.rail__label { font-size: 11.5px; color: var(--c-text-faint); }

.rail__step--done .rail__dot      { background: var(--c-success); border-color: var(--c-success); }
.rail__step--done::before         { background: var(--c-success); }
.rail__step--done .rail__label    { color: var(--c-text-soft); }
.rail__step--current .rail__dot   { background: var(--c-primary); border-color: var(--c-primary);
                                    box-shadow: 0 0 0 3px rgba(34, 113, 177, .18); }
.rail__step--current .rail__label { color: var(--c-text); font-weight: 700; }
.rail--cancelled { opacity: .55; }
.rail__cancelled { margin: -8px 0 14px; }

.lines__head {
    display: flex; align-items: center; gap: 10px;
    padding: 12px 14px; border-bottom: 1px solid var(--c-border);
}
.lines__head .card__title { margin: 0; }
.lines__head .btn { margin-left: auto; }

.lines { padding: 4px 0; }
.line { padding: 12px 14px; border-bottom: 1px solid var(--c-border); }
.line:last-child { border-bottom: 0; }
.line__grid { display: grid; gap: 10px; grid-template-columns: 1fr; }
.line__actions { display: flex; align-items: center; gap: 10px; margin-top: 8px; }
.line__total { font-weight: 700; font-variant-numeric: tabular-nums; }
.line__actions .btn { margin-left: auto; }

.lines__foot {
    display: flex; justify-content: space-between; align-items: center; gap: 10px;
    padding: 12px 14px; border-top: 1px solid var(--c-border); background: var(--c-surface-alt);
    font-size: 14px;
}
.lines__foot strong { font-variant-numeric: tabular-nums; font-size: 16px; }

.deflist--doc dd { font-weight: 500; }

.table tfoot th {
    background: var(--c-surface-alt); border-top: 2px solid var(--c-border-strong);
    font-size: 12.5px;
}

@media (min-width: 768px) {
    .line__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .line__grid .field--full { grid-column: 1 / -1; }
}
@media (min-width: 1280px) {
    .line__grid { grid-template-columns: repeat(6, minmax(0, 1fr)); }
}

.qty--in  { color: var(--c-success); }
.qty--out { color: var(--c-danger); }
.row--opening td { background: var(--c-surface-alt); }

/* Production shortage panel (spec 4) */
.shortage {
    background: var(--c-danger-bg); border: 1px solid #f0c0c1; border-left: 4px solid var(--c-danger);
    border-radius: var(--radius); padding: 14px; margin-bottom: 14px;
}
.shortage__head { display: flex; gap: 10px; align-items: flex-start; margin-bottom: 10px; color: var(--c-danger); }
.shortage__title { font-size: 14px; font-weight: 800; letter-spacing: .06em; }
.shortage__sub { font-size: 12.5px; color: var(--c-text-soft); }
.shortage .table { background: var(--c-surface); border-radius: var(--radius-sm); }
.shortage__max { margin-top: 10px; font-size: 13px; }
.shortage__actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: flex-start; margin-top: 12px; }

.override summary { list-style: none; cursor: pointer; }
.override summary::-webkit-details-marker { display: none; }
.override__form {
    margin-top: 10px; padding: 12px; background: var(--c-surface);
    border: 1px solid var(--c-border); border-radius: var(--radius); max-width: 520px;
}
.override__form .btn { margin-top: 8px; }

/* ==========================================================================
   Asset detail: two-column layout, codes panel, timeline
   ========================================================================== */

.asset-grid { display: grid; gap: 14px; grid-template-columns: 1fr; }
.asset-grid__side { display: flex; flex-direction: column; gap: 14px; }

.asset-codes { text-align: center; }
.asset-codes__qr svg { max-width: 190px; height: auto; margin: 0 auto; }
.asset-codes__caption { margin: 8px 0; font-weight: 700; letter-spacing: .04em; }
.asset-codes__barcode svg { max-width: 100%; height: auto; }
.asset-codes .card__note { text-align: left; }

.timeline { position: relative; padding: 14px 14px 14px 8px; }
.timeline__item { position: relative; display: flex; gap: 12px; padding-bottom: 16px; }
.timeline__item:last-child { padding-bottom: 0; }
.timeline__item::before {
    content: ""; position: absolute; left: 6px; top: 16px; bottom: 0; width: 2px;
    background: var(--c-border);
}
.timeline__item:last-child::before { display: none; }
.timeline__dot {
    position: relative; z-index: 1; flex: none;
    width: 14px; height: 14px; margin-top: 3px; border-radius: 50%;
    background: var(--c-surface); border: 3px solid var(--c-primary);
}
.timeline__title { font-size: 13.5px; font-weight: 600; }
.timeline__meta  { font-size: 12px; color: var(--c-text-faint); }
.timeline__note  { font-size: 12.5px; color: var(--c-text-soft); margin-top: 4px; }

/* Public QR landing page */
.public-asset { text-align: center; max-width: 420px; }
.public-asset__brand { font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--c-text-faint); }
.public-asset__id { font-family: var(--font-mono); font-size: 22px; font-weight: 700; margin: 6px 0; }
.public-asset__product { font-size: 15px; color: var(--c-text-soft); margin-bottom: 16px; }
.public-asset .deflist { text-align: left; grid-template-columns: 130px 1fr; }
.public-asset__note { margin-top: 16px; font-size: 12.5px; color: var(--c-text-faint); }

/* Label sheet */
.label__qr svg { max-width: 100%; height: auto; }
.label__barcode svg { max-width: 100%; height: auto; margin-top: 2mm; }

@media (min-width: 1024px) {
    .asset-grid { grid-template-columns: minmax(0, 1fr) 300px; }
}

/* ==========================================================================
   Accountability panel, exceptions, checklists, client acknowledgement
   ========================================================================== */

.acct {
    padding: 14px; margin-bottom: 14px;
    background: var(--c-surface); border: 1px solid var(--c-border);
    border-left: 4px solid var(--c-border-strong); border-radius: var(--radius);
}
.acct--success { border-left-color: var(--c-success); background: var(--c-success-bg); }
.acct--warning { border-left-color: var(--c-warning); background: var(--c-warning-bg); }
.acct--danger  { border-left-color: var(--c-danger);  background: var(--c-danger-bg); }

.acct__head { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; flex-wrap: wrap; }
.acct__title { font-size: 14px; font-weight: 700; letter-spacing: .03em; }
.acct__indicator { width: 12px; height: 12px; border-radius: 50%; flex: none; }
.acct__indicator--green { background: var(--c-success); }
.acct__indicator--amber { background: var(--c-warning); }
.acct__indicator--red   { background: var(--c-danger); }

.acct__equation { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.acct__op  { color: var(--c-text-faint); font-weight: 700; }
.acct__num {
    padding: 4px 10px; border-radius: var(--radius-sm); background: var(--c-surface);
    border: 1px solid var(--c-border); font-size: 12.5px; font-weight: 600;
    font-variant-numeric: tabular-nums;
}
.acct__num--total { background: var(--c-text); color: #fff; border-color: var(--c-text); }
.acct__num--ok    { color: var(--c-success); }
.acct__num--warn  { color: var(--c-warning); }
.acct__num--bad   { color: var(--c-danger); }
.acct__num--info  { color: var(--c-info); }
.acct__warn { display: flex; gap: 6px; align-items: center; margin-top: 8px; color: var(--c-danger); font-size: 12.5px; }

.exception {
    padding: 14px; margin-bottom: 10px;
    background: var(--c-surface); border: 1px solid #f0c0c1;
    border-left: 4px solid var(--c-danger); border-radius: var(--radius);
}
.exception__head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 10px; }
.exception__dot { width: 10px; height: 10px; border-radius: 50%; background: var(--c-danger); flex: none; }
.exception__grid { display: grid; gap: 8px 18px; grid-template-columns: 1fr; margin-bottom: 10px; }
.exception__grid dt { font-size: 11px; text-transform: uppercase; letter-spacing: .04em; color: var(--c-text-faint); }
.exception__grid dd { margin: 0; font-size: 13px; }

.checklist { display: grid; gap: 4px; max-height: 260px; overflow-y: auto; padding: 8px;
             border: 1px solid var(--c-border); border-radius: var(--radius-sm); }

.scan-add { display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-end; margin-bottom: 14px; }
.scan-add .field { flex: 1 1 220px; }

.inspect-form { display: grid; gap: 4px; min-width: 200px; }
.inspect-form .input { min-height: 32px; font-size: 12.5px; }

.signature { max-width: 380px; border: 1px solid var(--c-border); border-radius: var(--radius-sm); background: #fff; }

/* Client acknowledgement page (mobile-first, public) */
.ack { width: 100%; max-width: 460px; }
.ack__head { text-align: center; margin-bottom: 14px; }
.ack__brand { font-size: 11.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--c-text-faint); }
.ack__title { font-size: 18px; font-weight: 700; margin: 4px 0; }
.ack__doc { font-size: 13px; color: var(--c-text-soft); }
.ack__client {
    padding: 12px; margin-bottom: 12px; text-align: center;
    background: var(--c-surface); border: 1px solid var(--c-border); border-radius: var(--radius);
}
.ack__items { display: grid; gap: 8px; margin-bottom: 14px; }
.ack__item {
    padding: 12px; background: var(--c-surface);
    border: 1px solid var(--c-border); border-radius: var(--radius);
}
.ack__item.is-rejected { border-color: var(--c-danger); background: var(--c-danger-bg); }
.ack__item .check { align-items: flex-start; }
.ack__issue { display: grid; gap: 6px; margin-top: 10px; }
.ack__signer {
    display: grid; gap: 12px; padding: 14px; margin-bottom: 14px;
    background: var(--c-surface); border: 1px solid var(--c-border); border-radius: var(--radius);
}
.sigpad { position: relative; }
.sigpad__canvas {
    width: 100%; height: 160px; touch-action: none;
    background: #fff; border: 1px dashed var(--c-border-strong); border-radius: var(--radius-sm);
}
.sigpad .btn { position: absolute; right: 6px; top: 6px; }
.ack__submit { width: 100%; min-height: 46px; font-size: 15px; }
.ack__note { text-align: center; font-size: 13px; color: var(--c-text-soft); }
.ack__foot { margin-top: 18px; text-align: center; font-size: 11.5px; color: var(--c-text-faint); }

@media (min-width: 768px) {
    .exception__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* ==========================================================================
   Scan screen, reports, notifications, dashboard split
   ========================================================================== */

.scan { display: grid; gap: 14px; max-width: 640px; }
.scan__row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 8px; }
.scan__row .input { flex: 1 1 220px; }
.scan__viewport { position: relative; border-radius: var(--radius); overflow: hidden; background: #000; }
.scan__viewport video { width: 100%; height: auto; display: block; max-height: 60vh; }
.scan__frame {
    position: absolute; inset: 15% 15%; border: 3px solid rgba(255,255,255,.85);
    border-radius: 12px; box-shadow: 0 0 0 100vmax rgba(0,0,0,.35);
}
.scan__hint { margin-top: 8px; font-size: 12.5px; color: var(--c-text-soft); }
.scan__hit__head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 6px; }
.scan__hit__id { font-size: 17px; font-weight: 700; }
.scan__hit__product { font-size: 14px; color: var(--c-text-soft); margin-bottom: 10px; }
.scan__actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.scan__miss { border-left: 4px solid var(--c-danger); }
.scan__miss__title { font-weight: 700; color: var(--c-danger); }
.scan__list { display: grid; gap: 6px; }
.scan__listitem { font-size: 13px; padding: 6px 0; border-bottom: 1px solid var(--c-border); }

.report-grid { display: grid; gap: 10px; grid-template-columns: 1fr; }
.report-card {
    display: flex; gap: 12px; align-items: flex-start; padding: 14px;
    background: var(--c-surface); border: 1px solid var(--c-border);
    border-radius: var(--radius); color: var(--c-text);
}
.report-card:hover { border-color: var(--c-primary); text-decoration: none; box-shadow: var(--shadow-sm); }
.report-card__icon {
    display: grid; place-items: center; flex: none;
    width: 34px; height: 34px; border-radius: var(--radius-sm);
    background: var(--c-info-bg); color: var(--c-primary);
}
.report-card__title { display: block; font-weight: 600; font-size: 14px; }
.report-card__desc { display: block; font-size: 12.5px; color: var(--c-text-faint); margin-top: 2px; }

.notif-list { display: grid; gap: 8px; }
.notif {
    display: flex; gap: 12px; align-items: flex-start; padding: 12px 14px;
    background: var(--c-surface); border: 1px solid var(--c-border);
    border-left: 4px solid var(--c-border-strong); border-radius: var(--radius);
}
.notif--info    { border-left-color: var(--c-info); }
.notif--warning { border-left-color: var(--c-warning); }
.notif--danger  { border-left-color: var(--c-danger); }
.notif.is-unread { background: var(--c-info-bg); }
.notif__body { flex: 1 1 auto; min-width: 0; }
.notif__title { font-weight: 600; font-size: 13.5px; display: flex; align-items: center; gap: 6px; }
.notif__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--c-primary); }
.notif__text { font-size: 13px; color: var(--c-text-soft); margin-top: 2px; }
.notif__meta { font-size: 11.5px; color: var(--c-text-faint); margin-top: 4px; }
.notif__actions { display: flex; flex-direction: column; gap: 6px; flex: none; }

.dash-split { display: grid; gap: 14px; grid-template-columns: 1fr; margin-top: 22px; }

@media (min-width: 768px) {
    .report-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1280px) {
    .report-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .dash-split  { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ==========================================================================
   Plugins screen and the Duplicator plugin
   ========================================================================== */

.plugin-table tbody tr.plugin-row--active { background: #f6fbf8; }
.plugin-table tbody tr.plugin-row--active .plugin-name { color: var(--c-success); }
.plugin-name { font-size: 14px; }
.plugin-error {
    margin-top: 6px; padding: 6px 8px; border-radius: var(--radius-sm);
    background: var(--c-danger-bg); color: var(--c-danger); font-size: 12px;
    display: flex; align-items: center; gap: 6px;
}
.plugin-links { margin-top: 6px; display: flex; flex-wrap: wrap; gap: 10px; font-size: 12.5px; }

.secret {
    display: inline-block; padding: 3px 8px; letter-spacing: .12em; font-weight: 700;
    background: var(--c-warning-bg); border-color: #efd6a8; color: var(--c-warning);
}

.steps-list { padding-left: 20px; list-style: decimal; display: grid; gap: 6px; font-size: 13.5px; }
.steps-list li { padding-left: 4px; }

/* ==========================================================================
   Password field with show/hide toggle
   ========================================================================== */

.password-field { position: relative; display: flex; align-items: stretch; }
.password-field .input { padding-right: 44px; }

.password-field__toggle {
    position: absolute; right: 1px; top: 1px; bottom: 1px;
    display: grid; place-items: center;
    width: 40px; padding: 0;
    background: none; border: 0; border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
    color: var(--c-text-faint); cursor: pointer;
}
.password-field__toggle:hover { color: var(--c-text); background: var(--c-surface-alt); }
.password-field__toggle:focus-visible { outline: 2px solid var(--c-primary); outline-offset: -2px; }
.password-field__toggle[aria-pressed="true"] { color: var(--c-primary); }

/*
 * Which eye is showing.
 *
 * Controlled by a class rather than the `hidden` attribute, because these are
 * SVG elements: `hidden` is an HTMLElement property, so setting it from
 * JavaScript on an <svg> does nothing at all.
 *
 *   default          open eye     "click to show"
 *   .is-revealed     crossed eye  "click to hide"
 */
.password-field__toggle [data-eye-show] { display: block; }
.password-field__toggle [data-eye-hide] { display: none; }
.password-field__toggle.is-revealed [data-eye-show] { display: none; }
.password-field__toggle.is-revealed [data-eye-hide] { display: block; }

.login__links { margin-top: 14px; text-align: center; font-size: 13px; }
.login__links a { font-weight: 500; }

/* ==========================================================================
   Button colour system
   --------------------------------------------------------------------------
   Colour carries meaning, so a button's look tells you what it will do before
   you read it:

     primary (blue)   the main forward action — save, create, sign in
     success (green)  commits something — post, release, build, approve
     danger  (red)    destroys or removes — delete, deactivate, mark missing
     cancel  (red outline)  leaves without saving; red as requested, outlined so
                      a destructive button still reads as the stronger warning
     warning (amber)  allowed but risky — shortage override
     info    (slate)  produces output — print, export, download
     neutral (white)  everything else — filters, back links

   Every variant keeps the same size and focus ring, so only the colour changes.
   ========================================================================== */

.btn--success {
    background: var(--c-success); border-color: var(--c-success); color: #fff;
}
.btn--success:hover { background: #016c3d; border-color: #016c3d; color: #fff; }

.btn--warning {
    background: var(--c-warning); border-color: var(--c-warning); color: #fff;
}
.btn--warning:hover { background: #8f4e00; border-color: #8f4e00; color: #fff; }

.btn--info {
    background: var(--c-surface); border-color: var(--c-primary); color: var(--c-primary);
}
.btn--info:hover { background: var(--c-info-bg); border-color: var(--c-primary-dark); color: var(--c-primary-dark); }

/* Cancel: leaves the screen without saving. Red, but outlined — a solid red
   button is reserved for something that actually destroys data. */
.btn--cancel {
    background: var(--c-surface); border-color: var(--c-danger); color: var(--c-danger);
}
.btn--cancel:hover { background: var(--c-danger-bg); border-color: #8f2425; color: #8f2425; }

.btn--danger:focus-visible,
.btn--cancel:focus-visible { outline-color: var(--c-danger); }

/* The add-a-row button sits with the row actions at the bottom of the list. */
.line__actions .btn--add { margin-left: 0; margin-right: auto; }
.lines__head .btn--add { margin-left: auto; }

/* The add button rides on the last row, beside Remove, so new rows always
   appear directly under the one you are looking at. */
.line__actions [data-line-remove] { margin-left: auto; }
.line__actions [data-line-add]    { margin-left: 0; }
.line:not(:last-child) [data-line-add] { display: none; }

.btn--add {
    background: var(--c-surface); border-color: var(--c-primary); color: var(--c-primary);
    font-weight: 600;
}
.btn--add:hover { background: var(--c-info-bg); border-color: var(--c-primary-dark); color: var(--c-primary-dark); }

/* ==========================================================================
   Help centre, manual, FAQ, About                          (sprint 17)
   ========================================================================== */

.help-hero {
    display: flex; flex-wrap: wrap; gap: 20px; align-items: center;
    justify-content: space-between;
    padding: 22px; margin-bottom: 16px;
    background: var(--c-surface); border: 1px solid var(--c-border);
    border-radius: var(--radius); border-left: 4px solid var(--c-primary);
}
.help-hero__title { margin: 0 0 6px; font-size: 20px; }
.help-hero__lead  { margin: 0; max-width: 62ch; color: var(--c-text-soft); }
.help-hero__actions { display: flex; flex-wrap: wrap; gap: 8px; }

.help-quick, .help-toc {
    display: grid; gap: 10px;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
}
.help-quick__item, .help-toc__item {
    display: flex; gap: 12px; align-items: flex-start;
    padding: 14px; border: 1px solid var(--c-border); border-radius: var(--radius);
    background: var(--c-surface); color: inherit;
}
.help-quick__item:hover, .help-toc__item:hover {
    border-color: var(--c-primary); text-decoration: none;
    box-shadow: 0 1px 4px rgba(0, 0, 0, .08);
}
.help-quick__icon, .help-toc__icon {
    display: inline-grid; place-items: center; flex: 0 0 auto;
    width: 36px; height: 36px; border-radius: var(--radius-sm);
    background: var(--c-info-bg); color: var(--c-primary);
}
.help-quick__body, .help-toc__body { display: grid; gap: 3px; }
.help-quick__body strong, .help-toc__body strong { font-size: 14px; }
.help-quick__body span:last-child,
.help-toc__body span:last-child { font-size: 12.5px; color: var(--c-text-soft); line-height: 1.5; }

/* ---- the manual ---------------------------------------------------------- */
.manual { display: grid; gap: 20px; grid-template-columns: 1fr; align-items: start; }

.manual__toc {
    padding: 16px 18px; background: var(--c-surface);
    border: 1px solid var(--c-border); border-radius: var(--radius);
}
.manual__toc-title {
    margin: 0 0 8px; font-size: 11px; font-weight: 700;
    text-transform: uppercase; letter-spacing: .6px; color: var(--c-text-soft);
}
.manual__toc ol { margin: 0; padding-left: 20px; display: grid; gap: 5px; font-size: 13px; }
.manual__toc a { color: var(--c-text); }
.manual__toc a:hover { color: var(--c-primary); }

.manual__section {
    padding: 22px; margin-bottom: 16px;
    background: var(--c-surface); border: 1px solid var(--c-border);
    border-radius: var(--radius);
    /* The fixed top bar must not cover a heading jumped to from the contents. */
    scroll-margin-top: 70px;
}
.manual__section h2 {
    margin: 0 0 12px; padding-bottom: 10px; font-size: 19px;
    border-bottom: 2px solid var(--c-info-bg);
}
.manual__section h3 { margin: 20px 0 8px; font-size: 15px; }
.manual__section p, .manual__section li { line-height: 1.65; }
.manual__section > p:first-of-type { margin-top: 0; }
.manual__section ul, .manual__section ol { padding-left: 22px; }
.manual__section li { margin-bottom: 5px; }
.manual__section code {
    padding: 1px 5px; border-radius: 3px; font-size: 12.5px;
    background: var(--c-surface-alt); border: 1px solid var(--c-border);
}

.manual__lead {
    margin: 0 0 14px; padding: 12px 16px; font-size: 15px; font-weight: 600;
    background: var(--c-info-bg); border-left: 4px solid var(--c-primary);
    border-radius: var(--radius-sm);
}
.manual__meta {
    margin: -4px 0 14px; font-size: 12.5px; color: var(--c-text-soft);
}
.manual__note {
    padding: 12px 16px; margin: 14px 0;
    background: var(--c-warning-bg); border-left: 4px solid var(--c-warning);
    border-radius: var(--radius-sm); font-size: 13.5px;
}
.manual__example {
    padding: 12px 16px; margin: 14px 0;
    background: var(--c-surface-alt); border-left: 4px solid var(--c-border-strong);
    border-radius: var(--radius-sm); font-size: 13.5px;
}
.manual__formula {
    padding: 14px; margin: 14px 0; text-align: center;
    font-weight: 600; font-size: 15px;
    background: var(--c-surface-alt); border: 1px dashed var(--c-border-strong);
    border-radius: var(--radius-sm);
}
.manual__steps li { margin-bottom: 9px; }
.manual__table { margin: 12px 0; }

@media (min-width: 1100px) {
    .manual { grid-template-columns: 240px minmax(0, 1fr); }
    .manual__toc { position: sticky; top: 62px; max-height: calc(100vh - 90px); overflow-y: auto; }
}

/* ---- FAQ ----------------------------------------------------------------- */
.faq { display: grid; gap: 8px; }
.faq__item { border: 1px solid var(--c-border); border-radius: var(--radius); background: var(--c-surface); }
.faq__item[open] { border-color: var(--c-primary); }
.faq__q {
    padding: 13px 16px; cursor: pointer; font-weight: 600; font-size: 14px;
    list-style: none; display: flex; align-items: center; gap: 10px;
}
.faq__q::-webkit-details-marker { display: none; }
.faq__q::before {
    content: "+"; flex: 0 0 auto;
    display: inline-grid; place-items: center; width: 20px; height: 20px;
    border-radius: 50%; background: var(--c-info-bg); color: var(--c-primary);
    font-size: 15px; line-height: 1;
}
.faq__item[open] .faq__q::before { content: "\2212"; }
.faq__q:hover { color: var(--c-primary); }
.faq__a { padding: 0 16px 14px 46px; font-size: 13.5px; line-height: 1.65; color: var(--c-text-soft); }
.faq__a p { margin: 0 0 9px; }
.faq__a p:last-child { margin-bottom: 0; }

/* ---- About --------------------------------------------------------------- */
.about-hero {
    display: flex; flex-wrap: wrap; gap: 20px; align-items: center;
    padding: 22px; margin-bottom: 16px;
    background: var(--c-surface); border: 1px solid var(--c-border);
    border-radius: var(--radius);
}
.about-hero__icon img { width: 76px; height: 76px; border-radius: 16px; display: block; }
.about-hero__name { margin: 0 0 4px; font-size: 21px; }
.about-hero__desc { margin: 0 0 6px; color: var(--c-text-soft); }
.about-hero__meta { margin: 0 0 10px; font-size: 12.5px; color: var(--c-text-soft); }
.about-purpose {
    padding: 16px; margin: 0 0 12px; text-align: center;
    font-size: 15px; font-weight: 600; line-height: 1.8;
    background: var(--c-info-bg); border-radius: var(--radius-sm);
}
.about-columns { display: grid; gap: 16px; grid-template-columns: 1fr; }
.about-company { font-size: 16px; margin-bottom: 4px; }
@media (min-width: 900px) { .about-columns { grid-template-columns: 1fr 1fr; } }

/* ==========================================================================
   System identity (branding)                                (sprint 17)
   ========================================================================== */

.colour-field { display: flex; gap: 8px; align-items: center; }
.colour-field__swatch {
    flex: 0 0 auto; width: 42px; height: 38px; padding: 2px;
    border: 1px solid var(--c-border); border-radius: var(--radius-sm);
    background: var(--c-surface); cursor: pointer;
}

.brand-slots { display: grid; gap: 12px; grid-template-columns: 1fr; }
@media (min-width: 800px) { .brand-slots { grid-template-columns: 1fr 1fr; } }

.brand-slot {
    display: flex; gap: 14px; padding: 14px;
    border: 1px solid var(--c-border); border-radius: var(--radius);
    background: var(--c-surface-alt);
}
.brand-slot__preview {
    flex: 0 0 auto; width: 84px; height: 84px;
    display: grid; place-items: center; padding: 6px;
    background: var(--c-surface); border: 1px dashed var(--c-border-strong);
    border-radius: var(--radius-sm); overflow: hidden;
}
.brand-slot__preview img { max-width: 100%; max-height: 100%; object-fit: contain; }
.brand-slot__empty {
    display: grid; gap: 4px; place-items: center;
    font-size: 11px; color: var(--c-text-soft); text-align: center;
}
.brand-slot__body { flex: 1 1 auto; min-width: 0; }
.check--inline { margin-top: 8px; font-size: 12.5px; }

.brand-preview { display: flex; flex-wrap: wrap; gap: 16px; align-items: flex-end; }
.brand-preview__tab {
    display: flex; align-items: center; gap: 8px;
    padding: 8px 16px 8px 12px; font-size: 13px;
    background: var(--c-surface-alt); border: 1px solid var(--c-border);
    border-radius: 8px 8px 0 0;
}
.brand-preview__favicon { width: 16px; height: 16px; object-fit: contain; }
.brand-preview__phone {
    display: grid; gap: 6px; place-items: center;
    width: 104px; padding: 14px 8px; border-radius: 18px;
    border: 1px solid var(--c-border); font-size: 11px; color: #1d2327;
}
.brand-preview__phone img { width: 48px; height: 48px; border-radius: 11px; }
.brand-preview__bar {
    display: flex; align-items: center; gap: 10px;
    padding: 9px 16px; border-radius: var(--radius-sm);
    color: #fff; font-size: 13px; font-weight: 600;
}
.brand-preview__bar img { max-height: 24px; }

/* ==========================================================================
   Progressive web app: install, update and offline bars     (sprint 17)
   ========================================================================== */

.pwa-bar {
    position: fixed; left: 50%; bottom: 16px; z-index: 900;
    transform: translateX(-50%);
    display: flex; align-items: center; gap: 12px;
    max-width: calc(100vw - 32px);
    padding: 11px 16px; border-radius: 999px;
    font-size: 13px; color: #fff;
    box-shadow: 0 4px 16px rgba(0, 0, 0, .28);
}
.pwa-bar--offline { background: var(--c-danger); }
.pwa-bar--update  { background: var(--c-nav-bg); }
.pwa-bar .btn { flex: 0 0 auto; }

.ebc-brand__logo { max-height: 26px; max-width: 132px; object-fit: contain; display: block; }

.offline-card { text-align: left; }
.offline-card__title { margin: 18px 0 10px; font-size: 20px; }
.offline-card__text  { margin: 0 0 12px; color: var(--c-text-soft); line-height: 1.6; }
.offline-card__list  { margin: 0 0 18px; padding-left: 20px; font-size: 13.5px; line-height: 1.7; }
.form-actions--center { justify-content: center; }

@media print {
    .manual__toc, .help-hero__actions, .pwa-bar { display: none !important; }
    .manual { display: block; }
    .manual__section { break-inside: avoid; border: 0; padding: 0 0 18px; }
}

/* ==========================================================================
   Brand: the organisation this installation belongs to      (sprint 17)

   A company name can be two characters or sixty, so the block has to cope with
   both without changing the height of the 48px bar. Long names wrap onto a
   second line at a smaller size; the size step comes from the character count
   in topbar.php, and the width caps below keep the name from ever pushing the
   search box or the action icons off screen.
   ========================================================================== */

.ebc-brand__name {
    font-weight: 600;
    font-size: 14px;
    line-height: 1.15;
    /* Two lines max, then an ellipsis — the full name is in the title
       attribute, so nothing is lost. */
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    overflow: hidden;
    overflow-wrap: anywhere;
    white-space: normal;
    max-width: 40vw;
    /* Belt and braces: browsers without -webkit-line-clamp would otherwise let
       a third line push the 48px bar out of shape. */
    max-height: 2.3em;
}

/* Chosen by length in topbar.php: longer name, smaller type. */
.ebc-brand__name--sm { font-size: 12.5px; letter-spacing: -.1px; }
.ebc-brand__name--xs { font-size: 11px;   letter-spacing: -.2px; }

/* Under 480px the bar is crowded: keep the badge, drop the words. */
@media (max-width: 479px) {
    .ebc-brand__name { display: none; }
}

@media (min-width: 480px) {
    .ebc-brand__name { max-width: 34vw; }
}

@media (min-width: 768px) {
    /* The brand sits over the drawer, so it is given that column's width and
       no more — the search box owns the middle of the bar. */
    .ebc-brand__name { max-width: 190px; }
}

@media (min-width: 1280px) {
    .ebc-brand__name { max-width: 230px; }
}

/* Printed documents carry the organisation in their own header instead. */
@media print {
    .ebc-brand__name { display: none; }
}

/* ==========================================================================
   Install app — the one promotional control in the admin bar   (sprint 17)

   Everything else up here is a tool the user reaches for daily, so it is a
   quiet grey icon. This is the opposite: it appears once, invites a decision,
   and then never comes back. A filled pill in a colour used nowhere else in
   the chrome is how it earns that attention without shouting.

   Green rather than the primary blue: blue is the "submit this form" colour
   throughout the app, and this submits nothing. The greens below were chosen
   for contrast against white, not by eye —

       #1c8542  4.68:1     #17763a  5.69:1     #1d8843 (hover)  4.51:1

   all above the 4.5:1 the 11px label needs. That ceiling is also why hover
   does not brighten much: a green light enough to feel like a hover state
   drops the label below AA. Hover lifts and adds a ring instead.
   ========================================================================== */

:root {
    --c-install-top:  #1c8542;
    --c-install-bot:  #17763a;
    --c-install-hi:   #1d8843;
    --c-install-down: #146a33;   /* pressed — 6.4:1 with white */
    --c-install-glow: rgba(45, 170, 90, .55);
}

.ebc-install {
    display: inline-flex;
    align-items: center;
    /* Never let the flex row squash the label into an ellipsis. */
    flex: 0 0 auto;
    gap: 6px;
    height: 30px;
    padding: 0 12px;
    margin-right: 4px;
    border: 1px solid rgba(255, 255, 255, .16);
    border-radius: 999px;
    background: linear-gradient(180deg, var(--c-install-top), var(--c-install-bot));
    color: #fff;
    font: inherit;
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: .3px;
    text-transform: uppercase;
    white-space: nowrap;
    cursor: pointer;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .18),
        0 1px 2px rgba(0, 0, 0, .35);
    transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
    /* Three slow pulses when it first appears, then it settles down and stops
       competing with the work on the page. */
    animation: ebc-install-attention 2.2s ease-out .6s 3;
}

.ebc-install__icon {
    display: inline-grid;
    place-items: center;
    /* Optical centring: the device glyph reads slightly high next to caps. */
    margin-top: -1px;
}

.ebc-install:hover,
.ebc-install:focus-visible {
    background: linear-gradient(180deg, var(--c-install-hi), var(--c-install-top));
    transform: translateY(-1px);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .22),
        0 0 0 2px rgba(255, 255, 255, .22),
        0 3px 8px rgba(0, 0, 0, .4);
    /* Stop drawing attention the moment it has the user's. */
    animation: none;
}

.ebc-install:focus-visible {
    outline: 2px solid #fff;
    outline-offset: 2px;
}

.ebc-install:active {
    transform: translateY(0);
    background: var(--c-install-down);
    /* Deeper fill as well as the inset, so the press is felt at a glance and
       not only in motion. */
    box-shadow: inset 0 2px 5px rgba(0, 0, 0, .42);
}

@keyframes ebc-install-attention {
    0%        { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .18), 0 1px 2px rgba(0, 0, 0, .35), 0 0 0 0 var(--c-install-glow); }
    45%       { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .18), 0 1px 2px rgba(0, 0, 0, .35), 0 0 0 7px rgba(45, 170, 90, 0); }
    100%      { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .18), 0 1px 2px rgba(0, 0, 0, .35), 0 0 0 0 rgba(45, 170, 90, 0); }
}

/* Under 640px the bar is crowded, so the pill becomes a circle. It keeps its
   colour, which is what made it findable in the first place. */
@media (max-width: 639px) {
    .ebc-install {
        width: 32px;
        height: 32px;
        padding: 0;
        justify-content: center;
        gap: 0;
    }
    .ebc-install__label { display: none; }
}

/* A pulsing button is a poor trade for anyone who asked the system to stop
   moving things. The colour still does the work. */
@media (prefers-reduced-motion: reduce) {
    .ebc-install {
        animation: none;
        transition: none;
    }
    .ebc-install:hover,
    .ebc-install:focus-visible { transform: none; }
}

@media print {
    .ebc-install { display: none !important; }
}

/* ==========================================================================
   Report filter bar and sortable headings

   Every control is a plain GET field, so a filtered report is a URL — which is
   what makes it shareable and what lets Export CSV and Print carry exactly what
   is on screen rather than silently re-running the report unfiltered.
   ========================================================================== */

.rptbar {
    padding: 12px 14px;
    margin-bottom: 14px;
    background: var(--c-surface);
    border: 1px solid var(--c-border);
    border-radius: var(--radius);
}

.rptbar__row {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 10px;
}

.rptbar__search {
    position: relative;
    flex: 1 1 240px;
    min-width: 180px;
}
.rptbar__search .input { padding-left: 32px; }
.rptbar__searchicon {
    position: absolute;
    left: 9px;
    top: 50%;
    transform: translateY(-50%);
    display: grid;
    place-items: center;
    color: var(--c-text-faint);
    pointer-events: none;
}

.rptbar__field {
    display: flex;
    flex-direction: column;
    gap: 3px;
    flex: 0 1 auto;
    min-width: 140px;
}
.rptbar__label {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .03em;
    text-transform: uppercase;
    color: var(--c-text-soft);
}

.rptbar__actions {
    display: flex;
    gap: 6px;
    margin-left: auto;
}

/* What is currently applied, in words. The chips are a readout, not controls —
   the point is that someone reading the screen over your shoulder can tell
   whether they are looking at everything or at a slice. */
.rptbar__summary {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    margin: 10px 0 0;
    padding-top: 10px;
    border-top: 1px dashed var(--c-border);
    font-size: 12.5px;
    color: var(--c-text-soft);
}
.rptbar__chip {
    padding: 2px 9px;
    border-radius: 999px;
    background: var(--c-info-bg);
    color: var(--c-text);
    font-size: 12px;
}

/* --------------------------------------------------------- sortable head --- */

.th-sort {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    color: inherit;
    white-space: nowrap;
}
.th-sort:hover { color: var(--c-primary); text-decoration: none; }

.th-sort__arrow {
    font-size: 9px;
    line-height: 1;
    color: var(--c-text-faint);
}
.th-sort:hover .th-sort__arrow { color: var(--c-primary); }

.table th.is-sorted { background: var(--c-info-bg); }
.table th.is-sorted .th-sort { color: var(--c-primary); }
.table th.is-sorted .th-sort__arrow { color: var(--c-primary); }

/* The stacked-card table on phones has no header row to click, so sorting is a
   desktop affordance; the arrow would only be noise there. */
@media (max-width: 767px) {
    .th-sort__arrow { display: none; }
    .rptbar__actions { margin-left: 0; width: 100%; }
    .rptbar__actions .btn { flex: 1 1 auto; }
}

@media print {
    .rptbar, .page-actions { display: none !important; }
}

/* A short shell transcript on a help or diagnostic screen. */
.codeblock {
    margin: 8px 0;
    padding: 12px 14px;
    overflow-x: auto;
    background: var(--c-nav-bg);
    color: #e6e8ea;
    border-radius: var(--radius-sm);
    font-family: var(--font-mono);
    font-size: 12.5px;
    line-height: 1.6;
}