/*
 * Prof. Sherif El Hawary — brand layer on top of Tabler.
 * Tokens come from the brand kit (brand/brand-tokens.css); Tabler is themed by
 * overriding its CSS variables, so no Tabler source is modified.
 */

/* ---- Fonts (self-hosted; Latin → Manrope, Arabic → IBM Plex Sans Arabic) --- */
@font-face { font-family: "Manrope"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("../fonts/manrope-latin-400.1589a53d0b0e.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Manrope"; font-style: normal; font-weight: 600; font-display: swap;
  src: url("../fonts/manrope-latin-600.58d382c3e448.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Manrope"; font-style: normal; font-weight: 700; font-display: swap;
  src: url("../fonts/manrope-latin-700.ed9e261b92db.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Manrope"; font-style: normal; font-weight: 800; font-display: swap;
  src: url("../fonts/manrope-latin-800.63c74bc8894a.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "IBM Plex Sans Arabic"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("../fonts/ibm-plex-sans-arabic-400.4fa3d81d41ab.woff2") format("woff2");
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC; }
@font-face { font-family: "IBM Plex Sans Arabic"; font-style: normal; font-weight: 600; font-display: swap;
  src: url("../fonts/ibm-plex-sans-arabic-600.64891a810259.woff2") format("woff2");
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC; }
@font-face { font-family: "IBM Plex Sans Arabic"; font-style: normal; font-weight: 700; font-display: swap;
  src: url("../fonts/ibm-plex-sans-arabic-700.a4390abc98c2.woff2") format("woff2");
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC; }

/* ---- Tokens ---------------------------------------------------------------- */
:root {
  --brand-blue: #1747A6;
  --brand-navy: #0C1E45;
  --brand-orange: #FF7A1A;
  --brand-orange-text: #E2600B;  /* orange for small text on white */
  --brand-sky: #EAF1FF;
  --brand-cream: #FFF3E8;
  --brand-radius: 14px;

  /* Tabler theme */
  /* light-dark(): Tabler switches on color-scheme, set by data-bs-theme (static/js/theme.js). */
  --tblr-primary: light-dark(var(--brand-blue), #4F7FE0);
  --tblr-primary-rgb: 23, 71, 166;
  --tblr-primary-lt-rgb: 232, 237, 246;
  --tblr-primary-fg: #fff;
  --tblr-link-color: light-dark(var(--brand-blue), #8FB0F2);
  --tblr-link-color-rgb: 23, 71, 166;
  --tblr-font-sans-serif: "Manrope", "IBM Plex Sans Arabic", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --tblr-border-radius-scale: 1.4;
  --tblr-body-color: light-dark(var(--brand-navy), #DDE3EE);
  --tblr-headings-color: light-dark(var(--brand-navy), #F2F5FA);
}

/* Dark: Tabler's own surfaces, a deep navy page and brighter accents for contrast. */
[data-bs-theme="dark"] {
  --tblr-body-bg: #0A1630;
  --tblr-bg-surface: #111F3D;
  --tblr-primary-lt-rgb: 30, 52, 96;
  --tblr-bg-forms: #0D1A35;
  --tblr-control-bg: #0D1A35;
  --brand-orange-text: #FF9A52;
}

/* Arabic first when the page is in Arabic, so punctuation and digits match. */
html[dir="rtl"] {
  --tblr-font-sans-serif: "IBM Plex Sans Arabic", "Manrope", system-ui, -apple-system, "Segoe UI", Tahoma, sans-serif;
}

/* ---- Components -------------------------------------------------------------- */
.card { border-radius: var(--brand-radius); }
.card-md > .card-body { padding: 2rem; }

.btn-accent {
  --tblr-btn-bg: var(--brand-orange);
  --tblr-btn-border-color: var(--brand-orange);
  --tblr-btn-color: #fff;
  --tblr-btn-hover-bg: #e86a0d;
  --tblr-btn-hover-border-color: #e86a0d;
  --tblr-btn-hover-color: #fff;
}
.text-accent { color: var(--brand-orange-text) !important; }

/* Tabler spaces button icons with left/right margins; logical ones keep the gap between
   icon and text on the correct side in right-to-left pages (same values left-to-right). */
.btn .icon {
  margin-inline: calc(var(--tblr-btn-padding-x) / -4) calc(var(--tblr-btn-padding-x) / 2);
}
.btn .icon-end, .btn .icon-right {
  margin-inline: calc(var(--tblr-btn-padding-x) / 2) calc(var(--tblr-btn-padding-x) / -4);
}
.btn-icon .icon { margin: calc(-1 * var(--tblr-btn-padding-x)); }

.navbar { border-bottom: 1px solid var(--tblr-border-color); }
.footer { border-top: 0; }

/* Sign-in pages: the hero from the brand kit, as a background (CSP forbids inline styles). */
.auth-page { background: var(--tblr-bg-surface, #fff); }
.auth-hero {
  min-height: 100vh;
  /* "contain" on the hero's own blue: the whole artwork stays visible at any width. */
  background: var(--brand-blue) url("../brand/img/login-hero.e3622b9fa9ef.svg") center / contain no-repeat;
}

/* Logos keep their aspect ratio and never push the page wider than the screen. */
.brand-logo { width: auto; max-width: 100%; }
.brand-logo-lg { height: 44px; }
.brand-logo-sm { height: 32px; max-width: 55vw; }

/* Visible keyboard focus everywhere. */
:focus-visible { outline: 3px solid color-mix(in oklab, var(--brand-blue) 55%, transparent); outline-offset: 2px; }

/* Device check: big, legible code input. */
#device-code { letter-spacing: 0.5em; }

/* Avatars: uploaded pictures fill the circle; otherwise the first initial on a brand tone. */
.avatar { font-weight: 700; }
.avatar > .avatar-img { width: 100%; height: 100%; object-fit: cover; border-radius: inherit; }
.avatar-tone-0 { background: var(--brand-blue); color: #fff; }
.avatar-tone-1 { background: var(--brand-orange); color: #fff; }
.avatar-tone-2 { background: light-dark(var(--brand-navy), #2B4A85); color: #fff; }
.avatar-tone-3 { background: var(--brand-sky); color: var(--brand-blue); }
.avatar-tone-4 { background: var(--brand-cream); color: var(--brand-orange-text); }
.avatar-tone-5 { background: #E3E9F4; color: var(--brand-navy); }

/* Learning progress: a native <progress> (its width needs no inline style under the CSP).
   It fills from the inline start, so right-to-left pages fill from the right. */
.lms-progress {
  display: block;
  width: 100%;
  height: .375rem;
  appearance: none;
  border: 0;
  border-radius: 999px;
  overflow: hidden;
  background: var(--tblr-border-color);  /* the track, readable in both themes */
  color: var(--tblr-primary);
}
.lms-progress::-webkit-progress-bar { background: transparent; }
.lms-progress::-webkit-progress-value { background: var(--tblr-primary); border-radius: 999px; }
.lms-progress::-moz-progress-bar { background: var(--tblr-primary); border-radius: 999px; }
.lms-progress.is-complete::-webkit-progress-value { background: var(--tblr-success); }
.lms-progress.is-complete::-moz-progress-bar { background: var(--tblr-success); }

/* ---- Staging / development stripe (context_processors.site) ----------------- */
.environment-banner {
  padding: 0.25rem 1rem;
  font-size: 0.8125rem;
  font-weight: 600;
  text-align: center;
  color: var(--brand-navy);
  background: repeating-linear-gradient(
    -45deg, var(--brand-cream), var(--brand-cream) 12px, #ffe2c7 12px, #ffe2c7 24px
  );
  border-bottom: 1px solid var(--brand-orange);
}