/* ============================================================
   University of Mirpurkhas AMS – Application Stylesheet
   ============================================================ */

:root {
  --ams-primary:       #1a56db;
  --ams-primary-dark:  #1245b5;
  --ams-sidebar-bg:    #0f172a;
  --ams-sidebar-hover: #1e293b;
  --ams-sidebar-text:  #cbd5e1;
  --ams-sidebar-active:#1a56db;
  --ams-navbar-bg:     #1a56db;
  --ams-sidebar-w:     250px;
  --ams-navbar-h:      58px;
  --ams-footer-h:      42px;
  --ams-radius:        0.6rem;
  --ams-shadow:        0 1px 6px rgba(0,0,0,.08);
}

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

html { scroll-behavior: smooth; }

body {
  font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
  font-size: .9rem;
  background: #f1f5f9;
  color: #1e293b;
}

a { color: var(--ams-primary); }
code { color: #be185d; font-size: .85em; }

/* ── Navbar ───────────────────────────────────────────────── */
.ams-navbar {
  background: var(--ams-navbar-bg) !important;
  height: var(--ams-navbar-h);
  z-index: 1040;
}

.ams-logo-icon {
  width: 34px; height: 34px;
  background: rgba(255,255,255,.15);
  border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.2rem; color: #fff;
}

/* ── Layout ───────────────────────────────────────────────── */
.ams-layout {
  display: flex;
  min-height: 100vh;
  padding-top: var(--ams-navbar-h);
}

/* ── Sidebar ──────────────────────────────────────────────── */
.ams-sidebar {
  position: fixed;
  top: var(--ams-navbar-h);
  left: 0;
  bottom: 0;
  width: var(--ams-sidebar-w);
  background: var(--ams-sidebar-bg);
  z-index: 1030;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transition: width .25s ease, transform .25s ease;
}

.sidebar-header {
  border-bottom-color: rgba(255,255,255,.08) !important;
  color: #fff;
  flex-shrink: 0;
}

.sidebar-nav { flex: 1; overflow-y: auto; }
.sidebar-nav::-webkit-scrollbar { width: 4px; }
.sidebar-nav::-webkit-scrollbar-track { background: transparent; }
.sidebar-nav::-webkit-scrollbar-thumb { background: rgba(255,255,255,.15); border-radius: 10px; }

.sidebar-nav .nav-label {
  display: block;
  padding: .55rem 1rem .25rem;
  font-size: .65rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: #475569;
}

.sidebar-nav .nav-link {
  display: flex;
  align-items: center;
  gap: .65rem;
  padding: .52rem 1rem;
  color: var(--ams-sidebar-text);
  border-radius: 6px;
  margin: 1px 6px;
  font-size: .85rem;
  transition: background .15s, color .15s;
}

.sidebar-nav .nav-link:hover {
  background: var(--ams-sidebar-hover);
  color: #fff;
}

.sidebar-nav .nav-link.active {
  background: var(--ams-sidebar-active);
  color: #fff;
  font-weight: 600;
}

.sidebar-nav .nav-link i {
  font-size: 1rem;
  width: 20px;
  text-align: center;
  flex-shrink: 0;
}

/* ── Main Content ─────────────────────────────────────────── */
.ams-main {
  margin-left: var(--ams-sidebar-w);
  flex: 1;
  min-width: 0;                 /* let this flex column shrink instead of being
                                   stretched past the screen by wide children
                                   (e.g. the nowrap announcement marquee) */
  min-height: calc(100vh - var(--ams-navbar-h) - var(--ams-footer-h));
  transition: margin-left .25s ease;

  /*
   * Bootstrap 5.3 introduced color-mode CSS vars. When the OS is in
   * dark mode (or Bootstrap inherits stale vars from a dark ancestor),
   * --bs-body-color-rgb flips to ~white, making text-muted / text-secondary
   * nearly invisible on the light content background. Lock these to
   * light-mode values so all soft badges and muted text stay readable.
   */
  --bs-body-color:          #212529;
  --bs-body-color-rgb:      33, 37, 41;
  --bs-secondary-rgb:       108, 117, 125;
  --bs-secondary-color:     rgba(108, 117, 125, 0.75);
  --bs-secondary-color-rgb: 108, 117, 125;
  --bs-tertiary-color:      rgba(33, 37, 41, 0.5);
  --bs-emphasis-color:      #000;
  --bs-emphasis-color-rgb:  0, 0, 0;
}

/* ── Footer ───────────────────────────────────────────────── */
.ams-footer {
  margin-left: var(--ams-sidebar-w);
  height: var(--ams-footer-h);
  transition: margin-left .25s ease;
}

/* ── Sidebar Collapsed ────────────────────────────────────── */
body.sidebar-collapsed .ams-sidebar {
  width: 64px;
}
body.sidebar-collapsed .sidebar-nav .nav-label,
body.sidebar-collapsed .sidebar-nav span { display: none; }
body.sidebar-collapsed .sidebar-nav .nav-link { justify-content: center; gap: 0; padding: .55rem; }
body.sidebar-collapsed .sidebar-nav .nav-link i { width: auto; }
body.sidebar-collapsed .ams-main,
body.sidebar-collapsed .ams-footer { margin-left: 64px; }

/* ── Login Page ───────────────────────────────────────────── */
.ams-login-bg {
  background: linear-gradient(135deg, #1a56db 0%, #0f172a 100%);
  min-height: 100vh;
}

.ams-login-logo {
  width: 80px; height: 80px;
  background: rgba(255,255,255,.15);
  backdrop-filter: blur(10px);
  border-radius: 20px;
  display: flex; align-items: center; justify-content: center;
  font-size: 2.5rem; color: #fff;
  margin: 0 auto;
}

/* ── UMPK Logo ────────────────────────────────────────────── */
/* Navbar logo – white bg pill keeps logo visible on dark bar */
.ams-navbar img.umpk-nav-logo {
  width: 34px; height: 34px;
  object-fit: contain;
  border-radius: 6px;
  background: #fff;
  padding: 2px;
}

/* Sidebar logo */
.ams-sidebar img.umpk-sidebar-logo {
  width: 32px; height: 32px;
  object-fit: contain;
  border-radius: 4px;
  background: #fff;
  padding: 2px;
  flex-shrink: 0;
}

/* Credential fill animation */
@keyframes credFill {
  0%   { background-color: transparent; }
  40%  { background-color: rgba(26,86,219,.12); }
  100% { background-color: transparent; }
}
.filling { animation: credFill .45s ease; }

/* ── Cards & Stats ────────────────────────────────────────── */
.stat-card { transition: transform .15s, box-shadow .15s; cursor: pointer; }
.stat-card:hover { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(0,0,0,.12) !important; }

.stat-icon {
  width: 48px; height: 48px; border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}

/* ── Tables ───────────────────────────────────────────────── */
/*
 * Explicit contrast values prevent the "invisible text" bug that
 * appears when Bootstrap's CSS variable defaults are inherited
 * from a dark ancestor (e.g. dark cards, dark sidebar bleed-in).
 * These override Bootstrap 5 table CSS vars at the .table level
 * so all descendants (th, td) pick them up automatically.
 */
.table {
  --bs-table-bg:            #ffffff;
  --bs-table-color:         #212529;
  --bs-table-border-color:  #dee2e6;
  --bs-table-striped-bg:    rgba(0, 0, 0, .025);
  --bs-table-striped-color: #212529;
  --bs-table-active-bg:     rgba(0, 0, 0, .05);
  --bs-table-active-color:  #212529;
  --bs-table-hover-bg:      rgba(26, 86, 219, .04);
  --bs-table-hover-color:   #212529;
}

/* Thead: slightly off-white background so headers read as headers */
.table > thead > tr > th,
.table > thead > tr > td {
  background-color: #f8fafc;
  color: #1e293b;
  border-bottom: 2px solid #dee2e6;
}

/* Body cells: always white-on-dark-text regardless of parent bg */
.table > tbody > tr > td,
.table > tbody > tr > th {
  background-color: var(--bs-table-bg, #ffffff);
  color: var(--bs-table-color, #212529);
}

/* Preserve Bootstrap dark-table variant readability */
.table-dark {
  --bs-table-bg:            #212529;
  --bs-table-color:         #ffffff;
  --bs-table-border-color:  #373b3e;
  --bs-table-striped-bg:    rgba(255, 255, 255, .05);
  --bs-table-striped-color: #ffffff;
  --bs-table-hover-bg:      rgba(255, 255, 255, .075);
  --bs-table-hover-color:   #ffffff;
}
.table-dark > thead > tr > th,
.table-dark > thead > tr > td {
  background-color: #343a40;
  color: #ffffff;
  border-bottom-color: #373b3e;
}
.table-dark > tbody > tr > td,
.table-dark > tbody > tr > th {
  background-color: var(--bs-table-bg, #212529);
  color: var(--bs-table-color, #ffffff);
}

.table th { font-size: .78rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; }
.table td { vertical-align: middle; }

/* ── Buttons ──────────────────────────────────────────────── */
.btn-xs {
  padding: .2rem .55rem;
  font-size: .75rem;
  border-radius: .3rem;
}

.quick-btn { transition: transform .1s, box-shadow .1s; }
.quick-btn:hover { transform: translateY(-1px); box-shadow: 0 3px 8px rgba(0,0,0,.1); }

/* ── Avatar ───────────────────────────────────────────────── */
.ams-avatar-sm {
  width: 32px; height: 32px; border-radius: 8px;
  background: linear-gradient(135deg, var(--ams-primary), #7c3aed);
  color: #fff; font-size: .8rem; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}

/* ── Notifications ────────────────────────────────────────── */
.notification-panel { max-height: 380px; overflow-y: auto; }
.notif-item { padding: .65rem 1rem !important; }
.notif-item.unread { background: #eff6ff; border-left: 3px solid var(--ams-primary); }
.notif-item:hover { background: #f0f4ff; }

/* ── Attendance Sheet ─────────────────────────────────────── */
.exam-sheet-table td, .exam-sheet-table th {
  font-size: .8rem;
  padding: .5rem .6rem;
}

/* ── Student Chips (Present-All) ──────────────────────────── */
.student-chip {
  border: 2px solid #e2e8f0;
  border-radius: 10px;
  padding: .5rem .6rem;
  cursor: pointer;
  text-align: center;
  transition: all .15s;
  user-select: none;
}
.student-chip.present { border-color: #22c55e; background: #f0fdf4; }
.student-chip.absent  { border-color: #ef4444; background: #fef2f2; }
.student-chip.absent .present-icon,
.student-chip.present .absent-icon { display: none; }
.chip-status { font-size: .9rem; margin-top: .2rem; }

/* ── Misc ─────────────────────────────────────────────────── */
.border-start.border-4 { border-left-width: 4px !important; }

.nav-tabs .nav-link { font-size: .85rem; }

/* Scrollbars for main content */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: #f1f5f9; }
::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 10px; }
::-webkit-scrollbar-thumb:hover { background: #94a3b8; }

/* ══════════════════════════════════════════════════════════════
   WCAG AA CONTRAST SYSTEM
   Minimum 4.5:1 for normal text, 3:1 for UI elements / icons.
   Design rule: red bg→white text, yellow bg→dark text,
                green bg→white text, info bg→dark text.
   All fixes are additive overrides; Bootstrap base is unchanged.
   ══════════════════════════════════════════════════════════════ */

/* ── 1. Bootstrap CSS-var baseline (light mode pin) ─────────── */
:root {
  /* Pin emphasis text colors used by alerts, badges, form-text  */
  --bs-warning-text-emphasis: #3d2b00;
  --bs-info-text-emphasis:    #0c4a6e;
  --bs-success-text-emphasis: #0a3d2d;
  --bs-danger-text-emphasis:  #58151c;
  --bs-primary-text-emphasis: #0c2461;

  /* Badge color vars (Bootstrap 5.3 reads these) */
  --bs-warning-color: #000;
  --bs-info-color:    #000;
}

/* ── 2. Solid badges ─────────────────────────────────────────── */
/* Red bg   → White text                                          */
.badge.bg-danger,
.badge.bg-danger:hover   { color: #fff !important; }
/* Yellow bg → Black text (yellow is too bright for white)        */
.badge.bg-warning,
.badge.bg-warning:hover  { color: #000 !important; }
/* Green bg  → White text                                         */
.badge.bg-success,
.badge.bg-success:hover  { color: #fff !important; }
/* Cyan/Info bg → Black text (cyan is too bright for white)       */
.badge.bg-info,
.badge.bg-info:hover     { color: #000 !important; }
/* bg-light badge */
.badge.bg-light          { color: #212529 !important; }
/* bg-secondary badge */
.badge.bg-secondary      { color: #fff !important; }
/* bg-dark badge */
.badge.bg-dark           { color: #fff !important; }

/* ── 3. Soft / opacity badges — enforce dark text ──────────── */
/* These patterns combine a very light tinted background with a  */
/* medium-saturation text-{color} which often fails 4.5:1.       */
/* Solution: use a much darker shade of the same hue.            */

.bg-success.bg-opacity-10,
.bg-success.bg-opacity-15,
.bg-success.bg-opacity-25 { color: #0a3d2d !important; }   /* dark green   7.5:1 */

.bg-danger.bg-opacity-10,
.bg-danger.bg-opacity-15,
.bg-danger.bg-opacity-25  { color: #58151c !important; }   /* dark crimson 7.2:1 */

.bg-warning.bg-opacity-10,
.bg-warning.bg-opacity-15,
.bg-warning.bg-opacity-25 { color: #5c3a00 !important; }   /* dark amber   7.8:1 */

.bg-info.bg-opacity-10,
.bg-info.bg-opacity-15,
.bg-info.bg-opacity-25    { color: #0c4a6e !important; }   /* dark teal    8.0:1 */

.bg-primary.bg-opacity-10,
.bg-primary.bg-opacity-15,
.bg-primary.bg-opacity-25 { color: #0c2461 !important; }   /* dark blue    9.1:1 */

.bg-secondary.bg-opacity-10,
.bg-secondary.bg-opacity-15,
.bg-secondary.bg-opacity-25 { color: #1e2530 !important; } /* dark gray    8.6:1 */

/* ── 4. Standalone text utilities on light backgrounds ─────── */
/* Scoped to .ams-main so navbar/sidebar custom colors are safe  */

/* text-info (#0dcaf0) on white = 1.8:1 — broken                 */
.ams-main .text-info    { color: #0c4a6e !important; }   /* 8.0:1 */

/* text-warning (#ffc107) on white = 1.8:1 — broken              */
.ams-main .text-warning { color: #8a5700 !important; }   /* 5.1:1 */

/* text-muted (#6c757d) on white = 4.0:1 — just under AA         */
.ams-main .text-muted   { color: #4b5563 !important; }   /* 5.2:1 */

/* text-secondary on white: same issue                            */
.ams-main .text-secondary { color: #4b5563 !important; }

/* ── 5. Alert components ─────────────────────────────────────── */
/* Bootstrap 5.3 sets these via CSS vars; re-pin for safety       */
.alert-warning {
  --bs-alert-color:  #3d2b00;
  --bs-alert-bg:     #fff8e1;
  --bs-alert-border-color: #ffe082;
  color: #3d2b00 !important;
}
.alert-info {
  --bs-alert-color:  #0c4a6e;
  --bs-alert-bg:     #e0f2fe;
  --bs-alert-border-color: #7dd3fc;
  color: #0c4a6e !important;
}
.alert-success {
  --bs-alert-color:  #0a3d2d;
  --bs-alert-bg:     #d1fae5;
  --bs-alert-border-color: #6ee7b7;
  color: #0a3d2d !important;
}
.alert-danger {
  --bs-alert-color:  #58151c;
  --bs-alert-bg:     #ffe4e6;
  --bs-alert-border-color: #fca5a5;
  color: #58151c !important;
}
/* Alert links inherit the fixed alert text color */
.alert-warning a, .alert-info a,
.alert-success a, .alert-danger a { color: inherit; font-weight: 600; }

/* ── 6. Buttons — design system compliance ───────────────────── */
.btn-warning          { color: #000 !important; }
.btn-warning:hover,
.btn-warning:focus    { color: #000 !important; }
.btn-info             { color: #000 !important; }
.btn-info:hover,
.btn-info:focus       { color: #000 !important; }
/* Outline warning: the yellow stroke on white is unreadable;    */
/* use dark amber for the text/border                            */
.btn-outline-warning          { color: #8a5700 !important; border-color: #d97706 !important; }
.btn-outline-warning:hover    { color: #000 !important;    background-color: #ffc107 !important; border-color: #ffc107 !important; }
.btn-outline-info             { color: #0c4a6e !important; border-color: #0284c7 !important; }
.btn-outline-info:hover       { color: #000 !important;    background-color: #0dcaf0 !important; border-color: #0dcaf0 !important; }

/* ── 7. Form help text ───────────────────────────────────────── */
.form-text { color: #4b5563 !important; }   /* was muted #6c757d = 4.0:1 */

/* ── 8. Table contextual row text ───────────────────────────── */
.table-warning td, .table-warning th { color: #3d2b00 !important; }
.table-info    td, .table-info    th { color: #0c4a6e !important; }
.table-success td, .table-success th { color: #0a3d2d !important; }
.table-danger  td, .table-danger  th { color: #58151c !important; }

/* ── 9. bg-opacity on non-badge elements (cards, stat icons) ── */
/* Stat icon containers are decorative (3:1 sufficient).         */
/* Force their icon color to meet 3:1 on the tinted background.  */
.stat-icon.bg-success.bg-opacity-10 { color: #0a3d2d !important; }
.stat-icon.bg-danger.bg-opacity-10  { color: #58151c !important; }
.stat-icon.bg-warning.bg-opacity-10 { color: #5c3a00 !important; }
.stat-icon.bg-info.bg-opacity-10    { color: #0c4a6e !important; }
.stat-icon.bg-primary.bg-opacity-10 { color: #0c2461 !important; }

/* ── 10. Sidebar active/hover remains intentionally white ────── */
/* (Sidebar uses its own CSS vars — not affected by .ams-main     */
/*  scoped rules; no override needed here.)                       */

/* ── 11. Low-contrast nav-tabs ──────────────────────────────── */
.nav-tabs .nav-link:not(.active) { color: #4b5563 !important; }
.nav-tabs .nav-link:not(.active):hover { color: var(--ams-primary) !important; }

/* ── 12. Progress bar text (small %) ────────────────────────── */
.progress-bar { font-size: .72rem; font-weight: 600; }

/* ── Print ── keep badge text readable when printed ─────────── */
@media print {
  .badge { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .badge.bg-warning { color: #000 !important; }
  .badge.bg-info    { color: #000 !important; }
}

/* ── Print Styles ─────────────────────────────────────────── */
@media print {
  .ams-navbar, .ams-sidebar, .ams-footer,
  .btn, .alert, form, .card-header, nav { display: none !important; }
  .ams-main { margin-left: 0 !important; }
  .ams-layout { padding-top: 0; }
  body { background: white; font-size: 11pt; }
  .table-success { background: #d4edda !important; -webkit-print-color-adjust: exact; }
  .table-warning { background: #fff3cd !important; -webkit-print-color-adjust: exact; }
  .table-danger  { background: #f8d7da !important; -webkit-print-color-adjust: exact; }
  .badge { border: 1px solid currentColor; }
  .card { border: 1px solid #dee2e6 !important; box-shadow: none !important; }
}

/* ── Responsive: Mobile ───────────────────────────────────── */
@media (max-width: 767.98px) {
  .ams-sidebar {
    transform: translateX(-100%);
  }
  body.sidebar-open .ams-sidebar {
    transform: translateX(0);
  }
  .ams-main, .ams-footer {
    margin-left: 0 !important;
  }
  .ams-sidebar-overlay {
    display: none;
    position: fixed; inset: 0;
    background: rgba(0,0,0,.4);
    z-index: 1025;
  }
  body.sidebar-open .ams-sidebar-overlay { display: block; }
}

/* ── Per-column search row ────────────────────────────────── */
.col-search-row th {
  padding: .25rem .35rem;
  background: #f8fafc;
}
.col-search-row .form-control-sm {
  font-size: .75rem;
  padding: .2rem .4rem;
  height: auto;
}

/* ══════════════════════════════════════════════════════════════
   DARK MODE  (html[data-ams-dark="1"])
   ══════════════════════════════════════════════════════════════ */

html[data-ams-dark="1"] {
  color-scheme: dark;
}
html[data-ams-dark="1"] body {
  background: #0d1117 !important;
  color: #e2e8f0;
}

/* Override the light-mode pin on .ams-main */
html[data-ams-dark="1"] .ams-main {
  --bs-body-color:          #e2e8f0;
  --bs-body-color-rgb:      226, 232, 240;
  --bs-secondary-color:     rgba(148, 163, 184, .75);
  --bs-secondary-color-rgb: 148, 163, 184;
  --bs-tertiary-color:      rgba(226, 232, 240, .5);
  --bs-emphasis-color:      #f1f5f9;
  --bs-emphasis-color-rgb:  241, 245, 249;
  --bs-link-color:          var(--ams-primary);
  background: #0d1117;
}

/* Cards */
html[data-ams-dark="1"] .card {
  background-color: #161b22 !important;
  border-color: #30363d !important;
  color: #e2e8f0;
}
html[data-ams-dark="1"] .card-header,
html[data-ams-dark="1"] .card-header.bg-white {
  background-color: #161b22 !important;
  border-bottom-color: #30363d !important;
  color: #e2e8f0 !important;
}
html[data-ams-dark="1"] .card-body { color: #e2e8f0; }

/* Department cards with inline background */
html[data-ams-dark="1"] [style*="background:#f8f9ff"],
html[data-ams-dark="1"] [style*="background:#f8faff"],
html[data-ams-dark="1"] [style*="background:#f8f9fa"],
html[data-ams-dark="1"] .bg-white { background-color: #161b22 !important; }
html[data-ams-dark="1"] [style*="background:#e8f0fe"],
html[data-ams-dark="1"] [style*="background:linear-gradient(135deg,#eef3ff"] { background: #1a2a3d !important; }

/* Tables */
html[data-ams-dark="1"] .table {
  --bs-table-bg:            #161b22;
  --bs-table-color:         #e2e8f0;
  --bs-table-border-color:  #30363d;
  --bs-table-striped-bg:    rgba(255,255,255,.03);
  --bs-table-striped-color: #e2e8f0;
  --bs-table-hover-bg:      rgba(255,255,255,.05);
  --bs-table-hover-color:   #e2e8f0;
}
html[data-ams-dark="1"] .table > thead > tr > th,
html[data-ams-dark="1"] .table > thead > tr > td {
  background-color: #0d1117;
  color: #8b949e;
  border-bottom-color: #30363d;
}
html[data-ams-dark="1"] .table > tbody > tr > td,
html[data-ams-dark="1"] .table > tbody > tr > th {
  background-color: #161b22;
  color: #e2e8f0;
}
html[data-ams-dark="1"] .table-light { --bs-table-bg: #1c2128; }
html[data-ams-dark="1"] .table-light > thead > tr > th { background-color: #1c2128; color: #8b949e; }

/* Form controls */
html[data-ams-dark="1"] .form-control,
html[data-ams-dark="1"] .form-select,
html[data-ams-dark="1"] .input-group-text {
  background-color: #0d1117;
  border-color: #30363d;
  color: #e2e8f0;
}
html[data-ams-dark="1"] .form-control::placeholder { color: #6e7681; }
html[data-ams-dark="1"] .form-control:focus,
html[data-ams-dark="1"] .form-select:focus {
  background-color: #0d1117;
  border-color: var(--ams-primary);
  color: #e2e8f0;
  box-shadow: 0 0 0 .2rem rgba(26,86,219,.25);
}
html[data-ams-dark="1"] .form-check-input {
  background-color: #21262d;
  border-color: #30363d;
}

/* Modals */
html[data-ams-dark="1"] .modal-content {
  background-color: #161b22;
  border-color: #30363d;
  color: #e2e8f0;
}
html[data-ams-dark="1"] .modal-header,
html[data-ams-dark="1"] .modal-footer { border-color: #30363d; }

/* Dropdowns */
html[data-ams-dark="1"] .dropdown-menu {
  background-color: #161b22;
  border-color: #30363d;
  color: #e2e8f0;
}
html[data-ams-dark="1"] .dropdown-item { color: #e2e8f0; }
html[data-ams-dark="1"] .dropdown-item:hover,
html[data-ams-dark="1"] .dropdown-item:focus { background-color: #21262d; color: #fff; }
html[data-ams-dark="1"] .dropdown-item.active { background-color: var(--ams-primary); }
html[data-ams-dark="1"] .dropdown-divider,
html[data-ams-dark="1"] .dropdown-header { border-color: #30363d; color: #8b949e; }

/* List groups */
html[data-ams-dark="1"] .list-group-item {
  background-color: #161b22;
  border-color: #30363d;
  color: #e2e8f0;
}
html[data-ams-dark="1"] .list-group-item-action:hover { background-color: #21262d; color: #fff; }
html[data-ams-dark="1"] .list-group-item.active { background-color: var(--ams-primary); border-color: var(--ams-primary); }

/* Alerts */
html[data-ams-dark="1"] .alert-light {
  background-color: #21262d !important;
  border-color: #30363d !important;
  color: #e2e8f0 !important;
}

/* Progress */
html[data-ams-dark="1"] .progress { background-color: #21262d; }

/* Borders + text utilities */
html[data-ams-dark="1"] .text-muted   { color: #8b949e !important; }
html[data-ams-dark="1"] .text-dark    { color: #e2e8f0 !important; }
html[data-ams-dark="1"] .text-black   { color: #e2e8f0 !important; }
html[data-ams-dark="1"] .border       { border-color: #30363d !important; }
html[data-ams-dark="1"] .border-bottom{ border-bottom-color: #30363d !important; }
html[data-ams-dark="1"] .border-top   { border-top-color: #30363d !important; }
html[data-ams-dark="1"] hr            { border-color: #30363d; }
html[data-ams-dark="1"] .bg-light     { background-color: #21262d !important; }

/* Notification panel */
html[data-ams-dark="1"] .notif-item.unread { background: #1a2a3d; }
html[data-ams-dark="1"] .notif-item:hover  { background: #21262d; }

/* Scrollbars */
html[data-ams-dark="1"] ::-webkit-scrollbar-track { background: #0d1117; }
html[data-ams-dark="1"] ::-webkit-scrollbar-thumb { background: #30363d; }

/* ── Night mode toggle button ────────────────────────────── */
.ams-darkmode-btn {
  width: 36px; height: 36px;
  border-radius: 50%;
  border: none;
  background: rgba(255,255,255,.12);
  color: #fff;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: background .15s;
  font-size: 1rem;
  flex-shrink: 0;
}
.ams-darkmode-btn:hover { background: rgba(255,255,255,.22); }

/* ── Settings page color swatches ────────────────────────── */
.theme-swatch {
  width: 36px; height: 36px; border-radius: 50%;
  cursor: pointer; border: 3px solid transparent;
  transition: transform .15s, border-color .15s;
  flex-shrink: 0;
}
.theme-swatch:hover  { transform: scale(1.15); }
.theme-swatch.active { border-color: #fff; box-shadow: 0 0 0 2px #0d6efd; }
.theme-swatch-sm { width: 28px; height: 28px; border-radius: 50%; cursor: pointer; border: 2px solid transparent; transition: transform .12s; }
.theme-swatch-sm:hover  { transform: scale(1.18); }
.theme-swatch-sm.active { border-color: #fff; box-shadow: 0 0 0 2px #0d6efd; }

/* ───────────────────────────────────────────────────────────────────────────
 * Standardized calendar + dropdown UI (system-wide).
 * Matches the Attendance page: a rounded, soft-shadowed Flatpickr calendar with
 * a light header, and rounded form-select dropdowns. Flatpickr is loaded in the
 * shared header and auto-applied to every date field by app.js, so any page —
 * present or future — gets this look with no extra markup.
 * ─────────────────────────────────────────────────────────────────────────── */

/* Calendar (Flatpickr) */
.flatpickr-calendar {
    border-radius: .75rem !important;
    box-shadow: 0 8px 30px rgba(0,0,0,.15) !important;
    font-family: inherit !important;
    border: 1px solid #dee2e6 !important;
}
.flatpickr-months .flatpickr-month,
.flatpickr-weekdays,
span.flatpickr-weekday {
    background: #f8f9fa !important;
    color: #495057 !important;
}
.flatpickr-prev-month:hover svg,
.flatpickr-next-month:hover svg { fill: #0d6efd !important; }
.flatpickr-day.today   { border-color: #0d6efd !important; }
.flatpickr-day:hover   { background: #e9ecef !important; }
.flatpickr-day.selected,
.flatpickr-day.selected:hover,
.flatpickr-day.startRange,
.flatpickr-day.endRange {
    background: #0d6efd !important;
    border-color: #0d6efd !important;
    color: #fff !important;
}

/* monthSelect plugin — match the day picker's look (rounded cells, blue accent). */
.flatpickr-monthSelect-month {
    border-radius: .5rem !important;
}
.flatpickr-monthSelect-month.today  { border-color: #0d6efd !important; }
.flatpickr-monthSelect-month:hover  { background: #e9ecef !important; }
.flatpickr-monthSelect-month.selected {
    background: #0d6efd !important;
    color: #fff !important;
}

/* Inputs, textboxes, textareas, dropdowns — one rounded, comfortable style
 * across the whole form-control family, matching the Attendance filter look.
 * Small/large variants keep proportional rounding; textareas keep their natural
 * height (no forced min-height). */
.form-control,
.form-select { border-radius: .65rem; }
.form-control:not(textarea):not(.form-control-sm):not(.form-control-lg):not(.form-control-color),
.form-select:not(.form-select-sm):not(.form-select-lg) { min-height: 42px; }
.form-control-sm,
.form-select-sm { border-radius: .5rem; }

/* Keep input-group end corners consistent with the new radius (default size). */
.input-group:not(.input-group-sm):not(.input-group-lg) > :first-child:not(:last-child) {
    border-top-left-radius: .65rem; border-bottom-left-radius: .65rem;
}
.input-group:not(.input-group-sm):not(.input-group-lg) > :last-child:not(:first-child) {
    border-top-right-radius: .65rem; border-bottom-right-radius: .65rem;
}

/* Checkboxes & radios — larger, crisper, pointer cursor, soft focus ring.
 * Size stays within Bootstrap's 1.5em check column, so layouts don't shift. */
.form-check-input {
    width: 1.15em;
    height: 1.15em;
    margin-top: .12em;
    border: 2px solid #6c757d;          /* thicker, darker border for clear visibility */
    cursor: pointer;
    transition: background-color .15s ease, border-color .15s ease, box-shadow .15s ease;
}
.form-check-input:hover            { border-color: #0d6efd; }
.form-check-input:focus            { border-color: #0d6efd; box-shadow: 0 0 0 .2rem rgba(13,110,253,.20); }
.form-check-input:checked          { background-color: #0d6efd; border-color: #0d6efd; }
.form-check-label                  { cursor: pointer; }
.form-switch .form-check-input     { height: 1.15em; }
/* Dark mode: visible border, box blends with the dark surface (not glaring white). */
html[data-ams-dark="1"] .form-check-input          { background-color: #161b22; border-color: #8b949e; }
html[data-ams-dark="1"] .form-check-input:checked  { background-color: #0d6efd; border-color: #0d6efd; }

/* Date fields enhanced by Flatpickr read crisply even though they're readonly. */
input.flatpickr-input[readonly] { cursor: pointer; }

/* Calendar in dark mode — matches the app's dark palette so the popup blends in. */
html[data-ams-dark="1"] .flatpickr-calendar {
    background: #161b22 !important;
    border-color: #30363d !important;
    box-shadow: 0 8px 30px rgba(0,0,0,.55) !important;
    color: #e2e8f0 !important;
}
html[data-ams-dark="1"] .flatpickr-calendar.arrowTop::before,
html[data-ams-dark="1"] .flatpickr-calendar.arrowTop::after  { border-bottom-color: #161b22 !important; }
html[data-ams-dark="1"] .flatpickr-calendar.arrowBottom::before,
html[data-ams-dark="1"] .flatpickr-calendar.arrowBottom::after { border-top-color: #161b22 !important; }
html[data-ams-dark="1"] .flatpickr-months .flatpickr-month,
html[data-ams-dark="1"] .flatpickr-weekdays,
html[data-ams-dark="1"] span.flatpickr-weekday {
    background: #1c2128 !important;
    color: #8b949e !important;
}
html[data-ams-dark="1"] .flatpickr-current-month input.cur-year,
html[data-ams-dark="1"] .flatpickr-current-month .flatpickr-monthDropdown-months,
html[data-ams-dark="1"] .numInputWrapper span { color: #e2e8f0 !important; }
html[data-ams-dark="1"] .flatpickr-monthDropdown-months { background: #161b22 !important; }
html[data-ams-dark="1"] .flatpickr-day { color: #e2e8f0 !important; }
html[data-ams-dark="1"] .flatpickr-day:hover { background: #30363d !important; border-color: #30363d !important; }
html[data-ams-dark="1"] .flatpickr-day.today { border-color: #0d6efd !important; }
html[data-ams-dark="1"] .flatpickr-day.flatpickr-disabled,
html[data-ams-dark="1"] .flatpickr-day.prevMonthDay,
html[data-ams-dark="1"] .flatpickr-day.nextMonthDay { color: #6e7681 !important; }
html[data-ams-dark="1"] .flatpickr-day.selected,
html[data-ams-dark="1"] .flatpickr-day.selected:hover {
    background: #0d6efd !important; border-color: #0d6efd !important; color: #fff !important;
}
html[data-ams-dark="1"] .flatpickr-months .flatpickr-prev-month svg,
html[data-ams-dark="1"] .flatpickr-months .flatpickr-next-month svg { fill: #e2e8f0 !important; }
html[data-ams-dark="1"] .flatpickr-monthSelect-month { color: #e2e8f0 !important; }
html[data-ams-dark="1"] .flatpickr-monthSelect-month:hover { background: #30363d !important; }
html[data-ams-dark="1"] .flatpickr-monthSelect-month.selected {
    background: #0d6efd !important; color: #fff !important;
}

/* ── Scrolling announcement ticker ─────────────────────────────
   Admin-authored notices rendered at the top of every page (see
   includes/header.php + admin/announcements.php). Two identical text
   Two display modes (admin-selectable):
   • scroll - a SINGLE track padded left by 100% of the viewport, so the text
     starts fully off the right edge, scrolls left, and completely exits before
     the loop repeats. Text is never shown twice at once (no right-side clone).
   • static - text stays put; when there are several notices they cross-fade
     one at a time (rotation handled by a small script in header.php). */
.ams-announce {
  display: flex;
  align-items: center;
  gap: .6rem;
  padding: .4rem .9rem;
  font-size: .82rem;
  font-weight: 600;
  border-bottom: 1px solid rgba(0,0,0,.08);
  overflow: hidden;
}
.ams-announce-ico { flex-shrink: 0; font-size: .95rem; opacity: .9; }
/* min-width:0 is essential: without it this flex item refuses to shrink below
   the track's intrinsic width, so overflow:hidden never clips and the marquee
   appears not to move. With it, the viewport is the true clipping window. */
.ams-announce-viewport { flex: 1 1 auto; min-width: 0; overflow: hidden; }

/* ── Scroll (rotating) mode — single-pass marquee ──
   The track is ABSOLUTELY positioned so its (deliberately huge) nowrap width
   never contributes to the layout - otherwise it stretches the whole page to
   the right. The viewport is the relative clipping window. */
.ams-announce-mode-scroll .ams-announce-viewport { position: relative; height: 1.5em; }
.ams-announce-mode-scroll .ams-announce-track {
  position: absolute;
  top: 0;
  left: 0;
  line-height: 1.5em;
  white-space: nowrap;
  padding-left: 100%;          /* start off the right edge of the viewport */
  will-change: transform;
  animation-name: ams-ticker;
  animation-duration: 30s;     /* overridden inline per content length */
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}
.ams-announce:hover .ams-announce-track { animation-play-state: paused; }
.ams-announce-mode-scroll .ams-announce-item { padding-right: 3rem; position: relative; }
.ams-announce-mode-scroll .ams-announce-item:not(:last-child)::after {
  content: "•";
  position: absolute;
  right: 1.35rem;
  opacity: .5;
}
@keyframes ams-ticker {
  from { transform: translateX(0); }
  to   { transform: translateX(-100%); }   /* fully off the left edge */
}

/* ── Static mode — one notice at a time, cross-fading ── */
.ams-announce-mode-static .ams-announce-viewport { position: relative; height: 1.5em; }
.ams-announce-static { position: relative; height: 100%; }
.ams-announce-mode-static .ams-announce-item {
  position: absolute;
  inset: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  opacity: 0;
  transition: opacity .5s ease;
}
.ams-announce-mode-static .ams-announce-item.active { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  .ams-announce-mode-scroll .ams-announce-track {
    position: static;
    animation: none;
    padding-left: 0;
  }
  .ams-announce-mode-scroll .ams-announce-viewport { height: auto; overflow-x: auto; }
}
/* Style variants (light) */
.ams-announce-info    { background: #e7f1ff; color: #0c4a6e; }
.ams-announce-success { background: #e6f6ec; color: #14532d; }
.ams-announce-warning { background: #fff4e0; color: #7a4d00; }
.ams-announce-danger  { background: #fde8e8; color: #86181d; }
.ams-announce-primary { background: #e4ecff; color: #1e3a8a; }
.ams-announce-purple  { background: #f0e9ff; color: #5b21b6; }
.ams-announce-teal    { background: #dff5f2; color: #0f5c56; }
.ams-announce-dark    { background: #212936; color: #f4f6fb; }
/* A brand-gradient "highlight" style that stays vivid in both themes. */
.ams-announce-highlight {
  background: linear-gradient(90deg, var(--ams-primary, #1a56db), #6d28d9);
  color: #fff;
}
.ams-announce-dark .ams-announce-item::after,
.ams-announce-highlight .ams-announce-item::after { opacity: .65; }

/* Style variants (dark) */
html[data-ams-dark="1"] .ams-announce { border-bottom-color: rgba(255,255,255,.08); }
html[data-ams-dark="1"] .ams-announce-info    { background: #0b2942; color: #cfe6ff; }
html[data-ams-dark="1"] .ams-announce-success { background: #0d2a1a; color: #c6f0d4; }
html[data-ams-dark="1"] .ams-announce-warning { background: #3a2a08; color: #ffe1ab; }
html[data-ams-dark="1"] .ams-announce-danger  { background: #3a1416; color: #ffc9cc; }
html[data-ams-dark="1"] .ams-announce-primary { background: #12224a; color: #cdd9ff; }
html[data-ams-dark="1"] .ams-announce-purple  { background: #241340; color: #e2d4ff; }
html[data-ams-dark="1"] .ams-announce-teal    { background: #08302c; color: #b8efe6; }
html[data-ams-dark="1"] .ams-announce-dark    { background: #0b0f16; color: #e8ecf4; }

/* ── Login-page announcement — a floating glass banner ──
   The standalone login pages are dark/glassmorphic, so the flat in-portal bar
   looks out of place. Here the ticker becomes a centred, translucent, blurred
   banner that sits over the hero without fighting it. Scoped so the in-portal
   look is untouched. */
.ams-announce-login {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 1050;
  display: flex;
  justify-content: center;
  padding: 14px 16px;
  pointer-events: none;                 /* clicks pass through the empty gutter */
}
.ams-announce-login .ams-announce {
  pointer-events: auto;
  width: 100%;
  max-width: 720px;
  gap: .7rem;
  padding: .5rem .7rem .5rem .55rem;
  border: 1px solid rgba(255,255,255,.16);
  border-radius: 14px;
  background: rgba(15,23,42,.55) !important;         /* slate glass, kept for every style */
  -webkit-backdrop-filter: blur(16px) saturate(150%);
  backdrop-filter: blur(16px) saturate(150%);
  color: #f1f5f9;                                    /* default; tinted per style below */
  box-shadow: 0 14px 44px rgba(0,0,0,.38);
  animation: ams-announce-drop .5s cubic-bezier(.16,.84,.44,1) both;
}
/* Text + border tint follow the style chosen on the admin announcements page,
   using each style's light-on-dark tint so it reads on the glass background. */
.ams-announce-login .ams-announce-info      { color: #cfe6ff; border-color: rgba(160,205,255,.50); }
.ams-announce-login .ams-announce-success   { color: #c6f0d4; border-color: rgba(150,225,180,.50); }
.ams-announce-login .ams-announce-warning   { color: #ffe1ab; border-color: rgba(245,205,130,.50); }
.ams-announce-login .ams-announce-danger    { color: #ffc9cc; border-color: rgba(250,160,165,.55); }
.ams-announce-login .ams-announce-primary   { color: #cdd9ff; border-color: rgba(160,180,255,.50); }
.ams-announce-login .ams-announce-purple    { color: #e2d4ff; border-color: rgba(200,175,255,.50); }
.ams-announce-login .ams-announce-teal      { color: #b8efe6; border-color: rgba(140,225,210,.50); }
.ams-announce-login .ams-announce-dark      { color: #e8ecf4; border-color: rgba(255,255,255,.28); }
.ams-announce-login .ams-announce-highlight { color: #ffffff; border-color: rgba(255,255,255,.40); }
/* Circular icon badge — colour inherits the per-style text tint above. */
.ams-announce-login .ams-announce-ico {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 30px; height: 30px;
  border-radius: 50%;
  background: rgba(255,255,255,.12);
  font-size: .88rem;
  opacity: 1;
}
/* Inline placement — the banner flows within the login layout (below the
   heading) instead of being pinned to the top of the viewport. */
.ams-announce-login.is-inline {
  position: static;
  padding: 0;
  margin: 0 auto 1.25rem;
  width: 100%;
}
@keyframes ams-announce-drop {
  from { opacity: 0; transform: translateY(-14px); }
  to   { opacity: 1; transform: translateY(0); }
}
@media (max-width: 576px) {
  .ams-announce-login { padding: 10px 10px; }
  .ams-announce-login .ams-announce { border-radius: 12px; }
}

/* Style picker swatches (admin/announcements.php) */
.ams-style-swatch {
  border: 1px solid rgba(0,0,0,.12);
  font-weight: 600;
  opacity: .7;
  transition: opacity .15s, box-shadow .15s;
}
.ams-style-swatch:hover { opacity: 1; }
.btn-check:checked + .ams-style-swatch {
  opacity: 1;
  font-weight: 700;
  box-shadow: 0 0 0 .18rem rgba(26,86,219,.45);
}

/* ── Remuneration status colours: ONE per status, on every page (6 Oct 2026) ──
   Used through remunerationStatusClass() in includes/remuneration.php. In the order a
   claim travels: grey draft -> green finalised, red when sent back to the teacher. */
.rem-st           { font-weight: 600; }
.rem-st-draft     { background-color: #6c757d !important; color: #fff !important; }  /* grey: still the teacher's */
.rem-st-submitted { background-color: #0dcaf0 !important; color: #000 !important; }  /* cyan: just sent */
.rem-st-pending   { background-color: #ffc107 !important; color: #000 !important; }  /* amber: waiting for a checker */
.rem-st-assigned  { background-color: #6f42c1 !important; color: #fff !important; }  /* purple: with a checker */
.rem-st-checked   { background-color: #20c997 !important; color: #000 !important; }  /* teal: checked */
.rem-st-queried   { background-color: #fd7e14 !important; color: #000 !important; }  /* orange: a question is open */
.rem-st-forwarded { background-color: #0d6efd !important; color: #fff !important; }  /* blue: with the Controller */
.rem-st-finalised { background-color: #198754 !important; color: #fff !important; }  /* green: finalised */
.rem-st-returned  { background-color: #dc3545 !important; color: #fff !important; }  /* red: sent back to the teacher */
.rem-st-other     { background-color: #adb5bd !important; color: #000 !important; }

/* ── Mark entry: no up/down spinner on the number box (26 Oct 2026) ──
   Marks are typed, never stepped. Paired with the .no-spin wheel/arrow-key guard in
   app.js, which stops a mark changing by itself while the page is scrolled. */
input[type=number].no-spin { -moz-appearance: textfield; appearance: textfield; }
input[type=number].no-spin::-webkit-outer-spin-button,
input[type=number].no-spin::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }