/* =============================================================
   ATTENDO — DESIGN TOKEN SYSTEM v2
   Brand: Navy #020D1D + Teal #00A9A5 · Font: Outfit
   Light-by-default · Dark via [data-theme="dark"] on <html>
   ============================================================= */

/* Admin Layout Correction: Prevent overlap with restored header */
*, *::before, *::after { box-sizing: border-box; }
.admin-v2-container, .teacher-v2-container { margin-top: 0; }

/* ── Light Mode Tokens (default) ────────────────────────────── */
:root {
  /* ── SOVEREIGN V36: AESTHETIC DNA ── */
  --glass-bg: rgba(255, 255, 255, 0.1);
  --glass-border: rgba(255, 255, 255, 0.2);
  --glass-blur: blur(20px);

  /* ── ATOMIZED ANALYTIC TOKENS (Shared DNA) ── */
  --bg-global:      #F8FAFC;       /* Primary Slate Background */
  --card-bg:        #FFFFFF;       /* Container Surface */
  
  --text-main:      #1E293B;       /* High-Contrast Charcoal */
  --text-muted:     #64748B;       /* Professional Cool Grey */
  
  --status-active:  #2563EB;       /* Deep Blue - Attendance/Primary */
  --status-alert:   #F97316;       /* Bright Orange - Warning/Fee */
  --status-success: #10B981;       /* Sage Green - Completion */
  --status-preview: #8B5CF6;       /* Violet - Future States */

  /* ── LEGACY MAPPING (Functional Safety) ── */
  --primary:        #020D1D;
  --secondary:      #0B1E38;
  --action:         #00A9A5;
  --c-teal:         #00A9A5;
  --c-navy:         #020D1D;
  --c-bg:           var(--bg-global);
  --c-surface:      var(--card-bg);
  --c-text:         var(--text-main);
  --c-text-2:       var(--text-muted);
  --c-muted:        var(--text-muted);
  --on-surface:     var(--text-main);
  --on-accent:      #FFFFFF;
  
  --c-surface-2:    #F1F5F9;
  --c-header:       var(--card-bg);
  --c-header-border: var(--glass-border);
  --c-sidebar:      var(--primary);
  --c-sidebar-text: rgba(255,255,255,0.65);
  
  --shadow-md:      0 4px 16px rgba(30, 41, 59, 0.08);
  --shadow-card:    0 2px 8px rgba(30, 41, 59, 0.06);
  --radius:         16px;
  --radius-sm:      10px;
  --transition:     all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

/* SOVEREIGN V36: BAM ANIMATIONS */
@keyframes bam-pulse {
  0% { transform: scale(1); box-shadow: 0 0 0 0 rgba(32, 201, 151, 0.4); }
  50% { transform: scale(1.05); box-shadow: 0 0 0 15px rgba(32, 201, 151, 0); }
  100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(32, 201, 151, 0); }
}

@keyframes success-checkmark {
  0% { transform: scale(0); opacity: 0; }
  80% { transform: scale(1.2); opacity: 1; }
  100% { transform: scale(1); opacity: 1; }
}

[data-theme="dark"] {
  --bg-global:      #0F172A;       /* Deep Navy Slate */
  --card-bg:        #1E293B;       /* Elevated Surface */
  
  --text-main:      #F8FAFC;       /* Off-White Legibility */
  --text-muted:     #94A3B8;       /* Muted Slate Contrast */
  
  --glass-bg:       rgba(30, 41, 59, 0.7);
  --glass-border:   rgba(255, 255, 255, 0.08);

  --status-active:  #60A5FA;
  --status-alert:   #FB923C;
  --status-success: #34D399;
  --status-preview: #A78BFA;

  --on-accent:      #FFFFFF;
  --on-surface:     #F8FAFC;
  --shadow-md:      0 4px 16px rgba(0, 0, 0, 0.3);
  
  --c-text-2:       var(--text-muted);
  --c-surface-2:    rgba(255,255,255,0.03);
  --c-header:       #020D1D;
  --c-header-border: rgba(255,255,255,0.1);
  --c-sidebar:      #020D1D;
}

/* SOVEREIGN V36: GLASS UTILITIES */
.admin-modal {
  z-index: 9999 !important;
  background: rgba(0, 0, 0, 0.6) !important;
}

.glass-modal {
  background: rgba(255, 255, 255, 0.05) !important;
  backdrop-filter: blur(16px) saturate(180%) !important;
  -webkit-backdrop-filter: blur(16px) saturate(180%) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
}

.glass-modal h3 {
  color: #0F172A !important; /* Deep Slate - Razor Sharp */
  text-shadow: none;
  font-weight: 900;
}

.glass-modal p {
  color: #334155 !important; /* High Contrast Body */
  font-weight: 600;
  opacity: 1 !important;
}

[data-theme="dark"] .glass-modal h3 {
  color: #FFFFFF !important;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

[data-theme="dark"] .glass-modal p {
  color: rgba(255,255,255,0.7) !important;
}

.glass-modal {
  background: rgba(255, 255, 255, 0.85) !important; /* Solidified for Light Mode */
  backdrop-filter: blur(16px) saturate(120%) !important;
  -webkit-backdrop-filter: blur(16px) saturate(120%) !important;
  border: 1px solid rgba(0, 0, 0, 0.1) !important;
}

[data-theme="dark"] .glass-modal {
  background: rgba(30, 41, 59, 0.7) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
}

.sync-pulse {
  animation: bam-pulse 1.5s infinite ease-in-out;
}

.success-icon {
  animation: success-checkmark 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
}

/* Original styles continue... */

/* ── ANALYTIC GLASS DNA (Hybrid Spec v11.0 - Dual-Track Contrast) ── */
.attendo-id-card, 
.glass-card, 
.analytic-card {
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
  border-radius: 20px;
  overflow: hidden !important;
  box-shadow: var(--shadow-md);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  color: var(--on-surface); /* Body Contrast follows Global Theme */
}

/* Intelligent Header Override: Decouples branding from surface contrast */
.id-card-header, 
.id-card-header *, 
.daily-card-header,
.daily-card-header * { 
  color: var(--on-accent) !important; 
}

/* Local Luminance Locking: Overrides global text when card is in mode */
:root .glass-card, :root .attendo-id-card { 
  --on-surface: #1E293B; 
  --glass-bg: rgba(255, 255, 255, 0.85); 
  --glass-border: rgba(30, 41, 59, 0.1);
}

[data-theme="dark"] .glass-card, [data-theme="dark"] .attendo-id-card { 
  --on-surface: #FFFFFF; 
  --glass-bg: rgba(255, 255, 255, 0.08); 
  --glass-border: rgba(255, 255, 255, 0.12);
}

.attendo-id-card:hover {
  transform: translateY(-5px);
  box-shadow: var(--shadow-lg);
}

.id-card-header {
  padding: 16px 20px;
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--status-active);
  color: white;
}

.id-card-body {
  padding: 24px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.id-card-name {
  font-size: 1.25rem;
  font-weight: 800;
  margin-bottom: 4px;
  color: var(--on-surface);
}

.id-card-role {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--status-active);
  margin-bottom: 16px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.id-card-meta {
  display: flex;
  gap: 8px;
  font-size: 0.65rem;
  font-weight: 700;
  color: var(--text-muted);
  text-transform: uppercase;
}

body,
html {
  margin: 0;
  padding: 0;
  width: 100%;
  min-height: 100vh;
  font-family: 'Outfit', sans-serif;
  background-color: var(--c-bg);
  background-attachment: fixed;
  color: var(--c-text);
  overflow-x: hidden;
  display: flex;
  flex-direction: column;
  padding-top: 64px; /* Space for fixed header */
  transition: background-color 0.3s ease, color 0.3s ease;
}

/* 1200px Centered Content Boundary */
.page-container {
  max-width: 1200px;
  /* Centered 1200px layout */
  margin: 0 auto;
  width: 100%;
  padding: 0 16px;
  /* px-4 equivalent */
  box-sizing: border-box;
}

@media (min-width: 1280px) {
  .page-container {
    padding: 0 20px;
  }

}

#student-auth-context {
  margin-bottom: 20px;
  text-align: center;
}

.custom-segmented-control[hidden] {
  display: none !important;
}

#student-auth-context h2 {
  margin: 0;
  color: var(--c-text, #172033);
  font-size: 1.35rem;
}

#student-auth-context p {
  margin: 6px 0 0;
  color: var(--c-muted, #64748b);
  font-size: 0.9rem;
}

body.student-auth-route #central-auth-card {
  max-width: 430px;
}

body.student-session-active #teacher-sidebar,
body.student-session-active #teacher-sidebar-overlay,
body.student-session-active .teacher-sidebar-toggle,
body.student-session-active .header-tabs {
  display: none !important;
}

body.student-session-active #app-container {
  width: 100%;
  max-width: none;
  margin-left: 0;
}

body.student-session-active #student-view {
  display: block;
}

header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 64px;
  background: var(--c-header);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-bottom: 1px solid var(--c-header-border);
  z-index: 1000;
  color: var(--c-text);
  box-shadow: var(--shadow-sm);
  transition: background 0.3s ease, border-color 0.3s ease;
}

.header-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 100%;
}

.header-zone {
  display: flex;
  align-items: center;
}

.zone-left {
  flex: 0 0 160px;
  /* Base width for logo area */
}

.zone-center {
  flex: 1;
  justify-content: center;
}

.zone-right {
  flex: 0 0 auto;
  gap: 16px;
  justify-content: flex-end;
}

/* Brand Logo Styling */
.brand-logo {
  display: flex;
  align-items: center;
}

.brand-logo-img {
  max-height: 44px;
  width: auto;
  display: block;
}

/* Segmented Tab Switcher (Center) */
.header-tabs {
  display: flex;
  background: var(--bg-global);
  padding: 4px;
  border-radius: 14px;
  border: 1px solid var(--glass-border);
}

.nav-tab {
  background: transparent;
  border: none;
  padding: 8px 24px;
  color: var(--text-muted);
  font-weight: 700;
  font-size: 0.85rem;
  border-radius: 10px;
  cursor: pointer;
  transition: var(--transition);
}

.nav-tab.active {
  background: var(--card-bg);
  color: var(--status-active);
  box-shadow: var(--shadow-sm);
}

/* Zone Right: Actions */
.header-icon-btn {
  background: transparent;
  border: none;
  color: var(--primary);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.3s ease;
}

.header-icon-btn:hover {
  background: rgba(0, 169, 165, 0.1);
  color: var(--action);
}

.header-icon-btn svg {
  stroke-width: 2.5px !important;
}

/* Header More Dropdown */
.header-more-container {
  position: relative;
  display: flex;
  align-items: center;
}

.header-dropdown-menu {
  position: absolute;
  top: calc(100% + 12px);
  right: 0;
  width: 220px;
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(0, 169, 165, 0.2);
  border-radius: 16px;
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.15);
  padding: 8px;
  display: none;
  flex-direction: column;
  z-index: 1100;
  transform: translateY(10px);
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  opacity: 0;
}

.header-dropdown-menu.active {
  display: flex;
  transform: translateY(0);
  opacity: 1;
}

.dropdown-header {
  padding: 12px 16px 8px;
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--text-light);
  letter-spacing: 0.05em;
}

.dropdown-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  background: transparent;
  border: none;
  border-radius: 10px;
  color: var(--primary);
  font-family: inherit;
  font-size: 0.95rem;
  font-weight: 600;
  text-align: left;
  cursor: pointer;
  transition: all 0.2s ease;
}

.dropdown-item:hover {
  background: rgba(0, 169, 165, 0.08);
  color: var(--action);
}

.dropdown-item svg {
  opacity: 0.7;
}

.dropdown-divider {
  height: 1px;
  background: rgba(0, 26, 51, 0.05);
  margin: 8px;
}

.dropdown-item.logout-item {
  color: var(--danger);
}

.dropdown-item.logout-item:hover {
  background: rgba(255, 65, 54, 0.08);
}

.user-avatar-mini {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: linear-gradient(135deg, #00A9A5 0%, #020D1D 100%);
  cursor: pointer;
  transition: transform 0.2s ease;
}

.user-avatar-mini:hover {
  transform: scale(1.05);
}

.header-icon-btn:hover {
  background: rgba(0, 26, 51, 0.08);
  color: var(--primary);
}

.user-action-group {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px;
  background: rgba(0, 26, 51, 0.04);
  border-radius: 40px;
  border: 1px solid rgba(0, 26, 51, 0.08);
}

.logout-btn-v2 {
  background: transparent;
  border: none;
  color: #001A33;
  /* Deep Navy */
  font-weight: 700;
  font-size: 0.85rem;
  padding: 8px;
  /* Square padding for centered icon */
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s;
}

.logout-btn-v2 .logout-text {
  display: none !important;
  /* Forces minimalist icon review */
}

.logout-btn-v2 .logout-icon {
  display: block;
}

.logout-btn-v2:hover {
  color: #ff4d4d;
}

/* Responsive Header Optimization */
@media (max-width: 768px) {
  .zone-left {
    flex: 0 0 auto;
  }

  .brand-text {
    display: none;
    /* Mobile: Hide "Attendo" text, keep SVG logo */
  }

  .zone-center {
    flex-grow: 1;
    /* Center zone fills space */
  }

  .nav-tab {
    padding: 8px 12px;
    /* Smaller tabs */
    font-size: 0.8rem;
  }

  .zone-right {
    flex-shrink: 0 !important;
    display: flex !important;
    gap: 8px !important;
    margin-left: 12px;
  }

  .logout-text {
    display: none;
    /* Mobile: Hide "Log Out" text */
  }

  .logout-btn-v2 .logout-icon {
    display: block;
    /* Mobile: Show icon instead */
    stroke: currentColor;
  }

  .logout-btn-v2 {
    padding: 8px;
  }
}

/* Glass Cards */
.glass-card {
  background: var(--glass-bg);
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
  border: 1px solid var(--glass-border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}

.dashboard-header-minimal {
  padding: 40px 0 20px;
  text-align: center;
}

.dashboard-header-minimal h1 {
  font-size: 2.2rem;
  font-weight: 800;
  letter-spacing: -1px;
}

.dashboard-header-minimal .subtitle {
  color: var(--text-muted);
  font-size: 1.1rem;
}

/* Overview Components */
.stats-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  /* Desktop: 3 columns */
  gap: 20px;
  margin-top: 20px;
}

@media (max-width: 768px) {
  .stats-grid {
    grid-template-columns: 1fr;
    /* Mobile: Stacked */
  }
}

.stat-card {
  min-height: 140px;
  /* Maintain aspect ratio */
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 24px;
}


.stat-icon {
  width: 52px;
  height: 52px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.05);
}

.progress-icon {
  color: #f1c40f;
}

.attendance-icon {
  color: var(--action);
}

.fees-icon {
  color: var(--danger);
}

.stat-info {
  display: flex;
  flex-direction: column;
}

.stat-label {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.stat-value {
  font-size: 1.8rem;
  font-weight: 800;
  margin-top: 4px;
}

.section-header-glass {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 24px;
}

.section-header-glass h2 {
  font-size: 1.4rem;
  font-weight: 700;
}

.glass-input {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--glass-border);
  padding: 12px 20px;
  border-radius: 12px;
  color: white;
  font-family: inherit;
  width: 300px;
  outline: none;
  transition: all 0.3s;
}

.glass-input:focus {
  background: rgba(255, 255, 255, 0.1);
  border-color: var(--action);
  box-shadow: 0 0 15px rgba(57, 204, 204, 0.2);
}

/* Manage Students Split Layout */
.manage-split-layout {
  display: grid;
  grid-template-columns: 320px 1fr;
  gap: 30px;
  align-items: start;
}

.manage-sidebar {
  padding: 24px;
  position: sticky;
  top: 100px;
}

.sidebar-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 20px;
}

.sidebar-header h3 {
  font-size: 1.1rem;
  font-weight: 700;
  color: white;
}

.icon-circle {
  width: 32px;
  height: 32px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
}

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

.form-group-glass label {
  display: block;
  font-size: 0.8rem;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 6px;
  letter-spacing: 0.3px;
}

.glass-input-small,
.glass-select-small {
  width: 100%;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--glass-border);
  padding: 12px 14px;
  /* Increased for breathing room */
  border-radius: 12px;
  color: white;
  font-family: inherit;
  outline: none;
  max-height: 48px;
  /* Directive: ensure no clipping */
  box-sizing: border-box;
}

.glass-action-btn {
  padding: 14px 20px;
  border-radius: 12px;
  border: none;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.3s;
  display: block;
  /* For centering */
}

.glass-action-btn.primary {
  background: var(--action);
  color: var(--primary);
  width: fit-content;
  /* Directive: w-fit */
  margin: 20px auto;
  /* Directive: mx-auto */
  padding-left: 40px;
  /* Directive: px-10 (40px) */
  padding-right: 40px;
}

.glass-action-btn.secondary {
  background: rgba(255, 255, 255, 0.1);
  color: white;
  width: 100%;
  /* Sidebars can keep full width or as needed */
}

.glass-action-btn:hover {
  transform: translateY(-2px);
  filter: brightness(1.1);
}

.sidebar-divider {
  height: 1px;
  background: var(--glass-border);
  margin: 24px 0;
}

/* Roster Main Area */
.roster-controls {
  display: flex;
  flex-direction: column;
  gap: 20px;
  margin-bottom: 24px;
}

.subject-filter-pills {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  transition: max-height 0.3s ease-out;
  overflow: hidden !important;
}

.subject-filter-pills.collapsed {
  max-height: 44px;
  /* Height of one row */
}

.filter-pill {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--glass-border);
  color: var(--text-muted);
  padding: 8px 18px;
  border-radius: 20px;
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s;
}

.filter-pill.active {
  background: white;
  color: var(--primary);
  border-color: white;
}

.all-records-text {
  color: #FFFFFF !important;
  text-shadow: 0 1px 2px rgba(0,0,0,0.2);
}

/* Force White Text on All Records unless the background is explicitly light grey/white */
.filter-pill.active .all-records-text {
  color: #FFFFFF !important; 
  text-shadow: 0 1px 2px rgba(0,0,0,0.2);
}

.roster-glass-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 20px;
  max-width: 100%;
  box-sizing: border-box;
}

/* Mobile: Single column for roster glass grid */
@media (max-width: 768px) {
  .roster-glass-grid {
    grid-template-columns: 1fr;
    gap: 16px;
    padding: 0 4px;
  }
}

.glass-input-full {
  width: 100%;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--glass-border);
  padding: 14px 20px;
  border-radius: 14px;
  color: white;
  outline: none;
}

/* Profile Tab & Smartphone Mockup */
.profile-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  margin-top: 20px;
}

.profile-card {
  padding: 30px;
}

.card-header-glass {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 24px;
  color: white;
}

.card-header-glass h3 {
  font-size: 1.25rem;
  font-weight: 700;
}

.smartphone-container {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.smartphone-frame {
  width: 300px;
  height: 600px;
  background: #000;
  border-radius: 40px;
  border: 8px solid #333;
  position: relative;
  display: flex;
  flex-direction: column;
  box-shadow: 0 40px 100px rgba(0, 0, 0, 0.5);
}

.speaker-bar {
  width: 60px;
  height: 4px;
  background: #222;
  border-radius: 10px;
  position: absolute;
  top: 18px;
  left: 50%;
  transform: translateX(-50%);
}

.smartphone-screen-content {
  flex: 1;
  margin: 40px 12px 60px;
  background: #fff;
  border-radius: 20px;
  overflow-y: auto;
  position: relative;
}

.home-button {
  width: 40px;
  height: 40px;
  border: 2px solid #222;
  border-radius: 50%;
  position: absolute;
  bottom: 10px;
  left: 50%;
  transform: translateX(-50%);
}

.preview-label {
  margin-top: 20px;
  font-weight: 700;
  color: var(--text-muted);
  text-transform: uppercase;
  font-size: 0.8rem;
  letter-spacing: 1px;
}

.mock-mobile-screen {
  padding: 15px;
  color: #333;
  /* Dark text inside the white phone screen */
}

.mt-24 {
  margin-top: 24px;
}

.grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
}

/* Daily Action Cards v2 */
.daily-card-v2 {
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  transition: transform 0.3s;
}

.daily-card-v2:hover {
  transform: translateY(-5px);
  border-color: rgba(255, 255, 255, 0.3);
}

.card-top {
  display: flex;
  align-items: center;
  gap: 12px;
  position: relative;
}

.card-avatar-circle {
  width: 44px;
  height: 44px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
}

.card-title-group {
  flex: 1;
}

.student-name-v2 {
  font-size: 1.05rem;
  font-weight: 700;
  margin: 0;
}

.subject-tag-v2 {
  font-size: 0.8rem;
  color: var(--text-muted);
  margin: 2px 0 0;
}

.minimal-link-btn {
  background: transparent;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  padding: 6px;
  border-radius: 50%;
  transition: all 0.2s;
}

.minimal-link-btn:hover {
  background: rgba(255, 255, 255, 0.1);
  color: white;
}

.card-schedule-row {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.85rem;
  color: var(--text-muted);
}

.card-progress-section {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: auto;
}

.progress-ring-mini {
  position: relative;
  width: 50px;
  height: 50px;
}

.circular-chart-v2 {
  display: block;
  width: 100%;
  height: 100%;
}

.circle-bg-v2 {
  fill: none;
  stroke: rgba(255, 255, 255, 0.05);
  stroke-width: 3.5;
}

.circle-v2 {
  fill: none;
  stroke-width: 3.5;
  stroke-linecap: round;
  transition: stroke-dasharray 0.6s ease;
}

.progress-text-v2 {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 0.7rem;
  font-weight: 800;
  color: white;
}

.card-actions-v2 {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: flex-end;
  min-width: 0;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  padding-inline: 8px;
  border-radius: 10px;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s;
  flex-shrink: 0;
  background: var(--action);
  color: var(--primary);
}

.action-btn-v2.wa-btn {
  background: #25D366;
  color: white;
}

.action-btn-v2:hover {
  transform: scale(1.1);
}

.action-btn-v2.disabled {
  opacity: 0.3;
  pointer-events: none;
}

/* Mobile: Stack action buttons and increase touch area */
@media (max-width: 480px) {
  .card-actions-v2 {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
  }

  .action-btn-v2 {
    width: 40px;
    height: 40px;
    min-width: 40px;
  }
}

.card-status-pill {
  font-size: 0.75rem;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: 20px;
  text-align: center;
}

.card-status-pill.success {
  background: rgba(46, 204, 64, 0.1);
  color: var(--success);
}

.no-data-v2 {
  color: var(--text-muted);
  text-align: center;
  grid-column: 1 / -1;
  padding: 40px;
}

.header-left {
  display: flex;
  align-items: center;
  gap: 12px;
}

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

/* Roster Card v2 & Toggles */
.roster-card-v2 {
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.roster-card-top {
  display: flex;
  align-items: center;
  gap: 12px;
  position: relative;
}

.roster-avatar {
  width: 40px;
  height: 40px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
}

.roster-id-group {
  flex: 1;
}

.roster-name {
  font-size: 1rem;
  font-weight: 700;
  margin: 0;
}

.roster-subtext {
  font-size: 0.8rem;
  color: var(--text-muted);
  margin: 0;
}

.fee-due-badge {
  background: #ff4757;
  color: white;
  font-size: 0.65rem;
  font-weight: 800;
  padding: 4px 8px;
  border-radius: 4px;
  letter-spacing: 0.5px;
}

.roster-card-stats {
  display: flex;
  justify-content: space-between;
  background: rgba(255, 255, 255, 0.03);
  padding: 12px;
  border-radius: 12px;
}

.card-mini-stat {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.card-mini-stat label {
  font-size: 0.65rem;
  font-weight: 700;
  color: var(--text-muted);
  text-transform: uppercase;
}

.card-mini-stat span {
  font-weight: 800;
  font-size: 0.9rem;
}

/* Glass Toggle Switch */
.toggle-switch-glass {
  width: 36px;
  height: 20px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 20px;
  position: relative;
  cursor: pointer;
  border: 1px solid var(--glass-border);
}

.switch-ball {
  width: 14px;
  height: 14px;
  background: white;
  border-radius: 50%;
  position: absolute;
  top: 2px;
  left: 2px;
  transition: all 0.3s cubic-bezier(0.18, 0.89, 0.35, 1.15);
}

.switch-ball.on {
  left: 18px;
  background: var(--action);
  box-shadow: 0 0 10px rgba(57, 204, 204, 0.5);
}

.roster-card-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: stretch;
  min-width: 0;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--glass-border);
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--text-muted);
  transition: all 0.2s;
  min-width: min-content;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: clamp(0.85rem, 1.2vw, 0.95rem);
  background: rgba(255, 255, 255, 0.1);
  color: white;
  border-color: rgba(255, 255, 255, 0.4);
}

.roster-action-btn.wa-v2 {
  color: #2ecc71;
}

.roster-action-btn.delete-v2 {
  color: #e74c3c;
}

/* Mobile: Wrap roster action buttons on small screens */
@media (max-width: 480px) {
  .roster-card-actions {
    flex-direction: column;
    gap: 8px;
  }

  .roster-action-btn {
    flex: 0 0 auto;
    width: 100%;
    min-width: 100%;
  }
}

.flex-fill {
  flex: 1;
}

.logo {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 700;
  font-size: 1.4rem;
  letter-spacing: 0.5px;
  white-space: nowrap;
  color: white;
  text-decoration: none;
}

.logo img {
  width: 28px;
  height: 28px;
  border-radius: 6px;
  object-fit: cover;
  flex-shrink: 0;
}

.header-actions {
  display: flex;
  gap: 12px;
  align-items: center;
  flex-wrap: wrap;
  justify-content: flex-start;
  min-width: 0;
}

.header-actions > *,
.header-right,
.header-left,
.roster-controls,
.subject-filter-pills,
.card-actions-v2,
.roster-card-actions {
  min-width: 0;
}

.roster-controls,
.subject-filter-pills {
  width: 100%;
  max-width: 100%;
}

.daily-card-v2,
.roster-card-v2,
.card,
.panel,
.modal-content {
  box-sizing: border-box;
}
.header-btn {
  font-size: 0.9rem;
}

.header-btn--danger {
  background-color: var(--danger);
  color: white;
}

.header-btn--danger:hover {
  background-color: #e0352b;
}

/* Mobile: prevent header button squash */
@media (max-width: 480px) {
  .header-btn {
    font-size: 12px;
    padding: 6px 10px;
  }

  .logo span {
    display: none;
    /* hide wordmark on very small screens, keep icon */
  }
}

.icon-toggle {
  background: transparent;
  border: none;
  font-size: 1.2rem;
  cursor: pointer;
  filter: grayscale(1);
  transition: transform 0.2s;
}

.icon-toggle:hover {
  transform: scale(1.2);
  filter: grayscale(0);
}

#app-container {
  max-width: 800px;
  margin: 0 auto;
  padding: 24px;
}

/* On desktop, allow the dashboard to breathe and use full width */
@media (min-width: 769px) {
  #app-container {
    max-width: 1280px;
    padding: 24px 40px;
  }
}

.view {
  display: flex;
  flex-direction: column;
  gap: 32px;
  animation: fadeIn 0.4s ease-out;
}

.section-hidden {
  display: none !important;
}

.dashboard-header h1 {
  font-size: 2rem;
  color: var(--primary);
  margin-bottom: 8px;
}

.subtitle {
  color: var(--text-light);
  font-size: 1.1rem;
}

/* Alerts */
.alerts-container {
  display: flex;
  gap: 16px;
  overflow-x: auto;
  padding-bottom: 8px;
  scroll-snap-type: x mandatory;
}

.alert-card {
  min-width: 250px;
  padding: 16px;
  border-radius: var(--radius);
  background: var(--card-bg);
  box-shadow: var(--shadow);
  border-left: 4px solid var(--primary);
  scroll-snap-align: center;
  flex-shrink: 0;
}

.alert-card.warning {
  border-left-color: var(--warning);
}

.alert-card.danger {
  border-left-color: var(--danger);
  background-color: #fff5f5;
}

.alert-card h3 {
  font-size: 1rem;
  margin-bottom: 4px;
}

.alert-card p {
  font-size: 0.9rem;
  color: var(--text-light);
  margin-bottom: 12px;
}

.alert-action-btn {
  background: var(--primary);
  color: white;
  border: none;
  padding: 6px 12px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 0.85rem;
}

.alert-card.danger .alert-action-btn {
  background: var(--danger);
}

/* ── Students Section: Sticky Header + Search ── */
.students-sticky-header {
  position: sticky;
  /* On mobile: stick just below the top edge */
  top: 0;
  z-index: 60;
  /* above cards(1), below header(100) & modals(200+) */
  background: var(--bg-color);
  padding-bottom: 16px;
  padding-top: 10px;
  /* Bleed prevention – fade edge so cards don't look cut off */
  box-shadow: 0 8px 16px var(--bg-color);
}

/* On desktop: account for the sticky nav header (~64px tall) */
@media (min-width: 769px) {
  .students-sticky-header {
    top: 64px;
  }
}

.students-section-heading {
  font-weight: 800;
  font-size: 1.6rem;
  color: var(--text-dark);
  margin-bottom: 14px;
  letter-spacing: -0.3px;
}

.students-search-bar {
  width: 100%;
  max-width: 100%;
  /* fill full column width on desktop */
  padding: 14px 18px;
  border-radius: 12px;
  border: 1.5px solid #ddd;
  font-family: 'Outfit', sans-serif;
  font-size: 1.05rem;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
  outline: none;
  transition: border-color 0.2s, box-shadow 0.2s;
  display: block;
  margin: 0 auto;
}

.students-search-bar:focus {
  border-color: var(--primary);
  box-shadow: 0 4px 12px rgba(0, 31, 63, 0.1);
}

/* Daily Cards */
.cards-list {
  display: flex;
  flex-direction: column;
  gap: 24px;
  margin-top: 4px;
}

/* 2-column grid for Daily Cards on desktop */
@media (min-width: 769px) {
  .cards-list {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
    align-items: start;
  }
}

.daily-card {
  background: var(--card-bg);
  border-radius: 16px;
  padding: 20px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.03);
  display: flex;
  justify-content: space-between;
  align-items: center;
  border: 1px solid rgba(0, 0, 0, 0.04);
  transition: transform 0.2s, box-shadow 0.2s;
}

.daily-card:hover {
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.07);
}

.daily-card:active {
  transform: scale(0.98);
}

.card-info h3 {
  font-size: 1.25rem;
  margin-bottom: 4px;
}

.card-info p {
  color: var(--text-light);
  font-size: 0.95rem;
  margin-bottom: 4px;
}

.badge {
  display: inline-block;
  background: #e0f7fa;
  color: #00838f;
  padding: 2px 8px;
  border-radius: 12px;
  font-size: 0.8rem;
  font-weight: 600;
}

.mark-done-btn {
  background: var(--action);
  color: var(--primary);
  font-weight: 700;
  font-size: 1.1rem;
  border: none;
  border-radius: 50%;
  width: 50px;
  height: 50px;
  min-width: 50px;
  min-height: 50px;
  aspect-ratio: 1 / 1;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 4px 10px rgba(57, 204, 204, 0.4);
  transition: all 0.2s;
}

.mark-done-btn:hover {
  transform: scale(1.05);
  box-shadow: 0 6px 14px rgba(57, 204, 204, 0.6);
}

.mark-done-btn:active {
  transform: scale(0.95);
}

.mark-done-btn:disabled {
  background: #ccc;
  color: #888;
  box-shadow: none;
  cursor: not-allowed;
}

/* Progress Rings */
.progress-container {
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
  margin-top: 16px;
}

.progress-item {
  background: var(--card-bg);
  padding: 20px;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  display: flex;
  flex-direction: column;
  align-items: center;
  flex: 1;
  min-width: 150px;
}

.circular-chart {
  display: block;
  margin: 0 auto;
  max-width: 100px;
  max-height: 100px;
}

.circle-bg {
  fill: none;
  stroke: #eee;
  stroke-width: 3.8;
}

.circle {
  fill: none;
  stroke-width: 2.8;
  stroke-linecap: round;
  transition: stroke-dasharray 1s ease-out;
}

.circular-chart.primary .circle {
  stroke: var(--action);
}

.circular-chart.warning .circle {
  stroke: var(--warning);
}

.circular-chart.danger .circle {
  stroke: var(--danger);
}

.percentage {
  fill: var(--primary);
  font-family: 'Outfit';
  font-weight: 700;
  font-size: 0.5em;
  text-anchor: middle;
}

.subject-name {
  margin-top: 12px;
  font-weight: 600;
  text-align: center;
}

/* Timeline */
.timeline {
  margin-top: 16px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding-left: 16px;
  border-left: 2px solid #e0e0e0;
}

.timeline-item {
  position: relative;
  background: var(--card-bg);
  padding: 16px;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}

.timeline-item::before {
  content: '';
  position: absolute;
  left: -25px;
  top: 20px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--primary);
}

.timeline-item.done::before {
  background: var(--success);
}

.timeline-item.missed::before {
  background: var(--danger);
}

.timeline-item.postponed::before {
  background: var(--warning);
}

.timeline-date {
  font-size: 0.85rem;
  color: var(--text-light);
}

.timeline-title {
  font-weight: 600;
  margin: 4px 0;
}

.timeline-notes {
  font-size: 0.9rem;
  color: var(--text-light);
  font-style: italic;
}

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

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fadeOut {
  from {
    opacity: 1;
    transform: translateY(0);
  }

  to {
    opacity: 0;
    transform: translateY(-10px);
  }
}

/* Teacher Tabs */
.teacher-header-flex {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  flex-wrap: wrap;
  gap: 16px;
}

.teacher-tabs {
  display: flex;
  background: rgba(0, 31, 63, 0.05);
  border-radius: 8px;
  padding: 4px;
}

.tab-btn {
  background: transparent;
  border: none;
  padding: 8px 16px;
  border-radius: 6px;
  cursor: pointer;
  font-weight: 600;
  color: var(--text-light);
  transition: all 0.2s;
}

.tab-btn.active {
  background: white;
  color: var(--primary);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

.tab-pane {
  display: none;
  animation: fadeIn 0.4s ease-out;
}

.tab-pane.active-pane {
  display: block;
}

/* Settings Grid – Manage Students layout */
.settings-grid {
  display: flex;
  gap: 32px;
  margin-top: 24px;
  /* Allow children to self-govern their scroll position */
  align-items: start;
}

/* Left Sidebar – Sticky add/assign forms */
.settings-form-container {
  flex: 0 0 340px;
  /* fixed width, no shrink */
  max-width: 340px;
  background: var(--card-bg);
  padding: 24px;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  /* Sticky within the settings-grid row */
  position: sticky;
  top: 80px;
  /* below the app header */
  max-height: calc(100vh - 100px);
  overflow-y: auto;
  overflow-x: hidden;
  /* Hide the scrollbar visually while keeping it functional */
  scrollbar-width: thin;
  scrollbar-color: rgba(0, 0, 0, 0.08) transparent;
}

.settings-form-container::-webkit-scrollbar {
  width: 4px;
}

.settings-form-container::-webkit-scrollbar-track {
  background: transparent;
}

.settings-form-container::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.1);
  border-radius: 4px;
}

/* Right Panel – Student roster (scrolls with page) */
.settings-preview-container {
  flex: 1;
  min-width: 0;
  /* prevent flex overflow */
  background: rgba(0, 0, 0, 0.02);
  padding: 24px;
  border-radius: var(--radius);
  display: flex;
  flex-direction: column;
}

.preview-box {
  background: white;
  margin-top: 16px;
  border-radius: 24px;
  border: 8px solid #333;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
  overflow: hidden;
  height: 500px;
  position: relative;
}

.mock-mobile-screen {
  overflow-y: auto;
  height: 100%;
  padding: 16px;
}

/* Forms */
.form-group {
  margin-top: 16px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.form-group label {
  font-weight: 600;
  font-size: 0.95rem;
}

.form-group input,
.form-group select {
  padding: 10px 12px;
  border: 1px solid #ddd;
  border-radius: 6px;
  font-size: 1rem;
}

.form-group input:focus,
.form-group select:focus {
  outline: none;
  border-color: var(--primary);
}

.form-group small {
  color: var(--text-light);
}

.save-settings-btn {
  margin-top: 24px;
  width: 100%;
  background: var(--primary);
  color: white;
  border: none;
  padding: 12px;
  border-radius: 6px;
  font-size: 1.1rem;
  font-weight: 600;
  cursor: pointer;
  transition: opacity 0.2s;
}

.save-settings-btn:hover {
  opacity: 0.9;
}

/* Student Branding */
.custom-header-branding {
  text-align: center;
  padding-bottom: 8px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}

.custom-header-logo {
  max-width: 120px;
  max-height: 80px;
  margin-bottom: 8px;
  border-radius: 8px;
  object-fit: contain;
}

.custom-header-name {
  font-size: 1.8rem;
  color: var(--primary);
  font-weight: 700;
}

.custom-header-tagline {
  color: var(--text-light);
  font-style: italic;
  font-size: 0.95rem;
}

.student-footer {
  text-align: center;
  margin-top: 32px;
  padding-top: 16px;
  border-top: 1px solid #ddd;
  color: var(--text-light);
  font-size: 0.85rem;
}

@media (max-width: 768px) {
  .logo {
    font-size: 1.2rem;
  }

  .alerts-container {
    padding-bottom: 12px;
  }

  .settings-grid {
    flex-direction: column;
    align-items: stretch;
    /* reset sticky on mobile */
  }

  .settings-form-container {
    flex: none;
    max-width: 100%;
    position: static;
    /* no sticky on mobile */
    max-height: none;
    overflow: visible;
  }

  /* Sticky header is top-of-viewport on mobile */
  .students-sticky-header {
    top: 0;
  }

  /* ── Homepage Mobile Fallback ── */
  .homepage-wrapper {
    padding: 0;
    align-items: stretch;
  }

  .homepage-container {
    flex-direction: column;
    border-radius: 0;
    max-width: 100%;
    box-shadow: none;
  }

  .hp-left {
    flex: none;
    padding: 32px 20px 24px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    z-index: 2;
  }

  .hp-logo {
    margin-bottom: 0;
    justify-content: center;
  }

  /* Hide the heavy features on mobile so it functions as a compact Top Header / Hero */
  .hp-features,
  .hp-alpha-badge {
    display: none;
  }

  .hp-right {
    padding: 30px 20px;
    align-items: flex-start;
    background: #f4f6f9;
    /* Blend into wrapper */
  }

  .auth-card-inner {
    border: none;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.06);
    background: white;
    margin: 0 auto;
    border-radius: 12px;
  }
}

/* ── Form Section Headers ── */
.form-section-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 4px;
}

.form-section-header h2 {
  margin: 0;
}

.form-section-icon {
  font-size: 1.3rem;
}

/* ── Optional Inline Enroll Toggle ── */
.optional-schedule-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 16px;
  padding: 10px 14px;
  background: rgba(57, 204, 204, 0.08);
  border: 1.5px dashed var(--action);
  border-radius: 8px;
  cursor: pointer;
  font-size: 0.92rem;
  font-weight: 600;
  color: #008f8f;
  transition: background 0.2s;
  user-select: none;
}

.optional-schedule-toggle:hover {
  background: rgba(57, 204, 204, 0.16);
}

.toggle-arrow {
  font-size: 1.1rem;
  transition: transform 0.25s;
}

.optional-schedule-toggle.open .toggle-arrow {
  transform: rotate(180deg);
}

/* ── Inline enroll fields panel ── */
.inline-enroll-fields {
  margin-top: 12px;
  padding: 16px;
  background: rgba(57, 204, 204, 0.05);
  border-radius: 8px;
  border: 1px solid rgba(57, 204, 204, 0.25);
  animation: fadeIn 0.25s ease-out;
}

.inline-enroll-label {
  font-size: 0.8rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--action);
  margin-bottom: 4px;
}

/* ── Schedule row inside daily card ── */
.schedule-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 6px 0;
  flex-wrap: wrap;
}

.schedule-pill {
  font-size: 0.83rem;
  color: var(--text-light);
  background: #f0f0f0;
  padding: 3px 10px;
  border-radius: 20px;
}

.change-schedule-btn {
  background: transparent;
  border: 1.5px solid var(--action);
  color: #008f8f;
  font-size: 0.78rem;
  font-weight: 600;
  padding: 3px 10px;
  border-radius: 20px;
  cursor: pointer;
  transition: all 0.18s;
  white-space: nowrap;
}

.change-schedule-btn:hover {
  background: var(--action);
  color: var(--primary);
}

/* ── Modal Card ── */
.modal-card {
  background: var(--card-bg);
  padding: 28px;
  border-radius: 16px;
  max-width: 92%;
  width: 440px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.2);
  animation: fadeIn 0.2s ease-out;
}

.modal-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}

.modal-close-btn {
  background: #f0f0f0;
  border: none;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  font-size: 0.9rem;
  cursor: pointer;
  color: var(--text-dark);
  transition: background 0.2s;
  flex-shrink: 0;
}

.modal-close-btn:hover {
  background: #e0e0e0;
}

/* ── Roster Cards ── */
.roster-grid {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

@media (min-width: 769px) {
  .roster-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
    align-items: stretch;
  }
}

.roster-card {
  background: white;
  border-radius: 16px;
  padding: 16px 20px;
  border: 1px solid #e8e8e8;
  position: relative;
  overflow: hidden;
  transition: box-shadow 0.2s;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

/* Redesigned 3-column Layout for roster-card */
.roster-card.new-layout {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
}

/* Left Action Stack */
.action-stack-left {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  min-width: 80px;
}

/* Center Info Box */
.info-center {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 6px;
  min-width: 0;
}

/* Right Admin Panel */
.admin-right {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 12px;
  min-width: 50px;
}

.roster-card:hover {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.07);
}

.roster-card-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 6px;
}

.roster-name {
  font-weight: 700;
  font-size: 1rem;
}

.roster-link {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--action);
  text-decoration: none;
  padding: 4px 10px;
  border-radius: 20px;
  border: 1.5px solid var(--action);
  transition: all 0.18s;
}

.roster-link:hover {
  background: var(--action);
  color: var(--primary);
}

.roster-schedules {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 6px;
}

.roster-schedule-chip {
  font-size: 0.78rem;
  background: #e0f7fa;
  color: #00838f;
  padding: 2px 10px;
  border-radius: 12px;
  font-weight: 600;
}

.roster-magic-url {
  font-size: 0.78rem;
  color: var(--text-light);
  word-break: break-all;
}

/* ── Toast Notification ── */
#attendo-toast {
  position: fixed;
  bottom: 32px;
  left: 50%;
  transform: translateX(-50%) translateY(20px);
  background: var(--primary);
  color: white;
  padding: 12px 24px;
  border-radius: 30px;
  font-size: 0.95rem;
  font-weight: 600;
  box-shadow: 0 8px 24px rgba(0, 31, 63, 0.25);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s, transform 0.3s;
  z-index: 99999;
  white-space: nowrap;
}

#attendo-toast.toast-show {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* ── Multi-day Schedule Row Picker ── */
.schedule-rows-container {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 10px;
}

.schedule-row-entry {
  background: rgba(57, 204, 204, 0.04);
  border: 1px solid rgba(57, 204, 204, 0.2);
  border-radius: 8px;
  padding: 10px 12px 4px;
  animation: fadeIn 0.2s ease-out;
}

.schedule-row-num {
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  color: #008f8f;
  margin-bottom: 2px;
}

.schedule-row-entry .form-group select,
.schedule-row-entry .form-group input[type="time"] {
  width: 100%;
}

/* ── Remove Student Button ── */
.remove-student-btn {
  background: transparent;
  border: 1.5px solid #ffcdd2;
  color: #c62828;
  font-size: 0.78rem;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: 20px;
  cursor: pointer;
  transition: all 0.18s;
  white-space: nowrap;
}

.remove-student-btn:hover {
  background: #c62828;
  border-color: #c62828;
  color: white;
}

/* ── Attendance Toggle Group ── */
.attendance-btn {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: 2px solid #ccc;
  background: white;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
  flex-shrink: 0;
  padding: 0;
  color: transparent;
}

/* Present Button */
.present-btn:hover {
  border-color: var(--success);
}

.present-btn.active {
  background: var(--success);
  border-color: var(--success);
}

.present-btn.active::after {
  content: '✓';
  color: white;
  font-size: 14px;
}

/* Absent Button */
.absent-btn {
  border-color: #ddd;
  color: #ddd;
}

.absent-btn:hover {
  border-color: var(--danger);
  color: var(--danger);
}

.absent-btn.active {
  background: #ffebee;
  border-color: var(--danger);
  color: var(--danger);
}

/* ── Fee Toggle Button — pinned badge at top-right of roster card ── */
.fee-toggle-btn {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 32px;
  height: 32px;
  border-radius: 8px;
  border: 1px solid #eee;
  background: #fdfdfd;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  transition: all 0.2s ease;
  z-index: 1;
}

.fee-toggle-btn:hover {
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

.fee-badge {
  position: absolute;
  top: -3px;
  right: -3px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  border: 2px solid white;
}

.fee-toggle-btn.paid .fee-badge {
  background: var(--success);
}

.fee-toggle-btn.unpaid .fee-badge {
  background: var(--danger);
}

/* Extra badge styling when paid */
.fee-toggle-btn.paid .fee-badge::after {
  content: '';
  display: block;
}

/* ── HOMEPAGE & AUTH (Logged Out View) ── */
.homepage-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  padding: 20px;
  background-color: #f4f6f9;
}

.homepage-container {
  display: flex;
  width: 100%;
  max-width: 800px;
  background: white;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.08);
}

/* LEFT COLUMN */
.hp-left {
  flex: 1;
  background-color: var(--primary);
  /* Deep blue */
  color: white;
  padding: 40px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.hp-logo {
  font-size: 1.8rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 50px;
}

.hp-logo img {
  max-height: 40px;
  width: auto;
  background: transparent;
  border-radius: 0;
  padding: 0;
}

.hp-features {
  display: flex;
  flex-direction: column;
  gap: 30px;
  align-items: center;
  flex: 1;
}

.hp-feature-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}

.hp-icon-box {
  display: flex;
  align-items: center;
  justify-content: center;
}

.hp-feature  .id-card-institute {
    font-size: 0.75rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    opacity: 0.8;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 150px;
    box-sizing: border-box;
  }

.hp-feature-card h4 {
  font-size: 0.85rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin: 0;
}

.hp-feature-card p {
  display: none;
  /* Only titles in the design */
}

.hp-alpha-badge {
  background: rgba(255, 255, 255, 0.15);
  padding: 6px 16px;
  border-radius: 6px;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  margin-top: 40px;
}

/* RIGHT COLUMN */
.hp-right {
  flex: 1;
  background: white;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 30px;
}

.auth-card-inner {
  width: 100%;
  max-width: 320px;
  border-radius: 8px;
  border: 1px solid #e0e0e0;
  overflow: hidden;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.03);
}

.auth-header {
  background: #1976D2;
  color: white;
  text-align: center;
  padding: 16px;
  font-size: 1.1rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.auth-body {
  padding: 24px;
}

.auth-welcome {
  text-align: center;
  margin-bottom: 24px;
}

.auth-welcome h3 {
  font-size: 1.3rem;
  color: var(--primary);
  margin-bottom: 6px;
}

.auth-welcome p {
  font-size: 0.85rem;
  color: var(--text-light);
  line-height: 1.4;
}

/* Auth Form Groups Specific */
.auth-body .form-group {
  margin-top: 16px;
}

.auth-body .form-group label {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  font-weight: 700;
  color: var(--primary);
}

.auth-body .form-group input {
  padding: 10px 12px;
  font-size: 0.95rem;
  border: 1px solid #d0d0d0;
  border-radius: 4px;
}

.auth-body .login-btn {
  background: #00A9A5;
  /* Vibrant Teal */
  color: white;
  border-radius: 4px;
  padding: 12px;
  font-size: 1rem;
  font-weight: 700;
  text-transform: uppercase;
  width: 100%;
  margin-top: 20px;
  cursor: pointer;
  border: none;
  transition: opacity 0.2s;
}

.auth-body .login-btn:hover {
  opacity: 0.9;
}

.forgot-password-link {
  display: block;
  text-align: center;
  font-size: 0.8rem;
  color: var(--text-light);
  margin-top: 12px;
  margin-bottom: 20px;
  text-decoration: none;
}

.forgot-password-link:hover {
  text-decoration: underline;
}

.auth-body .signup-btn {
  background: white;
  color: #1976D2;
  border: 2px solid #1976D2;
  border-radius: 4px;
  padding: 12px;
  font-size: 1rem;
  font-weight: 700;
  text-transform: uppercase;
  width: 100%;
  cursor: pointer;
  transition: all 0.2s;
}

.auth-body .signup-btn:hover {
  background: rgba(25, 118, 210, 0.05);
}

.auth-footer-text {
  text-align: center;
  font-size: 0.8rem;
  color: var(--text-dark);
  margin-top: 24px;
  line-height: 1.5;
}

.auth-footer-text strong {
  font-weight: 700;
}

/* ── ADVANCED AUTH UI (Dividers & Socials) ── */
.auth-divider {
  text-align: center;
  position: relative;
  margin: 24px 0;
}

.auth-divider::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  border-top: 1px solid #e0e0e0;
  z-index: 1;
}

.auth-divider span {
  position: relative;
  z-index: 2;
  background: white;
  padding: 0 12px;
  color: var(--text-light);
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.5px;
}

.email-auth-container {
  margin-bottom: 24px;
}

.email-toggle-btn {
  background: transparent;
  width: 100%;
  text-align: center;
  color: var(--text-dark);
  border: 1px solid #d0d0d0;
  border-radius: 4px;
  padding: 12px;
  font-size: 0.95rem;
  font-weight: 600;
  cursor: pointer;
  list-style: none;
  /* Hide default arrow */
  transition: background 0.2s;
}

.email-toggle-btn::-webkit-details-marker {
  display: none;
}

.email-toggle-btn:hover {
  background: #f8f9fa;
}

.email-auth-content {
  margin-top: 16px;
  padding: 16px;
  background: #f8f9fc;
  border: 1px solid #e8e8e8;
  border-radius: 8px;
  animation: fadeIn 0.3s ease-out;
}

.auth-social-buttons {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.social-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  background: white;
  border: 1px solid #d0d0d0;
  border-radius: 4px;
  padding: 10px;
  width: 100%;
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--text-dark);
  cursor: pointer;
  transition: all 0.2s;
}

.social-btn:hover {
  background: #f8f9fa;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

.social-btn img {
  width: 20px;
  height: 20px;
}

/* ── Searchable Student Dropdown ── */
.student-search-wrap {
  position: relative;
}

.student-search-input {
  width: 100%;
  padding: 10px 14px 10px 36px;
  border: 1.5px solid #ddd;
  border-radius: 8px;
  font-size: 1rem;
  font-family: 'Outfit', sans-serif;
  background: white url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23aaa' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'/%3E%3C/svg%3E") no-repeat 10px center;
  transition: border-color 0.2s, box-shadow 0.2s;
  cursor: text;
}

.student-search-input:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(0, 31, 63, 0.08);
}

.student-search-input.has-selection {
  border-color: var(--action);
  background-color: rgba(57, 204, 204, 0.04);
}

.student-search-dropdown {
  position: absolute;
  top: calc(100% + 5px);
  left: 0;
  right: 0;
  background: white;
  border: 1.5px solid #ddd;
  border-radius: 10px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.12);
  max-height: 230px;
  overflow-y: auto;
  z-index: 500;
  animation: fadeIn 0.15s ease-out;
}

.student-search-dropdown::-webkit-scrollbar {
  width: 5px;
}

.student-search-dropdown::-webkit-scrollbar-thumb {
  background: #ddd;
  border-radius: 10px;
}

.student-search-item {
  padding: 10px 14px;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 2px;
  border-bottom: 1px solid #f5f5f5;
  transition: background 0.15s;
}

.student-search-item:last-child {
  border-bottom: none;
}

.student-search-item:hover,
.student-search-item.highlighted {
  background: rgba(57, 204, 204, 0.08);
}

.student-search-item .ss-name {
  font-weight: 600;
  color: var(--primary);
  font-size: 0.95rem;
}

.student-search-item .ss-meta {
  font-size: 0.78rem;
  color: var(--text-light);
}

.student-search-item .ss-match {
  color: var(--action);
}

.student-search-no-result {
  padding: 16px;
  text-align: center;
  color: var(--text-light);
  font-size: 0.9rem;
}

/* ── Autofill Banner ── */
.autofill-banner {
  margin-top: 10px;
  padding: 12px 14px;
  background: linear-gradient(135deg, rgba(57, 204, 204, 0.1) 0%, rgba(0, 31, 63, 0.06) 100%);
  border: 1.5px solid rgba(57, 204, 204, 0.35);
  border-radius: 10px;
  display: flex;
  align-items: center;
  gap: 12px;
  animation: fadeIn 0.25s ease-out;
}

.autofill-icon {
  font-size: 1.2rem;
  flex-shrink: 0;
}

.autofill-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.autofill-info strong {
  font-size: 0.95rem;
  color: var(--primary);
}

.autofill-info span {
  font-size: 0.82rem;
  color: var(--text-light);
}

.autofill-clear-btn {
  background: transparent;
  border: 1.5px solid rgba(0, 31, 63, 0.15);
  color: var(--text-light);
  border-radius: 50%;
  width: 26px;
  height: 26px;
  font-size: 0.75rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.18s;
  flex-shrink: 0;
}

.autofill-clear-btn:hover {
  background: var(--danger);
  border-color: var(--danger);
  color: white;
}

/* ── Autofilled field glow ── */
.autofilled {
  border-color: var(--action) !important;
  background-color: rgba(57, 204, 204, 0.04) !important;
  transition: border-color 0.3s, background-color 0.3s;
}

.attendo-id-card {
  padding: 20px;
  border-radius: 16px;
  background: white;
  border: 1px solid #eee;
  box-shadow: 0 4px 20px rgba(0,0,0,0.05);
}

/* Minimal Row Grid for Roster Cards */
.roster-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 16px;
}

.roster-card.minimal-row {
  background: var(--card-bg);
  border: 1px solid rgba(0, 0, 0, 0.06);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.03);
  border-radius: 12px;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 100%;
}

.minimal-row-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
}

.minimal-left {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-right: 12px;
  gap: 6px;
}

.roster-attendance-toggle {
  display: flex;
  background: rgba(0, 0, 0, 0.04);
  padding: 4px;
  border-radius: 30px;
  gap: 4px;
}

.attendance-btn.minimal-btn {
  width: 44px;
  height: 44px;
}

.roster-today-badge {
  font-size: 0.65rem;
  color: #fff;
  background: var(--success);
  padding: 2px 6px;
  border-radius: 6px;
  font-weight: 700;
  letter-spacing: 0.5px;
}

.minimal-center {
  flex: 1;
  text-align: center;
}

.roster-student-name {
  font-weight: 800;
  font-size: 1.15rem;
  color: var(--text-dark);
}

.minimal-right {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-left: 12px;
}

.icon-btn {
  width: 44px;
  height: 44px;
  display: flex;
  justify-content: center;
  align-items: center;
  background: rgba(0, 0, 0, 0.03);
  border-radius: 50%;
  border: none;
  cursor: pointer;
  text-decoration: none;
  font-size: 1.1rem;
  color: var(--text);
  transition: background 0.2s;
}

.icon-btn:hover {
  background: rgba(0, 0, 0, 0.08);
}

.delete-btn:hover {
  background: #ffebee;
  color: var(--danger);
}

.minimal-row-middle {
  text-align: center;
  border-top: 1px solid rgba(0, 0, 0, 0.04);
  border-bottom: 1px solid rgba(0, 0, 0, 0.04);
  padding: 10px 0;
  min-height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 4px;
}

.roster-schedule-text {
  font-size: 0.85rem;
  color: var(--text-light);
  font-weight: 500;
}

.minimal-row-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.minimal-status-block {
  display: flex;
  align-items: center;
}

.attended-badge {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--primary);
  background: rgba(57, 204, 204, 0.1);
  border: 1px solid rgba(57, 204, 204, 0.25);
  border-radius: 6px;
  padding: 6px 12px;
  display: flex;
  align-items: center;
}

.minimal-payment-block {
  display: flex;
  align-items: center;
}

.fee-toggle-btn.minimal-fee-btn {
  position: static;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  font-size: 1.2rem;
}

/* ── Tooltip for the 'm' icon ── */
.m-tooltip-wrapper {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-left: 6px;
}

.m-tooltip {
  display: none;
  position: absolute;
  bottom: 130%;
  left: 50%;
  transform: translateX(-50%);
  background: white;
  color: var(--text-dark);
  padding: 8px 12px;
  border-radius: 8px;
  font-size: 0.8rem;
  font-weight: 500;
  white-space: nowrap;
  z-index: 100;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15);
  border: 1px solid rgba(0, 0, 0, 0.05);
}

.m-tooltip::after {
  content: '';
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: white transparent transparent transparent;
}

/* Hover support for Desktop */
.m-tooltip-wrapper:hover .m-tooltip {
  display: block !important;
}

/* ── SLIDER HOMEPAGE ── */
.slider-homepage {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  display: flex;
  font-family: inherit;
  overflow: hidden;
  background: white;
  /* Under-layer */
}

/* Hero Authority Branding (Top Center Signature) */
.hero-branding {
  position: absolute;
  top: 140px;
  /* Anchored for Designer-Grade Balance */
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: row;
  /* Horizontal Signature Signature */
  align-items: center;
  gap: 32px;
  /* Balanced via Golden Ratio */
  z-index: 1000;
  pointer-events: none;
  filter: drop-shadow(0 10px 30px rgba(0, 0, 0, 0.5));
  /* Deep Authority Depth */
}

.hero-icon {
  height: 80px;
  /* Golden Ratio Base */
  width: auto;
  object-fit: contain;
  background: transparent;
}

.hero-brand-name {
  font-size: 50px;
  /* Balanced via Golden Ratio Signature */
  font-weight: 700;
  color: #FFFFFF;
  /* High-Contrast Landing Pop */
  letter-spacing: -1.5px;
  line-height: 1;
  text-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
}

/* -- THE REVEALED LAYER (Underneath / Right side) -- */
.reveal-layer {
  position: absolute;
  top: 0;
  right: 0;
  width: 30%;
  /* The revealed part */
  min-width: 420px;
  /* Enforce min width so form is never too small */
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1;
  background: white;
}

.central-auth-card {
  width: 85%;
  max-width: 440px;
  border-radius: 20px;
  overflow: hidden;
  background: white;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.1);
  display: flex;
  flex-direction: column;
}

/* -- THE SLIDE LAYER -- */
.slide-layer {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(165deg, rgba(13, 37, 63, 0.85) 0%, rgba(2, 13, 29, 0.9) 100%);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  z-index: 100;
  /* Animate the width to reveal the background layer on the right */
  transition: width 0.8s cubic-bezier(0.16, 1, 0.3, 1);
  display: flex;
  box-shadow: 10px 0 30px rgba(0, 0, 0, 0.3);
}

/* When the login is revealed, the slider shrinks to leave room on the right */
.slider-homepage.login-revealed .slide-layer {
  width: calc(100% - 420px);
}

@media (min-width: 1400px) {
  .slider-homepage.login-revealed .slide-layer {
    width: 70%;
  }
}

.slide-inner {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  /* Center content in available width */
  overflow: hidden;
  position: relative;
  /* Anchor for absolute hero branding */
}

.slide-content-wrapper {
  max-width: 600px;
  padding: 40px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  color: white;
}

.feature-stack {
  display: flex;
  flex-direction: column;
  gap: 40px;
  margin-bottom: 60px;
  align-items: center;
}

.feature-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 12px;
}

.f-icon {
  display: flex;
  align-items: center;
  justify-content: center;
}

.feature-stack {
  display: flex;
  flex-direction: column;
  gap: 24px;
  margin-top: 40px;
  /* The 'Air' Rule: Gap between Hero Branding and Features */
}

.feature-item {
  display: flex;
  align-items: center;
  gap: 20px;
}

.f-icon {
  flex-shrink: 0;
}

.f-text {
  font-weight: 400;
  /* Elite Light weight for V2 Branding */
  letter-spacing: 0.5px;
  font-size: 16px;
  /* Optimized Authority size */
  opacity: 0.9;
}

.slide-actions-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

.slide-trigger-btn {
  background: #00A9A5;
  color: white;
  border: none;
  padding: 16px 32px;
  border-radius: 12px;
  font-size: 1.1rem;
  font-weight: 700;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 12px;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 4px 15px rgba(0, 169, 165, 0.3);
}

.slide-trigger-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.25);
}

.animated-arrow {
  display: inline-block;
  animation: bounceRight 1.5s infinite;
}

@keyframes bounceRight {

  0%,
  100% {
    transform: translateX(0);
  }

  50% {
    transform: translateX(6px);
  }
}

.slide-lip {
  width: 40px;
  flex-shrink: 0;
  background: linear-gradient(90deg, transparent, rgba(0, 0, 0, 0.25));
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.3s;
}

.slide-lip:hover {
  background: linear-gradient(90deg, transparent, rgba(0, 0, 0, 0.35));
}

.lip-handle {
  width: 4px;
  height: 48px;
  background: rgba(255, 255, 255, 0.6);
  border-radius: 4px;
}

/* Hide action container in inner layer when completely slid, lip is enough to go back */
.slider-homepage.login-revealed .slide-actions-container {
  display: none;
}

/* -- DUAL GATEWAY CARD INTERIOR -- */
.custom-segmented-control {
  display: flex;
  background: #f8f9fa;
  padding: 8px;
}

.custom-segmented-control .segment-btn {
  flex: 1;
  background: transparent;
  border: none;
  padding: 14px;
  font-size: 0.95rem;
  font-weight: 700;
  color: rgba(2, 13, 29, 0.4);
  /* Visible but Inactive (Navy 40%) */
  border-radius: 10px;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.custom-segmented-control .segment-btn.active {
  background: rgba(255, 255, 255, 0.4);
  /* Glass Style */
  backdrop-filter: blur(10px);
  border: 1px solid rgba(0, 210, 200, 0.5);
  /* Subtle Teal Glow */
  color: #020D1D;
  /* Active Navy Text */
  box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.2);
}

.card-body {
  position: relative;
  padding: 30px;
  min-height: 480px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.solid-reveal-bg {
  background: #f4f6f9;
}

.solid-card {
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.06);
}

.solid-body {
  background: white;
  padding: 40px;
}

.auth-form-solid {
  width: 100%;
}

.solid-floating-input {
  position: relative;
  margin-bottom: 20px;
}

.solid-floating-input input {
  width: 100%;
  padding: 16px;
  font-size: 1.05rem;
  font-family: inherit;
  background: transparent;
  border: 1px solid #d0d0d0;
  border-radius: 8px;
  outline: none;
  transition: border-color 0.2s;
  color: var(--text-dark);
}

.solid-floating-input input:focus {
  border-color: var(--primary);
  border-width: 2px;
  padding: 15px;
  /* adjust for border to prevent layout shift */
}

.solid-floating-input label {
  position: absolute;
  left: 16px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 0.95rem;
  color: var(--text-light);
  pointer-events: none;
  transition: all 0.2s ease;
  background: white;
  padding: 0 4px;
}

.solid-floating-input input:focus~label,
.solid-floating-input input:not(:placeholder-shown)~label {
  top: 0;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--primary);
}

.solid-login-btn {
  width: 100%;
  padding: 16px;
  margin-top: 8px;
  background: var(--primary);
  color: white;
  border: none;
  border-radius: 8px;
  font-size: 1.05rem;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.2s, transform 0.2s;
}

.solid-login-btn:hover {
  background: #002b5e;
  transform: translateY(-1px);
}

.solid-auth-divider {
  display: flex;
  align-items: center;
  text-align: center;
  color: var(--text-light);
  font-size: 0.85rem;
  font-weight: 600;
  margin: 28px 0;
}

.solid-auth-divider::before,
.solid-auth-divider::after {
  content: '';
  flex: 1;
  border-bottom: 1px solid #e0e0e0;
  margin: 0 12px;
}

.google-sign-in-btn {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  background: white;
  border: 1px solid #d0d0d0;
  border-radius: 8px;
  padding: 14px;
  font-weight: 600;
  font-size: 1.05rem;
  color: var(--text-dark);
  cursor: pointer;
  transition: background 0.2s;
}

.google-sign-in-btn:hover {
  background: #f8f9fa;
}

.google-sign-in-btn img {
  width: 24px;
  height: 24px;
}

.solid-text-link {
  background: none;
  border: none;
  color: var(--text-light);
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
  transition: color 0.2s;
}

.solid-text-link:hover {
  color: var(--primary);
  text-decoration: underline;
}

/* Mobile responsive */
@media (max-width: 900px) {
  .reveal-layer {
    width: 100%;
    min-width: 0;
  }

  .slider-homepage.login-revealed .slide-layer {
    width: 0%;
    /* slide away completely */
  }

  .slide-lip {
    width: 30px;
  }
}

/* ── ONBOARDING WRAPPER ── */
#onboarding-wrapper {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: #f4f6f9;
  /* very light-gray canvas */
  overflow-y: auto;
  z-index: 1000;
  font-family: inherit;
}

.onboarding-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 16px;
  height: 64px;
  background-color: var(--primary);
  color: white;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.15);
  position: sticky;
  top: 0;
  z-index: 1000;
}

.onb-logo {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 700;
  font-size: 1.4rem;
  letter-spacing: 0.5px;
  color: white;
}

.onb-logo img {
  width: 28px;
  height: 28px;
  border-radius: 6px;
}

.onb-outline-btn {
  background-color: white;
  color: var(--primary);
  border: none;
  padding: 8px 16px;
  border-radius: 8px;
  font-weight: 600;
  font-size: 0.9rem;
  cursor: pointer;
  transition: transform 0.2s, background-color 0.2s;
}

.onb-outline-btn:hover {
  transform: scale(1.03);
  background-color: #f0f0f0;
}

.onboarding-content {
  max-width: 600px;
  margin: 60px auto;
  padding: 0 20px;
}

.onb-headline {
  text-align: center;
  font-size: 2.2rem;
  font-weight: 800;
  color: var(--text-dark);
  margin-bottom: 40px;
  letter-spacing: -0.5px;
}

.onb-card {
  background: white;
  border-radius: 16px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.04);
  padding: 0;
  margin-bottom: 24px;
  overflow: hidden;
}

.onb-card-body {
  padding: 30px;
}

.pt-50 {
  padding-top: 50px;
}

.onb-card-title {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--primary);
}

.onb-title-icon {
  color: #39CCCC;
}

.identity-card .onb-card-banner {
  height: 80px;
  background: #3b4550;
  /* Solid dark bar */
  position: relative;
  display: flex;
  justify-content: center;
}

.avatar-uploader {
  position: absolute;
  bottom: -30px;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: white;
  border: 4px solid white;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: transform 0.2s;
}

.avatar-uploader:hover {
  transform: scale(1.05);
}

.avatar-add-icon {
  width: 20px;
  height: 20px;
  background: #001A33;
  /* Dark blue inner circle */
  border-radius: 50%;
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
}

.onb-input-group label {
  display: block;
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--text-dark);
  margin-bottom: 8px;
}

.onb-input-group input.onb-input {
  width: 100%;
  padding: 14px;
  border: 1px solid #d0d0d0;
  border-radius: 8px;
  font-size: 1rem;
  font-family: inherit;
  color: var(--text-dark);
  outline: none;
  background: white;
  transition: border-color 0.2s;
}

.onb-input-group input.onb-input:focus {
  border-color: var(--primary);
}

.onb-readonly-input-wrap {
  display: flex;
  gap: 10px;
}

.onb-input-readonly {
  background: #f8f9fa !important;
  color: var(--text-light) !important;
}

.onb-edit-btn {
  background: white;
  border: 1px solid #d0d0d0;
  border-radius: 8px;
  padding: 0 20px;
  font-weight: 600;
  color: var(--text-dark);
  cursor: pointer;
  transition: background 0.2s;
}

.onb-edit-btn:hover {
  background: #f0f0f0;
}

.pill-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.subject-pill {
  padding: 8px 18px;
  background: white;
  color: var(--text-dark);
  border: 1px solid #d0d0d0;
  border-radius: 20px;
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
}

.subject-pill:hover {
  background: #f4f6f9;
}

.subject-pill.active {
  background: #001A33;
  color: white;
  border-color: #001A33;
}

.handshake-status {
  margin-top: 10px;
  font-size: 0.9rem;
  padding: 10px 14px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  gap: 10px;
}

.handshake-status.searching {
  background: #fff8e1;
  color: #f57f17;
  border: 1px solid #ffe082;
}

.handshake-status.success {
  background: #e8f5e9;
  color: #2e7d32;
  border: 1px solid #a5d6a7;
}

.loader-spinner {
  width: 16px;
  height: 16px;
  border: 2px solid currentColor;
  border-bottom-color: transparent;
  border-radius: 50%;
  display: inline-block;
  animation: rotation 1s linear infinite;
}

@keyframes rotation {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

.onb-micro-copy {
  font-size: 0.85rem;
  color: var(--text-light);
  line-height: 1.4;
}

.mt-8 {
  margin-top: 8px;
}

.mt-20 {
  margin-top: 20px;
}

.onb-footer {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  margin-top: 40px;
  margin-bottom: 60px;
}

.onb-footer-icons {
  display: flex;
  gap: 20px;
  color: #39CCCC;
}

.onb-primary-btn {
  background: var(--primary);
  color: white;
  border: none;
  padding: 18px 40px;
  border-radius: 30px;
  font-weight: 800;
  font-size: 1.15rem;
  cursor: pointer;
  transition: transform 0.2s, box-shadow 0.2s;
  box-shadow: 0 8px 24px rgba(0, 26, 51, 0.2);
  width: 100%;
}

.onb-primary-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 30px rgba(0, 26, 51, 0.3);
}

/* ----------------------------------------
   Elite Alert & Notification System
   ---------------------------------------- */
.alerts-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 20px;
  margin-top: 24px;
}

.alert-card-elite {
  background: var(--glass-bg);
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
  border: 1px solid var(--glass-border);
  border-left: 5px solid transparent;
  border-radius: 16px;
  padding: 20px;
  box-shadow: 0 8px 32px var(--c-shadow, rgba(2, 13, 29, 0.05));
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.3s ease, background 0.3s ease;
  animation: slideInFade 0.5s ease forwards;
  position: relative;
  overflow: hidden;
}

.alert-card-elite:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 40px rgba(2, 13, 29, 0.1);
}

@keyframes slideInFade {
  from {
    opacity: 0;
    transform: translateY(10px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Semantic Glow Accents */
.alert-elite-primary {
  border-left-color: var(--primary);
  background: linear-gradient(90deg, color-mix(in srgb, var(--primary) 5%, transparent) 0%, var(--c-surface, rgba(255, 255, 255, 0.4)) 100%);
}

.alert-elite-danger {
  border-left-color: #FF4D4D;
  background: linear-gradient(90deg, rgba(255, 77, 77, 0.05) 0%, var(--c-surface, rgba(255, 255, 255, 0.4)) 100%);
}

.alert-elite-warning {
  border-left-color: #FFB302;
  background: linear-gradient(90deg, rgba(255, 179, 2, 0.05) 0%, var(--c-surface, rgba(255, 255, 255, 0.4)) 100%);
}

/* TODAY'S SCHEDULE - Stronger Blue */
.today-card {
  border-left: 4px solid var(--glass-border); /* Vibrant but translucent */
  backdrop-filter: blur(var(--glass-blur)); 
  -webkit-backdrop-filter: blur(var(--glass-blur));
}

/* TOMORROW'S PREVIEW - The 'Greyish Blue' you identified */
.tomorrow-card {
  border-left: 4px solid var(--glass-border); /* Lower opacity, more grey-tinted */
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
}

.alert-card-elite h3 {
  margin: 0 0 8px 0;
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--c-text, #FFFFFF);
  display: flex;
  align-items: center;
  gap: 10px;
}

/* ── SENTIENT SYNC FOOTER ISOLATION ── */
.sentient-eye-sync-trigger {
  color: rgba(0, 0, 0, 0.75) !important; /* Fixed high-contrast for light card bodies */
  font-weight: 500;
  font-size: 0.85rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 8px;
  opacity: 0.8;
  transition: opacity 0.2s ease, transform 0.2s ease !important;
}

.sentient-eye-sync-trigger:hover {
  opacity: 1;
  transform: translateX(4px);
}

.sentient-eye-sync-trigger span {
  color: inherit !important;
}

/* Only flip to white if the parent has a specific dark-theme override or is an alert card */
.alert-card-elite .sentient-eye-sync-trigger,
.dark-theme-card .sentient-eye-sync-trigger,
.alert-card-elite .audit-badge-mini,
.dark-theme-card .audit-badge-mini {
  color: var(--on-surface) !important;
}

/* ── UNIVERSAL CONTRAST SAFEGUARD ── */
.alert-card-elite, 
.alert-card-elite h3, 
.alert-card-elite p,
.alert-card-elite strong {
  color: var(--on-surface) !important;
}

.audit-badge-mini {
  background: rgba(0, 169, 165, 0.1) !important;
  color: #00A9A5 !important;
  border: 1px solid rgba(0, 169, 165, 0.3) !important;
  font-family: 'Outfit', sans-serif;
  font-weight: 800;
  padding: 0 6px;
  border-radius: 4px;
  font-size: 0.7rem;
  text-transform: uppercase;
  cursor: help;
  transition: all 0.2s ease;
}

.audit-badge-mini:hover {
  background: #00A9A5 !important;
  color: #FFFFFF !important;
}

.alert-card-elite p {
  margin: 0;
  font-size: 1rem;
  line-height: 1.6;
  color: var(--c-muted, rgba(255, 255, 255, 0.85));
}

.alert-action-btn-elite {
  margin-top: 20px;
  width: 100%;
  padding: 12px;
  border-radius: 12px;
  border: 1px solid color-mix(in srgb, var(--c-teal, #00A9A5) 40%, transparent);
  background: color-mix(in srgb, var(--c-teal, #00A9A5) 20%, transparent);
  color: var(--c-teal, #00D2D2);
  font-family: 'Outfit', sans-serif;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s ease;
}

.alert-action-btn-elite:hover {
  background: var(--c-teal, var(--primary));
  color: white;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px color-mix(in srgb, var(--c-teal, var(--primary)) 30%, transparent);
}

.alert-dismiss-btn {
  position: absolute;
  top: 12px;
  right: 12px;
  background: transparent;
  border: none;
  font-size: 18px;
  color: var(--c-muted, #CBD5E0);
  cursor: pointer;
  transition: color 0.2s ease;
}

.alert-dismiss-btn:hover {
  color: var(--c-text, #718096);
}

/* Agenda List inside Alerts */
.elite-agenda-item {
  display: flex;
  justify-content: space-between;
  padding: 10px 0;
  border-bottom: 1px solid var(--glass-border);
  /* Luminous divider */
}

.elite-agenda-item:last-child {
  border-bottom: none;
}

.elite-time {
  color: var(--c-teal, #00D2D2);
  font-weight: 800;
  font-size: 1.1rem;
  letter-spacing: 0.5px;
}

.elite-student-name {
  font-weight: 600;
  color: var(--on-surface);
  font-size: 1.1rem;
}

.elite-subject-meta {
  color: var(--on-surface);
  opacity: 0.6;
  font-weight: 400;
  font-size: 0.9rem;
}

/* ----------------------------------------
   Standardized Header & Search Layout
   ---------------------------------------- */
.section-header-glass {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 24px;
  /* Balanced Gap */
  width: 100%;
}

.section-header-glass h2 {
  margin: 0;
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--c-text, #FFFFFF);
}

.search-wrap-glass.compact {
  max-width: 320px;
  /* Elegant Compact Size */
  flex: 1;
  display: flex;
  justify-content: flex-end;
}

.middle-header-row {
  margin-top: 40px;
  /* The 'Gap' Rule for professional separation */
  margin-bottom: 20px;
}

.audit-badge-mini {
  color: var(--c-teal, #00D2D2);
  font-size: 0.85rem;
  font-weight: 900;
  margin-left: 6px;
  background: color-mix(in srgb, var(--c-teal, #00D2D2) 10%, transparent);
  padding: 0 5px;
  border-radius: 4px;
  cursor: help;
  vertical-align: middle;
  border: 1px solid color-mix(in srgb, var(--c-teal, #00D2D2) 25%, transparent);
}

/* ----------------------------------------
   Manual Session Trip-Meter
   ---------------------------------------- */
.session-adjust-wrap {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 4px;
}

.adjust-btn-elite {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 1px solid var(--c-border, rgba(255, 255, 255, 0.2));
  background: var(--c-surface-2, rgba(255, 255, 255, 0.05));
  color: var(--c-teal, var(--action));
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
  font-weight: 800;
  cursor: pointer;
  transition: all 0.2s;
  padding: 0;
  line-height: 1;
}

.adjust-btn-elite:hover {
  background: color-mix(in srgb, var(--c-teal, #00A9A5) 20%, transparent);
  border-color: var(--c-teal, var(--action));
  transform: scale(1.1);
  box-shadow: 0 0 10px color-mix(in srgb, var(--c-teal, #00A9A5) 30%, transparent);
}

.session-pill-elite {
  background: color-mix(in srgb, var(--c-teal, #00A9A5) 10%, transparent);
  color: var(--c-teal, #00D2D2);
  padding: 4px 12px;
  border-radius: 20px;
  font-weight: 700;
  font-size: 0.85rem;
  border: 1px solid color-mix(in srgb, var(--c-teal, #00A9A5) 20%, transparent);
  white-space: nowrap;
}



/* ----------------------------------------
   Global Discovery Engine UI
   ---------------------------------------- */
.discovery-overlay-glass {
  position: absolute;
  top: 100%;
  right: 0;
  width: 100%;
  max-height: 380px;
  background: rgba(2, 13, 29, 0.95);
  backdrop-filter: blur(25px);
  border: 1px solid rgba(0, 169, 165, 0.3);
  border-radius: 12px;
  margin-top: 8px;
  z-index: 2000;
  overflow-y: auto;
  display: none;
  box-shadow: 0 15px 45px rgba(0, 0, 0, 0.5), 0 0 20px rgba(0, 169, 165, 0.1);
}

.discovery-overlay-glass.active {
  display: block;
  animation: slideInDown 0.2s ease-out;
}

.discovery-section-label {
  padding: 12px 16px;
  font-size: 0.72rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: #00D2D2;
  background: rgba(0, 169, 165, 0.05);
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.discovery-item {
  padding: 12px 16px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
  transition: all 0.2s;
  border-bottom: 1px solid rgba(255, 255, 255, 0.03);
}

.discovery-item:hover {
  background: rgba(255, 255, 255, 0.06);
}

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

.discovery-icon {
  font-size: 1.2rem;
}

.discovery-name {
  font-weight: 600;
  color: white;
}

.discovery-branch {
  font-size: 0.75rem;
  background: rgba(0, 169, 165, 0.15);
  color: #00D2D2;
  padding: 2px 8px;
  border-radius: 4px;
  font-weight: 700;
}


/* ── Header positioning guarantee (safe, no colour override) ── */
/* IMPORTANT: Only targets the teacher's #app-header, NOT the generic <header> tag.
   The admin dashboard uses <header class="admin-topbar"> which must remain position:sticky
   inside the sidebar layout. The old 'header, #app-header' rule was the root cause of
   the admin topbar appearing as a floating overlay at the top of the viewport. */
#app-header {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  z-index: 9999 !important;
  margin: 0 !important;
  border-radius: 0 !important;
  /* Background comes from var(--c-header) defined in tokens */
  background: var(--c-header) !important;
  border-bottom: 1px solid var(--c-header-border) !important;
  color: var(--c-text) !important;
}

/* ═══════════════════════════════════════════════════════════
   SOVEREIGN STICKY HEADER — v2 Clean Fix (both dashboards)
   Rules:
   • NEVER touch html or body overflow — it breaks the layout cage
   • Desktop can use .admin-main scroll, mobile should use a unified
     page scroll instead of nested inner scrollbars
   • .admin-topbar stays sticky to the top of the viewport/container
   ═══════════════════════════════════════════════════════════ */

/* 1. Dashboard container fills the full viewport as a flex row */
.admin-v2-container,
.teacher-v2-container {
  display: flex !important;
  flex-direction: row !important;
  min-height: 100vh !important;
  width: 100% !important;
  overflow: visible !important; /* Never clip the container itself */
}

/* 2. Sidebar is fixed-height on desktop, but mobile uses page scroll instead */
.admin-sidebar {
  flex-shrink: 0 !important;
  height: 100vh !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
}

/* 3. Main content column should not create a nested scroll on mobile */
.admin-main {
  flex: 1 1 0 !important;
  display: flex !important;
  flex-direction: column !important;
  min-width: 0 !important;       /* Prevents flex blowout */
  min-height: 0 !important;
  height: auto !important;
  overflow-y: visible !important;
  overflow-x: hidden !important;
}

/* 4. Sticky topbar — glued to top of .admin-main scroll container */
.admin-topbar {
  position: sticky !important;
  top: 0 !important;
  z-index: 10000 !important;
  flex-shrink: 0 !important;
  width: 100% !important;
  background: var(--c-header, #ffffff) !important;
  backdrop-filter: blur(20px) saturate(180%) !important;
  -webkit-backdrop-filter: blur(20px) saturate(180%) !important;
  border-bottom: 1px solid var(--c-header-border, rgba(0,0,0,0.08)) !important;
  box-shadow: 0 2px 12px rgba(0,0,0,0.06) !important;
}

/* 5. Mobile override */
@media (max-width: 768px) {
  .admin-v2-container,
  .teacher-v2-container {
    flex-direction: row !important; /* Keep sidebar + main side by side on mobile too */
    height: 100dvh !important;      /* Dynamic viewport height (avoids address-bar issues) */
  }
  .admin-main {
    height: 100dvh !important;
  }
  .admin-topbar {
    position: sticky !important;
    top: 0 !important;
  }
}



/* --- Missing Icon Button Styles --- */
.card-edit-trigger,
.minimal-icon-btn,
.minimal-link-btn {
  background: transparent !important;
  border: none !important;
  color: var(--text-muted);
  cursor: pointer;
  padding: 4px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
  transition: all 0.2s ease;
  vertical-align: middle;
}

.card-edit-trigger:hover,
.minimal-icon-btn:hover,
.minimal-link-btn:hover {
  background: rgba(255, 255, 255, 0.1) !important;
  color: var(--text-light);
}

@media (max-width: 768px) {

  /* --- Header UI Fixes --- */
  .nav-header {
    background-color: #D1D5DB !important;
    /* Refined Silver Grey for Mobile */
    margin: 0 !important;
    border-radius: 0 !important;
    padding: 0 12px !important;
    width: 100vw !important;
    left: 0 !important;
  }

  .header-tabs {
    gap: 4px !important;
    padding: 4px !important;
    background: rgba(0, 0, 0, 0.05) !important;
  }

  .nav-tab {
    padding: 6px 12px !important;
    font-size: 0.8rem !important;
    color: #4B5563 !important;
    /* Dark Grey for contrast */
    font-weight: 700 !important;
  }

  .nav-tab.active {
    background: white !important;
    color: #1a1f2c !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1) !important;
  }

  .header-icon-btn {
    color: #1a1f2c !important;
  }

  /* --- Spacing & Gutter Fixes --- */
  .section-header-glass {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 16px !important;
    margin-bottom: 24px !important;
  }

/* --- Cockpit Controls & Modal Fixes --- */
.plus-minus-buttons {
  z-index: 9999 !important;
  position: relative;
  pointer-events: auto !important;
}

.attendance-ring {
  pointer-events: none;
}

.lifeline-card {
  box-sizing: border-box !important;
}

.modal-backdrop:not(.active),
.enrollment-overlay:not([style*="display: block"]):not([style*="display: flex"]) {
  pointer-events: none !important;
}

  .search-wrap-glass.compact {
    max-width: 100% !important;
    width: 100% !important;
    justify-content: flex-start !important;
  }

  .glass-input,
  .glass-input-small,
  .glass-input-full,
  .glass-select-small {
    width: 100% !important;
    padding: 14px 20px !important;
  }

  .middle-header-row {
    margin-top: 32px !important;
  }

  .roster-glass-grid {
    grid-template-columns: 1fr !important;
    /* Full width panels on mobile */
    gap: 20px !important;
  }

  .roster-controls {
    margin-bottom: 28px !important;
  }

  /* Branding & Profile Layout Responsive */
  .profile-layout,
  .grid-2 {
    grid-template-columns: 1fr !important;
    gap: 24px !important;
  }

  .preview-column {
    order: -1;
    /* Show preview on top on mobile if desired, or leave as is */
    display: flex;
    justify-content: center;
    width: 100% !important;
  }

  .smartphone-container {
    transform: scale(0.9);
    /* Slight scale down for small screens */
    margin-bottom: 20px;
  }

  .subject-filter-pills {
    gap: 8px !important;
  }

  /* --- Panel Visibility Fix --- */
  .manage-main {
    width: 100% !important;
    overflow-x: hidden !important;
  }

  .dashboard-section {
    padding: 0 4px !important;
    margin-bottom: 32px !important;
  }

  /* --- Landing Page Overlap Fixes --- */
  .slide-layer {
    padding-top: 20px !important;
  }

  .slide-inner {
    overflow-y: auto !important;
    align-items: flex-start !important;
    /* Allow scrolling from top instead of centering in middle */
  }

  .slide-content-wrapper {
    padding: 20px 10px !important;
  }

  .hero-branding {
    position: relative !important;
    top: 0 !important;
    left: 0 !important;
    transform: none !important;
    justify-content: center !important;
    align-self: center !important;
    margin-bottom: 30px !important;
    gap: 15px !important;
  }

  .hero-brand-name {
    font-size: 2.2rem !important;
  }

  .hero-icon {
    width: 45px !important;
    height: 45px !important;
  }

  .feature-stack {
    gap: 15px !important;
  }

  .slide-actions-container {
    margin-top: 20px !important;
    padding-bottom: 40px !important;
  }

  .manage-split-layout {
    grid-template-columns: 1fr !important;
    gap: 20px !important;
  }

  .manage-sidebar {
    position: static !important;
    padding: 20px 16px !important;
    margin-bottom: 30px !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  .glass-input,
  .glass-input-small,
  .glass-select,
  .glass-select-small,
  .search-input {
    -webkit-text-fill-color: #FFFFFF !important;
    color: #FFFFFF !important;
  }

  /* Autofill Visibility Fix - Scoped to App only to avoid breaking Login Page */
  #app-wrapper input:-webkit-autofill,
  #app-wrapper input:-webkit-autofill:hover,
  #app-wrapper input:-webkit-autofill:focus,
  #app-wrapper input:-webkit-autofill:active {
    -webkit-box-shadow: 0 0 0 30px #1a1f2c inset !important;
    -webkit-text-fill-color: #FFFFFF !important;
  }

  #auth-email,
  #auth-password,
  .auth-body input,
  .solid-floating-input input {
    -webkit-text-fill-color: #1a1f2c !important;
    color: #1a1f2c !important;
  }

  /* Keep autofill background white and text dark for Login Page */
  #auth-email:-webkit-autofill,
  #auth-password:-webkit-autofill,
  .auth-body input:-webkit-autofill,
  .solid-floating-input input:-webkit-autofill {
    -webkit-box-shadow: 0 0 0 30px #ffffff inset !important;
    -webkit-text-fill-color: #1a1f2c !important;
  }

  /* WhatsApp Icon Polish */
  .wa-btn svg {
    width: 22px !important;
    height: 22px !important;
    transform: scale(1.1);
  }

  .wa-btn {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: #25D366 !important;
    /* Proper WhatsApp Green */
  }

  #app-container,
  .main-content {
    padding-top: 90px !important;
    /* Slightly more room for 70px header */
  }

  .dashboard-section {
    padding: 0 4px !important;
    margin-bottom: 32px !important;
  }

  /* --- Student Portal Specific --- */
  .student-header {
    background: #D1D5DB !important;
    /* Unified Silver Grey */
    color: #1a1f2c !important;
    padding: 24px 20px !important;
    /* Increased horizontal padding */
    border-radius: 0 0 24px 24px !important;
    margin-bottom: 24px !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05) !important;
  }

  #student-view {
    padding-left: 16px !important;
    padding-right: 16px !important;
    box-sizing: border-box !important;
  }

  .student-header h1,
  .student-header h2 {
    color: #1a1f2c !important;
  }

  /* --- Premium Touches --- */
  .glass-card {
    border-color: rgba(255, 255, 255, 0.3) !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1) !important;
  }

  .roster-card-v2 {
    background: rgba(255, 255, 255, 0.08) !important;
    backdrop-filter: blur(10px) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: 16px !important;
  }

  input[type="text"] {
    font-size: 16px !important;
    /* Prevent iOS zoom */
  }

  /* File Upload Button Polish */
  input[type="file"]::file-selector-button {
    background: rgba(255, 255, 255, 0.9) !important;
    color: #1a1f2c !important;
    border: none !important;
    border-radius: 6px !important;
    padding: 6px 12px !important;
    margin-right: 10px !important;
    font-family: 'Outfit', sans-serif !important;
    font-weight: 700 !important;
    cursor: pointer !important;
  }
}

/* --- Modal Polish (Theme-Aware Text Visibility) --- */
.modal-card h2,
.modal-card h3 {
  color: var(--c-text) !important;
}

.modal-card input,
.modal-card select {
  -webkit-text-fill-color: var(--c-text) !important;
  color: var(--c-text) !important;
}

@keyframes slideInDown {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ============================================================
   ADMIN COMMAND CENTER STYLES
   Completely isolated — no overlap with teacher/student UI
   ============================================================ */

/* Loading */
.admin-loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  gap: 20px;
  color: rgba(255,255,255,0.6);
  font-family: 'Outfit', sans-serif;
}
.admin-spinner {
  width: 48px;
  height: 48px;
  border: 3px solid rgba(255,255,255,0.1);
  border-top-color: #7c3aed;
  border-radius: 50%;
  animation: adminSpin 0.8s linear infinite;
}
@keyframes adminSpin { to { transform: rotate(360deg); } }

/* ── Admin Login Screen ─────────────────────────────────── */
.admin-login-screen {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  background: radial-gradient(ellipse at 60% 40%, #1e1050 0%, #0a0f1e 70%);
  padding: 24px;
}
.admin-login-card {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 24px;
  padding: 48px 40px;
  width: 100%;
  max-width: 420px;
  text-align: center;
  backdrop-filter: blur(20px);
  box-shadow: 0 32px 80px rgba(0,0,0,0.5);
}
.admin-login-logo {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 20px;
}
.admin-logo-ring {
  font-size: 2.5rem;
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: linear-gradient(135deg, #7c3aed, #4f46e5);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0 40px rgba(124,58,237,0.4);
}
.admin-login-card h1 {
  font-size: 2rem;
  font-weight: 800;
  color: #ffffff;
  margin: 0 0 6px;
}
.admin-login-subtitle {
  color: rgba(255,255,255,0.5);
  font-size: 0.9rem;
  margin: 0 0 20px;
}
.admin-login-badge {
  display: inline-block;
  background: rgba(124,58,237,0.2);
  border: 1px solid rgba(124,58,237,0.4);
  color: #a78bfa;
  font-size: 0.78rem;
  font-weight: 700;
  padding: 6px 16px;
  border-radius: 100px;
  margin-bottom: 32px;
  letter-spacing: 0.5px;
}
.admin-login-form {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.admin-pass-input {
  width: 100%;
  padding: 14px 18px;
  background: rgba(255,255,255,0.07);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 12px;
  color: #ffffff;
  font-size: 1rem;
  font-family: 'Outfit', sans-serif;
  outline: none;
  box-sizing: border-box;
  transition: border-color 0.2s;
  text-align: center;
  letter-spacing: 2px;
}
.admin-pass-input:focus {
  border-color: #7c3aed;
  box-shadow: 0 0 0 3px rgba(124,58,237,0.2);
}
.admin-pass-input::placeholder {
  letter-spacing: 0;
  color: rgba(255,255,255,0.3);
}
.admin-login-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 14px 24px;
  background: linear-gradient(135deg, #7c3aed, #4f46e5);
  color: white;
  border: none;
  border-radius: 12px;
  font-size: 0.9rem;
  font-weight: 800;
  font-family: 'Outfit', sans-serif;
  letter-spacing: 0.5px;
  cursor: pointer;
  transition: all 0.2s;
  box-shadow: 0 8px 24px rgba(124,58,237,0.35);
}
.admin-login-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 32px rgba(124,58,237,0.5);
}
.admin-login-footer {
  margin-top: 24px;
  font-size: 0.75rem;
  color: rgba(255,255,255,0.2);
}

/* ── Admin Header ───────────────────────────────────────── */
.admin-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 32px;
  background: rgba(255,255,255,0.03);
  border-bottom: 1px solid rgba(255,255,255,0.07);
  position: sticky;
  top: 0;
  z-index: 100;
  backdrop-filter: blur(12px);
}
.admin-header-left {
  display: flex;
  align-items: center;
  gap: 14px;
}
.admin-header-logo {
  width: 40px;
  height: 40px;
  background: linear-gradient(135deg, #7c3aed, #4f46e5);
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
}
.admin-header-title {
  font-size: 1.1rem;
  font-weight: 800;
  color: #ffffff;
}
.admin-header-subtitle {
  font-size: 0.75rem;
  color: rgba(255,255,255,0.4);
}
.admin-header-right {
  display: flex;
  align-items: center;
  gap: 16px;
}
.admin-status-pill {
  display: flex;
  align-items: center;
  gap: 7px;
  background: rgba(16,185,129,0.1);
  border: 1px solid rgba(16,185,129,0.3);
  color: #10b981;
  font-size: 0.78rem;
  font-weight: 700;
  padding: 6px 14px;
  border-radius: 100px;
}
.admin-status-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #10b981;
  box-shadow: 0 0 8px #10b981;
  animation: adminPulse 2s infinite;
}
@keyframes adminPulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.4; }
}
.admin-logout-btn {
  background: rgba(255,255,255,0.07);
  border: 1px solid rgba(255,255,255,0.12);
  color: rgba(255,255,255,0.6);
  font-size: 0.82rem;
  font-weight: 600;
  font-family: 'Outfit', sans-serif;
  padding: 8px 16px;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.2s;
}
.admin-logout-btn:hover {
  background: rgba(255,255,255,0.12);
  color: #ffffff;
}

/* ── Admin Nav ──────────────────────────────────────────── */
.admin-nav {
  display: flex;
  gap: 4px;
  padding: 16px 32px;
  border-bottom: 1px solid rgba(255,255,255,0.06);
  overflow-x: auto;
}
.admin-tab {
  padding: 10px 22px;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 10px;
  color: rgba(255,255,255,0.45);
  font-size: 0.88rem;
  font-weight: 600;
  font-family: 'Outfit', sans-serif;
  cursor: pointer;
  transition: all 0.2s;
  white-space: nowrap;
}
.admin-tab:hover {
  background: rgba(255,255,255,0.06);
  color: rgba(255,255,255,0.8);
}
.admin-tab.active {
  background: rgba(124,58,237,0.15);
  border-color: rgba(124,58,237,0.4);
  color: #a78bfa;
}

/* ── Admin Content ──────────────────────────────────────── */
.admin-content {
  flex: 1;
  padding: 32px;
  /* Removed internal overflow-y: auto so the scrollbar goes to .admin-main at the screen edge */
  /* Removed max-width: 1200px to fix the 'shrunk' container */
  width: 100%;
  margin: 0;
  box-sizing: border-box;
  overflow-x: hidden;
}
.admin-section-title {
  font-size: 1.4rem;
  font-weight: 800;
  color: #ffffff;
  margin: 0 0 24px;
}
.admin-section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 24px;
  flex-wrap: wrap;
  gap: 12px;
}
.admin-section-header .admin-section-title { margin: 0; }

/* ── Stat Cards ─────────────────────────────────────────── */
.admin-stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 16px;
  margin-bottom: 28px;
}
.admin-stat-card {
  border-radius: 16px;
  padding: 24px 20px;
  border: 1px solid transparent;
  text-align: center;
  transition: transform 0.2s;
}
.admin-stat-card:hover { transform: translateY(-3px); }
.admin-stat-blue   { background: rgba(59,130,246,0.1); border-color: rgba(59,130,246,0.25); }
.admin-stat-green  { background: rgba(16,185,129,0.1); border-color: rgba(16,185,129,0.25); }
.admin-stat-purple { background: rgba(124,58,237,0.1); border-color: rgba(124,58,237,0.25); }
.admin-stat-orange { background: rgba(245,158,11,0.1); border-color: rgba(245,158,11,0.25); }
.admin-stat-icon { font-size: 1.8rem; margin-bottom: 10px; }
.admin-stat-value {
  font-size: 2.2rem;
  font-weight: 800;
  color: #ffffff;
  line-height: 1;
  margin-bottom: 6px;
}

/* ═══════════════════════════════════════════════════════════════
   UNIVERSAL MOBILE VIEWPORT RESETS (v2.1)
   Prevents horizontal overflow & clipping on all mobile screens
   ═══════════════════════════════════════════════════════════════ */

@media (max-width: 768px) {
  /* Global box-sizing reset */
  * {
    box-sizing: border-box;
  }

  html, body {
    width: 100%;
    max-width: 100vw;
    overflow-x: hidden;
  }

  /* Main containers */
  .admin-v2-container,
  .teacher-v2-container,
  .app-container,
  .main-content,
  .admin-content,
  .attendo-content-frame {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
    box-sizing: border-box;
  }

  /* Mobile page scroll: avoid nested content scrolling inside the teacher dashboard */
  .admin-v2-container,
  .teacher-v2-container,
  .admin-main,
  .admin-sidebar {
    height: auto !important;
    min-height: 100vh !important;
    overflow: visible !important;
  }

  /* Flex containers: prevent unwanted wrapping */
  .flex-container,
  .card-actions-v2,
  .roster-card-actions,
  .header-actions,
  .admin-header-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 4px;
    min-width: 0;
  }

  /* Grid containers: responsive collapse */
  .roster-glass-grid,
  .cards-list,
  .kpi-grid,
  .visuals-grid {
    grid-template-columns: 1fr !important;
    max-width: 100%;
  }

  /* Button bar: ensure buttons stay within viewport */
  button, .btn, [role="button"] {
    max-width: 100%;
    box-sizing: border-box;
  }

  /* Form inputs: full width on mobile */
  input, select, textarea {
    max-width: 100%;
    width: 100%;
  }

  /* Icon buttons: maintain touch size */
  .icon-btn,
  .action-btn-v2,
  .roster-action-btn {
    flex-shrink: 0;
    min-width: auto;
  }

  /* Cards and panels */
  .card, .panel, .modal-content {
    width: 100%;
    max-width: 100%;
    overflow: hidden;
  }

  /* Tables: allow horizontal scroll only */
  table, .table-wrapper {
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* Prevent text from bleeding */
  p, span, h1, h2, h3, h4, h5, h6 {
    max-width: 100%;
    word-break: break-word;
    overflow-wrap: break-word;
  }
}

/* Stricter constraints for extra-small phones (< 380px) */
@media (max-width: 380px) {
  .roster-card-actions {
    flex-direction: column;
  }

  .roster-action-btn {
    width: 100%;
    min-width: 100%;
  }

  .action-btn-v2 {
    width: 44px;
    height: 44px;
    min-width: 44px;
  }
}

/* Extra-small mobile tweaks (≤480px): fix button wrapping, dropdown clipping, and corner icons */
@media (max-width: 480px) {
  .roster-card-actions {
    flex-direction: column;
    gap: 8px;
  }

  .roster-action-btn {
    width: 100%;
    min-width: 100%;
    white-space: normal;
    word-break: break-word;
    padding: 10px 12px;
    box-sizing: border-box;
    text-align: center;
  }

  .action-btn-v2 {
    width: 44px;
    height: 44px;
    min-width: 44px;
  }

  /* Prevent dropdowns and header actions from touching the viewport edge */
  .roster-controls,
  .students-sticky-header,
  .header-right,
  .header-actions,
  .admin-header-actions {
    padding-right: 12px;
    padding-left: 12px;
    box-sizing: border-box;
  }

  /* Allow decorative corner icons to overflow visible on small screens */
  .roster-card,
  .roster-card-v2,
  .preview-box,
  .daily-card-v2 {
    overflow: visible;
  }

  .subject-filter-pills {
    padding-right: 8px;
    padding-left: 8px;
  }
}

.admin-stat-label {
  font-size: 0.78rem;
  color: rgba(255,255,255,0.45);
  font-weight: 600;
  letter-spacing: 0.3px;
}

/* ── Today's Pulse Card ─────────────────────────────────── */
.admin-pulse-card {
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 20px;
  padding: 28px;
  margin-bottom: 24px;
}
.admin-pulse-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 24px;
  flex-wrap: wrap;
  gap: 10px;
}
.admin-pulse-header h3 {
  margin: 0;
  font-size: 1rem;
  font-weight: 700;
  color: #ffffff;
}
.admin-date-badge {
  background: rgba(124,58,237,0.15);
  color: #a78bfa;
  font-size: 0.78rem;
  font-weight: 700;
  padding: 6px 14px;
  border-radius: 100px;
  border: 1px solid rgba(124,58,237,0.3);
}
.admin-pulse-stats {
  display: flex;
  align-items: center;
  gap: 0;
  flex-wrap: wrap;
}
.admin-pulse-item {
  flex: 1;
  text-align: center;
  padding: 0 20px;
  min-width: 120px;
}
.admin-pulse-number {
  display: block;
  font-size: 1.6rem;
  font-weight: 800;
  color: #ffffff;
  margin-bottom: 4px;
  word-break: break-word;
}
.admin-pulse-label {
  font-size: 0.75rem;
  color: rgba(255,255,255,0.4);
  font-weight: 600;
}
.admin-pulse-divider {
  width: 1px;
  height: 50px;
  background: rgba(255,255,255,0.08);
}

/* ── PRO Teaser ─────────────────────────────────────────── */
.admin-pro-teaser {
  display: flex;
  align-items: center;
  gap: 16px;
  background: linear-gradient(135deg, rgba(124,58,237,0.12), rgba(79,70,229,0.08));
  border: 1px solid rgba(124,58,237,0.3);
  border-radius: 16px;
  padding: 20px 24px;
  flex-wrap: wrap;
}
.admin-pro-badge {
  background: linear-gradient(135deg, #7c3aed, #4f46e5);
  color: white;
  font-size: 0.7rem;
  font-weight: 800;
  padding: 4px 10px;
  border-radius: 6px;
  letter-spacing: 1px;
  flex-shrink: 0;
}
.admin-pro-teaser strong { color: #ffffff; font-size: 0.95rem; }
.admin-pro-teaser p { margin: 4px 0 0; font-size: 0.82rem; color: rgba(255,255,255,0.5); }
.admin-pro-btn {
  margin-left: auto;
  background: rgba(124,58,237,0.2);
  border: 1px solid rgba(124,58,237,0.4);
  color: #a78bfa;
  font-size: 0.82rem;
  font-weight: 700;
  font-family: 'Outfit', sans-serif;
  padding: 8px 18px;
  border-radius: 8px;
  cursor: pointer;
  white-space: nowrap;
}

/* ── Teacher Cards ──────────────────────────────────────── */
.admin-search {
  padding: 10px 16px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 10px;
  color: #ffffff;
  font-size: 0.9rem;
  font-family: 'Outfit', sans-serif;
  outline: none;
  width: 240px;
  transition: border-color 0.2s;
}
.admin-search:focus { border-color: #7c3aed; }
.admin-search::placeholder { color: rgba(255,255,255,0.3); }

.admin-teacher-card {
  display: flex;
  align-items: center;
  gap: 16px;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: 16px;
  padding: 18px 24px;
  margin-bottom: 12px;
  transition: all 0.2s;
  flex-wrap: wrap;
}
.admin-teacher-card:hover {
  background: rgba(255,255,255,0.06);
  border-color: rgba(124,58,237,0.3);
}
.admin-teacher-avatar {
  width: 46px;
  height: 46px;
  border-radius: 12px;
  background: linear-gradient(135deg, #7c3aed, #4f46e5);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
  font-weight: 800;
  color: white;
  flex-shrink: 0;
}
.admin-teacher-info { flex: 1; min-width: 120px; }
.admin-teacher-name {
  font-size: 1rem;
  font-weight: 700;
  color: #ffffff;
}
.admin-teacher-email {
  font-size: 0.78rem;
  color: rgba(255,255,255,0.35);
  margin-top: 2px;
  word-break: break-all;
}
.admin-teacher-stats {
  display: flex;
  gap: 24px;
}
.admin-teacher-stat {
  text-align: center;
}
.admin-teacher-stat strong {
  display: block;
  font-size: 1.3rem;
  font-weight: 800;
  color: #ffffff;
}
.admin-teacher-stat span {
  font-size: 0.72rem;
  color: rgba(255,255,255,0.4);
  font-weight: 600;
}
.admin-teacher-tier {
  font-size: 0.75rem;
  font-weight: 700;
  padding: 6px 14px;
  border-radius: 100px;
}
.tier-free {
  background: rgba(255,255,255,0.06);
  color: rgba(255,255,255,0.5);
  border: 1px solid rgba(255,255,255,0.1);
}
.tier-pro {
  background: rgba(245,158,11,0.12);
  color: #fbbf24;
  border: 1px solid rgba(245,158,11,0.3);
}

/* ── Students Table ─────────────────────────────────────── */
.admin-students-table {
  background: rgba(255,255,255,0.02);
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: 16px;
  overflow-x: auto !important; /* UNLOCK HORIZONTAL SCROLL */
  -webkit-overflow-scrolling: touch;
}
.admin-table-header {
  display: grid;
  grid-template-columns: 2fr 2fr 1fr 1fr;
  padding: 14px 24px;
  font-size: 0.72rem;
  font-weight: 700;
  color: rgba(255,255,255,0.35);
  letter-spacing: 0.8px;
  text-transform: uppercase;
  border-bottom: 1px solid rgba(255,255,255,0.06);
}
.admin-student-row {
  display: grid;
  grid-template-columns: 2fr 2fr 1fr 1fr;
  align-items: center;
  padding: 14px 24px;
  border-bottom: 1px solid rgba(255,255,255,0.04);
  transition: background 0.15s;
  gap: 8px;
}
.admin-student-row:last-child { border-bottom: none; }
.admin-student-row:hover { background: rgba(255,255,255,0.04); }
.admin-student-avatar {
  display: none; /* hidden on table view */
}
.admin-student-name {
  font-size: 0.9rem;
  font-weight: 700;
  color: #ffffff;
}
.admin-student-meta {
  font-size: 0.75rem;
  color: rgba(255,255,255,0.4);
  margin-top: 2px;
}
.admin-student-sessions {
  text-align: center;
}
.admin-student-sessions strong {
  display: block;
  font-size: 1.1rem;
  font-weight: 800;
  color: #ffffff;
}
.admin-student-sessions span {
  font-size: 0.7rem;
  color: rgba(255,255,255,0.35);
}
.admin-student-contact {
  font-size: 0.78rem;
  color: rgba(255,255,255,0.45);
}

/* ── Analytics ──────────────────────────────────────────── */
.admin-analytics-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 20px;
  margin-bottom: 32px;
}
.admin-analytics-card {
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 20px;
  padding: 24px;
}
.admin-analytics-card h3 {
  margin: 0 0 20px;
  font-size: 0.95rem;
  font-weight: 700;
  color: rgba(255,255,255,0.7);
}
.admin-bar-chart {
  display: flex;
  align-items: flex-end;
  justify-content: space-around;
  height: 140px;
  gap: 6px;
}
.admin-bar-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  flex: 1;
  height: 100%;
  gap: 6px;
}
.admin-bar {
  width: 100%;
  max-width: 36px;
  background: linear-gradient(180deg, #7c3aed, #4f46e5);
  border-radius: 6px 6px 0 0;
  min-height: 4px;
  position: relative;
  transition: all 0.4s ease;
}
.admin-bar-tip {
  position: absolute;
  top: -20px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 0.7rem;
  font-weight: 700;
  color: rgba(255,255,255,0.5);
  white-space: nowrap;
}
.admin-bar-label {
  font-size: 0.7rem;
  color: rgba(255,255,255,0.3);
  font-weight: 600;
}
.admin-health-list { display: flex; flex-direction: column; gap: 14px; }
.admin-health-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 14px;
  border-bottom: 1px solid rgba(255,255,255,0.05);
  font-size: 0.85rem;
}
.admin-health-row:last-child { border-bottom: none; padding-bottom: 0; }
.admin-health-row span { color: rgba(255,255,255,0.5); }
.admin-health-row strong { color: #ffffff; font-weight: 800; }

/* ── PRO Features Locked ────────────────────────────────── */
.admin-pro-section {
  background: rgba(124,58,237,0.05);
  border: 1px solid rgba(124,58,237,0.2);
  border-radius: 20px;
  padding: 28px;
}
.admin-pro-section h3 {
  margin: 0 0 20px;
  font-size: 1rem;
  font-weight: 700;
  color: rgba(255,255,255,0.6);
}
.admin-pro-features-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 16px;
}
.admin-pro-feature-card {
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: 14px;
  padding: 20px;
  opacity: 0.6;
  filter: blur(0.3px);
  position: relative;
  overflow: hidden;
}
.admin-pf-icon { font-size: 1.6rem; margin-bottom: 10px; }
.admin-pf-title {
  font-size: 0.9rem;
  font-weight: 700;
  color: #ffffff;
  margin-bottom: 6px;
}
.admin-pf-desc {
  font-size: 0.78rem;
  color: rgba(255,255,255,0.4);
  line-height: 1.5;
}

/* ── Empty State ────────────────────────────────────────── */
.admin-empty {
  text-align: center;
  padding: 48px;
  color: rgba(255,255,255,0.25);
  font-size: 0.9rem;
  font-weight: 600;
}

/* ── Mobile Responsive ──────────────────────────────────── */
@media (max-width: 768px) {
  .admin-header { padding: 14px 16px; }
  .admin-header-subtitle { display: none; }
  .admin-nav { padding: 12px 16px; }
  .admin-content { padding: 20px 16px; }
  .admin-student-row {
    padding: 14px 16px;
  }
  .admin-pulse-divider { display: none; }
  .admin-pulse-stats { gap: 16px; }
  .admin-teacher-stats { gap: 12px; }
  .admin-pro-teaser { flex-direction: column; align-items: flex-start; }
  .admin-pro-btn { margin-left: 0; }
  .admin-login-card { padding: 36px 24px; }
  .admin-search { width: 160px; }

  /* Summary Grid Vertical Stacking */
  .admin-overview-grid,
  .overview-matrix-grid,
  .admin-analytics-grid {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }

  /* Shared sidebar/mobile interaction fix
     Applied in admin and global stylesheet for consistent overlay behavior */
  .offcanvas.show,
  .offcanvas-backdrop.show,
  .sidebar-menu.active,
  .sidebar-overlay.active {
    pointer-events: auto !important;
  }

  .sidebar,
  .sidebar-menu,
  .offcanvas-start {
    z-index: 1055 !important;
  }

  .offcanvas-backdrop,
  .sidebar-overlay {
    z-index: 1040 !important;
  }

  body,
  #main-content,
  .main-content,
  .container-fluid,
  .tab-content-area {
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    max-width: 100% !important;
    overflow-x: hidden !important;
  }

  .dashboard-cards,
  .service-matrix,
  .card-container,
  .row {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    margin: 0 !important;
    gap: 12px !important;
  }

  .dashboard-card,
  .card,
  .service-matrix > div,
  .integration-card {
    width: 100% !important;
    flex: 0 0 auto !important;
    margin-bottom: 0 !important;
  }
}
.selected-badge { background: var(--c-primary) !important; color: white !important; transform: scale(1.02); box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3); }


/* Sentient Eye v1.1 Ambiguity Card Styles */
.sentient-agent-card { background: #FFFFFF !important; color: #1E293B !important; }
.agent-ambiguity-container { background: #F8FAFC; padding: 20px; border-radius: 16px; border: 1px solid rgba(13, 148, 136, 0.2); box-shadow: 0 0 25px rgba(13, 148, 136, 0.1); margin-bottom: 24px; }
.agent-ambiguity-btn { background: #FFFFFF !important; border: 1px solid #E2E8F0 !important; color: #1E293B !important; padding: 14px 18px; border-radius: 12px; display: flex; justify-content: space-between; align-items: center; transition: all 0.2s ease; cursor: pointer; width: 100%; margin-bottom: 8px; font-family: inherit; }
.agent-ambiguity-btn:hover { background: #F0FDFA !important; border-color: #0D9488 !important; transform: translateY(-2px); box-shadow: 0 4px 12px rgba(13, 148, 136, 0.1); }


/* Disposable Dashboard - Physical Ledger Styles */
.disposable-dashboard-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.4); z-index: 10000; display: flex; align-items: flex-end; justify-content: flex-end; transition: opacity 0.5s ease; }
.disposable-ledger-sheet { width: 450px; height: 100%; background: #FDFCF0; box-shadow: -10px 0 30px rgba(0,0,0,0.1); border-left: 2px solid #E2E8F0; padding: 40px; display: flex; flex-direction: column; color: #1E293B; animation: ledgerSlideIn 0.6s cubic-bezier(0.16, 1, 0.3, 1); position: relative; }
@keyframes ledgerSlideIn { from { transform: translateX(100%); } to { transform: translateX(0); } }
.ledger-fade-out { opacity: 0; transform: translateX(50px); transition: all 0.5s ease; }
.ledger-header { border-bottom: 2px solid #1E293B; padding-bottom: 20px; margin-bottom: 30px; }
.ledger-category-tag { font-size: 0.65rem; font-weight: 900; text-transform: uppercase; letter-spacing: 2px; padding: 4px 10px; border-radius: 4px; margin-bottom: 10px; display: inline-block; }
.ink-teal { background: #CCFBF1; color: #0D9488; }
.ink-amber { background: #FEF3C7; color: #D97706; }
.ink-blue { background: #DBEAFE; color: #2563EB; }
.ledger-history-item { padding: 12px 0; border-bottom: 1px dashed #CBD5E1; font-size: 0.85rem; display: flex; justify-content: space-between; align-items: center; }
.ledger-contact-hub { display: flex; gap: 10px; margin-top: 15px; }
.ledger-contact-btn { width: 36px; height: 36px; border-radius: 50%; border: 1px solid #E2E8F0; display: flex; align-items: center; justify-content: center; background: white; cursor: pointer; transition: all 0.2s; }
.ledger-contact-btn:hover { border-color: #1E293B; background: #F1F5F9; }
.walla-confirm-btn { margin-top: auto; width: 100%; padding: 20px; background: #1E293B; color: white; border: none; font-weight: 800; font-size: 1.1rem; border-radius: 8px; cursor: pointer; transition: all 0.3s; }
.walla-confirm-btn:hover { background: #334155; transform: translateY(-2px); box-shadow: 0 10px 20px rgba(0,0,0,0.1); }

/* --- Sentient Eye Branding --- */
@keyframes sentient-eye-pulse {
  0% { filter: drop-shadow(0 0 1px var(--c-teal)); opacity: 0.8; }
  50% { filter: drop-shadow(0 0 6px var(--c-teal)); opacity: 1; }
  100% { filter: drop-shadow(0 0 1px var(--c-teal)); opacity: 0.8; }
}
.sentient-eye-icon {
  animation: sentient-eye-pulse 4s infinite ease-in-out;
  color: var(--c-teal);
}
.sentient-eye-icon circle:last-child {
  animation: sentient-pupil-glimmer 2s infinite ease-in-out;
}
@keyframes sentient-pupil-glimmer {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.2); }
}

/* ============================================================
   SENTIENT EYE: UNIFIED NEURAL COCKPIT SYSTEM (V36)
   ============================================================ */

.sentient-scanner-shell {
  position: relative;
  border-radius: 28px;
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  overflow: hidden;
  box-shadow: var(--shadow-xl);
  transition: all 0.5s cubic-bezier(0.2, 0, 0, 1);
}

/* Operation Mode Glows */
.sentient-scanner-shell.mode-ops {
  border-color: rgba(32, 201, 151, 0.3);
  box-shadow: 0 0 40px rgba(32, 201, 151, 0.1);
}
.sentient-scanner-shell.mode-finance {
  border-color: rgba(139, 92, 246, 0.3);
  box-shadow: 0 0 40px rgba(139, 92, 246, 0.1);
}

/* Premium Oracle Header */
.scanner-oracle-header {
  padding: 16px 24px;
  background: var(--c-surface-2);
  border-bottom: 1px solid var(--c-border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: relative;
  z-index: 10;
}

.oracle-branding {
  display: flex;
  align-items: center;
  gap: 16px;
}

.oracle-status-pill {
  font-size: 0.65rem;
  font-weight: 800;
  padding: 4px 10px;
  border-radius: 20px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  background: rgba(255,255,255,0.05);
  color: var(--c-muted);
}

.mode-ops .oracle-status-pill { color: #20c997; background: rgba(32, 201, 151, 0.08); }
.mode-finance .oracle-status-pill { color: #8b5cf6; background: rgba(139, 92, 246, 0.08); }

/* Neural HUD Overlay */
.scanner-neural-hud {
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  pointer-events: none;
  z-index: 5;
}

.hud-corner {
  position: absolute;
  width: 40px;
  height: 40px;
  border: 2px solid rgba(255,255,255,0.15);
  transition: all 0.3s ease;
}

.mode-ops .hud-corner { border-color: rgba(32, 201, 151, 0.4); }
.mode-finance .hud-corner { border-color: rgba(139, 92, 246, 0.4); }

.hud-tl { top: 20px; left: 20px; border-right: none; border-bottom: none; border-radius: 8px 0 0 0; }
.hud-tr { top: 20px; right: 20px; border-left: none; border-bottom: none; border-radius: 0 8px 0 0; }
.hud-bl { bottom: 20px; left: 20px; border-right: none; border-top: none; border-radius: 0 0 0 8px; }
.hud-br { bottom: 20px; right: 20px; border-left: none; border-top: none; border-radius: 0 0 8px 0; }

.scanning-line {
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, rgba(32, 201, 151, 0.5), transparent);
  box-shadow: 0 0 15px rgba(32, 201, 151, 0.5);
  z-index: 6;
  opacity: 0;
  transition: opacity 0.3s;
}

.is-scanning .scanning-line {
  opacity: 1;
  animation: scanning-sweep 2.5s infinite linear;
}

@keyframes scanning-sweep {
  0% { top: 0%; }
  100% { top: 100%; }
}

/* Neural Insight Cards (Post-Scan) */
.neural-insight-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 20px;
  padding: 24px;
}

.neural-insight-card {
  background: var(--c-surface-2);
  border: 1px solid var(--c-border);
  border-radius: 20px;
  padding: 20px;
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
}

.neural-insight-card:hover {
  transform: translateY(-4px);
  border-color: var(--c-brand);
  box-shadow: 0 12px 30px rgba(0,0,0,0.1);
}

.insight-card-type {
  font-size: 0.65rem;
  font-weight: 900;
  text-transform: uppercase;
  color: var(--c-muted);
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.insight-card-title {
  font-size: 1.1rem;
  font-weight: 800;
  color: var(--c-text);
  margin-bottom: 8px;
}

.insight-card-data {
  font-size: 0.85rem;
  color: var(--c-muted);
  line-height: 1.5;
  margin-bottom: 20px;
}

.insight-action-bar {
  display: flex;
  gap: 10px;
}

.btn-neural-execute {
  flex: 1;
  background: var(--c-brand);
  color: white;
  border: none;
  padding: 10px;
  border-radius: 12px;
  font-weight: 800;
  font-size: 0.8rem;
  cursor: pointer;
}

.btn-neural-pin {
  flex: 1;
  background: rgba(255,255,255,0.05);
  color: var(--c-text);
  border: 1px solid var(--c-border);
  padding: 10px;
  border-radius: 12px;
  font-weight: 800;
  font-size: 0.8rem;
  cursor: pointer;
}

/* Intent Switch Deck */
.scanner-intent-deck {
  display: flex;
  gap: 12px;
  padding: 12px 24px;
  background: var(--c-surface);
  border-top: 1px solid var(--c-border);
}

.intent-btn {
  padding: 8px 16px;
  border-radius: 12px;
  font-size: 0.75rem;
  font-weight: 800;
  cursor: pointer;
  border: 1px solid transparent;
  transition: all 0.3s;
  background: var(--c-surface-2);
  color: var(--c-muted);
}

/* --- Active Intent States --- */
.intent-btn.active {
  background: var(--c-brand);
  color: white;
}

.intent-btn[data-intent="financial"].active {
  background: #8b5cf6;
}

/* ============================================================
   ADMIN COMMAND CENTER STYLES
   Completely isolated — no overlap with teacher/student UI
   ============================================================ */

/* Loading */
.admin-loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  min-height: 200px;
  color: var(--text-muted);
}

@media (max-width: 768px) {
  .admin-main,
  .admin-content,
  .teacher-v2-container,
  .admin-v2-container,
  .tab-content-area,
  .visual-ws-container,
  .ws-viewport-container {
    min-width: 0 !important;
    max-width: 100% !important;
  }

  .admin-content,
  .tab-content-area {
    padding-left: 12px !important;
    padding-right: 12px !important;
  }

  .admin-overview-header {
    align-items: stretch !important;
    flex-direction: column !important;
    gap: 14px !important;
  }

  #selection-controls {
    width: 100%;
    flex-wrap: wrap;
  }

  #selection-controls > button {
    flex: 1 1 120px;
    justify-content: center;
    min-width: 0;
    white-space: normal;
    overflow-wrap: anywhere;
  }

  .admin-overview-header > div[style*="width: 1px"] {
    display: none !important;
  }

  .roster-controls > div:first-child {
    align-items: stretch !important;
    flex-direction: column !important;
    min-width: 0;
  }

  .unified-search-hub {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    flex-wrap: wrap;
    padding: 8px 12px !important;
  }

  .unified-search-hub > svg {
    flex: 0 0 16px;
  }

  .unified-search-hub #roster-search-input {
    flex: 1 1 calc(100% - 32px);
    width: auto !important;
    min-width: 0;
  }

  .unified-search-hub > div[style*="width: 1px"] {
    display: none !important;
  }

  #all-records-mount {
    flex: 1 1 100%;
    min-width: 0;
  }

  #all-records-mount .filter-pill {
    max-width: 100%;
    white-space: nowrap;
  }

  #subject-filter-container {
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    flex-wrap: nowrap !important;
    justify-content: flex-start;
    padding: 2px 0 8px;
    -webkit-overflow-scrolling: touch;
  }

  #subject-filter-container > * {
    flex: 0 0 auto;
  }

  #student.id-cards-grid,
  .id-cards-grid {
    min-width: 0;
    grid-template-columns: minmax(0, 1fr) !important;
  }

  #todays-schedule-detailed {
    grid-template-columns: minmax(0, 1fr) !important;
    min-width: 0;
    width: 100%;
    box-sizing: border-box;
  }

  #todays-schedule-detailed > .lifeline-card {
    width: 100%;
    min-width: 0;
    max-width: 100%;
    box-sizing: border-box;
  }

  #todays-schedule-detailed .lifeline-card > div,
  #todays-schedule-detailed .lifeline-card > div > div {
    min-width: 0;
  }

  .admin-table-container,
  .admin-students-table,
  .table-wrapper {
    display: block;
    width: 100%;
    max-width: 100%;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
  }

  .admin-table-container table,
  .admin-students-table table,
  .table-wrapper table {
    min-width: 600px;
  }

  .visual-ws-container .ws-floating-toolbar,
  .ws-viewport-container .ws-floating-toolbar {
    left: 12px !important;
    right: 12px !important;
    bottom: max(12px, env(safe-area-inset-bottom)) !important;
    width: auto !important;
    max-width: calc(100% - 24px) !important;
    transform: none !important;
    justify-content: flex-start;
    overflow-x: auto;
    overflow-y: hidden;
    flex-wrap: nowrap !important;
    padding: 8px;
    gap: 6px;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
  }

  .visual-ws-container .ws-floating-toolbar:hover,
  .ws-viewport-container .ws-floating-toolbar:hover {
    transform: none !important;
  }

  .visual-ws-container .ws-floating-toolbar > *,
  .ws-viewport-container .ws-floating-toolbar > * {
    flex: 0 0 auto;
  }

  .visual-ws-container .ws-tool-btn,
  .ws-viewport-container .ws-tool-btn {
    min-width: 44px;
    min-height: 44px;
    white-space: nowrap;
  }

  .visual-ws-container,
  .ws-viewport-container {
    width: 100%;
    overflow: hidden;
  }
}