/* ==========================================================================
   HEDWIG GROUP — Admin Panel  ·  Microsoft Dynamics 365 / Fluent theme
   Light only. Token-driven. Only presentation — no logic touched.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Fluent design tokens
   -------------------------------------------------------------------------- */
:root {
    /* Accent — Microsoft communication blue */
    --hw-primary:      #fc5500;   /* BRAND orange — accents, icons, active, focus */
    --hw-primary-dk:   #555555;   /* BRAND grey  — hovers, secondary accents */
    --hw-primary-dkk:  #111111;   /* BRAND black — link/text accents */
    --hw-primary-lt:   #ececec;   /* light grey fill (off-white family) */
    --hw-primary-ltt:  #f5f5f5;   /* BRAND off-white — tints, chips, hovers */
    --hw-teal-mid:     #2b88d8;   /* legacy name, now accent-mid */
    --hw-accent-glow:  rgba(0,120,212,0.22);

    /* Neutrals — warm Fluent greys (DESIGN-GUIDELINE §4) */
    --hw-text:         #201f1e;   /* ink        — body + headings */
    --hw-muted:        #484644;   /* ink-soft   — subtitles, secondary, table headers */
    --hw-faint:        #797775;   /* ink-faint  — hints, disabled, placeholders */
    --hw-border:       #edebe9;   /* line       — hairline dividers, card borders */
    --hw-border-2:     #e1dfdd;
    --hw-border-3:     #c8c6c4;   /* stroke     — INPUT borders */
    --hw-stroke:       #8a8886;   /* strokeStrong — secondary/default BUTTON border */
    --hw-row-hover:    #f3f2f1;   /* shell      — row hover */
    --hw-bg:           #faf9f8;   /* canvas     — page background (never white) */
    --hw-surface:      #ffffff;   /* surface    — cards, tables, panels */
    --hw-surface-2:    #f3f2f1;   /* shell      — table header fill */
    --hw-surface-3:    #f3f2f1;   /* shell      — nav hover / subtle fill */
    --hw-nav:          #ffffff;   /* sidebar is WHITE; the ACTIVE item is the grey fill */
    --hw-suite:        #111111;   /* Marvel Republic brand black — suite/nav header background */
    --hw-brand:        #fc5500;   /* Marvel Republic orange — SMALL accents only (logo, active bars, tag dots) */

    /* Fluent depth (elevation) — exact guideline values */
    --hw-shadow:       0 1.6px 3.6px rgba(0,0,0,0.132), 0 0.3px 0.9px rgba(0,0,0,0.108);  /* depth4  — cards/tables */
    --hw-shadow-lg:    0 3.2px 7.2px rgba(0,0,0,0.132), 0 0.6px 1.8px rgba(0,0,0,0.108);  /* depth8  — header */
    --hw-shadow-16:    0 6.4px 14.4px rgba(0,0,0,0.132), 0 1.2px 3.6px rgba(0,0,0,0.108); /* depth16 — modals */

    --hw-radius:    4px;   /* cards · tables · inputs  (rounded-md) */
    --hw-radius-sm: 2px;   /* controls · badges        (rounded-sm) */

    /* Sidebar/header token aliases (used by layout) */
    --hw-sidebar:            #ffffff;
    --hw-sidebar-text:       #201f1e;
    --hw-sidebar-muted:      #484644;
    --hw-sidebar-active-bg:   #f3f2f1;   /* grey fill + blue accent bar — NOT a solid blue block */
    --hw-sidebar-active-text: #201f1e;
    --hw-header-bg:          #ffffff;

    /* Status — solid (used by inline-status-select + legacy) */
    --processing-bg:   #fc5500;  --processing-fg: #fff;
    --pending-bg:      #ca5010;  --pending-fg:    #fff;
    --completed-bg:    #107c10;  --completed-fg:  #fff;
    --failed-bg:       #a4262c;  --failed-fg:     #fff;
    --cancelled-bg:    #605e5c;  --cancelled-fg:  #fff;
    --refunded-bg:     #605e5c;  --refunded-fg:   #fff;
    --on-hold-bg:      #ca5010;  --on-hold-fg:    #fff;
    --unfulfilled-bg:  #a4262c;  --unfulfilled-fg: #fff;
    --assigned-bg:     #fc5500;  --assigned-fg:    #fff;
    --dispatched-bg:   #8764b8;  --dispatched-fg:  #fff;
    --shipped-bg:      #8764b8;  --shipped-fg:     #fff;
    --fulfilled-bg:    #107c10;  --fulfilled-fg:   #fff;

    /* Status — soft fill + dark text (DESIGN-GUIDELINE §4). Colour must MEAN something. */
    --soft-blue-bg:#e9edf1;  --soft-blue-fg:#44525e;   /* info / early — neutral slate (was blue) */
    --soft-green-bg:#dff6dd; --soft-green-fg:#107c10;  /* success / paid    */
    --soft-amber-bg:#fff4ce; --soft-amber-fg:#835c00;  /* warning / pending */
    --soft-red-bg:#fde7e9;   --soft-red-fg:#a4262c;    /* error / rejected  */
    --soft-purple-bg:#f0ecf8;--soft-purple-fg:#5c3d8a;
    --soft-grey-bg:#f3f2f1;  --soft-grey-fg:#484644;   /* neutral / draft   */

    --success-subtle:  #dff6dd;
    --danger-subtle:   #fde7e9;
    --warning-subtle:  #fff4ce;
    --info-subtle:     #f5f5f5;

    --main-color:      #fc5500;
    color-scheme: light;
}

/* --------------------------------------------------------------------------
   2. Base / typography — Segoe UI (Microsoft's font, native on Windows)
   -------------------------------------------------------------------------- */
*:not(i):not(.fa):not(.fas):not(.far):not(.fab):not(.fal):not([class^="fa-"]) {
    font-family: 'Segoe UI', 'Segoe UI Web (West European)', -apple-system, BlinkMacSystemFont, system-ui, 'Helvetica Neue', Arial, sans-serif !important;
}
/* NOTE: never -webkit-font-smoothing: antialiased — on Windows it thins the strokes
   and Segoe UI looks blurry / washed out (DESIGN-GUIDELINE §3 + §10). */
html { font-size: 16px; }
body {
    background-color: var(--hw-bg) !important;
    color: var(--hw-text) !important;
    font-size: 0.9375rem;      /* 15px */
    line-height: 1.5;
    margin: 0; padding: 0;
    -webkit-font-smoothing: auto;
}
::selection { background: #cfe4f7; }
a { color: var(--hw-primary-dkk); }
a:hover { color: var(--hw-primary); }

/* Keyboard focus — one visible ring everywhere */
*:focus-visible { outline: 2px solid var(--hw-primary); outline-offset: 1px; }

/* Slim scrollbars (guideline §3) */
* { scrollbar-width: thin; scrollbar-color: #c8c6c4 transparent; }
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-thumb { background: #c8c6c4; border-radius: 6px; border: 2px solid transparent; background-clip: content-box; }
*::-webkit-scrollbar-thumb:hover { background: #a19f9d; background-clip: content-box; }

/* --------------------------------------------------------------------------
   3. Dynamics suite (top) bar
   -------------------------------------------------------------------------- */
.dyn-suite {
    height: 48px; background: var(--hw-suite); display: flex; align-items: center; gap: 2px;
    padding-right: 6px; color: #fff; position: sticky; top: 0; z-index: 1040;
}
.dyn-waffle { width: 48px; height: 48px; display: flex; align-items: center; justify-content: center; color: rgba(255,255,255,.9); cursor: pointer; border: 0; background: transparent; }
.dyn-waffle:hover { background: rgba(255,255,255,.1); }
.dyn-app { font-size: 15px; font-weight: 600; padding: 0 10px 0 4px; white-space: nowrap; color: #fff; text-decoration: none; display: flex; align-items: center; gap: 8px; }
.dyn-app img { max-height: 26px; width: auto; }
.dyn-suite-sep { width: 1px; height: 22px; background: rgba(255,255,255,.25); margin: 0 6px; }
.dyn-crumb { font-size: 15px; color: rgba(255,255,255,.85); font-weight: 400; white-space: nowrap; }
.dyn-suite-spacer { flex: 1; }
.dyn-suite-ico {
    width: 40px; height: 48px; display: inline-flex; align-items: center; justify-content: center;
    color: rgba(255,255,255,.9); cursor: pointer; position: relative; border: 0; background: transparent; text-decoration: none;
}
.dyn-suite-ico:hover { background: rgba(255,255,255,.1); color: #fff; }
.dyn-suite-ico i { font-size: 1rem; }
.dyn-suite-ico .dyn-bdot { position: absolute; top: 8px; right: 6px; min-width: 17px; height: 17px; padding: 0 4px; background: var(--hw-brand); color: #fff; border-radius: 9px; font-size: 11px; font-weight: 600; line-height: 17px; text-align: center; border: 1.5px solid var(--hw-suite); }
.dyn-user { display: inline-flex; align-items: center; gap: 8px; padding: 0 10px 0 8px; cursor: pointer; height: 48px; color: #fff !important; text-decoration: none; }
.dyn-user:hover { background: rgba(255,255,255,.1); }
.dyn-user .dyn-uname { font-size: 13.5px; font-weight: 400; }
.hw-avatar { width: 30px; height: 30px; border-radius: 50%; background: #c8a1e0; color: #3b2e4d; font-weight: 600; font-size: 12px; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }

/* --------------------------------------------------------------------------
   4. App shell + site map (left nav)
   -------------------------------------------------------------------------- */
.dyn-shell { display: grid; grid-template-columns: 240px 1fr; min-height: calc(100vh - 48px); }
.dyn-sitemap { background: var(--hw-nav); border-right: 1px solid var(--hw-border-2); display: flex; flex-direction: column; position: sticky; top: 48px; height: calc(100vh - 48px); }
.dyn-sm-scroll { flex: 1; overflow-y: auto; padding: 6px 0; }
.dyn-sm-scroll::-webkit-scrollbar { width: 8px; }
.dyn-sm-scroll::-webkit-scrollbar-thumb { background: var(--hw-border-3); }
.dyn-sm-sec { font-size: 12px; font-weight: 600; color: var(--hw-muted); padding: 14px 16px 4px; }
/* Inactive nav sits back (ink-soft label, ink-faint icon); the ACTIVE item is the
   only one at full ink strength. Dark icons on every row flatten the hierarchy. */
.dyn-sm-link {
    display: flex; align-items: center; gap: 11px; height: 38px; padding: 0 12px 0 13px;
    color: var(--hw-muted); text-decoration: none; font-size: 13.5px; position: relative; cursor: pointer;
    transition: background-color .12s, color .12s;
}
.dyn-sm-link > i:first-child { width: 18px; text-align: center; font-size: 15px; color: var(--hw-faint); flex-shrink: 0; transition: color .12s; }
.dyn-sm-link:hover { background: var(--hw-surface-3); color: var(--hw-text); }
.dyn-sm-link:hover > i:first-child { color: var(--hw-muted); }
/* Active = shell fill + 3px brand bar + 600 weight (never a solid blue block) */
.dyn-sm-link.active { background: var(--hw-sidebar-active-bg); font-weight: 600; color: var(--hw-text); }
.dyn-sm-link.active::before { content: ""; position: absolute; left: 0; top: 6px; bottom: 6px; width: 3px; border-radius: 0 2px 2px 0; background: var(--hw-brand); }
.dyn-sm-link.active > i:first-child { color: var(--hw-brand); }
.dyn-sm-badge { margin-left: auto; background: var(--failed-bg); color: #fff; font-size: 11px; font-weight: 600; min-width: 18px; height: 18px; border-radius: 9px; display: flex; align-items: center; justify-content: center; padding: 0 5px; }
.dyn-sm-sub { display: none; flex-direction: column; }
.dyn-sm-group.open .dyn-sm-sub { display: flex; }
.dyn-sm-sub .dyn-sm-link { padding-left: 42px; height: 34px; font-size: 13px; }
.dyn-sm-sub .dyn-sm-link.active::before { display: none; }
.dyn-sm-caret { margin-left: auto; font-size: 11px; color: var(--hw-faint); transition: transform .15s; }
.dyn-sm-group.open > .dyn-sm-link .dyn-sm-caret { transform: rotate(90deg); }
.dyn-sm-foot { border-top: 1px solid var(--hw-border-2); padding: 4px; }
.dyn-sm-switch { display: flex; align-items: center; gap: 10px; height: 44px; padding: 0 13px; font-size: 13.5px; font-weight: 600; border-radius: var(--hw-radius-sm); }
.dyn-sm-switch .dyn-u2 { display: flex; flex-direction: column; line-height: 1.15; }
.dyn-sm-switch .dyn-u2 small { font-weight: 400; font-size: 12px; color: var(--hw-muted); }

.dyn-main { min-width: 0; display: flex; flex-direction: column; }

/* Collapsible site map — icon-only rail (desktop) */
@media (min-width: 992px) {
    .dyn-shell.dyn-collapsed { grid-template-columns: 48px 1fr; }
    .dyn-shell.dyn-collapsed .dyn-sm-link { justify-content: center; padding: 0; }
    .dyn-shell.dyn-collapsed .dyn-sm-link > i:first-child { width: auto; }
    .dyn-shell.dyn-collapsed .dyn-sm-link > span,
    .dyn-shell.dyn-collapsed .dyn-sm-caret,
    .dyn-shell.dyn-collapsed .dyn-sm-sec,
    .dyn-shell.dyn-collapsed .dyn-sm-sub,
    .dyn-shell.dyn-collapsed .dyn-sm-foot .dyn-u2 { display: none !important; }
    .dyn-shell.dyn-collapsed .dyn-sm-foot { justify-content: center; padding: 8px 0; }
    .dyn-shell.dyn-collapsed .dyn-sm-switch { padding: 0; justify-content: center; }
    .dyn-shell.dyn-collapsed .dyn-sm-badge { position: absolute; top: 4px; right: 7px; min-width: 8px; width: 8px; height: 8px; padding: 0; font-size: 0; border-radius: 50%; }
    .dyn-shell.dyn-collapsed .dyn-sm-link.active::before { top: 4px; bottom: 4px; }
}

/* --------------------------------------------------------------------------
   5. Page header / main / footer
   -------------------------------------------------------------------------- */
.hw-page-wrapper { display: flex; flex-direction: column; flex: 1; min-height: 0; }
.hw-page-header { background: var(--hw-surface); border-bottom: 1px solid var(--hw-border-2); padding: 12px 0 10px; }
.hw-page-title { font-size: 1.25rem; font-weight: 600; color: var(--hw-text); letter-spacing: -0.01em; display: flex; align-items: center; gap: 0.5rem; }
.hw-main { flex: 1; padding: 1.5rem 0; background-color: var(--hw-bg); }
.hw-footer { border-top: 1px solid var(--hw-border-2); color: var(--hw-muted); font-size: 0.75rem; padding: 0.7rem 1.25rem; text-align: center; }

/* Content column — page padding 24px, FULL WIDTH of the screen (2026-08-26: the old 1440px
   cap left dead side-gutters on wide monitors while the tables still had to scroll
   horizontally — the owner asked for the layout to use the whole screen instead). */
.dyn-main > .hw-page-wrapper > .hw-page-header > .container-fluid,
.dyn-main > .hw-page-wrapper > .hw-main > .container-fluid,
.dyn-main > .hw-page-wrapper > .hw-footer,
.page-header > .container-fluid,
.vendor-content > .container-fluid,
.shipper-content > .container-fluid,
.support-content > .container-fluid {
    max-width: none;
    margin-inline: auto;
    padding-left: 24px !important;
    padding-right: 24px !important;
    width: 100%;
}
@media (max-width: 767.98px) {
    .dyn-main > .hw-page-wrapper > .hw-page-header > .container-fluid,
    .dyn-main > .hw-page-wrapper > .hw-main > .container-fluid,
    .page-header > .container-fluid,
    .vendor-content > .container-fluid,
    .shipper-content > .container-fluid,
    .support-content > .container-fluid { padding-left: 9px !important; padding-right: 9px !important; }
}

/* ── Mobile: stat / KPI strips portal-wide → ONE compact swipeable row ──
   The stat strips at the top of most pages otherwise stack or grid into big
   tiles that eat the whole first screen on a phone. Same treatment as the
   vendor dashboard the owner approved: slim tiles in a single horizontally
   swipeable row, scrollbar hidden. Phones only — desktop keeps its layout. */
@media (max-width: 767.98px) {
    .sq-stats, .tk-stats, .sh-stats, .shp-stats, .bl-stats, .qg-stats, .rf-stats,
    .es-stats, .lg-stats, .ln-stats, .mc-stats, .md-stats, .mr-stats, .dp-stats,
    .rp-stats, .wp-stats, .stat-strip, .stat-row {
        display: flex !important;
        flex-wrap: nowrap !important;
        gap: 8px !important; margin-bottom: 12px !important;
        overflow-x: auto !important; overflow-y: hidden !important;
        -webkit-overflow-scrolling: touch; scrollbar-width: none;
        padding-bottom: 2px;
    }
    :is(.sq-stats, .tk-stats, .sh-stats, .shp-stats, .bl-stats, .qg-stats, .rf-stats,
        .es-stats, .lg-stats, .ln-stats, .mc-stats, .md-stats, .mr-stats, .dp-stats,
        .rp-stats, .wp-stats, .stat-strip, .stat-row)::-webkit-scrollbar { display: none; }
    .sq-stats > *, .tk-stats > *, .sh-stats > *, .shp-stats > *, .bl-stats > *,
    .qg-stats > *, .rf-stats > *, .es-stats > *, .lg-stats > *, .ln-stats > *,
    .mc-stats > *, .md-stats > *, .mr-stats > *, .dp-stats > *, .rp-stats > *,
    .wp-stats > *, .stat-strip > *, .stat-row > * {
        flex: 0 0 auto !important; min-width: 0 !important; width: auto !important;
        margin: 0 !important; padding: .45rem .7rem !important; gap: 6px !important;
        white-space: nowrap;
    }
    /* shrink the big stat numbers / icons so the slim tiles stay one line tall */
    .sq-num, .tk-num, .sh-num, .shp-num, .es-num, .lg-num, .ln-num, .mc-num,
    .md-num, .mr-num, .dp-num, .rf-num, .wp-num, .qg-num, .stat-num,
    .rf-stat .v, .bl-stat .v, .rp-stat .v { font-size: 1.15rem !important; }
    .sq-ico, .tk-ico, .sh-ico, .shp-ico, .es-ico, .lg-ico, .ln-ico, .mc-ico,
    .md-ico, .mr-ico, .dp-ico, .rf-ico, .qg-ico, .stat-icon { font-size: .95rem !important; }
    .sq-lbl, .tk-lbl, .sh-lbl, .shp-lbl, .es-lbl, .lg-lbl, .ln-lbl, .mc-lbl,
    .md-lbl, .mr-lbl, .dp-lbl, .rf-lbl, .wp-lbl, .qg-lbl, .stat-lbl,
    .rf-stat .l, .bl-stat .l, .rp-stat .l { font-size: .62rem !important; }
}

/* --------------------------------------------------------------------------
   6. Cards (Fluent — crisp, subtle depth)
   -------------------------------------------------------------------------- */
.card { border-radius: var(--hw-radius) !important; border: 1px solid var(--hw-border) !important; box-shadow: var(--hw-shadow) !important; background: var(--hw-surface) !important; color: var(--hw-text); }
.card > .card-header:first-child { border-radius: var(--hw-radius) var(--hw-radius) 0 0 !important; }
.card-header, .hw-card-header { background: var(--hw-surface) !important; border-bottom: 1px solid var(--hw-border) !important; padding: 0.85rem 1.15rem !important; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 0.5rem; }
.card-header .card-title, .card-header h3.card-title, .hw-card-title { font-size: 0.95rem !important; font-weight: 600 !important; color: var(--hw-text) !important; margin: 0 !important; display: flex; align-items: center; gap: 0.4rem; }
.card-body { padding: 1.25rem; color: var(--hw-text); }

/* Stat tile (KPI) — label + big number LEFT, small icon chip RIGHT (§8).
   Icon-left with empty space makes tiles look hollow, so the flow is reversed here
   instead of in every view's markup. */
.hw-stat-card { background: var(--hw-surface); border: 1px solid var(--hw-border); border-radius: var(--hw-radius); box-shadow: var(--hw-shadow); display: flex; flex-direction: row-reverse; align-items: flex-start; justify-content: space-between; gap: 0.75rem; padding: 0.875rem 1rem; height: 100%; transition: box-shadow 0.12s ease, border-color 0.12s ease; text-decoration: none !important; color: var(--hw-text) !important; }
.hw-stat-card > *:not(.hw-stat-icon) { min-width: 0; }
.hw-stat-card:hover { box-shadow: var(--hw-shadow-lg); }
.hw-stat-icon { flex-shrink: 0; width: 36px; height: 36px; border-radius: var(--hw-radius-sm); background: var(--hw-primary-ltt); display: flex; align-items: center; justify-content: center; }
.hw-stat-icon i { font-size: 1rem; color: var(--hw-primary); }
.hw-stat-value { font-size: 1.5rem; font-weight: 600; line-height: 1.1; color: var(--hw-text); font-variant-numeric: tabular-nums; margin-top: 4px; }
.hw-stat-label { font-size: 0.75rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.03em; color: var(--hw-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hw-stat-card--clickable:hover { border-color: var(--hw-primary) !important; }
.hw-stat-filter-hint { font-size: 0.75rem; font-weight: 400; color: var(--hw-faint); margin-top: 4px; }
/* linked tiles must fill the grid row, or they render shorter than the rest (§8) */
a.hw-stat-card, .hw-stat-card-link { height: 100%; display: flex; }

/* --------------------------------------------------------------------------
   7. Tables (Fluent DetailsList)
   -------------------------------------------------------------------------- */
/* ── ONE grid look for the whole portal (guideline §3 .hms-table) ──────────
   Bootstrap .table, DataTables and every page-custom table render identically.
   text-align is deliberately NOT forced — each column keeps its own so the
   header stays lined up with its values (§8). */
.table { color: var(--hw-text); }
table thead th, table thead td {
    background: var(--hw-surface-2) !important;   /* shell #f3f2f1 */
    color: #323130 !important;
    font-size: 12.5px !important;
    font-weight: 600 !important;
    text-transform: none !important;              /* Fluent headers are sentence-case */
    letter-spacing: 0 !important;
    padding: 10px 14px !important;
    border-top: none !important;
    border-bottom: 1px solid var(--hw-border-2) !important;
    white-space: nowrap;
    vertical-align: middle;
}
table tbody td, table tbody th {
    color: var(--hw-text) !important;
    font-size: 14px !important;
    padding: 11px 14px !important;
    vertical-align: middle;
}
/* Digits line up in a column no matter the value */
table th, table td { font-variant-numeric: tabular-nums; }

/* Fluent DetailsList — no zebra striping, no vertical grid: hairline row separators only.
   Bootstrap 5 paints stripes with `box-shadow: inset 0 0 0 9999px`, NOT background-color,
   so clearing the background alone leaves the stripes visible. Both must go. */
.table-striped > tbody > tr > *,
.table-striped > tbody > tr:nth-of-type(odd) > *,
.table-striped > tbody > tr:nth-of-type(even) > * {
    background-color: transparent !important;
    box-shadow: none !important;
}
.table-striped > tbody > tr:hover > * { background-color: var(--hw-row-hover) !important; }
table tbody tr { transition: background-color 0.08s ease; }
table tbody tr:hover > td, table tbody tr:hover > th { background-color: var(--hw-row-hover) !important; }
table > :not(caption) > * > * { border-left-width: 0 !important; border-right-width: 0 !important; }
table > tbody > tr > td, table > tbody > tr > th { border-top: 1px solid var(--hw-border) !important; border-bottom-width: 0 !important; }
table > tbody > tr:first-child > td, table > tbody > tr:first-child > th { border-top: none !important; }
/* Bootstrap's .table-bordered puts a border on the ROW (`> :not(caption) > *`) as
   well as on the cells. No border-color is declared for it, so it falls back to
   currentColor — our ink #201f1e — and every row line rendered BLACK. Zeroing the
   cells alone (which is what this rule used to do) never touched the row. */
table.table-bordered { border: 0 !important; }
.table-bordered > :not(caption) > *,
.table-bordered > :not(caption) > * > * { border-width: 0 !important; }
/* …then give the separators back at the system hairline */
.table-bordered > thead > tr > th, .table-bordered > thead > tr > td {
    border-bottom: 1px solid var(--hw-border-2) !important;
}
.table-bordered > tbody > tr > td, .table-bordered > tbody > tr > th,
.table-bordered > tfoot > tr > td, .table-bordered > tfoot > tr > th {
    border-top: 1px solid var(--hw-border) !important;
}
.table-bordered > tbody > tr:first-child > td, .table-bordered > tbody > tr:first-child > th { border-top: none !important; }

/* Totals rows: <tfoot> was never covered by the grid rules, so it fell back to
   Bootstrap's defaults while every other row used the hairline. */
table > tfoot > tr > td, table > tfoot > tr > th {
    border-left-width: 0 !important; border-right-width: 0 !important; border-bottom-width: 0 !important;
    border-top: 1px solid var(--hw-border) !important;
    background: var(--hw-surface);
    color: var(--hw-text);
    font-size: 14px;
    padding: 11px 14px !important;
    vertical-align: middle;
}
table > tfoot > tr:last-child > td, table > tfoot > tr:last-child > th {
    border-top: 1px solid var(--hw-border-2) !important;
    font-weight: 600;
}

/* Never let a table border fall through to currentColor again */
table, table > thead, table > tbody, table > tfoot, table > * > tr { border-color: var(--hw-border); }
.table-responsive { border-radius: 0 0 var(--hw-radius) var(--hw-radius); overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* Numeric columns — centred on BOTH header and cell (§8/§9): a left header above
   right-aligned values is the #1 thing that makes a grid look wrong.
   Add .hw-num to the <th> AND the matching <td>. */
table th.hw-num, table td.hw-num { text-align: center !important; }
/* First column carries the record name */
table tbody td:first-child { font-weight: 500; }

/* --------------------------------------------------------------------------
   8. Buttons (Fluent)
   -------------------------------------------------------------------------- */
/* base: h-8 · px-3.5 · 14px · 600 · rounded-sm (§8) */
.btn { border-radius: var(--hw-radius-sm) !important; font-weight: 600; font-size: 0.875rem; padding: 0.375rem 0.875rem; line-height: 1.35; transition: background-color .1s ease, border-color .1s ease, color .1s ease !important; }
.btn-sm { font-size: 0.75rem !important; padding: 0.25rem 0.625rem !important; }
.btn-lg { font-size: 0.9375rem !important; padding: 0.5rem 1.15rem !important; }
/* Primary CTA = Marvel Republic brand BLACK (calm, premium — orange stays an accent).
   The warm --hw-primary family below drives links/icons/tints, not the solid buttons. */
.btn-primary, .bg-primary { background-color: #111111 !important; border-color: #111111 !important; color: #fff !important; }
.btn-primary:hover, .bg-primary:hover { background-color: #2b2b2b !important; border-color: #2b2b2b !important; color: #fff !important; }
.btn-primary:active { background-color: #000 !important; border-color: #000 !important; }
.btn-outline-primary { color: var(--hw-primary-dkk) !important; border-color: var(--hw-stroke) !important; background: var(--hw-surface) !important; }
.btn-outline-primary:hover { background-color: var(--hw-primary-ltt) !important; border-color: var(--hw-primary) !important; color: var(--hw-primary-dkk) !important; }
.btn-secondary { background-color: var(--hw-surface) !important; border-color: var(--hw-stroke) !important; color: var(--hw-text) !important; }
.btn-secondary:hover { background-color: var(--hw-surface-3) !important; border-color: var(--hw-stroke) !important; color: var(--hw-text) !important; }
.btn-light { background: var(--hw-surface) !important; border-color: var(--hw-stroke) !important; color: var(--hw-text) !important; }

/* Destructive actions are OUTLINED, never solid red (§8 + §10 Don't) */
.btn-danger, .btn-outline-danger,
.btn.btn-sm.btn-danger, .btn.btn-xs.btn-danger {
    background-color: var(--hw-surface) !important;
    border-color: var(--hw-stroke) !important;
    color: #a4262c !important;
}
.btn-danger:hover, .btn-outline-danger:hover,
.btn.btn-sm.btn-danger:hover, .btn.btn-xs.btn-danger:hover {
    background-color: #fdf3f4 !important;
    border-color: #a4262c !important;
    color: #a4262c !important;
}

/* --------------------------------------------------------------------------
   9. Forms
   -------------------------------------------------------------------------- */
/* Field: rounded-sm · border-stroke · brand focus ring (§8 Form field) */
.form-control, .form-select { border-radius: var(--hw-radius-sm) !important; border-color: var(--hw-border-3) !important; background-color: var(--hw-surface) !important; color: var(--hw-text) !important; font-size: 0.875rem; box-shadow: none !important; }
.form-control::placeholder { color: var(--hw-faint) !important; }
.form-control:focus, .form-select:focus { border-color: var(--hw-primary) !important; background-color: var(--hw-surface) !important; color: var(--hw-text) !important; box-shadow: 0 0 0 1px var(--hw-primary) !important; outline: none !important; }
.form-control:disabled, .form-control[readonly], .form-select:disabled { background-color: var(--hw-surface-3) !important; color: var(--hw-faint) !important; }
.form-check-input:checked { background-color: var(--hw-primary) !important; border-color: var(--hw-primary) !important; }
.form-check-input:focus { border-color: var(--hw-primary) !important; box-shadow: 0 0 0 1px var(--hw-primary) !important; }
.input-group-text { background: var(--hw-surface-3) !important; border-color: var(--hw-border-3) !important; color: var(--hw-muted) !important; }
/* Labels: 14px / 500 / ink — never tiny uppercase grey */
label, .form-label { color: var(--hw-text); font-size: 0.875rem; font-weight: 500; margin-bottom: 0.375rem; }

/* --------------------------------------------------------------------------
   10. Pagination
   -------------------------------------------------------------------------- */
.pagination .page-item.active .page-link { background-color: var(--hw-primary) !important; border-color: var(--hw-primary) !important; color: #fff !important; border-radius: var(--hw-radius-sm) !important; }
.pagination .page-link { color: var(--hw-primary-dkk) !important; border-radius: var(--hw-radius-sm) !important; border-color: var(--hw-border) !important; background: var(--hw-surface) !important; }
.pagination .page-link:hover { background-color: var(--hw-surface-3) !important; border-color: var(--hw-border-3) !important; }

/* --------------------------------------------------------------------------
   11. Status badges — soft Fluent pills
   -------------------------------------------------------------------------- */
/* One badge, everywhere: rounded-sm · px-2 py-0.5 · 12px · 600 (§8 Badge) */
.badge { border-radius: var(--hw-radius-sm) !important; font-weight: 600 !important; font-size: 0.75rem !important; padding: 0.15rem 0.5rem !important; line-height: 1.5; }
.btn.btn-sm.status-badge { cursor: default; pointer-events: none; border-width: 0; white-space: nowrap; font-size: 0.75rem; border-radius: var(--hw-radius-sm) !important; padding: 0.15rem 0.5rem; font-weight: 600; letter-spacing: 0; line-height: 1.5; }
.status-badge:not(.btn) { display: inline-flex; align-items: center; gap: 4px; padding: 0.15rem 0.5rem; font-size: 0.75rem; font-weight: 600; line-height: 1.5; border-radius: var(--hw-radius-sm); border: none; white-space: nowrap; }

.status-badge.status-processing, .status-badge.status-assigned { background: var(--soft-blue-bg) !important; color: var(--soft-blue-fg) !important; }
.status-badge.status-completed, .status-badge.status-fulfilled, .status-badge.status-delivered { background: var(--soft-green-bg) !important; color: var(--soft-green-fg) !important; }
.status-badge.status-pending, .status-badge.status-hold, .status-badge.status-on-hold, .status-badge.status-otw-to-uk { background: var(--soft-amber-bg) !important; color: var(--soft-amber-fg) !important; }
.status-badge.status-failed, .status-badge.status-unfulfilled { background: var(--soft-red-bg) !important; color: var(--soft-red-fg) !important; }
.status-badge.status-shipped, .status-badge.status-dispatched, .status-badge.status-returned-to-uk, .status-badge.status-partially-refunded { background: var(--soft-purple-bg) !important; color: var(--soft-purple-fg) !important; }
.status-badge.status-ready-to-dispatch { background: var(--soft-blue-bg) !important; color: var(--soft-blue-fg) !important; }
.status-badge.status-cancelled, .status-badge.status-refunded, .status-badge.status-placed, .status-badge.status-n-a, .status-badge.status-destroyed { background: var(--soft-grey-bg) !important; color: var(--soft-grey-fg) !important; }

/* Bootstrap badge-{color} compat */
.badge.badge-primary,   .badge-primary   { background-color: var(--soft-blue-bg) !important; color: var(--soft-blue-fg) !important; }
.badge.badge-success,   .badge-success   { background-color: var(--soft-green-bg) !important; color: var(--soft-green-fg) !important; }
.badge.badge-danger,    .badge-danger    { background-color: var(--soft-red-bg) !important; color: var(--soft-red-fg) !important; }
.badge.badge-warning,   .badge-warning   { background-color: var(--soft-amber-bg) !important; color: var(--soft-amber-fg) !important; }
.badge.badge-info,      .badge-info      { background-color: var(--soft-blue-bg) !important; color: var(--soft-blue-fg) !important; }
.badge.badge-secondary, .badge-secondary, .badge.bg-secondary { background-color: var(--soft-grey-bg) !important; color: var(--soft-grey-fg) !important; }
.badge.badge-light,     .badge-light     { background-color: var(--hw-surface-3) !important; color: var(--hw-text) !important; }
.badge.badge-dark,      .badge-dark      { background-color: #323130 !important; color: #fff !important; }

/* Bootstrap's .bg-* utilities on a badge — these are the solid saturated blocks
   the guideline forbids (§4: "soft fill + dark text — never solid saturated
   blocks"). Mapped here so every page inherits the right look without touching
   its markup; scoped to .badge so panels and buttons using .bg-* are unaffected. */
.badge.bg-primary { background-color: var(--soft-blue-bg) !important;  color: var(--soft-blue-fg) !important; }
.badge.bg-info    { background-color: var(--soft-blue-bg) !important;  color: var(--soft-blue-fg) !important; }
.badge.bg-success { background-color: var(--soft-green-bg) !important; color: var(--soft-green-fg) !important; }
.badge.bg-warning { background-color: var(--soft-amber-bg) !important; color: var(--soft-amber-fg) !important; }
.badge.bg-danger  { background-color: var(--soft-red-bg) !important;   color: var(--soft-red-fg) !important; }
.badge.bg-secondary { background-color: var(--soft-grey-bg) !important; color: var(--soft-grey-fg) !important; }
.badge.bg-light   { background-color: var(--hw-surface-3) !important;  color: var(--hw-text) !important; }
.badge.bg-dark    { background-color: var(--soft-grey-bg) !important;  color: var(--hw-text) !important; }

/* Row actions (.btn-xs) = Fluent command buttons: transparent, icon carries the meaning,
   hover = shell. A row of solid coloured pills is not a DetailsList. */
.btn.btn-xs {
    padding: 0 0.4rem !important; font-size: 0.8rem !important; border-radius: var(--hw-radius-sm) !important;
    line-height: 1 !important; display: inline-flex !important; align-items: center !important; justify-content: center !important;
    gap: 6px; min-width: 30px; height: 30px; font-weight: 600;
    background: transparent !important; border: 1px solid transparent !important; color: var(--hw-text) !important;
}
.btn.btn-xs:hover { background: var(--hw-surface-3) !important; border-color: transparent !important; }
.btn.btn-xs.btn-primary, .btn.btn-xs.btn-info { color: var(--hw-primary-dkk) !important; }
.btn.btn-xs.btn-success { color: #107c10 !important; }
.btn.btn-xs.btn-warning { color: #835c00 !important; }
.btn.btn-xs.btn-danger  { color: #a4262c !important; }
.btn.btn-xs.btn-danger:hover { background: #fdf3f4 !important; }
.btn.btn-xs.btn-secondary { color: var(--hw-muted) !important; }

/* Affirmative actions — outlined, same family as danger (colour stays meaningful) */
.btn.btn-sm.btn-success, .btn-success { background: var(--hw-surface) !important; border-color: var(--hw-stroke) !important; color: #107c10 !important; }
.btn.btn-sm.btn-success:hover, .btn-success:hover { background: #dff6dd !important; border-color: #107c10 !important; color: #107c10 !important; }
.btn.btn-sm.btn-info { background: var(--hw-primary) !important; border-color: var(--hw-primary) !important; color: #fff !important; }
.btn.btn-sm.btn-warning { background: var(--pending-bg) !important; border-color: var(--pending-bg) !important; color: #fff !important; }

/* --------------------------------------------------------------------------
   12. Legacy small-box, filter bars, select2, toggle
   -------------------------------------------------------------------------- */
.small-box { background: var(--hw-surface) !important; border: 1px solid var(--hw-border) !important; border-radius: var(--hw-radius) !important; box-shadow: var(--hw-shadow) !important; color: var(--hw-text) !important; }
.small-box .inner h3, .small-box .inner p { color: var(--hw-text) !important; }
.small-box .icon > i { color: var(--hw-border-2) !important; font-size: 60px; }

#shipper-assignments-filter-wrapper, #orders-filter-wrapper, #vendor-assignments-filter-wrapper, .orders-filter-bar { background: var(--hw-surface); border: 1px solid var(--hw-border); border-radius: var(--hw-radius); padding: 1rem 1.15rem; margin-bottom: 1.15rem; box-shadow: var(--hw-shadow); }
#orders-filter-wrapper label, #shipper-assignments-filter-wrapper label, .orders-filter-bar .form-group label, .form-group label { font-size: 0.8125rem; font-weight: 500; text-transform: none; letter-spacing: 0; color: var(--hw-text); margin-bottom: 0.375rem; display: block; }
.orders-filter-bar .form-control, .orders-filter-bar .select2-container .select2-selection { height: 34px; min-height: 34px; font-size: 0.875rem; border: 1px solid var(--hw-border-3); border-radius: var(--hw-radius-sm); background: var(--hw-surface); color: var(--hw-text); }
.orders-filter-bar .form-control:focus, .orders-filter-bar .select2-container--focus .select2-selection { border-color: var(--hw-primary); box-shadow: 0 0 0 1px var(--hw-primary); }
.orders-filter-bar .select2-container { width: 100% !important; }
#toggle-filters { font-size: 0.8rem; padding: 0.4rem 0.9rem; border-radius: var(--hw-radius-sm) !important; border-color: var(--hw-border-3) !important; color: var(--hw-primary-dkk) !important; font-weight: 600; background: var(--hw-surface) !important; }
#toggle-filters:hover { background: var(--hw-primary) !important; color: #fff !important; border-color: var(--hw-primary) !important; }
.btn.btn-warning[class*="sync"], form#sync-all-form .btn, .btn-warning.btn-sm { background: var(--hw-primary) !important; border-color: var(--hw-primary) !important; color: #fff !important; }
.btn-warning.btn-sm:hover { background: var(--hw-primary-dk) !important; border-color: var(--hw-primary-dk) !important; }

.select2-container--default .select2-selection, .select2-container--bootstrap-5 .select2-selection { background: var(--hw-surface) !important; border-color: var(--hw-border-3) !important; color: var(--hw-text) !important; border-radius: var(--hw-radius-sm) !important; }
.select2-dropdown { z-index: 9999 !important; border-radius: var(--hw-radius-sm) !important; border: 1px solid var(--hw-border-2) !important; box-shadow: var(--hw-shadow-lg) !important; background: var(--hw-surface) !important; }
.select2-results__option { padding: 0.45rem 0.8rem; font-size: 0.875rem; color: var(--hw-text); }
.select2-container--default .select2-results__option--highlighted[aria-selected] { background-color: var(--hw-primary) !important; color: #fff; }
.select2-selection__choice { background-color: var(--hw-primary-lt) !important; color: var(--hw-primary-dkk) !important; border: 1px solid var(--hw-border-2) !important; border-radius: var(--hw-radius-sm); }

/* --------------------------------------------------------------------------
   13. DataTables
   -------------------------------------------------------------------------- */
.table-responsive { overflow-x: auto; -webkit-overflow-scrolling: touch; }
table.dataTable { width: 100% !important; }
table.table-bordered.dataTable tbody th, table.table-bordered.dataTable tbody td { border-bottom-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 200px; }
#orders_table.dataTable thead th { background: var(--hw-surface-2); color: #323130; font-size: 12.5px; font-weight: 600; text-transform: none; letter-spacing: 0; padding: 10px 14px; white-space: nowrap; border-color: var(--hw-border-2); }
#orders_table.dataTable tbody td { font-size: 14px; padding: 11px 14px; vertical-align: middle; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; border-color: var(--hw-border); color: var(--hw-text); }
#orders_table.dataTable tbody tr { transition: background .08s ease; }
#orders_table.dataTable tbody tr:hover td { background-color: var(--hw-row-hover) !important; }
#orders_table.dataTable tbody tr.odd td,
#orders_table.dataTable tbody tr.even td { background-color: transparent; }
#orders_table_wrapper .dataTables_scroll { overflow: visible; }
#orders_table_wrapper .dataTables_scrollBody { overflow-x: auto !important; overflow-y: visible !important; }
.dataTables_wrapper .dataTables_length label, .dataTables_wrapper .dataTables_filter label, .dataTables_wrapper .dataTables_info { font-size: 0.85rem; color: var(--hw-muted); }
.dataTables_wrapper .dataTables_length select { padding: 0.35rem 0.6rem; font-size: 0.875rem; border-radius: var(--hw-radius-sm); border: 1px solid var(--hw-border-3); background: var(--hw-surface); color: var(--hw-text); }
.dataTables_wrapper .dataTables_filter input { border-radius: var(--hw-radius-sm) !important; border: 1px solid var(--hw-border-3) !important; padding: 0.4rem 0.7rem !important; font-size: 0.85rem !important; background: var(--hw-surface) !important; color: var(--hw-text) !important; }
.dataTables_wrapper .dataTables_filter input:focus { border-color: var(--hw-primary) !important; box-shadow: 0 0 0 1px var(--hw-primary) !important; outline: none; }
.dataTables_wrapper .dataTables_paginate .pagination { gap: 0.25rem; margin: 0; }
.dataTables_wrapper .dataTables_paginate .page-item .page-link { padding: 0.4rem 0.6rem; font-size: 0.85rem; border-radius: var(--hw-radius-sm); color: var(--hw-primary-dkk); border: 1px solid var(--hw-border); background: var(--hw-surface); }
.dataTables_wrapper .dataTables_paginate .page-item.active .page-link { background-color: var(--hw-primary) !important; border-color: var(--hw-primary) !important; color: #fff !important; }
.dataTables_wrapper .dataTables_paginate .page-item .page-link:hover { color: var(--hw-primary-dkk); background-color: var(--hw-surface-3); border-color: var(--hw-border-3); }
.dataTables_wrapper .dt-buttons .btn { background: var(--hw-primary) !important; border-color: var(--hw-primary) !important; color: #fff !important; border-radius: var(--hw-radius-sm) !important; font-size: 0.8rem !important; padding: 0.4rem 0.9rem !important; font-weight: 600; }
.dataTables_wrapper .dt-buttons .btn:hover { background: var(--hw-primary-dk) !important; }

/* --------------------------------------------------------------------------
   14. Order detail, items table
   -------------------------------------------------------------------------- */
.order-detail-label { font-size: 0.8125rem; color: var(--hw-muted); }
.order-detail-value { font-weight: 600; color: var(--hw-text); }
.order-total-final { font-size: 1.25rem; font-weight: 600; color: var(--hw-text); }
.border-gray { border-color: var(--hw-border) !important; }
.order-info-card { box-shadow: var(--hw-shadow); border: 1px solid var(--hw-border); border-radius: var(--hw-radius); background: var(--hw-surface); }
.order-info-card .text-uppercase { font-size: 0.75rem; font-weight: 600; letter-spacing: 0.03em; color: var(--hw-muted); }
.order-totals-card { border: 1px solid var(--hw-border); background-color: var(--hw-surface-3) !important; box-shadow: var(--hw-shadow); border-radius: var(--hw-radius); }
.order-items-table-wrapper .table thead th { font-size: 12.5px !important; font-weight: 600 !important; text-transform: none !important; letter-spacing: 0 !important; color: #323130 !important; border-bottom: 1px solid var(--hw-border-2) !important; white-space: nowrap; background-color: var(--hw-surface-2) !important; }
.order-items-table-wrapper .table tbody tr:hover { background-color: var(--hw-row-hover) !important; }
.order-items-table-wrapper .table td, .order-items-table-wrapper .table th { vertical-align: middle !important; padding: 0.8rem 1rem; }
.order-items-table-wrapper .img-thumbnail, .order-items-table-wrapper .order-item-img { max-width: 60px; max-height: 60px; min-width: 60px; min-height: 60px; border-radius: var(--hw-radius); object-fit: contain; border: 1px solid var(--hw-border); background: var(--hw-surface); }
.order-items-table-wrapper .table tbody td { border-bottom: 1px solid var(--hw-border); }

/* --------------------------------------------------------------------------
   15. Modals
   -------------------------------------------------------------------------- */
.modal-content { --bs-modal-border-radius: var(--hw-radius); --bs-modal-inner-border-radius: 3px; border-radius: var(--hw-radius) !important; border: 1px solid var(--hw-border) !important; box-shadow: var(--hw-shadow-16) !important; overflow: hidden; background: var(--hw-surface) !important; color: var(--hw-text); }
/* Flyouts are panels: 4px + depth8, never the Bootstrap 6px default */
.dropdown-menu { border-radius: var(--hw-radius) !important; border: 1px solid var(--hw-border-2) !important; box-shadow: var(--hw-shadow-lg) !important; background: var(--hw-surface) !important; color: var(--hw-text); padding: 4px; }
.dropdown-item { border-radius: var(--hw-radius-sm); font-size: 0.875rem; color: var(--hw-text); padding: 0.4rem 0.65rem; }
.dropdown-item:hover, .dropdown-item:focus { background: var(--hw-surface-3); color: var(--hw-text); }
.dropdown-item.active, .dropdown-item:active { background: var(--hw-primary-ltt); color: var(--hw-primary-dkk); }
.dropdown-divider { border-color: var(--hw-border); }
.btn-close { border-radius: var(--hw-radius-sm) !important; }
.modal-header { background: var(--hw-surface) !important; color: var(--hw-text) !important; border-bottom: 1px solid var(--hw-border) !important; padding: 0.9rem 1.25rem !important; }
/* Header markup often carries inline color:#fff for the old coloured headers — force dark so nothing is invisible on the white Fluent header */
.modal-header *:not(.badge):not(.btn-close) { color: var(--hw-text) !important; }
.modal-title { font-size: 1.05rem !important; font-weight: 600 !important; color: var(--hw-text) !important; }
.modal-body { padding: 1.15rem 1.35rem !important; color: var(--hw-text); }
.modal-footer { border-top: 1px solid var(--hw-border) !important; padding: 0.75rem 1.25rem !important; background: var(--hw-bg); }
.btn-close { opacity: 0.6; }
.btn-close:hover { opacity: 1; }

/* --------------------------------------------------------------------------
   16. Misc
   -------------------------------------------------------------------------- */
.item-link-icon { display: inline-flex; align-items: center; justify-content: center; width: 2rem; height: 2rem; border-radius: var(--hw-radius-sm); color: var(--hw-primary-dkk); background-color: var(--hw-primary-ltt); }
.item-link-icon:hover { background-color: var(--hw-primary); color: #fff; }
.edit-vendor, .edit-vendor-status, .edit-vendor-status-modal { color: var(--failed-bg); }
.alert { border-radius: var(--hw-radius) !important; border-left-width: 4px !important; font-size: 0.875rem; padding: 0.75rem 1rem !important; }
.alert-success { background: var(--success-subtle) !important; border-color: var(--completed-bg) !important; color: var(--soft-green-fg) !important; }
.alert-danger  { background: var(--danger-subtle) !important; border-color: var(--failed-bg) !important; color: var(--soft-red-fg) !important; }
.alert-warning { background: var(--warning-subtle) !important; border-color: var(--pending-bg) !important; color: var(--soft-amber-fg) !important; }
.alert-info    { background: var(--info-subtle) !important; border-color: #cbd4dc !important; color: var(--soft-blue-fg) !important; }
.text-dark { color: var(--hw-text) !important; }
.text-muted { color: var(--hw-muted) !important; }

/* Bootstrap's own blues (utility classes the token sweep can't reach) → brand.
   .text-primary is the page-header/icon accent all over the views — brand orange. */
.text-primary { color: var(--hw-primary) !important; }
.text-info { color: var(--soft-blue-fg) !important; }
.bg-info:not(.badge) { background-color: var(--soft-blue-bg) !important; color: var(--soft-blue-fg) !important; }
.badge-info { background-color: var(--soft-blue-bg) !important; color: var(--soft-blue-fg) !important; }
.btn-info { background: var(--hw-primary) !important; border-color: var(--hw-primary) !important; color: #fff !important; }
.btn-info:hover { background: #111111 !important; border-color: #111111 !important; color: #fff !important; }
.bg-white { background-color: var(--hw-surface) !important; }
.bg-light { background-color: var(--hw-surface-3) !important; }
hr { border-color: var(--hw-border); opacity: 1; }
.carousel-control-prev-icon, .carousel-control-next-icon { background-color: rgba(0,0,0,0.55); border-radius: 50%; }

/* --------------------------------------------------------------------------
   17. Responsive — sitemap drawer
   -------------------------------------------------------------------------- */
.dyn-backdrop { display: none; position: fixed; inset: 48px 0 0; background: rgba(0,0,0,.4); z-index: 1035; }
.dyn-mobile-toggle { display: none; }
@media (max-width: 991.98px) {
    .dyn-shell { grid-template-columns: 1fr; }
    .dyn-sitemap { position: fixed; top: 48px; left: 0; width: 260px; transform: translateX(-100%); box-shadow: var(--hw-shadow-lg); transition: transform .2s ease; z-index: 1038; }
    .dyn-shell.dyn-open .dyn-sitemap { transform: translateX(0); }
    .dyn-shell.dyn-open .dyn-backdrop { display: block; }
    .dyn-mobile-toggle { display: inline-flex; }
    .dyn-crumb, .dyn-user .dyn-uname { display: none; }
    .dyn-suite-search { display: none; }
}

/* --------------------------------------------------------------------------
   18. Command bar (Dynamics) — action strip above lists  ·  .hw-cmdbar
   -------------------------------------------------------------------------- */
.hw-cmdbar { display: flex; align-items: center; gap: 2px; background: var(--hw-surface); border: 1px solid var(--hw-border); border-radius: var(--hw-radius); padding: 0 4px; min-height: 44px; margin-bottom: 1rem; flex-wrap: wrap; }
.hw-cmd { display: inline-flex; align-items: center; gap: 7px; height: 40px; padding: 0 11px; background: transparent; border: 0; color: var(--hw-text); font-size: 0.875rem; font-weight: 400; font-family: inherit; cursor: pointer; white-space: nowrap; border-radius: var(--hw-radius-sm); text-decoration: none; }
.hw-cmd > i { font-size: 0.9rem; color: var(--hw-muted); width: 16px; text-align: center; }
.hw-cmd:hover { background: var(--hw-surface-3); color: var(--hw-text); }
.hw-cmd:disabled, .hw-cmd.disabled { color: var(--hw-faint); cursor: default; pointer-events: none; }
.hw-cmd:disabled > i { color: var(--hw-faint); }
.hw-cmd.primary > i { color: var(--hw-primary); }
.hw-cmd.active { background: var(--hw-surface-3); color: var(--hw-primary-dkk); }
.hw-cmd.active > i { color: var(--hw-primary); }
.hw-cmd-div { width: 1px; height: 20px; background: var(--hw-border-2); margin: 0 5px; flex: none; }
.hw-cmd-spacer { flex: 1 1 auto; }
.hw-cmd-search { display: inline-flex; align-items: center; gap: 7px; height: 30px; width: 240px; max-width: 100%; background: var(--hw-surface); border: 1px solid var(--hw-stroke); border-radius: var(--hw-radius-sm); padding: 0 9px; margin: 0 4px; }
.hw-cmd-search > i { font-size: 0.85rem; color: var(--hw-muted); }
.hw-cmd-search input { border: 0; outline: 0; background: transparent; font-size: 0.85rem; color: var(--hw-text); width: 100%; }
.hw-cmd-search:focus-within { border-color: var(--hw-primary); box-shadow: 0 0 0 1px var(--hw-primary); }
@media (max-width: 575.98px) { .hw-cmd .hw-cmd-lbl { display: none; } .hw-cmd-search { width: 150px; } }

/* --------------------------------------------------------------------------
   19. Page-local style normaliser
   Views ship their own <style> blocks; these rules stop any single page from
   drifting away from the system (guideline §9: one component per job).
   The table rules in §7 already win over page-local `th` styles because they
   are !important — this covers the shapes that aren't tables.
   -------------------------------------------------------------------------- */
/* Hand-rolled pills take the badge shape. Avatars stay the only circles. */
.pill, .rounded-pill, .badge.rounded-pill { border-radius: var(--hw-radius-sm) !important; }
.rounded-circle, .hw-avatar, .user-avatar, .avatar, .avatar-circle, .rounded-pill.progress-bar { border-radius: 50% !important; }
.progress { border-radius: var(--hw-radius-sm) !important; background: var(--hw-surface-3) !important; height: 6px; }
.progress-bar { border-radius: var(--hw-radius-sm) !important; }
/* No 12px+ "SaaS" cards anywhere (§10) */
.rounded, .rounded-2, .rounded-3, .rounded-4 { border-radius: var(--hw-radius) !important; }
.shadow, .shadow-sm { box-shadow: var(--hw-shadow) !important; }
.shadow-lg { box-shadow: var(--hw-shadow-lg) !important; }
/* Headings: 600, never 700+ (§5) */
h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 { font-weight: 600; color: var(--hw-text); letter-spacing: -0.01em; }
.fw-bold, .fw-bolder, strong, b { font-weight: 600 !important; }
h1, .h1 { font-size: 1.5rem; }
h2, .h2 { font-size: 1.25rem; }
h3, .h3 { font-size: 1.125rem; }
h4, .h4 { font-size: 1rem; }
h5, .h5 { font-size: 0.9375rem; }
h6, .h6 { font-size: 0.875rem; }
/* Small print stays legible — "light grey tiny text" is an explicit Don't (§10) */
small, .small { font-size: 0.8125rem; }
.text-secondary { color: var(--hw-muted) !important; }

/* --------------------------------------------------------------------------
   20. Shared bits every page pulls from — build once, use everywhere (§11)
   -------------------------------------------------------------------------- */
/* Empty state: icon + one sentence, inside the table (§9 rule 5) */
.hw-empty { text-align: center !important; color: var(--hw-muted) !important; padding: 2.5rem 1rem !important; font-size: 0.875rem !important; font-weight: 400 !important; }
.hw-empty i, .hw-empty .hw-empty-ico { display: block; font-size: 1.5rem; color: var(--hw-faint); margin-bottom: 0.5rem; }
.hw-empty strong, .hw-empty .hw-empty-title { display: block; font-weight: 600; color: var(--hw-text); margin-bottom: 0.15rem; }

/* Titles */
.hw-section-title { font-size: 1rem; font-weight: 600; color: var(--hw-text); margin: 0; }
.hw-subtitle { font-size: 0.875rem; color: var(--hw-muted); margin: 0.125rem 0 0; }
.hw-hint { font-size: 0.75rem; color: var(--hw-faint); }

/* Stat-tile icon-chip tones (§8) — same six meanings as the status pills */
.hw-chip-brand { background: var(--hw-primary-ltt) !important; color: var(--hw-primary) !important; }
.hw-chip-green { background: var(--soft-green-bg) !important; color: var(--soft-green-fg) !important; }
.hw-chip-amber { background: var(--soft-amber-bg) !important; color: var(--soft-amber-fg) !important; }
.hw-chip-red   { background: var(--soft-red-bg) !important;   color: var(--soft-red-fg) !important; }
.hw-chip-blue  { background: var(--soft-blue-bg) !important;  color: var(--soft-blue-fg) !important; }
.hw-chip-grey  { background: var(--hw-surface-3) !important;  color: var(--hw-muted) !important; }

/* Fluent DetailsList has no zebra striping — belt-and-braces for page CSS that
   still paints alternating rows through a class or attribute selector. */
table[id] > tbody > tr:nth-child(even) > td:not(.hw-striped),
table[class] > tbody > tr:nth-child(even) > td:not(.hw-striped) { background-image: none; }

/* --------------------------------------------------------------------------
   21. Control-shape enforcement
   §6 says "cards/tables/inputs 4px" but the shipped Form-field component in §8
   is `rounded-sm`. The component wins: every field in the portal is 2px, so a
   page-local rule can never make one form look different from the next.
   -------------------------------------------------------------------------- */
input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
select, textarea,
.form-control, .form-select, .select2-selection {
    border-radius: var(--hw-radius-sm) !important;
}
.btn-group > .btn, .btn-group, .dt-buttons.btn-group { border-radius: var(--hw-radius-sm) !important; }
.btn-group > .btn:not(:first-child) { margin-left: -1px; }

/* Repeat customer — a quiet gold glyph, not a sticker. It replaced an 18px solid
   circle with a white star and a 2px ring, which read as a warning block and ate
   22px of a 118px column (truncating the customer name). Used by the Orders list
   and both Quality Gate views, so it lives here rather than in a page. */
.hw-repeat-star {
    color: #ca5010;
    font-size: 0.8125rem;
    margin-right: 5px;
    vertical-align: -1px;
    cursor: help;
}

/* Custom order reminder / flag — a small inline chip (icon + optional short note),
   coloured inline from App\Support\OrderReminder. Shown on the orders list, QC queue,
   both shipping queues and the vendor pages so handling notes are seen before ship.
   Colours come inline (per reminder); this only sets the shared shape. */
.hw-rem-chip {
    display: inline-flex; align-items: center; gap: 4px;
    max-width: 100%;
    padding: 1px 7px; border-radius: 10px;
    font-size: .68rem; font-weight: 700; line-height: 1.55;
    vertical-align: 1px; white-space: nowrap; cursor: help;
}
.hw-rem-chip > i { font-size: .72rem; flex-shrink: 0; }
.hw-rem-txt { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 140px; }
/* On a stacked mobile card the chip can use the full width. */
@media (max-width: 767.98px) { .hw-rem-txt { max-width: none; } }

/* --------------------------------------------------------------------------
   22. Date range — one calendar instead of a "Date from" + "Date to" pair
   Engine: public/admin-panel-assets/js/hw-daterange.js
   -------------------------------------------------------------------------- */
.hw-range { position: relative; display: inline-flex; align-items: center; min-width: 0; flex: 1 1 auto; }
.hw-range .hw-range-input {
    width: 100%; min-width: 0; padding-right: 28px; cursor: pointer;
    background: var(--hw-surface); color: var(--hw-text);
}
.hw-range-clear {
    position: absolute; right: 4px; top: 50%; transform: translateY(-50%);
    width: 22px; height: 22px; display: inline-flex; align-items: center; justify-content: center;
    border: 0; background: transparent; color: var(--hw-muted); cursor: pointer;
    border-radius: var(--hw-radius-sm); font-size: 0.75rem; padding: 0; line-height: 1;
}
.hw-range-clear:hover { background: var(--hw-surface-3); color: var(--hw-text); }

/* flatpickr → Fluent: square corners, brand blue, depth8, no candy gradients */
.flatpickr-calendar {
    border-radius: var(--hw-radius) !important;
    border: 1px solid var(--hw-border-2) !important;
    box-shadow: var(--hw-shadow-lg) !important;
    font-size: 0.8125rem;
}
.flatpickr-calendar.arrowTop:before, .flatpickr-calendar.arrowTop:after,
.flatpickr-calendar.arrowBottom:before, .flatpickr-calendar.arrowBottom:after { display: none; }
.flatpickr-months .flatpickr-month { color: var(--hw-text); fill: var(--hw-text); }
.flatpickr-current-month .flatpickr-monthDropdown-months,
.flatpickr-current-month input.cur-year { font-weight: 600; color: var(--hw-text); }
span.flatpickr-weekday { color: var(--hw-muted); font-weight: 600; font-size: 0.75rem; }
.flatpickr-day { border-radius: var(--hw-radius-sm) !important; color: var(--hw-text); }
.flatpickr-day:hover { background: var(--hw-surface-3); border-color: var(--hw-surface-3); }
.flatpickr-day.today { border-color: var(--hw-primary); }
.flatpickr-day.selected, .flatpickr-day.startRange, .flatpickr-day.endRange,
.flatpickr-day.selected:hover, .flatpickr-day.startRange:hover, .flatpickr-day.endRange:hover {
    background: var(--hw-primary) !important; border-color: var(--hw-primary) !important; color: #fff !important;
}
.flatpickr-day.inRange, .flatpickr-day.inRange:hover {
    background: var(--hw-primary-ltt) !important; border-color: var(--hw-primary-ltt) !important;
    color: var(--hw-primary-dkk) !important;
    box-shadow: -5px 0 0 var(--hw-primary-ltt), 5px 0 0 var(--hw-primary-ltt) !important;
}
.flatpickr-day.flatpickr-disabled, .flatpickr-day.prevMonthDay, .flatpickr-day.nextMonthDay { color: var(--hw-faint); }

/* .btn-dark is not in the palette — there is one primary action colour (§8).
   Mapped globally so pages using it inherit the right button without edits. */
.btn-dark, .btn.btn-sm.btn-dark {
    background-color: var(--hw-primary) !important;
    border-color: var(--hw-primary) !important;
    color: #fff !important;
}
.btn-dark:hover, .btn.btn-sm.btn-dark:hover {
    background-color: var(--hw-primary-dk) !important;
    border-color: var(--hw-primary-dk) !important;
}

/* ══════════════════════════════════════════════════════════════════
   Mobile card tables (portal-wide)
   On phones (≤767px) any <table class="hw-mtable"> turns each row into a
   stacked card (label:value). data-label is auto-filled by mobile-cards.js
   from the column headers. Helpers: .mcard-hide (drop a cell),
   .mcard-full (cell spans the whole card — good for actions / long text).
   ══════════════════════════════════════════════════════════════════ */
@media (max-width: 767.98px) {
    table.hw-mtable { min-width: 0 !important; width: 100% !important; border: none; }
    table.hw-mtable thead { display: none; }
    table.hw-mtable, table.hw-mtable tbody, table.hw-mtable tr, table.hw-mtable td { display: block; width: auto; }
    table.hw-mtable tr {
        border: 1px solid var(--hw-border); border-radius: 10px;
        margin: 0 0 9px; padding: 3px 11px;
        background: var(--hw-surface); box-shadow: var(--hw-shadow);
    }
    table.hw-mtable td {
        display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 4px 12px;
        padding: 5px 0 !important; border: none !important;
        white-space: normal !important; max-width: none !important;
        text-align: right; font-size: .85rem; min-height: 0; line-height: 1.3;
    }
    table.hw-mtable td + td { border-top: 1px solid var(--hw-border-2) !important; }
    /* label: natural width, pushes the value to the right; long values wrap below instead of clipping */
    table.hw-mtable td::before {
        content: attr(data-label); margin-right: auto;
        font-weight: 600; color: var(--hw-muted);
        font-size: .7rem; text-transform: uppercase; letter-spacing: .02em;
        text-align: left; white-space: nowrap;
    }
    table.hw-mtable td:empty, table.hw-mtable td.mcard-hide { display: none; }
    /* A FIRST column marked mcard-hide would swallow the expand toggle that
       mobile-cards.js injects into each row's first cell — keep such a cell
       technically rendered (zero-height, text invisible) so the absolutely-
       positioned toggle survives. Cells holding real controls stay fully hidden. */
    table.hw-mtable td.mcard-hide:first-child:not(:has(input, select, button:not(.mcard-toggle), a)) {
        display: block; height: 0; padding: 0 !important; margin: 0;
        overflow: visible; font-size: 0 !important; line-height: 0; border: none !important;
        color: transparent;
    }
    table.hw-mtable td.mcard-hide:first-child::before { content: none !important; }
    table.hw-mtable td:not([data-label])::before, table.hw-mtable td[data-label=""]::before { content: none; }
    /* Title cell — the main name/product, shown as a bold heading with NO label (iOS-style) */
    table.hw-mtable td.mcard-title { display: block; text-align: left; font-weight: 600; font-size: .92rem; }
    table.hw-mtable td.mcard-title::before { content: none; }
    table.hw-mtable td.mcard-full { display: block; text-align: left; }
    table.hw-mtable td.mcard-full::before { display: block; margin-bottom: 3px; }
    table.hw-mtable td.mcard-full > * { max-width: 100%; }
    table.hw-mtable td.mcard-full input:not([type=file]):not([type=checkbox]):not([type=radio]),
    table.hw-mtable td.mcard-full textarea { width: 100%; }
    /* selects stay natural width (compact) so inline dropdowns + their badges sit on one line */
    table.hw-mtable td.mcard-full select { max-width: 100%; }
    table.hw-mtable td.mcard-noflex { display: block; text-align: left; }
    table.hw-mtable td.mcard-noflex::before { display: block; margin-bottom: 4px; }
    /* ── Collapsible detail: mcard-more cells stay hidden until the card is expanded ── */
    table.hw-mtable tr { position: relative; }
    table.hw-mtable td.mcard-more { display: none !important; }
    table.hw-mtable tr.mcard-open td.mcard-more { display: flex !important; }
    table.hw-mtable tr.mcard-open td.mcard-more.mcard-full,
    table.hw-mtable tr.mcard-open td.mcard-more.mcard-title { display: block !important; }
    table.hw-mtable tr > td:first-child { padding-right: 32px !important; }
    table.hw-mtable .mcard-toggle {
        position: absolute; top: 7px; right: 6px; z-index: 3;
        width: 27px; height: 27px; padding: 0; border-radius: 50%;
        border: 1px solid var(--hw-border); background: var(--hw-surface-3, #f3f2f1);
        color: var(--hw-muted); cursor: pointer; line-height: 1;
        display: inline-flex !important; align-items: center; justify-content: center;
    }
    table.hw-mtable .mcard-toggle::before { content: '⌄'; font-size: 1.05rem; font-weight: 700; margin-top: -4px; }
    table.hw-mtable tr.mcard-open .mcard-toggle::before { content: '⌃'; margin-top: 3px; }
    /* colspan cells (empty-state rows) stay centered blocks */
    table.hw-mtable td[colspan] { text-align: center; }
    table.hw-mtable td[colspan]::before { content: none; }
    /* ── tfoot (totals) → one slim card of label · value lines, not fat per-row cards ── */
    table.hw-mtable tfoot { display: block; border: 1px solid var(--hw-border); border-radius: 10px; margin: 0 0 9px; background: var(--hw-surface); box-shadow: var(--hw-shadow); overflow: hidden; }
    table.hw-mtable tfoot tr { display: flex; justify-content: space-between; align-items: center; gap: 12px; border: none; border-radius: 0; box-shadow: none; margin: 0; padding: 6px 13px; }
    table.hw-mtable tfoot tr + tr { border-top: 1px solid var(--hw-border-2); }
    table.hw-mtable tfoot td, table.hw-mtable tfoot td[colspan] { display: block; width: auto; padding: 0 !important; border: none !important; white-space: nowrap; font-size: .85rem; }
    table.hw-mtable tfoot td:first-child { text-align: left; }
    table.hw-mtable tfoot td:last-child { text-align: right; }
    table.hw-mtable tfoot td::before { content: none; }
}
/* the expand/collapse toggle exists only on phones */
.mcard-toggle { display: none; }

/* ── Mobile: align DataTables Responsive child rows (label left, value right) ──
   Pages still using the DataTables Responsive extension (vendor-assignments,
   couriers, websites) collapse columns into a `ul.dtr-details` child row that
   otherwise stacks everything hard-left. Lay each item out as a clean, aligned
   row so it reads like the rest of the portal's mobile cards. */
@media (max-width: 767.98px) {
    ul.dtr-details { display: block !important; width: 100% !important; padding: 0 !important; margin: 0 !important; list-style: none !important; }
    ul.dtr-details > li {
        display: flex !important; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 4px 12px;
        padding: 7px 2px !important; border: none !important;
        border-bottom: 1px solid var(--hw-border-2) !important; float: none !important; width: auto !important;
    }
    ul.dtr-details > li:last-child { border-bottom: none !important; }
    ul.dtr-details .dtr-title {
        font-weight: 600 !important; color: var(--hw-muted) !important;
        font-size: .72rem !important; text-transform: uppercase; letter-spacing: .02em;
        min-width: 0 !important; padding-right: 8px;
    }
    ul.dtr-details .dtr-data { text-align: right; margin-left: auto; }
}


/* ── Mobile: portal-wide polish (phones only — desktop untouched) ──────────
   Slimmer chrome so the actual content gets the screen: tighter page header,
   card paddings, compact pagination, full-width filter controls in card
   headers, and toolbars that wrap instead of overflowing. */
@media (max-width: 767.98px) {
    .hw-page-header { padding: 8px 0 7px; }
    .hw-page-title { font-size: 1.05rem; }
    .card-body { padding: .75rem .5rem; }
    .card-header, .hw-card-header { padding: .65rem .7rem !important; }
    /* every layer of horizontal chrome adds up on a 375px screen — strip the
       gutters DataTables' bootstrap grid and generic px-3 wrappers introduce */
    .dataTables_wrapper > .row > [class*="col-"] { padding-left: 0 !important; padding-right: 0 !important; }
    .dataTables_wrapper .row { margin-left: 0 !important; margin-right: 0 !important; }
    .card .px-3 { padding-left: .45rem !important; padding-right: .45rem !important; }
    .card .p-3 { padding: .65rem .45rem !important; }
    .tab-content > .tab-pane.p-3, .tab-content > .p-3 { padding: .65rem .45rem !important; }
    /* pages that nest their OWN container/px-4 wrapper inside the layout's
       container would double the side gutter — the outer one already pays it */
    .container-fluid .container-fluid, .container-fluid .container,
    .container .container-fluid { padding-left: 0 !important; padding-right: 0 !important; }
    div.px-4:not(.modal-body):not(.modal-header), div.p-4:not(.modal-body):not(.modal-header) { padding-left: .5rem !important; padding-right: .5rem !important; }
    .row > [class*="col-"] > .card { margin-left: 0; margin-right: 0; }
    /* pagination: wrap into rows, slimmer buttons */
    .pagination { flex-wrap: wrap; gap: 3px; }
    .pagination .page-link { padding: .28rem .55rem !important; font-size: .78rem !important; }
    /* generic toolbars/filter rows never force sideways scroll */
    .card-header form, .card-header .d-flex { flex-wrap: wrap; }
    .card-header .form-control, .card-header .form-select { min-width: 0; }
    /* wide free-standing tables that are NOT card-ified scroll inside their card */
    .table-responsive { -webkit-overflow-scrolling: touch; }
    /* touch devices: hover paint is meaningless and STICKS after a tap, leaving
       grey patches on every tapped card — and each page blade ships its own
       tr:hover rules that load AFTER this sheet, so only !important wins here.
       Pin the hover state to the card's own surface colour (NOT transparent —
       cards must stay white, not show the grey page behind), at every level. */
    table, table * { -webkit-tap-highlight-color: transparent; }
    table tbody tr:hover,
    table tbody tr:hover > td, table tbody tr:hover > th,
    .table-striped > tbody > tr:hover > *,
    #orders_table.dataTable tbody tr:hover td,
    .order-items-table-wrapper .table tbody tr:hover { background-color: var(--hw-surface) !important; }
    /* Bootstrap's table-hover/striped paint is an INSET BOX-SHADOW fed by the
       --bs-table-accent-bg variable, not a background — background overrides
       never touch it, and on touch it sticks to the tapped card, greying every
       cell. Zero the variables AND the shadow itself, phones only. */
    .table, .table-hover, .table-striped {
        --bs-table-hover-bg: transparent !important;
        --bs-table-striped-bg: transparent !important;
        --bs-table-accent-bg: transparent !important;
    }
    .table > :not(caption) > * > * { box-shadow: none !important; }
    table.hw-mtable tbody tr:active { background: #faf9f8; }
}

/* --------------------------------------------------------------------------
   23. List toolkit — the filter bar, sort headers and status pills that every
       list screen on the portal is built from
   Engine: resources/views/partials/hw-list-engine.blade.php
   Markup: resources/views/partials/hw-filterbar.blade.php  ·  <x-th>
   -------------------------------------------------------------------------- */
.f-bar { display: flex; gap: .5rem; flex-wrap: wrap; align-items: center; margin-bottom: .75rem; }
.f-bar select,
.f-bar input[type=text],
.f-bar input[type=search],
.f-bar input[type=date],
.f-bar .f-pill,
.f-bar .f-btn {
    height: 34px; padding: 0 .6rem; font-size: .82rem;
    border: 1px solid var(--hw-border-3); border-radius: var(--hw-radius-sm);
    background: var(--hw-surface); color: var(--hw-text);
}
.f-bar select { cursor: pointer; }
.f-bar input::placeholder { color: var(--hw-faint); }
.f-bar select:focus,
.f-bar input:focus { outline: none; border-color: var(--hw-primary); }
.f-bar .f-q { width: 250px; }
.f-bar .f-per { width: 108px; }
.f-bar .f-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 6px;
    font-weight: 600; cursor: pointer; color: var(--hw-text);
}
.f-bar .f-btn:hover { background: var(--hw-surface-3); }
.f-bar .f-btn-go { background: var(--hw-primary); border-color: var(--hw-primary); color: #fff; }
.f-bar .f-btn-go:hover { background: var(--hw-primary-dk); border-color: var(--hw-primary-dk); }
.f-bar .f-clear {
    display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 .6rem;
    border: 1px solid var(--hw-border-3); border-radius: var(--hw-radius-sm);
    background: var(--hw-surface);
    font-size: .82rem; font-weight: 600; color: var(--hw-muted); text-decoration: none;
}
.f-bar .f-clear:hover { background: var(--hw-surface-3); color: var(--hw-primary); border-color: var(--hw-primary); }
/* A filter that takes several values: the button says what is on, the panel holds the
   choices. Same height and border as every other control in the bar, so the row still
   reads as one row. */
.f-bar .f-multi { position: relative; display: inline-block; }
.f-bar .f-multi-btn {
    display: inline-flex; align-items: center; gap: 8px; height: 34px; padding: 0 .6rem;
    max-width: 210px; font-size: .82rem; cursor: pointer;
    border: 1px solid var(--hw-border-3); border-radius: var(--hw-radius-sm);
    background: var(--hw-surface); color: var(--hw-text);
}
.f-bar .f-multi-btn .t { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.f-bar .f-multi-btn i { font-size: .62rem; color: var(--hw-faint); margin-left: auto; }
.f-bar .f-multi.on .f-multi-btn { border-color: var(--hw-primary); color: var(--hw-primary); font-weight: 600; }
/* Fixed, not absolute, and placed by hand when it opens. The bar usually sits inside a
   card, and a card that clips what overflows it clipped this panel to a sliver — the list
   was there, with nowhere to be drawn. Nothing above it can clip a fixed layer. */
.f-bar .f-multi-pop {
    display: none; position: fixed; z-index: 1080; top: 0; left: 0;
    width: 280px; max-width: calc(100vw - 24px); padding: .4rem;
    flex-direction: column;   /* so a short screen shrinks the list, never the footer away */
    background: var(--hw-surface); border: 1px solid var(--hw-border-3);
    border-radius: var(--hw-radius-sm); box-shadow: 0 8px 24px rgba(0, 0, 0, .16);
}
.f-bar .f-multi.open .f-multi-pop { display: flex; }
.f-bar .f-multi-find {
    flex: 0 0 auto; width: 100%; height: 30px; margin-bottom: .3rem; padding: 0 .5rem; font-size: .8rem;
    border: 1px solid var(--hw-border-3); border-radius: var(--hw-radius-sm);
}
.f-bar .f-multi-list { flex: 1 1 auto; min-height: 0; max-height: 260px; overflow-y: auto; }
.f-bar .f-multi-list label {
    display: flex; align-items: center; gap: 8px; width: 100%; margin: 0;
    padding: .3rem .4rem; font-size: .82rem; border-radius: var(--hw-radius-sm); cursor: pointer;
}
.f-bar .f-multi-list label:hover { background: var(--hw-surface-3); }
.f-bar .f-multi-list input { width: 15px; height: 15px; accent-color: var(--hw-primary); flex: 0 0 auto; }
.f-bar .f-multi-list label.hid { display: none; }
.f-bar .f-multi-foot {
    flex: 0 0 auto; display: flex; align-items: center; justify-content: space-between;
    margin-top: .3rem; padding-top: .35rem; border-top: 1px solid var(--hw-border-2);
}
.f-bar .f-multi-foot .n { font-size: .74rem; color: var(--hw-muted); }
.f-bar .f-multi-none {
    border: none; background: none; padding: 0; cursor: pointer;
    font-size: .76rem; font-weight: 600; color: var(--hw-primary);
}
@media (max-width: 767px) {
    .f-bar .f-multi, .f-bar .f-multi-btn { width: 100%; max-width: none; }
}

.f-bar .f-more { display: contents; }
.f-bar .f-toggle { display: none; }
.f-bar .hw-range { flex: 0 0 210px; }
.f-bar .hw-range .hw-range-input { padding-right: 28px; }

/* Sortable column header — <x-th> */
.th-sort { color: inherit; text-decoration: none; white-space: nowrap; }
.th-sort:hover { color: var(--hw-primary); }
.th-sorted { color: var(--hw-primary); font-weight: 700; }

/* Status pills — a tab strip that is really a row of links */
.f-tabs { display: flex; flex-wrap: wrap; gap: 2px; align-items: center; margin-bottom: .6rem; }
.f-pill-tab {
    display: inline-flex; align-items: center; gap: 6px; white-space: nowrap;
    padding: 6px 12px; font-size: .8rem; font-weight: 600;
    color: var(--hw-muted); text-decoration: none;
    border-bottom: 2px solid transparent;
}
.f-pill-tab:hover { color: var(--hw-text); }
.f-pill-tab.on { color: var(--hw-primary); border-bottom-color: var(--hw-primary); }
.f-pill-c {
    min-width: 20px; padding: 0 6px; height: 18px; line-height: 18px; border-radius: 9px;
    background: var(--hw-surface-3, #f3f2f1); color: var(--hw-muted);
    font-size: .72rem; font-weight: 700; text-align: center;
}
.f-pill-tab.on .f-pill-c { background: var(--hw-primary-lt); color: var(--hw-primary-dkk); }

@media (max-width: 767.98px) {
    /* One line on a phone: search + a funnel. The rest opens only when asked for,
       so the list starts near the top of the screen instead of below six boxes. */
    .f-bar { gap: .4rem; margin-bottom: .75rem; }
    .f-bar .f-q { flex: 1 1 auto; width: auto; min-width: 0; }
    .f-bar .f-toggle { display: inline-flex; flex: 0 0 40px; padding: 0; }
    .f-bar .f-toggle.on { border-color: var(--hw-primary); color: var(--hw-primary); }
    .f-bar .f-more { display: none; width: 100%; flex-wrap: wrap; gap: .4rem; }
    .f-bar.open .f-more { display: flex; }
    .f-bar .f-more > select { flex: 1 1 calc(50% - .2rem); min-width: 0; }
    .f-bar .hw-range, .f-bar .f-btn-go, .f-bar .f-per { flex: 1 1 100%; }
    .f-tabs { flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; max-width: 100%; }
    .f-tabs::-webkit-scrollbar { display: none; }
    .f-pill-tab { flex: 0 0 auto; }
}

/* ── Quantity — one piece is the normal case and stays quiet; more than one is what
      gets missed, so it is marked in brand orange, in the same small chip family as
      Expedited / Repeated. App\Support\Qty (Blade) and hwQty() (JS,
      layouts/partials/qty-js) draw these; keep the three in step. ── */
.hw-qty { font-weight: 600; color: var(--hw-text); white-space: nowrap; }

/* Next to an item name in a list — only ever drawn for more than one. */
.hw-qty.is-multi {
    display: inline-flex; align-items: center; padding: 1px 7px; border-radius: 2px;
    background: #fff1e8; color: #c43e00; border: 1px solid #ffd3b8;
    font-size: .75rem; font-weight: 700; line-height: 1.4;
}

/* A detail view's Quantity field: "1 piece" / "2 pieces". */
.hw-qty.lg          { font-size: .95rem; }
.hw-qty.lg.is-multi { font-size: .85rem; padding: 2px 9px; }

/* A Qty column: the plain number for one, a round count badge for more. */
.hw-qty.bare.is-multi {
    justify-content: center; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 10px;
    background: var(--hw-primary); border-color: var(--hw-primary); color: #fff; font-size: .75rem;
}
.hw-qty.bare.lg.is-multi { min-width: 24px; height: 24px; border-radius: 12px; font-size: .85rem; }

/* Detail views, above everything else — only for more than one piece. */
.hw-qty-banner {
    display: flex; align-items: center; gap: 8px; margin-bottom: 12px; padding: 8px 12px;
    background: #fff5ef; border: 1px solid #ffdcc6; border-radius: 2px;
    color: var(--hw-text); font-size: .82rem; line-height: 1.4;
}
.hw-qty-banner i      { color: var(--hw-primary); }
.hw-qty-banner strong { color: #c43e00; }

/* ── Money flags on an order ────────────────────────────────────────────────
   Two things that change what an order is worth: PayPal gave money back with no
   case behind it, and a payment nobody has confirmed. Same quiet shape as the
   reminder and quantity chips — one line, under the order number. */
.flag-chip{display:inline-flex;align-items:center;gap:4px;font-size:.68rem;font-weight:600;
    border-radius:2px;padding:.05rem .34rem;white-space:normal;max-width:100%;line-height:1.3;
    overflow-wrap:anywhere;vertical-align:top;}   /* a long chip wraps in its own cell instead of running under the next column */
.flag-chip i{font-size:.62rem;}
.flag-pp-refund{background:#fde7e9;color:#a4262c;border:1px solid #f3c9cd;}
.flag-unconfirmed{background:#fff4ce;color:#835c00;border:1px solid #f5e3a3;}
/* work still being made for money that has gone back — the one chip that is also a button */
.flag-dead-job{background:#fde7e9;color:#a4262c;border:1px solid #f3c9cd;cursor:pointer;}
.flag-dead-job:hover{background:#fbd3d7;}
/* A dialog sits above everything — the orders list's fixed More-filters panel (z-index 1200)
   used to cover SweetAlert's (1060) when a chip was clicked with the panel open. */
.swal2-container{z-index:2100 !important;}
/* Authorize.net held for review — the chip that confirms the payment */
.flag-held{cursor:pointer;}
.flag-held:hover{background:#ffe9a8;}