/* ============================================================================
   Dragon ERP - Unified UI Layer (Phase 2 UI System-wide unification)
   ============================================================================
   Roles of this file (loaded last in _Host.cshtml, right after
   dragon-store-tokens.css, so its rules win the cascade against legacy pages):

   1) Canonical design tokens (--ui-*)
      Single source of truth for surfaces, text, borders, radius, shadows,
      focus ring and status colors. Values converge the visual language of the
      official design reference /fixedassets/dashboard (slate surfaces,
      rounded-xl, soft shadows, sky accent #0284c7) with the existing system
      palette defined in poss.css (--app-, --surface- and --brand- variables).
      The /settings page is the reference for the light/dark pairing mechanism.

   2) Theme compatibility layer
      [data-theme="dark"] overrides for the Tailwind utility classes used by the
      ~270 modern pages (bg-slate-, text-slate-, border-slate-, tinted
      soft backgrounds, alpha whites, hover/focus variants). This gives every
      Tailwind page the same light/dark behavior the /settings page already has,
      without touching any page markup. Scoped so DevExpress (dxbl-/dx- prefixed)
      and Bootstrap component internals are never modified.

   3) Reusable component primitives (.dragon- prefixed)
      Theme-aware building blocks: tables, forms, modals, tabs, pagination,
      badges, KPI cards, empty states, loading buttons. Available for new work
      and for incrementally migrating the legacy pages.

   Compat & safety:
   - Light mode is never touched: every override lives under [data-theme="dark"].
   - No universal resets and no page-layout rules here - visual primitives only.
   - !important is used only where a Tailwind/BS5 utility would otherwise win
     (alpha whites + tinted soft backgrounds + hover variants), mirroring the
     pre-existing pattern in poss.css.
   ============================================================================ */

/* ── 1. Tokens — Light ───────────────────────────────────────────────────── */
:root {
    /* Surfaces */
    --ui-bg:            #F4F7F8;
    --ui-surface:       #FFFFFF;
    --ui-surface-2:     #EDF3F4;
    --ui-surface-3:     #E2ECEE;
    /* Borders */
    --ui-border:        #D2DFE2;
    --ui-border-subtle: #E5EDEF;
    --ui-border-strong: #C5D4D8;
    /* Text */
    --ui-text:          #17323A;
    --ui-text-2:        #58707A;
    --ui-text-muted:    #80949B;
    --ui-text-inverse:  #FFFFFF;
    /* Brand / primary action — system-wide sky accent */
    --ui-primary:            #0284C7;
    --ui-primary-hover:      #0369A1;
    --ui-primary-active:     #0369A1;
    --ui-primary-soft:       #E6F4FF;
    --ui-primary-border:     #9CCBEF;
    --ui-focus-ring:         0 0 0 3px rgba(2, 132, 199, .28);
    /* Status */
    --ui-success:       #16813A;
    --ui-success-soft:  #E9F7EF;
    --ui-warning:       #B45309;
    --ui-warning-soft:  #FEF3C7;
    --ui-danger:        #C62828;
    --ui-danger-soft:   #FDE8E8;
    --ui-info:          #2376C9;
    --ui-info-soft:     #EAF2FB;
    /* Radius — reference uses rounded-xl (12px) */
    --ui-radius-sm: 8px;
    --ui-radius:    12px;
    --ui-radius-lg: 16px;
    --ui-radius-full: 9999px;
    /* Shadows — soft slate shadow family from the reference */
    --ui-shadow-sm: 0 1px 2px rgba(15, 23, 42, .05);
    --ui-shadow:    0 1px 3px rgba(15, 23, 42, .07), 0 4px 12px rgba(15, 23, 42, .05);
    --ui-shadow-lg: 0 12px 30px rgba(15, 23, 42, .10);
    --ui-shadow-blue: 0 8px 18px rgba(2, 132, 199, .18);
    /* Typography */
    --ui-font: 'Cairo', 'Segoe UI', Tahoma, sans-serif;
    --ui-font-size: 14px;
    /* Table */
    --ui-table-header-bg: var(--ui-surface-2);
    --ui-table-row-hover: #F2F8FA;
    --ui-table-stripe: rgba(15, 23, 42, .018);
}

/* ── 1. Tokens — Dark ────────────────────────────────────────────────────── */
.dark,
[data-theme="dark"] {
    --ui-bg:            #0F1923;
    --ui-surface:       #1A2535;
    --ui-surface-2:     #1F2D3D;
    --ui-surface-3:     #253548;
    --ui-border:        #2D3F52;
    --ui-border-subtle: #243145;
    --ui-border-strong: #3A4F66;
    --ui-text:          #DDE4EE;
    --ui-text-2:        #8FA3B8;
    --ui-text-muted:    #9AABBA;
    --ui-text-inverse:  #0F1923;
    --ui-primary:            #4FC3F7;
    --ui-primary-hover:      #29B6F6;
    --ui-primary-active:     #81D4FA;
    --ui-primary-soft:       #173B5C;
    --ui-primary-border:     #2E6A94;
    --ui-focus-ring:         0 0 0 3px rgba(79, 195, 247, .32);
    --ui-success:       #66BB6A;
    --ui-success-soft:  #153A2A;
    --ui-warning:       #F5B041;
    --ui-warning-soft:  #3A2E00;
    --ui-danger:        #EF5350;
    --ui-danger-soft:   #3D1515;
    --ui-info:          #42A5F5;
    --ui-info-soft:     #0D2A3D;
    --ui-shadow-sm: 0 1px 3px rgba(0, 0, 0, .35);
    --ui-shadow:    0 2px 8px rgba(0, 0, 0, .38);
    --ui-shadow-lg: 0 14px 32px rgba(0, 0, 0, .5);
    --ui-shadow-blue: 0 8px 18px rgba(0, 0, 0, .35);
    --ui-table-header-bg: #1F2D3D;
    --ui-table-row-hover: #22303F;
    --ui-table-stripe: rgba(255, 255, 255, .02);
}

/* ── 2. Theme-compat layer: Tailwind utility surfaces ─────────────────────
   Scoped to [data-theme="dark"] only. Every rule is guarded with
   html:not(.ui-legacy), so routes that keep their own legacy design (set by
   window.dragonUi in app-utils.js: /zatca/dashboard, /sales/retail-pos,
   /fixedassets, /collaboration/chat) never receive this layer. The remaining
   selectors are (0,3,1) and beat the generated Tailwind utilities regardless
   of load order, so the modern page population honours system dark mode.
   Deliberately NOT covering: bg-slate-700/800/900 (used as deliberate dark
   contrast accents in light mode — e.g. the dark "accent" buttons). */

/* Base + white / alpha whites (sticky headers, popovers) */
html:not(.ui-legacy)[data-theme="dark"] .bg-white\/95,
html:not(.ui-legacy)[data-theme="dark"] .bg-white\/90,
html:not(.ui-legacy)[data-theme="dark"] .bg-white\/85,
html:not(.ui-legacy)[data-theme="dark"] .bg-white\/80,
html:not(.ui-legacy)[data-theme="dark"] .bg-white\/75,
html:not(.ui-legacy)[data-theme="dark"] .bg-white\/70,
html:not(.ui-legacy)[data-theme="dark"] .bg-white\/60 { background-color: rgba(26, 37, 53, .92) !important; }

/* Slate scale surfaces */
html:not(.ui-legacy)[data-theme="dark"] .bg-slate-50      { background-color: var(--ui-bg) !important; }
html:not(.ui-legacy)[data-theme="dark"] .bg-slate-50\/90,
html:not(.ui-legacy)[data-theme="dark"] .bg-slate-50\/80,
html:not(.ui-legacy)[data-theme="dark"] .bg-slate-50\/70,
html:not(.ui-legacy)[data-theme="dark"] .bg-slate-50\/60,
html:not(.ui-legacy)[data-theme="dark"] .bg-slate-50\/50 { background-color: rgba(15, 25, 35, .9) !important; }
html:not(.ui-legacy)[data-theme="dark"] .bg-slate-100     { background-color: var(--ui-surface-2) !important; }
html:not(.ui-legacy)[data-theme="dark"] .bg-slate-100\/90 { background-color: rgba(31, 45, 61, .9) !important; }
html:not(.ui-legacy)[data-theme="dark"] .bg-slate-200     { background-color: var(--ui-surface-3) !important; }
html:not(.ui-legacy)[data-theme="dark"] .bg-slate-300     { background-color: var(--ui-border-strong) !important; }
html:not(.ui-legacy)[data-theme="dark"] .bg-slate-100\/6  { background-color: rgba(31, 45, 61, .6) !important; }

/* Gray / neutral / zinc / stone scales (same ramp as slate) */
html:not(.ui-legacy)[data-theme="dark"] .bg-gray-50       { background-color: var(--ui-bg) !important; }
html:not(.ui-legacy)[data-theme="dark"] .bg-gray-100      { background-color: var(--ui-surface-2) !important; }
html:not(.ui-legacy)[data-theme="dark"] .bg-gray-200      { background-color: var(--ui-surface-3) !important; }
html:not(.ui-legacy)[data-theme="dark"] .bg-gray-300      { background-color: var(--ui-border-strong) !important; }
html:not(.ui-legacy)[data-theme="dark"] .bg-neutral-50    { background-color: var(--ui-bg) !important; }
html:not(.ui-legacy)[data-theme="dark"] .bg-neutral-100   { background-color: var(--ui-surface-2) !important; }
html:not(.ui-legacy)[data-theme="dark"] .bg-neutral-200   { background-color: var(--ui-surface-3) !important; }
html:not(.ui-legacy)[data-theme="dark"] .bg-zinc-50       { background-color: var(--ui-bg) !important; }
html:not(.ui-legacy)[data-theme="dark"] .bg-zinc-100      { background-color: var(--ui-surface-2) !important; }
html:not(.ui-legacy)[data-theme="dark"] .bg-zinc-200      { background-color: var(--ui-surface-3) !important; }
html:not(.ui-legacy)[data-theme="dark"] .bg-stone-50      { background-color: var(--ui-bg) !important; }
html:not(.ui-legacy)[data-theme="dark"] .bg-stone-100     { background-color: var(--ui-surface-2) !important; }

/* Colored soft backgrounds (chips, badges, tabs) — tinted translucent fills */
html:not(.ui-legacy)[data-theme="dark"] .bg-blue-50    { background-color: rgba(59, 130, 246, .14) !important; }
html:not(.ui-legacy)[data-theme="dark"] .bg-blue-100   { background-color: rgba(59, 130, 246, .20) !important; }
html:not(.ui-legacy)[data-theme="dark"] .bg-sky-50     { background-color: rgba(14, 165, 233, .14) !important; }
html:not(.ui-legacy)[data-theme="dark"] .bg-sky-100    { background-color: rgba(14, 165, 233, .20) !important; }
html:not(.ui-legacy)[data-theme="dark"] .bg-indigo-50  { background-color: rgba(99, 102, 241, .14) !important; }
html:not(.ui-legacy)[data-theme="dark"] .bg-indigo-100 { background-color: rgba(99, 102, 241, .20) !important; }
html:not(.ui-legacy)[data-theme="dark"] .bg-violet-50  { background-color: rgba(139, 92, 246, .14) !important; }
html:not(.ui-legacy)[data-theme="dark"] .bg-purple-50  { background-color: rgba(147, 51, 234, .14) !important; }
html:not(.ui-legacy)[data-theme="dark"] .bg-purple-100 { background-color: rgba(147, 51, 234, .20) !important; }
html:not(.ui-legacy)[data-theme="dark"] .bg-emerald-50 { background-color: rgba(16, 185, 129, .14) !important; }
html:not(.ui-legacy)[data-theme="dark"] .bg-emerald-100{ background-color: rgba(16, 185, 129, .20) !important; }
html:not(.ui-legacy)[data-theme="dark"] .bg-green-50   { background-color: rgba(34, 197, 94, .14) !important; }
html:not(.ui-legacy)[data-theme="dark"] .bg-green-100  { background-color: rgba(34, 197, 94, .20) !important; }
html:not(.ui-legacy)[data-theme="dark"] .bg-teal-50    { background-color: rgba(20, 184, 166, .14) !important; }
html:not(.ui-legacy)[data-theme="dark"] .bg-teal-100   { background-color: rgba(20, 184, 166, .20) !important; }
html:not(.ui-legacy)[data-theme="dark"] .bg-cyan-50    { background-color: rgba(6, 182, 212, .14) !important; }
html:not(.ui-legacy)[data-theme="dark"] .bg-cyan-100   { background-color: rgba(6, 182, 212, .20) !important; }
html:not(.ui-legacy)[data-theme="dark"] .bg-amber-50   { background-color: rgba(245, 158, 11, .14) !important; }
html:not(.ui-legacy)[data-theme="dark"] .bg-amber-100  { background-color: rgba(245, 158, 11, .20) !important; }
html:not(.ui-legacy)[data-theme="dark"] .bg-yellow-50  { background-color: rgba(234, 179, 8, .14) !important; }
html:not(.ui-legacy)[data-theme="dark"] .bg-yellow-100 { background-color: rgba(234, 179, 8, .20) !important; }
html:not(.ui-legacy)[data-theme="dark"] .bg-orange-50  { background-color: rgba(249, 115, 22, .14) !important; }
html:not(.ui-legacy)[data-theme="dark"] .bg-red-50     { background-color: rgba(239, 68, 68, .14) !important; }
html:not(.ui-legacy)[data-theme="dark"] .bg-red-100    { background-color: rgba(239, 68, 68, .20) !important; }
html:not(.ui-legacy)[data-theme="dark"] .bg-rose-50    { background-color: rgba(244, 63, 94, .14) !important; }
html:not(.ui-legacy)[data-theme="dark"] .bg-rose-100   { background-color: rgba(244, 63, 94, .20) !important; }
html:not(.ui-legacy)[data-theme="dark"] .bg-fuchsia-50 { background-color: rgba(217, 70, 239, .14) !important; }

/* Tinted-soft surfaces with explicit opacity (exact single tokens)
   — panels/columns that overlay white in light mode */
html:not(.ui-legacy)[data-theme="dark"] .bg-blue-50\/90,
html:not(.ui-legacy)[data-theme="dark"] .bg-blue-50\/80,
html:not(.ui-legacy)[data-theme="dark"] .bg-blue-50\/70,
html:not(.ui-legacy)[data-theme="dark"] .bg-blue-50\/60 { background-color: rgba(13, 34, 61, .9) !important; }
html:not(.ui-legacy)[data-theme="dark"] .bg-blue-100\/80 { background-color: rgba(16, 44, 80, .85) !important; }
html:not(.ui-legacy)[data-theme="dark"] .bg-emerald-50\/70,
html:not(.ui-legacy)[data-theme="dark"] .bg-emerald-50\/60 { background-color: rgba(10, 45, 35, .85) !important; }
html:not(.ui-legacy)[data-theme="dark"] .bg-emerald-100\/70 { background-color: rgba(12, 52, 40, .85) !important; }
html:not(.ui-legacy)[data-theme="dark"] .bg-purple-50\/60 { background-color: rgba(40, 26, 68, .8) !important; }
html:not(.ui-legacy)[data-theme="dark"] .bg-amber-100\/90 { background-color: rgba(62, 44, 8, .85) !important; }

/* Colored accent with low alpha (subtle stat pills / overlays) */
html:not(.ui-legacy)[data-theme="dark"] .bg-rose-500\/20 { background-color: rgba(244, 63, 94, .20) !important; }
html:not(.ui-legacy)[data-theme="dark"] .bg-emerald-500\/15,
html:not(.ui-legacy)[data-theme="dark"] .bg-emerald-500\/20 { background-color: rgba(16, 185, 129, .20) !important; }
html:not(.ui-legacy)[data-theme="dark"] .bg-amber-500\/30 { background-color: rgba(245, 158, 11, .30) !important; }
html:not(.ui-legacy)[data-theme="dark"] .bg-rose-600\/90 { background-color: rgba(225, 29, 72, .90) !important; }

/* Hover / focus surfaces (inputs, chips, rows) */
html:not(.ui-legacy)[data-theme="dark"] .hover\:bg-slate-50:hover   { background-color: var(--ui-bg) !important; }
html:not(.ui-legacy)[data-theme="dark"] .hover\:bg-slate-100:hover  { background-color: var(--ui-surface-2) !important; }
html:not(.ui-legacy)[data-theme="dark"] .hover\:bg-slate-200:hover  { background-color: var(--ui-surface-3) !important; }
html:not(.ui-legacy)[data-theme="dark"] .hover\:bg-gray-50:hover    { background-color: var(--ui-bg) !important; }
html:not(.ui-legacy)[data-theme="dark"] .hover\:bg-gray-100:hover   { background-color: var(--ui-surface-2) !important; }
html:not(.ui-legacy)[data-theme="dark"] .hover\:bg-gray-200:hover   { background-color: var(--ui-surface-3) !important; }
html:not(.ui-legacy)[data-theme="dark"] .hover\:bg-blue-50:hover    { background-color: rgba(59, 130, 246, .18) !important; }
html:not(.ui-legacy)[data-theme="dark"] .hover\:bg-emerald-50:hover { background-color: rgba(16, 185, 129, .18) !important; }
html:not(.ui-legacy)[data-theme="dark"] .hover\:bg-slate-300:hover  { background-color: var(--ui-border-strong) !important; }
html:not(.ui-legacy)[data-theme="dark"] .focus\:bg-white:focus      { background-color: var(--ui-surface) !important; }
html:not(.ui-legacy)[data-theme="dark"] .focus\:bg-slate-50:focus   { background-color: var(--ui-bg) !important; }
html:not(.ui-legacy)[data-theme="dark"] .focus\:bg-slate-100:focus  { background-color: var(--ui-surface-2) !important; }

/* ── 2. Text tiers (slate/gray) — inverted readable ramp in dark mode ──── */
html:not(.ui-legacy)[data-theme="dark"] .text-slate-300 { color: #B9C7D6 !important; }
html:not(.ui-legacy)[data-theme="dark"] .text-slate-400 { color: var(--ui-text-muted) !important; }
html:not(.ui-legacy)[data-theme="dark"] .text-slate-500 { color: var(--ui-text-2) !important; }
html:not(.ui-legacy)[data-theme="dark"] .text-slate-600 { color: #A8BACB !important; }
html:not(.ui-legacy)[data-theme="dark"] .text-slate-700 { color: #C1CFDD !important; }
html:not(.ui-legacy)[data-theme="dark"] .text-slate-800 { color: var(--ui-text) !important; }
html:not(.ui-legacy)[data-theme="dark"] .text-slate-900 { color: #EAF1F8 !important; }
html:not(.ui-legacy)[data-theme="dark"] .text-gray-300  { color: #B9C7D6 !important; }
html:not(.ui-legacy)[data-theme="dark"] .text-gray-400  { color: var(--ui-text-muted) !important; }
html:not(.ui-legacy)[data-theme="dark"] .text-gray-500  { color: var(--ui-text-2) !important; }
html:not(.ui-legacy)[data-theme="dark"] .text-gray-600  { color: #A8BACB !important; }
html:not(.ui-legacy)[data-theme="dark"] .text-gray-700  { color: #C1CFDD !important; }
html:not(.ui-legacy)[data-theme="dark"] .text-gray-800  { color: var(--ui-text) !important; }
html:not(.ui-legacy)[data-theme="dark"] .text-gray-900  { color: #EAF1F8 !important; }
html:not(.ui-legacy)[data-theme="dark"] .text-neutral-400 { color: var(--ui-text-muted) !important; }
html:not(.ui-legacy)[data-theme="dark"] .text-neutral-500 { color: var(--ui-text-2) !important; }
html:not(.ui-legacy)[data-theme="dark"] .text-neutral-600 { color: #A8BACB !important; }
html:not(.ui-legacy)[data-theme="dark"] .text-neutral-700 { color: #C1CFDD !important; }
html:not(.ui-legacy)[data-theme="dark"] .text-neutral-800 { color: var(--ui-text) !important; }
html:not(.ui-legacy)[data-theme="dark"] .text-neutral-900 { color: #EAF1F8 !important; }

/* Colored text on the tinted soft backgrounds — lightened so it stays readable */
html:not(.ui-legacy)[data-theme="dark"] .text-blue-600   { color: #7CBBF5 !important; }
html:not(.ui-legacy)[data-theme="dark"] .text-blue-700   { color: #93C5FD !important; }
html:not(.ui-legacy)[data-theme="dark"] .text-blue-800   { color: #A5CBFA !important; }
html:not(.ui-legacy)[data-theme="dark"] .text-sky-600    { color: #7DD3FC !important; }
html:not(.ui-legacy)[data-theme="dark"] .text-sky-700    { color: #97D8F8 !important; }
html:not(.ui-legacy)[data-theme="dark"] .text-indigo-500 { color: #A5B4FC !important; }
html:not(.ui-legacy)[data-theme="dark"] .text-indigo-600 { color: #A5B4FC !important; }
html:not(.ui-legacy)[data-theme="dark"] .text-indigo-700 { color: #B9C4FB !important; }
html:not(.ui-legacy)[data-theme="dark"] .text-purple-600 { color: #C4B5FD !important; }
html:not(.ui-legacy)[data-theme="dark"] .text-purple-700 { color: #C4B5FD !important; }
html:not(.ui-legacy)[data-theme="dark"] .text-violet-600  { color: #C4B5FD !important; }
html:not(.ui-legacy)[data-theme="dark"] .text-emerald-600 { color: #6EE7B7 !important; }
html:not(.ui-legacy)[data-theme="dark"] .text-emerald-700 { color: #6EE7B7 !important; }
html:not(.ui-legacy)[data-theme="dark"] .text-green-600   { color: #86EFAC !important; }
html:not(.ui-legacy)[data-theme="dark"] .text-green-700   { color: #86EFAC !important; }
html:not(.ui-legacy)[data-theme="dark"] .text-teal-600    { color: #5EEAD4 !important; }
html:not(.ui-legacy)[data-theme="dark"] .text-teal-700    { color: #5EEAD4 !important; }
html:not(.ui-legacy)[data-theme="dark"] .text-cyan-600    { color: #67E8F9 !important; }
html:not(.ui-legacy)[data-theme="dark"] .text-cyan-700    { color: #67E8F9 !important; }
html:not(.ui-legacy)[data-theme="dark"] .text-amber-500   { color: #FCD34D !important; }
html:not(.ui-legacy)[data-theme="dark"] .text-amber-600   { color: #FCD34D !important; }
html:not(.ui-legacy)[data-theme="dark"] .text-amber-700   { color: #FCC86B !important; }
html:not(.ui-legacy)[data-theme="dark"] .text-yellow-600  { color: #FDE047 !important; }
html:not(.ui-legacy)[data-theme="dark"] .text-yellow-700  { color: #FDE047 !important; }
html:not(.ui-legacy)[data-theme="dark"] .text-orange-500  { color: #FDBA74 !important; }
html:not(.ui-legacy)[data-theme="dark"] .text-orange-600  { color: #FDBA74 !important; }
html:not(.ui-legacy)[data-theme="dark"] .text-red-500     { color: #FCA5A5 !important; }
html:not(.ui-legacy)[data-theme="dark"] .text-red-600     { color: #FCA5A5 !important; }
html:not(.ui-legacy)[data-theme="dark"] .text-red-700     { color: #F6A9A9 !important; }
html:not(.ui-legacy)[data-theme="dark"] .text-rose-500    { color: #FDA4AF !important; }
html:not(.ui-legacy)[data-theme="dark"] .text-rose-600    { color: #FDA4AF !important; }
html:not(.ui-legacy)[data-theme="dark"] .text-rose-700    { color: #FBA8B3 !important; }
html:not(.ui-legacy)[data-theme="dark"] .text-slate-500\/.*,
html:not(.ui-legacy)[data-theme="dark"] .text-gray-500\/.* { color: var(--ui-text-2) !important; }

/* ── 2. Border & divide utilities ───────────────────────────────────────── */
html:not(.ui-legacy)[data-theme="dark"] .border-slate-100 { border-color: var(--ui-border-subtle) !important; }
html:not(.ui-legacy)[data-theme="dark"] .border-slate-200 { border-color: var(--ui-border) !important; }
html:not(.ui-legacy)[data-theme="dark"] .border-slate-300 { border-color: var(--ui-border-strong) !important; }
html:not(.ui-legacy)[data-theme="dark"] .border-slate-200\/80,
html:not(.ui-legacy)[data-theme="dark"] .border-slate-200\/90,
html:not(.ui-legacy)[data-theme="dark"] .border-slate-200\/70 { border-color: var(--ui-border) !important; }
html:not(.ui-legacy)[data-theme="dark"] .border-gray-100  { border-color: var(--ui-border-subtle) !important; }
html:not(.ui-legacy)[data-theme="dark"] .border-gray-200  { border-color: var(--ui-border) !important; }
html:not(.ui-legacy)[data-theme="dark"] .border-gray-300  { border-color: var(--ui-border-strong) !important; }
html:not(.ui-legacy)[data-theme="dark"] .border-neutral-200 { border-color: var(--ui-border) !important; }
html:not(.ui-legacy)[data-theme="dark"] .border-zinc-200  { border-color: var(--ui-border) !important; }
html:not(.ui-legacy)[data-theme="dark"] .divide-slate-100 > :not([hidden]) ~ :not([hidden]) { border-color: var(--ui-border-subtle) !important; }
html:not(.ui-legacy)[data-theme="dark"] .divide-slate-200 > :not([hidden]) ~ :not([hidden]) { border-color: var(--ui-border) !important; }
html:not(.ui-legacy)[data-theme="dark"] .divide-gray-100  > :not([hidden]) ~ :not([hidden]) { border-color: var(--ui-border-subtle) !important; }
html:not(.ui-legacy)[data-theme="dark"] .divide-gray-200  > :not([hidden]) ~ :not([hidden]) { border-color: var(--ui-border) !important; }

/* Soft rings used on cards / popovers */
html:not(.ui-legacy)[data-theme="dark"] .ring-slate-200 { --tw-ring-color: rgb(45 63 82 / 1) !important; }
html:not(.ui-legacy)[data-theme="dark"] .ring-slate-300 { --tw-ring-color: rgb(58 79 102 / 1) !important; }
html:not(.ui-legacy)[data-theme="dark"] .ring-gray-200  { --tw-ring-color: rgb(45 63 82 / 1) !important; }
html:not(.ui-legacy)[data-theme="dark"] .ring-gray-300  { --tw-ring-color: rgb(58 79 102 / 1) !important; }
html:not(.ui-legacy)[data-theme="dark"] .ring-black\/5  { --tw-ring-color: rgb(255 255 255 / .06) !important; }

/* Common arbitrary light surfaces used by legacy-new pages (documented fixes
   instead of touching markup): exact Tailwind arbitrary-class names escaped. */
html:not(.ui-legacy)[data-theme="dark"] .bg-\[\#F8F9FA\] { background-color: var(--ui-bg) !important; }
html:not(.ui-legacy)[data-theme="dark"] .bg-\[\#F1F3F5\] { background-color: var(--ui-surface-2) !important; }
html:not(.ui-legacy)[data-theme="dark"] .bg-\[\#f8fafc\] { background-color: var(--ui-bg) !important; }
html:not(.ui-legacy)[data-theme="dark"] .bg-\[\#f1f5f9\] { background-color: var(--ui-surface-2) !important; }
html:not(.ui-legacy)[data-theme="dark"] .bg-\[\#ffffff\] { background-color: var(--ui-surface) !important; }
html:not(.ui-legacy)[data-theme="dark"] .bg-\[\#EBF3FF\] { background-color: var(--ui-primary-soft) !important; }
html:not(.ui-legacy)[data-theme="dark"] .bg-\[\#EFF6FF\] { background-color: var(--ui-primary-soft) !important; }
html:not(.ui-legacy)[data-theme="dark"] .bg-\[\#F0F6FF\] { background-color: var(--ui-primary-soft) !important; }
html:not(.ui-legacy)[data-theme="dark"] .bg-\[\#DEE2E6\] { background-color: var(--ui-surface-3) !important; }
html:not(.ui-legacy)[data-theme="dark"] .bg-\[\#E9ECEF\] { background-color: var(--ui-surface-3) !important; }
html:not(.ui-legacy)[data-theme="dark"] .bg-\[\#FEF2F2\] { background-color: var(--ui-danger-soft) !important; }
html:not(.ui-legacy)[data-theme="dark"] .bg-\[\#F0FDFA\] { background-color: rgb(26 85 94 / .25) !important; }
html:not(.ui-legacy)[data-theme="dark"] .bg-\[\#FFF7ED\] { background-color: rgb(120 72 32 / .3) !important; }
html:not(.ui-legacy)[data-theme="dark"] .bg-\[\#F0FDF4\] { background-color: rgb(28 94 62 / .25) !important; }
html:not(.ui-legacy)[data-theme="dark"] .bg-\[\#F5F3FF\] { background-color: rgb(76 60 130 / .28) !important; }

/* Dark text on light cards (Tailwind arbitrary tints) → flip to theme text.
   Accent tints (#0D6EFD, #2563EB, #DC2626, …) keep their hue on purpose. */
html:not(.ui-legacy)[data-theme="dark"] .text-\[\#1E293B\] { color: var(--ui-text) !important; }
html:not(.ui-legacy)[data-theme="dark"] .text-\[\#0F172A\] { color: var(--ui-text) !important; }
html:not(.ui-legacy)[data-theme="dark"] .text-\[\#334155\] { color: var(--ui-text) !important; }
html:not(.ui-legacy)[data-theme="dark"] .text-\[\#475569\] { color: var(--ui-text-1) !important; }
html:not(.ui-legacy)[data-theme="dark"] .text-\[\#64748B\] { color: var(--ui-text-2) !important; }
html:not(.ui-legacy)[data-theme="dark"] .text-\[\#94A3B8\] { color: var(--ui-text-3) !important; }
html:not(.ui-legacy)[data-theme="dark"] .text-\[\#CBD5E1\] { color: var(--ui-text-3) !important; }

/* Light bootstrap-ish borders → theme border */
html:not(.ui-legacy)[data-theme="dark"] .border-\[\#DEE2E6\] { border-color: var(--ui-border) !important; }
html:not(.ui-legacy)[data-theme="dark"] .border-\[\#E9ECEF\] { border-color: var(--ui-border-subtle) !important; }
html:not(.ui-legacy)[data-theme="dark"] .border-\[\#DEE2E6\]\/70 { border-color: var(--ui-border) !important; }
html:not(.ui-legacy)[data-theme="dark"] .bg-\[\#F1F3F5\]\/70 { background-color: var(--ui-surface-2) !important; }
html:not(.ui-legacy)[data-theme="dark"] .bg-\[\#F0F6FF\]\/50 { background-color: var(--ui-primary-soft) !important; }

/* Self-contained legacy-new page: /collaboration/chat (.dragon-chat-*). Its
   styles live in-page on Chat.razor, so dark support is provided here. */
html:not(.ui-legacy)[data-theme="dark"] .dragon-chat-page,
html:not(.ui-legacy)[data-theme="dark"] .dragon-chat-conversation,
html:not(.ui-legacy)[data-theme="dark"] .dragon-chat-dashboard { background: #0F1923; color: #DDE4EE; }
html:not(.ui-legacy)[data-theme="dark"] .dragon-chat-layout { background: #2D3F52; }
html:not(.ui-legacy)[data-theme="dark"] .dragon-chat-groups,
html:not(.ui-legacy)[data-theme="dark"] .dragon-chat-title,
html:not(.ui-legacy)[data-theme="dark"] .dragon-chat-message,
html:not(.ui-legacy)[data-theme="dark"] .dragon-chat-composer,
html:not(.ui-legacy)[data-theme="dark"] .dragon-chat-person { background: #1A2535; color: #DDE4EE; }
html:not(.ui-legacy)[data-theme="dark"] .dragon-chat-group { color: #DDE4EE; background: #1A2535; border-color: #2D3F52; }
html:not(.ui-legacy)[data-theme="dark"] .dragon-chat-title { border-bottom-color: #2D3F52; }
html:not(.ui-legacy)[data-theme="dark"] .dragon-chat-title small,
html:not(.ui-legacy)[data-theme="dark"] .dragon-chat-empty { color: #8FA3B8; }
html:not(.ui-legacy)[data-theme="dark"] .dragon-chat-message { border-color: #3A4F66; }
html:not(.ui-legacy)[data-theme="dark"] .dragon-chat-person { color: #DDE4EE; background: #1A2535; border-color: #2D3F52; }
html:not(.ui-legacy)[data-theme="dark"] .dragon-chat-composer { border-top-color: #2D3F52; }
html:not(.ui-legacy)[data-theme="dark"] .dragon-chat-replying { color: #DDE4EE; background: #173B5C; border-color: #2D3F52; }
html:not(.ui-legacy)[data-theme="dark"] .dragon-chat-quote { color: #81D4FA; background: #173B5C; border-color: #3A4F66; }
html:not(.ui-legacy)[data-theme="dark"] .dragon-chat-message.mine,
html:not(.ui-legacy)[data-theme="dark"] .dragon-chat-group.active,
html:not(.ui-legacy)[data-theme="dark"] .dragon-chat-person:hover { color: #fff; background: #0284C7; }

/* ── 3. Component primitives ────────────────────────────────────────────────
   Theme-aware building blocks. Safe to adopt incrementally on old pages.
   Dark rendering comes from the --ui-* token flip above — no per-theme rules
   are needed for new components. */

/* Buttons — extends dragon-store-tokens (.dragon-btn) with outline/soft/sizes */
.dragon-btn-outline {
    background-color: transparent;
    border: 1px solid var(--ui-primary);
    color: var(--ui-primary);
}
.dragon-btn-outline:hover {
    background-color: var(--ui-primary);
    color: #fff;
}
html:not(.ui-legacy).dark .dragon-btn-outline:hover,
html:not(.ui-legacy)[data-theme="dark"] .dragon-btn-outline:hover {
    background-color: var(--ui-primary);
    color: var(--ui-surface);
}

.dragon-btn-soft {
    background-color: var(--ui-primary-soft);
    border: 1px solid var(--ui-primary-border);
    color: var(--ui-primary);
}
.dragon-btn-soft:hover {
    background-color: var(--ui-primary);
    color: #fff;
}
html:not(.ui-legacy).dark .dragon-btn-soft:hover,
html:not(.ui-legacy)[data-theme="dark"] .dragon-btn-soft:hover {
    color: var(--ui-surface);
}

.dragon-btn-sm { padding: .35rem .7rem; font-size: 12px; border-radius: var(--ui-radius-sm); }
.dragon-btn-lg { padding: .65rem 1.35rem; font-size: 15px; border-radius: var(--ui-radius); }

/* Loading state — button keeps its colours, spinner replaces content */
.dragon-btn.is-loading { position: relative; pointer-events: none; opacity: .8; }
.dragon-btn.is-loading > *:not(.dragon-spinner) { visibility: hidden; }
.dragon-btn.is-loading .dragon-spinner {
    position: absolute;
    inset: 0;
    margin: auto;
    display: inline-block;
    width: 16px;
    height: 16px;
    border: 2px solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
    animation: dragon-spin .7s linear infinite;
}

/* Tables — unified header / hover / striped / sticky / compact */
.dragon-table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--ui-font-size);
    color: var(--ui-text);
}
.dragon-table th {
    background-color: var(--ui-table-header-bg);
    color: var(--ui-text-2);
    font-weight: 700;
    text-align: start;
    padding: .6rem .75rem;
    border-bottom: 1px solid var(--ui-border);
    white-space: nowrap;
}
.dragon-table td {
    padding: .55rem .75rem;
    border-bottom: 1px solid var(--ui-border-subtle);
    vertical-align: middle;
}
.dragon-table tbody tr:hover { background-color: var(--ui-table-row-hover); }
.dragon-table--striped tbody tr:nth-of-type(even) { background-color: var(--ui-table-stripe); }
.dragon-table--bordered th,
.dragon-table--bordered td { border: 1px solid var(--ui-border); }
.dragon-table--sticky thead th { position: sticky; top: 0; z-index: 1; }
.dragon-table--compact th,
.dragon-table--compact td { padding: .4rem .55rem; }
.dragon-table__empty { text-align: center; color: var(--ui-text-muted); padding: 2rem 1rem; }

/* Pagination */
.dragon-pagination {
    display: flex;
    flex-wrap: wrap;
    gap: .3rem;
    align-items: center;
    padding: .5rem 0;
}
.dragon-pagination__item {
    min-width: 32px;
    height: 32px;
    padding: 0 .55rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--ui-border);
    border-radius: var(--ui-radius-sm);
    background: var(--ui-surface);
    color: var(--ui-text-2);
    font-size: 13px;
    text-decoration: none;
    cursor: pointer;
    transition: background .15s ease, border-color .15s ease, color .15s ease;
}
.dragon-pagination__item:hover { border-color: var(--ui-primary-border); color: var(--ui-primary); }
.dragon-pagination__item--active {
    background: var(--ui-primary);
    border-color: var(--ui-primary);
    color: #fff;
    font-weight: 700;
}
html:not(.ui-legacy).dark .dragon-pagination__item--active,
html:not(.ui-legacy)[data-theme="dark"] .dragon-pagination__item--active { color: var(--ui-surface); }
.dragon-pagination__item--disabled { opacity: .5; pointer-events: none; }

/* Forms */
.dragon-field { display: flex; flex-direction: column; gap: .3rem; margin-bottom: .85rem; }
/* Opt-in workspace composition: shared primitives, no module-specific palette. */
.dragon-workspace {
    --dragon-surface: var(--ui-surface); --dragon-bg: var(--ui-bg);
    --dragon-border: var(--ui-border); --dragon-text: var(--ui-text);
    --dragon-muted: var(--ui-text-muted); --dragon-primary: var(--ui-primary);
    --dragon-primary-soft: var(--ui-primary-soft); --dragon-primary-hover: var(--ui-primary-hover);
    --dragon-font-sans: var(--ui-font);
    padding: 1rem; min-width: 0; color: var(--ui-text); background: var(--ui-bg);
    font-family: var(--dragon-font-sans); text-align: start;
}
/* مساحة عمل Dragon هي مساحة التطبيق كاملة؛ التباعد الداخلي مسؤول عن راحة القراءة،
   وليس حد عرض يخفي جزءاً من مساحة الشاشة في الشاشات التشغيلية الكبيرة. */
.dragon-workspace__shell { width: 100%; max-width: none; margin-inline: 0; min-width: 0; }
.dragon-workspace__header, .dragon-workspace__actions { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: .75rem; }
.dragon-workspace__header { margin-bottom: 1rem; }
.dragon-workspace__actions { justify-content: flex-start; }
.dragon-workspace__title { font-size: 1.4rem; font-weight: 800; line-height: 1.6; margin: 0 0 .4rem; }
.dragon-workspace .dragon-card { margin-bottom: 1rem; min-width: 0; background: var(--ui-surface); border-color: var(--ui-border); }
.dragon-workspace .dragon-card__header { flex-wrap: wrap; gap: .75rem; }
.dragon-workspace .dragon-label, .dragon-workspace .dragon-table th, .dragon-workspace .dragon-table td { text-align: start; }
.dragon-workspace .dragon-field { min-width: 0; }
.dragon-workspace .dragon-input, .dragon-workspace .dragon-select { max-width: 100%; min-width: 0; }
.dragon-workspace :is(.dragon-input, .dragon-select, .dragon-textarea) { background-color: var(--ui-surface); color: var(--ui-text); border-color: var(--ui-border-strong); }
.dragon-workspace :is(.dragon-input, .dragon-select, .dragon-textarea):disabled { background-color: var(--ui-surface-2); color: var(--ui-text-muted); }
.dragon-workspace .dragon-select { appearance: auto; }
.dragon-workspace__checkbox { accent-color: var(--ui-primary); width: 1.1rem; height: 1.1rem; }
.dragon-workspace .dragon-btn { white-space: normal; text-decoration: none; }
[data-theme="dark"] .dragon-workspace, .dark .dragon-workspace { color-scheme: dark; }
[data-theme="dark"] .dragon-workspace .dragon-btn-primary, .dark .dragon-workspace .dragon-btn-primary { color: var(--ui-text-inverse); }
.dragon-workspace .dragon-tabs { flex-wrap: wrap; margin-bottom: 1rem; }
.dragon-workspace__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr)); gap: 1rem; }
.dragon-workspace__grid > .dragon-workspace__actions { grid-column: 1 / -1; }
.dragon-workspace__notice { padding: .85rem 1rem; margin-bottom: 1rem; border: 1px solid var(--ui-primary-border); border-radius: var(--ui-radius); color: var(--ui-text); background: var(--ui-primary-soft); overflow-wrap: anywhere; }
.dragon-workspace__scroll { max-width: 100%; overflow-x: auto; }
.dragon-workspace__notice--error { color: var(--ui-danger); background: var(--ui-danger-soft); border-color: var(--ui-danger); }
.dragon-workspace__notice--success { color: var(--ui-success); background: var(--ui-success-soft); border-color: var(--ui-success); }
@media (max-width: 575px) { .dragon-workspace { padding: .5rem; } .dragon-workspace .dragon-card { padding: .85rem; } }
.dragon-label { font-size: 13px; font-weight: 700; color: var(--ui-text); }
.dragon-input,
.dragon-select,
.dragon-textarea {
    width: 100%;
    padding: .5rem .7rem;
    font-family: inherit;
    font-size: var(--ui-font-size);
    color: var(--ui-text);
    background-color: var(--ui-surface);
    border: 1px solid var(--ui-border-strong);
    border-radius: var(--ui-radius-sm);
    outline: none;
    transition: border-color .15s ease, box-shadow .15s ease, background-color .15s ease;
}
.dragon-input:focus,
.dragon-select:focus,
.dragon-textarea:focus {
    border-color: var(--ui-primary);
    box-shadow: var(--ui-focus-ring);
}
.dragon-input::placeholder,
.dragon-textarea::placeholder { color: var(--ui-text-muted); }
.dragon-input:disabled,
.dragon-select:disabled,
.dragon-textarea:disabled { background-color: var(--ui-surface-2); color: var(--ui-text-muted); cursor: not-allowed; }
.dragon-select { appearance: none; cursor: pointer; }
.dragon-form-hint { font-size: .78rem; color: var(--ui-text-muted); }
.dragon-form-error { font-size: .8rem; color: var(--ui-danger); }

/* Modal */
.dragon-modal__overlay {
    position: fixed;
    inset: 0;
    z-index: 1060;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    background: rgba(13, 23, 37, .55);
}
.dragon-modal {
    width: min(720px, 96vw);
    max-height: 88vh;
    overflow: auto;
    background: var(--ui-surface);
    color: var(--ui-text);
    border: 1px solid var(--ui-border);
    border-radius: var(--ui-radius-lg);
    box-shadow: var(--ui-shadow-lg);
}
.dragon-modal__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: .9rem 1.1rem;
    border-bottom: 1px solid var(--ui-border);
}
.dragon-modal__title { font-size: 1.02rem; font-weight: 800; margin: 0; }
.dragon-modal__body { padding: 1.1rem; }
.dragon-modal__footer {
    display: flex;
    justify-content: flex-end;
    gap: .5rem;
    padding: .8rem 1.1rem;
    border-top: 1px solid var(--ui-border);
}

/* Tabs */
.dragon-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: .15rem;
    border-bottom: 1px solid var(--ui-border);
    margin-bottom: 1rem;
}
.dragon-tab {
    border: 0;
    background: transparent;
    padding: .5rem .85rem;
    font-size: 14px;
    font-weight: 600;
    color: var(--ui-text-2);
    border-bottom: 2px solid transparent;
    cursor: pointer;
    transition: color .15s ease, border-color .15s ease;
}
.dragon-tab:hover { color: var(--ui-text); }
.dragon-tab--active { color: var(--ui-primary); border-bottom-color: var(--ui-primary); }

/* Badges — semantic status colours via tokens */
.dragon-badge--success { background-color: var(--ui-success-soft); color: var(--ui-success); border-color: var(--ui-border); }
.dragon-badge--warning { background-color: var(--ui-warning-soft); color: var(--ui-warning); border-color: var(--ui-border); }
.dragon-badge--danger  { background-color: var(--ui-danger-soft);  color: var(--ui-danger);  border-color: var(--ui-border); }
.dragon-badge--info    { background-color: var(--ui-info-soft);    color: var(--ui-info);    border-color: var(--ui-border); }
.dragon-badge--neutral { background-color: var(--ui-surface-2);    color: var(--ui-text-2);  border-color: var(--ui-border); }

/* KPI / metric card (used by DashboardMetricCard and dashboards) */
.dragon-kpi {
    background: var(--ui-surface);
    border: 1px solid var(--ui-border);
    border-radius: var(--ui-radius);
    box-shadow: var(--ui-shadow-sm);
    padding: 1rem 1.1rem;
    transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    grid-template-areas: "icon value" "icon label";
    align-items: center;
    column-gap: .8rem;
    text-decoration: none;
}
.dragon-kpi:hover { transform: translateY(-2px); border-color: var(--ui-primary-border); box-shadow: var(--ui-shadow); }
.dragon-kpi__label { grid-area: label; font-size: .8rem; color: var(--ui-text-muted); font-weight: 600; }
.dragon-kpi__value { grid-area: value; font-size: 1.5rem; font-weight: 800; color: var(--ui-text); font-variant-numeric: tabular-nums; }
.dragon-kpi__icon {
    grid-area: icon;
    width: 42px;
    height: 42px;
    border-radius: 14px;
    background: var(--ui-primary-soft);
    color: var(--ui-primary);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* Fleet navigation stays inside the module and works on every operational page. */
.fleet-nav { display: flex; align-items: center; gap: .45rem; overflow-x: auto; padding: .65rem 0 1rem; margin-bottom: .75rem; border-bottom: 1px solid var(--ui-border); scrollbar-width: thin; }
.fleet-nav__link { display: inline-flex; align-items: center; gap: .45rem; flex: 0 0 auto; min-height: 36px; padding: .45rem .7rem; color: var(--ui-text-2); background: var(--ui-surface); border: 1px solid var(--ui-border); border-radius: var(--ui-radius-sm); text-decoration: none; font-size: .82rem; font-weight: 700; }
.fleet-nav__link:hover { color: var(--ui-primary); border-color: var(--ui-primary-border); background: var(--ui-primary-soft); }
.fleet-nav__link--active { color: var(--ui-text-inverse); background: var(--ui-primary); border-color: var(--ui-primary); }
.fleet-nav__link--active:hover { color: var(--ui-text-inverse); background: var(--ui-primary-hover); }

/* Fleet legacy pages consume the Dragon tokens until their markup is split into
   dedicated components. This keeps cards, forms, tables and actions visually
   identical to the rest of Dragon without leaking styles into other modules. */
.fleet-page { padding: 1rem; color: var(--ui-text); background: var(--ui-bg); }
.fleet-page .card { margin-bottom: 1rem; border: 1px solid var(--ui-border); border-radius: var(--ui-radius); background: var(--ui-surface); box-shadow: var(--ui-shadow-sm); overflow: hidden; }
.fleet-page .card-header { color: var(--ui-text-inverse); background: var(--ui-primary) !important; border-color: var(--ui-primary); font-weight: 800; }
.fleet-page .card-body { color: var(--ui-text); background: var(--ui-surface); }
.fleet-page .table-responsive { border: 0; }
.fleet-page .table { --bs-table-bg: var(--ui-surface); --bs-table-color: var(--ui-text); --bs-table-border-color: var(--ui-border); margin-bottom: 0; color: var(--ui-text); }
.fleet-page .table > :not(caption) > * > * { background: var(--ui-surface); color: var(--ui-text); border-color: var(--ui-border); }
.fleet-page .table thead > tr > * { color: var(--ui-text-2); background: var(--ui-surface-2) !important; border-bottom-width: 1px; font-size: .8rem; font-weight: 800; white-space: nowrap; }
.fleet-page .table-hover > tbody > tr:hover > * { color: var(--ui-text); background: var(--ui-primary-soft); }
.fleet-page .form-label, .fleet-page label { color: var(--ui-text); font-weight: 700; font-size: .84rem; }
.fleet-page .form-control, .fleet-page .form-select { min-height: 38px; color: var(--ui-text); background-color: var(--ui-surface); border-color: var(--ui-border-strong); border-radius: var(--ui-radius-sm); }
.fleet-page .form-control:focus, .fleet-page .form-select:focus { color: var(--ui-text); background-color: var(--ui-surface); border-color: var(--ui-primary); box-shadow: 0 0 0 .18rem color-mix(in srgb, var(--ui-primary) 20%, transparent); }
.fleet-page .btn { border-radius: var(--ui-radius-sm); font-weight: 700; }
.fleet-page .btn-primary { color: var(--ui-text-inverse); background: var(--ui-primary); border-color: var(--ui-primary); }
.fleet-page .btn-success { color: var(--ui-text-inverse); background: var(--ui-success); border-color: var(--ui-success); }
.fleet-page .alert { border-radius: var(--ui-radius-sm); border-color: var(--ui-border); }

/* Fleet Home metrics: icons are deliberately prominent and never compete with text. */
.dragon-workspace__grid > .dragon-kpi { min-height: 104px; }
.dragon-kpi__icon { width: 58px; height: 58px; border-radius: 18px; font-size: 1.55rem; flex: 0 0 58px; }
.dragon-kpi__value { line-height: 1.1; font-size: clamp(1.5rem, 2vw, 2.05rem); }
.dragon-kpi__label { margin-top: .2rem; line-height: 1.35; }
@media (max-width: 575px) {
    .fleet-page { padding: .5rem; }
    .fleet-nav { padding-inline: .1rem; }
    .fleet-nav__link { min-height: 34px; padding: .4rem .6rem; }
    .dragon-kpi__icon { width: 50px; height: 50px; font-size: 1.3rem; }
}

/* Section headers used by settings-style pages */
.dragon-section-title {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: .75rem;
    margin: .9rem .15rem .55rem;
    color: var(--ui-text);
}
.dragon-section-title span { font-weight: 900; }
.dragon-section-title small { color: var(--ui-text-muted); }

/* Empty state */
.dragon-empty {
    color: var(--ui-text-muted);
    text-align: center;
    padding: 2.25rem 1rem;
    border: 1px dashed var(--ui-border-strong);
    border-radius: var(--ui-radius-lg);
    background: var(--ui-surface-2);
}
.dragon-empty i { font-size: 1.75rem; color: var(--ui-primary); }

/* Focus-visibility helper for buttons/links built from raw elements */
.dragon-focus-ring:focus-visible { outline: none; box-shadow: var(--ui-focus-ring); }

/* Scrollbar polish — applied identically in both modes; only the token colors
   (--ui-border-strong / --ui-bg) adapt to keep equal structure day & night. */
.odoo-content ::-webkit-scrollbar { width: 10px; height: 10px; }
.odoo-content ::-webkit-scrollbar-track { background: transparent; }
.odoo-content ::-webkit-scrollbar-thumb {
    background: var(--ui-border-strong);
    border-radius: 999px;
    border: 2px solid var(--ui-bg);
}
.odoo-content ::-webkit-scrollbar-thumb:hover { background: var(--ui-text-muted); }

/* RTL-safe helpers — direction-neutral so they work in both modes */

/* Main-layout overlays: canonical light/dark tokens, not fixed light surfaces. */

.command-palette-backdrop {
    position: fixed; top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(15, 23, 42, 0.65); backdrop-filter: blur(4px);
    z-index: 9999; display: flex; align-items: flex-start; justify-content: center;
    padding-top: 5vh; animation: cpFadeIn 0.15s ease-out;
}
.command-palette-modal {
    background: var(--ui-surface); width: 100%; max-width: 650px; border-radius: 14px;
    box-shadow: 0 20px 40px rgba(0,0,0,0.3); overflow: hidden; display: flex; flex-direction: column;
    max-height: 80vh; border: 1px solid var(--ui-border);
}
.cp-header {
    display: flex; align-items: center; padding: 1rem 1.25rem;
    border-bottom: 1px solid var(--ui-border-subtle); background: var(--ui-surface-2); position: relative;
}
.cp-search-icon { color: var(--ui-primary-hover); font-size: 1.25rem; margin-inline-end: 0.85rem; }
.cp-input {
    flex: 1; border: none; outline: none; background: transparent;
    font-size: 1.1rem; font-weight: 500; color: var(--ui-text);
}
.cp-clear-btn { background: none; border: none; color: var(--ui-text-2); cursor: pointer; padding: 4px 8px; font-size: 1rem; }
.cp-clear-btn:hover { color: var(--ui-text); }
.cp-badge-esc {
    background: var(--ui-border); color: var(--ui-text-2); font-size: 0.72rem; font-weight: 700;
    padding: 2px 6px; border-radius: 4px; margin-inline-start: 8px;
}
.cp-body { flex: 1; overflow-y: auto; padding: 0.5rem; min-height: 200px; max-height: 480px; }
.cp-section-header {
    font-size: 0.78rem; font-weight: 700; color: var(--ui-text-2); text-transform: uppercase;
    padding: 0.5rem 0.75rem 0.25rem; letter-spacing: 0.5px;
}
.cp-results-list { display: flex; flex-direction: column; gap: 4px; }
.cp-item {
    display: flex; align-items: center; padding: 0.65rem 0.85rem; border-radius: 8px;
    cursor: pointer; transition: background 0.12s ease; text-decoration: none; color: inherit;
}
.cp-item:hover, .cp-item--selected { background: var(--ui-primary-soft); border-inline-start: 4px solid var(--ui-primary-hover); }
.cp-item-icon {
    width: 36px; height: 36px; border-radius: 8px; background: var(--ui-primary-soft); color: var(--ui-primary-hover);
    display: flex; align-items: center; justify-content: center; font-size: 1rem; margin-inline-end: 0.85rem;
}
.cp-item--selected .cp-item-icon { background: var(--ui-primary-hover); color: var(--ui-text-inverse); }
.cp-item-content { flex: 1; min-width: 0; }
.cp-item-title { font-weight: 600; font-size: 0.95rem; color: var(--ui-text); display: flex; align-items: center; justify-content: space-between; }
.cp-item-category { font-weight: 500; font-size: 0.75rem; color: var(--ui-text-2); background: var(--ui-surface-2); padding: 2px 8px; border-radius: 12px; }
.cp-item-desc { font-size: 0.8rem; color: var(--ui-text-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 2px; }
.cp-item-action { color: var(--ui-border-strong); font-size: 0.85rem; }
.cp-item--selected .cp-item-action { color: var(--ui-primary-hover); }
.cp-empty-state { text-align: center; padding: 3rem 1.5rem; color: var(--ui-text-2); }
.cp-footer {
    display: flex; align-items: center; justify-content: flex-end; gap: 1.25rem;
    padding: 0.6rem 1.25rem; border-top: 1px solid var(--ui-surface-2); background: var(--ui-surface-2); font-size: 0.78rem; color: var(--ui-text-2);
}
.cp-footer kbd { background: var(--ui-surface); border: 1px solid var(--ui-border-strong); border-radius: 3px; padding: 1px 4px; font-size: 0.7rem; font-family: monospace; }
@keyframes cpFadeIn { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: translateY(0); } }


/* ─── Notification Bell Wrapper ─────────────────────────────────────────── */
.notif-bell-wrapper {
    position: relative;
    outline: none;
}

.notif-bell-btn {
    position: relative;
}

.notif-badge {
    position: absolute;
    top: -4px;
    right: -5px;
    min-width: 17px;
    height: 17px;
    padding: 0 4px;
    background: #ef4444;
    color: #fff;
    border-radius: 99px;
    font-size: 0.62rem;
    font-weight: 700;
    line-height: 17px;
    text-align: center;
    pointer-events: none;
    animation: notifPop 0.3s ease;
}

@keyframes notifPop {
    0%   { transform: scale(0.5); opacity: 0; }
    70%  { transform: scale(1.2); }
    100% { transform: scale(1);   opacity: 1; }
}

/* ─── Notification Panel ─────────────────────────────────────────────────── */
.notif-panel {
    position: absolute;
    top: calc(100% + 10px);
    right: 0;
    width: 370px;
    max-width: 96vw;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 14px;
    box-shadow: 0 16px 48px rgba(0,0,0,0.15), 0 4px 12px rgba(0,0,0,0.06);
    z-index: 9000;
    overflow: hidden;
    animation: panelSlideIn 0.18s ease-out;
}

[dir="rtl"] .notif-panel {
    right: auto;
    left: 0;
}

@keyframes panelSlideIn {
    from { opacity: 0; transform: translateY(-8px) scale(0.97); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* ─── Header ─────────────────────────────────────────────────────────────── */
.notif-panel__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 16px 10px;
    border-bottom: 1px solid #e2e8f0;
    font-weight: 700;
    font-size: 0.95rem;
    color: #0f172a;
}

.notif-markall-btn {
    font-size: 0.75rem;
    font-weight: 700;
    background: #16a34a;
    color: #ffffff !important;
    border: 1px solid #15803d;
    border-radius: 6px;
    padding: 4px 10px;
    cursor: pointer;
    box-shadow: 0 1px 3px rgba(22, 163, 74, 0.2);
    transition: all 0.2s ease;
}
.notif-markall-btn:hover { background: #15803d; color: #ffffff !important; }

/* ─── Tabs ────────────────────────────────────────────────────────────────── */
.notif-panel__tabs {
    display: flex;
    gap: 2px;
    padding: 8px 12px 0;
    border-bottom: 1px solid #e2e8f0;
}

.notif-tab {
    flex: 1;
    font-size: 0.8rem;
    font-weight: 700;
    padding: 8px 6px;
    background: transparent;
    border: none;
    border-bottom: 3px solid transparent;
    color: #475569;
    cursor: pointer;
    transition: color 0.15s, border-color 0.15s;
    text-align: center;
}

.notif-tab.active {
    color: #0284c7;
    border-bottom-color: #0284c7;
}

.notif-tab:hover { color: #0369a1; }

/* ─── List ────────────────────────────────────────────────────────────────── */
.notif-panel__list {
    max-height: 380px;
    overflow-y: auto;
    padding: 6px 0;
}

.notif-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 40px 20px;
    color: #64748b;
    font-size: 0.85rem;
}

.notif-empty i { font-size: 2rem; opacity: 0.5; }

/* ─── Notification Item ──────────────────────────────────────────────────── */
.notif-item {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 10px 16px;
    cursor: pointer;
    transition: background 0.15s;
    position: relative;
    border-bottom: 1px solid #f1f5f9;
}

.notif-item:hover { background: #f8fafc; }

.notif-item--unread { background: #f0f9ff; }
.notif-item--unread:hover { background: #e0f2fe; }

/* The panel is rendered inside .clean-topbar, whose legacy rule applies white
   text to every descendant. Reassert semantic light-theme foregrounds here;
   otherwise unread pale-blue cards have white-on-blue text with poor contrast. */
:root:not([data-theme="dark"]) .clean-topbar .notif-panel__header,
:root:not([data-theme="dark"]) .clean-topbar .notif-panel__header span,
:root:not([data-theme="dark"]) .clean-topbar .notif-panel__header i { color: #0f172a !important; }
:root:not([data-theme="dark"]) .clean-topbar .notif-tab { color: #475569 !important; }
:root:not([data-theme="dark"]) .clean-topbar .notif-tab.active { color: #0369a1 !important; }
:root:not([data-theme="dark"]) .clean-topbar .notif-item__title { color: #0f172a !important; }
:root:not([data-theme="dark"]) .clean-topbar .notif-item__msg { color: #334155 !important; }
:root:not([data-theme="dark"]) .clean-topbar .notif-item__time { color: #475569 !important; }
:root:not([data-theme="dark"]) .clean-topbar .notif-item__dot { background: #0284c7 !important; }
:root:not([data-theme="dark"]) .clean-topbar .notif-panel__footer a { color: #0369a1 !important; }
:root:not([data-theme="dark"]) .clean-topbar .notif-empty,
:root:not([data-theme="dark"]) .clean-topbar .notif-empty i { color: #475569 !important; }

.notif-item__icon {
    width: 34px;
    height: 34px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.85rem;
    flex-shrink: 0;
}

.notif-icon--approval  { background: #fef3c7; color: #b45309; border: 1px solid #fde68a; }
.notif-icon--budget    { background: #ffedd5; color: #c2410c; border: 1px solid #fed7aa; }
.notif-icon--receipt   { background: #dcfce7; color: #15803d; border: 1px solid #bbf7d0; }
.notif-icon--invoice   { background: #dbeafe; color: #1d4ed8; border: 1px solid #bfdbfe; }
.notif-icon--info      { background: #e0f2fe; color: #0369a1; border: 1px solid #bae6fd; }
.notif-icon--warning   { background: #fef9c3; color: #a16207; border: 1px solid #fef08a; }
.notif-icon--error     { background: #ffe4e6; color: #be123c; border: 1px solid #fecdd3; }

.notif-item__body {
    flex: 1;
    min-width: 0;
}

.notif-item__title {
    font-size: 0.83rem;
    font-weight: 700;
    color: #0f172a;
    margin-bottom: 2px;
}

.notif-item__msg {
    font-size: 0.78rem;
    color: #334155;
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.notif-item__time {
    font-size: 0.72rem;
    font-weight: 600;
    color: #475569;
    margin-top: 4px;
}

.notif-item__dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #0284c7;
    flex-shrink: 0;
    margin-top: 6px;
}

/* ─── Footer ──────────────────────────────────────────────────────────────── */
.notif-panel__footer {
    padding: 10px 16px;
    border-top: 1px solid #e2e8f0;
    text-align: center;
}

.notif-panel__footer a {
    font-size: 0.82rem;
    font-weight: 700;
    color: #0284c7;
    text-decoration: none;
}

.notif-panel__footer a:hover { color: #0369a1; text-decoration: underline; }

/* Dark mode */
:root[data-theme="dark"] .notif-panel {
    background: #1e293b;
    border-color: #334155;
    box-shadow: 0 16px 48px rgba(0,0,0,0.4);
}
:root[data-theme="dark"] .notif-item:hover { background: #334155; }
:root[data-theme="dark"] .notif-item--unread { background: #0f172a; }
:root[data-theme="dark"] .notif-item--unread:hover { background: #1e293b; }
:root[data-theme="dark"] .notif-item__title { color: #f8fafc; }
:root[data-theme="dark"] .notif-item__msg { color: #cbd5e1; }
:root[data-theme="dark"] .notif-item__time { color: #94a3b8; }
:root[data-theme="dark"] .notif-panel__header { color: #f8fafc; border-color: #334155; }
:root[data-theme="dark"] .notif-panel__footer { border-color: #334155; }
:root[data-theme="dark"] .notif-panel__tabs { border-color: #334155; }
:root[data-theme="dark"] .notif-tab { color: #94a3b8; }
:root[data-theme="dark"] .notif-tab.active { color: #38bdf8; border-bottom-color: #38bdf8; }
:root[data-theme="dark"] .notif-empty { color: #cbd5e1; }
:root[data-theme="dark"] .notif-panel__footer a { color: #7dd3fc; }
:root[data-theme="dark"] .notif-icon--approval { background: #4a3410; color: #fcd34d; border-color: #76581b; }
:root[data-theme="dark"] .notif-icon--budget { background: #4a2813; color: #fdba74; border-color: #7c4220; }
:root[data-theme="dark"] .notif-icon--receipt { background: #123d2a; color: #86efac; border-color: #1f6b46; }
:root[data-theme="dark"] .notif-icon--invoice { background: #172f5f; color: #93c5fd; border-color: #2855a0; }
:root[data-theme="dark"] .notif-icon--info { background: #123a52; color: #7dd3fc; border-color: #1f6285; }
:root[data-theme="dark"] .notif-icon--warning { background: #4b4010; color: #fde68a; border-color: #7c681a; }
:root[data-theme="dark"] .notif-icon--error { background: #4a1825; color: #fda4af; border-color: #7c263b; }

/* Scoped overrides beat the legacy topbar's white descendant text. */
.command-palette-backdrop { padding-inline: 12px; }
.cp-input { min-width: 0; }
.cp-input::placeholder { color: var(--ui-text-2); opacity: 1; }
.cp-input:focus-visible, .cp-clear-btn:focus-visible { outline: 2px solid var(--ui-primary-hover); outline-offset: 2px; }
.cp-item { border-inline-start: 4px solid transparent; }
.cp-item-icon { flex-shrink: 0; }
.cp-item-title { flex-wrap: wrap; gap: 4px; }
.cp-item-action { color: var(--ui-text-2); }
.cp-footer { flex-wrap: wrap; gap: .75rem; }
.cp-footer kbd { color: var(--ui-text); }
.command-palette-modal .text-muted { color: var(--ui-text-2) !important; }
.odoo-shell .clean-topbar .notif-panel { background: var(--ui-surface); border-color: var(--ui-border); color: var(--ui-text); }
.odoo-shell .clean-topbar .notif-panel { position: fixed; top: 64px; left: auto; right: 16px; max-height: calc(100dvh - 80px); overflow: auto; }
[dir="rtl"] .odoo-shell .clean-topbar .notif-panel,
.odoo-shell[dir="rtl"] .clean-topbar .notif-panel { right: auto; left: 16px; }
.odoo-shell .clean-topbar .notif-panel * { color: inherit; }
.odoo-shell .clean-topbar .notif-panel .notif-panel__header,
.odoo-shell .clean-topbar .notif-panel .notif-panel__header span,
.odoo-shell .clean-topbar .notif-panel .notif-panel__header i,
.odoo-shell .clean-topbar .notif-panel .notif-item__title { color: var(--ui-text) !important; }
.odoo-shell .clean-topbar .notif-panel .notif-item__msg { color: var(--ui-text) !important; }
.odoo-shell .clean-topbar .notif-panel .notif-tab,
.odoo-shell .clean-topbar .notif-panel .notif-item__time,
.odoo-shell .clean-topbar .notif-panel .notif-empty,
.odoo-shell .clean-topbar .notif-panel .notif-empty i { color: var(--ui-text-2) !important; }
.odoo-shell .clean-topbar .notif-panel .notif-tab.active,
.odoo-shell .clean-topbar .notif-panel .notif-panel__footer a { color: var(--ui-primary-hover) !important; }
.odoo-shell .clean-topbar .notif-panel .notif-item--unread .notif-item__time { color: var(--ui-text) !important; }
.odoo-shell .clean-topbar .notif-panel .notif-markall-btn { background: var(--ui-primary-hover); border-color: var(--ui-primary-hover); color: var(--ui-text-inverse) !important; }
.odoo-shell .clean-topbar .notif-panel .notif-markall-btn i { color: inherit !important; }
.odoo-shell .clean-topbar .notif-item--unread { background: var(--ui-primary-soft); }
.odoo-shell .clean-topbar .notif-item:hover { background: var(--ui-surface-2); }
.odoo-shell .clean-topbar .notif-panel__header,
.odoo-shell .clean-topbar .notif-panel__tabs,
.odoo-shell .clean-topbar .notif-panel__footer,
.odoo-shell .clean-topbar .notif-item { border-color: var(--ui-border); }
.odoo-shell .clean-topbar .notif-panel .notif-item__icon { color: var(--ui-text); background: var(--ui-surface-3); border-color: var(--ui-border-strong); }
.odoo-shell .clean-topbar .notif-panel .notif-icon--approval,
.odoo-shell .clean-topbar .notif-panel .notif-icon--budget,
.odoo-shell .clean-topbar .notif-panel .notif-icon--warning { color: var(--ui-warning); background: var(--ui-warning-soft); }
.odoo-shell .clean-topbar .notif-panel .notif-icon--receipt { color: var(--ui-success); background: var(--ui-success-soft); }
.odoo-shell .clean-topbar .notif-panel .notif-icon--error { color: var(--ui-danger); background: var(--ui-danger-soft); }
.odoo-shell .clean-topbar .notif-panel .notif-icon--invoice,
.odoo-shell .clean-topbar .notif-panel .notif-icon--info { color: var(--ui-primary-hover); background: var(--ui-primary-soft); }
.odoo-shell .clean-topbar .notif-panel button:focus-visible,
.odoo-shell .clean-topbar .notif-panel a:focus-visible { outline: 2px solid var(--ui-primary-hover); outline-offset: -2px; }
.collaboration-chat-panel { position: absolute; top: 60px; inset-inline-end: 140px; width: 460px; max-width: calc(100vw - 24px); max-height: calc(100dvh - 84px); overflow: auto; z-index: 1050; background: var(--ui-surface); color: var(--ui-text); border-color: var(--ui-border); }
.collaboration-chat-panel .collaboration-chat-header { background: var(--ui-surface-2); color: var(--ui-text); border-bottom: 3px solid var(--ui-primary); flex-wrap: wrap; gap: .5rem; }
.collaboration-chat-panel .text-muted,
.collaboration-chat-panel .text-white-50 { color: var(--ui-text-2) !important; }
.collaboration-chat-panel .chat-modal-body { background: var(--ui-bg); color: var(--ui-text); }
.collaboration-chat-panel .chat-modal-surface,
.collaboration-chat-panel .chat-bubble-received { background: var(--ui-surface); color: var(--ui-text); border-color: var(--ui-border) !important; }
.collaboration-chat-panel .chat-modal-subsurface { background: var(--ui-surface-2); flex-wrap: wrap; }
.collaboration-chat-panel .chat-bubble-sender-title { color: var(--ui-primary-hover) !important; }
.collaboration-chat-panel .chat-bubble-sent { background: var(--ui-primary-hover); color: var(--ui-text-inverse); }
.collaboration-chat-panel .chat-bubble-sent .text-muted,
.collaboration-chat-panel .chat-bubble-sent .text-white-50,
.collaboration-chat-panel .chat-bubble-sent a { color: var(--ui-text-inverse) !important; }
.collaboration-chat-panel .form-control,
.collaboration-chat-panel .form-select { background-color: var(--ui-surface); color: var(--ui-text); border-color: var(--ui-border-strong); }
.collaboration-chat-panel input::placeholder { color: var(--ui-text-2); opacity: 1; }
.collaboration-chat-panel .text-primary,
.collaboration-chat-panel .text-info { color: var(--ui-primary-hover) !important; }
.collaboration-chat-panel .text-warning { color: var(--ui-warning) !important; }
[data-theme="dark"] .collaboration-chat-panel .btn-close { filter: invert(1); }
.odoo-shell .odoo-app-drawer { background: var(--ui-surface); color: var(--ui-text); border-color: var(--ui-border); }
.odoo-shell .odoo-app-drawer__header { border-color: var(--ui-border); }
.odoo-shell .odoo-close-button { background: var(--ui-surface-2); color: var(--ui-text); border-color: var(--ui-border); }
.odoo-shell .odoo-app-tile__title { color: var(--ui-text); }
.odoo-shell .odoo-app-tile__icon i { color: var(--ui-primary-hover); }
.odoo-shell .odoo-app-tile__desc,
.odoo-shell .odoo-app-drawer .text-muted { color: var(--ui-text-2) !important; }
.odoo-shell .odoo-app-tile { background: var(--ui-surface); border-color: var(--ui-border); }
.odoo-shell .odoo-app-tile:hover { background: var(--ui-surface-2); }
.odoo-shell .clean-module-dropdown__menu { background: var(--ui-surface); border-color: var(--ui-border); }
.odoo-shell .clean-module-dropdown__group-title { color: var(--ui-text-2); }
.odoo-shell .clean-module-dropdown__link { color: var(--ui-text); }
.odoo-shell .clean-module-dropdown__link i { color: var(--ui-primary-hover); }
.odoo-shell .clean-module-dropdown__link:hover,
.odoo-shell .clean-module-dropdown__link.active { background: var(--ui-primary-soft); color: var(--ui-text); }
.cp-item--selected .cp-item-desc { color: var(--ui-text); }
@media (max-width: 600px) {
    .collaboration-chat-panel { inset-inline: 12px; width: auto; }
    .odoo-shell .clean-topbar .notif-panel,
    [dir="rtl"] .odoo-shell .clean-topbar .notif-panel,
    .odoo-shell[dir="rtl"] .clean-topbar .notif-panel { position: fixed; top: 64px; left: 12px; right: 12px; width: auto; max-width: none; max-height: calc(100dvh - 80px); overflow: auto; }
    .notif-panel__list { max-height: calc(100dvh - 240px); }
}

/* ============================================================================
   Projects – Contract Workspace (POSS Phase 3)
   Scoped, token-only styling for Pages/Projects/ProjectContractWorkspace.razor.
   Every selector is nested under .project-contract-workspace, so no global
   .card/.table/.btn/.nav-* rule, Portfolio screen, Topbar, Sidebar or legacy
   page is affected. Light & Dark both resolve from the shared --ui-* tokens.
   No hard-coded colors/fonts/shadows and no page-inline CSS.
   ============================================================================ */
.project-contract-workspace {
    font-family: var(--ui-font);
    color: var(--ui-text);
}

.project-contract-workspace .text-muted { color: var(--ui-text-2) !important; }
.project-contract-workspace .form-text { color: var(--ui-text-muted); }
.project-contract-workspace h4,
.project-contract-workspace h6 { color: var(--ui-text); }

/* Surfaces */
.project-contract-workspace .card {
    background-color: var(--ui-surface);
    border: 1px solid var(--ui-border);
    border-radius: var(--ui-radius);
    box-shadow: var(--ui-shadow);
    color: var(--ui-text);
}
.project-contract-workspace .card-body { color: var(--ui-text); }
.project-contract-workspace .bg-light {
    background-color: var(--ui-surface-2) !important;
    border-color: var(--ui-border) !important;
    color: var(--ui-text);
}
.project-contract-workspace .border,
.project-contract-workspace .border-top { border-color: var(--ui-border) !important; }

/* Tab bar */
.project-contract-workspace .nav-tabs { border-bottom-color: var(--ui-border); }
.project-contract-workspace .nav-tabs .nav-link {
    color: var(--ui-text-2);
    border: 1px solid transparent;
    border-top-left-radius: var(--ui-radius-sm);
    border-top-right-radius: var(--ui-radius-sm);
    font-weight: 600;
}
.project-contract-workspace .nav-tabs .nav-link:hover,
.project-contract-workspace .nav-tabs .nav-link:focus {
    color: var(--ui-primary);
    border-color: var(--ui-border) var(--ui-border) transparent;
}
.project-contract-workspace .nav-tabs .nav-link.active {
    color: var(--ui-primary);
    background-color: var(--ui-surface);
    border-color: var(--ui-border) var(--ui-border) var(--ui-surface);
    font-weight: 700;
}

/* Forms */
.project-contract-workspace .form-label { color: var(--ui-text-2); font-weight: 600; }
.project-contract-workspace .form-control,
.project-contract-workspace .form-select {
    background-color: var(--ui-surface);
    color: var(--ui-text);
    border-color: var(--ui-border-strong);
    border-radius: var(--ui-radius-sm);
}
.project-contract-workspace .form-control:focus,
.project-contract-workspace .form-select:focus {
    background-color: var(--ui-surface);
    color: var(--ui-text);
    border-color: var(--ui-primary);
    box-shadow: var(--ui-focus-ring);
}
.project-contract-workspace .form-control::placeholder { color: var(--ui-text-muted); opacity: 1; }
.project-contract-workspace .form-control[readonly],
.project-contract-workspace .form-control:disabled,
.project-contract-workspace .form-select:disabled {
    background-color: var(--ui-surface-2);
    color: var(--ui-text-2);
}
.project-contract-workspace .form-check-input {
    background-color: var(--ui-surface);
    border-color: var(--ui-border-strong);
}
.project-contract-workspace .form-check-input:checked {
    background-color: var(--ui-primary);
    border-color: var(--ui-primary);
}

/* Buttons */
.project-contract-workspace .btn { border-radius: var(--ui-radius-sm); font-weight: 600; }
.project-contract-workspace .btn-primary {
    background-color: var(--ui-primary);
    border-color: var(--ui-primary);
    color: var(--ui-text-inverse);
}
.project-contract-workspace .btn-primary:hover,
.project-contract-workspace .btn-primary:focus {
    background-color: var(--ui-primary-hover);
    border-color: var(--ui-primary-hover);
    color: var(--ui-text-inverse);
}
.project-contract-workspace .btn-outline-primary {
    color: var(--ui-primary);
    border-color: var(--ui-primary);
}
.project-contract-workspace .btn-outline-primary:hover,
.project-contract-workspace .btn-outline-primary:focus {
    background-color: var(--ui-primary);
    color: var(--ui-text-inverse);
}
.project-contract-workspace .btn-outline-danger {
    color: var(--ui-danger);
    border-color: var(--ui-danger);
}
.project-contract-workspace .btn-outline-danger:hover,
.project-contract-workspace .btn-outline-danger:focus {
    background-color: var(--ui-danger);
    color: var(--ui-text-inverse);
}
.project-contract-workspace .btn-outline-secondary {
    color: var(--ui-text-2);
    border-color: var(--ui-border-strong);
}
.project-contract-workspace .btn-outline-secondary:hover,
.project-contract-workspace .btn-outline-secondary:focus {
    background-color: var(--ui-surface-2);
    color: var(--ui-text);
}

/* Tables */
.project-contract-workspace .table {
    color: var(--ui-text);
    border-color: var(--ui-border);
}
.project-contract-workspace .table > :not(caption) > * > * { border-color: var(--ui-border); }
.project-contract-workspace .table thead th {
    background-color: var(--ui-table-header-bg);
    color: var(--ui-text);
    border-color: var(--ui-border);
}
.project-contract-workspace .table tbody tr:hover > * { background-color: var(--ui-table-row-hover); }
.project-contract-workspace .table-light,
.project-contract-workspace .table-light > th,
.project-contract-workspace .table-light > td {
    background-color: var(--ui-surface-2);
    color: var(--ui-text);
}
.project-contract-workspace .table a { color: var(--ui-primary); }

/* Status badges */
.project-contract-workspace .badge { border-radius: var(--ui-radius-full); font-weight: 700; }
.project-contract-workspace .badge.bg-secondary { background-color: var(--ui-text-2) !important; color: var(--ui-text-inverse) !important; }
.project-contract-workspace .badge.bg-primary { background-color: var(--ui-primary) !important; color: var(--ui-text-inverse) !important; }
.project-contract-workspace .badge.bg-success { background-color: var(--ui-success) !important; color: var(--ui-text-inverse) !important; }
.project-contract-workspace .badge.bg-danger { background-color: var(--ui-danger) !important; color: var(--ui-text-inverse) !important; }
.project-contract-workspace .badge.bg-dark { background-color: var(--ui-surface-3) !important; color: var(--ui-text) !important; }
.project-contract-workspace .badge.bg-info { background-color: var(--ui-info-soft) !important; color: var(--ui-info) !important; }
.project-contract-workspace .badge.bg-warning { background-color: var(--ui-warning-soft) !important; color: var(--ui-warning) !important; }

/* Alerts + links */
.project-contract-workspace .alert-success {
    background-color: var(--ui-success-soft);
    border-color: var(--ui-success);
    color: var(--ui-success);
}
.project-contract-workspace .alert-danger {
    background-color: var(--ui-danger-soft);
    border-color: var(--ui-danger);
    color: var(--ui-danger);
}
.project-contract-workspace .text-primary { color: var(--ui-primary) !important; }
.project-contract-workspace a { color: var(--ui-primary); }
.project-contract-workspace a:hover { color: var(--ui-primary-hover); }
[data-theme="dark"] .project-contract-workspace .btn-close { filter: invert(1); }

/* Accounting & Sales legacy controls use the same canonical tokens as dragon primitives.
   Scoped to accounting workspace and erp-sales-workspace (excluding invoices/returns). */
:is(.accounting-workspace .odoo-content, .erp-sales-workspace) :is(.card, .modal-content) {
    background: var(--ui-surface); color: var(--ui-text);
    border: 1px solid var(--ui-border); border-radius: var(--ui-radius);
    box-shadow: var(--ui-shadow-sm);
}
:is(.accounting-workspace .odoo-content, .erp-sales-workspace) :is(.card-header, .modal-header, .modal-footer) {
    background: var(--ui-surface-2) !important; color: var(--ui-text) !important;
    border-color: var(--ui-border);
}
:is(.accounting-workspace .odoo-content, .erp-sales-workspace) :is(.card-header, .modal-header) .text-white { color: var(--ui-text) !important; }
:is(.accounting-workspace .odoo-content, .erp-sales-workspace) :is(.form-control, .form-select) {
    background-color: var(--ui-surface-2) !important; color: var(--ui-text) !important;
    border: 1px solid var(--ui-border); border-radius: var(--ui-radius-sm);
    min-height: 36px; font: inherit;
}
:is(.accounting-workspace .odoo-content, .erp-sales-workspace) :is(.form-control, .form-select):focus {
    border-color: var(--ui-primary); box-shadow: var(--ui-focus-ring);
}
:is(.accounting-workspace .odoo-content, .erp-sales-workspace) input::placeholder { color: var(--ui-text-2); opacity: 1; }
:is(.accounting-workspace .odoo-content, .erp-sales-workspace) .form-control:disabled { opacity: .7; cursor: not-allowed; }
:is(.accounting-workspace .odoo-content, .erp-sales-workspace) .table {
    --bs-table-bg: var(--ui-surface); --bs-table-color: var(--ui-text);
    --bs-table-border-color: var(--ui-border); --bs-table-hover-bg: var(--ui-table-row-hover);
    --bs-table-hover-color: var(--ui-text); --bs-table-striped-bg: var(--ui-table-stripe);
    --bs-table-striped-color: var(--ui-text); color: var(--ui-text); border-color: var(--ui-border);
}
:is(.accounting-workspace .odoo-content, .erp-sales-workspace) .table > thead > tr > th {
    background: var(--ui-table-header-bg) !important; color: var(--ui-text-2) !important;
    border-color: var(--ui-border); padding: .6rem .75rem;
}
:is(.accounting-workspace .odoo-content, .erp-sales-workspace) .table :is(td, th) { border-color: var(--ui-border); vertical-align: middle; }
:is(.accounting-workspace .odoo-content, .erp-sales-workspace) .btn {
    border-radius: var(--ui-radius-sm); padding: .45rem .85rem; font-weight: 600;
}
:is(.accounting-workspace .odoo-content, .erp-sales-workspace) :is(.btn-primary, .btn-success) {
    background: var(--ui-primary-hover); border-color: var(--ui-primary-hover); color: var(--ui-text-inverse);
}
:is(.accounting-workspace .odoo-content, .erp-sales-workspace) :is(.btn-secondary, .btn-outline-secondary, .btn-outline-dark, .btn-light) {
    background: var(--ui-surface); border-color: var(--ui-border-strong); color: var(--ui-text);
}
:is(.accounting-workspace .odoo-content, .erp-sales-workspace) :is(.btn-outline-primary, .btn-outline-info, .btn-outline-success) {
    background: var(--ui-surface); border-color: var(--ui-primary-border); color: var(--ui-primary-hover);
}
:is(.accounting-workspace .odoo-content, .erp-sales-workspace) .btn:hover { filter: brightness(.95); }
:is(.accounting-workspace .odoo-content, .erp-sales-workspace) .btn:focus-visible { box-shadow: var(--ui-focus-ring); }
:is(.accounting-workspace .odoo-content, .erp-sales-workspace) :is(.bg-light, .bg-white) { background-color: var(--ui-surface) !important; }
:is(.accounting-workspace .odoo-content, .erp-sales-workspace) :is(.text-dark, .text-black) { color: var(--ui-text) !important; }
:is(.accounting-workspace .odoo-content, .erp-sales-workspace) .text-muted { color: var(--ui-text-2) !important; }
[data-theme="dark"] :is(.accounting-workspace .odoo-content, .erp-sales-workspace) input[type="date"] { color-scheme: dark; }
[data-theme="dark"] :is(.accounting-workspace .odoo-content, .erp-sales-workspace) .btn-close { filter: invert(1); }
@media (max-width: 600px) {
    :is(.accounting-workspace .odoo-content, .erp-sales-workspace) .modal-dialog { margin: .75rem; max-width: calc(100vw - 1.5rem); }
}

/* DevExpress Blazor controls inside erp-sales-workspace */
.erp-sales-workspace :is(.dxbl-text-edit, .dxbl-spin-edit, .dxbl-combobox) {
    background-color: var(--ui-surface-2) !important;
    border: 1px solid var(--ui-border) !important;
    color: var(--ui-text) !important;
    border-radius: var(--ui-radius-sm);
}
.erp-sales-workspace :is(.dxbl-text-edit, .dxbl-spin-edit, .dxbl-combobox) input {
    background-color: transparent !important;
    color: var(--ui-text) !important;
}
.erp-sales-workspace :is(.dxbl-text-edit, .dxbl-spin-edit, .dxbl-combobox):focus-within {
    border-color: var(--ui-primary) !important;
    box-shadow: var(--ui-focus-ring) !important;
}
.erp-sales-workspace .dxbl-btn {
    border-radius: var(--ui-radius-sm);
}
.erp-sales-workspace :is(.dxbl-grid, .dx-grid) {
    --bs-table-bg: var(--ui-surface);
    --bs-table-color: var(--ui-text);
    --bs-table-border-color: var(--ui-border);
    color: var(--ui-text);
    border-color: var(--ui-border);
}

/* ============================================================================
   Projects – Budget workspace
   Decision-oriented summary for ProjectBudgets.razor. The figures deliberately
   say plan/forecast: operational spend belongs to the posting ledger, not this
   planning DTO. All colours inherit established UI tokens in both themes.
   ============================================================================ */
.project-budget-workspace { color: var(--ui-text); }
.project-budget-hero {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1.1rem 1.2rem;
    background: linear-gradient(135deg, var(--ui-surface), var(--ui-primary-soft));
    border: 1px solid var(--ui-border);
    border-radius: var(--ui-radius-lg);
    box-shadow: var(--ui-shadow);
}
.project-budget-hero h4 { color: var(--ui-text); font-weight: 800; }
.project-budget-hero small { color: var(--ui-text-2); }
.project-budget-eyebrow {
    margin-bottom: .2rem;
    color: var(--ui-text-2);
    font-size: .74rem;
    font-weight: 800;
    letter-spacing: .02em;
}
.project-budget-kpis {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: .8rem;
    margin-bottom: 1rem;
}
.project-budget-kpi {
    min-width: 0;
    padding: .9rem 1rem;
    background: var(--ui-surface);
    border: 1px solid var(--ui-border);
    border-radius: var(--ui-radius);
    box-shadow: var(--ui-shadow);
}
.project-budget-kpi__label { display: block; color: var(--ui-text-2); font-size: .8rem; font-weight: 700; }
.project-budget-kpi strong { display: block; margin: .3rem 0 .18rem; color: var(--ui-text); font-size: 1.18rem; line-height: 1.3; white-space: nowrap; }
.project-budget-kpi small { color: var(--ui-text-muted); font-size: .76rem; }
.project-budget-kpi--attention { border-inline-start: 4px solid var(--ui-warning); }
.project-budget-kpi--positive { border-inline-start: 4px solid var(--ui-success); }
.project-budget-scope-note {
    display: flex;
    align-items: flex-start;
    gap: .55rem;
    margin: -.25rem 0 1rem;
    padding: .7rem .85rem;
    color: var(--ui-text-2);
    background: var(--ui-primary-soft);
    border: 1px solid var(--ui-border);
    border-radius: var(--ui-radius);
    font-size: .82rem;
    line-height: 1.55;
}
.project-budget-scope-note i { margin-top: .15rem; color: var(--ui-primary); }
.project-budget-governance { overflow: hidden; }
.project-budget-governance .dragon-card__body { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .9rem 1rem; }
.project-budget-governance__summary { display: flex; align-items: flex-start; gap: .75rem; min-width: 0; }
.project-budget-governance__icon { display: grid; place-items: center; flex: 0 0 auto; width: 2.25rem; height: 2.25rem; border-radius: 50%; background: var(--ui-primary-soft); color: var(--ui-primary); }
.project-budget-governance h6 { margin: 0 0 .12rem; color: var(--ui-text); font-weight: 800; }
.project-budget-governance p { margin: 0; color: var(--ui-text-2); font-size: .84rem; max-width: 48rem; }
.project-budget-governance__facts { display: grid; grid-template-columns: repeat(3, minmax(8rem, 1fr)); gap: .6rem; flex: 0 0 auto; }
.project-budget-governance__facts > div { padding-inline-start: .65rem; border-inline-start: 1px solid var(--ui-border); }
.project-budget-governance__facts span { display: block; color: var(--ui-text-muted); font-size: .72rem; }
.project-budget-governance__facts strong { display: block; color: var(--ui-text); font-size: .8rem; white-space: nowrap; }
.project-budget-governance__error { flex-basis: 100%; color: var(--ui-danger); font-size: .8rem; }
.project-budget-governance--blocked { border-inline-start: 4px solid var(--ui-danger); }
.project-budget-governance--blocked .project-budget-governance__icon { color: var(--ui-danger); background: var(--ui-danger-soft); }
.project-budget-governance--warning { border-inline-start: 4px solid var(--ui-warning); }
.project-budget-governance--warning .project-budget-governance__icon { color: var(--ui-warning); background: var(--ui-warning-soft); }
.project-budget-governance--ok { border-inline-start: 4px solid var(--ui-success); }
.project-budget-governance--ok .project-budget-governance__icon { color: var(--ui-success); background: var(--ui-success-soft); }

@media (max-width: 991.98px) {
    .project-budget-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .project-budget-governance .dragon-card__body { align-items: stretch; flex-direction: column; }
    .project-budget-governance__facts { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 575.98px) {
    .project-budget-workspace { padding-inline: .75rem !important; }
    .project-budget-hero { align-items: stretch; flex-direction: column; padding: 1rem; }
    .project-budget-hero .dragon-btn { width: 100%; }
    .project-budget-kpis { grid-template-columns: 1fr; gap: .6rem; }
    .project-budget-governance__facts { grid-template-columns: 1fr; gap: .35rem; }
    .project-budget-governance__facts > div { padding-inline-start: .55rem; }
}

/* Procurement unified-budget status: isolated to procurement screens. */
.central-budget-hub .dragon-select { width: 100%; min-width: 0; }
.central-budget-availability { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .5rem; margin-top: .75rem; padding-top: .65rem; border-top: 1px solid var(--ui-border); color: var(--ui-text); font-size: .85rem; }
.central-budget-scope-note { padding: .75rem; background: var(--ui-primary-soft); color: var(--ui-text); border: 1px solid var(--ui-primary-border); border-radius: var(--ui-radius-sm); font-size: .85rem; }
.procurement-budget-status-card { margin: 1rem 0; padding: 1rem 1.1rem; border: 1px solid var(--ui-border); border-radius: var(--ui-radius); background: var(--ui-surface); color: var(--ui-text); box-shadow: var(--ui-shadow); }
.procurement-budget-status-card__heading { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.procurement-budget-status-card__heading h3 { margin: .15rem 0 0; font-size: 1rem; }
.procurement-budget-status-card__eyebrow { color: var(--ui-primary); font-size: .75rem; font-weight: 700; }
.procurement-budget-status-card__badge { padding: .35rem .65rem; border-radius: var(--ui-radius-full); font-size: .78rem; font-weight: 700; white-space: nowrap; }
.procurement-budget-status-card__badge.is-ok { background: var(--ui-success-soft); color: var(--ui-success); }
.procurement-budget-status-card__badge.is-warning { background: var(--ui-warning-soft); color: var(--ui-warning); }
.procurement-budget-status-card__badge.is-review, .procurement-budget-status-card__badge.is-legacy { background: var(--ui-primary-soft); color: var(--ui-primary); }
.procurement-budget-status-card__badge.is-blocked { background: var(--ui-danger-soft); color: var(--ui-danger); }
.procurement-budget-status-card__metrics { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .75rem; margin-top: 1rem; }
.procurement-budget-status-card__metrics div { padding: .65rem; border-radius: calc(var(--ui-radius) - 3px); background: var(--ui-surface-2); }
.procurement-budget-status-card__metrics span, .procurement-budget-status-card__loading, .procurement-budget-status-card__legacy { display: block; color: var(--ui-text-muted); font-size: .78rem; }
.procurement-budget-status-card__metrics strong { display: block; margin-top: .22rem; font-size: 1rem; }
.procurement-budget-status-card__loading, .procurement-budget-status-card__legacy { margin: .85rem 0 0; }
.procurement-budget-status-card__error { margin-top: .85rem; color: var(--ui-danger); font-size: .85rem; }
.procurement-budget-status-card__details { margin-top: .85rem; color: var(--ui-text-muted); font-size: .82rem; }
.procurement-budget-status-card__details ul { margin: .65rem 0 0; padding-inline-start: 1.1rem; }
@media (max-width: 640px) { .procurement-budget-status-card__metrics { grid-template-columns: 1fr; } }
.central-budget-hub .text-primary {
    color: var(--ui-primary) !important;
}

/* ──────────────────────────────────────────────────────────────────────────
   Phase 3: قياسات الإنجاز والمستخلصات المالية
   Selectors: .project-claims-* / .project-mmt-* / .project-pcc-*
   Tokens: --ui-* only. No inline styles in Razor.
   ────────────────────────────────────────────────────────────────────────── */

.project-claims-loading { display:flex; align-items:center; gap:.75rem; padding:2rem; color:var(--ui-text-muted); }
.project-claims-error { display:flex; align-items:center; justify-content:space-between; gap:.75rem; padding:1rem; background:var(--ui-danger-soft); color:var(--ui-danger); border-radius:var(--ui-radius); font-size:.9rem; margin-bottom:1rem; }
.project-claims-empty { padding:2rem; text-align:center; color:var(--ui-text-muted); font-size:.9rem; }

.project-mmt-workspace { padding:1.25rem; display:flex; flex-direction:column; gap:1.25rem; }
.project-mmt-header { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:1rem; }
.project-mmt-header h2 { margin:0; font-size:1.15rem; color:var(--ui-text); font-weight:700; }
.project-mmt-actions { display:flex; align-items:center; gap:.5rem; flex-wrap:wrap; }

.project-mmt-table { width:100%; border-collapse:collapse; font-size:.86rem; }
.project-mmt-table th { background:var(--ui-surface-2); color:var(--ui-text-muted); font-weight:600; padding:.5rem .75rem; text-align:right; border-bottom:2px solid var(--ui-border); white-space:nowrap; }
.project-mmt-table td { padding:.55rem .75rem; border-bottom:1px solid var(--ui-border); color:var(--ui-text); vertical-align:middle; }
.project-mmt-table tr:hover td { background:var(--ui-surface-2); }

.project-mmt-status-draft { color:var(--ui-text-muted); font-size:.78rem; }
.project-mmt-status-submitted { color:var(--ui-primary); font-weight:600; font-size:.78rem; }
.project-mmt-status-approved { color:var(--ui-success); font-weight:700; font-size:.78rem; }
.project-mmt-status-rejected { color:var(--ui-danger); font-size:.78rem; }

.project-mmt-details { margin-top:1rem; border-top:1px solid var(--ui-border); padding-top:1rem; }
.project-mmt-contract-picker { display:flex; align-items:center; gap:.75rem; flex-wrap:wrap; margin-bottom:1rem; }
.project-mmt-contract-picker select { padding:.45rem .75rem; border-radius:var(--ui-radius); border:1px solid var(--ui-border); background:var(--ui-surface); color:var(--ui-text); font-size:.88rem; }

.project-pcc-workspace { padding:1.25rem; display:flex; flex-direction:column; gap:1.25rem; }
.project-pcc-header { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:1rem; }
.project-pcc-header h2 { margin:0; font-size:1.15rem; color:var(--ui-text); font-weight:700; }

.project-pcc-summary { display:grid; grid-template-columns:repeat(auto-fit,minmax(10rem,1fr)); gap:.75rem; margin-bottom:1.25rem; }
.project-pcc-summary__kpi { padding:.75rem 1rem; border:1px solid var(--ui-border); border-radius:var(--ui-radius); background:var(--ui-surface); }
.project-pcc-summary__kpi span { display:block; font-size:.75rem; color:var(--ui-text-muted); margin-bottom:.2rem; }
.project-pcc-summary__kpi strong { display:block; font-size:1.05rem; color:var(--ui-text); font-weight:700; }
.project-pcc-summary__kpi--retention strong { color:var(--ui-warning); }
.project-pcc-summary__kpi--advance strong { color:var(--ui-primary); }

.project-pcc-table { width:100%; border-collapse:collapse; font-size:.86rem; }
.project-pcc-table th { background:var(--ui-surface-2); color:var(--ui-text-muted); font-weight:600; padding:.5rem .75rem; text-align:right; border-bottom:2px solid var(--ui-border); white-space:nowrap; }
.project-pcc-table td { padding:.55rem .75rem; border-bottom:1px solid var(--ui-border); color:var(--ui-text); vertical-align:middle; }
.project-pcc-table tr:hover td { background:var(--ui-surface-2); }

.project-pcc-action-result { margin-top:.75rem; padding:.65rem .9rem; border-radius:var(--ui-radius-sm); font-size:.87rem; }
.project-pcc-action-result--ok { background:var(--ui-success-soft); color:var(--ui-success); }
.project-pcc-action-result--err { background:var(--ui-danger-soft); color:var(--ui-danger); }

.project-pcc-doc-number { font-weight:700; color:var(--ui-primary); font-size:.9rem; }
.project-pcc-retention-badge { display:inline-block; padding:.1rem .45rem; border-radius:var(--ui-radius-full); background:var(--ui-warning-soft); color:var(--ui-warning); font-size:.75rem; font-weight:600; }
.project-pcc-advance-badge { display:inline-block; padding:.1rem .45rem; border-radius:var(--ui-radius-full); background:var(--ui-primary-soft); color:var(--ui-primary); font-size:.75rem; font-weight:600; }

.project-pcc-subcontractor-gap { padding:.85rem 1rem; border-inline-start:3px solid var(--ui-warning); background:var(--ui-warning-soft); color:var(--ui-text); border-radius:var(--ui-radius-sm); font-size:.85rem; margin-top:.75rem; }

.project-pcc-dialog { border:1px solid var(--ui-border); border-radius:var(--ui-radius); background:var(--ui-surface); padding:1.25rem; margin-top:1rem; }
.project-pcc-dialog-title { font-weight:700; font-size:1rem; color:var(--ui-text); margin-bottom:1rem; }
.project-pcc-dialog-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(12rem,1fr)); gap:1rem; margin-bottom:1rem; }
.project-pcc-field { display:flex; flex-direction:column; gap:.35rem; }
.project-pcc-field label { font-size:.82rem; color:var(--ui-text-muted); font-weight:600; }
.project-pcc-field input, .project-pcc-field select { padding:.45rem .65rem; border:1px solid var(--ui-border); border-radius:var(--ui-radius-sm); background:var(--ui-surface); color:var(--ui-text); font-size:.88rem; }

@media (max-width:640px) {
    .project-pcc-summary { grid-template-columns:1fr 1fr; }
    .project-mmt-table th, .project-mmt-table td,
    .project-pcc-table th, .project-pcc-table td { padding:.4rem .5rem; font-size:.8rem; }
}

/* ──────────────────────────────────────────────────────────────────────────
   Phase 5 Closeout Governance Remediation: Waivers & Profitability Confidence
   Selectors scoped strictly to .project-governance-* / .project-waiver-* / .project-confidence-*
   Tokens: --ui-* only. No inline styles.
────────────────────────────────────────────────────────────────────────── */
.project-confidence-badge {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding: .2rem .6rem;
    border-radius: var(--ui-radius-full);
    font-size: .78rem;
    font-weight: 700;
}
.project-confidence-badge--incomplete {
    background: var(--ui-warning-soft);
    color: var(--ui-warning);
    border: 1px solid var(--ui-warning);
}
.project-confidence-badge--estimated {
    background: var(--ui-primary-soft);
    color: var(--ui-primary);
    border: 1px solid var(--ui-primary);
}
.project-confidence-badge--confirmed {
    background: var(--ui-success-soft);
    color: var(--ui-success);
    border: 1px solid var(--ui-success);
}

.project-waiver-card {
    border: 1px solid var(--ui-border);
    border-radius: var(--ui-radius);
    background: var(--ui-surface);
    padding: 1rem;
    margin-bottom: 1rem;
}
.project-waiver-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: .5rem;
}
.project-waiver-title {
    font-size: .92rem;
    font-weight: 700;
    color: var(--ui-text);
}
.project-waiver-reason {
    font-size: .82rem;
    color: var(--ui-text-muted);
    margin-bottom: .5rem;
    background: var(--ui-surface-2);
    padding: .5rem .75rem;
    border-radius: var(--ui-radius-sm);
    border-inline-start: 3px solid var(--ui-warning);
}
.project-waiver-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    font-size: .75rem;
    color: var(--ui-text-muted);
}
.project-waiver-badge {
    display: inline-block;
    padding: .15rem .5rem;
    border-radius: var(--ui-radius-sm);
    font-size: .75rem;
    font-weight: 600;
}
.project-waiver-badge--approved {
    background: var(--ui-success-soft);
    color: var(--ui-success);
}
.project-waiver-badge--requested {
    background: var(--ui-warning-soft);
    color: var(--ui-warning);
}
.project-waiver-badge--rejected {
    background: var(--ui-danger-soft);
    color: var(--ui-danger);
}
.project-waiver-badge--revoked {
    background: var(--ui-surface-2);
    color: var(--ui-text-muted);
}

.project-governance-alert {
    padding: .85rem 1rem;
    border-radius: var(--ui-radius-sm);
    font-size: .85rem;
    margin-bottom: 1rem;
    display: flex;
    align-items: center;
    gap: .75rem;
}
.project-governance-alert--warning {
    background: var(--ui-warning-soft);
    color: var(--ui-warning);
    border: 1px solid var(--ui-warning);
}
.project-governance-alert--danger {
    background: var(--ui-danger-soft);
    color: var(--ui-danger);
    border: 1px solid var(--ui-danger);
}
.project-governance-alert--info {
    background: var(--ui-primary-soft);
    color: var(--ui-primary);
    border: 1px solid var(--ui-primary);
}