/* ==========================================================================
   PrashnaOCR - Modern, Professional SaaS Design System
   World-Class Light Studio Theme with Glassmorphism, Micro-Interactions & Depth
   ========================================================================== */

:root {
  --font-heading: 'Outfit', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-mono: 'JetBrains Mono', Consolas, monospace;

  /* Refined Modern Indigo & Slate Palette */
  --bg-app: #f8fafc;
  --bg-surface: #ffffff;
  --bg-surface-translucent: rgba(255, 255, 255, 0.88);
  --bg-subtle: #f1f5f9;
  --bg-hover: #eef2ff;

  --border-subtle: #e2e8f0;
  --border-medium: #cbd5e1;
  --border-card: rgba(226, 232, 240, 0.9);
  --border-focus: #4f46e5;

  --text-primary: #0f172a;
  --text-secondary: #475569;
  --text-muted: #94a3b8;

  /* Primary Electric Indigo */
  --primary: #4f46e5;
  --primary-hover: #4338ca;
  --primary-gradient: linear-gradient(135deg, #4f46e5 0%, #3b82f6 50%, #06b6d4 100%);
  --primary-glow: rgba(79, 70, 229, 0.28);
  --primary-light: #eef2ff;
  --primary-border: #c7d2fe;

  /* Vibrant Accents */
  --accent-cyan: #06b6d4;
  --accent-cyan-light: #ecfeff;
  --accent-cyan-border: #a5f3fc;

  --success: #10b981;
  --success-hover: #059669;
  --success-bg: #ecfdf5;
  --success-border: #a7f3d0;

  --danger: #ef4444;
  --danger-hover: #dc2626;
  --danger-bg: #fef2f2;
  --danger-border: #fecaca;

  /* Layered Shadows */
  --shadow-xs: 0 1px 2px 0 rgba(0, 0, 0, 0.04);
  --shadow-sm: 0 1px 3px 0 rgba(15, 23, 42, 0.06), 0 1px 2px -1px rgba(15, 23, 42, 0.04);
  --shadow-md: 0 4px 12px -2px rgba(15, 23, 42, 0.06), 0 2px 6px -1px rgba(15, 23, 42, 0.04);
  --shadow-lg: 0 12px 28px -4px rgba(15, 23, 42, 0.08), 0 4px 10px -2px rgba(15, 23, 42, 0.04);
  --shadow-xl: 0 24px 48px -12px rgba(15, 23, 42, 0.12), 0 8px 16px -4px rgba(15, 23, 42, 0.06);
  --shadow-card: 0 1px 3px rgba(15, 23, 42, 0.04), 0 4px 12px -2px rgba(15, 23, 42, 0.05);
  --shadow-card-hover: 0 14px 28px -6px rgba(15, 23, 42, 0.09), 0 0 0 1px rgba(99, 102, 241, 0.35);

  --radius-xs: 4px;
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --radius-xl: 20px;
  --radius-full: 9999px;

  --header-height: 64px;
}

/* Base Reset */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-size: 15px;
  -webkit-tap-highlight-color: transparent;
}

body {
  font-family: var(--font-body);
  background-color: var(--bg-app);
  color: var(--text-primary);
  line-height: 1.5;
  min-height: 100vh;
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Scrollbars */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

::-webkit-scrollbar-track {
  background: transparent;
}

::-webkit-scrollbar-thumb {
  background: var(--border-medium);
  border-radius: var(--radius-full);
}

::-webkit-scrollbar-thumb:hover {
  background: #94a3b8;
}

/* ============================================================
   Application Header
   ============================================================ */

.app-header {
  height: var(--header-height);
  background: rgba(255, 255, 255, 0.88);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid rgba(226, 232, 240, 0.85);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 24px;
  z-index: 50;
  position: relative;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.03);
}

.brand-container {
  display: flex;
  align-items: center;
  gap: 12px;
}

.brand-logo {
  width: 38px;
  height: 38px;
  border-radius: 11px;
  background: var(--primary-gradient);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ffffff;
  flex-shrink: 0;
  box-shadow: 0 4px 14px rgba(79, 70, 229, 0.35);
  transition: transform 180ms cubic-bezier(0.16, 1, 0.3, 1), box-shadow 180ms ease;
}

.brand-logo:hover {
  transform: scale(1.05) rotate(-2deg);
  box-shadow: 0 6px 18px rgba(79, 70, 229, 0.45);
}

.brand-logo svg {
  width: 22px;
  height: 22px;
}

.brand-name {
  font-family: var(--font-heading);
  font-size: 1.25rem;
  font-weight: 800;
  color: var(--text-primary);
  letter-spacing: -0.02em;
  display: flex;
  align-items: center;
  gap: 8px;
}

.brand-badge {
  font-family: var(--font-mono);
  font-size: 0.65rem;
  font-weight: 700;
  background: linear-gradient(135deg, #eef2ff, #e0e7ff);
  color: #4338ca;
  padding: 2px 7px;
  border-radius: var(--radius-full);
  border: 1px solid #c7d2fe;
  letter-spacing: 0.06em;
  box-shadow: 0 1px 2px rgba(79, 70, 229, 0.08);
}

/* ============================================================
   Vertical Left Sidebar Navigation
   ============================================================ */

.app-sidebar {
  width: 240px;
  min-width: 240px;
  background: #0f2e5a;
  display: flex;
  flex-direction: column;
  padding: 22px 14px;
  height: 100%;
  box-shadow: 2px 0 10px rgba(15, 23, 42, 0.08);
  z-index: 40;
  flex-shrink: 0;
}

.sidebar-brand {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 4px 24px 4px;
}

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

.sidebar-close-btn {
  display: none;
}

.sidebar-logo {
  width: 36px;
  height: 36px;
  border-radius: 9px;
  background: #1d68ff;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ffffff;
  box-shadow: 0 4px 12px rgba(29, 104, 255, 0.35);
  flex-shrink: 0;
}

.sidebar-logo svg {
  width: 20px;
  height: 20px;
}

.sidebar-brand-name {
  font-family: var(--font-heading);
  font-size: 1.05rem;
  font-weight: 700;
  color: #ffffff;
  letter-spacing: -0.01em;
  line-height: 1.25;
}

.sidebar-nav {
  display: flex;
  flex-direction: column;
  gap: 6px;
  width: 100%;
  overflow-y: auto;
  overflow-x: hidden;
  padding-right: 2px;
}

/* Custom slim scrollbar for sidebar nav */
.sidebar-nav::-webkit-scrollbar {
  width: 4px;
}

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

.sidebar-nav::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.15);
  border-radius: 4px;
}

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

/* Main Category Group */
.sidebar-nav-group {
  display: flex;
  flex-direction: column;
  width: 100%;
}

.sidebar-category-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 8px 10px;
  border-radius: 9px;
  border: none;
  background: transparent;
  color: #94a3b8;
  font-family: var(--font-heading);
  font-size: 0.74rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  cursor: pointer;
  transition: all 180ms ease;
  user-select: none;
  text-align: left;
}

.sidebar-category-header:hover {
  color: #f8fafc;
  background: rgba(255, 255, 255, 0.06);
}

.sidebar-category-title-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1;
  min-width: 0;
}

.sidebar-category-icon {
  width: 15px;
  height: 15px;
  color: #64748b;
  flex-shrink: 0;
  transition: color 180ms ease;
}

.sidebar-category-header:hover .sidebar-category-icon,
.sidebar-nav-group.has-active .sidebar-category-icon {
  color: #60a5fa;
}

.sidebar-category-label {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.2;
}

.sidebar-category-chevron {
  width: 14px;
  height: 14px;
  color: #64748b;
  flex-shrink: 0;
  transition: transform 220ms ease, color 180ms ease;
}

.sidebar-category-header:hover .sidebar-category-chevron {
  color: #cbd5e1;
}

.sidebar-nav-group.open .sidebar-category-chevron {
  transform: rotate(180deg);
  color: #94a3b8;
}

.sidebar-nav-group.has-active .sidebar-category-label {
  color: #e2e8f0;
  font-weight: 800;
}

/* Sub-menu Container */
.sidebar-submenu {
  display: none;
  flex-direction: column;
  gap: 3px;
  margin-top: 3px;
  margin-bottom: 6px;
  margin-left: 12px;
  padding-left: 8px;
  border-left: 2px solid rgba(255, 255, 255, 0.1);
  width: calc(100% - 12px);
}

.sidebar-nav-group.open .sidebar-submenu {
  display: flex;
}

/* Sub-menu Item styling */
.sidebar-submenu .sidebar-nav-item,
.sidebar-nav-item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 8px 12px;
  border-radius: 9px;
  border: none;
  background: transparent;
  color: #cbd5e1;
  font-family: var(--font-body);
  font-size: 0.88rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 180ms cubic-bezier(0.16, 1, 0.3, 1);
  text-align: left;
}

.sidebar-nav-item svg {
  width: 16px;
  height: 16px;
  color: currentColor;
  flex-shrink: 0;
}

.sidebar-nav-item:hover {
  color: #ffffff;
  background: rgba(255, 255, 255, 0.08);
}

.sidebar-nav-item.active {
  background: #1d68ff;
  color: #ffffff;
  font-weight: 600;
  box-shadow: 0 3px 12px rgba(29, 104, 255, 0.4);
}

.sidebar-nav-item.active svg {
  color: #ffffff;
}

.sidebar-nav-item[style*="display: none"],
.sidebar-nav-item[hidden],
.sidebar-nav-item.menu-hidden,
.sidebar-nav-item.is-hidden {
  display: none !important;
}

/* Sidebar Footer: Profile Info & Login/Logout at Bottom-Left */
.sidebar-footer {
  margin-top: auto;
  padding-top: 16px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 100%;
}

.sidebar-user-badge {
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 100%;
}

.sidebar-user-info {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  background: rgba(255, 255, 255, 0.07);
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.sidebar-user-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: #1d68ff;
  color: #ffffff;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 0.85rem;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
}

.sidebar-user-details {
  display: flex;
  flex-direction: column;
  gap: 2px;
  overflow: hidden;
  min-width: 0;
}

.sidebar-user-name {
  font-family: var(--font-heading);
  font-size: 0.85rem;
  font-weight: 600;
  color: #ffffff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.sidebar-logout-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  padding: 8px 12px;
  border-radius: 8px;
  border: 1px solid rgba(239, 68, 68, 0.3);
  background: rgba(239, 68, 68, 0.14);
  color: #fca5a5;
  font-family: var(--font-body);
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 180ms ease;
}

.sidebar-logout-btn svg {
  width: 14px;
  height: 14px;
}

.sidebar-logout-btn:hover {
  background: rgba(239, 68, 68, 0.26);
  color: #ffffff;
  border-color: rgba(239, 68, 68, 0.6);
  transform: translateY(-1px);
}

.sidebar-login-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  padding: 9px 12px;
  border-radius: 8px;
  border: none;
  background: #1d68ff;
  color: #ffffff;
  font-family: var(--font-body);
  font-size: 0.84rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 180ms ease;
  box-shadow: 0 3px 10px rgba(29, 104, 255, 0.3);
}

.sidebar-login-btn:hover {
  background: #2563eb;
  transform: translateY(-1px);
}

.sidebar-login-btn svg {
  width: 15px;
  height: 15px;
}

/* Main Content Area & Topbar */
.app-main-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  height: 100vh;
  overflow: hidden;
  background: #f0f4f9;
  min-width: 0;
}

/* ============================================================

   Dedicated Page Views (Question Bank & User)
   ============================================================ */

.page-view {
  flex: 1;
  overflow-y: auto;
  background: var(--bg-canvas);
  padding: 16px 24px 40px;
  box-sizing: border-box;
}

.page-view-container {
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 0 0 24px 0;
  box-sizing: border-box;
}

.page-view-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: #ffffff;
  padding: 18px 24px;
  border-radius: var(--radius-xl);
  border: 1px solid var(--border-subtle);
  box-shadow: var(--shadow-sm);
  gap: 16px;
}

.page-view-header-info {
  display: flex;
  align-items: center;
  gap: 16px;
}

.page-view-icon {
  width: 38px;
  height: 38px;
  border-radius: 10px;
  background: #eef2ff;
  border: 1px solid #c7d2fe;
  color: var(--primary);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.page-view-icon svg {
  width: 18px;
  height: 18px;
}

.page-view-title {
  margin: 0;
  font-family: var(--font-heading);
  font-size: 1.22rem;
  font-weight: 700;
  color: var(--text-primary);
  letter-spacing: -0.01em;
}

.page-view-desc {
  margin: 3px 0 0 0;
  font-size: 0.83rem;
  color: var(--text-muted);
}

.page-view-body {
  background: #ffffff;
  border-radius: var(--radius-xl);
  border: 1px solid var(--border-subtle);
  box-shadow: var(--shadow-sm);
  padding: 24px;
  min-height: 380px;
}

/* User Profile Card */
.user-profile-card {
  display: flex;
  align-items: center;
  gap: 20px;
  background: #ffffff;
  border-radius: var(--radius-xl);
  border: 1px solid var(--border-subtle);
  box-shadow: var(--shadow-sm);
  padding: 22px 26px;
}

.user-profile-avatar-large {
  width: 58px;
  height: 58px;
  border-radius: 50%;
  background: var(--primary-gradient);
  color: #ffffff;
  font-family: var(--font-heading);
  font-size: 1.6rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 14px rgba(79, 70, 229, 0.35);
  flex-shrink: 0;
}

.user-profile-info {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.user-profile-name {
  font-family: var(--font-heading);
  font-size: 1.18rem;
  font-weight: 700;
  color: var(--text-primary);
}

.user-profile-sub {
  display: flex;
  align-items: center;
  gap: 10px;
}

.user-profile-username {
  font-family: var(--font-mono);
  font-size: 0.82rem;
  color: var(--text-muted);
}

/* Admin Users Management Section */
.admin-users-section {
  background: #ffffff;
  border-radius: var(--radius-xl);
  border: 1px solid var(--border-subtle);
  box-shadow: var(--shadow-sm);
  padding: 24px;
}

.admin-users-section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 18px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--border-subtle);
}

.admin-users-section-title {
  margin: 0;
  font-family: var(--font-heading);
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--text-primary);
}

.admin-users-section-desc {
  margin: 3px 0 0;
  font-size: 0.81rem;
  color: var(--text-muted);
}

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

/* ============================================================
   Modal & Dialog System (Create User, etc.)
   ============================================================ */

.modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: rgba(15, 23, 42, 0.6);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  animation: modalFadeIn 180ms cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes modalFadeIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

.modal-card {
  background: #ffffff;
  border-radius: var(--radius-xl);
  border: 1px solid var(--border-subtle);
  box-shadow: var(--shadow-xl), 0 20px 40px -15px rgba(15, 23, 42, 0.25);
  width: 100%;
  max-width: 520px;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  animation: modalSlideUp 220ms cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes modalSlideUp {
  from {
    opacity: 0;
    transform: translateY(14px) scale(0.98);
  }

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

.modal-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 18px 22px;
  border-bottom: 1px solid var(--border-subtle);
  background: linear-gradient(180deg, #f8fafc 0%, #ffffff 100%);
  position: relative;
}

.modal-header-icon {
  width: 38px;
  height: 38px;
  border-radius: var(--radius-lg);
  background: var(--primary-light);
  color: var(--primary);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  border: 1px solid var(--primary-border);
}

.modal-header-icon svg {
  width: 18px;
  height: 18px;
}

.modal-title {
  font-family: var(--font-heading);
  font-size: 1.12rem;
  font-weight: 700;
  color: var(--text-primary);
  margin: 0;
}

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

.modal-close-btn {
  margin-left: auto;
  width: 32px;
  height: 32px;
  border-radius: var(--radius-md);
  border: 1px solid transparent;
  background: transparent;
  color: var(--text-muted);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 150ms ease;
}

.modal-close-btn:hover {
  background: var(--bg-subtle);
  color: var(--text-primary);
  border-color: var(--border-subtle);
}

.modal-form {
  padding: 20px 22px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  overflow-y: auto;
  flex: 1;
}

.form-field-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.required-star {
  color: var(--danger);
  font-weight: bold;
}

.form-help-text {
  font-size: 0.72rem;
  color: var(--text-muted);
  margin-top: 2px;
}

.form-grid-2 {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 12px;
}

.role-specific-fields {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 14px;
  background: var(--bg-subtle);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  animation: fieldFadeIn 180ms ease forwards;
}

@keyframes fieldFadeIn {
  from {
    opacity: 0;
    transform: translateY(-4px);
  }

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

.modal-footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  padding: 14px 22px;
  border-top: 1px solid var(--border-subtle);
  background: #f8fafc;
}

.table-responsive {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* ============================================================
   Button System
   ============================================================ */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 7px 14px;
  font-family: var(--font-body);
  font-size: 0.83rem;
  font-weight: 600;
  border-radius: var(--radius-md);
  border: 1px solid transparent;
  cursor: pointer;
  transition: all 180ms cubic-bezier(0.16, 1, 0.3, 1);
  white-space: nowrap;
  line-height: 1.4;
  user-select: none;
}

.btn svg {
  width: 15px;
  height: 15px;
  flex-shrink: 0;
}

.btn:active {
  transform: translateY(1px) scale(0.98);
}

/* Primary Button (Gradient + Glow) */
.btn-primary {
  background: var(--primary-gradient);
  color: #ffffff;
  border: 1px solid rgba(255, 255, 255, 0.2);
  box-shadow: 0 3px 10px rgba(79, 70, 229, 0.3);
}

.btn-primary:hover {
  box-shadow: 0 6px 18px rgba(79, 70, 229, 0.45);
  transform: translateY(-1px);
}

/* Secondary Button (Frosted Card) */
.btn-secondary {
  background: #ffffff;
  border: 1px solid var(--border-medium);
  color: #334155;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}

.btn-secondary:hover {
  background: #f8fafc;
  border-color: #94a3b8;
  color: #0f172a;
  box-shadow: 0 2px 6px rgba(15, 23, 42, 0.08);
  transform: translateY(-1px);
}

/* Ghost & Danger Buttons */
.btn-ghost {
  background: transparent;
  color: var(--text-secondary);
}

.btn-ghost:hover {
  background: var(--bg-subtle);
  color: var(--text-primary);
}

.btn-danger-ghost {
  background: transparent;
  color: var(--danger);
}

.btn-danger-ghost:hover {
  background: var(--danger-bg);
}

.btn-sm {
  padding: 6px 12px;
  font-size: 0.8rem;
  border-radius: var(--radius-sm);
}

/* User Badge & Profile */
.user-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 3px 10px 3px 3px;
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: var(--radius-full);
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.04);
  transition: all 180ms ease;
  margin-left: 4px;
}

.user-badge:hover {
  border-color: #cbd5e1;
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.08);
}

.user-avatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: linear-gradient(135deg, #4f46e5, #06b6d4);
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.76rem;
  font-weight: 700;
  text-transform: uppercase;
  box-shadow: 0 2px 6px rgba(79, 70, 229, 0.3);
  flex-shrink: 0;
}

.user-details {
  display: flex;
  align-items: center;
  gap: 8px;
}

.user-name {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--text-primary);
}

.user-role-pill {
  font-size: 0.68rem;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: var(--radius-full);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.user-role-pill.role-admin {
  background: #fef2f2;
  color: #ef4444;
  border: 1px solid #fecaca;
}

.user-role-pill.role-manager {
  background: #f5f3ff;
  color: #7c3aed;
  border: 1px solid #ddd6fe;
}

.user-role-pill.role-teacher {
  background: #eff6ff;
  color: #3b82f6;
  border: 1px solid #bfdbfe;
}

.user-role-pill.role-student {
  background: #ecfdf5;
  color: #10b981;
  border: 1px solid #a7f3d0;
}

.btn-logout {
  width: 26px;
  height: 26px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  border-radius: 50%;
  color: var(--text-muted);
  cursor: pointer;
  transition: all 150ms ease;
}

.btn-logout:hover {
  background: #fee2e2;
  color: var(--danger);
  transform: scale(1.08);
}

/* Export Dropdown */
.dropdown-holder {
  position: relative;
}

.dropdown-box {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  background: #ffffff;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  box-shadow: 0 12px 32px -4px rgba(15, 23, 42, 0.12), 0 4px 12px rgba(15, 23, 42, 0.06);
  padding: 6px;
  min-width: 220px;
  max-width: 90vw;
  display: none;
  flex-direction: column;
  gap: 2px;
  z-index: 100;
  animation: qbModalPop 0.18s cubic-bezier(0.16, 1, 0.3, 1);
}

.dropdown-box.show {
  display: flex;
}

.dropdown-link {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 12px;
  font-size: 0.82rem;
  font-weight: 500;
  color: var(--text-primary);
  background: transparent;
  border: none;
  border-radius: var(--radius-sm);
  cursor: pointer;
  text-align: left;
  transition: all 120ms ease;
  width: 100%;
}

.dropdown-link:hover {
  background: var(--bg-hover);
  color: var(--primary);
}

.dropdown-link svg {
  width: 16px;
  height: 16px;
  color: var(--text-secondary);
  flex-shrink: 0;
}

.dropdown-link:hover svg {
  color: var(--primary);
}

/* ============================================================
   Application Layout
   ============================================================ */

.app-container {
  display: flex;
  flex-direction: row;
  height: 100vh;
  width: 100%;
  overflow: hidden;
  background: #f0f4f9;
}

.mobile-topbar-brand {
  display: flex;
  align-items: center;
  gap: 10px;
}

.mobile-hamburger-btn {
  display: none;
}

.mobile-brand-title {
  font-family: var(--font-heading);
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--text-primary);
  white-space: nowrap;
  line-height: 1.2;
}

.sidebar-backdrop {
  display: none;
}

.main-topbar {
  height: 48px;
  padding: 0 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: #ffffff;
  border-bottom: 1px solid var(--border-subtle);
  flex-shrink: 0;
  box-sizing: border-box;
}

.topbar-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

.app-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.12fr) minmax(0, 0.88fr);
  gap: 16px;
  padding: 16px 24px 20px 24px;
  height: calc(100vh - 48px);
  height: calc(100dvh - 48px);
  width: 100%;
  max-width: 100%;
  min-width: 0;
  overflow: hidden;
  box-sizing: border-box;
}

/* ============================================================
   Left Pane: Document Canvas Studio
   ============================================================ */

.canvas-pane {
  background: #ffffff;
  border-radius: 12px;
  border: 1px solid #e2e8f0;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.04);
  display: flex;
  flex-direction: column;
  position: relative;
  overflow: hidden;
  height: 100%;
  padding: 0;
  box-sizing: border-box;
}

.canvas-header-bar {
  height: 54px;
  min-height: 54px;
  padding: 0 18px;
  border-bottom: 1px solid #e2e8f0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: #ffffff;
  flex-shrink: 0;
  box-sizing: border-box;
}

.pane-header-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-heading);
  font-size: 1.05rem;
  font-weight: 700;
  color: #0f172a;
  letter-spacing: -0.015em;
  white-space: nowrap;
}

.pane-header-title svg {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}

.canvas-toolbar {
  display: flex;
  align-items: center;
  height: 100%;
}

.toolbar-group {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* Real-Time OCR Progress Banner */
.ocr-progress-strip {
  position: absolute;
  top: 48px;
  left: 0;
  right: 0;
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border-subtle);
  padding: 8px 18px;
  display: none;
  align-items: center;
  gap: 12px;
  z-index: 30;
  box-shadow: 0 4px 12px rgba(15, 23, 42, 0.05);
}

.ocr-progress-strip.active {
  display: flex;
  animation: slideDown 0.2s ease;
}

@keyframes slideDown {
  from {
    transform: translateY(-100%);
    opacity: 0;
  }

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

.spinner {
  width: 18px;
  height: 18px;
  border: 2.5px solid var(--border-subtle);
  border-top-color: var(--primary);
  border-radius: 50%;
  animation: spin 0.75s linear infinite;
  flex-shrink: 0;
}

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

.progress-label {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--text-secondary);
  flex: 1;
}

.progress-track {
  width: 160px;
  height: 6px;
  background: var(--bg-subtle);
  border-radius: var(--radius-full);
  overflow: hidden;
}

.progress-fill {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, #4f46e5, #3b82f6, #06b6d4);
  background-size: 200% 100%;
  animation: shimmer 1.8s linear infinite;
  transition: width 0.2s ease;
}

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

  100% {
    background-position: -200% 0;
  }
}

/* Canvas Viewport */
.canvas-viewport {
  flex: 1;
  position: relative;
  overflow: hidden;
  user-select: none;
}

.canvas-container {
  position: absolute;
  top: 0;
  left: 0;
  transform-origin: 0 0;
  box-shadow: 0 20px 48px -10px rgba(15, 23, 42, 0.16), 0 0 0 1px rgba(226, 232, 240, 0.85);
  background: #ffffff;
  border-radius: 6px;
}

#mainCanvas {
  display: block;
}

#overlayCanvas {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  cursor: crosshair;
}

/* Upload Page: Hand pointer (👆) when hovering over questions in the uploaded PDF */
.canvas-viewport.is-hovering-question,
.canvas-viewport.is-hovering-question #overlayCanvas,
#overlayCanvas.is-hovering-question {
  cursor: pointer !important;
}

/* Modern Empty State Upload Dropzone */
.empty-upload-box {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: #f6f9fe;
  border: 1.5px dashed #adcbf9;
  border-radius: 14px;
  padding: 44px 32px;
  text-align: center;
  max-width: 540px;
  width: 90%;
  z-index: 5;
  transition: all 180ms ease;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
}

.empty-upload-box.is-hidden {
  display: none !important;
}

.empty-upload-box:hover,
.empty-upload-box.dragover {
  border-color: #1d68ff;
  background: #edf4fe;
}

.upload-icon-circle {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: #dbeafe;
  color: #1d68ff;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 16px;
  transition: transform 180ms ease;
}

.empty-upload-box:hover .upload-icon-circle {
  transform: scale(1.05);
}

.upload-icon-circle svg {
  width: 26px;
  height: 26px;
}

.empty-title {
  font-family: var(--font-heading);
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 8px;
  letter-spacing: -0.01em;
}

.empty-desc {
  font-size: 0.85rem;
  color: var(--text-secondary);
  line-height: 1.55;
  margin-bottom: 20px;
}

.upload-formats-hint {
  margin-top: 16px;
  font-size: 0.72rem;
  font-family: var(--font-mono);
  color: var(--text-muted);
}

/* Floating Bounding Box Action Tag */
.selection-action-bar {
  position: absolute;
  display: none;
  background: #ffffff;
  border: 1px solid rgba(6, 182, 212, 0.5);
  border-radius: var(--radius-md);
  padding: 5px 10px;
  box-shadow: 0 12px 30px -4px rgba(6, 182, 212, 0.22), 0 4px 12px rgba(15, 23, 42, 0.08);
  z-index: 50;
  align-items: center;
  gap: 8px;
  backdrop-filter: blur(8px);
}

.selection-action-bar.active {
  display: flex;
  animation: qbModalPop 0.15s ease;
}

/* Floating Zoom Controls Bar */
.zoom-controls {
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(255, 255, 255, 0.94);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(226, 232, 240, 0.9);
  border-radius: var(--radius-full);
  padding: 5px 12px;
  display: flex;
  align-items: center;
  gap: 8px;
  box-shadow: 0 8px 24px -4px rgba(15, 23, 42, 0.1);
  z-index: 15;
}

.zoom-text {
  font-size: 0.78rem;
  font-family: var(--font-mono);
  font-weight: 600;
  color: var(--text-secondary);
  min-width: 42px;
  text-align: center;
}

.divider {
  width: 1px;
  height: 14px;
  background: var(--border-medium);
}

/* ============================================================
   Right Pane: Digitalized Questions
   ============================================================ */

.questions-pane {
  background: #ffffff;
  border-radius: 12px;
  border: 1px solid #e2e8f0;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.04);
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
  box-sizing: border-box;
}

.questions-header {
  height: 54px;
  min-height: 54px;
  padding: 0 18px;
  border-bottom: 1px solid #e2e8f0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: #ffffff;
  flex-shrink: 0;
  box-sizing: border-box;
}

.header-title-box {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

.header-title {
  font-family: var(--font-heading);
  font-size: 1.05rem;
  font-weight: 700;
  color: #0f172a;
  letter-spacing: -0.015em;
  white-space: nowrap;
}

.count-pill {
  font-family: var(--font-mono);
  font-size: 0.74rem;
  font-weight: 700;
  background: #eef2ff;
  color: #1d68ff;
  border: 1px solid #c7d2fe;
  padding: 2px 8px;
  border-radius: 10px;
}

.questions-header-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

/* ============================================================
   Standardized Professional Button Design System
   ============================================================ */

#btnRunPageOcr,
#btnClearImage,
.btn-toolbar-danger,
#btnSaveQuestions,
#btnAddQuestion,
.btn-add-question,
#btnClearQuestions,
.btn-clear-all,
#exportDropdownBtn,
.btn-export-outline {
  height: 34px;
  padding: 0 13px;
  font-family: var(--font-body);
  font-size: 0.8rem;
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
  border-radius: 6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  cursor: pointer;
  box-sizing: border-box;
  transition: all 150ms cubic-bezier(0.16, 1, 0.3, 1);
}

#btnRunPageOcr svg,
#btnClearImage svg,
.btn-toolbar-danger svg,
#btnSaveQuestions svg,
#btnAddQuestion svg,
.btn-add-question svg,
#btnClearQuestions svg,
.btn-clear-all svg,
#exportDropdownBtn svg,
.btn-export-outline svg {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
}

/* Primary Action Buttons: Save & Recognize All Questions */
#btnRunPageOcr,
#btnSaveQuestions {
  color: #ffffff;
  background: #1d68ff;
  border: 1px solid #1d68ff;
  box-shadow: 0 1px 3px rgba(29, 104, 255, 0.25);
}

#btnRunPageOcr:hover,
#btnSaveQuestions:hover {
  background: #1557e0;
  border-color: #1557e0;
  box-shadow: 0 3px 8px rgba(29, 104, 255, 0.35);
  transform: translateY(-1px);
}

/* Secondary Action Button: Add Question */
#btnAddQuestion,
.btn-add-question {
  color: #1d68ff;
  background: #f0f7ff;
  border: 1px solid #bfdbfe;
  box-shadow: 0 1px 2px rgba(29, 104, 255, 0.06);
}

#btnAddQuestion:hover,
.btn-add-question:hover {
  background: #1d68ff;
  color: #ffffff;
  border-color: #1d68ff;
  box-shadow: 0 3px 8px rgba(29, 104, 255, 0.28);
  transform: translateY(-1px);
}

/* Outline Neutral Button: Export */
#exportDropdownBtn,
.btn-export-outline {
  color: #334155;
  background: #ffffff;
  border: 1px solid #cbd5e1;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.05);
}

#exportDropdownBtn:hover,
.btn-export-outline:hover {
  background: #f8fafc;
  color: #0f172a;
  border-color: #94a3b8;
  box-shadow: 0 2px 5px rgba(15, 23, 42, 0.08);
  transform: translateY(-1px);
}

/* Destructive Buttons: Clear Page & Clear All */
#btnClearImage,
.btn-toolbar-danger,
#btnClearQuestions,
.btn-clear-all {
  color: #e11d48;
  background: #fff1f2;
  border: 1px solid #fecdd3;
  box-shadow: 0 1px 2px rgba(225, 29, 72, 0.06);
}

#btnClearImage:hover,
.btn-toolbar-danger:hover,
#btnClearQuestions:hover,
.btn-clear-all:hover {
  background: #e11d48;
  color: #ffffff;
  border-color: #e11d48;
  box-shadow: 0 3px 8px rgba(225, 29, 72, 0.28);
  transform: translateY(-1px);
}

/* Option Add Button: + Add Option */
.btn-add-option-pill,
.btn-add-opt {
  height: 28px;
  padding: 0 10px;
  font-family: var(--font-body);
  font-size: 0.76rem;
  font-weight: 600;
  color: #475569;
  background: #f8fafc;
  border: 1px dashed #cbd5e1;
  border-radius: 6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  cursor: pointer;
  transition: all 150ms ease;
}

.btn-add-option-pill:hover,
.btn-add-opt:hover {
  background: #f0f7ff;
  color: #1d68ff;
  border-color: #93c5fd;
  border-style: solid;
}

.btn-add-option-pill svg,
.btn-add-opt svg {
  width: 12px;
  height: 12px;
}

/* ============================================================
   Question Hierarchy Assignment Bar (Class -> Subject -> Chapter -> Category)
   ============================================================ */

.question-hierarchy-bar {
  background: #f8fafc;
  border-bottom: 1px solid #e2e8f0;
  padding: 14px 18px;
  flex-shrink: 0;
}

.hierarchy-bar-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px 14px;
}

@media (min-width: 1440px) {
  .hierarchy-bar-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

.hierarchy-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.hierarchy-label {
  font-size: 0.72rem;
  font-weight: 700;
  color: #64748b;
  display: flex;
  align-items: center;
  gap: 4px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.hierarchy-label .required-star {
  color: #ef4444;
}

.hierarchy-label .opt-label {
  font-weight: 500;
  color: #94a3b8;
  text-transform: none;
  font-size: 0.7rem;
}

.hierarchy-input {
  width: 100%;
  height: 36px;
  padding: 0 10px;
  font-family: var(--font-body);
  font-size: 0.82rem;
  font-weight: 500;
  border: 1px solid #cbd5e1;
  border-radius: 6px;
  background: #ffffff;
  color: #0f172a;
  outline: none;
  box-sizing: border-box;
  transition: all 150ms ease;
}

.hierarchy-input:focus {
  border-color: #1d68ff;
  box-shadow: 0 0 0 2px rgba(29, 104, 255, 0.18);
}

.hierarchy-input.is-invalid {
  border-color: var(--danger) !important;
  box-shadow: 0 0 0 2px rgba(239, 68, 68, 0.25) !important;
}

#questionTypeBar,
.question-type-bar,
#digitalizeGlobalQType,
.global-qtype-select,
.type-bar-field,
.type-bar-label {
  display: none !important;
  visibility: hidden !important;
  height: 0 !important;
  width: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: none !important;
  overflow: hidden !important;
  pointer-events: none !important;
}

.questions-scroll-area {
  flex: 1;
  overflow-y: auto;
  padding: 16px 18px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

/* Empty Questions Placeholder */
.empty-questions-notice {
  text-align: center;
  padding: 80px 24px;
  color: var(--text-muted);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
}

.empty-notice-icon-box {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: #eef5ff;
  color: #7ba6ea;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 16px;
}

.empty-notice-icon-box svg {
  width: 26px;
  height: 26px;
}

.empty-questions-notice h3 {
  font-family: var(--font-heading);
  font-size: 1.05rem;
  font-weight: 700;
  color: #334155;
  margin-bottom: 6px;
}

.empty-questions-notice p {
  font-size: 0.86rem;
  color: #64748b;
  line-height: 1.6;
  max-width: 290px;
  margin: 0 auto;
}

/* ============================================================
   Question Card Styling
   ============================================================ */

.question-card {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  padding: 16px;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.04);
  display: flex;
  flex-direction: column;
  gap: 12px;
  transition: all 150ms ease;
  box-sizing: border-box;
}

.question-card:hover {
  border-color: #cbd5e1;
  box-shadow: 0 4px 12px rgba(15, 23, 42, 0.06);
}

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

.q-number-tag {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  font-weight: 700;
  color: #1d68ff;
  background: #eef2ff;
  border: 1px solid #c7d2fe;
  padding: 3px 8px;
  border-radius: 5px;
}

.card-actions {
  display: flex;
  align-items: center;
  gap: 6px;
}

.btn-card-delete,
.btn-delete-q {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 8px;
  font-family: var(--font-body);
  font-size: 0.74rem;
  font-weight: 600;
  color: #94a3b8;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 4px;
  cursor: pointer;
  transition: all 120ms ease;
}

.btn-card-delete:hover,
.btn-delete-q:hover {
  background: #fef2f2;
  color: #ef4444;
  border-color: #fecaca;
}

.btn-card-delete svg,
.btn-delete-q svg {
  width: 13px;
  height: 13px;
}

.q-textarea {
  width: 100%;
  box-sizing: border-box;
  background: #ffffff;
  border: 1px solid #cbd5e1;
  border-radius: 6px;
  padding: 10px 12px;
  font-family: var(--font-body);
  font-size: 0.88rem;
  color: #0f172a;
  line-height: 1.5;
  resize: vertical;
  min-height: 64px;
  outline: none;
  transition: border-color 150ms ease, box-shadow 150ms ease;
}

.q-textarea:focus {
  border-color: #1d68ff;
  box-shadow: 0 0 0 2px rgba(29, 104, 255, 0.18);
}

/* Option Rows */
.options-stack {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.option-item {
  display: flex;
  align-items: center;
  gap: 10px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 6px;
  padding: 6px 10px;
  transition: all 120ms ease;
  box-sizing: border-box;
}

.option-item.is-correct {
  background: #ecfdf5;
  border-color: #86efac;
  box-shadow: 0 0 0 1px #86efac;
}

.option-radio {
  cursor: pointer;
  accent-color: #10b981;
  width: 16px;
  height: 16px;
  margin: 0;
  flex-shrink: 0;
}

.option-letter {
  font-size: 0.82rem;
  font-weight: 700;
  color: #475569;
  width: 22px;
  flex-shrink: 0;
  user-select: none;
}

.option-input {
  flex: 1;
  min-width: 0;
  background: transparent;
  border: none;
  outline: none;
  font-size: 0.85rem;
  color: #0f172a;
  font-family: var(--font-body);
  padding: 2px 0;
}

.option-del-btn {
  width: 22px;
  height: 22px;
  border-radius: 4px;
  border: none;
  background: transparent;
  color: #94a3b8;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 120ms ease;
}

.option-del-btn:hover {
  background: #fee2e2;
  color: #ef4444;
}

.option-del-btn svg {
  width: 13px;
  height: 13px;
}

.card-bottom {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  margin-top: 4px;
  padding-top: 10px;
  border-top: 1px solid #f1f5f9;
}

.correct-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 0.74rem;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: 6px;
  background: #f1f5f9;
  color: #64748b;
  border: 1px solid #e2e8f0;
  transition: all 150ms ease;
}

.correct-badge svg {
  width: 12px;
  height: 12px;
  opacity: 0.7;
}

.correct-badge.is-set {
  background: #ecfdf5;
  color: #065f46;
  border-color: #a7f3d0;
}

.correct-badge.is-set svg {
  opacity: 1;
}

/* ============================================================
   Standalone Full-Page Login View
   ============================================================ */

.login-page-view {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  height: 100dvh;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  background: radial-gradient(circle at 12% 18%, rgba(99, 102, 241, 0.12) 0%, transparent 45%),
    radial-gradient(circle at 88% 82%, rgba(6, 182, 212, 0.10) 0%, transparent 45%),
    #f8fafc;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  padding: 20px 16px;
  box-sizing: border-box;
}

.login-card-container {
  margin: auto;
  background: rgba(255, 255, 255, 0.94);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(226, 232, 240, 0.9);
  border-radius: 20px;
  box-shadow: 0 24px 60px -12px rgba(15, 23, 42, 0.12), 0 0 0 1px rgba(255, 255, 255, 0.9);
  width: 100%;
  max-width: 410px;
  padding: 38px 34px;
  display: flex;
  flex-direction: column;
  animation: qbModalPop 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

.login-card-header {
  text-align: center;
  margin-bottom: 24px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.login-brand-logo {
  width: 50px;
  height: 50px;
  border-radius: 14px;
  background: var(--primary-gradient);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ffffff;
  margin-bottom: 14px;
  box-shadow: 0 8px 24px -4px rgba(79, 70, 229, 0.45);
}

.login-brand-logo svg {
  width: 26px;
  height: 26px;
}

.login-title {
  font-family: var(--font-heading);
  font-size: 1.6rem;
  font-weight: 800;
  color: var(--text-primary);
  margin-bottom: 4px;
  letter-spacing: -0.02em;
}

.login-subtitle {
  font-size: 0.85rem;
  color: var(--text-secondary);
}

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

.login-field-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
  text-align: left;
}

.form-label {
  display: block;
  font-size: 0.76rem;
  font-weight: 600;
  color: var(--text-secondary);
  margin-bottom: 4px;
}

.form-input {
  width: 100%;
  padding: 9px 13px;
  font-family: var(--font-body);
  font-size: 0.88rem;
  border: 1px solid var(--border-medium);
  border-radius: var(--radius-md);
  background: var(--bg-surface);
  color: var(--text-primary);
  outline: none;
  transition: border-color 150ms ease, box-shadow 150ms ease;
}

.form-input:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.12);
}

.password-input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
}

.password-input-wrapper .form-input {
  padding-right: 42px;
}

.btn-toggle-password {
  position: absolute;
  right: 6px;
  top: 50%;
  transform: translateY(-50%);
  background: transparent;
  border: none;
  padding: 6px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  color: var(--text-muted);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: color 150ms ease, background 150ms ease;
  line-height: 1;
  z-index: 10;
}

.btn-toggle-password:hover {
  color: var(--text-primary);
  background: var(--bg-subtle);
}

.btn-toggle-password:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 1px;
}

.btn-toggle-password svg {
  width: 18px;
  height: 18px;
  stroke: currentColor;
  stroke-width: 2;
  transition: stroke 150ms ease;
  pointer-events: none;
}

html.user-logged-in #loginPageView {
  display: none !important;
}

html.user-logged-in #appContainer {
  display: flex !important;
}

.btn-login-submit {
  width: 100%;
  padding: 11px;
  font-size: 0.92rem;
  font-weight: 600;
  margin-top: 6px;
}

/* ============================================================
   Modals (Question Bank & User Management)
   ============================================================ */

.qb-overlay {
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, 0.48);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  animation: qbFadeIn 0.15s ease;
}

@keyframes qbFadeIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

.qb-modal {
  background: var(--bg-surface);
  border-radius: var(--radius-lg);
  border: 1px solid var(--border-subtle);
  box-shadow: var(--shadow-xl);
  width: 100%;
  max-width: 680px;
  max-height: 85vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  animation: qbModalPop 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes qbModalPop {
  from {
    transform: scale(0.96);
    opacity: 0;
  }

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

.qb-modal-header {
  padding: 16px 20px;
  border-bottom: 1px solid var(--border-subtle);
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--bg-surface);
}

.btn-modal-close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border-radius: var(--radius-md);
  border: 1px solid transparent;
  background: transparent;
  color: var(--text-secondary);
  cursor: pointer;
  transition: all 150ms ease;
}

.btn-modal-close:hover {
  background: var(--bg-subtle);
  color: var(--text-primary);
  border-color: var(--border-subtle);
}

.btn-modal-close:active {
  transform: scale(0.94);
}

.btn-modal-close svg {
  width: 18px;
  height: 18px;
}

.btn-cancel-selection {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  padding: 0;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-subtle);
  background: #ffffff;
  color: var(--text-secondary);
  cursor: pointer;
  transition: all 150ms ease;
}

.btn-cancel-selection:hover {
  background: #fee2e2;
  color: var(--danger);
  border-color: #fecaca;
}

.btn-cancel-selection:active {
  transform: scale(0.94);
}

.btn-cancel-selection svg {
  width: 14px;
  height: 14px;
}

.qb-modal-body {
  padding: 18px 20px;
  overflow-y: auto;
  flex: 1;
  min-height: 200px;
}

.qb-loading,
.qb-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 40px 20px;
  color: var(--text-secondary);
  text-align: center;
  font-size: 0.9rem;
}

/* ============================================================
   Question Bank Hierarchy Filter Bar & Card Badges
   ============================================================ */

.qb-filter-bar {
  display: flex;
  align-items: flex-end;
  gap: 12px;
  background: #ffffff;
  border-radius: var(--radius-lg);
  border: 1px solid var(--border-subtle);
  padding: 12px 16px;
  margin-bottom: 16px;
  box-shadow: var(--shadow-xs);
  flex-wrap: wrap;
}

.qb-filter-group {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 140px;
}

.qb-search-group {
  flex: 1;
  min-width: 180px;
}

.qb-filter-label {
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--text-secondary);
}

.qb-filter-select,
.qb-search-input {
  padding: 6px 10px;
  font-family: var(--font-body);
  font-size: 0.8rem;
  border: 1px solid var(--border-medium);
  border-radius: var(--radius-sm);
  background: #ffffff;
  color: var(--text-primary);
  outline: none;
  transition: all 150ms ease;
  height: 32px;
}

.qb-filter-select:focus,
.qb-search-input:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 2px var(--primary-glow);
}

.qb-search-box {
  position: relative;
  display: flex;
  align-items: center;
}

.qb-search-box svg {
  position: absolute;
  left: 9px;
  color: var(--text-muted);
  pointer-events: none;
}

.qb-search-input {
  width: 100%;
  padding-left: 28px;
}

/* Question Bank Card Badges */
.qb-hierarchy-badges {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  margin: 3px 0;
}

.qb-badge {
  font-size: 0.7rem;
  font-weight: 600;
  padding: 2px 7px;
  border-radius: var(--radius-xs);
  line-height: 1.3;
}

.qb-badge-class {
  background: #eff6ff;
  color: #1d4ed8;
  border: 1px solid #bfdbfe;
}

.qb-badge-subject {
  background: #f0fdf4;
  color: #15803d;
  border: 1px solid #bbf7d0;
}

.qb-badge-chapter {
  background: #f8fafc;
  color: #475569;
  border: 1px solid #e2e8f0;
}

.qb-badge-category {
  background: #faf5ff;
  color: #7e22ce;
  border: 1px solid #e9d5ff;
}

.qb-badge-batch {
  background: #fffbeb;
  color: #b45309;
  border: 1px solid #fde68a;
}

.qb-badge-unassigned {
  background: #f1f5f9;
  color: #64748b;
  border: 1px solid #cbd5e1;
}

.cat-select.is-invalid,
.cat-input.is-invalid {
  border-color: var(--danger) !important;
  box-shadow: 0 0 0 2px rgba(239, 68, 68, 0.25) !important;
}



/* User Management Table */
.usersTableContainer,
#usersTableContainer {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  width: 100%;
}

.users-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.82rem;
}

.users-table th {
  text-align: left;
  padding: 10px 14px;
  font-weight: 700;
  color: var(--text-muted);
  border-bottom: 1.5px solid var(--border-subtle);
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  white-space: nowrap;
}

.users-table td {
  padding: 12px 14px;
  border-bottom: 1px solid var(--border-subtle);
  color: var(--text-primary);
  vertical-align: middle;
}

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

/* ============================================================
   Student Practice & Quiz Arena
   ============================================================ */

.quiz-arena {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: var(--bg-surface);
  overflow: hidden;
}

.quiz-arena-header {
  padding: 16px 20px;
  border-bottom: 1px solid var(--border-subtle);
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--bg-surface);
  flex-shrink: 0;
}

.quiz-title {
  font-family: var(--font-heading);
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--text-primary);
  margin: 0;
}

.quiz-subtitle {
  font-size: 0.78rem;
  color: var(--text-secondary);
  margin-top: 2px;
}

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

.quiz-score-banner {
  margin: 16px 20px 0 20px;
  padding: 14px 18px;
  border-radius: var(--radius-md);
  background: #ecfdf5;
  border: 1px solid #a7f3d0;
  display: flex;
  align-items: center;
  gap: 14px;
  animation: slideIn 0.25s ease;
}

.score-badge-circle {
  font-size: 2rem;
  line-height: 1;
}

.score-title {
  font-size: 1rem;
  font-weight: 700;
  color: #065f46;
  margin: 0;
}

.score-desc {
  font-size: 0.85rem;
  font-weight: 600;
  color: #047857;
  margin-top: 2px;
}

.quiz-scroll-area {
  flex: 1;
  padding: 20px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.quiz-card {
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  padding: 16px 18px;
  box-shadow: var(--shadow-sm);
  display: flex;
  flex-direction: column;
  gap: 12px;
  transition: all 150ms ease;
}

.quiz-card:hover {
  border-color: var(--border-medium);
  box-shadow: var(--shadow-md);
}

.quiz-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.quiz-q-num {
  font-family: var(--font-mono);
  font-size: 0.76rem;
  font-weight: 700;
  color: #4338ca;
  background: #eef2ff;
  padding: 2px 8px;
  border-radius: var(--radius-sm);
  border: 1px solid #c7d2fe;
}

.quiz-q-statement {
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--text-primary);
  line-height: 1.5;
}

.quiz-options-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
}

.quiz-opt-btn {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 12px;
  border-radius: var(--radius-md);
  border: 1px solid var(--border-subtle);
  background: var(--bg-subtle);
  cursor: pointer;
  text-align: left;
  font-family: var(--font-body);
  font-size: 0.84rem;
  font-weight: 500;
  color: var(--text-primary);
  transition: all 150ms ease;
}

.quiz-opt-btn:hover {
  border-color: var(--primary);
  background: #f0f7ff;
}

.quiz-opt-btn.is-selected {
  border-color: var(--primary);
  background: #eef2ff;
  color: var(--primary);
  font-weight: 600;
  box-shadow: 0 0 0 2px rgba(79, 70, 229, 0.2);
}

.quiz-opt-btn.is-correct-result {
  border-color: #10b981;
  background: #ecfdf5;
  color: #065f46;
  font-weight: 600;
}

.quiz-opt-btn.is-wrong-result {
  border-color: #ef4444;
  background: #fef2f2;
  color: #991b1b;
  text-decoration: line-through;
}

.quiz-opt-key {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: #ffffff;
  border: 1px solid var(--border-medium);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.75rem;
  font-weight: 700;
  flex-shrink: 0;
}

.quiz-opt-btn.is-selected .quiz-opt-key {
  background: var(--primary);
  color: #ffffff;
  border-color: var(--primary);
}

.quiz-opt-btn.is-correct-result .quiz-opt-key {
  background: #10b981;
  color: #ffffff;
  border-color: #10b981;
}

.quiz-opt-btn.is-wrong-result .quiz-opt-key {
  background: #ef4444;
  color: #ffffff;
  border-color: #ef4444;
}

.quiz-explanation-box {
  margin-top: 8px;
  padding: 10px 12px;
  border-radius: var(--radius-sm);
  background: #f8fafc;
  border-left: 3px solid var(--primary);
  font-size: 0.8rem;
  color: var(--text-secondary);
}

.quiz-empty-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 60px 20px;
  text-align: center;
  color: var(--text-secondary);
}

/* ============================================================
   Toast Notifications
   ============================================================ */

.toast-shelf {
  position: fixed;
  bottom: 24px;
  right: 24px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  z-index: 10000;
  pointer-events: none;
  max-width: 380px;
}

.toast-msg {
  pointer-events: auto;
  background: #ffffff;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: 11px 16px;
  display: flex;
  align-items: center;
  gap: 10px;
  box-shadow: 0 10px 28px -4px rgba(15, 23, 42, 0.12);
  font-size: 0.84rem;
  font-weight: 550;
  color: var(--text-primary);
  animation: slideIn 0.22s ease;
}

@keyframes slideIn {
  from {
    transform: translateX(100%);
    opacity: 0;
  }

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

.toast-msg.toast-success {
  border-left: 4px solid var(--success);
}

.toast-msg.toast-error {
  border-left: 4px solid var(--danger);
}

/* ============================================================
   Page View & Dedicated Views (Question Bank & User Management)
   ============================================================ */

.page-view {
  width: 100%;
  height: calc(100vh - 64px);
  overflow-y: auto;
  background: #f8fafc;
  padding-bottom: 40px;
}

.page-view-container {
  max-width: 1180px;
  margin: 0 auto;
  padding: 24px 20px;
}

.page-view-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 24px;
  background: #ffffff;
  padding: 18px 24px;
  border-radius: var(--radius-md);
  border: 1px solid var(--border-subtle);
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.04);
}

.page-view-header-info {
  display: flex;
  align-items: center;
  gap: 16px;
}

.page-view-icon {
  width: 38px;
  height: 38px;
  border-radius: 10px;
  background: #eef2ff;
  border: 1px solid #c7d2fe;
  color: var(--primary);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.page-view-icon svg {
  width: 18px;
  height: 18px;
}

.page-view-title {
  font-family: var(--font-heading);
  font-size: 1.35rem;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 3px;
  letter-spacing: -0.015em;
}

.page-view-desc {
  font-size: 0.84rem;
  color: var(--text-secondary);
}

/* Question Bank Filter & Hierarchy Bar */
.qb-filter-bar {
  display: flex;
  align-items: flex-end;
  gap: 14px;
  background: #ffffff;
  border: 1px solid var(--border-subtle, #e2e8f0);
  border-radius: 12px;
  padding: 18px 22px;
  margin-bottom: 20px;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.04);
  flex-wrap: wrap;
}

.qb-filter-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 140px;
}

.qb-search-group {
  flex: 1;
  min-width: 220px;
}

.qb-filter-label {
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-secondary, #64748b);
}

.qb-filter-select {
  height: 38px;
  padding: 0 12px;
  border: 1px solid var(--border-medium, #cbd5e1);
  border-radius: 8px;
  background: #ffffff;
  font-family: var(--font-body);
  font-size: 0.84rem;
  color: var(--text-primary, #0f172a);
  outline: none;
  transition: all 150ms ease;
}

.qb-filter-select:focus {
  border-color: var(--primary, #1d68ff);
  box-shadow: 0 0 0 2px var(--primary-glow, rgba(29, 104, 255, 0.15));
}

.qb-search-box {
  position: relative;
  display: flex;
  align-items: center;
}

.qb-search-box svg {
  position: absolute;
  left: 12px;
  color: var(--text-muted, #94a3b8);
  pointer-events: none;
}

.qb-search-input {
  width: 100%;
  height: 38px;
  padding: 0 12px 0 36px;
  border: 1px solid var(--border-medium, #cbd5e1);
  border-radius: 8px;
  background: #ffffff;
  font-family: var(--font-body);
  font-size: 0.84rem;
  color: var(--text-primary, #0f172a);
  outline: none;
  transition: all 150ms ease;
}

.qb-search-input:focus {
  border-color: var(--primary, #1d68ff);
  box-shadow: 0 0 0 2px var(--primary-glow, rgba(29, 104, 255, 0.15));
}

.qb-filter-bar #btnResetQBFilters {
  height: 38px;
  padding: 0 18px;
  border-radius: 8px;
  font-weight: 600;
  font-size: 0.84rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  background: #ffffff;
  border: 1px solid #cbd5e1;
  color: #334155;
  transition: all 150ms ease;
}

.qb-filter-bar #btnResetQBFilters:hover {
  background: #f8fafc;
  border-color: #94a3b8;
  color: #0f172a;
}

/* Question Bank Sessions List */
.qb-session-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
  width: 100%;
  box-sizing: border-box;
}

.qb-session-card {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  padding: 20px 24px;
  box-shadow: 0 1px 4px rgba(15, 23, 42, 0.04);
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  justify-content: flex-start !important;
  width: 100% !important;
  box-sizing: border-box !important;
  gap: 14px;
  transition: all 180ms ease;
}

.qb-session-card:hover {
  border-color: #cbd5e1;
  box-shadow: 0 6px 18px rgba(15, 23, 42, 0.07);
}

.qb-session-card-main {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  width: 100% !important;
  box-sizing: border-box !important;
  gap: 20px;
}

.qb-session-info {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  gap: 8px;
  flex: 1 1 auto !important;
  min-width: 0 !important;
  width: 100% !important;
}

.qb-session-name {
  font-family: var(--font-heading);
  font-size: 1.08rem;
  font-weight: 700;
  color: #0f172a;
  line-height: 1.4;
  letter-spacing: -0.01em;
  word-break: break-word;
  display: block;
  width: 100%;
  text-align: left !important;
}

/* Question Bank Hierarchy Badges (Class -> Subject -> Chapter -> Category -> Batch) */
.qb-hierarchy-badges {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 6px;
  flex-wrap: wrap;
  width: 100%;
  text-align: left;
}

.qb-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 0.76rem;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: 6px;
  white-space: nowrap;
  line-height: 1.35;
}

.qb-badge strong {
  font-weight: 700;
}

.qb-badge-sep {
  font-size: 0.82rem;
  font-weight: 700;
  color: #94a3b8;
  margin: 0 2px;
  display: inline-flex;
  align-items: center;
  user-select: none;
}

.qb-badge-class {
  background: #eff6ff;
  color: #1d4ed8;
  border: 1px solid #bfdbfe;
}

.qb-badge-subject {
  background: #f0fdf4;
  color: #15803d;
  border: 1px solid #bbf7d0;
}

.qb-badge-chapter {
  background: #f8fafc;
  color: #334155;
  border: 1px solid #cbd5e1;
}

.qb-badge-category {
  background: #faf5ff;
  color: #7e22ce;
  border: 1px solid #e9d5ff;
}

.qb-badge-batch {
  background: #fff7ed;
  color: #c2410c;
  border: 1px solid #fed7aa;
}

.qb-badge-unassigned {
  background: #f1f5f9;
  color: #64748b;
  border: 1px solid #e2e8f0;
}

.qb-session-meta {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 16px;
  font-size: 0.78rem;
  color: #64748b;
  margin-top: 2px;
  width: 100%;
  text-align: left;
}

.qb-session-meta span {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.qb-session-actions {
  display: flex !important;
  align-items: center !important;
  gap: 10px;
  flex-shrink: 0 !important;
  margin-left: auto;
}

.qb-session-actions .btn {
  height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font-size: 0.82rem;
  font-weight: 600;
  padding: 0 16px;
  border-radius: 8px;
  white-space: nowrap;
  box-sizing: border-box;
}

.qb-session-actions .btn-preview-session {
  background: #ffffff;
  border: 1px solid #cbd5e1;
  color: #334155;
  transition: all 150ms ease;
}

.qb-session-actions .btn-preview-session:hover {
  background: #f8fafc;
  border-color: #94a3b8;
  color: #0f172a;
}

.qb-session-actions .btn-load-session {
  background: #1d68ff;
  color: #ffffff;
  border: 1px solid #1d68ff;
  padding: 0 20px;
  transition: all 150ms ease;
}

.qb-session-actions .btn-load-session:hover {
  background: #1557e0;
  border-color: #1557e0;
}

.qb-session-actions .btn-del-session {
  width: 38px;
  height: 38px;
  padding: 0;
  color: #ef4444;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: all 150ms ease;
}

.qb-session-actions .btn-del-session:hover {
  background: #fee2e2;
  color: #dc2626;
  border-color: #fca5a5;
}

/* Expandable Inline Questions Preview in Question Bank */
.qb-questions-preview {
  margin-top: 8px;
  padding: 14px 16px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: var(--radius-sm);
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.qb-preview-item {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 6px;
  padding: 10px 14px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.qb-preview-hierarchy {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.73rem;
  font-weight: 600;
  color: #64748b;
  flex-wrap: wrap;
}

.qb-preview-qtext {
  font-size: 0.88rem;
  font-weight: 600;
  color: #0f172a;
}

.qb-preview-answer-row {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.78rem;
  margin-top: 2px;
}

.qb-preview-correct-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: #ecfdf5;
  color: #065f46;
  border: 1px solid #a7f3d0;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 4px;
}

.qb-loading,
.qb-empty {
  background: #ffffff;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: 50px 20px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  color: var(--text-secondary);
}

/* Separator for Hierarchy tag */
.q-h-sep {
  font-weight: 700;
  color: #94a3b8;
  margin: 0 2px;
}

/* User Management Table Styles */
.users-table-container {
  background: #ffffff;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.04);
}

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

.users-table th {
  background: #f8fafc;
  padding: 12px 16px;
  text-align: left;
  font-size: 0.74rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-secondary);
  border-bottom: 1px solid var(--border-subtle);
}

.users-table td {
  padding: 12px 16px;
  border-bottom: 1px solid var(--border-subtle);
  vertical-align: middle;
}

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

.users-table tr:hover td {
  background: #f8fafc;
}

/* ============================================================
   Utility Classes
   ============================================================ */

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

/* ============================================================
   Mobile & Responsive Adaptations (Screens <= 900px)
   ============================================================ */

@media (max-width: 900px) {

  html,
  body {
    overflow-x: hidden;
    overflow-y: auto;
    height: auto;
    min-height: 100vh;
    min-height: 100dvh;
  }

  body.sidebar-drawer-open {
    overflow: hidden !important;
    touch-action: none !important;
  }

  .app-container {
    flex-direction: column !important;
    height: 100vh !important;
    height: 100dvh !important;
    overflow: hidden !important;
    position: relative !important;
  }

  /* Mobile Topbar with Hamburger Menu */
  .mobile-topbar-brand {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    min-width: 0 !important;
  }

  .mobile-hamburger-btn {
    width: 38px !important;
    height: 38px !important;
    min-width: 38px !important;
    min-height: 38px !important;
    border-radius: 8px !important;
    border: 1px solid #cbd5e1 !important;
    background: #ffffff !important;
    color: #0f172a !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    flex-shrink: 0 !important;
    touch-action: manipulation !important;
    -webkit-tap-highlight-color: transparent !important;
    user-select: none !important;
    position: relative !important;
    z-index: 60 !important;
  }

  .mobile-hamburger-btn:active {
    background: #f1f5f9 !important;
  }

  .mobile-hamburger-btn svg {
    width: 20px !important;
    height: 20px !important;
    pointer-events: none !important;
  }

  .mobile-brand-title {
    font-family: var(--font-heading) !important;
    font-size: 1.05rem !important;
    font-weight: 700 !important;
    color: #0f172a !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  .main-topbar {
    height: 52px !important;
    min-height: 52px !important;
    padding: 0 14px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    background: #ffffff !important;
    border-bottom: 1px solid #e2e8f0 !important;
    position: relative !important;
    z-index: 50 !important;
    flex-shrink: 0 !important;
  }

  /* Off-Canvas Navigation Drawer */
  .app-sidebar {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    bottom: 0 !important;
    width: 280px !important;
    max-width: 85vw !important;
    height: 100vh !important;
    height: 100dvh !important;
    background: #0f2e5a !important;
    z-index: 1050 !important;
    transform: translateX(-100%) !important;
    transition: transform 0.28s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.28s !important;
    display: flex !important;
    flex-direction: column !important;
    padding: 20px 16px !important;
    box-shadow: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
  }

  .app-sidebar.mobile-open {
    transform: translateX(0) !important;
    visibility: visible !important;
    pointer-events: auto !important;
    box-shadow: 8px 0 36px rgba(15, 23, 42, 0.5) !important;
  }

  .sidebar-brand {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 0 0 20px 0 !important;
    width: 100% !important;
  }

  .sidebar-brand-left {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
  }

  .sidebar-brand-name {
    font-size: 1.05rem !important;
  }

  .sidebar-close-btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 34px !important;
    height: 34px !important;
    border-radius: 8px !important;
    border: none !important;
    background: rgba(255, 255, 255, 0.12) !important;
    color: #cbd5e1 !important;
    cursor: pointer !important;
    touch-action: manipulation !important;
    flex-shrink: 0 !important;
  }

  .sidebar-close-btn:active {
    background: rgba(255, 255, 255, 0.25) !important;
    color: #ffffff !important;
  }

  .sidebar-close-btn svg {
    width: 18px !important;
    height: 18px !important;
    pointer-events: none !important;
  }

  .sidebar-nav {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    gap: 8px !important;
  }

  .sidebar-nav-item {
    padding: 12px 16px !important;
    font-size: 0.92rem !important;
    width: 100% !important;
    border-radius: 10px !important;
    display: flex;
    align-items: center !important;
    gap: 12px !important;
    touch-action: manipulation !important;
    cursor: pointer !important;
  }

  .sidebar-nav-item[style*="display: none"],
  .sidebar-nav-item[hidden],
  .sidebar-nav-item.menu-hidden,
  .sidebar-nav-item.is-hidden {
    display: none !important;
  }

  .sidebar-nav-item svg {
    width: 18px !important;
    height: 18px !important;
    pointer-events: none !important;
  }

  .sidebar-footer {
    margin-top: auto !important;
    padding-top: 16px !important;
    border-top: 1px solid rgba(255, 255, 255, 0.1) !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
    width: 100% !important;
  }

  .sidebar-user-badge {
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
    width: 100% !important;
  }

  .sidebar-user-info {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    padding: 8px 10px !important;
    background: rgba(255, 255, 255, 0.07) !important;
    border-radius: 10px !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
  }

  .sidebar-user-avatar {
    width: 32px !important;
    height: 32px !important;
  }

  .sidebar-user-name {
    font-size: 0.85rem !important;
    color: #ffffff !important;
  }

  .sidebar-logout-btn {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    width: 100% !important;
    padding: 10px 12px !important;
    border-radius: 8px !important;
    touch-action: manipulation !important;
    cursor: pointer !important;
  }

  /* Backdrop Overlay - NEVER block clicks when closed */
  .sidebar-backdrop {
    display: none !important;
  }

  .sidebar-backdrop.active {
    display: block !important;
    position: fixed !important;
    inset: 0 !important;
    background: rgba(15, 23, 42, 0.6) !important;
    backdrop-filter: blur(4px) !important;
    -webkit-backdrop-filter: blur(4px) !important;
    z-index: 1040 !important;
    pointer-events: auto !important;
    touch-action: none !important;
  }

  /* Main Scrollable View Area */
  .app-main-content {
    flex: 1 !important;
    height: calc(100vh - 52px) !important;
    height: calc(100dvh - 52px) !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    -webkit-overflow-scrolling: touch !important;
    position: relative !important;
    display: flex !important;
    flex-direction: column !important;
  }

  .app-layout:not(.is-hidden) {
    display: flex !important;
    flex-direction: column !important;
    gap: 14px !important;
    padding: 12px 12px 30px 12px !important;
    height: auto !important;
    overflow: visible !important;
    box-sizing: border-box !important;
  }

  .canvas-pane {
    height: auto !important;
    min-height: auto !important;
    max-height: none !important;
    border-radius: 10px !important;
    border: 1px solid #e2e8f0 !important;
    flex-shrink: 0 !important;
    position: relative !important;
    overflow: hidden !important;
  }

  .canvas-header-bar {
    height: auto !important;
    min-height: 52px !important;
    padding: 8px 12px !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
  }

  .questions-pane {
    height: auto !important;
    min-height: 46vh !important;
    border-radius: 10px !important;
    border: 1px solid #e2e8f0 !important;
    overflow: visible !important;
  }

  .questions-header {
    height: auto !important;
    min-height: 52px !important;
    padding: 8px 12px !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
  }

  .questions-scroll-area {
    overflow-y: visible !important;
    max-height: none !important;
    padding: 12px !important;
  }

  .hierarchy-bar-grid {
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }

  .question-card {
    padding: 14px !important;
    gap: 10px !important;
  }

  /* Question Bank & Dedicated Page Views on Tablet/Mobile */
  .page-view {
    padding: 14px 12px 36px 12px !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  .page-view-container {
    max-width: 100% !important;
    gap: 14px !important;
  }

  .page-view-header {
    padding: 14px 16px !important;
    border-radius: 12px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 12px !important;
  }

  .page-view-header-info {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
  }

  .page-view-icon {
    width: 40px !important;
    height: 40px !important;
    border-radius: 10px !important;
    flex-shrink: 0 !important;
  }

  .page-view-title {
    font-size: 1.1rem !important;
  }

  .page-view-desc {
    font-size: 0.78rem !important;
  }

  .page-view-actions {
    display: flex !important;
    justify-content: flex-end !important;
    width: 100% !important;
  }

  .qb-filter-bar {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 10px !important;
    padding: 14px 16px !important;
    border-radius: 12px !important;
    margin-bottom: 0 !important;
  }

  .qb-filter-group {
    width: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 4px !important;
  }

  .qb-filter-select,
  .qb-search-input,
  .qb-search-box {
    width: 100% !important;
    height: 36px !important;
    box-sizing: border-box !important;
  }

  .page-view-body {
    padding: 14px !important;
    border-radius: 12px !important;
    min-height: auto !important;
  }

  .qb-session-card {
    padding: 16px 18px !important;
    border-radius: 12px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    width: 100% !important;
    box-sizing: border-box !important;
    gap: 12px !important;
  }

  .qb-session-card-main {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 12px !important;
    width: 100% !important;
  }

  .qb-session-info {
    width: 100% !important;
    align-items: stretch !important;
  }

  .qb-session-name {
    font-size: 1rem !important;
    word-break: break-word !important;
    text-align: left !important;
  }

  .qb-hierarchy-badges {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 6px !important;
    width: 100% !important;
    justify-content: flex-start !important;
  }

  .qb-badge {
    font-size: 0.74rem !important;
    padding: 3px 8px !important;
  }

  .qb-session-actions {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
    width: 100% !important;
    justify-content: flex-start !important;
    margin-left: 0 !important;
    padding-top: 10px !important;
    border-top: 1px solid #f1f5f9 !important;
  }

  .qb-session-actions .btn {
    flex: 1 1 auto !important;
    height: 36px !important;
    font-size: 0.82rem !important;
    justify-content: center !important;
  }

  .qb-session-actions .btn-del-session {
    flex: 0 0 36px !important;
    width: 36px !important;
  }

  /* User Management on Tablet/Mobile */
  .admin-users-section {
    padding: 14px 16px !important;
    border-radius: 12px !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  .admin-users-section-header {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 12px !important;
    margin-bottom: 12px !important;
    padding-bottom: 12px !important;
  }

  .admin-users-section-title {
    font-size: 1.05rem !important;
  }

  .admin-users-section-desc {
    font-size: 0.78rem !important;
  }

  .header-actions {
    display: flex !important;
    gap: 8px !important;
    width: 100% !important;
  }

  .header-actions .btn {
    flex: 1 !important;
    justify-content: center !important;
    height: 34px !important;
  }

  .table-responsive {
    width: 100% !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }

  .users-table {
    width: 100% !important;
    min-width: 480px !important;
    font-size: 0.82rem !important;
  }

  .users-table th,
  .users-table td {
    padding: 9px 10px !important;
  }

  /* Create User Modal on Tablet/Mobile */
  .modal-backdrop {
    padding: 12px !important;
  }

  .modal-card {
    max-width: 100% !important;
    max-height: 92vh !important;
    max-height: 92dvh !important;
    border-radius: 14px !important;
    overflow-y: auto !important;
  }

  .modal-header {
    padding: 14px 16px !important;
  }

  .modal-title {
    font-size: 1.05rem !important;
  }

  .modal-subtitle {
    font-size: 0.78rem !important;
  }

  .modal-form {
    padding: 14px 16px !important;
    gap: 12px !important;
  }

  .modal-footer {
    padding: 12px 16px !important;
    flex-direction: column-reverse !important;
    gap: 8px !important;
  }

  .modal-footer .btn {
    width: 100% !important;
    justify-content: center !important;
    height: 38px !important;
  }

  /* Toast shelf on mobile */
  .toast-shelf {
    left: 14px !important;
    right: 14px !important;
    bottom: 14px !important;
    max-width: none !important;
  }
}

/* ============================================================
   Mobile Phones (Screens <= 640px)
   ============================================================ */

@media (max-width: 640px) {
  .main-topbar {
    height: 50px !important;
    min-height: 50px !important;
    padding: 0 10px !important;
  }

  .mobile-brand-title {
    font-size: 0.98rem !important;
  }

  #exportDropdownMenu {
    right: 0 !important;
    left: auto !important;
    max-width: calc(100vw - 20px) !important;
  }

  .app-layout:not(.is-hidden) {
    padding: 10px 8px 24px 8px !important;
    gap: 12px !important;
  }

  .canvas-pane {
    height: auto !important;
    min-height: auto !important;
    border-radius: 10px !important;
  }

  .canvas-header-bar {
    padding: 8px 10px !important;
  }

  .canvas-toolbar,
  .toolbar-group {
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    flex-wrap: wrap !important;
  }

  .pane-header-title {
    font-size: 0.95rem !important;
  }

  .selection-action-bar {
    max-width: calc(100% - 20px) !important;
    flex-wrap: wrap !important;
  }

  .questions-pane {
    min-height: 44vh !important;
    border-radius: 10px !important;
  }

  .questions-header {
    padding: 8px 10px !important;
  }

  .header-title {
    font-size: 0.95rem !important;
  }

  .questions-header-actions {
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
  }

  .question-hierarchy-bar {
    padding: 10px 12px !important;
  }

  .hierarchy-bar-grid {
    grid-template-columns: 1fr !important;
    gap: 8px !important;
  }

  .question-card {
    padding: 11px 10px !important;
    gap: 8px !important;
    border-radius: 8px !important;
  }

  .q-textarea {
    font-size: 0.83rem !important;
    padding: 7px 9px !important;
    min-height: 54px !important;
  }

  .option-item {
    padding: 5px 6px !important;
    gap: 6px !important;
  }

  .option-letter {
    font-size: 0.74rem !important;
    width: 16px !important;
  }

  .option-input {
    font-size: 0.8rem !important;
  }

  .correct-badge {
    font-size: 0.7rem !important;
    padding: 3px 7px !important;
  }

  .empty-upload-box {
    padding: 20px 12px !important;
    width: 92% !important;
    max-width: 320px !important;
  }

  .upload-icon-circle {
    width: 40px !important;
    height: 40px !important;
    margin-bottom: 8px !important;
  }

  .upload-icon-circle svg {
    width: 20px !important;
    height: 20px !important;
  }

  .empty-title {
    font-size: 1rem !important;
    margin-bottom: 3px !important;
  }

  .empty-desc {
    font-size: 0.74rem !important;
    line-height: 1.38 !important;
    margin-bottom: 10px !important;
  }

  .btn-browse-main {
    padding: 7px 16px !important;
    font-size: 0.78rem !important;
  }

  .upload-formats-hint {
    margin-top: 6px !important;
    font-size: 0.66rem !important;
  }

  .page-view {
    padding: 10px 8px 30px 8px !important;
  }

  .page-view-header {
    padding: 10px 12px !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 10px !important;
  }

  .page-view-title {
    font-size: 1rem !important;
  }

  .page-view-desc {
    font-size: 0.72rem !important;
  }

  .qb-filter-bar {
    padding: 10px 12px !important;
    gap: 8px !important;
  }

  .page-view-body {
    padding: 10px !important;
  }

  .qb-session-card {
    padding: 14px !important;
    align-items: stretch !important;
    width: 100% !important;
  }

  .qb-session-actions {
    flex-direction: row !important;
    flex-wrap: wrap !important;
  }

  .qb-session-actions .btn {
    flex: 1 1 auto !important;
  }

  .qb-session-actions .btn-del-session {
    flex: 0 0 36px !important;
    width: 36px !important;
  }

  .admin-users-section {
    padding: 10px 12px !important;
  }

  .header-actions {
    flex-direction: column !important;
  }

  .header-actions .btn {
    width: 100% !important;
  }

  .form-grid-2 {
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }

  .quiz-arena-header {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 10px !important;
    padding: 12px 14px !important;
  }

  .quiz-header-actions {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 6px !important;
    width: 100% !important;
    justify-content: flex-end !important;
  }

  .quiz-scroll-area {
    padding: 12px 10px !important;
  }

  .quiz-score-banner {
    margin: 10px 10px 0 10px !important;
    padding: 10px 12px !important;
  }

  .quiz-opt-btn {
    padding: 8px 10px !important;
    font-size: 0.8rem !important;
  }

  .login-card-container {
    padding: 24px 16px !important;
    border-radius: 16px !important;
    max-width: 360px !important;
  }

  .login-title {
    font-size: 1.25rem !important;
  }

  .login-subtitle {
    font-size: 0.75rem !important;
  }

  .form-input {
    height: 38px !important;
    font-size: 0.82rem !important;
  }

  .btn-login-submit {
    height: 40px !important;
    font-size: 0.88rem !important;
  }
}

/* ============================================================
   Small / Compact Phones (Screens <= 480px)
   ============================================================ */

@media (max-width: 480px) {
  .main-topbar {
    height: 48px !important;
    min-height: 48px !important;
    padding: 0 8px !important;
  }

  .mobile-hamburger-btn {
    width: 34px !important;
    height: 34px !important;
    min-width: 34px !important;
    min-height: 34px !important;
  }

  .mobile-brand-title {
    font-size: 0.92rem !important;
  }

  .app-layout:not(.is-hidden) {
    padding: 8px 6px 20px 6px !important;
    gap: 10px !important;
  }

  .canvas-pane {
    height: auto !important;
    min-height: auto !important;
  }

  .questions-pane {
    min-height: 42vh !important;
  }

  .canvas-header-bar,
  .questions-header {
    padding: 6px 8px !important;
  }

  .pane-header-title,
  .header-title {
    font-size: 0.9rem !important;
  }

  .questions-header-actions {
    gap: 4px !important;
  }

  .questions-header-actions .btn-sm {
    height: 28px !important;
    padding: 0 6px !important;
    font-size: 0.72rem !important;
  }

  .btn-sm {
    height: 30px !important;
    padding: 0 8px !important;
    font-size: 0.74rem !important;
  }

  .empty-upload-box {
    padding: 14px 10px !important;
    max-width: 290px !important;
  }

  .empty-title {
    font-size: 0.92rem !important;
  }

  .empty-desc {
    font-size: 0.7rem !important;
    margin-bottom: 8px !important;
  }

  .btn-browse-main {
    padding: 6px 14px !important;
    font-size: 0.74rem !important;
  }

  .question-hierarchy-bar {
    padding: 8px 8px !important;
  }

  .hierarchy-bar-grid {
    grid-template-columns: 1fr !important;
    gap: 6px !important;
  }

  .hierarchy-input {
    height: 34px !important;
    font-size: 0.8rem !important;
  }

  .hierarchy-label {
    font-size: 0.68rem !important;
  }

  .question-card {
    padding: 8px 8px !important;
    gap: 6px !important;
  }

  .card-top {
    gap: 6px !important;
  }

  .q-textarea {
    font-size: 0.8rem !important;
    padding: 6px 8px !important;
    min-height: 48px !important;
  }

  .option-item {
    padding: 4px 6px !important;
    gap: 5px !important;
  }

  .option-letter {
    font-size: 0.7rem !important;
    width: 14px !important;
  }

  .option-input {
    font-size: 0.76rem !important;
  }

  .page-view {
    padding: 8px 6px 24px 6px !important;
  }

  .page-view-header {
    padding: 8px 10px !important;
  }

  .qb-filter-bar {
    padding: 8px 10px !important;
    gap: 6px !important;
  }

  .qb-filter-select,
  .qb-search-input {
    height: 34px !important;
    font-size: 0.78rem !important;
  }

  .users-table {
    font-size: 0.76rem !important;
  }

  .users-table th,
  .users-table td {
    padding: 7px 8px !important;
  }

  .modal-card {
    width: 96% !important;
    border-radius: 12px !important;
  }

  .modal-header {
    padding: 10px 12px !important;
  }

  .modal-form {
    padding: 10px 12px !important;
    gap: 10px !important;
  }

  .modal-footer {
    padding: 10px 12px !important;
  }

  .form-grid-2 {
    grid-template-columns: 1fr !important;
    gap: 8px !important;
  }

  .login-page-view {
    padding: 12px 8px !important;
  }

  .login-card-container {
    padding: 20px 14px !important;
    border-radius: 14px !important;
  }
}

/* ============================================================
   New Modules Design System: Schools, Students, Assessments & Fees
   ============================================================ */

.form-grid-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}

@media (max-width: 768px) {
  .form-grid-3 {
    grid-template-columns: 1fr;
    gap: 8px;
  }
}

.modal-card-lg {
  max-width: 820px !important;
  width: 94%;
}

.modal-card-xl {
  max-width: 1080px !important;
  width: 95vw !important;
  max-height: 90vh !important;
}

.modal-card-fullscreen {
  width: 96vw !important;
  max-width: 980px !important;
  height: 90vh !important;
  max-height: 860px !important;
  display: flex !important;
  flex-direction: column !important;
  padding: 0 !important;
  overflow: hidden !important;
  border-radius: 14px !important;
  box-shadow: 0 20px 40px -10px rgba(15, 23, 42, 0.22) !important;
  background: #ffffff !important;
}

/* Assessment Player */
.assessment-player-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 24px;
  background: var(--bg-surface, #ffffff);
  border-bottom: 1px solid var(--border-color, #e2e8f0);
  flex-shrink: 0;
  gap: 16px;
}

.player-info {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.player-info .player-title {
  margin: 0;
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--text-primary, #0f172a);
  line-height: 1.3;
}

.player-info .player-meta {
  font-size: 0.82rem;
  color: var(--text-secondary, #64748b);
  line-height: 1.4;
}

.player-header-right {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
}

.player-timer-box {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: #f8fafc;
  color: #1e293b;
  border: 1.5px solid #cbd5e1;
  padding: 6px 14px;
  border-radius: 9999px;
  font-family: var(--font-mono, monospace);
  font-weight: 700;
  font-size: 0.95rem;
  white-space: nowrap;
  transition: all 0.2s ease;
}

.player-timer-box svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  color: inherit;
}

.player-timer-box.timer-warning {
  background: #fffbeb;
  color: #b45309;
  border-color: #fde68a;
}

.player-timer-box.timer-danger {
  background: #fef2f2;
  color: #dc2626;
  border-color: #fecaca;
  animation: pulse 1.5s infinite;
}

.assessment-player-body {
  flex: 1;
  overflow-y: auto;
  padding: 20px 24px 28px 24px;
  background: var(--bg-canvas, #f8fafc);
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-height: 0;
}

.player-question-card {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  padding: 18px 20px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.03);
  display: flex;
  flex-direction: column;
}

.assessment-player-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 24px;
  background: var(--bg-surface, #ffffff);
  border-top: 1px solid var(--border-color, #e2e8f0);
  flex-shrink: 0;
}

/* Assessment Cards */
.assessments-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(360px, 1fr));
  gap: 20px;
}

.assessment-card {
  background: var(--bg-surface, #ffffff);
  border: 1px solid var(--border-color, #e2e8f0);
  border-radius: 12px;
  padding: 20px;
  display: flex;
  flex-direction: column;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.05);
  transition: transform 0.2s, box-shadow 0.2s, border-color 0.2s;
}

.assessment-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px -4px rgba(15, 23, 42, 0.08);
  border-color: #cbd5e1;
}

.assessment-card-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}

.assessment-card-title {
  margin: 0;
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--text-primary, #0f172a);
}

.badge-batch {
  display: inline-block;
  background: #eff6ff;
  color: #1d4ed8;
  border: 1px solid #bfdbfe;
  padding: 2px 8px;
  border-radius: 6px;
  font-size: 0.75rem;
  font-weight: 600;
}

.assessment-card-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 14px;
  font-size: 0.82rem;
  color: var(--text-secondary, #64748b);
}

.assessment-card-meta span {
  display: flex;
  align-items: center;
  gap: 4px;
}

.assessment-card-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  margin-top: auto;
  padding-top: 10px;
  border-top: 1px solid var(--border-color, #f1f5f9);
}

/* Question Picker Box */
.section-label-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 6px;
}

.badge-count {
  background: #f1f5f9;
  color: var(--primary, #1d68ff);
  padding: 2px 8px;
  border-radius: 9999px;
  font-size: 0.75rem;
  font-weight: 700;
}

.question-picker-box {
  max-height: 260px;
  overflow-y: auto;
  border: 1px solid var(--border-color, #e2e8f0);
  border-radius: 8px;
  padding: 10px;
  background: var(--bg-surface, #ffffff);
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.picker-q-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 6px;
  border: 1px solid #f1f5f9;
  background: #f8fafc;
  cursor: pointer;
}

.picker-q-item:hover {
  background: #eff6ff;
  border-color: #bfdbfe;
}

.picker-q-item input[type="checkbox"] {
  margin-top: 3px;
  cursor: pointer;
}

.picker-q-details {
  flex: 1;
  font-size: 0.85rem;
  color: var(--text-primary, #0f172a);
}

.picker-q-meta {
  font-size: 0.75rem;
  color: var(--text-secondary, #64748b);
  margin-top: 3px;
  display: flex;
  gap: 8px;
}

/* Fee Management Stats & Tables */
.fee-stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 14px;
  margin-bottom: 16px;
}

.fee-stat-card {
  border-radius: 12px;
  padding: 18px 20px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  border: 1px solid var(--border-color, #e2e8f0);
}

.fee-stat-card.card-paid {
  background: #f0fdf4;
  border-color: #bbf7d0;
}

.fee-stat-card.card-paid .fee-stat-label {
  color: #166534;
}

.fee-stat-card.card-paid .fee-stat-value {
  color: #15803d;
}

.fee-stat-card.card-pending {
  background: #fef2f2;
  border-color: #fecaca;
}

.fee-stat-card.card-pending .fee-stat-label {
  color: #991b1b;
}

.fee-stat-card.card-pending .fee-stat-value {
  color: #b91c1c;
}

.fee-stat-label {
  font-size: 0.82rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.fee-stat-value {
  font-size: 1.6rem;
  font-weight: 700;
  font-family: var(--font-mono, monospace);
}

.status-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 3px 10px;
  border-radius: 9999px;
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  white-space: nowrap;
}

.status-badge.status-live,
.status-badge.live {
  background: #ecfdf5;
  color: #065f46;
  border: 1px solid #a7f3d0;
}

.status-badge.status-upcoming,
.status-badge.upcoming {
  background: #fffbeb;
  color: #92400e;
  border: 1px solid #fde68a;
}

.status-badge.status-expired,
.status-badge.expired {
  background: #fef2f2;
  color: #991b1b;
  border: 1px solid #fecaca;
}

.status-badge.status-paid,
.status-badge.paid {
  background: #dcfce7;
  color: #15803d;
  border: 1px solid #86efac;
}

.status-badge.status-pending,
.status-badge.pending {
  background: #fee2e2;
  color: #b91c1c;
  border: 1px solid #fca5a5;
}

/* Class Badge - strictly keep 'th', 'st', 'nd', 'rd' in lowercase */
.class-badge,
.status-badge.class-badge,
.badge-class,
.qb-badge-class {
  text-transform: none !important;
  font-family: inherit;
  white-space: nowrap !important;
}

/* Ensure Class & Batch cell never wraps onto multiple lines */
.cell-class-batch {
  white-space: nowrap !important;
}

.class-batch-wrap {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  flex-wrap: nowrap !important;
  white-space: nowrap !important;
}

/* Fee Action Toggle Buttons */
.btn-fee-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font-size: 0.8rem;
  font-weight: 600;
  padding: 5px 12px;
  border-radius: 7px;
  cursor: pointer;
  transition: all 0.2s ease;
  min-width: 135px;
  border: none;
  outline: none;
  white-space: nowrap;
}

/* Mark as Received Button (When status is Pending) */
.btn-fee-mark-received,
.btn-fee-pay {
  background: #16a34a;
  color: #ffffff !important;
  border: 1px solid #15803d;
  box-shadow: 0 1px 3px rgba(22, 163, 74, 0.2);
}

.btn-fee-mark-received:hover,
.btn-fee-pay:hover {
  background: #15803d;
  border-color: #166534;
  color: #ffffff !important;
  transform: translateY(-1px);
  box-shadow: 0 4px 8px rgba(22, 163, 74, 0.3);
}

.btn-fee-mark-received:active,
.btn-fee-pay:active {
  transform: translateY(0);
}

/* Mark as Pending Button (When status is Paid - can toggle back if clicked by mistake) */
.btn-fee-mark-pending,
.btn-fee-paid {
  background: #fffbeb;
  color: #b45309 !important;
  border: 1px solid #fcd34d;
  box-shadow: 0 1px 2px rgba(245, 158, 11, 0.1);
}

.btn-fee-mark-pending:hover,
.btn-fee-paid:hover {
  background: #fef3c7;
  border-color: #f59e0b;
  color: #92400e !important;
  transform: translateY(-1px);
  box-shadow: 0 3px 6px rgba(245, 158, 11, 0.2);
}

.btn-fee-mark-pending:active,
.btn-fee-paid:active {
  transform: translateY(0);
}

.status-badge.active {
  background: #eff6ff;
  color: #1d4ed8;
  border: 1px solid #93c5fd;
}

.fee-student-info-box {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  padding: 12px 14px;
  font-size: 0.88rem;
  color: var(--text-primary, #0f172a);
  display: flex;
  flex-direction: column;
  gap: 6px;
  justify-content: center;
}

.fee-student-info-box .fee-info-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.fee-student-info-box .fee-info-student-title {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.fee-student-info-box .fee-info-name {
  font-weight: 600;
  font-size: 0.92rem;
  color: #0f172a;
}

.fee-student-info-box .fee-info-meta {
  font-size: 0.78rem;
  color: #0369a1;
  background: #e0f2fe;
  padding: 2px 7px;
  border-radius: 4px;
  font-weight: 600;
}

.fee-student-info-box .fee-info-amount {
  font-weight: 700;
  font-size: 1.05rem;
  color: #0f766e;
  font-family: var(--font-mono, monospace);
  white-space: nowrap;
}

.fee-student-info-box .fee-info-sub {
  font-size: 0.82rem;
  color: #64748b;
  display: flex;
  align-items: center;
  gap: 6px;
}

.fee-student-info-box .fee-info-sub strong {
  color: #334155;
  font-weight: 600;
}

/* Permissions Checklist */
.permissions-checklist {
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-height: 340px;
  overflow-y: auto;
  padding: 4px;
}

.perm-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  padding: 10px 14px;
  cursor: pointer;
  transition: background 0.15s;
}

.perm-item:hover {
  background: #f1f5f9;
}

.perm-item input[type="checkbox"] {
  margin-top: 4px;
  width: 16px;
  height: 16px;
  cursor: pointer;
}

.perm-item strong {
  display: block;
  font-size: 0.9rem;
  color: var(--text-primary, #0f172a);
}

.perm-item span {
  display: block;
  font-size: 0.78rem;
  color: var(--text-secondary, #64748b);
  margin-top: 2px;
}

/* CSV Template Notice */
.csv-template-notice {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  background: #eff6ff;
  border: 1px solid #bfdbfe;
  border-radius: 10px;
  padding: 12px 16px;
  font-size: 0.85rem;
  color: #1e40af;
  margin-bottom: 12px;
}

.csv-template-notice p {
  margin: 4px 0 0 0;
  color: #1d4ed8;
  font-size: 0.8rem;
}

.bulk-status-box {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  padding: 10px 14px;
  font-size: 0.85rem;
  color: var(--text-primary, #0f172a);
}

/* Option Input Row */
.option-input-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
}

.option-input-row .option-tag {
  font-weight: 700;
  font-family: var(--font-mono, monospace);
  width: 24px;
  text-align: center;
  color: var(--text-secondary, #64748b);
}

.option-input-row input[type="text"] {
  flex: 1;
}

.option-correct-radio {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 0.78rem;
  color: var(--text-secondary, #64748b);
  cursor: pointer;
  white-space: nowrap;
}

/* ============================================================
   Comprehensive Mobile & Tablet Layout System (All Pages)
   ============================================================ */

@media (max-width: 768px) {

  /* Prevent horizontal window scroll across all pages */
  html,
  body {
    overflow-x: hidden !important;
    width: 100% !important;
    max-width: 100vw !important;
    position: relative !important;
  }

  .app-container,
  .app-main-content {
    width: 100% !important;
    max-width: 100vw !important;
    overflow-x: hidden !important;
    box-sizing: border-box !important;
  }

  /* Page Views & Containers */
  .page-view {
    padding: 12px 10px 32px 10px !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    overflow-x: hidden !important;
  }

  .page-view-container {
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
    gap: 12px !important;
    box-sizing: border-box !important;
  }

  /* Page Headers & Action Bars */
  .page-view-header {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    padding: 12px 14px !important;
    gap: 12px !important;
    border-radius: 12px !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
  }

  .page-view-header-info {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    width: 100% !important;
    min-width: 0 !important;
  }

  .page-view-icon {
    width: 32px !important;
    height: 32px !important;
    min-width: 32px !important;
    max-width: 32px !important;
    flex: 0 0 32px !important;
    border-radius: 8px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-sizing: border-box !important;
  }

  .page-view-icon svg {
    width: 16px !important;
    height: 16px !important;
    flex-shrink: 0 !important;
  }

  .page-view-header-info>div:not(.page-view-icon) {
    min-width: 0 !important;
    flex: 1 1 auto !important;
  }

  .page-view-title {
    font-size: 1.05rem !important;
    font-weight: 700 !important;
    margin: 0 !important;
    word-break: break-word !important;
    line-height: 1.25 !important;
  }

  .page-view-desc {
    font-size: 0.78rem !important;
    margin: 2px 0 0 0 !important;
    line-height: 1.35 !important;
    color: var(--text-secondary, #64748b) !important;
  }

  /* Header Actions - Wrap nicely without horizontal overflow */
  .page-view-actions {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: stretch !important;
    gap: 8px !important;
    width: 100% !important;
    max-width: 100% !important;
    justify-content: flex-start !important;
    box-sizing: border-box !important;
  }

  .page-view-actions .btn {
    flex: 1 1 calc(50% - 6px) !important;
    min-width: 0 !important;
    font-size: 0.8rem !important;
    padding: 8px 10px !important;
    height: auto !important;
    min-height: 36px !important;
    white-space: normal !important;
    text-align: center !important;
    justify-content: center !important;
    box-sizing: border-box !important;
  }

  .page-view-actions .btn svg {
    flex-shrink: 0 !important;
    width: 15px !important;
    height: 15px !important;
  }

  /* Filter Bars across All Pages */
  .qb-filter-bar {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 10px !important;
    padding: 12px 14px !important;
    border-radius: 12px !important;
    width: 100% !important;
    max-width: 100% !important;
    margin-bottom: 14px !important;
    box-sizing: border-box !important;
  }

  .qb-filter-bar[style*="display: none"],
  .qb-filter-bar.hidden {
    display: none !important;
  }

  .qb-filter-group {
    width: 100% !important;
    min-width: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 4px !important;
  }

  .qb-filter-group[style*="display: none"],
  .qb-filter-group.hidden {
    display: none !important;
  }

  .qb-filter-select,
  .qb-search-input,
  .qb-search-box {
    width: 100% !important;
    min-width: 0 !important;
    height: 38px !important;
    box-sizing: border-box !important;
    font-size: 0.85rem !important;
  }

  /* Page View Body & Cards Container */
  .page-view-body,
  .admin-users-section {
    padding: 12px !important;
    border-radius: 12px !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    overflow-x: hidden !important;
  }

  /* Assessment Grid & Cards on Mobile */
  .assessments-grid {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 14px !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  .assessment-card {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    padding: 16px 14px !important;
    border-radius: 12px !important;
    overflow: hidden !important;
  }

  /* Tables & Horizontal Scroll Wrappers */
  .table-responsive {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    box-sizing: border-box !important;
    margin: 0 !important;
    border-radius: 8px !important;
  }

  .table-responsive[style*="display: none"],
  .table-responsive[style*="display:none"] {
    display: none !important;
  }

  .users-table {
    width: 100% !important;
    min-width: 520px !important;
    font-size: 0.8rem !important;
  }

  .users-table th,
  .users-table td {
    padding: 8px 10px !important;
    white-space: nowrap !important;
  }

  /* Fee Summary Cards */
  .fee-stats-grid {
    grid-template-columns: 1fr !important;
    gap: 10px !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  .fee-stat-card {
    padding: 14px 16px !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  /* Question Bank Session Cards */
  .qb-session-card {
    padding: 14px 12px !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  .qb-session-actions {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
    width: 100% !important;
  }

  .qb-session-actions .btn {
    flex: 1 1 calc(50% - 6px) !important;
    min-width: 120px !important;
    justify-content: center !important;
    box-sizing: border-box !important;
  }

  .qb-session-actions .btn-del-session {
    flex: 0 0 38px !important;
    min-width: 38px !important;
    width: 38px !important;
  }

  /* Modals on Mobile & Tablet */
  .modal-backdrop {
    padding: 10px 8px !important;
    align-items: center !important;
    justify-content: center !important;
    box-sizing: border-box !important;
  }

  .modal-card,
  .modal-card-lg,
  .modal-card-xl,
  .modal-card-fullscreen {
    width: 100% !important;
    max-width: 100% !important;
    max-height: 94vh !important;
    max-height: 94dvh !important;
    margin: 0 auto !important;
    border-radius: 12px !important;
    box-sizing: border-box !important;
    overflow-y: auto !important;
  }

  .modal-header {
    display: flex !important;
    align-items: center !important;
    padding: 12px 14px !important;
    gap: 10px !important;
    box-sizing: border-box !important;
  }

  .modal-header-icon {
    width: 32px !important;
    height: 32px !important;
    min-width: 32px !important;
    max-width: 32px !important;
    flex: 0 0 32px !important;
    border-radius: 8px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-sizing: border-box !important;
  }

  .modal-header-icon svg {
    width: 16px !important;
    height: 16px !important;
    flex-shrink: 0 !important;
  }

  .modal-header>div:not(.modal-header-icon) {
    min-width: 0 !important;
    flex: 1 1 auto !important;
  }

  .modal-close-btn {
    width: 30px !important;
    height: 30px !important;
    min-width: 30px !important;
    max-width: 30px !important;
    flex: 0 0 30px !important;
    padding: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 6px !important;
  }

  .modal-close-btn svg {
    width: 16px !important;
    height: 16px !important;
  }

  .modal-title {
    font-size: 1.05rem !important;
    margin: 0 !important;
    line-height: 1.25 !important;
  }

  .modal-subtitle {
    font-size: 0.76rem !important;
    margin: 2px 0 0 0 !important;
    line-height: 1.35 !important;
  }

  .modal-form {
    padding: 12px 14px !important;
    gap: 12px !important;
    box-sizing: border-box !important;
  }

  .modal-footer {
    padding: 12px 14px !important;
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
    box-sizing: border-box !important;
  }

  .modal-footer .btn {
    flex: 1 1 calc(50% - 6px) !important;
    min-width: 110px !important;
    justify-content: center !important;
    box-sizing: border-box !important;
  }

  .form-grid-2,
  .form-grid-3,
  .modal-form div[style*="grid-template-columns: 1fr 1fr"] {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }

  /* Assessment Card Action Button Responsive Handling */
  .assessment-card div[style*="grid-template-columns"] {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 8px !important;
  }

  .assessment-card .btn {
    font-size: 0.82rem !important;
    padding: 7px 10px !important;
    box-sizing: border-box !important;
  }

  .assessment-card div[style*="display:flex; gap:8px; margin-top:8px"] {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
  }

  .assessment-card .btn-card-test-history,
  .assessment-card .btn-card-test-result {
    flex: 1 1 calc(50% - 24px) !important;
    min-width: 105px !important;
    justify-content: center !important;
  }

  .assessment-card .btn-del-assessment {
    flex: 0 0 34px !important;
    width: 34px !important;
    height: 34px !important;
    padding: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
  }
}

@media (max-width: 480px) {

  /* Compact Smartphone Screens (iPhone SE, Galaxy S, etc.) */
  .page-view {
    padding: 8px 6px 28px 6px !important;
  }

  .page-view-header {
    padding: 10px 12px !important;
    gap: 10px !important;
  }

  .page-view-icon {
    width: 28px !important;
    height: 28px !important;
    min-width: 28px !important;
    max-width: 28px !important;
    flex: 0 0 28px !important;
    border-radius: 6px !important;
  }

  .page-view-icon svg {
    width: 14px !important;
    height: 14px !important;
  }

  .page-view-title {
    font-size: 0.98rem !important;
  }

  .modal-header-icon {
    width: 28px !important;
    height: 28px !important;
    min-width: 28px !important;
    max-width: 28px !important;
    flex: 0 0 28px !important;
    border-radius: 6px !important;
  }

  .modal-header-icon svg {
    width: 14px !important;
    height: 14px !important;
  }

  .modal-title {
    font-size: 0.98rem !important;
  }

  .page-view-actions {
    flex-direction: column !important;
    gap: 6px !important;
  }

  .page-view-actions .btn {
    flex: 1 1 100% !important;
    width: 100% !important;
    justify-content: center !important;
  }

  .assessment-card .btn-card-test-history,
  .assessment-card .btn-card-test-result {
    flex: 1 1 100% !important;
    width: 100% !important;
  }

  .assessment-card .btn-del-assessment {
    flex: 1 1 100% !important;
    width: 100% !important;
  }

  /* Modal Footer Buttons Stacked Full Width on Tiny Screens */
  .modal-footer .btn {
    flex: 1 1 100% !important;
    width: 100% !important;
  }

  /* Question Bank Actions on Tiny Screens */
  .qb-session-actions .btn:not(.btn-del-session) {
    flex: 1 1 100% !important;
    width: 100% !important;
  }
}

/* ============================================================
   Unified Consistent Alignment & Table Refinements
   ============================================================ */

.modal-filter-bar {
  margin: 0 0 16px 0 !important;
  padding: 12px 16px !important;
  background: #f8fafc !important;
  border-radius: 10px !important;
  border: 1px solid #e2e8f0 !important;
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 14px !important;
  align-items: flex-end !important;
}

.modal-filter-bar .qb-filter-group {
  display: flex !important;
  flex-direction: column !important;
  gap: 6px !important;
}

.modal-filter-bar .qb-filter-label {
  font-size: 0.72rem !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.05em !important;
  color: #64748b !important;
}

.modal-filter-bar .qb-filter-select {
  height: 38px !important;
  padding: 8px 12px !important;
  font-size: 0.84rem !important;
  border: 1px solid #cbd5e1 !important;
  border-radius: 8px !important;
  background-color: #ffffff !important;
  color: #1e293b !important;
  font-family: inherit !important;
  transition: border-color 0.15s ease, box-shadow 0.15s ease !important;
}

.modal-filter-bar .qb-filter-select:focus {
  border-color: var(--primary, #1d68ff) !important;
  box-shadow: 0 0 0 3px rgba(29, 104, 255, 0.15) !important;
  outline: none !important;
}

/* Consistent Table Typography & Alignment across All Pages */
.users-table th {
  padding: 12px 16px !important;
  font-size: 0.72rem !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.05em !important;
  color: #64748b !important;
  background: #f8fafc !important;
  border-bottom: 1.5px solid #e2e8f0 !important;
  vertical-align: middle !important;
}

.users-table td {
  padding: 13px 16px !important;
  vertical-align: middle !important;
  border-bottom: 1px solid #f1f5f9 !important;
  font-size: 0.84rem !important;
  color: #1e293b !important;
}

.users-table td .status-badge {
  vertical-align: middle !important;
}

/* Page View Layout Consistency */
.page-view-container {
  width: 100% !important;
  max-width: 1360px !important;
  margin: 0 auto !important;
  box-sizing: border-box !important;
}

/* ============================================================
   Add Question & Edit Question Modal: Complete Mobile Alignment
   ============================================================ */

/* Base Desktop Styles */
.option-input-row {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  box-sizing: border-box;
}

.option-input-row .option-marker {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-weight: 600;
  cursor: pointer;
  min-width: 44px;
  flex-shrink: 0;
}

.option-input-row .manual-opt-text,
.option-input-row .edit-opt-text {
  flex: 1;
  min-width: 0;
}

.question-modal-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
  padding: 14px 20px;
  background: #f8fafc;
  border-top: 1px solid var(--border-subtle, #e2e8f0);
  width: 100%;
  box-sizing: border-box;
}

.question-modal-footer .modal-footer-left {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.question-modal-footer .modal-footer-right {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-left: auto;
  flex-wrap: wrap;
}

/* Tablet & Mobile Viewports (<= 768px) */
@media (max-width: 768px) {

  #createQuestionModal,
  #editQuestionModal {
    padding: 8px 6px !important;
    align-items: center !important;
    justify-content: center !important;
  }

  #createQuestionModal .modal-card,
  #editQuestionModal .modal-card {
    width: 100% !important;
    max-width: calc(100vw - 12px) !important;
    max-height: 94vh !important;
    max-height: 94dvh !important;
    margin: 0 auto !important;
    border-radius: 14px !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.2), 0 8px 10px -6px rgba(0, 0, 0, 0.1) !important;
  }

  #createQuestionModal .modal-header,
  #editQuestionModal .modal-header {
    padding: 14px 16px !important;
    gap: 12px !important;
    display: flex !important;
    align-items: center !important;
    flex-shrink: 0 !important;
    background: #ffffff !important;
    border-bottom: 1px solid #e2e8f0 !important;
    box-sizing: border-box !important;
  }

  #createQuestionModal .modal-header-icon,
  #editQuestionModal .modal-header-icon {
    width: 34px !important;
    height: 34px !important;
    padding: 7px !important;
    flex-shrink: 0 !important;
    border-radius: 8px !important;
  }

  #createQuestionModal .modal-header>div:nth-child(2),
  #editQuestionModal .modal-header>div:nth-child(2) {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    padding-right: 6px !important;
  }

  #createQuestionModal .modal-title,
  #editQuestionModal .modal-title {
    font-size: 1.1rem !important;
    font-weight: 700 !important;
    margin: 0 !important;
    line-height: 1.25 !important;
    color: #0f172a !important;
  }

  #createQuestionModal .modal-subtitle,
  #editQuestionModal .modal-subtitle {
    font-size: 0.78rem !important;
    line-height: 1.3 !important;
    margin-top: 3px !important;
    color: #64748b !important;
  }

  #createQuestionModal .modal-close-btn,
  #editQuestionModal .modal-close-btn {
    flex-shrink: 0 !important;
    margin-left: auto !important;
    padding: 4px !important;
    width: 28px !important;
    height: 28px !important;
  }

  #createQuestionModal .modal-form,
  #editQuestionModal .modal-form {
    padding: 14px 16px !important;
    gap: 14px !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    flex: 1 1 auto !important;
    box-sizing: border-box !important;
  }

  /* Form Grids: Single column stack on mobile */
  #createQuestionModal .form-grid-3,
  #createQuestionModal .form-grid-2,
  #editQuestionModal .form-grid-3,
  #editQuestionModal .form-grid-2 {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 10px !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  #createQuestionModal .form-field-group,
  #editQuestionModal .form-field-group {
    width: 100% !important;
    box-sizing: border-box !important;
    margin: 0 !important;
  }

  #createQuestionModal .form-label,
  #editQuestionModal .form-label {
    font-size: 0.85rem !important;
    font-weight: 600 !important;
    margin-bottom: 5px !important;
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 4px !important;
    color: #334155 !important;
  }

  #createQuestionModal .form-label .opt-label,
  #editQuestionModal .form-label .opt-label {
    font-size: 0.74rem !important;
    font-weight: 400 !important;
    color: #64748b !important;
  }

  #createQuestionModal .form-input,
  #editQuestionModal .form-input {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    font-size: 0.88rem !important;
    padding: 8px 12px !important;
    border-radius: 8px !important;
    height: 38px !important;
    border: 1px solid #cbd5e1 !important;
  }

  #createQuestionModal textarea.form-input,
  #editQuestionModal textarea.form-input {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    font-size: 0.88rem !important;
    padding: 10px 12px !important;
    resize: vertical !important;
    min-height: 72px !important;
    height: auto !important;
    line-height: 1.4 !important;
  }

  /* Question Image Upload Container */
  #createQuestionModal .form-field-group>div[style*="display:flex; align-items:center; gap:10px"],
  #editQuestionModal .form-field-group>div[style*="display:flex; align-items:center; gap:10px"] {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
    align-items: center !important;
    width: 100% !important;
    margin-top: 2px !important;
    box-sizing: border-box !important;
  }

  #createQuestionModal .form-field-group label.btn-secondary,
  #editQuestionModal .form-field-group label.btn-secondary {
    font-size: 0.82rem !important;
    padding: 7px 12px !important;
    height: 36px !important;
    box-sizing: border-box !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    flex: 0 0 auto !important;
    max-width: 100% !important;
    border-radius: 8px !important;
    cursor: pointer !important;
  }

  #manualQImagePreviewBox,
  #editQImagePreviewBox {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    padding: 3px 8px 3px 5px !important;
    background: #ffffff !important;
    border-radius: 8px !important;
    border: 1px solid #cbd5e1 !important;
    min-height: 36px !important;
    height: auto !important;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.06) !important;
  }

  #manualQImagePreviewBox[style*="display: none"],
  #manualQImagePreviewBox[style*="display:none"],
  #editQImagePreviewBox[style*="display: none"],
  #editQImagePreviewBox[style*="display:none"] {
    display: none !important;
  }

  #manualQImagePreview,
  #editQImagePreview {
    height: 28px !important;
    max-width: 55px !important;
    object-fit: contain !important;
    border-radius: 4px !important;
    background: #fff !important;
    border: 1px solid #e2e8f0 !important;
  }

  /* Dynamic Area & Options List (Matching Desktop Clean Row Layout) */
  .manual-q-dynamic-area {
    width: 100% !important;
    box-sizing: border-box !important;
  }

  .manual-q-dynamic-area>div[style*="justify-content:space-between"] {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    gap: 4px !important;
    margin-bottom: 8px !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  /* Single horizontal row layout matching Desktop */
  .option-input-row {
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    width: 100% !important;
    box-sizing: border-box !important;
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    padding: 0 !important;
    margin-bottom: 2px !important;
  }

  .option-input-row .option-marker {
    display: inline-flex !important;
    align-items: center !important;
    gap: 4px !important;
    font-weight: 600 !important;
    font-size: 0.88rem !important;
    cursor: pointer !important;
    min-width: 36px !important;
    flex-shrink: 0 !important;
    color: #0f172a !important;
  }

  .option-input-row .option-marker input[type="radio"],
  .option-input-row .option-marker input[type="checkbox"] {
    width: 16px !important;
    height: 16px !important;
    margin: 0 !important;
    cursor: pointer !important;
    accent-color: #1d68ff !important;
  }

  .option-input-row .manual-opt-text,
  .option-input-row .edit-opt-text {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    width: auto !important;
    font-size: 0.85rem !important;
    padding: 7px 10px !important;
    height: 36px !important;
    border-radius: 8px !important;
    border: 1px solid #cbd5e1 !important;
    box-sizing: border-box !important;
  }

  .option-input-row label.btn {
    font-size: 0.78rem !important;
    padding: 6px 9px !important;
    height: 36px !important;
    margin: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 4px !important;
    flex-shrink: 0 !important;
    box-sizing: border-box !important;
    border-radius: 8px !important;
    white-space: nowrap !important;
  }

  /* Option Image Preview Box: completely hidden unless image is uploaded */
  .option-input-row .opt-img-preview-box {
    align-items: center !important;
    gap: 4px !important;
    background: #f1f5f9 !important;
    padding: 2px 6px !important;
    border-radius: 6px !important;
    border: 1px solid #cbd5e1 !important;
    flex-shrink: 0 !important;
    height: 36px !important;
    box-sizing: border-box !important;
  }

  .option-input-row .opt-img-preview-box[style*="display: none"],
  .option-input-row .opt-img-preview-box[style*="display:none"] {
    display: none !important;
  }

  .option-input-row .opt-img-preview {
    height: 26px !important;
    max-width: 40px !important;
    object-fit: contain !important;
    border-radius: 2px !important;
    background: #fff !important;
    border: 1px solid #e2e8f0 !important;
  }

  .option-input-row .btn-remove-manual-option,
  .option-input-row .btn-remove-edit-option-row {
    padding: 0 10px !important;
    font-size: 0.85rem !important;
    height: 36px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 8px !important;
    color: #ef4444 !important;
    background: #fee2e2 !important;
    border: 1px solid #fecaca !important;
    flex-shrink: 0 !important;
    box-sizing: border-box !important;
    cursor: pointer !important;
    margin-left: 0 !important;
  }

  /* Add Option button matches Desktop: clean small button on left */
  #btnAddManualOption,
  #btnAddEditOption {
    display: inline-flex !important;
    width: auto !important;
    align-items: center !important;
    gap: 6px !important;
    padding: 7px 14px !important;
    font-size: 0.82rem !important;
    font-weight: 500 !important;
    border-radius: 6px !important;
    box-sizing: border-box !important;
    margin-top: 4px !important;
  }

  /* True / False container */
  .manual-q-dynamic-area div[style*="padding:12px; background:#f8fafc"] {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 16px !important;
    padding: 10px 14px !important;
    width: 100% !important;
    box-sizing: border-box !important;
    border-radius: 8px !important;
  }

  /* Question Modal Footer Mobile */
  .question-modal-footer {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    flex-wrap: wrap !important;
    gap: 10px !important;
    padding: 12px 16px !important;
    background: #f8fafc !important;
    border-top: 1px solid #e2e8f0 !important;
    width: 100% !important;
    box-sizing: border-box !important;
    flex-shrink: 0 !important;
  }

  .question-modal-footer .modal-footer-left {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    flex: 0 0 auto !important;
  }

  .question-modal-footer .modal-footer-right {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    margin-left: auto !important;
    flex-wrap: wrap !important;
  }

  .question-modal-footer .btn {
    font-size: 0.82rem !important;
    padding: 8px 12px !important;
    height: 36px !important;
    border-radius: 8px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    white-space: nowrap !important;
    box-sizing: border-box !important;
  }

  #btnCancelCreateQuestion,
  #btnCancelEditQuestion {
    min-width: 72px !important;
  }

  #tempQuestionsBadge {
    font-size: 0.76rem !important;
    padding: 6px 10px !important;
    white-space: nowrap !important;
    box-sizing: border-box !important;
  }
}

/* Compact Smartphones (<= 420px) */
@media (max-width: 420px) {
  .question-modal-footer {
    padding: 10px 12px !important;
    gap: 8px !important;
  }

  .question-modal-footer .modal-footer-right {
    width: 100% !important;
    justify-content: flex-end !important;
    gap: 6px !important;
  }

  .question-modal-footer .modal-footer-right .btn {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    font-size: 0.8rem !important;
    padding: 8px 6px !important;
  }
}

/* ============================================================
   RBAC Manager Permissions Styles
   ============================================================ */

.rbac-access-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 18px;
  background: var(--bg-subtle, #f8fafc);
  border: 1px solid var(--border-color, #e2e8f0);
  border-radius: 12px;
  margin-bottom: 14px;
  transition: all 180ms ease;
}

.rbac-access-card.is-disabled {
  background: #fef2f2;
  border-color: #fecaca;
}

.rbac-access-title {
  font-weight: 700;
  font-size: 0.92rem;
  color: var(--text-primary, #0f172a);
}

.rbac-access-desc {
  font-size: 0.76rem;
  color: var(--text-muted, #64748b);
  margin-top: 2px;
}

/* Switch Toggle */
.rbac-switch {
  position: relative;
  display: inline-block;
  width: 48px;
  height: 26px;
  flex-shrink: 0;
}

.rbac-switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

.rbac-slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #cbd5e1;
  transition: 0.25s;
  border-radius: 26px;
}

.rbac-slider:before {
  position: absolute;
  content: "";
  height: 20px;
  width: 20px;
  left: 3px;
  bottom: 3px;
  background-color: white;
  transition: 0.25s;
  border-radius: 50%;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}

.rbac-switch input:checked+.rbac-slider {
  background-color: #10b981;
}

.rbac-switch input:checked+.rbac-slider:before {
  transform: translateX(22px);
}

.rbac-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--border-color, #e2e8f0);
}

.rbac-toolbar-label {
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--text-secondary, #475569);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.rbac-toolbar-actions {
  display: flex;
  gap: 6px;
}

.rbac-modules-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  max-height: 52vh;
  overflow-y: auto;
  padding-right: 4px;
}

@media (max-width: 640px) {
  .rbac-modules-grid {
    grid-template-columns: 1fr;
  }
}

.rbac-module-box {
  background: var(--bg-surface, #ffffff);
  border: 1px solid var(--border-color, #e2e8f0);
  border-radius: 10px;
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.rbac-module-header {
  padding-bottom: 6px;
  border-bottom: 1px solid var(--border-color, #f1f5f9);
}

.rbac-features-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.rbac-checkbox-label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.82rem;
  color: var(--text-primary, #1e293b);
  cursor: pointer;
  user-select: none;
}

.rbac-checkbox-label input[type="checkbox"] {
  width: 15px;
  height: 15px;
  border-radius: 4px;
  accent-color: #7c3aed;
  cursor: pointer;
}

.rbac-checkbox-label.rbac-subfeature {
  padding-left: 20px;
  font-size: 0.76rem;
  color: var(--text-secondary, #64748b);
}

.rbac-status-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 0.7rem;
  font-weight: 600;
  padding: 2px 7px;
  border-radius: 12px;
  margin-top: 4px;
}

.rbac-status-badge.active {
  background: #ecfdf5;
  color: #059669;
  border: 1px solid #a7f3d0;
}

.rbac-status-badge.disabled {
  background: #fef2f2;
  color: #dc2626;
  border: 1px solid #fecaca;
}

/* ============================================================
   Global Multi-Device Responsive System (Desktop, Tablet, Mobile)
   Guarantees all UI features and elements remain identical and
   properly aligned across all screen resolutions.
   ============================================================ */

/* Tablet & Medium Screen Layout (769px to 1024px) */
@media (min-width: 769px) and (max-width: 1024px) {
  .qb-filter-bar {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 12px;
    padding: 14px 18px;
    margin-bottom: 18px;
    width: 100%;
    box-sizing: border-box;
  }

  .qb-filter-group {
    flex: 1 1 calc(50% - 8px);
    min-width: 140px;
  }

  .qb-search-group {
    flex: 1 1 100%;
    min-width: 180px;
  }

  .assessments-grid {
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 16px;
  }
}

/* Desktop Wide Screen Layout (1025px and up) */
@media (min-width: 1025px) {
  .qb-filter-bar {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 14px;
    padding: 16px 20px;
    margin-bottom: 20px;
    width: 100%;
    box-sizing: border-box;
  }

  .qb-filter-group {
    flex: 0 1 160px;
    min-width: 140px;
  }

  .qb-search-group {
    flex: 1 1 240px;
    min-width: 200px;
  }

  .assessments-grid {
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 20px;
  }
}

/* Student Login -> Assessments page: Remove Class, Batch, and Search filters completely */
html.role-student #assessFilterBar,
html.role-student #assessClassFilterGroup,
html.role-student #assessBatchFilterGroup,
html.role-student #assessSearchGroup,
body.role-student #assessFilterBar,
body.role-student #assessClassFilterGroup,
body.role-student #assessBatchFilterGroup,
body.role-student #assessSearchGroup {
  display: none !important;
  visibility: hidden !important;
  height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  overflow: hidden !important;
  pointer-events: none !important;
}

/* Student Login -> Strictly remove Face Attendance menu from sidebar */
html.role-student #tabNavFAttendance,
html.role-student #sidebarNavFaceAttendance,
body.role-student #tabNavFAttendance,
body.role-student #sidebarNavFaceAttendance {
  display: none !important;
  visibility: hidden !important;
  height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  overflow: hidden !important;
  pointer-events: none !important;
}

/* ============================================================
   Question & Option Image Preview Badges & Modern Remove Buttons
   ============================================================ */

.q-image-preview-badge,
#manualQImagePreviewBox,
#editQImagePreviewBox {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  padding: 4px 10px 4px 6px;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.05), 0 1px 2px -1px rgba(15, 23, 42, 0.03);
  max-width: 100%;
  box-sizing: border-box;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  vertical-align: middle;
}

.q-image-preview-badge:hover,
#manualQImagePreviewBox:hover,
#editQImagePreviewBox:hover {
  border-color: #cbd5e1;
  box-shadow: 0 2px 6px rgba(15, 23, 42, 0.08);
}

.q-image-preview-thumb-wrap {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #f8fafc;
  border: 1px solid #cbd5e1;
  border-radius: 5px;
  padding: 2px;
  height: 32px;
  min-width: 32px;
  max-width: 65px;
  overflow: hidden;
  box-sizing: border-box;
}

.q-image-preview-thumb,
#manualQImagePreview,
#editQImagePreview {
  height: 28px;
  max-width: 58px;
  object-fit: contain;
  display: block;
  border-radius: 3px;
  background: #ffffff;
}

/* Modern Clean Remove Button for Question Image */
.btn-remove-preview-img,
#btnRemoveQImage,
#btnRemoveEditQImage {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  background: #fef2f2;
  color: #dc2626;
  border: 1px solid #fecaca;
  border-radius: 6px;
  padding: 5px 11px;
  font-family: var(--font-body);
  font-size: 0.8rem;
  font-weight: 600;
  cursor: pointer;
  line-height: 1;
  white-space: nowrap;
  transition: all 0.18s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: 0 1px 2px rgba(220, 38, 38, 0.05);
  user-select: none;
  height: 28px;
  box-sizing: border-box;
}

.btn-remove-preview-img svg,
#btnRemoveQImage svg,
#btnRemoveEditQImage svg {
  width: 13px;
  height: 13px;
  stroke: currentColor;
  stroke-width: 2.3;
  flex-shrink: 0;
  transition: transform 0.2s ease;
  pointer-events: none;
}

.btn-remove-preview-img span,
#btnRemoveQImage span,
#btnRemoveEditQImage span {
  pointer-events: none;
}

.btn-remove-preview-img:hover,
#btnRemoveQImage:hover,
#btnRemoveEditQImage:hover {
  background: #dc2626;
  color: #ffffff;
  border-color: #dc2626;
  box-shadow: 0 2px 8px rgba(220, 38, 38, 0.28);
  transform: translateY(-1px);
}

.btn-remove-preview-img:hover svg,
#btnRemoveQImage:hover svg,
#btnRemoveEditQImage:hover svg {
  transform: scale(1.15);
}

.btn-remove-preview-img:active,
#btnRemoveQImage:active,
#btnRemoveEditQImage:active {
  background: #b91c1c;
  border-color: #b91c1c;
  transform: translateY(0);
  box-shadow: none;
}

.btn-remove-preview-img:focus-visible,
#btnRemoveQImage:focus-visible,
#btnRemoveEditQImage:focus-visible {
  outline: 2px solid #ef4444;
  outline-offset: 2px;
}

/* Option Image Previews and Remove Buttons */
.opt-img-preview-box {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: #ffffff;
  padding: 2px 6px 2px 3px;
  border-radius: 6px;
  border: 1px solid #e2e8f0;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
  flex-shrink: 0;
  height: 32px;
  box-sizing: border-box;
}

.opt-img-preview {
  height: 26px;
  max-width: 44px;
  object-fit: contain;
  border-radius: 4px;
  background: #f8fafc;
  border: 1px solid #cbd5e1;
}

.btn-remove-opt-img,
.btn-remove-edit-opt-img {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 4px;
  background: #fef2f2;
  border: 1px solid #fecaca;
  color: #dc2626;
  cursor: pointer;
  padding: 0;
  transition: all 0.15s ease;
  flex-shrink: 0;
}

.btn-remove-opt-img:hover,
.btn-remove-edit-opt-img:hover {
  background: #dc2626;
  color: #ffffff;
  border-color: #dc2626;
  transform: scale(1.05);
}

.btn-remove-manual-option,
.btn-remove-edit-option-row {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 6px;
  background: #fef2f2;
  border: 1px solid #fecaca;
  color: #dc2626;
  cursor: pointer;
  padding: 0;
  flex-shrink: 0;
  transition: all 0.18s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: 0 1px 2px rgba(220, 38, 38, 0.05);
}

.btn-remove-manual-option:hover,
.btn-remove-edit-option-row:hover {
  background: #dc2626;
  color: #ffffff;
  border-color: #dc2626;
  box-shadow: 0 2px 6px rgba(220, 38, 38, 0.25);
  transform: translateY(-1px);
}

.btn-remove-manual-option:active,
.btn-remove-edit-option-row:active {
  background: #b91c1c;
  transform: translateY(0);
}

/* ============================================================
   Attendance Module Styling
   ============================================================ */

.attend-notice-banner {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 18px;
  border-radius: 10px;
  font-size: 0.88rem;
  font-weight: 500;
  margin-bottom: 16px;
  border: 1px solid transparent;
  transition: all 0.2s ease;
}

.attend-notice-banner svg {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}

.attend-notice-banner.notice-info {
  background: #eff6ff;
  border-color: #bfdbfe;
  color: #1e40af;
}

.attend-notice-banner.notice-warning {
  background: #fffbeb;
  border-color: #fde68a;
  color: #92400e;
}

.attend-notice-banner.notice-locked {
  background: #fef2f2;
  border-color: #fecaca;
  color: #991b1b;
}

.attend-stats-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  margin-bottom: 18px;
}

.attend-stat-card {
  border-radius: 12px;
  padding: 16px 20px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  border: 1px solid var(--border-color, #e2e8f0);
  background: var(--bg-card, #ffffff);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.attend-stat-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

.attend-stat-card.card-total {
  background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
  border-color: #cbd5e1;
}

.attend-stat-card.card-total .attend-stat-label {
  color: #475569;
}

.attend-stat-card.card-total .attend-stat-value {
  color: #0f172a;
}

.attend-stat-card.card-present {
  background: linear-gradient(135deg, #f0fdf4 0%, #dcfce7 100%);
  border-color: #86efac;
}

.attend-stat-card.card-present .attend-stat-label {
  color: #166534;
}

.attend-stat-card.card-present .attend-stat-value {
  color: #15803d;
}

.attend-stat-card.card-absent {
  background: linear-gradient(135deg, #fef2f2 0%, #fee2e2 100%);
  border-color: #fca5a5;
}

.attend-stat-card.card-absent .attend-stat-label {
  color: #991b1b;
}

.attend-stat-card.card-absent .attend-stat-value {
  color: #b91c1c;
}

.attend-stat-card.card-rate {
  background: linear-gradient(135deg, #eef2ff 0%, #e0e7ff 100%);
  border-color: #a5b4fc;
}

.attend-stat-card.card-rate .attend-stat-label {
  color: #3730a3;
}

.attend-stat-card.card-rate .attend-stat-value {
  color: #4338ca;
}

.attend-stat-label {
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.attend-stat-value {
  font-size: 1.7rem;
  font-weight: 800;
  font-family: var(--font-mono, monospace);
  line-height: 1.2;
}

.attend-assigned-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: #f1f5f9;
  border: 1px solid #cbd5e1;
  color: #334155;
  padding: 6px 14px;
  border-radius: 8px;
  font-weight: 600;
  font-size: 0.88rem;
}

.attend-assigned-badge svg {
  width: 15px;
  height: 15px;
  color: #64748b;
}

/* Present / Absent Segmented Toggle */
.attend-toggle-group {
  display: inline-flex;
  align-items: center;
  background: #f1f5f9;
  padding: 3px;
  border-radius: 9999px;
  gap: 3px;
  border: 1px solid #e2e8f0;
}

.attend-toggle-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 5px 14px;
  border-radius: 9999px;
  font-size: 0.8rem;
  font-weight: 700;
  cursor: pointer;
  border: 1px solid transparent;
  background: transparent;
  color: #64748b;
  transition: all 0.18s cubic-bezier(0.16, 1, 0.3, 1);
  user-select: none;
}

.attend-toggle-btn:hover:not(:disabled) {
  color: #0f172a;
  background: rgba(255, 255, 255, 0.6);
}

.attend-toggle-btn.btn-present.is-active {
  background: #16a34a;
  color: #ffffff;
  border-color: #15803d;
  box-shadow: 0 2px 6px rgba(22, 163, 74, 0.35);
}

.attend-toggle-btn.btn-absent.is-active {
  background: #dc2626;
  color: #ffffff;
  border-color: #b91c1c;
  box-shadow: 0 2px 6px rgba(220, 38, 38, 0.35);
}

.attend-toggle-btn:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

/* Single Attendance Toggle Button (Present ↔ Absent) */
.attend-status-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-width: 105px;
  padding: 7px 16px;
  border-radius: 9999px;
  font-size: 0.84rem;
  font-weight: 700;
  cursor: pointer;
  border: 1px solid transparent;
  transition: all 0.18s cubic-bezier(0.16, 1, 0.3, 1);
  user-select: none;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}

.attend-status-btn svg {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
}

.attend-status-btn.is-present {
  background: #16a34a;
  border-color: #15803d;
  color: #ffffff;
  box-shadow: 0 2px 6px rgba(22, 163, 74, 0.35);
}

.attend-status-btn.is-present:hover:not(:disabled) {
  background: #15803d;
  transform: translateY(-1px);
  box-shadow: 0 4px 10px rgba(22, 163, 74, 0.45);
}

.attend-status-btn.is-absent {
  background: #dc2626;
  border-color: #b91c1c;
  color: #ffffff;
  box-shadow: 0 2px 6px rgba(220, 38, 38, 0.35);
}

.attend-status-btn.is-absent:hover:not(:disabled) {
  background: #b91c1c;
  transform: translateY(-1px);
  box-shadow: 0 4px 10px rgba(220, 38, 38, 0.45);
}

.attend-status-btn:active:not(:disabled) {
  transform: translateY(0);
}

.attend-status-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  transform: none !important;
  box-shadow: none !important;
}

/* Read-only Attendance Status Pill for Admin View */
.attend-status-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-width: 95px;
  padding: 5px 14px;
  border-radius: 9999px;
  font-size: 0.82rem;
  font-weight: 700;
  user-select: none;
}

.attend-status-pill.is-present {
  background: rgba(16, 185, 129, 0.12);
  color: #059669;
  border: 1px solid rgba(16, 185, 129, 0.3);
}

.attend-status-pill.is-absent {
  background: rgba(239, 68, 68, 0.12);
  color: #dc2626;
  border: 1px solid rgba(239, 68, 68, 0.3);
}

.attend-status-pill svg {
  width: 13px;
  height: 13px;
  flex-shrink: 0;
}

.attend-batch-tag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 10px;
  background: var(--bg-hover, #f1f5f9);
  color: var(--text-primary, #334155);
  border: 1px solid var(--border-color, #e2e8f0);
  border-radius: 9999px;
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.01em;
}

.attend-remarks-input {
  width: 100%;
  max-width: 220px;
  padding: 6px 10px;
  border-radius: 6px;
  border: 1px solid var(--border-color, #cbd5e1);
  font-size: 0.82rem;
  background: #ffffff;
  color: var(--text-primary, #0f172a);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.attend-remarks-input:focus {
  border-color: var(--brand-primary, #2563eb);
  outline: none;
  box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.15);
}

.attend-student-name {
  font-weight: 600;
  color: var(--text-primary, #0f172a);
  font-size: 0.92rem;
}

.attend-student-meta {
  font-size: 0.76rem;
  color: var(--text-secondary, #64748b);
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 2px;
}

.attend-save-bar {
  position: relative;
  background: #ffffff;
  border-top: 1px solid var(--border-color, #e2e8f0);
  padding: 14px 20px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  margin-top: 16px;
  border-radius: 0 0 12px 12px;
}

.attend-view-tabs {
  display: inline-flex;
  background: #f1f5f9;
  padding: 3px;
  border-radius: 8px;
  gap: 2px;
}

.attend-view-tab {
  padding: 6px 14px;
  font-size: 0.82rem;
  font-weight: 600;
  border-radius: 6px;
  border: none;
  background: transparent;
  color: #64748b;
  cursor: pointer;
  transition: all 0.15s ease;
}

.attend-view-tab.active {
  background: #ffffff;
  color: #0f172a;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}

/* Modern Aligned Attendance Toolbar */
.attend-toolbar-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  background: var(--bg-card, #ffffff);
  border: 1px solid var(--border-color, #e2e8f0);
  border-radius: 12px;
  padding: 12px 18px;
  margin-bottom: 16px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.03);
}

.attend-toolbar-left {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.attend-toolbar-right {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-left: auto;
  flex-wrap: wrap;
}

.attend-info-pill {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  color: var(--text-primary, #1e293b);
  padding: 6px 14px;
  border-radius: 8px;
  font-size: 0.86rem;
  font-weight: 600;
  user-select: none;
}

.attend-date-pill {
  background: #eff6ff;
  border-color: #bfdbfe;
  color: #1e40af;
}

.attend-class-pill {
  background: #f0fdf4;
  border-color: #bbf7d0;
  color: #166534;
}

/* Batch Pill Buttons */
.attend-batch-pills-wrap {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: #f8fafc;
  padding: 3px 6px 3px 12px;
  border-radius: 9999px;
  border: 1px solid #e2e8f0;
}

.attend-pills-label {
  font-size: 0.76rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-muted, #64748b);
}

.attend-batch-pills {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.attend-pill-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 5px 14px;
  border-radius: 9999px;
  border: 1px solid #cbd5e1;
  background: #ffffff;
  color: var(--text-secondary, #475569);
  font-size: 0.82rem;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.16s ease;
  user-select: none;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}

.attend-pill-btn:hover {
  border-color: #94a3b8;
  color: var(--text-primary, #0f172a);
  background: #f1f5f9;
  transform: translateY(-1px);
}

.attend-pill-btn.active {
  background: var(--brand-primary, #2563eb);
  border-color: var(--brand-primary, #2563eb);
  color: #ffffff;
  box-shadow: 0 2px 6px rgba(37, 99, 235, 0.35);
}

/* Search Box */
.attend-search-box {
  position: relative;
  display: inline-flex;
  align-items: center;
  min-width: 190px;
}

.attend-search-icon {
  position: absolute;
  left: 10px;
  width: 15px;
  height: 15px;
  color: #94a3b8;
  pointer-events: none;
}

.attend-search-input {
  padding: 6px 12px 6px 32px !important;
  font-size: 0.86rem;
  border-radius: 8px;
  height: 36px;
  border: 1px solid var(--border-color, #cbd5e1);
  background: #ffffff;
  width: 100%;
}

.attend-search-input:focus {
  border-color: var(--brand-primary, #2563eb);
  outline: none;
  box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.15);
}

/* Bulk Buttons */
.attend-bulk-actions {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.attend-bulk-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-weight: 700;
  font-size: 0.8rem;
  padding: 6px 12px;
  border-radius: 8px;
  height: 36px;
  cursor: pointer;
  transition: all 0.15s ease;
}

.btn-bulk-present {
  color: #166534;
  border: 1px solid #86efac;
  background: #f0fdf4;
}

.btn-bulk-present:hover {
  background: #dcfce7;
  border-color: #4ade80;
}

.btn-bulk-absent {
  color: #991b1b;
  border: 1px solid #fca5a5;
  background: #fef2f2;
}

.btn-bulk-absent:hover {
  background: #fee2e2;
  border-color: #f87171;
}

/* Attendance History Toolbar Filter Alignment */
.attend-toolbar-filter-item {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  height: 38px;
  margin: 0 4px;
}

.attend-toolbar-filter-label {
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-secondary, #475569);
  white-space: nowrap;
  line-height: 1;
  margin: 0;
  user-select: none;
}

.attend-history-month-input {
  height: 38px !important;
  padding: 0 12px !important;
  font-weight: 600 !important;
  font-size: 0.88rem !important;
  color: var(--text-primary, #0f172a) !important;
  background: #ffffff !important;
  border: 1px solid var(--border-color, #cbd5e1) !important;
  border-radius: 8px !important;
  width: 175px !important;
  box-sizing: border-box !important;
  line-height: 36px !important;
}

.attend-history-month-input:focus {
  border-color: var(--brand-primary, #2563eb) !important;
  outline: none !important;
  box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.15) !important;
}

.attend-history-class-select {
  height: 38px !important;
  padding: 0 12px !important;
  font-weight: 600 !important;
  font-size: 0.88rem !important;
  color: var(--text-primary, #0f172a) !important;
  background: #ffffff !important;
  border: 1px solid var(--border-color, #cbd5e1) !important;
  border-radius: 8px !important;
  min-width: 130px !important;
  box-sizing: border-box !important;
}

.attend-history-class-select:focus {
  border-color: var(--brand-primary, #2563eb) !important;
  outline: none !important;
  box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.15) !important;
}

/* Attendance History Table Layout & Alignment */
#attendHistoryContainer {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

#attendHistoryContainer .users-table {
  min-width: 760px;
  width: 100%;
}

#attendHistoryContainer .users-table th,
#attendHistoryContainer .users-table td {
  white-space: nowrap !important;
  vertical-align: middle !important;
}

#attendHistoryContainer .users-table th:nth-child(2),
#attendHistoryContainer .users-table td:nth-child(2) {
  text-align: left !important;
  white-space: nowrap !important;
}

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

  .attend-toolbar-card {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
  }

  .attend-toolbar-left,
  .attend-toolbar-right {
    margin-left: 0;
    width: 100%;
    justify-content: flex-start;
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
  }

  .attend-toolbar-filter-item {
    width: 100%;
    margin: 0;
    justify-content: space-between;
  }

  .attend-history-month-input,
  .attend-history-class-select {
    flex: 1;
    width: auto !important;
    max-width: none !important;
  }

  .attend-search-box {
    width: 100%;
  }

  .attend-save-bar {
    flex-direction: column;
    gap: 10px;
    align-items: stretch;
  }

  #attendHistoryContainer {
    width: 100% !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }

  #attendHistoryContainer .users-table {
    min-width: 700px !important;
  }
}

/* ==========================================================================
   UX, Space Utilization & Mobile Responsiveness Optimizations (All Pages)
   ========================================================================== */

/* 1. Reclaim Empty Topbar Space on Desktop (>= 1025px) */
@media (min-width: 1025px) {
  .main-topbar {
    display: none !important;
  }

  .app-layout {
    height: calc(100vh - 38px) !important;
    padding-top: 12px !important;
    padding-bottom: 12px !important;
  }

  .page-view {
    padding: 14px 24px 24px !important;
  }
}

/* 2. Optimize Page View Containers, Headers & Vertical Spacing */
.page-view-container {
  gap: 12px !important;
}

.page-view-header {
  margin-bottom: 12px !important;
  padding-bottom: 10px !important;
}

.page-view-actions:empty,
.header-actions:empty {
  display: none !important;
}

/* Compact Summary Stat Cards (Fee Management & Attendance) */
.fee-stats-grid {
  margin-bottom: 12px !important;
  gap: 12px !important;
}

.fee-stat-card {
  padding: 12px 16px !important;
}

.fee-stat-value {
  font-size: 1.35rem !important;
}

.attend-stats-grid {
  margin-bottom: 12px !important;
  gap: 12px !important;
}

.attend-stat-card {
  padding: 12px 16px !important;
}

.attend-stat-value {
  font-size: 1.4rem !important;
}

/* Compact Filter Bar & Table Section Spacing */
.qb-filter-bar {
  padding: 10px 14px !important;
  margin-bottom: 12px !important;
  gap: 10px !important;
}

.admin-users-section-header {
  padding: 12px 16px !important;
}

.users-table th {
  padding: 10px 14px !important;
}

.users-table td {
  padding: 10px 14px !important;
}

/* 3. Upload & OCR Workspace Empty-State Optimization */
.empty-upload-box {
  padding: 24px 20px !important;
}

.empty-questions-notice {
  padding: 28px 20px !important;
}

/* 4. Tablet & Mobile UX Improvements (<= 768px) */
@media (max-width: 768px) {
  .page-view {
    padding: 10px 10px 20px !important;
  }

  .page-view-container {
    gap: 10px !important;
  }

  /* Keep single-action page headers horizontal to avoid wasted vertical rows */
  .page-view-header {
    flex-direction: row !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 8px !important;
    margin-bottom: 10px !important;
    padding-bottom: 8px !important;
  }

  .page-view-header-info {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    gap: 8px !important;
  }

  .page-view-icon {
    width: 34px !important;
    height: 34px !important;
    border-radius: 8px !important;
  }

  .page-view-icon svg {
    width: 17px !important;
    height: 17px !important;
  }

  .page-view-title {
    font-size: 1.08rem !important;
    line-height: 1.25 !important;
  }

  /* When header has only 1 button (e.g., Assessments, Schools, Attendance), keep it inline */
  .page-view-actions {
    width: auto !important;
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 6px !important;
  }

  /* When header has 2+ buttons (e.g., Question Bank, Student Management), use a clean compact grid */
  .page-view-actions:has(> :nth-child(2)) {
    width: 100% !important;
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(135px, 1fr)) !important;
    gap: 6px !important;
  }

  .page-view-actions .btn {
    height: 34px !important;
    padding: 0 10px !important;
    font-size: 0.78rem !important;
    justify-content: center !important;
  }

  /* User Management section header: keep title + Create User button on one row */
  .admin-users-section-header {
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 10px 12px !important;
    gap: 8px !important;
  }

  .admin-users-section-header .header-actions {
    width: auto !important;
  }

  .admin-users-section-header .header-actions .btn {
    width: auto !important;
    height: 34px !important;
    padding: 0 12px !important;
    font-size: 0.78rem !important;
  }

  /* 2-Column Compact Filter Bar on Mobile (saves ~50% vertical space) */
  .qb-filter-bar {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
    padding: 10px !important;
    margin-bottom: 10px !important;
  }

  .qb-filter-group {
    width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
  }

  .qb-filter-group.qb-search-group {
    grid-column: 1 / -1 !important;
  }

  .qb-filter-label {
    font-size: 0.68rem !important;
    margin-bottom: 3px !important;
  }

  .qb-filter-select,
  .qb-search-input {
    height: 34px !important;
    font-size: 0.8rem !important;
    padding-top: 4px !important;
    padding-bottom: 4px !important;
  }

  .qb-filter-reset {
    grid-column: 1 / -1 !important;
    height: 32px !important;
    font-size: 0.76rem !important;
    justify-content: center !important;
  }

  /* Fee Management: 2 Stat Cards Side-by-Side on Mobile */
  .fee-stats-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
    margin-bottom: 10px !important;
  }

  .fee-stat-card {
    padding: 10px 12px !important;
    border-radius: 10px !important;
  }

  .fee-stat-label {
    font-size: 0.68rem !important;
    margin-bottom: 2px !important;
  }

  .fee-stat-value {
    font-size: 1.12rem !important;
  }

  /* Attendance: All 3 Stat Cards in 1 Compact Row on Mobile */
  .attend-stats-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 8px !important;
    margin-bottom: 10px !important;
  }

  .attend-stat-card {
    padding: 8px 10px !important;
    border-radius: 10px !important;
  }

  .attend-stat-label {
    font-size: 0.65rem !important;
    margin-bottom: 2px !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  .attend-stat-value {
    font-size: 1.15rem !important;
  }

  /* Attendance Toolbar: Compact Wrapped Controls Instead of Tall Vertical Stack */
  .attend-toolbar-card {
    padding: 10px !important;
    gap: 8px !important;
    margin-bottom: 10px !important;
  }

  .attend-toolbar-left {
    flex-direction: row !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    gap: 6px !important;
  }

  .attend-date-pill {
    flex: 1 1 auto !important;
    height: 34px !important;
    padding: 4px 10px !important;
  }

  #groupAttendFilterClass {
    flex: 1 1 120px !important;
  }

  #attendFilterClass {
    width: 100% !important;
    height: 34px !important;
  }

  .attend-batch-pills {
    width: 100% !important;
    overflow-x: auto !important;
    flex-wrap: nowrap !important;
    padding-bottom: 2px !important;
  }

  .attend-batch-pill {
    padding: 5px 10px !important;
    font-size: 0.75rem !important;
    white-space: nowrap !important;
  }

  /* Upload & OCR Workspace: Avoid Huge Empty Vertical Boxes on Mobile */
  .app-layout {
    padding: 8px !important;
    gap: 10px !important;
  }

  .canvas-pane:not(:has(#sourceCanvas[style*="block"])) {
    height: auto !important;
    min-height: 210px !important;
  }

  /* Removed buggy min-height collapse rule */

  .empty-upload-box {
    padding: 18px 14px !important;
  }

  .empty-upload-icon {
    width: 44px !important;
    height: 44px !important;
    margin-bottom: 8px !important;
  }

  .empty-upload-title {
    font-size: 0.95rem !important;
    margin-bottom: 8px !important;
  }

  .empty-questions-notice {
    padding: 20px 14px !important;
  }

  /* Question Bank & Assessment Cards: Compact Mobile Padding */
  .qb-card,
  .assessment-card {
    padding: 12px !important;
    margin-bottom: 8px !important;
  }
}

/* ============================================================
   View Student & User Details Modal – Balanced & Aligned Layout
   ============================================================ */

#viewStudentDetailsModal .student-details-modal-card,
#viewUserDetailsModal .student-details-modal-card {
  max-width: 540px;
  width: 100%;
  border-radius: 16px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

#viewStudentDetailsModal .student-details-modal-header,
#viewUserDetailsModal .student-details-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 18px 22px 16px;
  border-bottom: 1px solid var(--border-color, #e2e8f0);
  background: #ffffff;
}

#viewStudentDetailsModal .student-details-modal-header .modal-header-icon,
#viewUserDetailsModal .student-details-modal-header .modal-header-icon {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin: 0;
}

#viewStudentDetailsModal .student-details-header-text,
#viewUserDetailsModal .student-details-header-text {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 2px;
}

#viewStudentDetailsModal .student-details-header-text .modal-title,
#viewUserDetailsModal .student-details-header-text .modal-title {
  margin: 0;
  font-size: 1.05rem;
  font-weight: 700;
  line-height: 1.25;
  color: var(--text-primary, #0f172a);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

#viewStudentDetailsModal .student-details-header-text .modal-subtitle,
#viewUserDetailsModal .student-details-header-text .modal-subtitle {
  margin: 0;
  font-size: 0.78rem;
  line-height: 1.3;
  color: var(--text-secondary, #64748b);
}

#viewStudentDetailsModal .student-details-modal-header .modal-close-btn,
#viewUserDetailsModal .student-details-modal-header .modal-close-btn {
  width: 34px;
  height: 34px;
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin: 0;
}

#viewStudentDetailsModal .student-details-modal-body,
#viewUserDetailsModal .student-details-modal-body {
  padding: 18px 22px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  background: #ffffff;
  overflow-y: auto;
}

/* Student Profile Banner Card */
.student-profile-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 16px;
  background: #f8fafc;
  border: 1px solid var(--border-color, #e2e8f0);
  border-radius: 12px;
}

.student-profile-banner-left {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
  flex: 1;
}

.student-profile-avatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: #eff6ff;
  color: #1d68ff;
  border: 1px solid #bfdbfe;
  font-weight: 700;
  font-size: 1.05rem;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  line-height: 1;
}

.student-profile-meta {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 3px;
  min-width: 0;
}

.student-profile-name {
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.25;
  color: var(--text-primary, #0f172a);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.student-profile-enrolled {
  font-size: 0.78rem;
  line-height: 1.25;
  color: var(--text-secondary, #64748b);
}

.student-profile-roll-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #eef2ff;
  color: #3730a3;
  border: 1px solid #c7d2fe;
  font-family: var(--font-mono, monospace);
  font-weight: 700;
  font-size: 0.82rem;
  line-height: 1;
  padding: 7px 12px;
  border-radius: 8px;
  flex-shrink: 0;
  letter-spacing: 0.02em;
}

/* Student Information Grid & Uniform Cards */
.student-details-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.student-detail-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  background: #ffffff;
  border: 1px solid var(--border-color, #e2e8f0);
  border-radius: 10px;
  min-height: 62px;
  box-sizing: border-box;
}

.student-detail-card--full {
  grid-column: 1 / -1;
}

.student-detail-icon {
  width: 36px;
  height: 36px;
  border-radius: 9px;
  background: #f1f5f9;
  color: #475569;
  border: 1px solid #e2e8f0;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.student-detail-icon svg {
  width: 16px;
  height: 16px;
  stroke-width: 2;
  display: block;
}

.student-detail-content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 3px;
  min-width: 0;
  flex: 1;
}

.student-detail-label {
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  line-height: 1.2;
  color: var(--text-muted, #64748b);
}

.student-detail-value {
  font-size: 0.9rem;
  font-weight: 600;
  line-height: 1.3;
  color: var(--text-primary, #0f172a);
  word-break: break-word;
}

.student-detail-value--batch {
  color: #0369a1;
}

.student-detail-value--fee-type {
  color: #0f766e;
}

.student-detail-value--fee-amount {
  font-family: var(--font-mono, monospace);
  font-weight: 700;
  font-size: 0.94rem;
}

/* Modal Footer Alignment */
#viewStudentDetailsModal .student-details-modal-footer,
#viewUserDetailsModal .student-details-modal-footer {
  margin: 0;
  padding: 14px 22px;
  background: #f8fafc;
  border-top: 1px solid var(--border-color, #e2e8f0);
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
}

#viewStudentDetailsModal .student-details-modal-footer .btn,
#viewUserDetailsModal .student-details-modal-footer .btn {
  height: 38px;
  min-width: 112px;
  padding: 0 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  font-size: 0.85rem;
  font-weight: 600;
  line-height: 1;
  border-radius: 8px;
  margin: 0;
}

#viewStudentDetailsModal .student-details-modal-footer .btn svg,
#viewUserDetailsModal .student-details-modal-footer .btn svg {
  width: 15px;
  height: 15px;
  flex-shrink: 0;
  display: block;
}

@media (max-width: 576px) {
  #viewStudentDetailsModal .student-details-modal-header,
  #viewUserDetailsModal .student-details-modal-header {
    padding: 14px 16px;
  }

  #viewStudentDetailsModal .student-details-modal-body,
  #viewUserDetailsModal .student-details-modal-body {
    padding: 14px 16px;
    gap: 10px;
  }

  .student-profile-banner {
    padding: 12px 14px;
  }

  .student-details-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }

  .student-detail-card {
    padding: 10px 12px;
    gap: 10px;
    min-height: 56px;
  }

  .student-detail-icon {
    width: 32px;
    height: 32px;
    border-radius: 8px;
  }

  .student-detail-icon svg {
    width: 15px;
    height: 15px;
  }

  #viewStudentDetailsModal .student-details-modal-footer,
  #viewUserDetailsModal .student-details-modal-footer {
    padding: 12px 16px;
    flex-direction: row !important;
    gap: 10px !important;
  }

  #viewStudentDetailsModal .student-details-modal-footer .btn,
  #viewUserDetailsModal .student-details-modal-footer .btn {
    flex: 1 1 0 !important;
    width: auto !important;
    min-width: 0;
  }
}

/* ============================================================
   Breadcrumb Navigation (Page & Modal Trail)
   ============================================================ */

.app-breadcrumb-bar {
  display: flex;
  align-items: center;
  min-height: 38px;
  padding: 6px 24px;
  background: #ffffff;
  border-bottom: 1px solid var(--border-color, #e2e8f0);
  flex-shrink: 0;
  box-sizing: border-box;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}

.app-breadcrumb-bar::-webkit-scrollbar,
.modal-breadcrumb-bar::-webkit-scrollbar {
  display: none;
}

.modal-breadcrumb-bar {
  display: flex;
  align-items: center;
  min-height: 34px;
  padding: 6px 22px;
  background: #f8fafc;
  border-bottom: 1px solid var(--border-color, #e2e8f0);
  flex-shrink: 0;
  box-sizing: border-box;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}

.app-breadcrumb-list {
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  gap: 6px;
  list-style: none;
  margin: 0;
  padding: 0;
  min-width: 0;
}

.app-breadcrumb-item {
  display: inline-flex;
  align-items: center;
  min-width: 0;
  flex-shrink: 0;
}

.app-breadcrumb-link {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 6px;
  margin: 0 -4px;
  border: none;
  border-radius: 6px;
  background: transparent;
  color: var(--text-secondary, #64748b);
  font-family: inherit;
  font-size: 0.78rem;
  font-weight: 600;
  line-height: 1.3;
  cursor: pointer;
  white-space: nowrap;
  transition: color 0.15s ease, background-color 0.15s ease;
}

.app-breadcrumb-link:hover {
  color: var(--primary, #1d68ff);
  background: #eff6ff;
}

.app-breadcrumb-current {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 2px;
  color: var(--text-primary, #0f172a);
  font-size: 0.78rem;
  font-weight: 700;
  line-height: 1.3;
  white-space: nowrap;
}

.app-breadcrumb-home-icon {
  width: 13px;
  height: 13px;
  flex-shrink: 0;
  stroke-width: 2;
  display: block;
}

.app-breadcrumb-separator {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #94a3b8;
  flex-shrink: 0;
}

.app-breadcrumb-separator svg {
  width: 13px;
  height: 13px;
  display: block;
}

@media (max-width: 768px) {
  .app-breadcrumb-bar {
    min-height: 32px;
    padding: 4px 12px;
  }

  .modal-breadcrumb-bar {
    min-height: 30px;
    padding: 5px 16px;
  }

  .app-breadcrumb-link,
  .app-breadcrumb-current {
    font-size: 0.74rem;
  }

  .app-breadcrumb-list {
    gap: 4px;
  }

  .app-breadcrumb-separator svg {
    width: 12px;
    height: 12px;
  }
}

/* ============================================================
   Attendance Mobile-First Card UI, Accordion & Status Ordering
   ============================================================ */

/* 4-Card Summary Grid (Total, Unmarked, Present, Absent) */
#viewAttendancePage .attend-stats-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 14px;
}

#viewAttendancePage .attend-stat-card.card-unmarked {
  background: linear-gradient(135deg, #fffbeb 0%, #fef3c7 100%);
  border: 1px solid #fcd34d;
}

#viewAttendancePage .attend-stat-card.card-unmarked .stat-label {
  color: #b45309;
}

#viewAttendancePage .attend-stat-card.card-unmarked .stat-val {
  color: #d97706;
}

/* Interactive Date Selector */
.attend-date-selector-wrap {
  position: relative;
  display: inline-flex;
  align-items: center;
}

.attend-date-selector-icon {
  position: absolute;
  left: 11px;
  width: 15px;
  height: 15px;
  color: var(--primary, #2563eb);
  pointer-events: none;
  z-index: 1;
}

.attend-date-input {
  height: 38px !important;
  padding: 0 12px 0 34px !important;
  border-radius: 10px !important;
  border: 1px solid #cbd5e1 !important;
  background: #ffffff !important;
  font-size: 0.86rem !important;
  font-weight: 700 !important;
  color: var(--text-primary, #0f172a) !important;
  cursor: pointer;
  min-width: 152px;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}

.attend-date-input:focus {
  border-color: var(--primary, #2563eb) !important;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12) !important;
  outline: none;
}

/* Desktop Unmarked Pill & Choice Buttons */
.attend-unmarked-pill {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  background: #fef3c7;
  color: #b45309;
  border: 1px solid #fde68a;
}

.attend-row-unmarked {
  background: rgba(254, 252, 232, 0.45);
}

.attend-desktop-action-group {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}

.attend-choice-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 11px;
  border-radius: 8px;
  font-size: 0.78rem;
  font-weight: 700;
  border: 1px solid #e2e8f0;
  background: #f8fafc;
  color: #475569;
  cursor: pointer;
  transition: all 0.15s ease;
}

.attend-choice-btn svg {
  width: 13px;
  height: 13px;
}

.attend-choice-btn.choice-present:hover {
  border-color: #86efac;
  background: #f0fdf4;
  color: #15803d;
}

.attend-choice-btn.choice-present.is-selected {
  background: #16a34a;
  border-color: #15803d;
  color: #ffffff;
  box-shadow: 0 2px 6px rgba(22, 163, 74, 0.22);
}

.attend-choice-btn.choice-absent:hover {
  border-color: #fca5a5;
  background: #fef2f2;
  color: #b91c1c;
}

.attend-choice-btn.choice-absent.is-selected {
  background: #dc2626;
  border-color: #b91c1c;
  color: #ffffff;
  box-shadow: 0 2px 6px rgba(220, 38, 38, 0.22);
}

/* Hide mobile cards container on desktop (> 768px) */
.attend-mobile-cards-list {
  display: none;
}

/* Mobile-First Attendance Card & Accordion View (<= 768px) */
@media (max-width: 768px) {

  /* Hide all attendance tables on mobile */
  #viewAttendancePage .attend-desktop-table,
  #modalAttendHistoryDetails .attend-desktop-table {
    display: none !important;
  }

  /* Show individual student card list on mobile */
  #viewAttendancePage .attend-mobile-cards-list,
  #modalAttendHistoryDetails .attend-mobile-cards-list {
    display: flex !important;
    flex-direction: column;
    gap: 8px;
    padding: 8px;
  }

  #viewAttendancePage #attendTableContainer,
  #viewAttendancePage #attendHistoryContainer {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
    overflow: visible !important;
  }

  /* Compact 4-column top stats bar on mobile */
  #viewAttendancePage .attend-stats-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 6px !important;
    margin-bottom: 10px !important;
  }

  #viewAttendancePage .attend-stat-card {
    padding: 8px 6px !important;
    border-radius: 10px !important;
    text-align: center !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    min-height: 54px !important;
  }

  #viewAttendancePage .attend-stat-card .stat-label {
    font-size: 0.62rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.02em !important;
    margin-bottom: 2px !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    max-width: 100%;
  }

  #viewAttendancePage .attend-stat-card .stat-val {
    font-size: 1.05rem !important;
    font-weight: 800 !important;
    line-height: 1.1 !important;
  }

  /* Compact Toolbar on Mobile */
  #viewAttendancePage .attend-toolbar-card {
    padding: 10px !important;
    margin-bottom: 10px !important;
    border-radius: 12px !important;
    gap: 8px !important;
  }

  #viewAttendancePage .attend-date-selector-wrap {
    flex: 1 1 48%;
  }

  #viewAttendancePage .attend-date-input {
    width: 100% !important;
    min-width: 0 !important;
    height: 36px !important;
    font-size: 0.8rem !important;
    padding: 0 8px 0 30px !important;
  }

  /* Section Dividers: Unmarked (Top) vs Marked (Bottom) */
  .attend-mobile-section-label {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 0.72rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding: 4px 6px 2px;
    margin-top: 2px;
    color: #475569;
  }

  .attend-mobile-section-label.is-marked-section {
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px dashed #cbd5e1;
    color: #64748b;
  }

  .attend-section-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    flex-shrink: 0;
  }

  .attend-section-dot.dot-unmarked {
    background: #f59e0b;
    box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.18);
  }

  .attend-section-dot.dot-marked {
    background: #10b981;
  }

  /* Individual Student Card */
  .attend-student-card {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.04);
    overflow: hidden;
    transition: border-color 0.18s ease, box-shadow 0.18s ease, background-color 0.18s ease;
  }

  .attend-student-card.is-unmarked {
    border-left: 3.5px solid #f59e0b;
  }

  .attend-student-card.is-present {
    border-left: 3.5px solid #16a34a;
    background: #fcfdfc;
  }

  .attend-student-card.is-absent {
    border-left: 3.5px solid #dc2626;
    background: #fffafa;
  }

  .attend-student-card.is-expanded {
    border-color: #93c5fd;
    box-shadow: 0 4px 12px rgba(37, 99, 235, 0.08);
  }

  /* Compact Card Header (Always Visible) */
  .attend-card-header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 11px;
    cursor: pointer;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
  }

  .attend-card-avatar {
    width: 34px;
    height: 34px;
    border-radius: 9px;
    background: #eff6ff;
    color: #1d4ed8;
    font-size: 0.86rem;
    font-weight: 800;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    border: 1px solid #dbeafe;
  }

  .attend-student-card.is-present .attend-card-avatar {
    background: #dcfce7;
    color: #15803d;
    border-color: #bbf7d0;
  }

  .attend-student-card.is-absent .attend-card-avatar {
    background: #fee2e2;
    color: #b91c1c;
    border-color: #fecaca;
  }

  .attend-card-summary {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
  }

  .attend-card-name-row {
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
  }

  .attend-card-name {
    font-size: 0.88rem;
    font-weight: 700;
    color: #0f172a;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .attend-card-status-badge {
    display: inline-flex;
    align-items: center;
    padding: 1px 6px;
    border-radius: 999px;
    font-size: 0.62rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    flex-shrink: 0;
  }

  .attend-card-status-badge.badge-unmarked {
    background: #fef3c7;
    color: #b45309;
    border: 1px solid #fde68a;
  }

  .attend-card-status-badge.badge-present {
    background: #dcfce7;
    color: #15803d;
    border: 1px solid #bbf7d0;
  }

  .attend-card-status-badge.badge-absent {
    background: #fee2e2;
    color: #b91c1c;
    border: 1px solid #fecaca;
  }

  .attend-card-submeta {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 0.72rem;
    font-weight: 600;
    color: #64748b;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .attend-meta-sep {
    color: #cbd5e1;
  }

  /* Quick One-Hand P / A Action Buttons + Accordion Chevron */
  .attend-card-quick-actions {
    display: flex;
    align-items: center;
    gap: 5px;
    flex-shrink: 0;
  }

  .attend-quick-btn {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    border: 1px solid #e2e8f0;
    background: #f8fafc;
    color: #475569;
    font-size: 0.72rem;
    font-weight: 800;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 2px;
    padding: 0;
    cursor: pointer;
    transition: all 0.15s ease;
  }

  .attend-quick-btn svg {
    width: 12px;
    height: 12px;
    display: none;
  }

  .attend-quick-btn.quick-present {
    border-color: #bbf7d0;
    color: #15803d;
    background: #f0fdf4;
  }

  .attend-quick-btn.quick-present.active {
    background: #16a34a;
    border-color: #15803d;
    color: #ffffff;
    box-shadow: 0 2px 5px rgba(22, 163, 74, 0.25);
  }

  .attend-quick-btn.quick-absent {
    border-color: #fecaca;
    color: #b91c1c;
    background: #fef2f2;
  }

  .attend-quick-btn.quick-absent.active {
    background: #dc2626;
    border-color: #b91c1c;
    color: #ffffff;
    box-shadow: 0 2px 5px rgba(220, 38, 38, 0.25);
  }

  .attend-card-chevron {
    width: 22px;
    height: 22px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #94a3b8;
    transition: transform 0.2s ease, color 0.2s ease;
  }

  .attend-card-chevron svg {
    width: 15px;
    height: 15px;
  }

  .attend-student-card.is-expanded .attend-card-chevron {
    transform: rotate(180deg);
    color: #2563eb;
  }

  /* Accordion Body (Collapsed by Default, Expanded on Click) */
  .attend-card-body {
    display: none;
    padding: 10px 12px 12px;
    border-top: 1px solid #f1f5f9;
    background: #f8fafc;
  }

  .attend-student-card.is-expanded .attend-card-body {
    display: block;
  }

  .attend-card-details-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    margin-bottom: 10px;
  }

  .attend-detail-item {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    padding: 6px 9px;
    display: flex;
    flex-direction: column;
    gap: 1px;
  }

  .attend-detail-item.attend-detail-full {
    grid-column: 1 / -1;
  }

  .attend-detail-label {
    font-size: 0.63rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: #64748b;
  }

  .attend-detail-val {
    font-size: 0.78rem;
    font-weight: 700;
    color: #0f172a;
    word-break: break-word;
  }

  .attend-card-body-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
  }

  .attend-body-btn {
    height: 34px;
    border-radius: 8px;
    font-size: 0.78rem;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    cursor: pointer;
    border: 1px solid #cbd5e1;
    background: #ffffff;
    transition: all 0.15s ease;
  }

  .attend-body-btn svg {
    width: 14px;
    height: 14px;
  }

  .attend-body-btn.body-btn-present {
    border-color: #86efac;
    color: #15803d;
    background: #f0fdf4;
  }

  .attend-body-btn.body-btn-present.active {
    background: #16a34a;
    border-color: #15803d;
    color: #ffffff;
  }

  .attend-body-btn.body-btn-absent {
    border-color: #fca5a5;
    color: #b91c1c;
    background: #fef2f2;
  }

  .attend-body-btn.body-btn-absent.active {
    background: #dc2626;
    border-color: #b91c1c;
    color: #ffffff;
  }

  .attend-history-empty-card {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 24px 16px;
    text-align: center;
    font-size: 0.84rem;
    color: #64748b;
  }

  /* Submit Attendance Bar: Placed in normal flow below student cards (no overlap) */
  #viewAttendancePage .attend-save-bar,
  #attendSaveBar {
    position: static !important;
    bottom: auto !important;
    left: auto !important;
    right: auto !important;
    z-index: 1 !important;
    margin: 14px 8px 20px !important;
    padding: 12px !important;
    background: #ffffff !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 12px !important;
    box-shadow: 0 2px 6px rgba(15, 23, 42, 0.04) !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    justify-content: center !important;
  }

  #viewAttendancePage #btnSaveAttendanceBottom,
  #btnSaveAttendanceBottom {
    width: 100% !important;
    min-height: 44px !important;
    padding: 10px 18px !important;
    border-radius: 10px !important;
    font-size: 0.9rem !important;
    font-weight: 700 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    margin: 0 !important;
  }
}

/* ================================================================
   USER MANAGEMENT COMPACT STATS & ATTENDANCE DATE PICKER
   ================================================================ */

/* User Management Compact Statistics Grid */
.user-stats-compact-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  margin-bottom: 20px;
  padding: 0;
  background: transparent;
  border: none;
}

.user-stat-card {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 12px 16px;
  border-radius: 12px;
  background: #ffffff;
  border: 1px solid var(--border-color, #e2e8f0);
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.04);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
  min-height: 72px;
  box-sizing: border-box;
}

.user-stat-card:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(15, 23, 42, 0.06);
}

.user-stat-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.user-stat-label {
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #64748b;
  line-height: 1.2;
}

.user-stat-icon-wrap {
  width: 28px;
  height: 28px;
  border-radius: 7px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.user-stat-icon-wrap svg {
  width: 14px;
  height: 14px;
}

.user-stat-icon-wrap.icon-blue {
  background: #eff6ff;
  color: #2563eb;
}

.user-stat-icon-wrap.icon-purple {
  background: #faf5ff;
  color: #7e22ce;
}

.user-stat-icon-wrap.icon-amber {
  background: #fffbeb;
  color: #d97706;
}

.user-stat-icon-wrap.icon-emerald {
  background: #f0fdf4;
  color: #16a34a;
}

.user-stat-val {
  font-size: 1.55rem;
  font-weight: 800;
  color: #0f172a;
  line-height: 1.15;
  margin-top: 4px;
  font-family: var(--font-mono, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, monospace);
}

/* Card color accents */
.user-stat-card.card-total-users {
  background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%);
  border-color: #cbd5e1;
}

.user-stat-card.card-admins {
  background: linear-gradient(135deg, #ffffff 0%, #faf5ff 100%);
  border-color: #e9d5ff;
}
.user-stat-card.card-admins .user-stat-val {
  color: #7e22ce;
}

.user-stat-card.card-managers {
  background: linear-gradient(135deg, #ffffff 0%, #fffbeb 100%);
  border-color: #fde68a;
}
.user-stat-card.card-managers .user-stat-val {
  color: #b45309;
}

.user-stat-card.card-teachers {
  background: linear-gradient(135deg, #ffffff 0%, #f0fdf4 100%);
  border-color: #bbf7d0;
}
.user-stat-card.card-teachers .user-stat-val {
  color: #15803d;
}

/* Student Management Compact Statistics Grid */
.student-stats-compact-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  margin-bottom: 20px;
  padding: 0;
  background: transparent;
  border: none;
}

.user-stat-card.card-total-students {
  background: linear-gradient(135deg, #ffffff 0%, #eff6ff 100%);
  border-color: #bfdbfe;
}
.user-stat-card.card-total-students .user-stat-val {
  color: #1d4ed8;
}

.user-stat-card.card-total-classes {
  background: linear-gradient(135deg, #ffffff 0%, #faf5ff 100%);
  border-color: #e9d5ff;
}
.user-stat-card.card-total-classes .user-stat-val {
  color: #7e22ce;
}

.user-stat-card.card-total-batches {
  background: linear-gradient(135deg, #ffffff 0%, #fffbeb 100%);
  border-color: #fde68a;
}
.user-stat-card.card-total-batches .user-stat-val {
  color: #b45309;
}

/* Attendance Page Header Title & Date Row */
.attend-title-date-row {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}

/* Read-only Date Display for Attendance Page */
.attend-date-badge-readonly {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 38px;
  padding: 0 14px;
  background: #f8fafc;
  border: 1.5px solid #cbd5e1;
  border-radius: 9px;
  cursor: default;
  user-select: none;
  font-weight: 700;
  color: #1e293b;
  flex-shrink: 0;
  pointer-events: none;
}
.attend-date-badge-readonly .attend-date-picker-icon {
  color: #2563eb;
  width: 16px;
  height: 16px;
}
.attend-date-badge-readonly .attend-date-display-val {
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  color: #1e293b;
  font-family: var(--font-mono, monospace);
  line-height: 1;
}

/* Test History Compact Batch Tag */
.test-history-batch-tag {
  font-size: 0.68rem !important;
  padding: 1px 6px !important;
  line-height: 1.2 !important;
  font-weight: 600 !important;
  border-radius: 4px !important;
  letter-spacing: 0.01em !important;
}

/* Test History Table Alignment and Styling */
#testHistoryTable {
  width: 100%;
  border-collapse: collapse;
}

#testHistoryTable th,
#testHistoryTable td {
  vertical-align: middle;
  padding: 12px 14px;
}

#testHistoryTable th:nth-child(5),
#testHistoryTable td:nth-child(5),
#testHistoryTable th:nth-child(6),
#testHistoryTable td:nth-child(6) {
  text-align: center;
}

/* Attendance Page Single Interactive Date Selector */
.attend-date-selector-wrapper {
  position: relative;
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
}

.attend-date-picker-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 38px;
  padding: 0 14px;
  background: #ffffff;
  border: 1.5px solid #2563eb;
  border-radius: 9px;
  cursor: pointer;
  box-shadow: 0 1px 3px rgba(37, 99, 235, 0.08);
  font-weight: 700;
  color: #1e293b;
  position: relative;
  transition: all 0.15s ease;
  user-select: none;
}

.attend-date-picker-btn:hover {
  background: #eff6ff;
  border-color: #1d4ed8;
  box-shadow: 0 2px 6px rgba(37, 99, 235, 0.15);
}

.attend-date-picker-btn:focus-within {
  outline: none;
  border-color: #1d4ed8;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.2);
}

.attend-date-picker-icon {
  width: 16px;
  height: 16px;
  color: #2563eb;
  flex-shrink: 0;
}

.attend-date-display-val {
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  color: #1e293b;
  font-family: var(--font-mono, monospace);
  line-height: 1;
}

.attend-date-picker-arrow {
  width: 13px;
  height: 13px;
  color: #64748b;
  margin-left: 2px;
  flex-shrink: 0;
  transition: transform 0.15s ease;
}

.attend-date-picker-btn:hover .attend-date-picker-arrow {
  color: #2563eb;
}

.attend-date-hidden-input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
  z-index: 5;
  font-size: 16px;
}

@media (max-width: 900px) {
  .user-stats-compact-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
    margin-bottom: 14px;
  }
  .student-stats-compact-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    margin-bottom: 14px;
  }
}

@media (max-width: 600px) {
  .user-stats-compact-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
    margin-bottom: 12px;
  }
  .student-stats-compact-grid {
    grid-template-columns: 1fr;
    gap: 8px;
    margin-bottom: 12px;
  }
  .user-stat-card {
    padding: 10px 12px;
    min-height: 64px;
  }
  .user-stat-val {
    font-size: 1.3rem;
  }
  .user-stat-icon-wrap {
    width: 24px;
    height: 24px;
  }
  .user-stat-icon-wrap svg {
    width: 12px;
    height: 12px;
  }
  .attend-title-date-row {
    gap: 8px;
  }
  .attend-date-picker-btn {
    height: 36px;
    padding: 0 10px;
    gap: 6px;
  }
  .attend-date-display-val {
    font-size: 0.85rem;
  }
}

/* ================================================================
   ALL-PAGES UX AUDIT ENHANCEMENTS (DESKTOP & MOBILE)
   ================================================================ */

/* 1. Summary Strips (Student Management, User Management) */
.ux-summary-strip {
  display: grid;
  gap: 12px;
  padding: 14px 20px;
  background: #f8fafc;
  border-bottom: 1px solid #e2e8f0;
}

.ux-summary-strip.ux-summary-3col {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.ux-summary-strip.ux-summary-4col {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.ux-summary-card {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  padding: 12px 16px;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.03);
}

.ux-inline-stat-pill {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 9px;
  padding: 8px 14px;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.03);
}

.ux-inline-stat-label {
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #64748b;
}

.ux-inline-stat-val {
  font-size: 1.05rem;
  font-weight: 800;
  color: #1d68ff;
  background: #eff6ff;
  padding: 2px 9px;
  border-radius: 999px;
  line-height: 1.3;
}

.ux-summary-icon {
  width: 38px;
  height: 38px;
  border-radius: 9px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.ux-summary-icon svg {
  width: 18px;
  height: 18px;
}

.ux-summary-icon.icon-blue {
  background: #eff6ff;
  color: #1d68ff;
}

.ux-summary-icon.icon-indigo {
  background: #eef2ff;
  color: #4f46e5;
}

.ux-summary-icon.icon-teal {
  background: #f0fdfa;
  color: #0d9488;
}

.ux-summary-icon.icon-amber {
  background: #fffbeb;
  color: #d97706;
}

.ux-summary-meta {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.ux-summary-label {
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #64748b;
  line-height: 1.1;
}

.ux-summary-val {
  font-size: 1.25rem;
  font-weight: 800;
  color: #0f172a;
  line-height: 1.15;
}

/* 2. Fee Management 4-Column Summary Grid */
.fee-stats-grid.ux-fee-stats-4col {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.fee-stat-card.card-neutral {
  background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
  border: 1px solid #cbd5e1;
}

.fee-stat-card.card-neutral .fee-stat-icon {
  background: #e2e8f0;
  color: #334155;
}

.fee-stat-card.card-neutral-warn {
  background: linear-gradient(135deg, #fffbeb 0%, #fef3c7 100%);
  border: 1px solid #fde68a;
}

.fee-stat-card.card-neutral-warn .fee-stat-icon {
  background: #fef08a;
  color: #b45309;
}

/* 3. School Management Toolbar (Count Pill + Search Bar) */
.ux-school-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 12px 20px;
  background: #f8fafc;
  border-bottom: 1px solid #e2e8f0;
  flex-wrap: wrap;
}

.ux-school-count-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 9px;
  padding: 7px 12px;
  font-size: 0.82rem;
  color: #475569;
  font-weight: 600;
}

.ux-school-count-badge svg {
  width: 16px;
  height: 16px;
  color: #1d68ff;
  flex-shrink: 0;
}

.ux-school-count-badge strong {
  font-size: 0.95rem;
  font-weight: 800;
  color: #0f172a;
}

.ux-school-search-wrap {
  flex: 1 1 260px;
  max-width: 360px;
}

/* 4. Desktop vs Mobile Table/Card Toggle Across All Entity Pages */
.ux-mobile-cards-list {
  display: none;
}

.ux-card-icon-btn {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  border: 1px solid #e2e8f0;
  background: #f8fafc;
  color: #475569;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
  transition: all 0.15s ease;
}

.ux-card-icon-btn svg {
  width: 15px;
  height: 15px;
}

.ux-card-icon-btn:hover {
  background: #eff6ff;
  border-color: #bfdbfe;
  color: #1d68ff;
}

.ux-card-icon-btn.danger:hover {
  background: #fef2f2;
  border-color: #fecaca;
  color: #dc2626;
}

.ux-card-footer-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px dashed #e2e8f0;
}

.ux-card-footer-actions .btn {
  flex: 1 1 auto;
  justify-content: center;
  font-size: 0.78rem;
  padding: 7px 10px;
}

/* 5. Upload Page Split-View Proportions & Empty State Balance */
#viewUpload .split-view {
  align-items: stretch;
}

#viewUpload .panel-upload,
#viewUpload .panel-questions {
  display: flex;
  flex-direction: column;
}

@media (max-width: 1024px) {
  .fee-stats-grid.ux-fee-stats-4col {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 768px) {

  /* Hide wide multi-column tables on mobile and show individual accordion/entity cards */
  .ux-desktop-table {
    display: none !important;
  }

  .ux-mobile-cards-list {
    display: flex !important;
    flex-direction: column;
    gap: 8px;
    padding: 10px 8px 14px;
  }

  /* Compact summary strips on mobile */
  .ux-summary-strip {
    padding: 10px;
    gap: 8px;
  }

  .ux-summary-strip.ux-summary-3col {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .ux-summary-strip.ux-summary-4col {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .ux-summary-card {
    padding: 8px 10px;
    gap: 8px;
    border-radius: 9px;
  }

  .ux-summary-icon {
    width: 30px;
    height: 30px;
    border-radius: 7px;
  }

  .ux-summary-icon svg {
    width: 15px;
    height: 15px;
  }

  .ux-summary-label {
    font-size: 0.6rem;
  }

  .ux-summary-val {
    font-size: 1.05rem;
  }

  /* Fee Management 4-card grid on mobile: 2x2 compact grid */
  .fee-stats-grid.ux-fee-stats-4col {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
    padding: 10px !important;
  }

  .fee-stats-grid.ux-fee-stats-4col .fee-stat-card {
    padding: 10px 12px !important;
    gap: 10px !important;
  }

  .fee-stats-grid.ux-fee-stats-4col .fee-stat-icon {
    width: 34px !important;
    height: 34px !important;
  }

  .fee-stats-grid.ux-fee-stats-4col .fee-stat-value {
    font-size: 1.1rem !important;
  }

  /* School toolbar on mobile */
  .ux-school-toolbar {
    padding: 10px;
    gap: 8px;
  }

  .ux-school-search-wrap {
    max-width: 100%;
    flex: 1 1 100%;
  }
}

/* ================================================================
   ATTENDANCE DATE DISPLAY & HISTORY CALENDAR SELECTOR
   ================================================================ */
#attendDatePill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 36px;
  padding: 0 14px;
  border-radius: 9px;
  background: #f8fafc;
  border: 1px solid #cbd5e1;
  color: #0f172a;
  font-size: 0.88rem;
  font-weight: 700;
  font-family: var(--font-mono, monospace);
  letter-spacing: 0.02em;
  pointer-events: none;
  user-select: none;
  cursor: default;
}

#attendDatePill svg {
  display: none !important;
}

.attend-history-date-input {
  height: 36px !important;
  padding: 0 10px !important;
  border-radius: 8px !important;
  border: 1px solid #cbd5e1 !important;
  background: #ffffff !important;
  font-size: 0.84rem !important;
  font-weight: 600 !important;
  color: #0f172a !important;
  cursor: pointer;
}










/* ============================================================
   Mobile Button Usability Overrides (v65)
   Ensures every button is clearly readable and easy to tap (>= 44px touch target)
   ============================================================ */
@media (max-width: 768px) {

  .btn,
  .btn-sm,
  .header-actions .btn,
  .admin-users-section-header .btn,
  .page-view-actions .btn,
  .qb-session-actions .btn,
  .questions-header-actions .btn-sm,
  .modal-footer .btn {
    min-height: 44px !important;
    height: auto !important;
    padding: 10px 16px !important;
    font-size: 0.92rem !important;
    line-height: 1.3 !important;
    gap: 8px !important;
    border-radius: 10px !important;
    box-sizing: border-box;
  }

  .btn svg,
  .btn-sm svg {
    width: 18px !important;
    height: 18px !important;
  }

  .admin-users-section-header,
  .header-actions {
    gap: 10px !important;
  }

  .admin-users-section-header .header-actions {
    width: 100%;
    flex-direction: column;
    align-items: stretch !important;
  }

  .admin-users-section-header .header-actions .btn {
    width: 100%;
    white-space: normal;
  }

  .btn-card-delete,
  .btn-delete-q {
    min-height: 40px;
    padding: 8px 12px;
    font-size: 0.85rem;
    gap: 6px;
  }

  .btn-card-delete svg,
  .btn-delete-q svg {
    width: 16px;
    height: 16px;
  }

  .btn-add-option-pill,
  .btn-add-opt {
    min-height: 42px;
    height: auto;
    padding: 8px 16px;
    font-size: 0.88rem;
    gap: 6px;
  }

  .btn-add-option-pill svg,
  .btn-add-opt svg {
    width: 16px;
    height: 16px;
  }

  .modal-footer {
    gap: 10px !important;
  }

  .hierarchy-input,
  .form-input {
    min-height: 44px;
    font-size: 16px;
    /* prevents iOS zoom on focus */
  }
}

/* Mobile accordion cards (fees etc.): header, avatar, chevron, details */
.attend-student-card-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 11px;
  cursor: pointer;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}

.attend-student-avatar {
  width: 34px;
  height: 34px;
  border-radius: 9px;
  background: #eff6ff;
  color: #1d4ed8;
  font-size: 0.86rem;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  border: 1px solid #dbeafe;
}

.attend-student-card.is-present .attend-student-avatar {
  background: #dcfce7;
  color: #15803d;
  border-color: #bbf7d0;
}

.attend-student-card.is-absent .attend-student-avatar {
  background: #fee2e2;
  color: #b91c1c;
  border-color: #fecaca;
}

.attend-student-main-info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.attend-student-name-row {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}

.attend-student-name-row .attend-student-name {
  font-size: 0.88rem;
  font-weight: 700;
  color: #0f172a;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.attend-card-status-pill {
  display: inline-flex;
  align-items: center;
  padding: 1px 6px;
  border-radius: 999px;
  font-size: 0.62rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  flex-shrink: 0;
}

.attend-card-status-pill.pill-unmarked {
  background: #fef3c7;
  color: #b45309;
  border: 1px solid #fde68a;
}

.attend-card-status-pill.pill-present {
  background: #dcfce7;
  color: #15803d;
  border: 1px solid #bbf7d0;
}

.attend-student-submeta {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 0.72rem;
  font-weight: 600;
  color: #64748b;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.attend-submeta-dot {
  color: #cbd5e1;
}

.attend-card-right-controls {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}

.attend-accordion-chevron {
  width: 22px;
  height: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #94a3b8;
  transition: transform 0.2s ease, color 0.2s ease;
}

.attend-accordion-chevron svg {
  width: 15px;
  height: 15px;
}

.attend-student-card.is-expanded .attend-accordion-chevron {
  transform: rotate(180deg);
  color: #2563eb;
}

.attend-student-card-details {
  display: none;
  padding: 10px 12px 12px;
  border-top: 1px solid #f1f5f9;
  background: #f8fafc;
}

.attend-student-card.is-expanded .attend-student-card-details {
  display: block;
}

.attend-details-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin-bottom: 10px;
}

.attend-detail-cell {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  padding: 6px 9px;
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}

/* ===== Global loading / processing indicator ===== */
.app-busy-bar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  z-index: 100000;
  opacity: 0;
  pointer-events: none;
  overflow: hidden;
  transition: opacity .15s
}

.app-busy-bar.active {
  opacity: 1
}

.app-busy-bar::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: 40%;
  background: linear-gradient(90deg, #1d68ff, #6c8cff);
  border-radius: 3px;
  animation: appBusySlide 1.1s ease-in-out infinite
}

@keyframes appBusySlide {
  0% {
    left: -40%
  }

  100% {
    left: 100%
  }
}

.app-busy-overlay {
  position: fixed;
  inset: 0;
  z-index: 99999;
  display: none;
  align-items: center;
  justify-content: center;
  background: rgba(15, 23, 42, .28);
  -webkit-backdrop-filter: blur(1px);
  backdrop-filter: blur(1px);
  touch-action: none
}

.app-busy-overlay.active {
  display: flex
}

.app-busy-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 22px;
  background: #fff;
  border-radius: 14px;
  box-shadow: 0 10px 30px rgba(15, 23, 42, .25);
  font: 600 15px Inter, system-ui, sans-serif;
  color: #0f172a
}

.app-busy-spinner {
  width: 22px;
  height: 22px;
  border: 3px solid #dbe5ff;
  border-top-color: #1d68ff;
  border-radius: 50%;
  animation: appBusySpin .7s linear infinite
}

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

.fee-scope-info {
  margin: 4px 0 10px;
  font-size: .85rem;
  font-weight: 600;
  color: #475569
}

/* ===== Application Reusable Pagination ===== */
.app-pagination-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  padding: 14px 18px;
  background: #ffffff;
  border-top: 1px solid var(--border-color, #e2e8f0);
  border-radius: 0 0 10px 10px;
  font-size: 0.85rem;
  color: var(--text-secondary, #64748b);
  box-sizing: border-box;
}


.hierarchy-bar-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px 14px;
}

@media (min-width: 1440px) {
  .hierarchy-bar-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.pagination-info {
  font-size: 0.84rem;
  color: var(--text-muted, #64748b);
}

.pagination-highlight {
  font-weight: 700;
  color: var(--text-primary, #0f172a);

}

.pagination-actions {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}

.pagination-size-wrap {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.82rem;
  color: var(--text-muted, #64748b);
}

.pagination-size-select {
  padding: 4px 8px;
  font-size: 0.82rem;
  border-radius: 6px;
  border: 1px solid var(--border-color, #cbd5e1);
  background: #ffffff;
  color: var(--text-primary, #0f172a);
  font-weight: 600;
  cursor: pointer;
  outline: none;
}

.pagination-size-select:focus {
  border-color: var(--primary, #1d68ff);
}

.pagination-nav-group {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.pagination-pages-list {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.pagination-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  min-width: 32px;
  height: 32px;
  padding: 0 10px;
  border-radius: 6px;
  border: 1px solid var(--border-color, #e2e8f0);
  background: #ffffff;
  color: var(--text-primary, #1e293b);
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s ease;
  user-select: none;
}

.pagination-btn:hover:not(:disabled) {
  background: #f8fafc;
  border-color: #cbd5e1;
  color: var(--primary, #1d68ff);
}

.pagination-btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
  border-color: var(--border-color, #e2e8f0);
}

.pagination-btn.active {
  background: var(--primary, #1d68ff) !important;
  color: #ffffff !important;
  border-color: var(--primary, #1d68ff) !important;
  font-weight: 700;
}

.pagination-ellipsis {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  color: var(--text-muted, #94a3b8);
  font-weight: 700;
}

@media (max-width: 640px) {
  .app-pagination-bar {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
    padding: 12px;
  }

  .pagination-info {
    text-align: center;
  }

  .pagination-actions {
    justify-content: space-between;
    width: 100%;
  }

  .pagination-nav-group {
    flex: 1;
    justify-content: flex-end;
  }

  .pagination-text {
    display: none;
  }

  .pagination-btn {
    min-width: 30px;
    height: 30px;
    padding: 0 6px;
  }
}

.questions-scroll-area {
  flex: 1;
  overflow-y: auto;
  padding: 16px 18px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

/* Empty Questions Placeholder */
.empty-questions-notice {
  text-align: center;
  padding: 80px 24px;
  color: var(--text-muted);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
}

.empty-notice-icon-box {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: #eef5ff;
  color: #7ba6ea;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 16px;
}

.empty-notice-icon-box svg {
  width: 26px;
  height: 26px;
}

.empty-questions-notice h3 {
  font-family: var(--font-heading);
  font-size: 1.05rem;
  font-weight: 700;
  color: #334155;
  margin-bottom: 6px;
}

.empty-questions-notice p {
  font-size: 0.86rem;
  color: #64748b;
  line-height: 1.6;
  max-width: 290px;
  margin: 0 auto;
}

/* ============================================================
   Question Card Styling
   ============================================================ */

.question-card {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  padding: 16px;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.04);
  display: flex;
  flex-direction: column;
  gap: 12px;
  transition: all 150ms ease;
  box-sizing: border-box;
  flex: 0 0 auto;
  flex-shrink: 0;
  min-height: fit-content;
  height: auto;
  overflow: visible;
}

.question-card:hover {
  border-color: #cbd5e1;
  box-shadow: 0 4px 12px rgba(15, 23, 42, 0.06);
}

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

.q-number-tag {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  font-weight: 700;
  color: #1d68ff;
  background: #eef2ff;
  border: 1px solid #c7d2fe;
  padding: 3px 8px;
  border-radius: 5px;
}

.card-actions {
  display: flex;
  align-items: center;
  gap: 6px;
}

.btn-card-delete,
.btn-delete-q {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 8px;
  font-family: var(--font-body);
  font-size: 0.74rem;
  font-weight: 600;
  color: #94a3b8;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 4px;
  cursor: pointer;
  transition: all 120ms ease;
}

.btn-card-delete:hover,
.btn-delete-q:hover {
  background: #fef2f2;
  color: #ef4444;
  border-color: #fecaca;
}

.btn-card-delete svg,
.btn-delete-q svg {
  width: 13px;
  height: 13px;
}

.q-textarea {
  width: 100%;
  box-sizing: border-box;
  background: #ffffff;
  border: 1px solid #cbd5e1;
  border-radius: 6px;
  padding: 10px 12px;
  font-family: var(--font-body);
  font-size: 0.88rem;
  color: #0f172a;
  line-height: 1.5;
  resize: vertical;
  min-height: 64px;
  outline: none;
  transition: border-color 150ms ease, box-shadow 150ms ease;
}

.q-textarea:focus {
  border-color: #1d68ff;
  box-shadow: 0 0 0 2px rgba(29, 104, 255, 0.18);
}

/* Option Rows */
.options-stack {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.option-item {
  display: flex;
  align-items: center;
  gap: 10px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 6px;
  padding: 6px 10px;
  transition: all 120ms ease;
  box-sizing: border-box;
}

.option-item.is-correct {
  background: #ecfdf5;
  border-color: #86efac;
  box-shadow: 0 0 0 1px #86efac;
}

.option-radio {
  cursor: pointer;
  accent-color: #10b981;
  width: 16px;
  height: 16px;
  margin: 0;
  flex-shrink: 0;
}

.option-letter {
  font-size: 0.82rem;
  font-weight: 700;
  color: #475569;
  width: 22px;
  flex-shrink: 0;
  user-select: none;
}

.option-input {
  flex: 1;
  min-width: 0;
  background: transparent;
  border: none;
  outline: none;
  font-size: 0.85rem;
  color: #0f172a;
  font-family: var(--font-body);
  padding: 2px 0;
}

.option-del-btn {
  width: 22px;
  height: 22px;
  border-radius: 4px;
  border: none;
  background: transparent;
  color: #94a3b8;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 120ms ease;
}

.option-del-btn:hover {
  background: #fee2e2;
  color: #ef4444;
}

.option-del-btn svg {
  width: 13px;
  height: 13px;
}

.card-bottom {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  margin-top: 4px;
  padding-top: 10px;
  border-top: 1px solid #f1f5f9;
}

.correct-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 0.74rem;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: 6px;
  background: #f1f5f9;
  color: #64748b;
  border: 1px solid #e2e8f0;
  transition: all 150ms ease;
}

.correct-badge svg {
  width: 12px;
  height: 12px;
  opacity: 0.7;
}

.correct-badge.is-set {
  background: #ecfdf5;
  color: #065f46;
  border-color: #a7f3d0;
}

.correct-badge.is-set svg {
  opacity: 1;
}

/* ============================================================
   Standalone Full-Page Login View
   ============================================================ */

.login-page-view {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  height: 100dvh;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  background: radial-gradient(circle at 12% 18%, rgba(99, 102, 241, 0.12) 0%, transparent 45%),
    radial-gradient(circle at 88% 82%, rgba(6, 182, 212, 0.10) 0%, transparent 45%),
    #f8fafc;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  padding: 20px 16px;
  box-sizing: border-box;
}

.login-card-container {
  margin: auto;
  background: rgba(255, 255, 255, 0.94);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(226, 232, 240, 0.9);
  border-radius: 20px;
  box-shadow: 0 24px 60px -12px rgba(15, 23, 42, 0.12), 0 0 0 1px rgba(255, 255, 255, 0.9);
  width: 100%;
  max-width: 410px;
  padding: 38px 34px;
  display: flex;
  flex-direction: column;
  animation: qbModalPop 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

.login-card-header {
  text-align: center;
  margin-bottom: 24px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.login-brand-logo {
  width: 50px;
  height: 50px;
  border-radius: 14px;
  background: var(--primary-gradient);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ffffff;
  margin-bottom: 14px;
  box-shadow: 0 8px 24px -4px rgba(79, 70, 229, 0.45);
}

.login-brand-logo svg {
  width: 26px;
  height: 26px;
}

.login-title {
  font-family: var(--font-heading);
  font-size: 1.6rem;
  font-weight: 800;
  color: var(--text-primary);
  margin-bottom: 4px;
  letter-spacing: -0.02em;
}

.login-subtitle {
  font-size: 0.85rem;
  color: var(--text-secondary);
}

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

.login-field-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
  text-align: left;
}

.form-label {
  display: block;
  font-size: 0.76rem;
  font-weight: 600;
  color: var(--text-secondary);
  margin-bottom: 4px;
}

.form-input {
  width: 100%;
  padding: 9px 13px;
  font-family: var(--font-body);
  font-size: 0.88rem;
  border: 1px solid var(--border-medium);
  border-radius: var(--radius-md);
  background: var(--bg-surface);
  color: var(--text-primary);
  outline: none;
  transition: border-color 150ms ease, box-shadow 150ms ease;
}

.form-input:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.12);
}

.password-input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
}

.password-input-wrapper .form-input {
  padding-right: 42px;
}

.btn-toggle-password {
  position: absolute;
  right: 6px;
  top: 50%;
  transform: translateY(-50%);
  background: transparent;
  border: none;
  padding: 6px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  color: var(--text-muted);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: color 150ms ease, background 150ms ease;
  line-height: 1;
  z-index: 10;
}

.btn-toggle-password:hover {
  color: var(--text-primary);
  background: var(--bg-subtle);
}

.btn-toggle-password:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 1px;
}

.btn-toggle-password svg {
  width: 18px;
  height: 18px;
  stroke: currentColor;
  stroke-width: 2;
  transition: stroke 150ms ease;
  pointer-events: none;
}

html.user-logged-in #loginPageView {
  display: none !important;
}

html.user-logged-in #appContainer {
  display: flex !important;
}

.btn-login-submit {
  width: 100%;
  padding: 11px;
  font-size: 0.92rem;
  font-weight: 600;
  margin-top: 6px;
}

/* ============================================================
   Modals (Question Bank & User Management)
   ============================================================ */

.qb-overlay {
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, 0.48);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  animation: qbFadeIn 0.15s ease;
}

@keyframes qbFadeIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

.qb-modal {
  background: var(--bg-surface);
  border-radius: var(--radius-lg);
  border: 1px solid var(--border-subtle);
  box-shadow: var(--shadow-xl);
  width: 100%;
  max-width: 680px;
  max-height: 85vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  animation: qbModalPop 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes qbModalPop {
  from {
    transform: scale(0.96);
    opacity: 0;
  }

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

.qb-modal-header {
  padding: 16px 20px;
  border-bottom: 1px solid var(--border-subtle);
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--bg-surface);
}

.btn-modal-close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border-radius: var(--radius-md);
  border: 1px solid transparent;
  background: transparent;
  color: var(--text-secondary);
  cursor: pointer;
  transition: all 150ms ease;
}

.btn-modal-close:hover {
  background: var(--bg-subtle);
  color: var(--text-primary);
  border-color: var(--border-subtle);
}

.btn-modal-close:active {
  transform: scale(0.94);
}

.btn-modal-close svg {
  width: 18px;
  height: 18px;
}

.btn-cancel-selection {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  padding: 0;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-subtle);
  background: #ffffff;
  color: var(--text-secondary);
  cursor: pointer;
  transition: all 150ms ease;
}

.btn-cancel-selection:hover {
  background: #fee2e2;
  color: var(--danger);
  border-color: #fecaca;
}

.btn-cancel-selection:active {
  transform: scale(0.94);
}

.btn-cancel-selection svg {
  width: 14px;
  height: 14px;
}

.qb-modal-body {
  padding: 18px 20px;
  overflow-y: auto;
  flex: 1;
  min-height: 200px;
}

.qb-loading,
.qb-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 40px 20px;
  color: var(--text-secondary);
  text-align: center;
  font-size: 0.9rem;
}

/* ============================================================
   Question Bank Hierarchy Filter Bar & Card Badges
   ============================================================ */

.qb-filter-bar {
  display: flex;
  align-items: flex-end;
  gap: 12px;
  background: #ffffff;
  border-radius: var(--radius-lg);
  border: 1px solid var(--border-subtle);
  padding: 12px 16px;
  margin-bottom: 16px;
  box-shadow: var(--shadow-xs);
  flex-wrap: wrap;
}

.qb-filter-group {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 140px;
}

.qb-search-group {
  flex: 1;
  min-width: 180px;
}

.qb-filter-label {
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--text-secondary);
}

.qb-filter-select,
.qb-search-input {
  padding: 6px 10px;
  font-family: var(--font-body);
  font-size: 0.8rem;
  border: 1px solid var(--border-medium);
  border-radius: var(--radius-sm);
  background: #ffffff;
  color: var(--text-primary);
  outline: none;
  transition: all 150ms ease;
  height: 32px;
}

.qb-filter-select:focus,
.qb-search-input:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 2px var(--primary-glow);
}

.qb-search-box {
  position: relative;
  display: flex;
  align-items: center;
}

.qb-search-box svg {
  position: absolute;
  left: 9px;
  color: var(--text-muted);
  pointer-events: none;
}

.qb-search-input {
  width: 100%;
  padding-left: 28px;
}

/* Question Bank Card Badges */
.qb-hierarchy-badges {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  margin: 3px 0;
}

.qb-badge {
  font-size: 0.7rem;
  font-weight: 600;
  padding: 2px 7px;
  border-radius: var(--radius-xs);
  line-height: 1.3;
}

.qb-badge-class {
  background: #eff6ff;
  color: #1d4ed8;
  border: 1px solid #bfdbfe;
}

.qb-badge-subject {
  background: #f0fdf4;
  color: #15803d;
  border: 1px solid #bbf7d0;
}

.qb-badge-chapter {
  background: #f8fafc;
  color: #475569;
  border: 1px solid #e2e8f0;
}

.qb-badge-category {
  background: #faf5ff;
  color: #7e22ce;
  border: 1px solid #e9d5ff;
}

.qb-badge-batch {
  background: #fffbeb;
  color: #b45309;
  border: 1px solid #fde68a;
}

.qb-badge-unassigned {
  background: #f1f5f9;
  color: #64748b;
  border: 1px solid #cbd5e1;
}

.cat-select.is-invalid,
.cat-input.is-invalid {
  border-color: var(--danger) !important;
  box-shadow: 0 0 0 2px rgba(239, 68, 68, 0.25) !important;
}



/* User Management Table */
.usersTableContainer,
#usersTableContainer {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  width: 100%;
}

.users-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.82rem;
}

.users-table th {
  text-align: left;
  padding: 10px 14px;
  font-weight: 700;
  color: var(--text-muted);
  border-bottom: 1.5px solid var(--border-subtle);
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  white-space: nowrap;
}

.users-table td {
  padding: 12px 14px;
  border-bottom: 1px solid var(--border-subtle);
  color: var(--text-primary);
  vertical-align: middle;
}

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

/* ============================================================
   Student Practice & Quiz Arena
   ============================================================ */

.quiz-arena {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: var(--bg-surface);
  overflow: hidden;
}

.quiz-arena-header {
  padding: 16px 20px;
  border-bottom: 1px solid var(--border-subtle);
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--bg-surface);
  flex-shrink: 0;
}

.quiz-title {
  font-family: var(--font-heading);
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--text-primary);
  margin: 0;
}

.quiz-subtitle {
  font-size: 0.78rem;
  color: var(--text-secondary);
  margin-top: 2px;
}

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

.quiz-score-banner {
  margin: 16px 20px 0 20px;
  padding: 14px 18px;
  border-radius: var(--radius-md);
  background: #ecfdf5;
  border: 1px solid #a7f3d0;
  display: flex;
  align-items: center;
  gap: 14px;
  animation: slideIn 0.25s ease;
}

.score-badge-circle {
  font-size: 2rem;
  line-height: 1;
}

.score-title {
  font-size: 1rem;
  font-weight: 700;
  color: #065f46;
  margin: 0;
}

.score-desc {
  font-size: 0.85rem;
  font-weight: 600;
  color: #047857;
  margin-top: 2px;
}

.quiz-scroll-area {
  flex: 1;
  padding: 20px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.quiz-card {
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  padding: 16px 18px;
  box-shadow: var(--shadow-sm);
  display: flex;
  flex-direction: column;
  gap: 12px;
  transition: all 150ms ease;
}

.quiz-card:hover {
  border-color: var(--border-medium);
  box-shadow: var(--shadow-md);
}

.quiz-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.quiz-q-num {
  font-family: var(--font-mono);
  font-size: 0.76rem;
  font-weight: 700;
  color: #4338ca;
  background: #eef2ff;
  padding: 2px 8px;
  border-radius: var(--radius-sm);
  border: 1px solid #c7d2fe;
}

.quiz-q-statement {
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--text-primary);
  line-height: 1.5;
}

.quiz-options-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 8px;
}

.quiz-opt-btn {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 12px;
  border-radius: var(--radius-md);
  border: 1px solid var(--border-subtle);
  background: var(--bg-subtle);
  cursor: pointer;
  text-align: left;
  font-family: var(--font-body);
  font-size: 0.84rem;
  font-weight: 500;
  color: var(--text-primary);
  transition: all 150ms ease;
}

.quiz-opt-btn:hover {
  border-color: var(--primary);
  background: #f0f7ff;
}

.quiz-opt-btn.is-selected {
  border-color: var(--primary);
  background: #eef2ff;
  color: var(--primary);
  font-weight: 600;
  box-shadow: 0 0 0 2px rgba(79, 70, 229, 0.2);
}

.quiz-opt-btn.is-correct-result {
  border-color: #10b981;
  background: #ecfdf5;
  color: #065f46;
  font-weight: 600;
}

.quiz-opt-btn.is-wrong-result {
  border-color: #ef4444;
  background: #fef2f2;
  color: #991b1b;
  text-decoration: line-through;
}

.quiz-opt-key {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: #ffffff;
  border: 1px solid var(--border-medium);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.75rem;
  font-weight: 700;
  flex-shrink: 0;
}

.quiz-opt-btn.is-selected .quiz-opt-key {
  background: var(--primary);
  color: #ffffff;
  border-color: var(--primary);
}

.quiz-opt-btn.is-correct-result .quiz-opt-key {
  background: #10b981;
  color: #ffffff;
  border-color: #10b981;
}

.quiz-opt-btn.is-wrong-result .quiz-opt-key {
  background: #ef4444;
  color: #ffffff;
  border-color: #ef4444;
}

.quiz-explanation-box {
  margin-top: 8px;
  padding: 10px 12px;
  border-radius: var(--radius-sm);
  background: #f8fafc;
  border-left: 3px solid var(--primary);
  font-size: 0.8rem;
  color: var(--text-secondary);
}

.quiz-empty-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 60px 20px;
  text-align: center;
  color: var(--text-secondary);
}

/* ============================================================
   Toast Notifications
   ============================================================ */

.toast-shelf {
  position: fixed;
  bottom: 24px;
  right: 24px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  z-index: 10000;
  pointer-events: none;
  max-width: 380px;
}

.toast-msg {
  pointer-events: auto;
  background: #ffffff;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: 11px 16px;
  display: flex;
  align-items: center;
  gap: 10px;
  box-shadow: 0 10px 28px -4px rgba(15, 23, 42, 0.12);
  font-size: 0.84rem;
  font-weight: 550;
  color: var(--text-primary);
  animation: slideIn 0.22s ease;
}

@keyframes slideIn {
  from {
    transform: translateX(100%);
    opacity: 0;
  }

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

.toast-msg.toast-success {
  border-left: 4px solid var(--success);
}

.toast-msg.toast-error {
  border-left: 4px solid var(--danger);
}

/* ============================================================
   Page View & Dedicated Views (Question Bank & User Management)
   ============================================================ */

.page-view {
  width: 100%;
  height: calc(100vh - 64px);
  overflow-y: auto;
  background: #f8fafc;
  padding-bottom: 40px;
}

.page-view-container {
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
  padding: 24px 20px;
}

.page-view-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 24px;
  background: #ffffff;
  padding: 18px 24px;
  border-radius: var(--radius-md);
  border: 1px solid var(--border-subtle);
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.04);
}

.page-view-header-info {
  display: flex;
  align-items: center;
  gap: 16px;
}

.page-view-icon {
  width: 38px;
  height: 38px;
  border-radius: 10px;
  background: #eef2ff;
  border: 1px solid #c7d2fe;
  color: var(--primary);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.page-view-icon svg {
  width: 18px;
  height: 18px;
}

.page-view-title {
  font-family: var(--font-heading);
  font-size: 1.35rem;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 3px;
  letter-spacing: -0.015em;
}

.page-view-desc {
  font-size: 0.84rem;
  color: var(--text-secondary);
}

/* Question Bank Filter & Hierarchy Bar */
.qb-filter-bar {
  display: flex;
  align-items: flex-end;
  gap: 14px;
  background: #ffffff;
  border: 1px solid var(--border-subtle, #e2e8f0);
  border-radius: 12px;
  padding: 18px 22px;
  margin-bottom: 20px;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.04);
  flex-wrap: wrap;
}

.qb-filter-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 140px;
}

.qb-search-group {
  flex: 1;
  min-width: 220px;
}

.qb-filter-label {
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-secondary, #64748b);
}

.qb-filter-select {
  height: 38px;
  padding: 0 12px;
  border: 1px solid var(--border-medium, #cbd5e1);
  border-radius: 8px;
  background: #ffffff;
  font-family: var(--font-body);
  font-size: 0.84rem;
  color: var(--text-primary, #0f172a);
  outline: none;
  transition: all 150ms ease;
}

.qb-filter-select:focus {
  border-color: var(--primary, #1d68ff);
  box-shadow: 0 0 0 2px var(--primary-glow, rgba(29, 104, 255, 0.15));
}

.qb-search-box {
  position: relative;
  display: flex;
  align-items: center;
}

.qb-search-box svg {
  position: absolute;
  left: 12px;
  color: var(--text-muted, #94a3b8);
  pointer-events: none;
}

.qb-search-input {
  width: 100%;
  height: 38px;
  padding: 0 12px 0 36px;
  border: 1px solid var(--border-medium, #cbd5e1);
  border-radius: 8px;
  background: #ffffff;
  font-family: var(--font-body);
  font-size: 0.84rem;
  color: var(--text-primary, #0f172a);
  outline: none;
  transition: all 150ms ease;
}

.qb-search-input:focus {
  border-color: var(--primary, #1d68ff);
  box-shadow: 0 0 0 2px var(--primary-glow, rgba(29, 104, 255, 0.15));
}

.qb-filter-bar #btnResetQBFilters {
  height: 38px;
  padding: 0 18px;
  border-radius: 8px;
  font-weight: 600;
  font-size: 0.84rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  background: #ffffff;
  border: 1px solid #cbd5e1;
  color: #334155;
  transition: all 150ms ease;
}

.qb-filter-bar #btnResetQBFilters:hover {
  background: #f8fafc;
  border-color: #94a3b8;
  color: #0f172a;
}

/* Question Bank Sessions List */
.qb-session-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
  width: 100%;
  box-sizing: border-box;
}

.qb-session-card {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  padding: 20px 24px;
  box-shadow: 0 1px 4px rgba(15, 23, 42, 0.04);
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  justify-content: flex-start !important;
  width: 100% !important;
  box-sizing: border-box !important;
  gap: 14px;
  transition: all 180ms ease;
}

.qb-session-card:hover {
  border-color: #cbd5e1;
  box-shadow: 0 6px 18px rgba(15, 23, 42, 0.07);
}

.qb-session-card-main {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  width: 100% !important;
  box-sizing: border-box !important;
  gap: 20px;
}

.qb-session-info {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  gap: 8px;
  flex: 1 1 auto !important;
  min-width: 0 !important;
  width: 100% !important;
}

.qb-session-name {
  font-family: var(--font-heading);
  font-size: 1.08rem;
  font-weight: 700;
  color: #0f172a;
  line-height: 1.4;
  letter-spacing: -0.01em;
  word-break: break-word;
  display: block;
  width: 100%;
  text-align: left !important;
}

/* Question Bank Hierarchy Badges (Class -> Subject -> Chapter -> Category -> Batch) */
.qb-hierarchy-badges {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 6px;
  flex-wrap: wrap;
  width: 100%;
  text-align: left;
}

.qb-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 0.76rem;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: 6px;
  white-space: nowrap;
  line-height: 1.35;
}

.qb-badge strong {
  font-weight: 700;
}

.qb-badge-sep {
  font-size: 0.82rem;
  font-weight: 700;
  color: #94a3b8;
  margin: 0 2px;
  display: inline-flex;
  align-items: center;
  user-select: none;
}

.qb-badge-class {
  background: #eff6ff;
  color: #1d4ed8;
  border: 1px solid #bfdbfe;
}

.qb-badge-subject {
  background: #f0fdf4;
  color: #15803d;
  border: 1px solid #bbf7d0;
}

.qb-badge-chapter {
  background: #f8fafc;
  color: #334155;
  border: 1px solid #cbd5e1;
}

.qb-badge-category {
  background: #faf5ff;
  color: #7e22ce;
  border: 1px solid #e9d5ff;
}

.qb-badge-batch {
  background: #fff7ed;
  color: #c2410c;
  border: 1px solid #fed7aa;
}

.qb-badge-unassigned {
  background: #f1f5f9;
  color: #64748b;
  border: 1px solid #e2e8f0;
}

.qb-session-meta {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 16px;
  font-size: 0.78rem;
  color: #64748b;
  margin-top: 2px;
  width: 100%;
  text-align: left;
}

.qb-session-meta span {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.qb-session-actions {
  display: flex !important;
  align-items: center !important;
  gap: 10px;
  flex-shrink: 0 !important;
  margin-left: auto;
}

.qb-session-actions .btn {
  height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font-size: 0.82rem;
  font-weight: 600;
  padding: 0 16px;
  border-radius: 8px;
  white-space: nowrap;
  box-sizing: border-box;
}

.qb-session-actions .btn-preview-session {
  background: #ffffff;
  border: 1px solid #cbd5e1;
  color: #334155;
  transition: all 150ms ease;
}

.qb-session-actions .btn-preview-session:hover {
  background: #f8fafc;
  border-color: #94a3b8;
  color: #0f172a;
}

.qb-session-actions .btn-load-session {
  background: #1d68ff;
  color: #ffffff;
  border: 1px solid #1d68ff;
  padding: 0 20px;
  transition: all 150ms ease;
}

.qb-session-actions .btn-load-session:hover {
  background: #1557e0;
  border-color: #1557e0;
}

.qb-session-actions .btn-del-session {
  width: 38px;
  height: 38px;
  padding: 0;
  color: #ef4444;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: all 150ms ease;
}

.qb-session-actions .btn-del-session:hover {
  background: #fee2e2;
  color: #dc2626;
  border-color: #fca5a5;
}

/* Expandable Inline Questions Preview in Question Bank */
.qb-questions-preview {
  margin-top: 8px;
  padding: 14px 16px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: var(--radius-sm);
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.qb-preview-item {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 6px;
  padding: 10px 14px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.qb-preview-hierarchy {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.73rem;
  font-weight: 600;
  color: #64748b;
  flex-wrap: wrap;
}

.qb-preview-qtext {
  font-size: 0.88rem;
  font-weight: 600;
  color: #0f172a;
}

.qb-preview-answer-row {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.78rem;
  margin-top: 2px;
}

.qb-preview-correct-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: #ecfdf5;
  color: #065f46;
  border: 1px solid #a7f3d0;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 4px;
}

.qb-loading,
.qb-empty {
  background: #ffffff;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: 50px 20px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  color: var(--text-secondary);
}

/* Separator for Hierarchy tag */
.q-h-sep {
  font-weight: 700;
  color: #94a3b8;
  margin: 0 2px;
}

/* User Management Table Styles */
.users-table-container {
  background: #ffffff;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.04);
}

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

.users-table th {
  background: #f8fafc;
  padding: 12px 16px;
  text-align: left;
  font-size: 0.74rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-secondary);
  border-bottom: 1px solid var(--border-subtle);
}

.users-table td {
  padding: 12px 16px;
  border-bottom: 1px solid var(--border-subtle);
  vertical-align: middle;
}

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

.users-table tr:hover td {
  background: #f8fafc;
}

/* ============================================================
   Utility Classes
   ============================================================ */

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

/* ============================================================
   Mobile & Responsive Adaptations (Screens <= 900px)
   ============================================================ */

@media (max-width: 900px) {

  html,
  body {
    overflow-x: hidden;
    overflow-y: auto;
    height: auto;
    min-height: 100vh;
    min-height: 100dvh;
  }

  body.sidebar-drawer-open {
    overflow: hidden !important;
    touch-action: none !important;
  }

  .app-container {
    flex-direction: column !important;
    height: 100vh !important;
    height: 100dvh !important;
    overflow: hidden !important;
    position: relative !important;
  }

  /* Mobile Topbar with Hamburger Menu */
  .mobile-topbar-brand {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    min-width: 0 !important;
  }

  .mobile-hamburger-btn {
    width: 38px !important;
    height: 38px !important;
    min-width: 38px !important;
    min-height: 38px !important;
    border-radius: 8px !important;
    border: 1px solid #cbd5e1 !important;
    background: #ffffff !important;
    color: #0f172a !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    flex-shrink: 0 !important;
    touch-action: manipulation !important;
    -webkit-tap-highlight-color: transparent !important;
    user-select: none !important;
    position: relative !important;
    z-index: 60 !important;
  }

  .mobile-hamburger-btn:active {
    background: #f1f5f9 !important;
  }

  .mobile-hamburger-btn svg {
    width: 20px !important;
    height: 20px !important;
    pointer-events: none !important;
  }

  .mobile-brand-title {
    font-family: var(--font-heading) !important;
    font-size: 1.05rem !important;
    font-weight: 700 !important;
    color: #0f172a !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  .main-topbar {
    height: 52px !important;
    min-height: 52px !important;
    padding: 0 14px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    background: #ffffff !important;
    border-bottom: 1px solid #e2e8f0 !important;
    position: relative !important;
    z-index: 50 !important;
    flex-shrink: 0 !important;
  }

  /* Off-Canvas Navigation Drawer */
  .app-sidebar {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    bottom: 0 !important;
    width: 280px !important;
    max-width: 85vw !important;
    height: 100vh !important;
    height: 100dvh !important;
    background: #0f2e5a !important;
    z-index: 1050 !important;
    transform: translateX(-100%) !important;
    transition: transform 0.28s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.28s !important;
    display: flex !important;
    flex-direction: column !important;
    padding: 20px 16px !important;
    box-shadow: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
  }

  .app-sidebar.mobile-open {
    transform: translateX(0) !important;
    visibility: visible !important;
    pointer-events: auto !important;
    box-shadow: 8px 0 36px rgba(15, 23, 42, 0.5) !important;
  }

  .sidebar-brand {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 0 0 20px 0 !important;
    width: 100% !important;
  }

  .sidebar-brand-left {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
  }

  .sidebar-brand-name {
    font-size: 1.05rem !important;
  }

  .sidebar-close-btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 34px !important;
    height: 34px !important;
    border-radius: 8px !important;
    border: none !important;
    background: rgba(255, 255, 255, 0.12) !important;
    color: #cbd5e1 !important;
    cursor: pointer !important;
    touch-action: manipulation !important;
    flex-shrink: 0 !important;
  }

  .sidebar-close-btn:active {
    background: rgba(255, 255, 255, 0.25) !important;
    color: #ffffff !important;
  }

  .sidebar-close-btn svg {
    width: 18px !important;
    height: 18px !important;
    pointer-events: none !important;
  }

  .sidebar-nav {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    gap: 8px !important;
  }

  .sidebar-nav-item {
    padding: 12px 16px !important;
    font-size: 0.92rem !important;
    width: 100% !important;
    border-radius: 10px !important;
    display: flex;
    align-items: center !important;
    gap: 12px !important;
    touch-action: manipulation !important;
    cursor: pointer !important;
  }

  .sidebar-nav-item[style*="display: none"],
  .sidebar-nav-item[hidden],
  .sidebar-nav-item.menu-hidden,
  .sidebar-nav-item.is-hidden {
    display: none !important;
  }

  .sidebar-nav-item svg {
    width: 18px !important;
    height: 18px !important;
    pointer-events: none !important;
  }

  .sidebar-footer {
    margin-top: auto !important;
    padding-top: 16px !important;
    border-top: 1px solid rgba(255, 255, 255, 0.1) !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
    width: 100% !important;
  }

  .sidebar-user-badge {
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
    width: 100% !important;
  }

  .sidebar-user-info {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    padding: 8px 10px !important;
    background: rgba(255, 255, 255, 0.07) !important;
    border-radius: 10px !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
  }

  .sidebar-user-avatar {
    width: 32px !important;
    height: 32px !important;
  }

  .sidebar-user-name {
    font-size: 0.85rem !important;
    color: #ffffff !important;
  }

  .sidebar-logout-btn {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    width: 100% !important;
    padding: 10px 12px !important;
    border-radius: 8px !important;
    touch-action: manipulation !important;
    cursor: pointer !important;
  }

  /* Backdrop Overlay - NEVER block clicks when closed */
  .sidebar-backdrop {
    display: none !important;
  }

  .sidebar-backdrop.active {
    display: block !important;
    position: fixed !important;
    inset: 0 !important;
    background: rgba(15, 23, 42, 0.6) !important;
    backdrop-filter: blur(4px) !important;
    -webkit-backdrop-filter: blur(4px) !important;
    z-index: 1040 !important;
    pointer-events: auto !important;
    touch-action: none !important;
  }

  /* Main Scrollable View Area */
  .app-main-content {
    flex: 1 !important;
    height: calc(100vh - 52px) !important;
    height: calc(100dvh - 52px) !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    -webkit-overflow-scrolling: touch !important;
    position: relative !important;
    display: flex !important;
    flex-direction: column !important;
  }

  .app-layout:not(.is-hidden) {
    display: flex !important;
    flex-direction: column !important;
    gap: 14px !important;
    padding: 12px 12px 30px 12px !important;
    height: auto !important;
    overflow: visible !important;
    box-sizing: border-box !important;
  }

  .canvas-pane {
    height: auto !important;
    min-height: auto !important;
    max-height: none !important;
    border-radius: 10px !important;
    border: 1px solid #e2e8f0 !important;
    flex-shrink: 0 !important;
    position: relative !important;
    overflow: hidden !important;
  }

  .canvas-header-bar {
    height: auto !important;
    min-height: 52px !important;
    padding: 8px 12px !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
  }

  .questions-pane {
    height: auto !important;
    min-height: 46vh !important;
    border-radius: 10px !important;
    border: 1px solid #e2e8f0 !important;
    overflow: visible !important;
  }

  .questions-header {
    height: auto !important;
    min-height: 52px !important;
    padding: 8px 12px !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
  }

  .questions-scroll-area {
    overflow-y: visible !important;
    max-height: none !important;
    padding: 12px !important;
  }

  .hierarchy-bar-grid {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 10px !important;
  }

  .question-card {
    padding: 14px !important;
    gap: 10px !important;
  }

  /* Question Bank & Dedicated Page Views on Tablet/Mobile */
  .page-view {
    padding: 14px 12px 36px 12px !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  .page-view-container {
    max-width: 100% !important;
    gap: 14px !important;
  }

  .page-view-header {
    padding: 14px 16px !important;
    border-radius: 12px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 12px !important;
  }

  .page-view-header-info {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
  }

  .page-view-icon {
    width: 40px !important;
    height: 40px !important;
    border-radius: 10px !important;
    flex-shrink: 0 !important;
  }

  .page-view-title {
    font-size: 1.1rem !important;
  }

  .page-view-desc {
    font-size: 0.78rem !important;
  }

  .page-view-actions {
    display: flex !important;
    justify-content: flex-end !important;
    width: 100% !important;
  }

  .qb-filter-bar {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 10px !important;
    padding: 14px 16px !important;
    border-radius: 12px !important;
    margin-bottom: 0 !important;
  }

  .qb-filter-group {
    width: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 4px !important;
  }

  .qb-filter-select,
  .qb-search-input,
  .qb-search-box {
    width: 100% !important;
    height: 36px !important;
    box-sizing: border-box !important;
  }

  .page-view-body {
    padding: 14px !important;
    border-radius: 12px !important;
    min-height: auto !important;
  }

  .qb-session-card {
    padding: 16px 18px !important;
    border-radius: 12px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    width: 100% !important;
    box-sizing: border-box !important;
    gap: 12px !important;
  }

  .qb-session-card-main {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 12px !important;
    width: 100% !important;
  }

  .qb-session-info {
    width: 100% !important;
    align-items: stretch !important;
  }

  .qb-session-name {
    font-size: 1rem !important;
    word-break: break-word !important;
    text-align: left !important;
  }

  .qb-hierarchy-badges {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 6px !important;
    width: 100% !important;
    justify-content: flex-start !important;
  }

  .qb-badge {
    font-size: 0.74rem !important;
    padding: 3px 8px !important;
  }

  .qb-session-actions {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
    width: 100% !important;
    justify-content: flex-start !important;
    margin-left: 0 !important;
    padding-top: 10px !important;
    border-top: 1px solid #f1f5f9 !important;
  }

  .qb-session-actions .btn {
    flex: 1 1 auto !important;
    height: 36px !important;
    font-size: 0.82rem !important;
    justify-content: center !important;
  }

  .qb-session-actions .btn-del-session {
    flex: 0 0 36px !important;
    width: 36px !important;
  }

  /* User Management on Tablet/Mobile */
  .admin-users-section {
    padding: 14px 16px !important;
    border-radius: 12px !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  .admin-users-section-header {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 12px !important;
    margin-bottom: 12px !important;
    padding-bottom: 12px !important;
  }

  .admin-users-section-title {
    font-size: 1.05rem !important;
  }

  .admin-users-section-desc {
    font-size: 0.78rem !important;
  }

  .header-actions {
    display: flex !important;
    gap: 8px !important;
    width: 100% !important;
  }

  .header-actions .btn {
    flex: 1 !important;
    justify-content: center !important;
    height: 34px !important;
  }

  .table-responsive {
    width: 100% !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }

  .users-table {
    width: 100% !important;
    min-width: 480px !important;
    font-size: 0.82rem !important;
  }

  .users-table th,
  .users-table td {
    padding: 9px 10px !important;
  }

  /* Create User Modal on Tablet/Mobile */
  .modal-backdrop {
    padding: 12px !important;
  }

  .modal-card {
    max-width: 100% !important;
    max-height: 92vh !important;
    max-height: 92dvh !important;
    border-radius: 14px !important;
    overflow-y: auto !important;
  }

  .modal-header {
    padding: 14px 16px !important;
  }

  .modal-title {
    font-size: 1.05rem !important;
  }

  .modal-subtitle {
    font-size: 0.78rem !important;
  }

  .modal-form {
    padding: 14px 16px !important;
    gap: 12px !important;
  }

  .modal-footer {
    padding: 12px 16px !important;
    flex-direction: column-reverse !important;
    gap: 8px !important;
  }

  .modal-footer .btn {
    width: 100% !important;
    justify-content: center !important;
    height: 38px !important;
  }

  /* Toast shelf on mobile */
  .toast-shelf {
    left: 14px !important;
    right: 14px !important;
    bottom: 14px !important;
    max-width: none !important;
  }
}

/* ============================================================
   Mobile Phones (Screens <= 640px)
   ============================================================ */

@media (max-width: 640px) {
  .main-topbar {
    height: 50px !important;
    min-height: 50px !important;
    padding: 0 10px !important;
  }

  .mobile-brand-title {
    font-size: 0.98rem !important;
  }

  #exportDropdownMenu {
    right: 0 !important;
    left: auto !important;
    max-width: calc(100vw - 20px) !important;
  }

  .app-layout:not(.is-hidden) {
    padding: 10px 8px 24px 8px !important;
    gap: 12px !important;
  }

  .canvas-pane {
    height: auto !important;
    min-height: auto !important;
    border-radius: 10px !important;
  }

  .canvas-header-bar {
    padding: 8px 10px !important;
  }

  .canvas-toolbar,
  .toolbar-group {
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    flex-wrap: wrap !important;
  }

  .pane-header-title {
    font-size: 0.95rem !important;
  }

  .selection-action-bar {
    max-width: calc(100% - 20px) !important;
    flex-wrap: wrap !important;
  }

  .questions-pane {
    min-height: 44vh !important;
    border-radius: 10px !important;
  }

  .questions-header {
    padding: 8px 10px !important;
  }

  .header-title {
    font-size: 0.95rem !important;
  }

  .questions-header-actions {
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
  }

  .question-hierarchy-bar {
    padding: 10px 12px !important;
  }

  .hierarchy-bar-grid {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 8px !important;
  }

  .question-card {
    padding: 11px 10px !important;
    gap: 8px !important;
    border-radius: 8px !important;
  }

  .q-textarea {
    font-size: 0.83rem !important;
    padding: 7px 9px !important;
    min-height: 54px !important;
  }

  .option-item {
    padding: 5px 6px !important;
    gap: 6px !important;
  }

  .option-letter {
    font-size: 0.74rem !important;
    width: 16px !important;
  }

  .option-input {
    font-size: 0.8rem !important;
  }

  .correct-badge {
    font-size: 0.7rem !important;
    padding: 3px 7px !important;
  }

  .empty-upload-box {
    padding: 20px 12px !important;
    width: 92% !important;
    max-width: 320px !important;
  }

  .upload-icon-circle {
    width: 40px !important;
    height: 40px !important;
    margin-bottom: 8px !important;
  }

  .upload-icon-circle svg {
    width: 20px !important;
    height: 20px !important;
  }

  .empty-title {
    font-size: 1rem !important;
    margin-bottom: 3px !important;
  }

  .empty-desc {
    font-size: 0.74rem !important;
    line-height: 1.38 !important;
    margin-bottom: 10px !important;
  }

  .btn-browse-main {
    padding: 7px 16px !important;
    font-size: 0.78rem !important;
  }

  .upload-formats-hint {
    margin-top: 6px !important;
    font-size: 0.66rem !important;
  }

  .page-view {
    padding: 10px 8px 30px 8px !important;
  }

  .page-view-header {
    padding: 10px 12px !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 10px !important;
  }

  .page-view-title {
    font-size: 1rem !important;
  }

  .page-view-desc {
    font-size: 0.72rem !important;
  }

  .qb-filter-bar {
    padding: 10px 12px !important;
    gap: 8px !important;
  }

  .page-view-body {
    padding: 10px !important;
  }

  .qb-session-card {
    padding: 14px !important;
    align-items: stretch !important;
    width: 100% !important;
  }

  .qb-session-actions {
    flex-direction: row !important;
    flex-wrap: wrap !important;
  }

  .qb-session-actions .btn {
    flex: 1 1 auto !important;
  }

  .qb-session-actions .btn-del-session {
    flex: 0 0 36px !important;
    width: 36px !important;
  }

  .admin-users-section {
    padding: 10px 12px !important;
  }

  .header-actions {
    flex-direction: column !important;
  }

  .header-actions .btn {
    width: 100% !important;
  }

  .form-grid-2 {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 10px !important;
  }

  .quiz-arena-header {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 10px !important;
    padding: 12px 14px !important;
  }

  .quiz-header-actions {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 6px !important;
    width: 100% !important;
    justify-content: flex-end !important;
  }

  .quiz-scroll-area {
    padding: 12px 10px !important;
  }

  .quiz-score-banner {
    margin: 10px 10px 0 10px !important;
    padding: 10px 12px !important;
  }

  .quiz-opt-btn {
    padding: 8px 10px !important;
    font-size: 0.8rem !important;
  }

  .login-card-container {
    padding: 24px 16px !important;
    border-radius: 16px !important;
    max-width: 360px !important;
  }

  .login-title {
    font-size: 1.25rem !important;
  }

  .login-subtitle {
    font-size: 0.75rem !important;
  }

  .form-input {
    height: 38px !important;
    font-size: 0.82rem !important;
  }

  .btn-login-submit {
    height: 40px !important;
    font-size: 0.88rem !important;
  }
}

/* ============================================================
   Small / Compact Phones (Screens <= 480px)
   ============================================================ */

@media (max-width: 480px) {
  .main-topbar {
    height: 48px !important;
    min-height: 48px !important;
    padding: 0 8px !important;
  }

  .mobile-hamburger-btn {
    width: 34px !important;
    height: 34px !important;
    min-width: 34px !important;
    min-height: 34px !important;
  }

  .mobile-brand-title {
    font-size: 0.92rem !important;
  }

  .app-layout:not(.is-hidden) {
    padding: 8px 6px 20px 6px !important;
    gap: 10px !important;
  }

  .canvas-pane {
    height: auto !important;
    min-height: auto !important;
  }

  .questions-pane {
    min-height: 42vh !important;
  }

  .canvas-header-bar,
  .questions-header {
    padding: 6px 8px !important;
  }

  .pane-header-title,
  .header-title {
    font-size: 0.9rem !important;
  }

  .questions-header-actions {
    gap: 4px !important;
  }

  .questions-header-actions .btn-sm {
    height: 28px !important;
    padding: 0 6px !important;
    font-size: 0.72rem !important;
  }

  .btn-sm {
    height: 30px !important;
    padding: 0 8px !important;
    font-size: 0.74rem !important;
  }

  .empty-upload-box {
    padding: 14px 10px !important;
    max-width: 290px !important;
  }

  .empty-title {
    font-size: 0.92rem !important;
  }

  .empty-desc {
    font-size: 0.7rem !important;
    margin-bottom: 8px !important;
  }

  .btn-browse-main {
    padding: 6px 14px !important;
    font-size: 0.74rem !important;
  }

  .question-hierarchy-bar {
    padding: 8px 8px !important;
  }

  .hierarchy-bar-grid {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 6px !important;
  }

  .hierarchy-input {
    height: 34px !important;
    font-size: 0.8rem !important;
  }

  .hierarchy-label {
    font-size: 0.68rem !important;
  }

  .question-card {
    padding: 8px 8px !important;
    gap: 6px !important;
  }

  .card-top {
    gap: 6px !important;
  }

  .q-textarea {
    font-size: 0.8rem !important;
    padding: 6px 8px !important;
    min-height: 48px !important;
  }

  .option-item {
    padding: 4px 6px !important;
    gap: 5px !important;
  }

  .option-letter {
    font-size: 0.7rem !important;
    width: 14px !important;
  }

  .option-input {
    font-size: 0.76rem !important;
  }

  .page-view {
    padding: 8px 6px 24px 6px !important;
  }

  .page-view-header {
    padding: 8px 10px !important;
  }

  .qb-filter-bar {
    padding: 8px 10px !important;
    gap: 6px !important;
  }

  .qb-filter-select,
  .qb-search-input {
    height: 34px !important;
    font-size: 0.78rem !important;
  }

  .users-table {
    font-size: 0.76rem !important;
  }

  .users-table th,
  .users-table td {
    padding: 7px 8px !important;
  }

  .modal-card {
    width: 96% !important;
    border-radius: 12px !important;
  }

  .modal-header {
    padding: 10px 12px !important;
  }

  .modal-form {
    padding: 10px 12px !important;
    gap: 10px !important;
  }

  .modal-footer {
    padding: 10px 12px !important;
  }

  .form-grid-2 {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 8px !important;
  }

  .login-page-view {
    padding: 12px 8px !important;
  }

  .login-card-container {
    padding: 20px 14px !important;
    border-radius: 14px !important;
  }
}

/* ============================================================
   New Modules Design System: Schools, Students, Assessments & Fees
   ============================================================ */

.form-grid-3 {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

@media (max-width: 768px) {
  .form-grid-3 {
    grid-template-columns: minmax(0, 1fr);
    gap: 8px;
  }
}

.modal-card-lg {
  max-width: 820px !important;
  width: 94%;
}

.modal-card-xl {
  max-width: 1080px !important;
  width: 95vw !important;
  max-height: 90vh !important;
}

.modal-card-fullscreen {
  width: 96vw !important;
  max-width: 980px !important;
  height: 90vh !important;
  max-height: 860px !important;
  display: flex !important;
  flex-direction: column !important;
  padding: 0 !important;
  overflow: hidden !important;
  border-radius: 14px !important;
  box-shadow: 0 20px 40px -10px rgba(15, 23, 42, 0.22) !important;
  background: #ffffff !important;
}

/* Assessment Player */
.assessment-player-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 24px;
  background: var(--bg-surface, #ffffff);
  border-bottom: 1px solid var(--border-color, #e2e8f0);
  flex-shrink: 0;
  gap: 16px;
}

.player-info {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.player-info .player-title {
  margin: 0;
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--text-primary, #0f172a);
  line-height: 1.3;
}

.player-info .player-meta {
  font-size: 0.82rem;
  color: var(--text-secondary, #64748b);
  line-height: 1.4;
}

.player-header-right {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
}

.player-timer-box {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: #f8fafc;
  color: #1e293b;
  border: 1.5px solid #cbd5e1;
  padding: 6px 14px;
  border-radius: 9999px;
  font-family: var(--font-mono, monospace);
  font-weight: 700;
  font-size: 0.95rem;
  white-space: nowrap;
  transition: all 0.2s ease;
}

.player-timer-box svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  color: inherit;
}

.player-timer-box.timer-warning {
  background: #fffbeb;
  color: #b45309;
  border-color: #fde68a;
}

.player-timer-box.timer-danger {
  background: #fef2f2;
  color: #dc2626;
  border-color: #fecaca;
  animation: pulse 1.5s infinite;
}

.assessment-player-body {
  flex: 1;
  overflow-y: auto;
  padding: 20px 24px 28px 24px;
  background: var(--bg-canvas, #f8fafc);
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-height: 0;
}

.player-question-card {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  padding: 18px 20px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.03);
  display: flex;
  flex-direction: column;
}

.assessment-player-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 24px;
  background: var(--bg-surface, #ffffff);
  border-top: 1px solid var(--border-color, #e2e8f0);
  flex-shrink: 0;
}

/* Assessment Cards */
.assessments-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(360px, minmax(0, 1fr)));
  gap: 20px;
}

.assessment-card {
  background: var(--bg-surface, #ffffff);
  border: 1px solid var(--border-color, #e2e8f0);
  border-radius: 12px;
  padding: 20px;
  display: flex;
  flex-direction: column;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.05);
  transition: transform 0.2s, box-shadow 0.2s, border-color 0.2s;
}

.assessment-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px -4px rgba(15, 23, 42, 0.08);
  border-color: #cbd5e1;
}

.assessment-card-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}

.assessment-card-title {
  margin: 0;
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--text-primary, #0f172a);
}

.badge-batch {
  display: inline-block;
  background: #eff6ff;
  color: #1d4ed8;
  border: 1px solid #bfdbfe;
  padding: 2px 8px;
  border-radius: 6px;
  font-size: 0.75rem;
  font-weight: 600;
}

.assessment-card-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 14px;
  font-size: 0.82rem;
  color: var(--text-secondary, #64748b);
}

.assessment-card-meta span {
  display: flex;
  align-items: center;
  gap: 4px;
}

.assessment-card-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  margin-top: auto;
  padding-top: 10px;
  border-top: 1px solid var(--border-color, #f1f5f9);
}

/* Question Picker Box */
.section-label-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 6px;
}

.badge-count {
  background: #f1f5f9;
  color: var(--primary, #1d68ff);
  padding: 2px 8px;
  border-radius: 9999px;
  font-size: 0.75rem;
  font-weight: 700;
}

.question-picker-box {
  max-height: 260px;
  overflow-y: auto;
  border: 1px solid var(--border-color, #e2e8f0);
  border-radius: 8px;
  padding: 10px;
  background: var(--bg-surface, #ffffff);
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.picker-q-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 6px;
  border: 1px solid #f1f5f9;
  background: #f8fafc;
  cursor: pointer;
}

.picker-q-item:hover {
  background: #eff6ff;
  border-color: #bfdbfe;
}

.picker-q-item input[type="checkbox"] {
  margin-top: 3px;
  cursor: pointer;
}

.picker-q-details {
  flex: 1;
  font-size: 0.85rem;
  color: var(--text-primary, #0f172a);
}

.picker-q-meta {
  font-size: 0.75rem;
  color: var(--text-secondary, #64748b);
  margin-top: 3px;
  display: flex;
  gap: 8px;
}

/* Fee Management Stats & Tables */
.fee-stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, minmax(0, 1fr)));
  gap: 14px;
  margin-bottom: 16px;
}

.fee-stat-card {
  border-radius: 12px;
  padding: 18px 20px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  border: 1px solid var(--border-color, #e2e8f0);
}

.fee-stat-card.card-paid {
  background: #f0fdf4;
  border-color: #bbf7d0;
}

.fee-stat-card.card-paid .fee-stat-label {
  color: #166534;
}

.fee-stat-card.card-paid .fee-stat-value {
  color: #15803d;
}

.fee-stat-card.card-pending {
  background: #fef2f2;
  border-color: #fecaca;
}

.fee-stat-card.card-pending .fee-stat-label {
  color: #991b1b;
}

.fee-stat-card.card-pending .fee-stat-value {
  color: #b91c1c;
}

.fee-stat-label {
  font-size: 0.82rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.fee-stat-value {
  font-size: 1.6rem;
  font-weight: 700;
  font-family: var(--font-mono, monospace);
}

.status-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 3px 10px;
  border-radius: 9999px;
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  white-space: nowrap;
}

.status-badge.status-live,
.status-badge.live {
  background: #ecfdf5;
  color: #065f46;
  border: 1px solid #a7f3d0;
}

.status-badge.status-upcoming,
.status-badge.upcoming {
  background: #fffbeb;
  color: #92400e;
  border: 1px solid #fde68a;
}

.status-badge.status-expired,
.status-badge.expired {
  background: #fef2f2;
  color: #991b1b;
  border: 1px solid #fecaca;
}

.status-badge.status-paid,
.status-badge.paid {
  background: #dcfce7;
  color: #15803d;
  border: 1px solid #86efac;
}

.status-badge.status-pending,
.status-badge.pending {
  background: #fee2e2;
  color: #b91c1c;
  border: 1px solid #fca5a5;
}

/* Class Badge - strictly keep 'th', 'st', 'nd', 'rd' in lowercase */
.class-badge,
.status-badge.class-badge,
.badge-class,
.qb-badge-class {
  text-transform: none !important;
  font-family: inherit;
  white-space: nowrap !important;
}

/* Ensure Class & Batch cell never wraps onto multiple lines */
.cell-class-batch {
  white-space: nowrap !important;
}

.class-batch-wrap {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  flex-wrap: nowrap !important;
  white-space: nowrap !important;
}

/* Fee Action Toggle Buttons */
.btn-fee-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font-size: 0.8rem;
  font-weight: 600;
  padding: 5px 12px;
  border-radius: 7px;
  cursor: pointer;
  transition: all 0.2s ease;
  min-width: 135px;
  border: none;
  outline: none;
  white-space: nowrap;
}

/* Mark as Received Button (When status is Pending) */
.btn-fee-mark-received,
.btn-fee-pay {
  background: #16a34a;
  color: #ffffff !important;
  border: 1px solid #15803d;
  box-shadow: 0 1px 3px rgba(22, 163, 74, 0.2);
}

.btn-fee-mark-received:hover,
.btn-fee-pay:hover {
  background: #15803d;
  border-color: #166534;
  color: #ffffff !important;
  transform: translateY(-1px);
  box-shadow: 0 4px 8px rgba(22, 163, 74, 0.3);
}

.btn-fee-mark-received:active,
.btn-fee-pay:active {
  transform: translateY(0);
}

/* Mark as Pending Button (When status is Paid - can toggle back if clicked by mistake) */
.btn-fee-mark-pending,
.btn-fee-paid {
  background: #fffbeb;
  color: #b45309 !important;
  border: 1px solid #fcd34d;
  box-shadow: 0 1px 2px rgba(245, 158, 11, 0.1);
}

.btn-fee-mark-pending:hover,
.btn-fee-paid:hover {
  background: #fef3c7;
  border-color: #f59e0b;
  color: #92400e !important;
  transform: translateY(-1px);
  box-shadow: 0 3px 6px rgba(245, 158, 11, 0.2);
}

.btn-fee-mark-pending:active,
.btn-fee-paid:active {
  transform: translateY(0);
}

.status-badge.active {
  background: #eff6ff;
  color: #1d4ed8;
  border: 1px solid #93c5fd;
}

.fee-student-info-box {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  padding: 12px 14px;
  font-size: 0.88rem;
  color: var(--text-primary, #0f172a);
  display: flex;
  flex-direction: column;
  gap: 6px;
  justify-content: center;
}

.fee-student-info-box .fee-info-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.fee-student-info-box .fee-info-student-title {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.fee-student-info-box .fee-info-name {
  font-weight: 600;
  font-size: 0.92rem;
  color: #0f172a;
}

.fee-student-info-box .fee-info-meta {
  font-size: 0.78rem;
  color: #0369a1;
  background: #e0f2fe;
  padding: 2px 7px;
  border-radius: 4px;
  font-weight: 600;
}

.fee-student-info-box .fee-info-amount {
  font-weight: 700;
  font-size: 1.05rem;
  color: #0f766e;
  font-family: var(--font-mono, monospace);
  white-space: nowrap;
}

.fee-student-info-box .fee-info-sub {
  font-size: 0.82rem;
  color: #64748b;
  display: flex;
  align-items: center;
  gap: 6px;
}

.fee-student-info-box .fee-info-sub strong {
  color: #334155;
  font-weight: 600;
}

/* Permissions Checklist */
.permissions-checklist {
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-height: 340px;
  overflow-y: auto;
  padding: 4px;
}

.perm-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  padding: 10px 14px;
  cursor: pointer;
  transition: background 0.15s;
}

.perm-item:hover {
  background: #f1f5f9;
}

.perm-item input[type="checkbox"] {
  margin-top: 4px;
  width: 16px;
  height: 16px;
  cursor: pointer;
}

.perm-item strong {
  display: block;
  font-size: 0.9rem;
  color: var(--text-primary, #0f172a);
}

.perm-item span {
  display: block;
  font-size: 0.78rem;
  color: var(--text-secondary, #64748b);
  margin-top: 2px;
}

/* CSV Template Notice */
.csv-template-notice {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  background: #eff6ff;
  border: 1px solid #bfdbfe;
  border-radius: 10px;
  padding: 12px 16px;
  font-size: 0.85rem;
  color: #1e40af;
  margin-bottom: 12px;
}

.csv-template-notice p {
  margin: 4px 0 0 0;
  color: #1d4ed8;
  font-size: 0.8rem;
}

.bulk-status-box {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  padding: 10px 14px;
  font-size: 0.85rem;
  color: var(--text-primary, #0f172a);
}

/* Option Input Row */
.option-input-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
}

.option-input-row .option-tag {
  font-weight: 700;
  font-family: var(--font-mono, monospace);
  width: 24px;
  text-align: center;
  color: var(--text-secondary, #64748b);
}

.option-input-row input[type="text"] {
  flex: 1;
}

.option-correct-radio {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 0.78rem;
  color: var(--text-secondary, #64748b);
  cursor: pointer;
  white-space: nowrap;
}

/* ============================================================
   Comprehensive Mobile & Tablet Layout System (All Pages)
   ============================================================ */

@media (max-width: 768px) {

  /* Prevent horizontal window scroll across all pages */
  html,
  body {
    overflow-x: hidden !important;
    width: 100% !important;
    max-width: 100% !important;
    position: relative !important;
  }

  .app-container,
  .app-main-content {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: hidden !important;
    box-sizing: border-box !important;
  }

  /* Page Views & Containers */
  .page-view {
    padding: 12px 10px 32px 10px !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    overflow-x: hidden !important;
  }

  .page-view-container {
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
    gap: 12px !important;
    box-sizing: border-box !important;
  }

  /* Page Headers & Action Bars */
  .page-view-header {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    padding: 12px 14px !important;
    gap: 12px !important;
    border-radius: 12px !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
  }

  .page-view-header-info {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    width: 100% !important;
    min-width: 0 !important;
  }

  .page-view-icon {
    width: 32px !important;
    height: 32px !important;
    min-width: 32px !important;
    max-width: 32px !important;
    flex: 0 0 32px !important;
    border-radius: 8px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-sizing: border-box !important;
  }

  .page-view-icon svg {
    width: 16px !important;
    height: 16px !important;
    flex-shrink: 0 !important;
  }

  .page-view-header-info>div:not(.page-view-icon) {
    min-width: 0 !important;
    flex: 1 1 auto !important;
  }

  .page-view-title {
    font-size: 1.05rem !important;
    font-weight: 700 !important;
    margin: 0 !important;
    word-break: break-word !important;
    line-height: 1.25 !important;
  }

  .page-view-desc {
    font-size: 0.78rem !important;
    margin: 2px 0 0 0 !important;
    line-height: 1.35 !important;
    color: var(--text-secondary, #64748b) !important;
  }

  /* Header Actions - Wrap nicely without horizontal overflow */
  .page-view-actions {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: stretch !important;
    gap: 8px !important;
    width: 100% !important;
    max-width: 100% !important;
    justify-content: flex-start !important;
    box-sizing: border-box !important;
  }

  .page-view-actions .btn {
    flex: 1 1 calc(50% - 6px) !important;
    min-width: 0 !important;
    font-size: 0.8rem !important;
    padding: 8px 10px !important;
    height: auto !important;
    min-height: 36px !important;
    white-space: normal !important;
    text-align: center !important;
    justify-content: center !important;
    box-sizing: border-box !important;
  }

  .page-view-actions .btn svg {
    flex-shrink: 0 !important;
    width: 15px !important;
    height: 15px !important;
  }

  /* Filter Bars across All Pages */
  .qb-filter-bar {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 10px !important;
    padding: 12px 14px !important;
    border-radius: 12px !important;
    width: 100% !important;
    max-width: 100% !important;
    margin-bottom: 14px !important;
    box-sizing: border-box !important;
  }

  .qb-filter-bar[style*="display: none"],
  .qb-filter-bar.hidden {
    display: none !important;
  }

  .qb-filter-group {
    width: 100% !important;
    min-width: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 4px !important;
  }

  .qb-filter-group[style*="display: none"],
  .qb-filter-group.hidden {
    display: none !important;
  }

  .qb-filter-select,
  .qb-search-input,
  .qb-search-box {
    width: 100% !important;
    min-width: 0 !important;
    height: 38px !important;
    box-sizing: border-box !important;
    font-size: 0.85rem !important;
  }

  /* Page View Body & Cards Container */
  .page-view-body,
  .admin-users-section {
    padding: 12px !important;
    border-radius: 12px !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    overflow-x: hidden !important;
  }

  /* Assessment Grid & Cards on Mobile */
  .assessments-grid {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 14px !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  .assessment-card {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    padding: 16px 14px !important;
    border-radius: 12px !important;
    overflow: hidden !important;
  }

  /* Tables & Horizontal Scroll Wrappers */
  .table-responsive {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    box-sizing: border-box !important;
    margin: 0 !important;
    border-radius: 8px !important;
  }

  .table-responsive[style*="display: none"],
  .table-responsive[style*="display:none"] {
    display: none !important;
  }

  .users-table {
    width: 100% !important;
    min-width: 520px !important;
    font-size: 0.8rem !important;
  }

  .users-table th,
  .users-table td {
    padding: 8px 10px !important;
    white-space: nowrap !important;
  }

  /* Fee Summary Cards */
  .fee-stats-grid {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 10px !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  .fee-stat-card {
    padding: 14px 16px !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  /* Question Bank Session Cards */
  .qb-session-card {
    padding: 14px 12px !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  .qb-session-actions {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
    width: 100% !important;
  }

  .qb-session-actions .btn {
    flex: 1 1 calc(50% - 6px) !important;
    min-width: 120px !important;
    justify-content: center !important;
    box-sizing: border-box !important;
  }

  .qb-session-actions .btn-del-session {
    flex: 0 0 38px !important;
    min-width: 38px !important;
    width: 38px !important;
  }

  /* Modals on Mobile & Tablet */
  .modal-backdrop {
    padding: 10px 8px !important;
    align-items: center !important;
    justify-content: center !important;
    box-sizing: border-box !important;
  }

  .modal-card,
  .modal-card-lg,
  .modal-card-xl,
  .modal-card-fullscreen {
    width: 100% !important;
    max-width: 100% !important;
    max-height: 94vh !important;
    max-height: 94dvh !important;
    margin: 0 auto !important;
    border-radius: 12px !important;
    box-sizing: border-box !important;
    overflow-y: auto !important;
  }

  .modal-header {
    display: flex !important;
    align-items: center !important;
    padding: 12px 14px !important;
    gap: 10px !important;
    box-sizing: border-box !important;
  }

  .modal-header-icon {
    width: 32px !important;
    height: 32px !important;
    min-width: 32px !important;
    max-width: 32px !important;
    flex: 0 0 32px !important;
    border-radius: 8px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-sizing: border-box !important;
  }

  .modal-header-icon svg {
    width: 16px !important;
    height: 16px !important;
    flex-shrink: 0 !important;
  }

  .modal-header>div:not(.modal-header-icon) {
    min-width: 0 !important;
    flex: 1 1 auto !important;
  }

  .modal-close-btn {
    width: 30px !important;
    height: 30px !important;
    min-width: 30px !important;
    max-width: 30px !important;
    flex: 0 0 30px !important;
    padding: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 6px !important;
  }

  .modal-close-btn svg {
    width: 16px !important;
    height: 16px !important;
  }

  .modal-title {
    font-size: 1.05rem !important;
    margin: 0 !important;
    line-height: 1.25 !important;
  }

  .modal-subtitle {
    font-size: 0.76rem !important;
    margin: 2px 0 0 0 !important;
    line-height: 1.35 !important;
  }

  .modal-form {
    padding: 12px 14px !important;
    gap: 12px !important;
    box-sizing: border-box !important;
  }

  .modal-footer {
    padding: 12px 14px !important;
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
    box-sizing: border-box !important;
  }

  .modal-footer .btn {
    flex: 1 1 calc(50% - 6px) !important;
    min-width: 110px !important;
    justify-content: center !important;
    box-sizing: border-box !important;
  }

  .form-grid-2,
  .form-grid-3,
  .modal-form div[style*="grid-template-columns: minmax(0, 1fr) minmax(0, 1fr)"] {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 10px !important;
  }

  /* Assessment Card Action Button Responsive Handling */
  .assessment-card div[style*="grid-template-columns"] {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 8px !important;
  }

  .assessment-card .btn {
    font-size: 0.82rem !important;
    padding: 7px 10px !important;
    box-sizing: border-box !important;
  }

  .assessment-card div[style*="display:flex; gap:8px; margin-top:8px"] {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
  }

  .assessment-card .btn-card-test-history,
  .assessment-card .btn-card-test-result {
    flex: 1 1 calc(50% - 24px) !important;
    min-width: 105px !important;
    justify-content: center !important;
  }

  .assessment-card .btn-del-assessment {
    flex: 0 0 34px !important;
    width: 34px !important;
    height: 34px !important;
    padding: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
  }
}

@media (max-width: 480px) {

  /* Compact Smartphone Screens (iPhone SE, Galaxy S, etc.) */
  .page-view {
    padding: 8px 6px 28px 6px !important;
  }

  .page-view-header {
    padding: 10px 12px !important;
    gap: 10px !important;
  }

  .page-view-icon {
    width: 28px !important;
    height: 28px !important;
    min-width: 28px !important;
    max-width: 28px !important;
    flex: 0 0 28px !important;
    border-radius: 6px !important;
  }

  .page-view-icon svg {
    width: 14px !important;
    height: 14px !important;
  }

  .page-view-title {
    font-size: 0.98rem !important;
  }

  .modal-header-icon {
    width: 28px !important;
    height: 28px !important;
    min-width: 28px !important;
    max-width: 28px !important;
    flex: 0 0 28px !important;
    border-radius: 6px !important;
  }

  .modal-header-icon svg {
    width: 14px !important;
    height: 14px !important;
  }

  .modal-title {
    font-size: 0.98rem !important;
  }

  .page-view-actions {
    flex-direction: column !important;
    gap: 6px !important;
  }

  .page-view-actions .btn {
    flex: 1 1 100% !important;
    width: 100% !important;
    justify-content: center !important;
  }

  .assessment-card .btn-card-test-history,
  .assessment-card .btn-card-test-result {
    flex: 1 1 100% !important;
    width: 100% !important;
  }

  .assessment-card .btn-del-assessment {
    flex: 1 1 100% !important;
    width: 100% !important;
  }

  /* Modal Footer Buttons Stacked Full Width on Tiny Screens */
  .modal-footer .btn {
    flex: 1 1 100% !important;
    width: 100% !important;
  }

  /* Question Bank Actions on Tiny Screens */
  .qb-session-actions .btn:not(.btn-del-session) {
    flex: 1 1 100% !important;
    width: 100% !important;
  }
}

/* ============================================================
   Unified Consistent Alignment & Table Refinements
   ============================================================ */

.modal-filter-bar {
  margin: 0 0 16px 0 !important;
  padding: 12px 16px !important;
  background: #f8fafc !important;
  border-radius: 10px !important;
  border: 1px solid #e2e8f0 !important;
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 14px !important;
  align-items: flex-end !important;
}

.modal-filter-bar .qb-filter-group {
  display: flex !important;
  flex-direction: column !important;
  gap: 6px !important;
}

.modal-filter-bar .qb-filter-label {
  font-size: 0.72rem !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.05em !important;
  color: #64748b !important;
}

.modal-filter-bar .qb-filter-select {
  height: 38px !important;
  padding: 8px 12px !important;
  font-size: 0.84rem !important;
  border: 1px solid #cbd5e1 !important;
  border-radius: 8px !important;
  background-color: #ffffff !important;
  color: #1e293b !important;
  font-family: inherit !important;
  transition: border-color 0.15s ease, box-shadow 0.15s ease !important;
}

.modal-filter-bar .qb-filter-select:focus {
  border-color: var(--primary, #1d68ff) !important;
  box-shadow: 0 0 0 3px rgba(29, 104, 255, 0.15) !important;
  outline: none !important;
}

/* Consistent Table Typography & Alignment across All Pages */
.users-table th {
  padding: 12px 16px !important;
  font-size: 0.72rem !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.05em !important;
  color: #64748b !important;
  background: #f8fafc !important;
  border-bottom: 1.5px solid #e2e8f0 !important;
  vertical-align: middle !important;
}

.users-table td {
  padding: 13px 16px !important;
  vertical-align: middle !important;
  border-bottom: 1px solid #f1f5f9 !important;
  font-size: 0.84rem !important;
  color: #1e293b !important;
}

.users-table td .status-badge {
  vertical-align: middle !important;
}

/* Page View Layout Consistency */
.page-view-container {
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
  box-sizing: border-box !important;
}

/* ============================================================
   Add Question & Edit Question Modal: Complete Mobile Alignment
   ============================================================ */

/* Base Desktop Styles */
.option-input-row {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  box-sizing: border-box;
}

.option-input-row .option-marker {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-weight: 600;
  cursor: pointer;
  min-width: 44px;
  flex-shrink: 0;
}

.option-input-row .manual-opt-text,
.option-input-row .edit-opt-text {
  flex: 1;
  min-width: 0;
}

.question-modal-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
  padding: 14px 20px;
  background: #f8fafc;
  border-top: 1px solid var(--border-subtle, #e2e8f0);
  width: 100%;
  box-sizing: border-box;
}

.question-modal-footer .modal-footer-left {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.question-modal-footer .modal-footer-right {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-left: auto;
  flex-wrap: wrap;
}

/* Tablet & Mobile Viewports (<= 768px) */
@media (max-width: 768px) {

  #createQuestionModal,
  #editQuestionModal {
    padding: 8px 6px !important;
    align-items: center !important;
    justify-content: center !important;
  }

  #createQuestionModal .modal-card,
  #editQuestionModal .modal-card {
    width: 100% !important;
    max-width: calc(100vw - 12px) !important;
    max-height: 94vh !important;
    max-height: 94dvh !important;
    margin: 0 auto !important;
    border-radius: 14px !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.2), 0 8px 10px -6px rgba(0, 0, 0, 0.1) !important;
  }

  #createQuestionModal .modal-header,
  #editQuestionModal .modal-header {
    padding: 14px 16px !important;
    gap: 12px !important;
    display: flex !important;
    align-items: center !important;
    flex-shrink: 0 !important;
    background: #ffffff !important;
    border-bottom: 1px solid #e2e8f0 !important;
    box-sizing: border-box !important;
  }

  #createQuestionModal .modal-header-icon,
  #editQuestionModal .modal-header-icon {
    width: 34px !important;
    height: 34px !important;
    padding: 7px !important;
    flex-shrink: 0 !important;
    border-radius: 8px !important;
  }

  #createQuestionModal .modal-header>div:nth-child(2),
  #editQuestionModal .modal-header>div:nth-child(2) {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    padding-right: 6px !important;
  }

  #createQuestionModal .modal-title,
  #editQuestionModal .modal-title {
    font-size: 1.1rem !important;
    font-weight: 700 !important;
    margin: 0 !important;
    line-height: 1.25 !important;
    color: #0f172a !important;
  }

  #createQuestionModal .modal-subtitle,
  #editQuestionModal .modal-subtitle {
    font-size: 0.78rem !important;
    line-height: 1.3 !important;
    margin-top: 3px !important;
    color: #64748b !important;
  }

  #createQuestionModal .modal-close-btn,
  #editQuestionModal .modal-close-btn {
    flex-shrink: 0 !important;
    margin-left: auto !important;
    padding: 4px !important;
    width: 28px !important;
    height: 28px !important;
  }

  #createQuestionModal .modal-form,
  #editQuestionModal .modal-form {
    padding: 14px 16px !important;
    gap: 14px !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    flex: 1 1 auto !important;
    box-sizing: border-box !important;
  }

  /* Form Grids: Single column stack on mobile */
  #createQuestionModal .form-grid-3,
  #createQuestionModal .form-grid-2,
  #editQuestionModal .form-grid-3,
  #editQuestionModal .form-grid-2 {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 10px !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  #createQuestionModal .form-field-group,
  #editQuestionModal .form-field-group {
    width: 100% !important;
    box-sizing: border-box !important;
    margin: 0 !important;
  }

  #createQuestionModal .form-label,
  #editQuestionModal .form-label {
    font-size: 0.85rem !important;
    font-weight: 600 !important;
    margin-bottom: 5px !important;
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 4px !important;
    color: #334155 !important;
  }

  #createQuestionModal .form-label .opt-label,
  #editQuestionModal .form-label .opt-label {
    font-size: 0.74rem !important;
    font-weight: 400 !important;
    color: #64748b !important;
  }

  #createQuestionModal .form-input,
  #editQuestionModal .form-input {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    font-size: 0.88rem !important;
    padding: 8px 12px !important;
    border-radius: 8px !important;
    height: 38px !important;
    border: 1px solid #cbd5e1 !important;
  }

  #createQuestionModal textarea.form-input,
  #editQuestionModal textarea.form-input {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    font-size: 0.88rem !important;
    padding: 10px 12px !important;
    resize: vertical !important;
    min-height: 72px !important;
    height: auto !important;
    line-height: 1.4 !important;
  }

  /* Question Image Upload Container */
  #createQuestionModal .form-field-group>div[style*="display:flex; align-items:center; gap:10px"],
  #editQuestionModal .form-field-group>div[style*="display:flex; align-items:center; gap:10px"] {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
    align-items: center !important;
    width: 100% !important;
    margin-top: 2px !important;
    box-sizing: border-box !important;
  }

  #createQuestionModal .form-field-group label.btn-secondary,
  #editQuestionModal .form-field-group label.btn-secondary {
    font-size: 0.82rem !important;
    padding: 7px 12px !important;
    height: 36px !important;
    box-sizing: border-box !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    flex: 0 0 auto !important;
    max-width: 100% !important;
    border-radius: 8px !important;
    cursor: pointer !important;
  }

  #manualQImagePreviewBox,
  #editQImagePreviewBox {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    padding: 3px 8px 3px 5px !important;
    background: #ffffff !important;
    border-radius: 8px !important;
    border: 1px solid #cbd5e1 !important;
    min-height: 36px !important;
    height: auto !important;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.06) !important;
  }

  #manualQImagePreviewBox[style*="display: none"],
  #manualQImagePreviewBox[style*="display:none"],
  #editQImagePreviewBox[style*="display: none"],
  #editQImagePreviewBox[style*="display:none"] {
    display: none !important;
  }

  #manualQImagePreview,
  #editQImagePreview {
    height: 28px !important;
    max-width: 55px !important;
    object-fit: contain !important;
    border-radius: 4px !important;
    background: #fff !important;
    border: 1px solid #e2e8f0 !important;
  }

  /* Dynamic Area & Options List (Matching Desktop Clean Row Layout) */
  .manual-q-dynamic-area {
    width: 100% !important;
    box-sizing: border-box !important;
  }

  .manual-q-dynamic-area>div[style*="justify-content:space-between"] {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    gap: 4px !important;
    margin-bottom: 8px !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  /* Single horizontal row layout matching Desktop */
  .option-input-row {
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    width: 100% !important;
    box-sizing: border-box !important;
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    padding: 0 !important;
    margin-bottom: 2px !important;
  }

  .option-input-row .option-marker {
    display: inline-flex !important;
    align-items: center !important;
    gap: 4px !important;
    font-weight: 600 !important;
    font-size: 0.88rem !important;
    cursor: pointer !important;
    min-width: 36px !important;
    flex-shrink: 0 !important;
    color: #0f172a !important;
  }

  .option-input-row .option-marker input[type="radio"],
  .option-input-row .option-marker input[type="checkbox"] {
    width: 16px !important;
    height: 16px !important;
    margin: 0 !important;
    cursor: pointer !important;
    accent-color: #1d68ff !important;
  }

  .option-input-row .manual-opt-text,
  .option-input-row .edit-opt-text {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    width: auto !important;
    font-size: 0.85rem !important;
    padding: 7px 10px !important;
    height: 36px !important;
    border-radius: 8px !important;
    border: 1px solid #cbd5e1 !important;
    box-sizing: border-box !important;
  }

  .option-input-row label.btn {
    font-size: 0.78rem !important;
    padding: 6px 9px !important;
    height: 36px !important;
    margin: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 4px !important;
    flex-shrink: 0 !important;
    box-sizing: border-box !important;
    border-radius: 8px !important;
    white-space: nowrap !important;
  }

  /* Option Image Preview Box: completely hidden unless image is uploaded */
  .option-input-row .opt-img-preview-box {
    align-items: center !important;
    gap: 4px !important;
    background: #f1f5f9 !important;
    padding: 2px 6px !important;
    border-radius: 6px !important;
    border: 1px solid #cbd5e1 !important;
    flex-shrink: 0 !important;
    height: 36px !important;
    box-sizing: border-box !important;
  }

  .option-input-row .opt-img-preview-box[style*="display: none"],
  .option-input-row .opt-img-preview-box[style*="display:none"] {
    display: none !important;
  }

  .option-input-row .opt-img-preview {
    height: 26px !important;
    max-width: 40px !important;
    object-fit: contain !important;
    border-radius: 2px !important;
    background: #fff !important;
    border: 1px solid #e2e8f0 !important;
  }

  .option-input-row .btn-remove-manual-option,
  .option-input-row .btn-remove-edit-option-row {
    padding: 0 10px !important;
    font-size: 0.85rem !important;
    height: 36px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 8px !important;
    color: #ef4444 !important;
    background: #fee2e2 !important;
    border: 1px solid #fecaca !important;
    flex-shrink: 0 !important;
    box-sizing: border-box !important;
    cursor: pointer !important;
    margin-left: 0 !important;
  }

  /* Add Option button matches Desktop: clean small button on left */
  #btnAddManualOption,
  #btnAddEditOption {
    display: inline-flex !important;
    width: auto !important;
    align-items: center !important;
    gap: 6px !important;
    padding: 7px 14px !important;
    font-size: 0.82rem !important;
    font-weight: 500 !important;
    border-radius: 6px !important;
    box-sizing: border-box !important;
    margin-top: 4px !important;
  }

  /* True / False container */
  .manual-q-dynamic-area div[style*="padding:12px; background:#f8fafc"] {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 16px !important;
    padding: 10px 14px !important;
    width: 100% !important;
    box-sizing: border-box !important;
    border-radius: 8px !important;
  }

  /* Question Modal Footer Mobile */
  .question-modal-footer {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    flex-wrap: wrap !important;
    gap: 10px !important;
    padding: 12px 16px !important;
    background: #f8fafc !important;
    border-top: 1px solid #e2e8f0 !important;
    width: 100% !important;
    box-sizing: border-box !important;
    flex-shrink: 0 !important;
  }

  .question-modal-footer .modal-footer-left {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    flex: 0 0 auto !important;
  }

  .question-modal-footer .modal-footer-right {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    margin-left: auto !important;
    flex-wrap: wrap !important;
  }

  .question-modal-footer .btn {
    font-size: 0.82rem !important;
    padding: 8px 12px !important;
    height: 36px !important;
    border-radius: 8px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    white-space: nowrap !important;
    box-sizing: border-box !important;
  }

  #btnCancelCreateQuestion,
  #btnCancelEditQuestion {
    min-width: 72px !important;
  }

  #tempQuestionsBadge {
    font-size: 0.76rem !important;
    padding: 6px 10px !important;
    white-space: nowrap !important;
    box-sizing: border-box !important;
  }
}

/* Compact Smartphones (<= 420px) */
@media (max-width: 420px) {
  .question-modal-footer {
    padding: 10px 12px !important;
    gap: 8px !important;
  }

  .question-modal-footer .modal-footer-right {
    width: 100% !important;
    justify-content: flex-end !important;
    gap: 6px !important;
  }

  .question-modal-footer .modal-footer-right .btn {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    font-size: 0.8rem !important;
    padding: 8px 6px !important;
  }
}

/* ============================================================
   RBAC Manager Permissions Styles
   ============================================================ */

.rbac-access-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 18px;
  background: var(--bg-subtle, #f8fafc);
  border: 1px solid var(--border-color, #e2e8f0);
  border-radius: 12px;
  margin-bottom: 14px;
  transition: all 180ms ease;
}

.rbac-access-card.is-disabled {
  background: #fef2f2;
  border-color: #fecaca;
}

.rbac-access-title {
  font-weight: 700;
  font-size: 0.92rem;
  color: var(--text-primary, #0f172a);
}

.rbac-access-desc {
  font-size: 0.76rem;
  color: var(--text-muted, #64748b);
  margin-top: 2px;
}

/* Switch Toggle */
.rbac-switch {
  position: relative;
  display: inline-block;
  width: 48px;
  height: 26px;
  flex-shrink: 0;
}

.rbac-switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

.rbac-slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #cbd5e1;
  transition: 0.25s;
  border-radius: 26px;
}

.rbac-slider:before {
  position: absolute;
  content: "";
  height: 20px;
  width: 20px;
  left: 3px;
  bottom: 3px;
  background-color: white;
  transition: 0.25s;
  border-radius: 50%;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}

.rbac-switch input:checked+.rbac-slider {
  background-color: #10b981;
}

.rbac-switch input:checked+.rbac-slider:before {
  transform: translateX(22px);
}

.rbac-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--border-color, #e2e8f0);
}

.rbac-toolbar-label {
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--text-secondary, #475569);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.rbac-toolbar-actions {
  display: flex;
  gap: 6px;
}

.rbac-modules-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  max-height: 52vh;
  overflow-y: auto;
  padding-right: 4px;
}

@media (max-width: 640px) {
  .rbac-modules-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

.rbac-module-box {
  background: var(--bg-surface, #ffffff);
  border: 1px solid var(--border-color, #e2e8f0);
  border-radius: 10px;
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.rbac-module-header {
  padding-bottom: 6px;
  border-bottom: 1px solid var(--border-color, #f1f5f9);
}

.rbac-features-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.rbac-checkbox-label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.82rem;
  color: var(--text-primary, #1e293b);
  cursor: pointer;
  user-select: none;
}

.rbac-checkbox-label input[type="checkbox"] {
  width: 15px;
  height: 15px;
  border-radius: 4px;
  accent-color: #7c3aed;
  cursor: pointer;
}

.rbac-checkbox-label.rbac-subfeature {
  padding-left: 20px;
  font-size: 0.76rem;
  color: var(--text-secondary, #64748b);
}

.rbac-status-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 0.7rem;
  font-weight: 600;
  padding: 2px 7px;
  border-radius: 12px;
  margin-top: 4px;
}

.rbac-status-badge.active {
  background: #ecfdf5;
  color: #059669;
  border: 1px solid #a7f3d0;
}

.rbac-status-badge.disabled {
  background: #fef2f2;
  color: #dc2626;
  border: 1px solid #fecaca;
}

/* ============================================================
   Global Multi-Device Responsive System (Desktop, Tablet, Mobile)
   Guarantees all UI features and elements remain identical and
   properly aligned across all screen resolutions.
   ============================================================ */

/* Tablet & Medium Screen Layout (769px to 1024px) */
@media (min-width: 769px) and (max-width: 1024px) {
  .qb-filter-bar {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 12px;
    padding: 14px 18px;
    margin-bottom: 18px;
    width: 100%;
    box-sizing: border-box;
  }

  .qb-filter-group {
    flex: 1 1 calc(50% - 8px);
    min-width: 140px;
  }

  .qb-search-group {
    flex: 1 1 100%;
    min-width: 180px;
  }

  .assessments-grid {
    grid-template-columns: repeat(auto-fill, minmax(280px, minmax(0, 1fr)));
    gap: 16px;
  }
}

/* Desktop Wide Screen Layout (1025px and up) */
@media (min-width: 1025px) {
  .qb-filter-bar {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 14px;
    padding: 16px 20px;
    margin-bottom: 20px;
    width: 100%;
    box-sizing: border-box;
  }

  .qb-filter-group {
    flex: 0 1 160px;
    min-width: 140px;
  }

  .qb-search-group {
    flex: 1 1 240px;
    min-width: 200px;
  }

  .assessments-grid {
    grid-template-columns: repeat(auto-fill, minmax(320px, minmax(0, 1fr)));
    gap: 20px;
  }
}

/* Student Login -> Assessments page: Remove Class, Batch, and Search filters completely */
html.role-student #assessFilterBar,
html.role-student #assessClassFilterGroup,
html.role-student #assessBatchFilterGroup,
html.role-student #assessSearchGroup,
body.role-student #assessFilterBar,
body.role-student #assessClassFilterGroup,
body.role-student #assessBatchFilterGroup,
body.role-student #assessSearchGroup {
  display: none !important;
  visibility: hidden !important;
  height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  overflow: hidden !important;
  pointer-events: none !important;
}

/* Student Login -> Strictly remove Face Attendance menu from sidebar */
html.role-student #tabNavFAttendance,
html.role-student #sidebarNavFaceAttendance,
body.role-student #tabNavFAttendance,
body.role-student #sidebarNavFaceAttendance {
  display: none !important;
  visibility: hidden !important;
  height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  overflow: hidden !important;
  pointer-events: none !important;
}

/* ============================================================
   Question & Option Image Preview Badges & Modern Remove Buttons
   ============================================================ */

.q-image-preview-badge,
#manualQImagePreviewBox,
#editQImagePreviewBox {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  padding: 4px 10px 4px 6px;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.05), 0 1px 2px -1px rgba(15, 23, 42, 0.03);
  max-width: 100%;
  box-sizing: border-box;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  vertical-align: middle;
}

.q-image-preview-badge:hover,
#manualQImagePreviewBox:hover,
#editQImagePreviewBox:hover {
  border-color: #cbd5e1;
  box-shadow: 0 2px 6px rgba(15, 23, 42, 0.08);
}

.q-image-preview-thumb-wrap {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #f8fafc;
  border: 1px solid #cbd5e1;
  border-radius: 5px;
  padding: 2px;
  height: 32px;
  min-width: 32px;
  max-width: 65px;
  overflow: hidden;
  box-sizing: border-box;
}

.q-image-preview-thumb,
#manualQImagePreview,
#editQImagePreview {
  height: 28px;
  max-width: 58px;
  object-fit: contain;
  display: block;
  border-radius: 3px;
  background: #ffffff;
}

/* Modern Clean Remove Button for Question Image */
.btn-remove-preview-img,
#btnRemoveQImage,
#btnRemoveEditQImage {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  background: #fef2f2;
  color: #dc2626;
  border: 1px solid #fecaca;
  border-radius: 6px;
  padding: 5px 11px;
  font-family: var(--font-body);
  font-size: 0.8rem;
  font-weight: 600;
  cursor: pointer;
  line-height: 1;
  white-space: nowrap;
  transition: all 0.18s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: 0 1px 2px rgba(220, 38, 38, 0.05);
  user-select: none;
  height: 28px;
  box-sizing: border-box;
}

.btn-remove-preview-img svg,
#btnRemoveQImage svg,
#btnRemoveEditQImage svg {
  width: 13px;
  height: 13px;
  stroke: currentColor;
  stroke-width: 2.3;
  flex-shrink: 0;
  transition: transform 0.2s ease;
  pointer-events: none;
}

.btn-remove-preview-img span,
#btnRemoveQImage span,
#btnRemoveEditQImage span {
  pointer-events: none;
}

.btn-remove-preview-img:hover,
#btnRemoveQImage:hover,
#btnRemoveEditQImage:hover {
  background: #dc2626;
  color: #ffffff;
  border-color: #dc2626;
  box-shadow: 0 2px 8px rgba(220, 38, 38, 0.28);
  transform: translateY(-1px);
}

.btn-remove-preview-img:hover svg,
#btnRemoveQImage:hover svg,
#btnRemoveEditQImage:hover svg {
  transform: scale(1.15);
}

.btn-remove-preview-img:active,
#btnRemoveQImage:active,
#btnRemoveEditQImage:active {
  background: #b91c1c;
  border-color: #b91c1c;
  transform: translateY(0);
  box-shadow: none;
}

.btn-remove-preview-img:focus-visible,
#btnRemoveQImage:focus-visible,
#btnRemoveEditQImage:focus-visible {
  outline: 2px solid #ef4444;
  outline-offset: 2px;
}

/* Option Image Previews and Remove Buttons */
.opt-img-preview-box {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: #ffffff;
  padding: 2px 6px 2px 3px;
  border-radius: 6px;
  border: 1px solid #e2e8f0;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
  flex-shrink: 0;
  height: 32px;
  box-sizing: border-box;
}

.opt-img-preview {
  height: 26px;
  max-width: 44px;
  object-fit: contain;
  border-radius: 4px;
  background: #f8fafc;
  border: 1px solid #cbd5e1;
}

.btn-remove-opt-img,
.btn-remove-edit-opt-img {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 4px;
  background: #fef2f2;
  border: 1px solid #fecaca;
  color: #dc2626;
  cursor: pointer;
  padding: 0;
  transition: all 0.15s ease;
  flex-shrink: 0;
}

.btn-remove-opt-img:hover,
.btn-remove-edit-opt-img:hover {
  background: #dc2626;
  color: #ffffff;
  border-color: #dc2626;
  transform: scale(1.05);
}

.btn-remove-manual-option,
.btn-remove-edit-option-row {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 6px;
  background: #fef2f2;
  border: 1px solid #fecaca;
  color: #dc2626;
  cursor: pointer;
  padding: 0;
  flex-shrink: 0;
  transition: all 0.18s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: 0 1px 2px rgba(220, 38, 38, 0.05);
}

.btn-remove-manual-option:hover,
.btn-remove-edit-option-row:hover {
  background: #dc2626;
  color: #ffffff;
  border-color: #dc2626;
  box-shadow: 0 2px 6px rgba(220, 38, 38, 0.25);
  transform: translateY(-1px);
}

.btn-remove-manual-option:active,
.btn-remove-edit-option-row:active {
  background: #b91c1c;
  transform: translateY(0);
}

/* ============================================================
   Attendance Module Styling
   ============================================================ */

.attend-notice-banner {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 18px;
  border-radius: 10px;
  font-size: 0.88rem;
  font-weight: 500;
  margin-bottom: 16px;
  border: 1px solid transparent;
  transition: all 0.2s ease;
}

.attend-notice-banner svg {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}

.attend-notice-banner.notice-info {
  background: #eff6ff;
  border-color: #bfdbfe;
  color: #1e40af;
}

.attend-notice-banner.notice-warning {
  background: #fffbeb;
  border-color: #fde68a;
  color: #92400e;
}

.attend-notice-banner.notice-locked {
  background: #fef2f2;
  border-color: #fecaca;
  color: #991b1b;
}

.attend-stats-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  margin-bottom: 18px;
}

.attend-stat-card {
  border-radius: 12px;
  padding: 16px 20px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  border: 1px solid var(--border-color, #e2e8f0);
  background: var(--bg-card, #ffffff);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.attend-stat-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

.attend-stat-card.card-total {
  background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
  border-color: #cbd5e1;
}

.attend-stat-card.card-total .attend-stat-label {
  color: #475569;
}

.attend-stat-card.card-total .attend-stat-value {
  color: #0f172a;
}

.attend-stat-card.card-present {
  background: linear-gradient(135deg, #f0fdf4 0%, #dcfce7 100%);
  border-color: #86efac;
}

.attend-stat-card.card-present .attend-stat-label {
  color: #166534;
}

.attend-stat-card.card-present .attend-stat-value {
  color: #15803d;
}

.attend-stat-card.card-absent {
  background: linear-gradient(135deg, #fef2f2 0%, #fee2e2 100%);
  border-color: #fca5a5;
}

.attend-stat-card.card-absent .attend-stat-label {
  color: #991b1b;
}

.attend-stat-card.card-absent .attend-stat-value {
  color: #b91c1c;
}

.attend-stat-card.card-rate {
  background: linear-gradient(135deg, #eef2ff 0%, #e0e7ff 100%);
  border-color: #a5b4fc;
}

.attend-stat-card.card-rate .attend-stat-label {
  color: #3730a3;
}

.attend-stat-card.card-rate .attend-stat-value {
  color: #4338ca;
}

.attend-stat-label {
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.attend-stat-value {
  font-size: 1.7rem;
  font-weight: 800;
  font-family: var(--font-mono, monospace);
  line-height: 1.2;
}

.attend-assigned-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: #f1f5f9;
  border: 1px solid #cbd5e1;
  color: #334155;
  padding: 6px 14px;
  border-radius: 8px;
  font-weight: 600;
  font-size: 0.88rem;
}

.attend-assigned-badge svg {
  width: 15px;
  height: 15px;
  color: #64748b;
}

/* Present / Absent Segmented Toggle */
.attend-toggle-group {
  display: inline-flex;
  align-items: center;
  background: #f1f5f9;
  padding: 3px;
  border-radius: 9999px;
  gap: 3px;
  border: 1px solid #e2e8f0;
}

.attend-toggle-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 5px 14px;
  border-radius: 9999px;
  font-size: 0.8rem;
  font-weight: 700;
  cursor: pointer;
  border: 1px solid transparent;
  background: transparent;
  color: #64748b;
  transition: all 0.18s cubic-bezier(0.16, 1, 0.3, 1);
  user-select: none;
}

.attend-toggle-btn:hover:not(:disabled) {
  color: #0f172a;
  background: rgba(255, 255, 255, 0.6);
}

.attend-toggle-btn.btn-present.is-active {
  background: #16a34a;
  color: #ffffff;
  border-color: #15803d;
  box-shadow: 0 2px 6px rgba(22, 163, 74, 0.35);
}

.attend-toggle-btn.btn-absent.is-active {
  background: #dc2626;
  color: #ffffff;
  border-color: #b91c1c;
  box-shadow: 0 2px 6px rgba(220, 38, 38, 0.35);
}

.attend-toggle-btn:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

/* Single Attendance Toggle Button (Present ↔ Absent) */
.attend-status-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-width: 105px;
  padding: 7px 16px;
  border-radius: 9999px;
  font-size: 0.84rem;
  font-weight: 700;
  cursor: pointer;
  border: 1px solid transparent;
  transition: all 0.18s cubic-bezier(0.16, 1, 0.3, 1);
  user-select: none;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}

.attend-status-btn svg {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
}

.attend-status-btn.is-present {
  background: #16a34a;
  border-color: #15803d;
  color: #ffffff;
  box-shadow: 0 2px 6px rgba(22, 163, 74, 0.35);
}

.attend-status-btn.is-present:hover:not(:disabled) {
  background: #15803d;
  transform: translateY(-1px);
  box-shadow: 0 4px 10px rgba(22, 163, 74, 0.45);
}

.attend-status-btn.is-absent {
  background: #dc2626;
  border-color: #b91c1c;
  color: #ffffff;
  box-shadow: 0 2px 6px rgba(220, 38, 38, 0.35);
}

.attend-status-btn.is-absent:hover:not(:disabled) {
  background: #b91c1c;
  transform: translateY(-1px);
  box-shadow: 0 4px 10px rgba(220, 38, 38, 0.45);
}

.attend-status-btn:active:not(:disabled) {
  transform: translateY(0);
}

.attend-status-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  transform: none !important;
  box-shadow: none !important;
}

/* Read-only Attendance Status Pill for Admin View */
.attend-status-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-width: 95px;
  padding: 5px 14px;
  border-radius: 9999px;
  font-size: 0.82rem;
  font-weight: 700;
  user-select: none;
}

.attend-status-pill.is-present {
  background: rgba(16, 185, 129, 0.12);
  color: #059669;
  border: 1px solid rgba(16, 185, 129, 0.3);
}

.attend-status-pill.is-absent {
  background: rgba(239, 68, 68, 0.12);
  color: #dc2626;
  border: 1px solid rgba(239, 68, 68, 0.3);
}

.attend-status-pill svg {
  width: 13px;
  height: 13px;
  flex-shrink: 0;
}

.attend-batch-tag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 10px;
  background: var(--bg-hover, #f1f5f9);
  color: var(--text-primary, #334155);
  border: 1px solid var(--border-color, #e2e8f0);
  border-radius: 9999px;
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.01em;
}

.attend-remarks-input {
  width: 100%;
  max-width: 220px;
  padding: 6px 10px;
  border-radius: 6px;
  border: 1px solid var(--border-color, #cbd5e1);
  font-size: 0.82rem;
  background: #ffffff;
  color: var(--text-primary, #0f172a);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.attend-remarks-input:focus {
  border-color: var(--brand-primary, #2563eb);
  outline: none;
  box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.15);
}

.attend-student-name {
  font-weight: 600;
  color: var(--text-primary, #0f172a);
  font-size: 0.92rem;
}

.attend-student-meta {
  font-size: 0.76rem;
  color: var(--text-secondary, #64748b);
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 2px;
}

.attend-save-bar {
  position: relative;
  background: #ffffff;
  border-top: 1px solid var(--border-color, #e2e8f0);
  padding: 14px 20px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  margin-top: 16px;
  border-radius: 0 0 12px 12px;
}

.attend-view-tabs {
  display: inline-flex;
  background: #f1f5f9;
  padding: 3px;
  border-radius: 8px;
  gap: 2px;
}

.attend-view-tab {
  padding: 6px 14px;
  font-size: 0.82rem;
  font-weight: 600;
  border-radius: 6px;
  border: none;
  background: transparent;
  color: #64748b;
  cursor: pointer;
  transition: all 0.15s ease;
}

.attend-view-tab.active {
  background: #ffffff;
  color: #0f172a;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}

/* Modern Aligned Attendance Toolbar */
.attend-toolbar-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  background: var(--bg-card, #ffffff);
  border: 1px solid var(--border-color, #e2e8f0);
  border-radius: 12px;
  padding: 12px 18px;
  margin-bottom: 16px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.03);
}

.attend-toolbar-left {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.attend-toolbar-right {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-left: auto;
  flex-wrap: wrap;
}

.attend-info-pill {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  color: var(--text-primary, #1e293b);
  padding: 6px 14px;
  border-radius: 8px;
  font-size: 0.86rem;
  font-weight: 600;
  user-select: none;
}

.attend-date-pill {
  background: #eff6ff;
  border-color: #bfdbfe;
  color: #1e40af;
}

.attend-class-pill {
  background: #f0fdf4;
  border-color: #bbf7d0;
  color: #166534;
}

/* Batch Pill Buttons */
.attend-batch-pills-wrap {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: #f8fafc;
  padding: 3px 6px 3px 12px;
  border-radius: 9999px;
  border: 1px solid #e2e8f0;
}

.attend-pills-label {
  font-size: 0.76rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-muted, #64748b);
}

.attend-batch-pills {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.attend-pill-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 5px 14px;
  border-radius: 9999px;
  border: 1px solid #cbd5e1;
  background: #ffffff;
  color: var(--text-secondary, #475569);
  font-size: 0.82rem;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.16s ease;
  user-select: none;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}

.attend-pill-btn:hover {
  border-color: #94a3b8;
  color: var(--text-primary, #0f172a);
  background: #f1f5f9;
  transform: translateY(-1px);
}

.attend-pill-btn.active {
  background: var(--brand-primary, #2563eb);
  border-color: var(--brand-primary, #2563eb);
  color: #ffffff;
  box-shadow: 0 2px 6px rgba(37, 99, 235, 0.35);
}

/* Search Box */
.attend-search-box {
  position: relative;
  display: inline-flex;
  align-items: center;
  min-width: 190px;
}

.attend-search-icon {
  position: absolute;
  left: 10px;
  width: 15px;
  height: 15px;
  color: #94a3b8;
  pointer-events: none;
}

.attend-search-input {
  padding: 6px 12px 6px 32px !important;
  font-size: 0.86rem;
  border-radius: 8px;
  height: 36px;
  border: 1px solid var(--border-color, #cbd5e1);
  background: #ffffff;
  width: 100%;
}

.attend-search-input:focus {
  border-color: var(--brand-primary, #2563eb);
  outline: none;
  box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.15);
}

/* Bulk Buttons */
.attend-bulk-actions {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.attend-bulk-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-weight: 700;
  font-size: 0.8rem;
  padding: 6px 12px;
  border-radius: 8px;
  height: 36px;
  cursor: pointer;
  transition: all 0.15s ease;
}

.btn-bulk-present {
  color: #166534;
  border: 1px solid #86efac;
  background: #f0fdf4;
}

.btn-bulk-present:hover {
  background: #dcfce7;
  border-color: #4ade80;
}

.btn-bulk-absent {
  color: #991b1b;
  border: 1px solid #fca5a5;
  background: #fef2f2;
}

.btn-bulk-absent:hover {
  background: #fee2e2;
  border-color: #f87171;
}

/* Attendance History Toolbar Filter Alignment */
.attend-toolbar-filter-item {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  height: 38px;
  margin: 0 4px;
}

.attend-toolbar-filter-label {
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-secondary, #475569);
  white-space: nowrap;
  line-height: 1;
  margin: 0;
  user-select: none;
}

.attend-month-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.82rem;
  font-weight: 700;
  background: #eff6ff;
  color: #1d4ed8;
  border: 1px solid #bfdbfe;
  padding: 4px 12px;
  border-radius: 9999px;
  letter-spacing: 0.02em;
  transition: all 0.2s ease;
}

[data-theme="dark"] .attend-month-badge {
  background: rgba(37, 99, 235, 0.18);
  color: #93c5fd;
  border-color: rgba(147, 197, 253, 0.3);
}

.attend-history-month-input {
  height: 38px !important;
  padding: 0 12px !important;
  font-weight: 600 !important;
  font-size: 0.88rem !important;
  color: var(--text-primary, #0f172a) !important;
  background: #ffffff !important;
  border: 1px solid var(--border-color, #cbd5e1) !important;
  border-radius: 8px !important;
  width: 175px !important;
  box-sizing: border-box !important;
  line-height: 36px !important;
}

.attend-history-month-input:focus {
  border-color: var(--brand-primary, #2563eb) !important;
  outline: none !important;
  box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.15) !important;
}

.attend-history-class-select {
  height: 38px !important;
  padding: 0 12px !important;
  font-weight: 600 !important;
  font-size: 0.88rem !important;
  color: var(--text-primary, #0f172a) !important;
  background: #ffffff !important;
  border: 1px solid var(--border-color, #cbd5e1) !important;
  border-radius: 8px !important;
  min-width: 130px !important;
  box-sizing: border-box !important;
}

.attend-history-class-select:focus {
  border-color: var(--brand-primary, #2563eb) !important;
  outline: none !important;
  box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.15) !important;
}

/* Attendance History Table Layout & Alignment */
#attendHistoryContainer {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

#attendHistoryContainer .users-table {
  min-width: 760px;
  width: 100%;
}

#attendHistoryContainer .users-table th,
#attendHistoryContainer .users-table td {
  white-space: nowrap !important;
  vertical-align: middle !important;
}

#attendHistoryContainer .users-table th:nth-child(2),
#attendHistoryContainer .users-table td:nth-child(2) {
  text-align: left !important;
  white-space: nowrap !important;
}

@media (max-width: 768px) {
  .attend-stats-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .attend-toolbar-card {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
  }

  .attend-toolbar-left,
  .attend-toolbar-right {
    margin-left: 0;
    width: 100%;
    justify-content: flex-start;
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
  }

  .attend-toolbar-filter-item {
    width: 100%;
    margin: 0;
    justify-content: space-between;
  }

  .attend-history-month-input,
  .attend-history-class-select {
    flex: 1;
    width: auto !important;
    max-width: none !important;
  }

  .attend-search-box {
    width: 100%;
  }

  .attend-save-bar {
    flex-direction: column;
    gap: 10px;
    align-items: stretch;
  }

  #attendHistoryContainer {
    width: 100% !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }

  #attendHistoryContainer .users-table {
    min-width: 700px !important;
  }
}

/* ==========================================================================
   UX, Space Utilization & Mobile Responsiveness Optimizations (All Pages)
   ========================================================================== */

/* 1. Reclaim Empty Topbar Space on Desktop (>= 1025px) */
@media (min-width: 1025px) {
  .main-topbar {
    display: none !important;
  }

  .app-layout {
    height: calc(100vh - 38px) !important;
    padding-top: 12px !important;
    padding-bottom: 12px !important;
  }

  .page-view {
    padding: 14px 24px 24px !important;
  }
}

/* 2. Optimize Page View Containers, Headers & Vertical Spacing */
.page-view-container {
  gap: 12px !important;
}

.page-view-header {
  margin-bottom: 12px !important;
  padding-bottom: 10px !important;
}

.page-view-actions:empty,
.header-actions:empty {
  display: none !important;
}

/* Compact Summary Stat Cards (Fee Management & Attendance) */
.fee-stats-grid {
  margin-bottom: 12px !important;
  gap: 12px !important;
}

.fee-stat-card {
  padding: 12px 16px !important;
}

.fee-stat-value {
  font-size: 1.35rem !important;
}

.attend-stats-grid {
  margin-bottom: 12px !important;
  gap: 12px !important;
}

.attend-stat-card {
  padding: 12px 16px !important;
}

.attend-stat-value {
  font-size: 1.4rem !important;
}

/* Compact Filter Bar & Table Section Spacing */
.qb-filter-bar {
  padding: 10px 14px !important;
  margin-bottom: 12px !important;
  gap: 10px !important;
}

.admin-users-section-header {
  padding: 12px 16px !important;
}

.users-table th {
  padding: 10px 14px !important;
}

.users-table td {
  padding: 10px 14px !important;
}

/* 3. Upload & OCR Workspace Empty-State Optimization */
.empty-upload-box {
  padding: 24px 20px !important;
}

.empty-questions-notice {
  padding: 28px 20px !important;
}

/* 4. Tablet & Mobile UX Improvements (<= 768px) */
@media (max-width: 768px) {
  .page-view {
    padding: 10px 10px 20px !important;
  }

  .page-view-container {
    gap: 10px !important;
  }

  /* Keep single-action page headers horizontal to avoid wasted vertical rows */
  .page-view-header {
    flex-direction: row !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 8px !important;
    margin-bottom: 10px !important;
    padding-bottom: 8px !important;
  }

  .page-view-header-info {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    gap: 8px !important;
  }

  .page-view-icon {
    width: 34px !important;
    height: 34px !important;
    border-radius: 8px !important;
  }

  .page-view-icon svg {
    width: 17px !important;
    height: 17px !important;
  }

  .page-view-title {
    font-size: 1.08rem !important;
    line-height: 1.25 !important;
  }

  /* When header has only 1 button (e.g., Assessments, Schools, Attendance), keep it inline */
  .page-view-actions {
    width: auto !important;
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 6px !important;
  }

  /* When header has 2+ buttons (e.g., Question Bank, Student Management), use a clean compact grid */
  .page-view-actions:has(> :nth-child(2)) {
    width: 100% !important;
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(135px, minmax(0, 1fr))) !important;
    gap: 6px !important;
  }

  .page-view-actions .btn {
    height: 34px !important;
    padding: 0 10px !important;
    font-size: 0.78rem !important;
    justify-content: center !important;
  }

  /* User Management section header: keep title + Create User button on one row */
  .admin-users-section-header {
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 10px 12px !important;
    gap: 8px !important;
  }

  .admin-users-section-header .header-actions {
    width: auto !important;
  }

  .admin-users-section-header .header-actions .btn {
    width: auto !important;
    height: 34px !important;
    padding: 0 12px !important;
    font-size: 0.78rem !important;
  }

  /* 2-Column Compact Filter Bar on Mobile (saves ~50% vertical space) */
  .qb-filter-bar {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
    padding: 10px !important;
    margin-bottom: 10px !important;
  }

  .qb-filter-group {
    width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
  }

  .qb-filter-group.qb-search-group {
    grid-column: 1 / -1 !important;
  }

  .qb-filter-label {
    font-size: 0.68rem !important;
    margin-bottom: 3px !important;
  }

  .qb-filter-select,
  .qb-search-input {
    height: 34px !important;
    font-size: 0.8rem !important;
    padding-top: 4px !important;
    padding-bottom: 4px !important;
  }

  .qb-filter-reset {
    grid-column: 1 / -1 !important;
    height: 32px !important;
    font-size: 0.76rem !important;
    justify-content: center !important;
  }

  /* Fee Management: 2 Stat Cards Side-by-Side on Mobile */
  .fee-stats-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
    margin-bottom: 10px !important;
  }

  .fee-stat-card {
    padding: 10px 12px !important;
    border-radius: 10px !important;
  }

  .fee-stat-label {
    font-size: 0.68rem !important;
    margin-bottom: 2px !important;
  }

  .fee-stat-value {
    font-size: 1.12rem !important;
  }

  /* Attendance: All 3 Stat Cards in 1 Compact Row on Mobile */
  .attend-stats-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 8px !important;
    margin-bottom: 10px !important;
  }

  .attend-stat-card {
    padding: 8px 10px !important;
    border-radius: 10px !important;
  }

  .attend-stat-label {
    font-size: 0.65rem !important;
    margin-bottom: 2px !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  .attend-stat-value {
    font-size: 1.15rem !important;
  }

  /* Attendance Toolbar: Compact Wrapped Controls Instead of Tall Vertical Stack */
  .attend-toolbar-card {
    padding: 10px !important;
    gap: 8px !important;
    margin-bottom: 10px !important;
  }

  .attend-toolbar-left {
    flex-direction: row !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    gap: 6px !important;
  }

  .attend-date-pill {
    flex: 1 1 auto !important;
    height: 34px !important;
    padding: 4px 10px !important;
  }

  #groupAttendFilterClass {
    flex: 1 1 120px !important;
  }

  #attendFilterClass {
    width: 100% !important;
    height: 34px !important;
  }

  .attend-batch-pills {
    width: 100% !important;
    overflow-x: auto !important;
    flex-wrap: nowrap !important;
    padding-bottom: 2px !important;
  }

  .attend-batch-pill {
    padding: 5px 10px !important;
    font-size: 0.75rem !important;
    white-space: nowrap !important;
  }

  /* Upload & OCR Workspace: Avoid Huge Empty Vertical Boxes on Mobile */
  .app-layout {
    padding: 8px !important;
    gap: 10px !important;
  }

  .canvas-pane:not(:has(#sourceCanvas[style*="block"])) {
    height: auto !important;
    min-height: 210px !important;
  }

  /* Removed buggy min-height collapse rule */

  .empty-upload-box {
    padding: 18px 14px !important;
  }

  .empty-upload-icon {
    width: 44px !important;
    height: 44px !important;
    margin-bottom: 8px !important;
  }

  .empty-upload-title {
    font-size: 0.95rem !important;
    margin-bottom: 8px !important;
  }

  .empty-questions-notice {
    padding: 20px 14px !important;
  }

  /* Question Bank & Assessment Cards: Compact Mobile Padding */
  .qb-card,
  .assessment-card {
    padding: 12px !important;
    margin-bottom: 8px !important;
  }
}

/* ============================================================
   View Student & User Details Modal – Balanced & Aligned Layout
   ============================================================ */

#viewStudentDetailsModal .student-details-modal-card,
#viewUserDetailsModal .student-details-modal-card {
  max-width: 540px;
  width: 100%;
  border-radius: 16px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

#viewStudentDetailsModal .student-details-modal-header,
#viewUserDetailsModal .student-details-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 18px 22px 16px;
  border-bottom: 1px solid var(--border-color, #e2e8f0);
  background: #ffffff;
}

#viewStudentDetailsModal .student-details-modal-header .modal-header-icon,
#viewUserDetailsModal .student-details-modal-header .modal-header-icon {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin: 0;
}

#viewStudentDetailsModal .student-details-header-text,
#viewUserDetailsModal .student-details-header-text {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 2px;
}

#viewStudentDetailsModal .student-details-header-text .modal-title,
#viewUserDetailsModal .student-details-header-text .modal-title {
  margin: 0;
  font-size: 1.05rem;
  font-weight: 700;
  line-height: 1.25;
  color: var(--text-primary, #0f172a);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

#viewStudentDetailsModal .student-details-header-text .modal-subtitle,
#viewUserDetailsModal .student-details-header-text .modal-subtitle {
  margin: 0;
  font-size: 0.78rem;
  line-height: 1.3;
  color: var(--text-secondary, #64748b);
}

#viewStudentDetailsModal .student-details-modal-header .modal-close-btn,
#viewUserDetailsModal .student-details-modal-header .modal-close-btn {
  width: 34px;
  height: 34px;
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin: 0;
}

#viewStudentDetailsModal .student-details-modal-body,
#viewUserDetailsModal .student-details-modal-body {
  padding: 18px 22px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  background: #ffffff;
  overflow-y: auto;
}

/* Student Profile Banner Card */
.student-profile-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 16px;
  background: #f8fafc;
  border: 1px solid var(--border-color, #e2e8f0);
  border-radius: 12px;
}

.student-profile-banner-left {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
  flex: 1;
}

.student-profile-avatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: #eff6ff;
  color: #1d68ff;
  border: 1px solid #bfdbfe;
  font-weight: 700;
  font-size: 1.05rem;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  line-height: 1;
}

.student-profile-meta {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 3px;
  min-width: 0;
}

.student-profile-name {
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.25;
  color: var(--text-primary, #0f172a);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.student-profile-enrolled {
  font-size: 0.78rem;
  line-height: 1.25;
  color: var(--text-secondary, #64748b);
}

.student-profile-roll-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #eef2ff;
  color: #3730a3;
  border: 1px solid #c7d2fe;
  font-family: var(--font-mono, monospace);
  font-weight: 700;
  font-size: 0.82rem;
  line-height: 1;
  padding: 7px 12px;
  border-radius: 8px;
  flex-shrink: 0;
  letter-spacing: 0.02em;
}

/* Student Information Grid & Uniform Cards */
.student-details-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.student-detail-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  background: #ffffff;
  border: 1px solid var(--border-color, #e2e8f0);
  border-radius: 10px;
  min-height: 62px;
  box-sizing: border-box;
}

.student-detail-card--full {
  grid-column: 1 / -1;
}

.student-detail-icon {
  width: 36px;
  height: 36px;
  border-radius: 9px;
  background: #f1f5f9;
  color: #475569;
  border: 1px solid #e2e8f0;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.student-detail-icon svg {
  width: 16px;
  height: 16px;
  stroke-width: 2;
  display: block;
}

.student-detail-content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 3px;
  min-width: 0;
  flex: 1;
}

.student-detail-label {
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  line-height: 1.2;
  color: var(--text-muted, #64748b);
}

.student-detail-value {
  font-size: 0.9rem;
  font-weight: 600;
  line-height: 1.3;
  color: var(--text-primary, #0f172a);
  word-break: break-word;
}

.student-detail-value--batch {
  color: #0369a1;
}

.student-detail-value--fee-type {
  color: #0f766e;
}

.student-detail-value--fee-amount {
  font-family: var(--font-mono, monospace);
  font-weight: 700;
  font-size: 0.94rem;
}

/* Modal Footer Alignment */
#viewStudentDetailsModal .student-details-modal-footer,
#viewUserDetailsModal .student-details-modal-footer {
  margin: 0;
  padding: 14px 22px;
  background: #f8fafc;
  border-top: 1px solid var(--border-color, #e2e8f0);
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
}

#viewStudentDetailsModal .student-details-modal-footer .btn,
#viewUserDetailsModal .student-details-modal-footer .btn {
  height: 38px;
  min-width: 112px;
  padding: 0 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  font-size: 0.85rem;
  font-weight: 600;
  line-height: 1;
  border-radius: 8px;
  margin: 0;
}

#viewStudentDetailsModal .student-details-modal-footer .btn svg,
#viewUserDetailsModal .student-details-modal-footer .btn svg {
  width: 15px;
  height: 15px;
  flex-shrink: 0;
  display: block;
}

@media (max-width: 576px) {
  #viewStudentDetailsModal .student-details-modal-header,
  #viewUserDetailsModal .student-details-modal-header {
    padding: 14px 16px;
  }

  #viewStudentDetailsModal .student-details-modal-body,
  #viewUserDetailsModal .student-details-modal-body {
    padding: 14px 16px;
    gap: 10px;
  }

  .student-profile-banner {
    padding: 12px 14px;
  }

  .student-details-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }

  .student-detail-card {
    padding: 10px 12px;
    gap: 10px;
    min-height: 56px;
  }

  .student-detail-icon {
    width: 32px;
    height: 32px;
    border-radius: 8px;
  }

  .student-detail-icon svg {
    width: 15px;
    height: 15px;
  }

  #viewStudentDetailsModal .student-details-modal-footer,
  #viewUserDetailsModal .student-details-modal-footer {
    padding: 12px 16px;
    flex-direction: row !important;
    gap: 10px !important;
  }

  #viewStudentDetailsModal .student-details-modal-footer .btn,
  #viewUserDetailsModal .student-details-modal-footer .btn {
    flex: 1 1 0 !important;
    width: auto !important;
    min-width: 0;
  }
}

/* ============================================================
   Breadcrumb Navigation (Page & Modal Trail)
   ============================================================ */

.app-breadcrumb-bar {
  display: flex;
  align-items: center;
  min-height: 38px;
  padding: 6px 24px;
  background: #ffffff;
  border-bottom: 1px solid var(--border-color, #e2e8f0);
  flex-shrink: 0;
  box-sizing: border-box;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}

.app-breadcrumb-bar::-webkit-scrollbar,
.modal-breadcrumb-bar::-webkit-scrollbar {
  display: none;
}

.modal-breadcrumb-bar {
  display: flex;
  align-items: center;
  min-height: 34px;
  padding: 6px 22px;
  background: #f8fafc;
  border-bottom: 1px solid var(--border-color, #e2e8f0);
  flex-shrink: 0;
  box-sizing: border-box;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}

.app-breadcrumb-list {
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  gap: 6px;
  list-style: none;
  margin: 0;
  padding: 0;
  min-width: 0;
}

.app-breadcrumb-item {
  display: inline-flex;
  align-items: center;
  min-width: 0;
  flex-shrink: 0;
}

.app-breadcrumb-link {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 6px;
  margin: 0 -4px;
  border: none;
  border-radius: 6px;
  background: transparent;
  color: var(--text-secondary, #64748b);
  font-family: inherit;
  font-size: 0.78rem;
  font-weight: 600;
  line-height: 1.3;
  cursor: pointer;
  white-space: nowrap;
  transition: color 0.15s ease, background-color 0.15s ease;
}

.app-breadcrumb-link:hover {
  color: var(--primary, #1d68ff);
  background: #eff6ff;
}

.app-breadcrumb-current {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 2px;
  color: var(--text-primary, #0f172a);
  font-size: 0.78rem;
  font-weight: 700;
  line-height: 1.3;
  white-space: nowrap;
}

.app-breadcrumb-home-icon {
  width: 13px;
  height: 13px;
  flex-shrink: 0;
  stroke-width: 2;
  display: block;
}

.app-breadcrumb-separator {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #94a3b8;
  flex-shrink: 0;
}

.app-breadcrumb-separator svg {
  width: 13px;
  height: 13px;
  display: block;
}

@media (max-width: 768px) {
  .app-breadcrumb-bar {
    min-height: 32px;
    padding: 4px 12px;
  }

  .modal-breadcrumb-bar {
    min-height: 30px;
    padding: 5px 16px;
  }

  .app-breadcrumb-link,
  .app-breadcrumb-current {
    font-size: 0.74rem;
  }

  .app-breadcrumb-list {
    gap: 4px;
  }

  .app-breadcrumb-separator svg {
    width: 12px;
    height: 12px;
  }
}

/* ============================================================
   Attendance Mobile-First Card UI, Accordion & Status Ordering
   ============================================================ */

/* 4-Card Summary Grid (Total, Unmarked, Present, Absent) */
#viewAttendancePage .attend-stats-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 14px;
}

#viewAttendancePage .attend-stat-card.card-unmarked {
  background: linear-gradient(135deg, #fffbeb 0%, #fef3c7 100%);
  border: 1px solid #fcd34d;
}

#viewAttendancePage .attend-stat-card.card-unmarked .stat-label {
  color: #b45309;
}

#viewAttendancePage .attend-stat-card.card-unmarked .stat-val {
  color: #d97706;
}

/* Interactive Date Selector */
.attend-date-selector-wrap {
  position: relative;
  display: inline-flex;
  align-items: center;
}

.attend-date-selector-icon {
  position: absolute;
  left: 11px;
  width: 15px;
  height: 15px;
  color: var(--primary, #2563eb);
  pointer-events: none;
  z-index: 1;
}

.attend-date-input {
  height: 38px !important;
  padding: 0 12px 0 34px !important;
  border-radius: 10px !important;
  border: 1px solid #cbd5e1 !important;
  background: #ffffff !important;
  font-size: 0.86rem !important;
  font-weight: 700 !important;
  color: var(--text-primary, #0f172a) !important;
  cursor: pointer;
  min-width: 152px;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}

.attend-date-input:focus {
  border-color: var(--primary, #2563eb) !important;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12) !important;
  outline: none;
}

/* Desktop Unmarked Pill & Choice Buttons */
.attend-unmarked-pill {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  background: #fef3c7;
  color: #b45309;
  border: 1px solid #fde68a;
}

.attend-row-unmarked {
  background: rgba(254, 252, 232, 0.45);
}

.attend-desktop-action-group {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}

.attend-choice-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 11px;
  border-radius: 8px;
  font-size: 0.78rem;
  font-weight: 700;
  border: 1px solid #e2e8f0;
  background: #f8fafc;
  color: #475569;
  cursor: pointer;
  transition: all 0.15s ease;
}

.attend-choice-btn svg {
  width: 13px;
  height: 13px;
}

.attend-choice-btn.choice-present:hover {
  border-color: #86efac;
  background: #f0fdf4;
  color: #15803d;
}

.attend-choice-btn.choice-present.is-selected {
  background: #16a34a;
  border-color: #15803d;
  color: #ffffff;
  box-shadow: 0 2px 6px rgba(22, 163, 74, 0.22);
}

.attend-choice-btn.choice-absent:hover {
  border-color: #fca5a5;
  background: #fef2f2;
  color: #b91c1c;
}

.attend-choice-btn.choice-absent.is-selected {
  background: #dc2626;
  border-color: #b91c1c;
  color: #ffffff;
  box-shadow: 0 2px 6px rgba(220, 38, 38, 0.22);
}

/* Hide mobile cards container on desktop (> 768px) */
.attend-mobile-cards-list {
  display: none;
}

/* Mobile-First Attendance Card & Accordion View (<= 768px) */
@media (max-width: 768px) {

  /* Hide all attendance tables on mobile */
  #viewAttendancePage .attend-desktop-table,
  #modalAttendHistoryDetails .attend-desktop-table {
    display: none !important;
  }

  /* Show individual student card list on mobile */
  #viewAttendancePage .attend-mobile-cards-list,
  #modalAttendHistoryDetails .attend-mobile-cards-list {
    display: flex !important;
    flex-direction: column;
    gap: 8px;
    padding: 8px;
  }

  #viewAttendancePage #attendTableContainer,
  #viewAttendancePage #attendHistoryContainer {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
    overflow: visible !important;
  }

  /* Compact 4-column top stats bar on mobile */
  #viewAttendancePage .attend-stats-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 6px !important;
    margin-bottom: 10px !important;
  }

  #viewAttendancePage .attend-stat-card {
    padding: 8px 6px !important;
    border-radius: 10px !important;
    text-align: center !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    min-height: 54px !important;
  }

  #viewAttendancePage .attend-stat-card .stat-label {
    font-size: 0.62rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.02em !important;
    margin-bottom: 2px !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    max-width: 100%;
  }

  #viewAttendancePage .attend-stat-card .stat-val {
    font-size: 1.05rem !important;
    font-weight: 800 !important;
    line-height: 1.1 !important;
  }

  /* Compact Toolbar on Mobile */
  #viewAttendancePage .attend-toolbar-card {
    padding: 10px !important;
    margin-bottom: 10px !important;
    border-radius: 12px !important;
    gap: 8px !important;
  }

  #viewAttendancePage .attend-date-selector-wrap {
    flex: 1 1 48%;
  }

  #viewAttendancePage .attend-date-input {
    width: 100% !important;
    min-width: 0 !important;
    height: 36px !important;
    font-size: 0.8rem !important;
    padding: 0 8px 0 30px !important;
  }

  /* Section Dividers: Unmarked (Top) vs Marked (Bottom) */
  .attend-mobile-section-label {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 0.72rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding: 4px 6px 2px;
    margin-top: 2px;
    color: #475569;
  }

  .attend-mobile-section-label.is-marked-section {
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px dashed #cbd5e1;
    color: #64748b;
  }

  .attend-section-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    flex-shrink: 0;
  }

  .attend-section-dot.dot-unmarked {
    background: #f59e0b;
    box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.18);
  }

  .attend-section-dot.dot-marked {
    background: #10b981;
  }

  /* Individual Student Card */
  .attend-student-card {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.04);
    overflow: hidden;
    transition: border-color 0.18s ease, box-shadow 0.18s ease, background-color 0.18s ease;
  }

  .attend-student-card.is-unmarked {
    border-left: 3.5px solid #f59e0b;
  }

  .attend-student-card.is-present {
    border-left: 3.5px solid #16a34a;
    background: #fcfdfc;
  }

  .attend-student-card.is-absent {
    border-left: 3.5px solid #dc2626;
    background: #fffafa;
  }

  .attend-student-card.is-expanded {
    border-color: #93c5fd;
    box-shadow: 0 4px 12px rgba(37, 99, 235, 0.08);
  }

  /* Compact Card Header (Always Visible) */
  .attend-card-header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 11px;
    cursor: pointer;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
  }

  .attend-card-avatar {
    width: 34px;
    height: 34px;
    border-radius: 9px;
    background: #eff6ff;
    color: #1d4ed8;
    font-size: 0.86rem;
    font-weight: 800;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    border: 1px solid #dbeafe;
  }

  .attend-student-card.is-present .attend-card-avatar {
    background: #dcfce7;
    color: #15803d;
    border-color: #bbf7d0;
  }

  .attend-student-card.is-absent .attend-card-avatar {
    background: #fee2e2;
    color: #b91c1c;
    border-color: #fecaca;
  }

  .attend-card-summary {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
  }

  .attend-card-name-row {
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
  }

  .attend-card-name {
    font-size: 0.88rem;
    font-weight: 700;
    color: #0f172a;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .attend-card-status-badge {
    display: inline-flex;
    align-items: center;
    padding: 1px 6px;
    border-radius: 999px;
    font-size: 0.62rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    flex-shrink: 0;
  }

  .attend-card-status-badge.badge-unmarked {
    background: #fef3c7;
    color: #b45309;
    border: 1px solid #fde68a;
  }

  .attend-card-status-badge.badge-present {
    background: #dcfce7;
    color: #15803d;
    border: 1px solid #bbf7d0;
  }

  .attend-card-status-badge.badge-absent {
    background: #fee2e2;
    color: #b91c1c;
    border: 1px solid #fecaca;
  }

  .attend-card-submeta {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 0.72rem;
    font-weight: 600;
    color: #64748b;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .attend-meta-sep {
    color: #cbd5e1;
  }

  /* Quick One-Hand P / A Action Buttons + Accordion Chevron */
  .attend-card-quick-actions {
    display: flex;
    align-items: center;
    gap: 5px;
    flex-shrink: 0;
  }

  .attend-quick-btn {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    border: 1px solid #e2e8f0;
    background: #f8fafc;
    color: #475569;
    font-size: 0.72rem;
    font-weight: 800;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 2px;
    padding: 0;
    cursor: pointer;
    transition: all 0.15s ease;
  }

  .attend-quick-btn svg {
    width: 12px;
    height: 12px;
    display: none;
  }

  .attend-quick-btn.quick-present {
    border-color: #bbf7d0;
    color: #15803d;
    background: #f0fdf4;
  }

  .attend-quick-btn.quick-present.active {
    background: #16a34a;
    border-color: #15803d;
    color: #ffffff;
    box-shadow: 0 2px 5px rgba(22, 163, 74, 0.25);
  }

  .attend-quick-btn.quick-absent {
    border-color: #fecaca;
    color: #b91c1c;
    background: #fef2f2;
  }

  .attend-quick-btn.quick-absent.active {
    background: #dc2626;
    border-color: #b91c1c;
    color: #ffffff;
    box-shadow: 0 2px 5px rgba(220, 38, 38, 0.25);
  }

  .attend-card-chevron {
    width: 22px;
    height: 22px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #94a3b8;
    transition: transform 0.2s ease, color 0.2s ease;
  }

  .attend-card-chevron svg {
    width: 15px;
    height: 15px;
  }

  .attend-student-card.is-expanded .attend-card-chevron {
    transform: rotate(180deg);
    color: #2563eb;
  }

  /* Accordion Body (Collapsed by Default, Expanded on Click) */
  .attend-card-body {
    display: none;
    padding: 10px 12px 12px;
    border-top: 1px solid #f1f5f9;
    background: #f8fafc;
  }

  .attend-student-card.is-expanded .attend-card-body {
    display: block;
  }

  .attend-card-details-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    margin-bottom: 10px;
  }

  .attend-detail-item {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    padding: 6px 9px;
    display: flex;
    flex-direction: column;
    gap: 1px;
  }

  .attend-detail-item.attend-detail-full {
    grid-column: 1 / -1;
  }

  .attend-detail-label {
    font-size: 0.63rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: #64748b;
  }

  .attend-detail-val {
    font-size: 0.78rem;
    font-weight: 700;
    color: #0f172a;
    word-break: break-word;
  }

  .attend-card-body-actions {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 8px;
  }

  .attend-body-btn {
    height: 34px;
    border-radius: 8px;
    font-size: 0.78rem;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    cursor: pointer;
    border: 1px solid #cbd5e1;
    background: #ffffff;
    transition: all 0.15s ease;
  }

  .attend-body-btn svg {
    width: 14px;
    height: 14px;
  }

  .attend-body-btn.body-btn-present {
    border-color: #86efac;
    color: #15803d;
    background: #f0fdf4;
  }

  .attend-body-btn.body-btn-present.active {
    background: #16a34a;
    border-color: #15803d;
    color: #ffffff;
  }

  .attend-body-btn.body-btn-absent {
    border-color: #fca5a5;
    color: #b91c1c;
    background: #fef2f2;
  }

  .attend-body-btn.body-btn-absent.active {
    background: #dc2626;
    border-color: #b91c1c;
    color: #ffffff;
  }

  .attend-history-empty-card {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 24px 16px;
    text-align: center;
    font-size: 0.84rem;
    color: #64748b;
  }

  /* Submit Attendance Bar: Placed in normal flow below student cards (no overlap) */
  #viewAttendancePage .attend-save-bar,
  #attendSaveBar {
    position: static !important;
    bottom: auto !important;
    left: auto !important;
    right: auto !important;
    z-index: 1 !important;
    margin: 14px 8px 20px !important;
    padding: 12px !important;
    background: #ffffff !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 12px !important;
    box-shadow: 0 2px 6px rgba(15, 23, 42, 0.04) !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    justify-content: center !important;
  }

  #viewAttendancePage #btnSaveAttendanceBottom,
  #btnSaveAttendanceBottom {
    width: 100% !important;
    min-height: 44px !important;
    padding: 10px 18px !important;
    border-radius: 10px !important;
    font-size: 0.9rem !important;
    font-weight: 700 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    margin: 0 !important;
  }
}

/* ================================================================
   USER MANAGEMENT COMPACT STATS & ATTENDANCE DATE PICKER
   ================================================================ */

/* User Management Compact Statistics Grid */
.user-stats-compact-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  margin-bottom: 20px;
  padding: 0;
  background: transparent;
  border: none;
}

.user-stat-card {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 12px 16px;
  border-radius: 12px;
  background: #ffffff;
  border: 1px solid var(--border-color, #e2e8f0);
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.04);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
  min-height: 72px;
  box-sizing: border-box;
}

.user-stat-card:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(15, 23, 42, 0.06);
}

.user-stat-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.user-stat-label {
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #64748b;
  line-height: 1.2;
}

.user-stat-icon-wrap {
  width: 28px;
  height: 28px;
  border-radius: 7px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.user-stat-icon-wrap svg {
  width: 14px;
  height: 14px;
}

.user-stat-icon-wrap.icon-blue {
  background: #eff6ff;
  color: #2563eb;
}

.user-stat-icon-wrap.icon-purple {
  background: #faf5ff;
  color: #7e22ce;
}

.user-stat-icon-wrap.icon-amber {
  background: #fffbeb;
  color: #d97706;
}

.user-stat-icon-wrap.icon-emerald {
  background: #f0fdf4;
  color: #16a34a;
}

.user-stat-val {
  font-size: 1.55rem;
  font-weight: 800;
  color: #0f172a;
  line-height: 1.15;
  margin-top: 4px;
  font-family: var(--font-mono, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, monospace);
}

/* Card color accents */
.user-stat-card.card-total-users {
  background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%);
  border-color: #cbd5e1;
}

.user-stat-card.card-admins {
  background: linear-gradient(135deg, #ffffff 0%, #faf5ff 100%);
  border-color: #e9d5ff;
}
.user-stat-card.card-admins .user-stat-val {
  color: #7e22ce;
}

.user-stat-card.card-managers {
  background: linear-gradient(135deg, #ffffff 0%, #fffbeb 100%);
  border-color: #fde68a;
}
.user-stat-card.card-managers .user-stat-val {
  color: #b45309;
}

.user-stat-card.card-teachers {
  background: linear-gradient(135deg, #ffffff 0%, #f0fdf4 100%);
  border-color: #bbf7d0;
}
.user-stat-card.card-teachers .user-stat-val {
  color: #15803d;
}

/* Student Management Compact Statistics Grid */
.student-stats-compact-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  margin-bottom: 20px;
  padding: 0;
  background: transparent;
  border: none;
}

.user-stat-card.card-total-students {
  background: linear-gradient(135deg, #ffffff 0%, #eff6ff 100%);
  border-color: #bfdbfe;
}
.user-stat-card.card-total-students .user-stat-val {
  color: #1d4ed8;
}

.user-stat-card.card-total-classes {
  background: linear-gradient(135deg, #ffffff 0%, #faf5ff 100%);
  border-color: #e9d5ff;
}
.user-stat-card.card-total-classes .user-stat-val {
  color: #7e22ce;
}

.user-stat-card.card-total-batches {
  background: linear-gradient(135deg, #ffffff 0%, #fffbeb 100%);
  border-color: #fde68a;
}
.user-stat-card.card-total-batches .user-stat-val {
  color: #b45309;
}

/* Attendance Page Header Title & Date Row */
.attend-title-date-row {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}

/* Read-only Date Display for Attendance Page */
.attend-date-badge-readonly {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 38px;
  padding: 0 14px;
  background: #f8fafc;
  border: 1.5px solid #cbd5e1;
  border-radius: 9px;
  cursor: default;
  user-select: none;
  font-weight: 700;
  color: #1e293b;
  flex-shrink: 0;
  pointer-events: none;
}
.attend-date-badge-readonly .attend-date-picker-icon {
  color: #2563eb;
  width: 16px;
  height: 16px;
}
.attend-date-badge-readonly .attend-date-display-val {
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  color: #1e293b;
  font-family: var(--font-mono, monospace);
  line-height: 1;
}

/* Test History Compact Batch Tag */
.test-history-batch-tag {
  font-size: 0.68rem !important;
  padding: 1px 6px !important;
  line-height: 1.2 !important;
  font-weight: 600 !important;
  border-radius: 4px !important;
  letter-spacing: 0.01em !important;
}

/* Test History Table Alignment and Styling */
#testHistoryTable {
  width: 100%;
  border-collapse: collapse;
}

#testHistoryTable th,
#testHistoryTable td {
  vertical-align: middle;
  padding: 12px 14px;
}

#testHistoryTable th:nth-child(5),
#testHistoryTable td:nth-child(5),
#testHistoryTable th:nth-child(6),
#testHistoryTable td:nth-child(6) {
  text-align: center;
}

/* Attendance Page Single Interactive Date Selector */
.attend-date-selector-wrapper {
  position: relative;
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
}

.attend-date-picker-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 38px;
  padding: 0 14px;
  background: #ffffff;
  border: 1.5px solid #2563eb;
  border-radius: 9px;
  cursor: pointer;
  box-shadow: 0 1px 3px rgba(37, 99, 235, 0.08);
  font-weight: 700;
  color: #1e293b;
  position: relative;
  transition: all 0.15s ease;
  user-select: none;
}

.attend-date-picker-btn:hover {
  background: #eff6ff;
  border-color: #1d4ed8;
  box-shadow: 0 2px 6px rgba(37, 99, 235, 0.15);
}

.attend-date-picker-btn:focus-within {
  outline: none;
  border-color: #1d4ed8;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.2);
}

.attend-date-picker-icon {
  width: 16px;
  height: 16px;
  color: #2563eb;
  flex-shrink: 0;
}

.attend-date-display-val {
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  color: #1e293b;
  font-family: var(--font-mono, monospace);
  line-height: 1;
}

.attend-date-picker-arrow {
  width: 13px;
  height: 13px;
  color: #64748b;
  margin-left: 2px;
  flex-shrink: 0;
  transition: transform 0.15s ease;
}

.attend-date-picker-btn:hover .attend-date-picker-arrow {
  color: #2563eb;
}

.attend-date-hidden-input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
  z-index: 5;
  font-size: 16px;
}

@media (max-width: 900px) {
  .user-stats-compact-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
    margin-bottom: 14px;
  }
  .student-stats-compact-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    margin-bottom: 14px;
  }
}

@media (max-width: 600px) {
  .user-stats-compact-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
    margin-bottom: 12px;
  }
  .student-stats-compact-grid {
    grid-template-columns: 1fr;
    gap: 8px;
    margin-bottom: 12px;
  }
  .user-stat-card {
    padding: 10px 12px;
    min-height: 64px;
  }
  .user-stat-val {
    font-size: 1.3rem;
  }
  .user-stat-icon-wrap {
    width: 24px;
    height: 24px;
  }
  .user-stat-icon-wrap svg {
    width: 12px;
    height: 12px;
  }
  .attend-title-date-row {
    gap: 8px;
  }
  .attend-date-picker-btn {
    height: 36px;
    padding: 0 10px;
    gap: 6px;
  }
  .attend-date-display-val {
    font-size: 0.85rem;
  }
}

/* ================================================================
   ALL-PAGES UX AUDIT ENHANCEMENTS (DESKTOP & MOBILE)
   ================================================================ */

/* 1. Summary Strips (Student Management, User Management) */
.ux-summary-strip {
  display: grid;
  gap: 12px;
  padding: 14px 20px;
  background: #f8fafc;
  border-bottom: 1px solid #e2e8f0;
}

.ux-summary-strip.ux-summary-3col {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.ux-summary-strip.ux-summary-4col {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.ux-summary-card {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  padding: 12px 16px;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.03);
}

.ux-inline-stat-pill {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 9px;
  padding: 8px 14px;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.03);
}

.ux-inline-stat-label {
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #64748b;
}

.ux-inline-stat-val {
  font-size: 1.05rem;
  font-weight: 800;
  color: #1d68ff;
  background: #eff6ff;
  padding: 2px 9px;
  border-radius: 999px;
  line-height: 1.3;
}

.ux-summary-icon {
  width: 38px;
  height: 38px;
  border-radius: 9px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.ux-summary-icon svg {
  width: 18px;
  height: 18px;
}

.ux-summary-icon.icon-blue {
  background: #eff6ff;
  color: #1d68ff;
}

.ux-summary-icon.icon-indigo {
  background: #eef2ff;
  color: #4f46e5;
}

.ux-summary-icon.icon-teal {
  background: #f0fdfa;
  color: #0d9488;
}

.ux-summary-icon.icon-amber {
  background: #fffbeb;
  color: #d97706;
}

.ux-summary-meta {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.ux-summary-label {
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #64748b;
  line-height: 1.1;
}

.ux-summary-val {
  font-size: 1.25rem;
  font-weight: 800;
  color: #0f172a;
  line-height: 1.15;
}

/* 2. Fee Management 4-Column Summary Grid */
.fee-stats-grid.ux-fee-stats-4col {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.fee-stat-card.card-neutral {
  background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
  border: 1px solid #cbd5e1;
}

.fee-stat-card.card-neutral .fee-stat-icon {
  background: #e2e8f0;
  color: #334155;
}

.fee-stat-card.card-neutral-warn {
  background: linear-gradient(135deg, #fffbeb 0%, #fef3c7 100%);
  border: 1px solid #fde68a;
}

.fee-stat-card.card-neutral-warn .fee-stat-icon {
  background: #fef08a;
  color: #b45309;
}

/* 3. School Management Toolbar (Count Pill + Search Bar) */
.ux-school-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 12px 20px;
  background: #f8fafc;
  border-bottom: 1px solid #e2e8f0;
  flex-wrap: wrap;
}

.ux-school-count-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 9px;
  padding: 7px 12px;
  font-size: 0.82rem;
  color: #475569;
  font-weight: 600;
}

.ux-school-count-badge svg {
  width: 16px;
  height: 16px;
  color: #1d68ff;
  flex-shrink: 0;
}

.ux-school-count-badge strong {
  font-size: 0.95rem;
  font-weight: 800;
  color: #0f172a;
}

.ux-school-search-wrap {
  flex: 1 1 260px;
  max-width: 360px;
}

/* 4. Desktop vs Mobile Table/Card Toggle Across All Entity Pages */
.ux-mobile-cards-list {
  display: none;
}

.ux-card-icon-btn {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  border: 1px solid #e2e8f0;
  background: #f8fafc;
  color: #475569;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
  transition: all 0.15s ease;
}

.ux-card-icon-btn svg {
  width: 15px;
  height: 15px;
}

.ux-card-icon-btn:hover {
  background: #eff6ff;
  border-color: #bfdbfe;
  color: #1d68ff;
}

.ux-card-icon-btn.danger:hover {
  background: #fef2f2;
  border-color: #fecaca;
  color: #dc2626;
}

.ux-card-footer-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px dashed #e2e8f0;
}

.ux-card-footer-actions .btn {
  flex: 1 1 auto;
  justify-content: center;
  font-size: 0.78rem;
  padding: 7px 10px;
}

/* 5. Upload Page Split-View Proportions & Empty State Balance */
#viewUpload .split-view {
  align-items: stretch;
}

#viewUpload .panel-upload,
#viewUpload .panel-questions {
  display: flex;
  flex-direction: column;
}

@media (max-width: 1024px) {
  .fee-stats-grid.ux-fee-stats-4col {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 768px) {

  /* Hide wide multi-column tables on mobile and show individual accordion/entity cards */
  .ux-desktop-table {
    display: none !important;
  }

  .ux-mobile-cards-list {
    display: flex !important;
    flex-direction: column;
    gap: 8px;
    padding: 10px 8px 14px;
  }

  /* Compact summary strips on mobile */
  .ux-summary-strip {
    padding: 10px;
    gap: 8px;
  }

  .ux-summary-strip.ux-summary-3col {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .ux-summary-strip.ux-summary-4col {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .ux-summary-card {
    padding: 8px 10px;
    gap: 8px;
    border-radius: 9px;
  }

  .ux-summary-icon {
    width: 30px;
    height: 30px;
    border-radius: 7px;
  }

  .ux-summary-icon svg {
    width: 15px;
    height: 15px;
  }

  .ux-summary-label {
    font-size: 0.6rem;
  }

  .ux-summary-val {
    font-size: 1.05rem;
  }

  /* Fee Management 4-card grid on mobile: 2x2 compact grid */
  .fee-stats-grid.ux-fee-stats-4col {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
    padding: 10px !important;
  }

  .fee-stats-grid.ux-fee-stats-4col .fee-stat-card {
    padding: 10px 12px !important;
    gap: 10px !important;
  }

  .fee-stats-grid.ux-fee-stats-4col .fee-stat-icon {
    width: 34px !important;
    height: 34px !important;
  }

  .fee-stats-grid.ux-fee-stats-4col .fee-stat-value {
    font-size: 1.1rem !important;
  }

  /* School toolbar on mobile */
  .ux-school-toolbar {
    padding: 10px;
    gap: 8px;
  }

  .ux-school-search-wrap {
    max-width: 100%;
    flex: 1 1 100%;
  }
}

/* ================================================================
   ATTENDANCE DATE DISPLAY & HISTORY CALENDAR SELECTOR
   ================================================================ */
#attendDatePill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 36px;
  padding: 0 14px;
  border-radius: 9px;
  background: #f8fafc;
  border: 1px solid #cbd5e1;
  color: #0f172a;
  font-size: 0.88rem;
  font-weight: 700;
  font-family: var(--font-mono, monospace);
  letter-spacing: 0.02em;
  pointer-events: none;
  user-select: none;
  cursor: default;
}

#attendDatePill svg {
  display: none !important;
}

.attend-history-date-input {
  height: 36px !important;
  padding: 0 10px !important;
  border-radius: 8px !important;
  border: 1px solid #cbd5e1 !important;
  background: #ffffff !important;
  font-size: 0.84rem !important;
  font-weight: 600 !important;
  color: #0f172a !important;
  cursor: pointer;
}










/* ============================================================
   Mobile Button Usability Overrides (v65)
   Ensures every button is clearly readable and easy to tap (>= 44px touch target)
   ============================================================ */
@media (max-width: 768px) {

  .btn,
  .btn-sm,
  .header-actions .btn,
  .admin-users-section-header .btn,
  .page-view-actions .btn,
  .qb-session-actions .btn,
  .questions-header-actions .btn-sm,
  .modal-footer .btn {
    min-height: 44px !important;
    height: auto !important;
    padding: 10px 16px !important;
    font-size: 0.92rem !important;
    line-height: 1.3 !important;
    gap: 8px !important;
    border-radius: 10px !important;
    box-sizing: border-box;
  }

  .btn svg,
  .btn-sm svg {
    width: 18px !important;
    height: 18px !important;
  }

  .admin-users-section-header,
  .header-actions {
    gap: 10px !important;
  }

  .admin-users-section-header .header-actions {
    width: 100%;
    flex-direction: column;
    align-items: stretch !important;
  }

  .admin-users-section-header .header-actions .btn {
    width: 100%;
    white-space: normal;
  }

  .btn-card-delete,
  .btn-delete-q {
    min-height: 40px;
    padding: 8px 12px;
    font-size: 0.85rem;
    gap: 6px;
  }

  .btn-card-delete svg,
  .btn-delete-q svg {
    width: 16px;
    height: 16px;
  }

  .btn-add-option-pill,
  .btn-add-opt {
    min-height: 42px;
    height: auto;
    padding: 8px 16px;
    font-size: 0.88rem;
    gap: 6px;
  }

  .btn-add-option-pill svg,
  .btn-add-opt svg {
    width: 16px;
    height: 16px;
  }

  .modal-footer {
    gap: 10px !important;
  }

  .hierarchy-input,
  .form-input {
    min-height: 44px;
    font-size: 16px;
    /* prevents iOS zoom on focus */
  }
}

/* Mobile accordion cards (fees etc.): header, avatar, chevron, details */
.attend-student-card-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 11px;
  cursor: pointer;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}

.attend-student-avatar {
  width: 34px;
  height: 34px;
  border-radius: 9px;
  background: #eff6ff;
  color: #1d4ed8;
  font-size: 0.86rem;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  border: 1px solid #dbeafe;
}

.attend-student-card.is-present .attend-student-avatar {
  background: #dcfce7;
  color: #15803d;
  border-color: #bbf7d0;
}

.attend-student-card.is-absent .attend-student-avatar {
  background: #fee2e2;
  color: #b91c1c;
  border-color: #fecaca;
}

.attend-student-main-info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.attend-student-name-row {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}

.attend-student-name-row .attend-student-name {
  font-size: 0.88rem;
  font-weight: 700;
  color: #0f172a;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.attend-card-status-pill {
  display: inline-flex;
  align-items: center;
  padding: 1px 6px;
  border-radius: 999px;
  font-size: 0.62rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  flex-shrink: 0;
}

.attend-card-status-pill.pill-unmarked {
  background: #fef3c7;
  color: #b45309;
  border: 1px solid #fde68a;
}

.attend-card-status-pill.pill-present {
  background: #dcfce7;
  color: #15803d;
  border: 1px solid #bbf7d0;
}

.attend-student-submeta {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 0.72rem;
  font-weight: 600;
  color: #64748b;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.attend-submeta-dot {
  color: #cbd5e1;
}

.attend-card-right-controls {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}

.attend-accordion-chevron {
  width: 22px;
  height: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #94a3b8;
  transition: transform 0.2s ease, color 0.2s ease;
}

.attend-accordion-chevron svg {
  width: 15px;
  height: 15px;
}

.attend-student-card.is-expanded .attend-accordion-chevron {
  transform: rotate(180deg);
  color: #2563eb;
}

.attend-student-card-details {
  display: none;
  padding: 10px 12px 12px;
  border-top: 1px solid #f1f5f9;
  background: #f8fafc;
}

.attend-student-card.is-expanded .attend-student-card-details {
  display: block;
}

.attend-details-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin-bottom: 10px;
}

.attend-detail-cell {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  padding: 6px 9px;
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}

/* ===== Global loading / processing indicator ===== */
.app-busy-bar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  z-index: 100000;
  opacity: 0;
  pointer-events: none;
  overflow: hidden;
  transition: opacity .15s
}

.app-busy-bar.active {
  opacity: 1
}

.app-busy-bar::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: 40%;
  background: linear-gradient(90deg, #1d68ff, #6c8cff);
  border-radius: 3px;
  animation: appBusySlide 1.1s ease-in-out infinite
}

@keyframes appBusySlide {
  0% {
    left: -40%
  }

  100% {
    left: 100%
  }
}

.app-busy-overlay {
  position: fixed;
  inset: 0;
  z-index: 99999;
  display: none;
  align-items: center;
  justify-content: center;
  background: rgba(15, 23, 42, .28);
  -webkit-backdrop-filter: blur(1px);
  backdrop-filter: blur(1px);
  touch-action: none
}

.app-busy-overlay.active {
  display: flex
}

.app-busy-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 22px;
  background: #fff;
  border-radius: 14px;
  box-shadow: 0 10px 30px rgba(15, 23, 42, .25);
  font: 600 15px Inter, system-ui, sans-serif;
  color: #0f172a
}

.app-busy-spinner {
  width: 22px;
  height: 22px;
  border: 3px solid #dbe5ff;
  border-top-color: #1d68ff;
  border-radius: 50%;
  animation: appBusySpin .7s linear infinite
}

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

.fee-scope-info {
  margin: 4px 0 10px;
  font-size: .85rem;
  font-weight: 600;
  color: #475569
}

/* ===== Application Reusable Pagination ===== */
.app-pagination-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  padding: 14px 18px;
  background: #ffffff;
  border-top: 1px solid var(--border-color, #e2e8f0);
  border-radius: 0 0 10px 10px;
  font-size: 0.85rem;
  color: var(--text-secondary, #64748b);
  box-sizing: border-box;
}

.pagination-info {
  font-size: 0.84rem;
  color: var(--text-muted, #64748b);
}

.pagination-highlight {
  font-weight: 700;
  color: var(--text-primary, #0f172a);
}

.pagination-actions {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}

.pagination-size-wrap {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.82rem;
  color: var(--text-muted, #64748b);
}

.pagination-size-select {
  padding: 4px 8px;
  font-size: 0.82rem;
  border-radius: 6px;
  border: 1px solid var(--border-color, #cbd5e1);
  background: #ffffff;
  color: var(--text-primary, #0f172a);
  font-weight: 600;
  cursor: pointer;
  outline: none;
}

.pagination-size-select:focus {
  border-color: var(--primary, #1d68ff);
}

.pagination-nav-group {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.pagination-pages-list {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.pagination-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  min-width: 32px;
  height: 32px;
  padding: 0 10px;
  border-radius: 6px;
  border: 1px solid var(--border-color, #e2e8f0);
  background: #ffffff;
  color: var(--text-primary, #1e293b);
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s ease;
  user-select: none;
}

.pagination-btn:hover:not(:disabled) {
  background: #f8fafc;
  border-color: #cbd5e1;
  color: var(--primary, #1d68ff);
}

.pagination-btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
  border-color: var(--border-color, #e2e8f0);
}

.pagination-btn.active {
  background: var(--primary, #1d68ff) !important;
  color: #ffffff !important;
  border-color: var(--primary, #1d68ff) !important;
  font-weight: 700;
}

.pagination-ellipsis {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  color: var(--text-muted, #94a3b8);
  font-weight: 700;
}

@media (max-width: 640px) {
  .app-pagination-bar {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
    padding: 12px;
  }

  .pagination-info {
    text-align: center;
  }

  .pagination-actions {
    justify-content: space-between;
    width: 100%;
  }

  .pagination-nav-group {
    flex: 1;
    justify-content: flex-end;
  }

  .pagination-text {
    display: none;
  }

  .pagination-btn {
    min-width: 30px;
    height: 30px;
    padding: 0 6px;
  }
}

.questions-scroll-area {
  flex: 1;
  overflow-y: auto;
  padding: 16px 18px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

/* Empty Questions Placeholder */
.empty-questions-notice {
  text-align: center;
  padding: 80px 24px;
  color: var(--text-muted);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
}

.empty-notice-icon-box {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: #eef5ff;
  color: #7ba6ea;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 16px;
}

.empty-notice-icon-box svg {
  width: 26px;
  height: 26px;
}

.empty-questions-notice h3 {
  font-family: var(--font-heading);
  font-size: 1.05rem;
  font-weight: 700;
  color: #334155;
  margin-bottom: 6px;
}

.empty-questions-notice p {
  font-size: 0.86rem;
  color: #64748b;
  line-height: 1.6;
  max-width: 290px;
  margin: 0 auto;
}

/* ============================================================
   Question Card Styling
   ============================================================ */

.question-card {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  padding: 16px;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.04);
  display: flex;
  flex-direction: column;
  gap: 12px;
  transition: all 150ms ease;
  box-sizing: border-box;
}

.question-card:hover {
  border-color: #cbd5e1;
  box-shadow: 0 4px 12px rgba(15, 23, 42, 0.06);
}

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

.q-number-tag {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  font-weight: 700;
  color: #1d68ff;
  background: #eef2ff;
  border: 1px solid #c7d2fe;
  padding: 3px 8px;
  border-radius: 5px;
}

.card-actions {
  display: flex;
  align-items: center;
  gap: 6px;
}

.btn-card-delete,
.btn-delete-q {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 8px;
  font-family: var(--font-body);
  font-size: 0.74rem;
  font-weight: 600;
  color: #94a3b8;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 4px;
  cursor: pointer;
  transition: all 120ms ease;
}

.btn-card-delete:hover,
.btn-delete-q:hover {
  background: #fef2f2;
  color: #ef4444;
  border-color: #fecaca;
}

.btn-card-delete svg,
.btn-delete-q svg {
  width: 13px;
  height: 13px;
}

.q-textarea {
  width: 100%;
  box-sizing: border-box;
  background: #ffffff;
  border: 1px solid #cbd5e1;
  border-radius: 6px;
  padding: 10px 12px;
  font-family: var(--font-body);
  font-size: 0.88rem;
  color: #0f172a;
  line-height: 1.5;
  resize: vertical;
  min-height: 64px;
  outline: none;
  transition: border-color 150ms ease, box-shadow 150ms ease;
}

.q-textarea:focus {
  border-color: #1d68ff;
  box-shadow: 0 0 0 2px rgba(29, 104, 255, 0.18);
}

/* Option Rows */
.options-stack {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.option-item {
  display: flex;
  align-items: center;
  gap: 10px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 6px;
  padding: 6px 10px;
  transition: all 120ms ease;
  box-sizing: border-box;
}

.option-item.is-correct {
  background: #ecfdf5;
  border-color: #86efac;
  box-shadow: 0 0 0 1px #86efac;
}

.option-radio {
  cursor: pointer;
  accent-color: #10b981;
  width: 16px;
  height: 16px;
  margin: 0;
  flex-shrink: 0;
}

.option-letter {
  font-size: 0.82rem;
  font-weight: 700;
  color: #475569;
  width: 22px;
  flex-shrink: 0;
  user-select: none;
}

.option-input {
  flex: 1;
  min-width: 0;
  background: transparent;
  border: none;
  outline: none;
  font-size: 0.85rem;
  color: #0f172a;
  font-family: var(--font-body);
  padding: 2px 0;
}

.option-del-btn {
  width: 22px;
  height: 22px;
  border-radius: 4px;
  border: none;
  background: transparent;
  color: #94a3b8;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 120ms ease;
}

.option-del-btn:hover {
  background: #fee2e2;
  color: #ef4444;
}

.option-del-btn svg {
  width: 13px;
  height: 13px;
}

.card-bottom {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  margin-top: 4px;
  padding-top: 10px;
  border-top: 1px solid #f1f5f9;
}

.correct-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 0.74rem;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: 6px;
  background: #f1f5f9;
  color: #64748b;
  border: 1px solid #e2e8f0;
  transition: all 150ms ease;
}

.correct-badge svg {
  width: 12px;
  height: 12px;
  opacity: 0.7;
}

.correct-badge.is-set {
  background: #ecfdf5;
  color: #065f46;
  border-color: #a7f3d0;
}

.correct-badge.is-set svg {
  opacity: 1;
}

/* ============================================================
   Standalone Full-Page Login View
   ============================================================ */

.login-page-view {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  height: 100dvh;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  background: radial-gradient(circle at 12% 18%, rgba(99, 102, 241, 0.12) 0%, transparent 45%),
    radial-gradient(circle at 88% 82%, rgba(6, 182, 212, 0.10) 0%, transparent 45%),
    #f8fafc;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  padding: 20px 16px;
  box-sizing: border-box;
}

.login-card-container {
  margin: auto;
  background: rgba(255, 255, 255, 0.94);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(226, 232, 240, 0.9);
  border-radius: 20px;
  box-shadow: 0 24px 60px -12px rgba(15, 23, 42, 0.12), 0 0 0 1px rgba(255, 255, 255, 0.9);
  width: 100%;
  max-width: 410px;
  padding: 38px 34px;
  display: flex;
  flex-direction: column;
  animation: qbModalPop 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

.login-card-header {
  text-align: center;
  margin-bottom: 24px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.login-brand-logo {
  width: 50px;
  height: 50px;
  border-radius: 14px;
  background: var(--primary-gradient);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ffffff;
  margin-bottom: 14px;
  box-shadow: 0 8px 24px -4px rgba(79, 70, 229, 0.45);
}

.login-brand-logo svg {
  width: 26px;
  height: 26px;
}

.login-title {
  font-family: var(--font-heading);
  font-size: 1.6rem;
  font-weight: 800;
  color: var(--text-primary);
  margin-bottom: 4px;
  letter-spacing: -0.02em;
}

.login-subtitle {
  font-size: 0.85rem;
  color: var(--text-secondary);
}

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

.login-field-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
  text-align: left;
}

.form-label {
  display: block;
  font-size: 0.76rem;
  font-weight: 600;
  color: var(--text-secondary);
  margin-bottom: 4px;
}

.form-input {
  width: 100%;
  padding: 9px 13px;
  font-family: var(--font-body);
  font-size: 0.88rem;
  border: 1px solid var(--border-medium);
  border-radius: var(--radius-md);
  background: var(--bg-surface);
  color: var(--text-primary);
  outline: none;
  transition: border-color 150ms ease, box-shadow 150ms ease;
}

.form-input:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.12);
}

.password-input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
}

.password-input-wrapper .form-input {
  padding-right: 42px;
}

.btn-toggle-password {
  position: absolute;
  right: 6px;
  top: 50%;
  transform: translateY(-50%);
  background: transparent;
  border: none;
  padding: 6px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  color: var(--text-muted);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: color 150ms ease, background 150ms ease;
  line-height: 1;
  z-index: 10;
}

.btn-toggle-password:hover {
  color: var(--text-primary);
  background: var(--bg-subtle);
}

.btn-toggle-password:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 1px;
}

.btn-toggle-password svg {
  width: 18px;
  height: 18px;
  stroke: currentColor;
  stroke-width: 2;
  transition: stroke 150ms ease;
  pointer-events: none;
}

html.user-logged-in #loginPageView {
  display: none !important;
}

html.user-logged-in #appContainer {
  display: flex !important;
}

.btn-login-submit {
  width: 100%;
  padding: 11px;
  font-size: 0.92rem;
  font-weight: 600;
  margin-top: 6px;
}

/* ============================================================
   Modals (Question Bank & User Management)
   ============================================================ */

.qb-overlay {
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, 0.48);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  animation: qbFadeIn 0.15s ease;
}

@keyframes qbFadeIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

.qb-modal {
  background: var(--bg-surface);
  border-radius: var(--radius-lg);
  border: 1px solid var(--border-subtle);
  box-shadow: var(--shadow-xl);
  width: 100%;
  max-width: 680px;
  max-height: 85vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  animation: qbModalPop 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes qbModalPop {
  from {
    transform: scale(0.96);
    opacity: 0;
  }

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

.qb-modal-header {
  padding: 16px 20px;
  border-bottom: 1px solid var(--border-subtle);
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--bg-surface);
}

.btn-modal-close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border-radius: var(--radius-md);
  border: 1px solid transparent;
  background: transparent;
  color: var(--text-secondary);
  cursor: pointer;
  transition: all 150ms ease;
}

.btn-modal-close:hover {
  background: var(--bg-subtle);
  color: var(--text-primary);
  border-color: var(--border-subtle);
}

.btn-modal-close:active {
  transform: scale(0.94);
}

.btn-modal-close svg {
  width: 18px;
  height: 18px;
}

.btn-cancel-selection {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  padding: 0;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-subtle);
  background: #ffffff;
  color: var(--text-secondary);
  cursor: pointer;
  transition: all 150ms ease;
}

.btn-cancel-selection:hover {
  background: #fee2e2;
  color: var(--danger);
  border-color: #fecaca;
}

.btn-cancel-selection:active {
  transform: scale(0.94);
}

.btn-cancel-selection svg {
  width: 14px;
  height: 14px;
}

.qb-modal-body {
  padding: 18px 20px;
  overflow-y: auto;
  flex: 1;
  min-height: 200px;
}

.qb-loading,
.qb-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 40px 20px;
  color: var(--text-secondary);
  text-align: center;
  font-size: 0.9rem;
}

/* ============================================================
   Question Bank Hierarchy Filter Bar & Card Badges
   ============================================================ */

.qb-filter-bar {
  display: flex;
  align-items: flex-end;
  gap: 12px;
  background: #ffffff;
  border-radius: var(--radius-lg);
  border: 1px solid var(--border-subtle);
  padding: 12px 16px;
  margin-bottom: 16px;
  box-shadow: var(--shadow-xs);
  flex-wrap: wrap;
}

.qb-filter-group {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 140px;
}

.qb-search-group {
  flex: 1;
  min-width: 180px;
}

.qb-filter-label {
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--text-secondary);
}

.qb-filter-select,
.qb-search-input {
  padding: 6px 10px;
  font-family: var(--font-body);
  font-size: 0.8rem;
  border: 1px solid var(--border-medium);
  border-radius: var(--radius-sm);
  background: #ffffff;
  color: var(--text-primary);
  outline: none;
  transition: all 150ms ease;
  height: 32px;
}

.qb-filter-select:focus,
.qb-search-input:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 2px var(--primary-glow);
}

.qb-search-box {
  position: relative;
  display: flex;
  align-items: center;
}

.qb-search-box svg {
  position: absolute;
  left: 9px;
  color: var(--text-muted);
  pointer-events: none;
}

.qb-search-input {
  width: 100%;
  padding-left: 28px;
}

/* Question Bank Card Badges */
.qb-hierarchy-badges {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  margin: 3px 0;
}

.qb-badge {
  font-size: 0.7rem;
  font-weight: 600;
  padding: 2px 7px;
  border-radius: var(--radius-xs);
  line-height: 1.3;
}

.qb-badge-class {
  background: #eff6ff;
  color: #1d4ed8;
  border: 1px solid #bfdbfe;
}

.qb-badge-subject {
  background: #f0fdf4;
  color: #15803d;
  border: 1px solid #bbf7d0;
}

.qb-badge-chapter {
  background: #f8fafc;
  color: #475569;
  border: 1px solid #e2e8f0;
}

.qb-badge-category {
  background: #faf5ff;
  color: #7e22ce;
  border: 1px solid #e9d5ff;
}

.qb-badge-batch {
  background: #fffbeb;
  color: #b45309;
  border: 1px solid #fde68a;
}

.qb-badge-unassigned {
  background: #f1f5f9;
  color: #64748b;
  border: 1px solid #cbd5e1;
}

.cat-select.is-invalid,
.cat-input.is-invalid {
  border-color: var(--danger) !important;
  box-shadow: 0 0 0 2px rgba(239, 68, 68, 0.25) !important;
}



/* User Management Table */
.usersTableContainer,
#usersTableContainer {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  width: 100%;
}

.users-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.82rem;
}

.users-table th {
  text-align: left;
  padding: 10px 14px;
  font-weight: 700;
  color: var(--text-muted);
  border-bottom: 1.5px solid var(--border-subtle);
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  white-space: nowrap;
}

.users-table td {
  padding: 12px 14px;
  border-bottom: 1px solid var(--border-subtle);
  color: var(--text-primary);
  vertical-align: middle;
}

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

/* ============================================================
   Student Practice & Quiz Arena
   ============================================================ */

.quiz-arena {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: var(--bg-surface);
  overflow: hidden;
}

.quiz-arena-header {
  padding: 16px 20px;
  border-bottom: 1px solid var(--border-subtle);
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--bg-surface);
  flex-shrink: 0;
}

.quiz-title {
  font-family: var(--font-heading);
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--text-primary);
  margin: 0;
}

.quiz-subtitle {
  font-size: 0.78rem;
  color: var(--text-secondary);
  margin-top: 2px;
}

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

.quiz-score-banner {
  margin: 16px 20px 0 20px;
  padding: 14px 18px;
  border-radius: var(--radius-md);
  background: #ecfdf5;
  border: 1px solid #a7f3d0;
  display: flex;
  align-items: center;
  gap: 14px;
  animation: slideIn 0.25s ease;
}

.score-badge-circle {
  font-size: 2rem;
  line-height: 1;
}

.score-title {
  font-size: 1rem;
  font-weight: 700;
  color: #065f46;
  margin: 0;
}

.score-desc {
  font-size: 0.85rem;
  font-weight: 600;
  color: #047857;
  margin-top: 2px;
}

.quiz-scroll-area {
  flex: 1;
  padding: 20px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.quiz-card {
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  padding: 16px 18px;
  box-shadow: var(--shadow-sm);
  display: flex;
  flex-direction: column;
  gap: 12px;
  transition: all 150ms ease;
}

.quiz-card:hover {
  border-color: var(--border-medium);
  box-shadow: var(--shadow-md);
}

.quiz-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.quiz-q-num {
  font-family: var(--font-mono);
  font-size: 0.76rem;
  font-weight: 700;
  color: #4338ca;
  background: #eef2ff;
  padding: 2px 8px;
  border-radius: var(--radius-sm);
  border: 1px solid #c7d2fe;
}

.quiz-q-statement {
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--text-primary);
  line-height: 1.5;
}

.quiz-options-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 8px;
}

.quiz-opt-btn {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 12px;
  border-radius: var(--radius-md);
  border: 1px solid var(--border-subtle);
  background: var(--bg-subtle);
  cursor: pointer;
  text-align: left;
  font-family: var(--font-body);
  font-size: 0.84rem;
  font-weight: 500;
  color: var(--text-primary);
  transition: all 150ms ease;
}

.quiz-opt-btn:hover {
  border-color: var(--primary);
  background: #f0f7ff;
}

.quiz-opt-btn.is-selected {
  border-color: var(--primary);
  background: #eef2ff;
  color: var(--primary);
  font-weight: 600;
  box-shadow: 0 0 0 2px rgba(79, 70, 229, 0.2);
}

.quiz-opt-btn.is-correct-result {
  border-color: #10b981;
  background: #ecfdf5;
  color: #065f46;
  font-weight: 600;
}

.quiz-opt-btn.is-wrong-result {
  border-color: #ef4444;
  background: #fef2f2;
  color: #991b1b;
  text-decoration: line-through;
}

.quiz-opt-key {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: #ffffff;
  border: 1px solid var(--border-medium);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.75rem;
  font-weight: 700;
  flex-shrink: 0;
}

.quiz-opt-btn.is-selected .quiz-opt-key {
  background: var(--primary);
  color: #ffffff;
  border-color: var(--primary);
}

.quiz-opt-btn.is-correct-result .quiz-opt-key {
  background: #10b981;
  color: #ffffff;
  border-color: #10b981;
}

.quiz-opt-btn.is-wrong-result .quiz-opt-key {
  background: #ef4444;
  color: #ffffff;
  border-color: #ef4444;
}

.quiz-explanation-box {
  margin-top: 8px;
  padding: 10px 12px;
  border-radius: var(--radius-sm);
  background: #f8fafc;
  border-left: 3px solid var(--primary);
  font-size: 0.8rem;
  color: var(--text-secondary);
}

.quiz-empty-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 60px 20px;
  text-align: center;
  color: var(--text-secondary);
}

/* ============================================================
   Toast Notifications
   ============================================================ */

.toast-shelf {
  position: fixed;
  bottom: 24px;
  right: 24px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  z-index: 10000;
  pointer-events: none;
  max-width: 380px;
}

.toast-msg {
  pointer-events: auto;
  background: #ffffff;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: 11px 16px;
  display: flex;
  align-items: center;
  gap: 10px;
  box-shadow: 0 10px 28px -4px rgba(15, 23, 42, 0.12);
  font-size: 0.84rem;
  font-weight: 550;
  color: var(--text-primary);
  animation: slideIn 0.22s ease;
}

@keyframes slideIn {
  from {
    transform: translateX(100%);
    opacity: 0;
  }

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

.toast-msg.toast-success {
  border-left: 4px solid var(--success);
}

.toast-msg.toast-error {
  border-left: 4px solid var(--danger);
}

/* ============================================================
   Page View & Dedicated Views (Question Bank & User Management)
   ============================================================ */

.page-view {
  width: 100%;
  height: calc(100vh - 48px);
  overflow-y: auto;
  background: #f8fafc;
  padding: 16px 24px 40px;
  box-sizing: border-box;
}

.page-view-container {
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
  padding: 0 0 24px 0;
}

.page-view-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0;
  background: #ffffff;
  padding: 18px 24px;
  border-radius: var(--radius-md);
  border: 1px solid var(--border-subtle);
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.04);
}

.page-view-header-info {
  display: flex;
  align-items: center;
  gap: 16px;
}

.page-view-icon {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  background: #eef2ff;
  border: 1px solid #c7d2fe;
  color: var(--primary);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.page-view-icon svg {
  width: 24px;
  height: 24px;
}

.page-view-title {
  font-family: var(--font-heading);
  font-size: 1.35rem;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 3px;
  letter-spacing: -0.015em;
}

.page-view-desc {
  font-size: 0.84rem;
  color: var(--text-secondary);
}

/* Question Bank Filter & Hierarchy Bar */
.qb-filter-bar {
  display: flex;
  align-items: flex-end;
  gap: 14px;
  background: #ffffff;
  border: 1px solid var(--border-subtle, #e2e8f0);
  border-radius: 12px;
  padding: 18px 22px;
  margin-bottom: 20px;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.04);
  flex-wrap: wrap;
}

.qb-filter-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 140px;
}

.qb-search-group {
  flex: 1;
  min-width: 220px;
}

.qb-filter-label {
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-secondary, #64748b);
}

.qb-filter-select {
  height: 38px;
  padding: 0 12px;
  border: 1px solid var(--border-medium, #cbd5e1);
  border-radius: 8px;
  background: #ffffff;
  font-family: var(--font-body);
  font-size: 0.84rem;
  color: var(--text-primary, #0f172a);
  outline: none;
  transition: all 150ms ease;
}

.qb-filter-select:focus {
  border-color: var(--primary, #1d68ff);
  box-shadow: 0 0 0 2px var(--primary-glow, rgba(29, 104, 255, 0.15));
}

.qb-search-box {
  position: relative;
  display: flex;
  align-items: center;
}

.qb-search-box svg {
  position: absolute;
  left: 12px;
  color: var(--text-muted, #94a3b8);
  pointer-events: none;
}

.qb-search-input {
  width: 100%;
  height: 38px;
  padding: 0 12px 0 36px;
  border: 1px solid var(--border-medium, #cbd5e1);
  border-radius: 8px;
  background: #ffffff;
  font-family: var(--font-body);
  font-size: 0.84rem;
  color: var(--text-primary, #0f172a);
  outline: none;
  transition: all 150ms ease;
}

.qb-search-input:focus {
  border-color: var(--primary, #1d68ff);
  box-shadow: 0 0 0 2px var(--primary-glow, rgba(29, 104, 255, 0.15));
}

.qb-filter-bar #btnResetQBFilters {
  height: 38px;
  padding: 0 18px;
  border-radius: 8px;
  font-weight: 600;
  font-size: 0.84rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  background: #ffffff;
  border: 1px solid #cbd5e1;
  color: #334155;
  transition: all 150ms ease;
}

.qb-filter-bar #btnResetQBFilters:hover {
  background: #f8fafc;
  border-color: #94a3b8;
  color: #0f172a;
}

/* Question Bank Sessions List */
.qb-session-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
  width: 100%;
  box-sizing: border-box;
}

.qb-session-card {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  padding: 20px 24px;
  box-shadow: 0 1px 4px rgba(15, 23, 42, 0.04);
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  justify-content: flex-start !important;
  width: 100% !important;
  box-sizing: border-box !important;
  gap: 14px;
  transition: all 180ms ease;
}

.qb-session-card:hover {
  border-color: #cbd5e1;
  box-shadow: 0 6px 18px rgba(15, 23, 42, 0.07);
}

.qb-session-card-main {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  width: 100% !important;
  box-sizing: border-box !important;
  gap: 20px;
}

.qb-session-info {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  gap: 8px;
  flex: 1 1 auto !important;
  min-width: 0 !important;
  width: 100% !important;
}

.qb-session-name {
  font-family: var(--font-heading);
  font-size: 1.08rem;
  font-weight: 700;
  color: #0f172a;
  line-height: 1.4;
  letter-spacing: -0.01em;
  word-break: break-word;
  display: block;
  width: 100%;
  text-align: left !important;
}

/* Question Bank Hierarchy Badges (Class -> Subject -> Chapter -> Category -> Batch) */
.qb-hierarchy-badges {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 6px;
  flex-wrap: wrap;
  width: 100%;
  text-align: left;
}

.qb-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 0.76rem;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: 6px;
  white-space: nowrap;
  line-height: 1.35;
}

.qb-badge strong {
  font-weight: 700;
}

.qb-badge-sep {
  font-size: 0.82rem;
  font-weight: 700;
  color: #94a3b8;
  margin: 0 2px;
  display: inline-flex;
  align-items: center;
  user-select: none;
}

.qb-badge-class {
  background: #eff6ff;
  color: #1d4ed8;
  border: 1px solid #bfdbfe;
}

.qb-badge-subject {
  background: #f0fdf4;
  color: #15803d;
  border: 1px solid #bbf7d0;
}

.qb-badge-chapter {
  background: #f8fafc;
  color: #334155;
  border: 1px solid #cbd5e1;
}

.qb-badge-category {
  background: #faf5ff;
  color: #7e22ce;
  border: 1px solid #e9d5ff;
}

.qb-badge-batch {
  background: #fff7ed;
  color: #c2410c;
  border: 1px solid #fed7aa;
}

.qb-badge-unassigned {
  background: #f1f5f9;
  color: #64748b;
  border: 1px solid #e2e8f0;
}

.qb-session-meta {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 16px;
  font-size: 0.78rem;
  color: #64748b;
  margin-top: 2px;
  width: 100%;
  text-align: left;
}

.qb-session-meta span {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.qb-session-actions {
  display: flex !important;
  align-items: center !important;
  gap: 10px;
  flex-shrink: 0 !important;
  margin-left: auto;
}

.qb-session-actions .btn {
  height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font-size: 0.82rem;
  font-weight: 600;
  padding: 0 16px;
  border-radius: 8px;
  white-space: nowrap;
  box-sizing: border-box;
}

.qb-session-actions .btn-preview-session {
  background: #ffffff;
  border: 1px solid #cbd5e1;
  color: #334155;
  transition: all 150ms ease;
}

.qb-session-actions .btn-preview-session:hover {
  background: #f8fafc;
  border-color: #94a3b8;
  color: #0f172a;
}

.qb-session-actions .btn-load-session {
  background: #1d68ff;
  color: #ffffff;
  border: 1px solid #1d68ff;
  padding: 0 20px;
  transition: all 150ms ease;
}

.qb-session-actions .btn-load-session:hover {
  background: #1557e0;
  border-color: #1557e0;
}

.qb-session-actions .btn-del-session {
  width: 38px;
  height: 38px;
  padding: 0;
  color: #ef4444;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: all 150ms ease;
}

.qb-session-actions .btn-del-session:hover {
  background: #fee2e2;
  color: #dc2626;
  border-color: #fca5a5;
}

/* Expandable Inline Questions Preview in Question Bank */
.qb-questions-preview {
  margin-top: 8px;
  padding: 14px 16px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: var(--radius-sm);
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.qb-preview-item {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 6px;
  padding: 10px 14px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.qb-preview-hierarchy {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.73rem;
  font-weight: 600;
  color: #64748b;
  flex-wrap: wrap;
}

.qb-preview-qtext {
  font-size: 0.88rem;
  font-weight: 600;
  color: #0f172a;
}

.qb-preview-answer-row {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.78rem;
  margin-top: 2px;
}

.qb-preview-correct-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: #ecfdf5;
  color: #065f46;
  border: 1px solid #a7f3d0;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 4px;
}

.qb-loading,
.qb-empty {
  background: #ffffff;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: 50px 20px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  color: var(--text-secondary);
}

/* Separator for Hierarchy tag */
.q-h-sep {
  font-weight: 700;
  color: #94a3b8;
  margin: 0 2px;
}

/* User Management Table Styles */
.users-table-container {
  background: #ffffff;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.04);
}

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

.users-table th {
  background: #f8fafc;
  padding: 12px 16px;
  text-align: left;
  font-size: 0.74rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-secondary);
  border-bottom: 1px solid var(--border-subtle);
}

.users-table td {
  padding: 12px 16px;
  border-bottom: 1px solid var(--border-subtle);
  vertical-align: middle;
}

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

.users-table tr:hover td {
  background: #f8fafc;
}

/* ============================================================
   Utility Classes
   ============================================================ */

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

/* ============================================================
   Mobile & Responsive Adaptations (Screens <= 900px)
   ============================================================ */

@media (max-width: 900px) {

  html,
  body {
    overflow-x: hidden;
    overflow-y: auto;
    height: auto;
    min-height: 100vh;
    min-height: 100dvh;
  }

  body.sidebar-drawer-open {
    overflow: hidden !important;
    touch-action: none !important;
  }

  .app-container {
    flex-direction: column !important;
    height: 100vh !important;
    height: 100dvh !important;
    overflow: hidden !important;
    position: relative !important;
  }

  /* Mobile Topbar with Hamburger Menu */
  .mobile-topbar-brand {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    min-width: 0 !important;
  }

  .mobile-hamburger-btn {
    width: 38px !important;
    height: 38px !important;
    min-width: 38px !important;
    min-height: 38px !important;
    border-radius: 8px !important;
    border: 1px solid #cbd5e1 !important;
    background: #ffffff !important;
    color: #0f172a !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    flex-shrink: 0 !important;
    touch-action: manipulation !important;
    -webkit-tap-highlight-color: transparent !important;
    user-select: none !important;
    position: relative !important;
    z-index: 60 !important;
  }

  .mobile-hamburger-btn:active {
    background: #f1f5f9 !important;
  }

  .mobile-hamburger-btn svg {
    width: 20px !important;
    height: 20px !important;
    pointer-events: none !important;
  }

  .mobile-brand-title {
    font-family: var(--font-heading) !important;
    font-size: 1.05rem !important;
    font-weight: 700 !important;
    color: #0f172a !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  .main-topbar {
    height: 52px !important;
    min-height: 52px !important;
    padding: 0 14px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    background: #ffffff !important;
    border-bottom: 1px solid #e2e8f0 !important;
    position: relative !important;
    z-index: 50 !important;
    flex-shrink: 0 !important;
  }

  /* Off-Canvas Navigation Drawer */
  .app-sidebar {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    bottom: 0 !important;
    width: 280px !important;
    max-width: 85vw !important;
    height: 100vh !important;
    height: 100dvh !important;
    background: #0f2e5a !important;
    z-index: 1050 !important;
    transform: translateX(-100%) !important;
    transition: transform 0.28s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.28s !important;
    display: flex !important;
    flex-direction: column !important;
    padding: 20px 16px !important;
    box-shadow: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
  }

  .app-sidebar.mobile-open {
    transform: translateX(0) !important;
    visibility: visible !important;
    pointer-events: auto !important;
    box-shadow: 8px 0 36px rgba(15, 23, 42, 0.5) !important;
  }

  .sidebar-brand {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 0 0 20px 0 !important;
    width: 100% !important;
  }

  .sidebar-brand-left {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
  }

  .sidebar-brand-name {
    font-size: 1.05rem !important;
  }

  .sidebar-close-btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 34px !important;
    height: 34px !important;
    border-radius: 8px !important;
    border: none !important;
    background: rgba(255, 255, 255, 0.12) !important;
    color: #cbd5e1 !important;
    cursor: pointer !important;
    touch-action: manipulation !important;
    flex-shrink: 0 !important;
  }

  .sidebar-close-btn:active {
    background: rgba(255, 255, 255, 0.25) !important;
    color: #ffffff !important;
  }

  .sidebar-close-btn svg {
    width: 18px !important;
    height: 18px !important;
    pointer-events: none !important;
  }

  .sidebar-nav {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    gap: 8px !important;
  }

  .sidebar-nav-item {
    padding: 12px 16px !important;
    font-size: 0.92rem !important;
    width: 100% !important;
    border-radius: 10px !important;
    display: flex;
    align-items: center !important;
    gap: 12px !important;
    touch-action: manipulation !important;
    cursor: pointer !important;
  }

  .sidebar-nav-item[style*="display: none"],
  .sidebar-nav-item[hidden],
  .sidebar-nav-item.menu-hidden,
  .sidebar-nav-item.is-hidden {
    display: none !important;
  }

  .sidebar-nav-item svg {
    width: 18px !important;
    height: 18px !important;
    pointer-events: none !important;
  }

  .sidebar-footer {
    margin-top: auto !important;
    padding-top: 16px !important;
    border-top: 1px solid rgba(255, 255, 255, 0.1) !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
    width: 100% !important;
  }

  .sidebar-user-badge {
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
    width: 100% !important;
  }

  .sidebar-user-info {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    padding: 8px 10px !important;
    background: rgba(255, 255, 255, 0.07) !important;
    border-radius: 10px !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
  }

  .sidebar-user-avatar {
    width: 32px !important;
    height: 32px !important;
  }

  .sidebar-user-name {
    font-size: 0.85rem !important;
    color: #ffffff !important;
  }

  .sidebar-logout-btn {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    width: 100% !important;
    padding: 10px 12px !important;
    border-radius: 8px !important;
    touch-action: manipulation !important;
    cursor: pointer !important;
  }

  /* Backdrop Overlay - NEVER block clicks when closed */
  .sidebar-backdrop {
    display: none !important;
  }

  .sidebar-backdrop.active {
    display: block !important;
    position: fixed !important;
    inset: 0 !important;
    background: rgba(15, 23, 42, 0.6) !important;
    backdrop-filter: blur(4px) !important;
    -webkit-backdrop-filter: blur(4px) !important;
    z-index: 1040 !important;
    pointer-events: auto !important;
    touch-action: none !important;
  }

  /* Main Scrollable View Area */
  .app-main-content {
    flex: 1 !important;
    height: calc(100vh - 52px) !important;
    height: calc(100dvh - 52px) !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    -webkit-overflow-scrolling: touch !important;
    position: relative !important;
    display: flex !important;
    flex-direction: column !important;
  }

  .app-layout:not(.is-hidden) {
    display: flex !important;
    flex-direction: column !important;
    gap: 14px !important;
    padding: 12px 12px 30px 12px !important;
    height: auto !important;
    overflow: visible !important;
    box-sizing: border-box !important;
  }

  .canvas-pane {
    height: auto !important;
    min-height: auto !important;
    max-height: none !important;
    border-radius: 10px !important;
    border: 1px solid #e2e8f0 !important;
    flex-shrink: 0 !important;
    position: relative !important;
    overflow: hidden !important;
  }

  .canvas-header-bar {
    height: auto !important;
    min-height: 52px !important;
    padding: 8px 12px !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
  }

  .questions-pane {
    height: auto !important;
    min-height: 46vh !important;
    border-radius: 10px !important;
    border: 1px solid #e2e8f0 !important;
    overflow: visible !important;
  }

  .questions-header {
    height: auto !important;
    min-height: 52px !important;
    padding: 8px 12px !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
  }

  .questions-scroll-area {
    overflow-y: visible !important;
    max-height: none !important;
    padding: 12px !important;
  }

  .hierarchy-bar-grid {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 10px !important;
  }

  .question-card {
    padding: 14px !important;
    gap: 10px !important;
  }

  /* Question Bank & Dedicated Page Views on Tablet/Mobile */
  .page-view {
    padding: 14px 12px 36px 12px !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  .page-view-container {
    max-width: 100% !important;
    gap: 14px !important;
  }

  .page-view-header {
    padding: 14px 16px !important;
    border-radius: 12px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 12px !important;
  }

  .page-view-header-info {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
  }

  .page-view-icon {
    width: 40px !important;
    height: 40px !important;
    border-radius: 10px !important;
    flex-shrink: 0 !important;
  }

  .page-view-title {
    font-size: 1.1rem !important;
  }

  .page-view-desc {
    font-size: 0.78rem !important;
  }

  .page-view-actions {
    display: flex !important;
    justify-content: flex-end !important;
    width: 100% !important;
  }

  .qb-filter-bar {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 10px !important;
    padding: 14px 16px !important;
    border-radius: 12px !important;
    margin-bottom: 0 !important;
  }

  .qb-filter-group {
    width: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 4px !important;
  }

  .qb-filter-select,
  .qb-search-input,
  .qb-search-box {
    width: 100% !important;
    height: 36px !important;
    box-sizing: border-box !important;
  }

  .page-view-body {
    padding: 14px !important;
    border-radius: 12px !important;
    min-height: auto !important;
  }

  .qb-session-card {
    padding: 16px 18px !important;
    border-radius: 12px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    width: 100% !important;
    box-sizing: border-box !important;
    gap: 12px !important;
  }

  .qb-session-card-main {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 12px !important;
    width: 100% !important;
  }

  .qb-session-info {
    width: 100% !important;
    align-items: stretch !important;
  }

  .qb-session-name {
    font-size: 1rem !important;
    word-break: break-word !important;
    text-align: left !important;
  }

  .qb-hierarchy-badges {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 6px !important;
    width: 100% !important;
    justify-content: flex-start !important;
  }

  .qb-badge {
    font-size: 0.74rem !important;
    padding: 3px 8px !important;
  }

  .qb-session-actions {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
    width: 100% !important;
    justify-content: flex-start !important;
    margin-left: 0 !important;
    padding-top: 10px !important;
    border-top: 1px solid #f1f5f9 !important;
  }

  .qb-session-actions .btn {
    flex: 1 1 auto !important;
    height: 36px !important;
    font-size: 0.82rem !important;
    justify-content: center !important;
  }

  .qb-session-actions .btn-del-session {
    flex: 0 0 36px !important;
    width: 36px !important;
  }

  /* User Management on Tablet/Mobile */
  .admin-users-section {
    padding: 14px 16px !important;
    border-radius: 12px !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  .admin-users-section-header {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 12px !important;
    margin-bottom: 12px !important;
    padding-bottom: 12px !important;
  }

  .admin-users-section-title {
    font-size: 1.05rem !important;
  }

  .admin-users-section-desc {
    font-size: 0.78rem !important;
  }

  .header-actions {
    display: flex !important;
    gap: 8px !important;
    width: 100% !important;
  }

  .header-actions .btn {
    flex: 1 !important;
    justify-content: center !important;
    height: 34px !important;
  }

  .table-responsive {
    width: 100% !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }

  .users-table {
    width: 100% !important;
    min-width: 480px !important;
    font-size: 0.82rem !important;
  }

  .users-table th,
  .users-table td {
    padding: 9px 10px !important;
  }

  /* Create User Modal on Tablet/Mobile */
  .modal-backdrop {
    padding: 12px !important;
  }

  .modal-card {
    max-width: 100% !important;
    max-height: 92vh !important;
    max-height: 92dvh !important;
    border-radius: 14px !important;
    overflow-y: auto !important;
  }

  .modal-header {
    padding: 14px 16px !important;
  }

  .modal-title {
    font-size: 1.05rem !important;
  }

  .modal-subtitle {
    font-size: 0.78rem !important;
  }

  .modal-form {
    padding: 14px 16px !important;
    gap: 12px !important;
  }

  .modal-footer {
    padding: 12px 16px !important;
    flex-direction: column-reverse !important;
    gap: 8px !important;
  }

  .modal-footer .btn {
    width: 100% !important;
    justify-content: center !important;
    height: 38px !important;
  }

  /* Toast shelf on mobile */
  .toast-shelf {
    left: 14px !important;
    right: 14px !important;
    bottom: 14px !important;
    max-width: none !important;
  }
}

/* ============================================================
   Mobile Phones (Screens <= 640px)
   ============================================================ */

@media (max-width: 640px) {
  .main-topbar {
    height: 50px !important;
    min-height: 50px !important;
    padding: 0 10px !important;
  }

  .mobile-brand-title {
    font-size: 0.98rem !important;
  }

  #exportDropdownMenu {
    right: 0 !important;
    left: auto !important;
    max-width: calc(100vw - 20px) !important;
  }

  .app-layout:not(.is-hidden) {
    padding: 10px 8px 24px 8px !important;
    gap: 12px !important;
  }

  .canvas-pane {
    height: auto !important;
    min-height: auto !important;
    border-radius: 10px !important;
  }

  .canvas-header-bar {
    padding: 8px 10px !important;
  }

  .canvas-toolbar,
  .toolbar-group {
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    flex-wrap: wrap !important;
  }

  .pane-header-title {
    font-size: 0.95rem !important;
  }

  .selection-action-bar {
    max-width: calc(100% - 20px) !important;
    flex-wrap: wrap !important;
  }

  .questions-pane {
    min-height: 44vh !important;
    border-radius: 10px !important;
  }

  .questions-header {
    padding: 8px 10px !important;
  }

  .header-title {
    font-size: 0.95rem !important;
  }

  .questions-header-actions {
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
  }

  .question-hierarchy-bar {
    padding: 10px 12px !important;
  }

  .hierarchy-bar-grid {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 8px !important;
  }

  .question-card {
    padding: 11px 10px !important;
    gap: 8px !important;
    border-radius: 8px !important;
  }

  .q-textarea {
    font-size: 0.83rem !important;
    padding: 7px 9px !important;
    min-height: 54px !important;
  }

  .option-item {
    padding: 5px 6px !important;
    gap: 6px !important;
  }

  .option-letter {
    font-size: 0.74rem !important;
    width: 16px !important;
  }

  .option-input {
    font-size: 0.8rem !important;
  }

  .correct-badge {
    font-size: 0.7rem !important;
    padding: 3px 7px !important;
  }

  .empty-upload-box {
    padding: 20px 12px !important;
    width: 92% !important;
    max-width: 320px !important;
  }

  .upload-icon-circle {
    width: 40px !important;
    height: 40px !important;
    margin-bottom: 8px !important;
  }

  .upload-icon-circle svg {
    width: 20px !important;
    height: 20px !important;
  }

  .empty-title {
    font-size: 1rem !important;
    margin-bottom: 3px !important;
  }

  .empty-desc {
    font-size: 0.74rem !important;
    line-height: 1.38 !important;
    margin-bottom: 10px !important;
  }

  .btn-browse-main {
    padding: 7px 16px !important;
    font-size: 0.78rem !important;
  }

  .upload-formats-hint {
    margin-top: 6px !important;
    font-size: 0.66rem !important;
  }

  .page-view {
    padding: 10px 8px 30px 8px !important;
  }

  .page-view-header {
    padding: 10px 12px !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 10px !important;
  }

  .page-view-title {
    font-size: 1rem !important;
  }

  .page-view-desc {
    font-size: 0.72rem !important;
  }

  .qb-filter-bar {
    padding: 10px 12px !important;
    gap: 8px !important;
  }

  .page-view-body {
    padding: 10px !important;
  }

  .qb-session-card {
    padding: 14px !important;
    align-items: stretch !important;
    width: 100% !important;
  }

  .qb-session-actions {
    flex-direction: row !important;
    flex-wrap: wrap !important;
  }

  .qb-session-actions .btn {
    flex: 1 1 auto !important;
  }

  .qb-session-actions .btn-del-session {
    flex: 0 0 36px !important;
    width: 36px !important;
  }

  .admin-users-section {
    padding: 10px 12px !important;
  }

  .header-actions {
    flex-direction: column !important;
  }

  .header-actions .btn {
    width: 100% !important;
  }

  .form-grid-2 {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 10px !important;
  }

  .quiz-arena-header {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 10px !important;
    padding: 12px 14px !important;
  }

  .quiz-header-actions {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 6px !important;
    width: 100% !important;
    justify-content: flex-end !important;
  }

  .quiz-scroll-area {
    padding: 12px 10px !important;
  }

  .quiz-score-banner {
    margin: 10px 10px 0 10px !important;
    padding: 10px 12px !important;
  }

  .quiz-opt-btn {
    padding: 8px 10px !important;
    font-size: 0.8rem !important;
  }

  .login-card-container {
    padding: 24px 16px !important;
    border-radius: 16px !important;
    max-width: 360px !important;
  }

  .login-title {
    font-size: 1.25rem !important;
  }

  .login-subtitle {
    font-size: 0.75rem !important;
  }

  .form-input {
    height: 38px !important;
    font-size: 0.82rem !important;
  }

  .btn-login-submit {
    height: 40px !important;
    font-size: 0.88rem !important;
  }
}

/* ============================================================
   Small / Compact Phones (Screens <= 480px)
   ============================================================ */

@media (max-width: 480px) {
  .main-topbar {
    height: 48px !important;
    min-height: 48px !important;
    padding: 0 8px !important;
  }

  .mobile-hamburger-btn {
    width: 34px !important;
    height: 34px !important;
    min-width: 34px !important;
    min-height: 34px !important;
  }

  .mobile-brand-title {
    font-size: 0.92rem !important;
  }

  .app-layout:not(.is-hidden) {
    padding: 8px 6px 20px 6px !important;
    gap: 10px !important;
  }

  .canvas-pane {
    height: auto !important;
    min-height: auto !important;
  }

  .questions-pane {
    min-height: 42vh !important;
  }

  .canvas-header-bar,
  .questions-header {
    padding: 6px 8px !important;
  }

  .pane-header-title,
  .header-title {
    font-size: 0.9rem !important;
  }

  .questions-header-actions {
    gap: 4px !important;
  }

  .questions-header-actions .btn-sm {
    height: 28px !important;
    padding: 0 6px !important;
    font-size: 0.72rem !important;
  }

  .btn-sm {
    height: 30px !important;
    padding: 0 8px !important;
    font-size: 0.74rem !important;
  }

  .empty-upload-box {
    padding: 14px 10px !important;
    max-width: 290px !important;
  }

  .empty-title {
    font-size: 0.92rem !important;
  }

  .empty-desc {
    font-size: 0.7rem !important;
    margin-bottom: 8px !important;
  }

  .btn-browse-main {
    padding: 6px 14px !important;
    font-size: 0.74rem !important;
  }

  .question-hierarchy-bar {
    padding: 8px 8px !important;
  }

  .hierarchy-bar-grid {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 6px !important;
  }

  .hierarchy-input {
    height: 34px !important;
    font-size: 0.8rem !important;
  }

  .hierarchy-label {
    font-size: 0.68rem !important;
  }

  .question-card {
    padding: 8px 8px !important;
    gap: 6px !important;
  }

  .card-top {
    gap: 6px !important;
  }

  .q-textarea {
    font-size: 0.8rem !important;
    padding: 6px 8px !important;
    min-height: 48px !important;
  }

  .option-item {
    padding: 4px 6px !important;
    gap: 5px !important;
  }

  .option-letter {
    font-size: 0.7rem !important;
    width: 14px !important;
  }

  .option-input {
    font-size: 0.76rem !important;
  }

  .page-view {
    padding: 8px 6px 24px 6px !important;
  }

  .page-view-header {
    padding: 8px 10px !important;
  }

  .qb-filter-bar {
    padding: 8px 10px !important;
    gap: 6px !important;
  }

  .qb-filter-select,
  .qb-search-input {
    height: 34px !important;
    font-size: 0.78rem !important;
  }

  .users-table {
    font-size: 0.76rem !important;
  }

  .users-table th,
  .users-table td {
    padding: 7px 8px !important;
  }

  .modal-card {
    width: 96% !important;
    border-radius: 12px !important;
  }

  .modal-header {
    padding: 10px 12px !important;
  }

  .modal-form {
    padding: 10px 12px !important;
    gap: 10px !important;
  }

  .modal-footer {
    padding: 10px 12px !important;
  }

  .form-grid-2 {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 8px !important;
  }

  .login-page-view {
    padding: 12px 8px !important;
  }

  .login-card-container {
    padding: 20px 14px !important;
    border-radius: 14px !important;
  }
}

/* ============================================================
   New Modules Design System: Schools, Students, Assessments & Fees
   ============================================================ */

.form-grid-3 {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

@media (max-width: 768px) {
  .form-grid-3 {
    grid-template-columns: minmax(0, 1fr);
    gap: 8px;
  }
}

.modal-card-lg {
  max-width: 820px !important;
  width: 94%;
}

.modal-card-xl {
  max-width: 1080px !important;
  width: 95vw !important;
  max-height: 90vh !important;
}

.modal-card-fullscreen {
  width: 96vw !important;
  max-width: 980px !important;
  height: 90vh !important;
  max-height: 860px !important;
  display: flex !important;
  flex-direction: column !important;
  padding: 0 !important;
  overflow: hidden !important;
  border-radius: 14px !important;
  box-shadow: 0 20px 40px -10px rgba(15, 23, 42, 0.22) !important;
  background: #ffffff !important;
}

/* Assessment Player */
.assessment-player-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 24px;
  background: var(--bg-surface, #ffffff);
  border-bottom: 1px solid var(--border-color, #e2e8f0);
  flex-shrink: 0;
  gap: 16px;
}

.player-info {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.player-info .player-title {
  margin: 0;
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--text-primary, #0f172a);
  line-height: 1.3;
}

.player-info .player-meta {
  font-size: 0.82rem;
  color: var(--text-secondary, #64748b);
  line-height: 1.4;
}

.player-header-right {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
}

.player-timer-box {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: #f8fafc;
  color: #1e293b;
  border: 1.5px solid #cbd5e1;
  padding: 6px 14px;
  border-radius: 9999px;
  font-family: var(--font-mono, monospace);
  font-weight: 700;
  font-size: 0.95rem;
  white-space: nowrap;
  transition: all 0.2s ease;
}

.player-timer-box svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  color: inherit;
}

.player-timer-box.timer-warning {
  background: #fffbeb;
  color: #b45309;
  border-color: #fde68a;
}

.player-timer-box.timer-danger {
  background: #fef2f2;
  color: #dc2626;
  border-color: #fecaca;
  animation: pulse 1.5s infinite;
}

.assessment-player-body {
  flex: 1;
  overflow-y: auto;
  padding: 20px 24px 28px 24px;
  background: var(--bg-canvas, #f8fafc);
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-height: 0;
}

.player-question-card {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  padding: 18px 20px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.03);
  display: flex;
  flex-direction: column;
}

.assessment-player-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 24px;
  background: var(--bg-surface, #ffffff);
  border-top: 1px solid var(--border-color, #e2e8f0);
  flex-shrink: 0;
}

/* Assessment Cards */
.assessments-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(360px, minmax(0, 1fr)));
  gap: 20px;
}

.assessment-card {
  background: var(--bg-surface, #ffffff);
  border: 1px solid var(--border-color, #e2e8f0);
  border-radius: 12px;
  padding: 20px;
  display: flex;
  flex-direction: column;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.05);
  transition: transform 0.2s, box-shadow 0.2s, border-color 0.2s;
}

.assessment-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px -4px rgba(15, 23, 42, 0.08);
  border-color: #cbd5e1;
}

.assessment-card-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}

.assessment-card-title {
  margin: 0;
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--text-primary, #0f172a);
}

.badge-batch {
  display: inline-block;
  background: #eff6ff;
  color: #1d4ed8;
  border: 1px solid #bfdbfe;
  padding: 2px 8px;
  border-radius: 6px;
  font-size: 0.75rem;
  font-weight: 600;
}

.assessment-card-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 14px;
  font-size: 0.82rem;
  color: var(--text-secondary, #64748b);
}

.assessment-card-meta span {
  display: flex;
  align-items: center;
  gap: 4px;
}

.assessment-card-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  margin-top: auto;
  padding-top: 10px;
  border-top: 1px solid var(--border-color, #f1f5f9);
}

/* Question Picker Box */
.section-label-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 6px;
}

.badge-count {
  background: #f1f5f9;
  color: var(--primary, #1d68ff);
  padding: 2px 8px;
  border-radius: 9999px;
  font-size: 0.75rem;
  font-weight: 700;
}

.question-picker-box {
  max-height: 260px;
  overflow-y: auto;
  border: 1px solid var(--border-color, #e2e8f0);
  border-radius: 8px;
  padding: 10px;
  background: var(--bg-surface, #ffffff);
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.picker-q-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 6px;
  border: 1px solid #f1f5f9;
  background: #f8fafc;
  cursor: pointer;
}

.picker-q-item:hover {
  background: #eff6ff;
  border-color: #bfdbfe;
}

.picker-q-item input[type="checkbox"] {
  margin-top: 3px;
  cursor: pointer;
}

.picker-q-details {
  flex: 1;
  font-size: 0.85rem;
  color: var(--text-primary, #0f172a);
}

.picker-q-meta {
  font-size: 0.75rem;
  color: var(--text-secondary, #64748b);
  margin-top: 3px;
  display: flex;
  gap: 8px;
}

/* Fee Management Stats & Tables */
.fee-stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, minmax(0, 1fr)));
  gap: 14px;
  margin-bottom: 16px;
}

.fee-stat-card {
  border-radius: 12px;
  padding: 18px 20px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  border: 1px solid var(--border-color, #e2e8f0);
}

.fee-stat-card.card-paid {
  background: #f0fdf4;
  border-color: #bbf7d0;
}

.fee-stat-card.card-paid .fee-stat-label {
  color: #166534;
}

.fee-stat-card.card-paid .fee-stat-value {
  color: #15803d;
}

.fee-stat-card.card-pending {
  background: #fef2f2;
  border-color: #fecaca;
}

.fee-stat-card.card-pending .fee-stat-label {
  color: #991b1b;
}

.fee-stat-card.card-pending .fee-stat-value {
  color: #b91c1c;
}

.fee-stat-label {
  font-size: 0.82rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.fee-stat-value {
  font-size: 1.6rem;
  font-weight: 700;
  font-family: var(--font-mono, monospace);
}

.status-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 3px 10px;
  border-radius: 9999px;
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  white-space: nowrap;
}

.status-badge.status-live,
.status-badge.live {
  background: #ecfdf5;
  color: #065f46;
  border: 1px solid #a7f3d0;
}

.status-badge.status-upcoming,
.status-badge.upcoming {
  background: #fffbeb;
  color: #92400e;
  border: 1px solid #fde68a;
}

.status-badge.status-expired,
.status-badge.expired {
  background: #fef2f2;
  color: #991b1b;
  border: 1px solid #fecaca;
}

.status-badge.status-paid,
.status-badge.paid {
  background: #dcfce7;
  color: #15803d;
  border: 1px solid #86efac;
}

.status-badge.status-pending,
.status-badge.pending {
  background: #fee2e2;
  color: #b91c1c;
  border: 1px solid #fca5a5;
}

/* Class Badge - strictly keep 'th', 'st', 'nd', 'rd' in lowercase */
.class-badge,
.status-badge.class-badge,
.badge-class,
.qb-badge-class {
  text-transform: none !important;
  font-family: inherit;
  white-space: nowrap !important;
}

/* Ensure Class & Batch cell never wraps onto multiple lines */
.cell-class-batch {
  white-space: nowrap !important;
}

.class-batch-wrap {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  flex-wrap: nowrap !important;
  white-space: nowrap !important;
}

/* Fee Action Toggle Buttons */
.btn-fee-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font-size: 0.8rem;
  font-weight: 600;
  padding: 5px 12px;
  border-radius: 7px;
  cursor: pointer;
  transition: all 0.2s ease;
  min-width: 135px;
  border: none;
  outline: none;
  white-space: nowrap;
}

/* Mark as Received Button (When status is Pending) */
.btn-fee-mark-received,
.btn-fee-pay {
  background: #16a34a;
  color: #ffffff !important;
  border: 1px solid #15803d;
  box-shadow: 0 1px 3px rgba(22, 163, 74, 0.2);
}

.btn-fee-mark-received:hover,
.btn-fee-pay:hover {
  background: #15803d;
  border-color: #166534;
  color: #ffffff !important;
  transform: translateY(-1px);
  box-shadow: 0 4px 8px rgba(22, 163, 74, 0.3);
}

.btn-fee-mark-received:active,
.btn-fee-pay:active {
  transform: translateY(0);
}

/* Mark as Pending Button (When status is Paid - can toggle back if clicked by mistake) */
.btn-fee-mark-pending,
.btn-fee-paid {
  background: #fffbeb;
  color: #b45309 !important;
  border: 1px solid #fcd34d;
  box-shadow: 0 1px 2px rgba(245, 158, 11, 0.1);
}

.btn-fee-mark-pending:hover,
.btn-fee-paid:hover {
  background: #fef3c7;
  border-color: #f59e0b;
  color: #92400e !important;
  transform: translateY(-1px);
  box-shadow: 0 3px 6px rgba(245, 158, 11, 0.2);
}

.btn-fee-mark-pending:active,
.btn-fee-paid:active {
  transform: translateY(0);
}

.status-badge.active {
  background: #eff6ff;
  color: #1d4ed8;
  border: 1px solid #93c5fd;
}

.fee-student-info-box {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  padding: 12px 14px;
  font-size: 0.88rem;
  color: var(--text-primary, #0f172a);
  display: flex;
  flex-direction: column;
  gap: 6px;
  justify-content: center;
}

.fee-student-info-box .fee-info-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.fee-student-info-box .fee-info-student-title {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.fee-student-info-box .fee-info-name {
  font-weight: 600;
  font-size: 0.92rem;
  color: #0f172a;
}

.fee-student-info-box .fee-info-meta {
  font-size: 0.78rem;
  color: #0369a1;
  background: #e0f2fe;
  padding: 2px 7px;
  border-radius: 4px;
  font-weight: 600;
}

.fee-student-info-box .fee-info-amount {
  font-weight: 700;
  font-size: 1.05rem;
  color: #0f766e;
  font-family: var(--font-mono, monospace);
  white-space: nowrap;
}

.fee-student-info-box .fee-info-sub {
  font-size: 0.82rem;
  color: #64748b;
  display: flex;
  align-items: center;
  gap: 6px;
}

.fee-student-info-box .fee-info-sub strong {
  color: #334155;
  font-weight: 600;
}

/* Permissions Checklist */
.permissions-checklist {
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-height: 340px;
  overflow-y: auto;
  padding: 4px;
}

.perm-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  padding: 10px 14px;
  cursor: pointer;
  transition: background 0.15s;
}

.perm-item:hover {
  background: #f1f5f9;
}

.perm-item input[type="checkbox"] {
  margin-top: 4px;
  width: 16px;
  height: 16px;
  cursor: pointer;
}

.perm-item strong {
  display: block;
  font-size: 0.9rem;
  color: var(--text-primary, #0f172a);
}

.perm-item span {
  display: block;
  font-size: 0.78rem;
  color: var(--text-secondary, #64748b);
  margin-top: 2px;
}

/* CSV Template Notice */
.csv-template-notice {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  background: #eff6ff;
  border: 1px solid #bfdbfe;
  border-radius: 10px;
  padding: 12px 16px;
  font-size: 0.85rem;
  color: #1e40af;
  margin-bottom: 12px;
}

.csv-template-notice p {
  margin: 4px 0 0 0;
  color: #1d4ed8;
  font-size: 0.8rem;
}

.bulk-status-box {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  padding: 10px 14px;
  font-size: 0.85rem;
  color: var(--text-primary, #0f172a);
}

/* Option Input Row */
.option-input-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
}

.option-input-row .option-tag {
  font-weight: 700;
  font-family: var(--font-mono, monospace);
  width: 24px;
  text-align: center;
  color: var(--text-secondary, #64748b);
}

.option-input-row input[type="text"] {
  flex: 1;
}

.option-correct-radio {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 0.78rem;
  color: var(--text-secondary, #64748b);
  cursor: pointer;
  white-space: nowrap;
}

/* ============================================================
   Comprehensive Mobile & Tablet Layout System (All Pages)
   ============================================================ */

@media (max-width: 768px) {

  /* Prevent horizontal window scroll across all pages */
  html,
  body {
    overflow-x: hidden !important;
    width: 100% !important;
    max-width: 100% !important;
    position: relative !important;
  }

  .app-container,
  .app-main-content {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: hidden !important;
    box-sizing: border-box !important;
  }

  /* Page Views & Containers */
  .page-view {
    padding: 12px 10px 32px 10px !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    overflow-x: hidden !important;
  }

  .page-view-container {
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
    gap: 12px !important;
    box-sizing: border-box !important;
  }

  /* Page Headers & Action Bars */
  .page-view-header {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    padding: 12px 14px !important;
    gap: 12px !important;
    border-radius: 12px !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
  }

  .page-view-header-info {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    width: 100% !important;
    min-width: 0 !important;
  }

  .page-view-icon {
    width: 32px !important;
    height: 32px !important;
    min-width: 32px !important;
    max-width: 32px !important;
    flex: 0 0 32px !important;
    border-radius: 8px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-sizing: border-box !important;
  }

  .page-view-icon svg {
    width: 16px !important;
    height: 16px !important;
    flex-shrink: 0 !important;
  }

  .page-view-header-info>div:not(.page-view-icon) {
    min-width: 0 !important;
    flex: 1 1 auto !important;
  }

  .page-view-title {
    font-size: 1.05rem !important;
    font-weight: 700 !important;
    margin: 0 !important;
    word-break: break-word !important;
    line-height: 1.25 !important;
  }

  .page-view-desc {
    font-size: 0.78rem !important;
    margin: 2px 0 0 0 !important;
    line-height: 1.35 !important;
    color: var(--text-secondary, #64748b) !important;
  }

  /* Header Actions - Wrap nicely without horizontal overflow */
  .page-view-actions {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: stretch !important;
    gap: 8px !important;
    width: 100% !important;
    max-width: 100% !important;
    justify-content: flex-start !important;
    box-sizing: border-box !important;
  }

  .page-view-actions .btn {
    flex: 1 1 calc(50% - 6px) !important;
    min-width: 0 !important;
    font-size: 0.8rem !important;
    padding: 8px 10px !important;
    height: auto !important;
    min-height: 36px !important;
    white-space: normal !important;
    text-align: center !important;
    justify-content: center !important;
    box-sizing: border-box !important;
  }

  .page-view-actions .btn svg {
    flex-shrink: 0 !important;
    width: 15px !important;
    height: 15px !important;
  }

  /* Filter Bars across All Pages */
  .qb-filter-bar {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 10px !important;
    padding: 12px 14px !important;
    border-radius: 12px !important;
    width: 100% !important;
    max-width: 100% !important;
    margin-bottom: 14px !important;
    box-sizing: border-box !important;
  }

  .qb-filter-bar[style*="display: none"],
  .qb-filter-bar.hidden {
    display: none !important;
  }

  .qb-filter-group {
    width: 100% !important;
    min-width: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 4px !important;
  }

  .qb-filter-group[style*="display: none"],
  .qb-filter-group.hidden {
    display: none !important;
  }

  .qb-filter-select,
  .qb-search-input,
  .qb-search-box {
    width: 100% !important;
    min-width: 0 !important;
    height: 38px !important;
    box-sizing: border-box !important;
    font-size: 0.85rem !important;
  }

  /* Page View Body & Cards Container */
  .page-view-body,
  .admin-users-section {
    padding: 12px !important;
    border-radius: 12px !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    overflow-x: hidden !important;
  }

  /* Assessment Grid & Cards on Mobile */
  .assessments-grid {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 14px !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  .assessment-card {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    padding: 16px 14px !important;
    border-radius: 12px !important;
    overflow: hidden !important;
  }

  /* Tables & Horizontal Scroll Wrappers */
  .table-responsive {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    box-sizing: border-box !important;
    margin: 0 !important;
    border-radius: 8px !important;
  }

  .users-table {
    width: 100% !important;
    min-width: 520px !important;
    font-size: 0.8rem !important;
  }

  .users-table th,
  .users-table td {
    padding: 8px 10px !important;
    white-space: nowrap !important;
  }

  /* Fee Summary Cards */
  .fee-stats-grid {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 10px !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  .fee-stat-card {
    padding: 14px 16px !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  /* Question Bank Session Cards */
  .qb-session-card {
    padding: 14px 12px !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  .qb-session-actions {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
    width: 100% !important;
  }

  .qb-session-actions .btn {
    flex: 1 1 calc(50% - 6px) !important;
    min-width: 120px !important;
    justify-content: center !important;
    box-sizing: border-box !important;
  }

  .qb-session-actions .btn-del-session {
    flex: 0 0 38px !important;
    min-width: 38px !important;
    width: 38px !important;
  }

  /* Modals on Mobile & Tablet */
  .modal-backdrop {
    padding: 10px 8px !important;
    align-items: center !important;
    justify-content: center !important;
    box-sizing: border-box !important;
  }

  .modal-card,
  .modal-card-lg,
  .modal-card-xl,
  .modal-card-fullscreen {
    width: 100% !important;
    max-width: 100% !important;
    max-height: 94vh !important;
    max-height: 94dvh !important;
    margin: 0 auto !important;
    border-radius: 12px !important;
    box-sizing: border-box !important;
    overflow-y: auto !important;
  }

  .modal-header {
    display: flex !important;
    align-items: center !important;
    padding: 12px 14px !important;
    gap: 10px !important;
    box-sizing: border-box !important;
  }

  .modal-header-icon {
    width: 32px !important;
    height: 32px !important;
    min-width: 32px !important;
    max-width: 32px !important;
    flex: 0 0 32px !important;
    border-radius: 8px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-sizing: border-box !important;
  }

  .modal-header-icon svg {
    width: 16px !important;
    height: 16px !important;
    flex-shrink: 0 !important;
  }

  .modal-header>div:not(.modal-header-icon) {
    min-width: 0 !important;
    flex: 1 1 auto !important;
  }

  .modal-close-btn {
    width: 30px !important;
    height: 30px !important;
    min-width: 30px !important;
    max-width: 30px !important;
    flex: 0 0 30px !important;
    padding: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 6px !important;
  }

  .modal-close-btn svg {
    width: 16px !important;
    height: 16px !important;
  }

  .modal-title {
    font-size: 1.05rem !important;
    margin: 0 !important;
    line-height: 1.25 !important;
  }

  .modal-subtitle {
    font-size: 0.76rem !important;
    margin: 2px 0 0 0 !important;
    line-height: 1.35 !important;
  }

  .modal-form {
    padding: 12px 14px !important;
    gap: 12px !important;
    box-sizing: border-box !important;
  }

  .modal-footer {
    padding: 12px 14px !important;
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
    box-sizing: border-box !important;
  }

  .modal-footer .btn {
    flex: 1 1 calc(50% - 6px) !important;
    min-width: 110px !important;
    justify-content: center !important;
    box-sizing: border-box !important;
  }

  .form-grid-2,
  .form-grid-3,
  .modal-form div[style*="grid-template-columns: minmax(0, 1fr) minmax(0, 1fr)"] {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 10px !important;
  }

  /* Assessment Card Action Button Responsive Handling */
  .assessment-card div[style*="grid-template-columns"] {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 8px !important;
  }

  .assessment-card .btn {
    font-size: 0.82rem !important;
    padding: 7px 10px !important;
    box-sizing: border-box !important;
  }

  .assessment-card div[style*="display:flex; gap:8px; margin-top:8px"] {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
  }

  .assessment-card .btn-card-test-history,
  .assessment-card .btn-card-test-result {
    flex: 1 1 calc(50% - 24px) !important;
    min-width: 105px !important;
    justify-content: center !important;
  }

  .assessment-card .btn-del-assessment {
    flex: 0 0 34px !important;
    width: 34px !important;
    height: 34px !important;
    padding: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
  }
}

@media (max-width: 480px) {

  /* Compact Smartphone Screens (iPhone SE, Galaxy S, etc.) */
  .page-view {
    padding: 8px 6px 28px 6px !important;
  }

  .page-view-header {
    padding: 10px 12px !important;
    gap: 10px !important;
  }

  .page-view-icon {
    width: 28px !important;
    height: 28px !important;
    min-width: 28px !important;
    max-width: 28px !important;
    flex: 0 0 28px !important;
    border-radius: 6px !important;
  }

  .page-view-icon svg {
    width: 14px !important;
    height: 14px !important;
  }

  .page-view-title {
    font-size: 0.98rem !important;
  }

  .modal-header-icon {
    width: 28px !important;
    height: 28px !important;
    min-width: 28px !important;
    max-width: 28px !important;
    flex: 0 0 28px !important;
    border-radius: 6px !important;
  }

  .modal-header-icon svg {
    width: 14px !important;
    height: 14px !important;
  }

  .modal-title {
    font-size: 0.98rem !important;
  }

  .page-view-actions {
    flex-direction: column !important;
    gap: 6px !important;
  }

  .page-view-actions .btn {
    flex: 1 1 100% !important;
    width: 100% !important;
    justify-content: center !important;
  }

  .assessment-card .btn-card-test-history,
  .assessment-card .btn-card-test-result {
    flex: 1 1 100% !important;
    width: 100% !important;
  }

  .assessment-card .btn-del-assessment {
    flex: 1 1 100% !important;
    width: 100% !important;
  }

  /* Modal Footer Buttons Stacked Full Width on Tiny Screens */
  .modal-footer .btn {
    flex: 1 1 100% !important;
    width: 100% !important;
  }

  /* Question Bank Actions on Tiny Screens */
  .qb-session-actions .btn:not(.btn-del-session) {
    flex: 1 1 100% !important;
    width: 100% !important;
  }
}

/* ============================================================
   Unified Consistent Alignment & Table Refinements
   ============================================================ */

.modal-filter-bar {
  margin: 0 0 16px 0 !important;
  padding: 12px 16px !important;
  background: #f8fafc !important;
  border-radius: 10px !important;
  border: 1px solid #e2e8f0 !important;
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 14px !important;
  align-items: flex-end !important;
}

.modal-filter-bar .qb-filter-group {
  display: flex !important;
  flex-direction: column !important;
  gap: 6px !important;
}

.modal-filter-bar .qb-filter-label {
  font-size: 0.72rem !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.05em !important;
  color: #64748b !important;
}

.modal-filter-bar .qb-filter-select {
  height: 38px !important;
  padding: 8px 12px !important;
  font-size: 0.84rem !important;
  border: 1px solid #cbd5e1 !important;
  border-radius: 8px !important;
  background-color: #ffffff !important;
  color: #1e293b !important;
  font-family: inherit !important;
  transition: border-color 0.15s ease, box-shadow 0.15s ease !important;
}

.modal-filter-bar .qb-filter-select:focus {
  border-color: var(--primary, #1d68ff) !important;
  box-shadow: 0 0 0 3px rgba(29, 104, 255, 0.15) !important;
  outline: none !important;
}

/* Consistent Table Typography & Alignment across All Pages */
.users-table th {
  padding: 12px 16px !important;
  font-size: 0.72rem !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.05em !important;
  color: #64748b !important;
  background: #f8fafc !important;
  border-bottom: 1.5px solid #e2e8f0 !important;
  vertical-align: middle !important;
}

.users-table td {
  padding: 13px 16px !important;
  vertical-align: middle !important;
  border-bottom: 1px solid #f1f5f9 !important;
  font-size: 0.84rem !important;
  color: #1e293b !important;
}

.users-table td .status-badge {
  vertical-align: middle !important;
}

/* Page View Layout Consistency */
.page-view-container {
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
  padding: 0 0 24px 0 !important;
  box-sizing: border-box !important;
}

/* ============================================================
   Add Question & Edit Question Modal: Complete Mobile Alignment
   ============================================================ */

/* Base Desktop Styles */
.option-input-row {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  box-sizing: border-box;
}

.option-input-row .option-marker {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-weight: 600;
  cursor: pointer;
  min-width: 44px;
  flex-shrink: 0;
}

.option-input-row .manual-opt-text,
.option-input-row .edit-opt-text {
  flex: 1;
  min-width: 0;
}

.question-modal-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
  padding: 14px 20px;
  background: #f8fafc;
  border-top: 1px solid var(--border-subtle, #e2e8f0);
  width: 100%;
  box-sizing: border-box;
}

.question-modal-footer .modal-footer-left {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.question-modal-footer .modal-footer-right {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-left: auto;
  flex-wrap: wrap;
}

/* Tablet & Mobile Viewports (<= 768px) */
@media (max-width: 768px) {

  #createQuestionModal,
  #editQuestionModal {
    padding: 8px 6px !important;
    align-items: center !important;
    justify-content: center !important;
  }

  #createQuestionModal .modal-card,
  #editQuestionModal .modal-card {
    width: 100% !important;
    max-width: calc(100vw - 12px) !important;
    max-height: 94vh !important;
    max-height: 94dvh !important;
    margin: 0 auto !important;
    border-radius: 14px !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.2), 0 8px 10px -6px rgba(0, 0, 0, 0.1) !important;
  }

  #createQuestionModal .modal-header,
  #editQuestionModal .modal-header {
    padding: 14px 16px !important;
    gap: 12px !important;
    display: flex !important;
    align-items: center !important;
    flex-shrink: 0 !important;
    background: #ffffff !important;
    border-bottom: 1px solid #e2e8f0 !important;
    box-sizing: border-box !important;
  }

  #createQuestionModal .modal-header-icon,
  #editQuestionModal .modal-header-icon {
    width: 34px !important;
    height: 34px !important;
    padding: 7px !important;
    flex-shrink: 0 !important;
    border-radius: 8px !important;
  }

  #createQuestionModal .modal-header>div:nth-child(2),
  #editQuestionModal .modal-header>div:nth-child(2) {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    padding-right: 6px !important;
  }

  #createQuestionModal .modal-title,
  #editQuestionModal .modal-title {
    font-size: 1.1rem !important;
    font-weight: 700 !important;
    margin: 0 !important;
    line-height: 1.25 !important;
    color: #0f172a !important;
  }

  #createQuestionModal .modal-subtitle,
  #editQuestionModal .modal-subtitle {
    font-size: 0.78rem !important;
    line-height: 1.3 !important;
    margin-top: 3px !important;
    color: #64748b !important;
  }

  #createQuestionModal .modal-close-btn,
  #editQuestionModal .modal-close-btn {
    flex-shrink: 0 !important;
    margin-left: auto !important;
    padding: 4px !important;
    width: 28px !important;
    height: 28px !important;
  }

  #createQuestionModal .modal-form,
  #editQuestionModal .modal-form {
    padding: 14px 16px !important;
    gap: 14px !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    flex: 1 1 auto !important;
    box-sizing: border-box !important;
  }

  /* Form Grids: Single column stack on mobile */
  #createQuestionModal .form-grid-3,
  #createQuestionModal .form-grid-2,
  #editQuestionModal .form-grid-3,
  #editQuestionModal .form-grid-2 {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 10px !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  #createQuestionModal .form-field-group,
  #editQuestionModal .form-field-group {
    width: 100% !important;
    box-sizing: border-box !important;
    margin: 0 !important;
  }

  #createQuestionModal .form-label,
  #editQuestionModal .form-label {
    font-size: 0.85rem !important;
    font-weight: 600 !important;
    margin-bottom: 5px !important;
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 4px !important;
    color: #334155 !important;
  }

  #createQuestionModal .form-label .opt-label,
  #editQuestionModal .form-label .opt-label {
    font-size: 0.74rem !important;
    font-weight: 400 !important;
    color: #64748b !important;
  }

  #createQuestionModal .form-input,
  #editQuestionModal .form-input {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    font-size: 0.88rem !important;
    padding: 8px 12px !important;
    border-radius: 8px !important;
    height: 38px !important;
    border: 1px solid #cbd5e1 !important;
  }

  #createQuestionModal textarea.form-input,
  #editQuestionModal textarea.form-input {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    font-size: 0.88rem !important;
    padding: 10px 12px !important;
    resize: vertical !important;
    min-height: 72px !important;
    height: auto !important;
    line-height: 1.4 !important;
  }

  /* Question Image Upload Container */
  #createQuestionModal .form-field-group>div[style*="display:flex; align-items:center; gap:10px"],
  #editQuestionModal .form-field-group>div[style*="display:flex; align-items:center; gap:10px"] {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
    align-items: center !important;
    width: 100% !important;
    margin-top: 2px !important;
    box-sizing: border-box !important;
  }

  #createQuestionModal .form-field-group label.btn-secondary,
  #editQuestionModal .form-field-group label.btn-secondary {
    font-size: 0.82rem !important;
    padding: 7px 12px !important;
    height: 36px !important;
    box-sizing: border-box !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    flex: 0 0 auto !important;
    max-width: 100% !important;
    border-radius: 8px !important;
    cursor: pointer !important;
  }

  #manualQImagePreviewBox,
  #editQImagePreviewBox {
    align-items: center !important;
    gap: 8px !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    padding: 3px 8px !important;
    background: #f1f5f9 !important;
    border-radius: 6px !important;
    border: 1px solid #cbd5e1 !important;
    height: 36px !important;
  }

  #manualQImagePreviewBox[style*="display: none"],
  #manualQImagePreviewBox[style*="display:none"],
  #editQImagePreviewBox[style*="display: none"],
  #editQImagePreviewBox[style*="display:none"] {
    display: none !important;
  }

  #manualQImagePreview,
  #editQImagePreview {
    height: 28px !important;
    max-width: 60px !important;
    object-fit: contain !important;
    border-radius: 4px !important;
    background: #fff !important;
    border: 1px solid #e2e8f0 !important;
  }

  /* Dynamic Area & Options List (Matching Desktop Clean Row Layout) */
  .manual-q-dynamic-area {
    width: 100% !important;
    box-sizing: border-box !important;
  }

  .manual-q-dynamic-area>div[style*="justify-content:space-between"] {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    gap: 4px !important;
    margin-bottom: 8px !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  /* Single horizontal row layout matching Desktop */
  .option-input-row {
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    width: 100% !important;
    box-sizing: border-box !important;
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    padding: 0 !important;
    margin-bottom: 2px !important;
  }

  .option-input-row .option-marker {
    display: inline-flex !important;
    align-items: center !important;
    gap: 4px !important;
    font-weight: 600 !important;
    font-size: 0.88rem !important;
    cursor: pointer !important;
    min-width: 36px !important;
    flex-shrink: 0 !important;
    color: #0f172a !important;
  }

  .option-input-row .option-marker input[type="radio"],
  .option-input-row .option-marker input[type="checkbox"] {
    width: 16px !important;
    height: 16px !important;
    margin: 0 !important;
    cursor: pointer !important;
    accent-color: #1d68ff !important;
  }

  .option-input-row .manual-opt-text,
  .option-input-row .edit-opt-text {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    width: auto !important;
    font-size: 0.85rem !important;
    padding: 7px 10px !important;
    height: 36px !important;
    border-radius: 8px !important;
    border: 1px solid #cbd5e1 !important;
    box-sizing: border-box !important;
  }

  .option-input-row label.btn {
    font-size: 0.78rem !important;
    padding: 6px 9px !important;
    height: 36px !important;
    margin: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 4px !important;
    flex-shrink: 0 !important;
    box-sizing: border-box !important;
    border-radius: 8px !important;
    white-space: nowrap !important;
  }

  /* Option Image Preview Box: completely hidden unless image is uploaded */
  .option-input-row .opt-img-preview-box {
    align-items: center !important;
    gap: 4px !important;
    background: #f1f5f9 !important;
    padding: 2px 6px !important;
    border-radius: 6px !important;
    border: 1px solid #cbd5e1 !important;
    flex-shrink: 0 !important;
    height: 36px !important;
    box-sizing: border-box !important;
  }

  .option-input-row .opt-img-preview-box[style*="display: none"],
  .option-input-row .opt-img-preview-box[style*="display:none"] {
    display: none !important;
  }

  .option-input-row .opt-img-preview {
    height: 26px !important;
    max-width: 40px !important;
    object-fit: contain !important;
    border-radius: 2px !important;
    background: #fff !important;
    border: 1px solid #e2e8f0 !important;
  }

  .option-input-row .btn-remove-manual-option,
  .option-input-row .btn-remove-edit-option-row {
    padding: 0 10px !important;
    font-size: 0.85rem !important;
    height: 36px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 8px !important;
    color: #ef4444 !important;
    background: #fee2e2 !important;
    border: 1px solid #fecaca !important;
    flex-shrink: 0 !important;
    box-sizing: border-box !important;
    cursor: pointer !important;
    margin-left: 0 !important;
  }

  /* Add Option button matches Desktop: clean small button on left */
  #btnAddManualOption,
  #btnAddEditOption {
    display: inline-flex !important;
    width: auto !important;
    align-items: center !important;
    gap: 6px !important;
    padding: 7px 14px !important;
    font-size: 0.82rem !important;
    font-weight: 500 !important;
    border-radius: 6px !important;
    box-sizing: border-box !important;
    margin-top: 4px !important;
  }

  /* True / False container */
  .manual-q-dynamic-area div[style*="padding:12px; background:#f8fafc"] {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 16px !important;
    padding: 10px 14px !important;
    width: 100% !important;
    box-sizing: border-box !important;
    border-radius: 8px !important;
  }

  /* Question Modal Footer Mobile */
  .question-modal-footer {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    flex-wrap: wrap !important;
    gap: 10px !important;
    padding: 12px 16px !important;
    background: #f8fafc !important;
    border-top: 1px solid #e2e8f0 !important;
    width: 100% !important;
    box-sizing: border-box !important;
    flex-shrink: 0 !important;
  }

  .question-modal-footer .modal-footer-left {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    flex: 0 0 auto !important;
  }

  .question-modal-footer .modal-footer-right {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    margin-left: auto !important;
    flex-wrap: wrap !important;
  }

  .question-modal-footer .btn {
    font-size: 0.82rem !important;
    padding: 8px 12px !important;
    height: 36px !important;
    border-radius: 8px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    white-space: nowrap !important;
    box-sizing: border-box !important;
  }

  #btnCancelCreateQuestion,
  #btnCancelEditQuestion {
    min-width: 72px !important;
  }

  #tempQuestionsBadge {
    font-size: 0.76rem !important;
    padding: 6px 10px !important;
    white-space: nowrap !important;
    box-sizing: border-box !important;
  }
}

/* Compact Smartphones (<= 420px) */
@media (max-width: 420px) {
  .question-modal-footer {
    padding: 10px 12px !important;
    gap: 8px !important;
  }

  .question-modal-footer .modal-footer-right {
    width: 100% !important;
    justify-content: flex-end !important;
    gap: 6px !important;
  }

  .question-modal-footer .modal-footer-right .btn {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    font-size: 0.8rem !important;
    padding: 8px 6px !important;
  }
}

/* ============================================================
   RBAC Manager Permissions Styles
   ============================================================ */

.rbac-access-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 18px;
  background: var(--bg-subtle, #f8fafc);
  border: 1px solid var(--border-color, #e2e8f0);
  border-radius: 12px;
  margin-bottom: 14px;
  transition: all 180ms ease;
}

.rbac-access-card.is-disabled {
  background: #fef2f2;
  border-color: #fecaca;
}

.rbac-access-title {
  font-weight: 700;
  font-size: 0.92rem;
  color: var(--text-primary, #0f172a);
}

.rbac-access-desc {
  font-size: 0.76rem;
  color: var(--text-muted, #64748b);
  margin-top: 2px;
}

/* Switch Toggle */
.rbac-switch {
  position: relative;
  display: inline-block;
  width: 48px;
  height: 26px;
  flex-shrink: 0;
}

.rbac-switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

.rbac-slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #cbd5e1;
  transition: 0.25s;
  border-radius: 26px;
}

.rbac-slider:before {
  position: absolute;
  content: "";
  height: 20px;
  width: 20px;
  left: 3px;
  bottom: 3px;
  background-color: white;
  transition: 0.25s;
  border-radius: 50%;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}

.rbac-switch input:checked+.rbac-slider {
  background-color: #10b981;
}

.rbac-switch input:checked+.rbac-slider:before {
  transform: translateX(22px);
}

.rbac-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--border-color, #e2e8f0);
}

.rbac-toolbar-label {
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--text-secondary, #475569);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.rbac-toolbar-actions {
  display: flex;
  gap: 6px;
}

.rbac-modules-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  max-height: 52vh;
  overflow-y: auto;
  padding-right: 4px;
}

@media (max-width: 640px) {
  .rbac-modules-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

.rbac-module-box {
  background: var(--bg-surface, #ffffff);
  border: 1px solid var(--border-color, #e2e8f0);
  border-radius: 10px;
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.rbac-module-header {
  padding-bottom: 6px;
  border-bottom: 1px solid var(--border-color, #f1f5f9);
}

.rbac-features-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.rbac-checkbox-label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.82rem;
  color: var(--text-primary, #1e293b);
  cursor: pointer;
  user-select: none;
}

.rbac-checkbox-label input[type="checkbox"] {
  width: 15px;
  height: 15px;
  border-radius: 4px;
  accent-color: #7c3aed;
  cursor: pointer;
}

.rbac-checkbox-label.rbac-subfeature {
  padding-left: 20px;
  font-size: 0.76rem;
  color: var(--text-secondary, #64748b);
}

.rbac-status-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 0.7rem;
  font-weight: 600;
  padding: 2px 7px;
  border-radius: 12px;
  margin-top: 4px;
}

.rbac-status-badge.active {
  background: #ecfdf5;
  color: #059669;
  border: 1px solid #a7f3d0;
}

.rbac-status-badge.disabled {
  background: #fef2f2;
  color: #dc2626;
  border: 1px solid #fecaca;
}

/* ============================================================
   Global Multi-Device Responsive System (Desktop, Tablet, Mobile)
   Guarantees all UI features and elements remain identical and
   properly aligned across all screen resolutions.
   ============================================================ */

/* Tablet & Medium Screen Layout (769px to 1024px) */
@media (min-width: 769px) and (max-width: 1024px) {
  .qb-filter-bar {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 12px;
    padding: 14px 18px;
    margin-bottom: 18px;
    width: 100%;
    box-sizing: border-box;
  }

  .qb-filter-group {
    flex: 1 1 calc(50% - 8px);
    min-width: 140px;
  }

  .qb-search-group {
    flex: 1 1 100%;
    min-width: 180px;
  }

  .assessments-grid {
    grid-template-columns: repeat(auto-fill, minmax(280px, minmax(0, 1fr)));
    gap: 16px;
  }
}

/* Desktop Wide Screen Layout (1025px and up) */
@media (min-width: 1025px) {
  .qb-filter-bar {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 14px;
    padding: 16px 20px;
    margin-bottom: 20px;
    width: 100%;
    box-sizing: border-box;
  }

  .qb-filter-group {
    flex: 0 1 160px;
    min-width: 140px;
  }

  .qb-search-group {
    flex: 1 1 240px;
    min-width: 200px;
  }

  .assessments-grid {
    grid-template-columns: repeat(auto-fill, minmax(320px, minmax(0, 1fr)));
    gap: 20px;
  }
}

/* Student Login -> Assessments page: Remove Class, Batch, and Search filters completely */
html.role-student #assessFilterBar,
html.role-student #assessClassFilterGroup,
html.role-student #assessBatchFilterGroup,
html.role-student #assessSearchGroup,
body.role-student #assessFilterBar,
body.role-student #assessClassFilterGroup,
body.role-student #assessBatchFilterGroup,
body.role-student #assessSearchGroup {
  display: none !important;
  visibility: hidden !important;
  height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  overflow: hidden !important;
  pointer-events: none !important;
}

/* Student Login -> Strictly remove Face Attendance menu from sidebar */
html.role-student #tabNavFAttendance,
html.role-student #sidebarNavFaceAttendance,
body.role-student #tabNavFAttendance,
body.role-student #sidebarNavFaceAttendance {
  display: none !important;
  visibility: hidden !important;
  height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  overflow: hidden !important;
  pointer-events: none !important;
}

/* ============================================================
   Application Dashboard (Compact, Space-Efficient Navigation Hub)
   ============================================================ */

/* ============================================================
   Modern Reference Page Model Styles (Matching Design Model)
   ============================================================ */

.dashboard-modern-model {
  max-width: 100%;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 24px;
  padding: 6px 16px 40px;
}

/* Top Hero Bar: Greeting & Global Search */
.dash-hero-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}

.dash-hero-welcome {
  display: flex;
  align-items: center;
}

.dash-hero-title {
  font-family: var(--font-heading);
  font-size: 1.55rem;
  font-weight: 600;
  color: #1e293b;
  margin: 0;
  letter-spacing: -0.01em;
}

.dash-hero-search {
  display: flex;
  align-items: center;
  gap: 10px;
  background: #ffffff;
  border: 1px solid #eef2f6;
  border-radius: 12px;
  padding: 8px 16px;
  width: 240px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.02);
  transition: all 180ms ease;
}

.dash-hero-search:focus-within {
  border-color: #5932ea;
  box-shadow: 0 0 0 3px rgba(89, 50, 234, 0.12);
}

.dash-hero-search svg {
  width: 16px;
  height: 16px;
  color: #8b95a5;
  flex-shrink: 0;
}

.dash-hero-search input {
  border: none;
  outline: none;
  background: transparent;
  width: 100%;
  font-family: var(--font-body);
  font-size: 0.88rem;
  color: #1e293b;
}

.dash-hero-search input::placeholder {
  color: #b5b7c0;
}

/* 3-Metric Unified KPI Banner Card */
.dash-metric-card-group {
  background: #ffffff;
  border-radius: 24px;
  padding: 28px 36px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.025);
  border: 1px solid #f0f2f5;
  gap: 20px;
  flex-wrap: wrap;
}

.dash-metric-tile {
  display: flex;
  align-items: center;
  gap: 20px;
  flex: 1;
  min-width: 200px;
  cursor: pointer;
  padding: 6px 10px;
  border-radius: 14px;
  transition: all 160ms ease;
}

.dash-metric-tile:hover {
  background: #fbfbfe;
  transform: translateY(-1px);
}

.dash-metric-icon-circle {
  width: 68px;
  height: 68px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  background: linear-gradient(180deg, #d3ffe7 0%, #ebfbf3 100%);
  color: #00ac4f;
  border: 1px solid rgba(0, 172, 79, 0.15);
  box-shadow: 0 4px 12px rgba(0, 172, 79, 0.08);
}

.dash-metric-icon-circle svg {
  width: 32px;
  height: 32px;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  fill: none;
}

.dash-metric-info {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.dash-metric-lbl {
  font-size: 0.82rem;
  color: #acacac;
  font-weight: 500;
  letter-spacing: -0.01em;
}

.dash-metric-num {
  font-family: var(--font-heading);
  font-size: 1.95rem;
  font-weight: 700;
  color: #202224;
  line-height: 1.15;
}

.dash-metric-trend {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 0.78rem;
  font-weight: 500;
  margin-top: 2px;
}

.dash-metric-trend.trend-up {
  color: #00ac4f;
}

.dash-metric-trend.trend-down {
  color: #d0004b;
}

.dash-metric-trend svg {
  width: 14px;
  height: 14px;
}

.dash-metric-divider {
  width: 1px;
  height: 64px;
  background: #f0f0f0;
  flex-shrink: 0;
}

/* Avatar Stack for Active Now */
.dash-avatar-stack {
  display: flex;
  align-items: center;
  margin-top: 4px;
}

.dash-avatar-item {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: 2px solid #ffffff;
  margin-left: -7px;
  font-size: 0.62rem;
  font-weight: 700;
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.dash-avatar-item:first-child {
  margin-left: 0;
}

.dash-avatar-more {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: 2px solid #ffffff;
  margin-left: -7px;
  background: #f1f5f9;
  color: #475569;
  font-size: 0.60rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Core Operational Data Table Card ("All Customers" / "All Students") */
.dash-table-card {
  background: #ffffff;
  border-radius: 24px;
  padding: 28px 36px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.025);
  border: 1px solid #f0f2f5;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.dash-table-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  padding-bottom: 6px;
}

.dash-table-title-group {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.dash-table-main-title {
  font-family: var(--font-heading);
  font-size: 1.35rem;
  font-weight: 700;
  color: #000000;
  margin: 0;
  letter-spacing: -0.01em;
}

.dash-table-sub-link {
  color: #16c098;
  font-size: 0.82rem;
  font-weight: 500;
}

.dash-table-tools {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}

.dash-table-search {
  display: flex;
  align-items: center;
  gap: 8px;
  background: #f9fbff;
  border: 1px solid #f0f2f5;
  border-radius: 10px;
  padding: 7px 14px;
  width: 200px;
  transition: all 180ms ease;
}

.dash-table-search:focus-within {
  border-color: #5932ea;
  background: #ffffff;
}

.dash-table-search svg {
  width: 15px;
  height: 15px;
  color: #8b95a5;
  flex-shrink: 0;
}

.dash-table-search input {
  border: none;
  outline: none;
  background: transparent;
  width: 100%;
  font-family: var(--font-body);
  font-size: 0.82rem;
  color: #292d32;
}

.dash-table-search input::placeholder {
  color: #b5b7c0;
}

.dash-table-sort {
  display: flex;
  align-items: center;
  gap: 6px;
  background: #f9fbff;
  border: 1px solid #f0f2f5;
  border-radius: 10px;
  padding: 6px 12px;
}

.dash-sort-label {
  font-size: 0.80rem;
  color: #7e7e7e;
  font-weight: 500;
}

.dash-sort-dropdown {
  border: none;
  outline: none;
  background: transparent;
  font-family: var(--font-body);
  font-size: 0.80rem;
  font-weight: 600;
  color: #292d32;
  cursor: pointer;
}

/* Data Table Responsive Styling */
.dash-table-responsive {
  width: 100%;
  overflow-x: auto;
}

.dash-data-table {
  width: 100%;
  border-collapse: collapse;
  text-align: left;
}

.dash-data-table thead th {
  padding: 14px 12px;
  font-size: 0.82rem;
  font-weight: 500;
  color: #b5b7c0;
  border-bottom: 1px solid #eeeeee;
  white-space: nowrap;
}

.dash-data-table tbody td {
  padding: 16px 12px;
  font-size: 0.86rem;
  font-weight: 500;
  color: #292d32;
  border-bottom: 1px solid #f6f6f8;
  vertical-align: middle;
}

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

.dash-data-table tbody tr:hover td {
  background: #fafbfe;
}

/* Modern Status Pills */
.dash-status-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 4px 14px;
  border-radius: 6px;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.01em;
}

.dash-status-pill.status-active {
  background: rgba(22, 192, 152, 0.16);
  border: 1px solid #00b087;
  color: #008767;
}

.dash-status-pill.status-inactive {
  background: #ffc5c5;
  border: 1px solid #df0404;
  color: #df0404;
}

/* Table Footer & Pagination */
.dash-table-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding-top: 14px;
  border-top: 1px solid #f6f6f8;
  flex-wrap: wrap;
}

.dash-table-pagination-info {
  font-size: 0.82rem;
  color: #b5b7c0;
  font-weight: 500;
}

.dash-table-pagination-nav {
  display: flex;
  align-items: center;
  gap: 6px;
}

.dash-page-btn {
  min-width: 28px;
  height: 28px;
  padding: 0 6px;
  border-radius: 5px;
  border: 1px solid #eeeeee;
  background: #f5f5f5;
  color: #404b52;
  font-family: var(--font-body);
  font-size: 0.76rem;
  font-weight: 600;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: all 140ms ease;
}

.dash-page-btn:hover {
  background: #e9ecef;
  border-color: #cbd5e1;
}

.dash-page-btn.active {
  background: #5932ea;
  color: #ffffff;
  border-color: #5932ea;
}

.dash-page-dots {
  color: #404b52;
  padding: 0 3px;
  font-size: 0.82rem;
}

/* Quick Navigation Modules Ribbon */
.dash-modules-ribbon {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  background: #ffffff;
  padding: 12px 18px;
  border-radius: 16px;
  border: 1px solid #f0f2f5;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.02);
}

.dash-ribbon-label {
  font-size: 0.74rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #94a3b8;
  margin-right: 4px;
}

.dash-ribbon-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  font-family: var(--font-body);
  font-size: 0.78rem;
  font-weight: 600;
  color: #475569;
  cursor: pointer;
  transition: all 160ms ease;
}

.dash-ribbon-chip svg {
  width: 14px;
  height: 14px;
  color: #5932ea;
  flex-shrink: 0;
}

.dash-ribbon-chip:hover {
  background: #5932ea;
  border-color: #5932ea;
  color: #ffffff;
  transform: translateY(-1px);
}

.dash-ribbon-chip:hover svg {
  color: #ffffff;
}

/* Responsive Rules for Modern Dashboard Model */
@media (max-width: 960px) {
  .dash-metric-divider {
    display: none;
  }

  .dash-metric-card-group {
    padding: 20px;
  }

  .dash-table-card {
    padding: 20px;
  }
}

@media (max-width: 640px) {
  .dash-hero-search {
    width: 100%;
  }

  .dash-metric-card-group {
    flex-direction: column;
    align-items: flex-start;
  }

  .dash-table-tools {
    width: 100%;
  }

  .dash-table-search {
    width: 100%;
  }
}

/* ============================================================
   Application Logo & Branding System (All Devices & Contexts)
   ============================================================ */

.app-logo-container {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
  flex-shrink: 0;
}

.app-logo-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

.app-logo-fallback {
  width: 100%;
  height: 100%;
  display: block;
}

/* Custom Uploaded Logo: Show ONLY the uploaded image cleanly */
.app-logo-container.has-custom-logo {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
}

.app-logo-container.has-custom-logo .app-logo-fallback {
  display: none !important;
}

.app-logo-container.has-custom-logo .app-logo-img {
  display: block !important;
  object-fit: contain !important;
  background: transparent !important;
}

/* Sidebar Brand Logo Context */
.sidebar-logo.app-logo-container {
  width: 36px;
  height: 36px;
  border-radius: 9px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.12);
  padding: 3px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}

.sidebar-logo .app-logo-img {
  max-width: 30px;
  max-height: 30px;
}

.sidebar-logo.app-logo-container.has-custom-logo {
  width: auto !important;
  min-width: 32px !important;
  max-width: 48px !important;
  height: 36px !important;
}

.sidebar-logo.app-logo-container.has-custom-logo .app-logo-img {
  max-width: 48px !important;
  max-height: 36px !important;
  width: auto !important;
  height: auto !important;
}

/* Mobile & Topbar Brand Logo Context */
.mobile-brand-logo.app-logo-container {
  width: 30px;
  height: 30px;
  border-radius: 7px;
  background: #ffffff;
  border: 1px solid var(--border-subtle);
  padding: 2px;
  box-shadow: var(--shadow-xs);
}

.mobile-brand-logo .app-logo-img {
  max-width: 26px;
  max-height: 26px;
}

.mobile-brand-logo.app-logo-container.has-custom-logo {
  width: auto !important;
  min-width: 28px !important;
  max-width: 44px !important;
  height: 32px !important;
}

.mobile-brand-logo.app-logo-container.has-custom-logo .app-logo-img {
  max-width: 44px !important;
  max-height: 32px !important;
  width: auto !important;
  height: auto !important;
}

/* Login Page Brand Logo Context */
.login-brand-logo.app-logo-container {
  width: 64px;
  height: 64px;
  border-radius: 16px;
  background: #ffffff;
  border: 1px solid var(--border-subtle);
  padding: 6px;
  margin: 0 auto 14px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}

.login-brand-logo .app-logo-img {
  max-width: 52px;
  max-height: 52px;
}

.login-brand-logo.app-logo-container.has-custom-logo {
  width: auto !important;
  min-width: 60px !important;
  max-width: 140px !important;
  height: 80px !important;
  margin: 0 auto 16px !important;
}

.login-brand-logo.app-logo-container.has-custom-logo .app-logo-img {
  max-width: 140px !important;
  max-height: 80px !important;
  width: auto !important;
  height: auto !important;
}

/* Live Preview Slots Context */
.preview-logo-slot.app-logo-container.has-custom-logo {
  width: auto !important;
  max-width: 44px !important;
  height: 32px !important;
}

.preview-logo-slot.app-logo-container.has-custom-logo .app-logo-img {
  max-width: 44px !important;
  max-height: 32px !important;
  width: auto !important;
  height: auto !important;
}

.preview-logo-slot-lg.app-logo-container.has-custom-logo {
  width: auto !important;
  max-width: 90px !important;
  height: 52px !important;
}

.preview-logo-slot-lg.app-logo-container.has-custom-logo .app-logo-img {
  max-width: 90px !important;
  max-height: 52px !important;
  width: auto !important;
  height: auto !important;
}

/* ============================================================
   Configuration Page Styles
   ============================================================ */

.config-page-container {
  max-width: 860px;
  margin: 0 auto;
  padding: 0 0 48px 0;
}

.config-grid {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.config-card {
  background: #ffffff;
  border: 1px solid var(--border-subtle);
  border-radius: 14px;
  padding: 22px;
  box-shadow: var(--shadow-xs);
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.config-card-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

.config-card-title-wrap {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  flex: 1;
  min-width: 220px;
}

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

.config-icon-badge svg {
  width: 20px;
  height: 20px;
}

.config-card-title {
  font-family: var(--font-heading);
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--text-primary);
  margin: 0;
  line-height: 1.25;
}

.config-card-desc {
  font-size: 0.8rem;
  color: var(--text-secondary);
  margin: 3px 0 0;
  line-height: 1.45;
}

.config-status-badge {
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  font-size: 0.72rem;
  font-weight: 600;
  border-radius: 9999px;
  white-space: nowrap;
}

.config-status-badge.badge-default {
  background: #f1f5f9;
  color: #475569;
  border: 1px solid #cbd5e1;
}

.config-status-badge.badge-custom {
  background: #ecfdf5;
  color: #059669;
  border: 1px solid #a7f3d0;
}

/* Upload Dropzone */
.logo-upload-section {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.logo-dropzone {
  border: 2px dashed #cbd5e1;
  border-radius: 12px;
  padding: 24px 18px;
  text-align: center;
  background: #fafafa;
  cursor: pointer;
  outline: none;
  transition: all 180ms ease;
}

.logo-dropzone:hover,
.logo-dropzone:focus,
.logo-dropzone.dragover {
  border-color: var(--primary);
  background: #f0f7ff;
}

.logo-dropzone-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

.logo-dropzone-icon {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: #eef2ff;
  color: var(--primary);
  display: flex;
  align-items: center;
  justify-content: center;
}

.logo-dropzone-icon svg {
  width: 22px;
  height: 22px;
}

.logo-dropzone-text {
  font-size: 0.88rem;
  color: var(--text-primary);
}

.logo-dropzone-hint {
  font-size: 0.74rem;
  color: var(--text-muted);
}

.logo-browse-btn {
  margin-top: 4px;
}

/* Selected File Meta Banner */
.logo-file-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: #f8fafc;
  border: 1px solid var(--border-subtle);
  border-radius: 8px;
  padding: 8px 12px;
  font-size: 0.8rem;
}

.logo-file-info {
  display: flex;
  align-items: center;
  gap: 8px;
}

.logo-file-icon {
  font-size: 1.1rem;
}

.logo-meta-muted {
  font-size: 0.72rem;
  color: var(--text-muted);
  margin-left: 6px;
}

/* Live Multi-Device Previews */
.logo-previews-container {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.config-section-subtitle {
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin: 0;
}

.logo-previews-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.logo-preview-card {
  border: 1px solid var(--border-subtle);
  border-radius: 10px;
  overflow: hidden;
  background: #ffffff;
  display: flex;
  flex-direction: column;
}

.preview-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 6px 10px;
  background: #f8fafc;
  border-bottom: 1px solid var(--border-subtle);
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--text-secondary);
}

.preview-device-tag {
  font-size: 0.64rem;
  color: var(--text-muted);
}

.preview-box {
  padding: 16px;
  min-height: 85px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.preview-box-dark {
  background: #0f172a;
}

.preview-box-light {
  background: #ffffff;
  border-bottom: 1px solid #e2e8f0;
}

.preview-box-login {
  background: #f1f5f9;
}

.sidebar-brand-preview {
  display: flex;
  align-items: center;
  gap: 8px;
}

.mobile-brand-preview {
  display: flex;
  align-items: center;
  gap: 8px;
}

.preview-hamburger {
  font-size: 1rem;
  color: #64748b;
}

.login-brand-preview {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}

.preview-login-title {
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--text-primary);
}

.preview-logo-slot {
  width: 32px;
  height: 32px;
  border-radius: 7px;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.15);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2px;
  flex-shrink: 0;
}

.preview-box-light .preview-logo-slot {
  background: #ffffff;
  border-color: #cbd5e1;
}

.preview-logo-slot-lg {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  background: #ffffff;
  border: 1px solid #cbd5e1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 4px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
  flex-shrink: 0;
}

.preview-logo-slot .app-logo-img,
.preview-logo-slot-lg .app-logo-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.preview-logo-slot .app-logo-fallback,
.preview-logo-slot-lg .app-logo-fallback {
  width: 100%;
  height: 100%;
  stroke: currentColor;
}

@media (max-width: 900px) {
  .logo-previews-grid {
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)) !important;
  }
}

@media (max-width: 560px) {
  .logo-previews-grid {
    grid-template-columns: minmax(0, 1fr) !important;
  }
}


.preview-brand-title {
  font-family: var(--font-heading);
  font-size: 0.85rem;
  font-weight: 700;
  color: #ffffff;
  white-space: nowrap;
}

.preview-box-light .preview-brand-title {
  color: var(--text-primary);
}

.config-card-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  padding-top: 14px;
  border-top: 1px solid var(--border-subtle);
  flex-wrap: wrap;
}

/* Responsive Breakpoints for Configuration */

@media (max-width: 640px) {
  .logo-previews-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .config-page-container {
    padding: 12px 14px 40px;
  }
}

/* ==========================================================================
   Dashboard Page View (Tuition Management Official Reference Design)
   ========================================================================== */

#viewDashboardPage {
  background-color: #f4f6fb;
  min-height: calc(100vh - 48px);
  overflow-y: auto;
}

.dashboard-tm-container {
  padding: 0 0 36px 0;
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* 1. Top Greeting Bar */
.dash-greeting-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
  padding-bottom: 4px;
}

.dash-greeting-left {
  display: flex;
  flex-direction: column;
}

.dash-greeting-headline {
  display: flex;
  align-items: center;
  gap: 10px;
}

.dash-sun-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  flex-shrink: 0;
}

.dash-sun-icon svg {
  width: 26px;
  height: 26px;
  display: block;
}

.dash-greeting-text {
  font-family: var(--font-heading);
  font-size: 1.55rem;
  font-weight: 700;
  color: #0f172a;
  letter-spacing: -0.02em;
  margin: 0;
}

.dash-greeting-meta {
  display: flex;
  align-items: center;
  gap: 10px;
  color: #64748b;
  font-size: 0.88rem;
  font-weight: 500;
  margin-top: 4px;
}

.dash-greeting-meta strong {
  color: #1e293b;
  font-weight: 600;
}

.dash-meta-sep {
  color: #cbd5e1;
}

.dash-greeting-filters {
  display: flex;
  align-items: flex-end;
  gap: 12px;
  position: relative;
  z-index: 20;
}

.dash-filter-item {
  display: flex;
  flex-direction: column;
  gap: 4px;
  position: relative;
}

.dash-filter-label {
  font-size: 0.72rem;
  font-weight: 600;
  color: #64748b;
  letter-spacing: 0.02em;
}

.dash-select-wrap {
  position: relative;
}

.dash-top-select {
  appearance: none;
  -webkit-appearance: none;
  background: #ffffff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23475569' stroke-width='2.2'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E") no-repeat right 12px center;
  padding: 8px 36px 8px 14px;
  font-size: 0.85rem;
  font-weight: 600;
  color: #1e293b;
  border: 1px solid #dbe2ea;
  border-radius: 8px;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
  cursor: pointer;
  outline: none;
  transition: border-color 150ms ease, box-shadow 150ms ease;
  min-width: 140px;
  pointer-events: auto;
}

.dash-top-select:hover {
  border-color: #2563eb;
}

.dash-top-select:focus,
.dash-top-select:focus-visible {
  border-color: #2563eb;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15);
}

/* Brand Header Context */
.sidebar-brand {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 4px 20px 4px;
}

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

/* 2. 6-Column Stat KPI Cards Row */
.dash-stats-row {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 16px;
}

.dash-stat-card {
  border-radius: 14px;
  padding: 12px 14px;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 12px;
  min-height: 64px;
  transition: transform 180ms ease, box-shadow 180ms ease;
  cursor: pointer;
  position: relative;
  border: 1px solid transparent;
}

.dash-stat-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(15, 23, 42, 0.06);
}

.dash-stat-card.card-blue {
  background-color: #f0f7ff;
  border-color: #dbeafe;
}

.dash-stat-card.card-purple {
  background-color: #f7f3ff;
  border-color: #ede9fe;
}

.dash-stat-card.card-mint {
  background-color: #f0fdf4;
  border-color: #dcfce7;
}

.dash-stat-card.card-orange {
  background-color: #fff9f2;
  border-color: #ffedd5;
}

.dash-stat-card.card-green {
  background-color: #f0fdf9;
  border-color: #ccfbf1;
}

.dash-stat-card.card-red {
  background-color: #fef2f2;
  border-color: #fee2e2;
}

.dash-stat-top {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 0;
  flex-shrink: 0;
}

.dash-stat-icon-circle {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.dash-stat-icon-circle.circle-blue {
  background: #dbeafe;
  color: #2563eb;
}

.dash-stat-icon-circle.circle-purple {
  background: #ede9fe;
  color: #7c3aed;
}

.dash-stat-icon-circle.circle-mint {
  background: #d1fae5;
  color: #059669;
}

.dash-stat-icon-circle.circle-orange {
  background: #ffedd5;
  color: #ea580c;
}

.dash-stat-icon-circle.circle-green {
  background: #ccfbf1;
  color: #0d9488;
}

.dash-stat-icon-circle.circle-red {
  background: #fee2e2;
  color: #dc2626;
}

.dash-stat-icon-circle svg {
  width: 20px !important;
  height: 20px !important;
  max-width: 20px !important;
  max-height: 20px !important;
  min-width: 20px !important;
  min-height: 20px !important;
  display: block !important;
  flex-shrink: 0 !important;
}

.dash-stat-icon-circle .currency-symbol {
  font-size: 1.15rem;
  font-weight: 700;
  line-height: 1;
}

.dash-stat-body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: baseline;
  column-gap: 8px;
  row-gap: 2px;
  min-width: 0;
  flex: 1;
}

.dash-stat-title {
  grid-column: 1 / 2;
  grid-row: 1 / 2;
  font-size: 0.8rem;
  font-weight: 600;
  color: #64748b;
  margin-bottom: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.dash-stat-value {
  grid-column: 2 / 3;
  grid-row: 1 / 2;
  font-size: 1.35rem;
  font-weight: 700;
  color: #0f172a;
  line-height: 1.1;
  font-family: var(--font-heading);
  white-space: nowrap;
  text-align: right;
}

.dash-stat-value-wrap {
  grid-column: 2 / 3;
  grid-row: 1 / 2;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
  min-width: 0;
}

.dash-stat-value-wrap .dash-stat-value {
  grid-column: unset;
  grid-row: unset;
  letter-spacing: -0.01em;
}

.dash-fee-mask-btn {
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 3px;
  border-radius: 6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #64748b;
  transition: all 160ms ease;
  flex-shrink: 0;
  line-height: 1;
  position: relative;
  z-index: 2;
}

.dash-fee-mask-btn:hover {
  background: rgba(15, 23, 42, 0.08);
  color: #0f172a;
  transform: scale(1.08);
}

.dash-fee-mask-btn:active {
  transform: scale(0.94);
}

.dash-fee-mask-btn svg {
  width: 16px;
  height: 16px;
  display: block;
}

.dash-stat-sub {
  grid-column: 1 / -1;
  grid-row: 2 / 3;
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 0.74rem;
  font-weight: 600;
  margin-top: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.dash-stat-sub svg,
.dash-sub-arrow,
.dash-sub-icon {
  width: 13px !important;
  height: 13px !important;
  max-width: 13px !important;
  max-height: 13px !important;
  display: inline-block !important;
  flex-shrink: 0 !important;
}

.dash-stat-sub.trend-green {
  color: #16a34a;
}

.dash-stat-sub.trend-orange {
  color: #d97706;
}

.dash-stat-sub.trend-red {
  color: #dc2626;
}

/* 3. Needs Your Attention Banner */
.dash-attention-card {
  background: #ffffff;
  border: 1px solid #fee2e2;
  border-radius: 14px;
  padding: 16px 20px;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.03);
}

.dash-attention-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}

.dash-attention-title-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
}

.dash-bell-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  color: #dc2626;
  flex-shrink: 0;
}

.dash-bell-icon svg {
  width: 18px;
  height: 18px;
  display: block;
}

.dash-attention-title {
  font-size: 0.95rem;
  font-weight: 700;
  color: #dc2626;
  margin: 0;
}

.dash-view-all-link {
  font-size: 0.8rem;
  font-weight: 600;
  color: #2563eb;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  transition: color 150ms ease;
}

.dash-view-all-link:hover {
  text-decoration: underline;
  color: #1d4ed8;
}

.dash-attention-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  width: 100%;
  box-sizing: border-box;
}

#dashAlertTestsItem {
  grid-column: 1 / -1 !important;
}

/* Ensure no brand logo or title displays in main topbar/content area */
.main-topbar .mobile-brand-logo,
.main-topbar .mobile-brand-title,
.main-topbar .app-logo-container {
  display: none !important;
}

.dash-academic-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.dash-academic-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  background: #f8fafc;
  border: 1px solid #eef2f6;
  border-radius: 10px;
  gap: 12px;
  transition: all 150ms ease;
}

.dash-academic-item:hover {
  background: #f1f5f9;
  border-color: #cbd5e1;
}

.dash-academic-item-left {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
  flex: 1;
}

.dash-academic-item-meta {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.dash-academic-item-title {
  font-size: 0.88rem;
  font-weight: 600;
  color: #1e293b;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.dash-academic-item-sub {
  font-size: 0.76rem;
  color: #64748b;
  margin-top: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.dash-academic-btn {
  padding: 6px 14px;
  border-radius: 8px;
  font-size: 0.78rem;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  border: 1px solid #2563eb;
  background: #2563eb;
  color: #ffffff;
  transition: all 150ms ease;
  flex-shrink: 0;
}

.dash-academic-btn:hover {
  background: #1d4ed8;
  border-color: #1d4ed8;
}

.dash-academic-btn.btn-outline {
  background: #ffffff;
  color: #2563eb;
}

.dash-academic-btn.btn-outline:hover {
  background: #eff6ff;
}

.dash-academic-empty {
  padding: 24px;
  text-align: center;
  color: #64748b;
  font-size: 0.85rem;
}

.dash-attention-item {
  border-radius: 12px;
  padding: 12px 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border: 1px solid transparent;
}

.dash-attention-item.item-red {
  background: #fff5f5;
  border-color: #fecdd3;
}

.dash-attention-item.item-orange {
  background: #fffbeb;
  border-color: #fde68a;
}

.dash-attention-item.item-blue {
  background: #f0f7ff;
  border-color: #bfdbfe;
}

.dash-attention-left {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.dash-badge-circle {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.82rem;
  font-weight: 700;
  flex-shrink: 0;
}

.dash-badge-circle.badge-red {
  background: #fee2e2;
  color: #e11d48;
}

.dash-badge-circle.badge-orange {
  background: #fef3c7;
  color: #d97706;
}

.dash-badge-circle.badge-blue {
  background: #dbeafe;
  color: #2563eb;
}

.dash-attention-meta {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.dash-attention-item-title {
  font-size: 0.85rem;
  font-weight: 700;
  color: #1e293b;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.dash-attention-item-sub {
  font-size: 0.73rem;
  color: #64748b;
  margin-top: 1px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.dash-btn-attention-outline {
  padding: 6px 12px;
  border-radius: 8px;
  font-size: 0.76rem;
  font-weight: 600;
  background: #ffffff;
  cursor: pointer;
  white-space: nowrap;
  transition: all 150ms ease;
  flex-shrink: 0;
}

.dash-btn-attention-outline.btn-outline-red {
  border: 1px solid #fda4af;
  color: #e11d48;
}

.dash-btn-attention-outline.btn-outline-red:hover {
  background: #e11d48;
  color: #ffffff;
}

.dash-btn-attention-outline.btn-outline-orange {
  border: 1px solid #fcd34d;
  color: #d97706;
}

.dash-btn-attention-outline.btn-outline-orange:hover {
  background: #d97706;
  color: #ffffff;
}

.dash-btn-attention-outline.btn-outline-blue {
  border: 1px solid #93c5fd;
  color: #2563eb;
}

.dash-btn-attention-outline.btn-outline-blue:hover {
  background: #2563eb;
  color: #ffffff;
}

/* 4. Dashboard Main Stack / Flow Layout */
.dash-main-two-col,
.dash-main-flow,
.dash-split-layout {
  display: flex;
  flex-direction: column;
  gap: 20px;
  width: 100%;
}

.dash-col-left,
.dash-col-right {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

/* 5. General Dashboard Panel Card */
.dash-panel-card {
  background: #ffffff;
  border-radius: 14px;
  border: 1px solid #e2e8f0;
  padding: 20px 22px;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.03);
}

.dash-panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
}

.dash-panel-title-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
}

.dash-panel-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}

.dash-panel-icon svg {
  width: 18px;
  height: 18px;
  display: block;
}

.dash-panel-title {
  font-size: 0.98rem;
  font-weight: 700;
  color: #1e293b;
  margin: 0;
}

/* Today's Overview Grid */
.dash-overview-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}

.dash-overview-pill {
  background: #f8fafc;
  border: 1px solid #eef2f6;
  border-radius: 12px;
  padding: 12px 14px;
  display: flex;
  align-items: center;
  gap: 12px;
  transition: transform 150ms ease, box-shadow 150ms ease;
}

.dash-overview-pill:hover {
  transform: translateY(-1px);
  box-shadow: 0 3px 8px rgba(15, 23, 42, 0.04);
}

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

.dash-pill-icon.icon-blue {
  background: #dbeafe;
  color: #2563eb;
}

.dash-pill-icon.icon-green {
  background: #dcfce7;
  color: #16a34a;
}

.dash-pill-icon svg {
  width: 18px;
  height: 18px;
}

.dash-pill-icon .currency-symbol {
  font-weight: 700;
  font-size: 1.15rem;
  line-height: 1;
}

.dash-pill-meta {
  display: flex;
  flex-direction: column;
}

.dash-pill-label {
  font-size: 0.74rem;
  font-weight: 600;
  color: #64748b;
}

.dash-pill-num {
  font-size: 1.25rem;
  font-weight: 700;
  color: #0f172a;
  line-height: 1.2;
  font-family: var(--font-heading);
}

.dash-pill-sub {
  font-size: 0.7rem;
  color: #94a3b8;
  margin-top: 1px;
}

/* Fee Overview Donut Chart & Trends */
.dash-fee-content {
  display: flex;
  flex-direction: column;
}

.dash-donut-row {
  display: flex;
  align-items: center;
  justify-content: space-around;
  gap: 24px;
  padding-bottom: 20px;
  border-bottom: 1px solid #f1f5f9;
}

.dash-donut-chart-wrap {
  position: relative;
  width: 136px;
  height: 136px;
  flex-shrink: 0;
}

.dash-donut-svg {
  width: 100%;
  height: 100%;
  transform: rotate(-90deg);
}

.dash-donut-center {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  pointer-events: none;
}

.dash-donut-amount {
  font-size: 1.05rem;
  font-weight: 800;
  color: #0f172a;
  line-height: 1.15;
  font-family: var(--font-heading);
}

.dash-donut-lbl {
  font-size: 0.68rem;
  font-weight: 600;
  color: #64748b;
  margin-top: 2px;
}

.dash-fee-legend {
  display: flex;
  flex-direction: column;
  gap: 12px;
  flex: 1;
  max-width: 260px;
}

.dash-legend-row {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.84rem;
}

.dash-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  flex-shrink: 0;
}

.dash-dot.dot-green {
  background: #10b981;
}

.dash-dot.dot-orange {
  background: #f59e0b;
}

.dash-dot.dot-red {
  background: #ef4444;
}

.dash-legend-name {
  color: #475569;
  font-weight: 500;
  width: 80px;
}

.dash-legend-val {
  color: #0f172a;
  font-weight: 700;
  min-width: 65px;
}

.dash-legend-pct {
  color: #94a3b8;
  font-size: 0.78rem;
  margin-left: auto;
  font-weight: 600;
}

.dash-trend-block {
  padding-top: 16px;
}

.dash-trend-title {
  font-size: 0.78rem;
  font-weight: 600;
  color: #64748b;
  display: block;
  margin-bottom: 12px;
}

.dash-trend-bars {
  display: flex;
  align-items: flex-end;
  justify-content: space-around;
  gap: 16px;
  height: 105px;
  padding: 0 10px;
}

.dash-trend-col {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  flex: 1;
  max-width: 65px;
}

.dash-trend-val {
  font-size: 0.72rem;
  font-weight: 600;
  color: #64748b;
}

.dash-bar-track {
  width: 32px;
  height: 65px;
  background: #e0f2fe;
  border-radius: 6px;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
}

.dash-bar-fill {
  width: 100%;
  background: #2563eb;
  border-radius: 6px;
  transition: height 400ms ease;
}

.dash-trend-lbl {
  font-size: 0.72rem;
  font-weight: 600;
  color: #94a3b8;
}

/* Quick Actions Horizontal Row (Low Height) */
#dashPanelQuickActions {
  padding: 16px 20px;
}

#dashPanelQuickActions .dash-panel-header {
  margin-bottom: 12px;
}

.dash-actions-stack {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  width: 100%;
}

.dash-action-btn {
  width: auto;
  flex: 1 1 0;
  min-width: 135px;
  height: 40px;
  padding: 0 14px;
  border-radius: 8px;
  font-size: 0.84rem;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  white-space: nowrap;
  gap: 8px;
  cursor: pointer;
  transition: all 180ms ease;
  border: none;
  box-sizing: border-box;
}

.dash-actions-stack .dash-action-btn[style*="display: none"] {
  display: none !important;
}

.dash-action-btn.btn-primary-action {
  background: #1d68ff;
  color: #ffffff;
  box-shadow: 0 3px 10px rgba(29, 104, 255, 0.28);
}

.dash-action-btn.btn-primary-action:hover {
  background: #1557d6;
  box-shadow: 0 4px 14px rgba(29, 104, 255, 0.38);
  transform: translateY(-1px);
}

.dash-action-btn.btn-secondary-action {
  background: #f0f5ff;
  color: #1e40af;
  border: 1px solid #dbeafe;
}

.dash-action-btn.btn-secondary-action:hover {
  background: #e0edff;
  border-color: #bfdbfe;
  transform: translateY(-1px);
}

.dash-btn-symbol {
  font-size: 1.2rem;
  font-weight: 600;
  line-height: 1;
}

.dash-action-btn svg,
.dash-btn-icon {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  stroke-width: 2.4;
}

.currency-symbol-sm {
  font-size: 1rem;
  font-weight: 700;
  line-height: 1;
}

/* Student Performance Grid */
.dash-performance-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.dash-perf-card {
  border-radius: 12px;
  padding: 14px 8px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  border: 1px solid transparent;
  transition: transform 150ms ease;
}

.dash-perf-card:hover {
  transform: translateY(-1px);
}

.dash-perf-card.bg-blue-tint {
  background: #f0f7ff;
  border-color: #dbeafe;
}

.dash-perf-card.bg-green-tint {
  background: #f0fdf4;
  border-color: #dcfce7;
}

.dash-perf-card.bg-red-tint {
  background: #fef2f2;
  border-color: #fee2e2;
}

.dash-perf-card.bg-purple-tint {
  background: #faf5ff;
  border-color: #f3e8ff;
}

.dash-perf-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  margin-bottom: 2px;
  flex-shrink: 0;
}

.dash-perf-icon svg {
  width: 22px;
  height: 22px;
  display: block;
}

.dash-perf-icon.icon-blue {
  color: #2563eb;
}

.dash-perf-icon.icon-green {
  color: #16a34a;
}

.dash-perf-icon.icon-red {
  color: #dc2626;
}

.dash-perf-icon.icon-purple {
  color: #7c3aed;
}

.dash-perf-num {
  font-size: 1.35rem;
  font-weight: 700;
  color: #0f172a;
  line-height: 1.2;
  font-family: var(--font-heading);
}

.dash-perf-lbl {
  font-size: 0.72rem;
  font-weight: 600;
  color: #64748b;
  white-space: nowrap;
}

/* Responsive Breakpoints for Dashboard */
@media (max-width: 1280px) {
  .dash-stats-row {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 1024px) {
  .dash-split-layout {
    grid-template-columns: minmax(0, 1fr);
  }

  .dash-overview-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 768px) {
  .dashboard-tm-container {
    padding: 16px 14px 36px;
    gap: 16px;
  }

  .dash-stats-row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .dash-attention-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .dash-performance-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 480px) {
  .dash-stats-row {
    grid-template-columns: minmax(0, 1fr);
  }

  .dash-overview-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}


/* ==========================================================================
   Cross-Browser Safari, Chrome, Firefox & Edge Overflow & Layout Hardening
   Eliminates WebKit border-radius color bleeding, horizontal overflows,
   and unconstrained flex/grid expansion.
   ========================================================================== */

/* 1. Global Viewport & Container Containment */
html,
body {
  width: 100% !important;
  max-width: 100% !important;
  overflow-x: hidden !important;
  position: relative !important;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

*,
*::before,
*::after {
  box-sizing: border-box;
  -webkit-box-sizing: border-box;
}

/* 2. WebKit Border-Radius Color Bleed & Element Clipping Fix */
.dash-stat-card,
.dash-attention-card,
.dash-attention-item,
.dash-panel-card,
.dash-overview-pill,
.dash-perf-card,
.card,
.canvas-pane,
.questions-pane,
.page-view-header,
.page-view-body,
.qb-session-card,
.assess-card,
.attend-student-card,
.student-stat-card,
.badge,
.pill {
  overflow: hidden !important;
  -webkit-mask-image: -webkit-radial-gradient(white, black);
  mask-image: radial-gradient(white, black);
  isolation: isolate;
  min-width: 0;
  max-width: 100%;
  box-sizing: border-box;
}

/* 3. Responsive Breakpoints for Dashboard Stat Cards (Prevents 6-card blowout on Mac/Safari) */
.dash-stats-row {
  display: grid !important;
  grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
  gap: 14px !important;
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}

@media (max-width: 1536px) {
  .dash-stats-row {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 1024px) {
  .dash-stats-row {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .dash-split-layout {
    grid-template-columns: minmax(0, 1fr) !important;
  }
}

@media (max-width: 580px) {
  .dash-stats-row {
    grid-template-columns: minmax(0, 1fr) !important;
  }
}

/* 4. Canvas & Layout Responsive Safety */
.canvas-pane,
.questions-pane {
  min-width: 0 !important;
  min-height: 0 !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}

@media (max-width: 1024px) {
  .app-layout {
    grid-template-columns: minmax(0, 1fr) !important;
    height: auto !important;
    min-height: 100% !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    padding: 12px 14px 30px !important;
    gap: 14px !important;
  }

  .canvas-pane {
    height: 520px !important;
    min-height: 440px !important;
  }

  .questions-pane {
    height: auto !important;
    min-height: 500px !important;
  }
}

/* 5. Normalize Form Inputs in WebKit */
input[type="text"],
input[type="number"],
input[type="email"],
input[type="password"],
input[type="search"],
select,
textarea {
  -webkit-appearance: none;
  appearance: none;
  max-width: 100%;
  box-sizing: border-box;
}

/* 6. Prevent Table Container Spillover */
.table-responsive,
.dash-table-responsive {
  width: 100% !important;
  max-width: 100% !important;
  overflow-x: auto !important;
  -webkit-overflow-scrolling: touch !important;
  box-sizing: border-box !important;
}


/* ==========================================================================
   MASTER RESPONSIVE & MOBILE ALIGNMENT OVERHAUL (Screens <= 768px & <= 480px)
   Full cross-browser consistency: Safari, Chrome, Firefox & Edge.
   Guarantees no horizontal overflow, flawless alignments, and touch-friendly controls.
   ========================================================================== */

@media (max-width: 768px) {

  /* 1. Global Viewport & Container Containment */
  html,
  body {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: hidden !important;
    position: relative !important;
    margin: 0 !important;
    padding: 0 !important;
    -webkit-text-size-adjust: 100% !important;
    text-size-adjust: 100% !important;
  }

  *,
  *::before,
  *::after {
    box-sizing: border-box !important;
    -webkit-box-sizing: border-box !important;
  }

  /* Prevent automatic iOS Safari zoom while keeping crisp typography */
  input[type="text"],
  input[type="password"],
  input[type="email"],
  input[type="number"],
  input[type="search"],
  input[type="tel"],
  select,
  textarea {
    font-size: 16px !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  /* App Shell & Viewport Containment */
  .app-container {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: hidden !important;
    display: flex !important;
    flex-direction: column !important;
    min-height: 100vh !important;
    min-height: 100dvh !important;
  }

  .app-main-content {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: hidden !important;
    flex: 1 1 auto !important;
    display: flex !important;
    flex-direction: column !important;
  }

  /* 2. Topbar & Brand Header on Mobile */
  .main-topbar {
    height: 52px !important;
    min-height: 52px !important;
    padding: 0 12px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    background: #ffffff !important;
    border-bottom: 1px solid var(--border-color, #e2e8f0) !important;
    position: sticky !important;
    top: 0 !important;
    z-index: 100 !important;
  }

  .mobile-topbar-brand {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    min-width: 0 !important;
    flex: 1 1 auto !important;
    overflow: hidden !important;
  }

  .mobile-hamburger-btn {
    width: 42px !important;
    height: 42px !important;
    min-width: 42px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 8px !important;
    border: 1px solid var(--border-color, #e2e8f0) !important;
    background: #ffffff !important;
    color: var(--text-primary, #0f172a) !important;
    cursor: pointer !important;
    padding: 0 !important;
    flex-shrink: 0 !important;
  }

  .mobile-brand-title {
    font-size: 1.05rem !important;
    font-weight: 700 !important;
    color: var(--text-primary, #0f172a) !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    letter-spacing: -0.01em !important;
  }

  /* Breadcrumb Navigation on Mobile */
  .app-breadcrumb-bar {
    padding: 8px 12px !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    white-space: nowrap !important;
    background: #f8fafc !important;
    border-bottom: 1px solid var(--border-color, #e2e8f0) !important;
    display: flex !important;
    align-items: center !important;
  }

  .app-breadcrumb-bar::-webkit-scrollbar {
    display: none !important;
  }

  .app-breadcrumb-list {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    padding: 0 !important;
    margin: 0 !important;
    list-style: none !important;
  }

  .app-breadcrumb-item {
    font-size: 0.8rem !important;
    display: inline-flex !important;
    align-items: center !important;
  }

  /* 3. Global Page View Layout & Spacing */
  .page-view {
    padding: 12px 10px 36px !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    overflow-x: hidden !important;
  }

  .page-view-container {
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
    gap: 12px !important;
    box-sizing: border-box !important;
  }

  .page-view-header {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    padding: 12px 14px !important;
    gap: 12px !important;
    border-radius: 12px !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  .page-view-header-info {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    width: 100% !important;
    min-width: 0 !important;
  }

  .page-view-icon {
    width: 34px !important;
    height: 34px !important;
    min-width: 34px !important;
    max-width: 34px !important;
    flex: 0 0 34px !important;
    border-radius: 8px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  .page-view-title {
    font-size: 1.1rem !important;
    font-weight: 700 !important;
    margin: 0 !important;
    line-height: 1.25 !important;
    word-break: break-word !important;
  }

  .page-view-actions {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: stretch !important;
    gap: 8px !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  .page-view-actions .btn {
    flex: 1 1 calc(50% - 4px) !important;
    min-width: 0 !important;
    font-size: 0.82rem !important;
    padding: 8px 12px !important;
    min-height: 38px !important;
    text-align: center !important;
    justify-content: center !important;
    box-sizing: border-box !important;
  }

  /* 4. Dashboard Mobile Refinements */
  .dashboard-tm-container {
    padding: 12px 10px 36px !important;
    gap: 14px !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  .dash-greeting-bar {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 12px !important;
    width: 100% !important;
    padding-bottom: 4px !important;
  }

  .dash-greeting-left {
    width: 100% !important;
  }

  .dash-greeting-headline {
    font-size: 1.25rem !important;
    gap: 8px !important;
  }

  .dash-greeting-text {
    font-size: 1.25rem !important;
    font-weight: 700 !important;
    line-height: 1.2 !important;
  }

  .dash-greeting-meta {
    font-size: 0.82rem !important;
    gap: 8px !important;
    flex-wrap: wrap !important;
    margin-top: 4px !important;
  }

  .dash-greeting-filters {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    width: 100% !important;
    gap: 8px !important;
  }

  .dash-filter-item {
    width: 100% !important;
    min-width: 0 !important;
  }

  .dash-filter-label {
    font-size: 0.7rem !important;
    font-weight: 600 !important;
    margin-bottom: 2px !important;
  }

  .dash-select-wrap {
    width: 100% !important;
  }

  .dash-top-select {
    width: 100% !important;
    min-width: 0 !important;
    padding: 7px 22px 7px 8px !important;
    font-size: 0.78rem !important;
    min-height: 38px !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    background-size: 12px 12px !important;
    background-position: right 8px center !important;
  }

  .dash-stats-row {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px !important;
    width: 100% !important;
  }

  .dash-stat-card {
    padding: 12px 14px !important;
    border-radius: 12px !important;
    min-width: 0 !important;
  }

  .dash-stat-title {
    font-size: 0.75rem !important;
  }

  .dash-stat-value {
    font-size: 1.35rem !important;
    line-height: 1.2 !important;
  }

  .dash-stat-sub {
    font-size: 0.72rem !important;
  }

  .dash-split-layout {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 14px !important;
    width: 100% !important;
  }

  .dash-col-left,
  .dash-col-right {
    width: 100% !important;
    min-width: 0 !important;
  }

  .dash-overview-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px !important;
  }

  .dash-overview-pill {
    padding: 10px 12px !important;
    min-width: 0 !important;
    border-radius: 10px !important;
  }

  .dash-pill-num {
    font-size: 1.15rem !important;
  }

  .dash-pill-label {
    font-size: 0.72rem !important;
  }

  .dash-donut-row {
    flex-direction: column !important;
    align-items: center !important;
    gap: 16px !important;
  }

  .dash-fee-legend {
    width: 100% !important;
  }

  .dash-attention-item {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 10px !important;
    padding: 12px 14px !important;
  }

  .dash-btn-attention-outline {
    width: 100% !important;
    min-height: 38px !important;
    text-align: center !important;
    justify-content: center !important;
  }

  .dash-performance-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
  }

  .dash-actions-stack {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
    width: 100% !important;
  }

  .dash-action-btn {
    flex: 1 1 calc(50% - 8px) !important;
    min-width: 130px !important;
    min-height: 40px !important;
    padding: 8px 10px !important;
    font-size: 0.82rem !important;
    justify-content: center !important;
    border-radius: 8px !important;
    text-align: center !important;
  }

  /* 5. Upload View on Mobile */
  .app-layout {
    grid-template-columns: minmax(0, 1fr) !important;
    height: auto !important;
    min-height: 100% !important;
    overflow: visible !important;
    gap: 14px !important;
    padding: 10px 10px 36px !important;
  }

  .canvas-pane {
    height: auto !important;
    min-height: 380px !important;
    max-height: 520px !important;
    width: 100% !important;
    border-radius: 12px !important;
  }

  .canvas-header-bar {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 8px !important;
    padding: 10px 12px !important;
  }

  .canvas-toolbar {
    width: 100% !important;
  }

  .toolbar-group {
    display: flex !important;
    width: 100% !important;
    gap: 8px !important;
    justify-content: space-between !important;
  }

  .toolbar-group .btn,
  .toolbar-group .btn-toolbar-danger {
    flex: 1 1 50% !important;
    min-height: 38px !important;
    font-size: 0.8rem !important;
    justify-content: center !important;
    padding: 6px 10px !important;
    white-space: nowrap !important;
  }

  .questions-pane {
    width: 100% !important;
    height: auto !important;
    min-height: 400px !important;
    border-radius: 12px !important;
  }

  .questions-header {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 10px !important;
    padding: 12px 14px !important;
  }

  .questions-header-actions {
    display: flex !important;
    width: 100% !important;
    gap: 8px !important;
  }

  .questions-header-actions .btn-primary,
  .questions-header-actions .btn-clear-all {
    flex: 1 1 50% !important;
    min-height: 38px !important;
    justify-content: center !important;
    font-size: 0.82rem !important;
  }

  .hierarchy-bar-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px 10px !important;
  }

  .question-card {
    padding: 14px 12px !important;
    margin-bottom: 12px !important;
    border-radius: 10px !important;
    width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
    flex: 0 0 auto !important;
    flex-shrink: 0 !important;
    min-height: fit-content !important;
    height: auto !important;
    overflow: visible !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
  }

  .question-card-header {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    gap: 8px !important;
    flex-wrap: wrap !important;
  }

  .option-row {
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    width: 100% !important;
    min-width: 0 !important;
  }

  .option-input {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    width: 100% !important;
    font-size: 0.86rem !important;
    padding: 7px 10px !important;
  }

  /* 6. Filter Bars & Toolbar Cards across All Pages */
  .qb-filter-bar,
  .attend-toolbar-card,
  .assess-filter-bar,
  .student-filter-bar,
  .fee-filter-bar {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 10px !important;
    padding: 12px 14px !important;
    border-radius: 12px !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  .qb-filter-group,
  .attend-filter-item,
  .assess-filter-group,
  .student-filter-group {
    width: 100% !important;
    min-width: 0 !important;
  }

  .qb-filter-select,
  .qb-filter-input,
  .attend-filter-select,
  .attend-filter-input,
  .assess-filter-select,
  .assess-filter-input {
    width: 100% !important;
    min-width: 0 !important;
    min-height: 38px !important;
    font-size: 0.85rem !important;
  }

  /* 7. Tables & Mobile Cards Alignment */
  .table-responsive,
  .dash-table-responsive {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    border-radius: 10px !important;
    margin: 0 !important;
    box-sizing: border-box !important;
  }

  .ux-mobile-cards-list,
  .attend-mobile-cards-list {
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
    width: 100% !important;
    padding: 0 !important;
    box-sizing: border-box !important;
  }

  .ux-mobile-card {
    background: #ffffff !important;
    border: 1px solid var(--border-color, #e2e8f0) !important;
    border-radius: 12px !important;
    padding: 12px 14px !important;
    width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.04) !important;
  }

  .attend-student-card.ux-entity-card,
  .attend-student-card {
    background: #ffffff !important;
    border: 1px solid var(--border-color, #e2e8f0) !important;
    border-radius: 12px !important;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.04) !important;
    padding: 0 !important;
    width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
    margin: 0 !important;
  }

  /* 8. Modals Mobile Sizing & Scroll */
  .modal-backdrop {
    padding: 8px !important;
    align-items: center !important;
    justify-content: center !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }

  .modal-card,
  .modal-card-lg,
  .modal-card-xl,
  .modal-card-fullscreen,
  .qb-modal {
    width: 100% !important;
    max-width: calc(100vw - 16px) !important;
    max-height: calc(100dvh - 16px) !important;
    max-height: calc(100vh - 16px) !important;
    border-radius: 12px !important;
    margin: auto !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
  }

  .modal-header {
    padding: 12px 14px !important;
    flex-shrink: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 8px !important;
  }

  .modal-title,
  .modal-header h2,
  .modal-header h3 {
    font-size: 1.05rem !important;
    line-height: 1.25 !important;
    margin: 0 !important;
    word-break: break-word !important;
  }

  .modal-close-btn {
    width: 36px !important;
    height: 36px !important;
    min-width: 36px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 6px !important;
    flex-shrink: 0 !important;
  }

  .modal-body {
    padding: 12px 14px !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    flex: 1 1 auto !important;
    min-height: 0 !important;
    max-height: none !important;
  }

  .modal-footer {
    padding: 10px 14px !important;
    flex-shrink: 0 !important;
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
    border-top: 1px solid var(--border-color, #e2e8f0) !important;
    justify-content: flex-end !important;
  }

  .modal-footer .btn {
    flex: 1 1 calc(50% - 4px) !important;
    min-height: 40px !important;
    justify-content: center !important;
    font-size: 0.85rem !important;
  }

  /* Form Grids within Modals */
  .form-row,
  .grid-2-col,
  .modal-grid-2 {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 10px !important;
    width: 100% !important;
  }

  .form-field-group {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
  }

  /* 9. Pagination on Mobile */
  .app-pagination-bar {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 10px !important;
    padding: 10px 12px !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  .pagination-info {
    text-align: center !important;
    font-size: 0.8rem !important;
  }

  .pagination-actions {
    justify-content: space-between !important;
    width: 100% !important;
    gap: 8px !important;
  }

  .pagination-nav-group {
    flex: 1 !important;
    justify-content: flex-end !important;
    flex-wrap: wrap !important;
    gap: 3px !important;
  }

  .pagination-text {
    display: none !important;
  }

  .pagination-btn {
    min-width: 28px !important;
    height: 28px !important;
    padding: 0 4px !important;
    font-size: 0.78rem !important;
  }
}

/* Extra Mobile Narrow Screen Tuning (<= 480px) */
@media (max-width: 480px) {
  .page-view {
    padding: 8px 6px 32px !important;
  }

  .dashboard-tm-container {
    padding: 8px 6px 32px !important;
  }

  .dash-stats-row {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 8px !important;
  }

  .dash-overview-grid {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 8px !important;
  }

  .dash-performance-grid {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 8px !important;
  }

  .page-view-actions .btn {
    flex: 1 1 100% !important;
    width: 100% !important;
  }

  .hierarchy-bar-grid {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 6px !important;
  }

  .modal-footer .btn {
    flex: 1 1 100% !important;
    width: 100% !important;
  }
}


/* ==========================================================================
   UNIVERSAL APPLICATION-WIDE RESPONSIVE ALIGNMENT & SCROLLING ENGINE
   Breakpoints: 320px, 375px, 390px, 430px, 768px, 1024px, 1366px, 1920px
   Cross-Browser: iOS Safari (WebKit), Chrome, Firefox & Edge
   Solves mobile scrolling locks, nested container traps, and strictly isolates views.
   ========================================================================== */

/* --------------------------------------------------------------------------
   A. GLOBAL VIEW ISOLATION (Applies across all screen sizes)
   -------------------------------------------------------------------------- */
.is-hidden,
[hidden],
[style*="display: none"],
[style*="display:none"],
.app-layout.is-hidden,
.app-layout[style*="display: none"],
.app-layout[style*="display:none"],
#viewUploadPage.is-hidden,
#viewUploadPage[style*="display: none"],
#viewUploadPage[style*="display:none"],
.page-view.is-hidden,
.page-view[style*="display: none"],
.page-view[style*="display:none"] {
  display: none !important;
}

/* --------------------------------------------------------------------------
   B. MOBILE SCREENS (<= 768px): Unified Scrolling & Layout Engine
   -------------------------------------------------------------------------- */
@media (max-width: 768px) {

  /* 1. Root & Shell Scrolling: Natural page scroll without nested trapping */
  html {
    height: auto !important;
    min-height: 100% !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }

  body {
    height: auto !important;
    min-height: 100% !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    position: static !important;
    touch-action: pan-y !important;
  }

  .app-container {
    height: auto !important;
    min-height: 100vh !important;
    min-height: 100dvh !important;
    max-height: none !important;
    overflow: visible !important;
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  .app-main-content {
    height: auto !important;
    min-height: calc(100vh - 52px) !important;
    min-height: calc(100dvh - 52px) !important;
    max-height: none !important;
    overflow: visible !important;
    flex: 1 1 auto !important;
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  .main-topbar {
    position: sticky !important;
    top: 0 !important;
    z-index: 100 !important;
    background: #ffffff !important;
    flex-shrink: 0 !important;
  }

  /* Lock background scrolling ONLY when mobile sidebar drawer or modal is open */
  body.sidebar-drawer-open {
    overflow: hidden !important;
    touch-action: none !important;
  }

  /* Mobile sidebar scrolls independently inside drawer */
  .app-sidebar.mobile-open {
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    touch-action: pan-y !important;
  }

  /* 2. Page View Containers */
  .page-view,
  #viewDashboardPage.page-view,
  #viewQuestionBankPage.page-view,
  #viewAssessmentsPage.page-view,
  #viewTestHistoryPage.page-view,
  #viewSchoolPage.page-view,
  #viewStudentPage.page-view,
  #viewFeePage.page-view,
  #viewAttendancePage.page-view,
  #viewUserPage.page-view,
  #viewConfigPage.page-view {
    padding: 10px 12px 36px 12px !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow: visible !important;
    flex: 1 0 auto !important;
    box-sizing: border-box !important;
  }

  .page-view-container {
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
    box-sizing: border-box !important;
  }

  /* 3. Page View Header & Action Buttons */
  .page-view-header {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    padding: 12px 14px !important;
    gap: 12px !important;
    background: #ffffff !important;
    border: 1px solid var(--border-color, #e2e8f0) !important;
    border-radius: 12px !important;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.04) !important;
    width: 100% !important;
    box-sizing: border-box !important;
    margin: 0 !important;
  }

  .page-view-header-info {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    width: 100% !important;
    min-width: 0 !important;
  }

  .page-view-icon {
    width: 36px !important;
    height: 36px !important;
    min-width: 36px !important;
    border-radius: 9px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0 !important;
  }

  .page-view-icon svg {
    width: 18px !important;
    height: 18px !important;
  }

  .page-view-title {
    font-size: 1.12rem !important;
    font-weight: 700 !important;
    color: #0f172a !important;
    line-height: 1.25 !important;
    margin: 0 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  .page-view-actions {
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
    width: 100% !important;
    margin: 0 !important;
  }

  .page-view-actions .btn,
  .page-view-actions .btn-sm,
  .page-view-actions button {
    width: 100% !important;
    height: 38px !important;
    min-height: 38px !important;
    padding: 0 14px !important;
    font-size: 0.82rem !important;
    font-weight: 600 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    border-radius: 8px !important;
    box-sizing: border-box !important;
    white-space: nowrap !important;
    margin: 0 !important;
  }

  .page-view-actions .btn svg,
  .page-view-actions button svg {
    width: 15px !important;
    height: 15px !important;
    flex-shrink: 0 !important;
  }

  /* 4. Summary Statistic Strips (Students, Fees, Users, Dashboard) */
  .ux-summary-strip {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 8px !important;
    width: 100% !important;
    box-sizing: border-box !important;
    margin: 0 !important;
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
    box-shadow: none !important;
  }

  .ux-summary-strip.ux-summary-4col,
  .fee-stats-grid,
  .dash-overview-grid {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
    width: 100% !important;
    box-sizing: border-box !important;
    margin: 0 !important;
  }

  .ux-summary-card,
  .fee-stat-card {
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
    padding: 10px 10px 8px 10px !important;
    background: #ffffff !important;
    border: 1px solid var(--border-color, #e2e8f0) !important;
    border-radius: 10px !important;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.04) !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
    margin: 0 !important;
  }

  .ux-summary-label,
  .fee-stat-label {
    font-size: 0.65rem !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.04em !important;
    color: #475569 !important;
    line-height: 1.2 !important;
    display: flex !important;
    align-items: flex-start !important;
    min-height: 26px !important;
    width: 100% !important;
    margin: 0 !important;
    word-break: break-word !important;
  }

  .ux-summary-val,
  .fee-stat-value {
    font-size: 1.28rem !important;
    font-weight: 800 !important;
    color: #0f172a !important;
    line-height: 1.1 !important;
    margin-top: 4px !important;
    margin-bottom: 0 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  /* 5. Filter Bars (Question Bank, Assessments, Students, Fees, Schools) */
  .qb-filter-bar,
  .fee-filter-bar,
  .ux-school-toolbar,
  .attend-toolbar-card {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px 10px !important;
    background: #ffffff !important;
    border: 1px solid var(--border-color, #e2e8f0) !important;
    border-radius: 12px !important;
    padding: 12px 14px !important;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.04) !important;
    width: 100% !important;
    box-sizing: border-box !important;
    margin: 0 !important;
  }

  .qb-filter-group {
    display: flex !important;
    flex-direction: column !important;
    gap: 4px !important;
    width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
  }

  .qb-filter-group.qb-search-group,
  .qb-filter-group:has(.qb-search-box),
  .qb-filter-group:has(.qb-search-input),
  .ux-school-toolbar .qb-filter-group {
    grid-column: 1 / -1 !important;
  }

  .qb-filter-label {
    font-size: 0.68rem !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.04em !important;
    color: #475569 !important;
    margin-bottom: 2px !important;
  }

  .qb-filter-select,
  .form-input,
  .qb-search-input {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    height: 38px !important;
    min-height: 38px !important;
    padding: 0 10px !important;
    font-size: 0.82rem !important;
    border-radius: 8px !important;
    border: 1px solid var(--border-color, #cbd5e1) !important;
    background: #ffffff !important;
    color: #0f172a !important;
    box-sizing: border-box !important;
    -webkit-appearance: none !important;
    appearance: none !important;
  }

  select.qb-filter-select {
    padding-right: 28px !important;
    background: #ffffff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23475569' stroke-width='2.2'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E") no-repeat right 10px center !important;
    background-size: 12px !important;
  }

  .qb-search-box {
    position: relative !important;
    width: 100% !important;
    display: flex !important;
    align-items: center !important;
  }

  .qb-search-box svg {
    position: absolute !important;
    left: 12px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    color: #94a3b8 !important;
    pointer-events: none !important;
    width: 15px !important;
    height: 15px !important;
  }

  .qb-search-box .qb-search-input {
    padding-left: 34px !important;
  }

  /* 6. Attendance Module Responsive Alignment */
  .attend-stats-grid {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 6px !important;
    width: 100% !important;
    box-sizing: border-box !important;
    margin: 0 !important;
  }

  .attend-stat-card {
    padding: 8px 6px !important;
    border-radius: 8px !important;
    text-align: center !important;
  }

  .attend-stat-label {
    font-size: 0.62rem !important;
  }

  .attend-stat-value {
    font-size: 1.15rem !important;
  }

  .attend-toolbar-card {
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
    padding: 12px !important;
  }

  .attend-toolbar-left,
  .attend-toolbar-right {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    gap: 8px !important;
    width: 100% !important;
  }

  .attend-batch-pills {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 6px !important;
    width: 100% !important;
  }

  .attend-search-box {
    width: 100% !important;
  }

  /* 6B. Student, School, Fee & User Mobile Management Cards System */
  .admin-users-section {
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    padding: 0 !important;
    margin: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  .admin-users-section-header {
    background: #ffffff !important;
    border: 1px solid var(--border-color, #e2e8f0) !important;
    border-radius: 12px !important;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.04) !important;
    padding: 12px 14px !important;
    margin-bottom: 10px !important;
    box-sizing: border-box !important;
  }

  .table-responsive {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
    margin: 0 !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  .ux-mobile-cards-list {
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
    width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
    box-sizing: border-box !important;
  }

  .attend-student-card.ux-entity-card,
  .attend-student-card {
    background: #ffffff !important;
    border: 1px solid var(--border-color, #e2e8f0) !important;
    border-radius: 12px !important;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.04) !important;
    padding: 0 !important;
    width: 100% !important;
    box-sizing: border-box !important;
    margin: 0 !important;
    overflow: hidden !important;
    transition: border-color 0.18s ease, box-shadow 0.18s ease !important;
  }

  .attend-student-card.is-expanded {
    border-color: #93c5fd !important;
    box-shadow: 0 4px 12px rgba(37, 99, 235, 0.08) !important;
  }

  .attend-card-header,
  .attend-student-card-header {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    padding: 11px 12px !important;
    width: 100% !important;
    box-sizing: border-box !important;
    cursor: pointer !important;
    user-select: none !important;
  }

  .attend-card-avatar,
  .attend-student-avatar {
    width: 36px !important;
    height: 36px !important;
    min-width: 36px !important;
    border-radius: 9px !important;
    background: #eff6ff !important;
    color: #1d4ed8 !important;
    font-size: 0.88rem !important;
    font-weight: 800 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0 !important;
    border: 1px solid #dbeafe !important;
  }

  .attend-card-summary,
  .attend-student-main-info {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 2px !important;
  }

  .attend-card-name-row,
  .attend-student-name-row {
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    min-width: 0 !important;
    flex-wrap: wrap !important;
  }

  .attend-card-name,
  .attend-student-name {
    font-size: 0.88rem !important;
    font-weight: 700 !important;
    color: #0f172a !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    line-height: 1.25 !important;
  }

  .attend-card-status-badge,
  .attend-card-status-pill {
    display: inline-flex !important;
    align-items: center !important;
    padding: 2px 7px !important;
    border-radius: 6px !important;
    font-size: 0.65rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.02em !important;
    flex-shrink: 0 !important;
    white-space: nowrap !important;
    line-height: 1.2 !important;
  }

  .attend-card-submeta,
  .attend-student-submeta {
    display: flex !important;
    align-items: center !important;
    gap: 5px !important;
    font-size: 0.72rem !important;
    font-weight: 600 !important;
    color: #64748b !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    line-height: 1.2 !important;
  }

  .attend-meta-sep,
  .attend-submeta-dot {
    color: #cbd5e1 !important;
    font-weight: normal !important;
  }

  .attend-card-quick-actions,
  .attend-student-actions {
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    flex-shrink: 0 !important;
  }

  .attend-card-quick-actions .ux-card-icon-btn,
  .attend-student-actions .ux-card-icon-btn {
    width: 30px !important;
    height: 30px !important;
    min-width: 30px !important;
    border-radius: 7px !important;
    border: 1px solid #e2e8f0 !important;
    background: #f8fafc !important;
    color: #475569 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    padding: 0 !important;
    transition: all 0.15s ease !important;
  }

  .attend-card-chevron,
  .attend-accordion-chevron {
    width: 22px !important;
    height: 22px !important;
    min-width: 22px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: #94a3b8 !important;
    transition: transform 0.2s ease, color 0.2s ease !important;
  }

  .attend-student-card.is-expanded .attend-card-chevron,
  .attend-student-card.is-expanded .attend-accordion-chevron {
    transform: rotate(180deg) !important;
    color: #2563eb !important;
  }

  /* Expandable Card Body */
  .attend-card-body,
  .attend-student-card-details {
    padding: 12px 14px 14px 14px !important;
    border-top: 1px solid #f1f5f9 !important;
    background: #f8fafc !important;
    box-sizing: border-box !important;
    width: 100% !important;
  }

  .attend-card-details-grid,
  .attend-details-grid {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
    margin-bottom: 12px !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  .attend-detail-item,
  .attend-detail-cell {
    background: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 8px !important;
    padding: 7px 10px !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 2px !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
  }

  .attend-detail-item.attend-detail-full,
  .attend-detail-cell.attend-detail-full {
    grid-column: 1 / -1 !important;
  }

  .attend-detail-label {
    font-size: 0.65rem !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.04em !important;
    color: #64748b !important;
    line-height: 1.1 !important;
  }

  .attend-detail-val {
    font-size: 0.82rem !important;
    font-weight: 600 !important;
    color: #0f172a !important;
    line-height: 1.25 !important;
    word-break: break-word !important;
  }

  .ux-card-footer-actions {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    margin-top: 10px !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  .ux-card-footer-actions .btn {
    flex: 1 1 0 !important;
    min-width: 0 !important;
    height: 34px !important;
    min-height: 34px !important;
    padding: 0 8px !important;
    font-size: 0.78rem !important;
    font-weight: 600 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 5px !important;
    border-radius: 7px !important;
    box-sizing: border-box !important;
  }

  /* 7. UPLOAD PAGE RESPONSIVE MASTER ALIGNMENT (#viewUploadPage / .app-layout)
     CRITICAL: Only display when active and NOT hidden! */
  .app-layout:not(.is-hidden):not([style*="display: none"]):not([style*="display:none"]),
  #viewUploadPage.app-layout:not(.is-hidden):not([style*="display: none"]):not([style*="display:none"]) {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    max-width: 100% !important;
    padding: 10px 10px 36px 10px !important;
    gap: 14px !important;
    height: auto !important;
    min-height: 0 !important;
    overflow-x: hidden !important;
    overflow-y: visible !important;
    box-sizing: border-box !important;
  }

  /* Canvas Pane & Header Bar */
  .canvas-pane {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    border-radius: 12px !important;
    border: 1px solid var(--border-color, #e2e8f0) !important;
    background: #ffffff !important;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.04) !important;
    box-sizing: border-box !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow: hidden !important;
    display: flex !important;
    flex-direction: column !important;
    margin: 0 !important;
  }

  .canvas-header-bar {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    justify-content: space-between !important;
    height: auto !important;
    min-height: 54px !important;
    padding: 10px 16px !important;
    gap: 10px !important;
    width: 100% !important;
    box-sizing: border-box !important;
    border-bottom: 1px solid var(--border-color, #e2e8f0) !important;
    background: #ffffff !important;
    flex-shrink: 0 !important;
  }

  .pane-header-title {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    font-size: 1.05rem !important;
    font-weight: 700 !important;
    color: #0f172a !important;
    width: auto !important;
    min-width: 0 !important;
  }

  .pane-header-title span {
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  .canvas-toolbar {
    width: auto !important;
    height: auto !important;
    display: flex !important;
  }

  .toolbar-group {
    width: auto !important;
    display: flex !important;
    gap: 8px !important;
    margin-left: auto !important;
    flex-wrap: wrap !important;
  }

  .toolbar-group .btn,
  .toolbar-group .btn-toolbar-danger,
  #btnRunPageOcr,
  #btnClearImage {
    flex: 0 0 auto !important;
    min-width: 0 !important;
    height: 36px !important;
    min-height: 36px !important;
    padding: 0 14px !important;
    font-size: 0.82rem !important;
    font-weight: 600 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    border-radius: 8px !important;
    box-sizing: border-box !important;
    white-space: nowrap !important;
  }

  #btnRunPageOcr span,
  #btnClearImage span {
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  @media (max-width: 540px) {
    .canvas-header-bar {
      flex-direction: column !important;
      align-items: stretch !important;
    }

    .canvas-toolbar,
    .toolbar-group {
      width: 100% !important;
    }

    .toolbar-group .btn,
    .toolbar-group .btn-toolbar-danger,
    #btnRunPageOcr,
    #btnClearImage {
      flex: 1 1 0 !important;
    }
  }

  /* Canvas Viewport: Solid framing, responsive height, strictly self-contained */
  .canvas-viewport {
    width: 100% !important;
    max-width: 100% !important;
    min-height: 480px !important;
    height: 55vh !important;
    max-height: 650px !important;
    position: relative !important;
    overflow: hidden !important;
    background: #f8fafc !important;
    box-sizing: border-box !important;
    border-top: 1px solid #e2e8f0 !important;
    display: block !important;
    user-select: none !important;
  }

  .canvas-viewport:not(.has-image):has(#dropzoneOverlay:not(.is-hidden):not([style*="display: none"])) {
    height: auto !important;
    min-height: 280px !important;
    background: #ffffff !important;
    padding: 20px 16px !important;
    border-top: 1px solid #e2e8f0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  .zoom-controls {
    position: absolute !important;
    bottom: 16px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    background: rgba(255, 255, 255, 0.96) !important;
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
    border: 1px solid rgba(226, 232, 240, 0.95) !important;
    border-radius: 9999px !important;
    padding: 4px 12px !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    box-shadow: 0 4px 16px rgba(15, 23, 42, 0.12) !important;
    z-index: 25 !important;
  }

  .btn-zoom-action {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 28px !important;
    height: 28px !important;
    border-radius: 50% !important;
    border: none !important;
    background: transparent !important;
    color: #475569 !important;
    cursor: pointer !important;
    transition: all 0.15s ease !important;
    padding: 0 !important;
  }

  .btn-zoom-action:hover {
    background: #f1f5f9 !important;
    color: #0f172a !important;
  }

  .btn-zoom-fit {
    padding: 3px 10px !important;
    font-size: 0.78rem !important;
    font-weight: 600 !important;
    border-radius: 6px !important;
    background: transparent !important;
    color: #475569 !important;
    border: none !important;
    cursor: pointer !important;
    transition: all 0.15s ease !important;
  }

  .btn-zoom-fit:hover {
    background: #f1f5f9 !important;
    color: #0f172a !important;
  }

  .empty-upload-box {
    position: static !important;
    top: auto !important;
    left: auto !important;
    transform: none !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 auto !important;
    padding: 24px 16px !important;
    box-sizing: border-box !important;
    border-radius: 12px !important;
    border: 1.5px dashed #adcbf9 !important;
    background: #f6f9fe !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
    gap: 10px !important;
  }

  .upload-icon-circle {
    width: 48px !important;
    height: 48px !important;
    margin: 0 auto 4px auto !important;
    background: #dbeafe !important;
    color: #1d68ff !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0 !important;
  }

  .upload-icon-circle svg {
    width: 22px !important;
    height: 22px !important;
  }

  .empty-title {
    font-size: 1.05rem !important;
    font-weight: 700 !important;
    color: #0f172a !important;
    margin: 0 !important;
  }

  .empty-desc {
    font-size: 0.8rem !important;
    color: #64748b !important;
    line-height: 1.4 !important;
    margin: 0 !important;
    max-width: 100% !important;
  }

  .btn-browse-main {
    width: 100% !important;
    max-width: 220px !important;
    height: 40px !important;
    min-height: 40px !important;
    padding: 0 20px !important;
    font-size: 0.88rem !important;
    font-weight: 600 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin: 4px auto !important;
    border-radius: 8px !important;
    box-sizing: border-box !important;
    background: #1d68ff !important;
    color: #ffffff !important;
  }

  .upload-formats-hint {
    font-size: 0.72rem !important;
    color: #94a3b8 !important;
    margin-top: 4px !important;
  }

  /* Digitalized Questions Panel */
  .questions-pane {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    border-radius: 12px !important;
    border: 1px solid var(--border-color, #e2e8f0) !important;
    background: #ffffff !important;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.04) !important;
    box-sizing: border-box !important;
    height: auto !important;
    min-height: 0 !important;
    overflow: hidden !important;
    display: flex !important;
    flex-direction: column !important;
    margin: 0 !important;
  }

  .questions-header {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 10px !important;
    padding: 10px 16px !important;
    height: auto !important;
    min-height: 54px !important;
    box-sizing: border-box !important;
    border-bottom: 1px solid var(--border-color, #e2e8f0) !important;
  }

  .header-title-box {
    width: auto !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
  }

  .header-title {
    font-size: 1.05rem !important;
    font-weight: 700 !important;
    color: #0f172a !important;
    margin: 0 !important;
  }

  .questions-header-actions {
    display: flex !important;
    width: auto !important;
    gap: 8px !important;
    margin-left: auto !important;
    flex-wrap: wrap !important;
  }

  .questions-header-actions .btn-primary,
  .questions-header-actions .btn-clear-all,
  #btnSaveQuestions,
  #btnClearQuestions {
    flex: 0 0 auto !important;
    min-width: 0 !important;
    height: 36px !important;
    min-height: 36px !important;
    padding: 0 14px !important;
    justify-content: center !important;
    font-size: 0.82rem !important;
    font-weight: 600 !important;
    border-radius: 8px !important;
    box-sizing: border-box !important;
    white-space: nowrap !important;
  }

  @media (max-width: 540px) {
    .questions-header {
      flex-direction: column !important;
      align-items: stretch !important;
    }

    .questions-header-actions {
      width: 100% !important;
    }

    .questions-header-actions .btn-primary,
    .questions-header-actions .btn-clear-all,
    #btnSaveQuestions,
    #btnClearQuestions {
      flex: 1 1 0 !important;
    }
  }

  .empty-questions-box {
    padding: 36px 16px !important;
    box-sizing: border-box !important;
    text-align: center !important;
    width: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 8px !important;
  }

  .empty-icon-box {
    width: 48px !important;
    height: 48px !important;
    border-radius: 50% !important;
    background: #eff6ff !important;
    color: #1d68ff !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin: 0 auto 4px auto !important;
  }

  .empty-questions-box h3 {
    font-size: 1.05rem !important;
    font-weight: 700 !important;
    color: #0f172a !important;
    margin: 0 !important;
  }

  .empty-questions-box p {
    font-size: 0.82rem !important;
    color: #64748b !important;
    line-height: 1.4 !important;
    margin: 0 auto !important;
    max-width: 100% !important;
  }

  .question-hierarchy-bar {
    padding: 12px 14px !important;
  }

  .hierarchy-bar-grid {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px 10px !important;
  }
}

/* --------------------------------------------------------------------------
   C. NARROW MOBILE SCREENS (<= 360px - e.g. 320px Galaxy Fold / iPhone SE 1st)
   -------------------------------------------------------------------------- */
@media (max-width: 360px) {

  .page-view,
  .app-layout {
    padding: 8px 6px 30px !important;
  }

  .page-view-title {
    font-size: 1rem !important;
  }

  .ux-summary-strip {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .ux-summary-strip .ux-summary-card:last-child {
    grid-column: 1 / -1 !important;
  }

  .qb-filter-bar,
  .fee-filter-bar,
  .hierarchy-bar-grid {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .attend-stats-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .toolbar-group .btn,
  .toolbar-group .btn-toolbar-danger,
  .questions-header-actions .btn-primary,
  .questions-header-actions .btn-clear-all {
    font-size: 0.75rem !important;
    padding: 0 6px !important;
  }
}

/* --------------------------------------------------------------------------
   D. TABLET SCREENS (769px to 1024px - iPad, Android Tablets)
   -------------------------------------------------------------------------- */
@media (min-width: 769px) and (max-width: 1024px) {

  .app-layout:not(.is-hidden):not([style*="display: none"]):not([style*="display:none"]),
  #viewUploadPage.app-layout:not(.is-hidden):not([style*="display: none"]):not([style*="display:none"]) {
    grid-template-columns: minmax(0, 1fr) !important;
    height: auto !important;
    min-height: 100% !important;
    overflow-y: auto !important;
    padding: 16px 16px 36px 16px !important;
    gap: 16px !important;
  }

  .canvas-pane {
    height: auto !important;
    min-height: auto !important;
    max-height: none !important;
  }

  .canvas-viewport {
    width: 100% !important;
    max-width: 100% !important;
    min-height: 500px !important;
    height: 60vh !important;
    max-height: 680px !important;
    position: relative !important;
    overflow: hidden !important;
    background: #f8fafc !important;
    box-sizing: border-box !important;
    border-top: 1px solid #e2e8f0 !important;
    display: block !important;
  }

  .canvas-viewport:not(.has-image):has(#dropzoneOverlay:not(.is-hidden):not([style*="display: none"])) {
    height: auto !important;
    min-height: 280px !important;
    background: #ffffff !important;
    padding: 24px 16px !important;
  }

  .questions-pane {
    height: auto !important;
    min-height: 400px !important;
  }

  .page-view-actions {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
  }

  .page-view-actions .btn {
    flex: 1 1 auto !important;
    min-width: 160px !important;
  }

  .qb-filter-bar,
  .fee-filter-bar {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
}


/* ============================================================
   Collapsible Sidebar Navigation (Desktop Compact Rail & Toggle)
   ============================================================ */

/* Base transitions on sidebar */
.app-sidebar {
  transition: width 0.25s cubic-bezier(0.16, 1, 0.3, 1), min-width 0.25s cubic-bezier(0.16, 1, 0.3, 1), padding 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

/* Sidebar collapse button (in sidebar brand) */
.sidebar-collapse-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 6px;
  border: 1px solid rgba(255, 255, 255, 0.15);
  background: rgba(255, 255, 255, 0.08);
  color: #cbd5e1;
  cursor: pointer;
  transition: all 0.2s ease;
  flex-shrink: 0;
  padding: 0;
}

.sidebar-collapse-btn:hover {
  background: rgba(255, 255, 255, 0.2);
  color: #ffffff;
  border-color: rgba(255, 255, 255, 0.3);
}

.sidebar-collapse-btn svg {
  width: 15px;
  height: 15px;
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Topbar hamburger button on desktop */
@media (min-width: 769px) {
  .mobile-topbar-brand {
    display: flex !important;
    align-items: center !important;
  }

  .mobile-hamburger-btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 34px !important;
    height: 34px !important;
    border-radius: 8px !important;
    border: 1px solid var(--border-color, #e2e8f0) !important;
    background: #ffffff !important;
    color: #475569 !important;
    cursor: pointer !important;
    margin-right: 12px !important;
    transition: all 0.2s ease !important;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.05) !important;
  }

  .mobile-hamburger-btn:hover {
    background: #f8fafc !important;
    color: #0f172a !important;
    border-color: #cbd5e1 !important;
  }

  .mobile-brand-title {
    display: none !important;
  }

  /* When desktop sidebar is collapsed */
  body.sidebar-collapsed .app-sidebar {
    width: 68px !important;
    min-width: 68px !important;
    padding: 20px 8px !important;
    align-items: center !important;
  }

  body.sidebar-collapsed .sidebar-brand {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 10px !important;
    padding: 0 0 16px 0 !important;
    width: 100% !important;
  }

  body.sidebar-collapsed .sidebar-brand-left {
    justify-content: center !important;
    gap: 0 !important;
    width: 100% !important;
  }

  body.sidebar-collapsed .sidebar-brand-name {
    display: none !important;
  }

  body.sidebar-collapsed .sidebar-collapse-btn {
    width: 26px !important;
    height: 26px !important;
  }

  body.sidebar-collapsed .sidebar-collapse-btn svg {
    transform: rotate(180deg) !important;
  }

  /* In collapsed mode, hide category headers & chevrons so only icons show */
  body.sidebar-collapsed .sidebar-category-header {
    display: none !important;
  }

  body.sidebar-collapsed .sidebar-nav-group {
    position: relative !important;
    margin-bottom: 8px !important;
    padding-bottom: 8px !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
    width: 100% !important;
  }

  body.sidebar-collapsed .sidebar-nav-group:last-child {
    border-bottom: none !important;
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
  }

  /* Submenus always show cleanly in collapsed mode */
  body.sidebar-collapsed .sidebar-submenu {
    display: flex !important;
    flex-direction: column !important;
    gap: 4px !important;
    padding-left: 0 !important;
    margin-top: 0 !important;
    border-left: none !important;
    width: 100% !important;
  }

  /* Individual nav items */
  body.sidebar-collapsed .sidebar-nav-item {
    justify-content: center !important;
    padding: 10px 0 !important;
    width: 100% !important;
    gap: 0 !important;
  }

  body.sidebar-collapsed .sidebar-nav-item span {
    display: none !important;
  }

  body.sidebar-collapsed .sidebar-nav-item svg {
    width: 18px !important;
    height: 18px !important;
    margin: 0 !important;
    flex-shrink: 0 !important;
  }

  /* Sidebar footer (User profile & logout/login) */
  body.sidebar-collapsed .sidebar-footer {
    padding-top: 12px !important;
    align-items: center !important;
    width: 100% !important;
  }

  body.sidebar-collapsed .sidebar-user-info {
    justify-content: center !important;
    padding: 6px !important;
    background: transparent !important;
    border: none !important;
    margin-bottom: 6px !important;
  }

  body.sidebar-collapsed .sidebar-user-details {
    display: none !important;
  }

  body.sidebar-collapsed .sidebar-logout-btn span,
  body.sidebar-collapsed .sidebar-login-btn span {
    display: none !important;
  }

  body.sidebar-collapsed .sidebar-logout-btn,
  body.sidebar-collapsed .sidebar-login-btn {
    justify-content: center !important;
    padding: 8px 0 !important;
    width: 100% !important;
    gap: 0 !important;
  }

  body.sidebar-collapsed .sidebar-logout-btn svg,
  body.sidebar-collapsed .sidebar-login-btn svg {
    width: 16px !important;
    height: 16px !important;
    margin: 0 !important;
  }
}

/* On mobile, collapse button is hidden because off-canvas drawer is used */
@media (max-width: 768px) {
  .sidebar-collapse-btn {
    display: none !important;
  }
}


/* ==========================================================================
   MASTER ADAPTIVE LAYOUT & SCREEN SPACE OPTIMIZATION ENGINE
   Guarantees optimal utilization of width and height across all display tiers:
   - Ultra-Wide & 4K Displays (>= 1600px)
   - Full HD Desktops (1200px - 1599px)
   - Laptops & Compact Desktops (1025px - 1199px)
   - Tablets & iPad Pro (769px - 1024px)
   - Mobile Phones & Handhelds (<= 768px and <= 480px)
   Eliminates wasted space, empty margins, content overflow, and layout clipping.
   ========================================================================== */

/* 1. Global Viewport & Shell Fluid Width */
.page-view-container,
.dashboard-tm-container {
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
  box-sizing: border-box !important;
}

/* 2. Fluid Desktop & Laptop Spacing (>= 1025px) */
@media (min-width: 1025px) {
  .page-view {
    width: 100% !important;
    max-width: 100% !important;
    padding: clamp(14px, 1.4vw, 22px) clamp(16px, 1.8vw, 32px) 36px clamp(16px, 1.8vw, 32px) !important;
    box-sizing: border-box !important;
  }

  .app-breadcrumb-bar {
    padding: 8px clamp(16px, 1.8vw, 32px) !important;
  }

  /* Upload Page on Desktop: Maximize Available Height and Width */
  .app-layout:not(.is-hidden):not([style*="display: none"]):not([style*="display:none"]),
  #viewUploadPage.app-layout:not(.is-hidden):not([style*="display: none"]):not([style*="display:none"]) {
    display: grid !important;
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr) !important;
    gap: 16px !important;
    width: 100% !important;
    max-width: 100% !important;
    height: calc(100vh - 86px) !important;
    height: calc(100dvh - 86px) !important;
    padding: 14px clamp(16px, 1.8vw, 32px) 16px clamp(16px, 1.8vw, 32px) !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
  }

  .canvas-pane {
    height: 100% !important;
    min-height: 0 !important;
    max-height: none !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
  }

  .questions-pane {
    height: 100% !important;
    min-height: 0 !important;
    max-height: none !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
  }

  .canvas-viewport {
    flex: 1 1 0 !important;
    min-height: 0 !important;
    height: 100% !important;
    overflow: auto !important;
  }

  #questionsContainer,
  .questions-scroll-area {
    flex: 1 1 0 !important;
    min-height: 0 !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 14px !important;
    box-sizing: border-box !important;
  }

  .question-card {
    flex: 0 0 auto !important;
    flex-shrink: 0 !important;
    min-height: fit-content !important;
    height: auto !important;
    overflow: visible !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
    box-sizing: border-box !important;
    width: 100% !important;
  }

  .q-textarea {
    display: block !important;
    width: 100% !important;
    min-height: 64px !important;
    height: auto !important;
    box-sizing: border-box !important;
    visibility: visible !important;
    opacity: 1 !important;
  }

  .options-stack {
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
    width: 100% !important;
    visibility: visible !important;
  }

  .option-item {
    display: flex !important;
    width: 100% !important;
    box-sizing: border-box !important;
    visibility: visible !important;
  }

  .card-bottom {
    display: flex !important;
    visibility: visible !important;
  }

  /* Assessments Grid on Desktop: Auto-fit fluid cards */
  .assessments-grid {
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)) !important;
    gap: 16px !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  /* Desktop Tables: Full width expansion */
  .admin-users-section {
    width: 100% !important;
    box-sizing: border-box !important;
  }

  .table-responsive {
    width: 100% !important;
    overflow-x: auto !important;
  }

  .users-table {
    width: 100% !important;
    table-layout: auto !important;
  }

  .users-table th,
  .users-table td {
    padding: 12px 14px !important;
  }
}

/* 3. Ultra-Wide Displays (>= 1500px): Scale Grids Efficiently */
@media (min-width: 1500px) {
  .dash-stats-row {
    grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
    gap: 14px !important;
  }

  .dash-overview-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 12px !important;
  }

  .dash-performance-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 12px !important;
  }

  .assessments-grid {
    grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)) !important;
    gap: 18px !important;
  }
}

/* 4. Medium / Compact Desktops (1025px - 1499px) */
@media (min-width: 1025px) and (max-width: 1499px) {
  .dash-stats-row {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 12px !important;
  }

  .dash-overview-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 10px !important;
  }

  .dash-performance-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 12px !important;
  }
}

/* 5. Tablet Displays (769px - 1024px - iPad, Android Tablets) */
@media (min-width: 769px) and (max-width: 1024px) {
  .page-view {
    width: 100% !important;
    max-width: 100% !important;
    padding: 14px 16px 36px 16px !important;
    box-sizing: border-box !important;
  }

  .app-breadcrumb-bar {
    padding: 8px 16px !important;
  }

  .dash-stats-row {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 10px !important;
  }

  .dash-split-layout {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 14px !important;
  }

  .dash-overview-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px !important;
  }

  .dash-performance-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px !important;
  }

  .assessments-grid {
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)) !important;
    gap: 14px !important;
  }

  .qb-filter-bar,
  .fee-filter-bar {
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)) !important;
    gap: 10px !important;
  }

  /* Upload page handled by master layout below */
}



/* ============================================================
   Pre-Upload Metadata Form (Placed before dropzone on Upload page)
   ============================================================ */
.canvas-pane .question-hierarchy-bar,
.pre-upload-metadata-bar {
  background: #f8fafc !important;
  border-bottom: 1px solid #e2e8f0 !important;
  padding: 14px 18px !important;
  flex-shrink: 0 !important;
  display: block !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

.canvas-pane .hierarchy-bar-grid {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 12px 14px !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

@media (max-width: 900px) and (min-width: 576px) {
  .canvas-pane .hierarchy-bar-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px 12px !important;
  }
}

@media (max-width: 575px) {

  .canvas-pane .question-hierarchy-bar,
  .pre-upload-metadata-bar {
    padding: 10px 12px !important;
  }

  .canvas-pane .hierarchy-bar-grid {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 8px !important;
  }

  .canvas-pane {
    height: auto !important;
    max-height: none !important;
  }
}


/* ============================================================
   Unified Professional Modal System
   Consistent, compact, beautifully aligned, responsive popups
   ============================================================ */

/* 1. Backdrop */
.modal-backdrop {
  position: fixed !important;
  inset: 0 !important;
  z-index: 9999 !important;
  background: rgba(15, 23, 42, 0.65) !important;
  backdrop-filter: blur(5px) !important;
  -webkit-backdrop-filter: blur(5px) !important;
  display: flex;
  align-items: center !important;
  justify-content: center !important;
  padding: 24px 16px !important;
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch !important;
  box-sizing: border-box !important;
  animation: modalFadeIn 180ms cubic-bezier(0.16, 1, 0.3, 1) forwards !important;
}


.modal-backdrop[style*="display: none"],
.modal-backdrop[style*="display:none"],
.modal-backdrop.is-hidden {
  display: none !important;
}

/* 2. Base Modal Card (Compact, clean & neatly aligned) */
.modal-card {
  background: #ffffff !important;
  border-radius: 12px !important;
  border: 1px solid #e2e8f0 !important;
  box-shadow: 0 16px 36px -8px rgba(15, 23, 42, 0.22), 0 0 1px 1px rgba(15, 23, 42, 0.05) !important;
  width: min(90vw, 420px) !important;
  max-width: 420px !important;
  max-height: min(84vh, 560px) !important;
  max-height: min(84dvh, 560px) !important;
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
  margin: auto !important;
  position: relative !important;
  box-sizing: border-box !important;
  animation: modalSlideUp 200ms cubic-bezier(0.16, 1, 0.3, 1) forwards !important;
}

/* Specific Standard Form Modals (Add School, Fee, Bulk Upload) */
#createSchoolModal .modal-card,
#recordFeeModal .modal-card,
#bulkUploadModal .modal-card,
#bulkStudentModal .modal-card {
  width: min(90vw, 420px) !important;
  max-width: 420px !important;
}

/* 3. Medium Modal Cards (User / Student Form, Student Details, Attendance Details) */
.modal-card-md,
#createUserModal .modal-card,
#viewStudentDetailsModal .modal-card,
.student-details-modal-card {
  width: min(92vw, 480px) !important;
  max-width: 480px !important;
  max-height: min(84vh, 600px) !important;
  max-height: min(84dvh, 600px) !important;
}

#modalAttendHistoryDetails .modal-card {
  width: min(92vw, 540px) !important;
  max-width: 540px !important;
  max-height: min(84vh, 600px) !important;
  max-height: min(84dvh, 600px) !important;
}

#managerPermissionsModal .modal-card {
  width: min(92vw, 580px) !important;
  max-width: 580px !important;
  max-height: min(84vh, 620px) !important;
  max-height: min(84dvh, 620px) !important;
}

/* 4. Large Modal Cards (Assessments, Question Editors - Reduced from 720px/760px to compact 580px/620px) */
.modal-card-lg,
#createAssessmentModal .modal-card,
#assignAssessmentModal .modal-card {
  width: min(94vw, 580px) !important;
  max-width: 580px !important;
  max-height: min(84vh, 640px) !important;
  max-height: min(84dvh, 640px) !important;
}

#createQuestionModal .modal-card,
#editQuestionModal .modal-card {
  width: min(94vw, 620px) !important;
  max-width: 620px !important;
  max-height: min(86vh, 660px) !important;
  max-height: min(86dvh, 660px) !important;
}

/* 5. Extra Large Modal Cards (Tables: Submissions, Test History, Assignments) */
.modal-card-xl,
#viewAssignmentsModal .modal-card,
#adminTestHistoryModal .modal-card,
#assessmentSubmissionsModal .modal-card {
  width: min(95vw, 780px) !important;
  max-width: 780px !important;
  max-height: min(86vh, 680px) !important;
  max-height: min(86dvh, 680px) !important;
}

/* 6. Fullscreen / Quiz Arena Modal */
.modal-card-fullscreen,
#takeAssessmentModal .modal-card {
  width: min(96vw, 880px) !important;
  max-width: 880px !important;
  height: min(86vh, 740px) !important;
  max-height: 740px !important;
}

/* 7. Modal Breadcrumb Navigation (Top strip) */
.modal-breadcrumb-bar {
  display: flex !important;
  align-items: center !important;
  min-height: 28px !important;
  padding: 6px 16px !important;
  background: #f8fafc !important;
  border-bottom: 1px solid #edf2f7 !important;
  flex-shrink: 0 !important;
  box-sizing: border-box !important;
}

.modal-breadcrumb-bar .app-breadcrumb-list {
  display: flex !important;
  align-items: center !important;
  gap: 5px !important;
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
}

.modal-breadcrumb-bar .app-breadcrumb-link {
  font-size: 0.74rem !important;
  color: #64748b !important;
  font-weight: 500 !important;
}

.modal-breadcrumb-bar .app-breadcrumb-current {
  font-size: 0.74rem !important;
  color: #0f172a !important;
  font-weight: 600 !important;
}

.modal-breadcrumb-bar .app-breadcrumb-separator {
  color: #cbd5e1 !important;
  font-size: 0.7rem !important;
  margin: 0 2px !important;
}

/* 8. Modal Header (Sleek, neat & compact) */
.modal-header {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 10px !important;
  padding: 12px 18px !important;
  background: #ffffff !important;
  border-bottom: 1px solid #f1f5f9 !important;
  flex-shrink: 0 !important;
  box-sizing: border-box !important;
}

.modal-header-icon {
  width: 32px !important;
  height: 32px !important;
  min-width: 32px !important;
  border-radius: 8px !important;
  background: #eff6ff !important;
  color: #2563eb !important;
  border: 1px solid #dbeafe !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
}

.modal-header-icon svg {
  width: 16px !important;
  height: 16px !important;
}

.modal-title {
  font-family: var(--font-heading, inherit) !important;
  font-size: 1.02rem !important;
  font-weight: 700 !important;
  color: #0f172a !important;
  margin: 0 !important;
  line-height: 1.25 !important;
}

.modal-subtitle {
  font-size: 0.74rem !important;
  color: #64748b !important;
  margin: 2px 0 0 0 !important;
  line-height: 1.25 !important;
}

.modal-close-btn {
  margin-left: auto !important;
  width: 28px !important;
  height: 28px !important;
  min-width: 28px !important;
  border-radius: 6px !important;
  border: 1px solid #e2e8f0 !important;
  background: #ffffff !important;
  color: #64748b !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  padding: 0 !important;
  transition: all 0.15s ease !important;
  flex-shrink: 0 !important;
}

.modal-close-btn svg {
  width: 14px !important;
  height: 14px !important;
}

.modal-close-btn:hover {
  background: #f1f5f9 !important;
  color: #0f172a !important;
  border-color: #cbd5e1 !important;
}

/* 9. Modal Form Body (Neat spacing & controlled scrolling) */
.modal-form {
  padding: 14px 18px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 11px !important;
  overflow-y: auto !important;
  flex: 1 1 auto !important;
  box-sizing: border-box !important;
  -webkit-overflow-scrolling: touch !important;
}

/* 10. Form Controls inside Modals (Crisp 36px inputs, 8px labels) */
.modal-form .form-field-group {
  display: flex !important;
  flex-direction: column !important;
  gap: 4px !important;
  width: 100% !important;
  margin: 0 !important;
  box-sizing: border-box !important;
}

.modal-form .form-label {
  font-size: 0.78rem !important;
  font-weight: 600 !important;
  color: #334155 !important;
  margin-bottom: 2px !important;
  display: flex !important;
  align-items: center !important;
  gap: 4px !important;
}

.modal-form .form-input,
.modal-form select.form-input {
  height: 36px !important;
  min-height: 36px !important;
  border: 1.5px solid #cbd5e1 !important;
  border-radius: 6px !important;
  padding: 6px 11px !important;
  font-size: 0.84rem !important;
  color: #0f172a !important;
  background-color: #ffffff !important;
  width: 100% !important;
  box-sizing: border-box !important;
  transition: border-color 0.15s ease, box-shadow 0.15s ease !important;
}

.modal-form .form-input:focus,
.modal-form select.form-input:focus {
  border-color: #4f46e5 !important;
  box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.12) !important;
  outline: none !important;
}

.modal-form .form-input::placeholder {
  color: #94a3b8 !important;
  font-size: 0.82rem !important;
}

.modal-form .form-help-text {
  font-size: 0.72rem !important;
  color: #94a3b8 !important;
  margin-top: 2px !important;
}

/* 11. Modal Footer (Slim, professional & cleanly aligned) */
.modal-footer {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 8px !important;
  padding: 10px 18px !important;
  border-top: 1px solid #f1f5f9 !important;
  background: #f8fafc !important;
  flex-shrink: 0 !important;
  box-sizing: border-box !important;
}

.modal-form .modal-footer {
  margin: 4px -18px -14px -18px !important;
  border-radius: 0 0 12px 12px !important;
}

.modal-footer .btn {
  height: 34px !important;
  padding: 6px 14px !important;
  border-radius: 6px !important;
  font-size: 0.82rem !important;
  font-weight: 600 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 5px !important;
  cursor: pointer !important;
  transition: all 0.15s ease !important;
}

.modal-footer .btn-secondary {
  background: #ffffff !important;
  border: 1px solid #cbd5e1 !important;
  color: #475569 !important;
}

.modal-footer .btn-secondary:hover {
  background: #f1f5f9 !important;
  border-color: #94a3b8 !important;
  color: #0f172a !important;
}

.modal-footer .btn-primary {
  background: #4f46e5 !important;
  border: 1px solid #4338ca !important;
  color: #ffffff !important;
  box-shadow: 0 1px 2px rgba(79, 70, 229, 0.2) !important;
}

.modal-footer .btn-primary:hover {
  background: #4338ca !important;
  border-color: #3730a3 !important;
}

/* Question modal footer special styling */
.question-modal-footer {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  gap: 10px !important;
}

.question-modal-footer .modal-footer-left,
.question-modal-footer .modal-footer-right {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
}

/* 12. Mobile & Tablet Responsiveness */
@media (max-width: 640px) {
  .modal-backdrop {
    padding: 12px 8px !important;
  }

  .modal-card,
  .modal-card-md,
  .modal-card-lg,
  .modal-card-xl,
  .modal-card-fullscreen,
  #createSchoolModal .modal-card,
  #recordFeeModal .modal-card,
  #bulkUploadModal .modal-card,
  #bulkStudentModal .modal-card,
  #createUserModal .modal-card,
  #viewStudentDetailsModal .modal-card,
  #modalAttendHistoryDetails .modal-card,
  #managerPermissionsModal .modal-card,
  #createAssessmentModal .modal-card,
  #assignAssessmentModal .modal-card,
  #createQuestionModal .modal-card,
  #editQuestionModal .modal-card,
  #viewAssignmentsModal .modal-card,
  #adminTestHistoryModal .modal-card,
  #assessmentSubmissionsModal .modal-card,
  #takeAssessmentModal .modal-card {
    width: 100% !important;
    max-width: calc(100vw - 16px) !important;
    max-height: calc(100dvh - 16px) !important;
    max-height: calc(100vh - 16px) !important;
    border-radius: 14px !important;
    margin: auto !important;
  }

  .modal-header {
    padding: 12px 14px !important;
  }

  .modal-title {
    font-size: 1rem !important;
  }

  .modal-subtitle {
    font-size: 0.75rem !important;
  }

  .modal-form {
    padding: 14px !important;
    gap: 12px !important;
    max-height: calc(100dvh - 120px) !important;
  }

  .modal-footer {
    padding: 10px 14px !important;
    gap: 8px !important;
  }

  .modal-form .modal-footer {
    margin: 6px -14px -14px -14px !important;
    border-radius: 0 0 14px 14px !important;
  }

  .modal-footer .btn {
    flex: 1 1 calc(50% - 6px) !important;
    min-width: 100px !important;
    height: 38px !important;
  }

  .modal-form .form-grid-2,
  .modal-form .form-grid-3 {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 10px !important;
  }

  .question-modal-footer {
    flex-direction: column !important;
    align-items: stretch !important;
  }

  .question-modal-footer .modal-footer-left,
  .question-modal-footer .modal-footer-right {
    width: 100% !important;
    justify-content: space-between !important;
  }
}

/* ==========================================================================
   Dashboard Bottom Fee Overview & School Search Refinements
   ========================================================================== */
#dashPanelFeeOverview {
  margin-top: 0;
}

@media (min-width: 900px) {
  #dashPanelFeeOverview .dash-fee-content {
    display: grid !important;
    grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr) !important;
    gap: 32px !important;
    align-items: center !important;
  }

  #dashPanelFeeOverview .dash-donut-row {
    border-bottom: none !important;
    border-right: 1px solid #f1f5f9 !important;
    padding-bottom: 0 !important;
    padding-right: 28px !important;
    margin-bottom: 0 !important;
  }

  #dashPanelFeeOverview .dash-trend-block {
    padding-top: 0 !important;
  }
}

/* School Management Clean Single-Line Search Bar */
.school-search-container {
  margin-bottom: 16px;
  width: 100%;
}

.school-search-box {
  position: relative;
  width: 100%;
  display: flex;
  align-items: center;
  background: #ffffff;
  border: 1.5px solid #cbd5e1;
  border-radius: 8px;
  box-sizing: border-box;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.school-search-box:focus-within {
  border-color: #2563eb !important;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12) !important;
}

.school-search-input {
  width: 100%;
  height: 42px;
  border: none;
  outline: none;
  background: transparent;
  padding: 0 14px 0 42px;
  font-size: 0.88rem;
  color: #0f172a;
  font-family: inherit;
  box-sizing: border-box;
}

.school-search-input::placeholder {
  color: #94a3b8;
}

/* Test History Filter Bar Enhancements */
.test-history-filter-bar {
  background: #ffffff;
  border: 1px solid var(--border-color, #e2e8f0);
  border-radius: 12px;
  padding: 12px 16px;
  margin-bottom: 16px;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: flex-end;
}

@media (max-width: 768px) {
  .test-history-filter-bar {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px !important;
    padding: 12px !important;
  }

  .test-history-filter-bar .qb-filter-group:first-child {
    grid-column: 1 / -1 !important;
  }
}



/* ============================================================
   Upload Page Unified Master Layout (#viewUploadPage)
   Guarantees identical, consistent side-by-side layout before & after refresh
   ============================================================ */

/* Base & Desktop Side-by-Side (screens > 768px) */
@media (min-width: 769px) {

  #viewUploadPage.app-layout,
  .app-layout#viewUploadPage {
    display: grid !important;
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr) !important;
    gap: 16px !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    height: calc(100vh - 86px) !important;
    height: calc(100dvh - 86px) !important;
    min-height: 580px !important;
    padding: 14px clamp(16px, 1.8vw, 32px) 16px clamp(16px, 1.8vw, 32px) !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
    align-items: stretch !important;
  }

  #viewUploadPage .canvas-pane {
    height: 100% !important;
    min-height: 0 !important;
    max-height: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
    align-self: stretch !important;
    background: #ffffff !important;
    border-radius: 12px !important;
    border: 1px solid #e2e8f0 !important;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.04) !important;
    box-sizing: border-box !important;
    width: 100% !important;
  }

  #viewUploadPage .questions-pane {
    height: 100% !important;
    min-height: 0 !important;
    max-height: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
    align-self: stretch !important;
    background: #ffffff !important;
    border-radius: 12px !important;
    border: 1px solid #e2e8f0 !important;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.04) !important;
    box-sizing: border-box !important;
    width: 100% !important;
  }

  #viewUploadPage .canvas-viewport {
    flex: 1 1 0 !important;
    min-height: 0 !important;
    height: 100% !important;
    max-height: none !important;
    position: relative !important;
    overflow: hidden !important;
    background: #f8fafc !important;
    box-sizing: border-box !important;
    border-top: 1px solid #e2e8f0 !important;
    display: flex !important;
    flex-direction: column !important;
    user-select: none !important;
  }

  #viewUploadPage .questions-scroll-area,
  #viewUploadPage #questionsContainer {
    flex: 1 1 0 !important;
    min-height: 0 !important;
    height: 100% !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 14px !important;
    padding: 16px 18px !important;
    box-sizing: border-box !important;
  }

  #viewUploadPage .empty-questions-notice {
    flex: 1 1 auto;
    height: 100%;
    min-height: 220px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 40px 24px;
    margin: auto;
    box-sizing: border-box;
  }

  /* Once an image or PDF is uploaded or questions exist, hide empty-state notice completely */
  #viewUploadPage .empty-questions-notice.is-hidden,
  #viewUploadPage .empty-questions-notice[style*="display: none"],
  #viewUploadPage .empty-questions-notice[style*="display:none"],
  #viewUploadPage:has(.canvas-viewport.has-image) .empty-questions-notice {
    display: none !important;
  }
}

/* Mobile Screens (<= 768px): Stack gracefully */
@media (max-width: 768px) {

  #viewUploadPage.app-layout,
  .app-layout#viewUploadPage {
    display: flex !important;
    flex-direction: column !important;
    height: auto !important;
    min-height: 100% !important;
    overflow-y: auto !important;
    padding: 10px 10px 36px 10px !important;
    gap: 16px !important;
    box-sizing: border-box !important;
  }

  #viewUploadPage .canvas-pane {
    width: 100% !important;
    height: auto !important;
    min-height: auto !important;
    max-height: none !important;
    overflow: hidden !important;
    flex-shrink: 0 !important;
  }

  #viewUploadPage .questions-pane {
    width: 100% !important;
    height: auto !important;
    min-height: 420px !important;
    max-height: none !important;
    overflow: hidden !important;
    flex-shrink: 0 !important;
  }

  #viewUploadPage .canvas-viewport {
    min-height: 480px !important;
    height: 55vh !important;
    max-height: 650px !important;
    position: relative !important;
    overflow: hidden !important;
  }

  #viewUploadPage .canvas-viewport:not(.has-image):has(#dropzoneOverlay:not(.is-hidden):not([style*="display: none"])) {
    height: auto !important;
    min-height: 280px !important;
    padding: 20px 16px !important;
  }

  #viewUploadPage .questions-scroll-area,
  #viewUploadPage #questionsContainer {
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
    padding: 14px !important;
  }
}

/* ============================================================
   F Attendance Admin Dashboard (Desktop, Tablet & Mobile)
   Matches the Reference Attendance Dashboard Layout & Interactions
   Adapted to Tuition Management's Visual Design System
   ============================================================ */

#viewFAttendancePage .f-attend-dashboard-container {
  max-width: 1120px;
  margin: 0 auto;
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: 6px 4px 28px;
  box-sizing: border-box;
}

/* 1. Top Hero Header */
#viewFAttendancePage .f-attend-hero-header {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  padding: 2px 2px 0;
}

#viewFAttendancePage .f-attend-live-kicker {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 0.72rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #2563eb;
  margin-bottom: 2px;
}

#viewFAttendancePage .f-attend-live-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #2563eb;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.18);
  display: inline-block;
}

#viewFAttendancePage .f-attend-hero-title {
  font-family: 'Outfit', 'Inter', sans-serif;
  font-size: 1.85rem;
  font-weight: 800;
  color: var(--text-primary, #0f172a);
  line-height: 1.15;
  margin: 0;
  letter-spacing: -0.02em;
}

#viewFAttendancePage .f-attend-hero-subtitle {
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--text-secondary, #64748b);
  margin: 2px 0 0;
}

/* 2. Date Selection & Refresh Toolbar Card */
#viewFAttendancePage .f-attend-date-bar-card {
  background: #ffffff;
  border: 1px solid var(--border-color, #e2e8f0);
  border-radius: 14px;
  padding: 14px 22px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 14px;
  box-shadow: 0 2px 6px rgba(15, 23, 42, 0.04);
}

#viewFAttendancePage .f-attend-date-bar-left {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

#viewFAttendancePage .f-attend-calendar-icon {
  width: 20px;
  height: 20px;
  color: #2563eb;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

#viewFAttendancePage .f-attend-calendar-icon svg {
  width: 19px;
  height: 19px;
}

#viewFAttendancePage .f-attend-select-date-label {
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--text-primary, #1e293b);
  white-space: nowrap;
  margin: 0;
}

#viewFAttendancePage .f-attend-date-input {
  height: 38px;
  padding: 6px 12px;
  font-size: 0.86rem;
  font-weight: 700;
  color: var(--text-primary, #0f172a);
  background: #ffffff;
  border: 1px solid var(--border-color, #cbd5e1);
  border-radius: 9px;
  min-width: 152px;
  cursor: pointer;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

#viewFAttendancePage .f-attend-date-input:focus {
  outline: none;
  border-color: #2563eb;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12);
}

#viewFAttendancePage .f-attend-date-bar-right {
  display: flex;
  align-items: center;
}

#viewFAttendancePage .f-attend-refresh-btn {
  height: 38px;
  padding: 0 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-weight: 600;
  font-size: 0.84rem;
  border-radius: 9px;
  background: #f8fafc;
  border: 1px solid #cbd5e1;
  color: #1e293b;
  transition: all 0.15s ease;
}

#viewFAttendancePage .f-attend-refresh-btn:hover {
  background: #eff6ff;
  border-color: #93c5fd;
  color: #1d4ed8;
}

#viewFAttendancePage .f-attend-refresh-icon {
  width: 15px;
  height: 15px;
  transition: transform 0.35s ease;
}

#viewFAttendancePage .f-attend-refresh-btn.is-spinning .f-attend-refresh-icon {
  animation: fAttendSpin 0.8s linear infinite;
}

@keyframes fAttendSpin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

/* 3. Three Centered Summary Cards Grid */
#viewFAttendancePage .f-attend-summary-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}

#viewFAttendancePage .f-attend-stat-card {
  background: #ffffff;
  border: 1.5px solid var(--border-color, #e2e8f0);
  border-radius: 14px;
  padding: 26px 20px 22px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 8px;
  min-height: 158px;
  box-shadow: 0 2px 6px rgba(15, 23, 42, 0.04);
  transition: all 0.2s ease;
  position: relative;
  overflow: hidden;
}

#viewFAttendancePage .f-attend-stat-card.is-interactive {
  cursor: pointer;
  user-select: none;
}

#viewFAttendancePage .f-attend-stat-card.is-interactive:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(15, 23, 42, 0.08);
  border-color: #cbd5e1;
}

#viewFAttendancePage .f-attend-stat-card.card-present.active {
  border-color: #16a34a;
  background: linear-gradient(180deg, #f0fdf4 0%, #ffffff 70%);
  box-shadow: 0 6px 18px rgba(22, 163, 74, 0.14);
}

#viewFAttendancePage .f-attend-stat-card.card-absent.active {
  border-color: #dc2626;
  background: linear-gradient(180deg, #fef2f2 0%, #ffffff 70%);
  box-shadow: 0 6px 18px rgba(220, 38, 38, 0.14);
}

#viewFAttendancePage .f-attend-stat-label {
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--text-secondary, #64748b);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  line-height: 1.3;
}

#viewFAttendancePage .f-attend-stat-value {
  font-size: 2.5rem;
  font-weight: 800;
  line-height: 1.1;
  font-family: 'Outfit', 'Inter', sans-serif;
  margin: 2px 0;
}

#viewFAttendancePage .f-attend-stat-value.val-blue {
  color: #2563eb;
}

#viewFAttendancePage .f-attend-stat-value.val-green {
  color: #16a34a;
}

#viewFAttendancePage .f-attend-stat-value.val-red {
  color: #dc2626;
}

#viewFAttendancePage .f-attend-stat-meta,
#viewFAttendancePage .f-attend-stat-breakdown {
  font-size: 0.76rem;
  font-weight: 600;
  color: var(--text-secondary, #475569);
  line-height: 1.3;
}

#viewFAttendancePage .f-attend-click-hint {
  font-size: 0.74rem;
  font-weight: 600;
  color: var(--text-muted, #64748b);
  margin-top: 2px;
  transition: color 0.15s ease;
}

#viewFAttendancePage .f-attend-stat-card.card-present:hover .f-attend-click-hint,
#viewFAttendancePage .f-attend-stat-card.card-present.active .f-attend-click-hint {
  color: #15803d;
}

#viewFAttendancePage .f-attend-stat-card.card-absent:hover .f-attend-click-hint,
#viewFAttendancePage .f-attend-stat-card.card-absent.active .f-attend-click-hint {
  color: #dc2626;
}

/* 4. Filter Pills & Person Details Panel */
#viewFAttendancePage .f-attend-details-panel {
  background: #ffffff;
  border: 1px solid var(--border-color, #e2e8f0);
  border-radius: 14px;
  padding: 18px 22px;
  box-shadow: 0 4px 14px rgba(15, 23, 42, 0.05);
  display: flex;
  flex-direction: column;
  gap: 16px;
}

#viewFAttendancePage .f-attend-filter-header {
  display: flex;
  flex-direction: column;
  gap: 14px;
  border-bottom: 1px solid #f1f5f9;
  padding-bottom: 14px;
}

#viewFAttendancePage .f-attend-filter-title-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
}

#viewFAttendancePage .f-attend-filter-header-right {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

#viewFAttendancePage .f-attend-close-pills-btn {
  height: 30px;
  padding: 0 10px;
  font-size: 0.76rem;
  font-weight: 600;
  border-radius: 7px;
  border: 1px solid #e2e8f0;
  background: #f8fafc;
  color: #475569;
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

#viewFAttendancePage .f-attend-close-pills-btn:hover {
  background: #f1f5f9;
  color: #0f172a;
}

#viewFAttendancePage .f-attend-status-indicator {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--text-primary, #0f172a);
}

#viewFAttendancePage .f-attend-status-indicator .status-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  display: inline-block;
}

#viewFAttendancePage .f-attend-status-indicator .status-dot.dot-present {
  background: #16a34a;
  box-shadow: 0 0 0 3px rgba(22, 163, 74, 0.2);
}

#viewFAttendancePage .f-attend-status-indicator .status-dot.dot-absent {
  background: #dc2626;
  box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.2);
}

#viewFAttendancePage .f-attend-filter-subtitle {
  font-size: 0.82rem;
  color: var(--text-secondary, #64748b);
  font-weight: 500;
}

/* Dynamic Filter Pills Bar */
#viewFAttendancePage .f-attend-pills-bar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}

#viewFAttendancePage .f-attend-filter-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 14px;
  border-radius: 999px;
  border: 1.5px solid #cbd5e1;
  background: #f8fafc;
  color: #334155;
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.18s ease;
}

#viewFAttendancePage .f-attend-filter-pill:hover {
  border-color: #94a3b8;
  background: #f1f5f9;
}

#viewFAttendancePage .f-attend-filter-pill.active.pill-mode-present {
  background: #16a34a;
  border-color: #15803d;
  color: #ffffff;
  box-shadow: 0 3px 10px rgba(22, 163, 74, 0.25);
}

#viewFAttendancePage .f-attend-filter-pill.active.pill-mode-absent {
  background: #dc2626;
  border-color: #b91c1c;
  color: #ffffff;
  box-shadow: 0 3px 10px rgba(220, 38, 38, 0.25);
}

#viewFAttendancePage .f-attend-pill-name {
  font-weight: 700;
}

#viewFAttendancePage .f-attend-pill-counts {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 0.74rem;
  padding: 2px 8px;
  border-radius: 999px;
  background: rgba(15, 23, 42, 0.06);
  color: inherit;
}

#viewFAttendancePage .f-attend-filter-pill.active .f-attend-pill-counts {
  background: rgba(255, 255, 255, 0.22);
  color: #ffffff;
}

/* Selected Class / Staff Summary Strip & Search */
#viewFAttendancePage .f-attend-group-summary-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  padding: 10px 14px;
}

#viewFAttendancePage .f-attend-group-metrics {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}

#viewFAttendancePage .f-attend-metric-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 0.78rem;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: 7px;
  background: #ffffff;
  border: 1px solid #e2e8f0;
  color: #475569;
}

#viewFAttendancePage .f-attend-metric-chip.chip-group {
  background: #eff6ff;
  border-color: #bfdbfe;
  color: #1d4ed8;
}

#viewFAttendancePage .f-attend-metric-chip.chip-present strong {
  color: #15803d;
}

#viewFAttendancePage .f-attend-metric-chip.chip-absent strong {
  color: #dc2626;
}

#viewFAttendancePage .f-attend-metric-chip.chip-rate strong {
  color: #2563eb;
}

#viewFAttendancePage .f-attend-search-wrap {
  position: relative;
  flex: 1 1 240px;
  max-width: 300px;
}

#viewFAttendancePage .f-attend-search-icon {
  position: absolute;
  left: 10px;
  top: 50%;
  transform: translateY(-50%);
  width: 15px;
  height: 15px;
  color: #94a3b8;
  pointer-events: none;
}

#viewFAttendancePage .f-attend-search-input {
  height: 34px;
  padding: 4px 10px 4px 32px;
  font-size: 0.82rem;
  border-radius: 8px;
  border: 1px solid #cbd5e1;
  background: #ffffff;
  width: 100%;
}

/* Person Details Table & Mobile Cards */
#viewFAttendancePage .f-attend-person-cell {
  display: flex;
  align-items: center;
  gap: 10px;
}

#viewFAttendancePage .f-attend-avatar {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.85rem;
  font-weight: 700;
  flex-shrink: 0;
}

#viewFAttendancePage .f-attend-avatar.avatar-student {
  background: #dbeafe;
  color: #1d4ed8;
}

#viewFAttendancePage .f-attend-avatar.avatar-staff {
  background: #ede9fe;
  color: #6d28d9;
}

#viewFAttendancePage .f-attend-person-name {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--text-primary, #0f172a);
}

#viewFAttendancePage .f-attend-id-code {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.8rem;
  font-weight: 600;
  padding: 3px 8px;
  border-radius: 6px;
  background: #f1f5f9;
  color: #334155;
  border: 1px solid #e2e8f0;
}

#viewFAttendancePage .f-attend-role-pill {
  display: inline-block;
  font-size: 0.78rem;
  font-weight: 600;
  padding: 3px 10px;
  border-radius: 999px;
}

#viewFAttendancePage .f-attend-role-pill.f-role-student {
  background: #eff6ff;
  color: #1d4ed8;
}

#viewFAttendancePage .f-attend-role-pill.f-role-staff {
  background: #f5f3ff;
  color: #6d28d9;
}

#viewFAttendancePage .f-attend-status-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 12px;
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 700;
}

#viewFAttendancePage .f-attend-status-pill .f-status-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
}

#viewFAttendancePage .f-attend-status-pill.f-status-present {
  background: #dcfce7;
  color: #15803d;
}

#viewFAttendancePage .f-attend-status-pill.f-status-present .f-status-dot {
  background: #16a34a;
}

#viewFAttendancePage .f-attend-status-pill.f-status-absent {
  background: #fee2e2;
  color: #b91c1c;
}

#viewFAttendancePage .f-attend-status-pill.f-status-absent .f-status-dot {
  background: #dc2626;
}

#viewFAttendancePage .f-attend-time-val {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.82rem;
  font-weight: 600;
}

#viewFAttendancePage .f-attend-time-val.has-time {
  color: #0f172a;
}

#viewFAttendancePage .f-attend-time-val.no-time {
  color: #94a3b8;
}

#viewFAttendancePage .f-attend-date-val {
  font-size: 0.84rem;
  font-weight: 500;
  color: #475569;
}

#viewFAttendancePage .f-attend-mobile-list {
  display: none;
  flex-direction: column;
  gap: 10px;
}

#viewFAttendancePage .f-attend-empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 36px 20px;
  text-align: center;
  color: var(--text-secondary, #64748b);
  gap: 6px;
}

#viewFAttendancePage .f-attend-empty-icon {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  background: #f1f5f9;
  color: #64748b;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 4px;
}

#viewFAttendancePage .f-attend-empty-icon svg {
  width: 24px;
  height: 24px;
}

#viewFAttendancePage .f-attend-empty-state h3 {
  font-size: 1rem;
  font-weight: 700;
  color: var(--text-primary, #0f172a);
  margin: 0;
}

#viewFAttendancePage .f-attend-empty-state p {
  font-size: 0.85rem;
  margin: 0;
}

/* 5. Latest Activity Card (Matches Screenshot 1 Layout in Tuition Management Theme) */
#viewFAttendancePage .f-attend-latest-activity-card {
  background: #ffffff;
  border: 1px solid var(--border-color, #e2e8f0);
  border-radius: 14px;
  padding: 20px 24px;
  box-shadow: 0 2px 6px rgba(15, 23, 42, 0.04);
  display: flex;
  flex-direction: column;
  gap: 14px;
}

#viewFAttendancePage .f-attend-latest-activity-header {
  display: flex;
  align-items: center;
  gap: 8px;
}

#viewFAttendancePage .f-attend-latest-clock-icon {
  width: 20px;
  height: 20px;
  color: #334155;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

#viewFAttendancePage .f-attend-latest-clock-icon svg {
  width: 18px;
  height: 18px;
}

#viewFAttendancePage .f-attend-latest-activity-title {
  font-size: 1rem;
  font-weight: 700;
  color: var(--text-primary, #0f172a);
  margin: 0;
}

#viewFAttendancePage .f-attend-latest-activity-rows {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

#viewFAttendancePage .f-attend-latest-row {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  padding: 14px 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
}

#viewFAttendancePage .f-attend-latest-row-label {
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--text-secondary, #64748b);
}

#viewFAttendancePage .f-attend-latest-row-value {
  font-size: 0.88rem;
  font-weight: 700;
  text-align: right;
}

#viewFAttendancePage .f-attend-latest-row-value.val-student {
  color: #16a34a;
}

#viewFAttendancePage .f-attend-latest-row-value.val-staff {
  color: #2563eb;
}

/* Tablet Responsive (<= 1024px) */
@media (max-width: 1024px) {
  #viewFAttendancePage .f-attend-summary-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
  }

  #viewFAttendancePage .f-attend-stat-card {
    padding: 20px 14px;
    min-height: 142px;
  }

  #viewFAttendancePage .f-attend-stat-value {
    font-size: 2.1rem;
  }
}

/* Mobile Responsive (<= 768px) */
@media (max-width: 768px) {
  #viewFAttendancePage .f-attend-dashboard-container {
    gap: 14px;
    padding: 4px 2px 24px;
  }

  #viewFAttendancePage .f-attend-hero-title {
    font-size: 1.5rem;
  }

  #viewFAttendancePage .f-attend-date-bar-card {
    padding: 12px 14px;
    gap: 10px;
  }

  #viewFAttendancePage .f-attend-date-bar-left {
    width: 100%;
    justify-content: space-between;
  }

  #viewFAttendancePage .f-attend-date-input-wrap {
    flex: 1;
    min-width: 140px;
  }

  #viewFAttendancePage .f-attend-date-input {
    width: 100%;
    min-width: 0;
  }

  #viewFAttendancePage .f-attend-date-bar-right {
    width: 100%;
  }

  #viewFAttendancePage .f-attend-refresh-btn {
    width: 100%;
  }

  #viewFAttendancePage .f-attend-summary-grid {
    grid-template-columns: 1fr;
    gap: 10px;
  }

  #viewFAttendancePage .f-attend-stat-card {
    padding: 18px 16px;
    min-height: auto;
  }

  #viewFAttendancePage .f-attend-stat-value {
    font-size: 2rem;
  }

  #viewFAttendancePage .f-attend-details-panel {
    padding: 14px;
  }

  #viewFAttendancePage .f-attend-pills-bar {
    flex-wrap: nowrap;
    overflow-x: auto;
    padding-bottom: 4px;
    -webkit-overflow-scrolling: touch;
  }

  #viewFAttendancePage .f-attend-filter-pill {
    flex-shrink: 0;
  }

  #viewFAttendancePage .f-attend-search-wrap {
    max-width: 100%;
    flex: 1 1 100%;
  }

  #viewFAttendancePage .f-attend-table-container {
    display: none !important;
  }

  #viewFAttendancePage .f-attend-mobile-list {
    display: flex;
  }

  #viewFAttendancePage .f-attend-mobile-card {
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 12px 14px;
    background: #ffffff;
    display: flex;
    flex-direction: column;
    gap: 10px;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.03);
  }

  #viewFAttendancePage .f-attend-mobile-card-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 8px;
  }

  #viewFAttendancePage .f-attend-mobile-id-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 4px;
  }

  #viewFAttendancePage .f-attend-mobile-card-meta {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
    padding-top: 8px;
    border-top: 1px dashed #e2e8f0;
  }

  #viewFAttendancePage .f-attend-mobile-meta-item {
    display: flex;
    flex-direction: column;
    gap: 2px;
  }

  #viewFAttendancePage .f-attend-mobile-meta-item .meta-label {
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    color: #64748b;
  }

  #viewFAttendancePage .f-attend-mobile-meta-item .meta-val {
    font-size: 0.82rem;
    font-weight: 600;
    color: #0f172a;
  }

  #viewFAttendancePage .f-attend-latest-activity-card {
    padding: 16px;
  }

  #viewFAttendancePage .f-attend-latest-row {
    padding: 12px 14px;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
  }

  #viewFAttendancePage .f-attend-latest-row-value {
    text-align: left;
  }
}

/* ============================================================
   F Attendance — Top Module Navigation & Activity Records
   Adapted to Tuition Management Theme (Desktop, Tablet, Mobile)
   ============================================================ */

/* Module Sub-Navigation Bar (Dashboard | Activity Records) */
#viewFAttendancePage .f-attend-module-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 14px;
  padding: 10px 14px;
  margin-bottom: 18px;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.04);
  box-sizing: border-box;
}

#viewFAttendancePage .f-attend-module-tabs {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: #f1f5f9;
  padding: 4px;
  border-radius: 10px;
}

#viewFAttendancePage .f-attend-module-tab {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  border-radius: 8px;
  border: none;
  background: transparent;
  color: #475569;
  font-family: var(--font-body, 'Inter', sans-serif);
  font-size: 0.875rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.18s ease;
  white-space: nowrap;
}

#viewFAttendancePage .f-attend-module-tab:hover {
  color: #0f172a;
  background: rgba(255, 255, 255, 0.65);
}

#viewFAttendancePage .f-attend-module-tab.active {
  background: #1d68ff;
  color: #ffffff;
  box-shadow: 0 2px 6px rgba(29, 104, 255, 0.25);
}

/* Sub-View Switcher */
#viewFAttendancePage .f-attend-subview {
  display: none;
  width: 100%;
  box-sizing: border-box;
}

#viewFAttendancePage .f-attend-subview.active {
  display: block !important;
  animation: fAttendFadeIn 0.2s ease-out;
}

@keyframes fAttendFadeIn {
  from {
    opacity: 0;
    transform: translateY(4px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Activity Records Top Row (Title + Staff/Students Sub-Tabs) */
#viewFAttendancePage .f-attend-act-top-row {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
}

#viewFAttendancePage .f-attend-act-subtabs {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: #ffffff;
  border: 1px solid #cbd5e1;
  padding: 5px;
  border-radius: 12px;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}

#viewFAttendancePage .f-attend-act-subtab {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 18px;
  border-radius: 8px;
  border: none;
  background: transparent;
  color: #475569;
  font-family: var(--font-body, 'Inter', sans-serif);
  font-size: 0.875rem;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.18s ease;
}

#viewFAttendancePage .f-attend-act-subtab:hover {
  color: #0f172a;
  background: #f8fafc;
}

#viewFAttendancePage .f-attend-act-subtab.active {
  background: #0f172a;
  color: #ffffff;
  box-shadow: 0 2px 6px rgba(15, 23, 42, 0.18);
}

#viewFAttendancePage .f-attend-lock-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  opacity: 0.85;
}

/* Activity Records Filter Card */
#viewFAttendancePage .f-attend-act-filter-card {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 14px;
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 14px;
  padding: 16px 20px;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.04);
  box-sizing: border-box;
}

#viewFAttendancePage .f-attend-act-filter-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 190px;
}

#viewFAttendancePage .f-attend-act-search-group {
  flex: 1 1 280px;
}

#viewFAttendancePage .f-attend-act-filter-label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.76rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #475569;
}

#viewFAttendancePage .f-attend-act-search-input-wrap {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
}

#viewFAttendancePage .f-attend-act-search-icon {
  position: absolute;
  left: 12px;
  color: #94a3b8;
  pointer-events: none;
}

#viewFAttendancePage .f-attend-act-search-input {
  width: 100%;
  height: 40px;
  padding: 8px 14px 8px 36px;
  border: 1px solid #cbd5e1;
  border-radius: 10px;
  font-family: var(--font-body, 'Inter', sans-serif);
  font-size: 0.875rem;
  font-weight: 500;
  color: #0f172a;
  background: #f8fafc;
  transition: all 0.18s ease;
  box-sizing: border-box;
}

#viewFAttendancePage .f-attend-act-search-input:focus {
  outline: none;
  border-color: #1d68ff;
  background: #ffffff;
  box-shadow: 0 0 0 3px rgba(29, 104, 255, 0.12);
}

#viewFAttendancePage .f-attend-act-filter-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

#viewFAttendancePage .f-attend-act-search-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  height: 40px;
  padding: 0 18px;
  border-radius: 10px;
  border: 1px solid #1d68ff;
  background: #1d68ff;
  color: #ffffff;
  font-family: var(--font-body, 'Inter', sans-serif);
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.18s ease;
  white-space: nowrap;
}

#viewFAttendancePage .f-attend-act-search-btn:hover {
  background: #1554d6;
  border-color: #1554d6;
}

#viewFAttendancePage .f-attend-act-clear-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  height: 40px;
  padding: 0 16px;
  border-radius: 10px;
  border: 1px solid #cbd5e1;
  background: #ffffff;
  color: #475569;
  font-family: var(--font-body, 'Inter', sans-serif);
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.18s ease;
  white-space: nowrap;
}

#viewFAttendancePage .f-attend-act-clear-btn:hover {
  background: #f1f5f9;
  color: #0f172a;
  border-color: #94a3b8;
}

/* Status Banner */
#viewFAttendancePage .f-attend-act-status-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
  padding: 10px 16px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  font-size: 0.84rem;
  color: #334155;
}

#viewFAttendancePage .f-attend-act-status-left {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

#viewFAttendancePage .f-attend-act-status-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #1d68ff;
  flex-shrink: 0;
}

#viewFAttendancePage .f-attend-act-status-dot.dot-student {
  background: #10b981;
}

#viewFAttendancePage .f-attend-act-status-hint {
  font-size: 0.78rem;
  color: #64748b;
  font-weight: 500;
}

/* Date-Grouped Sections & Carousels */
#viewFAttendancePage .f-attend-act-groups-container {
  display: flex;
  flex-direction: column;
  gap: 20px;
  width: 100%;
}

#viewFAttendancePage .f-attend-date-group-section {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 16px;
  padding: 18px 20px;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.04);
  display: flex;
  flex-direction: column;
  gap: 14px;
  box-sizing: border-box;
  overflow: hidden;
}

#viewFAttendancePage .f-attend-date-group-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  padding-bottom: 12px;
  border-bottom: 1px solid #f1f5f9;
}

#viewFAttendancePage .f-attend-date-group-title-wrap {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
}

#viewFAttendancePage .f-attend-date-group-badge {
  display: inline-flex;
  align-items: center;
  padding: 4px 12px;
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

#viewFAttendancePage .f-attend-date-group-badge.badge-today {
  background: #eff6ff;
  color: #1d68ff;
  border: 1px solid #bfdbfe;
}

#viewFAttendancePage .f-attend-date-group-badge.badge-yesterday {
  background: #f5f3ff;
  color: #6d28d9;
  border: 1px solid #ddd6fe;
}

#viewFAttendancePage .f-attend-date-group-badge.badge-date {
  background: #f1f5f9;
  color: #334155;
  border: 1px solid #cbd5e1;
}

#viewFAttendancePage .f-attend-date-group-subdate {
  font-size: 0.85rem;
  font-weight: 600;
  color: #64748b;
}

#viewFAttendancePage .f-attend-date-group-count {
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  border-radius: 999px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  font-size: 0.76rem;
  font-weight: 700;
  color: #475569;
}

/* Carousel Controls */
#viewFAttendancePage .f-attend-carousel-controls {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

#viewFAttendancePage .f-attend-carousel-btn {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  border: 1px solid #cbd5e1;
  background: #ffffff;
  color: #334155;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.16s ease;
}

#viewFAttendancePage .f-attend-carousel-btn:hover {
  background: #eff6ff;
  border-color: #1d68ff;
  color: #1d68ff;
}

/* Horizontal Carousel Track */
#viewFAttendancePage .f-attend-carousel-viewport {
  width: 100%;
  overflow: hidden;
  position: relative;
}

#viewFAttendancePage .f-attend-carousel-track {
  display: flex;
  flex-direction: row;
  align-items: stretch;
  gap: 16px;
  overflow-x: auto;
  scroll-behavior: smooth;
  padding: 4px 2px 10px;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  scrollbar-color: #cbd5e1 transparent;
}

#viewFAttendancePage .f-attend-carousel-track::-webkit-scrollbar {
  height: 6px;
}

#viewFAttendancePage .f-attend-carousel-track::-webkit-scrollbar-track {
  background: #f8fafc;
  border-radius: 999px;
}

#viewFAttendancePage .f-attend-carousel-track::-webkit-scrollbar-thumb {
  background: #cbd5e1;
  border-radius: 999px;
}

/* Individual Punch Record Card */
#viewFAttendancePage .f-attend-punch-card {
  flex: 0 0 248px;
  width: 248px;
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 14px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.04);
}

#viewFAttendancePage .f-attend-punch-card:hover {
  transform: translateY(-3px);
  border-color: #93c5fd;
  box-shadow: 0 8px 20px -4px rgba(15, 23, 42, 0.1);
}

#viewFAttendancePage .f-attend-punch-card-media {
  position: relative;
  width: 100%;
  height: 176px;
  background: linear-gradient(135deg, #f8fafc 0%, #eff6ff 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  cursor: pointer;
  border-bottom: 1px solid #f1f5f9;
}

#viewFAttendancePage .f-attend-punch-card-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.28s ease;
}

#viewFAttendancePage .f-attend-punch-card-media:hover .f-attend-punch-card-img {
  transform: scale(1.04);
}

#viewFAttendancePage .f-attend-punch-card-avatar {
  width: 78px;
  height: 78px;
  border-radius: 50%;
  background: linear-gradient(135deg, #1d68ff 0%, #1e40af 100%);
  color: #ffffff;
  font-family: var(--font-heading, 'Outfit', sans-serif);
  font-size: 1.65rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 6px 16px rgba(29, 104, 255, 0.24);
  letter-spacing: 0.04em;
}

#viewFAttendancePage .f-attend-punch-type-badge {
  position: absolute;
  top: 10px;
  left: 10px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  backdrop-filter: blur(6px);
  box-shadow: 0 2px 6px rgba(15, 23, 42, 0.14);
}

#viewFAttendancePage .f-attend-punch-type-badge.punch-in {
  background: rgba(22, 163, 74, 0.92);
  color: #ffffff;
}

#viewFAttendancePage .f-attend-punch-type-badge.punch-out {
  background: rgba(217, 119, 6, 0.92);
  color: #ffffff;
}

#viewFAttendancePage .f-attend-punch-type-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #ffffff;
}

#viewFAttendancePage .f-attend-punch-zoom-hint {
  position: absolute;
  right: 10px;
  bottom: 10px;
  width: 28px;
  height: 28px;
  border-radius: 8px;
  background: rgba(15, 23, 42, 0.65);
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transform: scale(0.92);
  transition: all 0.18s ease;
}

#viewFAttendancePage .f-attend-punch-card-media:hover .f-attend-punch-zoom-hint {
  opacity: 1;
  transform: scale(1);
}

#viewFAttendancePage .f-attend-punch-card-body {
  padding: 13px 14px 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1;
}

#viewFAttendancePage .f-attend-punch-card-name {
  font-size: 0.94rem;
  font-weight: 700;
  color: #0f172a;
  line-height: 1.3;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

#viewFAttendancePage .f-attend-punch-card-badges {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
}

#viewFAttendancePage .f-attend-punch-id-chip {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.72rem;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 6px;
  background: #f1f5f9;
  color: #334155;
  border: 1px solid #e2e8f0;
}

#viewFAttendancePage .f-attend-punch-role-chip {
  font-size: 0.72rem;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 6px;
  background: #eff6ff;
  color: #1d68ff;
}

#viewFAttendancePage .f-attend-punch-role-chip.chip-staff {
  background: #f5f3ff;
  color: #6d28d9;
}

#viewFAttendancePage .f-attend-punch-card-footer {
  margin-top: auto;
  padding-top: 8px;
  border-top: 1px dashed #e2e8f0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  font-size: 0.75rem;
}

#viewFAttendancePage .f-attend-punch-meta-item {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: #64748b;
  font-weight: 500;
}

#viewFAttendancePage .f-attend-punch-meta-time {
  color: #0f172a;
  font-weight: 700;
  font-family: 'JetBrains Mono', monospace;
}

/* ============================================================
   Secondary Password Verification Modal (Students Tab)
   ============================================================ */
#fAttendStudentPasswordModal .f-attend-pwd-modal-card {
  width: 100%;
  max-width: 430px;
  border-radius: 16px;
  overflow: hidden;
  background: #ffffff;
  border: 1px solid #e2e8f0;
  box-shadow: 0 20px 40px -12px rgba(15, 23, 42, 0.22);
}

#fAttendStudentPasswordModal .f-attend-pwd-header-left {
  display: flex;
  align-items: center;
  gap: 12px;
}

#fAttendStudentPasswordModal .f-attend-pwd-icon-badge {
  width: 42px;
  height: 42px;
  border-radius: 10px;
  background: #eff6ff;
  color: #1d68ff;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

#fAttendStudentPasswordModal .f-attend-pwd-body {
  padding: 18px 22px;
}

#fAttendStudentPasswordModal .f-attend-pwd-input-wrap {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
}

#fAttendStudentPasswordModal .f-attend-pwd-input {
  width: 100%;
  padding-right: 42px !important;
  box-sizing: border-box;
}

#fAttendStudentPasswordModal .f-attend-pwd-toggle-btn {
  position: absolute;
  right: 8px;
  width: 32px;
  height: 32px;
  border-radius: 6px;
  border: none;
  background: transparent;
  color: #64748b;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

#fAttendStudentPasswordModal .f-attend-pwd-toggle-btn:hover {
  background: #f1f5f9;
  color: #0f172a;
}

#fAttendStudentPasswordModal .f-attend-pwd-error {
  margin-top: 10px;
  padding: 8px 12px;
  border-radius: 8px;
  background: #fef2f2;
  border: 1px solid #fecaca;
  color: #dc2626;
  font-size: 0.8rem;
  font-weight: 600;
}

#fAttendStudentPasswordModal .f-attend-pwd-footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  padding: 14px 22px;
  background: #f8fafc;
  border-top: 1px solid #e2e8f0;
}

/* ============================================================
   Photo Details Lightbox Modal
   ============================================================ */
#fAttendPhotoLightboxModal .f-attend-lightbox-card {
  width: 100%;
  max-width: 780px;
  border-radius: 18px;
  overflow: hidden;
  background: #ffffff;
  border: 1px solid #e2e8f0;
  box-shadow: 0 24px 48px -12px rgba(15, 23, 42, 0.28);
}

#fAttendPhotoLightboxModal .f-attend-lightbox-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 22px;
  border-bottom: 1px solid #e2e8f0;
  background: #ffffff;
}

#fAttendPhotoLightboxModal .f-attend-lightbox-header-left {
  display: flex;
  align-items: center;
  gap: 10px;
}

#fAttendPhotoLightboxModal .f-attend-lightbox-badge {
  display: inline-flex;
  align-items: center;
  padding: 4px 11px;
  border-radius: 999px;
  font-size: 0.74rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

#fAttendPhotoLightboxModal .f-attend-lightbox-badge.badge-in {
  background: #dcfce7;
  color: #15803d;
  border: 1px solid #bbf7d0;
}

#fAttendPhotoLightboxModal .f-attend-lightbox-badge.badge-out {
  background: #fef3c7;
  color: #b45309;
  border: 1px solid #fde68a;
}

#fAttendPhotoLightboxModal .f-attend-lightbox-body {
  display: grid;
  grid-template-columns: 300px minmax(0, 1fr);
  gap: 24px;
  padding: 22px;
  align-items: start;
  box-sizing: border-box;
}

#fAttendPhotoLightboxModal .f-attend-lightbox-photo-col {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

#fAttendPhotoLightboxModal .f-attend-lightbox-photo-frame {
  width: 100%;
  aspect-ratio: 4 / 4.4;
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid #cbd5e1;
  background: linear-gradient(135deg, #f8fafc 0%, #eff6ff 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: inset 0 1px 3px rgba(15, 23, 42, 0.06);
}

#fAttendPhotoLightboxModal .f-attend-lightbox-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

#fAttendPhotoLightboxModal .f-attend-lightbox-avatar-fallback {
  width: 112px;
  height: 112px;
  border-radius: 50%;
  background: linear-gradient(135deg, #1d68ff 0%, #1e40af 100%);
  color: #ffffff;
  font-family: var(--font-heading, 'Outfit', sans-serif);
  font-size: 2.3rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 10px 24px rgba(29, 104, 255, 0.25);
}

#fAttendPhotoLightboxModal .f-attend-download-photo-btn {
  width: 100%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 14px;
  border-radius: 10px;
  font-size: 0.82rem;
  font-weight: 600;
}

#fAttendPhotoLightboxModal .f-attend-lightbox-details-col {
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-width: 0;
}

#fAttendPhotoLightboxModal .f-attend-lightbox-person-head {
  padding-bottom: 12px;
  border-bottom: 1px solid #f1f5f9;
}

#fAttendPhotoLightboxModal .f-attend-lightbox-person-name {
  margin: 0 0 8px;
  font-family: var(--font-heading, 'Outfit', sans-serif);
  font-size: 1.35rem;
  font-weight: 700;
  color: #0f172a;
}

#fAttendPhotoLightboxModal .f-attend-lightbox-person-chips {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}

#fAttendPhotoLightboxModal .f-attend-lightbox-info-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

#fAttendPhotoLightboxModal .f-attend-lightbox-info-item {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

#fAttendPhotoLightboxModal .f-attend-lightbox-info-punch {
  grid-column: 1 / -1;
  background: #eff6ff;
  border-color: #bfdbfe;
}

#fAttendPhotoLightboxModal .f-attend-lightbox-info-label {
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #64748b;
}

#fAttendPhotoLightboxModal .f-attend-lightbox-info-val {
  font-size: 0.86rem;
  font-weight: 600;
  color: #0f172a;
  word-break: break-word;
}

#fAttendPhotoLightboxModal .f-attend-lightbox-phone-link,
#fAttendPhotoLightboxModal .f-attend-lightbox-email-link {
  color: #1d68ff;
  text-decoration: none;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

#fAttendPhotoLightboxModal .f-attend-lightbox-phone-link:hover,
#fAttendPhotoLightboxModal .f-attend-lightbox-email-link:hover {
  text-decoration: underline;
}

#fAttendPhotoLightboxModal .f-attend-lightbox-footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  margin-top: auto;
  padding-top: 8px;
}

/* Tablet & Mobile Responsive Rules for Activity Records & Lightbox */
@media (max-width: 768px) {
  #viewFAttendancePage .f-attend-module-nav {
    padding: 8px 10px;
  }

  #viewFAttendancePage .f-attend-module-tabs {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
  }

  #viewFAttendancePage .f-attend-module-tab {
    justify-content: center;
    padding: 8px 10px;
    font-size: 0.82rem;
  }

  #viewFAttendancePage .f-attend-act-top-row {
    flex-direction: column;
    align-items: stretch;
  }

  #viewFAttendancePage .f-attend-act-subtabs {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    box-sizing: border-box;
  }

  #viewFAttendancePage .f-attend-act-subtab {
    justify-content: center;
  }

  #viewFAttendancePage .f-attend-act-filter-card {
    flex-direction: column;
    align-items: stretch;
    padding: 14px;
  }

  #viewFAttendancePage .f-attend-act-filter-group,
  #viewFAttendancePage .f-attend-act-search-group {
    width: 100%;
    flex: 1 1 auto;
  }

  #viewFAttendancePage .f-attend-act-filter-actions {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
  }

  #viewFAttendancePage .f-attend-punch-card {
    flex: 0 0 220px;
    width: 220px;
  }

  #fAttendPhotoLightboxModal .f-attend-lightbox-body {
    grid-template-columns: 1fr;
    gap: 16px;
    padding: 16px;
    max-height: 78vh;
    overflow-y: auto;
  }

  #fAttendPhotoLightboxModal .f-attend-lightbox-photo-frame {
    max-width: 260px;
    margin: 0 auto;
  }

  #fAttendPhotoLightboxModal .f-attend-lightbox-info-grid {
    grid-template-columns: 1fr;
  }
}

#viewFAttendancePage .f-attend-module-tab svg { width: 16px; height: 16px; flex-shrink: 0; }
#viewFAttendancePage .f-attend-act-subtab svg, #viewFAttendancePage .f-attend-act-filter-label svg, #viewFAttendancePage .f-attend-act-search-btn svg, #viewFAttendancePage .f-attend-act-clear-btn svg { width: 16px; height: 16px; flex-shrink: 0; }
#viewFAttendancePage .f-attend-carousel-btn svg { width: 16px; height: 16px; }
#viewFAttendancePage .f-attend-act-search-icon { width: 16px; height: 16px; }

#viewFAttendancePage .f-attend-date-group-sub { font-size: 0.85rem; font-weight: 600; color: #64748b; }

/* ============================================================
   F Attendance - Activity Records: layout fixes (v2)
   Styles for the markup actually rendered by index.html / f-attendance.js
   ============================================================ */
#viewFAttendancePage .f-attend-act-top-row {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 16px;
  margin-bottom: 16px;
}

/* Full-width Staff | Students segmented tabs */
#viewFAttendancePage .f-attend-act-subtabs {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
  width: 100%;
  padding: 5px;
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  box-sizing: border-box;
}
#viewFAttendancePage .f-attend-act-subtab {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 16px;
  background: #f1f5f9;
  border-radius: 8px;
}
#viewFAttendancePage .f-attend-act-subtab svg { width: 16px; height: 16px; flex-shrink: 0; }
#viewFAttendancePage .f-attend-act-subtab.active { background: #1d68ff; color: #fff; box-shadow: 0 2px 6px rgba(29,104,255,.25); }
#viewFAttendancePage .f-attend-tab-lock-badge { display: inline-flex; align-items: center; margin-left: 2px; }
#viewFAttendancePage .f-attend-tab-lock-badge svg { width: 14px; height: 14px; }

/* Filter card: one responsive row */
#viewFAttendancePage .f-attend-act-filter-card {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 14px;
  padding: 16px 18px;
  margin-bottom: 18px;
}
#viewFAttendancePage .f-attend-act-filter-fields {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 14px;
  flex: 1 1 420px;
  min-width: 0;
}
#viewFAttendancePage .f-attend-act-field-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}
#viewFAttendancePage .f-attend-act-field-group.field-date { flex: 0 1 200px; }
#viewFAttendancePage .f-attend-act-field-group.field-search { flex: 1 1 240px; }
#viewFAttendancePage .f-attend-act-field-label {
  font-size: 0.74rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: #475569;
}
#viewFAttendancePage .f-attend-act-input-wrap { position: relative; display: flex; align-items: center; width: 100%; }
#viewFAttendancePage .f-attend-act-input-icon {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  width: 16px;
  height: 16px;
  color: #94a3b8;
  pointer-events: none;
}
#viewFAttendancePage .f-attend-act-input-wrap .form-input {
  width: 100%;
  height: 40px;
  padding: 8px 12px 8px 36px;
  border: 1px solid #cbd5e1;
  border-radius: 10px;
  background: #f8fafc;
  font-size: .875rem;
  box-sizing: border-box;
}
#viewFAttendancePage .f-attend-act-input-wrap .form-input:focus {
  outline: none; border-color: #1d68ff; background: #fff; box-shadow: 0 0 0 3px rgba(29,104,255,.12);
}
#viewFAttendancePage .f-attend-act-filter-actions { display: flex; align-items: center; gap: 10px; flex: 0 0 auto; }
#viewFAttendancePage .f-attend-act-apply-btn,
#viewFAttendancePage .f-attend-act-clear-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  height: 40px; padding: 0 16px; border-radius: 10px; white-space: nowrap;
}
#viewFAttendancePage .f-attend-act-apply-btn svg,
#viewFAttendancePage .f-attend-act-clear-btn svg { width: 15px; height: 15px; flex-shrink: 0; }

/* Empty state */
#viewFAttendancePage .f-attend-act-empty-card {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; padding: 48px 20px; gap: 6px;
  background: #fff; border: 1px dashed #cbd5e1; border-radius: 16px;
}
#viewFAttendancePage .f-attend-act-empty-card .f-attend-empty-icon {
  width: 56px; height: 56px; border-radius: 14px; background: #eff6ff; color: #1d68ff;
  display: flex; align-items: center; justify-content: center; margin-bottom: 6px;
}
#viewFAttendancePage .f-attend-act-empty-card .f-attend-empty-icon svg { width: 28px; height: 28px; }
#viewFAttendancePage .f-attend-act-empty-card h3 { margin: 0; font-size: 1.05rem; font-weight: 700; color: #0f172a; }
#viewFAttendancePage .f-attend-act-empty-card p { margin: 0; font-size: .85rem; color: #64748b; max-width: 460px; }

/* Date group header */
#viewFAttendancePage .f-attend-date-group-actions { display: flex; align-items: center; gap: 10px; }
#viewFAttendancePage .f-attend-carousel-nav { display: inline-flex; gap: 6px; }
#viewFAttendancePage .f-attend-date-group-sub { font-size: .85rem; font-weight: 600; color: #64748b; }
#viewFAttendancePage .f-attend-date-group-badge.date-badge-today { background:#eff6ff; color:#1d68ff; border:1px solid #bfdbfe; }
#viewFAttendancePage .f-attend-date-group-badge.date-badge-yesterday { background:#f5f3ff; color:#6d28d9; border:1px solid #ddd6fe; }
#viewFAttendancePage .f-attend-date-group-badge.date-badge-older { background:#f1f5f9; color:#334155; border:1px solid #cbd5e1; }
#viewFAttendancePage .f-attend-carousel-btn svg { width: 16px; height: 16px; }

/* Punch cards (photo wrap, initials, status, zoom hint, meta rows) */
#viewFAttendancePage .f-attend-punch-card-photo-wrap {
  position: relative; width: 100%; height: 176px; overflow: hidden; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg,#f8fafc 0%,#eff6ff 100%); border-bottom: 1px solid #f1f5f9;
}
#viewFAttendancePage .f-attend-punch-card-photo-wrap:focus-visible { outline: 2px solid #1d68ff; outline-offset: -2px; }
#viewFAttendancePage .f-attend-punch-card-photo-wrap:hover .f-attend-punch-card-img { transform: scale(1.04); }
#viewFAttendancePage .f-attend-punch-card-initials {
  width: 78px; height: 78px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  color: #fff; font-family: var(--font-heading,'Outfit',sans-serif); font-size: 1.6rem; font-weight: 700;
  background: linear-gradient(135deg,#1d68ff,#1e40af); box-shadow: 0 6px 16px rgba(29,104,255,.24);
}
#viewFAttendancePage .f-attend-punch-card-initials.initials-staff { background: linear-gradient(135deg,#6d28d9,#4c1d95); }
#viewFAttendancePage .f-attend-punch-card-status {
  position: absolute; top: 10px; left: 10px; display: inline-flex; align-items: center; gap: 5px;
  padding: 4px 10px; border-radius: 999px; font-size: .7rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: .03em; color: #fff; box-shadow: 0 2px 6px rgba(15,23,42,.14);
}
#viewFAttendancePage .f-attend-punch-card-status.punch-badge-in { background: rgba(22,163,74,.94); }
#viewFAttendancePage .f-attend-punch-card-status.punch-badge-out { background: rgba(217,119,6,.94); }
#viewFAttendancePage .f-attend-punch-card-status .status-dot { width: 6px; height: 6px; border-radius: 50%; background: #fff; }
#viewFAttendancePage .f-attend-photo-zoom-hint {
  position: absolute; right: 8px; bottom: 8px; display: inline-flex; align-items: center; gap: 5px;
  padding: 4px 8px; border-radius: 8px; background: rgba(15,23,42,.72); color: #fff;
  font-size: .68rem; font-weight: 600; opacity: 0; transition: opacity .18s ease;
}
#viewFAttendancePage .f-attend-photo-zoom-hint svg { width: 12px; height: 12px; }
#viewFAttendancePage .f-attend-punch-card-photo-wrap:hover .f-attend-photo-zoom-hint,
#viewFAttendancePage .f-attend-punch-card-photo-wrap:focus-visible .f-attend-photo-zoom-hint { opacity: 1; }
#viewFAttendancePage .f-attend-id-code {
  font-family: 'JetBrains Mono', monospace; font-size: .72rem; font-weight: 600; padding: 2px 8px;
  border-radius: 6px; background: #f1f5f9; color: #334155; border: 1px solid #e2e8f0;
}
#viewFAttendancePage .f-attend-role-pill { font-size: .72rem; font-weight: 700; padding: 2px 8px; border-radius: 6px; }
#viewFAttendancePage .f-attend-role-pill.f-role-student { background: #eff6ff; color: #1d68ff; }
#viewFAttendancePage .f-attend-role-pill.f-role-staff { background: #f5f3ff; color: #6d28d9; }
#viewFAttendancePage .f-attend-punch-meta-row { display: inline-flex; align-items: center; gap: 5px; color: #64748b; font-weight: 500; font-size: .75rem; min-width: 0; }
#viewFAttendancePage .f-attend-punch-meta-row .meta-icon { display: inline-flex; flex-shrink: 0; }
#viewFAttendancePage .f-attend-punch-meta-row svg { width: 13px; height: 13px; }
#viewFAttendancePage .f-attend-punch-meta-row .meta-time-val { color: #0f172a; font-family: 'JetBrains Mono', monospace; font-weight: 700; }

/* Photo details lightbox */
#fAttendPhotoLightboxModal .f-attend-lightbox-photo-frame { position: relative; }
#fAttendPhotoLightboxModal .f-attend-lightbox-status-badge {
  position: absolute; top: 10px; left: 10px; padding: 4px 10px; border-radius: 999px; font-size: .7rem;
  font-weight: 700; text-transform: uppercase; background: #16a34a; color: #fff;
}
#fAttendPhotoLightboxModal .f-attend-lightbox-status-badge.badge-out { background: #d97706; }
#fAttendPhotoLightboxModal .f-attend-lightbox-timestamp-strip {
  position: absolute; left: 0; right: 0; bottom: 0; padding: 8px 12px; text-align: center;
  background: rgba(15,23,42,.72); color: #fff; font-family: 'JetBrains Mono', monospace; font-size: .74rem; font-weight: 600;
}
#fAttendPhotoLightboxModal .f-attend-lightbox-info-col { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
#fAttendPhotoLightboxModal .f-attend-lightbox-role-tag {
  display: inline-block; padding: 3px 10px; border-radius: 6px; background: #eff6ff; color: #1d68ff; font-size: .76rem; font-weight: 700;
}
#fAttendPhotoLightboxModal .f-attend-lightbox-details-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 12px; }
#fAttendPhotoLightboxModal .f-attend-lightbox-detail-item {
  display: flex; flex-direction: column; gap: 4px; min-width: 0; padding: 10px 12px;
  background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 10px;
}
#fAttendPhotoLightboxModal .detail-label { font-size: .7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: #64748b; }
#fAttendPhotoLightboxModal .detail-val { font-size: .86rem; font-weight: 600; color: #0f172a; word-break: break-word; }
#fAttendPhotoLightboxModal .detail-mono { font-family: 'JetBrains Mono', monospace; }
#fAttendPhotoLightboxModal .detail-phone-link,
#fAttendPhotoLightboxModal .detail-email-link { color: #1d68ff; text-decoration: none; display: inline-flex; align-items: center; gap: 5px; }
#fAttendPhotoLightboxModal .detail-phone-link:hover,
#fAttendPhotoLightboxModal .detail-email-link:hover { text-decoration: underline; }
#fAttendPhotoLightboxModal .f-attend-lightbox-punch-box {
  display: flex; align-items: stretch; background: #eff6ff; border: 1px solid #bfdbfe; border-radius: 12px; padding: 12px 16px;
}
#fAttendPhotoLightboxModal .f-attend-lightbox-punch-col { flex: 1; display: flex; flex-direction: column; gap: 4px; min-width: 0; }
#fAttendPhotoLightboxModal .f-attend-lightbox-punch-divider { width: 1px; background: #bfdbfe; margin: 0 14px; }
#fAttendPhotoLightboxModal .punch-box-label { font-size: .7rem; font-weight: 700; text-transform: uppercase; color: #64748b; }
#fAttendPhotoLightboxModal .punch-box-val { font-size: 1rem; color: #0f172a; }
#fAttendPhotoLightboxModal .punch-time-mono { font-family: 'JetBrains Mono', monospace; }
#fAttendPhotoLightboxModal .modal-footer { padding: 12px 22px; border-top: 1px solid #e2e8f0; display: flex; justify-content: flex-end; }

@media (max-width: 768px) {
  #viewFAttendancePage .f-attend-act-filter-card { flex-direction: column; align-items: stretch; padding: 14px; }
  #viewFAttendancePage .f-attend-act-filter-fields { flex: 1 1 auto; flex-direction: column; align-items: stretch; width: 100%; }
  #viewFAttendancePage .f-attend-act-field-group.field-date,
  #viewFAttendancePage .f-attend-act-field-group.field-search { flex: 1 1 auto; width: 100%; }
  #viewFAttendancePage .f-attend-act-filter-actions { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); width: 100%; }
  #viewFAttendancePage .f-attend-act-subtab { padding: 9px 8px; font-size: .82rem; }
  #fAttendPhotoLightboxModal .f-attend-lightbox-details-grid { grid-template-columns: 1fr; }
  #fAttendPhotoLightboxModal .f-attend-lightbox-punch-box { flex-direction: column; gap: 10px; }
  #fAttendPhotoLightboxModal .f-attend-lightbox-punch-divider { width: auto; height: 1px; margin: 0; }
}

/* ============================================================
   F Attendance - Master Directory
   ============================================================ */
#viewFAttendancePage .f-attend-module-tabs { flex-wrap: wrap; }
#viewFAttendancePage .f-attend-dir-hero { margin-bottom: 16px; }
#viewFAttendancePage .f-attend-dir-toolbar {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 16px;
}
#viewFAttendancePage .f-attend-dir-heading { display: flex; align-items: center; gap: 10px; min-width: 0; }
#viewFAttendancePage .f-attend-dir-heading svg { width: 18px; height: 18px; color: #475569; flex-shrink: 0; }
#viewFAttendancePage .f-attend-dir-heading h2 { margin: 0; font-size: 1.05rem; font-weight: 700; color: #0f172a; }
#viewFAttendancePage .f-attend-dir-count {
  display: inline-flex; align-items: center; padding: 2px 10px; border-radius: 999px;
  background: #eff6ff; color: #1d68ff; border: 1px solid #bfdbfe; font-size: .78rem; font-weight: 700;
}
#viewFAttendancePage .f-attend-dir-controls { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
#viewFAttendancePage .f-attend-dir-typetabs { width: auto; display: inline-grid; grid-template-columns: repeat(2, auto); }
#viewFAttendancePage .f-attend-dir-search { width: 260px; max-width: 100%; }

#viewFAttendancePage .f-attend-dir-grid {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; width: 100%;
}
#viewFAttendancePage .f-attend-dir-card {
  display: flex; flex-direction: column; gap: 12px; min-width: 0; padding: 18px;
  background: #fff; border: 1px solid #e2e8f0; border-radius: 16px; box-shadow: 0 1px 3px rgba(15,23,42,.04);
  box-sizing: border-box; transition: box-shadow .2s ease, border-color .2s ease;
}
#viewFAttendancePage .f-attend-dir-card:hover { border-color: #93c5fd; box-shadow: 0 8px 20px -6px rgba(15,23,42,.1); }
#viewFAttendancePage .f-attend-dir-card-head { display: flex; align-items: center; gap: 12px; min-width: 0; }
#viewFAttendancePage .f-attend-dir-avatar {
  width: 48px; height: 48px; border-radius: 50%; overflow: hidden; flex-shrink: 0;
  background: linear-gradient(135deg,#1d68ff,#1e40af); display: flex; align-items: center; justify-content: center;
}
#viewFAttendancePage .f-attend-dir-avatar-img { width: 100%; height: 100%; object-fit: cover; display: block; }
#viewFAttendancePage .f-attend-dir-avatar-initials { color: #fff; font-weight: 700; font-size: .95rem; letter-spacing: .03em; }
#viewFAttendancePage .f-attend-dir-id-block { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
#viewFAttendancePage .f-attend-dir-name {
  margin: 0; font-family: var(--font-heading,'Outfit',sans-serif); font-size: 1.05rem; font-weight: 700; color: #0f172a;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
#viewFAttendancePage .f-attend-dir-id { font-family: 'JetBrains Mono', monospace; font-size: .8rem; font-weight: 700; color: #1d68ff; }
#viewFAttendancePage .f-attend-dir-rows { display: flex; flex-direction: column; border-top: 1px solid #f1f5f9; }
#viewFAttendancePage .f-attend-dir-row {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 0;
  border-bottom: 1px solid #f1f5f9; font-size: .84rem; min-width: 0;
}
#viewFAttendancePage .f-attend-dir-row .k { color: #64748b; flex-shrink: 0; }
#viewFAttendancePage .f-attend-dir-row .v { color: #0f172a; font-weight: 500; text-align: right; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#viewFAttendancePage .f-attend-dir-link { color: #1d68ff; font-weight: 700; text-decoration: none; }
#viewFAttendancePage .f-attend-dir-link:hover { text-decoration: underline; }
#viewFAttendancePage .f-attend-dir-plain { color: inherit; text-decoration: none; }
#viewFAttendancePage .f-attend-dir-muted { color: #94a3b8; }
#viewFAttendancePage .f-attend-dir-pwd { color: #1d68ff !important; font-family: 'JetBrains Mono', monospace; font-weight: 700 !important; }
#viewFAttendancePage .f-attend-dir-must {
  font-style: normal; font-family: 'Inter', sans-serif; font-size: .64rem; font-weight: 700; text-transform: uppercase;
  padding: 1px 6px; margin-left: 4px; border-radius: 999px; background: #fef3c7; color: #b45309;
}
#viewFAttendancePage .f-attend-dir-edit-btn {
  width: 100%; display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 40px; border-radius: 10px; margin-top: auto;
}
#viewFAttendancePage .f-attend-dir-edit-btn svg { width: 15px; height: 15px; flex-shrink: 0; }

/* Edit modal */
#fAttendDirEditModal .f-attend-dir-modal-card {
  width: 100%; max-width: 560px; max-height: 92vh; display: flex; flex-direction: column;
  border-radius: 16px; overflow: hidden; background: #fff; border: 1px solid #e2e8f0;
  box-shadow: 0 20px 40px -12px rgba(15,23,42,.22);
}
#fAttendDirEditModal form { display: flex; flex-direction: column; min-height: 0; flex: 1 1 auto; }
#fAttendDirEditModal .f-attend-dir-form {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; padding: 18px 22px; overflow-y: auto;
}
#fAttendDirEditModal .f-attend-dir-field { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
#fAttendDirEditModal .f-attend-dir-field-full { grid-column: 1 / -1; }
#fAttendDirEditModal .f-attend-dir-field label { font-size: .78rem; font-weight: 700; color: #334155; }
#fAttendDirEditModal .f-attend-dir-field .req { color: #dc2626; }
#fAttendDirEditModal .form-input { width: 100%; height: 40px; box-sizing: border-box; }
#fAttendDirEditModal .form-input[readonly] { background: #f1f5f9; color: #64748b; cursor: not-allowed; }
#fAttendDirEditModal .form-input.is-invalid { border-color: #dc2626; box-shadow: 0 0 0 3px rgba(220,38,38,.1); }
#fAttendDirEditModal .f-attend-dir-err { min-height: 0; font-size: .74rem; font-weight: 600; color: #dc2626; }
#fAttendDirEditModal .f-attend-dir-pwd-row { display: flex; gap: 8px; }
#fAttendDirEditModal .f-attend-dir-pwd-row .form-input { flex: 1 1 auto; font-family: 'JetBrains Mono', monospace; }
#fAttendDirEditModal .f-attend-dir-pwd-row .btn { flex: 0 0 auto; height: 40px; white-space: nowrap; }
#fAttendDirEditModal .f-attend-dir-check { display: flex; align-items: center; gap: 8px; font-weight: 500 !important; color: #475569 !important; cursor: pointer; }
#fAttendDirEditModal .f-attend-dir-check input { width: 16px; height: 16px; accent-color: #1d68ff; }
#fAttendDirEditModal .f-attend-dir-form-error {
  padding: 8px 12px; border-radius: 8px; background: #fef2f2; border: 1px solid #fecaca; color: #dc2626; font-size: .8rem; font-weight: 600;
}
#fAttendDirEditModal .f-attend-dir-modal-footer {
  display: flex; justify-content: flex-end; gap: 10px; padding: 14px 22px; background: #f8fafc; border-top: 1px solid #e2e8f0;
}

@media (max-width: 1024px) {
  #viewFAttendancePage .f-attend-dir-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 768px) {
  #viewFAttendancePage .f-attend-module-tabs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
  #viewFAttendancePage .f-attend-module-tab { padding: 8px 4px; font-size: .74rem; gap: 4px; }
  #viewFAttendancePage .f-attend-module-tab svg { display: none; }
  #viewFAttendancePage .f-attend-dir-toolbar { flex-direction: column; align-items: stretch; }
  #viewFAttendancePage .f-attend-dir-controls { flex-direction: column; align-items: stretch; }
  #viewFAttendancePage .f-attend-dir-typetabs { display: grid; width: 100%; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #viewFAttendancePage .f-attend-dir-search { width: 100%; }
}
@media (max-width: 640px) {
  #viewFAttendancePage .f-attend-dir-grid { grid-template-columns: minmax(0, 1fr); }
  #fAttendDirEditModal .f-attend-dir-form { grid-template-columns: minmax(0, 1fr); padding: 16px; }
  #fAttendDirEditModal .f-attend-dir-pwd-row { flex-direction: column; }
}

/* ============================================================
   F Attendance - Attendance Report
   ============================================================ */
#viewFAttendancePage .f-attend-rep-filter-card {
  background: #fff; border: 1px solid #e2e8f0; border-radius: 16px; padding: 20px 22px;
  box-shadow: 0 1px 3px rgba(15,23,42,.04); display: flex; flex-direction: column; gap: 16px; box-sizing: border-box;
}
#viewFAttendancePage .f-attend-rep-dates { display: flex; flex-wrap: wrap; gap: 14px; }
#viewFAttendancePage .f-attend-rep-field { display: flex; flex-direction: column; gap: 6px; flex: 0 1 200px; min-width: 150px; }
#viewFAttendancePage .f-attend-rep-field label,
#viewFAttendancePage .f-attend-rep-classes-title { font-size: .78rem; font-weight: 700; color: #334155; }
#viewFAttendancePage .f-attend-rep-classes-title small { font-weight: 500; color: #64748b; font-size: .74rem; }
#viewFAttendancePage .f-attend-rep-field .form-input { height: 40px; width: 100%; box-sizing: border-box; border-radius: 10px; }
#viewFAttendancePage .f-attend-rep-classes-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
#viewFAttendancePage .f-attend-rep-selectall { display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 14px; border-radius: 999px; font-size: .8rem; }
#viewFAttendancePage .f-attend-rep-selectall svg { width: 14px; height: 14px; }
#viewFAttendancePage .f-attend-rep-pills { display: flex; flex-wrap: wrap; gap: 8px; }
#viewFAttendancePage .f-attend-rep-hint { font-size: .84rem; color: #64748b; }
#viewFAttendancePage .f-attend-rep-pill {
  display: inline-flex; align-items: center; gap: 7px; padding: 6px 12px; border-radius: 999px; cursor: pointer;
  border: 1px solid #cbd5e1; background: #fff; color: #475569; font-size: .8rem; font-weight: 600; user-select: none;
  transition: all .15s ease;
}
#viewFAttendancePage .f-attend-rep-pill:hover { border-color: #93c5fd; }
#viewFAttendancePage .f-attend-rep-pill.is-selected { background: #eff6ff; border-color: #1d68ff; color: #1d68ff; }
#viewFAttendancePage .f-attend-rep-pill input { width: 14px; height: 14px; margin: 0; accent-color: #1d68ff; cursor: pointer; }
#viewFAttendancePage .f-attend-rep-error {
  padding: 9px 12px; border-radius: 8px; background: #fef2f2; border: 1px solid #fecaca; color: #dc2626; font-size: .82rem; font-weight: 600;
}
#viewFAttendancePage .f-attend-rep-actions { display: flex; justify-content: flex-end; }
#viewFAttendancePage .f-attend-rep-generate,
#viewFAttendancePage .f-attend-rep-download { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 42px; padding: 0 20px; border-radius: 10px; white-space: nowrap; }
#viewFAttendancePage .f-attend-rep-generate svg,
#viewFAttendancePage .f-attend-rep-download svg { width: 16px; height: 16px; flex-shrink: 0; }
#viewFAttendancePage .f-attend-rep-download:disabled { opacity: .5; cursor: not-allowed; }

#viewFAttendancePage .f-attend-rep-results { margin-top: 18px; display: flex; flex-direction: column; gap: 18px; }
#viewFAttendancePage .f-attend-rep-cards { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
#viewFAttendancePage .f-attend-rep-card {
  background: #fff; border: 1px solid #e2e8f0; border-top: 4px solid #1d68ff; border-radius: 14px; padding: 16px 18px;
  display: flex; flex-direction: column; gap: 8px; min-width: 0; box-shadow: 0 1px 3px rgba(15,23,42,.04);
}
#viewFAttendancePage .f-attend-rep-card .lbl { font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: #64748b; }
#viewFAttendancePage .f-attend-rep-card strong { font-family: var(--font-heading,'Outfit',sans-serif); font-size: 2rem; line-height: 1.1; color: #0f172a; }
#viewFAttendancePage .f-attend-rep-card.c-blue { border-top-color: #1d68ff; } 
#viewFAttendancePage .f-attend-rep-card.c-blue strong { color: #1d68ff; }
#viewFAttendancePage .f-attend-rep-card.c-slate { border-top-color: #64748b; }
#viewFAttendancePage .f-attend-rep-card.c-green { border-top-color: #16a34a; }
#viewFAttendancePage .f-attend-rep-card.c-green strong { color: #16a34a; }
#viewFAttendancePage .f-attend-rep-card.c-red { border-top-color: #dc2626; }
#viewFAttendancePage .f-attend-rep-card.c-red strong { color: #dc2626; }

#viewFAttendancePage .f-attend-rep-preview {
  background: #fff; border: 1px solid #e2e8f0; border-radius: 16px; padding: 18px 20px; display: flex; flex-direction: column; gap: 14px;
  box-shadow: 0 1px 3px rgba(15,23,42,.04); min-width: 0;
}
#viewFAttendancePage .f-attend-rep-preview-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
#viewFAttendancePage .f-attend-rep-preview-head h3 { margin: 0; font-size: 1.05rem; font-weight: 700; color: #0f172a; }
#viewFAttendancePage .f-attend-rep-preview-head p { margin: 4px 0 0; font-size: .8rem; color: #64748b; }
#viewFAttendancePage .f-attend-rep-legend { display: flex; flex-wrap: wrap; gap: 8px; }
#viewFAttendancePage .f-attend-rep-badge {
  display: inline-flex; align-items: center; padding: 3px 10px; border-radius: 999px; font-size: .74rem; font-weight: 700; border: 1px solid transparent; white-space: nowrap;
}
#viewFAttendancePage .f-attend-rep-badge.st-excellent { background: #dcfce7; color: #15803d; border-color: #bbf7d0; }
#viewFAttendancePage .f-attend-rep-badge.st-good { background: #fef3c7; color: #b45309; border-color: #fde68a; }
#viewFAttendancePage .f-attend-rep-badge.st-attention { background: #fee2e2; color: #b91c1c; border-color: #fecaca; }
#viewFAttendancePage .f-attend-rep-table-wrap { width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; border: 1px solid #e2e8f0; border-radius: 12px; }
#viewFAttendancePage .f-attend-rep-table { width: 100%; min-width: 760px; border-collapse: collapse; font-size: .85rem; }
#viewFAttendancePage .f-attend-rep-table th {
  position: sticky; top: 0; background: #f8fafc; color: #475569; text-align: left; font-size: .72rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .04em; padding: 11px 14px; border-bottom: 1px solid #e2e8f0; white-space: nowrap;
}
#viewFAttendancePage .f-attend-rep-table td { padding: 11px 14px; border-bottom: 1px solid #f1f5f9; color: #0f172a; white-space: nowrap; }
#viewFAttendancePage .f-attend-rep-table tbody tr:last-child td { border-bottom: 0; }
#viewFAttendancePage .f-attend-rep-table tbody tr:hover { background: #f8fafc; }
#viewFAttendancePage .f-attend-rep-name { font-weight: 600; }
#viewFAttendancePage .f-attend-rep-id { font-family: 'JetBrains Mono', monospace; font-size: .76rem; font-weight: 600; padding: 2px 8px; border-radius: 6px; background: #f1f5f9; color: #334155; }

@media (max-width: 1024px) {
  #viewFAttendancePage .f-attend-rep-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 768px) {
  #viewFAttendancePage .f-attend-module-tabs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #viewFAttendancePage .f-attend-module-tab { font-size: .78rem; padding: 8px 6px; }
  #viewFAttendancePage .f-attend-rep-filter-card { padding: 16px; }
  #viewFAttendancePage .f-attend-rep-field { flex: 1 1 140px; }
  #viewFAttendancePage .f-attend-rep-actions .btn,
  #viewFAttendancePage .f-attend-rep-preview-head .btn { width: 100%; }
  #viewFAttendancePage .f-attend-rep-preview { padding: 14px; }
}
@media (max-width: 480px) {
  #viewFAttendancePage .f-attend-rep-cards { grid-template-columns: minmax(0, 1fr); }
  #viewFAttendancePage .f-attend-rep-card strong { font-size: 1.7rem; }
}

/* F Attendance Master Directory Parent Password Show/Hide Toggle */
.f-attend-dir-pwd-wrapper {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  vertical-align: middle;
}
.f-attend-dir-pwd-text {
  font-family: inherit;
  font-weight: 600;
  color: #0f172a;
  letter-spacing: 0.5px;
}
.btn-f-attend-toggle-pwd {
  border: 1px solid #e2e8f0;
  background: #f8fafc;
  color: #64748b;
  cursor: pointer;
  padding: 3px 6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  transition: all 0.15s ease;
  line-height: 1;
}
.btn-f-attend-toggle-pwd:hover {
  background: #e2e8f0;
  color: #0f172a;
  border-color: #cbd5e1;
}


/* ============================================================
   F Attendance - Global SVG and Layout Safety Overrides
   ============================================================ */
#viewFAttendancePage svg {
  max-width: 100%;
}

#viewFAttendancePage:not(.role-parent-active) .f-attend-module-nav {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  background: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 14px !important;
  padding: 8px 12px !important;
  margin-bottom: 20px !important;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.04) !important;
}

#viewFAttendancePage .f-attend-module-tabs {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  background: #f1f5f9 !important;
  padding: 4px !important;
  border-radius: 10px !important;
  border: none !important;
}

#viewFAttendancePage .f-attend-module-tab {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 8px 16px !important;
  border-radius: 8px !important;
  border: none !important;
  background: transparent !important;
  color: #475569 !important;
  font-family: var(--font-body, 'Inter', sans-serif) !important;
  font-size: 0.875rem !important;
  font-weight: 600 !important;
  cursor: pointer !important;
  transition: all 0.18s ease !important;
  white-space: nowrap !important;
  box-shadow: none !important;
  outline: none !important;
}

#viewFAttendancePage .f-attend-module-tab:hover {
  color: #0f172a !important;
  background: rgba(255, 255, 255, 0.65) !important;
}

#viewFAttendancePage .f-attend-module-tab.active {
  background: #1d68ff !important;
  color: #ffffff !important;
  box-shadow: 0 2px 6px rgba(29, 104, 255, 0.25) !important;
}

#viewFAttendancePage .f-attend-module-tab svg {
  width: 16px !important;
  height: 16px !important;
  max-width: 16px !important;
  max-height: 16px !important;
  display: inline-block !important;
  flex-shrink: 0 !important;
}

#viewFAttendancePage .f-attend-date-bar-card {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  flex-wrap: wrap !important;
  background: #ffffff !important;
  border: 1px solid var(--border-color, #e2e8f0) !important;
  border-radius: 14px !important;
  padding: 14px 22px !important;
  gap: 14px !important;
  box-shadow: 0 2px 6px rgba(15, 23, 42, 0.04) !important;
  margin-bottom: 20px !important;
}

#viewFAttendancePage .f-attend-date-bar-left {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  flex-wrap: wrap !important;
}

#viewFAttendancePage .f-attend-calendar-icon {
  width: 20px !important;
  height: 20px !important;
  max-width: 20px !important;
  max-height: 20px !important;
  color: #2563eb !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
}

#viewFAttendancePage .f-attend-calendar-icon svg {
  width: 18px !important;
  height: 18px !important;
  max-width: 18px !important;
  max-height: 18px !important;
  display: inline-block !important;
  flex-shrink: 0 !important;
}

#viewFAttendancePage .f-attend-refresh-btn svg {
  width: 16px !important;
  height: 16px !important;
  max-width: 16px !important;
  max-height: 16px !important;
  display: inline-block !important;
  flex-shrink: 0 !important;
}

@media (max-width: 768px) {
  #viewFAttendancePage .f-attend-module-tabs {
    width: 100% !important;
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

/* ============================================================
   First-Time Password Change Modals (Parent & Student)
   ============================================================ */
#parentFirstLoginModal.modal-backdrop,
#studentFirstLoginModal.modal-backdrop {
  position: fixed !important;
  inset: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  height: 100dvh !important;
  background: #f8fafc !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  z-index: 999999 !important;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px !important;
  box-sizing: border-box !important;
}

#parentFirstLoginModal .modal-card,
#studentFirstLoginModal .modal-card {
  background: #ffffff !important;
  border-radius: 16px !important;
  border: 1px solid #e2e8f0 !important;
  box-shadow: 0 20px 40px -8px rgba(15, 23, 42, 0.12), 0 0 1px 1px rgba(15, 23, 42, 0.04) !important;
  max-width: 480px !important;
  width: 94% !important;
  margin: auto !important;
  overflow: hidden !important;
}

#parentFirstLoginModal .modal-breadcrumb-bar,
#studentFirstLoginModal .modal-breadcrumb-bar {
  display: none !important;
}

/* ============================================================
   PARENT PORTAL DEDICATED INTERFACE STYLES (TUITION MANAGEMENT THEME)
   ============================================================ */
html.role-parent,
body.role-parent {
  background-color: #f8fafc !important;
}

/* User Role Pill for Parent in Sidebar Footer */
.user-role-pill.role-parent {
  background: #eff6ff !important;
  color: #2563eb !important;
  border: 1px solid #bfdbfe !important;
}

/* Isolation: Strictly hide all admin-only navigation, sub-views, and modals from parent */
body.role-parent #appBreadcrumbBar,
html.role-parent #appBreadcrumbBar,
body.role-parent .app-breadcrumb-bar,
html.role-parent .app-breadcrumb-bar,
body.role-parent #fAttendAdminNav,
html.role-parent #fAttendAdminNav,
body.role-parent #viewFAttendancePage #fAttendAdminNav,
html.role-parent #viewFAttendancePage #fAttendAdminNav,
body.role-parent #viewFAttendancePage .f-attend-module-nav,
html.role-parent #viewFAttendancePage .f-attend-module-nav,
body.role-parent #viewFAttendancePage .f-attend-subview,
html.role-parent #viewFAttendancePage .f-attend-subview,
body.role-parent #viewFAttendancePage .f-attend-subview.active,
html.role-parent #viewFAttendancePage .f-attend-subview.active,
body.role-parent #fAttendSubViewDashboard,
html.role-parent #fAttendSubViewDashboard,
body.role-parent #fAttendSubViewActivity,
html.role-parent #fAttendSubViewActivity,
body.role-parent #fAttendSubViewDirectory,
html.role-parent #fAttendSubViewDirectory,
body.role-parent #fAttendSubViewReport,
html.role-parent #fAttendSubViewReport,
body.role-parent #viewFAttendancePage #fAttendSubViewDashboard,
html.role-parent #viewFAttendancePage #fAttendSubViewDashboard,
body.role-parent #viewFAttendancePage #fAttendSubViewActivity,
html.role-parent #viewFAttendancePage #fAttendSubViewActivity,
body.role-parent #viewFAttendancePage #fAttendSubViewDirectory,
html.role-parent #viewFAttendancePage #fAttendSubViewDirectory,
body.role-parent #viewFAttendancePage #fAttendSubViewReport,
html.role-parent #viewFAttendancePage #fAttendSubViewReport,
body.role-parent #fAttendDirEditModal,
html.role-parent #fAttendDirEditModal,
body.role-parent #fAttendStudentPasswordModal,
html.role-parent #fAttendStudentPasswordModal,
body.role-parent #viewFAttendancePage #fAttendDirEditModal,
html.role-parent #viewFAttendancePage #fAttendDirEditModal,
body.role-parent #viewFAttendancePage #fAttendStudentPasswordModal,
html.role-parent #viewFAttendancePage #fAttendStudentPasswordModal {
  display: none !important;
}

body.role-parent #viewFAttendancePage,
html.role-parent #viewFAttendancePage {
  display: block !important;
  padding: 0 !important;
  margin: 0 !important;
  width: 100% !important;
  background-color: transparent !important;
}

body.role-parent .f-attend-dashboard-container,
html.role-parent .f-attend-dashboard-container {
  padding: 0 !important;
  margin: 0 !important;
  max-width: 100% !important;
  width: 100% !important;
  background-color: transparent !important;
}

/* Dedicated Parent Sidebar Navigation (Inside Tuition Management Navy Sidebar) */
.parent-sidebar-nav {
  padding: 12px 10px !important;
  display: flex !important;
  flex-direction: column !important;
}

.parent-sidebar-logout-btn {
  color: #f87171 !important;
}

.parent-sidebar-logout-btn:hover {
  background: rgba(239, 68, 68, 0.15) !important;
  color: #fca5a5 !important;
}

/* Parent Portal Container Visibility: ONLY visible for parent role */
body:not(.role-parent) #fAttendStudentPortal,
html:not(.role-parent) #fAttendStudentPortal,
body:not(.role-parent) #viewFAttendancePage #fAttendStudentPortal,
html:not(.role-parent) #viewFAttendancePage #fAttendStudentPortal {
  display: none !important;
}

body.role-parent #fAttendStudentPortal,
html.role-parent #fAttendStudentPortal,
body.role-parent #viewFAttendancePage #fAttendStudentPortal,
html.role-parent #viewFAttendancePage #fAttendStudentPortal {
  display: flex !important;
  flex-direction: column !important;
}

/* Parent Portal Content Container */
.parent-portal-wrapper {
  width: 100% !important;
  max-width: 1200px !important;
  margin: 0 auto !important;
  padding: 24px 28px 48px !important;
  box-sizing: border-box !important;
  background: transparent !important;
}

.parent-portal-content {
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  box-sizing: border-box !important;
}

/* Page Header in Tuition Management Theme */
.parent-view-header {
  margin-bottom: 22px !important;
}

.parent-live-kicker {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  font-size: 0.74rem !important;
  font-weight: 700 !important;
  color: #2563eb !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  margin-bottom: 6px !important;
}

.parent-live-dot {
  width: 7px !important;
  height: 7px !important;
  border-radius: 50% !important;
  background: #2563eb !important;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.2) !important;
  display: inline-block !important;
}

.parent-history-kicker-icon {
  width: 14px !important;
  height: 14px !important;
  max-width: 14px !important;
  max-height: 14px !important;
  color: #2563eb !important;
  display: inline-block !important;
}

.parent-hero-title {
  font-family: inherit !important;
  font-size: 1.75rem !important;
  font-weight: 700 !important;
  color: #0f172a !important;
  line-height: 1.25 !important;
  margin: 0 0 4px 0 !important;
}

.parent-hero-subtitle {
  font-size: 0.92rem !important;
  font-weight: 400 !important;
  color: #64748b !important;
  margin: 0 !important;
}

/* Date Selection Toolbar Card (Tuition Management Card Style) */
.parent-date-toolbar-card,
.parent-history-filter-card {
  background: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 12px !important;
  padding: 16px 20px !important;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.04) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  flex-wrap: wrap !important;
  gap: 14px !important;
  margin-bottom: 24px !important;
}

.parent-date-select-group {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
}

.parent-cal-icon {
  width: 18px !important;
  height: 18px !important;
  max-width: 18px !important;
  max-height: 18px !important;
  color: #2563eb !important;
  display: inline-block !important;
  flex-shrink: 0 !important;
}

.parent-date-label,
.parent-history-field label {
  font-size: 0.88rem !important;
  font-weight: 600 !important;
  color: #334155 !important;
  cursor: pointer !important;
  margin: 0 !important;
}

.parent-date-input {
  height: 38px !important;
  padding: 6px 12px !important;
  font-size: 0.88rem !important;
  font-weight: 500 !important;
  color: #0f172a !important;
  background: #ffffff !important;
  border: 1px solid #cbd5e1 !important;
  border-radius: 8px !important;
  outline: none !important;
  box-sizing: border-box !important;
  transition: border-color 0.15s, box-shadow 0.15s !important;
}

.parent-date-input:focus {
  border-color: #2563eb !important;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15) !important;
}

.btn-parent-refresh {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  height: 38px !important;
  padding: 0 18px !important;
  background: #2563eb !important;
  border: none !important;
  border-radius: 8px !important;
  color: #ffffff !important;
  font-size: 0.86rem !important;
  font-weight: 600 !important;
  cursor: pointer !important;
  transition: background 0.15s ease !important;
}

.btn-parent-refresh svg {
  width: 15px !important;
  height: 15px !important;
  max-width: 15px !important;
  max-height: 15px !important;
  display: block !important;
  stroke: #ffffff !important;
}

.btn-parent-refresh:hover {
  background: #1d4ed8 !important;
}

.btn-parent-clear-filter {
  display: inline-flex !important;
  align-items: center !important;
  height: 38px !important;
  padding: 0 16px !important;
  background: #ffffff !important;
  border: 1px solid #cbd5e1 !important;
  border-radius: 8px !important;
  color: #334155 !important;
  font-size: 0.86rem !important;
  font-weight: 600 !important;
  cursor: pointer !important;
  transition: all 0.15s ease !important;
}

.btn-parent-clear-filter:hover {
  background: #f1f5f9 !important;
  border-color: #94a3b8 !important;
}

/* 3-Column Metric Cards Grid */
.parent-metrics-grid {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 18px !important;
  margin-bottom: 26px !important;
}

.parent-metric-card {
  background: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 12px !important;
  padding: 20px 24px !important;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.04) !important;
  display: flex !important;
  flex-direction: column !important;
}

.parent-metric-label {
  font-size: 0.72rem !important;
  font-weight: 700 !important;
  color: #64748b !important;
  letter-spacing: 0.05em !important;
  text-transform: uppercase !important;
  margin-bottom: 6px !important;
}

.parent-metric-value {
  font-family: inherit !important;
  font-size: 2rem !important;
  font-weight: 700 !important;
  color: #0f172a !important;
  line-height: 1.15 !important;
  margin-bottom: 4px !important;
}

.parent-metric-value.text-teal {
  color: #2563eb !important;
}

.parent-metric-hint {
  font-size: 0.8rem !important;
  font-weight: 500 !important;
  color: #64748b !important;
}

/* Captured Photos Section */
.parent-photos-section {
  background: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 12px !important;
  padding: 22px 24px !important;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.04) !important;
  margin-bottom: 26px !important;
}

.parent-photos-header {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  margin-bottom: 18px !important;
}

.parent-camera-icon {
  width: 20px !important;
  height: 20px !important;
  max-width: 20px !important;
  max-height: 20px !important;
  color: #0f172a !important;
  display: block !important;
}

.parent-photos-title {
  font-size: 1.05rem !important;
  font-weight: 700 !important;
  color: #0f172a !important;
}

.parent-photos-count-badge {
  background: #eff6ff !important;
  color: #2563eb !important;
  border-radius: 9999px !important;
  padding: 2px 10px !important;
  font-size: 0.76rem !important;
  font-weight: 700 !important;
}

.parent-photo-cards-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)) !important;
  gap: 16px !important;
}

.parent-punch-card {
  background: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 10px !important;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.04) !important;
  overflow: hidden !important;
  transition: transform 0.15s ease, box-shadow 0.15s ease !important;
}

.parent-punch-card:hover {
  box-shadow: 0 4px 12px rgba(15, 23, 42, 0.08) !important;
  transform: translateY(-2px) !important;
}

.parent-punch-photo-box {
  width: 100% !important;
  height: 160px !important;
  background: #0f172a !important;
  position: relative !important;
  overflow: hidden !important;
  cursor: pointer !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.parent-punch-photo-box img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
}

.parent-photo-zoom-hint {
  position: absolute !important;
  bottom: 8px !important;
  right: 8px !important;
  background: rgba(15, 23, 42, 0.75) !important;
  color: #ffffff !important;
  font-size: 0.74rem !important;
  font-weight: 600 !important;
  padding: 3px 8px !important;
  border-radius: 4px !important;
}

.parent-punch-info {
  padding: 14px 16px !important;
}

.parent-punch-badges-row {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  margin-bottom: 6px !important;
}

.parent-punch-pill {
  font-size: 0.75rem !important;
  font-weight: 700 !important;
  padding: 3px 8px !important;
  border-radius: 6px !important;
}

.parent-punch-pill.in {
  background: #eff6ff !important;
  color: #2563eb !important;
}

.parent-punch-pill.out {
  background: #fef2f2 !important;
  color: #dc2626 !important;
}

.parent-punch-verified {
  color: #16a34a !important;
  font-weight: 600 !important;
  font-size: 0.78rem !important;
}

.parent-punch-time {
  font-size: 1.15rem !important;
  font-weight: 700 !important;
  color: #0f172a !important;
  margin: 4px 0 2px 0 !important;
}

.parent-punch-date {
  font-size: 0.82rem !important;
  font-weight: 500 !important;
  color: #64748b !important;
}

/* Empty State Box */
.parent-empty-state {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 48px 24px !important;
  text-align: center !important;
}

.parent-empty-icon {
  width: 60px !important;
  height: 60px !important;
  margin-bottom: 14px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.parent-empty-icon svg {
  width: 48px !important;
  height: 48px !important;
  max-width: 48px !important;
  max-height: 48px !important;
}

.parent-empty-icon.camera-icon svg {
  color: #94a3b8 !important;
}

.parent-empty-icon.folder-icon svg {
  color: #f59e0b !important;
}

.parent-empty-title {
  font-size: 1.15rem !important;
  font-weight: 700 !important;
  color: #0f172a !important;
  margin: 0 0 6px 0 !important;
}

.parent-empty-desc {
  font-size: 0.88rem !important;
  color: #64748b !important;
  margin: 0 !important;
}

/* History Date Groups */
.parent-history-date-group {
  background: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 12px !important;
  padding: 22px 24px !important;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.04) !important;
  margin-bottom: 22px !important;
}

.parent-history-date-header {
  display: flex !important;
  align-items: baseline !important;
  justify-content: space-between !important;
  margin-bottom: 16px !important;
  padding-bottom: 12px !important;
  border-bottom: 1px solid #f1f5f9 !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
}

.parent-history-group-title {
  font-size: 1.15rem !important;
  font-weight: 700 !important;
  color: #0f172a !important;
  margin: 0 !important;
}

.parent-history-group-sub {
  font-size: 0.84rem !important;
  color: #64748b !important;
  font-weight: 500 !important;
}

.parent-history-filter-fields {
  display: flex !important;
  align-items: center !important;
  gap: 16px !important;
  flex-wrap: wrap !important;
}

.parent-history-field {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
}

@media (max-width: 860px) {
  .parent-metrics-grid {
    grid-template-columns: 1fr !important;
  }
  .parent-portal-wrapper {
    padding: 16px 14px 40px !important;
  }
}