/**
 * CSS Variables and Theme
 * Centralized theme values and CSS custom properties
 */

:root {
  /* Primary Colors */
  --color-primary: #3b82f6;
  --color-primary-dark: #2563eb;
  --color-primary-gradient: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);

  /* Modal/dialog backdrop overlay scrim (light theme) — semi-transparent black. */
  --modal-overlay-bg: rgba(0, 0, 0, 0.45);

  /* Text Colors */
  --color-text-primary: #2c3e50;
  --color-text-secondary: #7f8c8d;
  --color-text-tertiary: #95a5a6;
  --color-text-muted: #6b7280;
  /* Chart card headings and nav chrome icons (WCAG on --color-bg-primary surfaces) */
  --color-chart-title: var(--color-text-primary);
  --color-icon-primary: var(--color-text-primary);

  /* Background Colors */
  --color-bg-primary: white;
  /* Dark-theme page shell gradient stops (layout.css) */
  --color-bg-dark-gradient-start: #0b1220;
  --color-bg-dark-gradient-end: #020617;
  /* Paper output and on-screen print preview */
  --print-paper-bg: #ffffff;
  /* Official letter background images (used by LetterPreview.vue) */
  --letter-bg-bw: url('/BnW.jpg');
  --letter-bg-color: url('/color.jpg');
  --color-bg-secondary: #f8f9fa;
  --color-bg-tertiary: #f0f4ff;
  /* Table/list row hover — visible lift from --color-bg-primary in both themes */
  --color-row-hover: #f1f5f9;
  /* Neutral form / narrative surfaces (no brand tint) */
  --color-bg-neutral-soft: #f8fafc;
  --color-bg-neutral-soft-active: #f1f5f9;
  --color-border-neutral: #e2e8f0;
  --color-bg-gradient: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
  
  /* Border Colors */
  --color-border: #e6eaf2;
  --color-border-light: #ecf0f1;
  --color-border-medium: #e6eaf2;
  --color-border-dark: #d1d5db;

  /* Sidebar header: full-width branding strip (unified across sections) */
  --sidebar-branding-title: #1a3b5d;
  --sidebar-branding-border: var(--color-border-light);
  
  /* Danger / Destructive action (delete, remove, etc.) */
  --color-danger: #ef4444;
  --color-danger-dark: #dc2626;
  --color-danger-bg: #fef2f2;
  --color-danger-text-on: #ffffff;
  /* Alias for semantic "error" state (forms, validation) — same as danger */
  --color-error: var(--color-danger);

  /* Success / positive actions (approve, confirm, active) */
  --color-success: #22c55e;
  --color-success-dark: #16a34a;
  --color-success-bg: #dcfce7;
  --color-success-text: #166534;
  --color-success-text-on: #ffffff;

  /* Warning / attention */
  --color-warning: #f59e0b;
  --color-warning-dark: #d97706;
  --color-warning-bg: #fef3c7;
  --color-warning-text: #92400e;

  /* Info / informational chips */
  --color-info: #3b82f6;
  --color-info-dark: #2563eb;
  --color-info-bg: #eff6ff;
  --color-info-text: #1e40af;

  /* Text and icons on primary / saturated surfaces */
  --color-on-primary: #ffffff;
  --color-text-on-primary: var(--color-on-primary);
  --color-error-bg: var(--color-danger-bg);
  --color-error-text: var(--status-error-text);
  --color-overlay: var(--overlay-bg);
  --status-partial-bg-hover: #fff2e3;
  --section-border-light: var(--color-border-light);
  --admin-theme-list-hover-bg: rgba(255, 255, 255, 0.5);
  --admin-theme-list-active-bg: rgba(255, 255, 255, 0.7);
  --shadow-swatch: 0 1px 3px rgba(0, 0, 0, 0.2);
  --shadow-swatch-sm: 0 1px 2px rgba(0, 0, 0, 0.2);
  --shadow-text-outline: 0 0 2px rgba(0, 0, 0, 0.5);
  --overlay-light-border: rgba(255, 255, 255, 0.4);
  --preview-surface: var(--print-paper-bg);

  /* Decorative header confetti (theme-aware tints) */
  --header-confetti-1: #fff3a3;
  --header-confetti-2: #ffe1ff;
  --header-confetti-3: #b1f5ff;
  --header-confetti-4: #ffd0d0;

  /* Status Colors */
  --color-status-completed: #155724;
  --color-status-completed-bg: #d4edda;
  --color-status-in-progress: #004085;
  --color-status-in-progress-bg: #cce5ff;
  --color-status-pending: #856404;
  --color-status-pending-bg: #fff3cd;
  --color-status-cancelled: #721c24;
  --color-status-cancelled-bg: #f8d7da;

  /* Unified Status Colors - Used across Payments, Penalties, and other components */
  /* Paid/Completed Status - Green */
  --status-paid-bg: #E8F5E9;
  --status-paid-text: #2E7D32;
  --status-paid-border: #4CAF50;
  --status-paid-icon: #4CAF50;
  --status-paid-glow: rgba(76, 175, 80, 0.5);

  /* Unpaid/Pending Status - Red */
  --status-unpaid-bg: #FFEBEE;
  --status-unpaid-text: #C62828;
  --status-unpaid-border: #F44336;
  --status-unpaid-icon: #F44336;
  /* Glow for status dots / module indicators (pairs with --status-paid-glow / --status-partial-glow) */
  --status-unpaid-glow: rgba(244, 67, 54, 0.45);

  /* Partial/In Progress Status - Orange */
  --status-partial-bg: #FFF3E0;
  --status-partial-text: #E65100;
  --status-partial-border: #FF9800;
  --status-partial-icon: #FF9800;
  --status-partial-glow: rgba(255, 152, 0, 0.5);

  /* Overdue Status - Dark Orange */
  --status-overdue-bg: #FFF3E0;
  --status-overdue-text: #E65100;
  --status-overdue-border: #FF6F00;
  --status-overdue-icon: #FF6F00;

  /* Waived/Cancelled Status - Purple */
  --status-waived-bg: #F3E5F5;
  --status-waived-text: #7B1FA2;
  --status-waived-border: #9C27B0;
  --status-waived-icon: #9C27B0;

  /* Unknown/Default Status - Gray */
  --status-unknown-bg: #F5F5F5;
  --status-unknown-text: #616161;
  --status-unknown-border: #9E9E9E;
  --status-unknown-icon: #9E9E9E;

  /* Direct orders: initial vs final linking value variance */
  --linking-variance-under-text: var(--status-paid-text);
  --linking-variance-exact-text: var(--status-partial-text);
  --linking-variance-over-text: var(--status-unpaid-text);

  /* Health/System Status - Used in Admin, Monitoring */
  --status-healthy: #10b981;
  --status-healthy-bg: #d1fae5;
  --status-healthy-text: #065f46;
  --status-warning: #f59e0b;
  --status-warning-bg: #fef3c7;
  --status-warning-text: #92400e;
  --status-error: #ef4444;
  --status-error-bg: #fee2e2;
  --status-error-text: #991b1b;
  
  /* Admin Colors - Blue Color Scheme */
  --admin-primary: #1e40af;
  --admin-primary-light: #3b82f6;
  --admin-primary-dark: #1e3a8a;
  --admin-bg-light: #dbeafe;
  --admin-bg-lighter: #f0f9ff;
  --admin-border: #e0e7ff;
  --admin-gradient: linear-gradient(135deg, #1e40af 0%, #3b82f6 100%);
  /* Admin sidebar chrome (overlays on gradient); JS may override --admin-text-on-primary / --admin-shadow */
  --admin-text-on-primary: #ffffff;
  --admin-shadow: var(--shadow-sm);
  --admin-sidebar-header-border: color-mix(in srgb, var(--admin-text-on-primary) 20%, transparent);
  --admin-nav-item-hover-overlay: color-mix(in srgb, var(--admin-text-on-primary) 15%, transparent);
  --admin-nav-item-active-overlay: color-mix(in srgb, var(--admin-text-on-primary) 25%, transparent);
  /* Admin dashboard / monitoring chrome on gradient headers */
  --admin-chrome-text-high: color-mix(in srgb, var(--admin-text-on-primary) 95%, transparent);
  --admin-chrome-bg-subtle: color-mix(in srgb, var(--admin-text-on-primary) 12%, transparent);
  --admin-chrome-bg-medium: color-mix(in srgb, var(--admin-text-on-primary) 8%, transparent);
  --admin-chrome-border-subtle: color-mix(in srgb, var(--admin-text-on-primary) 18%, transparent);
  --admin-chrome-border-medium: color-mix(in srgb, var(--admin-text-on-primary) 25%, transparent);
  --admin-primary-lighter: #60a5fa;
  --admin-border-light: rgba(30, 64, 175, 0.12);
  --admin-border-muted: #cbd5e1;
  --admin-shadow-hover: rgba(30, 64, 175, 0.2);
  --admin-elevation-sm: 0 2px 8px var(--admin-shadow-hover);
  --admin-elevation-md: 0 4px 10px var(--admin-shadow-hover);
  --admin-elevation-lg: 0 6px 16px var(--admin-shadow-hover);
  --admin-elevation-chart: 0 2px 10px var(--admin-shadow-hover);
  --admin-text-primary: #1e293b;
  --admin-text-secondary: #64748b;
  --admin-text-muted: #94a3b8;
  --admin-surface: #ffffff;
  --admin-surface-muted: #f8fafc;
  --admin-bg-page: var(--admin-bg-lighter);
  --admin-bg-surface: var(--admin-bg-light);
  --admin-bg-hover: #f1f5f9;
  --admin-bg-disabled: #f9fafb;
  --admin-kpi-surface: linear-gradient(135deg, var(--admin-bg-light) 0%, var(--admin-bg-lighter) 100%);
  --admin-success-soft: #e0fdf8;
  --admin-success-soft-2: #c7f9ee;
  --admin-success-border: #22d3ee;
  --admin-info-soft: #e0f7ff;
  --admin-info-soft-2: #c7efff;
  --admin-info-border: #67e8f9;
  --admin-info-soft-hover: #e0f2fe;
  --admin-danger-soft: #ffecec;
  --admin-danger-soft-2: #ffd8d8;
  --admin-danger-border: #f87171;
  --admin-danger-text: #991b1b;
  --admin-warning-soft: #fffbeb;
  --admin-warning-border: #fbbf24;
  /* Admin logs table action badges */
  --log-action-click-bg: var(--status-healthy-bg);
  --log-action-click-text: var(--status-healthy-text);
  --log-action-browse-bg: var(--admin-info-soft-hover);
  --log-action-browse-text: var(--color-info-text);
  --log-action-edit-bg: var(--status-warning-bg);
  --log-action-edit-text: var(--status-warning-text);
  --log-action-error-bg: var(--status-error-bg);
  --log-action-error-text: var(--status-error-text);
  --status-paid-gradient: linear-gradient(135deg, var(--status-healthy-bg) 0%, var(--status-healthy) 100%);
  --status-unpaid-gradient: linear-gradient(135deg, var(--status-unpaid-bg) 0%, var(--status-unpaid-border) 100%);
  /* Short aliases for equipment / auctions / price-quotes (themeInitializer keys eq, au, pq) */
  --eq-primary: var(--equipment-primary);
  --eq-primary-light: var(--equipment-primary-light);
  --eq-primary-dark: var(--equipment-primary-dark);
  --eq-bg-light: var(--equipment-bg-light);
  --eq-border: var(--equipment-border);
  --eq-gradient: var(--equipment-gradient);
  --eq-text-on-primary: var(--equipment-text-on-primary);
  --au-primary: var(--auctions-primary);
  --au-primary-light: var(--auctions-primary-light);
  --au-primary-dark: var(--auctions-primary-dark);
  --au-bg-light: var(--auctions-bg-light);
  --au-border: var(--auctions-border);
  --au-gradient: var(--auctions-gradient);
  --au-text-on-primary: var(--auctions-text-on-primary);
  --pq-primary: var(--price-quotes-primary);
  --pq-primary-light: var(--price-quotes-primary-light);
  --pq-primary-dark: var(--price-quotes-primary-dark);
  --pq-bg-light: var(--price-quotes-bg-light);
  --pq-border: var(--price-quotes-border);
  --pq-gradient: var(--price-quotes-gradient);
  --pq-text-on-primary: var(--price-quotes-text-on-primary);

  /* Section shell: physical-right icon rail + centered main column (see layout.css .section-shell-main) */
  --shell-rail-width: 80px;
  --shell-rail-width-mobile: 70px;
  --shell-content-max-width: 1400px;
  --shell-main-padding-inline: clamp(0.75rem, 2.2vw, 1.75rem);
  
  /* Section-specific color schemes - Auto-calculated from primary colors */
  /* These are set dynamically via JavaScript, defaults provided here */
  
  /* Tenders Section (t) */
  /* Note: These defaults are overridden by JavaScript when theme loads */
  /* Default is set to match common saved theme, but will be updated dynamically */
  --tenders-primary: #10b981;
  --tenders-primary-light: #34d399;
  --tenders-primary-dark: #059669;
  --tenders-primary-lighter: #6ee7b7;
  --tenders-bg-light: rgba(16, 185, 129, 0.1);
  --tenders-bg-lighter: rgba(16, 185, 129, 0.05);
  --tenders-border: rgba(16, 185, 129, 0.2);
  --tenders-border-light: rgba(16, 185, 129, 0.1);
  --tenders-shadow: rgba(16, 185, 129, 0.1);
  --tenders-shadow-hover: rgba(16, 185, 129, 0.2);
  --tenders-gradient: linear-gradient(135deg, #10b981 0%, #059669 100%);
  --tenders-text-on-primary: #ffffff;
  --tenders-text-primary: #2c3e50;
  --tenders-text-secondary: #666666;
  
  /* Direct Orders Section (do) */
  --direct-orders-primary: #ef4444;
  --direct-orders-primary-light: #f87171;
  --direct-orders-primary-dark: #dc2626;
  --direct-orders-primary-lighter: #fca5a5;
  --direct-orders-bg-light: rgba(239, 68, 68, 0.1);
  --direct-orders-bg-lighter: rgba(239, 68, 68, 0.05);
  --direct-orders-border: rgba(239, 68, 68, 0.2);
  --direct-orders-border-light: rgba(239, 68, 68, 0.1);
  --direct-orders-shadow: rgba(239, 68, 68, 0.1);
  --direct-orders-shadow-hover: rgba(239, 68, 68, 0.2);
  --direct-orders-gradient: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
  --direct-orders-text-on-primary: #ffffff;
  --direct-orders-text-primary: #2c3e50;
  --direct-orders-text-secondary: #666666;
  
  /* Follow-up Section (fu) */
  --followup-primary: #3b82f6;
  --followup-primary-light: #60a5fa;
  --followup-primary-dark: #2563eb;
  --followup-primary-lighter: #93c5fd;
  --followup-bg-light: rgba(59, 130, 246, 0.1);
  --followup-bg-lighter: rgba(59, 130, 246, 0.05);
  --followup-border: rgba(59, 130, 246, 0.2);
  --followup-border-light: rgba(59, 130, 246, 0.1);
  --followup-shadow: rgba(59, 130, 246, 0.1);
  --followup-shadow-hover: rgba(59, 130, 246, 0.2);
  --followup-gradient: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
  --followup-text-on-primary: #ffffff;
  --followup-text-primary: #2c3e50;
  --followup-text-secondary: #666666;
  
  /* General Section (g) */
  --general-primary: #3b82f6;
  --general-primary-light: #60a5fa;
  --general-primary-dark: #2563eb;
  --general-primary-lighter: #93c5fd;
  --general-bg-light: rgba(59, 130, 246, 0.1);
  --general-bg-lighter: rgba(59, 130, 246, 0.05);
  --general-border: rgba(59, 130, 246, 0.2);
  --general-border-light: rgba(59, 130, 246, 0.1);
  --general-shadow: rgba(59, 130, 246, 0.1);
  --general-shadow-hover: rgba(59, 130, 246, 0.2);
  --general-gradient: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
  --general-text-on-primary: #ffffff;
  --general-text-primary: #2c3e50;
  --general-text-secondary: #666666;
  --letter-stamp-value-text-shadow: 0 0 2px color-mix(in srgb, var(--color-bg-primary) 98%, transparent), 0 0 5px color-mix(in srgb, var(--color-bg-primary) 85%, transparent), 0 1px 0 color-mix(in srgb, var(--color-bg-primary) 60%, transparent);

  /* Management Section (m) */
  --management-primary: #6366f1;
  --management-primary-light: #818cf8;
  --management-primary-dark: #4f46e5;
  --management-primary-lighter: #a5b4fc;
  --management-bg-light: rgba(99, 102, 241, 0.1);
  --management-bg-lighter: rgba(99, 102, 241, 0.05);
  --management-border: rgba(99, 102, 241, 0.2);
  --management-border-light: rgba(99, 102, 241, 0.1);
  --management-shadow: rgba(99, 102, 241, 0.1);
  --management-shadow-hover: rgba(99, 102, 241, 0.2);
  --management-gradient: linear-gradient(135deg, #6366f1 0%, #4f46e5 100%);
  --management-text-on-primary: #ffffff;
  --management-text-primary: #2c3e50;
  --management-text-secondary: #666666;
  --m-primary: var(--management-primary);
  --m-primary-light: var(--management-primary-light);
  --m-primary-dark: var(--management-primary-dark);
  --m-primary-lighter: var(--management-primary-lighter);
  --m-bg-light: var(--management-bg-light);
  --m-bg-lighter: var(--management-bg-lighter);
  --m-border: var(--management-border);
  --m-border-light: var(--management-border-light);
  --m-shadow: var(--management-shadow);
  --m-shadow-hover: var(--management-shadow-hover);
  --m-gradient: var(--management-gradient);
  --m-text-on-primary: var(--management-text-on-primary);
  --m-text-primary: var(--management-text-primary);
  --m-text-secondary: var(--management-text-secondary);
  
  /* Committee Meetings Colors (cm) - Orange Color Scheme */
  --cm-primary: #ff8c00;
  --cm-primary-light: #ffa500;
  --cm-primary-dark: #ff6b00;
  --cm-primary-lighter: #ffb347;
  --cm-bg-light: rgba(255, 140, 0, 0.1);
  --cm-bg-lighter: rgba(255, 140, 0, 0.05);
  --cm-border: rgba(255, 140, 0, 0.2);
  --cm-border-light: rgba(255, 140, 0, 0.1);
  --cm-shadow: rgba(255, 140, 0, 0.1);
  --cm-shadow-hover: rgba(255, 140, 0, 0.2);
  --cm-gradient: linear-gradient(135deg, #ff8c00 0%, #ff6b00 100%);
  --cm-text-on-primary: #ffffff;
  --cm-text-primary: #2c3e50;
  --cm-text-secondary: #666666;

  /* Equipment Section (eq) — Emerald; overridden by themeInitializer */
  --equipment-primary: #059669;
  --equipment-primary-light: #10b981;
  --equipment-primary-dark: #047857;
  --equipment-primary-lighter: #34d399;
  --equipment-bg-light: rgba(5, 150, 105, 0.1);
  --equipment-bg-lighter: rgba(5, 150, 105, 0.05);
  --equipment-border: rgba(5, 150, 105, 0.2);
  --equipment-border-light: rgba(5, 150, 105, 0.1);
  --equipment-shadow: rgba(5, 150, 105, 0.1);
  --equipment-shadow-hover: rgba(5, 150, 105, 0.2);
  --equipment-gradient: linear-gradient(135deg, #059669 0%, #047857 100%);
  --equipment-text-on-primary: #ffffff;
  --equipment-text-primary: #2c3e50;
  --equipment-text-secondary: #666666;

  /* Auctions Section (au) — Violet */
  --auctions-primary: #7c3aed;
  --auctions-primary-light: #8b5cf6;
  --auctions-primary-dark: #6d28d9;
  --auctions-primary-lighter: #a78bfa;
  --auctions-bg-light: rgba(124, 58, 237, 0.1);
  --auctions-bg-lighter: rgba(124, 58, 237, 0.05);
  --auctions-border: rgba(124, 58, 237, 0.2);
  --auctions-border-light: rgba(124, 58, 237, 0.1);
  --auctions-shadow: rgba(124, 58, 237, 0.1);
  --auctions-shadow-hover: rgba(124, 58, 237, 0.2);
  --auctions-gradient: linear-gradient(135deg, #7c3aed 0%, #6d28d9 100%);
  --auctions-text-on-primary: #ffffff;
  --auctions-text-primary: #2c3e50;
  --auctions-text-secondary: #666666;

  /* Price Quotes Section (pq) — Teal */
  --price-quotes-primary: #0d9488;
  --price-quotes-primary-light: #14b8a6;
  --price-quotes-primary-dark: #0f766e;
  --price-quotes-primary-lighter: #2dd4bf;
  --price-quotes-bg-light: rgba(13, 148, 136, 0.1);
  --price-quotes-bg-lighter: rgba(13, 148, 136, 0.05);
  --price-quotes-border: rgba(13, 148, 136, 0.2);
  --price-quotes-border-light: rgba(13, 148, 136, 0.1);
  --price-quotes-shadow: rgba(13, 148, 136, 0.1);
  --price-quotes-shadow-hover: rgba(13, 148, 136, 0.2);
  --price-quotes-gradient: linear-gradient(135deg, #0d9488 0%, #0f766e 100%);
  --price-quotes-text-on-primary: #ffffff;
  --price-quotes-text-primary: #2c3e50;
  --price-quotes-text-secondary: #666666;
  
  /* Typography (centralized; components reference these instead of hardcoded stacks) */
  --font-family-sans: 'Noto Sans Arabic', 'Segoe UI', Tahoma, Arial, sans-serif;
  --font-family-print: 'Noto Sans Arabic', Arial, sans-serif;

  /* Spacing */
  --spacing-xs: 4px;
  --spacing-sm: 8px;
  --spacing-md: 15px;
  --spacing-lg: 20px;
  --spacing-xl: 30px;
  --spacing-2xl: 40px;
  
  /* Border Radius */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 15px;
  --radius-xl: 20px;
  --radius-full: 999px;

  /* TASK-CUR-REQUESTEDITOR-HARDCODING: shared content max-width tokens.
     These are the page-level containers used by section detail views. */
  --content-max-width-xl: 1400px;
  /* TASK-CUR-CSS-MISSING-TOKENS: add the rest of the section-detail
     content-max-width / modal / label-column / typography / radius /
     spacing tokens that the dark theme block already defines (lines 822+).
     Purely layout/typography tokens get the same value in both themes. */
  --content-max-width-lg: 1200px;
  --content-max-width-md: 960px;
  --content-max-width-sm: 900px;
  --modal-max-width: 500px;
  --modal-width-percent: 90%;
  --min-width-control: 8rem;
  --detail-label-col: 160px;
  --detail-label-col-min: 140px;
  --detail-label-col-max: 220px;
  --font-size-xs: 0.8rem;
  --font-size-lg: 1.1rem;
  --font-size-md-plus: 1.05rem;
  --font-size-xl: 1.5rem;
  --font-size-2xl: 3rem;
  --line-height-relaxed: 1.6;
  --radius-pill: 999px;
  --detail-grid-template: minmax(140px, 220px) 1fr;
  --comm-row-template: minmax(120px, 200px) 1fr;
  --comm-row-template: minmax(120px, 200px) 1fr;
  --spacing-section-empty: 60px;

  /* TASK-CUR-PRINTCONTROL-HARDCODING: print panel sizing tokens.
     Used by the PrintControl side panel to keep the layout consistent
     across sections. */
  --print-panel-min-height: 600px;
  --print-panel-max-width: 960px;

  /* TASK-CUR-ADMIN-CSS-RAW-VALUES: shared sizing tokens for the
     admin dashboards (ExternalEntitiesAdmin, AdminContainersControl,
     AdminAgentCapabilities). Centralized here so the same values are
     reused across all admin pages. */
  --radius-xs: 6px;
  --spacing-3: 12px;        /* between --spacing-sm(8) and --spacing-md(15) */
  --spacing-2-5: 10px;      /* between --spacing-sm(8) and --spacing-3(12); header-actions and timeline rows */
  --spacing-4: 1rem;        /* 16px — between --spacing-3(12) and --spacing-md(15) */
  --spacing-5: 24px;        /* between --spacing-lg(20) and --spacing-xl(30) */
  --spacing-6: 1.5rem;      /* 24px — page-level section gap */
  --spacing-1-5: 6px;       /* tiny inline gap = 0.4rem */
  --spacing-1-25: 5px;      /* compact button gap = 0.35rem */
  --spacing-half: 0.15rem;  /* compact inline padding (badges, code chips) */
  --font-size-md-minus: 0.95rem;
  --font-size-2xs: 0.75rem;
  --line-height-normal: 1.5;
  --admin-port-grid-min: 300px;
  --admin-input-max-width: 280px;
  --admin-modal-max-width: 32rem;
  --admin-grid-min: 200px;
  --admin-pad-cell-y: 0.65rem;
  --admin-icon-size-sm: 1.35rem;
  --admin-icon-size-md: 1.6rem;
  --admin-dot-size: 0.65rem;
  --admin-page-icon-size: 1.75rem;
  --z-index-modal-overlay: 10000; /* TASK-CUR-ADMIN-CSS-RAW-VALUES: high-stacked admin modal overlay */
  --border-width-hairline: 1px;   /* TASK-CUR-ADMIN-CSS-RAW-VALUES: thin UI borders */
  --border-width-thick: 4px;      /* TASK-CUR-ADMIN-CSS-RAW-VALUES: alert bar inline-start */
  --admin-modal-breakpoint: 640px; /* TASK-CUR-ADMIN-CSS-RAW-VALUES: ExternalEntities modal breakpoint */
  --admin-filter-grow-min: 12rem;  /* TASK-CUR-ADMIN-CSS-RAW-VALUES: filter-grow min-width */
  --admin-audit-list-max-height: 240px; /* TASK-CUR-ADMIN-MAGIC-NUMBERS: mutation-audit scroll list */

  /* Shadows */
  --shadow-sm: 0 2px 4px rgba(0,0,0,0.1);
  --shadow-md: 0 5px 15px rgba(0,0,0,0.1);
  /* Section hover shadow (overridden per section by theme) */
  --section-shadow-hover: 0 4px 12px rgba(0,0,0,0.15);
  --shadow-lg: 0 10px 30px rgba(0,0,0,0.2);
  --shadow-xl: 0 15px 35px rgba(0,0,0,0.08);
  --shadow-card: 0 4px 6px rgba(0,0,0,0.05);
  --shadow-subtle: 0 2px 4px rgba(0,0,0,0.05);
  /* Section KPI / form cards (dashboard lists) */
  --shadow-card-raised: 0 2px 8px rgba(0, 0, 0, 0.1);
  /* Modals and elevated panels */
  --shadow-modal-elevated: 0 8px 32px rgba(0, 0, 0, 0.15);
  /* Mobile drawer / panel (offset shadow on inline-end edge; RTL-friendly) */
  --shadow-drawer-inline-end: -4px 0 24px rgba(0, 0, 0, 0.12);
  /* Typography / micro-elevation (header welcome, combo titles) */
  --shadow-text-faint: 0 1px 2px rgba(0, 0, 0, 0.02);
  /* Decorative inset wells (welcome character, neumorphism) */
  --shadow-inset-well-bottom: inset 0 -8px 0 rgba(0, 0, 0, 0.05);
  --shadow-neumorphism-inset-top: inset 0 1px 0 rgba(255, 255, 255, 0.5);
  --shadow-neumorphism-inset-bottom: inset 0 -1px 0 rgba(0, 0, 0, 0.05);
  /* Scrim on bright announcement / gradient headers */
  --header-announcement-badge-scrim: rgba(0, 0, 0, 0.1);
  /* Text and glass controls on saturated announcement / gradient headers */
  --header-announcement-meta-color: rgba(255, 255, 255, 0.9);
  --header-announcement-chip-bg: rgba(255, 255, 255, 0.15);
  --header-announcement-chip-border: rgba(255, 255, 255, 0.3);
  --header-announcement-inset-ring: rgba(255, 255, 255, 0.25);
  --header-announcement-muted-bg: rgba(255, 255, 255, 0.1);
  --header-announcement-muted-fg: rgba(255, 255, 255, 0.85);
  --header-announcement-banner-bg: rgba(255, 255, 255, 0.1);
  --color-focus-ring: rgba(59, 130, 246, 0.1);
  
  /* Transitions */
  --transition-fast: 0.2s;
  --transition-normal: 0.3s;
  --transition-slow: 0.5s;
  
  /* Overlay (modals, etc.) */
  --overlay-bg: rgba(0, 0, 0, 0.5);
  --overlay-light: rgba(255, 255, 255, 0.2);
  /* Stronger glass on saturated headers / primary bars (refresh controls, chips) */
  --overlay-medium: rgba(255, 255, 255, 0.3);
  /* Fixed footer strip over saturated section chrome (WCAG contrast) */
  --footer-bar-scrim: rgba(0, 0, 0, 0.28);
  --footer-copyright-text-shadow: 0 1px 2px rgba(0, 0, 0, 0.65), 0 0 12px rgba(0, 0, 0, 0.35);
  /* Fixed footer + feedback FAB — keep bottom form controls clickable (TASK-CUR-WEBUI-SMOKE-FIXES) */
  --app-chrome-bottom-clearance: calc(88px + env(safe-area-inset-bottom, 0px));

  /* Section pattern tints (overridden by theme) */
  --section-pattern-tint: rgba(59, 130, 246, 0.03);
  --section-dot-tint: rgba(59, 130, 246, 0.05);
  --section-corner-tint: rgba(59, 130, 246, 0.1);

  /* Sidebar / shared section tokens (per-section themes override these on :root or layout) */
  --section-primary: var(--color-primary);
  --section-bg-light: var(--color-bg-tertiary);

  /* Z-index */
  --z-index-base: 1;
  --z-index-dropdown: 100;
  --z-index-sticky: 200;
  --z-index-modal: 1000;
  /** Nested dialog above base modal layer (e.g. equipment close on top of stacked UI) */
  --z-index-modal-stacked: calc(var(--z-index-modal) + 100);
  --z-index-overlay: 9999;

  /* Form hints (label helpers — dept correspondence, etc.) */
  --form-field-hint-font-size: 0.85rem;
  --form-field-hint-line-height: 1.4;
  --form-field-hint-margin-top: 0.35rem;
  --form-sub-hint-margin-top: 0.15rem;
  --form-modal-hint-font-size: 0.9rem;
  --form-modal-hint-margin-bottom: 1rem;

  /* Form labels (TASK-CUR-DESIGN-ENH-01) */
  --form-label-gap: 8px;
  --form-label-font-size: 0.875rem;
  --form-label-weight: 500;

  /* Data tables */
  --table-th-padding-y: 16px;
  --table-th-padding-x: 18px;
  --table-td-padding-y: 14px;
  --table-td-padding-x: 18px;

  /* Buttons */
  --btn-padding-y: 12px;
  --btn-padding-x: 24px;
  --btn-icon-size: 44px;
  
  /* Organization Type Colors */
  --org-type-department-bg: #48bb78;
  --org-type-deanery-bg: #ed8936;
  --org-type-center-bg: #9f7aea;
  --org-type-office-bg: #4299e1;
  --org-type-monitoring-bg: #38b2ac;
  --org-type-division-bg: #cbd5e0;
  --org-type-division-text: #2d3748;
  --org-type-unit-bg: #e2e8f0;
  --org-type-unit-text: #4a5568;
  --org-type-college-bg: #f56565;
  --org-type-assistant-bg: #f6ad55;
  --org-highlight-bg: #fff3cd;

  /* Layout tokens for detail views */
  --content-max-width-xl: 1400px;
  --content-max-width-lg: 1200px;
  --content-max-width-md: 960px;
  --content-max-width-sm: 900px;
  --modal-max-width: 500px;
  --modal-width-percent: 90%;
  --min-width-control: 8rem;
  --detail-label-col: 160px;
  --detail-label-col-min: 140px;
  --detail-label-col-max: 220px;

  /* Spacing tokens for detail views */
  --spacing-section-empty: 60px;
  --spacing-2-5: 10px;
  --spacing-3: 12px;
  --spacing-4: 1rem;
  --spacing-5: 24px;
  --spacing-1-5: 6px;
  --spacing-1-25: 5px;
  --detail-panel-padding: 20px 22px;

  /* Typography tokens */
  --font-size-xs: 0.8rem;
  --font-size-sm: 0.875rem;
  --font-size-base: 1rem;
  --font-size-md-minus: 0.95rem;
  --font-size-2xs: 0.75rem;
  --font-size-lg: 1.1rem;
  --font-size-md-plus: 1.05rem;
  --font-size-xl: 1.5rem;
  --font-size-2xl: 3rem;
  --line-height-normal: 1.5;
  --line-height-relaxed: 1.6;

  /* Border radius aliases */
  --radius-xs: 6px;

  /* Detail grid template alias (matches the bare minmax(140px,220px) 1fr used in
     detail views). Centralized so all section detail layouts share the same
     label/value column rhythm. */
  --detail-grid-template: minmax(140px, 220px) 1fr;
  --comm-row-template: minmax(120px, 200px) 1fr;

  /* Border radius pill alias */
  --radius-pill: 999px;
}

/* --- Global dark appearance (TASK-UI-DARK-THEME): semantic surfaces + status chips --- */
:root[data-theme="dark"] {
  --color-primary: #60a5fa;
  --color-primary-dark: #3b82f6;
  --color-primary-gradient: linear-gradient(135deg, #60a5fa 0%, #2563eb 100%);

  /* Modal/dialog backdrop overlay scrim (dark theme) — slightly deeper black for legibility on dark surfaces. */
  --modal-overlay-bg: rgba(0, 0, 0, 0.6);

  --color-text-primary: #e8edf5;
  --color-text-secondary: #9eb2c8;
  --color-text-tertiary: #7c8fa3;
  --color-text-muted: #8b9cb0;
  --color-chart-title: var(--color-text-primary);
  --color-icon-primary: var(--color-text-primary);

  --color-bg-primary: #0f172a;
  --color-bg-secondary: #1e293b;
  --color-bg-tertiary: #172033;
  --color-row-hover: #2d3a50;
  --color-bg-neutral-soft: #1e293b;
  --color-bg-neutral-soft-active: #273549;
  --color-border-neutral: #334155;

  --color-border: #334155;
  --color-border-light: #273549;
  --color-border-medium: #3d4f66;
  --color-border-dark: #475569;

  --sidebar-branding-title: #cbd5e1;

  --color-danger: #f87171;
  --color-danger-dark: #ef4444;
  --color-danger-bg: #450a0a;
  --color-danger-text-on: #0f172a;
  --color-error: var(--color-danger);

  --color-success: #4ade80;
  --color-success-dark: #22c55e;
  --color-success-bg: #14532d;
  --color-success-text: #86efac;
  --color-success-text-on: #0f172a;

  --color-warning: #fbbf24;
  --color-warning-dark: #f59e0b;
  --color-warning-bg: #713f12;
  --color-warning-text: #fcd34d;

  --color-info: #60a5fa;
  --color-info-dark: #3b82f6;
  --color-info-bg: #1e3a5f;
  --color-info-text: #93c5fd;

  --color-on-primary: #0f172a;
  --color-text-on-primary: var(--color-on-primary);
  --color-error-bg: var(--color-danger-bg);
  --color-error-text: var(--status-error-text);
  --color-overlay: var(--overlay-bg);
  --status-partial-bg-hover: #7c2d12;
  --section-border-light: var(--color-border-light);
  --admin-theme-list-hover-bg: rgba(255, 255, 255, 0.08);
  --admin-theme-list-active-bg: rgba(255, 255, 255, 0.14);
  --shadow-swatch: 0 1px 3px rgba(0, 0, 0, 0.45);
  --shadow-swatch-sm: 0 1px 2px rgba(0, 0, 0, 0.45);
  --shadow-text-outline: 0 0 2px rgba(0, 0, 0, 0.65);
  --overlay-light-border: rgba(255, 255, 255, 0.2);
  --preview-surface: var(--color-bg-secondary);

  --header-confetti-1: #854d0e;
  --header-confetti-2: #6b21a8;
  --header-confetti-3: #0e7490;
  --header-confetti-4: #9f1239;

  --color-status-completed: #86efac;
  --color-status-completed-bg: #14532d;
  --color-status-in-progress: #93c5fd;
  --color-status-in-progress-bg: #1e3a5f;
  --color-status-pending: #fcd34d;
  --color-status-pending-bg: #713f12;
  --color-status-cancelled: #fca5a5;
  --color-status-cancelled-bg: #7f1d1d;

  --status-paid-bg: #14532d;
  --status-paid-text: #bbf7d0;
  --status-paid-border: #22c55e;
  --status-paid-icon: #4ade80;
  --status-paid-glow: rgba(34, 197, 94, 0.35);

  --status-unpaid-bg: #7f1d1d;
  --status-unpaid-text: #fecaca;
  --status-unpaid-border: #f87171;
  --status-unpaid-icon: #fca5a5;
  --status-unpaid-glow: rgba(248, 113, 113, 0.45);

  --status-partial-bg: #7c2d12;
  --status-partial-text: #fed7aa;
  --status-partial-border: #fb923c;
  --status-partial-icon: #fdba74;
  --status-partial-glow: rgba(251, 146, 60, 0.35);

  --status-overdue-bg: #7c2d12;
  --status-overdue-text: #ffedd5;
  --status-overdue-border: #fb923c;
  --status-overdue-icon: #fdba74;

  --status-waived-bg: #581c87;
  --status-waived-text: #e9d5ff;
  --status-waived-border: #c084fc;
  --status-waived-icon: #d8b4fe;

  --status-unknown-bg: #334155;
  --status-unknown-text: #e2e8f0;
  --status-unknown-border: #64748b;
  --status-unknown-icon: #94a3b8;

  --linking-variance-under-text: var(--status-paid-text);
  --linking-variance-exact-text: var(--status-partial-text);
  --linking-variance-over-text: var(--status-unpaid-text);

  --status-healthy: #34d399;
  --status-healthy-bg: #064e3b;
  --status-healthy-text: #a7f3d0;
  --status-warning: #fbbf24;
  --status-warning-bg: #713f12;
  --status-warning-text: #fef3c7;
  --status-error: #f87171;
  --status-error-bg: #7f1d1d;
  --status-error-text: #fecaca;

  --admin-primary: #93c5fd;
  --admin-primary-light: #bfdbfe;
  --admin-primary-dark: #60a5fa;
  --admin-bg-light: #1e3a5f;
  --admin-bg-lighter: #0f172a;
  --admin-border: #334155;
  --admin-gradient: linear-gradient(135deg, #1e3a5f 0%, #0f172a 100%);
  --admin-text-on-primary: #ffffff;
  --admin-primary-lighter: #93c5fd;
  --admin-border-light: rgba(147, 197, 253, 0.15);
  --admin-border-muted: #475569;
  --admin-shadow-hover: rgba(147, 197, 253, 0.25);
  --admin-elevation-sm: 0 2px 8px var(--admin-shadow-hover);
  --admin-elevation-md: 0 4px 10px var(--admin-shadow-hover);
  --admin-elevation-lg: 0 6px 16px var(--admin-shadow-hover);
  --admin-elevation-chart: 0 2px 10px var(--admin-shadow-hover);
  --admin-text-primary: #e2e8f0;
  --admin-text-secondary: #94a3b8;
  --admin-text-muted: #64748b;
  --admin-surface: #1e293b;
  --admin-surface-muted: #0f172a;
  --admin-bg-page: var(--admin-bg-lighter);
  --admin-bg-surface: var(--admin-bg-light);
  --admin-bg-hover: #334155;
  --admin-bg-disabled: #1e293b;
  --admin-kpi-surface: linear-gradient(135deg, var(--admin-bg-light) 0%, var(--admin-bg-lighter) 100%);
  --admin-success-soft: #064e3b;
  --admin-success-soft-2: #065f46;
  --admin-success-border: #34d399;
  --admin-info-soft: #1e3a5f;
  --admin-info-soft-2: #0f172a;
  --admin-info-border: #60a5fa;
  --admin-info-soft-hover: #1e40af;
  --admin-danger-soft: #7f1d1d;
  --admin-danger-soft-2: #991b1b;
  --admin-danger-border: #f87171;
  --admin-danger-text: #fecaca;
  --admin-warning-soft: #713f12;
  --admin-warning-border: #fbbf24;
  --status-paid-gradient: linear-gradient(135deg, var(--status-healthy-bg) 0%, var(--status-healthy) 100%);
  --status-unpaid-gradient: linear-gradient(135deg, var(--status-unpaid-bg) 0%, var(--status-unpaid-border) 100%);

  --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.45);
  --shadow-md: 0 5px 15px rgba(0, 0, 0, 0.5);
  --section-shadow-hover: 0 4px 14px rgba(0, 0, 0, 0.55);
  --shadow-lg: 0 10px 30px rgba(0, 0, 0, 0.55);
  --shadow-xl: 0 15px 35px rgba(0, 0, 0, 0.45);
  --shadow-card: 0 4px 6px rgba(0, 0, 0, 0.4);
  --shadow-subtle: 0 2px 4px rgba(0, 0, 0, 0.35);
  --shadow-card-raised: 0 2px 10px rgba(0, 0, 0, 0.45);
  --shadow-modal-elevated: 0 8px 32px rgba(0, 0, 0, 0.55);
  --shadow-drawer-inline-end: -4px 0 24px rgba(0, 0, 0, 0.5);
  --shadow-text-faint: 0 1px 2px rgba(0, 0, 0, 0.45);
  --shadow-inset-well-bottom: inset 0 -8px 0 rgba(0, 0, 0, 0.28);
  --shadow-neumorphism-inset-top: inset 0 1px 0 rgba(255, 255, 255, 0.08);
  --shadow-neumorphism-inset-bottom: inset 0 -1px 0 rgba(0, 0, 0, 0.35);
  --header-announcement-badge-scrim: rgba(0, 0, 0, 0.35);
  --header-announcement-meta-color: rgba(248, 250, 252, 0.92);
  --header-announcement-chip-bg: rgba(255, 255, 255, 0.12);
  --header-announcement-chip-border: rgba(255, 255, 255, 0.22);
  --header-announcement-inset-ring: rgba(255, 255, 255, 0.18);
  --header-announcement-muted-bg: rgba(255, 255, 255, 0.08);
  --header-announcement-muted-fg: rgba(248, 250, 252, 0.88);
  --header-announcement-banner-bg: rgba(255, 255, 255, 0.08);
  --color-focus-ring: rgba(96, 165, 250, 0.35);

  --overlay-bg: rgba(0, 0, 0, 0.65);
  --overlay-light: rgba(255, 255, 255, 0.08);
  --overlay-medium: rgba(255, 255, 255, 0.16);
  --footer-bar-scrim: rgba(0, 0, 0, 0.55);
  --footer-copyright-text-shadow: 0 1px 2px rgba(0, 0, 0, 0.85), 0 0 14px rgba(0, 0, 0, 0.55);

  --section-pattern-tint: rgba(148, 163, 184, 0.06);
  --section-dot-tint: rgba(148, 163, 184, 0.1);
  --section-corner-tint: rgba(148, 163, 184, 0.14);

  --org-type-division-bg: #475569;
  --org-type-division-text: #e2e8f0;
  --org-type-unit-bg: #334155;
  --org-type-unit-text: #cbd5e1;
  --org-highlight-bg: #713f12;

  /* Layout tokens for detail views (same in both themes) */
  --content-max-width-xl: 1400px;
  --content-max-width-lg: 1200px;
  --content-max-width-md: 960px;
  --content-max-width-sm: 900px;
  --modal-max-width: 500px;
  --modal-width-percent: 90%;
  --min-width-control: 8rem;
  --detail-label-col: 160px;
  --detail-label-col-min: 140px;
  --detail-label-col-max: 220px;

  /* Spacing tokens for detail views (same in both themes) */
  --spacing-section-empty: 60px;
  --detail-panel-padding: 20px 22px;

  /* Spacing tokens (same in both themes) */
  --spacing-2-5: 10px;
  --spacing-3: 12px;
  --spacing-4: 1rem;
  --spacing-5: 24px;
  --spacing-1-5: 6px;
  --spacing-1-25: 5px;
  --radius-xs: 6px;

  /* Typography tokens (same in both themes) */
  --font-size-xs: 0.8rem;
  --font-size-sm: 0.875rem;
  --font-size-base: 1rem;
  --font-size-md-minus: 0.95rem;
  --font-size-2xs: 0.75rem;
  --font-size-lg: 1.1rem;
  --font-size-md-plus: 1.05rem;
  --font-size-xl: 1.5rem;
  --font-size-2xl: 3rem;
  --line-height-normal: 1.5;
  --line-height-relaxed: 1.6;

  /* Detail grid template (label/value column rhythm for detail views) */
  --detail-grid-template: minmax(140px, 220px) 1fr;
  --comm-row-template: minmax(120px, 200px) 1fr;

  /* Border radius pill alias (same in both themes) */
  --radius-pill: 999px;
}

/* Direct orders budget variance (initial vs final linking value) */
.linking-variance-under {
  color: var(--linking-variance-under-text);
}

.linking-variance-exact {
  color: var(--linking-variance-exact-text);
}

.linking-variance-over {
  color: var(--linking-variance-over-text);
}

.linking-variance-pct {
  display: inline-block;
  font-size: 0.8rem;
  font-weight: 600;
  margin-inline-start: 0.35rem;
}

.linking-value-final-wrap {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.15rem 0.35rem;
}