/* Tehfeez Management System — base styles
   Palette per 00_PROJECT_CHARTER.md: dull gold, navy, creamy blues,
   creamy light browns. Phase 9: sidebar layout + modern visual pass,
   same palette, no new dependencies (no icon font, no JS framework). */

:root {
  --tms-navy: #1f2d40;
  --tms-navy-light: #2c4055;
  --tms-navy-dark: #16212f;
  --tms-gold: #c9a06a;
  --tms-gold-light: #d8b784;
  --tms-gold-dark: #a97d3f;
  --tms-gold-soft: #e8d5b5;
  --tms-cream-blue: #f3f6f8;
  --tms-cream-brown: #f6efe4;
  --tms-cream-brown-dark: #e6d9c3;
  --tms-text: #26261f;
  --tms-text-muted: #6b6459;
  --tms-white: #fffdf9;
  --tms-danger: #b0503c;
  --tms-danger-soft: #fcf2f0;
  --tms-success: #4c7a52;
  --tms-success-soft: #eaf3ea;
  --tms-warn: #8a5a21;
  --tms-warn-soft: #fdf5e9;

  --tms-radius-sm: 9px;
  --tms-radius: 12px;
  --tms-radius-lg: 18px;
  --tms-radius-xl: 24px;

  /* Layered, tinted shadows read softer than flat grey ones. */
  --tms-shadow-sm: 0 1px 2px rgba(31, 45, 64, 0.05), 0 1px 3px rgba(31, 45, 64, 0.06);
  --tms-shadow: 0 1px 3px rgba(31, 45, 64, 0.05), 0 8px 24px rgba(31, 45, 64, 0.07);
  --tms-shadow-lift: 0 6px 18px rgba(31, 45, 64, 0.10), 0 18px 40px rgba(31, 45, 64, 0.12);
  --tms-glow-gold: 0 6px 22px rgba(169, 125, 63, 0.34);

  /* Glossy surfaces: warm ivory (not pure white) so cards harmonize with
     the cream-brown page instead of reading cold against it. */
  --tms-surface: linear-gradient(180deg, #fffdf7 0%, #fdf8ec 100%);
  --tms-surface-raised: linear-gradient(180deg, #fffefa 0%, #fbf4e6 100%);
  --tms-gold-grad: linear-gradient(135deg, var(--tms-gold-light) 0%, var(--tms-gold-dark) 100%);
  --tms-navy-grad: linear-gradient(160deg, var(--tms-navy-light) 0%, var(--tms-navy-dark) 100%);
  --tms-hairline: rgba(255, 255, 255, 0.6);

  --tms-border: #e7ded0;
  /* Page background: a warm creamish brown the white cards sit on. */
  --tms-bg: #efe4d1;
  --tms-sidebar-width: 252px;
  --tms-topbar-height: 62px;
}

/* Inter, self-hosted.
   The stylesheet always asked for Inter but nothing ever loaded it, so every
   phone silently fell back to whatever it had. It is served from our own
   static files (no third-party request, works offline in the PWA) as a single
   variable-weight file — one 48 KB download covers every weight from 400 to
   800 that this design uses. Chosen over a display face like Montserrat
   because it is drawn for interfaces: legible at small sizes on a phone, and
   it carries true tabular figures, which is what makes number columns line up. */
@font-face {
  font-family: "Inter";
  src: url("../fonts/inter-latin-var.260c81a4759b.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: "Inter", "Segoe UI", Roboto, -apple-system, BlinkMacSystemFont, sans-serif;
  /* Soft two-tone wash instead of a flat fill — reads richer, still light. */
  background:
    radial-gradient(1200px 480px at 78% -8%, rgba(201, 160, 106, 0.14), transparent 60%),
    radial-gradient(900px 500px at -5% 105%, rgba(31, 45, 64, 0.05), transparent 55%),
    var(--tms-bg);
  background-attachment: fixed;
  color: var(--tms-text);
  min-height: 100vh;
  font-size: 15px;
  line-height: 1.5;
  letter-spacing: -0.005em;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

a { color: inherit; text-decoration: none; }
a:not([class]) { color: var(--tms-gold-dark); }
a:not([class]):hover { text-decoration: underline; }

/* ---------- Shell / Sidebar layout ---------- */

.tms-shell {
  display: flex;
  min-height: 100vh;
}

.tms-sidebar {
  width: var(--tms-sidebar-width);
  flex-shrink: 0;
  background:
    radial-gradient(600px 300px at 20% 0%, rgba(201, 160, 106, 0.12), transparent 60%),
    linear-gradient(180deg, var(--tms-navy) 0%, var(--tms-navy-dark) 100%);
  color: var(--tms-cream-blue);
  display: flex;
  flex-direction: column;
  position: sticky;
  top: 0;
  height: 100vh;
  overflow-y: auto;
  z-index: 40;
  border-right: 1px solid rgba(0, 0, 0, 0.2);
}
.tms-sidebar::-webkit-scrollbar { width: 8px; }
.tms-sidebar::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.12); border-radius: 8px; }

.tms-sidebar__brand {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 22px 20px 18px;
}

.tms-sidebar__brand-mark {
  width: 34px;
  height: 34px;
  border-radius: 10px;
  background: linear-gradient(135deg, var(--tms-gold) 0%, var(--tms-gold-dark) 100%);
  color: var(--tms-navy-dark);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 1.05rem;
  box-shadow: 0 4px 10px rgba(201, 160, 106, 0.35);
}

.tms-sidebar__brand-text {
  font-weight: 700;
  font-size: 1.05rem;
  letter-spacing: 0.01em;
}

.tms-sidebar__nav {
  flex: 1;
  padding: 6px 12px 16px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.tms-navgroup__label {
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: rgba(243, 246, 248, 0.4);
  padding: 16px 12px 6px;
}

.tms-navlink {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 9px 12px;
  border-radius: var(--tms-radius-sm);
  font-size: 0.875rem;
  font-weight: 500;
  color: rgba(243, 246, 248, 0.78);
  position: relative;
  transition: background 0.15s ease, color 0.15s ease;
}

.tms-navlink .tms-icon { opacity: 0.75; flex-shrink: 0; width: 17px; height: 17px; }

.tms-navlink:hover {
  background: rgba(255, 255, 255, 0.07);
  color: var(--tms-white);
}

.tms-navlink:hover .tms-icon { opacity: 1; }

/* Active link: glossy gold-tinted pill with a gold accent bar. */
.tms-navlink--active,
.tms-navlink[aria-current="page"] {
  background: linear-gradient(90deg, rgba(201, 160, 106, 0.22), rgba(201, 160, 106, 0.06));
  color: var(--tms-white);
  font-weight: 600;
  box-shadow: inset 0 0 0 1px rgba(201, 160, 106, 0.25);
}
.tms-navlink--active::before,
.tms-navlink[aria-current="page"]::before {
  content: "";
  position: absolute;
  left: -12px;
  top: 50%;
  transform: translateY(-50%);
  width: 3px;
  height: 20px;
  border-radius: 0 3px 3px 0;
  background: var(--tms-gold);
  box-shadow: 0 0 8px rgba(201, 160, 106, 0.6);
}
.tms-navlink--active .tms-icon { opacity: 1; color: var(--tms-gold-light); }

.tms-navlink__badge {
  margin-left: auto;
  background: var(--tms-gold);
  color: var(--tms-navy-dark);
  font-size: 0.68rem;
  font-weight: 700;
  padding: 1px 7px;
  border-radius: 999px;
}

.tms-sidebar__user {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 16px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.tms-sidebar__user-info {
  display: flex;
  flex-direction: column;
  min-width: 0;
  flex: 1;
}

.tms-sidebar__user-name {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--tms-white);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.tms-sidebar__user-role {
  font-size: 0.72rem;
  color: var(--tms-gold-soft);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.tms-sidebar__logout {
  color: rgba(243, 246, 248, 0.6);
  padding: 6px;
  border-radius: 8px;
  display: flex;
}

.tms-sidebar__logout:hover { background: rgba(255, 255, 255, 0.08); color: var(--tms-white); }

.tms-main {
  flex: 1;
  min-width: 0;
  width: 100%;
  display: flex;
  flex-direction: column;
}

/* ---------- Topbar ---------- */

.tms-topbar {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  gap: 14px;
  height: var(--tms-topbar-height);
  padding: 0 26px;
  background: rgba(255, 253, 249, 0.82);
  backdrop-filter: saturate(1.4) blur(12px);
  -webkit-backdrop-filter: saturate(1.4) blur(12px);
  border-bottom: 1px solid var(--tms-border);
}

.tms-topbar__heading { display: flex; flex-direction: column; min-width: 0; }
.tms-topbar__title {
  font-size: 1.06rem;
  font-weight: 700;
  color: var(--tms-navy);
  letter-spacing: -0.01em;
  line-height: 1.15;
}
.tms-topbar__crumb {
  font-size: 0.72rem;
  color: var(--tms-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 600;
}

.tms-topbar__spacer { flex: 1; }

.tms-topbar__meta {
  display: flex;
  align-items: center;
  gap: 14px;
}

.tms-topbar__clock {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--tms-text-muted);
  padding: 6px 12px;
  border-radius: 999px;
  background: var(--tms-cream-brown);
  border: 1px solid var(--tms-border);
}
.tms-topbar__dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--tms-success);
  box-shadow: 0 0 0 3px rgba(76, 122, 82, 0.18);
}

.tms-topbar__icon {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px; height: 38px;
  border-radius: 50%;
  color: var(--tms-navy);
  background: var(--tms-cream-brown);
  border: 1px solid var(--tms-border);
  transition: background 0.15s ease, transform 0.1s ease;
}
.tms-topbar__icon:hover { background: var(--tms-cream-brown-dark); }
.tms-topbar__icon-badge {
  position: absolute;
  top: -3px; right: -3px;
  min-width: 17px; height: 17px;
  padding: 0 4px;
  border-radius: 999px;
  background: var(--tms-danger);
  color: #fff;
  font-size: 0.64rem;
  font-weight: 800;
  display: flex; align-items: center; justify-content: center;
  border: 2px solid var(--tms-white);
}

.tms-content {
  max-width: 1180px;
  margin: 0 auto;
  width: 100%;
  padding: 26px 26px 64px;
}

.tms-menu-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 50;
  background: var(--tms-navy);
  color: var(--tms-white);
  border: none;
  border-radius: var(--tms-radius-sm);
  width: 40px; height: 40px;
  box-shadow: var(--tms-shadow);
}

.tms-sidebar-backdrop {
  display: none;
}

@media (max-width: 880px) {
  .tms-menu-toggle { display: flex; }
  .tms-sidebar {
    position: fixed;
    left: 0;
    top: 0;
    transform: translateX(-100%);
    transition: transform 0.22s ease;
    box-shadow: var(--tms-shadow-lift);
  }
  .tms-sidebar--open { transform: translateX(0); }
  .tms-sidebar-backdrop {
    display: block;
    position: fixed;
    inset: 0;
    background: rgba(22, 33, 47, 0.4);
    z-index: 30;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease;
  }
  .tms-sidebar-backdrop--visible { opacity: 1; pointer-events: auto; }
  .tms-topbar { padding: 0 14px; }
  .tms-topbar__clock { display: none; }
  .tms-content { padding: 18px 15px 80px; }
}

/* ---------- Cards & typography ---------- */

.tms-card {
  position: relative;
  background: var(--tms-surface);
  border: 1px solid var(--tms-border);
  border-radius: var(--tms-radius-lg);
  box-shadow: var(--tms-shadow);
  padding: 22px 24px;
  margin-bottom: 18px;
  transition: box-shadow 0.18s ease, transform 0.18s ease;
  /* Nothing inside a card may spill past its edge on a phone: long words,
     emails, UPI IDs, meeting links and pasted URLs break rather than overflow. */
  overflow-wrap: break-word;
  min-width: 0;
}

/* Hairline highlight along the top edge = the "glossy" catch-light. */
.tms-card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 1px;
  border-radius: var(--tms-radius-lg) var(--tms-radius-lg) 0 0;
  background: linear-gradient(90deg, transparent, var(--tms-hairline), transparent);
}

.tms-card h2 {
  margin-top: 0;
  margin-bottom: 14px;
  color: var(--tms-navy);
  font-size: 1.08rem;
  font-weight: 700;
  letter-spacing: -0.01em;
}
.tms-card h2:only-child { margin-bottom: 0; }

/* Card header with an action on the right (references' "Explore all →"). */
.tms-card__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}
.tms-card__head h2 { margin-bottom: 0; }
.tms-card__action {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--tms-gold-dark);
  white-space: nowrap;
}
.tms-card__action:hover { color: var(--tms-gold); }

.tms-muted { color: var(--tms-text-muted); }

/* ---------- Login page (split-screen, glossy) ---------- */

.tms-login__grid {
  min-height: 100vh;
  display: grid;
  grid-template-columns: 1.05fr 1fr;
}

/* Left: glossy navy+gold hero with a geometric pattern. */
.tms-login__hero {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 40px 46px;
  color: var(--tms-cream-blue);
  background:
    radial-gradient(700px 380px at 12% 8%, rgba(201, 160, 106, 0.28), transparent 55%),
    radial-gradient(600px 500px at 100% 100%, rgba(201, 160, 106, 0.12), transparent 55%),
    linear-gradient(160deg, var(--tms-navy-light) 0%, var(--tms-navy) 45%, var(--tms-navy-dark) 100%);
}

/* Islamic-geometry-inspired line pattern, drawn in CSS (no image). */
.tms-login__hero-pattern {
  position: absolute;
  inset: 0;
  opacity: 0.14;
  background-image:
    linear-gradient(45deg, rgba(232, 213, 181, 0.6) 1px, transparent 1px),
    linear-gradient(-45deg, rgba(232, 213, 181, 0.6) 1px, transparent 1px);
  background-size: 46px 46px;
  -webkit-mask-image: radial-gradient(circle at 70% 30%, #000, transparent 78%);
  mask-image: radial-gradient(circle at 70% 30%, #000, transparent 78%);
}

.tms-login__hero-top,
.tms-login__hero-body,
.tms-login__hero-foot { position: relative; z-index: 1; }

.tms-login__hero-top { display: flex; align-items: center; gap: 11px; }
.tms-login__mark {
  display: grid; place-items: center;
  width: 40px; height: 40px;
  border-radius: 11px;
  background: var(--tms-gold-grad);
  color: var(--tms-navy-dark);
  font-weight: 800; font-size: 1.15rem;
  box-shadow: var(--tms-glow-gold);
}
.tms-login__brand { font-weight: 700; font-size: 1.1rem; letter-spacing: 0.01em; }

.tms-login__eyebrow {
  display: inline-block;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--tms-gold-light);
  margin: 0 0 14px;
  padding: 5px 12px;
  border: 1px solid rgba(201, 160, 106, 0.45);
  border-radius: 999px;
  background: rgba(201, 160, 106, 0.10);
}
.tms-login__headline {
  font-size: 2.6rem;
  line-height: 1.14;
  font-weight: 800;
  letter-spacing: -0.02em;
  margin: 0 0 18px;
  color: #fff;
}
/* "Huffaz": gold text with a slow shine sweeping across it, plus a soft glow. */
.tms-login__shine {
  background: linear-gradient(
    100deg,
    var(--tms-gold) 0%,
    var(--tms-gold-light) 30%,
    #fff4df 50%,
    var(--tms-gold-light) 70%,
    var(--tms-gold) 100%
  );
  background-size: 220% auto;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: var(--tms-gold-light); /* fallback for non-clip browsers */
  text-shadow: 0 0 22px rgba(216, 183, 132, 0.35);
  animation: tms-shine 3.6s linear infinite;
}
@keyframes tms-shine {
  to { background-position: 220% center; }
}
/* Second line, lighter for a clear hierarchy under the bold first line. */
.tms-login__headline-line2 {
  display: inline-block;
  margin-top: 4px;
  font-weight: 600;
  font-size: 0.88em;
  color: rgba(243, 246, 248, 0.82);
  letter-spacing: 0;
}
@media (prefers-reduced-motion: reduce) {
  .tms-login__shine { animation: none; }
}
.tms-login__sub {
  font-size: 1rem;
  color: rgba(243, 246, 248, 0.72);
  max-width: 30ch;
  margin: 0;
}

.tms-login__hero-foot {
  display: flex;
  flex-direction: column;
  gap: 3px;
  font-size: 0.85rem;
  color: rgba(232, 213, 181, 0.8);
  border-left: 2px solid var(--tms-gold);
  padding-left: 14px;
}

/* Right: form panel with a faint gold wash. */
.tms-login__panel {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 40px 28px;
  overflow: hidden;
  background:
    radial-gradient(640px 440px at 92% -8%, rgba(201, 160, 106, 0.22), transparent 62%),
    radial-gradient(460px 360px at 4% 108%, rgba(31, 45, 64, 0.07), transparent 60%),
    var(--tms-bg);
}
/* A faint dotted flourish that fades in only near the top-right corner. */
.tms-login__panel::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(201, 160, 106, 0.14) 1.1px, transparent 1.6px);
  background-size: 24px 24px;
  -webkit-mask-image: radial-gradient(circle at 88% 12%, #000 0%, transparent 52%);
          mask-image: radial-gradient(circle at 88% 12%, #000 0%, transparent 52%);
  pointer-events: none;
}

.tms-login__card {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 400px;
  background: var(--tms-surface);
  border: 1px solid var(--tms-border);
  border-radius: var(--tms-radius-xl);
  box-shadow:
    var(--tms-shadow-lift),
    0 0 0 1px rgba(201, 160, 106, 0.12),
    0 26px 60px rgba(201, 160, 106, 0.12);
  padding: 34px 34px 30px;
  overflow: hidden;
}
/* Gold accent bar with a bright centre, running across the card's top edge. */
.tms-login__card::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 4px;
  background: linear-gradient(
    90deg,
    var(--tms-gold-dark) 0%,
    var(--tms-gold-light) 42%,
    #fff4df 50%,
    var(--tms-gold-light) 58%,
    var(--tms-gold-dark) 100%
  );
}

.tms-login__crest {
  display: grid;
  place-items: center;
  margin: 4px 0 16px;
}
.tms-login__crest-mark {
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  border-radius: 17px;
  background: var(--tms-gold-grad);
  color: var(--tms-navy-dark);
  font-weight: 800;
  font-size: 1.5rem;
  border: 1px solid rgba(255, 255, 255, 0.4);
  box-shadow:
    var(--tms-glow-gold),
    inset 0 1px 0 rgba(255, 255, 255, 0.45);
}

.tms-login__title {
  font-size: 1.55rem;
  font-weight: 800;
  color: var(--tms-navy);
  letter-spacing: -0.02em;
  margin: 0 0 4px;
  text-align: center;
}
.tms-login__caption { margin: 0 0 16px; color: var(--tms-text-muted); font-size: 0.9rem; text-align: center; }
/* Slim gold hairline that separates the header from the sign-in controls. */
.tms-login__rule {
  height: 1px;
  margin: 0 0 20px;
  background: linear-gradient(90deg, transparent, rgba(201, 160, 106, 0.5), transparent);
}

.tms-login__foot { margin: 20px 0 0; font-size: 0.78rem; color: var(--tms-text-muted); }

.tms-login__card .tms-field label {
  text-transform: uppercase;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.07em;
  color: var(--tms-gold-dark);
}

@media (max-width: 860px) {
  .tms-login__grid { grid-template-columns: 1fr; }
  .tms-login__hero {
    padding: 26px 24px 30px;
    /* Stack top-down with real spacing instead of pinning the brand to a
       corner and pushing the body to the bottom of a fixed height. The old
       pairing (absolute brand + flex-end body + min-height) overlapped as
       soon as the body outgrew 210px — which it does on a phone once the
       badge, headline, stats and two buttons are all present. */
    justify-content: flex-start;
    gap: 20px;
  }
  /* Deliberately in flow: siblings in normal flow cannot overlap. */
  .tms-login__hero-top { position: relative; top: auto; left: auto; }
  .tms-login__headline { font-size: 1.8rem; }
  .tms-login__sub { display: none; }
  .tms-login__hero-foot { display: none; }
  .tms-login__panel { padding: 26px 18px 40px; }
  .tms-login__card { box-shadow: var(--tms-shadow); padding: 28px 22px; }
}

/* Segmented control: one pill slides between Admin / Teacher / Student. */
.tms-authtabs {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 4px;
  padding: 4px;
  margin-bottom: 24px;
  background: var(--tms-cream-brown);
  border: 1px solid var(--tms-cream-brown-dark);
  border-radius: 999px;
}

.tms-authtab {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 9px 6px;
  border-radius: 999px;
  text-decoration: none;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--tms-text-muted);
  transition: background 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
}

.tms-authtab .tms-icon { width: 15px; height: 15px; }

.tms-authtab:hover { color: var(--tms-navy); }

.tms-authtab--active {
  background: linear-gradient(150deg, var(--tms-gold), var(--tms-gold-dark));
  color: var(--tms-navy-dark);
  box-shadow: 0 2px 6px rgba(169, 125, 63, 0.35);
}

.tms-authtab--active:hover { color: var(--tms-navy-dark); }

/* Icon sits inside the field, so the input keeps the full hit area. */
.tms-inputgroup { position: relative; display: flex; align-items: center; }

.tms-inputgroup .tms-icon {
  position: absolute;
  left: 12px;
  width: 16px;
  height: 16px;
  color: var(--tms-text-muted);
  pointer-events: none;
  transition: color 0.15s ease;
}

.tms-inputgroup .tms-input { padding-left: 38px; }
.tms-inputgroup:focus-within .tms-icon { color: var(--tms-gold-dark); }

.tms-auth-card .tms-field label {
  text-transform: uppercase;
  font-size: 0.71rem;
  font-weight: 700;
  letter-spacing: 0.07em;
  color: var(--tms-gold-dark);
}

.tms-auth-help {
  margin: 7px 0 0;
  font-size: 0.78rem;
  color: var(--tms-text-muted);
  text-align: right;
}

.tms-btn {
  width: 100%;
  padding: 12px 18px;
  border: none;
  border-radius: 10px;
  background: linear-gradient(150deg, var(--tms-gold), var(--tms-gold-dark));
  color: var(--tms-navy-dark);
  font-family: inherit;
  font-size: 0.92rem;
  font-weight: 700;
  cursor: pointer;
  transition: filter 0.15s ease, transform 0.1s ease, box-shadow 0.15s ease;
}

.tms-btn:hover { filter: brightness(1.06); box-shadow: 0 4px 14px rgba(169, 125, 63, 0.35); }
.tms-btn:active { transform: scale(0.99); }

.tms-btn:focus-visible {
  outline: 2px solid var(--tms-navy);
  outline-offset: 2px;
}

.tms-btn--auth {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border-radius: 999px;
  padding: 13px 18px;
  margin-top: 6px;
}

.tms-btn--auth .tms-icon { width: 16px; height: 16px; }

.tms-field { margin-bottom: 18px; }

.tms-field label {
  display: block;
  font-size: 0.83rem;
  font-weight: 600;
  color: var(--tms-navy);
  margin-bottom: 6px;
}

.tms-input {
  width: 100%;
  padding: 11px 13px;
  border: 1.5px solid var(--tms-border);
  border-radius: var(--tms-radius-sm);
  font-size: 0.95rem;
  font-family: inherit;
  /* Same computed height for input, select and textarea alike — without
     this a <select> sits a couple of pixels taller than the <input> beside
     it and filter rows read as stepped. */
  line-height: 1.35;
  background: #fbfaf6;
  color: var(--tms-text);
  transition: border-color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
}

.tms-input:focus {
  outline: none;
  border-color: var(--tms-gold);
  background: var(--tms-white);
  box-shadow: 0 0 0 3px rgba(201, 160, 106, 0.18);
}

/* Primary action: glossy gold with a soft glow on hover (the login CTA look). */
.tms-btn-link {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: var(--tms-gold-grad);
  color: #fff;
  padding: 10px 18px;
  border-radius: var(--tms-radius-sm);
  text-decoration: none;
  font-size: 0.87rem;
  font-weight: 600;
  border: none;
  cursor: pointer;
  box-shadow: 0 1px 2px rgba(169, 125, 63, 0.3);
  transition: filter 0.15s ease, transform 0.1s ease, box-shadow 0.15s ease;
}

.tms-btn-link:hover { filter: brightness(1.05); box-shadow: var(--tms-glow-gold); }
.tms-btn-link:active { transform: scale(0.98); }
.tms-btn-link--danger { background: linear-gradient(135deg, #c15c47, var(--tms-danger)); box-shadow: none; }
.tms-btn-link--danger:hover { filter: brightness(1.05); box-shadow: 0 6px 18px rgba(176, 80, 60, 0.32); }
.tms-btn-link--muted {
  background: var(--tms-cream-brown);
  color: var(--tms-navy);
  border: 1px solid var(--tms-border);
  box-shadow: none;
}
.tms-btn-link--muted:hover { background: var(--tms-cream-brown-dark); filter: none; box-shadow: none; }

/* Compact button for table rows / inline actions — one class instead of the
 * inline `padding:6px 12px; font-size:0.8rem` that was pasted across ~20 templates. */
.tms-btn-link--sm { padding: 6px 12px; font-size: 0.8rem; }

.tms-error {
  background: #fbeae7;
  border: 1px solid var(--tms-danger);
  color: var(--tms-danger);
  padding: 10px 14px;
  border-radius: 10px;
  font-size: 0.88rem;
  margin-bottom: 18px;
}

.tms-field-errors {
  color: var(--tms-danger);
  font-size: 0.8rem;
  margin-top: 4px;
}

/* ---------- Messages ---------- */

.tms-messages { margin-bottom: 20px; }

.tms-message {
  padding: 11px 15px;
  border-radius: 10px;
  margin-bottom: 8px;
  font-size: 0.9rem;
}

.tms-message--success { background: #e9f3ea; border: 1px solid var(--tms-success); color: #2f5233; }
.tms-message--error { background: #fbeae7; border: 1px solid var(--tms-danger); color: var(--tms-danger); }

/* ---------- Tables ---------- */

/* No horizontal scrolling ANYWHERE — desktop or mobile. Content wraps to fit
   instead of pushing the page (or a table) sideways. */
/* `clip`, not `hidden`: both stop the page scrolling sideways, but `hidden`
   turns the element into a scroll container, which breaks `position: sticky`
   on descendants — that's what left the sidebar scrolling away instead of
   staying pinned full-height. `clip` clips without that side effect. */
html, body { max-width: 100%; overflow-x: clip; }
.tms-shell { overflow-x: clip; }
/* Wrap at spaces only — never split a word across lines. In a table cell a
   word is never broken; if a single unbreakable token is wider than its
   column, the table's own overflow-x:auto wrapper scrolls (rare). Cards keep
   break-word so a long no-space token (an email, a URL) can't overflow a card
   that has no scroll of its own. */
.tms-card, .tms-content, .tms-detail-row { overflow-wrap: break-word; word-break: normal; }
.tms-table td, .tms-table th { overflow-wrap: normal; word-break: normal; }

/* Cells wrap so a table fits its container without pushing the page sideways.
   overflow-x is auto (not hidden) as a last-resort safety net: if a table
   genuinely can't fit — many columns with unbreakable content — its own
   wrapper scrolls rather than CLIPPING controls out of reach (an off-screen
   Approve button can never be clicked). The page body still never scrolls
   sideways; only this wrapper does, and only when it must. */
.tms-tablewrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin: 0 -4px;
}

.tms-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9rem;
  table-layout: auto;
}
/* Long values wrap instead of forcing the table wider than the page. Cells
   that explicitly opt into nowrap (via inline style) still win where a value
   must stay on one line (short dates, times). */
.tms-table td, .tms-table th { white-space: normal; }

/* A table of editable rows is the wrong shape for a phone: seven columns of
   inputs can only be reached by scrolling sideways, and the first column gets
   squeezed to nothing. Below 720px a .tms-table--stack row becomes a card,
   each cell a labelled line. The label comes from data-label on the <td>, so
   the header row can be hidden without losing what each field means. */
@media (max-width: 720px) {
  /* Global safety net: on a phone nothing may push content sideways. Long
     unbreakable strings (ITS IDs, emails, a reason with no spaces) wrap
     instead of overflowing their card, and the page itself never scrolls
     horizontally. Applies to every tab, not just the ones we spot-fixed. */
  .tms-shell { overflow-x: clip; }
  .tms-card, .tms-content, .tms-detail-row, .tms-table td { overflow-wrap: break-word; word-break: normal; }

  /* EVERY data table stacks into labelled cards on a phone, not just the ones
     tagged .tms-table--stack. A five-column table crammed into 360px squeezes
     each column to three or four letters — unreadable. Stacking gives each
     cell a full-width line; where a <td> carries data-label it also gets a
     caption. (--stack is kept as a harmless alias for tables already using it.) */
  .tms-table,
  .tms-table tbody,
  .tms-table tr,
  .tms-table td { display: block; width: auto; min-width: 0; }

  .tms-table thead { display: none; }

  .tms-table tr {
    border: 1px solid var(--tms-border);
    border-radius: var(--tms-radius);
    background: var(--tms-white);
    padding: 6px 12px 10px;
    margin-bottom: 12px;
  }

  .tms-table td {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    border-bottom: 1px solid var(--tms-cream-brown-dark);
    padding: 9px 0;
    white-space: normal;
    /* A long value (a long student name, a big reason) wraps to the next line
       and breaks if needed, instead of pushing out past the card edge. */
    flex-wrap: wrap;
    overflow-wrap: break-word;
  }

  .tms-table tr td:last-child { border-bottom: none; }

  .tms-table td[data-label]::before {
    content: attr(data-label);
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--tms-text-muted);
    flex: 0 0 auto;
  }

  /* The first cell is the row's identity — give it the full width. */
  .tms-table td:first-child { display: block; }
  .tms-table td:first-child[data-label]::before { display: block; margin-bottom: 5px; }
  .tms-table td:first-child .tms-input { width: 100%; }

  /* An empty cell would otherwise leave a stray bordered blank line in the
     card — collapse cells that have neither a label nor content to show. */
  .tms-table td:empty { display: none; }

  /* Fingers, not a mouse: give the small action buttons a real tap target
     on phones. Kept inside the breakpoint so dense desktop toolbars are
     unchanged. */
  .tms-btn-link--sm,
  .tms-btn-link--lg,
  .tms-table td .tms-btn-link {
    min-height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
}

/* An input inside a table must keep a usable width. Without a floor the
   table compresses them to fit the viewport — on a phone the shift Name
   field collapsed to a single visible character. With a floor, the table
   grows past the viewport and .tms-tablewrap scrolls instead, which is
   what it exists for. */
.tms-table .tms-input { min-width: 6.5rem; }
.tms-table td:first-child .tms-input { min-width: 11rem; }

.tms-table th, .tms-table td {
  text-align: left;
  padding: 11px 13px;
  border-bottom: 1px solid var(--tms-border);
  /* Wrap by default so a wide table (e.g. a Shifts column listing five slabs)
     reflows to fit instead of clipping. Cells that must stay on one line —
     short dates, times, money — opt in with .tms-nowrap or an inline style. */
  white-space: normal;
  /* Tabular figures: every digit takes the same width, so amounts, counts and
     dates line up down a column instead of drifting. This is the whole reason
     Inter is worth self-hosting for a screen full of money. */
  font-variant-numeric: tabular-nums;
}
.tms-table th.tms-nowrap, .tms-table td.tms-nowrap { white-space: nowrap; }

/* Money and counts read correctly right-aligned — units line up under units.
   Add .tms-num to a th and its matching td. Ignored once the table stacks
   into cards on a phone, where each cell is a labelled line. */
.tms-table th.tms-num, .tms-table td.tms-num { text-align: right; }

/* A section header row inside a table — e.g. a shift's name above its
   students. Reads as a band across the table, not another data row. */
.tms-table tr.tms-table__group th {
  background: var(--tms-surface-raised);
  color: var(--tms-navy);
  font-size: 0.82rem;
  text-transform: none;
  letter-spacing: 0;
  padding-top: 12px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--tms-border);
}

.tms-table th {
  color: var(--tms-text-muted);
  font-weight: 700;
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  background: transparent;
  border-bottom: 1.5px solid var(--tms-border);
}

.tms-table tbody tr { transition: background 0.12s ease; }
.tms-table tbody tr:last-child td, .tms-table tr:last-child td { border-bottom: none; }
.tms-table tr:hover td { background: rgba(201, 160, 106, 0.06); }

.tms-badge {
  max-width: 100%;
  /* A status badge is a single label — keep it on one line, never split
     "Approved" into "Appr / oved" when its column is squeezed. If it can't
     fit, the table's own scroll handles it. */
  white-space: nowrap;
  overflow-wrap: normal;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 0.73rem;
  font-weight: 700;
  border: 1px solid transparent;
}
/* A small leading dot makes status readable without relying on colour. */
.tms-badge::before {
  content: "";
  width: 6px; height: 6px;
  border-radius: 50%;
  background: currentColor;
  opacity: 0.85;
}

.tms-badge--active { background: var(--tms-success-soft); color: var(--tms-success); border-color: rgba(76,122,82,0.2); }
.tms-badge--inactive { background: #f0e9e4; color: var(--tms-text-muted); border-color: var(--tms-border); }
.tms-badge--assigned { background: var(--tms-danger-soft); color: #a3402f; border-color: rgba(163,64,47,0.18); }
.tms-badge--warn { background: var(--tms-warn-soft); color: var(--tms-warn); border-color: rgba(138,90,33,0.2); }

.tms-actions { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin-top: 16px; }

/* A form row that mixes labelled fields with a submit button: bottom-align
   them so the button sits level with the inputs, not with their labels. */
.tms-filterbar {
  display: flex;
  gap: 10px;
  align-items: flex-end;
  flex-wrap: wrap;
  margin-bottom: 20px;
}
.tms-filterbar .tms-field { margin-bottom: 0; }

/* On a phone, wrapped action buttons end up as ragged rows of different
   widths because each is sized by its label ("Income" beside "Generate
   Monthly Invoices"). A grid gives every action the same target size, which
   is easier to hit with a thumb and reads as one set rather than a run-on
   sentence. */
@media (max-width: 720px) {
  .tms-actions {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(148px, 1fr));
    align-items: stretch;
  }
  .tms-actions > .tms-btn-link,
  .tms-actions > form > .tms-btn-link {
    width: 100%;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  /* A button wrapped in a <form> (e.g. Reset Device) is a grid item via its
     form — stretch the form and let its button fill it, so it matches the
     plain button links instead of shrinking to its text. */
  .tms-actions > form { display: flex; }
}

.tms-detail-row {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  padding: 9px 0;
  border-bottom: 1px solid var(--tms-cream-brown-dark);
  font-size: 0.92rem;
}

.tms-detail-row > span:first-child { color: var(--tms-text-muted); flex: 0 0 auto; }
.tms-detail-row > span:last-child {
  font-weight: 600;
  color: var(--tms-text);
  min-width: 0;
  text-align: right;
  overflow-wrap: break-word;
}

.tms-stat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 14px;
  margin-bottom: 8px;
}

.tms-stat {
  background: linear-gradient(160deg, var(--tms-cream-blue) 0%, var(--tms-cream-brown) 100%);
  border: 1px solid var(--tms-cream-brown-dark);
  border-radius: var(--tms-radius);
  padding: 15px 17px;
}

.tms-stat__value {
  font-size: 1.55rem;
  font-weight: 800;
  color: var(--tms-navy);
  letter-spacing: -0.01em;
}

.tms-stat__label {
  font-size: 0.75rem;
  color: var(--tms-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.tms-bar-chart { display: flex; flex-direction: column; gap: 9px; }

.tms-bar-row {
  display: grid;
  grid-template-columns: 90px 1fr 50px;
  align-items: center;
  gap: 10px;
  font-size: 0.82rem;
}

.tms-bar-track {
  background: var(--tms-cream-brown);
  border-radius: 6px;
  height: 16px;
  overflow: hidden;
}

.tms-bar-fill {
  background: linear-gradient(90deg, var(--tms-gold-dark), var(--tms-gold));
  height: 100%;
  border-radius: 6px;
}

/* ---------- Dashboard stat cards ---------- */

.tms-section-label {
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--tms-text-muted);
  margin: 4px 0 0;
}

/* Combined attendance analytics — a small stacked-bar chart per day. */
.tms-swatch {
  display: inline-block;
  width: 12px; height: 12px;
  border-radius: 3px;
  vertical-align: -1px;
  margin-right: 4px;
}
.tms-attn-chart {
  display: flex;
  align-items: flex-end;
  gap: 3px;
  height: 160px;
  overflow-x: auto;
  padding-bottom: 4px;
}
.tms-attn-col {
  flex: 1 0 18px;
  display: flex;
  flex-direction: column;
  align-items: center;
  height: 100%;
}
.tms-attn-bar {
  flex: 1;
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 1px;
  min-width: 10px;
}
.tms-attn-seg { width: 100%; border-radius: 2px 2px 0 0; }
.tms-attn-day {
  font-size: 0.62rem;
  color: var(--tms-text-muted);
  margin-top: 4px;
}

/* A stat card that reveals a list of names on hover / tap (focus). */
.tms-hovercard { position: relative; outline: none; }
.tms-hovercard[tabindex] { cursor: pointer; }
.tms-hovercard__pop {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  z-index: 40;
  min-width: 220px;
  max-width: min(340px, 88vw);
  max-height: 320px;
  overflow-y: auto;
  background: var(--tms-white);
  border: 1px solid var(--tms-border);
  border-radius: var(--tms-radius);
  box-shadow: 0 10px 28px rgba(31, 45, 64, 0.18);
  padding: 12px 14px;
  font-size: 0.85rem;
  color: var(--tms-text);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-4px);
  transition: opacity 0.12s ease, transform 0.12s ease;
}
.tms-hovercard:hover .tms-hovercard__pop,
.tms-hovercard:focus .tms-hovercard__pop,
.tms-hovercard:focus-within .tms-hovercard__pop {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.tms-hovercard__pop ul,
.tms-hovercard__pop ol { margin: 6px 0 0; padding-left: 20px; }
.tms-hovercard__pop li { margin: 3px 0; }

/* A stat card that opens a detail list on click/tap (works on mobile, unlike
   hover). Built on <details> so it needs no JavaScript. */
/* Analytics hub sub-tabs. */
.tms-subtabs {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 16px;
  border-bottom: 1px solid var(--tms-border);
  padding-bottom: 2px;
}
.tms-subtab {
  padding: 8px 14px;
  border-radius: var(--tms-radius) var(--tms-radius) 0 0;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--tms-text-muted);
  text-decoration: none;
  border: 1px solid transparent;
  border-bottom: none;
}
.tms-subtab:hover { color: var(--tms-navy); background: var(--tms-surface-raised); }
.tms-subtab--active {
  color: var(--tms-navy);
  background: var(--tms-white);
  border-color: var(--tms-border);
}

.tms-statpop { position: relative; }
.tms-statpop > summary {
  list-style: none;
  cursor: pointer;
}
.tms-statpop > summary::-webkit-details-marker { display: none; }
.tms-statpop__body {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  z-index: 45;
  min-width: 240px;
  max-width: min(360px, 92vw);
  max-height: 320px;
  overflow-y: auto;
  background: var(--tms-white);
  border: 1px solid var(--tms-border);
  border-radius: var(--tms-radius);
  box-shadow: 0 10px 28px rgba(31, 45, 64, 0.18);
  padding: 12px 14px;
  font-size: 0.85rem;
  color: var(--tms-text);
}
.tms-statpop__body ul,
.tms-statpop__body ol { margin: 6px 0 0; padding-left: 20px; }
.tms-statpop__body li { margin: 3px 0; }

/* Monthly attendance-rate trend — one bar per month. */
.tms-trend-chart {
  display: flex;
  align-items: flex-end;
  gap: 6px;
  height: 190px;
  overflow-x: auto;
  padding-bottom: 2px;
}
.tms-trend-col {
  flex: 1 0 34px;
  display: flex;
  flex-direction: column;
  align-items: center;
  height: 100%;
  outline: none;
}
.tms-trend-val {
  font-size: 0.6rem;
  color: var(--tms-text-muted);
  height: 13px;
  margin-bottom: 2px;
}
.tms-trend-bar-wrap {
  flex: 1;
  width: 62%;
  min-width: 14px;
  display: flex;
  align-items: flex-end;
}
.tms-trend-bar {
  width: 100%;
  background: #3f6f9f;
  border-radius: 3px 3px 0 0;
  min-height: 2px;
}
.tms-trend-col--current .tms-trend-bar { background: var(--tms-gold); }
.tms-trend-label {
  font-size: 0.64rem;
  color: var(--tms-text-muted);
  margin-top: 5px;
}

.tms-statcards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 14px;
  margin: 10px 0 22px;
}

.tms-statcard {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 17px 18px 16px;
  background: var(--tms-surface-raised);
  border: 1px solid var(--tms-border);
  border-radius: var(--tms-radius);
  box-shadow: var(--tms-shadow-sm);
  overflow: hidden;
  transition: transform 0.16s ease, box-shadow 0.16s ease;
}

.tms-statcard:hover {
  transform: translateY(-2px);
  box-shadow: var(--tms-shadow-lift);
}

/* A gradient top-border carries the status (references' colored card tops).
   Colour is never the only cue — the label + meta always say what it means. */
.tms-statcard::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 3px;
  background: var(--tms-gold-grad);
}

.tms-statcard--good::before { background: linear-gradient(90deg, #6fa475, var(--tms-success)); }
.tms-statcard--warn::before { background: linear-gradient(90deg, var(--tms-gold), var(--tms-gold-dark)); }
.tms-statcard--bad::before { background: linear-gradient(90deg, #c66b56, var(--tms-danger)); }

.tms-statcard__label {
  font-size: 0.71rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--tms-text-muted);
}

.tms-statcard__value {
  font-size: 1.85rem;
  font-weight: 800;
  line-height: 1.15;
  color: var(--tms-navy);
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}

/* ---------- Short-staffed shifts ---------- */
/* A status list, not a chart: the counts are tiny (0 of 1), so a ratio in
   text beats a meter. Colour is reinforcement only — every pill states its
   meaning in words, because the danger and warning tokens are too close to
   be distinguished by hue alone. */
.tms-staffing {
  border: 1px solid var(--tms-border);
  border-left: 4px solid var(--tms-danger);
  border-radius: var(--tms-radius);
  background: var(--tms-danger-soft);
  padding: 14px 16px 10px;
  margin-bottom: 16px;
}

.tms-staffing__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 10px;
}

.tms-staffing__title {
  font-weight: 700;
  color: var(--tms-navy);
}

.tms-staffing__summary {
  font-size: 0.8rem;
  color: var(--tms-text-muted);
}

.tms-staffing__table { background: transparent; }
.tms-staffing__table th { font-size: 0.7rem; }
.tms-staffing__table td { vertical-align: middle; }

.tms-staffing__name { font-weight: 600; display: block; }

.tms-staffing__when {
  font-size: 0.74rem;
  display: block;
}

.tms-staffing__ratio {
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.tms-staffing__foot {
  font-size: 0.75rem;
  margin: 10px 0 0;
}

/* Status pills. Each carries its own word, so the colour is never load-bearing. */
.tms-pill {
  display: inline-block;
  padding: 2px 9px;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 700;
  white-space: nowrap;
  border: 1px solid transparent;
}

.tms-pill--bad {
  color: var(--tms-danger);
  background: var(--tms-white);
  border-color: var(--tms-danger);
}

.tms-pill--ok {
  color: var(--tms-success);
  background: var(--tms-success-soft);
  border-color: #cfe1d0;
}

.tms-pill--none {
  color: var(--tms-text-muted);
  background: var(--tms-white);
  border-color: var(--tms-border);
  font-weight: 600;
}

/* A wrapping row of small tags — a teacher's shifts, etc. Reads as a set
   rather than a run-on comma string, and wraps cleanly on a phone. */
.tms-chips { display: flex; flex-wrap: wrap; gap: 5px; }
.tms-chip {
  display: inline-block;
  max-width: 100%;
  overflow-wrap: anywhere;
  padding: 2px 9px;
  border-radius: 999px;
  font-size: 0.74rem;
  font-weight: 600;
  color: var(--tms-navy);
  background: var(--tms-cream-brown);
  border: 1px solid var(--tms-cream-brown-dark);
  white-space: nowrap;
}
.tms-chips__none { color: var(--tms-text-muted); font-size: 0.8rem; }

/* ---------- Settings sections ---------- */
/* Related settings sit side by side on a wide screen and stack on a phone,
   so a section reads as one group rather than a column of inputs. */
.tms-settings-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 0 18px;
}

/* A disabled action still shows what will be possible, so it stays in place
   and greys out rather than disappearing — the teacher sees the Clock In
   button and, below it, when it wakes up. */
.tms-btn-link[disabled],
.tms-btn-link:disabled {
  background: var(--tms-cream-brown-dark);
  border-color: var(--tms-border);
  color: var(--tms-text-muted);
  box-shadow: none;
  cursor: not-allowed;
  opacity: 0.85;
}

.tms-btn-link[disabled]:hover,
.tms-btn-link:disabled:hover { transform: none; box-shadow: none; }

/* A bigger tap target for the clock-in button — it's the one control a
   teacher uses daily, often in a hurry at the door. */
.tms-btn-link--lg {
  font-size: 1.05rem;
  padding: 15px 30px;
  border-radius: var(--tms-radius);
  width: 100%;
  max-width: 320px;
}

/* Teacher dashboard: one card per student to mark, action button full-width
   so it's an easy tap and never a tiny link buried in a table row. */
.tms-tasklist { display: flex; flex-direction: column; gap: 12px; }
.tms-task {
  border: 1px solid var(--tms-border);
  border-radius: var(--tms-radius);
  background: var(--tms-white);
  padding: 14px 16px;
}
.tms-task__name { font-weight: 700; color: var(--tms-navy); }
.tms-task__meta { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-top: 6px; }
/* Compact, content-width action sized to the card's own text — not the old
   full-width button. inline-FLEX (not inline-block) so the label stays
   centred against the mobile min-height. */
.tms-task__action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-top: 10px;
}

/* Day picker shared by the attendance pages (base/_date_nav.html). */
.tms-daynav {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
/* A compact box, not a full-width bar: .tms-input is width:100% by default,
   and even at auto width the standard padding made it read as a slab. */
.tms-daynav__input {
  width: auto;
  max-width: 150px;
  flex: 0 0 auto;
  padding: 7px 10px;
  font-size: 0.85rem;
}

/* ---------- Clock in / out ---------- */
/* Half-width, centred label. The clock action is one decisive tap, but it
   doesn't need to span the whole card. */
.tms-clock__btn {
  width: 50%;
  min-width: 150px;
  max-width: 230px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}
/* The running timer while a teacher is clocked in. Tabular numerals stop the
   digits jittering as the seconds tick. */
.tms-clock {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 14px 16px;
  margin: 4px 0 14px;
  background: var(--tms-surface-raised);
  border: 1px solid var(--tms-border);
  border-left: 4px solid var(--tms-success);
  border-radius: var(--tms-radius);
}

.tms-clock__label {
  font-size: 0.71rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--tms-text-muted);
}

.tms-clock__timer {
  font-size: 2.1rem;
  font-weight: 800;
  line-height: 1.1;
  color: var(--tms-navy);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
}

.tms-clock__meta {
  font-size: 0.76rem;
  color: var(--tms-text-muted);
}

/* The "/10" denominator on a marks tile — present for meaning, not emphasis. */
.tms-statcard__value small {
  font-size: 0.55em;
  font-weight: 600;
  color: var(--tms-text-muted);
}

.tms-statcard__meta {
  font-size: 0.76rem;
  color: var(--tms-text-muted);
}

.tms-statcard__value { font-variant-numeric: tabular-nums; }

/* ---------- Dashboard alerts ---------- */

.tms-alert {
  border: 1px solid var(--tms-cream-brown-dark);
  border-left: 4px solid var(--tms-gold);
  border-radius: var(--tms-radius);
  background: var(--tms-cream-blue);
  padding: 14px 16px;
  margin-bottom: 12px;
}

.tms-alert:last-child { margin-bottom: 0; }
.tms-alert--warn { border-left-color: var(--tms-gold-dark); background: #fdf7ee; }
.tms-alert--bad { border-left-color: var(--tms-danger); background: #fcf2f0; }

.tms-alert__title {
  font-weight: 700;
  color: var(--tms-navy);
  font-size: 0.93rem;
}

.tms-alert__body {
  margin: 3px 0 8px;
  font-size: 0.83rem;
  color: var(--tms-text-muted);
}

.tms-alert__list {
  margin: 0 0 10px;
  padding-left: 18px;
  font-size: 0.85rem;
}

.tms-alert__list li { margin-bottom: 3px; }

/* ---------- Month calendar (roster, my roster, my schedule) ---------- */

.tms-cal__head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 16px;
}

.tms-cal__picker { display: flex; align-items: center; gap: 8px; }

.tms-cal__picker-label {
  font-size: 0.83rem;
  font-weight: 600;
  color: var(--tms-navy);
}

.tms-cal__picker .tms-input { width: auto; min-width: 190px; margin: 0; }

.tms-cal__nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
}

.tms-cal__month {
  font-weight: 700;
  color: var(--tms-navy);
  font-size: 1rem;
}

.tms-cal__hint { margin-top: 0; font-size: 0.85rem; }

.tms-cal {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 6px;
}

.tms-cal__dow {
  text-align: center;
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--tms-text-muted);
  padding: 4px 0 6px;
}

.tms-cal__day {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 5px;
  min-height: 84px;
  padding: 8px 8px 9px;
  border: 1px solid var(--tms-cream-brown-dark);
  border-radius: var(--tms-radius);
  background: var(--tms-white);
  cursor: pointer;
  transition: border-color 0.12s ease, background 0.12s ease, box-shadow 0.12s ease;
}

.tms-cal__day:hover:not(.tms-cal__day--empty):not(.tms-cal__day--static) {
  border-color: var(--tms-gold);
  box-shadow: var(--tms-shadow);
}

.tms-cal__day--static { cursor: default; }

.tms-cal__day--empty {
  background: transparent;
  border-color: transparent;
  cursor: default;
  min-height: 0;
}

.tms-cal__day--today { background: var(--tms-cream-blue); }

.tms-cal__day--holiday {
  background: repeating-linear-gradient(
    135deg,
    var(--tms-cream-brown) 0,
    var(--tms-cream-brown) 8px,
    var(--tms-cream-brown-dark) 8px,
    var(--tms-cream-brown-dark) 10px
  );
}

.tms-cal__day--today .tms-cal__daynum {
  color: var(--tms-gold-dark);
  font-weight: 800;
}

.tms-cal__day--selected {
  border-color: var(--tms-gold-dark);
  background: var(--tms-gold-soft);
  box-shadow: inset 0 0 0 2px var(--tms-gold-dark);
}

.tms-cal__day--selected .tms-cal__daynum { color: var(--tms-gold-dark); }

/* A ticked corner so selection reads without relying on colour alone. */
.tms-cal__day--selected::after {
  content: "✓";
  position: absolute;
  top: 5px;
  right: 7px;
  font-size: 0.72rem;
  font-weight: 800;
  color: var(--tms-gold-dark);
}

/* The checkbox drives state but the whole cell is the hit target. */
.tms-cal__check {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
  pointer-events: none;
}

.tms-cal__check:focus-visible + .tms-cal__daynum {
  outline: 2px solid var(--tms-gold-dark);
  outline-offset: 2px;
  border-radius: 4px;
}

.tms-cal__daynum {
  font-weight: 700;
  font-size: 0.82rem;
  color: var(--tms-navy);
}

.tms-cal__body { display: flex; flex-direction: column; gap: 3px; }

.tms-cal__chip {
  background: var(--tms-cream-brown);
  border: 1px solid var(--tms-cream-brown-dark);
  border-radius: 6px;
  padding: 2px 6px;
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--tms-text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tms-cal__chip--primary {
  background: var(--tms-navy);
  color: var(--tms-white);
  border-color: var(--tms-navy);
}

/* Substitute cover — distinct from the navy primary chip so a temporary
   standing assignment is legible at a glance. */
.tms-cal__chip--substitute {
  background: var(--tms-gold-dark);
  color: var(--tms-white);
  border-color: var(--tms-gold-dark);
}

.tms-cal__none { color: var(--tms-text-muted); font-size: 0.78rem; }

/* A day that opens a detail panel when tapped (teacher's My Roster). */
.tms-cal__day--tappable { cursor: pointer; }
.tms-cal__day--tappable:hover {
  border-color: var(--tms-gold);
  box-shadow: var(--tms-shadow-sm);
}
.tms-cal__day--tappable:focus-visible {
  outline: 2px solid var(--tms-gold-dark);
  outline-offset: 2px;
}

/* The expanded day's details, shown under the grid at readable size. */
.tms-daypanel {
  margin-top: 14px;
  padding: 14px 16px;
  border: 1px solid var(--tms-border);
  border-left: 4px solid var(--tms-gold-dark);
  border-radius: var(--tms-radius);
  background: var(--tms-surface-raised);
}
.tms-daypanel__title {
  font-weight: 700;
  color: var(--tms-navy);
  margin-bottom: 8px;
}

/* A holiday label ("Sunday", or any declared title) is a nowrap pill, so on a
   narrow column it painted straight out of its cell and over the one beside
   it. The grid track is already minmax(0, 1fr) — it was the content that
   overflowed, not the column. Clip at the cell and ellipsise the pill. */
.tms-cal__day { overflow: hidden; }
.tms-cal__body .tms-badge {
  display: block;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tms-roster-actions {
  display: flex;
  gap: 10px;
  align-items: flex-end;
  flex-wrap: wrap;
  margin-top: 14px;
}

.tms-roster-actions__field { margin-bottom: 0; flex: 1; min-width: 240px; }

@media (max-width: 720px) {
  .tms-cal { gap: 4px; }
  .tms-cal__day { min-height: 68px; padding: 6px 5px; }
  .tms-cal__chip { font-size: 0.65rem; padding: 1px 4px; }
  .tms-cal__dow { font-size: 0.62rem; }
  .tms-cal__body .tms-badge { font-size: 0.6rem; padding: 1px 5px; }
}

@media (max-width: 480px) {
  .tms-auth-card { padding: 30px 22px; }
  .tms-card { padding: 18px 18px; }
}

/* ------------------------------------------------------------------ *
 *  Selects & searchable combobox
 *
 *  Two layers, both matching the gold/navy field styling:
 *   1. Every native <select.tms-input> gets a custom chevron so it
 *      stops rendering the bare OS control (works with zero JS).
 *   2. Large pickers marked data-searchable are progressively enhanced
 *      by combobox.js into a searchable dropdown. The real <select>
 *      stays in the DOM as the form's value; if JS never runs, the
 *      styled native select from layer 1 is the graceful fallback.
 * ------------------------------------------------------------------ */

select.tms-input {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  padding-right: 40px;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23a97d3f' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  cursor: pointer;
}
select.tms-input::-ms-expand { display: none; }

/* Combobox — the JS-enhanced searchable version. */
.tms-combo { position: relative; width: 100%; }

/* Keep the native <select> in the DOM (so its value posts) but out of
 * sight once enhanced. Not display:none — that would drop it from some
 * form serialisers and break focus. */
.tms-combo__native {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0);
  white-space: nowrap; border: 0;
}

.tms-combo__control {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 11px 13px;
  border: 1.5px solid var(--tms-border);
  border-radius: var(--tms-radius-sm);
  font-size: 0.95rem;
  font-family: inherit;
  background: #fbfaf6;
  color: var(--tms-text);
  cursor: pointer;
  text-align: left;
  transition: border-color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
}
.tms-combo__control:hover { border-color: var(--tms-gold-light); }
.tms-combo__control:focus,
.tms-combo--open .tms-combo__control {
  outline: none;
  border-color: var(--tms-gold);
  background: var(--tms-white);
  box-shadow: 0 0 0 3px rgba(201, 160, 106, 0.18);
}
.tms-combo__value {
  /* min-width:0 lets the ellipsis kick in inside the flex control — without it
   * a long value overflows the box instead of truncating. */
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.tms-combo__value--placeholder { color: var(--tms-text-muted); }
.tms-combo__chev {
  flex: 0 0 auto;
  width: 14px; height: 14px;
  color: var(--tms-gold-dark);
  transition: transform 0.15s ease;
}
.tms-combo--open .tms-combo__chev { transform: rotate(180deg); }

.tms-combo__panel {
  position: absolute;
  z-index: 40;
  top: calc(100% + 6px);
  left: 0;
  /* At least as wide as the control, but grow to fit the longest option so
   * names never wrap — capped so it can't overflow a phone screen. */
  min-width: max(100%, 240px);
  width: max-content;
  max-width: min(380px, 92vw);
  background: var(--tms-white);
  border: 1.5px solid var(--tms-gold-soft);
  border-radius: var(--tms-radius);
  box-shadow: var(--tms-shadow-lift);
  padding: 8px;
  display: none;
}
.tms-combo--open .tms-combo__panel { display: block; }

.tms-combo__search {
  width: 100%;
  padding: 9px 11px;
  border: 1.5px solid var(--tms-border);
  border-radius: var(--tms-radius-sm);
  font-size: 0.9rem;
  font-family: inherit;
  background: #fbfaf6;
  color: var(--tms-text);
  margin-bottom: 6px;
}
.tms-combo__search:focus {
  outline: none;
  border-color: var(--tms-gold);
  background: var(--tms-white);
}

.tms-combo__list {
  list-style: none;
  margin: 0; padding: 0;
  max-height: 240px;
  overflow-y: auto;
}
.tms-combo__option {
  padding: 9px 11px;
  border-radius: var(--tms-radius-sm);
  font-size: 0.92rem;
  cursor: pointer;
  color: var(--tms-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* Optgroup header inside the combobox list (e.g. roster "Available to assign"). */
.tms-combo__group {
  padding: 8px 11px 4px;
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--tms-gold-dark);
}
.tms-combo__group:not(:first-child) { border-top: 1px solid var(--tms-border); margin-top: 4px; }
.tms-combo__control[disabled], .tms-combo__control:disabled {
  opacity: 0.55; cursor: not-allowed; background: var(--tms-cream-brown);
}
.tms-combo__option:hover,
.tms-combo__option--active {
  background: var(--tms-cream-brown);
}
.tms-combo__option--selected {
  color: var(--tms-gold-dark);
  font-weight: 600;
}
.tms-combo__option--selected::after {
  content: "✓";
  float: right;
  color: var(--tms-gold-dark);
}
.tms-combo__empty {
  padding: 12px 11px;
  font-size: 0.88rem;
  color: var(--tms-text-muted);
  text-align: center;
}

/* ------------------------------------------------------------------ *
 *  List search bar + pagination
 * ------------------------------------------------------------------ */
.tms-searchbar {
  display: flex;
  gap: 8px;
  align-items: center;
  margin-bottom: 16px;
  flex-wrap: wrap;
}
.tms-searchbar .tms-input {
  flex: 1 1 220px;
  width: auto;
  margin: 0;
}

/* Search on the left, a single Filter button on the right that opens a panel
   of criteria (shift, marhala, teacher, …). Built on <details> so it needs no
   JavaScript. */
.tms-filterbar {
  display: flex;
  gap: 10px;
  /* flex-end so a bare submit button (e.g. "Show") lines up with the date
     inputs beside it, whose labels sit above them — not floating at the top.
     Dropdown-toggle filter bars have equal-height items, so this is a no-op
     for them. */
  align-items: flex-end;
  margin-bottom: 16px;
  flex-wrap: wrap;
}
.tms-filter { position: relative; flex: 0 0 auto; }
.tms-filter__toggle {
  list-style: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
}
.tms-filter__toggle::-webkit-details-marker { display: none; }
.tms-filter__toggle .tms-navlink__badge { margin-left: 2px; }
.tms-filter__panel {
  position: absolute;
  right: 0;
  top: calc(100% + 6px);
  z-index: 30;
  width: 340px;
  max-width: 92vw;
  background: var(--tms-white);
  border: 1px solid var(--tms-border);
  border-radius: var(--tms-radius);
  box-shadow: 0 10px 28px rgba(31, 45, 64, 0.16);
  padding: 14px;
}
.tms-filter__grid {
  display: grid;
  /* minmax(0, …) lets each column shrink BELOW its widest option's width —
   * otherwise a long option (e.g. a full teacher name) forces the track wider
   * than the panel and the select's text spills outside the box. */
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 10px;
}
.tms-filter__grid .tms-field { min-width: 0; }
.tms-filter__grid .tms-field > span {
  display: block;
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--tms-text-muted);
  margin-bottom: 4px;
}
.tms-filter__grid .tms-field .tms-input { width: 100%; }
.tms-filter__actions { display: flex; gap: 8px; margin-top: 12px; }

@media (max-width: 560px) {
  .tms-filter { position: static; width: 100%; }
  .tms-filter__panel {
    position: static;
    width: 100%;
    max-width: none;
    box-shadow: none;
    margin-top: 8px;
  }
  .tms-filter__grid { grid-template-columns: 1fr; }
}

.tms-pager {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  margin-top: 18px;
  flex-wrap: wrap;
}
.tms-pager__link {
  display: inline-flex;
  align-items: center;
  padding: 7px 14px;
  border-radius: var(--tms-radius-sm);
  border: 1.5px solid var(--tms-border);
  background: #fbfaf6;
  color: var(--tms-gold-dark);
  text-decoration: none;
  font-size: 0.85rem;
  font-weight: 600;
  transition: border-color 0.15s ease, background 0.15s ease;
}
.tms-pager__link:hover { border-color: var(--tms-gold-light); background: var(--tms-white); }
.tms-pager__link--disabled {
  color: var(--tms-text-muted);
  opacity: 0.5;
  cursor: default;
}
.tms-pager__status { font-size: 0.86rem; color: var(--tms-text); }

/* ------------------------------------------------------------------ *
 *  Date picker (styled calendar over <input type="date">)
 * ------------------------------------------------------------------ */
.tms-dp { position: relative; width: 100%; }
.tms-dp__native {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.tms-dp__control {
  width: 100%;
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 11px 13px;
  border: 1.5px solid var(--tms-border);
  border-radius: var(--tms-radius-sm);
  font-size: 0.95rem; font-family: inherit;
  background: #fbfaf6; color: var(--tms-text);
  cursor: pointer; text-align: left;
  transition: border-color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
}
.tms-dp__control:hover { border-color: var(--tms-gold-light); }
.tms-dp__control:focus,
.tms-dp--open .tms-dp__control {
  outline: none; border-color: var(--tms-gold);
  background: var(--tms-white); box-shadow: 0 0 0 3px rgba(201, 160, 106, 0.18);
}
.tms-dp__value--placeholder { color: var(--tms-text-muted); }
.tms-dp__icon { flex: 0 0 auto; display: inline-flex; color: var(--tms-gold-dark); }

.tms-dp__pop {
  position: absolute; z-index: 40;
  top: calc(100% + 6px); left: 0;
  width: max-content; max-width: 92vw;
  background: var(--tms-white);
  border: 1.5px solid var(--tms-gold-soft);
  border-radius: var(--tms-radius);
  box-shadow: var(--tms-shadow-lift);
  padding: 12px; display: none;
}
.tms-dp--open .tms-dp__pop { display: block; }

.tms-dp__nav { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
.tms-dp__navbtn {
  width: 30px; height: 30px; line-height: 1;
  border: 1.5px solid var(--tms-border); background: #fbfaf6;
  border-radius: var(--tms-radius-sm); cursor: pointer;
  color: var(--tms-gold-dark); font-size: 1rem;
}
.tms-dp__navbtn:hover { border-color: var(--tms-gold-light); background: var(--tms-white); }
.tms-dp__month { font-weight: 700; color: var(--tms-navy); font-size: 0.92rem; }
.tms-dp__month--btn {
  border: none;
  background: transparent;
  cursor: pointer;
  padding: 4px 10px;
  border-radius: var(--tms-radius-sm);
}
.tms-dp__month--btn:hover { background: var(--tms-cream); }
/* Year-picker grid (click the month/year title to reach it). */
.tms-dp__years { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.tms-dp__year {
  border: 1px solid var(--tms-border);
  background: var(--tms-white);
  color: var(--tms-navy);
  border-radius: var(--tms-radius-sm);
  padding: 10px 0;
  cursor: pointer;
  font-size: 0.9rem;
  font-weight: 600;
}
.tms-dp__year:hover { border-color: var(--tms-gold-light); }
.tms-dp__year--selected { background: var(--tms-gold-grad); color: #fff; border: none; }

.tms-dp__grid { display: grid; grid-template-columns: repeat(7, 34px); gap: 3px; }
.tms-dp__dow {
  text-align: center; font-size: 0.68rem; font-weight: 700;
  text-transform: uppercase; color: var(--tms-text-muted); padding-bottom: 4px;
}
.tms-dp__day {
  height: 34px; border: none; background: transparent;
  border-radius: 8px; cursor: pointer; font-size: 0.85rem;
  color: var(--tms-text); font-family: inherit;
}
.tms-dp__day--empty { visibility: hidden; }
.tms-dp__day:hover:not(.tms-dp__day--disabled):not(.tms-dp__day--selected) { background: var(--tms-cream-brown); }
.tms-dp__day--today { border: 1.5px solid var(--tms-gold-soft); }
.tms-dp__day--selected { background: var(--tms-gold-grad); color: #fff; font-weight: 700; }
.tms-dp__day--disabled { color: var(--tms-text-muted); opacity: 0.4; cursor: not-allowed; }

/* ------------------------------------------------------------------ *
 *  Wheel picker (PIN-lock style roller over <select data-wheel>)
 *  Row height 40px, 5 rows visible; the middle row is the selection.
 * ------------------------------------------------------------------ */
.tms-wheel { position: relative; width: 100%; max-width: 260px; }
.tms-wheel__native {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); border: 0;
}
.tms-wheel__viewport {
  height: 200px;               /* 5 * 40 */
  overflow-y: auto;
  scroll-snap-type: y mandatory;
  border: 1.5px solid var(--tms-border);
  border-radius: var(--tms-radius);
  background: #fbfaf6;
  -ms-overflow-style: none;
  scrollbar-width: none;
  /* Fade the top and bottom rows so the centre reads as the focus. */
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 34%, #000 66%, transparent);
  mask-image: linear-gradient(to bottom, transparent, #000 34%, #000 66%, transparent);
}
.tms-wheel__viewport::-webkit-scrollbar { display: none; }
.tms-wheel__pad { height: 80px; }   /* 2 * 40, lets first/last centre */
.tms-wheel__item {
  height: 40px;
  scroll-snap-align: center;
  display: flex; align-items: center; justify-content: center;
  font-size: 0.95rem; color: var(--tms-text-muted);
  cursor: pointer;
  transition: color 0.12s ease, transform 0.12s ease;
  white-space: nowrap;
}
.tms-wheel__item--active {
  color: var(--tms-navy);
  font-weight: 700;
  font-size: 1.05rem;
}
/* The selection band across the centre row. */
.tms-wheel__band {
  position: absolute;
  left: 0; right: 0;
  top: 80px; height: 40px;      /* centre row */
  border-top: 1.5px solid var(--tms-gold);
  border-bottom: 1.5px solid var(--tms-gold);
  background: rgba(201, 160, 106, 0.08);
  pointer-events: none;
  z-index: 1;
}

/* ------------------------------------------------------------------ *
 *  Login hero stats + Join Today (public registration entry)
 * ------------------------------------------------------------------ */
.tms-login__stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin: 28px 0 24px;
}
.tms-login__stats--two { grid-template-columns: repeat(2, 1fr); max-width: 340px; }
.tms-login__stat {
  position: relative;
  padding: 16px 14px 14px;
  border-radius: var(--tms-radius);
  background: linear-gradient(160deg, rgba(255, 255, 255, 0.10), rgba(255, 255, 255, 0.03));
  border: 1px solid rgba(232, 213, 181, 0.18);
  backdrop-filter: blur(2px);
  overflow: hidden;
}
/* A gold hairline accent along the top of each stat card. */
.tms-login__stat::before {
  content: "";
  position: absolute; top: 0; left: 14px; right: 14px; height: 2px;
  background: var(--tms-gold-grad);
  border-radius: 2px;
}
.tms-login__stat-num {
  display: block;
  font-size: 2.15rem; font-weight: 800; line-height: 1;
  color: #fff;
  letter-spacing: -0.02em;
}
.tms-login__stat-label {
  display: block;
  font-size: 0.72rem; margin-top: 7px;
  text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--tms-gold-soft);
}
.tms-login__join {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 12px 22px; border-radius: 999px;
  background: var(--tms-gold-grad); color: var(--tms-navy-dark); font-weight: 800;
  font-size: 0.92rem; box-shadow: var(--tms-glow-gold);
  transition: filter 0.15s ease, transform 0.1s ease;
}
.tms-login__join:hover { filter: brightness(1.06); transform: translateY(-1px); }

/* A gloss streak sweeps across "Join Today" — the button echo of Huffaz's shine. */
.tms-login__join--shine { position: relative; overflow: hidden; }
.tms-login__join--shine::before {
  content: "";
  position: absolute;
  top: 0; left: -60%;
  width: 45%; height: 100%;
  background: linear-gradient(100deg, transparent 0%, rgba(255, 255, 255, 0.6) 50%, transparent 100%);
  transform: skewX(-18deg);
  animation: tms-join-shine 3.6s ease-in-out infinite;
  pointer-events: none;
}
@keyframes tms-join-shine {
  0% { left: -60%; }
  55%, 100% { left: 130%; }
}
@media (prefers-reduced-motion: reduce) {
  .tms-login__join--shine::before { animation: none; }
}

/* Decorative crescent ring behind the hero content. */
.tms-login__hero::after {
  content: "";
  position: absolute;
  right: -120px; top: -80px;
  width: 320px; height: 320px;
  border-radius: 50%;
  border: 2px solid rgba(201, 160, 106, 0.22);
  box-shadow: inset 0 0 0 18px rgba(201, 160, 106, 0.06);
  pointer-events: none;
}
/* Eyebrow becomes a small gold-outlined pill. */
/* Public registration page (reuses the login shell) */
.tms-public {
  max-width: 640px; margin: 0 auto; padding: 40px 20px 60px;
}
.tms-public__head { display: flex; align-items: center; gap: 12px; margin-bottom: 6px; }
.tms-public__mark {
  width: 40px; height: 40px; border-radius: 11px;
  background: var(--tms-gold-grad); color: var(--tms-navy-dark);
  display: flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: 1.2rem;
}
.tms-public__brand { font-weight: 700; font-size: 1.15rem; color: var(--tms-navy); }
.tms-public__signin { margin-left: auto; font-size: 0.86rem; color: var(--tms-gold-dark); font-weight: 600; }

/* Two equal columns that stack on a phone — used by the financial statement's
   income/expense breakdown. */
.tms-two-col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}
@media (max-width: 720px) {
  .tms-two-col { grid-template-columns: 1fr; }
}

/* Print: drop the app chrome and the on-screen-only controls so a statement
   prints as a clean document. */
/* Shown only when printing (hidden on screen); the counterpart to .tms-noprint. */
.tms-print-only { display: none; }

@media print {
  .tms-sidebar, .tms-topbar, .tms-sidebar-backdrop, .tms-noprint { display: none !important; }
  .tms-print-only { display: block !important; }
  .tms-main, .tms-content { margin: 0 !important; padding: 0 !important; }
  .tms-card { box-shadow: none; border-color: #ccc; break-inside: avoid; }
  body { background: #fff; }
}

/* Student Pay Fees: the UPI QR block. */
.tms-pay { text-align: center; }
.tms-pay__qr {
  width: 220px;
  max-width: 70vw;
  margin: 4px auto 12px;
  padding: 12px;
  background: #fff;
  border: 1px solid var(--tms-border);
  border-radius: var(--tms-radius);
}
.tms-pay__qr svg { width: 100%; height: auto; display: block; }
.tms-pay__open { margin-top: 14px; display: inline-flex; align-items: center; justify-content: center; }

/* A highlighted instruction note (send the screenshot to ...). */
.tms-note {
  padding: 12px 14px;
  border: 1px solid var(--tms-border);
  border-left: 4px solid var(--tms-gold-dark);
  border-radius: var(--tms-radius);
  background: var(--tms-surface-raised);
  font-size: 0.9rem;
}