/* ====================================================================
   Dros Spot — dashboard design system, v7 "own shell"
   AdminLTE is GONE. This file + clean Bootstrap 5.3 RTL are the whole
   UI: a hand-built shell (fixed light sidebar · glass topbar · page
   head) speaking the landing language — warm paper canvas, Cairo 900
   headings, ink-indigo actions with a soft colored shadow, tiny gold
   kickers, big radii, hairlines. Color otherwise = MEANING only.
   Revise Mode = darker indigo accents (never walls, never violet).
   ==================================================================== */

@font-face {
  font-family: 'Cairo';
  font-style: normal;
  font-weight: 200 1000;
  font-display: swap;
  src: url('/fonts/cairo/cairo-arabic.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: 'Cairo';
  font-style: normal;
  font-weight: 200 1000;
  font-display: swap;
  src: url('/fonts/cairo/cairo-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ============================================================
   Tokens
   ============================================================ */
:root {
  --dros-primary: #34419B;
  --dros-primary-dark: #2B3785;
  --dros-primary-darker: #1E2657;
  --dros-primary-light: #EEF0FA;   /* tint bg */
  --dros-accent: #E7913A;          /* apricot — meaningful warnings only */
  --dros-accent-dark: #C2761F;
  --dros-accent-light: #FBEEDD;
  --dros-ink: #1A2140;
  --dros-ink-soft: #5B6478;
  --dros-ink-faint: #98A0B3;

  --dros-success: #1F9366;
  --dros-success-text: #14603F;
  --dros-success-bg: #E3F2EA;
  --dros-warning: #B27C10;
  --dros-warning-text: #6B4A05;
  --dros-warning-bg: #F9EFD7;
  --dros-danger: #CB3A4C;
  --dros-danger-text: #8C1D2B;
  --dros-danger-bg: #FBE7E9;
  --dros-info-text: #2B3785;
  --dros-info-bg: #EEF0FA;

  --dros-surface: #FFFFFF;
  --dros-canvas: #F7F5EE;          /* the landing's warm paper */
  --dros-border: #E7E1D5;          /* the landing's hairline */
  --dros-border-strong: #D8D1C2;
  --dros-hover: #F4F1E8;
  --dros-gold: #C9A227;            /* landing kicker gold — micro-accents only */

  --dros-radius: .9rem;
  --dros-radius-sm: .6rem;
  --dros-shadow: 0 1px 2px rgba(20, 24, 40, .05);
  --dros-shadow-lg: 0 12px 32px -12px rgba(20, 24, 40, .18);

  --side-w: 272px;
  --pad-x: clamp(1rem, 2.5vw, 2rem);

  /* Bootstrap variable alignment — hairlines + ink everywhere */
  --bs-body-font-family: 'Cairo', Tahoma, sans-serif;
  --bs-primary: #34419B;
  --bs-primary-rgb: 52, 65, 155;
  --bs-link-color: #34419B;
  --bs-link-hover-color: #2B3785;
  --bs-link-color-rgb: 52, 65, 155;
  --bs-link-hover-color-rgb: 43, 55, 133;
  --bs-border-color: #E7E1D5;
  --bs-border-radius: .75rem;
  --bs-secondary-color: #5B6478;
  --bs-tertiary-bg: #F4F1E8;
}

/* ============================================================
   Base
   ============================================================ */
/* Smooth page-to-page navigation: the browser cross-fades between documents
   instead of white-flashing (Chromium; harmless elsewhere). */
@media (prefers-reduced-motion: no-preference) {
  @view-transition { navigation: auto; }
  ::view-transition-old(root) { animation-duration: .16s; }
  ::view-transition-new(root) { animation-duration: .16s; }
}
/* Reserve the scrollbar lane so short↔long pages never shift the layout. */
html { scrollbar-gutter: stable; }

body { font-family: 'Cairo', Tahoma, sans-serif; color: var(--dros-ink); }
body.dros-app { background: var(--dros-canvas); min-height: 100vh; }
::selection { background: rgba(52, 65, 155, .18); }
hr { border-color: var(--dros-border); opacity: 1; }

/* Thin, quiet scrollbars app-wide */
* { scrollbar-width: thin; scrollbar-color: #D5CFC2 transparent; }
*::-webkit-scrollbar { width: 8px; height: 8px; }
*::-webkit-scrollbar-thumb { background: #D5CFC2; border-radius: 8px; }
*::-webkit-scrollbar-track { background: transparent; }

/* ============================================================
   Shell — sidebar
   ============================================================ */
.side {
  position: fixed;
  inset-block: 0;
  inset-inline-start: 0;
  width: var(--side-w);
  z-index: 1045;
  display: flex;
  flex-direction: column;
  background: var(--dros-surface);
  border-inline-end: 1px solid var(--dros-border);
  transition: transform .25s ease;
}
.side-brand { border-bottom: 1px solid var(--dros-border); padding: .9rem 1.15rem; }
.side-brand-link { display: flex; align-items: center; gap: .7rem; text-decoration: none; color: var(--dros-ink); }
.side-logo { height: 46px; width: auto; }
.side-brand-text { display: flex; flex-direction: column; line-height: 1.25; }
.side-brand-text strong { font-weight: 900; font-size: 1.12rem; }
.side-brand-text small { color: var(--dros-ink-faint); font-size: .72rem; font-weight: 700; }
.side-scroll { flex: 1 1 auto; overflow-y: auto; padding-block: .5rem .75rem; }

/* Nav — kickers + pill links (markup: ul.sidebar-menu > li > a.nav-link > i.nav-icon + p) */
.side .sidebar-menu { display: block; padding: 0; margin: 0; }
.side .nav-header {
  display: block;
  color: var(--dros-gold);
  font-size: .68rem;
  font-weight: 800;
  letter-spacing: .05em;
  text-transform: uppercase;
  padding: 1.1rem 1.25rem .3rem;
}
.side .sidebar-menu .nav-link {
  display: flex;
  align-items: center;
  gap: .6rem;
  color: #4A5164;
  border-radius: 12px;
  margin: 2px 10px;
  padding: .48rem .9rem;
  font-weight: 700;
  font-size: .92rem;
}
.side .sidebar-menu .nav-link p { margin: 0; flex: 1 1 auto; display: flex; align-items: center; gap: .45rem; min-width: 0; }
.side .sidebar-menu .nav-link .nav-icon { color: #A3AABC; font-size: 1.05rem; flex: 0 0 auto; }
.side .sidebar-menu .nav-link:hover { background: var(--dros-hover); color: var(--dros-ink); }
.side .sidebar-menu .nav-link:hover .nav-icon { color: var(--dros-primary); }
/* Active = the landing's ink button, miniaturized */
.side .sidebar-menu .nav-link.active {
  background: var(--dros-primary);
  color: #fff;
  font-weight: 800;
  box-shadow: 0 8px 18px -10px rgba(52, 65, 155, .55);
}
.side .sidebar-menu .nav-link.active .nav-icon { color: #fff; }

/* Live dot — marks the Revise tab that appears only while the mode is on */
.side-live {
  margin-inline-start: auto; flex: 0 0 auto;
  width: 9px; height: 9px; border-radius: 50%;
  background: #232C6B; position: relative;
}
.side-live::after {
  content: ''; position: absolute; inset: -4px; border-radius: 50%;
  border: 2px solid rgba(35, 44, 107, .45);
  animation: livepulse 1.8s ease-out infinite;
}
@keyframes livepulse {
  0% { transform: scale(.55); opacity: 1; }
  100% { transform: scale(1.5); opacity: 0; }
}
.side .nav-link.active .side-live { background: #F5C542; }
.side .nav-link.active .side-live::after { border-color: rgba(245, 197, 66, .55); }
@media (prefers-reduced-motion: reduce) { .side-live::after { animation: none; opacity: 0; } }

/* Nav count badge */
.nav-badge {
  margin-inline-start: auto;
  font-size: .68rem; font-weight: 800;
  background: var(--dros-danger); color: #fff;
  border-radius: 999px; padding: .12em .55em;
}
.side .sidebar-menu .nav-link.active .nav-badge { background: rgba(255, 255, 255, .25); color: #fff; }

/* Signed-in user — pinned foot */
.side-user {
  display: flex; align-items: center; gap: .65rem;
  border-top: 1px solid var(--dros-border);
  padding: .8rem 1rem;
  background: #FBFBF8;
}
.side-avatar {
  flex: 0 0 auto;
  width: 38px; height: 38px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--dros-primary-light); color: var(--dros-primary);
  font-weight: 900; font-size: 1.05rem;
}
.side-user-meta { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; line-height: 1.3; }
.side-user-name { font-weight: 800; font-size: .88rem; color: var(--dros-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.side-user-role { font-size: .72rem; color: var(--dros-ink-faint); font-weight: 700; }
.side-logout {
  flex: 0 0 auto;
  width: 36px; height: 36px; border-radius: 10px;
  display: inline-flex; align-items: center; justify-content: center;
  background: transparent; border: 1px solid var(--dros-border);
  color: var(--dros-ink-soft); font-size: 1rem; cursor: pointer;
  transition: background .15s ease, color .15s ease;
}
.side-logout:hover { background: var(--dros-danger-bg); color: var(--dros-danger-text); border-color: #EFC5CB; }

/* Drawer backdrop (mobile) */
.shell-backdrop {
  position: fixed; inset: 0; z-index: 1040;
  background: rgba(16, 20, 46, .45);
  opacity: 0; pointer-events: none; transition: opacity .2s ease;
}
body.side-open .shell-backdrop { opacity: 1; pointer-events: auto; }

/* Mobile: off-canvas drawer (RTL — hides off the inline-start/right edge) */
@media (max-width: 991.98px) {
  .side {
    transform: translateX(100%);
    box-shadow: none;
    width: min(var(--side-w), 84vw);
  }
  body.side-open { overflow: hidden; }
  body.side-open .side { transform: none; box-shadow: 0 24px 70px -20px rgba(16, 20, 46, .45); }
}

/* ============================================================
   Shell — main column
   ============================================================ */
.shell-main {
  margin-inline-start: var(--side-w);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
@media (max-width: 991.98px) { .shell-main { margin-inline-start: 0; } }

/* Topbar — quiet glass utility strip */
.topbar {
  position: sticky; top: 0; z-index: 1030;
  display: flex; align-items: center; gap: .6rem;
  padding: .6rem var(--pad-x);
  background: rgba(247, 245, 238, .86);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(231, 225, 213, .8);
}
.topbar-burger {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 44px; min-height: 44px; border-radius: 12px;
  background: #fff; border: 1px solid var(--dros-border);
  color: var(--dros-ink); font-size: 1.25rem; cursor: pointer;
}
.topbar-brand { display: inline-flex; align-items: center; gap: .5rem; text-decoration: none; color: var(--dros-ink); }
.topbar-brand img { height: 32px; width: auto; }
.topbar-brand strong { font-weight: 900; font-size: 1.02rem; white-space: nowrap; }
@media (max-width: 575.98px) {
  .revise-on-pill { display: none; }        /* state stays evident from the dark accents */
  .topbar-brand strong { display: none; }   /* logo-only brand keeps the strip one line */
}
.topbar-date {
  align-items: center; gap: .45rem;
  background: #fff; border: 1px solid var(--dros-border); border-radius: 999px;
  padding: .32rem .95rem; font-size: .83rem; font-weight: 700; color: var(--dros-ink-soft);
}
.topbar-date .bi { color: var(--dros-gold); }
.topbar-cluster {
  display: flex; align-items: center; gap: .35rem;
  list-style: none; margin: 0; padding: 0;
}
.topbar-cluster .nav-item { position: relative; }
.topbar .nav-link {
  display: inline-flex; align-items: center;
  color: var(--dros-ink-soft); font-weight: 700; border-radius: 999px;
  padding: .45rem .7rem; background: none; border: 0; cursor: pointer;
}
.topbar .nav-link:hover { color: var(--dros-primary); background: rgba(255, 255, 255, .85); }
.topbar .btn-sm { border-radius: 999px; }
/* Navigation progress bar — fills the click→page gap with visible motion.
   Armed by html.nav-away (set on internal-link click), swept away by the load. */
.nav-progress {
  position: fixed; top: 0; inset-inline-start: 0; z-index: 2000;
  height: 3px; width: 0; pointer-events: none;
  background: linear-gradient(90deg, #34419B, #5261C4, #F5C542);
  border-end-end-radius: 3px;
}
html.nav-away .nav-progress { width: 85%; transition: width 1.8s cubic-bezier(.15, .6, .25, 1); }

/* Revise Mode switch — a real toggle in the topbar. OFF = resting hairline pill
   (click opens the confirm modal); ON = deep-indigo pill with a gold knob (one
   click deactivates). The knob slides inline-start→inline-end. */
.mode-switch {
  display: inline-flex; align-items: center; gap: .5rem;
  background: #fff; border: 1px solid var(--dros-border); border-radius: 999px;
  padding: .3rem .8rem .3rem .95rem; cursor: pointer;
  font-family: inherit; font-size: .82rem; font-weight: 800; color: var(--dros-ink-soft);
  transition: background-color .18s ease, color .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.mode-switch:hover { border-color: #B9C0E4; color: var(--dros-ink); }
.mode-switch .ms-track {
  position: relative; width: 34px; height: 19px; border-radius: 999px;
  background: #E3DFD3; transition: background-color .18s ease; flex: 0 0 auto;
}
.mode-switch .ms-knob {
  position: absolute; top: 2.5px; inset-inline-start: 3px;
  width: 14px; height: 14px; border-radius: 50%;
  background: #fff; box-shadow: 0 1px 3px rgba(26, 33, 64, .35);
  transition: transform .18s ease, background-color .18s ease;
}
.mode-switch.is-on {
  background: #232C6B; border-color: #232C6B; color: #fff;
  box-shadow: 0 10px 22px -10px rgba(26, 33, 64, .6);
}
.mode-switch.is-on .ms-track { background: rgba(255, 255, 255, .28); }
.mode-switch.is-on .ms-knob { transform: translateX(-15px); background: #F5C542; }
html[dir="ltr"] .mode-switch.is-on .ms-knob { transform: translateX(15px); }
.mode-switch.is-on:hover { background: #1A2147; border-color: #1A2147; }
@media (max-width: 575.98px) { .mode-switch .ms-label { display: none; } }

/* Ops-room switch — the same pill, used as a doorway. Resting it reads like any other
   toggle; hovering slides the knob and fills the pill with ink, so the click feels like
   flipping over to the other room rather than following a link. */
.ops-switch { text-decoration: none; }
.ops-switch:hover,
.ops-switch:focus-visible {
  background: #232C6B; border-color: #232C6B; color: #fff;
  box-shadow: 0 10px 22px -10px rgba(26, 33, 64, .6);
}
.ops-switch:hover .ms-track,
.ops-switch:focus-visible .ms-track { background: rgba(255, 255, 255, .28); }
.ops-switch:hover .ms-knob,
.ops-switch:focus-visible .ms-knob { transform: translateX(-15px); background: #F5C542; }
html[dir="ltr"] .ops-switch:hover .ms-knob,
html[dir="ltr"] .ops-switch:focus-visible .ms-knob { transform: translateX(15px); }

.member-pill {
  background: linear-gradient(90deg, #34419B, #5261C4, #F5C542);
  color: #fff; font-weight: 700; font-size: 12.5px;
  padding: 4px 12px; border-radius: 999px; white-space: nowrap;
}

/* Page head — the page carries its own title (Cairo 900) + actions */
.page-head {
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: .6rem;
  padding: 1.15rem var(--pad-x) .4rem;
}
.page-head h1 { margin: 0; font-weight: 900; color: var(--dros-ink); font-size: 1.55rem; }
.page-actions { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }

.page-body { flex: 1 1 auto; padding: .35rem var(--pad-x) 2.2rem; }

.app-footer {
  display: flex; align-items: center; justify-content: space-between; gap: .5rem;
  padding: .8rem var(--pad-x) 1.1rem;
  color: var(--dros-ink-faint); font-size: .78rem;
  border-top: 1px solid var(--dros-border);
}

/* Notched-device safe areas (viewport-fit=cover) */
@supports (padding-top: env(safe-area-inset-top)) {
  .topbar {
    padding-top: calc(.6rem + env(safe-area-inset-top));
    padding-left: calc(var(--pad-x) + env(safe-area-inset-left));
    padding-right: calc(var(--pad-x) + env(safe-area-inset-right));
  }
  .side { padding-top: env(safe-area-inset-top); }
  .page-body {
    padding-left: calc(var(--pad-x) + env(safe-area-inset-left));
    padding-right: calc(var(--pad-x) + env(safe-area-inset-right));
  }
}

/* ============================================================
   Buttons — landing .btn-ink language
   ============================================================ */
.btn { --bs-btn-font-weight: 800; border-radius: 14px; }
.btn-sm { border-radius: 11px; }
.btn-lg { border-radius: 16px; }
.btn-primary {
  --bs-btn-bg: #34419B; --bs-btn-border-color: #34419B;
  --bs-btn-hover-bg: #2B3785; --bs-btn-hover-border-color: #2B3785;
  --bs-btn-active-bg: #1E2657; --bs-btn-active-border-color: #1E2657;
  --bs-btn-disabled-bg: #B8C0E4; --bs-btn-disabled-border-color: #B8C0E4;
  box-shadow: 0 10px 24px -12px rgba(52, 65, 155, .55);
  transition: transform .15s ease, box-shadow .15s ease;
}
.btn-primary:hover { transform: translateY(-1px); box-shadow: 0 12px 26px -12px rgba(52, 65, 155, .6); }
.btn-outline-primary {
  --bs-btn-color: #34419B; --bs-btn-border-color: #C6CCE8;
  --bs-btn-hover-bg: #EEF0FA; --bs-btn-hover-border-color: #34419B; --bs-btn-hover-color: #2B3785;
  --bs-btn-active-bg: #34419B; --bs-btn-active-border-color: #34419B; --bs-btn-active-color: #fff;
}
.btn-outline-secondary {
  --bs-btn-color: #5B6478; --bs-btn-border-color: #DBDAD1;
  --bs-btn-hover-bg: #F5F5F1; --bs-btn-hover-border-color: #C9C8BF; --bs-btn-hover-color: #1A2140;
}
.btn-success {
  --bs-btn-bg: #1F9366; --bs-btn-border-color: #1F9366;
  --bs-btn-hover-bg: #17734F; --bs-btn-hover-border-color: #17734F;
  --bs-btn-active-bg: #14603F; --bs-btn-active-border-color: #14603F;
}
.btn-outline-success {
  --bs-btn-color: #17734F; --bs-btn-border-color: #BFE0D0;
  --bs-btn-hover-bg: var(--dros-success-bg); --bs-btn-hover-border-color: #1F9366; --bs-btn-hover-color: #14603F;
  --bs-btn-active-bg: #1F9366; --bs-btn-active-border-color: #1F9366; --bs-btn-active-color: #fff;
}
.btn-danger {
  --bs-btn-bg: #CB3A4C; --bs-btn-border-color: #CB3A4C;
  --bs-btn-hover-bg: #A82C3C; --bs-btn-hover-border-color: #A82C3C;
  --bs-btn-active-bg: #8C1D2B; --bs-btn-active-border-color: #8C1D2B;
}
.btn-outline-danger {
  --bs-btn-color: #A82C3C; --bs-btn-border-color: #EFC5CB;
  --bs-btn-hover-bg: var(--dros-danger-bg); --bs-btn-hover-border-color: #CB3A4C; --bs-btn-hover-color: #8C1D2B;
  --bs-btn-active-bg: #CB3A4C; --bs-btn-active-border-color: #CB3A4C; --bs-btn-active-color: #fff;
}
.btn-warning {
  --bs-btn-bg: #B27C10; --bs-btn-border-color: #B27C10; --bs-btn-color: #fff;
  --bs-btn-hover-bg: #8A6109; --bs-btn-hover-border-color: #8A6109; --bs-btn-hover-color: #fff;
  --bs-btn-active-bg: #6B4A05; --bs-btn-active-border-color: #6B4A05; --bs-btn-active-color: #fff;
}
.btn-outline-warning {
  --bs-btn-color: #8A6109; --bs-btn-border-color: #EBD6A4;
  --bs-btn-hover-bg: var(--dros-warning-bg); --bs-btn-hover-border-color: #B27C10; --bs-btn-hover-color: #6B4A05;
  --bs-btn-active-bg: #B27C10; --bs-btn-active-border-color: #B27C10; --bs-btn-active-color: #fff;
}
.btn-info {
  --bs-btn-bg: #4A57B5; --bs-btn-border-color: #4A57B5; --bs-btn-color: #fff;
  --bs-btn-hover-bg: #3C489C; --bs-btn-hover-border-color: #3C489C; --bs-btn-hover-color: #fff;
  --bs-btn-active-bg: #34419B; --bs-btn-active-border-color: #34419B; --bs-btn-active-color: #fff;
}
.btn-secondary {
  --bs-btn-bg: #5B6478; --bs-btn-border-color: #5B6478;
  --bs-btn-hover-bg: #4A5264; --bs-btn-hover-border-color: #4A5264;
}
.btn-light {
  --bs-btn-bg: #F4F1E8; --bs-btn-border-color: #E7E1D5; --bs-btn-color: #1A2140;
  --bs-btn-hover-bg: #ECE8DC; --bs-btn-hover-border-color: #D8D1C2; --bs-btn-hover-color: #1A2140;
}
.btn-link { --bs-btn-font-weight: 700; text-decoration: none; }
.btn-link:hover { text-decoration: underline; }
/* Apricot accent button — kept for the rare flagged CTA */
.btn-accent {
  --bs-btn-color: #fff; --bs-btn-bg: #E7913A; --bs-btn-border-color: #E7913A;
  --bs-btn-hover-color: #fff; --bs-btn-hover-bg: #C2761F; --bs-btn-hover-border-color: #C2761F;
  --bs-btn-active-bg: #A9651A; --bs-btn-active-border-color: #A9651A;
  color: #fff;
}

.text-bg-primary { background-color: #34419B !important; }
.bg-primary { background-color: #34419B !important; }
.text-primary { color: #34419B !important; }
.bg-light { background-color: #F4F1E8 !important; }
.text-muted { color: var(--dros-ink-faint) !important; }

/* ============================================================
   Forms
   ============================================================ */
.form-label { font-weight: 700; color: var(--dros-ink); font-size: .9rem; margin-bottom: .35rem; }
.form-control, .form-select { border-color: #DED9CF; border-radius: 12px; padding-block: .55rem; }
.form-control-lg, .form-select-lg { border-radius: .7rem; }
.form-control:focus, .form-select:focus {
  border-color: #B8C0E4;
  box-shadow: 0 0 0 .18rem rgba(52, 65, 155, .12);
}
.form-check-input { border-color: #C9C2B2; }
.form-check-input:checked { background-color: #34419B; border-color: #34419B; }
.form-check-input:focus { border-color: #B8C0E4; box-shadow: 0 0 0 .18rem rgba(52, 65, 155, .12); }
.form-switch .form-check-input { height: 1.35em; width: 2.6em; }
.form-check-label { font-weight: 600; }
.input-group-text { background: #F4F1E8; border-color: #DED9CF; color: var(--dros-ink-soft); border-radius: 12px; }
.input-group > :first-child { border-start-start-radius: 12px; border-end-start-radius: 12px; }
.input-group > :last-child { border-start-end-radius: 12px; border-end-end-radius: 12px; }

/* ============================================================
   Cards
   ============================================================ */
.card {
  border: 1px solid var(--dros-border);
  border-radius: 20px;
  box-shadow: 0 1px 2px rgba(26, 33, 64, .04), 0 14px 34px -30px rgba(26, 33, 64, .25);
  background: var(--dros-surface);
}
.card-header {
  background: transparent;
  border-bottom: 1px solid var(--dros-border);
  padding: .95rem 1.25rem;
  color: var(--dros-ink);
}
.card-header .card-title { color: var(--dros-ink); }
.card-header a:not(.btn) { color: var(--dros-primary); }
/* Legacy opt-out class — same look as the default now; kept for compatibility. */
.card-header.card-header-tinted { background: transparent; color: var(--dros-ink); }
.card-header.card-header-tinted .card-title { color: var(--dros-ink); }
.card-header.card-header-tinted a:not(.btn) { color: var(--dros-primary); }
.card-title { font-weight: 900; color: var(--dros-ink); font-size: 1.02rem; margin-bottom: 0; }
.card-body { color: var(--dros-ink); }
.card > .card-body { padding: 1.15rem 1.25rem; }
.card-footer { background: #FBFBF9; border-top: 1px solid var(--dros-border); }

/* Section hero band — the ONE intentional brand surface (today card etc.) */
.dros-hero {
  background: linear-gradient(135deg, #3A46A8 0%, #34419B 55%, #2B3785 100%);
  color: #fff; border: none;
}
.dros-hero .card-body { color: #fff; }

/* KPI icon chip (dashboard tiles) */
.kpi-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; border-radius: 12px;
  background: var(--dros-primary-light); color: var(--dros-primary);
  font-size: 1.15rem;
}

/* ============================================================
   Tables
   ============================================================ */
.table { --bs-table-color: var(--dros-ink); margin-bottom: 0; }
.table thead th {
  font-size: .74rem; font-weight: 800; color: var(--dros-ink-faint);
  background: transparent; border-bottom: 1px solid var(--dros-border-strong);
  padding: .6rem .9rem; white-space: nowrap;
}
.table td, .table th { padding: .65rem .9rem; vertical-align: middle; }
.table > :not(caption) > * > * { border-bottom-color: #F0EDE4; box-shadow: none; }
.table tbody tr:last-child td { border-bottom: 0; }
.table-hover > tbody > tr:hover > * { background-color: var(--dros-hover); }
.table-striped > tbody > tr:nth-of-type(odd) > * { --bs-table-accent-bg: #FBFAF5; }
/* Semantic row tints — softened onto the paper palette (BS defaults are loud) */
.table-success { --bs-table-bg: #EFF6F1; --bs-table-striped-bg: #E9F2EC; --bs-table-hover-bg: #E4EEE8; --bs-table-color: var(--dros-ink); --bs-table-border-color: #DFEAE3; }
.table-warning { --bs-table-bg: #FAF3E2; --bs-table-striped-bg: #F6EED8; --bs-table-hover-bg: #F2E8CE; --bs-table-color: var(--dros-ink); --bs-table-border-color: #EFE3C6; }
.table-danger  { --bs-table-bg: #FAEDEF; --bs-table-striped-bg: #F6E5E8; --bs-table-hover-bg: #F2DEE1; --bs-table-color: var(--dros-ink); --bs-table-border-color: #EFD9DD; }
.table-info    { --bs-table-bg: #EEF0FA; --bs-table-striped-bg: #E8EBF7; --bs-table-hover-bg: #E2E6F4; --bs-table-color: var(--dros-ink); --bs-table-border-color: #DDE1F1; }
.table-light   { --bs-table-bg: #F7F5EE; --bs-table-color: var(--dros-ink); }
.table-dense th, .table-dense td { padding: .55rem .75rem; font-size: .88rem; vertical-align: middle; }
.table-dense thead th { font-size: .72rem; }
/* Flush tables inside cards: align cell gutters with the card padding + round the bottom */
.card .table-responsive { border-radius: 0 0 20px 20px; }
.card .table thead th:first-child, .card .table td:first-child { padding-inline-start: 1.25rem; }
.card .table thead th:last-child, .card .table td:last-child { padding-inline-end: 1.25rem; }

/* ============================================================
   Badges — soft tinted pills (color = meaning)
   ============================================================ */
.badge { border-radius: 999px; font-weight: 700; padding: .38em .8em; }
.badge.text-bg-primary   { background-color: var(--dros-info-bg) !important;    color: var(--dros-info-text) !important; }
.badge.text-bg-success   { background-color: var(--dros-success-bg) !important; color: var(--dros-success-text) !important; }
.badge.text-bg-danger    { background-color: var(--dros-danger-bg) !important;  color: var(--dros-danger-text) !important; }
.badge.text-bg-warning   { background-color: var(--dros-warning-bg) !important; color: var(--dros-warning-text) !important; }
.badge.text-bg-info      { background-color: var(--dros-info-bg) !important;    color: var(--dros-info-text) !important; }
.badge.text-bg-secondary { background-color: #EFECE3 !important;                color: #4B5261 !important; }
/* Counter badges that must stay loud (bell, sidebar counts) opt back in */
.nav-link > .badge.text-bg-danger, .nav-badge { background-color: var(--dros-danger) !important; color: #fff !important; }

.badge-status { font-weight: 700; padding: .35em .8em; border-radius: 999px; font-size: .78rem; }
.badge-status.st-green  { background: var(--dros-success-bg); color: var(--dros-success-text); }
.badge-status.st-amber  { background: var(--dros-warning-bg); color: var(--dros-warning-text); }
.badge-status.st-red    { background: var(--dros-danger-bg);  color: var(--dros-danger-text); }
.badge-status.st-indigo { background: var(--dros-info-bg);    color: var(--dros-info-text); }
.badge-status.st-gray   { background: #F1F0EC; color: #4B5261; }

.badge-method { font-weight: 700; padding: .3em .7em; border-radius: 999px; font-size: .74rem; border: 1px solid transparent; white-space: nowrap; }
.badge-method.m-card   { background: var(--dros-info-bg);    color: var(--dros-info-text);    border-color: #D9DDF2; }
.badge-method.m-phone  { background: var(--dros-warning-bg); color: var(--dros-warning-text); border-color: #EFE0BC; }
.badge-method.m-manual { background: #F1F0EC; color: #4B5261; border-color: #E5E4DD; }

/* Phone-permitted counter chip */
.chip-phone {
  display: inline-flex; align-items: center; gap: .3em;
  font-size: .72rem; font-weight: 700; padding: .2em .55em; border-radius: 999px;
  background: var(--dros-info-bg); color: var(--dros-info-text);
}
.chip-phone.chip-warn { background: var(--dros-warning-bg); color: var(--dros-warning-text); }

/* ============================================================
   Alerts / modals / dropdowns / toasts
   ============================================================ */
.alert { border-radius: var(--dros-radius-sm); border-width: 0; border-inline-start: 4px solid transparent; }
.alert-success { border-inline-start-color: var(--dros-success); }
.alert-danger  { border-inline-start-color: var(--dros-danger); }
.alert-warning { border-inline-start-color: var(--dros-warning); }
.alert-info    { border-inline-start-color: var(--dros-primary); }

.modal-content { border: 1px solid var(--dros-border); border-radius: 22px; box-shadow: 0 40px 90px -30px rgba(26, 33, 64, .45); }
.modal-header { border-bottom: 1px solid var(--dros-border); padding: 1.1rem 1.4rem; }
.modal-title { font-weight: 900; color: var(--dros-ink); }
.modal-body { padding: 1.25rem 1.4rem; }
.modal-footer { border-top: 1px solid var(--dros-border); padding: .9rem 1.4rem; }
.modal-backdrop { --bs-backdrop-bg: #10142E; --bs-backdrop-opacity: .55; }

.dropdown-menu { border: 1px solid var(--dros-border); border-radius: 14px; box-shadow: var(--dros-shadow-lg); padding: .4rem; }
.dropdown-item { font-weight: 600; font-size: .9rem; border-radius: 9px; padding: .5rem .8rem; }
.dropdown-item:hover { background: var(--dros-hover); }
.dropdown-item.active, .dropdown-item:active { background-color: var(--dros-primary); }
.dropdown-divider { border-color: var(--dros-border); }

.toast { border: 1px solid var(--dros-border); border-radius: 14px; box-shadow: 0 16px 40px -18px rgba(26, 33, 64, .3); }

/* ============================================================
   Lists / pagination / progress / tabs / accordion
   ============================================================ */
.list-group { --bs-list-group-border-color: var(--dros-border); border-radius: 14px; }
.list-group-item { padding: .85rem 1.15rem; color: var(--dros-ink); }
.list-group-item-action { font-weight: 600; }
.list-group-item-action:hover { background-color: var(--dros-hover); }
.list-group-item.active { background-color: var(--dros-primary); border-color: var(--dros-primary); }
.list-group-flush .list-group-item { border-color: #F0EDE4; }
.card > .list-group:last-child { border-bottom-left-radius: 20px; border-bottom-right-radius: 20px; }
.card > .list-group:first-child { border-top-left-radius: 20px; border-top-right-radius: 20px; }

.pagination { gap: .3rem; }
.page-link {
  border: none; border-radius: 10px !important; font-weight: 700;
  color: var(--dros-ink-soft); background: transparent; padding: .45rem .85rem;
}
.page-link:hover { background: #fff; color: var(--dros-primary); box-shadow: 0 1px 3px rgba(26, 33, 64, .1); }
.page-item.active .page-link {
  background-color: var(--dros-primary); border-color: var(--dros-primary); color: #fff;
  box-shadow: 0 8px 18px -10px rgba(52, 65, 155, .55);
}
.page-item.disabled .page-link { background: transparent; color: #C4BFAF; }

.progress { height: 8px; border-radius: 999px; background-color: #EDE9DD; }
.progress-bar { border-radius: 999px; background-color: #34419B; }
.progress .bg-success { background-color: #1F9366 !important; }
.progress .bg-warning { background-color: #B27C10 !important; }
.progress .bg-danger  { background-color: #CB3A4C !important; }
.progress .bg-info    { background-color: #4A57B5 !important; }

.nav-pills .nav-link { color: var(--dros-ink-soft); font-weight: 700; border-radius: var(--dros-radius-sm); }
.nav-pills .nav-link.active { background-color: #34419B; }
.nav-tabs { border-bottom-color: var(--dros-border); }
.nav-tabs .nav-link { font-weight: 700; color: var(--dros-ink-soft); border: none; border-bottom: 2px solid transparent; }
.nav-tabs .nav-link.active { color: var(--dros-primary); border-bottom-color: var(--dros-primary); background: transparent; }

.accordion { --bs-accordion-border-color: var(--dros-border); --bs-accordion-btn-focus-box-shadow: 0 0 0 .18rem rgba(52,65,155,.12); border-radius: 14px; }
.accordion-item:first-of-type { border-top-left-radius: 14px; border-top-right-radius: 14px; }
.accordion-item:last-of-type { border-bottom-left-radius: 14px; border-bottom-right-radius: 14px; }
.accordion-button { font-weight: 800; color: var(--dros-ink); }
.accordion-button:not(.collapsed) { background: var(--dros-primary-light); color: var(--dros-primary-dark); }

.tooltip { --bs-tooltip-bg: #1A2140; --bs-tooltip-border-radius: 8px; font-family: 'Cairo', Tahoma, sans-serif; }
.popover { --bs-popover-border-color: var(--dros-border); --bs-popover-border-radius: 14px; font-family: 'Cairo', Tahoma, sans-serif; }

/* ============================================================
   Flatpickr datepicker
   ============================================================ */
.flatpickr-calendar { font-family: 'Cairo', Tahoma, sans-serif; border-radius: 16px; border: 1px solid var(--dros-border); box-shadow: 0 24px 60px -24px rgba(26, 33, 64, .35); }
.flatpickr-day.selected, .flatpickr-day.selected:hover,
.flatpickr-day.startRange, .flatpickr-day.endRange {
  background: var(--dros-primary); border-color: var(--dros-primary);
}
.flatpickr-day.today { border-color: var(--dros-gold); }
.flatpickr-day:hover { background: var(--dros-hover); border-color: var(--dros-hover); }
.flatpickr-months .flatpickr-month, .flatpickr-current-month { font-weight: 800; }

/* ============================================================
   Scan page
   ============================================================ */
.scan-input {
  font-size: 1.6rem; text-align: center; letter-spacing: .1em; font-weight: 700;
  border-width: 2px;
}
.scan-flash {
  border-radius: 1rem; padding: 1.6rem; text-align: center; transition: background .15s ease;
  min-height: 148px; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: .35rem;
}
.scan-flash.flash-idle { background: var(--bs-tertiary-bg, #F1F0EC); color: var(--bs-secondary-color, #6B7280); }
.scan-flash.flash-ok { background: var(--dros-success); color: #fff; animation: pop .25s ease; }
.scan-flash.flash-err { background: var(--dros-danger); color: #fff; animation: shake .3s ease; }
.scan-flash .scan-name { font-size: 1.7rem; font-weight: 700; }
.scan-flash .scan-sub { font-size: 1rem; opacity: .9; }
.scan-avatar {
  width: 56px; height: 56px; border-radius: 50%; background: rgba(255,255,255,.25);
  display: flex; align-items: center; justify-content: center; font-size: 1.6rem; font-weight: 700;
}
@keyframes pop { 0% { transform: scale(.97); } 60% { transform: scale(1.01); } 100% { transform: scale(1); } }
@keyframes shake { 0%,100% { transform: translateX(0); } 25% { transform: translateX(6px); } 75% { transform: translateX(-6px); } }

/* ============================================================
   Empty states / misc app pieces
   ============================================================ */
.empty-state { text-align: center; padding: 3rem 1rem; color: var(--bs-secondary-color, #6B7280); }
.empty-state .bi { font-size: 2.6rem; color: var(--dros-success); display: block; margin-bottom: .6rem; }
.empty-state.es-neutral .bi { color: #B9B4A6; }
.empty-state p { margin: 0; font-size: .95rem; }

/* Segmented control (method chooser / tabs) */
.seg-control { display: inline-flex; background: #F1F0EC; border-radius: .7rem; padding: .25rem; gap: .25rem; }
.seg-control .seg-btn {
  border: none; background: transparent; color: var(--dros-ink-soft);
  font-weight: 700; font-size: .9rem; padding: .5rem .95rem; border-radius: .5rem; cursor: pointer;
  display: inline-flex; align-items: center; gap: .4rem;
}
.seg-control .seg-btn.active { background: #fff; color: var(--dros-primary); box-shadow: 0 1px 3px rgba(26,33,64,.12); }
@media (max-width: 575.98px) {
  .seg-control { display: flex; width: 100%; }
  .seg-control .seg-btn { flex: 1 1 0; justify-content: center; padding: .5rem .4rem; font-size: .82rem; }
}

/* Numbered step badge */
.step-badge {
  display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px; border-radius: 50%;
  background: var(--dros-primary); color: #fff; font-weight: 800; font-size: .9rem;
  flex: 0 0 auto;
}

/* Geolocation sampler */
.geo-meter { font-variant-numeric: tabular-nums; }
.range-label { font-weight: 700; color: var(--dros-primary-dark); font-variant-numeric: tabular-nums; }

/* Inline correction forms inside button groups */
.btn-group form { display: contents; }
.filter-chips .btn { border-radius: 999px; }

/* ============================================================
   Login page — minimal light, gold top rule
   ============================================================ */
.login-page-dros {
  min-height: 100vh; display: flex; align-items: center; justify-content: center;
  background: var(--dros-canvas);
  padding: 1.25rem;
  font-family: 'Cairo', Tahoma, sans-serif;
}
.login-card { width: 100%; max-width: 400px; }
.login-logo { font-size: 1.5rem; font-weight: 800; color: var(--dros-ink); }
.login-card .card { border: 1px solid var(--dros-border); border-radius: 22px; border-top: 3px solid var(--dros-gold); box-shadow: 0 24px 60px -30px rgba(26, 33, 64, .35); }

/* ============================================================
   Command center (dashboard) — today card · attention queue · pulse
   ============================================================ */
.today-card { overflow: hidden; }
.today-crown {
  background: linear-gradient(135deg, #3A46A8 0%, #34419B 55%, #2B3785 100%);
  color: #fff;
  padding: 1.2rem 1.35rem 1.15rem;
}
.today-date { font-size: .82rem; opacity: .75; margin-bottom: .15rem; }
.today-count { margin: 0; font-weight: 900; font-size: 1.45rem; }
.today-next {
  background: rgba(255, 255, 255, .14);
  border: 1px solid rgba(255, 255, 255, .18);
  border-radius: 14px;
  padding: .55rem .95rem;
  display: flex; flex-direction: column; gap: .1rem;
  min-width: 170px;
}
.today-next-label { font-size: .72rem; opacity: .75; font-weight: 700; }
.today-next strong { font-weight: 800; font-size: .95rem; }
.today-next-time { font-size: .85rem; font-weight: 700; color: #F5C542; font-variant-numeric: tabular-nums; }
.today-next.is-done { flex-direction: row; align-items: center; gap: .45rem; font-size: .88rem; font-weight: 700; }
.today-progress { height: 10px; background: rgba(255, 255, 255, .22); }
.today-progress .progress-bar { background: #fff; }

.today-list { padding: .35rem 0; }
.today-row {
  display: flex; align-items: center; gap: .8rem;
  padding: .65rem 1.35rem;
  border-bottom: 1px solid #F0EDE4;
}
.today-row:last-child { border-bottom: 0; }
.today-time {
  flex: 0 0 auto;
  background: var(--dros-primary-light); color: var(--dros-primary-dark);
  font-weight: 800; font-size: .8rem; font-variant-numeric: tabular-nums;
  border-radius: 999px; padding: .28rem .8rem; white-space: nowrap;
}
.today-course {
  flex: 1 1 auto; min-width: 0;
  font-weight: 800; color: var(--dros-ink); text-decoration: none;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.today-course:hover { color: var(--dros-primary); }
.today-att { flex: 0 0 auto; display: flex; align-items: center; gap: .5rem; width: 150px; }
.today-att .progress { flex: 1 1 auto; height: 7px; }
.today-att small { color: var(--dros-ink-soft); font-weight: 700; font-variant-numeric: tabular-nums; }
@media (max-width: 575.98px) {
  /* Course name takes its own full line; time/status/action wrap beneath it */
  .today-row { flex-wrap: wrap; gap: .5rem .6rem; padding-block: .8rem; }
  .today-course { flex: 1 1 100%; order: -1; white-space: normal; }
}

/* Attention queue — apricot appears ONLY here (its reserved meaning) */
.attn-row {
  display: flex; align-items: center; gap: .6rem;
  padding: .55rem .7rem; border-radius: 12px;
  border: 1px solid var(--dros-border);
  text-decoration: none;
  transition: background-color .12s ease, border-color .12s ease;
}
.attn-row:hover { background: #FBF4EA; border-color: #F0DDC2; }
.attn-icon {
  flex: 0 0 auto; width: 34px; height: 34px; border-radius: 9px;
  display: inline-flex; align-items: center; justify-content: center;
  background: #FBEAD6; color: #E7913A; font-size: 1rem;
}
.attn-label { flex: 1 1 auto; min-width: 0; color: var(--dros-ink); font-weight: 700; font-size: .88rem; }
.attn-count { flex: 0 0 auto; font-weight: 800; color: #C2761F; min-width: 1.5rem; text-align: center; font-variant-numeric: tabular-nums; }
.attn-go { flex: 0 0 auto; color: var(--dros-ink-faint); font-size: .8rem; }

/* Student profile — identity hero */
.profile-avatar {
  flex: 0 0 auto;
  width: 64px; height: 64px; border-radius: 20px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--dros-primary-light); color: var(--dros-primary);
  font-weight: 900; font-size: 1.7rem;
}
.profile-name { font-weight: 900; font-size: 1.25rem; color: var(--dros-ink); }
.profile-meta { display: flex; align-items: center; gap: .45rem; flex-wrap: wrap; margin-top: .45rem; }
.pmeta {
  display: inline-flex; align-items: center; gap: .35rem;
  background: #FBFBF8; border: 1px solid var(--dros-border); border-radius: 999px;
  padding: .22rem .75rem; font-size: .8rem; font-weight: 700; color: var(--dros-ink-soft);
}
.pmeta .bi { color: var(--dros-ink-faint); }
.pmeta code { color: var(--dros-primary-dark); font-weight: 700; }
.profile-stats {
  flex: 0 0 auto; display: flex; align-items: stretch;
  border: 1px solid var(--dros-border); border-radius: 16px; overflow: hidden;
  background: #FBFBF8;
}
.pstat {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .1rem;
  padding: .6rem 1.1rem;
  border-inline-start: 1px solid var(--dros-border);
  min-width: 74px;
}
.pstat:first-child { border-inline-start: 0; }
.pstat strong { font-weight: 900; font-size: 1.25rem; line-height: 1.1; color: var(--dros-ink); font-variant-numeric: tabular-nums; }
.pstat small { font-size: .72rem; font-weight: 700; color: var(--dros-ink-faint); }
@media (max-width: 767.98px) { .profile-stats { width: 100%; } .pstat { flex: 1 1 0; } }
body[data-mode="revise"] .profile-avatar { background: #E4E7F6; color: #232C6B; }

/* Pulse — one instrument panel */
.pulse-kicker {
  color: var(--dros-gold); font-size: .7rem; font-weight: 800;
  letter-spacing: .05em; padding: .95rem 1.35rem 0;
}
.pulse-grid { display: grid; grid-template-columns: repeat(6, 1fr); }
.pulse-cell {
  display: flex; flex-direction: column; align-items: flex-start; gap: .45rem;
  padding: 1rem 1.35rem 1.15rem;
  text-decoration: none;
  border-inline-start: 1px solid #F0EDE4;
  transition: background-color .12s ease;
}
.pulse-cell:first-child { border-inline-start: 0; }
.pulse-cell:hover { background: var(--dros-hover); }
.pulse-value { font-weight: 900; font-size: 1.55rem; line-height: 1; color: var(--dros-ink); font-variant-numeric: tabular-nums; white-space: nowrap; }
.pulse-label { font-size: .78rem; font-weight: 700; color: var(--dros-ink-soft); }
.pulse-cell.is-crit .pulse-value { color: var(--dros-danger); }
.pulse-cell.is-crit .kpi-icon { background: var(--dros-danger-bg); color: var(--dros-danger); }
@media (max-width: 1199.98px) {
  .pulse-grid { grid-template-columns: repeat(3, 1fr); }
  .pulse-cell:nth-child(4) { border-inline-start: 0; }
  .pulse-cell:nth-child(n+4) { border-top: 1px solid #F0EDE4; }
}
@media (max-width: 575.98px) {
  .pulse-grid { grid-template-columns: repeat(2, 1fr); }
  .pulse-cell { border-inline-start: 0; padding: .9rem 1.1rem; }
  .pulse-cell:nth-child(even) { border-inline-start: 1px solid #F0EDE4; }
  .pulse-cell:nth-child(n+3) { border-top: 1px solid #F0EDE4; }
  .pulse-cell:nth-child(4) { border-inline-start: 1px solid #F0EDE4; }
}

/* ===================================================================
   Revise section (Revise spec §2) — DARK-INDIGO accent, scoped to .revise-theme.
   Surfaces stay light and calm; only accents change (founder decision:
   never colored walls, never violet).
   =================================================================== */
:root {
  --revise-primary: #232C6B;        /* deep indigo — darker than the app primary */
  --revise-primary-dark: #1A2147;
  --revise-primary-darker: #141833;
  --revise-accent: #E7913A;
  --revise-light: #E4E7F6;
}
.revise-theme {
  --dros-primary: var(--revise-primary);
  --dros-primary-light: var(--revise-light);
  --bs-primary: var(--revise-primary);
  --bs-primary-rgb: 35, 44, 107;
  --bs-link-color: var(--revise-primary);
}
.revise-theme .btn-primary { --bs-btn-bg: var(--revise-primary); --bs-btn-border-color: var(--revise-primary); --bs-btn-hover-bg: var(--revise-primary-dark); --bs-btn-hover-border-color: var(--revise-primary-dark); --bs-btn-active-bg: var(--revise-primary-darker); --bs-btn-active-border-color: var(--revise-primary-darker); }
.revise-theme .btn-outline-primary { --bs-btn-color: var(--revise-primary); --bs-btn-border-color: #B9C0E4; --bs-btn-hover-bg: var(--revise-light); --bs-btn-hover-border-color: var(--revise-primary); --bs-btn-hover-color: var(--revise-primary-dark); --bs-btn-active-bg: var(--revise-primary); --bs-btn-active-border-color: var(--revise-primary); --bs-btn-active-color: #fff; }
.revise-theme .text-primary { color: var(--revise-primary) !important; }
.revise-theme .badge.bg-primary { background: var(--revise-primary) !important; }
.revise-theme .form-check-input:checked { background-color: var(--revise-primary); border-color: var(--revise-primary); }
/* Bold-but-flat banner — the unmistakable "you are in Revise" cue */
.revise-banner {
  background: #EEF0FA;
  border: 1px solid #D5DAF0;
  border-inline-start: 4px solid var(--revise-primary);
  color: var(--revise-primary-darker);
  border-radius: var(--dros-radius); padding: .9rem 1.15rem; margin-bottom: 1.25rem;
  display: flex; align-items: center; gap: .75rem;
}
.revise-banner .bi { font-size: 1.5rem; color: var(--revise-primary); }
.revise-banner h4 { margin: 0; font-weight: 800; font-size: 1.05rem; }
.revise-mode-badge { display: inline-block; padding: .15rem .6rem; border-radius: 999px; font-size: .8rem; font-weight: 700; }
.revise-mode-free { background: #DCFCE7; color: #166534; }
.revise-mode-bucket { background: #E0E7FF; color: #3730A3; }
.revise-mode-spread { background: #FEF3C7; color: #1A2147; }

/* Revise Mode — topbar chrome (§3). Lives OUTSIDE .revise-theme. */
.revise-quick { background: var(--revise-primary, #232C6B); border-color: var(--revise-primary, #232C6B); color: #fff; }
.revise-quick:hover { background: var(--revise-primary-dark, #1A2147); border-color: var(--revise-primary-dark, #1A2147); color: #fff; }
.revise-on-pill { background: var(--revise-primary, #232C6B); color: #fff; font-weight: 700; }

/* ===================================================================
   DASHBOARD-WIDE Revise Mode (spec §1): <body data-mode="revise"> swaps
   the ACCENT to dark indigo via the cascade. Surfaces/canvas stay light —
   the banner + deep-indigo accents are the cue, not colored walls.
   =================================================================== */
body[data-mode="revise"] {
  --dros-primary: #232C6B;
  --dros-primary-dark: #1A2147;
  --dros-primary-darker: #141833;
  --dros-primary-light: #E4E7F6;
  --bs-primary: #232C6B;
  --bs-primary-rgb: 35, 44, 107;
  --bs-link-color: #232C6B;
}
body[data-mode="revise"] .btn-primary { --bs-btn-bg: #232C6B; --bs-btn-border-color: #232C6B; --bs-btn-hover-bg: #1A2147; --bs-btn-hover-border-color: #1A2147; --bs-btn-active-bg: #141833; --bs-btn-active-border-color: #141833; }
body[data-mode="revise"] .btn-outline-primary { --bs-btn-color: #232C6B; --bs-btn-border-color: #B9C0E4; --bs-btn-hover-bg: #E4E7F6; --bs-btn-hover-border-color: #232C6B; --bs-btn-hover-color: #1A2147; --bs-btn-active-bg: #232C6B; --bs-btn-active-border-color: #232C6B; --bs-btn-active-color: #fff; }
body[data-mode="revise"] .text-bg-primary { background-color: #232C6B !important; }
body[data-mode="revise"] .badge.text-bg-primary { background-color: #E4E7F6 !important; color: #1A2147 !important; }
body[data-mode="revise"] .bg-primary { background-color: #232C6B !important; }
body[data-mode="revise"] .text-primary { color: #232C6B !important; }
body[data-mode="revise"] .form-check-input:checked { background-color: #232C6B; border-color: #232C6B; }
body[data-mode="revise"] .nav-pills .nav-link.active { background-color: #232C6B; }
body[data-mode="revise"] .page-link { color: #232C6B; }
body[data-mode="revise"] .page-item.active .page-link { background-color: #232C6B; border-color: #232C6B; box-shadow: 0 8px 18px -10px rgba(26, 33, 64, .6); }
body[data-mode="revise"] .progress-bar { background-color: #232C6B; }
body[data-mode="revise"] .dros-hero { background: linear-gradient(135deg, #2A3480 0%, #232C6B 55%, #1A2147 100%); }
body[data-mode="revise"] .today-crown { background: linear-gradient(135deg, #2A3480 0%, #232C6B 55%, #1A2147 100%); }
body[data-mode="revise"] .today-time { background: #E4E7F6; color: #1A2147; }
body[data-mode="revise"] .side .sidebar-menu .nav-link.active { background: #232C6B; color: #fff; box-shadow: 0 8px 18px -10px rgba(26, 33, 64, .6); }
body[data-mode="revise"] .side .sidebar-menu .nav-link.active .nav-icon { color: #fff; }
body[data-mode="revise"] .side .sidebar-menu .nav-link.active .nav-badge { background: rgba(255,255,255,.25) !important; color: #fff !important; }
body[data-mode="revise"] .side-avatar { background: #E4E7F6; color: #232C6B; }
body[data-mode="revise"] .kpi-icon { background: #E4E7F6; color: #232C6B; }
body[data-mode="revise"] .list-group-item.active { background-color: #232C6B; border-color: #232C6B; }
body[data-mode="revise"] .accordion-button:not(.collapsed) { background: #E4E7F6; color: #1A2147; }
body[data-mode="revise"] .flatpickr-day.selected { background: #232C6B; border-color: #232C6B; }
body[data-mode="revise"] .form-control:focus,
body[data-mode="revise"] .form-select:focus { border-color: #B9C0E4; box-shadow: 0 0 0 .18rem rgba(35, 44, 107, .12); }

/* ── Card-order queue (admin) ────────────────────────────────────────────────
   The queue is shaped around the founder's decision rather than the data model:
   a counts strip that separates "waiting on me" from "waiting on someone else",
   headed groups for the two fulfilment shapes, and a stage bar so a vendor job's
   progress reads at a glance instead of as a raw status word. */
.co-stat {
  display: flex; flex-direction: column; gap: .15rem;
  padding: .8rem .9rem; height: 100%;
  background: var(--dros-surface);
  border: 1px solid var(--dros-border);
  border-radius: var(--dros-radius);
  box-shadow: var(--dros-shadow);
  text-decoration: none; color: inherit;
  transition: border-color .15s ease, box-shadow .15s ease;
}
a.co-stat:hover { border-color: var(--dros-border-strong); box-shadow: var(--dros-shadow-lg); color: inherit; }
.co-stat-n { font-weight: 800; font-size: 1.6rem; line-height: 1.1; font-variant-numeric: tabular-nums; color: var(--dros-ink); }
.co-stat-l { font-size: .8rem; font-weight: 700; color: var(--dros-ink-soft); }
/* Only the buckets that actually need the founder get colour. */
.co-stat.is-hot { border-color: #F0DDC2; background: var(--dros-accent-light); }
.co-stat.is-hot .co-stat-n { color: var(--dros-accent-dark); }
.co-stat.is-warn { border-color: #EBD9AE; background: var(--dros-warning-bg); }
.co-stat.is-warn .co-stat-n { color: var(--dros-warning-text); }

.co-group-head {
  padding: .65rem .95rem;
  background: var(--dros-canvas);
  border-block: 1px solid var(--dros-border);
  font-weight: 800; font-size: .88rem; color: var(--dros-ink);
}
.co-group-head .text-secondary { font-size: .82rem; }
.co-teacher-head {
  padding: .5rem .95rem;
  background: var(--dros-hover);
  border-bottom: 1px solid var(--dros-border);
  font-size: .86rem;
}

.co-row + .co-row { border-top: 1px solid var(--dros-border); }

/* Five steps: assigned → acknowledged → printed → shipped → delivered. */
.co-stage { display: flex; gap: 3px; }
.co-step {
  width: 1.5rem; height: 5px; border-radius: 3px;
  background: var(--dros-border);
}
.co-step.is-done { background: var(--dros-success); }