/* ============================================================
   CMR-Portal Design System — Token Layer
   Source of truth: docs/cmr-design-system.md
   Do NOT modify ad-hoc. Token changes go through the design doc.
   ============================================================ */

/* === Fonts === */

@font-face {
    font-family: 'Vazirmatn';
    src: url('/fonts/Vazirmatn-Regular.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Vazirmatn';
    src: url('/fonts/Vazirmatn-Medium.woff2') format('woff2');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Vazirmatn';
    src: url('/fonts/Vazirmatn-Bold.woff2') format('woff2');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

/* === Color tokens (light values from PaletteLight; auto-flip via PaletteDark) === */

:root {
    /* =====================================================================
       PHASE 3B DARK-MODE FOUNDATION HOTFIX (Bundle A1)
       Color tokens are now aliases over MudBlazor's palette so they flip
       automatically when MudBlazor switches mode (PaletteDark rewrites
       --mud-palette-* on :root). Brand-specific tints (sidebar, primary-bg,
       semantic *-bg) derive via color-mix() from base tokens, so they flip
       with their base. Source of truth: AppTheme.cs PaletteLight / PaletteDark.
       ===================================================================== */

    /* Brand — aliases auto-flip via mud palette */
    --cmr-primary: var(--mud-palette-primary);
    --cmr-primary-hover: var(--mud-palette-primary-darken);
    --cmr-primary-light: var(--mud-palette-primary-lighten);
    --cmr-primary-text-on-tint: var(--cmr-primary);
    --cmr-primary-bg: color-mix(in srgb, var(--cmr-primary) 11%, var(--cmr-surface));

    /* Neutrals — light values come from PaletteLight; flip via PaletteDark */
    --cmr-bg: var(--mud-palette-background);
    --cmr-surface: var(--mud-palette-surface);
    --cmr-surface-alt: var(--mud-palette-table-striped);
    --cmr-sidebar-bg: var(--mud-palette-drawer-background);   /* DrawerBackground now in C# palette */
    --cmr-sidebar-hover: color-mix(in srgb, var(--cmr-primary) 6%, transparent);
    --cmr-row-hover: var(--mud-palette-table-hover);
    --cmr-text-primary: var(--mud-palette-text-primary);
    --cmr-text-secondary: var(--mud-palette-text-secondary);
    --cmr-text-tertiary: var(--mud-palette-text-disabled);
    --cmr-border: var(--mud-palette-lines-default);
    --cmr-border-strong: var(--mud-palette-divider);
    --cmr-border-divider: var(--mud-palette-divider-light);

    /* Semantic — fg aliased; *-bg derived via color-mix so they flip with fg */
    --cmr-success: var(--mud-palette-success);
    --cmr-success-bg: color-mix(in srgb, var(--cmr-success) 10%, var(--cmr-surface));
    --cmr-warning: var(--mud-palette-warning);
    --cmr-warning-bg: color-mix(in srgb, var(--cmr-warning) 11%, var(--cmr-surface));
    --cmr-error: var(--mud-palette-error);
    --cmr-error-bg: color-mix(in srgb, var(--cmr-error) 8%, var(--cmr-surface));
    --cmr-info: var(--mud-palette-info);
    --cmr-info-bg: color-mix(in srgb, var(--cmr-info) 10%, var(--cmr-surface));

    /* Theme-aware scrim — semi-transparent overlay on photos (e.g. delete button
       backdrop). Light = white wash; dark override below flips it dark so the
       overlay isn't a jarring white patch on a dark UI. */
    --cmr-scrim-on-photo: rgba(255, 255, 255, 0.85);

    /* Spacing — unchanged */
    --cmr-space-1: 4px;
    --cmr-space-2: 8px;
    --cmr-space-3: 12px;
    --cmr-space-4: 16px;
    --cmr-space-5: 20px;
    --cmr-space-6: 24px;
    --cmr-space-8: 32px;
    --cmr-space-10: 40px;
    --cmr-space-12: 48px;
    --cmr-space-16: 64px;

    /* Radii — unchanged */
    --cmr-radius-sm: 4px;
    --cmr-radius-md: 6px;
    --cmr-radius-lg: 8px;
    --cmr-radius-xl: 12px;
    --cmr-radius-pill: 9999px;

    /* Motion — unchanged */
    --cmr-motion-instant: 100ms linear;
    --cmr-motion-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
    --cmr-motion-base: 200ms cubic-bezier(0.4, 0, 0.2, 1);
    --cmr-motion-slow: 300ms cubic-bezier(0.4, 0, 0.2, 1);

    /* Elevation — ORIGINAL v1.2 light values preserved verbatim; dark override below.
       focus rewritten as color-mix (light == rgba(43,168,162,.15)) so it flips with primary. */
    --cmr-elevation-card: 0 1px 2px rgba(10, 10, 10, 0.03), 0 2px 6px rgba(10, 10, 10, 0.04);
    --cmr-elevation-card-strong: 0 2px 4px rgba(10, 10, 10, 0.04), 0 4px 12px rgba(10, 10, 10, 0.06);
    --cmr-elevation-hover: 0 4px 12px rgba(10, 10, 10, 0.06), 0 6px 16px rgba(10, 10, 10, 0.08);
    --cmr-elevation-focus: 0 0 0 3px color-mix(in srgb, var(--cmr-primary) 15%, transparent);
    --cmr-elevation-dropdown: 0 8px 24px rgba(10, 10, 10, 0.08);
    --cmr-elevation-dialog: 0 16px 48px rgba(10, 10, 10, 0.12);
}

/* Dark mode is now driven by --mud-palette-* (C# PaletteDark in AppTheme.cs).
   See cmr-* tokens above; they alias the mud palette and flip automatically. */

/* === Dark-mode shadow override — triggered by the html[data-theme="dark"] attribute
   set by the anti-FOUC bootstrap in index.html and managed by ThemeService (Bundle D).
   Replaces Bundle A+B's @media (prefers-color-scheme: dark) — a single signal now drives
   both the manual toggle AND the OS seed, so shadows deepen on manual toggle too.
   Values are the ORIGINAL v1.2 dark elevations (from the removed body.mud-theme-dark block).
   focus is omitted: it auto-flips via --cmr-primary in the color-mix above. === */
html[data-theme="dark"] {
    --cmr-elevation-card: 0 1px 2px rgba(0, 0, 0, 0.30), 0 2px 6px rgba(0, 0, 0, 0.40);
    --cmr-elevation-card-strong: 0 2px 4px rgba(0, 0, 0, 0.35), 0 4px 12px rgba(0, 0, 0, 0.45);
    --cmr-elevation-hover: 0 4px 12px rgba(0, 0, 0, 0.40), 0 6px 16px rgba(0, 0, 0, 0.50);
    --cmr-elevation-dropdown: 0 8px 24px rgba(0, 0, 0, 0.50);
    --cmr-elevation-dialog: 0 16px 48px rgba(0, 0, 0, 0.60);

    /* Photo scrim flips dark — overlay reads as a dim wash, not a white patch. */
    --cmr-scrim-on-photo: rgba(30, 30, 30, 0.85);
}

/* === Base typography & font === */

html, body {
    font-family: 'Vazirmatn', 'iranyekan', 'tahoma', 'Arial', sans-serif;
    font-size: 14px;
    line-height: 1.6;
    color: var(--cmr-text-primary);
    background: var(--cmr-bg);
}

/* === Persian RTL resets (design doc Section 9.2, 9.3) === */

:lang(fa) {
    letter-spacing: 0 !important;
    text-transform: none !important;
}

/* === Tabular numbers for numeric columns === */

.cmr-numeric,
.mud-table-cell.numeric,
.mud-input-numeric input {
    font-variant-numeric: tabular-nums;
}

/* === Focus ring (universal) === */

*:focus-visible {
    outline: none;
    box-shadow: var(--cmr-elevation-focus);
    border-radius: var(--cmr-radius-md);
}

/* === Reduced motion === */

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* ============================================================
   Drawer / Sidebar — v1.2 Warm Professional anchor
   ============================================================ */

/* Drawer background is now painted by MudBlazor from PaletteLight/Dark.DrawerBackground
   (light #F0F8F7 / dark #1A2422) — no CSS override needed; the old !important rule
   was defeating MudBlazor's correct dark drawer, so it has been removed. */

.mud-drawer .mud-nav-link {
    border-radius: var(--cmr-radius-md);
    margin: 1px 8px;
    padding: 8px 12px;
    color: var(--cmr-text-primary);
    transition: background-color var(--cmr-motion-fast), color var(--cmr-motion-fast);
}

.mud-drawer .mud-nav-link:hover:not(.active) {
    background-color: var(--cmr-sidebar-hover) !important;
}

.mud-drawer .mud-nav-link.active {
    background-color: var(--cmr-primary-bg);
    color: var(--cmr-primary-hover) !important;
    font-weight: 500;
    box-shadow: var(--cmr-elevation-card);
    position: relative;
}

/* Teal accent stripe on active nav item (start edge — right in RTL, left in LTR) */
.mud-drawer .mud-nav-link.active::before {
    content: '';
    position: absolute;
    inset-inline-start: -8px;
    top: 50%;
    transform: translateY(-50%);
    width: 3px;
    height: 60%;
    background-color: var(--cmr-primary);
    border-radius: 0 2px 2px 0;
}

/* (The stripe's --cmr-primary already flips via the mud palette, so the
   previous body.mud-theme-dark stripe override was dead code and is removed.) */

/* ============================================================
   Table row hover — handled natively by MudBlazor
   ============================================================ */

/* Row hover is now painted by MudBlazor from --mud-palette-table-hover
   (light #F8FAFA / dark #1F2826) — both already correct, so the old
   !important override (which froze it at the light value in dark mode)
   has been removed. */

/* ============================================================
   Page background — handled by the mud palette
   ============================================================ */

/* .mud-layout no longer carries an explicit background: the main content area
   already sets background-color: var(--mud-palette-background) inline, and
   leaving the layout root unstyled lets MudBlazor's themed background show
   through in both modes (the old var(--cmr-bg) rule stayed cream in dark). */