/* =====================================================================
   TecRoot LMS: design tokens (generated from the TecRoot LMS design system
   tokens.json). Load AFTER bootstrap(.rtl).min.css and BEFORE tecroot-ui.css.
   Theme switch: data-bs-theme="light|dark" on <html> (already set by _head.php).
   ===================================================================== */
:root,
[data-bs-theme="light"] {
  --tc-primary: #194BFB;
  --tc-primary-hover: #0F3AD9;
  --tc-primary-active: #0B30B8;
  --tc-on-primary: #FFFFFF;
  --tc-primary-soft: #E8EDFF;
  --tc-primary-soft-2: #EDF1FF;
  --tc-primary-border: #C7D3FF;
  --tc-primary-bright: #436CFF;
  --tc-link: #194BFB;
  --tc-accent: #3DBDB5;
  --tc-accent-strong: #0B7A73;
  --tc-accent-soft: #EAF9F8;
  --tc-brand-grad-start: #4BBFB8;
  --tc-brand-grad-end: #6B8EF0;
  --tc-logo-start: #4DB5C8;
  --tc-logo-end: #2D7DDE;
  --tc-brand-ink: #2D7DDE;
  --tc-bg: #F8FAFC;
  --tc-surface: #FFFFFF;
  --tc-surface-2: #F7F8FA;
  --tc-surface-3: #F1F2F4;
  --tc-border: #EEF0F3;
  --tc-border-strong: #E2E8F0;
  --tc-border-control: #D0D5DD;
  --tc-text: #1A202C;
  --tc-text-2: #2D3748;
  --tc-text-3: #4A5568;
  --tc-muted: #667489;
  --tc-subtle: #718096;
  --tc-placeholder: #8E9AAB;
  --tc-sidebar-bg: #FFFFFF;
  --tc-sidebar-border: #ECEFF2;
  --tc-inverse-bg: #0C1B2E;
  --tc-on-inverse: #FFFFFF;
  --tc-focus: #194BFB;
  --tc-success: #0CAF60;
  --tc-success-strong: #087A44;
  --tc-success-soft: #E5F8F4;
  --tc-success-border: #A7E8CF;
  --tc-warning: #F5963E;
  --tc-warning-strong: #8A5300;
  --tc-warning-soft: #FFF8E0;
  --tc-warning-border: #F6DFA0;
  --tc-danger: #DC2626;
  --tc-danger-strong: #B91C1C;
  --tc-danger-soft: #FFF0F0;
  --tc-danger-border: #FECACA;
  --tc-on-danger: #FFFFFF;
  --tc-info: #60B7D2;
  --tc-info-strong: #185FA5;
  --tc-info-soft: #E6F1FB;
  --tc-orange: #C2410C;
  --tc-orange-soft: #FFEDD5;
  --tc-purple: #6B3FD9;
  --tc-purple-soft: #F1EBFF;
  --tc-event-client-bg: #FDF5E0;
  --tc-event-client-ink: #854F0B;
  --tc-event-offer-bg: #E1F5EE;
  --tc-event-offer-ink: #0F6E56;
  --tc-event-internal-bg: #F3F4F6;
  --tc-event-internal-bar: #4285F4;
  --tc-viz-1: #3B82F6;
  --tc-viz-2: #F59E0B;
  --tc-viz-3: #22C55E;
  --tc-viz-4: #8C62FF;
  --tc-viz-5: #E0245E;
  --tc-viz-6: #3DBDB5;
  --tc-viz-neutral: #DBE0E6;
  --tc-viz-grid: #EDF0F4;
  --tc-viz-line: #194BFB;
  --shadow-xs: 0 1px 2px rgba(16, 24, 40, 0.04);
  --shadow-card: 0 1px 2px rgba(16, 24, 40, 0.04), 0 2px 10px rgba(17, 24, 39, 0.04);
  --shadow-raised: 0 12px 40px rgba(17, 24, 39, 0.07);
  --shadow-popover: 0 12px 40px rgba(17, 24, 39, 0.14), 0 2px 8px rgba(17, 24, 39, 0.06);
  --shadow-modal: 0 20px 60px rgba(17, 24, 39, 0.12), 0 4px 16px rgba(17, 24, 39, 0.06);
  --shadow-primary: 0 3px 12px rgba(25, 75, 251, 0.30);
}
[data-bs-theme="dark"] {
  --tc-primary: #3D63FF;
  --tc-primary-hover: #2F55F0;
  --tc-primary-active: #2448D6;
  --tc-on-primary: #FFFFFF;
  --tc-primary-soft: #172B5C;
  --tc-primary-soft-2: #14254D;
  --tc-primary-border: #2C4590;
  --tc-primary-bright: #6E8BFF;
  --tc-link: #8EA5FF;
  --tc-accent: #3DBDB5;
  --tc-accent-strong: #5ECECA;
  --tc-accent-soft: #0E3532;
  --tc-brand-grad-start: #4BBFB8;
  --tc-brand-grad-end: #6B8EF0;
  --tc-logo-start: #4DB5C8;
  --tc-logo-end: #2D7DDE;
  --tc-brand-ink: #7FB0F2;
  --tc-bg: #0A1424;
  --tc-surface: #0F1D33;
  --tc-surface-2: #13233D;
  --tc-surface-3: #1A2B48;
  --tc-border: #1F3150;
  --tc-border-strong: #2A3F63;
  --tc-border-control: #526A99;
  --tc-text: #EEF2F8;
  --tc-text-2: #D5DCE8;
  --tc-text-3: #B4C0D3;
  --tc-muted: #93A1B8;
  --tc-subtle: #8695AE;
  --tc-placeholder: #6A7A98;
  --tc-sidebar-bg: #0C1B2E;
  --tc-sidebar-border: #1A2C47;
  --tc-inverse-bg: #EEF2F8;
  --tc-on-inverse: #0C1B2E;
  --tc-focus: #8EA5FF;
  --tc-success: #22C58A;
  --tc-success-strong: #4ADE9B;
  --tc-success-soft: #0E3326;
  --tc-success-border: #1D5A42;
  --tc-warning: #F5A65B;
  --tc-warning-strong: #F7C266;
  --tc-warning-soft: #3A2A0E;
  --tc-warning-border: #5C4518;
  --tc-danger: #F26B6B;
  --tc-danger-strong: #FF9A9A;
  --tc-danger-soft: #3D1518;
  --tc-danger-border: #6A2328;
  --tc-on-danger: #1A0607;
  --tc-info: #60B7D2;
  --tc-info-strong: #7CC2F0;
  --tc-info-soft: #10304A;
  --tc-orange: #FB9A4B;
  --tc-orange-soft: #3B2210;
  --tc-purple: #B49BFF;
  --tc-purple-soft: #2A1E52;
  --tc-event-client-bg: #3A2E12;
  --tc-event-client-ink: #F3CD86;
  --tc-event-offer-bg: #0F3529;
  --tc-event-offer-ink: #6FDDB7;
  --tc-event-internal-bg: #1A2B48;
  --tc-event-internal-bar: #6FA0F7;
  --tc-viz-1: #5B97F8;
  --tc-viz-2: #F5B03A;
  --tc-viz-3: #34D27A;
  --tc-viz-4: #A385FF;
  --tc-viz-5: #F0567F;
  --tc-viz-6: #4FD1C9;
  --tc-viz-neutral: #2E4266;
  --tc-viz-grid: #1B2B47;
  --tc-viz-line: #6E8BFF;
  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.35);
  --shadow-card: 0 1px 2px rgba(0, 0, 0, 0.35), 0 2px 10px rgba(0, 0, 0, 0.25);
  --shadow-raised: 0 12px 40px rgba(0, 0, 0, 0.45);
  --shadow-popover: 0 12px 40px rgba(0, 0, 0, 0.55), 0 2px 8px rgba(0, 0, 0, 0.35);
  --shadow-modal: 0 20px 60px rgba(0, 0, 0, 0.6), 0 4px 16px rgba(0, 0, 0, 0.4);
  --shadow-primary: 0 3px 12px rgba(61, 99, 255, 0.35);
}
:root {
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --radius-xs: 4px;
  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-2xl: 20px;
  --radius-pill: 999px;
  --control-sm: 32px;
  --control-md: 40px;
  --control-lg: 48px;
  --icon-btn: 40px;
  --icon-tile: 40px;
  --avatar-sm: 32px;
  --avatar-md: 40px;
  --sidebar-w: 248px;
  --topbar-h: 72px;
  --content-max: 1480px;
  --z-dropdown: 1000;
  --z-sticky: 1020;
  --z-sidebar: 1030;
  --z-modal: 1055;
  --z-toast: 1090;
  --font-display: "Plus Jakarta Sans", "Readex Pro", "Inter", system-ui, sans-serif;
  --font-sans: "Inter", "IBM Plex Sans Arabic", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --font-ar-display: "Readex Pro", "IBM Plex Sans Arabic", "Plus Jakarta Sans", sans-serif;
  --font-ar: "IBM Plex Sans Arabic", "Inter", system-ui, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Consolas, "Liberation Mono", monospace;
}

/* ---------- Bootstrap wiring + legacy aliases ----------
   Keeps Bootstrap utilities (text-body-secondary, border, bg-body…) and the
   old --tc-* / --viz-* names used by charts.js and inline styles working. */
:root, [data-bs-theme] {
  --bs-body-bg: var(--tc-bg); --bs-body-color: var(--tc-text-2); --bs-body-font-family: var(--font-sans);
  --bs-emphasis-color: var(--tc-text); --bs-secondary-color: var(--tc-muted); --bs-tertiary-color: var(--tc-placeholder);
  --bs-secondary-bg: var(--tc-surface-2); --bs-tertiary-bg: var(--tc-surface-3);
  --bs-border-color: var(--tc-border); --bs-border-color-translucent: var(--tc-border); --bs-border-radius: var(--radius-md); --bs-border-radius-lg: var(--radius-lg);
  --bs-primary: var(--tc-primary); --bs-link-color: var(--tc-link); --bs-link-hover-color: var(--tc-primary-hover);
  --bs-success: var(--tc-success-strong); --bs-danger: var(--tc-danger-strong); --bs-warning: var(--tc-warning); --bs-info: var(--tc-info-strong);
  --bs-focus-ring-color: var(--tc-primary-soft);
  /* legacy LMS names */
  --tc-secondary: var(--tc-text); --tc-radius: var(--radius-xl); --tc-radius-sm: var(--radius-md); --tc-shadow: var(--shadow-card);
  --tc-sidebar-text: var(--tc-muted); --tc-sidebar-muted: var(--tc-subtle); --tc-sidebar-hover: var(--tc-surface-2);
  --tc-sidebar-w: var(--sidebar-w); --tc-topbar-h: var(--topbar-h); --tc-font: var(--font-sans);
  /* charts.js reads these */
  --viz-c1: var(--tc-viz-1); --viz-c2: var(--tc-viz-2); --viz-c3: var(--tc-viz-3); --viz-c4: var(--tc-viz-4); --viz-c5: var(--tc-viz-5); --viz-c6: var(--tc-viz-6);
  --viz-good: var(--tc-success); --viz-warning: var(--tc-warning); --viz-serious: var(--tc-orange); --viz-critical: var(--tc-danger); --viz-neutral: var(--tc-viz-neutral);
  --viz-grid: var(--tc-viz-grid); --viz-axis: var(--tc-border-strong); --viz-muted: var(--tc-muted); --viz-text: var(--tc-text); --viz-text-2: var(--tc-text-3);
  --viz-tooltip-bg: var(--tc-inverse-bg); --viz-tooltip-text: var(--tc-on-inverse);
}

/* ---------- Fonts (self-hosted in public/assets/vendor/fonts) ---------- */
@font-face { font-family: "Inter"; font-weight: 400; font-display: swap; src: url("../vendor/fonts/inter-latin-400.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-weight: 500; font-display: swap; src: url("../vendor/fonts/inter-latin-500.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-weight: 600; font-display: swap; src: url("../vendor/fonts/inter-latin-600.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-weight: 700; font-display: swap; src: url("../vendor/fonts/inter-latin-700.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Sans Arabic"; font-weight: 400; font-display: swap; src: url("../vendor/fonts/plex-arabic-400.woff2") format("woff2"); unicode-range: U+0600-06FF, U+0750-077F, U+FB50-FDFF, U+FE70-FEFF; }
@font-face { font-family: "IBM Plex Sans Arabic"; font-weight: 500; font-display: swap; src: url("../vendor/fonts/plex-arabic-500.woff2") format("woff2"); unicode-range: U+0600-06FF, U+0750-077F, U+FB50-FDFF, U+FE70-FEFF; }
@font-face { font-family: "IBM Plex Sans Arabic"; font-weight: 600; font-display: swap; src: url("../vendor/fonts/plex-arabic-600.woff2") format("woff2"); unicode-range: U+0600-06FF, U+0750-077F, U+FB50-FDFF, U+FE70-FEFF; }
@font-face { font-family: "IBM Plex Sans Arabic"; font-weight: 700; font-display: swap; src: url("../vendor/fonts/plex-arabic-700.woff2") format("woff2"); unicode-range: U+0600-06FF, U+0750-077F, U+FB50-FDFF, U+FE70-FEFF; }
/* NEW files: download per 02_DESIGN_SYSTEM_HANDOFF.md §3 */
@font-face { font-family: "Plus Jakarta Sans"; font-weight: 600; font-display: swap; src: url("../vendor/fonts/plus-jakarta-sans-latin-600.woff2") format("woff2"); }
@font-face { font-family: "Plus Jakarta Sans"; font-weight: 700; font-display: swap; src: url("../vendor/fonts/plus-jakarta-sans-latin-700.woff2") format("woff2"); }
@font-face { font-family: "Plus Jakarta Sans"; font-weight: 800; font-display: swap; src: url("../vendor/fonts/plus-jakarta-sans-latin-800.woff2") format("woff2"); }
@font-face { font-family: "Readex Pro"; font-weight: 500; font-display: swap; src: url("../vendor/fonts/readex-pro-arabic-500.woff2") format("woff2"); unicode-range: U+0600-06FF, U+0750-077F, U+FB50-FDFF, U+FE70-FEFF; }
@font-face { font-family: "Readex Pro"; font-weight: 600; font-display: swap; src: url("../vendor/fonts/readex-pro-arabic-600.woff2") format("woff2"); unicode-range: U+0600-06FF, U+0750-077F, U+FB50-FDFF, U+FE70-FEFF; }
@font-face { font-family: "Readex Pro"; font-weight: 700; font-display: swap; src: url("../vendor/fonts/readex-pro-arabic-700.woff2") format("woff2"); unicode-range: U+0600-06FF, U+0750-077F, U+FB50-FDFF, U+FE70-FEFF; }