/* ==================================================================
   School SaaS — Unified Design System v2
   Clean, modern School ERP styling shared across all modules
   ================================================================== */
@import url("https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&family=Plus+Jakarta+Sans:ital,wght@0,200..800;1,200..800&display=swap");

/* --- Global Custom Thin & Modern Scrollbar System --- */
* {
  scrollbar-width: thin;
  scrollbar-color: #cbd5e1 transparent;
}

::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

::-webkit-scrollbar-track {
  background: transparent;
  border-radius: 9999px;
}

::-webkit-scrollbar-thumb {
  background: #cbd5e1;
  border-radius: 9999px;
  border: 1px solid transparent;
  background-clip: content-box;
  transition: background-color 0.2s ease;
}

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

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

/* ==================================================================
   Design Tokens — Single Source of Truth
   CodingSaaS-inspired: clean lavender-white, Inter font, modern SaaS
   ================================================================== */
:root {
  /* ── CRM Redesign Variables (Light Mode) ── */
  --bg-canvas: #f0f4f9; /* soft sage tint replaces flat gray */
  --bg-surface: #ffffff;
  --bg-surface-raised: #ffffff;
  --bg-subtle: #f1f1f3;
  --border-subtle: #e7e7ea;
  --border-default: #dcdce0;

  --text-primary: #17171a;
  --text-secondary: #5c5c66;
  --text-tertiary: #94949c;

  --accent: #2563eb; /* keep your brand red, but as ONE accent */
  --accent-soft: #eff6ff;
  --accent-hover: #1d4ed8;

  --success: #16a34a;
  --success-soft: #e7f9ee;
  --warning: #d97706;
  --warning-soft: #fef3e0;
  --danger: #dc2626;
  --danger-soft: #fde8e8;
  --info: #2563eb;
  --info-soft: #e8f0fe;

  /* ── v2 Colorful CRM Redesign Tokens ── */
  --fill-green: #3fae6a;
  --fill-green-soft: #e3f5ea;
  --fill-orange: #f2914a;
  --fill-orange-soft: #fdead9;
  --fill-blue: #4f7cf0;
  --fill-blue-soft: #e6ecfe;
  --fill-coral: #3b82f6; /* brand red alias */
  --fill-coral-soft: #dbeafe;
  --fill-yellow: #f0c419;
  --fill-yellow-soft: #fdf3d9;

  --pill-radius: 999px;
  --card-radius-lg: 16px;
  --card-radius-md: 12px;

  --shadow-sm: 0 1px 2px rgba(16, 16, 20, 0.04);
  --shadow-md: 0 4px 12px rgba(16, 16, 20, 0.06);
  --shadow-lg: 0 12px 32px rgba(16, 16, 20, 0.1);

  --radius-xs: 4px;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --radius-pill: 999px;
  --radius-circle: 50%;

  --space-3xs: 2px;
  --space-2xs: 4px;
  --space-xs: 8px;
  --space-sm: 12px;
  --space-md: 16px;
  --space-lg: 24px;
  --space-xl: 32px;
  --space-2xl: 48px;

  /* ── Legacy Mappings to the new design system ── */
  --bg-base: var(--bg-canvas);
  --bg-card: var(--bg-surface);
  --bg-sec: var(--bg-subtle);
  --bg-sidebar: var(--bg-canvas);
  --bg-card-hover: var(--bg-subtle);
  --border: var(--border-default);
  --text-muted: var(--text-secondary);

  --radius-card: var(--radius-lg);
  --radius-btn: var(--radius-md);
  --radius-sm-val: var(--radius-sm);
  --border-radius-sm: var(--radius-sm);
  --border-radius: var(--radius-md);
  --border-radius-lg: var(--radius-lg);

  /* ── Glass / Surface Variables ── */
  --glass-bg: rgba(255, 255, 255, 0.7);
  --glass-bg-dark: rgba(20, 20, 22, 0.65);
  --glass-border: var(--border-subtle);
  --glass-blur: blur(20px);
  --glass-shadow: var(--shadow-sm);

  --glass-surface: rgba(255, 255, 255, 0.7);
  --glass-surface-strong: rgba(255, 255, 255, 0.9);

  /* ── Backdrop mesh ── */
  --backdrop-mesh:
    radial-gradient(
      ellipse 900px 600px at 90% -10%,
      rgba(37, 99, 235, 0.05) 0%,
      transparent 60%
    ),
    radial-gradient(
      ellipse 700px 600px at 50% 0%,
      rgba(245, 158, 11, 0.02) 0%,
      transparent 55%
    ),
    radial-gradient(
      ellipse 800px 700px at -10% 100%,
      rgba(16, 185, 129, 0.03) 0%,
      transparent 60%
    );

  --color-black: #09090b;
  --color-white: #ffffff;

  --theme-primary: var(--text-primary);
  --theme-primary-hover: #27272a;
  --theme-primary-dark: #09090b;
  --theme-primary-light: var(--bg-subtle);
  --theme-primary-rgb: 24, 24, 27;

  --theme-secondary: var(--accent);
  --theme-secondary-light: var(--accent-soft);
  --theme-brand-gradient: linear-gradient(
    90deg,
    var(--accent) 0%,
    var(--accent-hover) 100%
  );

  --theme-table-thead-bg: #f8fafc;
  --theme-table-thead-color: #475569;
  --theme-glow: 0 0 16px rgba(37, 99, 235, 0.12);
  --theme-indigo-bg: var(--accent-soft);
  --theme-indigo-text: var(--accent-hover);

  --table-head-grad: none;
  --table-head-border: #e2e8f0;

  --accent-dark: var(--accent-hover);
  --accent-light: var(--accent-soft);

  --accent-teal: #10b981;
  --accent-teal-light: rgba(16, 185, 129, 0.08);
  --accent-pink: #f59e0b;
  --accent-pink-light: rgba(245, 158, 11, 0.08);

  --color-lime: #84cc16;
  --color-lime-dark: #65a30d;

  --shadow-card: var(--shadow-sm);
  --shadow-sidebar: 1px 0 0 var(--border-default);

  --sidebar-width: 72px;
  --topbar-height: 56px;
  --header-height: 56px;

  --font-primary:
    "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-heading:
    "Plus Jakarta Sans", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI",
    sans-serif;
  --font-secondary: "Inter", sans-serif;

  --text-xxs: 10px;
  --text-xs: 11px;
  --text-sm: 12px;
  --text-base: 13px;
  --text-md: 14px;
  --text-lg: 16px;
  --text-xl: 18px;
  --text-2xl: 22px;
  --text-3xl: 26px;

  --brand-gradient: var(--theme-brand-gradient);

  --color-primary: var(--theme-primary);
  --color-primary-light: var(--theme-primary-light);
  --color-secondary: var(--theme-secondary);
  --color-secondary-light: rgba(16, 185, 129, 0.08);
  --color-success: var(--success);
  --color-success-light: var(--success-soft);
  --color-danger: var(--danger);
  --color-danger-light: var(--danger-soft);
  --color-warning: var(--warning);
  --color-warning-light: var(--warning-soft);
  --color-info: var(--info);
  --color-info-light: var(--info-soft);

  --danger-light: var(--danger-soft);
  --success-light: var(--success-soft);
  --warning-light: var(--warning-soft);
  --info-light: var(--info-soft);

  --color-accent-light: var(--accent-soft);
  --color-accent-hover: var(--accent-hover);

  --gray-50: #fafafa;
  --gray-100: #f4f4f5;
  --gray-200: #e4e4e7;
  --gray-300: #d4d4d8;
  --gray-400: #a1a1aa;
  --gray-500: #71717a;
  --gray-600: #52525b;
  --gray-700: #3f3f46;
  --gray-800: #27272a;
  --gray-900: #18181b;

  --table-thead-bg: #f8fafc;
  --table-thead-color: #475569;
  --table-border-color: var(--border-default);
  --table-cell-bg: var(--bg-surface);
  --table-cell-color: var(--text-primary);
  --table-font-size-th: 11px;
  --table-font-size-td: 13px;
  --table-padding-th: 11px 12px;
  --table-padding-td: 10px 12px;
}

html.dark-mode,
body.dark-theme,
[data-theme="dark"] {
  /* ── CRM Redesign Variables (Dark Mode) ── */
  --bg-canvas: #14181a;
  --bg-surface: #17171a;
  --bg-surface-raised: #1e1e22;
  --bg-subtle: #232327;
  --border-subtle: #2a2a2f;
  --border-default: #35353b;

  --text-primary: #f2f2f4;
  --text-secondary: #a8a8b3;
  --text-tertiary: #6b6b76;

  --accent: #3b82f6; /* lift saturation/lightness slightly for dark bg */
  --accent-soft: #172554;
  --accent-hover: #60a5fa;

  --success: #22c55e;
  --success-soft: #10281a;
  --warning: #f59e0b;
  --warning-soft: #2b2107;
  --danger: #ef4444;
  --danger-soft: #2b1414;
  --info: #3b82f6;
  --info-soft: #101d33;

  /* ── v2 Colorful CRM Redesign Tokens (Dark) ── */
  --fill-green: #4bc37e;
  --fill-orange: #ff9c5c;
  --fill-blue: #6b90ff;
  --fill-coral: #60a5fa;
  --fill-yellow: #f5d247;

  --fill-green-soft: rgba(75, 195, 126, 0.12);
  --fill-orange-soft: rgba(255, 156, 92, 0.12);
  --fill-blue-soft: rgba(107, 144, 255, 0.12);
  --fill-coral-soft: rgba(96, 165, 250, 0.15);
  --fill-yellow-soft: rgba(245, 210, 71, 0.12);

  --pill-radius: 999px;
  --card-radius-lg: 22px;
  --card-radius-md: 16px;

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
  --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.4);
  --shadow-lg: 0 16px 40px rgba(0, 0, 0, 0.55);

  /* ── Legacy Mappings to the new design system ── */
  --bg-base: var(--bg-canvas);
  --bg-card: var(--bg-surface);
  --bg-sec: var(--bg-subtle);
  --bg-sidebar: var(--bg-canvas);
  --bg-card-hover: var(--bg-subtle);
  --border: var(--border-default);
  --text-muted: var(--text-secondary);

  /* ── Glass / Surface Variables ── */
  --glass-bg: rgba(20, 20, 22, 0.65);
  --glass-border: var(--border-subtle);
  --glass-shadow: var(--shadow-md);
  --glass-surface: rgba(20, 20, 22, 0.65);
  --glass-surface-strong: rgba(20, 20, 22, 0.85);

  --backdrop-mesh:
    radial-gradient(
      ellipse 900px 600px at 90% -10%,
      rgba(59, 130, 246, 0.08) 0%,
      transparent 60%
    ),
    radial-gradient(
      ellipse 700px 600px at 50% 0%,
      rgba(245, 158, 11, 0.02) 0%,
      transparent 55%
    ),
    radial-gradient(
      ellipse 800px 700px at -10% 100%,
      rgba(34, 197, 94, 0.03) 0%,
      transparent 60%
    );
}

/* Scoped theme transition crossfade */
html.theme-transitioning,
html.theme-transitioning *,
html.theme-transitioning *::before,
html.theme-transitioning *::after {
  transition:
    background-color 0.2s ease,
    color 0.2s ease,
    border-color 0.2s ease,
    box-shadow 0.2s ease !important;
}

/* Dark Mode specific overrides */
body.dark-theme .topbar-menu-pill .menu-item.active {
  background-color: var(--accent);
  color: #fff;
}

body.dark-theme .btn-balance-action-primary {
  background-color: var(--accent);
  color: #fff;
}

body.dark-theme .theme-btn.active {
  background-color: var(--bg-card);
  color: var(--accent);
}

body.dark-theme .sidebar-nav-item.active {
  background-color: rgba(56, 189, 248, 0.16) !important;
  color: var(--accent) !important;
  border: 1px solid rgba(56, 189, 248, 0.3) !important;
  box-shadow: 0 4px 14px rgba(56, 189, 248, 0.2) !important;
}


body.dark-theme .cc-card-black {
  border: 1px solid var(--color-border);
}

body.dark-theme .form-control-admin {
  background-color: var(--color-primary-light);
  border-color: var(--color-border);
}

body.dark-theme .form-control-admin:focus {
  background-color: var(--color-surface);
}

body.dark-theme .modal-section-card {
  background: rgba(17, 24, 39, 0.35);
  border-color: var(--color-border);
}

body.dark-theme .modal-content {
  background-color: var(--color-surface) !important;
  border-color: var(--color-border) !important;
}

/* Sidebar expanded width */
.app-layout.sidebar-expanded,
.app-layout.mobile-sidebar-active {
  --sidebar-width: 260px;
}

.sidebar-nav-dropdown {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  flex-shrink: 0 !important;
}

.app-layout.sidebar-expanded .app-sidebar .sidebar-nav-dropdown,
.app-layout.mobile-sidebar-active .app-sidebar .sidebar-nav-dropdown {
  align-items: stretch;
}

/* ==================================================================
   Base Resets
   ================================================================== */
*,
*::before,
*::after {
  box-sizing: border-box;
}

body {
  margin: 0;
  padding: 0;
  background-color: var(--color-bg);
  color: var(--color-text-primary);
  font-family: var(--font-primary);
  font-size: var(--text-base);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  background: var(--bg-base) !important;
  background-image: var(--backdrop-mesh) !important;
  background-attachment: fixed !important;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: var(--font-heading);
  color: var(--color-text-primary);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.25;
}

h1 {
  font-size: var(--text-3xl);
}

h2 {
  font-size: var(--text-2xl);
}

h3 {
  font-size: var(--text-xl);
}

h4 {
  font-size: var(--text-lg);
}

h5 {
  font-size: var(--text-md);
  font-weight: 600;
}

h6 {
  font-size: var(--text-base);
  font-weight: 600;
  letter-spacing: -0.01em;
}

.font-heading {
  font-family: var(--font-heading) !important;
}

.font-secondary {
  font-family: var(--font-secondary) !important;
}

a {
  color: var(--color-accent);
  text-decoration: none;
  transition: var(--transition);
}

a:hover {
  color: var(--color-accent-hover);
}

/* Typography helpers */
.text-xxs {
  font-size: var(--text-xxs);
}

.text-xs {
  font-size: var(--text-xs);
}

.text-sm {
  font-size: var(--text-sm);
}

.text-md {
  font-size: var(--text-md);
}

.text-lg {
  font-size: var(--text-lg);
}

.text-xl {
  font-size: var(--text-xl);
}

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

.text-3xl {
  font-size: var(--text-3xl);
}

.fw-semibold {
  font-weight: 500;
}

.fw-bold {
  font-weight: 600;
}

.fw-extrabold {
  font-weight: 700;
}

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

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

::-webkit-scrollbar-thumb {
  background: var(--color-accent-light);
  border-radius: 6px;
  border: 1px solid var(--color-border);
}

::-webkit-scrollbar-thumb:hover {
  background: var(--color-accent);
}

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

/* ==================================================================
   App Shell
   ================================================================== */
.app-layout {
  display: flex;
  min-height: 100vh;
  width: 100%;
  max-width: 100%;
  position: relative;
  overflow-x: hidden;
  flex-direction: column;
}

/* ==================================================================
   Topbar
   ================================================================== */
.app-topbar {
  height: var(--header-height);
  background-color: #ffffff;
  border-bottom: 1px solid var(--color-border);
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  max-width: 100%;
  z-index: 105;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 1.5rem;
  transition: var(--transition);
  box-shadow: 0 1px 0 var(--color-border);
}

body.dark-theme .app-topbar {
  background-color: var(--bg-card);
  box-shadow: 0 1px 0 var(--color-border);
}

#sidebarToggleBtn {
  background: none;
  border: none;
  width: 38px;
  height: 38px;
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-text-secondary);
  cursor: pointer;
  transition: var(--transition);
}

#sidebarToggleBtn:hover {
  background-color: var(--accent-light);
  color: var(--accent);
}

.topbar-brand {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  margin-right: 1.5rem;
}

.brand-logo-wrapper {
  width: 34px;
  height: 34px;
  border-radius: var(--radius-sm);
  background: var(--brand-gradient);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  box-shadow: var(--shadow-glow);
}

.brand-text {
  font-size: 1.1rem;
  font-weight: 800;
  color: var(--theme-primary);
  font-family: var(--font-heading) !important;
  letter-spacing: -0.03em;
}

.topbar-menu-container {
  flex: 1;
  display: flex;
  justify-content: center;
}

.topbar-menu-pill {
  display: flex;
  align-items: center;
  background-color: var(--color-primary-light);
  padding: 4px;
  border-radius: 30px;
  gap: 2px;
}

.topbar-menu-pill .menu-item {
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--color-text-secondary);
  padding: 6px 18px;
  border-radius: 20px;
  transition: var(--transition);
  text-decoration: none;
  font-family: var(--font-heading);
}

.topbar-menu-pill .menu-item:hover {
  color: var(--color-primary);
}

.topbar-menu-pill .menu-item.active {
  background-color: var(--color-primary);
  color: #fff;
}

/* Session selector */
.btn-session-selector {
  background-color: var(--color-primary-light);
  color: var(--color-text-primary) !important;
  border: 1px solid var(--color-border) !important;
  padding: 6px 14px;
  font-size: var(--text-xs);
  border-radius: 30px;
  font-weight: 500;
  transition: var(--transition);
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--font-heading);
}

.btn-session-selector:hover,
.btn-session-selector:focus {
  background-color: var(--color-secondary-light) !important;
  color: var(--color-primary) !important;
  border-color: var(--color-text-muted) !important;
  box-shadow: none !important;
}

.btn-session-selector i {
  color: var(--color-accent) !important;
}

/* Topbar action buttons */
.topbar-actions {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}

.btn-topbar-action {
  background: none;
  border: 1px solid var(--color-border);
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-text-secondary);
  cursor: pointer;
  transition: var(--transition);
}

.btn-topbar-action:hover {
  background-color: var(--color-primary-light);
  color: var(--color-primary);
  border-color: var(--color-text-muted);
}

.btn-topbar-action.position-relative .badge-dot {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 6px;
  height: 6px;
  background-color: var(--color-accent);
  border-radius: 50%;
}

/* Theme toggle */
.topbar-theme-toggle {
  display: flex;
  align-items: center;
  background-color: var(--color-primary-light);
  border-radius: 20px;
  padding: 4px;
  width: 68px;
  gap: 4px;
}

.theme-btn {
  background: none;
  border: none;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-text-secondary);
  cursor: pointer;
  transition: var(--transition);
  font-size: 0.9rem;
}

.theme-btn.active {
  background-color: var(--color-surface);
  color: var(--color-primary);
  box-shadow: var(--shadow-sm);
}

/* Profile widget */
.btn-profile-dropdown {
  background: none;
  border: none;
  padding: 0;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  cursor: pointer;
  transition: var(--transition);
}

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

.profile-avatar {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid var(--color-border);
}

.profile-info {
  text-align: left;
}

.profile-name {
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--color-text-primary);
  font-family: var(--font-heading);
}

.profile-email {
  font-size: var(--text-xxs);
  color: var(--color-text-muted);
  margin-top: 1px;
  font-family: var(--font-primary);
}

.chevron-icon {
  font-size: 0.7rem;
  color: var(--color-text-secondary);
  margin-left: 0.25rem;
}

/* ==================================================================
   Sidebar
   ================================================================== */
.app-sidebar {
  width: var(--sidebar-width);
  background-color: #ffffff;
  border-right: 1px solid var(--color-border);
  display: flex;
  flex-direction: column;
  height: calc(100vh - var(--header-height));
  position: fixed;
  top: var(--header-height);
  left: 0;
  z-index: 100;
  transition: var(--transition);
  padding: 0.75rem 0;
  box-shadow: var(--shadow-sidebar);
}

body.dark-theme .app-sidebar {
  background-color: var(--bg-sidebar);
}

.sidebar-brand-header {
  display: none !important;
}

#sidebarCloseBtn {
  background: none;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  color: var(--color-text-secondary);
  transition: var(--transition);
}

#sidebarCloseBtn:hover {
  background-color: var(--color-primary-light);
  color: var(--color-primary);
}

.sidebar-body {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.35rem;
  overflow-y: auto;
  overflow-x: hidden;
  width: 100%;
  transition: var(--transition);
}

.sidebar-body::-webkit-scrollbar {
  width: 4px;
}

.sidebar-body::-webkit-scrollbar-thumb {
  background: var(--gray-200);
  border-radius: 2px;
}

.sidebar-nav-item {
  width: 42px;
  height: 42px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-sidebar-text);
  transition: var(--transition);
  text-decoration: none;
  position: relative;
  flex-shrink: 0 !important;
  cursor: pointer;
}

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

.sidebar-nav-item.active {
  background-color: var(--accent) !important;
  color: #fff !important;
  box-shadow: 0 4px 14px rgba(14, 165, 233, 0.35);
}

.sidebar-nav-item.active i {
  color: #fff !important;
}

.sidebar-nav-item:hover i {
  color: var(--accent) !important;
}

.sidebar-nav-item i {
  font-size: 1.15rem;
  color: var(--color-sidebar-text);
  transition: var(--transition);
}

.sidebar-nav-item:focus,
.sidebar-nav-item:active {
  outline: none !important;
  box-shadow: none !important;
}

.app-sidebar .nav-label {
  display: none;
  white-space: nowrap;
  opacity: 0;
  transition: opacity 0.2s ease;
  font-family: var(--font-heading);
}

/* Expanded sidebar */
.app-layout.sidebar-expanded .app-sidebar .nav-label,
.app-layout.mobile-sidebar-active .app-sidebar .nav-label {
  display: inline-block;
  opacity: 1;
  font-size: var(--text-sm);
  font-weight: 500;
  font-family: var(--font-heading);
}

.app-layout.sidebar-expanded .app-sidebar .sidebar-body,
.app-layout.sidebar-expanded .app-sidebar .sidebar-footer,
.app-layout.mobile-sidebar-active .app-sidebar .sidebar-body,
.app-layout.mobile-sidebar-active .app-sidebar .sidebar-footer {
  gap: 0.35rem;
  align-items: stretch;
}

.app-layout.sidebar-expanded .app-sidebar .sidebar-nav-item,
.app-layout.mobile-sidebar-active .app-sidebar .sidebar-nav-item {
  display: flex !important;
  align-items: center !important;
  width: calc(100% - 20px) !important;
  height: 38px !important;
  border-radius: 8px !important;
  justify-content: flex-start !important;
  padding-left: 14px !important;
  gap: 0.75rem !important;
  margin: 0 10px !important;
  box-sizing: border-box !important;
  flex-shrink: 0 !important;
  cursor: pointer;
  font-family: var(--font-heading) !important;
  font-size: var(--text-sm) !important;
  font-weight: 500 !important;
}

.sidebar-nav-dropdown {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  flex-shrink: 0 !important;
}

.sidebar-submenu {
  padding-left: 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  margin: 0.5rem 0;
  transition: var(--transition);
}

.sidebar-submenu .submenu-item {
  font-size: var(--text-sm);
  color: var(--color-sidebar-text);
  padding: 5px 12px;
  border-radius: 6px;
  text-decoration: none;
  transition: var(--transition);
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.sidebar-submenu .submenu-item i {
  font-size: 0.95rem;
  color: var(--color-sidebar-text);
  transition: var(--transition);
}

.sidebar-submenu .submenu-item:hover {
  color: var(--color-accent);
  background-color: var(--color-primary-light);
  padding-left: 16px;
}

.sidebar-submenu .submenu-item:hover i {
  color: var(--color-accent) !important;
}

.sidebar-submenu .submenu-item.active {
  color: #ffffff !important;
  background: var(--accent) !important;
  font-weight: 600;
  border-radius: 8px;
  padding-left: 14px;
  box-shadow: 0 2px 10px rgba(14, 165, 233, 0.32);
  position: relative;
}

.sidebar-submenu .submenu-item.active::before {
  content: "";
  position: absolute;
  left: 0;
  top: 20%;
  height: 60%;
  width: 3px;
  border-radius: 0 3px 3px 0;
  background: #ffffff;
  opacity: 0.7;
}

.sidebar-submenu .submenu-item.active i {
  color: #ffffff !important;
}

body.dark-theme .sidebar-submenu .submenu-item.active {
  background: var(--color-accent) !important;
  box-shadow: 0 2px 10px rgba(99, 102, 241, 0.4);
}

.sidebar-nav-item .dropdown-arrow {
  font-size: 0.8rem !important;
  transition: transform 0.2s ease !important;
  color: var(--color-sidebar-text) !important;
  margin-left: auto !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.sidebar-nav-item[aria-expanded="true"] .dropdown-arrow {
  transform: rotate(180deg);
}

.app-layout:not(.sidebar-expanded):not(.mobile-sidebar-active)
  .app-sidebar
  .collapse {
  display: none !important;
}

/* Sidebar brand for mobile */
.sidebar-brand-logo {
  width: 28px;
  height: 28px;
  background: var(--brand-gradient);
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
}

.sidebar-brand-text {
  font-size: 1rem;
  font-weight: 700;
  font-family: var(--font-heading);
  color: var(--color-text-primary);
}

/* Pro badge */
.badge-pro {
  background-color: var(--color-accent);
  color: #fff !important;
  font-size: 9px;
  font-weight: 500;
  padding: 2px 5px;
  border-radius: 4px;
  margin-left: 6px;
  text-transform: uppercase;
  display: inline-flex;
  align-items: center;
  line-height: 1;
  vertical-align: middle;
}

/* ==================================================================
   Main Wrapper & Content Area
   ================================================================== */
.main-wrapper {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  min-height: calc(100vh - var(--header-height));
  min-width: 0;
  padding-left: var(--sidebar-width);
  padding-top: var(--header-height);
  transition: var(--transition);
}

.content-area {
  flex: 1;
  padding: 2rem 2.25rem;
  background: var(--color-bg);
  min-height: auto;
}

/* Overlay */
.sidebar-overlay {
  position: fixed;
  inset: 0;
  background-color: rgba(0, 0, 0, 0.35);
  backdrop-filter: blur(4px);
  z-index: 95;
  opacity: 0;
  pointer-events: none;
  transition: var(--transition);
}

/* ==================================================================
   Canonical Card Premium — Modern SaaS Card System
   ================================================================== */
.card-premium,
.form-sidebar .card-premium,
.modal .card-premium {
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  box-shadow: 0 1px 3px rgba(16, 16, 20, 0.04), 0 10px 15px -3px rgba(16, 16, 20, 0.03);
  padding: var(--space-lg);
  transition: box-shadow 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
  position: relative;
  overflow: hidden;
}

.card-premium:hover {
  border-color: var(--border-default);
  box-shadow: 0 4px 20px -2px rgba(16, 16, 20, 0.07);
}

.card-premium .card-header {
  background: transparent;
  border-bottom: 1px solid var(--border-subtle);
  padding: var(--space-md) var(--space-lg);
  margin: calc(var(--space-lg) * -1) calc(var(--space-lg) * -1) var(--space-lg) calc(var(--space-lg) * -1);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.card-premium .card-header h6,
.card-premium .card-header h5 {
  font-family: var(--font-heading);
  font-size: var(--text-base);
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 0;
  letter-spacing: -0.01em;
}

.card-premium .card-body {
  padding: 0;
}

.card-premium h2 {
  font-size: var(--text-2xl);
  font-weight: 600;
  color: var(--text-primary);
  letter-spacing: -0.02em;
  margin-top: 4px;
  margin-bottom: 2px;
}

body.dark-theme .card-premium,
body.dark-theme .form-sidebar .card-premium,
body.dark-theme .modal .card-premium {
  background: #1e293b;
  border-color: rgba(255, 255, 255, 0.08);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25);
}

body.dark-theme .card-premium:hover {
  border-color: rgba(255, 255, 255, 0.15);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
}

/* ==================================================================
   Dashboard Components (Balance, Metrics, Charts)
   ================================================================== */
.balance-label {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  font-weight: 500;
  font-family: var(--font-heading);
}

.balance-value {
  font-size: 2rem;
  font-weight: 700;
  color: var(--color-primary);
  letter-spacing: -0.03em;
  margin-bottom: 0.5rem;
  font-family: var(--font-primary);
}

.trend-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 8px;
  border-radius: 6px;
  font-size: var(--text-xxs);
  font-weight: 600;
  margin-bottom: 1.25rem;
}

.trend-up {
  background-color: var(--color-success-light);
  color: var(--color-success);
}

.trend-down {
  background-color: var(--color-danger-light);
  color: var(--color-danger);
}

.currency-selector {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  background-color: var(--color-primary-light);
  padding: 4px 10px;
  border-radius: 8px;
  font-size: var(--text-xxs);
  font-weight: 600;
  color: var(--color-text-primary);
  cursor: pointer;
  border: 1px solid transparent;
  transition: var(--transition);
}

.currency-selector:hover {
  background-color: var(--color-secondary-light);
}

.balance-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.75rem;
  margin-bottom: 1.5rem;
}

.btn-balance-action {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 10px 16px;
  border-radius: 30px;
  font-size: var(--text-xs);
  font-weight: 600;
  cursor: pointer;
  transition: var(--transition);
  border: 1px solid transparent;
}

.btn-balance-action-primary {
  background-color: var(--color-primary);
  color: #fff;
}

.btn-balance-action-primary:hover {
  background-color: #374151;
}

.btn-balance-action-secondary {
  background-color: var(--color-primary-light);
  color: var(--color-text-primary);
}

.btn-balance-action-secondary:hover {
  background-color: var(--color-secondary-light);
}

.wallets-title {
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--color-text-secondary);
  margin-bottom: 0.75rem;
  border-bottom: 1px solid var(--color-border);
  padding-bottom: 0.5rem;
  font-family: var(--font-heading);
}

.wallet-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid var(--color-border);
  background-color: var(--color-surface);
  transition: var(--transition);
}

.wallet-item:hover {
  border-color: var(--color-text-muted);
  transform: translateY(-1px);
}

.wallet-left {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.wallet-flag-wrapper {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background-color: var(--color-primary-light);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  flex-shrink: 0;
}

.wallet-name {
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--color-text-primary);
  font-family: var(--font-heading);
}

.wallet-limit {
  font-size: var(--text-xxs);
  color: var(--color-text-muted);
}

.wallet-val {
  font-size: var(--text-xs);
  font-weight: 700;
  color: var(--color-primary);
  display: block;
  font-family: var(--font-primary);
}

.wallet-status {
  display: inline-block;
  font-size: var(--text-xxs);
  font-weight: 600;
}

.wallet-status.active {
  color: var(--color-success);
}

.wallet-status.inactive {
  color: var(--color-text-muted);
}

.metrics-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  gap: 0.75rem;
  height: 100%;
}

.metric-card {
  background: var(--glass-surface);
  backdrop-filter: var(--glass-blur) saturate(150%);
  -webkit-backdrop-filter: var(--glass-blur) saturate(150%);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--glass-shadow);
  padding: 1.25rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  transition: var(--transition);
  position: relative;
  overflow: hidden;
}

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

.metric-card-accent {
  background: var(--brand-gradient);
  background-image:
    linear-gradient(135deg, rgba(255, 255, 255, 0.22) 0%, transparent 40%),
    var(--brand-gradient);
  color: #fff;
  border-color: transparent;
  box-shadow: 0 8px 24px rgba(14, 165, 233, 0.18);
}

.metric-card-accent .metric-label,
.metric-card-accent .metric-trend {
  color: rgba(255, 255, 255, 0.85);
}

.metric-card-accent .metric-value {
  color: #fff;
}

.metric-card-accent .metric-icon-bg {
  background-color: rgba(255, 255, 255, 0.15);
  color: #fff;
}

.metric-label {
  font-size: var(--text-xs);
  font-weight: 500;
  color: var(--color-text-secondary);
  font-family: var(--font-heading);
}

.metric-icon-bg {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background-color: var(--color-primary-light);
  color: var(--color-text-secondary);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.95rem;
}

.metric-value {
  font-size: 1.85rem;
  font-weight: 700;
  color: var(--color-primary);
  margin-bottom: 0.5rem;
  line-height: 1;
  font-family: var(--font-primary);
}

.metric-trend {
  font-size: var(--text-xxs);
  font-weight: 600;
  color: var(--color-text-muted);
}

.metric-trend.up {
  color: var(--color-success);
}

.metric-trend.down {
  color: var(--color-danger);
}

.chart-legend {
  display: flex;
  gap: 1rem;
  font-size: var(--text-xxs);
  font-weight: 600;
  color: var(--color-text-secondary);
}

.legend-item {
  display: flex;
  align-items: center;
  gap: 0.35rem;
}

.legend-color {
  width: 8px;
  height: 8px;
  border-radius: 50%;
}

.chart-container {
  position: relative;
  width: 100%;
  height: 250px;
  margin-top: 1rem;
}

.legend-collected {
  background-color: var(--color-primary) !important;
}

.legend-outstanding {
  background-color: var(--color-accent) !important;
}

.limit-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--color-text-secondary);
  margin-bottom: 0.75rem;
}

.limit-spent {
  color: var(--color-accent);
}

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

.limit-progress-bar {
  height: 7px;
  border-radius: 4px;
  background-color: var(--color-primary-light);
  overflow: hidden;
}

.limit-progress-fill {
  height: 100%;
  background-color: var(--color-accent);
  border-radius: 4px;
  transition: width 0.8s ease-out;
}

/* Cards deck */
.btn-add-card {
  background: none;
  border: none;
  font-size: var(--text-xxs);
  font-weight: 600;
  color: var(--color-accent);
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 4px;
  transition: var(--transition);
}

.btn-add-card:hover {
  background-color: var(--color-accent-light);
}

.cards-deck {
  position: relative;
  height: 170px;
  margin-top: 0.75rem;
}

.cc-card {
  width: 220px;
  height: max-content;
  border-radius: 14px;
  padding: 1rem;
  color: #fff;
  position: absolute;
  box-shadow: var(--shadow-lg);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  transition: var(--transition);
  cursor: pointer;
}

.cc-card-black {
  background: linear-gradient(135deg, #1a1d24 0%, #2d333f 100%);
  top: 0;
  left: 0;
  z-index: 3;
}

.cc-card-blue {
  background: linear-gradient(
    135deg,
    var(--theme-primary-hover) 0%,
    var(--theme-primary) 100%
  );
  top: 15px;
  left: 110px;
  z-index: 2;
  transform: scale(0.95);
  opacity: 0.9;
}

.cc-card:hover {
  transform: translateY(-5px) scale(1.02);
  z-index: 4;
  opacity: 1;
}

.cc-chip {
  width: 20px;
  height: 15px;
  border-radius: 2px;
  background: linear-gradient(135deg, #e5e7eb 0%, #9ca3af 100%);
  border: 1px solid rgba(0, 0, 0, 0.15);
}

.cc-status-badge {
  background-color: rgba(255, 255, 255, 0.25);
  border-radius: 10px;
  font-size: var(--text-xxs);
  font-weight: 600;
  padding: 2px 8px;
  text-transform: capitalize;
}

.cc-number {
  font-size: 0.9rem;
  font-family: var(--font-secondary);
  letter-spacing: 2px;
  margin: 1.25rem 0 0.5rem 0;
}

.cc-meta-label {
  display: block;
  font-size: 0.55rem;
  color: rgba(255, 255, 255, 0.6);
  text-transform: uppercase;
}

.cc-meta-val {
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.5px;
}

.circle-red {
  width: 16px;
  height: 16px;
  background-color: #ef4444;
  border-radius: 50%;
}

.circle-yellow {
  width: 16px;
  height: 16px;
  background-color: #f59e0b;
  border-radius: 50%;
  margin-left: -8px;
  opacity: 0.95;
}

.circle-logo {
  display: flex;
}

/* Activity table */

.table-search-box input {
  width: 100%;
  background-color: var(--color-primary-light);
  color: var(--color-text-primary);
  border: 1px solid transparent;
  padding: 7px 12px 7px 30px;
  border-radius: 30px;
  font-size: var(--text-xs);
  outline: none;
  transition: var(--transition);
  font-family: var(--font-primary);
}


.table-search-box i {
  position: absolute;
  left: 10px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 0.75rem;
  color: var(--color-text-muted);
}




.table-premium th:first-child {
  border-radius: 8px 0 0 0 !important;
}



.table-premium tbody tr:nth-child(even) td {
  background-color: var(--gray-50);
}





body.dark-theme .table-premium td {
  background-color: var(--table-cell-bg);
  color: var(--table-cell-color);
}


/* Activity cells */
.activity-cell {
  display: flex;
  align-items: center;
  gap: 0.65rem;
}

.activity-icon-wrapper {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.85rem;
  flex-shrink: 0;
}

.activity-icon-blue {
  background-color: var(--color-info-light);
  color: var(--color-info);
}

.activity-icon-indigo {
  background-color: var(--color-accent-light);
  color: var(--accent);
}

.activity-icon-amber {
  background-color: var(--color-warning-light);
  color: var(--color-warning);
}

.activity-icon-red {
  background-color: var(--color-danger-light);
  color: var(--color-danger);
}

.status-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 600;
}

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

.status-completed {
  color: #10b981;
}

.status-completed .status-dot {
  background-color: #10b981;
}

.status-pending {
  color: #ef4444;
}

.status-pending .status-dot {
  background-color: #ef4444;
}

.status-inprogress {
  color: #f59e0b;
}

.status-inprogress .status-dot {
  background-color: #f59e0b;
}

/* ==================================================================
   Shared Form Controls
   ================================================================== */
.form-label-admin {
  display: block;
  font-family: var(--font-heading);
  font-size: var(--text-xs);
  font-weight: 500;
  color: var(--text-secondary);
  margin-bottom: 4px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* form-control-admin: unified definition is in the "Glass Forms & Inputs" section below */

/* Modal section cards */
.modal-section-card {
  background: var(--gray-50);
  border: 1px solid #d1d5db;
  border-radius: var(--radius-card);
  padding: 12px 14px;
  margin-bottom: 12px;
}

body.dark-theme .modal-section-card {
  background: var(--bg-sec);
  border-color: var(--border);
}

/* Modal layout - scrollbar customization */
.modal-body::-webkit-scrollbar,
.table-responsive::-webkit-scrollbar {
  width: 5px;
  height: 5px;
}

.modal-body::-webkit-scrollbar-track,
.table-responsive::-webkit-scrollbar-track {
  background: transparent;
}

.modal-body::-webkit-scrollbar-thumb,
.table-responsive::-webkit-scrollbar-thumb {
  background: #d8d3c8;
  border-radius: 10px;
}

.modal-body::-webkit-scrollbar-thumb:hover,
.table-responsive::-webkit-scrollbar-thumb:hover {
  background: var(--gray-300);
}

.modal-body h6.text-primary {
  font-size: 11.5px !important;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--color-accent-hover) !important;
  border-left: 3px solid var(--color-accent) !important;
  padding-left: 10px !important;
  margin-top: 0 !important;
  margin-bottom: 14px !important;
  border-bottom: none !important;
  font-weight: 700 !important;
  font-family: var(--font-heading) !important;
}

/* ==========================================================================
   SOBER, ELEGANT CHECKBOX & RADIO DESIGN SYSTEM
   ========================================================================== */

/* ==========================================================================
   SOBER, ELEGANT CHECKBOX & RADIO DESIGN SYSTEM (EXCLUDING TOGGLE SWITCHES)
   ========================================================================== */

.form-check-input:not([role="switch"]):not(.form-switch .form-check-input):not(
    .teacher-status-switch .form-check-input
  ):not(.status-switch .form-check-input):not(.item-active-toggle):not(
    #toggle_all_fee_items
  ) {
  appearance: none !important;
  -webkit-appearance: none !important;
  width: 18px !important;
  height: 18px !important;
  min-width: 18px !important;
  min-height: 18px !important;
  max-width: 18px !important;
  max-height: 18px !important;
  border: 1.5px solid #cbd5e1 !important;
  background-color: #ffffff !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  position: relative !important;
  outline: none !important;
  box-shadow: none !important;
  vertical-align: middle !important;
  transition: all 0.2s ease-in-out !important;
  margin-top: 0 !important;
}

/* Radio Geometry */
.form-check-input[type="radio"]:not([role="switch"]):not(
    .form-switch .form-check-input
  ):not(.teacher-status-switch .form-check-input):not(
    .status-switch .form-check-input
  ) {
  border-radius: 50% !important;
}

/* Checkbox Geometry */
.form-check-input[type="checkbox"]:not([role="switch"]):not(
    .form-switch .form-check-input
  ):not(.teacher-status-switch .form-check-input):not(
    .status-switch .form-check-input
  ):not(.item-active-toggle):not(#toggle_all_fee_items) {
  border-radius: 5px !important;
}

/* Hover State */
.form-check-input:not([role="switch"]):not(.form-switch .form-check-input):not(
    .teacher-status-switch .form-check-input
  ):not(.status-switch .form-check-input):not(.item-active-toggle):not(
    #toggle_all_fee_items
  ):hover {
  border-color: #6366f1 !important;
  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.12) !important;
}

/* Checked State - Sober Indigo Accent */
.form-check-input:not([role="switch"]):not(.form-switch .form-check-input):not(
    .teacher-status-switch .form-check-input
  ):not(.status-switch .form-check-input):not(.item-active-toggle):not(
    #toggle_all_fee_items
  ):checked {
  background-color: #4f46e5 !important;
  border-color: #4f46e5 !important;
  background-image: none !important;
}

/* Checked Radio Inner Dot */
.form-check-input[type="radio"]:not([role="switch"]):not(
    .form-switch .form-check-input
  ):not(.teacher-status-switch .form-check-input):not(
    .status-switch .form-check-input
  ):checked::before {
  content: "" !important;
  display: block !important;
  width: 6px !important;
  height: 6px !important;
  border-radius: 50% !important;
  background-color: #ffffff !important;
  border: none !important;
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
}

/* Checked Checkbox Inner Checkmark */
.form-check-input[type="checkbox"]:not([role="switch"]):not(
    .form-switch .form-check-input
  ):not(.teacher-status-switch .form-check-input):not(
    .status-switch .form-check-input
  ):not(.item-active-toggle):not(#toggle_all_fee_items):checked::before {
  content: "" !important;
  display: block !important;
  width: 5px !important;
  height: 9px !important;
  border: solid #ffffff !important;
  border-width: 0 2px 2px 0 !important;
  position: absolute !important;
  top: 45% !important;
  left: 50% !important;
  transform: translate(-50%, -55%) rotate(45deg) !important;
  background: transparent !important;
}

.form-check-input:not([role="switch"]):not(.form-switch .form-check-input):not(
    .teacher-status-switch .form-check-input
  ):not(.status-switch .form-check-input):not(.item-active-toggle):not(
    #toggle_all_fee_items
  )::after {
  content: none !important;
  display: none !important;
}

/* Focus Ring */
.form-check-input:not([role="switch"]):not(.form-switch .form-check-input):not(
    .teacher-status-switch .form-check-input
  ):not(.status-switch .form-check-input):not(.item-active-toggle):not(
    #toggle_all_fee_items
  ):focus {
  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.18) !important;
  outline: none !important;
}

/* Dark Theme Support */
body.dark-theme
  .form-check-input:not([role="switch"]):not(
    .form-switch .form-check-input
  ):not(.teacher-status-switch .form-check-input):not(
    .status-switch .form-check-input
  ):not(.item-active-toggle):not(#toggle_all_fee_items) {
  background-color: #1e293b !important;
  border-color: #475569 !important;
}

body.dark-theme
  .form-check-input:not([role="switch"]):not(
    .form-switch .form-check-input
  ):not(.teacher-status-switch .form-check-input):not(
    .status-switch .form-check-input
  ):not(.item-active-toggle):not(#toggle_all_fee_items):checked {
  background-color: #6366f1 !important;
  border-color: #6366f1 !important;
}

/* Table inside modals */
.modal-body .table-responsive table {
  border-collapse: separate !important;
  border-spacing: 0 !important;
  border-radius: var(--radius) !important;
  overflow: hidden !important;
  border: 1px solid var(--color-border) !important;
}

.modal-body .table-responsive table thead th {
  background-color: var(--theme-table-thead-bg) !important;
  color: var(--theme-table-thead-color) !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.05em !important;
  font-size: var(--table-font-size-th) !important;
  font-family: var(--font-heading) !important;
  padding: var(--table-padding-th) !important;
  border: none !important;
  border-bottom: 1px solid var(--table-border-color) !important;
}

.modal-body .table-responsive table tbody td {
  padding: 10px 14px !important;
  border: none !important;
  border-bottom: 1px solid var(--color-border) !important;
  background-color: var(--color-surface) !important;
}

.modal-body .table-responsive table tbody tr:last-child td {
  border-bottom: none !important;
}

#qualificationsTable,
#edit_qualificationsTable {
  border-collapse: separate !important;
  border-spacing: 0 !important;
  border-radius: var(--radius) !important;
  overflow: hidden !important;
  border: 1px solid var(--color-border) !important;
}

#qualificationsTable thead th,
#edit_qualificationsTable thead th {
  background-color: var(--theme-table-thead-bg) !important;
  color: var(--theme-table-thead-color) !important;
  font-weight: 700 !important;
  font-size: var(--table-font-size-th) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.05em !important;
  border: none !important;
  border-bottom: 1px solid var(--table-border-color) !important;
  padding: var(--table-padding-th) !important;
}

#qualificationsTable tbody td,
#edit_qualificationsTable tbody td {
  background-color: var(--color-surface) !important;
  border: none !important;
  border-bottom: 1px solid var(--color-border) !important;
  padding: 10px 13px !important;
}

#qualificationsTable tbody tr:last-child td,
#edit_qualificationsTable tbody tr:last-child td {
  border-bottom: none !important;
}

/* Form utils */
.icon-circle-lg {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
  flex-shrink: 0;
}

.icon-circle-sm {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.85rem;
  flex-shrink: 0;
}

.form-info-card {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  background-color: var(--accent-light);
  border: 1px solid rgba(14, 165, 233, 0.2);
  border-radius: var(--radius-sm);
  padding: 0.875rem 1rem;
}

.form-section-icon {
  width: 40px;
  height: 40px;
  border-radius: var(--radius-md);
  background-color: var(--accent-soft);
  color: var(--accent);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.25rem;
  flex-shrink: 0;
}

body.dark-theme .form-section-icon {
  background-color: rgba(96, 165, 250, 0.15);
  color: #60a5fa;
}

.form-sidebar {
  position: sticky;
  top: calc(var(--header-height) + 1.5rem);
}

.form-sidebar-divider {
  margin: 1rem 0;
  border-top: 1px solid var(--color-border);
}

.input-password-wrapper {
  position: relative;
  display: block;
  width: 100%;
}

.input-password-wrapper .form-control-admin {
  padding-right: 2.75rem !important;
}

.btn-toggle-password,
button.btn-toggle-password {
  position: absolute !important;
  right: 8px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  width: 32px !important;
  height: 32px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  outline: none !important;
  color: var(--text-tertiary) !important;
  cursor: pointer !important;
  padding: 0 !important;
  margin: 0 !important;
  font-size: 1.1rem !important;
  line-height: 1 !important;
  transition: color 0.15s ease !important;
  z-index: 5 !important;
  border-radius: var(--radius-xs) !important;
}

.btn-toggle-password:hover,
button.btn-toggle-password:hover,
.btn-toggle-password:focus,
button.btn-toggle-password:focus {
  color: var(--accent) !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  outline: none !important;
  transform: translateY(-50%) !important;
}

.password-strength-bar {
  height: 4px;
  background-color: var(--color-border);
  border-radius: 4px;
  overflow: hidden;
  margin-top: 6px;
}

.strength-fill {
  height: 100%;
  width: 0;
  border-radius: 4px;
  transition:
    width 0.4s ease,
    background-color 0.4s ease;
}

/* ==================================================================
   â” â” â” â” â” â” â” â” â” â” â” â” â” â” â” â” â” â” â” â” â” â” â” â” â” â” â” â” â” â” â” â” â” â” â” â” â” â” â” â” â” â” â” â” â” â” â” â” â” â” â” â” â” â” â” â” â” â” â” â” â” â” â” â”
   UNIFIED MODULE DESIGN SYSTEM (Teachers + Students)
   One set of classes powers both modules
   â” â” â” â” â” â” â” â” â” â” â” â” â” â” â” â” â” â” â” â” â” â” â” â” â” â” â” â” â” â” â” â” â” â” â” â” â” â” â” â” â” â” â” â” â” â” â” â” â” â” â” â” â” â” â” â” â” â” â” â” â” â” â” â”
   ================================================================== */

/* --- Module Card Header --- */
.teacher-card-header {
  padding: 20px 24px !important;
  background-color: var(--color-surface);
  border-bottom: 1px solid var(--color-border);
}

/* --- Module Header Buttons (toolbar icons) --- */
.teacher-header-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: var(--radius-sm);
  border: 1.5px solid var(--color-border);
  background-color: var(--color-surface);
  color: var(--color-text-secondary);
  font-size: 16px;
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.teacher-header-btn:hover {
  background-color: var(--gray-100);
  color: var(--color-text-primary);
  border-color: var(--gray-300);
  transform: translateY(-1px);
  box-shadow: var(--shadow-xs);
}

.teacher-header-btn.btn-accent {
  background-color: var(--accent-light);
  border-color: rgba(14, 165, 233, 0.2);
  color: var(--accent-dark);
}

.teacher-header-btn.btn-accent:hover {
  background-color: var(--accent);
  color: #fff;
  border-color: var(--accent);
  box-shadow: 0 3px 10px rgba(14, 165, 233, 0.28);
}

.teacher-header-btn.btn-sky {
  background-color: rgba(59, 130, 246, 0.07);
  border-color: rgba(59, 130, 246, 0.18);
  color: #2563eb;
}

.teacher-header-btn.btn-sky:hover {
  background-color: #2563eb;
  color: #fff;
  border-color: #2563eb;
  box-shadow: 0 3px 10px rgba(37, 99, 235, 0.25);
}

.teacher-header-btn.btn-red {
  background-color: var(--color-danger-light);
  border-color: rgba(239, 68, 68, 0.18);
  color: var(--color-danger);
}

.teacher-header-btn.btn-red:hover:not(:disabled) {
  background-color: var(--color-danger);
  color: #fff;
  border-color: var(--color-danger);
  box-shadow: 0 3px 10px rgba(239, 68, 68, 0.25);
}

.teacher-header-btn:disabled {
  opacity: 0.38;
  cursor: not-allowed;
  background-color: var(--gray-100) !important;
  color: var(--gray-400) !important;
  border-color: var(--color-border) !important;
  transform: none !important;
  box-shadow: none !important;
}

/* --- Unified Premium Table --- */
.teacher-table {
  border-collapse: separate !important;
  border-spacing: 0 !important;
  background: transparent !important;
  width: 100% !important;
}

.teacher-table tbody td {
  border: none !important;
}
body.dark-theme .teacher-table tbody tr:hover td {
  background-color: rgba(56, 189, 248, 0.06) !important;
}

/* --- Table Checkboxes --- */
.table-checkbox {
  appearance: none;
  -webkit-appearance: none;
  width: 18px !important;
  height: 18px !important;
  border: 2px solid var(--gray-300) !important;
  border-radius: 4px !important;
  background-color: var(--color-surface) !important;
  cursor: pointer;
  position: relative;
  outline: none !important;
  flex-shrink: 0;
  transition: all 0.18s;
}

.table-checkbox:hover {
  border-color: var(--accent) !important;
  box-shadow: 0 0 0 3px var(--accent-light) !important;
}

.table-checkbox:checked {
  background-color: var(--accent) !important;
  border-color: var(--accent) !important;
}

.table-checkbox:checked::after {
  content: "";
  position: absolute;
  left: 5px;
  top: 2px;
  width: 5px;
  height: 9px;
  border: solid #fff;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

body.dark-theme .table-checkbox {
  border-color: var(--color-border);
  background-color: var(--color-bg) !important;
}

/* --- Avatars --- */
.teacher-avatar,
.student-avatar {
  width: 42px;
  height: 42px;
  border-radius: 10px;
  object-fit: cover;
  border: 2px solid var(--color-surface);
  box-shadow: var(--shadow-sm);
  transition: var(--transition);
}

.teacher-table tr:hover .teacher-avatar,
.teacher-table tr:hover .student-avatar {
  border-color: var(--color-accent);
  transform: scale(1.04);
}

.teacher-avatar-placeholder,
.student-avatar-placeholder {
  width: 42px;
  height: 42px;
  border-radius: 10px;
  background: linear-gradient(
    135deg,
    var(--accent-light) 0%,
    rgba(14, 165, 233, 0.3) 150%
  );
  color: var(--accent-dark);
  border: 2px solid var(--bg-card);
  font-size: 13px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--shadow-sm);
  transition: var(--transition);
}

.teacher-table tr:hover .teacher-avatar-placeholder,
.teacher-table tr:hover .student-avatar-placeholder {
  border-color: var(--color-accent);
  transform: scale(1.04);
}

/* --- Name Link, Username, Details --- */
.teacher-name-link,
.student-name-link {
  font-family: var(--font-heading);
  font-size: var(--text-sm);
  font-weight: 700;
  color: var(--color-text-primary);
  margin-bottom: 1px;
  transition: var(--transition);
  display: inline-block;
  text-decoration: none;
}

.teacher-name-link:hover,
.student-name-link:hover {
  color: var(--color-accent-hover);
}

.teacher-username,
.student-username {
  font-size: 10.5px;
  background-color: var(--gray-100);
  border: 1px solid var(--gray-200);
  color: var(--gray-500);
  padding: 3px 8px;
  border-radius: 5px;
  font-weight: 600;
  letter-spacing: 0.02em;
}

body.dark-theme .teacher-username,
body.dark-theme .student-username {
  background-color: var(--color-bg);
  border-color: var(--color-border);
  color: var(--color-text-muted);
}

.teacher-detail-email,
.teacher-detail-mobile,
.student-detail-email,
.student-detail-mobile {
  font-size: 11.5px;
  color: var(--color-text-muted);
  display: flex;
  align-items: center;
  gap: 4px;
}

.teacher-detail-mobile .whatsapp-icon,
.student-detail-mobile .whatsapp-icon {
  color: #16a34a;
  font-size: 13px;
  transition: var(--transition);
}

.teacher-detail-mobile .whatsapp-icon:hover,
.student-detail-mobile .whatsapp-icon:hover {
  transform: scale(1.2);
  color: #15803d;
}

.whatsapp-icon {
  color: #22c55e;
  margin-left: 4px;
}

.cell-counter {
  font-size: 11.5px;
  color: var(--gray-400);
  font-weight: 600;
}

.cell-biometric {
  font-size: 10.5px;
  color: var(--info);
  background-color: var(--info-light);
  padding: 3px 9px;
  border-radius: 5px;
  border: 1px solid rgba(59, 130, 246, 0.18);
  font-weight: 700;
  letter-spacing: 0.03em;
}

body.dark-theme .cell-biometric {
  background-color: rgba(59, 130, 246, 0.12);
  border-color: rgba(59, 130, 246, 0.2);
  color: #ff708d;
}

/* Class assignment pills */
.class-pill {
  font-size: 10px;
  padding: 3px 8px;
  border-radius: 5px;
  font-weight: 500;
  border: 1px solid transparent;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.class-pill-primary {
  background-color: var(--accent-light);
  color: var(--accent-dark);
  border-color: rgba(14, 165, 233, 0.2);
}

.class-pill-secondary {
  background-color: var(--gray-100);
  color: var(--gray-500);
  border-color: var(--gray-200);
}

body.dark-theme .class-pill-secondary {
  background-color: var(--color-bg);
  border-color: var(--color-border);
  color: var(--color-text-muted);
}

.class-pill .ct-icon {
  font-size: 10px;
}

.teacher-joining-date {
  font-size: 12px;
  font-weight: 600;
  color: var(--color-text-secondary);
}

/* --- Status Switch (toggle) -- universal --- */
.teacher-status-switch .form-check-input,
.status-switch .form-check-input,
.table-responsive .form-check-input[type="checkbox"][role="switch"],
.table-responsive td .form-check-input[type="checkbox"] {
  width: 40px !important;
  height: 22px !important;
  border-radius: 20px !important;
  background-color: var(--gray-200) !important;
  border: 1.5px solid var(--gray-300) !important;
  cursor: pointer;
  transition: var(--transition) !important;
  appearance: none !important;
  -webkit-appearance: none !important;
  position: relative !important;
  background-image: none !important;
}

.teacher-status-switch .form-check-input:checked,
.status-switch .form-check-input:checked,
.table-responsive .form-check-input[type="checkbox"][role="switch"]:checked,
.table-responsive td .form-check-input[type="checkbox"]:checked {
  background-color: var(--theme-primary) !important;
  border-color: var(--theme-primary) !important;
  background-image: none !important;
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.15) !important;
}

.teacher-status-switch .form-check-input:focus,
.status-switch .form-check-input:focus,
.table-responsive .form-check-input[type="checkbox"][role="switch"]:focus,
.table-responsive td .form-check-input[type="checkbox"]:focus {
  box-shadow: 0 0 0 3px var(--accent-light) !important;
  outline: none !important;
}

.teacher-status-switch .form-check-input::after,
.status-switch .form-check-input::after,
.table-responsive .form-check-input[type="checkbox"][role="switch"]::after,
.table-responsive td .form-check-input[type="checkbox"]::after {
  content: "";
  position: absolute;
  top: 3px !important;
  left: 3px !important;
  width: 14px !important;
  height: 14px !important;
  border-radius: 50%;
  background-color: #fff;
  transition: transform 0.22s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}

.teacher-status-switch .form-check-input:checked::after,
.status-switch .form-check-input:checked::after,
.table-responsive
  .form-check-input[type="checkbox"][role="switch"]:checked::after,
.table-responsive td .form-check-input[type="checkbox"]:checked::after {
  transform: translateX(18px) !important;
}

.teacher-status-switch .form-check-input:checked::before,
.status-switch .form-check-input:checked::before,
.table-responsive
  .form-check-input[type="checkbox"][role="switch"]:checked::before,
.table-responsive td .form-check-input[type="checkbox"]:checked::before {
  content: none !important;
}

body.dark-theme .teacher-status-switch .form-check-input,
body.dark-theme .status-switch .form-check-input,
body.dark-theme
  .table-responsive
  .form-check-input[type="checkbox"][role="switch"],
body.dark-theme .table-responsive td .form-check-input[type="checkbox"] {
  background-color: var(--gray-700) !important;
  border-color: var(--gray-600) !important;
}

/* --- Status Badge --- */
.teacher-status-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12.5px;
  font-weight: 500;
  padding: 4px 11px;
  border-radius: 20px;
}

.teacher-status-badge.active {
  background-color: var(--success-light);
  color: #059669;
}

.teacher-status-badge.active .status-dot {
  width: 6px;
  height: 6px;
  background-color: var(--success);
  border-radius: 50%;
  box-shadow: 0 0 0 2px rgba(16, 185, 129, 0.3);
  animation: pulse-green 2s infinite;
}

.teacher-status-badge.inactive {
  background-color: var(--danger-light);
  color: var(--danger);
}

@keyframes pulse-green {
  0% {
    box-shadow: 0 0 0 0px rgba(16, 185, 129, 0.5);
  }

  70% {
    box-shadow: 0 0 0 5px rgba(16, 185, 129, 0);
  }

  100% {
    box-shadow: 0 0 0 0px rgba(16, 185, 129, 0);
  }
}

/* --- Total Counter Badge --- */
.teacher-total-badge {
  background-color: rgba(16, 185, 129, 0.07);
  border: 1.5px solid rgba(16, 185, 129, 0.18);
  color: #059669;
  font-size: 12px;
  font-weight: 600;
  padding: 5px 13px;
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.teacher-total-badge i {
  font-size: 14px;
  color: var(--success);
}

.teacher-total-badge .count-num {
  font-weight: 600;
  color: #047857;
}

body.dark-theme .teacher-total-badge {
  background-color: rgba(16, 185, 129, 0.1);
  border-color: rgba(16, 185, 129, 0.2);
  color: #34d399;
}

body.dark-theme .teacher-total-badge .count-num {
  color: #6ee7b7;
}

/* --- Biometric Alert Banner --- */
.teacher-bio-alert,
.student-bio-alert {
  border: 1.5px solid rgba(245, 158, 11, 0.22);
  color: #b45309;
  border-radius: var(--radius);
  padding: 13px 18px;
  font-size: 14px;
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 12px;
  line-height: 1.5;
  background: linear-gradient(
    135deg,
    rgba(245, 158, 11, 0.07) 0%,
    rgba(245, 158, 11, 0.02) 100%
  );
}

.teacher-bio-alert .alert-icon,
.student-bio-alert .alert-icon {
  font-size: 20px;
  color: var(--warning);
}

.student-bio-alert {
  border-color: rgba(239, 68, 68, 0.22);
  color: #b91c1c;
  background: linear-gradient(
    135deg,
    rgba(239, 68, 68, 0.07) 0%,
    rgba(239, 68, 68, 0.02) 100%
  );
}

.student-bio-alert .alert-icon {
  color: var(--danger);
}

body.dark-theme .teacher-bio-alert {
  background: rgba(245, 158, 11, 0.08);
  border-color: rgba(245, 158, 11, 0.18);
  color: #fbbf24;
}

body.dark-theme .teacher-bio-alert .alert-icon {
  color: #fbbf24;
}

/* --- Filter Row --- */
.filter-row {
  background: var(--color-surface);
}

.filter-form {
  display: flex;
  align-items: flex-end;
  gap: 12px;
  padding: 12px 16px;
  flex-wrap: wrap;
}

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

.filter-label {
  font-size: 12px;
  font-weight: 600;
  color: var(--gray-500);
  text-transform: uppercase;
  letter-spacing: 0.3px;
}

.filter-group .form-control-admin {
  height: 34px;
  padding: 0 8px;
  font-size: 13px;
}

.filter-actions {
  display: flex;
  align-items: center;
  gap: 6px;
  padding-bottom: 1px;
}

body.dark-theme .filter-row {
  background: var(--color-bg);
}

/* ==================================================================
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   UNIFIED PROFILE / VIEW PAGE
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   ================================================================== */

/* Profile summary card */
.teacher-summary-card {
  padding: 0;
}

.summary-avatar {
  width: 96px;
  height: 96px;
  border-radius: 22px;
  object-fit: cover;
  border: 3px solid var(--bg-card);
  box-shadow: 0 8px 24px var(--accent-light);
  transition: var(--transition);
}

.teacher-summary-card:hover .summary-avatar {
  transform: translateY(-2px);
  box-shadow: 0 12px 28px rgba(14, 165, 233, 0.2);
  border-color: var(--accent);
}

.summary-avatar-placeholder {
  width: 96px;
  height: 96px;
  border-radius: 22px;
  background: linear-gradient(
    135deg,
    var(--accent-light) 0%,
    rgba(14, 165, 233, 0.35) 150%
  );
  color: var(--accent-dark);
  border: 3px solid var(--bg-card);
  font-size: 28px;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 8px 24px var(--accent-light);
  transition: var(--transition);
}

.teacher-summary-card:hover .summary-avatar-placeholder {
  transform: translateY(-2px);
  box-shadow: 0 12px 28px rgba(14, 165, 233, 0.2);
  border-color: var(--accent);
}

.summary-name {
  font-size: 18px;
  font-weight: 800;
  color: var(--color-text-primary);
  margin-top: 12px;
  margin-bottom: 4px;
}

/* Profile left col */
.profile-left-col {
  border-bottom: 1px solid var(--color-border);
  padding-bottom: 1.5rem;
}

@media (min-width: 768px) {
  .profile-left-col {
    border-bottom: 0;
    border-right: 1px solid var(--color-border);
    padding-bottom: 0;
    padding-right: 1.5rem;
  }
}

body.dark-theme .profile-left-col {
  border-color: var(--color-border);
}

/* Communication buttons */
.teacher-comm-btn {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 9px 13px;
  border-radius: 9px;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  border: 1.5px solid transparent;
  transition: all 0.2s;
}

.teacher-comm-btn.email-btn {
  background-color: var(--accent-light);
  color: var(--accent-dark);
  border-color: rgba(14, 165, 233, 0.2);
}

.teacher-comm-btn.email-btn:hover {
  background-color: var(--accent);
  color: #fff;
  border-color: var(--accent);
  box-shadow: 0 3px 10px rgba(14, 165, 233, 0.22);
}

.teacher-comm-btn.whatsapp-btn {
  background-color: rgba(34, 197, 94, 0.07);
  color: #16a34a;
  border-color: rgba(34, 197, 94, 0.15);
}

.teacher-comm-btn.whatsapp-btn:hover {
  background-color: #16a34a;
  color: #fff;
  border-color: #16a34a;
  box-shadow: 0 3px 10px rgba(22, 163, 74, 0.25);
}

body.dark-theme .teacher-comm-btn.email-btn {
  background-color: var(--accent-light);
  color: var(--accent);
  border-color: rgba(14, 165, 233, 0.2);
}

body.dark-theme .teacher-comm-btn.whatsapp-btn {
  background-color: rgba(34, 197, 94, 0.1);
  color: #4ade80;
  border-color: rgba(34, 197, 94, 0.2);
}

/* Detail boxes (profile view) */
.detail-box {
  background: var(--gray-50);
  border: 1px solid var(--gray-200);
  border-radius: 9px;
  padding: 10px 13px;
  display: flex;
  flex-direction: column;
  height: 100%;
  transition: all 0.18s;
}

.detail-box:hover {
  background: var(--bg-card);
  border-color: var(--accent-light);
  box-shadow: 0 2px 8px var(--accent-light);
}

.detail-box-label {
  font-size: 10.5px;
  color: var(--gray-400);
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 4px;
  margin-bottom: 3px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-family: var(--font-heading);
}

.detail-box-label i {
  font-size: 12px;
  color: var(--gray-400);
}

.detail-box-val {
  font-size: 13.5px;
  font-weight: 500;
  color: var(--color-text-primary);
  word-break: break-all;
  font-family: var(--font-primary);
}

.detail-box-val.empty {
  color: var(--gray-400);
  font-weight: 500;
}

.detail-box-val.email-link {
  color: var(--info);
}

body.dark-theme .detail-box {
  background: var(--gray-800);
  border-color: var(--color-border);
}

body.dark-theme .detail-box:hover {
  background: var(--color-surface);
}

body.dark-theme .detail-box-label {
  color: var(--gray-500);
}

body.dark-theme .detail-box-val {
  color: var(--color-text-primary);
}

/* Profile tabs -- UNIFIED for both Student and Teacher */
.student-tabs-header {
  overflow: hidden;
}

.student-tabs,
.teacher-tabs {
  display: flex;
  flex-wrap: nowrap;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  padding: 4px !important;
  gap: 4px !important;
  background: var(--gray-100) !important;
  border: none !important;
  list-style: none;
  margin: 10px 14px !important;
  border-radius: 10px;
}

.student-tabs::-webkit-scrollbar,
.teacher-tabs::-webkit-scrollbar {
  height: 4px;
}

.student-tabs::-webkit-scrollbar-track,
.teacher-tabs::-webkit-scrollbar-track {
  background: transparent;
}

.student-tabs::-webkit-scrollbar-thumb,
.teacher-tabs::-webkit-scrollbar-thumb {
  background: var(--gray-200);
  border-radius: 10px;
}

body.dark-theme .student-tabs::-webkit-scrollbar-thumb,
body.dark-theme .teacher-tabs::-webkit-scrollbar-thumb {
  background: var(--gray-700);
}

.student-tabs .nav-item,
.teacher-tabs .nav-item {
  flex: 0 0 auto;
}

.student-tabs .nav-link,
.teacher-tabs .nav-link {
  border: none !important;
  background: transparent !important;
  color: var(--gray-600) !important;
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 13px;
  padding: 8px 16px !important;
  transition: var(--transition);
  display: flex;
  align-items: center;
  gap: 6px;
  border-radius: 8px !important;
  box-shadow: none !important;
  white-space: nowrap;
}

.student-tabs .nav-link i,
.teacher-tabs .nav-link i {
  font-size: 14px;
  color: var(--gray-400);
  transition: var(--transition);
}

.student-tabs .nav-link:hover,
.teacher-tabs .nav-link:hover {
  background: rgba(255, 255, 255, 0.45) !important;
  color: var(--color-text-primary) !important;
}

.student-tabs .nav-link:hover i,
.teacher-tabs .nav-link:hover i {
  color: var(--gray-700);
}

/* Active tab -- unified underline accent style */
.student-tabs .nav-link.active,
.teacher-tabs .nav-link.active {
  background: var(--color-surface) !important;
  color: var(--color-accent) !important;
  font-weight: 700 !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06) !important;
  border: none !important;
}

.student-tabs .nav-link.active i,
.teacher-tabs .nav-link.active i {
  color: var(--color-accent) !important;
}

body.dark-theme .student-tabs,
body.dark-theme .teacher-tabs {
  background: var(--gray-900) !important;
}

body.dark-theme .student-tabs .nav-link,
body.dark-theme .teacher-tabs .nav-link {
  color: var(--gray-400) !important;
}

body.dark-theme .student-tabs .nav-link:hover,
body.dark-theme .teacher-tabs .nav-link:hover {
  background: rgba(255, 255, 255, 0.05) !important;
  color: var(--color-text-primary) !important;
}

body.dark-theme .student-tabs .nav-link:hover i,
body.dark-theme .teacher-tabs .nav-link:hover i {
  color: var(--gray-200) !important;
}

body.dark-theme .student-tabs .nav-link.active,
body.dark-theme .teacher-tabs .nav-link.active {
  background: var(--color-surface) !important;
  color: #67d5f7 !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25) !important;
}

body.dark-theme .student-tabs .nav-link.active i,
body.dark-theme .teacher-tabs .nav-link.active i {
  color: #67d5f7 !important;
}

/* Tab content */
.tab-content {
  display: flex;
  flex-direction: column;
  min-height: 0;
  width: 100%;
}

.tab-pane {
  display: none;
}

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

.tab-pane.fade {
  opacity: 0;
  transition: opacity 0.15s linear;
}

.tab-pane.fade.show {
  opacity: 1;
}

/* Section title inside tabs */
.teacher-section-title,
.detail-section-title {
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--color-text-primary);
  border-bottom: 2px solid var(--color-border);
  padding-bottom: 12px;
  margin-bottom: 24px;
  display: flex;
  align-items: center;
  gap: 9px;
  font-weight: 800;
  position: relative;
  font-family: var(--font-heading);
}

.teacher-section-title::after,
.detail-section-title::after {
  content: "";
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 70px;
  height: 3px;
  background: linear-gradient(
    90deg,
    var(--color-accent) 0%,
    var(--purple) 100%
  );
  border-radius: 3px;
}

.teacher-section-title i,
.detail-section-title i {
  font-size: 15px;
  background-color: var(--color-accent-light);
  border: 1px solid rgba(99, 102, 241, 0.2);
  width: 26px;
  height: 26px;
  border-radius: 7px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--color-accent);
  box-shadow: 0 2px 6px rgba(99, 102, 241, 0.12);
}

/* Section cards in detail view */
.detail-section-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: 20px;
  margin-bottom: 18px;
  box-shadow: var(--shadow-xs);
  position: relative;
  overflow: hidden;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.detail-section-card::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: 150px;
  height: 150px;
  background: radial-gradient(
    circle at top right,
    rgba(99, 102, 241, 0.04),
    transparent 70%
  );
  pointer-events: none;
}

body.dark-theme .detail-section-card::after {
  background: radial-gradient(
    circle at top right,
    rgba(var(--theme-primary-rgb), 0.08),
    transparent 70%
  );
}

.detail-section-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 25px rgba(99, 102, 241, 0.08);
  border-color: rgba(99, 102, 241, 0.25) !important;
}

body.dark-theme .detail-section-card:hover {
  box-shadow:
    0 10px 25px rgba(0, 0, 0, 0.5),
    0 0 15px rgba(var(--theme-primary-rgb), 0.05);
  border-color: rgba(var(--theme-primary-rgb), 0.25) !important;
}

.detail-section-card.sec-personal {
  border-left: 3px solid var(--info);
}

.detail-section-card.sec-experience {
  border-left: 3px solid var(--purple);
}

.detail-section-card.sec-address {
  border-left: 3px solid var(--success);
}

.detail-section-card.sec-classes {
  border-left: 3px solid var(--warning);
}

body.dark-theme .detail-section-card {
  background: var(--color-surface);
  border-color: var(--color-border);
}

body.dark-theme .detail-section-title {
  color: var(--color-text-primary);
}

/* ==================================================================
   Universal Premium ERP Table Styles (tokens merged into main :root)
   ================================================================== */

/* NOTE: table tokens (--table-thead-bg, --table-cell-bg, --table-cell-color
   etc.) are defined once in the :root and body.dark-theme blocks above.
   Do not redefine them here -- duplicate definitions further down the
   cascade silently override the correct values and cause invisible text. */

/* Universal ERP table tokens applied via .teacher-detail-table and .activity-detail-table */
.teacher-detail-table,
.activity-detail-table {
  width: 100% !important;
  border-collapse: collapse !important;
  border-spacing: 0 !important;
  background-color: var(--bg-card) !important;
  margin-bottom: 0 !important;
  border-bottom: 1px solid var(--border) !important;
}

.teacher-detail-table thead th,
.activity-detail-table thead th {
  border: none !important;
}

.teacher-detail-table tbody td,
.activity-detail-table tbody td {
  border: none !important;
}

.teacher-detail-table tbody tr,
.activity-detail-table tbody tr {
  transition: all 0.15s ease !important;
}
.teacher-detail-table tbody tr:hover,
.activity-detail-table tbody tr:hover {
  box-shadow: none !important;
}

body.dark-theme .teacher-detail-table tbody tr:hover td,
body.dark-theme .activity-detail-table tbody tr:hover td {
  background-color: var(--accent-light) !important;
}

.activity-fields-subtable {
  width: 100% !important;
  border-collapse: collapse !important;
  border: none !important;
  margin: 0 !important;
  font-size: 13px !important;
}

.activity-fields-subtable tr {
  border-bottom: 1px solid var(--table-border-color) !important;
}

.activity-fields-subtable tr:last-child {
  border-bottom: none !important;
}

.activity-fields-subtable td {
  padding: 8px 16px !important;
  border: none !important;
  border-bottom: none !important;
  vertical-align: top !important;
}

.activity-fields-subtable td:first-child {
  border-right: 1px solid var(--table-border-color) !important;
  background-color: var(--gray-50) !important;
  font-family: var(--font-heading) !important;
  font-weight: 600 !important;
  color: var(--color-text-secondary) !important;
  width: 240px;
  box-shadow: inset 3px 0 0 #cbd5e1 !important;
  /* Premium left slate boundary bar */
}

.activity-fields-subtable td:last-child {
  background-color: #ffffff !important;
  font-family: var(--font-primary) !important;
  color: var(--color-text-primary) !important;
  word-break: break-all !important;
}

body.dark-theme .activity-fields-subtable td:first-child {
  background-color: #1e293b !important;
  color: #cbd5e1 !important;
  box-shadow: inset 3px 0 0 #475569 !important;
}

body.dark-theme .activity-fields-subtable td:last-child {
  background-color: #0f172a !important;
}

.ct-badge-primary {
  background-color: var(--color-accent-light);
  color: var(--color-accent-hover);
  border: 1px solid rgba(99, 102, 241, 0.18);
  font-size: 10px;
  padding: 3px 8px;
  border-radius: 5px;
  font-weight: 500;
}

.ct-badge-muted {
  font-size: 12.5px;
  color: var(--gray-400);
}

body.dark-theme .ct-badge-primary {
  background-color: rgba(99, 102, 241, 0.1);
  color: #a5b4fc;
}

/* ==================================================================
   Attendance Stats Cards (Shared)
   ================================================================== */
.att-stat-card {
  border-radius: var(--radius-sm);
  padding: 11px 13px;
  display: flex;
  align-items: center;
  gap: 10px;
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  height: 100%;
  transition: var(--transition);
}

.att-stat-card:hover {
  box-shadow: var(--shadow-sm);
}

.att-stat-icon {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  flex-shrink: 0;
}

.att-stat-label {
  font-size: 10px;
  color: var(--gray-400);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  font-family: var(--font-heading);
}

.att-stat-val {
  font-size: 15px;
  font-weight: 800;
  color: var(--color-text-primary);
  line-height: 1.2;
  font-family: var(--font-primary);
}

body.dark-theme .att-stat-card {
  background: var(--color-surface);
  border-color: var(--color-border);
}

body.dark-theme .att-stat-val {
  color: var(--color-text-primary);
}

.att-stat-icon.att-icon-total {
  background-color: rgba(37, 99, 235, 0.08);
  color: #2563eb;
}

.att-stat-icon.att-icon-present {
  background-color: rgba(22, 163, 74, 0.08);
  color: #16a34a;
}

.att-stat-icon.att-icon-late {
  background-color: var(--accent-light);
  color: var(--accent);
}

.att-stat-icon.att-icon-absent {
  background-color: rgba(220, 38, 38, 0.08);
  color: #dc2626;
}

.att-stat-icon.att-icon-leave {
  background-color: rgba(124, 58, 237, 0.08);
  color: var(--purple-dark);
}

.att-stat-icon.att-icon-halfday {
  background-color: rgba(8, 145, 178, 0.08);
  color: #0891b2;
}

.att-stat-val.att-val-leave {
  color: var(--purple-dark);
}

.att-stat-val.att-val-halfday {
  color: #0891b2;
}

/* ==================================================================
   Document Cards (Shared)
   ================================================================== */
.doc-card {
  background: var(--color-surface);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius);
  padding: 16px;
  box-shadow: var(--shadow-xs);
  display: flex;
  flex-direction: column;
  height: 100%;
  transition: var(--transition);
}

.doc-card:hover {
  box-shadow: var(--shadow-sm);
  border-color: var(--accent-light);
}

.doc-card-title {
  font-size: 14px;
  font-weight: 700;
  color: var(--gray-600);
  margin-bottom: 11px;
  padding-bottom: 8px;
  border-bottom: 1px dashed var(--gray-200);
}

.doc-img-container {
  height: 155px;
  border-radius: 8px;
  overflow: hidden;
  background: var(--gray-50);
  border: 1px solid var(--gray-200);
  display: flex;
  align-items: center;
  justify-content: center;
}

.doc-img-preview {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.doc-img-preview.contain-img {
  object-fit: contain;
  padding: 8px;
}

.doc-pdf-container {
  height: 155px;
  border-radius: 8px;
  background: #fef2f2;
  border: 1px solid #fca5a5;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: var(--danger);
}

.pdf-large-icon {
  font-size: 44px;
  margin-bottom: 8px;
}

.pdf-text {
  font-size: 12px;
  font-weight: 700;
}

.doc-empty-state {
  height: 155px;
  border-radius: 8px;
  border: 2px dashed var(--gray-200);
  background: var(--gray-50);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: var(--gray-500);
}

.empty-icon {
  font-size: 38px;
  margin-bottom: 8px;
  color: var(--gray-300);
}

.empty-text {
  font-size: 12px;
  font-weight: 600;
}

body.dark-theme .doc-card {
  background: var(--color-surface);
  border-color: var(--color-border);
}

body.dark-theme .doc-card-title {
  color: var(--gray-400);
  border-bottom-color: var(--color-border);
}

body.dark-theme .doc-img-container {
  background: #1f2937;
  border-color: var(--color-border);
}

body.dark-theme .doc-empty-state {
  background: #1f2937;
  border-color: var(--color-border);
  color: var(--gray-500);
}

/* ==================================================================
   Trash Bin (Shared)
   ================================================================== */
.trash-back-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 9px;
  border: 1.5px solid var(--color-border);
  background-color: var(--color-surface);
  color: var(--color-text-secondary);
  font-size: 16px;
  transition: all 0.2s;
  text-decoration: none;
}

.trash-back-btn:hover {
  background-color: var(--accent-light);
  color: var(--accent-dark);
  border-color: rgba(14, 165, 233, 0.25);
  transform: translateX(-2px);
}

.trash-count-badge {
  background: rgba(239, 68, 68, 0.07);
  border: 1.5px solid rgba(239, 68, 68, 0.18);
  color: #dc2626;
  font-size: 12.5px;
  font-weight: 500;
  padding: 3px 10px;
  border-radius: 20px;
  letter-spacing: 0.03em;
}

.trash-deleted-date {
  font-size: 11.5px;
  color: var(--gray-400);
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.trash-deleted-date i {
  color: var(--danger);
  font-size: 13px;
}

.trash-empty-icon {
  width: 68px;
  height: 68px;
  border-radius: 18px;
  background: linear-gradient(
    135deg,
    rgba(16, 185, 129, 0.07) 0%,
    rgba(16, 185, 129, 0.02) 100%
  );
  border: 1.5px solid rgba(16, 185, 129, 0.15);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 32px;
  color: var(--success);
}

#trashTableBody tr td {
  opacity: 0.88;
}

#trashTableBody tr:hover td {
  opacity: 1;
  background-color: rgba(239, 68, 68, 0.03) !important;
}

body.dark-theme .trash-back-btn {
  border-color: var(--color-border);
  background-color: var(--color-surface);
  color: var(--gray-400);
}

body.dark-theme .trash-deleted-date {
  color: var(--gray-500);
}

/* ==================================================================
   Sibling Cards
   ================================================================== */
.sibling-avatar {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  object-fit: cover;
}

.sibling-avatar-placeholder {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-accent-light);
  color: var(--color-accent-hover);
  font-weight: 700;
  font-size: 14px;
}

body.dark-theme .sibling-avatar-placeholder {
  background: var(--accent-light);
  color: var(--accent);
}

/* ==================================================================
   Clean, Minimal, Professional Student ID Card Styles
   ================================================================== */
.student-id-card {
  width: 100%;
  height: auto;
  min-height: 330px;
  border-radius: 8px;
  overflow: hidden;
  position: relative;
  font-family: "Poppins", "Inter", sans-serif;
  text-align: center;
}

.id-card-barcode-box {
  background: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 2px !important;
  padding: 3px !important;
  width: 130px !important;
  height: 18px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin-bottom: 3px !important;
  overflow: hidden !important;
}

.id-card-barcode-lines {
  width: 100% !important;
  height: 100% !important;
  background: repeating-linear-gradient(
    90deg,
    #000,
    #000 2px,
    transparent 2px,
    transparent 4px,
    #000 4px,
    #000 5px,
    transparent 5px,
    transparent 7px
  ) !important;
}

.id-card-rfid {
  font-size: 8px !important;
  font-family: monospace !important;
  color: #64748b !important;
  font-weight: 500 !important;
}

/* ==================================================================
   Activity Timeline
   ================================================================== */
.activity-timeline {
  border-left: 2px solid var(--color-border);
  padding-left: 20px;
  position: relative;
  margin-left: 10px;
}

.activity-timeline-item {
  position: relative;
}

.timeline-dot {
  position: absolute;
  left: -27px;
  top: 0;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  border: 2px solid var(--color-surface);
}

body.dark-theme .timeline-dot {
  border-color: var(--color-surface);
}

.timeline-dot.dot-success {
  background-color: var(--success);
}

.timeline-dot.dot-info {
  background-color: var(--info);
}

.timeline-dot.dot-danger {
  background-color: var(--danger);
}

.timeline-dot.dot-accent {
  background-color: var(--purple);
}

/* ==================================================================
   Footer
   ================================================================== */
.footer {
  background-color: var(--color-surface);
  height: 54px;
  display: flex;
  align-items: center;
  border-top: 1px solid var(--color-border);
}

/* ==================================================================
   SweetAlert2 Custom
   ================================================================== */
.swal-toast-custom,
.swal-btn-custom,
.swal-danger-btn-custom,
.swal-cancel-btn-custom {
  font-family: var(--font-heading) !important;
  border-radius: var(--radius-sm) !important;
}

.swal-toast-custom {
  box-shadow: var(--shadow-lg) !important;
}

.swal-btn-custom,
.swal-danger-btn-custom {
  font-weight: 600 !important;
}

.swal-cancel-btn-custom {
  font-weight: 500 !important;
  color: var(--color-text-primary) !important;
}

/* ==================================================================
   Dashboard Pagination
   ================================================================== */
.pagination-wrapper {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 1.5rem;
  background-color: var(--bg-card);
  border-top: 1px solid var(--border);
}

.pagination-btn {
  padding: 6px 13px;
  font-size: var(--text-xs);
  font-weight: 500;
  color: var(--text-secondary);
  background: var(--bg-card);
  border: 1px solid #d1d5db;
  border-radius: var(--radius-btn);
  cursor: pointer;
  transition: var(--transition);
}

.pagination-btn:hover:not(:disabled) {
  background-color: var(--bg-sec);
  color: var(--text-primary);
  border-color: var(--text-secondary);
}

.pagination-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.pagination-numbers {
  display: flex;
  gap: 4px;
}

.pagination-num-btn {
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--text-xs);
  font-weight: 500;
  color: var(--text-secondary);
  border: 1px solid transparent;
  border-radius: 50%;
  cursor: pointer;
  background: transparent;
  transition: var(--transition);
}

.pagination-num-btn:hover {
  background-color: var(--bg-sec);
  color: var(--text-primary);
}

body.dark-theme .pagination-num-btn:hover {
  background-color: rgba(255, 255, 255, 0.05);
}

.pagination-num-btn.active {
  background-color: #111111 !important;
  color: #ffffff !important;
  border-color: #111111 !important;
  font-weight: 600 !important;
}

body.dark-theme .pagination-num-btn.active {
  background-color: #ffffff !important;
  color: #111111 !important;
  border-color: #ffffff !important;
}

/* ==================================================================
   Auth Pages - Redesigned v3 (split-screen, sober modern)
   ================================================================== */

.auth-page-body {
  margin: 0;
  padding: 0;
  min-height: 100vh;
  background: var(--bg-base);
  font-family: var(--font-primary);
}

.auth-split-container {
  display: flex;
  min-height: 100vh;
  width: 100%;
}

.auth-brand-panel {
  position: relative;
  width: 420px;
  flex-shrink: 0;
  background: #0b0e13;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 2.5rem 2.75rem;
  overflow: hidden;
  color: #fff;
}

.auth-brand-grid {
  position: absolute;
  inset: 0;
  background-image: radial-gradient(
    circle,
    rgba(255, 255, 255, 0.06) 1px,
    transparent 1px
  );
  background-size: 28px 28px;
  pointer-events: none;
}

.auth-brand-glow {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  filter: blur(80px);
}

.auth-brand-glow--tl {
  top: -80px;
  left: -60px;
  width: 320px;
  height: 320px;
  background: radial-gradient(
    circle,
    rgba(14, 165, 233, 0.18) 0%,
    transparent 70%
  );
}

.auth-brand-glow--br {
  bottom: -80px;
  right: -60px;
  width: 260px;
  height: 260px;
  background: radial-gradient(
    circle,
    rgba(20, 184, 166, 0.15) 0%,
    transparent 70%
  );
}

.auth-brand-inner {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 2.75rem;
  flex: 1;
  justify-content: center;
}

.auth-brand-wordmark {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  padding: 2.5rem 2.75rem;
}

.auth-brand-logo-mark {
  width: 36px;
  height: 36px;
  background: linear-gradient(135deg, #0ea5e9 0%, #14b8a6 100%);
  border-radius: 9px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.auth-brand-logo-mark--sm {
  width: 30px;
  height: 30px;
  border-radius: 7px;
}

.auth-brand-name {
  font-family: "Bricolage Grotesque", var(--font-heading);
  font-weight: 700;
  font-size: 1.0625rem;
  letter-spacing: -0.01em;
  color: #fff;
}

.auth-brand-name--dark {
  color: var(--text-primary);
}

.auth-brand-hero {
  padding-top: 1rem;
}

.auth-brand-headline {
  font-family: "Bricolage Grotesque", var(--font-heading);
  font-size: 2rem;
  font-weight: 700;
  line-height: 1.18;
  letter-spacing: -0.03em;
  color: #fff;
  margin: 0 0 1rem 0;
}

.auth-brand-tagline {
  font-size: 0.8125rem;
  line-height: 1.65;
  color: rgba(255, 255, 255, 0.5);
  margin: 0;
  max-width: 300px;
}

.auth-brand-pills {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.auth-brand-pill {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  padding: 0.5rem 0.75rem;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 8px;
  font-size: 0.8125rem;
  color: rgba(255, 255, 255, 0.75);
  font-weight: 500;
}

.auth-brand-pill i {
  font-size: 0.9rem;
  color: #14b8a6;
  flex-shrink: 0;
}

.auth-brand-stats {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  padding: 1rem 1.25rem;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 10px;
}

.auth-brand-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.125rem;
  flex: 1;
}

.auth-brand-stat-num {
  font-family: "Bricolage Grotesque", var(--font-heading);
  font-size: 1.375rem;
  font-weight: 700;
  color: #fff;
  line-height: 1;
}

.auth-brand-stat-label {
  font-size: 0.6875rem;
  color: rgba(255, 255, 255, 0.4);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.auth-brand-stat-divider {
  width: 1px;
  height: 28px;
  background: rgba(255, 255, 255, 0.1);
  flex-shrink: 0;
}

.auth-brand-footer {
  position: relative;
  z-index: 1;
  font-size: 0.6875rem;
  color: rgba(255, 255, 255, 0.3);
  margin: 0;
  padding-top: 1rem;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.auth-form-panel {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 2rem 1.5rem;
  background: var(--bg-base);
  position: relative;
  min-height: 100vh;
}

.auth-mobile-wordmark {
  display: none;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 2rem;
}

.auth-form-card {
  width: 100%;
  max-width: 420px;
  background: var(--bg-card);
  border: 1px solid #d1d5db;
  border-radius: 16px;
  padding: 2.25rem 2rem;
  box-shadow:
    0 4px 24px rgba(0, 0, 0, 0.06),
    0 1px 3px rgba(0, 0, 0, 0.04);
}

.auth-form-header {
  margin-bottom: 1.75rem;
}

.auth-form-title {
  font-family: "Bricolage Grotesque", var(--font-heading);
  font-size: 1.5rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--text-primary);
  margin: 0 0 0.375rem 0;
}

.auth-form-subtitle {
  font-size: 0.8125rem;
  color: var(--text-secondary);
  margin: 0;
}

.auth-alert {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  padding: 0.75rem 0.875rem;
  border-radius: 8px;
  font-size: 0.8125rem;
  line-height: 1.5;
  margin-bottom: 1.25rem;
  border: 1px solid transparent;
}

.auth-alert i {
  font-size: 1rem;
  flex-shrink: 0;
  margin-top: 1px;
}

.auth-alert--danger {
  background: #fef2f2;
  border-color: #fecaca;
  color: #991b1b;
}

.auth-alert--success {
  background: #f0fdf4;
  border-color: #bbf7d0;
  color: #166534;
}

.auth-field-group {
  margin-bottom: 1.125rem;
}

.auth-field-label-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.4375rem;
}

.auth-field-label {
  display: block;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 0.4375rem;
  letter-spacing: 0.01em;
}

.auth-field-label-row .auth-field-label {
  margin-bottom: 0;
}

.auth-field-wrap {
  position: relative;
  display: flex;
  align-items: center;
}

.auth-field-icon {
  position: absolute;
  left: 0.875rem;
  display: flex;
  align-items: center;
  color: var(--text-muted);
  font-size: 0.9375rem;
  pointer-events: none;
  z-index: 1;
}

.auth-field-input {
  width: 100%;
  height: 44px;
  padding: 0 2.75rem 0 2.5rem;
  font-family: var(--font-primary);
  font-size: 0.875rem;
  color: var(--text-primary);
  background: var(--bg-base);
  border: 1.5px solid var(--border);
  border-radius: 9px;
  outline: none;
  transition:
    border-color 0.18s,
    box-shadow 0.18s,
    background 0.18s;
  -webkit-appearance: none;
  appearance: none;
}

.auth-field-input::placeholder {
  color: var(--text-muted);
  font-size: 0.8125rem;
}

.auth-field-input:focus {
  border-color: var(--accent);
  background: var(--bg-card);
  box-shadow: 0 0 0 3px var(--accent-light);
}

.auth-field-input:hover:not(:focus) {
  border-color: #a1a1aa;
}

.auth-field-toggle {
  position: absolute;
  right: 0;
  top: 0;
  height: 44px;
  width: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  cursor: pointer;
  color: var(--text-muted);
  font-size: 0.9375rem;
  transition: color 0.15s;
  padding: 0;
}

.auth-field-toggle:hover {
  color: var(--text-primary);
}

body.dark-theme .auth-field-input {
  background: var(--bg-sec);
  color: var(--text-primary);
  border-color: var(--border);
}

body.dark-theme .auth-field-input:focus {
  background: var(--bg-card);
}

.auth-submit-btn {
  width: 100%;
  height: 46px;
  margin-top: 0.5rem;
  background: #0b0e13;
  color: #fff;
  border: none;
  border-radius: 9px;
  font-family: var(--font-primary);
  font-weight: 600;
  font-size: 0.875rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  letter-spacing: 0.01em;
  transition:
    background 0.18s,
    transform 0.15s,
    box-shadow 0.18s;
}

.auth-submit-btn:hover {
  background: #1a1d24;
  transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.22);
}

.auth-submit-btn:active {
  transform: translateY(0);
  box-shadow: none;
}

.auth-submit-arrow {
  display: flex;
  align-items: center;
  font-size: 0.9rem;
  opacity: 0.7;
  transition:
    transform 0.2s,
    opacity 0.2s;
}

.auth-submit-btn:hover .auth-submit-arrow {
  transform: translateX(3px);
  opacity: 1;
}

.auth-submit-btn--loading {
  opacity: 0.7;
  cursor: not-allowed;
}

.auth-submit-btn--loading .auth-submit-arrow {
  display: none;
}

.auth-form-footer {
  margin-top: 1.5rem;
  text-align: center;
  font-size: 0.8125rem;
  color: var(--text-secondary);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.375rem;
}

.auth-form-link {
  color: var(--accent);
  text-decoration: none;
  font-weight: 600;
  transition: color 0.15s;
}

.auth-form-link:hover {
  color: var(--accent-dark);
  text-decoration: underline;
}

.auth-form-divider {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin: 1.5rem 0 1rem;
  color: var(--text-muted);
  font-size: 0.6875rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

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

.auth-trust-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.25rem;
}

.auth-trust-item {
  display: flex;
  align-items: center;
  gap: 0.3125rem;
  font-size: 0.6875rem;
  color: var(--text-muted);
  font-weight: 500;
}

.auth-trust-item i {
  font-size: 0.75rem;
  color: #14b8a6;
}

body.dark-theme .auth-form-card {
  background: var(--bg-card);
  border-color: var(--border);
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.25);
}

body.dark-theme .auth-alert--danger {
  background: rgba(153, 27, 27, 0.15);
  border-color: rgba(239, 68, 68, 0.3);
  color: #fca5a5;
}

body.dark-theme .auth-alert--success {
  background: rgba(22, 101, 52, 0.15);
  border-color: rgba(34, 197, 94, 0.25);
  color: #86efac;
}

body.dark-theme .auth-submit-btn {
  background: #fff;
  color: #0b0e13;
}

body.dark-theme .auth-submit-btn:hover {
  background: #e4e4e7;
  box-shadow: 0 6px 20px rgba(255, 255, 255, 0.08);
}

body.dark-theme .auth-form-panel {
  background: var(--bg-base);
}

@media (max-width: 991px) {
  .auth-brand-panel {
    display: none;
  }

  .auth-mobile-wordmark {
    display: flex;
  }

  .auth-form-panel {
    justify-content: flex-start;
    padding-top: 3rem;
  }
}

@media (max-width: 480px) {
  .auth-form-card {
    padding: 1.75rem 1.25rem;
    border-radius: 12px;
  }

  .auth-trust-row {
    flex-direction: column;
    gap: 0.625rem;
  }
}

/* ==================================================================
   Misc Utilities
   ================================================================== */
.mono {
  font-family: monospace;
}

.hover-primary:hover {
  color: var(--color-accent) !important;
}

.admin-expense-progress-fill {
  width: 25.4%;
}

.badge-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  border-radius: 9px;
  background-color: var(--danger);
  color: #fff;
  font-size: 9px;
  font-weight: 500;
  padding: 0 4px;
}

@keyframes spin {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }
}

.spin-icon {
  display: inline-block;
  animation: spin 0.8s linear infinite;
}

/* Dark theme global misc */
body.dark-theme .teacher-card-header {
  background-color: var(--color-surface);
}

body.dark-theme .teacher-avatar-placeholder,
body.dark-theme .student-avatar-placeholder {
  background: linear-gradient(
    135deg,
    rgba(14, 165, 233, 0.12) 0%,
    rgba(14, 165, 233, 0.25) 150%
  );
  color: var(--accent);
}

/* Parents Module Specific Enhancements */
.badge.bg-light-info {
  background-color: #e0f2fe !important;
  color: #0284c7 !important;
}

.badge.bg-light-primary {
  background-color: var(--color-primary-light) !important;
  color: var(--color-primary) !important;
}

.shadow-sm-hover:hover {
  box-shadow:
    0 4px 6px -1px rgba(0, 0, 0, 0.1),
    0 2px 4px -1px rgba(0, 0, 0, 0.06) !important;
}

.border-light-hover:hover {
  border-color: var(--color-accent) !important;
}

.transition-all {
  transition: all 0.2s ease-in-out;
}

.text-xxs {
  font-size: 0.65rem !important;
}

/* ==================================================================
   Collect Fees Page Styles (Polished)
   ================================================================== */

/* Toolbar Container */
.fee-toolbar {
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: 1rem 1.25rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  box-shadow: var(--shadow-sm);
  margin-bottom: 1.5rem;
}

/* Toolbar Buttons Left Group */
.fee-toolbar-left {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
}

/* Funnel Button */
.fee-btn-funnel {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background-color: #f59e0b !important;
  border: none !important;
  color: #ffffff !important;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: var(--transition);
  font-size: 1.1rem;
}

.fee-btn-funnel:hover,
.fee-btn-funnel.active {
  background-color: #d97706 !important;
  box-shadow: 0 4px 12px rgba(245, 158, 11, 0.3);
}

/* Demand Bill Button (Outline Style) */
.fee-btn-demand-bill {
  height: 40px;
  padding: 0 1.25rem;
  border-radius: 10px;
  background-color: transparent !important;
  border: 1px solid var(--color-border) !important;
  color: var(--color-text-secondary) !important;
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: var(--text-xs);
  display: flex;
  align-items: center;
  gap: 0.5rem;
  cursor: pointer;
  transition: var(--transition);
}

.fee-btn-demand-bill:hover {
  background-color: var(--color-primary-light) !important;
  color: var(--color-primary) !important;
  border-color: var(--color-text-muted) !important;
}

/* View All / Outstanding Toggle Button */
.fee-btn-primary {
  height: 40px;
  padding: 0 1.25rem;
  border-radius: 10px;
  background-color: #2563eb !important;
  border: none !important;
  color: #ffffff !important;
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: var(--text-xs);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: var(--transition);
}

.fee-btn-primary:hover {
  background-color: #1d4ed8 !important;
  box-shadow: 0 4px 12px rgba(37, 99, 235, 0.25);
}

/* Outstanding Toggle Button */
.fee-btn-secondary {
  height: 40px;
  padding: 0 1.25rem;
  border-radius: 10px;
  background-color: transparent !important;
  border: 1px solid var(--color-border) !important;
  color: var(--color-text-secondary) !important;
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: var(--text-xs);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: var(--transition);
}

.fee-btn-secondary:hover {
  background-color: var(--color-primary-light) !important;
  color: var(--color-primary) !important;
}

/* Toolbar Right Group */
.fee-toolbar-right {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-left: auto;
}

@media (max-width: 768px) {
  .fee-toolbar-right {
    width: 100%;
    justify-content: space-between;
    margin-left: 0;
  }
}

/* Search Box Container */
.fee-search-container {
  display: flex;
  align-items: center;
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 10px;
  padding: 2px 4px 2px 12px;
  min-width: 320px;
  height: 40px;
  transition: var(--transition);
}

.fee-search-container:focus-within {
  border-color: #2563eb;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15);
}

.fee-search-container i {
  color: var(--color-text-muted);
  font-size: 1.1rem;
}

.fee-search-input {
  border: none !important;
  background-color: transparent !important;
  font-size: var(--text-xs) !important;
  font-family: var(--font-primary) !important;
  color: var(--color-text-primary) !important;
  padding: 6px 8px !important;
  width: 100%;
}

.fee-search-input:focus {
  outline: none !important;
  box-shadow: none !important;
}

.fee-search-btn {
  background-color: #2563eb !important;
  color: #ffffff !important;
  border: none !important;
  width: 32px;
  height: 32px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: var(--transition);
}

.fee-search-btn:hover {
  background-color: #1d4ed8 !important;
}

/* Green Total Badge */
.fee-total-badge {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  background-color: #f0fdf4 !important;
  border: 1px solid #bbf7d0 !important;
  color: #16a34a !important;
  font-size: var(--text-xs);
  font-weight: 600;
  font-family: var(--font-heading);
  padding: 0 1rem;
  height: 40px;
  border-radius: 10px;
  white-space: nowrap;
}

.fee-total-badge i {
  font-size: 1.1rem;
}

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

.fee-table th {
  background-color: var(--theme-table-thead-bg) !important;
}
/* Initials Avatar Placeholder (Rounded Square) */
.fee-avatar-placeholder {
  width: 44px;
  height: 44px;
  border-radius: 8px !important;
  background-color: #e0f2fe !important;
  color: #0284c7 !important;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: var(--text-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

body.dark-theme .fee-avatar-placeholder {
  background-color: rgba(2, 132, 199, 0.2) !important;
  color: #38bdf8 !important;
}

/* Student Information Block */
.fee-student-name {
  font-family: var(--font-heading);
  font-size: var(--text-sm);
  font-weight: 700;
  color: var(--color-primary);
  margin-bottom: 2px;
  display: inline-block;
}

.fee-student-name:hover {
  color: var(--color-accent);
}

.fee-student-meta {
  font-size: 11.5px;
  color: var(--color-text-secondary);
  line-height: 1.4;
}

.fee-student-meta strong {
  color: var(--color-text-primary);
  font-weight: 600;
}

/* Fees Breakdown Card */
.fee-breakdown-box {
  background-color: transparent !important;
  padding: 0 !important;
  border-radius: 0 !important;
  border: none !important;
  box-shadow: none !important;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  width: 100%;
  max-width: 260px;
}

.fee-breakdown-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 12px;
  padding-bottom: 0.25rem;
  border-bottom: 1px dashed #e2e8f0;
}

.fee-breakdown-row:last-child {
  border-bottom: none;
  padding-top: 0.25rem;
  border-top: 1px dashed #cbd5e1;
}

body.dark-theme .fee-breakdown-row {
  border-bottom-color: #334155;
}

body.dark-theme .fee-breakdown-row:last-child {
  border-top-color: #475569;
}

.fee-lbl {
  color: var(--color-text-secondary);
  font-weight: 500;
}

.fee-val {
  font-family: var(--font-heading);
  font-weight: 700;
  text-align: right;
}

.fee-val-total {
  color: #2563eb !important;
}

.fee-val-fine {
  color: #b45309 !important;
}

.fee-val-discount {
  color: #0891b2 !important;
}

.fee-val-paid {
  color: #16a34a !important;
}

.fee-val-balance {
  color: #dc2626 !important;
}

body.dark-theme .fee-val-total {
  color: #3b82f6 !important;
}

body.dark-theme .fee-val-fine {
  color: #f59e0b !important;
}

body.dark-theme .fee-val-discount {
  color: #22d3ee !important;
}

body.dark-theme .fee-val-paid {
  color: #4ade80 !important;
}

body.dark-theme .fee-val-balance {
  color: #f87171 !important;
}

/* Actions Group */
.fee-actions-container {
  display: flex;
  flex-direction: column;
  gap: 6px;
  width: 100%;
}

/* .fee-action-btn* removed - row actions use the single .table-btn-outline system in theme.css */

/* --- Download Demand Bill Modal Styles --- */
.demand-modal-label-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.5rem;
}

.demand-modal-label {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 13px;
  color: var(--color-primary);
  margin-bottom: 0;
}

.demand-select-all {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--color-text-secondary);
  display: flex;
  align-items: center;
  gap: 4px;
  cursor: pointer;
}

.demand-select-all input {
  cursor: pointer;
}

.demand-pill-box {
  background-color: #ffffff;
  border: 1px solid var(--color-border);
  border-radius: 8px;
  padding: 8px 12px;
  min-height: 44px;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
  transition: var(--transition);
}

body.dark-theme .demand-pill-box {
  background-color: var(--color-bg);
}

.demand-pill-box:focus-within {
  border-color: #2563eb;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15);
}

.demand-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background-color: #f1f5f9;
  border: 1px solid #cbd5e1;
  border-radius: 6px;
  padding: 4px 10px;
  font-size: 11.5px;
  font-weight: 600;
  color: var(--color-text-secondary);
  cursor: pointer;
  transition: all 0.15s;
  user-select: none;
}

body.dark-theme .demand-pill {
  background-color: #1e293b;
  border-color: #334155;
  color: #cbd5e1;
}

.demand-pill.active {
  background-color: #e0f2fe;
  border-color: #0284c7;
  color: #0284c7;
}

body.dark-theme .demand-pill.active {
  background-color: rgba(2, 132, 199, 0.2);
  border-color: #38bdf8;
  color: #38bdf8;
}

.demand-pill-close {
  font-size: 10px;
  opacity: 0.6;
  transition: opacity 0.15s;
}

.demand-pill:hover .demand-pill-close {
  opacity: 1;
}

/* Rich Text Editor Mockup Styles */
.demand-editor-container {
  border: 1px solid var(--color-border);
  border-radius: 8px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.demand-editor-toolbar {
  background-color: #f8fafc;
  border-bottom: 1px solid var(--color-border);
  padding: 6px 10px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

body.dark-theme .demand-editor-toolbar {
  background-color: #1e293b;
}

.demand-editor-select {
  font-size: 12.5px;
  font-weight: 600;
  border: 1px solid var(--color-border);
  border-radius: 4px;
  background-color: #ffffff;
  padding: 2px 6px;
  height: 24px;
  outline: none;
  color: var(--color-text-secondary);
}

body.dark-theme .demand-editor-select {
  background-color: var(--color-bg);
}

.demand-editor-btn-group {
  display: flex;
  align-items: center;
  border-right: 1px solid var(--color-border);
  padding-right: 8px;
  gap: 2px;
}

.demand-editor-btn-group:last-child {
  border-right: none;
  padding-right: 0;
}

.demand-editor-btn {
  background: none;
  border: none;
  width: 24px;
  height: 24px;
  border-radius: 4px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--color-text-secondary);
  font-size: 12px;
  cursor: pointer;
  transition: all 0.15s;
}

.demand-editor-btn:hover {
  background-color: var(--gray-200);
  color: var(--color-primary);
}

body.dark-theme .demand-editor-btn:hover {
  background-color: #334155;
}

.demand-editor-btn.active {
  background-color: #e2e8f0;
  color: var(--color-primary);
}

body.dark-theme .demand-editor-btn.active {
  background-color: #475569;
}

.demand-editor-textarea {
  border: none !important;
  outline: none !important;
  resize: vertical;
  padding: 12px;
  font-size: var(--text-xs);
  line-height: 1.5;
  color: var(--color-text-primary);
  min-height: 100px;
  background-color: #ffffff;
}

body.dark-theme .demand-editor-textarea {
  background-color: var(--color-surface);
}

/* --- Update Fees Structure Modal Styles --- */
.fees-details-table {
  background-color: #f8fafc;
  border-radius: 8px;
  padding: 12px 16px;
  border: 1px solid var(--color-border);
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 12px;
  font-size: 13px;
  color: var(--color-text-secondary);
}

@media (max-width: 992px) {
  .fees-details-table {
    grid-template-columns: repeat(2, 1fr);
  }
}

.fees-details-item strong {
  color: var(--color-text-primary);
  font-weight: 700;
}

.fees-received-table {
  background-color: #fdf2f8;
  border-radius: 8px;
  padding: 12px 16px;
  border: 1px solid #fbcfe8;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 12px;
  font-size: 13px;
  color: var(--theme-primary-dark);
}

body.dark-theme .fees-received-table {
  background-color: rgba(134, 25, 143, 0.1);
  border-color: rgba(134, 25, 143, 0.3);
  color: var(--theme-primary-light);
}

@media (max-width: 992px) {
  .fees-received-table {
    grid-template-columns: repeat(2, 1fr);
  }
}

.fees-received-item strong {
  font-weight: 700;
}

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

.fees-struct-table th {
  background-color: var(--theme-table-thead-bg) !important;
}
.fees-type-title {
  font-weight: 700;
  color: var(--color-text-primary);
  font-size: 14px;
  margin-bottom: 2px;
}

.fees-type-sub {
  font-size: 11.5px;
  color: var(--color-text-muted);
  line-height: 1.4;
}

.fees-input-small {
  height: 30px;
  border-radius: 6px;
  border: 1.5px solid var(--border);
  padding: 2px 8px;
  font-size: var(--text-xs);
  font-family: var(--font-primary);
  outline: none;
  background-color: var(--bg-card);
  color: var(--text-primary);
  width: 90px;
  transition: var(--transition);
}

body.dark-theme .fees-input-small {
  background-color: var(--bg-base);
  color: var(--text-primary);
  border-color: var(--border);
}

.fees-input-small::placeholder {
  color: var(--text-muted);
  font-size: var(--text-xs);
}

.fees-input-small:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-light);
}

.fees-input-small:disabled {
  background-color: var(--bg-sec);
  color: var(--text-muted);
  cursor: not-allowed;
}

body.dark-theme .fees-input-small:disabled {
  background-color: var(--gray-800);
}

.fees-select-small {
  height: 30px;
  border-radius: 6px;
  border: 1.5px solid var(--border);
  padding: 2px 4px;
  font-size: var(--text-xs);
  font-family: var(--font-primary);
  outline: none;
  background-color: var(--bg-card);
  color: var(--text-primary);
  width: 80px;
}

body.dark-theme .fees-select-small {
  background-color: var(--bg-base);
  color: var(--text-primary);
  border-color: var(--border);
}

.fees-badge-locked {
  display: block;
  font-size: 12.5px;
  color: #b45309;
  font-weight: 600;
  margin-top: 3px;
}

.fees-badge-paid {
  display: block;
  font-size: 12.5px;
  color: #16a34a;
  font-weight: 600;
  margin-top: 3px;
}

.fees-total-row-bg {
  background-color: var(--gray-100) !important;
  font-weight: 700;
}

body.dark-theme .fees-total-row-bg {
  background-color: var(--gray-200) !important;
}

.fees-struct-table tr:hover td {
  background-color: var(--accent-light) !important;
}

/* --- Collect Fees Modal Styles --- */
.collect-student-table,
.collect-fees-table {
  display: grid;
  border: 1px solid #d1d5db;
  border-radius: var(--radius-card);
  overflow: hidden;
  font-size: var(--text-sm);
  background-color: var(--bg-card);
}

body.dark-theme .collect-student-table,
body.dark-theme .collect-fees-table {
  background-color: var(--bg-card);
  border-color: var(--border);
}

.collect-student-table {
  grid-template-columns: 140px 1fr 120px 1fr;
}

.collect-fees-table {
  grid-template-columns: 100px 1fr 100px 1fr 100px 1fr;
}

.collect-cell-lbl {
  background-color: var(--gray-50);
  padding: 8px 12px;
  font-weight: 500;
  color: var(--text-secondary);
  border-right: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
}

body.dark-theme .collect-cell-lbl {
  background-color: var(--gray-100);
}

.collect-cell-val {
  padding: 8px 12px;
  color: var(--text-primary);
  border-right: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
}

/* remove bottom border from last row */
.collect-student-table .collect-cell-lbl:nth-last-child(-n + 4),
.collect-student-table .collect-cell-val:nth-last-child(-n + 4) {
  border-bottom: none;
}

.collect-fees-table .collect-cell-lbl:nth-last-child(-n + 6),
.collect-fees-table .collect-cell-val:nth-last-child(-n + 6) {
  border-bottom: none;
}

/* remove right border from last column */
.collect-student-table .collect-cell-val:nth-child(4n) {
  border-right: none;
}

.collect-fees-table .collect-cell-val:nth-child(6n) {
  border-right: none;
}

.fee-types-select-box {
  position: relative;
}

.fee-types-dropdown-menu {
  display: none;
  z-index: 1050;
  width: 100%;
  max-height: 250px;
  overflow-y: auto;
  background-color: #ffffff;
  border: 1px solid var(--color-border);
  border-radius: 8px;
  box-shadow: var(--shadow-lg);
  padding: 8px 12px;
}

body.dark-theme .fee-types-dropdown-menu {
  background-color: var(--color-surface);
}

.fee-type-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 8px;
  border-radius: 4px;
  cursor: pointer;
  font-size: 13px;
  transition: var(--transition);
}

.fee-type-item:hover {
  background-color: var(--color-primary-light);
}

.fee-type-item input {
  cursor: pointer;
}

/* --- Slide Tabs Navigation Controls --- */
.student-tabs-header {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
}

.student-tabs,
.teacher-tabs {
  scroll-behavior: smooth;
  flex-grow: 1;
  padding: 6px 42px !important;
  /* Make room for navigation carets */
}

.student-tabs::-webkit-scrollbar,
.teacher-tabs::-webkit-scrollbar {
  display: none !important;
  width: 0 !important;
  height: 0 !important;
}

.tab-scroll-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 28px;
  height: 28px;
  border: 1px solid var(--color-border) !important;
  background: var(--color-surface, #ffffff) !important;
  color: var(--color-text-secondary) !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  cursor: pointer;
  z-index: 10;
  transition: all 0.2s ease-in-out;
  opacity: 0;
  pointer-events: none;
  border-radius: 50% !important;
  box-shadow: var(--shadow-sm);
}

body.dark-theme .tab-scroll-btn {
  background: var(--color-surface, #1e293b) !important;
  color: var(--gray-300) !important;
  border-color: var(--color-border) !important;
}

.tab-scroll-btn.visible {
  opacity: 1;
  pointer-events: auto;
}

.tab-scroll-btn:hover {
  background: var(--color-accent) !important;
  color: #ffffff !important;
  border-color: var(--color-accent) !important;
  box-shadow: 0 4px 12px rgba(14, 165, 233, 0.2);
}

.tab-scroll-left {
  left: 24px;
}

.tab-scroll-right {
  right: 24px;
}

/* ==================================================================
   Font Mapping Rules -- Poppins (headings/labels) & Inter (data/body)
   ================================================================== */

/* -- Poppins: all headings, titles, labels, table headers, sidebar text, filters -- */
h1,
h2,
h3,
h4,
h5,
h6,
table th,
thead,
.thead-dark th,
.nav-tabs,
.nav-link,
.student-tabs,
.teacher-tabs,
label,
.form-label,
.form-label-admin,
.detail-box-label,
.att-stat-label,
.control-label,
.detail-section-title,
.teacher-section-title,
.doc-card-title,
.fees-type-title,
.wallets-title,
.auth-title,
.auth-info-title,
.auth-feature-title,
.modal-title,
.card-title,
.section-title,
.form-info-card-title,
.filter-label,
.sidebar-nav-item > span.nav-label,
.sidebar-nav-item > .nav-label,
.submenu-item > span,
.page-header-title,
.topbar-menu-pill .menu-item,
.btn-session-selector,
.btn-filter-table,
.btn-admin-action,
.btn-admin-submit,
.btn-admin-secondary,
.btn-admin-danger,
.fee-btn-primary,
.fee-btn-secondary,
.fee-btn-demand-bill,
.profile-name,
.brand-text,
.sidebar-brand-text,
.demand-modal-label,
.table-section-header,
.card-header h1,
.card-header h2,
.card-header h3,
.card-header h4,
.card-header h5,
.card-header h6,
[class*="-title"]:not([class*="ph-"]):not([class*="ti-"]),
[class*="-label"]:not([class*="ph-"]):not([class*="ti-"]),
[class*="-header"] h1,
[class*="-header"] h2,
[class*="-header"] h3,
[class*="-header"] h4,
[class*="-header"] h5,
[class*="-header"] h6 {
  font-family: var(--font-heading) !important;
}

/* -- Inter: all data, td cells, inputs, descriptions, paragraphs, meta text -- */
p,
span.detail-box-val,
table td,
.form-control,
.form-select,
.form-control-admin,
.form-control-custom,
.fee-search-input,
input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="tel"],
input[type="search"],
input[type="date"],
textarea,
select,
.text-muted,
.detail-box-val,
.att-stat-val,
.balance-value,
.metric-value,
.wallet-val,
.fee-student-meta,
.teacher-detail-email,
.teacher-detail-mobile,
.student-detail-email,
.student-detail-mobile,
.profile-email,
.auth-subtitle,
.auth-footer,
.auth-info-footer,
.auth-feature-desc,
.cell-counter,
.badge,
.status-pill,
.pagination-btn,
.pagination-num-btn,
.cc-number {
  font-family: var(--font-primary) !important;
}

/* -- CRITICAL: Protect icon fonts -- restore correct font-family for Phosphor & Tabler -- */

/* Phosphor icon font-family restores */
.ph,
.ph-regular,
i.ph,
i.ph-regular {
  font-family: "Phosphor" !important;
}

.ph-light,
i.ph-light {
  font-family: "Phosphor-Light" !important;
}

.ph-bold,
i.ph-bold {
  font-family: "Phosphor-Bold" !important;
}

.ph-fill,
i.ph-fill {
  font-family: "Phosphor-Fill" !important;
}

.ph-thin,
i.ph-thin {
  font-family: "Phosphor-Thin" !important;
}

.ph-duotone,
i.ph-duotone {
  font-family: "Phosphor-Duotone" !important;
}

/* Tabler icon font-family restore */
[class^="ti-"],
[class*=" ti-"],
i[class^="ti-"],
i[class*=" ti-"] {
  font-family: "tabler-icons" !important;
  font-style: normal;
}

.upload-doc-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  overflow: hidden;
  height: 170px;
  transition: all 0.2s ease-in-out;
}

.upload-doc-card:hover {
  border-color: var(--color-accent);
  box-shadow: var(--shadow-sm);
}

.upload-doc-zone {
  cursor: pointer;
  background-color: #ffffff;
  transition: background-color 0.2s ease-in-out;
}

.upload-doc-card.drag-over .upload-doc-zone {
  background-color: var(--color-accent-light);
}

.upload-doc-zone img {
  max-height: 90px;
  max-width: 100%;
  border-radius: 4px;
  object-fit: contain;
}

.upload-doc-prompt {
  line-height: 1.3;
}

.upload-doc-bar {
  background-color: #fcf6f4;
  border-top: 1px solid var(--color-border);
}

body.dark-theme .upload-doc-bar {
  background-color: var(--gray-800);
}

.upload-doc-btn {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: none;
  background-color: var(--color-accent);
  color: #ffffff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  cursor: pointer;
  transition: background-color 0.2s ease;
}

.upload-doc-btn:hover {
  background-color: var(--color-accent-hover);
}

.upload-doc-btn.btn-view {
  background-color: var(--color-success);
}

.upload-doc-btn.btn-view:hover {
  background-color: var(--color-success-light);
  color: var(--color-success);
}

.upload-doc-title {
  font-family: var(--font-heading) !important;
}

/* ==================================================================
   Fees Structure Report Page (fees-structure-report.php)
   ================================================================== */

/* -- Banner badges -------------------------------------------------- */
.fsr-banner-wrap {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.fsr-badge {
  display: inline-flex;
  align-items: center;
  padding: 0.35rem 0.85rem;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 600;
  font-family: var(--font-heading);
  white-space: nowrap;
  border: 1px solid transparent;
}

.fsr-badge-blue {
  background: #ffe5ec;
  color: #1d4ed8;
  border-color: #ffb3c1;
}

.fsr-badge-purple {
  background: #ede9fe;
  color: var(--theme-primary-dark);
  border-color: #ddd6fe;
}

.fsr-badge-green {
  background: #d1fae5;
  color: #065f46;
  border-color: #a7f3d0;
}

.fsr-badge-red {
  background: #fee2e2;
  color: #b91c1c;
  border-color: #fecaca;
}

.fsr-badge-teal {
  background: #ccfbf1;
  color: #0f766e;
  border-color: #99f6e4;
}

.fsr-badge-orange {
  background: #ffedd5;
  color: #c2410c;
  border-color: #fed7aa;
}

.fsr-badge-pink {
  background: #fce7f3;
  color: #9d174d;
  border-color: #fbcfe8;
}

.fsr-badge-indigo {
  background: var(--theme-indigo-bg);
  color: var(--theme-primary-dark);
  border-color: #c7d2fe;
}

body.dark-theme .fsr-badge-blue {
  background: rgba(29, 78, 216, 0.18);
  border-color: rgba(29, 78, 216, 0.35);
}

body.dark-theme .fsr-badge-purple {
  background: rgba(109, 40, 217, 0.18);
  border-color: rgba(109, 40, 217, 0.35);
}

body.dark-theme .fsr-badge-green {
  background: rgba(6, 95, 70, 0.2);
  border-color: rgba(6, 95, 70, 0.4);
}

body.dark-theme .fsr-badge-red {
  background: rgba(185, 28, 28, 0.18);
  border-color: rgba(185, 28, 28, 0.35);
}

body.dark-theme .fsr-badge-teal {
  background: rgba(15, 118, 110, 0.18);
  border-color: rgba(15, 118, 110, 0.35);
}

body.dark-theme .fsr-badge-orange {
  background: rgba(194, 65, 12, 0.18);
  border-color: rgba(194, 65, 12, 0.35);
}

body.dark-theme .fsr-badge-pink {
  background: rgba(157, 23, 77, 0.18);
  border-color: rgba(157, 23, 77, 0.35);
}

body.dark-theme .fsr-badge-indigo {
  background: rgba(55, 48, 163, 0.18);
  border-color: rgba(55, 48, 163, 0.35);
}

/* -- Summary / class tables ----------------------------------------- */
.fsr-table th {
  font-family: var(--font-heading) !important;
  font-size: var(--table-font-size-th) !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.04em !important;
  color: var(--theme-table-thead-color) !important;
  padding: var(--table-padding-th) !important;
  border-bottom: 1px solid var(--table-border-color) !important;
  background-color: var(--theme-table-thead-bg) !important;
  background-image: var(--table-head-grad) !important;
  white-space: nowrap;
}
/* Fee name link */
.fsr-fee-link {
  color: var(--color-accent) !important;
  font-size: 13.5px;
}

.fsr-fee-link:hover {
  color: var(--color-accent-hover) !important;
  text-decoration: underline !important;
}

/* Zero values – dimmed */
.fsr-zero {
  color: #94a3b8 !important;
}

/* Balance cell */
.fsr-balance-due {
  color: #dc2626 !important;
  font-weight: 700;
}

.fsr-balance-ok {
  color: #16a34a !important;
  font-weight: 700;
}

body.dark-theme .fsr-balance-due {
  color: #f87171 !important;
}

body.dark-theme .fsr-balance-ok {
  color: #4ade80 !important;
}

/* Total footer row */
.fsr-total-row td {
  background-color: var(--gray-100) !important;
  font-family: var(--font-heading) !important;
  font-size: var(--table-font-size-th) !important;
  border-top: 2px solid var(--table-border-color) !important;
  border-bottom: none !important;
  color: var(--text-primary) !important;
}

body.dark-theme .fsr-total-row td {
  background-color: var(--bg-subtle) !important;
}

/* -- Class table – two-row grouped header --------------------------- */

/* FEES TYPES sticky first-column header */
.fsr-th-fees-types {
  vertical-align: middle !important;
  min-width: 120px;
  background-color: var(--color-surface) !important;
  z-index: 2;
  white-space: nowrap;
}

/* Row-1 group header cells */
.fsr-th-group {
  font-family: var(--font-heading) !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  color: var(--color-accent) !important;
  border-left: 2px solid var(--color-border) !important;
  border-bottom: 1px solid var(--color-border) !important;
  padding: 0.5rem 0.75rem !important;
  white-space: nowrap;
  background-color: var(--color-surface) !important;
}

.fsr-th-group-session {
  color: #0f766e !important;
  background-color: #f0fdfa !important;
}

body.dark-theme .fsr-th-group-session {
  background-color: rgba(15, 118, 110, 0.1) !important;
  color: #2dd4bf !important;
}

/* Row-2 sub-column label cells */
.fsr-th-sub {
  font-family: var(--font-heading) !important;
  font-size: 10px !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.03em !important;
  color: #64748b !important;
  padding: 0.35rem 0.4rem !important;
  border-left: 1px solid var(--color-border) !important;
  border-bottom: 1px solid var(--color-border) !important;
  white-space: nowrap;
  min-width: 72px;
  background-color: #f8fafc !important;
}

body.dark-theme .fsr-th-sub {
  background-color: #1e293b !important;
}

/* Data cells in class table */
.fsr-class-cell {
  border-left: 1px solid var(--color-border) !important;
  font-size: 12.5px !important;
  min-width: 72px;
}

.fsr-class-name {
  font-size: 13px !important;
  color: var(--color-text-primary) !important;
  white-space: nowrap;
}

/* ==================================================================
   Student Fees Structure Page (student-fees-structure.php)
   ================================================================== */

/* -- Wide table scroll wrapper ------------------------------------- */
.sfs-table-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.sfs-table {
  min-width: max-content;
  border-collapse: separate;
  border-spacing: 0;
}

/* -- Sticky left columns ------------------------------------------- */
.sfs-th-sticky,
.sfs-td-sticky {
  position: sticky;
  background-color: var(--color-surface);
  z-index: 2;
}

.sfs-th-adm,
.sfs-td-adm {
  left: 0;
  min-width: 110px;
  max-width: 130px;
  border-right: 1px solid var(--color-border);
  box-shadow: 2px 0 4px rgba(0, 0, 0, 0.04);
}

.sfs-th-student,
.sfs-td-student {
  left: 120px;
  min-width: 220px;
  max-width: 250px;
  border-right: 2px solid var(--color-border);
  box-shadow: 3px 0 6px rgba(0, 0, 0, 0.06);
}

body.dark-theme .sfs-th-sticky,
body.dark-theme .sfs-td-sticky {
  background-color: var(--color-surface);
}

/* -- Column headers ------------------------------------------------ */
.sfs-table thead th {
  font-family: var(--font-heading) !important;
  font-size: var(--table-font-size-th) !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.04em !important;
  color: var(--theme-table-thead-color) !important;
  padding: var(--table-padding-th) !important;
  border-bottom: 1px solid var(--table-border-color) !important;
  background-color: var(--theme-table-thead-bg) !important;
  background-image: var(--table-head-grad) !important;
  white-space: nowrap;
  vertical-align: middle !important;
}

.sfs-th-fee {
  min-width: 130px;
  border-left: 1px solid var(--color-border) !important;
}

.sfs-th-session {
  min-width: 148px;
  background-color: #f0fdfa !important;
  color: #0f766e !important;
  border-left: 2px solid #99f6e4 !important;
}

body.dark-theme .sfs-th-session {
  background-color: rgba(15, 118, 110, 0.1) !important;
  color: #2dd4bf !important;
}

.sfs-th-total-fees {
  min-width: 110px;
  border-left: 2px solid var(--color-border) !important;
}

.sfs-th-actions {
  min-width: 80px;
}

/* -- Row & cell base ----------------------------------------------- */
.sfs-student-row td {
  padding: 0.75rem 0.75rem !important;
  vertical-align: top !important;
  border-bottom: 1px solid var(--color-border) !important;
}

.sfs-student-row:hover td {
  background-color: rgba(99, 102, 241, 0.025) !important;
}

.sfs-student-row:hover .sfs-th-sticky,
.sfs-student-row:hover .sfs-td-sticky {
  background-color: var(--color-surface) !important;
}

.sfs-td-fee {
  border-left: 1px solid var(--color-border) !important;
  vertical-align: top !important;
}

.sfs-td-session {
  border-left: 2px solid #99f6e4 !important;
  background-color: #fafffe !important;
}

body.dark-theme .sfs-td-session {
  background-color: rgba(15, 118, 110, 0.04) !important;
}

.sfs-td-total {
  border-left: 2px solid var(--color-border) !important;
  vertical-align: middle !important;
}

.sfs-td-actions {
  vertical-align: middle !important;
}

/* -- Avatar -------------------------------------------------------- */
.sfs-avatar {
  width: 38px;
  height: 38px;
  border-radius: 8px;
  object-fit: cover;
  flex-shrink: 0;
}

.sfs-avatar-placeholder {
  width: 38px;
  height: 38px;
  border-radius: 8px;
  background-color: #e0f2fe;
  color: #0284c7;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 13px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

body.dark-theme .sfs-avatar-placeholder {
  background-color: rgba(2, 132, 199, 0.2);
  color: #38bdf8;
}

/* -- Student info block -------------------------------------------- */
.sfs-student-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-size: 12px;
  color: var(--color-text-secondary);
  line-height: 1.4;
}

.sfs-student-name {
  font-family: var(--font-heading);
  font-size: 13px;
  font-weight: 700;
  color: var(--color-accent);
  text-decoration: none;
  margin-bottom: 2px;
}

.sfs-student-name:hover {
  color: var(--color-accent-hover);
  text-decoration: underline;
}

.sfs-student-info span strong {
  color: var(--color-text-primary);
  font-weight: 600;
}

/* -- Fee cell stack ------------------------------------------------ */
.sfs-fee-cell {
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-size: 11.5px;
}

.sfs-fee-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 6px;
  padding-bottom: 2px;
  border-bottom: 1px dashed rgba(148, 163, 184, 0.35);
}

.sfs-fee-row:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.sfs-balance-row {
  padding-top: 3px;
  border-top: 1px solid rgba(148, 163, 184, 0.3);
  border-bottom: none !important;
  margin-top: 2px;
}

.sfs-fee-lbl {
  color: var(--color-text-secondary);
  font-family: var(--font-heading);
  font-size: 11px;
  white-space: nowrap;
}

.sfs-fee-val {
  font-family: var(--font-heading);
  font-weight: 700;
  color: var(--color-text-primary);
  font-size: 11.5px;
  white-space: nowrap;
}

.sfs-val-fine {
  color: #b45309 !important;
}

.sfs-val-disc {
  color: #0891b2 !important;
}

.sfs-val-paid {
  color: #16a34a !important;
}

.sfs-val-due {
  color: #dc2626 !important;
}

.sfs-val-ok {
  color: #16a34a !important;
}

body.dark-theme .sfs-val-fine {
  color: #f59e0b !important;
}

body.dark-theme .sfs-val-disc {
  color: #22d3ee !important;
}

body.dark-theme .sfs-val-paid {
  color: #4ade80 !important;
}

body.dark-theme .sfs-val-due {
  color: #f87171 !important;
}

body.dark-theme .sfs-val-ok {
  color: #4ade80 !important;
}

/* N/A badge */
.sfs-na {
  color: #94a3b8;
  font-size: 11.5px;
  font-family: var(--font-heading);
  font-style: italic;
}

/* Total fees value */
.sfs-total-val {
  font-size: 14px;
  font-family: var(--font-heading);
  color: var(--color-accent);
}

/* -- Fees Settings page (modules/school/fees/fees-settings.php) -------- */
.settings-row-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 6px;
}

.settings-toggle-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 9px 0;
  border-bottom: 1px dashed var(--color-border);
}

.settings-toggle-row:last-child {
  border-bottom: none;
}

.settings-template-block {
  padding: 10px 14px;
  margin: 4px 0 4px;
  background-color: rgba(148, 163, 184, 0.06);
  border: 1px solid var(--color-border);
  border-radius: 8px;
}

body.dark-theme .settings-template-block {
  background-color: rgba(148, 163, 184, 0.08);
}

.template-preview-box {
  margin-top: 8px;
  padding: 12px 14px;
  background-color: #f3f4f6;
  border-radius: 8px;
  font-size: 12.5px;
  line-height: 1.6;
  color: var(--color-text-secondary);
}

body.dark-theme .template-preview-box {
  background-color: rgba(148, 163, 184, 0.1);
}

/* Mobile number tag input */
.mobile-tag-box {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  padding: 8px 10px;
  border: 1px solid var(--color-border);
  border-radius: 8px;
  background-color: #fff;
  cursor: text;
}

body.dark-theme .mobile-tag-box {
  background-color: transparent;
}

.mobile-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 8px;
  background-color: var(--color-accent);
  color: #fff;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
}

.mobile-tag-remove {
  cursor: pointer;
  font-size: 10px;
  opacity: 0.85;
}

.mobile-tag-remove:hover {
  opacity: 1;
}

.mobile-tag-input-field {
  flex: 1 1 140px;
  min-width: 140px;
  border: none;
  outline: none;
  font-size: 13px;
  padding: 4px 2px;
  background: transparent;
  color: var(--color-text-primary);
}

/* QR code upload preview */
.qr-upload-preview-box {
  position: relative;
  width: 64px;
  height: 64px;
  border: 1px solid var(--color-border);
  border-radius: 8px;
  overflow: visible;
  flex-shrink: 0;
}

.qr-upload-preview-box img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 8px;
}

.qr-remove-btn {
  position: absolute;
  top: -8px;
  right: -8px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background-color: #1f2937;
  color: #fff;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  cursor: pointer;
}

/* Payment modes tag input */
.payment-modes-tags-container {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  padding: 8px 10px;
  border: 1px solid var(--color-border);
  border-radius: 8px;
  background-color: #fff;
  min-height: 42px;
  margin-top: 8px;
}

body.dark-theme .payment-modes-tags-container {
  background-color: transparent;
}

.payment-mode-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 8px;
  background-color: #f1f5f9;
  color: #334155;
  border: 1px solid #cbd5e1;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
}

body.dark-theme .payment-mode-tag {
  background-color: #1e293b;
  color: #cbd5e1;
  border-color: #475569;
}

.payment-mode-tag-remove {
  cursor: pointer;
  font-weight: bold;
  font-size: 14px;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  background-color: rgba(0, 0, 0, 0.05);
  border-radius: 4px;
  color: #64748b;
  transition: all 0.2s;
}

.payment-mode-tag-remove:hover {
  background-color: rgba(239, 68, 68, 0.1);
  color: #ef4444;
}

body.dark-theme .payment-mode-tag-remove {
  background-color: rgba(255, 255, 255, 0.1);
  color: #94a3b8;
}

body.dark-theme .payment-mode-tag-remove:hover {
  background-color: rgba(239, 68, 68, 0.2);
  color: #f87171;
}

/* ==================================================================
   Dashboard Liquid Glassmorphic Theme & Layout Adjustments
   ================================================================== */

/* Glass Blob Backgrounds */
.dashboard-glass-container {
  position: relative;
  z-index: 1;
}

.glass-bg-blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(100px);
  opacity: 0.08;
  z-index: -1;
  pointer-events: none;
  transition: var(--transition);
}

.blob-primary {
  background: radial-gradient(
    circle,
    var(--theme-primary-hover) 0%,
    var(--theme-primary) 100%
  );
  width: 320px;
  height: 320px;
  top: 5%;
  left: 15%;
}

.blob-success {
  background: radial-gradient(circle, #10b981 0%, #0ea5e9 100%);
  width: 280px;
  height: 280px;
  bottom: 10%;
  right: 10%;
}

body.dark-theme .glass-bg-blob {
  opacity: 0.05;
}

/* Glassmorphism overrides for premium cards and metrics */
.dashboard-glass-container .card-premium,
.dashboard-glass-container .metric-card {
  background: rgba(255, 255, 255, 0.45);
  backdrop-filter: blur(16px) saturate(120%);
  -webkit-backdrop-filter: blur(16px) saturate(120%);
  border: 1px solid rgba(255, 255, 255, 0.6) !important;
  box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.04) !important;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  height: 100%;
}

.dashboard-glass-container .card-premium:hover,
.dashboard-glass-container .metric-card:hover {
  background: rgba(255, 255, 255, 0.6);
  border-color: rgba(99, 102, 241, 0.25) !important;
  box-shadow: 0 12px 40px 0 rgba(99, 102, 241, 0.08) !important;
  transform: translateY(-4px);
}

/* Dark mode glass overrides */
body.dark-theme .dashboard-glass-container .card-premium,
body.dark-theme .dashboard-glass-container .metric-card {
  background: rgba(17, 19, 34, 0.45);
  border: 1px solid rgba(255, 255, 255, 0.05) !important;
  box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.25) !important;
}

body.dark-theme .dashboard-glass-container .card-premium:hover,
body.dark-theme .dashboard-glass-container .metric-card:hover {
  background: rgba(17, 19, 34, 0.55);
  border-color: rgba(99, 102, 241, 0.2) !important;
  box-shadow: 0 12px 40px 0 rgba(0, 0, 0, 0.35) !important;
}

/* Metric Accent Glass */
.dashboard-glass-container .metric-card-accent {
  background: linear-gradient(
    135deg,
    rgba(99, 102, 241, 0.85) 0%,
    rgba(var(--theme-primary-rgb), 0.85) 100%
  ) !important;
  border: 1px solid rgba(255, 255, 255, 0.2) !important;
  box-shadow: 0 8px 32px 0 rgba(99, 102, 241, 0.15) !important;
}

.dashboard-glass-container .metric-card-accent:hover {
  background: linear-gradient(
    135deg,
    rgba(99, 102, 241, 0.95) 0%,
    rgba(var(--theme-primary-rgb), 0.95) 100%
  ) !important;
  box-shadow: 0 12px 40px 0 rgba(99, 102, 241, 0.25) !important;
}

/* Clean compact bottom content layout for metric cards */
.metric-bottom-content {
  margin-top: auto;
}

/* Glass Table Theme */
.dashboard-glass-container .table-premium {
  background: transparent !important;
  border-collapse: collapse;
}

.dashboard-glass-container .table-premium thead th {
  border-bottom: 1px solid var(--table-head-border) !important;
  color: var(--color-text-primary) !important;
  font-weight: 600 !important;
}

body.dark-theme .dashboard-glass-container .table-premium thead th {
  background: var(--theme-table-thead-bg) !important;
  background-image: var(--table-head-grad) !important;
  border-bottom: 1px solid var(--table-head-border) !important;
}

.dashboard-glass-container .table-premium tbody td {
  background: transparent !important;
  border-bottom: 1px solid rgba(0, 0, 0, 0.03) !important;
}

body.dark-theme .dashboard-glass-container .table-premium tbody td {
  border-bottom: 1px solid rgba(255, 255, 255, 0.03) !important;
}

.dashboard-glass-container .table-premium tbody tr:hover td {
  background-color: rgba(99, 102, 241, 0.02) !important;
}

body.dark-theme .dashboard-glass-container .table-premium tbody tr:hover td {
  background-color: rgba(255, 255, 255, 0.01) !important;
}

/* Utilities */
.text-white-50 {
  color: rgba(255, 255, 255, 0.5) !important;
}

.bg-white-20 {
  background-color: rgba(255, 255, 255, 0.15) !important;
}

.dashboard-chart-wrapper {
  position: relative;
  height: 260px;
  width: 100%;
}

/* Credit Card stack adjustments */
.cards-deck-wrapper {
  margin-top: 1rem;
}

.cards-deck {
  position: relative;
  width: 290px;
  height: 175px;
  margin: 0 auto;
}

.cc-card {
  width: 240px !important;
  height: 150px !important;
}

.cc-card-black {
  background: linear-gradient(
    135deg,
    rgba(26, 29, 36, 0.92) 0%,
    rgba(45, 51, 63, 0.85) 100%
  ) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  left: 0;
  top: 0;
  z-index: 3;
}

.cc-card-blue {
  background: linear-gradient(
    135deg,
    rgba(99, 102, 241, 0.85) 0%,
    rgba(var(--theme-primary-rgb), 0.8) 100%
  ) !important;
  border: 1px solid rgba(255, 255, 255, 0.15) !important;
  left: 50px !important;
  top: 20px !important;
  z-index: 2;
  opacity: 0.8;
  transform: scale(0.96);
}

.cc-card:hover {
  transform: translateY(-6px) scale(1.02) !important;
  z-index: 4 !important;
  opacity: 1 !important;
}

/* ==================================================================
   Unified Liquid Glassmorphism Core Design System Overrides
   ================================================================== */

/* Modern Glowing Page Blobs */
.glass-bg-blob {
  position: fixed;
  border-radius: 50%;
  filter: blur(140px);
  pointer-events: none;
  z-index: -2;
  transition: all 0.5s ease;
}

.blob-primary-glow {
  background: radial-gradient(
    circle,
    rgba(99, 102, 241, 0.16) 0%,
    rgba(var(--theme-primary-rgb), 0.08) 100%
  );
  width: 50vw;
  height: 50vw;
  top: -10vw;
  left: -10vw;
}

.blob-success-glow {
  background: radial-gradient(
    circle,
    rgba(16, 185, 129, 0.12) 0%,
    rgba(14, 165, 233, 0.06) 100%
  );
  width: 45vw;
  height: 45vw;
  bottom: -10vw;
  right: -10vw;
}

body.dark-theme .blob-primary-glow {
  background: radial-gradient(
    circle,
    rgba(99, 102, 241, 0.12) 0%,
    rgba(var(--theme-primary-rgb), 0.04) 100%
  );
}

body.dark-theme .blob-success-glow {
  background: radial-gradient(
    circle,
    rgba(16, 185, 129, 0.08) 0%,
    rgba(14, 165, 233, 0.03) 100%
  );
}

/* Premium Body mesh background */

body.dark-theme {
  background: radial-gradient(
    circle at 50% 50%,
    rgba(17, 19, 34, 0.3) 0%,
    rgba(9, 10, 16, 1) 100%
  ) !important;
}

/* Title text solid colors */
.font-heading,
h1,
h2,
h3,
.welcome-header h2 {
  color: var(--text-primary) !important;

  background: none !important;
  font-weight: 600 !important;
  letter-spacing: -0.02em !important;
}

body.dark-theme .font-heading,
body.dark-theme h1,
body.dark-theme h2,
body.dark-theme h3,
body.dark-theme .welcome-header h2 {
  color: var(--text-primary) !important;

  background: none !important;
}



body.dark-theme p,
body.dark-theme .text-muted,
body.dark-theme .text-xs,
body.dark-theme .text-xxs,
body.dark-theme .card-subtitle {
  color: rgba(241, 245, 249, 0.7) !important;
}

/* Glass Card Global Redesign */
.card-premium,
.metric-card,
.form-sidebar .card-premium {
  background: rgba(255, 255, 255, 0.45) !important;
  backdrop-filter: blur(20px) saturate(160%) !important;
  -webkit-backdrop-filter: blur(20px) saturate(160%) !important;
  border: 1px solid rgba(255, 255, 255, 0.6) !important;
  box-shadow:
    0 8px 32px 0 rgba(31, 38, 135, 0.03),
    inset 0 1px 0 0 rgba(255, 255, 255, 0.4) !important;
  border-radius: 8px !important;
  transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.card-premium:hover,
.metric-card:hover {
  background: rgba(255, 255, 255, 0.55) !important;
  border-color: rgba(99, 102, 241, 0.25) !important;
  box-shadow:
    0 12px 40px 0 rgba(99, 102, 241, 0.08),
    inset 0 1px 0 0 rgba(255, 255, 255, 0.5) !important;
  transform: translateY(-4px) scale(1.005);
}

body.dark-theme .card-premium,
body.dark-theme .metric-card,
body.dark-theme .form-sidebar .card-premium {
  background: rgba(17, 19, 34, 0.5) !important;
  border: 1px solid rgba(255, 255, 255, 0.05) !important;
  box-shadow:
    0 8px 32px 0 rgba(0, 0, 0, 0.2),
    inset 0 1px 0 0 rgba(255, 255, 255, 0.02) !important;
}

body.dark-theme .card-premium:hover,
body.dark-theme .metric-card:hover {
  background: rgba(17, 19, 34, 0.6) !important;
  border-color: rgba(99, 102, 241, 0.2) !important;
  box-shadow:
    0 12px 40px 0 rgba(0, 0, 0, 0.3),
    inset 0 1px 0 0 rgba(255, 255, 255, 0.04) !important;
}

/* Glass Forms & Inputs duplicate block removed (canonical definition is at the bottom) */

/* form-label-admin: see canonical definition in Shared Form Controls section above */

/* Premium CRM Sidebar Redesign */
.app-sidebar {
  background: #ffffff !important;
  border-right: 1px solid var(--border) !important;
  box-shadow: var(--shadow-sidebar) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

body.dark-theme .app-sidebar {
  background: var(--bg-sidebar) !important;
  border-right: 1px solid var(--border) !important;
  box-shadow: var(--shadow-sidebar) !important;
}

/* CRM Navigation Items */
.app-sidebar .sidebar-nav-item,
.app-layout.sidebar-expanded .app-sidebar .sidebar-nav-item,
.app-layout.mobile-sidebar-active .app-sidebar .sidebar-nav-item {
  height: 38px !important;
  border-radius: var(--radius-btn) !important;
  margin: 4px 10px !important;
  padding: 0 12px !important;
  display: flex !important;
  align-items: center !important;
  font-family: var(--font-heading) !important;
  font-size: var(--text-sm) !important;
  font-weight: 500 !important;
  color: var(--text-secondary) !important;
  transition: var(--transition) !important;
  border: none !important;
  background: transparent !important;
}

.app-sidebar .sidebar-nav-item:hover,
.app-layout.sidebar-expanded .app-sidebar .sidebar-nav-item:hover,
.app-layout.mobile-sidebar-active .app-sidebar .sidebar-nav-item:hover {
  background-color: var(--bg-sec) !important;
  color: var(--text-primary) !important;
  transform: none !important;
}

body.dark-theme .app-sidebar .sidebar-nav-item:hover,
body.dark-theme
  .app-layout.sidebar-expanded
  .app-sidebar
  .sidebar-nav-item:hover,
body.dark-theme
  .app-layout.mobile-sidebar-active
  .app-sidebar
  .sidebar-nav-item:hover {
  background-color: rgba(255, 255, 255, 0.05) !important;
  color: #ffffff !important;
}

/* Active menu item: Black/Indigo gradient (Light Mode) / Indigo gradient (Dark Mode) */
.app-sidebar .sidebar-nav-item.active,
.app-layout.sidebar-expanded .app-sidebar .sidebar-nav-item.active,
.app-layout.mobile-sidebar-active .app-sidebar .sidebar-nav-item.active {
  background: var(--theme-primary) !important;
  color: #ffffff !important;
  font-weight: 600 !important;
  box-shadow: 0 4px 12px rgba(26, 29, 46, 0.18) !important;
}

body.dark-theme .app-sidebar .sidebar-nav-item.active,
body.dark-theme
  .app-layout.sidebar-expanded
  .app-sidebar
  .sidebar-nav-item.active,
body.dark-theme
  .app-layout.mobile-sidebar-active
  .app-sidebar
  .sidebar-nav-item.active {
  background: rgba(56, 189, 248, 0.16) !important;
  color: var(--accent) !important;
  font-weight: 600 !important;
  border: 1px solid rgba(56, 189, 248, 0.3) !important;
  box-shadow: 0 4px 14px rgba(56, 189, 248, 0.2) !important;
}

.app-sidebar .sidebar-nav-item.active i,
.app-layout.sidebar-expanded .app-sidebar .sidebar-nav-item.active i,
.app-layout.mobile-sidebar-active .app-sidebar .sidebar-nav-item.active i {
  color: #ffffff !important;
}

body.dark-theme .app-sidebar .sidebar-nav-item.active i,
body.dark-theme
  .app-layout.sidebar-expanded
  .app-sidebar
  .sidebar-nav-item.active
  i,
body.dark-theme
  .app-layout.mobile-sidebar-active
  .app-sidebar
  .sidebar-nav-item.active
  i {
  color: var(--accent) !important;
}

/* Submenus floating links */
.sidebar-submenu a.submenu-item {
  font-family: var(--font-heading) !important;
  transition: all 0.25s ease !important;
}

.sidebar-submenu a.submenu-item:hover {
  background-color: rgba(99, 102, 241, 0.06) !important;
  color: var(--color-accent) !important;
  padding-left: 24px !important;
}

.sidebar-submenu a.submenu-item.active {
  background-color: rgba(99, 102, 241, 0.12) !important;
  color: var(--color-accent) !important;
  font-weight: 700 !important;
}

/* Quick Platform Operations Layout Adjustments */
.btn-outline-secondary {
  background: rgba(255, 255, 255, 0.35) !important;
  backdrop-filter: blur(8px) !important;
  border: 1px solid rgba(99, 102, 241, 0.1) !important;
  border-radius: 8px !important;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.btn-outline-secondary:hover {
  background: rgba(99, 102, 241, 0.05) !important;
  border-color: rgba(99, 102, 241, 0.3) !important;
  transform: translateY(-4px) scale(1.01) !important;
  box-shadow: 0 10px 25px rgba(99, 102, 241, 0.08) !important;
}

body.dark-theme .btn-outline-secondary {
  background: rgba(17, 19, 34, 0.45) !important;
  border-color: rgba(255, 255, 255, 0.05) !important;
}

body.dark-theme .btn-outline-secondary:hover {
  background: rgba(255, 255, 255, 0.02) !important;
  border-color: rgba(99, 102, 241, 0.2) !important;
}

/* STEP 7 — CUSTOM SCROLLBAR */

/* ==================================================================
   Antigravity Premium Visual Redesign & UI Fixes
   ================================================================== */

/* --- GLOW BLOBS REDESIGN --- */
/* Style glow blobs to be extremely subtle to avoid background oversaturation */
.glass-bg-blob {
  position: fixed;
  border-radius: 50%;
  filter: blur(140px) !important;
  pointer-events: none;
  z-index: -2;
}

.blob-primary-glow {
  background: radial-gradient(
    circle,
    rgba(200, 168, 0, 0.05) 0%,
    rgba(200, 168, 0, 0) 70%
  ) !important;
  width: 600px !important;
  height: 600px !important;
  top: -150px !important;
  left: -150px !important;
}

.blob-success-glow {
  background: radial-gradient(
    circle,
    rgba(16, 185, 129, 0.03) 0%,
    rgba(16, 185, 129, 0) 70%
  ) !important;
  width: 500px !important;
  height: 500px !important;
  bottom: -150px !important;
  right: -150px !important;
}

body.dark-theme .blob-primary-glow {
  background: radial-gradient(
    circle,
    rgba(244, 114, 182, 0.04) 0%,
    rgba(0, 0, 0, 0) 70%
  ) !important;
}

body.dark-theme .blob-success-glow {
  background: radial-gradient(
    circle,
    rgba(52, 211, 153, 0.02) 0%,
    rgba(0, 0, 0, 0) 70%
  ) !important;
}

/* Dashboard inner container blobs overrides */
.blob-primary {
  background: radial-gradient(
    circle,
    rgba(200, 168, 0, 0.05) 0%,
    rgba(0, 0, 0, 0) 70%
  ) !important;
}

.blob-success {
  background: radial-gradient(
    circle,
    rgba(16, 185, 129, 0.03) 0%,
    rgba(0, 0, 0, 0) 70%
  ) !important;
}

/* Body mesh background overrides (now merged into main body/body.dark-theme blocks) */

/* --- PAGE HEADINGS VISIBILITY & CONTRAST --- */
h1,
h2,
h3,
h4,
h5,
h6,
.font-heading,
.welcome-header h2 {
  color: var(--text-primary) !important;

  background: none !important;
  font-family: var(--font-heading) !important;
  font-weight: 600 !important;
  letter-spacing: -0.01em !important;
}

/* Map bootstrap .text-dark utility to primary text color to prevent invisible dark text in dark mode */
.text-dark {
  color: var(--text-primary) !important;
}

body.dark-theme .text-dark,
body.dark-theme h1.text-dark,
body.dark-theme h2.text-dark,
body.dark-theme h3.text-dark,
body.dark-theme h4.text-dark,
body.dark-theme h5.text-dark,
body.dark-theme h6.text-dark,
body.dark-theme .font-heading.text-dark {
  color: var(--text-primary) !important;
}

/* --- GLOBAL BOOTSTRAP BUTTON CLASS OVERRIDES --- */
/* ==================================================================
   UNIVERSAL UI SYSTEM - Canonical Component Library (Phase 18)
   Buttons, badges, forms, tables, modals, scrollbars, filters.
   All modules must use these classes. Do not redefine below.
   ================================================================== */

.btn {
  border-radius: var(--radius-btn) !important;
  font-family: var(--font-heading) !important;
  font-weight: 600 !important;
  font-size: var(--text-xs) !important;
  padding: 0.55rem 1.2rem !important;
  transition: all 0.2s ease !important;
}

/* Primary Submit Buttons */
form button[type="submit"],
form input[type="submit"],
.btn-primary,
.btn-admin-submit,
.btn-admin-action {
  background: var(--color-black) !important;
  color: var(--color-white) !important;
  border: none !important;
  border-radius: var(--radius-btn) !important;
  font-family: var(--font-heading) !important;
  font-weight: 600 !important;
  font-size: var(--text-xs) !important;
  padding: 0.55rem 1.2rem !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1) !important;
  transition: all 0.2s ease !important;
  height: auto !important;
}

form button[type="submit"]:hover,
form input[type="submit"]:hover,
.btn-primary:hover,
.btn-admin-submit:hover,
.btn-admin-action:hover {
  transform: translateY(-1.5px) !important;
  box-shadow: 0 6px 16px rgba(200, 168, 0, 0.3) !important;
  color: #ffffff !important;
}

/* Secondary Cancel / Neutral Buttons */
form
  button:not([type="submit"]):not(.btn-primary):not(.btn-success):not(
    .btn-danger
  ):not(.btn-warning):not(.swal2-confirm):not(.att-action-icon-btn):not(
    .action-btn
  ):not(.action-btn-view):not(.action-btn-edit):not(.action-btn-delete):not(
    .edit-student-btn
  ):not(.delete-student-btn):not(.edit-parent-btn):not(.delete-parent-btn):not(
    .edit-teacher-btn
  ):not(.delete-teacher-btn):not(.edit-stream-btn):not(.delete-stream-btn):not(
    .teacher-action-btn
  ):not(.teacher-header-btn):not(.table-btn-outline):not(.table-cell-title),
form input[type="button"],
.btn-secondary,
.btn-outline-secondary {
  background: rgba(0, 0, 0, 0.04) !important;
  color: var(--text-secondary) !important;
  border: 1px solid #d1d5db !important;
  border-radius: var(--radius-btn) !important;
  font-family: var(--font-heading) !important;
  font-weight: 600 !important;
  font-size: var(--text-xs) !important;
  padding: 0.55rem 1.2rem !important;
  transition: all 0.2s ease !important;
  box-shadow: none !important;
  height: auto !important;
}

body.dark-theme
  form
  button:not([type="submit"]):not(.btn-primary):not(.btn-success):not(
    .btn-danger
  ):not(.btn-warning):not(.swal2-confirm):not(.att-action-icon-btn):not(
    .action-btn
  ):not(.action-btn-view):not(.action-btn-edit):not(.action-btn-delete):not(
    .edit-student-btn
  ):not(.delete-student-btn):not(.edit-parent-btn):not(.delete-parent-btn):not(
    .edit-teacher-btn
  ):not(.delete-teacher-btn):not(.edit-stream-btn):not(.delete-stream-btn):not(
    .teacher-action-btn
  ):not(.teacher-header-btn):not(.table-btn-outline):not(.table-cell-title),
body.dark-theme form input[type="button"],
body.dark-theme .btn-secondary,
body.dark-theme .btn-outline-secondary {
  background: rgba(255, 255, 255, 0.04) !important;
  color: var(--text-secondary) !important;
  border: 1px solid #d1d5db !important;
}

form
  button:not([type="submit"]):not(.btn-primary):not(.btn-success):not(
    .btn-danger
  ):not(.btn-warning):not(.swal2-confirm):not(.att-action-icon-btn):not(
    .action-btn
  ):not(.action-btn-view):not(.action-btn-edit):not(.action-btn-delete):not(
    .edit-student-btn
  ):not(.delete-student-btn):not(.teacher-action-btn):not(.teacher-header-btn):not(.table-btn-outline):not(.table-cell-title):hover,
form input[type="button"]:hover,
.btn-secondary:hover,
.btn-outline-secondary:hover {
  background: rgba(0, 0, 0, 0.08) !important;
  color: var(--text-primary) !important;
  border-color: var(--text-secondary) !important;
  transform: translateY(-1px) !important;
}

body.dark-theme
  form
  button:not([type="submit"]):not(.btn-primary):not(.btn-success):not(
    .btn-danger
  ):not(.btn-warning):not(.swal2-confirm):not(.att-action-icon-btn):not(
    .action-btn
  ):not(.action-btn-view):not(.action-btn-edit):not(.action-btn-delete):not(
    .edit-student-btn
  ):not(.delete-student-btn):not(.teacher-action-btn):not(.teacher-header-btn):not(.table-btn-outline):not(.table-cell-title):hover,
body.dark-theme form input[type="button"]:hover,
body.dark-theme .btn-secondary:hover,
body.dark-theme .btn-outline-secondary:hover {
  background: rgba(255, 255, 255, 0.08) !important;
  color: var(--text-primary) !important;
  border-color: var(--text-secondary) !important;
}

.btn-success {
  background-color: rgba(16, 185, 129, 0.1) !important;
  color: #059669 !important;
  border: 1px solid rgba(16, 185, 129, 0.2) !important;
}

.btn-success:hover {
  background-color: #059669 !important;
  color: #ffffff !important;
  border-color: #059669 !important;
}

body.dark-theme .btn-success {
  background-color: rgba(52, 211, 153, 0.12) !important;
  color: #34d399 !important;
  border: 1px solid rgba(52, 211, 153, 0.2) !important;
}

body.dark-theme .btn-success:hover {
  background-color: #34d399 !important;
  color: #090708 !important;
}

.btn-danger {
  background-color: rgba(225, 29, 72, 0.08) !important;
  color: #e11d48 !important;
  border: 1px solid rgba(225, 29, 72, 0.2) !important;
}

.btn-danger:hover {
  background-color: #e11d48 !important;
  color: #ffffff !important;
  border-color: #e11d48 !important;
}

body.dark-theme .btn-danger {
  background-color: rgba(251, 113, 133, 0.1) !important;
  color: #fb7185 !important;
  border: 1px solid rgba(251, 113, 133, 0.2) !important;
}

body.dark-theme .btn-danger:hover {
  background-color: #fb7185 !important;
  color: #090708 !important;
}

.btn-warning {
  background-color: rgba(217, 119, 6, 0.08) !important;
  color: #d97706 !important;
  border: 1px solid rgba(217, 119, 6, 0.2) !important;
}

.btn-warning:hover {
  background-color: #d97706 !important;
  color: #ffffff !important;
  border-color: #d97706 !important;
}

body.dark-theme .btn-warning {
  background-color: rgba(251, 191, 36, 0.1) !important;
  color: #fbbf24 !important;
  border: 1px solid rgba(251, 191, 36, 0.2) !important;
}

body.dark-theme .btn-warning:hover {
  background-color: #fbbf24 !important;
  color: #090708 !important;
}

/* --- SOBER TOP HEADER GLASS CONTROLS --- */
/* Sidebar Toggle & Action Buttons Vibe */
#sidebarToggleBtn,
.btn-topbar-action {
  background: rgba(255, 255, 255, 0.4) !important;
  border: 1px solid rgba(15, 23, 42, 0.08) !important;
  border-radius: var(--radius-sm) !important;
  color: var(--text-secondary) !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 36px !important;
  height: 36px !important;
  backdrop-filter: blur(8px) saturate(120%) !important;
  -webkit-backdrop-filter: blur(8px) saturate(120%) !important;
  box-shadow:
    0 2px 6px rgba(15, 23, 42, 0.03),
    inset 0 1px 0 0 rgba(255, 255, 255, 0.5) !important;
  transition: all 0.2s ease !important;
}

body.dark-theme #sidebarToggleBtn,
body.dark-theme .btn-topbar-action {
  background: rgba(255, 255, 255, 0.04) !important;
  border-color: rgba(255, 255, 255, 0.08) !important;
  box-shadow:
    0 2px 6px rgba(0, 0, 0, 0.2),
    inset 0 1px 0 0 rgba(255, 255, 255, 0.02) !important;
}

#sidebarToggleBtn:hover,
.btn-topbar-action:hover {
  background: rgba(0, 0, 0, 0.03) !important;
  color: var(--accent) !important;
  border-color: var(--accent) !important;
  transform: scale(1.05) !important;
}

body.dark-theme #sidebarToggleBtn:hover,
body.dark-theme .btn-topbar-action:hover {
  background: rgba(244, 114, 182, 0.12) !important;
  color: var(--accent) !important;
  border-color: var(--accent) !important;
  transform: scale(1.05) !important;
}

/* Session Dropdown selector */
.btn-session-selector {
  background: rgba(0, 0, 0, 0.02) !important;
  color: var(--text-secondary) !important;
  border: 1px solid #d1d5db !important;
  border-radius: var(--radius-pill) !important;
}

body.dark-theme .btn-session-selector {
  background: rgba(255, 255, 255, 0.02) !important;
}

.btn-session-selector:hover {
  background: rgba(0, 0, 0, 0.03) !important;
  color: var(--accent) !important;
  border-color: var(--accent) !important;
}

.btn-session-selector i {
  color: var(--accent) !important;
}

/* Topbar Horizontal Menu Pill Tabs */
.topbar-menu-pill {
  background-color: rgba(0, 0, 0, 0.03) !important;
  border: 1px solid #d1d5db !important;
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
}

body.dark-theme .topbar-menu-pill {
  background-color: rgba(255, 255, 255, 0.02) !important;
}

.topbar-menu-pill .menu-item {
  color: var(--text-secondary) !important;
}

.topbar-menu-pill .menu-item:hover {
  color: var(--accent) !important;
}

.topbar-menu-pill .menu-item.active {
  background: var(--color-black) !important;
  color: var(--color-white) !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2) !important;
}

body.dark-theme .topbar-menu-pill .menu-item.active {
  background: var(--color-white) !important;
  color: var(--color-black) !important;
  box-shadow: 0 2px 8px rgba(255, 255, 255, 0.2) !important;
}

/* --- SIDEBAR ACTIVE/HOVER FIXES --- */
/* Unified active item styling for both collapsed and expanded states */
.app-sidebar .sidebar-nav-item.active {
  background: linear-gradient(
    135deg,
    #111111 0%,
    var(--theme-primary) 100%
  ) !important;
  color: #ffffff !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1) !important;
}

body.dark-theme .app-sidebar .sidebar-nav-item.active {
  background: var(--color-white) !important;
  color: var(--color-black) !important;
  box-shadow: 0 4px 12px rgba(255, 255, 255, 0.2) !important;
}

.app-sidebar .sidebar-nav-item.active i {
  color: var(--color-white) !important;
}

body.dark-theme .app-sidebar .sidebar-nav-item.active i {
  color: var(--color-black) !important;
}

/* Hover effect transitions for collapsed state sidebar items */
.app-sidebar .sidebar-nav-item {
  transition: var(--transition) !important;
}

.app-sidebar .sidebar-nav-item:hover {
  background-color: var(--bg-sec) !important;
  color: var(--text-primary) !important;
}

body.dark-theme .app-sidebar .sidebar-nav-item:hover {
  background-color: rgba(255, 255, 255, 0.05) !important;
  color: #ffffff !important;
}

/* Sidebar label & menu typography fixes */
.app-sidebar .sidebar-nav-item .nav-label {
  font-size: var(--text-sm) !important;
  font-weight: 500 !important;
  color: var(--text-secondary) !important;
}

.app-sidebar .sidebar-nav-item:hover .nav-label {
  color: var(--text-primary) !important;
}

.app-sidebar .sidebar-nav-item.active .nav-label {
  color: #ffffff !important;
  font-weight: 500 !important;
}

/* Submenus floating links */
.sidebar-submenu a.submenu-item {
  font-family: var(--font-heading) !important;
  font-weight: 500 !important;
  color: var(--text-secondary) !important;
  margin: 3px 12px 3px 20px !important;
  padding: 6px 12px 6px 20px !important;
  border-radius: var(--radius-btn) !important;
  transition: var(--transition) !important;
}

.sidebar-submenu a.submenu-item:hover {
  background-color: var(--bg-sec) !important;
  color: var(--text-primary) !important;
}

body.dark-theme .sidebar-submenu a.submenu-item:hover {
  background-color: rgba(255, 255, 255, 0.05) !important;
  color: #ffffff !important;
}

.sidebar-submenu a.submenu-item.active {
  background-color: var(--accent-light) !important;
  color: var(--accent) !important;
  font-weight: 500 !important;
}

body.dark-theme .sidebar-submenu a.submenu-item.active {
  background-color: rgba(0, 0, 0, 0.05) !important;
  color: var(--accent) !important;
}

/* --- UNIVERSAL LIQUID GLASS TABLES --- */
/* Redesign tables to integrate seamlessly with the CRM data-grid specs */






.table-premium tbody tr {
  background: transparent !important;
  transition: var(--transition) !important;
}


body.dark-theme .table-premium tbody tr:hover td {
  background-color: var(--bg-card-hover) !important;
}
/* EXPORT ACTION - Soft Indigo */
#exportCsvBtn,
#exportClassCsvBtn,
#exportStopCsvBtn,
[title*="Export"],
.action-export {
  background: rgba(99, 102, 241, 0.08) !important;
  color: var(--theme-primary-hover) !important;
  border: 1px solid rgba(99, 102, 241, 0.2) !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: var(--transition) !important;
}

#exportCsvBtn:hover,
#exportClassCsvBtn:hover,
#exportStopCsvBtn:hover,
[title*="Export"]:hover,
.action-export:hover {
  background: var(--theme-primary-hover) !important;
  color: #ffffff !important;
  border-color: var(--theme-primary-hover) !important;
}

body.dark-theme #exportCsvBtn,
body.dark-theme #exportClassCsvBtn,
body.dark-theme #exportStopCsvBtn,
body.dark-theme [title*="Export"],
body.dark-theme .action-export {
  background: var(--accent-light) !important;
  color: var(--accent) !important;
  border-color: var(--accent-light) !important;
}

body.dark-theme #exportCsvBtn:hover,
body.dark-theme #exportClassCsvBtn:hover,
body.dark-theme #exportStopCsvBtn:hover,
body.dark-theme [title*="Export"]:hover,
body.dark-theme .action-export:hover {
  background: var(--accent) !important;
  color: #0f1117 !important;
  border-color: var(--accent) !important;
}

/* Row Action Buttons (Fallback) */
.btn-row-action-fallback {
  color: var(--text-secondary) !important;
}

/* Premium Glassmorphic Badge Overrides */
.badge {
  font-family: var(--font-heading) !important;
  font-weight: 500 !important;
  font-size: var(--text-xxs) !important;
  padding: 3px 6px !important;
  border-radius: var(--radius-pill) !important;
  letter-spacing: 0.02em !important;
  box-shadow: none !important;
  display: inline-flex !important;
  align-items: center !important;
}

.bg-success {
  background-color: var(--color-success-light) !important;
  color: var(--color-success) !important;
  border: 1px solid rgba(16, 185, 129, 0.15) !important;
}

.bg-danger {
  background-color: var(--color-danger-light) !important;
  color: var(--color-danger) !important;
  border: 1px solid rgba(239, 68, 68, 0.15) !important;
}

.bg-warning {
  background-color: var(--color-warning-light) !important;
  color: var(--color-warning) !important;
  border: 1px solid rgba(245, 158, 11, 0.15) !important;
}

.bg-primary {
  background-color: var(--accent-light) !important;
  color: var(--accent) !important;
  border: 1px solid rgba(13, 148, 136, 0.15) !important;
}

.bg-info {
  background-color: var(--color-info-light) !important;
  color: var(--color-info) !important;
  border: 1px solid rgba(6, 182, 212, 0.15) !important;
}

.bg-secondary {
  background-color: var(--gray-100) !important;
  color: var(--text-secondary) !important;
  border: 1px solid #d1d5db !important;
}

body.dark-theme .bg-success {
  background-color: var(--color-success-light) !important;
  color: var(--color-success) !important;
  border: 1px solid rgba(16, 185, 129, 0.2) !important;
}

body.dark-theme .bg-danger {
  background-color: var(--color-danger-light) !important;
  color: var(--color-danger) !important;
  border: 1px solid rgba(239, 68, 68, 0.2) !important;
}

body.dark-theme .bg-warning {
  background-color: var(--color-warning-light) !important;
  color: var(--color-warning) !important;
  border: 1px solid rgba(245, 158, 11, 0.2) !important;
}

body.dark-theme .bg-primary {
  background-color: var(--accent-light) !important;
  color: var(--accent) !important;
  border: 1px solid rgba(45, 212, 191, 0.2) !important;
}

body.dark-theme .bg-info {
  background-color: var(--color-info-light) !important;
  color: var(--color-info) !important;
  border: 1px solid rgba(6, 182, 212, 0.2) !important;
}

body.dark-theme .bg-secondary {
  background-color: var(--gray-100) !important;
  color: var(--text-secondary) !important;
  border: 1px solid #d1d5db !important;
}

/* --- FORM CONTROLS & GLASS MORPHISM duplicate block removed (canonical definition is at the bottom) --- */

/* Ensure consistent form label spacing and alignment */
.form-label-admin {
  margin-bottom: 0.5rem !important;
  display: inline-block !important;
  font-size: var(--text-xs) !important;
  font-weight: 500 !important;
  color: var(--text-secondary) !important;
  text-transform: none !important;
  letter-spacing: normal !important;
}

/* Premium Checkboxes & Radio Buttons */
.form-check-input {
  cursor: pointer !important;
}

.form-check-input:checked {
  background-color: var(--accent) !important;
  border-color: var(--accent) !important;
}

.form-check-input:focus {
  border-color: var(--accent) !important;
  box-shadow: 0 0 0 3px var(--accent-light) !important;
}

/* Custom Toggle Switches inside Settings */
.settings-toggle-row .form-check-input[type="checkbox"] {
  appearance: none !important;
  -webkit-appearance: none !important;
  width: 38px !important;
  height: 20px !important;
  background-color: var(--gray-200) !important;
  border: 1px solid var(--gray-300) !important;
  border-radius: 20px !important;
  position: relative !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
  outline: none !important;
  display: inline-block !important;
}

body.dark-theme .settings-toggle-row .form-check-input[type="checkbox"] {
  background-color: var(--gray-100) !important;
  border-color: var(--gray-200) !important;
}

.settings-toggle-row .form-check-input[type="checkbox"]::after {
  content: "" !important;
  width: 14px !important;
  height: 14px !important;
  background-color: #ffffff !important;
  border-radius: 50% !important;
  position: absolute !important;
  top: 2px !important;
  left: 3px !important;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) !important;
}

.settings-toggle-row .form-check-input[type="checkbox"]:checked {
  background: var(--brand-gradient) !important;
  border-color: var(--accent) !important;
}

.settings-toggle-row .form-check-input[type="checkbox"]:checked::after {
  left: 19px !important;
}

/* Increase grid gutter gaps for form fields */
.card-body .row.g-3 {
  --bs-gutter-y: 1.5rem !important;
  /* Better spacing between inputs */
  --bs-gutter-x: 1.25rem !important;
}

.card-body .row.g-4 {
  --bs-gutter-y: 1.85rem !important;
  --bs-gutter-x: 1.5rem !important;
}

/* --- THEME TOGGLE SWITCH REDESIGN --- */
/* Liquid glass theme switcher pill */
.topbar-theme-toggle {
  background: rgba(0, 0, 0, 0.02) !important;
  border: 1px solid rgba(0, 0, 0, 0.04) !important;
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
  padding: 3px !important;
  width: 66px !important;
  height: 34px !important;
  border-radius: 99px !important;
}

body.dark-theme .topbar-theme-toggle {
  background: rgba(255, 255, 255, 0.02) !important;
  border-color: rgba(255, 255, 255, 0.05) !important;
}

.topbar-theme-toggle .theme-btn {
  width: 26px !important;
  height: 26px !important;
  border-radius: 50% !important;
  color: var(--text-secondary) !important;
}

.topbar-theme-toggle .theme-btn.active {
  background-color: #ffffff !important;
  color: var(--accent) !important;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1) !important;
}

body.dark-theme .topbar-theme-toggle .theme-btn.active {
  background-color: rgba(255, 255, 255, 0.08) !important;
  color: #ffffff !important;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3) !important;
}

/* --- SWEETALERT2 VISUAL THEMING & LOADER COLOR --- */
.swal2-popup {
  background: var(--bg-card) !important;
  color: var(--text-primary) !important;
  border: 1px solid #d1d5db !important;
  border-radius: 8px !important;
  backdrop-filter: blur(20px) !important;
  -webkit-backdrop-filter: blur(20px) !important;
  box-shadow: var(--shadow-lg) !important;
}

.swal2-title {
  color: var(--text-primary) !important;
  font-family: var(--font-heading) !important;
  font-size: var(--text-lg) !important;
}

.swal2-html-container {
  color: var(--text-secondary) !important;
  font-family: var(--font-primary) !important;
  font-size: var(--text-sm) !important;
}

.swal2-actions button {
  border-radius: var(--radius-btn) !important;
  font-family: var(--font-heading) !important;
  font-size: var(--text-xs) !important;
  font-weight: 600 !important;
  padding: 8px 16px !important;
}

.swal2-confirm.swal-btn-custom {
  background: var(--color-black) !important;
  color: var(--color-white) !important;
  border: none !important;
  box-shadow: 0 4px 12px rgba(200, 168, 0, 0.25) !important;
}

.swal2-confirm.swal-danger-btn-custom {
  background-color: var(--color-danger) !important;
  color: #ffffff !important;
  border: none !important;
  box-shadow: 0 4px 12px rgba(239, 68, 68, 0.25) !important;
}

.swal2-cancel.swal-cancel-btn-custom {
  background-color: rgba(0, 0, 0, 0.05) !important;
  color: var(--text-secondary) !important;
  border: 1px solid #d1d5db !important;
}

body.dark-theme .swal2-cancel.swal-cancel-btn-custom {
  background-color: rgba(255, 255, 255, 0.05) !important;
}

/* Force loading spinners to indigo accent */
.spinner-border.text-primary,
.spinner-border,
.spinner-grow,
.swal2-loader {
  color: var(--accent) !important;
  border-color: var(--accent) transparent var(--accent) transparent !important;
}

.spinner-border {
  border: 0.2em solid currentColor !important;
  border-right-color: transparent !important;
}

/* --- THINNER CLEANER ICONS STYLE --- */
.ti,
[class^="ti-"],
[class*=" ti-"],
[class^="ph-"],
[class*=" ph-"] {
  font-weight: 500 !important;
}

/* --- COMPACT SECTION SPACING & CONTAINER REDUCTIONS --- */
.content-area {
  padding: 1.25rem 1.5rem !important;
  /* Tighter padding for section area gaps */
}

.card-premium .card-header {
  padding: 0.95rem 1.25rem !important;
  /* Cleaner, tighter card headers */
}

.card-premium .card-body {
  padding: 1.25rem !important;
}

/* ============================================
   UI POLISH -- Pagination, Dropdowns, Badges,
   Sidebar spacing, Toggles, Action buttons
   ============================================ */

/* Pagination */
.pagination .page-link {
  border: 1px solid rgba(0, 0, 0, 0.05) !important;
  color: #6b6b80 !important;
  background: #ffffff !important;
  border-radius: 8px !important;
  margin: 0 2px !important;
  padding: 6px 13px !important;
  font-size: 13px !important;
  transition: all 0.2s ease !important;
}

.pagination .page-link:hover {
  background: #f0efff !important;
  color: var(--theme-primary) !important;
  border-color: var(--theme-primary) !important;
}

.pagination .page-item.active .page-link {
  background: var(--theme-primary) !important;
  border-color: var(--theme-primary) !important;
  color: #ffffff !important;
  font-weight: 500 !important;
  box-shadow: 0 3px 10px rgba(200, 168, 0, 0.3) !important;
}

.pagination .page-item.disabled .page-link {
  background: #f5f5f5 !important;
  color: #bbb !important;
  border-color: #eee !important;
}

/* Dropdown menus */
.dropdown-menu {
  border: 1px solid var(--glass-border) !important;
  border-radius: 12px !important;
  box-shadow: var(--glass-shadow) !important;
  padding: 6px !important;
  background: var(--glass-surface-strong) !important;
  backdrop-filter: var(--glass-blur) saturate(160%) !important;
  -webkit-backdrop-filter: var(--glass-blur) saturate(160%) !important;
}

.dropdown-item {
  border-radius: 8px !important;
  font-size: 13px !important;
  padding: 8px 12px !important;
  color: var(--text-primary) !important;
  transition: all 0.15s ease !important;
}

.dropdown-item:hover {
  background: var(--accent-light) !important;
  color: var(--accent) !important;
}

.dropdown-item.active,
.dropdown-item:active {
  background: var(--theme-primary) !important;
  color: #ffffff !important;
}

.dropdown-divider {
  border-color: rgba(200, 168, 0, 0.1) !important;
  margin: 4px 0 !important;
}

/* Table status badges -- soft pill style */

.badge.bg-success,
.badge-success {
  background: #dcfce7 !important;
  color: #15803d !important;
  border: 1px solid #bbf7d0 !important;
}

.badge.bg-danger,
.badge-danger {
  background: #fee2e2 !important;
  color: #dc2626 !important;
  border: 1px solid #fecaca !important;
}

.badge.bg-warning,
.badge-warning {
  background: #fef9c3 !important;
  color: #a16207 !important;
  border: 1px solid #fef08a !important;
}

.badge.bg-primary,
.badge-primary,
.badge.bg-info,
.badge-info {
  background: var(--theme-primary-light) !important;
  color: var(--theme-primary) !important;
  border: 1px solid #c4b5fd !important;
}

/* Sidebar sub-item spacing -- tighter */
.sidebar .sub-menu li,
.sidebar .collapse li,
.sidebar ul ul li {
  margin-bottom: 1px !important;
}

/* Checkbox accent color */
input[type="checkbox"] {
  accent-color: var(--theme-primary) !important;
}

/* Table action buttons -- see generalized .table-responsive td .btn-sm rules above (with view/edit/delete colors) */

/* Dark mode dropdown */
body.dark-theme .dropdown-menu {
  background: #1a1a2e !important;
  border-color: rgba(124, 115, 255, 0.18) !important;
}

body.dark-theme .dropdown-item {
  color: #e8e6ff !important;
}

body.dark-theme .dropdown-item:hover {
  background: rgba(124, 115, 255, 0.12) !important;
  color: #7c73ff !important;
}

body.dark-theme .pagination .page-link {
  background: #16162e !important;
  border-color: rgba(124, 115, 255, 0.18) !important;
  color: #9090b8 !important;
}

body.dark-theme .pagination .page-item.active .page-link {
  background: #7c73ff !important;
  border-color: #7c73ff !important;
  color: #ffffff !important;
}

/* ============================================
   END UI POLISH
   ============================================ */

/* ==================================================================
   Premium Liquid Glass SaaS Style -- Black, White & Green Balance
   Unified design with transparent liquid glass, blur effects,
   and high-contrast black active states.
   ================================================================== */

/* --- Page base: soft, slightly cool light background --- */
body {
  background: var(--bg-base) !important;
  background-image: var(--backdrop-mesh) !important;
  background-attachment: fixed !important;
}

body.dark-theme {
  background: var(--bg-base) !important;
  background-image: var(--backdrop-mesh) !important;
  background-attachment: fixed !important;
}

/* --- Liquid Glass Layout Elements --- */
.app-sidebar,
.app-topbar {
  background: var(--glass-bg) !important;
  backdrop-filter: var(--glass-blur) saturate(180%) !important;
  -webkit-backdrop-filter: var(--glass-blur) saturate(180%) !important;
  border-color: var(--glass-border) !important;
  box-shadow: var(--glass-shadow) !important;
}

.dashboard-card,
.content-area .card,
.modal-section-card,
.card-premium {
  background: var(--glass-bg) !important;
  backdrop-filter: var(--glass-blur) !important;
  -webkit-backdrop-filter: var(--glass-blur) !important;
  border: 1px solid var(--glass-border) !important;
  box-shadow: var(--glass-shadow) !important;
  border-radius: 16px !important;
}

/* --- Active States: Premium Black Style --- */
.app-sidebar .sidebar-nav-item.active,
.topbar-menu-pill .menu-item.active,
.sidebar-submenu .submenu-item.active,
.nav-link.active,
.pagination .page-item.active .page-link,
.dropdown-item.active {
  background: var(--color-black) !important;
  color: var(--color-white) !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2) !important;
  border-color: var(--color-black) !important;
}

.app-sidebar .sidebar-nav-item.active i,
.app-sidebar .sidebar-nav-item.active .nav-label,
.nav-link.active i {
  color: var(--color-white) !important;
}

/* --- Primary Actions: Black Background --- */
.btn-primary,
.btn-balance-action-primary {
  background: var(--color-black) !important;
  color: var(--color-white) !important;
  border: none !important;
  transition: all 0.3s ease !important;
}

.btn-primary:hover {
  background: #333333 !important;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
}

/* --- Green Accents: Success, Stats, and Highlights --- */
.badge-success,
.bg-success,
.status-dot.bg-success,
.teacher-status-badge.active {
  background: var(--color-green) !important;
  color: var(--color-white) !important;
  border: none !important;
  padding: 2px;
  display: inline-flex;
  border-radius: 8px;
}

.text-success {
  color: var(--color-green) !important;
}

.stat-value,
.highlight-text,
.key-action-accent,
.balance-value,
.metric-value,
.att-stat-val,
.count-num,
.fee-val-discount {
  color: var(--color-green) !important;
}

.status-completed,
.status-active,
.status-paid {
  color: var(--color-green) !important;
  font-weight: 600 !important;
}

.status-completed .status-dot,
.status-active .status-dot,
.status-paid .status-dot {
  background-color: var(--color-green) !important;
  box-shadow: 0 0 8px var(--color-green) !important;
}

/* --- Refined Glass Borders and Shadows --- */
* {
  border-color: var(--border);
}

.form-control,
.form-select {
  background: rgba(255, 255, 255, 0.5) !important;
  border: 1px solid var(--glass-border) !important;
  backdrop-filter: blur(4px) !important;
}

body.dark-theme .form-control,
body.dark-theme .form-select {
  background: rgba(0, 0, 0, 0.2) !important;
  color: var(--color-white) !important;
}

/* --- Remove Excessive Green --- */
.topbar-menu-pill,
.btn-session-selector,
.sidebar-nav-item:hover {
  background: rgba(0, 0, 0, 0.04) !important;
  color: var(--text-primary) !important;
}

body.dark-theme .topbar-menu-pill,
body.dark-theme .btn-session-selector,
body.dark-theme .sidebar-nav-item:hover {
  background: rgba(255, 255, 255, 0.05) !important;
}

.sidebar-nav-item:hover i {
  color: var(--color-black) !important;
}

body.dark-theme .sidebar-nav-item:hover i {
  color: var(--color-white) !important;
}

/* --- Modern Pill Toggle Switch: see unified definition in "Status Switch" section above --- */

/* ==================================================================
   Compact Sidebar + Thin Icon Refinement Pass
   Tighter spacing for nav items/submenus and refined active states
   to match the new thin (Phosphor-light) icon set. Loaded last to
   win the cascade over all earlier sidebar styling passes.
   ================================================================== */

/* Tighter vertical rhythm between top-level nav items */
.sidebar-body,
.app-layout.sidebar-expanded .app-sidebar .sidebar-body,
.app-layout.mobile-sidebar-active .app-sidebar .sidebar-body {
  gap: 0.15rem !important;
}

/* Compact nav item sizing */
.app-sidebar .sidebar-nav-item,
.app-layout.sidebar-expanded .app-sidebar .sidebar-nav-item,
.app-layout.mobile-sidebar-active .app-sidebar .sidebar-nav-item {
  height: 34px !important;
  margin: 1px 10px !important;
  padding: 0 10px !important;
  gap: 0.55rem !important;
  border-radius: 8px !important;
}

/* Thin icon sizing - consistent stroke weight, slightly tighter */
.app-sidebar .sidebar-nav-item i {
  font-size: 1.05rem !important;
}

.sidebar-nav-item .dropdown-arrow {
  font-size: 0.65rem !important;
}

/* Refined active pill - Premium Black Style */
.app-sidebar .sidebar-nav-item.active,
.app-layout.sidebar-expanded .app-sidebar .sidebar-nav-item.active,
.app-layout.mobile-sidebar-active .app-sidebar .sidebar-nav-item.active,
.sidebar-submenu a.submenu-item.active {
  background: var(--color-black) !important;
  color: var(--color-white) !important;
  font-weight: 600 !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2) !important;
}

.app-sidebar .sidebar-nav-item.active i,
.app-sidebar .sidebar-nav-item.active .nav-label,
.sidebar-submenu a.submenu-item.active i {
  color: var(--color-white) !important;
}

body.dark-theme .app-sidebar .sidebar-nav-item.active,
body.dark-theme .sidebar-submenu a.submenu-item.active {
  background: var(--color-white) !important;
  color: var(--color-black) !important;
}

body.dark-theme .app-sidebar .sidebar-nav-item.active i,
body.dark-theme .app-sidebar .sidebar-nav-item.active .nav-label,
body.dark-theme .sidebar-submenu a.submenu-item.active i {
  color: var(--color-black) !important;
}

/* Compact submenu wrapper */
.sidebar-submenu {
  margin: 0.15rem 0 !important;
  gap: 0.05rem !important;
  padding-left: 1.25rem !important;
}

/* Compact submenu items */
.sidebar-submenu a.submenu-item {
  margin: 1px 10px 1px 16px !important;
  padding: 5px 10px !important;
  border-radius: 6px !important;
  font-size: var(--text-xs) !important;
  gap: 0.45rem !important;
}

.sidebar-submenu a.submenu-item i {
  font-size: 0.95rem !important;
}

/* Refined submenu active state - soft indigo, matches top-level pill */
.sidebar-submenu a.submenu-item.active {
  background-color: rgba(200, 168, 0, 0.1) !important;
  color: var(--theme-primary) !important;
  font-weight: 600 !important;
  box-shadow: none !important;
  padding-left: 10px !important;
}

.sidebar-submenu a.submenu-item.active i {
  color: var(--theme-primary) !important;
}

body.dark-theme .sidebar-submenu a.submenu-item.active {
  background-color: rgba(124, 115, 255, 0.16) !important;
  color: #b3acff !important;
}

body.dark-theme .sidebar-submenu a.submenu-item.active i {
  color: #b3acff !important;
}

/* ==================================================================
   Admissions Module Styles (Settings & Print)
   ================================================================== */
.admission-settings-container {
  background-color: var(--bg-card);
  border-radius: var(--radius-card);
  border: 1px solid #d1d5db;
  box-shadow: var(--shadow-card);
  padding: 24px;
}

.admission-settings-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 24px;
}

.admission-settings-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  column-gap: 24px;
  row-gap: 12px;
  margin-bottom: 30px;
}

.admission-settings-item {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: var(--text-xs);
  font-family: var(--font-heading);
  font-weight: 500;
  color: var(--text-secondary);
}

.admission-settings-item input[type="checkbox"] {
  width: 16px;
  height: 16px;
  border-radius: 4px;
  border: 1px solid #d1d5db;
  cursor: pointer;
  transition: var(--transition);
}

.admission-settings-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 16px;
  border-top: 1px solid var(--border);
  background-color: var(--bg-base);
  margin: 0 -24px -24px -24px;
  padding: 16px 24px;
  border-bottom-left-radius: var(--radius-card);
  border-bottom-right-radius: var(--radius-card);
}

/* Print Page Layout & Media Print Query */
.admission-print-view {
  background-color: #ffffff !important;
  color: #000000 !important;
  font-family: "Space Grotesk", sans-serif;
  margin: 0;
  padding: 30px;
}

.admission-print-container {
  max-width: 850px;
  margin: 0 auto;
  background: #fff;
  padding: 40px;
  border: 1px solid #ddd;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.05);
  position: relative;
}

.admission-print-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-direction: column;
}

.admission-print-logo-section {
  display: flex;
  align-items: center;
  gap: 16px;
}

.admission-print-logo {
  max-height: 70px;
  object-fit: contain;
}

.admission-print-school-info h2 {
  margin: 0;
  font-size: 22px;
  font-weight: 800;
  text-transform: uppercase;
  color: #111;
}

.admission-print-school-info p {
  margin: 2px 0 0 0;
  font-size: 12px;
  color: #555;
}

.admission-print-photo-container {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.admission-print-photo-box {
  width: 120px;
  height: 145px;
  border: 2px dashed #999;
  background-color: #fafafa;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 11px;
  color: #777;
  text-align: center;
  padding: 10px;
  border-radius: 4px;
}

.admission-print-photo-box img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.admission-print-title {
  text-align: center;
  margin: 20px 0;
}

.admission-print-title h3 {
  display: inline-block;
  border-bottom: 2px solid #111;
  padding-bottom: 5px;
  text-transform: uppercase;
  font-weight: 800;
  font-size: 18px;
  margin: 0;
  letter-spacing: 1px;
}

.admission-print-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  column-gap: 30px;
  row-gap: 14px;
  margin-bottom: 50px;
}

.admission-print-field {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-size: 13px;
  line-height: 1.6;
  border-bottom: 1px dotted #ccc;
  padding-bottom: 4px;
}

.admission-print-field .field-label {
  font-weight: 600;
  color: #333;
  padding-right: 10px;
  white-space: nowrap;
}

.admission-print-field .field-value {
  color: #111;
  text-align: right;
  word-break: break-word;
}

.admission-print-signatures {
  display: flex;
  justify-content: space-between;
  margin-top: 80px;
}

.admission-print-sig-line {
  border-top: 1px solid #111;
  width: 200px;
  text-align: center;
  padding-top: 8px;
  font-size: 12px;
  font-weight: 600;
  color: #444;
}

@media print {
  body.admission-print-view {
    padding: 0;
  }

  .admission-print-container {
    border: none;
    box-shadow: none;
    padding: 0;
    max-width: 100%;
  }

  .no-print {
    display: none !important;
  }
}

/* Admissions Button Refinements */
.btn-info-premium {
  background: var(--color-info) !important;
  color: var(--color-white) !important;
  border: none !important;
  border-radius: var(--radius-btn) !important;
  transition: all 0.3s ease !important;
  font-family: var(--font-heading) !important;
  font-weight: 600 !important;
  font-size: var(--text-xs) !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  height: 38px !important;
  padding: 0 16px !important;
  text-decoration: none !important;
}

.btn-info-premium:hover {
  background: #2563eb !important;
  color: var(--color-white) !important;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(59, 130, 246, 0.25) !important;
}

.btn-secondary-premium {
  background: var(--bg-sec) !important;
  color: var(--text-secondary) !important;
  border: 1px solid #d1d5db !important;
  border-radius: var(--radius-btn) !important;
  transition: all 0.3s ease !important;
  font-family: var(--font-heading) !important;
  font-weight: 600 !important;
  font-size: var(--text-xs) !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  height: 38px !important;
  padding: 0 16px !important;
  text-decoration: none !important;
}

.btn-secondary-premium:hover {
  background: var(--color-border) !important;
  color: var(--text-primary) !important;
  transform: translateY(-1px);
}

.btn-back-premium {
  width: 32px !important;
  height: 32px !important;
  border-radius: var(--radius-xs) !important;
  border: 1px solid #d1d5db !important;
  background-color: var(--bg-card) !important;
  color: var(--text-secondary) !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  transition: all 0.2s !important;
  text-decoration: none !important;
}

.btn-back-premium:hover {
  background-color: var(--bg-sec) !important;
  color: var(--text-primary) !important;
  transform: translateX(-2px);
}

.admission-toggle-checkbox {
  width: 16px !important;
  height: 16px !important;
  cursor: pointer !important;
}

.table-responsive td a.btn-print {
  background: #f4f4fa !important;
  color: var(--color-info) !important;
  border: none !important;
}

.table-responsive td a.btn-print:hover {
  background: var(--color-info) !important;
  color: #fff !important;
}

.table-responsive td a.btn-download {
  background: #f4f4fa !important;
  color: var(--color-success) !important;
  border: none !important;
}

.table-responsive td a.btn-download:hover {
  background: var(--color-success) !important;
  color: #fff !important;
}

/* Admissions Module Inline CSS Cleanup Helpers */
.admission-print-logo-placeholder {
  width: 50px;
  height: 50px;
  background-color: #333;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-weight: bold;
}

.admissions-table-header {
  background-image: var(--table-head-grad) !important;
}

.admissions-table-header th {
  background-color: transparent !important;
}

body.dark-theme .admissions-table-header {
  background-image: var(--table-head-grad) !important;
}

body.dark-theme .admissions-table-header th {
  background-color: transparent !important;
  background-image: none !important;
}

.th-w-60 {
  width: 60px !important;
}

.th-w-90 {
  width: 90px !important;
}


.th-w-110 {
  width: 110px !important;
}


.th-w-140 {
  width: 140px !important;
}

.cursor-pointer {
  cursor: pointer !important;
}

/* Dynamic Pagination Buttons Styling */
.dt-pag-btn {
  font-size: var(--text-xs) !important;
  border-radius: 4px !important;
  border: 1px solid var(--color-border) !important;
  background: var(--color-surface) !important;
  color: var(--color-text-secondary) !important;
  font-weight: 500 !important;
}

.dt-pag-btn.active {
  background-color: var(--color-primary) !important;
  color: #fff !important;
  border-color: var(--color-primary) !important;
}

body.dark-theme .dt-pag-btn {
  border-color: var(--border) !important;
  background-color: var(--bg-card-hover) !important;
  color: var(--text-secondary) !important;
}

body.dark-theme .dt-pag-btn.active {
  background-color: var(--color-primary) !important;
  color: #fff !important;
  border-color: var(--color-primary) !important;
}

/* Student and Migration module utilities */
.table-search-box input.table-search-input {
  height: 34px;
  padding-top: 0;
  padding-bottom: 0;
}

.migrate-students-list-container {
  max-height: 220px;
}

.th-w-46 {
  width: 46px;
}

.th-w-50 {
  width: 50px;
}

.th-w-80 {
  width: 80px;
}

.th-w-100 {
  width: 100px !important;
}

.th-w-120 {
  width: 120px !important;
}

/* Modal Body Header Overrides & Consistent Form Layout Styles */
.modal-body h6.text-success {
  font-size: 11.5px !important;
  text-transform: uppercase !important;
  letter-spacing: 0.07em !important;
  color: var(--color-green) !important;
  border-left: 3px solid var(--color-green) !important;
  padding-left: 10px !important;
  margin-top: 0 !important;
  margin-bottom: 14px !important;
  border-bottom: none !important;
  font-weight: 700 !important;
  background: transparent !important;
  display: block !important;
  border-radius: 0 !important;
}

.modal-body h6.text-secondary {
  font-size: 11.5px !important;
  text-transform: uppercase !important;
  letter-spacing: 0.07em !important;
  color: var(--color-text-secondary) !important;
  border-left: 3px solid var(--color-text-secondary) !important;
  padding-left: 10px !important;
  margin-top: 0 !important;
  margin-bottom: 14px !important;
  border-bottom: none !important;
  font-weight: 700 !important;
  background: transparent !important;
  display: flex !important;
  border-radius: 0 !important;
  align-items: center;
  justify-content: space-between;
}

.whatsapp-link {
  color: #22c55e !important;
  text-decoration: none !important;
  font-weight: 600 !important;
}

.whatsapp-link:hover {
  color: #16a34a !important;
  text-decoration: underline !important;
}

/* Compact Table Form Controls for Bulk Edit */
.table-premium input.form-control-table,
.table-premium select.form-control-table {
  padding: 4px 8px !important;
  font-size: var(--text-xs) !important;
  height: 28px !important;
  border-radius: var(--radius-xs) !important;
  border: 1.5px solid var(--border) !important;
  background-color: var(--bg-base) !important;
  color: var(--text-primary) !important;
  width: 100%;
  outline: none;
  font-family: var(--font-primary);
  transition: var(--transition);
}

.table-premium input.form-control-table::placeholder,
.table-premium select.form-control-table::placeholder {
  color: var(--text-muted);
  font-size: var(--text-xs);
}

.table-premium input.form-control-table:focus,
.table-premium select.form-control-table:focus {
  border-color: var(--accent) !important;
  background-color: var(--bg-card) !important;
  box-shadow: 0 0 0 3px var(--accent-light) !important;
}

body.dark-theme .table-premium input.form-control-table,
body.dark-theme .table-premium select.form-control-table {
  background-color: var(--bg-sec) !important;
  border-color: var(--border) !important;
  color: var(--text-primary) !important;
}

body.dark-theme .table-premium input.form-control-table:focus,
body.dark-theme .table-premium select.form-control-table:focus {
  background-color: var(--bg-card) !important;
}

.form-control-table-xs {
  width: 80px !important;
  min-width: 80px !important;
}

.form-control-table-sm {
  width: 120px !important;
  min-width: 120px !important;
}

.form-control-table-md {
  width: 170px !important;
  min-width: 170px !important;
}

.form-control-table-lg {
  width: 230px !important;
  min-width: 230px !important;
}

/* My Profile Custom Sidebar Nav-Pills Styling */
.profile-tabs-nav .nav-link {
  text-align: left;
  border-radius: 0 !important;
  padding: 14px 20px !important;
  font-size: var(--text-sm) !important;
  font-weight: 600 !important;
  color: var(--text-secondary) !important;
  background: transparent !important;
  border: none !important;
  border-bottom: 1px solid var(--border) !important;
  position: relative !important;
  transition: var(--transition) !important;
}

.profile-tabs-nav .nav-link:last-child {
  border-bottom: none !important;
}

.profile-tabs-nav .nav-link:hover {
  background: var(--accent-light) !important;
  color: var(--theme-primary) !important;
}

.profile-tabs-nav .nav-link.active {
  background: var(--theme-primary) !important;
  color: #fff !important;
}

.profile-tabs-nav .nav-link.active::after {
  content: "";
  position: absolute;
  right: -8px;
  top: 50%;
  transform: translateY(-50%);
  width: 0;
  height: 0;
  border-top: 8px solid transparent;
  border-bottom: 8px solid transparent;
  border-left: 8px solid var(--theme-primary);
  z-index: 10;
}

body.dark-theme .profile-tabs-nav .nav-link {
  border-color: var(--border) !important;
  color: var(--text-secondary) !important;
}

body.dark-theme .profile-tabs-nav .nav-link:hover {
  background: var(--accent-light) !important;
  color: var(--text-primary) !important;
}

body.dark-theme .profile-tabs-nav .nav-link.active {
  background: var(--theme-primary) !important;
  color: #fff !important;
}

body.dark-theme .profile-tabs-nav .nav-link.active::after {
  border-left-color: var(--theme-primary);
}

/* Student ID Card Printing Isolation Styles */
@media print {
  body.printing-student-idcard > *:not(#print-id-card-container) {
    display: none !important;
  }

  body.printing-student-idcard #print-id-card-container {
    display: block !important;
    position: absolute !important;
    left: 50% !important;
    top: 30px !important;
    transform: translateX(-50%) !important;
    margin: 0 !important;
    padding: 0 !important;
    width: 320px !important;
    max-width: 100% !important;
  }

  body.printing-student-idcard #print-id-card-container .id-card-landscape {
    width: 460px !important;
    max-width: 100% !important;
  }

  body.printing-student-idcard .student-id-card {
    box-shadow: none !important;
    border: 1.5px solid #0f172a !important;
    height: auto !important;
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
  }

  body.printing-student-idcard .id-card-header {
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
  }

  body.printing-student-idcard .id-card-barcode-lines {
    background: repeating-linear-gradient(
      90deg,
      #000,
      #000 2px,
      transparent 2px,
      transparent 4px,
      #000 4px,
      #000 5px,
      transparent 5px,
      transparent 7px
    ) !important;
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
  }
}

/* --- Fixes for badge, table column and action button icon color issues --- */
.table-responsive td a.btn i.text-white {
  color: inherit !important;
}



.table-responsive td a.btn:has(.ph-cloud-arrow-down) {
  color: var(--color-success) !important;
}

.table-responsive td a.btn:has(.ph-cloud-arrow-down):hover {
  background: var(--color-success) !important;
  color: #fff !important;
}

/* ==================================================================
   Dashboard Revamp Styles -- Tabs, Timeline, Progress Elements
   ================================================================== */
.dashboard-tabs-wrapper {
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  padding: 6px;
  border-radius: var(--radius-lg);
  display: inline-flex;
  box-shadow: var(--glass-shadow);
}

.dashboard-tabs {
  border: none !important;
  display: flex;
  gap: 4px;
}

.dashboard-tabs .nav-link {
  border: none !important;
  background: transparent !important;
  color: var(--text-secondary) !important;
  font-weight: 600;
  font-size: var(--text-xs);
  padding: 10px 20px !important;
  border-radius: var(--radius-md) !important;
  transition: var(--transition);
  display: flex;
  align-items: center;
  gap: 8px;
}

.dashboard-tabs .nav-link:hover {
  color: var(--text-primary) !important;
  background: rgba(0, 0, 0, 0.03) !important;
}

.dashboard-tabs .nav-link.active {
  background: var(--theme-primary) !important;
  color: var(--color-white) !important;
  box-shadow: var(--theme-glow);
}

body.dark-theme .dashboard-tabs .nav-link.active {
  background: var(--color-white) !important;
  color: var(--color-black) !important;
}

body.dark-theme .dashboard-tabs .nav-link:hover {
  background: rgba(255, 255, 255, 0.05) !important;
}

/* Progress Bars */
.progress-bar-light {
  height: 8px;
  width: 100%;
  background: var(--gray-100);
  border-radius: var(--radius-pill);
  overflow: hidden;
  position: relative;
}

body.dark-theme .progress-bar-light {
  background: var(--gray-800);
}

.progress-fill-green {
  height: 100%;
  border-radius: var(--radius-pill);
  background: linear-gradient(90deg, #22c55e 0%, #4ade80 100%);
  transition: width 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

.progress-fill-red {
  height: 100%;
  border-radius: var(--radius-pill);
  background: linear-gradient(90deg, #ef4444 0%, #f87171 100%);
  transition: width 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Activity Tabs */
.activity-tabs {
  background: var(--gray-100);
  padding: 4px;
  border-radius: var(--radius-md);
  display: flex;
  gap: 2px;
}

body.dark-theme .activity-tabs {
  background: var(--gray-800);
}

.activity-tabs .nav-link {
  border: none !important;
  background: transparent !important;
  color: var(--text-secondary) !important;
  font-weight: 600;
  font-size: var(--text-xxs);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  padding: 6px 12px !important;
  border-radius: var(--radius-sm) !important;
  transition: var(--transition);
}

.activity-tabs .nav-link:hover {
  color: var(--text-primary) !important;
}

.activity-tabs .nav-link.active {
  background: var(--color-white) !important;
  color: var(--text-primary) !important;
  box-shadow: var(--shadow-sm);
}

body.dark-theme .activity-tabs .nav-link.active {
  background: var(--bg-card) !important;
  color: var(--color-white) !important;
}

/* ==================================================================
   Dashboard Compact Segmented Tab Switcher
   ================================================================== */
.db-seg-tabs {
  display: inline-flex;
  align-items: center;
  background: var(--color-surface);
  border: 1px solid #d1d5db;
  border-radius: 10px;
  padding: 4px;
  gap: 2px;
  box-shadow: var(--shadow-xs);
}

.db-seg-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 16px;
  border: none;
  background: transparent;
  border-radius: 7px;
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--text-secondary);
  cursor: pointer;
  transition: var(--transition);
  white-space: nowrap;
  line-height: 1;
}

.db-seg-btn i {
  font-size: 14px;
}

.db-seg-btn:hover {
  color: var(--text-primary);
  background: var(--color-primary-light);
}

.db-seg-btn.active {
  background: var(--theme-primary);
  color: #fff;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.15);
}

body.dark-theme .db-seg-tabs {
  background: var(--bg-card);
  border-color: var(--border);
}

body.dark-theme .db-seg-btn:hover {
  background: rgba(255, 255, 255, 0.06);
}

body.dark-theme .db-seg-btn.active {
  background: var(--color-white);
  color: var(--color-black);
}

/* ==================================================================
   CODINGSAAS THEME OVERHAUL -- Supplementary Overrides
   Violet-first, clean, modern School SaaS design
   ================================================================== */

/* ——— Scrollbar ——— */

/* ——— Global link color ——— */
a {
  color: var(--accent);
}

a:hover {
  color: var(--accent-dark);
}

/* -- Topbar menu pill active -- */
.topbar-menu-pill {
  background-color: var(--gray-100);
}

.topbar-menu-pill .menu-item {
  color: var(--text-secondary);
  font-family: var(--font-heading);
  font-size: var(--text-xs);
  font-weight: 500;
}

.topbar-menu-pill .menu-item:hover {
  color: var(--accent);
  background-color: var(--accent-light);
}

.topbar-menu-pill .menu-item.active {
  background-color: var(--accent);
  color: #fff;
  box-shadow: 0 2px 10px rgba(14, 165, 233, 0.3);
}

/* -- Topbar actions -- */
.btn-topbar-action {
  border-color: var(--color-border);
  color: var(--text-secondary);
  border-radius: 10px;
  width: 36px;
  height: 36px;
}

.btn-topbar-action:hover {
  background-color: var(--accent-light);
  color: var(--accent);
  border-color: rgba(14, 165, 233, 0.25);
}

/* -- Theme toggle -- */
.topbar-theme-toggle {
  background-color: var(--gray-100);
}

.theme-btn.active {
  background-color: var(--color-surface);
  color: var(--accent);
}

/* -- Profile -- */
.profile-name {
  font-weight: 600;
  font-size: var(--text-xs);
  font-family: var(--font-heading);
}

.profile-email {
  font-size: var(--text-xxs);
  color: var(--text-muted);
}

.profile-avatar {
  border-color: rgba(14, 165, 233, 0.2);
}

/* -- Sidebar brand -- */
.sidebar-brand-text {
  font-family: var(--font-heading);
  font-weight: 800;
  letter-spacing: -0.03em;
}

/* -- Sidebar footer -- */
.sidebar-footer .sidebar-nav-item:hover {
  background-color: rgba(239, 68, 68, 0.1);
  color: var(--color-danger);
}

.sidebar-footer .sidebar-nav-item:hover i {
  color: var(--color-danger) !important;
}

/* -- Sidebar submenu item hover -- */
.sidebar-submenu .submenu-item:hover {
  color: var(--accent);
  background-color: var(--accent-light);
  padding-left: 16px;
}

.sidebar-submenu .submenu-item:hover i {
  color: var(--accent) !important;
}

/* -- Table action buttons (eye, download) -- */
.table-responsive td a.btn:has(.ph-eye) {
  color: var(--accent) !important;
}

.table-responsive td a.btn:has(.ph-eye):hover {
  background: var(--accent) !important;
  color: #fff !important;
}

/* -- Status badges -- */
.status-completed {
  color: var(--color-success);
}

.status-pending {
  color: var(--color-danger);
}

.status-inprogress {
  color: var(--color-warning);
}

/* -- Session selector -- */
.btn-session-selector {
  background-color: var(--gray-100);
  border-color: var(--color-border) !important;
  font-family: var(--font-heading);
}

.btn-session-selector:hover,
.btn-session-selector:focus {
  background-color: var(--accent-light) !important;
  color: var(--accent) !important;
  border-color: rgba(14, 165, 233, 0.25) !important;
}

.btn-session-selector i {
  color: var(--accent) !important;
}

/* -- Filter/search table buttons -- */


.table-search-box input:focus {
  box-shadow: 0 0 0 3px rgba(14, 165, 233, 0.12);
  border-color: var(--accent);
}

/* -- Card hover border highlight -- */
.card-premium:hover {
  border-color: rgba(14, 165, 233, 0.18);
}

/* -- Form focus states override -- */
.form-check-input:checked {
  background-color: var(--accent) !important;
  border-color: var(--accent) !important;
}

.form-check-input:hover {
  border-color: var(--accent) !important;
}

/* -- Balance/metric cards -- */
.balance-value {
  color: var(--theme-primary);
  font-family: var(--font-heading);
}

.metric-value {
  color: var(--theme-primary);
  font-family: var(--font-heading);
}

body.dark-theme .balance-value,
body.dark-theme .metric-value {
  color: var(--text-primary);
}

.metric-card-accent {
  background: linear-gradient(
    135deg,
    var(--accent) 0%,
    var(--accent-dark) 100%
  );
}

.metric-card-accent .metric-icon-bg {
  background-color: rgba(255, 255, 255, 0.18);
}

/* -- Page heading styles (page titles) -- */
.page-title,
.content-header h4,
.content-header h5 {
  font-family: var(--font-heading);
  font-weight: 700;
  color: var(--text-primary);
  letter-spacing: -0.02em;
}

/* -- Badge improvements -- */
.badge-pro {
  background-color: var(--accent);
}

.trend-badge.trend-up {
  background-color: rgba(34, 197, 94, 0.1);
  color: var(--color-success);
}

.trend-badge.trend-down {
  background-color: rgba(239, 68, 68, 0.1);
  color: var(--color-danger);
}

/* -- Dashboard tabs active -- */
.dashboard-tabs .nav-link.active {
  background: var(--accent) !important;
  box-shadow: 0 2px 12px rgba(14, 165, 233, 0.3);
}

body.dark-theme .dashboard-tabs .nav-link.active {
  background: var(--accent) !important;
  color: #fff !important;
}

.db-seg-btn:hover {
  background: var(--accent-light);
  color: var(--accent);
}

.db-seg-btn.active {
  background: var(--accent);
  color: #fff;
  box-shadow: 0 2px 10px rgba(14, 165, 233, 0.28);
}

body.dark-theme .db-seg-btn.active {
  background: var(--accent);
  color: #fff;
}

/* -- Activity icons color update -- */
.activity-icon-blue {
  background-color: rgba(14, 165, 233, 0.1);
  color: var(--accent);
}

.activity-icon-indigo {
  background-color: rgba(14, 165, 233, 0.1);
  color: var(--accent-dark);
}

/* -- Modal improvements -- */
.modal-body h6.text-primary {
  color: var(--accent) !important;
  border-left-color: var(--accent) !important;
}

body.dark-theme .modal-content {
  background-color: var(--bg-card) !important;
  border-color: var(--color-border) !important;
}

body.dark-theme .modal-section-card {
  background: rgba(24, 25, 40, 0.5);
  border-color: var(--color-border);
}

/* -- Progress bar accent fill -- */
.limit-progress-fill {
  background-color: var(--accent);
}

/* -- Dark mode body -- */
body.dark-theme {
  background: var(--bg-base) !important;
  color: var(--text-primary);
}

body.dark-theme .app-topbar {
  background-color: var(--bg-card);
  border-bottom-color: var(--color-border);
}

body.dark-theme .app-sidebar {
  background-color: var(--bg-sidebar);
  border-right-color: var(--color-border);
}

body.dark-theme .card-premium {
  background-color: var(--bg-card);
  border-color: var(--color-border);
}

/* -- Text weight utilities -- */
.fw-semibold {
  font-weight: 500;
}

.fw-bold {
  font-weight: 600;
}

.fw-extrabold {
  font-weight: 700;
}

.font-heading {
  font-family: var(--font-heading) !important;
}

.font-secondary {
  font-family: var(--font-primary) !important;
}

/* -- Highlight / selection -- */
::selection {
  background: rgba(14, 165, 233, 0.18);
  color: var(--accent-dark);
}

/* -- Profile tabs active -- */
.profile-tabs-nav .nav-link.active {
  background: var(--accent) !important;
  color: #fff !important;
}

.profile-tabs-nav .nav-link.active::after {
  border-left-color: var(--accent);
}

.profile-tabs-nav .nav-link:hover {
  background: var(--accent-light) !important;
  color: var(--accent) !important;
}

body.dark-theme .profile-tabs-nav .nav-link.active {
  background: var(--accent) !important;
}

body.dark-theme .profile-tabs-nav .nav-link:hover {
  background: var(--accent-light) !important;
}

/* ==================================================================
   CodingSaaS Soft UI / Glassmorphism Dashboard Revamp Styles
   ================================================================== */

/* Hazy Gradient Background override for Light & Dark mode */
body {
  background: var(--bg-base) !important;
  background-image: var(--backdrop-mesh) !important;
  background-attachment: fixed !important;
  color: var(--text-primary) !important;
  min-height: 100vh;
}

body.dark-theme {
  background: radial-gradient(
    circle at top right,
    #181824,
    #1e1b2f 60%,
    #131122 100%
  ) !important;
  color: #f3f4f6 !important;
}

/* Glassmorphic Container & Card Base
   NOTE: .glass-panel styling lives in the consolidated "Dashboard
   Styles" section at the bottom of this file. Do not redefine
   .glass-panel here. */

/* Touched Vertical Sidebar (Top to Bottom) */
.app-sidebar {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  bottom: 0 !important;
  height: 100vh !important;
  width: 82px !important;
  /* Default collapsed */
  background: rgba(255, 255, 255, 0.65) !important;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: none !important;
  border-right: 1px solid rgba(255, 255, 255, 0.5) !important;
  border-radius: 0 28px 28px 0 !important;
  box-shadow: 0 8px 32px 0 rgba(14, 165, 233, 0.04) !important;
  z-index: 1000;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 2rem 0 !important;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

body.dark-theme .app-sidebar {
  background: rgba(25, 25, 38, 0.6) !important;
  border-right: 1px solid rgba(255, 255, 255, 0.08) !important;
}

/* Expanded state for detached sidebar */
.app-layout.sidebar-expanded .app-sidebar {
  width: 260px !important;
  align-items: flex-start !important;
  padding: 2rem 1rem !important;
}

.sidebar-body {
  display: flex !important;
  flex-direction: column !important;
  gap: 0.35rem !important;
  align-items: center !important;
  width: 100%;
  padding: 0 !important;
  overflow-y: auto !important;
  scrollbar-width: none;
}

.sidebar-body::-webkit-scrollbar {
  display: none;
}

.app-layout.sidebar-expanded .sidebar-body {
  align-items: flex-start !important;
}

/* Sidebar navigation links */
.sidebar-nav-item {
  width: 52px !important;
  height: 38px !important;
  border-radius: 12px !important;
  background: transparent !important;
  color: #8c8c9a !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: all 0.2s ease !important;
  margin: 0 !important;
  text-decoration: none !important;
  position: relative;
}

body.dark-theme .sidebar-nav-item {
  color: #8c8c9a !important;
}

/* Active navigation item: Direct Link active vs Category dropdown active */
.sidebar-nav-item.active:not([data-bs-toggle="collapse"]) {
  background: var(--theme-primary) !important;
  /* Charcoal navy */
  color: #ffffff !important;
  box-shadow: 0 4px 12px rgba(26, 29, 46, 0.18) !important;
}

.sidebar-nav-item.active[data-bs-toggle="collapse"] {
  background: rgba(14, 165, 233, 0.08) !important;
  /* Soft violet tint */
  color: var(--accent) !important;
  /* Violet text */
}

body.dark-theme .sidebar-nav-item.active:not([data-bs-toggle="collapse"]) {
  background: rgba(56, 189, 248, 0.16) !important;
  color: var(--accent) !important;
  border: 1px solid rgba(56, 189, 248, 0.3) !important;
  box-shadow: 0 4px 14px rgba(56, 189, 248, 0.2) !important;
}

body.dark-theme .sidebar-nav-item.active[data-bs-toggle="collapse"] {
  background: rgba(56, 189, 248, 0.08) !important;
  color: var(--accent) !important;
  border: 1px solid rgba(56, 189, 248, 0.15) !important;
}

/* Hover navigation item */
.sidebar-nav-item:hover:not(.active) {
  background: rgba(0, 0, 0, 0.03) !important;
  color: var(--theme-primary) !important;
}

body.dark-theme .sidebar-nav-item:hover:not(.active) {
  background: rgba(255, 255, 255, 0.08) !important;
  color: #ffffff !important;
}

.sidebar-nav-item i {
  font-size: 1.25rem !important;
  /* More cohesive and elegant icon size */
  color: inherit !important;
  display: inline-block;
  line-height: 1;
}

/* Expanded state navigation links */
.app-layout.sidebar-expanded .sidebar-nav-item {
  width: 100% !important;
  height: 40px !important;
  /* Premium height */
  justify-content: flex-start !important;
  padding: 0 1.25rem !important;
  gap: 12px !important;
}

.app-layout.sidebar-expanded .sidebar-nav-item span.nav-label {
  display: inline-block !important;
  font-size: 0.88rem !important;
  font-weight: 500 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  max-width: 155px !important;
}

.app-layout.sidebar-expanded .sidebar-nav-item .nav-label {
  display: inline-block !important;
}

.app-layout:not(.sidebar-expanded) .sidebar-nav-item .nav-label {
  display: none !important;
}

/* Exit button at bottom */
.sidebar-footer-exit {
  margin-top: auto;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: transparent;
  color: #8c8c9a;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
  text-decoration: none;
}

body.dark-theme .sidebar-footer-exit {
  color: #8c8c9a;
}

.sidebar-footer-exit:hover {
  background: #fee2e2 !important;
  color: #ef4444 !important;
}

/* Adjust Main wrapper padding for floating sidebar based on state */
.main-wrapper {
  padding-left: calc(82px + 3rem) !important;
  padding-top: 1.5rem !important;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.app-layout.sidebar-expanded .main-wrapper {
  padding-left: 260px !important;
}

@media (max-width: 991px) {
  .app-sidebar {
    left: -280px !important;
    top: 0 !important;
    bottom: 0 !important;
    height: 100vh !important;
    border-radius: 0 28px 28px 0 !important;
    margin: 0 !important;
  }

  .app-layout.mobile-sidebar-active .app-sidebar {
    left: 0 !important;
    width: 260px !important;
    align-items: flex-start !important;
    padding: 2rem 1.25rem !important;
  }

  .app-layout.mobile-sidebar-active .sidebar-body {
    align-items: flex-start !important;
  }

  .app-layout.mobile-sidebar-active .sidebar-nav-item {
    width: 100% !important;
    height: 44px !important;
    justify-content: flex-start !important;
    padding: 0 1.25rem !important;
    gap: 12px !important;
  }

  .app-layout.mobile-sidebar-active .sidebar-nav-item .nav-label {
    display: inline-block !important;
  }

  .main-wrapper {
    padding-left: 1.5rem !important;
  }
}

/* Custom Session Selector styling */
.btn-session-selector {
  border: 1px solid rgba(0, 0, 0, 0.05) !important;
  background: rgba(255, 255, 255, 0.8) !important;
  border-radius: 20px !important;
  padding: 6px 16px !important;
  font-size: 0.85rem !important;
  font-weight: 600 !important;
  color: #2d2d35 !important;
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.02) !important;
}

body.dark-theme .btn-session-selector {
  background: rgba(255, 255, 255, 0.08) !important;
  border-color: rgba(255, 255, 255, 0.05) !important;
  color: #ffffff !important;
}

.btn-session-selector:hover {
  background: #ffffff !important;
  transform: translateY(-1px);
}

body.dark-theme .btn-session-selector:hover {
  background: rgba(255, 255, 255, 0.15) !important;
}

/* Topbar Header styling */
.app-topbar {
  background: transparent !important;
  border-bottom: none !important;
  box-shadow: none !important;
  position: relative !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 0 1.5rem 1.5rem 1.5rem !important;
  height: auto !important;
}

.topbar-brand {
  font-family: var(--font-heading) !important;
  font-size: 1.75rem !important;
  font-weight: 800 !important;
  letter-spacing: -0.04em !important;
  color: #2d2d35 !important;
  text-decoration: none;
  display: flex;
  align-items: center;
}

body.dark-theme .topbar-brand {
  color: #ffffff !important;
}

/* Center theme switcher */
.theme-pill-toggle {
  display: flex;
  align-items: center;
  background: rgba(255, 255, 255, 0.8);
  border: 1px solid rgba(0, 0, 0, 0.05);
  border-radius: 30px;
  padding: 4px;
  gap: 4px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.03);
}

body.dark-theme .theme-pill-toggle {
  background: rgba(30, 30, 45, 0.8);
  border-color: rgba(255, 255, 255, 0.05);
}

.theme-pill-btn {
  border: none;
  background: transparent;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #8c8c9a;
  transition: all 0.25s ease;
  cursor: pointer;
}

.theme-pill-btn.active {
  background: #2a2a2a;
  color: #ffffff;
}

body.dark-theme .theme-pill-btn.active {
  background: #ffffff;
  color: #2a2a2a;
}

/* Topbar utilities */
.topbar-actions-custom {
  display: flex;
  align-items: center;
  gap: 12px;
}

.circle-btn-util {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.8);
  border: 1px solid rgba(255, 255, 255, 0.8);
  color: #2d2d35;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s ease;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.02);
}

body.dark-theme .circle-btn-util {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.05);
  color: #ffffff;
}

.circle-btn-util:hover {
  background: #ffffff;
  transform: scale(1.05);
}

body.dark-theme .circle-btn-util:hover {
  background: rgba(255, 255, 255, 0.15);
}

.circle-avatar-profile {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid #ffffff;
  cursor: pointer;
  transition: all 0.2s ease;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}

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

/* Subheader styling */
.dashboard-sub-header {
  padding: 0 1.5rem 2rem 1.5rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1.5rem;
}

.welcome-msg-block h1 {
  font-family: var(--font-heading);
  font-size: 2.5rem;
  font-weight: 800;
  color: #2d2d35;
  letter-spacing: -0.03em;
  margin-bottom: 0.25rem;
}

body.dark-theme .welcome-msg-block h1 {
  color: #ffffff;
}

.welcome-msg-block p {
  color: #8c8c9a;
  font-size: 1.05rem;
  margin: 0;
}

.welcome-stats-block {
  display: flex;
  align-items: center;
  gap: 2.5rem;
  flex-wrap: wrap;
}

.stat-pill-item {
  display: flex;
  flex-direction: column;
}

.stat-pill-label {
  color: #8c8c9a;
  font-size: 0.85rem;
  font-weight: 500;
  margin-bottom: 0.1rem;
}

.stat-pill-value {
  font-family: var(--font-heading);
  font-size: 1.85rem;
  font-weight: 800;
  color: #2d2d35;
  display: flex;
  align-items: center;
  gap: 4px;
  line-height: 1;
}

body.dark-theme .stat-pill-value {
  color: #ffffff;
}

.stat-pill-value i {
  font-size: 1.1rem;
  color: #22c55e;
}

.btn-primary-pill {
  background: #2a2a2a !important;
  color: #ffffff !important;
  border: none !important;
  border-radius: 30px !important;
  padding: 0.85rem 1.75rem !important;
  font-weight: 600 !important;
  font-size: 0.95rem !important;
  display: flex;
  align-items: center;
  gap: 8px;
  transition: all 0.2s ease !important;
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.08) !important;
  text-decoration: none;
}

body.dark-theme .btn-primary-pill {
  background: #ffffff !important;
  color: #2a2a2a !important;
}

.btn-primary-pill:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.12) !important;
  opacity: 0.9;
}

/* Virtual Assistant Tabs & Shape Morphing */
.assistant-tabs {
  display: flex;
  gap: 8px;
  margin-bottom: -1px;
  padding-left: 20px;
  position: relative;
  z-index: 2;
}

/* Message bubble design */
.chat-body {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding-top: 1rem;
}

.chat-avatar-wrapper {
  position: absolute;
  top: 1rem;
  right: 1.5rem;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  overflow: hidden;
  border: 2px solid #ffffff;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
}

.chat-bubble {
  background: rgba(255, 255, 255, 0.8);
  border-radius: 20px;
  padding: 1rem 1.25rem;
  max-width: 85%;
  font-size: 0.95rem;
  color: #2d2d35;
  border: 1px solid rgba(255, 255, 255, 0.9);
  position: relative;
  line-height: 1.5;
}

body.dark-theme .chat-bubble {
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(255, 255, 255, 0.05);
  color: #ffffff;
}

.chat-bubble .time {
  display: block;
  font-size: 0.75rem;
  color: #8c8c9a;
  text-align: right;
  margin-top: 0.35rem;
}

.chat-input-wrapper {
  margin-top: 5.5rem;
  position: relative;
  background: rgba(255, 255, 255, 0.8);
  border-radius: 30px;
  padding: 4px 12px;
  display: flex;
  align-items: center;
  border: 1px solid rgba(0, 0, 0, 0.03);
}

body.dark-theme .chat-input-wrapper {
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(255, 255, 255, 0.05);
}

.chat-input-wrapper input {
  border: none;
  background: transparent;
  flex: 1;
  padding: 0.75rem 0.5rem;
  outline: none;
  font-size: 0.9rem;
  color: #2d2d35;
}

body.dark-theme .chat-input-wrapper input {
  color: #ffffff;
}

.chat-input-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  color: #8c8c9a;
  font-size: 1.15rem;
}

.chat-input-actions i {
  cursor: pointer;
  transition: color 0.2s;
}

.chat-input-actions i:hover {
  color: #2d2d35;
}

body.dark-theme .chat-input-actions i:hover {
  color: #ffffff;
}

/* Timeline Custom Styles */
.timeline-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1.5rem;
}

/* .timeline-grid, .timeline-hour-col, .timeline-dotted-line,
   .timeline-event-block, .event-*, .timeline-current-indicator and
   .timeline-indicator-dot intentionally not redefined here anymore --
   they conflicted with and were overridden by the consolidated
   "Dashboard Styles" section at the bottom of this file (merged from
   the former separate dashboard stylesheet), causing layout bugs (the
   grid losing its intrinsic height and the current-time indicator
   stretching past its container). That section holds the authoritative
   timeline widget styles. */

/* Custom checkmark list styles */
.todo-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 0;
  border-bottom: 1px solid rgba(0, 0, 0, 0.03);
}

body.dark-theme .todo-item {
  border-bottom-color: rgba(255, 255, 255, 0.05);
}

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

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

.todo-check-btn {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  border: 2px solid #d3d4e1;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s ease;
  color: transparent;
}

.todo-check-btn.completed {
  background: #c5e063;
  border-color: #c5e063;
  color: #2d2d35;
}

.todo-check-btn i {
  font-size: 0.75rem;
  font-weight: 900;
}

.todo-text-block {
  display: flex;
  flex-direction: column;
}

.todo-title-txt {
  font-size: 0.95rem;
  font-weight: 600;
  color: #2d2d35;
}

body.dark-theme .todo-title-txt {
  color: #ffffff;
}

.todo-title-txt.completed {
  text-decoration: line-through;
  color: #8c8c9a;
}

.todo-meta-txt {
  font-size: 0.75rem;
  color: #8c8c9a;
}

/* Custom Chart.js style overrides */
.summary-chart-container {
  height: 320px;
  position: relative;
}

/* Centering collapsed sidebar icons (Images 2 & 4 alignment fixes) */
.app-layout:not(.sidebar-expanded) .app-sidebar .sidebar-nav-item {
  width: 52px !important;
  height: 38px !important;
  justify-content: center !important;
  padding: 0 !important;
  margin: 0 auto !important;
}

.app-layout:not(.sidebar-expanded) .app-sidebar .sidebar-nav-item i {
  margin: 0 !important;
  padding: 0 !important;
  text-align: center !important;
}

/* Active sidebar item styling (Light Theme) */
.app-sidebar .sidebar-nav-item.active {
  background: var(--theme-primary) !important;
  color: #ffffff !important;
  box-shadow: 0 4px 12px rgba(26, 29, 46, 0.18) !important;
}

.app-sidebar .sidebar-nav-item.active i {
  color: #ffffff !important;
}

/* Active sidebar item styling (Dark Theme) */
body.dark-theme .app-sidebar .sidebar-nav-item.active {
  background: rgba(56, 189, 248, 0.16) !important;
  color: var(--accent) !important;
  box-shadow: 0 4px 14px rgba(56, 189, 248, 0.2) !important;
  border: 1px solid rgba(56, 189, 248, 0.3) !important;
}

body.dark-theme .app-sidebar .sidebar-nav-item.active i {
  color: var(--accent) !important;
}

/* Hover active overrides in dark mode */
body.dark-theme .app-sidebar .sidebar-nav-item:hover:not(.active) {
  background: rgba(255, 255, 255, 0.1) !important;
  color: #ffffff !important;
}

body.dark-theme .app-sidebar .sidebar-nav-item:hover:not(.active) i {
  color: #ffffff !important;
}

/* Ensure topbar header and content area backgrounds merge seamlessly (continuous gradient background) */
.app-topbar,
body.dark-theme .app-topbar {
  background: transparent !important;
  border-bottom: none !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

.content-area {
  background: transparent !important;
}

/* Dropdown item icon default colors */
.dropdown-item i:not(.text-danger) {
  color: var(--text-secondary) !important;
}

/* Timeline grid/event/dotted-line patches removed -- they fought the
   consolidated "Dashboard Styles" section at the bottom of this file
   (merged from the former separate dashboard stylesheet), forcing
   height:200px !important on .timeline-grid here was the actual cause
   of the calendar widget overlapping the cards below it. That section
   is authoritative. */

.chat-input-wrapper {
  margin-top: 2.25rem !important;
  /* Pull chat input up to sit neatly under the bubble */
}

/* ==================================================================
   Profile Page & Sessions Page Soft UI Styling Overrides
   ================================================================== */

/* Profile Nav Pills/Tabs Styling */
.profile-tabs-nav {
  padding: 1rem !important;
}

.profile-tabs-nav .nav-link {
  color: var(--text-secondary) !important;
  font-weight: 500;
  font-size: var(--text-sm) !important;
  padding: 0.75rem 1rem !important;
  border-radius: 12px !important;
  transition: all 0.2s ease-in-out !important;
  border: 1px solid transparent !important;
  background: transparent !important;
  margin-bottom: 6px !important;
  text-align: left !important;
  display: flex !important;
  align-items: center !important;
  width: 100% !important;
}

.profile-tabs-nav .nav-link i {
  color: var(--text-muted) !important;
  transition: color 0.2s ease-in-out !important;
}

.profile-tabs-nav .nav-link:hover:not(.active) {
  background: rgba(0, 0, 0, 0.03) !important;
  color: var(--theme-primary) !important;
}

.profile-tabs-nav .nav-link:hover:not(.active) i {
  color: var(--theme-primary) !important;
}

/* Active State - Light Theme */
.profile-tabs-nav .nav-link.active {
  background: var(--theme-primary) !important;
  color: #ffffff !important;
  box-shadow: 0 4px 12px rgba(26, 29, 46, 0.12) !important;
  font-weight: 600 !important;
}

.profile-tabs-nav .nav-link.active i {
  color: #ffffff !important;
}

/* Dark Theme - Profile Nav Pills */
body.dark-theme .profile-tabs-nav .nav-link {
  color: #a0a0b0 !important;
}

body.dark-theme .profile-tabs-nav .nav-link i {
  color: #707085 !important;
}

body.dark-theme .profile-tabs-nav .nav-link:hover:not(.active) {
  background: rgba(255, 255, 255, 0.05) !important;
  color: #ffffff !important;
}

body.dark-theme .profile-tabs-nav .nav-link:hover:not(.active) i {
  color: #ffffff !important;
}

/* Active State - Dark Theme */
body.dark-theme .profile-tabs-nav .nav-link.active {
  background: rgba(56, 189, 248, 0.16) !important;
  color: var(--accent) !important;
  border: 1px solid rgba(56, 189, 248, 0.3) !important;
  box-shadow: 0 4px 14px rgba(56, 189, 248, 0.2) !important;
  font-weight: 600 !important;
}

body.dark-theme .profile-tabs-nav .nav-link.active i {
  color: var(--accent) !important;
}

/* Profile Form Content Panel */
.profile-form-content {
  background: transparent !important;
}

/* Support Info Box */
.support-info-box {
  background: rgba(0, 0, 0, 0.02) !important;
  border: 1px solid rgba(120, 120, 180, 0.15) !important;
  border-radius: 14px !important;
  transition: all 0.2s ease-in-out !important;
}

.support-info-box:hover {
  background: rgba(0, 0, 0, 0.04) !important;
  transform: translateY(-2px) !important;
}

body.dark-theme .support-info-box {
  background: rgba(255, 255, 255, 0.04) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
}

body.dark-theme .support-info-box:hover {
  background: rgba(255, 255, 255, 0.07) !important;
}

/* Glass-panel header alignment override */
.glass-panel .card-header {
  background: transparent !important;
  border-bottom: 1px solid rgba(120, 120, 180, 0.15) !important;
  padding: 1.25rem 1.75rem !important;
}

body.dark-theme .glass-panel .card-header {
  border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
}

/* Modals Refined Styling - Overrides */

.modal-header-admin {
  background: rgba(248, 248, 255, 0.5) !important;
  backdrop-filter: blur(10px) !important;
  -webkit-backdrop-filter: blur(10px) !important;
  border-bottom: 1px solid rgba(120, 120, 180, 0.1) !important;
}

body.dark-theme .modal-header-admin {
  background: rgba(25, 25, 35, 0.6) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
}

.modal-footer-admin {
  background: rgba(248, 248, 255, 0.5) !important;
  backdrop-filter: blur(10px) !important;
  -webkit-backdrop-filter: blur(10px) !important;
  border-top: 1px solid rgba(120, 120, 180, 0.1) !important;
}

body.dark-theme .modal-footer-admin {
  background: rgba(25, 25, 35, 0.6) !important;
  border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
}

/* Inactive Badge Custom Style */
.badge-inactive-custom {
  background-color: rgba(100, 100, 120, 0.1) !important;
  color: var(--text-secondary) !important;
}

body.dark-theme .badge-inactive-custom {
  background-color: rgba(255, 255, 255, 0.05) !important;
  color: #a0a0b0 !important;
}

/* Table Square Action Buttons */
.btn-admin-action-square {
  width: 32px !important;
  height: 32px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 8px !important;
  border: 1px solid rgba(120, 120, 180, 0.15) !important;
  background: rgba(255, 255, 255, 0.5) !important;
  cursor: pointer !important;
  transition: all 0.2s ease-in-out !important;
}

.btn-admin-action-square:hover {
  background: rgba(14, 165, 233, 0.1) !important;
  border-color: var(--accent) !important;
}

.btn-admin-action-square i {
  font-size: 16px !important;
}

body.dark-theme .btn-admin-action-square {
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  background: rgba(255, 255, 255, 0.03) !important;
}

body.dark-theme .btn-admin-action-square:hover {
  background: rgba(56, 189, 248, 0.15) !important;
  border-color: var(--accent) !important;
}

/* Glassmorphic/Soft UI alert overrides in dark mode */
body.dark-theme .alert-warning {
  background-color: rgba(255, 193, 7, 0.1) !important;
  color: #ffc107 !important;
  border: 1px solid rgba(255, 193, 7, 0.2) !important;
}

body.dark-theme .alert-danger {
  background-color: rgba(220, 53, 69, 0.1) !important;
  color: #ea868f !important;
  border: 1px solid rgba(220, 53, 69, 0.2) !important;
}

body.dark-theme .alert-warning .text-muted {
  color: rgba(255, 255, 255, 0.6) !important;
}

body.dark-theme .alert-danger .text-danger {
  color: #ea868f !important;
}

/* ==================================================================
   SIDEBAR ICON FIX -- Force Phosphor font-family on all sidebar <i>
   elements regardless of cascade. Also increase submenu font size.
   ================================================================== */

/* Force Phosphor-Light on all sidebar nav icon elements */
.app-sidebar .sidebar-nav-item i.ph-light,
.app-sidebar .sidebar-nav-item > i.ph-light,
.app-layout.sidebar-expanded .app-sidebar .sidebar-nav-item i.ph-light,
.app-layout.mobile-sidebar-active .app-sidebar .sidebar-nav-item i.ph-light {
  font-family: "Phosphor-Light" !important;
  font-style: normal !important;
  -webkit-font-smoothing: antialiased;
}

/* Force Phosphor-Light on all submenu icon elements */
.sidebar-submenu .submenu-item i.ph-light,
.sidebar-submenu a.submenu-item i.ph-light {
  font-family: "Phosphor-Light" !important;
  font-style: normal !important;
  -webkit-font-smoothing: antialiased;
}

/* Catch all other Phosphor weights in sidebar too */
.app-sidebar i.ph-bold {
  font-family: "Phosphor-Bold" !important;
  font-style: normal !important;
}

.app-sidebar i.ph-fill {
  font-family: "Phosphor-Fill" !important;
  font-style: normal !important;
}

.app-sidebar i.ph-thin {
  font-family: "Phosphor-Thin" !important;
  font-style: normal !important;
}

.app-sidebar i.ph {
  font-family: "Phosphor" !important;
  font-style: normal !important;
}

/* Increase submenu dropdown item font size */
.sidebar-submenu .submenu-item,
.sidebar-submenu a.submenu-item {
  font-size: 13px !important;
}

/* Increase submenu icon size to match */
.sidebar-submenu .submenu-item i,
.sidebar-submenu a.submenu-item i {
  font-size: 1rem !important;
}

/* ==================================================================
   Leads & Inquiries UI Redesign Styling overrides
   ================================================================== */

.lead-filter-tabs .btn-filter {
  font-family: var(--font-heading) !important;
  font-size: var(--text-xxs) !important;
  font-weight: 600 !important;
  padding: 6px 16px !important;
  border-radius: var(--radius-pill) !important;
  transition: var(--transition) !important;
  border: 1.5px solid var(--border) !important;
  background-color: var(--color-surface) !important;
  color: var(--text-secondary) !important;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.lead-filter-tabs .btn-filter:hover {
  transform: translateY(-1px) !important;
  color: var(--text-primary) !important;
  border-color: var(--color-accent) !important;
}

.lead-filter-tabs .btn-filter.active {
  box-shadow: var(--shadow-sm) !important;
}

/* Color variations for lead tabs */
.lead-filter-tabs .btn-filter.tab-interested,
.lead-filter-tabs .btn-filter.tab-intersted {
  border-color: rgba(34, 197, 94, 0.2) !important;
  color: var(--color-success) !important;
}

.lead-filter-tabs .btn-filter.tab-interested.active,
.lead-filter-tabs .btn-filter.tab-intersted.active {
  background-color: var(--color-success-light) !important;
  border-color: var(--color-success) !important;
}

.lead-filter-tabs .btn-filter.tab-not-interested {
  border-color: rgba(239, 68, 68, 0.2) !important;
  color: var(--color-danger) !important;
}

.lead-filter-tabs .btn-filter.tab-not-interested.active {
  background-color: var(--color-danger-light) !important;
  border-color: var(--color-danger) !important;
}

.lead-filter-tabs .btn-filter.tab-admin {
  border-color: var(--border) !important;
  color: var(--text-secondary) !important;
}

.lead-filter-tabs .btn-filter.tab-admin.active {
  background-color: var(--bg-sec) !important;
  border-color: var(--text-muted) !important;
}

.lead-filter-tabs .btn-filter.tab-follow-up {
  border-color: rgba(14, 165, 233, 0.2) !important;
  color: var(--purple) !important;
}

.lead-filter-tabs .btn-filter.tab-follow-up.active {
  background-color: var(--purple-light) !important;
  border-color: var(--purple) !important;
}

.lead-filter-tabs .btn-filter.tab-call-back {
  border-color: rgba(245, 158, 11, 0.25) !important;
  color: var(--color-warning) !important;
}

.lead-filter-tabs .btn-filter.tab-call-back.active {
  background-color: var(--color-warning-light) !important;
  border-color: var(--color-warning) !important;
}

.lead-filter-tabs .btn-filter.tab-admission-created {
  border-color: rgba(59, 130, 246, 0.2) !important;
  color: var(--color-info) !important;
}

.lead-filter-tabs .btn-filter.tab-admission-created.active {
  background-color: var(--color-info-light) !important;
  border-color: var(--color-info) !important;
}

.lead-filter-tabs .btn-filter.tab-all {
  border-color: var(--border) !important;
  color: var(--text-primary) !important;
}

.lead-filter-tabs .btn-filter.tab-all.active {
  background-color: var(--theme-primary) !important;
  color: var(--color-white) !important;
  border-color: var(--theme-primary) !important;
}

.cell-truncate {
  max-width: 130px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ===== Table length / page-size selector pill ============================= */
.teacher-length-select {
  font-family: var(--font-heading) !important;
  font-size: var(--text-xxs) !important;
  font-weight: 700 !important;
  color: var(--text-secondary) !important;
  background: var(--color-surface) !important;
  border: 1.5px solid var(--border) !important;
  border-radius: var(--radius-pill) !important;
  padding: 5px 12px !important;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.length-select-inner {
  border: none !important;
  background: transparent !important;
  color: var(--text-primary) !important;
  font-family: var(--font-heading) !important;
  font-size: var(--text-xxs) !important;
  font-weight: 800 !important;
  outline: none !important;
  cursor: pointer !important;
}

body.dark-theme .teacher-length-select {
  background: var(--bg-sec) !important;
  border-color: var(--border) !important;
  color: var(--text-secondary) !important;
}

body.dark-theme .length-select-inner {
  background: var(--bg-sec) !important;
  color: var(--text-primary) !important;
}

/* ==================================================================
   UNIVERSAL DESIGN SYSTEM -- Single Source of Truth
   Resolves all duplicate / conflicting form, table, modal, pagination,
   tab, badge, toggle, and action-button styles across the entire project.
   Appended last so it wins the cascade cleanly.
   ================================================================== */

/* -- Design tokens (form & table layer) ---------------------------- */
:root {
  --u-input-height: 42px;
  --u-input-radius: 10px;
  --u-input-padding: 0.5rem 0.875rem;
  --u-input-font: var(--text-sm);
  --u-input-focus-shadow: 0 0 0 3px rgba(14, 165, 233, 0.14);
  --u-label-font-size: var(--text-xs);
  --u-label-font-weight: 600;
  --u-label-mb: 0.4rem;
  --u-th-font-size: 11px;
  --u-th-font-weight: 600;
  --u-th-padding: 11px 12px;
  --u-td-font-size: 13px;
  --u-td-padding: 10px 12px;
  --u-row-hover-bg: var(--accent-light);
  --u-action-btn-size: 30px;
  --u-action-btn-radius: var(--radius-btn);
  --u-badge-radius: 6px;
  --u-badge-padding: 3px 10px;
  --u-badge-font-size: 11.5px;
  --u-badge-font-weight: 600;
  --u-toggle-width: 40px;
  --u-toggle-height: 22px;
  --u-toggle-radius: 20px;
  --u-toggle-knob: 16px;
  --u-pagination-btn-h: 32px;
  --u-pagination-font: var(--text-xs);
  --u-pagination-radius: 8px;
  --u-tab-radius: 8px;
  --u-tab-font-size: var(--text-sm);
  --u-tab-font-weight: 600;
  --u-tab-padding: 8px 16px;
  --u-modal-radius: 16px;
  --u-modal-header-padding: 18px 24px;
  --u-modal-body-padding: 22px 24px;
  --u-modal-footer-padding: 14px 24px;
  --u-transition: all 0.18s cubic-bezier(0.4, 0, 0.2, 1);
}

body.dark-theme {
  --u-row-hover-bg: rgba(56, 189, 248, 0.07);
}

/* ------------------------------------------------------------------
   LABELS — Canonical Modern SaaS Form Labels
   ------------------------------------------------------------------ */
.form-label-admin,
label.form-label-admin {
  display: block !important;
  font-family: var(--font-heading);
  font-size: 0.8125rem !important;
  font-weight: 600 !important;
  color: #1e293b !important;
  margin-bottom: 6px !important;
  letter-spacing: 0.01em !important;
  text-transform: none !important;
}

body.dark-theme .form-label-admin,
body.dark-theme label.form-label-admin {
  color: #cbd5e1 !important;
}

/* ------------------------------------------------------------------
   INPUTS, TEXTAREAS, SELECTS — Canonical Modern SaaS Form Inputs
   ------------------------------------------------------------------ */
.form-control-admin,
.form-select-admin,
textarea.form-control-admin,
select.form-control-admin {
  display: block !important;
  width: 100% !important;
  min-height: 44px !important;
  padding: 0.625rem 0.875rem !important;
  font-family: var(--font-primary) !important;
  font-size: 0.875rem !important;
  font-weight: 400 !important;
  line-height: 1.5 !important;
  color: #0f172a !important;
  background-color: #f8fafc !important;
  border: 1px solid #cbd5e1 !important;
  border-radius: var(--radius-md) !important;
  outline: none !important;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease !important;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.03) !important;
  box-sizing: border-box !important;
}

textarea.form-control-admin {
  height: auto !important;
  min-height: 100px !important;
  resize: vertical !important;
}

.form-control-admin::placeholder,
.form-select-admin::placeholder,
textarea.form-control-admin::placeholder {
  color: #94a3b8 !important;
  font-size: 0.875rem !important;
  opacity: 0.85 !important;
}

.form-control-admin:hover,
.form-select-admin:hover,
textarea.form-control-admin:hover,
select.form-control-admin:hover {
  border-color: #94a3b8 !important;
  background-color: #ffffff !important;
}

.form-control-admin:focus,
.form-select-admin:focus,
textarea.form-control-admin:focus,
select.form-control-admin:focus {
  border-color: var(--accent) !important;
  box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.14) !important;
  outline: none !important;
  background-color: #ffffff !important;
}

.form-control-admin:disabled,
.form-select-admin:disabled,
textarea.form-control-admin:disabled,
.form-control-admin[readonly],
textarea.form-control-admin[readonly] {
  background-color: #f1f5f9 !important;
  border-color: #e2e8f0 !important;
  color: #94a3b8 !important;
  cursor: not-allowed !important;
  opacity: 0.75 !important;
}

select.form-control-admin,
.form-select-admin {
  appearance: none !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%2364748b' stroke-width='2'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M19.5 8.25l-7.5 7.5-7.5-7.5'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 12px center !important;
  background-size: 14px !important;
  padding-right: 36px !important;
}

select.form-control-admin option,
.form-select-admin option {
  background-color: #ffffff !important;
  color: #0f172a !important;
}

input[type="file"].form-control-admin {
  height: auto !important;
  padding: 8px 12px !important;
  cursor: pointer !important;
}

body.dark-theme .form-control-admin,
body.dark-theme .form-select-admin,
body.dark-theme textarea.form-control-admin,
body.dark-theme select.form-control-admin {
  background-color: #0f172a !important;
  color: #f8fafc !important;
  border-color: #334155 !important;
}

body.dark-theme .form-control-admin:hover,
body.dark-theme .form-select-admin:hover,
body.dark-theme textarea.form-control-admin:hover,
body.dark-theme select.form-control-admin:hover {
  border-color: #475569 !important;
  background-color: #1e293b !important;
}

body.dark-theme .form-control-admin:focus,
body.dark-theme .form-select-admin:focus,
body.dark-theme textarea.form-control-admin:focus,
body.dark-theme select.form-control-admin:focus {
  border-color: #60a5fa !important;
  box-shadow: 0 0 0 4px rgba(96, 165, 250, 0.2) !important;
  background-color: #0f172a !important;
}

/* Icon-inside input wrapper */
.input-icon-wrapper {
  position: relative !important;
}

.input-icon-wrapper .form-control-admin {
  padding-left: 2.4rem !important;
}

.input-icon-wrapper > i {
  position: absolute !important;
  left: 10px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  color: var(--text-muted) !important;
  font-size: 1rem !important;
  pointer-events: none !important;
  z-index: 1 !important;
}

/* ------------------------------------------------------------------
   TOGGLE SWITCHES -- unified across all page types
   ------------------------------------------------------------------ */
.teacher-status-switch .form-check-input,
.status-switch .form-check-input,
.table-responsive .form-check-input[type="checkbox"][role="switch"],
.table-responsive td .form-check-input[type="checkbox"],
.settings-toggle-row .form-check-input[type="checkbox"],
.form-switch .form-check-input.item-active-toggle,
.form-switch .form-check-input#toggle_all_fee_items {
  appearance: none !important;
  -webkit-appearance: none !important;
  width: var(--u-toggle-width) !important;
  height: var(--u-toggle-height) !important;
  border-radius: var(--u-toggle-radius) !important;
  background-color: var(--gray-200) !important;
  border: 1.5px solid var(--gray-300) !important;
  cursor: pointer !important;
  transition: var(--u-transition) !important;
  position: relative !important;
  background-image: none !important;
  outline: none !important;
  display: inline-block !important;
  box-shadow: none !important;
  vertical-align: middle !important;
}

.teacher-status-switch .form-check-input::before,
.status-switch .form-check-input::before,
.table-responsive .form-check-input[type="checkbox"][role="switch"]::before,
.table-responsive td .form-check-input[type="checkbox"]::before,
.settings-toggle-row .form-check-input[type="checkbox"]::before,
.form-switch .form-check-input.item-active-toggle::before,
.form-switch .form-check-input#toggle_all_fee_items::before {
  content: none !important;
}

.teacher-status-switch .form-check-input::after,
.status-switch .form-check-input::after,
.table-responsive .form-check-input[type="checkbox"][role="switch"]::after,
.table-responsive td .form-check-input[type="checkbox"]::after,
.settings-toggle-row .form-check-input[type="checkbox"]::after,
.form-switch .form-check-input.item-active-toggle::after,
.form-switch .form-check-input#toggle_all_fee_items::after {
  content: "" !important;
  position: absolute !important;
  top: 2px !important;
  left: 2px !important;
  width: var(--u-toggle-knob) !important;
  height: var(--u-toggle-knob) !important;
  border-radius: 50% !important;
  background-color: #fff !important;
  transition: transform 0.22s cubic-bezier(0.4, 0, 0.2, 1) !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.18) !important;
}

.teacher-status-switch .form-check-input:checked,
.status-switch .form-check-input:checked,
.table-responsive .form-check-input[type="checkbox"][role="switch"]:checked,
.table-responsive td .form-check-input[type="checkbox"]:checked,
.settings-toggle-row .form-check-input[type="checkbox"]:checked,
.form-switch .form-check-input.item-active-toggle:checked,
.form-switch .form-check-input#toggle_all_fee_items:checked {
  background-color: var(--accent) !important;
  border-color: var(--accent) !important;
  background-image: none !important;
  box-shadow: none !important;
}

.teacher-status-switch .form-check-input:checked::after,
.status-switch .form-check-input:checked::after,
.table-responsive
  .form-check-input[type="checkbox"][role="switch"]:checked::after,
.table-responsive td .form-check-input[type="checkbox"]:checked::after,
.settings-toggle-row .form-check-input[type="checkbox"]:checked::after,
.form-switch .form-check-input.item-active-toggle:checked::after,
.form-switch .form-check-input#toggle_all_fee_items:checked::after {
  transform: translateX(18px) !important;
}

.teacher-status-switch .form-check-input:focus,
.status-switch .form-check-input:focus {
  box-shadow: 0 0 0 3px rgba(14, 165, 233, 0.18) !important;
  outline: none !important;
}

body.dark-theme .teacher-status-switch .form-check-input,
body.dark-theme .status-switch .form-check-input {
  background-color: var(--gray-700) !important;
  border-color: var(--gray-600) !important;
}

/* ------------------------------------------------------------------
   SEARCH BARS -- table-search-box
   ------------------------------------------------------------------ */
.table-search-box {
  position: relative !important;
}

.table-search-box input,
.table-search-box input.table-search-input {
  width: 100% !important;
  height: 36px !important;
  background-color: var(--bg-card) !important;
  color: var(--text-primary) !important;
  border: 1.5px solid var(--border) !important;
  padding: 0 12px 0 32px !important;
  border-radius: var(--radius-pill) !important;
  font-size: var(--text-xs) !important;
  font-family: var(--font-primary) !important;
  outline: none !important;
  transition: var(--u-transition) !important;
}

.table-search-box input:focus,
.table-search-box input.table-search-input:focus {
  border-color: var(--accent) !important;
  box-shadow: 0 0 0 3px rgba(14, 165, 233, 0.12) !important;
}

.table-search-box input::placeholder {
  color: var(--text-muted) !important;
}

.table-search-box > i {
  position: absolute !important;
  left: 10px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  font-size: 0.85rem !important;
  color: var(--text-muted) !important;
  pointer-events: none !important;
}

/* ------------------------------------------------------------------
   TABLES
   ------------------------------------------------------------------ */
.teacher-table,
.table-premium,
.fee-table,
.fsr-table,
.fees-struct-table,
.sfs-table,
.teacher-detail-table,
.activity-detail-table {
  width: 100% !important;
  border-collapse: separate !important;
  border-spacing: 0 !important;
  background: transparent !important;
}

.teacher-table thead,
.table-premium thead,
.sfs-table thead,
.teacher-detail-table thead,
.activity-detail-table thead {
  background-image: var(--table-head-grad) !important;
}

.fee-table,
.fsr-table,
.fees-struct-table {
  background-image: var(--table-head-grad) !important;
}

.teacher-table thead th,
.table-premium thead th,
.fee-table th,
.fsr-table th,
.fees-struct-table th,
.sfs-table thead th,
.teacher-detail-table thead th,
.activity-detail-table thead th {
  font-family: var(--font-heading) !important;
  font-size: var(--u-th-font-size) !important;
  font-weight: var(--u-th-font-weight) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.4px !important;
  color: var(--table-thead-color) !important;
  padding: var(--u-th-padding) !important;
  border-bottom: 1px solid var(--table-head-border) !important;
  border-right: none !important;
  border-left: none !important;
  border-top: none !important;
  vertical-align: middle !important;
  white-space: nowrap;
}

.teacher-table tbody td,
.table-premium tbody td,
.fee-table td,
.fsr-table td,
.fees-struct-table td,
.sfs-table .sfs-student-row td,
.teacher-detail-table tbody td,
.activity-detail-table tbody td {
  padding: var(--u-td-padding) !important;
  font-size: var(--u-td-font-size) !important;
  font-family: var(--font-primary) !important;
  color: var(--table-cell-color, var(--text-primary)) !important;
  background-color: transparent !important;
  border-bottom: 1px solid var(--table-border-color) !important;
  border-right: none !important;
  border-left: none !important;
  border-top: none !important;
  vertical-align: middle !important;
  transition: background-color 0.15s ease !important;
  font-weight: 500 !important;
}

.teacher-table tbody tr:last-child td,
.table-premium tbody tr:last-child td,
.fee-table tbody tr:last-child td,
.fsr-table tbody tr:last-child td,
.teacher-detail-table tbody tr:last-child td,
.activity-detail-table tbody tr:last-child td {
  border-bottom: none !important;
}

/* Primary identifier column (name/title cells, e.g. class name, student name) */
.student-name-link,
.teacher-name-link,
.teacher-username,
.sfs-student-name,
.fsr-class-name,
.table-primary-text {
  font-weight: 600 !important;
  color: var(--text-primary) !important;
}

.teacher-table tbody tr:hover td,
.table-premium tbody tr:hover td,
.fee-table tbody tr:hover td,
.fsr-table tbody tr:hover td,
.teacher-detail-table tbody tr:hover td,
.activity-detail-table tbody tr:hover td {
  background-color: var(--u-row-hover-bg) !important;
}

body.dark-theme .teacher-table tbody td,
body.dark-theme .table-premium tbody td,
body.dark-theme .fee-table td,
body.dark-theme .fsr-table td,
body.dark-theme .teacher-detail-table tbody td,
body.dark-theme .activity-detail-table tbody td {
  background-color: transparent !important;
  color: var(--text-primary) !important;
  border-bottom-color: var(--border) !important;
}

body.dark-theme .teacher-table thead th,
body.dark-theme .table-premium thead th,
body.dark-theme .fee-table th,
body.dark-theme .fsr-table th,
body.dark-theme .fees-struct-table th,
body.dark-theme .sfs-table thead th,
body.dark-theme .teacher-detail-table thead th,
body.dark-theme .activity-detail-table thead th {
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  color: var(--table-thead-color) !important;
  border-bottom-color: var(--border) !important;
}

/* ------------------------------------------------------------------
   STATUS BADGES
   ------------------------------------------------------------------ */
.teacher-status-badge {
  display: inline-flex !important;
  align-items: center !important;
  gap: 5px !important;
  font-size: var(--u-badge-font-size) !important;
  font-weight: var(--u-badge-font-weight) !important;
  padding: var(--u-badge-padding) !important;
  border-radius: 20px !important;
  line-height: 1 !important;
}

.teacher-status-badge.active {
  background-color: var(--success-light) !important;
  color: #059669 !important;
  border: 1px solid rgba(16, 185, 129, 0.2) !important;
}

.teacher-status-badge.inactive {
  background-color: var(--danger-light) !important;
  color: var(--danger) !important;
  border: 1px solid rgba(239, 68, 68, 0.2) !important;
}

body.dark-theme .teacher-status-badge.active {
  background-color: rgba(52, 211, 153, 0.12) !important;
  color: #34d399 !important;
}

body.dark-theme .teacher-status-badge.inactive {
  background-color: rgba(248, 113, 113, 0.12) !important;
  color: #f87171 !important;
}

td .badge,
th .badge {
  font-size: var(--u-badge-font-size) !important;
  font-weight: var(--u-badge-font-weight) !important;
  padding: var(--u-badge-padding) !important;
  border-radius: 20px !important;
  letter-spacing: 0.02em !important;
  font-family: var(--font-heading) !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
  line-height: 1 !important;
}

/* ------------------------------------------------------------------
   PAGINATION
   ------------------------------------------------------------------ */
.pagination-wrapper {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 0.875rem 1.25rem !important;
  background-color: var(--bg-card) !important;
  border-top: 1px solid var(--border) !important;
  gap: 0.5rem !important;
  flex-wrap: wrap !important;
}

.pagination-btn,
.dt-pag-btn {
  height: var(--u-pagination-btn-h) !important;
  padding: 0 12px !important;
  font-size: var(--u-pagination-font) !important;
  font-weight: 500 !important;
  font-family: var(--font-heading) !important;
  color: var(--text-secondary) !important;
  background-color: var(--bg-card) !important;
  border: 1px solid #d1d5db !important;
  border-radius: var(--u-pagination-radius) !important;
  cursor: pointer !important;
  transition: var(--u-transition) !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 5px !important;
}

.pagination-btn:hover:not(:disabled),
.dt-pag-btn:hover:not(:disabled) {
  background-color: var(--accent-light) !important;
  color: var(--accent) !important;
  border-color: rgba(14, 165, 233, 0.25) !important;
}

.pagination-btn:disabled,
.dt-pag-btn:disabled {
  opacity: 0.4 !important;
  cursor: not-allowed !important;
}

.dt-pag-btn.active,
.pagination-num-btn.active {
  background-color: var(--theme-primary) !important;
  color: #fff !important;
  border-color: var(--theme-primary) !important;
  font-weight: 600 !important;
}

.pagination-num-btn {
  width: var(--u-pagination-btn-h) !important;
  height: var(--u-pagination-btn-h) !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: var(--u-pagination-font) !important;
  font-weight: 500 !important;
  color: var(--text-secondary) !important;
  border: 1px solid transparent !important;
  border-radius: 50% !important;
  cursor: pointer !important;
  background: transparent !important;
  transition: var(--u-transition) !important;
}

.pagination-num-btn:hover {
  background-color: var(--accent-light) !important;
  color: var(--accent) !important;
}

.pagination .page-link {
  border: 1px solid #d1d5db !important;
  color: var(--text-secondary) !important;
  background-color: var(--bg-card) !important;
  border-radius: var(--u-pagination-radius) !important;
  margin: 0 2px !important;
  padding: 5px 12px !important;
  font-size: var(--text-xs) !important;
  font-family: var(--font-heading) !important;
  transition: var(--u-transition) !important;
}

.pagination .page-link:hover {
  background-color: var(--accent-light) !important;
  color: var(--accent) !important;
  border-color: rgba(14, 165, 233, 0.25) !important;
}

.pagination .page-item.active .page-link {
  background-color: var(--theme-primary) !important;
  border-color: var(--theme-primary) !important;
  color: #ffffff !important;
  font-weight: 600 !important;
}

.pagination .page-item.disabled .page-link {
  opacity: 0.4 !important;
  cursor: not-allowed !important;
}

body.dark-theme .pagination-btn,
body.dark-theme .dt-pag-btn {
  background-color: var(--bg-card) !important;
  border-color: var(--border) !important;
  color: var(--text-secondary) !important;
}

body.dark-theme .pagination .page-link {
  background-color: var(--bg-card) !important;
  border-color: var(--border) !important;
  color: var(--text-secondary) !important;
}

body.dark-theme .pagination .page-item.active .page-link {
  background-color: var(--accent) !important;
  border-color: var(--accent) !important;
  color: #fff !important;
}

/* ------------------------------------------------------------------
   TABS -- student-tabs, teacher-tabs
   ------------------------------------------------------------------ */
.student-tabs,
.teacher-tabs {
  display: flex !important;
  flex-wrap: nowrap !important;
  overflow-x: auto !important;
  -webkit-overflow-scrolling: touch !important;
  padding: 5px !important;
  gap: 4px !important;
  background: var(--gray-100) !important;
  border: none !important;
  list-style: none !important;
  margin: 10px 14px !important;
  border-radius: 8px !important;
  scrollbar-width: none !important;
}

.student-tabs::-webkit-scrollbar,
.teacher-tabs::-webkit-scrollbar {
  display: none !important;
}

.student-tabs .nav-link,
.teacher-tabs .nav-link {
  border: none !important;
  background: transparent !important;
  color: var(--text-secondary) !important;
  font-family: var(--font-heading) !important;
  font-weight: var(--u-tab-font-weight) !important;
  font-size: var(--u-tab-font-size) !important;
  padding: var(--u-tab-padding) !important;
  border-radius: var(--u-tab-radius) !important;
  transition: var(--u-transition) !important;
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  white-space: nowrap !important;
  box-shadow: none !important;
}

.student-tabs .nav-link:hover,
.teacher-tabs .nav-link:hover {
  background: rgba(255, 255, 255, 0.5) !important;
  color: var(--text-primary) !important;
}

.student-tabs .nav-link.active,
.teacher-tabs .nav-link.active {
  background: var(--bg-card) !important;
  color: var(--accent) !important;
  font-weight: 700 !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06) !important;
  border: none !important;
}

body.dark-theme .student-tabs .nav-link.active,
body.dark-theme .teacher-tabs .nav-link.active {
  background: var(--bg-card) !important;
  color: var(--accent) !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25) !important;
}

/* db-seg tabs */
.db-seg-btn:hover {
  background: var(--accent-light) !important;
  color: var(--accent) !important;
}

.db-seg-btn.active {
  background: var(--accent) !important;
  color: #fff !important;
  box-shadow: 0 2px 10px rgba(14, 165, 233, 0.25) !important;
}

body.dark-theme .db-seg-btn.active {
  background: var(--accent) !important;
  color: #fff !important;
}

/* Profile tabs */
.profile-tabs-nav .nav-link.active {
  background: var(--accent) !important;
  color: #fff !important;
  font-weight: 700 !important;
  box-shadow: 0 4px 12px rgba(14, 165, 233, 0.2) !important;
  border-color: var(--accent) !important;
}

.profile-tabs-nav .nav-link.active i {
  color: #fff !important;
}

.profile-tabs-nav .nav-link.active::after {
  border-left-color: var(--accent) !important;
}

body.dark-theme .profile-tabs-nav .nav-link.active {
  background: rgba(56, 189, 248, 0.16) !important;
  color: var(--accent) !important;
  border: 1px solid rgba(56, 189, 248, 0.3) !important;
  box-shadow: 0 4px 14px rgba(56, 189, 248, 0.2) !important;
}

body.dark-theme .profile-tabs-nav .nav-link.active i {
  color: var(--accent) !important;
}

/* ------------------------------------------------------------------
   MODALS - Unified Premium Styles, Layout & Scrollability
   ------------------------------------------------------------------ */
.modal {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  z-index: 10500 !important;
}

.modal.show {
  background: rgba(15, 23, 42, 0.25) !important;
  backdrop-filter: blur(4px) !important;
  -webkit-backdrop-filter: blur(4px) !important;
}

/* Fix Bootstrap modal-backdrop overlaying on top of modals */
.modal-backdrop {
  display: none !important;
}

/* Prevent background scrolling when modal is open */
body.modal-open {
  overflow: hidden !important;
}

body.modal-open html {
  overflow: hidden !important;
}

/* Elevate the page content area wrapper when a modal is active to escape parent stacking context constraints */
body.modal-open .content-area {
  z-index: 10500 !important;
  position: relative !important;
}

.modal-dialog {
  max-height: 92vh !important;
  margin: 1.75rem auto !important;
}

.modal-content {
  background: rgba(255, 255, 255, 0.97) !important;
  backdrop-filter: blur(16px) !important;
  -webkit-backdrop-filter: blur(16px) !important;
  border: 1px solid rgba(255, 255, 255, 0.7) !important;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1) !important;
  border-radius: var(--u-modal-radius) !important;
  overflow: hidden !important;
  max-height: 92vh !important;
  display: flex !important;
  flex-direction: column !important;
}

body.dark-theme .modal-content {
  background: rgba(24, 25, 40, 0.97) !important;
  border: 1px solid rgba(255, 255, 255, 0.07) !important;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.35) !important;
}

.modal-header {
  border-bottom: 1px solid var(--border) !important;
  padding: var(--u-modal-header-padding) !important;
}

.modal-body {
  padding: var(--u-modal-body-padding) !important;
  overflow-y: auto !important;
  max-height: calc(92vh - 140px) !important;
}

.modal-footer {
  border-top: 1px solid var(--border) !important;
  padding: var(--u-modal-footer-padding) !important;
  background: transparent !important;
}

.modal-title {
  font-family: var(--font-heading) !important;
  font-size: var(--text-md) !important;
  font-weight: 700 !important;
  color: var(--text-primary) !important;
}

.modal-section-card {
  background: var(--bg-sec) !important;
  border: 1px solid #d1d5db !important;
  border-radius: var(--radius-sm) !important;
  padding: 18px 20px !important;
  margin-bottom: 18px !important;
}

body.dark-theme .modal-section-card {
  background: rgba(30, 31, 48, 0.5) !important;
  border-color: var(--border) !important;
}

.modal-body h6.text-primary {
  font-size: 11px !important;
  text-transform: uppercase !important;
  letter-spacing: 0.07em !important;
  color: var(--accent) !important;
  border-left: 3px solid var(--accent) !important;
  padding-left: 10px !important;
  margin-top: 0 !important;
  margin-bottom: 14px !important;
  border-bottom: none !important;
  font-weight: 700 !important;
  font-family: var(--font-heading) !important;
  display: block !important;
  border-radius: 0 !important;
}

/* ------------------------------------------------------------------
   FORM BUTTONS
   ------------------------------------------------------------------ */
.btn-admin-submit {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0.5rem !important;
  width: 100% !important;
  height: 44px !important;
  font-size: var(--text-sm) !important;
  font-weight: 600 !important;
  font-family: var(--font-heading) !important;
  background: var(--accent) !important;
  color: #fff !important;
  border: none !important;
  border-radius: var(--radius-btn) !important;
  cursor: pointer !important;
  transition: var(--u-transition) !important;
  box-shadow: 0 2px 10px rgba(14, 165, 233, 0.25) !important;
  letter-spacing: 0.01em !important;
}

.btn-admin-submit:hover {
  background: var(--accent-dark) !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 4px 18px rgba(14, 165, 233, 0.35) !important;
  color: #fff !important;
}

.btn-admin-action {
  display: inline-flex !important;
  align-items: center !important;
  gap: 0.5rem !important;
  height: 38px !important;
  padding: 0 1.25rem !important;
  font-size: var(--text-sm) !important;
  font-weight: 600 !important;
  font-family: var(--font-heading) !important;
  background: var(--accent) !important;
  color: #fff !important;
  border: none !important;
  border-radius: var(--radius-btn) !important;
  cursor: pointer !important;
  transition: var(--u-transition) !important;
  box-shadow: 0 2px 10px rgba(14, 165, 233, 0.25) !important;
  text-decoration: none !important;
}

.btn-admin-action:hover {
  background: var(--accent-dark) !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 4px 18px rgba(14, 165, 233, 0.35) !important;
  color: #fff !important;
}

.btn-admin-secondary {
  display: inline-flex !important;
  align-items: center !important;
  gap: 0.5rem !important;
  height: 38px !important;
  padding: 0 1.25rem !important;
  font-size: var(--text-sm) !important;
  font-weight: 500 !important;
  font-family: var(--font-heading) !important;
  background: var(--bg-card) !important;
  color: var(--text-secondary) !important;
  border: 1.5px solid var(--border) !important;
  border-radius: var(--radius-btn) !important;
  cursor: pointer !important;
  transition: var(--u-transition) !important;
  text-decoration: none !important;
}

.btn-admin-secondary:hover {
  background: var(--accent-light) !important;
  color: var(--accent) !important;
  border-color: rgba(14, 165, 233, 0.3) !important;
}

.btn-admin-danger {
  display: inline-flex !important;
  align-items: center !important;
  gap: 0.5rem !important;
  height: 38px !important;
  padding: 0 1.25rem !important;
  font-size: var(--text-sm) !important;
  font-weight: 600 !important;
  font-family: var(--font-heading) !important;
  background: var(--danger-light) !important;
  color: var(--danger) !important;
  border: 1.5px solid rgba(239, 68, 68, 0.25) !important;
  border-radius: var(--radius-btn) !important;
  cursor: pointer !important;
  transition: var(--u-transition) !important;
}

.btn-admin-danger:hover {
  background: var(--danger) !important;
  color: #fff !important;
  border-color: var(--danger) !important;
  box-shadow: 0 2px 10px rgba(239, 68, 68, 0.25) !important;
}

/* ------------------------------------------------------------------
   FILTER TOOLBAR BUTTONS
   ------------------------------------------------------------------ */
.btn-filter-table {
  display: flex !important;
  align-items: center !important;
  gap: 5px !important;
  background-color: var(--bg-card) !important;
  border: 1px solid #d1d5db !important;
  padding: 6px 14px !important;
  border-radius: var(--radius-pill) !important;
  font-size: var(--text-xs) !important;
  font-weight: 600 !important;
  color: var(--text-secondary) !important;
  cursor: pointer !important;
  transition: var(--u-transition) !important;
  font-family: var(--font-heading) !important;
  height: 36px !important;
}

.btn-filter-table:hover {
  background-color: var(--accent-light) !important;
  border-color: rgba(14, 165, 233, 0.25) !important;
  color: var(--accent) !important;
}

/* ------------------------------------------------------------------
   SIDEBAR -- single canonical definition
   ------------------------------------------------------------------ */
.app-sidebar .sidebar-nav-item {
  height: 36px !important;
  border-radius: 9px !important;
  margin: 2px 10px !important;
  padding: 0 10px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0.55rem !important;
  font-family: var(--font-heading) !important;
  font-size: var(--text-sm) !important;
  font-weight: 500 !important;
  color: var(--text-secondary) !important;
  transition: var(--u-transition) !important;
  background: transparent !important;
  border: none !important;
  text-decoration: none !important;
  cursor: pointer !important;
}

.app-layout.sidebar-expanded .app-sidebar .sidebar-nav-item,
.app-layout.mobile-sidebar-active .app-sidebar .sidebar-nav-item {
  justify-content: flex-start !important;
  width: calc(100% - 20px) !important;
}

.app-sidebar .sidebar-nav-item i {
  font-size: 1.1rem !important;
  color: inherit !important;
  flex-shrink: 0 !important;
}

.app-sidebar .sidebar-nav-item .nav-label {
  font-size: var(--text-sm) !important;
  font-weight: 500 !important;
  color: inherit !important;
  white-space: nowrap !important;
}

.app-sidebar .sidebar-nav-item:hover:not(.active) {
  background-color: var(--bg-sec) !important;
  color: var(--text-primary) !important;
}

.app-sidebar .sidebar-nav-item.active {
  background: var(--theme-primary) !important;
  color: #ffffff !important;
  font-weight: 600 !important;
  box-shadow: 0 4px 12px rgba(26, 29, 46, 0.16) !important;
}

.app-sidebar .sidebar-nav-item.active i,
.app-sidebar .sidebar-nav-item.active .nav-label {
  color: #ffffff !important;
}

body.dark-theme .app-sidebar .sidebar-nav-item:hover:not(.active) {
  background-color: rgba(255, 255, 255, 0.06) !important;
  color: #fff !important;
}

body.dark-theme .app-sidebar .sidebar-nav-item.active {
  background: rgba(56, 189, 248, 0.16) !important;
  color: var(--accent) !important;
  border: 1px solid rgba(56, 189, 248, 0.3) !important;
  box-shadow: 0 4px 14px rgba(56, 189, 248, 0.2) !important;
}

body.dark-theme .app-sidebar .sidebar-nav-item.active i,
body.dark-theme .app-sidebar .sidebar-nav-item.active .nav-label {
  color: var(--accent) !important;
}

.sidebar-submenu a.submenu-item {
  font-family: var(--font-heading) !important;
  font-size: var(--text-xs) !important;
  font-weight: 500 !important;
  color: var(--text-secondary) !important;
  margin: 1px 10px 1px 18px !important;
  padding: 5px 10px !important;
  border-radius: 7px !important;
  transition: var(--u-transition) !important;
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  text-decoration: none !important;
}

.sidebar-submenu a.submenu-item i {
  font-size: 1rem !important;
  color: inherit !important;
}

.sidebar-submenu a.submenu-item:hover {
  background-color: var(--bg-sec) !important;
  color: var(--text-primary) !important;
}

.sidebar-submenu a.submenu-item.active {
  background-color: var(--accent-light) !important;
  color: var(--accent) !important;
  font-weight: 600 !important;
}

.sidebar-submenu a.submenu-item.active i {
  color: var(--accent) !important;
}

body.dark-theme .sidebar-submenu a.submenu-item:hover {
  background-color: rgba(255, 255, 255, 0.05) !important;
  color: #fff !important;
}

body.dark-theme .sidebar-submenu a.submenu-item.active {
  background-color: rgba(56, 189, 248, 0.12) !important;
  color: var(--accent) !important;
}

.sidebar-footer .sidebar-nav-item:hover {
  background-color: rgba(239, 68, 68, 0.08) !important;
  color: var(--danger) !important;
}

.sidebar-footer .sidebar-nav-item:hover i {
  color: var(--danger) !important;
}

/* ==================================================================
   END UNIVERSAL DESIGN SYSTEM
   ================================================================== */

/* ==================================================================
   LEADS MODAL -- Parents Details Table Inline Inputs Fix
   The parent detail inputs use: form-control form-control-sm border-0 bg-light-focus
   Bootstrap's border-0 forcibly removes the border.
   This block restores proper styling for those specific inputs.
   ================================================================== */

/* bg-light-focus definition (used only inside leads table) */
.bg-light-focus {
  background-color: var(--bg-base) !important;
}

body.dark-theme .bg-light-focus {
  background-color: var(--bg-sec) !important;
}

/* Override border-0 inside the parents table in both Add and Edit lead modals */
#addLeadModal .table-responsive .form-control.border-0,
#editLeadModal .table-responsive .form-control.border-0 {
  border: 1.5px solid var(--border) !important;
  border-radius: 7px !important;
  background-color: var(--bg-card) !important;
  color: var(--text-primary) !important;
  font-size: 12.5px !important;
  font-family: var(--font-primary) !important;
  padding: 6px 10px !important;
  height: 34px !important;
  width: 100% !important;
  outline: none !important;
  box-shadow: none !important;
  transition:
    border-color 0.18s ease,
    box-shadow 0.18s ease !important;
}

#addLeadModal .table-responsive .form-control.border-0:focus,
#editLeadModal .table-responsive .form-control.border-0:focus {
  border-color: var(--accent) !important;
  box-shadow: 0 0 0 3px rgba(14, 165, 233, 0.14) !important;
  outline: none !important;
}

#addLeadModal .table-responsive .form-control.border-0::placeholder,
#editLeadModal .table-responsive .form-control.border-0::placeholder {
  color: var(--text-muted) !important;
  font-size: 12px !important;
  opacity: 0.75 !important;
}

/* Dark-mode */
body.dark-theme #addLeadModal .table-responsive .form-control.border-0,
body.dark-theme #editLeadModal .table-responsive .form-control.border-0 {
  background-color: var(--bg-card) !important;
  border-color: var(--border) !important;
  color: var(--text-primary) !important;
}

body.dark-theme #addLeadModal .table-responsive .form-control.border-0:focus,
body.dark-theme #editLeadModal .table-responsive .form-control.border-0:focus {
  border-color: var(--accent) !important;
  box-shadow: 0 0 0 3px rgba(56, 189, 248, 0.2) !important;
}

/* Parents details table overall structure */
#addLeadModal .table-responsive table,
#editLeadModal .table-responsive table {
  border: 1px solid #d1d5db !important;
  border-radius: 8px !important;
  overflow: hidden !important;
  border-collapse: separate !important;
  border-spacing: 0 !important;
}

#addLeadModal .table-responsive table thead th,
#editLeadModal .table-responsive table thead th {
  background-color: var(--theme-table-thead-bg) !important;
  color: var(--theme-table-thead-color) !important;
  font-family: var(--font-heading) !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.06em !important;
  padding: 10px 14px !important;
  border-bottom: 1px solid var(--border) !important;
  border-right: 1px solid var(--border) !important;
}

#addLeadModal .table-responsive table thead th:last-child,
#editLeadModal .table-responsive table thead th:last-child {
  border-right: none !important;
}

#addLeadModal .table-responsive table tbody td,
#editLeadModal .table-responsive table tbody td {
  padding: 8px 12px !important;
  border-bottom: 1px solid var(--border) !important;
  border-right: 1px solid var(--border) !important;
  vertical-align: middle !important;
  font-size: 13px !important;
  color: var(--text-primary) !important;
  background-color: var(--bg-card) !important;
}

#addLeadModal .table-responsive table tbody td:first-child,
#editLeadModal .table-responsive table tbody td:first-child {
  background-color: var(--bg-sec) !important;
  font-weight: 600 !important;
  font-size: 12px !important;
  color: var(--text-secondary) !important;
  white-space: nowrap !important;
  width: 160px !important;
}

#addLeadModal .table-responsive table tbody td:last-child,
#editLeadModal .table-responsive table tbody td:last-child {
  border-right: none !important;
}

#addLeadModal .table-responsive table tbody tr:last-child td,
#editLeadModal .table-responsive table tbody tr:last-child td {
  border-bottom: none !important;
}

body.dark-theme #addLeadModal .table-responsive table tbody td,
body.dark-theme #editLeadModal .table-responsive table tbody td {
  background-color: var(--bg-card) !important;
  border-color: var(--border) !important;
  color: var(--text-primary) !important;
}

body.dark-theme #addLeadModal .table-responsive table tbody td:first-child,
body.dark-theme #editLeadModal .table-responsive table tbody td:first-child {
  background-color: var(--bg-sec) !important;
}

/* ==================================================================
   END LEADS MODAL FIX
   ================================================================== */

/* ==================================================================
   DASHBOARD ENHANCEMENTS
   ================================================================== */

/* Recent Activity Feed */
.dashboard-activity-feed {
  display: flex;
  flex-direction: column;
  gap: 0;
  margin-bottom: 0.5rem;
}

.dash-activity-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid rgba(120, 120, 180, 0.07);
}

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

.dash-activity-icon {
  width: 34px;
  height: 34px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: 1rem;
}

.dash-activity-icon.act-icon-green {
  background: rgba(34, 197, 94, 0.12);
  color: #16a34a;
}

.dash-activity-icon.act-icon-blue {
  background: rgba(14, 165, 233, 0.12);
  color: var(--accent);
}

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

.dash-activity-label {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

body.dark-theme .dash-activity-label {
  color: #ffffff;
}

.dash-activity-detail {
  font-size: var(--text-xs);
  color: var(--text-muted);
}

.dash-activity-time {
  font-size: var(--text-xxs);
  color: var(--text-muted);
  white-space: nowrap;
  flex-shrink: 0;
}

/* Students by Class breakdown */
.class-breakdown-section {
  border-top: 1px solid rgba(120, 120, 180, 0.1);
  padding-top: 0.85rem;
  margin-top: 0.75rem;
}

.class-breakdown-title {
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 0.6rem;
}

.class-breakdown-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.class-breakdown-pill {
  display: flex;
  flex-direction: column;
  align-items: center;
  background: var(--accent-light);
  border-radius: 8px;
  padding: 4px 10px;
  min-width: 44px;
}

.cbp-roman {
  font-size: var(--text-xxs);
  font-weight: 700;
  color: var(--accent);
  text-transform: uppercase;
}

.cbp-count {
  font-size: var(--text-sm);
  font-weight: 700;
  color: var(--text-primary);
  line-height: 1.2;
}

body.dark-theme .cbp-count {
  color: #fff;
}

/* Virtual Assistant -- user bubble */
.chat-bubble-user {
  background: var(--accent);
  color: #fff;
  align-self: flex-end;
  margin-left: auto;
  max-width: 80%;
  border-radius: 8px;
}

body.dark-theme .chat-bubble-user {
  background: var(--accent-dark);
}

.chat-bubble-user .time {
  color: rgba(255, 255, 255, 0.7);
}

/* Typing indicator */
.chat-bubble-typing {
  background: rgba(120, 120, 180, 0.1);
  padding: 10px 16px;
}

.chat-typing-dots {
  display: inline-flex;
  gap: 4px;
  align-items: center;
}

.chat-typing-dots span {
  width: 6px;
  height: 6px;
  background: var(--text-muted);
  border-radius: 50%;
  animation: typingBounce 1.2s infinite ease-in-out;
}

.chat-typing-dots span:nth-child(2) {
  animation-delay: 0.2s;
}

.chat-typing-dots span:nth-child(3) {
  animation-delay: 0.4s;
}

@keyframes typingBounce {
  0%,
  80%,
  100% {
    transform: translateY(0);
  }

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

/* Chat body scrollable */
#chatBody {
  max-height: 220px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-bottom: 4px;
}

/* Send icon cursor */
#chatSendBtn {
  cursor: pointer;
  color: var(--accent);
  font-size: 1.15rem;
  transition: color 0.2s;
}

#chatSendBtn:hover {
  color: var(--accent-dark);
}

/* Todo add form */
.todo-add-form {
  background: rgba(120, 120, 180, 0.04);
  border-radius: 10px;
  padding: 10px 12px;
  margin-bottom: 0.75rem;
  border: 1px solid #d1d5db;
  transition: all 0.2s ease;
}

.todo-add-form.todo-add-form-hidden {
  display: none;
}

.todo-due-input {
  max-width: 110px;
}

/* Todo delete button */
.todo-delete-btn {
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px 6px;
  border-radius: 6px;
  color: var(--text-muted);
  font-size: 0.85rem;
  transition:
    color 0.15s,
    background 0.15s;
  display: flex;
  align-items: center;
}

.todo-delete-btn:hover {
  color: #ef4444;
  background: rgba(239, 68, 68, 0.08);
}

/* Todo card min-height */
.todo-card-panel {
  min-height: 380px;
}

/* ==================================================================
   END DASHBOARD ENHANCEMENTS
   ================================================================== */

/* Student Form Validation Styles */
.was-validated .form-control-admin:invalid,
.form-control-admin.is-invalid {
  border-color: #dc3545 !important;
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' width='12' height='12' fill='none' stroke='%23dc3545'%3e%3ccircle cx='6' cy='6' r='4.5'/%3e%3cpath stroke-linejoin='round' d='M5.8 3.6h.4L6 6.5z'/%3e%3ccircle cx='6' cy='8.2' r='.6' fill='%23dc3545' stroke='none'/%3e%3c/svg%3e") !important;
  background-repeat: no-repeat !important;
  background-position: right calc(0.375em + 0.1875rem) center !important;
  background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem) !important;
  padding-right: calc(1.5em + 0.75rem) !important;
}

.was-validated .form-control-admin:valid,
.form-control-admin.is-valid {
  border-color: #198754 !important;
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3e%3cpath fill='%23198754' d='M2.3 6.73L.6 4.53c-.4-1.04.46-1.4 1.1-.8l1.1 1.4 3.4-3.8c.6-.63 1.6-.27 1.2.7l-4 4.6c-.43.5-.8.4-1.1.1z'/%3e%3c/svg%3e") !important;
  background-repeat: no-repeat !important;
  background-position: right 10px center !important;
  background-size: 14px !important;
  padding-right: 34px !important;
}

/* Input group horizontal alignment for form-control-admin */
.input-group {
  display: flex !important;
  flex-wrap: nowrap !important;
}

.input-group > .form-control-admin.w-25 {
  width: 25% !important;
  flex: 0 0 25% !important;
  border-top-right-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
}

.input-group > .form-control-admin.w-75 {
  width: 75% !important;
  flex: 0 0 75% !important;
  border-top-left-radius: 0 !important;
  border-bottom-left-radius: 0 !important;
  border-left: 1px solid var(--border) !important;
}

/* Fix toggle knob alignment in settings rows when checked */
.settings-toggle-row .form-check-input[type="checkbox"]:checked::after {
  left: 4px !important;
}

/* Global Search Overlay */
.search-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(15, 15, 25, 0.4);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  z-index: 9999;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  padding-top: 10vh;
}

.search-modal-card {
  width: 100%;
  max-width: 600px;
  background: var(--bg-card);
  border: 1px solid #d1d5db;
  border-radius: var(--radius-lg);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  max-height: 70vh;
  animation: searchFadeIn 0.2s ease-out;
}

@keyframes searchFadeIn {
  from {
    opacity: 0;
    transform: translateY(-20px);
  }

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

.search-modal-header {
  display: flex;
  align-items: center;
  padding: 1rem 1.25rem;
  border-bottom: 1px solid var(--border);
  gap: 0.75rem;
}

.search-modal-icon {
  font-size: 1.25rem;
  color: var(--text-secondary);
}

#globalSearchInput {
  flex: 1;
  border: none;
  background: transparent;
  outline: none;
  font-size: 1rem;
  color: var(--text-primary);
  font-family: var(--font-primary);
}

#globalSearchInput::placeholder {
  color: var(--text-muted);
}

.search-modal-close {
  background: none;
  border: none;
  color: var(--text-muted);
  font-size: 1.1rem;
  cursor: pointer;
  padding: 0.25rem;
  border-radius: var(--radius-xs);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s;
}

.search-modal-close:hover {
  background: var(--bg-sec);
  color: var(--text-primary);
}

.search-modal-body {
  flex: 1;
  overflow-y: auto;
  padding: 0.75rem;
}

.search-results-list {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.search-result-item {
  display: flex;
  align-items: center;
  padding: 0.75rem 1rem;
  border-radius: var(--radius);
  color: var(--text-primary);
  text-decoration: none !important;
  font-size: var(--text-sm);
  transition: all 0.2s;
  cursor: pointer;
}

.search-result-item:hover,
.search-result-item.active {
  background: var(--theme-secondary-light);
  color: var(--accent) !important;
}

.search-result-item i {
  margin-right: 0.75rem;
  font-size: 1.1rem;
  color: var(--text-muted);
}

.search-result-item:hover i,
.search-result-item.active i {
  color: var(--accent);
}

.search-no-results {
  padding: 2rem;
  text-align: center;
  color: var(--text-muted);
  font-size: var(--text-sm);
}

.search-no-results i {
  font-size: 2rem;
  margin-bottom: 0.5rem;
  display: block;
}

.search-modal-footer {
  padding: 0.5rem 1.25rem;
  border-top: 1px solid var(--border);
  background: var(--bg-sec);
  display: flex;
  justify-content: flex-end;
  font-size: var(--text-xxs);
  color: var(--text-muted);
}

.search-modal-footer kbd {
  background: var(--bg-card);
  border: 1px solid #d1d5db;
  border-radius: var(--radius-xs);
  padding: 1px 4px;
  margin: 0 2px;
  color: var(--text-secondary) !important;
}

/* ==================================================================
   Professional CBSE-style Admission Form Styles (Print Optimized)
   ================================================================== */
@media print {
  body.admission-print-view {
    background: #ffffff !important;
    color: #000000 !important;
    margin: 0 !important;
    padding: 0 !important;
    font-family: "Poppins", "Inter", sans-serif !important;
    font-size: 11px !important;
  }

  .app-layout,
  .main-wrapper,
  .app-topbar,
  .app-sidebar,
  .footer {
    display: none !important;
  }

  .admission-print-container {
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 !important;
    border: none !important;
    box-shadow: none !important;
    margin: 0 !important;
  }
}

.admission-print-view {
  background: #f1f5f9;
  padding: 2rem 1rem;
  color: #1e293b;
  font-family: "Poppins", sans-serif;
}

.admission-print-container {
  max-width: 850px;
  margin: 0 auto;
  background: #ffffff;
  padding: 3rem;
  border: 1px solid #cbd5e1;
  border-radius: 4px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
  position: relative;
}

.admission-print-logo-section {
  display: flex;
  align-items: center;
  gap: 1.5rem;
}

.admission-print-logo {
  width: 80px;
  height: 80px;
  object-fit: contain;
}

.admission-print-logo-placeholder {
  width: 80px;
  height: 80px;
  background: #f1f5f9;
  border: 2px dashed #cbd5e1;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 2rem;
  color: #64748b;
}

.admission-print-school-info h2 {
  font-size: 1.5rem;
  font-weight: 800;
  margin: 0 0 0.25rem 0;
  color: #0f172a;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.admission-print-school-info p {
  margin: 0 0 0.15rem 0;
  font-size: 0.75rem;
  color: #475569;
}

.admission-print-photo-container {
  display: flex;
  justify-content: flex-end;
}

.admission-print-photo-box {
  width: 110px;
  height: 140px;
  border: 1px solid #94a3b8;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-size: 0.65rem;
  color: #64748b;
  background: #f8fafc;
  line-height: 1.3;
}

.admission-print-photo-box img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.admission-print-title {
  text-align: center;

  width: 100%;
}

.admission-print-title--blank {
  border-top: none;
  border-bottom: none;
  padding: 0;
  margin: 0;
  min-height: 0;
}

.admission-print-title h3 {
  margin: 0;
  font-size: 1.1rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: #0f172a;
}

/* Formal CBSE Section blocks */
.admission-form-section {
  margin-bottom: 1.5rem;
}

.admission-section-title {
  font-size: 0.8rem;
  font-weight: 700;
  color: #ffffff;
  background: #0f172a;
  padding: 0.4rem 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 0.5rem;
  border-radius: 2px;
}

.admission-grid-table {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  border: 1px solid #cbd5e1;
  border-bottom: none;
  border-right: none;
  background: #ffffff;
}

.admission-grid-cell {
  display: flex;
  border-bottom: 1px solid #cbd5e1;
  border-right: 1px solid #cbd5e1;
  font-size: 0.75rem;
  min-height: 2rem;
}

.admission-cell-label {
  width: 40%;
  font-weight: 600;
  color: #334155;
  background: #f8fafc;
  padding: 0.5rem;
  border-right: 1px solid #e2e8f0;
  display: flex;
  align-items: center;
}

.admission-cell-value {
  width: 60%;
  padding: 0.5rem;
  color: #0f172a;
  display: flex;
  align-items: center;
  word-break: break-word;
}

/* Declaration Block */
.admission-declaration-section {
  margin-top: 2rem;
  font-size: 0.7rem;
  color: #475569;
  line-height: 1.5;
  border: 1px solid #cbd5e1;
  padding: 1rem;
  background: #f8fafc;
  border-radius: 4px;
}

.admission-declaration-title {
  font-weight: 700;
  text-transform: uppercase;
  color: #0f172a;
  margin-bottom: 0.5rem;
}

.admission-print-signatures {
  display: flex;
  justify-content: space-between;
  margin-top: 3.5rem;
  padding-top: 0.5rem;
}

.admission-print-sig-line {
  border-top: 1px solid #475569;
  width: 25%;
  text-align: center;
  font-size: 0.7rem;
  font-weight: 600;
  color: #334155;
  padding-top: 0.25rem;
}

/* Ensure proper high contrast text colors over the dark ID card header background */
.id-card-header .id-card-school-name {
  color: #ffffff !important;
}

.id-card-header .id-card-tag {
  color: #7dd3fc !important;
  /* Lighter sky blue for enhanced readability */
}

/* Fix footer width alignment with main-wrapper */
.footer {
  padding-left: calc(82px + 3rem) !important;
}

.app-layout.sidebar-expanded .footer {
  padding-left: calc(260px + 3rem) !important;
}

@media (max-width: 991px) {
  .footer {
    padding-left: 1rem !important;
  }
}

/* ==================================================================
   CRM-Inspired Serious & Compact Overhaul Stylesheet Overrides
   ================================================================== */
/* Design tokens at the top of main.css are the single source of truth. Legacy duplicate variables block removed. */

/* System-Wide Global Adjustments */
body {
  font-family: var(--font-primary) !important;
  color: var(--text-primary) !important;
  background-color: var(--bg-base) !important;
}

h1,
h2,
h3,
h4,
h5,
h6,
.font-heading {
  font-family: var(--font-heading) !important;
  font-weight: 700 !important;
  color: var(--text-primary) !important;
}

.card-premium .card-header {
  padding: 0.75rem 1rem !important;
  border-bottom: 1px solid var(--border) !important;
}

.card-premium .card-header h6 {
  font-size: 0.85rem !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.05em !important;
  color: var(--text-secondary) !important;
}

.card-premium .card-body {
  padding: 1rem !important;
}

/* Sidebar Overhaul (CRM white sidebar) */
.app-sidebar {
  width: var(--sidebar-width) !important;
  background-color: var(--bg-sidebar) !important;
  border-right: 1px solid var(--border) !important;
  box-shadow: none !important;
  top: var(--header-height) !important;
  height: calc(100vh - var(--header-height)) !important;
  padding: 0.5rem 0 !important;
}

.sidebar-brand-header {
  display: none !important;
}

.sidebar-body {
  gap: 0.2rem !important;
}

.sidebar-nav-item {
  width: 44px !important;
  height: 38px !important;
  border-radius: 6px !important;
  margin: 2px 10px !important;
  color: #64748b !important;
}

.sidebar-nav-item i {
  font-size: 1.1rem !important;
  color: #64748b !important;
}

.sidebar-nav-item:hover {
  background-color: #f1f5f9 !important;
  color: var(--theme-primary) !important;
}

.sidebar-nav-item:hover i {
  color: var(--theme-primary) !important;
}

.sidebar-nav-item.active {
  background-color: rgba(37, 99, 235, 0.08) !important;
  color: var(--theme-primary) !important;
  font-weight: 600 !important;
  box-shadow: none !important;
}

.sidebar-nav-item.active i {
  color: var(--theme-primary) !important;
}

.sidebar-nav-item.active::before {
  content: "";
  position: absolute;
  left: 0;
  top: 15%;
  height: 70%;
  width: 3px;
  background-color: var(--theme-primary);
  border-radius: 0 4px 4px 0;
}

/* Expanded Sidebar */
.app-layout.sidebar-expanded {
  --sidebar-width: 230px !important;
}

.app-layout.sidebar-expanded .app-sidebar .sidebar-nav-item {
  width: calc(100% - 20px) !important;
  justify-content: flex-start !important;
  padding-left: 12px !important;
}

.app-layout.sidebar-expanded .app-sidebar .nav-label {
  display: inline-block !important;
  opacity: 1 !important;
  font-size: 0.8rem !important;
  font-weight: 500 !important;
  margin-left: 10px !important;
  color: inherit !important;
  font-family: var(--font-primary) !important;
}

.app-layout.sidebar-expanded .app-sidebar .dropdown-arrow {
  margin-left: auto !important;
}

.sidebar-submenu {
  padding-left: 2rem !important;
  margin: 0.25rem 0 !important;
}

.sidebar-submenu .submenu-item {
  font-size: 0.75rem !important;
  padding: 4px 10px !important;
  color: #475569 !important;
}

.sidebar-submenu .submenu-item.active {
  background-color: var(--theme-primary) !important;
  color: #ffffff !important;
  box-shadow: none !important;
}

.sidebar-submenu .submenu-item.active i {
  color: #ffffff !important;
}

/* Topbar Overhaul */
.app-topbar {
  height: var(--header-height) !important;
  background-color: #ffffff !important;
  border-bottom: 1px solid var(--border) !important;
  box-shadow: none !important;
  padding: 0 1rem !important;
}

.topbar-brand {
  font-size: 0.95rem !important;
  font-weight: 800 !important;
  color: var(--theme-primary) !important;
  letter-spacing: -0.02em !important;
}

.topbar-brand i {
  font-size: 1.1rem !important;
}

/* Header Session selector dropdown */
.btn-session-selector {
  padding: 4px 10px !important;
  font-size: 11px !important;
  border-radius: 4px !important;
  border: 1px solid #d1d5db !important;
  background-color: #f8fafc !important;
}

/* Header Quick Search Box */
.topbar-search-container {
  position: relative;
  width: 280px;
  margin-left: 1rem;
}

.topbar-search-input {
  width: 100%;
  height: 32px;
  background-color: #f1f5f9;
  border: 1px solid transparent;
  border-radius: 6px;
  padding-left: 2rem;
  padding-right: 1rem;
  font-size: 12px;
  color: var(--text-primary);
  transition: all 0.2s;
  cursor: pointer;
}

.topbar-search-input:focus {
  background-color: #ffffff;
  border-color: var(--theme-primary);
  outline: none;
  box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.1);
}

.topbar-search-icon {
  position: absolute;
  left: 0.75rem;
  top: 50%;
  transform: translateY(-50%);
  color: #64748b;
  font-size: 13px;
  pointer-events: none;
}

/* Header Action Buttons */
.btn-header-add {
  background-color: var(--theme-primary);
  color: #ffffff !important;
  border: none;
  border-radius: 6px;
  padding: 6px 12px;
  font-size: 12px;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: background-color 0.2s;
}

.btn-header-add:hover {
  background-color: var(--theme-primary-hover);
}

/* Theme Pill Switch Overrides */
.theme-pill-toggle {
  background-color: #f1f5f9 !important;
  border-radius: 6px !important;
  padding: 2px !important;
  height: 28px !important;
}

.theme-pill-btn {
  width: 24px !important;
  height: 24px !important;
  border-radius: 4px !important;
  font-size: 0.8rem !important;
}

.theme-pill-btn.active {
  background-color: #ffffff !important;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05) !important;
}

/* Main Layout adjustments */
.main-wrapper {
  padding-top: var(--header-height) !important;
  padding-left: var(--sidebar-width) !important;
  background-color: var(--bg-base);
}

.content-area {
  padding: 1.25rem 1.5rem !important;
}

/* High-Density Metric Grid Styling */
.metrics-row-crm {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 1rem;
  margin-bottom: 1rem;
}

@media (max-width: 1200px) {
  .metrics-row-crm {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 768px) {
  .metrics-row-crm {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 480px) {
  .metrics-row-crm {
    grid-template-columns: 1fr;
  }
}

.card-metric-crm {
  background-color: #ffffff;
  border: 1px solid #d1d5db;
  border-radius: var(--radius-card);
  padding: 0.85rem 1rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: relative;
  overflow: hidden;
}

body.dark-theme .card-metric-crm {
  background-color: var(--bg-card);
}

.metric-crm-left {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}

.metric-crm-title {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  color: var(--text-muted);
  letter-spacing: 0.02em;
}

.metric-crm-value {
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--text-primary);
}

.metric-crm-trend {
  font-size: 10px;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 2px;
}

.metric-crm-trend.up {
  color: #10b981;
}

.metric-crm-trend.down {
  color: #ef4444;
}

.metric-crm-chart {
  display: flex;
  align-items: flex-end;
  height: 32px;
  gap: 3px;
}

.metric-mini-bar {
  width: 5px;
  background-color: #e2e8f0;
  border-radius: 1px;
  transition: height 0.3s;
}

.metric-mini-bar.highlight {
  background-color: var(--theme-primary);
}

/* Timeline & Schedule Redesign (Sharp indicators) -- removed, conflicted
   with the pill-style timeline in the consolidated "Dashboard Styles"
   section at the bottom of this file (merged from the former separate
   dashboard stylesheet). That section is authoritative. */

/* AI assistant card styling overhaul */
.assistant-tabs {
  background-color: #e2e8f0 !important;
  padding: 3px !important;
  border-radius: 8px !important;
}

body.dark-theme .assistant-tabs {
  background-color: #1e293b !important;
}

/* .glass-panel intentionally not redefined here -- see the "Dashboard
   Styles" section at the bottom of this file. */

/* Saturated status badges */
.badge-success-subtle {
  background-color: rgba(16, 185, 129, 0.08) !important;
  color: #10b981 !important;
  border: 1px solid rgba(16, 185, 129, 0.15) !important;
}

.badge-primary-subtle {
  background-color: rgba(37, 99, 235, 0.08) !important;
  color: #2563eb !important;
  border: 1px solid rgba(37, 99, 235, 0.15) !important;
}

.badge-warning-subtle {
  background-color: rgba(245, 158, 11, 0.08) !important;
  color: #f59e0b !important;
  border: 1px solid rgba(245, 158, 11, 0.15) !important;
}

.badge-danger-subtle {
  background-color: rgba(239, 68, 68, 0.08) !important;
  color: #ef4444 !important;
  border: 1px solid rgba(239, 68, 68, 0.15) !important;
}

.badge-purple-subtle {
  background-color: var(--accent-pink-light) !important;
  color: var(--accent-pink) !important;
  border: 1px solid var(--accent-pink-light) !important;
}

/* Table - High Density, Compact CRM Table Styles */

.table-premium thead {
  background-image: var(--table-head-grad) !important;
}



.table-premium tbody tr:hover {
  box-shadow: none !important;
  background-color: var(--accent-light) !important;
}

body.dark-theme .table-premium thead {
  background-image: var(--table-head-grad) !important;
}

body.dark-theme .table-premium th {
  background-color: transparent !important;
  background-image: none !important;
}

body.dark-theme .table-premium tbody tr:hover {
  background-color: var(--accent-light) !important;
}

/* Avatar small circle representation */
.avatar-sm-circle {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background-color: var(--theme-primary-light);
  color: var(--theme-primary);
  font-size: 10px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  text-transform: uppercase;
  border: 1px solid var(--accent-light);
}

/* Compact Forms & Controls */
.form-control-admin {
  height: 32px !important;
  padding: 4px 10px !important;
  font-size: 12px !important;
  border-radius: 4px !important;
  border: 1px solid #d1d5db !important;
  background-color: #ffffff !important;
  color: var(--text-primary) !important;
}

.form-control-admin:focus {
  border-color: var(--theme-primary) !important;
  box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.1) !important;
  outline: none !important;
}

.form-label-admin {
  font-size: 11px !important;
  font-weight: 600 !important;
  color: var(--text-secondary) !important;
  margin-bottom: 3px !important;
}

/* Align Footer width properly on new sidebar dimensions */
.footer {
  padding-left: calc(var(--sidebar-width) + 1.5rem) !important;
  background-color: #ffffff !important;
  border-top: 1px solid var(--border) !important;
}

body.dark-theme .footer {
  background-color: var(--bg-card) !important;
}

.app-layout.sidebar-expanded .footer {
  padding-left: calc(230px + 1.5rem) !important;
}

@media (max-width: 991px) {
  .footer {
    padding-left: 1rem !important;
  }
}

/* ==================================================================
   School Modules layout refactor and visual re-skin overrides
   ================================================================== */

/* Scope visual changes inside content-area containing school modules */
.content-area {
  padding: 1rem 1.25rem !important;
  /* Reduce padding of the main container */
}

/* 1. Global spacing and density reductions */
.content-area .row {
  margin-left: -6px !important;
  margin-right: -6px !important;
}

.content-area .col-12,
.content-area .col-md-4,
.content-area .col-sm-6,
.content-area [class*="col-"] {
  padding-left: 6px !important;
  padding-right: 6px !important;
}

/* Page headers compacting */
.content-area h2.font-heading {
  font-size: 1.15rem !important;
  margin-bottom: 0.15rem !important;
  font-weight: 700 !important;
  color: var(--text-primary) !important;
}

.content-area h2.font-heading + p.text-muted {
  font-size: 11px !important;
  margin-bottom: 0.5rem !important;
}

/* 2. Tables Compacting & Row Styling */
.content-area table.table-premium,
.content-area table.teacher-table,
.content-area table.teacher-detail-table,
.content-area table.table {
  width: 100% !important;
  border-collapse: collapse !important;
}

.table-results thead th {
  text-align: center !important;
  vertical-align: middle !important;
  border: 1px solid var(--border-default) !important;
  border-bottom: 2px solid var(--border-default) !important;
}
.table-results td {
  font-size: 12px !important;
  font-weight: 500 !important;
  border: 1px solid var(--border-subtle) !important;
  vertical-align: middle !important;
  background: none;
}
.table-results .badge-grade {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 32px;
  padding: 2px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
}
.table-results .section-header-row td,
.table-results .section-header-row th {
  border: 1px solid var(--border-default) !important;
  border-bottom: 2px solid var(--border-default) !important;
}
.table-results .section-header-row td {
  font-size: 12px !important;
  font-weight: 700 !important;
}
.table-results .badge-sno {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 8px;
  font-size: 11px;
  font-weight: 700;
  background: var(--bg-subtle);
  color: var(--text-secondary);
}

.content-area table.table-premium th,
.content-area table.teacher-table th,
.content-area table.teacher-detail-table th,
.content-area table.table th,
.table thead th,
.table-premium thead th,
.teacher-table thead th,
.sfs-table thead th {
  background-color: #f8fafc !important;
  background-image: none !important;
  color: #475569 !important;
  font-family: var(--font-heading) !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.05em !important;
  padding: 10px 14px !important;
  border-bottom: 1px solid #e2e8f0 !important;
  border-top: none !important;
  border-left: none !important;
  border-right: none !important;
  text-align: left;
}

.table thead tr:first-child th:first-child,
.table-responsive table thead tr:first-child th:first-child {
  border-top-left-radius: 0 !important;
}

.table thead tr:first-child th:last-child,
.table-responsive table thead tr:first-child th:last-child {
  border-top-right-radius: 0 !important;
}

.content-area table.table-premium td,
.content-area table.teacher-table td,
.content-area table.teacher-detail-table td,
.content-area table.table td {
  padding: 6px 10px !important;
  font-size: 12px !important;
  color: var(--table-cell-color) !important;
  background-color: var(--table-cell-bg) !important;
  border-bottom: 1px solid var(--table-border-color) !important;
  vertical-align: middle !important;
  white-space: nowrap;
}

/* Numeric text right alignment class */
.text-right,
.align-right,
td[data-type="amount"],
td[data-type="numeric"] {
  text-align: right !important;
}

/* Align inline avatars inside table cells cleanly */
.student-avatar,
.teacher-avatar,
.student-avatar-placeholder {
  width: 24px !important;
  height: 24px !important;
  border-radius: 50% !important;
  object-fit: cover !important;
  font-size: 10px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}

/* 4. Inputs, Forms & Filter Rows */
.content-area .teacher-card-header,
.content-area .card-header-actions {
  padding: 0.5rem 0.75rem !important;
  background-color: #ffffff !important;
  border-bottom: 1px solid var(--border) !important;
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: space-between !important;
  flex-wrap: nowrap !important;
  gap: 0.5rem !important;
}

body.dark-theme .content-area .teacher-card-header {
  background-color: var(--bg-card) !important;
}



/* Modals Refined layouts */
.content-area .modal-content,
.modal-content {
  border-radius: 6px !important;
  border: 1px solid #d1d5db !important;
  box-shadow:
    0 10px 25px -5px rgba(0, 0, 0, 0.1),
    0 8px 10px -6px rgba(0, 0, 0, 0.1) !important;
}

.content-area .modal-header,
.modal-header {
  padding: 0.6rem 0.85rem !important;
  background-color: #f8fafc !important;
  border-bottom: 1px solid var(--border) !important;
}

.content-area .modal-title,
.modal-title {
  font-size: 12px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.05em !important;
}

.content-area .modal-body,
.modal-body {
  padding: 0.85rem !important;
}

.content-area .modal-footer,
.modal-footer {
  padding: 0.5rem 0.85rem !important;
  border-top: 1px solid var(--border) !important;
}

/* Forms Modal Section Cards */
.content-area .modal-section-card,
.modal-section-card {
  border: 1px solid #d1d5db !important;
  border-radius: 4px !important;
  padding: 0.6rem 0.85rem !important;
  margin-bottom: 0.6rem !important;
  background-color: #fcfdfe !important;
}

body.dark-theme .modal-section-card {
  background-color: #1e293b !important;
}

/* Universal Form Dropdown Selects & Primary Buttons */
select.form-select,
select.form-select-sm,
select.form-control-admin,
.form-select-admin {
  background-color: #f8fafc !important;
  border: 1px solid #cbd5e1 !important;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.03) !important;
  font-weight: 500 !important;
  color: #1e293b !important;
  border-radius: var(--radius-md) !important;
  transition: all 0.15s ease !important;
}

.d-flex select.form-select,
.d-flex select.form-select-sm,
form.d-flex select.form-select,
form.d-flex select.form-select-sm {
  width: auto !important;
  display: inline-block !important;
}

select.form-select:hover,
select.form-select-sm:hover,
select.form-control-admin:hover,
.form-select-admin:hover {
  border-color: #94a3b8 !important;
  background-color: #ffffff !important;
}

select.form-select:focus,
select.form-select-sm:focus,
select.form-control-admin:focus,
.form-select-admin:focus {
  border-color: var(--accent) !important;
  box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.14) !important;
  background-color: #ffffff !important;
  outline: none !important;
}

.btn-primary,
button.btn-primary,
.btn-admin-submit {
  background-color: var(--accent) !important;
  border-color: var(--accent) !important;
  color: #ffffff !important;
  font-weight: 600 !important;
  border-radius: var(--radius-md) !important;
  box-shadow: 0 1px 2px rgba(37, 99, 235, 0.15) !important;
  transition: all 0.15s ease !important;
}

.btn-primary:hover,
button.btn-primary:hover,
.btn-admin-submit:hover {
  background-color: var(--accent-hover) !important;
  border-color: var(--accent-hover) !important;
  color: #ffffff !important;
  box-shadow: 0 4px 12px rgba(37, 99, 235, 0.25) !important;
}

/* 5. Badges & Status Tags (Subtle desaturated backgrounds with clear color text) */
.badge,
.content-area .badge,
.content-area .teacher-status-badge,
.content-area .trash-count-badge {
  font-size: 11px !important;
  font-weight: 600 !important;
  padding: 4px 10px !important;
  border-radius: var(--radius-pill) !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
  letter-spacing: 0.01em !important;
  border: 1px solid transparent !important;
}

/* Green: Active / Paid / Verified */
.content-area .badge.bg-success-subtle,
.content-area .badge.bg-success,
.content-area .badge[class*="success"],
.content-area .teacher-status-badge.active,
.content-area .teacher-status-badge[class*="active"] {
  background-color: rgba(16, 185, 129, 0.08) !important;
  color: #059669 !important;
  border-color: rgba(16, 185, 129, 0.15) !important;
}

/* Orange: Pending / Due / Lead */
.content-area .badge.bg-warning-subtle,
.content-area .badge.bg-warning,
.content-area .badge[class*="warning"],
.content-area .badge.pending {
  background-color: rgba(245, 158, 11, 0.08) !important;
  color: #d97706 !important;
  border-color: rgba(245, 158, 11, 0.15) !important;
}

/* Purple/Gray: Closed / Inactive / Archive */
.content-area .badge.bg-secondary-subtle,
.content-area .badge.bg-secondary,
.content-area .badge[class*="secondary"],
.content-area .teacher-status-badge.inactive,
.content-area .teacher-status-badge[class*="inactive"] {
  background-color: rgba(107, 114, 128, 0.08) !important;
  color: #4b5563 !important;
  border-color: rgba(107, 114, 128, 0.15) !important;
}

/* Red: Alert / Overdue / Warning */
.content-area .badge.bg-danger-subtle,
.content-area .badge.bg-danger,
.content-area .badge[class*="danger"],
.content-area .badge.overdue {
  background-color: rgba(239, 68, 68, 0.08) !important;
  color: #dc2626 !important;
  border-color: rgba(239, 68, 68, 0.15) !important;
}

/* Blue: Primary/Info */
.content-area .badge.bg-primary-subtle,
.content-area .badge.bg-primary,
.content-area .badge.bg-info-subtle,
.content-area .badge.bg-info,
.content-area .badge[class*="primary"],
.content-area .badge[class*="info"] {
  background-color: rgba(37, 99, 235, 0.08) !important;
  color: #2563eb !important;
  border-color: rgba(37, 99, 235, 0.15) !important;
}

/* Total Badges */
.content-area .teacher-total-badge,
.content-area .trash-count-badge {
  padding: 3px 8px !important;
  font-size: 11px !important;
  border-radius: 4px !important;
  border: 1px solid #d1d5db !important;
  background-color: #f8fafc !important;
  color: var(--text-secondary) !important;
}

body.dark-theme .content-area .teacher-total-badge {
  background-color: #1e293b !important;
}

/* 6. Pagination Controls */
.content-area .pagination {
  margin: 0 !important;
  display: inline-flex !important;
  gap: 2px !important;
}

.content-area .pagination .page-item .page-link {
  border: 1px solid #d1d5db !important;
  color: var(--text-secondary) !important;
  background-color: #ffffff !important;
  padding: 4px 8px !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  border-radius: 4px !important;
  transition: all 0.15s ease !important;
}

body.dark-theme .content-area .pagination .page-item .page-link {
  background-color: var(--bg-card) !important;
}

.content-area .pagination .page-item .page-link:hover {
  background-color: #f1f5f9 !important;
  color: var(--theme-primary) !important;
  border-color: #cbd5e1 !important;
}

.content-area .pagination .page-item.active .page-link {
  background-color: var(--theme-primary) !important;
  color: #ffffff !important;
  border-color: var(--theme-primary) !important;
}

.content-area .pagination .page-item.disabled .page-link {
  color: #94a3b8 !important;
  background-color: #f8fafc !important;
  border-color: #e2e8f0 !important;
  pointer-events: none !important;
}

body.dark-theme .content-area .pagination .page-item.disabled .page-link {
  background-color: #1e293b !important;
}

/* Pin Pagination wrappers */
.content-area .card-footer,
.content-area .pagination-footer {
  padding: 0.6rem 0.85rem !important;
  background-color: #ffffff !important;
  border-top: 1px solid var(--border) !important;
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  border-bottom-left-radius: var(--radius-card) !important;
  border-bottom-right-radius: var(--radius-card) !important;
}

body.dark-theme .content-area .card-footer {
  background-color: var(--bg-card) !important;
}

/* 7. Profile Detail Cards & Key-Value Panels */
.content-area .detail-section-card {
  background-color: #ffffff !important;
  border: 1px solid #d1d5db !important;
  border-radius: 8px !important;
  padding: 0.85rem !important;
  margin-bottom: 0.75rem !important;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03) !important;
}

body.dark-theme .content-area .detail-section-card {
  background-color: var(--bg-card) !important;
}

.content-area .detail-section-title {
  font-size: 11.5px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.04em !important;
  color: var(--text-secondary) !important;
  border-bottom: 1px solid var(--border) !important;
  padding-bottom: 4px !important;
  margin-bottom: 8px !important;
  display: flex !important;
  align-items: center !important;
  gap: 0.25rem !important;
}

.content-area .detail-box {
  background-color: #f8fafc !important;
  border: 1px solid #f1f5f9 !important;
  border-radius: 4px !important;
  padding: 4px 8px !important;
  margin-bottom: 0.4rem !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 1px !important;
}

body.dark-theme .content-area .detail-box {
  background-color: #0f172a !important;
  border-color: #1e293b !important;
}

.content-area .detail-box-label {
  font-size: 9.5px !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.02em !important;
  color: var(--text-muted) !important;
  margin-bottom: 0 !important;
}

.content-area .detail-box-label i {
  font-size: 10.5px !important;
  margin-right: 2px !important;
}

.content-area .detail-box-val {
  font-size: 12px !important;
  font-weight: 700 !important;
  color: var(--text-primary) !important;
}

/* ==================================================================
   Layout visual bug fixes: Topbar Gap, Chevron Icons, Collapse, Tabs
   ================================================================== */

/* 1. Fix Sidebar height, Header positioning, and branding layouts */
.app-topbar {
  position: fixed !important;
  top: 0 !important;
  left: var(--sidebar-width) !important;
  right: 0 !important;
  width: auto !important;
  max-width: calc(100% - var(--sidebar-width)) !important;
  height: var(--header-height) !important;
  z-index: 1000 !important;
  background-color: #ffffff !important;
  border-bottom: 1px solid var(--border) !important;
  box-shadow: none !important;
  padding: 0 1.5rem !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  transition:
    left 0.3s cubic-bezier(0.4, 0, 0.2, 1),
    background-color 0.3s ease !important;
}

body.dark-theme .app-topbar {
  background-color: var(--bg-card) !important;
}

.app-sidebar {
  top: 0 !important;
  height: 100vh !important;
  border-radius: 0 !important;
  border-right: 1px solid var(--border) !important;
}

body.dark-theme .app-sidebar {
  border-right-color: rgba(255, 255, 255, 0.08) !important;
}

/* Sidebar Brand Header display on desktop viewports */
.sidebar-brand-header {
  display: flex !important;
  height: var(--header-height) !important;
  align-items: center !important;
  padding: 0 1rem !important;
  border-bottom: 1px solid var(--border) !important;
  justify-content: space-between !important;
  width: 100% !important;
}

body.dark-theme .sidebar-brand-header {
  border-bottom-color: rgba(255, 255, 255, 0.08) !important;
}

.app-layout:not(.sidebar-expanded):not(.mobile-sidebar-active)
  .sidebar-brand-header {
  justify-content: center !important;
  padding: 0 !important;
}

.app-layout:not(.sidebar-expanded):not(.mobile-sidebar-active)
  .sidebar-brand-text {
  display: none !important;
}

/* Hide topbar brand logo on desktop viewports to avoid redundancy */
@media (min-width: 992px) {
  .app-topbar .branding-wrapper {
    display: none !important;
  }
}

/* Ensure outer layouts are strictly normalized */
html,
body {
  margin: 0 !important;
  padding: 0 !important;
}

/* Enforce content offsets below header */
.main-wrapper,
.main-content {
  padding-top: var(--header-height) !important;
  padding-left: var(--sidebar-width) !important;
  margin-top: 0 !important;
  margin-left: 0 !important;
  transition:
    padding-left 0.3s cubic-bezier(0.4, 0, 0.2, 1),
    margin-left 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

/* 2. Fix Broken Sidebar Dropdown Chevron Icon Font Clashes */
.app-sidebar .dropdown-arrow,
.app-sidebar .dropdown-arrow.nav-label {
  font-family: "tabler-icons" !important;
  font-style: normal !important;
  font-weight: 500 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 14px !important;
  height: 14px !important;
  line-height: 1 !important;
  text-transform: none !important;
  margin-left: auto !important;
  transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
  speak: none;
}

.sidebar-nav-item[aria-expanded="true"] .dropdown-arrow {
  transform: rotate(180deg) !important;
}

/* 3. Fix Sidebar Collapsed Transitions */
.app-sidebar {
  transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

/* 4. Refine Virtual Assistant / Chat Tabs */
.chat-tabs,
.assistant-tabs {
  background-color: transparent !important;
  background: transparent !important;
  padding: 0 !important;
  border-radius: 0 !important;
  border-bottom: 2px solid var(--border) !important;
  display: flex !important;
  align-items: center !important;
  gap: 1rem !important;
  margin-bottom: 1rem !important;
  width: 100% !important;
  box-shadow: none !important;
}

body.dark-theme .chat-tabs,
body.dark-theme .assistant-tabs {
  border-bottom-color: rgba(255, 255, 255, 0.08) !important;
}

.chat-tab-btn,
.assistant-tab-btn {
  background: transparent !important;
  background-color: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  padding: 0.5rem 1.25rem !important;
  font-size: 11.5px !important;
  font-weight: 600 !important;
  color: var(--text-secondary) !important;
  white-space: nowrap !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  transition: all 0.15s ease !important;
  border-bottom: 2px solid transparent !important;
  margin-bottom: -2px !important;
  box-shadow: none !important;
}

.chat-tab-btn i,
.assistant-tab-btn i {
  font-size: 13px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.chat-tab-btn:hover,
.assistant-tab-btn:hover {
  color: var(--theme-primary) !important;
  background-color: transparent !important;
}

.chat-tab-btn.active,
.assistant-tab-btn.active {
  background: transparent !important;
  background-color: transparent !important;
  color: var(--theme-primary) !important;
  border-bottom: 2px solid var(--theme-primary) !important;
  box-shadow: none !important;
}

body.dark-theme .chat-tab-btn.active,
body.dark-theme .assistant-tab-btn.active {
  background: transparent !important;
  background-color: transparent !important;
  color: #ffffff !important;
  border-bottom-color: #ffffff !important;
}

/* ==================================================================
   Pulse-Inspired CRM Sidebar & Topbar Design Overhaul Overrides
   ================================================================== */

/* Core Layout & Colors */
:root {
  --pulse-primary: var(--accent);
  --pulse-primary-hover: var(--accent-dark);
  --pulse-accent-bg: var(--accent-light);
  --pulse-text-dark: var(--text-primary);
  --pulse-text-gray: var(--text-secondary);
  --pulse-border-light: var(--border);
}

/* Sidebar Custom Styling overrides */
.app-sidebar {
  background-color: var(--bg-sidebar) !important;
  border-right: 1px solid var(--border) !important;
  box-shadow: none !important;
  top: 0 !important;
  height: 100vh !important;
  width: var(--sidebar-width) !important;
  z-index: 1010 !important;
  display: flex !important;
  flex-direction: column !important;
  border-radius: 0 !important;
  padding: 0 !important;
}

body.dark-theme .app-sidebar {
  background-color: var(--bg-sidebar) !important;
  border-right: 1px solid var(--border) !important;
}

/* Sidebar brand header with rounded square activity logo */
.app-sidebar .sidebar-brand-header {
  display: flex !important;
  height: var(--header-height) !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 0 1.25rem !important;
  border-bottom: 1px solid var(--pulse-border-light) !important;
  width: 100% !important;
}

body.dark-theme .app-sidebar .sidebar-brand-header {
  border-bottom-color: rgba(255, 255, 255, 0.08) !important;
}

.sidebar-brand-logo-box {
  width: 30px !important;
  height: 30px !important;
  background: var(--brand-gradient) !important;
  border-radius: 8px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-shadow: 0 2px 5px rgba(14, 165, 233, 0.2) !important;
}

.sidebar-brand-logo-box i {
  font-size: 14px !important;
  color: #ffffff !important;
}

.app-sidebar .sidebar-brand-text {
  font-family: var(--font-primary) !important;
  font-size: 1.15rem !important;
  font-weight: 800 !important;
  color: var(--pulse-text-dark) !important;
  letter-spacing: -0.03em !important;
}

body.dark-theme .app-sidebar .sidebar-brand-text {
  color: #ffffff !important;
}

.sidebar-toggle-inner-btn {
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
  color: var(--text-muted) !important;
  font-size: 1.1rem !important;
  cursor: pointer !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: color 0.15s ease !important;
}

.sidebar-toggle-inner-btn:hover {
  color: var(--pulse-primary) !important;
}

.sidebar-brand-divider {
  display: none !important;
}

/* Sidebar scrollable body alignment */
.app-sidebar .sidebar-body {
  flex: 1 !important;
  overflow-y: auto !important;
  padding: 1.25rem 0.5rem !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 0.15rem !important;
}

/* Categories & Spacers */
.sidebar-category-title {
  font-family: var(--font-primary) !important;
  font-size: 9px !important;
  font-weight: 700 !important;
  color: #94a3b8 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.08em !important;
  margin: 1.25rem 0.75rem 0.5rem 0.75rem !important;
  display: block !important;
}

.sidebar-category-divider {
  display: none !important;
  height: 1px !important;
  background-color: var(--pulse-border-light) !important;
  margin: 0.75rem !important;
}

body.dark-theme .sidebar-category-divider {
  background-color: rgba(255, 255, 255, 0.08) !important;
}

/* Sidebar list items */
.app-sidebar .sidebar-nav-item,
.app-layout.sidebar-expanded .app-sidebar .sidebar-nav-item {
  height: 38px !important;
  padding: 0 12px !important;
  margin: 2px 8px !important;
  border-radius: 8px !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  color: var(--pulse-text-gray) !important;
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  position: relative !important;
  transition: all 0.15s ease !important;
  border: none !important;
  background-color: transparent !important;
  box-shadow: none !important;
}

body.dark-theme .app-sidebar .sidebar-nav-item {
  color: #94a3b8 !important;
}

.app-sidebar .sidebar-nav-item i {
  font-size: 1.15rem !important;
  color: #94a3b8 !important;
  transition: color 0.15s ease !important;
}

.app-sidebar .sidebar-nav-item:hover {
  background-color: #f8fafc !important;
  color: var(--pulse-text-dark) !important;
}

body.dark-theme .app-sidebar .sidebar-nav-item:hover {
  background-color: rgba(255, 255, 255, 0.03) !important;
  color: #ffffff !important;
}

.app-sidebar .sidebar-nav-item:hover i {
  color: var(--pulse-text-dark) !important;
}

body.dark-theme .app-sidebar .sidebar-nav-item:hover i {
  color: #ffffff !important;
}

/* Active Menu Item with thin vertical indicator line */
.app-sidebar .sidebar-nav-item.active,
.app-layout.sidebar-expanded .app-sidebar .sidebar-nav-item.active {
  background-color: var(--pulse-accent-bg) !important;
  color: var(--pulse-primary) !important;
  font-weight: 600 !important;
}

.app-sidebar .sidebar-nav-item.active i {
  color: var(--pulse-primary) !important;
}

.app-sidebar .sidebar-nav-item.active::before {
  content: "" !important;
  position: absolute !important;
  left: 2px !important;
  top: 25% !important;
  height: 50% !important;
  width: 3px !important;
  background-color: var(--pulse-primary) !important;
  border-radius: 4px !important;
}

/* Submenu dropdown offsets */
.sidebar-submenu {
  padding-left: 1.75rem !important;
  margin: 2px 8px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 0.1rem !important;
}

.sidebar-submenu a.submenu-item {
  height: 30px !important;
  font-size: 11px !important;
  padding: 0 10px !important;
  border-radius: 6px !important;
  color: var(--pulse-text-gray) !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
}

.sidebar-submenu a.submenu-item i {
  font-size: 0.95rem !important;
  color: #94a3b8 !important;
}

.sidebar-submenu a.submenu-item:hover {
  background-color: #f8fafc !important;
  color: var(--pulse-text-dark) !important;
}

.sidebar-submenu a.submenu-item.active {
  background-color: var(--pulse-accent-bg) !important;
  color: var(--pulse-primary) !important;
  font-weight: 600 !important;
}

/* Sidebar Collapsed State adjustments (72px collapsed width) */
.app-layout:not(.sidebar-expanded):not(.mobile-sidebar-active) .app-sidebar {
  width: 72px !important;
}

.app-layout:not(.sidebar-expanded):not(.mobile-sidebar-active)
  .app-sidebar
  .sidebar-brand-header {
  justify-content: center !important;
  padding: 0 !important;
}

.app-layout:not(.sidebar-expanded):not(.mobile-sidebar-active)
  .sidebar-brand-text,
.app-layout:not(.sidebar-expanded):not(.mobile-sidebar-active)
  .sidebar-toggle-inner-btn,
.app-layout:not(.sidebar-expanded):not(.mobile-sidebar-active)
  .sidebar-category-title,
.app-layout:not(.sidebar-expanded):not(.mobile-sidebar-active) .dropdown-arrow,
.app-layout:not(.sidebar-expanded):not(.mobile-sidebar-active)
  .sidebar-nav-item
  .nav-label,
.app-layout:not(.sidebar-expanded):not(.mobile-sidebar-active)
  .sidebar-submenu {
  display: none !important;
}

.app-layout:not(.sidebar-expanded):not(.mobile-sidebar-active)
  .app-sidebar
  .sidebar-category-divider {
  display: block !important;
}

.app-layout:not(.sidebar-expanded):not(.mobile-sidebar-active)
  .app-sidebar
  .sidebar-nav-item {
  width: 44px !important;
  height: 44px !important;
  margin: 4px auto !important;
  padding: 0 !important;
  justify-content: center !important;
  border-radius: 8px !important;
}

.app-layout:not(.sidebar-expanded):not(.mobile-sidebar-active)
  .app-sidebar
  .sidebar-nav-item.active::before {
  left: 2px !important;
  height: 40% !important;
  top: 30% !important;
}

/* Sidebar bottom promo widget */
.sidebar-promo-card-wrapper {
  padding: 0.5rem 0.75rem !important;
  margin-top: auto !important;
  width: 100% !important;
}

.sidebar-promo-card {
  background: var(--brand-gradient) !important;
  border-radius: 12px !important;
  padding: 1rem !important;
  color: #ffffff !important;
  position: relative !important;
  box-shadow: 0 4px 12px rgba(14, 165, 233, 0.15) !important;
  overflow: hidden !important;
}

.sidebar-promo-card .promo-badge {
  background: rgba(255, 255, 255, 0.15) !important;
  color: #ffffff !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
  font-size: 8px !important;
  font-weight: 700 !important;
  padding: 2px 8px !important;
  border-radius: 20px !important;
  text-transform: uppercase !important;
  margin-bottom: 8px !important;
}

.sidebar-promo-card .promo-title {
  font-size: 12px !important;
  font-weight: 700 !important;
  margin-bottom: 4px !important;
  color: #ffffff !important;
}

.sidebar-promo-card .promo-desc {
  font-size: 9.5px !important;
  color: rgba(255, 255, 255, 0.85) !important;
  margin-bottom: 12px !important;
  line-height: 1.3 !important;
}

.sidebar-promo-card .btn-promo-action {
  background-color: #ffffff !important;
  color: var(--accent) !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 4px !important;
  width: 100% !important;
  padding: 5px 0 !important;
  border-radius: 6px !important;
  font-size: 10.5px !important;
  font-weight: 700 !important;
  text-decoration: none !important;
  transition: all 0.15s ease !important;
}

.sidebar-promo-card .btn-promo-action:hover {
  background-color: rgba(255, 255, 255, 0.9) !important;
  box-shadow: 0 2px 8px rgba(255, 255, 255, 0.2) !important;
}

.app-layout:not(.sidebar-expanded):not(.mobile-sidebar-active)
  .sidebar-promo-card-wrapper {
  display: none !important;
}

/* ==================================================================
   Topbar & Header Alignment (Right Side of Sidebar)
   ================================================================== */
.app-topbar {
  background-color: #ffffff !important;
  border-bottom: 1px solid var(--pulse-border-light) !important;
  box-shadow: none !important;
  height: var(--header-height) !important;
  padding: 0 1.5rem !important;
  left: var(--sidebar-width) !important;
  width: auto !important;
  right: 0 !important;
  max-width: calc(100% - var(--sidebar-width)) !important;
  z-index: 1000 !important;
  position: fixed !important;
  top: 0 !important;
  transition:
    left 0.3s cubic-bezier(0.4, 0, 0.2, 1),
    max-width 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

body.dark-theme .app-topbar {
  background-color: #0f172a !important;
  border-bottom-color: rgba(255, 255, 255, 0.08) !important;
}

/* Center Section Search Input style */
.topbar-search-container {
  background-color: #f8fafc !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 8px !important;
  height: 34px !important;
  padding: 0 12px !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
}

body.dark-theme .topbar-search-container {
  background-color: rgba(255, 255, 255, 0.02) !important;
  border-color: rgba(255, 255, 255, 0.08) !important;
}

.topbar-search-input {
  border: none !important;
  background: transparent !important;
  color: var(--pulse-text-dark) !important;
  font-size: 11.5px !important;
  width: 250px !important;
  outline: none !important;
}

body.dark-theme .topbar-search-input {
  color: #ffffff !important;
}

.topbar-search-icon {
  color: #94a3b8 !important;
  font-size: 13px !important;
}

/* Sparkles AI Action Button on Right */
.btn-header-add {
  background: var(--brand-gradient) !important;
  color: #ffffff !important;
  font-size: 11.5px !important;
  font-weight: 600 !important;
  padding: 6px 14px !important;
  border-radius: 8px !important;
  border: none !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  box-shadow: 0 2px 6px rgba(14, 165, 233, 0.15) !important;
  transition: all 0.2s ease !important;
}

.btn-header-add:hover {
  background: var(--brand-gradient) !important;
  background-position: 100% 0 !important;
  box-shadow: 0 4px 10px rgba(236, 72, 153, 0.25) !important;
  transform: translateY(-0.5px) !important;
}

/* User Circular Profile Avatar styling */
.circle-avatar-profile {
  border: 1.5px solid var(--pulse-border-light) !important;
  padding: 1px !important;
  transition: border-color 0.15s ease !important;
}

.circle-avatar-profile:hover {
  border-color: var(--pulse-primary) !important;
}

/* Main content area layouts offset dynamic adjustment */
/* ==================================================================
   Pulse-Inspired CRM Design System Overhaul & Parity Layout Rules
   ================================================================== */

:root {
  --sidebar-width-expanded: 260px;
  --sidebar-width-collapsed: 80px;
  --topbar-height: 56px;
  --color-bg: var(--bg-base);
  --color-sidebar: var(--bg-sidebar);
  --color-primary: var(--accent);
  --color-border: var(--border);
  --color-text-primary: var(--text-primary);
  --color-text-secondary: var(--text-secondary);
  --color-hover: var(--gray-100);
  --font-family: var(--font-primary);

  /* Retain backward-compatible height/width indicators */
  --header-height: var(--topbar-height);
  --sidebar-width: var(--sidebar-width-expanded);
}

/* Ensure clean base viewport normalization */
html,
body {
  background-color: var(--color-bg) !important;
  background-image: var(--backdrop-mesh) !important;
  background-attachment: fixed !important;
  font-family: var(--font-family) !important;
  color: var(--color-text-primary) !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow-x: hidden !important;
}

/* Main Layout container */
.app-layout {
  display: flex !important;
  min-height: 100vh !important;
  background-color: var(--color-bg) !important;
}

/* 1. Sidebar Design Overhaul (BEM: .sidebar) */
@media (min-width: 992px) {
  .sidebar {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    bottom: 0 !important;
    height: 100vh !important;
    width: var(--sidebar-width-expanded) !important;
    background: linear-gradient(180deg, #0b192c 0%, #0f172a 60%, #1e293b 100%) !important;
    backdrop-filter: var(--glass-blur) saturate(160%) !important;
    -webkit-backdrop-filter: var(--glass-blur) saturate(160%) !important;
    border-right: 1px solid rgba(255, 255, 255, 0.08) !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25) !important;
    z-index: 1050 !important;
    display: flex !important;
    flex-direction: column !important;
    transition: width 0.15s ease-in-out !important;
    padding: 12px !important;
    overflow-y: hidden !important;
  }
}

body.dark-theme .sidebar {
  background: linear-gradient(180deg, #0b192c 0%, #0f172a 60%, #1e293b 100%) !important;
  border-right: 1px solid rgba(255, 255, 255, 0.08) !important;
}

.sidebar__header {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  height: calc(var(--topbar-height) - 16px) !important;
  margin-bottom: 12px !important;
  width: 100% !important;
}

.sidebar__brand {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
}

.sidebar__logo {
  width: 28px !important;
  height: 28px !important;
  background: linear-gradient(
    155deg,
    #27272a 0%,
    #09090b 60%,
    #18181b 100%
  ) !important;
  background-image:
    linear-gradient(155deg, rgba(255, 255, 255, 0.18) 0%, transparent 45%),
    linear-gradient(155deg, #27272a 0%, #09090b 60%, #18181b 100%) !important;
  border-radius: var(--radius-btn) !important;
  box-shadow:
    0 2px 6px rgba(0, 0, 0, 0.25),
    inset 0 1px 0 rgba(255, 255, 255, 0.12) !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.sidebar__logo-icon {
  font-size: 14px !important;
  color: #ffffff !important;
}

.sidebar__title {
  font-size: 16px !important;
  font-weight: 700 !important;
  color: #ffffff !important;
  letter-spacing: -0.02em !important;
}

body.dark-theme .sidebar__title {
  color: #ffffff !important;
}

.sidebar__body {
  flex: 1 !important;
  overflow-y: auto !important;
  margin-right: -8px !important;
  padding-right: 8px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 2px !important;
}

.sidebar__category {
  font-size: 11px !important;
  font-weight: 700 !important;
  color: #94a3b8 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.08em !important;
  margin-top: 24px !important;
  margin-bottom: 8px !important;
  padding-left: 12px !important;
  flex-shrink: 0 !important;
}

.sidebar__category:first-of-type {
  margin-top: 8px !important;
}

.sidebar__item {
  height: 40px !important;
  padding: 0 12px !important;
  border-radius: var(--radius-md) !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  color: #cbd5e1 !important;
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  text-decoration: none !important;
  transition: all 0.15s ease !important;
  border: none !important;
  background-color: transparent !important;
  cursor: pointer !important;
  position: relative !important;
  flex-shrink: 0 !important;
}

body.dark-theme .sidebar__item {
  color: #cbd5e1 !important;
}

.sidebar__item:hover {
  background-color: rgba(255, 255, 255, 0.08) !important;
  color: #ffffff !important;
}

body.dark-theme .sidebar__item:hover {
  background-color: rgba(255, 255, 255, 0.08) !important;
  color: #ffffff !important;
}

.sidebar__item:hover .sidebar__icon,
.sidebar__item:hover .sidebar__arrow {
  color: #38bdf8 !important;
}

body.dark-theme .sidebar__item:hover .sidebar__icon {
  color: #38bdf8 !important;
}

.sidebar__item:focus,
.sidebar__item:active,
.sidebar__subitem:focus,
.sidebar__subitem:active {
  outline: none !important;
  box-shadow: none !important;
  border: none !important;
}

.sidebar__icon {
  font-size: 18px !important;
  width: 18px !important;
  color: #94a3b8 !important;
  transition: color 0.15s ease !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
}

body.dark-theme .sidebar__icon {
  color: #94a3b8 !important;
}

.sidebar__label {
  flex: 1 !important;
  white-space: nowrap !important;
  opacity: 1 !important;
  color: inherit !important;
  transition: opacity 0.15s ease !important;
  line-height: 1.2 !important;
}

.sidebar__arrow {
  font-size: 12px !important;
  color: #64748b !important;
  transition: transform 0.15s ease, color 0.15s ease !important;
  margin-left: auto !important;
}

.sidebar__item[aria-expanded="true"] .sidebar__arrow {
  transform: rotate(180deg) !important;
  color: #38bdf8 !important;
}

/* Active menu item styling - clean rounded pill highlight */
.sidebar__item--active {
  background: linear-gradient(90deg, rgba(56, 189, 248, 0.2) 0%, rgba(37, 99, 235, 0.25) 100%) !important;
  color: #38bdf8 !important;
  font-weight: 600 !important;
  border-radius: var(--radius-md) !important;
}

body.dark-theme .sidebar__item--active {
  background: linear-gradient(
    90deg,
    rgba(56, 189, 248, 0.2) 0%,
    rgba(37, 99, 235, 0.25) 100%
  ) !important;
}

.sidebar__item--active .sidebar__icon,
.sidebar__item--active .sidebar__label,
.sidebar__item--active .sidebar__arrow {
  color: #38bdf8 !important;
}

.sidebar__item--active::before {
  content: "" !important;
  position: absolute !important;
  left: 0 !important;
  top: 18% !important;
  height: 64% !important;
  width: 4px !important;
  background-color: #38bdf8 !important;
  border-radius: var(--radius-pill) !important;
}

/* Submenus layout with clean minimal connecting line */
.sidebar__submenu {
  position: relative !important;
  margin-left: 20px !important;
  padding-left: 10px !important;
  border-left: 1px solid rgba(255, 255, 255, 0.12) !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 2px !important;
  margin-top: 3px !important;
  margin-bottom: 4px !important;
  flex-shrink: 0 !important;
}

.sidebar__subitem {
  height: 36px !important;
  padding: 0 10px !important;
  border-radius: var(--radius-sm) !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  color: #94a3b8 !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  text-decoration: none !important;
  transition: all 0.15s ease !important;
  position: relative !important;
  flex-shrink: 0 !important;
}

.sidebar__subitem i {
  font-size: 16px !important;
  width: 16px !important;
  color: #64748b !important;
  flex-shrink: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: color 0.15s ease !important;
}

.sidebar__subitem:hover {
  background-color: rgba(255, 255, 255, 0.06) !important;
  color: #ffffff !important;
}

.sidebar__subitem:hover i {
  color: #38bdf8 !important;
}

/* Subitem active state - clean unified highlight */
.sidebar__subitem--active {
  background-color: rgba(56, 189, 248, 0.18) !important;
  color: #38bdf8 !important;
  font-weight: 600 !important;
  border-radius: var(--radius-sm) !important;
}

.sidebar__subitem--active i {
  color: #38bdf8 !important;
}

/* 2. Topbar Design Overhaul */
.topbar {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  height: var(--topbar-height) !important;
  background: var(--glass-surface) !important;
  backdrop-filter: var(--glass-blur) saturate(160%) !important;
  -webkit-backdrop-filter: var(--glass-blur) saturate(160%) !important;
  border-bottom: 1px solid var(--glass-border) !important;
  box-shadow: var(--glass-shadow) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 0 16px !important;
  z-index: 1000 !important;
  transition: left 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
  margin: 8px;
  border-radius: var(--radius-card);
}

/* 3. Main wrapper and dynamic layout transitions */
.main-wrapper {
  flex: 1 !important;
  padding-top: var(--topbar-height) !important;
  padding-left: 0 !important;
  background-color: var(--bg-base) !important;
  min-height: 100vh !important;
  display: flex !important;
  flex-direction: column !important;
  transition: padding-left 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

body.dark-theme .main-wrapper {
  background-color: var(--bg-base) !important;
}

.content-area {
  padding: 16px !important;
  flex: 1 !important;
}

/* 4. Collapsed Desktop Sidebar transitions (Only Desktop >= 992px) */
@media (min-width: 992px) {
  .topbar {
    left: var(--sidebar-width-expanded) !important;
  }

  .main-wrapper {
    padding-left: var(--sidebar-width-expanded) !important;
  }

  .app-layout:not(.sidebar-expanded) .sidebar {
    width: var(--sidebar-width-collapsed) !important;
    padding: 16px 8px !important;
    align-items: center !important;
  }

  .app-layout:not(.sidebar-expanded) .sidebar__header {
    justify-content: center !important;
  }

  .app-layout:not(.sidebar-expanded) .sidebar__brand {
    justify-content: center !important;
  }

  .app-layout:not(.sidebar-expanded) .sidebar__title,
  .app-layout:not(.sidebar-expanded) .sidebar__category,
  .app-layout:not(.sidebar-expanded) .sidebar__label,
  .app-layout:not(.sidebar-expanded) .sidebar__arrow,
  .app-layout:not(.sidebar-expanded) .sidebar__submenu {
    display: none !important;
  }

  .app-layout:not(.sidebar-expanded) .sidebar__item {
    width: 36px !important;
    height: 36px !important;
    padding: 0 !important;
    justify-content: center !important;
    margin: 2px 0 !important;
  }

  .app-layout:not(.sidebar-expanded) .sidebar__item--active::before {
    left: 2px !important;
  }

  .app-layout:not(.sidebar-expanded) .topbar {
    left: var(--sidebar-width-collapsed) !important;
  }

  .app-layout:not(.sidebar-expanded) .main-wrapper {
    padding-left: var(--sidebar-width-collapsed) !important;
  }
}

/* Badge-code utility for codes, keys, and Roman columns */
.badge-code {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 3px 8px !important;
  font-family: var(--font-primary) !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  color: var(--text-secondary) !important;
  background-color: var(--bg-subtle) !important;
  border: none !important;
  border-radius: 6px !important;
  text-align: center !important;
  white-space: nowrap !important;
}

body.dark-theme .badge-code {
  background-color: rgba(255, 255, 255, 0.08) !important;
  color: var(--text-secondary) !important;
}

/* ------------------------------------------------------------------
   GLOBAL FIX: single continuous header gradient (not per-cell)
   Placed at end of file so it wins over every earlier per-th rule
   above, regardless of selector specificity collisions.
   Covers every table-header pattern used across the app (20+ pages).
   ------------------------------------------------------------------ */
.table-premium thead,
.teacher-table thead,
.teacher-detail-table thead,
.activity-detail-table thead,
.sfs-table thead,
.fee-table,
.fsr-table,
.fees-struct-table,
.admissions-table-header,
.modal-body .table-responsive table thead,
#qualificationsTable thead,
#edit_qualificationsTable thead,
#addLeadModal .table-responsive table thead,
#editLeadModal .table-responsive table thead,
.dashboard-glass-container .table-premium thead,
.content-area table.table-premium thead,
.content-area table.teacher-table thead,
.content-area table.teacher-detail-table thead,
.content-area table.table thead {
  background-image: var(--table-head-grad) !important;
  background-color: transparent !important;
}

.table-premium thead th,
.table-premium th,
.teacher-table thead th,
.teacher-detail-table thead th,
.activity-detail-table thead th,
.sfs-table thead th,
.fee-table th,
.fsr-table th,
.fees-struct-table th,
.admissions-table-header th,
.modal-body .table-responsive table thead th,
#qualificationsTable thead th,
#edit_qualificationsTable thead th,
#addLeadModal .table-responsive table thead th,
#editLeadModal .table-responsive table thead th,
.dashboard-glass-container .table-premium thead th,
.content-area table.table-premium th,
.content-area table.teacher-table th,
.content-area table.teacher-detail-table th,
.content-area table.table th {
  background: transparent !important;
  background-image: none !important;
}

/* ==================================================================
   FLOATING SHELL OVERRIDES -- Separated, Rounded Panels (8px Margin & Radius)
   ================================================================== */

/* -- Top Scroll Guard: hides scrolled content in the 8px top margin gap -- */
.main-wrapper.main-wrapper::before,
.main-content.main-content::before {
  content: "";
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 8px;
  background-color: var(--bg-base) !important;
  background-image: var(--backdrop-mesh) !important;
  background-attachment: fixed !important;
  border: none !important;
  box-shadow: none !important;
  outline: none !important;
  z-index: 1001 !important;
  pointer-events: none;
}

/* -- Content Area & Footer: Floating Panel Appearance -- */
.content-area {
  background: var(--bg-card) !important;
  /* Solid background prevents backdrop overlay issues on child modals */
  border: 1px solid var(--glass-border) !important;
  border-radius: 8px !important;
  box-shadow: var(--glass-shadow) !important;
  margin: 8px 8px 4px 8px !important;
  padding: 20px !important;
}

.footer {
  background: var(--bg-card) !important;
  /* Matches content-area solid styling */
  border: 1px solid var(--glass-border) !important;
  border-radius: 8px !important;
  box-shadow: var(--glass-shadow) !important;
  margin: 4px 8px 8px 8px !important;
  padding: 12px 16px !important;
  width: auto !important;
  padding-left: 1.5rem !important;
}

.app-layout.sidebar-expanded .footer {
  padding-left: 1.5rem !important;
}

body.dark-theme .content-area,
body.dark-theme .footer {
  background: var(--bg-card) !important;
  border-color: var(--glass-border) !important;
}

/* -- Layout & Navigation Panels -- */
@media (min-width: 992px) {
  /* Sidebar panel layout */
  .sidebar.sidebar {
    position: fixed !important;
    top: 8px !important;
    left: 8px !important;
    bottom: 8px !important;
    height: calc(100vh - 16px) !important;
    width: var(--sidebar-width-expanded) !important;
    margin: 0 !important;
    border-radius: 8px !important;
    border: 1px solid var(--glass-border) !important;
    box-shadow: var(--glass-shadow) !important;
  }

  body.dark-theme .sidebar.sidebar {
    border-color: var(--glass-border) !important;
  }

  .app-layout:not(.sidebar-expanded) .sidebar.sidebar {
    width: var(--sidebar-width-collapsed) !important;
  }

  /* Topbar panel layout */
  .topbar.topbar {
    position: fixed !important;
    top: 8px !important;
    left: calc(var(--sidebar-width-expanded) + 16px) !important;
    right: 8px !important;
    width: auto !important;
    height: var(--topbar-height) !important;
    margin: 0 !important;
    border-radius: 8px !important;
    border: 1px solid var(--glass-border) !important;
    box-shadow: var(--glass-shadow) !important;
    background: var(--bg-card) !important;
    /* Solid background prevents scrolled content from peeking through */
  }

  body.dark-theme .topbar.topbar {
    border-color: var(--glass-border) !important;
    background: var(--bg-card) !important;
  }

  .app-layout:not(.sidebar-expanded) .topbar.topbar {
    left: calc(var(--sidebar-width-collapsed) + 16px) !important;
  }

  /* Main Wrapper / Content spacing adjustments */
  .main-wrapper.main-wrapper,
  .main-content.main-content {
    padding-left: calc(var(--sidebar-width-expanded) + 8px) !important;
    padding-top: calc(var(--topbar-height) + 8px) !important;
    padding-right: 0 !important;
    padding-bottom: 0 !important;
  }

  .app-layout.sidebar-expanded .main-wrapper.main-wrapper,
  .app-layout.sidebar-expanded .main-content.main-content {
    padding-left: calc(var(--sidebar-width-expanded) + 8px) !important;
  }

  .app-layout:not(.sidebar-expanded) .main-wrapper.main-wrapper,
  .app-layout:not(.sidebar-expanded) .main-content.main-content {
    padding-left: calc(var(--sidebar-width-collapsed) + 8px) !important;
  }
}

@media (max-width: 991px) {
  /* Mobile adjustments */
  .topbar.topbar {
    position: fixed !important;
    top: 8px !important;
    left: 8px !important;
    right: 8px !important;
    width: auto !important;
    height: var(--topbar-height) !important;
    margin: 0 !important;
    border-radius: 8px !important;
    border: 1px solid var(--glass-border) !important;
    box-shadow: var(--glass-shadow) !important;
    background: var(--bg-card) !important;
    /* Solid background prevents scrolled content from peeking through */
  }

  body.dark-theme .topbar.topbar {
    border-color: var(--glass-border) !important;
    background: var(--bg-card) !important;
  }

  .main-wrapper.main-wrapper,
  .main-content.main-content {
    padding-left: 0 !important;
    padding-top: calc(var(--topbar-height) + 8px) !important;
    padding-right: 0 !important;
    padding-bottom: 0 !important;
  }
}

/* -- 6. AI Insights Drawer Overlays & Animations ------------------ */
.ai-insights-overlay {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  background: rgba(15, 23, 42, 0.4) !important;
  backdrop-filter: blur(4px) !important;
  -webkit-backdrop-filter: blur(4px) !important;
  z-index: 10050 !important;
  display: flex;
  justify-content: flex-end !important;
}

.ai-insights-overlay.d-none {
  display: none !important;
}

.ai-insights-drawer {
  width: 400px !important;
  max-width: calc(100% - 16px) !important;
  height: calc(100vh - 16px) !important;
  background: rgba(255, 255, 255, 0.65) !important;
  backdrop-filter: blur(24px) saturate(190%) !important;
  -webkit-backdrop-filter: blur(24px) saturate(190%) !important;
  border: 1px solid rgba(255, 255, 255, 0.4) !important;
  border-radius: 12px !important;
  box-shadow:
    0 30px 60px rgba(0, 0, 0, 0.1),
    inset 0 1px 0 rgba(255, 255, 255, 0.3) !important;
  display: flex !important;
  flex-direction: column !important;
  animation: aiSlideInRight 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
  position: relative !important;
  margin: 8px !important;
  overflow: hidden !important;
}

body.dark-theme .ai-insights-drawer {
  background: rgba(15, 22, 42, 0.65) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  box-shadow:
    0 30px 60px rgba(0, 0, 0, 0.4),
    inset 0 1px 0 rgba(255, 255, 255, 0.05) !important;
}

@keyframes aiSlideInRight {
  from {
    transform: translateX(calc(100% + 8px));
  }

  to {
    transform: translateX(0);
  }
}

.ai-insights-header {
  padding: 1.25rem !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.3) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  border-top-left-radius: 12px !important;
  border-top-right-radius: 12px !important;
  background: rgba(255, 255, 255, 0.25) !important;
}

body.dark-theme .ai-insights-header {
  border-bottom: 1px solid rgba(255, 255, 255, 0.05) !important;
  background: rgba(0, 0, 0, 0.15) !important;
}

.ai-insights-header h5 {
  font-family: var(--font-heading) !important;
  font-size: var(--text-base) !important;
  color: var(--text-primary) !important;
}

.ai-sparkle-glow {
  color: var(--accent) !important;
  font-size: 1.25rem !important;
  filter: drop-shadow(0 0 6px rgba(14, 165, 233, 0.6)) !important;
  animation: aiPulseSparkle 2s infinite ease-in-out !important;
}

@keyframes aiPulseSparkle {
  0%,
  100% {
    transform: scale(1);
    filter: drop-shadow(0 0 4px rgba(14, 165, 233, 0.4));
  }

  50% {
    transform: scale(1.15);
    filter: drop-shadow(0 0 10px rgba(236, 72, 153, 0.8));
  }
}

.ai-drawer-close {
  background: transparent !important;
  border: none !important;
  color: var(--text-muted) !important;
  font-size: 1.25rem !important;
  padding: 4px !important;
  border-radius: var(--radius-xs) !important;
  cursor: pointer !important;
  transition: var(--transition) !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.ai-drawer-close:hover {
  background: var(--bg-sec) !important;
  color: var(--text-primary) !important;
}

.ai-insights-body {
  flex: 1 !important;
  overflow: hidden !important;
  padding: 1.25rem !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 12px !important;
}

.ai-compact-stats-grid {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 8px !important;
  margin-bottom: 4px !important;
}

.ai-compact-stat-card {
  position: relative !important;
  background: rgba(255, 255, 255, 0.45) !important;
  border: 1px solid rgba(255, 255, 255, 0.5) !important;
  border-radius: 12px !important;
  padding: 12px 8px !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  text-align: center !important;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.03) !important;
}

body.dark-theme .ai-compact-stat-card {
  background: rgba(30, 41, 59, 0.4) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2) !important;
}

.ai-compact-stat-card .ai-icon-badge {
  width: 32px !important;
  height: 32px !important;
  border-radius: 50% !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin-bottom: 6px !important;
  font-size: 1.1rem !important;
  transition: transform 0.3s ease !important;
}

/* Fee Forecast Badge (Green) */
.ai-compact-stat-card.fee-card .ai-icon-badge {
  background: rgba(16, 185, 129, 0.12) !important;
  color: #10b981 !important;
}

body.dark-theme .ai-compact-stat-card.fee-card .ai-icon-badge {
  background: rgba(16, 185, 129, 0.2) !important;
  color: #34d399 !important;
}

/* Lead Conv. Badge (Blue) */
.ai-compact-stat-card.lead-card .ai-icon-badge {
  background: rgba(14, 165, 233, 0.12) !important;
  color: #0ea5e9 !important;
}

body.dark-theme .ai-compact-stat-card.lead-card .ai-icon-badge {
  background: rgba(14, 165, 233, 0.2) !important;
  color: #38bdf8 !important;
}

/* Retention Badge (Purple) */
.ai-compact-stat-card.retention-card .ai-icon-badge {
  background: rgba(139, 92, 246, 0.12) !important;
  color: #8b5cf6 !important;
}

body.dark-theme .ai-compact-stat-card.retention-card .ai-icon-badge {
  background: rgba(139, 92, 246, 0.2) !important;
  color: #a78bfa !important;
}

/* Hover effects */
.ai-compact-stat-card:hover {
  transform: translateY(-4px) !important;
}

.ai-compact-stat-card.fee-card:hover {
  border-color: rgba(16, 185, 129, 0.5) !important;
  box-shadow: 0 10px 20px rgba(16, 185, 129, 0.08) !important;
}

.ai-compact-stat-card.lead-card:hover {
  border-color: rgba(14, 165, 233, 0.5) !important;
  box-shadow: 0 10px 20px rgba(14, 165, 233, 0.08) !important;
}

.ai-compact-stat-card.retention-card:hover {
  border-color: rgba(139, 92, 246, 0.5) !important;
  box-shadow: 0 10px 20px rgba(139, 92, 246, 0.08) !important;
}

.ai-compact-stat-card:hover .ai-icon-badge {
  transform: scale(1.1) !important;
}

.ai-stat-title {
  font-size: 10px !important;
  font-weight: 600 !important;
  color: var(--text-secondary) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
  margin-bottom: 2px !important;
}

.ai-stat-value {
  font-size: 15px !important;
  font-weight: 800 !important;
  color: var(--text-primary) !important;
  font-family: var(--font-heading) !important;
}

.ai-chat-conversation {
  flex: 1 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 12px !important;
  overflow-y: auto !important;
  padding-right: 4px !important;
  margin-bottom: 8px !important;
}

.ai-chat-conversation::-webkit-scrollbar {
  width: 4px !important;
}

.ai-chat-conversation::-webkit-scrollbar-track {
  background: transparent !important;
}

.ai-chat-conversation::-webkit-scrollbar-thumb {
  background: var(--border) !important;
  border-radius: 2px !important;
}

.ai-chat-message {
  display: flex !important;
  flex-direction: column !important;
  max-width: 85% !important;
}

.ai-chat-message.user {
  align-self: flex-end !important;
}

.ai-chat-message.assistant {
  align-self: flex-start !important;
}

.ai-chat-bubble {
  padding: 8px 12px !important;
  border-radius: 12px !important;
  font-size: var(--text-xs) !important;
  line-height: 1.5 !important;
  word-break: break-word !important;
}

.ai-chat-message.user .ai-chat-bubble {
  background: var(--brand-gradient) !important;
  color: #ffffff !important;
  border-bottom-right-radius: 2px !important;
}

.ai-chat-message.assistant .ai-chat-bubble {
  background: rgba(255, 255, 255, 0.4) !important;
  border: 1px solid rgba(255, 255, 255, 0.45) !important;
  color: var(--text-primary) !important;
  border-bottom-left-radius: 2px !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.02) !important;
}

body.dark-theme .ai-chat-message.assistant .ai-chat-bubble {
  background: rgba(255, 255, 255, 0.04) !important;
  border: 1px solid rgba(255, 255, 255, 0.07) !important;
}

.ai-chat-input-section {
  margin-top: auto !important;
}

.ai-chat-suggested-prompts {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 6px !important;
  margin-bottom: 8px !important;
}

.ai-chat-prompt-pill {
  background: rgba(255, 255, 255, 0.4) !important;
  border: 1px solid rgba(255, 255, 255, 0.4) !important;
  border-radius: var(--radius-pill) !important;
  padding: 3px 10px !important;
  font-size: var(--text-xxs) !important;
  color: var(--text-secondary) !important;
  cursor: pointer !important;
  transition: var(--transition) !important;
}

.ai-chat-prompt-pill:hover {
  border-color: var(--accent) !important;
  color: var(--accent) !important;
  background: rgba(255, 255, 255, 0.6) !important;
}

body.dark-theme .ai-chat-prompt-pill {
  background: rgba(255, 255, 255, 0.04) !important;
  border: 1px solid rgba(255, 255, 255, 0.07) !important;
}

body.dark-theme .ai-chat-prompt-pill:hover {
  background: rgba(255, 255, 255, 0.08) !important;
}

.ai-drawer-chat-input-wrapper {
  display: flex !important;
  background: rgba(255, 255, 255, 0.55) !important;
  border: 1px solid rgba(255, 255, 255, 0.5) !important;
  border-radius: var(--radius-md) !important;
  padding: 6px 10px !important;
  align-items: center !important;
  gap: 8px !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.02) !important;
  transition: var(--transition) !important;
}

.ai-drawer-chat-input-wrapper:focus-within {
  border-color: var(--accent) !important;
  box-shadow: 0 6px 16px rgba(14, 165, 233, 0.1) !important;
}

body.dark-theme .ai-drawer-chat-input-wrapper {
  background: rgba(255, 255, 255, 0.03) !important;
  border: 1px solid rgba(255, 255, 255, 0.06) !important;
}

.ai-drawer-chat-input-wrapper input {
  flex: 1 !important;
  border: none !important;
  background: transparent !important;
  font-size: var(--text-xs) !important;
  color: var(--text-primary) !important;
  outline: none !important;
}

.ai-drawer-chat-input-wrapper button {
  background: transparent !important;
  border: none !important;
  color: var(--accent) !important;
  font-size: 1.1rem !important;
  cursor: pointer !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: var(--transition) !important;
}

.ai-drawer-chat-input-wrapper button:hover {
  transform: scale(1.1) !important;
}

.ai-insights-footer {
  padding: 0.75rem 1.25rem !important;
  border-top: 1px solid rgba(255, 255, 255, 0.3) !important;
  background: rgba(255, 255, 255, 0.25) !important;
  font-size: var(--text-xxs) !important;
  color: var(--text-muted) !important;
  border-bottom-left-radius: 12px !important;
  border-bottom-right-radius: 12px !important;
}

body.dark-theme .ai-insights-footer {
  border-top: 1px solid rgba(255, 255, 255, 0.05) !important;
  background: rgba(0, 0, 0, 0.15) !important;
}

/* ==========================================================================
   ATTENDANCE MODULE DESIGN SYSTEM EXTENSIONS
   ========================================================================== */
.att-stat-card {
  background: var(--surface-color, #ffffff);
  border: 1px solid var(--border-color, #e2e8f0);
  border-radius: var(--radius-card, 12px);
  padding: 1rem 1.25rem;
  transition: all 0.2s ease-in-out;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}

.att-stat-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
}

.att-stat-card__label {
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 0.35rem;
}

.att-stat-card__val {
  font-size: 1.65rem;
  font-weight: 800;
  line-height: 1.2;
}

.att-stat-card--total {
  border-top: 3px solid #64748b;
}

.att-stat-card--present {
  border-top: 3px solid #10b981;
}

.att-stat-card--absent {
  border-top: 3px solid #f43f5e;
}

.att-stat-card--late {
  border-top: 3px solid #f59e0b;
}

.att-stat-card--halfday {
  border-top: 3px solid #06b6d4;
}

.att-stat-card--leave {
  border-top: 3px solid #6366f1;
}

/* Segmented Status Selector Pills */
.att-status-pill-group {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  justify-content: center;
}

.att-status-pill {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 5px 12px;
  font-size: 0.78rem;
  font-weight: 600;
  border-radius: 20px;
  border: 1px solid #cbd5e1;
  color: #64748b;
  background: #f8fafc;
  cursor: pointer;
  user-select: none;
  transition: all 0.15s ease-in-out;
  margin: 0;
}

.att-status-pill input[type="radio"] {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.att-status-pill:hover {
  border-color: #94a3b8;
  background: #f1f5f9;
}

/* Present Pill */
.att-status-pill--present.att-status-pill--active,
.att-status-pill:has(input[value="present"]:checked) {
  background: #ecfdf5;
  border-color: #10b981;
  color: #047857;
}

/* Absent Pill */
.att-status-pill--absent.att-status-pill--active,
.att-status-pill:has(input[value="absent"]:checked) {
  background: #fff1f2;
  border-color: #f43f5e;
  color: #be123c;
}

/* Late Pill */
.att-status-pill--late.att-status-pill--active,
.att-status-pill:has(input[value="late"]:checked) {
  background: #fffbeb;
  border-color: #f59e0b;
  color: #b45309;
}

/* Half Day Pill */
.att-status-pill--halfday.att-status-pill--active,
.att-status-pill:has(input[value="half_day"]:checked) {
  background: #ecfeff;
  border-color: #06b6d4;
  color: #0e7490;
}

/* Leave Pill */
.att-status-pill--leave.att-status-pill--active,
.att-status-pill:has(input[value="leave"]:checked) {
  background: #eef2ff;
  border-color: #6366f1;
  color: #4338ca;
}

/* Dark Mode Overrides for Attendance Status Pills */
body.dark-theme .att-stat-card {
  background: #1e293b;
  border-color: #334155;
}

body.dark-theme .att-status-pill {
  background: #0f172a;
  border-color: #334155;
  color: #94a3b8;
}

body.dark-theme .att-status-pill:has(input[value="present"]:checked) {
  background: rgba(16, 185, 129, 0.15);
  border-color: #10b981;
  color: #34d399;
}

body.dark-theme .att-status-pill:has(input[value="absent"]:checked) {
  background: rgba(244, 63, 94, 0.15);
  border-color: #f43f5e;
  color: #fb7185;
}

body.dark-theme .att-status-pill:has(input[value="late"]:checked) {
  background: rgba(245, 158, 11, 0.15);
  border-color: #f59e0b;
  color: #fbbf24;
}

body.dark-theme .att-status-pill:has(input[value="half_day"]:checked) {
  background: rgba(6, 182, 212, 0.15);
  border-color: #06b6d4;
  color: #22d3ee;
}

body.dark-theme .att-status-pill:has(input[value="leave"]:checked) {
  background: rgba(99, 102, 241, 0.15);
  border-color: #6366f1;
  color: #818cf8;
}

/* Compact Non-wrapping Pill Buttons */
.att-btn-pill {
  white-space: nowrap !important;
  height: 36px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 0.78rem !important;
  font-weight: 600 !important;
  padding: 0 14px !important;
  border-radius: 20px !important;
  line-height: 1 !important;
}

.att-filter-btn {
  height: 38px !important;
  font-size: 0.82rem !important;
  font-weight: 600 !important;
  white-space: nowrap !important;
}

/* Attendance Quick Action Pill Toolbar & Table Utilities */
.att-action-pill-group {
  display: inline-flex !important;
  align-items: center !important;
  gap: 2px !important;
  background-color: #f1f5f9 !important;
  padding: 2px 4px !important;
  border-radius: 30px !important;
  border: 1px solid #cbd5e1 !important;
}

body.dark-theme .att-action-pill-group {
  background-color: #1e293b !important;
  border-color: #334155 !important;
}

.att-action-icon-btn {
  width: 28px !important;
  height: 28px !important;
  min-width: 28px !important;
  min-height: 28px !important;
  padding: 0 !important;
  border-radius: 50% !important;
  border: none !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: all 0.15s ease !important;
  background: transparent !important;
  box-shadow: none !important;
  cursor: pointer !important;
}

.att-action-icon-btn i {
  font-size: 0.95rem !important;
  line-height: 1 !important;
}

.att-action-icon-btn--present {
  color: #10b981 !important;
}

.att-action-icon-btn--present:hover {
  background-color: #d1fae5 !important;
  color: #047857 !important;
}

.att-action-icon-btn--absent {
  color: #f43f5e !important;
}

.att-action-icon-btn--absent:hover {
  background-color: #ffe4e6 !important;
  color: #be123c !important;
}

.att-action-icon-btn--clear {
  color: #64748b !important;
}

.att-action-icon-btn--clear:hover {
  background-color: #e2e8f0 !important;
  color: #334155 !important;
}

body.dark-theme .att-action-icon-btn--present:hover {
  background-color: rgba(16, 185, 129, 0.2) !important;
}

body.dark-theme .att-action-icon-btn--absent:hover {
  background-color: rgba(244, 63, 94, 0.2) !important;
}

body.dark-theme .att-action-icon-btn--clear:hover {
  background-color: rgba(148, 163, 184, 0.2) !important;
}

.att-col-num {
  width: 50px;
}

.att-col-roll {
  width: 100px;
}

.att-col-code {
  width: 120px;
}

.att-col-status {
  width: 380px;
}

.att-remark-input {
  height: 32px;
  font-size: 12px;
}

/* -----------------------------------------------------------------------------
   A4 PRINTABLE SHEET SYSTEM & FINANCIAL STATEMENTS
   ----------------------------------------------------------------------------- */
.print-only-header,
.print-only-footer {
  display: none;
}

@media print {
  @page {
    size: A4 portrait;
    margin: 10mm 12mm 12mm 12mm;
  }

  /* 1. Force-hide ALL Web Chrome & Navigation */
  header,
  footer,
  .topbar,
  .sidebar,
  .sidebar-overlay,
  .glass-bg-blob,
  .btn,
  .btn-admin-action,
  .table-search-box,
  .modal,
  .modal-backdrop,
  .no-print,
  #filterPanel,
  .content-wrapper > .d-flex.align-items-center.justify-content-between,
  .content-wrapper > .row.g-3.mb-4,
  .content-wrapper > .card-premium.mb-4,
  .card-premium > .card-header {
    display: none !important;
  }

  /* 2. Reset Layout Containers to 100% Full Width Sheet */
  html,
  body,
  .app-layout,
  .app-layout.sidebar-expanded,
  .app-layout:not(.sidebar-expanded),
  .main-wrapper,
  .main-wrapper.main-wrapper,
  .main-content,
  .main-content.main-content,
  .content-area,
  .content-wrapper,
  .card-premium,
  .card-body,
  .table-responsive {
    display: block !important;
    position: static !important;
    float: none !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    top: 0 !important;
    box-shadow: none !important;
    border: none !important;
    background: #ffffff !important;
    overflow: visible !important;
    transform: none !important;
  }

  /* 3. Official Letterhead Header */
  .print-only-header {
    display: block !important;
    width: 100% !important;
    border-bottom: 2px solid #0f172a !important;
    padding-bottom: 8px !important;
    margin-bottom: 15px !important;
    text-align: center !important;
  }

  .print-only-header h2 {
    font-size: 16pt !important;
    font-weight: 800 !important;
    color: #0f172a !important;
    margin: 0 0 3px 0 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
  }

  .print-only-header h4 {
    font-size: 11pt !important;
    font-weight: 700 !important;
    color: #334155 !important;
    margin: 0 0 8px 0 !important;
    letter-spacing: 0.8px !important;
    text-transform: uppercase !important;
  }

  .print-meta-bar {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    background: #f8fafc !important;
    border: 1px solid #cbd5e1 !important;
    border-radius: 4px !important;
    padding: 6px 12px !important;
    font-size: 8.5pt !important;
    color: #0f172a !important;
  }

  /* 4. Full Width Data Table */
  .table-premium {
    width: 100% !important;
    border-collapse: collapse !important;
    margin-top: 10px !important;
    margin-bottom: 15px !important;
  }

  .table-premium th,
  .table-premium td {
    border: 1px solid #64748b !important;
    padding: 5pt 7pt !important;
    font-size: 9pt !important;
    color: #000000 !important;
    background: transparent !important;
  }

  .table-premium th {
    background-color: #f1f5f9 !important;
    font-weight: bold !important;
    text-transform: uppercase !important;
    font-size: 8pt !important;
    color: #0f172a !important;
  }

  .table-premium tfoot td {
    background-color: #f8fafc !important;
    font-weight: bold !important;
    border-top: 2px solid #0f172a !important;
    font-size: 9.5pt !important;
  }

  /* 5. Official Signature Footer */
  .print-only-footer {
    display: flex !important;
    justify-content: space-between !important;
    margin-top: 50px !important;
    width: 100% !important;
    page-break-inside: avoid !important;
  }

  .print-sig-box {
    width: 30% !important;
    text-align: center !important;
    border-top: 1.5px solid #334155 !important;
    padding-top: 4px !important;
    font-size: 8.5pt !important;
    font-weight: bold !important;
    color: #1e293b !important;
  }

  /* Text & Utility cleanup */
  .badge {
    border: none !important;
    background: transparent !important;
    color: #000000 !important;
    padding: 0 !important;
    font-size: 9pt !important;
    font-weight: 500 !important;
  }

  .text-success,
  .text-danger,
  .text-primary,
  .text-info {
    color: #000000 !important;
  }

  /* 6. ID Card Batch Print Grid */
  .id-card-page {
    page-break-after: always !important;
    break-after: page !important;
    display: block !important;
    page-break-inside: avoid !important;
    margin-bottom: 0 !important;
  }

  .id-card-page:last-child {
    page-break-after: avoid !important;
    break-after: avoid !important;
  }

  .id-card-sheet-grid .row {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 12px !important;
  }

  .id-card-sheet-grid .col-6,
  .id-card-sheet-grid .col-md-4,
  .id-card-sheet-grid .col-lg-3,
  .id-card-sheet-grid .id-card-col {
    width: 48% !important;
    max-width: 48% !important;
    flex: 0 0 48% !important;
    page-break-inside: avoid !important;
    margin-bottom: 12px !important;
  }

  .id-card-box {
    border: 1.5px solid #0f172a !important;
    border-radius: 8px !important;
    box-shadow: none !important;
    background: #ffffff !important;
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
  }

  .id-card-header {
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
  }
}

/* ==================================================================
   Custom Premium Form Select & Filter Controls
   ================================================================== */
.form-select,
.form-control {
  border: 1px solid #cbd5e1 !important;
  background-color: #ffffff !important;
  color: #0f172a !important;
  font-weight: 500;
  border-radius: 6px !important;
  transition: all 0.2s ease-in-out;
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.04) !important;
}

.form-select:hover,
.form-control:hover {
  border-color: #94a3b8 !important;
}

.form-select:focus,
.form-control:focus {
  border-color: #0284c7 !important;
  box-shadow: 0 0 0 3px rgba(2, 132, 199, 0.15) !important;
  background-color: #ffffff !important;
  outline: none !important;
}

.form-select-sm,
.form-control-sm {
  padding: 0.375rem 2.25rem 0.375rem 0.75rem !important;
  font-size: 0.8125rem !important;
  /* 13px */
  line-height: 1.5 !important;
}

/* Crisp dropdown arrow icon */
.form-select {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%3c0f172a' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e") !important;
  background-repeat: no-repeat !important;
  background-position: right 0.75rem center !important;
  background-size: 16px 12px !important;
}

/* Filter Card Layout Polish */
.filter-card-premium {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.04);
  padding: 1rem;
}

.filter-label-title {
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 0.05em !important;
  text-transform: uppercase !important;
  color: #64748b !important;
  margin-bottom: 5px !important;
  display: block;
}

/* Compact & Sleek UI Alignment Enhancements */
.card-premium {
  border: 1px solid #e2e8f0 !important;
  border-radius: 8px !important;
  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.04) !important;
  background: #ffffff !important;
}

.card-premium .card-header {
  padding: 0.85rem 1.25rem !important;
  border-bottom: 1px solid #e2e8f0 !important;
}

.card-premium .card-body {
  padding: 1.25rem !important;
}

.card-premium .table-responsive {
  border-radius: 0 0 8px 8px !important;
}

.table-premium th {
  background-color: #f8fafc !important;
  background-image: none !important;
  color: #64748b !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.05em !important;
  padding: 0.65rem 1rem !important;
  border-bottom: 1px solid #e2e8f0 !important;
}

.table-premium td {
  padding: 0.75rem 1rem !important;
  font-size: 12px !important;
  font-family: var(--font-primary) !important;
  color: var(--table-cell-color) !important;
  border-bottom: 1px solid #f1f5f9 !important;
  background-color: var(--table-cell-bg);
  transition: background-color 0.15s ease;
  vertical-align: middle !important;
}

.table-premium tr:last-child td {
  border-bottom: none !important;
}

.form-label {
  font-size: 12px !important;
  font-weight: 600 !important;
  color: #334155 !important;
  margin-bottom: 4px !important;
}

/* Mobile Responsive Bounds & Alignment Fixes */
@media (max-width: 991.98px) {
  html,
  body {
    overflow-x: hidden !important;
    max-width: 100vw !important;
  }

  .container-fluid,
  .main-content,
  .content-area,
  .main-wrapper {
    max-width: 100vw !important;
    overflow-x: hidden !important;
    padding-left: 0.75rem !important;
    padding-right: 0.75rem !important;
  }

  .row {
    margin-left: -0.375rem !important;
    margin-right: -0.375rem !important;
  }

  .row > [class*="col-"] {
    padding-left: 0.375rem !important;
    padding-right: 0.375rem !important;
  }
}

/* ==================================================================
   Topbar � Top Application Header Bar
   ================================================================== */

/* -- Header shell -- */
.topbar {
  position: sticky;
  top: 0;
  z-index: 1020;
  width: 100%;
  height: var(--topbar-height);
  padding: 0 1.25rem;
  background: var(--bg-card);
  border-bottom: 1px solid var(--border);
  box-shadow: var(--shadow-sm);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* -- Left / Center / Right sections -- */
.topbar__left {
  flex-shrink: 0;
}

.topbar__center {
  flex: 1;
  max-width: 400px;
  margin: 0 1rem;
}

.topbar__right {
  flex-shrink: 0;
}

/* -- Page title -- */
.topbar__title {
  color: var(--text-primary);
  font-family: var(--font-primary);
  letter-spacing: -0.02em;
}

/* -- Search bar -- */
.topbar__search {
  position: relative;
  display: flex;
  align-items: center;
}

.topbar__search-icon {
  position: absolute;
  left: 0.7rem;
  font-size: 0.9rem;
  color: var(--text-muted);
  pointer-events: none;
}

.topbar__search-input {
  width: 100%;
  height: 36px;
  padding: 0 0.875rem 0 2.1rem;
  font-size: var(--text-sm);
  font-family: var(--font-primary);
  color: var(--text-primary);
  background: var(--bg-base);
  border: 1px solid #d1d5db;
  border-radius: var(--radius);
  outline: none;
  transition:
    border-color 0.18s ease,
    box-shadow 0.18s ease;
  cursor: pointer;
}

.topbar__search-input::placeholder {
  color: var(--text-muted);
}

.topbar__search-input:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-light);
  background: var(--bg-card);
}

/* -- AI Insights button -- */
.topbar__btn {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  height: 34px;
  padding: 0 0.85rem;
  font-size: var(--text-sm);
  font-family: var(--font-primary);
  font-weight: 600;
  color: var(--accent);
  background: var(--accent-light);
  border: 1px solid rgba(14, 165, 233, 0.22);
  border-radius: var(--radius);
  cursor: pointer;
  transition: var(--transition);
  white-space: nowrap;
}

.topbar__btn:hover {
  background: rgba(14, 165, 233, 0.15);
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-light);
}

.topbar__btn-icon {
  font-size: 0.95rem;
}

/* -- Theme toggle pill -- */
.topbar__theme-toggle {
  display: flex;
  align-items: center;
  background: var(--bg-base);
  border: 1px solid #d1d5db;
  border-radius: var(--radius);
  padding: 2px;
  gap: 2px;
}

.topbar__theme-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  font-size: 0.9rem;
  color: var(--text-muted);
  background: transparent;
  border: none;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: var(--transition);
}

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

.topbar__theme-btn.active {
  background: var(--bg-card);
  color: var(--accent);
  box-shadow: var(--shadow-xs);
}

/* -- Circle utility buttons (sidebar toggle, notifications) -- */
.circle-btn-util {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  font-size: 1rem;
  color: var(--text-secondary);
  background: var(--bg-base);
  border: 1px solid #d1d5db;
  border-radius: var(--radius);
  cursor: pointer;
  flex-shrink: 0;
  transition: var(--transition);
}

.circle-btn-util:hover {
  background: var(--bg-card);
  color: var(--accent);
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-light);
}

/* -- Session selector button -- */
.topbar__session.btn-session-selector {
  height: 34px;
  padding: 0 0.75rem;
  font-size: var(--text-sm);
  font-family: var(--font-primary);
  font-weight: 500;
  color: var(--text-primary);
  background: var(--bg-base);
  border: 1px solid #d1d5db;
  border-radius: var(--radius);
  transition: var(--transition);
}

.topbar__session.btn-session-selector:hover,
.topbar__session.btn-session-selector:focus {
  background: var(--bg-card);
  border-color: var(--accent);
  box-shadow: none;
  outline: none;
}

/* -- Global Search Overlay -- */
.search-overlay {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: rgba(0, 0, 0, 0.45);
  backdrop-filter: blur(4px);
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding-top: 6rem;
}

.search-overlay.d-none {
  display: none !important;
}

.search-modal-card {
  width: 100%;
  max-width: 560px;
  background: var(--bg-card);
  border: 1px solid #d1d5db;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
}

.search-modal-header {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.85rem 1rem;
  border-bottom: 1px solid var(--border);
}

.search-modal-icon {
  font-size: 1rem;
  color: var(--text-muted);
  flex-shrink: 0;
}

.search-modal-header input {
  flex: 1;
  border: none;
  outline: none;
  background: transparent;
  font-size: var(--text-md);
  font-family: var(--font-primary);
  color: var(--text-primary);
}

.search-modal-header input::placeholder {
  color: var(--text-muted);
}

.search-modal-close {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  background: var(--bg-base);
  border: 1px solid #d1d5db;
  border-radius: var(--radius-sm);
  color: var(--text-muted);
  cursor: pointer;
  font-size: 0.9rem;
  transition: var(--transition);
  flex-shrink: 0;
}

.search-modal-close:hover {
  color: var(--text-primary);
  border-color: var(--accent);
}

.search-modal-body {
  max-height: 360px;
  overflow-y: auto;
  padding: 0.5rem;
}

.search-results-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.search-modal-footer {
  padding: 0.6rem 1rem;
  border-top: 1px solid var(--border);
  font-size: var(--text-xs);
  color: var(--text-muted);
}

/* -- AI Insights Drawer -- */
.ai-insights-overlay {
  position: fixed;
  inset: 0;
  z-index: 9998;
  background: rgba(0, 0, 0, 0.35);
  backdrop-filter: blur(4px);
  display: flex;
  justify-content: flex-end;
}

.ai-insights-overlay.d-none {
  display: none !important;
}

.ai-insights-drawer {
  width: 380px;
  max-width: 92vw;
  height: 100%;
  background: var(--bg-card);
  border-left: 1px solid var(--border);
  box-shadow: var(--shadow-lg);
  display: flex;
  flex-direction: column;
}

.ai-insights-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 1.1rem;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}

.ai-sparkle-glow {
  font-size: 1.2rem;
  color: var(--accent);
}

.ai-drawer-close {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  background: var(--bg-base);
  border: 1px solid #d1d5db;
  border-radius: var(--radius-sm);
  color: var(--text-muted);
  cursor: pointer;
  font-size: 0.9rem;
  transition: var(--transition);
}

.ai-drawer-close:hover {
  color: var(--text-primary);
  border-color: var(--accent);
}

.ai-insights-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.ai-chat-conversation {
  flex: 1;
  overflow-y: auto;
  padding: 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.ai-chat-message {
  display: flex;
}

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

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

.ai-chat-bubble {
  max-width: 82%;
  padding: 0.6rem 0.85rem;
  border-radius: var(--radius);
  font-size: var(--text-sm);
  font-family: var(--font-primary);
  line-height: 1.55;
}

.ai-chat-message.assistant .ai-chat-bubble {
  background: var(--bg-base);
  border: 1px solid #d1d5db;
  color: var(--text-primary);
}

.ai-chat-message.user .ai-chat-bubble {
  background: var(--accent);
  color: #fff;
}

.ai-chat-input-section {
  padding: 0.75rem 1rem;
  border-top: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  flex-shrink: 0;
}

.ai-chat-suggested-prompts {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}

.ai-chat-prompt-pill {
  height: 28px;
  padding: 0 0.7rem;
  font-size: var(--text-xs);
  font-family: var(--font-primary);
  font-weight: 500;
  color: var(--accent);
  background: var(--accent-light);
  border: 1px solid rgba(14, 165, 233, 0.2);
  border-radius: var(--radius-pill);
  cursor: pointer;
  transition: var(--transition);
}

.ai-chat-prompt-pill:hover {
  background: rgba(14, 165, 233, 0.15);
  border-color: var(--accent);
}

.ai-drawer-chat-input-wrapper {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  background: var(--bg-base);
  border: 1px solid #d1d5db;
  border-radius: var(--radius);
  padding: 0 0.5rem 0 0.85rem;
  transition:
    border-color 0.18s ease,
    box-shadow 0.18s ease;
}

.ai-drawer-chat-input-wrapper:focus-within {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-light);
}

.ai-drawer-chat-input-wrapper input {
  flex: 1;
  height: 38px;
  border: none;
  outline: none;
  background: transparent;
  font-size: var(--text-sm);
  font-family: var(--font-primary);
  color: var(--text-primary);
}

.ai-drawer-chat-input-wrapper input::placeholder {
  color: var(--text-muted);
}

.ai-drawer-chat-input-wrapper button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  background: var(--accent);
  border: none;
  border-radius: var(--radius-sm);
  color: #fff;
  font-size: 0.9rem;
  cursor: pointer;
  transition: var(--transition);
  flex-shrink: 0;
}

.ai-drawer-chat-input-wrapper button:hover {
  background: var(--accent-dark);
}

.ai-insights-footer {
  padding: 0.6rem 1rem;
  border-top: 1px solid var(--border);
  font-size: var(--text-xs);
  color: var(--text-muted);
  flex-shrink: 0;
}

/* ==================================================================
   UNIVERSAL UI SYSTEM � Missing Canonical Components (Phase 18 Task 0)
   Empty States, Loading States, Generic Table Utilities
   ================================================================== */

/* -- Generic Empty State (no records in table) -- */
.empty-state-row td {
  text-align: center !important;
  padding: 2.5rem 1rem !important;
  color: var(--text-muted) !important;
}

.empty-state-row td i {
  font-size: 2rem !important;
  display: block !important;
  margin-bottom: 0.5rem !important;
  color: var(--text-muted) !important;
  opacity: 0.5 !important;
}

.empty-state-row td p {
  margin: 0 !important;
  font-size: var(--text-sm) !important;
  color: var(--text-muted) !important;
}

/* -- Generic Table Loading State -- */
.loading-state-row td {
  text-align: center !important;
  padding: 2rem 1rem !important;
}

.table-loading-spinner {
  display: inline-block !important;
  width: 1.25rem !important;
  height: 1.25rem !important;
  border: 2px solid var(--border) !important;
  border-top-color: var(--accent) !important;
  border-radius: 50% !important;
  animation: spin 0.7s linear infinite !important;
}

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

/* -- Status Badge System (single canonical set) -- */
.status-badge {
  display: inline-flex !important;
  align-items: center !important;
  gap: 0.25rem !important;
  padding: 0.2rem 0.6rem !important;
  font-size: var(--text-xs) !important;
  font-weight: 600 !important;
  border-radius: var(--radius-pill) !important;
  white-space: nowrap !important;
  line-height: 1.4 !important;
}

.status-badge.active,
.status-badge.status-active {
  background: rgba(16, 185, 129, 0.1);
  color: #059669;
}

.status-badge.inactive,
.status-badge.status-inactive {
  background: rgba(239, 68, 68, 0.08);
  color: #dc2626;
}

.status-badge.pending,
.status-badge.status-pending {
  background: rgba(245, 158, 11, 0.1);
  color: #d97706;
}

.status-badge.paid,
.status-badge.status-paid {
  background: rgba(16, 185, 129, 0.1);
  color: #059669;
}

.status-badge.due,
.status-badge.status-due {
  background: rgba(239, 68, 68, 0.08);
  color: #dc2626;
}

.status-badge.partial,
.status-badge.status-partial {
  background: rgba(245, 158, 11, 0.1);
  color: #d97706;
}

.status-badge.present,
.status-badge.status-present {
  background: rgba(16, 185, 129, 0.1);
  color: #059669;
}

.status-badge.absent,
.status-badge.status-absent {
  background: rgba(239, 68, 68, 0.08);
  color: #dc2626;
}

.status-badge.leave,
.status-badge.status-leave {
  background: rgba(99, 102, 241, 0.1);
  color: #6366f1;
}

.status-badge.info,
.status-badge.status-info {
  background: rgba(6, 182, 212, 0.1);
  color: #0891b2;
}

body.dark-theme .status-badge.active,
body.dark-theme .status-badge.status-active {
  background: rgba(52, 211, 153, 0.12);
  color: #34d399;
}

body.dark-theme .status-badge.inactive,
body.dark-theme .status-badge.status-inactive {
  background: rgba(248, 113, 113, 0.1);
  color: #f87171;
}

body.dark-theme .status-badge.pending,
body.dark-theme .status-badge.status-pending {
  background: rgba(251, 191, 36, 0.12);
  color: #fbbf24;
}

body.dark-theme .status-badge.paid,
body.dark-theme .status-badge.status-paid {
  background: rgba(52, 211, 153, 0.12);
  color: #34d399;
}

body.dark-theme .status-badge.due,
body.dark-theme .status-badge.status-due {
  background: rgba(248, 113, 113, 0.1);
  color: #f87171;
}

body.dark-theme .status-badge.partial,
body.dark-theme .status-badge.status-partial {
  background: rgba(251, 191, 36, 0.12);
  color: #fbbf24;
}

body.dark-theme .status-badge.present,
body.dark-theme .status-badge.status-present {
  background: rgba(52, 211, 153, 0.12);
  color: #34d399;
}

body.dark-theme .status-badge.absent,
body.dark-theme .status-badge.status-absent {
  background: rgba(248, 113, 113, 0.1);
  color: #f87171;
}

body.dark-theme .status-badge.leave,
body.dark-theme .status-badge.status-leave {
  background: rgba(129, 140, 248, 0.15);
  color: #818cf8;
}

body.dark-theme .status-badge.info,
body.dark-theme .status-badge.status-info {
  background: rgba(34, 211, 238, 0.1);
  color: #22d3ee;
}

/* -- filter-card-premium: use CSS variables (no hardcoded hex) -- */
.filter-card-premium {
  background: var(--bg-card) !important;
  border: 1px solid #d1d5db !important;
  border-radius: 8px !important;
  box-shadow: var(--shadow-xs) !important;
  padding: 1rem !important;
}

body.dark-theme .filter-card-premium {
  background: var(--bg-card) !important;
  border-color: var(--border) !important;
}

/* -- card-premium: use CSS variables -- */
.card-premium {
  background: var(--bg-card) !important;
  border: 1px solid #d1d5db !important;
  border-radius: 8px !important;
  box-shadow: var(--shadow-sm) !important;
}

.card-premium .card-header {
  background: transparent !important;
  padding: 0.85rem 1.25rem !important;
  border-bottom: 1px solid var(--border) !important;
}

.card-premium .card-body {
  padding: 1.25rem !important;
}

body.dark-theme .card-premium {
  background: var(--bg-card) !important;
  border-color: var(--border) !important;
}

/* ==================================================================
   Dark Mode Fixes � Tab content area + Nav tab hover visibility
   Fixes: white table/content area in dark mode; nav tab text
   invisible on hover in dark mode. Applied globally to all pages.
   ================================================================== */

/* Fix 1: Tab content area � no white background in dark mode */
body.dark-theme .tab-content,
body.dark-theme .tab-pane,
body.dark-theme .tab-pane.show.active {
  background: transparent !important;
}

/* Fix any direct child containers inside tab-pane that go white */
body.dark-theme .tab-pane > .card,
body.dark-theme .tab-pane > div,
body.dark-theme .tab-pane table,
body.dark-theme .tab-pane .table,
body.dark-theme .tab-pane .table-responsive {
  background: var(--bg-card) !important;
  color: var(--text-primary) !important;
}

body.dark-theme .tab-pane .table thead,
body.dark-theme .tab-pane .table thead th {
  background: var(--bg-sidebar) !important;
  color: var(--text-primary) !important;
  border-color: var(--border) !important;
}

body.dark-theme .tab-pane .table tbody td {
  background: var(--bg-card) !important;
  color: var(--text-primary) !important;
  border-color: var(--border) !important;
}

body.dark-theme .tab-pane .table tbody tr:hover td {
  background: var(--bg-hover, rgba(255, 255, 255, 0.03)) !important;
}

/* Fix 2: Nav tab hover � dark mode must NOT use rgba(255,255,255,0.5)
   which creates a half-white box making white text invisible */
body.dark-theme .student-tabs .nav-link:hover,
body.dark-theme .teacher-tabs .nav-link:hover,
body.dark-theme .nav-tabs .nav-link:hover,
body.dark-theme .profile-tabs-nav .nav-link:hover:not(.active) {
  background: rgba(255, 255, 255, 0.06) !important;
  color: var(--text-primary) !important;
}

body.dark-theme .student-tabs .nav-link:hover i,
body.dark-theme .teacher-tabs .nav-link:hover i,
body.dark-theme .nav-tabs .nav-link:hover i,
body.dark-theme .profile-tabs-nav .nav-link:hover:not(.active) i {
  color: var(--text-primary) !important;
}

/* Fix 3: General table dark mode � any table anywhere in the app */
body.dark-theme table,
body.dark-theme .table {
  color: var(--text-primary) !important;
  background: var(--bg-card) !important;
}

body.dark-theme .table thead th,
body.dark-theme table thead th {
  background: var(--bg-sidebar) !important;
  color: var(--text-primary) !important;
  border-color: var(--border) !important;
}

body.dark-theme .table tbody td,
body.dark-theme table tbody td {
  background: var(--bg-card) !important;
  color: var(--text-primary) !important;
  border-color: var(--border) !important;
}

body.dark-theme .table-responsive,
body.dark-theme .table-responsive table {
  background: var(--bg-card) !important;
}

/* ==================================================================
   Dark Mode � Nav Tab Hover Final Override
   Overrides all earlier hover rules for tab navs in dark mode.
   Must stay at end of file to win cascade.
   ================================================================== */
body.dark-theme .student-tabs .nav-link:not(.active):hover,
body.dark-theme .teacher-tabs .nav-link:not(.active):hover,
body.dark-theme .profile-tabs-nav .nav-link:not(.active):hover,
body.dark-theme .dashboard-tabs .nav-link:not(.active):hover,
body.dark-theme .activity-tabs .nav-link:not(.active):hover,
body.dark-theme .nav-tabs .nav-link:not(.active):hover {
  background: rgba(255, 255, 255, 0.06) !important;
  color: var(--text-secondary) !important;
}

body.dark-theme .student-tabs .nav-link:not(.active):hover i,
body.dark-theme .teacher-tabs .nav-link:not(.active):hover i,
body.dark-theme .profile-tabs-nav .nav-link:not(.active):hover i,
body.dark-theme .dashboard-tabs .nav-link:not(.active):hover i,
body.dark-theme .activity-tabs .nav-link:not(.active):hover i,
body.dark-theme .nav-tabs .nav-link:not(.active):hover i {
  color: var(--text-secondary) !important;
}

/* ==================================================================
   Audit Logs — Action Event Badge fix
   bg-slate-900 was missing, causing invisible white text on white bg
   ================================================================== */
.bg-slate-900 {
  background-color: #1e293b !important;
  color: #ffffff !important;
}

body.dark-theme .bg-slate-900 {
  background-color: #334155 !important;
  color: #f1f5f9 !important;
}

.fs-7 {
  font-size: 0.72rem !important;
}

/* ==================================================================
   UNIVERSAL UI SYSTEM — Minimal & Clean Fee Modals & Forms UI
   Re-architected for sleek typography, clean borders, minimal background
   colors, perfect spacing/alignment, and full dark-theme support.
   ================================================================== */

/* -- Fee Details & Received Summary Grid Boxes -- */
.fees-details-table,
.fees-received-table,
.collect-student-table,
.collect-fees-table {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)) !important;
  gap: 10px !important;
  background: var(--bg-card) !important;
  border: 1px solid #d1d5db !important;
  border-radius: 8px !important;
  padding: 12px 16px !important;
}

.fees-details-item,
.fees-received-item,
.collect-cell-lbl,
.collect-cell-val {
  font-size: var(--text-xs) !important;
  color: var(--text-muted) !important;
  line-height: 1.5 !important;
}

.fees-details-item strong,
.fees-received-item strong,
.collect-cell-val {
  color: var(--text-primary) !important;
  font-weight: 600 !important;
  display: inline-block !important;
}

/* -- Fee Modal Alert Note -- */
.fee-modal-alert {
  background: rgba(245, 158, 11, 0.08) !important;
  border: 1px solid rgba(245, 158, 11, 0.25) !important;
  color: #d97706 !important;
  font-size: var(--text-xs) !important;
  font-weight: 500 !important;
  border-radius: var(--radius-md) !important;
  padding: 10px 14px !important;
  margin: 0 !important;
}

body.dark-theme .fee-modal-alert {
  background: rgba(251, 191, 36, 0.1) !important;
  border-color: rgba(251, 191, 36, 0.3) !important;
  color: #fbbf24 !important;
}

/* -- (removed) Fee Structure Table — using teacher-table.table-premium instead -- */

/* -- Inputs & Selects inside Fee Table -- */
.fees-input-small,
.fees-select-small {
  height: 34px !important;
  padding: 4px 10px !important;
  font-size: var(--text-xs) !important;
  font-family: var(--font-primary) !important;
  border-radius: var(--radius-md) !important;
  border: 1px solid #d1d5db !important;
  background: var(--bg-card) !important;
  color: var(--text-primary) !important;
  outline: none !important;
  transition: var(--transition) !important;
  box-shadow: none !important;
}

.fees-input-small:focus,
.fees-select-small:focus {
  border-color: var(--accent) !important;
  box-shadow: 0 0 0 2px rgba(14, 165, 233, 0.15) !important;
}

.fees-input-small:disabled,
.fees-select-small:disabled {
  background: var(--bg-sec) !important;
  opacity: 0.65 !important;
  cursor: not-allowed !important;
}

.fees-badge-locked {
  display: block !important;
  font-size: 11px !important;
  color: var(--text-muted) !important;
  font-weight: 500 !important;
  margin-top: 3px !important;
}

.fees-badge-paid {
  display: block !important;
  font-size: 11px !important;
  color: #059669 !important;
  font-weight: 600 !important;
  margin-top: 3px !important;
}

body.dark-theme .fees-badge-paid {
  color: #34d399 !important;
}

/* -- Fee Types Select Box & Dropdown Menu -- */
.fee-types-select-box {
  position: relative !important;
}

.fee-types-dropdown-menu {
  position: absolute !important;
  top: 100% !important;
  left: 0 !important;
  right: 0 !important;
  z-index: 1050 !important;
  background: var(--bg-card) !important;
  border: 1px solid #d1d5db !important;
  border-radius: var(--radius-md) !important;
  box-shadow: var(--shadow-md) !important;
  max-height: 220px !important;
  overflow-y: auto !important;
  display: none;
}

.fee-types-dropdown-menu.show {
  display: block !important;
}

.fee-type-item {
  padding: 8px 12px !important;
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  border-bottom: 1px solid var(--border) !important;
  cursor: pointer !important;
  transition: var(--transition) !important;
  font-size: var(--text-xs) !important;
  color: var(--text-primary) !important;
}

.fee-type-item:last-child {
  border-bottom: none !important;
}

.fee-type-item:hover {
  background: var(--bg-sec) !important;
}

/* ==================================================================
   Auth Pages - Register / extended layout additions
   ================================================================== */

/* Wide card variant (register page) */
.auth-form-card--wide {
  max-width: 520px;
}

/* Side-by-side field row */
.auth-field-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.75rem;
}

/* Required asterisk */
.auth-required {
  color: #ef4444;
  margin-left: 1px;
}

/* Info alert variant */
.auth-alert--info {
  background: #fff0f3;
  border-color: #ffb3c1;
  color: #b80f2e;
}

body.dark-theme .auth-alert--info {
  background: rgba(30, 64, 175, 0.15);
  border-color: rgba(59, 130, 246, 0.3);
  color: #ff708d;
}

/* Setup steps (register brand panel) */
.auth-brand-steps {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.auth-brand-step {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 0.25rem 0;
}

.auth-brand-step-dot {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.15);
  color: rgba(255, 255, 255, 0.4);
  font-size: 0.6875rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition:
    background 0.2s,
    color 0.2s;
}

.auth-brand-step--active .auth-brand-step-dot {
  background: linear-gradient(135deg, #0ea5e9 0%, #14b8a6 100%);
  border-color: transparent;
  color: #fff;
}

.auth-brand-step-title {
  font-size: 0.8125rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.85);
  line-height: 1.3;
}

.auth-brand-step--active .auth-brand-step-title {
  color: #fff;
}

.auth-brand-step-desc {
  font-size: 0.6875rem;
  color: rgba(255, 255, 255, 0.38);
  margin-top: 0.125rem;
}

.auth-brand-step-line {
  width: 1px;
  height: 22px;
  background: rgba(255, 255, 255, 0.1);
  margin-left: 12px;
}

/* Register — collapse side-by-side on mobile */
@media (max-width: 560px) {
  .auth-field-row {
    grid-template-columns: 1fr;
    gap: 0;
  }

  .auth-form-card--wide {
    max-width: 100%;
  }
}

/* ==================================================================
   Table Responsive & Dropdown Overflow Fixes
   Prevents action dropdown menus from getting cut off when row count is small
   ================================================================== */
.table-responsive {
  min-height: 280px;
}

.teacher-table tr,
.teacher-table td,
.teacher-table tbody {
  position: static !important;
}

.table-responsive .dropdown-menu,
.teacher-table .dropdown-menu {
  z-index: 1060 !important;
}

/* Scrollable container for 100+ migration student checklist */
.migrate-students-list-container {
  max-height: 280px !important;
  overflow-y: auto !important;
}

.hover-bg-light:hover {
  background-color: rgba(0, 0, 0, 0.03);
}

/* Student Migration Card Alignment Fix */
.student-migrate-card {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  padding: 8px 12px !important;
  border-radius: 8px !important;
  border: 1px solid var(--color-border, #e2e8f0) !important;
  background-color: var(--color-surface, #ffffff) !important;
  transition: all 0.15s ease-in-out !important;
  margin: 0 !important;
  cursor: pointer !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

.student-migrate-card:hover {
  background-color: var(--accent-light, rgba(14, 165, 233, 0.06)) !important;
  border-color: rgba(14, 165, 233, 0.3) !important;
}

.student-migrate-card .form-check-input {
  float: none !important;
  position: static !important;
  margin: 0 !important;
  width: 16px !important;
  height: 16px !important;
  flex-shrink: 0 !important;
  cursor: pointer !important;
}

.student-migrate-info {
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  line-height: 1.25 !important;
  min-width: 0 !important;
  flex-grow: 1 !important;
}

/* Soft Badge Utilities for Fees & Reports */
.badge-soft-primary {
  background-color: rgba(14, 165, 233, 0.12) !important;
  color: #0284c7 !important;
  border: 1px solid rgba(14, 165, 233, 0.25) !important;
}

.badge-soft-success {
  background-color: rgba(34, 197, 94, 0.12) !important;
  color: #16a34a !important;
  border: 1px solid rgba(34, 197, 94, 0.25) !important;
}

.badge-soft-warning {
  background-color: rgba(245, 158, 11, 0.12) !important;
  color: #d97706 !important;
  border: 1px solid rgba(245, 158, 11, 0.25) !important;
}

.badge-soft-danger {
  background-color: rgba(239, 68, 68, 0.12) !important;
  color: #dc2626 !important;
  border: 1px solid rgba(239, 68, 68, 0.25) !important;
}

/* Standardized Modern Icon Buttons with Tooltips */
.icon-btn-util {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 36px !important;
  height: 36px !important;
  padding: 0 !important;
  border-radius: 8px !important;
  font-size: 17px !important;
  border: 1px solid var(--color-border, #e2e8f0) !important;
  background-color: var(--color-surface, #ffffff) !important;
  color: var(--color-text-secondary, #64748b) !important;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
  cursor: pointer !important;
  text-decoration: none !important;
  flex-shrink: 0 !important;
}

.icon-btn-util:hover {
  transform: translateY(-1px) !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08) !important;
}

.icon-btn-util:active {
  transform: translateY(0) !important;
}

.icon-btn-primary {
  background-color: var(--color-accent, #0ea5e9) !important;
  color: #ffffff !important;
  border-color: var(--color-accent, #0ea5e9) !important;
}

.icon-btn-primary:hover {
  background-color: #0284c7 !important;
  border-color: #0284c7 !important;
  color: #ffffff !important;
}

.icon-btn-secondary {
  background-color: #f1f5f9 !important;
  color: #475569 !important;
  border-color: #cbd5e1 !important;
}

.icon-btn-secondary:hover {
  background-color: #e2e8f0 !important;
  color: #1e293b !important;
}

.icon-btn-success {
  background-color: rgba(34, 197, 94, 0.1) !important;
  color: #16a34a !important;
  border-color: rgba(34, 197, 94, 0.3) !important;
}

.icon-btn-success:hover {
  background-color: #16a34a !important;
  color: #ffffff !important;
  border-color: #16a34a !important;
}

.icon-btn-danger {
  background-color: rgba(239, 68, 68, 0.1) !important;
  color: #dc2626 !important;
  border-color: rgba(239, 68, 68, 0.3) !important;
}

.icon-btn-danger:hover {
  background-color: #dc2626 !important;
  color: #ffffff !important;
  border-color: #dc2626 !important;
}

.icon-btn-warning {
  background-color: rgba(245, 158, 11, 0.1) !important;
  color: #d97706 !important;
  border-color: rgba(245, 158, 11, 0.3) !important;
}

.icon-btn-warning:hover {
  background-color: #d97706 !important;
  color: #ffffff !important;
  border-color: #d97706 !important;
}

/* Chart Container to Prevent Canvas Stretching */
.chart-box-container {
  position: relative !important;
  height: 260px !important;
  width: 100% !important;
}

/* ==================================================================
   PREMIUM ENHANCEMENTS: Topbar & Sidebar
   ================================================================== */

/* Topbar Premium Styling (v2 Colorful CRM) */
.topbar,
.topbar.topbar,
.app-header {
  background: var(--glass-bg) !important;
  backdrop-filter: var(--glass-blur) !important;
  -webkit-backdrop-filter: var(--glass-blur) !important;
  border-bottom: 1px solid var(--glass-border) !important;
  box-shadow: var(--glass-shadow) !important;
}

.topbar__title,
.topbar-brand,
.topbar-brand span,
.topbar-brand i {
  color: var(--text-primary) !important;
}

/* Sidebar Toggle button in Topbar */
#sidebarToggleBtn,
.topbar__toggle {
  background: var(--bg-surface) !important;
  border: 1px solid var(--border-subtle) !important;
  color: var(--text-primary) !important;
  border-radius: 50% !important;
  width: 38px !important;
  height: 38px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: all 0.15s ease !important;
}

#sidebarToggleBtn:hover,
.topbar__toggle:hover {
  background: var(--bg-subtle) !important;
  border-color: var(--border-default) !important;
  transform: scale(1.02) !important;
}

/* Academic Session Selector Dropdown Button */
.btn-session-selector {
  background: var(--bg-surface) !important;
  border: 1px solid var(--border-subtle) !important;
  color: var(--text-primary) !important;
  border-radius: var(--pill-radius) !important;
  padding: 6px 16px !important;
  font-size: var(--text-xs) !important;
  font-weight: 600 !important;
  transition: all 0.15s ease !important;
}

.btn-session-selector:hover {
  background: var(--bg-subtle) !important;
  border-color: var(--border-default) !important;
}

.btn-session-selector i {
  color: var(--accent) !important;
  font-size: 13px !important;
}

/* Topbar Search Box */
.topbar-search-input,
.topbar__search-input {
  background: var(--bg-subtle) !important;
  border: 1px solid var(--border-subtle) !important;
  border-radius: var(--pill-radius) !important;
  color: var(--text-primary) !important;
  padding-left: 2.2rem !important;
  height: 38px !important;
  font-size: var(--text-xs) !important;
  transition:
    border-color 0.15s ease,
    box-shadow 0.15s ease,
    background-color 0.15s ease !important;
}

.topbar-search-input::placeholder,
.topbar__search-input::placeholder {
  color: var(--text-tertiary) !important;
}

.topbar-search-input:focus,
.topbar__search-input:focus {
  background: var(--bg-surface) !important;
  border-color: var(--fill-blue) !important;
  box-shadow: 0 0 0 3px var(--fill-blue-soft) !important;
}

.topbar-search-icon,
.topbar__search-icon {
  color: var(--text-tertiary) !important;
  left: 0.85rem !important;
}

/* Sidebar Premium Styling */
.app-sidebar {
  background: linear-gradient(
    180deg,
    #7b102a 0%,
    #a4133c 50%,
    #b80f2e 100%
  ) !important;
  border-right: 1px solid rgba(255, 255, 255, 0.05) !important;
  box-shadow: 4px 0 15px rgba(0, 0, 0, 0.1) !important;
}

.sidebar-nav-item,
.app-sidebar .sidebar-nav-item {
  color: #d1d5db !important;
  transition: all 0.3s ease !important;
}

.sidebar-nav-item i,
.app-sidebar .sidebar-nav-item i {
  color: #d1d5db !important;
  opacity: 0.8;
}

.sidebar-nav-item .nav-label,
.app-sidebar .sidebar-nav-item .nav-label {
  color: #d1d5db !important;
  font-weight: 500 !important;
}

/* Sidebar Hover State */
.sidebar-nav-item:hover,
.app-sidebar .sidebar-nav-item:hover {
  background: rgba(255, 255, 255, 0.08) !important;
  color: #ffffff !important;
}

.sidebar-nav-item:hover i,
.app-sidebar .sidebar-nav-item:hover i {
  color: #ffffff !important;
  opacity: 1;
}

/* Sidebar Active State */
.sidebar-nav-item.active,
.app-sidebar .sidebar-nav-item.active {
  background: linear-gradient(135deg, #1d4ed8, #3b82f6) !important;
  color: #ffffff !important;
  box-shadow: 0 4px 12px rgba(37, 99, 235, 0.3) !important;
  border: none !important;
}

.sidebar-nav-item.active i,
.app-sidebar .sidebar-nav-item.active i,
.sidebar-nav-item.active .nav-label,
.app-sidebar .sidebar-nav-item.active .nav-label {
  color: #ffffff !important;
  opacity: 1;
  font-weight: 600 !important;
}

/* Sidebar Section Labels */
.app-sidebar .nav-label-group,
.app-sidebar .nav-label {
  color: #bfc6cf !important;
  text-transform: uppercase;
  font-size: 10px;
  letter-spacing: 1px;
  opacity: 0.7;
}

/* Theme Toggle & Other Buttons in Topbar */
.topbar__btn {
  background: #09090b !important;
  color: #ffffff !important;
  border-radius: var(--pill-radius) !important;
  border: none !important;
  font-weight: 600 !important;
  padding: 6px 16px !important;
  height: 38px !important;
  font-size: var(--text-xs) !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  box-shadow: var(--shadow-sm) !important;
  transition:
    opacity 0.15s ease,
    transform 0.15s ease !important;
}

.topbar__btn:hover {
  background: #27272a !important;
  color: #ffffff !important;
  transform: translateY(-1px) !important;
}

body.dark-theme .topbar__btn {
  background: #ffffff !important;
  color: #09090b !important;
}

body.dark-theme .topbar__btn:hover {
  background: #f4f4f5 !important;
  color: #09090b !important;
}

.topbar__theme-toggle {
  background: var(--bg-subtle) !important;
  border: 1px solid var(--border-subtle) !important;
  border-radius: var(--pill-radius) !important;
  padding: 3px !important;
  gap: 2px !important;
  display: flex !important;
  align-items: center !important;
}

.topbar__theme-btn {
  background: transparent !important;
  color: var(--text-tertiary) !important;
  border: none !important;
  width: 32px !important;
  height: 32px !important;
  border-radius: 50% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 14px !important;
  transition: all 0.15s ease !important;
  cursor: pointer !important;
}

.topbar__theme-btn.active {
  background: var(--bg-surface) !important;
  color: var(--accent) !important;
  box-shadow: var(--shadow-sm) !important;
}

.topbar__avatar {
  border: 1.5px solid var(--border-subtle) !important;
  transition: transform 0.15s ease !important;
}

.topbar__avatar:hover {
  transform: scale(1.05) !important;
}

/* ==================================================================
   MOBILE SIDEBAR COLOR FIXES (Light Contrast on Mobile Layouts)
   Applied ONLY when mobile sidebar is active / on mobile screens (<= 991.98px)
   ================================================================== */
@media (max-width: 991.98px) {
  /* Sidebar Brand Header & Title */
  .sidebar .sidebar__title,
  .app-sidebar .sidebar-brand-text {
    color: #ffffff !important;
  }

  /* Section Headings (OVERVIEW, CUSTOMERS, BUSINESS, etc.) */
  .sidebar .sidebar__category,
  .app-sidebar .nav-label-group {
    color: rgba(255, 255, 255, 0.75) !important;
  }

  /* Regular Sidebar Menu Items (Text & Labels) */
  .sidebar .sidebar__item,
  .sidebar .sidebar__label,
  .app-sidebar .sidebar-nav-item,
  .app-sidebar .nav-label {
    color: #ffffff !important;
  }

  /* Sidebar Icons & Dropdown Arrows */
  .sidebar .sidebar__icon,
  .sidebar .sidebar__arrow,
  .app-sidebar .sidebar-nav-item i,
  .app-sidebar .dropdown-arrow {
    color: #ffffff !important;
    opacity: 0.9 !important;
  }

  /* Hover States (Mobile) */
  .sidebar .sidebar__item:hover,
  .sidebar .sidebar__subitem:hover,
  .app-sidebar .sidebar-nav-item:hover,
  .app-sidebar .submenu-item:hover {
    background-color: rgba(255, 255, 255, 0.12) !important;
    color: #ffffff !important;
  }

  .sidebar .sidebar__item:hover .sidebar__icon,
  .sidebar .sidebar__item:hover .sidebar__arrow,
  .sidebar .sidebar__subitem:hover i,
  .app-sidebar .sidebar-nav-item:hover i {
    color: #ffffff !important;
    opacity: 1 !important;
  }

  /* Active Menu Items & Subitems */
  .sidebar .sidebar__item--active,
  .sidebar .sidebar__subitem--active,
  .app-sidebar .sidebar-nav-item.active,
  .app-sidebar .submenu-item.active,
  body.mobile-sidebar-active .sidebar .sidebar__item--active,
  body.mobile-sidebar-active .sidebar .sidebar__subitem--active {
    background: rgba(255, 255, 255, 0.2) !important;
    backdrop-filter: blur(8px) !important;
    -webkit-backdrop-filter: blur(8px) !important;
    color: #ffffff !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15) !important;
  }

  .sidebar .sidebar__item--active .sidebar__icon,
  .sidebar .sidebar__item--active .sidebar__label,
  .sidebar .sidebar__item--active .sidebar__arrow,
  .sidebar .sidebar__subitem--active i,
  .app-sidebar .sidebar-nav-item.active i,
  .app-sidebar .sidebar-nav-item.active .nav-label {
    color: #ffffff !important;
    opacity: 1 !important;
  }

  .sidebar .sidebar__item--active::before {
    background-color: #ffffff !important;
  }

  /* Submenu Links & Icons */
  .sidebar .sidebar__subitem,
  .app-sidebar .submenu-item {
    color: rgba(255, 255, 255, 0.9) !important;
  }

  .sidebar .sidebar__subitem i,
  .app-sidebar .submenu-item i {
    color: rgba(255, 255, 255, 0.9) !important;
  }

  /* Reduced Overlay Opacity */
  .sidebar-overlay {
    background-color: rgba(0, 0, 0, 0.35) !important;
  }
}

/* ==================================================================
   Universal Card Design System
   ================================================================== */
.card,
.card-premium,
.glass-panel,
.dash-timeline-card,
.dash-heatmap-card,
.card-metric-crm,
.dash-profile-card,
.modal-section-card,
.dashboard-card {
  background: var(--glass-bg) !important;
  border: 1px solid var(--glass-border) !important;
  border-radius: 8px !important;
  box-shadow: var(--glass-shadow) !important;
  backdrop-filter: var(--glass-blur) saturate(180%) !important;
  -webkit-backdrop-filter: var(--glass-blur) saturate(180%) !important;
  transition: var(--transition) !important;
  position: relative !important;
  overflow: hidden !important;
}

body.dark-theme .card,
body.dark-theme .card-premium,
body.dark-theme .glass-panel,
body.dark-theme .dash-timeline-card,
body.dark-theme .dash-heatmap-card,
body.dark-theme .card-metric-crm,
body.dark-theme .dash-profile-card,
body.dark-theme .modal-section-card,
body.dark-theme .dashboard-card {
  background: var(--glass-bg) !important;
  border-color: var(--glass-border) !important;
}

/* Universal Card Top Accent Line - Disabled for modern SaaS UI */
.card::before,
.glass-panel::before,
.dash-timeline-card::before,
.dash-heatmap-card::before,
.card-metric-crm::before,
.dash-profile-card::before,
.modal-section-card::before,
.dashboard-card::before,
.dash-card-premium::before {
  display: none !important;
  content: none !important;
}

/* Specific Card Theme Color Overrides for Top Lines */
.card-metric-crm.card-metric-students::before,
.card-metric-crm.card-metric-green::before {
  background: var(--fill-green);
  opacity: 0.8;
}
.card-metric-crm.card-metric-coral::before {
  background: var(--fill-coral);
  opacity: 0.8;
}
.card-metric-crm.card-metric-teachers::before,
.card-metric-crm.card-metric-blue::before {
  background: var(--fill-blue);
  opacity: 0.8;
}
.card-metric-crm.card-metric-orange::before {
  background: var(--fill-orange);
  opacity: 0.8;
}

/* Standardized Padding on Desktop */
.card,
.glass-panel,
.dash-timeline-card,
.dash-heatmap-card,
.dash-profile-card,
.modal-section-card {
  padding: 1.25rem; /* 20px uniform padding */
}

/* Hover Effect Standardization */
.card:hover,
.card-metric-crm:hover,
.dash-donut-card:hover {
  border-color: var(--accent);
  box-shadow:
    var(--shadow-sm),
    0 0 0 1px var(--accent-light);
}

/* ==================================================================
   Table Styling Overhaul
   ================================================================== */
.table-premium {
  width: 100% !important;
  border-collapse: separate !important;
  border-spacing: 0 !important;
  background: var(--bg-card) !important;
  border: 1px solid var(--glass-border) !important;
  border-radius: 8px !important;
  overflow: hidden !important;
}

.table-premium thead th {
  font-family: var(--font-heading) !important;
  font-size: var(--text-xs) !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
  color: var(--color-white) !important;
  padding: 12px 14px !important;
  background-color: transparent !important;
  background-image: none !important;
  border-bottom: 2px solid var(--table-head-border) !important;
  vertical-align: middle !important;
  background: var(--theme-brand-gradient) !important;
  border-right: 1px solid var(--table-border-color) !important;
}

.table-premium tbody td {
  background: transparent !important;
  color: var(--text-primary) !important;
  border-bottom: 1px solid var(--glass-border) !important;
  border-right: 1px solid var(--border) !important;
  padding: 12px 14px !important;
  font-size: var(--text-sm) !important;
  font-weight: 500 !important;
  vertical-align: middle !important;
  transition: background-color 0.15s ease !important;
}

.table-premium tbody tr:hover td {
  background-color: var(--accent-light) !important;
}

body.dark-theme .table-premium thead th {
  background-color: transparent !important;
  background-image: none !important;
  color: var(--table-thead-color) !important;
  border-bottom: 2px solid var(--table-head-border) !important;
  background: transparent !important;
  border-right: 1px solid var(--table-border-color) !important;
}

body.dark-theme .table-premium tbody td {
  border-bottom: 1px solid var(--glass-border) !important;
}


/* ==================================================================
   Buttons Upgrade
   ================================================================== */
.btn,
.theme-btn,
.btn-balance-action-primary,
.btn-row-action {
  border-radius: var(--radius-btn) !important;
  font-weight: 500 !important;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05) !important;
}

.btn:hover,
.theme-btn:hover,
.btn-balance-action-primary:hover {
  transform: translateY(-1px) !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1) !important;
}

.btn:active,
.theme-btn:active,
.btn-balance-action-primary:active {
  transform: translateY(0) !important;
}

.btn-primary,
.btn-balance-action-primary {
  background: var(--theme-brand-gradient) !important;
  border: none !important;
  color: var(--color-white) !important;
}

.btn-primary:hover,
.btn-balance-action-primary:hover {
  opacity: 0.95 !important;
  box-shadow: 0 4px 15px rgba(37, 99, 235, 0.25) !important;
}

.btn-secondary {
  background: var(--glass-bg) !important;
  border: 1px solid var(--glass-border) !important;
  color: var(--text-primary) !important;
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
}

.btn-secondary:hover {
  background: var(--bg-card-hover) !important;
}

/* ==================================================================
   Modals, Dialogs & Dropdowns
   ================================================================== */
.modal-content {
  background: var(--glass-bg) !important;
  border: 1px solid var(--glass-border) !important;
  border-radius: 8px !important;
  box-shadow: var(--glass-shadow) !important;
  backdrop-filter: var(--glass-blur) saturate(180%) !important;
  -webkit-backdrop-filter: var(--glass-blur) saturate(180%) !important;
}

.modal-header {
  border-bottom: 1px solid var(--glass-border) !important;
  background: transparent !important;
}

.modal-footer {
  border-top: 1px solid var(--glass-border) !important;
  background: transparent !important;
}

.dropdown-menu {
  background: var(--glass-bg) !important;
  border: 1px solid var(--glass-border) !important;
  border-radius: 8px !important;
  box-shadow: var(--glass-shadow) !important;
  backdrop-filter: var(--glass-blur) saturate(160%) !important;
  -webkit-backdrop-filter: var(--glass-blur) saturate(160%) !important;
  padding: 6px !important;
}

.dropdown-item {
  border-radius: var(--radius-sm) !important;
  transition: all 0.15s ease !important;
  color: var(--text-primary) !important;
}

.dropdown-item:hover {
  background: var(--accent-light) !important;
  color: var(--accent) !important;
}

/* ==================================================================
   Alerts & Badges
   ================================================================== */
.alert {
  border-radius: 8px !important;
  border: 1px solid var(--glass-border) !important;
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
  box-shadow: var(--shadow-sm) !important;
}

.badge {
  border-radius: var(--radius-pill) !important;
  padding: 4px 8px !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
  font-size: var(--text-xxs) !important;
}

/* ==================================================================
   Animations
   ================================================================== */
@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(6px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.content-area,
.dash-profile-card,
.card-premium,
.glass-panel,
.dash-timeline-card,
.dash-heatmap-card {
  animation: fadeIn 0.4s cubic-bezier(0.16, 1, 0.3, 1) both;
}

/* ==================================================================
   Dark Mode Sidebar Hover & Active Styles Override
   ================================================================== */
body.dark-theme .sidebar__item:hover {
  background-color: rgba(255, 255, 255, 0.06) !important;
  color: var(--text-primary) !important;
}

body.dark-theme .sidebar__item:hover .sidebar__icon,
body.dark-theme .sidebar__item:hover .sidebar__arrow,
body.dark-theme .sidebar__item:hover .sidebar__label {
  color: var(--text-primary) !important;
}

/* Submenu items hover */
body.dark-theme .sidebar__subitem:hover {
  background-color: rgba(255, 255, 255, 0.06) !important;
  color: var(--text-primary) !important;
}

body.dark-theme .sidebar__subitem:hover i {
  color: var(--text-primary) !important;
}

/* Keep active menu styling consistent on hover in dark theme */
body.dark-theme .sidebar__item--active:hover {
  background: linear-gradient(
    90deg,
    rgba(56, 189, 248, 0.2) 0%,
    rgba(45, 212, 191, 0.12) 100%
  ) !important;
  color: var(--accent) !important;
}

body.dark-theme .sidebar__item--active:hover .sidebar__icon,
body.dark-theme .sidebar__item--active:hover .sidebar__arrow,
body.dark-theme .sidebar__item--active:hover .sidebar__label {
  color: var(--accent) !important;
}

body.dark-theme .sidebar__subitem--active:hover {
  background-color: rgba(255, 77, 109, 0.18) !important;
  color: var(--accent) !important;
}

/* ==================================================================
   School Logo Support Styles
   ================================================================== */
.sidebar__brand-logo-container {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 44px;
}

.sidebar__school-logo {
  height: 44px;
  width: auto;
  max-width: 220px;
  object-fit: contain;
  border-radius: var(--radius-btn, 8px);
  transition: all 0.3s ease;
}

.sidebar__logo-placeholder {
  width: 36px;
  height: 36px;
  border-radius: var(--radius-btn, 8px);
  background: var(--glass-surface-2, rgba(255, 255, 255, 0.05));
  border: 1px dashed var(--color-border, rgba(0, 0, 0, 0.15));
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-secondary);
  font-size: 1.25rem;
}

.sidebar__user-avatar-collapsed {
  display: none !important;
}

.app-layout:not(.sidebar-expanded) .sidebar__school-logo,
.app-layout:not(.sidebar-expanded) .sidebar__logo-placeholder {
  display: none !important;
}

.app-layout:not(.sidebar-expanded) .sidebar__user-avatar-collapsed {
  display: block !important;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  object-fit: cover;
  border: 1.5px solid var(--accent, #2563eb);
  background: #ffffff;
  box-shadow: 0 2px 6px rgba(37, 99, 235, 0.15);
  margin: 0 auto;
}

/* ==================================================================
   Opaque Dropdown Menus
   ================================================================== */
.dropdown-menu {
  background-color: #ffffff !important;
  background-image: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

body.dark-theme .dropdown-menu {
  background-color: #1a1a2e !important;
  background-image: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* ==================================================================
   Redesigned Premium Dashboard Profile Card
   ================================================================== */
.dash-profile-card {
  background-color: #ffffff !important;
  background-image: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border: 1px solid rgba(0, 0, 0, 0.05) !important;
  border-radius: 16px !important;
  box-shadow:
    0 4px 20px -2px rgba(0, 0, 0, 0.04),
    0 2px 6px -1px rgba(0, 0, 0, 0.02) !important;
  padding: 18px !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  text-align: left !important;
  transition:
    transform 0.25s cubic-bezier(0.16, 1, 0.3, 1),
    box-shadow 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
  height: 100% !important;
  gap: 0 !important;
}

/* Remove accent line at top */
.dash-profile-card::before {
  display: none !important;
}

/* Remove top-right background glow */
.dash-profile-card::after {
  display: none !important;
}

.dash-profile-card:hover {
  transform: translateY(-4px) !important;
  border-color: rgba(0, 0, 0, 0.07) !important;
  box-shadow:
    0 12px 30px -5px rgba(0, 0, 0, 0.06),
    0 8px 16px -6px rgba(0, 0, 0, 0.03) !important;
}

.dash-profile-card-top {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 12px !important;
  width: 100% !important;
  text-align: left !important;
}

.dash-profile-card-top > div {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  gap: 2px !important;
}

.dash-profile-photo {
  width: 56px !important;
  height: 56px !important;
  border-radius: 50% !important;
  object-fit: cover !important;
  border: 1.5px solid #ffffff !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06) !important;
  margin: 0 !important;
  flex-shrink: 0 !important;
}

.dash-profile-name {
  font-size: 16px !important;
  font-weight: 600 !important;
  color: var(--text-primary, #1e293b) !important;
  line-height: 1.25 !important;
  margin-bottom: 0 !important;
}

.dash-profile-role {
  font-size: 12px !important;
  color: var(--text-muted, #64748b) !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

.dash-profile-session-badge {
  display: inline-block !important;
  font-size: 9.5px !important;
  font-weight: 600 !important;
  color: var(--accent, #6366f1) !important;
  background-color: var(--accent-light, rgba(99, 102, 241, 0.08)) !important;
  padding: 2px 8px !important;
  border-radius: 12px !important;
  letter-spacing: 0.01em !important;
  text-transform: uppercase !important;
  margin-top: 3px !important;
  align-self: flex-start !important;
}

.dash-profile-divider {
  width: 100% !important;
  border-top: 1px solid rgba(0, 0, 0, 0.05) !important;
  margin: 14px 0 !important;
}

.dash-profile-contact-list {
  width: 100% !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
}

.dash-profile-contact-item {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  width: 100% !important;
  text-align: left !important;
}

.dash-profile-contact-icon {
  width: 26px !important;
  height: 26px !important;
  border-radius: 50% !important;
  background-color: rgba(99, 102, 241, 0.06) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: var(--accent, #6366f1) !important;
  font-size: 12px !important;
  flex-shrink: 0 !important;
}

.dash-profile-contact-text {
  font-size: 12.5px !important;
  color: var(--text-secondary, #475569) !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  flex-grow: 1 !important;
}

.dash-profile-contact-item-address {
  align-items: flex-start !important;
}

.dash-profile-contact-item-address .dash-profile-contact-icon {
  margin-top: 2px !important;
}

.dash-profile-contact-text-address {
  white-space: normal !important;
  line-height: 1.45 !important;
  text-overflow: unset !important;
  overflow: visible !important;
}

/* Dark Theme Overrides */
body.dark-theme .dash-profile-card {
  background-color: var(--bg-card, #121214) !important;
  border-color: rgba(255, 255, 255, 0.05) !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.25) !important;
}

body.dark-theme .dash-profile-card:hover {
  border-color: rgba(255, 255, 255, 0.08) !important;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.35) !important;
}

body.dark-theme .dash-profile-divider {
  border-color: rgba(255, 255, 255, 0.06) !important;
}

body.dark-theme .dash-profile-contact-icon {
  background-color: rgba(124, 115, 255, 0.12) !important;
  color: #7c73ff !important;
}

body.dark-theme .dash-profile-session-badge {
  color: #7c73ff !important;
  background-color: rgba(124, 115, 255, 0.12) !important;
}

body.dark-theme .dash-profile-photo {
  border-color: var(--bg-card, #121214) !important;
}

/* Redesigned Lead Sources Card (matches Profile Card premium style) */
.dash-lead-sources-card {
  background-color: #ffffff !important;
  background-image: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border: 1px solid rgba(0, 0, 0, 0.05) !important;
  border-radius: 16px !important;
  box-shadow:
    0 4px 20px -2px rgba(0, 0, 0, 0.04),
    0 2px 6px -1px rgba(0, 0, 0, 0.02) !important;
  padding: 18px !important;
  display: flex !important;
  flex-direction: column !important;
  transition:
    transform 0.25s cubic-bezier(0.16, 1, 0.3, 1),
    box-shadow 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
  height: 100% !important;
  position: relative !important;
  overflow: hidden !important;
}

.dash-lead-sources-card::before {
  display: none !important;
}

.dash-lead-sources-card::after {
  display: none !important;
}

.dash-lead-sources-card:hover {
  transform: translateY(-4px) !important;
  border-color: rgba(0, 0, 0, 0.07) !important;
  box-shadow:
    0 12px 30px -5px rgba(0, 0, 0, 0.06),
    0 8px 16px -6px rgba(0, 0, 0, 0.03) !important;
}

body.dark-theme .dash-lead-sources-card {
  background-color: var(--bg-card, #121214) !important;
  border-color: rgba(255, 255, 255, 0.05) !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.25) !important;
}

body.dark-theme .dash-lead-sources-card:hover {
  border-color: rgba(255, 255, 255, 0.08) !important;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.35) !important;
}

/* ------------------------------------------------------------------
   UNIVERSAL MODAL FORM AND LAYOUT STYLING OVERRIDES
   ------------------------------------------------------------------ */
.modal .form-control,
.modal .form-select,
.modal select,
.modal textarea,
.modal input[type="text"],
.modal input[type="number"],
.modal input[type="date"],
.modal input[type="time"],
.modal input[type="email"],
.modal input[type="password"] {
  display: block !important;
  width: 100% !important;
  height: var(--u-input-height) !important;
  padding: var(--u-input-padding) !important;
  font-family: var(--font-primary) !important;
  font-size: var(--u-input-font) !important;
  font-weight: 500 !important;
  color: var(--text-primary) !important;
  background-color: var(--bg-card) !important;
  border: 1.5px solid var(--border) !important;
  border-radius: var(--u-input-radius) !important;
  outline: none !important;
  transition: var(--u-transition) !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  line-height: 1.5 !important;
  box-sizing: border-box !important;
}

.modal textarea {
  height: auto !important;
  min-height: 90px !important;
  resize: vertical !important;
}

.modal .form-control::placeholder,
.modal .form-select::placeholder,
.modal textarea::placeholder {
  color: var(--text-muted) !important;
  font-size: var(--u-input-font) !important;
  opacity: 0.8 !important;
}

.modal .form-control:focus,
.modal .form-select:focus,
.modal textarea:focus,
.modal select:focus,
.modal input:focus {
  border-color: var(--accent) !important;
  box-shadow: var(--u-input-focus-shadow) !important;
  background-color: var(--bg-card) !important;
}

.modal label,
.modal .form-label {
  display: block !important;
  font-family: var(--font-heading) !important;
  font-size: var(--u-label-font-size) !important;
  font-weight: var(--u-label-font-weight) !important;
  color: var(--text-secondary) !important;
  margin-bottom: var(--u-label-mb) !important;
  letter-spacing: normal !important;
  text-transform: none !important;
}

.modal .modal-header {
  background: transparent !important;
  color: var(--text-primary) !important;
  border-bottom: 1px solid var(--border-subtle) !important;
  padding: var(--u-modal-header-padding) !important;
}

.modal .modal-header .modal-title {
  color: var(--text-primary) !important;
  font-family: var(--font-heading) !important;
  font-weight: 700 !important;
}

.modal .modal-header .btn-close {
  filter: none !important;
  opacity: 0.5 !important;
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%2317171a'%3e%3cpath d='M.293.293a1 1 0 0 1 1.414 0L8 6.586 14.293.293a1 1 0 1 1 1.414 1.414L9.414 8l6.293 6.293a1 1 0 0 1-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 0 1-1.414-1.414L6.586 8 .293 1.707a1 1 0 0 1 0-1.414z'/%3e%3c/svg%3e") !important;
}

.modal .modal-header .btn-close:hover {
  opacity: 1 !important;
}

.modal .modal-footer {
  background: transparent !important;
  border-top: 1px solid var(--border-subtle) !important;
  padding: var(--u-modal-footer-padding) !important;
}

.modal .modal-body {
  padding: var(--u-modal-body-padding) !important;
}

.modal .row {
  --bs-gutter-x: 1.25rem;
  --bs-gutter-y: 1.25rem;
}

/* Dark Theme Overrides for Modal Elements */
body.dark-theme .modal .form-control,
body.dark-theme .modal .form-select,
body.dark-theme .modal select,
body.dark-theme .modal textarea,
body.dark-theme .modal input {
  color: var(--text-primary) !important;
  background-color: var(--bg-surface-raised, #1b1b1e) !important;
  border-color: rgba(255, 255, 255, 0.08) !important;
}

body.dark-theme .modal .form-control:focus,
body.dark-theme .modal .form-select:focus,
body.dark-theme .modal select:focus,
body.dark-theme .modal textarea:focus,
body.dark-theme .modal input:focus {
  border-color: var(--accent) !important;
  background-color: var(--bg-surface-raised, #1b1b1e) !important;
}

body.dark-theme .modal .modal-header .btn-close {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23ffffff'%3e%3cpath d='M.293.293a1 1 0 0 1 1.414 0L8 6.586 14.293.293a1 1 0 1 1 1.414 1.414L9.414 8l6.293 6.293a1 1 0 0 1-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 0 1-1.414-1.414L6.586 8 .293 1.707a1 1 0 0 1 0-1.414z'/%3e%3c/svg%3e") !important;
}

/* Tom Select Premium Overrides */
.ts-wrapper.form-control-admin {
  padding: 0 !important;
  border: none !important;
  height: auto !important;
  min-height: auto !important;
  background: none !important;
  box-shadow: none !important;
}
.ts-wrapper.form-control-admin .ts-control {
  border: 1px solid #cbd5e1 !important;
  border-radius: var(--u-input-radius, 10px) !important;
  padding: 6px 36px 6px 14px !important;
  min-height: 42px !important;
  height: auto !important;
  background-color: var(--bg-card, #fff) !important;
  font-size: 13px !important;
  font-family: var(--font-primary, "Inter", sans-serif) !important;
  box-shadow: none !important;
  cursor: text !important;
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  gap: 6px !important;
  transition: var(
    --u-transition,
    border-color 0.2s,
    box-shadow 0.2s
  ) !important;
  box-sizing: border-box !important;
}
.ts-wrapper.form-control-admin .ts-control:hover {
  border-color: #cbd5e1 !important;
}
.ts-wrapper.form-control-admin .ts-control.focus {
  border-color: var(--accent, #2563eb) !important;
  box-shadow: var(
    --u-input-focus-shadow,
    0 0 0 3px rgba(37, 99, 235, 0.12)
  ) !important;
  outline: none !important;
}
.ts-wrapper.form-control-admin .ts-control .item {
  background: var(--accent-soft, #eff6ff) !important;
  color: var(--accent, #2563eb) !important;
  border: 1px solid var(--accent-light, #fbccd4) !important;
  border-radius: 999px !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  padding: 3px 8px 3px 10px !important;
  margin: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  line-height: 1.2 !important;
  gap: 4px !important;
  letter-spacing: 0.01em !important;
  height: 24px !important;
}
.ts-wrapper.form-control-admin .ts-control .item .remove {
  border: none !important;
  color: var(--accent, #2563eb) !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  line-height: 1 !important;
  padding: 0 !important;
  margin: 0 !important;
  width: 14px !important;
  height: 14px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 50% !important;
  background: transparent !important;
  opacity: 0.6 !important;
  transition: all 0.15s ease !important;
}
.ts-wrapper.form-control-admin .ts-control .item .remove:hover {
  background: rgba(37, 99, 235, 0.15) !important;
  opacity: 1 !important;
}
.ts-wrapper.form-control-admin .ts-control input,
.ts-wrapper.form-control-admin .ts-control .ts-input {
  min-width: 80px !important;
  flex: 1 1 auto !important;
  margin: 0 !important;
  padding: 0 !important;
  height: 24px !important;
  line-height: 24px !important;
  font-size: 13px !important;
  font-family: var(--font-primary, "Inter", sans-serif) !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  outline: none !important;
  color: var(--text-primary, #17171a) !important;
}
.ts-wrapper.form-control-admin .ts-control input::placeholder,
.ts-wrapper.form-control-admin .ts-control .ts-input::placeholder {
  color: var(--text-muted, #94949c) !important;
  font-size: 13px !important;
  font-family: var(--font-primary, "Inter", sans-serif) !important;
  font-weight: 400 !important;
  opacity: 0.8 !important;
}
.ts-wrapper.form-control-admin .ts-dropdown {
  border: 1px solid var(--border, #dee2e6) !important;
  border-radius: 12px !important;
  font-size: 13px !important;
  font-family: var(--font-primary, "Inter", sans-serif) !important;
  z-index: 10600 !important;
  box-shadow:
    0 10px 25px -5px rgba(0, 0, 0, 0.1),
    0 8px 10px -6px rgba(0, 0, 0, 0.1) !important;
  margin-top: 4px !important;
  overflow: hidden !important;
  background: var(--bg-card, #fff) !important;
}
.ts-wrapper.form-control-admin .ts-dropdown .option {
  padding: 10px 14px !important;
  border-bottom: 1px solid var(--border-light, #f1f3f5) !important;
  color: var(--text-primary, #17171a) !important;
  cursor: pointer !important;
  transition: background-color 0.12s ease !important;
}
.ts-wrapper.form-control-admin .ts-dropdown .option:last-child {
  border-bottom: none !important;
}
.ts-wrapper.form-control-admin .ts-dropdown .active {
  background-color: var(--accent-soft, #eff6ff) !important;
  color: var(--text-primary, #17171a) !important;
}
.ts-wrapper.form-control-admin .ts-dropdown .option.selected {
  background-color: var(--accent, #2563eb) !important;
  color: #fff !important;
  font-weight: 600 !important;
}
.ts-wrapper.form-control-admin .ts-dropdown .option.selected.active {
  background-color: var(--accent-hover, #1d4ed8) !important;
  color: #fff !important;
}
body.dark-theme .ts-wrapper.form-control-admin .ts-control,
[data-theme="dark"] .ts-wrapper.form-control-admin .ts-control {
  background-color: var(--bg-card, #1e293b) !important;
  border-color: var(--border, #2d3748) !important;
  color: var(--text-primary, #f1f5f9) !important;
}
body.dark-theme .ts-wrapper.form-control-admin .ts-control:hover,
[data-theme="dark"] .ts-wrapper.form-control-admin .ts-control:hover {
  border-color: #475569 !important;
}
body.dark-theme .ts-wrapper.form-control-admin .ts-control.focus,
[data-theme="dark"] .ts-wrapper.form-control-admin .ts-control.focus {
  border-color: var(--accent, #3b82f6) !important;
  box-shadow: 0 0 0 3px rgba(255, 77, 109, 0.15) !important;
}
body.dark-theme .ts-wrapper.form-control-admin .ts-control input,
[data-theme="dark"] .ts-wrapper.form-control-admin .ts-control input,
body.dark-theme .ts-wrapper.form-control-admin .ts-control .ts-input,
[data-theme="dark"] .ts-wrapper.form-control-admin .ts-control .ts-input {
  color: var(--text-primary, #f1f5f9) !important;
}
body.dark-theme .ts-wrapper.form-control-admin .ts-control .item,
[data-theme="dark"] .ts-wrapper.form-control-admin .ts-control .item {
  background: rgba(255, 77, 109, 0.15) !important;
  color: #ff6b8a !important;
  border-color: rgba(255, 77, 109, 0.3) !important;
}
body.dark-theme .ts-wrapper.form-control-admin .ts-control .item .remove,
[data-theme="dark"] .ts-wrapper.form-control-admin .ts-control .item .remove {
  color: #ff6b8a !important;
}
body.dark-theme .ts-wrapper.form-control-admin .ts-control .item .remove:hover,
[data-theme="dark"]
  .ts-wrapper.form-control-admin
  .ts-control
  .item
  .remove:hover {
  background: rgba(255, 77, 109, 0.25) !important;
  color: #ff6b8a !important;
}
body.dark-theme .ts-wrapper.form-control-admin .ts-dropdown,
[data-theme="dark"] .ts-wrapper.form-control-admin .ts-dropdown {
  background-color: var(--bg-card, #1e293b) !important;
  border-color: var(--border, #2d3748) !important;
  color: var(--text-primary, #f1f5f9) !important;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.4) !important;
}

@media print {
  /* Reset all base layouts */
  html,
  body {
    background: #fff !important;
    color: #1e293b !important; /* Cool dark slate corporate print color */
    font-family:
      "Inter",
      -apple-system,
      sans-serif !important;
    font-size: 10px !important;
    margin: 0 !important;
    padding: 0 !important;
    width: 100% !important;
    height: 100% !important;
    line-height: 1.5 !important;
  }

  /* Ensure layout wrappers do not constraint width or add flex offsets */
  html,
  body,
  .app-layout,
  .app-layout.sidebar-expanded,
  .app-layout .main-wrapper,
  .app-layout.sidebar-expanded .main-wrapper,
  .main-wrapper,
  .main-wrapper.main-wrapper,
  .content-area,
  .content-wrapper {
    display: block !important;
    width: 100% !important;
    min-width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    padding-left: 0 !important;
    padding-top: 0 !important;
    padding-right: 0 !important;
    padding-bottom: 0 !important;
    float: none !important;
    position: static !important;
    box-shadow: none !important;
    background: transparent !important;
    overflow: visible !important;
  }

  /* Force hide standard screen layouts */
  .glass-bg-blob,
  .app-layout > aside,
  .app-layout > .main-wrapper > header,
  .app-layout
    > .main-wrapper
    > .content-area
    > .content-wrapper
    > *:not(.print-only-layout),
  footer,
  .sidebar-overlay,
  .print-only-header,
  .print-only-footer,
  header {
    display: none !important;
  }

  /* Define Page margins */
  @page {
    size: A4 portrait;
    margin: 20mm 15mm 20mm 15mm;
  }

  /* Print Template Container */
  .print-only-layout {
    display: block !important;
    width: 100% !important;
    box-sizing: border-box !important;
    padding: 0 !important;
    padding-top: 25px !important;
    margin: 0 !important;
  }

  /* Header formatting */
  .ledger-print-header {
    display: flex !important;
    width: 100% !important;
    justify-content: space-between !important;
    align-items: flex-start !important;
    margin-bottom: 25px !important;
    box-sizing: border-box !important;
  }

  .ledger-print-header .header-left {
    display: flex !important;
    align-items: center !important;
    gap: 20px !important;
    flex: 1 1 auto !important;
  }

  .ledger-print-header .school-logo {
    width: 70px !important;
    height: 70px !important;
    object-fit: contain !important;
    border-radius: 8px !important;
    border: 1px solid #e2e8f0 !important;
    padding: 2px !important;
    background: #fff !important;
  }

  .ledger-print-header .school-info {
    display: flex !important;
    flex-direction: column !important;
    gap: 3px !important;
  }

  .ledger-print-header .school-info .school-name {
    font-size: 18px !important;
    font-weight: 800 !important;
    margin: 0 !important;
    color: #0f172a !important;
    font-family: "Plus Jakarta Sans", sans-serif !important;
    line-height: 1.2 !important;
  }

  .ledger-print-header .school-info .school-address {
    font-size: 11px !important;
    color: #475569 !important;
    margin: 0 !important;
    line-height: 1.4 !important;
  }

  .ledger-print-header .school-info .school-contact {
    font-size: 9.5px !important;
    color: #64748b !important;
    margin: 0 !important;
  }

  .ledger-print-header .header-right {
    text-align: right !important;
    flex: 0 0 auto !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-end !important;
    gap: 4px !important;
  }

  .ledger-print-header .header-right .report-title {
    font-size: 14px !important;
    font-weight: 800 !important;
    margin: 0 0 6px 0 !important;
    color: #1e3a8a !important;
    letter-spacing: 0.06em !important;
    line-height: 1.2 !important;
    text-transform: uppercase !important;
    border-bottom: 2px solid #e2e8f0 !important;
    padding-bottom: 4px !important;
  }

  .ledger-print-header .header-right .meta-item {
    font-size: 9.5px !important;
    color: #475569 !important;
    margin: 0 !important;
    line-height: 1.3 !important;
  }

  .ledger-print-header .header-right .meta-item strong {
    color: #0f172a !important;
  }

  .ledger-divider {
    display: none !important;
  }

  /* Info Grid */
  .ledger-info-grid {
    display: flex !important;
    width: 100% !important;
    justify-content: space-between !important;
    gap: 15px !important;
    background-color: #f8fafc !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 8px !important;
    padding: 14px 20px !important;
    margin-bottom: 25px !important;
    box-sizing: border-box !important;
  }

  .ledger-info-grid .info-block {
    flex: 1 1 0% !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 4px !important;
  }

  .ledger-info-grid .info-block .info-label {
    font-size: 8.5px !important;
    text-transform: uppercase !important;
    font-weight: 600 !important;
    color: #64748b !important;
    letter-spacing: 0.05em !important;
  }

  .ledger-info-grid .info-block .info-value {
    font-size: 11px !important;
    font-weight: 700 !important;
    color: #1e293b !important;
  }

  /* Summary Cards */
  .print-summary-cards {
    display: flex !important;
    width: 100% !important;
    justify-content: space-between !important;
    gap: 12px !important;
    margin-bottom: 30px !important;
    box-sizing: border-box !important;
  }

  .print-summary-cards .summary-card {
    flex: 1 1 0% !important;
    min-width: 0 !important;
    border: 1px solid #cbd5e1 !important;
    border-radius: 8px !important;
    padding: 14px 10px !important;
    text-align: center !important;
    background-color: #f8fafc !important;
    box-shadow: none !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
  }

  .print-summary-cards .summary-card .card-label {
    font-size: 8.5px !important;
    text-transform: uppercase !important;
    font-weight: 600 !important;
    color: #475569 !important;
    margin-bottom: 6px !important;
    letter-spacing: 0.05em !important;
  }

  .print-summary-cards .summary-card .card-value {
    font-size: 13px !important;
    font-weight: 700 !important;
    color: #0f172a !important;
  }

  /* Table Styles */
  .print-ledger-table {
    width: 100% !important;
    border-collapse: collapse !important;
    margin-bottom: 45px !important;
    box-sizing: border-box !important;
  }

  .print-ledger-table thead {
    display: table-header-group !important;
  }

  .print-ledger-table th {
    background-color: #1e293b !important;
    color: #fff !important;
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
    font-size: 9.5px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    padding: 10px 14px !important;
    border: 1px solid #334155 !important;
    letter-spacing: 0.03em !important;
  }

  .print-ledger-table th.text-end {
    text-align: right !important;
  }

  .print-ledger-table td {
    font-size: 9.5px !important;
    padding: 9px 14px !important;
    border: 1px solid #cbd5e1 !important;
    color: #334155 !important;
    vertical-align: middle !important;
    line-height: 1.4 !important;
  }

  .print-ledger-table tbody tr:nth-child(even) {
    background-color: #f8fafc !important;
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
  }

  .print-ledger-table td.mono {
    font-family: monospace !important;
    font-size: 9px !important;
  }

  .print-ledger-table td.text-center {
    text-align: center !important;
  }

  .print-ledger-table td.text-end {
    text-align: right !important;
  }

  .print-ledger-table tr.total-row td {
    background-color: #f1f5f9 !important;
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
    border-top: 2px solid #94a3b8 !important;
    border-bottom: 4px double #94a3b8 !important; /* Professional double underline for totals */
    font-size: 10.5px !important;
    color: #0f172a !important;
    font-weight: 700 !important;
    padding: 12px 14px !important;
  }

  .print-ledger-table td.empty-row {
    text-align: center !important;
    padding: 40px !important;
    color: #64748b !important;
    font-style: italic !important;
    font-size: 11px !important;
  }

  /* Signatures Section */
  .print-signatures-section {
    display: flex !important;
    width: 100% !important;
    justify-content: space-between !important;
    margin-top: 60px !important;
    page-break-inside: avoid !important;
    box-sizing: border-box !important;
  }

  .print-signatures-section .signature-block {
    width: 28% !important;
    text-align: center !important;
  }

  .print-signatures-section .signature-block .sig-line {
    border-top: 1.2px dashed #475569 !important;
    margin-bottom: 10px !important;
    width: 100% !important;
  }

  .print-signatures-section .signature-block .sig-title {
    font-size: 10.5px !important;
    font-weight: 700 !important;
    color: #0f172a !important;
    margin-bottom: 4px !important;
  }

  .print-signatures-section .signature-block .sig-desc {
    font-size: 9px !important;
    color: #64748b !important;
  }
}

/* ERP Smart Assistant Custom CSS */
.assistant-search-section {
  background: var(--bg-card) !important;
  border: 1px solid rgba(0, 0, 0, 0.05) !important;
  border-radius: 8px !important;
  padding: 1.25rem !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.02) !important;
  margin-bottom: 1.5rem !important;
}

body.dark-theme .assistant-search-section {
  border: 1px solid rgba(255, 255, 255, 0.05) !important;
  background: rgba(0, 0, 0, 0.1) !important;
}

.assistant-recent-btn {
  display: inline-flex !important;
  align-items: center !important;
  padding: 4px 10px !important;
  background: rgba(0, 0, 0, 0.03) !important;
  border: 1px solid rgba(0, 0, 0, 0.05) !important;
  border-radius: var(--radius-full) !important;
  color: var(--text-muted) !important;
  font-size: 10px !important;
  font-weight: 500 !important;
  transition: all 0.2s ease !important;
  cursor: pointer !important;
}

body.dark-theme .assistant-recent-btn {
  background: rgba(255, 255, 255, 0.04) !important;
  border: 1px solid rgba(255, 255, 255, 0.06) !important;
  color: rgba(255, 255, 255, 0.6) !important;
}

.assistant-recent-btn:hover {
  background: var(--accent) !important;
  border-color: var(--accent) !important;
  color: #fff !important;
}

.assistant-btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  width: 100% !important;
  padding: 8px 12px !important;
  background: var(--bg-body) !important;
  border: 1px solid rgba(0, 0, 0, 0.04) !important;
  border-radius: var(--radius-md) !important;
  color: var(--text-primary) !important;
  font-size: var(--text-xs) !important;
  font-weight: 500 !important;
  transition: all 0.2s ease !important;
  cursor: pointer !important;
  text-decoration: none !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

body.dark-theme .assistant-btn {
  background: rgba(255, 255, 255, 0.02) !important;
  border: 1px solid rgba(255, 255, 255, 0.05) !important;
}

.assistant-btn:hover {
  background: var(--accent) !important;
  border-color: var(--accent) !important;
  color: #fff !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 4px 10px rgba(14, 165, 233, 0.15) !important;
}

.assistant-module-group {
  margin-bottom: 1.25rem !important;
}

.assistant-module-group h6 {
  letter-spacing: 0.06em !important;
  color: var(--text-muted) !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  border-bottom: 1px solid rgba(0, 0, 0, 0.05) !important;
  padding-bottom: 4px !important;
  margin-bottom: 10px !important;
}

body.dark-theme .assistant-module-group h6 {
  border-bottom: 1px solid rgba(255, 255, 255, 0.05) !important;
}

.assistant-quick-actions-section > span {
  font-size: 11px !important;
  letter-spacing: 0.08em !important;
  color: var(--text-primary) !important;
  font-weight: 700 !important;
  margin-bottom: 1.25rem !important;
}

.assistant-results-container {
  max-height: 450px;
  overflow-y: auto;
  margin-bottom: 1.5rem !important;
}

.assistant-results-container .card-premium {
  border: 1px solid rgba(14, 165, 233, 0.15) !important;
  background: var(--bg-card) !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.02) !important;
  border-radius: 8px !important;
  overflow: hidden !important;
}

body.dark-theme .assistant-results-container .card-premium {
  border: 1px solid rgba(14, 165, 233, 0.25) !important;
}

.assistant-results-container .card-premium .card-header {
  background: rgba(14, 165, 233, 0.04) !important;
  padding: 12px 16px !important;
  border-bottom: 1px solid rgba(14, 165, 233, 0.1) !important;
}

.assistant-results-container .card-premium .card-body {
  padding: 16px !important;
}

/* Sleek fee collection log table */
.fee-log-table-container .teacher-table.table-premium td {
  padding: 8px 12px !important;
  height: auto !important;
}
.fee-log-table-container .teacher-table.table-premium th {
  padding: 10px 12px !important;
}

/* ==================================================================
   Staff Payroll & Salary Structure System Classes
   ================================================================== */
.btn-payroll-action {
  background-color: var(--accent) !important;
  color: #fff !important;
  border-radius: var(--radius-sm) !important;
  font-size: var(--text-base) !important;
  border: none !important;
  height: 38px !important;
  font-family: var(--font-secondary) !important;
  font-weight: 600 !important;
  padding: 0 16px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  cursor: pointer !important;
  transition: opacity 0.15s ease !important;
  text-decoration: none !important;
}
.btn-payroll-action:hover {
  opacity: 0.9 !important;
}
.payroll-stat-card {
  border-radius: var(--radius-md) !important;
  border: 1px solid var(--border-default) !important;
  background: var(--bg-surface) !important;
  padding: 18px !important;
  box-shadow: var(--shadow-sm) !important;
  display: flex !important;
  align-items: center !important;
  gap: 16px !important;
}
.payroll-stat-icon {
  width: 48px !important;
  height: 48px !important;
  border-radius: 50% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 22px !important;
  flex-shrink: 0 !important;
}
.payroll-toolbar {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  gap: 16px !important;
  flex-wrap: wrap !important;
  margin-bottom: 16px !important;
}
.payroll-toolbar-left {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  flex-wrap: wrap !important;
}
.payroll-filter-input {
  height: 38px !important;
  font-size: var(--text-base) !important;
  width: 160px !important;
  background: var(--bg-surface) !important;
  color: var(--text-primary) !important;
  border: 1px solid var(--border-default) !important;
  border-radius: var(--radius-sm) !important;
}
.payroll-search-wrapper {
  position: relative !important;
  width: 260px !important;
}
.payroll-search-input {
  padding-right: 40px !important;
  height: 38px !important;
  border-radius: var(--radius-sm) !important;
  width: 100% !important;
  background: var(--bg-surface) !important;
  color: var(--text-primary) !important;
  border: 1px solid var(--border-default) !important;
}
.payroll-search-btn {
  position: absolute !important;
  right: 8px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  background: none !important;
  border: none !important;
  font-size: 16px !important;
  color: var(--text-secondary) !important;
  cursor: pointer !important;
}
.payroll-table-container td {
  padding: 10px 12px !important;
  height: auto !important;
  color: var(--text-primary) !important;
}
.payroll-table-container th {
  padding: 12px 12px !important;
  background: var(--bg-subtle) !important;
  color: var(--text-secondary) !important;
  font-weight: 700 !important;
}
.payroll-cell-name {
  font-size: var(--text-base) !important;
  font-weight: 600 !important;
  color: var(--text-primary) !important;
  line-height: 1.3 !important;
}
.payroll-cell-sub {
  font-size: var(--text-xs) !important;
  color: var(--text-secondary) !important;
}
.payroll-btn-xs {
  font-size: var(--text-xs) !important;
  padding: 2px 8px !important;
  border-radius: var(--radius-sm) !important;
  height: 26px !important;
  border: 1px solid var(--accent) !important;
  color: var(--accent) !important;
  background: transparent !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 4px !important;
  font-weight: 600 !important;
  cursor: pointer !important;
  transition: all 0.15s ease !important;
  text-decoration: none !important;
}
.payroll-btn-xs:hover {
  background: var(--accent) !important;
  color: #fff !important;
}
.payroll-btn-xs-success {
  font-size: var(--text-xs) !important;
  padding: 2px 8px !important;
  border-radius: var(--radius-sm) !important;
  height: 26px !important;
  border: 1px solid var(--success) !important;
  color: var(--success) !important;
  background: transparent !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 4px !important;
  font-weight: 600 !important;
  cursor: pointer !important;
  transition: all 0.15s ease !important;
  text-decoration: none !important;
}
.payroll-btn-xs-success:hover {
  background: var(--success) !important;
  color: #fff !important;
}
.payroll-modal-content {
  border-radius: var(--radius-md) !important;
  background: var(--bg-surface) !important;
  border: 1px solid var(--border-default) !important;
}
.payroll-modal-header {
  background: var(--bg-subtle) !important;
  border-bottom: 1px solid var(--border-default) !important;
  color: var(--text-primary) !important;
}
.payroll-modal-footer {
  background: var(--bg-subtle) !important;
  border-top: 1px solid var(--border-default) !important;
}
.payroll-modal-summary-box {
  padding: 12px !important;
  border: 1px solid var(--success) !important;
  border-radius: var(--radius-sm) !important;
  background: var(--success-soft) !important;
  text-align: center !important;
  margin: 12px 0 !important;
}
.payroll-readonly-input {
  background-color: var(--bg-subtle) !important;
  color: var(--text-secondary) !important;
  border: 1px solid var(--border-default) !important;
  cursor: not-allowed !important;
}

.teacher-comm-btn.print-btn {
  background-color: rgba(37, 99, 235, 0.07);
  color: #2563eb;
  border-color: rgba(37, 99, 235, 0.15);
}
.teacher-comm-btn.print-btn:hover {
  background-color: #2563eb;
  color: #fff;
  border-color: #2563eb;
  box-shadow: 0 3px 10px rgba(37, 99, 235, 0.25);
}

.admission-form-card {
  background: var(--bg-subtle) !important;
  border: 1px solid var(--border-default) !important;
  border-radius: var(--radius-md) !important;
  padding: 16px !important;
  margin-bottom: 24px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 16px !important;
}

.profile-left-col .teacher-comm-btn {
  flex: none !important;
  font-size: 12px !important;
  padding: 6px 12px !important;
  font-weight: 600 !important;
  border-radius: 6px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}

/* Prevent buttons inside module headers from wrapping, keeping them in one single row */
.teacher-card-header > div:first-child.d-flex,
.teacher-card-header .d-flex.align-items-center.gap-2.flex-wrap {
  flex-wrap: nowrap !important;
  flex-shrink: 0 !important;
}

/* Universal Table Rounded Corners & Border-Collapse separate fix */
.table-premium,
.teacher-table,
.teacher-detail-table,
.activity-detail-table,
.content-area table.table-premium,
.content-area table.teacher-table,
.content-area table.teacher-detail-table,
.content-area table.table {
  border-collapse: separate !important;
  border-spacing: 0 !important;
}

/* Remove individual cell rounded corners to let table's overflow: hidden handle it */
.table-premium th:first-child,
.table-premium th:last-child,
.teacher-table th:first-child,
.teacher-table th:last-child,
.teacher-detail-table th:first-child,
.teacher-detail-table th:last-child {
  border-radius: 0 !important;
}

/* Prevent double borders on right and bottom edges under separate model */
.table-premium th:last-child,
.table-premium td:last-child,
.teacher-table th:last-child,
.teacher-table td:last-child,
.teacher-detail-table th:last-child,
.teacher-detail-table td:last-child {
  border-right: none !important;
}
.table-premium tbody tr:last-child td,
.teacher-table tbody tr:last-child td,
.teacher-detail-table tbody tr:last-child td {
  border-bottom: none !important;
}

/* ID Card Element Reordering Styles */
.id-card-sortable-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 10px;
  margin-bottom: 20px;
}

.id-card-sortable-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px;
  background-color: var(--bg-base, #f8fafc);
  border: 1px solid var(--border, #cbd5e1);
  border-radius: 8px;
  transition: all 0.2s ease;
}

.id-card-sortable-item:hover {
  border-color: var(--theme-primary, #0284c7);
  background-color: var(--bg-hover, #f1f5f9);
}

.id-card-sortable-item .sortable-label {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 600;
  font-size: var(--text-xs);
  color: var(--text-primary, #0f172a);
}

.id-card-sortable-item .sortable-label .form-check-input {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  float: none !important;
}

.id-card-sortable-item .form-check {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  margin-bottom: 0 !important;
  padding-left: 0 !important;
}

.id-card-sortable-item .form-check .form-check-input {
  float: none !important;
  margin-left: 0 !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

.id-card-sortable-item .form-check-label {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

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

.id-card-sortable-item .sort-btn {
  background: transparent;
  border: none;
  color: var(--text-secondary, #64748b);
  padding: 4px;
  border-radius: 4px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
}

.id-card-sortable-item .sort-btn:hover {
  color: var(--theme-primary, #0284c7);
  background-color: var(--bg-hover-light, #e2e8f0);
}

/* --- Student Module Toolbar Refactor --- */
.student-header-toolbar {
  padding: 16px 20px !important;
  background-color: var(--color-surface);
  border-bottom: 1px solid var(--color-border);
}

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

.student-header-controls {
  display: flex !important;
  align-items: center !important;
  gap: 16px !important;
  flex-shrink: 0 !important;
  margin-left: auto !important;
}

.student-header-filters {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  flex-wrap: nowrap !important;
}

.student-header-select {
  height: 36px !important;
  min-width: 125px !important;
  max-width: 155px !important;
  font-size: 13px !important;
  border-radius: 8px !important;
  font-weight: 500 !important;
}

.student-header-limit-select {
  height: 36px !important;
  min-width: 68px !important;
  width: auto !important;
  font-size: 13px !important;
  border-radius: 8px !important;
  font-weight: 500 !important;
}

.student-header-per-page {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  white-space: nowrap !important;
}

.student-header-clear-btn {
  height: 36px !important;
  border-radius: 8px !important;
  font-size: 13px !important;
  padding: 0 12px !important;
  font-weight: 500 !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
  cursor: not-allowed !important;
  opacity: 0.65 !important;
}

/* ==========================================================================
   2026 MODERN SAAS ACTION BUTTON COMPONENT (.action-btn)
   ========================================================================== */

.action-btn-group {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Master Reusable Component - Applied to <a>, <button>, .action-btn */
a.action-btn,
button.action-btn,
.action-btn,
.teacher-action-btn,
.btn-row-action {
  display: inline-flex !important;
  align-items: center !important;
}

a.action-btn.action-btn-delete,
button.action-btn.action-btn-delete,
.action-btn.action-btn-delete,
.teacher-action-btn.action-delete,
.action-delete,
.confirm-force-delete-btn,
.legacy-icon-action-btn {
  background-color: #fff1f2 !important;
  color: #e11d48 !important;
  border: 1px solid #fecdd3 !important;
}

a.action-btn.action-btn-delete i,
button.action-btn.action-btn-delete i,
.action-btn.action-btn-delete i,
.teacher-action-btn.action-delete i,
.action-delete i,
.confirm-force-delete-btn i,
.legacy-icon-action-btn i {
  color: #e11d48 !important;
}

a.action-btn.action-btn-delete:hover,
button.action-btn.action-btn-delete:hover,
.action-btn.action-btn-delete:hover,
.teacher-action-btn.action-delete:hover,
.legacy-icon-action-btn:hover {
  background-color: #e11d48 !important;
  color: #ffffff !important;
  transform: translateY(-2px) scale(1.06) !important;
  box-shadow: 0 4px 12px rgba(225, 29, 72, 0.35) !important;
}

a.action-btn.action-btn-delete:hover i,
button.action-btn.action-btn-delete:hover i,
.action-btn.action-btn-delete:hover i,
.teacher-action-btn.action-delete:hover i,
.legacy-icon-action-btn:hover i {
  color: #ffffff !important;
}

/* 4. Restore Action (Emerald Theme) */
a.action-btn.action-btn-restore,
button.action-btn.action-btn-restore,
.action-btn.action-btn-restore,
.teacher-action-btn.action-restore,
.confirm-restore-btn {
  background-color: #ecfdf5 !important;
  color: #059669 !important;
}

a.action-btn.action-btn-restore i,
button.action-btn.action-btn-restore i,
.action-btn.action-btn-restore i,
.teacher-action-btn.action-restore i,
.confirm-restore-btn i {
  color: #059669 !important;
}

a.action-btn.action-btn-restore:hover,
button.action-btn.action-btn-restore:hover,
.action-btn.action-btn-restore:hover,
.teacher-action-btn.action-restore:hover,
.confirm-restore-btn:hover {
  background-color: #10b981 !important;
  color: #ffffff !important;
  transform: translateY(-2px) scale(1.06) !important;
  box-shadow: 0 4px 12px rgba(16, 185, 129, 0.35) !important;
}

a.action-btn.action-btn-restore:hover i,
button.action-btn.action-btn-restore:hover i,
.action-btn.action-btn-restore:hover i,
.teacher-action-btn.action-restore:hover i,
.confirm-restore-btn:hover i {
  color: #ffffff !important;
}

/* Active & Press Feedback */
a.action-btn:active,
button.action-btn:active,
.action-btn:active,
.teacher-action-btn:active {
  transform: translateY(0) scale(0.95) !important;
}

/* --- DARK MODE VARIATIONS --- */
body.dark-theme a.action-btn.action-btn-view,
body.dark-theme button.action-btn.action-btn-view,
body.dark-theme .action-btn.action-btn-view,
body.dark-theme .teacher-action-btn.action-view {
  background-color: rgba(99, 102, 241, 0.16) !important;
  color: #818cf8 !important;
}
body.dark-theme a.action-btn.action-btn-view i,
body.dark-theme button.action-btn.action-btn-view i,
body.dark-theme .action-btn.action-btn-view i {
  color: #818cf8 !important;
}
body.dark-theme a.action-btn.action-btn-view:hover,
body.dark-theme button.action-btn.action-btn-view:hover,
body.dark-theme .action-btn.action-btn-view:hover {
  background-color: #6366f1 !important;
  color: #ffffff !important;
  box-shadow: 0 4px 14px rgba(99, 102, 241, 0.45) !important;
}

body.dark-theme a.action-btn.action-btn-edit,
body.dark-theme button.action-btn.action-btn-edit,
body.dark-theme .action-btn.action-btn-edit,
body.dark-theme .teacher-action-btn.action-edit,
body.dark-theme .edit-section-btn {
  background-color: rgba(245, 158, 11, 0.16) !important;
  color: #fbbf24 !important;
}
body.dark-theme a.action-btn.action-btn-edit i,
body.dark-theme button.action-btn.action-btn-edit i,
body.dark-theme .action-btn.action-btn-edit i,
body.dark-theme .edit-section-btn i {
  color: #fbbf24 !important;
}
body.dark-theme a.action-btn.action-btn-edit:hover,
body.dark-theme button.action-btn.action-btn-edit:hover,
body.dark-theme .action-btn.action-btn-edit:hover,
body.dark-theme .edit-section-btn:hover {
  background-color: #f59e0b !important;
  border-color: #f59e0b !important;
  color: #ffffff !important;
}

body.dark-theme a.teacher-action-btn.action-delete,
body.dark-theme button.teacher-action-btn.action-delete,
body.dark-theme .teacher-action-btn.action-delete,
body.dark-theme .delete-section-btn {
  background-color: rgba(244, 63, 94, 0.18) !important;
  border-color: rgba(244, 63, 94, 0.4) !important;
  color: #fb7185 !important;
}
body.dark-theme a.teacher-action-btn.action-delete i,
body.dark-theme button.teacher-action-btn.action-delete i,
body.dark-theme .delete-section-btn i {
  color: #fb7185 !important;
}
body.dark-theme a.teacher-action-btn.action-delete:hover,
body.dark-theme button.teacher-action-btn.action-delete:hover,
body.dark-theme .delete-section-btn:hover {
  background-color: #f43f5e !important;
  border-color: #f43f5e !important;
  color: #ffffff !important;
}

/* Universal Clean Table Radius System Override */
.table,
.table-responsive,
.table-premium,
.table-container,
.table-wrapper,
.card-table,
.table-card,
.collect-student-table,
.collect-fees-table {
  border-radius: 8px !important;
}

/* Toolbar Header Action Buttons Icon Size & Theme */
.teacher-header-btn {
  width: 38px !important;
  height: 38px !important;
  font-size: 19px !important;
}

.teacher-header-btn i {
  font-size: 19px !important;
}

.teacher-header-btn.action-view {
  background-color: #eef2ff !important;
  color: #4f46e5 !important;
  border-color: rgba(79, 70, 229, 0.18) !important;
}

.teacher-header-btn.action-view i {
  color: #4f46e5 !important;
}

.teacher-header-btn.action-view:hover {
  background-color: #4f46e5 !important;
  color: #ffffff !important;
  border-color: #4f46e5 !important;
  box-shadow: 0 4px 12px rgba(79, 70, 229, 0.35) !important;
}

.teacher-header-btn.action-view:hover i {
  color: #ffffff !important;
}

.teacher-header-btn.action-edit {
  background-color: #fffbeb !important;
  color: #d97706 !important;
  border-color: rgba(217, 119, 6, 0.18) !important;
}

.teacher-header-btn.action-edit i {
  color: #d97706 !important;
}

.teacher-header-btn.action-edit:hover {
  background-color: #d97706 !important;
  color: #ffffff !important;
  border-color: #d97706 !important;
  box-shadow: 0 4px 12px rgba(217, 119, 6, 0.35) !important;
}

.teacher-header-btn.action-edit:hover i {
  color: #ffffff !important;
}

.teacher-header-btn.action-delete {
  background-color: #fff1f2 !important;
  color: #e11d48 !important;
  border-color: rgba(225, 29, 72, 0.18) !important;
}

.teacher-header-btn.action-delete i {
  color: #e11d48 !important;
}

.teacher-header-btn.action-delete:hover:not(:disabled) {
  background-color: #e11d48 !important;
  color: #ffffff !important;
  border-color: #e11d48 !important;
  box-shadow: 0 4px 12px rgba(225, 29, 72, 0.35) !important;
}

.teacher-header-btn.action-delete:hover:not(:disabled) i {
  color: #ffffff !important;
}

/* Master Action Buttons Specification Override (Unifying Width, Height, Border-Radius & Solid Borders) */
a.action-btn,
button.action-btn,
.action-btn,
.action-btn-view,
.action-btn-edit,
.action-btn-delete,
.edit-teacher-btn,
.delete-teacher-btn,
.edit-stream-btn,
.delete-stream-btn,
.teacher-action-btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 36px !important;
  height: 36px !important;
  min-width: 36px !important;
  max-width: 36px !important;
  min-height: 36px !important;
  max-height: 36px !important;
  padding: 0 !important;
  margin: 0 !important;
  border-radius: 10px !important;
  box-sizing: border-box !important;
  cursor: pointer !important;
  text-decoration: none !important;
  outline: none !important;
  box-shadow: none !important;
  -webkit-appearance: none !important;
  appearance: none !important;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

a.action-btn-view,
button.action-btn-view,
.action-btn-view {
  background-color: #eef2ff !important;
  color: #4f46e5 !important;
  border: 1px solid #c7d2fe !important;
}
a.action-btn-view i,
button.action-btn-view i,
.action-btn-view i {
  color: #4f46e5 !important;
}

a.action-btn-edit,
button.action-btn-edit,
.action-btn-edit,
.edit-teacher-btn,
.edit-stream-btn,
.edit-section-btn {
  background-color: #fffbeb !important;
  color: #d97706 !important;
  border: 1px solid #fde68a !important;
}
a.action-btn-edit i,
button.action-btn-edit i,
.action-btn-edit i,
.edit-teacher-btn i,
.edit-stream-btn i,
.edit-section-btn i {
  color: #d97706 !important;
}

a.action-btn-edit:hover,
button.action-btn-edit:hover,
.action-btn-edit:hover,
.edit-teacher-btn:hover,
.edit-stream-btn:hover,
.edit-section-btn:hover {
  background-color: #d97706 !important;
  color: #ffffff !important;
  border-color: #d97706 !important;
  transform: translateY(-2px) scale(1.06) !important;
  box-shadow: 0 4px 12px rgba(217, 119, 6, 0.35) !important;
}
a.action-btn-edit:hover i,
button.action-btn-edit:hover i,
.action-btn-edit:hover i,
.edit-teacher-btn:hover i,
.edit-stream-btn:hover i,
.edit-section-btn:hover i {
  color: #ffffff !important;
}

a.action-btn-delete,
button.action-btn-delete,
.action-btn-delete,
.teacher-action-btn.action-delete,
.action-delete,
.confirm-force-delete-btn,
.delete-teacher-btn,
.delete-stream-btn,
.delete-section-btn {
  background-color: #fff1f2 !important;
  color: #e11d48 !important;
  border: 1px solid #fecdd3 !important;
}
a.action-btn-delete i,
button.action-btn-delete i,
.action-btn-delete i,
.delete-teacher-btn i,
.delete-stream-btn i,
.delete-section-btn i {
  color: #e11d48 !important;
}

/* Big Vector Action Icons */
a.action-btn i,
button.action-btn i,
.action-btn i,
.action-btn-view i,
.action-btn-edit i,
.action-btn-delete i,
.edit-teacher-btn i,
.delete-teacher-btn i,
.edit-stream-btn i,
.delete-stream-btn i,
.edit-section-btn i,
.delete-section-btn i,
.teacher-action-btn i {
  font-size: 20px !important;
  width: 20px !important;
  height: 20px !important;
  line-height: 20px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* ==================================================================
   UNIVERSAL Action Button Colors — pattern-based, catch-all
   Matches ANY class shaped "edit-*-btn" / "delete-*-btn" / "view-*-btn"
   so new modules (class, subject, exam, fee, etc.) never need a manual
   entry here again. Placed last so it wins ties among equal-specificity
   !important rules, and layered on top of (not replacing) the explicit
   rules above.
   ================================================================== */

/* EDIT — any class starting with "edit-" and ending in "-btn" */
[class^="edit-"][class$="-btn"]:not(.table-btn-outline):not(.table-cell-title),
[class*=" edit-"][class$="-btn"]:not(.table-btn-outline):not(.table-cell-title) {
  background-color: #fffbeb !important;
  color: #d97706 !important;
  border: 1px solid #fde68a !important;
}
[class^="edit-"][class$="-btn"]:not(.table-btn-outline):not(.table-cell-title) i,
[class*=" edit-"][class$="-btn"]:not(.table-btn-outline):not(.table-cell-title) i {
  color: #d97706 !important;
}
[class^="edit-"][class$="-btn"]:not(.table-btn-outline):not(.table-cell-title):hover,
[class*=" edit-"][class$="-btn"]:not(.table-btn-outline):not(.table-cell-title):hover {
  background-color: #d97706 !important;
  border-color: #d97706 !important;
  color: #ffffff !important;
}
[class^="edit-"][class$="-btn"]:not(.table-btn-outline):not(.table-cell-title):hover i,
[class*=" edit-"][class$="-btn"]:not(.table-btn-outline):not(.table-cell-title):hover i {
  color: #ffffff !important;
}

/* DELETE — any class starting with "delete-" and ending in "-btn" */
[class^="delete-"][class$="-btn"]:not(.table-btn-outline):not(.table-cell-title),
[class*=" delete-"][class$="-btn"]:not(.table-btn-outline):not(.table-cell-title) {
  background-color: #fff1f2 !important;
  color: #e11d48 !important;
  border: 1px solid #fecdd3 !important;
}
[class^="delete-"][class$="-btn"]:not(.table-btn-outline):not(.table-cell-title) i,
[class*=" delete-"][class$="-btn"]:not(.table-btn-outline):not(.table-cell-title) i {
  color: #e11d48 !important;
}
[class^="delete-"][class$="-btn"]:not(.table-btn-outline):not(.table-cell-title):hover,
[class*=" delete-"][class$="-btn"]:not(.table-btn-outline):not(.table-cell-title):hover {
  background-color: #e11d48 !important;
  border-color: #e11d48 !important;
  color: #ffffff !important;
}
[class^="delete-"][class$="-btn"]:not(.table-btn-outline):not(.table-cell-title):hover i,
[class*=" delete-"][class$="-btn"]:not(.table-btn-outline):not(.table-cell-title):hover i {
  color: #ffffff !important;
}

/* VIEW — any class starting with "view-" and ending in "-btn" */
[class^="view-"][class$="-btn"]:not(.table-btn-outline):not(.table-cell-title),
[class*=" view-"][class$="-btn"]:not(.table-btn-outline):not(.table-cell-title) {
  background-color: #eef2ff !important;
  color: #4f46e5 !important;
  border: 1px solid #c7d2fe !important;
}
[class^="view-"][class$="-btn"]:not(.table-btn-outline):not(.table-cell-title) i,
[class*=" view-"][class$="-btn"]:not(.table-btn-outline):not(.table-cell-title) i {
  color: #4f46e5 !important;
}
[class^="view-"][class$="-btn"]:not(.table-btn-outline):not(.table-cell-title):hover,
[class*=" view-"][class$="-btn"]:not(.table-btn-outline):not(.table-cell-title):hover {
  background-color: #4f46e5 !important;
  border-color: #4f46e5 !important;
  color: #ffffff !important;
}
[class^="view-"][class$="-btn"]:not(.table-btn-outline):not(.table-cell-title):hover i,
[class*=" view-"][class$="-btn"]:not(.table-btn-outline):not(.table-cell-title):hover i {
  color: #ffffff !important;
}

/* Sizing/shape safety net for the same pattern, in case a button only
   has e.g. "edit-class-btn" with no .teacher-action-btn / .action-btn
   alongside it */
[class$="-btn"][class*="edit-"]:not(.table-btn-outline):not(.table-cell-title),
[class$="-btn"][class*="delete-"]:not(.table-btn-outline):not(.table-cell-title),
[class$="-btn"][class*="view-"]:not(.table-btn-outline):not(.table-cell-title) {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 36px !important;
  height: 36px !important;
  min-width: 36px !important;
  max-width: 36px !important;
  min-height: 36px !important;
  max-height: 36px !important;
  padding: 0 !important;
  margin: 0 !important;
  border-radius: 10px !important;
  box-sizing: border-box !important;
  cursor: pointer !important;
  text-decoration: none !important;
  outline: none !important;
  box-shadow: none !important;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

/* ==================================================================
   Marks Summary & Exams Pages — Shared Component Styles
   ================================================================== */

.filter-card {
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
}

.filter-card .card-header {
  background: var(--bg-surface);
}

.exam-header-icon-box {
  width: 42px;
  height: 42px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--accent-soft);
  border-radius: var(--radius-sm);
  color: var(--accent);
  font-size: 1.25rem;
}

.input-group-merged .input-group-text {
  background: var(--bg-subtle);
  border-right: none;
  color: var(--text-tertiary);
}

.input-group-merged .form-select,
.input-group-merged .form-control {
  border-left: none;
}

.input-group-merged .form-select:focus,
.input-group-merged .form-control:focus {
  border-color: var(--accent);
  box-shadow: none;
}

.input-group-merged .form-select:disabled,
.input-group-merged .form-control:disabled {
  background: var(--bg-subtle);
  opacity: 0.6;
}

.results-card {
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
}

.table-results {
  border-collapse: separate;
  border-spacing: 0;
}

.table-results thead th {
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  padding: 0.75rem 0.5rem;
  white-space: nowrap;
  border-bottom: 2px solid rgba(255,255,255,0.1);
}

.table-results tbody td {
  padding: 0.5rem 0.5rem;
  vertical-align: middle;
}

.table-results tbody tr:hover {
  background-color: rgba(37, 99, 235, 0.03);
}

.table-results tbody tr:nth-child(even) {
  background-color: var(--bg-subtle);
}

.table-results tbody tr:nth-child(even):hover {
  background-color: rgba(37, 99, 235, 0.05);
}

.filter-chip {
  display: inline-flex;
  align-items: center;
  padding: 0.25rem 0.75rem;
  background: var(--bg-subtle);
  border: 1px solid var(--border-default);
  border-radius: 999px;
  font-size: 0.75rem;
  color: var(--text-secondary);
  gap: 0.25rem;
}

.filter-chip-highlight {
  background: var(--accent-soft);
  border-color: var(--accent);
  color: var(--accent);
}

.info-chip {
  display: inline-flex;
  align-items: center;
  font-size: 13px;
  color: var(--text-secondary);
  white-space: nowrap;
  gap: 2px;
}
.info-chip strong {
  color: var(--text-primary);
  font-weight: 600;
}

.scheme-badge {
  display: inline-flex;
  align-items: center;
  padding: 0.2rem 0.75rem;
  background: var(--success-soft);
  border: 1px solid var(--success);
  border-radius: 999px;
  font-size: 0.7rem;
  font-weight: 600;
  color: var(--success);
}

.mark-col-header {
  display: block;
  font-size: 0.6rem;
  font-weight: 400;
  opacity: 0.7;
  text-transform: none;
  letter-spacing: 0;
}

.subject-type-btn {
  min-width: 110px;
  transition: all 0.2s ease;
}

.subject-type-btn.btn-primary {
  box-shadow: 0 2px 8px rgba(37, 99, 235, 0.25);
}

.grade-badge-a1 { background: #16a34a20; color: #16a34a; border: 1px solid #16a34a40; }
.grade-badge-a2 { background: #22c55e20; color: #22c55e; border: 1px solid #22c55e40; }
.grade-badge-b1 { background: #2563eb20; color: #2563eb; border: 1px solid #2563eb40; }
.grade-badge-b2 { background: #3b82f620; color: #3b82f6; border: 1px solid #3b82f640; }
.grade-badge-c1 { background: #d9770620; color: #d97706; border: 1px solid #d9770640; }
.grade-badge-c2 { background: #f59e0b20; color: #f59e0b; border: 1px solid #f59e0b40; }
.grade-badge-d  { background: #dc262620; color: #dc2626; border: 1px solid #dc262640; }
.grade-badge-e  { background: #991b1b20; color: #991b1b; border: 1px solid #991b1b40; }

/* ── Student ID Card: 3D Flip Card System ─────────────────────────────────── */
.id-card-flip-container {
  perspective: 1000px;
  width: 310px;
  max-width: 100%;
  margin: 0 auto;
}
.id-card-flip-inner {
  position: relative;
  width: 310px;
  max-width: 100%;
  height: 480px;
  transition: transform 0.6s cubic-bezier(0.4, 0.2, 0.2, 1);
  transform-style: preserve-3d;
}
.id-card-flip-container.flipped .id-card-flip-inner { transform: rotateY(180deg); }
.id-card-side {
  box-sizing: border-box;
  position: relative;
  overflow: hidden;
  background: linear-gradient(180deg, #ffffff 0%, #f8fafc 40%, #f1f5f9 100%);
  color: #0f172a;
  border-radius: 14px;
  border: 1px solid #cbd5e1;
  box-shadow: 0 10px 25px -5px rgba(15,23,42,.1), 0 8px 10px -6px rgba(15,23,42,.06);
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  display: flex;
  flex-direction: column;
  width: 310px;
  max-width: 100%;
  height: 480px;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  -webkit-print-color-adjust: exact !important;
  print-color-adjust: exact !important;
}
.id-card-side.id-card-back { position: absolute; top: 0; left: 0; transform: rotateY(180deg); }
.id-card-header-banner {
  height: 98px;
  background: #ffffff;
  color: #0f172a !important;
  padding: 10px 8px 6px;
  text-align: center;
  border-top-left-radius: 13px;
  border-top-right-radius: 13px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  border-bottom: 3px solid #0284c7;
  flex-shrink: 0;
  overflow: hidden;
}
.id-card-school-logo { width: 96%; max-width: 295px; max-height: 60px; object-fit: contain; }
.id-card-school-name { font-size: 16px; font-weight: 800; text-transform: uppercase; letter-spacing: .5px; color: #0f172a !important; margin: 0; }
.id-card-subtitle-badge {
  display: inline-block;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .8px;
  text-transform: uppercase;
  padding: 2.5px 12px;
  border-radius: 12px;
  background: linear-gradient(135deg, #1e3a8a 0%, #0f172a 100%);
  color: #fff !important;
  margin-top: 1px;
}
.id-card-body-section {
  padding: 10px 14px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  flex-grow: 1;
  height: 342px;
}
.id-card-body-section.back-body { height: 314px; padding: 10px 14px; }
.id-card-photo-wrapper {
  width: 80px;
  height: 100px;
  border-radius: 8px;
  border: 2px solid #1e3a8a;
  overflow: hidden;
  background: #fff;
  box-shadow: 0 4px 12px rgba(15,23,42,.1);
  margin: 2px 0 6px;
  flex-shrink: 0;
}
.id-card-photo-wrapper img { width: 100%; height: 100%; object-fit: cover; display: block; }
.id-card-student-title {
  font-size: 16px; font-weight: 800; text-align: center; text-transform: uppercase;
  color: #0f172a; margin: 2px 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%;
}
.id-card-class-pill {
  font-size: 12px; font-weight: 700; padding: 3px 14px; border-radius: 6px;
  background: linear-gradient(135deg,#1e3a8a 0%,#2563eb 100%); color: #fff;
  margin: 2px 0 8px; display: inline-block;
}
.id-card-info-table { width: 100%; margin-top: 2px; }
.id-card-info-row { display: grid; grid-template-columns: 100px 12px 1fr; align-items: center; padding: 4px 0; border-bottom: 1px dashed #cbd5e1; }
.id-card-info-row:last-child { border-bottom: none; }
.id-card-info-row .info-label { font-size: 11.5px; font-weight: 600; color: #475569; white-space: nowrap; }
.id-card-info-row .info-sep { font-size: 12px; font-weight: 700; color: #64748b; text-align: center; }
.id-card-info-row .info-val { font-size: 12px; font-weight: 700; color: #0f172a; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.id-card-contact-strip {
  width: 100%; display: flex; align-items: center; justify-content: space-between;
  background: #fff; border: 1px solid #cbd5e1; border-radius: 8px; padding: 6px 10px; margin-bottom: 6px;
}
.id-card-contact-strip .contact-item { display: flex; align-items: center; gap: 4px; font-size: 9.5px; font-weight: 700; color: #1e3a8a; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.id-card-contact-strip .contact-item i { font-size: 12px; color: #0284c7; flex-shrink: 0; }
.id-card-rules-block {
  width: 100%; padding: 12px 14px; background: #fff; border-radius: 10px; border: 1px solid #cbd5e1;
  flex-grow: 1; display: flex; flex-direction: column;
}
.id-card-rules-block .rules-heading { font-size: 11px; font-weight: 800; color: #1e3a8a; letter-spacing: .8px; text-transform: uppercase; margin-bottom: 8px; border-bottom: 2px solid #1e3a8a; padding-bottom: 4px; text-align: center; }
.id-card-rules-block .rules-list { margin: 0; padding-left: 16px; font-size: 10px; line-height: 1.55; color: #334155; }
.id-card-rules-block .rules-list li { margin-bottom: 5px; font-weight: 500; }
.id-card-footer-banner {
  min-height: 56px; background: linear-gradient(135deg,#0f172a 0%,#1e3a8a 100%); color: #fff;
  padding: 8px 12px; display: flex; align-items: center; justify-content: space-between;
  border-bottom-left-radius: 13px; border-bottom-right-radius: 13px; margin-top: auto; flex-shrink: 0;
}
.id-card-footer-text { font-size: 10px; font-weight: 700; color: #fff; }
.id-card-footer-text .session-label { display: inline-block; background: rgba(255,255,255,.15); padding: 3px 8px; border-radius: 4px; border: 1px solid rgba(255,255,255,.25); }
.id-card-footer-sig { text-align: center; display: flex; flex-direction: column; align-items: center; }
.id-card-sig-img { max-height: 28px; max-width: 75px; object-fit: contain; display: block; margin: 0 auto 2px; filter: brightness(0) invert(1); }
.id-card-footer-sig .sig-name { font-size: 9px; font-weight: 800; color: #fff; display: block; }
.id-card-footer-sig .sig-title { font-size: 8.5px; font-weight: 600; color: rgba(255,255,255,.85); display: block; }
.id-card-footer-banner.back-footer { min-height: 68px; padding: 10px 14px; justify-content: center; text-align: center; }
.id-card-return-block { display: flex; flex-direction: column; align-items: center; text-align: center; width: 100%; gap: 3px; font-size: 9.5px; }
.id-card-return-block .return-title { font-size: 9px; font-style: italic; color: rgba(255,255,255,.9); display: block; }
.id-card-return-block .return-school { font-size: 10px; font-weight: 800; text-transform: uppercase; color: #fff; display: block; }
.id-card-return-block .return-address { font-size: 9.5px; font-weight: 500; color: rgba(255,255,255,.95); display: block; }
.id-card-flip-actions { text-align: center; }

/* ── Print Media Styles: Only Print ID Card on ID Card Print ─────────────── */
@media print {
  body {
    background: #ffffff !important;
    color: #000000 !important;
    padding: 0 !important;
    margin: 0 !important;
  }

  .sidebar,
  .app-sidebar,
  .navbar,
  .topbar,
  .header,
  .footer,
  .btn,
  .d-print-none,
  .teacher-summary-card,
  .student-tabs-header,
  .teacher-section-title,
  .filter-card-premium,
  .card-header,
  #studentTabContent > .tab-pane:not(#idcard) {
    display: none !important;
  }

  .content-wrapper,
  .container-fluid,
  .main-content,
  .card-premium,
  .tab-content,
  .tab-pane {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
    margin: 0 !important;
    width: 100% !important;
  }

  .idcard-print-wrap {
    display: flex !important;
    justify-content: center !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 auto !important;
    padding: 0 !important;
  }

  .id-card-flip-container {
    perspective: none !important;
    width: auto !important;
    margin: 0 auto !important;
  }

  .id-card-flip-inner {
    transform: none !important;
    transform-style: flat !important;
    display: flex !important;
    flex-direction: row !important;
    gap: 16px !important;
    width: auto !important;
    height: auto !important;
    justify-content: center !important;
    align-items: flex-start !important;
    flex-wrap: wrap !important;
  }

  .id-card-side {
    position: relative !important;
    transform: none !important;
    backface-visibility: visible !important;
    -webkit-backface-visibility: visible !important;
    box-shadow: none !important;
    border: 1px solid #cbd5e1 !important;
    page-break-inside: avoid !important;
    float: none !important;
    margin: 0 !important;
  }

  .id-card-side.id-card-back {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    transform: none !important;
  }

  .id-card-flip-actions {
    display: none !important;
  }
}

/* ==================================================================
   Session Report & ERP Analytics Dashboard Component Styles
   ================================================================== */
.report-header-banner {
  background: var(--bg-surface);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-lg);
  padding: 1.5rem;
  box-shadow: var(--shadow-sm);
  margin-top: 0;
  margin-bottom: 1.5rem;
}

.report-filter-bar {
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  padding: 1.25rem;
  box-shadow: var(--shadow-sm);
}

.report-filter-pill {
  border-radius: var(--radius-md);
  font-size: var(--text-xs);
  border: 1px solid var(--border-default);
  background: var(--bg-surface);
  color: var(--text-primary);
  transition: all 0.2s ease;
}

.report-filter-pill:focus,
.report-filter-pill:hover {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}

.stat-card-gradient {
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  padding: 1.25rem;
  box-shadow: var(--shadow-sm);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  position: relative;
  overflow: hidden;
  height: 100%;
}

.stat-card-gradient:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
  border-color: var(--border-default);
}

.stat-card-gradient::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 4px;
  height: 100%;
  border-radius: var(--radius-lg) 0 0 var(--radius-lg);
}

.stat-card-indigo::before { background: #6366f1; }
.stat-card-emerald::before { background: #10b981; }
.stat-card-blue::before { background: #2563eb; }
.stat-card-amber::before { background: #f59e0b; }
.stat-card-rose::before { background: #ef4444; }
.stat-card-teal::before { background: #14b8a6; }
.stat-card-purple::before { background: #8b5cf6; }

.icon-chip-sm {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.icon-chip-md {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.chart-card-container {
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  height: 100%;
}

.chart-card-header {
  padding: 1rem 1.25rem;
  border-bottom: 1px solid var(--border-subtle);
  background: var(--bg-surface-raised);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.chart-card-body {
  padding: 1.25rem;
  position: relative;
}

.chart-canvas-lg {
  max-height: 280px;
  width: 100%;
}

.chart-canvas-md {
  max-height: 240px;
  width: 100%;
}

.sticky-table-header th {
  position: sticky;
  top: 0;
  z-index: 10;
  background-color: var(--bg-subtle) !important;
  color: var(--text-secondary) !important;
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  border-bottom: 2px solid var(--border-default);
}

.report-nav-pills {
  background: var(--bg-subtle);
  padding: 4px;
  border-radius: var(--radius-md);
  display: inline-flex;
  gap: 4px;
  width: 100%;
}

.report-nav-pills .nav-link {
  border-radius: var(--radius-sm);
  font-weight: 600;
  font-size: var(--text-xs);
  color: var(--text-secondary);
  padding: 8px 16px;
  transition: all 0.15s ease;
  border: none;
}

.report-nav-pills .nav-link.active {
  background: var(--bg-surface);
  color: var(--accent);
  box-shadow: var(--shadow-sm);
}

.kpi-progress-bar {
  height: 6px;
  border-radius: var(--pill-radius);
  background: var(--bg-subtle);
  overflow: hidden;
}

.kpi-progress-fill {
  height: 100%;
  border-radius: var(--pill-radius);
  transition: width 0.4s ease;
}

/* ==================================================================
   Profile & Settings Modern Form Component Styles
   ================================================================== */
.profile-banner-card {
  background: var(--bg-surface);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-lg);
  padding: 1.5rem;
  box-shadow: var(--shadow-sm);
  margin-top: 0;
  margin-bottom: 1.5rem;
  position: relative;
}

.profile-avatar-box {
  width: 90px;
  height: 70px;
  border-radius: var(--radius-md);
  object-fit: contain !important;
  background: #ffffff;
  padding: 4px;
  border: 1px solid var(--border-default);
  box-shadow: var(--shadow-sm);
}

.school-logo-preview {
  max-width: 160px;
  max-height: 100px;
  object-fit: contain !important;
  background: #ffffff;
  padding: 6px;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
}


.profile-preview-card {
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  padding: 1.25rem;
  box-shadow: var(--shadow-sm);
}

.form-icon-group {
  position: relative;
  display: flex;
  align-items: center;
}

.form-icon-group i {
  position: absolute;
  left: 12px;
  color: var(--text-tertiary);
  font-size: 16px;
  pointer-events: none;
}

.form-icon-group .form-control,
.form-icon-group .form-select {
  padding-left: 36px;
  border-radius: var(--radius-md);
}

.form-control-modern {
  border-radius: var(--radius-md);
  border: 1px solid var(--border-default);
  padding: 0.5rem 0.75rem;
  font-size: var(--text-xs);
  transition: all 0.2s ease;
}

.form-control-modern:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}

.upload-dropzone-sm {
  border: 2px dashed var(--border-default);
  border-radius: var(--radius-md);
  padding: 0.75rem;
  text-align: center;
  background: var(--bg-subtle);
  transition: all 0.2s ease;
  cursor: pointer;
}

.upload-dropzone-sm:hover {
  border-color: var(--accent);
  background: var(--accent-soft);
}

/* ==================================================================
   Professional CBSE School Print Header Component Styles
   ================================================================== */
.cbse-print-header-container {
  border-bottom: 2px solid #0f172a;
  padding-bottom: 14px;
  margin-bottom: 20px;
  text-align: center;
  width: 100%;
}

.cbse-print-header-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  width: 100%;
}

.cbse-print-logo-box {
  width: 90px;
  height: 80px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.cbse-print-logo-box img {
  max-width: 100%;
  max-height: 80px;
  object-fit: contain;
}

.cbse-print-center-info {
  flex: 1;
  text-align: center;
}

.cbse-affiliation-tag {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: #475569;
  margin-bottom: 2px;
}

.cbse-school-title {
  font-size: 22px;
  font-weight: 800;
  text-transform: uppercase;
  color: #0f172a;
  margin: 0 0 2px 0;
  line-height: 1.1;
  letter-spacing: -0.01em;
}

.cbse-code-strip {
  font-size: 11px;
  font-weight: 600;
  color: #334155;
  margin-bottom: 4px;
}

.cbse-school-address {
  font-size: 11px;
  color: #475569;
  margin: 0 0 2px 0;
  line-height: 1.3;
}

.cbse-contact-strip {
  font-size: 10.5px;
  color: #64748b;
  font-weight: 500;
  margin: 0;
}

.cbse-form-title-badge {
  display: inline-block;
  background: #0f172a;
  color: #ffffff;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  padding: 4px 18px;
  border-radius: 4px;
  margin-top: 10px;
}

.cbse-print-cover-wrapper,
.cbse-print-logo-banner {
  width: 100%;
  margin-bottom: 16px;
  text-align: center;
  border-bottom: 2px solid #0f172a;
  padding-bottom: 10px;
}

.cbse-print-cover-img,
.cbse-print-full-logo {
  max-width: 100%;
  max-height: 120px;
  object-fit: contain;
}

/* ==================================================================
   School Profile Asset Previews & Upload Cards
   ================================================================== */
.asset-sig-preview {
  max-height: 60px;
  object-fit: contain;
}

.profile-avatar-lg {
  width: 110px;
  height: 110px;
  object-fit: cover;
}

.profile-security-card {
  max-width: 650px;
  margin: 0 auto;
}

.asset-upload-box {
  background: var(--bg-surface, #ffffff);
  border: 1px solid var(--border-subtle, #e7e7ea);
  border-radius: var(--radius-md, 12px);
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  height: 100%;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.asset-upload-box:hover {
  border-color: var(--accent, #2563eb);
  box-shadow: var(--shadow-sm, 0 1px 2px rgba(16, 16, 20, 0.04));
}

.asset-preview-box {
  height: 76px;
  width: 100%;
  background: var(--bg-canvas, #f0f4f9);
  border: 1px dashed var(--border-default, #dcdce0);
  border-radius: var(--radius-sm, 8px);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  padding: 6px;
  position: relative;
}

.asset-preview-img {
  max-height: 64px !important;
  max-width: 100% !important;
  width: auto !important;
  height: auto !important;
  object-fit: contain !important;
  display: block;
}

.asset-preview-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: var(--text-tertiary, #94949c);
  font-size: 11px;
  gap: 2px;
}

.asset-preview-placeholder i {
  font-size: 22px;
}

/* ==================================================================
   Profile Admin Avatar Banner
   ================================================================== */
.profile-avatar-upload-wrap {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 16px;
  background: var(--bg-canvas, #f0f4f9);
  border: 1px solid var(--border-subtle, #e7e7ea);
  border-radius: var(--radius-md, 12px);
  margin-bottom: 20px;
}

.profile-avatar-thumb {
  width: 80px;
  height: 80px;
  object-fit: cover;
  border-radius: 50%;
  border: 2px solid var(--bg-surface, #ffffff);
  box-shadow: var(--shadow-sm, 0 1px 2px rgba(16, 16, 20, 0.04));
}

/* ==================================================================
   Official CBSE Admit Card / Hall Ticket Component & Print Styles
   ================================================================== */
.cbse-admit-card {
  background: var(--bg-surface, #ffffff);
  border: 2px solid #0f172a;
  border-radius: var(--radius-md, 10px);
  padding: 20px 24px;
  margin-bottom: 28px;
  box-shadow: var(--shadow-md, 0 4px 12px rgba(16, 16, 20, 0.06));
  position: relative;
  page-break-inside: avoid;
  break-inside: avoid;
  page-break-after: always;
  break-after: page;
}

.cbse-admit-header {
  border-bottom: 2px solid #0f172a;
  padding-bottom: 12px;
  margin-bottom: 14px;
}

.cbse-admit-logo {
  max-height: 55px;
  max-width: 95px;
  object-fit: contain;
}

.cbse-admit-badge-logo {
  max-height: 52px;
  max-width: 80px;
  object-fit: contain;
}

.cbse-admit-title-banner {
  background: #0f172a;
  color: #ffffff;
  padding: 5px 14px;
  border-radius: 4px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-weight: 700;
  font-size: 12px;
  display: inline-block;
}

.cbse-admit-photo-box {
  width: 105px;
  height: 130px;
  border: 2px solid #0f172a;
  border-radius: 4px;
  overflow: hidden;
  background: #f8fafc;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

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

.cbse-admit-detail-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 11px;
}

.cbse-admit-detail-table th,
.cbse-admit-detail-table td {
  padding: 5px 8px;
  border: 1px solid #cbd5e1;
}

.cbse-admit-detail-table th {
  background-color: #f1f5f9;
  color: #334155;
  font-weight: 700;
  width: 18%;
  white-space: nowrap;
}

.cbse-admit-detail-table td {
  color: #0f172a;
  font-weight: 600;
}

.cbse-admit-schedule-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 11px;
}

.cbse-admit-schedule-table th {
  background-color: #0f172a;
  color: #ffffff;
  padding: 6px 8px;
  border: 1px solid #0f172a;
  font-weight: 700;
  font-size: 11px;
}

.cbse-admit-schedule-table td {
  padding: 6px 8px;
  border: 1px solid #cbd5e1;
  color: #0f172a;
}

.cbse-admit-schedule-table tr:nth-child(even) td {
  background-color: #f8fafc;
}

.cbse-admit-instructions-box {
  background: #f8fafc;
  border: 1px solid #cbd5e1;
  border-radius: 6px;
  padding: 10px 14px;
  font-size: 10.5px;
  line-height: 1.4;
  color: #334155;
}

.cbse-admit-sig-container {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  margin-top: 20px;
  padding-top: 8px;
}

.cbse-admit-sig-cell {
  text-align: center;
  min-width: 140px;
}

.cbse-admit-sig-line {
  border-top: 1px solid #0f172a;
  margin-top: 32px;
  padding-top: 4px;
  font-size: 11px;
  font-weight: 700;
  color: #0f172a;
}

.cbse-admit-sig-img {
  max-height: 36px;
  object-fit: contain;
  margin-bottom: 2px;
}

/* Print Styles for CBSE Admit Cards */
@page {
  size: A4 portrait;
  margin: 8mm 10mm;
}

@media print {
  * {
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
  }

  html, body {
    background: #ffffff !important;
    margin: 0 !important;
    padding: 0 !important;
    width: 100% !important;
  }

  .no-print,
  .sidebar,
  .topbar,
  header,
  footer,
  .filter-card-premium,
  .sidebar-overlay,
  #profile-page-data {
    display: none !important;
  }

  .app-layout,
  .main-wrapper,
  .content-area {
    margin: 0 !important;
    padding: 0 !important;
    width: 100% !important;
    background: transparent !important;
  }

  .cbse-admit-card {
    border: 2px solid #000000 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    margin: 0 0 0 0 !important;
    padding: 16px 18px !important;
    width: 100% !important;
    box-sizing: border-box !important;
    page-break-inside: avoid !important;
    break-inside: avoid !important;
    page-break-after: always !important;
    break-after: page !important;
  }

  .cbse-admit-header {
    border-bottom-color: #000000 !important;
  }

  .cbse-admit-title-banner {
    background: #000000 !important;
    color: #ffffff !important;
  }

  .cbse-admit-detail-table th,
  .cbse-admit-detail-table td,
  .cbse-admit-schedule-table th,
  .cbse-admit-schedule-table td {
    border-color: #000000 !important;
  }

  .cbse-admit-schedule-table th {
    background-color: #000000 !important;
    color: #ffffff !important;
  }

  .cbse-admit-instructions-box {
    border-color: #000000 !important;
    background-color: #fafafa !important;
  }

  .cbse-admit-sig-line {
    border-top-color: #000000 !important;
  }
}

/* ==================================================================
   Official School Certificate Component & Print Styles
   ================================================================== */
.cert-card-wrapper {
  background: var(--bg-surface, #ffffff);
  border: 8px double #b45309;
  border-radius: var(--radius-md, 12px);
  padding: 36px 44px;
  margin-bottom: 32px;
  box-shadow: var(--shadow-md, 0 4px 14px rgba(16, 16, 20, 0.06));
  position: relative;
  page-break-inside: avoid;
  break-inside: avoid;
  page-break-after: always;
  break-after: page;
}

.cert-card-wrapper.royal_blue {
  border-color: #1e40af;
}

.cert-card-wrapper.emerald_green {
  border-color: #047857;
}

.cert-card-wrapper.classic_gold {
  border-color: #b45309;
}

.cert-header-logo {
  max-height: 64px;
  max-width: 100px;
  object-fit: contain;
}

.cert-badge-logo {
  max-height: 56px;
  max-width: 80px;
  object-fit: contain;
}

.cert-title-badge {
  background: #0f172a;
  color: #ffffff;
  padding: 8px 24px;
  border-radius: 6px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 800;
  font-size: 14px;
  display: inline-block;
  box-shadow: var(--shadow-xs, 0 1px 2px rgba(0,0,0,0.05));
}

.cert-body-text {
  font-family: Georgia, 'Times New Roman', serif;
  font-size: 16px;
  line-height: 2.1;
  color: #1e293b;
  text-align: center;
  margin: 24px 0;
  word-break: break-word;
}

.cert-meta-label {
  font-size: 11.5px;
  color: #64748b;
  display: block;
}

.cert-meta-val {
  font-size: 12px;
  color: #0f172a;
  font-weight: 700;
}

.cert-sig-line {
  border-top: 1.5px solid #0f172a;
  margin-top: 36px;
  padding-top: 6px;
  font-size: 11px;
  font-weight: 700;
  color: #0f172a;
  text-transform: uppercase;
}

.cert-sig-img {
  max-height: 40px;
  object-fit: contain;
  margin-bottom: 2px;
}

/* Certificate Print Styles */
@media print {
  .cert-card-wrapper {
    border-width: 6px !important;
    border-style: double !important;
    box-shadow: none !important;
    margin: 0 0 0 0 !important;
    padding: 24px 28px !important;
    width: 100% !important;
    box-sizing: border-box !important;
    page-break-inside: avoid !important;
    break-inside: avoid !important;
    page-break-after: always !important;
    break-after: page !important;
  }

  .cert-title-badge {
    background: #000000 !important;
    color: #ffffff !important;
  }
}

/* Table Header Text Color Fix for Light Tables */
.content-area table.table-bordered thead th,
.content-area table thead tr.bg-light th,
.content-area table thead tr.table-light th {
  color: var(--text-dark, #0f172a) !important;
  background-color: var(--bg-canvas, #f1f5f9) !important;
}

body.dark-theme .content-area table.table-bordered thead th,
body.dark-theme .content-area table thead tr.bg-light th,
body.dark-theme .content-area table thead tr.table-light th {
  color: #f8fafc !important;
  background-color: #1e293b !important;
}

/* Datatable Length Select Dropdown Pill Styling */
.teacher-length-select {
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
  font-size: 12px !important;
  color: var(--text-muted, #64748b) !important;
  background: var(--bg-surface, #ffffff) !important;
  border: 1px solid var(--border-default, #cbd5e1) !important;
  border-radius: 20px !important;
  padding: 3px 10px !important;
}

.teacher-length-select select.length-select-inner,
select.length-select-inner,
select#admissionsLengthSelect,
#admissionsLengthSelect {
  border: 0 !important;
  border-style: none !important;
  background-color: transparent !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  color: var(--text-dark, #0f172a) !important;
  padding: 0 16px 0 4px !important;
  margin: 0 !important;
  outline: none !important;
  box-shadow: none !important;
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  appearance: none !important;
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%3c475569' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e") !important;
  background-repeat: no-repeat !important;
  background-position: right center !important;
  background-size: 9px 9px !important;
  cursor: pointer !important;
}

/* ==================================================================
   Fee Structure & Collect Fees Styling
   ================================================================== */
/* ==================================================================
   Fee Structure & Collect Fees Styling
   ================================================================== */
.fees-input-small {
  height: 30px;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-dark, #0f172a);
  background-color: var(--bg-surface, #ffffff);
  border: 1px solid var(--border-default, #cbd5e1);
  border-radius: 6px;
  padding: 2px 8px;
  width: 100%;
  outline: none !important;
  transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

.fees-input-small:focus,
.fees-input-small:hover {
  border-color: var(--color-accent, #3b82f6) !important;
  box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.15) !important;
  outline: 0 !important;
}

.fees-input-small:disabled {
  background-color: var(--bg-canvas, #f8fafc);
  color: var(--text-muted, #64748b);
  border-color: #e2e8f0;
  box-shadow: none !important;
}

.fees-select-small {
  height: 30px;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-dark, #0f172a);
  background-color: var(--bg-surface, #ffffff);
  border: 1px solid var(--border-default, #cbd5e1);
  border-radius: 6px;
  padding: 2px 22px 2px 8px;
  width: auto;
  min-width: 62px;
  outline: none !important;
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  appearance: none !important;
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%3c475569' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e") !important;
  background-repeat: no-repeat !important;
  background-position: right 6px center !important;
  background-size: 9px 9px !important;
  cursor: pointer;
  transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

.fees-select-small:focus,
.fees-select-small:hover {
  border-color: var(--color-accent, #3b82f6) !important;
  box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.15) !important;
  outline: 0 !important;
}

.fees-select-small:disabled {
  background-color: var(--bg-canvas, #f8fafc);
  color: var(--text-muted, #64748b);
  border-color: #e2e8f0;
  cursor: not-allowed;
  box-shadow: none !important;
}

/* Slimmer Table Cells & Compact Cards for Fee Structure Modal */
#fees_structure_tbody tr td {
  padding: 6px 10px !important;
}

#updateFeesModal .card-premium {
  padding: 10px 14px !important;
}

.fees-badge-locked {
  display: block;
  font-size: 10px;
  color: var(--color-warning, #d97706);
  font-weight: 600;
  margin-top: 2px;
}

.fees-badge-paid {
  display: block;
  font-size: 10px;
  color: var(--color-success, #16a34a);
  font-weight: 700;
  margin-top: 2px;
}

.fees-type-title {
  font-size: 13px;
  font-weight: 700;
  color: var(--text-dark, #0f172a);
}

.fees-type-sub {
  font-size: 11px;
  color: var(--text-muted, #64748b);
  line-height: 1.3;
}

/* Fee Directory Table Breakdown Box */
.fee-breakdown-box {
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-size: 11.5px;
  background: var(--bg-canvas, #f8fafc);
  border: 1px solid var(--border-default, #e2e8f0);
  border-radius: 8px;
  padding: 6px 10px;
}

.fee-breakdown-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.fee-breakdown-row .fee-lbl {
  color: var(--text-muted, #64748b);
}

.fee-breakdown-row .fee-val {
  font-weight: 600;
  color: var(--text-dark, #0f172a);
}

.fee-breakdown-row .fee-val-total { color: #0f172a; }
.fee-breakdown-row .fee-val-fine { color: #dc2626; }
.fee-breakdown-row .fee-val-discount { color: #2563eb; }
.fee-breakdown-row .fee-val-paid { color: #16a34a; }
.fee-breakdown-row .fee-val-balance { color: #d97706; }

/* Fee Types Dropdown Selector */
.fee-types-select-box {
  position: relative;
  width: 100%;
}

.fee-types-dropdown-menu {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  z-index: 1050;
  max-height: 220px;
  overflow-y: auto;
  background-color: var(--bg-surface, #ffffff);
  border: 1px solid var(--border-default, #cbd5e1);
  border-radius: 8px;
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
  margin-top: 4px;
  padding: 4px 0;
}

.fee-type-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  font-size: 12px;
  color: var(--text-dark, #0f172a);
  border-bottom: 1px solid #f1f5f9;
  transition: background-color 0.15s ease;
  cursor: pointer;
}

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

/* ==================================================================
   Modal Form Controls & Padding Standardization
   ================================================================== */
.modal .form-control-admin,
.modal select.form-control-admin,
.modal textarea.form-control-admin,
.modal .form-select-admin,
.modal input[type="text"].form-control-admin,
.modal input[type="number"].form-control-admin,
.modal input[type="email"].form-control-admin,
.modal input[type="date"].form-control-admin,
.modal input[type="file"].form-control-admin {
  height: 36px !important;
  padding: 6px 12px !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  border-radius: 6px !important;
  border: 1px solid var(--border-default, #cbd5e1) !important;
  background-color: #ffffff !important;
  box-shadow: none !important;
  transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out !important;
}

.modal textarea.form-control-admin {
  height: auto !important;
  min-height: 60px !important;
}

.modal .form-control-admin:focus,
.modal select.form-control-admin:focus,
.modal textarea.form-control-admin:focus {
  border-color: var(--color-accent, #3b82f6) !important;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15) !important;
  outline: 0 !important;
}

.modal label,
.modal .form-label-admin,
.modal .form-label {
  font-size: 12px !important;
  font-weight: 600 !important;
  color: var(--text-dark, #334155) !important;
  margin-bottom: 4px !important;
}

.modal .card-premium {
  padding: 12px 16px !important;
  border-radius: 10px !important;
  border: 1px solid var(--border-default, #e2e8f0) !important;
}

/* ERP Dashboard Redesign Styles - Purple Free & Theme Adaptive */
.dash-hero-banner {
  background: linear-gradient(135deg, rgba(37, 99, 235, 0.08) 0%, rgba(15, 23, 42, 0.03) 100%) !important;
  border-radius: var(--card-radius-md) !important;
  border: 1px solid var(--border-subtle) !important;
  color: var(--text-primary) !important;
}

.dash-card-premium {
  background: var(--bg-surface) !important;
  border-radius: var(--card-radius-md) !important;
  border: 1px solid var(--border-subtle) !important;
  box-shadow: var(--shadow-sm) !important;
  transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1) !important;
  position: relative;
  overflow: hidden;
  color: var(--text-primary) !important;
}
.dash-card-premium:hover {
  transform: translateY(-4px) !important;
  box-shadow: var(--shadow-md) !important;
  border-color: var(--accent) !important;
}
.dash-card-premium::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 4px;
  background: var(--accent);
  opacity: 0;
  transition: opacity 0.3s ease;
}
.dash-card-premium:hover::before {
  opacity: 1;
}

/* Metric Icon Badge */
.metric-icon-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: 12px;
  font-size: 1.25rem;
}
.metric-icon-blue { background-color: rgba(59, 130, 246, 0.1) !important; color: #3b82f6 !important; }
.metric-icon-emerald { background-color: rgba(16, 185, 129, 0.1) !important; color: #10b981 !important; }
.metric-icon-amber { background-color: rgba(245, 158, 11, 0.1) !important; color: #f59e0b !important; }
.metric-icon-rose { background-color: rgba(244, 63, 94, 0.1) !important; color: #f43f5e !important; }
.metric-icon-cyan { background-color: rgba(6, 182, 212, 0.1) !important; color: #06b6d4 !important; }
.metric-icon-slate { background-color: rgba(100, 116, 139, 0.1) !important; color: #64748b !important; }

/* Metric Delta Trend Badges */
.metric-trend-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 0.7rem !important;
  font-weight: 600 !important;
  padding: 3px 10px !important;
  border-radius: var(--radius-pill) !important;
  transition: all 0.25s ease !important;
}
.metric-trend-badge.success {
  background-color: var(--success-soft) !important;
  color: var(--success) !important;
}
.metric-trend-badge.info {
  background-color: var(--info-soft) !important;
  color: var(--info) !important;
}
.metric-trend-badge.warning {
  background-color: var(--warning-soft) !important;
  color: var(--warning) !important;
}

/* KPI Custom Progress Bar styling */
.kpi-progress-bg {
  width: 100%;
  height: 6px;
  background-color: var(--bg-subtle);
  border-radius: 999px;
  overflow: hidden;
}
.kpi-progress-bar {
  height: 100%;
  width: 0%; /* Animated on load */
  border-radius: 999px;
  transition: width 1.2s cubic-bezier(0.4, 0, 0.2, 1);
}
.kpi-bar-blue { background-color: #3b82f6 !important; }
.kpi-bar-emerald { background-color: #10b981 !important; }
.kpi-bar-amber { background-color: #f59e0b !important; }
.kpi-bar-rose { background-color: #f43f5e !important; }
.kpi-bar-cyan { background-color: #06b6d4 !important; }
.kpi-bar-slate { background-color: #64748b !important; }

/* CSS Calendar Widget */
.dash-calendar {
  width: 100%;
  background: transparent;
}
.dash-calendar-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
}
.dash-calendar-title {
  font-family: var(--font-heading);
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--text-primary);
}
.dash-calendar-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 4px;
  text-align: center;
}
.dash-calendar-day-header {
  font-size: 0.7rem;
  font-weight: 600;
  color: var(--text-tertiary);
  padding: 4px 0;
  text-transform: uppercase;
}
.dash-calendar-day {
  aspect-ratio: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--text-secondary);
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.2s ease;
}
.dash-calendar-day:hover {
  background: var(--bg-subtle);
  color: var(--text-primary);
}
.dash-calendar-day.today {
  background: var(--accent) !important;
  color: #ffffff !important;
  font-weight: 700;
  box-shadow: var(--shadow-sm);
}
.dash-calendar-day.empty {
  cursor: default;
  background: transparent !important;
}

/* Today's Schedule Timeline */
.schedule-timeline-v2 {
  position: relative;
  padding-left: 24px;
}
.schedule-timeline-v2::before {
  content: '';
  position: absolute;
  left: 5px;
  top: 8px;
  bottom: 8px;
  width: 2px;
  background: var(--border-subtle);
}
.schedule-timeline-item-v2 {
  position: relative;
  margin-bottom: 20px;
  padding: 12px 16px;
  border-radius: var(--radius-md);
  background: var(--bg-subtle);
  border: 1px solid var(--border-subtle);
  transition: all 0.25s ease;
}
.schedule-timeline-item-v2:hover {
  transform: translateX(4px);
  border-color: var(--accent);
}
.schedule-timeline-item-v2::before {
  content: '';
  position: absolute;
  left: -23px;
  top: 18px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--accent);
  border: 2px solid var(--bg-surface);
  box-shadow: 0 0 0 2px var(--accent);
  transition: all 0.2s ease;
}
.schedule-timeline-item-v2:hover::before {
  transform: scale(1.3);
}
.schedule-timeline-item-v2.active::before {
  background: var(--success);
  box-shadow: 0 0 0 2px var(--success);
}
.schedule-time-node {
  font-size: 0.7rem;
  font-weight: 700;
  color: var(--text-secondary);
  margin-bottom: 4px;
}
.schedule-subject-v2 {
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 4px;
}
.schedule-meta-v2 {
  font-size: 0.72rem;
  color: var(--text-secondary);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
}

/* Compact Event Cards for Upcoming Exams */
.exam-event-card {
  display: flex;
  gap: 12px;
  padding: 12px;
  border-radius: 12px;
  background: var(--bg-subtle);
  border: 1px solid var(--border-subtle);
  margin-bottom: 10px;
  transition: all 0.25s ease;
}
.exam-event-card:hover {
  border-color: var(--accent);
  transform: translateY(-2px);
}
.exam-date-badge {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 8px;
  background: var(--accent-soft);
  color: var(--accent);
  font-family: var(--font-heading);
}
.exam-date-day {
  font-size: 0.95rem;
  font-weight: 800;
  line-height: 1;
}
.exam-date-month {
  font-size: 0.6rem;
  font-weight: 700;
  text-transform: uppercase;
}
.exam-details {
  flex: 1;
  min-width: 0;
}
.exam-title-v2 {
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 2px;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}
.exam-meta-v2 {
  font-size: 0.68rem;
  color: var(--text-secondary);
}

/* Announcement Cards */
.announcement-card-v2 {
  padding: 12px;
  border-radius: 12px;
  background: var(--bg-subtle);
  border: 1px solid var(--border-subtle);
  margin-bottom: 10px;
  transition: all 0.25s ease;
}
.announcement-card-v2:hover {
  border-color: var(--accent);
}
.announcement-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 4px;
}
.announcement-title-v2 {
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--text-primary);
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}
.announcement-desc {
  font-size: 0.72rem;
  color: var(--text-secondary);
  line-height: 1.4;
  margin-bottom: 6px;
}
.announcement-meta {
  font-size: 0.65rem;
  color: var(--text-tertiary);
}

/* Quick Actions Grid */
.quick-actions-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
  gap: 12px;
}
.quick-action-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 16px 8px;
  border-radius: 12px;
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  transition: all 0.2s ease;
  text-decoration: none !important;
  cursor: pointer;
  color: var(--text-primary) !important;
}
.quick-action-btn:hover {
  transform: translateY(-2px);
  border-color: var(--accent);
  box-shadow: var(--shadow-sm);
  background: var(--bg-subtle) !important;
}
.quick-action-btn i {
  font-size: 1.4rem;
  transition: all 0.2s ease;
}
.quick-action-btn:hover i {
  transform: scale(1.1);
}
.quick-action-btn-blue i { color: #3b82f6; }
.quick-action-btn-green i { color: #10b981; }
.quick-action-btn-indigo i { color: #3b82f6; }
.quick-action-btn-amber i { color: #f59e0b; }
.quick-action-btn-rose i { color: #ef4444; }
.quick-action-btn-cyan i { color: #06b6d4; }

/* Dashboard Tabs styling */
.dash-tabs-nav {
  display: flex;
  gap: 8px;
  border-bottom: 1px solid var(--border-subtle);
  margin-bottom: 16px;
}
.dash-tab-link {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--text-secondary);
  padding: 8px 16px;
  border-bottom: 2px solid transparent;
  cursor: pointer;
  transition: all 0.2s ease;
}
.dash-tab-link:hover {
  color: var(--text-primary);
}
.dash-tab-link.active {
  color: var(--accent);
  border-bottom-color: var(--accent);
}

/* Exam urgency styling */
.exam-badge-card {
  padding: 8px 12px;
  border-radius: 10px;
  background: var(--bg-subtle);
  border-left: 4px solid var(--accent);
  margin-bottom: 8px;
  transition: all 0.2s ease;
  color: var(--text-primary) !important;
}
.exam-badge-card:hover {
  background: var(--bg-canvas);
}
.exam-badge-card.urgent {
  border-left-color: var(--danger);
  background: var(--danger-soft);
}
.exam-badge-card.urgent:hover {
  background: var(--danger-soft);
  filter: brightness(0.95);
}











/* ----------------------------------------------------------------------
   PREMIUM SAAS DASHBOARD v2
   Appended -- affects index.php school admin dashboard only
---------------------------------------------------------------------- */

/* -- Page Wrapper -------------------------------------------- */
.saas-dashboard { animation: saasPageIn 0.4s ease both; }
@keyframes saasPageIn {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* -- Hero Banner --------------------------------------------- */
.saas-hero {
  background: linear-gradient(135deg, var(--accent) 0%, color-mix(in srgb, var(--accent) 55%, var(--bg-canvas)) 100%);
  border-radius: 16px; padding: 18px 22px; margin-bottom: 18px;
  position: relative; overflow: hidden;
}
.saas-hero::before {
  content:''; position:absolute; top:-50px; right:-50px;
  width:180px; height:180px; border-radius:50%;
  background:rgba(255,255,255,.06); pointer-events:none;
}
.saas-hero::after {
  content:''; position:absolute; bottom:-30px; right:80px;
  width:90px; height:90px; border-radius:50%;
  background:rgba(255,255,255,.04); pointer-events:none;
}
.saas-hero-title { color:#fff; font-size:1.1rem; font-weight:800; margin:0 0 2px; }
.saas-hero-sub   { color:rgba(255,255,255,.8); font-size:.72rem; margin:0; }
.saas-hero-badge {
  display:inline-flex; align-items:center; gap:4px;
  background:rgba(255,255,255,.18); backdrop-filter:blur(6px);
  border:1px solid rgba(255,255,255,.25); color:#fff;
  border-radius:20px; font-size:.62rem; font-weight:600; padding:3px 9px;
}
.saas-hero-logo {
  width:46px; height:46px; border-radius:12px; object-fit:cover;
  border:2px solid rgba(255,255,255,.3); flex-shrink:0;
  box-shadow:0 4px 14px rgba(0,0,0,.15); background:#fff;
}
.saas-hero-online {
  width:9px; height:9px; border-radius:50%; background:#22c55e;
  border:2px solid #fff; position:absolute; bottom:-1px; right:-1px;
  box-shadow:0 0 0 2px rgba(34,197,94,.3);
}

/* -- KPI Cards ----------------------------------------------- */
.saas-kpi-card {
  background:var(--bg-surface); border:1px solid var(--border-default);
  border-radius:14px; padding:15px 16px; position:relative; overflow:hidden;
  transition:transform .22s ease, box-shadow .22s ease;
  box-shadow:var(--shadow-sm); height:100%;
}
.saas-kpi-card::before {
  content:''; position:absolute; top:0; left:0; right:0;
  height:3px; border-radius:14px 14px 0 0;
}
.saas-kpi-card:hover { transform:translateY(-3px); box-shadow:var(--shadow-md); }
.saas-kpi-card.kpi-blue::before    { background:linear-gradient(90deg,#3b82f6,#60a5fa); }
.saas-kpi-card.kpi-slate::before   { background:linear-gradient(90deg,#64748b,#94a3b8); }
.saas-kpi-card.kpi-cyan::before    { background:linear-gradient(90deg,#06b6d4,#22d3ee); }
.saas-kpi-card.kpi-emerald::before { background:linear-gradient(90deg,#10b981,#34d399); }

.saas-kpi-icon {
  width:36px; height:36px; border-radius:10px;
  display:flex; align-items:center; justify-content:center;
  font-size:1.05rem; flex-shrink:0;
}
.saas-kpi-icon.ik-blue    { background:rgba(59,130,246,.12);  color:#3b82f6; }
.saas-kpi-icon.ik-slate   { background:rgba(100,116,139,.12); color:#64748b; }
.saas-kpi-icon.ik-cyan    { background:rgba(6,182,212,.12);   color:#06b6d4; }
.saas-kpi-icon.ik-emerald { background:rgba(16,185,129,.12);  color:#10b981; }

.saas-kpi-label {
  font-size:.6rem; font-weight:700; text-transform:uppercase;
  letter-spacing:.07em; color:var(--text-secondary); margin-bottom:4px;
}
.saas-kpi-value {
  font-size:1.6rem; font-weight:800; line-height:1;
  margin:0 0 3px; color:var(--text-primary);
}
.saas-kpi-sub { font-size:.62rem; color:var(--text-secondary); }

.saas-kpi-chip {
  display:inline-flex; align-items:center; gap:3px;
  font-size:.6rem; font-weight:600; padding:2px 7px; border-radius:20px;
}
.chip-green  { background:rgba(16,185,129,.12); color:#10b981; }
.chip-blue   { background:rgba(59,130,246,.12); color:#3b82f6; }
.chip-orange { background:rgba(249,115,22,.12); color:#f97316; }
.chip-red    { background:rgba(239,68,68,.12);  color:#ef4444; }
.chip-slate  { background:rgba(100,116,139,.12);color:#64748b; }

.kpi-progress-bar.fill-blue    { background:linear-gradient(90deg,#3b82f6,#60a5fa) !important; }
.kpi-progress-bar.fill-emerald { background:linear-gradient(90deg,#10b981,#34d399) !important; }
.kpi-progress-bar.fill-cyan    { background:linear-gradient(90deg,#06b6d4,#22d3ee) !important; }
.kpi-progress-bar.fill-slate   { background:linear-gradient(90deg,#64748b,#94a3b8) !important; }

/* -- Section Cards ------------------------------------------- */
.saas-card {
  background:var(--bg-surface); border:1px solid var(--border-default);
  border-radius:14px; box-shadow:var(--shadow-sm); height:100%;
  overflow:hidden; transition:box-shadow .22s ease;
}
.saas-card:hover { box-shadow:var(--shadow-md); }
.saas-card-body { padding:15px 16px; }
.saas-card-hd {
  display:flex; align-items:center; justify-content:space-between;
  padding:13px 16px 0;
}
.saas-section-title {
  font-size:.62rem; font-weight:700; text-transform:uppercase;
  letter-spacing:.07em; color:var(--text-secondary); margin:0;
}
.saas-section-link {
  font-size:.62rem; font-weight:600; color:var(--accent);
  text-decoration:none; display:flex; align-items:center; gap:3px;
  transition:opacity .15s;
}
.saas-section-link:hover { opacity:.75; color:var(--accent); }

/* -- Fee Summary --------------------------------------------- */
.saas-fee-stat {
  display:flex; align-items:center; gap:10px;
  padding:11px 12px; border-radius:10px;
  background:var(--bg-subtle); border:1px solid var(--border-subtle); height:100%;
}
.saas-fee-stat-icon {
  width:34px; height:34px; border-radius:9px;
  display:flex; align-items:center; justify-content:center;
  font-size:.9rem; flex-shrink:0;
}
.saas-fee-stat-value { font-size:1rem; font-weight:800; color:var(--text-primary); line-height:1.2; }
.saas-fee-stat-label { font-size:.6rem; color:var(--text-secondary); }

/* -- Attendance Ring ----------------------------------------- */
.saas-att-block {
  border-radius:11px; padding:13px;
  border:1px solid var(--border-subtle); background:var(--bg-subtle);
  display:flex; align-items:center; gap:12px;
}
.saas-att-ring-wrap { position:relative; width:52px; height:52px; flex-shrink:0; }
.saas-att-svg { width:52px; height:52px; transform:rotate(-90deg); }
.saas-att-track { fill:none; stroke:var(--border-default); stroke-width:5; }
.saas-att-fill  { fill:none; stroke-width:5; stroke-linecap:round; stroke-dasharray:126; }
.saas-att-val {
  position:absolute; inset:0;
  display:flex; align-items:center; justify-content:center;
  font-size:.65rem; font-weight:800; color:var(--text-primary);
}
.saas-att-name  { font-size:.7rem; font-weight:700; color:var(--text-primary); margin-bottom:2px; }
.saas-att-date  { font-size:.58rem; color:var(--text-secondary); }

/* -- Schedule Items ------------------------------------------ */
.saas-sched-item {
  display:flex; align-items:flex-start; gap:10px;
  padding:9px 11px; border-radius:10px;
  background:var(--bg-subtle); border:1px solid var(--border-subtle);
  margin-bottom:7px; transition:background .18s ease;
}
.saas-sched-item:hover { background:var(--bg-canvas); }
.saas-sched-time { font-size:.58rem; font-weight:700; color:var(--accent); white-space:nowrap; min-width:52px; padding-top:1px; }
.saas-sched-subject { font-size:.7rem; font-weight:700; color:var(--text-primary); margin-bottom:2px; }
.saas-sched-meta { font-size:.58rem; color:var(--text-secondary); }
.saas-sched-avatar {
  width:24px; height:24px; border-radius:50%; background:var(--accent);
  color:#fff; font-size:.6rem; font-weight:700;
  display:flex; align-items:center; justify-content:center;
  flex-shrink:0; margin-left:auto;
}

/* -- Exam Items ---------------------------------------------- */
.saas-exam-item {
  display:flex; align-items:center; gap:10px;
  padding:8px 10px; border-radius:10px;
  background:var(--bg-subtle); border:1px solid var(--border-subtle);
  margin-bottom:7px; transition:background .18s ease;
}
.saas-exam-item:hover { background:var(--bg-canvas); }
.saas-exam-date {
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  width:34px; height:34px; border-radius:9px;
  background:linear-gradient(135deg,#3b82f6,#06b6d4); color:#fff; flex-shrink:0;
}
.saas-exam-day   { font-size:.8rem; font-weight:800; line-height:1; }
.saas-exam-month { font-size:.5rem; font-weight:600; text-transform:uppercase; }
.saas-exam-name  { font-size:.68rem; font-weight:700; color:var(--text-primary); }
.saas-exam-meta  { font-size:.58rem; color:var(--text-secondary); }

/* -- Notice Items -------------------------------------------- */
.saas-notice-item {
  padding:9px 11px; border-radius:10px;
  border-left:3px solid var(--accent); background:var(--bg-subtle);
  border-top:1px solid var(--border-subtle);
  border-right:1px solid var(--border-subtle);
  border-bottom:1px solid var(--border-subtle);
  margin-bottom:7px; transition:background .18s ease;
}
.saas-notice-item:hover { background:var(--bg-canvas); }
.saas-notice-title {
  font-size:.68rem; font-weight:700; color:var(--text-primary);
  margin-bottom:3px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.saas-notice-desc {
  font-size:.6rem; color:var(--text-secondary);
  display:-webkit-box; -webkit-line-clamp:2;
  -webkit-box-orient:vertical; overflow:hidden;
}
.saas-notice-date { font-size:.56rem; color:var(--text-secondary); margin-top:4px; }

/* -- Tabs ---------------------------------------------------- */
.saas-tabs-nav {
  display:flex; border-bottom:1px solid var(--border-default);
  margin-bottom:12px; overflow-x:auto;
}
.saas-tab-btn {
  font-size:.66rem; font-weight:600; color:var(--text-secondary);
  padding:8px 13px; border:none; background:none;
  border-bottom:2px solid transparent; cursor:pointer;
  transition:all .18s ease; white-space:nowrap; flex-shrink:0;
}
.saas-tab-btn:hover { color:var(--text-primary); }
.saas-tab-btn.active { color:var(--accent); border-bottom-color:var(--accent); }

/* -- List Rows ----------------------------------------------- */
.saas-list-row {
  display:flex; align-items:center; gap:9px;
  padding:7px 0; border-bottom:1px solid var(--border-subtle);
}
.saas-list-row:last-child { border-bottom:none; }
.saas-list-av {
  width:28px; height:28px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-size:.66rem; font-weight:800; flex-shrink:0; color:#fff;
}
.lav-blue    { background:#3b82f6; }
.lav-emerald { background:#10b981; }
.lav-cyan    { background:#06b6d4; }
.lav-orange  { background:#f97316; }
.lav-slate   { background:#64748b; }
.lav-indigo  { background:#6366f1; }
.saas-list-name { font-size:.7rem; font-weight:700; color:var(--text-primary); }
.saas-list-sub  { font-size:.58rem; color:var(--text-secondary); }
.saas-list-end  { margin-left:auto; text-align:right; flex-shrink:0; }
.saas-act-dot   { width:8px; height:8px; border-radius:50%; margin-top:3px; flex-shrink:0; }
.act-dot-fee    { background:#10b981; }
.act-dot-lead   { background:#3b82f6; }

/* -- Todo Rows ----------------------------------------------- */
.saas-todo-row {
  display:flex; align-items:center; gap:7px;
  padding:7px 0; border-bottom:1px solid var(--border-subtle);
}
.saas-todo-row:last-child { border-bottom:none; }
.saas-todo-chk {
  width:20px; height:20px; border-radius:50%;
  border:2px solid var(--border-default); background:none;
  display:flex; align-items:center; justify-content:center;
  cursor:pointer; font-size:.6rem; color:transparent;
  transition:all .18s ease; flex-shrink:0;
}
.saas-todo-chk.completed { background:#10b981; border-color:#10b981; color:#fff; }
.saas-todo-ttl {
  font-size:.68rem; font-weight:600; color:var(--text-primary);
  flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.saas-todo-ttl.completed { text-decoration:line-through; color:var(--text-secondary); }
.saas-todo-due { font-size:.58rem; color:var(--text-secondary); }
.saas-todo-del-btn {
  width:22px; height:22px; border:none; background:none;
  color:var(--text-secondary); cursor:pointer; border-radius:6px;
  display:flex; align-items:center; justify-content:center;
  font-size:.7rem; transition:all .18s ease; flex-shrink:0;
}
.saas-todo-del-btn:hover { background:var(--danger-soft); color:var(--danger); }

/* -- Lead Source Rows --------------------------------------- */
.saas-lead-row {
  display:flex; align-items:center; gap:8px;
  padding:7px 9px; border-radius:9px;
  background:var(--bg-subtle); border:1px solid var(--border-subtle);
  margin-bottom:6px;
}
.saas-lead-ico {
  width:26px; height:26px; border-radius:8px;
  display:flex; align-items:center; justify-content:center;
  font-size:.75rem; flex-shrink:0;
}
.saas-lead-name  { font-size:.68rem; font-weight:600; color:var(--text-primary); }
.saas-lead-cnt   { font-size:.58rem; color:var(--text-secondary); }
.saas-lead-pct   { margin-left:auto; font-size:.68rem; font-weight:700; color:var(--accent); }

/* -- Quick Actions Grid ------------------------------------- */
.saas-quick-grid {
  display:grid; gap:10px; grid-template-columns:repeat(6,1fr);
}
@media (max-width:1200px) { .saas-quick-grid { grid-template-columns:repeat(3,1fr); } }
@media (max-width:576px)  { .saas-quick-grid { grid-template-columns:repeat(2,1fr); } }
.saas-quick-btn {
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:5px; padding:13px 8px; border-radius:12px; text-decoration:none;
  border:1px solid var(--border-default); background:var(--bg-subtle);
  transition:all .22s ease; font-size:.62rem; font-weight:700;
  color:var(--text-secondary); text-align:center;
}
.saas-quick-btn:hover { transform:translateY(-3px); box-shadow:var(--shadow-md); color:var(--text-primary); background:var(--bg-surface); }
.saas-quick-btn i { font-size:1.3rem; }
.saas-quick-btn.qb-blue    { border-top:3px solid #3b82f6; } .saas-quick-btn.qb-blue i    { color:#3b82f6; }
.saas-quick-btn.qb-emerald { border-top:3px solid #10b981; } .saas-quick-btn.qb-emerald i { color:#10b981; }
.saas-quick-btn.qb-indigo  { border-top:3px solid #6366f1; } .saas-quick-btn.qb-indigo i  { color:#6366f1; }
.saas-quick-btn.qb-amber   { border-top:3px solid #f59e0b; } .saas-quick-btn.qb-amber i   { color:#f59e0b; }
.saas-quick-btn.qb-red     { border-top:3px solid #ef4444; } .saas-quick-btn.qb-red i     { color:#ef4444; }
.saas-quick-btn.qb-cyan    { border-top:3px solid #06b6d4; } .saas-quick-btn.qb-cyan i    { color:#06b6d4; }

/* -- Class Pills -------------------------------------------- */
.saas-class-pill {
  display:inline-flex; align-items:center; gap:4px;
  padding:3px 8px; border-radius:20px;
  background:var(--bg-subtle); border:1px solid var(--border-default);
  font-size:.6rem; font-weight:600; color:var(--text-secondary);
  transition:background .15s ease;
}
.saas-class-pill:hover { background:var(--bg-canvas); }
.saas-class-pill-num {
  background:var(--accent); color:#fff;
  border-radius:20px; font-size:.55rem; padding:0 5px; font-weight:700;
}

/* -- Circle Util Button ------------------------------------ */
.saas-circle-btn {
  width:26px; height:26px; border-radius:50%;
  border:1px solid var(--border-default); background:var(--bg-subtle);
  display:flex; align-items:center; justify-content:center;
  font-size:.72rem; color:var(--text-secondary); cursor:pointer;
  text-decoration:none; transition:all .18s ease; flex-shrink:0;
}
.saas-circle-btn:hover { background:var(--accent); border-color:var(--accent); color:#fff; }

/* -- Empty State ------------------------------------------- */
.saas-empty {
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  padding:22px 16px; color:var(--text-secondary); text-align:center; gap:6px;
}
.saas-empty i { font-size:1.75rem; opacity:.35; }
.saas-empty span { font-size:.68rem; }

/* -- Responsive -------------------------------------------- */
@media (max-width:768px) {
  .saas-hero { padding:14px 16px; }
  .saas-kpi-card { padding:12px 14px; }
  .saas-card-body { padding:12px 14px; }
  .saas-kpi-value { font-size:1.4rem; }
}
.min-width-0 { min-width:0; }
/* ==================================================================
   DASHBOARD STYLES (consolidated into main.css)
   Previously a separate dashboard stylesheet that was loaded AFTER
   main.css. It is merged here at the very end of main.css to preserve
   the original cascade order, so these rules keep overriding
   equivalent main.css rules exactly as before. Should you later edit
   these, treat the later rules in this block as higher-precedence
   where equal.
   ================================================================== */


/* ================================================================
   Dashboard: Layout Container
   ================================================================ */
.dashboard-glass-container {
  padding: 0 4px 24px;
}

/* ================================================================
   Dashboard: Sub-header (greeting bar)
   ================================================================ */
.dashboard-sub-header {
  padding: 12px 0 14px;
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
  gap: 12px;
}

.welcome-msg-block h4 {
  font-size: var(--text-lg);
  color: var(--text-primary);
  font-weight: 700;
  line-height: 1.3;
}

.welcome-msg-block p {
  font-size: var(--text-xs);
  color: var(--text-muted);
}

.dashboard-avatar-img {
  width: 44px !important;
  height: 44px !important;
  object-fit: cover;
  border-radius: 50%;
  border: 2px solid #d1d5db;
  box-shadow: var(--shadow-sm);
  flex-shrink: 0;
}

/* ================================================================
   Dashboard: Stat Metric Cards Row (CRM-style)
   ================================================================ */
.metrics-row-crm {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 1rem;
  margin-bottom: 1rem;
}

.card-metric-crm {
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--card-radius-md);
  padding: 18px;
  display: flex;
  justify-content: space-between;
  align-items: stretch;
  gap: 12px;
  transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
  box-shadow: var(--shadow-sm);
  position: relative;
  overflow: hidden;
}

.card-metric-crm:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
  border-color: var(--border-default);
}

/* Modern Soft Glass Fills & Colored Borders */
.card-metric-crm.card-metric-green {
  background: var(--fill-green-soft) !important;
  border: 1px solid var(--fill-green) !important;
}
.card-metric-crm.card-metric-coral {
  background: var(--fill-coral-soft) !important;
  border: 1px solid var(--fill-coral) !important;
}
.card-metric-crm.card-metric-blue {
  background: var(--fill-blue-soft) !important;
  border: 1px solid var(--fill-blue) !important;
}
.card-metric-crm.card-metric-orange {
  background: var(--fill-orange-soft) !important;
  border: 1px solid var(--fill-orange) !important;
}

/* Specific Card Hovers with Colored Shadow Glows */
.card-metric-crm.card-metric-students:hover,
.card-metric-crm.card-metric-green:hover {
  border-color: var(--fill-green) !important;
  box-shadow: 0 8px 24px rgba(75, 195, 126, 0.2) !important;
}
.card-metric-crm.card-metric-coral:hover {
  border-color: var(--fill-coral) !important;
  box-shadow: 0 8px 24px rgba(255, 107, 107, 0.2) !important;
}
.card-metric-crm.card-metric-teachers:hover,
.card-metric-crm.card-metric-blue:hover {
  border-color: var(--fill-blue) !important;
  box-shadow: 0 8px 24px rgba(107, 144, 255, 0.2) !important;
}
.card-metric-crm.card-metric-orange:hover {
  border-color: var(--fill-orange) !important;
  box-shadow: 0 8px 24px rgba(255, 156, 92, 0.2) !important;
}

/* High Contrast Readable Text and Icons inside Metric Cards */
.card-metric-green .metric-crm-title,
.card-metric-coral .metric-crm-title,
.card-metric-blue .metric-crm-title,
.card-metric-orange .metric-crm-title {
  color: var(--text-secondary) !important;
}
.card-metric-green .metric-crm-value,
.card-metric-coral .metric-crm-value,
.card-metric-blue .metric-crm-value,
.card-metric-orange .metric-crm-value {
  color: var(--text-primary) !important;
}

.metric-crm-left {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  flex: 1;
  min-width: 0;
  gap: 6px;
}

.metric-crm-title {
  font-size: var(--text-xxs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--text-secondary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.metric-crm-value {
  font-size: 26px;
  font-weight: 700;
  color: var(--text-primary);
  line-height: 1.1;
  font-family: var(--font-heading);
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}

.metric-crm-bottom {
  display: flex;
  align-items: center;
  margin-top: 4px;
}

/* Trend Delta Chip Styling */
.trend-delta-chip {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: var(--text-xxs);
  font-weight: 600;
  padding: 2px 8px;
  border-radius: var(--pill-radius);
  white-space: nowrap;
}

/* Trend variations in neutral cards */
.trend-delta-chip.success {
  background: var(--fill-green-soft);
  color: var(--fill-green);
}
.trend-delta-chip.danger {
  background: var(--fill-coral-soft);
  color: var(--fill-coral);
}
.trend-delta-chip.info {
  background: var(--fill-blue-soft);
  color: var(--fill-blue);
}

/* Trend inside soft-colored cards */
.card-metric-green .trend-delta-chip {
  background: var(--fill-green-soft) !important;
  color: var(--fill-green) !important;
}
.card-metric-coral .trend-delta-chip {
  background: var(--fill-coral-soft) !important;
  color: var(--fill-coral) !important;
}
.card-metric-blue .trend-delta-chip {
  background: var(--fill-blue-soft) !important;
  color: var(--fill-blue) !important;
}
.card-metric-orange .trend-delta-chip {
  background: var(--fill-orange-soft) !important;
  color: var(--fill-orange) !important;
}

/* Right hand side elements */
.metric-crm-right-group {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: flex-end;
  width: 60px;
  flex-shrink: 0;
}

.metric-crm-icon-chip {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  background: var(--bg-subtle);
  color: var(--text-secondary);
}

/* Icon chips for specific color classes */
.card-metric-students .metric-crm-icon-chip,
.card-metric-green .metric-crm-icon-chip {
  background: var(--fill-green-soft) !important;
  color: var(--fill-green) !important;
}
.card-metric-coral .metric-crm-icon-chip {
  background: var(--fill-coral-soft) !important;
  color: var(--fill-coral) !important;
}
.card-metric-teachers .metric-crm-icon-chip,
.card-metric-blue .metric-crm-icon-chip {
  background: var(--fill-blue-soft) !important;
  color: var(--fill-blue) !important;
}
.card-metric-orange .metric-crm-icon-chip {
  background: var(--fill-orange-soft) !important;
  color: var(--fill-orange) !important;
}

.metric-crm-sparkline {
  width: 60px;
  height: 20px;
  display: flex;
  align-items: flex-end;
}

.sparkline-svg {
  width: 60px;
  height: 20px;
  color: var(--accent);
  opacity: 0.85;
  overflow: visible;
}

/* Sparkline colors for specific color classes */
.card-metric-students .sparkline-svg,
.card-metric-green .sparkline-svg {
  color: var(--fill-green) !important;
  opacity: 0.9 !important;
}
.card-metric-coral .sparkline-svg {
  color: var(--fill-coral) !important;
  opacity: 0.9 !important;
}
.card-metric-teachers .sparkline-svg,
.card-metric-blue .sparkline-svg {
  color: var(--fill-blue) !important;
  opacity: 0.9 !important;
}
.card-metric-orange .sparkline-svg {
  color: var(--fill-orange) !important;
  opacity: 0.9 !important;
}

.sparkline-path {
  stroke-dasharray: 120;
  stroke-dashoffset: 0;
}

/* ================================================================
   Dashboard: Glass Panels (shared card surface)
   ================================================================ */
.glass-panel {
  background: var(--glass-surface);
  backdrop-filter: blur(16px) saturate(160%);
  -webkit-backdrop-filter: blur(16px) saturate(160%);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-xl);
  padding: 18px 20px;
  box-shadow: var(--glass-shadow);
  position: relative;
  overflow: hidden;
}

body.dark-theme .glass-panel {
  background: var(--glass-surface);
  border-color: var(--glass-border);
}

/* ================================================================
   Dashboard: Profile / Highlight Card
   ================================================================ */
.dash-profile-card {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-xl);
  background: var(--bg-card);
  border: 1px solid #d1d5db;
  box-shadow: var(--shadow-sm);
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  height: 100%;
}

.dash-profile-card::after {
  content: "";
  position: absolute;
  top: -40px;
  right: -40px;
  width: 140px;
  height: 140px;
  border-radius: 50%;
  background: radial-gradient(circle, var(--accent-light) 0%, transparent 70%);
  pointer-events: none;
}

body.dark-theme .dash-profile-card {
  background: var(--bg-card);
  border-color: var(--border);
}

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

.dash-profile-photo {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid var(--border-subtle);
  flex-shrink: 0;
  box-shadow: var(--shadow-sm);
}

.dash-profile-name {
  font-size: var(--text-md);
  font-weight: 700;
  color: var(--text-primary);
  line-height: 1.2;
}

.dash-profile-role {
  font-size: var(--text-xs);
  color: var(--text-muted);
  margin-top: 2px;
}

.dash-profile-actions {
  display: flex;
  gap: 6px;
  margin-top: 2px;
}

.dash-profile-action-btn {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 1px solid var(--border-subtle);
  background: var(--bg-surface);
  color: var(--text-secondary);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  cursor: pointer;
  transition: var(--transition);
}

.dash-profile-action-btn:hover {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
}

.dash-profile-stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.dash-profile-stat-item {
  background: var(--bg-base);
  border: 1px solid #d1d5db;
  border-radius: var(--radius-sm);
  padding: 8px 10px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

body.dark-theme .dash-profile-stat-item {
  background: var(--bg-sec);
}

.dash-profile-stat-label {
  font-size: var(--text-xxs);
  color: var(--text-muted);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.4px;
}

.dash-profile-stat-value {
  font-size: var(--text-md);
  font-weight: 700;
  color: var(--text-primary);
}

/* ================================================================
   Dashboard: Donut / Circular Progress Widgets
   ================================================================ */
.dash-donut-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 10px;
  margin-bottom: 16px;
}

.dash-donut-card {
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--card-radius-md);
  padding: 16px 12px 12px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  box-shadow: var(--shadow-sm);
  transition: box-shadow 0.15s ease, transform 0.15s ease;
}

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

.dash-donut-card.donut-green-soft {
  background: var(--fill-green-soft);
  border-color: rgba(63, 174, 106, 0.18);
}
.dash-donut-card.donut-orange-soft {
  background: var(--fill-orange-soft);
  border-color: rgba(242, 145, 74, 0.18);
}
.dash-donut-card.donut-blue-soft {
  background: var(--fill-blue-soft);
  border-color: rgba(79, 124, 240, 0.18);
}

/* Custom tracks based on parent theme */
.donut-green-soft .donut-track {
  stroke: rgba(63, 174, 106, 0.18);
}
.donut-orange-soft .donut-track {
  stroke: rgba(242, 145, 74, 0.18);
}
.donut-blue-soft .donut-track {
  stroke: rgba(79, 124, 240, 0.18);
}

.donut-green-soft .donut-pct {
  color: var(--fill-green);
}
.donut-orange-soft .donut-pct {
  color: var(--fill-orange);
}
.donut-blue-soft .donut-pct {
  color: var(--fill-blue);
}

body.dark-theme .dash-donut-card {
  background: var(--bg-card);
  border-color: var(--border);
}

.donut-svg-wrap {
  position: relative;
  width: 72px;
  height: 72px;
  flex-shrink: 0;
}

.donut-svg {
  width: 72px;
  height: 72px;
  transform: rotate(-90deg);
}

.donut-track {
  fill: none;
  stroke: var(--border);
  stroke-width: 7;
}

.donut-fill {
  fill: none;
  stroke-width: 7;
  stroke-linecap: round;
  transition: stroke-dashoffset 1s cubic-bezier(0.4, 0, 0.2, 1);
}

.donut-fill-accent {
  stroke: var(--accent);
}
.donut-fill-teal {
  stroke: var(--accent-teal);
}
.donut-fill-pink {
  stroke: var(--accent-pink);
}
.donut-fill-warning {
  stroke: var(--color-warning);
}
.donut-fill-success {
  stroke: var(--color-success);
}

.donut-center-text {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  line-height: 1;
}

.donut-pct {
  font-size: 14px;
  font-weight: 700;
  color: var(--text-primary);
  font-family: var(--font-heading);
}

.donut-label-below {
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--text-secondary);
  text-align: center;
  line-height: 1.3;
}

.donut-sub-label {
  font-size: var(--text-xxs);
  color: var(--text-muted);
  text-align: center;
}

/* ================================================================
   Dashboard: Activity Heatmap Grid
   ================================================================ */
.dash-heatmap-card {
  background: var(--bg-card);
  border: 1px solid #d1d5db;
  border-radius: var(--radius-lg);
  padding: 16px;
  box-shadow: var(--shadow-xs);
}

body.dark-theme .dash-heatmap-card {
  background: var(--bg-card);
  border-color: var(--border);
}

.dash-heatmap-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 12px;
}

.dash-heatmap-title {
  font-size: var(--text-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--text-secondary);
  font-family: var(--font-heading);
}

.dash-heatmap-subtitle {
  font-size: var(--text-xxs);
  color: var(--text-muted);
  margin-top: 2px;
}

.dash-heatmap-legend {
  display: flex;
  align-items: center;
  gap: 4px;
}

.heatmap-legend-label {
  font-size: var(--text-xxs);
  color: var(--text-muted);
}

.heatmap-legend-dot {
  width: 8px;
  height: 8px;
  border-radius: 2px;
}

.heatmap-legend-dot.l0 {
  background: var(--border);
}
.heatmap-legend-dot.l1 {
  background: var(--accent-light);
  border: 1px solid var(--accent);
  opacity: 0.4;
}
.heatmap-legend-dot.l2 {
  background: var(--accent);
  opacity: 0.5;
}
.heatmap-legend-dot.l3 {
  background: var(--accent);
  opacity: 0.8;
}
.heatmap-legend-dot.l4 {
  background: var(--accent);
}

.heatmap-day-labels {
  display: flex;
  gap: 3px;
  padding-left: 28px;
  margin-bottom: 4px;
}

.heatmap-day-label {
  font-size: 9px;
  font-weight: 600;
  color: var(--text-muted);
  width: 14px;
  text-align: center;
  text-transform: uppercase;
}

.heatmap-grid-wrapper {
  display: flex;
  gap: 3px;
}

.heatmap-row-labels {
  display: flex;
  flex-direction: column;
  gap: 3px;
  width: 24px;
  flex-shrink: 0;
}

.heatmap-row-label {
  height: 14px;
  font-size: 9px;
  color: var(--text-muted);
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding-right: 4px;
}

.heatmap-grid {
  display: flex;
  gap: 3px;
  flex: 1;
  flex-wrap: wrap;
}

.heatmap-col {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.heatmap-cell {
  width: 14px;
  height: 14px;
  border-radius: 3px;
  background: var(--border);
  transition:
    opacity 0.15s,
    transform 0.15s;
  cursor: default;
}

.heatmap-cell:hover {
  transform: scale(1.25);
  z-index: 2;
  position: relative;
}

/* Intensity levels mapped to CSS variables */
.heatmap-cell.l0 {
  background: var(--border);
}
.heatmap-cell.l1 {
  background: var(--accent);
  opacity: 0.25;
}
.heatmap-cell.l2 {
  background: var(--accent);
  opacity: 0.5;
}
.heatmap-cell.l3 {
  background: var(--accent);
  opacity: 0.75;
}
.heatmap-cell.l4 {
  background: var(--accent);
  opacity: 1;
}

/* ================================================================
   Dashboard: Weekly Timeline / Schedule View
   ================================================================ */
.dash-timeline-card {
  background: var(--glass-surface);
  backdrop-filter: blur(16px) saturate(160%);
  -webkit-backdrop-filter: blur(16px) saturate(160%);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-xl);
  padding: 18px 20px;
  box-shadow: var(--glass-shadow);
  position: relative;
  overflow: hidden;
}

body.dark-theme .dash-timeline-card {
  background: var(--glass-surface);
  border-color: var(--glass-border);
}

.timeline-header h6 {
  font-size: var(--text-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--text-primary);
  font-family: var(--font-heading);
}

/* Day header row */
.timeline-week-row {
  display: flex;
  gap: 6px;
  margin-bottom: 14px;
}

.timeline-day-pill {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 8px 12px;
  border-radius: var(--radius-md) !important;
  cursor: pointer;
  transition: var(--transition);
  flex: 1;
  background: var(--bg-subtle);
  border: 1px solid var(--border-subtle);
}

.timeline-day-pill.active {
  background: var(--accent) !important;
  border-color: var(--accent) !important;
  box-shadow: 0 4px 12px var(--accent-soft) !important;
  border-radius: var(--radius-md) !important;
}

.timeline-day-pill:hover:not(.active) {
  background: var(--bg-surface) !important;
  border-color: var(--border-default) !important;
  transform: translateY(-1px);
}

.timeline-day-name {
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  color: var(--text-secondary);
  letter-spacing: 0.6px;
}

.timeline-day-pill.active .timeline-day-name {
  color: rgba(255, 255, 255, 0.9) !important;
}

.timeline-day-num {
  font-size: var(--text-md);
  font-weight: 700;
  color: var(--text-primary);
  line-height: 1;
}

.timeline-day-pill.active .timeline-day-num {
  color: #ffffff !important;
}

/* Hour/event grid */
.timeline-grid {
  position: relative;
  overflow-x: auto;
  display: flex;
  gap: 0;
  padding-bottom: 6px;
}

.timeline-hour-col {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 64px;
  position: relative;
}

.timeline-hour-label {
  font-size: 10px;
  color: var(--text-secondary);
  font-weight: 600;
  margin-bottom: 8px;
  white-space: nowrap;
}

.timeline-dotted-line {
  width: 1px;
  height: 130px;
  background: repeating-linear-gradient(
    to bottom,
    var(--border-subtle) 0,
    var(--border-subtle) 4px,
    transparent 4px,
    transparent 8px
  );
  position: relative;
}

/* Event pill blocks overlaid on grid */
.timeline-event-block {
  position: absolute;
  top: 28px;
  height: 54px;
  border-radius: var(--radius-md) !important;
  padding: 8px 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  z-index: 2;
  min-width: 120px;
  overflow: hidden;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.timeline-event-block:hover {
  transform: translateY(-2px) scale(1.02);
  box-shadow: var(--shadow-md) !important;
}

.event-meetings {
  background: var(--fill-blue-soft) !important;
  border: 1px solid rgba(107, 144, 255, 0.2) !important;
  border-left: 4px solid var(--fill-blue) !important;
  left: 4px;
  width: 175px;
}

.event-reviews {
  background: var(--fill-coral-soft) !important;
  border: 1px solid rgba(255, 107, 107, 0.2) !important;
  border-left: 4px solid var(--fill-coral) !important;
  left: 192px;
  width: 180px;
  top: 88px;
}

.event-reminders {
  background: var(--fill-yellow-soft) !important;
  border: 1px solid rgba(245, 210, 71, 0.2) !important;
  border-left: 4px solid var(--fill-yellow) !important;
  left: 320px;
  width: 130px;
  top: 28px;
}

.event-info {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.event-title {
  font-size: var(--text-xs);
  font-weight: 700;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.event-subtitle {
  font-size: var(--text-xxs);
  color: var(--text-secondary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.event-avatars {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}

.avatar-stack {
  display: flex;
  align-items: center;
}

.avatar-stack .event-avatar-img {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  object-fit: cover;
  border: 1.5px solid var(--bg-surface);
  margin-right: -6px;
  flex-shrink: 0;
  transition: transform 0.15s ease;
}

.avatar-stack .event-avatar-img:hover {
  transform: translateY(-1px) scale(1.15);
  z-index: 5;
}

.avatar-stack .event-avatar-more {
  font-size: 9px;
  font-weight: 600;
  color: var(--text-secondary);
  background: var(--bg-subtle);
  border-radius: 50%;
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1.5px solid var(--bg-surface);
  flex-shrink: 0;
  margin-left: 2px;
}

/* Current time indicator with neon glow */
.timeline-current-indicator {
  position: absolute;
  top: 28px;
  bottom: 0;
  width: 2px;
  background: var(--accent);
  box-shadow: 0 0 8px var(--accent);
  z-index: 3;
  left: 270px;
}

.timeline-indicator-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 10px var(--accent), 0 0 4px #ffffff;
  position: absolute;
  top: -5px;
  left: -4px;
}

/* ================================================================
   Dashboard: Virtual Assistant Card
   ================================================================ */
.assistant-tabs {
  display: flex;
  gap: 6px;
  margin-bottom: 10px;
}

.assistant-tab-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  font-size: var(--text-xs);
  font-weight: 500;
  color: var(--text-muted);
  background: var(--bg-base);
  border: 1px solid #d1d5db;
  border-radius: var(--radius-btn);
  cursor: pointer;
  transition: var(--transition);
}

.assistant-tab-btn.active {
  background: var(--bg-card);
  color: var(--text-primary);
  border-color: var(--border);
  box-shadow: var(--shadow-sm);
}

.assistant-tab-btn:hover:not(.active) {
  background: var(--bg-card);
  color: var(--text-secondary);
}

body.dark-theme .assistant-tab-btn {
  background: var(--bg-base);
  border-color: var(--border);
}

body.dark-theme .assistant-tab-btn.active {
  background: var(--bg-card);
}

/* Chat avatar */
.chat-avatar-wrapper {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: 2px solid #d1d5db;
  overflow: hidden;
  position: absolute;
  top: 18px;
  right: 20px;
  box-shadow: var(--shadow-sm);
}

.chat-body {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-height: 180px;
  overflow-y: auto;
  padding-right: 4px;
  padding-top: 8px;
  scroll-behavior: smooth;
}

.chat-bubble {
  background: var(--bg-base);
  border: 1px solid #d1d5db;
  border-radius: var(--radius-sm) var(--radius-lg) var(--radius-lg)
    var(--radius-sm);
  padding: 8px 12px;
  font-size: var(--text-xs);
  color: var(--text-primary);
  max-width: 85%;
  line-height: 1.5;
  position: relative;
  animation: bubbleFadeIn 0.2s ease-out;
}

body.dark-theme .chat-bubble {
  background: var(--bg-sec);
  border-color: var(--border);
}

.chat-bubble-user {
  align-self: flex-end;
  background: var(--accent);
  color: #fff;
  border-color: var(--accent-dark);
  border-radius: var(--radius-lg) var(--radius-sm) var(--radius-sm)
    var(--radius-lg);
}

.chat-bubble .time {
  display: block;
  font-size: 9px;
  color: var(--text-muted);
  margin-top: 4px;
  text-align: right;
}

.chat-bubble-user .time {
  color: rgba(255, 255, 255, 0.6);
}

/* Typing indicator */
.chat-bubble-typing {
  background: var(--bg-base);
  border: 1px solid #d1d5db;
  border-radius: var(--radius-sm) var(--radius-lg) var(--radius-lg)
    var(--radius-sm);
  padding: 10px 14px;
  max-width: 80px;
}

.chat-typing-dots {
  display: flex;
  gap: 4px;
  align-items: center;
}

.chat-typing-dots span {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--text-muted);
  animation: typingBounce 1.2s infinite;
}

.chat-typing-dots span:nth-child(2) {
  animation-delay: 0.2s;
}
.chat-typing-dots span:nth-child(3) {
  animation-delay: 0.4s;
}

@keyframes typingBounce {
  0%,
  60%,
  100% {
    transform: translateY(0);
  }
  30% {
    transform: translateY(-4px);
  }
}

@keyframes bubbleFadeIn {
  from {
    opacity: 0;
    transform: translateY(4px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.chat-input-wrapper {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 12px;
  background: var(--bg-base);
  border: 1px solid #d1d5db;
  border-radius: var(--radius-btn);
  padding: 6px 10px;
  transition: border-color 0.15s;
}

.chat-input-wrapper:focus-within {
  border-color: var(--accent);
  box-shadow: 0 0 0 2px var(--accent-light);
}

body.dark-theme .chat-input-wrapper {
  background: var(--bg-base);
  border-color: var(--border);
}

#chatInput {
  flex: 1;
  border: none;
  background: transparent;
  outline: none;
  font-size: var(--text-xs);
  color: var(--text-primary);
  font-family: var(--font-primary);
}

#chatInput::placeholder {
  color: var(--text-muted);
}

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

#chatSendBtn {
  color: var(--accent);
  font-size: 16px;
  cursor: pointer;
  transition: var(--transition);
}

#chatSendBtn:hover {
  color: var(--accent-dark);
  transform: scale(1.1);
}

/* ================================================================
   Dashboard: To-Do List
   ================================================================ */
.todo-card-panel {
  display: flex;
  flex-direction: column;
}

.todo-add-form {
  margin-bottom: 10px;
  animation: expandDown 0.2s ease-out;
}

.todo-add-form-hidden {
  display: none;
}

@keyframes expandDown {
  from {
    opacity: 0;
    transform: translateY(-8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.todo-list-wrapper {
  flex: 1;
  overflow-y: auto;
  max-height: 280px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding-right: 2px;
}

.todo-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 8px 10px;
  border-radius: var(--radius-sm);
  background: var(--bg-base);
  border: 1px solid #d1d5db;
  transition: var(--transition);
}

body.dark-theme .todo-item {
  background: var(--bg-sec);
  border-color: var(--border);
}

.todo-item:hover {
  border-color: var(--accent-light);
  background: var(--bg-card);
}

.todo-left {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  flex: 1;
}

.todo-check-btn {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 1.5px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
  transition: var(--transition);
  color: transparent;
}

.todo-check-btn i {
  font-size: 11px;
}

.todo-check-btn.completed {
  background: var(--color-success);
  border-color: var(--color-success);
  color: #fff;
}

.todo-check-btn:hover:not(.completed) {
  border-color: var(--color-success);
  color: var(--color-success);
}

.todo-text-block {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.todo-title-txt {
  font-size: var(--text-xs);
  font-weight: 500;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: var(--transition);
}

.todo-title-txt.completed {
  text-decoration: line-through;
  color: var(--text-muted);
}

.todo-meta-txt {
  font-size: var(--text-xxs);
  color: var(--text-muted);
}

.todo-right {
  flex-shrink: 0;
}

.todo-delete-btn {
  background: none;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  font-size: 13px;
  padding: 2px;
  border-radius: var(--radius-xs);
  transition: var(--transition);
  display: flex;
  align-items: center;
}

.todo-delete-btn:hover {
  color: var(--color-danger);
  background: var(--color-danger-light);
}

/* ================================================================
   Dashboard: Recent Activity Table
   ================================================================ */
#activityPanel .table-responsive {
  border-radius: var(--radius-sm);
  overflow: hidden;
}

.avatar-sm-circle {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--accent-light);
  color: var(--accent);
  font-size: 11px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.class-breakdown-section {
}

.class-breakdown-title {
  letter-spacing: 0.5px;
  font-family: var(--font-heading);
}

.class-breakdown-pill {
  font-size: var(--text-xxs) !important;
  border-radius: var(--radius-sm) !important;
  background: var(--bg-base) !important;
  border-color: var(--border) !important;
  transition: var(--transition);
}

body.dark-theme .class-breakdown-pill {
  background: var(--bg-sec) !important;
}

.class-breakdown-pill:hover {
  border-color: var(--accent) !important;
  background: var(--accent-light) !important;
}

.cbp-roman {
  color: var(--accent) !important;
}
.cbp-count {
  color: var(--text-muted) !important;
}

/* ================================================================
   Dashboard: Lead Sources — Compact Usage/Tool List
   ================================================================ */
.dash-source-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 4px;
}

.dash-source-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  border-radius: var(--radius-md) !important;
  background: var(--bg-subtle) !important;
  border: 1px solid var(--border-subtle) !important;
  transition: var(--transition);
}

body.dark-theme .dash-source-row {
  background: var(--bg-subtle) !important;
}

.dash-source-row:hover {
  background: var(--bg-surface) !important;
  border-color: var(--accent) !important;
  box-shadow: var(--shadow-sm) !important;
}

.dash-source-icon {
  width: 28px;
  height: 28px;
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  flex-shrink: 0;
}

.source-icon-sky {
  background: var(--accent-light);
  color: var(--accent);
}
.source-icon-teal {
  background: var(--accent-teal-light);
  color: var(--accent-teal);
}
.source-icon-pink {
  background: var(--accent-pink-light);
  color: var(--accent-pink);
}
.source-icon-amber {
  background: var(--color-warning-light);
  color: var(--color-warning);
}
.source-icon-green {
  background: var(--color-success-light);
  color: var(--color-success);
}

.dash-source-info {
  flex: 1;
  min-width: 0;
}

.dash-source-name {
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.dash-source-sub {
  font-size: var(--text-xxs);
  color: var(--text-muted);
}

/* Circular % badge on the right */
.dash-source-pct-ring {
  position: relative;
  width: 34px;
  height: 34px;
  flex-shrink: 0;
}

.dash-source-pct-ring svg {
  width: 34px;
  height: 34px;
  transform: rotate(-90deg);
}

.dash-source-ring-track {
  fill: none;
  stroke: var(--border);
  stroke-width: 3;
}

.dash-source-ring-fill {
  fill: none;
  stroke: var(--accent);
  stroke-width: 3;
  stroke-linecap: round;
  transition: stroke-dashoffset 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

.dash-source-pct-text {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 8px;
  font-weight: 700;
  color: var(--text-primary);
}

/* ================================================================
   Dashboard: Summary Chart Card
   ================================================================ */
.summary-chart-container {
  height: 220px;
  position: relative;
}

/* ================================================================
   Dashboard: Utility Buttons
   ================================================================ */
.circle-btn-util {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--bg-base);
  border: 1px solid #d1d5db;
  color: var(--text-muted);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  cursor: pointer;
  transition: var(--transition);
  flex-shrink: 0;
  text-decoration: none;
}

.circle-btn-util:hover {
  background: var(--accent-light);
  border-color: var(--accent);
  color: var(--accent);
}

body.dark-theme .circle-btn-util {
  background: var(--bg-sec);
  border-color: var(--border);
  color: var(--text-muted);
}

/* ================================================================
   Dashboard: Activity Icon Wrappers (super-admin cards)
   ================================================================ */
.activity-icon-wrapper {
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  flex-shrink: 0;
}

.activity-icon-blue {
  background: var(--accent-light);
  color: var(--accent);
}
.activity-icon-indigo {
  background: var(--accent-light);
  color: var(--accent);
}
.activity-icon-amber {
  background: var(--color-warning-light);
  color: var(--color-warning);
}

/* ================================================================
   Dashboard: Card-Premium (super-admin simple cards)
   ================================================================ */
.card-premium {
  background: var(--bg-card);
  border: 1px solid #d1d5db;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xs);
  transition: box-shadow 0.15s ease;
  overflow: hidden;
}

.card-premium:hover {
  box-shadow: var(--shadow-md);
}

body.dark-theme .card-premium {
  background: var(--bg-card);
  border-color: var(--border);
}

.card-premium .card-body {
  padding: 16px;
}

.card-premium .card-header {
  padding: 12px 16px;
  border-bottom: 1px solid var(--border);
  background: transparent;
}

.card-premium .card-header h6 {
  font-size: var(--text-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--text-secondary);
  margin: 0;
}

/* ================================================================
   Dashboard: Heatmap Section Layout
   ================================================================ */
.dash-bottom-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-top: 12px;
  margin-bottom: 12px;
}

.dash-bottom-row-3col {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 12px;
  margin-top: 12px;
  margin-bottom: 12px;
}

/* ================================================================
   Specificity guard — reclaims shared class names from legacy
   !important overrides left in main.css by earlier refactor passes
   (the old flat "Pulse CRM" theme). Scoping under
   .dashboard-glass-container raises specificity above those bare
   global selectors so this file's intended glass design wins,
   without touching main.css and risking other modules that still
   rely on the flat styling for these same class names.
   ================================================================ */
.dashboard-glass-container .glass-panel {
  background: var(--glass-surface) !important;
  backdrop-filter: blur(16px) saturate(160%) !important;
  -webkit-backdrop-filter: blur(16px) saturate(160%) !important;
  border: 1px solid var(--glass-border) !important;
  border-radius: var(--radius-xl) !important;
  box-shadow: var(--glass-shadow) !important;
}

body.dark-theme .dashboard-glass-container .glass-panel {
  background: var(--glass-surface) !important;
  border-color: var(--glass-border) !important;
}

.dashboard-glass-container .assistant-tabs {
  display: flex !important;
  gap: 6px !important;
  margin-bottom: 10px !important;
  background: transparent !important;
  border-bottom: none !important;
  padding: 0 !important;
  width: auto !important;
  box-shadow: none !important;
}

.dashboard-glass-container .assistant-tab-btn {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  padding: 5px 12px !important;
  font-size: var(--text-xs) !important;
  font-weight: 500 !important;
  color: var(--text-muted) !important;
  background: var(--bg-base) !important;
  border: 1px solid #d1d5db !important;
  border-bottom: 1px solid var(--border) !important;
  border-radius: var(--radius-btn) !important;
  margin-bottom: 0 !important;
  box-shadow: none !important;
}

.dashboard-glass-container .assistant-tab-btn.active {
  background: var(--bg-card) !important;
  color: var(--text-primary) !important;
  border-color: var(--border) !important;
  border-bottom-color: var(--border) !important;
  box-shadow: var(--shadow-sm) !important;
}

.dashboard-glass-container .assistant-tab-btn:hover:not(.active) {
  background: var(--bg-card) !important;
  color: var(--text-secondary) !important;
}

body.dark-theme .dashboard-glass-container .assistant-tab-btn {
  background: var(--bg-base) !important;
  border-color: var(--border) !important;
}

body.dark-theme .dashboard-glass-container .assistant-tab-btn.active {
  background: var(--bg-card) !important;
}

/* ==================================================================
   DASHBOARD PREMIUM ENHANCEMENTS
   ================================================================== */

.card-metric-crm {
  background: var(--glass-bg) !important;
  border: 1px solid var(--glass-border) !important;
  box-shadow: var(--glass-shadow) !important;
}

.card-metric-crm:hover {
  border-color: var(--accent) !important;
  box-shadow: var(--shadow-md), 0 0 0 1px var(--accent-light) !important;
}

.metric-crm-title {
  color: var(--text-secondary) !important;
  font-weight: 600 !important;
}

.metric-crm-value {
  color: var(--text-primary) !important;
}

.dash-profile-card {
  background: var(--glass-bg) !important;
  border: 1px solid var(--glass-border) !important;
}

.dash-profile-stat-item {
  background: var(--bg-subtle) !important;
  border: 1px solid var(--border-subtle) !important;
}

.dash-donut-card {
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
}

.dash-heatmap-card {
  background: var(--glass-bg) !important;
  border: 1px solid var(--glass-border) !important;
}

.dashboard-sub-header {
  border-bottom: 2px solid #d1d5db !important;
}

/* ================================================================
   Dashboard Card Content Scaling & Proportional Layout Enhancements
   ================================================================ */
.glass-panel.h-100 {
  display: flex !important;
  flex-direction: column !important;
  padding: 20px !important;
}

.dash-profile-card.h-100 {
  padding: 20px !important;
}

.dash-profile-card.h-100 .dash-profile-stats {
  margin-top: auto !important;
}

.glass-panel.h-100 .dash-donut-grid {
  flex: 1 !important;
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)) !important;
  align-items: center !important;
  gap: 12px !important;
}

.glass-panel.h-100 .dash-donut-card {
  height: 100% !important;
  justify-content: center !important;
}

.glass-panel.h-100 .dash-source-list {
  flex: 1 !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: space-around !important;
  margin-top: 0 !important;
  gap: 6px !important;
}

.dash-heatmap-card.h-100 {
  display: flex !important;
  flex-direction: column !important;
  padding: 20px !important;
  justify-content: space-between !important;
}

.dash-heatmap-card.h-100 .heatmap-day-labels {
  display: flex !important;
  justify-content: space-between !important;
  padding-left: 28px !important;
  margin-bottom: 6px !important;
  gap: 8px !important;
}

.dash-heatmap-card.h-100 .heatmap-day-label {
  flex: 1 !important;
  width: auto !important;
  text-align: center !important;
}

.dash-heatmap-card.h-100 .heatmap-grid-wrapper {
  display: flex !important;
  gap: 8px !important;
  flex: 1 !important;
  margin-top: auto !important;
  margin-bottom: auto !important;
}

.dash-heatmap-card.h-100 .heatmap-row-labels {
  display: flex !important;
  flex-direction: column !important;
  justify-content: space-between !important;
  width: 24px !important;
  margin-bottom: 0 !important;
}

.dash-heatmap-card.h-100 .heatmap-row-label {
  height: auto !important;
  flex: 1 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
}

.dash-heatmap-card.h-100 .heatmap-grid {
  display: flex !important;
  gap: 8px !important;
  flex: 1 !important;
}

.dash-heatmap-card.h-100 .heatmap-col {
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
  flex: 1 !important;
}

.dash-heatmap-card.h-100 .heatmap-cell {
  width: 100% !important;
  height: 0 !important;
  padding-bottom: 100% !important;
  border-radius: 4px !important;
}

.todo-card-panel.h-100 .todo-list-wrapper {
  max-height: none !important;
}

#activityPanel.h-100 {
  display: flex !important;
  flex-direction: column !important;
}

#activityPanel.h-100 .table-responsive {
  flex: 1 !important;
  max-height: none !important;
}

#activityPanel.h-100 .class-breakdown-section {
  margin-top: auto !important;
}

/* ==================================================================
   Teacher Dashboard Layout
   ================================================================== */

/* Layout & Page Container */
.teacher-dashboard-page {
  padding: 12px 0 32px 0;
}

/* Header & Avatar */
.td-header {
  background: var(--bg-surface, #ffffff);
  border: 1px solid var(--border-default, #e2e8f0);
  border-radius: var(--radius-md, 14px);
  padding: 20px 24px;
  margin-bottom: 24px;
  box-shadow: var(--shadow-sm, 0 1px 3px rgba(0, 0, 0, 0.04));
}

.td-avatar-img {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid var(--accent, #2563eb);
}

/* Statistics Cards */
.td-stat-box {
  border-radius: var(--radius-md, 12px);
  padding: 18px 20px;
  height: 100%;
  border: 1px solid transparent;
  display: flex;
  align-items: center;
  justify-content: space-between;
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.td-stat-box:hover {
  transform: translateY(-2px);
}

.stat-box-blue {
  background-color: var(--accent-soft, #eff6ff);
  border-color: #bfdbfe;
}
.stat-box-blue .td-stat-number { color: #1d4ed8; }
.stat-box-blue .td-stat-label { color: #2563eb; }

.stat-box-green {
  background-color: var(--success-soft, #f0fdf4);
  border-color: #bbf7d0;
}
.stat-box-green .td-stat-number { color: #15803d; }
.stat-box-green .td-stat-label { color: #16a34a; }

.stat-box-purple {
  background-color: #faf5ff;
  border-color: #e9d5ff;
}
.stat-box-purple .td-stat-number { color: #7e22ce; }
.stat-box-purple .td-stat-label { color: #9333ea; }

.stat-box-amber {
  background-color: var(--warning-soft, #fffbeb);
  border-color: #fde68a;
}
.stat-box-amber .td-stat-number { color: #b45309; }
.stat-box-amber .td-stat-label { color: #d97706; }

.td-stat-icon-wrapper {
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
}

.td-stat-number {
  font-size: 1.85rem;
}

/* Section Cards & Headers */
.td-section-card {
  background: var(--bg-surface, #ffffff);
  border: 1px solid var(--border-default, #e2e8f0);
  border-radius: var(--radius-md, 14px);
  padding: 22px 24px;
  margin-bottom: 24px;
  box-shadow: var(--shadow-sm, 0 1px 3px rgba(0, 0, 0, 0.03));
}

.td-section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 12px;
  margin-bottom: 20px;
  border-bottom: 1px solid var(--border-subtle, #f1f5f9);
}

.td-section-heading {
  font-size: 0.8125rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted, #475467);
  margin: 0;
  display: flex;
  align-items: center;
  gap: 8px;
}

/* Quick Action Cards */
.td-shortcut-card {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 18px;
  border-radius: var(--radius-md, 12px);
  background: var(--bg-subtle, #f8fafc);
  border: 1px solid var(--border-default, #e2e8f0);
  text-decoration: none !important;
  transition: all 0.18s ease;
  height: 100%;
}

.td-shortcut-card:hover {
  background: var(--bg-surface, #ffffff);
  border-color: var(--accent, #2563eb);
  box-shadow: 0 4px 14px rgba(37, 99, 235, 0.12);
  transform: translateY(-2px);
}

.td-icon-box {
  width: 44px;
  height: 44px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.25rem;
  flex-shrink: 0;
}

.icon-box-blue { background: #eff6ff; color: #2563eb; }
.icon-box-emerald { background: #ecfdf5; color: #059669; }
.icon-box-amber { background: #fffbe6; color: #d97706; }
.icon-box-purple { background: #f5f3ff; color: #7c3aed; }
.icon-box-rose { background: #fff1f2; color: #e11d48; }
.icon-box-cyan { background: #f0f9ff; color: #0284c7; }

/* Assigned Classes & Subject Badges */
.td-group-icon-box {
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
}

.td-class-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  border-radius: var(--pill-radius, 20px);
  font-size: 0.8125rem;
  font-weight: 600;
  background: var(--accent-soft, #eff6ff);
  color: #1d4ed8;
  border: 1px solid #bfdbfe;
}

.td-subject-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  border-radius: var(--pill-radius, 20px);
  font-size: 0.8125rem;
  font-weight: 600;
  background: var(--success-soft, #f0fdf4);
  color: #15803d;
  border: 1px solid #bbf7d0;
}

.badge-scholastic {
  background-color: #e0e7ff !important;
  color: #3730a3 !important;
  border: 1px solid #c7d2fe !important;
  font-weight: 700 !important;
}

.badge-coscholastic {
  background-color: #fef3c7 !important;
  color: #92400e !important;
  border: 1px solid #fde68a !important;
  font-weight: 700 !important;
}

/* ==================================================================
   Teacher Dashboard Responsive
   ================================================================== */
@media (max-width: 768px) {
  .teacher-dashboard-page {
    padding: 8px 0 24px 0;
  }
  .td-header, .td-section-card {
    padding: 16px;
    border-radius: 12px;
  }
  .td-stat-number {
    font-size: 1.5rem;
  }
}

/* ==================================================================
   Teacher Dashboard — Completion Pass
   Missing utility classes + polish so every section renders
   consistently with the design system above.
   ================================================================== */

/* ── Fractional spacing utilities (used by dashboard.php, not part of
   Bootstrap's default 0/1/2/3/4/5 spacer scale) ───────────────────── */
.p-0\.5 { padding: 0.125rem !important; }
.p-1\.5 { padding: 0.375rem !important; }
.p-2\.5 { padding: 0.625rem !important; }
.p-3\.5 { padding: 1.125rem !important; }

.pt-0\.5, .py-0\.5 { padding-top: 0.125rem !important; }
.pb-0\.5, .py-0\.5 { padding-bottom: 0.125rem !important; }
.ps-0\.5, .px-0\.5 { padding-left: 0.125rem !important; }
.pe-0\.5, .px-0\.5 { padding-right: 0.125rem !important; }

.pt-1\.5, .py-1\.5 { padding-top: 0.375rem !important; }
.pb-1\.5, .py-1\.5 { padding-bottom: 0.375rem !important; }
.ps-1\.5, .px-1\.5 { padding-left: 0.375rem !important; }
.pe-1\.5, .px-1\.5 { padding-right: 0.375rem !important; }

.pt-2\.5, .py-2\.5 { padding-top: 0.625rem !important; }
.pb-2\.5, .py-2\.5 { padding-bottom: 0.625rem !important; }
.ps-2\.5, .px-2\.5 { padding-left: 0.625rem !important; }
.pe-2\.5, .px-2\.5 { padding-right: 0.625rem !important; }

.pt-3\.5, .py-3\.5 { padding-top: 1.125rem !important; }
.pb-3\.5, .py-3\.5 { padding-bottom: 1.125rem !important; }
.ps-3\.5, .px-3\.5 { padding-left: 1.125rem !important; }
.pe-3\.5, .px-3\.5 { padding-right: 1.125rem !important; }

.m-0\.5 { margin: 0.125rem !important; }
.mt-0\.5, .my-0\.5 { margin-top: 0.125rem !important; }
.mb-0\.5, .my-0\.5 { margin-bottom: 0.125rem !important; }
.ms-0\.5, .mx-0\.5 { margin-left: 0.125rem !important; }
.me-0\.5, .mx-0\.5 { margin-right: 0.125rem !important; }

.mt-1\.5, .my-1\.5 { margin-top: 0.375rem !important; }
.mb-1\.5, .my-1\.5 { margin-bottom: 0.375rem !important; }

.mt-2\.5, .my-2\.5 { margin-top: 0.625rem !important; }
.mb-2\.5, .my-2\.5 { margin-bottom: 0.625rem !important; }

.gap-0\.5 { gap: 0.125rem !important; }
.gap-1\.5 { gap: 0.375rem !important; }
.gap-2\.5 { gap: 0.625rem !important; }
.gap-3\.5 { gap: 1.125rem !important; }

/* ── Missing color utility (Bootstrap ships subtle variants only for
   theme colors — blue as a standalone utility isn't generated) ───── */
.bg-blue-subtle {
  background-color: var(--accent-soft) !important;
}
.text-blue {
  color: var(--accent-hover) !important;
}

/* ── Misc small utilities referenced in markup ─────────────────────── */
.italic {
  font-style: italic;
}
.font-mono {
  font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
}

/* ── Section card polish: hover lift + tighter rhythm between blocks ─ */
.teacher-dashboard-page .row.g-3 {
  --bs-gutter-y: 1rem;
}

.td-section-card:hover {
  box-shadow: var(--shadow-md);
}

.td-section-card + .td-section-card,
.row.g-3 + .td-section-card {
  margin-top: 0;
}

/* Assigned class group cards */
.teacher-dashboard-page .bg-light.rounded-3.border {
  background: var(--bg-subtle, #f8fafc) !important;
  border-color: var(--border-default, #e2e8f0) !important;
  transition: box-shadow 0.18s ease, transform 0.18s ease;
}
.teacher-dashboard-page .col-12.col-md-6 > .bg-light.rounded-3.border:hover {
  box-shadow: var(--shadow-sm);
  transform: translateY(-1px);
}

/* Subject chips */
.teacher-dashboard-page .badge.badge-scholastic,
.teacher-dashboard-page .badge.badge-coscholastic {
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.teacher-dashboard-page .badge.badge-scholastic:hover,
.teacher-dashboard-page .badge.badge-coscholastic:hover {
  transform: translateY(-1px);
  box-shadow: var(--shadow-sm);
}

/* Notice board + activity feed list items */
.teacher-dashboard-page .p-2\.5.rounded-3.bg-light.border,
.teacher-dashboard-page .d-flex.align-items-center.gap-2.p-2.rounded-3.bg-light.border {
  background: var(--bg-subtle, #f8fafc) !important;
  border-color: var(--border-default, #e2e8f0) !important;
  transition: background 0.15s ease, box-shadow 0.15s ease;
}
.teacher-dashboard-page .p-2\.5.rounded-3.bg-light.border:hover,
.teacher-dashboard-page .d-flex.align-items-center.gap-2.p-2.rounded-3.bg-light.border:hover {
  background: var(--bg-surface, #ffffff) !important;
  box-shadow: var(--shadow-sm);
}

/* Empty state boxes (no data yet) */
.teacher-dashboard-page .text-center.py-4.bg-light.rounded-3.border {
  background: var(--bg-subtle, #f8fafc) !important;
  border-style: dashed !important;
  border-color: var(--border-default, #e2e8f0) !important;
  padding-top: 2rem !important;
  padding-bottom: 2rem !important;
}

/* Icon alignment across dashboard headings + badges */
.teacher-dashboard-page .td-section-heading i,
.teacher-dashboard-page .badge i,
.teacher-dashboard-page p i {
  line-height: 1;
  vertical-align: -1px;
}

/* Badges: consistent pill sizing + weight across the page */
.teacher-dashboard-page .badge {
  font-weight: 600;
  letter-spacing: 0.01em;
}

/* Footer polish (shared shell element, safe additive styling) */
.footer {
  background: var(--bg-surface, #ffffff);
  border-top: 1px solid var(--border-default, #e2e8f0) !important;
  color: var(--text-secondary, #5c5c66);
}

/* ── Responsive refinements for the teacher dashboard ──────────────── */
@media (max-width: 768px) {
  .teacher-dashboard-page .td-stat-box {
    padding: 14px 16px;
  }
  .teacher-dashboard-page .td-stat-icon-wrapper {
    width: 40px;
    height: 40px;
  }
  .teacher-dashboard-page .td-section-header {
    margin-bottom: 14px;
    padding-bottom: 10px;
  }
  .teacher-dashboard-page .td-shortcut-card {
    padding: 12px 14px;
    gap: 10px;
  }
  .teacher-dashboard-page .td-icon-box {
    width: 38px;
    height: 38px;
    font-size: 1.05rem;
  }
  .teacher-dashboard-page .col-12.col-md-6 {
    margin-bottom: 0;
  }
}

@media (max-width: 480px) {
  .teacher-dashboard-page .td-section-card {
    padding: 14px;
  }
  .teacher-dashboard-page .badge {
    padding: 4px 10px !important;
  }
}

/* ==================================================================
   Redesigned Mobile-First Teacher Dashboard Layout
   ================================================================== */

.teacher-dashboard-page {
  padding: 12px 0 32px 0;
  max-width: 1200px;
  margin: 0 auto;
}

/* 1. Profile Header */
.td-profile-card {
  background: var(--bg-surface, #ffffff);
  border: 1px solid var(--border-default, #e2e8f0);
  border-radius: 16px;
  padding: 20px 24px;
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.04);
  margin-bottom: 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
}

.td-profile-main {
  display: flex;
  align-items: center;
  gap: 16px;
}

.td-profile-avatar {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  object-fit: cover;
  border: 2.5px solid var(--accent, #2563eb);
  box-shadow: 0 2px 8px rgba(37, 99, 235, 0.15);
  flex-shrink: 0;
}

.td-profile-title {
  font-size: 1.125rem;
  font-weight: 800;
  color: var(--text-dark, #0f172a);
  margin-bottom: 2px;
}

.td-profile-sub {
  font-size: 0.75rem;
  color: var(--text-muted, #64748b);
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.td-session-badge {
  background: var(--accent-soft, #eff6ff);
  color: var(--accent, #2563eb);
  border: 1px solid #bfdbfe;
  font-weight: 700;
  font-size: 0.6875rem;
  padding: 4px 12px;
  border-radius: 20px;
}

/* 2. Quick Overview Grid */
.td-overview-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-bottom: 24px;
}

.td-overview-card {
  background: var(--bg-surface, #ffffff);
  border: 1px solid var(--border-default, #e2e8f0);
  border-radius: 14px;
  padding: 16px 18px;
  display: flex;
  align-items: center;
  gap: 14px;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.03);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.td-overview-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(15, 23, 42, 0.06);
}

.td-overview-icon {
  width: 42px;
  height: 42px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.25rem;
  flex-shrink: 0;
}

.td-icon-blue   { background: #eff6ff; color: #2563eb; }
.td-icon-purple { background: #faf5ff; color: #7c3aed; }
.td-icon-emerald{ background: #ecfdf5; color: #059669; }
.td-icon-amber  { background: #fffbe6; color: #d97706; }

.td-overview-val {
  font-size: 1.25rem;
  font-weight: 800;
  color: var(--text-dark, #0f172a);
  line-height: 1.2;
}

.td-overview-lbl {
  font-size: 0.6875rem;
  font-weight: 600;
  color: var(--text-muted, #64748b);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

/* Section Containers & Headers */
.td-block-card {
  background: var(--bg-surface, #ffffff);
  border: 1px solid var(--border-default, #e2e8f0);
  border-radius: 16px;
  padding: 20px 22px;
  margin-bottom: 24px;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.03);
}

.td-block-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--border-subtle, #f1f5f9);
}

.td-block-title {
  font-size: 0.8125rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-dark, #1e293b);
  margin: 0;
  display: flex;
  align-items: center;
  gap: 8px;
}

/* 3. Assigned Class Cards */
.td-class-card {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  padding: 16px;
  height: 100%;
  transition: all 0.15s ease;
}

.td-class-card:hover {
  background: #ffffff;
  border-color: #3b82f6;
  box-shadow: 0 4px 12px rgba(59, 130, 246, 0.1);
}

.td-class-card.is-class-teacher {
  border-color: #bfdbfe;
  background: #f0f9ff;
}

.td-ct-badge {
  background: #dbeafe;
  color: #1e40af;
  border: 1px solid #93c5fd;
  font-size: 0.625rem;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 12px;
  text-transform: uppercase;
}

.td-subject-tag {
  font-size: 0.75rem;
  font-weight: 600;
  color: #334155;
  background: #ffffff;
  border: 1px solid #cbd5e1;
  padding: 3px 10px;
  border-radius: 6px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

/* 4. Quick Actions Grid */
.td-action-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 12px;
}

.td-action-tile {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  padding: 14px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  text-decoration: none !important;
  transition: all 0.15s ease;
}

.td-action-tile:hover {
  background: #ffffff;
  border-color: #2563eb;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(37, 99, 235, 0.12);
}

.td-action-icon {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.25rem;
  margin-bottom: 8px;
}

.td-action-label {
  font-size: 0.75rem;
  font-weight: 700;
  color: #0f172a;
  line-height: 1.2;
}

/* 5. Today's Pending Work Items */
.td-pending-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 14px;
  border-radius: 10px;
  background: #fffbeb;
  border: 1px solid #fde68a;
  margin-bottom: 8px;
}

.td-pending-item:last-child {
  margin-bottom: 0;
}

.td-pending-text {
  font-size: 0.75rem;
  font-weight: 700;
  color: #92400e;
}

.td-up-to-date {
  text-align: center;
  padding: 24px;
  background: #f0fdf4;
  border: 1px solid #bbf7d0;
  border-radius: 12px;
  color: #166534;
  font-weight: 700;
  font-size: 0.875rem;
}

/* 6. Recent Activity List */
.td-activity-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  margin-bottom: 8px;
}

.td-activity-row:last-child {
  margin-bottom: 0;
}

.td-activity-icon {
  color: #16a34a;
  font-size: 1.125rem;
  flex-shrink: 0;
}

.td-activity-text {
  font-size: 0.75rem;
  font-weight: 700;
  color: #0f172a;
}

.td-activity-time {
  font-size: 0.6875rem;
  color: #64748b;
}

/* Responsive Breakpoints */
@media (max-width: 992px) {
  .td-overview-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 576px) {
  .td-overview-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
  }
  .td-profile-card {
    padding: 16px;
  }
  .td-block-card {
    padding: 16px;
  }
  .td-action-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* ==================================================================
   Super Admin Master Dashboard Layout Styling
   ================================================================== */

.super-admin-hero {
  background: linear-gradient(135deg, #0f172a 0%, #1e293b 50%, #2563eb 100%);
  border-radius: 16px;
  padding: 24px 28px;
  color: #ffffff;
  box-shadow: 0 4px 20px rgba(15, 23, 42, 0.12);
  margin-bottom: 24px;
}

.super-admin-hero-title {
  font-size: 1.35rem;
  font-weight: 800;
  margin-bottom: 4px;
  letter-spacing: -0.01em;
}

.super-admin-hero-sub {
  font-size: 0.8125rem;
  color: rgba(255, 255, 255, 0.75);
  font-weight: 500;
}

.super-admin-hero-badge {
  background: rgba(255, 255, 255, 0.12);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: #ffffff;
  font-size: 0.75rem;
  font-weight: 600;
  padding: 6px 14px;
  border-radius: 30px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.super-admin-action-card {
  background: var(--bg-surface, #ffffff);
  border: 1px solid var(--border-default, #e2e8f0);
  border-radius: 14px;
  padding: 16px;
  display: flex;
  align-items: center;
  gap: 14px;
  text-decoration: none !important;
  transition: all 0.15s ease;
}

.super-admin-action-card:hover {
  transform: translateY(-2px);
  border-color: #3b82f6;
  box-shadow: 0 4px 14px rgba(59, 130, 246, 0.12);
}

.super-admin-action-icon {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.25rem;
  flex-shrink: 0;
}

.sa-icon-blue   { background: #eff6ff; color: #2563eb; }
.sa-icon-emerald{ background: #ecfdf5; color: #059669; }
.sa-icon-purple { background: #faf5ff; color: #7c3aed; }
.sa-icon-rose   { background: #fff1f2; color: #e11d48; }

.super-admin-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
}

.super-admin-table th {
  background: #f8fafc;
  color: #64748b;
  font-size: 0.6875rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 10px 14px;
  border-bottom: 1px solid #e2e8f0;
}

.super-admin-table td {
  padding: 12px 14px;
  font-size: 0.75rem;
  color: #1e293b;
  border-bottom: 1px solid #f1f5f9;
  vertical-align: middle;
}

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

/* ==================================================================
   Universal Form Controls & Input Group Prefix Icon Standard
   ================================================================== */

.input-group.eval-input-group,
.input-group:has(.input-group-text) {
  position: relative !important;
  display: flex !important;
  align-items: center !important;
  width: 100% !important;
}

.input-group.eval-input-group .input-group-text,
.input-group > .input-group-text:first-child {
  position: absolute !important;
  left: 14px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  z-index: 5 !important;
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
  margin: 0 !important;
  color: #64748b !important;
  font-size: 1.1rem !important;
  line-height: 1 !important;
  pointer-events: none !important;
  box-shadow: none !important;
}

.input-group.eval-input-group .form-select,
.input-group.eval-input-group .form-control,
.input-group > .input-group-text:first-child + .form-select,
.input-group > .input-group-text:first-child + .form-control {
  padding-left: 42px !important;
  border-radius: var(--radius-md, 12px) !important;
  background-color: #f8fafc !important;
  border: 1px solid #cbd5e1 !important;
  height: 44px !important;
  font-size: 0.875rem !important;
  color: #0f172a !important;
  transition: border-color 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease !important;
}

.input-group.eval-input-group .form-select:focus,
.input-group.eval-input-group .form-control:focus,
.input-group > .input-group-text:first-child + .form-select:focus,
.input-group > .input-group-text:first-child + .form-control:focus {
  border-color: var(--accent, #2563eb) !important;
  box-shadow: 0 0 0 3.5px rgba(37, 99, 235, 0.14) !important;
  background-color: #ffffff !important;
  outline: none !important;
}

/* Clear Visual Cue for Disabled / Not-Ready Form Fields */
.form-select:disabled,
.form-control:disabled,
select:disabled,
input:disabled {
  background-color: #f1f5f9 !important;
  color: #94a3b8 !important;
  border-color: #e2e8f0 !important;
  cursor: not-allowed !important;
  box-shadow: none !important;
  opacity: 0.85 !important;
}

.input-group:has(:disabled) .input-group-text,
.eval-input-group:has(:disabled) .input-group-text {
  color: #cbd5e1 !important;
  opacity: 0.5 !important;
}

/* Standardized Form Labels & Sentence-Case Compliance */
.eval-form-label,
.form-label {
  font-size: 0.8125rem !important;
  font-weight: 600 !important;
  color: #334155 !important;
  margin-bottom: 6px !important;
  text-transform: none !important;
  letter-spacing: normal !important;
}

/* Standardized Primary & Reset Action Buttons */
.eval-btn-primary,
.btn-primary {
  background-color: var(--accent, #2563eb) !important;
  border-color: var(--accent, #2563eb) !important;
  color: #ffffff !important;
  font-weight: 600 !important;
  border-radius: var(--radius-md, 12px) !important;
  height: 42px !important;
  padding: 0 20px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-shadow: 0 2px 6px rgba(37, 99, 235, 0.2) !important;
  transition: all 0.15s ease !important;
}

.eval-btn-primary:hover:not(:disabled),
.btn-primary:hover:not(:disabled) {
  background-color: var(--accent-hover, #1d4ed8) !important;
  border-color: var(--accent-hover, #1d4ed8) !important;
  color: #ffffff !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 4px 12px rgba(37, 99, 235, 0.3) !important;
}

.eval-btn-primary:disabled,
.btn-primary:disabled {
  background-color: #cbd5e1 !important;
  border-color: #cbd5e1 !important;
  color: #94a3b8 !important;
  cursor: not-allowed !important;
  box-shadow: none !important;
  opacity: 0.7 !important;
  transform: none !important;
}

.eval-btn-reset,
.btn-outline-secondary {
  background-color: #ffffff !important;
  border: 1px solid #cbd5e1 !important;
  color: #475569 !important;
  font-weight: 600 !important;
  border-radius: var(--radius-md, 12px) !important;
  height: 42px !important;
  padding: 0 18px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: all 0.15s ease !important;
}

.eval-btn-reset:hover,
.btn-outline-secondary:hover {
  background-color: #f8fafc !important;
  color: #0f172a !important;
  border-color: #94a3b8 !important;
}

/* Card Header Section Pattern */
.eval-filter-card,
.card-saas-header-box {
  background: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 16px !important;
  overflow: hidden !important;
  box-shadow: 0 2px 10px rgba(15, 23, 42, 0.04) !important;
}

.eval-card-header,
.card-header-saas {
  padding: 18px 24px !important;
  background: #ffffff !important;
  border-bottom: 1px solid #f1f5f9 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
}

.eval-header-brand {
  display: flex !important;
  align-items: center !important;
  gap: 14px !important;
}

.exam-header-icon-box,
.card-header-icon-box {
  width: 42px !important;
  height: 42px !important;
  border-radius: 12px !important;
  background: #f1f5f9 !important;
  color: var(--accent, #2563eb) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 1.25rem !important;
  flex-shrink: 0 !important;
}

.eval-header-title {
  font-size: 1rem !important;
  font-weight: 700 !important;
  color: #0f172a !important;
  margin: 0 !important;
}

.eval-header-subtitle {
  font-size: 0.78125rem !important;
  color: #64748b !important;
}

.eval-step-badge {
  background-color: #eff6ff !important;
  color: var(--accent, #2563eb) !important;
  font-weight: 600 !important;
  font-size: 0.75rem !important;
  border-radius: 30px !important;
  padding: 5px 14px !important;
  border: 1px solid #dbeafe !important;
}

/* ==================================================================
   Custom TomSelect Modern SaaS Theme System
   ================================================================== */

.ts-wrapper,
.ts-wrapper.form-control-admin {
  width: 100% !important;
  position: relative !important;
  font-family: inherit !important;
  padding: 0 !important;
  border: none !important;
  background: transparent !important;
  box-shadow: none !important;
  height: auto !important;
  min-height: auto !important;
}

.ts-wrapper .ts-control {
  padding: 6px 38px 6px 14px !important;
  border-radius: var(--radius-md, 10px) !important;
  background-color: #ffffff !important;
  border: 1px solid #cbd5e1 !important;
  min-height: 42px !important;
  height: auto !important;
  font-size: 0.875rem !important;
  color: #0f172a !important;
  font-weight: 500 !important;
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  gap: 6px !important;
  box-shadow: none !important;
  cursor: text !important;
  transition: border-color 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease !important;
}

/* Prefix Icon Support inside .input-group */
.input-group .ts-wrapper .ts-control,
.eval-input-group .ts-wrapper .ts-control,
.input-group:has(.input-group-text) .ts-wrapper .ts-control {
  padding-left: 42px !important;
}

/* Focus & Active Dropdown Panel State */
.ts-wrapper.focus .ts-control,
.ts-wrapper.dropdown-active .ts-control {
  border-color: var(--accent, #2563eb) !important;
  box-shadow: 0 0 0 3.5px rgba(37, 99, 235, 0.14) !important;
  background-color: #ffffff !important;
  outline: none !important;
}

/* Disabled State */
.ts-wrapper.disabled .ts-control,
.ts-wrapper .ts-control.disabled,
select:disabled + .ts-wrapper .ts-control {
  background-color: #f1f5f9 !important;
  color: #94a3b8 !important;
  border-color: #e2e8f0 !important;
  cursor: not-allowed !important;
  opacity: 0.85 !important;
  box-shadow: none !important;
}

/* Caret Icon inside Control */
.ts-wrapper .ts-control::after {
  content: "" !important;
  width: 8px !important;
  height: 8px !important;
  border-right: 2px solid #64748b !important;
  border-bottom: 2px solid #64748b !important;
  transform: rotate(45deg) translateY(-50%) !important;
  position: absolute !important;
  right: 16px !important;
  top: 42% !important;
  transition: transform 0.2s ease, border-color 0.15s ease !important;
  border-top: none !important;
  border-left: none !important;
  margin: 0 !important;
}

.ts-wrapper.dropdown-active .ts-control::after {
  transform: rotate(-135deg) translateY(-20%) !important;
  border-color: var(--accent, #2563eb) !important;
}

.ts-wrapper.disabled .ts-control::after {
  border-color: #cbd5e1 !important;
  opacity: 0.5 !important;
}

/* Floating Dropdown Panel Container (Overlaying on top of Modals & Cards) */
.ts-dropdown,
.ts-wrapper .ts-dropdown {
  background-color: #ffffff !important;
  border: 1px solid #cbd5e1 !important;
  border-radius: 12px !important;
  box-shadow: 0 16px 36px -4px rgba(15, 23, 42, 0.18), 0 6px 16px rgba(15, 23, 42, 0.08) !important;
  margin-top: 4px !important;
  padding: 6px !important;
  z-index: 99999 !important;
  max-height: 240px !important;
  overflow-y: auto !important;
  animation: tsDropdownFadeIn 0.15s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

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

/* Option Row Styling */
.ts-dropdown .option {
  padding: 9px 14px !important;
  border-radius: 8px !important;
  font-size: 0.85rem !important;
  color: #334155 !important;
  font-weight: 500 !important;
  cursor: pointer !important;
  transition: background-color 0.12s ease, color 0.12s ease !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
}

/* Hover & Active Keyboard Selection Highlight */
.ts-dropdown .option:hover,
.ts-dropdown .option.active,
.ts-dropdown .option.ts-selected {
  background-color: #f0f7ff !important;
  color: var(--accent, #2563eb) !important;
  font-weight: 600 !important;
}

/* Selected Option State */
.ts-dropdown .option.selected {
  background-color: #eff6ff !important;
  color: var(--accent, #2563eb) !important;
  font-weight: 600 !important;
}

/* Hide original native select visually while keeping form accessibility */
select.tomselected {
  position: absolute !important;
  opacity: 0 !important;
  pointer-events: none !important;
  width: 1px !important;
  height: 1px !important;
}



/* ============================================================================
   Dashboard analytics blocks — class ledger, fee-head recovery, composition
   bars and the action queue. Token-driven so light and dark themes both work.
   ========================================================================== */

/* -- Extra KPI accents (rose) --------------------------------------------- */
.saas-kpi-card.kpi-rose::before { background:linear-gradient(90deg,#ef4444,#f87171); }
.saas-kpi-icon.ik-rose { background:rgba(239,68,68,.12); color:#ef4444; }
.kpi-progress-bar.fill-rose { background:linear-gradient(90deg,#ef4444,#f87171); }

.text-emerald { color:#10b981 !important; }
.text-rose    { color:#ef4444 !important; }

/* -- Inline meta line under a KPI value ------------------------------------ */
.dash-split-line {
  display:flex; flex-wrap:wrap; align-items:center; gap:4px 12px;
  font-size:.64rem; font-weight:600; color:var(--text-secondary);
}
.dash-split-line i { font-size:.5rem; vertical-align:middle; }
.dot-blue    { color:#3b82f6; }
.dot-pink    { color:#ec4899; }
.dot-rose    { color:#ef4444; }
.dot-amber   { color:#f59e0b; }
.dot-emerald { color:#10b981; }
.dot-slate   { color:#94a3b8; }

.dash-scroll-y { overflow-y:auto; overflow-x:hidden; }
/* The class ledger is wider than a phone, so it pans sideways inside its card
   rather than letting the page body scroll horizontally. */
.dash-scroll-xy { overflow:auto; }
.dash-scroll-xy .dash-analytics-table { min-width:510px; }

/* -- Class ledger table ---------------------------------------------------- */
.dash-analytics-table { width:100%; border-collapse:separate; border-spacing:0; }
.dash-analytics-table thead th {
  position:sticky; top:0; z-index:2;
  background:var(--bg-subtle, var(--bg-surface));
  border-bottom:1px solid var(--border-default);
  font-size:.6rem; font-weight:700; letter-spacing:.04em; text-transform:uppercase;
  color:var(--text-secondary); padding:9px 12px; white-space:nowrap;
}
.dash-analytics-table tbody td {
  padding:9px 12px; border-bottom:1px solid var(--border-subtle, var(--border-default));
  font-size:.72rem; vertical-align:middle; white-space:nowrap;
}
.dash-analytics-table tbody tr:last-child td { border-bottom:0; }
.dash-analytics-table tbody tr:hover td { background:var(--bg-subtle, rgba(148,163,184,.06)); }
.dash-cell-strong { font-weight:700; color:var(--text-primary); }
.dash-cell-num    { font-weight:600; color:var(--text-primary); font-variant-numeric:tabular-nums; }

/* -- Inline progress bar used in tables and lists -------------------------- */
.dash-minibar {
  position:relative; height:7px; border-radius:6px; flex:1;
  background:var(--bg-subtle, rgba(148,163,184,.18)); overflow:hidden; min-width:40px;
}
.dash-minibar-wrap { display:flex; align-items:center; gap:7px; }
.dash-minibar-fill { height:100%; border-radius:8px; transition:width .5s ease; }
.dash-minibar-fill.mb-green { background:linear-gradient(90deg,#10b981,#34d399); }
.dash-minibar-fill.mb-amber { background:linear-gradient(90deg,#f59e0b,#fbbf24); }
.dash-minibar-fill.mb-rose  { background:linear-gradient(90deg,#ef4444,#f87171); }
.dash-minibar-fill.mb-slate { background:linear-gradient(90deg,#94a3b8,#cbd5e1); }
.dash-minibar-txt {
  font-size:.64rem; font-weight:700; color:var(--text-primary);
  font-variant-numeric:tabular-nums; width:32px; text-align:right; flex-shrink:0;
}

/* -- Fee head / receipt mix rows ------------------------------------------- */
.dash-head-row { padding:9px 0; border-bottom:1px dashed var(--border-default); }
.dash-head-row:last-child { border-bottom:0; padding-bottom:0; }
.dash-head-name {
  font-size:.72rem; font-weight:700; color:var(--text-primary);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:66%;
}

/* -- Gender / composition stacked bar -------------------------------------- */
.dash-stack-bar {
  display:flex; height:10px; border-radius:6px; overflow:hidden;
  background:var(--bg-subtle, rgba(148,163,184,.18));
}
.dash-stack-bar > div { height:100%; transition:width .5s ease; }
.dsb-male   { background:linear-gradient(90deg,#3b82f6,#60a5fa); }
.dsb-female { background:linear-gradient(90deg,#ec4899,#f472b6); }
.dsb-other  { background:#94a3b8; }

.dash-house-row { display:flex; align-items:center; gap:6px; padding:5px 0; }
.dash-house-name {
  font-size:.68rem; font-weight:600; color:var(--text-primary);
  width:96px; flex-shrink:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}

/* -- Action queue ---------------------------------------------------------- */
.dash-alert-row {
  display:flex; align-items:flex-start; gap:10px; padding:10px;
  border:1px solid var(--border-default); border-left-width:3px;
  border-radius:10px; margin-bottom:8px; text-decoration:none;
  transition:background .18s ease, transform .18s ease;
}
.dash-alert-row:last-child { margin-bottom:0; }
.dash-alert-row:hover { background:var(--bg-subtle, rgba(148,163,184,.07)); transform:translateX(2px); }
.dash-alert-ico {
  width:28px; height:28px; border-radius:8px; flex-shrink:0;
  display:flex; align-items:center; justify-content:center; font-size:.85rem;
}
.dash-alert-title { display:block; font-size:.72rem; font-weight:700; color:var(--text-primary); }
.dash-alert-note  { display:block; font-size:.63rem; color:var(--text-secondary); margin-top:1px; }
.dash-alert-cta {
  font-size:.62rem; font-weight:700; color:var(--text-secondary);
  white-space:nowrap; align-self:center; display:flex; align-items:center; gap:2px;
}
.dash-alert-row.tone-rose  { border-left-color:#ef4444; } .dash-alert-row.tone-rose  .dash-alert-ico { background:rgba(239,68,68,.12);  color:#ef4444; }
.dash-alert-row.tone-amber { border-left-color:#f59e0b; } .dash-alert-row.tone-amber .dash-alert-ico { background:rgba(245,158,11,.12); color:#f59e0b; }
.dash-alert-row.tone-blue  { border-left-color:#3b82f6; } .dash-alert-row.tone-blue  .dash-alert-ico { background:rgba(59,130,246,.12); color:#3b82f6; }
.dash-alert-row.tone-cyan  { border-left-color:#06b6d4; } .dash-alert-row.tone-cyan  .dash-alert-ico { background:rgba(6,182,212,.12);  color:#06b6d4; }
.dash-alert-row.tone-slate { border-left-color:#94a3b8; } .dash-alert-row.tone-slate .dash-alert-ico { background:rgba(148,163,184,.14); color:#64748b; }

/* -- Today mini stats ------------------------------------------------------ */
.dash-mini-stat {
  border:1px solid var(--border-default); border-radius:10px; padding:9px 10px; height:100%;
}
.dash-mini-val { font-size:1.15rem; font-weight:800; color:var(--text-primary); line-height:1.1; }
.dash-mini-lbl { font-size:.63rem; font-weight:700; color:var(--text-primary); margin-top:2px; }
.dash-mini-note { font-size:.6rem; color:var(--text-secondary); }

/* -- Clickable list rows --------------------------------------------------- */
.dash-list-link { text-decoration:none; }
.dash-defaulter-row {
  display:flex; align-items:center; gap:8px; padding:7px 0;
  border-bottom:1px dashed var(--border-default); text-decoration:none;
}
.dash-defaulter-row:last-child { border-bottom:0; }
.dash-defaulter-row:hover .saas-list-name { color:var(--accent); }
.dash-defaulter-row .saas-list-name,
.dash-defaulter-row .saas-list-sub { display:block; }

@media (max-width: 575.98px) {
  .dash-analytics-table tbody td,
  .dash-analytics-table thead th { padding:8px 9px; font-size:.66rem; }
  .dash-house-name { width:74px; }
}

/* -- Session carry-forward flow (opening + net = closing) ------------------- */
.dash-flow { display:flex; align-items:stretch; gap:10px; flex-wrap:wrap; }
.dash-flow-step {
  flex:1 1 180px; min-width:150px;
  border:1px solid var(--border-default); border-radius:11px; padding:11px 13px;
}
.dash-flow-step--end { border-color:var(--accent); background:var(--bg-subtle, rgba(59,130,246,.05)); }
.dash-flow-lbl  { font-size:.62rem; font-weight:700; letter-spacing:.04em; text-transform:uppercase; color:var(--text-secondary); }
.dash-flow-val  { font-size:1.2rem; font-weight:800; color:var(--text-primary); line-height:1.25; margin-top:2px; }
.dash-flow-note { font-size:.61rem; color:var(--text-secondary); margin-top:2px; }
.dash-flow-op {
  align-self:center; flex:0 0 22px; text-align:center;
  font-size:.8rem; color:var(--text-secondary);
}

/* -- Upcoming birthdays ---------------------------------------------------- */
.dash-bday-row {
  display:flex; align-items:center; gap:9px; padding:7px 8px;
  border-radius:9px; border-bottom:1px dashed var(--border-default);
}
.dash-bday-row:last-child { border-bottom:0; }
.dash-bday-row.is-today { background:rgba(16,185,129,.08); border-bottom-color:transparent; }
.dash-bday-av { width:30px; height:30px; border-radius:50%; object-fit:cover; flex-shrink:0; }

@media (max-width: 575.98px) {
  .dash-flow-op { display:none; }
  .dash-flow-step { flex:1 1 100%; }
}

/* -- Structure head preview (assign modal) --------------------------------- */
.afs-preview { border-top: 1px solid var(--border-default); padding-top: 10px; }
.afs-preview-row { display: flex; align-items: baseline; gap: 8px; padding: 4px 0; }
.afs-preview-head { flex: 1 1 auto; font-size: .7rem; color: var(--text-primary); }
.afs-preview-freq { font-size: .58rem; text-transform: capitalize; color: var(--text-secondary); }
.afs-preview-amt  { font-size: .7rem; font-weight: 600; font-variant-numeric: tabular-nums; }

/* -- Billed / paid / due cell ---------------------------------------------- */
.afs-fee-cell { display: flex; flex-direction: column; align-items: flex-end; gap: 1px; }
.afs-fee-meta { display: flex; gap: 8px; font-size: .6rem; font-weight: 600; }