/*
 * FILE: sparkus-metronic-bridge.css
 * PURPOSE: Bridge Sparkus design tokens to Bootstrap/Metronic variables.
 *          Single file that unifies the two design systems in Panel.
 * SPEC PROJECT: SP-UX-Audit
 *
 * LOAD ORDER (in _Layout.cshtml):
 *   1. plugins.bundle.css     (Bootstrap + plugins)
 *   2. style.bundle.css       (Metronic core)
 *   3. sparkus-metronic-bridge.css  <<< THIS FILE
 *   4. site.css                (Panel custom styles)
 *   5. panel.css               (Panel layout)
 *   6. [feature].css           (Page-specific)
 *   7. Branding overrides      (Per-tenant, dynamic)
 *
 * SOURCE SPEC: 06-DESIGN-SYSTEM-ALIGNMENT.md (Sections 2-6)
 *
 * KEY RESPONSIBILITIES:
 *  - Define Sparkus blue-tinted palette as CSS custom properties
 *  - Override Bootstrap --bs-* vars with Sparkus values
 *  - Bridge dark mode (Metronic [data-bs-theme="dark"] + Sparkus tokens)
 *  - Standardize border-radius and shadow systems
 *  - Define mode-specific accent colors (Design/Run/Report/Atomic)
 *  - Override typography to use Stag Sans / Stag fonts
 *
 * DEPENDENCIES:
 *  - Metronic style.bundle.css must load BEFORE this file
 *  - Font files in /fonts/stagSans/ (Stag Sans Book, Medium, Light; Stag Medium)
 *
 * LAST UPDATED: 2026-02-12 by /go agent
 * CHANGE SUMMARY: Color polish — primary #0f2438, accent gradient #d92b31→#f05433, full blue-tinted grays
 *
 * NEXT AGENT: Phase 1 will extend with mode accent usage in sidebar partials
 */

/* ========================================================================
   SECTION 1: SPARKUS DESIGN TOKENS
   Portable from Platform sparkus-tokens.css — Panel's authoritative copy.
   These use the Sparkus blue-tinted neutral palette (never pure gray).
   ======================================================================== */
:root,
[data-bs-theme="light"] {
  /* -------------------------------------------------------------------
     BLUE PALETTE (Blue-tinted neutrals — foundation of Sparkus identity)
     ------------------------------------------------------------------- */
  --sp-blue-50:  #f0f5fa;
  --sp-blue-100: #e1ebf4;
  --sp-blue-200: #c3d7e9;
  --sp-blue-300: #94b8d4;
  --sp-blue-400: #5e92b8;
  --sp-blue-500: #3d6f94;
  --sp-blue-600: #2d5573;
  --sp-blue-700: #1e3a52;
  --sp-blue-800: #0f2438;
  --sp-blue-900: #041624;

  /* -------------------------------------------------------------------
     SEMANTIC COLORS
     ------------------------------------------------------------------- */
  --sp-success:       #10b981;
  --sp-success-light: #d1fae5;
  --sp-warning:       #f59e0b;
  --sp-warning-light: #fef3c7;
  --sp-danger:        #ef4444;
  --sp-danger-light:  #fee2e2;
  --sp-info:          var(--sp-blue-500);
  --sp-info-light:    var(--sp-blue-100);

  /* -------------------------------------------------------------------
     SURFACES
     ------------------------------------------------------------------- */
  --sp-body-bg:       var(--sp-blue-50);
  --sp-card-bg:       #ffffff;
  --sp-card-border:   rgba(30, 58, 82, 0.08);

  /* -------------------------------------------------------------------
     TEXT COLORS
     ------------------------------------------------------------------- */
  --sp-text-primary:    #0f2438;
  --sp-text-secondary:  var(--sp-blue-600);
  --sp-text-muted:      var(--sp-blue-400);
  --sp-text-light:      var(--sp-blue-300);

  /* -------------------------------------------------------------------
     SHADOWS (Blue-tinted — never pure black)
     ------------------------------------------------------------------- */
  --sp-shadow-xs:   0 1px 2px rgba(4, 22, 36, 0.04);
  --sp-shadow-sm:   0 1px 3px rgba(4, 22, 36, 0.06), 0 1px 2px rgba(4, 22, 36, 0.04);
  --sp-shadow-md:   0 4px 8px rgba(4, 22, 36, 0.08), 0 2px 4px rgba(4, 22, 36, 0.04);
  --sp-shadow-lg:   0 12px 24px rgba(4, 22, 36, 0.1), 0 4px 8px rgba(4, 22, 36, 0.04);
  --sp-shadow-xl:   0 20px 40px rgba(4, 22, 36, 0.12), 0 8px 16px rgba(4, 22, 36, 0.06);
  --sp-shadow-card: 0 2px 8px rgba(4, 22, 36, 0.08), 0 1px 2px rgba(4, 22, 36, 0.06);

  /* -------------------------------------------------------------------
     BORDER RADIUS
     ------------------------------------------------------------------- */
  --sp-radius-sm:   2px;
  --sp-radius-md:   4px;
  --sp-radius-lg:   6px;
  --sp-radius-xl:   8px;
  --sp-radius-2xl:  12px;
  --sp-radius-full: 9999px;

  /* -------------------------------------------------------------------
     TYPOGRAPHY
     ------------------------------------------------------------------- */
  --sp-font-family-heading: 'Stag', 'Stag Sans', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --sp-font-family-body:    'Stag Sans', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --sp-font-family-mono:    'SF Mono', Consolas, 'Liberation Mono', Menlo, monospace;

  /* -------------------------------------------------------------------
     ACCENT COLORS — Sparkus Red Gradient
     Used for: focus rings, mode switcher active, emphasis CTAs, required markers
     ------------------------------------------------------------------- */
  --sp-accent:          #d92b31;
  --sp-accent-end:      #f05433;
  --sp-accent-rgb:      217, 43, 49;
  --sp-accent-lighter:  rgba(217, 43, 49, 0.08);
  --sp-accent-gradient: linear-gradient(135deg, #d92b31 0%, #f05433 100%);

  /* -------------------------------------------------------------------
     PRIMARY GRADIENT — Dark Navy to Medium Blue
     Used for: btn-primary, hero areas, prominent elements
     ------------------------------------------------------------------- */
  --sp-primary-gradient: linear-gradient(135deg, #0f2438 0%, #3d6f94 100%);

  /* -------------------------------------------------------------------
     TRANSITIONS
     ------------------------------------------------------------------- */
  --sp-transition-fast:   150ms ease;
  --sp-transition-base:   250ms ease;
  --sp-transition-slow:   350ms ease;
  --sp-transition-smooth: 300ms cubic-bezier(0.4, 0, 0.2, 1);
}


/* ========================================================================
   SECTION 2: BOOTSTRAP / METRONIC VARIABLE OVERRIDES (Light Mode)
   Maps --bs-* variables to Sparkus tokens for seamless Metronic integration.
   Source: 06-DESIGN-SYSTEM-ALIGNMENT.md §2.1, §2.2
   ======================================================================== */
:root,
[data-bs-theme="light"] {
  /* -------------------------------------------------------------------
     PRIMARY COLOR (Sparkus Dark Blue)
     Overrides Metronic's default #009ef7 with Sparkus dark navy
     Gradient version (#0f2438 → #3d6f94) applied to .btn-primary below
     ------------------------------------------------------------------- */
  --bs-primary:         var(--sp-blue-800);  /* #0f2438 */
  --bs-primary-rgb:     15, 36, 56;
  --bs-primary-active:  var(--sp-blue-900);  /* #041624 */
  --bs-primary-light:   var(--sp-blue-50);   /* #f0f5fa */
  --bs-primary-inverse: #ffffff;

  /* -------------------------------------------------------------------
     SEMANTIC COLORS
     ------------------------------------------------------------------- */
  --bs-success:         var(--sp-success);
  --bs-success-rgb:     16, 185, 129;
  --bs-success-active:  #059669;
  --bs-success-light:   #ecfdf5;

  --bs-warning:         var(--sp-warning);
  --bs-warning-rgb:     245, 158, 11;
  --bs-warning-active:  #d97706;
  --bs-warning-light:   #fffbeb;

  --bs-danger:          var(--sp-danger);
  --bs-danger-rgb:      239, 68, 68;
  --bs-danger-active:   #dc2626;
  --bs-danger-light:    #fef2f2;

  --bs-info:            var(--sp-blue-400);
  --bs-info-rgb:        94, 146, 184;
  --bs-info-active:     var(--sp-blue-500);
  --bs-info-light:      var(--sp-blue-50);

  /* -------------------------------------------------------------------
     GRAY SCALE (100% Sparkus blue-tinted — no desaturated gaps)
     All 9 levels mapped to --sp-blue-* for cohesive blue-tinted UI
     ------------------------------------------------------------------- */
  --bs-gray-100: var(--sp-blue-50);   /* #f0f5fa — backgrounds */
  --bs-gray-200: var(--sp-blue-100);  /* #e1ebf4 — borders */
  --bs-gray-300: var(--sp-blue-200);  /* #c3d7e9 — disabled */
  --bs-gray-400: var(--sp-blue-300);  /* #94b8d4 — placeholders */
  --bs-gray-500: var(--sp-blue-400);  /* #5e92b8 — muted icons */
  --bs-gray-600: var(--sp-blue-500);  /* #3d6f94 — muted text */
  --bs-gray-700: var(--sp-blue-600);  /* #2d5573 — secondary text */
  --bs-gray-800: var(--sp-blue-700);  /* #1e3a52 — dark text */
  --bs-gray-900: var(--sp-blue-800);  /* #0f2438 — headings */

  /* -------------------------------------------------------------------
     BODY COLORS
     ------------------------------------------------------------------- */
  --bs-body-color:      var(--sp-text-primary);
  --bs-body-bg:         var(--sp-body-bg);
  --bs-text-muted:      var(--sp-blue-400);  /* #5e92b8 — blue-tinted muted */

  /* -------------------------------------------------------------------
     BORDER RADIUS (Sparkus uses tighter rounding than Metronic defaults)
     Source: 06-DESIGN-SYSTEM-ALIGNMENT.md §5
     ------------------------------------------------------------------- */
  --bs-border-radius:     var(--sp-radius-md);   /* 4px */
  --bs-border-radius-sm:  var(--sp-radius-sm);   /* 2px */
  --bs-border-radius-lg:  var(--sp-radius-xl);   /* 8px */
  --bs-border-radius-xl:  var(--sp-radius-2xl);  /* 12px */
  --bs-card-border-radius: var(--sp-radius-xl);  /* 8px — cards */

  /* -------------------------------------------------------------------
     SHADOWS (Blue-tinted for Sparkus brand warmth)
     Source: 06-DESIGN-SYSTEM-ALIGNMENT.md §6
     ------------------------------------------------------------------- */
  --bs-box-shadow:    var(--sp-shadow-sm);
  --bs-box-shadow-sm: var(--sp-shadow-xs);
  --bs-box-shadow-lg: var(--sp-shadow-lg);

  /* -------------------------------------------------------------------
     TYPOGRAPHY (Stag Sans body, Stag headings)
     Source: 06-DESIGN-SYSTEM-ALIGNMENT.md §3
     ------------------------------------------------------------------- */
  --bs-body-font-family: var(--sp-font-family-body);
}


/* ========================================================================
   SECTION 3: DARK MODE BRIDGE
   Unifies Metronic's [data-bs-theme="dark"] with Sparkus dark tokens.
   Source: 06-DESIGN-SYSTEM-ALIGNMENT.md §2.3, 05-METRONIC-LAYOUT-STRATEGY.md §3
   ======================================================================== */
[data-bs-theme="dark"] {
  /* -------------------------------------------------------------------
     SPARKUS TOKENS (Dark Mode)
     ------------------------------------------------------------------- */
  --sp-blue-50:  #0a1929;
  --sp-blue-100: #0f2438;
  --sp-blue-200: #1e3a52;
  --sp-blue-300: #2d5573;
  --sp-blue-400: #3d6f94;
  --sp-blue-500: #5e92b8;
  --sp-blue-600: #94b8d4;
  --sp-blue-700: #c3d7e9;
  --sp-blue-800: #e1ebf4;
  --sp-blue-900: #f0f5fa;

  --sp-success:       #34d399;
  --sp-success-light: rgba(52, 211, 153, 0.15);
  --sp-warning:       #fbbf24;
  --sp-warning-light: rgba(251, 191, 36, 0.15);
  --sp-danger:        #f87171;
  --sp-danger-light:  rgba(248, 113, 113, 0.15);
  --sp-info:          #60a5fa;
  --sp-info-light:    rgba(96, 165, 250, 0.15);

  --sp-body-bg:     #0f172a;
  --sp-card-bg:     #1e293b;
  --sp-card-border: rgba(148, 184, 212, 0.12);

  --sp-text-primary:   #e1ebf4;
  --sp-text-secondary: #94b8d4;
  --sp-text-muted:     #5e92b8;
  --sp-text-light:     #3d6f94;

  --sp-shadow-xs:   0 1px 2px rgba(0, 0, 0, 0.2);
  --sp-shadow-sm:   0 1px 3px rgba(0, 0, 0, 0.25), 0 1px 2px rgba(0, 0, 0, 0.2);
  --sp-shadow-md:   0 4px 8px rgba(0, 0, 0, 0.3), 0 2px 4px rgba(0, 0, 0, 0.2);
  --sp-shadow-lg:   0 12px 24px rgba(0, 0, 0, 0.35), 0 4px 8px rgba(0, 0, 0, 0.2);
  --sp-shadow-xl:   0 20px 40px rgba(0, 0, 0, 0.4), 0 8px 16px rgba(0, 0, 0, 0.25);
  --sp-shadow-card: 0 2px 8px rgba(0, 0, 0, 0.25), 0 1px 2px rgba(0, 0, 0, 0.2);

  /* -------------------------------------------------------------------
     BOOTSTRAP OVERRIDES (Dark Mode)
     All grays use inverted Sparkus blue-tinted tokens (set above)
     ------------------------------------------------------------------- */
  --bs-body-bg:     var(--sp-body-bg);       /* dark: #0f172a */
  --bs-body-color:  var(--sp-text-primary);  /* dark: #e1ebf4 */

  --bs-gray-100: var(--sp-blue-50);   /* dark: #0a1929 */
  --bs-gray-200: var(--sp-blue-100);  /* dark: #0f2438 */
  --bs-gray-300: var(--sp-blue-200);  /* dark: #1e3a52 */
  --bs-gray-400: var(--sp-blue-300);  /* dark: #2d5573 */
  --bs-gray-500: var(--sp-blue-400);  /* dark: #3d6f94 */
  --bs-gray-600: var(--sp-blue-500);  /* dark: #5e92b8 */
  --bs-gray-700: var(--sp-blue-600);  /* dark: #94b8d4 */
  --bs-gray-800: var(--sp-blue-700);  /* dark: #c3d7e9 */
  --bs-gray-900: var(--sp-blue-800);  /* dark: #e1ebf4 */

  --bs-primary:       var(--sp-blue-500);  /* dark: #5e92b8 — lighter for contrast */
  --bs-primary-rgb:   94, 146, 184;
  --bs-primary-light: rgba(94, 146, 184, 0.15);
  --bs-primary-active: var(--sp-blue-600); /* dark: #94b8d4 */

  --bs-success:       #34d399;
  --bs-success-light: rgba(52, 211, 153, 0.15);
  --bs-warning:       #fbbf24;
  --bs-warning-light: rgba(251, 191, 36, 0.15);
  --bs-danger:        #f87171;
  --bs-danger-light:  rgba(248, 113, 113, 0.15);

  --bs-card-bg:           var(--sp-card-bg);      /* dark: #1e293b */
  --bs-card-border-color: var(--sp-card-border);   /* dark: rgba(148,184,212,0.12) */

  --bs-text-muted:    var(--sp-text-muted);  /* dark: #5e92b8 */
  --bs-box-shadow:    var(--sp-shadow-sm);
  --bs-box-shadow-sm: var(--sp-shadow-xs);
  --bs-box-shadow-lg: var(--sp-shadow-lg);

  /* Dark mode accent stays the same red gradient */
  --sp-accent:          #f87171;
  --sp-accent-end:      #fb923c;
  --sp-accent-rgb:      248, 113, 113;
  --sp-accent-lighter:  rgba(248, 113, 113, 0.12);
  --sp-accent-gradient: linear-gradient(135deg, #f87171 0%, #fb923c 100%);
  --sp-primary-gradient: linear-gradient(135deg, var(--sp-blue-400) 0%, var(--sp-blue-600) 100%);
}


/* ========================================================================
   SECTION 4: TYPOGRAPHY OVERRIDES
   Apply Stag / Stag Sans to Panel elements.
   Source: 06-DESIGN-SYSTEM-ALIGNMENT.md §3.2
   ======================================================================== */

/* Headings use Stag (serif display) for brand personality */
h1, h2, h3,
.fs-1, .fs-2, .fs-3,
.card-title .card-label {
  font-family: var(--sp-font-family-heading);
  letter-spacing: -0.01em;
}

/* Data/stat numbers use tabular figures */
.fs-2hx, .fs-2x, .fs-3x,
.stat-number, [data-stat-value],
[data-kt-countup] {
  font-variant-numeric: tabular-nums;
  font-family: var(--sp-font-family-body);
  font-weight: 700;
}

/* Monospace for code/technical content */
code, pre, .font-mono, .badge-code {
  font-family: var(--sp-font-family-mono);
}


/* ========================================================================
   SECTION 5: CARD SHADOW OVERRIDES
   Source: 06-DESIGN-SYSTEM-ALIGNMENT.md §6
   ======================================================================== */
.card {
  box-shadow: var(--sp-shadow-xs);
}

.card:hover {
  box-shadow: var(--sp-shadow-sm);
}

.card.card-flush {
  box-shadow: var(--sp-shadow-xs);
}

.card.card-flush:hover {
  box-shadow: var(--sp-shadow-sm);
}


/* ========================================================================
   SECTION 6: MODE-SPECIFIC ACCENT COLORS
   Each Panel mode has its own accent for sidebar highlights and contextual UI.
   Source: 06-DESIGN-SYSTEM-ALIGNMENT.md §2.4
   ======================================================================== */

/* Design Mode: Dark Blue (primary) */
[data-panel-mode="design"] {
  --mode-accent:        var(--sp-blue-800);
  --mode-accent-light:  var(--sp-blue-50);
  --mode-accent-rgb:    15, 36, 56;
}

/* Run Mode: Green */
[data-panel-mode="run"] {
  --mode-accent:        var(--sp-success);
  --mode-accent-light:  #ecfdf5;
  --mode-accent-rgb:    16, 185, 129;
}

/* Report Mode: Teal/Sky */
[data-panel-mode="report"] {
  --mode-accent:        #0ea5e9;
  --mode-accent-light:  #f0f9ff;
  --mode-accent-rgb:    14, 165, 233;
}

/* Atomic Mode: Deep Blue */
[data-panel-mode="atomic"] {
  --mode-accent:        var(--sp-blue-800);
  --mode-accent-light:  var(--sp-blue-50);
  --mode-accent-rgb:    15, 36, 56;
}


/* ========================================================================
   SECTION 7: COMPONENT SEMANTIC RULES
   Ensure consistent button/badge/alert colors using the Sparkus palette.
   Source: 06-DESIGN-SYSTEM-ALIGNMENT.md §8
   ======================================================================== */

/* Override Metronic's btn-primary with Sparkus dark blue gradient */
.btn-primary {
  --bs-btn-bg:           var(--sp-blue-800);  /* #0f2438 */
  --bs-btn-border-color: var(--sp-blue-800);
  --bs-btn-hover-bg:     var(--sp-blue-900);  /* #041624 */
  --bs-btn-hover-border-color: var(--sp-blue-900);
  --bs-btn-active-bg:    var(--sp-blue-900);
  --bs-btn-active-border-color: var(--sp-blue-900);
  background: var(--sp-primary-gradient) !important;
  border: none !important;
  transition: opacity 0.15s ease, box-shadow 0.15s ease;
}

.btn-primary:hover {
  opacity: 0.92;
  box-shadow: 0 4px 12px rgba(15, 36, 56, 0.3);
}

.btn-light-primary {
  --bs-btn-color:        var(--sp-blue-800);  /* #0f2438 */
  --bs-btn-bg:           var(--sp-blue-50);   /* #f0f5fa */
  --bs-btn-hover-color:  var(--sp-blue-900);  /* #041624 */
  --bs-btn-hover-bg:     var(--sp-blue-100);  /* #e1ebf4 */
}

/* Override link color to match Sparkus dark blue primary */
a {
  --bs-link-color-rgb: 15, 36, 56;        /* #0f2438 */
  --bs-link-hover-color-rgb: 4, 22, 36;   /* #041624 */
}

/* Accent button variant — red gradient for emphasis CTAs */
.btn-accent,
.btn-sp-accent {
  background: var(--sp-accent-gradient) !important;
  color: #ffffff !important;
  border: none !important;
  transition: opacity 0.15s ease, box-shadow 0.15s ease;
}

.btn-accent:hover,
.btn-sp-accent:hover {
  opacity: 0.92;
  box-shadow: 0 4px 12px rgba(217, 43, 49, 0.3);
}


/* ========================================================================
   SECTION 8: NAVBAR / HEADER POLISH
   Solid white background, subtle border, shadow on scroll.
   ======================================================================== */

.app-header {
  background-color: #ffffff !important;
  border-bottom: 1px solid var(--sp-blue-100);  /* #e1ebf4 */
}

/* Sticky/fixed header: add shadow for depth on scroll */
[data-kt-app-header-fixed="true"] .app-header,
[data-kt-app-header-sticky="on"] .app-header {
  box-shadow: 0 1px 3px rgba(15, 36, 56, 0.08), 0 1px 2px rgba(15, 36, 56, 0.04);
}

/* Navbar icon buttons: blue-tinted hover */
.app-navbar .btn-icon-muted {
  color: var(--sp-blue-400);  /* #5e92b8 */
}

.app-navbar .btn-icon-muted:hover,
.app-navbar .btn-active-light:hover {
  background-color: var(--sp-blue-50);  /* #f0f5fa */
  color: var(--sp-blue-800);  /* #0f2438 */
}

/* Dark mode header */
[data-bs-theme="dark"] .app-header {
  background-color: #0a1929 !important;
  border-bottom-color: var(--sp-blue-200);
}


/* ========================================================================
   SECTION 9: SIDEBAR POLISH
   Clean white sidebar with dark blue active accents.
   ======================================================================== */

.app-sidebar {
  background-color: #ffffff !important;
  border-right: 1px solid var(--sp-blue-100);  /* #e1ebf4 */
}

/* Logo area: subtle bottom border for separation */
.app-sidebar-logo {
  border-bottom: 1px solid var(--sp-blue-100);
}

/* Active menu link: dark blue primary */
[data-kt-app-layout="light-sidebar"] .app-sidebar .menu > .menu-item > .menu-link.active,
[data-kt-app-layout="light-sidebar"] .app-sidebar .menu-link.active {
  background-color: rgba(15, 36, 56, 0.06);
  color: var(--sp-blue-800);  /* #0f2438 */
  font-weight: 600;
}

[data-kt-app-layout="light-sidebar"] .app-sidebar .menu-link.active .menu-icon i,
[data-kt-app-layout="light-sidebar"] .app-sidebar .menu-link.active .menu-icon .ki-duotone {
  color: var(--sp-blue-800) !important;
}

/* Menu hover: subtle blue-gray lift */
[data-kt-app-layout="light-sidebar"] .app-sidebar .menu-link:hover:not(.active) {
  background-color: var(--sp-blue-50);  /* #f0f5fa */
}

/* Section headers: muted blue, uppercase */
.app-sidebar .menu-section {
  color: var(--sp-blue-400) !important;  /* #5e92b8 */
  font-size: 0.6875rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

/* Menu text default: dark blue-gray */
[data-kt-app-layout="light-sidebar"] .app-sidebar .menu-link .menu-title {
  color: var(--sp-blue-600);  /* #2d5573 */
}

[data-kt-app-layout="light-sidebar"] .app-sidebar .menu-link .menu-icon i {
  color: var(--sp-blue-400);  /* #5e92b8 */
}

/* Dark mode sidebar */
[data-bs-theme="dark"] .app-sidebar {
  background-color: #0a1929 !important;
  border-right-color: var(--sp-blue-200);
}


/* ========================================================================
   SECTION 9b: SIDEBAR MODE SWITCHER
   Mode switcher adapted for sidebar width context.
   ======================================================================== */

.sp-sidebar-mode-switcher {
  border-bottom: 1px solid var(--sp-blue-100);
}

/* Stack segment + atomic vertically in sidebar */
.sp-sidebar-mode-switcher .sp-segment-wrapper {
  width: 100%;
  flex-direction: column;
  gap: 6px;
}

/* Main 3-mode segment fills sidebar width */
.sp-sidebar-mode-switcher .sp-segment {
  width: 100%;
  height: 34px;
}

.sp-sidebar-mode-switcher .sp-segment__btn {
  flex: 1;
  min-width: auto;
  padding: 0 6px;
  font-size: 12px;
  gap: 4px;
}

.sp-sidebar-mode-switcher .sp-segment__icon {
  font-size: 13px;
}

/* Divider hidden in sidebar (vertical layout) */
.sp-sidebar-mode-switcher .sp-segment-divider {
  display: none;
}

/* Atomic segment: subtle row below */
.sp-sidebar-mode-switcher .sp-segment--atomic {
  width: 100%;
  height: 28px;
}

.sp-sidebar-mode-switcher .sp-segment__btn--atomic {
  min-width: auto;
  font-size: 11px;
  width: 100%;
}

/* Hide labels when sidebar is minimized — icons only */
.app-sidebar-minimize .sp-sidebar-mode-switcher .sp-segment__label {
  display: none;
}

/* Show in mobile drawer */
@media (max-width: 991.98px) {
  .sp-sidebar-mode-switcher .sp-segment-wrapper {
    display: flex;
  }
  .sp-sidebar-mode-switcher .sp-segment__label {
    display: inline;
  }
}


/* ========================================================================
   SECTION 10: FORM INPUT POLISH
   Inputs visually distinct from card backgrounds with accent focus rings.
   ======================================================================== */

/* Form controls: subtle blue border + light blue background */
.form-control.form-control-solid,
.form-select.form-select-solid {
  background-color: var(--sp-blue-50) !important;   /* #f0f5fa */
  border: 1px solid var(--sp-blue-200) !important;  /* #c3d7e9 */
  color: var(--sp-blue-800);  /* #0f2438 */
  transition: border-color 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease;
}

/* Focus: Sparkus Red accent ring (matches Platform Design System) */
.form-control.form-control-solid:focus,
.form-select.form-select-solid:focus {
  border-color: rgba(217, 43, 49, 0.5) !important;
  box-shadow: 0 0 0 3px rgba(217, 43, 49, 0.1) !important;
  background-color: #ffffff !important;
}

/* Placeholder text */
.form-control.form-control-solid::placeholder {
  color: var(--sp-blue-300);  /* #94b8d4 */
}

/* Disabled / readonly */
.form-control.form-control-solid:disabled,
.form-control.form-control-solid[readonly],
.form-select.form-select-solid:disabled {
  background-color: var(--sp-blue-100) !important;  /* #e1ebf4 */
  border-color: var(--sp-blue-100) !important;
  color: var(--sp-blue-400);  /* #5e92b8 */
  opacity: 0.7;
}

/* Dark mode form controls */
[data-bs-theme="dark"] .form-control.form-control-solid,
[data-bs-theme="dark"] .form-select.form-select-solid {
  background-color: var(--sp-blue-100) !important;
  border-color: var(--sp-blue-200) !important;
  color: var(--sp-text-primary);
}

[data-bs-theme="dark"] .form-control.form-control-solid:focus,
[data-bs-theme="dark"] .form-select.form-select-solid:focus {
  background-color: var(--sp-blue-50) !important;
}

/* Form labels: consistent weight */
.form-label {
  color: var(--sp-blue-700);  /* #1e3a52 */
  font-weight: 600;
}


/* ========================================================================
   SECTION 11: REDUCED MOTION
   Respect user's motion preferences for transitions defined in tokens.
   ======================================================================== */
@media (prefers-reduced-motion: reduce) {
  :root {
    --sp-transition-fast:   0ms;
    --sp-transition-base:   0ms;
    --sp-transition-slow:   0ms;
    --sp-transition-smooth: 0ms;
  }
}