/* ============================================================
   KnovisEx Brand Identity System — 1.0
   "Engineering Knowledge. Connected Intelligence. Intelligent Execution."

   Foundation layer: global tokens + reusable shell components.
   Presentation only. The KnovisEx identity is BLUE — a premium, clean,
   technical enterprise engineering platform. Dark-navy chrome (sidebar /
   header / login) frames a cool, near-white content canvas of white cards.
   Hierarchy comes from spacing + typography; blue accents mark action,
   selection, and intelligence. Subtle elevation, subtle motion.

   Per-page component-scoped .razor.css keeps higher specificity, so
   these globals set the standard without breaking existing pages; pages
   adopt the tokens as they are converted module-by-module.
   ============================================================ */

:root {
    /* ============================================================
       --knx-* GOVERNED SEMANTIC TOKEN REGISTRY — Commercial Design System v1.0 (AMD-003)
       ADDITIVE ONLY: this registry is introduced without changing any legacy ds- token value
       below, so there is no visual change. Components adopt --knx-* going forward; the eventual
       re-point of legacy tokens to these governed values is a separate, live-reviewable step.
       Purple roles are distinct and never substituted:
         Intelligence #A78BFA · Interaction #7C3AED · Emphasis #8B5CF6.
       ============================================================ */
    /* Brand (approved — do not alter) */
    --knx-navy: #0B1426;
    --knx-white: #FFFFFF;
    --knx-intelligence: #A78BFA;          /* soft purple — selected, accent, focus glow */
    --knx-intelligence-strong: #8B5CF6;   /* medium purple — hover, emphasis, icons */
    --knx-intelligence-gradient: linear-gradient(135deg, #A78BFA, #8B5CF6);
    --knx-interactive: #7C3AED;           /* accessible primary-action fill (D1) */
    --knx-interactive-hover: #6D28D9;
    /* Shell (on navy) */
    --knx-shell-bg: #0B1426;
    --knx-shell-elevated: #111C34;
    --knx-shell-panel: #16213B;
    --knx-shell-line: #26324F;
    --knx-on-shell: #FFFFFF;
    --knx-on-shell-muted: #C4C9D4;
    --knx-on-shell-subtle: #8A93A6;
    --knx-shell-hover: rgba(255,255,255,.06);
    --knx-shell-active: rgba(139,92,246,.18);
    /* Workspace surfaces (light) */
    --knx-canvas: #F4F6F9;
    --knx-surface: #FFFFFF;
    --knx-surface-sunken: #F0F3F8;
    --knx-hover: #F0F3F8;
    --knx-selected: #F3EFFE;
    --knx-disabled-surface: #EEF1F5;
    /* Text (on light) */
    --knx-text-primary: #0F1B30;
    --knx-text-secondary: #475569;
    --knx-text-muted: #64748B;
    --knx-text-subtle: #94A3B8;
    --knx-text-disabled: #A0AAB8;
    /* Borders / focus */
    --knx-border: #E2E6EC;
    --knx-border-strong: #CBD2DC;
    --knx-divider: #EDF0F4;
    --knx-focus: #8B5CF6;
    /* Functional (independent of brand) */
    --knx-success: #16A34A; --knx-success-text: #15803D; --knx-success-bg: #ECFDF3;
    --knx-warning: #F59E0B; --knx-warning-text: #B45309; --knx-warning-bg: #FEF6E7;
    --knx-error:   #DC2626; --knx-error-text:   #B91C1C; --knx-error-bg:   #FEECEC;
    --knx-info:    #2563EB; --knx-info-text:    #1D4ED8; --knx-info-bg:    #EAF1FE;
    /* Domain accents (subordinate — chart/marker only) */
    --knx-accent-engineering: #8B5CF6; --knx-accent-planning: #0EA5E9;
    --knx-accent-construction: #EA7A18; --knx-accent-commissioning: #0E9F6E;
    --knx-accent-operations: #0891B2;   --knx-accent-analytics: #4F46E5;
    /* Radius / elevation / motion / z / breakpoints */
    --knx-radius-xs: 4px; --knx-radius-sm: 6px; --knx-radius-md: 8px; --knx-radius-lg: 12px; --knx-radius-pill: 999px;
    --knx-elev-1: 0 1px 2px rgba(11,20,38,.06);
    --knx-elev-2: 0 2px 8px rgba(11,20,38,.08);
    --knx-elev-3: 0 6px 16px rgba(11,20,38,.10);
    --knx-elev-4: 0 12px 32px rgba(11,20,38,.16);
    --knx-elev-5: 0 8px 24px rgba(11,20,38,.20);
    --knx-motion-fast: 120ms; --knx-motion-base: 160ms; --knx-motion-slow: 220ms;
    --knx-ease-standard: cubic-bezier(0.2,0,0,1);
    --knx-z-sticky: 100; --knx-z-dropdown: 1000; --knx-z-overlay: 1100; --knx-z-dialog: 1200; --knx-z-toast: 1300; --knx-z-tooltip: 1400;
    --knx-bp-sm: 1280px; --knx-bp-md: 1366px; --knx-bp-lg: 1440px; --knx-bp-xl: 1920px; --knx-bp-2xl: 2560px;
    --knx-font-sans: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    --knx-font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

    /* ---- Brand ramp (LEGACY names → governed purple; Interaction #7C3AED for actions) ---- */
    --brand-50:  #F3EFFE;   /* light tint — active rows, tabs */
    --brand-100: #EAE2FE;
    --brand-200: #DDD1FD;
    --brand-300: var(--knx-intelligence);        /* highlight accent = soft purple */
    --brand-500: var(--knx-intelligence-strong); /* secondary accent = medium purple */
    --brand-600: var(--knx-interactive);         /* primary accent / actions = interaction purple */
    --brand-700: var(--knx-interactive-hover);   /* hover / active */
    --brand-800: #5B21B6;
    --brand: var(--brand-600);
    --brand-hover: var(--brand-700);
    --brand-tint: var(--brand-50);

    /* ---- Navy chrome (sidebar / header / login shell) → governed Deep Navy #0B1426 ---- */
    --navy-900: var(--knx-shell-bg);       /* primary background = #0B1426 */
    --navy-800: var(--knx-shell-elevated); /* secondary background */
    --navy-700: var(--knx-shell-panel);    /* workspace panels     */
    --navy-600: #1E2B49;
    --navy-line: var(--knx-shell-line);    /* dividers on navy     */

    /* ---- Neutral surfaces → governed canvas / white working surface ---- */
    --bg: var(--knx-canvas);              /* app content canvas = #F4F6F9 */
    --surface: var(--knx-surface);        /* cards / workspace = #FFFFFF */
    --surface-2: var(--knx-surface-sunken);
    --border: var(--knx-border);
    --border-strong: var(--knx-border-strong);
    --overlay: rgba(11, 20, 38, .55);

    /* ---- Text → governed ---- */
    --text: var(--knx-text-primary);      /* primary  = #0F1B30 */
    --text-muted: var(--knx-text-muted);  /* secondary/muted = #64748B */
    --text-subtle: var(--knx-text-subtle);/* tertiary / hints = #94A3B8 */
    --text-on-brand: #ffffff;

    /* ---- Status (governed functional — independent of brand; Info now blue, not brand) ---- */
    --success: var(--knx-success);  --success-bg: var(--knx-success-bg);
    --warning: var(--knx-warning);  --warning-bg: var(--knx-warning-bg);
    --error:   var(--knx-error);    --error-bg:   var(--knx-error-bg);
    --info:    var(--knx-info);     --info-bg:    var(--knx-info-bg);
    --neutral: #64748B;  --neutral-bg: #EEF1F5;
    --link: var(--knx-interactive);   /* links = interaction purple (primary interaction) */

    /* ---- Typography → governed (Inter with system fallback; self-hosted assets pending, D5) ---- */
    --font: var(--knx-font-sans);
    --fs-page: 2rem;        /* 32 — page titles   */
    --fs-section: 1.375rem; /* 22 — section title */
    --fs-card: 1.125rem;    /* 18 — card title    */
    --fs-body: 0.9375rem;   /* 15 — body          */
    --fs-body-sm: 0.875rem; /* 14                 */
    --fs-table: 0.8125rem;  /* 13 — table         */
    --fs-eyebrow: 0.72rem;

    /* ---- Spacing ---- */
    --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px; --sp-4: 16px;
    --sp-5: 20px; --sp-6: 24px; --sp-8: 32px; --sp-10: 40px;
    --card-pad: 24px;
    --page-pad: 32px;

    /* ---- Radius + elevation (subtle only) ---- */
    --radius-sm: var(--knx-radius-sm);
    --radius: var(--knx-radius-md);   /* governed default 8px */
    --radius-lg: var(--knx-radius-lg);
    --shadow-sm: var(--knx-elev-1);
    --shadow:    var(--knx-elev-2);
    --shadow-md: var(--knx-elev-3);
    --focus-ring: 0 0 0 3px rgba(139, 92, 246, .30);   /* purple focus (governed) */
    --glow: 0 2px 10px rgba(124, 58, 237, .22);        /* restrained — no neon */

    --transition: .18s ease;
}

/* ============================================================
   PAGE SHELL
   ============================================================ */
/* Workspaces expand to the full available width; the content-area padding supplies consistent
   gutters from the navigation panel and the browser edges (Phase 2.3B width standardization). */
.ds-page { width: 100%; max-width: none; margin: 0; }

.ds-page-header {
    display: flex; align-items: flex-start; justify-content: space-between;
    gap: var(--sp-6); flex-wrap: wrap; margin-bottom: var(--sp-6);
}
.ds-page-header .ds-eyebrow {
    font-size: var(--fs-eyebrow); font-weight: 800; letter-spacing: .1em;
    text-transform: uppercase; color: var(--brand-600);
}
.ds-page-header h1 {
    margin: .25rem 0 .35rem; font-size: var(--fs-page); font-weight: 700;
    letter-spacing: -.01em; color: var(--text);
}
.ds-page-header p { margin: 0; max-width: 68ch; font-size: var(--fs-body); color: var(--text-muted); }
.ds-page-header .ds-actions { display: flex; gap: var(--sp-3); align-items: center; flex-shrink: 0; }

/* ============================================================
   METRIC STRIP  (equal cells, subtle dividers)
   ============================================================ */
.ds-metric-strip {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(9.5rem, 1fr));
    background: var(--surface); border: 1px solid var(--border);
    border-radius: var(--radius); overflow: hidden; margin-bottom: var(--sp-6);
    box-shadow: var(--shadow-sm);
}
.ds-metric { padding: var(--sp-5) var(--sp-5); border-right: 1px solid var(--border); }
.ds-metric:last-child { border-right: none; }
.ds-metric__value { font-size: 1.6rem; font-weight: 700; line-height: 1; color: var(--text); }
.ds-metric__label { margin-top: 6px; font-size: var(--fs-table); color: var(--text-muted); }
.ds-metric--clickable { cursor: pointer; transition: background var(--transition); }
.ds-metric--clickable:hover { background: var(--surface-2); }

/* ============================================================
   CARDS / SECTIONS
   ============================================================ */
.ds-card {
    background: var(--surface); border: 1px solid var(--border);
    border-radius: var(--radius); padding: var(--card-pad);
    box-shadow: var(--shadow-sm); margin-bottom: var(--sp-6);
}
.ds-card__header {
    display: flex; align-items: center; justify-content: space-between;
    gap: var(--sp-4); margin-bottom: var(--sp-4);
}
.ds-card__header h2 { margin: 0; font-size: var(--fs-card); font-weight: 650; color: var(--text); }
.ds-card__header p { margin: 2px 0 0; font-size: var(--fs-body-sm); color: var(--text-muted); }
.ds-section-title { font-size: var(--fs-section); font-weight: 650; color: var(--text); margin: 0 0 var(--sp-4); }

/* ============================================================
   BUTTONS
   ============================================================ */
/* Button hierarchy — one component per tier: primary / secondary / neutral / destructive */
.ds-btn, .ds-btn-primary, .ds-btn-secondary, .ds-btn-neutral, .ds-btn-danger {
    display: inline-flex; align-items: center; justify-content: center; gap: .4rem;
    min-height: 40px; min-width: 5rem; padding: .55rem .95rem; border-radius: var(--radius);
    font-size: var(--fs-body-sm); font-weight: 650; line-height: 1; white-space: nowrap;
    cursor: pointer; text-decoration: none; border: 1px solid transparent;
    transition: background var(--transition), border-color var(--transition), color var(--transition), box-shadow var(--transition), transform var(--transition);
}
.ds-btn-primary { background: var(--brand-600); border-color: var(--brand-600); color: var(--text-on-brand); box-shadow: var(--shadow-sm); }
.ds-btn-primary:hover { background: var(--brand-700); border-color: var(--brand-700); box-shadow: var(--glow); }
.ds-btn-secondary { background: var(--surface); border-color: var(--brand-600); color: var(--brand-600); }
.ds-btn-secondary:hover { background: var(--brand-50); border-color: var(--brand-700); color: var(--brand-700); }
.ds-btn-neutral { background: var(--surface-2); border-color: var(--border); color: var(--text-muted); font-weight: 600; }
.ds-btn-neutral:hover { background: var(--surface); border-color: var(--border-strong); color: var(--text); }
.ds-btn-danger { background: var(--error); border-color: #9c2015; color: #fff; }
.ds-btn-danger:hover { background: #9c2015; }
.ds-btn:disabled, .ds-btn-primary:disabled, .ds-btn-secondary:disabled, .ds-btn-neutral:disabled, .ds-btn-danger:disabled { opacity: .5; cursor: default; }
.ds-btn:focus-visible, .ds-btn-primary:focus-visible, .ds-btn-secondary:focus-visible, .ds-btn-neutral:focus-visible, .ds-btn-danger:focus-visible { outline: none; box-shadow: var(--focus-ring); }

/* Compact modifier for dense contexts (table rows, toolbars) */
.ds-btn-sm { min-height: 30px; min-width: 0; padding: .28rem .6rem; font-size: var(--fs-table); font-weight: 650; }

/* Standard table row-action cell: uniform order, spacing, and a fixed minimum width */
.ds-row-actions { display: inline-flex; align-items: center; gap: .35rem; white-space: nowrap; min-width: 15rem; justify-content: flex-end; }

/* ============================================================
   TOOLBAR + SEARCH
   ============================================================ */
.ds-toolbar {
    display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap;
    padding: var(--sp-3) var(--sp-4); background: var(--surface);
    border: 1px solid var(--border); border-radius: var(--radius); margin-bottom: var(--sp-4);
}
.ds-toolbar__spacer { flex: 1; }
.ds-search {
    display: inline-flex; align-items: center; gap: .5rem; min-width: 260px;
    padding: .5rem .75rem; background: var(--surface); border: 1px solid var(--border-strong);
    border-radius: var(--radius-sm); color: var(--text-muted);
}
.ds-search:focus-within { border-color: var(--brand-500); box-shadow: var(--focus-ring); }
.ds-search input { flex: 1; border: 0; outline: none; font: inherit; font-size: var(--fs-body-sm); color: var(--text); background: transparent; }

/* ============================================================
   PROPERTY PANEL  (tabbed right context panel)
   ============================================================ */
.ds-panel { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); display: flex; flex-direction: column; min-height: 0; }
.ds-panel__tabs { display: flex; gap: 2px; padding: 6px; border-bottom: 1px solid var(--border); overflow-x: auto; }
.ds-tab {
    padding: .45rem .7rem; border: 0; border-radius: var(--radius-sm); background: transparent;
    font-size: var(--fs-body-sm); font-weight: 600; color: var(--text-muted); cursor: pointer; white-space: nowrap;
}
.ds-tab:hover { background: var(--surface-2); color: var(--text); }
.ds-tab.active { background: var(--brand-50); color: var(--brand-700); }
.ds-prop { display: grid; grid-template-columns: 9rem 1fr; gap: 2px 12px; padding: 6px 0; font-size: var(--fs-body-sm); }
.ds-prop dt { color: var(--text-muted); }
.ds-prop dd { margin: 0; color: var(--text); }

/* ============================================================
   STATUS BADGES
   ============================================================ */
.ds-badge {
    display: inline-flex; align-items: center; gap: .35rem; padding: .18rem .5rem;
    border-radius: 999px; font-size: var(--fs-table); font-weight: 650; line-height: 1.4;
    background: var(--neutral-bg); color: var(--neutral);
}
.ds-badge--success { background: var(--success-bg); color: var(--success); }
.ds-badge--warning { background: var(--warning-bg); color: var(--warning); }
.ds-badge--error   { background: var(--error-bg);   color: var(--error); }
.ds-badge--info    { background: var(--info-bg);    color: var(--info); }
.ds-badge--neutral { background: var(--neutral-bg); color: var(--neutral); }
.ds-badge__dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; }

/* ============================================================
   DATA GRID
   ============================================================ */
.ds-grid { width: 100%; border-collapse: collapse; font-size: var(--fs-table); background: var(--surface); }
.ds-grid thead th {
    position: sticky; top: 0; z-index: 1; text-align: left; padding: .6rem .7rem;
    background: var(--navy-700); color: #fff; font-weight: 700;
    font-size: var(--fs-table); text-transform: uppercase; letter-spacing: .03em;
    border-bottom: 1px solid var(--navy-600);
}
.ds-grid tbody td { padding: .65rem .7rem; border-bottom: 1px solid var(--border); color: var(--text); vertical-align: middle; }
.ds-grid tbody tr:hover { background: var(--brand-50); }
.ds-grid tbody tr.selected { background: var(--brand-100); }

/* ============================================================
   EMPTY + LOADING STATES
   ============================================================ */
.ds-empty {
    display: flex; flex-direction: column; align-items: center; text-align: center;
    gap: var(--sp-3); padding: var(--sp-10) var(--sp-6); color: var(--text-muted);
    background: var(--surface); border: 1px dashed var(--border-strong); border-radius: var(--radius);
}
.ds-empty__icon { font-size: 1.8rem; opacity: .6; }
.ds-empty h3 { margin: 0; font-size: var(--fs-card); font-weight: 650; color: var(--text); }
.ds-empty p { margin: 0; max-width: 46ch; font-size: var(--fs-body-sm); }
.ds-empty .ds-btn-primary { margin-top: var(--sp-2); }

.ds-skeleton { background: linear-gradient(90deg, var(--knx-surface-sunken) 25%, #E6EBF1 37%, var(--knx-surface-sunken) 63%); background-size: 400% 100%; border-radius: var(--radius-sm); animation: ds-shimmer 1.3s ease infinite; }
@keyframes ds-shimmer { 0% { background-position: 100% 0; } 100% { background-position: 0 0; } }
.ds-spinner { width: 1.1rem; height: 1.1rem; border: 2px solid var(--border-strong); border-top-color: var(--brand-600); border-radius: 50%; display: inline-block; animation: ds-spin .8s linear infinite; }
@keyframes ds-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .ds-skeleton, .ds-spinner { animation: none; } }

/* ============================================================
   GOVERNED SHARED STATE COMPONENT (DsState.razor) — WP-03C Part 2
   One pattern for loading / empty / error / no-results / warning / processing / success / permission-denied.
   ============================================================ */
.ds-state { display: flex; flex-direction: column; align-items: center; text-align: center;
    gap: var(--sp-2); padding: var(--sp-8) var(--sp-6); color: var(--knx-text-muted);
    background: var(--knx-surface); border: 1px solid var(--knx-border); border-radius: var(--knx-radius-md); }
.ds-state__icon { font-size: 1.9rem; line-height: 1; }
.ds-state__title { margin: .1rem 0 0; font-size: var(--fs-card); font-weight: 650; color: var(--knx-text-primary); }
.ds-state__msg { margin: 0; max-width: 48ch; font-size: var(--fs-body-sm); color: var(--knx-text-muted); }
.ds-state__actions { margin-top: var(--sp-3); display: flex; gap: var(--sp-2); flex-wrap: wrap; justify-content: center; }
.ds-state--loading { flex-direction: row; justify-content: center; padding: var(--sp-6); border-style: none; background: transparent; }
.ds-state--empty { border-style: dashed; border-color: var(--knx-border-strong); }
.ds-state--no-results { border-style: dashed; border-color: var(--knx-border-strong); }
.ds-state--error { border-color: var(--knx-error); background: var(--knx-error-bg); }
.ds-state--error .ds-state__icon, .ds-state--error .ds-state__title { color: var(--knx-error-text); }
.ds-state--warning { border-color: #F0D9A8; background: var(--knx-warning-bg); }
.ds-state--warning .ds-state__icon, .ds-state--warning .ds-state__title { color: var(--knx-warning-text); }
.ds-state--success { border-color: #B7E6CD; background: var(--knx-success-bg); }
.ds-state--success .ds-state__icon, .ds-state--success .ds-state__title { color: var(--knx-success-text); }
.ds-state--processing .ds-state__icon { color: var(--knx-intelligence-strong); }
.ds-state--denied { border-color: var(--knx-border-strong); background: var(--knx-surface-sunken); }
.ds-skeleton-stack { display: flex; flex-direction: column; gap: var(--sp-2); width: 100%; }
.ds-skeleton--row { height: 2.25rem; }

/* ============================================================
   DESIGN SYSTEM COMPONENTS  (Phase 2.3B reusable wrappers)
   ============================================================ */
.ds-header-context { margin-top: .35rem; font-size: var(--fs-body-sm); color: var(--text-subtle); }
.ds-grid-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr)); gap: var(--sp-4); }
.ds-card-grid { grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr)); }
.ds-select { min-height: 38px; padding: .4rem .6rem; border: 1px solid var(--border-strong); border-radius: var(--radius-sm); background: var(--surface); color: var(--text); font: inherit; font-size: var(--fs-body-sm); }
.ds-select:focus { outline: none; border-color: var(--brand-500); box-shadow: var(--focus-ring); }

/* Landing page card — DsWorkflowCard */
.ds-workflow-card { display: flex; flex-direction: column; min-height: 172px; padding: var(--card-pad); background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-sm); transition: border-color var(--transition), box-shadow var(--transition); }
.ds-workflow-card:hover { border-color: var(--brand-300); box-shadow: var(--shadow-md); }
.ds-workflow-card .wc-head { display: flex; align-items: center; justify-content: space-between; gap: .6rem; }
.ds-workflow-card .wc-head strong { font-size: var(--fs-card); font-weight: 650; color: var(--text); }
.ds-workflow-card .wc-purpose { margin: .5rem 0 0; color: var(--text-muted); line-height: 1.5; font-size: var(--fs-body-sm); }
.ds-workflow-card .wc-io { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem 1rem; margin-top: .7rem; }
.ds-workflow-card .wc-io > div { font-size: var(--fs-table); color: var(--text); }
.ds-workflow-card .wc-io span { display: block; margin-bottom: .1rem; color: var(--text-subtle); font-size: .6rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; }
.ds-workflow-card .wc-status { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem .6rem; margin-top: .7rem; font-size: var(--fs-body-sm); color: var(--text-muted); }
/* foot pinned to the bottom so cards of differing content still align consistently */
.ds-workflow-card .wc-foot { display: flex; align-items: center; gap: .75rem; margin-top: auto; padding-top: var(--sp-4); border-top: 1px solid var(--border); }
/* Action button keeps its natural width (never clips its label); the Next text absorbs the slack. */
.ds-workflow-card .wc-foot > a, .ds-workflow-card .wc-foot > button { flex: 0 0 auto; }
.ds-workflow-card .wc-next { flex: 1 1 auto; min-width: 0; margin-left: auto; color: var(--text-subtle); font-size: var(--fs-table); text-align: right; }
/* Inactive (reserved) module card — visually subordinate to active modules; no actions */
.ds-workflow-card--inactive { min-height: 0; background: var(--surface-2); border-style: dashed; box-shadow: none; }
.ds-workflow-card--inactive:hover { border-color: var(--border-strong); box-shadow: none; }
.ds-workflow-card--inactive .wc-head strong { color: var(--text-muted); font-weight: 600; }
.ds-workflow-card--inactive .wc-purpose { color: var(--text-subtle); }
/* Card group heading for grouped module lists */
.ds-card-group__label { font-size: .64rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--brand-700); margin: var(--sp-4) 0 .5rem; }
.ds-card-group__label:first-of-type { margin-top: var(--sp-2); }

/* ---- Engineering data-grid standard (Phase 2.3B) ----
   Every list/schedule/review/register grid is an independently scrollable region:
   • fixed (sticky) header — ds-grid/output-table thead th are position:sticky
   • capped height so the HORIZONTAL scrollbar stays reachable (never below a 200+ row list)
   • simultaneous vertical + horizontal scrolling
   • expands to the full workspace width (table width:100%; grows with the page) */
.ds-table-wrap,
.table-scroll {
    overflow: auto;
    max-height: clamp(22rem, calc(100vh - 18rem), 80rem);
    overscroll-behavior: contain;
    /* Global scrollable-workspace standard: breathing room below the last row so the scrollbar and final
       row never sit flush against the card border. */
    padding-bottom: 1.25rem;
    scroll-padding-bottom: 1.25rem;
}
.ds-table-wrap { border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); box-shadow: var(--shadow-sm); }

/* Supporting information panel — DsInfoPanel */
.ds-info-panel__head { display: flex; align-items: center; justify-content: space-between; gap: .6rem; padding: .7rem .9rem; border-bottom: 1px solid var(--border); }
.ds-info-panel__head h3 { margin: 0; font-size: var(--fs-body); font-weight: 650; color: var(--text); }
.ds-info-panel__body { padding: .9rem; overflow: auto; }

/* ============================================================
   SHARED LEGACY CLASSES (tokenized globals)
   Many module pages use these names but define them only in per-page
   scoped .razor.css. Promoting tokenized globals styles the pages that
   have no scoped copy and standardizes the look; scoped copies keep
   higher specificity, so converted-later pages are unaffected.
   ============================================================ */
.editor-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: var(--card-pad); margin-bottom: var(--sp-4); box-shadow: var(--shadow-sm); }

.module-metrics { display: grid; grid-template-columns: repeat(auto-fit, minmax(9.5rem, 1fr)); gap: var(--sp-4); margin-bottom: var(--sp-5); }
.module-metrics article { display: flex; flex-direction: column; gap: 4px; padding: var(--sp-5); background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-sm); }
.module-metrics span { color: var(--text-muted); font-size: var(--fs-table); }
.module-metrics strong { color: var(--text); font-size: 1.6rem; line-height: 1.1; }
.module-metrics small { color: var(--text-subtle); font-size: var(--fs-table); }

/* .table-scroll behavior is defined by the engineering data-grid standard above. */
.output-table { width: 100%; border-collapse: collapse; font-size: var(--fs-table); background: var(--surface); }
.output-table thead th { position: sticky; top: 0; z-index: 1; text-align: left; padding: .6rem .7rem; background: var(--navy-700); color: #fff; font-weight: 700; font-size: var(--fs-table); text-transform: uppercase; letter-spacing: .03em; border-bottom: 1px solid var(--navy-600); }
.output-table tbody td { padding: .65rem .7rem; border-bottom: 1px solid var(--border); color: var(--text); vertical-align: top; }
.output-table tbody tr:hover { background: var(--brand-50); }

.module-message { margin: 0 0 var(--sp-4); padding: .8rem 1rem; border-radius: var(--radius-sm); font-weight: 600; font-size: var(--fs-body-sm); }
.module-message.success { background: var(--success-bg); color: var(--success); border: 1px solid #a7e3c8; }
.module-message.error { background: var(--error-bg); color: var(--error); border: 1px solid #edbdb8; }

/* Layout utilities + shared state/heading bits used across module pages. */
.functional-page, .review-page { min-width: 0; }
.card-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; margin-bottom: var(--sp-4); }
.card-heading h2 { margin: 0; font-size: var(--fs-card); font-weight: 650; color: var(--text); }
.card-heading p { margin: .2rem 0 0; font-size: var(--fs-body-sm); color: var(--text-muted); }
.card-eyebrow { font-size: var(--fs-eyebrow); font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--brand-600); }
.full, .full-width { grid-column: 1 / -1; }
.table-subtext { display: block; color: var(--text-subtle); font-size: var(--fs-table); }
.module-state, .review-state { padding: var(--sp-8); text-align: center; color: var(--text-muted); background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); }
.status-pill { display: inline-flex; align-items: center; padding: .18rem .5rem; border-radius: 999px; background: var(--neutral-bg); color: var(--neutral); font-size: var(--fs-table); font-weight: 650; }
.editor-actions { display: flex; justify-content: flex-end; gap: var(--sp-2); margin-top: var(--sp-4); }
.field-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-4); }
.field-grid label { display: flex; flex-direction: column; gap: .3rem; }
.field-grid label > span { color: var(--text-muted); font-size: var(--fs-eyebrow); font-weight: 700; text-transform: uppercase; letter-spacing: .04em; }
.field-grid input, .field-grid select, .field-grid textarea { min-height: 40px; padding: .5rem .65rem; border: 1px solid var(--border-strong); border-radius: var(--radius-sm); background: var(--surface); color: var(--text); font: inherit; font-size: var(--fs-body-sm); }
.field-grid input:focus, .field-grid select:focus, .field-grid textarea:focus { outline: none; border-color: var(--brand-500); box-shadow: var(--focus-ring); }
.field-grid textarea { min-height: 90px; resize: vertical; }

/* Module workspace patterns (package master/detail, assignment rows, toolbars). */
.assignment-row { display: flex; align-items: center; gap: var(--sp-3); margin: var(--sp-4) 0; padding: var(--sp-3) var(--sp-4); background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); }
.assignment-row select { flex: 1; }
.assignment-row input { flex: 2; }
.assignment-row input, .assignment-row select { min-height: 40px; padding: .5rem .65rem; border: 1px solid var(--border-strong); border-radius: var(--radius-sm); background: var(--surface); font: inherit; font-size: var(--fs-body-sm); }
.detail-toolbar { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); }
.complete-toggle { display: flex; gap: .4rem; align-items: center; }
.package-layout { display: grid; grid-template-columns: 320px 1fr; gap: var(--sp-4); }
.package-list, .package-detail { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-sm); min-width: 0; }
.package-list { padding: 6px; }
.package-detail { padding: var(--card-pad); }
.package-list-item { width: 100%; text-align: left; padding: .7rem .8rem; border: 0; border-radius: var(--radius-sm); border-left: 3px solid transparent; background: transparent; cursor: pointer; }
.package-list-item:hover { background: var(--surface-2); }
.package-list-item.active { background: var(--brand-50); border-left-color: var(--brand-600); }
.package-list-item span, .package-list-item small { display: block; }
.package-list-item span { color: var(--brand-700); font-weight: 700; }
.package-list-item small { color: var(--text-muted); }
.package-facts { display: flex; gap: 1rem; flex-wrap: wrap; color: var(--text-muted); margin: .8rem 0; font-size: var(--fs-body-sm); }
@media (max-width: 900px) { .package-layout { grid-template-columns: 1fr; } }

/* Neutral chrome for bare action buttons in module toolbars/tables + .secondary-button. */
.secondary-button,
.functional-header button:not([class]),
.detail-toolbar button:not([class]),
.editor-heading button:not([class]),
.assignment-row button:not([class]),
.output-table button:not([class]) {
    display: inline-flex; align-items: center; justify-content: center; gap: .35rem;
    min-height: 40px; padding: .5rem .85rem; border: 1px solid var(--border-strong);
    border-radius: var(--radius-sm); background: var(--surface); color: var(--text);
    font-size: var(--fs-body-sm); font-weight: 650; cursor: pointer; white-space: nowrap;
}
.secondary-button:hover,
.functional-header button:not([class]):hover,
.detail-toolbar button:not([class]):hover,
.output-table button:not([class]):hover { background: var(--surface-2); border-color: var(--text-subtle); }

/* Informational (blue) accents — links, help, AI notes. */
.ds-link { color: var(--link); text-decoration: none; }
.ds-link:hover { text-decoration: underline; }
.ds-note-info { padding: var(--sp-3) var(--sp-4); background: var(--info-bg); border-left: 3px solid var(--info); border-radius: var(--radius-sm); color: #234b7a; font-size: var(--fs-body-sm); }

/* ============================================================
   Phase 2.4B — Engineering Intelligence shared page helpers
   ============================================================ */
.ds-page-head { display:flex; justify-content:space-between; align-items:flex-start; gap:1rem; flex-wrap:wrap; margin-bottom: var(--sp-6); }
.ds-h1 { font-size:1.4rem; font-weight:700; margin:.15rem 0; color:var(--text); }
.ds-sub { color:var(--text-muted); font-size:.85rem; max-width:64rem; margin:0; }
.ds-head-actions { display:flex; gap:.4rem; align-items:center; flex-wrap:wrap; }
.ds-card-h { font-size:.95rem; font-weight:700; color:var(--text); margin-bottom:.4rem; }
.ds-card--warn { border-color:#e0b400; background:color-mix(in srgb,#e0b400 6%,var(--surface)); }
.ds-grid-2 { display:grid; grid-template-columns:1fr 1fr; gap: var(--sp-6); }
@media (max-width:70rem){ .ds-grid-2{ grid-template-columns:1fr; } }
.ds-table { width:100%; border-collapse:collapse; font-size:.82rem; }
.ds-table th, .ds-table td { text-align:left; padding:.35rem .5rem; border-bottom:1px solid var(--border); vertical-align:top; }
.ds-table th { font-size:.66rem; text-transform:uppercase; letter-spacing:.03em; color:var(--text-muted); }
.ds-chip { display:inline-block; font-size:.6rem; font-weight:800; letter-spacing:.04em; text-transform:uppercase; padding:.1rem .35rem; border-radius:4px; background:var(--surface-2); color:var(--text-muted); border:1px solid var(--border); }
.ds-sec { font-size:.66rem; font-weight:800; text-transform:uppercase; letter-spacing:.04em; color:var(--text-muted); margin:.3rem 0 .3rem; }
.ds-muted { color:var(--text-muted); }
.ds-metric--warn .ds-metric__value { color:#b8860b; }

/* ============================================================
   GOVERNED FORM FIELDS (WP-03C) — global ds- form primitives
   ============================================================ */
.ds-field { display: flex; flex-direction: column; gap: .3rem; }
.ds-field__label { font-size: var(--fs-body-sm); font-weight: 600; color: var(--knx-text-secondary); }
.ds-field--inline { flex-direction: row; align-items: center; gap: .5rem; }
.ds-field--inline .ds-field__label { white-space: nowrap; margin: 0; }
.ds-input { width: 100%; padding: .5rem .6rem; border: 1px solid var(--knx-border); border-radius: var(--knx-radius-sm);
    background: var(--knx-surface); color: var(--knx-text-primary); font: inherit; font-size: var(--fs-body-sm);
    transition: border-color .15s ease, box-shadow .15s ease; }
.ds-input:hover { border-color: var(--knx-border-strong); }
.ds-input:focus { outline: none; border-color: var(--knx-intelligence-strong); box-shadow: 0 0 0 3px rgba(139,92,246,.20); }
.ds-input:disabled { background: var(--knx-disabled-surface); color: var(--knx-text-disabled); cursor: not-allowed; }
select.ds-input { cursor: pointer; }
textarea.ds-input { resize: vertical; min-height: 4.5rem; }
.ds-check { display: inline-flex; align-items: center; gap: .5rem; font-size: var(--fs-body-sm); color: var(--knx-text-primary); cursor: pointer; }
.ds-check input { width: 1rem; height: 1rem; accent-color: var(--knx-interactive); }
.admin-form-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: var(--sp-4); }

/* ============================================================
   GOVERNED LAYOUT + PROGRESS + PROPERTY PRIMITIVES (WP-03C)
   ============================================================ */
.ds-card-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: var(--sp-4); }
.ds-divider { border: none; border-top: 1px solid var(--knx-divider); margin: var(--sp-3) 0; }
.ds-progress { height: 8px; background: var(--knx-surface-sunken); border-radius: var(--knx-radius-pill); overflow: hidden; margin-top: .3rem; }
.ds-progress__bar { height: 100%; background: var(--knx-intelligence-gradient); border-radius: var(--knx-radius-pill); transition: width var(--knx-motion-base) var(--knx-ease-standard); }
.ds-progress__fill { height: 100%; background: var(--brand-500); border-radius: 999px; }
.ds-prop { display: grid; grid-template-columns: minmax(7rem, auto) 1fr; gap: .25rem .8rem; margin: .4rem 0 0; font-size: var(--fs-body-sm); }
.ds-prop dt { color: var(--knx-text-muted); }
.ds-prop dd { margin: 0; color: var(--knx-text-primary); }
.ds-badge--info { color: var(--knx-info-text); background: var(--knx-info-bg); }
.ds-badge--success { color: var(--knx-success-text); background: var(--knx-success-bg); }
.ds-badge--error { color: var(--knx-error-text); background: var(--knx-error-bg); }

.ds-filter-bar { display: flex; gap: var(--sp-3); flex-wrap: wrap; align-items: flex-end; }
.ds-filter-chips { display: flex; gap: .4rem; flex-wrap: wrap; margin-bottom: var(--sp-3); }
.ds-filter-chips a { text-decoration: none; }

.knx-container { max-width: 1600px; margin: 0 auto; }

.drop-glyph { font-size: 2rem; line-height: 1; display: block; }