/* ============================================
   LMS SaaS — Dashboard Layout
   ============================================ */

/* ---- LAYOUT ---- */
.app-layout {
  display: flex;
  min-height: 100vh;
}

/* ---- SIDEBAR ---- */
.sidebar {
  width: var(--sidebar-width);
  background: var(--color-sidebar-bg);
  border-right: 1px solid var(--color-sidebar-border);
  display: flex;
  flex-direction: column;
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  z-index: 100;
  transition: width var(--transition-base);
  overflow: hidden;
  color: var(--color-sidebar-text);
}

.sidebar-header {
  padding: var(--space-lg);
  border-bottom: 1px solid var(--color-sidebar-border);
  display: flex;
  align-items: center;
  gap: var(--space-md);
}

.sidebar-logo {
  width: 36px;
  height: 36px;
  background: linear-gradient(135deg, var(--color-primary), var(--color-accent));
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  color: white;
  font-size: var(--font-lg);
  flex-shrink: 0;
}

.sidebar-brand {
  font-weight: 700;
  font-size: var(--font-lg);
  color: var(--color-sidebar-active);
}

.sidebar-nav {
  flex: 1;
  overflow-y: auto;
  padding: var(--space-md) 0;
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.1) transparent;
}

.sidebar-nav::-webkit-scrollbar {
  width: 5px;
}

.sidebar-nav::-webkit-scrollbar-track {
  background: transparent;
}

.sidebar-nav::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.1);
  border-radius: var(--radius-full);
}

.sidebar-nav::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.25);
}

.sidebar-section-title {
  padding: var(--space-sm) var(--space-lg);
  font-size: var(--font-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--color-sidebar-text-muted);
  margin-top: var(--space-md);
}

.nav-item {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  padding: 10px var(--space-lg);
  color: var(--color-sidebar-text);
  font-size: var(--font-sm);
  font-weight: 500;
  cursor: pointer;
  transition: all var(--transition-fast);
  border-left: 3px solid transparent;
  text-decoration: none;
}

.nav-item:hover {
  background: var(--color-sidebar-hover);
  color: var(--color-sidebar-active);
}

.nav-item.active {
  background: var(--color-sidebar-hover);
  color: var(--color-sidebar-active);
  border-left-color: var(--color-accent);
  font-weight: 600;
}

.nav-item-icon {
  font-size: 1.2rem;
  width: 24px;
  text-align: center;
  flex-shrink: 0;
}

.nav-item-badge {
  margin-left: auto;
  background: var(--color-danger);
  color: white;
  font-size: 11px;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: var(--radius-full);
  min-width: 20px;
  text-align: center;
}

.sidebar-footer {
  padding: var(--space-md) var(--space-lg);
  border-top: 1px solid var(--color-sidebar-border);
  display: flex;
  align-items: center;
  gap: var(--space-md);
}

.sidebar-user-info {
  flex: 1;
  min-width: 0;
}

.sidebar-user-name {
  font-size: var(--font-sm);
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--color-sidebar-active);
}

.sidebar-user-role {
  font-size: var(--font-xs);
  color: var(--color-sidebar-text-muted);
}

/* ---- MAIN CONTENT ---- */
.main-content {
  flex: 1;
  margin-left: var(--sidebar-width);
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-width: 0;
  max-width: 100%;
}

.topbar {
  height: var(--topbar-height);
  background: var(--color-surface);
  border-bottom: 1px solid var(--color-border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 var(--space-xl);
  position: sticky;
  top: 0;
  z-index: 50;
  backdrop-filter: blur(12px);
}

.topbar-left {
  display: flex;
  align-items: center;
  gap: var(--space-md);
}

.topbar-title {
  font-size: var(--font-xl);
  font-weight: 700;
}

.topbar-right {
  display: flex;
  align-items: center;
  gap: var(--space-md);
}

.topbar-search {
  position: relative;
}

.topbar-search input {
  padding: 8px 16px 8px 36px;
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-full);
  color: var(--color-text);
  font-size: var(--font-sm);
  width: 240px;
  transition: all var(--transition-fast);
}

.topbar-search input:focus {
  width: 320px;
  border-color: var(--color-primary);
}

.topbar-search::before {
  content: '🔍';
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  font-size: var(--font-sm);
}

.notification-btn {
  position: relative;
  background: none;
  border: none;
  color: var(--color-text-secondary);
  font-size: 1.3rem;
  cursor: pointer;
  padding: 8px;
  border-radius: var(--radius-md);
  transition: all var(--transition-fast);
}

.notification-btn:hover {
  background: var(--color-surface-hover);
  color: var(--color-text);
}

.notification-dot {
  position: absolute;
  top: 4px;
  right: 4px;
  width: 10px;
  height: 10px;
  background: var(--color-danger);
  border-radius: 50%;
  border: 2px solid var(--color-surface);
}

.menu-toggle {
  display: none;
  background: none;
  border: none;
  color: var(--color-text);
  font-size: 1.5rem;
  cursor: pointer;
  padding: 4px;
}

/* ---- PAGE CONTENT ---- */
.page-content {
  padding: var(--space-xl);
  flex: 1;
  max-width: 1400px;
  width: 100%;
  margin: 0 auto;
}

.page-header {
  margin-bottom: var(--space-xl);
}

.page-title {
  font-size: var(--font-3xl);
  font-weight: 800;
  margin-bottom: var(--space-xs);
}

.page-subtitle {
  color: var(--color-text-muted);
  font-size: var(--font-md);
}

/* ---- STATS GRID ---- */
.stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--space-lg);
  margin-bottom: var(--space-xl);
}

.grid-5 {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: var(--space-md);
}

.notif-admin-grid {
  display: grid;
  grid-template-columns: 1fr 1.3fr;
  gap: 24px;
}

/* ---- AUTH PAGES ---- */
.auth-container {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, rgba(43, 58, 142, 0.2), rgba(25, 42, 61, 0.25)), url('/img/hero_background_hsoa_lms.webp') no-repeat center center;
  background-size: cover;
  padding: var(--space-lg);
}

.auth-card {
  background: rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: var(--radius-xl);
  padding: var(--space-2xl);
  width: 100%;
  max-width: 440px;
  animation: fadeIn 0.5s ease;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
  color: #ffffff;
}

.auth-card .form-label {
  color: rgba(255, 255, 255, 0.95) !important;
  font-weight: 700;
}

.auth-card .auth-title {
  color: #ffffff !important;
  font-weight: 800;
}

.auth-card .auth-subtitle {
  color: rgba(255, 255, 255, 0.7) !important;
  font-weight: 600;
}

.auth-card .auth-footer {
  color: rgba(255, 255, 255, 0.7) !important;
  font-weight: 600;
}

.auth-card .auth-footer a {
  color: #8bb4ff !important;
  font-weight: 700;
}

.auth-card .auth-divider {
  color: rgba(255, 255, 255, 0.5) !important;
  font-weight: 600;
}

.auth-card .auth-divider::before,
.auth-card .auth-divider::after {
  background: rgba(255, 255, 255, 0.2) !important;
}

.auth-card .form-input {
  background: rgba(255, 255, 255, 0.12) !important;
  border: 1px solid rgba(255, 255, 255, 0.2) !important;
  color: #ffffff !important;
  font-weight: 600;
}

.auth-card .form-input::placeholder {
  color: rgba(255, 255, 255, 0.45) !important;
}

.auth-card .form-input:focus {
  background: rgba(255, 255, 255, 0.18) !important;
  border-color: #8bb4ff !important;
  box-shadow: 0 0 0 3px rgba(139, 180, 255, 0.15) !important;
}

.auth-logo {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-md);
  margin-bottom: var(--space-xl);
}

.auth-logo-icon {
  width: 48px;
  height: 48px;
  background: linear-gradient(135deg, var(--color-primary), var(--color-accent));
  border-radius: var(--radius-lg);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  font-weight: 800;
  color: white;
}

.auth-logo-text {
  font-size: var(--font-2xl);
  font-weight: 800;
}

.auth-title {
  font-size: var(--font-xl);
  font-weight: 700;
  text-align: center;
  margin-bottom: var(--space-xs);
}

.auth-subtitle {
  text-align: center;
  color: var(--color-text-muted);
  margin-bottom: var(--space-xl);
}

.auth-divider {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  margin: var(--space-lg) 0;
  color: var(--color-text-muted);
  font-size: var(--font-sm);
}

.auth-divider::before,
.auth-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--color-border);
}

.auth-footer {
  text-align: center;
  margin-top: var(--space-lg);
  font-size: var(--font-sm);
  color: var(--color-text-muted);
}

/* ---- CHART CONTAINERS ---- */
.chart-container {
  position: relative;
  width: 100%;
  height: 300px;
}

/* ---- TABS ---- */
.tabs {
  display: flex;
  gap: 4px;
  border-bottom: 1px solid var(--color-border);
  margin-bottom: var(--space-lg);
}

.tab {
  padding: 10px 20px;
  font-size: var(--font-sm);
  font-weight: 500;
  color: var(--color-text-muted);
  cursor: pointer;
  border-bottom: 2px solid transparent;
  transition: all var(--transition-fast);
}

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

.tab.active {
  color: var(--color-primary);
  border-bottom-color: var(--color-primary);
  font-weight: 600;
}

@media (max-width: 1024px) {
  .sidebar {
    transform: translateX(-100%);
    width: 280px;
  }

  .sidebar.open {
    transform: translateX(0);
  }

  .main-content {
    margin-left: 0;
    max-width: 100vw;
    overflow-x: hidden;
  }

  .topbar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    z-index: 90;
  }

  .menu-toggle {
    display: none !important;
  }

  .topbar-search input {
    width: 160px;
  }

  .topbar-search input:focus {
    width: 200px;
  }

  .page-content {
    padding: var(--space-md);
    padding-bottom: calc(var(--space-md) + 76px) !important;
    margin-top: var(--topbar-height);
  }

  .page-title {
    font-size: var(--font-2xl);
  }

  .stats-grid {
    grid-template-columns: 1fr;
  }

  .grid-5 {
    grid-template-columns: repeat(3, 1fr) !important;
  }

  .notif-admin-grid {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }
}

@media (max-width: 768px) {
  .topbar {
    padding: 0 var(--space-md) !important;
  }

  .topbar-left {
    gap: 8px !important;
  }

  .topbar-right {
    gap: 8px !important;
  }

  /* Hide switcher text label on mobile and shrink select field width to prevent header wrapping */
  .school-switcher-label {
    display: none !important;
  }

  .school-switcher-container {
    display: flex;
    align-items: center;
  }

  #global-school-switcher {
    max-width: 110px !important;
    font-size: 11px !important;
    padding: 4px 6px !important;
    height: auto !important;
  }

  /* Micro-scale the digital header clock to fit beautifully next to dropdown and bell */
  .system-clock-wrapper {
    padding: 4px 10px !important;
    gap: 6px !important;
    border-radius: 20px !important;
    margin-right: 0 !important;
    border-width: 1.5px !important;
  }

  .system-clock-wrapper img {
    width: 16px !important;
    height: 10px !important;
  }

  #system-time-clock {
    font-size: 15px !important;
    letter-spacing: 0.5px !important;
    text-shadow: 0 0 4px rgba(0, 210, 255, 0.4) !important;
  }

  #system-time-suffix {
    font-size: 8px !important;
    text-shadow: 0 0 2px rgba(0, 210, 255, 0.4) !important;
  }

  .grid-5 {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

@media (max-width: 480px) {
  .topbar-search {
    display: none;
  }

  .auth-card {
    padding: var(--space-lg);
  }

  /* Extremely tight layouts on very small viewports */
  .topbar {
    padding: 0 8px !important;
  }

  .topbar-left {
    gap: 6px !important;
  }

  .topbar-right {
    gap: 6px !important;
  }

  .system-clock-wrapper {
    padding: 3px 8px !important;
  }

  #global-school-switcher {
    max-width: 95px !important;
    font-size: 10.5px !important;
  }

  .grid-5 {
    grid-template-columns: 1fr !important;
  }
}

/* ---- NOTIFICATIONS DROPDOWN ---- */
.notif-dropdown {
  position: absolute;
  top: 56px;
  right: 0;
  width: 360px;
  max-height: 480px;
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(20px) saturate(190%);
  -webkit-backdrop-filter: blur(20px) saturate(190%);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: 0 20px 40px -15px rgba(0, 0, 0, 0.15), 0 0 0 1px rgba(0, 0, 0, 0.02);
  display: flex;
  flex-direction: column;
  z-index: 1000;
  overflow: hidden;
  animation: notifSlideDown 0.25s cubic-bezier(0.16, 1, 0.3, 1) forwards;
  transform-origin: top right;
}

.notif-dropdown.hidden {
  display: none !important;
}

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

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

.notif-header {
  padding: var(--space-md) var(--space-lg);
  border-bottom: 1px solid var(--color-border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: rgba(255, 255, 255, 0.5);
}

.notif-title {
  font-weight: 700;
  font-size: var(--font-sm);
  color: var(--color-text);
  letter-spacing: -0.15px;
}

.notif-clear-btn {
  background: none;
  border: none;
  font-size: 11px;
  font-weight: 700;
  color: var(--color-primary);
  cursor: pointer;
  padding: 4px 8px;
  border-radius: var(--radius-sm);
  transition: all var(--transition-fast);
}

.notif-clear-btn:hover {
  background: rgba(43, 58, 142, 0.08);
}

.notif-list {
  flex: 1;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  scrollbar-width: thin;
  max-height: 400px;
}

.notif-list::-webkit-scrollbar {
  width: 5px;
}

.notif-list::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.1);
  border-radius: var(--radius-full);
}

.notif-item {
  padding: var(--space-md) var(--space-lg);
  border-bottom: 1px solid rgba(0, 0, 0, 0.04);
  display: flex;
  gap: var(--space-md);
  align-items: flex-start;
  cursor: pointer;
  transition: background-color 0.15s ease;
  position: relative;
  text-decoration: none;
}

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

.notif-item:hover {
  background-color: rgba(0, 0, 0, 0.02);
}

.notif-item.unread {
  background-color: rgba(99, 102, 241, 0.04);
}

.notif-item.unread::before {
  content: '';
  position: absolute;
  left: 6px;
  top: 50%;
  transform: translateY(-50%);
  width: 6px;
  height: 6px;
  background-color: var(--color-danger);
  border-radius: 50%;
}

.notif-icon-badge {
  width: 36px;
  height: 36px;
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  flex-shrink: 0;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
}

/* Notification types styles */
.notif-icon-badge.info {
  background: linear-gradient(135deg, #e0f2fe 0%, #bae6fd 100%);
}

.notif-icon-badge.success {
  background: linear-gradient(135deg, #dcfce7 0%, #bbf7d0 100%);
}

.notif-icon-badge.warning {
  background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
}

.notif-icon-badge.assignment {
  background: linear-gradient(135deg, #e0e7ff 0%, #c7d2fe 100%);
}

.notif-icon-badge.grade {
  background: linear-gradient(135deg, #ecfdf5 0%, #a7f3d0 100%);
}

.notif-icon-badge.chat {
  background: linear-gradient(135deg, #f3e8ff 0%, #e9d5ff 100%);
}

.notif-body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.notif-item-title {
  font-weight: 700;
  font-size: var(--font-xs);
  color: var(--color-text);
  line-height: 1.3;
}

.notif-item-desc {
  font-size: 11.5px;
  color: var(--color-text-secondary);
  line-height: 1.4;
  word-break: break-word;
}

.notif-item-time {
  font-size: 10px;
  color: var(--color-text-muted);
  margin-top: 4px;
}

.notif-empty-state {
  padding: var(--space-2xl) var(--space-lg);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.notif-empty-icon {
  font-size: 32px;
  margin-bottom: var(--space-md);
  animation: notifFloat 2s infinite ease-in-out;
}

@keyframes notifFloat {

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

  50% {
    transform: translateY(-6px);
  }
}

.notif-empty-title {
  font-weight: 700;
  font-size: var(--font-sm);
  color: var(--color-text);
  margin-bottom: 2px;
}

.notif-empty-desc {
  font-size: var(--font-xs);
  color: var(--color-text-muted);
  max-width: 220px;
}

/* ---- GAMIFICATION PAGE RESPONSIVENESS ---- */
.gamification-tabs-nav {
  display: flex;
  gap: var(--space-md);
  border-bottom: 1px solid var(--color-border);
  padding-bottom: 16px;
  margin-bottom: 24px;
  flex-wrap: wrap;
}

.gamification-view-selector {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  justify-content: center;
  margin-bottom: 24px;
  flex-wrap: wrap;
}

.gamification-hub-split {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
}
@media (min-width: 1100px) {
  .gamification-hub-split {
    grid-template-columns: minmax(0, 1fr) 360px;
  }
}

.gamification-settings-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}

.gamification-shop-split,
.gamification-badges-split {
  display: grid;
  grid-template-columns: 1.5fr 1fr;
  gap: 24px;
}

.gamification-profile-modal-split {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: 24px;
}

.gamification-hub-split,
.gamification-settings-split,
.gamification-shop-split,
.gamification-badges-split,
.gamification-profile-modal-split {
  min-width: 0;
  width: 100%;
}

.gamification-hub-split>*,
.gamification-settings-split>*,
.gamification-shop-split>*,
.gamification-badges-split>*,
.gamification-profile-modal-split>* {
  min-width: 0;
  width: 100%;
}

.table-container {
  width: 100% !important;
  max-width: 100% !important;
}

@media (max-width: 768px) {
  .gamification-tabs-nav {
    flex-direction: column;
    align-items: stretch;
  }

  .gamification-tabs-nav button {
    width: 100%;
    text-align: center;
  }

  .gamification-view-selector {
    flex-direction: column;
    gap: var(--space-sm);
  }

  .gamification-hub-split,
  .gamification-settings-split,
  .gamification-shop-split,
  .gamification-badges-split,
  .gamification-profile-modal-split {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  /* Force button text wrapping on mobile so long button text doesn't overflow */
  .gamification-tabs-nav button,
  .gamification-view-selector button,
  .gamification-settings-split button,
  .gamification-shop-split button,
  .gamification-badges-split button,
  .gamification-profile-modal-split button {
    white-space: normal !important;
    word-wrap: break-word;
    line-height: 1.4;
    padding: 10px 12px !important;
  }
}

/* ==========================================================================
   PREMIUM MOBILE BOTTOM NAVIGATION & BOTTOM SHEET
   ========================================================================== */
.mobile-bottom-nav,
.bottom-sheet-overlay,
.bottom-sheet {
  display: none;
}

@media (max-width: 1024px) {
  .page-content {
    padding: var(--space-md);
    padding-bottom: 95px !important;
    margin-top: var(--topbar-height);
  }

  .mobile-bottom-nav {
    display: flex;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: 64px;
    z-index: 999;
    background: rgba(15, 23, 42, 0.94);
    backdrop-filter: blur(24px) saturate(150%);
    -webkit-backdrop-filter: blur(24px) saturate(150%);
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: 0 -8px 24px rgba(0, 0, 0, 0.4);
    justify-content: space-around;
    align-items: center;
    padding: 0 4px;
    padding-bottom: env(safe-area-inset-bottom, 0px);
  }

  .mobile-nav-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex: 1;
    min-width: 0;
    height: 100%;
    color: #94a3b8;
    text-decoration: none;
    transition: all 0.2s ease;
    position: relative;
    gap: 3px;
    padding: 4px 2px;
  }

  .mobile-nav-item:hover,
  .mobile-nav-item:focus {
    color: #f1f5f9;
    text-decoration: none;
  }

  .mobile-nav-item.active {
    color: #38bdf8;
  }

  .mobile-nav-icon-wrapper {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 3px 12px;
    border-radius: 14px;
    transition: all 0.2s ease;
    position: relative;
  }

  .mobile-nav-item.active .mobile-nav-icon-wrapper {
    background: rgba(56, 189, 248, 0.16);
    box-shadow: 0 0 10px rgba(56, 189, 248, 0.25);
  }

  .mobile-nav-icon {
    font-size: 18px;
    line-height: 1;
    display: inline-block;
    transition: transform 0.2s ease;
  }

  .mobile-nav-item:active .mobile-nav-icon {
    transform: scale(0.85);
  }

  .mobile-nav-item.active .mobile-nav-icon {
    transform: scale(1.05);
  }

  .mobile-nav-label {
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.1px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
    text-align: center;
    line-height: 1.1;
  }

  /* Bottom Sheet Overlay styling */
  .bottom-sheet-overlay {
    display: block;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(10, 15, 30, 0.75);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    z-index: 1000;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.25s ease;
  }

  .bottom-sheet-overlay.open {
    opacity: 1;
    pointer-events: auto;
  }

  /* Bottom Sheet styling */
  .bottom-sheet {
    display: block;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    /* One flat colour, the same as the bar it rises out of. The gradient
       that used to be here lightened the top of the sheet, which read as a
       second surface floating above the first. */
    background: #0f172a;
    border-radius: 20px 20px 0 0;
    border-top: 1px solid rgba(56, 189, 248, 0.3);
    box-shadow: 0 -16px 48px rgba(0, 0, 0, 0.6);
    z-index: 1001;
    transform: translateY(100%);
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    max-height: 76vh;
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    padding-bottom: calc(20px + env(safe-area-inset-bottom, 0px));
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, 0.18) rgba(15, 23, 42, 0.95);
  }

  .bottom-sheet::-webkit-scrollbar {
    width: 4px;
    background: rgba(15, 23, 42, 0.95);
  }

  .bottom-sheet::-webkit-scrollbar-track {
    background: rgba(15, 23, 42, 0.95) !important;
  }

  .bottom-sheet::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.2) !important;
    border-radius: 4px;
  }

  .bottom-sheet::-webkit-scrollbar-thumb:hover {
    background: rgba(56, 189, 248, 0.5) !important;
  }

  .bottom-sheet.open {
    transform: translateY(0);
  }

  .bottom-sheet-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px 10px 16px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    position: sticky;
    top: 0;
    background: #1e293b;
    z-index: 2;
  }

  .bottom-sheet-drag-handle {
    position: absolute;
    top: 5px;
    left: 50%;
    transform: translateX(-50%);
    width: 32px;
    height: 3.5px;
    background: rgba(255, 255, 255, 0.25);
    border-radius: 2px;
  }

  .bottom-sheet-title {
    font-size: 14px;
    font-weight: 800;
    color: #fff;
    letter-spacing: -0.2px;
    display: flex;
    align-items: center;
    gap: 6px;
  }

  .bottom-sheet-close {
    background: rgba(255, 255, 255, 0.08);
    border: none;
    font-size: 13px;
    color: #94a3b8;
    cursor: pointer;
    transition: all 0.2s;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .bottom-sheet-close:hover {
    background: rgba(255, 255, 255, 0.15);
    color: #fff;
  }

  .bottom-sheet-user-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 8px 12px 0 12px;
    padding: 8px 12px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.07);
    border-radius: 12px;
  }

  .bottom-sheet-user-left {
    display: flex;
    align-items: center;
    gap: 8px;
  }

  .bottom-sheet-user-name {
    font-size: 12.5px;
    font-weight: 700;
    color: #fff;
    line-height: 1.2;
  }

  .bottom-sheet-user-role {
    font-size: 9.5px;
    color: #94a3b8;
    text-transform: uppercase;
    font-weight: 700;
    margin-top: 1px;
  }

  .bottom-sheet-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    padding: 10px 12px 16px 12px;
  }

  .bottom-sheet-grid-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 8px 4px;
    min-height: 60px;
    border-radius: 12px;
    text-decoration: none;
    color: #cbd5e1;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.07);
    transition: all 0.2s ease;
    text-align: center;
  }

  .bottom-sheet-grid-item:hover,
  .bottom-sheet-grid-item:focus {
    background: rgba(56, 189, 248, 0.12);
    color: #fff;
    border-color: rgba(56, 189, 248, 0.3);
    text-decoration: none;
    transform: translateY(-1px);
  }

  .bottom-sheet-grid-item.active {
    background: rgba(56, 189, 248, 0.18);
    border-color: rgba(56, 189, 248, 0.5);
    color: #38bdf8;
    font-weight: 700;
    box-shadow: 0 0 12px rgba(56, 189, 248, 0.2);
  }

  .bottom-sheet-grid-icon {
    font-size: 19px;
    line-height: 1;
  }

  .bottom-sheet-grid-label {
    font-size: 10.5px;
    font-weight: 600;
    text-align: center;
    line-height: 1.15;
    letter-spacing: -0.1px;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    max-width: 100%;
    word-break: break-word;
  }
}

/* Hide AI Support Chat Widget when bottom menu sheet is active */
body.mobile-menu-active #cw-root {
  display: none !important;
}

/* ==========================================================================
   PREMIUM PROFILE DROPDOWN MENU
   ========================================================================== */
.profile-dropdown {
  position: absolute;
  top: 52px;
  right: 0;
  width: 260px;
  background: rgba(25, 42, 61, 0.96);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(56, 189, 248, 0.2);
  border-radius: var(--radius-lg);
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.35);
  display: flex;
  flex-direction: column;
  z-index: 1000;
  overflow: hidden;
  animation: notifSlideDown 0.25s cubic-bezier(0.16, 1, 0.3, 1) forwards;
  transform-origin: top right;
}

.profile-dropdown.hidden {
  display: none !important;
}

.profile-dropdown-header {
  padding: 16px;
  border-bottom: 1px solid rgba(36, 59, 83, 0.8);
  display: flex;
  align-items: center;
  gap: 12px;
}

.profile-dropdown-info {
  flex: 1;
  min-width: 0;
}

.profile-dropdown-name {
  font-weight: 700;
  font-size: var(--font-sm);
  color: #fff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.3;
}

.profile-dropdown-role {
  font-size: 11px;
  color: var(--color-sidebar-text-muted);
  /* #829AB1 */
  margin-top: 2px;
}

.profile-dropdown-body {
  padding: 8px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.profile-dropdown-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  border-radius: var(--radius-md);
  text-decoration: none;
  color: var(--color-sidebar-text-muted);
  font-size: var(--font-sm);
  font-weight: 600;
  transition: all 0.2s ease;
}

.profile-dropdown-item:hover,
.profile-dropdown-item:focus {
  background: rgba(36, 59, 83, 0.6);
  color: #fff;
  text-decoration: none;
}

.profile-dropdown-item-icon {
  font-size: var(--font-md);
}

.profile-dropdown-footer {
  padding: 12px 16px;
  border-top: 1px solid rgba(36, 59, 83, 0.8);
  background: rgba(15, 23, 42, 0.3);
}

.profile-dropdown-footer .btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font-weight: 700;
  font-size: var(--font-xs);
  padding: 8px 12px;
}
/* ============================================================
   COLLAPSIBLE SIDEBAR
   Shrinks the nav to an icon rail so wide tables get the width back.
   State lives in localStorage and is re-applied on every render.
   ============================================================ */
.sidebar-collapse-toggle {
  position: absolute;
  /* High enough to clear the first menu row in BOTH states.

     At 84px the button sat at 84..106. Open, that is inside a header 136px
     tall and harmless. Collapsed, the header shrinks to 61px and the first
     row starts at 77, so the button landed inside Dashboard and swallowed
     clicks meant for it.

     One value for both states rather than an override per state: the button
     must not move when it is pressed, or the pointer is left off it by the
     very click that moved it. 30px leaves 25px of clear rail below. */
  top: 30px;
  right: -11px;
  width: 22px;
  height: 22px;
  padding: 0;
  border-radius: 50%;
  border: 1px solid var(--color-sidebar-border);
  background: var(--color-sidebar-bg);
  color: var(--color-sidebar-text);
  cursor: pointer;
  z-index: 120;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  line-height: 1;
  box-shadow: var(--shadow-md);
  transition: background var(--transition-base), transform var(--transition-base);
}
.sidebar-collapse-toggle:hover { background: var(--color-sidebar-hover); }
.sidebar-collapse-icon { transition: transform var(--transition-base); pointer-events: none; }

.sidebar { overflow: visible; }
.sidebar-nav { overflow-y: auto; overflow-x: hidden; }

.app-layout.sidebar-collapsed .sidebar { width: 62px; }
.app-layout.sidebar-collapsed .main-content { margin-left: 62px; }
.app-layout.sidebar-collapsed .sidebar-collapse-icon { transform: rotate(180deg); }

.app-layout.sidebar-collapsed .sidebar-brand,
.app-layout.sidebar-collapsed .nav-item-label,
.app-layout.sidebar-collapsed .sidebar-user-info,
.app-layout.sidebar-collapsed .sidebar-section-title { display: none; }

.app-layout.sidebar-collapsed .sidebar-header { padding: 10px 8px !important; justify-content: center; }
.app-layout.sidebar-collapsed .sidebar-header img { height: 40px !important; }
.app-layout.sidebar-collapsed .nav-item { justify-content: center; padding-left: 0; padding-right: 0; }
.app-layout.sidebar-collapsed .nav-item-icon { margin: 0; }
.app-layout.sidebar-collapsed .sidebar-footer { flex-direction: column; gap: 8px; padding: 12px 6px; }

/* The rail is a desktop affordance; on mobile the drawer already handles this. */
@media (max-width: 1024px) {
  .sidebar-collapse-toggle { display: none; }
  .app-layout.sidebar-collapsed .sidebar { width: var(--sidebar-width); }
  .app-layout.sidebar-collapsed .main-content { margin-left: 0; }
  .app-layout.sidebar-collapsed .sidebar-brand,
  .app-layout.sidebar-collapsed .nav-item-label,
  .app-layout.sidebar-collapsed .sidebar-user-info { display: block; }
}

/* ---- HOVER PEEK ----
   The rail is the resting state. Dwell on it and it slides open over the content
   (rather than pushing it) so nothing reflows for a temporary look; move away and
   it closes again. Clicking the arrow pins it open instead, which does reflow. */
.app-layout.sidebar-collapsed.sidebar-peek .sidebar { width: var(--sidebar-width); box-shadow: var(--shadow-xl); }
.app-layout.sidebar-collapsed.sidebar-peek .main-content { margin-left: 62px; }

.app-layout.sidebar-collapsed.sidebar-peek .sidebar-brand,
.app-layout.sidebar-collapsed.sidebar-peek .nav-item-label,
.app-layout.sidebar-collapsed.sidebar-peek .sidebar-user-info { display: block; }

.app-layout.sidebar-collapsed.sidebar-peek .sidebar-header { padding: 10px var(--space-lg) !important; justify-content: flex-start; }
.app-layout.sidebar-collapsed.sidebar-peek .sidebar-header img { height: 70px !important; }
.app-layout.sidebar-collapsed.sidebar-peek .nav-item { justify-content: flex-start; padding-left: var(--space-lg); padding-right: var(--space-lg); }
.app-layout.sidebar-collapsed.sidebar-peek .sidebar-footer { flex-direction: row; gap: var(--space-sm); padding: var(--space-md) var(--space-lg); }

/* A thin always-present strip so the pointer has something to find at the very edge. */
.sidebar-peek-zone {
  position: fixed; top: 0; left: 0; bottom: 0; width: 10px; z-index: 99;
}
.app-layout:not(.sidebar-collapsed) .sidebar-peek-zone { display: none; }
@media (max-width: 1024px) { .sidebar-peek-zone { display: none; } }

/* Streak Badge */
.streak-badge {
  background: linear-gradient(135deg, #f59e0b 0%, #ef4444 100%) !important;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  -webkit-background-clip: border-box !important;
  background-clip: border-box !important;
  padding: 5px 14px;
  border-radius: 20px;
  font-size: 13px;
  font-weight: 800;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  box-shadow: 0 4px 12px rgba(239, 68, 68, 0.35);
  text-shadow: 0 1px 2px rgba(0,0,0,0.3);
  vertical-align: middle;
  line-height: 1.2;
  border: 1px solid rgba(255, 255, 255, 0.3);
}




/* ── Sidebar sections ─────────────────────────────────────────────
   The menu is split in two: what a teacher or a student also uses, then a rule
   marked ADMINISTRATION and the tools only an administrator has. Sections open
   on click and always arrive shut, so the column starts short.

   Each section sits a little deeper into the sidebar's own colour than the one
   before it — the depth is set per section in the markup, since it is data, not
   a fixed set of classes. */
.nav-group-head {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  width: 100%;
  padding: 9px var(--space-lg);
  margin-top: 2px;
  border: none;
  border-left: 3px solid transparent;
  cursor: pointer;
  text-align: left;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--color-sidebar-text-muted, #829AB1);
  transition: color .15s, filter .15s;
}
.nav-group-head:hover { color: var(--color-sidebar-text, #E1E8ED); filter: brightness(1.35); }
.nav-group-head[aria-expanded="true"] {
  color: var(--color-sidebar-text, #E1E8ED);
  border-left-color: var(--color-primary, #2B3A8E);
}
.nav-group-caret { margin-left: auto; font-size: 10px; opacity: .75; }
/* a section that holds the page you are on, while shut */
.nav-group-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--color-primary, #2B3A8E);
  box-shadow: 0 0 0 2px rgba(255,255,255,.25);
  flex-shrink: 0;
}
.nav-group-body .nav-item { padding-left: calc(var(--space-lg) + 14px); }

/* the rule between the shared half of the menu and the administrator's */
.nav-band {
  margin: 14px var(--space-lg) 6px;
  padding-top: 10px;
  border-top: 1px solid var(--color-sidebar-border, #243B53);
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--color-sidebar-text-muted, #829AB1);
  opacity: .75;
}

/* Collapsed to icons there is no room for a name, and the caret has nothing
   to fold now that the pages live in the panel. The dot stays: it is the only
   thing telling you which section holds the page you are on. */
.app-layout.sidebar-collapsed .nav-group-caret,
.app-layout.sidebar-collapsed .nav-band { display: none; }
.app-layout.sidebar-collapsed .nav-group-body .nav-item { padding-left: 0; }

/* The dot cannot sit after a name that is not drawn, so on the rail it
   becomes a mark on the corner of the icon. */
.app-layout.sidebar-collapsed .nav-group-head { position: relative; }
.app-layout.sidebar-collapsed .nav-group-dot {
  position: absolute; top: 7px; right: 11px; margin: 0;
}

/* On the rail, only the sections keep an icon.

   This is the reverse of what stood here before, and the reason changed under
   it. The old note said a section heading is not somewhere to go: true while
   its icon did nothing but fold a section the rail was holding open anyway.
   Pointing at one now opens that section's pages beside it, so it is somewhere
   to go, and it is the better thing to show: fifteen page icons in a flat
   column say nothing about how the menu is organised, while nine section icons
   do, and reach every page in one hover.

   So the heads come back and the pages fold away. The loose links — Dashboard,
   My Profile — stay on the rail, because they belong to no section and have
   nowhere else to be.

   Desktop only. Below 1025px the collapsed class is not a rail at all, it is
   the drawer at its full width, where the headings read as headings and are
   doing their usual job. */
@media (min-width: 1025px) {
  .app-layout.sidebar-collapsed .nav-group-head {
    display: flex;
    justify-content: center;
    padding-left: 0;
    padding-right: 0;
  }
  .app-layout.sidebar-collapsed .nav-group-body { display: none !important; }

  /* Peeking widens the rail back into a full menu, so the headings come back
     with it. The caret stays away: while peeking the sections are held open
     and there is nothing left to fold. */
  .app-layout.sidebar-collapsed.sidebar-peek .nav-group-head {
    display: flex;
    justify-content: flex-start;
    padding: 9px var(--space-lg);
  }
  .app-layout.sidebar-collapsed.sidebar-peek .nav-group-body { display: block !important; }
  .app-layout.sidebar-collapsed.sidebar-peek .nav-band { display: block; }
  .app-layout.sidebar-collapsed.sidebar-peek .nav-group-body .nav-item {
    padding-left: calc(var(--space-lg) + 14px);
  }
}