/* ═══════════════════════════════════════════════════════════════════════
   MATERIAL DESIGN 3 — Cologne project
   ─────────────────────────────────────────────────────────────────────
   Official spec:  https://m3.material.io
   Color system:   https://m3.material.io/styles/color/system/overview
   Typography:     https://m3.material.io/styles/typography/type-scale-tokens
   Shape:          https://m3.material.io/styles/shape/shape-scale-tokens
   Elevation:      https://m3.material.io/styles/elevation/tokens
   Motion:         https://m3.material.io/styles/motion/easing-and-duration

   Source brand color: #3E63DD (indigo, hue ≈ 230). All tonal palettes
   below were generated following the M3 HCT tonal algorithm (tones
   0/10/20/30/40/50/60/70/80/90/95/99/100). Surface and neutral palettes
   use the M3 neutral and neutral-variant families adjacent to brand hue.

   Naming follows M3 exactly:
     • Sys color roles:  --md-sys-color-primary, --md-sys-color-on-primary, …
     • Typography:       --md-sys-typescale-display-large-size, …
     • Shape:            --md-sys-shape-corner-large
     • Elevation:        --md-sys-elevation-level1
     • Motion:           --md-sys-motion-easing-standard
═══════════════════════════════════════════════════════════════════════ */

/* ───────────────────────────────────────────────────────────────────────
   REF PALETTES  (HCT tones — generated from source #3E63DD)
─────────────────────────────────────────────────────────────────────── */
:root {
    /* Primary tonal palette (hue 230) */
    --md-ref-palette-primary0:    #000000;
    --md-ref-palette-primary10:   #00115C;
    --md-ref-palette-primary20:   #00208C;
    --md-ref-palette-primary30:   #0E2FA4;
    --md-ref-palette-primary40:   #3450BA;
    --md-ref-palette-primary50:   #5269D3;
    --md-ref-palette-primary60:   #6E83EF;
    --md-ref-palette-primary70:   #899EFF;
    --md-ref-palette-primary80:   #B7C4FF;
    --md-ref-palette-primary90:   #DEE0FF;
    --md-ref-palette-primary95:   #EEEFFF;
    --md-ref-palette-primary99:   #FDFBFF;
    --md-ref-palette-primary100:  #FFFFFF;

    /* Secondary (lower chroma, same hue family) */
    --md-ref-palette-secondary0:   #000000;
    --md-ref-palette-secondary10:  #151B2C;
    --md-ref-palette-secondary20:  #2A3042;
    --md-ref-palette-secondary30:  #404659;
    --md-ref-palette-secondary40:  #585E72;
    --md-ref-palette-secondary50:  #71778B;
    --md-ref-palette-secondary60:  #8B91A6;
    --md-ref-palette-secondary70:  #A5ABC1;
    --md-ref-palette-secondary80:  #C1C6DD;
    --md-ref-palette-secondary90:  #DDE1F9;
    --md-ref-palette-secondary95:  #ECEFFF;
    --md-ref-palette-secondary99:  #FDFBFF;
    --md-ref-palette-secondary100: #FFFFFF;

    /* Tertiary (analogous warmer hue) */
    --md-ref-palette-tertiary0:    #000000;
    --md-ref-palette-tertiary10:   #271341;
    --md-ref-palette-tertiary20:   #3D2756;
    --md-ref-palette-tertiary30:   #553D6F;
    --md-ref-palette-tertiary40:   #6D5588;
    --md-ref-palette-tertiary80:   #D8BCFF;
    --md-ref-palette-tertiary90:   #ECDBFF;
    --md-ref-palette-tertiary95:   #F7EDFF;

    /* Error (M3 baseline error palette) */
    --md-ref-palette-error0:    #000000;
    --md-ref-palette-error10:   #410002;
    --md-ref-palette-error20:   #690005;
    --md-ref-palette-error30:   #93000A;
    --md-ref-palette-error40:   #BA1A1A;
    --md-ref-palette-error80:   #FFB4AB;
    --md-ref-palette-error90:   #FFDAD6;
    --md-ref-palette-error95:   #FFEDEA;

    /* Neutral (M3 surface family — slight blue tint) */
    --md-ref-palette-neutral0:    #000000;
    --md-ref-palette-neutral4:    #0C0E13;
    --md-ref-palette-neutral6:    #111318;
    --md-ref-palette-neutral10:   #1A1C20;
    --md-ref-palette-neutral12:   #1E2024;
    --md-ref-palette-neutral17:   #292B2F;
    --md-ref-palette-neutral20:   #2F3135;
    --md-ref-palette-neutral22:   #34363A;
    --md-ref-palette-neutral24:   #393B3F;
    --md-ref-palette-neutral87:   #DCDADF;
    --md-ref-palette-neutral90:   #E4E2E7;
    --md-ref-palette-neutral92:   #EAE8ED;
    --md-ref-palette-neutral94:   #EFEDF2;
    --md-ref-palette-neutral95:   #F2F0F5;
    --md-ref-palette-neutral96:   #F5F3F8;
    --md-ref-palette-neutral98:   #FAF8FD;
    --md-ref-palette-neutral99:   #FDFBFF;
    --md-ref-palette-neutral100:  #FFFFFF;

    /* Neutral-variant (for outlines) */
    --md-ref-palette-neutral-variant30: #444750;
    --md-ref-palette-neutral-variant40: #5C5F69;
    --md-ref-palette-neutral-variant50: #757782;
    --md-ref-palette-neutral-variant60: #8F919C;
    --md-ref-palette-neutral-variant70: #AAACB7;
    --md-ref-palette-neutral-variant80: #C5C6D3;
    --md-ref-palette-neutral-variant90: #E1E2EF;
}

/* ───────────────────────────────────────────────────────────────────────
   SYS COLOR ROLES — LIGHT
─────────────────────────────────────────────────────────────────────── */
:root, html[data-theme='light'] {
    --md-sys-color-primary:                   var(--md-ref-palette-primary40);
    --md-sys-color-on-primary:                var(--md-ref-palette-primary100);
    --md-sys-color-primary-container:         var(--md-ref-palette-primary90);
    --md-sys-color-on-primary-container:      var(--md-ref-palette-primary10);

    --md-sys-color-secondary:                 var(--md-ref-palette-secondary40);
    --md-sys-color-on-secondary:              var(--md-ref-palette-secondary100);
    --md-sys-color-secondary-container:       var(--md-ref-palette-secondary90);
    --md-sys-color-on-secondary-container:    var(--md-ref-palette-secondary10);

    --md-sys-color-tertiary:                  var(--md-ref-palette-tertiary40);
    --md-sys-color-on-tertiary:               #FFFFFF;
    --md-sys-color-tertiary-container:        var(--md-ref-palette-tertiary90);
    --md-sys-color-on-tertiary-container:     var(--md-ref-palette-tertiary10);

    --md-sys-color-error:                     var(--md-ref-palette-error40);
    --md-sys-color-on-error:                  #FFFFFF;
    --md-sys-color-error-container:           var(--md-ref-palette-error90);
    --md-sys-color-on-error-container:        var(--md-ref-palette-error10);

    --md-sys-color-background:                var(--md-ref-palette-neutral98);
    --md-sys-color-on-background:             var(--md-ref-palette-neutral10);

    --md-sys-color-surface:                   var(--md-ref-palette-neutral98);
    --md-sys-color-on-surface:                var(--md-ref-palette-neutral10);
    --md-sys-color-surface-variant:           var(--md-ref-palette-neutral-variant90);
    --md-sys-color-on-surface-variant:        var(--md-ref-palette-neutral-variant30);

    /* Surface containers (M3 tonal elevation) */
    --md-sys-color-surface-container-lowest:  var(--md-ref-palette-neutral100);
    --md-sys-color-surface-container-low:     var(--md-ref-palette-neutral96);
    --md-sys-color-surface-container:         var(--md-ref-palette-neutral94);
    --md-sys-color-surface-container-high:    var(--md-ref-palette-neutral92);
    --md-sys-color-surface-container-highest: var(--md-ref-palette-neutral90);

    --md-sys-color-outline:                   var(--md-ref-palette-neutral-variant50);
    --md-sys-color-outline-variant:           var(--md-ref-palette-neutral-variant80);

    --md-sys-color-inverse-surface:           var(--md-ref-palette-neutral20);
    --md-sys-color-inverse-on-surface:        var(--md-ref-palette-neutral95);
    --md-sys-color-inverse-primary:           var(--md-ref-palette-primary80);

    --md-sys-color-shadow:                    #000000;
    --md-sys-color-scrim:                     #000000;
    --md-sys-color-surface-tint:              var(--md-ref-palette-primary40);

    /* Success/Warning aren't in M3 baseline. Add as project extensions. */
    --md-sys-color-success:                   #1F7A3A;
    --md-sys-color-on-success:                #FFFFFF;
    --md-sys-color-success-container:         #B9F2C4;
    --md-sys-color-on-success-container:      #002110;

    --md-sys-color-warning:                   #8A5300;
    --md-sys-color-on-warning:                #FFFFFF;
    --md-sys-color-warning-container:         #FFDDB1;
    --md-sys-color-on-warning-container:      #2C1700;

    /* Project-extended: dedicated tokens for POS vs cash so they read as
       distinct payment methods without colliding with primary/success roles. */
    --payment-pos-container:    #D6E9F6;        /* soft sky */
    --payment-pos-on-container: #0A4A6E;
    --payment-pos-accent:       #1E6FA3;

    --payment-cash-container:    #D8EFD9;       /* soft mint (distinct from success) */
    --payment-cash-on-container: #105031;
    --payment-cash-accent:       #2C7C4C;
}

/* ───────────────────────────────────────────────────────────────────────
   SYS COLOR ROLES — DARK
─────────────────────────────────────────────────────────────────────── */
html[data-theme='dark'] {
    --md-sys-color-primary:                   var(--md-ref-palette-primary80);
    --md-sys-color-on-primary:                var(--md-ref-palette-primary20);
    --md-sys-color-primary-container:         var(--md-ref-palette-primary30);
    --md-sys-color-on-primary-container:      var(--md-ref-palette-primary90);

    --md-sys-color-secondary:                 var(--md-ref-palette-secondary80);
    --md-sys-color-on-secondary:              var(--md-ref-palette-secondary20);
    --md-sys-color-secondary-container:       var(--md-ref-palette-secondary30);
    --md-sys-color-on-secondary-container:    var(--md-ref-palette-secondary90);

    --md-sys-color-tertiary:                  var(--md-ref-palette-tertiary80);
    --md-sys-color-on-tertiary:               var(--md-ref-palette-tertiary20);
    --md-sys-color-tertiary-container:        var(--md-ref-palette-tertiary30);
    --md-sys-color-on-tertiary-container:     var(--md-ref-palette-tertiary90);

    --md-sys-color-error:                     var(--md-ref-palette-error80);
    --md-sys-color-on-error:                  var(--md-ref-palette-error20);
    --md-sys-color-error-container:           var(--md-ref-palette-error30);
    --md-sys-color-on-error-container:        var(--md-ref-palette-error90);

    --md-sys-color-background:                var(--md-ref-palette-neutral6);
    --md-sys-color-on-background:             var(--md-ref-palette-neutral90);

    --md-sys-color-surface:                   var(--md-ref-palette-neutral6);
    --md-sys-color-on-surface:                var(--md-ref-palette-neutral90);
    --md-sys-color-surface-variant:           var(--md-ref-palette-neutral-variant30);
    --md-sys-color-on-surface-variant:        var(--md-ref-palette-neutral-variant80);

    --md-sys-color-surface-container-lowest:  var(--md-ref-palette-neutral4);
    --md-sys-color-surface-container-low:     var(--md-ref-palette-neutral10);
    --md-sys-color-surface-container:         var(--md-ref-palette-neutral12);
    --md-sys-color-surface-container-high:    var(--md-ref-palette-neutral17);
    --md-sys-color-surface-container-highest: var(--md-ref-palette-neutral22);

    --md-sys-color-outline:                   var(--md-ref-palette-neutral-variant60);
    --md-sys-color-outline-variant:           var(--md-ref-palette-neutral-variant30);

    --md-sys-color-inverse-surface:           var(--md-ref-palette-neutral90);
    --md-sys-color-inverse-on-surface:        var(--md-ref-palette-neutral20);
    --md-sys-color-inverse-primary:           var(--md-ref-palette-primary40);

    --md-sys-color-shadow:                    #000000;
    --md-sys-color-scrim:                     #000000;
    --md-sys-color-surface-tint:              var(--md-ref-palette-primary80);

    --md-sys-color-success:                   #7DDB94;
    --md-sys-color-on-success:                #003917;
    --md-sys-color-success-container:         #005225;
    --md-sys-color-on-success-container:      #B9F2C4;

    --md-sys-color-warning:                   #FFB95C;
    --md-sys-color-on-warning:                #482900;
    --md-sys-color-warning-container:         #683C00;
    --md-sys-color-on-warning-container:      #FFDDB1;

    /* Dark variants for POS / cash — readable on dark surfaces, clearly
       distinct from each other and from the primary indigo brand color. */
    --payment-pos-container:    #14384F;
    --payment-pos-on-container: #B7DEF5;
    --payment-pos-accent:       #6FB7DF;

    --payment-cash-container:    #1A4432;
    --payment-cash-on-container: #B0E5BC;
    --payment-cash-accent:       #6BCC8C;
}

/* ───────────────────────────────────────────────────────────────────────
   TYPOGRAPHY  (M3 type scale tokens)
   We use Vazirmatn (Persian) as the primary face; it maps cleanly to M3
   weight scale (regular 400, medium 500, semibold/strong 600).
─────────────────────────────────────────────────────────────────────── */
:root {
    --md-sys-typescale-plain-font:   'Vazirmatn', ui-sans-serif, system-ui, -apple-system,
                                     BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --md-sys-typescale-brand-font:   var(--md-sys-typescale-plain-font);

    /* Display */
    --md-sys-typescale-display-large-size:   3.5625rem;  /* 57 */
    --md-sys-typescale-display-medium-size:  2.8125rem;  /* 45 */
    --md-sys-typescale-display-small-size:   2.25rem;    /* 36 */

    /* Headline */
    --md-sys-typescale-headline-large-size:  2rem;       /* 32 */
    --md-sys-typescale-headline-medium-size: 1.75rem;    /* 28 */
    --md-sys-typescale-headline-small-size:  1.5rem;     /* 24 */

    /* Title */
    --md-sys-typescale-title-large-size:     1.375rem;   /* 22 */
    --md-sys-typescale-title-medium-size:    1rem;       /* 16 */
    --md-sys-typescale-title-small-size:     0.875rem;   /* 14 */

    /* Body */
    --md-sys-typescale-body-large-size:      1rem;       /* 16 */
    --md-sys-typescale-body-medium-size:     0.875rem;   /* 14 */
    --md-sys-typescale-body-small-size:      0.75rem;    /* 12 */

    /* Label */
    --md-sys-typescale-label-large-size:     0.875rem;   /* 14 */
    --md-sys-typescale-label-medium-size:    0.75rem;    /* 12 */
    --md-sys-typescale-label-small-size:     0.6875rem;  /* 11 */

    /* Weights — M3 standardized */
    --md-sys-typescale-weight-regular:   400;
    --md-sys-typescale-weight-medium:    500;
    --md-sys-typescale-weight-semibold:  600;
    --md-sys-typescale-weight-bold:      700;
}

/* ───────────────────────────────────────────────────────────────────────
   SHAPE  (M3 shape scale tokens)
─────────────────────────────────────────────────────────────────────── */
:root {
    --md-sys-shape-corner-none:        0;
    --md-sys-shape-corner-extra-small: 4px;
    --md-sys-shape-corner-small:       8px;
    --md-sys-shape-corner-medium:      12px;
    --md-sys-shape-corner-large:       16px;
    --md-sys-shape-corner-extra-large: 28px;
    --md-sys-shape-corner-full:        9999px;
}

/* ───────────────────────────────────────────────────────────────────────
   ELEVATION  (M3 elevation tokens — overlay shadows)
─────────────────────────────────────────────────────────────────────── */
:root {
    --md-sys-elevation-level0: none;
    --md-sys-elevation-level1:
        0 1px 2px 0 rgba(0, 0, 0, 0.30),
        0 1px 3px 1px rgba(0, 0, 0, 0.15);
    --md-sys-elevation-level2:
        0 1px 2px 0 rgba(0, 0, 0, 0.30),
        0 2px 6px 2px rgba(0, 0, 0, 0.15);
    --md-sys-elevation-level3:
        0 4px 8px 3px rgba(0, 0, 0, 0.15),
        0 1px 3px 0 rgba(0, 0, 0, 0.30);
    --md-sys-elevation-level4:
        0 6px 10px 4px rgba(0, 0, 0, 0.15),
        0 2px 3px 0 rgba(0, 0, 0, 0.30);
    --md-sys-elevation-level5:
        0 8px 12px 6px rgba(0, 0, 0, 0.15),
        0 4px 4px 0 rgba(0, 0, 0, 0.30);
}
html[data-theme='dark'] {
    --md-sys-elevation-level1:
        0 1px 2px 0 rgba(0, 0, 0, 0.40),
        0 1px 3px 1px rgba(0, 0, 0, 0.25);
    --md-sys-elevation-level2:
        0 1px 2px 0 rgba(0, 0, 0, 0.45),
        0 2px 6px 2px rgba(0, 0, 0, 0.25);
    --md-sys-elevation-level3:
        0 4px 8px 3px rgba(0, 0, 0, 0.25),
        0 1px 3px 0 rgba(0, 0, 0, 0.50);
    --md-sys-elevation-level4:
        0 6px 10px 4px rgba(0, 0, 0, 0.28),
        0 2px 3px 0 rgba(0, 0, 0, 0.55);
    --md-sys-elevation-level5:
        0 8px 12px 6px rgba(0, 0, 0, 0.32),
        0 4px 4px 0 rgba(0, 0, 0, 0.60);
}

/* ───────────────────────────────────────────────────────────────────────
   MOTION  (M3 motion tokens)
─────────────────────────────────────────────────────────────────────── */
:root {
    --md-sys-motion-easing-standard:           cubic-bezier(0.2, 0, 0, 1);
    --md-sys-motion-easing-standard-decelerate:cubic-bezier(0, 0, 0, 1);
    --md-sys-motion-easing-standard-accelerate:cubic-bezier(0.3, 0, 1, 1);
    --md-sys-motion-easing-emphasized:         cubic-bezier(0.2, 0, 0, 1);
    --md-sys-motion-easing-emphasized-decelerate:cubic-bezier(0.05, 0.7, 0.1, 1);
    --md-sys-motion-easing-emphasized-accelerate:cubic-bezier(0.3, 0, 0.8, 0.15);

    --md-sys-motion-duration-short1:  50ms;
    --md-sys-motion-duration-short2:  100ms;
    --md-sys-motion-duration-short3:  150ms;
    --md-sys-motion-duration-short4:  200ms;
    --md-sys-motion-duration-medium1: 250ms;
    --md-sys-motion-duration-medium2: 300ms;
    --md-sys-motion-duration-medium3: 350ms;
    --md-sys-motion-duration-medium4: 400ms;
}

/* ───────────────────────────────────────────────────────────────────────
   STATE LAYERS  (M3 interaction state opacities)
─────────────────────────────────────────────────────────────────────── */
:root {
    --md-sys-state-hover-state-layer-opacity:    0.08;
    --md-sys-state-focus-state-layer-opacity:    0.10;
    --md-sys-state-pressed-state-layer-opacity:  0.10;
    --md-sys-state-dragged-state-layer-opacity:  0.16;
}

/* ═══════════════════════════════════════════════════════════════════════
   MUDBLAZOR PALETTE BRIDGE  — the make-or-break theme rule
   ─────────────────────────────────────────────────────────────────────
   MudThemeProvider's IsDarkMode prop is unreliable across SSR/Interactive
   scope boundaries (HttpContext is null inside a SignalR circuit). So we
   stop trusting it for COLOR. Instead, we redefine every --mud-palette-*
   variable directly here, switched via the `data-theme` attribute on
   <html>. The inline script in App.razor sets that attribute BEFORE any
   CSS loads, so MudBlazor components paint with the correct palette from
   the very first frame — no flash, no second click, no scope dependency.

   Specificity:  `:root[data-theme]` is (0,0,2,0); beats MudThemeProvider's
   runtime-injected `:root` rule (0,0,1,0).
═══════════════════════════════════════════════════════════════════════ */
/* All overrides use !important — MudThemeProvider re-injects its own
   `<style>` at runtime with classes like `.mud-application-layout.mud-theme-default`
   (specificity 0,0,2,0). Our `:root[data-theme]` is (0,0,1,1) which would
   lose the cascade. !important on a custom property is honored and wins,
   guaranteeing the design-system tokens flow into every MudBlazor
   component regardless of MudThemeProvider's output. */
:root[data-theme],
html[data-theme] body,
html[data-theme] .mud-application-layout,
html[data-theme] .mud-layout {
    /* Surfaces */
    --mud-palette-background:        var(--md-sys-color-background) !important;
    --mud-palette-background-gray:   var(--md-sys-color-surface-container) !important;
    --mud-palette-surface:           var(--md-sys-color-surface-container-low) !important;

    /* Text */
    --mud-palette-text-primary:      var(--md-sys-color-on-surface) !important;
    --mud-palette-text-secondary:    var(--md-sys-color-on-surface-variant) !important;
    --mud-palette-text-disabled:     var(--md-sys-color-outline) !important;

    /* Actions */
    --mud-palette-action-default:    var(--md-sys-color-on-surface-variant) !important;
    --mud-palette-action-default-hover: color-mix(in srgb, var(--md-sys-color-on-surface) 8%, transparent) !important;
    --mud-palette-action-disabled:   color-mix(in srgb, var(--md-sys-color-on-surface) 38%, transparent) !important;
    --mud-palette-action-disabled-background: var(--md-sys-color-surface-container) !important;

    /* Lines */
    --mud-palette-divider:           var(--md-sys-color-outline-variant) !important;
    --mud-palette-divider-light:     color-mix(in srgb, var(--md-sys-color-outline-variant) 60%, transparent) !important;
    --mud-palette-table-lines:       var(--md-sys-color-outline-variant) !important;
    --mud-palette-table-striped:     color-mix(in srgb, var(--md-sys-color-on-surface) 3%, transparent) !important;
    --mud-palette-table-hover:       color-mix(in srgb, var(--md-sys-color-on-surface) 6%, transparent) !important;
    --mud-palette-lines-default:     var(--md-sys-color-outline-variant) !important;
    --mud-palette-lines-inputs:      var(--md-sys-color-outline) !important;

    /* Chrome */
    --mud-palette-appbar-background: var(--md-sys-color-surface) !important;
    --mud-palette-appbar-text:       var(--md-sys-color-on-surface) !important;
    --mud-palette-drawer-background: var(--md-sys-color-surface-container-low) !important;
    --mud-palette-drawer-text:       var(--md-sys-color-on-surface) !important;
    --mud-palette-drawer-icon:       var(--md-sys-color-on-surface-variant) !important;

    /* Brand */
    --mud-palette-primary:           var(--md-sys-color-primary) !important;
    --mud-palette-primary-text:      var(--md-sys-color-on-primary) !important;
    --mud-palette-primary-darken:    color-mix(in srgb, var(--md-sys-color-primary) 85%, black) !important;
    --mud-palette-primary-lighten:   color-mix(in srgb, var(--md-sys-color-primary) 85%, white) !important;
    --mud-palette-primary-hover:     color-mix(in srgb, var(--md-sys-color-primary) 8%, transparent) !important;

    --mud-palette-secondary:         var(--md-sys-color-secondary) !important;
    --mud-palette-secondary-text:    var(--md-sys-color-on-secondary) !important;
    --mud-palette-tertiary:          var(--md-sys-color-tertiary) !important;
    --mud-palette-tertiary-text:     var(--md-sys-color-on-tertiary) !important;

    /* Semantic */
    --mud-palette-error:             var(--md-sys-color-error) !important;
    --mud-palette-error-text:        var(--md-sys-color-on-error) !important;
    --mud-palette-error-darken:      color-mix(in srgb, var(--md-sys-color-error) 85%, black) !important;
    --mud-palette-error-lighten:     color-mix(in srgb, var(--md-sys-color-error) 85%, white) !important;
    --mud-palette-error-hover:       color-mix(in srgb, var(--md-sys-color-error) 8%, transparent) !important;

    --mud-palette-warning:           var(--md-sys-color-warning) !important;
    --mud-palette-warning-text:      var(--md-sys-color-on-warning) !important;

    --mud-palette-success:           var(--md-sys-color-success) !important;
    --mud-palette-success-text:      var(--md-sys-color-on-success) !important;

    --mud-palette-info:              var(--md-sys-color-primary) !important;
    --mud-palette-info-text:         var(--md-sys-color-on-primary) !important;

    --mud-palette-dark:              var(--md-sys-color-inverse-surface) !important;
    --mud-palette-dark-text:         var(--md-sys-color-inverse-on-surface) !important;

    --mud-palette-overlay-dark:      rgba(0, 0, 0, 0.45) !important;
    --mud-palette-overlay-light:     rgba(255, 255, 255, 0.40) !important;

    --mud-palette-grey-default:      var(--md-sys-color-surface-container) !important;
    --mud-palette-grey-lighter:      var(--md-sys-color-surface-container-low) !important;
    --mud-palette-grey-darker:       var(--md-sys-color-surface-container-high) !important;
}
/* Dark needs a heavier overlay so MudDialog scrim reads correctly on a
   dark canvas */
html[data-theme='dark'],
html[data-theme='dark'] .mud-application-layout {
    --mud-palette-overlay-dark:      rgba(0, 0, 0, 0.65) !important;
    --mud-palette-overlay-light:     rgba(0, 0, 0, 0.30) !important;
}

/* ═══════════════════════════════════════════════════════════════════════
   GLOBAL BASE
═══════════════════════════════════════════════════════════════════════ */
html, body {
    background-color: var(--md-sys-color-background);
    color: var(--md-sys-color-on-background);
    font-family: var(--md-sys-typescale-plain-font) !important;
    font-size: var(--md-sys-typescale-body-medium-size);
}

::selection {
    background: var(--md-sys-color-primary-container);
    color: var(--md-sys-color-on-primary-container);
}

/* ═══════════════════════════════════════════════════════════════════════
   RTL FIX — MudBlazor outlined inputs
   MudBlazor positions the floating label with `left:14px` even in RTL
   mode (MudRTLProvider only changes `dir`, not these properties). The
   rules below pin the label to the RIGHT edge and anchor its scale
   transform on top-right so it floats up to the correct corner. Also
   keeps placeholders right-aligned. Applies to MudTextField,
   MudNumericField, MudSelect, MudAutocomplete, MudDatePicker, etc.
═══════════════════════════════════════════════════════════════════════ */
.mud-input-label.mud-input-label-outlined,
.mud-input-label.mud-input-label-inputcontrol {
    right: 14px !important;
    left: auto !important;
    transform-origin: top right !important;
}
/* The legend cutout in the fieldset border must mirror too */
.mud-input-outlined .mud-input-outlined-border {
    text-align: right;
}
.mud-input-outlined .mud-input-outlined-border > legend {
    text-align: right;
    margin-right: 8px;
    margin-left: 0;
}
/* Right-align input/textarea text + placeholder */
.mud-input-control .mud-input-slot,
.mud-input-control input,
.mud-input-control textarea {
    text-align: right;
}
.mud-input-control input::placeholder,
.mud-input-control textarea::placeholder {
    text-align: right;
}
/* Inputs explicitly marked LTR (ds-input-ltr) override the above */
.ds-input-ltr .mud-input-label.mud-input-label-outlined,
.ds-input-ltr .mud-input-label.mud-input-label-inputcontrol {
    right: 14px !important;
    left: auto !important;
    transform-origin: top right !important;
}
.ds-input-ltr input,
.ds-input-ltr textarea {
    direction: ltr !important;
    text-align: left !important;
    font-variant-numeric: tabular-nums;
}
.ds-input-ltr input::placeholder,
.ds-input-ltr textarea::placeholder {
    text-align: left !important;
}

/* ═══════════════════════════════════════════════════════════════════════
   PAGE HEADER  (project-level pattern)
═══════════════════════════════════════════════════════════════════════ */
.ds-page-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 24px;
    direction: rtl;
}
.ds-page-header__lead {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
}
.ds-page-title {
    margin: 0;
    font-family: var(--md-sys-typescale-brand-font);
    font-size: var(--md-sys-typescale-title-large-size);
    font-weight: var(--md-sys-typescale-weight-medium);
    color: var(--md-sys-color-on-surface);
    line-height: 1.27;          /* M3 title-large */
    letter-spacing: 0;
    flex-shrink: 0;
}
.ds-page-subtitle {
    margin: 4px 0 0;
    font-size: var(--md-sys-typescale-body-medium-size);
    color: var(--md-sys-color-on-surface-variant);
    line-height: 1.43;
}
.ds-page-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

/* ═══════════════════════════════════════════════════════════════════════
   BUTTON — M3 spec
   Variants map to M3 five canonical buttons:
     --primary    = M3 Filled button
     --secondary  = M3 Filled-tonal button
     --outline    = M3 Outlined button
     --ghost      = M3 Text button
     --destructive= M3 Filled button with error color
   Heights: M3 default is 40dp. Sizes sm=32, md=40, lg=48 for density.
   Label: M3 label-large, weight 500.
═══════════════════════════════════════════════════════════════════════ */
.ds-btn {
    --btn-h: 40px;
    --btn-px: 24px;            /* M3 default horizontal padding */
    --btn-fs: var(--md-sys-typescale-label-large-size);

    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: var(--btn-h);
    min-height: var(--btn-h);
    padding: 0 var(--btn-px);
    font-family: var(--md-sys-typescale-plain-font) !important;
    font-size: var(--btn-fs) !important;
    font-weight: var(--md-sys-typescale-weight-medium) !important;
    line-height: 1.43;
    letter-spacing: 0.00625em !important;
    text-transform: none !important;
    border-radius: var(--md-sys-shape-corner-full) !important;  /* M3 buttons are pill-shaped */
    border: 1px solid transparent;
    cursor: pointer;
    user-select: none;
    transition:
        background-color var(--md-sys-motion-duration-short3) var(--md-sys-motion-easing-standard),
        border-color    var(--md-sys-motion-duration-short3) var(--md-sys-motion-easing-standard),
        color           var(--md-sys-motion-duration-short3) var(--md-sys-motion-easing-standard),
        box-shadow      var(--md-sys-motion-duration-short3) var(--md-sys-motion-easing-standard);
    white-space: nowrap;
    box-shadow: none !important;
}
.ds-btn:focus-visible {
    outline: none;
    box-shadow: 0 0 0 2px var(--md-sys-color-background),
                0 0 0 4px var(--md-sys-color-primary) !important;
}
.ds-btn:disabled, .ds-btn[disabled] {
    opacity: 0.38;            /* M3 disabled opacity */
    cursor: not-allowed;
    pointer-events: none;
}

.ds-btn--sm { --btn-h: 32px; --btn-px: 16px; }
.ds-btn--md { --btn-h: 40px; --btn-px: 24px; }
.ds-btn--lg { --btn-h: 48px; --btn-px: 28px; }
.ds-btn--icon { width: var(--btn-h); padding: 0; }

/* Filled button (M3 primary action) */
.ds-btn--default, .ds-btn--primary {
    background-color: var(--md-sys-color-primary) !important;
    color: var(--md-sys-color-on-primary) !important;
    border-color: transparent !important;
}
.ds-btn--primary:hover {
    background-color: color-mix(in srgb, var(--md-sys-color-primary) 92%, var(--md-sys-color-on-primary)) !important;
    box-shadow: var(--md-sys-elevation-level1) !important;
}

/* Filled-tonal button (M3 medium-emphasis) */
.ds-btn--secondary {
    background-color: var(--md-sys-color-secondary-container) !important;
    color: var(--md-sys-color-on-secondary-container) !important;
    border-color: transparent !important;
}
.ds-btn--secondary:hover {
    background-color: color-mix(in srgb, var(--md-sys-color-secondary-container) 92%, var(--md-sys-color-on-secondary-container)) !important;
}

/* Outlined button */
.ds-btn--outline {
    background-color: transparent !important;
    color: var(--md-sys-color-primary) !important;
    border-color: var(--md-sys-color-outline) !important;
}
.ds-btn--outline:hover {
    background-color: color-mix(in srgb, var(--md-sys-color-primary) 8%, transparent) !important;
}

/* Text button */
.ds-btn--ghost {
    background-color: transparent !important;
    color: var(--md-sys-color-primary) !important;
    border-color: transparent !important;
    padding: 0 12px;
}
.ds-btn--ghost:hover {
    background-color: color-mix(in srgb, var(--md-sys-color-primary) 8%, transparent) !important;
}

/* Filled error (destructive) */
.ds-btn--destructive, .ds-btn--danger {
    background-color: var(--md-sys-color-error) !important;
    color: var(--md-sys-color-on-error) !important;
    border-color: transparent !important;
}
.ds-btn--danger:hover {
    background-color: color-mix(in srgb, var(--md-sys-color-error) 92%, black) !important;
    box-shadow: var(--md-sys-elevation-level1) !important;
}

.ds-btn--link {
    background: transparent !important;
    color: var(--md-sys-color-primary) !important;
    padding: 0 !important;
    height: auto !important;
}
.ds-btn--link:hover { text-decoration: underline; }

/* ═══════════════════════════════════════════════════════════════════════
   ICON BUTTON  (M3 standard icon button)
═══════════════════════════════════════════════════════════════════════ */
.ds-icon-btn {
    width: 40px !important;
    height: 40px !important;
    min-width: 40px !important;
    padding: 0 !important;
    border-radius: var(--md-sys-shape-corner-full) !important;
    color: var(--md-sys-color-on-surface-variant) !important;
    transition:
        background-color var(--md-sys-motion-duration-short3) var(--md-sys-motion-easing-standard),
        color           var(--md-sys-motion-duration-short3) var(--md-sys-motion-easing-standard);
}
.ds-icon-btn:hover {
    background-color: color-mix(in srgb, var(--md-sys-color-on-surface) 8%, transparent) !important;
    color: var(--md-sys-color-on-surface) !important;
}
.ds-icon-btn--danger:hover {
    background-color: color-mix(in srgb, var(--md-sys-color-error) 12%, transparent) !important;
    color: var(--md-sys-color-error) !important;
}
.ds-icon-btn--primary:hover {
    background-color: color-mix(in srgb, var(--md-sys-color-primary) 12%, transparent) !important;
    color: var(--md-sys-color-primary) !important;
}

/* ═══════════════════════════════════════════════════════════════════════
   CARD  (M3 Filled / Outlined card)
═══════════════════════════════════════════════════════════════════════ */
.ds-card {
    background: var(--md-sys-color-surface-container-low);
    color: var(--md-sys-color-on-surface);
    border: 1px solid var(--md-sys-color-outline-variant);
    border-radius: var(--md-sys-shape-corner-medium);     /* M3 card corner = 12dp */
    padding: 16px;                                          /* M3 card padding */
    transition:
        background-color var(--md-sys-motion-duration-short4) var(--md-sys-motion-easing-standard),
        box-shadow       var(--md-sys-motion-duration-short4) var(--md-sys-motion-easing-standard);
}
.ds-card--interactive { cursor: default; }
@media (hover: hover) {
    .ds-card--interactive:hover {
        background: var(--md-sys-color-surface-container);
        box-shadow: var(--md-sys-elevation-level1);
    }
}
.ds-card__head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 12px;
}
.ds-card__title {
    margin: 0;
    font-family: var(--md-sys-typescale-plain-font);
    font-size: var(--md-sys-typescale-title-medium-size);
    font-weight: var(--md-sys-typescale-weight-medium);
    color: var(--md-sys-color-on-surface);
    line-height: 1.5;
    letter-spacing: 0.009em;
}
.ds-card__sub {
    margin: 4px 0 0;
    font-size: var(--md-sys-typescale-body-small-size);
    color: var(--md-sys-color-on-surface-variant);
    letter-spacing: 0.033em;
}

/* ═══════════════════════════════════════════════════════════════════════
   BADGE / PILL  (M3 Assist chip — small)
═══════════════════════════════════════════════════════════════════════ */
.ds-pill, .ds-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 12px;
    border-radius: var(--md-sys-shape-corner-small);          /* M3 chip = 8dp */
    font-family: var(--md-sys-typescale-plain-font);
    font-size: var(--md-sys-typescale-label-small-size);
    font-weight: var(--md-sys-typescale-weight-medium);
    line-height: 1.45;
    white-space: nowrap;
    border: 1px solid var(--md-sys-color-outline-variant);
    background: var(--md-sys-color-surface-container);
    color: var(--md-sys-color-on-surface);
}
.ds-pill__dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    display: inline-block;
    flex-shrink: 0;
}
.ds-pill--neutral { background: var(--md-sys-color-surface-container); color: var(--md-sys-color-on-surface-variant); }
.ds-pill--neutral .ds-pill__dot { background: var(--md-sys-color-on-surface-variant); }

.ds-pill--success { background: var(--md-sys-color-success-container); color: var(--md-sys-color-on-success-container); border-color: transparent; }
.ds-pill--success .ds-pill__dot { background: var(--md-sys-color-success); }

.ds-pill--warning { background: var(--md-sys-color-warning-container); color: var(--md-sys-color-on-warning-container); border-color: transparent; }
.ds-pill--warning .ds-pill__dot { background: var(--md-sys-color-warning); }

.ds-pill--danger  { background: var(--md-sys-color-error-container); color: var(--md-sys-color-on-error-container); border-color: transparent; }
.ds-pill--danger  .ds-pill__dot { background: var(--md-sys-color-error); }

.ds-pill--primary { background: var(--md-sys-color-primary-container); color: var(--md-sys-color-on-primary-container); border-color: transparent; }
.ds-pill--primary .ds-pill__dot { background: var(--md-sys-color-primary); }

/* ═══════════════════════════════════════════════════════════════════════
   SEARCH (project pattern)
═══════════════════════════════════════════════════════════════════════ */
.ds-search { width: 100%; max-width: 360px; direction: rtl; }

/* ═══════════════════════════════════════════════════════════════════════
   DIALOG  (M3 basic dialog — corner-extra-large 28dp, level-3 elevation)
   RTL convention: PRIMARY on the RIGHT, Cancel on the LEFT.
═══════════════════════════════════════════════════════════════════════ */
.mud-dialog-container .mud-dialog {
    border-radius: var(--md-sys-shape-corner-extra-large) !important;
    background: var(--md-sys-color-surface-container-high) !important;
    color: var(--md-sys-color-on-surface);
    box-shadow: var(--md-sys-elevation-level3) !important;
    border: none;
}
.mud-dialog-container .mud-dialog-title    { padding: 24px 24px 16px !important; }
.mud-dialog-container .mud-dialog-content  { padding: 0 24px 24px !important; color: var(--md-sys-color-on-surface-variant); }
.mud-dialog-container .mud-dialog-actions  {
    padding: 16px 24px 24px !important;
    display: block !important;
    border-top: none;
}

.ds-dialog-title {
    margin: 0 !important;
    padding: 0 !important;
    font-family: var(--md-sys-typescale-plain-font) !important;
    font-size: var(--md-sys-typescale-headline-small-size) !important;     /* M3 dialog title = headline-small */
    font-weight: var(--md-sys-typescale-weight-medium) !important;
    color: var(--md-sys-color-on-surface) !important;
    line-height: 1.33;
    direction: rtl;
}
.ds-dialog-body {
    direction: rtl;
    padding-top: 8px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    color: var(--md-sys-color-on-surface);
}
.ds-dialog-hint {
    margin: 0;
    font-size: var(--md-sys-typescale-body-medium-size);
    color: var(--md-sys-color-on-surface-variant);
    line-height: 1.43;
}
.ds-dialog-actions {
    display: flex !important;
    direction: rtl;
    align-items: center;
    justify-content: flex-start;     /* primary glued to start (right) */
    gap: 8px;
    width: 100%;
}

.ds-dialog-body .ds-input-ltr input,
.ds-dialog-body .ds-input-ltr textarea {
    direction: ltr !important;
    text-align: left !important;
    font-variant-numeric: tabular-nums;
}

.ds-field-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}
@media (max-width: 599px) { .ds-field-row { grid-template-columns: 1fr; } }

.ds-toggle-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 16px;
    background: var(--md-sys-color-surface-container);
    border: 1px solid var(--md-sys-color-outline-variant);
    border-radius: var(--md-sys-shape-corner-small);
}
.ds-toggle-row__info { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ds-toggle-row__title {
    font-family: var(--md-sys-typescale-plain-font);
    font-size: var(--md-sys-typescale-body-large-size);
    font-weight: var(--md-sys-typescale-weight-medium);
    color: var(--md-sys-color-on-surface);
}
.ds-toggle-row__hint {
    font-family: var(--md-sys-typescale-plain-font);
    font-size: var(--md-sys-typescale-body-small-size);
    color: var(--md-sys-color-on-surface-variant);
}

/* Confirm dialog */
.ds-confirm {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    direction: rtl;
    padding: 8px 8px 0;
    min-width: 360px;
}
.ds-confirm__icon-wrap {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 16px;
}
.ds-confirm__icon-wrap--danger  { background: var(--md-sys-color-error-container);   }
.ds-confirm__icon-wrap--warning { background: var(--md-sys-color-warning-container); }
.ds-confirm__icon-wrap .mud-icon-root { font-size: 1.75rem !important; }
.ds-confirm__icon-wrap--danger  .mud-icon-root { color: var(--md-sys-color-error)   !important; }
.ds-confirm__icon-wrap--warning .mud-icon-root { color: var(--md-sys-color-on-warning-container) !important; }
.ds-confirm__title {
    font-family: var(--md-sys-typescale-plain-font);
    font-size: var(--md-sys-typescale-title-medium-size);
    font-weight: var(--md-sys-typescale-weight-medium);
    color: var(--md-sys-color-on-surface);
    margin: 0 0 4px;
}
.ds-confirm__hint {
    font-family: var(--md-sys-typescale-plain-font);
    font-size: var(--md-sys-typescale-body-medium-size);
    color: var(--md-sys-color-on-surface-variant);
    line-height: 1.43;
    margin: 0;
}
@media (max-width: 599px) { .ds-confirm { min-width: unset; } }

/* ═══════════════════════════════════════════════════════════════════════
   LABEL  (M3 body label outside MudBlazor)
═══════════════════════════════════════════════════════════════════════ */
.ds-label {
    display: block;
    font-family: var(--md-sys-typescale-plain-font);
    font-size: var(--md-sys-typescale-label-large-size);
    font-weight: var(--md-sys-typescale-weight-medium);
    color: var(--md-sys-color-on-surface);
    margin-bottom: 8px;
    direction: rtl;
}
.ds-label__hint {
    font-weight: var(--md-sys-typescale-weight-regular);
    color: var(--md-sys-color-on-surface-variant);
    margin-right: 4px;
    font-size: var(--md-sys-typescale-body-small-size);
}

/* ═══════════════════════════════════════════════════════════════════════
   SEGMENTED BUTTON  (M3 segmented button)
═══════════════════════════════════════════════════════════════════════ */
.ds-segment {
    display: inline-flex;
    border: 1px solid var(--md-sys-color-outline);
    border-radius: var(--md-sys-shape-corner-full);
    padding: 0;
    direction: rtl;
    overflow: hidden;
    background: transparent;
}
.ds-segment--full { display: flex; width: 100%; }
.ds-segment__option {
    flex: 1;
    min-height: 40px;             /* M3 segmented button = 40dp */
    padding: 0 16px;
    border: 0;
    background: transparent;
    color: var(--md-sys-color-on-surface);
    font-family: var(--md-sys-typescale-plain-font);
    font-size: var(--md-sys-typescale-label-large-size);
    font-weight: var(--md-sys-typescale-weight-medium);
    cursor: pointer;
    transition:
        background-color var(--md-sys-motion-duration-short3) var(--md-sys-motion-easing-standard),
        color            var(--md-sys-motion-duration-short3) var(--md-sys-motion-easing-standard);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    white-space: nowrap;
    line-height: 1;
    border-right: 1px solid var(--md-sys-color-outline);
}
.ds-segment__option:last-child { border-right: 0; }
.ds-segment__option:hover {
    background-color: color-mix(in srgb, var(--md-sys-color-on-surface) 8%, transparent);
}
.ds-segment__option--active {
    background: var(--md-sys-color-secondary-container);
    color: var(--md-sys-color-on-secondary-container);
}
.ds-segment__option .mud-icon-root { font-size: 1.125rem !important; }

/* ═══════════════════════════════════════════════════════════════════════
   SECTION HEADER
═══════════════════════════════════════════════════════════════════════ */
.ds-section-header {
    display: flex;
    align-items: baseline;
    gap: 8px;
    margin-bottom: 12px;
    margin-top: 32px;
    direction: rtl;
}
.ds-section-header:first-of-type { margin-top: 0; }
.ds-section-title {
    margin: 0;
    font-family: var(--md-sys-typescale-plain-font);
    font-size: var(--md-sys-typescale-title-medium-size);
    font-weight: var(--md-sys-typescale-weight-medium);
    color: var(--md-sys-color-on-surface);
}
.ds-section-count {
    font-family: var(--md-sys-typescale-plain-font);
    font-size: var(--md-sys-typescale-body-small-size);
    color: var(--md-sys-color-on-surface-variant);
    font-variant-numeric: tabular-nums;
}

/* ═══════════════════════════════════════════════════════════════════════
   EMPTY STATE
═══════════════════════════════════════════════════════════════════════ */
.ds-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    direction: rtl;
    padding: 48px 20px;
    border: 1px dashed var(--md-sys-color-outline-variant);
    border-radius: var(--md-sys-shape-corner-large);
    background: transparent;
}
.ds-empty__icon {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: var(--md-sys-color-surface-container);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 16px;
}
.ds-empty__icon .mud-icon-root {
    font-size: 1.75rem !important;
    color: var(--md-sys-color-on-surface-variant) !important;
}
.ds-empty__title {
    font-family: var(--md-sys-typescale-plain-font);
    font-size: var(--md-sys-typescale-title-medium-size);
    font-weight: var(--md-sys-typescale-weight-medium);
    color: var(--md-sys-color-on-surface);
    margin: 0 0 4px;
}
.ds-empty__hint {
    font-family: var(--md-sys-typescale-plain-font);
    font-size: var(--md-sys-typescale-body-medium-size);
    color: var(--md-sys-color-on-surface-variant);
    margin: 0 0 20px;
    max-width: 320px;
    line-height: 1.43;
}

/* ═══════════════════════════════════════════════════════════════════════
   SKELETON
═══════════════════════════════════════════════════════════════════════ */
.ds-skel {
    background: linear-gradient(
        90deg,
        var(--md-sys-color-surface-container) 0%,
        var(--md-sys-color-surface-container-high) 50%,
        var(--md-sys-color-surface-container) 100%
    );
    background-size: 200% 100%;
    animation: ds-skel-shimmer 1.4s ease-in-out infinite;
    border-radius: var(--md-sys-shape-corner-extra-small);
}
.ds-skel--title { height: 18px; width: 60%; }
.ds-skel--line  { height: 12px; width: 100%; }
.ds-skel--line-short { width: 50%; }
@keyframes ds-skel-shimmer {
    0%   { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* ═══════════════════════════════════════════════════════════════════════
   HINT
═══════════════════════════════════════════════════════════════════════ */
.ds-hint {
    font-family: var(--md-sys-typescale-plain-font);
    font-size: var(--md-sys-typescale-body-small-size);
    color: var(--md-sys-color-on-surface-variant);
    line-height: 1.43;
}
.ds-hint--positive { color: var(--md-sys-color-success); }
.ds-hint--muted    { color: var(--md-sys-color-on-surface-variant); opacity: 0.7; }

/* ═══════════════════════════════════════════════════════════════════════
   GRID
═══════════════════════════════════════════════════════════════════════ */
.ds-grid { display: grid; gap: 16px; direction: rtl; }
.ds-grid--cards { grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); }
.ds-grid--2col  { grid-template-columns: repeat(2, 1fr); }
@media (max-width: 899px) { .ds-grid--2col { grid-template-columns: 1fr; } }

/* ═══════════════════════════════════════════════════════════════════════
   DATA TABLE
═══════════════════════════════════════════════════════════════════════ */
.ds-table-wrap {
    background: var(--md-sys-color-surface-container-low);
    border: 1px solid var(--md-sys-color-outline-variant);
    border-radius: var(--md-sys-shape-corner-medium);
    overflow: hidden;
    direction: rtl;
}
.ds-table-toolbar {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    border-bottom: 1px solid var(--md-sys-color-outline-variant);
    background: var(--md-sys-color-surface-container-low);
}
.ds-table-toolbar__spacer { flex: 1; }

.ds-table {
    width: 100%;
    border-collapse: collapse;
    direction: rtl;
}
.ds-table thead th {
    text-align: right;
    font-family: var(--md-sys-typescale-plain-font);
    font-size: var(--md-sys-typescale-label-medium-size);
    font-weight: var(--md-sys-typescale-weight-medium);
    color: var(--md-sys-color-on-surface-variant);
    text-transform: none;
    letter-spacing: 0.05em;
    padding: 12px 16px;
    background: var(--md-sys-color-surface-container);
    border-bottom: 1px solid var(--md-sys-color-outline-variant);
    white-space: nowrap;
}
.ds-table tbody td {
    font-family: var(--md-sys-typescale-plain-font);
    font-size: var(--md-sys-typescale-body-medium-size);
    color: var(--md-sys-color-on-surface);
    padding: 14px 16px;
    border-bottom: 1px solid var(--md-sys-color-outline-variant);
    vertical-align: middle;
}
.ds-table tbody tr:last-child td { border-bottom: none; }
.ds-table tbody tr {
    transition: background-color var(--md-sys-motion-duration-short3) var(--md-sys-motion-easing-standard);
}
.ds-table tbody tr:hover {
    background: color-mix(in srgb, var(--md-sys-color-on-surface) 4%, transparent);
}

.ds-table__cell-actions {
    width: 88px;
    text-align: left;
}
.ds-table__row-actions {
    display: inline-flex;
    gap: 4px;
    opacity: 0;
    transition: opacity var(--md-sys-motion-duration-short3) var(--md-sys-motion-easing-standard);
}
@media (hover: hover) {
    .ds-table tbody tr:hover .ds-table__row-actions { opacity: 1; }
}
@media (max-width: 599px) { .ds-table__row-actions { opacity: 1; } }

/* Identity (avatar + title + sub) */
.ds-identity {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
}
.ds-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;                              /* M3 avatars are circular */
    background: var(--md-sys-color-primary-container);
    color: var(--md-sys-color-on-primary-container);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: var(--md-sys-typescale-plain-font);
    font-size: var(--md-sys-typescale-label-large-size);
    font-weight: var(--md-sys-typescale-weight-medium);
    flex-shrink: 0;
}
.ds-avatar--md { width: 40px; height: 40px; }
.ds-avatar--sm { width: 32px; height: 32px; font-size: var(--md-sys-typescale-label-medium-size); }
.ds-identity__main { display: flex; flex-direction: column; min-width: 0; }
.ds-identity__title {
    font-family: var(--md-sys-typescale-plain-font);
    font-size: var(--md-sys-typescale-body-large-size);
    font-weight: var(--md-sys-typescale-weight-regular);
    color: var(--md-sys-color-on-surface);
    line-height: 1.5;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.ds-identity__sub {
    font-family: var(--md-sys-typescale-plain-font);
    font-size: var(--md-sys-typescale-body-small-size);
    color: var(--md-sys-color-on-surface-variant);
    line-height: 1.4;
    margin-top: 2px;
    direction: ltr;
    text-align: right;
}

/* ═══════════════════════════════════════════════════════════════════════
   LEGACY ALIASES  (keep --ds-* and var() refs working in scoped .razor.css)
   Maps the previous custom token names onto M3 sys roles. Components that
   were already using these names continue to work unchanged.
═══════════════════════════════════════════════════════════════════════ */
:root {
    --background:           var(--md-sys-color-background);
    --foreground:           var(--md-sys-color-on-background);

    --card:                 var(--md-sys-color-surface-container-low);
    --card-foreground:      var(--md-sys-color-on-surface);
    --popover:              var(--md-sys-color-surface-container-high);
    --popover-foreground:   var(--md-sys-color-on-surface);

    --muted:                var(--md-sys-color-surface-container);
    --muted-foreground:     var(--md-sys-color-on-surface-variant);
    --subtle:               var(--md-sys-color-surface-container);
    --hover:                color-mix(in srgb, var(--md-sys-color-on-surface) 6%, transparent);

    --primary:              var(--md-sys-color-primary);
    --primary-foreground:   var(--md-sys-color-on-primary);
    --primary-hover:        color-mix(in srgb, var(--md-sys-color-primary) 92%, var(--md-sys-color-on-primary));
    --primary-soft:         var(--md-sys-color-primary-container);
    --primary-soft-fg:      var(--md-sys-color-on-primary-container);
    --primary-soft-border:  transparent;

    --success:              var(--md-sys-color-success);
    --success-foreground:   var(--md-sys-color-on-success);
    --success-soft:         var(--md-sys-color-success-container);
    --success-soft-fg:      var(--md-sys-color-on-success-container);
    --success-border:       transparent;

    --warning:              var(--md-sys-color-warning);
    --warning-foreground:   var(--md-sys-color-on-warning);
    --warning-soft:         var(--md-sys-color-warning-container);
    --warning-soft-fg:      var(--md-sys-color-on-warning-container);
    --warning-border:       transparent;

    --destructive:          var(--md-sys-color-error);
    --destructive-foreground:var(--md-sys-color-on-error);
    --destructive-hover:    color-mix(in srgb, var(--md-sys-color-error) 92%, black);
    --destructive-soft:     var(--md-sys-color-error-container);
    --destructive-soft-fg:  var(--md-sys-color-on-error-container);
    --destructive-border:   transparent;

    --border:               var(--md-sys-color-outline-variant);
    --border-strong:        var(--md-sys-color-outline);
    --input:                var(--md-sys-color-outline);
    --ring:                 var(--md-sys-color-primary);

    --font-sans:            var(--md-sys-typescale-plain-font);
    --font-mono:            ui-monospace, 'JetBrains Mono', Consolas, monospace;

    /* Type scale → M3 mapping */
    --text-xs:   var(--md-sys-typescale-body-small-size);
    --text-sm:   var(--md-sys-typescale-label-large-size);
    --text-base: var(--md-sys-typescale-body-medium-size);
    --text-md:   var(--md-sys-typescale-body-large-size);
    --text-lg:   var(--md-sys-typescale-title-medium-size);
    --text-xl:   var(--md-sys-typescale-title-large-size);
    --text-2xl:  var(--md-sys-typescale-headline-small-size);

    --leading-tight:  1.25;
    --leading-snug:   1.4;
    --leading-normal: 1.5;
    --tracking-tight: 0;
    --tracking-wide:  0.02em;

    --weight-regular:  var(--md-sys-typescale-weight-regular);
    --weight-medium:   var(--md-sys-typescale-weight-medium);
    --weight-semibold: var(--md-sys-typescale-weight-semibold);
    --weight-bold:     var(--md-sys-typescale-weight-bold);

    /* Radii — M3 shape scale */
    --radius:      var(--md-sys-shape-corner-medium);
    --radius-sm:   var(--md-sys-shape-corner-extra-small);
    --radius-md:   var(--md-sys-shape-corner-small);
    --radius-lg:   var(--md-sys-shape-corner-medium);
    --radius-xl:   var(--md-sys-shape-corner-large);
    --radius-2xl:  var(--md-sys-shape-corner-extra-large);
    --radius-full: var(--md-sys-shape-corner-full);

    /* Spacing — keep 4/8 grid */
    --space-0:   0;
    --space-1:   4px;
    --space-2:   8px;
    --space-3:   12px;
    --space-4:   16px;
    --space-5:   20px;
    --space-6:   24px;
    --space-7:   28px;
    --space-8:   32px;
    --space-10:  40px;
    --space-12:  48px;
    --space-16:  64px;
    --space-20:  80px;
    --space-24:  96px;

    /* Elevation */
    --shadow-sm: var(--md-sys-elevation-level1);
    --shadow-md: var(--md-sys-elevation-level2);
    --shadow-lg: var(--md-sys-elevation-level3);
    --shadow-xl: var(--md-sys-elevation-level4);

    /* Motion */
    --ease:          var(--md-sys-motion-easing-standard);
    --duration-fast: var(--md-sys-motion-duration-short3);
    --duration-base: var(--md-sys-motion-duration-short4);
    --duration-slow: var(--md-sys-motion-duration-medium2);
    --ring-offset:   2px;
    --ring-width:    2px;

    /* Older --ds-* tokens kept for backward compatibility */
    --ds-font:        var(--font-sans);
    --ds-font-mono:   var(--font-mono);
    --ds-fs-xs:       var(--text-xs);
    --ds-fs-sm:       var(--text-sm);
    --ds-fs-base:     var(--text-base);
    --ds-fs-md:       var(--text-md);
    --ds-fs-lg:       var(--text-lg);
    --ds-fs-xl:       var(--text-xl);
    --ds-fw-regular:  var(--weight-regular);
    --ds-fw-medium:   var(--weight-medium);
    --ds-fw-semibold: var(--weight-semibold);
    --ds-fw-bold:     var(--weight-bold);
    --ds-lh-tight:    var(--leading-tight);
    --ds-lh-base:     var(--leading-normal);
    --ds-space-1:     var(--space-1);
    --ds-space-2:     var(--space-2);
    --ds-space-3:     var(--space-3);
    --ds-space-4:     var(--space-4);
    --ds-space-5:     var(--space-5);
    --ds-space-6:     var(--space-6);
    --ds-space-7:     var(--space-7);
    --ds-space-8:     var(--space-8);
    --ds-space-9:     var(--space-12);
    --ds-radius-sm:   var(--radius-sm);
    --ds-radius-md:   var(--radius-md);
    --ds-radius-lg:   var(--radius-lg);
    --ds-radius-xl:   var(--radius-xl);
    --ds-radius-pill: var(--radius-full);
    --ds-dur-fast:    var(--duration-fast);
    --ds-dur-base:    var(--duration-base);
    --ds-ease:        var(--ease);
    --ds-shadow-sm:   var(--shadow-sm);
    --ds-shadow-md:   var(--shadow-md);
    --ds-shadow-lg:   var(--shadow-lg);
    --ds-bg:          var(--background);
    --ds-surface-1:   var(--card);
    --ds-surface-2:   var(--muted);
    --ds-surface-hover: var(--hover);
    --ds-border:      var(--border);
    --ds-border-strong: var(--border-strong);
    --ds-text:        var(--foreground);
    --ds-text-soft:   var(--muted-foreground);
    --ds-text-muted:  var(--md-sys-color-on-surface-variant);
    --ds-primary:     var(--primary);
    --ds-primary-hover: var(--primary-hover);
    --ds-primary-soft:  var(--primary-soft);
    --ds-primary-soft-border: transparent;
    --ds-success:     var(--success);
    --ds-success-soft: var(--success-soft);
    --ds-success-border: transparent;
    --ds-warning:     var(--warning);
    --ds-warning-soft: var(--warning-soft);
    --ds-warning-border: transparent;
    --ds-danger:      var(--destructive);
    --ds-danger-hover: var(--destructive-hover);
    --ds-danger-soft:  var(--destructive-soft);
    --ds-danger-border: transparent;
}

/* ═══════════════════════════════════════════════════════════════════════
   POPOVER / DROPDOWN  (MudSelect, MudAutocomplete, MudMenu)
   MudBlazor's popover anchors and surface need RTL-aware corrections so
   dropdowns open beneath their input, are constrained by available
   width, follow the design-system surface palette, and render the
   selected/hover row legibly in both themes.
═══════════════════════════════════════════════════════════════════════ */
.ds-popover.mud-popover,
.mud-popover-open.mud-popover {
    background: var(--md-sys-color-surface-container-high) !important;
    color: var(--md-sys-color-on-surface);
    border: 1px solid var(--md-sys-color-outline-variant);
    border-radius: var(--md-sys-shape-corner-small) !important;
    box-shadow: var(--md-sys-elevation-level2) !important;
    min-width: 0;
    max-width: 100vw;
    overflow: hidden;
}

/* List inside popover */
.mud-popover .mud-list {
    background: transparent !important;
    padding: 4px;
    max-height: 320px;
    overflow-y: auto;
}
.mud-popover .mud-list-item {
    font-family: var(--md-sys-typescale-plain-font) !important;
    font-size: var(--md-sys-typescale-body-medium-size) !important;
    color: var(--md-sys-color-on-surface) !important;
    border-radius: var(--md-sys-shape-corner-extra-small) !important;
    padding: 10px 14px !important;
    margin: 2px 0;
    direction: rtl;
    text-align: right;
}
.mud-popover .mud-list-item:hover {
    background: color-mix(in srgb, var(--md-sys-color-on-surface) 8%, transparent) !important;
}
.mud-popover .mud-list-item.mud-selected-item {
    background: var(--md-sys-color-secondary-container) !important;
    color: var(--md-sys-color-on-secondary-container) !important;
}
.mud-popover .mud-list-subheader {
    font-family: var(--md-sys-typescale-plain-font) !important;
    font-size: var(--md-sys-typescale-label-medium-size) !important;
    color: var(--md-sys-color-on-surface-variant) !important;
    padding: 8px 14px 4px;
    direction: rtl;
}

/* Autocomplete: search input + clear button alignment in RTL */
.ds-autocomplete .mud-input-control input {
    text-align: right;
    direction: rtl;
}
.mud-autocomplete .mud-input-adornment-end {
    margin-left: 0;
    margin-right: 4px;
}

/* Match the popover width to the anchoring input so options aren't cut off */
.mud-popover-relative-width { width: 100%; }