/*
 * VA1 Panel — design tokens.
 *
 * All colours, spacing, and typography are defined here as CSS custom
 * properties. Components reference them via Tailwind utilities
 * (configured to read these variables) or directly in scoped Razor CSS.
 *
 * Theme switching: html.dark / html.light / no-class (system) — the dark
 * palette is the unprefixed default; html.light overrides for light mode.
 *
 * Per-culture font swap lives at the bottom of this file: the SSR-set
 * `html[lang="…"]` attribute flips font-family variables before first paint.
 */

:root {
  /* ── Brand & status ── */
  --va-accent:        #00D4AA;
  --va-high:        #F97316;   /* Yüksek önem (severity) — turuncu */
  --va-on-accent:   #0F1117;   /* parlak/accent yüzey üstünde koyu metin (tema-bağımsız) */
  --va-accent-hover:  rgba(0, 212, 170, 0.85);
  --va-accent-dim:    rgba(0, 212, 170, 0.15);

  --va-danger:   #EF4444;
  --va-warning:  #F59E0B;
  --va-success:  #22C55E;
  --va-info:     #3B82F6;

  /* ── Typography (Latin default — overridden per culture below) ── */
  --va-font-heading: 'Public Sans', system-ui, sans-serif;
  --va-font-body:    'Public Sans', system-ui, sans-serif;
  --va-font-mono:    'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  /* ── Spacing (8px grid) ── */
  --va-sp-1:  4px;
  --va-sp-2:  8px;
  --va-sp-3:  12px;
  --va-sp-4:  16px;
  --va-sp-5:  20px;
  --va-sp-6:  24px;
  --va-sp-8:  32px;
  --va-sp-10: 40px;

  /* ── Layout ── */
  --va-sidebar-collapsed: 64px;
  --va-sidebar-expanded:  240px;
  --va-header-height:     56px;
  --va-bottom-nav-height: 60px;

  /* ── Radius / motion ── */
  --va-radius-sm: 6px;
  --va-radius:    8px;
  --va-radius-lg: 12px;
  --va-radius-xl: 16px;

  --va-transition: 200ms cubic-bezier(0.4, 0, 0.2, 1);

  /* ── Default (dark) palette ── */
  --va-bg:          #0F1117;
  --va-sidebar:     #1A1D26;
  --va-card:        #23262E;
  --va-elevated:    #2A2D36;

  --va-text:        #E4E6EB;
  --va-text-dim:    #8B8F9A;
  --va-text-muted:  #555962;

  --va-border:        #2C2F38;
  --va-border-light:  #363940;
  --va-border-strong: #4A4E58;

  --va-shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.40);
  --va-shadow:    0 4px 6px -1px rgba(0, 0, 0, 0.50), 0 2px 4px -2px rgba(0, 0, 0, 0.50);
  --va-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.55), 0 4px 6px -4px rgba(0, 0, 0, 0.55);
}

/*
 * ── Per-culture font swap ──
 *
 *   en / tr / fr / de    → Manrope (body) + Plus Jakarta Sans (headings)
 *                          (the default in :root above)
 *   ar (Arabic)          → Cairo, designed for Arabic UI; carries Latin
 *                          glyphs too so mixed content stays consistent.
 *
 * The active rule is selected by the SSR-rendered `<html lang>` attribute,
 * so the right family is in place before first paint.
 */
html[lang="ar"] {
  --va-font-body:    'Cairo', 'Manrope',           system-ui, -apple-system, sans-serif;
  --va-font-heading: 'Cairo', 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;
}

/* ── Light theme palette (overrides :root) ── */
html.light {
  --va-bg:          #F5F6F8;
  --va-sidebar:     #FFFFFF;
  --va-card:        #FFFFFF;
  --va-elevated:    #F8FAFC;

  --va-text:        #1A1D26;
  --va-text-dim:    #6B7280;
  --va-text-muted:  #9CA3AF;

  --va-border:        #E5E7EB;
  --va-border-light:  #D1D5DB;
  --va-border-strong: #9CA3AF;

  --va-shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  --va-shadow:    0 4px 6px -1px rgba(0, 0, 0, 0.10), 0 2px 4px -2px rgba(0, 0, 0, 0.06);
  --va-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.10), 0 4px 6px -4px rgba(0, 0, 0, 0.05);
}

/* ── Baseline reset / sensible defaults ── */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; min-height: 100%; }
body {
  background-color: var(--va-bg);
  color: var(--va-text);
  font-family: var(--va-font-body);
  font-size: 14px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
h1, h2, h3, h4, h5, h6 { font-family: var(--va-font-heading); font-weight: 600; margin: 0; }
button { font-family: inherit; }
a { color: var(--va-accent); text-decoration: none; }
a:hover { text-decoration: underline; }

/*
 * ── Programmatic-focus outline suppression ──
 *
 * Blazor's <FocusOnNavigate Selector="h1"> calls .focus() on the page heading
 * after every navigation (including initial load + refresh) for screen-reader
 * accessibility. Browsers default to showing a focus outline on any element
 * that receives focus, which lights up the heading on every refresh — visually
 * loud and not what the user wants.
 *
 * :focus-visible is true only when focus came from keyboard / a11y navigation;
 * suppressing the outline for plain :focus keeps the indicator for keyboard
 * users while removing it for programmatic / pointer focus.
 */
*:focus:not(:focus-visible) {
  outline: none;
}

/*
 * ── Chrome / WebKit autofill recolouring ──
 *
 * The browser paints a pale-blue / pale-yellow background on autofilled
 * inputs by default, which clashes with our dark surface. The classic fix:
 *   • box-shadow inset of the surface colour overrides the autofill paint
 *   • -webkit-text-fill-color forces the text colour we want
 *   • caret-color keeps the caret visible
 *   • the absurdly long transition defers Chrome's revert animation
 *     effectively forever, locking the override in place
 *
 * Lives in the global stylesheet because Blazor scoped CSS doesn't reach
 * Chrome's UA shadow tree consistently for these pseudo-classes.
 */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active,
textarea:-webkit-autofill,
textarea:-webkit-autofill:hover,
textarea:-webkit-autofill:focus,
select:-webkit-autofill,
select:-webkit-autofill:hover,
select:-webkit-autofill:focus {
  -webkit-text-fill-color: var(--va-text);
  -webkit-box-shadow: 0 0 0 1000px var(--va-elevated) inset;
          box-shadow: 0 0 0 1000px var(--va-elevated) inset;
  caret-color: var(--va-text);
  transition: background-color 5000s ease-in-out 0s, color 5000s ease-in-out 0s;
}

/*
 * ── Global scrollbar styling ──
 *
 * Thin, themed, rounded thumb with a transparent track. Follows light /
 * dark themes via the existing border tokens — no per-theme overrides
 * needed. Component-scoped scrollbars (rail-nav, branch-panel list,
 * ui-orgs list, ui-cmd results) keep their own tighter rules; this is
 * the default for every other scrollable surface.
 *
 * Firefox honours `scrollbar-width` + `scrollbar-color` on any element;
 * WebKit / Blink use the `::-webkit-scrollbar` pseudo-elements.
 */
* {
  scrollbar-width: thin;
  scrollbar-color: var(--va-border-light) transparent;
}
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background-color: var(--va-border-light);
  border-radius: 999px;
}
::-webkit-scrollbar-thumb:hover {
  background-color: var(--va-border-strong);
}
::-webkit-scrollbar-corner { background: transparent; }