/* Al Mawakib theme: one palette and one typeface for every page.
   Page templates keep their own layout CSS; their colors point at the tokens below. */

@font-face {
  font-family: "Readex Pro";
  font-style: normal;
  font-weight: 160 700;
  font-display: swap;
  src: url("../fonts/readex-pro-latin.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: "Readex Pro";
  font-style: normal;
  font-weight: 160 700;
  font-display: swap;
  src: url("../fonts/readex-pro-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329,
    U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  /* Crest colors: navy-cobalt shield, gold, red. */
  --encre: #0d1f5c;          --encre-rgb: 13 31 92;
  --encre-2: #16307f;
  --cobalt: #1c3faa;         --cobalt-rgb: 28 63 170;
  --cobalt-light: #3b63d9;   --cobalt-light-rgb: 59 99 217;
  --cobalt-100: #d6def6;
  --cobalt-50: #ecf0fb;
  --cobalt-25: #f5f7fd;
  --safran: #e0a410;         --safran-rgb: 224 164 16;
  --safran-700: #7a5300;
  --safran-50: #fbf2da;
  --grenade: #c42b32;        --grenade-rgb: 196 43 50;
  --grenade-700: #94181f;
  --grenade-50: #fbe9ea;
  --menthe: #1b7f57;         --menthe-rgb: 27 127 87;
  --menthe-700: #0f5c3d;
  --menthe-50: #e4f3ec;
  --ardoise: #1b2440;        --ardoise-rgb: 27 36 64;
  --brume: #5e6886;
  --ligne: #dde2ee;
  --craie: #f3f5fa;
  --ombre-rgb: 13 31 92;

  --font: "Readex Pro", "Segoe UI", system-ui, -apple-system, sans-serif;
  --focus: var(--cobalt);

  /* Eight-point star lattice, as in zellige tilework. */
  --zellige: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='56' viewBox='0 0 56 56'%3E%3Cg fill='none' stroke='%23e0a410' stroke-opacity='.35' stroke-width='1.1'%3E%3Crect x='15' y='15' width='26' height='26'/%3E%3Crect x='15' y='15' width='26' height='26' transform='rotate(45 28 28)'/%3E%3Cpath d='M0 0l9.6 9.6M56 0l-9.6 9.6M0 56l9.6-9.6M56 56l-9.6-9.6'/%3E%3C/g%3E%3C/svg%3E");

  /* Bootstrap 5.3 picks these up (bg-primary, text-primary, links...). */
  --bs-primary: var(--cobalt);
  --bs-primary-rgb: 28, 63, 170;          /* Bootstrap needs commas here */
  --bs-danger: var(--grenade);
  --bs-danger-rgb: 196, 43, 50;
  --bs-success: var(--menthe);
  --bs-success-rgb: 27, 127, 87;
  --bs-info: var(--cobalt-light);
  --bs-info-rgb: 59, 99, 217;
  --bs-warning: var(--safran);
  --bs-warning-rgb: 224, 164, 16;
  --bs-body-font-family: var(--font);
  --bs-body-color: var(--ardoise);
  --bs-body-bg: var(--craie);
  --bs-link-color: var(--cobalt);
  --bs-link-color-rgb: 28, 63, 170;
  --bs-link-hover-color: var(--encre-2);
  --bs-border-color: var(--ligne);
}

/* ---------- Base ---------- */

/* No body color here: pages like the login screen set their own (white on navy). */
body {
  font-family: var(--font);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
body :is(h1, h2, h3, h4) { letter-spacing: -0.01em; }
body :is(h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6) { font-family: var(--font); }
body :is(input, select, textarea, button) { font-family: inherit; }

::selection { background: rgb(var(--safran-rgb) / .35); color: var(--encre); }

body :focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 2px;
}
body .form-control:focus,
body .form-select:focus {
  border-color: var(--cobalt-light);
  box-shadow: 0 0 0 .22rem rgb(var(--cobalt-light-rgb) / .22);
}

/* On dark surfaces the gold reads better than blue. */
body :is(.sidebar, .header-card, .page-header, .student-box) { --focus: var(--safran); }

/* ---------- Signature: header bands with zellige ---------- */

body :is(.header-card, .page-header, .student-box) {
  background-color: var(--encre);
  background-image: linear-gradient(100deg, var(--encre) 38%, rgb(var(--encre-rgb) / .5) 100%), var(--zellige);
  background-size: auto, 64px 64px;
  background-position: 0 0, right -8px center;
  box-shadow: 0 10px 28px rgb(var(--ombre-rgb) / .16);
}

/* ---------- Sidebar ---------- */

body .sidebar { background: var(--encre); }
body .sidebar .menu-item { border-radius: 10px; }
body .sidebar .menu-item.active {
  background: rgb(255 255 255 / .1);
  box-shadow: inset 3px 0 0 var(--safran);
  color: #fff;
}

/* ---------- Class selection panels: light, so the header band stays the only dark block ---------- */

body .card-form {
  background: #fff;
  color: var(--ardoise);
  border-top: 4px solid var(--encre);
  box-shadow: 0 1px 2px rgb(var(--ombre-rgb) / .06), 0 10px 28px rgb(var(--ombre-rgb) / .07);
}
body .card-form :is(.form-label, .section-title) { color: var(--encre); }
body .card-form :is(.form-label, .section-title) i { color: var(--cobalt); }

/* ---------- Tiles and cards ---------- */

body .dashboard-card {
  box-shadow: 0 1px 2px rgb(var(--ombre-rgb) / .06), 0 6px 18px rgb(var(--ombre-rgb) / .05);
  transition: box-shadow .2s ease, transform .2s ease;
}
body .dashboard-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 2px 4px rgb(var(--ombre-rgb) / .06), 0 14px 30px rgb(var(--ombre-rgb) / .1);
}
body .dashboard-card .arrow { transition: transform .2s ease; }
body .dashboard-card:hover .arrow { transform: translateX(3px); color: var(--cobalt); }

body .table > thead :is(th, td) {
  background: var(--cobalt-50);
  color: var(--encre);
  font-weight: 600;
}

/* ---------- Bootstrap buttons follow the palette ---------- */

body .btn { font-weight: 500; }
body .btn-primary {
  --bs-btn-bg: var(--cobalt);          --bs-btn-border-color: var(--cobalt);
  --bs-btn-hover-bg: var(--encre-2);   --bs-btn-hover-border-color: var(--encre-2);
  --bs-btn-active-bg: var(--encre);    --bs-btn-active-border-color: var(--encre);
}
body .btn-outline-primary {
  --bs-btn-color: var(--cobalt);       --bs-btn-border-color: var(--cobalt);
  --bs-btn-hover-bg: var(--cobalt);    --bs-btn-hover-border-color: var(--cobalt);
}
body .btn-danger {
  --bs-btn-bg: var(--grenade);         --bs-btn-border-color: var(--grenade);
  --bs-btn-hover-bg: var(--grenade-700); --bs-btn-hover-border-color: var(--grenade-700);
}
body .btn-outline-danger {
  --bs-btn-color: var(--grenade);      --bs-btn-border-color: var(--grenade);
  --bs-btn-hover-bg: var(--grenade);   --bs-btn-hover-border-color: var(--grenade);
}
body .btn-success {
  --bs-btn-bg: var(--menthe);          --bs-btn-border-color: var(--menthe);
  --bs-btn-hover-bg: var(--menthe-700); --bs-btn-hover-border-color: var(--menthe-700);
}

/* ---------- Flash messages (templates/includes/messages.html) ---------- */

body .flash-stack {
  position: fixed;
  top: 18px;
  right: 18px;
  z-index: 2000;
  display: grid;
  gap: 10px;
  width: min(420px, calc(100vw - 32px));
}
body .flash {
  --tone: var(--cobalt);
  --tone-bg: var(--cobalt-50);
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: start;
  gap: 12px;
  padding: 14px 12px 14px 16px;
  background: #fff;
  background-image: linear-gradient(90deg, var(--tone-bg), #fff 70%);
  border: 1px solid var(--ligne);
  border-left: 5px solid var(--tone);
  border-radius: 12px;
  box-shadow: 0 12px 32px rgb(var(--ombre-rgb) / .18);
  color: var(--ardoise);
  animation: flash-in .22s ease-out;
}
body .flash-success { --tone: var(--menthe);  --tone-bg: var(--menthe-50); }
body .flash-error   { --tone: var(--grenade); --tone-bg: var(--grenade-50); }
body .flash-warning { --tone: var(--safran);  --tone-bg: var(--safran-50); }
body .flash-icon { color: var(--tone); font-size: 20px; line-height: 1.3; }
body .flash-warning .flash-icon { color: var(--safran-700); }
body .flash-text { margin: 0; font-size: 15px; line-height: 1.45; font-weight: 500; }
body .flash-close {
  border: 0;
  background: transparent;
  color: var(--brume);
  width: 30px; height: 30px;
  border-radius: 8px;
  line-height: 1;
}
body .flash-close:hover { background: var(--craie); color: var(--ardoise); }
@keyframes flash-in {
  from { opacity: 0; transform: translateY(-8px); }
  to   { opacity: 1; transform: none; }
}
@media (max-width: 575.98px) {
  body .flash-stack { top: 10px; right: 16px; left: 16px; width: auto; }
}

/* ---------- Login page ---------- */

body .forgot { color: var(--cobalt-100); }
body .forgot:hover { color: #fff; }

body .forgot-help {
  margin: 8px 0 18px;
  text-align: right;
  font-size: 13px;
  line-height: 1.45;
  color: var(--cobalt-100);
}

/* ---------- Phones ---------- */

@media (max-width: 575.98px) {
  /* Two tiles per row instead of one tile per screen. */
  body .row:has(> div > .dashboard-card) { --bs-gutter-x: .75rem; --bs-gutter-y: .75rem; }
  body .row > div:has(> .dashboard-card) { flex: 0 0 auto; width: 50%; }
  body .dashboard-card { padding: 14px; border-radius: 14px; }
  body .dashboard-card .card-icon {
    width: 42px; height: 42px; font-size: 18px; border-radius: 12px; margin-bottom: 10px;
  }
  body .dashboard-card h5 { font-size: 15px; line-height: 1.25; }
  body .dashboard-card p { font-size: 12.5px; line-height: 1.35; }
  body .dashboard-card .arrow { display: none; }  /* the whole tile is the link; the arrow would cover the text */
  body :is(.header-card, .page-header, .student-box) {
    background-image: linear-gradient(100deg, var(--encre) 55%, rgb(var(--encre-rgb) / .6) 100%), var(--zellige);
  }
  body .welcome :is(h1, h2, h3) { font-size: clamp(1.15rem, 5vw, 1.5rem); }
}

@media (prefers-reduced-motion: reduce) {
  body *, body *::before, body *::after { transition: none !important; animation: none !important; }
  body .dashboard-card:hover, body .dashboard-card:hover .arrow { transform: none; }
}