/* ── Design Tokens (mirrors React theme) ──────────────────── */
:root {
  --primary:        #5c0a0a;
  --maroon:         #5c0a0a;
  --primary-dark:   #3d0505;
  --primary-light:  #7f1d1d;
  --primary-deeper: #4a0808;
  --accent:        #c2410c;
  --pink:           #9d174d;
  --bg:             #faf5f4;
  --card:           #ffffff;
  --border:         #e5e7eb;
  --muted:          #6b7280;
  --text:           #111827;
  --text-secondary: #374151;
  --surface-hover:  #f9fafb;
  --input-bg:       #ffffff;
  --input-border:   #d1d5db;
  --sidebar-w:      260px;
  --sidebar-bg:     linear-gradient(180deg, #6e1020 0%, #560c18 45%, #3d0811 100%);
  --topbar-h:       60px;
  --radius:         0.75rem;
  /* status colors */
  --s-present-bg:   #ffe0e0; --s-present-tx: #560000; --s-present-bd: #ffc7c7;
  --s-late-bg:      #ff9999; --s-late-tx:    #2b0000; --s-late-bd:    #ff6b6b;
  --s-absent-bg:    #2b0000; --s-absent-tx:  #ffffff; --s-absent-bd:  #400000;
  --s-leave-bg:     #e0e7ff; --s-leave-tx:   #3730a3; --s-leave-bd:   #a5b4fc;
  --s-break-bg:     #fef3c7; --s-break-tx:   #92400e; --s-break-bd:   #fcd34d;
  /* chart palette — read by the chartColor() helpers in footer.php */
  --chart-rgb:      92, 10, 10;
  /* Selected / active / hovered row highlight — theme-aware so text on it
     stays readable in dark mode (never hardcode a light pink for these). */
  --highlight-bg:   #fff0f0;
  --highlight-tx:   var(--primary);
  --chart-2:        #9b3b3b;
  --chart-soft:     #e3b6bd; /* paired lighter series (e.g. Female beside Male) */
}

/* ── Dark mode (toggled via data-bs-theme on <html>, same attribute
   Bootstrap 5.3's own color modes use — so Bootstrap's built-in dark
   styling for modals/dropdowns/forms applies automatically too) ───── */
[data-bs-theme="dark"] {
  --bg:             #0b0b0d;
  --card:           #131316;
  --border:         #26262c;
  --muted:          #8d8d98;
  --text:           #ececf0;
  --text-secondary: #c4c4cc;
  --surface-hover:  #1b1b20;
  --input-bg:       #101013;
  --input-border:   #2f2f37;
  --sidebar-bg:     #0d0d10;
  --primary:        #800000;
  --maroon:         #800000;
  --primary-dark:   #560000;
  --primary-light:  #a52a2a;
  --primary-deeper: #6b0000;
  --dark-glow:     rgba(220, 38, 38, .38);
  /* soft gold graphs on dark surfaces */
  --chart-rgb:      212, 178, 106;
  --highlight-bg:   rgba(165, 42, 42, .28);
  --highlight-tx:   #f2a7a7;
  --chart-2:        #ecd9a8;
  --chart-soft:     #7d6a45;
}

[data-bs-theme="dark"] body {
  color-scheme: dark;
}

/* Near-black surfaces with red accents: glowing red-outlined banner, a
   red-tinted active nav pill, and subtle bordered cards. */
[data-bs-theme="dark"] #sidebar { border-right: 1px solid var(--border); }
[data-bs-theme="dark"] #sidebar::after { opacity: .08; }
[data-bs-theme="dark"] .nav-link:hover { background: rgba(255,255,255,.06); }
[data-bs-theme="dark"] .nav-link.active {
  background: linear-gradient(90deg, rgba(128,0,0,.55), rgba(90,10,10,.55));
  box-shadow: 0 0 14px rgba(128,0,0,.25);
}
[data-bs-theme="dark"] .page-header {
  background: linear-gradient(135deg, #1a0a0b 0%, #110809 100%);
  border: 2px solid #800000;
  box-shadow: 0 0 22px var(--dark-glow), inset 0 0 30px rgba(128,0,0,.12);
}
[data-bs-theme="dark"] .page-header::before { background: rgba(128,0,0,.10); }
[data-bs-theme="dark"] .page-header::after  { background: rgba(128,0,0,.06); }
[data-bs-theme="dark"] .card,
[data-bs-theme="dark"] .stat-tile { box-shadow: none; }
[data-bs-theme="dark"] .stat-tile-icon {
  background: rgba(128,0,0,.16) !important;
  color: #a52a2a !important;
}
[data-bs-theme="dark"] .stat-tile-clickable.active {
  border-color: #800000;
  box-shadow: 0 0 0 1px #800000 inset, 0 0 14px rgba(128,0,0,.22);
}
[data-bs-theme="dark"] .stat-sparkline polyline { stroke: rgb(var(--chart-rgb)); }
[data-bs-theme="dark"] .stat-sparkline polygon,
[data-bs-theme="dark"] .stat-sparkline circle { fill: rgb(var(--chart-rgb)); }
[data-bs-theme="dark"] .stat-delta-up   { background: rgba(16,185,129,.16); color: #34d399; }
[data-bs-theme="dark"] .stat-delta-down { background: rgba(239,68,68,.16);  color: #f87171; }
[data-bs-theme="dark"] .btn-outline-light { background: rgba(255,255,255,.08); border-color: transparent; }
[data-bs-theme="dark"] .maroon-select-display { background: var(--input-bg); }
[data-bs-theme="dark"] .fab-announcement { background: #800000; box-shadow: 0 0 18px rgba(128,0,0,.45); }

/* Bootstrap's bg-white/bg-light/text-dark utilities are hardcoded with
   !important and ignore data-bs-theme, so card headers/footers and
   input-group icon boxes built with them stay stuck white. Override
   them to follow our theme variables instead. */
[data-bs-theme="dark"] .bg-white {
  background-color: var(--card) !important;
}
[data-bs-theme="dark"] .bg-light {
  background-color: var(--surface-hover) !important;
}
[data-bs-theme="dark"] .text-dark {
  color: var(--text) !important;
}

/* ── Reset / Base ─────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  font-family: 'Inter', system-ui, sans-serif;
  color: var(--text);
  font-size: .875rem; /* 14px at the default root size; scales with the Text size setting */
  line-height: 1.5;
  transition: background .2s ease, color .2s ease;
}

/* ── Sidebar ──────────────────────────────────────────────── */
#sidebar {
  width: var(--sidebar-w);
  /* A fixed height (not min-height) is required here: with only a minimum,
     the box grows taller than the viewport once nav content overflows, and
     since #sidebar is position:fixed with no scrollbar of its own, that
     excess just gets clipped by overflow:hidden below instead of scrolling.
     Pinning height to the viewport lets .sidebar-scroll's flex:1 correctly
     fill the remaining space and scroll internally. */
  height: 100vh;
  background: var(--sidebar-bg);
  position: fixed;
  top: 0; left: 0;
  z-index: 1040;
  display: flex;
  flex-direction: column;
  transition: width .25s ease, transform .25s ease;
  overflow: hidden;
}

#sidebar.collapsed { width: 64px; }
#sidebar.collapsed .sidebar-label,
#sidebar.collapsed .sidebar-brand-text,
#sidebar.collapsed .sidebar-section-label,
#sidebar.collapsed .sidebar-user-info { display: none !important; }
#sidebar.collapsed .nav-link { justify-content: center; padding: .6rem 0; }
#sidebar.collapsed .sidebar-brand { justify-content: center; padding: 1rem .5rem; }

/* Faint school-building watermark anchored to the sidebar's lower half, under
   the brand gradient — luminosity blending keeps it a subtle tonal texture
   rather than a competing photo. Real content stacks above it (z-index). */
#sidebar::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 48%;
  background-image: linear-gradient(180deg, #4a0a14 0%, transparent 45%), url('../img/login-bg.jpg');
  background-size: cover;
  background-position: center bottom, 30% bottom;
  opacity: .22;
  mix-blend-mode: luminosity;
  pointer-events: none;
  z-index: 0;
}
#sidebar.collapsed::after { display: none; }

.sidebar-brand, .sidebar-scroll, .sidebar-user {
  position: relative;
  z-index: 1;
}

.sidebar-brand {
  display: flex;
  align-items: center;
  gap: .75rem;
  padding: 1.1rem 1.25rem;
  border-bottom: 1px solid rgba(255,255,255,.12);
  flex-shrink: 0;
  width: 100%;
  background: transparent;
  border-left: 0;
  border-right: 0;
  border-top: 0;
  color: inherit;
  text-align: left;
  cursor: pointer;
}

.sidebar-brand:hover {
  background: rgba(255,255,255,.06);
}

.sidebar-brand-icon {
  width: 44px; height: 44px;
  background: transparent;
  border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  transition: transform .35s cubic-bezier(.34, 1.56, .64, 1);
}

.sidebar-brand:hover .sidebar-brand-icon {
  transform: scale(1.18) rotate(-6deg);
}

.sidebar-brand-icon i,
.sidebar-brand-text h6,
.sidebar-brand-text small {
  color: #fff;
}

.sidebar-brand-icon img {
  width: 40px;
  height: 40px;
  object-fit: contain;
  /* Recolor the logo to solid white so it reads clearly on the maroon
     brand background, regardless of the source PNG's own colors. */
  filter: brightness(0) invert(1);
}

.sidebar-brand-text {
  transition: transform .35s cubic-bezier(.34, 1.56, .64, 1);
  transform-origin: left center;
}

.sidebar-brand:hover .sidebar-brand-text {
  transform: scale(1.07);
}

.sidebar-brand-text h6 {
  font-weight: 800;
  font-size: 1.15rem;
  letter-spacing: .06em;
  margin: 0;
  line-height: 1.2;
  white-space: nowrap;
}

.sidebar-brand-text small {
  display: block;
  max-width: 150px;
  font-size: .5rem;
  font-weight: 600;
  letter-spacing: .07em;
  line-height: 1.35;
  text-transform: uppercase;
  white-space: normal;
  opacity: .75;
  margin-top: .15rem;
}

/* "Better Records. Brighter Futures." above the user card. */
.sidebar-tagline {
  position: relative; z-index: 1;
  padding: .5rem 1.4rem .9rem;
  color: rgba(255,255,255,.75);
  font-size: .8rem; font-style: italic; line-height: 1.35;
  flex-shrink: 0;
}
#sidebar.collapsed .sidebar-tagline { display: none; }

.sidebar-scroll {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  padding: .5rem 0;
  scrollbar-width: thin;
  scrollbar-color: rgba(255,255,255,.2) transparent;
}

/* Section headers */
.sidebar-section {
  margin-top: .25rem;
}

/* Plain section headers — no toggle/collapse, every link is always visible;
   this is just a label grouping the links under it. */
.sidebar-section-label {
  color: rgba(255,255,255,.4);
  font-size: .62rem;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
  padding: .85rem 1.25rem .3rem;
}


/* Nav links */
.nav-link {
  display: flex;
  align-items: center;
  gap: .6rem;
  padding: .55rem 1.1rem;
  margin: 2px 10px;
  border-radius: 999px;
  color: rgba(255,255,255,.72);
  text-decoration: none;
  font-size: .82rem;
  font-weight: 500;
  white-space: nowrap;
  transition: background .2s, color .2s, transform .2s;
}

.nav-link:hover { background: rgba(255,255,255,.14); color: #fff; transform: translateX(2px); }
.nav-link.active { background: rgba(255,255,255,.22); color: #fff; font-weight: 600; box-shadow: 0 2px 8px rgba(0,0,0,.12); }
.nav-link .nav-icon { width: 18px; text-align: center; font-size: .95rem; flex-shrink: 0; }
.sidebar-nav-badge {
  margin-left: auto;
  background: #fff;
  color: var(--maroon);
  font-size: .68rem;
  font-weight: 700;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 999px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
/* Amber variant: reserved for the Announcements badge so it reads as a
   distinct "something new" signal, not confused with the plain white
   to-do-count badges elsewhere in the sidebar. */
.sidebar-nav-badge-amber { background: #fbbf24; color: #7c2d12; }

/* Sidebar user strip */
.sidebar-user {
  margin: 0 .75rem .9rem;
  padding: .7rem .85rem;
  border-radius: 14px;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.08);
  display: flex;
  align-items: center;
  gap: .7rem;
  flex-shrink: 0;
}

.sidebar-user-avatar {
  width: 34px; height: 34px;
  border-radius: 50%;
  background: rgba(255,255,255,.18);
  display: flex; align-items: center; justify-content: center;
  font-size: .75rem; font-weight: 700; color: #fff;
  flex-shrink: 0;
}

.sidebar-user-info { flex: 1; overflow: hidden; }
.sidebar-user-name { color: #fff; font-size: .78rem; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sidebar-user-role { color: rgba(255,255,255,.5); font-size: .67rem; white-space: nowrap; }

.sidebar-collapse-btn {
  background: none; border: none; color: rgba(255,255,255,.5); cursor: pointer; padding: 0;
  display: flex; align-items: center;
}
.sidebar-collapse-btn:hover { color: #fff; }

/* ── Top Bar ──────────────────────────────────────────────── */
#topbar {
  position: fixed;
  top: 0; right: 0;
  left: var(--sidebar-w);
  height: var(--topbar-h);
  background: color-mix(in srgb, var(--card) 88%, transparent);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border);
  z-index: 1030;
  display: flex;
  align-items: center;
  padding: 0 1.25rem;
  gap: .75rem;
  transition: left .25s ease;
}
#topbar.collapsed { left: 64px; }

#sidebar.collapsed ~ #topbar,
body.sidebar-collapsed #topbar { left: 64px; }

/* Top bar quick search */
.topbar-search { position: relative; flex: 1; max-width: 420px; }
.topbar-search > i { position: absolute; left: 1rem; top: 50%; transform: translateY(-50%); color: var(--muted); font-size: .9rem; pointer-events: none; }
.topbar-search input {
  width: 100%; height: 38px; border-radius: 999px;
  border: 1px solid var(--border); background: var(--surface-hover);
  padding: 0 1rem 0 2.5rem; font-size: .82rem; color: var(--text);
  transition: border-color .15s, box-shadow .15s, background .15s;
}
.topbar-search input:focus { outline: none; border-color: var(--primary); background: var(--card); box-shadow: 0 0 0 3px rgba(128,0,0,.1); }
.topbar-search-results {
  display: none; position: absolute; top: calc(100% + 6px); left: 0; right: 0; z-index: 1060;
  background: var(--card); border: 1px solid var(--border); border-radius: 12px;
  box-shadow: 0 12px 32px rgba(0,0,0,.12); padding: .35rem; max-height: 360px; overflow-y: auto;
}
.topbar-search-results.open { display: block; }
.topbar-search-item {
  display: flex; align-items: center; gap: .6rem; padding: .5rem .65rem; border-radius: 8px;
  color: var(--text); text-decoration: none; font-size: .82rem;
}
.topbar-search-item i { color: var(--primary); width: 18px; text-align: center; }
.topbar-search-item span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.topbar-search-item small { color: var(--muted); font-size: .68rem; }
.topbar-search-item.active, .topbar-search-item:hover { background: var(--surface-hover); color: var(--text); }
@media (max-width: 767.98px) { .topbar-search { display: none; } }

/* Notification bell */
.notif-btn {
  position: relative;
  background: none; border: none;
  width: 36px; height: 36px;
  border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; color: var(--muted);
  transition: background .15s, color .15s;
}
.notif-btn:hover { background: var(--surface-hover); color: var(--primary); }

.notif-badge {
  position: absolute;
  top: 3px; right: 3px;
  width: 16px; height: 16px;
  background: var(--primary);
  border-radius: 50%;
  font-size: .6rem; font-weight: 700; color: #fff;
  display: flex; align-items: center; justify-content: center;
  border: 2px solid var(--card);
}

.notif-panel {
  position: absolute;
  top: calc(var(--topbar-h) + 4px); right: 1rem;
  width: 340px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: 0 10px 40px rgba(0,0,0,.15);
  z-index: 2000;
  display: none;
  overflow: hidden;
}
.notif-panel.open { display: block; }
.notif-panel-header { padding: .75rem 1rem; border-bottom: 1px solid var(--border); font-weight: 600; font-size: .82rem; }
.notif-item { padding: .75rem 1rem; border-bottom: 1px solid var(--border); display: flex; gap: .75rem; align-items: flex-start; }
.notif-item:hover { background: var(--surface-hover); }
.notif-item-icon { width: 32px; height: 32px; border-radius: 8px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.notif-item-title { font-size: .78rem; font-weight: 600; color: var(--text); }
.notif-item-sub { font-size: .72rem; color: var(--muted); margin-top: 2px; }
.notif-item.notif-unread { background: rgba(128,0,0,.08); }
.notif-item.notif-unread .notif-item-title { font-weight: 700; }
.notif-dot { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--primary); margin-left: 5px; vertical-align: middle; }

/* ── Task card sections (color-coded labels instead of <hr> dividers) ── */
.task-section + .task-section { margin-top: .35rem; }
.task-kicker { font-size: .65rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; }

/* ── Maroon date picker (replaces native <input type=date>) ── */
.maroon-dp { position: relative; }
.maroon-dp-display { cursor: pointer; background: var(--input-bg); }
.maroon-dp-panel {
  display: none;
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  z-index: 1060;
  width: 260px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: 0 10px 40px rgba(0,0,0,.15);
  padding: .85rem;
}
.maroon-dp.open .maroon-dp-panel { display: block; }
.maroon-dp-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: .6rem; }
.maroon-dp-month-label { font-weight: 700; font-size: .82rem; color: var(--text); }
.maroon-dp-nav {
  border: none; background: var(--bg); color: var(--primary);
  width: 26px; height: 26px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; font-size: .72rem; padding: 0;
}
.maroon-dp-nav:hover:not(:disabled) { background: rgba(128,0,0,.15); }
.maroon-dp-nav:disabled { opacity: .3; cursor: not-allowed; }
.maroon-dp-dow, .maroon-dp-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 2px; text-align: center; }
.maroon-dp-dow span { font-size: .6rem; font-weight: 700; color: var(--muted); padding-bottom: .35rem; }
.maroon-dp-grid button {
  border: none; background: transparent; font-size: .74rem; color: var(--text);
  padding: .4rem 0; border-radius: 6px; cursor: pointer;
}
.maroon-dp-grid button:hover:not(:disabled) { background: rgba(128,0,0,.15); color: var(--primary); }
.maroon-dp-grid button.is-today { color: var(--primary); font-weight: 700; }
.maroon-dp-grid button.is-selected { background: var(--primary); color: #fff; font-weight: 700; }
.maroon-dp-grid button:disabled { color: var(--muted); cursor: not-allowed; }
.maroon-dp-grid span.is-empty { visibility: hidden; }

/* ── Maroon select (replaces native <select> — rounded pill box and a
   maroon-highlighted dropdown panel, matching the header's Bootstrap
   dropdown look instead of the browser's native gray/blue popup). The real
   <select> stays in the DOM, invisibly overlaid on the display button, so
   name/value/required/onchange keep working exactly as before — this is a
   purely visual swap, not a new form control. ── */
.maroon-select { position: relative; display: inline-block; }
.maroon-select-native {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  opacity: 0;
  pointer-events: none;
}
.maroon-select-display {
  display: flex; align-items: center; justify-content: space-between; gap: .6rem;
  width: 100%;
  cursor: pointer; background: var(--input-bg); color: var(--text);
  font-size: .82rem;
  border: 1px solid rgba(128,0,0,.35);
  border-radius: 999px;
  padding: .45rem 1rem;
  white-space: nowrap;
  transition: border-color .15s, box-shadow .15s;
}
.maroon-select-display:hover { border-color: var(--primary); }
.maroon-select-native:disabled ~ .maroon-select-display { opacity: .55; cursor: not-allowed; }
.maroon-select.open .maroon-select-display,
.maroon-select-native:focus ~ .maroon-select-display {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(128,0,0,.1);
}
.maroon-select-caret {
  width: 7px; height: 7px;
  border-right: 2px solid var(--primary);
  border-bottom: 2px solid var(--primary);
  transform: rotate(45deg);
  margin-top: -4px;
  flex-shrink: 0;
  transition: transform .15s;
}
.maroon-select.open .maroon-select-caret { transform: rotate(225deg); margin-top: 3px; }

/* Detached to <body> and positioned in JS via getBoundingClientRect() (see
   initMaroonSelect) rather than living inside .maroon-select — an ancestor
   with an active CSS transform (e.g. a hovered .kpi-card, which creates its
   own stacking context) would otherwise trap this panel's z-index and let
   clicks fall through to whatever's underneath it, even though it's still
   visible. position:fixed matches getBoundingClientRect()'s viewport-relative
   coordinates without needing to account for page scroll. */
.maroon-select-panel {
  display: none;
  position: fixed;
  z-index: 1060;
  max-height: 260px;
  overflow-y: auto;
  background: var(--card);
  border: 1px solid rgba(128,0,0,.15);
  border-radius: 10px;
  box-shadow: 0 10px 30px rgba(128,0,0,.15);
  padding: .4rem;
}
.maroon-select-option {
  display: block; width: 100%; text-align: left;
  border: none; background: transparent; color: var(--text);
  font-size: .82rem; padding: .5rem .75rem;
  border-radius: 6px; cursor: pointer; white-space: nowrap;
}
.maroon-select-option:hover:not(:disabled) { background: var(--primary); color: #fff; }
.maroon-select-option.is-selected { background: rgba(128,0,0,.1); color: var(--primary); font-weight: 600; }
.maroon-select-option.is-selected:hover { background: var(--primary); color: #fff; }
.maroon-select-option:disabled { color: var(--muted); cursor: not-allowed; }

.maroon-select-sm .maroon-select-display { padding: .3rem .75rem; font-size: .78rem; }

/* ── Main content ─────────────────────────────────────────── */
#main-content {
  margin-left: var(--sidebar-w);
  margin-top: var(--topbar-h);
  padding: 1.75rem;
  min-height: calc(100vh - var(--topbar-h));
  transition: margin-left .25s ease;
}

body.sidebar-collapsed #main-content { margin-left: 64px; }

/* ── Page Header (solid maroon banner) ───────────────────── */
.page-header {
  background: var(--primary);
  border-radius: 16px;
  padding: 1.75rem 2rem;
  color: #fff;
  margin-bottom: 1.5rem;
  position: relative;
  overflow: hidden;
}
.page-header::before {
  content: '';
  position: absolute;
  top: -70px; right: -70px;
  width: 220px; height: 220px;
  background: rgba(255,255,255,.1);
  border-radius: 50%;
}
.page-header::after {
  content: '';
  position: absolute;
  bottom: -50px; left: -50px;
  width: 150px; height: 150px;
  background: rgba(255,255,255,.06);
  border-radius: 50%;
}
.page-header h1, .page-header h4 {
  font-weight: 700; margin: 0 0 .35rem;
  font-size: 1.6rem; position: relative; z-index: 1;
}
.page-header p { margin: 0; opacity: .85; font-size: .88rem; position: relative; z-index: 1; }
.page-header .dtr-date-title { font-size: clamp(1.6rem, 3vw, 2.3rem); font-weight: 800; letter-spacing: -.01em; margin-bottom: .5rem; }
.live-badge {
  display: inline-flex; align-items: center; gap: .4rem;
  background: rgba(255,255,255,.18); border: 1px solid rgba(255,255,255,.25);
  border-radius: 50px; padding: .2rem .75rem; font-size: .72rem; color: #fff;
  position: relative; z-index: 1;
}
.live-dot { width: 7px; height: 7px; background: #4ade80; border-radius: 50%; animation: pulse 1.5s infinite; }

/* ── Cards ────────────────────────────────────────────────── */
.card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: 0 1px 6px rgba(0,0,0,.06);
}
.card-header {
  padding: 1rem 1.25rem;
  border-bottom: 1px solid var(--border);
  background: transparent;
}
.card-title { font-weight: 600; font-size: .92rem; margin: 0 0 .2rem; color: var(--text); }
.card-description { font-size: .78rem; color: var(--muted); margin: 0; }
.card-body { padding: 1.25rem; }

/* ── KPI Cards ────────────────────────────────────────────── */
.kpi-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1.25rem;
  box-shadow: 0 1px 6px rgba(0,0,0,.06);
  transition: transform .2s, box-shadow .2s;
}
.kpi-card:hover { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(0,0,0,.1); }
.kpi-card-clickable { cursor: pointer; text-align: center; border-width: 2px; user-select: none; }
.kpi-card-clickable.active { border-color: var(--primary); background: rgba(128,0,0,.06); box-shadow: 0 6px 20px rgba(128,0,0,.12); }
.kpi-card-compact { padding: .6rem .9rem; text-align: left; }

.status-filter-card { cursor: pointer; user-select: none; border-width: 2px; transition: transform .2s, box-shadow .2s, border-color .2s; }
.status-filter-card:hover { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(0,0,0,.1); }
.status-filter-card.active { border-color: var(--primary); background: var(--highlight-bg); box-shadow: 0 6px 20px rgba(128,0,0,.12); }

/* ── Compact side-by-side chart cards ────────────────────────── */
.chart-card-sm { border-width: 2px; transition: box-shadow .2s, border-color .2s; }
.chart-card-sm .card-body { padding: .85rem 1rem; }
.chart-card-sm canvas { max-height: 230px; }
.chart-card-sm.active { border-color: var(--primary); box-shadow: 0 6px 20px rgba(128,0,0,.1); }
.kpi-icon {
  width: 44px; height: 44px; border-radius: 10px;
  display: flex; align-items: center; justify-content: center; font-size: 1.2rem;
}
.kpi-value { font-size: 2rem; font-weight: 700; line-height: 1; color: var(--text); }

/* ── Dense analytics dashboard (stat tiles, bento grid, tab panels) ── */
.stat-tile-row {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: .9rem;
}
@media (max-width: 767.98px) {
  .stat-tile-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* Two squeezed columns on a phone leave each tile ~150px wide — too narrow
   for icon + name + value + sparkline, so text wraps and tiles balloon to
   mismatched heights. Below ~576px, stack tiles one per row instead. */
@media (max-width: 575.98px) {
  .stat-tile-row { grid-template-columns: 1fr; gap: .65rem; }
}

.stat-tile {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1rem 1.15rem;
  box-shadow: 0 1px 6px rgba(0,0,0,.06);
  transition: transform .15s, box-shadow .15s, border-color .15s;
}
/* Active state is a colored ring (inset box-shadow), not a thicker border —
   keeps every tile's border at the same 1px weight as the rest of the page,
   so only the selected tile stands out instead of every tile reading "thick." */
.stat-tile-clickable { cursor: pointer; user-select: none; }
.stat-tile-clickable:hover { transform: translateY(-1px); box-shadow: 0 6px 18px rgba(0,0,0,.1); }
.stat-tile-clickable.active {
  border-color: var(--primary);
  box-shadow: 0 0 0 1px var(--primary) inset;
}
/* Wraps a whole .card (or .stat-tile) in an <a> for plain "click through to
   the related page" navigation — distinct from .stat-tile-clickable above,
   which toggles an in-page chart rather than navigating anywhere. */
.dashboard-card-link { display: block; color: inherit; text-decoration: none; }
.dashboard-card-link:hover { color: inherit; }
.dashboard-card-link:hover .card,
.dashboard-card-link:hover.stat-tile {
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(0,0,0,.1);
}
a.stat-tile.dashboard-card-link { cursor: pointer; }
.stat-tile-top { display: flex; align-items: center; gap: .6rem; margin-bottom: .85rem; }
.stat-tile-icon {
  width: 34px; height: 34px; border-radius: 9px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center; font-size: 1rem;
}
.stat-tile-name { font-size: .8rem; font-weight: 600; color: var(--text-secondary); }
.stat-tile-body { display: flex; align-items: flex-end; justify-content: space-between; gap: .75rem; }
.stat-tile-value { font-size: 1.55rem; font-weight: 700; line-height: 1; color: var(--text); font-variant-numeric: proportional-nums; }
.stat-tile-caption { font-size: .72rem; color: var(--muted); margin-top: .35rem; }
.stat-tile-visual { display: flex; flex-direction: column; align-items: flex-end; gap: .3rem; flex-shrink: 0; }
.stat-tile-empty-icon { font-size: 1.9rem; color: var(--border); line-height: 1; }

@media (max-width: 575.98px) {
  .stat-tile { padding: .85rem 1rem; }
  .stat-tile-value { font-size: 1.3rem; }
}

/* Sparkline: line + soft area wash both carry the tile's own accent color
   (set inline per tile), so each metric reads as its own color story at a
   glance — Enrollees/rose, Drop-Out/amber, MPS/green. */
.stat-sparkline { display: block; overflow: visible; }
.stat-sparkline polyline { fill: none; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.stat-sparkline polygon { stroke: none; opacity: .16; }
.stat-sparkline circle { stroke: var(--card); stroke-width: 1.5; }

.stat-delta {
  display: inline-flex; align-items: center; gap: 1px;
  font-size: .68rem; font-weight: 700;
  padding: .1rem .45rem; border-radius: 50px; white-space: nowrap;
}
.stat-delta-up   { background: #d1fae5; color: #065f46; }
.stat-delta-down { background: #fee2e2; color: #991b1b; }
.stat-tile-delta-row { display: flex; align-items: center; gap: .4rem; margin-top: .6rem; font-size: .68rem; }

/* Donut-with-center-total (Document Status) */
.donut-wrap { position: relative; flex-shrink: 0; }
.donut-center-label {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  text-align: center; pointer-events: none;
}
.donut-center-label .donut-center-value { font-size: 1.05rem; font-weight: 700; color: var(--text); line-height: 1; }
.donut-center-label .donut-center-caption { font-size: .58rem; color: var(--muted); text-transform: uppercase; letter-spacing: .03em; }

/* ── Bento grid: primary chart column + narrow side rail ─────── */
.dashboard-grid {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
  gap: 1rem;
  align-items: start;
}
@media (max-width: 991.98px) {
  .dashboard-grid { grid-template-columns: 1fr; }
}
.card-body-tight { padding: .75rem 1rem; }
.side-rail-stack > .card + .card { margin-top: .75rem; }

/* ── Tables ───────────────────────────────────────────────── */
.table { width: 100%; border-collapse: collapse; font-size: .82rem; }
.table th {
  background: var(--surface-hover);
  padding: .65rem 1rem;
  text-align: left;
  font-size: .72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--muted);
  border-bottom: 1px solid var(--border);
}
.table td {
  padding: .75rem 1rem;
  border-bottom: 1px solid var(--border);
  vertical-align: middle;
  color: var(--text-secondary);
}
.table tbody tr:hover { background: var(--surface-hover); }
.table tbody tr:last-child td { border-bottom: none; }
.table .text-right { text-align: right; }
.table .text-center { text-align: center; }

/* ── Status Badges (exact React colors) ──────────────────── */
/* .status-pill is the same pill shape as .badge — used across the app
   (documents, tasks, dashboard) paired with a .badge-* color class instead
   of .badge itself. */
.badge, .status-pill {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  padding: .2rem .65rem;
  border-radius: 50px;
  font-size: .72rem;
  font-weight: 600;
  border: 1px solid transparent;
}

/* Time record statuses */
.badge-present  { background: var(--s-present-bg); color: var(--s-present-tx); border-color: var(--s-present-bd); }
.badge-late     { background: var(--s-late-bg);    color: var(--s-late-tx);    border-color: var(--s-late-bd); }
.badge-absent   { background: var(--s-absent-bg);  color: var(--s-absent-tx);  border-color: var(--s-absent-bd); }
.badge-on-leave { background: var(--s-leave-bg);   color: var(--s-leave-tx);   border-color: var(--s-leave-bd); }
.badge-academic-break { background: var(--s-break-bg); color: var(--s-break-tx); border-color: var(--s-break-bd); }
.alert-academic-break { background: var(--s-break-bg); color: var(--s-break-tx); border: 1px solid var(--s-break-bd); font-size: .85rem; }
[data-bs-theme="dark"] .badge-academic-break,
[data-bs-theme="dark"] .alert-academic-break { background: rgba(245,158,11,.14); color: #fcd34d; border-color: rgba(245,158,11,.35); }

/* Document statuses */
.badge-submitted { background: #dbeafe; color: #1e40af; border-color: #bfdbfe; }
.badge-reviewed  { background: #d1fae5; color: #065f46; border-color: #a7f3d0; }
.badge-pending   { background: #fef9c3; color: #713f12; border-color: #fde68a; }
.badge-returned  { background: #fee2e2; color: #991b1b; border-color: #fecaca; }

/* DepEd document statuses */
.badge-completed    { background: #d1fae5; color: #065f46; }
.badge-in-progress  { background: #fef9c3; color: #713f12; }

/* Generic */
.badge-outline { background: transparent; border-color: var(--border); color: var(--text-secondary); }
.badge-maroon  { background: var(--primary); color: #fff; border-color: var(--primary); }
.badge-secondary { background: var(--surface-hover); color: var(--text-secondary); border-color: var(--border); }

/* ── Tabs (Bootstrap override to match React style) ──────── */
.nav-tabs { border-bottom: 1px solid var(--border); gap: .25rem; }
.nav-tabs .nav-link {
  color: var(--muted);
  font-size: .82rem;
  font-weight: 500;
  border: none;
  padding: .6rem 1rem;
  border-radius: 8px 8px 0 0;
  margin: 0;
  background: transparent;
}
.nav-tabs .nav-link:hover { color: var(--primary); background: rgba(128,0,0,.06); }
.nav-tabs .nav-link.active { color: var(--primary); font-weight: 600; border-bottom: 2px solid var(--primary); background: transparent; }

/* Tab pills (for page-level tab switchers matching React TabsList) */
.tab-pills {
  display: inline-flex;
  background: var(--surface-hover);
  border-radius: 10px;
  padding: 3px;
  gap: 2px;
}
.tab-pill {
  padding: .4rem 1rem;
  border-radius: 8px;
  font-size: .8rem;
  font-weight: 500;
  color: var(--muted);
  cursor: pointer;
  border: none;
  background: transparent;
  transition: background .15s, color .15s;
  white-space: nowrap;
}
.tab-pill.active { background: var(--card); color: var(--primary); font-weight: 600; box-shadow: 0 1px 4px rgba(0,0,0,.1); }
.tab-pill:hover:not(.active) { color: var(--text-secondary); }

/* ── Buttons ──────────────────────────────────────────────── */
.btn { font-size: .82rem; font-weight: 500; border-radius: 8px; padding: .45rem .9rem; transition: all .15s; }
.btn-sm { padding: .3rem .65rem; font-size: .78rem; }

.btn-primary, .btn-maroon {
  background: var(--primary); color: #fff; border: 1px solid var(--primary);
}
.btn-primary:hover, .btn-maroon:hover { background: var(--primary-light); border-color: var(--primary-light); color: #fff; }

.btn-outline-primary, .btn-outline-maroon {
  background: transparent; color: var(--primary); border: 1px solid var(--primary);
}
.btn-outline-primary:hover, .btn-outline-maroon:hover { background: var(--primary); color: #fff; }

.btn-outline-secondary { background: transparent; color: var(--muted); border: 1px solid var(--input-border); }
.btn-outline-secondary:hover { background: var(--surface-hover); color: var(--text-secondary); }

.btn-ghost { background: transparent; border: none; color: var(--muted); }
.btn-ghost:hover { background: var(--surface-hover); color: var(--text-secondary); }

/* ── Dropdowns (Bootstrap override — brand red instead of default gray) ── */
.dropdown-menu {
  border: 1px solid rgba(128,0,0,.15);
  border-radius: 10px;
  box-shadow: 0 10px 30px rgba(128,0,0,.15);
  padding: .4rem;
}
.dropdown-item {
  border-radius: 6px;
  font-size: .85rem;
  padding: .5rem .75rem;
  transition: background .15s, color .15s;
}
.dropdown-item:hover, .dropdown-item:focus {
  background: var(--primary);
  color: #fff;
}
.dropdown-item.text-danger:hover, .dropdown-item.text-danger:focus {
  /* Bootstrap's .text-danger utility sets color with !important, which would
     otherwise win over this hover state and leave dark-red text on a
     dark-red background (barely legible) — matching !important here too. */
  background: #dc2626;
  color: #fff !important;
}
.dropdown-item:active { background: var(--primary-dark); color: #fff; }
.dropdown-divider { border-color: rgba(128,0,0,.12); }

/* Plain (no inline color of their own) dropdown toggles, e.g. the header
   profile menu — file-type-coded toggles on Templates set their own inline
   background per file type and are left alone so that coding stays intact. */
.dropdown-toggle {
  border-radius: 8px;
  transition: background .15s, color .15s;
}
.dropdown-toggle:hover, .dropdown-toggle:focus, .dropdown-toggle[aria-expanded="true"] {
  background: var(--highlight-bg);
  color: var(--highlight-tx);
}

.profile-dropdown-toggle {
  padding: .35rem .5rem;
  border: none;
  background: transparent;
}
.profile-dropdown-toggle:hover, .profile-dropdown-toggle:focus, .profile-dropdown-toggle[aria-expanded="true"] {
  background: var(--highlight-bg);
}

/* ── Form controls ────────────────────────────────────────── */
.form-control, .form-select {
  font-size: .82rem;
  border: 1px solid var(--input-border);
  border-radius: 8px;
  padding: .45rem .75rem;
  color: var(--text);
  background-color: var(--input-bg);
  transition: border-color .15s, box-shadow .15s;
}
/* Filter/sort/category/status <select> dropdowns get the same red identity
   as the Bootstrap .dropdown-menu treatment above — a red-tinted border and
   arrow at rest, solid red on hover, full red ring on focus (below). */
.form-select {
  padding-right: 2.25rem;
  border-color: rgba(128,0,0,.35);
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23800000' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e");
}
.form-select:hover {
  border-color: var(--primary);
}
.form-control:focus, .form-select:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(128,0,0,.1);
  outline: none;
}
.form-label { font-size: .78rem; font-weight: 600; color: var(--text-secondary); margin-bottom: .35rem; }

/* ── Progress ─────────────────────────────────────────────── */
.progress { background: var(--surface-hover); border-radius: 8px; overflow: hidden; }
.progress-bar { background: var(--primary); transition: width .6s ease; }
.progress-bar.success { background: #10b981; }
.progress-bar.warning { background: #f59e0b; }
.progress-bar.danger  { background: #ef4444; }

/* ── Modals (Bootstrap override) ─────────────────────────── */
.modal-content { border: none; border-radius: 16px; box-shadow: 0 20px 60px rgba(0,0,0,.2); }
.modal-header { border-radius: 16px 16px 0 0; padding: 1rem 1.25rem; border-bottom: 1px solid var(--border); }
.modal-header.gradient { background: var(--primary); color: #fff; }
.modal-title { font-weight: 700; font-size: .92rem; }
.modal-footer { border-top: 1px solid var(--border); padding: .85rem 1.25rem; }

/* ── Alerts ───────────────────────────────────────────────── */
.alert { border-radius: var(--radius); border: none; font-size: .82rem; padding: .85rem 1rem; }
.alert-success { background: #f0fdf4; color: #166534; border-left: 4px solid #22c55e; }
.alert-danger  { background: #fef2f2; color: #991b1b; border-left: 4px solid #ef4444; }
.alert-warning { background: #fffbeb; color: #92400e; border-left: 4px solid #f59e0b; }
.alert-info    { background: var(--highlight-bg); color: var(--primary); border-left: 4px solid var(--primary); }
.alert-info a  { color: inherit; }
.alert-info a:hover { color: var(--primary-light); }

/* ── Maroon checkboxes / radios / links (instead of Bootstrap blue) ── */
.form-check-input:checked { background-color: var(--primary); border-color: var(--primary); }
.form-check-input:focus { border-color: var(--primary-light); box-shadow: 0 0 0 .2rem rgba(128, 0, 0, .2); }
.link-maroon { color: var(--primary); text-decoration: none; font-weight: 600; }
.link-maroon:hover { color: var(--primary-light); text-decoration: underline; }

/* ── Specific component styles ────────────────────────────── */

/* Balance card */
.balance-card {
  background: var(--primary);
  border-radius: var(--radius);
  padding: 1.5rem;
  color: #fff;
}
.balance-card .balance-label { color: rgba(255,255,255,.7); font-size: .78rem; margin-bottom: .5rem; }
.balance-card .balance-value { font-size: 2.5rem; font-weight: 700; }

/* Announcement cards */
.announcement-card { border-radius: var(--radius); border: 1px solid var(--border); background: var(--card); padding: 1.1rem; margin-bottom: .75rem; transition: box-shadow .3s ease, border-color .3s ease; }
.announcement-card .ac-icon { width: 40px; height: 40px; border-radius: 10px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
/* Briefly marks the specific announcement a notification link pointed at,
   so landing on the page doesn't just dump you on the generic list. */
.announcement-highlight {
  border-color: var(--primary) !important;
  box-shadow: 0 0 0 3px rgba(128,0,0,.18);
  animation: announcementHighlightPulse 1.3s ease-in-out 2;
}
@keyframes announcementHighlightPulse {
  0%, 100% { background: var(--card); }
  50% { background: rgba(128,0,0,.06); }
}

/* Document link cards */
.doclink-card { border-radius: var(--radius); border: 1px solid var(--border); background: var(--card); padding: 1.25rem; height: 100%; transition: box-shadow .2s, transform .2s; }
.doclink-card:hover { box-shadow: 0 4px 20px rgba(0,0,0,.1); transform: translateY(-2px); }

/* Collapsible template sections */
.section-toggle-btn { color: inherit; }
.section-toggle-btn:hover .section-toggle-arrow { color: var(--primary); }
.section-toggle-arrow { transition: transform .2s; }
.section-toggle-btn.collapsed .section-toggle-arrow { transform: rotate(-90deg); }

/* Property condition badges (cond-serviceable = Working, cond-non-serviceable = Not Working) */
.cond-serviceable     { background: #d1fae5; color: #065f46; }
.cond-non-serviceable { background: #fee2e2; color: #991b1b; }

/* Property: Working / Not Working picker in the Add Item and Audit Condition modals */
.cond-choice { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; }
.cond-choice input { position: absolute; opacity: 0; pointer-events: none; }
.cond-choice label {
  display: flex; align-items: center; gap: .5rem;
  padding: .75rem .9rem; border: 1.5px solid var(--border); border-radius: 12px;
  cursor: pointer; font-weight: 600; font-size: .85rem; transition: border-color .15s, background .15s;
}
.cond-choice label:hover { border-color: var(--primary); }
.cond-choice input:checked + label.is-serviceable     { border-color: #059669; background: #ecfdf5; color: #065f46; }
.cond-choice input:checked + label.is-non-serviceable { border-color: #dc2626; background: #fef2f2; color: #991b1b; }
.cond-choice input:disabled + label { opacity: .45; cursor: not-allowed; }

/* Property: condition history timeline */
.cond-timeline { list-style: none; margin: 0; padding: 0 0 0 1.1rem; border-left: 2px solid var(--border); }
.cond-timeline li { position: relative; padding: 0 0 1rem .6rem; }
.cond-timeline li::before {
  content: ''; position: absolute; left: -1.52rem; top: .3rem;
  width: 12px; height: 12px; border-radius: 50%;
  background: var(--card); border: 2px solid var(--primary);
}
.cond-timeline li:last-child { padding-bottom: 0; }

/* ── Animations ───────────────────────────────────────────── */
@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: .5; }
}
@keyframes fadeIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
.animate-in { animation: fadeIn .35s ease; }

/* ── AJAX navigation progress bar (replaces full-page reload flash) ── */
#ajax-progress {
  position: fixed; top: 0; left: 0; height: 3px; width: 0;
  background: var(--primary); z-index: 99999; opacity: 0;
  transition: width .3s ease, opacity .25s ease;
}
#ajax-progress.active { opacity: 1; }

/* ── Upload motion loading overlay ───────────────────────────
   Shown by ajaxFormSubmit() (footer.php) instead of the plain
   SweetAlert2 spinner whenever an .ajax-form contains a file input
   with files selected — driven by real XHR upload progress. ── */
.upload-loading-overlay {
  position: fixed; inset: 0; z-index: 10000;
  display: flex; align-items: center; justify-content: center;
  background: rgba(20, 8, 8, .55);
  backdrop-filter: blur(4px);
  opacity: 0; pointer-events: none;
  transition: opacity .25s ease;
}
.upload-loading-overlay.active { opacity: 1; pointer-events: auto; }
.upload-loading-card {
  background: var(--card);
  border-radius: 20px;
  padding: 2rem 2.5rem 1.75rem;
  min-width: 260px;
  display: flex; flex-direction: column; align-items: center; gap: .6rem;
  box-shadow: 0 20px 60px rgba(0, 0, 0, .35);
}
.upload-loading-text { font-weight: 600; color: var(--text); font-size: .92rem; margin-top: -.5rem; }
.upload-progress-track {
  width: 200px; height: 8px; border-radius: 999px;
  background: var(--border); overflow: hidden;
}
.upload-progress-fill {
  height: 100%; width: 0%; border-radius: 999px;
  background: var(--primary);
  transition: width .15s ease;
}
.upload-progress-pct { font-size: .76rem; color: var(--muted); font-weight: 600; }

.ul-ring {
  transform-box: fill-box; transform-origin: center;
  animation: ulRingPulse 1.8s ease-out infinite;
}
.ul-arrow {
  transform-box: fill-box; transform-origin: center;
  animation: ulArrowRise 1.4s ease-in-out infinite;
}
.ul-dot {
  transform-box: fill-box; transform-origin: center;
  animation: ulDotBounce 1.2s ease-in-out infinite;
}
.ul-dot-2 { animation-delay: .15s; }
.ul-dot-3 { animation-delay: .3s; }
.ul-cloud { animation: ulCloudBreathe 1.8s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }

@keyframes ulRingPulse {
  0%   { transform: scale(.82); opacity: .4; }
  70%  { transform: scale(1.18); opacity: 0; }
  100% { transform: scale(1.18); opacity: 0; }
}
@keyframes ulArrowRise {
  0%   { transform: translateY(16px); opacity: 0; }
  20%  { opacity: 1; }
  65%  { transform: translateY(-10px); opacity: 1; }
  90%  { transform: translateY(-16px); opacity: 0; }
  100% { transform: translateY(16px); opacity: 0; }
}
@keyframes ulDotBounce {
  0%, 80%, 100% { transform: translateY(0); opacity: .5; }
  40% { transform: translateY(-6px); opacity: 1; }
}
@keyframes ulCloudBreathe {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.03); }
}

/* ── Page-navigation motion loading overlay ──────────────────
   Shown by loadPage() (footer.php) on every AJAX page switch —
   a continuously flipping "page" reinforces what's actually
   happening (navigating between pages), unlike the upload overlay's
   cloud/arrow which is upload-specific. ── */
.page-loading-overlay {
  position: fixed; inset: 0; z-index: 10000;
  display: flex; align-items: center; justify-content: center;
  background: rgba(20, 8, 8, .5);
  backdrop-filter: blur(3px);
  opacity: 0; pointer-events: none;
  transition: opacity .18s ease;
}
.page-loading-overlay.active { opacity: 1; pointer-events: auto; }
.page-loading-card {
  background: var(--card);
  border-radius: 20px;
  padding: 1.75rem 2.5rem;
  min-width: 200px;
  display: flex; flex-direction: column; align-items: center; gap: .9rem;
  box-shadow: 0 20px 60px rgba(0, 0, 0, .35);
}
.page-loading-text {
  font-weight: 600; color: var(--text); font-size: .9rem;
}
.page-loading-text::after {
  content: '...'; display: inline-block; width: 1.2em; text-align: left;
  animation: pageLoadingDots 1.2s steps(4) infinite;
  overflow: hidden; white-space: nowrap; vertical-align: bottom;
}
@keyframes pageLoadingDots {
  0%   { width: 0; }
  100% { width: 1.2em; }
}

.page-flip-scene { position: relative; width: 76px; height: 76px; display: flex; align-items: center; justify-content: center; }
.page-flip-ring {
  position: absolute; inset: 0; border-radius: 50%;
  border: 3px solid var(--primary); opacity: .3;
  animation: ulRingPulse 1.8s ease-out infinite;
}
.page-flip-book {
  width: 40px; height: 52px;
  perspective: 220px;
}
.page-flip-face {
  position: absolute; inset: 0; border-radius: 5px;
  backface-visibility: hidden;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .2);
}
.page-flip-front { background: linear-gradient(135deg, var(--primary), #4a0000); }
.page-flip-back { background: var(--card); border: 2px solid var(--primary); transform: rotateY(180deg); }
.page-flip-book { animation: pageFlipRotate 1.3s linear infinite; transform-style: preserve-3d; position: relative; }
@keyframes pageFlipRotate {
  0%   { transform: rotateY(0deg); }
  100% { transform: rotateY(360deg); }
}

/* ── Chat ─────────────────────────────────────────────────── */
/* Two separate cards (directory | conversation), plus the info panel when open. */
.chat-card { height: calc(100vh - 120px); min-height: 420px; }
.chat-shell { gap: 1rem; min-height: 0; }
.chat-panel {
  background: var(--card); border: 1px solid var(--border); border-radius: 16px;
  box-shadow: 0 1px 6px rgba(0,0,0,.05); overflow: hidden; min-height: 0;
}
.chat-left-panel { width: 320px; flex-shrink: 0; }
.chat-panel-head { display: flex; align-items: center; gap: .8rem; padding: 1.1rem 1.1rem .4rem; }
.chat-panel-icon { font-size: 1.7rem; line-height: 1; color: var(--primary); flex-shrink: 0; }
.chat-panel-title { font-size: 1.05rem; font-weight: 800; color: var(--text); line-height: 1.2; }
.chat-panel-sub { font-size: .72rem; color: var(--muted); }
.chat-new-group-btn {
  flex-shrink: 0; display: inline-flex; align-items: center; border: 0; border-radius: 10px;
  padding: .35rem .5rem; background: var(--primary); color: #fff; font-size: .95rem; line-height: 1;
}
.chat-new-group-btn .bi-plus { margin-left: -.15rem; font-size: 1.05rem; }
.chat-new-group-btn:hover { background: var(--primary-dark); }
.chat-panel-tools { padding: .7rem 1.1rem .8rem; border-bottom: 1px solid var(--border); }
.chat-search {
  display: flex; align-items: center; gap: .55rem; margin: 0; padding: .5rem .9rem; cursor: text;
  border-radius: 999px; background: var(--surface-hover); border: 1px solid var(--border);
}
.chat-search > i { color: var(--muted); font-size: .85rem; }
.chat-search input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; font-size: .8rem; color: var(--text); }
.chat-search:focus-within { border-color: color-mix(in srgb, var(--primary) 45%, var(--border)); }
.chat-filter-pill {
  border: 1px solid var(--border);
  background: var(--card);
  color: var(--text-secondary);
  font-size: .72rem;
  font-weight: 600;
  padding: .3rem .95rem;
  border-radius: 50px;
  white-space: nowrap;
}
.chat-filter-pill.active { background: var(--primary); color: #fff; border-color: var(--primary); }
.chat-section-label {
  font-size: .68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--muted);
  padding: .8rem 1.1rem .35rem;
}
#chatListScroll { padding: 0 .55rem .55rem; }
.chat-row {
  display: flex; align-items: center; gap: .75rem; padding: .6rem .55rem; cursor: pointer;
  border: 0; border-radius: 10px; background: transparent; color: inherit;
}
/* Straight dividers between rows (a border on the rounded row itself would curve at the corners). */
.chat-convo-item, .chat-user-item { position: relative; }
.chat-convo-item::after, .chat-user-item::after {
  content: ""; position: absolute; left: .55rem; right: .55rem; bottom: -1px; height: 1px; background: var(--border); pointer-events: none;
}
.chat-convo-item:last-child::after, .chat-user-item:last-child::after { display: none; }
.chat-user-item, .chat-convo-item { margin-bottom: 1px; }
.chat-convo-item:hover .chat-row, .chat-user-item:hover {
  background: color-mix(in srgb, var(--primary) 6%, var(--card));
}
.chat-convo-item.active .chat-row, .chat-convo-item.active:hover .chat-row { background: var(--highlight-bg); }
/* Avatars: one maroon tint for everyone (the JS thread header uses the same vars). */
:root { --chat-avatar-bg: #f6e3e6; --chat-avatar-tx: #800000; }
[data-bs-theme="dark"] { --chat-avatar-bg: rgba(165,42,42,.25); --chat-avatar-tx: #f2a7a7; }
.chat-avatar {
  width: 38px; height: 38px; flex-shrink: 0; border-radius: 50%; object-fit: cover;
  display: flex; align-items: center; justify-content: center; font-size: .72rem; font-weight: 700;
  background: var(--chat-avatar-bg); color: var(--chat-avatar-tx);
}
.chat-avatar-ring { box-shadow: 0 0 0 2px var(--primary); }
.chat-convo-item.active span.chat-avatar { background: var(--primary); color: #fff; }
.chat-row-name { display: block; font-size: .82rem; font-weight: 600; color: var(--text); }
.chat-row-sub  { display: block; font-size: .72rem; color: var(--muted); }
.chat-row-time { font-size: .66rem; color: var(--muted); }
.chat-row-arrow { color: var(--muted); font-size: .8rem; flex-shrink: 0; }
/* Conversation rows: chevron by default, swapped for the delete button on hover. */
.chat-convo-arrow { position: absolute; right: .9rem; top: 50%; transform: translateY(-50%); pointer-events: none; }
.chat-convo-item:hover .chat-convo-arrow { display: none; }

/* Open conversation */
.chat-thread-head { display: flex; align-items: center; justify-content: space-between; gap: .5rem; padding: .9rem 1.2rem; border-bottom: 1px solid var(--border); }
.chat-thread-name { font-size: 1rem; font-weight: 700; color: var(--text); line-height: 1.25; }
.chat-thread-sub  { font-size: .78rem; color: var(--muted); }
.chat-head-btn {
  width: 34px; height: 34px; border: 0; border-radius: 50%; background: transparent; color: var(--text-secondary);
  display: inline-flex; align-items: center; justify-content: center; font-size: 1.05rem;
}
.chat-head-btn:hover { background: var(--surface-hover); color: var(--text); }
.chat-composer { display: flex; align-items: center; gap: .6rem; padding: .8rem 1rem; border-top: 1px solid var(--border); }
.chat-attach-btn, .chat-send-btn {
  width: 44px; height: 44px; flex-shrink: 0; border-radius: 10px;
  display: inline-flex; align-items: center; justify-content: center; font-size: 1.05rem;
}
.chat-attach-btn { border: 1px solid var(--border); background: var(--card); color: var(--text-secondary); }
.chat-attach-btn:hover { background: var(--surface-hover); }
.chat-send-btn { border: 0; background: var(--primary); color: #fff; }
.chat-send-btn:hover { background: var(--primary-dark); }
.chat-input {
  flex: 1; min-width: 0; height: 44px; padding: 0 1rem; border-radius: 10px; font-size: .88rem;
  border: 1px solid var(--border); background: var(--card); color: var(--text); outline: 0;
}
.chat-input:focus { border-color: color-mix(in srgb, var(--primary) 45%, var(--border)); }
.chat-empty-hello { font-size: 1.05rem; color: var(--text-secondary); margin: 0; }

/* Empty conversation pane */
.chat-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; height: 100%; padding: 2rem; text-align: center; }
.chat-empty-art { width: 210px; max-width: 70%; margin-bottom: 1.25rem; }
.chat-empty-blob  { fill: color-mix(in srgb, var(--primary) 8%, var(--card)); }
.chat-empty-back  { fill: color-mix(in srgb, var(--muted) 35%, var(--card)); }
.chat-empty-front { fill: var(--primary); }
.chat-empty-dot   { fill: #fff; }
.chat-empty-spark { stroke: var(--primary); stroke-width: 3; stroke-linecap: round; fill: none; }
.chat-empty-title { font-size: 1.5rem; font-weight: 800; color: var(--text); margin-bottom: .4rem; }
.chat-empty-text  { font-size: .88rem; color: var(--muted); margin: 0; }
[data-bs-theme="dark"] .chat-panel-icon { color: var(--highlight-tx); }
[data-bs-theme="dark"] .chat-empty-front { fill: #a52a2a; }
[data-bs-theme="dark"] .chat-empty-spark { stroke: #f2a7a7; }

/* Message toolbar (kebab/reply/react) — sits BESIDE the bubble (Messenger's
   layout), not stacked above it. Dimmed by default and full opacity on
   hover for a quiet look on desktop, but never opacity:0: on a touchscreen
   there's no hover event, so an actually-hidden toolbar would never become
   reachable at all (unsend/react/reply need to work on mobile too). */
.chat-msg-toolbar {
  display: flex; align-items: center; gap: .15rem;
  opacity: .5; transition: opacity .12s ease;
  flex-shrink: 0;
}
.chat-msg-row:hover .chat-msg-toolbar { opacity: 1; }
@media (hover: none) {
  .chat-msg-toolbar { opacity: .85; }
}
.chat-icon-btn {
  border: none; background: var(--surface-hover); color: var(--text-secondary);
  width: 26px; height: 26px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: .8rem; line-height: 1; cursor: pointer; padding: 0;
  transition: background .12s ease;
}
.chat-icon-btn:hover { background: var(--border); }

/* Reaction picker popover (opened by the smiley icon in the toolbar) */
.chat-react-popover-wrap { position: relative; }
.chat-react-popover {
  position: absolute; bottom: calc(100% + 6px); left: 50%; transform: translateX(-50%);
  display: flex; gap: .15rem;
  background: var(--card); border: 1px solid var(--border); border-radius: 50px;
  padding: .3rem .4rem; box-shadow: 0 6px 20px rgba(0,0,0,.15);
  z-index: 20; white-space: nowrap;
}
.chat-react-popover-btn {
  border: none; background: none; font-size: 1.05rem; line-height: 1;
  padding: .15rem .3rem; border-radius: 50%; cursor: pointer;
  transition: background .12s ease, transform .12s ease;
}
.chat-react-popover-btn:hover { background: var(--surface-hover); transform: scale(1.2); }

.chat-reactions-row { display: flex; gap: .25rem; flex-wrap: wrap; margin-top: .3rem; }
.chat-reaction-pill {
  border: 1px solid var(--border); background: var(--card); color: var(--text-secondary);
  font-size: .7rem; padding: .05rem .4rem; border-radius: 50px; cursor: pointer;
}
.chat-reaction-pill.mine { border-color: var(--primary); background: rgba(128,0,0,.08); color: var(--primary); }

.chat-reply-quote {
  border-left: 3px solid var(--primary);
  background: var(--surface-hover);
  border-radius: 6px;
  padding: .3rem .5rem;
  margin-bottom: .3rem;
  font-size: .72rem;
}
.chat-reply-quote-name { color: var(--primary); font-weight: 600; }
.chat-reply-quote-text { color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 220px; }

.chat-reply-banner {
  background: var(--surface-hover);
  border-radius: 8px;
  padding: .4rem .6rem;
  border-left: 3px solid var(--primary);
}

/* Presence dot on the thread-header avatar (direct chats only) */
.chat-presence-dot {
  position: absolute; bottom: -1px; right: -1px;
  width: 10px; height: 10px; border-radius: 50%;
  background: #22c55e; border: 2px solid var(--card);
}

/* Delete/leave button on each conversation-list row — hidden until the row
   is hovered, so the list stays clean but the action is right there next to
   the chat's name rather than buried inside the opened thread. */
.chat-convo-delete-btn {
  position: absolute; right: .6rem; top: 50%; transform: translateY(-50%);
  width: 26px; height: 26px; border-radius: 50%;
  border: none; background: transparent; color: var(--muted);
  display: none; align-items: center; justify-content: center;
  font-size: .8rem; cursor: pointer;
}
.chat-convo-item:hover .chat-convo-delete-btn { display: flex; }
.chat-convo-delete-btn:hover { background: #fee2e2; color: #dc2626; }

/* Right-side "chat details" panel (Messenger's layout) — opened via the info
   icon or the kebab menu's "View Members", instead of a centered modal. */
.chat-info-panel {
  width: 280px; flex-shrink: 0;
  display: flex; flex-direction: column;
  background: var(--card);
}
.chat-info-panel.d-none { display: none; }

/* ── Chat on small screens: list, thread, and the info panel never share
   the viewport — whichever one is active takes the full width, with a Back
   button to return to the list instead of a cramped side-by-side layout. ── */
.chat-mobile-back-btn { display: none; }
@media (max-width: 767.98px) {
  .chat-card { height: calc(100vh - 150px) !important; }
  .chat-left-panel { width: 100% !important; border-right: none !important; }
  .chat-thread-pane { display: none !important; }
  .chat-info-panel { width: 100% !important; border-left: none !important; }
  .chat-shell.chat-mobile-thread-active .chat-left-panel { display: none !important; }
  .chat-shell.chat-mobile-thread-active .chat-thread-pane { display: flex !important; }
  .chat-shell.chat-mobile-info-active .chat-thread-pane,
  .chat-shell.chat-mobile-info-active .chat-left-panel { display: none !important; }
  .chat-shell.chat-mobile-info-active .chat-info-panel { display: flex !important; }
  .chat-mobile-back-btn { display: inline-flex !important; }
}

/* ── Login ────────────────────────────────────────────────── */
.login-wrapper {
  min-height: 100vh;
  display: flex; align-items: center; justify-content: center;
  background: var(--primary);
  padding: 2rem 1rem;
}

.login-shell {
  width: 100%;
  max-width: 920px;
  min-height: 560px;
  display: flex;
  border-radius: 28px;
  overflow: hidden;
  box-shadow: 0 30px 80px rgba(0,0,0,.35);
  background: #fff;
}

/* Single-panel card for Forgot / Reset password. */
.login-shell-compact { max-width: 460px; min-height: 0; }

/* Form panel */
.login-form-panel {
  flex: 1;
  padding: 3rem;
  display: flex; flex-direction: column; justify-content: center;
}
.login-form-title { font-weight: 800; font-size: 1.6rem; color: #1f2937; margin-bottom: .25rem; }
.login-form-sub   { color: var(--muted); font-size: .85rem; margin-bottom: 1.75rem; }

.login-input-group { position: relative; margin-bottom: 1.1rem; }
.login-input-group input {
  width: 100%; border: 1.5px solid var(--border); background: #f4f6f9;
  border-radius: 30px; padding: .75rem 2.75rem .75rem 1.25rem;
  font-size: .88rem; transition: border-color .15s, box-shadow .15s;
}
.login-input-group input:focus {
  outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px rgba(128,0,0,.12); background: #fff;
}
.login-input-group .login-input-icon {
  position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
  width: 34px; height: 34px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  color: var(--muted); background: transparent; border: 0; padding: 0;
}
.login-input-group .login-input-icon:hover { color: var(--primary); }

.login-submit-btn {
  width: 100%; border: 0; border-radius: 30px; padding: .8rem;
  font-weight: 700; font-size: .92rem; color: #fff;
  background: var(--primary);
  box-shadow: 0 10px 24px rgba(128,0,0,.35);
  transition: transform .15s, box-shadow .15s;
}
.login-submit-btn:hover { transform: translateY(-1px); box-shadow: 0 14px 30px rgba(128,0,0,.4); color: #fff; }

@media (max-width: 767.98px) {
  .login-shell { flex-direction: column; max-width: 420px; }
  .login-form-panel { padding: 2.25rem 1.75rem; }
}

/* ── Login / Forgot / Reset: school-photo backdrop ────────────
   Full-page campus photo with a slow Ken Burns drift under a maroon
   wash; the card then rises in and its contents stagger after it. */
.login-wrapper-photo {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: #1a0505;
}
.login-wrapper-photo .login-shell { position: relative; z-index: 2; }

.login-bg {
  position: fixed; inset: 0; z-index: 0;
  overflow: hidden;
  animation: login-bg-reveal 1.6s cubic-bezier(.22,1,.36,1) both;
}
/* Still photo: no zoom/pan, so the campus stays put behind the card. */
.login-bg-photo {
  position: absolute; inset: 0;
  background: url('../img/login-bg.jpg') center 40% / cover no-repeat;
}
.login-bg-overlay {
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse at center, transparent 35%, rgba(20,0,0,.55) 100%),
    linear-gradient(120deg, rgba(61,5,5,.84) 0%, rgba(92,10,10,.6) 45%, rgba(20,0,0,.35) 100%);
}
/* A plain fade-in on load: no zoom or blur, so the photo appears already in place. */
@keyframes login-bg-reveal {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* Card: transparent shell so the illustration side can be frosted glass
   showing the photo through it; the form side stays solid for legibility. */
.login-shell-glass {
  background: transparent;
  box-shadow: 0 40px 100px rgba(0,0,0,.5), 0 0 0 1px rgba(255,255,255,.12);
  animation: login-card-in 1s cubic-bezier(.22,1,.36,1) .35s both;
}
.login-shell-glass .login-form-panel { background: rgba(255,255,255,.97); }
@keyframes login-card-in {
  from { opacity: 0; transform: translateY(48px) scale(.95); filter: blur(6px); }
  to   { opacity: 1; transform: translateY(0) scale(1);       filter: none; }
}

/* Staggered form contents — each .ls-item sets its own --i. */
.ls-item { animation: login-rise .6s cubic-bezier(.22,1,.36,1) calc(.75s + var(--i, 0) * .08s) both; }
@keyframes login-rise {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Error alert gives a short shake once it has appeared. */
.login-shake { animation: login-rise .6s cubic-bezier(.22,1,.36,1) .9s both, login-shake .5s ease 1.5s; }
@keyframes login-shake {
  0%, 100% { transform: translateX(0); }
  20%, 60% { transform: translateX(-6px); }
  40%, 80% { transform: translateX(6px); }
}

/* Inputs: icon picks up the brand color while the field has focus. */
.login-input-group .login-input-icon { transition: color .2s; }
.login-input-group:focus-within .login-input-icon { color: var(--primary); }

/* Submit button: light sweep on hover + loading state on submit. */
.login-submit-btn { position: relative; overflow: hidden; }
.login-submit-btn::after {
  content: ''; position: absolute; top: 0; left: -60%;
  width: 45%; height: 100%;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,.35), transparent);
  transform: skewX(-20deg);
  transition: left .6s ease;
}
.login-submit-btn:hover::after { left: 120%; }
.login-submit-btn.is-loading { pointer-events: none; opacity: .85; }
.login-submit-btn.is-loading .btn-label { visibility: hidden; }
.login-submit-btn .btn-spinner {
  display: none; position: absolute; top: 50%; left: 50%;
  width: 20px; height: 20px; margin: -10px 0 0 -10px;
  border: 2.5px solid rgba(255,255,255,.35); border-top-color: #fff; border-radius: 50%;
  animation: login-spin .7s linear infinite;
}
.login-submit-btn.is-loading .btn-spinner { display: block; }
@keyframes login-spin { to { transform: rotate(360deg); } }

/* ── Login: compact split card (form left / campus scene right) ──
   Sits on the full-page campus photo backdrop (.login-wrapper-photo) at the
   original login card size. Colors are hardcoded so the login keeps its
   look regardless of the app's light/dark theme. */
.auth-split {
  --a-maroon: #7a1222;
  --a-maroon-dark: #4f0812;
  --a-ink: #1c1f2e;
  --a-muted: #6b6f7b;
  font-family: 'Plus Jakarta Sans', 'Inter', sans-serif;
  position: relative; z-index: 2;
  width: 100%; max-width: 920px; min-height: 560px;
  display: flex;
  border-radius: 28px;
  overflow: hidden;
  background: #fbf7f4;
  box-shadow: 0 40px 100px rgba(0,0,0,.5), 0 0 0 1px rgba(255,255,255,.12);
  animation: login-card-in 1s cubic-bezier(.22,1,.36,1) .35s both;
}

/* Left: form */
.auth-left {
  position: relative;
  flex: 0 0 46%;
  display: flex; flex-direction: column;
  padding: 1.75rem 2.25rem 1.5rem;
  background: radial-gradient(circle at 20% 30%, #fffdfb 0%, #fbf5f1 60%, #f6ece7 100%);
  overflow: hidden;
}
.auth-left > *:not(.auth-wave) { position: relative; z-index: 1; }

.auth-topbar { display: flex; align-items: flex-start; justify-content: space-between; gap: .75rem; }
.auth-brand { display: flex; align-items: center; gap: .6rem; }
.auth-brand img { width: 40px; height: 40px; object-fit: contain; }
.auth-brand-name {
  font-size: 1.15rem; font-weight: 800; letter-spacing: .06em; line-height: 1;
  color: var(--a-maroon);
}
.auth-brand-sub {
  max-width: 9.5rem;
  font-size: .5rem; font-weight: 600; letter-spacing: .1em; line-height: 1.35; text-transform: uppercase;
  color: #8a5a60; margin-top: .25rem;
}
.auth-brand .btn-link { color: #b39a9d; }
.auth-brand .btn-link:hover { color: var(--a-maroon); }

.auth-date { display: flex; gap: .45rem; line-height: 1.3; font-variant-numeric: tabular-nums; }
.auth-date i { color: var(--a-maroon); font-size: .9rem; }
.auth-date #liveDate { font-size: .7rem; font-weight: 600; color: var(--a-ink); white-space: nowrap; }
.auth-date #liveClock { font-size: .7rem; color: var(--a-muted); }

.auth-form-wrap {
  flex: 1;
  display: flex; flex-direction: column; justify-content: center;
  padding: 1.25rem 0 .25rem;
}
.auth-accent { width: 32px; height: 3px; border-radius: 3px; background: #c0283c; margin-bottom: .8rem; }
.auth-title {
  font-size: 1.6rem; font-weight: 800; line-height: 1.15;
  color: var(--a-ink); margin-bottom: .4rem; letter-spacing: -.01em;
}
.auth-title span { display: block; color: var(--a-maroon); }
.auth-sub { font-size: .82rem; color: var(--a-muted); margin-bottom: 1.4rem; }

.auth-field { position: relative; margin-bottom: .9rem; }
.auth-field input {
  width: 100%; height: 46px;
  border: 1px solid #ebe1dd; border-radius: 12px; background: #fff;
  padding: 0 2.75rem 0 2.8rem;
  font-size: .86rem; color: var(--a-ink);
  box-shadow: 0 2px 8px rgba(90,20,30,.04);
  transition: border-color .2s, box-shadow .2s;
}
.auth-field input::placeholder { color: #a7a9b2; }
.auth-field input:focus {
  outline: none; border-color: var(--a-maroon);
  box-shadow: 0 0 0 4px rgba(122,18,34,.1), 0 6px 18px rgba(90,20,30,.08);
}
.auth-field-icon {
  position: absolute; left: 1rem; top: 50%; transform: translateY(-50%);
  color: var(--a-maroon); font-size: 1rem; pointer-events: none;
  transition: transform .25s cubic-bezier(.34,1.56,.64,1);
}
.auth-field:focus-within .auth-field-icon { transform: translateY(-50%) scale(1.15); }
.auth-field-toggle {
  position: absolute; right: .4rem; top: 50%; transform: translateY(-50%);
  width: 34px; height: 34px; border: 0; border-radius: 50%; background: transparent;
  color: #8b8e98; display: flex; align-items: center; justify-content: center;
}
.auth-field-toggle:hover { color: var(--a-maroon); background: #f8eff0; }

.auth-forgot { text-align: right; margin: -.3rem 0 1rem; }
.auth-forgot a {
  font-size: .78rem; font-weight: 600; color: var(--a-maroon);
  text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px;
}

.auth-submit {
  height: 48px; border-radius: 14px; font-size: .95rem;
  background: linear-gradient(90deg, #560a17 0%, #8a1a2c 55%, #6a0f1e 100%);
  box-shadow: 0 12px 24px rgba(110,15,30,.3);
}
.auth-submit:hover { box-shadow: 0 16px 30px rgba(110,15,30,.38); }

.auth-features {
  display: grid; grid-template-columns: repeat(3, 1fr);
  margin-top: 1.5rem;
}
.auth-feature { display: flex; align-items: center; gap: .45rem; padding: 0 .55rem; }
.auth-feature:first-child { padding-left: 0; }
.auth-feature + .auth-feature { border-left: 1px solid #e7dbd8; }
.auth-feature i { font-size: 1.2rem; color: var(--a-maroon); }
.auth-feature strong { display: block; font-size: .66rem; color: var(--a-ink); line-height: 1.25; }
.auth-feature small { display: block; font-size: .56rem; color: var(--a-muted); line-height: 1.3; }

/* Decorative waves (SVG, stretched to their box) */
.auth-wave { position: absolute; pointer-events: none; z-index: 0; }
.auth-wave svg { width: 100%; height: 100%; display: block; }
.auth-wave-tr { top: 0; right: 0; width: 55%; height: 22%; animation: auth-wave-drift 12s ease-in-out infinite alternate; }
.auth-wave-bl { bottom: 0; left: 0; width: 80%; height: 16%; animation: auth-wave-drift 14s ease-in-out infinite alternate-reverse; }
@keyframes auth-wave-drift {
  from { transform: translate(0, 0); }
  to   { transform: translate(-10px, 5px); }
}

/* Right: campus photo scene */
.auth-right {
  position: relative; flex: 1;
  overflow: hidden;
  background: #3a0710;
  animation: auth-panel-in 1.1s cubic-bezier(.77,0,.18,1) .6s both;
}
@keyframes auth-panel-in {
  from { clip-path: inset(0 0 0 100%); }
  to   { clip-path: inset(0 0 0 0); }
}
.auth-par { position: absolute; inset: 0; pointer-events: none; transition: transform .5s cubic-bezier(.22,1,.36,1); }
.auth-photo {
  /* Photo fills the area above the desk so the building isn't hidden behind it. */
  position: absolute; inset: -4% -6% 34% -6%;
  background: url('../img/login-bg.jpg') 35% 60% / cover no-repeat;
}
.auth-photo-tint {
  position: absolute; inset: 0;
  background:
    linear-gradient(180deg, rgba(122,18,34,.45) 0%, rgba(90,12,24,.35) 40%, rgba(30,4,10,.75) 100%),
    linear-gradient(90deg, rgba(60,6,14,.35), transparent 60%);
}

.auth-wave-r-tl { top: 0; left: 0; width: 55%; height: 30%; z-index: 2; }
.auth-wave-r-br { bottom: 0; right: 0; width: 45%; height: 28%; z-index: 2; }

/* Desk surface the books sit on */
.auth-desk {
  position: absolute; left: 0; right: 0; bottom: 0; height: 38%;
  background:
    radial-gradient(ellipse at 60% 0%, rgba(255,170,150,.18) 0%, transparent 55%),
    linear-gradient(180deg, #6e2128 0%, #4a1117 22%, #2a080c 70%, #1a0407 100%);
  box-shadow: 0 -1px 0 rgba(255,200,185,.28), 0 -30px 60px rgba(20,0,5,.35);
}

/* Script tagline, top-right */
.auth-tagline {
  position: absolute; top: 6%; right: 7%; z-index: 3;
  font-family: 'Dancing Script', cursive; font-size: 1.35rem;
  line-height: 1.15; color: #fff; text-align: right;
  transform: rotate(-8deg);
  text-shadow: 0 2px 12px rgba(0,0,0,.25);
}
.auth-tagline-text { display: block; animation: auth-write 1.6s cubic-bezier(.65,0,.35,1) 1.6s both; }
.auth-tagline svg { display: block; width: 70%; margin-left: auto; height: 10px; overflow: visible; }
.auth-tagline path {
  stroke-dasharray: 160; stroke-dashoffset: 160;
  animation: auth-draw .9s ease-out 3s forwards;
}
@keyframes auth-write {
  from { clip-path: inset(0 100% 0 0); }
  to   { clip-path: inset(0 0 0 0); }
}
@keyframes auth-draw { to { stroke-dashoffset: 0; } }

/* Floating glass icon cards + flowing connectors (drawn at 440×220, scaled down) */
.auth-orbit {
  position: absolute; top: 16%; left: 50%;
  width: 440px; height: 220px; margin-left: -220px;
  transform: scale(.72); transform-origin: center top;
  z-index: 3;
}
.auth-orbit-lines { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.auth-orbit-lines path {
  fill: none; stroke: rgba(255,255,255,.55); stroke-width: 1.3;
  stroke-dasharray: 3 7; stroke-linecap: round;
  animation: auth-flow 3s linear infinite, login-rise .8s ease 1.8s both;
}
.auth-orbit-lines circle { fill: #fff; opacity: .85; animation: auth-pulse 2.4s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
@keyframes auth-flow { to { stroke-dashoffset: -40; } }
@keyframes auth-pulse {
  0%, 100% { opacity: .5; transform: scale(.8); }
  50%      { opacity: 1;  transform: scale(1.3); }
}

.auth-card {
  position: absolute; width: 74px; height: 74px; margin: -37px 0 0 -37px;
  animation: auth-pop .7s cubic-bezier(.34,1.56,.64,1) both;
}
.auth-card-inner {
  width: 100%; height: 100%;
  display: flex; align-items: center; justify-content: center;
  border-radius: 16px;
  background: linear-gradient(145deg, rgba(255,255,255,.34), rgba(255,255,255,.12));
  border: 1px solid rgba(255,255,255,.45);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  box-shadow: 0 14px 30px rgba(30,0,8,.35), inset 0 1px 0 rgba(255,255,255,.5);
  color: #fff; font-size: 1.9rem;
  animation: auth-float 4.2s ease-in-out infinite;
}
@keyframes auth-pop {
  from { opacity: 0; transform: scale(.4) translateY(20px); }
  to   { opacity: 1; transform: scale(1) translateY(0); }
}
@keyframes auth-float {
  0%, 100% { transform: translateY(0) rotate(var(--r, 0deg)); }
  50%      { transform: translateY(-10px) rotate(calc(var(--r, 0deg) * -1)); }
}

/* Book stack + pen cup on the desk */
.auth-books {
  position: absolute; z-index: 3;
  right: 7%; bottom: 31%;
  width: 58%; height: auto;
  overflow: visible;
}
.auth-book { animation: auth-book-in .8s cubic-bezier(.22,1,.36,1) both; }
@keyframes auth-book-in {
  from { opacity: 0; transform: translate(60px, -24px); }
  to   { opacity: 1; transform: translate(0, 0); }
}

/* Headline, bottom-left */
.auth-headline {
  position: absolute; left: 8%; bottom: 7%; z-index: 3;
  max-width: 250px; padding-left: .8rem;
  border-left: 3px solid #e2475a;
  color: #fff;
  animation: login-rise .8s cubic-bezier(.22,1,.36,1) 1.9s both;
}
.auth-headline h2 { font-size: 1.15rem; font-weight: 700; line-height: 1.2; margin-bottom: .4rem; }
.auth-headline p { font-size: .72rem; color: rgba(255,255,255,.82); margin: 0; line-height: 1.5; }

@media (max-width: 991.98px) {
  .auth-split { max-width: 420px; min-height: 0; }
  .auth-right { display: none; }
  .auth-left { flex: 1; padding: 2rem 1.75rem; }
}
@media (max-width: 575.98px) {
  .auth-feature { flex-direction: column; text-align: center; gap: .25rem; padding: 0 .4rem; }
}

@media (prefers-reduced-motion: reduce) {
  .login-bg, .login-bg-photo, .login-shell-glass, .ls-item, .login-shake,
  .auth-split, .auth-wave, .auth-right, .auth-photo, .auth-tagline-text, .auth-orbit-lines path,
  .auth-orbit-lines circle, .auth-card, .auth-card-inner, .auth-book, .auth-headline { animation: none !important; }
  .auth-tagline path { stroke-dashoffset: 0; animation: none; }
}

/* Charts open full-size in #chartExpandModal when clicked. */
#main-content canvas { cursor: zoom-in; }
.chart-expand-canvas-wrap { position: relative; height: min(50vh, 440px); }
.chart-expand-table { margin-top: 1rem; max-height: 260px; overflow-y: auto; border: 1px solid var(--border); border-radius: 12px; }
.chart-expand-table:empty { display: none; }
.chart-expand-table table th { position: sticky; top: 0; background: var(--surface-hover); font-size: .74rem; color: var(--muted); font-weight: 600; }
.chart-expand-table table th, .chart-expand-table table td { padding: .5rem 1rem; }
.chart-expand-table tfoot td { font-weight: 700; background: var(--surface-hover); }
.chart-expand-source {
  display: flex; gap: .75rem; align-items: flex-start; margin-top: 1rem;
  padding: .75rem 1rem; border-radius: 12px;
  background: var(--surface-hover); border: 1px solid var(--border);
  font-size: .8rem; color: var(--text-secondary);
}
.chart-expand-source > i { color: var(--primary); font-size: 1.05rem; margin-top: .05rem; }
.chart-expand-source strong { display: block; color: var(--text); font-size: .74rem; text-transform: uppercase; letter-spacing: .05em; margin-bottom: .1rem; }

/* ── Principal dashboard (redesign) ───────────────────────── */
.dash-head {
  display: flex; justify-content: space-between; align-items: flex-start; flex-wrap: wrap; gap: 1rem;
  margin-bottom: 1.5rem;
}
.dash-eyebrow { font-size: .72rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--text-secondary); }
.dash-name { font-size: clamp(1.6rem, 2.6vw, 2.2rem); font-weight: 800; color: var(--primary); margin: .15rem 0 .1rem; letter-spacing: -.01em; }
[data-bs-theme="dark"] .dash-name { color: #fff; }
.dash-sub { color: var(--muted); margin: 0; }
.dash-rule { width: 34px; height: 3px; border-radius: 3px; background: var(--primary); margin-top: .8rem; }
.dash-actions { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; }
.dash-year {
  display: flex; align-items: center; gap: .65rem; margin: 0; cursor: pointer;
  background: var(--card); border: 1px solid var(--border); border-radius: 14px;
  padding: .4rem .85rem; box-shadow: 0 1px 4px rgba(0,0,0,.04);
}
.dash-year > i { color: var(--primary); }
.dash-year small { display: block; font-size: .62rem; color: var(--muted); line-height: 1; }
.dash-year select { border: 0; background: transparent; font-weight: 700; font-size: .88rem; color: var(--text); padding: 0 1.2rem 0 0; cursor: pointer; }
.dash-year select:focus { outline: none; }
.dash-btn {
  border-radius: 999px; padding: .55rem 1.15rem; font-size: .82rem; font-weight: 600;
  background: var(--card); border: 1px solid var(--border); color: var(--text);
}
.dash-btn:hover { border-color: var(--primary); color: var(--primary); }
.dash-btn-primary { background: var(--primary); border-color: var(--primary); color: #fff; box-shadow: 0 6px 16px rgba(92,10,10,.25); }
.dash-btn-primary:hover { background: var(--primary-dark); color: #fff; }

.dash-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; }
.dash-kpi {
  display: block; background: var(--card); border: 1px solid var(--border); border-radius: 16px;
  padding: 1rem 1.2rem 1.1rem; box-shadow: 0 1px 6px rgba(0,0,0,.04);
  color: inherit; text-decoration: none; transition: transform .15s, box-shadow .15s, border-color .15s;
}
.dash-kpi:hover { transform: translateY(-1px); box-shadow: 0 8px 20px rgba(0,0,0,.07); color: inherit; }
.dash-kpi.active { border-color: color-mix(in srgb, var(--primary) 55%, transparent); box-shadow: 0 0 0 1px color-mix(in srgb, var(--primary) 30%, transparent) inset, 0 8px 22px rgba(92,10,10,.08); background: color-mix(in srgb, var(--card) 92%, #f3d9dc); }
.dash-kpi-top { display: flex; align-items: center; gap: .65rem; font-weight: 600; font-size: .85rem; color: var(--text); }
.dash-kpi-icon {
  width: 38px; height: 38px; border-radius: 50%; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  background: color-mix(in srgb, var(--primary) 9%, var(--card)); color: var(--primary); font-size: 1.05rem;
}
.dash-kpi-body { display: flex; align-items: flex-end; justify-content: space-between; gap: .5rem; margin-top: .8rem; }
.dash-kpi-value { font-size: 2rem; font-weight: 700; line-height: 1.05; color: var(--text); }
.dash-kpi-of { font-size: .9rem; font-weight: 600; color: var(--muted); }
.dash-kpi-ghost { font-size: 2rem; color: color-mix(in srgb, var(--primary) 35%, var(--border)); }
[data-bs-theme="dark"] .dash-kpi-icon { background: rgba(var(--chart-rgb), .14); color: rgb(var(--chart-rgb)); }
[data-bs-theme="dark"] .dash-kpi-ghost { color: rgba(var(--chart-rgb), .35); }
[data-bs-theme="dark"] .dash-kpi.active {
  border-color: rgba(var(--chart-rgb), .55); background: rgba(var(--chart-rgb), .06);
  box-shadow: 0 0 0 1px rgba(var(--chart-rgb), .3) inset, 0 8px 22px rgba(0,0,0,.25);
}
.dash-sparkline { width: 110px; height: 42px; flex-shrink: 0; }
.dash-delta { display: inline-flex; align-items: center; gap: .2rem; font-weight: 700; font-size: .82rem; margin-top: .4rem; }
.dash-delta.is-good { color: #059669; }
.dash-delta.is-bad  { color: #dc2626; }
.dash-vs { font-size: .72rem; color: var(--muted); }

.dash-grid {
  display: grid; gap: 1rem;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 1.1fr) minmax(0, .95fr) minmax(0, 1.05fr);
  grid-template-areas:
    "trend trend trend side"
    "perf gender docs side"
    "breakdown breakdown breakdown breakdown";
  align-items: start;
}
.dash-area-trend { grid-area: trend; } .dash-area-gender { grid-area: gender; } .dash-area-docs { grid-area: docs; }
.dash-area-side { grid-area: side; } .dash-area-perf { grid-area: perf; } .dash-area-breakdown { grid-area: breakdown; }
.dash-area-trend, .dash-area-gender, .dash-area-docs { height: 100%; }
.dash-area-trend .dash-chart { height: 300px; } /* the headline chart: widest and tallest */
/* Bottom row levels out: perf + breakdown share the row height, and the perf chart grows
   with its card instead of leaving a blank strip. */
.dash-area-perf, .dash-area-breakdown { height: 100%; }
.dash-area-perf > .dash-card-body { flex: 1 1 auto; display: flex; flex-direction: column; }
.dash-area-perf .dash-chart { flex: 1 1 auto; min-height: 210px; }
/* Where the side rail spans rows, it must not set their height (that stretched the middle
   cards): contain:size takes it out of track sizing, it fills the rows the other cards
   define, and its cards scroll inside if they hold more than fits. */
@media (min-width: 768px) {
  .dash-area-side { height: 100%; contain: size; }
  .dash-area-side > .card { min-height: 0; flex: 0 1 auto; }
  .dash-area-side > :last-child { flex: 1 1 0; min-height: 220px; }
  .dash-area-side .card-body, .dash-area-side .dash-card-body { min-height: 0; overflow-y: auto; }
}
.dash-card { border-radius: 16px; overflow: hidden; }
.dash-card-head {
  display: flex; align-items: center; justify-content: space-between; gap: .5rem;
  padding: 1rem 1.15rem .4rem; font-weight: 700; font-size: .9rem;
}
.dash-card-head > span > i:first-child { color: var(--primary); margin-right: .5rem; }
.dash-card-body { padding: .5rem 1.15rem 1.1rem; }
.dash-chart { position: relative; height: 210px; }
.dash-mini-select {
  border: 1px solid var(--border); border-radius: 999px; background: var(--card);
  font-size: .72rem; padding: .25rem 1.6rem .25rem .75rem; color: var(--text-secondary); max-width: 150px;
  appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%236b7280' stroke-width='1.5' fill='none'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right .6rem center;
}
.dash-legend { display: flex; justify-content: flex-end; gap: .8rem; font-size: .7rem; font-weight: 500; color: var(--text-secondary); margin-bottom: .3rem; }
.dash-legend i { display: inline-block; width: 9px; height: 9px; border-radius: 2px; margin-right: .3rem; vertical-align: -1px; }
.dash-insight { display: flex; gap: .75rem; padding: .75rem 0; border-bottom: 1px solid var(--border); }
.dash-insight:last-child { border-bottom: 0; }
.dash-insight-icon { width: 34px; height: 34px; border-radius: 50%; flex-shrink: 0; display: flex; align-items: center; justify-content: center; font-size: .9rem; }
.dash-insight-title { font-weight: 700; font-size: .82rem; color: var(--text); }
.dash-insight-text { font-size: .74rem; color: var(--muted); line-height: 1.45; }
.dash-insight-text strong { color: var(--text-secondary); }
.dash-tabs { display: flex; gap: .2rem; }
.dash-tabs button {
  border: 0; background: transparent; font-size: .74rem; font-weight: 600; color: var(--muted);
  padding: .3rem .6rem; border-bottom: 2px solid transparent;
}
.dash-tabs button.active { color: var(--primary); border-bottom-color: var(--primary); }
.dash-table th { font-size: .72rem; font-weight: 600; color: var(--muted); text-transform: none; letter-spacing: 0; background: var(--surface-hover); }
.dash-table td, .dash-table th { padding: .6rem 1.15rem; }
.dash-table tfoot td { font-weight: 700; background: var(--surface-hover); }
.dash-table th, .dash-table .status-pill, .dash-table .badge { white-space: nowrap; }
/* Enrollment Breakdown: every tab gets the By Grade & Section height (--breakdown-h, set by
   the dashboard script); longer tabs scroll their table inside it under a pinned header. */
#dash-breakdown .dash-card-body[data-tab-panel] { display: flex; flex-direction: column; height: var(--breakdown-h, auto); }
#dash-breakdown .dash-card-body[data-tab-panel] > * { flex: 0 0 auto; }
#dash-breakdown .dash-card-body[data-tab-panel] > .table-responsive { flex: 1 1 auto; min-height: 0; overflow-y: auto; }
#dash-breakdown .table-responsive thead th { position: sticky; top: 0; z-index: 1; }
.dash-bar { flex: 1; max-width: 120px; height: 6px; border-radius: 999px; background: color-mix(in srgb, var(--primary) 10%, var(--border)); overflow: hidden; }
.dash-bar > div { height: 100%; border-radius: 999px; background: var(--primary); }
/* Dark mode: maroon disappears on near-black, so dashboard accents follow the gold chart palette. */
[data-bs-theme="dark"] .dash-bar { background: rgba(var(--chart-rgb), .14); }
[data-bs-theme="dark"] .dash-bar > div { background: rgb(var(--chart-rgb)); }
[data-bs-theme="dark"] .dash-tabs button.active { color: rgb(var(--chart-rgb)); border-bottom-color: rgb(var(--chart-rgb)); }
[data-bs-theme="dark"] .dash-card-head > span > i:first-child { color: rgb(var(--chart-rgb)); }
.dash-footer {
  display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: .5rem;
  margin-top: 2rem; padding-top: 1rem; border-top: 1px solid var(--border);
  font-size: .74rem; color: var(--muted);
}
.dash-footer strong { color: var(--primary); }
.dash-footer em { color: var(--text-secondary); }
.dash-footer-rule { display: inline-block; width: 26px; height: 2px; background: var(--primary); vertical-align: middle; margin-right: .5rem; }

@media (max-width: 1399.98px) {
  .dash-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-areas: "trend trend" "gender side" "docs side" "perf perf" "breakdown breakdown";
  }
}
@media (max-width: 991.98px) {
  .dash-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 767.98px) {
  .dash-grid { grid-template-columns: 1fr; grid-template-areas: "trend" "gender" "docs" "side" "perf" "breakdown"; }
}
@media (max-width: 575.98px) {
  .dash-kpis { grid-template-columns: 1fr; }
  .dash-actions { width: 100%; }
}

/* ── Sidebar overlay (mobile) ─────────────────────────────── */
#sidebar-overlay {
  display: none;
  position: fixed; inset: 0;
  background: rgba(0,0,0,.4); z-index: 1039;
}

/* ── Responsive ───────────────────────────────────────────── */
@media (max-width: 991.98px) {
  #sidebar { transform: translateX(-100%); width: var(--sidebar-w) !important; }
  #sidebar.mobile-open { transform: translateX(0); }
  #topbar { left: 0 !important; }
  #main-content { margin-left: 0 !important; }
}
@media (max-width: 575.98px) {
  #main-content { padding: 1rem; }
  .page-header { padding: 1.25rem 1.35rem; }
}

/* ── Utility ──────────────────────────────────────────────── */
.text-primary  { color: var(--primary) !important; }
.text-muted    { color: var(--muted) !important; }
.fw-semibold   { font-weight: 600; }
.truncate      { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.shadow-sm     { box-shadow: 0 1px 6px rgba(0,0,0,.06); }

/* ── Floating action button (New Announcement shortcut) ──────
   Lives outside #main-content in the layout so AJAX page swaps
   never remove it. */
.fab-announcement {
  position: fixed;
  right: 28px;
  bottom: 28px;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--sidebar-bg);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.4rem;
  box-shadow: 0 6px 18px rgba(0,0,0,.28);
  z-index: 1040;
  transition: transform .15s ease, box-shadow .15s ease;
}
.fab-announcement:hover {
  color: #fff;
  transform: translateY(-2px) scale(1.05);
  box-shadow: 0 8px 22px rgba(0,0,0,.35);
}
@media (max-width: 991.98px) {
  .fab-announcement { right: 18px; bottom: 18px; width: 50px; height: 50px; font-size: 1.2rem; }
}

/* ── KPI dashboard: jump links, section heads, chart cards, status chips ── */
.dash-jump { display: flex; gap: .5rem; flex-wrap: wrap; }
.dash-jump a {
  display: inline-flex; align-items: center; gap: .4rem;
  padding: .35rem .8rem; border-radius: 50px; font-size: .78rem; font-weight: 600;
  color: var(--text-secondary); background: var(--card); border: 1px solid var(--border);
  text-decoration: none; transition: border-color .15s, color .15s, transform .15s;
}
.dash-jump a:hover { color: var(--primary); border-color: var(--primary); transform: translateY(-1px); }
.dash-jump a i { color: var(--primary); font-size: .85rem; }

.kpi-status {
  display: inline-flex; align-items: center; gap: .3rem;
  font-size: .68rem; font-weight: 700; padding: .15rem .55rem; border-radius: 50px; white-space: nowrap;
}
.kpi-status-ok   { background: rgba(16,185,129,.14); color: #047857; }
.kpi-status-warn { background: rgba(245,158,11,.16); color: #b45309; }
.kpi-status-bad  { background: rgba(239,68,68,.14);  color: #b91c1c; }
[data-bs-theme="dark"] .kpi-status-ok   { color: #34d399; }
[data-bs-theme="dark"] .kpi-status-warn { color: #fbbf24; }
[data-bs-theme="dark"] .kpi-status-bad  { color: #f87171; }

.dash-highlights-label { font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); margin-bottom: .5rem; }
.dash-highlights-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: .6rem; }

.dash-section-head { display: flex; align-items: center; gap: .85rem; margin: .5rem 0 .9rem; scroll-margin-top: calc(var(--topbar-h) + 12px); }
.dash-section-icon {
  width: 38px; height: 38px; border-radius: 11px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center; font-size: 1.05rem;
  background: rgba(128,0,0,.10); color: var(--primary);
}
[data-bs-theme="dark"] .dash-section-icon { background: rgba(128,0,0,.25); color: #a52a2a; }
.dash-section-head h5 { margin: 0; font-size: 1.02rem; font-weight: 700; color: var(--text); }
.dash-section-head p { margin: 0; font-size: .78rem; color: var(--muted); }

.chart-card { padding: 1.1rem 1.25rem; }
.chart-card-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; margin-bottom: .9rem; }
.chart-card-title { font-size: .92rem; font-weight: 700; color: var(--text); }
.chart-card-sub { font-size: .74rem; color: var(--muted); margin-top: .1rem; }
.chart-card-figure { text-align: right; flex-shrink: 0; }
.chart-figure-value { font-size: 1.5rem; font-weight: 700; line-height: 1.1; color: var(--text); }
.chart-card-figure .stat-tile-delta-row { justify-content: flex-end; margin-top: .3rem; }
.chart-wrap { position: relative; height: 250px; }
.chart-empty {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .4rem;
  height: 180px; color: var(--muted); font-size: .8rem;
}
.chart-empty i { font-size: 1.6rem; opacity: .6; }
.chart-empty.d-none { display: none !important; }
.chart-card-note { margin-top: .75rem; padding-top: .6rem; border-top: 1px solid var(--border); font-size: .72rem; display: flex; gap: .6rem; flex-wrap: wrap; align-items: center; }
.target-key { display: inline-flex; align-items: center; gap: .4rem; color: var(--text-secondary); font-weight: 600; }
.target-key i { display: inline-block; width: 18px; border-top: 2px dashed var(--muted); }
a.stat-tile.dashboard-card-link .stat-tile-name { color: var(--text-secondary); }

[data-bs-theme="dark"] .table-light, [data-bs-theme="dark"] .table-light > * { --bs-table-bg: var(--surface-hover); --bs-table-color: var(--text); background: var(--surface-hover) !important; color: var(--text) !important; }

/* Compact, modern chart cards (overrides the first pass above) */
.chart-card { padding: .9rem 1rem; border-radius: 16px; transition: box-shadow .2s, border-color .2s; }
.chart-card:hover { border-color: rgba(128,0,0,.3); box-shadow: 0 6px 20px rgba(0,0,0,.07); }
[data-bs-theme="dark"] .chart-card:hover { border-color: rgba(239,68,68,.35); box-shadow: 0 0 18px rgba(220,38,38,.12); }
.chart-card-head { margin-bottom: .5rem; }
.chart-card-title { font-size: .84rem; }
.chart-card-sub { font-size: .7rem; }
.chart-figure-value { font-size: 1.2rem; }
.chart-wrap { height: 165px; }
.chart-empty { height: 110px; }
.chart-card-note { margin-top: .5rem; padding-top: .45rem; font-size: .68rem; }
.dash-section-head { margin: .25rem 0 .7rem; }
.dash-section-icon { width: 32px; height: 32px; font-size: .95rem; border-radius: 10px; }
.dash-section-head h5 { font-size: .95rem; }
.dash-section-head p { font-size: .72rem; }

/* ── Document Management: task folders ─────────────────────── */
.doc-folder-card { transition: border-color .15s, box-shadow .15s, transform .15s; }
.doc-folder-card:hover { border-color: var(--primary); box-shadow: 0 6px 20px rgba(0,0,0,.07); transform: translateY(-1px); }
.doc-folder-card .min-w-0 { min-width: 0; }
.doc-folder-icon { font-size: 1.75rem; line-height: 1; color: rgb(var(--chart-rgb)); flex-shrink: 0; }
/* MPS: row-per-section entry table + mastery coloring (75% = DepEd mastery level). */
.mps-row-table .mps-grade-row td {
  background: var(--surface-hover); font-weight: 700; font-size: .78rem;
  text-transform: uppercase; letter-spacing: .04em; color: var(--primary); padding: .45rem 1rem;
}
.mps-row-table .mps-input.mps-good { border-color: #6ee7b7; background: #ecfdf5; }
.mps-row-table .mps-input.mps-mid  { border-color: #fcd34d; background: #fffbeb; }
.mps-row-table .mps-input.mps-low  { border-color: #fca5a5; background: #fef2f2; }
.mps-avg { display: inline-block; min-width: 72px; padding: .2rem .5rem; border-radius: 999px; font-weight: 700; font-size: .8rem; }
.mps-avg.mps-good, .mps-pill.mps-good { background: #d1fae5; color: #065f46; }
.mps-avg.mps-mid,  .mps-pill.mps-mid  { background: #fef3c7; color: #92400e; }
.mps-avg.mps-low,  .mps-pill.mps-low  { background: #fee2e2; color: #991b1b; }
.mps-pill { display: inline-block; min-width: 56px; padding: .1rem .45rem; border-radius: 999px; font-weight: 600; font-size: .75rem; text-align: center; }
.mps-legend { display: inline-block; width: 10px; height: 10px; border-radius: 3px; vertical-align: middle; margin-right: .2rem; }
.mps-legend.mps-good { background: #10b981; } .mps-legend.mps-mid { background: #f59e0b; } .mps-legend.mps-low { background: #ef4444; }

/* Plain (non-task) folders read as containers: warmer amber folder. */
.doc-folder-icon-plain { color: #d97706; }

/* Explorer: card options menu sits above the card's stretched link. */
.doc-folder-menu { position: absolute; top: .4rem; right: .3rem; z-index: 3; }
.doc-folder-card[draggable="true"] { cursor: grab; }
.doc-folder-card.dragging, .doc-task-section.dragging { opacity: .45; transform: scale(.99); }
.doc-task-section[draggable="true"] > .card-header { cursor: grab; }
body.doc-dragging .doc-task-section:not(.dragging) { opacity: .6; }
.doc-folder-card.drop-hover {
  border: 2px dashed var(--primary); background: rgba(128,0,0,.06);
  box-shadow: 0 0 0 4px rgba(128,0,0,.08); transform: translateY(-2px);
}
.doc-folder-card.drop-hover .doc-folder-icon-plain { transform: scale(1.15); }
.doc-folder-icon-plain { transition: transform .15s; }
/* Paper-folder icons (shared with Templates): flap lifts on hover, opens while a folder is dragged over */
.doc-folder-card:hover:not(.drop-hover) .tpl-folder .tpl-folder-front,
.doc-task-section > .card-header:hover .tpl-folder .tpl-folder-front { transform: rotateX(-22deg); }
.doc-folder-card:hover:not(.drop-hover) .tpl-folder .tpl-folder-paper,
.doc-task-section > .card-header:hover .tpl-folder .tpl-folder-paper { transform: translateY(-14%); }
.doc-folder-card.drop-hover .tpl-folder .tpl-folder-front { transform: rotateX(-52deg); background: #f8fafc; }
.doc-folder-card.drop-hover .tpl-folder .tpl-folder-paper { transform: translateY(-34%); }
.doc-folder-card.drop-hover .tpl-folder .tpl-folder-paper-2 { transform: translateY(-48%) rotate(6deg); }
.doc-folder-card.drop-hover .tpl-folder { animation: tplFolderWiggle .9s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) { .doc-folder-card .tpl-folder > span, .doc-task-section .tpl-folder > span { transform: none !important; } }

/* Breadcrumb in the page header; crumbs are drop targets while dragging. */
.doc-breadcrumb { display: flex; flex-wrap: wrap; align-items: center; gap: .25rem; font-size: .8rem; position: relative; z-index: 1; }
.doc-breadcrumb .doc-crumb { color: #fff; opacity: .85; text-decoration: none; padding: .1rem .45rem; border-radius: 6px; border: 1px dashed transparent; transition: background .15s; }
.doc-breadcrumb a.doc-crumb:hover { opacity: 1; background: rgba(255,255,255,.12); }
.doc-breadcrumb .doc-crumb-current { opacity: 1; font-weight: 600; }
.doc-breadcrumb .doc-crumb-sep { color: #fff; opacity: .5; font-size: .65rem; }
body.doc-dragging .doc-breadcrumb a.doc-crumb { border-color: rgba(255,255,255,.35); }
.doc-breadcrumb .doc-crumb.drop-hover { opacity: 1; background: rgba(255,255,255,.25); border-color: #fff; }

/* Move to… picker */
.doc-move-list { max-height: 320px; overflow-y: auto; }
.doc-move-list .list-group-item.active { background: var(--primary); border-color: var(--primary); }
.doc-move-list .list-group-item.active i { color: #fff !important; }

/* ── Person card: clickable names (personLink()) + their modal ── */
.person-link { color: inherit; text-decoration: none; cursor: pointer; }
.person-link:hover, .person-link:focus { color: inherit; text-decoration: underline; }
#personInfoModal { z-index: 1070; } /* above a page modal it may be opened from (e.g. task details) */
.person-card-avatar {
  width: 48px; height: 48px; border-radius: 50%; flex-shrink: 0; overflow: hidden;
  display: flex; align-items: center; justify-content: center;
  background: var(--primary); color: #fff; font-weight: 700; font-size: 1.1rem;
}
.person-card-avatar img { width: 100%; height: 100%; object-fit: cover; }
.person-chip {
  display: inline-block; font-size: .78rem; padding: .2rem .55rem; margin: 0 .3rem .35rem 0;
  border-radius: 999px; background: rgba(128, 0, 0, .08); color: var(--primary);
}
[data-bs-theme="dark"] .person-chip { background: rgba(255, 255, 255, .08); color: var(--text); }

/* ── Required / optional markers on form labels (applyRequiredMarkers()) ── */
.req-mark-required { color: #dc2626; font-weight: 700; }
.req-mark-optional { color: var(--muted); font-weight: 400; font-size: .85em; }

/* ── Dark mode: readable highlights & accents ─────────────────
   #800000 text on the near-black dark surfaces is barely legible, and the
   light-mode pastel alerts/badges glare — swap both for dark-friendly tones. */
[data-bs-theme="dark"] .notif-btn:hover,
[data-bs-theme="dark"] .maroon-dp-nav,
[data-bs-theme="dark"] .maroon-dp-grid button:hover:not(:disabled),
[data-bs-theme="dark"] .maroon-dp-grid button.is-today,
[data-bs-theme="dark"] .maroon-select-option.is-selected,
[data-bs-theme="dark"] .nav-tabs .nav-link:hover,
[data-bs-theme="dark"] .nav-tabs .nav-link.active,
[data-bs-theme="dark"] .tab-pill.active,
[data-bs-theme="dark"] .btn-outline-primary,
[data-bs-theme="dark"] .btn-outline-maroon,
[data-bs-theme="dark"] .chat-reaction-pill.mine,
[data-bs-theme="dark"] .chat-reply-quote-name,
[data-bs-theme="dark"] .section-toggle-btn:hover .section-toggle-arrow,
[data-bs-theme="dark"] .dash-jump a:hover,
[data-bs-theme="dark"] .dash-jump a i { color: var(--highlight-tx); }
[data-bs-theme="dark"] .text-primary { color: var(--highlight-tx) !important; }
[data-bs-theme="dark"] .btn-outline-primary,
[data-bs-theme="dark"] .btn-outline-maroon { border-color: var(--primary-light); }
[data-bs-theme="dark"] .btn-outline-primary:hover,
[data-bs-theme="dark"] .btn-outline-maroon:hover { color: #fff; background: var(--primary); }
[data-bs-theme="dark"] .maroon-select-option.is-selected,
[data-bs-theme="dark"] .maroon-dp-grid button:hover:not(:disabled) { background: var(--highlight-bg); }
[data-bs-theme="dark"] .maroon-select-option.is-selected:hover { color: #fff; }
[data-bs-theme="dark"] .nav-tabs .nav-link.active { border-bottom-color: var(--primary-light); }
[data-bs-theme="dark"] .tab-pill.active { background: var(--highlight-bg); }

[data-bs-theme="dark"] .alert-success { background: rgba(16,185,129,.12); color: #6ee7b7; }
[data-bs-theme="dark"] .alert-danger  { background: rgba(239,68,68,.12);  color: #fca5a5; }
[data-bs-theme="dark"] .alert-warning { background: rgba(245,158,11,.12); color: #fcd34d; }
[data-bs-theme="dark"] .alert-info    { background: var(--highlight-bg); color: var(--highlight-tx); border-left-color: var(--primary-light); }
[data-bs-theme="dark"] .form-check-input:checked { background-color: var(--primary-light); border-color: var(--primary-light); }
[data-bs-theme="dark"] .link-maroon { color: var(--highlight-tx); }
[data-bs-theme="dark"] .badge-pending,
[data-bs-theme="dark"] .badge-in-progress { background: rgba(245,158,11,.16); color: #fcd34d; border-color: rgba(245,158,11,.3); }
[data-bs-theme="dark"] .cond-serviceable  { background: rgba(16,185,129,.16); color: #6ee7b7; border-color: rgba(16,185,129,.3); }
[data-bs-theme="dark"] .badge-returned,
[data-bs-theme="dark"] .cond-non-serviceable { background: rgba(239,68,68,.16);  color: #fca5a5; border-color: rgba(239,68,68,.3); }
[data-bs-theme="dark"] .chat-convo-delete-btn:hover { background: rgba(239,68,68,.16); color: #f87171; }

/* ── Submission timing pills (submissionTimingBadge()) ── */
.timing-badge { display: inline-flex; align-items: center; font-size: .68rem; font-weight: 600; padding: .15rem .5rem; border-radius: 999px; white-space: nowrap; }
.timing-ontime { background: #d1fae5; color: #065f46; }
.timing-late   { background: #fee2e2; color: #991b1b; }
[data-bs-theme="dark"] .timing-ontime { background: rgba(16,185,129,.16); color: #6ee7b7; }
[data-bs-theme="dark"] .timing-late   { background: rgba(239,68,68,.16);  color: #fca5a5; }

/* Time Records: live clock — equal-width digits and room for "12:59:59 PM" so the badge doesn't jitter each second */
#dtrLiveClock { display: inline-block; min-width: 11ch; font-variant-numeric: tabular-nums; text-align: left; }

/* Time in / time out chips: green "arriving", blue "leaving" — readable at a glance */
.time-chip { display: inline-flex; align-items: center; gap: .3rem; font-size: .78rem; font-weight: 600; padding: .2rem .55rem; border-radius: 999px; white-space: nowrap; font-variant-numeric: tabular-nums; border: 1px solid transparent; }
.time-chip-in  { background: #dcfce7; color: #166534; border-color: #bbf7d0; }
.time-chip-out { background: #dbeafe; color: #1e40af; border-color: #bfdbfe; }
[data-bs-theme="dark"] .time-chip-in  { background: rgba(34,197,94,.15);  color: #86efac; border-color: rgba(34,197,94,.3); }
[data-bs-theme="dark"] .time-chip-out { background: rgba(59,130,246,.15); color: #93c5fd; border-color: rgba(59,130,246,.3); }
@media print {
  .time-chip { border-color: currentColor; }
}

/* Attendance report: summary tiles, and a clean printout (no app chrome or filters) */
.report-stat { border: 1px solid var(--border, #e5e7eb); border-radius: 10px; padding: .6rem .75rem; height: 100%; }
.report-stat .k { font-size: .72rem; color: var(--muted, #6b7280); margin-bottom: .25rem; }
.report-stat .v { font-size: 1.35rem; font-weight: 700; font-variant-numeric: tabular-nums; }
@media print {
  #sidebar, #topbar, .print-hide { display: none !important; }
  #main-content { margin: 0 !important; padding: 0 !important; }
  .card { box-shadow: none !important; break-inside: avoid; }
  #report-table tr { break-inside: avoid; }
}

/* Time Records: biometric scanner connection pill */
.scanner-status { display: inline-flex; align-items: center; font-size: .75rem; font-weight: 600; padding: .3rem .7rem; border-radius: 999px; white-space: nowrap; }
.scanner-status.is-up   { background: #d1fae5; color: #065f46; }
.scanner-status.is-down { background: #fee2e2; color: #991b1b; }
.scanner-status.is-remote { background: var(--surface-hover); color: var(--text-secondary); }
[data-bs-theme="dark"] .scanner-status.is-up   { background: rgba(16,185,129,.16); color: #6ee7b7; }
[data-bs-theme="dark"] .scanner-status.is-down { background: rgba(239,68,68,.16);  color: #fca5a5; }
.annot-badge { background: var(--highlight-bg); color: var(--highlight-tx); }
.annot-badge:hover { text-decoration: underline !important; color: var(--highlight-tx); }

/* ── Dashboard banner actions: 2×2 grid (enrollment / KPI, report / year) ── */
.dash-header-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .5rem; position: relative; z-index: 1; }
.dash-header-actions > .btn { width: 100%; white-space: nowrap; }
.dash-header-year { display: flex; align-items: center; gap: .5rem; }
.dash-header-year .maroon-select { flex: 1; min-width: 0; }
@media (max-width: 400px) { .dash-header-actions { grid-template-columns: 1fr; } }

/* ── Performance by Learning Area: clickable subject rows (open the subject detail modal) ── */
.perf-subject-row { cursor: pointer; }
.perf-subject-row:hover td, .perf-subject-row:focus-visible td { background: var(--highlight-bg); }
.perf-subject-row:hover .bi-chevron-right { color: var(--primary); }
.perf-subject-row:focus-visible { outline: 2px solid var(--primary); outline-offset: -2px; }
/* A person card opened from inside the subject modal sits above it. */
#personInfoModal { z-index: 1065; }
.modal-backdrop ~ .modal-backdrop { z-index: 1060; }

/* ── Dashboard year-range modal options ── */
.year-range-option {
  display: flex; align-items: flex-start; gap: .75rem; padding: .75rem .9rem; margin: 0;
  border: 1px solid var(--border); border-radius: 10px; cursor: pointer; transition: border-color .15s, background .15s;
}
.year-range-option:hover { border-color: var(--primary); }
.year-range-option:has(input[type=radio]:checked) { border-color: var(--primary); background: var(--highlight-bg); }
.year-range-option input[type=radio] { margin-top: .2rem !important; flex-shrink: 0; }

/* ── Dashboard "Generate Report" modal: section checklist ── */
.report-section-list { display: grid; grid-template-columns: 1fr; gap: .35rem; }
.report-section-option {
  display: flex; align-items: center; gap: .6rem; margin: 0; padding: .5rem .75rem;
  border: 1px solid var(--border); border-radius: 8px; cursor: pointer; font-size: .85rem; transition: border-color .15s, background .15s;
}
.report-section-option:hover { border-color: var(--primary); }
.report-section-option:has(input:checked) { border-color: var(--primary); background: var(--highlight-bg); }
.report-section-option .report-section-nodata { display: none; margin-left: auto; font-size: .72rem; color: var(--muted); font-style: italic; white-space: nowrap; }
.report-section-option.is-disabled { opacity: .55; cursor: not-allowed; }
.report-section-option.is-disabled:hover { border-color: var(--border); }
.report-section-option.is-disabled .report-section-nodata { display: inline; }

/* ── Announcement photo: card thumbnail, upload preview ── */
.announcement-card .ac-thumb { width: 56px; height: 56px; border-radius: 10px; object-fit: cover; border: 1px solid var(--border); }
.ann-photo-preview { position: relative; margin-top: .5rem; border-radius: 10px; overflow: hidden; border: 1px solid var(--border); }
.ann-photo-preview img { display: block; width: 100%; max-height: 180px; object-fit: cover; }
.ann-photo-preview .btn { position: absolute; top: .4rem; right: .4rem; border-radius: 50%; width: 30px; height: 30px; padding: 0; }

/* ── Announcement view modal (banner + body + "I Understand") ── */
.ann-view { border: 0; border-radius: 14px; overflow: hidden; }
.ann-view-banner { position: relative; height: 220px; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.ann-view-banner img { width: 100%; height: 100%; object-fit: cover; }
.ann-view-icon { position: relative; width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; }
.ann-view-icon-circle {
  width: 104px; height: 104px; border-radius: 50%; background: #fff;
  display: flex; align-items: center; justify-content: center; font-size: 2.8rem;
  box-shadow: 0 10px 30px rgba(0,0,0,.18);
}
.ann-dot { position: absolute; border-radius: 50%; background: rgba(255,255,255,.85); }
.ann-dot-1 { width: 16px; height: 16px; left: 14%; top: 66%; }
.ann-dot-2 { width: 10px; height: 10px; left: 27%; top: 30%; background: rgba(255,255,255,.6); }
.ann-dot-3 { width: 20px; height: 20px; right: 15%; top: 24%; }
.ann-view-body { padding: 1.5rem 1.75rem .5rem; }
.ann-view-title { font-weight: 700; font-size: 1.35rem; margin: 0 0 .5rem; color: var(--text); }
.ann-view-meta { display: flex; flex-wrap: wrap; gap: .35rem 1rem; font-size: .8rem; color: var(--muted); margin-bottom: 1rem; }
.ann-view-content { font-size: .92rem; line-height: 1.65; color: var(--text-secondary); white-space: normal; max-height: 45vh; overflow-y: auto; }
.ann-view-footer { display: flex; justify-content: space-between; align-items: center; gap: .75rem; flex-wrap: wrap; padding: 1rem 1.75rem 1.5rem; }
.ann-view-ok { min-width: 160px; padding: .6rem 1.4rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; border-radius: 6px; box-shadow: 0 2px 6px rgba(128,0,0,.25); }
@media (max-width: 575px) {
  .ann-view-banner { height: 170px; }
  .ann-view-body { padding: 1.25rem 1.25rem .5rem; }
  .ann-view-footer { padding: 1rem 1.25rem 1.25rem; }
  .ann-view-ok { width: 100%; }
}
.ann-view-share { font-weight: 600; }
.ann-view-banner img { cursor: zoom-in; }
.ann-view-expand {
  position: absolute; right: .75rem; bottom: .75rem; z-index: 2; border: 0; border-radius: 999px;
  padding: .3rem .75rem; font-size: .75rem; font-weight: 600; color: #fff; background: rgba(0,0,0,.6);
}
.ann-view-expand:hover { background: rgba(0,0,0,.75); }
@media (max-width: 575px) { .ann-view-share { width: 100%; } }

/* Full-size announcement photo: real size, or scaled down to fit the screen */
.ann-lightbox {
  position: fixed; inset: 0; z-index: 2000; background: rgba(0,0,0,.88);
  display: flex; align-items: center; justify-content: center; padding: 3.5rem 1rem 1rem; cursor: zoom-out;
}
.ann-lightbox img { max-width: 100%; max-height: 100%; object-fit: contain; border-radius: 6px; box-shadow: 0 10px 40px rgba(0,0,0,.5); cursor: default; }
.ann-lightbox-bar { position: absolute; top: .75rem; right: 1rem; display: flex; gap: .5rem; }
.ann-lightbox-bar a, .ann-lightbox-bar button {
  border: 0; border-radius: 999px; padding: .35rem .85rem; font-size: .8rem; font-weight: 600;
  color: #fff; background: rgba(255,255,255,.16); text-decoration: none; cursor: pointer;
}
.ann-lightbox-bar a:hover, .ann-lightbox-bar button:hover { background: rgba(255,255,255,.28); color: #fff; }

/* Share-to-chat picker */
.share-ann-preview { display: flex; align-items: center; gap: .5rem; padding: .6rem .8rem; border-radius: 8px; background: var(--highlight-bg); color: var(--highlight-tx); font-size: .85rem; }
.share-target-list { max-height: 300px; overflow-y: auto; border: 1px solid var(--border); border-radius: 10px; padding: .25rem; }
.share-section-label { font-size: .68rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); padding: .5rem .6rem .25rem; }
.share-target { display: flex; align-items: center; gap: .6rem; margin: 0; padding: .45rem .6rem; border-radius: 8px; cursor: pointer; font-size: .85rem; }
.share-target:hover { background: var(--surface-hover); }
.share-target:has(input:checked) { background: var(--highlight-bg); }
.share-avatar { width: 30px; height: 30px; border-radius: 50%; flex-shrink: 0; display: flex; align-items: center; justify-content: center; font-size: .75rem; font-weight: 700; background: var(--surface-hover); color: var(--text-secondary); }
.share-avatar-group { background: var(--highlight-bg); color: var(--highlight-tx); }

/* Shared announcement card inside a chat bubble */
.chat-ann-card { display: block; margin-top: .1rem; border-radius: 10px; overflow: hidden; background: var(--card); border: 1px solid var(--border); color: var(--text); text-decoration: none; max-width: 260px; }
.chat-ann-card:hover { color: var(--text); box-shadow: 0 4px 14px rgba(0,0,0,.12); }
.chat-ann-card img { display: block; width: 100%; height: 120px; object-fit: cover; }
.chat-ann-card .chat-ann-banner { height: 70px; display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, #800000, #a52a2a); color: #fff; font-size: 1.6rem; }
.chat-ann-card .chat-ann-body { padding: .55rem .7rem .65rem; }
.chat-ann-card .chat-ann-kicker { font-size: .65rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--primary); }
.chat-ann-card .chat-ann-title { font-weight: 700; font-size: .85rem; line-height: 1.3; margin: .1rem 0 .2rem; }
.chat-ann-card .chat-ann-excerpt { font-size: .75rem; color: var(--muted); line-height: 1.4; }
.chat-ann-card .chat-ann-cta { font-size: .72rem; font-weight: 600; color: var(--primary); margin-top: .35rem; }
[data-bs-theme="dark"] .chat-ann-card .chat-ann-kicker,
[data-bs-theme="dark"] .chat-ann-card .chat-ann-cta { color: var(--highlight-tx); }

/* ── Logout prompt (SweetAlert2, see confirmLogout in footer.php) ──
   Scoped under .swal2-popup.logout-swal so it outranks the stylesheet
   SweetAlert injects after this one. */
.swal2-popup.logout-swal {
  width: 26rem; max-width: calc(100vw - 32px); padding: 2rem 2rem 1.75rem;
  border-radius: 16px; background: var(--card); box-shadow: 0 24px 60px rgba(0,0,0,.18);
}
.swal2-popup.logout-swal .logout-swal-icon {
  width: 72px; height: 72px; margin: .25rem auto 1.1rem; border: 0; border-radius: 50%;
  background: color-mix(in srgb, var(--primary) 12%, var(--card)); color: var(--primary);
  animation: none;
}
.swal2-popup.logout-swal .logout-swal-icon .swal2-icon-content { font-size: 2rem; animation: none; }
.swal2-popup.logout-swal .logout-swal-title { padding: 0; font-size: 1.6rem; font-weight: 800; color: var(--text); }
.swal2-popup.logout-swal .logout-swal-text { margin: .6rem 0 0; padding: 0; font-size: .95rem; color: var(--muted); }
.swal2-popup.logout-swal .logout-swal-actions { width: 100%; margin: 1.75rem 0 0; gap: .75rem; flex-wrap: nowrap; }
.swal2-popup.logout-swal .logout-swal-actions button {
  flex: 1; margin: 0; padding: .7rem 1rem; border-radius: 10px;
  font-weight: 700; font-size: .95rem; transition: background .15s, border-color .15s;
}
.swal2-popup.logout-swal .logout-swal-cancel { background: var(--card); color: var(--text); border: 1.5px solid var(--input-border, var(--border)); }
.swal2-popup.logout-swal .logout-swal-cancel:hover { background: var(--surface-hover); }
.swal2-popup.logout-swal .logout-swal-confirm { background: var(--primary); color: #fff; border: 1.5px solid var(--primary); }
.swal2-popup.logout-swal .logout-swal-confirm:hover { background: var(--primary-dark); border-color: var(--primary-dark); }
.swal2-popup.logout-swal .logout-swal-actions button:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; box-shadow: none; }
[data-bs-theme="dark"] .swal2-popup.logout-swal { box-shadow: 0 24px 60px rgba(0,0,0,.55); border: 1px solid var(--border); }
[data-bs-theme="dark"] .swal2-popup.logout-swal .logout-swal-icon { color: var(--highlight-tx); background: var(--highlight-bg); }

/* ── About the Developers modal (login page) ── */
.dev-modal-dialog { max-width: 36rem; }
.dev-modal { border: 0; border-radius: 16px; overflow: hidden; background: var(--card); box-shadow: 0 30px 70px rgba(0,0,0,.25); }
.dev-modal-head {
  position: relative; display: flex; align-items: center; gap: 1.1rem; padding: 1.5rem 1.75rem;
  color: #fff; overflow: hidden;
  background: linear-gradient(135deg, #8a1428 0%, #6e0f20 55%, #560b18 100%);
}
/* faint diagonal sheen across the banner */
.dev-modal-head::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(115deg, transparent 62%, rgba(255,255,255,.05) 62%, rgba(255,255,255,.05) 80%, transparent 80%);
}
.dev-modal-badge {
  width: 54px; height: 54px; flex-shrink: 0; border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,.1); font-size: 1.6rem;
}
.dev-modal-heading { flex: 1; min-width: 0; padding-left: 1.1rem; border-left: 1px solid rgba(255,255,255,.25); }
.dev-modal-title { margin: 0; font-size: 1.5rem; font-weight: 800; letter-spacing: -.01em; color: #fff; }
.dev-modal-sub { margin: .2rem 0 0; font-size: .9rem; color: rgba(255,255,255,.75); }
.dev-modal-head .btn-close { position: relative; z-index: 1; align-self: flex-start; opacity: .9; }
.dev-modal-head .btn-close:hover { opacity: 1; }
.dev-modal-body { padding: .35rem 1.75rem; }
.dev-row { display: flex; align-items: center; gap: 1.25rem; padding: 1.15rem 0; border-bottom: 1px solid var(--border); }
.dev-row:last-child { border-bottom: 0; }
.dev-row > .min-w-0 { min-width: 0; }
.dev-avatar {
  width: 76px; height: 76px; flex-shrink: 0; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: color-mix(in srgb, var(--primary) 9%, var(--card)); color: var(--primary); font-size: 2.3rem;
}
.dev-name { font-size: 1.15rem; font-weight: 800; color: var(--text); line-height: 1.25; }
.dev-role {
  display: inline-block; margin: .4rem 0 .5rem; padding: .2rem .75rem; border-radius: 999px;
  background: var(--surface-hover); color: var(--text-secondary); font-size: .8rem; font-weight: 500;
}
.dev-email { display: flex; align-items: center; gap: .5rem; color: var(--primary); font-size: .88rem; font-weight: 500; text-decoration: none; overflow-wrap: anywhere; }
.dev-email:hover { text-decoration: underline; color: var(--primary); }
.dev-modal-foot {
  display: flex; align-items: center; justify-content: center; gap: 1rem; padding: 1rem 1.5rem;
  background: var(--surface-hover); color: var(--text-secondary); font-size: .8rem; text-align: center;
}
.dev-modal-foot > i { font-size: 1.6rem; color: var(--primary); padding-right: 1rem; border-right: 1px solid var(--border); }
.dev-modal-stack { margin-top: .2rem; font-size: .74rem; color: var(--muted); }
[data-bs-theme="dark"] .dev-avatar { background: var(--highlight-bg); color: var(--highlight-tx); }
[data-bs-theme="dark"] .dev-email,
[data-bs-theme="dark"] .dev-email:hover,
[data-bs-theme="dark"] .dev-modal-foot > i { color: var(--highlight-tx); }
@media (max-width: 575.98px) {
  .dev-modal-head { padding: 1.15rem 1.15rem; gap: .8rem; }
  .dev-modal-badge { width: 44px; height: 44px; font-size: 1.3rem; }
  .dev-modal-heading { padding-left: .8rem; }
  .dev-modal-title { font-size: 1.2rem; }
  .dev-modal-body { padding: .25rem 1.15rem; }
  .dev-avatar { width: 56px; height: 56px; font-size: 1.7rem; }
  .dev-row { gap: .9rem; }
}

/* ── Teacher dashboard (td-*) ─────────────────────────────── */
.td-hero {
  position: relative; overflow: hidden; display: flex; align-items: center; gap: 1rem;
  padding: 1.35rem 1.6rem; margin-bottom: 1rem; border-radius: 16px; color: #fff;
  background: linear-gradient(135deg, #8a1428 0%, #6e0f20 55%, #560b18 100%);
  box-shadow: 0 8px 24px rgba(92,10,10,.18);
}
.td-hero::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(115deg, transparent 58%, rgba(255,255,255,.05) 58%, rgba(255,255,255,.05) 78%, transparent 78%);
}
.td-hero-icon {
  width: 52px; height: 52px; flex-shrink: 0; border-radius: 12px; font-size: 1.45rem;
  display: flex; align-items: center; justify-content: center; background: rgba(255,255,255,.12);
}
.td-hero-text { flex: 1; min-width: 0; position: relative; z-index: 1; }
.td-hero-text h4 { margin: 0 0 .25rem; font-size: 1.45rem; font-weight: 800; letter-spacing: -.01em; }
.td-hero-text p { margin: 0; font-size: .85rem; opacity: .85; }
.td-hero-date {
  position: relative; z-index: 1; flex-shrink: 0; display: flex; align-items: center; gap: .65rem;
  padding: .55rem .8rem; border-radius: 12px; color: #fff; text-decoration: none; font-size: .82rem; font-weight: 600;
  background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.18); transition: background .15s;
}
.td-hero-date:hover { color: #fff; background: rgba(255,255,255,.16); }
.td-hero-date > i:first-child { font-size: 1.15rem; }
.td-hero-date small { display: block; font-size: .68rem; font-weight: 500; opacity: .8; }
.td-hero-date-arrow { opacity: .8; }
[data-bs-theme="dark"] .td-hero {
  background: linear-gradient(135deg, #1a0a0b 0%, #110809 100%);
  border: 2px solid #800000; box-shadow: 0 0 22px var(--dark-glow), inset 0 0 30px rgba(128,0,0,.12);
}

.td-grid { gap: 1rem; }
.td-grid .min-w-0 { min-width: 0; }
.td-main, .td-rail { display: flex; flex-direction: column; gap: 1rem; min-width: 0; }

.td-card {
  display: block; background: var(--card); border: 1px solid var(--border); border-radius: 16px;
  padding: 1.1rem 1.2rem; box-shadow: 0 1px 6px rgba(0,0,0,.05); color: inherit; text-decoration: none;
  overflow: hidden;
}
a.td-card { transition: transform .15s, box-shadow .15s; }
a.td-card:hover { color: inherit; transform: translateY(-1px); box-shadow: 0 6px 18px rgba(0,0,0,.09); }
.td-card-head { display: flex; justify-content: space-between; align-items: center; padding: 1rem 1.2rem; }
.td-card-title { display: inline-flex; align-items: center; font-weight: 700; font-size: .92rem; color: var(--text); }
.td-card-title > i:first-child { margin-right: .55rem; font-size: 1rem; color: var(--primary); }
.td-accent { color: var(--primary); }
.td-link { font-size: .78rem; font-weight: 600; color: var(--primary); text-decoration: none; }
.td-link:hover { text-decoration: underline; color: var(--primary); }
.td-btn { border-radius: 8px; font-weight: 600; padding: .35rem .8rem; }
.td-label { font-size: .68rem; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--muted); margin-bottom: .3rem; }
.td-icon {
  width: 34px; height: 34px; flex-shrink: 0; border-radius: 9px; font-size: 1rem;
  display: flex; align-items: center; justify-content: center;
  background: color-mix(in srgb, var(--primary) 10%, var(--card)); color: var(--primary);
}

.td-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; }
.td-kpi {
  position: relative; display: block; padding: 1rem 1.1rem; border-radius: 14px; color: inherit; text-decoration: none;
  background: var(--card); border: 1px solid var(--border); box-shadow: 0 1px 6px rgba(0,0,0,.05);
  transition: transform .15s, box-shadow .15s;
}
.td-kpi:hover { color: inherit; transform: translateY(-1px); box-shadow: 0 6px 18px rgba(0,0,0,.09); }
.td-kpi-top { display: flex; align-items: center; gap: .65rem; font-size: .8rem; font-weight: 600; color: var(--text); margin-bottom: .9rem; }
.td-kpi-value { font-size: 1.6rem; font-weight: 800; line-height: 1; color: var(--text); }
.td-kpi-caption { font-size: .72rem; color: var(--muted); margin-top: .3rem; }
.td-kpi-arrow { position: absolute; right: 1rem; top: 50%; transform: translateY(-50%); color: var(--muted); }

.td-progress { flex: 1; height: 10px; border-radius: 999px; overflow: hidden; background: color-mix(in srgb, var(--primary) 10%, var(--border)); }
.td-progress > div { height: 100%; border-radius: 999px; background: var(--primary); }
.td-progress-pct { font-size: .85rem; color: var(--text); min-width: 2.6rem; text-align: right; }

.td-table th {
  font-size: .68rem; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--muted);
  background: var(--surface-hover); white-space: nowrap;
}
.td-table td, .td-table th { padding: .7rem 1.2rem; font-size: .84rem; }
.td-table tbody tr:last-child td { border-bottom: 0; }

.td-mps-summary {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 0 1.2rem 1rem;
  border: 1px solid var(--border); border-radius: 12px; text-align: center;
}
.td-mps-summary > div { padding: .8rem .75rem; }
.td-mps-summary > div + div { border-left: 1px solid var(--border); }

.td-insight { display: flex; align-items: flex-start; gap: .7rem; padding: .8rem .9rem; border-radius: 12px; font-size: .84rem; }
.td-insight > i { font-size: 1.2rem; line-height: 1.2; flex-shrink: 0; }
.td-insight.is-success { background: rgba(22,163,74,.09); } .td-insight.is-success > i { color: #16a34a; }
.td-insight.is-warning { background: rgba(217,119,6,.10); } .td-insight.is-warning > i { color: #d97706; }
.td-insight.is-danger  { background: rgba(220,38,38,.08); } .td-insight.is-danger  > i { color: #dc2626; }
.td-insight.is-info    { background: rgba(var(--chart-rgb), .08); } .td-insight.is-info > i { color: rgb(var(--chart-rgb)); }

.td-list-item {
  display: flex; align-items: center; gap: .75rem; padding: .7rem .85rem; border-radius: 12px;
  border: 1px solid var(--border); background: var(--surface-hover); color: inherit; text-decoration: none;
  transition: border-color .15s;
}
a.td-list-item:hover { color: inherit; border-color: color-mix(in srgb, var(--primary) 40%, var(--border)); }
.td-list-icon { font-size: 1.05rem; color: var(--text-secondary); flex-shrink: 0; }
.td-list-title { display: block; font-size: .84rem; font-weight: 600; color: var(--text); }
.td-list-meta { display: block; font-size: .72rem; color: var(--muted); }

.td-attendance { display: grid; grid-template-columns: 1fr 1fr; text-align: center; }
.td-attendance > div + div { border-left: 1px solid var(--border); }
.td-att-value { font-size: 1.9rem; font-weight: 800; line-height: 1.1; }
.td-att-label { font-size: .8rem; color: var(--muted); margin-top: .2rem; }

.td-empty-icon {
  display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; margin: 0 auto .5rem;
  border-radius: 50%; border: 1px solid var(--border); font-size: 1.3rem; color: var(--text-secondary);
}

[data-bs-theme="dark"] .td-card-title > i:first-child,
[data-bs-theme="dark"] .td-accent,
[data-bs-theme="dark"] .td-link,
[data-bs-theme="dark"] .td-link:hover { color: rgb(var(--chart-rgb)); }
[data-bs-theme="dark"] .td-icon { background: rgba(var(--chart-rgb), .14); color: rgb(var(--chart-rgb)); }
[data-bs-theme="dark"] .td-progress { background: rgba(var(--chart-rgb), .14); }
[data-bs-theme="dark"] .td-progress > div { background: rgb(var(--chart-rgb)); }

@media (max-width: 1199.98px) { .td-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 575.98px) {
  .td-hero { flex-wrap: wrap; padding: 1.1rem; }
  .td-hero-text h4 { font-size: 1.2rem; }
  .td-hero-date { width: 100%; }
  .td-hero-date-arrow { margin-left: auto; }
  .td-mps-summary { grid-template-columns: 1fr; }
  .td-mps-summary > div + div { border-left: 0; border-top: 1px solid var(--border); }
}

/* ── DepEd grade descriptors (mpsDescriptor() in acadocs_helper.php) ──
   Pair with .mps-pill / .mps-avg / .status-pill, or an .mps-input. */
.desc-advancing    { background: #e3ecd6; color: #3d5a1e; border-color: #b9cf9a; }
.desc-benchmarking { background: #dbe8f5; color: #1d4e7e; border-color: #a9c6e6; }
.desc-connecting   { background: #fcefc4; color: #7a5600; border-color: #f2d77c; }
.desc-developing   { background: #fde0c8; color: #8f3f0b; border-color: #f6b98b; }
.desc-emerging     { background: #fadadd; color: #9b1c2c; border-color: #f1a9b1; }
[data-bs-theme="dark"] .desc-advancing    { background: rgba(132,176,80,.16);  color: #b5d68c; border-color: rgba(132,176,80,.35); }
[data-bs-theme="dark"] .desc-benchmarking { background: rgba(80,140,210,.16);  color: #9cc4ee; border-color: rgba(80,140,210,.35); }
[data-bs-theme="dark"] .desc-connecting   { background: rgba(234,179,8,.15);   color: #f3d36b; border-color: rgba(234,179,8,.35); }
[data-bs-theme="dark"] .desc-developing   { background: rgba(249,115,22,.15);  color: #f9b27a; border-color: rgba(249,115,22,.35); }
[data-bs-theme="dark"] .desc-emerging     { background: rgba(225,29,72,.15);   color: #f4a3b2; border-color: rgba(225,29,72,.35); }
.mps-pill[class*="desc-"], .mps-avg[class*="desc-"] { border-width: 1px; border-style: solid; }
.desc-legend { display: flex; flex-wrap: wrap; gap: .35rem; }
.desc-legend .mps-pill { min-width: 0; font-weight: 600; }

/* ── School Calendar card (partials/school_calendar.php) ── */
.cal-card:not(.td-card) { padding: 1rem 1.15rem; }
.dash-area-side > .cal-card { flex: 0 0 auto; } /* never squeezed by the rail's scroll layout */
.cal-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: .7rem; }
.cal-title { display: inline-flex; align-items: center; font-weight: 700; font-size: .9rem; color: var(--text); }
.cal-title > i { margin-right: .5rem; color: var(--primary); }
.cal-sy { font-size: .72rem; font-weight: 600; color: var(--muted); }
.cal-now { display: flex; align-items: center; flex-wrap: wrap; gap: .5rem; }
.cal-term { font-size: 1.15rem; font-weight: 800; color: var(--text); }
.cal-block {
  font-size: .7rem; font-weight: 600; padding: .15rem .55rem; border-radius: 999px;
  background: color-mix(in srgb, var(--primary) 10%, var(--card)); color: var(--primary);
}
.cal-range { font-size: .78rem; color: var(--muted); margin-top: .15rem; }
.cal-progress { height: 6px; border-radius: 999px; margin: .65rem 0 .5rem; overflow: hidden; background: color-mix(in srgb, var(--primary) 10%, var(--border)); }
.cal-progress > div { height: 100%; border-radius: 999px; background: var(--primary); }
.cal-meta { display: flex; justify-content: space-between; flex-wrap: wrap; gap: .25rem .75rem; font-size: .74rem; color: var(--text-secondary); margin-top: .35rem; }
[data-bs-theme="dark"] .cal-title > i { color: rgb(var(--chart-rgb)); }
[data-bs-theme="dark"] .cal-block { background: rgba(var(--chart-rgb), .14); color: rgb(var(--chart-rgb)); }
[data-bs-theme="dark"] .cal-progress { background: rgba(var(--chart-rgb), .14); }
[data-bs-theme="dark"] .cal-progress > div { background: rgb(var(--chart-rgb)); }

/* ── Destructive confirm (SweetAlert2: delete chat / leave group) ──
   Same layout as .logout-swal, in red. Scoped under .swal2-popup.danger-swal
   so it outranks the stylesheet SweetAlert injects after this one. */
.swal2-popup.danger-swal {
  width: 30rem; max-width: calc(100vw - 32px); padding: 2.25rem 2rem 2rem;
  border-radius: 18px; background: var(--card); box-shadow: 0 24px 60px rgba(0,0,0,.18);
}
.swal2-popup.danger-swal .danger-swal-icon {
  width: 84px; height: 84px; margin: 0 auto 1.25rem; border: 0; border-radius: 50%;
  background: #fee2e2; color: #dc2626; animation: none;
}
.swal2-popup.danger-swal .danger-swal-icon .swal2-icon-content { font-size: 2.6rem; animation: none; }
.swal2-popup.danger-swal .danger-swal-title { padding: 0; font-size: 1.75rem; font-weight: 800; color: var(--text); }
.swal2-popup.danger-swal .danger-swal-text { margin: .75rem 0 0; padding: 0 .5rem; font-size: .98rem; line-height: 1.55; color: var(--text-secondary); }
.swal2-popup.danger-swal .danger-swal-actions { margin: 1.75rem 0 0; gap: .9rem; flex-wrap: nowrap; }
.swal2-popup.danger-swal .danger-swal-actions button {
  min-width: 9.5rem; margin: 0; padding: .75rem 1.5rem; border-radius: 14px;
  font-weight: 700; font-size: 1rem; transition: background .15s, border-color .15s;
}
.swal2-popup.danger-swal .danger-swal-confirm { background: #dc2626; color: #fff; border: 1.5px solid #dc2626; box-shadow: 0 8px 18px rgba(220,38,38,.28); }
.swal2-popup.danger-swal .danger-swal-confirm:hover { background: #b91c1c; border-color: #b91c1c; }
.swal2-popup.danger-swal .danger-swal-cancel { background: var(--card); color: var(--text); border: 1.5px solid var(--input-border, var(--border)); }
.swal2-popup.danger-swal .danger-swal-cancel:hover { background: var(--surface-hover); }
.swal2-popup.danger-swal .danger-swal-actions button:focus-visible { outline: 2px solid #dc2626; outline-offset: 2px; box-shadow: none; }
[data-bs-theme="dark"] .swal2-popup.danger-swal { box-shadow: 0 24px 60px rgba(0,0,0,.55); border: 1px solid var(--border); }
[data-bs-theme="dark"] .swal2-popup.danger-swal .danger-swal-icon { background: rgba(220,38,38,.18); color: #f87171; }

/* ── Chat Info: search in conversation ── */
.chat-search-sm { padding: .4rem .8rem; }
.chat-search-sm input { font-size: .78rem; }
.chat-msg-results { max-height: 260px; overflow-y: auto; }
.chat-msg-results:not(:empty) { margin-top: .5rem; }
.chat-msg-results-count { font-size: .68rem; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); padding: 0 .35rem .3rem; }
.chat-msg-result {
  display: block; width: 100%; text-align: left; border: 0; background: transparent; border-radius: 8px;
  padding: .45rem .5rem; color: inherit;
}
.chat-msg-result:hover { background: var(--surface-hover); }
.chat-msg-result-meta { font-size: .66rem; color: var(--muted); }
.chat-msg-result-text { font-size: .78rem; color: var(--text); line-height: 1.35; overflow-wrap: anywhere; }
.chat-msg-result-text mark { padding: 0 .1rem; border-radius: 3px; background: #fde68a; color: inherit; }
[data-bs-theme="dark"] .chat-msg-result-text mark { background: rgba(245,158,11,.35); }
/* Bubble jumped to from a search result */
@keyframes chatMsgFlash { 0%, 60% { box-shadow: 0 0 0 3px #f59e0b; } 100% { box-shadow: 0 0 0 3px transparent; } }
.chat-msg-flash { animation: chatMsgFlash 1.8s ease-out; }

/* ── Tab switching (dashboard switchTab / View All): mild fade + slide-up ── */
@keyframes tabFadeIn {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: none; }
}
.tab-fade-in { animation: tabFadeIn .22s ease-out; }
.dash-tabs button { transition: color .2s ease, border-color .2s ease, background-color .2s ease; }
@media (prefers-reduced-motion: reduce) {
  .tab-fade-in { animation: none; }
}

/* ── Display & Accessibility settings (pages/shared/settings.php) ──────
   Attributes on <html> are set by partials/display_prefs_head.php. Text
   size is the root font-size itself (inline style), so everything sized in
   rem follows it. */
.pref-choice-group { display: flex; flex-wrap: wrap; gap: .5rem; }
.pref-choice {
  display: inline-flex; align-items: center; gap: .45rem; min-height: 2.5rem;
  padding: .45rem .9rem; border: 1px solid var(--input-border); border-radius: .6rem;
  background: var(--card); color: var(--text-secondary); font-size: .85rem; font-weight: 500;
  cursor: pointer; transition: border-color .15s, background-color .15s, color .15s;
}
.pref-choice:hover { background: var(--surface-hover); }
.btn-check:checked + .pref-choice {
  border-color: var(--primary); background: var(--highlight-bg); color: var(--highlight-tx);
  box-shadow: inset 0 0 0 1px var(--primary);
}
.btn-check:focus-visible + .pref-choice { outline: 2px solid var(--primary); outline-offset: 2px; }
.pref-choice-glyph { font-weight: 700; line-height: 1; }

.pref-toggle {
  display: flex; align-items: center; gap: .9rem; margin: 0;
  padding: .9rem 1.25rem; border-bottom: 1px solid var(--border); cursor: pointer;
}
.pref-toggle:last-child { border-bottom: 0; }
.pref-toggle:hover { background: var(--surface-hover); }
.pref-toggle-icon { flex-shrink: 0; width: 1.5rem; text-align: center; font-size: 1.15rem; color: var(--primary); }
[data-bs-theme="dark"] .pref-toggle-icon { color: var(--highlight-tx); }
.pref-toggle-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: .1rem; }
.pref-toggle-label { font-weight: 600; color: var(--text); }
.pref-toggle-help { font-size: .8rem; color: var(--muted); }
.pref-toggle .form-switch { padding-left: 0; }
.pref-toggle .form-switch .form-check-input { width: 2.5em; height: 1.35em; margin: 0; cursor: pointer; }

/* Reduce motion — the setting, or the OS asking for it */
[data-reduce-motion] *,
[data-reduce-motion] *::before,
[data-reduce-motion] *::after {
  animation-duration: .01ms !important;
  animation-iteration-count: 1 !important;
  transition-duration: .01ms !important;
  scroll-behavior: auto !important;
}

/* High contrast — darker secondary text, stronger borders */
[data-high-contrast] {
  --text:              #000000;
  --text-secondary:    #111827;
  --muted:             #374151;
  --border:            #6b7280;
  --input-border:      #4b5563;
  --bs-body-color:     #000000;
  --bs-secondary-color: #374151;
  --bs-border-color:   #6b7280;
}
[data-high-contrast][data-bs-theme="dark"] {
  --text:              #ffffff;
  --text-secondary:    #f4f4f6;
  --muted:             #d4d4dc;
  --border:            #6b6b78;
  --input-border:      #7a7a88;
  --bs-body-color:     #ffffff;
  --bs-secondary-color: #d4d4dc;
  --bs-border-color:   #6b6b78;
}
[data-high-contrast] .form-control::placeholder { color: var(--muted); opacity: 1; }

/* Underline links — inline text links only, not buttons/nav/card links */
[data-underline-links] #main-content a:not(.btn):not(.nav-link):not(.dropdown-item):not(.page-link):not(.list-group-item):not(.text-decoration-none):not(.dashboard-card-link):not(.td-card):not(.td-list-item):not(.stat-tile),
[data-underline-links] .notif-item-title a,
[data-underline-links] .link-maroon {
  text-decoration: underline !important;
  text-underline-offset: .18em;
}

/* Prominent focus outline (keyboard only) */
[data-focus-ring] { --focus-ring: #1d4ed8; }
[data-focus-ring][data-bs-theme="dark"] { --focus-ring: #93c5fd; }
[data-focus-ring] :focus-visible,
[data-focus-ring] .btn-check:focus-visible + .pref-choice,
[data-focus-ring] .btn-check:focus-visible + .btn {
  outline: 3px solid var(--focus-ring) !important;
  outline-offset: 2px !important;
}
[data-focus-ring] #sidebar :focus-visible { outline-color: #fde68a !important; }

/* Increase text spacing (toward WCAG 1.4.12) */
[data-text-spacing] body { line-height: 1.8; letter-spacing: .04em; word-spacing: .12em; }
[data-text-spacing] #main-content p { margin-bottom: 1.25em; }

/* ── Light/dark switch animation (display_prefs_head.php) ──────────────
   .theme-reveal: the new theme grows as a circle from the clicked button
   (clip-path animated from JS) over a still snapshot of the old one.
   .theme-fade: fallback where View Transitions aren't supported. */
.theme-reveal::view-transition-old(root),
.theme-reveal::view-transition-new(root) {
  animation: none;
  mix-blend-mode: normal;
}
.theme-fade,
.theme-fade *,
.theme-fade *::before,
.theme-fade *::after {
  transition: background-color .4s ease, border-color .4s ease, color .4s ease, fill .4s ease, box-shadow .4s ease !important;
}
@keyframes themeIconSpin {
  from { transform: rotate(-120deg) scale(.4); opacity: 0; }
  to   { transform: none; opacity: 1; }
}
#theme-toggle-icon { display: inline-block; }
.theme-icon-spin { animation: themeIconSpin .5s cubic-bezier(.34, 1.56, .64, 1); }

/* ── Drag-and-drop file zone (initFileDropzone in footer.php) ── */
.file-dz {
  position: relative; display: flex; align-items: center; gap: .85rem;
  padding: 1.1rem 1.2rem; border: 2px dashed var(--input-border); border-radius: var(--radius);
  background: var(--input-bg); color: var(--text-secondary);
  transition: border-color .15s, background .15s;
}
.file-dz:hover, .file-dz:focus-within { border-color: var(--primary-light); }
.file-dz.is-dragover { border-color: var(--primary-light); background: var(--highlight-bg); }
.file-dz.has-files { border-style: solid; }
.file-dz-input {
  position: absolute !important; inset: 0; width: 100%; height: 100%;
  opacity: 0; cursor: pointer; z-index: 1;
}
.file-dz-icon { font-size: 1.8rem; color: var(--primary-light); flex-shrink: 0; line-height: 1; }
[data-bs-theme="dark"] .file-dz-icon,
[data-bs-theme="dark"] .file-dz-link { color: var(--highlight-tx); }
.file-dz.is-dragover .file-dz-icon { transform: translateY(-2px); }
.file-dz-text { min-width: 0; }
.file-dz-title { font-weight: 600; font-size: .88rem; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.file-dz-link { color: var(--primary-light); text-decoration: underline; text-underline-offset: 2px; }
.file-dz-sub { font-size: .75rem; color: var(--muted); }
.file-dz-sm { padding: .75rem .9rem; gap: .65rem; }
.file-dz-sm .file-dz-icon { font-size: 1.4rem; }
.file-dz-list { margin-top: .5rem; display: flex; flex-direction: column; gap: .35rem; }
.file-dz-item {
  display: flex; align-items: center; gap: .5rem; padding: .3rem .3rem .3rem .65rem;
  border: 1px solid var(--border); border-radius: .5rem; font-size: .8rem; background: var(--card);
}
.file-dz-item > .bi { color: var(--muted); }
.file-dz-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text); }
.file-dz-size { color: var(--muted); font-size: .72rem; white-space: nowrap; }

/* ── Templates: auto tags and section suggestions (TemplateClassifier) ── */
.tpl-tag {
  display: inline-block; padding: .08rem .45rem; border-radius: 999px; font-size: .66rem; font-weight: 600;
  background: var(--highlight-bg); color: var(--highlight-tx); border: 1px solid transparent; text-decoration: none;
  line-height: 1.5;
}
a.tpl-tag:hover { border-color: var(--highlight-tx); color: var(--highlight-tx); }
.tpl-file-suggest { display: flex; flex-wrap: wrap; gap: .25rem; align-items: center; font-size: .7rem; color: var(--muted); margin-top: .15rem; }
.tpl-conf { display: inline-flex; align-items: center; padding: .05rem .45rem; border-radius: .4rem; font-size: .68rem; font-weight: 600; }
.tpl-conf-high { background: #d1fae5; color: #065f46; }
.tpl-conf-low  { background: #fef3c7; color: #92400e; }
.tpl-conf-none { background: var(--surface-hover); color: var(--muted); border: 1px dashed var(--border); }
[data-bs-theme="dark"] .tpl-conf-high { background: rgba(16,185,129,.16); color: #6ee7b7; }
[data-bs-theme="dark"] .tpl-conf-low  { background: rgba(245,158,11,.16); color: #fcd34d; }
.tpl-suggest {
  margin-top: .5rem; padding: .55rem .75rem; border-radius: .6rem; font-size: .78rem;
  background: var(--surface-hover); border: 1px solid var(--border); color: var(--text-secondary);
}
.tpl-basis { display: inline-flex; align-items: center; font-size: .66rem; color: var(--muted); }
.tpl-basis-name { font-style: italic; }
/* Title suggestions panel (Templates upload) — highlighted so it is hard to miss */
.tpl-title-panel {
  margin-top: .6rem; padding: .7rem .8rem .75rem; border-radius: .75rem;
  border: 1.5px solid var(--primary-light); border-left-width: 5px;
  background: var(--highlight-bg); color: var(--text);
  box-shadow: 0 2px 10px rgba(var(--chart-rgb), .08);
  animation: tplPanelIn .25s ease-out;
}
@keyframes tplPanelIn { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .tpl-title-panel { animation: none; } }
.tpl-title-panel-head { font-weight: 700; font-size: .82rem; color: var(--highlight-tx); margin-bottom: .35rem; }
.tpl-title-panel-head span { font-weight: 500; color: var(--muted); font-size: .74rem; }
.tpl-title-panel-note { font-size: .76rem; margin-bottom: .45rem; color: var(--text-secondary); }
.tpl-title-panel-loading { font-size: .76rem; color: var(--muted); display: inline-flex; align-items: center; }
.tpl-title-chips { display: flex; flex-direction: column; gap: .35rem; }
.tpl-title-chip {
  display: flex; align-items: center; gap: .35rem; width: 100%; text-align: left;
  border: 1.5px solid var(--border); background: var(--card); color: var(--text);
  border-radius: .55rem; padding: .4rem .65rem; font-size: .8rem; line-height: 1.35; cursor: pointer;
  transition: border-color .15s, background .15s;
}
.tpl-title-chip > .bi { color: var(--muted); flex-shrink: 0; }
.tpl-chip-text { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tpl-title-chip:hover { border-color: var(--primary-light); }
.tpl-title-chip:focus-visible { outline: 2px solid var(--primary-light); outline-offset: 1px; }
.tpl-title-chip.active { border-color: var(--primary-light); background: var(--card); font-weight: 600; }
.tpl-title-chip.active > .bi { color: var(--highlight-tx); }
.tpl-title-chip.is-file .tpl-chip-text { font-style: italic; color: var(--text-secondary); }
.tpl-chip-badge {
  flex-shrink: 0; font-size: .62rem; font-weight: 700; padding: .05rem .4rem; border-radius: 999px;
  background: var(--primary-light); color: #fff; text-transform: uppercase; letter-spacing: .03em;
}
.tpl-chip-badge-muted { background: var(--surface-hover); color: var(--muted); border: 1px solid var(--border); }
/* Batch upload: per-file title row */
.tpl-batch-title { margin: -.15rem 0 .55rem 1.9rem; padding: .5rem .6rem; border-radius: .6rem;
  background: var(--highlight-bg); border-left: 3px solid var(--primary-light); }
.tpl-batch-title .tpl-title-chip { padding: .28rem .55rem; font-size: .74rem; }

/* ── Templates: section cards ── */
.tpl-section-card {
  position: relative; display: flex; flex-direction: column;
  background: var(--card); border: 1px solid var(--border); border-radius: var(--radius);
  box-shadow: 0 1px 3px rgba(0,0,0,.04); transition: box-shadow .15s, transform .15s, border-color .15s;
}
.tpl-section-card:hover { box-shadow: 0 6px 18px rgba(0,0,0,.08); transform: translateY(-2px); border-color: var(--primary-light); }
.tpl-section-card:focus-within { border-color: var(--primary-light); }
@media (prefers-reduced-motion: reduce) { .tpl-section-card, .tpl-section-card:hover { transition: none; transform: none; } }
.tpl-section-link {
  display: flex; align-items: flex-start; gap: 1rem; padding: 1.1rem 1.1rem 1rem;
  color: inherit; text-decoration: none; flex: 1;
}
.tpl-section-link:hover { color: inherit; }
.tpl-section-link:focus-visible { outline: none; }
.tpl-section-link:focus-visible::after { outline: 2px solid var(--primary-light); outline-offset: -2px; border-radius: var(--radius); }
.tpl-section-icon {
  width: 52px; height: 52px; border-radius: 12px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center; color: #fff; font-size: 1.35rem;
}
.tpl-section-icon-sm { width: 36px; height: 36px; border-radius: 9px; font-size: 1rem; }
.tpl-section-main { flex: 1; min-width: 0; padding-top: .2rem; }
.tpl-section-title { display: flex; align-items: flex-start; gap: .5rem; flex-wrap: wrap; margin-bottom: .45rem; }
.tpl-section-name { font-weight: 700; font-size: .95rem; color: var(--text); line-height: 1.3; overflow-wrap: break-word; hyphens: auto; min-width: 0; }
.tpl-section-name.is-long { font-size: .78rem; letter-spacing: .01em; }
.tpl-section-count {
  font-size: .7rem; font-weight: 700; padding: .1rem .5rem; border-radius: 999px; line-height: 1.5;
  background: var(--surface-hover); color: var(--text-secondary); border: 1px solid var(--border);
}
.tpl-section-desc { font-size: .78rem; color: var(--muted); margin: 0; line-height: 1.45; }
.tpl-section-chevron { color: var(--muted); padding-top: .35rem; transition: transform .15s, color .15s; }
.tpl-section-card:hover .tpl-section-chevron { color: var(--primary-light); transform: translateX(2px); }
[data-bs-theme="dark"] .tpl-section-card:hover .tpl-section-chevron { color: var(--highlight-tx); }
.tpl-section-foot {
  display: flex; align-items: center; justify-content: flex-end; gap: .5rem;
  padding: .55rem 1.1rem; border-top: 1px solid var(--border); min-height: 44px;
}
.tpl-section-actions { position: relative; z-index: 2; display: flex; gap: .15rem; margin-right: auto; }
.tpl-section-total { font-size: .76rem; color: var(--text-secondary); white-space: nowrap; }

/* ── Templates: paper-folder icon that opens while a file is held over it ── */
.tpl-folder {
  position: relative; flex-shrink: 0; width: 52px; height: 52px; border-radius: 12px;
  background: var(--folder, #7f1d1d); perspective: 160px;
  box-shadow: inset 0 -2px 0 rgba(0,0,0,.12);
}
.tpl-folder > span { position: absolute; display: block; }
/* back of the folder, with its tab */
.tpl-folder-back {
  left: 22%; right: 22%; top: 31%; bottom: 25%;
  background: rgba(255,255,255,.62); border-radius: 2px 3px 3px 3px;
}
.tpl-folder-back::before {
  content: ''; position: absolute; left: 0; top: -4px; width: 44%; height: 5px;
  background: inherit; border-radius: 2px 3px 0 0;
}
/* sheets inside — hidden behind the flap until it opens */
.tpl-folder-paper {
  left: 27%; right: 27%; top: 37%; height: 30%;
  background: #fff; border-radius: 1px;
  box-shadow: 0 1px 2px rgba(0,0,0,.15);
  background-image: repeating-linear-gradient(to bottom, transparent 0 3px, rgba(0,0,0,.12) 3px 4px);
  background-size: 70% 100%; background-repeat: no-repeat; background-position: 50% 3px;
  transition: transform .35s cubic-bezier(.34, 1.56, .64, 1);
}
.tpl-folder-paper-2 { left: 31%; right: 23%; transform: rotate(4deg); transition-delay: .04s; }
/* front flap, hinged at the bottom */
.tpl-folder-front {
  left: 22%; right: 22%; top: 40%; bottom: 25%;
  background: #fff; border-radius: 3px 3px 3px 3px;
  transform-origin: 50% 100%;
  transition: transform .35s cubic-bezier(.34, 1.4, .64, 1), background .2s;
  box-shadow: 0 -1px 2px rgba(0,0,0,.08);
}
.tpl-folder-sm { width: 36px; height: 36px; border-radius: 9px; }
.tpl-folder-xs { width: 30px; height: 30px; border-radius: 8px; }
.tpl-folder-sm .tpl-folder-back::before, .tpl-folder-xs .tpl-folder-back::before { top: -3px; height: 3px; }

/* Open: flap tilts toward you, sheets rise — "drop it in here" */
.is-dragover .tpl-folder .tpl-folder-front,
.tpl-folder.is-open .tpl-folder-front { transform: rotateX(-52deg); background: #f8fafc; }
.is-dragover .tpl-folder .tpl-folder-paper { transform: translateY(-34%); }
.is-dragover .tpl-folder .tpl-folder-paper-2 { transform: translateY(-48%) rotate(6deg); }
.tpl-folder.is-open .tpl-folder-paper { transform: translateY(-22%); }
.is-dragover .tpl-folder { animation: tplFolderWiggle .9s ease-in-out infinite; }
@keyframes tplFolderWiggle { 0%, 100% { transform: translateY(0) scale(1.06); } 50% { transform: translateY(-2px) scale(1.06); } }
/* Dropped: sheet slides in, flap snaps shut */
.is-dropped .tpl-folder .tpl-folder-paper { animation: tplPaperIn .5s ease-in forwards; }
.is-dropped .tpl-folder .tpl-folder-front { animation: tplFlapShut .5s ease-out; }
@keyframes tplPaperIn { 0% { transform: translateY(-60%); } 100% { transform: translateY(10%); } }
@keyframes tplFlapShut { 0% { transform: rotateX(-52deg); } 60% { transform: rotateX(6deg); } 100% { transform: rotateX(0); } }
@media (prefers-reduced-motion: reduce) {
  .tpl-folder, .tpl-folder > span { animation: none !important; transition: none !important; }
}

/* Section card as a drop target */
.tpl-section-card .tpl-drop-hint {
  position: absolute; left: 50%; bottom: 52px; transform: translate(-50%, 6px);
  padding: .3rem .7rem; border-radius: 999px; font-size: .74rem; font-weight: 600; white-space: nowrap;
  background: var(--primary-light); color: #fff; box-shadow: 0 4px 12px rgba(0,0,0,.18);
  opacity: 0; pointer-events: none; transition: opacity .15s, transform .15s; z-index: 3;
}
.tpl-section-card.is-dragover {
  border: 2px dashed var(--primary-light); background: var(--highlight-bg); transform: translateY(-2px);
  box-shadow: 0 10px 24px rgba(0,0,0,.12);
}
.tpl-section-card.is-dragover .tpl-drop-hint,
.tpl-section-card.is-drop-same .tpl-drop-hint { opacity: 1; transform: translate(-50%, 0); }
.tpl-section-card.is-drop-same { border: 2px dashed var(--border); opacity: .75; }
.tpl-section-card.is-drop-same .tpl-drop-hint { background: var(--muted); }

/* Folder dock above a section's templates */
.tpl-dock {
  padding: .6rem .75rem; border-radius: var(--radius); border: 1px dashed var(--border);
  background: var(--card); transition: border-color .15s, background .15s, box-shadow .15s;
}
.tpl-dock-label { font-size: .74rem; color: var(--muted); margin-bottom: .45rem; }
.tpl-dock-folders { display: flex; gap: .5rem; flex-wrap: wrap; }
.tpl-dock-folder {
  display: flex; align-items: center; gap: .45rem; padding: .3rem .6rem .3rem .3rem;
  border: 1.5px solid var(--border); border-radius: .6rem; background: var(--card);
  color: var(--text); text-decoration: none; font-size: .78rem; font-weight: 600; max-width: 230px;
  transition: border-color .15s, background .15s, transform .15s;
}
.tpl-dock-folder:hover { border-color: var(--primary-light); color: var(--text); }
.tpl-dock-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tpl-dock-folder.is-dragover { border: 1.5px dashed var(--primary-light); background: var(--highlight-bg); transform: translateY(-2px); }
.tpl-dock-folder.is-drop-same { opacity: .5; }
/* Optional folders inside a section: path trail, folder tiles, and a template's folder in search results */
.tpl-crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem; font-size: .8rem; }
.tpl-crumbs a { color: var(--muted); text-decoration: none; font-weight: 600; }
.tpl-crumbs a:hover { color: var(--primary-light); text-decoration: underline; }
.tpl-crumbs [aria-current] { color: var(--text); font-weight: 700; }
.tpl-crumb-sep { font-size: .65rem; color: var(--muted); }
.tpl-subfolders { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: .5rem; }
.tpl-subfolder {
  display: flex; align-items: center; gap: .55rem; padding: .45rem .6rem .45rem .45rem; min-width: 0;
  border: 1.5px solid var(--border); border-radius: .6rem; background: var(--card);
  color: var(--text); text-decoration: none; transition: border-color .15s, background .15s, transform .15s;
}
.tpl-subfolder:hover { border-color: var(--primary-light); color: var(--text); }
.tpl-subfolder.is-dragover { border: 1.5px dashed var(--primary-light); background: var(--highlight-bg); transform: translateY(-2px); }
.tpl-subfolder.is-drop-same { opacity: .5; }
.tpl-subfolder-main { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.tpl-subfolder-name { font-size: .82rem; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tpl-subfolder-meta { font-size: .7rem; color: var(--muted); }
.tpl-folder-path { display: inline-block; font-size: .72rem; color: var(--muted); text-decoration: none; margin-bottom: .25rem; }
.tpl-folder-path:hover { color: var(--primary-light); text-decoration: underline; }
/* While a template is being dragged, the dock stands out */
body.tpl-dragging-doc .tpl-dock {
  border: 2px dashed var(--primary-light); background: var(--highlight-bg);
  box-shadow: 0 6px 18px rgba(0,0,0,.08); position: sticky; top: calc(var(--topbar-h) + 8px); z-index: 20;
}
body.tpl-dragging-doc .tpl-dock-label { color: var(--highlight-tx); font-weight: 600; }
/* The row being dragged */
.tpl-draggable { cursor: grab; }
.tpl-draggable:active { cursor: grabbing; }
.tpl-draggable.is-dragging { opacity: .45; outline: 2px dashed var(--primary-light); outline-offset: -2px; }

/* ── Templates: opening a folder (replaces the loading screen) ── */
.tpl-section-card.is-opening .tpl-folder .tpl-folder-front { transform: rotateX(-52deg); background: #f8fafc; }
.tpl-section-card.is-opening .tpl-folder .tpl-folder-paper { transform: translateY(-34%); }
.tpl-section-card.is-opening .tpl-folder .tpl-folder-paper-2 { transform: translateY(-48%) rotate(6deg); }
.tpl-section-card.is-closing .tpl-folder .tpl-folder-front { animation: tplFlapShut .55s ease-out; }
.tpl-section-card.is-closing .tpl-folder .tpl-folder-paper { animation: tplPaperIn .45s ease-in; }

.tpl-folder-xl { width: 112px; height: 112px; border-radius: 26px; perspective: 320px;
  box-shadow: 0 18px 40px rgba(0,0,0,.18), inset 0 -3px 0 rgba(0,0,0,.12); }
.tpl-folder-xl .tpl-folder-back::before { top: -8px; height: 9px; }
.tpl-folder-xl .tpl-folder-paper,
.tpl-folder-xl .tpl-folder-front { transition-duration: .5s; }
.tpl-folder-xl.is-open .tpl-folder-front { transform: rotateX(-58deg); }
.tpl-folder-xl.is-open .tpl-folder-paper { transform: translateY(-44%); }
.tpl-folder-xl.is-open .tpl-folder-paper-2 { transform: translateY(-58%) rotate(7deg); }

.tpl-folder-zoom {
  position: absolute; z-index: 1030; border-radius: var(--radius); overflow: hidden;
  background: var(--card); border: 1px solid var(--border);
  box-shadow: 0 1px 3px rgba(0,0,0,.06);
  display: flex; align-items: center; justify-content: center;
  transition: left .5s cubic-bezier(.2,.8,.2,1), top .5s cubic-bezier(.2,.8,.2,1),
              width .5s cubic-bezier(.2,.8,.2,1), height .5s cubic-bezier(.2,.8,.2,1),
              box-shadow .5s, opacity .35s ease, transform .35s ease;
}
/* soft wash of the folder's colour */
.tpl-folder-zoom::before {
  content: ''; position: absolute; inset: 0; opacity: 0; transition: opacity .5s;
  background: radial-gradient(circle at 50% 42%, color-mix(in srgb, var(--folder) 16%, transparent), transparent 62%);
}
.tpl-folder-zoom.is-expanded { box-shadow: 0 24px 60px rgba(0,0,0,.18); }
.tpl-folder-zoom.is-expanded::before { opacity: 1; }
.tpl-folder-zoom-inner {
  position: relative; display: flex; flex-direction: column; align-items: center; gap: .9rem;
  transform: scale(.45); opacity: .3; transition: transform .5s cubic-bezier(.34,1.3,.64,1), opacity .3s;
}
.tpl-folder-zoom.is-expanded .tpl-folder-zoom-inner { transform: scale(1); opacity: 1; }
.tpl-folder-zoom-name { font-weight: 700; font-size: 1.05rem; color: var(--text); text-align: center; max-width: 80vw; }
.tpl-folder-zoom-sub { font-size: .78rem; color: var(--muted); margin-top: -.5rem; }
/* still loading after it opened: the sheets bob gently */
.tpl-folder-xl.is-open .tpl-folder-paper { animation: tplSheetBob 1.1s ease-in-out .5s infinite; }
@keyframes tplSheetBob { 0%, 100% { transform: translateY(-44%); } 50% { transform: translateY(-52%); } }
/* done: the folder lifts away, revealing the section */
.tpl-folder-zoom.is-done { opacity: 0; transform: scale(1.015); pointer-events: none; }
.tpl-folder-zoom.is-done .tpl-folder-zoom-inner { transform: scale(1.12) translateY(-12px); opacity: 0; }

/* The section's content rises out of the folder */
.folder-in { animation: tplFolderIn .45s cubic-bezier(.2,.8,.2,1); transform-origin: 50% 0; }
@keyframes tplFolderIn {
  from { opacity: 0; transform: translateY(14px) scale(.985); }
  to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .tpl-folder-zoom, .tpl-folder-zoom-inner, .folder-in { transition: none !important; animation: none !important; }
}
/* Placed without animating (the reverse starts from the full-size, open folder) */
.tpl-folder-zoom.no-anim, .tpl-folder-zoom.no-anim * { transition: none !important; }
/* All sections clicked: the section's content folds into the folder */
.tpl-folder-zoom.is-folding-in { animation: tplFoldIn .3s ease-out; }
@keyframes tplFoldIn { from { opacity: 0; } to { opacity: 1; } }
.tpl-folder-zoom.is-folding-in .tpl-folder-zoom-inner { animation: tplFoldInInner .35s cubic-bezier(.34,1.3,.64,1); }
@keyframes tplFoldInInner { from { transform: scale(1.15); opacity: 0; } to { transform: scale(1); opacity: 1; } }
/* Shrinking back onto its card, flap closing */
.tpl-folder-zoom.is-shrinking { box-shadow: 0 1px 3px rgba(0,0,0,.06); }
.tpl-folder-zoom.is-shrinking::before { opacity: 0; }
.tpl-folder-zoom.is-shrinking .tpl-folder-zoom-inner { transform: scale(.45); }
.tpl-folder-zoom.is-shrinking .tpl-folder-zoom-name,
.tpl-folder-zoom.is-shrinking .tpl-folder-zoom-sub { opacity: 0; transition: opacity .2s; }
.tpl-folder-zoom.is-shrinking.is-done .tpl-folder-zoom-inner { transform: scale(.45); opacity: 0; }
/* Dock folder clicked: same opening as the cards */
.tpl-dock-folder.is-opening { border-color: var(--primary-light); background: var(--highlight-bg); }
.tpl-dock-folder.is-opening .tpl-folder .tpl-folder-front { transform: rotateX(-52deg); background: #f8fafc; }
.tpl-dock-folder.is-opening .tpl-folder .tpl-folder-paper { transform: translateY(-34%); }
.tpl-dock-folder.is-opening .tpl-folder .tpl-folder-paper-2 { transform: translateY(-48%) rotate(6deg); }
/* Folders peek open on hover (cards and dock), inviting a click — not while already open */
.tpl-dock-folder:hover:not(.is-dragover):not(.is-opening):not(.is-current) .tpl-folder .tpl-folder-front,
.tpl-section-card:hover:not(.is-dragover):not(.is-opening):not(.is-closing) .tpl-folder .tpl-folder-front { transform: rotateX(-22deg); }
.tpl-dock-folder:hover:not(.is-dragover):not(.is-opening):not(.is-current) .tpl-folder .tpl-folder-paper,
.tpl-section-card:hover:not(.is-dragover):not(.is-opening):not(.is-closing) .tpl-folder .tpl-folder-paper { transform: translateY(-14%); }
@media (prefers-reduced-motion: reduce) { .tpl-dock-folder:hover .tpl-folder > span, .tpl-section-card:hover .tpl-folder > span { transform: none !important; } }
/* Folder bar: the folder you are in — highlighted, its folder drawn open, marked "Open" */
.tpl-dock-folder.is-current {
  border: 2px solid var(--primary-light); background: var(--highlight-bg); color: var(--highlight-tx);
  box-shadow: 0 2px 8px rgba(0,0,0,.08); cursor: default; position: relative;
}
.tpl-dock-folder.is-current:hover { color: var(--highlight-tx); }
.tpl-dock-folder.is-current::after {
  /* little pointer under the chip, toward the open folder's templates */
  content: ''; position: absolute; left: 50%; bottom: -7px; width: 12px; height: 12px;
  background: var(--highlight-bg); border-right: 2px solid var(--primary-light); border-bottom: 2px solid var(--primary-light);
  transform: translateX(-50%) rotate(45deg); border-bottom-right-radius: 2px;
}
.tpl-dock-current {
  flex-shrink: 0; display: inline-flex; align-items: center; font-size: .62rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .03em; padding: .08rem .45rem; border-radius: 999px;
  background: var(--primary-light); color: #fff; animation: tplCurrentIn .3s ease-out;
}
@keyframes tplCurrentIn { from { opacity: 0; transform: scale(.7); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .tpl-dock-current { animation: none; } }