/* ============================================
   VANGUARD — Global Theme
   Cool grey palette with teal accents
   ============================================ */

/* ---------- CSS Custom Properties ---------- */
:root {
    --white: oklch(1 0 0);  /* #ffffff — Pure white */
    --black: oklch(0 0 0);  /* #000000 — Pure black */
    
    /* ─────────────────────────────────────────────────────────────
     Primary Color Scale: Slate Teal (oklch(0.4 0.04 218.39))
     Anchor: 700 — dark teal-blue brand color
  ───────────────────────────────────────────────────────────── */
  
    --primary-50:  oklch(0.9700 0.0120 218.39);  /* #edf7fb | App background / subtle tray */
    --primary-100: oklch(0.9400 0.0180 218.39);  /* #dfeef3 | Hover states / border lines */
    --primary-200: oklch(0.8700 0.0280 218.39);  /* #c1d9e1 | Disabled fills / dividers */
    --primary-300: oklch(0.7600 0.0350 218.39);  /* #99b7c0 | Placeholder text / subtle icons */
    --primary-400: oklch(0.6500 0.0380 218.39);  /* #76959f | Secondary text on light bg */
    --primary-500: oklch(0.5400 0.0400 218.39);  /* #54757e | Mid-tone UI elements */
    --primary-600: oklch(0.4700 0.0400 218.39);  /* #41616a | Active borders / strong icons */
    --primary-700: oklch(0.4000 0.0400 218.39);  /* #2e4d56 | [BASE] — primary buttons / key UI */
    --primary: var(--primary-700);
    --primary-800: oklch(0.3000 0.0360 218.39);  /* #17323a | Hover state for primary button */
    --primary-900: oklch(0.2200 0.0280 218.39);  /* #0a1e23 | Dark text on light bg */
    --primary-950: oklch(0.1500 0.0200 218.39);  /* #030d11 | Near-black / deep surfaces */

    --primary-surface-tint: #b3c2c6;
    --primary-foreground:     var(--white);
  
    /* ─────────────────────────────────────────────────────────────
     Secondary Color Scale: Warm Sand (oklch(0.8826 0.0325 68.9))
     Anchor: 100 — light warm gold/sand
    ───────────────────────────────────────────────────────────── */
  
    --secondary-50:  oklch(0.9700 0.0050 68.90);  /* #f6f1eb | Warm white background */
    --secondary-hover:  var(--secondary-50);

    --secondary-75:  oklch(0.9450 0.0100 68.90);  /* #f6f1eb | Warm white background */
    --secondary-cell-hover:  var(--secondary-75);
  
    --secondary-100: oklch(0.8826 0.0325 68.90);  /* #e7d5c2 | [BASE] — light sand / warm surface */
    --secondary: var(--secondary-100);    
    
    --secondary-200: oklch(0.8000 0.0435 68.90);  /* #d1b9a0 | Card backgrounds / warm fills */
    --secondary-300: oklch(0.7100 0.0505 68.90);  /* #b79c80 | Muted warm text / borders */
    --secondary-400: oklch(0.6100 0.0535 68.90);  /* #997e60 | Secondary icons / labels */
    --secondary-500: oklch(0.5200 0.0515 68.90);  /* #7d6448 | Body text on warm bg */
    --secondary-600: oklch(0.4300 0.0465 68.90);  /* #614b33 | Strong warm text / active states */
    --secondary-700: oklch(0.3500 0.0385 68.90);  /* #483724 | Dark warm UI elements */
    --secondary-800: oklch(0.2700 0.0290 68.90);  /* #302417 | Near-dark / deep warm */
    --secondary-900: oklch(0.1900 0.0190 68.90);  /* #19120a | Warm near-black */
    --secondary-950: oklch(0.1300 0.0115 68.90);  /* #0a0704 | Deepest warm dark */    
  
    /* ─────────────────────────────────────────────────────────────
    Tertiary Color Scale: Blue-Gray (oklch(0.7013 0.0438 252.92))
    Anchor: 400 — mid-tone cool blue-gray
    ───────────────────────────────────────────────────────────── */
  
    --tertiary-50:  oklch(0.9700 0.0120 252.92);  /* #f0f6fd | Cool white background */
    --tertiary-100: oklch(0.9300 0.0200 252.92);  /* #dfe9f5 | Subtle cool surface / hover */
    --tertiary-200: oklch(0.8600 0.0300 252.92);  /* #c4d3e5 | Disabled / dividers */
    --tertiary-300: oklch(0.7800 0.0380 252.92);  /* #a7b9d0 | Placeholder / subtle icons */
    --tertiary-400: oklch(0.7013 0.0438 252.92);  /* #8ca1ba | [BASE] — mid UI / secondary actions */
    --tertiary: var(--tertiary-400);
    --tertiary-500: oklch(0.6000 0.0440 252.92);  /* #6e829a | Supporting text / icon fills */
    --tertiary-600: oklch(0.5000 0.0420 252.92);  /* #52657b | Active borders / strong accents */
    --tertiary-700: oklch(0.4100 0.0380 252.92);  /* #3c4c5f | Dark cool UI elements */
    --tertiary-800: oklch(0.3100 0.0300 252.92);  /* #26313f | Near-dark cool surface */
    --tertiary-900: oklch(0.2200 0.0200 252.92);  /* #141b24 | Cool near-black */
    --tertiary-950: oklch(0.1500 0.0120 252.92);  /* #080b10 | Deepest cool dark */
 
    /* ─────────────────────────────────────────────────────────────
       Gray Color Scale (Tailwind Neutral Gray - OKLCH)
       Neutral, low chroma grayscale used for UI surfaces & text
    ───────────────────────────────────────────────────────────── */
    
    --gray-50:  oklch(0.9850 0.0020 247.84);  /* #fafafa | App background / lightest */
    --gray-100: oklch(0.9700 0.0030 247.84);  /* #f4f4f5 | Subtle background */
    --gray-200: oklch(0.9400 0.0040 247.84);  /* #e4e4e7 | Borders / dividers */
    --gray-300: oklch(0.8800 0.0060 247.84);  /* #d4d4d8 | Muted borders */
    --gray-400: oklch(0.7100 0.0100 247.84);  /* #a1a1aa | Placeholder / secondary text */
    --gray-500: oklch(0.5500 0.0120 247.84);  /* #71717a | Base neutral text */
    --gray-600: oklch(0.4500 0.0120 247.84);  /* #52525b | Strong text */
    --gray-700: oklch(0.3700 0.0100 247.84);  /* #3f3f46 | Headings / emphasis */
    --gray-800: oklch(0.2800 0.0080 247.84);  /* #27272a | Dark surfaces */
    --gray-900: oklch(0.2100 0.0060 247.84);  /* #18181b | Deep dark */
    --gray-950: oklch(0.1300 0.0040 247.84);  /* #09090b | Near black */  


    
    /* Backgrounds */
    --background:          var(--white);
    --bg-dark:  oklch(0.7000 0.0200 210); 
    --bg:       oklch(0.9000 0.0070 210); 
    --bg-right: oklch(0.8458 0.0152 218.07); 
    
    --surface:         var(--white);
    --surface-hover:   #eef0f1;
    --surface-alt:     #f4f6f6;

    --sticky-bg:       oklch(0.9200 0.0100 82);
    --sticky-bg-hover: oklch(0.9700 0.00 250);
    --sticky-border:   oklch(0.9200 0.1100 65);

    /* Text */
    --text:            oklch(0.2265 0.01 303.71);
    --text-muted:      #7c8488;
    --text-light:      #a4adb0;

    /* Accent */
    --accent:          var(--primary);
    --accent-hover:    #238578;
    --accent-bg:       rgba(42, 157, 143, 0.08);

    /* Borders */
    --highlight:    hsl(0, 0%, 100%);
    --border:       hsl(0, 0%, 30%);
    --border-muted: hsl(0, 0%, 100%);
    --border-light: #e4e9ea;

    /* Semantic colors */
    --danger:          oklch(0.4558 0.1555 26.3);
    --danger-bg:       rgba(192, 57, 43, 0.08);
    --warning:         oklch(0.6142 0.1591 42.45);
    --warning-bg:      rgba(230, 126, 34, 0.08);
    --success:         oklch(0.5315 0.1109 157.36);
    --success-bg:      rgba(39, 174, 96, 0.08);
    --info:            oklch(0.4284 0.1096 245.76);
    --info-bg:         rgba(41, 128, 185, 0.08);

    --caution: oklch(0.7929 0.1673 74.92);

    /* Priority badges */
    --priority-critical: #8B3A3A;
    --priority-high:     #D98A3B;
    --priority-medium:   #3D5A6E;
    --priority-low:      #A8A8A8;

    /* Shadows */
    /*
    --shadow-sm:       0 1px 3px rgba(0, 0, 0, 0.06);
    --shadow-md:       0 2px 8px rgba(0, 0, 0, 0.08);
    --shadow-lg:       0 4px 16px rgba(0, 0, 0, 0.10);
    */
    /* Shadows (Tailwind equivalents) */
    --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    
    --shadow-md:
      0 4px 6px -1px rgba(0, 0, 0, 0.1),
      0 2px 4px -2px rgba(0, 0, 0, 0.1);
    
    --shadow-lg:
      0 10px 15px -3px rgba(0, 0, 0, 0.1),
      0 4px 6px -4px rgba(0, 0, 0, 0.1);
    
    --shadow:
      0 1px 3px 0 rgba(0, 0, 0, 0.1),
      0 1px 2px -1px rgba(0, 0, 0, 0.1);
    
    --shadow-xl:
      0 20px 25px -5px rgba(0, 0, 0, 0.1),
      0 8px 10px -6px rgba(0, 0, 0, 0.1);

    /* Radius */
    --radius-none:     0px;
    --radius-sm:       2px;
    --radius:          4px;
    --radius-md:       6px;
    --radius-lg:       8px;
    --radius-xl:      12px;
    --radius-full:  9999px;
           

    /* Typography */
    --font-family:     'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --font-mono:       'JetBrains Mono', 'Fira Code', 'Consolas', monospace;
    
    /* ─────────────────────────────────────────────────────────────
       Typography Scale (Tailwind-aligned, base = 14px)
    ───────────────────────────────────────────────────────────── */
    
    --font-size: 14px;
    
    /* Small sizes */
    --text-xs: 0.714rem;   /* 10px */
    --text-sm: 0.857rem;   /* 12px */
    
    /* Base */
    --text-base: 1rem;     /* 14px */
    
    /* Larger text */
    --text-lg: 1.143rem;   /* 16px */
    --text-xl: 1.286rem;   /* 18px */
    --text-2xl: 1.429rem;  /* 20px */
    --text-3xl: 1.714rem;  /* 24px */
    --text-4xl: 2.143rem;  /* 30px */
    --text-5xl: 2.571rem;  /* 36px */
    --text-6xl: 3.429rem;  /* 48px */
    --text-7xl: 4.286rem;  /* 60px */
    --text-8xl: 5.143rem;  /* 72px */
    --text-9xl: 6.857rem;  /* 96px */
    


    /* ─────────────────────────────────────────────────────────────
       Font Weight Scale (Tailwind-aligned)
    ───────────────────────────────────────────────────────────── */
    
    --font-thin: 100;         /* Thin */
    --font-extralight: 200;   /* Extra Light */
    --font-light: 300;        /* Light */
    
    --font-normal: 400;       /* Default body text */
    --font-medium: 500;       /* Slight emphasis */
    
    --font-semibold: 600;     /* UI emphasis */
    --font-bold: 700;         /* Headings */
    
    --font-extrabold: 800;    /* Strong emphasis */
    --font-black: 900;        /* Maximum weight */
        
 }

/* ---------- Base Reset ---------- */
*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html, body {
    height: 100%;
    font-family: var(--font-family);
    font-size: 14px;
    color: var(--text);
    background: var(--bg);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

#app {
    height: 100%;
}

/* ---------- Scrollbar ---------- */
::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

::-webkit-scrollbar-track {
    background: transparent;
}

::-webkit-scrollbar-thumb {
    background: var(--gray-400);
    border-radius: var(--radius-full);
}

::-webkit-scrollbar-thumb:hover {
    background: var(--gray-500);
}

/* ---------- Blazor defaults ---------- */
.valid.modified:not([type=checkbox]) {
    outline: 1px solid var(--success);
}

.invalid {
    outline: 1px solid var(--danger);
}

.validation-message {
    color: var(--danger);
    font-size: 1rem;
}

#blazor-error-ui {
    color-scheme: light only;
    background: lightyellow;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    box-sizing: border-box;
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

#blazor-error-ui .dismiss {
    cursor: pointer;
    position: absolute;
    right: 0.75rem;
    top: 0.5rem;
}

.blazor-error-boundary {
    background: var(--danger);
    padding: 1rem 1rem 1rem 1rem;
    color: white;
    border-radius: var(--radius-md);
    margin: 1rem;
}

.blazor-error-boundary::after {
    content: "An error has occurred."
}

/* ---------- Loading animation ---------- */
.loading-progress {
    position: absolute;
    display: block;
    width: 8rem;
    height: 8rem;
    inset: 20vh 0 auto 0;
    margin: 0 auto 0 auto;
}

.loading-progress circle {
    fill: none;
    stroke: var(--border);
    stroke-width: 0.6rem;
    transform-origin: 50% 50%;
    transform: rotate(-90deg);
}

.loading-progress circle:last-child {
    stroke: var(--accent);
    stroke-dasharray: calc(3.141 * var(--blazor-load-percentage, 0%) * 0.8), 500%;
    transition: stroke-dasharray 0.05s ease-in-out;
}

.loading-progress-text {
    position: absolute;
    text-align: center;
    font-weight: bold;
    inset: calc(20vh + 3.25rem) 0 auto 0.2rem;
    color: var(--text);
}

.loading-progress-text:after {
    content: var(--blazor-load-percentage-text, "Loading");
}