/* ==========================================================================
   SmartFabX — Global Design System
   ISO / engineering professional look. Loaded AFTER page CSS to override.
   Palette: neutral grayscale + deep-navy accent (#1F3A5F).
   Density: compact. Typography: Segoe UI / Inter system stack.
   ========================================================================== */

:root,
:root.dark,
:root.light {
    /* --- Brand / accent ------------------------------------------------- */
    --ds-accent:        #1F3A5F;
    --ds-accent-600:    #1A314F;
    --ds-accent-700:    #15273F;
    --ds-accent-300:    #4A6E96;
    --ds-accent-100:    #DCE5EF;
    --ds-accent-050:    #EEF2F7;
    --ds-accent-ink:    #FFFFFF;

    /* --- Neutral grayscale (ISO industrial) ----------------------------- */
    --ds-n-0:   #FFFFFF;
    --ds-n-25:  #FAFBFC;
    --ds-n-50:  #F4F6F8;
    --ds-n-100: #ECEFF2;
    --ds-n-200: #DCE0E5;
    --ds-n-300: #C2C8D0;
    --ds-n-400: #9AA3AE;
    --ds-n-500: #6B7480;
    --ds-n-600: #4B5460;
    --ds-n-700: #333A44;
    --ds-n-800: #20262E;
    --ds-n-900: #12161C;

    /* --- Semantic status ----------------------------------------------- */
    --ds-ok:    #1F7A4D;
    --ds-ok-bg: #E4F1EA;
    --ds-warn:  #B5651D;
    --ds-warn-bg:#FBEFDD;
    --ds-err:   #B0292B;
    --ds-err-bg:#F8E1E2;
    --ds-info:  #1F3A5F;
    --ds-info-bg:#E6ECF3;

    /* --- Surfaces ------------------------------------------------------- */
    --ds-bg-app:     var(--ds-n-50);
    --ds-bg-surface: var(--ds-n-0);
    --ds-bg-raised:  var(--ds-n-0);
    --ds-bg-sunken:  var(--ds-n-100);
    --ds-bg-header:  var(--ds-accent);
    --ds-bg-hover:   var(--ds-n-100);
    --ds-bg-active:  var(--ds-accent-050);

    /* --- Borders -------------------------------------------------------- */
    --ds-border:        var(--ds-n-200);
    --ds-border-strong: var(--ds-n-300);
    --ds-border-focus:  var(--ds-accent);

    /* --- Text ----------------------------------------------------------- */
    --ds-text:        var(--ds-n-800);
    --ds-text-muted:  var(--ds-n-500);
    --ds-text-dim:    var(--ds-n-400);
    --ds-text-invert: var(--ds-n-0);
    --ds-text-link:   var(--ds-accent);

    /* --- Typography ----------------------------------------------------- */
    --ds-font: 'Segoe UI', 'Inter', system-ui, -apple-system, 'Helvetica Neue', Arial, sans-serif;
    --ds-font-mono: 'JetBrains Mono', 'Cascadia Code', 'Consolas', 'Courier New', monospace;
    --ds-fs-xs: 11px;
    --ds-fs-sm: 12px;
    --ds-fs-md: 13px;     /* base — compact */
    --ds-fs-lg: 15px;
    --ds-fs-xl: 18px;
    --ds-fs-2xl: 22px;
    --ds-fs-3xl: 28px;
    --ds-lh: 1.45;

    /* --- Spacing / radius / shadow (compact) ---------------------------- */
    --ds-sp-1: 4px;
    --ds-sp-2: 6px;
    --ds-sp-3: 8px;
    --ds-sp-4: 12px;
    --ds-sp-5: 16px;
    --ds-sp-6: 20px;
    --ds-sp-7: 28px;
    --ds-r-sm: 3px;
    --ds-r-md: 4px;
    --ds-r-lg: 6px;
    --ds-r-pill: 999px;
    --ds-sh-1: 0 1px 1px rgba(18,22,28,0.04), 0 1px 2px rgba(18,22,28,0.06);
    --ds-sh-2: 0 1px 2px rgba(18,22,28,0.06), 0 2px 6px rgba(18,22,28,0.08);
    --ds-sh-3: 0 4px 10px rgba(18,22,28,0.10), 0 10px 24px rgba(18,22,28,0.10);
    --ds-focus-ring: 0 0 0 2px rgba(31,58,95,0.25);

    /* --- Map common legacy tokens to the new system --------------------- */
    --accent:        var(--ds-accent);
    --accent-hover:  var(--ds-accent-600);
    --accent-light:  var(--ds-accent-100);
    --accent-light2: var(--ds-accent-050);
    --bg-app:        var(--ds-bg-app);
    --bg-panel:      var(--ds-bg-surface);
    --bg-card:       var(--ds-bg-surface);
    --bg-content:    var(--ds-bg-app);
    --bg-base:       var(--ds-bg-app);
    --bg-surface:    var(--ds-bg-surface);
    --bg-raised:     var(--ds-bg-raised);
    --bg-page:       var(--ds-bg-app);
    --bg-input:      var(--ds-bg-surface);
    --border:        var(--ds-border);
    --border-light:  var(--ds-border);
    --border-dark:   var(--ds-border-strong);
    --text-primary:  var(--ds-text);
    --text-secondary:var(--ds-n-700);
    --text-muted:    var(--ds-text-muted);
    --text-h:        var(--ds-text);
    --text-body:     var(--ds-text);
    --text-dim:      var(--ds-text-dim);
    --teal:          var(--ds-accent);
    --teal-dim:      var(--ds-accent-300);
    --teal-glow:     rgba(31,58,95,0.18);
    --emerald:       var(--ds-ok);
    --emerald-dim:   var(--ds-ok-bg);
    --amber:         var(--ds-warn);
    --amber-dim:     var(--ds-warn-bg);
    --red:           var(--ds-err);
    --red-dim:       var(--ds-err-bg);
    --iso-navy:      var(--ds-accent);
    --iso-blue:      var(--ds-accent);
    --iso-blue-lt:   var(--ds-accent-100);
    --iso-blue-mid:  var(--ds-accent-300);
    --radius:        var(--ds-r-md);
    --radius-sm:     var(--ds-r-sm);
    --radius-md:     var(--ds-r-md);
    --radius-lg:     var(--ds-r-lg);
    --r-sm:          var(--ds-r-sm);
    --r-md:          var(--ds-r-md);
    --r-lg:          var(--ds-r-lg);
    --shadow-sm:     var(--ds-sh-1);
    --shadow-md:     var(--ds-sh-2);
    --shadow-lg:     var(--ds-sh-3);
    --font-ui:       var(--ds-font);
    --font-body:     var(--ds-font);
    --font-main:     var(--ds-font);
    --font-heading:  var(--ds-font);
    --font-display:  var(--ds-font);
    --font-mono:     var(--ds-font-mono);
}

/* ==========================================================================
   Base
   ========================================================================== */
html, body {
    background: var(--ds-bg-app);
    color: var(--ds-text);
    font-family: var(--ds-font);
    font-size: var(--ds-fs-md);
    line-height: var(--ds-lh);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

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

::selection { background: var(--ds-accent-100); color: var(--ds-accent-700); }

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--ds-n-100); }
::-webkit-scrollbar-thumb { background: var(--ds-n-300); border-radius: var(--ds-r-md); border: 2px solid var(--ds-n-100); }
::-webkit-scrollbar-thumb:hover { background: var(--ds-n-400); }

/* ==========================================================================
   Typography
   ========================================================================== */
h1, h2, h3, h4, h5, h6 {
    font-family: var(--ds-font);
    color: var(--ds-text);
    font-weight: 600;
    letter-spacing: -0.005em;
    line-height: 1.25;
    margin: 0 0 var(--ds-sp-3);
}
h1 { font-size: var(--ds-fs-3xl); font-weight: 600; }
h2 { font-size: var(--ds-fs-2xl); font-weight: 600; }
h3 { font-size: var(--ds-fs-xl); }
h4 { font-size: var(--ds-fs-lg); }
h5, h6 { font-size: var(--ds-fs-md); text-transform: uppercase; letter-spacing: .06em; color: var(--ds-text-muted); }

a { color: var(--ds-text-link); text-decoration: none; }
a:hover { text-decoration: underline; }

code, kbd, pre, samp { font-family: var(--ds-font-mono); font-size: 0.92em; }

hr { border: 0; border-top: 1px solid var(--ds-border); margin: var(--ds-sp-5) 0; }

/* Numerals — tabular for data UIs */
table, .ds-mono, .num, [class*="-num"], [class*="qty"], [class*="count"] {
    font-variant-numeric: tabular-nums;
}

/* ==========================================================================
   Buttons
   ========================================================================== */
button,
.btn,
.nav-btn,
.modal-btn,
.tb-btn,
input[type="button"],
input[type="submit"],
input[type="reset"] {
    -webkit-appearance: none;
    appearance: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--ds-sp-2);
    font-family: var(--ds-font);
    font-size: var(--ds-fs-md);
    font-weight: 500;
    line-height: 1;
    color: var(--ds-text);
    background: var(--ds-bg-surface);
    border: 1px solid var(--ds-border-strong);
    border-radius: var(--ds-r-md);
    padding: 6px 12px;
    min-height: 30px;
    cursor: pointer;
    user-select: none;
    transition: background-color .12s ease, border-color .12s ease, color .12s ease, box-shadow .12s ease, transform .04s ease;
    box-shadow: var(--ds-sh-1);
    text-decoration: none;
    white-space: nowrap;
}
button:hover,
.btn:hover,
.nav-btn:hover,
.modal-btn:hover,
.tb-btn:hover {
    background: var(--ds-bg-hover);
    border-color: var(--ds-n-400);
    color: var(--ds-text);
}
button:focus-visible,
.btn:focus-visible,
.nav-btn:focus-visible,
.modal-btn:focus-visible,
input[type="button"]:focus-visible,
input[type="submit"]:focus-visible {
    outline: none;
    box-shadow: var(--ds-focus-ring);
    border-color: var(--ds-border-focus);
}
button:active,
.btn:active,
.nav-btn:active,
.modal-btn:active { transform: translateY(1px); box-shadow: none; }

button[disabled], .btn[disabled], .btn.disabled, .nav-btn[disabled],
button:disabled, .btn:disabled {
    opacity: .55; cursor: not-allowed; box-shadow: none;
}

/* --- Primary -------------------------------------------------------- */
.btn-primary,
.modal-btn--primary,
.btn-save-project,
.btn-add-panel,
button.primary,
button[type="submit"]:not(.btn-secondary):not(.btn-warn):not(.btn-red):not(.modal-btn--danger):not(.modal-btn--secondary) {
    background: var(--ds-accent);
    border-color: var(--ds-accent);
    color: var(--ds-accent-ink);
}
.btn-primary:hover,
.modal-btn--primary:hover,
.btn-save-project:hover,
.btn-add-panel:hover,
button.primary:hover {
    background: var(--ds-accent-600);
    border-color: var(--ds-accent-600);
    color: var(--ds-accent-ink);
}

/* --- Secondary ------------------------------------------------------ */
.btn-secondary,
.modal-btn--secondary,
button.secondary {
    background: var(--ds-bg-surface);
    border-color: var(--ds-border-strong);
    color: var(--ds-text);
}
.btn-secondary:hover, .modal-btn--secondary:hover, button.secondary:hover {
    background: var(--ds-bg-hover);
    border-color: var(--ds-n-400);
}

/* --- Success / Warn / Danger --------------------------------------- */
.btn-success { background: var(--ds-ok); border-color: var(--ds-ok); color: #fff; }
.btn-success:hover { background: #18603C; border-color: #18603C; color: #fff; }
.btn-warn { background: var(--ds-warn); border-color: var(--ds-warn); color: #fff; }
.btn-warn:hover { background: #944F12; border-color: #944F12; color: #fff; }
.btn-red,
.btn-delete,
.modal-btn--danger,
.nav-btn.danger,
button.danger {
    background: var(--ds-err); border-color: var(--ds-err); color: #fff;
}
.btn-red:hover, .btn-delete:hover, .modal-btn--danger:hover, .nav-btn.danger:hover, button.danger:hover {
    background: #8B1F21; border-color: #8B1F21; color: #fff;
}

/* --- Icon-only / small buttons ------------------------------------- */
.btn-icon, .btn-view, .header-icon {
    padding: 4px 6px; min-height: 26px; min-width: 26px;
    border-radius: var(--ds-r-sm);
}
.btn-sm { padding: 3px 8px; min-height: 24px; font-size: var(--ds-fs-sm); }
.btn-lg { padding: 9px 18px; min-height: 38px; font-size: var(--ds-fs-lg); }

/* --- Nav-buttons (dark header context) ----------------------------- */
.nav-btn.home-btn, .header .nav-btn {
    background: rgba(255,255,255,0.10);
    border-color: rgba(255,255,255,0.20);
    color: #fff;
}
.nav-btn.home-btn:hover, .header .nav-btn:hover {
    background: rgba(255,255,255,0.18);
    border-color: rgba(255,255,255,0.32);
    color: #fff;
}

/* ==========================================================================
   Form controls
   ========================================================================== */
input:not([type="button"]):not([type="submit"]):not([type="reset"]):not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]):not([type="color"]),
select,
textarea,
.form-control {
    font-family: var(--ds-font);
    font-size: var(--ds-fs-md);
    color: var(--ds-text);
    background: var(--ds-bg-surface);
    border: 1px solid var(--ds-border-strong);
    border-radius: var(--ds-r-md);
    padding: 6px 10px;
    min-height: 30px;
    line-height: var(--ds-lh);
    transition: border-color .12s ease, box-shadow .12s ease, background .12s ease;
    width: 100%;
    max-width: 100%;
}
textarea { min-height: 72px; resize: vertical; }
select {
    padding-right: 28px;
    background-image:
        linear-gradient(45deg, transparent 50%, var(--ds-n-500) 50%),
        linear-gradient(135deg, var(--ds-n-500) 50%, transparent 50%);
    background-position: calc(100% - 14px) 50%, calc(100% - 9px) 50%;
    background-size: 5px 5px, 5px 5px;
    background-repeat: no-repeat;
    -webkit-appearance: none;
    appearance: none;
}
input:hover, select:hover, textarea:hover, .form-control:hover { border-color: var(--ds-n-400); }
input:focus, select:focus, textarea:focus, .form-control:focus {
    outline: none;
    border-color: var(--ds-border-focus);
    box-shadow: var(--ds-focus-ring);
}
input::placeholder, textarea::placeholder { color: var(--ds-text-dim); }
input[disabled], select[disabled], textarea[disabled],
input[readonly], select[readonly], textarea[readonly] {
    background: var(--ds-bg-sunken); color: var(--ds-text-muted); cursor: not-allowed;
}

label, .form-label, .mb-label, .section-label {
    display: inline-block;
    font-size: var(--ds-fs-sm);
    color: var(--ds-text-muted);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .04em;
    margin-bottom: var(--ds-sp-1);
}

.form-group { display: flex; flex-direction: column; gap: var(--ds-sp-1); margin-bottom: var(--ds-sp-4); }

/* Search box */
.search-box, .search-bar {
    background: var(--ds-bg-surface);
    border: 1px solid var(--ds-border-strong);
    border-radius: var(--ds-r-md);
}
.search-box:focus-within, .search-bar:focus-within {
    border-color: var(--ds-border-focus);
    box-shadow: var(--ds-focus-ring);
}

/* Checkboxes / radios */
input[type="checkbox"], input[type="radio"] {
    width: 14px; height: 14px;
    accent-color: var(--ds-accent);
    cursor: pointer;
}

/* ==========================================================================
   Tables
   ========================================================================== */
table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    background: var(--ds-bg-surface);
    font-size: var(--ds-fs-md);
    border: 1px solid var(--ds-border);
    border-radius: var(--ds-r-md);
    overflow: hidden;
}
thead th {
    background: var(--ds-bg-sunken);
    color: var(--ds-text);
    font-weight: 600;
    font-size: var(--ds-fs-sm);
    text-transform: uppercase;
    letter-spacing: .04em;
    text-align: left;
    padding: 8px 10px;
    border-bottom: 1px solid var(--ds-border-strong);
    white-space: nowrap;
}
tbody td {
    padding: 7px 10px;
    border-bottom: 1px solid var(--ds-border);
    color: var(--ds-text);
    vertical-align: middle;
}
tbody tr:last-child td { border-bottom: 0; }
tbody tr:hover td { background: var(--ds-bg-hover); }
tbody tr:nth-child(even) td { background: var(--ds-n-25); }
tbody tr:nth-child(even):hover td { background: var(--ds-bg-hover); }

.row-best td { background: var(--ds-ok-bg) !important; }
.row-pass td { background: #F3F8F5 !important; }
.row-fail td { background: var(--ds-err-bg) !important; }

.table-container {
    background: var(--ds-bg-surface);
    border-radius: var(--ds-r-md);
    box-shadow: var(--ds-sh-1);
    overflow: auto;
}

/* ==========================================================================
   Cards / panels
   ========================================================================== */
.card, .panel, .hub-card, .stat-card, .sys-card, .project-item, .po-item,
.panel-config-card, .modal-card {
    background: var(--ds-bg-surface);
    border: 1px solid var(--ds-border);
    border-radius: var(--ds-r-lg);
    box-shadow: var(--ds-sh-1);
    color: var(--ds-text);
}
.card:hover, .hub-card:hover, .sys-card:hover, .project-item:hover {
    border-color: var(--ds-accent-300);
    box-shadow: var(--ds-sh-2);
}

.card-body, .panel-row, .panel-section, .panel-actions { padding: var(--ds-sp-4); }
.panel-header, .card-top, .sdr-header {
    padding: var(--ds-sp-3) var(--ds-sp-4);
    border-bottom: 1px solid var(--ds-border);
    background: var(--ds-bg-sunken);
    font-weight: 600;
    font-size: var(--ds-fs-md);
    color: var(--ds-text);
}
.card-foot { padding: var(--ds-sp-3) var(--ds-sp-4); border-top: 1px solid var(--ds-border); background: var(--ds-n-25); }

.card-name, .sys-name { font-weight: 600; color: var(--ds-text); }
.card-desc, .sys-desc { color: var(--ds-text-muted); font-size: var(--ds-fs-sm); }

/* ==========================================================================
   Header / toolbar / nav
   ========================================================================== */
.app-header, .header {
    background: var(--ds-accent);
    color: #fff;
    border-bottom: 1px solid var(--ds-accent-700);
    box-shadow: var(--ds-sh-1);
}
.header-inner { padding: var(--ds-sp-3) var(--ds-sp-5); }
.header-title, .logo-title { color: #fff; font-weight: 600; letter-spacing: .01em; }
.header-sub, .logo-sub { color: rgba(255,255,255,0.72); font-size: var(--ds-fs-sm); }
.header-brand { gap: var(--ds-sp-3); }

.toolbar, .nav-bar {
    background: var(--ds-bg-surface);
    border-bottom: 1px solid var(--ds-border);
    padding: var(--ds-sp-2) var(--ds-sp-4);
    display: flex; align-items: center; gap: var(--ds-sp-2);
}
.toolbar-sep { width: 1px; background: var(--ds-border); align-self: stretch; margin: 0 var(--ds-sp-2); }

.sidebar, .left-panel {
    background: var(--ds-bg-surface);
    border-right: 1px solid var(--ds-border);
}
.sidebar-label { color: var(--ds-text-muted); font-size: var(--ds-fs-sm); text-transform: uppercase; letter-spacing: .05em; }

/* ==========================================================================
   Badges / chips / status
   ========================================================================== */
.badge, .badge-soon, .badge-valid, .badge-version,
.chip-green, .chip-amber, .chip-gray,
.card-tag, .sdr-badge, .header-badge {
    display: inline-flex; align-items: center;
    padding: 2px 8px;
    border-radius: var(--ds-r-pill);
    font-size: var(--ds-fs-xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .04em;
    line-height: 1.5;
    border: 1px solid transparent;
}
.badge, .chip-gray, .card-tag, .sdr-badge { background: var(--ds-n-100); color: var(--ds-text); border-color: var(--ds-border); }
.chip-green, .badge-valid, .card-status.ready { background: var(--ds-ok-bg); color: var(--ds-ok); border-color: rgba(31,122,77,0.25); }
.chip-amber, .badge-soon, .card-status.inbuild, .card-status.planned { background: var(--ds-warn-bg); color: var(--ds-warn); border-color: rgba(181,101,29,0.25); }
.card-status.external { background: var(--ds-info-bg); color: var(--ds-accent); border-color: rgba(31,58,95,0.25); }
.badge-version { background: var(--ds-accent-050); color: var(--ds-accent); border-color: var(--ds-accent-100); }

/* ==========================================================================
   Modals
   ========================================================================== */
.modal-bg, .modal {
    background: rgba(18,22,28,0.55);
    backdrop-filter: blur(2px);
}
.modal-card, .modal-content {
    background: var(--ds-bg-surface);
    border: 1px solid var(--ds-border-strong);
    border-radius: var(--ds-r-lg);
    box-shadow: var(--ds-sh-3);
    color: var(--ds-text);
}
.modal-head, .modal-header {
    background: var(--ds-bg-sunken);
    border-bottom: 1px solid var(--ds-border);
    padding: var(--ds-sp-4) var(--ds-sp-5);
    font-weight: 600;
    color: var(--ds-text);
}
.modal-msg { padding: var(--ds-sp-5); color: var(--ds-text); }
.modal-actions, .modal-buttons {
    padding: var(--ds-sp-4) var(--ds-sp-5);
    border-top: 1px solid var(--ds-border);
    background: var(--ds-n-25);
    display: flex; gap: var(--ds-sp-3); justify-content: flex-end;
}
.modal-sys-name { color: var(--ds-accent); font-weight: 600; }

/* ==========================================================================
   Section / utility
   ========================================================================== */
.section-bg, .section-text, .section-label {
    background: transparent;
    color: var(--ds-text-muted);
}
.pulse-dot { background: var(--ds-ok); box-shadow: 0 0 0 0 rgba(31,122,77,0.55); }

/* Focus visibility everywhere */
:focus-visible {
    outline: 2px solid var(--ds-accent);
    outline-offset: 1px;
}

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

/* Print — clean ISO-style report look */
@media print {
    html, body { background: #fff; color: #000; }
    .app-header, .header, .toolbar, .nav-bar, .sidebar, button, .btn { display: none !important; }
    .card, .panel, table { box-shadow: none; border-color: #999; }
}