/* ==========================================================================
   MANARA GRC — design tokens, fonts and reset  (design system v2)
   One stylesheet for RTL (ar, default) and LTR (en): logical properties only.
   Theme contract: /assets/js/theme-init.js sets <html data-theme="light|dark"> before first paint.
   Light tokens live on :root, dark tokens on :root[data-theme="dark"]. Never use
   @media (prefers-color-scheme) for theming — the resolved attribute is the single source of truth.
   Hex values belong HERE only; site.css / app.css consume tokens.
   ========================================================================== */

/* ---------- Fonts: IBM Plex Sans Arabic (SIL OFL 1.1), self-hosted (Arabic + Latin glyphs) ------------- */
@font-face { font-family: "Plex Arabic"; src: url("../fonts/IBMPlexSansArabic-Regular.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Plex Arabic"; src: url("../fonts/IBMPlexSansArabic-Medium.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "Plex Arabic"; src: url("../fonts/IBMPlexSansArabic-SemiBold.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: "Plex Arabic"; src: url("../fonts/IBMPlexSansArabic-Bold.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }

/* ---------- Primitive scales (theme-independent) -------------------------------------------------------- */
:root {
  /* Navy — brand #10243A = navy-800 */
  --navy-50: #EEF2F7;  --navy-100: #DDE5EF; --navy-200: #B9C7D8; --navy-300: #8EA3BD; --navy-400: #5F7A9A;
  --navy-500: #3D5878; --navy-600: #284462; --navy-700: #1B334F; --navy-800: #10243A; --navy-900: #0B1A2B; --navy-950: #07111D;
  /* Teal — brand #008F91 = teal-500 */
  --teal-50: #E8F6F6;  --teal-100: #CCEDED; --teal-200: #9ADBDA; --teal-300: #5FC4C3; --teal-400: #2BB3B1;
  --teal-500: #008F91; --teal-600: #00777A; --teal-700: #00676A; --teal-800: #035355; --teal-900: #063F42;
  /* Emerald — brand #16745B = emerald-500 */
  --emerald-50: #E6F4EE; --emerald-100: #CDE8DC; --emerald-200: #9FD2BB; --emerald-300: #6AB894; --emerald-400: #34B88A;
  --emerald-500: #16745B; --emerald-600: #12634E; --emerald-700: #0F5A45; --emerald-800: #0C4234;
  /* Cool neutrals — light background #F6F8FB = slate-25 */
  --slate-0: #FFFFFF;  --slate-25: #F6F8FB; --slate-50: #F0F3F7; --slate-100: #E6EBF1; --slate-200: #DCE3EB;
  --slate-300: #C3CDD9; --slate-400: #7D8A9B; --slate-500: #6A7889; --slate-600: #586577; --slate-700: #364559; --slate-800: #263446;
  /* Amber — the lighthouse beam. Graphics and rare highlights only, never body text on light. */
  --amber-100: #FDF0D9; --amber-300: #F7C977; --amber-500: #F0A030; --amber-700: #8A5300;
  /* Dark-theme base — dark background #0B1523 */
  --search-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M11 4a7 7 0 1 0 0 14 7 7 0 0 0 0-14zM20 20l-4-4' fill='none' stroke='%237D8A9B' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E");
  --ink-bg: #0B1523; --ink-surface: #111E30; --ink-surface-2: #16263B; --ink-surface-3: #1D3049;
}

/* ---------- Semantic tokens: LIGHT (default) ------------------------------------------------------------ */
:root {
  color-scheme: light;

  /* Surfaces */
  --bg: var(--slate-25);
  --surface: var(--slate-0);
  --surface-2: var(--slate-50);            /* table heads, sunken panels */
  --surface-3: var(--slate-100);           /* hover rows, track fills */
  --surface-overlay: rgba(16, 36, 58, .52);
  --header-bg: rgba(246, 248, 251, .9);    /* translucent sticky headers */

  /* Lines */
  --line: var(--slate-200);
  --line-strong: var(--slate-300);
  --border-input: var(--slate-400);        /* ≥3:1 on surface (WCAG 1.4.11) */

  /* Text */
  --text: var(--navy-800);                 /* 14.8:1 on bg */
  --text-2: var(--slate-700);
  --text-muted: var(--slate-600);          /* ≥5:1 on bg / surface-2 */
  --text-on-dark: #F2F6FA;
  --text-on-dark-muted: #A9BBCF;

  /* Brand / action */
  --brand: var(--navy-800);
  --primary: var(--teal-600);              /* white text 5.4:1 */
  --primary-hover: var(--teal-700);
  --primary-active: var(--teal-800);
  --on-primary: #FFFFFF;
  --primary-soft: var(--teal-50);
  --primary-soft-hover: var(--teal-100);
  --primary-soft-fg: var(--teal-800);
  --accent: var(--teal-500);               /* graphics, indicators */
  --accent-text: var(--teal-700);          /* teal text on light */
  --link: var(--teal-700);
  --link-hover: var(--teal-800);
  --highlight: var(--amber-500);
  --focus: var(--teal-500);
  --focus-ring: 0 0 0 3px rgba(0, 143, 145, .28);

  /* Status — solid (bars, dots), bg/fg/border (badges, alerts) */
  --success: var(--emerald-500); --success-bg: var(--emerald-50); --success-fg: var(--emerald-700); --success-border: var(--emerald-200);
  --warning: #B7791F;            --warning-bg: #FDF3DD;           --warning-fg: #7A4D00;            --warning-border: #EBCB8A;
  --danger:  #C0352B;            --danger-bg:  #FCEBE9;           --danger-fg:  #9B2318;            --danger-border:  #F0B4AE;
  --danger-hover: #A12A21;       --on-danger: #FFFFFF;
  --info:    #2B6CB0;            --info-bg:    #E8F1FB;           --info-fg:    #1A4F86;            --info-border:    #AFCBEA;
  --neutral: var(--slate-500);   --neutral-bg: #EDF1F5;           --neutral-fg: var(--slate-700);   --neutral-border: #CDD5DF;

  /* Inverse surface (toasts, tooltips) */
  --inverse-bg: var(--navy-800);
  --inverse-fg: #F2F6FA;
  --inverse-line: rgba(255, 255, 255, .12);

  /* Avatar */
  --avatar-bg: var(--teal-100);
  --avatar-fg: var(--teal-800);

  /* Themed inline icons (data URIs are local; no remote url()) */
  --select-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 6l4 4 4-4' fill='none' stroke='%23586577' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  --check-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 12.5l3.2 3.2L17 9' fill='none' stroke='%2300676A' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");

  /* Risk levels — solid fill (heatmap cells) + label colour; meaning is also carried by text/numbers */
  --lvl-low: #7CC6A0;      --lvl-low-text: #0C3321;
  --lvl-medium: #F2C94C;   --lvl-medium-text: #3D2C00;
  --lvl-high: #F08A4B;     --lvl-high-text: #3A1300;
  --lvl-critical: #C62E2E; --lvl-critical-text: #FFFFFF;
  --lvl-none: var(--slate-50);

  /* Charts */
  --chart-1: var(--teal-600);
  --chart-2: var(--navy-500);
  --chart-3: var(--emerald-500);
  --chart-grid: var(--slate-100);
  --chart-axis: var(--slate-400);
  --chart-track: var(--slate-100);

  /* Sidebar rail (dark navy in both themes) */
  --sidebar-bg: var(--navy-800);
  --sidebar-line: rgba(255, 255, 255, .08);
  --sidebar-fg: #C9D5E3;
  --sidebar-fg-muted: #8FA3BA;
  --sidebar-hover: rgba(255, 255, 255, .07);
  --sidebar-active-bg: rgba(95, 196, 195, .16);
  --sidebar-active-fg: #FFFFFF;
  --sidebar-indicator: var(--teal-300);

  /* Elevation */
  --shadow-1: 0 1px 2px rgba(16, 36, 58, .06), 0 1px 1px rgba(16, 36, 58, .03);
  --shadow-2: 0 6px 16px -6px rgba(16, 36, 58, .14), 0 2px 4px rgba(16, 36, 58, .04);
  --shadow-3: 0 24px 48px -16px rgba(16, 36, 58, .28), 0 6px 14px rgba(16, 36, 58, .07);

  /* Typography */
  --font-sans: "Plex Arabic", system-ui, "Segoe UI", Tahoma, sans-serif;
  --font-mono: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  --fs-2xs: 0.6875rem; /* 11 */
  --fs-xs: 0.75rem;    /* 12 */
  --fs-sm: 0.875rem;   /* 14 */
  --fs-md: 1rem;       /* 16 */
  --fs-lg: 1.125rem;   /* 18 */
  --fs-xl: 1.375rem;   /* 22 */
  --fs-2xl: 1.75rem;   /* 28 */
  --fs-3xl: clamp(1.875rem, 1.4rem + 2vw, 2.75rem);
  --fs-4xl: clamp(2.125rem, 1.4rem + 3.2vw, 3.5rem);
  --lh-tight: 1.2;
  --lh-snug: 1.4;
  --lh-body: 1.65;

  /* Spacing (4px base) */
  --sp-1: 0.25rem; --sp-2: 0.5rem; --sp-3: 0.75rem; --sp-4: 1rem;
  --sp-5: 1.25rem; --sp-6: 1.5rem; --sp-8: 2rem; --sp-10: 2.5rem;
  --sp-12: 3rem; --sp-16: 4rem; --sp-20: 5rem; --sp-24: 6rem;

  /* Radii */
  --r-xs: 4px; --r-sm: 6px; --r-md: 8px; --r-lg: 12px; --r-xl: 16px; --r-pill: 999px;

  /* Motion & layout */
  --ease: cubic-bezier(.2, .7, .2, 1);
  --dur: 160ms;
  --container: 1200px;
  --header-h: 68px;
  --tap: 44px;

  /* Legacy aliases (kept so older selectors and report.css keep working) */
  --paper: var(--bg);
  --paper-2: var(--surface-3);
  --ink-900: var(--navy-800);
  --ink-950: var(--navy-950);
  --ink-800: var(--navy-700);
  --brass-100: var(--amber-100); --brass-300: var(--amber-300); --brass-500: var(--amber-500); --brass-700: var(--amber-700);
  --success-soft: var(--success-bg); --success-text: var(--success-fg);
  --warning-soft: var(--warning-bg); --warning-text: var(--warning-fg);
  --danger-soft: var(--danger-bg);   --danger-text: var(--danger-fg);
  --info-soft: var(--info-bg);       --info-text: var(--info-fg);
}

/* ---------- Semantic tokens: DARK ---------------------------------------------------------------------- */
:root[data-theme="dark"] {
  color-scheme: dark;

  --bg: var(--ink-bg);
  --surface: var(--ink-surface);
  --surface-2: var(--ink-surface-2);
  --surface-3: var(--ink-surface-3);
  --surface-overlay: rgba(3, 8, 15, .66);
  --header-bg: rgba(11, 21, 35, .88);

  --line: #243650;
  --line-strong: #33496A;
  --border-input: #5D7390;

  --text: #E8EEF5;
  --text-2: #C3CFDC;
  --text-muted: #97A8BC;

  --brand: #FFFFFF;
  --primary: var(--teal-400);              /* dark text on it 6.9:1 */
  --primary-hover: #4CC3C1;
  --primary-active: var(--teal-300);
  --on-primary: #04161F;
  --primary-soft: #0F3138;
  --primary-soft-hover: #14404A;
  --primary-soft-fg: #8FE3DF;
  --accent: var(--teal-400);
  --accent-text: #6FD6D2;
  --link: #6FD6D2;
  --link-hover: #A2E8E4;
  --focus: #6FD6D2;
  --focus-ring: 0 0 0 3px rgba(111, 214, 210, .30);

  --success: var(--emerald-400); --success-bg: #0F2E25; --success-fg: #7FDDB6; --success-border: #1E5A46;
  --warning: #E0A43A;            --warning-bg: #2F2411; --warning-fg: #F4CB7C; --warning-border: #5E4719;
  --danger:  #E5675D;            --danger-bg:  #36181B; --danger-fg:  #FFA69E; --danger-border:  #6B2A2C;
  --danger-hover: #EF8077;       --on-danger: #1A0505;
  --info:    #5C9EE6;            --info-bg:    #12263D; --info-fg:    #9CC8F5; --info-border:    #26476D;
  --neutral: #8D9BAD;            --neutral-bg: #1B2A3D; --neutral-fg: #C3CFDC; --neutral-border: #33496A;

  --inverse-bg: #E8EEF5;
  --inverse-fg: #0B1523;
  --inverse-line: rgba(11, 21, 35, .12);

  --avatar-bg: #0F3138;
  --avatar-fg: #8FE3DF;

  --select-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 6l4 4 4-4' fill='none' stroke='%2397A8BC' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  --check-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 12.5l3.2 3.2L17 9' fill='none' stroke='%236FD6D2' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");

  /* Risk levels on dark: same hue order, lifted saturation so cells stay distinct on navy */
  --lvl-low: #46A57B;      --lvl-low-text: #03140C;
  --lvl-medium: #D9AA3A;   --lvl-medium-text: #1C1300;
  --lvl-high: #E07A3C;     --lvl-high-text: #1E0900;
  --lvl-critical: #D23C3C; --lvl-critical-text: #FFFFFF;
  --lvl-none: var(--ink-surface-2);

  --chart-1: var(--teal-400);
  --chart-2: var(--navy-300);
  --chart-3: var(--emerald-400);
  --chart-grid: #22344C;
  --chart-axis: #6E829B;
  --chart-track: #22344C;

  --sidebar-bg: #0E1C2E;
  --sidebar-line: rgba(255, 255, 255, .07);

  --shadow-1: 0 1px 2px rgba(0, 0, 0, .35);
  --shadow-2: 0 6px 16px -6px rgba(0, 0, 0, .55), 0 0 0 1px rgba(255, 255, 255, .02);
  --shadow-3: 0 24px 48px -16px rgba(0, 0, 0, .7);
}

/* ---------- Reset -------------------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-padding-block-start: calc(var(--header-h) + 16px);   /* sticky headers never cover anchors */
  background: var(--bg);
}
body {
  margin: 0;
  min-height: 100vh;
  font-family: var(--font-sans);
  font-size: var(--fs-md);
  line-height: var(--lh-body);
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}
h1, h2, h3, h4, h5, h6 { margin: 0; line-height: var(--lh-tight); font-weight: 700; color: var(--text); }
[dir="rtl"] :is(h1, h2, h3, h4) { line-height: 1.4; }
p, ul, ol, dl, figure, blockquote { margin: 0; }
ul[class], ol[class] { padding: 0; list-style: none; }
img, svg, video { display: block; max-width: 100%; }
img { height: auto; }
a { color: var(--link); text-underline-offset: 3px; text-decoration-thickness: 1px; }
a:hover { color: var(--link-hover); }
button, input, select, textarea { font: inherit; color: inherit; letter-spacing: inherit; }
button { cursor: pointer; }
table { border-collapse: collapse; }
hr { border: 0; border-block-start: 1px solid var(--line); margin: var(--sp-6) 0; }
code, kbd, samp { font-family: var(--font-mono); font-size: .9em; }
code { background: var(--surface-3); padding: .1em .35em; border-radius: var(--r-xs); }
[hidden] { display: none !important; }

:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
  border-radius: 4px;
}
::selection { background: var(--teal-200); color: var(--navy-900); }

/* Numbers & codes inside Arabic text */
[dir="rtl"] .num, [dir="rtl"] code { unicode-bidi: isolate; }
.tabular, .num { font-variant-numeric: tabular-nums; }

/* ---------- Theme-aware assets ------------------------------------------------------------------------- */
[data-theme="dark"] .only-light { display: none !important; }
:root:not([data-theme="dark"]) .only-dark { display: none !important; }

/* ---------- Utilities ---------------------------------------------------------------------------------- */
.sr-only {
  position: absolute !important; inline-size: 1px; block-size: 1px;
  padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%);
  white-space: nowrap; border: 0;
}
.skip-link {
  position: absolute; inset-inline-start: var(--sp-4); inset-block-start: -100px;
  z-index: 1000; padding: var(--sp-2) var(--sp-4);
  background: var(--navy-800); color: #FFFFFF;
  border-radius: var(--r-md); text-decoration: none; font-weight: 600;
}
.skip-link:focus { inset-block-start: var(--sp-4); color: #FFFFFF; }

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