/* ==========================================================================
   Atlas Design System — Base Theme
   Zero Framework · Pure CSS · Scales to 100+ pages
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Plus+Jakarta+Sans:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500&display=swap');

/* ==========================================================================
   TOKENS
   ========================================================================== */
:root {
  --navy: #1B2A4A;
  --sapphire: #2563EB;
  --sapphire-hover: #1D4FD7;
  --gold: #E89B2D;
  --gold-hover: #D48A1F;

  --text: #1E293B;
  --text-secondary: #64748B;
  --border: #E2E8F0;
  --surface: #F1F5F9;
  --bg: #F8FAFC;
  --white: #FFFFFF;
  --success: #059669;
  --warning: #D97706;
  --error: #DC2626;

  --sapphire-light: #DBEAFE;
  --gold-light: #FEF3C7;
  --navy-light: #E8ECF2;

  --font-display: 'Plus Jakarta Sans', sans-serif;
  --font-body: 'Inter', sans-serif;
  --font-mono: 'JetBrains Mono', monospace;

  --shadow-xs: 0 1px 2px rgba(27,42,74,.04);
  --shadow: 0 1px 3px rgba(27,42,74,.06), 0 1px 2px rgba(27,42,74,.04);
  --shadow-md: 0 4px 12px rgba(27,42,74,.08), 0 2px 4px rgba(27,42,74,.04);
  --shadow-lg: 0 12px 32px rgba(27,42,74,.1), 0 4px 8px rgba(27,42,74,.04);

  --ease: 220ms ease-out;
  --ease-slow: 400ms ease-out;

  --sp-xs: .25rem;
  --sp-sm: .5rem;
  --sp-md: 1rem;
  --sp-lg: 1.5rem;
  --sp-xl: 2rem;
  --sp-2xl: 3rem;
  --sp-3xl: 4rem;
  --sp-4xl: 6rem;

  --radius-sm: 6px;
  --radius: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-full: 9999px;

  --container: 1200px;
}

/* ==========================================================================
   RESET
   ========================================================================== */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{font-family:var(--font-body);font-size:1rem;line-height:1.6;color:var(--text);background:var(--bg);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
img,video,svg{display:block;max-width:100%}
a{color:var(--sapphire);text-decoration:none;transition:color var(--ease)}
a:hover{color:var(--sapphire-hover)}
ul,ol{list-style:none}
button{cursor:pointer;font-family:inherit;border:none;background:none}
input,textarea,select{font-family:inherit;font-size:inherit}
::selection{background:var(--sapphire-light);color:var(--navy)}
hr{border:none;height:1px;background:var(--border)}
table{border-collapse:collapse;border-spacing:0}

/* ==========================================================================
   TYPOGRAPHY
   ========================================================================== */
h1,h2,h3,h4,h5,h6{font-family:var(--font-display);color:var(--navy);line-height:1.2;letter-spacing:-.01em;font-weight:700}
h1{font-size:2.5rem;letter-spacing:-.025em}
h2{font-size:2rem;letter-spacing:-.02em}
h3{font-size:1.5rem}
h4{font-size:1.25rem}
h5{font-size:1.125rem}
h6{font-size:1rem}

.display-hero{font-family:var(--font-display);font-size:clamp(2.25rem,5vw,3.25rem);font-weight:800;line-height:1.08;letter-spacing:-.03em;color:var(--navy)}
.text-lead{font-size:1.125rem;line-height:1.7;color:var(--text-secondary)}
.text-md{font-size:1rem}
.text-sm{font-size:.875rem}
.text-xs{font-size:.75rem}
.font-display{font-family:var(--font-display)}
.font-mono{font-family:var(--font-mono)}
.fw-medium{font-weight:500}
.fw-semibold{font-weight:600}
.fw-bold{font-weight:700}
.fw-extrabold{font-weight:800}
.text-navy{color:var(--navy)}
.text-sapphire{color:var(--sapphire)}
.text-gold{color:var(--gold)}
.text-secondary{color:var(--text-secondary)}
.text-white{color:#fff}
.text-white-muted{color:rgba(255,255,255,.5)}
.text-success{color:var(--success)}
.text-error{color:var(--error)}
.text-center{text-align:center}

/* Auth form inline error — hidden by default, shown via JS */
.auth-form-error {
  display: none;
  margin-bottom: var(--sp-md);
}

/* Invite code input — centered, uppercase, monospaced feel */
.form-input-invite-code {
  text-transform: uppercase;
  letter-spacing: .15em;
  font-size: 1.125rem;
  text-align: center;
}

/* Auth card heading override */
.auth-card-heading {
  font-size: 1.25rem;
}
.text-start{text-align:left}
.text-italic{font-style:italic}
.text-uppercase{text-transform:uppercase;letter-spacing:.06em;font-size:.75rem;font-weight:700}

@media(max-width:639px){
  h1{font-size:2rem}
  h2{font-size:1.625rem}
}

/* ==========================================================================
   LAYOUT
   ========================================================================== */
.container{width:100%;max-width:var(--container);margin:0 auto;padding:0 1.5rem}
@media(max-width:639px){.container{padding:0 1rem}}

.grid{display:grid;gap:1.5rem}
.grid-2{grid-template-columns:repeat(2,1fr)}
.grid-3{grid-template-columns:repeat(3,1fr)}
.grid-4{grid-template-columns:repeat(4,1fr)}
.grid-hero{display:grid;grid-template-columns:1fr 1fr;gap:3rem;align-items:center}

@media(max-width:1023px){
  .grid-3,.grid-4{grid-template-columns:repeat(2,1fr)}
  .grid-hero{grid-template-columns:1fr;gap:2rem}
}
@media(max-width:639px){
  .grid-2,.grid-3,.grid-4{grid-template-columns:1fr}
}

.flex{display:flex}
.flex-col{flex-direction:column}
.flex-wrap{flex-wrap:wrap}
.items-center{align-items:center}
.items-start{align-items:flex-start}
.justify-center{justify-content:center}
.justify-between{justify-content:space-between}
.flex-1{flex:1}
.shrink-0{flex-shrink:0}

.gap-xs{gap:var(--sp-xs)}
.gap-sm{gap:var(--sp-sm)}
.gap-md{gap:var(--sp-md)}
.gap-lg{gap:var(--sp-lg)}
.gap-xl{gap:var(--sp-xl)}
.gap-2xl{gap:var(--sp-2xl)}

/* ==========================================================================
   SPACING
   ========================================================================== */
.m-0{margin:0}
.mb-0{margin-bottom:0}
.mb-xs{margin-bottom:var(--sp-xs)}
.mb-sm{margin-bottom:var(--sp-sm)}
.mb-md{margin-bottom:var(--sp-md)}
.mb-lg{margin-bottom:var(--sp-lg)}
.mb-xl{margin-bottom:var(--sp-xl)}
.mb-2xl{margin-bottom:var(--sp-2xl)}
.mb-3xl{margin-bottom:var(--sp-3xl)}
.mt-xs{margin-top:var(--sp-xs)}
.mt-sm{margin-top:var(--sp-sm)}
.mt-md{margin-top:var(--sp-md)}
.mt-lg{margin-top:var(--sp-lg)}
.mt-xl{margin-top:var(--sp-xl)}
.mt-2xl{margin-top:var(--sp-2xl)}
.mx-auto{margin-left:auto;margin-right:auto}

.p-md{padding:var(--sp-md)}
.p-lg{padding:var(--sp-lg)}
.p-xl{padding:var(--sp-xl)}
.p-2xl{padding:var(--sp-2xl)}
.px-lg{padding-left:var(--sp-lg);padding-right:var(--sp-lg)}
.py-md{padding-top:var(--sp-md);padding-bottom:var(--sp-md)}
.py-lg{padding-top:var(--sp-lg);padding-bottom:var(--sp-lg)}
.py-xl{padding-top:var(--sp-xl);padding-bottom:var(--sp-xl)}
.py-2xl{padding-top:var(--sp-2xl);padding-bottom:var(--sp-2xl)}
.py-3xl{padding-top:var(--sp-3xl);padding-bottom:var(--sp-3xl)}
.py-4xl{padding-top:var(--sp-4xl);padding-bottom:var(--sp-4xl)}

/* ==========================================================================
   DISPLAY & UTILITIES
   ========================================================================== */
.block{display:block}
.inline-block{display:inline-block}
.hidden{display:none}
.w-full{width:100%}
.w-fit{width:fit-content}
.h-full{height:100%}
.max-w-xs{max-width:420px}
.max-w-sm{max-width:540px}
.max-w-md{max-width:640px}
.max-w-lg{max-width:800px}
.min-h-screen{min-height:100vh}
.overflow-hidden{overflow:hidden}
.relative{position:relative}
.absolute{position:absolute}
.z-1{z-index:1}
.z-50{z-index:50}
.inset-0{top:0;right:0;bottom:0;left:0}
.pointer-none{pointer-events:none}
.no-dec{text-decoration:none}
.cursor-pointer{cursor:pointer}

.rounded-sm{border-radius:var(--radius-sm)}
.rounded{border-radius:var(--radius)}
.rounded-lg{border-radius:var(--radius-lg)}
.rounded-xl{border-radius:var(--radius-xl)}
.rounded-full{border-radius:var(--radius-full)}
.border{border:1px solid var(--border)}
.border-top{border-top:1px solid var(--border)}
.border-bottom{border-bottom:1px solid var(--border)}

.bg-white{background:var(--white)}
.bg-surface{background:var(--surface)}
.bg-navy{background:var(--navy)}
.bg-sapphire-light{background:var(--sapphire-light)}
.bg-gold-light{background:var(--gold-light)}
.bg-navy-light{background:var(--navy-light)}

.shadow-xs{box-shadow:var(--shadow-xs)}
.shadow{box-shadow:var(--shadow)}
.shadow-md{box-shadow:var(--shadow-md)}
.shadow-lg{box-shadow:var(--shadow-lg)}

/* Responsive visibility */
@media(max-width:639px){.hide-mobile{display:none}.mobile-col{flex-direction:column}}
@media(max-width:767px){.hide-tablet{display:none}}
@media(min-width:640px){.show-mobile-only{display:none}}
@media(min-width:768px){.show-tablet-only{display:none}}

/* ==========================================================================
   BUTTONS
   ========================================================================== */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;padding:.625rem 1.25rem;font-size:.9375rem;font-weight:600;line-height:1.4;border-radius:var(--radius);border:none;cursor:pointer;transition:all var(--ease);text-decoration:none;white-space:nowrap}
.btn-lg{padding:.8125rem 1.75rem;font-size:1rem}
.btn-sm{padding:.4375rem .875rem;font-size:.8125rem}

.btn-primary{background:var(--sapphire);color:#fff;box-shadow:0 1px 2px rgba(37,99,235,.2)}
.btn-primary:hover{background:var(--sapphire-hover);color:#fff;box-shadow:0 4px 12px rgba(37,99,235,.25);transform:translateY(-1px)}
.btn-primary:active{transform:translateY(0)}

.btn-outline{background:var(--white);color:var(--navy);border:1px solid var(--border)}
.btn-outline:hover{background:var(--surface);border-color:#CBD5E1;color:var(--navy);transform:translateY(-1px);box-shadow:var(--shadow)}

.btn-gold{background:var(--gold);color:#fff;box-shadow:0 1px 2px rgba(232,155,45,.2)}
.btn-gold:hover{background:var(--gold-hover);color:#fff;box-shadow:0 4px 12px rgba(232,155,45,.25);transform:translateY(-1px)}

.btn-outline-white{background:transparent;color:#fff;border:1px solid rgba(255,255,255,.3)}
.btn-outline-white:hover{background:rgba(255,255,255,.1);color:#fff;border-color:rgba(255,255,255,.5)}

.btn-ghost{background:transparent;color:var(--text-secondary);padding:.5rem .75rem}
.btn-ghost:hover{color:var(--navy);background:var(--surface)}

.btn-disabled{opacity:.5;cursor:not-allowed;pointer-events:none}

/* ==========================================================================
   CARDS
   ========================================================================== */
.card{background:var(--white);border:1px solid var(--border);border-radius:var(--radius-lg);box-shadow:var(--shadow);transition:all var(--ease)}
.card-hover:hover{box-shadow:var(--shadow-md);transform:translateY(-2px)}
.card-interactive:hover{border-color:var(--sapphire);box-shadow:var(--shadow-md);transform:translateY(-2px)}
.card-accent{border-top:3px solid transparent}
.card-accent:hover{border-top-color:var(--sapphire)}
.card-accent-gold:hover{border-top-color:var(--gold)}
.card-gold-border{border-color:var(--gold)}

/* ==========================================================================
   FORMS
   ========================================================================== */
.form-group{margin-bottom:var(--sp-lg)}
.form-label{display:block;font-size:.875rem;font-weight:500;color:var(--navy);margin-bottom:.375rem}
.form-label-row{display:flex;justify-content:space-between;align-items:baseline}
.form-input{display:block;width:100%;padding:.75rem 1rem;font-size:.9375rem;line-height:1.5;color:var(--text);background:var(--white);border:1px solid var(--border);border-radius:var(--radius);transition:border-color var(--ease),box-shadow var(--ease);appearance:none}
.form-input::placeholder{color:#94A3B8}
.form-input:focus{outline:none;border-color:var(--sapphire);box-shadow:0 0 0 3px rgba(37,99,235,.1)}
.form-input.input-error{border-color:var(--error)}
.form-input.input-error:focus{border-color:var(--error);box-shadow:0 0 0 3px rgba(220,38,38,.1)}

/* ==========================================================================
   NAVBAR
   ========================================================================== */
.navbar{background:rgba(255,255,255,.92);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-bottom:1px solid var(--border);padding:.75rem 0;position:sticky;top:0;z-index:100;transition:box-shadow var(--ease)}
.navbar.scrolled{box-shadow:var(--shadow)}
.navbar-inner{display:flex;align-items:center;justify-content:space-between;gap:1rem}
.navbar-brand{display:flex;align-items:center;gap:.5rem;text-decoration:none}
.navbar-brand-text{font-family:var(--font-display);font-weight:800;font-size:1.375rem;color:var(--navy);letter-spacing:-.02em}
.navbar-brand-sub{font-size:.75rem;color:var(--text-secondary)}
.navbar-links{display:flex;align-items:center;gap:.25rem}
.nav-link{display:block;padding:.5rem .875rem;font-size:.9rem;font-weight:500;color:var(--text-secondary);text-decoration:none;border-radius:var(--radius-sm);transition:all var(--ease)}
.nav-link:hover{color:var(--navy);background:var(--surface)}

.dropdown{position:relative}
.dropdown-trigger{cursor:pointer}
.dropdown-caret{display:inline-block;width:0;height:0;border-left:4px solid transparent;border-right:4px solid transparent;border-top:4px solid var(--text-secondary);margin-left:4px;transition:transform var(--ease)}
.dropdown.open .dropdown-caret{transform:rotate(180deg)}
.dropdown-menu{position:absolute;top:calc(100% + 8px);left:0;min-width:220px;background:var(--white);border:1px solid var(--border);border-radius:var(--radius-lg);box-shadow:var(--shadow-lg);padding:.5rem;opacity:0;visibility:hidden;transform:translateY(-4px);transition:all var(--ease);z-index:200}
.dropdown.open .dropdown-menu{opacity:1;visibility:visible;transform:translateY(0)}
.dropdown-item{display:block;padding:.625rem .875rem;font-size:.9rem;color:var(--text);text-decoration:none;border-radius:var(--radius-sm);transition:background var(--ease)}
.dropdown-item:hover{background:var(--surface);color:var(--text)}

.navbar-toggle{display:none;padding:.5rem;cursor:pointer}
.navbar-toggle-bar{display:block;width:20px;height:2px;background:var(--navy);margin:4px 0;transition:transform var(--ease),opacity var(--ease)}
.navbar-toggle.active .navbar-toggle-bar:nth-child(1){transform:translateY(6px) rotate(45deg)}
.navbar-toggle.active .navbar-toggle-bar:nth-child(2){opacity:0}
.navbar-toggle.active .navbar-toggle-bar:nth-child(3){transform:translateY(-6px) rotate(-45deg)}
.navbar-collapse{display:flex;align-items:center;gap:1.5rem}

@media(max-width:767px){
  .navbar-toggle{display:block}
  .navbar-collapse{display:none;position:absolute;top:100%;left:0;right:0;background:var(--white);border-bottom:1px solid var(--border);box-shadow:var(--shadow-md);flex-direction:column;padding:1rem 1.5rem 1.5rem;gap:.5rem}
  .navbar-collapse.open{display:flex}
  .navbar-links{flex-direction:column;width:100%;gap:0}
  .nav-link{width:100%;padding:.75rem .875rem}
  .navbar-collapse .btn{width:100%;margin-top:.5rem}
  .dropdown-menu{position:static;box-shadow:none;border:none;background:var(--surface);border-radius:var(--radius);padding:.25rem;margin-top:.25rem;opacity:1;visibility:visible;transform:none}
}

/* ==========================================================================
   BADGES · ICON BOX · DIVIDER · AVATAR
   ========================================================================== */
.badge{display:inline-flex;align-items:center;padding:.3125rem .75rem;font-size:.8125rem;font-weight:600;line-height:1.4;border-radius:var(--radius-full);letter-spacing:.02em;margin-bottom:.5rem}
.badge-sapphire{background:var(--sapphire-light);color:var(--sapphire)}
.badge-gold{background:var(--gold-light);color:#92400E}
.badge-navy{background:var(--navy-light);color:var(--navy)}
.badge-white{background:var(--white);border:1px solid var(--border);color:var(--text-secondary)}

.icon-box{width:48px;height:48px;border-radius:10px;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.icon-box i{font-size:24px}
.icon-box-lg{width:56px;height:56px;border-radius:12px}
.icon-box-lg i{font-size:28px}

.divider{display:flex;align-items:center;gap:12px}
.divider::before,.divider::after{content:'';flex:1;height:1px;background:var(--border)}
.divider span{color:var(--text-secondary);font-size:.8125rem;font-weight:500}

.avatar{width:40px;height:40px;border-radius:50%;background:var(--surface);border:1px solid var(--border);display:flex;align-items:center;justify-content:center;flex-shrink:0;color:var(--text-secondary);font-size:.875rem;font-weight:500}
.avatar-lg{width:120px;height:120px;font-size:1rem}

/* ==========================================================================
   TABLE
   ========================================================================== */
.table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
.table{width:100%;border-collapse:collapse;border-radius:var(--radius-lg);overflow:hidden;border:1px solid var(--border);box-shadow:var(--shadow)}
.table th,.table td{padding:.875rem 1rem;text-align:center;vertical-align:middle}
.table thead{background:var(--navy)}
.table thead th{color:#fff;font-weight:600;font-size:.875rem;letter-spacing:.02em;border:none}
.table thead .highlight-col{background:var(--sapphire)}
.table tbody td{border-bottom:1px solid var(--border)}
.table tbody tr:last-child td{border-bottom:none}
.table tbody tr{transition:background var(--ease)}
.table tbody tr:hover{background:var(--bg)}
.table .highlight-col{background:rgba(219,234,254,.4)}

/* ==========================================================================
   SECTION HELPERS
   ========================================================================== */
.section{padding:var(--sp-4xl) 0}
.section-sm{padding:var(--sp-3xl) 0}
@media(max-width:639px){
  .section{padding:var(--sp-3xl) 0}
  .section-sm{padding:var(--sp-2xl) 0}
}

/* Placeholder images */
.placeholder{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-xl);display:flex;align-items:center;justify-content:center;color:var(--text-secondary);font-size:.875rem}

/* ==========================================================================
   ANIMATIONS
   ========================================================================== */
@keyframes revealUp{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}
@keyframes revealScale{from{opacity:0;transform:scale(.96)}to{opacity:1;transform:scale(1)}}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}

.anim-reveal{animation:revealUp .5s ease-out both}
.anim-scale{animation:revealScale .5s ease-out both}
.anim-fade{animation:fadeIn .5s ease-out both}
.delay-1{animation-delay:80ms}
.delay-2{animation-delay:160ms}
.delay-3{animation-delay:240ms}
.delay-4{animation-delay:320ms}
.delay-5{animation-delay:400ms}
.delay-6{animation-delay:480ms}
.delay-7{animation-delay:560ms}

.scroll-reveal{opacity:0;transform:translateY(24px);transition:opacity .6s ease-out,transform .6s ease-out}
.scroll-reveal.visible{opacity:1;transform:translateY(0)}

/* ==========================================================================
   ATLAS ADMIN LAYOUT
   Dashboard sidebar + content area for atlas_admin role pages.
   Uses atlas- prefix to avoid collision with superadmin admin- classes.
   ========================================================================== */
.atlas-layout {
  display: flex;
  min-height: 100vh;
}

.atlas-sidebar {
  width: 240px;
  background: var(--navy);
  color: #fff;
  display: flex;
  flex-direction: column;
  padding: 1.5rem 0;
  flex-shrink: 0;
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  z-index: 50;
}

.atlas-sidebar-logo {
  padding: 0 1.5rem;
  margin-bottom: 2rem;
}

.atlas-sidebar-logo-text {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.25rem;
  color: #fff;
  letter-spacing: -.02em;
}

.atlas-sidebar-logo-sub {
  font-size: .75rem;
  color: rgba(255,255,255,.45);
  margin-top: 2px;
}

.atlas-sidebar-user {
  padding: 0 1.5rem;
  margin-bottom: 1.5rem;
  display: flex;
  align-items: center;
  gap: .75rem;
}

.atlas-sidebar-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgba(37,99,235,.2);
  color: rgba(255,255,255,.9);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: .8125rem;
  letter-spacing: .02em;
  flex-shrink: 0;
  overflow: hidden;
}

.atlas-sidebar-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.atlas-sidebar-user-name {
  font-size: .8125rem;
  color: rgba(255,255,255,.7);
  font-weight: 500;
}

.atlas-nav {
  flex: 1;
}

.atlas-nav-item {
  display: flex;
  align-items: center;
  gap: .75rem;
  padding: .75rem 1.5rem;
  color: rgba(255,255,255,.55);
  text-decoration: none;
  font-size: .9375rem;
  font-weight: 500;
  transition: all 200ms ease;
  border-left: 3px solid transparent;
}

.atlas-nav-item:hover {
  color: #fff;
  background: rgba(255,255,255,.06);
}

.atlas-nav-item.active {
  color: #fff;
  background: rgba(37,99,235,.12);
  border-left-color: var(--sapphire);
}

.atlas-nav-item i {
  font-size: 20px;
}

.atlas-nav-bottom {
  border-top: 1px solid rgba(255,255,255,.08);
  padding-top: .5rem;
}

.atlas-nav-logout,
.admin-nav-logout {
  margin: 0;
  padding: 0;
}

.atlas-nav-logout button,
.admin-nav-logout button {
  background: none;
  border: none;
  cursor: pointer;
  width: 100%;
  text-align: left;
}

.btn-link-reset {
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  text-decoration: underline;
}

.atlas-content {
  flex: 1;
  min-width: 0;
  margin-left: 240px;
  padding: 2rem 2.5rem;
  background: var(--bg);
  min-height: 100vh;
}

.atlas-header {
  margin-bottom: 2rem;
}

.atlas-header h1 {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--navy);
}

/* ==========================================================================
   METRIC CARDS — Dashboard stat display
   "Data-forward, not decoration-forward" per Atlas visual identity.
   ========================================================================== */
.metric-card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
  padding: 1.5rem;
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  transition: box-shadow var(--ease), transform var(--ease);
}

.metric-card:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-1px);
}

.metric-icon {
  width: 44px;
  height: 44px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.metric-icon i {
  font-size: 22px;
}

.metric-icon-sapphire {
  background: var(--sapphire-light);
  color: var(--sapphire);
}

.metric-icon-gold {
  background: var(--gold-light);
  color: #92400E;
}

.metric-body {
  flex: 1;
  min-width: 0;
}

.metric-label {
  font-size: .8125rem;
  font-weight: 500;
  color: var(--text-secondary);
  margin-bottom: .25rem;
  letter-spacing: .01em;
}

.metric-value {
  font-family: var(--font-mono);
  font-size: 1.75rem;
  font-weight: 600;
  color: var(--navy);
  line-height: 1.2;
  letter-spacing: -.02em;
}

/* ==========================================================================
   INSTITUTE PROFILE — Photo + form layout
   ========================================================================== */
.institute-photo-wrap {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  margin-bottom: var(--sp-xl);
}

.institute-photo {
  width: 96px;
  height: 96px;
  border-radius: var(--radius-lg);
  border: 2px solid var(--border);
  object-fit: cover;
  background: var(--surface);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  overflow: hidden;
}

.institute-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.institute-photo-placeholder {
  color: var(--text-secondary);
  font-size: 36px;
}

.institute-photo-actions {
  display: flex;
  flex-direction: column;
  gap: .5rem;
}

/* ==========================================================================
   PROFILE FIELD — Read-only display fields
   ========================================================================== */
.profile-field {
  padding: 1rem 0;
  border-bottom: 1px solid var(--border);
}

.profile-field:last-child {
  border-bottom: none;
}

.profile-field-label {
  font-size: .8125rem;
  font-weight: 500;
  color: var(--text-secondary);
  margin-bottom: .25rem;
}

.profile-field-value {
  font-size: .9375rem;
  color: var(--text);
}

/* ==========================================================================
   FORM FEEDBACK — Success/error toast
   ========================================================================== */
.form-feedback {
  display: none;
  padding: .75rem 1rem;
  border-radius: var(--radius);
  font-size: .875rem;
  font-weight: 500;
  margin-bottom: var(--sp-lg);
  animation: revealUp .3s ease-out both;
}

.form-feedback.show {
  display: block;
}

.form-feedback-success {
  background: #ECFDF5;
  color: var(--success);
  border: 1px solid #A7F3D0;
}

.form-feedback-error {
  background: #FEF2F2;
  color: var(--error);
  border: 1px solid #FECACA;
}

/* ==========================================================================
   TABS — Browser-style tab bar
   ========================================================================== */
.atlas-tabs {
  display: flex;
  gap: 0;
  border-bottom: 2px solid var(--border);
  margin-bottom: var(--sp-xl);
}

.atlas-tab {
  padding: .625rem 1.25rem;
  font-size: .875rem;
  font-weight: 500;
  color: var(--text-secondary);
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  margin-bottom: -2px;
  cursor: pointer;
  transition: color var(--ease), border-color var(--ease);
}

.atlas-tab:hover {
  color: var(--text);
}

.atlas-tab.active {
  color: var(--sapphire);
  border-bottom-color: var(--sapphire);
}

.atlas-tab-content {
  display: none;
}

.atlas-tab-content.active {
  display: block;
}

/* ==========================================================================
   INVITE CODE — Display + actions
   ========================================================================== */
.invite-code-section-title {
  font-size: .9375rem;
  font-weight: 600;
  color: var(--navy);
}

.invite-code-display {
  display: flex;
  align-items: center;
  gap: .75rem;
  flex-wrap: wrap;
}

.invite-code-value {
  font-family: var(--font-mono);
  font-size: .9375rem;
  font-weight: 500;
  letter-spacing: .1em;
  color: var(--text);
  padding: .375rem .75rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}

/* ==========================================================================
   TOGGLE LABEL — Checkbox with description
   ========================================================================== */
.toggle-label {
  display: flex;
  align-items: flex-start;
  gap: .75rem;
  cursor: pointer;
  padding: .75rem 0;
}

.toggle-label input[type="checkbox"] {
  margin-top: .25rem;
  width: 1.125rem;
  height: 1.125rem;
  flex-shrink: 0;
  accent-color: var(--sapphire);
}

.toggle-text {
  display: flex;
  flex-direction: column;
  gap: .25rem;
}

/* ==========================================================================
   ROLE CARD — Disabled state for coming soon
   ========================================================================== */
.role-card-disabled {
  opacity: .6;
  cursor: default;
  pointer-events: none;
}

/* ==========================================================================
   USERS TABLE — Admin user listing
   "Data-forward, not decoration-forward" per Atlas visual identity.
   ========================================================================== */

/* Toolbar: search + filters */
.users-toolbar {
  display: flex;
  align-items: center;
  gap: .75rem;
  margin-bottom: var(--sp-lg);
  flex-wrap: wrap;
}

.users-search-wrap {
  position: relative;
  flex: 1;
  min-width: 200px;
  max-width: 340px;
}

.users-search-icon {
  position: absolute;
  left: .875rem;
  top: 50%;
  transform: translateY(-50%);
  color: var(--text-secondary);
  font-size: 1.125rem;
  pointer-events: none;
}

.users-search-input {
  padding-left: 2.5rem !important;
  font-size: .875rem;
}

/* ===== Filter Bar ===== */
.filter-bar {
  display: flex;
  align-items: center;
  gap: .625rem;
  flex-wrap: wrap;
}

.filter-bar-label {
  display: flex;
  align-items: center;
  gap: .3rem;
  font-size: .8125rem;
  font-weight: 600;
  color: var(--text-secondary);
  white-space: nowrap;
  user-select: none;
}

.filter-pills {
  display: flex;
  align-items: center;
  gap: .375rem;
  flex-wrap: wrap;
}

/* Split-pill: [Label | Select▾] */
.filter-pill {
  display: flex;
  align-items: stretch;
  border: 1px solid var(--border);
  border-radius: var(--radius-full);
  overflow: hidden;
  background: var(--white);
  transition: border-color var(--ease), box-shadow var(--ease);
  cursor: pointer;
}

.filter-pill:hover {
  border-color: #93C5FD;
  box-shadow: 0 0 0 2px rgba(37,99,235,.06);
}

.filter-pill-lbl {
  display: flex;
  align-items: center;
  padding: .375rem .5rem .375rem .75rem;
  font-size: .75rem;
  font-weight: 600;
  color: var(--text-secondary);
  background: var(--surface);
  border-right: 1px solid var(--border);
  white-space: nowrap;
  pointer-events: none;
  transition: background var(--ease), color var(--ease), border-color var(--ease);
  letter-spacing: .01em;
}

.filter-pill select {
  padding: .375rem 1.75rem .375rem .5rem;
  font-size: .8125rem;
  font-weight: 500;
  color: var(--text);
  background: transparent;
  border: none;
  outline: none;
  cursor: pointer;
  appearance: none;
  min-width: 80px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M3 4.5L6 7.5L9 4.5' fill='none' stroke='%2364748B' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right .5rem center;
  transition: color var(--ease);
  font-family: var(--font-body);
}

.filter-pill select:focus {
  outline: none;
}

/* Active state — filter has a non-default value */
.filter-pill.is-active {
  border-color: var(--sapphire);
}

.filter-pill.is-active .filter-pill-lbl {
  background: var(--sapphire);
  color: #fff;
  border-right-color: var(--sapphire-hover);
}

.filter-pill.is-active select {
  color: var(--sapphire);
  font-weight: 600;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M3 4.5L6 7.5L9 4.5' fill='none' stroke='%232563EB' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

/* Clear filters link */
.filter-clear-link {
  display: none;
  align-items: center;
  gap: .25rem;
  font-size: .8125rem;
  font-weight: 500;
  color: var(--text-secondary);
  text-decoration: none;
  padding: .3rem .5rem;
  border-radius: var(--radius);
  transition: color var(--ease), background var(--ease);
  margin-left: .125rem;
}

.filter-clear-link.show {
  display: flex;
}

.filter-clear-link:hover {
  color: var(--error);
  background: #FEF2F2;
}

/* Legacy — kept for manage modal select and other non-filter uses */
.form-input-sm {
  padding: .4375rem 2rem .4375rem .75rem;
  font-size: .8125rem;
  min-width: 120px;
  display: block;
  width: auto;
  color: var(--text-secondary);
  font-weight: 500;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-full);
  transition: all var(--ease);
  appearance: none;
  cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M3 4.5L6 7.5L9 4.5' fill='none' stroke='%2364748B' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right .625rem center;
}

.form-input-sm:hover {
  border-color: var(--sapphire);
  color: var(--text);
}

.form-input-sm:focus {
  outline: none;
  border-color: var(--sapphire);
  box-shadow: 0 0 0 3px rgba(37,99,235,.1);
}

/* Bulk action bar — hidden by default via .hidden class */
.users-bulk-bar {
  display: none;
  align-items: center;
  gap: .75rem;
  padding: .625rem 1rem;
  background: var(--sapphire-light);
  border: 1px solid rgba(37,99,235,.2);
  border-radius: var(--radius);
  margin-bottom: var(--sp-md);
  font-size: .8125rem;
  font-weight: 600;
  color: var(--sapphire);
  animation: revealUp .2s ease-out both;
}

.users-bulk-bar.show {
  display: flex;
}

/* Table */
.users-table {
  width: 100%;
  border-collapse: collapse;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow);
}

.users-table thead {
  background: var(--surface);
  border-bottom: 1px solid var(--border);
}

.users-table thead th {
  padding: .6875rem 1rem;
  font-size: .75rem;
  font-weight: 600;
  color: var(--navy);
  text-align: left;
  text-transform: uppercase;
  letter-spacing: .04em;
  white-space: nowrap;
  border-bottom: 1px solid var(--border);
}

.users-th-check {
  width: 40px;
  text-align: center !important;
}

.users-th-check input[type="checkbox"] {
  accent-color: var(--sapphire);
  cursor: pointer;
}

.users-th-sortable {
  cursor: pointer;
  user-select: none;
  transition: color var(--ease);
}

.users-th-sortable:hover {
  color: var(--sapphire);
}

.users-th-sortable i {
  font-size: .625rem;
  margin-left: .25rem;
  opacity: .4;
  vertical-align: middle;
}

.users-th-sortable.sort-active i {
  opacity: 1;
  color: var(--sapphire);
}

.users-table tbody td {
  padding: .6875rem 1rem;
  font-size: .875rem;
  border-bottom: 1px solid var(--border);
  vertical-align: middle;
}

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

.users-table tbody tr {
  transition: background var(--ease);
}

.users-table tbody tr:hover {
  background: var(--bg);
}

.users-table tbody td input[type="checkbox"] {
  accent-color: var(--sapphire);
  cursor: pointer;
}

.users-td-check {
  width: 40px;
  text-align: center !important;
}

.users-td-name {
  font-weight: 500;
  color: var(--text);
}

.users-td-email {
  color: var(--text-secondary);
  font-size: .8125rem;
}

.users-empty {
  text-align: center;
  padding: 3rem 1rem;
  color: var(--text-secondary);
  font-size: .9375rem;
}

.users-empty i {
  font-size: 2rem;
  display: block;
  margin-bottom: .5rem;
  opacity: .4;
}

/* Badges */
.users-badge {
  display: inline-flex;
  align-items: center;
  padding: .125rem .5rem;
  font-size: .6875rem;
  font-weight: 600;
  border-radius: var(--radius-full);
  white-space: nowrap;
  letter-spacing: .02em;
  text-transform: uppercase;
}

.users-badge + .users-badge {
  margin-left: .25rem;
}

.users-badge-verified {
  background: #ECFDF5;
  color: var(--success);
}

.users-badge-unverified {
  background: #FEF3C7;
  color: #92400E;
}

.users-badge-banned {
  background: #FEF2F2;
  color: var(--error);
}

.users-badge-teacher {
  background: var(--sapphire-light);
  color: var(--sapphire);
}

.users-badge-student {
  background: var(--gold-light);
  color: #92400E;
}

.users-badge-owner {
  background: var(--gold-light);
  color: #92400E;
  border: 1px solid rgba(232,155,45,.3);
}

.users-badge-admin {
  background: var(--navy-light);
  color: var(--navy);
}

.users-badge-parent {
  background: #F0FDF4;
  color: #166534;
}

/* Action buttons */
.users-actions {
  display: flex;
  gap: .25rem;
}

.users-action-btn {
  padding: .25rem .5rem;
  font-size: .6875rem;
  font-weight: 500;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: var(--white);
  color: var(--text-secondary);
  cursor: pointer;
  transition: all var(--ease);
  display: inline-flex;
  align-items: center;
  gap: .1875rem;
  white-space: nowrap;
}

.users-action-btn:hover {
  border-color: var(--sapphire);
  color: var(--sapphire);
  background: var(--sapphire-light);
}

.users-action-btn-danger:hover {
  border-color: var(--error);
  color: var(--error);
  background: #FEF2F2;
}

.users-action-btn-success:hover {
  border-color: var(--success);
  color: var(--success);
  background: #ECFDF5;
}

.users-action-btn:disabled {
  opacity: .4;
  cursor: not-allowed;
  pointer-events: none;
}

/* Pagination — hidden by default, shown by JS when totalPages > 1 */
.users-pagination {
  display: none;
  align-items: center;
  justify-content: space-between;
  margin-top: var(--sp-lg);
  font-size: .8125rem;
  color: var(--text-secondary);
}

.users-pagination.show {
  display: flex;
}

.users-pagination-info {
  font-weight: 500;
}

.users-pagination-pages {
  display: flex;
  align-items: center;
  gap: .25rem;
}

.users-page-btn {
  padding: .3125rem .625rem;
  font-size: .8125rem;
  font-weight: 500;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--white);
  color: var(--text);
  cursor: pointer;
  transition: all var(--ease);
  font-family: var(--font-body);
}

.users-page-btn:hover {
  border-color: var(--sapphire);
  color: var(--sapphire);
}

.users-page-btn.active {
  background: var(--sapphire);
  color: #fff;
  border-color: var(--sapphire);
}

.users-page-btn:disabled {
  opacity: .35;
  cursor: not-allowed;
}

/* Loading overlay — display:none by default, JS shows via removing .hidden */
.users-loading {
  display: none;
  align-items: center;
  justify-content: center;
  padding: 2rem;
  min-height: 120px;
}

.users-loading.show {
  display: flex;
}

.users-loading-spinner {
  width: 28px;
  height: 28px;
  border: 3px solid var(--border);
  border-top-color: var(--sapphire);
  border-radius: 50%;
  animation: spin .6s linear infinite;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

/* Responsive */
@media (max-width: 1023px) {
  .users-toolbar {
    flex-direction: column;
    align-items: stretch;
  }
  .users-search-wrap {
    max-width: none;
  }
}

@media (max-width: 639px) {
  .users-table thead th,
  .users-table tbody td {
    padding: .5rem .625rem;
    font-size: .75rem;
  }
  .users-actions {
    flex-direction: column;
    gap: .125rem;
  }
  .users-pagination {
    flex-direction: column;
    gap: .75rem;
    align-items: center;
  }
}

/* ==========================================================================
   BOARDS SECTION — Institute profile boards card-selector
   ========================================================================== */
.boards-section {
  padding-bottom: var(--sp-lg);
}

/* Grid of board tiles */
.boards-grid {
  display: flex;
  gap: .75rem;
  flex-wrap: wrap;
}

/* Base tile — all boards share this */
.board-tile {
  position: relative;
  width: 108px;
  height: 88px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-lg);
  gap: .25rem;
  transition: all var(--ease);
}

/* Lock icon on assigned tiles */
.board-tile-lock {
  position: absolute;
  top: .5rem;
  right: .5rem;
  font-size: .75rem;
  opacity: .65;
}

/* Board name */
.board-tile-name {
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: .03em;
}

/* Hint text below name */
.board-tile-hint {
  font-size: .6875rem;
  opacity: .65;
  letter-spacing: .01em;
}

/* Add / check icons */
.board-tile-add-icon,
.board-tile-selected-icon {
  font-size: 1.125rem;
  transition: transform var(--ease);
}

/* === Assigned state === */
.board-tile-assigned {
  background: var(--sapphire);
  color: #fff;
  cursor: default;
  box-shadow: var(--shadow-md);
}

/* === Available (not yet added) state === */
.board-tile-available {
  background: var(--white);
  border: 1.5px dashed var(--border);
  color: var(--text-secondary);
  cursor: pointer;
}

.board-tile-selected-icon {
  display: none;
}

.board-tile-available:hover {
  border-color: var(--sapphire);
  border-style: solid;
  color: var(--sapphire);
  background: #F0F6FF;
}

.board-tile-available:hover .board-tile-add-icon {
  transform: scale(1.15);
}

/* === Selected (pending confirm) state === */
.board-tile-available.selected {
  background: var(--sapphire-light);
  border: 2px solid var(--sapphire);
  border-style: solid;
  color: var(--sapphire);
}

.board-tile-available.selected .board-tile-add-icon {
  display: none;
}

.board-tile-available.selected .board-tile-selected-icon {
  display: block;
}

/* Footer shown when a tile is selected */
.boards-add-footer {
  display: none;
  align-items: center;
  gap: .75rem;
  margin-top: var(--sp-md);
  padding: .75rem 1rem;
  background: var(--sapphire-light);
  border: 1px solid rgba(37,99,235,.2);
  border-radius: var(--radius);
  animation: revealUp .18s ease-out both;
}

.boards-add-footer.show {
  display: flex;
}

/* ==========================================================================
   CLASS CARDS — Grid display for classes
   ========================================================================== */
.class-card {
  position: relative;
  display: flex;
  flex-direction: column;
  transition: box-shadow var(--ease), transform var(--ease);
}

.class-card-delete {
  position: absolute;
  top: .75rem;
  right: .75rem;
  background: none;
  border: none;
  color: var(--error);
  font-size: 1rem;
  cursor: pointer;
  padding: .25rem;
  line-height: 1;
  opacity: .6;
  transition: opacity var(--ease);
}

.class-card-delete:hover {
  opacity: 1;
}

.class-card-delete-tooltip {
  position: absolute;
  right: 100%;
  top: 50%;
  transform: translateY(-50%);
  margin-right: .375rem;
  background: var(--navy);
  color: var(--white);
  font-size: .6875rem;
  font-weight: 500;
  padding: .25rem .5rem;
  border-radius: var(--radius-sm);
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transition: opacity var(--ease);
}

.class-card-delete:hover .class-card-delete-tooltip {
  opacity: 1;
}

.class-card:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-1px);
}

.class-card-header {
  display: flex;
  align-items: baseline;
  gap: .5rem;
}

.class-card-grade {
  font-family: var(--font-display);
  font-size: 1.125rem;
  font-weight: 700;
  color: var(--navy);
}

.class-card-division {
  font-size: .9375rem;
  font-weight: 600;
  color: var(--text-secondary);
}

.class-card-badges {
  display: flex;
  flex-wrap: wrap;
  gap: .375rem;
}

.class-card-teacher {
  display: flex;
  align-items: center;
  gap: .375rem;
}

.class-card-manage {
  background: none;
  border: none;
  color: var(--sapphire);
  font-size: .8125rem;
  font-weight: 500;
  cursor: pointer;
  padding: .25rem 0;
  display: inline-flex;
  align-items: center;
  gap: .25rem;
  margin-top: auto;
  padding-top: var(--sp-md);
  opacity: .7;
  transition: opacity var(--ease);
}

.class-card-manage:hover {
  opacity: 1;
}

/* ==========================================================================
   SUBJECT BADGES & MANAGE MODAL
   ========================================================================== */
.subject-badges-wrap {
  display: flex;
  flex-wrap: wrap;
  gap: .375rem;
}

.subject-badge {
  display: inline-block;
  padding: .25rem .625rem;
  font-size: .75rem;
  font-weight: 500;
  color: var(--navy);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
}

.subject-checkbox-list {
  max-height: 220px;
  overflow-y: auto;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: .5rem .75rem;
}

.subject-checkbox-list .toggle-label {
  padding: .375rem 0;
}

.manage-section {
  margin-bottom: 0;
}

/* ==========================================================================
   CLASS DASHBOARD — Hero stats & subject list
   ========================================================================== */

/* Teacher metric card spans 2 grid columns */
.metric-card-wide {
  grid-column: span 2;
}

/* Non-numeric metric value (e.g. teacher name) — plain sans-serif */
.metric-value-text {
  font-size: 1.0625rem;
  font-weight: 600;
  color: var(--navy);
  margin-top: .125rem;
}

.metric-value-empty {
  font-size: .9375rem;
  color: var(--text-secondary);
  margin-top: .125rem;
}

/* Subject teacher cell in subjects table */
.subject-teacher-cell {
  white-space: nowrap;
}

.btn-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.75rem;
  height: 1.75rem;
  border: none;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--text-secondary);
  cursor: pointer;
  flex-shrink: 0;
  transition: background .15s, color .15s;
}

.btn-icon:hover {
  background: var(--surface);
  color: var(--error);
}

/* Subject teacher — resolved state (plain text + edit icon) */
.subject-teacher-resolved {
  display: none;
  align-items: center;
  gap: .375rem;
}

.subject-teacher-resolved.show {
  display: flex;
}

.subject-teacher-name {
  color: var(--text);
}

.subject-teacher-edit {
  color: var(--text-secondary);
}

.subject-teacher-edit:hover {
  color: var(--sapphire);
  background: var(--sapphire-light);
}

/* Subject teacher — edit state (dropdown + confirm/discard) */
.subject-teacher-edit-wrap {
  display: none;
  align-items: center;
  gap: .375rem;
}

.subject-teacher-edit-wrap.show {
  display: flex;
}

.subject-teacher-confirm {
  color: var(--success);
}

.subject-teacher-confirm:hover {
  background: #ECFDF5;
  color: var(--success);
}

.subject-teacher-discard:hover {
  background: var(--surface);
  color: var(--error);
}

/* Loading state on the select */
.subject-teacher-select.is-loading {
  opacity: .55;
  pointer-events: none;
}

/* Makes a class card navigable on click */
.class-card-clickable {
  cursor: pointer;
}

/* ==========================================================================
   MODAL OVERLAY
   ========================================================================== */
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(27,42,74,.4);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 200;
  animation: fadeIn .2s ease-out both;
}

.modal-overlay.hidden {
  display: none;
}

.modal-content {
  animation: revealScale .25s ease-out both;
  max-height: 90vh;
  overflow-y: auto;
}

/* ==========================================================================
   COURSE CARDS — Teacher courses page
   ========================================================================== */
.course-card-title {
  font-family: var(--font-display);
  font-size: 1.125rem;
  font-weight: 700;
  color: var(--navy);
  line-height: 1.3;
}

/* Clickable course card link */
.course-card-link {
  display: block;
  text-decoration: none;
  color: inherit;
  transition: box-shadow var(--ease), transform var(--ease);
}
.course-card-link:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}

/* ==========================================================================
   ANNOUNCEMENTS — Course detail feed
   ========================================================================== */

/* Avatar circle */
.avatar-circle {
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  background: var(--sapphire);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  font-size: .875rem;
  flex-shrink: 0;
}

/* Ghost button (back arrow) */
.btn-ghost {
  background: transparent;
  border: none;
  color: var(--text-secondary);
  padding: var(--sp-sm);
  cursor: pointer;
  border-radius: var(--sp-sm);
  transition: background var(--ease), color var(--ease);
}
.btn-ghost:hover {
  background: var(--surface);
  color: var(--text);
}
.btn-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  padding: 0;
}

/* Announcement composer */
.announcement-composer {
  display: none;
}
.announcement-composer.show {
  display: block;
}
.announcement-textarea {
  width: 100%;
  min-height: 4.5rem;
  resize: vertical;
}
.announcement-composer-actions {
  display: flex;
  justify-content: flex-end;
  gap: var(--sp-sm);
}

/* Announcement card */
.announcement-card {
  border: 1px solid var(--border);
}
.announcement-header {
  display: flex;
  align-items: center;
  gap: var(--sp-md);
  margin-bottom: var(--sp-md);
}
.announcement-author {
  font-weight: 600;
  font-size: .9375rem;
  color: var(--text);
}
.announcement-date {
  font-size: .8125rem;
  color: var(--text-secondary);
  margin-top: 1px;
}
.announcement-body {
  font-size: .9375rem;
  line-height: 1.6;
  color: var(--text);
  white-space: pre-wrap;
  word-break: break-word;
}
.announcement-footer {
  margin-top: var(--sp-md);
  padding-top: var(--sp-md);
  border-top: 1px solid var(--border);
}
/* Footer toggle (clickable) */
.announcement-comment-toggle {
  font-size: .8125rem;
  color: var(--text-secondary);
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: var(--sp-xs);
  transition: color var(--ease);
}
.announcement-comment-toggle:hover {
  color: var(--sapphire);
}

/* Comments section (inside announcement card) */
.comments-section {
  display: none;
  margin-top: var(--sp-md);
  padding-top: var(--sp-md);
  border-top: 1px solid var(--border);
}
.comments-section.show {
  display: block;
}

/* Comment item */
.comment-item {
  display: flex;
  gap: var(--sp-sm);
  padding: var(--sp-sm) 0;
}

/* Comment avatar (smaller) */
.comment-avatar {
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 50%;
  background: var(--navy);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  font-size: .6875rem;
  flex-shrink: 0;
}

.comment-content {
  flex: 1;
  min-width: 0;
}
.comment-meta {
  display: flex;
  align-items: baseline;
  gap: var(--sp-sm);
}
.comment-author {
  font-weight: 600;
  font-size: .8125rem;
  color: var(--text);
}
.comment-date {
  font-size: .75rem;
  color: var(--text-secondary);
}
.comment-body {
  font-size: .8125rem;
  line-height: 1.5;
  color: var(--text);
  margin-top: 2px;
  word-break: break-word;
}

/* Comment input row */
.comment-input-row {
  display: flex;
  align-items: center;
  gap: var(--sp-sm);
  margin-top: var(--sp-sm);
  padding-top: var(--sp-sm);
  border-top: 1px solid var(--border);
}
.comment-input {
  flex: 1;
  font-size: .8125rem;
  padding: var(--sp-xs) var(--sp-sm);
}

/* Announcement loading / empty states */
.announcements-loading,
.announcements-empty {
  display: none;
}
.announcements-loading.show,
.announcements-empty.show {
  display: block;
}

/* IntersectionObserver sentinel */
.announcement-sentinel {
  height: 1px;
}

/* ==========================================================================
   CLASSWORK
   ========================================================================== */

/* Create dropdown */
.classwork-create-dropdown {
  position: relative;
  display: inline-block;
}
.classwork-create-menu {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  margin-top: var(--sp-xs);
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: 0 4px 12px rgba(0,0,0,.1);
  z-index: 10;
  min-width: 10rem;
}
.classwork-create-menu.show {
  display: block;
}
.classwork-create-option {
  display: flex;
  align-items: center;
  gap: var(--sp-sm);
  width: 100%;
  padding: .625rem 1rem;
  border: none;
  background: none;
  font-size: .875rem;
  color: var(--text);
  cursor: pointer;
  text-align: left;
}
.classwork-create-option:hover {
  background: var(--surface);
}

/* Classwork form */
.classwork-form {
  display: none;
}
.classwork-form.show {
  display: block;
}
.classwork-assignment-fields {
  display: none;
}
.classwork-assignment-fields.show {
  display: block;
}
.classwork-form-actions {
  display: flex;
  justify-content: flex-end;
  gap: var(--sp-sm);
}

/* File upload */
.classwork-file-input {
  display: none;
}
.classwork-file-upload {
  display: flex;
  align-items: center;
  gap: var(--sp-sm);
}
.classwork-file-list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-sm);
  margin-top: var(--sp-sm);
}
.classwork-file-chip {
  display: flex;
  align-items: center;
  gap: var(--sp-xs);
  padding: .375rem .75rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  font-size: .8125rem;
}
.classwork-file-chip.uploading {
  opacity: .7;
}
.classwork-file-chip.failed {
  border-color: var(--error);
  color: var(--error);
}
.classwork-file-chip-spinner {
  animation: spin 1s linear infinite;
}
@keyframes spin {
  to { transform: rotate(360deg); }
}
.classwork-file-chip-name {
  max-width: 12rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.classwork-file-chip-status {
  color: var(--text-secondary);
  font-size: .75rem;
}
.classwork-file-chip-remove {
  border: none;
  background: none;
  cursor: pointer;
  color: var(--text-secondary);
  padding: 0;
  margin-left: var(--sp-xs);
  font-size: .875rem;
  line-height: 1;
}
.classwork-file-chip-remove:hover {
  color: var(--error);
}

/* Classwork feed card — unified layout for both Classwork tab and Announcements tab */
.classwork-feed-card {
  cursor: pointer;
  border: 1px solid var(--border);
  transition: border-color var(--ease), box-shadow var(--ease);
  position: relative;
}
.classwork-feed-card:hover {
  border-color: var(--sapphire);
  box-shadow: 0 2px 8px rgba(37,99,235,.08);
}
.classwork-published-delete {
  position: absolute;
  top: 50%;
  right: 16px;
  transform: translateY(-50%);
  color: var(--text-secondary);
  opacity: 0;
  transition: opacity 0.2s;
}
.classwork-feed-card:hover .classwork-published-delete {
  opacity: 1;
}
.classwork-published-delete:hover {
  color: #DC2626;
}
.classwork-feed-header {
  display: flex;
  align-items: center;
  gap: var(--sp-md);
}
.classwork-feed-avatar {
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  background: var(--surface);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.25rem;
  color: var(--sapphire);
  flex-shrink: 0;
}
.classwork-feed-title {
  font-weight: 600;
  font-size: .9375rem;
  color: var(--text);
}
.classwork-feed-date {
  font-size: .8125rem;
  color: var(--text-secondary);
  margin-top: 1px;
}

/* Draft card */
.classwork-draft {
  border-left: 3px solid var(--warning);
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.classwork-draft .classwork-card-content {
  flex: 1;
}
.classwork-draft-actions {
  flex-shrink: 0;
}

/* Legacy classwork-card classes used by draft cards */
.classwork-card {
  cursor: pointer;
  border: 1px solid var(--border);
  transition: border-color var(--ease), box-shadow var(--ease);
}
.classwork-card-content {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-md);
}
.classwork-card-icon {
  width: 2.5rem;
  height: 2.5rem;
  border-radius: var(--radius);
  background: var(--surface);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.25rem;
  color: var(--sapphire);
  flex-shrink: 0;
}
.classwork-card-info {
  flex: 1;
  min-width: 0;
}
.classwork-card-title {
  font-weight: 600;
  font-size: .9375rem;
  color: var(--text);
  margin-bottom: 2px;
}
.classwork-card-meta {
  margin-top: var(--sp-xs);
  font-size: .8125rem;
  color: var(--text-secondary);
}

/* Classwork detail page */
.classwork-detail-meta {
  display: flex;
  gap: var(--sp-lg);
  flex-wrap: wrap;
}
.classwork-meta-item {
  display: flex;
  align-items: center;
  gap: var(--sp-xs);
  font-size: .875rem;
  color: var(--text-secondary);
}
.classwork-meta-item i {
  font-size: 1.125rem;
}
.classwork-description-text {
  font-family: inherit;
  font-size: .9375rem;
  line-height: 1.6;
  white-space: pre-wrap;
  word-break: break-word;
  margin: 0;
  border: none;
  background: none;
  padding: 0;
}
.classwork-files-grid {
  display: flex;
  flex-direction: column;
  gap: var(--sp-sm);
}
.classwork-file-item {
  display: flex;
  align-items: center;
  gap: var(--sp-md);
  text-decoration: none;
  color: var(--text);
  border: 1px solid var(--border);
  transition: border-color var(--ease);
}
.classwork-file-item:hover {
  border-color: var(--sapphire);
}
.classwork-file-icon {
  width: 2.5rem;
  height: 2.5rem;
  border-radius: var(--radius);
  background: var(--surface);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.25rem;
  color: var(--sapphire);
  flex-shrink: 0;
}
.classwork-file-info {
  flex: 1;
  min-width: 0;
}
.classwork-file-name {
  font-weight: 500;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.classwork-file-download {
  font-size: 1.25rem;
  color: var(--text-secondary);
  flex-shrink: 0;
}

/* Classwork detail comments */
.classwork-detail-comments {
  border-top: 1px solid var(--border);
  padding-top: var(--sp-lg);
}
.classwork-comments-heading {
  display: flex;
  align-items: center;
  gap: var(--sp-sm);
  font-size: 1rem;
  font-weight: 600;
  color: var(--text);
}
.classwork-comments-heading i {
  font-size: 1.25rem;
  color: var(--sapphire);
}

/* Loading / empty states for classwork tab */
#classwork-loading {
  display: none;
}
#classwork-loading.show {
  display: block;
}
#classwork-empty {
  display: none;
}
#classwork-empty.show {
  display: block;
}

/* ==========================================================================
   SUBMISSION SECTION
   ========================================================================== */

.submission-late-warning {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  background: #FEF3C7;
  color: #92400E;
  border-radius: 8px;
  font-size: 0.875rem;
  font-weight: 500;
}
.submission-late-warning i {
  font-size: 1.1rem;
}
.submission-section {
  border: 1px solid var(--border);
}
.submission-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
}
.submission-header h3 {
  margin: 0;
  font-size: 1rem;
  font-weight: 600;
}
.submission-status-badge {
  display: inline-flex;
  align-items: center;
  padding: 4px 12px;
  border-radius: 20px;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: capitalize;
}
.badge-pending {
  background: #F1F5F9;
  color: #64748B;
}
.badge-uploaded {
  background: #DBEAFE;
  color: #1D4ED8;
}
.badge-submitted {
  background: #D1FAE5;
  color: #065F46;
}
.badge-submitted_late {
  background: #FEF3C7;
  color: #92400E;
}
.badge-unsubmitted {
  background: #F1F5F9;
  color: #475569;
  border: 1px solid #E2E8F0;
}
.badge-resubmitted {
  background: #D1FAE5;
  color: #065F46;
}
.badge-missing {
  background: #FEE2E2;
  color: #991B1B;
}

/* --- Grade status badges --- */
.badge-not_graded {
  background: #F1F5F9;
  color: #64748B;
}
.badge-draft {
  background: #FEF3C7;
  color: #92400E;
}
.badge-graded {
  background: #D1FAE5;
  color: #065F46;
}
.badge-updated {
  background: #DBEAFE;
  color: #1D4ED8;
}

/* --- Teacher submissions table --- */
.submissions-table {
  width: 100%;
  border-collapse: collapse;
}
.submissions-table th {
  text-align: left;
  padding: .625rem .75rem;
  font-size: .75rem;
  font-weight: 600;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: .05em;
  border-bottom: 1px solid var(--border);
}
.submissions-table td {
  padding: .75rem;
  border-bottom: 1px solid var(--border);
  font-size: .875rem;
}
.submissions-table tr:hover {
  background: var(--bg-hover, #F8FAFC);
  cursor: pointer;
}
.submissions-table .grade-input {
  width: 4.5rem;
  padding: .25rem .5rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm, 4px);
  font-size: .875rem;
  text-align: center;
}
.submissions-table .grade-input:focus {
  outline: none;
  border-color: var(--sapphire);
}
.grade-actions-cell {
  white-space: nowrap;
}
.btn-xs {
  padding: .25rem .5rem;
  font-size: .75rem;
  line-height: 1.2;
}

/* --- Grade result card (student classwork detail) --- */
.grade-result-card {
  border-left: 4px solid var(--sapphire);
}
.grade-result-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.grade-result-marks {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--sapphire);
}

/* --- Classwork card status/grade (student classwork list) --- */
.classwork-card-status {
  font-size: .75rem;
  font-weight: 500;
  color: var(--text-secondary);
  text-transform: capitalize;
  margin-left: auto;
  white-space: nowrap;
}
.classwork-card-grade {
  font-size: .875rem;
  font-weight: 700;
  color: var(--sapphire);
  margin-left: auto;
  white-space: nowrap;
}
.classwork-feed-title-wrap {
  flex: 1;
  min-width: 0;
}

/* --- Submissions loading/empty/table states --- */
#submissions-loading,
#submissions-empty {
  display: none;
}
#submissions-loading.show,
#submissions-empty.show {
  display: block;
}
#submissions-table {
  display: none;
}
#submissions-table.show {
  display: table;
}

/* --- Grade form status info --- */
.grade-status-info {
  padding: .5rem .75rem;
  border-radius: var(--radius-sm, 4px);
  background: var(--bg-secondary, #F1F5F9);
  font-size: .8125rem;
  color: var(--text-secondary);
}

/* --- Submission detail layout --- */
.submission-detail-layout {
  max-width: 720px;
}

.submission-upload-area {
  margin-bottom: 16px;
}
.submission-dropzone {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 24px;
  border: 2px dashed #E2E8F0;
  border-radius: 8px;
  cursor: pointer;
  transition: border-color 0.2s;
  text-align: center;
}
.submission-dropzone:hover,
.submission-dropzone.dragover {
  border-color: #2563EB;
}
.submission-dropzone i {
  font-size: 2rem;
  color: #94A3B8;
}
.submission-dropzone p {
  margin: 0;
  font-size: 0.875rem;
  color: #64748B;
}
.submission-file-input {
  display: none;
}
.submission-file-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 16px;
}
.submission-file-chip {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  background: #F8FAFC;
  border: 1px solid #E2E8F0;
  border-radius: 6px;
  font-size: 0.875rem;
}
.submission-file-chip.uploading {
  opacity: 0.7;
}
.submission-file-chip.failed {
  border-color: #FCA5A5;
  background: #FEF2F2;
}
.submission-file-chip i:first-child {
  color: #64748B;
  font-size: 1.1rem;
  flex-shrink: 0;
}
.submission-file-chip-spinner {
  animation: spin 1s linear infinite;
}
@keyframes spin {
  to { transform: rotate(360deg); }
}
.submission-file-chip-name {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: #1E293B;
  text-decoration: none;
}
a.submission-file-chip-name:hover {
  color: #2563EB;
  text-decoration: underline;
}
.submission-file-chip-size {
  flex-shrink: 0;
}
.submission-file-chip-remove {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border: none;
  background: none;
  cursor: pointer;
  color: #94A3B8;
  border-radius: 4px;
  flex-shrink: 0;
}
.submission-file-chip-remove:hover {
  background: #FEE2E2;
  color: #DC2626;
}
.submission-actions {
  display: flex;
  gap: 12px;
}

/* Form check (checkbox label) */
.form-check {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.875rem;
  color: #1E293B;
  cursor: pointer;
}
.form-check input[type="checkbox"] {
  width: 16px;
  height: 16px;
  accent-color: #2563EB;
  cursor: pointer;
}

/* ==========================================================================
   REDUCED MOTION
   ========================================================================== */
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms !important;animation-delay:0ms !important;transition-duration:.01ms !important}
  html{scroll-behavior:auto}
  .scroll-reveal{opacity:1;transform:none}
}

/*Styling for the ai tutor chat box*/
.ai-tutor-input-container {
    position: fixed;
    bottom: 20px;

    /* Adjust this according to your sidebar width */
    left: 280px;
    right: 20px;

    /* Responsive width */
    width: auto;
    max-width: none;

    display: flex;
    align-items: center;
    gap: 12px;

    background: white;
    padding: 12px 16px;

    border: 1px solid #dce3ef;
    border-radius: 16px;

    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);

    box-sizing: border-box;
    z-index: 1000;
}

.ai-tutor-input-container input {
    flex: 1;
    min-width: 0;

    padding: 14px 18px;

    border: 1px solid #d1d5db;
    border-radius: 12px;

    font-size: 15px;
    outline: none;

    box-sizing: border-box;
}

.ai-tutor-input-container input:focus {
    border-color: #2563eb;
}

.ai-tutor-input-container button {
    flex-shrink: 0;

    padding: 14px 22px;

    background: #2563eb;
    color: white;

    border: none;
    border-radius: 12px;

    cursor: pointer;
    font-weight: 600;

    white-space: nowrap;
}

.ai-tutor-input-container button:hover {
    background: #1d4ed8;
} 

.ai-chat-messages {
    padding: 20px;
    padding-bottom: 100px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    max-height: calc(100vh - 220px);
    overflow-y: auto;
}

.message {
    display: flex;
    width: 100%;
}

.ai-message {
    justify-content: flex-start;
}

.user-message {
    justify-content: flex-end;
}

.message-bubble {
    max-width: 65%;
    padding: 12px 16px;
    border-radius: 18px;
    font-size: 14px;
    line-height: 1.5;
    word-wrap: break-word;
    box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}

.ai-message .message-bubble {
    background: #ffffff;
    color: #10264d;
    border: 1px solid #e5e7eb;
    border-bottom-left-radius: 4px;
}

/* System lines in the tutor transcript: the served AI disclosure, the
   session objective, citations, refusals and errors. Visually distinct
   from the tutor's own answers so a disclosure is never mistaken for
   something the model said — and deliberately NOT given a human name or
   avatar, per the presentation rules on the session handler. */
.message-bubble--notice {
    background: #f8fafc;
    color: #475569;
    border: 1px dashed #cbd5e1;
    box-shadow: none;
    font-size: 13px;
    max-width: 85%;
}

/* Chapter picker shown before a session exists — the tutor needs a
   chapter id and the browser cannot invent one. */
.ai-chapter-picker {
    display: flex;
    flex-direction: column;
    gap: .625rem;
    align-items: flex-start;
    padding: 16px;
    margin: 8px 0;
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 18px;
}

.ai-chapter-picker label {
    font-size: 14px;
    font-weight: 600;
    color: #10264d;
}

.ai-chapter-picker select {
    max-width: 100%;
}

.user-message .message-bubble {
    background: #f2f5f7;
    color: #10264d;
    border-bottom-right-radius: 4px;
}




/*Attendance table styling in the teacher section*/
/* Attendance Section */
.attendance-container {
    width: 100%;
    margin-top: 25px;
    padding: 20px;

    background-color: #ffffff;
    border: 1px solid #dce3ef;
    border-radius: 16px;

    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);

    box-sizing: border-box;
    overflow-x: auto;
}

/* Table */
.attendance-table {
    width: 100%;
    border-collapse: collapse;
}

/* Header */
.attendance-table th {
    background-color: #2559ca;
    color: white;

    padding: 16px 20px;
    text-align: left;

    font-size: 15px;
    font-weight: 600;

    border: 1px solid #d1d5db;
}

/* Table Cells */
.attendance-table td {
    padding: 16px 20px;
    border: 1px solid #d1d5db;

    color: #374151;
    font-size: 15px;
}

/* Alternate Row Color */
.attendance-table tr:nth-child(even) {
    background-color: #f8fafc;
}

/* Hover Effect */
.attendance-table tr:hover {
    background-color: #eff6ff;
}

/* Serial Number Column */
.attendance-table th:first-child,
.attendance-table td:first-child {
    width: 100px;
    text-align: center;
}

/* Attendance Column */
.attendance-table th:last-child,
.attendance-table td:last-child {
    width: 150px;
    text-align: center;
    font-weight: 600;
}
.users-search-container {
    margin-top: 20px;
    margin-bottom: 25px;
}

.users-search-container .users-search-wrap {
    display: flex;
    align-items: center;

    width: 350px;
    max-width: 100%;

    background: white;

    border: 1px solid #dce3ef;
    border-radius: 12px;

    padding: 12px 16px;

    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.users-search-container .users-search-icon {
    font-size: 18px;
    color: #6b7280;

    margin-right: 12px;
}

.users-search-container .users-search-input {
    flex: 1;

    border: none;
    outline: none;

    font-size: 14px;
    background: transparent;

    color: #10264d;
}

.users-search-container .users-search-input::placeholder {
    color: #9ca3af;
}



/*Student attendance styling(Donut chart showing attendance percentage.)*/
.attendance-summary-card {
    width: 100%;
    margin: 25px 0;
    padding: 24px;

    background: white;
    border: 1px solid #dce3ef;
    border-radius: 18px;

    display: flex;
    align-items: center;
    gap: 40px;

    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.06);
    box-sizing: border-box;
}

.attendance-chart {
    display: flex;
    align-items: center;
    justify-content: center;
}

.donut-chart {
    width: 190px;
    height: 190px;
    border-radius: 50%;

    /* Present vs absent, swept from --donut-pct (set inline from the
       student's measured rate). Was a hardcoded 90/10 split. */
    background: conic-gradient(
        #2563eb 0 calc(var(--donut-pct, 0) * 1%),
        #ef4444 0 100%
    );

    display: flex;
    align-items: center;
    justify-content: center;
}

.donut-center {
    width: 120px;
    height: 120px;

    background: white;
    border-radius: 50%;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.donut-center h2 {
    margin: 0;
    color: #10264d;
    font-size: 30px;
}

.donut-center p {
    margin: 4px 0 0;
    color: #6b7280;
    font-size: 14px;
}

.attendance-stats {
    flex: 1;
}

.attendance-stats h3 {
    margin: 0 0 18px;
    color: #10264d;
    font-size: 22px;
}

.stat-row {
    display: flex;
    align-items: center;
    gap: 12px;

    padding: 12px 0;
    border-bottom: 1px solid #e5e7eb;

    color: #374151;
    font-size: 16px;
}

.stat-row strong {
    margin-left: auto;
    color: #10264d;
}

.dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
}

.present-dot {
    background: #2563eb;
}

.absent-dot {
    background: #ef4444;
}

@media (max-width: 768px) {
    .attendance-summary-card {
        flex-direction: column;
        align-items: flex-start;
    }

    .attendance-chart {
        width: 100%;
    }
}

/*Student attendance table styling*/
.attendance-record-card {
    width: 100%;
    margin-top: 25px;
    padding: 18px;

    background: white;
    border: 1px solid #dce3ef;
    border-radius: 16px;

    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.06);
    box-sizing: border-box;
}

.attendance-legend {
    display: flex;
    gap: 15px;
    flex-wrap: wrap;

    margin-bottom: 18px;

    color: #374151;
    font-size: 15px;
}

.attendance-legend b {
    color: #10264d;
}

.attendance-table-wrapper {
    width: 100%;
    overflow-x: auto;
    overflow-y: auto;
    max-height: 520px;

    border: 1px solid #dce3ef;
    border-radius: 12px;
}

.monthly-attendance-table {
    border-collapse: collapse;

    min-width: 1400px;
    width: max-content;
}

.monthly-attendance-table th,
.monthly-attendance-table td {
    border: 1px solid #d1d5db;
    padding: 7px 11px;
    text-align: center;
}

.monthly-attendance-table th {
    position: sticky;
    top: 0;
    z-index: 1;
    background: #f1f5f9;
    color: #10264d;
    font-weight: 700;
}

.monthly-attendance-table td {
    color: #374151;
    font-weight: 600;
}

.monthly-attendance-table tr:hover {
    background: #f8fafc;
}

.monthly-attendance-table td:first-child {
    background: #f9fafb;
    color: #10264d;
    font-weight: 700;
}

.present {
    color: #16a34a !important;
}

.absent {
    color: #dc2626 !important;
}

.late {
    color: #d97706 !important;
}

.holiday {
    color: #2563eb !important;
}

/* A date that does not occur in that month (30 February). Distinct from
   an empty cell, which means "the register was not taken that day". */
.monthly-attendance-table td.nonday {
    background: #f8fafc;
}
.monthly-attendance-table th:first-child,
.monthly-attendance-table td:first-child {
    position: sticky;
    left: 0;

    background: white;
    z-index: 2;
}

.monthly-attendance-table th:first-child {
    background: #f1f5f9;
    z-index: 3;
}



/* Dropdown list for teachers to mark attendance */
.mark-attendance-card {
    width: 75%;                  /* Reduced from 100% */
    margin-top: 20px;
    padding: 18px;

    background: white;
    border: 1px solid #dce3ef;
    border-radius: 14px;

    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
    box-sizing: border-box;
}

.mark-attendance-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;

    margin-bottom: 15px;
}

.mark-attendance-header h3 {
    margin: 0;
    color: #10264d;
    font-size: 18px;           /* Reduced from 22px */
}

.class-select,
.attendance-select {
    padding: 8px 12px;         /* Reduced padding */

    border: 1px solid #d1d5db;
    border-radius: 8px;

    background: white;
    color: #10264d;

    font-size: 13px;           /* Reduced font size */
    outline: none;
}

.mark-attendance-table {
    width: 100%;
    border-collapse: collapse;
}

.mark-attendance-table th,
.mark-attendance-table td {
    border: 1px solid #d1d5db;

    padding: 10px 14px;        /* Reduced from 14px 18px */
    text-align: left;

    font-size: 14px;
}

.mark-attendance-table th {
    background: #f1f5f9;
    color: #050d1b;

    font-weight: 600;
}

.mark-attendance-table td:first-child,
.mark-attendance-table th:first-child {
    width: 70px;               /* Reduced */
    text-align: center;
}

.mark-attendance-table td:last-child,
.mark-attendance-table th:last-child {
    width: 140px;              /* Reduced */
    text-align: center;
}

.attendance-select {
    width: 100px;              /* Reduced from 140px */
    cursor: pointer;
}

.mark-attendance-actions {
    display: flex;
    justify-content: flex-end;

    margin-top: 15px;
}

.save-attendance-btn {
    padding: 10px 18px;        /* Reduced button size */

    background: #7f8693;
    color: white;

    border: none;
    border-radius: 8px;

    font-size: 13px;
    font-weight: 600;

    cursor: pointer;
}

.save-attendance-btn:hover {
    background: #121314;
}

/* Responsive Design */
@media (max-width: 768px) {

    .mark-attendance-card {
        width: 100%;
        padding: 15px;
    }

    .mark-attendance-header {
        flex-direction: column;
        align-items: flex-start;
    }

    .attendance-select,
    .class-select {
        width: 100%;
    }

    .save-attendance-btn {
        width: 100%;
    }
}


.class-select {
    padding-right: 7px;
}

.attendance-checkbox-label {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    user-select: none;
}

.attendance-checkbox-label input[type="checkbox"] {
    display: none;
}

.attendance-checkbox-custom {
    width: 22px;
    height: 22px;
    border-radius: 6px;
    border: 2px solid #22c55e;
    background-color: #22c55e;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.2s ease, border-color 0.2s ease;
}

.attendance-checkbox-custom::after {
    content: "";
    width: 6px;
    height: 11px;
    border: 2.5px solid white;
    border-top: none;
    border-left: none;
    transform: rotate(45deg) translateY(-1px);
    display: block;
    transition: opacity 0.15s ease;
}

.attendance-checkbox-label.absent .attendance-checkbox-custom {
    background-color: transparent;
    border-color: #ef4444;
}

.attendance-checkbox-label.absent .attendance-checkbox-custom::after {
    opacity: 0;
}

.att-history-layout {
    display: flex;
    gap: 1.5rem;
    align-items: flex-start;
    margin-top: 1.25rem;
    flex-wrap: wrap;
}

/* ── Calendar Card ── */
.att-calendar-card {
    flex-shrink: 0;
    width: 300px;
    background: white;
    border: 1px solid #dce3ef;
    border-radius: 14px;
    padding: 18px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.05);
}

.att-calendar-nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 14px;
}

.att-cal-month-label {
    font-weight: 700;
    font-size: 15px;
    color: #10264d;
}

.att-cal-nav-btn {
    background: none;
    border: 1px solid #dce3ef;
    border-radius: 8px;
    padding: 4px 8px;
    cursor: pointer;
    color: #10264d;
    font-size: 14px;
    line-height: 1;
    transition: background 0.15s;
}
.att-cal-nav-btn:hover { background: #f1f5f9; }

.att-cal-weekdays {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    text-align: center;
    font-size: 11px;
    font-weight: 600;
    color: #6b7280;
    margin-bottom: 6px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.att-cal-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 2px;
}

.att-cal-day {
    aspect-ratio: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    font-size: 13px;
    cursor: pointer;
    color: #374151;
    transition: background 0.15s, color 0.15s;
    border: none;
    background: none;
}
.att-cal-day:hover:not(.att-cal-day--empty):not(.att-cal-day--future) {
    background: #f1f5f9;
}
.att-cal-day--empty,
.att-cal-day--future {
    cursor: default;
    color: #d1d5db;
}
.att-cal-day--today {
    font-weight: 700;
    color: #2563eb;
}
.att-cal-day--selected {
    background: #2563eb !important;
    color: white !important;
    font-weight: 700;
}


/* ── Results Card ── */
.att-history-results {
    flex: 1;
    min-width: 280px;
    background: white;
    border: 1px solid #dce3ef;
    border-radius: 14px;
    padding: 20px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.05);
}

.att-history-placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 3rem 1rem;
    color: #9ca3af;
    text-align: center;
    gap: 0.75rem;
}
.att-placeholder-icon {
    font-size: 3rem;
    opacity: 0.4;
}

.att-history-results-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 1rem;
}

.att-history-results-header h3 {
    margin: 0;
    color: #10264d;
    font-size: 17px;
}

.att-history-stats {
    display: flex;
    gap: 0.75rem;
}

.att-stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0;
    border-radius: 0;
    min-width: 60px;
    background: transparent !important;
    border: none !important;
}
/*.att-stat--present { background: #f0fdf4; border: 1px solid #bbf7d0; }
.att-stat--absent  { background: #fff1f2; border: 1px solid #fecdd3; }
.att-stat--total   { background: #eff6ff; border: 1px solid #bfdbfe; }
*/
.att-stat-count {
    font-size: 20px;
    font-weight: 700;
    line-height: 1.2;
}
.att-stat--present .att-stat-count,
.att-stat--present .att-stat-label {
    color: #16a34a !important;
}

.att-stat--absent .att-stat-count,
.att-stat--absent .att-stat-label {
    color: #dc2626 !important;
}

.att-stat--total .att-stat-count,
.att-stat--total .att-stat-label {
    color: #2563eb !important;
}

/* 'late' is a first-class status in student_attendance (migration 075),
   so the history stats break it out rather than folding it into present. */
.att-stat--late .att-stat-count,
.att-stat--late .att-stat-label {
    color: #d97706 !important;
}

.att-stat-label {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #6b7280;
    margin-top: 2px;
}

.att-status-badge {
    display: inline-block;
    padding: 3px 12px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
}
.att-status-badge--present {
    background: #f0fdf4;
    color: #16a34a;
    border: 1px solid #bbf7d0;
}
.att-status-badge--absent {
    background: #fff1f2;
    color: #dc2626;
    border: 1px solid #fecdd3;
}
.att-status-badge--late {
    background: #fffbeb;
    color: #d97706;
    border: 1px solid #fde68a;
}

/* ── Editable attendance checkbox ── */
.att-toggle {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    cursor: pointer;
    user-select: none;
}
.att-toggle-input {
    width: 15px;
    height: 15px;
    accent-color: #16a34a;
    cursor: pointer;
    flex-shrink: 0;
}
.att-toggle-label {
    font-size: 12px;
    font-weight: 600;
    color: #dc2626;
    min-width: 48px;
}
.att-toggle-input:checked ~ .att-toggle-label {
    color: #16a34a;
}

@media (max-width: 700px) {
    .att-history-layout { flex-direction: column; }
    .att-calendar-card  { width: 100%; }
}



.att-history-search-box {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 320px;               /* Change this value as needed */
    background: #f8fafc;
    border: 1px solid #dce3ef;
    border-radius: 10px;
    padding: 10px 12px;
    box-sizing: border-box;
}

.att-history-search-box i {
    font-size: 18px;
    color: #64748b;
}

.att-history-search-box input {
    flex: 1;                    
    border: none;
    outline: none;
    background: transparent;
    font-size: 14px;
    color: #10264d;
    min-width: 0;
}

.att-history-search-box input::placeholder {
    color: #94a3b8;
}


/*Styling for displaying timetable in admin section*/
.timetable-class-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 1rem;
    margin-top: 1.5rem;
}

.timetable-class-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    text-decoration: none;
    background: white;
    border: 1px solid #dce3ef;
    border-radius: 16px;
    padding: 20px;
    box-shadow: 0 3px 12px rgba(0,0,0,0.05);
    transition: 0.2s ease;
}

.timetable-class-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 6px 18px rgba(0,0,0,0.08);
    border-color: #2563eb;
}

.timetable-class-card h3 {
    margin: 0;
    color: #10264d;
    font-size: 18px;
}

.timetable-class-card p {
    margin: 6px 0 0;
    color: #64748b;
    font-size: 14px;
}

.timetable-class-card i {
    font-size: 22px;
    color: #2563eb;
}

/*styling for displaying timetable details*/
/* ===== Timetable Details Page ===== */

.timetable-table-card {
    margin-top: 1.5rem;
    background: #ffffff;
    border: 1px solid #dce3ef;
    border-radius: 16px;
    padding: 24px;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.06);
    overflow-x: auto;
}

.timetable-table {
    width: 100%;
    border-collapse: collapse;
    min-width: 950px;
    overflow: hidden;
    border-radius: 12px;
}

/* Table Header */
.timetable-table thead th {
    background: #10264d;
    color: #ffffff;
    font-size: 14px;
    font-weight: 600;
    padding: 16px 12px;
    text-align: center;
    white-space: nowrap;
}

/* First Header Cell */
.timetable-table thead th:first-child {
    border-top-left-radius: 10px;
}

/* Last Header Cell */
.timetable-table thead th:last-child {
    border-top-right-radius: 10px;
}

/* Table Body */
.timetable-table tbody td {
    padding: 14px 12px;
    text-align: center;
    border: 1px solid #e5e7eb;
    font-size: 14px;
    color: #374151;
    transition: background 0.2s ease;
}

/* Weekday Column */
.timetable-table tbody td:first-child {
    font-weight: 600;
    color: #10264d;
    background: #f8fafc;
    white-space: nowrap;
}

/* Alternate Row Colors */
.timetable-table tbody tr:nth-child(even) {
    background: #fafbfc;
}

/* Row Hover Effect */
.timetable-table tbody tr:hover td {
    background: #eff6ff;
}

/* Break Period Styling — class-based; the old :contains()/:has-text()
   selectors are not valid CSS and never matched anything. */
.timetable-table td.tt-break {
    background: #fff7ed;
    color: #ea580c;
    font-weight: 600;
}

/* Empty / absent cells */
.timetable-table td.tt-cell-muted {
    color: #9ca3af;
}

/* Responsive Design */
@media (max-width: 768px) {
    .timetable-table-card {
        padding: 16px;
    }

    .timetable-table {
        min-width: 800px;
    }

    .timetable-table thead th,
    .timetable-table tbody td {
        padding: 12px 10px;
        font-size: 13px;
    }
}



/*styling for creategames page option in games in the teachers section*/

.create-games-page {
    min-height: calc(100vh - 40px);
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 32px;
    background: #ffffff;
    gap: 32px;
    transition: all 0.3s ease;
}

.create-games-box {
    width: 100%;
    max-width: 760px;
    transition: all 0.3s ease;
}

.create-games-box h1 {
    text-align: center;
    font-size: 32px;
    font-weight: 600;
    color: #2d333a;
    margin-bottom: 28px;
}

.game-search-form {
    position: relative;
    width: 100%;
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 28px;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.06);
}

.game-search-form textarea {
    width: 100%;
    border: none;
    outline: none;
    resize: none;
    background: transparent;
    padding: 18px 190px 18px 70px;
    font-size: 16px;
    line-height: 1.5;
    font-family: inherit;
    color: #2d333a;
    min-height: 58px;
    max-height: 200px;
    overflow-y: auto;
    box-sizing: border-box;
}

.game-add-btn,
.game-send-btn {
    position: absolute;
    bottom: 12px;
    width: 40px;
    height: 40px;
    border: none;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.game-add-btn {
    left: 12px;
    background: #f3f4f6;
    color: #2d333a;
}

.game-send-btn {
    right: 12px;
    background: #2d333a;
    color: #ffffff;
}

.game-add-btn:hover {
    background: #e5e7eb;
}

.game-send-btn:hover {
    background: #1f2329;
}

.game-add-btn i,
.game-send-btn i {
    font-size: 18px;
}

.game-send-btn.hide {
    display: none;
}

.auto-generate-btn {
    display: none;
    position: absolute;
    right: 62px;
    bottom: 12px;
    height: 40px;
    padding: 0 14px;
    border: none;
    border-radius: 999px;
    background: #f3f4f6;
    color: #2d333a;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
}

.auto-generate-btn.show {
    display: block;
}

.game-dropdowns {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 14px;
    margin-top: 18px;
}

.game-select {
    width: 100%;
    padding: 13px 14px;
    border: 1px solid #e5e7eb;
    border-radius: 14px;
    background: #ffffff;
    color: #2d333a;
    font-size: 14px;
    font-family: inherit;
    outline: none;
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

.game-select:focus {
    border-color: #cfd6df;
}

/* Split View */

.game-loading-panel {
    display: none;
    position: relative;
}

.create-games-page.split-view {
    justify-content: space-between;
    align-items: stretch;
    gap: 24px;
}

.create-games-page.split-view .create-games-box {
    width: 50%;
    max-width: none;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.create-games-page.split-view .game-loading-panel {
    width: 50%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    border-left: 1px solid #e5e7eb;
    background: #fafafa;
    border-radius: 24px;
}

.loader {
    width: 42px;
    height: 42px;
    border: 4px solid #e5e7eb;
    border-top: 4px solid #2d333a;
    border-radius: 50%;
    animation: spin 0.9s linear infinite;
}

.game-loading-panel p {
    margin-top: 16px;
    font-size: 15px;
    color: #6b7280;
}

.game-play-btn {
    display: none;
    position: absolute;
    right: 24px;
    top: 24px;
    width: 70px;
    height: 70px;
    border: none;
    border-radius: 50%;
    background: #2d333a;
    color: #ffffff;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    text-decoration: none;
    align-items: center;
    justify-content: center;
    gap: 6px;
}

.game-play-btn.show {
    display: flex;
}

.game-play-btn:hover {
    background: #1f2329;
}

.game-play-btn i {
    font-size: 24px;
}

@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}

@media (max-width: 900px) {
    .game-dropdowns {
        grid-template-columns: repeat(2, 1fr);
    }

    .create-games-page.split-view {
        flex-direction: column;
    }

    .create-games-page.split-view .create-games-box,
    .create-games-page.split-view .game-loading-panel {
        width: 100%;
    }
}

@media (max-width: 600px) {
    .game-dropdowns {
        grid-template-columns: 1fr;
    }
}


/* Styling for games page */

.games-grid {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 22px;
    margin-top: 28px;
    padding-bottom: 30px;
    box-sizing: border-box;
}

.game-card {
    width: 100%;
    min-height: 360px;
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 22px;
    padding: 18px;
    box-shadow: 0 4px 14px rgba(0,0,0,0.06);
    transition: all 0.2s ease;
    box-sizing: border-box;

    display: flex;
    flex-direction: column;
}

.game-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 24px rgba(0,0,0,0.09);
}

.game-card-image {
    width: 100%;
    height: 150px;
    border-radius: 18px;
    background: #f3f4f6;
    border: 1px dashed #cfd6df;

    display: flex;
    align-items: center;
    justify-content: center;

    color: #9ca3af;
    font-size: 14px;
    font-weight: 600;

    margin-bottom: 18px;
    overflow: hidden;
}

.game-card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.game-card h3 {
    margin: 0 0 8px;
    font-size: 21px;
    color: #142f5e;
}

.game-card p {
    margin: 0 0 16px;
    font-size: 14px;
    color: #6b7280;
    line-height: 1.5;
}

.game-card-meta {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 18px;
}

.game-card-meta span {
    background: #f3f4f6;
    color: #374151;
    font-size: 12px;
    padding: 6px 10px;
    border-radius: 999px;
}

/* generated_games.status, rendered as a badge. The lifecycle is
   generated -> submitted_for_review -> approved -> published, with
   rejected / unpublished / taken_down as the off-ramps; unknown values
   fall back to the neutral .game-card-meta span styling above. */
.game-status {
    text-transform: capitalize;
}

.game-status--published,
.game-status--approved {
    background: #f0fdf4 !important;
    color: #16a34a !important;
}

.game-status--generated,
.game-status--submitted_for_review {
    background: #fffbeb !important;
    color: #d97706 !important;
}

.game-status--rejected,
.game-status--taken_down,
.game-status--unpublished {
    background: #fff1f2 !important;
    color: #dc2626 !important;
}

.game-card-play-btn {
    width: 100%;
    margin-top: auto;
    padding: 13px 16px;

    border: none;
    border-radius: 14px;

    background: #193c77;
    color: white;

    font-size: 15px;
    font-weight: 600;

    cursor: pointer;

    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;

    box-sizing: border-box;
}

.game-card-play-btn:hover {
    background: #0f2d7f;
}

@media (max-width: 1100px) {
    .games-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 700px) {
    .games-grid {
        grid-template-columns: 1fr;
    }
}


/*Styling for profile page in students section*/
.student-profile-card {
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 18px;
    padding: 24px;
    margin-top: 24px;

    box-shadow: 0 4px 14px rgba(0,0,0,0.05);
}

.student-profile-card h2 {
    margin: 0 0 18px;
    color: #10264d;
    font-size: 22px;
}

.student-profile-table {
    width: 100%;
    border-collapse: collapse;
}

.student-profile-table tr {
    border-bottom: 1px solid #eef2f7;
}

.student-profile-table tr:last-child {
    border-bottom: none;
}

.student-profile-table td {
    padding: 14px 10px;
    font-size: 15px;
    color: #374151;
}

.student-profile-table td:first-child {
    width: 220px;
    color: #10264d;
    font-weight: 600;
}

.student-profile-header {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding-left: 10px;
    margin-bottom: 24px;
}

.profile-photo {
    width: 140px;
    height: 140px;

    border-radius: 50%;
    overflow: hidden;

    border: 1px solid #e5e7eb;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.08);

    margin-bottom: 12px;

    flex-shrink: 0;
}

.profile-photo img {
    width: 100%;
    height: 100%;

    object-fit: cover;
    object-position: center;

    display: block;
}

/* Initials stand-in. The profile pages used to embed one base64 stock
   portrait for every user; there is no per-user photo in the schema, so
   they now show the same initials avatar the sidebar does. */
.profile-photo-initials {
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(37, 99, 235, .12);
    color: #2563eb;
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 2.5rem;
    letter-spacing: .02em;
}

.student-name {
    margin: 0;
    margin-left: 15px; /* Adjust value as needed */
    color: #10264d;
    font-size: 28px;
    font-weight: 700;
}

.student-subtitle {
    margin-top: 6px;
    color: #6b7280;
    font-size: 14px;
}

/*Styling for profile page in teachers section*/

.teacher-profile-card {
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 18px;
    padding: 24px;
    margin-top: 24px;

    box-shadow: 0 4px 14px rgba(0,0,0,0.05);
}

.teacher-profile-card h2 {
    margin: 0 0 18px;
    color: #10264d;
    font-size: 22px;
}

.teacher-profile-table {
    width: 100%;
    border-collapse: collapse;
}

.teacher-profile-table tr {
    border-bottom: 1px solid #eef2f7;
}

.teacher-profile-table tr:last-child {
    border-bottom: none;
}

.teacher-profile-table td {
    padding: 14px 10px;
    font-size: 15px;
    color: #374151;
}

.teacher-profile-table td:first-child {
    width: 220px;
    color: #10264d;
    font-weight: 600;
}

.teacher-profile-header {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding-left: 10px;
    margin-bottom: 24px;
}

.teacher-profile-photo {
    width: 140px;
    height: 140px;

    border-radius: 50%;
    overflow: hidden;

    border: 1px solid #e5e7eb;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.08);

    margin-bottom: 12px;

    flex-shrink: 0;
}

.teacher-profile-photo img {
    width: 100%;
    height: 100%;

    object-fit: cover;
    object-position: center;

    display: block;
}

.teacher-name {
    margin: 0;
    margin-left: 15px;
    color: #10264d;
    font-size: 28px;
    font-weight: 700;
}

.teacher-subtitle {
    margin-top: 6px;
    color: #6b7280;
    font-size: 14px;
}

.teacher-name-row {
    display: flex;
    align-items: center;
    gap: 10px;

    margin-left: 15px;
}

.teacher-edit-btn {
    border: none;
    background: transparent;

    color: #6b7280;
    cursor: pointer;

    display: flex;
    align-items: center;
    justify-content: center;

    padding: 4px;
    border-radius: 6px;

    transition: all 0.2s ease;
}

.teacher-edit-btn:hover {
    background: #f3f4f6;
    color: #10264d;
}

.teacher-edit-btn i {
    font-size: 18px;
}









.teacher-name-row {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}




.teacher-name-row.editing .teacher-inline-edit-form {
    display: flex;
}





.teacher-save-inline-btn {
    border: none;
    border-radius: 10px;
    background: #10264d;
    color: white;
    padding: 9px 14px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
}

.teacher-save-inline-btn:hover {
    background: #1d4ed8;
}
.teacher-name[contenteditable="true"] {
    border: 1px solid #d1d5db;
    border-radius: 10px;
    padding: 6px 10px;
    outline: none;
    background: #ffffff;
}

.teacher-save-inline-btn,
.teacher-cancel-btn {
    display: none;
}

.teacher-name-row.editing .teacher-save-inline-btn,
.teacher-name-row.editing .teacher-cancel-btn {
    display: inline-flex;
}




/*Styling for the export attendance link in the admin section*/

.export-att-link {
    color: #2563eb;
    text-decoration: underline;
    font-size: 15px;
    font-weight: 500;
    cursor: pointer;
}

.export-att-link:hover {
    color: #1d4ed8;
}

/* .export-att-link {
    color: #10264d;
    font-weight: 600;
    text-decoration: none;
    background: #eef4ff;
    padding: 10px 16px;
    border-radius: 10px;
    border: 1px solid #d5e3ff;
}

.export-att-link:hover {
    background: #dce9ff;
} */

.export-popup-overlay {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.45);
    backdrop-filter: blur(2px);
    display: none;   /* important */
    align-items: center;
    justify-content: center;
    z-index: 9999;
}

.export-popup-overlay.active {
    display: flex;
}

.export-popup {
    background: white;
    width: 360px;
    max-width: 90%;
    padding: 24px;
    border-radius: 16px;
    box-shadow: 0 10px 35px rgba(0,0,0,0.18);
    position: relative;
}

.export-popup h3 {
    margin: 0 0 8px;
    color: #10264d;
}

.export-popup p {
    margin: 0 0 18px;
    color: #6b7280;
    font-size: 14px;
}

.export-popup-close {
    position: absolute;
    top: 12px;
    right: 14px;
    border: none;
    background: transparent;
    font-size: 26px;
    cursor: pointer;
    color: #6b7280;
}

.export-date-fields {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.export-date-fields label {
    display: block;
    font-size: 14px;
    font-weight: 600;
    color: #10264d;
    margin-bottom: 6px;
}

.export-date-fields input {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid #d1d5db;
    border-radius: 10px;
    box-sizing: border-box;
}

.export-btn {
    width: 100%;
    margin-top: 18px;
    padding: 11px;
    background: #10264d;
    color: white;
    border: none;
    border-radius: 10px;
    font-weight: 600;
    cursor: pointer;
}

.export-btn:hover {
    background: #1d3f78;
}


/* ==========================================================================
   NOTIFICATION CENTRE — bell, panel, page
   ==========================================================================
   Rewritten with migration 072. The previous block hardcoded its palette
   (#10264d, #ef4444, #6b7280, #e5e7eb...) instead of using this file's own
   custom properties, and — most visibly — declared no .unread rule at all
   even though every template applied the class, so read and unread items
   rendered identically.

   NOTE this is a deliberate visual change, not a no-op refactor: the
   tokens are NOT equal to the old literals (--navy #1B2A4A vs #10264d,
   --error #DC2626 vs #ef4444, --text-secondary #64748B vs #6b7280,
   --border #E2E8F0 vs #e5e7eb). Only --sapphire and --bg matched exactly.

   Class names are unchanged on purpose: the print rules further down this
   file key off .notification-wrapper / .notification-overlay.
   ========================================================================== */

/* --- Bell ---------------------------------------------------------------- */

.notification-wrapper {
    position: fixed;
    top: 39px;
    right: 28px;
    z-index: 1000;
    display: flex;
    align-items: center;
    gap: .75rem;
}

.notification-btn {
    position: relative;
    border: none;
    background: transparent;
    color: var(--navy);
    font-size: 24px;
    line-height: 1;
    cursor: pointer;
    padding: 0;
    box-shadow: none;
    border-radius: var(--radius-full);
    transition: color var(--ease);
}

.notification-btn:hover { color: var(--sapphire); }

.notification-btn:focus-visible,
.notification-close:focus-visible,
.notification-card:focus-visible,
.notification-item:focus-visible,
.notification-link-btn:focus-visible,
.notification-filter:focus-visible {
    outline: 2px solid var(--sapphire);
    outline-offset: 2px;
}

/* Was a fixed 18px circle, which clipped "12" and could not render "99+"
   at all. min-width + horizontal padding lets it grow into a pill. */
.notification-badge {
    position: absolute;
    top: -4px;
    right: -6px;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    background: var(--error);
    color: var(--white);
    font-size: 11px;
    font-weight: 700;
    line-height: 18px;
    text-align: center;
    border-radius: var(--radius-full);
    display: flex;
    align-items: center;
    justify-content: center;
}

/* LOAD-BEARING. The rule above sets an explicit `display`, which beats
   the UA stylesheet's [hidden] { display: none } — without this the zero
   state renders an empty red pill on every page of all three portals. */
.notification-badge[hidden] { display: none; }

/* --- Panel --------------------------------------------------------------- */

.notification-overlay {
    position: fixed;
    inset: 0;
    background: rgba(27, 42, 74, .45);
    backdrop-filter: blur(2px);
    display: none;
    justify-content: flex-end;
    align-items: flex-start;
    padding: 75px 28px 0 0;
    z-index: 9999;
}

.notification-overlay.active { display: flex; }
.notification-overlay[hidden] { display: none; }

.notification-popup {
    width: 360px;
    max-width: calc(100vw - 32px);   /* the old hard 340px overflowed phones */
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: var(--radius-xl);
    padding: var(--sp-md);
    box-shadow: var(--shadow-lg);
    position: relative;
}

.notification-popup-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--sp-md);
}

.notification-popup-head h3 {
    margin: 0;
    color: var(--navy);
    font-family: var(--font-display);
    font-size: 1rem;
}

.notification-close {
    border: none;
    background: transparent;
    font-size: 24px;
    line-height: 1;
    cursor: pointer;
    color: var(--text-secondary);
    padding: 0 4px;
    border-radius: var(--radius-sm);
}

.notification-close:hover { color: var(--navy); }

.notification-list {
    display: flex;
    flex-direction: column;
    gap: var(--sp-sm);
    max-height: min(60vh, 420px);    /* was a hard 300px */
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

.notification-popup-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-sm);
    margin-top: var(--sp-md);
    padding-top: var(--sp-sm);
    border-top: 1px solid var(--border);
}

.notification-link-btn {
    border: none;
    background: transparent;
    color: var(--sapphire);
    font-size: .8125rem;
    font-weight: 600;
    cursor: pointer;
    padding: 4px 6px;
    border-radius: var(--radius-sm);
    text-decoration: none;
}

.notification-link-btn:hover { background: var(--sapphire-light); }

/* --- Items (panel) ------------------------------------------------------- */

.notification-item {
    display: block;
    padding: 10px 12px;
    background: var(--bg);
    border: 1px solid var(--border);
    border-left: 3px solid transparent;
    border-radius: var(--radius-lg);
    text-decoration: none;
    color: inherit;
    transition: background var(--ease), border-color var(--ease);
}

.notification-item:hover { background: var(--surface); }

.notification-item strong {
    display: block;
    color: var(--navy);
    font-size: .875rem;
    margin-bottom: 2px;
}

.notification-item p {
    margin: 0;
    color: var(--text-secondary);
    font-size: .8125rem;
    line-height: 1.45;
}

/* --- Cards (page) -------------------------------------------------------- */

.notifications-container {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: var(--sp-lg);
}

.notification-card {
    display: flex;
    gap: var(--sp-md);
    padding: 16px 18px;
    background: var(--white);
    border: 1px solid var(--border);
    border-left: 3px solid transparent;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-xs);
    text-decoration: none;
    color: inherit;
    transition: transform var(--ease), box-shadow var(--ease);
}

.notification-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}

/* THE RULE THAT WAS MISSING. Templates have applied .unread since day
   one with nothing behind it, so read and unread looked identical. */
.notification-card.unread,
.notification-item.unread {
    border-left-color: var(--sapphire);
    background: var(--white);
}

.notification-card.unread .notification-content h4,
.notification-item.unread strong {
    font-weight: 700;
}

.notification-icon {
    font-size: 20px;
    color: var(--sapphire);
    display: flex;
    align-items: flex-start;
    flex-shrink: 0;
    width: 24px;
}

/* Colour by domain so the feed reads as a system rather than a wall of
   identical blue bells. */
.notification-icon[data-kind^="grade."],
.notification-icon[data-kind^="reportcard."]     { color: var(--success); }
.notification-icon[data-kind^="exam."]           { color: var(--gold); }
.notification-icon[data-kind^="substitution."],
.notification-icon[data-kind^="calendar."]       { color: var(--warning); }
.notification-icon[data-kind^="account."],
.notification-icon[data-kind^="user."]           { color: var(--navy); }

.notification-content { flex: 1; min-width: 0; }

.notification-content h4 {
    margin: 0 0 4px;
    color: var(--navy);
    font-family: var(--font-display);
    font-size: .9375rem;
    font-weight: 600;
}

.notification-content p {
    margin: 0;
    color: var(--text-secondary);
    font-size: .875rem;
    line-height: 1.5;
    overflow-wrap: anywhere;
}

.notification-time {
    display: block;
    margin-top: 6px;
    font-size: .75rem;
    color: var(--text-secondary);
    opacity: .8;
}

/* --- Filters / load more ------------------------------------------------- */

.notification-filters {
    display: flex;
    gap: var(--sp-xs);
    margin-top: var(--sp-md);
}

.notification-filter {
    border: 1px solid var(--border);
    background: var(--white);
    color: var(--text-secondary);
    font-size: .8125rem;
    font-weight: 600;
    padding: 6px 14px;
    border-radius: var(--radius-full);
    cursor: pointer;
    transition: all var(--ease);
}

.notification-filter:hover { border-color: var(--sapphire); color: var(--sapphire); }

.notification-filter.is-active {
    background: var(--navy);
    border-color: var(--navy);
    color: var(--white);
}

.notifications-more {
    display: flex;
    justify-content: center;
    margin: var(--sp-lg) 0;
}

/* --- States -------------------------------------------------------------- */

.notification-empty {
    text-align: center;
    padding: var(--sp-2xl) var(--sp-md);
    color: var(--text-secondary);
}

.notification-empty i { font-size: 32px; opacity: .5; }
.notification-empty p { margin: var(--sp-sm) 0 0; font-size: .875rem; }

.notification-error {
    text-align: center;
    padding: var(--sp-lg) var(--sp-md);
    color: var(--text-secondary);
    font-size: .875rem;
}

.notification-error p { margin: 0 0 var(--sp-sm); }

/* A shimmer rather than a spinner: it occupies the shape the content
   will take, so the panel does not jump when the fetch resolves. */
.notification-skeleton {
    height: 58px;
    border-radius: var(--radius-lg);
    background: linear-gradient(90deg, var(--surface) 25%, var(--bg) 50%, var(--surface) 75%);
    background-size: 200% 100%;
    animation: notification-shimmer 1.4s ease-in-out infinite;
}

@keyframes notification-shimmer {
    from { background-position: 200% 0; }
    to   { background-position: -200% 0; }
}

@media (prefers-reduced-motion: reduce) {
    .notification-card:hover { transform: none; }
    .notification-skeleton { animation: none; }
}

.header-actions {
    display: flex;
    align-items: center;
    gap: 16px;
}


/*Styling for the academic calendar*/

.academic-calendar-card {
    background: #ffffff !important;
    border: 1px solid #dce3ef !important;
    border-radius: 16px !important;
    padding: 18px !important;
    margin-top: 24px !important;
    box-shadow: 0 4px 14px rgba(0,0,0,0.06) !important;
}

.academic-calendar-header {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    margin-bottom: 14px !important;
}

#monthSelector {
    padding: 8px 12px !important;
    border: 1px solid #cbd5e1 !important;
    border-radius: 8px !important;
    background: white !important;
}

.calendar-grid {
    display: grid !important;
    grid-template-columns: repeat(7, 1fr) !important;
    gap: 4px !important;
}

.calendar-day-name {
    background: #10264d !important;
    color: white !important;
    padding: 6px !important;
    border-radius: 8px !important;
    text-align: center !important;
    font-weight: 600 !important;
}

.calendar-date {
    min-height: 65px !important;
    padding: 6px !important;
    border-radius: 8px !important;
    background: #f8fafc !important;
    border: 1px solid #e5e7eb !important;
    box-sizing: border-box !important;
}

.calendar-date.empty {
    background: transparent !important;
    border: none !important;
}

.calendar-date.today {
    background: #dbeafe !important;
    border: 2px solid #2563eb !important;
    color: #1e3a8a !important;
}

.calendar-date.holiday {
    position: relative !important;
    background: #f8fafc !important;   /* Same as normal dates */
    border: 1px solid #e5e7eb !important;
    border-left: 5px solid #ef4444 !important; /* Red line */
}

.holiday-name {
    display: block !important;
    margin-top: 4px !important;
    font-size: 11px !important;
    color: #ef4444 !important;
    font-weight: 600 !important;
} 

.month-navigation {
    display: flex;
    align-items: center;
    gap: 18px;
}

.month-btn {
    width: 36px;
    height: 36px;
    border: none;
    background: #f3f4f6;
    border-radius: 50%;
    cursor: pointer;
    color: #10264d;
    font-size: 15px;
    transition: 0.2s;
}

.month-btn:hover {
    background: #10264d;
    color: white;
}

#currentMonthYear {
    font-size: 18px;
    font-weight: 600;
    color: #10264d;
    min-width: 100px;
    text-align: center;
}


/*Scroll bar for sidebar in admin section*/

.atlas-nav {
    flex: 1;
    overflow-y: auto;

    /* Hide scrollbar for Firefox */
    scrollbar-width: none;

    /* Hide scrollbar for IE and Edge */
    -ms-overflow-style: none;
}

/* Hide scrollbar for Chrome, Safari, Opera */
.atlas-nav::-webkit-scrollbar {
    display: none;
}



/*Styling for the donut and line charts in the class_dashboard in admin section*/
.class-analytics-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 18px;
    margin: 24px 0;
}

.analytics-card {
    background: #ffffff;
    border: 1px solid #dce3ef;
    border-radius: 16px;
    padding: 20px;
    box-shadow: 0 4px 14px rgba(0,0,0,0.06);
}

.analytics-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 18px;
}

.analytics-card-header h3 {
    margin: 0;
    font-size: 16px;
    color: #10264d;
}

.analytics-card-header span {
    font-size: 12px;
    color: #64748b;
    background: #f1f5f9;
    padding: 5px 9px;
    border-radius: 999px;
}

.donut-chart {
    width: 150px;
    height: 150px;
    border-radius: 50%;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* The sweep is driven by --donut-pct, set inline by the template from
   the value the server measured. It was a literal 82% / 64% here until
   the dashboards started reading the database; keep the fallback at 0 so
   a widget with no data draws an empty ring rather than inheriting the
   last hardcoded number. */
.attendance-donut {
    background: conic-gradient(#22c55e 0 calc(var(--donut-pct, 0) * 1%), #e5e7eb 0 100%);
}

.games-donut {
    background: conic-gradient(#f59e0b 0 calc(var(--donut-pct, 0) * 1%), #e5e7eb 0 100%);
}

.donut-center {
    width: 95px;
    height: 95px;
    background: white;
    border-radius: 50%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.donut-center strong {
    font-size: 26px;
    color: #10264d;
}

.donut-center small {
    font-size: 12px;
    color: #64748b;
}

.analytics-desc {
    text-align: center;
    margin-top: 14px;
    font-size: 13px;
    color: #64748b;
}

/**/
.progress-card {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.marks-score {
    text-align: center;
    margin: 15px 0 25px;
}

.marks-score h1 {
    margin: 0;
    font-size: 48px;
    color: #10264d;
}

.marks-score p {
    margin-top: 6px;
    color: #64748b;
    font-size: 14px;
}

.marks-bar-container {
    position: relative;
    width: 100%;
    height: 16px;
    background: #e2e8f0;
    border-radius: 999px;
    overflow: hidden;
}

.marks-bar-fill {
    width: calc(var(--donut-pct, 0) * 1%);
    height: 100%;
    background: linear-gradient(90deg, #3b82f6, #2563eb);
    border-radius: 999px;
}

.marks-bar-value {
    position: absolute;
    right: -40px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 15px;
    font-weight: 600;
    color: #10264d;
}

.marks-scale {
    display: flex;
    justify-content: space-between;
    margin-top: 12px;
    color: #64748b;
    font-size: 13px;
}

.analytics-desc {
    margin-top: 25px;
    text-align: center;
    color: #64748b;
    font-size: 13px;
}

/*Styling for assignments page in teachers section*/
/* ── Student To Do List (/student/todo) ── */
.todo-card {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    background: #ffffff;
    border: 1px solid #dce3ef;
    border-left: 4px solid #2563eb;
    border-radius: 14px;
    padding: 16px;
    margin-bottom: 14px;
    color: inherit;
    text-decoration: none;
    transition: border-color .15s ease, box-shadow .15s ease;
}

.todo-card:hover {
    box-shadow: 0 4px 14px rgba(0, 0, 0, .06);
}

/* The left rule is the at-a-glance state: overdue red, done green. */
.todo-card--missing { border-left-color: #dc2626; }
.todo-card--done    { border-left-color: #16a34a; }

.todo-card h4 { margin: 0 0 4px; }

.todo-card p {
    margin: 0;
    font-size: 13px;
    color: #64748b;
}

.todo-card-meta {
    display: flex;
    align-items: center;
    gap: .5rem;
    flex-wrap: wrap;
}

.todo-due {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    font-size: 13px;
    color: #475569;
    white-space: nowrap;
}

.todo-due--overdue { color: #dc2626; font-weight: 600; }

.todo-chip {
    background: #f3f4f6;
    color: #374151;
    font-size: 12px;
    padding: 5px 10px;
    border-radius: 999px;
    white-space: nowrap;
}

.todo-chip--ok   { background: #f0fdf4; color: #16a34a; }
.todo-chip--warn { background: #fffbeb; color: #d97706; }

/* Now an <a> to the classwork detail page — the cards used to be inert
   because there was no real assignment behind them. */
.assignment-card {
    display: block;
    background: #ffffff;
    border: 1px solid #dce3ef;
    border-radius: 14px;
    padding: 16px;
    margin-bottom: 14px;
    color: inherit;
    text-decoration: none;
    transition: border-color .15s ease, box-shadow .15s ease;
}

.assignment-card:hover {
    border-color: #2563eb;
    box-shadow: 0 4px 14px rgba(0, 0, 0, .06);
}

.assignment-card h4 {
    margin: 0 0 4px;
}

.assignment-card p {
    margin: 0;
    font-size: 13px;
    color: #64748b;
}

/*Styling for the generate with AI page in assignments page*/
.ai-generate-page {
    min-height: calc(100vh - 180px);
    display: flex;
    flex-direction: column;
    justify-content: center;
    position: relative;
}

.ai-empty-state {
    text-align: center;
    margin-bottom: 120px;
}

.ai-empty-state i {
    font-size: 48px;
    color: #2563eb;
}

.ai-empty-state h2 {
    margin-top: 16px;
    color: #10264d;
    font-size: 28px;
}

.ai-empty-state p {
    margin-top: 8px;
    color: #64748b;
}

.ai-generate-search-form {
    position: fixed;
    left: 280px;
    right: 32px;
    bottom: 28px;

    display: flex;
    align-items: center;
    gap: 12px;

    background: #ffffff;
    border: 1px solid #dce3ef;
    border-radius: 18px;
    padding: 12px 14px;

    box-shadow: 0 8px 28px rgba(15, 23, 42, 0.12);
    z-index: 100;
}

.ai-generate-search-form textarea {
    flex: 1;
    resize: none;
    border: none;
    outline: none;
    font-size: 15px;
    min-height: 38px;
    max-height: 120px;
    padding: 10px 4px;
    color: #10264d;
}

.ai-add-btn,
.ai-send-btn {
    width: 42px;
    height: 42px;
    border: none;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.ai-add-btn {
    background: #f1f5f9;
    color: #10264d;
}

.ai-send-btn {
    background: #10264d;
    color: #ffffff;
}

/* Right generated panel */
.generated-panel-overlay {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.18);
    opacity: 0;
    visibility: hidden;
    z-index: 200;
    transition: 0.25s ease;
}

.generated-panel-overlay.show {
    opacity: 1;
    visibility: visible;
}

.generated-panel {
    position: fixed;
    top: 0;
    right: -50%;
    width: 50%;
    height: 100vh;
    background: #ffffff;
    z-index: 201;
    box-shadow: -8px 0 30px rgba(15, 23, 42, 0.18);
    transition: right 0.3s ease;

    display: flex;
    flex-direction: column;
}

.generated-panel.show {
    right: 0;
}

.generated-panel-header {
    padding: 24px;
    border-bottom: 1px solid #e5e7eb;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
}

.generated-panel-header h3 {
    margin: 0;
    color: #10264d;
    font-size: 22px;
}

.generated-panel-header p {
    margin-top: 4px;
    color: #64748b;
    font-size: 14px;
}

.generated-panel-close {
    border: none;
    background: #f1f5f9;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    cursor: pointer;
    color: #10264d;
}

.generated-panel-body {
    flex: 1;
    padding: 24px;
    overflow-y: auto;
}

.generated-card {
    border: 1px solid #dce3ef;
    border-radius: 16px;
    padding: 20px;
    background: #f8fafc;
}

.generated-card h4 {
    margin: 0;
    color: #10264d;
    font-size: 18px;
}

.generated-meta {
    margin: 6px 0 18px;
    color: #64748b;
    font-size: 13px;
}

.generated-card li {
    margin-bottom: 10px;
    color: #334155;
}

.generated-panel-footer {
    padding: 18px 24px;
    border-top: 1px solid #e5e7eb;
    display: flex;
    justify-content: flex-end;
    gap: 12px;
}

/*Styling for meet in course details*/
.meet-section {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.meet-dropdown {
    background: #ffffff;
    border: 1px solid #dce3ef;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 4px 14px rgba(0,0,0,0.04);
}

.meet-dropdown summary {
    list-style: none;
    cursor: pointer;
    padding: 16px 18px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: #10264d;
    font-weight: 600;
}

.meet-dropdown summary::-webkit-details-marker {
    display: none;
}

.meet-dropdown summary span {
    display: flex;
    align-items: center;
    gap: 10px;
}

.meet-dropdown[open] summary .ph-caret-down {
    transform: rotate(180deg);
}

.meet-dropdown summary .ph-caret-down {
    transition: 0.2s;
}

.meet-list {
    border-top: 1px solid #eef2f7;
    padding: 14px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.meet-list:empty {
    display: none;
}

.meet-card {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    padding: 14px;
    border-radius: 14px;
    background: #f8fafc;
    border-left: 4px solid #94a3b8;
}

.meet-card h3 {
    margin: 0;
    font-size: 15px;
    color: #10264d;
}

.meet-card p {
    margin: 5px 0 0;
    font-size: 13px;
    color: #64748b;
}

.meet-card.ongoing {
    border-left-color: #22c55e;
}

.meet-card.upcoming {
    border-left-color: #2563eb;
}

.meet-card.past {
    border-left-color: #94a3b8;
}

.meet-card-actions {
    display: flex;
    gap: 8px;
    flex-shrink: 0;
}

.meet-empty {
    padding: 14px;
    font-size: 13px;
    color: #94a3b8;
}

/*Styling for join meet button*/
.meet-popup-overlay {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.45);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9999;
}

.meet-popup-overlay.hidden {
    display: none;
}

.meet-popup {
    width: 760px;
    max-width: 95%;
    background: white;
    border-radius: 22px;
    padding: 24px;
    display: grid;
    grid-template-columns: 1.4fr 1fr;
    gap: 24px;
    position: relative;
    box-shadow: 0 20px 50px rgba(0,0,0,0.25);
}

.meet-popup-close {
    position: absolute;
    top: 14px;
    right: 14px;
    border: none;
    background: #f1f5f9;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    cursor: pointer;
}

.meet-preview-screen {
    background: #111827;
    border-radius: 18px;
    min-height: 330px;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

.camera-placeholder .btn {
    margin-top: 14px;
    padding: 8px 14px;      /* Smaller padding */
    font-size: 13px;        /* Smaller text */
    border-radius: 18px;    /* Slightly rounded */
    width: auto;            /* Prevent full width */
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.camera-placeholder .btn i {
    font-size: 14px;
}

.camera-placeholder {
    text-align: center;
    color: #cbd5e1;
}

.camera-placeholder i {
    font-size: 54px;
}

.camera-placeholder p {
    margin-top: 10px;
    font-size: 14px;
}

.meet-controls {
    position: absolute;
    bottom: 18px;
    display: flex;
    gap: 14px;
}

.meet-control-btn {
    width: 46px;
    height: 46px;
    border-radius: 50%;
    border: none;
    background: #374151;
    color: white;
    cursor: pointer;
    font-size: 18px;
}

.meet-control-btn:hover {
    background: #4b5563;
}

.meet-control-btn.off {
    background: #dc2626;
}

.meet-control-btn.off:hover {
    background: #b91c1c;
}

.meet-join-info {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.meet-join-info h2 {
    margin: 0;
    color: #10264d;
    font-size: 26px;
}

.meet-join-info p {
    margin: 10px 0 20px;
    color: #64748b;
    font-size: 14px;
}

.meet-permission-options {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 24px;
}

.meet-permission-options label {
    background: #f8fafc;
    border: 1px solid #e5e7eb;
    padding: 12px;
    border-radius: 12px;
    font-size: 14px;
    color: #334155;
}

/* Camera permission dialog — absolute inside .meet-popup so z-index is unambiguous */
.cam-perm-overlay {
    position: absolute;
    inset: 0;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(15, 23, 42, 0.55);
    border-radius: inherit;
}

.cam-perm-overlay.hidden {
    display: none;
}

.cam-perm-dialog {
    background: #1e2d3d;
    border-radius: 14px;
    padding: 20px;
    width: 300px;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.6);
}

.cam-perm-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 18px;
}

.cam-perm-title {
    color: #f1f5f9;
    font-size: 14px;
    font-weight: 500;
}

.cam-perm-close {
    background: none;
    border: none;
    color: #94a3b8;
    cursor: pointer;
    font-size: 16px;
    padding: 0;
    line-height: 1;
}

.cam-perm-close:hover {
    color: #f1f5f9;
}

.cam-perm-items {
    display: flex;
    flex-direction: column;
    gap: 14px;
    margin-bottom: 22px;
}

.cam-perm-item {
    display: flex;
    align-items: center;
    gap: 12px;
    color: #cbd5e1;
    font-size: 14px;
}

.cam-perm-item i {
    font-size: 20px;
    color: #94a3b8;
    flex-shrink: 0;
}

.cam-perm-actions {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.cam-perm-btn {
    width: 100%;
    padding: 13px;
    border-radius: 24px;
    border: none;
    background: #1d4ed8;
    color: #fff;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s;
}

.cam-perm-btn:hover {
    background: #1e40af;
}

/* Schedule Meeting button */
.meet-top-actions {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    margin-bottom: 16px;
}

#scheduleMeetBtn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 18px;
    border-radius: 10px;
    font-weight: 600;
}

/* Schedule Meeting Popup */
.schedule-popup-overlay {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.45);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
}

.schedule-popup-overlay.hidden {
    display: none;
}

.schedule-popup {
    width: 420px;
    max-width: 95%;
    background: #ffffff;
    border-radius: 20px;
    padding: 24px;
    position: relative;
    box-shadow: 0 20px 50px rgba(0,0,0,0.25);
}

.schedule-popup-close {
    position: absolute;
    top: 14px;
    right: 14px;
    border: none;
    background: #f1f5f9;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    cursor: pointer;
}

.schedule-popup h2 {
    margin: 0;
    color: #10264d;
    font-size: 24px;
}

.schedule-popup p {
    margin: 8px 0 20px;
    color: #64748b;
    font-size: 14px;
}

.schedule-form {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.time-scroller {
    cursor: pointer;
}
/* ==========================================================================
   Timetable feature: read-only grid cells, editor cells, quota chips,
   slot-settings rows, generate-flow banner. (Timetable table shell reuses
   .timetable-table / .timetable-table-card above.)
   ========================================================================== */

/* Read-only grid cell content */
.tt-cell-subject {
    font-weight: 600;
    color: #10264d;
}
.tt-cell-teacher {
    display: block;
    font-size: 0.75rem;
    color: #64748b;
    margin-top: 2px;
}
.tt-cell-stale {
    color: #b45309;
    font-size: 0.7rem;
    display: inline-flex;
    align-items: center;
    gap: 2px;
}

/* Editor: the whole cell is a button */
.timetable-table td.tt-cell {
    padding: 0;
}
.tt-cell-btn {
    display: block;
    width: 100%;
    min-height: 64px;
    padding: 10px 8px;
    background: none;
    border: 0;
    font: inherit;
    cursor: pointer;
    text-align: center;
}
.tt-cell-btn:hover {
    background: #eff6ff;
}
.tt-cell-btn:focus-visible {
    outline: 2px solid #2563eb;
    outline-offset: -2px;
}
.tt-cell-btn.tt-cell-empty i {
    color: #cbd5e1;
    font-size: 18px;
}
.tt-cell-btn.tt-cell-empty:hover i {
    color: #2563eb;
}

/* Quota chips row on the editor page */
.quota-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: var(--sp-lg);
}
.quota-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.3rem 0.75rem;
    border-radius: 999px;
    font-size: 0.8rem;
    font-weight: 600;
    background: #f1f5f9;
    color: #475569;
    border: 1px solid #e2e8f0;
}
.quota-chip.is-met {
    background: #ecfdf5;
    color: #047857;
    border-color: #a7f3d0;
}
.quota-chip.is-over {
    background: #fef2f2;
    color: #b91c1c;
    border-color: #fecaca;
}

/* Period-grid modal rows. Grid, not flex: the columns must line up
   across rows so the badge / times / label read as a table. The error
   and warning lines are extra full-width children, so they need a
   real grid track — flex-wrap could not keep them off the input row. */
.slot-period-row {
    display: grid;
    grid-template-columns: 1.75rem 7rem 7rem auto minmax(7rem, 1fr) auto;
    align-items: center;
    gap: 0.35rem 0.5rem;
    margin-bottom: 0.5rem;
}
/* Below the modal's comfortable width the six columns crush the label,
   so the actions drop to their own row and the times share one. */
@media (max-width: 720px) {
    .slot-period-row {
        grid-template-columns: 1.75rem 1fr 1fr auto;
    }
    .slot-period-row .slot-label {
        grid-column: 2 / -1;
    }
    .slot-row-actions {
        grid-column: 1 / -1;
        justify-content: flex-end;
    }
}
.slot-period-row .slot-break-toggle {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    font-size: 0.8rem;
    color: #475569;
    white-space: nowrap;
}
.slot-day-checks {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 1rem;
    margin-bottom: var(--sp-lg);
}
.slot-day-checks label {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.875rem;
}

/* Generate flow: info feedback variant + spinner + diagnostics */
.form-feedback-info {
    background: #eff6ff;
    color: #1d4ed8;
    border: 1px solid #bfdbfe;
}
.form-input-error {
    border-color: #dc2626 !important;
}
.ph-spin {
    display: inline-block;
    animation: spin 1s linear infinite;
}
.gen-diagnostics {
    margin: 0.75rem 0 0;
    padding-left: 1.25rem;
}
.gen-diagnostics li {
    margin-bottom: 0.4rem;
    font-size: 0.875rem;
}
.gen-preview-grid {
    margin-top: var(--sp-lg);
}

/* Screen-reader-only helper (used by timetable grid captions) */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* ==========================================================================
   Timetable UX: period-grid quick build, lecture-editor teacher field,
   solver preview. One block so the cascade order is obvious — several of
   these rules deliberately override earlier ones by source order rather
   than by !important (see .slot-move-btn vs .btn-icon:hover above).
   ========================================================================== */

/* --- Period grid: quick build + editable rows --- */

.slot-quickbuild {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: var(--sp-md);
    margin-bottom: var(--sp-lg);
}
.slot-quickbuild-head {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--navy);
    margin-bottom: 0.25rem;
}
.slot-quickbuild-sub {
    font-size: 0.75rem;
    color: var(--text-secondary);
    margin-bottom: var(--sp-md);
}
.slot-quickbuild-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(8.5rem, 1fr));
    gap: var(--sp-sm) var(--sp-md);
    margin-bottom: var(--sp-md);
}
.slot-qb-field label {
    display: block;
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--text-secondary);
    margin-bottom: 0.2rem;
}
.slot-qb-preview {
    font-size: 0.8125rem;
    color: var(--text-secondary);
    margin-bottom: var(--sp-md);
    min-height: 1.2em;
}
.slot-qb-preview.is-blocked {
    color: var(--error);
}

.slot-period-no {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.5rem;
    height: 1.5rem;
    border-radius: var(--radius-full);
    background: var(--surface);
    border: 1px solid var(--border);
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--text-secondary);
    font-variant-numeric: tabular-nums;
}
.slot-period-row.is-break .slot-period-no {
    background: #fffbeb;
    border-color: #fde68a;
    color: #b45309;
}

/* Compact restatement of .form-input for the dense row. Keeps the base
   class on the element so focus/error styling still applies. */
.slot-input {
    padding: 0.4375rem 0.75rem;
    font-size: 0.8125rem;
    width: 100%;
}
.slot-input:hover:not(:focus) {
    border-color: var(--sapphire);
}

.slot-row-error,
.slot-row-warn {
    grid-column: 1 / -1;
    font-size: 0.75rem;
    margin: 0 0 0.15rem 2.1rem;
}
.slot-row-error {
    color: var(--error);
}
.slot-row-warn {
    color: var(--warning);
}
.slot-row-error:empty,
.slot-row-warn:empty {
    display: none;
}

.slot-row-actions {
    display: inline-flex;
    align-items: center;
    gap: 0.1rem;
}
/* Source order beats .btn-icon:hover{color:var(--error)} at equal
   specificity — only the trash button should read as destructive. */
.slot-move-btn:hover:not(:disabled),
.slot-duplicate-row:hover {
    color: var(--sapphire);
}
.slot-move-btn:disabled {
    opacity: 0.3;
    cursor: not-allowed;
}

.slot-summary {
    font-size: 0.8125rem;
    color: var(--text-secondary);
    margin-top: var(--sp-sm);
}
.slot-form-error,
.slot-form-warn {
    font-size: 0.8125rem;
    margin-top: var(--sp-sm);
}
.slot-form-error {
    color: var(--error);
}
.slot-form-warn {
    color: var(--warning);
}
.slot-form-error:empty,
.slot-form-warn:empty {
    display: none;
}

/* Sticky footer so Save stays reachable inside the modal's 90vh cap
   once the period list grows past the fold. */
.slot-modal-actions {
    position: sticky;
    bottom: calc(-1 * var(--sp-xl));
    background: var(--white);
    border-top: 1px solid var(--border);
    padding: var(--sp-md) 0 0;
    margin-top: var(--sp-lg);
}

/* --- Lecture editor: teacher field states --- */

/* Amber hint for the two states where the subject's teacher will NOT be
   used as-is (no teacher assigned, or assigned but deactivated). Comes
   after .text-secondary so it wins at equal specificity. */
.tt-hint-warn {
    color: var(--warning);
}
.tt-override-note {
    background: #eff6ff;
    border-left: 2px solid var(--sapphire);
    border-radius: 0 var(--radius) var(--radius) 0;
    color: #1d4ed8;
    padding: 0.5rem 0.625rem;
    margin-bottom: 0.375rem;
    line-height: 1.45;
}
/* The conflict link sits inside .form-feedback-error, so it inherits
   that block's red rather than fighting it with the sapphire default. */
.tt-conflict-link {
    color: inherit;
    font-weight: 600;
    text-decoration: underline;
}
.tt-conflict-link:hover {
    text-decoration: none;
}

/* --- Solver preview: diff chips, class sections, cells, sticky bar --- */

.tt-diff-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    align-items: center;
}
.tt-diff-chip {
    display: inline-flex;
    align-items: center;
    padding: 0.2rem 0.55rem;
    border-radius: var(--radius-full);
    border: 1px solid var(--border);
    background: var(--white);
    font-size: 0.75rem;
    font-weight: 600;
    white-space: nowrap;
}
.tt-diff-chip.is-added   { background: #ecfdf5; color: #047857; border-color: #a7f3d0; }
.tt-diff-chip.is-changed { background: #eff6ff; color: #1d4ed8; border-color: #bfdbfe; }
.tt-diff-chip.is-removed { background: #fef2f2; color: #b91c1c; border-color: #fecaca; }
.tt-diff-chip.is-warn    { background: #fffbeb; color: #b45309; border-color: #fde68a; }
.tt-diff-chip.is-none    { color: var(--text-secondary); }

.tt-class-section {
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    margin-bottom: var(--sp-md);
    overflow: hidden;
}
.tt-class-section-head {
    display: flex;
    align-items: center;
    gap: var(--sp-md);
    flex-wrap: wrap;
    padding: var(--sp-md) var(--sp-lg);
    cursor: pointer;
    list-style: none;
    transition: background var(--ease);
}
.tt-class-section-head::-webkit-details-marker {
    display: none;
}
.tt-class-section-head:hover {
    background: var(--surface);
}
.tt-class-section-head::before {
    content: '\203A';
    display: inline-block;
    font-size: 1.1rem;
    color: var(--text-secondary);
    transition: transform var(--ease);
}
.tt-class-section[open] > .tt-class-section-head::before {
    transform: rotate(90deg);
}
.tt-class-section-name {
    font-weight: 600;
    color: var(--navy);
}
.tt-class-section-body {
    padding: 0 var(--sp-lg) var(--sp-lg);
}

/* Diff state on a proposed cell. Each carries a .tt-diff-tag as well —
   colour alone is not an accessible signal. */
.tt-preview-cell.tt-diff-added   { background: #ecfdf5; box-shadow: inset 3px 0 0 var(--success); }
.tt-preview-cell.tt-diff-changed { background: #eff6ff; box-shadow: inset 3px 0 0 var(--sapphire); }
.tt-preview-cell.tt-diff-teacher { background: #f5f3ff; box-shadow: inset 3px 0 0 #7c3aed; }
.tt-preview-cell.tt-diff-removed {
    background: #fef2f2;
    box-shadow: inset 3px 0 0 var(--error);
    opacity: 0.65;
    text-decoration: line-through;
}
.tt-diff-tag {
    display: block;
    font-size: 0.5625rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    color: var(--text-secondary);
    margin-top: 0.15rem;
}
.tt-diff-was {
    display: block;
    font-size: 0.625rem;
    color: var(--text-secondary);
    font-style: italic;
}

.tt-preview-bar {
    position: sticky;
    bottom: 0;
    z-index: 50;
    display: flex;
    align-items: center;
    gap: var(--sp-md);
    flex-wrap: wrap;
    padding: var(--sp-md) var(--sp-lg);
    margin-top: var(--sp-xl);
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
}
.tt-preview-bar.is-stale {
    border-color: #fde68a;
    background: #fffbeb;
}

/* ==========================================================================
   Staff attendance + substitutions: status chips, marked-by tag,
   substitution groups, check-in button.
   ========================================================================== */

.att-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.2rem 0.65rem;
    border-radius: 999px;
    font-size: 0.6875rem;
    font-weight: 600;
    white-space: nowrap;
}
.att-chip-present {
    background: #ECFDF5;
    color: #047857;
    border: 1px solid #A7F3D0;
}
.att-chip-absent {
    background: #FEF2F2;
    color: #B91C1C;
    border: 1px solid #FECACA;
}
.att-chip-unmarked {
    background: #F8FAFC;
    color: #64748B;
    border: 1px solid #E2E8F0;
}
.att-chip-uncovered {
    background: #FEF3C7;
    color: #92400E;
    border: 1px solid #FDE68A;
}
.att-source {
    font-size: 0.6875rem;
    color: #64748B;
    white-space: nowrap;
}

.sub-group {
    margin-top: 1.25rem;
}
.sub-group:first-child {
    margin-top: 0;
}
.sub-group-head {
    font-size: 0.8125rem;
    font-weight: 600;
    color: #1B2A4A;
    margin-bottom: 0.5rem;
}
tr.sub-row-uncovered {
    background: #FFFBEB;
}
tr.sub-row-uncovered td:first-child {
    border-left: 3px solid #f59e0b;
}

.att-date-nav {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}
.checkin-btn-lg {
    padding: 0.9rem 1.75rem;
    font-size: 1rem;
}

/* ===== Grade scale (migration 064) ===== */
.grade-letter-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.25rem 0.65rem;
    border-radius: 999px;
    background: #ECFDF5;
    color: #047857;
    font-weight: 700;
    font-size: 0.85rem;
    white-space: nowrap;
}
.grade-letter-badge.grade-letter-fail {
    background: #FEF2F2;
    color: #B91C1C;
}
.grade-letter-badge-sm {
    padding: 0.1rem 0.45rem;
    font-size: 0.75rem;
}
.grade-band-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 0.5rem;
}
.grade-band-table th {
    text-align: left;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--text-secondary, #6b7280);
    padding: 0.4rem 0.5rem;
    border-bottom: 1px solid var(--border, #e5e7eb);
}
.grade-band-table td {
    padding: 0.35rem 0.5rem;
    border-bottom: 1px solid var(--border, #e5e7eb);
    vertical-align: middle;
}
.grade-band-table .form-input {
    padding: 0.35rem 0.5rem;
}
.grade-band-table .band-label { width: 90px; }
.grade-band-table .band-min   { width: 90px; }
.grade-band-table .band-points{ width: 80px; }
.grade-scale-notice {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    padding: 0.65rem 0.85rem;
    border-radius: 8px;
    background: #FFFBEB;
    border: 1px solid #FDE68A;
    color: #92400E;
    font-size: 0.85rem;
    margin-bottom: 1rem;
}
.grade-scale-try {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

/* ===== Academic calendar (migration 065) ===== */
.cal-controls {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
}
.cal-filters {
    display: flex;
    gap: 0.35rem;
    flex-wrap: wrap;
}
.cal-filter {
    border: 1px solid #dce3ef;
    background: #fff;
    border-radius: 999px;
    padding: 0.3rem 0.75rem;
    font-size: 0.8rem;
    cursor: pointer;
    color: #475569;
}
.cal-filter.active {
    background: #10264d;
    border-color: #10264d;
    color: #fff;
}
.cal-view-toggle {
    display: flex;
    border: 1px solid #dce3ef;
    border-radius: 8px;
    overflow: hidden;
}
.cal-view-toggle button {
    border: none;
    background: #fff;
    padding: 0.35rem 0.6rem;
    cursor: pointer;
    color: #475569;
}
.cal-view-toggle button.active {
    background: #10264d;
    color: #fff;
}
.cal-date-num {
    font-weight: 600;
    font-size: 0.8rem;
    margin-bottom: 2px;
}
.cal-entry {
    display: block;
    padding: 1px 6px;
    margin-top: 2px;
    border-radius: 6px;
    font-size: 11px;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    cursor: pointer;
    border-left: 3px solid transparent;
}
.cal-entry i { font-size: 11px; }
.cal-entry--holiday  { background: #FEF2F2; color: #B91C1C; border-left-color: #ef4444; }
.cal-entry--event    { background: #EFF6FF; color: #1D4ED8; border-left-color: #3b82f6; }
.cal-entry--exam     { background: #F5F3FF; color: #6D28D9; border-left-color: #8b5cf6; }
.cal-entry--deadline { background: #FFFBEB; color: #B45309; border-left-color: #f59e0b; }
.cal-entry--draft    { opacity: 0.65; border-style: dashed; }
.cal-entry-time { font-weight: 500; opacity: 0.8; }
.cal-more-btn {
    display: block;
    width: 100%;
    border: none;
    background: transparent;
    color: #64748b;
    font-size: 10px;
    cursor: pointer;
    text-align: left;
    padding: 1px 4px;
}
.cal-popover {
    position: absolute;
    z-index: 60;
    background: #fff;
    border: 1px solid #dce3ef;
    border-radius: 10px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.14);
    padding: 0.6rem;
    min-width: 220px;
    max-width: 320px;
}
.cal-popover-head {
    font-weight: 700;
    font-size: 0.8rem;
    margin-bottom: 0.4rem;
}
.cal-list { list-style: none; margin: 0; padding: 0; }
.cal-list-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.5rem 0.25rem;
    border-bottom: 1px solid #eef2f7;
}
.cal-list-item .cal-entry { max-width: 60%; }
.cal-class-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 0.25rem 0.75rem;
    max-height: 160px;
    overflow-y: auto;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    padding: 0.5rem;
}
.cal-class-option { font-size: 0.85rem; }
.day-block-banner {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.65rem 0.9rem;
    border-radius: 10px;
    background: #FEF2F2;
    border: 1px solid #FECACA;
    color: #B91C1C;
    font-weight: 600;
    margin-bottom: 1rem;
}
.upcoming-card-list { list-style: none; margin: 0; padding: 0; }
.upcoming-card-list li {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.45rem 0;
    border-bottom: 1px solid #eef2f7;
    font-size: 0.85rem;
}
.upcoming-card-list li:last-child { border-bottom: none; }
.upcoming-date {
    color: #64748b;
    font-size: 0.75rem;
    min-width: 64px;
}

/* ===== Exam builder (migration 066) ===== */
.exam-grid {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.85rem;
}
.exam-grid th {
    text-align: left;
    padding: 0.5rem;
    border-bottom: 2px solid #dce3ef;
    background: #f8fafc;
    white-space: nowrap;
}
.exam-grid td {
    padding: 0.4rem 0.5rem;
    border-bottom: 1px solid #eef2f7;
    vertical-align: top;
    min-width: 160px;
}
.exam-cell { cursor: pointer; }
.exam-cell:hover { background: #f8fafc; }
tr.exam-day-closed td { background: #f1f5f9; color: #94a3b8; cursor: default; }
.exam-chip {
    display: block;
    padding: 3px 8px;
    margin-bottom: 3px;
    border-radius: 6px;
    background: #F5F3FF;
    color: #6D28D9;
    border-left: 3px solid #8b5cf6;
    font-size: 0.78rem;
    cursor: pointer;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.exam-chip--proposed {
    border: 1px dashed #8b5cf6;
    border-left-width: 3px;
    background: #FAF5FF;
    opacity: 0.9;
}
.exam-preview-bar {
    position: sticky;
    bottom: 0;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-top: 1rem;
    padding: 0.75rem 1rem;
    background: #10264d;
    color: #fff;
    border-radius: 12px;
    font-size: 0.85rem;
}
.solve-class { margin-bottom: 0.4rem; }
.solve-subject {
    display: inline-block;
    margin-left: 1.2rem;
    font-size: 0.8rem;
    color: #475569;
}

/* ===== Exam marks sheets + report cards (migration 067) ===== */

/* Status chips (sheets + report-card runs) */
.sheet-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.2rem 0.65rem;
    border-radius: 999px;
    font-size: 0.6875rem;
    font-weight: 600;
    white-space: nowrap;
    text-transform: none;
}
.sheet-chip-none {
    background: #F8FAFC;
    color: #64748B;
    border: 1px solid #E2E8F0;
}
.sheet-chip-draft {
    background: #FEF3C7;
    color: #92400E;
    border: 1px solid #FDE68A;
}
.sheet-chip-submitted,
.sheet-chip-published {
    background: #ECFDF5;
    color: #047857;
    border: 1px solid #A7F3D0;
}
.sheet-chip-generated {
    background: #DBEAFE;
    color: #1D4ED8;
    border: 1px solid #BFDBFE;
}
.sheet-chip-noteacher {
    background: #FEF2F2;
    color: #B91C1C;
    border: 1px solid #FECACA;
}

/* Sheet grid (subject marks + class sheet) */
.sheet-toolbar {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.75rem;
    flex-wrap: wrap;
    margin-bottom: 0.75rem;
}
.sheet-toolbar-actions {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}
.sheet-grid-wrap {
    overflow-x: auto;
}
.sheet-grid {
    border-collapse: separate;
    border-spacing: 0;
    min-width: 100%;
    font-size: 0.85rem;
}
.sheet-grid th,
.sheet-grid td {
    padding: 0.35rem 0.5rem;
    border-bottom: 1px solid #eef2f7;
    text-align: center;
    white-space: nowrap;
    vertical-align: middle;
}
.sheet-grid thead th {
    position: sticky;
    top: 0;
    background: #f8fafc;
    border-bottom: 2px solid #dce3ef;
    font-weight: 600;
    z-index: 2;
}
.sheet-grid .sheet-col-student {
    position: sticky;
    left: 0;
    background: #fff;
    text-align: left;
    min-width: 180px;
    max-width: 240px;
    overflow: hidden;
    text-overflow: ellipsis;
    border-right: 1px solid #dce3ef;
    z-index: 1;
}
.sheet-grid thead .sheet-col-student {
    background: #f8fafc;
    z-index: 3;
}
.sheet-th-alt {
    display: block;
    font-size: 0.7rem;
    font-weight: 500;
    color: #64748b;
}
.sheet-th-max {
    display: block;
    font-size: 0.68rem;
    font-weight: 500;
    color: #94a3b8;
}
.sheet-cell .sheet-mark {
    display: inline-block;
    width: 76px;
    padding: 0.3rem 0.4rem;
    text-align: right;
}
.sheet-grid .sheet-days,
.sheet-grid .sheet-roll {
    width: 84px;
    padding: 0.3rem 0.4rem;
    text-align: right;
}
.sheet-grid .sheet-adm {
    width: 130px;
    padding: 0.3rem 0.4rem;
}
.sheet-grid .sheet-result,
.sheet-grid .sheet-cos {
    width: auto;
    min-width: 110px;
    padding: 0.3rem 0.4rem;
}
.sheet-grid .sheet-remarks {
    min-width: 220px;
    padding: 0.3rem 0.4rem;
    resize: vertical;
}
.sheet-remarks-cell {
    white-space: normal;
    text-align: left;
    min-width: 200px;
}
.sheet-ab {
    margin-left: 0.3rem;
    border: 1px solid #E2E8F0;
    background: #fff;
    color: #94a3b8;
    border-radius: 6px;
    font-size: 0.68rem;
    font-weight: 700;
    padding: 0.25rem 0.4rem;
    cursor: pointer;
}
.sheet-ab.active {
    background: #FEF2F2;
    color: #B91C1C;
    border-color: #FECACA;
}
.sheet-ab-flag {
    display: inline-block;
    padding: 0.15rem 0.45rem;
    border: 1px solid #FECACA;
    border-radius: 6px;
    background: #FEF2F2;
    color: #B91C1C;
    font-size: 0.7rem;
    font-weight: 700;
}
.cell-invalid {
    border-color: #dc2626 !important;
    background: #FEF2F2 !important;
}
.sheet-workdays {
    max-width: 220px;
}

/* Admin results dashboard rows */
.results-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    flex-wrap: wrap;
    padding: 0.6rem 0.75rem;
    border: 1px solid #eef2f7;
    border-radius: 8px;
    margin-bottom: 0.75rem;
    font-size: 0.875rem;
}
.results-row-actions {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    flex-wrap: wrap;
}

/* Report card document (CBSE + GSEB layouts, screen + print) */
.report-card {
    background: #fff;
    color: #1E293B;
    border: 2px solid #1f2937;
    border-radius: 2px;
    max-width: 820px;
    margin: 0 auto 1.5rem;
    padding: 20px 26px;
    font-size: 0.8rem;
    line-height: 1.45;
}
.report-card--gseb {
    font-family: 'Noto Sans Gujarati', Shruti, sans-serif;
}
.rc-head {
    display: flex;
    align-items: center;
    gap: 14px;
    border-bottom: 2px solid #1f2937;
    padding-bottom: 10px;
}
.rc-logo {
    width: 64px;
    height: 64px;
    object-fit: contain;
    flex-shrink: 0;
}
.rc-school {
    flex: 1;
    text-align: center;
}
.rc-school-name {
    font-size: 1.15rem;
    font-weight: 800;
    letter-spacing: 0.02em;
    text-transform: uppercase;
}
.rc-school-meta {
    font-size: 0.72rem;
    color: #334155;
}
.rc-title {
    text-align: center;
    margin: 10px 0 6px;
}
.rc-title-main {
    display: inline-block;
    border: 1px solid #1f2937;
    padding: 2px 16px;
    font-weight: 700;
    font-size: 0.95rem;
}
.rc-series {
    font-size: 0.75rem;
    color: #334155;
    margin-top: 3px;
}
.rc-info {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 3px 18px;
    margin: 8px 0;
    font-size: 0.78rem;
}
.rc-info-wide {
    grid-column: span 2;
}
.rc-blank {
    display: inline-block;
    min-width: 90px;
    border-bottom: 1px dotted #64748b;
    vertical-align: bottom;
}
.rc-blank-wide {
    min-width: 260px;
}
.rc-section-title {
    font-weight: 700;
    font-size: 0.8rem;
    margin-top: 8px;
}
.rc-table {
    width: 100%;
    border-collapse: collapse;
    margin: 4px 0 8px;
    font-size: 0.74rem;
}
.rc-table th,
.rc-table td {
    border: 1px solid #334155;
    padding: 3px 6px;
    text-align: center;
}
.rc-table th {
    background: #f1f5f9;
    font-weight: 700;
}
.rc-table tfoot th,
.rc-table tfoot td {
    background: #f8fafc;
    font-weight: 700;
}
.rc-table .rc-left {
    text-align: left;
}
.rc-sub {
    display: block;
    font-size: 0.64rem;
    font-weight: 500;
    color: #475569;
}
.rc-p-false {
    color: #B91C1C;
}
.rc-two-col {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0 16px;
    align-items: start;
}
.rc-legend {
    font-size: 0.7rem;
}
.rc-band-list {
    display: flex;
    flex-wrap: wrap;
    gap: 3px 6px;
    margin-top: 4px;
}
.rc-band {
    display: inline-block;
    border: 1px solid #cbd5e1;
    border-radius: 4px;
    padding: 1px 6px;
    font-size: 0.66rem;
    white-space: nowrap;
}
.rc-band-fail {
    border-color: #FECACA;
    color: #B91C1C;
}
.rc-lines {
    margin-top: 8px;
    font-size: 0.78rem;
}
.rc-line {
    margin-bottom: 5px;
}
.rc-signatures {
    display: flex;
    justify-content: space-between;
    gap: 2.5rem;
    margin-top: 2.6rem;
}
.rc-sign {
    flex: 1;
    text-align: center;
    font-size: 0.74rem;
    font-weight: 600;
    border-top: 1px solid #334155;
    padding-top: 4px;
}
.rc-sign .rc-sub {
    font-weight: 500;
}

/* Multi-term scholastic table (migration 068 — annual cards) */
.rc-table-scroll {
    overflow-x: auto;
}
.rc-scholastic {
    white-space: nowrap;
}
/* Column-group banner: header cells sharing rc-term-{no} get one
   continuous tint; rc-term-start draws the divider between groups
   (Subject -> Term 1 -> Term 2 -> Final) all the way down the table. */
.rc-term-grp {
    font-weight: 700;
}
.rc-term-1 { background: #eff6ff; }
.rc-term-2 { background: #fef3c7; }
.rc-term-3 { background: #ecfdf5; }
.rc-term-4 { background: #fdf2f8; }
.rc-term-final {
    background: #e2e8f0;
    font-weight: 800;
}
.rc-table th.rc-term-start,
.rc-table td.rc-term-start {
    border-left: 2px solid #1f2937;
}
.rc-absent {
    color: #B91C1C;
    font-weight: 700;
}
.rc-att-list {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 16px;
    margin-top: 4px;
    font-size: 0.78rem;
}
.rc-att-item {
    white-space: nowrap;
}
/* Wide (2+ term) cards: named print page so Chrome-based printing can
   go landscape for these while single-term cards stay portrait. */
.report-card--wide {
    max-width: 100%;
}
@media print {
    .report-card--wide {
        page: rc-wide;
    }
}
@page rc-wide {
    size: A4 landscape;
    margin: 10mm;
}

/* Print-all mode (?print=1): body class set by the reportcards page */
body.rc-print .atlas-sidebar,
body.rc-print .notification-wrapper,
body.rc-print .notification-overlay {
    display: none;
}
body.rc-print .atlas-content {
    margin-left: 0;
    background: #fff;
}

@media print {
    .atlas-sidebar,
    .notification-wrapper,
    .notification-overlay,
    .atlas-header,
    .rc-toolbar,
    .form-feedback,
    .btn {
        display: none !important;
    }
    .atlas-content {
        margin: 0 !important;
        padding: 0 !important;
        background: #fff !important;
        min-height: 0 !important;
    }
    body {
        background: #fff;
    }
    .report-card {
        border-width: 1.5pt;
        border-radius: 0;
        box-shadow: none;
        max-width: none;
        margin: 0;
        page-break-after: always;
    }
    .rc-table-scroll {
        overflow-x: visible;
    }
    .report-card--wide .rc-scholastic {
        font-size: 0.62rem;
    }
    @page {
        size: A4;
        margin: 12mm;
    }
}

/* ============================================================
   Reports & exports — report picker, print sheet
   ============================================================ */

.rpt-list {
  display: flex;
  flex-direction: column;
  gap: var(--sp-sm);
}

/* Selectable card. The is-selected treatment deliberately mirrors
   .filter-pill.is-active so "chosen" reads the same way across the admin. */
.rpt-option {
  display: flex;
  flex-direction: column;
  gap: 2px;
  width: 100%;
  text-align: left;
  padding: var(--sp-md);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--white);
  cursor: pointer;
  transition: border-color var(--duration-fast, 150ms) var(--ease),
              background var(--duration-fast, 150ms) var(--ease);
}

.rpt-option:hover {
  border-color: var(--sapphire);
  background: var(--surface);
}

.rpt-option:focus-visible {
  outline: 2px solid var(--sapphire);
  outline-offset: 2px;
}

.rpt-option.is-selected {
  border-color: var(--sapphire);
  background: var(--surface);
  box-shadow: inset 3px 0 0 var(--sapphire);
}

.rpt-option-title {
  font-weight: 600;
  font-size: .875rem;
  color: var(--text);
}

.rpt-option-desc {
  font-size: .75rem;
  line-height: 1.45;
  color: var(--text-secondary);
}

.rpt-empty {
  font-size: .8125rem;
  color: var(--text-secondary);
  text-align: center;
  padding: var(--sp-lg) 0;
}

/* --- print view (/admin/reports/{key}/print) --- */

.rpt-sheet-head { margin-bottom: var(--sp-lg); }
.rpt-sheet-head h1 { margin: 0 0 4px; font-size: 1.375rem; }

.rpt-sheet-meta {
  margin: 0 0 var(--sp-xs);
  font-size: .8125rem;
  color: var(--text-secondary);
}

.rpt-sheet-desc {
  margin: 0;
  font-size: .75rem;
  color: var(--text-secondary);
  max-width: 70ch;
}

.rpt-sheet-warn {
  margin: 0 0 var(--sp-md);
  padding: var(--sp-sm) var(--sp-md);
  border-left: 3px solid var(--warning);
  background: var(--surface);
  font-size: .8125rem;
  color: var(--text);
}

.rpt-print-table { font-size: .8125rem; }
.rpt-print-table td { white-space: nowrap; }

/* Print-view chrome, mirroring body.rc-print on the report cards page. */
body.rpt-print .atlas-sidebar,
body.rpt-print .notification-wrapper,
body.rpt-print .notification-overlay {
  display: none;
}

body.rpt-print .atlas-content {
  margin-left: 0;
  background: #fff;
}

@media print {
  .rpt-toolbar { display: none !important; }

  .rpt-print-table {
    font-size: 8.5pt;
    width: 100%;
  }
  .rpt-print-table th,
  .rpt-print-table td {
    white-space: normal;
    padding: 3pt 4pt;
  }
  /* Repeat the header on every printed page of a long table. */
  .rpt-print-table thead { display: table-header-group; }
  .rpt-print-table tr { page-break-inside: avoid; }

  .rpt-sheet-head { page-break-after: avoid; }
}

/* ============================================================
   Teacher capability editor (/admin/teachers/capability)
   ============================================================
   Two-pane layout: a teacher list that stays put, and an editor that
   scrolls. The matrix is chips rather than a checkbox table because
   subjects have wildly different grade counts — a table would be mostly
   empty cells, and the "All grades" option has no column to live in. */

.cap-layout {
    display: grid;
    grid-template-columns: minmax(220px, 300px) 1fr;
    gap: 1.5rem;
    align-items: start;
    margin-top: 1.5rem;
}

@media (max-width: 900px) {
    .cap-layout { grid-template-columns: 1fr; }
}

.cap-teachers { position: sticky; top: 1rem; }

.cap-teacher-list {
    list-style: none;
    margin: 0;
    padding: 0;
    max-height: 60vh;
    overflow-y: auto;
}

.cap-teacher-btn {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    width: 100%;
    padding: 10px 12px;
    background: none;
    border: 0;
    border-radius: 10px;
    text-align: left;
    cursor: pointer;
    transition: background 0.15s ease;
}

.cap-teacher-btn:hover { background: #f1f5f9; }
.cap-teacher.is-selected .cap-teacher-btn { background: #e0edff; }

.cap-teacher-name { color: #10264d; font-weight: 600; }
.cap-teacher-count { font-size: 12px; }

.cap-subject-row {
    display: grid;
    grid-template-columns: minmax(120px, 180px) 1fr;
    gap: 1rem;
    align-items: center;
    padding: 10px 0;
    border-bottom: 1px solid #eef2f7;
}

.cap-subject-row:last-child { border-bottom: 0; }
.cap-subject-name { color: #10264d; font-weight: 600; }

.cap-chips { display: flex; flex-wrap: wrap; gap: 6px; }

.cap-chip {
    padding: 5px 12px;
    border: 1px solid #dce3ef;
    border-radius: 999px;
    background: white;
    color: #64748b;
    font-size: 13px;
    cursor: pointer;
    transition: 0.15s ease;
}

.cap-chip:hover:not(:disabled) { border-color: #2563eb; color: #2563eb; }

.cap-chip.is-on {
    background: #2563eb;
    border-color: #2563eb;
    color: white;
}

/* "All grades" reads as a different KIND of claim, not a wider one. */
.cap-chip-all.is-on { background: #10264d; border-color: #10264d; }

/* Grades already covered by "All grades": shown on, but not clickable,
   so the wildcard's effect is visible instead of implied. */
.cap-chip-implied.is-on {
    background: #e0edff;
    border-color: #bfdbfe;
    color: #2563eb;
    cursor: not-allowed;
}

.cap-field { display: flex; flex-direction: column; gap: 4px; }
.cap-field .input { max-width: 180px; }

.cap-grid-scroll { overflow-x: auto; }

.cap-grid { border-collapse: collapse; }
.cap-grid th {
    padding: 6px 10px;
    color: #64748b;
    font-size: 12px;
    font-weight: 600;
    text-align: center;
}
.cap-grid tbody th { text-align: right; }
.cap-grid td { padding: 3px; text-align: center; }

.cap-cell {
    width: 30px;
    height: 30px;
    border: 1px solid #dce3ef;
    border-radius: 7px;
    background: #f8fafc;
    cursor: pointer;
    transition: 0.12s ease;
}

.cap-cell:hover { border-color: #2563eb; }

/* Red means "cannot be scheduled here" — the cell is an exclusion, so
   the ON state has to read as a block, not as a selection. */
.cap-cell.is-off {
    background: #fee2e2;
    border-color: #ef4444;
}

.cap-cell-break { color: #cbd5e1; font-size: 12px; }
.cap-cell-none { background: repeating-linear-gradient(45deg, #f8fafc, #f8fafc 4px, #eef2f7 4px, #eef2f7 8px); }

/* ============================================================
   Tutor safety page (/teacher/tutor/safety) + admin AI Tutor page
   ============================================================ */

.safety-open-banner {
    display: flex;
    align-items: center;
    gap: .5rem;
    background: #FEF3C7;
    color: #92400E;
    border: 1px solid #FDE68A;
    border-radius: var(--radius-lg);
    padding: .75rem 1rem;
    margin-bottom: 1rem;
    font-weight: 600;
    font-size: .875rem;
}

.safety-list { display: flex; flex-direction: column; gap: 1rem; }

.safety-event { padding: 1.25rem; }

/* The row the crisis email deep-linked to. */
.safety-highlight { border-color: var(--sapphire); box-shadow: 0 0 0 2px var(--sapphire-light); }

.safety-acked { opacity: .8; }

.safety-event-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
}

.badge-safety { background: #FEE2E2; color: #991B1B; }

.safety-when { font-size: .8125rem; color: var(--text-secondary); }

.safety-student {
    display: flex;
    align-items: center;
    gap: .375rem;
    margin: .5rem 0;
    font-size: .9375rem;
}

.safety-excerpt {
    margin: .5rem 0;
    padding: .625rem .875rem;
    background: var(--bg);
    border-left: 3px solid #EF4444;
    border-radius: var(--radius);
    font-size: .875rem;
    white-space: pre-wrap;
    word-break: break-word;
}

.safety-ack-info {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: .375rem;
    color: #065F46;
    font-size: .875rem;
    margin-top: .5rem;
}

.safety-ack-note {
    flex-basis: 100%;
    color: var(--text-secondary);
    font-size: .8125rem;
    white-space: pre-wrap;
}

.safety-ack-form {
    display: flex;
    align-items: flex-end;
    gap: .625rem;
    margin-top: .625rem;
}

.safety-note-input {
    flex: 1;
    resize: vertical;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: .5rem .75rem;
    font-size: .875rem;
    font-family: inherit;
}

.safety-empty { text-align: center; }
.safety-empty-icon { font-size: 2rem; color: var(--text-secondary); }

/* --- Admin AI Tutor page --- */

.tutor-section-title {
    display: flex;
    align-items: center;
    gap: .5rem;
    font-size: 1.0625rem;
    margin: 1.75rem 0 .75rem;
}

.tutor-stats-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 1rem;
}

.tutor-stat-label {
    font-size: .8125rem;
    color: var(--text-secondary);
    letter-spacing: .02em;
    margin-bottom: .375rem;
}

.tutor-stat-value { font-size: 1.375rem; font-weight: 700; }
.tutor-stat-sub { font-size: .875rem; font-weight: 500; color: var(--text-secondary); }

.tutor-budget-track {
    height: 8px;
    background: var(--bg);
    border-radius: var(--radius-full);
    margin-top: .625rem;
    overflow: hidden;
}

.tutor-budget-fill {
    height: 100%;
    width: 0;
    background: var(--sapphire);
    border-radius: var(--radius-full);
    transition: width .3s ease;
}

.tutor-caps-line { font-size: .875rem; margin-top: .25rem; }

.tutor-usage-table td { font-variant-numeric: tabular-nums; }

.tutor-empty-cell { color: var(--text-secondary); }

.tutor-pagination {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: .625rem;
    margin-top: .75rem;
}

/* Consent status badges (COALESCE'd states incl. the synthetic 'missing'). */
.badge-consent-missing { background: #F1F5F9; color: #64748B; }
.badge-consent-pending { background: #FEF3C7; color: #92400E; }
.badge-consent-granted { background: #D1FAE5; color: #065F46; }
.badge-consent-revoked { background: #FEE2E2; color: #991B1B; }

/* ============================================================
   Admin Ask (/admin/ask)
   ============================================================ */

.ask-suggestions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem;
    margin-bottom: 1rem;
}

.ask-chip {
    border: 1px solid var(--border);
    background: var(--white);
    border-radius: var(--radius-full);
    padding: .375rem .875rem;
    font-size: .8125rem;
    font-family: inherit;
    color: var(--text-secondary);
    cursor: pointer;
    transition: all var(--ease);
}

.ask-chip:hover { border-color: var(--sapphire); color: var(--sapphire); }

.ask-transcript { display: flex; flex-direction: column; gap: 1rem; }

.ask-turn {
    display: flex;
    align-items: flex-start;
    gap: .625rem;
    padding: 1rem 1.125rem;
    border-radius: var(--radius-lg);
    border: 1px solid var(--border);
    background: var(--white);
}

.ask-turn-question {
    background: var(--bg);
    font-weight: 600;
    align-self: flex-end;
    max-width: 80%;
}

.ask-turn-answer { flex-direction: column; box-shadow: var(--shadow); }

/* A refusal or an error must not look like an answer. */
.ask-refused { border-color: #FDE68A; background: #FFFBEB; }

.ask-answer-text { margin: 0; font-size: .9375rem; line-height: 1.6; }

.ask-banner {
    margin-top: .625rem;
    padding: .5rem .75rem;
    border-radius: var(--radius);
    background: #FEF3C7;
    color: #92400E;
    font-size: .8125rem;
    font-weight: 600;
}

.ask-table-wrap { margin-top: .875rem; max-height: 420px; overflow: auto; }
.ask-table td { font-variant-numeric: tabular-nums; text-align: left; }
.ask-table th { text-align: left; }

.ask-meta { margin-top: .5rem; font-size: .75rem; color: var(--text-secondary); }

.ask-sql { margin-top: .75rem; }
.ask-sql summary { cursor: pointer; font-size: .8125rem; color: var(--text-secondary); }
.ask-sql pre {
    margin-top: .5rem;
    padding: .75rem;
    background: var(--bg);
    border-radius: var(--radius);
    font-size: .75rem;
    overflow-x: auto;
    white-space: pre-wrap;
    word-break: break-word;
}

.ask-composer {
    display: flex;
    gap: .625rem;
    margin-top: 1.25rem;
    position: sticky;
    bottom: 1rem;
}

.ask-input { flex: 1; }

.ask-footnote { margin-top: .75rem; }

.ask-pending { color: var(--text-secondary); flex-direction: row; align-items: center; }
.ask-spin { animation: ask-spin 1s linear infinite; }
@keyframes ask-spin { to { transform: rotate(360deg); } }

.ask-disabled { text-align: center; }
.ask-disabled-icon { font-size: 2rem; color: var(--text-secondary); }