:root {
  --navy: #1e3a8a;
  --tcc-orange: #F57C00;
  --tcc-navy: #0D47A1;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  /* Professional dark navy academic theme */
  background: linear-gradient(135deg, #0a192f 0%, #1e3a8a 100%);
  min-height: 100vh;
}

/* ---------- Login background ---------- */
.login-bg {
  position: relative;
  background:
    radial-gradient(900px 520px at 12% -10%, rgba(255, 255, 255, 0.06), transparent 60%),
    linear-gradient(135deg, #0a192f 0%, #1e3a8a 100%);
}

.login-bg::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(255, 255, 255, 0.09) 1px, transparent 1px);
  background-size: 22px 22px;
  pointer-events: none;
}

.login-card {
  position: relative;
  background: #ffffff;
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.3), 0 8px 10px -6px rgba(0, 0, 0, 0.3);
}

/* ---------- Logo ---------- */
.logo-holder {
  width: 76px;
  height: 76px;
  border-radius: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2.4rem;
  font-weight: 800;
  color: #fff;
  background: linear-gradient(135deg, #2563eb, #1e3a8a);
  box-shadow: 0 10px 30px -8px rgba(30, 64, 175, 0.8), inset 0 1px 0 rgba(255, 255, 255, 0.25);
}

.logo-sm {
  width: 38px;
  height: 38px;
  border-radius: 10px;
  font-size: 1.05rem;
  box-shadow: 0 4px 12px -4px rgba(30, 64, 175, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

/* ---------- Animations ---------- */
.fade-in {
  animation: fadeIn 0.4s ease both;
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

.toast {
  animation: toastIn 0.25s ease both;
}

.toast-out {
  animation: toastOut 0.3s ease both;
}

@keyframes toastIn {
  from {
    opacity: 0;
    transform: translateX(24px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes toastOut {
  to {
    opacity: 0;
    transform: translateX(24px);
  }
}

.progress-fill {
  transition: width 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}

/* ---------- UI helpers ---------- */
.tab-active {
  background: #fff;
  color: var(--tcc-orange);
  box-shadow: 0 1px 4px rgba(15, 23, 42, 0.12);
}

.role-tab {
  color: #64748b;
}

.role-tab:hover:not(.tab-active) {
  color: var(--tcc-orange);
  background: rgba(245, 124, 0, 0.06);
}

.chip {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.28rem 0.65rem;
  border-radius: 9999px;
  font-size: 0.72rem;
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
}

.table-scroll {
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
}

/* ---------- Setup wizard: roster-mode radio cards ----------
   The radio itself is .sr-only, so the visible card is driven by a
   :checked sibling selector. The cards are plain <label> wrappers, which
   makes them keyboard-reachable through the radio for free. */
#sm-mode-roll:checked ~ .sm-mode-card,
#sm-mode-custom:checked ~ .sm-mode-card {
  border-color: #f59e0b;
  background: #fffbeb;
  box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.18);
}

#sm-mode-custom:checked ~ .sm-mode-card {
  border-color: var(--navy);
  background: #eff4fb;
  box-shadow: 0 0 0 3px rgba(30, 58, 138, 0.16);
}

#sm-mode-roll:focus-visible ~ .sm-mode-card,
#sm-mode-custom:focus-visible ~ .sm-mode-card {
  outline: 2px solid #f59e0b;
  outline-offset: 2px;
}

.active-col {
  background: #eff4fb;
  box-shadow: inset 0 0 0 1px #bdd0ee;
}

th.active-col {
  background: #dbe7f6;
  color: #19307a;
}

/* ---------- Print (certificate window) ---------- */
@media print {
  body,
  body.dark-theme {
    background: #fff !important;
    color: #000 !important;
  }
}

/* ==================== Dark / Light theme ==================== */
/* Floating theme toggle button (portals' top-right nav) */
.theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 0.75rem;
  border: 1px solid #cbd5e1;
  background: transparent;
  color: #64748b;
  font-size: 1.1rem;
  line-height: 1;
  cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.theme-toggle:hover {
  background: rgba(148, 163, 184, 0.14);
  color: #0f172a;
}
.theme-toggle .icon-sun { display: none; }
.theme-toggle .icon-moon { display: inline; }

/* Login page: the toggle floats over the navy gradient — give it a subtle
   translucent pill so it reads clearly while the page is still light. */
.login-bg .theme-toggle {
  border-color: rgba(255, 255, 255, 0.35);
  color: rgba(255, 255, 255, 0.9);
  background: rgba(255, 255, 255, 0.08);
}
.login-bg .theme-toggle:hover {
  background: rgba(255, 255, 255, 0.16);
  color: #fff;
}

.dark-theme .theme-toggle {
  border-color: #334155;
  color: #f8fafc;
}
.dark-theme .theme-toggle:hover {
  background: rgba(148, 163, 184, 0.2);
  color: #fff;
}
.dark-theme .theme-toggle .icon-sun { display: inline; }
.dark-theme .theme-toggle .icon-moon { display: none; }

/* ---------- Dark theme overrides (Slate 900 / 800 / 700) ---------- */
body.dark-theme {
  background: #0f172a;   /* Slate 900 */
  color: #f8fafc;        /* Off-white  */
  /* Tell the engine to render native widget internals (select popups, scrollbars,
     autofill fill, focus rings, checkbox glyphs) with DARK styling. Without this
     the page stays "light scheme" inside a dark UI, which is what makes autofilled
     login fields paint a light background under our light text colour. */
  color-scheme: dark;
}

/* Page surfaces */
.dark-theme #student-view,
.dark-theme #signatory-view,
.dark-theme .bg-slate-100 { background-color: #0f172a; }

/* Cards / containers / surfaces */
.dark-theme .bg-white,
.dark-theme .bg-slate-50 { background-color: #1e293b; }   /* Slate 800 */
.dark-theme .bg-slate-200 { background-color: #334155; }  /* Slate 700 */
.dark-theme .bg-navy-50  { background-color: #2b3a56; }
.dark-theme .bg-navy-100 { background-color: #334155; }

/* Active tab pill + role tabs (login & forgot modal) */
.dark-theme .tab-active {
  background: #334155;
  color: #f8fafc;
  box-shadow: none;
}
.dark-theme .role-tab { color: #94a3b8; }

/* Primary / secondary text */
.dark-theme .text-slate-800 { color: #f8fafc; }
.dark-theme .text-slate-700 { color: #e2e8f0; }
.dark-theme .text-slate-600 { color: #cbd5e1; }
.dark-theme .text-slate-500,
.dark-theme .text-slate-400 { color: #94a3b8; }
.dark-theme .text-slate-300 { color: #cbd5e1; }
.dark-theme .text-navy-800  { color: #f8fafc; }
.dark-theme .text-navy-700  { color: #cbd5e1; }
.dark-theme .text-navy-500  { color: #94a3b8; }
.dark-theme .text-tcc-navy  { color: #93b0e2; }

/* Borders & dividers */
.dark-theme .border-slate-200,
.dark-theme .border-slate-300,
.dark-theme .border-navy-100,
.dark-theme .border-navy-200 { border-color: #334155; }
.dark-theme .ring-slate-200 { --tw-ring-color: #334155; }
.dark-theme .divide-slate-100 > :not([hidden]) ~ :not([hidden]) {
  border-color: #334155 !important;
}

/* Form controls (inputs, selects, textareas) */
.dark-theme input,
.dark-theme select,
.dark-theme textarea {
  background-color: #1e293b;
  border-color: #334155;
  color: #f8fafc;
  /* WebKit/Blink paint form text through -webkit-text-fill-color when it is set,
     and that beats `color`. Pin it (and the caret) so typed text is always
     legible no matter what the engine defaults to. */
  -webkit-text-fill-color: #f8fafc;
  caret-color: #f8fafc;
}
/* ---- Focus state --------------------------------------------------------
   Form controls carry Tailwind focus utilities, and one of them beats the
   dark-mode override above:

     .focus\:bg-white:focus   -> (0,2,0)  background-color: #fff
     .dark-theme input        -> (0,1,1)  background-color: #1e293b

   Two classes outrank one class + one element, so clicking into a field
   flipped its background to white while -webkit-text-fill-color stayed
   #f8fafc - near-white text on a white box, i.e. invisible typed text. This
   re-asserts the dark fill at (0,2,1), which outranks both.

   The ring is the other half: the controls ship with ring-navy-700/20 and
   border-navy-700, which are dark navy on a dark panel and therefore invisible.
   A sky-blue ring is used instead so keyboard focus is actually visible.
   Declared before the autofill block so the autofill fill still wins on
   autofilled+focused fields (see the refinement after it). */
.dark-theme input:focus,
.dark-theme select:focus,
.dark-theme textarea:focus {
  background-color: #1e293b;
  color: #ffffff;
  -webkit-text-fill-color: #ffffff;
  caret-color: #ffffff;
  border-color: #38bdf8;
  box-shadow: 0 0 0 3px rgba(56, 189, 248, 0.25);
}

.dark-theme input::placeholder,
.dark-theme textarea::placeholder {
  color: #64748b;
  -webkit-text-fill-color: #64748b;
}
.dark-theme input:disabled,
.dark-theme select:disabled,
.dark-theme textarea:disabled {
  color: #94a3b8;
  -webkit-text-fill-color: #94a3b8;
  background-color: #16213a;
}

/* Select dropdown popups are drawn from the <option> styles — without these the
   option text stays dark-on-dark / light-on-light inside the native list. */
.dark-theme option,
.dark-theme optgroup {
  background-color: #1e293b;
  color: #f8fafc;
  -webkit-text-fill-color: #f8fafc;
}
.dark-theme optgroup { font-weight: 700; }

/* Chrome/Edge password manager + browser autofill force a light fill that a plain
   `background-color` cannot override, leaving our light text on a light chip.
   The inset box-shadow paints the dark fill back over it. */
.dark-theme input:-webkit-autofill,
.dark-theme input:-webkit-autofill:hover,
.dark-theme input:-webkit-autofill:focus,
.dark-theme input:-webkit-autofill:active {
  -webkit-text-fill-color: #f8fafc;
  caret-color: #f8fafc;
  -webkit-box-shadow: 0 0 0 1000px #1e293b inset;
  box-shadow: 0 0 0 1000px #1e293b inset;
  /* keeps the transition from re-letting the UA fill bleed back in */
  transition: background-color 600000s 0s, color 600000s 0s;
}
/* An autofilled field that is then focused would otherwise get the plain focus
   ring, whose box-shadow has no inset fill - letting the browser's light
   autofill chip show through again. Re-state the ring *and* the fill together. */
.dark-theme input:-webkit-autofill:focus {
  border-color: #38bdf8;
  box-shadow: 0 0 0 3px rgba(56, 189, 248, 0.25), 0 0 0 1000px #1e293b inset;
}
/* Same protection for the "Remember me" / "Select all" checkboxes. */
.dark-theme input[type="checkbox"] {
  background-color: #1e293b;
  border-color: #334155;
  accent-color: #648ad3;
}

/* Tables: dark slate headers + alternating rows */
.dark-theme thead tr.text-slate-500,
.dark-theme thead tr.text-slate-600,
.dark-theme thead tr,
.dark-theme thead th {
  background-color: #1e293b;
  color: #f1f5f9;
}
.dark-theme tbody tr:nth-child(odd)  { background-color: #1e293b; }
.dark-theme tbody tr:nth-child(even) { background-color: #16213a; }

/* Active-column highlight stays vivid on dark */
.dark-theme .active-col,
.dark-theme th.active-col {
  background-color: #2b4ba6 !important;
  color: #fff !important;
  box-shadow: inset 0 0 0 1px #93b0e2;
}

/* Hover states for slate / navy utilities */
.dark-theme .hover\:bg-slate-50:hover,
.dark-theme .hover\:bg-slate-50\/60:hover { background-color: #243249; }
.dark-theme .hover\:bg-slate-100:hover   { background-color: #243249; }
.dark-theme .hover\:bg-navy-50:hover     { background-color: #2b3a56; }
.dark-theme .hover\:bg-navy-100:hover    { background-color: #334155; }

/* ===================== Digital signature =====================
   A signature is dark ink on a transparent background, and the drawing canvas is
   paper. Both therefore keep a white surface in dark mode: without this the
   ink is invisible on a dark panel, and the user cannot see what they are about
   to save. It is an ID/class rule rather than an !important override, so it
   simply outranks .dark-theme .bg-white instead of fighting it. */
#sig-canvas {
  background-color: #ffffff;
  /* One code path for mouse, touch and stylus, and stops a touch drag from
     scrolling the page while signing. */
  touch-action: none;
}
.sig-plate {
  background-color: #ffffff;
}
/* The saved/preview badge is the only coloured element on the plate row, so it
   keeps its own contrast rather than following the dark remap. */
.dark-theme #sig-state { background-color: #334155; color: #e2e8f0; }