@import url('https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:wght@400;500;700&display=swap');

/* =========================================================================
   SourceEZ Design System v1.0
   -------------------------------------------------------------------------
   Single self-contained stylesheet shared by /admin-new.html and
   /factory-new.html. Matches the brand of the new Shopify theme:
   Bricolage Grotesque, mono palette, sharp corners, semantic accents only
   for status. Keyed off legacy class names (.btn, .stat-card, .badge-*,
   .nav-item, .modal, .side-panel, etc.) so existing render functions
   keep working without JS changes.

   LOAD ORDER (important): this file is linked BEFORE the inline <style>
   block in both portals, so any variable redeclared inline will still
   win during the migration. Once a screen has been refactored to the
   new tokens, the inline duplicate can be dropped.

   Sections
     1. Tokens (color, type, space, radius, elevation, motion)
     2. Legacy variable map (--primary etc. → new mono palette)
     3. Base layer (resets, body, links, focus, scrollbar)
     4. Typography
     5. Layout primitives (.app-container, .sidebar, .main-content)
     6. Page header
     7. Buttons (.btn*, .action-btn*)
     8. Cards & stat cards
     9. Quick actions
    10. Tables (default + .sub-table)
    11. Badges (legacy + .status--*)
    12. Tags
    13. Forms (.form-input, .form-select, .edit-input)
    14. Tabs (.tabs, .modal-tabs)
    15. Modals
    16. Side panels
    17. Detail grid
    18. Alerts & sync indicator
    19. Sidebar nav (.nav-item, .nav-badge)
    20. Utilities (.u-*)
    21. Reduced motion
   ========================================================================= */


/* ---------- 1. TOKENS --------------------------------------------------- */
:root {
    /* Mono palette (light surface) */
    --sez-text:              #000000;
    --sez-text-secondary:    #13110d;
    --sez-text-muted:        #b6b6b6;
    --sez-bg:                #ffffff;
    --sez-bg-secondary:      #f4f4f4;  /* cards / wells */
    --sez-bg-tertiary:       #f3f3f3;  /* hover state */
    --sez-border:            #e5e5e5;
    --sez-border-strong:     #000000;

    /* Mono palette (dark — sidebars, headers) */
    --sez-dark-bg:           #000000;
    --sez-dark-bg-secondary: #373737;
    --sez-dark-text:         #ffffff;
    --sez-dark-text-muted:   #b6b6b6;
    --sez-dark-border:       rgba(255,255,255,0.12);

    /* Semantic accents — used sparingly for status only */
    --sez-amber:    #d97706;   /* pending / awaiting action */
    --sez-amber-bg: #fef3c7;
    --sez-red:      #dc2626;   /* destructive / overdue */
    --sez-red-bg:   #fee2e2;
    --sez-green:    #059669;   /* paid / completed / synced */
    --sez-green-bg: #d1fae5;
    --sez-blue:     #2563eb;   /* in production / shipping / link */
    --sez-blue-bg:  #dbeafe;

    /* Type */
    --sez-font-sans: 'Bricolage Grotesque', -apple-system, BlinkMacSystemFont,
                     'Segoe UI', Roboto, sans-serif;
    --sez-font-mono: ui-monospace, 'JetBrains Mono', SFMono-Regular, Menlo,
                     Consolas, monospace;

    --sez-text-xs:   11px;
    --sez-text-sm:   12px;
    --sez-text-base: 13px;
    --sez-text-md:   14px;
    --sez-text-lg:   16px;
    --sez-text-xl:   18px;
    --sez-text-2xl:  24px;
    --sez-text-3xl:  32px;

    --sez-leading-tight:  1.2;
    --sez-leading-normal: 1.5;

    --sez-fw-regular:  400;
    --sez-fw-medium:   500;
    --sez-fw-bold:     700;

    /* Spacing scale (4 / 8 / 12 / 16 / 20 / 24 / 32 / 48 / 64) */
    --sez-space-1:  4px;
    --sez-space-2:  8px;
    --sez-space-3:  12px;
    --sez-space-4:  16px;
    --sez-space-5:  20px;
    --sez-space-6:  24px;
    --sez-space-8:  32px;
    --sez-space-12: 48px;
    --sez-space-16: 64px;

    /* Radius — Shopify theme is fairly square */
    --sez-radius-none: 0;
    --sez-radius-sm:   4px;   /* small elements: badges, inputs, small btns */
    --sez-radius-md:   8px;   /* cards, modals, side panels */
    --sez-radius-pill: 999px;

    /* Elevation */
    --sez-shadow-xs:  0 1px 2px rgba(0,0,0,0.04);
    --sez-shadow-sm:  0 1px 3px rgba(0,0,0,0.06), 0 1px 2px rgba(0,0,0,0.04);
    --sez-shadow-md:  0 2px 6px rgba(0,0,0,0.06), 0 1px 2px rgba(0,0,0,0.04);
    --sez-shadow-lg:  0 8px 24px rgba(0,0,0,0.10);
    --sez-shadow-xl:  0 20px 48px rgba(0,0,0,0.18);

    /* Motion */
    --sez-dur-fast:   120ms;
    --sez-dur-base:   160ms;
    --sez-dur-slow:   200ms;
    --sez-ease:       cubic-bezier(0.2, 0, 0, 1);

    --sez-sidebar-width: 240px;
}


/* ---------- 2. LEGACY VARIABLE MAP -------------------------------------- */
/* Existing code uses var(--primary), var(--bg), var(--surface) etc.
   Re-point them at the mono palette so any class that referenced them
   (including ones we don't restyle here) inherits the new look.       */
:root {
    --primary:        #000000;        /* was purple */
    --primary-dark:   #000000;
    --primary-light:  #373737;
    --secondary:      #373737;        /* dark grey */

    --bg:             var(--sez-bg-secondary); /* page background — grey */
    --surface:        var(--sez-bg);            /* card / panel surface — white */
    --text:           var(--sez-text);
    --text-secondary: var(--sez-text-secondary);
    --text-muted:     var(--sez-text-muted);
    --border:         var(--sez-border);
    --shadow:         var(--sez-shadow-sm);

    --success: var(--sez-green);
    --warning: var(--sez-amber);
    --error:   var(--sez-red);
    --info:    var(--sez-blue);

    --sidebar-width: var(--sez-sidebar-width);
}


/* ---------- 3. BASE LAYER ----------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

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

body {
    margin: 0;
    font-family: var(--sez-font-sans);
    font-size: var(--sez-text-md);
    font-weight: var(--sez-fw-regular);
    line-height: var(--sez-leading-normal);
    color: var(--sez-text);
    background: var(--sez-bg);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

a { color: var(--sez-text); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 2px; }

button { font-family: inherit; }

:focus-visible {
    outline: 2px solid var(--sez-text);
    outline-offset: 2px;
}

::selection { background: var(--sez-text); color: var(--sez-bg); }

::-webkit-scrollbar          { width: 10px; height: 10px; }
::-webkit-scrollbar-track    { background: var(--sez-bg-secondary); }
::-webkit-scrollbar-thumb    { background: #cfcfcf; border-radius: var(--sez-radius-sm); }
::-webkit-scrollbar-thumb:hover { background: #9e9e9e; }


/* ---------- 4. TYPOGRAPHY ----------------------------------------------- */
h1, h2, h3, h4, h5 {
    font-family: var(--sez-font-sans);
    font-weight: var(--sez-fw-bold);
    line-height: var(--sez-leading-tight);
    color: var(--sez-text);
    margin: 0;
    letter-spacing: -0.01em;
}
h1 { font-size: var(--sez-text-3xl); }
h2 { font-size: var(--sez-text-2xl); }
h3 { font-size: var(--sez-text-xl); }
h4 { font-size: var(--sez-text-lg); }
h5 { font-size: var(--sez-text-md); }

p  { margin: 0; }


/* ---------- 5. LAYOUT PRIMITIVES ---------------------------------------- */
.app-container { display: flex; min-height: 100vh; }

.sidebar {
    width: var(--sez-sidebar-width);
    background: var(--sez-dark-bg);
    color: var(--sez-dark-text);
    position: fixed;
    top: 0;
    left: 0;
    height: 100vh;
    display: flex;
    flex-direction: column;
    z-index: 100;
}
.sidebar-header {
    padding: var(--sez-space-5);
    border-bottom: 1px solid var(--sez-dark-border);
}
.sidebar-logo {
    display: flex;
    align-items: center;
    gap: var(--sez-space-3);
    font-size: var(--sez-text-xl);
    font-weight: var(--sez-fw-bold);
    letter-spacing: -0.01em;
}
.sidebar-nav { flex: 1; padding: var(--sez-space-4) 0; overflow-y: auto; }
.sidebar-footer {
    padding: var(--sez-space-4) var(--sez-space-5);
    border-top: 1px solid var(--sez-dark-border);
}
.user-info { display: flex; align-items: center; gap: var(--sez-space-3); }
.user-avatar {
    width: 36px;
    height: 36px;
    background: var(--sez-dark-bg-secondary);
    color: var(--sez-dark-text);
    border-radius: var(--sez-radius-pill);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: var(--sez-fw-bold);
    font-size: var(--sez-text-sm);
}

.main-content {
    flex: 1;
    margin-left: var(--sez-sidebar-width);
    padding: var(--sez-space-6);
    min-width: 0;
}


/* ---------- 6. PAGE HEADER ---------------------------------------------- */
.page-section { display: none; }
.page-section.active { display: block; }

.page-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: var(--sez-space-4);
    margin-bottom: var(--sez-space-6);
    padding-bottom: var(--sez-space-5);
    border-bottom: 1px solid var(--sez-border);
}
.page-title {
    font-size: var(--sez-text-3xl);
    font-weight: var(--sez-fw-bold);
    color: var(--sez-text);
    letter-spacing: -0.02em;
    line-height: 1.1;
}
.page-subtitle {
    color: var(--sez-text-secondary);
    margin-top: var(--sez-space-1);
    font-size: var(--sez-text-md);
}
.page-actions { display: flex; gap: var(--sez-space-3); flex-wrap: wrap; }


/* ---------- 7. BUTTONS -------------------------------------------------- */
.btn {
    appearance: none;
    -webkit-appearance: none;
    border: 1px solid transparent;
    border-radius: var(--sez-radius-sm);
    padding: 9px 16px;
    font-family: var(--sez-font-sans);
    font-size: var(--sez-text-md);
    font-weight: var(--sez-fw-bold);    /* Shopify theme: button label = bold */
    line-height: 1.2;
    letter-spacing: 0;
    text-transform: none;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--sez-space-2);
    cursor: pointer;
    background: var(--sez-bg);
    color: var(--sez-text);
    transition: background var(--sez-dur-fast) var(--sez-ease),
                color var(--sez-dur-fast) var(--sez-ease),
                border-color var(--sez-dur-fast) var(--sez-ease);
    white-space: nowrap;
}
.btn:hover { text-decoration: none; }
.btn:focus-visible { outline: 2px solid var(--sez-text); outline-offset: 2px; }
.btn:disabled, .btn[disabled] { opacity: 0.5; cursor: not-allowed; }

.btn-primary    { background: var(--sez-text); color: var(--sez-bg); border-color: var(--sez-text); }
.btn-primary:hover { background: var(--sez-dark-bg-secondary); border-color: var(--sez-dark-bg-secondary); color: var(--sez-bg); }

.btn-secondary  { background: var(--sez-dark-bg-secondary); color: var(--sez-bg); border-color: var(--sez-dark-bg-secondary); }
.btn-secondary:hover { background: var(--sez-text); border-color: var(--sez-text); }

.btn-outline    { background: var(--sez-bg); color: var(--sez-text); border-color: var(--sez-border); }
.btn-outline:hover { background: var(--sez-bg-tertiary); border-color: var(--sez-text); }

.btn-success    { background: var(--sez-green); color: #ffffff; border-color: var(--sez-green); }
.btn-success:hover { background: #047857; border-color: #047857; }

.btn-warning    { background: var(--sez-amber); color: #ffffff; border-color: var(--sez-amber); }
.btn-warning:hover { background: #b45309; border-color: #b45309; }

.btn-danger     { background: var(--sez-red); color: #ffffff; border-color: var(--sez-red); }
.btn-danger:hover { background: #b91c1c; border-color: #b91c1c; }

.btn-sm { padding: 5px 10px; font-size: var(--sez-text-sm); }
.btn-icon { padding: 7px; width: 32px; height: 32px; }

/* In-table action buttons */
.action-btn {
    appearance: none;
    border: 1px solid var(--sez-border);
    background: var(--sez-bg);
    color: var(--sez-text);
    border-radius: var(--sez-radius-sm);
    padding: 4px 10px;
    font-family: var(--sez-font-sans);
    font-size: var(--sez-text-sm);
    font-weight: var(--sez-fw-medium);
    cursor: pointer;
    line-height: 1.4;
    transition: background var(--sez-dur-fast) var(--sez-ease),
                color var(--sez-dur-fast) var(--sez-ease),
                border-color var(--sez-dur-fast) var(--sez-ease);
}
.action-btn:hover { background: var(--sez-text); color: var(--sez-bg); border-color: var(--sez-text); }
.action-btn.primary { background: var(--sez-text); color: var(--sez-bg); border-color: var(--sez-text); }
.action-btn.primary:hover { background: var(--sez-dark-bg-secondary); border-color: var(--sez-dark-bg-secondary); }
.action-btn.success { background: var(--sez-green); color: #ffffff; border-color: var(--sez-green); }
.action-btn.success:hover { background: #047857; border-color: #047857; }
.action-btn.warning { background: var(--sez-amber); color: #ffffff; border-color: var(--sez-amber); }
.action-btn.warning:hover { background: #b45309; border-color: #b45309; }


/* ---------- 8. CARDS & STAT CARDS --------------------------------------- */
.card {
    background: var(--sez-bg);
    border: 1px solid var(--sez-border);
    border-radius: var(--sez-radius-md);
    box-shadow: var(--sez-shadow-xs);
}
.card-header {
    padding: var(--sez-space-4) var(--sez-space-5);
    border-bottom: 1px solid var(--sez-border);
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--sez-space-3);
}
.card-title {
    font-size: var(--sez-text-lg);
    font-weight: var(--sez-fw-bold);
    letter-spacing: -0.01em;
}
.card-body { padding: var(--sez-space-5); }

.stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: var(--sez-space-3);
    margin-bottom: var(--sez-space-6);
}
.stat-card {
    background: var(--sez-bg);
    border: 1px solid var(--sez-border);
    border-radius: var(--sez-radius-md);
    padding: var(--sez-space-4) var(--sez-space-5);
    cursor: pointer;
    transition: border-color var(--sez-dur-fast) var(--sez-ease),
                background var(--sez-dur-fast) var(--sez-ease),
                transform var(--sez-dur-fast) var(--sez-ease);
    box-shadow: var(--sez-shadow-xs);
}
.stat-card:hover { border-color: var(--sez-text); background: var(--sez-bg-tertiary); }
.stat-card.active { border-color: var(--sez-text); background: var(--sez-bg-secondary); }
.stat-value {
    font-size: var(--sez-text-3xl);
    font-weight: var(--sez-fw-bold);
    color: var(--sez-text);
    letter-spacing: -0.02em;
    line-height: 1.1;
}
.stat-label {
    font-size: var(--sez-text-sm);
    color: var(--sez-text-secondary);
    margin-top: var(--sez-space-1);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-weight: var(--sez-fw-medium);
}


/* ---------- 9. QUICK ACTIONS ------------------------------------------- */
.quick-actions {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: var(--sez-space-3);
    margin-bottom: var(--sez-space-6);
}
.quick-action {
    background: var(--sez-bg);
    border: 1px solid var(--sez-border);
    border-radius: var(--sez-radius-md);
    padding: var(--sez-space-4) var(--sez-space-5);
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: var(--sez-space-4);
    transition: border-color var(--sez-dur-fast) var(--sez-ease),
                background var(--sez-dur-fast) var(--sez-ease);
    box-shadow: var(--sez-shadow-xs);
}
.quick-action:hover { border-color: var(--sez-text); background: var(--sez-bg-tertiary); }
.quick-action-icon {
    width: 40px;
    height: 40px;
    flex-shrink: 0;
    background: var(--sez-text);
    color: var(--sez-bg);
    border-radius: var(--sez-radius-sm);
    display: flex;
    align-items: center;
    justify-content: center;
}
.quick-action h4 { font-size: var(--sez-text-md); font-weight: var(--sez-fw-bold); margin: 0 0 2px 0; }
.quick-action p  { font-size: var(--sez-text-sm); color: var(--sez-text-secondary); margin: 0; }


/* ---------- 10. TABLES -------------------------------------------------- */
.table-container {
    background: var(--sez-bg);
    border: 1px solid var(--sez-border);
    border-radius: var(--sez-radius-md);
    overflow: hidden;
    box-shadow: var(--sez-shadow-xs);
}
.table-toolbar {
    padding: var(--sez-space-3) var(--sez-space-4);
    display: flex;
    gap: var(--sez-space-3);
    flex-wrap: nowrap;
    align-items: center;
    border-bottom: 1px solid var(--sez-border);
    background: var(--sez-bg);
}
/* Inputs inside the toolbar must NOT be 100% width — they're inline controls.
   Override the global input rule that's intentionally width:100% elsewhere. */
.table-toolbar .search-input,
.table-toolbar input.search-input,
.table-toolbar input[type="text"].search-input {
    width: auto;
    flex: 1 1 240px;
    min-width: 180px;
    max-width: 360px;
    padding: 7px 12px;
    border: 1px solid #9ca3af;
    border-radius: var(--sez-radius-sm);
    font-size: var(--sez-text-md);
    font-family: inherit;
    background: var(--sez-bg);
    color: var(--sez-text);
}
.table-toolbar .filter-select,
.table-toolbar select.filter-select {
    width: auto;
    flex: 0 1 auto;
    min-width: 140px;
    padding: 7px 28px 7px 12px;
    border: 1px solid #9ca3af;
    border-radius: var(--sez-radius-sm);
    font-size: var(--sez-text-md);
    background: var(--sez-bg);
    color: var(--sez-text);
    font-family: inherit;
}
.table-toolbar .search-input:focus,
.table-toolbar .filter-select:focus { outline: none; border-color: var(--sez-text); }
.table-toolbar label { font-size: var(--sez-text-sm); color: var(--sez-text-secondary); display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.table-toolbar input[type="checkbox"] { width: auto; }
/* Push trailing controls (eg. "Hide Closed", "Bulk Changes") to the right */
.table-toolbar .toolbar-spacer { flex: 1 1 auto; }

table { width: 100%; border-collapse: collapse; font-size: var(--sez-text-md); }
thead tr { border-bottom: 1px solid var(--sez-text); }
th {
    background: var(--sez-bg-secondary);
    color: var(--sez-text);
    padding: 10px 12px;
    text-align: left;
    font-weight: var(--sez-fw-bold);
    font-size: var(--sez-text-xs);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    white-space: nowrap;
    border-bottom: 1px solid var(--sez-border);
}
td {
    padding: 9px 12px;
    border-bottom: 1px solid var(--sez-border);
    font-size: var(--sez-text-md);
    color: var(--sez-text);
    vertical-align: middle;
}
tbody tr { transition: background var(--sez-dur-fast) var(--sez-ease); }
tbody tr:hover { background: var(--sez-bg-tertiary); }
tbody tr:last-child td { border-bottom: none; }

/* Sub-tables (nested in modals / panels) */
.sub-table { width: 100%; font-size: var(--sez-text-base); }
.sub-table th {
    background: var(--sez-bg-secondary);
    color: var(--sez-text-secondary);
    padding: 8px 10px;
    font-size: var(--sez-text-xs);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.sub-table td { padding: 8px 10px; border-bottom: 1px solid var(--sez-border); }


/* ---------- 11. BADGES -------------------------------------------------- */
/* Generic badge — pill, monochrome by default */
.badge {
    display: inline-block;
    padding: 2px 8px;
    border-radius: var(--sez-radius-sm);
    font-size: var(--sez-text-xs);
    font-weight: var(--sez-fw-bold);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    line-height: 1.5;
    background: var(--sez-bg-secondary);
    color: var(--sez-text);
    border: 1px solid var(--sez-border);
    white-space: nowrap;
}

/* Legacy badge variants — mapped to semantic accents */
.badge-active     { background: var(--sez-green-bg); color: var(--sez-green); border-color: transparent; }
.badge-inactive   { background: var(--sez-bg-secondary); color: var(--sez-text-secondary); border-color: var(--sez-border); }
.badge-pending    { background: var(--sez-amber-bg); color: var(--sez-amber); border-color: transparent; }
.badge-base       { background: var(--sez-blue-bg); color: var(--sez-blue); border-color: transparent; }
.badge-customer   { background: var(--sez-bg-secondary); color: var(--sez-text); border-color: var(--sez-border); }
.badge-synced     { background: var(--sez-green-bg); color: var(--sez-green); border-color: transparent; }
.badge-draft      { background: var(--sez-bg-secondary); color: var(--sez-text-secondary); border-color: var(--sez-border); }
.badge-visuals    { background: var(--sez-amber-bg); color: var(--sez-amber); border-color: transparent; }
.badge-production { background: var(--sez-blue-bg); color: var(--sez-blue); border-color: transparent; }
.badge-shipping   { background: var(--sez-blue-bg); color: var(--sez-blue); border-color: transparent; }
.badge-completed  { background: var(--sez-green-bg); color: var(--sez-green); border-color: transparent; }
.badge-error      { background: var(--sez-red-bg); color: var(--sez-red); border-color: transparent; }
.badge-warning    { background: var(--sez-amber-bg); color: var(--sez-amber); border-color: transparent; }

/* Forward-looking status helpers (use these in new code) */
.status--paid      { background: var(--sez-green-bg); color: var(--sez-green); border-color: transparent; }
.status--unpaid    { background: var(--sez-amber-bg); color: var(--sez-amber); border-color: transparent; }
.status--overdue   { background: var(--sez-red-bg); color: var(--sez-red); border-color: transparent; }
.status--draft     { background: var(--sez-bg-secondary); color: var(--sez-text-secondary); border-color: var(--sez-border); }
.status--submitted { background: var(--sez-amber-bg); color: var(--sez-amber); border-color: transparent; }
.status--production { background: var(--sez-blue-bg); color: var(--sez-blue); border-color: transparent; }
.status--shipping  { background: var(--sez-blue-bg); color: var(--sez-blue); border-color: transparent; }
.status--completed { background: var(--sez-green-bg); color: var(--sez-green); border-color: transparent; }
.status--closed    { background: var(--sez-bg-secondary); color: var(--sez-text-secondary); border-color: var(--sez-border); }


/* ---------- 12. TAGS ---------------------------------------------------- */
.tag {
    display: inline-block;
    padding: 2px 8px;
    border-radius: var(--sez-radius-sm);
    font-size: var(--sez-text-xs);
    font-weight: var(--sez-fw-medium);
    background: var(--sez-bg-secondary);
    color: var(--sez-text);
    border: 1px solid var(--sez-border);
    line-height: 1.5;
}
.tag-factory  { background: var(--sez-text); color: var(--sez-bg); border-color: var(--sez-text); }
.tag-customer { background: var(--sez-dark-bg-secondary); color: var(--sez-bg); border-color: var(--sez-dark-bg-secondary); }


/* ---------- 13. FORMS --------------------------------------------------- */
.form-group { margin-bottom: var(--sez-space-4); }
.form-label {
    display: block;
    font-size: var(--sez-text-sm);
    font-weight: var(--sez-fw-medium);
    margin-bottom: 6px;
    color: var(--sez-text);
}
.form-label .required { color: var(--sez-red); }
/* Inputs always have a visible outline so users can tell they ARE inputs.
   Selectors include native input/select/textarea + the legacy form-* classes. */
.form-input,
.form-select,
.edit-input,
input[type="text"],
input[type="number"],
input[type="email"],
input[type="password"],
input[type="search"],
input[type="tel"],
input[type="url"],
input[type="date"],
input[type="datetime-local"],
input[type="time"],
select,
textarea {
    width: 100%;
    padding: 8px 12px;
    border: 1px solid #9ca3af;             /* ~grey-400 — always visible on white */
    border-radius: var(--sez-radius-sm);
    font-size: var(--sez-text-md);
    font-family: inherit;
    background: var(--sez-bg);
    color: var(--sez-text);
    transition: border-color var(--sez-dur-fast) var(--sez-ease),
                box-shadow var(--sez-dur-fast) var(--sez-ease);
}
.form-input:hover,
.form-select:hover,
.edit-input:hover,
input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="submit"]):not([type="button"]):hover,
select:hover,
textarea:hover {
    border-color: #4b5563;                  /* ~grey-600 */
}
.form-input:focus,
.form-select:focus,
.edit-input:focus,
input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="submit"]):not([type="button"]):focus,
select:focus,
textarea:focus {
    outline: none;
    border-color: var(--sez-text);
    box-shadow: 0 0 0 3px rgba(0,0,0,0.10);
}
.form-input::placeholder,
.edit-input::placeholder,
input::placeholder,
textarea::placeholder { color: var(--sez-text-muted); }
.form-help { font-size: var(--sez-text-sm); color: var(--sez-text-secondary); margin-top: 4px; }
.form-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: var(--sez-space-4);
}
.form-row-3 { grid-template-columns: repeat(3, 1fr); }

/* In-table edit input — slightly tighter padding + smaller font for cells */
.edit-input {
    padding: 4px 8px;
    font-size: var(--sez-text-base);
}
.edit-input.changed {
    background: var(--sez-amber-bg);
    border-color: var(--sez-amber);
    color: var(--sez-text);
}


/* ---------- 14. TABS ---------------------------------------------------- */
.tabs {
    display: flex;
    gap: 0;
    background: var(--sez-bg);
    border: 1px solid var(--sez-border);
    border-radius: var(--sez-radius-md);
    overflow: hidden;
    margin-bottom: var(--sez-space-5);
    box-shadow: var(--sez-shadow-xs);
}
.tab-btn {
    flex: 1;
    padding: 12px 20px;
    border: none;
    background: transparent;
    cursor: pointer;
    font-family: inherit;
    font-size: var(--sez-text-md);
    font-weight: var(--sez-fw-medium);
    color: var(--sez-text-secondary);
    transition: color var(--sez-dur-fast) var(--sez-ease),
                background var(--sez-dur-fast) var(--sez-ease),
                border-color var(--sez-dur-fast) var(--sez-ease);
    border-bottom: 2px solid transparent;
}
.tab-btn:hover { background: var(--sez-bg-tertiary); color: var(--sez-text); }
.tab-btn.active {
    color: var(--sez-text);
    background: var(--sez-bg);
    border-bottom-color: var(--sez-text);
    font-weight: var(--sez-fw-bold);
}
.tab-count {
    background: var(--sez-text);
    color: var(--sez-bg);
    padding: 1px 8px;
    border-radius: var(--sez-radius-pill);
    font-size: var(--sez-text-xs);
    margin-left: var(--sez-space-2);
    font-weight: var(--sez-fw-bold);
}


/* ---------- 15. MODALS -------------------------------------------------- */
.modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.45);
    z-index: 1000;
    display: none;
    align-items: center;
    justify-content: center;
}
.modal-overlay.show { display: flex; }
.modal {
    background: var(--sez-bg);
    border-radius: var(--sez-radius-md);
    width: 90%;
    max-width: 900px;
    max-height: 90vh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    box-shadow: var(--sez-shadow-xl);
    border: 1px solid var(--sez-border);
}
.modal-lg { max-width: 1000px; }
.modal-header {
    padding: var(--sez-space-4) var(--sez-space-6);
    background: var(--sez-text);
    color: var(--sez-bg);
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--sez-space-4);
}
.modal-title {
    font-size: var(--sez-text-xl);
    font-weight: var(--sez-fw-bold);
    letter-spacing: -0.01em;
}
.modal-close {
    background: rgba(255,255,255,0.12);
    border: 1px solid rgba(255,255,255,0.2);
    color: var(--sez-bg);
    padding: 6px 12px;
    border-radius: var(--sez-radius-sm);
    cursor: pointer;
    font-family: inherit;
    font-size: var(--sez-text-sm);
    transition: background var(--sez-dur-fast) var(--sez-ease);
}
.modal-close:hover { background: rgba(255,255,255,0.22); }
.modal-body { padding: var(--sez-space-6); overflow-y: auto; flex: 1; }
.modal-footer {
    padding: var(--sez-space-4) var(--sez-space-6);
    border-top: 1px solid var(--sez-border);
    display: flex;
    justify-content: flex-end;
    gap: var(--sez-space-3);
    background: var(--sez-bg-secondary);
}
.modal-tabs {
    display: flex;
    border-bottom: 1px solid var(--sez-border);
    margin-bottom: var(--sez-space-5);
    gap: 0;
}
.modal-tab {
    padding: 10px 18px;
    border: none;
    background: transparent;
    cursor: pointer;
    font-family: inherit;
    font-size: var(--sez-text-md);
    font-weight: var(--sez-fw-medium);
    color: var(--sez-text-secondary);
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    transition: color var(--sez-dur-fast) var(--sez-ease),
                border-color var(--sez-dur-fast) var(--sez-ease);
}
.modal-tab:hover { color: var(--sez-text); }
.modal-tab.active { color: var(--sez-text); border-bottom-color: var(--sez-text); font-weight: var(--sez-fw-bold); }
.modal-tab-content { display: none; }
.modal-tab-content.active { display: block; }


/* ---------- 16. SIDE PANELS -------------------------------------------- */
.side-panel {
    position: fixed;
    top: 0;
    right: -882px;
    width: 882px;
    height: 100vh;
    background: var(--sez-bg);
    box-shadow: var(--sez-shadow-xl);
    transition: right var(--sez-dur-slow) var(--sez-ease);
    z-index: 1001;
    display: flex;
    flex-direction: column;
    border-left: 1px solid var(--sez-border);
}
.side-panel.open { right: 0; }
.panel-header {
    padding: var(--sez-space-5);
    background: var(--sez-text);
    color: var(--sez-bg);
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--sez-space-4);
}
.panel-title {
    font-size: var(--sez-text-xl);
    font-weight: var(--sez-fw-bold);
    letter-spacing: -0.01em;
}
.panel-close {
    background: rgba(255,255,255,0.12);
    border: 1px solid rgba(255,255,255,0.2);
    color: var(--sez-bg);
    padding: 6px 12px;
    border-radius: var(--sez-radius-sm);
    cursor: pointer;
    font-family: inherit;
    font-size: var(--sez-text-sm);
    transition: background var(--sez-dur-fast) var(--sez-ease);
}
.panel-close:hover { background: rgba(255,255,255,0.22); }
.panel-body { flex: 1; overflow-y: auto; padding: var(--sez-space-6); }
.panel-footer {
    padding: var(--sez-space-4) var(--sez-space-6);
    border-top: 1px solid var(--sez-border);
    display: flex;
    gap: var(--sez-space-3);
    background: var(--sez-bg-secondary);
}
.panel-section { margin-bottom: var(--sez-space-6); }
.panel-section-title {
    font-size: var(--sez-text-xs);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--sez-text-secondary);
    margin-bottom: var(--sez-space-3);
    padding-bottom: var(--sez-space-2);
    border-bottom: 1px solid var(--sez-border);
    font-weight: var(--sez-fw-bold);
}
.panel-section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--sez-space-3);
    padding-bottom: var(--sez-space-2);
    border-bottom: 1px solid var(--sez-border);
}


/* ---------- 17. DETAIL GRID -------------------------------------------- */
.detail-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--sez-space-3) var(--sez-space-4);
}
.detail-item label {
    display: block;
    font-size: var(--sez-text-xs);
    color: var(--sez-text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-bottom: 2px;
    font-weight: var(--sez-fw-medium);
}
.detail-item span { font-weight: var(--sez-fw-medium); color: var(--sez-text); }


/* ---------- 18. ALERTS & SYNC INDICATOR -------------------------------- */
.alert {
    padding: var(--sez-space-3) var(--sez-space-4);
    border-radius: var(--sez-radius-sm);
    margin-bottom: var(--sez-space-5);
    display: flex;
    align-items: center;
    gap: var(--sez-space-3);
    font-size: var(--sez-text-md);
    border: 1px solid var(--sez-border);
    background: var(--sez-bg-secondary);
}
.alert-info    { background: var(--sez-blue-bg);  color: var(--sez-blue);  border-color: transparent; }
.alert-warning { background: var(--sez-amber-bg); color: var(--sez-amber); border-color: transparent; }
.alert-error   { background: var(--sez-red-bg);   color: var(--sez-red);   border-color: transparent; }
.alert-success { background: var(--sez-green-bg); color: var(--sez-green); border-color: transparent; }

.sync-indicator {
    display: inline-flex;
    align-items: center;
    gap: var(--sez-space-2);
    padding: 6px 12px;
    background: var(--sez-bg-secondary);
    border: 1px solid var(--sez-border);
    border-radius: var(--sez-radius-sm);
    font-size: var(--sez-text-sm);
    color: var(--sez-text-secondary);
}


/* ---------- 19. SIDEBAR NAV ITEMS -------------------------------------- */
.nav-section { margin-bottom: var(--sez-space-2); }
.nav-section-title {
    padding: var(--sez-space-2) var(--sez-space-5);
    font-size: var(--sez-text-xs);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--sez-dark-text-muted);
    font-weight: var(--sez-fw-bold);
}
.nav-item {
    display: flex;
    align-items: center;
    gap: var(--sez-space-3);
    padding: 10px var(--sez-space-5);
    color: rgba(255,255,255,0.78);
    text-decoration: none;
    cursor: pointer;
    font-weight: var(--sez-fw-medium);
    font-size: var(--sez-text-md);
    border-left: 3px solid transparent;
    transition: background var(--sez-dur-fast) var(--sez-ease),
                color var(--sez-dur-fast) var(--sez-ease),
                border-color var(--sez-dur-fast) var(--sez-ease);
}
.nav-item:hover {
    background: rgba(255,255,255,0.06);
    color: var(--sez-bg);
    text-decoration: none;
}
.nav-item.active {
    background: rgba(255,255,255,0.10);
    color: var(--sez-bg);
    border-left-color: var(--sez-bg);
    font-weight: var(--sez-fw-bold);
}
.nav-item svg { width: 18px; height: 18px; opacity: 0.85; flex-shrink: 0; }
.nav-badge {
    margin-left: auto;
    background: var(--sez-red);
    color: #ffffff;
    padding: 1px 8px;
    border-radius: var(--sez-radius-pill);
    font-size: var(--sez-text-xs);
    font-weight: var(--sez-fw-bold);
    line-height: 1.5;
}
.nav-badge.warning { background: var(--sez-amber); }


/* ---------- 20. UTILITIES ---------------------------------------------- */
/* Layout */
.u-flex            { display: flex; }
.u-flex-col        { display: flex; flex-direction: column; }
.u-items-center    { align-items: center; }
.u-items-start     { align-items: flex-start; }
.u-justify-between { justify-content: space-between; }
.u-justify-end     { justify-content: flex-end; }
.u-flex-wrap       { flex-wrap: wrap; }
.u-flex-1          { flex: 1; }
.u-grow            { flex-grow: 1; }
.u-w-full          { width: 100%; }

/* Stack (vertical gap) */
.u-stack-4  { display: flex; flex-direction: column; gap: var(--sez-space-1); }
.u-stack-8  { display: flex; flex-direction: column; gap: var(--sez-space-2); }
.u-stack-12 { display: flex; flex-direction: column; gap: var(--sez-space-3); }
.u-stack-16 { display: flex; flex-direction: column; gap: var(--sez-space-4); }
.u-stack-24 { display: flex; flex-direction: column; gap: var(--sez-space-6); }

/* Row (horizontal gap) */
.u-row-4  { display: flex; align-items: center; gap: var(--sez-space-1); }
.u-row-8  { display: flex; align-items: center; gap: var(--sez-space-2); }
.u-row-12 { display: flex; align-items: center; gap: var(--sez-space-3); }
.u-row-16 { display: flex; align-items: center; gap: var(--sez-space-4); }

/* Grids */
.u-grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--sez-space-4); }
.u-grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sez-space-4); }
.u-grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sez-space-4); }
.u-grid-auto-fill-200 { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: var(--sez-space-4); }
.u-grid-auto-fill-240 { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: var(--sez-space-4); }
.u-grid-auto-fill-280 { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: var(--sez-space-4); }

/* Spacing helpers */
.u-mt-0  { margin-top: 0; }
.u-mt-4  { margin-top: var(--sez-space-1); }
.u-mt-8  { margin-top: var(--sez-space-2); }
.u-mt-12 { margin-top: var(--sez-space-3); }
.u-mt-16 { margin-top: var(--sez-space-4); }
.u-mt-24 { margin-top: var(--sez-space-6); }
.u-mb-0  { margin-bottom: 0; }
.u-mb-8  { margin-bottom: var(--sez-space-2); }
.u-mb-12 { margin-bottom: var(--sez-space-3); }
.u-mb-16 { margin-bottom: var(--sez-space-4); }
.u-mb-24 { margin-bottom: var(--sez-space-6); }
.u-p-0   { padding: 0; }
.u-p-16  { padding: var(--sez-space-4); }
.u-p-24  { padding: var(--sez-space-6); }

/* Text */
.u-text-muted     { color: var(--sez-text-muted); }
.u-text-secondary { color: var(--sez-text-secondary); }
.u-text-success   { color: var(--sez-green); }
.u-text-warning   { color: var(--sez-amber); }
.u-text-error     { color: var(--sez-red); }
.u-text-info      { color: var(--sez-blue); }
.u-text-xs        { font-size: var(--sez-text-xs); }
.u-text-sm        { font-size: var(--sez-text-sm); }
.u-text-md        { font-size: var(--sez-text-md); }
.u-text-lg        { font-size: var(--sez-text-lg); }
.u-text-bold      { font-weight: var(--sez-fw-bold); }
.u-text-medium    { font-weight: var(--sez-fw-medium); }
.u-text-center    { text-align: center; }
.u-text-right     { text-align: right; }
.u-monospace      { font-family: var(--sez-font-mono); }
.u-truncate {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 100%;
}
.u-uppercase { text-transform: uppercase; letter-spacing: 0.04em; }

/* Visibility */
.u-hidden { display: none !important; }


/* ---------- 21. REDUCED MOTION ----------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    * {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}


/* =========================================================================
   MIGRATION PLAYBOOK
   -------------------------------------------------------------------------
   Legacy CSS variable map (already redirected to mono palette above):
     --primary       was #3b1f5f purple   →  #000000 black
     --primary-dark  was #2a1545          →  #000000
     --primary-light was #5a3a7e          →  #373737
     --secondary     was #10254a          →  #373737
     --bg            was #e6e1ef          →  #ffffff
     --surface       was #ffffff          →  #ffffff
     --text          was #0b163a          →  #000000
     --text-muted    was #64748b          →  #b6b6b6
     --border        was #d1d5db          →  #e5e5e5
     --success       #48A14D              →  #059669
     --warning       #f59e0b              →  #d97706
     --error         #CA514E              →  #dc2626
     --info          #367bf6              →  #2563eb

   Common inline-style → utility-class swaps
     style="display:flex;gap:8px"               →  class="u-row-8"
     style="display:flex;gap:12px"              →  class="u-row-12"
     style="display:flex;flex-direction:column;gap:16px"
                                                →  class="u-stack-16"
     style="color:var(--text-muted)"            →  class="u-text-muted"
     style="font-size:12px"                     →  class="u-text-sm"
     style="margin-top:24px"                    →  class="u-mt-24"
     style="text-align:center"                  →  class="u-text-center"
     style="display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:16px"
                                                →  class="u-grid-auto-fill-240"
     style="display:none"                       →  class="u-hidden"

   Before / after examples
   -----------------------
   1) Page header subtitle
      before:  <p class="page-subtitle" style="color:var(--text-muted)">…</p>
      after:   <p class="page-subtitle">…</p>
              (.page-subtitle already styles this colour)

   2) Toolbar checkbox row
      before:  <label style="display:flex;align-items:center;gap:6px;font-size:13px;color:var(--text-muted)">
      after:   <label class="u-row-8 u-text-sm u-text-muted">

   3) Empty-state cell
      before:  <td colspan="5" style="text-align:center;color:var(--text-muted);padding:20px">Loading…</td>
      after:   <td colspan="5" class="u-text-center u-text-muted" style="padding:20px">Loading…</td>

   4) Modal info row
      before:  <div style="display:flex;justify-content:space-between;margin-bottom:8px">
      after:   <div class="u-flex u-justify-between u-mb-8">

   5) Stat card grid (already a component class)
      before:  inline grid styles
      after:   class="stats-grid" — auto-fits cards via the design system

   Inline-style hotspots (run these to find the next sweep targets)
     ripgrep 'style="' public/admin-new.html  | wc -l
     ripgrep 'display:flex' public/admin-new.html
     ripgrep 'color:var\(--text-muted\)' public/admin-new.html
     ripgrep 'margin-top:' public/admin-new.html

   Open question for reviewer
     - Settings page uses .settings-card with its own padding/shadow. We did
       NOT restyle it here; it inherits the mono palette via legacy vars but
       still looks slightly off. Recommended next step: drop .settings-card
       in favour of .card or refactor in the next sweep.
   ========================================================================= */