/* =========================================================
   brand.css — الهوية البصرية لوزارة التعليم العالي والبحث العلمي
   ---------------------------------------------------------
   Loaded FIRST on every page. It carries the identity and nothing else: the
   palette, the Qomra typeface, the ministry pattern and one signature touch.
   The site's structure is not touched (owner, 2026-09-15).

   Rules agreed with the owner:
   - the palette below is the ONLY source of colour — a test fails on any other;
   - Ivory Mist and white carry the pages, Golden wheat decorates, Forest and
     Emerald Shadow are used sparingly for weight;
   - Golden wheat is never text on a light ground (1.99:1 on ivory, 2.40:1 on
     white); it is text only on Forest (6.73:1);
   - Damask Red means danger — and appears once more, as the signature rule
     under each page header — never as general decoration.
   ========================================================= */

/* ---------- الخط: ITF Qomra Arabic (ترخيص ويب من الوزارة) ---------- */
@font-face { font-family: 'ITF Qomra Arabic'; src: url('/static/fonts/qomra/qomra-light.ttf') format('truetype');
  font-weight: 300; font-style: normal; font-display: swap; }
@font-face { font-family: 'ITF Qomra Arabic'; src: url('/static/fonts/qomra/qomra-regular.ttf') format('truetype');
  font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'ITF Qomra Arabic'; src: url('/static/fonts/qomra/qomra-medium.ttf') format('truetype');
  font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: 'ITF Qomra Arabic'; src: url('/static/fonts/qomra/qomra-bold.ttf') format('truetype');
  font-weight: 600 700; font-style: normal; font-display: swap; }
@font-face { font-family: 'ITF Qomra Arabic'; src: url('/static/fonts/qomra/qomra-black.ttf') format('truetype');
  font-weight: 800 900; font-style: normal; font-display: swap; }

:root {
  /* ---------- اللوحة كما وردت في الهوية ---------- */
  --forest: #002623;
  --emerald-shadow: #094239;
  --mountain-teal: #427F77;
  --golden-wheat: #B8A678;
  --antique-sand: #978362;
  --ivory-mist: #EEEADF;
  --deep-umber: #290A10;
  --black-cherry: #4A151F;
  --damask-red: #6C1E2B;
  --charcoal: #161616;
  --stone: #3C3A3B;
  --white: #FFFFFF;

  /* ---------- المعاني: ما تستعمله الصفحات ---------- */
  --font-brand: 'ITF Qomra Arabic', Tahoma, 'Segoe UI', sans-serif;
  --page: var(--ivory-mist);
  --surface: var(--white);
  --text: var(--forest);
  --text-soft: var(--stone);
  --primary: var(--forest);
  --primary-hover: var(--emerald-shadow);
  --accent: var(--golden-wheat);
  --accent-deep: var(--antique-sand);
  --line: var(--golden-wheat);
  --line-soft: var(--ivory-mist);
  --success: var(--emerald-shadow);
  --info: var(--mountain-teal);
  --warning-bg: var(--golden-wheat);
  --warning-text: var(--forest);
  --danger: var(--damask-red);
  --danger-hover: var(--black-cherry);
  --signature: var(--damask-red);
  --on-primary: var(--white);
  --on-success: var(--white);
  --on-danger: var(--white);
  --surface-raised: var(--white);
  --disabled: var(--antique-sand);
  --focus: var(--golden-wheat);

  /* ---------- أدوار السطوح والنصوص التي تتبع المظهر ----------
     Each role equals, in daytime, exactly the palette colour it replaced in the
     components; only the dark mapping below changes it. */
  --surface-soft: var(--ivory-mist);
  --text-strong: var(--charcoal);
  --text-emerald: var(--emerald-shadow);
  --text-info: var(--mountain-teal);
  --text-danger: var(--damask-red);
  --text-cherry: var(--black-cherry);
  --text-umber: var(--deep-umber);
  --text-sand: var(--antique-sand);
  --line-strong: var(--stone);
  --edge: var(--forest);

  /* ---------- المتغيرات القديمة تتبع الهوية ----------
     Every older screen reads these names; pointing them at the palette turns
     the whole site without touching its structure. */
  --mohe-blue: var(--forest);
  --mohe-blue-dark: var(--charcoal);
  --mohe-blue-light: var(--ivory-mist);
  --mohe-gold: var(--golden-wheat);
  --mohe-gold-dark: var(--antique-sand);
  --mohe-gold-light: var(--ivory-mist);
  --neutral-black: var(--charcoal);
  --neutral-dark: var(--forest);
  --neutral-white: var(--white);
  --neutral-gray-50: var(--white);
  --neutral-gray-100: var(--ivory-mist);
  --neutral-gray-200: var(--ivory-mist);
  --neutral-gray-300: var(--golden-wheat);
  --neutral-gray-500: var(--stone);
  --neutral-gray-700: var(--stone);
  --success-green: var(--emerald-shadow);
  --success-green-light: var(--ivory-mist);
  --warning-red: var(--damask-red);
  --warning-red-light: var(--ivory-mist);
  --shadow-sm: 0 2px 8px rgba(0, 38, 35, 0.08);
  --shadow-md: 0 4px 16px rgba(0, 38, 35, 0.10);
  --shadow-lg: 0 8px 24px rgba(0, 38, 35, 0.14);
  --shadow-gold: 0 0 0 3px rgba(184, 166, 120, 0.35);
  --shadow-warning: 0 0 0 3px rgba(108, 30, 43, 0.20);
}

/* A theme changes semantic roles only. Components must use roles rather than
   inventing a second palette, so every foreground keeps a fitting surface.
   Screen only: printing always uses the daytime roles.
   Dark text pairs (colour review 2026-09-26): white/ivory for words, golden
   wheat for accents (4.7:1 on emerald, 6.7:1 on forest). Damask, teal and stone
   fall below 3:1 on the dark grounds, so states they carried become ivory text
   or a filled chip (theme.css). */
@media screen {
html[data-theme="dark"] {
  color-scheme: dark;
  --page: var(--charcoal);
  --surface: var(--emerald-shadow);
  --surface-raised: var(--forest);
  --surface-soft: var(--forest);
  --text: var(--white);
  --text-soft: var(--ivory-mist);
  --text-strong: var(--white);
  --text-emerald: var(--golden-wheat);
  --text-info: var(--ivory-mist);
  --text-danger: var(--ivory-mist);
  --text-cherry: var(--ivory-mist);
  --text-umber: var(--ivory-mist);
  --text-sand: var(--golden-wheat);
  --line-strong: var(--mountain-teal);
  --edge: var(--golden-wheat);
  --primary: var(--golden-wheat);
  --primary-hover: var(--antique-sand);
  --on-primary: var(--charcoal);
  --accent: var(--golden-wheat);
  --accent-deep: var(--antique-sand);
  --line: var(--mountain-teal);
  --line-soft: var(--mountain-teal);
  --success: var(--mountain-teal);
  --on-success: var(--white);
  --warning-bg: var(--golden-wheat);
  --warning-text: var(--charcoal);
  --danger: var(--damask-red);
  --danger-hover: var(--black-cherry);
  --on-danger: var(--white);
  --disabled: var(--antique-sand);
  --focus: var(--golden-wheat);
  --mohe-blue: var(--text);
  --mohe-blue-dark: var(--surface-raised);
  --mohe-blue-light: var(--surface);
  --mohe-gold: var(--accent);
  --mohe-gold-dark: var(--accent-deep);
  --mohe-gold-light: var(--surface);
  --neutral-black: var(--text);
  --neutral-dark: var(--text);
  --neutral-white: var(--surface);
  --neutral-gray-50: var(--surface);
  --neutral-gray-100: var(--surface-raised);
  --neutral-gray-200: var(--surface-raised);
  --neutral-gray-300: var(--line);
  --neutral-gray-500: var(--text-soft);
  --neutral-gray-700: var(--text-soft);
  --success-green: var(--success);
  --success-green-light: var(--surface);
  --warning-red: var(--danger);
  --warning-red-light: var(--surface);
  --shadow-sm: 0 2px 8px rgba(22, 22, 22, .30);
  --shadow-md: 0 4px 16px rgba(22, 22, 22, .38);
  --shadow-lg: 0 8px 24px rgba(22, 22, 22, .48);
  --shadow-gold: 0 0 0 3px rgba(184, 166, 120, .35);
}
}

/* ---------- الخط في كل مكان، ما عدا خطوط الأيقونات ---------- */
html, body, button, input, select, textarea, table, h1, h2, h3, h4, h5, h6, p, label, a, span, div, li, td, th {
  font-family: var(--font-brand);
}

/* ---------- تباين وإتاحة موحّدان ----------
   Forest on white/ivory is the default readable pair. Golden Wheat decorates
   borders and icons; it is deliberately never promoted to body text. */
a { color: var(--text); }
:where(a, button, input, select, textarea, summary):focus-visible {
  outline: 3px solid var(--antique-sand) !important;
  outline-offset: 3px;
}
::selection { background: var(--forest); color: var(--white); }
.fa, .fas, .far, .fab, .fa-solid, .fa-regular, .fa-brands,
[class^="fa-"], [class*=" fa-"] {
  font-family: 'Font Awesome 6 Free', 'Font Awesome 6 Brands', 'Font Awesome 5 Free', 'FontAwesome' !important;
}

/* ---------- الأرضية: السكري، والنمط خلفه بهدوء ----------
   The ministry pattern sits behind the page at a whisper — seen, never read
   through. Cards stay solid white, so no line ever crosses a word. */
/* The pattern lives on <html>, so no page's own body background can hide it.
   An ivory veil is almost solid where people read (the centre column) and thins
   toward the edges, where the pattern shows. */
html {
  background-color: var(--page);
  background-image:
    radial-gradient(ellipse 62% 75% at 50% 42%, rgba(238, 234, 223, .96) 0%, rgba(238, 234, 223, .90) 55%, rgba(238, 234, 223, .70) 100%),
    url('/static/images/pattern/pattern-gold.png');
  background-size: 100% 100%, 900px auto;
  background-repeat: no-repeat, repeat;
  background-attachment: fixed, fixed;
  min-height: 100%;
}
body {
  background: transparent !important;
  color: var(--text);
}

/* ---------- لمسة التوقيع: خط خمري رفيع تحت ترويسة كل صفحة ----------
   Damask Red appears once as identity, under the header — thin, gold-edged,
   and nowhere else except where something is genuinely dangerous. */
.header, .page-header, .official-header, .review-shell-head, .guide-head, .rep-head {
  position: relative;
}
.header::after, .page-header::after, .official-header::after {
  content: '';
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--golden-wheat) 0 18%, var(--signature) 18% 82%, var(--golden-wheat) 82% 100%);
  border-radius: 0 0 2px 2px;
  pointer-events: none;
}

/* ---------- الشرائط الداكنة: الأخضر مع النمط السكري ---------- */
.review-shell-head, .guide-head, .today-head-dark {
  background-color: var(--forest) !important;
  background-image: url('/static/images/pattern/pattern-ivory.png');
  background-size: 520px auto;
  background-blend-mode: soft-light;
}

/* ---------- الطباعة: أبيض وأسود، بلا نمط ولا توقيع ---------- */
@media print {
  html, body { background: #FFFFFF !important; }
  .header::after, .page-header::after, .official-header::after { display: none !important; }
}

/* ---------- مظهر ليلي موحّد ----------
   The component CSS predates the design tokens in places, so the selectors
   below intentionally cover cards, forms, tables and dialogs across the
   applicant and dashboard screens. Semantic success/danger colours stay put. */
.theme-toggle { min-height: 38px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); color: var(--text); padding: 7px 11px; cursor: pointer; display: inline-flex; align-items: center; gap: 7px; font: 800 .78rem var(--font-brand); }
.theme-toggle[data-theme-toggle] { display: none !important; }
html.theme-switch-enabled .theme-toggle[data-theme-toggle] { display: inline-flex !important; }
/* Pages embedded in the dashboard follow its switch; a second one would disagree. */
html.theme-embedded .theme-toggle[data-theme-toggle] { display: none !important; }
.theme-toggle:hover, .theme-toggle:focus-visible { background: var(--surface-raised); outline: 2px solid var(--focus); outline-offset: 2px; }