/*
 * This is a manifest file that'll be compiled into application.css.
 *
 * With Propshaft, assets are served efficiently without preprocessing steps. You can still include
 * application-wide styles in this file, but keep in mind that CSS precedence will follow the standard
 * cascading order, meaning styles declared later in the document or manifest will override earlier ones,
 * depending on specificity.
 *
 * Consider organizing styles into separate files for maintainability.
 */

/* ===== Custom Fonts ===== */
@font-face {
  font-family: 'Recoleta';
  src: url("/Recoleta-RegularDEMO.otf") format('opentype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* ===== Design Tokens (Accelerated Academy Brand) ===== */
:root {
  /* Primary Colors */
  --color-primary: #0891b2;
  --color-primary-hover: #0e7490;
  --color-primary-light: #ecfeff;

  /* Navy Colors (text, headings, dark sections) */
  --color-navy-dark: #0c2340;
  --color-navy-medium: #163a5f;
  --color-navy-light: #1e4d7a;

  /* Neutral Colors */
  --color-gray-50: #F7F7FC;
  --color-gray-100: #EFF0F6;
  --color-gray-200: #DCDDEB;
  --color-gray-300: #c4c5d6;
  --color-gray-400: #9a9bb0;
  --color-gray-500: #6b6d84;
  --color-gray-600: #4a4c5e;
  --color-gray-700: #333;
  --color-white: #FFFFFF;

  /* Landing Page Palette (Course Selector) */
  --color-landing-navy: #0c2340;
  --color-landing-navy-alt: #163a5f;
  --color-landing-slate-50: #f8fafc;
  --color-landing-slate-200: #e2e8f0;
  --color-landing-gray-100: #f3f4f6;
  --color-landing-gray-300: #d1d5db;
  --color-landing-gray-500: #6b7280;
  --color-landing-gray-700: #374151;
  --color-landing-amber-800: #92400e;
  --color-landing-green-600: #059669;
  --color-landing-emerald-800: #065f46;
  --color-landing-blue-600: #0e7490;
  --color-landing-blue-800: #0c5e75;
  --color-landing-red-800: #991b1b;

  /* Accent Colors */
  --color-accent-teal: #64E2CA;
  --color-accent-teal-light: #e0f8f3;

  /* Status Colors */
  --color-success: #10b981;
  --color-success-light: #d1fae5;
  --color-warning: #f59e0b;
  --color-warning-light: #fef3c7;
  --color-error: #ef4444;
  --color-error-light: #fee2e2;
  --color-info: #0891b2;
  --color-info-light: #ecfeff;

  /* Material Blue Palette (used for info/primary accents) */
  --color-blue-50: #e3f2fd;
  --color-blue-100: #bbdefb;
  --color-blue-200: #90caf9;
  --color-blue-300: #64b5f6;
  --color-blue-400: #42a5f5;
  --color-blue-500: #2196f3;
  --color-blue-600: #1e88e5;
  --color-blue-700: #1976d2;
  --color-blue-800: #1565c0;
  --color-blue-900: #0d47a1;

  /* Material Green Palette (used for success states) */
  --color-green-50: #e8f5e9;
  --color-green-100: #c8e6c9;
  --color-green-200: #a5d6a7;
  --color-green-300: #81c784;
  --color-green-400: #66bb6a;
  --color-green-500: #4caf50;
  --color-green-600: #43a047;
  --color-green-700: #388e3c;
  --color-green-800: #2e7d32;
  --color-green-900: #1b5e20;

  /* Material Red Palette (used for error/danger states) */
  --color-red-50: #ffebee;
  --color-red-100: #ffcdd2;
  --color-red-200: #ef9a9a;
  --color-red-300: #e57373;
  --color-red-400: #ef5350;
  --color-red-500: #f44336;
  --color-red-600: #e53935;
  --color-red-700: #d32f2f;
  --color-red-800: #c62828;
  --color-red-900: #b71c1c;

  /* Material Orange Palette (used for warning states) */
  --color-orange-50: #fff3e0;
  --color-orange-100: #ffe0b2;
  --color-orange-200: #ffcc80;
  --color-orange-300: #ffb74d;
  --color-orange-400: #ffa726;
  --color-orange-500: #ff9800;
  --color-orange-600: #fb8c00;
  --color-orange-700: #f57c00;
  --color-orange-800: #ef6c00;
  --color-orange-900: #e65100;

  /* Material Amber Palette (used for warning accents) */
  --color-amber-50: #fff8e1;
  --color-amber-100: #ffecb3;
  --color-amber-200: #ffe082;
  --color-amber-300: #ffd54f;
  --color-amber-400: #ffca28;
  --color-amber-500: #ffc107;
  --color-amber-600: #ffb300;
  --color-amber-700: #ffa000;
  --color-amber-800: #ff8f00;
  --color-amber-900: #ff6f00;

  /* Material Yellow Palette */
  --color-yellow-50: #fffde7;
  --color-yellow-100: #fff9c4;
  --color-yellow-700: #f9a825;

  /* Material Purple Palette */
  --color-purple-50: #f3e5f5;
  --color-purple-100: #e1bee7;
  --color-purple-200: #ce93d8;
  --color-purple-300: #ba68c8;
  --color-purple-400: #ab47bc;
  --color-purple-500: #9c27b0;
  --color-purple-600: #8e24aa;
  --color-purple-700: #7b1fa2;
  --color-purple-800: #6a1b9a;
  --color-purple-900: #4a148c;

  /* Material Pink Palette */
  --color-pink-50: #fce4ec;
  --color-pink-100: #f8bbd9;
  --color-pink-200: #f48fb1;
  --color-pink-300: #f06292;
  --color-pink-400: #ec407a;
  --color-pink-500: #e91e63;
  --color-pink-600: #d81b60;
  --color-pink-700: #c2185b;
  --color-pink-800: #ad1457;
  --color-pink-900: #880e4f;

  /* Neutral/Border Colors */
  --color-border: #e0e0e0;
  --color-border-light: #f0f0f0;
  --color-border-dark: #ccc;
  --color-border-muted: #ddd;

  /* Background Grays */
  --color-bg-light: #f5f5f5;
  --color-bg-lighter: #fafafa;
  --color-bg-subtle: #f8f9fa;
  --color-bg-hover: #f9fafb;

  /* Text Colors */
  --color-text-primary: #1a1a1a;
  --color-text-secondary: #666;
  --color-text-muted: #999;
  --color-text-disabled: #ccc;

  /* Typography */
  --font-heading: 'Recoleta', Georgia, serif;
  --font-body: 'Poppins', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  /* Font Sizes */
  --text-xs: 11px;
  --text-sm: 13px;
  --text-base: 14px;
  --text-md: 16px;
  --text-lg: 18px;
  --text-xl: 20px;
  --text-2xl: 24px;
  --text-3xl: 32px;
  --text-4xl: 48px;
  --text-5xl: 64px;

  /* Border Radius */
  --radius-sm: 6px;
  --radius-md: 12px;
  --radius-lg: 20px;
  --radius-xl: 24px;
  --radius-pill: 48px;
  --radius-full: 100px;

  /* Shadows */
  --shadow-sm: 0 1px 2px rgba(3, 43, 73, 0.05);
  --shadow-md: 0 2px 8px rgba(3, 43, 73, 0.08);
  --shadow-lg: 0 4px 16px rgba(3, 43, 73, 0.1);
  --shadow-xl: 0 8px 24px rgba(3, 43, 73, 0.12);
  --shadow-card: 0 2px 12px rgba(20, 20, 43, 0.08);

  /* Spacing */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;

  /* Transitions */
  --transition-fast: 0.15s ease;
  --transition-base: 0.2s ease;
  --transition-slow: 0.3s ease;
}

/* ===== Global Styles ===== */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: var(--font-body);
  line-height: 1.6;
  color: var(--color-navy-dark);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-variant-ligatures: none;
  font-feature-settings: "liga" 0, "clig" 0;
}

/* Heading font family */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading);
  color: var(--color-navy-dark);
  font-weight: 400;
}

/* Text selection styling */
::selection {
  background: var(--color-navy-dark);
  color: var(--color-white);
}

/* ===== Custom Scrollbars (Webkit) ===== */
::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

::-webkit-scrollbar-track {
  background: var(--color-gray-50);
  border-radius: 5px;
}

::-webkit-scrollbar-thumb {
  background: var(--color-gray-200);
  border-radius: 5px;
  border: 2px solid var(--color-gray-50);
}

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

/* Thin scrollbars for specific areas */
.tabulator-tableholder::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

/* ===== Icon Utilities ===== */
iconify-icon {
  display: inline-block;
  vertical-align: middle;
}

.icon-sm { width: 16px; height: 16px; }
.icon-md { width: 20px; height: 20px; }
.icon-lg { width: 24px; height: 24px; }
.icon-xl { width: 32px; height: 32px; }
.icon-2xl { width: 48px; height: 48px; }

/* Icon sizing for specific contexts */
.state-icon-badge iconify-icon,
.campus-icon-box iconify-icon,
.campus-icon-inner,
.course-icon iconify-icon,
.term-icon iconify-icon { width: 20px; height: 20px; }

.state-stat-icon iconify-icon,
.campus-stat-card iconify-icon,
.term-stat-icon iconify-icon { width: 24px; height: 24px; }

.state-header-icon iconify-icon,
.campus-header-icon iconify-icon { width: 32px; height: 32px; }

.top-campus-icon iconify-icon { width: 20px; height: 20px; }
.activity-empty-icon iconify-icon { width: 48px; height: 48px; }
.map-pin iconify-icon { width: 32px; height: 32px; }

.schedule-icon iconify-icon,
.contact-info-icon iconify-icon,
.requirement-check iconify-icon,
.requirement-circle iconify-icon,
.equipment-check iconify-icon,
.accessibility-check iconify-icon,
.amenity-icon iconify-icon,
.payment-icon iconify-icon,
.status-check iconify-icon { width: 16px; height: 16px; }

.compliance-req-check iconify-icon { width: 16px; height: 16px; color: var(--color-success); }
.campus-icon-small iconify-icon { width: 18px; height: 18px; }

.count-badge iconify-icon { width: 14px; height: 14px; margin-right: 4px; vertical-align: -2px; }
.btn-actions iconify-icon,
.btn-icon-actions iconify-icon,
.btn-icon-action iconify-icon,
.icon-btn iconify-icon { width: 16px; height: 16px; }

/* Status badge icons */
.status-badge iconify-icon { width: 14px; height: 14px; margin-right: 4px; vertical-align: -2px; }
.compliance-badge iconify-icon { width: 14px; height: 14px; margin-right: 4px; vertical-align: -2px; }

/* Tab button icons */
.tab-button iconify-icon { width: 16px; height: 16px; margin-right: 6px; vertical-align: -2px; }

/* Empty state icons */
.empty-state-icon iconify-icon { width: 48px; height: 48px; opacity: 0.3; }

/* Avatar icons */
.avatar-icon { font-size: 24px; }

/* ===== Admin Layout ===== */
.admin-body {
  background: var(--color-gray-50);
  margin: 0;
  padding: 0;
}

.admin-container {
  display: flex;
  min-height: 100vh;
}

.admin-sidebar {
  width: 250px;
  background: var(--color-navy-dark);
  color: white;
  display: flex;
  flex-direction: column;
  position: fixed;
  height: 100vh;
  overflow-y: auto;
}

.sidebar-header {
  padding: 20px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

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

.logo-icon {
  width: 32px;
  height: 32px;
  background: url("/logo.png") center/contain no-repeat;
  border-radius: 50%;
}

.logo-text {
  display: flex;
  flex-direction: column;
}

.logo-title {
  font-size: 14px;
  font-weight: 600;
}

.logo-subtitle {
  font-size: 12px;
  opacity: 0.9;
}

.sidebar-nav {
  flex: 1;
}

.nav-section {
  margin-top: 24px;
}

.nav-section-title {
  font-size: 11px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.5);
  padding: 8px 20px;
  letter-spacing: 0.5px;
}

.nav-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 20px;
  color: rgba(255, 255, 255, 0.8);
  text-decoration: none;
  transition: all 0.2s;
}

.nav-item:hover {
  background: rgba(255, 255, 255, 0.1);
  color: white;
}

.nav-item.active {
  background: rgba(8, 145, 178, 0.2);
  color: white;
  border-left: 3px solid var(--color-primary);
}

.nav-item.nav-item-disabled,
.nav-item.disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.nav-item.nav-item-disabled:hover,
.nav-item.disabled:hover {
  background: transparent;
  color: rgba(255, 255, 255, 0.8);
}

.nav-item.nav-item-sub {
  padding-left: 36px;
  font-size: 13px;
}

.nav-item.nav-item-sub .nav-icon {
  width: 14px;
  height: 14px;
}

.coming-soon-badge {
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  background: rgba(255, 255, 255, 0.2);
  padding: 2px 6px;
  border-radius: var(--radius-lg);
  margin-left: auto;
  letter-spacing: 0.5px;
}

.nav-icon {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}

.nav-label {
  font-size: 14px;
}

.sidebar-footer {
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  padding: 20px;
}

.support-section {
  margin-bottom: 16px;
  text-align: center;
}

.support-label {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.6);
  margin-bottom: 4px;
}

.support-phone {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  color: white;
  text-decoration: none;
  padding: 8px;
  border-radius: var(--radius-sm);
  transition: background var(--transition-base);
}

.support-phone:hover {
  background: rgba(255, 255, 255, 0.1);
}

.support-text {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.7);
}

.support-number {
  font-size: 14px;
  font-weight: 600;
  color: var(--color-primary-light, #7dd3fc);
}

.user-section {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
  background: rgba(255, 255, 255, 0.05);
  border-radius: var(--radius-sm);
}

.user-avatar {
  width: 32px;
  height: 32px;
  background: var(--color-gray-200);
  border-radius: 50%;
}

.user-avatar-circle {
  width: 36px;
  height: 36px;
  background: var(--color-primary);
  color: white;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 600;
  flex-shrink: 0;
}

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

.user-name {
  font-size: 13px;
  font-weight: 500;
  color: white;
}

.logout-link {
  font-size: 11px;
  color: rgba(255, 255, 255, 0.7);
  text-decoration: none;
  transition: color 0.2s;
}

.logout-link:hover {
  color: white;
  text-decoration: underline;
}

.logout-link-button {
  font-size: 11px;
  color: rgba(255, 255, 255, 0.7);
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  transition: color 0.2s;
  text-decoration: none;
  display: inline;
}

.logout-link-button:hover {
  color: white;
  text-decoration: underline;
}

.user-actions {
  display: flex;
  align-items: center;
  gap: 4px;
}

.sidebar-action-link {
  font-size: 11px;
  color: rgba(255, 255, 255, 0.7);
  text-decoration: none;
  transition: color 0.2s;
}

.sidebar-action-link:hover {
  color: white;
  text-decoration: underline;
}

.sidebar-action-sep {
  font-size: 11px;
  color: rgba(255, 255, 255, 0.4);
}

.admin-main {
  flex: 1;
  margin-left: 250px;
  display: flex;
  flex-direction: column;
}

.admin-header {
  background: var(--color-white);
  padding: 16px 32px;
  border-bottom: 1px solid var(--color-gray-100);
  display: flex;
  justify-content: space-between;
  overflow: visible;
  position: relative;
  z-index: 10;
  align-items: center;
}

.header-left {
  flex: 1;
  max-width: 500px;
  overflow: visible;
}

/* Sparkline in Header */
.sparkline-container {
  display: flex;
  align-items: center;
  gap: 16px;
  position: relative;
}

.sparkline-meta {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.sparkline-label {
  font-size: 11px;
  font-weight: 600;
  color: var(--color-gray-500);
  letter-spacing: 0.3px;
}

.sparkline-period {
  font-size: 10px;
  color: var(--color-gray-400);
}

.sparkline-chart {
  height: 36px;
  width: 220px;
  overflow: visible;
}

.sparkline-chart canvas {
  cursor: crosshair;
  overflow: visible;
}

.sparkline-stats {
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
}

.sparkline-total {
  font-size: 18px;
  font-weight: 600;
  color: var(--color-navy-dark);
  letter-spacing: -0.5px;
}

.sparkline-trend {
  font-size: 11px;
  font-weight: 500;
  padding: 2px 6px;
  border-radius: 4px;
}

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

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

.sparkline-hover-readout {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 126px;
}

.sparkline-hover-label {
  font-size: 10px;
  font-weight: 600;
  color: var(--color-gray-500);
  text-transform: uppercase;
  letter-spacing: 0.35px;
  line-height: 1.2;
}

.sparkline-hover-value {
  font-size: 12px;
  font-weight: 600;
  color: var(--color-navy-dark);
  line-height: 1.25;
  white-space: nowrap;
}

.sparkline-tooltip {
  position: fixed;
  z-index: 20000;
  pointer-events: none;
  background: rgba(15, 23, 42, 0.96);
  color: #fff;
  border-radius: 8px;
  padding: 8px 10px;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.22);
  transform: translate(-50%, calc(-100% - 12px));
  opacity: 0;
  transition: opacity 0.12s ease;
  white-space: nowrap;
}

.sparkline-tooltip.is-visible {
  opacity: 1;
}

.sparkline-tooltip-title {
  font-size: 11px;
  font-weight: 600;
  margin-bottom: 2px;
}

.sparkline-tooltip-value {
  font-size: 12px;
  opacity: 0.95;
}

.page-title {
  font-size: var(--text-2xl);
  font-weight: 700;
  color: var(--color-navy-dark);
}

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

/* Actions Dropdown */
.actions-dropdown {
  position: relative;
  display: inline-block;
}

.actions-dropdown .btn-primary {
  display: flex;
  align-items: center;
  gap: 8px;
}

.dropdown-chevron {
  font-size: 14px;
  transition: transform 0.2s;
}

.dropdown-menu {
  display: none;
  min-width: 200px;
  background: var(--color-white);
  border: 1px solid var(--color-gray-100);
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  z-index: 9999;
}

.dropdown-menu.show {
  display: block;
}

.dropdown-item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 12px 16px;
  border: none;
  background: none;
  font-size: 14px;
  color: var(--color-gray-600);
  text-align: left;
  cursor: pointer;
  transition: background 0.15s;
}

.dropdown-item:first-child {
  border-radius: 7px 7px 0 0;
}

.dropdown-item:last-child {
  border-radius: 0 0 7px 7px;
}

.dropdown-item:only-child {
  border-radius: 7px;
}

.dropdown-item:hover {
  background: var(--color-gray-50);
}

.dropdown-item iconify-icon {
  font-size: 16px;
  color: var(--color-gray-500);
}

.user-dropdown {
  padding: 8px 16px;
  background: var(--color-gray-50);
  border-radius: var(--radius-sm);
  font-size: 14px;
  cursor: pointer;
}

.admin-content {
  flex: 1;
  padding: 32px;
}

/* ===== Dashboard Styles ===== */
.dashboard {
}

.stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 24px;
  margin-bottom: 32px;
}

.stat-card {
  background: var(--color-white);
  padding: 24px;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  border: 1px solid var(--color-gray-100);
}

.stat-label {
  font-size: var(--text-base);
  color: var(--color-gray-500);
  margin-bottom: 8px;
}

.stat-value {
  font-size: var(--text-3xl);
  font-weight: 700;
  color: var(--color-navy-dark);
  margin-bottom: 8px;
}

.stat-change {
  font-size: var(--text-sm);
  font-weight: 500;
}

.stat-change.positive {
  color: var(--color-success);
}

.stat-change.warning {
  color: var(--color-warning);
}

.stat-change.neutral {
  color: var(--color-gray-500);
}

.section-title {
  font-size: var(--text-lg);
  font-weight: 700;
  color: var(--color-navy-dark);
  margin-bottom: 16px;
  margin-top: 32px;
}

.quick-actions-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 16px;
  margin-bottom: 32px;
}

.action-card {
  background: var(--color-white);
  padding: 24px;
  border-radius: var(--radius-lg);
  border: 2px dashed var(--color-gray-200);
  display: flex;
  align-items: center;
  gap: 16px;
  cursor: pointer;
  transition: all var(--transition-base);
  font-size: 15px;
  font-weight: 500;
  color: var(--color-navy-dark);
}

.action-card:hover {
  border-color: var(--color-primary);
  background: var(--color-primary-light);
}

.action-icon {
  width: 24px;
  height: 24px;
  color: var(--color-primary);
}

.activity-list {
  background: var(--color-white);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  border: 1px solid var(--color-gray-100);
}

.activity-item {
  padding: 20px 24px;
  border-bottom: 1px solid var(--color-gray-100);
  display: flex;
  justify-content: space-between;
  align-items: start;
  gap: 12px;
}

.activity-icon {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.activity-icon.icon-payment { background: var(--color-success-light); color: var(--color-success); }
.activity-icon.icon-enrollment { background: var(--color-info-light); color: var(--color-primary); }

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

.activity-content {
  flex: 1;
}

.activity-title {
  font-size: 15px;
  font-weight: 600;
  color: var(--color-navy-dark);
  margin-bottom: 4px;
}

.activity-description {
  font-size: 14px;
  color: var(--color-gray-500);
}

.activity-time {
  font-size: 13px;
  color: var(--color-gray-400);
  white-space: nowrap;
  margin-left: 16px;
}

/* Dashboard Charts */
.charts-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
  margin-bottom: 32px;
}

.chart-card {
  background: var(--color-white);
  border-radius: 8px;
  box-shadow: var(--shadow-card);
  padding: 24px;
}

.chart-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.chart-title {
  font-size: 16px;
  font-weight: 600;
  color: var(--color-navy-dark);
  margin: 0;
}

.chart-subtitle {
  font-size: 12px;
  color: var(--color-gray-400);
}

.chart-container {
  position: relative;
  height: 280px;
}

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

/* ===== Landing Page Styles ===== */
.landing-body {
  background: var(--color-gray-50);
  min-height: 100vh;
  position: relative;
  overflow-x: hidden;
}

/* Background Image Slideshow */
.background-layer {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  z-index: 0;
  opacity: 0.12;
  filter: grayscale(0.35) saturate(0.8) contrast(1.05) brightness(0.95);
  transition: opacity 2s ease-in-out;
  pointer-events: none;
}

.background-layer-hidden {
  opacity: 0;
}

.has-background-slideshow {
  position: relative;
  overflow-x: hidden;
}

.has-background-slideshow > *:not(.background-layer):not(.dev-login-shortcut) {
  position: relative;
  z-index: 1;
}

.landing-body > *:not(.background-layer) {
  position: relative;
  z-index: 1;
}

.landing-header {
  background: var(--color-white);
  padding: 20px 0;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
  margin-bottom: 48px;
}

.landing-header-content {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 24px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.landing-logo {
  display: flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  color: inherit;
}

.landing-logo-icon {
  width: 40px;
  height: 40px;
  background: url("/logo.png") center/contain no-repeat;
  border-radius: 50%;
}

.landing-logo-text {
  font-size: 18px;
  font-weight: 600;
  color: var(--color-navy-dark);
}

.course-id {
  font-size: 14px;
  color: var(--color-gray-500);
}

.landing-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 24px 48px;
  display: grid;
  grid-template-columns: 1fr 400px;
  gap: 32px;
  align-items: start;
}

.course-info {
  background: var(--color-white);
  border-radius: var(--radius-lg);
  padding: 40px;
  box-shadow: var(--shadow-lg);
  border: 1px solid var(--color-gray-100);
}

.course-campus-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--color-gray-500);
  font-size: 13px;
  background: var(--color-gray-50);
  padding: 6px 14px;
  border-radius: var(--radius-lg);
  margin-bottom: 16px;
  font-weight: 500;
}

.course-campus-badge iconify-icon {
  color: var(--color-primary);
}

.course-title {
  font-family: var(--font-heading);
  font-size: 36px;
  font-weight: 400;
  color: var(--color-navy-dark);
  margin-bottom: 16px;
  line-height: 1.2;
}

.course-subtitle {
  margin: -6px 0 18px;
  font-size: 14px;
  font-weight: 500;
  color: var(--color-gray-500);
}

.course-meta {
  font-size: 14px;
  color: var(--color-gray-500);
  margin-bottom: 28px;
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.course-meta iconify-icon {
  color: var(--color-primary);
}

.meta-separator {
  color: var(--color-border-muted);
}

.seats-available {
  display: inline-flex;
  align-items: center;
  gap: 16px;
  background: linear-gradient(135deg, var(--color-blue-50) 0%, var(--color-blue-100) 100%);
  padding: 20px 28px;
  border-radius: var(--radius-lg);
  margin-bottom: 32px;
  border: 2px solid var(--color-blue-200);
}

.seats-icon {
  width: 48px;
  height: 48px;
  background: var(--color-white);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.seats-icon iconify-icon {
  color: var(--color-primary);
}

.seats-content {
  display: flex;
  flex-direction: column;
}

.seats-number {
  font-size: 32px;
  font-weight: 700;
  color: var(--color-primary-hover);
  line-height: 1;
  margin-bottom: 4px;
}

.seats-label {
  font-size: 12px;
  color: var(--color-primary-hover);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.section-heading {
  font-size: 20px;
  font-weight: 600;
  color: var(--color-navy-dark);
  margin-bottom: 16px;
}

.course-section {
  margin-bottom: 24px;
}

.course-rich-text {
  font-size: 15px;
  color: var(--color-navy-dark);
  line-height: 1.6;
}

.course-rich-text p,
.course-rich-text ul,
.course-rich-text ol,
.course-rich-text blockquote,
.course-rich-text h2,
.course-rich-text h3,
.course-rich-text h4 {
  margin: 0 0 12px;
}

.course-rich-text ul,
.course-rich-text ol {
  padding-left: 20px;
}

.course-rich-text a {
  color: var(--color-primary);
  text-decoration: underline;
}

.feature-list {
  list-style: none;
  margin-bottom: 16px;
}

.feature-list li {
  padding: 8px 0;
  padding-left: 8px;
  font-size: 15px;
  color: var(--color-navy-dark);
}

.feature-list li:before {
  content: "• ";
  color: var(--color-primary-hover);
  font-weight: bold;
  margin-right: 8px;
}

/* Features Grid */
.features-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  margin-top: 16px;
}

.feature-card {
  background: var(--color-gray-50);
  border: 1px solid var(--color-gray-100);
  border-radius: 8px;
  padding: 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 10px;
  transition: all 0.2s;
}

.feature-card:hover {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
  transform: translateY(-2px);
}

.feature-icon-circle {
  width: 48px;
  height: 48px;
  background: var(--color-info-light);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.feature-icon-circle iconify-icon {
  color: var(--color-primary);
}

.feature-icon-circle.icon-purple {
  background: var(--color-purple-50);
}

.feature-icon-circle.icon-purple iconify-icon {
  color: var(--color-purple-500);
}

.feature-icon-circle.icon-green {
  background: var(--color-success-light);
}

.feature-icon-circle.icon-green iconify-icon {
  color: var(--color-success);
}

.feature-icon-circle.icon-orange {
  background: var(--color-warning-light);
}

.feature-icon-circle.icon-orange iconify-icon {
  color: var(--color-warning);
}

.feature-card-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--color-navy-dark);
}

.feature-card-desc {
  font-size: 12px;
  color: var(--color-gray-500);
  line-height: 1.4;
}

.curriculum-note {
  font-size: 14px;
  color: var(--color-gray-500);
  line-height: 1.6;
}

.tuition-section {
  margin-top: 32px;
}

.pricing-grid {
  display: grid;
  gap: 16px;
}

.pricing-details {
  border: 1px solid var(--color-gray-100);
  border-radius: 8px;
  background: linear-gradient(135deg, var(--color-bg-subtle) 0%, var(--color-white) 100%);
  transition: all 0.2s;
}

.pricing-details:hover,
.pricing-details[open] {
  border-color: var(--color-primary);
  box-shadow: 0 2px 8px rgba(33, 150, 243, 0.1);
}

.pricing-details > summary {
  list-style: none;
  cursor: pointer;
}

.pricing-details > summary::-webkit-details-marker {
  display: none;
}

.pricing-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px;
  background: linear-gradient(135deg, var(--color-bg-subtle) 0%, var(--color-white) 100%);
  border: 1px solid var(--color-gray-100);
  border-radius: 8px;
  transition: all 0.2s;
}

.pricing-item:hover {
  border-color: var(--color-primary);
  box-shadow: 0 2px 8px rgba(33, 150, 243, 0.1);
}

.pricing-item-summary {
  margin: 0;
  border: 0;
  border-radius: 8px;
  background: transparent;
}

.pricing-item-summary:hover {
  border-color: transparent;
  box-shadow: none;
}

.pricing-label {
  flex: 1;
}

.pricing-title {
  font-size: 15px;
  font-weight: 600;
  color: var(--color-navy-dark);
  margin-bottom: 6px;
}

.pricing-dates {
  font-size: 12px;
  color: var(--color-gray-400);
}

.pricing-hint {
  margin-top: 8px;
  font-size: 12px;
  color: var(--color-gray-500);
}

.pricing-amount-group {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 6px;
}

.pricing-amount {
  font-size: 28px;
  font-weight: 700;
  color: var(--color-primary);
}

.pricing-link-text {
  font-size: 12px;
  font-weight: 600;
  color: var(--color-primary);
  text-decoration: underline;
}

.pricing-details-body {
  border-top: 1px solid var(--color-gray-100);
  background: var(--color-white);
  padding: 14px 20px 16px;
}

.pricing-detail-line {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  font-size: 14px;
  color: var(--color-navy-dark);
}

.pricing-details-note {
  margin: 10px 0 0;
  font-size: 13px;
  color: var(--color-gray-500);
  line-height: 1.5;
}

.application-card {
  background: var(--color-white);
  border-radius: var(--radius-lg);
  padding: 32px;
  box-shadow: var(--shadow-lg);
  position: sticky;
  top: 24px;
  border: 1px solid var(--color-gray-100);
}

.application-title {
  font-size: 20px;
  font-weight: 600;
  color: var(--color-navy-dark);
  margin-bottom: 8px;
}

.application-subtitle {
  font-size: 14px;
  color: var(--color-gray-500);
  margin-bottom: 24px;
  line-height: 1.5;
}

.application-next-step {
  margin-bottom: 16px;
  padding: 10px 12px;
  border-radius: 10px;
  background: var(--color-blue-50);
  border: 1px solid var(--color-blue-200);
  color: var(--color-navy-dark);
  font-size: 13px;
  line-height: 1.4;
}

.form-group {
  margin-bottom: 16px;
}

.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-bottom: 16px;
}

.form-row.checkbox-row {
  margin-bottom: 8px;
}

.form-input {
  width: 100%;
  padding: 16px 24px;
  border: 1px solid var(--color-gray-100);
  border-radius: var(--radius-full);
  font-size: var(--text-md);
  transition: all var(--transition-base);
  font-family: var(--font-body);
  background: var(--color-white);
}

.form-input:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(44, 154, 245, 0.15);
}

.btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 16px 28px;
  background: var(--color-primary);
  color: var(--color-white);
  border: none;
  border-radius: var(--radius-pill);
  font-size: var(--text-md);
  font-weight: 600;
  cursor: pointer;
  transition: all var(--transition-base);
  text-decoration: none;
}

/* Full-width primary buttons in application/landing forms */
.application-card .btn-primary {
  display: flex;
  width: 100%;
}

.btn-primary:hover {
  background: var(--color-primary-hover);
  transform: translateY(-1px);
  box-shadow: var(--shadow-lg);
}

.help-section {
  margin-top: 24px;
  padding-top: 24px;
  border-top: 1px solid var(--color-gray-100);
  text-align: center;
}

.help-text {
  font-size: var(--text-sm);
  color: var(--color-gray-500);
  margin-bottom: 8px;
}

.help-link {
  color: var(--color-primary);
  text-decoration: none;
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: var(--text-base);
}

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

.contact-icon {
  width: 16px;
  height: 16px;
}

/* Account Creation Page (Magic Link Sent) */
.landing-container-centered {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: calc(100vh - 80px);
  padding: 24px;
}

.account-creation-card {
  max-width: 480px;
  text-align: center;
}

.email-sent-icon {
  width: 80px;
  height: 80px;
  background: linear-gradient(135deg, var(--color-blue-50) 0%, var(--color-blue-100) 100%);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 24px;
  color: var(--color-primary);
}

.instruction-text {
  font-size: 14px;
  color: var(--color-gray-500);
  margin-bottom: 24px;
  line-height: 1.6;
}

.debug-panel {
  background: var(--color-warning-light);
  border: 2px solid var(--color-amber-500);
  border-radius: 8px;
  padding: 16px;
  margin: 20px 0;
  text-align: left;
}

.debug-header {
  font-weight: 600;
  color: var(--color-warning);
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}

.debug-text {
  font-size: 13px;
  color: var(--color-warning);
  margin-bottom: 8px;
}

.debug-link {
  word-break: break-all;
  font-size: 12px;
  color: var(--color-blue-900);
  font-family: monospace;
}

.account-creation-actions {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 24px;
}

.btn-secondary {
  background: var(--color-gray-50);
  color: var(--color-navy-dark);
  border: 1px solid var(--color-gray-200);
  padding: 12px 24px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s;
}

.btn-secondary:hover {
  background: var(--color-gray-100);
  border-color: var(--color-text-disabled);
}

.btn-link {
  background: none;
  border: none;
  color: var(--color-primary);
  font-size: 14px;
  cursor: pointer;
  text-decoration: none;
}

.btn-link:hover {
  text-decoration: underline;
}

.flash-notice {
  background: var(--color-success-light);
  color: var(--color-green-900);
  padding: 12px 16px;
  border-radius: 8px;
  margin-bottom: 16px;
  font-size: 14px;
}

.flash-error {
  background: var(--color-error-light);
  color: var(--color-red-900);
  padding: 12px 16px;
  border-radius: 8px;
  margin-bottom: 16px;
  font-size: 14px;
}

.form-validation-error {
  background: #fee2e2;
  border: 1px solid #fca5a5;
  border-radius: 12px;
  padding: 12px 16px;
  margin-bottom: 16px;
  color: #dc2626;
  font-size: 14px;
  display: flex;
  align-items: center;
  gap: 10px;
}

/* Toast Notifications */
.toast-container {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 10000;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.toast {
  padding: 12px 16px;
  border-radius: 8px;
  font-size: 14px;
  max-width: 400px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  animation: toast-slide-in 0.3s ease-out;
  display: flex;
  align-items: flex-start;
  gap: 10px;
}

.toast.toast-info {
  background: var(--color-blue-50);
  border: 1px solid var(--color-blue-200);
  color: var(--color-blue-900);
}

.toast.toast-warning {
  background: var(--color-orange-50);
  border: 1px solid var(--color-orange-200);
  color: var(--color-orange-900);
}

.toast.toast-error {
  background: var(--color-red-50);
  border: 1px solid var(--color-red-200);
  color: var(--color-red-900);
}

.toast.toast-success {
  background: var(--color-green-50);
  border: 1px solid var(--color-green-200);
  color: var(--color-green-900);
}

.toast-icon {
  flex-shrink: 0;
  font-size: 16px;
}

.toast-content {
  flex: 1;
}

.toast-title {
  font-weight: 600;
  margin-bottom: 2px;
}

.toast-message {
  opacity: 0.9;
}

.toast.toast-fade-out {
  animation: toast-fade-out 0.3s ease-in forwards;
}

@keyframes toast-slide-in {
  from {
    opacity: 0;
    transform: translateX(100%);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes toast-fade-out {
  from {
    opacity: 1;
    transform: translateX(0);
  }
  to {
    opacity: 0;
    transform: translateX(100%);
  }
}

.form-hint {
  display: block;
  font-size: 12px;
  color: var(--color-gray-400);
  margin-top: 6px;
}

/* Landing Page Responsive */
@media (max-width: 968px) {
  .landing-container {
    grid-template-columns: 1fr;
    gap: 24px;
  }

  .application-card {
    position: static;
  }

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

@media (max-width: 768px) {
  .course-info {
    padding: 24px;
  }

  .course-title {
    font-size: 28px;
  }

  .course-highlights {
    grid-template-columns: 1fr;
  }

  .form-row {
    grid-template-columns: 1fr;
  }
}

/* ===== Students Page Styles ===== */
.students-page {
}

.page-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 24px;
  flex-wrap: wrap;
  gap: 16px;
}

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

.search-filters {
  display: flex;
  gap: 12px;
  align-items: center;
}

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

.search-icon {
  position: absolute;
  left: 12px;
  color: var(--color-gray-500);
  width: 18px;
  height: 18px;
}

.search-input {
  padding: 10px 12px 10px 36px;
  border: 1px solid var(--color-gray-200);
  border-radius: var(--radius-sm);
  font-size: 14px;
  width: 300px;
  transition: border-color 0.2s;
}

.search-input:focus {
  outline: none;
  border-color: var(--color-primary);
}

.filter-dropdown {
  display: flex;
  align-items: center;
}

.filter-dropdown .filter-select {
  display: inline-block;
  padding: 10px 36px 10px 12px;
  border: 1px solid var(--color-gray-200);
  border-radius: var(--radius-sm);
  font-size: 14px;
  background: var(--color-white);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23666' d='M6 9L1 4h10z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 12px;
  min-width: 150px;
  cursor: pointer;
  transition: border-color 0.2s;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
}

.filter-dropdown .filter-select:focus {
  outline: none;
  border-color: var(--color-primary);
}

.btn-filters {
  padding: 10px 16px;
  border: 1px solid var(--color-gray-200);
  background: var(--color-white);
  border-radius: var(--radius-sm);
  font-size: 14px;
  cursor: pointer;
  transition: all 0.2s;
}

.btn-filters:hover {
  background: var(--color-gray-50);
  border-color: var(--color-primary);
}

.header-actions {
  display: flex;
  gap: 12px;
}

.btn-secondary {
  display: inline-flex;
  padding: 10px 16px;
  border: 1px solid var(--color-gray-200);
  background: var(--color-white);
  border-radius: var(--radius-sm);
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s;
  align-items: center;
  gap: 6px;
}

.btn-secondary:hover {
  background: var(--color-gray-50);
}

.students-count {
  font-size: 14px;
  color: var(--color-gray-500);
  margin-bottom: 16px;
}

.students-table-container {
  background: var(--color-white);
  border-radius: 8px;
  box-shadow: var(--shadow-card);
  overflow: hidden;
}

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

.students-table thead {
  background: var(--color-gray-50);
  border-bottom: 2px solid var(--color-gray-200);
}

.students-table th {
  padding: 12px 16px;
  text-align: left;
  font-size: 11px;
  font-weight: 600;
  color: var(--color-gray-500);
  letter-spacing: 0.5px;
}

.student-row {
  border-bottom: 1px solid var(--color-gray-100);
  cursor: pointer;
  transition: background 0.2s;
}

.student-row:hover {
  background: var(--color-primary-light);
}

.student-row.placeholder-row {
  opacity: 0.6;
}

.students-table td {
  padding: 16px;
}

.student-cell {
  display: flex;
  align-items: center;
  gap: 12px;
}

.student-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--color-gray-200);
}

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

.student-name {
  font-weight: 500;
  color: var(--color-navy-dark);
  font-size: 14px;
}

.student-email {
  font-size: 13px;
  color: var(--color-gray-500);
}

.course-name {
  font-size: 14px;
  color: var(--color-navy-dark);
}

.status-badge {
  display: inline-block;
  padding: 4px 12px;
  border-radius: var(--radius-lg);
  font-size: 12px;
  font-weight: 500;
}

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

.status-draft {
  background: var(--color-yellow-50);
  color: var(--color-yellow-700);
}

.status-graduated {
  background: var(--color-info-light);
  color: var(--color-primary-hover);
}

.status-withdrawn {
  background: var(--color-pink-50);
  color: var(--color-pink-700);
}

.balance-amount {
  font-size: 14px;
  font-weight: 500;
  color: var(--color-error);
}

.balance-warning {
  color: var(--color-warning);
}

.payment-status {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
}

.payment-onfile {
  color: var(--color-success);
}

.payment-none {
  color: var(--color-gray-500);
}

.payment-icon {
  font-size: 16px;
}

.btn-actions {
  background: none;
  border: none;
  font-size: 20px;
  cursor: pointer;
  padding: 4px 8px;
  color: var(--color-gray-500);
  transition: color 0.2s;
}

.btn-actions:hover {
  color: var(--color-primary);
}

/* Actions Dropdown */
.actions-dropdown {
  position: relative;
  display: inline-block;
}

.actions-dropdown-menu {
  display: none;
  background: var(--color-white);
  border: 1px solid var(--color-gray-100);
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  min-width: 160px;
  z-index: 9999;
  padding: 4px 0;
}

.dropdown-item {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 10px 16px;
  background: none;
  border: none;
  text-align: left;
  font-size: 14px;
  color: var(--color-navy-dark);
  cursor: pointer;
  transition: background 0.2s;
}

.dropdown-item:hover {
  background: var(--color-gray-50);
}

.dropdown-item iconify-icon {
  width: 16px;
  height: 16px;
}

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

.dropdown-item-danger:hover {
  background: var(--color-error-light);
}

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

.dropdown-item-warning:hover {
  background: var(--color-warning-light, rgba(255, 152, 0, 0.1));
}

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

.dropdown-item-success:hover {
  background: var(--color-success-light, rgba(76, 175, 80, 0.1));
}

/* Make button_to forms inline in dropdowns */
.dropdown-item-form {
  display: inline;
  margin: 0;
  padding: 0;
}

/* Student Detail Page */
.student-detail-page {
  max-width: 1400px;
}

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

.student-detail-container {
  display: grid;
  grid-template-columns: 350px 1fr;
  gap: 24px;
  align-items: start;
}

.student-profile-card {
  background: var(--color-white);
  border-radius: 8px;
  padding: 24px;
  box-shadow: var(--shadow-card);
  position: sticky;
  top: 24px;
}

.profile-header {
  display: flex;
  align-items: center;
  gap: 16px;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--color-gray-100);
  margin-bottom: 20px;
}

.profile-avatar-large {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: var(--color-gray-200);
}

.profile-info {
  flex: 1;
}

.profile-name {
  font-size: 20px;
  font-weight: 600;
  color: var(--color-navy-dark);
  margin-bottom: 8px;
}

.profile-details {
  margin-bottom: 24px;
}

.profile-detail-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 0;
  font-size: 14px;
  color: var(--color-navy-dark);
}

.detail-icon {
  font-size: 16px;
  width: 20px;
}

.detail-text {
  flex: 1;
}

.student-profile-card .progress-steps {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  padding: 16px 0;
  border-top: 1px solid var(--color-gray-100);
  border-bottom: 1px solid var(--color-gray-100);
  margin-bottom: 20px;
  gap: 4px;
}

.student-profile-card .progress-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  flex: 1;
  min-width: 0;
}

.student-profile-card .progress-step .step-line {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--color-gray-200);
  border: 2px solid var(--color-gray-200);
  flex-shrink: 0;
}

.student-profile-card .progress-step.completed .step-line {
  background: var(--color-primary);
  border-color: var(--color-primary);
}

.student-profile-card .progress-step.active .step-line {
  background: var(--color-white);
  border-color: var(--color-primary);
}

.student-profile-card .step-label {
  font-size: 9px;
  color: var(--color-gray-500);
  text-align: center;
  line-height: 1.2;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.student-profile-card .progress-step.completed .step-label {
  color: var(--color-navy-dark);
  font-weight: 500;
}

.demo-badge {
  position: absolute;
  top: -10px;
  right: 0;
  background: var(--color-warning);
  color: white;
  font-size: 10px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: var(--radius-lg);
}

.info-cards-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.info-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px;
  border-radius: var(--radius-sm);
  background: var(--color-gray-50);
}

.card-balance {
  background: var(--color-error-light);
}

.card-payment {
  background: var(--color-success-light);
}

.card-documents {
  background: var(--color-info-light);
}

.card-activities {
  background: var(--color-warning-light);
}

.card-icon {
  font-size: 24px;
}

.card-content {
  flex: 1;
}

.card-label {
  font-size: 12px;
  color: var(--color-gray-500);
  margin-bottom: 4px;
}

.card-value {
  font-size: 18px;
  font-weight: 600;
  color: var(--color-navy-dark);
}

.student-content {
  background: var(--color-white);
  border-radius: 8px;
  box-shadow: var(--shadow-card);
  overflow: hidden;
}

.student-tabs {
  display: flex;
  border-bottom: 2px solid var(--color-gray-100);
  padding: 0 24px;
  gap: 8px;
}

.tab-button {
  padding: 14px 20px;
  border: none;
  background: none;
  font-size: var(--text-base);
  font-weight: 500;
  color: var(--color-gray-500);
  cursor: pointer;
  border-bottom: 3px solid transparent;
  margin-bottom: -2px;
  transition: all var(--transition-base);
}

.tab-button.active {
  color: var(--color-primary);
  border-bottom-color: var(--color-primary);
}

.tab-button:hover {
  color: var(--color-primary-hover);
  background: var(--color-primary-light);
}

.tab-content {
  padding: 32px 24px;
}

.content-section {
  margin-bottom: 32px;
}

.section-heading {
  font-size: 16px;
  font-weight: 600;
  color: var(--color-navy-dark);
  margin-bottom: 16px;
}

.info-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
}

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

.info-field label {
  font-size: 13px;
  font-weight: 500;
  color: var(--color-gray-500);
  margin-bottom: 6px;
}

.info-value {
  font-size: 14px;
  color: var(--color-navy-dark);
}

/* Tab Switching */
.hidden {
  display: none !important;
}

/* Section Header with Button */
.section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
}

/* Enrollment Cards */
.enrollment-card {
  background: var(--color-white);
  border: 1px solid var(--color-gray-100);
  border-radius: 8px;
  padding: 20px;
  margin-bottom: 16px;
}

.enrollment-header {
  display: flex;
  flex-wrap: wrap;
  row-gap: 8px;
  justify-content: space-between;
  align-items: center;
}

.enrollment-title {
  font-size: 16px;
  font-weight: 600;
  color: var(--color-navy-dark);
  margin-bottom: 8px;
}

.enrollment-meta {
  display: flex;
  gap: 16px;
  font-size: 13px;
  color: var(--color-gray-500);
  flex-wrap: wrap;
}

.career-badge {
  background: var(--color-info-light);
  color: var(--color-primary-hover);
  padding: 2px 8px;
  border-radius: var(--radius-lg);
  font-size: 11px;
  font-weight: 500;
}

.enrollment-progress {
  margin-bottom: 16px;
}

.progress-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}

.progress-label {
  font-size: 13px;
  font-weight: 500;
  color: var(--color-gray-500);
}

.progress-percentage {
  font-size: 13px;
  font-weight: 600;
  color: var(--color-primary-hover);
}

.progress-bar {
  height: 8px;
  background: var(--color-gray-200);
  border-radius: 10px;
  overflow: hidden;
}

.progress-bar.large {
  height: 12px;
}

.progress-fill {
  height: 100%;
  width: var(--progress, 0%);
  background: linear-gradient(90deg, var(--color-primary) 0%, var(--color-primary-hover) 100%);
  transition: width 0.3s;
}

.enrollment-details {
  display: flex;
  gap: 24px;
  align-items: center;
}

.enrollment-detail {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

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

.detail-value {
  font-size: 14px;
  font-weight: 500;
  color: var(--color-navy-dark);
}

.link-primary {
  color: var(--color-primary);
  text-decoration: none;
  font-size: 14px;
  font-weight: 500;
  margin-left: auto;
}

/* Canvas Score & Attendance Stats - Inline in enrollment header */
.enrollment-canvas-stats-inline {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  row-gap: 8px;
  margin-left: auto;
  margin-right: 24px;
  align-items: center;
}

.canvas-stat-inline {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
}

.canvas-stat-inline-label {
  font-size: 11px;
  font-weight: 600;
  color: var(--color-gray-500);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.canvas-stat-inline-value {
  font-size: 13px;
  font-weight: 500;
  color: var(--color-gray-700);
}

.canvas-stat-inline-percent {
  font-size: 12px;
  font-weight: 600;
  color: var(--color-primary-hover);
}

.link-primary:hover {
  text-decoration: underline;
}

/* Completed Enrollment Card */
.completed-enrollment-card {
  background: var(--color-gray-50);
  border: 1px solid var(--color-gray-100);
  border-radius: 8px;
  padding: 20px;
  margin-bottom: 16px;
}

.completed-header {
  display: flex;
  justify-content: space-between;
  align-items: start;
  margin-bottom: 16px;
}

.completion-badges {
  display: flex;
  gap: 8px;
}

.grade-badge {
  background: var(--color-success-light);
  color: var(--color-success);
  padding: 4px 12px;
  border-radius: var(--radius-lg);
  font-size: 12px;
  font-weight: 500;
}

.status-completed {
  background: var(--color-info-light);
  color: var(--color-primary-hover);
}

.completion-details {
  display: flex;
  gap: 24px;
  align-items: center;
}

.completion-detail {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.certificate-issued {
  color: var(--color-success);
}

/* Application Cards */
.application-card {
  background: var(--color-white);
  border: 1px solid var(--color-gray-100);
  border-radius: 8px;
  padding: 20px;
  margin-bottom: 16px;
}

.application-header {
  display: flex;
  justify-content: space-between;
  align-items: start;
  margin-bottom: 12px;
}

.application-title {
  font-size: 15px;
  font-weight: 600;
  color: var(--color-navy-dark);
  margin-bottom: 8px;
}

.application-meta {
  display: flex;
  gap: 16px;
  font-size: 13px;
  color: var(--color-gray-500);
  flex-wrap: wrap;
}

.application-notes {
  font-size: 14px;
  color: var(--color-gray-500);
  line-height: 1.5;
  margin-bottom: 12px;
}

.application-footer {
  display: flex;
  justify-content: flex-end;
}

.reviewer-text {
  font-size: 12px;
  color: var(--color-gray-400);
}

.status-approved {
  background: var(--color-success-light);
  color: var(--color-success);
}

.status-pending {
  background: var(--color-warning-light);
  color: var(--color-warning);
}

/* Payment Progress Card */
.payment-progress-card {
  background: var(--color-white);
  border: 1px solid var(--color-gray-100);
  border-radius: 8px;
  padding: 24px;
}

.payment-amounts {
  display: flex;
  justify-content: space-between;
  margin-top: 12px;
  font-size: 14px;
}

.amount-paid {
  color: var(--color-success);
  font-weight: 500;
}

.amount-total {
  color: var(--color-gray-500);
  font-weight: 500;
}

/* Payment Plan Section */
.payment-plan-section {
  margin-top: 32px;
}

.plan-quick-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  margin-bottom: 32px;
}

.current-plan-card {
  background: var(--color-white);
  border: 1px solid var(--color-gray-100);
  border-radius: 8px;
  padding: 24px;
}

.plan-details {
  margin-bottom: 20px;
}

.plan-status {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 16px;
}

.plan-info-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.plan-info-grid > div {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.plan-amount {
  font-size: 20px;
  font-weight: 600;
  color: var(--color-navy-dark);
}

.plan-due-date {
  font-size: 15px;
  font-weight: 500;
  color: var(--color-navy-dark);
}

.btn-replace {
  width: 100%;
  padding: 10px;
  background: var(--color-gray-50);
  border: 1px solid var(--color-gray-200);
  border-radius: var(--radius-sm);
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s;
}

.btn-replace:hover {
  background: var(--color-gray-200);
}

/* Payment Plan Tabs */
.payment-plan-tabs {
  display: flex;
  gap: 0;
  margin-bottom: 20px;
}

.payment-plan-tab {
  padding: 8px 16px;
  background: white;
  border: 1px solid var(--color-border);
  font-size: 14px;
  font-weight: 400;
  color: var(--color-text-secondary);
  cursor: pointer;
  transition: all 0.2s;
}

.payment-plan-tab:first-child {
  border-radius: 4px 0 0 4px;
}

.payment-plan-tab:last-child {
  border-radius: 0 4px 4px 0;
  border-left: none;
}

.payment-plan-tab.active {
  background: var(--color-info-light);
  border-color: var(--color-blue-500);
  color: var(--color-text-primary);
  font-weight: 500;
}

.payment-plan-tab:hover:not(.active) {
  background: var(--color-bg-light);
}

/* Plan Tab Content */
.plan-tab-content {
  /* Shown by default */
}

.plan-tab-content.hidden {
  display: none;
}

.plan-status-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  margin-bottom: 16px;
}

.status-badge.status-inactive {
  background: var(--color-red-50);
  color: var(--color-red-700);
  border: 1px solid var(--color-red-100);
}

.plan-course {
  margin-top: 16px;
}

.btn-course-badge {
  background: var(--color-blue-50);
  color: var(--color-blue-700);
  border: none;
  padding: 8px 20px;
  border-radius: 4px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s;
}

.btn-course-badge:hover {
  background: var(--color-blue-100);
}

/* Quick Actions Card */
.quick-actions-card {
  background: var(--color-white);
  border: 1px solid var(--color-gray-100);
  border-radius: 8px;
  padding: 24px;
}

.action-item {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px 0;
  border-bottom: 1px solid var(--color-gray-100);
  cursor: pointer;
  transition: background 0.2s;
}

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

.action-item:hover {
  background: var(--color-primary-light);
  margin: 0 -12px;
  padding-left: 12px;
  padding-right: 12px;
  border-radius: var(--radius-sm);
}

.action-icon {
  width: 40px;
  height: 40px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
}

.action-charge {
  background: var(--color-success-light);
}

.action-plan {
  background: var(--color-info-light);
}

.action-contact {
  background: var(--color-pink-50);
}

.action-content {
  flex: 1;
}

.action-title {
  font-size: 14px;
  font-weight: 500;
  color: var(--color-navy-dark);
  margin-bottom: 2px;
}

.action-description {
  font-size: 12px;
  color: var(--color-gray-500);
}

/* Payment Schedule Table */
.payment-schedule-table {
  width: 100%;
  background: var(--color-white);
  border: 1px solid var(--color-gray-100);
  border-radius: 8px;
  border-collapse: collapse;
  overflow: hidden;
}

.payment-schedule-table thead {
  background: var(--color-gray-50);
}

.payment-schedule-table th {
  padding: 12px 16px;
  text-align: left;
  font-size: 11px;
  font-weight: 600;
  color: var(--color-gray-500);
  letter-spacing: 0.5px;
  border-bottom: 1px solid var(--color-gray-100);
}

.payment-schedule-table td {
  padding: 16px;
  font-size: 14px;
  color: var(--color-navy-dark);
  border-bottom: 1px solid var(--color-gray-100);
}

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

.payment-status-badge {
  display: inline-block;
  padding: 4px 12px;
  border-radius: var(--radius-lg);
  font-size: 12px;
  font-weight: 500;
}

.payment-status-badge.paid {
  background: var(--color-success-light);
  color: var(--color-success);
}

.payment-status-badge.failed {
  background: var(--color-error-light);
  color: var(--color-error);
}

.payment-status-badge.scheduled {
  background: var(--color-info-light);
  color: var(--color-primary-hover);
}

.payment-status-badge.covered {
  background: var(--color-green-100, #c8e6c9);
  color: var(--color-green-900, #1b5e20);
}

.payment-status-badge.overdue {
  background: var(--color-error-light, #ffebee);
  color: var(--color-error, #ef4444);
}

.reference-text {
  font-family: monospace;
  font-size: 12px;
  color: var(--color-gray-400);
}

.scheduled-text {
  color: var(--color-gray-400);
  font-size: 13px;
}

.plan-badge {
  display: inline-block;
  padding: 4px 10px;
  border-radius: var(--radius-lg);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.3px;
}

.plan-badge.old-plan {
  background: var(--color-bg-light);
  color: var(--color-text-secondary);
}

.plan-badge.new-plan {
  background: var(--color-blue-50);
  color: var(--color-blue-700);
}

.payment-plan-separator {
  background: var(--color-bg-lighter);
  border-top: 2px solid var(--color-border);
  border-bottom: 2px solid var(--color-border);
}

.payment-plan-separator td {
  padding: 16px;
}

.separator-content {
  display: flex;
  align-items: center;
  gap: 12px;
  justify-content: center;
}

.separator-icon {
  font-size: 18px;
  color: var(--color-blue-500);
}

.separator-text {
  font-weight: 600;
  font-size: 14px;
  color: var(--color-text-primary);
}

.separator-date {
  font-size: 12px;
  color: var(--color-text-secondary);
  padding-left: 12px;
  border-left: 1px solid var(--color-border-muted);
}

.payment-note {
  font-size: 12px;
  color: var(--color-text-secondary);
  font-style: italic;
}

/* Transfer Scenario Toggle */
.transfer-scenario-toggle {
  display: flex;
  align-items: center;
  gap: 12px;
}

.toggle-label {
  font-size: 13px;
  font-weight: 500;
  color: var(--color-text-secondary);
}

.scenario-btn {
  padding: 8px 16px;
  border: 2px solid var(--color-border);
  background: white;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 500;
  color: var(--color-text-secondary);
  cursor: pointer;
  transition: all 0.2s;
}

.scenario-btn:hover {
  border-color: var(--color-blue-500);
  background: var(--color-info-light);
  color: var(--color-blue-500);
}

.scenario-btn.active {
  border-color: var(--color-blue-500);
  background: var(--color-blue-500);
  color: white;
}

/* Account Ledger Tab */
.ledger-summary-cards {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-bottom: 32px;
}

.ledger-summary-card {
  background: var(--color-white);
  border: 1px solid var(--color-gray-100);
  border-radius: 8px;
  padding: 20px;
  display: flex;
  align-items: center;
  gap: 16px;
}

.ledger-summary-card.card-charges {
  border-left: 4px solid var(--color-blue-500);
}

.ledger-summary-card.card-payments {
  border-left: 4px solid var(--color-green-500);
}

.ledger-summary-card.card-balance {
  border-left: 4px solid var(--color-orange-500);
}

.ledger-summary-card.card-failed {
  border-left: 4px solid var(--color-red-500);
}

.summary-icon {
  font-size: 28px;
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  background: var(--color-gray-50);
}

.summary-content {
  flex: 1;
}

.summary-label {
  font-size: 13px;
  color: var(--color-gray-500);
  margin-bottom: 4px;
}

.summary-value {
  font-size: 24px;
  font-weight: 700;
  color: var(--color-navy-dark);
}

.ledger-actions {
  display: flex;
  gap: 8px;
}

.ledger-table {
  width: 100%;
  background: var(--color-white);
  border: 1px solid var(--color-gray-100);
  border-radius: 8px;
  border-collapse: collapse;
  overflow: hidden;
}

.ledger-table thead {
  background: var(--color-gray-50);
}

.ledger-table th {
  padding: 12px 16px;
  text-align: left;
  font-size: 11px;
  font-weight: 600;
  color: var(--color-gray-500);
  letter-spacing: 0.5px;
  border-bottom: 1px solid var(--color-gray-100);
}

.ledger-table td {
  padding: 16px;
  font-size: 14px;
  color: var(--color-navy-dark);
  border-bottom: 1px solid var(--color-gray-100);
}

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

.type-badge {
  display: inline-block;
  padding: 4px 12px;
  border-radius: var(--radius-lg);
  font-size: 12px;
  font-weight: 500;
}

.type-charge {
  background: var(--color-info-light);
  color: var(--color-primary-hover);
}

.type-payment {
  background: var(--color-success-light);
  color: var(--color-success);
}

.type-adjustment {
  background: var(--color-warning-light);
  color: var(--color-warning);
}

.type-tuition {
  background: var(--color-info-light);
  color: var(--color-primary-hover);
}

.ledger-description {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.description-meta {
  font-size: 12px;
  color: var(--color-gray-400);
  line-height: 1.4;
}

.amount-debit {
  color: var(--color-error);
  font-weight: 500;
}

.amount-credit {
  color: var(--color-success);
  font-weight: 500;
}

.status-posted {
  color: var(--color-success);
  font-size: 13px;
}

.ledger-notes {
  margin-top: 24px;
  padding: 20px;
  background: var(--color-gray-50);
  border-radius: 8px;
  border-left: 4px solid var(--color-blue-500);
}

.ledger-notes h4 {
  font-size: 14px;
  font-weight: 600;
  color: var(--color-navy-dark);
  margin-bottom: 8px;
}

.notes-content {
  font-size: 14px;
  color: var(--color-gray-500);
  line-height: 1.5;
  margin: 0;
}

/* Documents Tab */
.document-actions {
  display: flex;
  gap: 8px;
}

.documents-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.document-item {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 20px;
  background: var(--color-white);
  border: 1px solid var(--color-gray-100);
  border-radius: 8px;
  transition: all 0.2s;
}

.document-item:hover {
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.document-icon {
  font-size: 32px;
  width: 48px;
  text-align: center;
}

.document-info {
  flex: 1;
}

.document-name {
  font-size: 15px;
  font-weight: 500;
  color: var(--color-navy-dark);
  margin-bottom: 4px;
}

.document-date {
  font-size: 13px;
  color: var(--color-gray-500);
}

.doc-status-badge {
  padding: 4px 12px;
  border-radius: var(--radius-lg);
  font-size: 12px;
  font-weight: 500;
}

.doc-completed {
  background: var(--color-success-light);
  color: var(--color-success);
}

.doc-generated {
  background: var(--color-info-light);
  color: var(--color-primary-hover);
}

.btn-download {
  width: 36px;
  height: 36px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--color-gray-200);
  background: var(--color-white);
  font-size: 16px;
  cursor: pointer;
  transition: all 0.2s;
}

.btn-download:hover {
  background: var(--color-gray-50);
  border-color: var(--color-primary);
}

/* Activity Tab */
.activity-feed {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.activity-item-feed {
  display: flex;
  align-items: start;
  gap: 16px;
  padding: 16px;
  background: var(--color-white);
  border: 1px solid var(--color-gray-100);
  border-radius: 8px;
}

.activity-icon-circle {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--color-info-light);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  flex-shrink: 0;
}

.activity-content-feed {
  flex: 1;
}

.activity-title-feed {
  font-size: 14px;
  font-weight: 500;
  color: var(--color-navy-dark);
  margin-bottom: 4px;
}

.activity-meta-feed {
  font-size: 13px;
  color: var(--color-gray-500);
}

/* ===== Instructors Page Styles ===== */
.instructors-page {
}

.instructors-table-container {
  background: var(--color-white);
  border-radius: 8px;
  box-shadow: var(--shadow-card);
  overflow: hidden;
}

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

.instructors-table thead {
  background: var(--color-gray-50);
  border-bottom: 2px solid var(--color-gray-200);
}

.instructors-table th {
  padding: 12px 16px;
  text-align: left;
  font-size: 11px;
  font-weight: 600;
  color: var(--color-gray-500);
  letter-spacing: 0.5px;
}

.instructor-row {
  border-bottom: 1px solid var(--color-gray-100);
  cursor: pointer;
  transition: background 0.2s;
}

.instructor-row:hover {
  background: var(--color-primary-light);
}

.instructor-row.placeholder-row {
  opacity: 0.6;
  cursor: default;
}

.instructors-table td {
  padding: 16px;
}

.instructor-cell {
  display: flex;
  align-items: center;
  gap: 12px;
}

.instructor-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--color-info-light);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
}

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

.instructor-name {
  font-weight: 500;
  color: var(--color-navy-dark);
  font-size: 14px;
}

.instructor-email {
  font-size: 13px;
  color: var(--color-gray-500);
}

.teaching-badge {
  font-size: 13px;
  color: var(--color-primary-hover);
}

.teaching-empty {
  color: var(--color-text-disabled);
  font-size: 14px;
}

.campus-text {
  font-size: 13px;
  color: var(--color-gray-500);
}

.canvas-enrollments {
  font-size: 13px;
  color: var(--color-gray-500);
}

.status-training {
  background: var(--color-info-light);
  color: var(--color-primary-hover);
}

.status-pending {
  background: var(--color-warning-light);
  color: var(--color-warning);
}

.status-inactive {
  background: var(--color-gray-50);
  color: var(--color-gray-400);
}

.status-draft {
  background: var(--color-yellow-50);
  color: var(--color-yellow-700);
}

/* Instructor Detail Page */
.instructor-detail-page {
  max-width: 1400px;
}

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

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

.instructor-header-avatar {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: var(--color-info-light);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 32px;
}

.instructor-email-header {
  font-size: 14px;
  color: var(--color-gray-500);
  margin-top: 4px;
}

.btn-secondary-outline {
  padding: 10px 20px;
  border: 1px solid var(--color-gray-200);
  background: var(--color-white);
  border-radius: var(--radius-sm);
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s;
}

.btn-secondary-outline:hover {
  background: var(--color-gray-50);
}

.btn-danger {
  padding: 10px 20px;
  border: 1px solid var(--color-red-500);
  background: var(--color-white);
  color: var(--color-error);
  border-radius: var(--radius-sm);
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s;
}

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

.instructor-tabs {
  display: flex;
  gap: 8px;
  border-bottom: 2px solid var(--color-border-light);
  margin-bottom: 32px;
}

.instructor-tab-content {
  display: block;
}

.instructor-content-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
}

.instructor-detail-card {
  background: var(--color-white);
  border: 1px solid var(--color-gray-100);
  border-radius: 8px;
  padding: 24px;
}

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

.card-heading {
  font-size: 16px;
  font-weight: 600;
  color: var(--color-navy-dark);
  margin: 0 0 20px 0;
}

.btn-icon-edit {
  background: none;
  border: none;
  font-size: 18px;
  cursor: pointer;
  padding: 4px;
  transition: transform 0.2s;
}

.btn-icon-edit:hover {
  transform: scale(1.1);
}

.detail-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 16px;
}

.detail-field label {
  font-size: 13px;
  font-weight: 500;
  color: var(--color-gray-500);
}

.photo-upload-area {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.photo-placeholder {
  width: 200px;
  height: 200px;
  border: 2px dashed var(--color-border-muted);
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin: 0 auto;
  background: var(--color-gray-50);
}

.photo-icon {
  font-size: 48px;
  margin-bottom: 12px;
  opacity: 0.3;
}

.photo-text {
  font-size: 13px;
  color: var(--color-gray-400);
  text-align: center;
  line-height: 1.5;
}

.upload-section {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.upload-label {
  font-size: 14px;
  font-weight: 500;
  color: var(--color-navy-dark);
}

.upload-controls {
  display: flex;
  align-items: center;
  gap: 12px;
}

.btn-upload {
  padding: 8px 16px;
  border: 1px solid var(--color-gray-200);
  background: var(--color-white);
  border-radius: var(--radius-sm);
  font-size: 13px;
  cursor: pointer;
  transition: all 0.2s;
}

.btn-upload:hover {
  background: var(--color-gray-50);
}

.file-chosen {
  font-size: 13px;
  color: var(--color-gray-400);
}

.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 40px 20px;
  text-align: center;
}

.empty-icon {
  font-size: 48px;
  margin-bottom: 12px;
  opacity: 0.3;
}

.empty-icon-large { font-size: 48px; }
.empty-icon-muted { opacity: 0.3; }

.empty-text {
  font-size: 14px;
  color: var(--color-gray-400);
}

.empty-subtext {
  font-size: 13px;
  color: var(--color-text-muted);
  margin-top: 4px;
}

.empty-text-small {
  font-size: 13px;
  color: var(--color-gray-400);
  padding: 12px 0;
}

.campus-value {
  font-size: 14px;
  color: var(--color-navy-dark);
}

.additional-campuses {
  margin: 16px 0;
}

.campus-links {
  margin-top: 20px;
  padding-top: 20px;
  border-top: 1px solid var(--color-gray-100);
}

.links-label {
  font-size: 13px;
  font-weight: 500;
  color: var(--color-gray-500);
  margin-bottom: 12px;
}

.course-link {
  display: block;
  padding: 10px 12px;
  background: var(--color-gray-50);
  border-radius: var(--radius-sm);
  color: var(--color-primary-hover);
  text-decoration: none;
  font-size: 14px;
  margin-bottom: 8px;
  transition: all 0.2s;
}

.course-link:hover {
  background: var(--color-info-light);
}

/* Teaching Assignment Card */
.teaching-assignment-card {
  background: var(--color-white);
  border: 1px solid var(--color-gray-100);
  border-radius: 8px;
  padding: 20px;
  margin-bottom: 16px;
}

.assignment-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
}

.assignment-title {
  font-size: 16px;
  font-weight: 600;
  color: var(--color-navy-dark);
  margin: 0;
}

.career-course-badge {
  background: var(--color-info-light);
  color: var(--color-primary-hover);
  padding: 4px 12px;
  border-radius: var(--radius-lg);
  font-size: 12px;
  font-weight: 500;
}

.assignment-meta {
  display: flex;
  gap: 20px;
  font-size: 13px;
  color: var(--color-gray-500);
}

/* Certifications Grid */
.certifications-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
}

.certification-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px;
  background: var(--color-success-light);
  border-radius: 8px;
}

.cert-icon {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  font-weight: bold;
}

.cert-valid {
  background: var(--color-success);
  color: white;
}

.cert-name {
  font-size: 14px;
  font-weight: 500;
  color: var(--color-navy-dark);
}

/* ===== Staff Page Styles ===== */
.staff-page {
}

.staff-stats-pills {
  display: flex;
  gap: 12px;
  margin-bottom: 24px;
}

.stat-pill {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  background: var(--color-gray-50);
  border-radius: 20px;
  border: 1px solid var(--color-gray-100);
}

.stat-pill.stat-active {
  background: var(--color-success-light);
  border-color: var(--color-success);
}

.stat-pill.stat-csr {
  background: var(--color-info-light);
  border-color: var(--color-primary);
}

.stat-pill.stat-pending {
  background: var(--color-warning-light);
  border-color: var(--color-warning);
}

.stat-number {
  font-size: 18px;
  font-weight: 700;
  color: var(--color-navy-dark);
}

.stat-label {
  font-size: 13px;
  color: var(--color-gray-500);
}

.staff-controls {
  display: flex;
  gap: 12px;
  margin-bottom: 24px;
}

.search-input-wide {
  padding: 10px 12px 10px 36px;
  border: 1px solid var(--color-gray-200);
  border-radius: var(--radius-sm);
  font-size: 14px;
  flex: 1;
  transition: border-color 0.2s;
}

.search-input-wide:focus {
  outline: none;
  border-color: var(--color-primary);
}

.filter-select {
  padding: 10px 16px;
  border: 1px solid var(--color-gray-200);
  border-radius: var(--radius-sm);
  font-size: 14px;
  background: var(--color-white);
  cursor: pointer;
  min-width: 150px;
}

.staff-table-container {
  background: var(--color-white);
  border-radius: 8px;
  box-shadow: var(--shadow-card);
}

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

.staff-table thead {
  background: var(--color-gray-50);
  border-bottom: 2px solid var(--color-gray-200);
}

.staff-table th {
  padding: 12px 16px;
  text-align: left;
  font-size: 11px;
  font-weight: 600;
  color: var(--color-gray-500);
  letter-spacing: 0.5px;
}

.staff-row {
  border-bottom: 1px solid var(--color-gray-100);
  transition: background 0.2s;
}

.staff-row:hover {
  background: var(--color-primary-light);
}

.staff-table td {
  padding: 16px;
}

.staff-table .col-right { text-align: right; }

.staff-cell {
  display: flex;
  align-items: center;
  gap: 12px;
}

.staff-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 13px;
  font-weight: 600;
}

.staff-name {
  font-weight: 500;
  color: var(--color-navy-dark);
  font-size: 14px;
}

.role-state {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.role-title {
  font-size: 14px;
  color: var(--color-navy-dark);
  font-weight: 500;
}

.state-text {
  font-size: 13px;
  color: var(--color-gray-500);
}

.cases-text {
  font-size: 13px;
  color: var(--color-gray-500);
}

.last-active-text {
  font-size: 13px;
  color: var(--color-gray-500);
}

.staff-action-icons {
  display: flex;
  gap: 8px;
  align-items: center;
}

.icon-btn {
  background: none;
  border: none;
  font-size: 16px;
  cursor: pointer;
  padding: 4px 8px;
  color: var(--color-gray-500);
  transition: all 0.2s;
  border-radius: 4px;
}

.icon-btn:hover {
  background: var(--color-gray-50);
  color: var(--color-primary);
}

/* Staff phone and info display */
.staff-phone {
  font-size: 12px;
  color: var(--color-gray-500);
}

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

/* Staff avatar colors */
.staff-avatar {
  background: var(--color-primary);
}

/* ===== Staff Detail Page Styles ===== */
.staff-detail-page {
  max-width: 1400px;
}

.staff-detail-header {
  display: flex;
  justify-content: space-between;
  align-items: start;
  margin-bottom: 24px;
}

.staff-header-info {
  display: flex;
  gap: 20px;
}

.staff-header-avatar {
  width: 64px;
  height: 64px;
  background: var(--color-primary);
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 20px;
  font-weight: 600;
  flex-shrink: 0;
}

.staff-title-row {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 8px;
  flex-wrap: wrap;
}

.staff-detail-title {
  font-size: 24px;
  font-weight: 600;
  color: var(--color-navy-dark);
  margin: 0;
}

.staff-header-meta {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 8px;
  flex-wrap: wrap;
}

.staff-header-meta .meta-item {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: var(--color-gray-500);
}

.staff-header-role {
  margin-top: 4px;
}

.staff-detail-page .role-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 12px;
  border-radius: 16px;
  font-size: 12px;
  font-weight: 500;
}

.staff-detail-page .role-admin {
  background: var(--color-primary-light);
  color: var(--color-primary);
}

/* Staff Stats Grid */
.staff-stats-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-bottom: 32px;
}

.staff-stat-card {
  background: white;
  border: 1px solid var(--color-gray-100);
  border-radius: 8px;
  padding: 20px;
  display: flex;
  align-items: center;
  gap: 16px;
}

.staff-stat-card .stat-icon {
  width: 48px;
  height: 48px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.staff-stat-card .stat-role {
  background: var(--color-info-light);
  color: var(--color-primary);
}

.staff-stat-card .stat-status {
  background: var(--color-success-light);
  color: var(--color-success);
}

.staff-stat-card .stat-created {
  background: var(--color-warning-light);
  color: var(--color-warning);
}

/* Staff Tabs */
.staff-tabs {
  display: flex;
  gap: 8px;
  border-bottom: 2px solid var(--color-gray-100);
  margin-bottom: 32px;
}

.staff-tab-content {
  display: block;
}

.staff-tab-content.hidden {
  display: none;
}

/* Tab Sections */
.tab-section {
  background: white;
  border: 1px solid var(--color-gray-100);
  border-radius: 8px;
  padding: 24px;
  margin-bottom: 24px;
}

.staff-detail-page .section-title {
  font-size: 16px;
  font-weight: 600;
  color: var(--color-navy-dark);
  margin: 0 0 20px 0;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--color-gray-100);
}

.staff-detail-page .info-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
}

.staff-detail-page .info-item {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.staff-detail-page .info-label {
  font-size: 12px;
  font-weight: 500;
  color: var(--color-gray-500);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.staff-detail-page .info-value {
  font-size: 14px;
  color: var(--color-navy-dark);
}

.staff-detail-page .info-value code {
  background: var(--color-gray-50);
  padding: 2px 8px;
  border-radius: 4px;
  font-family: monospace;
  font-size: 13px;
}

/* Security Actions */
.staff-detail-page .security-actions {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.staff-detail-page .action-card {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px;
  background: var(--color-gray-50);
  border-radius: 8px;
  border: 1px solid var(--color-gray-100);
}

.staff-detail-page .action-card.action-warning {
  background: var(--color-warning-light);
  border-color: var(--color-warning);
}

.staff-detail-page .action-card.action-danger {
  background: var(--color-error-light);
  border-color: var(--color-error);
}

.staff-detail-page .action-info {
  flex: 1;
}

.staff-detail-page .action-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--color-navy-dark);
  margin-bottom: 4px;
}

.staff-detail-page .action-description {
  font-size: 13px;
  color: var(--color-gray-500);
}

.staff-detail-page .btn-warning {
  color: var(--color-warning);
  border-color: var(--color-warning);
}

.staff-detail-page .btn-warning:hover {
  background: var(--color-warning);
  color: white;
}

.staff-detail-page .btn-danger {
  color: var(--color-error);
  border-color: var(--color-error);
}

.staff-detail-page .btn-danger:hover {
  background: var(--color-error);
  color: white;
}

/* Staff Permissions Panel */
.permissions-panel {
  margin-top: -4px;
}

.permissions-panel .form-label {
  font-size: 13px;
  font-weight: 500;
  text-transform: none;
  letter-spacing: normal;
  color: var(--color-navy-dark);
  margin-bottom: 4px;
}

.permissions-checkboxes {
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.permissions-checkboxes .checkbox-label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 400;
  text-transform: none;
  color: var(--color-gray-600);
  cursor: pointer;
  margin: 0;
  padding: 2px 0;
}

.permissions-checkboxes .checkbox-label input[type="checkbox"] {
  width: 13px;
  height: 13px;
  cursor: pointer;
}

/* Permission Tags (show page) */
.permissions-list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.permission-tag {
  display: inline-block;
  padding: 3px 10px;
  font-size: 12px;
  font-weight: 500;
  border-radius: 12px;
  background: var(--color-info, #2196f3);
  color: white;
}

/* Staff role badges */
.role-badge.role-admin_full {
  background: var(--color-success-light, #e8f5e9);
  color: var(--color-success, #4caf50);
}

.role-badge.role-admin_limited {
  background: var(--color-warning-light, #fff3e0);
  color: var(--color-warning, #ff9800);
}

.role-badge.role-read_only {
  background: var(--color-gray-100, #f3f4f6);
  color: var(--color-gray-600, #666);
}

/* Modal Alert Container */
.modal-alert-container {
  margin-bottom: 16px;
}

.modal-alert {
  padding: 12px 16px;
  border-radius: 6px;
  display: flex;
  align-items: center;
  gap: 8px;
}

/* Form Row for side-by-side fields */
.staff-page .form-row,
.staff-detail-page .form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

/* Results count styling */
.results-count {
  font-size: 13px;
  color: var(--color-gray-500);
  margin-bottom: 16px;
}

/* Empty state for tables */
.staff-page .empty-state,
.staff-detail-page .empty-state {
  padding: 60px 20px;
  text-align: center;
}

.staff-page .empty-state-content,
.staff-detail-page .empty-state-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  color: var(--color-gray-400);
}

.staff-page .empty-state-content svg,
.staff-page .empty-state-content iconify-icon,
.staff-detail-page .empty-state-content svg,
.staff-detail-page .empty-state-content iconify-icon {
  font-size: 48px;
  opacity: 0.5;
}

/* Responsive for Staff Detail */
@media (max-width: 968px) {
  .staff-stats-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .staff-detail-page .info-grid {
    grid-template-columns: 1fr;
  }

  .staff-page .form-row,
  .staff-detail-page .form-row {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 768px) {
  .staff-detail-header {
    flex-direction: column;
    gap: 20px;
  }

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

  .staff-header-meta {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }
}

/* ===== Courses Page Styles ===== */
.courses-page {
  max-width: 1600px;
}

.courses-table-container {
  background: var(--color-white);
  border-radius: 8px;
  box-shadow: var(--shadow-card);
  overflow-x: auto;
}

.courses-table {
  width: 100%;
  border-collapse: collapse;
  min-width: 1200px;
}

.courses-table thead {
  background: var(--color-gray-50);
  border-bottom: 2px solid var(--color-gray-200);
}

.courses-table th {
  padding: 12px 16px;
  text-align: left;
  font-size: 11px;
  font-weight: 600;
  color: var(--color-gray-500);
  letter-spacing: 0.5px;
  white-space: nowrap;
}

.course-row {
  border-bottom: 1px solid var(--color-gray-100);
  cursor: pointer;
  transition: background 0.2s;
}

.course-row:hover {
  background: var(--color-primary-light);
}

.course-row.placeholder-row {
  opacity: 0.6;
}

.courses-table td {
  padding: 16px;
  font-size: 13px;
  vertical-align: middle;
}

.courses-table .col-right { text-align: right; }

/* Course & Location cell - compact inline layout */
.course-location-cell {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}

.courses-table .course-icon {
  width: 36px;
  height: 36px;
  background: var(--color-info-light);
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  flex-shrink: 0;
  color: var(--color-navy-dark);
}

.courses-table .course-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  background: none;
  border-radius: 0;
  padding: 0;
  box-shadow: none;
  border: none;
}

.courses-table .course-name {
  font-size: 14px;
  font-weight: 500;
  color: var(--color-navy-dark);
  line-height: 1.3;
}

.courses-table .course-location-name {
  font-size: 12px;
  color: var(--color-gray-500);
  display: flex;
  align-items: center;
  gap: 4px;
}

.courses-table .course-location-name iconify-icon {
  font-size: 12px;
}

/* Course table badge colors */
.courses-table .type-badge {
  display: inline-block;
  padding: 4px 12px;
  border-radius: var(--radius-lg);
  font-size: 12px;
  font-weight: 500;
}

.courses-table .badge-career {
  background: var(--color-orange-50);
  color: var(--color-orange-700);
}

.courses-table .badge-continuing {
  background: var(--color-purple-50);
  color: var(--color-purple-700);
}

.courses-table .status-badge {
  display: inline-block;
  padding: 4px 12px;
  border-radius: var(--radius-lg);
  font-size: 12px;
  font-weight: 500;
}

.courses-table .status-badge.status-draft {
  background: var(--color-gray-100);
  color: var(--color-gray-600);
}

.courses-table .program-badge {
  display: inline-block;
  padding: 4px 12px;
  border-radius: var(--radius-lg);
  font-size: 12px;
  font-weight: 500;
}

.courses-table .badge-dental {
  background: var(--color-blue-50);
  color: var(--color-blue-700);
}

.courses-table .badge-medical {
  background: var(--color-teal-50, #e0f2f1);
  color: var(--color-teal-700, #00897b);
}

.courses-table .badge-pharmacy {
  background: var(--color-purple-50);
  color: var(--color-purple-700);
}

.course-campus-cell {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 280px;
}

.course-icon {
  width: 40px;
  height: 40px;
  background: var(--color-info-light);
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  flex-shrink: 0;
}

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

/* Filter Dropdown */
.filter-dropdown {
  position: relative;
}

.btn-filters.has-filters {
  background: var(--color-primary-light);
  border-color: var(--color-primary);
  color: var(--color-primary);
}

.filter-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  background: var(--color-primary);
  color: white;
  border-radius: 50%;
  font-size: 11px;
  font-weight: 600;
  margin-left: 6px;
}

.filter-dropdown-menu {
  position: absolute;
  top: 100%;
  right: 0;
  margin-top: 8px;
  background: var(--color-white);
  border: 1px solid var(--color-gray-200);
  border-radius: 8px;
  box-shadow: var(--shadow-lg);
  min-width: 240px;
  z-index: 100;
  padding: 12px 0;
}

.filter-section {
  padding: 8px 16px;
}

.filter-section:not(:last-child) {
  border-bottom: 1px solid var(--color-gray-100);
  padding-bottom: 12px;
  margin-bottom: 4px;
}

.filter-label {
  display: block;
  font-size: 11px;
  font-weight: 600;
  color: var(--color-gray-500);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 8px;
}

.filter-options {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.filter-option {
  display: inline-block;
  padding: 6px 12px;
  font-size: 13px;
  color: var(--color-gray-600);
  background: var(--color-gray-50);
  border: 1px solid var(--color-gray-200);
  border-radius: 16px;
  text-decoration: none;
  transition: all 0.15s;
}

.filter-option:hover {
  background: var(--color-gray-100);
  border-color: var(--color-gray-300);
  color: var(--color-navy-dark);
}

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

.filter-actions {
  padding: 8px 16px 0;
  border-top: 1px solid var(--color-gray-100);
  margin-top: 8px;
}

.filter-clear {
  display: block;
  text-align: center;
  font-size: 13px;
  color: var(--color-gray-500);
  text-decoration: none;
  padding: 8px;
}

.filter-clear:hover {
  color: var(--color-error);
}

/* Active Filter Tags */
.active-filters {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 0;
  flex-wrap: wrap;
}

.active-filters-label {
  font-size: 13px;
  color: var(--color-gray-500);
}

.active-filter-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  background: var(--color-primary-light);
  color: var(--color-primary);
  border-radius: 16px;
  font-size: 12px;
  font-weight: 500;
  text-decoration: none;
  transition: all 0.15s;
}

.active-filter-tag:hover {
  background: var(--color-error-light);
  color: var(--color-error);
}

.active-filter-tag .tag-remove {
  width: 14px;
  height: 14px;
}

.pagination-controls {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin-top: 24px;
  padding: 16px 0;
}

.pagination-info {
  font-size: 14px;
  color: var(--color-gray-500);
}

.pagination-nav {
  display: flex;
  align-items: center;
  gap: 8px;
}

.pagination-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border: 1px solid var(--color-gray-200);
  border-radius: var(--radius-sm);
  background: var(--color-white);
  color: var(--color-navy-dark);
  text-decoration: none;
  transition: all 0.2s;
}

.pagination-btn:hover:not(.disabled) {
  background: var(--color-gray-50);
  border-color: var(--color-primary);
  color: var(--color-primary);
}

.pagination-btn.disabled {
  color: var(--color-text-disabled);
  cursor: not-allowed;
}

.pagination-btn svg {
  width: 16px;
  height: 16px;
}

.pagination-pages {
  display: flex;
  align-items: center;
  gap: 4px;
}

.pagination-page {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 36px;
  height: 36px;
  padding: 0 8px;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  font-size: 14px;
  color: var(--color-navy-dark);
  text-decoration: none;
  transition: all 0.2s;
}

.pagination-page:hover:not(.current) {
  background: var(--color-gray-50);
}

.pagination-page.current {
  background: var(--color-primary);
  color: white;
  font-weight: 600;
}

.pagination-gap {
  padding: 0 8px;
  color: var(--color-gray-400);
}

.page-number {
  font-size: 14px;
  color: var(--color-gray-500);
}

/* Search clear button */
.search-clear {
  position: absolute;
  right: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  color: var(--color-gray-400);
  transition: all 0.2s;
}

.search-clear:hover {
  background: var(--color-gray-100);
  color: var(--color-gray-500);
}

.search-clear svg {
  width: 14px;
  height: 14px;
}

/* Utility classes */
.text-muted {
  color: var(--color-gray-400);
  font-style: italic;
}

.status-inactive {
  background: var(--color-gray-50);
  color: var(--color-gray-500);
}

/* Enrollment Progress in Courses Table */
.enrollment-with-progress {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 70px;
}

.enrollment-count-text {
  font-size: 13px;
  font-weight: 500;
  color: var(--color-navy-dark);
  white-space: nowrap;
}

.enrollment-progress-mini {
  height: 4px;
  background: rgba(0, 0, 0, 0.06);
  border-radius: 2px;
  overflow: hidden;
  width: 100%;
}

.enrollment-progress-fill-mini {
  height: 100%;
  width: var(--progress, 0%);
  border-radius: 2px;
  transition: width 0.3s ease, background-color 0.3s ease;
}

/* Gradient colors from pastel red to pastel green */
.progress-critical {
  background: linear-gradient(90deg, var(--color-red-400) 0%, var(--color-pink-400) 100%);
}

.progress-low {
  background: linear-gradient(
    90deg,
    var(--color-orange-600) 0%,
    var(--color-orange-400) 100%
  );
}

.progress-medium {
  background: linear-gradient(90deg, var(--color-orange-400) 0%, var(--color-orange-300) 100%);
}

.progress-good {
  background: linear-gradient(90deg, var(--color-green-400) 0%, var(--color-green-300) 100%);
}

.progress-full {
  background: linear-gradient(90deg, var(--color-green-500) 0%, var(--color-green-400) 100%);
}

/* Course Detail Page */
.course-detail-page {
  /* Full width responsive */
}

.course-detail-header {
  display: flex;
  justify-content: space-between;
  align-items: start;
  margin-bottom: 20px;
}

.course-header-info {
  display: flex;
  gap: 20px;
}

.course-header-icon {
  width: 64px;
  height: 64px;
  background: var(--color-info-light);
  border-radius: var(--radius-lg);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 32px;
  flex-shrink: 0;
}

.course-detail-title {
  font-size: 24px;
  font-weight: 600;
  color: var(--color-navy-dark);
  margin-bottom: 8px;
}

.course-header-badges {
  display: flex;
  gap: 12px;
  margin-bottom: 8px;
}

.course-type-text, .course-format-text, .course-term-text {
  font-size: 13px;
  color: var(--color-gray-500);
}

.course-campus-header {
  font-size: 14px;
  color: var(--color-gray-500);
}

.course-header-badges-row {
  display: flex;
  gap: 8px;
  margin-bottom: 24px;
}

.course-stats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-bottom: 32px;
}

.course-stats-grid-2 {
  grid-template-columns: repeat(2, 1fr);
  max-width: 500px;
}

.course-stat-card {
  background: var(--color-white);
  border: 1px solid var(--color-gray-100);
  border-radius: 8px;
  padding: 20px;
  display: flex;
  align-items: center;
  gap: 16px;
}

.stat-enrollment, .stat-tuition, .stat-duration, .stat-startdate, .stat-applicants {
  width: 48px;
  height: 48px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
}

.stat-applicants { background: var(--color-warning-light); color: var(--color-warning); }

.course-tabs {
  display: flex;
  gap: 8px;
  border-bottom: 2px solid var(--color-border-light);
  margin-bottom: 32px;
}

.course-tab-content {
  display: block;
}

.course-overview-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}

.overview-left, .overview-right {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.course-section-card {
  background: var(--color-white);
  border: 1px solid var(--color-gray-100);
  border-radius: 8px;
  padding: 24px;
}

.course-description {
  font-size: 14px;
  color: var(--color-gray-500);
  line-height: 1.6;
  margin: 0;
}

/* Course Title Row */
.course-title-row {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

/* Course Header Badges (program type, format, term) */
.course-type-badge,
.course-format-badge,
.course-term-badge {
  display: inline-flex;
  align-items: center;
  padding: 4px 12px;
  border-radius: var(--radius-lg);
  font-size: 13px;
  font-weight: 500;
}

.course-type-badge {
  background: var(--color-info-light);
  color: var(--color-primary);
}

.course-format-badge {
  background: var(--color-gray-100);
  color: var(--color-gray-600);
}

.course-term-badge {
  background: var(--color-gray-100);
  color: var(--color-gray-600);
}

/* Badge links - clickable badges */
a.course-type-badge,
a.course-term-badge {
  text-decoration: none;
  transition: all 0.15s ease;
}

a.course-type-badge:hover {
  background: var(--color-primary);
  color: var(--color-white);
}

a.course-term-badge:hover {
  background: var(--color-gray-200);
  color: var(--color-gray-700);
}

/* Course Info Cards (Financial & Schedule) */
.course-info-cards {
  display: flex;
  gap: 24px;
  margin-bottom: 24px;
}

.course-info-card {
  background: var(--color-white);
  border: 1px solid var(--color-gray-100);
  border-radius: 8px;
  padding: 20px 24px;
}

.course-info-card:first-child {
  flex-shrink: 0;
}

.info-card-title {
  font-size: 13px;
  font-weight: 500;
  color: var(--color-navy-dark);
  text-decoration: underline;
  text-underline-offset: 4px;
  margin: 0 0 16px 0;
}

.info-card-items {
  display: flex;
  gap: 40px;
}

.info-card-item {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.info-card-label {
  font-size: 11px;
  font-weight: 400;
  color: var(--color-gray-400);
}

.info-card-value {
  font-size: 15px;
  font-weight: 600;
  color: var(--color-navy-dark);
}

/* Schedule card - 2x2 grid */
.info-card-grid {
  display: grid;
  grid-template-columns: auto auto;
  gap: 12px 40px;
}

/* Stat icon colors */
.stat-tuition {
  background: var(--color-success-light);
  color: var(--color-success);
}

.stat-duration {
  background: var(--color-info-light);
  color: var(--color-primary);
}

.stat-date {
  background: var(--color-warning-light);
  color: var(--color-warning);
}

/* Instructors List */
.instructors-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.instructor-list-item {
  display: flex;
  align-items: center;
  gap: 12px;
  position: relative;
}
.instructor-list-item:focus-within .btn-remove-instructor-small { opacity: 1; }
.btn-remove-instructor-small {
  width: 24px;
  height: 24px;
  border: none;
  background: transparent;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-gray-400);
  opacity: 0;
  transition: all 0.2s;
  margin-left: auto;
}
.btn-remove-instructor-small:hover { background: var(--color-red-100); color: var(--color-red-500); }

.instructor-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--color-info-light);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

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

.instructor-name {
  font-size: 14px;
  font-weight: 500;
  color: var(--color-navy-dark);
}

.instructor-role {
  font-size: 13px;
  color: var(--color-gray-500);
}

/* Location Details */
.location-details-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.location-detail-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}

.location-detail-item .location-icon {
  width: 20px;
  height: 20px;
  color: var(--color-gray-400);
  flex-shrink: 0;
  margin-top: 2px;
  background: none;
}

.location-text {
  font-size: 14px;
  color: var(--color-gray-600);
  line-height: 1.4;
}

.location-practice-name {
  font-weight: 600;
  color: var(--color-gray-700);
}

a.location-link {
  text-decoration: none;
  color: var(--color-primary);
  font-weight: 500;
  transition: color 0.15s ease;
}

a.location-link:hover {
  color: var(--color-primary-dark, #1976d2);
  text-decoration: underline;
}

/* Requirements Section */
.requirements-subsection {
  margin-top: 16px;
}

.requirements-subsection:first-child {
  margin-top: 0;
}

.requirements-subheading {
  font-size: 13px;
  font-weight: 600;
  color: var(--color-gray-500);
  margin: 0 0 12px 0;
}

.requirement-item {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin-bottom: 8px;
}

.requirement-check {
  color: var(--color-success);
  flex-shrink: 0;
  margin-top: 2px;
}

.requirement-icon {
  color: var(--color-gray-400);
  flex-shrink: 0;
  margin-top: 2px;
}

.requirement-text {
  font-size: 14px;
  color: var(--color-gray-600);
  line-height: 1.4;
}

/* Dates to Omit Section */
.dates-to-omit-section {
  margin-top: 24px;
}

.dates-to-omit-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.date-to-omit-badge {
  display: inline-flex;
  align-items: center;
  padding: 6px 12px;
  background: var(--color-gray-100);
  border-radius: var(--radius-lg);
  font-size: 13px;
  color: var(--color-gray-600);
}

/* Empty state small */
.empty-state-small {
  padding: 16px;
  text-align: center;
  color: var(--color-gray-400);
  font-size: 14px;
}

.empty-state-small p {
  margin: 0;
}

/* Button small variant */
.btn-small {
  padding: 6px 12px;
  font-size: 13px;
}

/* Course Details Grid */
.course-details-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.course-detail-item {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.course-detail-label {
  font-size: 12px;
  font-weight: 500;
  color: var(--color-gray-500);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.course-detail-value {
  font-size: 14px;
  font-weight: 500;
  color: var(--color-navy-dark);
}

/* Location Link */
.location-name-link {
  font-size: 14px;
  font-weight: 500;
  color: var(--color-primary);
  text-decoration: none;
}

.location-name-link:hover {
  text-decoration: underline;
}

/* Prices and Fees */
.prices-fees-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.price-fee-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px;
  background: var(--color-gray-50);
  border-radius: 8px;
}

.price-fee-label {
  font-size: 14px;
  color: var(--color-gray-500);
}

.price-fee-value {
  font-size: 14px;
  font-weight: 600;
  color: var(--color-navy-dark);
}

.price-fee-value.discount {
  color: var(--color-success);
}

/* Holidays List */
.holidays-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.holiday-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px;
  background: var(--color-gray-50);
  border-radius: 8px;
}

.holiday-date {
  font-size: 13px;
  font-weight: 600;
  color: var(--color-navy-dark);
}

.holiday-name {
  font-size: 13px;
  color: var(--color-gray-500);
}

.instructor-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.instructor-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
  background: var(--color-gray-50);
  border-radius: 8px;
}

.instructor-item-avatar {
  width: 40px;
  height: 40px;
  background: var(--color-info-light);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
}

.instructor-item-info {
  flex: 1;
}

.instructor-item-name {
  font-size: 14px;
  font-weight: 500;
  color: var(--color-navy-dark);
  margin-bottom: 2px;
}

.instructor-item-role {
  font-size: 12px;
  color: var(--color-gray-500);
}

.campus-detail-item {
  display: flex;
  align-items: start;
  gap: 12px;
  padding: 12px 0;
  border-bottom: 1px solid var(--color-gray-100);
}

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

.campus-name, .campus-address, .campus-contact {
  font-size: 14px;
  flex: 1;
}

.campus-name {
  color: var(--color-navy-dark);
  font-weight: 500;
}

.requirements-section {
  margin-bottom: 20px;
}

.requirements-section:last-child {
  margin-bottom: 0;
}

.requirements-subheading {
  font-size: 14px;
  font-weight: 600;
  color: var(--color-navy-dark);
  margin-bottom: 12px;
}

.requirement-item {
  display: flex;
  align-items: start;
  gap: 10px;
  padding: 8px 0;
  font-size: 14px;
  color: var(--color-gray-500);
}

.requirement-icon {
  color: var(--color-success);
  flex-shrink: 0;
}

.requirement-text {
  flex: 1;
}

/* Enrollments Tab */
.enrollment-stats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-bottom: 32px;
}

.enrollment-stat-card {
  background: var(--color-white);
  border: 1px solid var(--color-gray-100);
  border-radius: 8px;
  padding: 20px;
  display: flex;
  align-items: center;
  gap: 16px;
}

.enrollment-stat-icon {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
}

.stat-enrolled {
  background: var(--color-success-light);
}

.stat-available {
  background: var(--color-info-light);
}

.stat-waitlisted {
  background: var(--color-warning-light);
}

.stat-capacity {
  background: var(--color-purple-50);
}

.enrollment-stat-content {
  flex: 1;
}

.enrollment-stat-label {
  font-size: 13px;
  color: var(--color-gray-500);
  margin-bottom: 4px;
}

.enrollment-stat-value {
  font-size: 24px;
  font-weight: 700;
  color: var(--color-navy-dark);
}

.enrollment-actions {
  display: flex;
  gap: 8px;
}

.enrollments-table {
  width: 100%;
  background: var(--color-white);
  border: 1px solid var(--color-gray-100);
  border-radius: 8px;
  border-collapse: collapse;
  overflow: hidden;
}

.enrollments-table thead {
  background: var(--color-gray-50);
}

.enrollments-table th {
  padding: 12px 16px;
  text-align: left;
  font-size: 11px;
  font-weight: 600;
  color: var(--color-gray-500);
  letter-spacing: 0.5px;
  border-bottom: 1px solid var(--color-gray-100);
}

.enrollments-table td {
  padding: 16px;
  font-size: 14px;
  border-bottom: 1px solid var(--color-gray-100);
}

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

.enrolled-student-cell {
  display: flex;
  align-items: center;
  gap: 12px;
}

.enrolled-student-avatar {
  width: 40px;
  height: 40px;
  background: var(--color-info-light);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
}

.enrolled-student-info {
  display: flex;
  flex-direction: column;
}

.enrolled-student-name {
  font-size: 14px;
  font-weight: 500;
  color: var(--color-navy-dark);
}

.enrolled-student-email {
  font-size: 13px;
  color: var(--color-gray-500);
}

.onboarding-step-name {
  font-size: 14px;
  font-weight: 500;
}

.onboarding-step-progress {
  font-size: 12px;
  color: var(--color-gray-500);
}

.enrollment-status-badge {
  display: inline-block;
  padding: 4px 12px;
  border-radius: var(--radius-lg);
  font-size: 12px;
  font-weight: 500;
}

.badge-enrolled {
  background: var(--color-success-light);
  color: var(--color-success);
}

.badge-waitlisted {
  background: var(--color-warning-light);
  color: var(--color-warning);
}

.badge-onboarding {
  background: var(--color-primary-light);
  color: var(--color-primary);
}

.badge-completed {
  background: #e8f5e9;
  color: #2e7d32;
}

.badge-failed {
  background: var(--color-error-light);
  color: var(--color-error);
}

.badge-withdrawn {
  background: var(--color-gray-100);
  color: var(--color-gray-600);
}

.badge-transferred {
  background: var(--color-warning-light);
  color: var(--color-warning);
}

.progress-with-text {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 180px;
}

.progress-text {
  font-size: 13px;
  color: var(--color-navy-dark);
  font-weight: 500;
}

.progress-bar.small {
  height: 6px;
}

.attendance-text {
  font-size: 12px;
  color: var(--color-gray-500);
}

.not-started-text {
  font-size: 13px;
  color: var(--color-gray-400);
}

.payment-badge {
  display: inline-block;
  padding: 4px 12px;
  border-radius: var(--radius-lg);
  font-size: 12px;
  font-weight: 500;
}

.badge-current {
  background: var(--color-success-light);
  color: var(--color-success);
}

.badge-overdue {
  background: var(--color-error-light);
  color: var(--color-error);
}

.badge-not-required {
  background: var(--color-gray-50);
  color: var(--color-gray-400);
}

/* Applicants Tab Additional Styles */
.stat-pending {
  background: var(--color-warning-light);
}

.stat-approved {
  background: var(--color-success-light);
}

.stat-rejected {
  background: var(--color-error-light);
}

.badge-pending {
  background: var(--color-warning-light);
  color: var(--color-warning);
}

.badge-approved {
  background: var(--color-success-light);
  color: var(--color-success);
}

.badge-deposit-paid {
  background: var(--color-info-light);
  color: var(--color-info);
}

.badge-paid {
  background: var(--color-success-light);
  color: var(--color-success);
}

.badge-payment-pending {
  background: var(--color-warning-light);
  color: var(--color-warning);
}

.action-links {
  display: flex;
  gap: 12px;
}

.link-success {
  color: var(--color-success);
  text-decoration: none;
  font-size: 14px;
}

.link-success:hover {
  text-decoration: underline;
}

.link-danger {
  color: var(--color-error);
  text-decoration: none;
  font-size: 14px;
}

.link-danger:hover {
  text-decoration: underline;
}

/* CMT Tab */
.cmt-tab-content {
  padding: 20px 0;
}

.cmt-header {
  margin-bottom: 24px;
}

.cmt-description {
  font-size: 14px;
  color: var(--color-gray-500);
  line-height: 1.6;
  margin-top: 8px;
}

.config-summary-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
  margin-bottom: 32px;
}

.config-summary-card {
  background: var(--color-white);
  border: 1px solid var(--color-gray-100);
  border-radius: 8px;
  overflow: hidden;
}

.config-card-header {
  background: var(--color-gray-50);
  padding: 12px 16px;
  border-bottom: 1px solid var(--color-gray-100);
}

.config-card-header h4 {
  margin: 0;
  font-size: 14px;
  font-weight: 600;
  color: var(--color-navy-dark);
  display: flex;
  align-items: center;
  gap: 8px;
}

.config-card-header svg {
  width: 16px;
  height: 16px;
  color: var(--color-gray-400);
}

.config-card-content {
  padding: 16px;
}

.config-item {
  display: flex;
  justify-content: space-between;
  padding: 8px 0;
  border-bottom: 1px solid var(--color-gray-50);
}

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

.config-label {
  font-size: 13px;
  color: var(--color-gray-500);
}

.config-value {
  font-size: 13px;
  font-weight: 500;
  color: var(--color-navy-dark);
}

.cmt-actions {
  text-align: center;
  padding: 24px;
  background: var(--color-gray-50);
  border-radius: 8px;
}

.cmt-hint {
  margin-top: 12px;
  font-size: 13px;
  color: var(--color-gray-500);
}

/* Schedule Tab */
.schedule-details-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
}

.schedule-detail-item {
  padding: 20px;
  background: var(--color-white);
  border: 1px solid var(--color-gray-100);
  border-radius: 8px;
}

.schedule-label {
  font-size: 13px;
  font-weight: 500;
  color: var(--color-gray-500);
  margin-bottom: 8px;
}

.schedule-value {
  font-size: 16px;
  font-weight: 600;
  color: var(--color-navy-dark);
}

/* Financial Tab */
.financial-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

.financial-item {
  padding: 24px;
  background: var(--color-white);
  border: 1px solid var(--color-gray-100);
  border-radius: 8px;
  text-align: center;
}

.financial-label {
  font-size: 14px;
  font-weight: 500;
  color: var(--color-gray-500);
  margin-bottom: 12px;
}

.financial-value {
  font-size: 28px;
  font-weight: 700;
  color: var(--color-navy-dark);
}

/* Financial Dashboard */
.financial-summary-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-bottom: 24px;
  align-items: stretch;
}

.financial-summary-card {
  background: var(--color-white);
  border: 1px solid var(--color-gray-100);
  border-radius: 8px;
  padding: 20px;
  display: flex;
  flex-direction: column;
}

.financial-summary-card.alert {
  border-color: var(--color-red-100);
  background: var(--color-error-light);
}

.financial-summary-label {
  font-size: 13px;
  font-weight: 500;
  color: var(--color-gray-500);
  margin-bottom: 8px;
}

.financial-summary-value {
  font-size: 24px;
  font-weight: 700;
  color: var(--color-navy-dark);
  margin-bottom: 4px;
}

.financial-summary-value.text-success { color: var(--color-success); }
.financial-summary-value.text-danger { color: var(--color-error); }

.financial-summary-sub {
  font-size: 12px;
  color: var(--color-gray-400);
}

/* Revenue Chart */
.revenue-chart-container {
  background: var(--color-white);
  border: 1px solid var(--color-gray-100);
  border-radius: 8px;
  padding: 24px;
}

.revenue-chart-header {
  margin-bottom: 24px;
}

.chart-legend {
  display: flex;
  gap: 24px;
}

.legend-item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--color-gray-500);
}

.legend-dot {
  width: 12px;
  height: 12px;
  border-radius: 3px;
}

.legend-dot.expected { background: var(--color-gray-200); }
.legend-dot.collected { background: var(--color-primary); }

.revenue-bars {
  display: flex;
  justify-content: space-around;
  align-items: flex-end;
  height: 200px;
  padding: 0 20px;
}

.revenue-bar-group {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  flex: 1;
  max-width: 120px;
}

.bar-label {
  font-size: 12px;
  font-weight: 500;
  color: var(--color-gray-500);
  order: -1;
}

.bar-container {
  display: flex;
  gap: 4px;
  align-items: flex-end;
  height: 150px;
  width: 60px;
}

.bar {
  width: 24px;
  height: var(--bar-height, 0%);
  border-radius: 4px 4px 0 0;
  transition: height 0.3s ease;
}

.bar.expected { background: var(--color-gray-200); }
.bar.collected { background: var(--color-primary); }

.bar-values {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  font-size: 11px;
}

.expected-val { color: var(--color-gray-400); }
.collected-val { color: var(--color-primary); font-weight: 500; }

.chart-summary {
  display: flex;
  justify-content: center;
  gap: 32px;
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--color-border);
}

.chart-summary-item {
  display: flex;
  align-items: center;
  gap: 8px;
}

.chart-summary-label {
  font-size: 13px;
  color: var(--color-gray-500);
}

.chart-summary-value {
  font-size: 15px;
  font-weight: 600;
  color: var(--color-navy-dark);
}

/* Collection Status */
.collection-status-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.collection-status-item {
  display: grid;
  grid-template-columns: 250px 200px 1fr auto;
  align-items: center;
  gap: 24px;
  padding: 16px 20px;
  background: var(--color-white);
  border: 1px solid var(--color-gray-100);
  border-radius: 8px;
}

.collection-student {
  display: flex;
  align-items: center;
  gap: 12px;
}

.collection-avatar {
  width: 40px;
  height: 40px;
  background: var(--color-gray-100);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-gray-500);
}

.collection-name {
  font-size: 14px;
  font-weight: 500;
  color: var(--color-navy-dark);
}

.collection-email {
  font-size: 12px;
  color: var(--color-gray-500);
}

.collection-progress {
  display: flex;
  align-items: center;
  gap: 12px;
}

.collection-progress-bar {
  width: 120px;
  height: 8px;
  background: var(--color-gray-100);
  border-radius: 4px;
  overflow: hidden;
}

.collection-progress-fill {
  height: 100%;
  width: var(--progress, 0%);
  background: var(--color-primary);
  border-radius: 4px;
  transition: width 0.3s ease;
}

.collection-progress-fill.overdue { background: var(--color-error); }
.collection-progress-fill.complete { background: var(--color-success); }

.collection-percent {
  font-size: 13px;
  font-weight: 600;
  color: var(--color-navy-dark);
  min-width: 40px;
}

.collection-amounts {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.amount-paid {
  font-size: 13px;
  color: var(--color-navy-dark);
}

.amount-remaining {
  font-size: 12px;
  color: var(--color-gray-500);
}

.amount-remaining.text-danger { color: var(--color-error); }
.amount-remaining.text-success { color: var(--color-success); }

.badge-paid {
  background: var(--color-success-light);
  color: var(--color-success);
}

/* Responsive Design */
@media (max-width: 968px) {
  .landing-container {
    grid-template-columns: 1fr;
  }

  .application-card {
    position: static;
  }

  .admin-sidebar {
    width: 200px;
  }

  .admin-main {
    margin-left: 200px;
  }

  .student-detail-container {
    grid-template-columns: 1fr;
  }

  .info-cards-grid {
    grid-template-columns: 1fr;
  }

  .plan-quick-actions {
    grid-template-columns: 1fr;
  }

  .ledger-summary-cards {
    grid-template-columns: repeat(2, 1fr);
  }

  .instructor-content-grid {
    grid-template-columns: 1fr;
  }

  .staff-stats-pills {
    flex-wrap: wrap;
  }

  .course-stats-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .course-overview-grid {
    grid-template-columns: 1fr;
  }

  .course-details-grid {
    grid-template-columns: 1fr 1fr;
  }

  .enrollment-stats-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .schedule-details-grid {
    grid-template-columns: 1fr;
  }

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

  .financial-summary-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .collection-status-item {
    grid-template-columns: 1fr 1fr;
    gap: 16px;
  }
}

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

  .course-stats-grid-2 {
    grid-template-columns: 1fr;
    max-width: none;
  }

  .course-details-grid {
    grid-template-columns: 1fr;
  }

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

  .financial-summary-grid {
    grid-template-columns: 1fr;
  }

  .collection-status-item {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .revenue-bars {
    height: auto;
    flex-wrap: wrap;
    gap: 16px;
  }

  .bar-container {
    height: 100px;
  }

  .ledger-summary-cards {
    grid-template-columns: 1fr;
  }

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

  .staff-controls {
    flex-direction: column;
  }

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

  .quick-actions-grid {
    grid-template-columns: 1fr;
  }

  .form-row {
    grid-template-columns: 1fr;
  }

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

  .student-tabs {
    overflow-x: auto;
  }
}

/* ===== Terms Page Styles ===== */
.terms-page { }
.terms-table-container { background: var(--color-white); border-radius: 8px; box-shadow: 0 1px 3px rgba(0,0,0,0.1); }
.terms-table { width: 100%; border-collapse: collapse; }
.terms-table thead { background: var(--color-gray-50); border-bottom: 2px solid var(--color-gray-200); }
.terms-table th { padding: 12px 16px; text-align: left; font-size: 11px; font-weight: 600; color: var(--color-gray-500); letter-spacing: 0.5px; }
.term-row { border-bottom: 1px solid var(--color-gray-100); cursor: pointer; transition: background 0.2s; }
.term-row:hover { background: var(--color-primary-light); }
.term-row.placeholder-row { opacity: 0.6; cursor: default; }
.terms-table td { padding: 16px; }
.terms-table .col-right { text-align: right; }
.term-cell { display: flex; align-items: center; gap: 12px; }
.term-icon { width: 40px; height: 40px; background: var(--color-info-light); border-radius: 8px; display: flex; align-items: center; justify-content: center; font-size: 24px; }
.term-info { display: flex; flex-direction: column; gap: 4px; }
.term-name { font-weight: 500; color: var(--color-navy-dark); font-size: 14px; }
.term-code { font-size: 12px; color: var(--color-gray-500); padding: 2px 8px; background: var(--color-gray-50); border-radius: 4px; }
.term-program { font-size: 12px; color: var(--color-gray-400); }
.term-icon-box { width: 48px; height: 48px; background: var(--color-info-light); border-radius: 8px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.term-icon-inner { font-size: 24px; color: var(--color-primary); }
.term-title-row { display: flex; align-items: center; gap: 12px; margin-bottom: 8px; }
.term-dates { display: flex; flex-direction: column; gap: 4px; font-size: 13px; color: var(--color-gray-500); }
.deadline-text { font-size: 12px; color: var(--color-gray-400); }
.count-badge { font-size: 13px; color: var(--color-gray-500); }
.status-planning { background: var(--color-info-light); color: var(--color-primary-hover); }
.status-open { background: var(--color-success-light); color: var(--color-success); }
.status-closed { background: var(--color-gray-50); color: var(--color-gray-400); }
.status-archived { background: var(--color-purple-50); color: var(--color-purple-700); }

/* Term Detail */
.term-detail-page .info-grid { grid-template-columns: 1fr; }
.term-detail-page .section-title { margin-top: 0; }
.term-detail-header { display: flex; justify-content: space-between; align-items: start; margin-bottom: 20px; }
.term-header-info { display: flex; gap: 20px; align-items: center; }
.term-header-icon { width: 64px; height: 64px; background: var(--color-info-light); border-radius: var(--radius-lg); display: flex; align-items: center; justify-content: center; font-size: 32px; }
.term-detail-title { font-size: 24px; font-weight: 600; color: var(--color-navy-dark); margin: 0; }
.term-header-meta { display: flex; gap: 16px; font-size: 13px; color: var(--color-gray-500); margin-bottom: 8px; }
.term-date-range { font-size: 14px; color: var(--color-gray-500); }
.term-status-pills { display: flex; gap: 8px; margin-bottom: 24px; position: relative; }
.term-status-pill { padding: 8px 20px; border: 1px solid var(--color-gray-200); background: var(--color-white); border-radius: 20px; font-size: 13px; font-weight: 500; color: var(--color-gray-500); cursor: pointer; transition: all 0.2s; }
.term-status-pill.active { background: var(--color-primary); color: white; border-color: var(--color-primary); }
.demo-lifecycle-badge { position: absolute; top: -10px; right: 0; background: var(--color-warning); color: white; font-size: 10px; font-weight: 600; padding: 2px 8px; border-radius: var(--radius-lg); }
.term-stats-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-bottom: 32px; }
.term-stats-grid.term-stats-grid-3 { grid-template-columns: repeat(3, 1fr); }
.term-stat-card { background: var(--color-white); border: 1px solid var(--color-gray-100); border-radius: 8px; padding: 20px; display: flex; align-items: center; gap: 16px; }
.term-stat-icon { width: 48px; height: 48px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 24px; background: var(--color-gray-50); }
.term-stat-content { flex: 1; }
.term-stat-label { font-size: 13px; color: var(--color-gray-500); margin-bottom: 4px; }
.term-stat-value { font-size: 24px; font-weight: 700; color: var(--color-navy-dark); }
.term-tabs { display: flex; gap: 8px; border-bottom: 2px solid var(--color-border-light); margin-bottom: 32px; }
.term-tab-content { display: block; }
.term-overview-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-bottom: 24px; }
.term-section-card { background: var(--color-white); border: 1px solid var(--color-gray-100); border-radius: 8px; padding: 24px; }
.term-section-card.full-width { grid-column: 1 / -1; }
.key-dates-list { display: flex; flex-direction: column; gap: 12px; }
.key-date-item { display: flex; justify-content: space-between; padding: 12px; background: var(--color-gray-50); border-radius: var(--radius-sm); }
.key-date-label { font-size: 14px; color: var(--color-gray-500); }
.key-date-value { font-size: 14px; font-weight: 500; color: var(--color-navy-dark); }
.regional-list { display: flex; flex-direction: column; gap: 12px; }
.regional-item { display: flex; align-items: start; gap: 12px; padding: 12px; background: var(--color-gray-50); border-radius: var(--radius-sm); }
.regional-icon { font-size: 20px; }
.regional-info { flex: 1; }
.regional-name { font-size: 14px; font-weight: 500; color: var(--color-navy-dark); margin-bottom: 4px; }
.regional-meta { font-size: 12px; color: var(--color-gray-500); line-height: 1.5; }
.enrollment-progress-section { display: flex; flex-direction: column; gap: 16px; }
.overall-progress-label { font-size: 14px; color: var(--color-gray-500); }
.overall-progress-value { font-size: 32px; font-weight: 700; color: var(--color-navy-dark); }
.progress-breakdown { display: flex; justify-content: space-around; margin-top: 16px; }
.breakdown-item { text-align: center; }
.breakdown-number { font-size: 24px; font-weight: 700; color: var(--color-navy-dark); margin-bottom: 4px; }
.breakdown-label { font-size: 13px; color: var(--color-gray-500); }
.term-activity-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 60px 20px; }
.term-activity-icon { font-size: 64px; opacity: 0.2; margin-bottom: 16px; }
.term-activity-text { font-size: 14px; color: var(--color-gray-400); }

/* Term Courses Tab */
.term-courses-table { width: 100%; background: var(--color-white); border: 1px solid var(--color-gray-100); border-radius: 8px; border-collapse: collapse; overflow: hidden; }
.term-courses-table thead { background: var(--color-gray-50); }
.term-courses-table th { padding: 12px 16px; text-align: left; font-size: 11px; font-weight: 600; color: var(--color-gray-500); letter-spacing: 0.5px; border-bottom: 1px solid var(--color-gray-100); }
.term-courses-table td { padding: 16px; font-size: 14px; border-bottom: 1px solid var(--color-gray-100); }
.term-courses-table tbody tr:last-child td { border-bottom: none; }
.term-course-cell { display: flex; align-items: center; gap: 12px; }
.term-course-icon { width: 36px; height: 36px; background: var(--color-info-light); border-radius: var(--radius-sm); display: flex; align-items: center; justify-content: center; font-size: 20px; }
.term-course-info { display: flex; flex-direction: column; gap: 6px; }
.term-course-name { font-size: 14px; font-weight: 500; color: var(--color-navy-dark); }
.term-course-badge { display: inline-block; padding: 2px 8px; border-radius: var(--radius-lg); font-size: 11px; font-weight: 500; }
.course-campus-info { display: flex; flex-direction: column; gap: 4px; }
.campus-region { font-size: 14px; color: var(--color-navy-dark); font-weight: 500; }
.campus-name-small { font-size: 12px; color: var(--color-gray-500); line-height: 1.4; }
.delivery-mode { font-size: 11px; color: var(--color-gray-400); font-style: italic; margin-top: 2px; }
.enrollment-fraction { display: flex; flex-direction: column; gap: 4px; }
.fraction-value { font-size: 16px; font-weight: 600; color: var(--color-navy-dark); }
.fraction-label { font-size: 12px; color: var(--color-gray-500); }
.applications-count { font-size: 12px; color: var(--color-gray-500); }
.course-progress-info { display: flex; flex-direction: column; gap: 6px; min-width: 100px; }
.course-progress-value { font-size: 13px; font-weight: 500; color: var(--color-navy-dark); }
.course-dates-info { display: flex; flex-direction: column; }
.course-dates-value { font-size: 13px; font-weight: 500; color: var(--color-navy-dark); white-space: nowrap; }
.course-dates { display: flex; gap: 2px; }
.course-dates .date-value { font-size: 13px; color: var(--color-navy-dark); white-space: nowrap; }

/* Term Enrollments Tab */
.term-enrollments-table { width: 100%; background: var(--color-white); border: 1px solid var(--color-gray-100); border-radius: 8px; border-collapse: collapse; overflow: visible; }
.term-enrollments-table thead { background: var(--color-gray-50); }
.term-enrollments-table th { padding: 12px 16px; text-align: left; font-size: 11px; font-weight: 600; color: var(--color-gray-500); letter-spacing: 0.5px; border-bottom: 1px solid var(--color-gray-100); }
.term-enrollments-table td { padding: 16px; font-size: 13px; border-bottom: 1px solid var(--color-gray-100); }
.term-enrollments-table tbody tr:last-child td { border-bottom: none; }
.term-enrollment-student { display: flex; align-items: center; gap: 12px; }
.term-enrollment-avatar { width: 40px; height: 40px; background: var(--color-primary); color: white; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 600; }
.term-enrollment-info { display: flex; flex-direction: column; }
.term-enrollment-name { font-size: 14px; font-weight: 500; color: var(--color-navy-dark); }
.term-enrollment-email { font-size: 12px; color: var(--color-gray-500); }
.enrollment-campus { display: flex; flex-direction: column; gap: 4px; font-size: 13px; color: var(--color-navy-dark); }
.enrollment-campus-region { font-size: 12px; color: var(--color-gray-500); }
.badge-pending { background: var(--color-warning-light); color: var(--color-warning); }
.badge-deposit-paid { background: var(--color-success-light); color: var(--color-success); }
.badge-payment-pending { background: var(--color-warning-light); color: var(--color-warning); }

/* Timeline Tab */
.timeline-list { display: flex; flex-direction: column; gap: 24px; }
.timeline-item { display: flex; gap: 20px; position: relative; }
.timeline-indicator { width: 16px; height: 16px; border-radius: 50%; background: var(--color-primary); flex-shrink: 0; margin-top: 4px; }
.timeline-indicator.upcoming { background: var(--color-primary); }
.timeline-content { flex: 1; }
.timeline-header { display: grid; grid-template-columns: 1fr 120px auto; align-items: center; margin-bottom: 8px; gap: 16px; }
.timeline-title { font-size: 15px; font-weight: 600; color: var(--color-navy-dark); }
.timeline-date { font-size: 13px; color: var(--color-gray-500); text-align: center; }
.timeline-badge { display: inline-block; padding: 4px 12px; border-radius: var(--radius-lg); font-size: 12px; font-weight: 500; }
.badge-upcoming { background: var(--color-info-light); color: var(--color-primary-hover); }
.timeline-description { font-size: 14px; color: var(--color-gray-500); line-height: 1.5; }

/* ===== Campuses Page Styles ===== */
.campuses-page { max-width: 1600px; }
.campuses-table-container { background: var(--color-white); border-radius: 8px; box-shadow: 0 1px 3px rgba(0,0,0,0.1); }
.campuses-table { width: 100%; border-collapse: collapse; }
.campuses-table thead { background: var(--color-gray-50); border-bottom: 2px solid var(--color-gray-200); }
.campuses-table th { padding: 12px 16px; text-align: left; font-size: 11px; font-weight: 600; color: var(--color-gray-500); letter-spacing: 0.5px; }
.campus-row { border-bottom: 1px solid var(--color-gray-100); cursor: pointer; transition: background 0.2s; }
.campus-row:hover { background: var(--color-primary-light); }
.campus-row.placeholder-row { opacity: 0.6; cursor: default; }
.campuses-table td { padding: 16px; vertical-align: middle; }
.campuses-table .col-center { text-align: center; }
.campuses-table .col-right { text-align: right; }

/* Term Page Responsive */
@media (max-width: 968px) {
  .term-stats-grid,
  .term-stats-grid.term-stats-grid-3 { grid-template-columns: repeat(2, 1fr); }
  .term-overview-grid { grid-template-columns: 1fr; }
}

@media (max-width: 600px) {
  .term-stats-grid,
  .term-stats-grid.term-stats-grid-3 { grid-template-columns: 1fr; }
  .term-detail-header { flex-direction: column; gap: 16px; }
}

/* Campus Cell */
.campus-cell { display: flex; align-items: center; gap: 16px; }
.campus-icon-box { width: 48px; height: 48px; background: var(--color-info-light); border-radius: 8px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.campus-icon-inner { font-size: 24px; }
.campus-info { display: flex; flex-direction: column; gap: 2px; }
.campus-name-row { display: flex; align-items: center; gap: 8px; }
.campus-name { font-size: 15px; font-weight: 600; color: var(--color-navy-dark); }
.campus-inline-thumbnail {
  width: 44px;
  height: 28px;
  border-radius: 6px;
  border: 1px solid var(--color-gray-200);
  object-fit: cover;
  flex-shrink: 0;
}
.campus-inline-thumbnail-placeholder {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--color-gray-50);
  color: var(--color-gray-500);
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.02em;
}
.campus-subtitle { font-size: 12px; color: var(--color-gray-500); }
.campus-address { font-size: 12px; color: var(--color-primary); }

/* Contact Cell */
.contact-cell { display: flex; flex-direction: column; gap: 4px; }
.contact-phone { font-size: 13px; color: var(--color-gray-500); }
.contact-email { font-size: 13px; color: var(--color-primary); }

/* Program Badges */
.program-badges { display: flex; flex-wrap: wrap; gap: 6px; }
.program-badge { display: inline-block; padding: 4px 10px; border-radius: var(--radius-lg); font-size: 12px; font-weight: 500; }
.badge-dental { background: var(--color-info-light); color: var(--color-primary-hover); }
.badge-medical { background: var(--color-success-light); color: var(--color-success); }
.badge-pharmacy { background: var(--color-purple-50); color: var(--color-purple-700); }
.badge-default { background: var(--color-gray-50); color: var(--color-gray-500); }

/* Document Type Badge */
.document-type-badge {
  display: inline-block;
  padding: 4px 10px;
  background: var(--color-info-light);
  color: var(--color-primary-hover);
  border-radius: var(--radius-lg);
  font-size: 12px;
  font-weight: 500;
}

/* Table Actions */
.actions-column {
  width: 120px;
  text-align: center;
}

.table-actions {
  display: flex;
  gap: 8px;
  align-items: center;
  justify-content: center;
}

/* Status badges */
.status-pending { background: var(--color-warning-light); color: var(--color-warning); }

/* ===== Campus Detail Page ===== */
.campus-detail-page { max-width: 1400px; }
.campus-detail-header { display: flex; justify-content: space-between; align-items: start; margin-bottom: 24px; }
.campus-header-info { display: flex; gap: 20px; }
.campus-header-icon { width: 64px; height: 64px; background: var(--color-info-light); border-radius: var(--radius-lg); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.campus-icon-large { font-size: 32px; }
.campus-title-row { display: flex; align-items: center; gap: 12px; margin-bottom: 8px; }
.campus-detail-title { font-size: 24px; font-weight: 600; color: var(--color-navy-dark); margin: 0; }
.campus-header-meta { display: flex; align-items: center; gap: 12px; margin-bottom: 8px; }
.meta-item { font-size: 15px; font-weight: 600; color: var(--color-gray-600); }
.campus-background-meta { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.campus-background-label { font-size: 12px; font-weight: 600; color: var(--color-gray-500); text-transform: uppercase; letter-spacing: 0.06em; }
.campus-background-thumbnail {
  width: 112px;
  height: 64px;
  border-radius: 10px;
  border: 1px solid var(--color-gray-200);
  object-fit: cover;
}
.campus-background-thumbnail-placeholder {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--color-gray-50);
  color: var(--color-gray-500);
  font-size: 11px;
  font-weight: 600;
}
.state-badge { display: inline-block; padding: 4px 12px; background: var(--color-info-light); color: var(--color-primary-hover); border-radius: var(--radius-lg); font-size: 12px; font-weight: 500; text-decoration: none; cursor: pointer; transition: all 0.2s; }
.state-badge:hover { background: var(--color-primary); color: var(--color-white); }
.campus-header-address { font-size: 13px; color: var(--color-gray-500); margin-bottom: 8px; }
.campus-timezone { font-size: 12px; color: var(--color-gray-400); margin-top: 4px; display: flex; align-items: center; gap: 4px; }
.campus-timezone svg { width: 12px; height: 12px; }
.campus-programs-badges { display: flex; gap: 8px; }
.program-badge-small { display: inline-block; padding: 4px 10px; border-radius: var(--radius-lg); font-size: 11px; font-weight: 500; }
.btn-outline { padding: 10px 20px; background: var(--color-white); color: var(--color-navy-dark); border: 1px solid var(--color-gray-200); border-radius: var(--radius-sm); font-size: 14px; font-weight: 500; cursor: pointer; transition: all 0.2s; }
.btn-outline:hover { border-color: var(--color-primary); color: var(--color-primary); }

/* Campus Stats Grid */
.campus-stats-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-bottom: 32px; }
.campus-stat-card { background: var(--color-white); border: 1px solid var(--color-gray-100); border-radius: 8px; padding: 20px; display: flex; align-items: center; gap: 16px; }
.stat-courses { background: var(--color-info-light); color: var(--color-primary-hover); }
.stat-active { background: var(--color-success-light); color: var(--color-success); }
.stat-enrollment { background: var(--color-purple-50); color: var(--color-purple-600); }
.stat-students { background: var(--color-warning-light); color: var(--color-warning); }
.stat-instructors { background: var(--color-success-light); color: var(--color-success); }
.stat-completion { background: var(--color-success-light); color: var(--color-success); }
.stat-rating { background: var(--color-amber-50); color: var(--color-amber-600); }

/* Campus Tabs */
.campus-tabs { display: flex; gap: 8px; border-bottom: 2px solid var(--color-border-light); margin-bottom: 32px; }
.campus-tab-content { display: block; }
.campus-tab-content.hidden { display: none; }

/* Campus Overview Grid */
.campus-overview-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.overview-left, .overview-right { display: flex; flex-direction: column; gap: 24px; }
.campus-section-card { background: var(--color-white); border: 1px solid var(--color-gray-100); border-radius: 8px; padding: 24px; margin-top: 2em; }
.campus-description { font-size: 14px; color: var(--color-gray-500); line-height: 1.7; margin: 0; }

/* Subsection Heading */
.subsection-heading { font-size: 13px; font-weight: 600; color: var(--color-navy-dark); margin-bottom: 12px; margin-top: 20px; }
.subsection-heading:first-of-type { margin-top: 0; }

/* Address Section */
.address-section { margin-bottom: 24px; }
.address-text { font-size: 14px; color: var(--color-gray-500); line-height: 1.6; }

/* Schedule Section */
.schedule-section { margin-top: 24px; }
.schedule-item { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.schedule-icon { font-size: 16px; }
.schedule-text { font-size: 14px; color: var(--color-gray-500); }

/* Contact Info */
.contact-info-list { display: flex; flex-direction: column; gap: 16px; }
.contact-info-item { display: flex; align-items: center; gap: 12px; }
.contact-info-icon { font-size: 18px; width: 24px; text-align: center; }
.contact-info-text { font-size: 14px; color: var(--color-navy-dark); }
.contact-info-link { font-size: 14px; color: var(--color-primary); text-decoration: none; }
.contact-info-link:hover { text-decoration: underline; }

/* Requirements */
.requirements-section { margin-top: 20px; }
.requirements-section:first-of-type { margin-top: 0; }
.requirement-item { display: flex; align-items: start; gap: 10px; margin-bottom: 16px; font-size: 14px; }
.requirement-check { color: var(--color-green-500); font-weight: bold; width: 20px; flex-shrink: 0; }
.requirement-circle { color: var(--color-text-muted); width: 20px; text-align: center; flex-shrink: 0; }
.requirement-content { flex: 1; display: flex; flex-direction: column; gap: 4px; }
.requirement-text { font-size: 14px; color: var(--color-text-primary); font-weight: 500; }
.requirement-detail { font-size: 13px; color: var(--color-text-secondary); }

/* Campus Courses Tab */
.campus-courses-table { width: 100%; background: var(--color-white); border: 1px solid var(--color-gray-100); border-radius: 8px; border-collapse: collapse; overflow: hidden; }
.campus-courses-table thead { background: var(--color-gray-50); }
.campus-courses-table th { padding: 12px 16px; text-align: left; font-size: 11px; font-weight: 600; color: var(--color-gray-500); letter-spacing: 0.5px; border-bottom: 1px solid var(--color-gray-100); }
.campus-courses-table td { padding: 16px; font-size: 14px; border-bottom: 1px solid var(--color-gray-100); vertical-align: middle; }
.campus-courses-table tbody tr:last-child td { border-bottom: none; }
.course-cell { display: flex; align-items: center; gap: 12px; }
.course-icon { width: 36px; height: 36px; background: var(--color-info-light); border-radius: var(--radius-sm); display: flex; align-items: center; justify-content: center; font-size: 20px; }
.course-info { display: flex; flex-direction: column; gap: 4px; }
.course-program { font-size: 12px; color: var(--color-gray-500); }

/* Campus Instructors Tab */
.campus-instructors-table { width: 100%; background: var(--color-white); border: 1px solid var(--color-gray-100); border-radius: 8px; border-collapse: collapse; overflow: hidden; }
.campus-instructors-table thead { background: var(--color-gray-50); }
.campus-instructors-table th { padding: 12px 16px; text-align: left; font-size: 11px; font-weight: 600; color: var(--color-gray-500); letter-spacing: 0.5px; border-bottom: 1px solid var(--color-gray-100); }
.campus-instructors-table td { padding: 16px; font-size: 14px; border-bottom: 1px solid var(--color-gray-100); vertical-align: middle; }
.campus-instructors-table tbody tr:last-child td { border-bottom: none; }
.instructor-cell { display: flex; align-items: center; gap: 12px; }
.instructor-avatar { width: 40px; height: 40px; background: var(--color-info-light); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 20px; }
.instructor-info { display: flex; flex-direction: column; gap: 2px; }
.instructor-name { font-size: 14px; font-weight: 500; color: var(--color-navy-dark); }
.instructor-email { font-size: 12px; color: var(--color-gray-500); }

/* Empty State */
.empty-state { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 60px 20px; background: var(--color-white); border: 1px solid var(--color-gray-100); border-radius: 8px; }
.empty-state-icon { font-size: 48px; opacity: 0.3; margin-bottom: 16px; }
.empty-state-text { font-size: 14px; color: var(--color-gray-500); margin-bottom: 20px; }

.documents-empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 80px 20px;
  background: var(--color-gray-50);
  border: 2px dashed var(--color-gray-200);
  border-radius: 8px;
  text-align: center;
}

.documents-empty-state .empty-state-icon {
  margin-bottom: 16px;
}

.documents-empty-state .empty-state-icon iconify-icon {
  width: 64px;
  height: 64px;
  color: var(--color-text-disabled);
}

.documents-empty-state .empty-state-title {
  font-size: 18px;
  font-weight: 600;
  color: var(--color-navy-dark);
  margin: 0 0 8px 0;
}

.documents-empty-state .empty-state-text {
  font-size: 14px;
  color: var(--color-gray-500);
  margin: 0;
  max-width: 400px;
}

/* Facilities Tab */
.facilities-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 20px; }
.facility-card { background: var(--color-white); border: 1px solid var(--color-gray-100); border-radius: 8px; padding: 20px; }
.facility-title { font-size: 13px; font-weight: 600; color: var(--color-gray-500); margin-bottom: 8px; }
.facility-value { font-size: 18px; font-weight: 600; color: var(--color-navy-dark); margin-bottom: 4px; }
.facility-detail { font-size: 12px; color: var(--color-gray-500); }

/* Logistics Tab */
.logistics-info { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; }
.logistics-section { background: var(--color-white); border: 1px solid var(--color-gray-100); border-radius: 8px; padding: 24px; }
.logistics-item { display: flex; justify-content: space-between; padding: 12px 0; border-bottom: 1px solid var(--color-gray-100); }
.logistics-item:last-child { border-bottom: none; }
.logistics-label { font-size: 13px; color: var(--color-gray-500); }
.logistics-value { font-size: 13px; color: var(--color-navy-dark); font-weight: 500; }

/* Campus Page Responsive */
@media (max-width: 1200px) {
  .campus-stats-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 968px) {
  .campus-stats-grid { grid-template-columns: repeat(2, 1fr); }
  .campus-overview-grid { grid-template-columns: 1fr; }
  .logistics-info { grid-template-columns: 1fr; }
}
@media (max-width: 768px) {
  .campus-stats-grid { grid-template-columns: 1fr; }
  .campus-detail-header { flex-direction: column; gap: 20px; }
  .facilities-grid { grid-template-columns: 1fr; }
}

/* ===== Campus Tabs V2 Styles ===== */

/* Courses Tab V2 */
.course-count-label { font-size: 13px; color: var(--color-gray-500); }
.campus-courses-table-v2 { width: 100%; background: var(--color-white); border: 1px solid var(--color-gray-100); border-radius: 8px; border-collapse: collapse; }
.campus-courses-table-v2 thead { background: var(--color-gray-50); }
.campus-courses-table-v2 th { padding: 12px 16px; text-align: left; font-size: 11px; font-weight: 600; color: var(--color-gray-500); letter-spacing: 0.5px; border-bottom: 1px solid var(--color-gray-100); }
.campus-courses-table-v2 td { padding: 16px; font-size: 14px; border-bottom: 1px solid var(--color-gray-100); vertical-align: middle; }
.campus-courses-table-v2 tbody tr:last-child td { border-bottom: none; }
.campus-courses-table-v2 tbody tr[onclick] { cursor: pointer; }
.campus-courses-table-v2 tbody tr[onclick]:hover { background-color: var(--color-bg-light); }

.course-cell-v2 { display: flex; align-items: flex-start; gap: 12px; }
.course-icon-v2 { width: 36px; height: 36px; background: var(--color-info-light); border-radius: var(--radius-sm); display: flex; align-items: center; justify-content: center; font-size: 18px; flex-shrink: 0; }
.course-info-v2 { display: flex; flex-direction: column; gap: 6px; }
.course-name-v2 { font-size: 14px; font-weight: 500; color: var(--color-navy-dark); line-height: 1.3; }

.type-format-cell { display: flex; flex-direction: column; gap: 2px; }
.type-text { font-size: 14px; color: var(--color-navy-dark); }
.format-text { font-size: 12px; color: var(--color-gray-500); }

.term-dates-cell { display: flex; flex-direction: column; gap: 2px; }
.term-text { font-size: 14px; font-weight: 500; color: var(--color-navy-dark); }
.dates-text { font-size: 12px; color: var(--color-gray-500); }

.enrollment-cell-v2 { min-width: 100px; }
.enrollment-fraction-row { display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px; }
.enrollment-numbers { font-size: 14px; font-weight: 600; color: var(--color-navy-dark); }
.enrollment-percent { font-size: 12px; color: var(--color-gray-500); }
.enrollment-progress-bar { height: 6px; background: var(--color-gray-200); border-radius: 3px; overflow: hidden; margin-bottom: 4px; }
.enrollment-progress-fill { height: 100%; width: var(--progress, 0%); background: var(--color-primary); border-radius: 3px; transition: width 0.3s; }
.enrollment-available { font-size: 11px; color: var(--color-gray-500); }

.tuition-cell { font-size: 14px; font-weight: 500; color: var(--color-navy-dark); }

/* Instructors Tab V2 */
.instructors-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; }
.instructor-card { background: white; border: 1px solid var(--color-border); border-radius: 8px; padding: 20px; transition: all 0.2s; position: relative; }
.instructor-card:hover { background-color: var(--color-bg-light); }
.instructor-card-header.clickable:hover { cursor: pointer; }
.instructor-card-actions { position: absolute; top: 12px; right: 12px; }
.btn-remove-instructor { width: 28px; height: 28px; border: none; background: var(--color-gray-100); border-radius: 50%; cursor: pointer; display: flex; align-items: center; justify-content: center; color: var(--color-gray-500); transition: all 0.2s; opacity: 0; }
.instructor-card:hover .btn-remove-instructor,
.instructor-card:focus-within .btn-remove-instructor { opacity: 1; }
.btn-remove-instructor:hover { background: var(--color-red-100); color: var(--color-red-500); }

@media (hover: none) {
  .btn-remove-instructor-small,
  .btn-remove-instructor {
    opacity: 1;
  }
}

.instructor-card-header { display: flex; align-items: flex-start; gap: 16px; margin-bottom: 16px; }
.instructor-card-avatar { width: 56px; height: 56px; background: var(--color-primary); border-radius: 50%; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.instructor-card-avatar.avatar-secondary { background: var(--color-gray-200); }
.avatar-text { font-size: 10px; color: white; text-align: center; line-height: 1.2; font-weight: 500; }
.avatar-icon { font-size: 24px; }
.instructor-card-info { flex: 1; }
.instructor-card-name { font-size: 15px; font-weight: 600; color: var(--color-navy-dark); margin-bottom: 4px; }
.instructor-card-role { font-size: 13px; color: var(--color-gray-500); }
.instructor-specializations { border-top: 1px solid var(--color-gray-100); padding-top: 12px; }
.specializations-label { font-size: 12px; font-weight: 600; color: var(--color-gray-500); margin-bottom: 8px; }
.specializations-badges { display: flex; flex-wrap: wrap; gap: 6px; }
.specialization-badge { display: inline-block; padding: 4px 10px; background: var(--color-gray-50); border: 1px solid var(--color-gray-100); border-radius: var(--radius-lg); font-size: 12px; color: var(--color-gray-500); }

/* Instructor Add Dropdown */
.instructor-add-dropdown {
  position: relative;
  width: 320px;
}

.instructor-add-search {
  width: 100%;
  padding: 10px 14px;
  border: 1px solid var(--color-gray-300);
  border-radius: var(--radius-sm);
  font-size: 14px;
  color: var(--color-navy-dark);
  transition: border-color 0.2s, box-shadow 0.2s;
}

.instructor-add-search:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(33, 150, 243, 0.1);
}

.instructor-add-search::placeholder {
  color: var(--color-gray-400);
}

.instructor-add-dropdown-list {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  background: var(--color-white);
  border: 1px solid var(--color-gray-300);
  border-radius: var(--radius-sm);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  max-height: 320px;
  overflow-y: auto;
  z-index: 1000;
}

.instructor-add-option {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
  cursor: pointer;
  transition: background-color 0.15s;
  border-bottom: 1px solid var(--color-gray-100);
}

.instructor-add-option:last-child {
  border-bottom: none;
}

.instructor-add-option:hover {
  background-color: var(--color-bg-hover);
}

.instructor-option-avatar {
  width: 40px;
  height: 40px;
  background: var(--color-primary);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.avatar-text-small {
  font-size: 14px;
  color: white;
  font-weight: 500;
}

.instructor-option-info {
  flex: 1;
  min-width: 0;
}

.instructor-option-name {
  font-size: 14px;
  font-weight: 500;
  color: var(--color-navy-dark);
  margin-bottom: 2px;
}

.instructor-option-email {
  font-size: 12px;
  color: var(--color-gray-500);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Course Instructor Select */
.instructor-select-container { position: relative; }
.instructor-select-display {
  width: 100%;
  min-height: 42px;
  padding: 8px 12px;
  border: 1px solid var(--color-gray-300);
  border-radius: var(--radius-sm);
  background: white;
  cursor: pointer;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}
.instructor-select-display:hover { border-color: var(--color-primary); }
.instructor-select-placeholder { color: var(--color-gray-400); font-size: 14px; }
.instructor-select-dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  max-height: 250px;
  overflow-y: auto;
  background: white;
  border: 1px solid var(--color-gray-200);
  border-radius: var(--radius-sm);
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
  z-index: 100;
  margin-top: 4px;
}
.instructor-select-empty {
  padding: 12px;
  text-align: center;
  color: var(--color-gray-500);
  font-size: 13px;
}
.instructor-dropdown-option {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  cursor: pointer;
  transition: background 0.15s;
}
.instructor-dropdown-option:hover { background: var(--color-gray-50); }
.instructor-dropdown-option.selected { background: var(--color-blue-50); }
.instructor-option-checkbox {
  width: 18px;
  height: 18px;
  border: 2px solid var(--color-gray-300);
  border-radius: 3px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  color: var(--color-primary);
  flex-shrink: 0;
}
.instructor-dropdown-option.selected .instructor-option-checkbox {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: white;
}
.instructor-option-avatar {
  width: 32px;
  height: 32px;
  background: var(--color-primary);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  color: white;
  font-weight: 500;
  flex-shrink: 0;
}
.instructor-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 8px;
  background: var(--color-blue-50);
  border: 1px solid var(--color-blue-200);
  border-radius: 16px;
  font-size: 13px;
}
.instructor-chip-avatar {
  width: 20px;
  height: 20px;
  background: var(--color-primary);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 9px;
  color: white;
  font-weight: 500;
}
.instructor-chip-name { color: var(--color-navy-dark); }
.instructor-chip-remove {
  width: 16px;
  height: 16px;
  border: none;
  background: transparent;
  cursor: pointer;
  color: var(--color-gray-400);
  font-size: 14px;
  line-height: 1;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.instructor-chip-remove:hover { color: var(--color-red-500); }
.instructor-chip-add {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--color-gray-100);
  color: var(--color-gray-500);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.15s;
}
.instructor-chip-add:hover {
  background: var(--color-primary);
  color: white;
}
.instructor-dropdown-empty {
  padding: 16px;
  text-align: center;
  color: var(--color-gray-500);
  font-size: 13px;
}

/* Facilities Tab V2 */
.facilities-layout { display: flex; flex-direction: column; gap: 20px; }
.facilities-top-row { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.facility-section-card { background: var(--color-white); border: 1px solid var(--color-gray-100); border-radius: 8px; padding: 24px; }
.facility-section-card.full-width { grid-column: 1 / -1; }

.capacity-section { margin-bottom: 24px; }
.capacity-label { font-size: 13px; font-weight: 600; color: var(--color-gray-500); margin-bottom: 8px; }
.capacity-value { font-size: 24px; font-weight: 700; color: var(--color-primary); }

.equipment-section { }
.equipment-label { font-size: 13px; font-weight: 600; color: var(--color-gray-500); margin-bottom: 12px; }
.equipment-list { display: flex; flex-direction: column; gap: 8px; }
.equipment-item { display: flex; align-items: center; gap: 10px; }
.equipment-check { color: var(--color-success); font-weight: bold; }
.equipment-text { font-size: 14px; color: var(--color-navy-dark); }

.accessibility-section { margin-bottom: 24px; }
.accessibility-label { font-size: 13px; font-weight: 600; color: var(--color-gray-500); margin-bottom: 12px; }
.accessibility-list { display: flex; flex-direction: column; gap: 8px; }
.accessibility-item { display: flex; align-items: center; gap: 10px; }
.accessibility-check { color: var(--color-success); font-weight: bold; }
.accessibility-text { font-size: 14px; color: var(--color-navy-dark); }

.amenities-section { }
.amenities-label { font-size: 13px; font-weight: 600; color: var(--color-gray-500); margin-bottom: 12px; }
.amenities-list { display: flex; flex-direction: column; gap: 8px; }
.amenity-item { display: flex; align-items: center; gap: 10px; }
.amenity-icon { color: var(--color-amber-500); font-size: 14px; }
.amenity-text { font-size: 14px; color: var(--color-navy-dark); }

.financial-options-grid { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 32px; }
.financial-column { }
.financial-column-label { font-size: 13px; font-weight: 600; color: var(--color-gray-500); margin-bottom: 12px; }
.payment-methods-list { display: flex; flex-direction: column; gap: 8px; }
.payment-method-item { display: flex; align-items: center; gap: 10px; }
.payment-icon { font-size: 14px; }
.payment-text { font-size: 14px; color: var(--color-navy-dark); }
.financial-status { display: flex; align-items: center; gap: 8px; }
.status-check { color: var(--color-success); font-weight: bold; }
.status-text { font-size: 14px; color: var(--color-navy-dark); }

/* Logistics Tab V2 */
.logistics-layout { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.logistics-card { background: var(--color-white); border: 1px solid var(--color-gray-100); border-radius: 8px; padding: 24px; }
.logistics-section-v2 { margin-bottom: 20px; }
.logistics-section-v2:last-child { margin-bottom: 0; }
.logistics-section-title { font-size: 14px; font-weight: 600; color: var(--color-navy-dark); margin-bottom: 8px; }
.logistics-section-text { font-size: 14px; color: var(--color-gray-500); line-height: 1.5; margin: 0; }

.map-placeholder { display: flex; flex-direction: column; align-items: center; justify-content: center; height: 200px; background: var(--color-gray-50); border: 1px solid var(--color-gray-100); border-radius: 8px; }
.map-pin { font-size: 32px; margin-bottom: 8px; }
.map-label { font-size: 14px; color: var(--color-gray-500); margin-bottom: 4px; }
.map-address { font-size: 12px; color: var(--color-gray-400); text-align: center; line-height: 1.4; }

/* Responsive for new tabs */
@media (max-width: 968px) {
  .instructors-grid { grid-template-columns: 1fr; }
  .facilities-top-row { grid-template-columns: 1fr; }
  .financial-options-grid { grid-template-columns: 1fr; gap: 24px; }
  .logistics-layout { grid-template-columns: 1fr; }
}

/* Region Courses Tab */
.region-courses-table { width: 100%; background: var(--color-white); border: 1px solid var(--color-gray-100); border-radius: 8px; border-collapse: collapse; }
.region-courses-table thead { background: var(--color-gray-50); }
.region-courses-table th { padding: 12px 16px; text-align: left; font-size: 11px; font-weight: 600; color: var(--color-gray-500); letter-spacing: 0.5px; border-bottom: 1px solid var(--color-gray-100); }
.region-courses-table td { padding: 16px; font-size: 14px; border-bottom: 1px solid var(--color-gray-100); vertical-align: middle; }
.region-courses-table tbody tr:last-child td { border-bottom: none; }

.course-badges-row { display: flex; gap: 6px; margin-top: 4px; }
.format-badge { display: inline-block; padding: 4px 10px; background: var(--color-gray-50); border: 1px solid var(--color-gray-100); border-radius: var(--radius-lg); font-size: 11px; color: var(--color-gray-500); }
.schedule-cell { display: flex; flex-direction: column; gap: 2px; }
.schedule-term { font-size: 14px; font-weight: 500; color: var(--color-navy-dark); }
.schedule-dates { font-size: 12px; color: var(--color-gray-500); }
.simple-text { font-size: 14px; color: var(--color-navy-dark); }
.status-published { background: var(--color-info-light); color: var(--color-primary-hover); }

/* Compliance Tab */
.compliance-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 24px; padding-bottom: 16px; border-bottom: 1px solid var(--color-gray-100); }
.compliance-info-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-bottom: 32px; background: var(--color-gray-50); padding: 20px; border-radius: 8px; }
.compliance-info-item { }
.compliance-info-label { font-size: 12px; color: var(--color-gray-500); margin-bottom: 4px; font-weight: 600; }
.compliance-info-value { font-size: 14px; color: var(--color-navy-dark); }
.compliance-section { background: var(--color-white); border: 1px solid var(--color-gray-100); border-radius: 8px; padding: 24px; margin-bottom: 20px; }
.compliance-section-title { font-size: 16px; font-weight: 600; color: var(--color-navy-dark); margin-bottom: 16px; }
.compliance-requirements-list { display: flex; flex-direction: column; gap: 12px; }
.compliance-requirement-item { display: flex; align-items: center; gap: 12px; font-size: 14px; color: var(--color-navy-dark); }
.compliance-req-check { color: var(--color-success); font-weight: bold; font-size: 16px; }
.compliance-req-text { }
.compliance-actions-row { display: flex; gap: 12px; }

/* Responsive for Region Detail */
@media (max-width: 968px) {
  .compliance-info-grid { grid-template-columns: 1fr; }
}

/* ===== Finances Page Styles ===== */
.finances-page { max-width: 1600px; }

/* Date Range Filter */
.finance-range-filter {
  background: var(--color-white);
  border: 1px solid var(--color-gray-100);
  border-radius: 12px;
  padding: 16px 20px;
  margin-bottom: 20px;
  box-shadow: var(--shadow-sm);
}

.range-filter-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}

.range-filter-title {
  margin: 0;
  font-size: 15px;
  font-weight: 600;
  color: var(--color-navy-dark);
}

.range-filter-subtitle {
  margin: 2px 0 0;
  font-size: 12px;
  color: var(--color-gray-500);
}

.range-active-summary {
  font-size: 13px;
  color: var(--color-gray-600);
}

.range-filter-controls {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: flex-end;
  flex-wrap: wrap;
}

.range-presets {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.range-chip {
  display: inline-flex;
  align-items: center;
  padding: 7px 12px;
  border: 1px solid var(--color-gray-200);
  border-radius: 999px;
  background: var(--color-white);
  color: var(--color-gray-600);
  text-decoration: none;
  font-size: 12px;
  font-weight: 500;
  transition: all 0.2s;
}

.range-chip:hover {
  border-color: var(--color-primary);
  color: var(--color-primary);
}

.range-chip.active {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: var(--color-white);
}

.range-custom-form {
  display: flex;
  align-items: flex-end;
  gap: 10px;
  flex-wrap: wrap;
}

.range-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.range-label {
  font-size: 11px;
  font-weight: 600;
  color: var(--color-gray-500);
  text-transform: uppercase;
  letter-spacing: 0.4px;
}

.range-date-input {
  min-width: 145px;
  padding: 8px 10px;
  border: 1px solid var(--color-gray-200);
  border-radius: var(--radius-sm);
  font-size: 13px;
  color: var(--color-navy-dark);
  background: var(--color-white);
}

.range-date-input:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 2px rgba(44, 154, 245, 0.15);
}

/* Salesforce Button */
.btn-salesforce { padding: 10px 20px; background: var(--color-white); color: var(--color-primary); border: 1px solid var(--color-blue-500); border-radius: var(--radius-sm); font-size: 14px; font-weight: 500; cursor: pointer; transition: all 0.2s; display: flex; align-items: center; gap: 8px; }
.btn-salesforce:hover { background: var(--color-info-light); }

/* Finance Stats Pills */
.finance-stats-pills { display: flex; gap: 16px; margin-bottom: 32px; }
.finance-pill { background: var(--color-white); border: 1px solid var(--color-gray-100); border-radius: 8px; padding: 16px 24px; display: flex; flex-direction: column; align-items: center; min-width: 120px; }
.pill-value { font-size: 24px; font-weight: 700; margin-bottom: 4px; }
.pill-label { font-size: 12px; color: var(--color-gray-500); }
.pill-collected .pill-value { color: var(--color-success); }
.pill-overdue .pill-value { color: var(--color-error); }
.pill-plans .pill-value { color: var(--color-primary); }
.pill-risk .pill-value { color: var(--color-warning); }
.pill-recovery .pill-value { color: var(--color-gray-500); }

/* Today's Focus */
.todays-focus-section { background: var(--color-gray-50); border-radius: 8px; padding: 24px; margin-bottom: 24px; }
.focus-cards-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 16px; }
.focus-card { background: var(--color-white); border-radius: 8px; padding: 16px; display: flex; align-items: center; gap: 16px; }
.focus-high-priority { border-left: 4px solid var(--color-red-500); }
.focus-warning { border-left: 4px solid var(--color-orange-500); }
.focus-success { border-left: 4px solid var(--color-green-500); }
.focus-icon-wrapper { width: 40px; height: 40px; border-radius: 50%; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.focus-high-priority .focus-icon-wrapper { background: var(--color-error-light); }
.focus-warning .focus-icon-wrapper { background: var(--color-warning-light); }
.focus-success .focus-icon-wrapper { background: var(--color-success-light); }
.focus-icon { width: 20px; height: 20px; color: inherit; }
.focus-content { flex: 1; }
.focus-title { font-size: 14px; font-weight: 600; color: var(--color-navy-dark); margin-bottom: 2px; }
.focus-subtitle { font-size: 12px; color: var(--color-gray-500); }

/* Finance Search Row */
.finance-search-row { display: flex; gap: 12px; margin-bottom: 16px; }
.finance-search-row .search-box { flex: 1; }
.overdue-filter { padding: 10px 16px; border: 1px solid var(--color-gray-200); border-radius: var(--radius-sm); font-size: 14px; color: var(--color-navy-dark); background: var(--color-white); cursor: pointer; min-width: 180px; }

/* Finance Table */
.finance-table-container { background: var(--color-white); border-radius: 8px; box-shadow: 0 1px 3px rgba(0,0,0,0.1); overflow: hidden; }
.finance-table { width: 100%; border-collapse: collapse; }
.finance-table thead { background: var(--color-gray-50); border-bottom: 2px solid var(--color-gray-200); }
.finance-table th { padding: 12px 16px; text-align: left; font-size: 11px; font-weight: 600; color: var(--color-gray-500); letter-spacing: 0.5px; }
.finance-row { border-bottom: 1px solid var(--color-gray-100); transition: background 0.2s; }
.finance-row:hover { background: var(--color-primary-light); }
.finance-row-high-priority { background: rgba(255, 235, 238, 0.3); }
.finance-row-high-priority:hover { background: rgba(255, 235, 238, 0.5); }
.finance-row-failed { background: rgba(244, 67, 54, 0.08); }
.finance-row-failed:hover { background: rgba(244, 67, 54, 0.12); }
.finance-table td { padding: 16px; vertical-align: middle; font-size: 14px; }

.priority-flame { width: 16px; height: 16px; margin-right: 8px; color: var(--color-error); vertical-align: middle; }

.overdue-amount { font-weight: 600; }
.overdue-5d { color: var(--color-error); }
.overdue-1d { color: var(--color-error); }
.overdue-6d { color: var(--color-error); }
.overdue-56d { color: var(--color-error); }
.overdue-high { color: var(--color-error); background: rgba(211, 47, 47, 0.1); padding: 4px 8px; border-radius: 4px; }
.overdue-normal { color: var(--color-warning); background: rgba(245, 124, 0, 0.1); padding: 4px 8px; border-radius: 4px; }

.student-cell { display: flex; align-items: center; gap: 8px; }
.student-name { font-weight: 500; color: var(--color-navy-dark); }
.student-email { font-size: 12px; color: var(--color-gray-500); }

.balance-cell { font-weight: 500; color: var(--color-navy-dark); }
.due-cell { color: var(--color-gray-500); }

.card-cell { text-align: center; }
.card-check { color: var(--color-success); font-weight: bold; font-size: 16px; }

.priority-badge { display: inline-block; padding: 4px 12px; border-radius: var(--radius-lg); font-size: 12px; font-weight: 600; }
.priority-high { background: var(--color-error-light); color: var(--color-error); }
.priority-medium { background: var(--color-warning-light); color: var(--color-warning); }
.priority-low { background: var(--color-gray-50); color: var(--color-gray-500); }

.action-badge { display: inline-block; padding: 4px 12px; border-radius: var(--radius-lg); font-size: 12px; font-weight: 500; }
.action-active { background: var(--color-success-light); color: var(--color-success); }
.action-restructured { background: var(--color-warning-light); color: var(--color-warning); }
.action-failed { background: var(--color-error-light); color: var(--color-error); }

.btn-action-primary { padding: 8px 16px; background: var(--color-primary); color: white; border: none; border-radius: var(--radius-sm); font-size: 13px; font-weight: 500; cursor: pointer; transition: background 0.2s; }
.btn-action-primary:hover { background: var(--color-primary-hover); }

/* Ledger Health Page */
.ledger-health-page .page-header { margin-bottom: 16px; }
.ledger-health-banner {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  border-radius: 10px;
  padding: 14px 16px;
  margin-bottom: 16px;
  border: 1px solid var(--color-gray-200);
  background: var(--color-white);
}
.ledger-health-banner.is-healthy {
  border-color: var(--color-green-200);
  background: var(--color-success-light);
}
.ledger-health-banner.is-warning {
  border-color: var(--color-orange-200);
  background: var(--color-warning-light);
}
.ledger-health-banner.is-critical {
  border-color: var(--color-red-200);
  background: var(--color-error-light);
}
.ledger-health-banner .banner-icon {
  color: var(--color-navy-dark);
  line-height: 1;
}
.ledger-health-banner.is-healthy .banner-icon { color: var(--color-success); }
.ledger-health-banner.is-warning .banner-icon { color: var(--color-warning); }
.ledger-health-banner.is-critical .banner-icon { color: var(--color-error); }
.ledger-health-banner .banner-content h3 {
  margin: 0 0 4px;
  font-size: 16px;
  color: var(--color-navy-dark);
}
.ledger-health-banner .banner-content p {
  margin: 0;
  font-size: 13px;
  color: var(--color-gray-600);
}
.ledger-explainer {
  background: var(--color-white);
  border: 1px solid var(--color-gray-200);
  border-radius: 8px;
  padding: 10px 12px;
  margin-bottom: 14px;
  color: var(--color-gray-600);
  font-size: 13px;
  line-height: 1.45;
}
.ledger-explainer strong {
  color: var(--color-navy-dark);
}

.ledger-health-grid {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-bottom: 18px;
}
.ledger-health-card {
  background: var(--color-white);
  border: 1px solid var(--color-gray-100);
  border-radius: 8px;
  padding: 14px 16px;
}
.ledger-health-card .card-label {
  color: var(--color-gray-500);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.35px;
  text-transform: uppercase;
}
.ledger-health-card .card-value {
  margin-top: 6px;
  color: var(--color-navy-dark);
  font-size: 22px;
  font-weight: 700;
  line-height: 1.1;
}
.ledger-health-card .card-meta {
  margin-top: 4px;
  color: var(--color-gray-500);
  font-size: 12px;
}

.ledger-health-section {
  margin-bottom: 18px;
}
.ledger-health-section .section-header {
  margin-bottom: 8px;
}
.ledger-health-section .section-subtitle {
  color: var(--color-gray-500);
  font-size: 12px;
}
.health-status-badge {
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.25px;
  padding: 3px 10px;
  text-transform: uppercase;
}
.health-status-badge.pass {
  background: var(--color-success-light);
  color: var(--color-success);
}
.health-status-badge.fail {
  background: var(--color-error-light);
  color: var(--color-error);
}
.event-code-list {
  max-width: 420px;
  word-break: break-word;
  white-space: normal;
  font-size: 12px;
  color: var(--color-gray-600);
}
.flags-cell {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

/* Finance Charts Section */
.finance-charts-section { margin-bottom: 32px; }
.finance-analytics-header { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-bottom: 12px; }
.finance-analytics-subtitle { font-size: 13px; color: var(--color-gray-500); }
.finance-charts-grid { display: grid; grid-template-columns: 2fr 1fr; gap: 24px; }

.chart-card-large { grid-column: span 1; }

.chart-legend-info { display: flex; gap: 20px; align-items: center; }
.legend-item { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--color-gray-500); }
.legend-dot { width: 12px; height: 12px; border-radius: 50%; display: inline-block; }
.legend-line { width: 20px; height: 3px; background: var(--color-primary); border-radius: 2px; display: inline-block; }

.chart-container-large { position: relative; height: 320px; }

.chart-footer { display: flex; gap: 24px; margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--color-gray-100); }
.chart-footer-stat { display: flex; flex-direction: column; gap: 4px; }
.footer-stat-label { font-size: 11px; color: var(--color-gray-500); font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; }
.footer-stat-value { font-size: 18px; font-weight: 700; }
.footer-stat-value.green { color: var(--color-success); }
.footer-stat-value.blue { color: var(--color-primary); }
.footer-stat-value.orange { color: var(--color-warning); }

.health-indicators { display: flex; gap: 24px; justify-content: center; }
.health-indicator { display: flex; align-items: center; gap: 8px; }
.health-dot { width: 10px; height: 10px; border-radius: 50%; display: inline-block; }
.health-dot.green { background: var(--color-success); }
.health-dot.orange { background: var(--color-warning); }
.health-dot.red { background: var(--color-error); }
.health-label { font-size: 13px; color: var(--color-gray-500); font-weight: 500; }

/* Responsive for Finances */
@media (max-width: 1200px) {
  .range-filter-top { flex-direction: column; align-items: flex-start; }
  .range-filter-controls { align-items: flex-start; }
  .finance-stats-pills { flex-wrap: wrap; }
  .focus-cards-grid { grid-template-columns: 1fr; }
  .finance-charts-grid { grid-template-columns: 1fr; }
  .ledger-health-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 768px) {
  .range-custom-form { width: 100%; }
  .range-field { width: calc(50% - 6px); }
  .range-date-input { min-width: 0; width: 100%; }
  .finance-stats-pills { flex-direction: column; }
  .finance-search-row { flex-direction: column; }
  .overdue-filter { width: 100%; }
  .finance-analytics-header { flex-direction: column; align-items: flex-start; }
  .chart-legend-info { flex-wrap: wrap; gap: 12px; }
  .chart-footer { flex-direction: column; gap: 12px; }
  .ledger-health-grid { grid-template-columns: 1fr; }
  .flags-cell { min-width: 84px; }
}

/* ===== Login Page Styles ===== */
.login-page { min-height: 100vh; display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, var(--color-navy-light) 0%, var(--color-blue-800) 100%); }
.login-container { width: 100%; max-width: 440px; padding: 20px; }
.login-card { background: var(--color-white); border-radius: var(--radius-lg); padding: 40px; box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2); }
.login-header { margin-bottom: 32px; }
.login-logo { display: flex; align-items: center; gap: 12px; }
.login-logo-icon { width: 48px; height: 48px; background: url("/logo.png") center/contain no-repeat; border-radius: 50%; }
.login-logo-text { display: flex; flex-direction: column; }
.login-logo-title { font-size: 18px; font-weight: 700; color: var(--color-navy-dark); }
.login-logo-subtitle { font-size: 13px; color: var(--color-gray-500); }
.login-title { font-size: 24px; font-weight: 600; color: var(--color-navy-dark); margin-bottom: 8px; }
.login-subtitle { font-size: 14px; color: var(--color-gray-500); margin-bottom: 24px; }

.alert { padding: 12px 16px; border-radius: var(--radius-sm); margin-bottom: 20px; font-size: 14px; }
.alert-error { background: var(--color-error-light); color: var(--color-error); border: 1px solid var(--color-red-200); }

.login-form { }
.form-group { margin-bottom: 20px; }
.form-label { display: block; font-size: 14px; font-weight: 500; color: var(--color-navy-dark); margin-bottom: 6px; }
.form-input { width: 100%; padding: 12px 16px; border: 1px solid var(--color-gray-200); border-radius: var(--radius-sm); font-size: 14px; transition: all 0.2s; }
.form-input:focus { outline: none; border-color: var(--color-primary); box-shadow: 0 0 0 3px rgba(33, 150, 243, 0.1); }
.form-input-error { border-color: var(--color-error); }
.form-error { display: block; margin-top: 6px; font-size: 12px; color: var(--color-error); }

.form-actions { margin-top: 24px; }
.btn-login { width: 100%; padding: 14px; background: var(--color-primary); color: white; border: none; border-radius: var(--radius-sm); font-size: 15px; font-weight: 600; cursor: pointer; transition: background 0.2s; }
.btn-login:hover { background: var(--color-primary-hover); }

.login-links { margin-top: 16px; text-align: center; }
.login-link { font-size: 13px; color: var(--color-primary); text-decoration: none; }
.login-link:hover { text-decoration: underline; }

.login-footer { margin-top: 32px; padding-top: 20px; border-top: 1px solid var(--color-gray-100); }
.login-footer-text { font-size: 13px; color: var(--color-gray-500); text-align: center; margin: 0; }
.login-footer-link { color: var(--color-primary); text-decoration: none; }
.login-footer-link:hover { text-decoration: underline; }

/* ===== Users Management Page Styles ===== */
.users-page { }

/* Auth Settings Banner */
.auth-settings-banner { background: linear-gradient(135deg, var(--color-blue-50) 0%, var(--color-purple-50) 100%); border: 1px solid var(--color-blue-500); border-radius: 8px; padding: 20px 24px; margin-bottom: 24px; display: flex; justify-content: space-between; align-items: center; }
.auth-settings-content { display: flex; gap: 32px; flex-wrap: wrap; flex: 1; }
.auth-setting-item { display: flex; align-items: center; gap: 10px; }
.auth-setting-icon { width: 20px; height: 20px; color: var(--color-primary); }
.auth-setting-text { display: flex; flex-direction: column; gap: 2px; }
.auth-setting-label { font-size: 11px; color: var(--color-gray-500); font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; }
.auth-setting-value { font-size: 13px; color: var(--color-navy-dark); font-weight: 500; }
.auth-settings-actions { display: flex; gap: 8px; }
.btn-secondary-small { padding: 8px 16px; background: var(--color-white); color: var(--color-primary); border: 1px solid var(--color-blue-500); border-radius: var(--radius-sm); font-size: 13px; font-weight: 500; cursor: pointer; text-decoration: none; display: inline-flex; align-items: center; gap: 6px; transition: all 0.2s; }
.btn-secondary-small:hover { background: var(--color-primary); color: white; }

.users-stats-row { display: flex; gap: 16px; margin-bottom: 24px; }
.user-stat-pill { background: var(--color-white); border: 1px solid var(--color-gray-100); border-radius: 8px; padding: 16px 24px; text-align: center; flex: 1; }
.stat-pill-value { font-size: 28px; font-weight: 700; color: var(--color-navy-dark); margin-bottom: 4px; }
.stat-pill-label { font-size: 12px; color: var(--color-gray-500); }

.users-table-container { background: var(--color-white); border-radius: 8px; box-shadow: 0 1px 3px rgba(0,0,0,0.1); overflow: hidden; }
.users-table { width: 100%; border-collapse: collapse; }
.users-table thead { background: var(--color-gray-50); border-bottom: 2px solid var(--color-gray-200); }
.users-table th { padding: 12px 16px; text-align: left; font-size: 11px; font-weight: 600; color: var(--color-gray-500); letter-spacing: 0.5px; }
.user-row { border-bottom: 1px solid var(--color-gray-100); cursor: pointer; transition: background 0.2s; }
.user-row:hover { background: var(--color-primary-light); }
.users-table td { padding: 16px; vertical-align: middle; }

.user-cell { display: flex; align-items: center; gap: 12px; }
.user-avatar-table { width: 40px; height: 40px; background: var(--color-primary); color: white; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 600; flex-shrink: 0; }
.user-info-table { display: flex; flex-direction: column; gap: 2px; }
.user-name-table { font-size: 14px; font-weight: 500; color: var(--color-navy-dark); }
.user-phone-table { font-size: 12px; color: var(--color-gray-500); }
.email-cell { font-size: 14px; color: var(--color-primary); }
.date-cell { font-size: 13px; color: var(--color-gray-500); }

.role-badge { display: inline-block; padding: 4px 12px; border-radius: var(--radius-lg); font-size: 12px; font-weight: 500; }
.role-admin { background: var(--color-error-light); color: var(--color-error); }
.role-instructor { background: var(--color-info-light); color: var(--color-primary-hover); }
.role-student { background: var(--color-success-light); color: var(--color-success); }

.btn-icon-action { padding: 6px 10px; border: none; background: transparent; font-size: 14px; cursor: pointer; transition: background 0.2s; border-radius: 4px; text-decoration: none; display: inline-block; }
.btn-icon-action:hover { background: var(--color-gray-50); }

.alert-success { background: var(--color-success-light); color: var(--color-success); border: 1px solid var(--color-green-200); padding: 12px 16px; border-radius: var(--radius-sm); margin-bottom: 20px; font-size: 14px; }

/* User Detail Page */
.user-detail-page { max-width: 1200px; }
.user-detail-header { display: flex; justify-content: space-between; align-items: start; margin-bottom: 32px; }
.user-header-info { display: flex; gap: 20px; }
.user-header-avatar { width: 80px; height: 80px; background: var(--color-primary); color: white; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 24px; font-weight: 700; flex-shrink: 0; }
.user-detail-title { font-size: 28px; font-weight: 600; color: var(--color-navy-dark); margin-bottom: 8px; }
.user-detail-meta { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.user-email-header { font-size: 14px; color: var(--color-gray-500); }

.user-detail-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.user-detail-card { background: var(--color-white); border: 1px solid var(--color-gray-100); border-radius: 8px; padding: 24px; }
.card-heading { font-size: 18px; font-weight: 600; color: var(--color-navy-dark); margin-bottom: 20px; }
.info-rows { display: flex; flex-direction: column; gap: 16px; }
.info-row { display: flex; justify-content: space-between; padding-bottom: 12px; border-bottom: 1px solid var(--color-gray-100); }
.info-row:last-child { border-bottom: none; padding-bottom: 0; }
.info-label { font-size: 13px; color: var(--color-gray-500); font-weight: 500; }
.info-value { font-size: 14px; color: var(--color-navy-dark); }
.code-text { font-family: monospace; font-size: 12px; background: var(--color-gray-50); padding: 2px 6px; border-radius: 3px; }

.security-actions { display: flex; gap: 12px; margin-top: 20px; padding-top: 20px; border-top: 1px solid var(--color-gray-100); }
.btn-danger { padding: 10px 20px; background: var(--color-error); color: white; border: none; border-radius: var(--radius-sm); font-size: 14px; font-weight: 500; cursor: pointer; transition: background 0.2s; }
.btn-danger:hover { background: var(--color-red-700); }

/* User Form Page */
.user-form-page { max-width: 800px; }
.page-header-simple { margin-bottom: 32px; }
.form-container { background: var(--color-white); border: 1px solid var(--color-gray-100); border-radius: 8px; padding: 32px; }

.user-form { }
.form-errors { background: var(--color-error-light); border: 1px solid var(--color-red-200); border-radius: var(--radius-sm); padding: 16px; margin-bottom: 24px; }
.form-errors h4 { font-size: 14px; font-weight: 600; color: var(--color-error); margin-bottom: 8px; }
.form-errors ul { margin: 0; padding-left: 20px; }
.form-errors li { font-size: 13px; color: var(--color-error); margin-bottom: 4px; }

.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.form-hint { display: block; font-size: 12px; color: var(--color-gray-500); margin-top: 4px; }
.form-actions-row { display: flex; justify-content: flex-end; gap: 12px; margin-top: 32px; padding-top: 24px; border-top: 1px solid var(--color-gray-100); }

/* Responsive for Users */
@media (max-width: 968px) {
  .user-detail-cards { grid-template-columns: 1fr; }
  .form-row { grid-template-columns: 1fr; }
}

/* Auth Test Page */
.auth-test-page { max-width: 800px; }
.auth-test-card { background: var(--color-white); border: 1px solid var(--color-gray-100); border-radius: 8px; padding: 32px; }
.test-description { font-size: 14px; color: var(--color-gray-500); margin-bottom: 24px; line-height: 1.6; }
.magic-link-form { margin-bottom: 32px; }

.success-card { text-align: center; }
.success-icon { font-size: 64px; margin-bottom: 16px; }
.success-title { font-size: 24px; font-weight: 600; color: var(--color-navy-dark); margin-bottom: 12px; }
.success-message { font-size: 15px; color: var(--color-gray-500); margin-bottom: 32px; }

.magic-link-display { background: var(--color-gray-50); border: 1px solid var(--color-gray-100); border-radius: 8px; padding: 20px; margin-bottom: 24px; }
.link-label { font-size: 13px; color: var(--color-gray-500); font-weight: 600; margin-bottom: 8px; }
.link-url { font-family: monospace; font-size: 12px; color: var(--color-primary); word-break: break-all; margin-bottom: 16px; background: var(--color-white); padding: 12px; border-radius: 4px; }

.info-box { background: var(--color-info-light); border: 1px solid var(--color-blue-200); border-radius: 8px; padding: 20px; margin-bottom: 24px; }
.info-box-title { font-size: 15px; font-weight: 600; color: var(--color-primary-hover); margin-bottom: 12px; }
.info-box p { font-size: 14px; color: var(--color-gray-500); line-height: 1.6; margin: 0; }
.info-list { margin: 0; padding-left: 24px; }
.info-list li { font-size: 14px; color: var(--color-gray-500); margin-bottom: 8px; line-height: 1.5; }

/* ===== Regions Page Styles ===== */
.states-page { max-width: 1600px; }
.page-header-with-subtitle { display: flex; justify-content: space-between; align-items: start; margin-bottom: 24px; }
.header-title-group { }
.page-subtitle { font-size: 14px; color: var(--color-gray-500); margin-top: 4px; }

/* Regions Map Layout */
.states-map-layout { display: grid; grid-template-columns: 1.2fr 1fr; gap: 24px; margin-bottom: 32px; }

/* Map Container */
.map-container-card { background: var(--color-white); border: 1px solid var(--color-gray-100); border-radius: var(--radius-lg); padding: 24px; box-shadow: 0 2px 8px rgba(0,0,0,0.08); }
.map-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; }
.map-title { font-size: 18px; font-weight: 600; color: var(--color-navy-dark); margin: 0; }

/* Metric Toggle Buttons */
.map-metric-toggles { display: flex; gap: 8px; }
.map-metric-btn { padding: 6px 14px; background: var(--color-white); border: 1px solid var(--color-gray-100); border-radius: 20px; font-size: 12px; font-weight: 500; color: var(--color-gray-500); cursor: pointer; transition: all 0.2s; display: flex; align-items: center; gap: 6px; }
.map-metric-btn:hover { border-color: var(--color-primary); color: var(--color-primary); }
.map-metric-btn.active { background: var(--color-primary); color: white; border-color: var(--color-primary); }
.map-metric-btn iconify-icon { width: 14px; height: 14px; }

/* Map SVG Wrapper */
.map-svg-wrapper { position: relative; width: 100%; height: 400px; background: var(--color-bg-lighter); border: 1px solid var(--color-gray-200); border-radius: 8px; overflow: hidden; }

/* US Map SVG */
.us-map-svg { width: 100%; height: 100%; }
.us-map-svg path { fill: var(--color-bg-light); stroke: white; stroke-width: 1.5; transition: all 0.2s; }
.us-map-svg path.has-data:hover { stroke: var(--color-blue-500); stroke-width: 2; filter: brightness(0.95); }

/* Map Tooltip */
.map-tooltip { position: absolute; display: none; background: rgba(0,0,0,0.85); color: white; padding: 10px 14px; border-radius: var(--radius-sm); font-size: 12px; pointer-events: none; z-index: 100; box-shadow: 0 4px 12px rgba(0,0,0,0.15); }
.map-tooltip-name { font-weight: 600; margin-bottom: 4px; font-size: 13px; }
.map-tooltip-value { font-size: 11px; opacity: 0.9; }

/* Map Legend */
.map-legend { display: flex; align-items: center; gap: 10px; margin-top: 16px; justify-content: center; }
.legend-label { font-size: 11px; color: var(--color-gray-500); }
.legend-gradient { width: 120px; height: 8px; background: linear-gradient(90deg, var(--color-blue-50) 0%, var(--color-blue-500) 50%, var(--color-blue-700) 100%); border-radius: 4px; }

.map-footer-note { margin-top: 12px; text-align: center; font-size: 12px; color: var(--color-gray-400); display: flex; align-items: center; justify-content: center; gap: 6px; }
.map-footer-note iconify-icon { width: 14px; height: 14px; opacity: 0.6; }

/* Right Column Container */
.states-right-column { display: flex; flex-direction: column; gap: 12px; }

/* Compact Stats Grid (3x2) */
.states-stats-grid-compact { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.state-stat-card-compact { background: white; border: 1px solid var(--color-border); border-radius: 8px; padding: 10px 12px; display: flex; align-items: center; gap: 10px; transition: all 0.2s; box-shadow: 0 1px 3px rgba(0,0,0,0.05); }
.state-stat-card-compact:hover { box-shadow: 0 2px 8px rgba(0,0,0,0.1); transform: translateY(-1px); }
.state-stat-card-compact .state-stat-icon { width: 32px; height: 32px; flex-shrink: 0; }
.state-stat-card-compact .state-stat-icon iconify-icon { width: 16px; height: 16px; }
.state-stat-card-compact .state-stat-content { min-width: 0; }
.state-stat-card-compact .state-stat-label { font-size: 9px; line-height: 1.2; margin-bottom: 2px; text-transform: uppercase; letter-spacing: 0.3px; }
.state-stat-card-compact .state-stat-value { font-size: 16px; font-weight: 700; line-height: 1; }

/* Region Charts Stack */
.state-charts-stack { display: flex; flex-direction: column; gap: 12px; flex: 1; }
.state-chart-card-mini { background: white; border: 1px solid var(--color-border); border-radius: 8px; padding: 14px; box-shadow: 0 1px 3px rgba(0,0,0,0.05); flex: 1; display: flex; flex-direction: column; }
.chart-mini-title { font-size: 12px; font-weight: 600; color: var(--color-text-primary); margin: 0 0 10px 0; }
.chart-container-mini { position: relative; height: 150px; flex: 1; }

/* Regions Stats Grid (old - keeping for fallback) */
.regions-stats-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 16px; margin-bottom: 24px; }
.region-stat-card { background: white; border: 1px solid var(--color-border); border-radius: 8px; padding: 20px; display: flex; align-items: center; gap: 16px; }
.state-stat-icon { width: 48px; height: 48px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 20px; flex-shrink: 0; }
.icon-states { background: var(--color-blue-50); }
.icon-campuses { background: var(--color-green-50); }
.icon-courses-stat { background: var(--color-purple-50); }
.icon-students-stat { background: var(--color-warning-light); }
.icon-enrollment-stat { background: var(--color-pink-50); }
.state-stat-content { flex: 1; }
.state-stat-label { font-size: 12px; color: var(--color-text-secondary); margin-bottom: 4px; }
.state-stat-value { font-size: 24px; font-weight: 700; color: var(--color-text-primary); }

/* Regions Search Row */
.states-search-row { display: flex; gap: 12px; margin-bottom: 16px; }
.states-search-row .search-box { flex: 1; }
.status-filter { padding: 10px 16px; border: 1px solid var(--color-border-muted); border-radius: 6px; font-size: 14px; color: var(--color-gray-700); background: white; cursor: pointer; }

/* Regions Table */
.states-table-container { background: white; border-radius: 8px; box-shadow: 0 1px 3px rgba(0,0,0,0.1); }
.states-table { width: 100%; border-collapse: collapse; }
.states-table thead { background: var(--color-bg-subtle); border-bottom: 2px solid var(--color-border); }
.states-table th { padding: 12px 16px; text-align: left; font-size: 11px; font-weight: 600; color: var(--color-text-secondary); letter-spacing: 0.5px; }
.state-row { border-bottom: 1px solid var(--color-border-light); cursor: pointer; transition: background 0.2s; }
.state-row:hover { background: var(--color-info-light); }
.states-table td { padding: 16px; vertical-align: middle; }

.state-cell { display: flex; align-items: center; gap: 12px; }
.state-icon-badge { width: 40px; height: 40px; background: var(--color-blue-50); border-radius: 8px; display: flex; align-items: center; justify-content: center; font-size: 20px; flex-shrink: 0; }
.state-info { display: flex; flex-direction: column; gap: 2px; }
.state-name { font-size: 14px; font-weight: 600; color: var(--color-text-primary); }
.state-code { font-size: 12px; color: var(--color-text-secondary); }

.campuses-courses-cell { display: flex; flex-direction: column; gap: 2px; }
.cell-primary { font-size: 14px; color: var(--color-navy-dark); }
.cell-secondary { font-size: 12px; color: var(--color-gray-500); }

.enrollment-cell-state { min-width: 120px; }
.enrollment-fraction-text { font-size: 14px; font-weight: 600; color: var(--color-text-primary); margin-bottom: 2px; }
.enrollment-percent-text { font-size: 12px; color: var(--color-text-secondary); margin-bottom: 6px; }
.enrollment-progress-bar { height: 6px; background: var(--color-gray-200); border-radius: 3px; overflow: hidden; }
/* Note: .enrollment-progress-fill is defined above at line ~5590 with CSS custom property support */

.compliance-badge { display: inline-block; padding: 4px 12px; border-radius: var(--radius-lg); font-size: 12px; font-weight: 500; }
.compliance-ok { background: var(--color-success-light); color: var(--color-success); }
.compliance-review { background: var(--color-warning-light); color: var(--color-warning); }
.compliance-bad { background: var(--color-error-light); color: var(--color-error); }

.status-planning { background: var(--color-info-light); color: var(--color-primary-hover); }

.btn-icon-actions { padding: 6px 10px; border: none; background: transparent; font-size: 14px; cursor: pointer; transition: background 0.2s; border-radius: 4px; }
.btn-icon-actions:hover { background: var(--color-gray-50); }

/* ===== Region Detail Page ===== */
.state-detail-page { max-width: 1400px; }
.state-detail-header { display: flex; justify-content: space-between; align-items: start; margin-bottom: 24px; }
.state-header-info { display: flex; gap: 20px; }
.state-header-icon { width: 64px; height: 64px; background: var(--color-blue-50); border-radius: 12px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.state-icon-large { font-size: 32px; }
.state-title-row { display: flex; align-items: center; gap: 12px; margin-bottom: 8px; flex-wrap: wrap; }
.state-detail-title { font-size: 24px; font-weight: 600; color: var(--color-text-primary); margin: 0; }
.state-header-meta { display: flex; align-items: center; gap: 12px; margin-bottom: 8px; flex-wrap: wrap; }
.meta-code { font-size: 13px; color: var(--color-text-secondary); }
.state-header-counts { font-size: 13px; color: var(--color-text-secondary); }
.state-header-address { font-size: 13px; color: var(--color-text-secondary); margin-bottom: 8px; }
.state-programs-badges { display: flex; gap: 8px; }

/* Region Detail Stats */
.state-stats-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-bottom: 32px; }
.state-stat-card { background: white; border: 1px solid var(--color-border); border-radius: 8px; padding: 20px; display: flex; align-items: center; gap: 16px; }
.state-stat-card-detail { background: white; border: 1px solid var(--color-border); border-radius: 8px; padding: 20px; display: flex; align-items: center; gap: 16px; }
.stat-icon { width: 48px; height: 48px; border-radius: 8px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.stat-content { flex: 1; }
.stat-label { font-size: 13px; color: var(--color-text-secondary); margin-bottom: 4px; }
.stat-value { font-size: 24px; font-weight: 700; color: var(--color-text-primary); }
.stat-students-green { background: var(--color-green-50); color: var(--color-green-800); }
.stat-campuses-blue { background: var(--color-blue-50); color: var(--color-blue-700); }
.stat-enrollment-purple { background: var(--color-purple-50); color: var(--color-purple-700); }
.stat-completion-orange { background: var(--color-warning-light); color: var(--color-warning); }

/* Region Tabs */
.state-tabs { display: flex; gap: 8px; border-bottom: 2px solid var(--color-border-light); margin-bottom: 32px; }
.state-tab-content { display: block; }
.state-tab-content.hidden { display: none; }
.region-tab-content { display: block; }
.region-tab-content.hidden { display: none; }

/* Region Overview Grid */
.region-overview-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.state-section-card { background: white; border: 1px solid var(--color-border); border-radius: 8px; padding: 24px; margin-bottom: 24px; }
.region-section-card { background: white; border: 1px solid var(--color-border); border-radius: 8px; padding: 24px; }

/* Regional Performance */
.performance-item { margin-bottom: 20px; }
.performance-item:last-child { margin-bottom: 24px; }
.performance-label-row { display: flex; justify-content: space-between; margin-bottom: 8px; }
.performance-label { font-size: 14px; color: var(--color-gray-500); }
.performance-value { font-size: 14px; font-weight: 600; color: var(--color-navy-dark); }
.performance-bar { height: 8px; background: var(--color-gray-200); border-radius: 4px; overflow: hidden; }
.performance-fill { height: 100%; background: var(--color-primary); border-radius: 4px; }
.performance-bar-green { background: var(--color-success-light); }
.performance-fill-green { background: var(--color-success); }

.performance-stats-row { display: flex; justify-content: space-around; padding-top: 20px; border-top: 1px solid var(--color-gray-100); }
.performance-stat-box { text-align: center; }
.perf-stat-value { font-size: 24px; font-weight: 700; color: var(--color-navy-dark); margin-bottom: 4px; }
.perf-stat-label { font-size: 12px; color: var(--color-gray-500); }

/* Top Performing Campuses */
.top-campuses-list { display: flex; flex-direction: column; gap: 12px; }
.top-campus-item { display: flex; align-items: center; gap: 12px; padding: 12px; background: var(--color-gray-50); border-radius: 8px; }
.top-campus-icon { font-size: 20px; flex-shrink: 0; }
.top-campus-info { flex: 1; }
.top-campus-name { font-size: 14px; font-weight: 500; color: var(--color-navy-dark); margin-bottom: 2px; }
.top-campus-city { font-size: 12px; color: var(--color-gray-500); }
.top-campus-stats { text-align: right; }
.top-campus-percent { font-size: 18px; font-weight: 700; color: var(--color-navy-dark); }
.top-campus-enrollment { font-size: 11px; color: var(--color-gray-500); }

/* Recent Activity Empty State */
.activity-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 40px 20px; }
.activity-empty-icon { font-size: 48px; opacity: 0.2; margin-bottom: 12px; }
.activity-empty-text { font-size: 13px; color: var(--color-gray-400); }

/* Program Distribution */
.programs-dist-list { display: flex; flex-direction: column; gap: 12px; }
.program-dist-item { display: flex; justify-content: space-between; align-items: center; padding: 12px; background: var(--color-gray-50); border-radius: 8px; }
.program-dist-left { }
.program-dist-right { text-align: right; }
.program-dist-courses { font-size: 14px; font-weight: 600; color: var(--color-navy-dark); }
.program-dist-students { font-size: 12px; color: var(--color-gray-500); }

.empty-state-small { padding: 40px 20px; text-align: center; font-size: 13px; color: var(--color-gray-400); }

/* Region Campuses Table */
.region-campuses-table { width: 100%; background: var(--color-white); border: 1px solid var(--color-gray-100); border-radius: 8px; border-collapse: collapse; }
.region-campuses-table thead { background: var(--color-gray-50); }
.region-campuses-table th { padding: 12px 16px; text-align: left; font-size: 11px; font-weight: 600; color: var(--color-gray-500); letter-spacing: 0.5px; border-bottom: 1px solid var(--color-gray-100); }
.region-campuses-table td { padding: 16px; font-size: 14px; border-bottom: 1px solid var(--color-gray-100); vertical-align: middle; }
.region-campuses-table tbody tr:last-child td { border-bottom: none; }

.campus-cell-region { display: flex; align-items: center; gap: 12px; }
.campus-icon-small { width: 36px; height: 36px; background: var(--color-info-light); border-radius: var(--radius-sm); display: flex; align-items: center; justify-content: center; font-size: 18px; flex-shrink: 0; }
.campus-info-region { display: flex; flex-direction: column; gap: 2px; }
.campus-name-region { font-size: 14px; font-weight: 500; color: var(--color-navy-dark); }
.campus-subtitle-region { font-size: 12px; color: var(--color-gray-500); }

.contact-cell-region { display: flex; flex-direction: column; gap: 4px; }
.contact-phone-region { font-size: 13px; color: var(--color-gray-500); }
.contact-email-region { font-size: 13px; color: var(--color-primary); }

.address-cell-region { display: flex; flex-direction: column; gap: 2px; }
.address-line-region { font-size: 13px; color: var(--color-navy-dark); }
.address-city-region { font-size: 12px; color: var(--color-gray-500); }

.utilization-cell { min-width: 100px; }
.utilization-fraction { font-size: 14px; font-weight: 600; color: var(--color-navy-dark); margin-bottom: 2px; }
.utilization-percent { font-size: 11px; color: var(--color-gray-500); margin-bottom: 6px; }
.utilization-bar { height: 6px; background: var(--color-gray-200); border-radius: 3px; overflow: hidden; }
.utilization-fill { height: 100%; background: var(--color-primary); border-radius: 3px; }

/* Responsive for Regions */
@media (max-width: 1200px) {
  .states-map-layout { grid-template-columns: 1fr; }
  .states-stats-grid-compact { grid-template-columns: repeat(3, 1fr); }
  .regions-stats-grid { grid-template-columns: repeat(3, 1fr); }
  .state-stats-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 968px) {
  .states-stats-grid-compact { grid-template-columns: repeat(2, 1fr); }
  .regions-stats-grid { grid-template-columns: repeat(2, 1fr); }
  .region-overview-grid { grid-template-columns: 1fr; }
  .state-stats-grid { grid-template-columns: 1fr; }
  .map-metric-toggles { flex-wrap: wrap; }
  .chart-container-mini { height: 200px; }
  .state-charts-stack { gap: 16px; }
}
@media (max-width: 768px) {
  .states-stats-grid-compact { grid-template-columns: 1fr; }
  .regions-stats-grid { grid-template-columns: 1fr; }
  .page-header-with-subtitle { flex-direction: column; gap: 20px; }
  .state-detail-header { flex-direction: column; gap: 20px; }
  .map-header { flex-direction: column; align-items: start; gap: 12px; }
  .header-left { max-width: 100%; }
  .sparkline-container { flex-wrap: wrap; gap: 10px; }
  .sparkline-chart { height: 40px; }
  .sparkline-stats { width: 100%; justify-content: space-between; }
  .sparkline-hover-readout { align-items: flex-end; min-width: 0; }
}

/* ===== Location Landing Page Styles ===== */
.location-landing-body {
  background: #eef2f6;
  min-height: 100vh;
  position: relative;
  overflow-x: hidden;
  font-family: 'Poppins', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  -webkit-font-smoothing: antialiased;
}

.location-landing-body > *:not(.background-layer):not(.dev-login-shortcut) {
  position: relative;
  z-index: 1;
}

.location-landing-wrapper {
  display: block;
  max-width: 900px;
  margin: 0 auto;
  padding: 32px;
  min-height: 100vh;
}

/* Course Selector Styles */
.course-selector-wrapper {
  max-width: 1400px;
  margin: 0 auto;
  padding: 2rem;
}

.course-selector-header {
  text-align: center;
  margin-bottom: 2rem;
}

.course-selector-header h1 {
  font-size: 2.5rem;
  color: var(--color-landing-navy);
  margin-bottom: 0.5rem;
  font-family: 'Fraunces', 'DM Serif Display', Georgia, serif;
  font-weight: 400;
}

.course-selector-header p {
  color: var(--color-text-secondary);
  font-size: 1.1rem;
}

.dev-badge {
  display: inline-block;
  background: var(--color-warning-light);
  color: var(--color-landing-amber-800);
  padding: 0.25rem 0.75rem;
  border-radius: var(--radius-lg);
  font-size: 0.75rem;
  font-weight: 600;
  margin-bottom: 1rem;
}

/* Filter Bar */
.filter-bar {
  background: var(--color-landing-slate-50);
  border-radius: 12px;
  padding: 1.5rem;
  margin-bottom: 2rem;
  border: 1px solid var(--color-landing-slate-200);
}

.filter-row {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
  align-items: flex-end;
}

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

.filter-group label {
  display: block;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--color-landing-gray-700);
  margin-bottom: 0.5rem;
}

.filter-group select {
  width: 100%;
  padding: 0.625rem 1rem;
  border: 1px solid var(--color-landing-gray-300);
  border-radius: 8px;
  font-size: 0.95rem;
  background: var(--color-white);
  cursor: pointer;
}

.filter-group select:focus {
  outline: none;
  border-color: var(--color-info);
  box-shadow: 0 0 0 3px rgba(8, 145, 178, 0.12);
}

.filter-actions {
  display: flex;
  gap: 0.75rem;
  align-items: center;
}

.reset-btn {
  padding: 0.625rem 1.25rem;
  background: var(--color-white);
  border: 1px solid var(--color-landing-gray-300);
  border-radius: 8px;
  font-size: 0.875rem;
  cursor: pointer;
  color: var(--color-landing-gray-700);
  transition: all 0.15s;
}

.reset-btn:hover {
  background: var(--color-landing-gray-100);
}

.course-count {
  font-size: 0.875rem;
  color: var(--color-landing-gray-500);
}

.course-count strong {
  color: var(--color-landing-navy);
}

/* Course Grid */
.course-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
  gap: 1.5rem;
}

/* Course Card */
.course-card {
  background: var(--color-white);
  border-radius: 12px;
  border: 1px solid var(--color-landing-slate-200);
  overflow: hidden;
  transition: all 0.2s;
  display: flex;
  flex-direction: column;
}

.course-card:hover {
  border-color: var(--color-info);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  transform: translateY(-2px);
}

.course-card-header {
  background: linear-gradient(135deg, var(--color-landing-navy) 0%, var(--color-landing-navy-alt) 100%);
  color: var(--color-white);
  padding: 1.25rem;
}

.course-card-location {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  opacity: 0.8;
  margin-bottom: 0.25rem;
}

.course-card-title {
  font-size: 1.25rem;
  font-weight: 400;
  margin: 0;
  color: var(--color-white);
  font-family: 'Fraunces', 'DM Serif Display', Georgia, serif;
}

.course-card-body {
  padding: 1.25rem;
  flex: 1;
}

.course-card-meta {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.85rem 1rem;
  margin-bottom: 1.25rem;
  padding: 0.9rem;
  background: var(--color-landing-slate-50);
  border: 1px solid var(--color-landing-slate-200);
  border-radius: 10px;
}

.course-card-meta-item {
  font-size: 0.875rem;
  min-width: 0;
}

.course-card-meta-label {
  color: var(--color-landing-gray-500);
  display: block;
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.course-card-meta-value {
  color: var(--color-landing-navy);
  font-weight: 600;
  line-height: 1.35;
}

@media (max-width: 640px) {
  .course-card-meta {
    grid-template-columns: 1fr;
  }
}

.course-tuition {
  background: var(--color-landing-slate-50);
  border-radius: 8px;
  padding: 0.75rem 1rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1rem;
}

.tuition-label {
  font-size: 0.75rem;
  color: var(--color-landing-gray-500);
  text-transform: uppercase;
}

.tuition-amount {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--color-landing-green-600);
}

.requirements-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  background: var(--color-info-light);
  color: var(--color-landing-blue-800);
  padding: 0.25rem 0.75rem;
  border-radius: var(--radius-lg);
  font-size: 0.75rem;
  font-weight: 500;
  margin-bottom: 1rem;
}

.course-card-footer {
  padding: 0 1.25rem 1.25rem;
  margin-top: auto;
}

.enroll-btn {
  display: block;
  width: 100%;
  padding: 0.875rem;
  background: linear-gradient(135deg, #0891b2 0%, #06b6d4 100%);
  color: var(--color-white);
  text-align: center;
  text-decoration: none;
  border-radius: 24px;
  font-weight: 700;
  font-size: 0.95rem;
  transition: background 0.15s, box-shadow 0.15s;
}

.enroll-btn:hover {
  background: linear-gradient(135deg, #0e7490 0%, #0891b2 100%);
  box-shadow: 0 4px 12px rgba(8, 145, 178, 0.3);
  color: var(--color-white);
}

/* No Results */
.course-selector-wrapper .no-results {
  text-align: center;
  padding: 3rem;
  color: var(--color-landing-gray-500);
}

.course-selector-wrapper .no-results h3 {
  color: var(--color-landing-gray-700);
  margin-bottom: 0.5rem;
}

/* Status Badge */
.course-selector-wrapper .status-badge {
  display: inline-block;
  padding: 0.25rem 0.5rem;
  border-radius: var(--radius-lg);
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  margin-left: 0.5rem;
}

.course-selector-wrapper .status-badge.active {
  background: var(--color-success-light);
  color: var(--color-landing-emerald-800);
}

.course-selector-wrapper .status-badge.inactive {
  background: var(--color-error-light);
  color: var(--color-landing-red-800);
}

.location-main-content {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.location-hero {
  background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
  border-radius: 16px;
  padding: 40px;
  text-align: center;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15);
}

.location-hero-inner {
  max-width: 600px;
  margin: 0 auto;
}

.location-city {
  font-family: var(--font-heading);
  font-size: 36px;
  font-weight: 400;
  color: white;
  margin-bottom: 8px;
}

.location-tagline {
  font-size: 18px;
  color: rgba(255, 255, 255, 0.9);
  margin-bottom: 24px;
}

.clinical-location {
  background: rgba(255, 255, 255, 0.1);
  border-radius: var(--radius-lg);
  padding: 16px;
  margin-bottom: 16px;
}

.clinical-label {
  display: block;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.7);
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: 4px;
}

.clinical-link {
  color: var(--color-amber-400);
  text-decoration: none;
  font-weight: 600;
}

.clinical-link:hover {
  text-decoration: underline;
}

.clinical-address {
  display: block;
  color: rgba(255, 255, 255, 0.8);
  font-size: 14px;
  margin-top: 4px;
}

.gmb-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: rgba(255, 255, 255, 0.9);
  text-decoration: none;
  font-size: 14px;
}

.gmb-link:hover {
  color: white;
}

/* Course Cards Section */
.course-cards-section {
  margin-bottom: 24px;
}

.course-cards-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
}

/* Course Documents Section */
.course-documents-section {
  background: rgba(255, 255, 255, 0.95);
  border-radius: var(--radius-lg);
  padding: 24px;
  margin-bottom: 24px;
}

.section-title-dark {
  font-size: 18px;
  font-weight: 600;
  color: var(--color-navy-dark);
  margin-bottom: 16px;
}

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

.doc-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 16px;
  background: var(--color-gray-50);
  border-radius: 8px;
  color: var(--color-navy-light);
  text-decoration: none;
  font-size: 14px;
  font-weight: 500;
  transition: background 0.2s;
}

.doc-btn:hover {
  background: var(--color-gray-200);
}

/* Marketing Section */
.marketing-section {
  background: rgba(255, 255, 255, 0.95);
  border-radius: var(--radius-lg);
  padding: 32px;
}

.marketing-block {
  margin-bottom: 32px;
}

.marketing-block:last-child {
  margin-bottom: 0;
}

.marketing-title {
  font-size: 22px;
  font-weight: 600;
  color: var(--color-navy-dark);
  margin-bottom: 12px;
}

.marketing-text {
  color: var(--color-gray-600);
  line-height: 1.7;
}

.highlights-list,
.included-list,
.benefits-list,
.unique-list {
  color: var(--color-gray-600);
  line-height: 1.8;
  padding-left: 20px;
}

.highlights-list li,
.included-list li,
.benefits-list li,
.unique-list li {
  margin-bottom: 8px;
}

.value-statement {
  font-size: 16px;
  color: var(--color-gray-600);
  margin-bottom: 16px;
}

.strike-price {
  text-decoration: line-through;
  color: var(--color-gray-400);
}

.actual-price {
  color: var(--color-navy-light);
  font-weight: 700;
}

/* Location Footer */
.location-footer {
  background: rgba(255, 255, 255, 0.95);
  border-radius: var(--radius-lg);
  padding: 24px;
  text-align: center;
}

.footer-badges {
  display: flex;
  justify-content: center;
  gap: 24px;
  margin-bottom: 16px;
}

.footer-badge {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  color: var(--color-gray-500);
}

.bbb-badge {
  color: var(--color-navy-light);
}

.badge-year {
  font-weight: 700;
  color: var(--color-navy-light);
}

.badge-text {
  text-align: center;
  line-height: 1.3;
}

.footer-licensing {
  font-size: 12px;
  color: var(--color-gray-400);
}

/* Location Landing Responsive */
@media (max-width: 768px) {
  .location-landing-wrapper {
    padding: 20px;
  }

  .course-cards-grid {
    grid-template-columns: 1fr;
  }

  .document-buttons {
    grid-template-columns: 1fr;
  }
}

/* ===== Campus Landing Page Styles ===== */
.campus-landing-body {
  min-height: 100vh;
  font-family: 'Poppins', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  -webkit-font-smoothing: antialiased;
  background:
    linear-gradient(135deg, rgba(26, 58, 74, 0.65) 0%, rgba(45, 90, 106, 0.55) 50%, rgba(26, 58, 74, 0.7) 100%),
    url("/images/boise2.jpg");
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
}

.campus-landing-wrapper {
  display: grid;
  grid-template-columns: 1fr 380px;
  gap: 32px;
  max-width: 1400px;
  margin: 0 auto;
  padding: 32px;
  min-height: 100vh;
}

/* Campus Hero Section */
.campus-hero {
  background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
  border-radius: 16px;
  padding: 40px;
  margin-bottom: 24px;
  text-align: center;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15);
}

.campus-hero-inner {
  max-width: 600px;
  margin: 0 auto;
}

.campus-city {
  font-size: 42px;
  font-weight: 700;
  color: white;
  margin-bottom: 8px;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.campus-tagline {
  font-size: 18px;
  color: rgba(255, 255, 255, 0.9);
  margin-bottom: 28px;
}

.clinical-campus {
  background: rgba(255, 255, 255, 0.1);
  border-radius: var(--radius-lg);
  padding: 20px;
  margin-bottom: 20px;
}

.clinical-label {
  display: block;
  font-size: 12px;
  font-weight: 600;
  color: var(--color-amber-400);
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: 8px;
}

.clinical-link {
  display: block;
  font-size: 16px;
  font-weight: 600;
  color: var(--color-amber-400);
  text-decoration: none;
  margin-bottom: 4px;
}

.clinical-link:hover {
  text-decoration: underline;
}

.clinical-address {
  display: block;
  font-size: 14px;
  color: rgba(255, 255, 255, 0.8);
}

.gmb-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 24px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  color: rgba(255, 255, 255, 0.9);
  text-decoration: none;
  font-size: 14px;
  transition: all 0.2s;
}

.gmb-link:hover {
  background: rgba(255, 255, 255, 0.2);
}

/* Course Cards Section */
.course-cards-section {
  margin-bottom: 24px;
}

.course-cards-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
}

.loc-course-card {
  background: var(--color-white);
  border-radius: 16px;
  padding: 24px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
  border: 1px solid var(--color-gray-200);
}

.loc-card-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
}

.loc-card-label {
  font-size: 11px;
  font-weight: 600;
  color: var(--color-gray-500);
  text-transform: uppercase;
  letter-spacing: 1px;
  background: var(--color-gray-100);
  padding: 4px 10px;
  border-radius: 4px;
}

.loc-card-weather {
  color: var(--color-warning);
  display: flex;
  align-items: center;
}

.loc-open-seats {
  margin-left: auto;
  font-size: 12px;
  font-weight: 600;
  color: white;
  background: var(--color-success);
  padding: 6px 14px;
  border-radius: 20px;
}

.loc-course-title {
  font-family: var(--font-heading);
  font-size: 22px;
  font-weight: 400;
  color: var(--color-text-primary);
  margin-bottom: 16px;
}

.loc-course-meta {
  display: flex;
  gap: 24px;
  margin-bottom: 20px;
  padding: 12px 16px;
  background: var(--color-bg-hover);
  border-radius: 8px;
  border: 1px solid var(--color-gray-200);
}

.loc-meta-item {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.loc-meta-label {
  font-size: 11px;
  color: var(--color-gray-500);
  text-transform: uppercase;
}

.loc-meta-value {
  font-size: 14px;
  font-weight: 600;
  color: var(--color-text-primary);
}

.loc-enroll-btn {
  display: block;
  width: 100%;
  padding: 14px;
  background: var(--color-success);
  color: white;
  text-align: center;
  text-decoration: none;
  font-size: 15px;
  font-weight: 600;
  border-radius: 8px;
  margin-bottom: 20px;
  transition: all 0.2s;
  box-shadow: 0 4px 12px rgba(76, 175, 80, 0.3);
}

.loc-enroll-btn:hover {
  background: var(--color-green-600);
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(76, 175, 80, 0.4);
}

.loc-tuition-section {
  border-top: 1px solid var(--color-gray-200);
  padding-top: 20px;
}

.loc-tuition-title {
  font-size: 16px;
  font-weight: 600;
  color: var(--color-text-primary);
  margin-bottom: 16px;
}

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

.loc-tuition-option {
  background: var(--color-bg-hover);
  border-radius: 8px;
  padding: 14px;
  text-align: center;
  border: 1px solid var(--color-gray-200);
}

.loc-tuition-name {
  font-size: 12px;
  font-weight: 600;
  color: var(--color-gray-700);
  margin-bottom: 6px;
}

.loc-tuition-amount {
  font-size: 20px;
  font-weight: 700;
  color: var(--color-success);
}

.loc-tuition-desc {
  font-size: 10px;
  color: var(--color-gray-500);
  line-height: 1.4;
}

/* Course Information Documents */
.course-documents-section {
  background: var(--color-white);
  border-radius: 16px;
  padding: 24px;
  margin-bottom: 24px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06);
  border: 1px solid var(--color-gray-200);
}

.section-title-dark {
  font-family: var(--font-heading);
  font-size: 18px;
  font-weight: 400;
  color: var(--color-text-primary);
  margin-bottom: 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--color-gray-200);
}

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

.doc-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 14px 16px;
  background: var(--color-bg-hover);
  border-radius: 8px;
  color: var(--color-gray-700);
  text-decoration: none;
  font-size: 13px;
  font-weight: 500;
  transition: all 0.2s;
  border: 1px solid var(--color-gray-200);
}

.doc-btn:hover {
  background: var(--color-gray-100);
  transform: translateY(-2px);
  border-color: var(--color-gray-300);
}

/* Marketing Sections */
.marketing-section {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-bottom: 24px;
}

.marketing-block {
  background: var(--color-white);
  border-radius: 16px;
  padding: 28px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06);
  border: 1px solid var(--color-gray-200);
}

.marketing-title {
  font-family: var(--font-heading);
  font-size: 20px;
  font-weight: 400;
  color: var(--color-text-primary);
  margin-bottom: 16px;
  text-align: center;
}

.marketing-text {
  font-size: 14px;
  color: var(--color-gray-600);
  line-height: 1.7;
  text-align: center;
}

.highlights-list,
.included-list,
.benefits-list,
.unique-list {
  list-style: none;
  padding: 0;
}

.highlights-list li,
.included-list li,
.benefits-list li,
.unique-list li {
  font-size: 14px;
  color: var(--color-gray-600);
  line-height: 1.6;
  padding: 8px 0;
  padding-left: 24px;
  position: relative;
}

.highlights-list li:before,
.included-list li:before,
.benefits-list li:before {
  content: "";
  position: absolute;
  left: 0;
  top: 14px;
  width: 8px;
  height: 8px;
  background: var(--color-success);
  border-radius: 50%;
}

.unique-list {
  counter-reset: item;
}

.unique-list li {
  padding-left: 32px;
}

.unique-list li:before {
  content: counter(item) ".";
  counter-increment: item;
  position: absolute;
  left: 0;
  top: 8px;
  font-weight: 700;
  color: var(--color-success);
  font-size: 16px;
  width: auto;
  height: auto;
  background: none;
  border-radius: 0;
}

.highlights-list li strong,
.included-list li strong,
.benefits-list li strong,
.unique-list li strong {
  color: var(--color-text-primary);
}

.highlights-list li a,
.included-list li a,
.benefits-list li a,
.unique-list li a {
  color: var(--color-blue-600);
  text-decoration: none;
}

.highlights-list li a:hover,
.included-list li a:hover,
.benefits-list li a:hover,
.unique-list li a:hover {
  text-decoration: underline;
}

.value-statement {
  font-size: 16px;
  color: var(--color-gray-600);
  text-align: center;
  margin-bottom: 20px;
}

.strike-price {
  text-decoration: line-through;
  color: var(--color-gray-400);
}

.actual-price {
  font-weight: 700;
  color: var(--color-success);
  font-size: 20px;
}

/* Footer */
.campus-footer,
.location-footer {
  background: var(--color-white);
  border-radius: 16px;
  padding: 32px;
  text-align: center;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06);
  border: 1px solid var(--color-gray-200);
}

.footer-badges {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 32px;
  margin-bottom: 20px;
}

.footer-badge {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  background: var(--color-bg-hover);
  padding: 16px 24px;
  border-radius: var(--radius-lg);
  color: var(--color-gray-700);
  border: 1px solid var(--color-gray-200);
}

.footer-badge.bbb-badge {
  flex-direction: row;
  gap: 8px;
  font-weight: 600;
}

.badge-year {
  font-size: 20px;
  font-weight: 700;
  color: var(--color-success);
}

.badge-text {
  font-size: 11px;
  line-height: 1.3;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.footer-licensing {
  font-size: 13px;
  color: var(--color-gray-500);
}

/* Application Sidebar */
.application-sidebar {
  position: sticky;
  top: 32px;
  align-self: start;
}

.application-sidebar .application-card {
  background: var(--color-white);
  border-radius: var(--radius-lg);
  padding: 32px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
}

.application-sidebar .application-title {
  font-size: 20px;
  font-weight: 600;
  color: var(--color-navy-dark);
  margin-bottom: 8px;
}

.application-sidebar .application-subtitle {
  font-size: 14px;
  color: var(--color-gray-500);
  margin-bottom: 24px;
  line-height: 1.5;
}

/* Campus Landing Responsive */
@media (max-width: 1100px) {
  .campus-landing-wrapper {
    grid-template-columns: 1fr;
    padding: 20px;
  }

  .application-sidebar {
    position: static;
    order: -1;
  }

  .course-cards-grid {
    grid-template-columns: 1fr;
  }

  .loc-tuition-options {
    grid-template-columns: 1fr;
  }

  .document-buttons {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 768px) {
  .campus-hero {
    padding: 28px 20px;
  }

  .campus-city {
    font-size: 32px;
  }

  .campus-tagline {
    font-size: 16px;
  }

  .loc-course-meta {
    flex-direction: column;
    gap: 12px;
  }

  .footer-badges {
    flex-direction: column;
    gap: 16px;
  }
}

/* ===== Application Form Page Styles ===== */
.app-form-body {
  background: #eef2f6;
  min-height: 100vh;
  position: relative;
  overflow-x: hidden;
  font-family: 'Poppins', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  -webkit-font-smoothing: antialiased;
}

.app-form-body.has-background-slideshow .background-layer {
  opacity: 0.12;
  filter: grayscale(0.35) saturate(0.8) contrast(1.05) brightness(0.95);
  transform: scale(1.03);
}

/* Subtle theme-tinted overlay when campus background is shown */
.app-form-body.has-background-slideshow::before {
  content: "";
  position: fixed;
  inset: 0;
  background: linear-gradient(180deg, rgba(12, 35, 64, 0.06) 0%, rgba(8, 145, 178, 0.04) 50%, rgba(238, 242, 246, 0.85) 100%);
  z-index: 0;
  pointer-events: none;
}

.app-form-body.has-background-slideshow .app-form-header {
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.app-form-body > *:not(.background-layer):not(.dev-login-shortcut) {
  position: relative;
  z-index: 1;
}

/* Header */
.app-form-header {
  background: var(--color-white);
  padding: 16px 32px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid var(--color-gray-100);
}

.app-form-logo {
  display: flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  color: inherit;
}

.app-form-logo-icon {
  width: 32px;
  height: 32px;
  background: url("/logo.png") center/contain no-repeat;
  border-radius: 50%;
}

.app-form-logo-text {
  font-size: 16px;
  font-weight: 600;
  color: var(--color-navy-dark);
}

.app-form-phone {
  font-size: 14px;
  color: var(--color-gray-500);
  text-decoration: none;
  white-space: nowrap;
}

.app-form-phone:hover {
  color: var(--color-primary);
}

/* When app-form-header is used on landing page with background */
.landing-body .app-form-header,
.location-landing-body .app-form-header {
  margin-bottom: 0;
}

/* Progress Bar */
.app-form-progress-bar {
  background: var(--color-navy-light);
  padding: 16px 32px;
}

.progress-bar-inner {
  max-width: 900px;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.progress-label {
  font-size: 14px;
  font-weight: 600;
  color: white;
}

.progress-steps {
  display: flex;
  align-items: center;
  gap: 0;
}

.progress-step {
  display: flex;
  align-items: center;
  gap: 8px;
}

.step-number {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.2);
  color: rgba(255, 255, 255, 0.6);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 600;
}

.progress-step.active .step-number {
  background: var(--color-white);
  color: var(--color-navy-light);
}

.step-text {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.6);
}

.progress-step.active .step-text {
  color: white;
}

.progress-line {
  width: 60px;
  height: 2px;
  background: rgba(255, 255, 255, 0.2);
  margin: 0 16px;
}

/* Main Content */
.app-form-main {
  padding: 32px;
}

.app-form-container {
  max-width: 900px;
  margin: 0 auto;
}

.back-link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 14px;
  color: var(--color-primary);
  text-decoration: none;
  margin-bottom: 24px;
}

.back-link:hover {
  text-decoration: underline;
}

.app-form-title-section {
  background: var(--color-white);
  border-radius: var(--radius-lg);
  padding: 32px;
  margin-bottom: 24px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

.app-form-title {
  font-size: 28px;
  font-weight: 700;
  color: var(--color-navy-dark);
  margin-bottom: 8px;
}

.app-form-subtitle {
  font-size: 15px;
  color: var(--color-gray-500);
}

/* Form Sections */
.form-section {
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: 24px;
  background: var(--color-white);
  border-radius: var(--radius-lg);
  padding: 32px;
  margin-bottom: 24px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

.section-sidebar {
  padding-right: 24px;
  border-right: 1px solid #e8f4fc;
}

.section-title {
  font-size: 18px;
  font-weight: 600;
  color: var(--color-navy-light);
  margin-bottom: 12px;
}

.section-description {
  font-size: 13px;
  color: var(--color-gray-500);
  line-height: 1.6;
  margin-bottom: 16px;
}

.section-bullets {
  list-style: none;
  padding: 0;
}

.section-bullets li {
  font-size: 13px;
  color: var(--color-gray-500);
  padding: 4px 0;
  padding-left: 16px;
  position: relative;
}

.section-bullets li:before {
  content: "•";
  position: absolute;
  left: 0;
  color: var(--color-primary);
}

.section-fields {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

/* Field Styles */
.field-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.field-row.half-width {
  grid-template-columns: 1fr 1fr;
}

.field-row.half-width .field-group:only-child {
  grid-column: 1;
}

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

.field-label {
  font-size: 13px;
  font-weight: 500;
  color: var(--color-navy-dark);
  display: flex;
  align-items: center;
  gap: 4px;
}

.info-icon {
  color: var(--color-gray-400);
  cursor: help;
  position: relative;
  display: inline-flex;
  vertical-align: middle;
}

.info-icon:is(:hover, :focus-visible)::after {
  content: attr(data-tooltip);
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%);
  background: var(--color-navy-dark);
  color: #fff;
  font-size: 12px;
  font-weight: 400;
  font-style: normal;
  line-height: 1.4;
  padding: 8px 12px;
  border-radius: 6px;
  white-space: normal;
  width: 220px;
  z-index: 10;
  pointer-events: none;
}

.info-icon:is(:hover, :focus-visible)::before {
  content: '';
  position: absolute;
  bottom: calc(100% + 2px);
  left: 50%;
  transform: translateX(-50%);
  border: 6px solid transparent;
  border-top-color: var(--color-navy-dark);
  z-index: 10;
  pointer-events: none;
}

.field-input,
.field-select {
  padding: 12px 14px;
  border: 1px solid var(--color-gray-100);
  border-radius: var(--radius-sm);
  font-size: 14px;
  font-family: inherit;
  color: var(--color-navy-dark);
  background: var(--color-white);
  transition: all 0.2s;
}

.field-input:focus,
.field-select:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(33, 150, 243, 0.1);
}

.field-select {
  cursor: pointer;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23666' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  padding-right: 36px;
}

.field-hint {
  font-size: 11px;
  color: var(--color-gray-400);
  font-style: italic;
}

/* SSN Fields */
.ssn-fields {
  display: flex;
}

.ssn-input {
  text-align: left;
  width: 100%;
}

/* Subsections */
.subsection {
  padding-top: 16px;
  border-top: 1px solid var(--color-gray-100);
}

.subsection:first-child {
  padding-top: 0;
  border-top: none;
}

.subsection-title {
  font-size: 15px;
  font-weight: 600;
  color: var(--color-navy-dark);
  margin: 0 0 8px;
}

.subsection-description {
  font-size: 13px;
  color: var(--color-gray-500);
  margin: 0 0 16px;
}

.additional-insights-row + .additional-insights-row {
  margin-top: 8px;
}

.form-section[data-category="basic"] .section-fields,
.form-section[data-category="additional"] .section-fields {
  gap: 24px;
}

/* Checkbox */
.checkbox-label {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 14px;
  color: var(--color-navy-dark);
  cursor: pointer;
}

.field-checkbox {
  width: 18px;
  height: 18px;
  margin-top: 2px;
  accent-color: var(--color-primary);
  cursor: pointer;
}

/* Radio Buttons */
.radio-group {
  display: flex;
  gap: 24px;
}

.radio-label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  color: var(--color-navy-dark);
  cursor: pointer;
}

.field-radio {
  width: 18px;
  height: 18px;
  accent-color: var(--color-primary);
  cursor: pointer;
}

/* Disclaimer */
.form-disclaimer {
  background: #fef9e7;
  border: 1px solid #f7dc6f;
  border-radius: 8px;
  padding: 20px 24px;
  margin-bottom: 24px;
}

.form-disclaimer p {
  font-size: 13px;
  color: var(--color-gray-500);
  line-height: 1.6;
  margin: 0;
}

.consent-checkbox-label {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-size: 13px;
  color: var(--color-gray-500);
  line-height: 1.6;
  cursor: pointer;
}

.consent-checkbox {
  margin-top: 4px;
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  accent-color: var(--color-primary);
}

.consent-checkbox-label a {
  color: var(--color-primary);
}

/* Autosave Status Indicator */
.autosave-status {
  position: fixed;
  bottom: 20px;
  right: 20px;
  padding: 8px 16px;
  background: var(--color-gray-800);
  color: var(--color-gray-300);
  font-size: 13px;
  border-radius: 6px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
  opacity: 0;
  transition: opacity 0.3s ease;
  z-index: 1000;
}

.autosave-status:not(:empty) {
  opacity: 1;
}

/* Submit Button */
.form-submit {
  text-align: center;
}

.submit-btn {
  display: inline-block;
  width: 100%;
  max-width: 400px;
  padding: 18px 48px;
  background: linear-gradient(135deg, var(--color-blue-500) 0%, var(--color-blue-700) 100%);
  color: white;
  border: none;
  border-radius: 8px;
  font-size: 16px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  transition: all 0.3s;
  box-shadow: 0 4px 12px rgba(33, 150, 243, 0.3);
}

.submit-btn:hover {
  background: linear-gradient(135deg, var(--color-blue-700) 0%, var(--color-blue-800) 100%);
  box-shadow: 0 6px 16px rgba(33, 150, 243, 0.4);
  transform: translateY(-2px);
}

/* Application Form Responsive */
@media (max-width: 900px) {
  .form-section {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  .section-sidebar {
    padding-right: 0;
    padding-bottom: 20px;
    border-right: none;
    border-bottom: 1px solid #e8f4fc;
  }

  .progress-bar-inner {
    flex-direction: column;
    gap: 16px;
    align-items: flex-start;
  }

  .progress-steps {
    width: 100%;
    justify-content: space-between;
  }

  .progress-line {
    flex: 1;
    min-width: 20px;
    width: auto;
    margin: 0 8px;
  }

  .step-text {
    display: none;
  }
}

@media (max-width: 600px) {
  .app-form-header {
    padding: 12px 16px;
  }

  .app-form-progress-bar {
    padding: 12px 16px;
  }

  .app-form-main {
    padding: 16px;
  }

  .app-form-title-section,
  .form-section {
    padding: 20px;
  }

  .app-form-title {
    font-size: 24px;
  }

  .field-row {
    grid-template-columns: 1fr;
  }

  .field-row.half-width {
    grid-template-columns: 1fr;
  }

  .ssn-fields {
    flex-wrap: wrap;
  }

  .ssn-input:first-child,
  .ssn-input:nth-child(2),
  .ssn-input:nth-child(3) {
    width: auto;
    flex: 1;
    min-width: 60px;
  }

  .radio-group {
    flex-direction: column;
    gap: 12px;
  }
}

/* ===== Start Page Layout ===== */
.start-page-main {
  padding: 32px;
  background: var(--color-gray-50);
  min-height: calc(100vh - 120px);
}

.start-page-container {
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 400px;
  gap: 32px;
  align-items: start;
}

.start-page-container .course-info {
  background: var(--color-white);
  border-radius: var(--radius-lg);
  padding: 40px;
  box-shadow: var(--shadow-lg);
  border: 1px solid var(--color-gray-100);
}

.start-page-container .application-card {
  position: sticky;
  top: 24px;
}

.back-link-full-width {
  grid-column: 1 / -1;
}

/* Start Page Responsive */
@media (max-width: 968px) {
  .start-page-container {
    grid-template-columns: 1fr;
    gap: 24px;
  }

  .start-page-container .application-card {
    position: static;
  }
}

@media (max-width: 768px) {
  .start-page-main {
    padding: 16px;
  }

  .start-page-container .course-info {
    padding: 24px;
  }
}

/* ===== Short Code Opt-In ===== */
.short-code-opt-in {
  margin-bottom: 16px;
}

.short-code-opt-in-row {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}

.short-code-checkbox {
  width: 18px;
  height: 18px;
  min-width: 18px;
  margin-top: 2px;
  accent-color: var(--color-primary, #2196f3);
  cursor: pointer;
}

.short-code-label {
  font-size: 13px;
  line-height: 1.4;
  color: var(--color-gray-700, #374151);
  cursor: pointer;
}

.short-code-disclaimer {
  margin-left: 28px;
  margin-top: 8px;
}

.short-code-disclaimer p {
  font-size: 12px;
  line-height: 1.4;
  color: var(--color-gray-600, #4b5563);
  margin: 0 0 8px 0;
}

.short-code-disclaimer p:last-child {
  margin-bottom: 0;
}

.short-code-disclaimer a {
  color: var(--color-primary, #2196f3);
  text-decoration: none;
}

.short-code-disclaimer a:hover {
  text-decoration: underline;
}

/* ===== Prevent Page Styles ===== */
.prevent-page-body {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  font-family: 'Poppins', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  -webkit-font-smoothing: antialiased;
  background: var(--color-gray-50);
}

/* Prevent Hero Section */
.prevent-hero {
  background: linear-gradient(135deg, #fef5e7 0%, #fdebd0 100%);
  padding: 48px 32px 64px;
  text-align: center;
}

.prevent-hero-content {
  max-width: 700px;
  margin: 0 auto;
}

.prevent-hero .back-link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 14px;
  color: var(--color-primary);
  text-decoration: none;
  margin-bottom: 32px;
}

.prevent-hero .back-link:hover {
  text-decoration: underline;
}

.prevent-icon {
  width: 80px;
  height: 80px;
  background: rgba(255, 152, 0, 0.15);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 24px;
}

.prevent-icon iconify-icon {
  color: var(--color-warning);
}

.prevent-title {
  font-size: 28px;
  font-weight: 600;
  color: var(--color-navy-dark);
  line-height: 1.4;
  margin-bottom: 16px;
  font-style: italic;
}

.prevent-subtitle {
  font-size: 16px;
  color: var(--color-gray-500);
  margin-bottom: 32px;
}

.prevent-call-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 16px 32px;
  background: linear-gradient(135deg, var(--color-blue-500) 0%, var(--color-blue-700) 100%);
  color: white;
  text-decoration: none;
  font-size: 16px;
  font-weight: 600;
  border-radius: 8px;
  transition: all 0.3s;
  box-shadow: 0 4px 12px rgba(33, 150, 243, 0.3);
}

.prevent-call-btn:hover {
  background: linear-gradient(135deg, var(--color-blue-700) 0%, var(--color-blue-800) 100%);
  box-shadow: 0 6px 16px rgba(33, 150, 243, 0.4);
  transform: translateY(-2px);
}

/* Override Code Section */
.prevent-override {
  padding: 48px 32px;
  flex: 1;
}

.prevent-override-content {
  max-width: 500px;
  margin: 0 auto;
  text-align: center;
}

.override-label {
  font-size: 14px;
  color: var(--color-gray-500);
  margin-bottom: 16px;
}

.override-form {
  display: flex;
  gap: 12px;
  justify-content: center;
}

.override-input {
  padding: 14px 18px;
  border: 1px solid var(--color-gray-100);
  border-radius: var(--radius-sm);
  font-size: 14px;
  font-family: inherit;
  width: 280px;
  transition: all 0.2s;
}

.override-input:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(33, 150, 243, 0.1);
}

.override-input::placeholder {
  color: var(--color-gray-400);
}

.override-btn {
  padding: 14px 24px;
  background: var(--color-white);
  border: 1px solid var(--color-navy-dark);
  border-radius: var(--radius-sm);
  font-size: 14px;
  font-weight: 500;
  font-family: inherit;
  color: var(--color-navy-dark);
  cursor: pointer;
  transition: all 0.2s;
}

.override-btn:hover {
  background: var(--color-navy-dark);
  color: white;
}

/* Prevent Footer */
.prevent-footer {
  border-top: 1px solid var(--color-border);
  padding: 48px 32px;
  background: var(--color-white);
}

.prevent-footer-content {
  max-width: 600px;
  margin: 0 auto;
  text-align: center;
}

.footer-logo {
  margin-bottom: 24px;
}

.footer-logo-icon {
  width: 56px;
  height: 56px;
  background: url("/logo.png") center/contain no-repeat;
  border-radius: var(--radius-lg);
  margin: 0 auto;
}

.footer-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin-bottom: 16px;
  flex-wrap: wrap;
}

.footer-nav a {
  font-size: 14px;
  color: var(--color-navy-dark);
  text-decoration: none;
  transition: color 0.2s;
}

.footer-nav a:hover {
  color: var(--color-primary);
}

.footer-nav-dot {
  width: 4px;
  height: 4px;
  background: var(--color-primary);
  border-radius: 50%;
}

.footer-legal {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin-bottom: 24px;
}

.footer-legal a {
  font-size: 13px;
  color: var(--color-gray-500);
  text-decoration: none;
}

.footer-legal a:hover {
  color: var(--color-primary);
}

.footer-divider {
  color: var(--color-text-disabled);
}

.footer-social {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
}

.social-link {
  width: 40px;
  height: 40px;
  border: 2px solid var(--color-blue-500);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-primary);
  transition: all 0.2s;
}

.social-link:hover {
  background: var(--color-primary);
  color: white;
}

/* Prevent Page Responsive */
@media (max-width: 600px) {
  .prevent-hero {
    padding: 32px 20px 48px;
  }

  .prevent-title {
    font-size: 22px;
  }

  .override-form {
    flex-direction: column;
    align-items: center;
  }

  .override-input {
    width: 100%;
    max-width: 280px;
  }

  .footer-nav {
    gap: 8px;
  }

  .footer-nav a {
    font-size: 13px;
  }
}

/* ===== Rejected Page Styles ===== */
.rejected-page {
  background: var(--color-gray-50);
}

.rejected-hero {
  background: linear-gradient(135deg, var(--color-amber-50) 0%, var(--color-amber-100) 100%);
  padding: 48px 32px 64px;
  text-align: center;
}

.rejected-icon {
  width: 80px;
  height: 80px;
  background: rgba(255, 152, 0, 0.15);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 24px;
}

.rejected-icon iconify-icon {
  color: var(--color-warning);
}

.rejected-title {
  font-size: 28px;
  font-weight: 600;
  color: var(--color-navy-dark);
  line-height: 1.4;
  margin-bottom: 8px;
}

.rejection-details {
  background: var(--color-white);
  border-radius: var(--radius-lg);
  padding: 24px 32px;
  margin: 24px auto 32px;
  max-width: 600px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  text-align: left;
}

.rejection-reason {
  font-size: 16px;
  color: var(--color-navy-dark);
  line-height: 1.6;
  margin-bottom: 16px;
}

.rejection-reason em {
  display: block;
  margin-top: 8px;
  padding: 12px 16px;
  background: var(--color-warning-light);
  border-left: 4px solid var(--color-orange-500);
  border-radius: 0 8px 8px 0;
  color: var(--color-orange-900);
}

.rejection-help {
  font-size: 14px;
  color: var(--color-gray-500);
  margin: 0;
}

/* Rejection Update Form */
.rejection-update-form {
  background: var(--color-white);
  border-radius: var(--radius-lg);
  padding: 32px;
  margin: 0 auto 32px;
  max-width: 600px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.rejection-update-form h3 {
  font-size: 18px;
  font-weight: 600;
  color: var(--color-navy-dark);
  margin-bottom: 20px;
  text-align: center;
}

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

.radio-option-card {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 20px;
  background: var(--color-gray-50);
  border: 2px solid var(--color-border);
  border-radius: var(--radius-lg);
  cursor: pointer;
  transition: all 0.2s;
}

.radio-option-card:hover {
  border-color: var(--color-blue-200);
  background: var(--color-info-light);
}

.radio-option-card:has(.radio-input:checked) {
  border-color: var(--color-primary);
  background: var(--color-info-light);
}

.radio-input {
  width: 20px;
  height: 20px;
  margin-top: 2px;
  accent-color: var(--color-primary);
  flex-shrink: 0;
}

.radio-option-content {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.radio-option-title {
  font-size: 16px;
  font-weight: 600;
  color: var(--color-navy-dark);
}

.radio-option-desc {
  font-size: 14px;
  color: var(--color-gray-500);
}

.rejection-update-form .submit-btn {
  display: block;
  width: 100%;
  padding: 16px 32px;
  background: linear-gradient(135deg, var(--color-blue-500) 0%, var(--color-blue-700) 100%);
  color: white;
  border: none;
  border-radius: 8px;
  font-size: 16px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  transition: all 0.3s;
  box-shadow: 0 4px 12px rgba(33, 150, 243, 0.3);
}

.rejection-update-form .submit-btn:hover {
  background: linear-gradient(135deg, var(--color-blue-700) 0%, var(--color-blue-800) 100%);
  box-shadow: 0 6px 16px rgba(33, 150, 243, 0.4);
  transform: translateY(-2px);
}

/* Rejection Contact Section */
.rejection-contact {
  text-align: center;
  margin-top: 8px;
}

.rejection-contact p {
  font-size: 14px;
  color: var(--color-gray-500);
  margin-bottom: 16px;
}

/* Responsive Rejected Page */
@media (max-width: 600px) {
  .rejected-hero {
    padding: 32px 20px 48px;
  }

  .rejection-details {
    padding: 20px;
    margin: 16px auto 24px;
  }

  .rejection-update-form {
    padding: 24px 20px;
    margin: 0 auto 24px;
  }

  .radio-option-card {
    padding: 16px;
  }

  .radio-option-title {
    font-size: 15px;
  }
}

/* ===== Approved/Cart Page Styles ===== */

/* Progress bar completed state */
.progress-step.completed .step-number {
  background: var(--color-success);
  color: white;
}

.progress-step.completed .step-text {
  color: rgba(255, 255, 255, 0.8);
}

.progress-line.completed {
  background: var(--color-success);
}

/* Approved Main */
.approved-main {
  padding: 32px;
  background: var(--color-gray-50);
  min-height: calc(100vh - 120px);
}

.approved-header {
  text-align: center;
  margin-bottom: 32px;
}

.approved-title {
  font-size: 32px;
  font-weight: 700;
  color: var(--color-navy-light);
  margin-bottom: 8px;
}

.celebration {
  display: inline-block;
  animation: bounce 1s ease infinite;
}

@keyframes bounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-8px); }
}

.approved-subtitle {
  font-size: 16px;
  color: var(--color-navy-dark);
  margin-bottom: 4px;
}

.approved-tagline {
  font-size: 14px;
  color: var(--color-gray-500);
}

.approved-container {
  max-width: 1100px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 340px;
  gap: 24px;
  align-items: start;
}

/* Course Selection Cards */
.approved-courses {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.course-selection-card {
  background: var(--color-white);
  border-radius: var(--radius-lg);
  padding: 24px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

.card-header-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 20px;
}

.card-title {
  font-size: 18px;
  font-weight: 600;
  color: var(--color-navy-dark);
  margin-bottom: 4px;
}

.card-subtitle {
  font-size: 13px;
  color: var(--color-gray-500);
  margin-bottom: 4px;
}

.card-note {
  font-size: 12px;
  color: var(--color-gray-400);
  font-style: italic;
}

/* Badges */
.badge {
  font-size: 11px;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: var(--radius-lg);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.badge-required {
  background: var(--color-info-light);
  color: var(--color-primary-hover);
}

.badge-optional {
  background: var(--color-success-light);
  color: var(--color-green-700);
}

.badge-popular {
  background: var(--color-warning-light);
  color: var(--color-warning);
  font-size: 10px;
  padding: 2px 8px;
}

/* Selected Course */
.selected-course {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 16px;
  background: var(--color-primary-light);
  border-radius: 8px;
  border: 1px solid var(--color-blue-50);
}

.course-icon {
  width: 48px;
  height: 48px;
  background: var(--color-info-light);
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.course-icon iconify-icon {
  color: var(--color-primary);
}

.course-icon.icon-purple {
  background: var(--color-purple-50);
}

.course-icon.icon-purple iconify-icon {
  color: var(--color-purple-500);
}

.course-details {
  flex: 1;
}

.course-name {
  font-size: 15px;
  font-weight: 600;
  color: var(--color-navy-dark);
  margin-bottom: 4px;
}

.course-name-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 4px;
}

.course-desc {
  font-size: 13px;
  color: var(--color-gray-500);
  margin-bottom: 8px;
}

.course-price {
  font-size: 16px;
  font-weight: 700;
  color: var(--color-primary);
}

.course-price.free {
  color: var(--color-success);
}

.course-pricing {
  display: flex;
  align-items: center;
  gap: 8px;
}

.course-price-original {
  font-size: 14px;
  color: var(--color-gray-400);
  text-decoration: line-through;
}

/* Supplemental Courses */
.supplemental-courses {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.supplemental-course-option {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 16px;
  background: var(--color-white);
  border: 1px solid var(--color-gray-100);
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.2s;
}

.supplemental-course-option:hover {
  border-color: var(--color-primary);
  background: var(--color-primary-light);
}

.course-checkbox {
  width: 20px;
  height: 20px;
  margin-top: 14px;
  accent-color: var(--color-primary);
  cursor: pointer;
}

.supplemental-course-option .course-icon {
  width: 40px;
  height: 40px;
}

.supplemental-footer {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 16px;
  color: var(--color-gray-400);
  font-size: 13px;
}

.supplemental-footer iconify-icon {
  color: var(--color-text-disabled);
}

/* Cart Sidebar */
.cart-sidebar {
  position: sticky;
  top: 24px;
}

.cart-summary-card {
  background: var(--color-white);
  border-radius: var(--radius-lg);
  padding: 24px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

.cart-title {
  font-size: 16px;
  font-weight: 600;
  color: var(--color-navy-dark);
  margin-bottom: 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--color-gray-100);
}

.cart-items {
  margin-bottom: 16px;
}

.cart-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 0;
}

.cart-item-name {
  font-size: 14px;
  color: var(--color-navy-dark);
}

.cart-item-price {
  font-size: 14px;
  font-weight: 600;
  color: var(--color-navy-dark);
}

.cart-total {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 0;
  border-top: 1px solid var(--color-gray-100);
  margin-bottom: 20px;
}

.cart-total-label {
  font-size: 15px;
  font-weight: 600;
  color: var(--color-navy-dark);
}

.cart-total-amount {
  font-size: 20px;
  font-weight: 700;
  color: var(--color-navy-dark);
}

/* Payment Options */
.payment-options {
  margin-bottom: 20px;
}

.payment-options-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--color-navy-dark);
  margin-bottom: 12px;
}

.payment-option {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px;
  border: 1px solid var(--color-gray-100);
  border-radius: 8px;
  margin-bottom: 10px;
  cursor: pointer;
  transition: all 0.2s;
}

.payment-option:hover {
  border-color: var(--color-primary);
}

.payment-option:has(.payment-radio:checked) {
  border-color: var(--color-primary);
  background: var(--color-primary-light);
}

.payment-radio {
  width: 18px;
  height: 18px;
  accent-color: var(--color-primary);
  cursor: pointer;
}

.payment-option-icon {
  width: 36px;
  height: 36px;
  background: var(--color-gray-50);
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-gray-500);
}

.payment-option-details {
  flex: 1;
}

.payment-option-name {
  display: block;
  font-size: 14px;
  font-weight: 600;
  color: var(--color-navy-dark);
  margin-bottom: 2px;
}

.payment-option-desc {
  display: block;
  font-size: 12px;
  color: var(--color-gray-500);
}

.payment-options-footer {
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid var(--color-gray-100);
}

.add-payment-method-link {
  font-size: 13px;
  font-weight: 500;
  color: var(--color-primary);
  text-decoration: none;
}

.add-payment-method-link:hover {
  text-decoration: underline;
}

.continue-payment-btn {
  width: 100%;
  padding: 16px;
  background: var(--color-navy-dark);
  color: white;
  border: none;
  border-radius: 8px;
  font-size: 15px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  transition: all 0.2s;
}

.continue-payment-btn:hover {
  background: var(--color-navy-medium);
}

.cart-footnote {
  font-size: 11px;
  color: var(--color-gray-400);
  text-align: center;
  margin-top: 16px;
  line-height: 1.5;
}

/* Approved Page Responsive */
@media (max-width: 900px) {
  .approved-container {
    grid-template-columns: 1fr;
  }

  .cart-sidebar {
    position: static;
    order: -1;
  }
}

@media (max-width: 600px) {
  .approved-main {
    padding: 20px 16px;
  }

  .approved-title {
    font-size: 26px;
  }

  .course-selection-card {
    padding: 20px;
  }

  .card-header-row {
    flex-direction: column;
    gap: 12px;
  }

  .selected-course {
    flex-direction: column;
    text-align: center;
  }

  .supplemental-course-option {
    flex-wrap: wrap;
  }

  .course-checkbox {
    order: -1;
    margin-top: 0;
  }
}

/* ===== Development Page Styles ===== */
.development-page {
  max-width: 1200px;
}

.development-page .page-header {
  margin-bottom: 32px;
}

.development-page .page-subtitle {
  font-size: 14px;
  color: var(--color-gray-500);
  margin-top: 4px;
}

.dev-section {
  background: var(--color-white);
  border-radius: 8px;
  padding: 24px;
  margin-bottom: 24px;
  box-shadow: var(--shadow-card);
}

.dev-section-title {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 18px;
  font-weight: 600;
  color: var(--color-navy-dark);
  margin-bottom: 8px;
}

.dev-section-title iconify-icon {
  color: var(--color-primary);
}

.dev-section-desc {
  font-size: 14px;
  color: var(--color-gray-500);
  margin-bottom: 24px;
}

/* Flow Diagram */
.flow-diagram {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
}

.flow-step {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px 24px;
  background: var(--color-primary-light);
  border: 1px solid var(--color-blue-50);
  border-radius: 8px;
  width: 100%;
  max-width: 500px;
}

.flow-number {
  width: 32px;
  height: 32px;
  background: var(--color-primary);
  color: white;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 600;
  flex-shrink: 0;
}

.flow-content {
  flex: 1;
}

.flow-link {
  display: flex;
  flex-direction: column;
  gap: 2px;
  text-decoration: none;
}

.flow-link:hover .flow-name {
  color: var(--color-primary);
}

.flow-name {
  font-size: 15px;
  font-weight: 600;
  color: var(--color-navy-dark);
  transition: color 0.2s;
}

.flow-path {
  font-size: 12px;
  color: var(--color-gray-500);
  font-family: monospace;
}

.flow-arrow {
  padding: 8px 0;
  color: var(--color-text-disabled);
}

/* Dev Status */
.dev-status {
  font-size: 11px;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: var(--radius-lg);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.dev-status.status-complete {
  background: var(--color-success-light);
  color: var(--color-green-700);
}

.dev-status.status-in_progress {
  background: var(--color-warning-light);
  color: var(--color-warning);
}

.dev-status.status-planned {
  background: var(--color-gray-50);
  color: var(--color-gray-500);
}

/* Dev Table */
.dev-table-container {
  overflow-x: auto;
}

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

.dev-table th {
  text-align: left;
  padding: 12px 16px;
  font-size: 11px;
  font-weight: 600;
  color: var(--color-gray-500);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  border-bottom: 1px solid var(--color-gray-100);
  background: var(--color-gray-50);
}

.dev-table td {
  padding: 16px;
  font-size: 14px;
  border-bottom: 1px solid var(--color-gray-100);
  vertical-align: middle;
}

.dev-table tbody tr:hover {
  background: var(--color-primary-light);
}

.page-name-cell {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 500;
}

.page-name-cell iconify-icon {
  color: var(--color-primary);
}

.desc-cell {
  color: var(--color-gray-500);
  max-width: 300px;
}

.endpoint-code {
  background: var(--color-gray-50);
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 13px;
  color: var(--color-pink-500);
}

.dev-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  background: var(--color-white);
  border: 1px solid var(--color-gray-100);
  border-radius: var(--radius-sm);
  font-size: 13px;
  font-weight: 500;
  color: var(--color-navy-dark);
  text-decoration: none;
  transition: all 0.2s;
}

.dev-btn:hover {
  border-color: var(--color-primary);
  color: var(--color-primary);
  background: var(--color-primary-light);
}

/* Quick Links Grid */
.quick-links-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 16px;
}

.quick-link-card {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px;
  background: var(--color-gray-50);
  border: 1px solid var(--color-gray-100);
  border-radius: 8px;
  text-decoration: none;
  transition: all 0.2s;
}

.quick-link-card:hover {
  border-color: var(--color-primary);
  background: var(--color-primary-light);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

.quick-link-icon {
  width: 40px;
  height: 40px;
  background: var(--color-info-light);
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-primary);
  flex-shrink: 0;
}

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

.quick-link-name {
  display: block;
  font-size: 14px;
  font-weight: 600;
  color: var(--color-navy-dark);
  margin-bottom: 2px;
}

.quick-link-path {
  display: block;
  font-size: 12px;
  color: var(--color-gray-500);
  font-family: monospace;
}

/* Development Page Responsive */
@media (max-width: 768px) {
  .flow-step {
    flex-wrap: wrap;
  }

  .dev-table th:nth-child(2),
  .dev-table td:nth-child(2) {
    display: none;
  }

  .quick-links-grid {
    grid-template-columns: 1fr;
  }
}

/* Searchable Select Component */
.searchable-select-native {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  clip-path: inset(50%) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

.searchable-select-wrapper {
  position: relative;
  width: 100%;
}

.searchable-select-display {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--color-gray-200);
  border-radius: var(--radius-sm);
  background: var(--color-white);
  cursor: pointer;
  font-size: 14px;
  min-height: 42px;
  text-align: left;
}

.searchable-select-display:hover {
  border-color: var(--color-gray-300);
}

.searchable-select-display:disabled {
  background: var(--color-gray-50);
  color: var(--color-gray-500);
  cursor: not-allowed;
}

.searchable-select-wrapper.disabled .searchable-select-arrow {
  color: var(--color-gray-300);
}

.searchable-select-wrapper.open .searchable-select-display {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
}

.searchable-select-text {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--color-gray-700);
}

.searchable-select-arrow {
  font-size: 10px;
  color: var(--color-gray-400);
  margin-left: 8px;
  transition: transform 0.2s;
}

.searchable-select-wrapper.open .searchable-select-arrow {
  transform: rotate(180deg);
}

.searchable-select-dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  margin-top: 4px;
  background: var(--color-white);
  border: 1px solid var(--color-gray-200);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-lg);
  z-index: 10001;
  max-height: 300px;
  display: flex;
  flex-direction: column;
}

.searchable-select-dropdown[hidden] {
  display: none !important;
}

.searchable-select-search {
  padding: 10px 12px;
  border: none;
  border-bottom: 1px solid var(--color-gray-200);
  font-size: 14px;
  outline: none;
}

.searchable-select-search:focus {
  background: var(--color-white);
}

.searchable-select-options {
  overflow-y: auto;
  max-height: 250px;
}

.searchable-select-option {
  display: block;
  width: 100%;
  border: 0;
  background: var(--color-white);
  text-align: left;
  padding: 10px 12px;
  cursor: pointer;
  font-size: 14px;
  color: var(--color-gray-700);
}

.searchable-select-option:hover {
  background: var(--color-gray-50);
}

.searchable-select-option.highlighted {
  background: var(--color-gray-50);
}

.searchable-select-option.selected {
  background: var(--color-primary-light);
  color: var(--color-primary);
  font-weight: 500;
}

.searchable-select-option:disabled {
  color: var(--color-gray-400);
  cursor: not-allowed;
}

.searchable-select-no-results {
  padding: 12px;
  text-align: center;
  color: var(--color-gray-400);
  font-size: 14px;
}

/* Searchable Multi-Select Component */
.searchable-multiselect-wrapper {
  position: relative;
  width: 100%;
}

.searchable-multiselect-display {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--color-gray-200);
  border-radius: var(--radius-sm);
  background: var(--color-white);
  cursor: pointer;
  font-size: 14px;
  min-height: 42px;
  text-align: left;
}

.searchable-multiselect-display:hover {
  border-color: var(--color-gray-300);
}

.searchable-multiselect-display:disabled {
  background: var(--color-gray-50);
  color: var(--color-gray-500);
  cursor: not-allowed;
}

.searchable-multiselect-wrapper.open .searchable-multiselect-display {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
}

.searchable-multiselect-text {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--color-gray-700);
}

.searchable-multiselect-arrow {
  font-size: 10px;
  color: var(--color-gray-400);
  margin-left: 8px;
  transition: transform 0.2s;
}

.searchable-multiselect-wrapper.disabled .searchable-multiselect-arrow {
  color: var(--color-gray-300);
}

.searchable-multiselect-wrapper.open .searchable-multiselect-arrow {
  transform: rotate(180deg);
}

.searchable-multiselect-dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  margin-top: 4px;
  background: var(--color-white);
  border: 1px solid var(--color-gray-200);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-lg);
  z-index: 10001;
  max-height: 360px;
  display: flex;
  flex-direction: column;
}

.searchable-multiselect-dropdown[hidden] {
  display: none !important;
}

.searchable-multiselect-search {
  padding: 10px 12px;
  border: none;
  border-bottom: 1px solid var(--color-gray-200);
  font-size: 14px;
  outline: none;
}

.searchable-multiselect-search:focus {
  background: var(--color-white);
}

.searchable-multiselect-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 12px;
  border-bottom: 1px solid var(--color-gray-100);
  background: var(--color-gray-50);
}

.searchable-multiselect-action {
  border: none;
  background: none;
  color: var(--color-primary);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  padding: 0;
}

.searchable-multiselect-action:hover {
  color: var(--color-primary-hover);
}

.searchable-multiselect-action:disabled,
.searchable-multiselect-action:disabled:hover {
  color: var(--color-gray-400);
  cursor: not-allowed;
}

.searchable-multiselect-options {
  overflow-y: auto;
  max-height: 270px;
}

.searchable-multiselect-option {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  border: 0;
  border-bottom: 1px solid var(--color-gray-50);
  background: var(--color-white);
  text-align: left;
  padding: 10px 12px;
  cursor: pointer;
  font-size: 14px;
  color: var(--color-gray-700);
}

.searchable-multiselect-option:hover {
  background: var(--color-gray-50);
}

.searchable-multiselect-option:disabled {
  color: var(--color-gray-400);
  cursor: not-allowed;
}

.searchable-multiselect-checkbox {
  width: 16px;
  height: 16px;
  border: 1px solid var(--color-gray-300);
  border-radius: 3px;
  background: var(--color-white);
  color: var(--color-white);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  flex: 0 0 auto;
}

.searchable-multiselect-option.selected .searchable-multiselect-checkbox {
  border-color: var(--color-primary);
  background: var(--color-primary);
}

.searchable-multiselect-option.selected .searchable-multiselect-label {
  color: var(--color-primary);
  font-weight: 500;
}

.searchable-multiselect-label {
  flex: 1;
  min-width: 0;
}

.searchable-multiselect-no-results {
  padding: 12px;
  text-align: center;
  color: var(--color-gray-400);
  font-size: 14px;
}

/* Modal Styles */
.modal {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 9999;
  align-items: center;
  justify-content: center;
}

.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(4px);
  z-index: 9999;

  /* Center turbo-frame modals like withdraw/transfer/terminate */
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}

/* For legacy JS-driven modals (<div class="modal"> ... <div class="modal-overlay"></div> <div class="modal-content"></div>)
   keep overlay inside the modal stacking context to avoid layering glitches.
*/
.modal > .modal-overlay {
  position: absolute;
  z-index: 0;
}

.modal > .modal-content,
.modal > .modal-dialog {
  z-index: 1;
}

.modal-content {
  position: relative;
  background: var(--color-white);
  border-radius: var(--radius-lg);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
  max-width: 800px;
  width: 90%;
  max-height: 90vh;
  overflow-y: auto;
  z-index: 10000;
}

.modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 24px 32px;
  border-bottom: 1px solid var(--color-gray-100);
}

.modal-header h2 {
  margin: 0;
  font-size: 24px;
  font-weight: 600;
  color: var(--color-navy-dark);
  font-variant-ligatures: none;
  font-feature-settings: "liga" 0, "clig" 0;
}

.modal-close {
  background: none;
  border: none;
  cursor: pointer;
  padding: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-sm);
  transition: background-color 0.2s;
}

.modal-close:hover {
  background-color: var(--color-gray-50);
}

.modal-close svg {
  width: 20px;
  height: 20px;
  color: var(--color-gray-500);
}

.modal-form {
  padding: 32px;
}

.form-info-box {
  margin-bottom: 20px;
}

.form-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 20px;
  margin-bottom: 24px;
}

.form-row:last-child {
  margin-bottom: 0;
}

/* Large Modal Variant */
.modal-content-large {
  max-width: 900px;
}

/* Modal Description */
.modal-description {
  margin: 0;
  padding: 0 32px;
  padding-top: 16px;
  color: var(--color-gray-600);
  font-size: 14px;
}

/* Modal Alert */
.modal-alert {
  padding: 12px 16px;
  margin-bottom: 16px;
  border-radius: var(--radius-sm);
  font-size: 14px;
}

.modal-alert.alert-error {
  background: var(--color-error-light);
  color: var(--color-error);
  border: 1px solid var(--color-error);
}

/* Form Section Divider */
.form-section-divider {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 24px 0 16px;
  padding-top: 16px;
  border-top: 1px solid var(--color-gray-100);
}

.form-section-title {
  margin: 0;
  font-size: 14px;
  font-weight: 600;
  color: var(--color-navy-dark);
}

/* Campus Checkbox Grid */
.campus-checkbox-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 8px;
  max-height: 200px;
  overflow-y: auto;
  padding: 12px;
  background: var(--color-gray-50);
  border-radius: var(--radius-sm);
  border: 1px solid var(--color-gray-100);
}

.campus-checkbox-item {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 8px;
  background: var(--color-white);
  border-radius: var(--radius-sm);
  border: 1px solid var(--color-gray-100);
}

.campus-checkbox-item:hover {
  border-color: var(--color-primary);
}

.campus-checkbox-item input[type="checkbox"] {
  margin-top: 2px;
}

.campus-location-hint {
  display: block;
  font-size: 12px;
  color: var(--color-gray-500);
}

/* Schedule Rows */
.schedule-rows {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.schedule-row {
  background: var(--color-gray-50);
  border-radius: var(--radius-sm);
  padding: 12px;
  border: 1px solid var(--color-gray-100);
}

.schedule-row-inputs {
  display: flex;
  align-items: flex-end;
  gap: 12px;
  margin-bottom: 0;
}

.schedule-row-inputs .form-group {
  flex: 1;
  margin-bottom: 0;
}

.schedule-row-inputs .form-group .form-label {
  font-size: 12px;
  margin-bottom: 4px;
}

.btn-remove-row {
  padding: 8px;
  border: none;
  background: none;
  cursor: pointer;
  color: var(--color-gray-400);
  border-radius: var(--radius-sm);
  flex-shrink: 0;
}

.btn-remove-row:hover {
  color: var(--color-error);
  background: var(--color-error-light);
}

/* Add Row Button */
.add-row-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 12px;
  margin-top: 8px;
  border: none;
  background: none;
  cursor: pointer;
  color: var(--color-primary);
  font-size: 14px;
  font-weight: 500;
}

.add-row-btn:hover {
  text-decoration: underline;
}

.add-row-btn svg {
  width: 16px;
  height: 16px;
}

/* Course Info Display in Edit Modal */
.course-info-display {
  background: var(--color-gray-50);
  border-radius: var(--radius-sm);
  padding: 16px;
  margin-bottom: 20px;
  border: 1px solid var(--color-gray-100);
}

.course-info-display .info-row {
  display: flex;
  justify-content: space-between;
  padding: 4px 0;
}

.course-info-display .info-row:not(:last-child) {
  border-bottom: 1px solid var(--color-gray-100);
  margin-bottom: 4px;
  padding-bottom: 8px;
}

.course-info-display .info-label {
  font-size: 13px;
  color: var(--color-gray-500);
}

.course-info-display .info-value {
  font-size: 13px;
  font-weight: 500;
  color: var(--color-navy-dark);
}

/* ===================================
   PROGRAMS PAGE STYLES
   =================================== */

/* Programs Page Container */
.programs-page {
  padding: 24px;
}

/* Programs Table */
.programs-table-container {
  background: var(--color-white);
  border-radius: 8px;
  box-shadow: var(--shadow-card);
}

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

.programs-table thead {
  background: var(--color-gray-50);
  border-bottom: 2px solid var(--color-gray-100);
}

.programs-table th {
  padding: 12px 16px;
  text-align: left;
  font-size: 11px;
  font-weight: 600;
  color: var(--color-gray-500);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.programs-table tbody tr {
  border-bottom: 1px solid var(--color-gray-100);
  transition: background 0.2s;
  cursor: pointer;
}

.programs-table tbody tr:hover {
  background: var(--color-gray-50);
}

.programs-table td {
  padding: 16px;
  font-size: 14px;
  color: var(--color-navy-dark);
}

.programs-table th:first-child,
.programs-table td:first-child {
  width: 100%;
}

.programs-table .col-right {
  text-align: right;
  width: 80px;
}

/* Program Name Cell */
.program-name-cell {
  display: flex;
  align-items: center;
  gap: 12px;
}

.program-icon {
  width: 40px;
  height: 40px;
  background: var(--color-info-light);
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-primary);
  flex-shrink: 0;
  font-size: 20px;
}

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

.program-name {
  font-weight: 600;
  color: var(--color-navy-dark);
  margin-bottom: 4px;
}

.program-description-short {
  font-size: 13px;
  color: var(--color-gray-500);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Program Code Badge */
.program-code-badge {
  display: inline-block;
  padding: 4px 10px;
  background: var(--color-gray-50);
  color: var(--color-gray-600);
  border-radius: var(--radius-lg);
  font-size: 12px;
  font-weight: 600;
  font-family: 'Courier New', monospace;
}

/* Count displays */
.count-with-active {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.count-total {
  font-weight: 600;
  color: var(--color-navy-dark);
  font-size: 14px;
}

.count-active {
  font-size: 12px;
  color: var(--color-success);
}

/* Program Detail Page */
.program-detail-page {
  padding: 24px;
}

.program-detail-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 16px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--color-gray-100);
}

.program-header-info {
  display: flex;
  gap: 16px;
  align-items: flex-start;
}

.program-header-icon {
  width: 64px;
  height: 64px;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border-radius: var(--radius-lg);
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 32px;
  flex-shrink: 0;
}

.program-title-row {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 8px;
}

.program-detail-title {
  font-size: 28px;
  font-weight: 700;
  color: var(--color-navy-dark);
  margin-bottom: 0;
}

.program-header-badges {
  display: flex;
  gap: 8px;
  align-items: center;
  margin-bottom: 8px;
}

.program-code-text {
  display: inline-block;
  padding: 4px 12px;
  background: var(--color-gray-50);
  color: var(--color-gray-600);
  border-radius: var(--radius-sm);
  font-size: 13px;
  font-weight: 600;
  font-family: 'Courier New', monospace;
}

.program-description-header {
  font-size: 14px;
  color: var(--color-gray-500);
  margin-top: 8px;
}

/* Program Stats Grid */
.program-stats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-bottom: 24px;
}

.program-stats-grid.program-stats-grid-2 {
  grid-template-columns: repeat(2, 1fr);
  max-width: 600px;
}

.program-stat-card {
  background: var(--color-white);
  padding: 20px;
  border-radius: 8px;
  box-shadow: var(--shadow-card);
  display: flex;
  gap: 16px;
  align-items: center;
}

.program-stat-card.program-stat-card-clickable {
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
  border: 1px solid transparent;
}

.program-stat-card.program-stat-card-clickable:hover {
  transform: translateY(-1px);
  border-color: var(--color-primary-light);
  box-shadow: 0 6px 16px rgba(44, 154, 245, 0.15);
}

.program-stat-card.program-stat-card-clickable:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

.stat-icon {
  width: 48px;
  height: 48px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  flex-shrink: 0;
}

.stat-icon.stat-courses {
  background: var(--color-info-light);
  color: var(--color-primary);
}

.stat-icon.stat-instances {
  background: var(--color-purple-50);
  color: var(--color-purple-500);
}

.stat-icon.stat-students {
  background: var(--color-success-light);
  color: var(--color-success);
}

.stat-icon.stat-requirements {
  background: var(--color-warning-light);
  color: var(--color-warning);
}

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

.stat-label {
  font-size: 13px;
  color: var(--color-gray-500);
  margin-bottom: 4px;
}

.stat-value {
  font-size: 24px;
  font-weight: 700;
  color: var(--color-navy-dark);
}

.stat-sublabel {
  font-size: 12px;
  color: var(--color-gray-500);
  margin-top: 4px;
}

/* Program Tabs */
.program-tabs {
  display: flex;
  gap: 8px;
  border-bottom: 2px solid var(--color-gray-100);
  margin-bottom: 24px;
}

.program-tab-content {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.program-tab-content.hidden {
  display: none;
}

.tab-header-actions {
  display: flex;
  justify-content: flex-end;
}

/* Program Overview Grid */
.program-overview-grid {
  display: block;
}

.overview-left {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.overview-right {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.program-section-card {
  background: var(--color-white);
  border: 1px solid var(--color-gray-100);
  border-radius: 8px;
  padding: 24px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

.section-heading {
  font-size: 16px;
  font-weight: 600;
  color: var(--color-navy-dark);
  margin-bottom: 16px;
}

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

.info-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
}

.info-item {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.info-item.full-width {
  grid-column: 1 / -1;
}

.info-label {
  font-size: 13px;
  font-weight: 500;
  color: var(--color-gray-500);
}

.info-value {
  font-size: 14px;
  color: var(--color-navy-dark);
}

/* Inline Edit Form */
.inline-edit-form {
  width: 100%;
}

.inline-edit-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
}

.inline-edit-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.inline-edit-field.full-width {
  grid-column: 1 / -1;
}

.inline-edit-input {
  padding: 10px 12px;
  border: 1px solid var(--color-gray-200);
  border-radius: var(--radius-sm);
  font-size: 14px;
  color: var(--color-navy-dark);
  background: var(--color-white);
  transition: border-color 0.2s, box-shadow 0.2s;
}

.inline-edit-input:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(33, 150, 243, 0.1);
}

.inline-edit-textarea {
  padding: 10px 12px;
  border: 1px solid var(--color-gray-200);
  border-radius: var(--radius-sm);
  font-size: 14px;
  color: var(--color-navy-dark);
  background: var(--color-white);
  resize: vertical;
  font-family: inherit;
  transition: border-color 0.2s, box-shadow 0.2s;
}

.inline-edit-textarea:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(33, 150, 243, 0.1);
}

.inline-edit-checkbox-container {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 0;
}

.inline-edit-checkbox {
  width: 18px;
  height: 18px;
  accent-color: var(--color-primary);
  cursor: pointer;
}

.inline-edit-checkbox-label {
  font-size: 14px;
  color: var(--color-navy-dark);
  cursor: pointer;
}

.inline-edit-actions {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid var(--color-gray-100);
}

.inline-edit-error {
  background: var(--color-error-light);
  border: 1px solid var(--color-red-100);
  color: var(--color-red-800);
  padding: 12px 16px;
  border-radius: var(--radius-sm);
  margin-bottom: 16px;
  font-size: 14px;
}

/* Recent Courses List */
.recent-courses-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.recent-course-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
  background: var(--color-gray-50);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background 0.2s;
}

.recent-course-item:hover {
  background: var(--color-gray-100);
}

.course-item-icon {
  width: 32px;
  height: 32px;
  background: var(--color-info-light);
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-primary);
  flex-shrink: 0;
  font-size: 16px;
}

.course-item-info {
  flex: 1;
  min-width: 0;
}

.course-item-name {
  font-weight: 600;
  color: var(--color-navy-dark);
  font-size: 14px;
  margin-bottom: 2px;
}

.course-item-meta {
  font-size: 12px;
  color: var(--color-gray-500);
}

.course-item-enrollment {
  font-size: 13px;
  font-weight: 600;
  color: var(--color-primary);
  white-space: nowrap;
}

/* Stats List */
.stats-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.stat-list-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 0;
  border-bottom: 1px solid var(--color-gray-100);
}

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

.stat-list-label {
  font-size: 14px;
  color: var(--color-gray-500);
}

.stat-list-value {
  font-size: 16px;
  font-weight: 600;
  color: var(--color-navy-dark);
}

/* Quick Actions */
.quick-actions {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.action-button {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  background: var(--color-gray-50);
  border-radius: var(--radius-sm);
  font-size: 14px;
  font-weight: 500;
  color: var(--color-navy-dark);
  text-decoration: none;
  transition: background 0.2s;
}

.action-button:hover {
  background: var(--color-gray-100);
}

.action-button iconify-icon {
  font-size: 16px;
}

/* Program Courses Table */
.program-courses-table {
  width: 100%;
  border-collapse: collapse;
  background: var(--color-white);
  border-radius: 8px;
  overflow: hidden;
  box-shadow: var(--shadow-card);
}

.program-courses-table thead {
  background: var(--color-gray-50);
  border-bottom: 2px solid var(--color-gray-100);
}

.program-courses-table th {
  padding: 12px 16px;
  text-align: left;
  font-size: 11px;
  font-weight: 600;
  color: var(--color-gray-500);
  text-transform: uppercase;
}

.program-courses-table tbody tr {
  border-bottom: 1px solid var(--color-gray-100);
  transition: background 0.2s;
}

.program-courses-table tbody tr:hover {
  background: var(--color-gray-50);
}

.program-courses-table td {
  padding: 14px 16px;
  font-size: 14px;
}

.course-name-cell {
  display: flex;
  align-items: center;
  gap: 8px;
}

.mini-icon {
  width: 20px;
  height: 20px;
  color: var(--color-primary);
  flex-shrink: 0;
}

.course-name {
  font-weight: 600;
  color: var(--color-navy-dark);
  font-size: 14px;
  margin-bottom: 2px;
}

.course-description-mini {
  font-size: 12px;
  color: var(--color-gray-500);
  margin-top: 2px;
}

.badge-primary {
  background: var(--color-info-light);
  color: var(--color-primary-hover);
  padding: 4px 10px;
  border-radius: var(--radius-lg);
  font-size: 12px;
  font-weight: 500;
  display: inline-block;
}

.badge-supplemental {
  background: var(--color-purple-50);
  color: var(--color-purple-700);
  padding: 4px 10px;
  border-radius: var(--radius-lg);
  font-size: 12px;
  font-weight: 500;
  display: inline-block;
}

/* Program Catalog Table */
.program-catalog-table {
  width: 100%;
  background: var(--color-white);
  border: 1px solid var(--color-gray-100);
  border-radius: 8px;
  border-collapse: collapse;
}

/* When table is inside a card, remove outer border */
.course-section-card .program-catalog-table {
  border: none;
  border-radius: 0;
  margin-top: 16px;
}

.program-catalog-table thead {
  background: var(--color-gray-50);
}

.program-catalog-table th {
  padding: 12px 16px;
  text-align: left;
  font-size: 11px;
  font-weight: 600;
  color: var(--color-gray-500);
  letter-spacing: 0.5px;
  border-bottom: 1px solid var(--color-gray-100);
}

.program-catalog-table td {
  padding: 16px;
  font-size: 14px;
  border-bottom: 1px solid var(--color-gray-100);
  vertical-align: middle;
}

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

.program-catalog-table tbody tr:hover {
  background: var(--color-gray-50);
  cursor: default;
}

.program-catalog-table .col-right {
  text-align: right;
  width: 80px;
}

/* Catalog Course Cell */
.catalog-course-cell {
  display: flex;
  align-items: center;
  gap: 12px;
}

.catalog-course-icon {
  width: 36px;
  height: 36px;
  background: var(--color-info-light);
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  flex-shrink: 0;
  color: var(--color-primary);
}

.catalog-course-icon-supplemental {
  background: var(--color-purple-50);
  color: var(--color-purple-700);
}

.catalog-course-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.catalog-course-name {
  font-size: 14px;
  font-weight: 500;
  color: var(--color-navy-dark);
}

.catalog-course-code {
  font-size: 12px;
  color: var(--color-gray-500);
}

.catalog-description {
  font-size: 13px;
  color: var(--color-gray-600);
  line-height: 1.4;
  max-width: 300px;
}

.catalog-tuition .tuition-amount {
  font-size: 14px;
  font-weight: 600;
  color: var(--color-navy-dark);
}

.catalog-instances {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.catalog-instances .instance-count {
  font-size: 16px;
  font-weight: 600;
  color: var(--color-navy-dark);
}

.catalog-instances .instance-label {
  font-size: 11px;
  color: var(--color-gray-500);
}

.catalog-code {
  font-size: 13px;
  color: var(--color-gray-600);
  font-family: var(--font-mono, monospace);
}

/* Empty State Card */
.empty-state-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 48px 24px;
  background: var(--color-white);
  border: 1px solid var(--color-gray-100);
  border-radius: 8px;
  text-align: center;
}

.empty-state-card .empty-state-icon {
  font-size: 48px;
  color: var(--color-gray-300);
  margin-bottom: 16px;
}

.empty-state-card .empty-state-text {
  font-size: 14px;
  color: var(--color-gray-500);
  margin-bottom: 16px;
}

/* Empty State Inline */
.empty-state-inline {
  display: block;
  padding: 24px 16px;
  background: var(--color-white);
  border: 1px solid var(--color-gray-100);
  border-radius: 8px;
}

/* Section Header Actions */
.section-header-actions {
  display: flex;
  align-items: center;
  gap: 16px;
}

/* Requirements List */
.requirements-list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
}

.requirement-card {
  background: var(--color-white);
  border: 1px solid var(--color-gray-100);
  border-radius: 8px;
  padding: 16px;
  transition: box-shadow 0.2s;
}

.requirement-card:hover {
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.requirement-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
}

.requirement-type-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 12px;
  border-radius: var(--radius-lg);
  font-size: 12px;
  font-weight: 500;
}

.badge-document {
  background: var(--color-info-light);
  color: var(--color-primary-hover);
}

.badge-question {
  background: var(--color-warning-light);
  color: var(--color-orange-900);
}

.requirement-actions {
  display: flex;
  gap: 4px;
}

.btn-icon {
  background: none;
  border: none;
  padding: 6px;
  border-radius: 4px;
  cursor: pointer;
  color: var(--color-gray-500);
  transition: background 0.2s;
  display: flex;
  align-items: center;
  justify-content: center;
}

.btn-icon:hover {
  background: var(--color-gray-50);
  color: var(--color-navy-dark);
}

.btn-icon iconify-icon {
  font-size: 16px;
}

.requirement-question {
  font-size: 14px;
  color: var(--color-navy-dark);
  margin-bottom: 8px;
  line-height: 1.5;
}

.requirement-meta {
  display: flex;
  gap: 12px;
  font-size: 12px;
}

.requirement-required {
  padding: 2px 8px;
  border-radius: 4px;
  font-weight: 500;
  display: inline-block;
}

.required-yes {
  background: var(--color-success-light);
  color: var(--color-success);
}

.required-no {
  background: var(--color-gray-50);
  color: var(--color-gray-500);
}

.requirement-file-type {
  color: var(--color-gray-500);
}

/* Form Styles */
.form-page {
  padding: 24px;
  max-width: 900px;
  margin: 0 auto;
}

.form-container {
  background: var(--color-white);
  border-radius: 8px;
  box-shadow: var(--shadow-card);
  padding: 32px;
}

.program-form {
  /* Form container */
}

.form-section {
  margin-bottom: 32px;
}

.form-section-heading {
  font-size: 18px;
  font-weight: 600;
  color: var(--color-navy-dark);
  margin-bottom: 20px;
  padding-bottom: 12px;
  border-bottom: 2px solid var(--color-gray-100);
}

.form-row {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
  margin-bottom: 20px;
}

.form-field {
  display: flex;
  flex-direction: column;
}

.form-group.full-width {
  grid-column: 1 / -1;
}

.form-group label {
  font-size: 14px;
  font-weight: 500;
  color: var(--color-gray-600);
  margin-bottom: 8px;
}

.form-group label .required {
  color: var(--color-error);
}

.form-field.full-width {
  grid-column: 1 / -1;
}

.form-label {
  font-size: 14px;
  font-weight: 600;
  color: var(--color-navy-dark);
  margin-bottom: 8px;
}

.form-input {
  padding: 10px 14px;
  border: 1px solid var(--color-gray-300);
  border-radius: var(--radius-sm);
  font-size: 14px;
  color: var(--color-navy-dark);
  transition: border-color 0.2s, box-shadow 0.2s;
}

.form-input:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(33, 150, 243, 0.1);
}

.form-input::placeholder {
  color: var(--color-gray-400);
}

select.form-input {
  cursor: pointer;
  background-color: var(--color-white);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%236b7280' d='M6 9L1 4h10z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  padding-right: 36px;
  -webkit-appearance: none;
  appearance: none;
}

/* Instructor multi-select styles */
.instructor-multiselect {
  position: relative;
}

.instructor-selected-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 8px;
  min-height: 24px;
}

.instructor-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 8px;
  background-color: var(--color-blue-50);
  border: 1px solid var(--color-blue-500);
  border-radius: 4px;
  font-size: 13px;
  color: var(--color-primary-hover);
}

.instructor-tag .remove-tag {
  background: none;
  border: none;
  color: var(--color-primary-hover);
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  padding: 0;
  width: 16px;
  height: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.instructor-tag .remove-tag:hover {
  color: var(--color-blue-900);
}

.instructor-dropdown {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  background: var(--color-white);
  border: 1px solid var(--color-gray-200);
  border-radius: var(--radius-sm);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  max-height: 240px;
  overflow-y: auto;
  z-index: 1000;
}

.instructor-option {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  cursor: pointer;
  transition: background-color 0.15s;
}

.instructor-option:hover {
  background-color: var(--color-bg-light);
}

.instructor-option .instructor-checkbox {
  margin: 0;
  cursor: pointer;
}

.instructor-option span {
  flex: 1;
  font-size: 14px;
  color: var(--color-navy-dark);
}

.checkbox-label {
  display: flex;
  align-items: center;
  cursor: pointer;
  margin-top: 24px;
}

.checkbox-label input[type="checkbox"] {
  width: 18px;
  height: 18px;
  margin-right: 8px;
  cursor: pointer;
}

.checkbox-label span {
  font-size: 14px;
  color: var(--color-gray-600);
}

.modal-footer {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  padding-top: 24px;
  margin-top: 24px;
  border-top: 1px solid var(--color-gray-100);
}

.modal-footer .btn-secondary,
.modal-footer .btn-primary {
  min-width: 140px;
  width: auto;
  height: auto;
  padding: 10px 16px;
  border: 1px solid transparent;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.5;
  text-align: center;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  box-sizing: border-box;
}

.modal-footer .btn-secondary {
  border-color: var(--color-border-muted);
}

/* Native Dialog Modal (admin-modal) */
.admin-modal {
  border: none;
  border-radius: var(--radius-lg);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
  padding: 0;
  max-width: 440px;
  width: 90%;
}

.admin-modal::backdrop {
  background: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(4px);
}

.admin-modal .modal-content {
  max-width: 100%;
  width: 100%;
  box-shadow: none;
}

.admin-modal .modal-header {
  padding: 20px 24px;
}

.admin-modal .modal-header h3 {
  margin: 0;
  font-size: 18px;
  font-weight: 600;
  color: var(--color-navy-dark);
}

.admin-modal .modal-close {
  font-size: 24px;
  color: var(--color-gray-400);
  line-height: 1;
}

.admin-modal .modal-body {
  padding: 0 24px 24px;
}

.admin-modal .modal-description {
  margin: 0 0 16px 0;
  font-size: 14px;
  color: var(--color-gray-600);
}

.admin-modal .form-group {
  margin-bottom: 0;
}

.admin-modal .form-group label {
  display: block;
  font-size: 13px;
  font-weight: 500;
  color: var(--color-navy-dark);
  margin-bottom: 6px;
}

.admin-modal .form-control {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--color-gray-200);
  border-radius: 6px;
  font-size: 14px;
  box-sizing: border-box;
}

.admin-modal .form-control:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(33, 150, 243, 0.1);
}

.admin-modal .modal-footer {
  padding: 16px 24px;
  margin-top: 0;
  border-top: 1px solid var(--color-gray-100);
  background: var(--color-gray-50);
  border-radius: 0 0 var(--radius-lg) var(--radius-lg);
}

.student-password-modal[open] {
  position: fixed;
  inset: 0;
  margin: auto;
  width: min(440px, calc(100vw - 32px));
  max-width: 440px;
  height: fit-content;
}

/* Document Upload Styles */
.documents-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.document-card {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px;
  background: var(--color-white);
  border: 1px solid var(--color-gray-100);
  border-radius: 8px;
  transition: all 0.2s;
}

.document-card:hover {
  border-color: var(--color-primary);
  box-shadow: 0 2px 8px rgba(0,0,0,0.05);
}

.document-card .document-icon {
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-gray-50);
  border-radius: 8px;
  flex-shrink: 0;
}

.document-card .document-icon svg {
  width: 24px;
  height: 24px;
  color: var(--color-primary);
}

.document-card .document-info {
  flex: 1;
  min-width: 0;
}

.document-card .document-name {
  font-weight: 600;
  font-size: 14px;
  color: var(--color-navy-dark);
  margin-bottom: 4px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.document-card .document-meta {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 13px;
  color: var(--color-gray-500);
}

.document-card .document-type {
  padding: 2px 8px;
  background: var(--color-info-light);
  color: var(--color-primary-hover);
  border-radius: 4px;
  font-size: 12px;
  font-weight: 500;
}

.document-card .document-size,
.document-card .document-date {
  color: var(--color-gray-400);
}

.document-card .document-actions {
  display: flex;
  gap: 8px;
}

.btn-icon {
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 1px solid var(--color-gray-100);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: all 0.2s;
  color: var(--color-gray-500);
}

.btn-icon:hover {
  background: var(--color-gray-50);
  border-color: var(--color-primary);
  color: var(--color-primary);
}

.btn-icon-danger:hover {
  background: var(--color-error-light);
  border-color: var(--color-error);
  color: var(--color-error);
}

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

/* File Info Card in Modal */
.file-info-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
  background: var(--color-bg-hover);
  border: 1px solid var(--color-gray-100);
  border-radius: 8px;
}

.file-info-card .file-icon {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-white);
  border-radius: var(--radius-sm);
  flex-shrink: 0;
}

.file-info-card .file-icon svg {
  width: 20px;
  height: 20px;
  color: var(--color-primary);
}

.file-info-card .file-details {
  flex: 1;
  min-width: 0;
}

.file-info-card .file-name {
  font-weight: 600;
  font-size: 14px;
  color: var(--color-navy-dark);
  margin-bottom: 2px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.file-info-card .file-size {
  font-size: 13px;
  color: var(--color-gray-500);
}

/* Multi-document upload file list */
.document-file-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-height: 280px;
  overflow-y: auto;
  padding: 0 4px;
}

.document-file-item {
  background: var(--color-bg-hover);
  border: 1px solid var(--color-gray-100);
  border-radius: 8px;
  padding: 10px 12px;
}

.document-file-item-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.document-file-item-info {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  flex: 1;
}

.document-file-item-icon {
  flex-shrink: 0;
  font-size: 16px;
}

.document-file-item-name {
  font-weight: 500;
  font-size: 13px;
  color: var(--color-navy-dark);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.document-file-item-size {
  flex-shrink: 0;
  font-size: 12px;
  color: var(--color-gray-400);
}

.document-file-item-remove {
  flex-shrink: 0;
  background: none;
  border: none;
  color: var(--color-gray-400);
  cursor: pointer;
  font-size: 18px;
  line-height: 1;
  padding: 2px 6px;
  border-radius: 4px;
  transition: background 0.15s, color 0.15s;
}

.document-file-item-remove:hover {
  background: var(--color-error-bg, #fef2f2);
  color: var(--color-error);
}

.document-file-item-name-field {
  margin-top: 6px;
}

.document-file-item-name-field .form-input-sm {
  padding: 6px 10px;
  font-size: 13px;
  height: auto;
}

/* Upload progress */
.upload-progress-section {
  padding: 12px 0;
}

.upload-progress-bar-container {
  width: 100%;
  height: 6px;
  background: var(--color-gray-100);
  border-radius: 3px;
  overflow: hidden;
}

.upload-progress-bar {
  height: 100%;
  background: var(--color-primary);
  border-radius: 3px;
  transition: width 0.3s ease;
}

.upload-progress-text {
  margin-top: 8px;
  font-size: 13px;
  color: var(--color-gray-500);
  text-align: center;
}

.form-hint {
  display: block;
  margin-top: 6px;
  font-size: 12px;
  color: var(--color-gray-400);
  font-style: italic;
}

.campus-background-preview-row {
  margin-bottom: 10px;
}

.campus-background-preview-image {
  width: 100%;
  max-width: 260px;
  aspect-ratio: 16 / 9;
  border-radius: 10px;
  border: 1px solid var(--color-gray-200);
  object-fit: cover;
}

.campus-background-preview-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-gray-50);
  color: var(--color-gray-500);
  font-size: 12px;
  font-weight: 600;
}

.campus-background-remove-checkbox {
  margin-top: 10px;
}

.file-picker-row {
  display: flex;
  align-items: center;
  gap: 10px;
}

.file-picker-button {
  min-width: 110px;
  cursor: pointer;
}

.file-picker-filename {
  font-size: 12px;
  color: var(--color-gray-500);
}

.visually-hidden-file-input {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.form-textarea {
  padding: 10px 14px;
  border: 1px solid var(--color-gray-300);
  border-radius: var(--radius-sm);
  font-size: 14px;
  font-family: inherit;
  resize: vertical;
  transition: border-color 0.2s;
}

.form-textarea:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(33, 150, 243, 0.1);
}

.form-hint {
  font-size: 12px;
  color: var(--color-gray-500);
  margin-top: 4px;
}


.form-checkbox-container {
  display: flex;
  align-items: center;
  gap: 8px;
}

.form-checkbox {
  width: 18px;
  height: 18px;
  cursor: pointer;
}

/* Checkbox form group layout */
.form-group.form-checkbox {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
  width: 100%;
  height: auto;
}

.form-group.form-checkbox .form-label-inline {
  white-space: nowrap;
  margin: 0;
}

.form-checkbox-label {
  font-size: 14px;
  font-weight: 500;
  color: var(--color-navy-dark);
  cursor: pointer;
}

.form-actions {
  display: flex;
  gap: 12px;
  justify-content: flex-end;
  padding-top: 24px;
  border-top: 1px solid var(--color-gray-100);
}

.form-actions.form-actions-right {
  justify-content: flex-end;
}

/* Form Buttons - consistent smaller size */
.btn-form {
  padding: 10px 20px;
  font-size: 14px;
  font-weight: 500;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: all 0.2s;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 100px;
}

.btn-form-primary {
  background: var(--color-primary);
  color: white;
  border: none;
}

.btn-form-primary:hover {
  background: var(--color-primary-hover);
}

.btn-form-secondary {
  background: var(--color-white);
  color: var(--color-primary);
  border: 1px solid var(--color-blue-500);
}

.btn-form-secondary:hover {
  background: var(--color-info-light);
}

/* Program Form Styles */
.program-form-container {
  max-width: 600px;
}

.program-form-card {
  background: var(--color-white);
  border: 1px solid var(--color-gray-100);
  border-radius: var(--radius-lg);
  padding: 32px;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.program-form-field {
  display: flex;
  flex-direction: column;
}

.program-form-field .form-label {
  font-size: 14px;
  font-weight: 500;
  color: var(--color-gray-600);
  margin-bottom: 8px;
}

.program-form-field .form-input,
.program-form-field .form-textarea {
  padding: 12px 14px;
  border: 1px solid var(--color-gray-300);
  border-radius: 8px;
  font-size: 14px;
  transition: border-color 0.2s, box-shadow 0.2s;
}

.program-form-field .form-input:focus,
.program-form-field .form-textarea:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(33, 150, 243, 0.1);
}

.program-form-field .form-hint {
  font-size: 12px;
  color: var(--color-gray-500);
  margin-top: 6px;
}

.program-form-field .form-checkbox-container {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
}

.program-form-field .form-checkbox {
  width: 18px;
  height: 18px;
  accent-color: var(--color-primary);
}

.program-form-field .form-checkbox-label {
  font-size: 14px;
  font-weight: 500;
  color: var(--color-gray-600);
}

.program-form-actions {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  margin-top: 24px;
}

/* Create Button for List Headers */
.btn-create {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 10px 16px;
  background: var(--color-primary);
  color: white;
  font-size: 14px;
  font-weight: 500;
  border: none;
  border-radius: var(--radius-sm);
  text-decoration: none;
  cursor: pointer;
  transition: background 0.2s;
}

.btn-create:hover {
  background: var(--color-primary-hover);
}

.btn-create iconify-icon {
  font-size: 16px;
}

.content-section {
  /* Section within tab */
}

/* Responsive */
@media (max-width: 968px) {
  .program-stats-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .program-overview-grid {
    grid-template-columns: 1fr;
  }

  .requirements-list {
    grid-template-columns: 1fr;
  }

  .form-row {
    grid-template-columns: 1fr;
  }
}

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

  .program-tabs {
    overflow-x: auto;
  }

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

  .program-header-info {
    flex-direction: column;
  }

  .program-detail-header {
    flex-direction: column;
    gap: 16px;
  }
}

/* State Content Editor */
.state-content-section {
  padding: 24px;
}

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

.state-content-section .section-header h3 {
  font-size: 18px;
  font-weight: 600;
  color: var(--color-text-primary);
  margin: 0;
}

.content-editor-section {
  margin-bottom: 32px;
}

.content-editor-section h4 {
  font-size: 16px;
  font-weight: 600;
  color: var(--color-navy-dark);
  margin-bottom: 12px;
}


.section-header-with-action {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-bottom: 24px;
}

.section-header-with-action h3 {
  font-size: 18px;
  font-weight: 600;
  color: var(--color-text-primary);
  margin: 0;
}

/* Campus count styling */
.campus-count {
  font-size: 14px;
  color: var(--color-text-primary);
}

.campus-count strong {
  font-weight: 600;
  color: var(--color-blue-500);
}

/* State-specific badge colors */
.badge-group {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

/* Empty state styling */
.empty-state {
  padding: 48px;
  text-align: center;
}

.empty-state-icon {
  margin-bottom: 16px;
  color: var(--color-gray-400);
}

.empty-state-text {
  font-size: 14px;
  color: var(--color-gray-500);
}

/* Form actions */
.form-actions {
  margin-top: 24px;
  display: flex;
  justify-content: flex-end;
  gap: 12px;
}

/* States Table Styling (matching Campuses) */
.states-page .page-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 24px;
}

.states-page .page-title {
  font-size: 28px;
  font-weight: 600;
  color: var(--color-text-primary);
  margin: 0;
}

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

.states-page .search-filters {
  display: flex;
  gap: 12px;
}

.states-page .search-box {
  position: relative;
  width: 320px;
}

.states-page .search-icon {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--color-gray-400);
  pointer-events: none;
}

.states-page .search-input {
  width: 100%;
  padding: 10px 12px 10px 40px;
  border: 1px solid var(--color-border);
  border-radius: 8px;
  font-size: 14px;
  color: var(--color-text-primary);
  background: white;
  transition: all 0.2s;
}

.states-page .search-input:focus {
  outline: none;
  border-color: var(--color-blue-500);
  box-shadow: 0 0 0 3px rgba(33, 150, 243, 0.1);
}

.states-page .students-count {
  margin-bottom: 16px;
  font-size: 14px;
  color: var(--color-text-secondary);
}

.states-table-container {
  background: white;
  border-radius: 8px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}

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

.states-table thead {
  background: var(--color-bg-subtle);
  border-bottom: 2px solid var(--color-border);
}

.states-table th {
  padding: 12px 16px;
  text-align: left;
  font-size: 11px;
  font-weight: 600;
  color: var(--color-text-secondary);
  letter-spacing: 0.5px;
}

.states-table td {
  padding: 16px;
  vertical-align: middle;
  border-bottom: 1px solid var(--color-border-light);
}

.states-table .col-center {
  text-align: center;
}

.states-table .col-right {
  text-align: right;
}

.state-row {
  cursor: pointer;
  transition: background-color 0.2s;
}

.state-row:hover {
  background-color: var(--color-bg-hover);
}

.state-cell {
  display: flex;
  align-items: center;
  gap: 16px;
}

.state-icon-box {
  width: 48px;
  height: 48px;
  background: var(--color-green-50);
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.state-icon-inner {
  color: var(--color-green-500);
  font-size: 20px;
}

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

.state-name {
  font-size: 14px;
  font-weight: 600;
  color: var(--color-text-primary);
}

.state-code {
  font-size: 12px;
  color: var(--color-text-secondary);
  display: flex;
  align-items: center;
  gap: 4px;
}

.state-code iconify-icon {
  font-size: 12px;
}

.programs-cell {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.program-badge {
  display: inline-block;
  padding: 4px 10px;
  border-radius: var(--radius-lg);
  font-size: 12px;
  font-weight: 500;
}

.program-badge.badge-dental {
  background: var(--color-blue-50);
  color: var(--color-blue-700);
}

.program-badge.badge-pharmacy {
  background: var(--color-purple-50);
  color: var(--color-purple-700);
}

.program-badge.badge-medical {
  background: var(--color-orange-50);
  color: var(--color-orange-900);
}

/* ========================================
   Trix Editor Styling
   ======================================== */

/* Trix toolbar styling */
trix-toolbar {
  background: var(--color-bg-hover);
  border: 1px solid var(--color-gray-200);
  border-radius: 8px 8px 0 0;
  padding: 10px;
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  position: sticky;
  top: 0;
  z-index: 10;
}

trix-toolbar .trix-button-group {
  display: flex;
  gap: 2px;
  margin-right: 8px;
  border: 1px solid var(--color-gray-300);
  border-radius: 6px;
  padding: 2px;
  background: white;
}

trix-toolbar .trix-button {
  background: transparent;
  border: none;
  padding: 6px 10px;
  border-radius: 4px;
  cursor: pointer;
  color: var(--color-gray-600);
  font-size: 14px;
  transition: all 0.2s;
}

trix-toolbar .trix-button:hover {
  background: var(--color-gray-100);
  color: var(--color-blue-500);
}

trix-toolbar .trix-button.trix-active {
  background: var(--color-blue-50);
  color: var(--color-blue-500);
  font-weight: 500;
}

trix-toolbar .trix-button:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

/* Trix editor content area */
trix-editor {
  min-height: 300px;
  max-height: 600px;
  overflow-y: auto;
  border: 1px solid var(--color-gray-200);
  border-top: none;
  border-radius: 0 0 8px 8px;
  padding: 16px;
  background: white;
  font-size: 14px;
  line-height: 1.6;
  color: var(--color-text-primary);
}

trix-editor:focus {
  outline: none;
  border-color: var(--color-blue-500);
  box-shadow: 0 0 0 3px rgba(33, 150, 243, 0.1);
}

trix-editor:empty:not(:focus)::before {
  color: var(--color-gray-400);
  content: attr(placeholder);
}

/* Trix content formatting */
trix-editor h1 {
  font-size: 24px;
  font-weight: 700;
  margin: 16px 0 8px 0;
  color: var(--color-text-primary);
}

trix-editor h2 {
  font-size: 20px;
  font-weight: 600;
  margin: 14px 0 8px 0;
  color: var(--color-text-primary);
}

trix-editor h3 {
  font-size: 18px;
  font-weight: 600;
  margin: 12px 0 6px 0;
  color: var(--color-gray-700);
}

trix-editor p {
  margin: 8px 0;
}

trix-editor ul,
trix-editor ol {
  margin: 8px 0;
  padding-left: 24px;
}

trix-editor li {
  margin: 4px 0;
}

trix-editor a {
  color: var(--color-blue-500);
  text-decoration: underline;
}

trix-editor a:hover {
  color: var(--color-blue-700);
}

trix-editor strong {
  font-weight: 600;
}

trix-editor em {
  font-style: italic;
}

trix-editor code {
  background: var(--color-gray-100);
  padding: 2px 6px;
  border-radius: 4px;
  font-family: 'Monaco', 'Courier New', monospace;
  font-size: 13px;
}

trix-editor pre {
  background: var(--color-bg-hover);
  border: 1px solid var(--color-gray-200);
  border-radius: 6px;
  padding: 12px;
  overflow-x: auto;
  margin: 8px 0;
}

trix-editor blockquote {
  border-left: 4px solid var(--color-blue-500);
  padding-left: 16px;
  margin: 12px 0;
  color: var(--color-gray-500);
  font-style: italic;
}

/* Trix attachment styling */
trix-editor .attachment {
  display: inline-block;
  padding: 8px;
  border: 1px solid var(--color-gray-200);
  border-radius: 6px;
  margin: 4px 0;
  background: var(--color-bg-hover);
}

trix-editor .attachment__caption {
  font-size: 12px;
  color: var(--color-gray-500);
  margin-top: 4px;
}

/* Trix dialogs */
trix-toolbar .trix-dialogs {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: white;
  border: 1px solid var(--color-gray-200);
  border-top: none;
  border-radius: 0 0 8px 8px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  padding: 12px;
  margin-top: -1px;
}

trix-toolbar .trix-dialog {
  padding: 8px;
}

trix-toolbar .trix-dialog__link-fields {
  display: flex;
  gap: 8px;
  align-items: center;
}

trix-toolbar .trix-input {
  flex: 1;
  padding: 8px 12px;
  border: 1px solid var(--color-gray-300);
  border-radius: 6px;
  font-size: 14px;
}

trix-toolbar .trix-input:focus {
  outline: none;
  border-color: var(--color-blue-500);
  box-shadow: 0 0 0 3px rgba(33, 150, 243, 0.1);
}

trix-toolbar .trix-button--dialog {
  padding: 8px 16px;
  background: var(--color-blue-500);
  color: white;
  border: none;
  border-radius: 6px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s;
}

trix-toolbar .trix-button--dialog:hover {
  background: var(--color-blue-700);
}

/* State content form specific adjustments */
.state-content-form .state-section-card {
  margin-bottom: 24px;
}

.state-content-form trix-editor {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

/* Hide Trix file attachment and code block buttons */
trix-toolbar .trix-button-group--file-tools,
trix-toolbar .trix-button--icon-attach,
trix-toolbar .trix-button--icon-code {
  display: none !important;
}

/* Clean up Trix button group spacing */
trix-toolbar .trix-button-group:empty {
  display: none;
}

/* Show block tools but hide quote button - we want heading, bullet, number, indent buttons */
trix-toolbar .trix-button--icon-quote {
  display: none !important;
}

/* Hide the dialogs container */
trix-toolbar .trix-dialogs {
  position: absolute;
  visibility: hidden;
}

/* Show dialogs only when active */
trix-toolbar .trix-dialogs.trix-active {
  visibility: visible;
}

/* Ensure all visible buttons are enabled */
trix-toolbar .trix-button:not([disabled]) {
  opacity: 1;
  cursor: pointer;
}

/* Underline button styling */
trix-toolbar .trix-button--icon-underline u {
  text-decoration: underline;
}

/* Underlined text in editor */
trix-editor u,
trix-editor [style*="text-decoration: underline"] {
  text-decoration: underline;
}
}

/* ===================================
   STUDENT PORTAL STYLES
   =================================== */

/* Student Layout Container */
.student-body {
  background: #eef2f6;
}

.student-container {
  display: flex;
  min-height: 100vh;
}

.student-sidebar {
  width: 250px;
  background: var(--color-navy-dark);
  color: white;
  display: flex;
  flex-direction: column;
  position: fixed;
  height: 100vh;
  overflow-y: auto;
}

.student-main {
  flex: 1;
  margin-left: 250px;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

.student-header {
  background: var(--color-white);
  padding: 20px 32px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid var(--color-gray-100);
}

.student-header .header-title {
  font-size: var(--text-xl);
  font-weight: 400;
  color: var(--color-navy-dark);
  margin: 0;
  font-family: 'Fraunces', 'DM Serif Display', Georgia, serif;
}

.student-header .user-greeting {
  font-size: var(--text-base);
  color: var(--color-gray-500);
}

.student-content {
  flex: 1;
  padding: 32px;
  overflow-y: auto;
}

/* Student Dashboard Styles */
.student-dashboard {
  max-width: 1200px;
  margin: 0 auto;
}

/* Welcome Section */
.welcome-section {
  margin-bottom: 24px;
}

.welcome-title {
  font-size: var(--text-2xl);
  font-weight: 400;
  color: var(--color-navy-dark);
  margin: 0 0 16px 0;
  font-family: 'Fraunces', 'DM Serif Display', Georgia, serif;
}

/* Password Setup Banner */
.password-setup-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 16px;
  padding: 16px 18px;
  background: var(--color-primary-light);
  border: 1px solid rgba(44, 154, 245, 0.35);
  border-radius: var(--radius-md);
}

.password-setup-content {
  min-width: 0;
}

.password-setup-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: var(--text-base);
  font-weight: 600;
  color: var(--color-navy-dark);
  margin-bottom: 6px;
}

.password-setup-copy {
  margin: 0;
  font-size: var(--text-sm);
  color: var(--color-gray-700);
}

.password-setup-actions {
  flex-shrink: 0;
}

.password-setup-actions .button_to {
  margin: 0;
}

.password-setup-btn {
  white-space: nowrap;
}

/* Alert Banner */
.alert-banner {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  border-radius: var(--radius-md);
  font-size: var(--text-base);
}

.alert-banner.alert-warning {
  background: var(--color-warning-light);
  border: 1px solid var(--color-warning);
  color: var(--color-orange-900);
}

.alert-banner.alert-success {
  background: var(--color-success-light);
  border: 1px solid var(--color-success);
  color: var(--color-success-dark, #166534);
}

.alert-banner .btn-sm {
  margin-left: auto;
}

/* Dashboard Stats */
.dashboard-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-bottom: 32px;
}

.dashboard-stat-card {
  background: var(--color-white);
  border: 1px solid var(--color-gray-100);
  border-radius: var(--radius-md);
  padding: 20px;
  display: flex;
  align-items: center;
  gap: 16px;
}

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

.stat-icon-blue {
  background: var(--color-primary-light);
  color: var(--color-primary);
}

.stat-icon-green {
  background: var(--color-success-light);
  color: var(--color-success);
}

.stat-icon-orange {
  background: var(--color-warning-light);
  color: var(--color-warning);
}

.stat-content .stat-label {
  font-size: var(--text-sm);
  color: var(--color-gray-500);
  margin-bottom: 4px;
}

.stat-content .stat-value {
  font-size: var(--text-xl);
  font-weight: 700;
  color: var(--color-navy-dark);
  margin: 0;
}

.stat-content .stat-value-blue {
  color: var(--color-primary);
}

.stat-content .stat-value-green {
  color: var(--color-success);
}

.stat-content .stat-value-muted {
  color: var(--color-gray-500);
}

.stat-content .stat-value-red {
  color: var(--color-error);
}

.stat-icon-red {
  background: var(--color-red-50);
  color: var(--color-error);
}

.stat-icon-purple {
  background: var(--color-purple-50, #f3e8ff);
  color: var(--color-purple-600, #9333ea);
}

.stat-card-warning {
  border-color: var(--color-warning);
  background: var(--color-warning-light);
}

.stat-sublabel {
  font-size: var(--text-xs);
  margin-top: 4px;
}

.stat-sublabel-warning {
  color: var(--color-error);
  font-weight: 500;
}

.stat-progress-bar {
  height: 6px;
  background: var(--color-gray-200);
  border-radius: 3px;
  margin-top: 8px;
  overflow: hidden;
}

.stat-progress-fill {
  height: 100%;
  background: var(--color-success);
  border-radius: 3px;
  transition: width 0.3s ease;
}

/* Dashboard Sections */
.dashboard-section {
  background: var(--color-white);
  border: 1px solid var(--color-gray-100);
  border-radius: var(--radius-md);
  padding: 24px;
  margin-bottom: 24px;
}

.section-header {
  margin-bottom: 20px;
}

.section-header .section-title {
  font-size: var(--text-lg);
  font-weight: 600;
  color: var(--color-navy-dark);
  margin: 0 0 4px 0;
}

.section-header .section-subtitle {
  font-size: var(--text-sm);
  color: var(--color-gray-500);
  margin: 0;
}

/* Courses Table */
.courses-table-wrapper {
  overflow-x: auto;
}

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

.courses-table th {
  text-align: left;
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--color-gray-500);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--color-gray-100);
}

.courses-table td {
  padding: 20px 16px;
  border-bottom: 1px solid var(--color-gray-100);
  vertical-align: top;
}

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

/* Course Details Cell - scoped to course-details-cell to avoid conflicting with admin courses table */
.course-details-cell .course-row {
  display: flex;
  gap: 16px;
}

.course-icon-box {
  width: 48px;
  height: 48px;
  background: var(--color-primary-light);
  color: var(--color-primary);
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.course-icon-completed {
  background: var(--color-success-light);
  color: var(--color-success);
}

.course-icon-withdrawn,
.course-icon-terminated {
  background: var(--color-gray-100);
  color: var(--color-gray-500);
}

.course-icon-failed {
  background: var(--color-red-50);
  color: var(--color-error);
}

.course-info {
  flex: 1;
}

.course-name {
  font-size: var(--text-md);
  font-weight: 600;
  color: var(--color-navy-dark);
  margin-bottom: 4px;
}

.course-alert {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: var(--text-sm);
  color: var(--color-error);
  margin-bottom: 8px;
}

.course-duration {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: var(--text-sm);
  color: var(--color-gray-500);
  margin-bottom: 4px;
}

.course-dates {
  display: flex;
  flex-direction: row;
  align-items: baseline;
  gap: 6px;
  flex-wrap: nowrap;
  white-space: nowrap;
  font-size: var(--text-sm);
  color: var(--color-gray-600);
}

.course-date-separator {
  color: var(--color-gray-500);
  font-weight: 500;
}

/* Progress Cell */
.progress-info {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
}

.progress-header {
  display: flex;
  align-items: center;
  gap: 10px;
}

.status-badge {
  display: inline-flex;
  padding: 4px 12px;
  border-radius: var(--radius-lg);
  font-size: var(--text-xs);
  font-weight: 600;
  text-transform: capitalize;
}

.status-badge.status-in_progress {
  background: var(--color-primary-light);
  color: var(--color-primary);
}

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

.status-badge.status-starting_soon {
  background: var(--color-gray-100);
  color: var(--color-gray-600);
}

.status-badge.status-completed {
  background: var(--color-success-light);
  color: var(--color-success);
}

.status-badge.status-overdue {
  background: var(--color-error-light);
  color: var(--color-error);
}

.progress-label {
  font-size: var(--text-sm);
  color: var(--color-gray-500);
}

.progress-row {
  display: flex;
  justify-content: space-between;
  font-size: var(--text-sm);
}

.progress-percent {
  font-weight: 600;
  color: var(--color-navy-dark);
}

.progress-complete {
  color: var(--color-gray-500);
}

.course-progress-bar {
  height: 8px;
  background: var(--color-gray-200);
  border-radius: 4px;
  overflow: hidden;
}

.course-progress-fill {
  height: 100%;
  width: var(--progress, 0%);
  background: var(--color-primary);
  border-radius: 4px;
  transition: width 0.3s ease;
}

.course-progress-complete {
  background: var(--color-success);
}

/* Status Cell (for past courses) */
.status-cell {
  vertical-align: middle;
}

.status-info {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.final-grade,
.completion-date {
  display: flex;
  gap: 4px;
  font-size: var(--text-sm);
}

.grade-label,
.date-label {
  color: var(--color-gray-500);
}

.grade-value {
  font-weight: 600;
  color: var(--color-success);
}

.date-value {
  font-weight: 500;
  color: var(--color-navy-dark);
}

.status-badge.status-withdrawn,
.status-badge.status-terminated {
  background: var(--color-gray-100);
  color: var(--color-gray-600);
}

/* Actions Cell */
.course-action-buttons {
  display: flex;
  flex-direction: row;
  align-items: center;
  flex-wrap: nowrap;
  gap: 8px;
}

.btn-sm {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 8px 16px;
  border-radius: var(--radius-sm);
  font-size: var(--text-sm);
  font-weight: 500;
  cursor: pointer;
  text-decoration: none;
  transition: all var(--transition-fast);
  border: none;
}

.btn-sm.btn-primary {
  background: var(--color-primary);
  color: white;
}

.btn-sm.btn-primary:hover {
  background: var(--color-primary-hover);
}

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

.btn-sm.btn-danger:hover {
  background: var(--color-error);
}

.btn-sm.btn-warning {
  background: var(--color-warning);
  color: white;
}

.btn-sm.btn-warning:hover {
  background: var(--color-warning);
}

.btn-sm.btn-outline {
  background: transparent;
  border: 1px solid var(--color-gray-200);
  color: var(--color-gray-600);
}

.btn-sm.btn-outline:hover {
  background: var(--color-gray-50);
  border-color: var(--color-gray-300);
}

/* Empty State */
.empty-state {
  text-align: center;
  padding: 48px 24px;
  color: var(--color-gray-400);
}

.empty-state iconify-icon {
  margin-bottom: 16px;
}

.empty-state p {
  font-size: var(--text-base);
}

/* Add-on Courses Grid */
.addon-courses-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
}

.addon-course-card {
  background: linear-gradient(135deg, #f0e6ff 0%, #e6f0ff 100%);
  border-radius: var(--radius-md);
  overflow: hidden;
}

.addon-card-header {
  padding: 20px 20px 16px;
  text-align: center;
}

.addon-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--color-purple-600);
  font-size: var(--text-sm);
  font-weight: 500;
}

.addon-card-body {
  padding: 0 20px 20px;
}

.addon-course-name {
  font-size: var(--text-md);
  font-weight: 600;
  color: var(--color-navy-dark);
  margin: 0 0 16px 0;
}

.addon-course-detail {
  display: flex;
  justify-content: space-between;
  font-size: var(--text-sm);
  margin-bottom: 8px;
}

.addon-course-detail .detail-label {
  color: var(--color-gray-500);
}

.addon-course-detail .detail-value {
  color: var(--color-navy-dark);
  font-weight: 500;
}

.addon-course-price {
  display: flex;
  justify-content: space-between;
  font-size: var(--text-sm);
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid rgba(0, 0, 0, 0.1);
}

.addon-course-price .price-value {
  font-size: var(--text-lg);
  font-weight: 700;
  color: var(--color-navy-dark);
}

.addon-card-footer {
  padding: 0 20px 20px;
}

.btn-addon-enroll {
  display: block;
  width: 100%;
  padding: 12px 16px;
  background: var(--color-primary);
  color: white;
  border: none;
  border-radius: var(--radius-pill);
  font-size: var(--text-sm);
  font-weight: 600;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: background var(--transition-fast);
}

.btn-addon-enroll:hover {
  background: var(--color-primary-hover);
}

/* Quick Actions Section */
.quick-actions-section {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-top: 32px;
}

.quick-action-card {
  position: relative;
  background: var(--color-white);
  border: 1px solid var(--color-gray-100);
  border-radius: var(--radius-md);
  padding: 20px;
  display: flex;
  align-items: center;
  gap: 16px;
  transition: all var(--transition-fast);
}

.quick-action-card:hover {
  border-color: var(--color-primary);
  box-shadow: var(--shadow-md);
}

.quick-action-icon {
  width: 48px;
  height: 48px;
  background: var(--color-gray-50);
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-gray-500);
  flex-shrink: 0;
}

.quick-action-card:hover .quick-action-icon {
  background: var(--color-primary-light);
  color: var(--color-primary);
}

.quick-action-content h3 {
  font-size: var(--text-base);
  font-weight: 600;
  color: var(--color-navy-dark);
  margin: 0 0 4px 0;
  font-variant-ligatures: none;
  font-feature-settings: "liga" 0, "clig" 0;
}

.quick-action-content p {
  font-size: var(--text-sm);
  color: var(--color-gray-500);
  margin: 0;
}

.quick-action-link {
  position: absolute;
  inset: 0;
  z-index: 1;
}

/* Student Page (for placeholder pages) */
.student-page {
  max-width: 800px;
  margin: 0 auto;
}

.page-header {
  margin-bottom: 32px;
}

.page-header .page-title {
  font-size: var(--text-2xl);
  font-weight: 600;
  color: var(--color-navy-dark);
  margin: 0 0 8px 0;
  font-variant-ligatures: none;
  font-feature-settings: "liga" 0, "clig" 0;
}

.page-header .page-subtitle {
  font-size: var(--text-base);
  color: var(--color-gray-500);
  margin: 0;
}

.placeholder-card {
  background: var(--color-white);
  border: 1px solid var(--color-gray-100);
  border-radius: var(--radius-md);
  padding: 64px 32px;
  text-align: center;
}

.placeholder-icon {
  color: var(--color-gray-300);
  margin-bottom: 24px;
}

.placeholder-card h2 {
  font-size: var(--text-xl);
  color: var(--color-navy-dark);
  margin: 0 0 12px 0;
}

.placeholder-card p {
  font-size: var(--text-base);
  color: var(--color-gray-500);
  margin: 0 0 24px 0;
  max-width: 400px;
  margin-left: auto;
  margin-right: auto;
}

.placeholder-card .btn-primary {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 24px;
  background: var(--color-primary);
  color: white;
  border: none;
  border-radius: var(--radius-pill);
  font-size: var(--text-base);
  font-weight: 500;
  text-decoration: none;
  cursor: pointer;
  transition: background var(--transition-fast);
}

.placeholder-card .btn-primary:hover {
  background: var(--color-primary-hover);
}

/* Student Payments Page */
.student-payments-overview {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-bottom: 24px;
}

.payment-overview-card {
  background: var(--color-white);
  border: 1px solid var(--color-gray-100);
  border-radius: var(--radius-md);
  padding: 20px;
  display: flex;
  align-items: center;
  gap: 16px;
}

.overview-icon {
  width: 48px;
  height: 48px;
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.overview-icon.balance {
  background: var(--color-success-light);
  color: var(--color-success);
}

.overview-icon.next-payment {
  background: var(--color-primary-light);
  color: var(--color-primary);
}

.overview-icon.method {
  background: var(--color-gray-100);
  color: var(--color-gray-600);
}

.overview-content {
  display: flex;
  flex-direction: column;
}

.overview-label {
  font-size: 13px;
  color: var(--color-gray-500);
  margin-bottom: 4px;
}

.overview-value {
  font-size: 22px;
  font-weight: 700;
  color: var(--color-navy-dark);
}

.overview-value.has-balance {
  color: var(--color-error);
}

.overview-value.text-muted {
  color: var(--color-gray-400);
  font-size: 16px;
}

.overview-value-small {
  font-size: 14px;
  font-weight: 600;
  color: var(--color-navy-dark);
}

.overview-date {
  font-size: 12px;
  color: var(--color-gray-500);
  margin-top: 2px;
}

/* Payment Alert */
.payment-alert {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px 20px;
  border-radius: var(--radius-md);
  margin-bottom: 24px;
}

.payment-alert.alert-overdue {
  background: var(--color-error-light);
  border: 1px solid var(--color-red-200);
}

.payment-alert .alert-icon {
  flex-shrink: 0;
  color: var(--color-error);
}

.payment-alert .alert-content {
  flex: 1;
}

.payment-alert .alert-content strong {
  display: block;
  font-size: 14px;
  font-weight: 600;
  color: var(--color-error);
  margin-bottom: 4px;
}

.payment-alert .alert-content p {
  margin: 0;
  font-size: 13px;
  color: var(--color-gray-700);
}

.btn-alert {
  padding: 8px 16px;
  background: var(--color-error);
  color: white;
  font-size: 13px;
  font-weight: 600;
  border-radius: var(--radius-sm);
  text-decoration: none;
  white-space: nowrap;
}

.btn-alert:hover {
  background: var(--color-red-800);
}

.alert-actions {
  display: flex;
  gap: 0.5rem;
  flex-shrink: 0;
}

.btn-alert-primary {
  background: var(--color-primary);
}

.btn-alert-primary:hover {
  background: var(--color-primary-dark);
}

.btn-alert-secondary {
  background: var(--color-gray-500);
}

.btn-alert-secondary:hover {
  background: var(--color-gray-600);
}

/* Student Card */
.student-card {
  background: var(--color-white);
  border: 1px solid var(--color-gray-100);
  border-radius: var(--radius-md);
  padding: 24px;
  margin-bottom: 24px;
}

.student-card-title {
  font-size: 16px;
  font-weight: 600;
  color: var(--color-navy-dark);
  margin: 0 0 20px 0;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--color-gray-100);
}

/* Payment Progress Section */
.payment-progress-section {
  padding: 0;
}

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

.progress-percent {
  font-size: 18px;
  font-weight: 700;
  color: var(--color-navy-dark);
}

.progress-amounts {
  font-size: 14px;
  color: var(--color-gray-500);
}

.progress-bar-large {
  height: 12px;
  background: var(--color-gray-100);
  border-radius: 6px;
  overflow: hidden;
  margin-bottom: 16px;
  position: relative;
}

.progress-bar-large .progress-fill {
  height: 100%;
  border-radius: 6px;
  transition: width 0.3s ease;
  position: absolute;
  top: 0;
}

.progress-bar-large .progress-deposit {
  background: var(--color-primary);
  left: 0;
  z-index: 2;
}

.progress-bar-large .progress-paid {
  background: var(--color-success);
  z-index: 1;
}

.progress-legend {
  display: flex;
  gap: 1rem;
  font-size: 0.8125rem;
  color: var(--color-gray-600);
  margin-bottom: 1rem;
}

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

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

.legend-deposit {
  background: var(--color-primary);
}

.legend-paid {
  background: var(--color-success);
}

.progress-stats {
  display: flex;
  gap: 32px;
}

.progress-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.progress-stat .stat-value {
  font-size: 24px;
  font-weight: 700;
}

.progress-stat .stat-label {
  font-size: 12px;
  color: var(--color-gray-500);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.text-success { color: var(--color-success); }
.text-primary { color: var(--color-primary); }
.text-danger { color: var(--color-error); }

/* Plan Details Grid */
.plan-details-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

.plan-detail {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.plan-detail .detail-label {
  font-size: 12px;
  color: var(--color-gray-500);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.plan-detail .detail-value {
  font-size: 16px;
  font-weight: 600;
  color: var(--color-navy-dark);
}

/* Student Payment Table */
.payment-schedule-wrapper {
  overflow-x: auto;
}

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

.student-payment-table th {
  text-align: left;
  padding: 12px 16px;
  font-size: 11px;
  font-weight: 600;
  color: var(--color-gray-500);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  background: var(--color-gray-50);
  border-bottom: 1px solid var(--color-gray-200);
}

.student-payment-table td {
  padding: 14px 16px;
  font-size: 14px;
  color: var(--color-navy-dark);
  border-bottom: 1px solid var(--color-gray-100);
}

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

.student-payment-table tr.row-overdue {
  background: var(--color-error-light);
}

.student-payment-table tr.row-failed {
  background: var(--color-error-light);
}

.student-payment-table tr.row-covered {
  background: var(--color-green-50, #e8f5e9);
  opacity: 0.8;
}

.student-payment-table .amount-cell {
  font-weight: 600;
}

.deposit-badge {
  display: inline-block;
  padding: 2px 6px;
  background: var(--color-info-light);
  color: var(--color-info);
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  border-radius: var(--radius-lg);
  margin-right: 8px;
}

/* Payment Status Badges */
.payment-status-badge {
  display: inline-block;
  padding: 4px 10px;
  font-size: 12px;
  font-weight: 600;
  border-radius: var(--radius-lg);
}

.payment-status-badge.paid {
  background: var(--color-success-light);
  color: var(--color-success);
}

.payment-status-badge.scheduled {
  background: var(--color-gray-100);
  color: var(--color-gray-600);
}

.payment-status-badge.overdue {
  background: var(--color-error-light);
  color: var(--color-error);
}

.payment-status-badge.failed {
  background: var(--color-red-50);
  color: var(--color-red-800);
}

.payment-status-badge.processing {
  background: var(--color-warning-light);
  color: var(--color-warning);
}

.payment-status-badge.refunded {
  background: var(--color-blue-50);
  color: var(--color-blue-700);
}

.payment-status-badge.cancelled {
  background: var(--color-gray-100);
  color: var(--color-gray-600);
}

/* Payment Type Badge */
.payment-type-badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: var(--radius-lg);
  font-size: 11px;
  font-weight: 500;
  text-transform: uppercase;
}

.payment-type-badge.scheduled {
  background: var(--color-blue-50);
  color: var(--color-blue-700);
}

.payment-type-badge.one-time {
  background: var(--color-green-50);
  color: var(--color-green-700);
}

/* Payment History Table */
.payment-history-wrapper {
  overflow-x: auto;
}

.reference-cell {
  font-family: monospace;
  font-size: 12px;
}

/* Help Card */
.student-card.help-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--color-gray-50);
  border-color: var(--color-gray-200);
}

.help-card .help-content h3 {
  margin: 0 0 4px 0;
  font-size: 15px;
  font-weight: 600;
  color: var(--color-navy-dark);
}

.help-card .help-content p {
  margin: 0;
  font-size: 13px;
  color: var(--color-gray-500);
}

/* Empty State Card */
.empty-state-card {
  text-align: center;
  padding: 48px 24px;
}

.empty-state-card .empty-state-icon {
  color: var(--color-gray-300);
  margin-bottom: 16px;
}

.empty-state-card h2 {
  margin: 0 0 12px 0;
  font-size: 20px;
  font-weight: 600;
  color: var(--color-navy-dark);
}

.empty-state-card p {
  margin: 0 0 24px 0;
  font-size: 14px;
  color: var(--color-gray-500);
  max-width: 400px;
  margin-left: auto;
  margin-right: auto;
}

.empty-state-actions {
  display: flex;
  gap: 12px;
  justify-content: center;
}

.empty-state-small {
  text-align: center;
  padding: 32px;
  color: var(--color-gray-400);
}

/* ===== Redistribution Preview (Student Payments) ===== */
.redistribution-preview {
  border: 2px solid var(--color-primary);
}

.preview-header {
  margin-bottom: 1.5rem;
}

.payment-breakdown {
  background: var(--color-gray-50);
  border-radius: 8px;
  padding: 1rem;
  margin-top: 1rem;
}

.breakdown-row {
  display: flex;
  justify-content: space-between;
  padding: 0.5rem 0;
}

.breakdown-row:not(:last-child) {
  border-bottom: 1px solid var(--color-gray-200);
}

.breakdown-row.remainder {
  font-weight: 600;
}

.breakdown-value.highlight {
  color: var(--color-primary);
}

.text-danger {
  color: var(--color-error) !important;
}

.mode-selector {
  margin-bottom: 1.5rem;
  padding-bottom: 1.5rem;
  border-bottom: 1px solid var(--color-gray-200);
}

.mode-label {
  display: block;
  font-weight: 500;
  margin-bottom: 0.75rem;
}

.mode-buttons {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.75rem;
}

.mode-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 1rem;
  background: var(--color-gray-50);
  border: 2px solid var(--color-gray-200);
  border-radius: 8px;
  text-decoration: none;
  color: inherit;
  text-align: center;
  transition: all 0.2s;
}

.mode-btn:hover {
  border-color: var(--color-primary);
  background: var(--color-primary-light);
}

.mode-btn.active {
  border-color: var(--color-primary);
  background: var(--color-blue-50);
  box-shadow: 0 0 0 3px var(--color-blue-100);
}

.mode-icon {
  margin-bottom: 0.5rem;
  color: var(--color-primary);
}

.mode-name {
  font-weight: 600;
  margin-bottom: 0.25rem;
}

.mode-desc {
  font-size: 0.75rem;
  color: var(--color-gray-500);
}

.schedule-title {
  font-size: 1rem;
  font-weight: 600;
  margin-bottom: 1rem;
}

.schedule-hint {
  font-size: 0.875rem;
  margin-bottom: 1rem;
}

.schedule-table-wrapper {
  overflow-x: auto;
}

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

.schedule-table th,
.schedule-table td {
  padding: 0.75rem;
  text-align: left;
  border-bottom: 1px solid var(--color-gray-200);
}

.schedule-table th {
  font-size: 0.75rem;
  text-transform: uppercase;
  color: var(--color-gray-500);
  font-weight: 600;
}

.schedule-table tr.covered {
  background: var(--color-green-50);
}

.amount-cell {
  font-family: monospace;
}

.amount-cell.original {
  color: var(--color-gray-400);
}

.schedule-table tr.covered .amount-cell.original {
  text-decoration: line-through;
}

.reduced-amount {
  color: var(--color-success);
  font-weight: 600;
}

.covered-badge {
  color: var(--color-success);
  font-weight: 600;
}

.amount-input {
  width: 100px;
  padding: 0.375rem 0.5rem;
  font-family: monospace;
  font-size: 0.875rem;
  border: 1px solid var(--color-gray-300);
  border-radius: 4px;
  text-align: right;
}

.amount-input:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 2px var(--color-blue-100);
}

.amount-input.is-invalid {
  border-color: var(--color-error);
}

.status-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  font-size: 0.75rem;
  padding: 0.25rem 0.5rem;
  border-radius: var(--radius-lg);
}

.status-badge.covered {
  background: var(--color-green-100);
  color: var(--color-green-900);
}

.status-badge.reduced {
  background: var(--color-blue-100);
  color: var(--color-blue-900);
}

.status-badge.reduced.auto-adjusted {
  background: var(--color-orange-100);
  color: var(--color-orange-900);
}

.status-badge.increased {
  background: var(--color-yellow-100);
  color: var(--color-yellow-700);
}

.status-badge.unchanged {
  background: var(--color-gray-100);
  color: var(--color-gray-500);
}

.schedule-table tfoot td {
  font-weight: 500;
  border-top: 2px solid var(--color-gray-300);
  border-bottom: none;
}

.schedule-actions {
  display: flex;
  justify-content: flex-end;
  margin-top: 0.75rem;
}

.schedule-summary {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  margin-top: 1rem;
  padding: 1rem;
  background: var(--color-blue-50);
  border-radius: 8px;
  color: var(--color-blue-900);
}

.schedule-summary.has-errors {
  background: var(--color-red-50);
  color: var(--color-red-900);
}

.schedule-summary.auto-adjusted {
  background: var(--color-orange-50);
  color: var(--color-orange-900);
}

.schedule-summary iconify-icon {
  flex-shrink: 0;
  margin-top: 0.125rem;
}

.validation-errors {
  margin-top: 1rem;
  padding: 1rem;
  background: var(--color-red-50);
  border: 1px solid var(--color-red-200);
  border-radius: 8px;
}

.validation-errors ul {
  margin: 0;
  padding-left: 1.25rem;
  color: var(--color-red-900);
}

.validation-errors li {
  margin-bottom: 0.25rem;
}

.no-redistribution,
.full-payoff {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 2rem;
  text-align: center;
}

.no-redistribution iconify-icon,
.full-payoff iconify-icon {
  color: var(--color-success);
  margin-bottom: 1rem;
}

.preview-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  align-items: center;
  gap: 1rem;
  margin-top: 1.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--color-gray-200);
}

.preview-actions form {
  margin: 0;
}

.btn-lg {
  padding: 0.875rem 1.5rem;
  font-size: 1rem;
}

.btn-outline {
  background: transparent;
  border: 2px solid var(--color-primary);
  color: var(--color-primary);
  padding: 0.5rem 1rem;
  border-radius: 6px;
  cursor: pointer;
  font-weight: 500;
}

.btn-outline:hover {
  background: var(--color-primary-light);
}

/* Responsive - Redistribution Preview */
@media (max-width: 768px) {
  .mode-buttons {
    grid-template-columns: 1fr;
  }

  .preview-actions {
    justify-content: center;
  }
}

/* ===================================
   STUDENT ONBOARDING STYLES
   =================================== */

/* Onboarding Layout */
.onboarding-body {
  background: var(--color-white);
  margin: 0;
  font-family: var(--font-body);
  color: var(--color-gray-700);
}

.onboarding-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--color-navy-dark);
  padding: 0 32px;
  height: 60px;
}

.onboarding-header-left {
  flex: 1;
}

.onboarding-header-title {
  color: var(--color-white);
  font-size: var(--text-xl);
  font-weight: 600;
  letter-spacing: 0.5px;
  font-family: var(--font-heading);
}

.onboarding-header-right {
  flex: 1;
}

/* Step Indicator */
.onboarding-steps {
  display: flex;
  align-items: center;
  gap: 32px;
}

.onboarding-step {
  display: flex;
  align-items: center;
  gap: 8px;
  opacity: 0.5;
  transition: opacity 0.2s;
}

.onboarding-step.is-active {
  opacity: 1;
}

.onboarding-step.is-completed {
  opacity: 0.75;
}

.onboarding-step-number {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.15);
  color: var(--color-white);
  font-size: var(--text-sm);
  font-weight: 600;
}

.onboarding-step.is-active .onboarding-step-number {
  background: var(--color-primary);
}

.onboarding-step.is-completed .onboarding-step-number {
  background: var(--color-success);
}

.onboarding-step-label {
  color: var(--color-white);
  font-size: var(--text-sm);
  font-weight: 500;
}

/* Main Content Area */
.onboarding-main {
  min-height: calc(100vh - 60px);
  display: flex;
  justify-content: center;
  padding: 40px 32px;
}

.onboarding-content {
  width: 100%;
  max-width: 960px;
}

/* Page Titles */
.onboarding-page-title {
  font-size: var(--text-2xl);
  font-weight: 400;
  color: var(--color-navy-dark);
  margin: 0 0 8px 0;
  font-family: var(--font-heading);
  text-align: center;
}

.onboarding-page-subtitle {
  font-size: var(--text-base);
  color: var(--color-gray-500);
  margin: 0 0 32px 0;
  text-align: center;
}

/* Welcome Page */
.onboarding-welcome {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding-top: 40px;
}

.onboarding-welcome-logo {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 32px;
}

.onboarding-welcome-logo .logo-icon-img {
  width: 40px;
  height: 40px;
  border-radius: var(--radius-sm);
  object-fit: contain;
}

.onboarding-welcome-logo .logo-text {
  font-size: var(--text-xl);
  font-weight: 600;
  color: var(--color-navy-dark);
  font-family: var(--font-heading);
}

.onboarding-welcome-heading {
  font-size: var(--text-3xl);
  font-weight: 400;
  color: var(--color-navy-dark);
  margin: 0 0 12px 0;
  font-family: var(--font-heading);
}

.onboarding-welcome-subtext {
  font-size: var(--text-base);
  color: var(--color-gray-500);
  max-width: 520px;
  line-height: 1.6;
  margin: 0 0 40px 0;
}

.onboarding-welcome-steps {
  display: flex;
  gap: 64px;
  margin-bottom: 40px;
  justify-content: center;
}

.onboarding-welcome-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
}

.onboarding-welcome-step-icon {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.onboarding-welcome-step-icon-profile {
  background: #dbeafe;
  color: #3b82f6;
}

.onboarding-welcome-step-icon-docs {
  background: #fef3c7;
  color: #f59e0b;
}

.onboarding-welcome-step-icon-supplies {
  background: #d1fae5;
  color: var(--color-success);
}

.onboarding-welcome-step-info {
  display: flex;
  align-items: center;
  gap: 8px;
}

.onboarding-welcome-step-number {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  border: 1.5px solid var(--color-gray-300);
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--color-gray-400);
}

.onboarding-welcome-step-label {
  font-size: var(--text-base);
  font-weight: 500;
  color: var(--color-navy-dark);
}


/* Profile Page */
.onboarding-profile-form {
  padding: 0;
}

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

.onboarding-profile-photo {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  margin-bottom: 24px;
}

.onboarding-avatar-placeholder {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: var(--color-gray-100);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-gray-400);
  flex-shrink: 0;
}

.onboarding-avatar-image {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  overflow: hidden;
  flex-shrink: 0;
}

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

.onboarding-photo-upload {
  font-size: var(--text-sm);
  color: var(--color-gray-500);
}

.onboarding-photo-upload strong {
  color: var(--color-navy-dark);
  font-size: var(--text-base);
}

.onboarding-optional {
  color: var(--color-gray-400);
  font-weight: 400;
  font-size: var(--text-xs, 12px);
}

.onboarding-file-input {
  margin-top: 4px;
  font-size: var(--text-xs, 12px);
}

.onboarding-contact-notice,
.onboarding-preferred-name-notice {
  font-size: var(--text-sm);
  color: var(--color-gray-500);
  margin: 0 0 16px 0;
  line-height: 1.5;
}

/* Form Fields */
.onboarding-field-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-bottom: 16px;
}

.onboarding-field-group {
  margin-bottom: 16px;
}

.onboarding-field-label {
  display: block;
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--color-navy-dark);
  margin-bottom: 6px;
}

.onboarding-field-input,
.onboarding-field-select {
  width: 100%;
  padding: 10px 12px;
  font-size: var(--text-base);
  font-family: var(--font-body);
  border: 1px solid var(--color-gray-200);
  border-radius: var(--radius-sm);
  background: var(--color-white);
  color: var(--color-gray-700);
  transition: border-color 0.2s;
  box-sizing: border-box;
}

.onboarding-field-input:focus,
.onboarding-field-select:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(8, 145, 178, 0.1);
}

.onboarding-field-input:disabled {
  background: var(--color-gray-50);
  color: var(--color-gray-400);
  cursor: not-allowed;
}

/* Radio Group */
.onboarding-radio-group {
  display: flex;
  gap: 20px;
}

.onboarding-radio-label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: var(--text-base);
  color: var(--color-gray-600);
  cursor: pointer;
}

.onboarding-field-radio {
  accent-color: var(--color-primary);
}

/* Form Actions & Notices */
.onboarding-form-notice {
  font-size: var(--text-sm);
  color: var(--color-gray-400);
  margin: 24px 0 16px 0;
  text-align: center;
}

.onboarding-form-actions {
  margin-top: 24px;
  display: flex;
  justify-content: center;
}

.onboarding-btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 12px 32px;
  background: linear-gradient(135deg, #0891b2 0%, #06b6d4 100%);
  color: var(--color-white);
  font-size: var(--text-base);
  font-weight: 700;
  font-family: var(--font-body);
  border: none;
  border-radius: var(--radius-pill);
  cursor: pointer;
  transition: background 0.15s, box-shadow 0.15s;
}

.onboarding-btn-primary:hover {
  background: linear-gradient(135deg, #0e7490 0%, #0891b2 100%);
  box-shadow: 0 4px 12px rgba(8, 145, 178, 0.3);
}

/* Documentation Page */
.onboarding-document-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 24px;
}

.onboarding-document-card {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px 20px;
  background: var(--color-white);
  border: 1px solid var(--color-gray-100);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
}

.onboarding-document-icon {
  color: var(--color-primary);
  flex-shrink: 0;
}

.onboarding-document-name {
  font-size: var(--text-base);
  font-weight: 500;
  color: var(--color-navy-dark);
}

.onboarding-empty-message {
  font-size: var(--text-base);
  color: var(--color-gray-500);
  padding: 32px;
  text-align: center;
  background: var(--color-white);
  border: 1px solid var(--color-gray-100);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  margin: 0 auto 24px;
  max-width: 600px;
}

/* Supplies Page */
.onboarding-supplies-cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  margin-bottom: 24px;
}

.onboarding-supply-card {
  background: var(--color-white);
  border: 1px solid var(--color-gray-100);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  padding: 24px;
}

.onboarding-supply-card-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--color-gray-100);
}

.onboarding-supply-card-icon {
  color: var(--color-primary);
}

.onboarding-supply-card-title {
  font-size: var(--text-base);
  font-weight: 600;
  color: var(--color-navy-dark);
  margin: 0;
  font-family: var(--font-heading);
}

.onboarding-supply-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.onboarding-supply-list li {
  padding: 8px 0;
  font-size: var(--text-base);
  color: var(--color-gray-600);
  border-bottom: 1px solid var(--color-gray-50);
  padding-left: 20px;
  position: relative;
}

.onboarding-supply-list li:last-child {
  border-bottom: none;
}

.onboarding-supply-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 14px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--color-primary);
}

/* Onboarding Video */
.onboarding-video-container {
  position: relative;
  width: 100%;
  max-width: 800px;
  margin: var(--space-6) auto;
  padding-bottom: 56.25%; /* 16:9 aspect ratio */
}

.onboarding-video-container iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-gray-100);
}

/* Responsive - Student Onboarding */
@media (max-width: 768px) {
  .onboarding-header {
    padding: 0 16px;
    height: auto;
    min-height: 60px;
    flex-wrap: wrap;
    gap: 8px;
    padding-top: 12px;
    padding-bottom: 12px;
  }

  .onboarding-steps {
    gap: 16px;
    order: 3;
    width: 100%;
    justify-content: center;
  }

  .onboarding-step-label {
    display: none;
  }

  .onboarding-main {
    padding: 24px 16px;
  }

  .onboarding-welcome-steps {
    gap: 32px;
  }

  .onboarding-welcome-step-icon {
    width: 72px;
    height: 72px;
  }

  .onboarding-profile-columns {
    grid-template-columns: 1fr;
    gap: 24px;
  }

  .onboarding-field-row {
    grid-template-columns: 1fr;
  }

  .onboarding-supplies-cards {
    grid-template-columns: 1fr;
  }

  .onboarding-form-actions {
    justify-content: stretch;
  }

  .onboarding-btn-primary {
    width: 100%;
  }
}

/* Responsive - Student Portal */
@media (max-width: 1024px) {
  .dashboard-stats {
    grid-template-columns: repeat(2, 1fr);
  }

  .quick-actions-section {
    grid-template-columns: repeat(2, 1fr);
  }

  .student-payments-overview {
    grid-template-columns: repeat(2, 1fr);
  }

  .plan-details-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 768px) {
  .student-sidebar {
    display: none;
  }

  .student-main {
    margin-left: 0;
  }

  .student-content {
    padding: 20px;
  }

  .password-setup-banner {
    flex-direction: column;
    align-items: flex-start;
  }

  .password-setup-actions,
  .password-setup-actions .button_to,
  .password-setup-btn {
    width: 100%;
  }

  .password-setup-btn {
    justify-content: center;
  }

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

  .addon-courses-grid {
    grid-template-columns: 1fr;
  }

  .quick-actions-section {
    grid-template-columns: 1fr;
  }

  .courses-table th:nth-child(2),
  .courses-table td:nth-child(2) {
    display: none;
  }

  .course-action-buttons {
    flex-direction: row;
    flex-wrap: wrap;
  }

  .student-payments-overview {
    grid-template-columns: 1fr;
  }

  .plan-details-grid {
    grid-template-columns: 1fr;
  }

  .student-card.help-card {
    flex-direction: column;
    text-align: center;
    gap: 16px;
  }

  .payment-alert {
    flex-direction: column;
    text-align: center;
  }

  .progress-stats {
    justify-content: center;
  }
}
/* ===== Associates Page Styles ===== */
.associates-page {
}

.associates-legend {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 12px 16px;
  background: var(--color-gray-50);
  border-radius: var(--radius-sm);
  margin-bottom: 16px;
  font-size: 13px;
}

.legend-label {
  font-weight: 600;
  color: var(--color-gray-600);
}

.legend-item {
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--color-gray-600);
}

.record-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  display: inline-block;
}

.record-dot.dot-application {
  background: var(--color-border);
  border: 2px solid var(--color-gray-400);
}

.record-dot.dot-application.active {
  background: var(--color-amber-500);
  border-color: var(--color-amber-700);
}

.record-dot.dot-student {
  background: var(--color-border);
  border: 2px solid var(--color-gray-400);
}

.record-dot.dot-student.active {
  background: var(--color-green-500);
  border-color: var(--color-green-700);
}

.record-dot.dot-instructor {
  background: var(--color-border);
  border: 2px solid var(--color-gray-400);
}

.record-dot.dot-instructor.active {
  background: var(--color-blue-500);
  border-color: var(--color-blue-700);
}

.legend-item .record-dot {
  /* Legend dots always show as active color */
}

.legend-item .record-dot.dot-application {
  background: var(--color-amber-500);
  border-color: var(--color-amber-700);
}

.legend-item .record-dot.dot-student {
  background: var(--color-green-500);
  border-color: var(--color-green-700);
}

.legend-item .record-dot.dot-instructor {
  background: var(--color-blue-500);
  border-color: var(--color-blue-700);
}

.legend-overdue-bar {
  width: 16px;
  height: 10px;
  border-radius: 2px;
  background: #fef2f2;
  border-left: 3px solid #f87171;
}

.record-dots {
  display: flex;
  gap: 6px;
  align-items: center;
}

.associates-count {
  font-size: 14px;
  color: var(--color-gray-500);
  margin-bottom: 16px;
}

.associates-table-container {
  background: var(--color-white);
  border-radius: 8px;
  box-shadow: var(--shadow-card);
  overflow: hidden;
}

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

.associates-table thead {
  background: var(--color-gray-50);
  border-bottom: 2px solid var(--color-gray-200);
}

.associates-table th {
  padding: 12px 16px;
  text-align: left;
  font-size: 11px;
  font-weight: 600;
  color: var(--color-gray-500);
  letter-spacing: 0.5px;
}

.associate-row {
  border-bottom: 1px solid var(--color-gray-100);
  cursor: pointer;
  transition: background 0.2s;
}

.associate-row:hover {
  background: var(--color-primary-light);
}

.associate-row.associate-overdue {
  background: #fef2f2;
  border-left: 3px solid #f87171;
}

.associate-row.associate-overdue:hover {
  background: #fee2e2;
}

.associates-table td {
  padding: 16px;
}

.associate-cell {
  display: flex;
  align-items: center;
  gap: 12px;
}

.associate-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--color-primary), var(--color-primary-hover));
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  font-size: 14px;
}

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

.associate-name {
  font-weight: 500;
  color: var(--color-navy-dark);
  font-size: 14px;
}

.associate-email {
  font-size: 13px;
  color: var(--color-gray-500);
}

.associate-phone {
  font-size: 14px;
  color: var(--color-gray-600);
}

/* Role badges */
.role-badge {
  display: inline-block;
  padding: 4px 10px;
  border-radius: var(--radius-lg);
  font-size: 12px;
  font-weight: 500;
  text-transform: capitalize;
}

.role-badge.role-admin {
  background: var(--color-purple-50);
  color: var(--color-purple-700);
}

.role-badge.role-instructor {
  background: var(--color-green-50);
  color: var(--color-green-800);
}

.role-badge.role-student {
  background: var(--color-orange-50);
  color: var(--color-orange-900);
}

.role-badge.role-student_instructor {
  background: linear-gradient(135deg, var(--color-green-50), var(--color-orange-50));
  color: var(--color-green-800);
}

.role-badge.role-applicant {
  background: var(--color-gray-100, #f5f5f5);
  color: var(--color-gray-700, #616161);
}

.role-badges {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.badge-overdue {
  display: inline-block;
  padding: 3px 8px;
  border-radius: var(--radius-lg);
  font-size: 11px;
  font-weight: 600;
  background: #fee2e2;
  color: #dc2626;
  border: 1px solid #fca5a5;
}

/* Status badges for associates */
.status-verified {
  background: var(--color-success-light);
  color: var(--color-success);
}

.status-unverified {
  background: var(--color-orange-50);
  color: var(--color-orange-900);
}

.status-closed {
  background: var(--color-red-50);
  color: var(--color-red-800);
}

/* View button */
.btn-view {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  background: var(--color-white);
  border: 1px solid var(--color-gray-200);
  border-radius: var(--radius-sm);
  font-size: 13px;
  color: var(--color-gray-600);
  text-decoration: none;
  transition: all 0.2s;
}

.btn-view:hover {
  background: var(--color-gray-50);
  border-color: var(--color-primary);
  color: var(--color-primary);
}

.empty-state {
  text-align: center;
  padding: 48px 16px;
  color: var(--color-gray-500);
}

/* ===== Associates Detail Page ===== */
.associate-detail-page {
  padding: 24px 0;
}

.associate-detail-page .back-link {
  margin-bottom: 20px;
}

.associate-detail-page .back-link a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--color-gray-600);
  text-decoration: none;
  font-size: 14px;
  transition: color 0.2s;
}

.associate-detail-page .back-link a:hover {
  color: var(--color-primary);
}

.associate-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 16px;
}

.associate-title-section {
  display: flex;
  align-items: center;
  gap: 16px;
}

.associate-header-actions {
  display: flex;
  gap: 8px;
}

.associate-header-actions .btn-secondary {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.associate-avatar-large {
  width: 64px;
  height: 64px;
  background: linear-gradient(135deg, var(--color-primary), var(--color-blue-700));
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-weight: 600;
  font-size: 22px;
}

.associate-title-info .page-title {
  margin: 0 0 8px 0;
  font-size: 24px;
  font-weight: 600;
  color: var(--color-gray-900);
}

.associate-badges {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.record-indicator {
  display: inline-block;
  padding: 3px 8px;
  border-radius: var(--radius-lg);
  font-size: 11px;
  font-weight: 500;
}

.record-indicator.app {
  background: var(--color-orange-50);
  color: var(--color-orange-900);
}

.record-indicator.student {
  background: var(--color-green-50);
  color: var(--color-green-800);
}

.record-indicator.instructor {
  background: var(--color-blue-50);
  color: var(--color-blue-800);
}

/* Compact quick profile */
.associate-quick-strip {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 20px;
}

.associate-quick-item {
  border: 1px solid var(--color-gray-200);
  border-radius: 8px;
  background: var(--color-gray-50);
  padding: 10px 12px;
  min-width: 0;
}

.associate-quick-item label {
  display: block;
  font-size: 11px;
  font-weight: 600;
  color: var(--color-gray-500);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 4px;
}

.associate-quick-item span {
  display: block;
  font-size: 14px;
  font-weight: 500;
  color: var(--color-gray-900);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Info Cards Row */
.associate-info-row {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
  margin-bottom: 32px;
}

.associate-info-card {
  background: var(--color-white);
  border-radius: 8px;
  box-shadow: var(--shadow-card);
  overflow: hidden;
}

.info-card-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 16px 20px;
  background: var(--color-gray-50);
  border-bottom: 1px solid var(--color-gray-200);
}

.info-card-header h3 {
  margin: 0;
  font-size: 15px;
  font-weight: 600;
  color: var(--color-gray-900);
}

.card-header-icon {
  color: var(--color-gray-500);
}

.info-card-body {
  padding: 20px;
}

.info-field {
  margin-bottom: 16px;
}

.info-field:last-child {
  margin-bottom: 0;
}

.info-field label {
  display: block;
  font-size: 12px;
  font-weight: 500;
  color: var(--color-gray-500);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 4px;
}

.info-value {
  font-size: 14px;
  color: var(--color-gray-900);
}

.info-value.text-muted {
  color: var(--color-gray-400);
}

.password-mask {
  color: var(--color-gray-400);
}

.inline-password-form {
  display: inline;
}

.inline-form-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

.btn-link {
  background: none;
  border: none;
  color: var(--color-primary);
  font-size: 13px;
  cursor: pointer;
  padding: 0;
  margin-left: 8px;
}

.btn-link:hover {
  text-decoration: underline;
}

/* Associate Tabs */
.associate-content {
  background: var(--color-white);
  border-radius: 8px;
  box-shadow: var(--shadow-card);
  overflow: visible;
}

.associate-tabs {
  display: flex;
  gap: 0;
  border-bottom: 1px solid var(--color-gray-200);
  background: var(--color-gray-50);
  border-radius: 8px 8px 0 0;
}

.associate-tabs .tab-button {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 14px 20px;
  background: transparent;
  border: none;
  border-bottom: 2px solid transparent;
  font-size: 14px;
  font-weight: 500;
  color: var(--color-gray-600);
  cursor: pointer;
  transition: all 0.2s;
}

.associate-tabs .tab-button:hover {
  color: var(--color-primary);
  background: rgba(33, 150, 243, 0.05);
}

.associate-tabs .tab-button.active {
  color: var(--color-primary);
  border-bottom-color: var(--color-primary);
  background: var(--color-white);
}

.associate-tabs .tab-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  background: var(--color-primary);
  color: white;
  border-radius: var(--radius-lg);
  font-size: 11px;
  font-weight: 600;
}

.tab-content {
  padding: 24px;
}

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

/* No Records Card */
.no-records-card {
  background: var(--color-white);
  border-radius: 8px;
  box-shadow: var(--shadow-card);
  padding: 48px;
  text-align: center;
}

.no-records-icon {
  color: var(--color-gray-300);
  margin-bottom: 16px;
}

.no-records-card h3 {
  margin: 0 0 8px 0;
  font-size: 18px;
  color: var(--color-gray-900);
}

.no-records-card p {
  margin: 0;
  color: var(--color-gray-500);
}

/* Collapsed profile section */
.associate-profile-details {
  margin-top: 20px;
  background: var(--color-white);
  border: 1px solid var(--color-gray-200);
  border-radius: 8px;
  box-shadow: var(--shadow-card);
  overflow: hidden;
}

.associate-profile-details > summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 18px;
  color: var(--color-gray-700);
  font-size: 14px;
  font-weight: 600;
}

.associate-profile-details > summary::-webkit-details-marker {
  display: none;
}

.associate-profile-details > summary .summary-title {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.associate-profile-details > summary .summary-hint {
  font-size: 12px;
  font-weight: 500;
  color: var(--color-gray-500);
}

.associate-profile-details[open] > summary {
  background: var(--color-gray-50);
  border-bottom: 1px solid var(--color-gray-200);
}

.associate-profile-details-body {
  padding: 20px;
}

.associate-profile-details-body .associate-info-row {
  margin-bottom: 0;
}

/* Summary Cards (shared by student/instructor tabs) */
.student-summary-cards,
.instructor-summary-cards {
  display: grid;
  gap: 16px;
  margin-bottom: 24px;
}

.student-summary-cards {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

.instructor-summary-cards {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.summary-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px;
  background: var(--color-gray-50);
  border-radius: 8px;
  border: 1px solid var(--color-gray-200);
}

.summary-icon {
  width: 40px;
  height: 40px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
}

.summary-icon.balance { background: linear-gradient(135deg, var(--color-green-500), var(--color-green-800)); }
.summary-icon.payments { background: linear-gradient(135deg, var(--color-blue-500), var(--color-blue-800)); }
.summary-icon.documents { background: linear-gradient(135deg, var(--color-purple-500), var(--color-purple-700)); }
.summary-icon.activities { background: linear-gradient(135deg, var(--color-orange-500), var(--color-orange-800)); }
.summary-icon.due { background: linear-gradient(135deg, var(--color-red-500), var(--color-red-800)); }
.summary-icon.overdue { background: linear-gradient(135deg, var(--color-orange-500), var(--color-orange-800)); }
.summary-icon.late { background: linear-gradient(135deg, var(--color-amber-500, #f59e0b), var(--color-amber-700, #b45309)); }
.summary-icon.next { background: linear-gradient(135deg, var(--color-blue-500), var(--color-blue-800)); }
.summary-icon.progress { background: linear-gradient(135deg, var(--color-green-500), var(--color-green-800)); }
.summary-icon.courses { background: linear-gradient(135deg, var(--color-blue-500), var(--color-blue-800)); }
.summary-icon.status { background: linear-gradient(135deg, var(--color-green-500), var(--color-green-800)); }
.summary-icon.location { background: linear-gradient(135deg, var(--color-red-500), var(--color-red-800)); }
.summary-icon.calendar { background: linear-gradient(135deg, var(--color-purple-500), var(--color-purple-700)); }

.summary-content {
  flex: 1;
}

.summary-label {
  font-size: 12px;
  color: var(--color-gray-500);
  margin-bottom: 2px;
}

.summary-value {
  font-size: 18px;
  font-weight: 600;
  color: var(--color-gray-900);
}

.summary-meta {
  font-size: 11px;
  color: var(--color-gray-500);
  line-height: 1.3;
  margin-top: 2px;
}

.summary-card.is-alert {
  border-color: var(--color-orange-200, #fed7aa);
  background: var(--color-orange-50);
}

.summary-card.is-critical {
  border-color: var(--color-red-200, #fecaca);
  background: var(--color-red-50);
}

.summary-card.is-positive {
  border-color: var(--color-green-200, #bbf7d0);
  background: var(--color-green-50);
}

/* Sub-tabs within tabs */
.student-sub-tabs,
.instructor-sub-tabs {
  border: 1px solid var(--color-gray-200);
  border-radius: 8px;
  overflow: visible;
}

.sub-tab-buttons {
  display: flex;
  gap: 0;
  background: var(--color-gray-50);
  border-bottom: 1px solid var(--color-gray-200);
}

.sub-tab-button {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 12px 16px;
  background: transparent;
  border: none;
  border-bottom: 2px solid transparent;
  font-size: 13px;
  font-weight: 500;
  color: var(--color-gray-600);
  cursor: pointer;
  transition: all 0.2s;
}

.sub-tab-button:hover {
  color: var(--color-primary);
}

.sub-tab-button.active {
  color: var(--color-primary);
  border-bottom-color: var(--color-primary);
  background: var(--color-white);
}

.sub-tab-content {
  padding: 20px;
  background: var(--color-white);
}

.sub-tab-content.hidden {
  display: none;
}

/* Content Sections */
.content-section {
  margin-bottom: 24px;
}

.content-section:last-child {
  margin-bottom: 0;
}

.section-heading {
  font-size: 14px;
  font-weight: 600;
  color: var(--color-gray-700);
  margin: 0 0 16px 0;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--color-gray-200);
}

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

.section-header-with-action {
  position: relative;
}

.section-header-with-action .section-heading {
  margin-bottom: 16px;
}

.section-header-with-action .section-action-btn {
  position: absolute;
  top: -2px;
  right: 0;
  padding: 4px 10px;
  font-size: 12px;
}

/* Empty states */
.empty-state-small {
  padding: 24px;
  text-align: center;
  color: var(--color-gray-500);
  background: var(--color-gray-50);
  border-radius: 8px;
}

.empty-state-small p {
  margin: 0;
  font-size: 14px;
}

/* ===== Campuses grouped index accordions ===== */
.campuses-grouped {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.campuses-accordion {
  border: 1px solid var(--color-gray-200);
  border-radius: 12px;
  background: var(--color-white);
  box-shadow: var(--shadow-card);

  /* allow action dropdown menus to escape the container */
  overflow: visible;
}

.campuses-accordion > summary {
  list-style: none;
  cursor: pointer;
  padding: 14px 16px;
  display: flex;
  align-items: center;
  gap: 10px;
}

.campuses-accordion > summary::-webkit-details-marker { display: none; }

.campuses-accordion > summary::before {
  content: '';
  width: 0;
  height: 0;
  border-left: 6px solid var(--color-gray-500);
  border-top: 5px solid transparent;
  border-bottom: 5px solid transparent;
  transition: transform 0.15s ease;
}

.campuses-accordion[open] > summary::before {
  transform: rotate(90deg);
}

.campuses-accordion > summary:hover {
  background: var(--color-gray-50);
}

.campuses-accordion > summary .muted {
  color: var(--color-gray-500);
  font-size: 13px;
}

.campuses-accordion .campuses-table-container {
  box-shadow: none;
  border-radius: 0;
  margin: 0 16px 0 0;
}

/* Force consistent column sizing across each nested campuses table */
.campuses-table-fixed {
  width: 100%;
  table-layout: fixed;
}

.campuses-table-fixed th,
.campuses-table-fixed td {
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Pad the bottom of open accordions so content doesn't touch the border */
.campuses-accordion[open] {
  padding-bottom: 16px;
}

/* Add separation between city blocks inside a state accordion */
.campuses-accordion details.campuses-accordion {
  margin-top: 12px;
  margin-right: 16px;
}

/* Associate Edit Form */
.associate-edit-page {
  /* Match Associate detail page: let the layout container control width */
  padding: 24px 0;
}

.associate-edit-page .back-link {
  margin-bottom: 16px;
}

.associate-edit-page .back-link a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--color-gray-600);
  text-decoration: none;
  font-size: 14px;
}

.associate-edit-page .back-link a:hover {
  color: var(--color-primary);
}

.edit-form-container {
  margin-top: 24px;
}

.form-errors {
  background: var(--color-error-light);
  border: 1px solid var(--color-red-100);
  border-radius: 8px;
  padding: 16px;
  margin-bottom: 24px;
}

.form-errors h4 {
  color: var(--color-error);
  margin: 0 0 8px 0;
  font-size: 14px;
}

.form-errors ul {
  margin: 0;
  padding-left: 20px;
  color: var(--color-error);
  font-size: 14px;
}

.form-card {
  background: var(--color-white);
  border: 1px solid var(--color-gray-200);
  border-radius: 12px;
  margin-bottom: 24px;
  box-shadow: var(--shadow-card);
}

.form-card-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 16px 20px;
  border-bottom: 1px solid var(--color-gray-100);
}

.form-card-header h3 {
  margin: 0;
  font-size: 16px;
  font-weight: 600;
  color: var(--color-gray-800);
}

.form-card-header .card-header-icon {
  width: 20px;
  height: 20px;
  color: var(--color-gray-500);
}

.form-card-note {
  margin-left: auto;
  font-size: 12px;
  color: var(--color-gray-500);
  font-weight: normal;
}

.form-card-body {
  padding: 20px;
}

.form-row {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
  margin-bottom: 16px;
}

.form-row:last-child {
  margin-bottom: 0;
}

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

.form-group label {
  font-size: 13px;
  font-weight: 600;
  color: var(--color-gray-700);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.form-group .form-control {
  padding: 10px 14px;
  font-size: 14px;
  border: 1px solid var(--color-gray-200);
  border-radius: 6px;
  background: var(--color-white);
  transition: border-color 0.2s, box-shadow 0.2s;
}

.form-group .form-control:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(33, 150, 243, 0.1);
}

.form-group select.form-control {
  cursor: pointer;
}

.form-static {
  font-size: 14px;
  color: var(--color-gray-700);
  padding: 8px 0;
}

.form-hint {
  font-size: 12px;
  color: var(--color-gray-500);
}

.form-actions {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  padding-top: 16px;
}

.form-actions .btn-primary,
.form-actions .btn-secondary {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 10px 20px;
  font-size: 14px;
  font-weight: 500;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.2s;
}

.form-actions .btn-primary {
  background: var(--color-primary);
  color: white;
  border: none;
}

.form-actions .btn-primary:hover {
  background: var(--color-blue-700);
}

.form-actions .btn-secondary {
  background: var(--color-white);
  color: var(--color-gray-700);
  border: 1px solid var(--color-gray-300);
  text-decoration: none;
}

.form-actions .btn-secondary:hover {
  background: var(--color-gray-50);
}

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

/* Data Tables */
.data-table {
  width: 100%;
  border-collapse: collapse;
  background: var(--color-white);
  border: 1px solid var(--color-gray-200);
  border-radius: 8px;
  overflow: hidden;
}

.data-table thead {
  background: var(--color-gray-50);
}

.data-table th {
  padding: 12px 16px;
  text-align: left;
  font-size: 12px;
  font-weight: 600;
  color: var(--color-gray-600);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  border-bottom: 1px solid var(--color-gray-200);
}

.data-table td {
  padding: 12px 16px;
  font-size: 14px;
  color: var(--color-gray-700);
  border-bottom: 1px solid var(--color-gray-100);
}

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

.data-table tr:hover {
  background: var(--color-gray-50);
}

/* Ledger Summary */
.ledger-summary {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-bottom: 24px;
}

.ledger-stat {
  padding: 16px;
  background: var(--color-gray-50);
  border-radius: 8px;
  border: 1px solid var(--color-gray-200);
}

.ledger-stat label {
  display: block;
  font-size: 12px;
  font-weight: 500;
  color: var(--color-gray-500);
  text-transform: uppercase;
  margin-bottom: 4px;
}

.ledger-stat .stat-value {
  font-size: 20px;
  font-weight: 600;
  color: var(--color-gray-900);
}

/* Text colors */
.text-success { color: var(--color-success) !important; }
.text-danger { color: var(--color-error) !important; }

/* Type badges */
.type-badge {
  display: inline-block;
  padding: 4px 8px;
  border-radius: var(--radius-lg);
  font-size: 11px;
  font-weight: 500;
}

.type-badge.type-charge {
  background: var(--color-red-50);
  color: var(--color-red-800);
}

.type-badge.type-payment {
  background: var(--color-green-50);
  color: var(--color-green-800);
}

.type-badge.type-adjustment {
  background: var(--color-orange-50);
  color: var(--color-orange-900);
}

.type-badge.type-refund {
  background: var(--color-purple-50, #f3e8ff);
  color: var(--color-purple-700, #7c3aed);
}

.type-badge.type-reversal {
  background: var(--color-blue-50);
  color: var(--color-blue-800);
}

.line-kind-badge {
  display: inline-block;
  padding: 3px 8px;
  border-radius: var(--radius-lg);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.2px;
  text-transform: uppercase;
}
.line-kind-badge.kind-cash {
  background: var(--color-green-50);
  color: var(--color-green-800);
}
.line-kind-badge.kind-ghost {
  background: var(--color-blue-50);
  color: var(--color-blue-700);
}
.line-kind-badge.kind-account {
  background: var(--color-orange-50);
  color: var(--color-orange-900);
}

.event-badge {
  display: inline-block;
  padding: 3px 8px;
  border-radius: var(--radius-lg);
  font-size: 11px;
  font-weight: 500;
  background: var(--color-gray-100);
  color: var(--color-gray-700);
}

.ghost-badge {
  display: inline-block;
  margin-left: 8px;
  padding: 2px 6px;
  border-radius: var(--radius-lg);
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  background: var(--color-blue-50);
  color: var(--color-blue-700);
}

.student-ledger-explainer {
  margin-bottom: 16px;
}

.ledger-savings-note {
  margin-top: 6px;
  color: var(--color-success);
}

/* Status pills */
.status-pill {
  display: inline-block;
  padding: 4px 10px;
  border-radius: var(--radius-lg);
  font-size: 12px;
  font-weight: 500;
}

.status-pill.status-processed,
.status-pill.status-paid,
.status-pill.status-success,
.status-pill.status-complete {
  background: var(--color-green-50);
  color: var(--color-green-800);
}

.status-pill.status-pending,
.status-pill.status-scheduled {
  background: var(--color-blue-50);
  color: var(--color-blue-800);
}

.status-pill.status-failed,
.status-pill.status-overdue,
.status-pill.status-danger {
  background: var(--color-red-50);
  color: var(--color-red-800);
}

.status-pill.status-draft {
  background: var(--color-gray-100);
  color: var(--color-gray-600);
}

.status-pill.status-default {
  background: var(--color-gray-100);
  color: var(--color-gray-600);
}

/* Deposit badge */
.deposit-badge {
  display: inline-block;
  padding: 2px 6px;
  background: var(--color-blue-50);
  color: var(--color-blue-800);
  border-radius: var(--radius-lg);
  font-size: 10px;
  font-weight: 500;
  margin-right: 8px;
}

/* Payment Plan Card */
.payment-plan-card {
  padding: 20px;
  background: var(--color-gray-50);
  border: 1px solid var(--color-gray-200);
  border-radius: 8px;
}

.plan-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
}

.plan-status {
  display: inline-block;
  padding: 4px 10px;
  border-radius: 4px;
  font-size: 12px;
  font-weight: 500;
}

.plan-status.status-active {
  background: var(--color-green-50);
  color: var(--color-green-800);
}

.plan-status.status-paused {
  background: var(--color-orange-50);
  color: var(--color-orange-900);
}

.plan-status.status-cancelled,
.plan-status.status-replaced {
  background: var(--color-red-50, #fef2f2);
  color: var(--color-red-700, #b91c1c);
}

.btn-secondary-danger {
  color: var(--color-red-600, #dc2626);
  border-color: var(--color-red-200, #fecaca);
}

.btn-secondary-danger:hover {
  background: var(--color-red-50, #fef2f2);
  border-color: var(--color-red-300, #fca5a5);
}

.plan-method {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: var(--color-gray-600);
}

.plan-progress {
  margin-bottom: 16px;
}

.progress-header {
  display: flex;
  justify-content: space-between;
  margin-bottom: 8px;
  font-size: 13px;
  color: var(--color-gray-600);
}

.progress-bar {
  height: 8px;
  background: var(--color-gray-200);
  border-radius: 4px;
  overflow: hidden;
}

.plan-progress .progress-fill {
  height: 100%;
  width: var(--progress, 0%);
  background: linear-gradient(90deg, var(--color-primary), var(--color-primary-hover));
  border-radius: 4px;
  transition: width 0.3s ease;
}

.plan-segmented-wrap {
  margin-top: 12px;
}

.plan-segmented-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 6px;
  font-size: 12px;
  color: var(--color-gray-600);
}

.plan-segmented-bar {
  display: flex;
  align-items: stretch;
  gap: 2px;
  padding: 2px;
  height: 14px;
  border-radius: 999px;
  background: var(--color-gray-200);
  overflow: visible;
}

.plan-segment {
  flex: var(--segment-weight, 1) 1 0;
  min-width: 6px;
  border-radius: 999px;
  cursor: help;
  position: relative;
  outline: none;
  transition: filter 0.15s ease;
}

.plan-segment:hover,
.plan-segment:focus-visible {
  filter: brightness(0.92);
}

.plan-segment::after,
.plan-segment::before {
  left: 50%;
  opacity: 0;
  pointer-events: none;
  position: absolute;
  transform: translateX(-50%) translateY(4px);
  transition: opacity 0.14s ease, transform 0.14s ease;
  z-index: 4;
}

.plan-segment::after {
  content: attr(data-tooltip);
  bottom: calc(100% + 8px);
  padding: 5px 8px;
  border-radius: 6px;
  background: rgba(17, 24, 39, 0.95);
  color: var(--color-white);
  font-size: 11px;
  line-height: 1.2;
  white-space: nowrap;
  box-shadow: 0 8px 20px rgba(15, 23, 42, 0.24);
}

.plan-segment::before {
  content: '';
  bottom: calc(100% + 3px);
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 5px solid rgba(17, 24, 39, 0.95);
}

.plan-segment:hover::after,
.plan-segment:hover::before,
.plan-segment:focus-visible::after,
.plan-segment:focus-visible::before {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

.plan-segment.status-overdue,
.plan-segment-dot.status-overdue {
  background: var(--color-orange-500);
}

.plan-segment.status-failed,
.plan-segment-dot.status-failed {
  background: var(--color-red-500);
}

.plan-segment.status-pending,
.plan-segment-dot.status-pending {
  background: var(--color-blue-500);
}

.plan-segment.status-paused,
.plan-segment-dot.status-paused {
  background: var(--color-gray-500);
}

.plan-segment.status-processing,
.plan-segment-dot.status-processing {
  background: var(--color-purple-500);
}

.plan-segment-legend-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  color: var(--color-gray-600);
}

.plan-segmented-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 8px;
}

.plan-segment-dot {
  width: 9px;
  height: 9px;
  border-radius: 999px;
  display: inline-block;
}

.plan-details {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}

.plan-detail label {
  display: block;
  font-size: 11px;
  font-weight: 500;
  color: var(--color-gray-500);
  text-transform: uppercase;
  margin-bottom: 4px;
}

.plan-detail span {
  font-size: 15px;
  font-weight: 600;
  color: var(--color-gray-900);
}

/* Enrollment Card */
.enrollment-card {
  padding: 16px;
  background: var(--color-white);
  border: 1px solid var(--color-gray-200);
  border-radius: 8px;
  margin-bottom: 12px;
}

.enrollment-card:last-child {
  margin-bottom: 0;
}

.enrollment-header {
  display: flex;
  flex-wrap: wrap;
  row-gap: 8px;
  justify-content: space-between;
  align-items: center;
}

.enrollment-title {
  margin: 0 0 4px 0;
  font-size: 15px;
  font-weight: 600;
  color: var(--color-gray-900);
}

.enrollment-meta {
  display: flex;
  gap: 12px;
  font-size: 13px;
  color: var(--color-gray-500);
}

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

/* Documents Grid */
.documents-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 12px;
}

.document-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
  background: var(--color-white);
  border: 1px solid var(--color-gray-200);
  border-radius: 8px;
  transition: border-color 0.2s;
}

.document-card:hover {
  border-color: var(--color-primary);
}

.document-icon {
  width: 36px;
  height: 36px;
  background: var(--color-gray-100);
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-gray-500);
}

.document-name {
  font-size: 14px;
  font-weight: 500;
  color: var(--color-gray-900);
}

.document-meta {
  font-size: 12px;
  color: var(--color-gray-500);
}

/* Activity Feed */
.activity-feed {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.activity-item {
  display: flex;
  gap: 12px;
  padding: 12px;
  background: var(--color-white);
  border: 1px solid var(--color-gray-200);
  border-radius: 8px;
}

.activity-icon {
  width: 32px;
  height: 32px;
  background: var(--color-gray-100);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-gray-500);
  flex-shrink: 0;
}

.activity-text {
  font-size: 14px;
  color: var(--color-gray-900);
}

.activity-meta {
  font-size: 12px;
  color: var(--color-gray-500);
  margin-top: 2px;
}

/* Application Tab Styles */
.application-card {
  background: var(--color-white);
  border: 1px solid var(--color-gray-200);
  border-radius: 8px;
  padding: 24px;
}

.application-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 20px;
}

.application-title h4 {
  margin: 0 0 4px 0;
  font-size: 16px;
  font-weight: 600;
  color: var(--color-gray-900);
}

.application-date {
  font-size: 13px;
  color: var(--color-gray-500);
}

/* Application Progress Steps */
.application-progress {
  margin-bottom: 24px;
}

.progress-steps.horizontal {
  display: flex;
  justify-content: space-between;
  position: relative;
}

.progress-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  flex: 1;
}

.step-dot {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--color-gray-200);
  border: 3px solid var(--color-white);
  box-shadow: 0 0 0 2px var(--color-gray-200);
  z-index: 1;
}

.progress-step.completed .step-dot {
  background: var(--color-success);
  box-shadow: 0 0 0 2px var(--color-success);
}

.progress-step.active .step-dot {
  background: var(--color-primary);
  box-shadow: 0 0 0 2px var(--color-primary);
}

.step-line {
  position: absolute;
  top: 12px;
  left: 50%;
  width: 100%;
  height: 2px;
  background: var(--color-gray-200);
  z-index: 0;
}

.progress-step.completed .step-line {
  background: var(--color-success);
}

.step-label {
  margin-top: 8px;
  font-size: 12px;
  color: var(--color-gray-500);
  text-align: center;
}

.progress-step.completed .step-label,
.progress-step.active .step-label {
  color: var(--color-gray-700);
  font-weight: 500;
}

/* Application Details Grid */
.application-details {
  margin-bottom: 20px;
}

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

.detail-item label {
  display: block;
  font-size: 11px;
  font-weight: 500;
  color: var(--color-gray-500);
  text-transform: uppercase;
  margin-bottom: 4px;
}

.detail-value {
  font-size: 14px;
  color: var(--color-gray-900);
}

/* Application Alerts */
.application-alert {
  display: flex;
  gap: 12px;
  padding: 16px;
  border-radius: 8px;
  margin-top: 16px;
}

.application-alert.alert-danger {
  background: var(--color-red-50);
  border: 1px solid var(--color-red-100);
}

.application-alert.alert-warning {
  background: var(--color-orange-50);
  border: 1px solid var(--color-orange-200);
}

.application-alert.alert-success {
  background: var(--color-green-50);
  border: 1px solid var(--color-green-100);
}

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

.alert-danger .alert-icon { color: var(--color-red-800); }
.alert-warning .alert-icon { color: var(--color-orange-900); }
.alert-success .alert-icon { color: var(--color-green-800); }

.alert-content strong {
  display: block;
  margin-bottom: 4px;
  font-size: 14px;
}

.alert-content p {
  margin: 0;
  font-size: 13px;
  color: var(--color-gray-600);
}

/* ===== Email Logs Page Styles ===== */
.email-logs-page .page-header { margin-bottom: 24px; }
.email-logs-page .page-title { font-size: 24px; font-weight: 700; color: var(--color-navy-dark); margin: 0 0 4px 0; }
.email-logs-page .page-subtitle { font-size: 14px; color: var(--color-gray-500); }

/* Email Stats Pills */
.email-stats-pills { display: flex; gap: 16px; margin-bottom: 24px; }
.email-stats-pills .stat-pill { background: var(--color-white); border: 1px solid var(--color-gray-100); border-radius: 8px; padding: 16px 24px; text-align: center; min-width: 120px; }
.email-stats-pills .stat-value { font-size: 28px; font-weight: 700; color: var(--color-navy-dark); }
.email-stats-pills .stat-label { font-size: 12px; color: var(--color-gray-500); text-transform: uppercase; letter-spacing: 0.5px; }
.email-stats-pills .stat-pill-warning { border-color: var(--color-warning); }
.email-stats-pills .stat-pill-warning .stat-value { color: var(--color-warning); }

/* Email Filters */
.email-filters { background: var(--color-white); border: 1px solid var(--color-gray-100); border-radius: 8px; padding: 20px; margin-bottom: 24px; }
.email-filters .filter-form { }
.email-filters .filter-row { display: flex; gap: 16px; align-items: flex-end; flex-wrap: wrap; }
.email-filters .filter-group { display: flex; flex-direction: column; gap: 6px; }
.email-filters .filter-group label { font-size: 12px; font-weight: 600; color: var(--color-gray-500); text-transform: uppercase; letter-spacing: 0.5px; }
.email-filters .filter-input { padding: 8px 12px; border: 1px solid var(--color-gray-200); border-radius: 6px; font-size: 14px; min-width: 200px; }
.email-filters .filter-input:focus { outline: none; border-color: var(--color-primary); }
.email-filters .filter-select { padding: 8px 12px; border: 1px solid var(--color-gray-200); border-radius: 6px; font-size: 14px; min-width: 150px; background: white; }
.email-filters .filter-date { min-width: 140px; }
.email-filters .filter-actions { display: flex; gap: 8px; }
.email-filters .btn-filter { padding: 8px 20px; background: var(--color-primary); color: white; border: none; border-radius: 6px; font-size: 14px; font-weight: 500; cursor: pointer; }
.email-filters .btn-filter:hover { background: var(--color-primary-hover); }
.email-filters .btn-clear { padding: 8px 16px; background: var(--color-gray-100); color: var(--color-gray-600); border: none; border-radius: 6px; font-size: 14px; text-decoration: none; }
.email-filters .btn-clear:hover { background: var(--color-gray-200); }

/* Email Logs Table */
.email-logs-table-container { background: var(--color-white); border: 1px solid var(--color-gray-100); border-radius: 8px; overflow: hidden; }
.email-logs-table { width: 100%; border-collapse: collapse; }
.email-logs-table thead th { background: var(--color-gray-50); padding: 12px 16px; text-align: left; font-size: 11px; font-weight: 600; color: var(--color-gray-500); text-transform: uppercase; letter-spacing: 0.5px; border-bottom: 1px solid var(--color-gray-100); }
.email-logs-table tbody tr { border-bottom: 1px solid var(--color-gray-100); }
.email-logs-table tbody tr:last-child { border-bottom: none; }
.email-logs-table tbody tr:hover { background: var(--color-gray-50); }
.email-logs-table tbody td { padding: 12px 16px; font-size: 14px; }
.email-logs-table .row-failed { background: var(--color-error-light); }

/* Email Log Cell Styles */
.sent-cell .sent-date { font-weight: 500; color: var(--color-navy-dark); }
.sent-cell .sent-time { font-size: 12px; color: var(--color-gray-500); }
.recipient-info .recipient-name { font-weight: 500; color: var(--color-navy-dark); }
.recipient-info .recipient-email { font-size: 12px; color: var(--color-gray-500); }
.subject-cell .email-subject { color: var(--color-navy-dark); }
.subject-cell .student-ref { font-size: 11px; color: var(--color-gray-400); margin-top: 2px; }

/* Email Type Badges */
.email-type-badge { display: inline-block; padding: 4px 8px; border-radius: var(--radius-lg); font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; }
.email-type-badge.type-payment_receipt { background: var(--color-green-50); color: var(--color-green-800); }
.email-type-badge.type-payment_failed { background: var(--color-red-50); color: var(--color-red-800); }
.email-type-badge.type-payment_reminder { background: var(--color-blue-50); color: var(--color-blue-800); }
.email-type-badge.type-plan_paused { background: var(--color-amber-50); color: var(--color-orange-700); }
.email-type-badge.type-plan_resumed { background: var(--color-green-50); color: var(--color-green-800); }

/* Email Status Badges */
.email-status-badge { display: inline-flex; align-items: center; gap: 4px; padding: 4px 8px; border-radius: var(--radius-lg); font-size: 11px; font-weight: 600; }
.email-status-badge.status-sent { background: var(--color-green-50); color: var(--color-green-800); }
.email-status-badge.status-failed { background: var(--color-red-50); color: var(--color-red-800); }
.email-status-badge.status-bounced { background: var(--color-amber-50); color: var(--color-orange-700); }

.btn-view-email { padding: 6px 12px; background: var(--color-gray-100); color: var(--color-gray-600); border: none; border-radius: 4px; font-size: 12px; text-decoration: none; }
.btn-view-email:hover { background: var(--color-gray-200); }

/* Empty State */
.email-logs-table .empty-state { text-align: center; padding: 60px 20px !important; }
.email-logs-table .empty-state .empty-icon { color: var(--color-gray-300); margin-bottom: 16px; }
.email-logs-table .empty-state h4 { color: var(--color-gray-600); margin: 0 0 8px 0; }
.email-logs-table .empty-state p { color: var(--color-gray-500); margin: 0; font-size: 14px; }

/* Pagination */
.email-pagination { display: flex; justify-content: space-between; align-items: center; padding: 16px; background: var(--color-white); border: 1px solid var(--color-gray-100); border-top: none; border-radius: 0 0 8px 8px; }
.pagination-info { font-size: 13px; color: var(--color-gray-500); }
.pagination-links { display: flex; gap: 4px; }
.pagination-link { padding: 6px 12px; background: var(--color-white); border: 1px solid var(--color-gray-200); border-radius: 4px; font-size: 13px; color: var(--color-gray-600); text-decoration: none; }
.pagination-link:hover { background: var(--color-gray-50); }
.pagination-link.active { background: var(--color-primary); border-color: var(--color-primary); color: white; }

/* Email Log Detail Page */
.email-log-detail-page .page-header { margin-bottom: 24px; }
.email-log-detail-page .back-link { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--color-gray-500); text-decoration: none; margin-bottom: 8px; }
.email-log-detail-page .back-link:hover { color: var(--color-primary); }
.email-log-detail-page .page-title { font-size: 24px; font-weight: 700; color: var(--color-navy-dark); margin: 0; }

.email-detail-container { }
.email-header-card { background: var(--color-white); border: 1px solid var(--color-gray-100); border-radius: 8px; padding: 24px; margin-bottom: 24px; }
.email-header-row { display: flex; align-items: flex-start; gap: 16px; }
.email-icon-wrapper { width: 48px; height: 48px; background: var(--color-gray-100); border-radius: 8px; display: flex; align-items: center; justify-content: center; color: var(--color-gray-500); }
.email-header-content { flex: 1; }
.email-subject-title { font-size: 18px; font-weight: 600; color: var(--color-navy-dark); margin: 0 0 8px 0; }
.email-meta { display: flex; gap: 8px; }

.email-detail-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; }
.detail-card { background: var(--color-white); border: 1px solid var(--color-gray-100); border-radius: 8px; padding: 20px; }
.detail-card-wide { grid-column: span 2; }
.detail-card-title { display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 600; color: var(--color-navy-dark); margin: 0 0 16px 0; padding-bottom: 12px; border-bottom: 1px solid var(--color-gray-100); }
.detail-content { }
.detail-row { display: flex; justify-content: space-between; padding: 8px 0; border-bottom: 1px solid var(--color-gray-50); }
.detail-row:last-child { border-bottom: none; }
.detail-label { font-size: 13px; color: var(--color-gray-500); }
.detail-value { font-size: 13px; font-weight: 500; color: var(--color-navy-dark); }
.detail-value.error-text { color: var(--color-error); }

.metadata-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.metadata-item { }
.metadata-key { display: block; font-size: 11px; color: var(--color-gray-400); text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 4px; }
.metadata-value { font-size: 14px; font-weight: 500; color: var(--color-navy-dark); }

.raw-data-display { background: var(--color-gray-50); border: 1px solid var(--color-gray-200); border-radius: 6px; padding: 16px; font-size: 12px; font-family: 'Monaco', 'Consolas', monospace; overflow-x: auto; white-space: pre-wrap; word-break: break-all; max-height: 300px; overflow-y: auto; }

@media (max-width: 768px) {
  .email-stats-pills { flex-wrap: wrap; }
  .email-filters .filter-row { flex-direction: column; }
  .email-filters .filter-input, .email-filters .filter-select { width: 100%; min-width: unset; }
  .email-detail-grid { grid-template-columns: 1fr; }
  .detail-card-wide { grid-column: span 1; }
  .metadata-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ============================================
   Enhanced Application Card (Associates Page)
   ============================================ */

.application-card-full {
  background: var(--color-white);
  border: 1px solid var(--color-gray-200);
  border-radius: 12px;
  overflow: hidden;
}

.app-card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px 24px;
  background: var(--color-gray-50);
  border-bottom: 1px solid var(--color-gray-200);
}

.app-header-left {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.app-title {
  margin: 0;
  font-size: 16px;
  font-weight: 600;
  color: var(--color-gray-900);
}

.app-date {
  font-size: 13px;
  color: var(--color-gray-500);
}

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

.btn-link-small {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 13px;
  color: var(--color-primary);
  text-decoration: none;
}

.btn-link-small:hover {
  text-decoration: underline;
}

/* Progress Bar Section */
.app-progress-section {
  padding: 20px 24px;
  background: var(--color-white);
  border-bottom: 1px solid var(--color-gray-100);
}

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

.progress-label {
  font-size: 14px;
  font-weight: 500;
}

.progress-status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.progress-status.active {
  color: var(--color-primary);
}

.progress-status.complete {
  color: var(--color-success);
}

.progress-status.prevented {
  color: var(--color-red-800);
}

.progress-status.rejected {
  color: var(--color-orange-900);
}

.progress-percent {
  font-size: 14px;
  font-weight: 600;
  color: var(--color-gray-700);
}

.progress-bar-container {
  height: 8px;
  background: var(--color-gray-200);
  border-radius: 4px;
  overflow: hidden;
  margin-bottom: 8px;
}

.progress-bar-fill {
  height: 100%;
  width: var(--progress, 0%);
  background: linear-gradient(90deg, var(--color-primary) 0%, var(--color-info) 100%);
  border-radius: 4px;
  transition: width 0.3s ease;
}

.progress-bar-fill.complete {
  background: linear-gradient(90deg, var(--color-success) 0%, var(--color-green-300) 100%);
}

.progress-bar-fill.prevented {
  background: linear-gradient(90deg, var(--color-error) 0%, var(--color-red-400) 100%);
}

.progress-bar-fill.rejected {
  background: linear-gradient(90deg, var(--color-warning) 0%, var(--color-orange-300) 100%);
}

.progress-steps-labels {
  display: flex;
  justify-content: space-between;
  font-size: 11px;
  color: var(--color-gray-500);
  text-transform: uppercase;
}

/* Application Info Cards */
.app-info-cards {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  padding: 20px 24px;
  background: var(--color-gray-50);
  border-bottom: 1px solid var(--color-gray-100);
}

.app-info-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  background: var(--color-white);
  border-radius: 8px;
  border: 1px solid var(--color-gray-200);
}

.app-info-card .info-card-icon {
  width: 20px;
  height: 20px;
  color: var(--color-primary);
}

.app-info-card .info-card-content {
  display: flex;
  flex-direction: column;
}

.app-info-card .info-card-label {
  font-size: 11px;
  color: var(--color-gray-500);
  text-transform: uppercase;
}

.app-info-card .info-card-value {
  font-size: 14px;
  font-weight: 600;
  color: var(--color-gray-900);
}

/* Enrollment Checklist */
.app-checklist-section {
  padding: 16px 24px;
  border-bottom: 1px solid var(--color-gray-100);
}

.checklist-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
}

.checklist-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--color-gray-800);
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0;
}

.checklist-summary {
  font-size: 12px;
  font-weight: 600;
  color: var(--color-gray-500);
  background: var(--color-gray-100);
  padding: 2px 10px;
  border-radius: 12px;
}

.checklist-summary.all-complete {
  color: var(--color-success);
  background: #e6f9e8;
}

.checklist-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 8px;
}

.checklist-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  border-radius: 6px;
  font-size: 13px;
}

.checklist-item.complete {
  color: var(--color-success);
}

.checklist-item.complete .checklist-icon {
  color: var(--color-success);
}

.checklist-item.incomplete {
  color: var(--color-gray-500);
}

.checklist-item.incomplete .checklist-icon {
  color: var(--color-gray-300);
}

.checklist-icon {
  display: flex;
  flex-shrink: 0;
}

.checklist-icon svg {
  width: 16px;
  height: 16px;
}

.checklist-label {
  flex: 1;
}

.checklist-count {
  font-size: 11px;
  font-weight: 600;
  color: var(--color-gray-400);
}

.checklist-item.complete .checklist-count {
  color: var(--color-success);
}

/* Collapsible Sections */
.app-sections {
  padding: 0;
}

.app-section {
  border-bottom: 1px solid var(--color-gray-100);
}

.app-section:last-child {
  border-bottom: none;
}

.section-toggle {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 16px 24px;
  background: none;
  border: none;
  font-size: 14px;
  font-weight: 500;
  color: var(--color-gray-700);
  cursor: pointer;
  transition: background 0.2s;
  text-align: left;
}

.section-toggle:hover {
  background: var(--color-gray-50);
}

.section-toggle .toggle-icon {
  margin-left: auto;
  width: 16px;
  height: 16px;
  transition: transform 0.2s;
}

.section-toggle.open .toggle-icon {
  transform: rotate(180deg);
}

.section-content {
  padding: 0 24px 20px 24px;
  overflow: hidden;
  transition: max-height 0.3s ease, padding 0.3s ease;
}

.section-content.collapsed {
  max-height: 0;
  padding-top: 0;
  padding-bottom: 0;
  overflow: hidden;
}

/* Detail Grids */
.detail-grid-2 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
}

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

.detail-label {
  display: block;
  font-size: 11px;
  font-weight: 500;
  color: var(--color-gray-500);
  text-transform: uppercase;
  margin-bottom: 8px;
}

/* Badge Styles */
.badge-yes {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--color-green-800);
  background: var(--color-green-50);
  padding: 2px 8px;
  border-radius: var(--radius-lg);
  font-size: 13px;
}

.badge-no {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--color-red-800);
  background: var(--color-red-50);
  padding: 2px 8px;
  border-radius: var(--radius-lg);
  font-size: 13px;
}

/* Supplemental Badges */
.supplemental-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.supplemental-badge {
  background: var(--color-blue-50);
  color: var(--color-blue-700);
  padding: 6px 12px;
  border-radius: var(--radius-lg);
  font-size: 13px;
}

/* Subsections */
.subsection {
  padding: 16px;
  background: var(--color-gray-50);
  border-radius: 8px;
}

.subsection-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--color-gray-700);
  margin: 0 0 12px 0;
}

/* Mini Table for Payment Schedule */
.mini-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}

.mini-table th,
.mini-table td {
  padding: 10px 12px;
  text-align: left;
  border-bottom: 1px solid var(--color-gray-200);
}

.mini-table th {
  font-size: 11px;
  font-weight: 600;
  color: var(--color-gray-500);
  text-transform: uppercase;
  background: var(--color-white);
}

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

.status-mini {
  padding: 3px 8px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 500;
}

.status-mini.status-scheduled {
  background: var(--color-blue-50);
  color: var(--color-blue-700);
}

.status-mini.status-pending {
  background: var(--color-orange-50);
  color: var(--color-orange-900);
}

.status-mini.status-paid {
  background: var(--color-green-50);
  color: var(--color-green-800);
}

/* Application Timeline */
.app-timeline {
  position: relative;
  padding-left: 24px;
}

.app-timeline::before {
  content: '';
  position: absolute;
  left: 6px;
  top: 8px;
  bottom: 8px;
  width: 2px;
  background: var(--color-gray-200);
}

.app-timeline .timeline-item {
  position: relative;
  padding-bottom: 20px;
}

.app-timeline .timeline-item:last-child {
  padding-bottom: 0;
}

.app-timeline .timeline-dot {
  position: absolute;
  left: -24px;
  top: 4px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--color-gray-300);
  border: 2px solid var(--color-white);
}

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

.app-timeline .timeline-item.danger .timeline-dot {
  background: var(--color-red-800);
}

.app-timeline .timeline-item.warning .timeline-dot {
  background: var(--color-orange-900);
}

.app-timeline .timeline-title {
  font-size: 14px;
  font-weight: 500;
  color: var(--color-gray-900);
  margin-bottom: 2px;
}

.app-timeline .timeline-date {
  font-size: 13px;
  color: var(--color-gray-500);
}

.app-timeline .timeline-reason {
  font-size: 13px;
  color: var(--color-gray-500);
  margin-top: 2px;
}

/* Responsive */
@media (max-width: 968px) {
  .app-info-cards {
    grid-template-columns: repeat(2, 1fr);
  }

  .detail-grid-3 {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 640px) {
  .app-info-cards {
    grid-template-columns: 1fr;
  }

  .detail-grid-2,
  .detail-grid-3 {
    grid-template-columns: 1fr;
  }

  .app-card-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }
}

/* ============================================
   End Enhanced Application Card
   ============================================ */

/* Instructor Tab Specific */
.instructor-record {
  margin-bottom: 24px;
}

.instructor-record:last-child {
  margin-bottom: 0;
}

.record-badge {
  display: inline-block;
  padding: 4px 10px;
  background: var(--color-blue-50);
  color: var(--color-blue-800);
  border-radius: var(--radius-lg);
  font-size: 12px;
  font-weight: 500;
  margin-bottom: 16px;
}

.details-card {
  background: var(--color-white);
  border: 1px solid var(--color-gray-200);
  border-radius: 8px;
  padding: 16px;
}

.detail-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 0;
  border-bottom: 1px solid var(--color-gray-100);
}

.detail-row:last-child {
  border-bottom: none;
}

.detail-row label {
  font-size: 13px;
  color: var(--color-gray-500);
}

.detail-row span {
  font-size: 14px;
  color: var(--color-gray-900);
}

.link-primary {
  color: var(--color-primary);
  text-decoration: none;
}

.link-primary:hover {
  text-decoration: underline;
}

/* Location Card */
.location-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px;
  background: var(--color-white);
  border: 1px solid var(--color-gray-200);
  border-radius: 8px;
}

.badge-primary-campus {
  display: inline-block;
  font-size: 11px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 10px;
  background: var(--color-primary);
  color: white;
  margin-left: 6px;
  vertical-align: middle;
}

.btn-xs {
  padding: 4px 8px;
  font-size: 11px;
  border-radius: 4px;
}

.location-icon {
  width: 40px;
  height: 40px;
  background: linear-gradient(135deg, var(--color-red-500), var(--color-red-800));
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
}

.location-info {
  flex: 1;
}

.campus-remove-btn {
  background: none;
  border: none;
  color: var(--color-gray-400);
  cursor: pointer;
  padding: 4px;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: color 0.15s, background 0.15s;
}

.campus-remove-btn:hover {
  color: var(--color-red-500);
  background: var(--color-red-50, #fef2f2);
}

.campus-remove-btn:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
  color: var(--color-red-500);
  background: var(--color-red-50);
}

.location-name {
  font-size: 14px;
  font-weight: 500;
  color: var(--color-gray-900);
}

.location-address {
  font-size: 12px;
  color: var(--color-gray-500);
}

.primary-badge {
  padding: 4px 8px;
  background: var(--color-green-50);
  color: var(--color-green-800);
  border-radius: var(--radius-lg);
  font-size: 11px;
  font-weight: 500;
}

/* Teaching Card */
.teaching-card {
  padding: 16px;
  background: var(--color-white);
  border: 1px solid var(--color-gray-200);
  border-radius: 8px;
  margin-bottom: 12px;
}

.teaching-card:last-child {
  margin-bottom: 0;
}

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

.teaching-title {
  margin: 0 0 6px 0;
  font-size: 15px;
  font-weight: 600;
  color: var(--color-gray-900);
}

.teaching-meta {
  display: flex;
  gap: 16px;
  font-size: 13px;
  color: var(--color-gray-500);
}

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

.course-type-badge {
  padding: 4px 10px;
  background: var(--color-blue-50);
  color: var(--color-blue-800);
  border-radius: var(--radius-lg);
  font-size: 11px;
  font-weight: 500;
}

/* Certification Item */
.certification-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px;
  background: var(--color-white);
  border: 1px solid var(--color-gray-200);
  border-radius: 8px;
}

.cert-icon {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.cert-icon.cert-valid {
  background: var(--color-green-50);
  color: var(--color-green-800);
}

.cert-name {
  font-size: 13px;
  color: var(--color-gray-900);
}

/* Responsive adjustments for associate detail page */
@media (max-width: 968px) {
  .associate-quick-strip {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .associate-info-row {
    grid-template-columns: 1fr;
  }

  .student-summary-cards,
  .instructor-summary-cards {
    grid-template-columns: repeat(2, 1fr);
  }

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

  .plan-details {
    grid-template-columns: repeat(2, 1fr);
  }

  .ledger-summary {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 768px) {
  .associate-title-section {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }

  .associate-quick-strip {
    grid-template-columns: 1fr;
  }

  .student-summary-cards,
  .instructor-summary-cards {
    grid-template-columns: 1fr;
  }

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

  .plan-details {
    grid-template-columns: 1fr;
  }

  .progress-steps.horizontal {
    flex-direction: column;
    gap: 8px;
  }

  .step-line {
    display: none;
  }

  .sub-tab-buttons {
    flex-wrap: wrap;
  }
}

/* ===== Scheduled Payments Queue (Phase 2) ===== */
.scheduled-payments-section { background: var(--color-white); border-radius: 8px; padding: 24px; margin-bottom: 24px; box-shadow: 0 1px 3px rgba(0,0,0,0.1); }
.scheduled-payments-section .section-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; flex-wrap: wrap; gap: 12px; }
.scheduled-payments-section .section-heading { margin: 0; font-size: 18px; font-weight: 600; color: var(--color-navy-dark); }

.scheduled-summary-pills { display: flex; gap: 12px; flex-wrap: wrap; }
.summary-pill { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 20px; font-size: 13px; font-weight: 500; }
.summary-pill svg { width: 14px; height: 14px; }
.pill-failed { background: var(--color-error-light); color: var(--color-red-800); }
.pill-overdue { background: var(--color-warning-light); color: var(--color-orange-900); }
.pill-upcoming { background: var(--color-info-light); color: var(--color-blue-700); }

.scheduled-filters { margin-bottom: 16px; padding: 12px 16px; background: var(--color-gray-50); border-radius: 8px; border: 1px solid var(--color-gray-200); }
.scheduled-filter-form .filter-row { display: flex; gap: 12px; align-items: flex-end; flex-wrap: wrap; }
.scheduled-filter-form .filter-group { display: flex; flex-direction: column; gap: 4px; }
.scheduled-filter-form .filter-label { font-size: 11px; font-weight: 600; color: var(--color-gray-500); text-transform: uppercase; letter-spacing: 0.5px; }
.scheduled-filter-form .filter-select { padding: 6px 10px; border: 1px solid var(--color-gray-300); border-radius: 6px; font-size: 13px; background: var(--color-white); min-width: 130px; }
.scheduled-filter-form .filter-input { padding: 6px 10px; border: 1px solid var(--color-gray-300); border-radius: 6px; font-size: 13px; background: var(--color-white); }
.scheduled-filter-form .filter-date { width: 140px; }
.scheduled-filter-form .filter-amount { width: 100px; }
.scheduled-filter-form .filter-actions { display: flex; gap: 8px; align-items: flex-end; }
.btn-filter-apply { padding: 6px 14px; background: var(--color-primary); color: var(--color-white); border: none; border-radius: 6px; font-size: 13px; font-weight: 500; cursor: pointer; }
.btn-filter-apply:hover { background: var(--color-primary-dark); }
.btn-filter-clear { padding: 6px 14px; color: var(--color-gray-600); font-size: 13px; text-decoration: none; border: 1px solid var(--color-gray-300); border-radius: 6px; background: var(--color-white); }
.btn-filter-clear:hover { background: var(--color-gray-100); }

.scheduled-table-container { overflow-x: auto; }
.scheduled-payments-table { width: 100%; border-collapse: collapse; }
.scheduled-payments-table thead { background: var(--color-gray-50); border-bottom: 2px solid var(--color-gray-200); }
.scheduled-payments-table th { padding: 12px 16px; text-align: left; font-size: 11px; font-weight: 600; color: var(--color-gray-500); letter-spacing: 0.5px; text-transform: uppercase; }
.scheduled-payments-table td { padding: 14px 16px; vertical-align: middle; font-size: 14px; border-bottom: 1px solid var(--color-gray-100); }

.scheduled-row-failed { background: rgba(254, 232, 232, 0.5); }
.scheduled-row-failed:hover { background: rgba(254, 232, 232, 0.8); }
.scheduled-row-overdue { background: rgba(254, 243, 205, 0.5); }
.scheduled-row-overdue:hover { background: rgba(254, 243, 205, 0.8); }
.scheduled-row-pending:hover { background: var(--color-gray-50); }

.due-date-cell { display: flex; flex-direction: column; gap: 2px; }
.due-date { font-weight: 500; color: var(--color-navy-dark); }
.overdue-days { font-size: 11px; color: var(--color-red-800); font-weight: 500; }
.due-soon { font-size: 11px; color: var(--color-blue-700); font-weight: 500; }

.student-info .student-name { font-weight: 500; color: var(--color-navy-dark); }
.student-info .student-email { font-size: 12px; color: var(--color-gray-500); margin-top: 2px; }

.amount-cell { font-weight: 600; color: var(--color-navy-dark); }

.scheduled-status-badge { display: inline-flex; align-items: center; gap: 4px; padding: 4px 10px; border-radius: var(--radius-lg); font-size: 12px; font-weight: 500; }
.scheduled-status-badge svg { width: 12px; height: 12px; }
.status-failed { background: var(--color-error-light); color: var(--color-red-800); }
.status-overdue { background: var(--color-warning-light); color: var(--color-orange-900); }
.status-pending { background: var(--color-info-light); color: var(--color-blue-700); }

.failure-reason { font-size: 11px; color: var(--color-gray-500); margin-top: 4px; font-style: italic; }

.actions-cell { display: flex; gap: 8px; align-items: center; }
.btn-action-retry { display: inline-flex; align-items: center; gap: 4px; padding: 6px 12px; background: var(--color-red-800); color: white; border: none; border-radius: 4px; font-size: 12px; font-weight: 500; cursor: pointer; transition: background 0.2s; }
.btn-action-retry:hover { background: var(--color-red-900); }
.btn-action-retry svg { width: 14px; height: 14px; }
.btn-action-charge { display: inline-flex; align-items: center; gap: 4px; padding: 6px 12px; background: var(--color-orange-900); color: white; border: none; border-radius: 4px; font-size: 12px; font-weight: 500; cursor: pointer; transition: background 0.2s; }
.btn-action-charge:hover { background: var(--color-orange-900); }
.btn-action-charge svg { width: 14px; height: 14px; }
.btn-action-view { padding: 6px 12px; background: var(--color-gray-100); color: var(--color-gray-600); border: none; border-radius: 4px; font-size: 12px; font-weight: 500; cursor: pointer; text-decoration: none; transition: background 0.2s; }
.btn-action-view:hover { background: var(--color-gray-200); }

.btn-action-void { display: inline-flex; align-items: center; gap: 4px; padding: 6px 12px; background: var(--color-warning); color: white; border: none; border-radius: 4px; font-size: 12px; font-weight: 500; cursor: pointer; text-decoration: none; transition: background 0.2s; }
.btn-action-void:hover { background: var(--color-warning-dark, #b45309); }
.btn-action-void svg { width: 14px; height: 14px; }

.btn-action-refund { display: inline-flex; align-items: center; gap: 4px; padding: 6px 12px; background: var(--color-purple-600, #9333ea); color: white; border: none; border-radius: 4px; font-size: 12px; font-weight: 500; cursor: pointer; text-decoration: none; transition: background 0.2s; }
.btn-action-refund:hover { background: var(--color-purple-700, #7c3aed); }
.btn-action-refund svg { width: 14px; height: 14px; }

.payment-type-badge { display: inline-flex; align-items: center; padding: 4px 8px; border-radius: var(--radius-lg); font-size: 11px; font-weight: 500; text-transform: uppercase; }
.payment-type-badge.type-sale { background: var(--color-blue-50); color: var(--color-blue-700); }
.payment-type-badge.type-refund { background: var(--color-purple-50, #f3e8ff); color: var(--color-purple-700, #7c3aed); }

.payment-row.payment-row-voided { background: var(--color-gray-50); }
.payment-row.payment-row-voided td { color: var(--color-gray-500); text-decoration: line-through; }
.payment-row.payment-row-voided .payment-status-badge { text-decoration: none; }
.payment-row.payment-row-refunded { background: var(--color-purple-50, #faf5ff); }

.scheduled-view-all { text-align: center; padding: 16px 0; border-top: 1px solid var(--color-gray-100); margin-top: 16px; }
.view-all-text { font-size: 13px; color: var(--color-gray-500); }

.scheduled-empty-state { text-align: center; padding: 48px 24px; }
.scheduled-empty-state .empty-icon { color: var(--color-gray-300); margin-bottom: 16px; }
.scheduled-empty-state .empty-icon svg { width: 48px; height: 48px; }
.scheduled-empty-state h4 { font-size: 16px; font-weight: 600; color: var(--color-navy-dark); margin: 0 0 8px 0; }
.scheduled-empty-state p { font-size: 14px; color: var(--color-gray-500); margin: 0; }

@media (max-width: 768px) {
  .scheduled-payments-section .section-header { flex-direction: column; align-items: flex-start; }
  .scheduled-summary-pills { width: 100%; }
  .actions-cell { flex-direction: column; gap: 4px; }
}

/* ===== Cash Flow Forecast (Phase 3) ===== */
.cash-flow-forecast-section { background: var(--color-white); border-radius: 8px; padding: 24px; margin-bottom: 24px; box-shadow: 0 1px 3px rgba(0,0,0,0.1); }
.cash-flow-forecast-section .section-header { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 20px; flex-wrap: wrap; gap: 16px; }
.cash-flow-forecast-section .section-heading { margin: 0; font-size: 18px; font-weight: 600; color: var(--color-navy-dark); }
.cash-flow-forecast-section .section-subtitle { font-size: 13px; color: var(--color-gray-500); margin-top: 4px; display: block; }

.forecast-summary { display: flex; gap: 24px; }
.forecast-stat { display: flex; flex-direction: column; align-items: flex-end; }
.forecast-stat-label { font-size: 11px; color: var(--color-gray-500); text-transform: uppercase; letter-spacing: 0.5px; font-weight: 600; }
.forecast-stat-value { font-size: 20px; font-weight: 700; color: var(--color-success); }

.forecast-chart-container { position: relative; height: 200px; margin-bottom: 20px; }

.forecast-weeks-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(100px, 1fr)); gap: 12px; }
.forecast-week-card { background: var(--color-gray-50); border-radius: 8px; padding: 16px; text-align: center; transition: transform 0.2s, box-shadow 0.2s; }
.forecast-week-card:hover { transform: translateY(-2px); box-shadow: 0 4px 12px rgba(0,0,0,0.1); }
.week-label { font-size: 12px; font-weight: 600; color: var(--color-gray-500); text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 8px; }
.week-amount { font-size: 18px; font-weight: 700; color: var(--color-navy-dark); margin-bottom: 4px; }
.week-count { font-size: 11px; color: var(--color-gray-400); }

.forecast-empty-state { text-align: center; padding: 48px 24px; }
.forecast-empty-state .empty-icon { color: var(--color-gray-300); margin-bottom: 16px; }
.forecast-empty-state .empty-icon svg { width: 48px; height: 48px; }
.forecast-empty-state h4 { font-size: 16px; font-weight: 600; color: var(--color-navy-dark); margin: 0 0 8px 0; }
.forecast-empty-state p { font-size: 14px; color: var(--color-gray-500); margin: 0; }

@media (max-width: 768px) {
  .cash-flow-forecast-section .section-header { flex-direction: column; align-items: flex-start; }
  .forecast-summary { width: 100%; justify-content: space-between; }
  .forecast-weeks-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ===== Payment Action Modal (Phase 4) ===== */
.payment-modal-overlay { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0, 0, 0, 0.5); display: flex; align-items: center; justify-content: center; z-index: 10000; }
.payment-modal { background: var(--color-white); border-radius: 12px; width: 100%; max-width: 480px; box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3); animation: modalSlideIn 0.2s ease-out; }
.payment-modal-size-md { max-width: 520px; }
.payment-modal-size-lg { max-width: 820px; }
.payment-modal-size-xl { max-width: 1080px; }
@keyframes modalSlideIn { from { opacity: 0; transform: translateY(-20px); } to { opacity: 1; transform: translateY(0); } }
.payment-modal-header { display: flex; justify-content: space-between; align-items: center; padding: 20px 24px; border-bottom: 1px solid var(--color-gray-100); }
.payment-modal-header .modal-title { margin: 0; font-size: 18px; font-weight: 600; color: var(--color-navy-dark); }
.modal-close { background: none; border: none; font-size: 24px; color: var(--color-gray-400); cursor: pointer; padding: 0; width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; border-radius: 4px; transition: all 0.2s; }
.modal-close:hover { background: var(--color-gray-100); color: var(--color-gray-600); }
.modal-body { padding: 24px; }
.modal-body-scroll { max-height: min(76vh, 760px); overflow-y: auto; }
.modal-body p { margin: 0 0 16px 0; font-size: 14px; color: var(--color-gray-600); line-height: 1.5; }
.modal-form-group { margin-bottom: 16px; }
.modal-form-group label { display: block; font-size: 13px; font-weight: 500; color: var(--color-navy-dark); margin-bottom: 6px; }
.amount-input-wrapper { position: relative; display: flex; align-items: center; }
.currency-symbol { position: absolute; left: 12px; font-size: 16px; font-weight: 500; color: var(--color-gray-500); }
.modal-amount-input { width: 100%; padding: 10px 12px 10px 28px; border: 1px solid var(--color-gray-200); border-radius: 6px; font-size: 16px; font-weight: 500; }
.modal-amount-input:focus { outline: none; border-color: var(--color-primary); box-shadow: 0 0 0 3px rgba(33, 150, 243, 0.1); }
.modal-text-input, .modal-date-input { width: 100%; padding: 10px 12px; border: 1px solid var(--color-gray-200); border-radius: 6px; font-size: 14px; }
.modal-text-input:focus, .modal-date-input:focus { outline: none; border-color: var(--color-primary); box-shadow: 0 0 0 3px rgba(33, 150, 243, 0.1); }
.modal-details { background: var(--color-gray-50); border-radius: 8px; padding: 12px 16px; margin-bottom: 16px; }
.detail-row { display: flex; justify-content: space-between; padding: 6px 0; }
.detail-label { font-size: 13px; color: var(--color-gray-500); }
.detail-value { font-size: 13px; font-weight: 600; color: var(--color-navy-dark); }
.modal-warning { background: var(--color-amber-50); border: 1px solid var(--color-amber-200); border-radius: 6px; padding: 12px; font-size: 13px; color: var(--color-orange-700); }
.modal-info { background: var(--color-blue-50); border: 1px solid var(--color-blue-200); border-radius: 6px; padding: 12px; font-size: 13px; color: var(--color-blue-800); }
.payment-modal-footer { display: flex; justify-content: flex-end; gap: 12px; padding: 16px 24px; border-top: 1px solid var(--color-gray-100); background: var(--color-gray-50); border-radius: 0 0 12px 12px; }
.btn-modal-cancel { padding: 10px 20px; background: var(--color-white); border: 1px solid var(--color-gray-300); border-radius: 6px; font-size: 14px; font-weight: 500; color: var(--color-gray-600); cursor: pointer; transition: all 0.2s; }
.btn-modal-cancel:hover { background: var(--color-gray-100); }
.btn-modal-confirm { padding: 10px 24px; background: var(--color-primary); border: none; border-radius: 6px; font-size: 14px; font-weight: 500; color: white; cursor: pointer; transition: all 0.2s; }
.btn-modal-confirm:hover { background: var(--color-primary-hover); }
.btn-modal-confirm:disabled { background: var(--color-gray-300); cursor: not-allowed; }
.btn-modal-danger { padding: 10px 24px; background: var(--color-error); border: none; border-radius: 6px; font-size: 14px; font-weight: 500; color: white; cursor: pointer; transition: all 0.2s; }
.btn-modal-danger:hover { background: var(--color-red-800); }
.btn-link-danger { background: none; border: none; color: var(--color-error); font-size: 12px; font-weight: 600; cursor: pointer; }
.btn-link-danger:hover { text-decoration: underline; }

.payment-admin-actions-header { display: flex; justify-content: space-between; align-items: center; gap: 14px; flex-wrap: wrap; }
.payment-admin-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.payment-admin-note { align-self: center; font-size: 12px; color: var(--color-gray-500); }
.payment-plan-note { margin: 10px 0 0; font-size: 12px; color: var(--color-gray-600); }
.payment-plan-note-warning { color: var(--color-warning-dark, #92400e); }

.plan-editor-header { margin-bottom: 16px; }
.plan-editor-header h4 { margin: 0 0 6px 0; font-size: 18px; color: var(--color-navy-dark); }
.plan-editor-header p { margin: 0; color: var(--color-gray-500); font-size: 13px; }
.plan-editor-summary-grid { display: grid; gap: 12px; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-bottom: 16px; }
.plan-editor-summary-card { border: 1px solid var(--color-gray-200); border-radius: 10px; padding: 12px; background: var(--color-gray-50); }
.plan-editor-summary-card label { display: block; margin-bottom: 6px; font-size: 11px; letter-spacing: 0.03em; text-transform: uppercase; color: var(--color-gray-500); font-weight: 600; }
.plan-editor-summary-card .summary-value { font-size: 20px; line-height: 1.2; font-weight: 700; color: var(--color-navy-dark); }
.plan-editor-summary-card .summary-value.is-balanced { color: var(--color-success); }
.plan-editor-summary-card .summary-value.is-unbalanced { color: var(--color-error); }
.plan-editor-toolbar { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; }
.plan-editor-table-wrap { border: 1px solid var(--color-gray-200); border-radius: 10px; overflow: hidden; }
.plan-editor-table { width: 100%; border-collapse: collapse; background: var(--color-white); }
.plan-editor-table thead { background: var(--color-gray-50); }
.plan-editor-table th { text-align: left; font-size: 11px; text-transform: uppercase; letter-spacing: 0.04em; color: var(--color-gray-500); font-weight: 600; padding: 10px 12px; border-bottom: 1px solid var(--color-gray-200); }
.plan-editor-table td { padding: 10px 12px; border-bottom: 1px solid var(--color-gray-100); vertical-align: middle; }
.plan-editor-table tbody tr:last-child td { border-bottom: none; }
.plan-editor-remove-cell { text-align: right; width: 90px; }
.form-hint { margin-top: 6px; font-size: 12px; color: var(--color-gray-500); }

.one-time-actions-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.one-time-action-panel { border: 1px solid var(--color-gray-200); border-radius: 10px; padding: 16px; background: var(--color-white); }
.one-time-action-panel h4 { margin: 0 0 6px 0; font-size: 16px; color: var(--color-navy-dark); }
.one-time-action-panel > p { margin: 0 0 14px 0; font-size: 13px; color: var(--color-gray-500); }
.stacked-form { display: flex; flex-direction: column; gap: 10px; }
.action-panel-footer { margin-top: 8px; display: flex; justify-content: flex-end; }
.checkbox-inline { display: flex; align-items: flex-start; gap: 8px; font-size: 13px; color: var(--color-gray-700); margin: 2px 0; }
.checkbox-inline input[type="checkbox"] { margin-top: 2px; }
.payment-inline-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.payment-method-switch { display: inline-flex; gap: 8px; margin-bottom: 10px; }
.payment-method-option { border: 1px solid var(--color-gray-200); border-radius: 999px; padding: 8px 12px; font-size: 12px; font-weight: 600; color: var(--color-gray-700); cursor: pointer; display: inline-flex; gap: 6px; align-items: center; }
.payment-method-option.selected { border-color: var(--color-primary); color: var(--color-primary); background: var(--color-blue-50); }
.payment-method-option input[type="radio"] { margin: 0; }

@media (max-width: 1024px) {
  .payment-modal-size-xl { max-width: 920px; }
}

@media (max-width: 900px) {
  .one-time-actions-grid { grid-template-columns: 1fr; }
  .plan-editor-summary-grid { grid-template-columns: 1fr; }
  .payment-inline-grid { grid-template-columns: 1fr; }
}

.modal-warning-box { background: var(--color-warning-light); border: 1px solid var(--color-warning); border-radius: 8px; padding: 16px; margin-bottom: 16px; }
.modal-warning-box strong { display: block; color: var(--color-warning-dark, #b45309); margin-bottom: 4px; }
.modal-warning-box p { margin: 0; font-size: 14px; color: var(--color-gray-700); }

.modal-info-box { background: var(--color-gray-50); border: 1px solid var(--color-gray-200); border-radius: 8px; padding: 16px; margin-bottom: 16px; }
.modal-info-box strong { display: block; margin-bottom: 8px; }
.modal-info-box p { margin: 0 0 12px 0; font-size: 14px; color: var(--color-gray-600); }
.info-row { display: flex; justify-content: space-between; padding: 4px 0; font-size: 14px; }
.info-label { color: var(--color-gray-500); }
.info-value { font-weight: 500; color: var(--color-navy-dark); }

.modal-result { padding: 24px; text-align: center; }
.modal-result-success { color: var(--color-success); }
.modal-result-error { color: var(--color-error); }
.result-icon { font-size: 48px; margin-bottom: 12px; }
.result-message { font-size: 16px; font-weight: 500; margin-bottom: 8px; }
.result-reference { font-size: 12px; color: var(--color-gray-500); font-family: monospace; }

/* Action Items - Clickable Styling */
.action-item.action-clickable { cursor: pointer; transition: all 0.2s; }
.action-item.action-clickable:hover { background: var(--color-gray-50); transform: translateX(4px); }
.action-item.action-clickable:active { transform: translateX(2px); }

/* Action Icons */
.action-icon.action-resume { color: var(--color-success); }
.action-icon.action-pause { color: var(--color-warning); }

/* Link Secondary */
.link-secondary { color: var(--color-gray-500); text-decoration: none; font-size: 13px; transition: color 0.2s; }
.link-secondary:hover { color: var(--color-gray-700); text-decoration: underline; }

/* ===== Shared Utility Classes ===== */
/* These utilities replace common inline styles per SCHOOL_PORTAL_PATTERNS.md */

/* Clickable Elements */
.clickable { cursor: pointer; }
.clickable-card { cursor: pointer; transition: transform 0.2s, box-shadow 0.2s; }
.clickable-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
.clickable-header { cursor: pointer; }

/* Legend Dots (for chart legends) */
.legend-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  margin-right: 6px;
}
.legend-dot-success, .legend-dot.green { background: var(--color-success); }
.legend-dot-error, .legend-dot.red { background: var(--color-error); }
.legend-dot-warning, .legend-dot.orange { background: var(--color-warning); }
.legend-dot-info, .legend-dot.blue { background: var(--color-info); }
.legend-dot-primary { background: var(--color-primary); }
.legend-dot-muted { background: var(--color-gray-400); }

/* Health indicator dots (larger variant) */
.health-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  margin-right: 6px;
}
.health-dot.green { background: var(--color-success); }
.health-dot.blue { background: var(--color-info); }
.health-dot.orange { background: var(--color-warning); }
.health-dot.red { background: var(--color-error); }

/* Text Status Colors */
.text-error { color: var(--color-error); }
.text-warning { color: var(--color-warning); }
.text-success { color: var(--color-success); }
.text-info { color: var(--color-info); }
.text-muted { color: var(--color-gray-500); }
.text-scheduled { color: var(--color-gray-400); }
.text-primary { color: var(--color-primary); }
.text-bold { font-weight: 600; }
.text-center { text-align: center; }
.text-right { text-align: right; }

/* Add Button Circle (+ icon buttons) */
.add-button-circle {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--color-primary);
  color: var(--color-white);
  font-size: 18px;
  font-weight: 700;
  box-shadow: var(--shadow-sm);
  flex-shrink: 0;
}

/* Add Button Label (label next to add button) */
.add-button-label {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  font-weight: 500;
}
.add-button-label-text {
  font-size: 15px;
  color: var(--color-gray-700);
}

/* Common Flex Utilities */
.flex-row { display: flex; flex-direction: row; }
.flex-col { display: flex; flex-direction: column; }
.flex-center { display: flex; align-items: center; justify-content: center; }
.flex-between { display: flex; justify-content: space-between; align-items: center; }
.flex-start { display: flex; align-items: flex-start; }
.flex-1 { flex: 1; }
.items-center { align-items: center; }
.gap-1 { gap: var(--space-1); }
.gap-2 { gap: var(--space-2); }
.gap-3 { gap: var(--space-3); }
.gap-4 { gap: var(--space-4); }

/* Spacing Utilities */
.mt-2 { margin-top: var(--space-2); }
.mt-3 { margin-top: var(--space-3); }
.mt-4 { margin-top: var(--space-4); }
.ml-2 { margin-left: var(--space-2); }
.ml-3 { margin-left: var(--space-3); }
.ml-4 { margin-left: var(--space-4); }
.ml-auto { margin-left: auto; }

/* Table Column Widths */
.col-width-10 { width: 10%; }
.col-width-15 { width: 15%; }
.col-width-20 { width: 20%; }
.col-width-25 { width: 25%; }
.col-width-30 { width: 30%; }
.col-width-35 { width: 35%; }
.col-width-40 { width: 40%; }
.col-width-50 { width: 50%; }

/* Status text with weight */
.status-text-overdue { color: var(--color-warning); font-weight: 600; }
.status-text-deposit-required { color: var(--color-warning); font-weight: 600; }

/* Security Actions Row */
.security-actions {
  margin-top: 16px;
  display: flex;
  gap: 12px;
}

/* Input Spacing */
.input-mt { margin-top: 6px; }

/* CMT Filter Section */
.cmt-filter-section {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 8px;
}

/* CMT Mode Toggle */
.cmt-mode-toggle {
  display: flex;
  gap: 0;
  border: 1px solid var(--color-gray-200);
  border-radius: 8px;
  overflow: hidden;
}

/* CMT Debug Text */
.cmt-debug-text { color: var(--color-gray-300); font-size: 12px; }
.cmt-debug-link { color: var(--color-blue-400); text-decoration: none; }
.cmt-debug-link:hover { text-decoration: underline; }
.cmt-debug-section {
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid rgba(255,255,255,0.2);
}
.cmt-debug-meta {
  margin-top: 8px;
  font-size: 10px;
  opacity: 0.7;
}

/* Config Tables - Add Buttons */
.button-add-column,
.button-add-row {
  pointer-events: all;
  width: 150px;
  max-height: 30px;
}

/* Time Slider Wrapper */
.time-slider-wrapper {
  position: relative;
}

/* ===== Applications Index Page Styles ===== */
.applications-page {
  padding: 0;
}

.applications-page .status-pills {
  display: flex;
  gap: 8px;
  margin-bottom: 20px;
  flex-wrap: wrap;
}

.applications-page .status-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  border-radius: 20px;
  font-size: 13px;
  font-weight: 500;
  text-decoration: none;
  background: var(--color-bg-light);
  color: var(--color-text-secondary);
  transition: all 0.2s;
}

.applications-page .status-pill:hover {
  background: var(--color-border);
  color: var(--color-text-primary);
}

.applications-page .status-pill.active {
  background: var(--color-blue-500);
  color: white;
}

.applications-page .status-pill.pill-danger.active {
  background: var(--color-red-500);
}

.applications-page .status-pill.pill-warning.active {
  background: var(--color-orange-500);
}

.applications-page .status-pill.pill-success.active {
  background: var(--color-green-500);
}

.applications-page .pill-count {
  background: rgba(0, 0, 0, 0.1);
  padding: 2px 8px;
  border-radius: 10px;
  font-size: 11px;
}

.applications-page .status-pill.active .pill-count {
  background: rgba(255, 255, 255, 0.3);
}

.applications-count {
  font-size: 14px;
  color: var(--color-text-secondary);
  margin-bottom: 16px;
}

.applications-table-container {
  background: white;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

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

.applications-table th {
  background: var(--color-bg-subtle);
  padding: 12px 16px;
  text-align: left;
  font-size: 11px;
  font-weight: 600;
  color: var(--color-text-secondary);
  letter-spacing: 0.5px;
  border-bottom: 1px solid var(--color-border-light);
}

.applications-table td {
  padding: 16px;
  border-bottom: 1px solid var(--color-border-light);
  vertical-align: middle;
}

.application-row {
  cursor: pointer;
  transition: background 0.2s;
}

.application-row:hover {
  background: var(--color-bg-subtle);
}

.applicant-cell {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 12px;
  text-align: left;
}

.applicant-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  font-size: 14px;
}

.applicant-info {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
}

.applicant-name {
  font-weight: 600;
  color: var(--color-text-primary);
}

.applicant-email {
  font-size: 13px;
  color: var(--color-text-secondary);
}

.program-name,
.location-name {
  font-size: 14px;
  color: var(--color-text-primary);
}

/* Application Status Badges */
.status-draft {
  background: var(--color-border);
  color: var(--color-text-secondary);
}

.status-pending {
  background: var(--color-orange-50);
  color: var(--color-orange-900);
}

.status-prevented {
  background: var(--color-red-50);
  color: var(--color-red-800);
}

.status-expired {
  background: var(--color-gray-100);
  color: var(--color-gray-500);
}

/* Enrollment Badges */
.enrollment-badge {
  display: inline-block;
  padding: 4px 10px;
  border-radius: var(--radius-lg);
  font-size: 12px;
  font-weight: 500;
}

.enrollment-not-started {
  background: var(--color-bg-light);
  color: var(--color-text-muted);
}

.enrollment-in-progress {
  background: var(--color-blue-50);
  color: var(--color-blue-700);
}

.enrollment-enrolled {
  background: var(--color-green-50);
  color: var(--color-green-800);
}

.enrollment-failed {
  background: var(--color-red-50);
  color: var(--color-red-800);
}

.submitted-date {
  font-size: 14px;
  color: var(--color-text-primary);
}

.not-submitted {
  color: var(--color-text-muted);
  font-style: italic;
}

.applications-page .empty-state {
  text-align: center;
  padding: 60px 20px;
}

.applications-page .empty-state-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  color: var(--color-text-muted);
}

.applications-page .empty-state-content iconify-icon {
  opacity: 0.5;
}

/* ===== Application Detail Page Styles ===== */
.application-detail-page {
  padding: 0;
}

.application-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 24px;
}

.application-header .header-left {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.application-detail-page .back-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  color: var(--color-text-secondary);
  text-decoration: none;
}

.application-detail-page .back-link:hover {
  color: var(--color-blue-500);
}

.application-detail-page .action-buttons {
  display: flex;
  gap: 8px;
}

.application-detail-container {
  display: grid;
  grid-template-columns: 350px 1fr;
  gap: 24px;
}

@media (max-width: 968px) {
  .application-detail-container {
    grid-template-columns: 1fr;
  }
}

/* Application Profile Card */
.application-profile-card {
  background: white;
  border-radius: 12px;
  padding: 24px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  height: fit-content;
}

.application-profile-card .profile-header {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 24px;
}

.profile-avatar-large {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  font-size: 24px;
}

.application-profile-card .profile-name {
  font-size: 20px;
  font-weight: 600;
  margin-bottom: 8px;
}

.application-profile-card .profile-details {
  border-top: 1px solid var(--color-border-light);
  padding-top: 16px;
  margin-bottom: 24px;
}

.profile-detail-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 0;
  color: var(--color-text-secondary);
}

.profile-detail-item .detail-icon {
  width: 16px;
  height: 16px;
  color: var(--color-text-muted);
}

.profile-detail-item .detail-text {
  font-size: 14px;
}

/* Application Flow Steps */
.flow-steps {
  border-top: 1px solid var(--color-border-light);
  padding-top: 16px;
  margin-bottom: 24px;
}

.flow-steps-title {
  font-size: 12px;
  font-weight: 600;
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 16px;
}

.flow-step {
  position: relative;
  padding-left: 28px;
  padding-bottom: 16px;
}

.flow-step:last-child {
  padding-bottom: 0;
}

.flow-step::before {
  content: '';
  position: absolute;
  left: 6px;
  top: 4px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--color-border);
  border: 2px solid var(--color-border);
}

.flow-step.completed::before {
  background: var(--color-green-500);
  border-color: var(--color-green-500);
}

.flow-step.active::before {
  background: var(--color-blue-500);
  border-color: var(--color-blue-500);
  box-shadow: 0 0 0 4px rgba(33, 150, 243, 0.2);
}

.flow-step.prevented::before {
  background: var(--color-red-500);
  border-color: var(--color-red-500);
}

.flow-step.rejected::before {
  background: var(--color-orange-500);
  border-color: var(--color-orange-500);
}

.flow-step .step-line {
  position: absolute;
  left: 11px;
  top: 20px;
  width: 2px;
  height: calc(100% - 8px);
  background: var(--color-border);
}

.flow-step:last-child .step-line {
  display: none;
}

.flow-step.completed .step-line {
  background: var(--color-green-500);
}

.flow-step .step-label {
  font-size: 13px;
  color: var(--color-text-secondary);
  display: flex;
  align-items: center;
  gap: 6px;
}

.flow-step.completed .step-label {
  color: var(--color-text-primary);
}

.flow-step.prevented .step-label,
.flow-step.rejected .step-label {
  font-weight: 600;
}

.flow-step .step-reason {
  font-size: 12px;
  color: var(--color-text-muted);
  margin-top: 4px;
}

/* Application Info Cards Grid */
.info-cards-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.application-profile-card .info-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
  background: var(--color-bg-subtle);
  border-radius: 8px;
}

.application-profile-card .card-icon {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
}

.card-tuition .card-icon { background: var(--color-blue-500); }
.card-payment .card-icon { background: var(--color-purple-500); }
.card-documents .card-icon { background: var(--color-orange-500); }
.card-enrollment .card-icon { background: var(--color-green-500); }

.application-profile-card .card-label {
  font-size: 11px;
  color: var(--color-text-muted);
  text-transform: uppercase;
}

.application-profile-card .card-value {
  font-size: 14px;
  font-weight: 600;
  color: var(--color-text-primary);
}

/* Application Main Content */
.application-content {
  background: white;
  border-radius: 12px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  overflow: hidden;
}

.application-tabs {
  display: flex;
  border-bottom: 1px solid var(--color-border-light);
  background: var(--color-bg-subtle);
}

.application-tabs .tab-button {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 16px 20px;
  border: none;
  background: none;
  font-size: 14px;
  font-weight: 500;
  color: var(--color-text-secondary);
  cursor: pointer;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  transition: all 0.2s;
}

.application-tabs .tab-button:hover {
  color: var(--color-text-primary);
  background: rgba(0, 0, 0, 0.02);
}

.application-tabs .tab-button.active {
  color: var(--color-blue-500);
  border-bottom-color: var(--color-blue-500);
  background: white;
}

.application-content .tab-content {
  padding: 24px;
}

.application-content .tab-content.hidden {
  display: none;
}

/* Content Sections */
.content-section {
  margin-bottom: 32px;
}

.content-section:last-child {
  margin-bottom: 0;
}

.section-heading {
  font-size: 16px;
  font-weight: 600;
  margin-bottom: 16px;
  color: var(--color-text-primary);
}

.section-note {
  color: var(--color-text-muted);
  font-size: 14px;
  margin-bottom: 16px;
}

.info-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
}

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

.info-field.full-width {
  grid-column: span 2;
}

.info-field label {
  font-size: 12px;
  color: var(--color-text-muted);
  text-transform: uppercase;
}

.info-value {
  font-size: 14px;
  color: var(--color-text-primary);
}

.warning-text {
  color: var(--color-red-500);
}

/* Application Badges */
.badge-success {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--color-green-800);
  background: var(--color-green-50);
  padding: 2px 8px;
  border-radius: var(--radius-lg);
  font-size: 13px;
}

.badge-danger {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--color-red-800);
  background: var(--color-red-50);
  padding: 2px 8px;
  border-radius: var(--radius-lg);
  font-size: 13px;
}

/* Supplemental List */
.supplemental-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.supplemental-badge {
  background: var(--color-blue-50);
  color: var(--color-blue-700);
  padding: 6px 12px;
  border-radius: var(--radius-lg);
  font-size: 13px;
}

/* Application Timeline */
.timeline {
  position: relative;
  padding-left: 32px;
}

.timeline::before {
  content: '';
  position: absolute;
  left: 12px;
  top: 0;
  bottom: 0;
  width: 2px;
  background: var(--color-border);
}

.timeline-item {
  position: relative;
  padding-bottom: 24px;
}

.timeline-item:last-child {
  padding-bottom: 0;
}

.timeline-icon {
  position: absolute;
  left: -32px;
  top: 0;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--color-bg-light);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-text-secondary);
  border: 2px solid white;
}

.timeline-item.success .timeline-icon {
  background: var(--color-green-500);
  color: white;
}

.timeline-item.danger .timeline-icon {
  background: var(--color-red-500);
  color: white;
}

.timeline-item.warning .timeline-icon {
  background: var(--color-orange-500);
  color: white;
}

.timeline-title {
  font-weight: 600;
  color: var(--color-text-primary);
  margin-bottom: 4px;
}

.timeline-date {
  font-size: 13px;
  color: var(--color-text-secondary);
}

.timeline-reason {
  font-size: 13px;
  color: var(--color-text-muted);
  margin-top: 4px;
}

/* Action Cards */
.action-cards {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
}

@media (max-width: 768px) {
  .action-cards {
    grid-template-columns: 1fr;
  }
}

.action-card {
  display: flex;
  gap: 16px;
  padding: 20px;
  background: var(--color-bg-subtle);
  border-radius: 8px;
  border: 1px solid var(--color-border-light);
}

.action-card-icon {
  width: 40px;
  height: 40px;
  border-radius: 8px;
  background: var(--color-border);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-text-secondary);
  flex-shrink: 0;
}

.action-card-content h4 {
  font-size: 14px;
  font-weight: 600;
  margin-bottom: 4px;
}

.action-card-content p {
  font-size: 13px;
  color: var(--color-text-secondary);
  margin-bottom: 12px;
}

.action-card-content .action-form {
  margin: 0;
}

.action-card-content .action-form .btn-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.btn-action {
  padding: 8px 16px;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 500;
  border: none;
  cursor: pointer;
  transition: all 0.2s;
}

.btn-action:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.btn-success {
  background: var(--color-green-500);
  color: white;
}

.btn-warning {
  background: var(--color-orange-500);
  color: white;
}

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

/* Payment Schedule Table */
.payment-schedule-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 12px;
}

.payment-schedule-table th,
.payment-schedule-table td {
  padding: 12px;
  text-align: left;
  border-bottom: 1px solid var(--color-border-light);
}

.payment-schedule-table th {
  font-size: 11px;
  font-weight: 600;
  color: var(--color-text-muted);
  text-transform: uppercase;
}

.payment-status-badge {
  padding: 4px 8px;
  border-radius: var(--radius-lg);
  font-size: 12px;
  font-weight: 500;
}

.payment-status-badge.scheduled {
  background: var(--color-blue-50);
  color: var(--color-blue-700);
}

/* ===== Config Tables Page Styles ===== */

/* Config Tables - Prevent page-level scrolling */
.config-tables-page body {
  overflow: hidden;
}

/* Config Tables - Hide admin-content scrollbar since grid manages its own */
.config-tables-page .admin-content {
  overflow: hidden;
}

/* Config Tables - Custom Scrollbar Styling */
.config-tables-sidebar *::-webkit-scrollbar,
.table-list::-webkit-scrollbar,
.tabulator::-webkit-scrollbar,
.tabulator-tableholder::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

.config-tables-sidebar *::-webkit-scrollbar-track,
.table-list::-webkit-scrollbar-track,
.tabulator::-webkit-scrollbar-track,
.tabulator-tableholder::-webkit-scrollbar-track {
  background: var(--color-bg-light);
  border-radius: 4px;
}

.config-tables-sidebar *::-webkit-scrollbar-thumb,
.table-list::-webkit-scrollbar-thumb,
.tabulator::-webkit-scrollbar-thumb,
.tabulator-tableholder::-webkit-scrollbar-thumb {
  background: var(--color-border-dark);
  border-radius: 4px;
}

.config-tables-sidebar *::-webkit-scrollbar-thumb:hover,
.table-list::-webkit-scrollbar-thumb:hover,
.tabulator::-webkit-scrollbar-thumb:hover,
.tabulator-tableholder::-webkit-scrollbar-thumb:hover {
  background: #b0b0b0;
}

.config-tables-container {
  display: grid;
  grid-template-columns: 300px 1fr;
  gap: 0;
  height: calc(100vh - 60px);
  max-height: calc(100vh - 60px);
  margin: -20px;
  overflow: hidden;
}

/* Config Tables - Turbo Frame constraint */
turbo-frame#config_table_details {
  display: block;
  width: 100%;
  height: 100%;
  max-width: 100%;
  overflow: hidden;
  contain: layout style;
}

/* Config Tables - Sidebar styles */
.config-tables-sidebar {
  background: #fafbfc;
  border-right: 1px solid var(--color-border);
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
  width: 300px;
  min-width: 300px;
  max-width: 300px;
}

.config-tables-sidebar .sidebar-section {
  border-bottom: 1px solid var(--color-border);
  display: flex;
  flex-direction: column;
  min-height: 0;
  flex: 1 1 0;
  overflow: hidden;
}

.config-tables-sidebar .sidebar-section:last-child {
  border-bottom: none;
  flex: 1 1 0;
}

.config-tables-sidebar .sidebar-header {
  padding: 16px 20px;
  border-bottom: 1px solid var(--color-border);
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-shrink: 0;
}

.config-tables-sidebar .sidebar-header h2 {
  margin: 0 0 4px 0;
  font-size: 1rem;
  font-weight: 600;
  color: var(--color-text-primary);
}

.erd-link {
  display: inline-block;
  font-size: 0.75rem;
  color: var(--color-blue-500);
  text-decoration: none;
  padding: 4px 8px;
  border-radius: 4px;
  transition: background 0.2s;
}

.erd-link:hover {
  background: var(--color-blue-50);
  text-decoration: none;
}

.erd-back-link {
  display: inline-block;
  font-size: 0.8125rem;
  color: var(--color-text-muted);
  text-decoration: none;
  margin-bottom: 8px;
  padding: 4px 0;
  transition: color 0.2s;
}

.erd-back-link:hover {
  color: var(--color-blue-500);
  text-decoration: none;
}

/* Config Tables - Category color indicators (ERD legend) */
.category-indicator {
  width: 10px;
  height: 10px;
  border-radius: 2px;
  flex-shrink: 0;
  border: 1.5px solid;
}

.category-indicator.auth {
  background: #e1f5ff;
  border-color: var(--color-blue-700);
}

.category-indicator.academic {
  background: var(--color-orange-50);
  border-color: var(--color-orange-700);
}

.category-indicator.org {
  background: var(--color-purple-50);
  border-color: var(--color-purple-700);
}

.category-indicator.financial {
  background: var(--color-green-50);
  border-color: var(--color-green-700);
}

.category-indicator.docs {
  background: var(--color-amber-100);
  border-color: var(--color-amber-700);
}

.category-indicator.canvas {
  background: var(--color-red-50);
  border-color: var(--color-red-800);
}

.category-indicator.default {
  background: var(--color-bg-subtle);
  border-color: var(--color-border);
}

.section-badge {
  font-size: 0.625rem;
  font-weight: 600;
  text-transform: uppercase;
  padding: 3px 8px;
  border-radius: var(--radius-lg);
  letter-spacing: 0.5px;
}

.section-badge.editable {
  background: var(--color-green-50);
  color: var(--color-green-800);
}

.section-badge.readonly {
  background: var(--color-red-50);
  color: var(--color-red-800);
}

.temporal-badge {
  font-size: 0.875rem;
  margin-left: 4px;
}

.editable-badge {
  font-size: 0.875rem;
  margin-left: 4px;
}

.readonly-badge-container {
  padding: 20px;
  text-align: center;
}

.readonly-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 20px;
  background: var(--color-orange-50);
  border: 1px solid var(--color-orange-300);
  border-radius: var(--radius-lg);
  font-weight: 600;
  color: var(--color-orange-700);
  font-size: 0.875rem;
}

.editable-schema-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 20px;
  background: var(--color-green-50);
  border: 1px solid var(--color-green-300);
  border-radius: var(--radius-lg);
  font-weight: 600;
  color: var(--color-green-800);
  font-size: 0.875rem;
}

.config-tables-sidebar .button-primary {
  display: inline-block;
  padding: 0.5rem 1rem;
  background: var(--color-blue-500);
  color: white;
  text-decoration: none;
  border-radius: 0.375rem;
  font-size: 0.875rem;
  font-weight: 500;
  transition: background 0.2s;
}

.config-tables-sidebar .button-primary:hover {
  background: var(--color-blue-700);
}

.config-tables-sidebar .button-large {
  padding: 0.75rem 1.5rem;
  font-size: 1rem;
  margin-top: 20px;
}

.table-list {
  list-style: none;
  padding: 0;
  margin: 0;
  flex: 1 1 auto;
  overflow-y: auto;
  overflow-x: hidden;
  min-height: 0;
}

.table-list li {
  border-bottom: 1px solid var(--color-border-light);
  border-left: 4px solid transparent;
  min-height: 110px;
  max-height: 110px;
  transition: all 0.2s ease;
}

.table-list li.active {
  background: white;
  border-left-color: var(--color-text-muted);
  border-left-width: 4px;
}

/* Config Tables - Category-specific active states */
.table-list li.active.category-auth {
  border-left-color: var(--color-blue-700);
  background: linear-gradient(to right, rgba(225, 245, 255, 0.3), white 80px);
}

.table-list li.active.category-academic {
  border-left-color: var(--color-orange-700);
  background: linear-gradient(to right, rgba(255, 243, 224, 0.4), white 80px);
}

.table-list li.active.category-org {
  border-left-color: var(--color-purple-700);
  background: linear-gradient(to right, rgba(243, 229, 245, 0.4), white 80px);
}

.table-list li.active.category-financial {
  border-left-color: var(--color-green-700);
  background: linear-gradient(to right, rgba(232, 245, 233, 0.4), white 80px);
}

.table-list li.active.category-docs {
  border-left-color: var(--color-amber-700);
  background: linear-gradient(to right, rgba(255, 249, 196, 0.5), white 80px);
}

.table-list li.active.category-canvas {
  border-left-color: var(--color-red-800);
  background: linear-gradient(to right, rgba(255, 235, 238, 0.4), white 80px);
}

.table-list a {
  display: block;
  padding: 15px 20px;
  text-decoration: none;
  color: inherit;
  transition: background 0.2s;
  height: 100%;
  box-sizing: border-box;
}

.table-list a:hover {
  background: #f1f3f5;
}

.table-list li.active a {
  background: white;
}

.table-item {
  display: flex;
  flex-direction: column;
  gap: 4px;
  overflow: hidden;
  height: 100%;
}

.table-name {
  font-size: 0.9375rem;
  color: var(--color-text-primary);
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.table-db-name {
  font-size: 0.75rem;
  color: var(--color-text-muted);
  font-family: monospace;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.table-columns-count {
  font-size: 0.75rem;
  color: var(--color-text-muted);
  flex-shrink: 0;
}

.table-rows-count {
  font-size: 0.75rem;
  color: var(--color-text-muted);
  flex-shrink: 0;
}

.config-tables-sidebar .empty-state {
  padding: 40px 20px;
  text-align: center;
  color: var(--color-text-muted);
}

.config-tables-sidebar .empty-state p {
  margin: 0;
}

.config-tables-sidebar .empty-state-hint {
  font-size: 0.8125rem;
  margin-top: 8px;
}

/* Config Tables - Main panel styles */
.config-tables-main {
  padding: 30px;
  overflow-y: auto;
  height: 100%;
  max-height: 100%;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
}

.config-tables-main .main-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 30px;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--color-border);
  flex-shrink: 0;
}

.config-tables-main .main-header h1 {
  margin: 0 0 8px 0;
  font-size: 1.75rem;
  color: #212529;
}

.config-tables-main .subtitle {
  margin: 0 0 8px 0;
  font-size: 0.9375rem;
  color: var(--color-text-muted);
}

.config-tables-main .subtitle code {
  background: #f1f3f5;
  padding: 2px 6px;
  border-radius: 3px;
  font-size: 0.875rem;
}

.config-tables-main .description {
  margin: 0;
  color: var(--color-text-secondary);
  line-height: 1.5;
}

.config-tables-main .header-actions {
  display: flex;
  gap: 10px;
}

.config-tables-main .button-danger {
  display: inline-block;
  padding: 0.5rem 1rem;
  background: var(--color-red-600);
  color: white;
  text-decoration: none;
  border-radius: 0.375rem;
  font-size: 0.875rem;
  font-weight: 500;
  transition: background 0.2s;
  border: none;
  cursor: pointer;
}

.config-tables-main .button-danger:hover {
  background: var(--color-red-700);
}

.table-info-card {
  background: white;
  border: 1px solid var(--color-border);
  border-radius: 8px;
  padding: 25px;
  margin-bottom: 20px;
  max-width: 100%;
  box-sizing: border-box;
  overflow: visible;
}

/* Config Tables - Schema card */
.table-info-card.schema-card {
  flex: 0 0 auto;
}

/* Config Tables - Data grid card */
.table-info-card.data-grid-card {
  flex: 1 1 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

.data-grid-card > div {
  display: flex;
  flex-direction: column;
  flex: 1 1 0;
  min-height: 0;
}

.data-grid-card [data-config-table-grid-target="container"] {
  flex: 1 1 0;
  min-height: 400px;
}

/* Config Tables - Collapsible schema section */
.collapse-indicator {
  font-size: 0.75rem;
  color: var(--color-text-muted);
  transition: transform 0.2s ease;
  display: inline-block;
  user-select: none;
}

.column-count-badge {
  font-size: 0.75rem;
  color: var(--color-text-muted);
  background: var(--color-bg-subtle);
  padding: 2px 8px;
  border-radius: var(--radius-lg);
  font-weight: 500;
}

.collapsible-content {
  transition: all 0.3s ease;
  overflow: hidden;
}

.collapsible-content.hidden {
  max-height: 0;
  opacity: 0;
  margin-top: 0;
}

.collapsible-content:not(.hidden) {
  max-height: 2000px;
  opacity: 1;
  margin-top: 20px;
}

/* Config Tables - Extra padding for time scrubber */
.table-info-card:last-of-type {
  padding-bottom: 120px;
}

.table-info-card h3 {
  margin: 0 0 20px 0;
  font-size: 1.125rem;
  color: #212529;
}

.grid-header {
  display: flex;
  max-height: 45px;
  justify-content: space-between;
  align-items: right;
  margin-bottom: 20px;
}

.grid-header-controls {
  display: flex;
  gap: 12px;
  align-items: right;
}

.config-tables-main .search-input {
  padding: 0.5rem 1rem;
  border: 1px solid var(--color-border);
  border-radius: 0.375rem;
  font-size: 0.875rem;
  max-height: 35px;
  min-width: 250px;
  transition: border-color 0.2s, box-shadow 0.2s;
}

.config-tables-main .search-input:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(0, 102, 204, 0.1);
}

.config-tables-main .search-input::placeholder {
  color: var(--color-text-disabled);
}

.grid-header h3 {
  margin: 0;
}

.button-sm {
  padding: 0.375rem 0.75rem;
  font-size: 0.8125rem;
}

.schema-table {
  width: 100%;
  max-width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
}

.schema-table th,
.schema-table td {
  padding: 10px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.schema-table th {
  text-align: left;
  background: var(--color-bg-subtle);
  border-bottom: 1px solid var(--color-border);
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--color-text-secondary);
}

.schema-table td {
  border-bottom: 1px solid var(--color-border-light);
  font-size: 0.875rem;
}

.type-badge {
  display: inline-block;
  padding: 2px 8px;
  background: var(--color-blue-50);
  color: var(--color-blue-500);
  border-radius: var(--radius-lg);
  font-size: 0.75rem;
  font-weight: 500;
}

/* Config Tables - Foreign key reference links */
.fk-reference-link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 0.75rem;
  color: var(--color-blue-500);
  text-decoration: none;
  padding: 2px 6px;
  border-radius: 4px;
  transition: all 0.2s;
}

.fk-reference-link:hover {
  background: var(--color-blue-50);
  text-decoration: none;
}

.fk-reference-link code {
  background: transparent;
  padding: 0;
  font-size: 0.75rem;
  color: inherit;
}

.fk-arrow {
  color: var(--color-text-muted);
  font-weight: 600;
}

.empty-main-panel {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 500px;
  text-align: center;
}

.empty-main-panel h1 {
  margin: 0 0 15px 0;
  color: #212529;
}

.empty-main-panel > div > p {
  font-size: 1.125rem;
  color: var(--color-text-muted);
  margin-bottom: 40px;
}

.features-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
  margin-bottom: 20px;
  text-align: left;
}

.feature-card {
  padding: 20px;
  background: var(--color-bg-subtle);
  border-radius: 8px;
  border: 1px solid var(--color-border);
}

.feature-card h3 {
  margin: 0 0 8px 0;
  font-size: 1rem;
  color: #212529;
}

.feature-card p {
  margin: 0;
  font-size: 0.875rem;
  color: var(--color-text-muted);
  line-height: 1.5;
}

/* Config Tables - Time scrubber styles */
.time-scrubber-panel {
  position: sticky;
  bottom: 0;
  margin: 0 -25px -25px -25px;
  padding: 15px 20px;
  background: var(--color-bg-subtle);
  border-top: 1px solid var(--color-border);
  z-index: 100;
  box-sizing: border-box;
  min-height: 80px;
  display: block;
}

.time-scrubber-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}

.scrubber-label {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--color-text-secondary);
}

.timestamp-display {
  font-size: 0.875rem;
  color: var(--color-text-muted);
  font-family: monospace;
}

.time-slider {
  width: 100%;
  height: 8px;
  border-radius: 4px;
  background: linear-gradient(to right, var(--color-border) 0%, var(--color-primary) 100%);
  outline: none;
  -webkit-appearance: none;
}

.time-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--color-primary);
  cursor: pointer;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.time-slider::-moz-range-thumb {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--color-primary);
  cursor: pointer;
  border: none;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

/* Config Tables - Time tooltip styles */
.time-tooltip {
  position: absolute;
  background: rgba(0, 0, 0, 0.85);
  color: white;
  padding: 6px 12px;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 500;
  white-space: nowrap;
  pointer-events: none;
  transform: translateX(-50%);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
  z-index: 1000;
}

.time-tooltip::after {
  content: '';
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border: 6px solid transparent;
  border-top-color: rgba(0, 0, 0, 0.85);
}

.time-tooltip.hidden {
  display: none;
}

/* Config Tables - Historical banner styles */
.historical-banner {
  background: linear-gradient(135deg, #fff3cd 0%, #ffeaa7 100%);
  border: 2px solid var(--color-amber-500);
  border-radius: 8px;
  padding: 12px 20px;
  max-height: 35px;
  margin-bottom: 15px;
  box-shadow: 0 2px 8px rgba(255, 193, 7, 0.2);
}

.historical-banner.hidden {
  display: none;
}

.historical-banner-content {
  display: flex;
  max-height: 35px;
  margin-top: -10px;
  min-width: 300px;
  align-items: center;
  gap: 12px;
}

.historical-icon {
  font-size: 1.25rem;
}

.historical-banner-content > span {
  flex: 1;
  font-size: 0.9375rem;
  font-weight: 500;
  color: #856404;
}

.reset-button {
  padding: 0.375rem 0.75rem;
  background: white;
  color: var(--color-text-secondary);
  border: 1px solid var(--color-border-muted);
  border-radius: 0.375rem;
  font-size: 0.8125rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s;
}

.reset-button:hover {
  background: var(--color-bg-subtle);
  border-color: var(--color-border-dark);
}

/* Config Tables - Add column form styles */
.add-column-form {
  margin-bottom: 20px;
  padding: 15px;
  background: var(--color-bg-subtle);
  border-radius: 6px;
  border: 1px solid var(--color-border);
}

.inline-form .form-row {
  display: grid;
  grid-template-columns: 1fr 180px 150px auto;
  gap: 12px;
  align-items: end;
}

.form-group-inline {
  display: flex;
  flex-direction: column;
}

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

.config-tables-main .form-control {
  padding: 0.5rem 0.75rem;
  font-size: 0.875rem;
  border: 1px solid var(--color-border-muted);
  border-radius: 0.375rem;
  font-family: inherit;
}

.config-tables-main .form-control:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(0, 102, 204, 0.1);
}

.form-actions-inline {
  display: flex;
  gap: 8px;
  align-items: flex-end;
}

.config-tables-main .button-secondary {
  display: inline-block;
  padding: 0.375rem 0.75rem;
  background: white;
  color: var(--color-text-primary);
  text-decoration: none;
  border-radius: 6px;
  border: 1px solid var(--color-border-muted);
  font-size: 0.8125rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s;
}

.config-tables-main .button-secondary:hover {
  background: var(--color-bg-light);
  border-color: var(--color-blue-500);
  color: var(--color-blue-500);
}

/* Config Tables - Delete Confirmation Modal */
.config-tables-main .modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
}

.config-tables-main .modal-overlay.hidden {
  display: none;
}

/* Config Tables - FK Selector Modal */
.fk-selector-modal {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2000;
  display: flex;
  align-items: center;
  justify-content: center;
}

.fk-selector-modal.hidden {
  display: none;
}

.fk-selector-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
}

.fk-selector-content {
  position: relative;
  background: white;
  border-radius: 12px;
  max-width: 90vw;
  max-height: 85vh;
  width: 900px;
  display: flex;
  flex-direction: column;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
}

.fk-selector-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px 24px;
  border-bottom: 1px solid var(--color-border);
  flex-shrink: 0;
}

.fk-selector-header h2 {
  margin: 0;
  font-size: 1.25rem;
  color: #212529;
}

.fk-selector-search {
  padding: 16px 24px;
  border-bottom: 1px solid var(--color-border);
  background: var(--color-bg-subtle);
}

.fk-search-input {
  width: 100%;
  padding: 10px 16px;
  border: 1px solid var(--color-border-muted);
  border-radius: 6px;
  font-size: 0.9375rem;
  transition: all 0.2s;
}

.fk-search-input:focus {
  outline: none;
  border-color: var(--color-blue-500);
  box-shadow: 0 0 0 3px rgba(0, 102, 204, 0.1);
}

.fk-modal-close {
  background: none;
  border: none;
  font-size: 2rem;
  line-height: 1;
  color: var(--color-text-muted);
  cursor: pointer;
  padding: 0;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
  transition: all 0.2s;
}

.fk-modal-close:hover {
  background: var(--color-bg-subtle);
  color: #212529;
}

.fk-selector-body {
  padding: 24px;
  overflow-y: auto;
  flex: 1;
  min-height: 0;
}

.fk-selector-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.875rem;
}

.fk-selector-table th {
  background: var(--color-bg-subtle);
  border-bottom: 1px solid var(--color-border);
  padding: 12px;
  text-align: left;
  font-weight: 600;
  color: var(--color-text-secondary);
  position: sticky;
  top: 0;
}

.fk-selector-table td {
  border-bottom: 1px solid var(--color-border-light);
  padding: 12px;
  color: var(--color-text-secondary);
}

.fk-selector-table tbody tr {
  transition: background 0.2s;
}

.fk-selector-table tbody tr:hover {
  background: var(--color-bg-subtle);
}

.fk-selector-table tbody tr.current-selection {
  background: linear-gradient(to right, rgba(0, 102, 204, 0.08), rgba(0, 102, 204, 0.02));
  border-left: 4px solid var(--color-blue-500);
}

.fk-selector-table tbody tr.current-selection td:first-child {
  padding-left: 8px;
}

.current-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 6px 12px;
  background: var(--color-blue-50);
  color: var(--color-blue-500);
  border-radius: var(--radius-lg);
  font-size: 0.8125rem;
  font-weight: 600;
}

.fk-select-button {
  padding: 6px 16px;
  background: var(--color-blue-500);
  color: white;
  border: none;
  border-radius: 4px;
  font-size: 0.8125rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s;
}

.fk-select-button:hover {
  background: #0052a3;
}

.fk-table-link {
  display: inline-block;
  color: var(--color-blue-500);
  text-decoration: none;
  font-size: 0.9375rem;
  font-weight: 500;
  padding: 8px 16px;
  border-radius: 4px;
  transition: all 0.2s;
}

.fk-table-link:hover {
  background: var(--color-blue-50);
  text-decoration: none;
}

.config-tables-main .modal-content {
  background: white;
  border-radius: 8px;
  padding: 24px;
  max-width: 500px;
  width: 90%;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
}

.config-tables-main .modal-content h2 {
  margin: 0 0 16px 0;
  font-size: 1.5rem;
  color: var(--color-red-600);
}

.config-tables-main .modal-content p {
  margin: 0 0 12px 0;
  color: var(--color-text-secondary);
}

.config-tables-main .modal-content code {
  background: #f1f3f5;
  padding: 2px 6px;
  border-radius: 3px;
  font-size: 0.9em;
}

.config-tables-main .modal-content .form-control {
  margin: 16px 0;
}

.modal-actions {
  display: flex;
  gap: 12px;
  justify-content: flex-end;
  margin-top: 20px;
}

/* Config Tables - Tabulator grid constraints */
.config-tables-main .tabulator {
  width: 100%;
  overflow-x: auto;
  overflow-y: visible;
}

.config-tables-main .tabulator-tableholder {
  overflow-x: auto;
  overflow-y: visible;
}

/* Config Tables - Tabulator pagination styles */
.config-tables-main .tabulator-footer {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  padding: 10px;
  gap: 15px;
}

.config-tables-main .tabulator-page-size {
  width: auto;
  max-width: 80px;
  font-size: 0.875rem;
}

.config-tables-main .tabulator-paginator {
  display: flex;
  align-items: center;
  gap: 10px;
}

/* ===== Config Table Create Page Styles ===== */
.config-table-form-page .page-header {
  margin-bottom: 30px;
  padding-bottom: 20px;
  border-bottom: 2px solid #dee2e6;
}

.config-table-form-page .page-header h1 {
  margin: 0 0 8px 0;
  font-size: 1.75rem;
  color: #212529;
}

.config-table-form-page .subtitle {
  margin: 0;
  color: var(--color-text-secondary);
  font-size: 1rem;
}

.config-table-form-page .form-container {
  max-width: 900px;
}

.config-table-form {
  background: white;
  border: 1px solid #dee2e6;
  border-radius: 8px;
  padding: 30px;
}

.config-table-form .form-section {
  margin-bottom: 30px;
  padding-bottom: 30px;
  border-bottom: 1px solid #e9ecef;
}

.config-table-form .form-section:last-of-type {
  border-bottom: none;
}

.config-table-form .section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.config-table-form .form-section h2 {
  margin: 0 0 20px 0;
  font-size: 1.25rem;
  color: #212529;
}

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

.config-table-form .form-group {
  margin-bottom: 20px;
}

.config-table-form .form-group label {
  display: block;
  margin-bottom: 6px;
  font-weight: 600;
  font-size: 0.875rem;
  color: #495057;
}

.config-table-form .form-control {
  width: 100%;
  padding: 0.5rem 0.75rem;
  font-size: 0.9375rem;
  border: 1px solid #ced4da;
  border-radius: 0.375rem;
  font-family: inherit;
}

.config-table-form .form-control:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(0, 102, 204, 0.1);
}

.config-table-form .form-hint {
  display: block;
  margin-top: 6px;
  font-size: 0.8125rem;
  color: var(--color-text-secondary);
}

.config-table-form .form-hint code {
  background: #f1f3f5;
  padding: 2px 6px;
  border-radius: 3px;
  font-size: 0.75rem;
}

.config-table-form .form-hint-box {
  background: var(--color-bg-subtle);
  border-left: 3px solid var(--color-primary);
  padding: 12px 16px;
  margin-top: 15px;
  font-size: 0.875rem;
  color: #495057;
}

.config-table-form .form-hint-box strong {
  color: #212529;
}

.columns-list {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.column-row {
  display: grid;
  grid-template-columns: 40px 1fr 40px;
  gap: 15px;
  align-items: start;
  padding: 15px;
  background: var(--color-bg-subtle);
  border-radius: 6px;
  border: 1px solid #e9ecef;
}

.column-row-number {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  background: white;
  border: 1px solid #dee2e6;
  border-radius: 50%;
  font-weight: 600;
  font-size: 0.875rem;
  color: var(--color-text-secondary);
  margin-top: 24px;
}

.column-row-fields {
  display: grid;
  grid-template-columns: 1fr 200px 150px;
  gap: 12px;
}

.button-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 0;
  font-size: 1.5rem;
  line-height: 1;
  border-radius: 50%;
  margin-top: 24px;
}

.config-table-form .form-actions {
  display: flex;
  gap: 12px;
  justify-content: flex-end;
  padding-top: 20px;
}

.csv-upload-section {
  margin-bottom: 20px;
  padding: 20px;
  background: var(--color-bg-subtle);
  border: 2px dashed #dee2e6;
  border-radius: 8px;
  text-align: center;
}

.csv-upload-label {
  display: inline-block;
  cursor: pointer;
}

.csv-file-input {
  display: none;
}

.csv-upload-button {
  display: inline-block;
  padding: 0.75rem 1.5rem;
  background: white;
  color: #495057;
  border: 1px solid #ced4da;
  border-radius: 0.375rem;
  font-size: 0.875rem;
  font-weight: 500;
  transition: all 0.2s;
}

.csv-upload-button:hover {
  background: #e9ecef;
  border-color: #adb5bd;
}

/* ============================================
   ERD (Entity Relationship Diagram) Page Styles
   ============================================ */

.erd-container {
  height: calc(100vh - 60px);
  display: flex;
  flex-direction: column;
  margin: -20px;
  overflow: hidden;
}

.erd-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding: 30px;
  border-bottom: 2px solid var(--color-border);
  background: white;
  flex-shrink: 0;
}

.erd-header h1 {
  margin: 0 0 8px 0;
  font-size: 1.75rem;
  color: var(--color-text-primary);
}

.erd-header .subtitle {
  margin: 0;
  font-size: 0.9375rem;
  color: var(--color-text-secondary);
}

.erd-header .header-actions {
  display: flex;
  gap: 12px;
}

/* ERD-specific button styles (scoped to avoid conflicts) */
.erd-container .button-primary,
.erd-header .button-primary {
  display: inline-block;
  padding: 0.5rem 1rem;
  background: var(--color-primary, #0066cc);
  color: white;
  text-decoration: none;
  border-radius: 0.375rem;
  font-size: 0.875rem;
  font-weight: 500;
  border: none;
  cursor: pointer;
  transition: background 0.2s;
}

.erd-container .button-primary:hover,
.erd-header .button-primary:hover {
  background: var(--color-primary-hover, #0052a3);
}

.erd-container .button-secondary,
.erd-header .button-secondary {
  display: inline-block;
  padding: 0.5rem 1rem;
  background: white;
  color: var(--color-text-secondary);
  text-decoration: none;
  border-radius: 0.375rem;
  border: 1px solid var(--color-border);
  font-size: 0.875rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s;
}

.erd-container .button-secondary:hover,
.erd-header .button-secondary:hover {
  background: var(--color-bg-light);
  border-color: var(--color-border-dark);
}

.erd-diagram-wrapper {
  flex: 1;
  overflow: auto;
  padding: 30px;
  background: var(--color-bg-light);
  position: relative;
}

.diagram-controls {
  position: sticky;
  top: 0;
  left: 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  padding: 12px;
  background: white;
  border: 1px solid var(--color-border);
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  z-index: 10;
}

.controls-left {
  display: flex;
  gap: 8px;
}

.controls-hint {
  font-size: 0.875rem;
  color: var(--color-text-secondary);
  font-style: italic;
}

.controls-hint strong {
  color: var(--color-text-secondary);
  font-weight: 600;
}

.control-button {
  padding: 0.5rem 1rem;
  background: white;
  color: var(--color-text-secondary);
  border: 1px solid var(--color-border);
  border-radius: 0.375rem;
  font-size: 0.875rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s;
}

.control-button:hover {
  background: var(--color-bg-light);
  border-color: var(--color-border-dark);
}

.mermaid-diagram {
  background: white;
  border: 1px solid var(--color-border);
  border-radius: 8px;
  padding: 30px;
  min-height: 600px;
  overflow: hidden;
  cursor: grab;
  user-select: none;
}

.mermaid-diagram:active {
  cursor: grabbing;
}

.mermaid-diagram svg {
  transition: none;
  max-width: none !important;
  pointer-events: all;
}

.erd-legend {
  padding: 20px 30px;
  background: white;
  border-top: 2px solid var(--color-border);
  flex-shrink: 0;
}

.erd-legend h3 {
  margin: 0 0 12px 0;
  font-size: 1rem;
  color: var(--color-text-primary);
}

.legend-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 12px;
  margin-bottom: 12px;
}

.legend-item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.875rem;
}

.legend-color {
  width: 24px;
  height: 24px;
  border-radius: 4px;
  border: 2px solid #333;
}

.legend-color.auth {
  background: #e1f5ff;
  border-color: #0288d1;
}

.legend-color.academic {
  background: #fff3e0;
  border-color: #f57c00;
}

.legend-color.org {
  background: #f3e5f5;
  border-color: #7b1fa2;
}

.legend-color.financial {
  background: #e8f5e9;
  border-color: #388e3c;
}

.legend-color.docs {
  background: #fff9c4;
  border-color: #f9a825;
}

.legend-color.system {
  background: #e0e0e0;
  border-color: #616161;
}

.legend-color.canvas {
  background: #ffebee;
  border-color: #c62828;
}

.legend-hint {
  margin: 8px 0 0 0;
  font-size: 0.875rem;
  color: var(--color-text-secondary);
  font-style: italic;
}

.erd-error {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 60px;
  text-align: center;
}

.erd-error h2 {
  margin: 0 0 16px 0;
  color: var(--color-red-600, #dc3545);
}

.erd-error p {
  margin: 8px 0;
  color: var(--color-text-secondary);
}

.erd-error code {
  background: var(--color-bg-light);
  padding: 2px 6px;
  border-radius: 3px;
  font-size: 0.9em;
}

/* Mermaid entity interactivity */
.mermaid-diagram .clickable-entity {
  transition: all 0.2s;
}

.mermaid-diagram .clickable-entity:hover {
  opacity: 0.8;
}

.mermaid-diagram .clickable-entity rect {
  transition: fill 0.2s, stroke 0.2s, stroke-width 0.2s;
}

.mermaid-diagram .clickable-entity:hover rect {
  fill: #fff3cd !important;
  stroke: #ffc107 !important;
  stroke-width: 3px !important;
}

.mermaid-diagram .er-entity rect {
  transition: fill 0.2s, stroke 0.2s;
}

.mermaid-diagram .er-entity:hover rect {
  fill: #fff3cd !important;
  stroke: #ffc107 !important;
  stroke-width: 3px !important;
}

/* ============================================
   ERD Embedded (Within Config Tables) Styles
   ============================================ */

.erd-embedded-container {
  padding: 20px;
  height: 100%;
  display: flex;
  flex-direction: column;
}

.erd-embedded-header {
  margin-bottom: 20px;
}

.erd-embedded-header h2 {
  margin: 0 0 8px 0;
  font-size: 1.5rem;
  color: var(--color-text-primary);
}

.erd-hint {
  margin: 0;
  font-size: 0.875rem;
  color: var(--color-text-secondary);
  font-style: italic;
}

.erd-diagram-wrapper-embedded {
  flex: 1;
  min-height: 500px;
  position: relative;
}

.diagram-controls-embedded {
  position: absolute;
  top: 10px;
  left: 10px;
  display: flex;
  gap: 6px;
  background: white;
  padding: 8px;
  border-radius: 6px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
  z-index: 10;
  align-items: center;
}

.control-button-sm {
  padding: 4px 10px;
  background: white;
  color: var(--color-text-secondary);
  border: 1px solid var(--color-border);
  border-radius: 4px;
  font-size: 0.75rem;
  cursor: pointer;
  transition: all 0.2s;
}

.control-button-sm:hover {
  background: var(--color-bg-light);
  border-color: var(--color-border-dark);
}

.controls-hint-sm {
  font-size: 0.75rem;
  color: var(--color-text-secondary);
  margin-left: 8px;
}

.mermaid-diagram-embedded {
  background: white;
  border: 1px solid var(--color-border);
  border-radius: 8px;
  height: 100%;
  overflow: hidden;
  cursor: grab;
  user-select: none;
}

.mermaid-diagram-embedded:active {
  cursor: grabbing;
}

.mermaid-diagram-embedded svg {
  max-width: none !important;
  pointer-events: all;
}

.erd-legend-embedded {
  margin-top: 16px;
  padding: 12px;
  background: var(--color-bg-light);
  border-radius: 6px;
}

.legend-grid-embedded {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 10px;
}

/* Embedded legend uses same .legend-item and .legend-color from main ERD */

.erd-error-embedded {
  padding: 60px;
  text-align: center;
  color: var(--color-text-secondary);
}

.erd-error-embedded h3 {
  color: var(--color-red-600, #dc3545);
  margin-bottom: 12px;
}

/* ============================================
   Payments Debug Page Styles
   ============================================ */

.payments-debug-page {
  padding: 0;
}

.payments-debug-page .page-header {
  margin-bottom: 24px;
}

.payments-debug-page .page-title {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 8px 0;
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--color-text-primary);
}

.payments-debug-page .page-subtitle {
  margin: 0;
  color: var(--color-text-secondary);
  font-size: 0.9rem;
}

.payments-debug-page .page-subtitle code {
  background: var(--color-bg-light);
  padding: 2px 6px;
  border-radius: 4px;
  font-size: 0.85em;
}

/* Debug Tabs */
.debug-tabs {
  display: flex;
  gap: 4px;
  border-bottom: 2px solid var(--color-border);
  margin-bottom: 0;
}

.debug-tab {
  padding: 12px 20px;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--color-text-secondary);
  text-decoration: none;
  border-bottom: 2px solid transparent;
  margin-bottom: -2px;
  transition: all 0.2s;
}

.debug-tab:hover {
  color: var(--color-blue-500);
  background: var(--color-blue-50);
}

.debug-tab.active {
  color: var(--color-blue-500);
  border-bottom-color: var(--color-blue-500);
  background: var(--color-blue-50);
}

/* Debug Content */
.debug-content {
  background: white;
  border: 1px solid var(--color-border);
  border-top: none;
  border-radius: 0 0 8px 8px;
}

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

.debug-table-title {
  margin: 0;
  font-size: 1rem;
  font-weight: 600;
  color: var(--color-text-primary);
}

.debug-row-count {
  font-size: 0.8125rem;
  color: var(--color-text-muted);
}

/* Debug Table */
.debug-table-container {
  overflow-x: auto;
}

.debug-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.8125rem;
}

.debug-table th {
  text-align: left;
  padding: 12px 16px;
  background: var(--color-bg-light);
  border-bottom: 1px solid var(--color-border);
  font-weight: 600;
  color: var(--color-text-secondary);
  white-space: nowrap;
}

.debug-table td {
  padding: 10px 16px;
  border-bottom: 1px solid var(--color-border-light);
  color: var(--color-text-primary);
  max-width: 300px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.debug-table tr:hover {
  background: var(--color-bg-light);
}

.debug-table td.monospace {
  font-family: 'SF Mono', 'Monaco', 'Inconsolata', 'Fira Code', monospace;
  font-size: 0.75rem;
  color: var(--color-text-secondary);
}

.debug-table td.empty-state {
  text-align: center;
  padding: 40px;
  color: var(--color-text-muted);
  font-style: italic;
}

/* Debug Pagination */
.debug-pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 20px;
  padding: 16px;
  border-top: 1px solid var(--color-border);
  background: var(--color-bg-subtle);
}

.debug-pagination .pagination-link {
  padding: 8px 16px;
  background: white;
  border: 1px solid var(--color-border);
  border-radius: 4px;
  color: var(--color-blue-500);
  text-decoration: none;
  font-size: 0.8125rem;
  transition: all 0.2s;
}

.debug-pagination .pagination-link:hover {
  background: var(--color-blue-50);
  border-color: var(--color-blue-500);
}

.debug-pagination .pagination-info {
  font-size: 0.8125rem;
  color: var(--color-text-secondary);
}

/* Checkbox Grid for Days of Week */
.checkbox-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 8px;
}

.checkbox-item {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 12px;
  background: var(--color-gray-50);
  border: 1px solid var(--color-gray-200);
  border-radius: var(--radius-sm);
  cursor: pointer;
  font-size: 14px;
  color: var(--color-gray-700);
  transition: all 0.2s;
}

.checkbox-item:hover {
  background: var(--color-gray-100);
  border-color: var(--color-gray-300);
}

.checkbox-item input[type="checkbox"] {
  width: 16px;
  height: 16px;
  cursor: pointer;
  accent-color: var(--color-primary);
}

.checkbox-item:has(input:checked) {
  background: var(--color-primary-light);
  border-color: var(--color-primary);
  color: var(--color-primary-dark);
}

/* Multi-date picker */
.multi-date-inputs {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 8px;
}

.multi-date-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

.multi-date-row .form-input {
  flex: 1;
}

.btn-remove-date {
  width: 32px;
  height: 32px;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-gray-100);
  border: 1px solid var(--color-gray-200);
  border-radius: var(--radius-sm);
  color: var(--color-gray-500);
  font-size: 18px;
  cursor: pointer;
  transition: all 0.2s;
}

.btn-remove-date:hover {
  background: var(--color-red-50);
  border-color: var(--color-red-300);
  color: var(--color-red-500);
}

.add-date-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-top: 8px;
  padding: 6px 0;
  background: none;
  border: none;
  color: var(--color-primary);
  font-size: 14px;
  cursor: pointer;
  transition: color 0.2s;
}

.add-date-btn:hover {
  color: var(--color-primary-dark);
  text-decoration: underline;
}


/* ========================================
   PROMO CODES PAGE STYLES
   ======================================== */

.promo-codes-page {
  padding: 24px;
}

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

.promo-codes-page .page-title {
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--color-text-primary);
  margin: 0;
}

.promo-codes-page .header-controls {
  display: flex;
  gap: 16px;
  align-items: center;
}

.promo-codes-page .search-filters {
  display: flex;
  gap: 12px;
  align-items: center;
}

/* Table Container */
.promo-codes-table-container {
  background: white;
  border-radius: 8px;
  border: 1px solid var(--color-border);
  overflow: hidden;
}

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

.promo-codes-table th {
  text-align: left;
  padding: 12px 16px;
  background: var(--color-bg-subtle);
  border-bottom: 1px solid var(--color-border);
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.promo-codes-table td {
  padding: 12px 16px;
  border-bottom: 1px solid var(--color-border-light);
  font-size: 0.875rem;
  color: var(--color-text-primary);
}

.promo-code-row {
  cursor: pointer;
  transition: background 0.15s;
}

.promo-code-row:hover {
  background: var(--color-bg-light);
}

/* Promo Code Cell */
.promo-code-cell {
  display: flex;
  align-items: center;
  gap: 12px;
}

.promo-code-icon-box {
  width: 40px;
  height: 40px;
  background: linear-gradient(135deg, var(--color-purple-500), var(--color-purple-600));
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.promo-code-icon-box.large {
  width: 56px;
  height: 56px;
  border-radius: 12px;
}

.promo-code-icon-inner {
  color: white;
}

.promo-code-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.promo-code-code {
  font-weight: 600;
  color: var(--color-text-primary);
  font-family: 'SF Mono', 'Monaco', 'Inconsolata', monospace;
  font-size: 0.9rem;
}

.promo-code-name {
  font-size: 0.8125rem;
  color: var(--color-text-muted);
}

.promo-code-scope {
  font-size: 0.875rem;
  color: var(--color-text-secondary);
}

/* Effects Badges */
.effects-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.effect-badge {
  display: inline-block;
  padding: 3px 8px;
  background: var(--color-purple-50);
  color: var(--color-purple-700);
  border-radius: var(--radius-lg);
  font-size: 0.75rem;
  font-weight: 500;
}

/* Redemptions Cell */
.redemptions-cell {
  display: flex;
  align-items: center;
  gap: 6px;
}

.redemptions-count {
  font-weight: 500;
}

.redemptions-full {
  font-size: 0.75rem;
  color: var(--color-red-500);
}

/* Status Badges */
.status-badge.status-active {
  background: var(--color-green-50);
  color: var(--color-green-700);
}

.status-badge.status-inactive {
  background: var(--color-gray-100);
  color: var(--color-gray-600);
}

.status-badge.status-draft {
  background: var(--color-yellow-50);
  color: var(--color-yellow-700);
}

.status-badge.large {
  padding: 6px 16px;
  font-size: 0.875rem;
}

/* ========================================
   PROMO CODE DETAIL PAGE
   ======================================== */

.promo-code-detail-page {
  padding: 24px;
}

.promo-code-detail-page .page-header {
  margin-bottom: 24px;
}

.promo-code-detail-page .header-breadcrumb {
  margin-bottom: 16px;
}

.promo-code-detail-page .back-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--color-text-muted);
  text-decoration: none;
  font-size: 0.875rem;
  transition: color 0.15s;
}

.promo-code-detail-page .back-link:hover {
  color: var(--color-blue-600);
}

.promo-code-detail-page .header-title-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.promo-code-detail-page .header-title-info {
  display: flex;
  align-items: center;
  gap: 16px;
}

.promo-code-detail-page .page-subtitle {
  font-size: 1rem;
  color: var(--color-text-muted);
  margin-top: 4px;
}

.promo-code-detail-page .header-actions {
  display: flex;
  align-items: center;
  gap: 12px;
}

/* Detail Grid */
.detail-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
  margin-bottom: 24px;
}

.detail-card {
  background: white;
  border-radius: 8px;
  border: 1px solid var(--color-border);
  overflow: hidden;
}

.detail-card.full-width {
  grid-column: 1 / -1;
}

.detail-card .card-header {
  padding: 16px 20px;
  border-bottom: 1px solid var(--color-border);
  background: var(--color-bg-subtle);
}

.detail-card .card-title {
  margin: 0;
  font-size: 1rem;
  font-weight: 600;
  color: var(--color-text-primary);
  display: flex;
  align-items: center;
  gap: 8px;
}

.detail-card .card-content {
  padding: 20px;
}

/* Detail Rows */
.detail-row {
  display: flex;
  justify-content: space-between;
  padding: 10px 0;
  border-bottom: 1px solid var(--color-border-light);
}

.detail-row:last-child {
  border-bottom: none;
}

.detail-label {
  font-size: 0.875rem;
  color: var(--color-text-muted);
}

.detail-value {
  font-size: 0.875rem;
  color: var(--color-text-primary);
  font-weight: 500;
}

.detail-value.code-display {
  font-family: 'SF Mono', 'Monaco', 'Inconsolata', monospace;
  background: var(--color-bg-subtle);
  padding: 4px 10px;
  border-radius: 4px;
}

/* Effect Items */
.effect-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 0;
  border-bottom: 1px solid var(--color-border-light);
}

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

.effect-item svg {
  color: var(--color-purple-500);
  width: 20px;
  height: 20px;
}

.empty-effects {
  text-align: center;
  padding: 24px;
  color: var(--color-text-muted);
}

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

.redemptions-table th {
  text-align: left;
  padding: 12px 16px;
  background: var(--color-bg-light);
  border-bottom: 1px solid var(--color-border);
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--color-text-muted);
  text-transform: uppercase;
}

.redemptions-table td {
  padding: 12px 16px;
  border-bottom: 1px solid var(--color-border-light);
  font-size: 0.875rem;
}

.redemptions-table .applicant-cell {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.redemptions-table .applicant-name {
  font-weight: 500;
  color: var(--color-text-primary);
}

.redemptions-table .applicant-email {
  font-size: 0.8125rem;
  color: var(--color-text-muted);
}

.empty-state-inline {
  text-align: center;
  padding: 40px;
  color: var(--color-text-muted);
}

.empty-state-inline svg {
  width: 48px;
  height: 48px;
  margin-bottom: 12px;
  opacity: 0.5;
}

/* ========================================
   PROMO CODE MODAL STYLES
   ======================================== */

.modal-large {
  max-width: 980px;
}

.form-section {
  margin-bottom: 24px;
  padding-bottom: 24px;
  border-bottom: 1px solid var(--color-border-light);
}

.form-section:last-child {
  margin-bottom: 0;
  padding-bottom: 0;
  border-bottom: none;
}

.form-section-title {
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--color-text-primary);
  margin: 0 0 16px 0;
}

.form-section-hint {
  font-size: 0.8125rem;
  color: var(--color-text-muted);
  margin: -8px 0 16px 0;
}

.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.form-group {
  margin-bottom: 16px;
}

.form-group:last-child {
  margin-bottom: 0;
}

.form-label {
  display: block;
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--color-text-secondary);
  margin-bottom: 6px;
}

.form-label.required::after {
  content: ' *';
  color: var(--color-red-500);
}

/* Keep create-modal inputs aligned even when one label wraps longer than others in the same row. */
.promo-code-create-modal .form-row .form-group {
  display: flex;
  flex-direction: column;
}

.promo-code-create-modal .form-row .form-label {
  min-height: 2.6em;
  line-height: 1.3;
}

.form-input,
.form-select,
.form-textarea {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--color-border);
  border-radius: 6px;
  font-size: 0.875rem;
  color: var(--color-text-primary);
  background: white;
  transition: border-color 0.15s, box-shadow 0.15s;
}

.form-input:focus,
.form-select:focus,
.form-textarea:focus {
  outline: none;
  border-color: var(--color-blue-500);
  box-shadow: 0 0 0 3px var(--color-blue-100);
}

.form-hint {
  display: block;
  font-size: 0.75rem;
  color: var(--color-text-muted);
  margin-top: 4px;
}

.checkbox-group {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.checkbox-label {
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  font-size: 0.875rem;
  color: var(--color-text-primary);
}

.checkbox-label input[type="checkbox"] {
  width: 18px;
  height: 18px;
  border-radius: 4px;
  cursor: pointer;
}

@media (max-width: 900px) {
  .promo-code-create-modal .form-row .form-label {
    min-height: 0;
  }
}

/* Payment Retry Button */
.btn-retry {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.375rem 0.75rem;
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--color-primary, #2C9AF5);
  background: var(--color-blue-50, #e3f2fd);
  border: 1px solid var(--color-primary, #2C9AF5);
  border-radius: 4px;
  text-decoration: none;
  transition: all 0.15s ease;
}

.btn-retry:hover {
  color: white;
  background: var(--color-primary, #2C9AF5);
}

.row-failed {
  background: var(--color-red-50, #ffebee);
}

.action-cell {
  text-align: right;
  white-space: nowrap;
}

/* Payment Overview Card - Clickable */
.payment-overview-card.clickable {
  padding: 0;
}

.payment-overview-card.clickable:hover {
  border-color: var(--color-primary, #2C9AF5);
  background: var(--color-blue-50, #e3f2fd);
}

.overview-card-link {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1rem;
  text-decoration: none;
  color: inherit;
  width: 100%;
  height: 100%;
}

.overview-action {
  display: block;
  font-size: 0.75rem;
  color: var(--color-primary, #2C9AF5);
  margin-top: 0.25rem;
}


/* ===== Payment Detail Page ===== */
.payment-detail-page { padding: 24px; max-width: 1400px; margin: 0 auto; }
.payment-detail-page .page-header { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 24px; flex-wrap: wrap; gap: 16px; }
.payment-detail-page .header-left { display: flex; flex-direction: column; gap: 8px; }
.payment-detail-page .back-link { display: inline-flex; align-items: center; gap: 6px; color: var(--color-gray-500); text-decoration: none; font-size: 13px; }
.payment-detail-page .back-link:hover { color: var(--color-primary); }
.payment-detail-page .page-title { margin: 0; font-size: 24px; font-weight: 600; color: var(--color-navy-dark); }
.payment-detail-page .header-actions { display: flex; gap: 12px; flex-wrap: wrap; }

/* Detail Grid */
.payment-detail-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 20px; margin-bottom: 24px; }

/* Detail Cards */
.detail-card { background: var(--color-white); border: 1px solid var(--color-gray-100); border-radius: 8px; padding: 20px; }
.detail-card .card-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; padding-bottom: 12px; border-bottom: 1px solid var(--color-gray-100); }
.detail-card .card-title { margin: 0; font-size: 16px; font-weight: 600; color: var(--color-navy-dark); display: flex; align-items: center; gap: 8px; }
.detail-card .card-title svg { color: var(--color-gray-400); }

/* Payment Summary Card */
.payment-summary-card .summary-amount { margin-bottom: 20px; }
.payment-summary-card .amount-value { font-size: 32px; font-weight: 700; color: var(--color-navy-dark); margin-right: 12px; }
.payment-summary-card .summary-details { display: flex; flex-direction: column; gap: 12px; }

/* Detail Rows */
.detail-row { display: flex; justify-content: space-between; align-items: center; }
.detail-label { font-size: 13px; color: var(--color-gray-500); }
.detail-value { font-size: 14px; font-weight: 500; color: var(--color-navy-dark); }
.detail-value.monospace { font-family: 'SF Mono', Monaco, monospace; font-size: 12px; }
.text-xs { font-size: 11px; }

/* Customer Info Card */
.customer-info { display: flex; flex-direction: column; gap: 8px; }
.customer-name { font-size: 16px; font-weight: 600; color: var(--color-navy-dark); }
.customer-email { font-size: 14px; color: var(--color-gray-600); }
.customer-phone { font-size: 13px; color: var(--color-gray-500); }
.customer-info .btn-secondary { margin-top: 8px; align-self: flex-start; }

/* Payment Method Card */
.payment-method-info { display: flex; flex-direction: column; gap: 12px; }
.card-display { display: flex; align-items: center; gap: 12px; }
.card-brand { font-weight: 600; color: var(--color-navy-dark); }
.card-number { font-family: 'SF Mono', Monaco, monospace; color: var(--color-gray-600); }
.card-expiry { font-size: 13px; color: var(--color-gray-500); }

/* Plan Status Badge */
.plan-status-badge { padding: 4px 8px; border-radius: var(--radius-lg); font-size: 11px; font-weight: 500; text-transform: uppercase; }
.plan-status-badge.status-active { background: var(--color-green-50); color: var(--color-green-700); }
.plan-status-badge.status-paused { background: var(--color-yellow-50); color: var(--color-yellow-700); }
.plan-status-badge.status-completed { background: var(--color-blue-50); color: var(--color-blue-700); }
.plan-status-badge.status-cancelled,
.plan-status-badge.status-replaced { background: var(--color-red-50, #fef2f2); color: var(--color-red-700, #b91c1c); }

/* Transaction Timeline */
.transaction-timeline-card { grid-column: 1 / -1; }
.transaction-count { font-size: 13px; color: var(--color-gray-500); }

.transaction-timeline { display: flex; flex-direction: column; }
.timeline-item { display: flex; gap: 16px; }
.timeline-connector { display: flex; flex-direction: column; align-items: center; width: 40px; }
.timeline-dot { width: 32px; height: 32px; border-radius: 50%; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.timeline-dot.dot-approved { background: var(--color-green-100); color: var(--color-green-700); }
.timeline-dot.dot-declined { background: var(--color-red-100); color: var(--color-red-700); }
.timeline-dot.dot-error { background: var(--color-orange-100); color: var(--color-orange-700); }
.timeline-dot.dot-pending { background: var(--color-gray-100); color: var(--color-gray-500); }
.timeline-line { width: 2px; flex-grow: 1; background: var(--color-gray-200); min-height: 20px; }

.timeline-content { flex: 1; padding-bottom: 24px; }
.timeline-header { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.transaction-type { font-weight: 600; color: var(--color-navy-dark); font-size: 15px; }
.transaction-status { padding: 3px 8px; border-radius: var(--radius-lg); font-size: 11px; font-weight: 500; text-transform: uppercase; }
.transaction-status.status-approved { background: var(--color-green-50); color: var(--color-green-700); }
.transaction-status.status-declined { background: var(--color-red-50); color: var(--color-red-700); }
.transaction-status.status-error { background: var(--color-orange-50); color: var(--color-orange-700); }
.transaction-status.status-pending { background: var(--color-gray-100); color: var(--color-gray-600); }

.timeline-details { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 8px 24px; font-size: 13px; }
.timeline-row { display: flex; justify-content: space-between; }
.timeline-label { color: var(--color-gray-500); }
.timeline-value { color: var(--color-navy-dark); font-weight: 500; }
.timeline-value.monospace { font-family: 'SF Mono', Monaco, monospace; font-size: 12px; }

/* Timeline item type colors */
.timeline-item-sale .timeline-dot { background: var(--color-blue-100); color: var(--color-blue-700); }
.timeline-item-settle .timeline-dot { background: var(--color-green-100); color: var(--color-green-700); }
.timeline-item-void .timeline-dot { background: var(--color-yellow-100); color: var(--color-yellow-700); }
.timeline-item-refund .timeline-dot { background: var(--color-purple-100, #f3e8ff); color: var(--color-purple-700, #7c3aed); }
.timeline-item-error .timeline-dot { background: var(--color-red-100); color: var(--color-red-700); }

/* Gateway Response Details */
.gateway-response-details { margin-top: 12px; }
.gateway-response-details summary { cursor: pointer; font-size: 12px; color: var(--color-gray-500); }
.gateway-response-details summary:hover { color: var(--color-primary); }
.gateway-response-json { background: var(--color-gray-50); border: 1px solid var(--color-gray-200); border-radius: 4px; padding: 12px; font-size: 11px; font-family: 'SF Mono', Monaco, monospace; overflow-x: auto; max-height: 300px; overflow-y: auto; white-space: pre-wrap; word-break: break-all; }

/* Related Payments */
.related-payments-list { display: flex; flex-direction: column; gap: 12px; }
.related-payment-item { display: flex; justify-content: space-between; align-items: center; padding: 12px; background: var(--color-gray-50); border-radius: 6px; }
.related-payment-info { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.related-payment-ref { font-weight: 500; }
.related-payment-amount { font-weight: 600; color: var(--color-navy-dark); }

/* Activity Log */
.activity-log { display: flex; flex-direction: column; gap: 8px; max-height: 300px; overflow-y: auto; }
.activity-item { display: flex; gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--color-gray-100); font-size: 13px; }
.activity-item:last-child { border-bottom: none; }
.activity-time { color: var(--color-gray-400); white-space: nowrap; min-width: 100px; }
.activity-type { font-weight: 500; color: var(--color-navy-dark); min-width: 120px; }
.activity-description { color: var(--color-gray-600); }

/* Empty States */
.empty-state-small { padding: 16px; text-align: center; color: var(--color-gray-500); font-size: 13px; }

/* Responsive */
@media (max-width: 768px) {
  .payment-detail-page { padding: 16px; }
  .payment-detail-grid { grid-template-columns: 1fr; }
  .timeline-details { grid-template-columns: 1fr; }
  .payment-summary-card .amount-value { font-size: 24px; }
}

/* Payment reference link */
.payment-ref-link { color: var(--color-primary); text-decoration: none; }
.payment-ref-link:hover { text-decoration: underline; }


/* ===== Finance Dashboard Tabs ===== */
.finance-tabs-section { background: var(--color-white); border: 1px solid var(--color-gray-100); border-radius: 8px; overflow: hidden; margin-bottom: 24px; }
.tabs-header { display: flex; border-bottom: 1px solid var(--color-gray-200); padding: 0 4px; background: var(--color-gray-50); }
.tab-btn { display: inline-flex; align-items: center; gap: 8px; padding: 14px 20px; background: transparent; border: none; border-bottom: 3px solid transparent; margin-bottom: -1px; color: var(--color-gray-600); font-size: 14px; font-weight: 500; cursor: pointer; transition: all 0.2s; }
.tab-btn:hover { color: var(--color-navy-dark); background: var(--color-white); }
.tab-btn.active { color: var(--color-primary); border-bottom-color: var(--color-primary); background: var(--color-white); }
.tab-btn svg { width: 16px; height: 16px; }
.tab-count { display: inline-flex; align-items: center; justify-content: center; min-width: 20px; height: 20px; padding: 0 6px; background: var(--color-gray-200); color: var(--color-gray-600); font-size: 11px; font-weight: 600; border-radius: 10px; }
.tab-btn.active .tab-count { background: var(--color-primary); color: white; }
.tab-panel { padding: 20px; }
.tab-panel.hidden { display: none; }

/* Remove section header redundancy in tabs */
.finance-tabs-section .scheduled-payments-section { background: none; border: none; box-shadow: none; padding: 0; margin: 0; }
.finance-tabs-section .finance-table-container { margin-top: 16px; }
.finance-tabs-section .finance-search-row { margin-bottom: 16px; }

/* ============================================
   Enrollment Actions Styles
   ============================================ */

/* Modal Dialog (turbo-frame based) */
.modal-dialog {
  position: relative;
  background: var(--color-white);
  border-radius: var(--radius-lg);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
  width: 90%;
  max-height: 90vh;
  overflow-y: auto;
  z-index: 10000;
}

.modal-md {
  max-width: 500px;
}

.modal-lg {
  max-width: 800px;
}

.modal-title {
  margin: 0;
  font-size: 20px;
  font-weight: 600;
  color: var(--color-navy-dark);
}

.modal-body {
  padding: 24px;
}

/* Enrollment Summary Card */
.enrollment-summary-card {
  background: var(--color-gray-50);
  border-radius: var(--radius-md);
  padding: 16px;
  margin-bottom: 20px;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 8px 16px;
}

.enrollment-summary-card .summary-label {
  font-size: 12px;
  font-weight: 600;
  color: var(--color-gray-500);
  text-transform: uppercase;
}

.enrollment-summary-card .summary-value {
  font-size: 14px;
  font-weight: 500;
  color: var(--color-navy-dark);
}

/* Transfer Form Styles */
.transfer-student-header {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 24px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--color-gray-100);
}

.student-avatar {
  width: 48px;
  height: 48px;
  background: var(--color-gray-100);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-gray-500);
}

.student-name {
  font-size: 18px;
  font-weight: 600;
  color: var(--color-navy-dark);
}

.student-email {
  font-size: 14px;
  color: var(--color-gray-500);
}

/* Transfer Courses Section */
.transfer-courses-section {
  display: flex;
  align-items: stretch;
  gap: 16px;
  margin-bottom: 24px;
}

.transfer-course-card {
  flex: 1;
  background: var(--color-gray-50);
  border: 2px solid var(--color-gray-200);
  border-radius: var(--radius-md);
  padding: 16px;
}

.transfer-course-from {
  border-color: var(--color-gray-300);
}

.transfer-course-to {
  border-color: var(--color-primary);
  border-style: dashed;
}

.transfer-course-label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--color-gray-500);
  margin-bottom: 8px;
}

.transfer-course-name {
  font-size: 16px;
  font-weight: 600;
  color: var(--color-navy-dark);
  margin-bottom: 4px;
}

.transfer-course-location {
  font-size: 13px;
  color: var(--color-gray-600);
  margin-bottom: 4px;
  display: flex;
  align-items: center;
  gap: 4px;
}

.transfer-course-tuition {
  font-size: 14px;
  font-weight: 600;
  color: var(--color-primary);
}

.transfer-arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-gray-400);
  font-size: 24px;
  flex-shrink: 0;
}

/* Financial Summary Grid */
.transfer-financial-summary {
  margin-bottom: 24px;
}

.section-subtitle {
  font-size: 14px;
  font-weight: 600;
  color: var(--color-navy-dark);
  margin: 0 0 12px 0;
}

.financial-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 12px;
}

.financial-item {
  background: var(--color-gray-50);
  border-radius: var(--radius-sm);
  padding: 12px;
}

.financial-item-warning {
  background: #fff3e0;
  border-left: 3px solid #ff9800;
}

.financial-label {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  color: var(--color-gray-500);
  margin-bottom: 4px;
}

.financial-value {
  font-size: 16px;
  font-weight: 600;
  color: var(--color-navy-dark);
}

/* Overdue Options */
.overdue-options {
  margin-bottom: 24px;
}

.option-cards {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.option-card {
  display: block;
  border: 2px solid var(--color-gray-200);
  border-radius: var(--radius-md);
  padding: 16px;
  cursor: pointer;
  transition: all 0.2s;
}

.option-card:hover {
  border-color: var(--color-primary);
  background: var(--color-gray-50);
}

.option-card:has(input:checked) {
  border-color: var(--color-primary);
  background: rgba(37, 99, 235, 0.05);
}

.option-card input[type="radio"] {
  display: none;
}

.option-card-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 8px;
}

.option-radio {
  width: 20px;
  height: 20px;
  border: 2px solid var(--color-gray-400);
  border-radius: 50%;
  position: relative;
  flex-shrink: 0;
}

.option-card:has(input:checked) .option-radio {
  border-color: var(--color-primary);
}

.option-card:has(input:checked) .option-radio::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 10px;
  height: 10px;
  background: var(--color-primary);
  border-radius: 50%;
}

.option-title {
  font-size: 15px;
  font-weight: 600;
  color: var(--color-navy-dark);
  margin: 0;
}

.option-description {
  font-size: 13px;
  color: var(--color-gray-600);
  margin: 0;
  padding-left: 32px;
  line-height: 1.5;
}

/* Activity Preview */
.activity-preview {
  background: #f0f4ff;
  border-radius: var(--radius-md);
  padding: 16px;
  margin-bottom: 24px;
}

.activity-preview-content {
  background: white;
  border-radius: var(--radius-sm);
  padding: 12px;
}

.activity-event-type {
  font-weight: 600;
  color: var(--color-primary);
  margin-bottom: 8px;
}

.activity-details {
  margin: 0;
  padding-left: 20px;
  font-size: 13px;
  color: var(--color-gray-600);
}

.activity-details li {
  margin-bottom: 4px;
}

/* Enrollment Card Actions */
.enrollment-actions {
  display: flex;
  align-items: center;
  gap: 12px;
}

/* Dropdown Styles */
.dropdown {
  position: relative;
}

.btn-icon {
  background: none;
  border: none;
  padding: 8px;
  cursor: pointer;
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-gray-500);
  transition: all 0.2s;
}

.btn-icon:hover {
  background: var(--color-gray-100);
  color: var(--color-gray-700);
}

.dropdown-menu {
  display: none;
  background: white;
  border-radius: var(--radius-md);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
  min-width: 180px;
  z-index: 9999;
  padding: 8px 0;
}

.dropdown-menu.show {
  display: block;
}

.dropdown-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  font-size: 14px;
  color: var(--color-gray-700);
  text-decoration: none;
  transition: background 0.2s;
}

.dropdown-item:hover {
  background: var(--color-gray-50);
}

.dropdown-item svg {
  width: 16px;
  height: 16px;
}

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

.dropdown-item-danger:hover {
  background: #fef2f2;
}

.dropdown-divider {
  height: 1px;
  background: var(--color-gray-100);
  margin: 8px 0;
}

/* Button variants for modals */
.btn-warning {
  background: #f59e0b;
  color: white;
  border: none;
  padding: 10px 24px;
  border-radius: var(--radius-sm);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.2s;
}

.btn-warning:hover {
  background: #d97706;
}

.btn-danger {
  background: var(--color-error);
  color: white;
  border: none;
  padding: 10px 24px;
  border-radius: var(--radius-sm);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.2s;
}

.btn-danger:hover {
  background: #dc2626;
}

/* ===================================
   Email Templates Styles
   =================================== */

/* Filters Bar */
.filters-bar {
  background: var(--color-white);
  border: 1px solid var(--color-gray-200);
  border-radius: 8px;
  padding: 16px 20px;
  margin-bottom: 24px;
}

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

.filter-group {
  flex: 1;
  min-width: 150px;
  max-width: 250px;
}

.filter-group .form-control {
  width: 100%;
}

/* Form Controls */
.form-control {
  display: block;
  width: 100%;
  padding: 10px 14px;
  font-size: 14px;
  line-height: 1.5;
  color: var(--color-gray-900);
  background-color: var(--color-white);
  border: 1px solid var(--color-gray-300);
  border-radius: 6px;
  transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

.form-control:focus {
  border-color: var(--color-primary);
  outline: none;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15);
}

.form-control::placeholder {
  color: var(--color-gray-400);
}

select.form-control {
  appearance: none;
  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='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 12px;
  padding-right: 36px;
}

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 18px;
  font-size: 14px;
  font-weight: 500;
  line-height: 1;
  text-align: center;
  text-decoration: none;
  white-space: nowrap;
  vertical-align: middle;
  cursor: pointer;
  border: 1px solid transparent;
  border-radius: 6px;
  transition: all 0.15s ease-in-out;
}

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

.btn-primary:hover {
  background-color: #2563eb;
  border-color: #2563eb;
}

.btn-secondary {
  color: var(--color-gray-700);
  background-color: var(--color-white);
  border-color: var(--color-gray-300);
}

.btn-secondary:hover {
  background-color: var(--color-gray-50);
  border-color: var(--color-gray-400);
}

.btn-ghost {
  color: var(--color-gray-600);
  background-color: transparent;
  border-color: transparent;
}

.btn-ghost:hover {
  background-color: var(--color-gray-100);
  color: var(--color-gray-900);
}

.btn-sm {
  padding: 6px 10px;
  font-size: 13px;
}

.btn-danger {
  color: #fff;
  background-color: var(--color-error);
  border-color: var(--color-error);
}

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

/* Card */
.card {
  background: var(--color-white);
  border: 1px solid var(--color-gray-200);
  border-radius: 8px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

.card-header {
  padding: 16px 20px;
  border-bottom: 1px solid var(--color-gray-200);
}

.card-body {
  padding: 20px;
}

/* Table Responsive */
.table-responsive {
  overflow-x: auto;
}

/* Data Table (generic) */
.data-table {
  width: 100%;
  border-collapse: collapse;
}

.data-table thead {
  background: var(--color-gray-50);
}

.data-table th {
  padding: 12px 16px;
  text-align: left;
  font-size: 11px;
  font-weight: 600;
  color: var(--color-gray-500);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  border-bottom: 1px solid var(--color-gray-200);
}

.data-table td {
  padding: 16px;
  font-size: 14px;
  color: var(--color-gray-900);
  border-bottom: 1px solid var(--color-gray-100);
  vertical-align: middle;
}

.data-table tbody tr:hover {
  background: var(--color-gray-50);
}

.data-table .text-right {
  text-align: right;
}

/* Badges */
.badge {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  border-radius: var(--radius-lg);
}

.badge-info {
  background: #dbeafe;
  color: #1e40af;
}

.badge-success {
  background: #dcfce7;
  color: #166534;
}

.badge-secondary {
  background: var(--color-gray-100);
  color: var(--color-gray-600);
}

.badge-warning {
  background: #fef3c7;
  color: #92400e;
}

.badge-danger {
  background: #fee2e2;
  color: #991b1b;
}

/* Text Utilities */
.text-muted {
  color: var(--color-gray-500) !important;
}

.text-right {
  text-align: right !important;
}

/* Empty State */
.empty-state {
  text-align: center;
  padding: 48px 24px !important;
  color: var(--color-gray-500);
}

.empty-state p {
  margin-bottom: 16px;
}

/* Subtitle */
.subtitle {
  font-size: 14px;
  color: var(--color-gray-500);
  margin-top: 4px;
}

/* Action Buttons alignment fix */
.action-buttons {
  display: flex;
  gap: 4px;
  justify-content: flex-end;
  align-items: center;
}

.action-buttons .btn {
  padding: 8px;
}

.action-buttons .btn svg {
  width: 16px;
  height: 16px;
}

/* Email Template Show Page */
.breadcrumb {
  font-size: 13px;
  color: var(--color-gray-500);
  margin-bottom: 4px;
}

.breadcrumb a {
  color: var(--color-primary);
  text-decoration: none;
}

.breadcrumb a:hover {
  text-decoration: underline;
}

.card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 1px solid var(--color-gray-200);
}

.card-header h3 {
  margin: 0;
  font-size: 16px;
  font-weight: 600;
  color: var(--color-gray-900);
}

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

/* Form Groups */
.form-group {
  margin-bottom: 16px;
}

.form-group label {
  display: block;
  font-size: 13px;
  font-weight: 500;
  color: var(--color-gray-700);
  margin-bottom: 6px;
}

.form-group:last-child {
  margin-bottom: 0;
}

/* Button Block */
.btn-block {
  display: flex;
  width: 100%;
}

/* Utility Classes */
.p-0 { padding: 0 !important; }
.mb-3 { margin-bottom: 12px !important; }
.mb-4 { margin-bottom: 16px !important; }

/* Detail Layout */
.detail-layout {
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: 24px;
}

.detail-main {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.detail-sidebar {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.detail-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
}

.detail-item {
  display: flex;
  flex-direction: column;
}

.detail-item.full-width {
  grid-column: span 2;
}

.detail-item label {
  font-size: 12px;
  font-weight: 500;
  color: var(--color-gray-500);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 4px;
}

.detail-item p {
  margin: 0;
  color: var(--color-gray-900);
}

/* Email Preview */
.email-preview-container {
  border-top: 1px solid var(--color-gray-200);
  overflow: hidden;
  background: #fff;
}

.email-preview-header {
  background: var(--color-gray-50);
  padding: 12px 16px;
  border-bottom: 1px solid var(--color-gray-200);
}

.preview-field {
  display: flex;
  gap: 8px;
  font-size: 13px;
  margin-bottom: 4px;
}

.preview-field:last-child {
  margin-bottom: 0;
}

.preview-field .label {
  color: var(--color-gray-500);
  min-width: 60px;
}

.email-preview-body {
  height: 500px;
  background: #fff;
}

.email-preview-body iframe {
  width: 100%;
  height: 100%;
  border: none;
}

/* Variable Tags */
.variable-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.variable-tag {
  background: var(--color-gray-100);
  padding: 4px 10px;
  border-radius: 4px;
  font-size: 13px;
}

.variable-tag code {
  background: none;
  padding: 0;
}

/* Action List */
.action-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* Meta List */
.meta-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.meta-item {
  display: flex;
  justify-content: space-between;
  font-size: 13px;
}

.meta-item .label {
  color: var(--color-gray-500);
}

.meta-item .value code {
  font-size: 11px;
  background: var(--color-gray-100);
  padding: 2px 6px;
  border-radius: 3px;
}

@media (max-width: 1024px) {
  .detail-layout {
    grid-template-columns: 1fr;
  }
}

/* Template Info (index page) */
.template-info {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.template-name a {
  font-weight: 500;
  color: var(--color-gray-900);
  text-decoration: none;
}

.template-name a:hover {
  color: var(--color-primary);
}

.template-slug code {
  font-size: 11px;
  background: var(--color-gray-100);
  padding: 2px 6px;
  border-radius: 3px;
}

.template-subject {
  font-size: 12px;
}

/* ===== Course Overview Inline Editing ===== */

/* Section header with add button - title left-aligned with plus button next to it */
.course-section-card .section-header-with-action {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
  width: 100%;
  margin-bottom: 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--color-gray-200);
  position: static;
}

.course-section-card .section-header-with-action .section-heading {
  margin: 0;
  text-align: left;
  border-bottom: none;
  padding-bottom: 0;
}

/* Section header with configure button - title on left, button on right, full-width underline */
.course-section-card .section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  margin-bottom: 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--color-gray-200);
}

.course-section-card .section-header .section-heading {
  margin: 0;
  border-bottom: none;
  padding-bottom: 0;
}

/* Circular plus button for add actions (matches edit modal style) */
.btn-add-circle {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--color-gray-100);
  color: var(--color-gray-500);
  border: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  transition: background 0.15s, color 0.15s;
  flex-shrink: 0;
}

.btn-add-circle:hover {
  background: var(--color-primary);
  color: white;
}

.btn-add-circle svg {
  width: 14px;
  height: 14px;
}

/* Add containers (instructor dropdown, date input) */
.instructor-add-container,
.date-add-container {
  margin-bottom: 16px;
  padding: 12px;
  background: var(--color-gray-50);
  border-radius: 8px;
  border: 1px solid var(--color-gray-200);
}

.instructor-add-row,
.date-add-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* Instructor select dropdown - matches admin filter dropdowns */
.instructor-select {
  flex: 1;
  padding: 10px 36px 10px 12px;
  border: 1px solid var(--color-gray-200);
  border-radius: var(--radius-sm);
  font-size: 14px;
  background: var(--color-white);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23666' d='M6 9L1 4h10z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 12px;
  cursor: pointer;
  transition: border-color 0.2s;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
}

.instructor-select:focus {
  outline: none;
  border-color: var(--color-primary);
}

/* Date input */
.date-input {
  flex: 1;
  padding: 8px 12px;
  border: 1px solid var(--color-gray-200);
  border-radius: 6px;
  font-size: 14px;
  background: var(--color-white);
}

.date-input:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 2px var(--color-primary-light);
}

/* Small primary button for add actions */
.btn-primary.btn-small {
  padding: 8px 16px;
  font-size: 13px;
}

/* Instructor remove button */
.instructor-remove-btn {
  width: 24px;
  height: 24px;
  border: none;
  background: transparent;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-gray-400);
  opacity: 0;
  transition: all 0.15s;
  margin-left: auto;
  padding: 0;
}

.instructor-list-item:hover .instructor-remove-btn,
.instructor-list-item:focus-within .instructor-remove-btn,
.instructor-remove-btn:focus-visible {
  opacity: 1;
}

.instructor-remove-btn:hover {
  background: var(--color-red-100);
  color: var(--color-red-500);
}

.instructor-remove-btn svg {
  width: 14px;
  height: 14px;
}

/* Dates to omit list */
.dates-to-omit-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

/* Date badge */
.date-to-omit-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  background: var(--color-gray-100);
  border-radius: 6px;
  font-size: 13px;
  color: var(--color-gray-600);
}

/* Date remove button */
.date-remove-btn {
  width: 16px;
  height: 16px;
  border: none;
  background: transparent;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-gray-400);
  opacity: 0;
  transition: all 0.15s;
  padding: 0;
}

.date-to-omit-badge:hover .date-remove-btn,
.date-to-omit-badge:focus-within .date-remove-btn,
.date-remove-btn:focus-visible {
  opacity: 1;
}

.date-remove-btn:hover {
  background: var(--color-red-100);
  color: var(--color-red-500);
}

.date-remove-btn svg {
  width: 12px;
  height: 12px;
}

/* Avatar text small */
.course-section-card .avatar-text-small {
  font-size: 12px;
  font-weight: 600;
  color: var(--color-primary);
}

/* ===== Admin Button Standardization ===== */
/* Normalizes all button variants to compact, rounded-rectangle style within admin layout.
   Landing page and student portal buttons are unaffected. */

.admin-body .btn-primary,
.admin-body .btn-secondary,
.admin-body .btn-outline,
.admin-body .btn-create {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 38px;
  padding: 0 20px;
  font-size: 14px;
  font-weight: 500;
  line-height: 1;
  border-radius: 6px;
  cursor: pointer;
  text-decoration: none;
  border: 1px solid transparent;
  transition: all 0.2s;
}

.admin-body .btn-outline {
  background: var(--color-white);
  color: var(--color-navy-dark);
  border-color: var(--color-gray-200);
}

.admin-body .btn-primary,
.admin-body .btn-create {
  background: var(--color-primary);
  color: var(--color-white);
  border-color: var(--color-primary);
}

.admin-body .btn-primary:hover,
.admin-body .btn-create:hover {
  background: var(--color-primary-hover);
  border-color: var(--color-primary-hover);
  transform: none;
  box-shadow: none;
}

.admin-body .btn-secondary {
  background: var(--color-white);
  color: var(--color-gray-700);
  border-color: var(--color-gray-300);
}

.admin-body .btn-secondary:hover {
  background: var(--color-gray-50);
  border-color: var(--color-gray-400);
}

/* ===== Responsive Page-Shell Consistency ===== */
/* Normalize top-level page wrappers across admin, student, and landing views.
   This keeps layouts fluid and removes fixed-width page caps. */

.admin-content > :not(style):not(script):not(link):not(meta) {
  width: 100%;
  max-width: none !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  min-width: 0;
}

.student-content > :not(style):not(script):not(link):not(meta) {
  width: 100%;
  max-width: none !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  min-width: 0;
}

.admin-main,
.admin-content,
.student-main,
.student-content {
  min-width: 0;
}

.admin-content,
.student-content {
  overflow-x: hidden;
}

.landing-header-content,
.landing-container,
.landing-container-centered,
.start-page-container,
.approved-container,
.app-form-container,
.calculator-main,
.payment-main,
.documents-main,
.signing-main,
.reviewing-main,
.processing-main,
.complete-main,
.course-selector-wrapper,
.location-landing-wrapper,
.campus-landing-wrapper {
  width: 100%;
  max-width: none !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  min-width: 0;
}

@media (max-width: 1024px) {
  .admin-sidebar {
    display: none;
  }

  .admin-main {
    margin-left: 0;
  }

  .admin-header {
    padding: 14px 16px;
  }

  .admin-header .header-left {
    max-width: none;
    min-width: 0;
  }
}

@media (max-width: 768px) {
  .admin-header {
    flex-wrap: wrap;
    gap: 10px;
  }

  .admin-header .header-left {
    width: 100%;
  }

  .sparkline-container {
    width: 100%;
    min-width: 0;
    gap: 10px;
  }

  .sparkline-chart {
    flex: 1;
    width: auto;
    min-width: 0;
  }

  .header-actions {
    width: 100%;
    justify-content: flex-start;
  }

  .student-header {
    flex-wrap: wrap;
    gap: 8px;
    padding: 16px;
  }

  .student-header .header-left,
  .student-header .header-actions {
    width: 100%;
  }
}

/* ===== Questions + Document Templates Admin Polish ===== */
.questions-admin-page .subtitle,
.doc-templates-admin-page .subtitle {
  margin: 4px 0 0;
}

.questions-admin-page .header-controls {
  width: 100%;
  justify-content: space-between;
  align-items: center;
}

.questions-admin-page .search-filters {
  flex: 1;
  min-width: 0;
}

.questions-filter-form {
  width: 100%;
}

.questions-filter-row,
.doc-templates-filter-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
}

.questions-filter-row {
  flex-wrap: nowrap;
}

.questions-filter-form .search-box,
.doc-templates-filter-form .search-box {
  flex: 1 1 320px;
  min-width: 260px;
}

.questions-filter-form .filter-dropdown {
  flex: 0 0 180px;
}

.questions-filter-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-left: auto;
}

.questions-admin-page .header-actions {
  justify-content: flex-end;
}

.questions-admin-page .header-actions .btn-primary {
  white-space: nowrap;
}

@media (max-width: 1280px) {
  .questions-filter-row {
    flex-wrap: wrap;
  }

  .questions-filter-actions {
    margin-left: 0;
  }
}

.questions-filter-form .search-input,
.doc-templates-filter-form .search-input {
  width: 100%;
}

.questions-table-wrap,
.doc-templates-table-wrap {
  overflow-x: auto;
}

.questions-admin-page .terms-table,
.doc-templates-admin-page .terms-table {
  min-width: 760px;
}

.question-code,
.doc-template-code code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-weight: 600;
}

.question-text-cell {
  max-width: min(56vw, 800px);
}

.question-text-clamp {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.admin-status-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  line-height: 1.2;
}

.admin-status-pill.is-active {
  background: var(--color-success-light);
  color: var(--color-success);
}

.admin-status-pill.is-inactive {
  background: var(--color-gray-100);
  color: var(--color-gray-600);
}

.admin-crud-note {
  margin-top: 12px;
  font-size: 12px;
  color: var(--color-gray-500);
}

.questions-admin-detail-page .term-title-row,
.doc-template-detail-page .term-title-row {
  margin-bottom: 6px;
  flex-wrap: wrap;
}

.questions-detail-subtitle,
.doc-template-detail-subtitle {
  color: var(--color-gray-500);
  font-size: 13px;
}

.questions-text-block {
  margin-top: 20px;
  padding-top: 20px;
  border-top: 1px solid var(--color-gray-100);
}

.questions-text-value {
  margin-top: 8px;
  white-space: pre-wrap;
  line-height: 1.5;
}

.questions-textarea {
  min-height: 120px;
  padding: 12px 14px;
  border-radius: 8px;
  resize: vertical;
}

.questions-form-actions,
.doc-template-form-actions {
  margin-top: 24px;
  padding-top: 20px;
  border-top: 1px solid var(--color-gray-100);
}

.doc-template-label {
  font-weight: 600;
  color: var(--color-navy-dark);
}

.doc-template-meta {
  margin-top: 4px;
  font-size: 12px;
  color: var(--color-gray-500);
}

.doc-template-storage,
.doc-template-wrap {
  word-break: break-word;
}

@media (max-width: 1024px) {
  .question-text-cell {
    max-width: min(44vw, 460px);
  }
}

@media (max-width: 768px) {
  .questions-filter-form,
  .doc-templates-filter-form,
  .questions-filter-row,
  .doc-templates-filter-row {
    width: 100%;
  }

  .questions-filter-form .search-box,
  .doc-templates-filter-form .search-box {
    min-width: 100%;
    flex-basis: 100%;
  }

  .questions-filter-form .filter-dropdown,
  .doc-templates-filter-form .filter-dropdown {
    width: 100%;
  }

  .questions-filter-form .filter-select,
  .doc-templates-filter-form .filter-select {
    width: 100%;
  }

  .questions-filter-actions {
    margin-left: 0;
    width: 100%;
  }

  .questions-admin-page .terms-table,
  .doc-templates-admin-page .terms-table {
    min-width: 640px;
  }

  .question-text-cell {
    max-width: 300px;
  }

  .questions-admin-detail-page .term-detail-header,
  .doc-template-detail-page .term-detail-header,
  .doc-template-form-page .term-detail-header {
    flex-direction: column;
    gap: 16px;
    align-items: stretch;
  }

  .questions-admin-detail-page .header-actions,
  .doc-template-detail-page .header-actions,
  .doc-template-form-page .header-actions {
    width: 100%;
  }

  .questions-admin-detail-page .header-actions .btn-outline,
  .questions-admin-detail-page .header-actions .btn-primary,
  .doc-template-detail-page .header-actions .btn-outline,
  .doc-template-detail-page .header-actions .btn-primary,
  .doc-template-form-page .header-actions .btn-outline {
    flex: 1;
  }

  .questions-form-actions,
  .doc-template-form-actions {
    justify-content: flex-start;
    flex-wrap: wrap;
  }
}

/* CMT2 Payment Plans */
.cmt2-payment-plans {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.cmt2-payment-panel {
  border: 1px solid #cbd5e1;
  border-radius: 12px;
  background: #f8fafc;
  padding: 14px;
}

.cmt2-payment-panel-title {
  color: #0f172a;
  font-size: 18px;
  font-weight: 700;
}

.cmt2-payment-panel-subtitle {
  margin-top: 4px;
  color: #475569;
  font-size: 13px;
}

.cmt2-payment-preset-row {
  margin-top: 10px;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.cmt2-payment-preset-label {
  color: #475569;
  font-size: 12px;
  font-weight: 600;
}

.cmt2-payment-preset-btn {
  padding: 6px 10px;
  border-radius: 999px;
  font-size: 12px;
}

.cmt2-payment-surface-grid {
  margin-top: 12px;
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(auto-fit, minmax(360px, 1fr));
}

.cmt2-payment-surface {
  border: 1px solid #dbeafe;
  border-radius: 12px;
  background: #ffffff;
  padding: 12px;
}

.cmt2-payment-surface h4 {
  margin: 0 0 8px;
  color: #1e3a8a;
  font-size: 14px;
  font-weight: 700;
}

.cmt2-guardrail-control {
  margin-top: 8px;
  border-radius: 8px;
  padding: 4px 6px;
  transition: background 0.2s ease;
}

.cmt2-guardrail-control.cmt2-guardrail-control-changed {
  background: #f8fafc;
}

.cmt2-guardrail-group {
  margin-top: 10px;
  padding: 6px 8px 8px;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  background: #f8fafc;
}

.cmt2-guardrail-group-title {
  color: #334155;
  font-size: 12px;
  font-weight: 700;
}

.cmt2-guardrail-group-note {
  margin-top: 2px;
  color: #64748b;
  font-size: 12px;
}

.cmt2-guardrail-group .cmt2-guardrail-control {
  margin-top: 6px;
}

.cmt2-guardrail-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 4px;
}

.cmt2-guardrail-header label {
  color: #334155;
  font-size: 12px;
  font-weight: 600;
}

.cmt2-guardrail-number {
  width: 110px;
  min-width: 110px;
}

.cmt2-guardrail-range-wrap {
  position: relative;
}

.cmt2-guardrail-range {
  width: 100%;
  accent-color: #2563eb;
}

.cmt2-guardrail-baseline-marker {
  position: absolute;
  top: 50%;
  left: 0%;
  width: 2px;
  height: 16px;
  border-radius: 999px;
  background: rgba(100, 116, 139, 0.45);
  transform: translate(-50%, -50%);
  pointer-events: none;
  transition: left 0.15s ease;
}

.cmt2-guardrail-baseline-marker.is-shifted {
  background: rgba(15, 23, 42, 0.7);
}

.cmt2-control-note {
  margin-top: 6px;
  color: #64748b;
  font-size: 12px;
}

.cmt2-guardrail-inline-note {
  margin-top: 4px;
  color: #64748b;
  font-size: 11px;
}

.cmt2-plan-chip-row {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.cmt2-plan-chip {
  border: 1px solid #cbd5e1;
  border-radius: 999px;
  background: #ffffff;
  color: #334155;
  font-size: 12px;
  font-weight: 600;
  padding: 5px 10px;
  cursor: pointer;
}

.cmt2-plan-chip.active {
  border-color: #2563eb;
  background: #dbeafe;
  color: #1d4ed8;
}

.cmt2-plan-chip.baseline {
  border-style: dashed;
}

.cmt2-plan-chip.active.changed-from-baseline {
  box-shadow: inset 0 0 0 1px rgba(15, 23, 42, 0.35);
}

.cmt2-simulator-grid {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
}

.cmt2-simulator-control {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.cmt2-simulator-control label {
  color: #334155;
  font-size: 12px;
  font-weight: 600;
}

.cmt2-simulator-slider {
  margin-top: 10px;
}

.cmt2-simulator-slider-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 4px;
}

.cmt2-simulator-slider-header label {
  color: #334155;
  font-size: 12px;
  font-weight: 600;
}

.cmt2-simulator-number {
  width: 120px;
  min-width: 120px;
}

.cmt2-slider-bounds {
  display: flex;
  justify-content: space-between;
  color: #64748b;
  font-size: 11px;
  margin-top: 3px;
}

.cmt2-simulator-results {
  margin-top: 12px;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  background: #f8fafc;
  padding: 10px;
}

.cmt2-result-row,
.cmt2-risk-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 10px;
  margin-top: 6px;
  color: #334155;
  font-size: 13px;
}

.cmt2-result-row strong,
.cmt2-risk-row strong {
  color: #0f172a;
  font-weight: 700;
}

.cmt2-result-breakdown {
  margin-top: 4px;
  color: #64748b;
  font-size: 12px;
}

.cmt2-risk-meter {
  margin-top: 8px;
  width: 100%;
  height: 7px;
  background: #e2e8f0;
  border-radius: 999px;
  overflow: hidden;
}

.cmt2-risk-meter-fill {
  height: 100%;
  width: 0%;
  background: #2563eb;
  transition: width 0.2s ease;
}

.cmt2-payment-detail-drawer {
  border: 1px solid #cbd5e1;
  border-radius: 10px;
  background: #ffffff;
  padding: 0 12px 12px;
}

.cmt2-payment-detail-drawer > summary {
  cursor: pointer;
  list-style: none;
  color: #0f172a;
  font-size: 13px;
  font-weight: 700;
  padding: 12px 0 8px;
}

.cmt2-payment-detail-drawer > summary::-webkit-details-marker {
  display: none;
}

.cmt2-payment-detail-body {
  margin-top: 6px;
}

.cmt2-detail-note {
  color: #64748b;
  font-size: 12px;
}

@media (max-width: 900px) {
  .cmt2-payment-surface-grid {
    grid-template-columns: 1fr;
  }

  .cmt2-simulator-number,
  .cmt2-guardrail-number {
    width: 90px;
    min-width: 90px;
  }
}

/* ============================================================
   Associate Campus Search (Add Campus to Instructor)
   ============================================================ */

.section-heading-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}

.section-heading-row .section-heading {
  margin-bottom: 0;
}

.campus-search-panel {
  background: var(--color-gray-50, #f8f9fa);
  border: 1px solid var(--color-gray-200, #e9ecef);
  border-radius: 8px;
  padding: 12px;
  margin-bottom: 12px;
}

.campus-chips-container {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 8px;
}

.campus-chips-container:empty {
  display: none;
}

.campus-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--color-info-light, #e3f2fd);
  padding: 4px 8px 4px 10px;
  border-radius: 16px;
  font-size: 13px;
}

.campus-chip-name {
  color: var(--color-navy-dark, #0a3d62);
}

.campus-chip-remove {
  width: 16px;
  height: 16px;
  border: none;
  background: none;
  cursor: pointer;
  color: var(--color-gray-500, #6c757d);
  font-size: 14px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
}

.campus-chip-remove:hover {
  color: var(--color-red-500, #f44336);
}

.campus-search-input {
  width: 100%;
  padding: 8px 12px;
  border: 1px solid var(--color-gray-300, #dee2e6);
  border-radius: 6px;
  font-size: 14px;
  outline: none;
  box-sizing: border-box;
}

.campus-search-input:focus {
  border-color: var(--color-primary, #2196f3);
  box-shadow: 0 0 0 3px rgba(33, 150, 243, 0.15);
}

.campus-search-results {
  margin-top: 6px;
  max-height: 200px;
  overflow-y: auto;
  border-radius: 6px;
}

.campus-search-option {
  padding: 8px 12px;
  cursor: pointer;
  border-radius: 4px;
  transition: background 0.1s;
}

.campus-search-option:hover {
  background: var(--color-primary-light, #e3f2fd);
}

.campus-search-option.selected {
  background: var(--color-primary-light, #e3f2fd);
  box-shadow: inset 3px 0 0 var(--color-primary, #2196f3);
}

.campus-search-empty {
  padding: 8px 12px;
  font-size: 13px;
  color: var(--color-gray-500, #6c757d);
  font-style: italic;
}

.campus-search-actions {
  display: flex;
  gap: 8px;
  margin-top: 10px;
}

/* ================================================================
   WIZARD LAYOUT — Application 4-step Wizard
   ================================================================ */

/* Shell & Breadcrumb */
.wizard-shell {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 24px 60px;
}

.wizard-breadcrumb {
  padding: 14px 0;
  font-size: 13px;
  color: #64748b;
}
.wizard-breadcrumb strong { color: #1e293b; }
.wizard-breadcrumb .sep { margin: 0 10px; color: #cbd5e1; }

/* Two-column grid: sidebar + main */
.wizard-layout {
  display: grid;
  grid-template-columns: 260px 1fr;
  gap: 28px;
  align-items: start;
}

/* ---- Sidebar ---- */
.wizard-sidebar {
  background: #fff;
  border-radius: 14px;
  padding: 24px 20px;
  box-shadow: 0 1px 4px rgba(0,0,0,0.06);
  position: sticky;
  top: 24px;
}
.wizard-sidebar-title {
  font-size: 11px;
  font-weight: 700;
  color: #64748b;
  margin: 0 0 18px;
  text-transform: uppercase;
  letter-spacing: 0.8px;
}

/* Tracker Steps */
.wizard-tracker { display: flex; flex-direction: column; gap: 0; }

.wizard-tracker-step {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 0;
  cursor: pointer;
  opacity: 0.5;
  transition: opacity 0.2s;
}
.wizard-tracker-step.active {
  opacity: 1;
  background: #e0f7fa;
  border-radius: 8px;
  padding: 8px 10px;
  margin: 0 -10px;
}
.wizard-tracker-step.completed { opacity: 0.8; }

.tracker-indicator {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: #e2e8f0;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: background 0.2s, color 0.2s;
}
.wizard-tracker-step.active .tracker-indicator {
  background: #0891b2;
}
.wizard-tracker-step.completed .tracker-indicator {
  background: #059669;
}

.tracker-number {
  font-size: 13px;
  font-weight: 700;
  color: #94a3b8;
}
.wizard-tracker-step.active .tracker-number { color: #fff; }
.wizard-tracker-step.completed .tracker-number { color: #fff; }

.tracker-content { display: flex; flex-direction: column; }
.tracker-label {
  font-size: 13px;
  font-weight: 600;
  color: #334155;
  line-height: 1.3;
}
.wizard-tracker-step.active .tracker-label {
  color: #0891b2;
}
.tracker-percent {
  font-size: 11px;
  color: #94a3b8;
  font-weight: 500;
}
.wizard-tracker-step.active .tracker-percent {
  color: #0891b2;
}

.tracker-line {
  width: 2px;
  height: 18px;
  background: #e2e8f0;
  margin-left: 15px;
}

/* Progress section */
.wizard-progress-section {
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid #f1f5f9;
}
.wizard-progress-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}
.wizard-progress-label {
  font-size: 12px;
  font-weight: 600;
  color: #64748b;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.wizard-progress-value {
  font-size: 13px;
  font-weight: 700;
  color: #0f172a;
}
.wizard-progress-track {
  height: 6px;
  background: #e2e8f0;
  border-radius: 3px;
  overflow: hidden;
}
.wizard-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, #0e7490, #0891b2);
  border-radius: 3px;
  transition: width 0.4s ease;
}

/* Sidebar help */
.wizard-sidebar-help {
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid #f1f5f9;
  text-align: center;
}
.wizard-sidebar-help p {
  font-size: 12px;
  color: #94a3b8;
  margin: 0 0 6px;
}
.wizard-sidebar-help a {
  font-size: 13px;
  color: #0284c7;
  text-decoration: none;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

/* ---- Main Content Area ---- */
.wizard-main {
  min-width: 0;
}

/* Step container */
.wizard-step {
  background: #fff;
  border-radius: 14px;
  box-shadow: 0 1px 4px rgba(0,0,0,0.06);
  overflow: hidden;
}

/* Step Header (dark gradient banner) */
.wizard-step-header {
  background: linear-gradient(135deg, #0c2340 0%, #163a5f 100%);
  color: #fff;
  padding: 32px 36px;
  position: relative;
}
.wizard-step-header.warning {
  background: linear-gradient(135deg, #0c2340 0%, #163a5f 100%);
}

.wizard-step-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  background: rgba(255,255,255,0.12);
  padding: 5px 12px;
  border-radius: 20px;
  margin-bottom: 12px;
}
.wizard-step-badge .dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  display: inline-block;
}
.wizard-step-badge .dot.green { background: #4ade80; }
.wizard-step-badge.warning {
  background: rgba(251,191,36,0.2);
  color: #fbbf24;
}

.wizard-step-title {
  font-size: 28px;
  font-weight: 400;
  margin: 0 0 6px;
  letter-spacing: -0.3px;
  font-family: 'Fraunces', 'DM Serif Display', Georgia, serif;
  color: #fff;
}
.wizard-step-subtitle {
  font-size: 14px;
  color: rgba(255,255,255,0.7);
  margin: 0;
}

.wizard-seats-badge {
  position: absolute;
  top: 28px;
  right: 36px;
  display: flex;
  align-items: center;
  gap: 10px;
}
.seats-number {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: #f43f5e;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  font-weight: 800;
  color: #fff;
}
.seats-text {
  font-size: 12px;
  color: rgba(255,255,255,0.8);
  line-height: 1.3;
}
.seats-text small {
  font-size: 10px;
  color: rgba(255,255,255,0.5);
}

/* Step Body */
.wizard-step-body {
  padding: 32px 36px;
}

/* Section labels */
.wizard-section-label {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  color: #64748b;
  margin: 0 0 12px;
}

/* Form Grid */
.wizard-form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
.wizard-form-grid .full-width {
  grid-column: 1 / -1;
}

.wizard-field-label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: #334155;
  margin-bottom: 5px;
}

.wizard-field-input,
.wizard-field-select {
  width: 100%;
  padding: 10px 14px;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  font-size: 14px;
  font-family: inherit;
  color: #1e293b;
  background: #fff;
  box-sizing: border-box;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.wizard-field-input:focus,
.wizard-field-select:focus {
  outline: none;
  border-color: #0284c7;
  box-shadow: 0 0 0 3px rgba(2,132,199,0.12);
}
.wizard-field-input::placeholder { color: #94a3b8; }

.wizard-field-group {
  margin-bottom: 16px;
}

.wizard-optional {
  font-weight: 400;
  color: #94a3b8;
  font-size: 12px;
}

/* Opt-in */
.wizard-optin {
  display: flex;
  gap: 10px;
  margin-top: 16px;
  font-size: 12px;
  color: #64748b;
  line-height: 1.5;
}
.wizard-optin-checkbox {
  margin-top: 2px;
  flex-shrink: 0;
}

/* Consent */
.wizard-consent {
  font-size: 12px;
  color: #64748b;
  line-height: 1.6;
}
.wizard-consent-label {
  display: flex;
  gap: 10px;
  cursor: pointer;
}
.wizard-consent a { color: #0284c7; }

/* Divider */
.wizard-divider {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  color: #94a3b8;
  margin: 28px 0 16px;
  padding-top: 20px;
  display: flex;
  align-items: center;
  gap: 16px;
}
.wizard-divider::before,
.wizard-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: #e2e8f0;
}

/* Course card */
.wizard-course-card {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  padding: 16px 20px;
}
.wizard-course-info {
  display: flex;
  align-items: center;
  gap: 14px;
}
.wizard-course-icon {
  width: 44px;
  height: 44px;
  background: #e0f2fe;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
}
.wizard-course-name {
  font-size: 15px;
  font-weight: 700;
  color: #0f172a;
  margin: 0 0 3px;
}
.wizard-course-meta {
  font-size: 12px;
  color: #64748b;
  margin: 0;
  display: flex;
  align-items: center;
  gap: 6px;
}
.wizard-enrollment-badge {
  font-size: 11px;
  font-weight: 600;
  color: #059669;
  background: #ecfdf5;
  padding: 5px 12px;
  border-radius: 20px;
  display: flex;
  align-items: center;
  gap: 5px;
  white-space: nowrap;
}
.wizard-enrollment-badge .dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #059669;
  display: inline-block;
}

/* About */
.wizard-about-label {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  color: #64748b;
  margin: 24px 0 8px;
}
.wizard-about-text {
  font-size: 14px;
  color: #475569;
  line-height: 1.7;
}
.wizard-about-text p { margin: 0 0 10px; }

/* Document pills */
.wizard-docs-label {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  color: #64748b;
  margin: 24px 0 10px;
}
.wizard-doc-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.wizard-doc-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  background: #fff;
  color: #334155;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 500;
  text-decoration: none;
  transition: background 0.15s, border-color 0.15s;
}
.wizard-doc-pill:hover { background: #f8fafc; border-color: #cbd5e1; }

/* Details & Credentials grid */
.wizard-details-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-top: 20px;
}
.wizard-details-card {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  padding: 20px;
}
.wizard-details-title {
  font-size: 11px;
  font-weight: 700;
  color: #64748b;
  margin: 0 0 12px;
  text-transform: uppercase;
  letter-spacing: 0.8px;
}
.wizard-detail-list {
  list-style: none;
  padding: 0;
  margin: 0;
}
.wizard-detail-list li {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 13px;
  color: #475569;
  padding: 4px 0;
}
.wizard-detail-list li svg { color: #059669; flex-shrink: 0; margin-top: 2px; }

/* Tuition card */
.wizard-tuition-card {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: #f8fafc;
  color: #0f172a;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  padding: 20px 24px;
  margin-top: 20px;
}
.wizard-tuition-label {
  font-size: 11px;
  font-weight: 700;
  margin: 0 0 4px;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  color: #64748b;
}
.wizard-tuition-sublabel {
  font-size: 12px;
  color: #94a3b8;
  margin: 0;
  display: flex;
  align-items: center;
  gap: 4px;
}
.wizard-tuition-right {
  text-align: right;
  display: flex;
  align-items: center;
  gap: 10px;
}
.wizard-best-value {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  background: #f43f5e;
  color: #fff;
  padding: 3px 8px;
  border-radius: 4px;
}
.wizard-tuition-price {
  font-size: 26px;
  font-weight: 800;
  color: #0f172a;
}
.wizard-tuition-original {
  font-size: 14px;
  text-decoration: line-through;
  color: #94a3b8;
}

/* Step Footer */
.wizard-step-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 36px;
  border-top: 1px solid #f1f5f9;
  background: #fafbfc;
}
.wizard-footer-right {
  display: flex;
  gap: 10px;
  align-items: center;
}

.wizard-back-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  font-weight: 600;
  color: #64748b;
  background: #fff;
  border: 1px solid #e2e8f0;
  cursor: pointer;
  text-decoration: none;
  padding: 10px 20px;
  border-radius: 24px;
  transition: background 0.15s, border-color 0.15s;
}
.wizard-back-btn:hover { background: #f8fafc; border-color: #cbd5e1; color: #334155; }

.wizard-next-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  font-weight: 700;
  color: #fff;
  background: linear-gradient(135deg, #0891b2 0%, #06b6d4 100%);
  border: none;
  cursor: pointer;
  padding: 12px 24px;
  border-radius: 24px;
  transition: background 0.15s, box-shadow 0.15s;
}
.wizard-next-btn:hover { background: linear-gradient(135deg, #0e7490 0%, #0891b2 100%); box-shadow: 0 4px 12px rgba(8, 145, 178, 0.3); }

.wizard-payment-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 600;
  color: #0891b2;
  background: #fff;
  border: 2px solid #0891b2;
  cursor: pointer;
  padding: 10px 18px;
  border-radius: 24px;
  transition: background 0.15s;
}
.wizard-payment-btn:hover { background: #ecfeff; }

/* ---- Investment Card (Step 4) ---- */
.wizard-investment-card {
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  overflow: hidden;
}
.wizard-investment-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: #0c2340;
  color: #fff;
  padding: 16px 24px;
}
.wizard-investment-label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.8px;
}
.wizard-investment-total {
  font-size: 22px;
  font-weight: 800;
}
.wizard-investment-rows {
  padding: 4px 0;
}
.wizard-investment-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 24px;
  font-size: 14px;
  color: #334155;
  border-bottom: 1px solid #f1f5f9;
}
.wizard-investment-row:last-child { border-bottom: none; }
.wizard-investment-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 24px;
  background: #f8fafc;
  border-top: 1px solid #e2e8f0;
  font-size: 15px;
}

/* ---- Payment Options (Step 4) ---- */
.wizard-payment-options {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.wizard-payment-option {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 20px;
  border: 2px solid #e2e8f0;
  border-radius: 12px;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
}
.wizard-payment-option:hover { border-color: #94a3b8; }
.wizard-payment-option.selected {
  border-color: #0891b2;
  background: #ecfeff;
}
.wizard-payment-radio { flex-shrink: 0; }
.wizard-payment-option-content { flex: 1; }
.wizard-payment-option-title {
  font-size: 15px;
  font-weight: 700;
  color: #0f172a;
  margin-bottom: 2px;
}
.wizard-payment-option-content p {
  font-size: 13px;
  color: #64748b;
  margin: 0;
}
.wizard-payment-option-content small {
  font-size: 12px;
  color: #94a3b8;
}
.wizard-best-value-inline {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  background: #f43f5e;
  color: #fff;
  padding: 2px 6px;
  border-radius: 4px;
  margin-left: 8px;
  vertical-align: middle;
}
.wizard-payment-chevron {
  color: #94a3b8;
  flex-shrink: 0;
}

/* ---- Upload Area ---- */
.wizard-upload-area {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 20px;
  border: 2px dashed #cbd5e1;
  border-radius: 10px;
  background: #f8fafc;
  position: relative;
}
.wizard-upload-icon {
  color: #94a3b8;
}
.wizard-upload-area strong {
  font-size: 14px;
  color: #334155;
}
.wizard-upload-area p {
  font-size: 12px;
  color: #94a3b8;
  margin: 2px 0 0;
}
.wizard-upload-input {
  position: absolute;
  inset: 0;
  opacity: 0;
  cursor: pointer;
}
/* Uploaded state */
.wizard-upload-area.uploaded {
  border: 2px solid #059669;
  border-style: solid;
  background: #ecfdf5;
}
.wizard-upload-area.uploaded .wizard-upload-icon {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: #059669;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.wizard-upload-area.uploaded strong {
  color: #065f46;
}
.wizard-upload-area.uploaded p {
  color: #6b7280;
}

.wizard-browse-btn {
  margin-left: auto;
  font-size: 13px;
  font-weight: 600;
  color: #0284c7;
  background: #f0f9ff;
  border: 1px solid #bae6fd;
  padding: 8px 16px;
  border-radius: 8px;
  cursor: pointer;
  position: relative;
  z-index: 1;
}
.wizard-browse-btn:hover { background: #e0f2fe; }

/* ---- Slider ---- */
.wizard-slider {
  width: 100%;
  -webkit-appearance: none;
  appearance: none;
  height: 6px;
  background: #e2e8f0;
  border-radius: 3px;
  outline: none;
}
.wizard-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 20px;
  height: 20px;
  background: #0c2340;
  border-radius: 50%;
  cursor: pointer;
}
.wizard-slider::-moz-range-thumb {
  width: 20px;
  height: 20px;
  background: #0c2340;
  border-radius: 50%;
  cursor: pointer;
  border: none;
}

/* ================================================================
   PAYMENT MODAL (shared between landing & application wizard)
   ================================================================ */
.payment-modal-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.45);
  z-index: 1000;
  align-items: center;
  justify-content: center;
  padding: 24px;
}
.payment-modal-overlay.open { display: flex; }

/* Admin payment action modal — uses .hidden class (not .open), so override the
   display:none base rule above which is meant for landing/wizard modals only. */
#payment-action-modal { display: flex; }
#payment-action-modal.hidden { display: none; }

.payment-modal {
  background: #fff;
  border-radius: 16px;
  width: 100%;
  max-width: 680px;
  max-height: 90vh;
  overflow-y: auto;
  box-shadow: 0 20px 60px rgba(0,0,0,0.2);
  animation: modalSlideIn 0.25s ease;
}

@keyframes modalSlideIn {
  from { transform: translateY(20px); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}

.payment-modal-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding: 24px 28px 16px;
  border-bottom: 1px solid #f1f5f9;
}
.payment-modal-header h2 {
  font-size: 20px;
  font-weight: 700;
  color: #0f172a;
  margin: 0;
}
.payment-modal-header p {
  font-size: 13px;
  color: #64748b;
  margin: 4px 0 0;
}
.payment-modal-close {
  background: none;
  border: none;
  font-size: 24px;
  color: #94a3b8;
  cursor: pointer;
  padding: 0;
  line-height: 1;
}
.payment-modal-close:hover { color: #475569; }

/* Tuition banner */
.payment-modal-tuition {
  background: linear-gradient(135deg, #0c2340 0%, #163a5f 100%);
  color: #fff;
  padding: 20px 28px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.payment-modal-tuition-label {
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: rgba(255,255,255,0.7);
  margin-bottom: 4px;
}
.payment-modal-tuition-amount {
  font-size: 28px;
  font-weight: 800;
}
.payment-modal-tuition-original {
  font-size: 16px;
  text-decoration: line-through;
  color: rgba(255,255,255,0.5);
  margin-left: 10px;
}
.payment-modal-save {
  font-size: 11px;
  font-weight: 700;
  background: #059669;
  color: #fff;
  padding: 4px 10px;
  border-radius: 6px;
  margin-left: 12px;
}
.payment-modal-countdown {
  text-align: right;
}
.payment-modal-earlydate {
  font-size: 12px;
  color: rgba(255,255,255,0.7);
  display: flex;
  align-items: center;
  gap: 4px;
  margin-bottom: 4px;
}

/* Payment Option Cards */
.payment-modal-options {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  padding: 24px 28px;
}
.payment-option-card {
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  padding: 18px;
  text-align: center;
  position: relative;
}
.payment-option-card.highlight {
  border-color: #059669;
  background: #f0fdf4;
}
.payment-option-tag {
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  padding: 3px 8px;
  border-radius: 4px;
  display: inline-block;
  margin-bottom: 8px;
}
.payment-option-tag.best-value { background: #059669; color: #fff; }
.payment-option-tag.affordable { background: #0284c7; color: #fff; }
.payment-option-card h3 {
  font-size: 15px;
  font-weight: 700;
  color: #0f172a;
  margin: 0 0 6px;
}
.payment-option-card p {
  font-size: 13px;
  color: #64748b;
  margin: 0;
}
.fee-note {
  font-size: 10px;
  color: #94a3b8;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  display: block;
  margin-top: 6px;
}

/* Spread message */
.payment-modal-spread {
  padding: 20px 28px 24px;
  border-top: 1px solid #f1f5f9;
  text-align: center;
}
.payment-modal-spread h4 {
  font-size: 14px;
  font-weight: 700;
  color: #0f172a;
  margin: 0 0 6px;
}
.payment-modal-spread p {
  font-size: 13px;
  color: #64748b;
  line-height: 1.6;
  margin: 0;
}

/* ---- Plan Builder: Frequency Toggle ---- */
.plan-frequency-toggle {
  display: flex;
  gap: 8px;
}
.plan-freq-btn {
  flex: 1;
  padding: 12px 16px;
  border: 2px solid #e2e8f0;
  border-radius: 10px;
  background: #fff;
  font-size: 14px;
  font-weight: 600;
  color: #64748b;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s, color 0.15s;
  text-align: center;
}
.plan-freq-btn:hover { border-color: #94a3b8; }
.plan-freq-btn.active {
  border-color: #0f172a;
  background: #0c2340;
  color: #fff;
}

/* ---- Plan Builder: Calendar ---- */
.plan-calendar {
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  overflow: hidden;
}
.plan-calendar-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 16px;
  background: #f8fafc;
}
.plan-cal-nav {
  background: none;
  border: none;
  font-size: 16px;
  color: #64748b;
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 4px;
}
.plan-cal-nav:hover { background: #e2e8f0; }
.plan-calendar-days {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  text-align: center;
  font-size: 11px;
  font-weight: 600;
  color: #94a3b8;
  padding: 8px 12px 4px;
}
.plan-calendar-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  text-align: center;
  padding: 4px 12px 12px;
  gap: 2px;
}
.calendar-day {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  margin: 0 auto;
  font-size: 13px;
  border-radius: 50%;
  border: none;
  background: none;
  cursor: pointer;
  color: #334155;
  transition: background 0.15s, color 0.15s;
}
.calendar-day:hover { background: #f1f5f9; }
.calendar-day.today {
  font-weight: 700;
  color: #0284c7;
}
.calendar-day.selected {
  background: #0c2340;
  color: #fff;
}
.calendar-day.past {
  color: #cbd5e1;
  cursor: default;
}
.calendar-day.empty {
  cursor: default;
}

/* ---- Plan Builder: Due Today ---- */
.plan-due-today {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: #f0fdf4;
  border: 1px solid #bbf7d0;
  border-radius: 10px;
  padding: 16px 20px;
  margin-top: 20px;
}
.plan-due-today strong {
  font-size: 15px;
  color: #0f172a;
}
.plan-due-today p {
  font-size: 12px;
  color: #64748b;
  margin: 2px 0 0;
}
.plan-due-amount {
  font-size: 24px;
  font-weight: 800;
  color: #059669;
}

/* Monthly Payment display in plan modal */
.plan-monthly-payment {
  font-size: 13px;
  color: #64748b;
  margin-top: 8px;
}

/* ================================================================
   WIZARD RESPONSIVE
   ================================================================ */
@media (max-width: 900px) {
  .wizard-layout {
    grid-template-columns: 1fr;
  }
  .wizard-sidebar {
    position: static;
    order: -1;
  }
  .wizard-step-header {
    padding: 24px 20px;
  }
  .wizard-step-body {
    padding: 24px 20px;
  }
  .wizard-step-footer {
    padding: 14px 20px;
  }
  .wizard-form-grid {
    grid-template-columns: 1fr;
  }
  .wizard-details-grid {
    grid-template-columns: 1fr;
  }
  .wizard-seats-badge {
    display: none;
  }
  .payment-modal-options {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 600px) {
  .wizard-shell { padding: 0 12px 40px; }
  .wizard-course-card { flex-direction: column; align-items: flex-start; gap: 10px; }
  .wizard-tuition-card { flex-direction: column; align-items: flex-start; gap: 10px; }
  .wizard-tuition-right { text-align: left; }
}

/* ================================================================
   WIZARD MOBILE STICKY PROGRESS + FOOTER
   ================================================================ */

/* Hidden by default on desktop */
.wizard-mobile-progress {
  display: none;
}

@media (max-width: 900px) {
  /* ---- Mobile sticky progress bar at top ---- */
  .wizard-mobile-progress {
    display: block;
    position: sticky;
    top: 0;
    z-index: 100;
    background: #fff;
    padding: 12px 16px 0;
    border-bottom: 1px solid #e2e8f0;
    margin: 0 -12px;
  }
  .wizard-mobile-progress-text {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: #334155;
    margin-bottom: 10px;
  }
  .wizard-mobile-step-label {
    font-weight: 700;
    color: #0f172a;
  }
  .wizard-mobile-step-sep {
    color: #94a3b8;
  }
  .wizard-mobile-step-name {
    color: #475569;
    font-weight: 500;
  }
  .wizard-mobile-progress-track {
    height: 3px;
    background: #e2e8f0;
    border-radius: 2px;
    overflow: hidden;
  }
  .wizard-mobile-progress-fill {
    height: 100%;
    background: linear-gradient(90deg, #10b981, #059669);
    border-radius: 2px;
    transition: width 0.3s ease;
  }

  /* ---- Hide full sidebar tracker on mobile ---- */
  .wizard-sidebar {
    display: none;
  }

  /* ---- Sticky footer buttons on mobile ---- */
  .wizard-step-footer,
  .start-footer {
    position: sticky;
    bottom: 0;
    z-index: 99;
    background: #fff;
    box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.06);
    border-top: 1px solid #e2e8f0;
    margin: 0 -20px;
    padding: 14px 20px;
  }
  /* start page footer needs its own margin offset */
  .start-footer {
    margin: 0;
    border-radius: 0 0 16px 16px;
  }
}

@media (max-width: 600px) {
  .wizard-mobile-progress {
    margin: 0 -12px;
    padding: 10px 12px 0;
  }
  .wizard-step-footer {
    margin: 0 -16px;
    padding: 12px 16px;
  }
}

/* ================================================================
   CHECKOUT PAGE
   ================================================================ */
.checkout-shell {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 24px 60px;
}

/* Dark hero header */
.checkout-hero {
  background: linear-gradient(135deg, #0c2340 0%, #163a5f 100%);
  color: #fff;
  padding: 32px 36px;
  border-radius: 14px;
  margin-bottom: 24px;
}
.checkout-hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  background: rgba(255,255,255,0.12);
  padding: 5px 12px;
  border-radius: 20px;
  margin-bottom: 12px;
}
.checkout-hero-badge .dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #4ade80;
  display: inline-block;
}

.checkout-title {
  font-size: 28px;
  font-weight: 400;
  color: #fff;
  margin: 0 0 6px;
  font-family: 'Fraunces', 'DM Serif Display', Georgia, serif;
}
.checkout-subtitle {
  font-size: 14px;
  color: rgba(255,255,255,0.7);
  margin: 0;
}

.checkout-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  align-items: start;
}

.checkout-card {
  background: #fff;
  border-radius: 14px;
  box-shadow: 0 1px 4px rgba(0,0,0,0.06);
  overflow: hidden;
  margin-bottom: 20px;
}
.checkout-card-header {
  font-size: 14px;
  font-weight: 700;
  color: #0f172a;
  padding: 16px 24px;
  border-bottom: 1px solid #f1f5f9;
  background: #f8fafc;
}
.checkout-card-header.dark {
  background: linear-gradient(135deg, #0c2340 0%, #163a5f 100%);
  color: #fff;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.checkout-card-brands {
  display: flex;
  gap: 6px;
}
.checkout-card-brand {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 9px;
  font-weight: 800;
  padding: 3px 8px;
  border-radius: 4px;
  border: 1px solid rgba(255,255,255,0.3);
  color: #fff;
  letter-spacing: 0.5px;
}
.checkout-card-body {
  padding: 20px 24px;
}

/* Info rows */
.checkout-info-row {
  display: flex;
  justify-content: space-between;
  padding: 8px 0;
  font-size: 14px;
  border-bottom: 1px solid #f8fafc;
}
.checkout-info-row:last-child { border-bottom: none; }
.checkout-info-label { color: #64748b; }
.checkout-info-value { font-weight: 600; color: #0f172a; }

/* Fee rows */
.checkout-fee-row {
  display: flex;
  justify-content: space-between;
  padding: 10px 0;
  font-size: 14px;
  color: #334155;
  border-bottom: 1px solid #f1f5f9;
}
.checkout-fee-row:last-child { border-bottom: none; }
.checkout-fee-row.savings { color: #059669; }
.checkout-fee-row.small { font-size: 13px; color: #64748b; padding: 6px 0; }
.checkout-fee-total {
  display: flex;
  justify-content: space-between;
  padding: 14px 0 10px;
  border-top: 2px solid #e2e8f0;
  margin-top: 4px;
  font-size: 16px;
  font-weight: 800;
  color: #0f172a;
}

.checkout-plan-summary {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid #f1f5f9;
}
.checkout-plan-note {
  font-size: 12px;
  font-weight: 700;
  color: #0284c7;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin: 0 0 8px;
}

/* Payment form */
.checkout-secure-notice {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: #64748b;
  background: #f8fafc;
  padding: 10px 14px;
  border-radius: 8px;
  margin-bottom: 20px;
}

.checkout-form-fields {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.checkout-field-group {
  display: flex;
  flex-direction: column;
}

.checkout-field-row {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 12px;
}

.checkout-authorize {
  margin-top: 16px;
  padding: 12px 14px;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  background: #f8fafc;
}
.checkout-authorize-label {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  font-weight: 600;
  color: #0f172a;
  cursor: pointer;
}

.checkout-security {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: #94a3b8;
  margin-top: 14px;
  justify-content: center;
}
.checkout-security-sep { color: #cbd5e1; }

.checkout-course-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
}
.checkout-course-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  font-weight: 600;
  color: #0891b2;
  background: #ecfeff;
  padding: 5px 12px;
  border-radius: 20px;
  border: 1px solid #cffafe;
}
.checkout-ssl-notice {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 12px 16px;
  background: #ecfdf5;
  border: 1px solid #a7f3d0;
  border-radius: 10px;
  margin-top: 16px;
  font-size: 13px;
  color: #065f46;
  line-height: 1.5;
}
.checkout-ssl-notice strong { color: #047857; }

.checkout-submit-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  padding: 16px 24px;
  margin-top: 16px;
  background: linear-gradient(135deg, #059669, #10b981);
  color: #fff;
  border: none;
  border-radius: 24px;
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.15s, box-shadow 0.15s;
}
.checkout-submit-btn:hover { background: linear-gradient(135deg, #047857, #059669); box-shadow: 0 4px 12px rgba(5, 150, 105, 0.3); }
.checkout-submit-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.checkout-back-link {
  text-align: center;
  margin-top: 12px;
}
.checkout-back-link a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  font-size: 14px;
  color: #64748b;
  text-decoration: none;
  width: 100%;
  padding: 12px;
  border: 1px solid #e2e8f0;
  border-radius: 24px;
  transition: background 0.15s;
}
.checkout-back-link a:hover { background: #f8fafc; color: #0f172a; }

@media (max-width: 768px) {
  .checkout-grid { grid-template-columns: 1fr; }
  .checkout-field-row { grid-template-columns: 1fr; }
}