/* =====================================================================
   PSMS stylesheet
   ---------------------------------------------------------------------
   Aesthetic direction: refined, gallery-print sensibility.
   This is a tool for people who print fine art for a living - the UI
   should feel like a well-bound studio notebook, not a tech dashboard.

   - Warm paper-white background, not stark white
   - One restrained accent color (a deep ink blue)
   - Serif display headings for character, clean sans for body
   - Generous spacing, cards with soft definition (not heavy shadows)
   - Tables that read like price sheets, not spreadsheets
   ===================================================================== */

/* ---- Design tokens ------------------------------------------------- */
:root {
    /* Color: warm paper + ink */
    --color-bg:           #f6f3ec;      /* warm paper */
    --color-surface:      #fefdf9;      /* card surface */
    --color-surface-alt:  #f0ece2;      /* subtle alt for table stripes */
    --color-border:       #d9d2c0;      /* sepia rule */
    --color-border-soft:  #ebe6d7;      /* whisper rule */
    --color-text:         #1f2933;      /* dark slate, not pure black */
    --color-text-muted:   #6b6657;      /* warm gray */
    --color-text-faint:   #9a9483;
    --color-ink:          #1c3a5f;      /* primary accent: deep ink blue */
    --color-ink-hover:    #122846;
    --color-ink-soft:     #e3eaf3;      /* accent background tint */
    --color-good:         #2f6b3a;
    --color-warn:         #8a6b1e;
    --color-bad:          #8c2a2a;

    /* Centric brand palette (logo). NOT a re-theme - an accent device used
       only to distinguish edit-type pages from their read-only overview
       twins. The warm paper/ink system above remains the foundation. */
    --color-brand-darkest: #005d7e;
    --color-brand-dark:    #3a7494;
    --color-brand-mid:     #6490ad;
    --color-brand-light:   #83a6bf;
    --color-brand-pale:    #c0d0df;
    --color-brand-red:     #e03128;
    --color-edit-wash:     #eef3f6;   /* pale brand-blue: the "edit mode" tint */
    --color-edit-border:   #bcd0de;   /* brand-pale border for edit-mode cards */

    /* Yellow card (awaiting-customer-reply flag) - its own consistent palette. */
    --color-yellowcard-bg:     #fff8c5;
    --color-yellowcard-border: #d4a017;
    --color-yellowcard-ink:    #7a4a00;

    /* Typography */
    --font-display: 'EB Garamond', 'Georgia', 'Times New Roman', serif;
    --font-body:    'Source Sans 3', 'Source Sans Pro', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --font-mono:    'JetBrains Mono', 'Menlo', 'Consolas', monospace;

    /* Spacing scale (matches an 8px grid with relaxed feel) */
    --space-1:  0.25rem;
    --space-2:  0.5rem;
    --space-3:  0.75rem;
    --space-4:  1rem;
    --space-5:  1.5rem;
    --space-6:  2rem;
    --space-7:  3rem;
    --space-8:  4rem;

    /* Card */
    --radius:        6px;
    --radius-small:  3px;
    --shadow-soft:   0 1px 2px rgba(40, 30, 10, 0.04), 0 2px 8px rgba(40, 30, 10, 0.05);
}

/* v5B2.63: the webfont @import moved to a <link> in layout.php.
   An @import inside a stylesheet is only fetched AFTER that stylesheet
   has been parsed, so the fonts arrived a few hundred ms late and every
   heading and label re-rendered when they landed. That reflow shifted
   the whole page a few pixels - which is invisible most of the time,
   but not when a native date picker is open: the picker is anchored
   where the input WAS, so the input slid out from under it and the top
   row of the calendar disappeared behind the popup.
   The <link> in layout.php starts the fetch immediately, and
   display=optional means a font that misses first paint is simply not
   used for that page load - no swap, no reflow, ever. */

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

html { font-size: 16px; }

body {
    margin: 0;
    background: var(--color-bg);
    color: var(--color-text);
    font-family: var(--font-body);
    font-size: 1rem;
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

a {
    color: var(--color-ink);
    text-decoration: none;
    border-bottom: 1px solid transparent;
    transition: border-color 0.15s ease, color 0.15s ease;
}
a:hover {
    color: var(--color-ink-hover);
    border-bottom-color: currentColor;
}

h1, h2, h3, h4 {
    font-family: var(--font-display);
    font-weight: 500;
    color: var(--color-text);
    letter-spacing: -0.01em;
    margin: 0;
}
h1 { font-size: 2rem;   line-height: 1.2; }
h2 { font-size: 1.5rem; line-height: 1.25; }
h3 { font-size: 1.2rem; line-height: 1.3; }

p { margin: 0 0 var(--space-4); }

/* ---- Header / navigation ------------------------------------------ */
.site-header {
    background: var(--color-surface);
    border-bottom: 1px solid var(--color-border);
    padding: 0;
}
.header-inner {
    max-width: 1280px;
    margin: 0 auto;
    padding: var(--space-4) var(--space-6);
    display: flex;
    align-items: center;
    gap: var(--space-6);
}
.brand {
    display: flex;
    flex-direction: column;
    line-height: 1.1;
    border: none;
}
.brand:hover { border: none; }
.brand-mark {
    font-family: var(--font-display);
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--color-text);
    letter-spacing: -0.01em;
}
.brand-sub {
    font-size: 0.75rem;
    color: var(--color-text-faint);
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.main-nav {
    display: flex;
    align-items: center;
    gap: var(--space-5);
    flex: 1;
    margin-left: var(--space-5);
}
.main-nav a,
.main-nav .nav-dropdown-trigger {
    font-size: 0.95rem;
    color: var(--color-text-muted);
    border: none;
    /* v5B2.35r2 (Richard): top-level items must share ONE horizontal line.
       Flex was squeezing the dropdown containers below content width, so
       "Label ▾" wrapped — carets dropped to a second line and the labels
       staggered vertically. Items no longer shrink or wrap; the search box
       (below) absorbs the squeeze instead. */
    white-space: nowrap;
    /* v5B2.35r2 (Richard) part 2: one BOX MODEL for every top-level item.
       Direct flex children (Customers) were "blockified" to display:block
       (42px box) while triggers inside .nav-dropdown wrappers stayed
       inline (36px) — same row, two heights, staggered labels. inline-flex
       + line-height:1 gives every item the identical box. */
    display: inline-flex;
    align-items: center;
    line-height: 1;
    padding: var(--space-2) 0;
    border-bottom: 2px solid transparent;
    background: none;
    cursor: pointer;
    font-family: inherit;
}
.main-nav a:hover,
.main-nav .nav-dropdown-trigger:hover {
    color: var(--color-ink);
    border-bottom-color: var(--color-ink);
}
.main-nav a.active,
.main-nav .nav-dropdown.active .nav-dropdown-trigger {
    color: var(--color-ink);
    border-bottom-color: var(--color-ink);
    font-weight: 600;
}

/* v0.25.2 Find-order search box in the nav */
.nav-dropdown { flex: 0 0 auto; }  /* v5B2.35r2: never squeeze a menu item */
.nav-find-order {
    /* v5B2.35r2: the one flexible header element — shrinks first when the
       window narrows, so the menu row never wraps or staggers. */
    flex: 0 1 auto;
    min-width: 110px;
    display: inline-flex;
    align-items: center;
    background: var(--color-cream, #f5f1e8);
    border: 1px solid var(--color-border, #d8d3c4);
    border-radius: 4px;
    padding: 2px 4px 2px 8px;
    margin-right: var(--space-4);
}
.nav-find-order input {
    border: none;
    background: transparent;
    font-size: 0.9rem;
    outline: none;
    width: 12em;
    max-width: 100%;
    min-width: 0;   /* v5B2.35r2: lets the box shrink instead of the menus */
    color: var(--color-text);
    font-family: inherit;
}
.nav-find-order input::placeholder {
    color: var(--color-text-faint);
}
.nav-find-order button {
    background: none;
    border: none;
    cursor: pointer;
    padding: 4px 6px;
    font-size: 0.9rem;
    color: var(--color-text-muted);
}
.nav-find-order button:hover { color: var(--color-ink); }

/* v0.25.2 Dropdowns (Admin menu, user menu) */
.nav-dropdown {
    position: relative;
    display: inline-block;
}
.nav-dropdown .caret {
    font-size: 0.7em;
    margin-left: 2px;
    opacity: 0.7;
}
.nav-dropdown-menu {
    display: none;
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    min-width: 200px;
    background: var(--color-surface, #fff);
    border: 1px solid var(--color-border, #d8d3c4);
    border-radius: 4px;
    box-shadow: 0 4px 14px rgba(0,0,0,0.08);
    padding: 6px 0;
    z-index: 100;
}
.nav-dropdown-menu-right {
    left: auto;
    right: 0;
}
.nav-dropdown.open .nav-dropdown-menu {
    display: block;
}
.nav-dropdown-menu a {
    display: block;
    padding: 8px 14px !important;
    color: var(--color-text) !important;
    border: none !important;
    border-bottom: none !important;
    font-size: 0.9rem;
}
.nav-dropdown-menu a:hover {
    background: var(--color-cream, #f5f1e8);
    color: var(--color-ink) !important;
}
.nav-dropdown-menu .dropdown-info {
    display: block;
    padding: 8px 14px;
    color: var(--color-text-muted);
    font-size: 0.85rem;
    border-bottom: 1px solid var(--color-border, #d8d3c4);
    margin-bottom: 4px;
}

.user-menu {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    font-size: 0.9rem;
}
.user-trigger {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    border: none;
    background: none;
    cursor: pointer;
    padding: var(--space-2);
    font-family: inherit;
    font-size: 0.9rem;
    color: var(--color-text);
    border-radius: 4px;
}
.user-trigger:hover { background: var(--color-cream, #f5f1e8); }
.user-name {
    color: var(--color-text);
    font-weight: 500;
}
.role-badge {
    background: var(--color-ink-soft);
    color: var(--color-ink);
    padding: 2px 8px;
    border-radius: 3px;
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}
.user-link {
    color: var(--color-text-muted);
    font-size: 0.9rem;
    border: none;
    padding-bottom: 2px;
    border-bottom: 1px solid transparent;
}
.user-link:hover {
    color: var(--color-ink);
    border-bottom-color: var(--color-ink);
}

/* ---- Page chrome --------------------------------------------------- */
.page {
    max-width: 1280px;
    margin: 0 auto;
    padding: var(--space-7) var(--space-6) var(--space-8);
}
.page-title {
    margin-bottom: var(--space-6);
}
.page-title-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-5);
    margin-bottom: var(--space-6);
}
.page-subtitle {
    font-family: var(--font-body);
    color: var(--color-text-muted);
    font-size: 1rem;
    font-weight: 400;
}

.site-footer {
    border-top: 1px solid var(--color-border-soft);
    padding: var(--space-5) var(--space-6);
    text-align: center;
    color: var(--color-text-faint);
    font-size: 0.85rem;
}

/* ---- Cards --------------------------------------------------------- */
/* v0.34: GLOBAL DUPLICATE-TITLE SAFETY NET
   --------------------------------------------------------------
   PSMS's layout.php always emits <h1 class="page-title"> at the
   top of <main class="page">. Some PSMS pages then ALSO emit
   their own <h1> below that, causing a visible duplicate title.

   We are fixing those pages one-by-one (removing the redundant
   <h1> markup). This rule is a backstop for pages we haven't
   gotten to yet, AND for any future page that someone forgets.
   It hides every <h1> inside <main class="page"> that doesn't
   have the .page-title class - i.e. anything other than the
   layout-supplied title.

   This is styling-only - the redundant <h1> markup still exists
   in the HTML on un-cleaned pages. The proper fix is to remove
   it. When all PSMS pages have been cleaned this rule can be
   removed, but it's harmless if left in place. */
main.page h1:not(.page-title) {
    display: none;
}

.card {
    background: var(--color-surface);
    border: 1px solid var(--color-border-soft);
    border-radius: var(--radius);
    padding: var(--space-6);
    box-shadow: var(--shadow-soft);
    margin-bottom: var(--space-5);
}
.card-tight { padding: var(--space-4) var(--space-5); }
.card-header {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    margin-bottom: var(--space-4);
    padding-bottom: var(--space-3);
    border-bottom: 1px solid var(--color-border-soft);
}
.card-header h2 { margin: 0; }
.card-meta {
    color: var(--color-text-muted);
    font-size: 0.9rem;
}

/* v0.34 round 2a: collapsible cards.
   Used by Current location and Customer notifications on order.php
   to keep the page short. Clicking the header (a <summary>) toggles
   the card open and shut. Native <details> behavior - no JS. */
details.card.card-collapsible {
    /* Override the default disclosure-triangle position; use our own. */
}
details.card.card-collapsible > summary.card-header {
    cursor: pointer;
    list-style: none;          /* Hide default triangle in webkit */
    user-select: none;
    /* When collapsed, no need for the bottom border (no body below) */
    margin-bottom: 0;
    padding-bottom: 0;
    border-bottom: 1px solid transparent;
    transition: border-color 0.15s;
}
details.card.card-collapsible > summary.card-header::-webkit-details-marker {
    display: none;             /* Hide default triangle in safari */
}
details.card.card-collapsible > summary.card-header h2 {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
details.card.card-collapsible > summary.card-header h2::before {
    content: "\25B8";          /* ▸ Right-pointing triangle */
    display: inline-block;
    transition: transform 0.15s;
    font-size: 0.85em;
    color: var(--color-text-muted);
}
details.card.card-collapsible[open] > summary.card-header h2::before {
    transform: rotate(90deg);  /* ▾ Down-pointing when open */
}
details.card.card-collapsible[open] > summary.card-header {
    /* When open, restore the bottom border to separate from body */
    margin-bottom: var(--space-4);
    padding-bottom: var(--space-3);
    border-bottom-color: var(--color-border-soft);
}

/* v0.34 round 2b: action row + primary action highlight.
   Used at the top of order.php to group all action buttons in
   one row. One button per order state is highlighted (.action-primary)
   to nudge staff toward the expected next step. */
.action-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    align-items: center;
    padding: 0.6rem 0.8rem;
    margin-bottom: 1rem;
    background: var(--color-surface);
    border: 1px solid var(--color-border-soft);
    border-radius: var(--radius);
}
.action-row .btn {
    /* Slightly tighter buttons since they're stacked in a row */
    font-size: 0.92rem;
    padding: 0.35rem 0.75rem;
    white-space: nowrap;
}
/* The primary action: larger, more visible. The order-state logic
   picks ONE button to mark .action-primary; the rest stay secondary. */
.action-row .btn.action-primary {
    font-size: 1.02rem;
    padding: 0.5rem 1.1rem;
    font-weight: 600;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}
.action-row .action-hint {
    font-size: 0.85rem;
    font-style: italic;
    color: var(--color-text-muted);
}

/* ---- Forms --------------------------------------------------------- */
form .field {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    margin-bottom: var(--space-4);
}
form label {
    font-size: 0.9rem;
    color: var(--color-text-muted);
    font-weight: 500;
    letter-spacing: 0.02em;
}

input[type=text],
input[type=password],
input[type=email],
input[type=search],
input[type=number],
input[type=date],
input[type=datetime-local],
input[type=time],
select, textarea {
    font-family: var(--font-body);
    font-size: 1rem;
    color: var(--color-text);
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-small);
    padding: var(--space-3) var(--space-4);
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
    width: 100%;
}
input:focus, select:focus, textarea:focus {
    outline: none;
    border-color: var(--color-ink);
    box-shadow: 0 0 0 3px var(--color-ink-soft);
}

.btn {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    font-family: var(--font-body);
    font-size: 0.95rem;
    font-weight: 600;
    line-height: 1;
    padding: var(--space-3) var(--space-5);
    border-radius: var(--radius-small);
    /* v5B2.30: a bare .btn used to inherit the browser's default grey —
       "Show wholesale", "Un-invoice this order", "Discard" and friends
       looked like they escaped the design system. Bare .btn now IS the
       secondary style; .btn-primary/.btn-secondary override as before. */
    background: var(--color-surface);
    color: var(--color-ink);
    border: 1px solid var(--color-border);
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
    text-decoration: none;
}
.btn:hover {
    background: var(--color-ink-soft);
    color: var(--color-ink-hover);
    border-color: var(--color-ink);
}
/* v5B2.30: the one sanctioned compact size for table-row / inline
   actions. Use .btn .btn-secondary .btn-sm — no more inline font sizes. */
.btn-sm {
    font-size: 0.8rem;
    padding: 0.2rem 0.55rem;
    gap: var(--space-1);
}
/* v1 help (B2.32): the header's context-aware "?" — quiet until hovered. */
.help-q {
    display: inline-flex; align-items: center; justify-content: center;
    width: 22px; height: 22px; border-radius: 50%;
    border: 1.5px solid var(--color-border);
    color: var(--color-text-muted);
    font-size: 13px; font-weight: 700; line-height: 1;
    text-decoration: none; margin: 0 10px 0 4px; flex: 0 0 auto;
}
.help-q:hover {
    border-color: var(--color-ink);
    color: var(--color-ink);
    background: var(--color-ink-soft);
}
.btn-primary {
    background: var(--color-ink);
    color: var(--color-surface);
    border-color: transparent;
}
.btn-primary:hover {
    background: var(--color-ink-hover);
    color: var(--color-surface);
    border: 1px solid transparent;
}
.btn-secondary {
    background: var(--color-surface);
    color: var(--color-ink);
    border: 1px solid var(--color-border);
}
.btn-secondary:hover {
    background: var(--color-ink-soft);
    color: var(--color-ink-hover);
    border-color: var(--color-ink);
}

/* ---- Tables -------------------------------------------------------- */
.data-table {
    width: 100%;
    border-collapse: collapse;
    background: var(--color-surface);
    border: 1px solid var(--color-border-soft);
    border-radius: var(--radius);
    overflow: hidden;
}
.data-table th {
    text-align: left;
    font-family: var(--font-body);
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--color-text-muted);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    padding: var(--space-3) var(--space-4);
    background: var(--color-surface-alt);
    border-bottom: 1px solid var(--color-border);
}
.data-table td {
    padding: var(--space-3) var(--space-4);
    border-bottom: 1px solid var(--color-border-soft);
    vertical-align: top;
}
.data-table tbody tr:last-child td { border-bottom: none; }
.data-table tbody tr:hover { background: var(--color-bg); }
.data-table .num { text-align: right; font-variant-numeric: tabular-nums; }
.data-table .muted { color: var(--color-text-muted); }

/* Group-header rows inside the line-items table - Copy Print bags and
   calculator quote groups. ONE shared treatment so both read as headers
   (not separators) and stay consistent across the edit + overview pages. */
.line-group-head { background: var(--color-surface-alt); }
.line-group-head .gh-title  { font-weight: 600; font-family: var(--font-display); color: var(--color-text); }
.line-group-head .gh-detail { display: block; margin-top: 0.1rem; font-weight: 400; font-family: var(--font-body); color: var(--color-text-muted); font-size: 0.9rem; }
.line-group-head .gh-total  { font-weight: 600; }
.line-group-head.collapsible { cursor: pointer; }
.line-group-head.collapsible:hover { background: var(--color-border-soft); }
.group-caret { display: inline-block; transition: transform 0.12s ease; }
.line-group-head.collapsed .group-caret { transform: rotate(0deg); }
.line-group-head.collapsible:not(.collapsed) .group-caret { transform: rotate(90deg); }

/* ---- Flash messages ------------------------------------------------ */
.flash {
    padding: var(--space-3) var(--space-4);
    border-radius: var(--radius-small);
    margin-bottom: var(--space-5);
    border-left: 3px solid;
    font-size: 0.95rem;
}
.flash-success { background: #dcefe1; border-color: var(--color-good); color: #1f4a29; border-left-width: 5px; font-weight: 500; }
.flash-error   { background: #fbf0f0; border-color: var(--color-bad);  color: #6e2222; }
.flash-warning { background: #fbf6e8; border-color: var(--color-warn); color: #6e5418; }
.flash-info    { background: var(--color-ink-soft); border-color: var(--color-ink); color: var(--color-ink); }

/* ---- Login page ---------------------------------------------------- */
.login-wrap {
    max-width: 380px;
    margin: var(--space-8) auto;
    padding: 0 var(--space-4);
}
.login-card {
    background: var(--color-surface);
    border: 1px solid var(--color-border-soft);
    border-radius: var(--radius);
    padding: var(--space-7) var(--space-6);
    box-shadow: var(--shadow-soft);
    text-align: center;
}
.login-card h1 {
    font-size: 1.75rem;
    margin-bottom: var(--space-2);
}
.login-card .lead {
    color: var(--color-text-muted);
    font-size: 0.95rem;
    margin-bottom: var(--space-6);
}
.login-card form { text-align: left; }
.login-card .btn-primary { width: 100%; justify-content: center; padding: var(--space-4); }

/* ---- Search bar ---------------------------------------------------- */
.search-bar {
    display: flex;
    gap: var(--space-3);
    margin-bottom: var(--space-5);
}
.search-bar input[type=search] {
    flex: 1;
}

/* ---- Reports ------------------------------------------------------- */
.report-menu-item {
    display: block;
    padding: var(--space-3) var(--space-4);
    border-radius: var(--radius-small);
    color: var(--color-text);
    border: none;
    font-size: 0.95rem;
}
.report-menu-item:hover {
    background: var(--color-bg);
    border: none;
    color: var(--color-ink);
}
.report-menu-item.active {
    background: var(--color-ink-soft);
    color: var(--color-ink);
    font-weight: 600;
}
.report-menu-item.active:hover {
    background: var(--color-ink-soft);
}
.report-notes {
    margin-top: var(--space-5);
    padding: var(--space-4);
    background: var(--color-bg);
    border-radius: var(--radius-small);
    font-size: 0.88rem;
    color: var(--color-text-muted);
}
.report-notes strong {
    color: var(--color-text);
    display: block;
    margin-bottom: var(--space-2);
    font-size: 0.8rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}
.report-notes ul {
    margin: 0;
    padding-left: var(--space-5);
}
.report-notes li {
    margin-bottom: var(--space-1);
}
.report-intro {
    margin-bottom: var(--space-4);
    padding: var(--space-4);
    background: #fbf6e8;
    border: 1px solid #e4d9b8;
    border-radius: var(--radius-small);
    font-size: 0.9rem;
    color: #5b4a1e;
    line-height: 1.5;
}
.preset-btn {
    display: inline-block;
    padding: var(--space-2) var(--space-3);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-small);
    background: var(--color-surface);
    color: var(--color-ink);
    font-size: 0.88rem;
    text-decoration: none;
}
.preset-btn:hover {
    background: var(--color-ink-soft);
    border-color: var(--color-ink);
    color: var(--color-ink-hover);
}
.preset-btn.active {
    background: var(--color-ink);
    color: var(--color-surface);
    border-color: var(--color-ink);
    font-weight: 600;
}
.preset-btn.active:hover {
    background: var(--color-ink);
    color: var(--color-surface);
}
.preset-year-active {
    border-color: var(--color-ink) !important;
    background: var(--color-ink-soft) !important;
    color: var(--color-ink) !important;
    font-weight: 600;
}

/* ---- Pagination ---------------------------------------------------- */
.pagination {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    flex-wrap: wrap;
    justify-content: center;
    margin-top: var(--space-5);
    font-size: 0.9rem;
}
.pg-step, .pg-num {
    display: inline-block;
    padding: var(--space-2) var(--space-3);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-small);
    color: var(--color-ink);
    background: var(--color-surface);
    text-decoration: none;
    line-height: 1.2;
}
.pg-step:hover, .pg-num:hover {
    background: var(--color-ink-soft);
    border-color: var(--color-ink);
    color: var(--color-ink-hover);
}
.pg-numbers {
    display: inline-flex;
    gap: var(--space-1);
    align-items: center;
}
.pg-num {
    min-width: 2.2rem;
    text-align: center;
    font-variant-numeric: tabular-nums;
}
.pg-current {
    background: var(--color-ink);
    color: var(--color-surface);
    border-color: var(--color-ink);
    font-weight: 600;
}
.pg-current:hover {
    background: var(--color-ink);
    color: var(--color-surface);
}
.pg-ellipsis {
    padding: 0 var(--space-1);
    color: var(--color-text-faint);
}
.pg-disabled {
    color: var(--color-text-faint);
    background: var(--color-surface-alt);
    border-color: var(--color-border-soft);
    cursor: default;
}
.pg-disabled:hover {
    background: var(--color-surface-alt);
    border-color: var(--color-border-soft);
    color: var(--color-text-faint);
}
.pg-jump {
    color: var(--color-text-muted);
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
}
.pg-jump-input {
    width: 4rem;
    padding: var(--space-2);
    text-align: center;
}

/* ---- Status badges (orders) ---------------------------------------- */
.status-badge {
    display: inline-block;
    padding: 2px 10px;
    border-radius: 3px;
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    line-height: 1.6;
    white-space: nowrap;
}
.status-paid       { background: #ebf3ec; color: #245a30; }       /* gentle green */
.status-partial    { background: #fbf3df; color: #6e5418; }       /* warm amber */
.status-invoiced   { background: var(--color-ink-soft); color: var(--color-ink); }  /* ink blue */
.status-despatched { background: #ece8f3; color: #3d3268; }       /* muted plum */
.status-open       { background: #ebe6d7; color: #5b5648; }       /* sepia */
.status-cancelled  { background: #f0e6e6; color: #6e3030; }       /* dusty rust */

/* ---- Utility classes ----------------------------------------------- */
.text-muted { color: var(--color-text-muted); }
.text-faint { color: var(--color-text-faint); }
.text-num   { font-variant-numeric: tabular-nums; }
.no-results {
    padding: var(--space-7) var(--space-4);
    text-align: center;
    color: var(--color-text-muted);
    background: var(--color-surface);
    border: 1px dashed var(--color-border);
    border-radius: var(--radius);
}

/* v17c: hide the browser's number-input spinner arrows on the order
 * line money fields. The spinners stole 1-2 characters of visible
 * width, clipping values like "111.00" to "111.0". Staff can still
 * type any number; the spinners were not useful on money fields. */
.line-unit::-webkit-outer-spin-button,
.line-unit::-webkit-inner-spin-button,
.line-setup::-webkit-outer-spin-button,
.line-setup::-webkit-inner-spin-button,
.line-qty::-webkit-outer-spin-button,
.line-qty::-webkit-inner-spin-button,
.line-disc::-webkit-outer-spin-button,
.line-disc::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
.line-unit, .line-setup, .line-qty, .line-disc {
    -moz-appearance: textfield;
    appearance: textfield;
    width: 100%;
    box-sizing: border-box;
    padding: 0.35rem 0.4rem;
}

/* =====================================================================
   v5B2.57 - mobile hamburger navigation (every page; layout.php owns
   the header). Desktop (>860px) completely unchanged: the burger is
   hidden and the nav renders exactly as before. Under 860px the nav
   becomes a slide-down panel toggled by the burger; the existing
   click-driven dropdowns work inside it untouched.
   ===================================================================== */
.nav-hamburger { display: none; }

@media (max-width: 860px) {
    .header-inner { position: relative; flex-wrap: nowrap;
                    justify-content: space-between; }
    .nav-hamburger {
        display: inline-flex; align-items: center; justify-content: center;
        background: none; border: 1px solid var(--color-border, #cfcfc8);
        border-radius: 6px; padding: 6px 9px; cursor: pointer;
        color: var(--color-text, #2b2b28); flex: 0 0 auto;
    }
    .site-header .main-nav {
        display: none;
        position: absolute; top: 100%; left: 0; right: 0;
        flex-direction: column; align-items: stretch; gap: 0;
        margin: 0; padding: 0.4rem 0.75rem 0.9rem;
        background: var(--color-bg, #faf9f5);
        border-bottom: 1px solid var(--color-border, #cfcfc8);
        box-shadow: 0 8px 16px rgba(0,0,0,0.12);
        z-index: 300; max-height: calc(100vh - 60px); overflow-y: auto;
    }
    .site-header.nav-open .main-nav { display: flex; }
    .site-header .main-nav .nav-find-order { width: 100%; margin: 0.5rem 0; }
    .site-header .main-nav .nav-find-order input { width: 100%; }
    .site-header .main-nav > a,
    .site-header .main-nav .nav-dropdown { width: 100%; }
    .site-header .main-nav .nav-dropdown-trigger,
    .site-header .main-nav > a {
        width: 100%; justify-content: space-between;
        padding: 0.7rem 0.25rem; font-size: 1.02rem;
        border-bottom: 1px solid var(--color-border-soft, #e6e6e0);
    }
    /* dropdown menus become in-flow accordions - same .open toggle */
    .site-header .main-nav .nav-dropdown-menu,
    .site-header .main-nav .nav-dropdown-menu-right {
        position: static; box-shadow: none; border: none;
        min-width: 0; width: 100%; padding: 0 0 0.35rem 0.9rem;
    }
    .site-header .main-nav .nav-dropdown-menu a { padding: 0.55rem 0.25rem; }
    /* help icons + user chip: comfortable rows in the panel */
    .site-header .main-nav .user-menu .nav-dropdown-menu { padding-left: 0.9rem; }
}
@media (max-width: 860px) {
    /* bar crowding: brand shrinks, long names ellipsize */
    .brand-sub { display: none; }
    .user-trigger .user-name { max-width: 96px; overflow: hidden;
                               text-overflow: ellipsis; white-space: nowrap; }
}
@media (max-width: 480px) {
    .user-trigger .user-name { max-width: 64px; }
}