/*
 * 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.
 */

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

body {
  font-family: 'Montserrat', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  line-height: 1.6;
  color: #333;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

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

::-webkit-scrollbar-track {
  background: #f5f5f5;
  border-radius: 5px;
}

::-webkit-scrollbar-thumb {
  background: #d0d0d0;
  border-radius: 5px;
  border: 2px solid #f5f5f5;
}

::-webkit-scrollbar-thumb:hover {
  background: #b0b0b0;
}

/* 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 */
.region-icon-badge iconify-icon,
.location-icon-box iconify-icon,
.location-icon-inner,
.course-icon iconify-icon,
.term-icon iconify-icon { width: 20px; height: 20px; }

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

.region-header-icon iconify-icon,
.location-header-icon iconify-icon { width: 32px; height: 32px; }

.top-location-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: #4caf50; }
.location-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: #f5f7fa;
  margin: 0;
  padding: 0;
}

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

.admin-sidebar {
  width: 250px;
  background: #0a3d62;
  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: white;
  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;
  padding: 20px 0;
}

.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(33, 150, 243, 0.2);
  color: white;
  border-left: 3px solid #2196f3;
}

.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;
}

.support-title {
  font-size: 13px;
  margin-bottom: 8px;
}

.btn-support {
  width: 100%;
  padding: 10px;
  background: #2196f3;
  color: white;
  border: none;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.2s;
}

.btn-support:hover {
  background: #1976d2;
}

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

.user-avatar {
  width: 32px;
  height: 32px;
  background: #ccc;
  border-radius: 50%;
}

.user-avatar-circle {
  width: 36px;
  height: 36px;
  background: #2196f3;
  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;
}

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

.admin-header {
  background: white;
  padding: 16px 32px;
  border-bottom: 1px solid #e0e0e0;
  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: #666;
  letter-spacing: 0.3px;
}

.sparkline-period {
  font-size: 10px;
  color: #999;
}

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

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

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

.sparkline-total {
  font-size: 18px;
  font-weight: 600;
  color: #333;
  letter-spacing: -0.5px;
}

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

.sparkline-trend.trend-up {
  color: #2e7d32;
  background: rgba(76, 175, 80, 0.12);
}

.sparkline-trend.trend-down {
  color: #c62828;
  background: rgba(244, 67, 54, 0.1);
}

.page-title {
  font-size: 24px;
  font-weight: 600;
  color: #1a1a1a;
}

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

.user-dropdown {
  padding: 8px 16px;
  background: #f5f5f5;
  border-radius: 6px;
  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: white;
  padding: 24px;
  border-radius: 8px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.stat-label {
  font-size: 14px;
  color: #666;
  margin-bottom: 8px;
}

.stat-value {
  font-size: 32px;
  font-weight: 700;
  color: #1a1a1a;
  margin-bottom: 8px;
}

.stat-change {
  font-size: 13px;
  font-weight: 500;
}

.stat-change.positive {
  color: #4caf50;
}

.stat-change.warning {
  color: #ff9800;
}

.stat-change.neutral {
  color: #666;
}

.section-title {
  font-size: 18px;
  font-weight: 600;
  color: #1a1a1a;
  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: white;
  padding: 24px;
  border-radius: 8px;
  border: 2px dashed #e0e0e0;
  display: flex;
  align-items: center;
  gap: 16px;
  cursor: pointer;
  transition: all 0.2s;
  font-size: 15px;
  font-weight: 500;
  color: #333;
}

.action-card:hover {
  border-color: #2196f3;
  background: #f8fbff;
}

.action-icon {
  width: 24px;
  height: 24px;
  color: #2196f3;
}

.activity-list {
  background: white;
  border-radius: 8px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.activity-item {
  padding: 20px 24px;
  border-bottom: 1px solid #f0f0f0;
  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: #e8f5e9; color: #4caf50; }
.activity-icon.icon-enrollment { background: #e3f2fd; color: #2196f3; }

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

.activity-content {
  flex: 1;
}

.activity-title {
  font-size: 15px;
  font-weight: 600;
  color: #1a1a1a;
  margin-bottom: 4px;
}

.activity-description {
  font-size: 14px;
  color: #666;
}

.activity-time {
  font-size: 13px;
  color: #999;
  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: white;
  border-radius: 8px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  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: #1a1a1a;
  margin: 0;
}

.chart-subtitle {
  font-size: 12px;
  color: #999;
}

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

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

/* ===== Landing Page Styles ===== */
.landing-body {
  background: #f5f7fa;
  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: -1;
  filter: grayscale(0.8);
  opacity: 0.03;
  transition: all 2s ease-in-out;
  pointer-events: none;
}

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

.landing-header {
  background: 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: #0a3d62;
  border-radius: 50%;
}

.landing-logo-text {
  font-size: 18px;
  font-weight: 600;
  color: #1a1a1a;
}

.course-id {
  font-size: 14px;
  color: #666;
}

.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: white;
  border-radius: 12px;
  padding: 40px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
}

.course-location-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: #666;
  font-size: 13px;
  background: #f5f7fa;
  padding: 6px 14px;
  border-radius: 20px;
  margin-bottom: 16px;
  font-weight: 500;
}

.course-location-badge iconify-icon {
  color: #2196f3;
}

.course-title {
  font-size: 36px;
  font-weight: 700;
  color: #1a1a1a;
  margin-bottom: 16px;
  line-height: 1.2;
}

.course-meta {
  font-size: 14px;
  color: #666;
  margin-bottom: 28px;
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.course-meta iconify-icon {
  color: #2196f3;
}

.meta-separator {
  color: #ddd;
}

.seats-available {
  display: inline-flex;
  align-items: center;
  gap: 16px;
  background: linear-gradient(135deg, #e3f2fd 0%, #bbdefb 100%);
  padding: 20px 28px;
  border-radius: 12px;
  margin-bottom: 32px;
  border: 2px solid #90caf9;
}

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

.seats-icon iconify-icon {
  color: #2196f3;
}

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

.seats-number {
  font-size: 32px;
  font-weight: 700;
  color: #1976d2;
  line-height: 1;
  margin-bottom: 4px;
}

.seats-label {
  font-size: 12px;
  color: #1976d2;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.section-heading {
  font-size: 20px;
  font-weight: 600;
  color: #1a1a1a;
  margin-bottom: 16px;
  margin-top: 32px;
}

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

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

.feature-list li {
  padding: 8px 0;
  padding-left: 8px;
  font-size: 15px;
  color: #333;
}

.feature-list li:before {
  content: "• ";
  color: #1976d2;
  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: #f8f9fa;
  border: 1px solid #e0e0e0;
  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: #e3f2fd;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.feature-icon-circle iconify-icon {
  color: #2196f3;
}

.feature-icon-circle.icon-purple {
  background: #f3e5f5;
}

.feature-icon-circle.icon-purple iconify-icon {
  color: #9c27b0;
}

.feature-icon-circle.icon-green {
  background: #e8f5e9;
}

.feature-icon-circle.icon-green iconify-icon {
  color: #4caf50;
}

.feature-icon-circle.icon-orange {
  background: #fff3e0;
}

.feature-icon-circle.icon-orange iconify-icon {
  color: #ff9800;
}

.feature-card-title {
  font-size: 14px;
  font-weight: 600;
  color: #1a1a1a;
}

.feature-card-desc {
  font-size: 12px;
  color: #666;
  line-height: 1.4;
}

.curriculum-note {
  font-size: 14px;
  color: #666;
  line-height: 1.6;
}

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

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

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

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

.pricing-label {
  flex: 1;
}

.pricing-title {
  font-size: 15px;
  font-weight: 600;
  color: #1a1a1a;
  margin-bottom: 6px;
}

.pricing-dates {
  font-size: 12px;
  color: #999;
}

.pricing-amount {
  font-size: 28px;
  font-weight: 700;
  color: #2196f3;
}

.application-card {
  background: white;
  border-radius: 12px;
  padding: 32px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
  position: sticky;
  top: 24px;
  border: 1px solid #e0e0e0;
}

.application-title {
  font-size: 20px;
  font-weight: 600;
  color: #1a1a1a;
  margin-bottom: 8px;
}

.application-subtitle {
  font-size: 14px;
  color: #666;
  margin-bottom: 24px;
  line-height: 1.5;
}

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

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

.form-input {
  width: 100%;
  padding: 14px 16px;
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  font-size: 14px;
  transition: all 0.2s;
  font-family: 'Montserrat', sans-serif;
}

.form-input:focus {
  outline: none;
  border-color: #2196f3;
  box-shadow: 0 0 0 3px rgba(33, 150, 243, 0.1);
}

.btn-primary {
  width: 100%;
  padding: 16px;
  background: linear-gradient(135deg, #2196f3 0%, #1976d2 100%);
  color: white;
  border: none;
  border-radius: 8px;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s;
  box-shadow: 0 4px 12px rgba(33, 150, 243, 0.3);
}

.btn-primary:hover {
  background: linear-gradient(135deg, #1976d2 0%, #1565c0 100%);
  box-shadow: 0 6px 16px rgba(33, 150, 243, 0.4);
  transform: translateY(-1px);
}

.help-section {
  margin-top: 24px;
  padding-top: 24px;
  border-top: 1px solid #f0f0f0;
  text-align: center;
}

.help-text {
  font-size: 13px;
  color: #666;
  margin-bottom: 8px;
}

.help-link {
  color: #2196f3;
  text-decoration: none;
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
}

.help-link:hover {
  text-decoration: underline;
  color: #1976d2;
}

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

/* 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;
  }

  .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: #666;
  width: 18px;
  height: 18px;
}

.search-input {
  padding: 10px 12px 10px 36px;
  border: 1px solid #ddd;
  border-radius: 6px;
  font-size: 14px;
  width: 300px;
  transition: border-color 0.2s;
}

.search-input:focus {
  outline: none;
  border-color: #2196f3;
}

.btn-filters {
  padding: 10px 16px;
  border: 1px solid #ddd;
  background: white;
  border-radius: 6px;
  font-size: 14px;
  cursor: pointer;
  transition: all 0.2s;
}

.btn-filters:hover {
  background: #f5f5f5;
  border-color: #2196f3;
}

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

.btn-secondary {
  padding: 10px 16px;
  border: 1px solid #ddd;
  background: white;
  border-radius: 6px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s;
  display: flex;
  align-items: center;
  gap: 6px;
}

.btn-secondary:hover {
  background: #f5f5f5;
}

.students-count {
  font-size: 14px;
  color: #666;
  margin-bottom: 16px;
}

.students-table-container {
  background: white;
  border-radius: 8px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  overflow: hidden;
}

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

.students-table thead {
  background: #f8f9fa;
  border-bottom: 2px solid #e0e0e0;
}

.students-table th {
  padding: 12px 16px;
  text-align: left;
  font-size: 11px;
  font-weight: 600;
  color: #666;
  letter-spacing: 0.5px;
}

.student-row {
  border-bottom: 1px solid #f0f0f0;
  cursor: pointer;
  transition: background 0.2s;
}

.student-row:hover {
  background: #f8fbff;
}

.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: #e0e0e0;
}

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

.student-name {
  font-weight: 500;
  color: #1a1a1a;
  font-size: 14px;
}

.student-email {
  font-size: 13px;
  color: #666;
}

.course-name {
  font-size: 14px;
  color: #333;
}

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

.status-active {
  background: #e8f5e9;
  color: #2e7d32;
}

.status-graduated {
  background: #e3f2fd;
  color: #1976d2;
}

.status-withdrawn {
  background: #fce4ec;
  color: #c2185b;
}

.balance-amount {
  font-size: 14px;
  font-weight: 500;
  color: #d32f2f;
}

.balance-warning {
  color: #f57c00;
}

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

.payment-onfile {
  color: #2e7d32;
}

.payment-none {
  color: #666;
}

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

.btn-actions {
  background: none;
  border: none;
  font-size: 20px;
  cursor: pointer;
  padding: 4px 8px;
  color: #666;
  transition: color 0.2s;
}

.btn-actions:hover {
  color: #2196f3;
}

/* 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: white;
  border-radius: 8px;
  padding: 24px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  position: sticky;
  top: 24px;
}

.profile-header {
  display: flex;
  align-items: center;
  gap: 16px;
  padding-bottom: 20px;
  border-bottom: 1px solid #f0f0f0;
  margin-bottom: 20px;
}

.profile-avatar-large {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: #e0e0e0;
}

.profile-info {
  flex: 1;
}

.profile-name {
  font-size: 20px;
  font-weight: 600;
  color: #1a1a1a;
  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: #333;
}

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

.detail-text {
  flex: 1;
}

.progress-steps {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 20px 0;
  border-top: 1px solid #f0f0f0;
  border-bottom: 1px solid #f0f0f0;
  margin-bottom: 20px;
  position: relative;
}

.progress-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  flex: 1;
  position: relative;
}

.progress-step .step-line {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: #e0e0e0;
  border: 3px solid #e0e0e0;
}

.progress-step.completed .step-line {
  background: #2196f3;
  border-color: #2196f3;
}

.progress-step.active .step-line {
  background: white;
  border-color: #2196f3;
}

.step-label {
  font-size: 11px;
  color: #666;
  text-align: center;
}

.progress-step.completed .step-label {
  color: #1a1a1a;
  font-weight: 500;
}

.demo-badge {
  position: absolute;
  top: -10px;
  right: 0;
  background: #ff9800;
  color: white;
  font-size: 10px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 10px;
}

.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: 6px;
  background: #f8f9fa;
}

.card-balance {
  background: #ffebee;
}

.card-payment {
  background: #e8f5e9;
}

.card-documents {
  background: #e3f2fd;
}

.card-activities {
  background: #fff3e0;
}

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

.card-content {
  flex: 1;
}

.card-label {
  font-size: 12px;
  color: #666;
  margin-bottom: 4px;
}

.card-value {
  font-size: 18px;
  font-weight: 600;
  color: #1a1a1a;
}

.student-content {
  background: white;
  border-radius: 8px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  overflow: hidden;
}

.student-tabs {
  display: flex;
  border-bottom: 2px solid #f0f0f0;
  padding: 0 24px;
  gap: 8px;
}

.tab-button {
  padding: 14px 20px;
  border: none;
  background: none;
  font-size: 14px;
  font-weight: 500;
  color: #666;
  cursor: pointer;
  border-bottom: 3px solid transparent;
  margin-bottom: -2px;
  transition: all 0.2s;
}

.tab-button.active {
  color: #2196f3;
  border-bottom-color: #2196f3;
}

.tab-button:hover {
  color: #1976d2;
  background: #f8fbff;
}

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

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

.section-heading {
  font-size: 16px;
  font-weight: 600;
  color: #1a1a1a;
  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: #666;
  margin-bottom: 6px;
}

.info-value {
  font-size: 14px;
  color: #1a1a1a;
}

/* 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: white;
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  padding: 20px;
  margin-bottom: 16px;
}

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

.enrollment-title {
  font-size: 16px;
  font-weight: 600;
  color: #1a1a1a;
  margin-bottom: 8px;
}

.enrollment-meta {
  display: flex;
  gap: 16px;
  font-size: 13px;
  color: #666;
  flex-wrap: wrap;
}

.career-badge {
  background: #e3f2fd;
  color: #1976d2;
  padding: 2px 8px;
  border-radius: 10px;
  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: #666;
}

.progress-percentage {
  font-size: 13px;
  font-weight: 600;
  color: #1976d2;
}

.progress-bar {
  height: 8px;
  background: #e0e0e0;
  border-radius: 10px;
  overflow: hidden;
}

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

.progress-fill {
  height: 100%;
  background: linear-gradient(90deg, #2196f3 0%, #1976d2 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: #666;
}

.detail-value {
  font-size: 14px;
  font-weight: 500;
  color: #1a1a1a;
}

.link-primary {
  color: #2196f3;
  text-decoration: none;
  font-size: 14px;
  font-weight: 500;
  margin-left: auto;
}

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

/* Completed Enrollment Card */
.completed-enrollment-card {
  background: #f8f9fa;
  border: 1px solid #e0e0e0;
  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: #e8f5e9;
  color: #2e7d32;
  padding: 4px 12px;
  border-radius: 12px;
  font-size: 12px;
  font-weight: 500;
}

.status-completed {
  background: #e3f2fd;
  color: #1976d2;
}

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

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

.certificate-issued {
  color: #2e7d32;
}

/* Application Cards */
.application-card {
  background: white;
  border: 1px solid #e0e0e0;
  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: #1a1a1a;
  margin-bottom: 8px;
}

.application-meta {
  display: flex;
  gap: 16px;
  font-size: 13px;
  color: #666;
  flex-wrap: wrap;
}

.application-notes {
  font-size: 14px;
  color: #666;
  line-height: 1.5;
  margin-bottom: 12px;
}

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

.reviewer-text {
  font-size: 12px;
  color: #999;
}

.status-approved {
  background: #e8f5e9;
  color: #2e7d32;
}

.status-pending {
  background: #fff3e0;
  color: #f57c00;
}

/* Payment Progress Card */
.payment-progress-card {
  background: white;
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  padding: 24px;
}

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

.amount-paid {
  color: #2e7d32;
  font-weight: 500;
}

.amount-total {
  color: #666;
  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: white;
  border: 1px solid #e0e0e0;
  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: #1a1a1a;
}

.plan-due-date {
  font-size: 15px;
  font-weight: 500;
  color: #1a1a1a;
}

.btn-replace {
  width: 100%;
  padding: 10px;
  background: #f5f5f5;
  border: 1px solid #ddd;
  border-radius: 6px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s;
}

.btn-replace:hover {
  background: #e0e0e0;
}

/* Quick Actions Card */
.quick-actions-card {
  background: white;
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  padding: 24px;
}

.action-item {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px 0;
  border-bottom: 1px solid #f0f0f0;
  cursor: pointer;
  transition: background 0.2s;
}

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

.action-item:hover {
  background: #f8fbff;
  margin: 0 -12px;
  padding-left: 12px;
  padding-right: 12px;
  border-radius: 6px;
}

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

.action-charge {
  background: #e8f5e9;
}

.action-plan {
  background: #e3f2fd;
}

.action-contact {
  background: #fce4ec;
}

.action-content {
  flex: 1;
}

.action-title {
  font-size: 14px;
  font-weight: 500;
  color: #1a1a1a;
  margin-bottom: 2px;
}

.action-description {
  font-size: 12px;
  color: #666;
}

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

.payment-schedule-table thead {
  background: #f8f9fa;
}

.payment-schedule-table th {
  padding: 12px 16px;
  text-align: left;
  font-size: 11px;
  font-weight: 600;
  color: #666;
  letter-spacing: 0.5px;
  border-bottom: 1px solid #e0e0e0;
}

.payment-schedule-table td {
  padding: 16px;
  font-size: 14px;
  color: #333;
  border-bottom: 1px solid #f0f0f0;
}

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

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

.payment-status-badge.paid {
  background: #e8f5e9;
  color: #2e7d32;
}

.payment-status-badge.failed {
  background: #ffebee;
  color: #c62828;
}

.payment-status-badge.scheduled {
  background: #e3f2fd;
  color: #1976d2;
}

.reference-text {
  font-family: monospace;
  font-size: 12px;
  color: #999;
}

.scheduled-text {
  color: #999;
  font-size: 13px;
}

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

.ledger-summary-card {
  background: white;
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  padding: 20px;
  display: flex;
  align-items: center;
  gap: 16px;
}

.ledger-summary-card.card-charges {
  border-left: 4px solid #2196f3;
}

.ledger-summary-card.card-payments {
  border-left: 4px solid #4caf50;
}

.ledger-summary-card.card-balance {
  border-left: 4px solid #ff9800;
}

.ledger-summary-card.card-failed {
  border-left: 4px solid #f44336;
}

.summary-icon {
  font-size: 28px;
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  background: #f8f9fa;
}

.summary-content {
  flex: 1;
}

.summary-label {
  font-size: 13px;
  color: #666;
  margin-bottom: 4px;
}

.summary-value {
  font-size: 24px;
  font-weight: 700;
  color: #1a1a1a;
}

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

.ledger-table {
  width: 100%;
  background: white;
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  border-collapse: collapse;
  overflow: hidden;
}

.ledger-table thead {
  background: #f8f9fa;
}

.ledger-table th {
  padding: 12px 16px;
  text-align: left;
  font-size: 11px;
  font-weight: 600;
  color: #666;
  letter-spacing: 0.5px;
  border-bottom: 1px solid #e0e0e0;
}

.ledger-table td {
  padding: 16px;
  font-size: 14px;
  color: #333;
  border-bottom: 1px solid #f0f0f0;
}

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

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

.type-charge {
  background: #e3f2fd;
  color: #1976d2;
}

.type-payment {
  background: #e8f5e9;
  color: #2e7d32;
}

.type-adjustment {
  background: #fff3e0;
  color: #f57c00;
}

.type-tuition {
  background: #e3f2fd;
  color: #1976d2;
}

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

.description-meta {
  font-size: 12px;
  color: #999;
  line-height: 1.4;
}

.amount-debit {
  color: #d32f2f;
  font-weight: 500;
}

.amount-credit {
  color: #2e7d32;
  font-weight: 500;
}

.status-posted {
  color: #2e7d32;
  font-size: 13px;
}

.ledger-notes {
  margin-top: 24px;
  padding: 20px;
  background: #f8f9fa;
  border-radius: 8px;
  border-left: 4px solid #2196f3;
}

.ledger-notes h4 {
  font-size: 14px;
  font-weight: 600;
  color: #1a1a1a;
  margin-bottom: 8px;
}

.notes-content {
  font-size: 14px;
  color: #666;
  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: white;
  border: 1px solid #e0e0e0;
  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: #1a1a1a;
  margin-bottom: 4px;
}

.document-date {
  font-size: 13px;
  color: #666;
}

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

.doc-completed {
  background: #e8f5e9;
  color: #2e7d32;
}

.doc-generated {
  background: #e3f2fd;
  color: #1976d2;
}

.btn-download {
  width: 36px;
  height: 36px;
  border-radius: 6px;
  border: 1px solid #ddd;
  background: white;
  font-size: 16px;
  cursor: pointer;
  transition: all 0.2s;
}

.btn-download:hover {
  background: #f5f5f5;
  border-color: #2196f3;
}

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

.activity-item-feed {
  display: flex;
  align-items: start;
  gap: 16px;
  padding: 16px;
  background: white;
  border: 1px solid #e0e0e0;
  border-radius: 8px;
}

.activity-icon-circle {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #e3f2fd;
  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: #1a1a1a;
  margin-bottom: 4px;
}

.activity-meta-feed {
  font-size: 13px;
  color: #666;
}

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

.instructors-table-container {
  background: white;
  border-radius: 8px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  overflow: hidden;
}

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

.instructors-table thead {
  background: #f8f9fa;
  border-bottom: 2px solid #e0e0e0;
}

.instructors-table th {
  padding: 12px 16px;
  text-align: left;
  font-size: 11px;
  font-weight: 600;
  color: #666;
  letter-spacing: 0.5px;
}

.instructor-row {
  border-bottom: 1px solid #f0f0f0;
  cursor: pointer;
  transition: background 0.2s;
}

.instructor-row:hover {
  background: #f8fbff;
}

.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: #e3f2fd;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
}

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

.instructor-name {
  font-weight: 500;
  color: #1a1a1a;
  font-size: 14px;
}

.instructor-email {
  font-size: 13px;
  color: #666;
}

.teaching-badge {
  font-size: 13px;
  color: #1976d2;
}

.teaching-empty {
  color: #ccc;
  font-size: 14px;
}

.location-text {
  font-size: 13px;
  color: #666;
}

.canvas-enrollments {
  font-size: 13px;
  color: #666;
}

.status-training {
  background: #e3f2fd;
  color: #1976d2;
}

.status-pending {
  background: #fff3e0;
  color: #f57c00;
}

.status-inactive {
  background: #f5f5f5;
  color: #999;
}

/* 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: #e3f2fd;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 32px;
}

.instructor-email-header {
  font-size: 14px;
  color: #666;
  margin-top: 4px;
}

.btn-secondary-outline {
  padding: 10px 20px;
  border: 1px solid #ddd;
  background: white;
  border-radius: 6px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s;
}

.btn-secondary-outline:hover {
  background: #f5f5f5;
}

.btn-danger {
  padding: 10px 20px;
  border: 1px solid #f44336;
  background: white;
  color: #f44336;
  border-radius: 6px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s;
}

.btn-danger:hover {
  background: #f44336;
  color: white;
}

.instructor-tabs {
  display: flex;
  gap: 8px;
  border-bottom: 2px solid #f0f0f0;
  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: white;
  border: 1px solid #e0e0e0;
  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: #1a1a1a;
  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: #666;
}

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

.photo-placeholder {
  width: 200px;
  height: 200px;
  border: 2px dashed #ddd;
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin: 0 auto;
  background: #f8f9fa;
}

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

.photo-text {
  font-size: 13px;
  color: #999;
  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: #1a1a1a;
}

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

.btn-upload {
  padding: 8px 16px;
  border: 1px solid #ddd;
  background: white;
  border-radius: 6px;
  font-size: 13px;
  cursor: pointer;
  transition: all 0.2s;
}

.btn-upload:hover {
  background: #f5f5f5;
}

.file-chosen {
  font-size: 13px;
  color: #999;
}

.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-text {
  font-size: 14px;
  color: #999;
}

.empty-text-small {
  font-size: 13px;
  color: #999;
  padding: 12px 0;
}

.location-value {
  font-size: 14px;
  color: #1a1a1a;
}

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

.location-links {
  margin-top: 20px;
  padding-top: 20px;
  border-top: 1px solid #f0f0f0;
}

.links-label {
  font-size: 13px;
  font-weight: 500;
  color: #666;
  margin-bottom: 12px;
}

.course-link {
  display: block;
  padding: 10px 12px;
  background: #f8f9fa;
  border-radius: 6px;
  color: #1976d2;
  text-decoration: none;
  font-size: 14px;
  margin-bottom: 8px;
  transition: all 0.2s;
}

.course-link:hover {
  background: #e3f2fd;
}

/* Teaching Assignment Card */
.teaching-assignment-card {
  background: white;
  border: 1px solid #e0e0e0;
  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: #1a1a1a;
  margin: 0;
}

.career-course-badge {
  background: #e3f2fd;
  color: #1976d2;
  padding: 4px 12px;
  border-radius: 12px;
  font-size: 12px;
  font-weight: 500;
}

.assignment-meta {
  display: flex;
  gap: 20px;
  font-size: 13px;
  color: #666;
}

/* 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: #e8f5e9;
  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: #4caf50;
  color: white;
}

.cert-name {
  font-size: 14px;
  font-weight: 500;
  color: #1a1a1a;
}

/* ===== 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: #f8f9fa;
  border-radius: 20px;
  border: 1px solid #e0e0e0;
}

.stat-pill.stat-active {
  background: #e8f5e9;
  border-color: #4caf50;
}

.stat-pill.stat-csr {
  background: #e3f2fd;
  border-color: #2196f3;
}

.stat-pill.stat-pending {
  background: #fff3e0;
  border-color: #ff9800;
}

.stat-number {
  font-size: 18px;
  font-weight: 700;
  color: #1a1a1a;
}

.stat-label {
  font-size: 13px;
  color: #666;
}

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

.search-input-wide {
  padding: 10px 12px 10px 36px;
  border: 1px solid #ddd;
  border-radius: 6px;
  font-size: 14px;
  flex: 1;
  transition: border-color 0.2s;
}

.search-input-wide:focus {
  outline: none;
  border-color: #2196f3;
}

.filter-select {
  padding: 10px 16px;
  border: 1px solid #ddd;
  border-radius: 6px;
  font-size: 14px;
  background: white;
  cursor: pointer;
  min-width: 150px;
}

.staff-table-container {
  background: white;
  border-radius: 8px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  overflow: hidden;
}

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

.staff-table thead {
  background: #f8f9fa;
  border-bottom: 2px solid #e0e0e0;
}

.staff-table th {
  padding: 12px 16px;
  text-align: left;
  font-size: 11px;
  font-weight: 600;
  color: #666;
  letter-spacing: 0.5px;
}

.staff-row {
  border-bottom: 1px solid #f0f0f0;
  transition: background 0.2s;
}

.staff-row:hover {
  background: #f8fbff;
}

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

.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: #1a1a1a;
  font-size: 14px;
}

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

.role-title {
  font-size: 14px;
  color: #1a1a1a;
  font-weight: 500;
}

.region-text {
  font-size: 13px;
  color: #666;
}

.cases-text {
  font-size: 13px;
  color: #666;
}

.last-active-text {
  font-size: 13px;
  color: #666;
}

.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: #666;
  transition: all 0.2s;
  border-radius: 4px;
}

.icon-btn:hover {
  background: #f5f5f5;
  color: #2196f3;
}

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

.courses-table-container {
  background: white;
  border-radius: 8px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  overflow-x: auto;
}

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

.courses-table thead {
  background: #f8f9fa;
  border-bottom: 2px solid #e0e0e0;
}

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

.course-row {
  border-bottom: 1px solid #f0f0f0;
  cursor: pointer;
  transition: background 0.2s;
}

.course-row:hover {
  background: #f8fbff;
}

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

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

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

.course-icon {
  width: 40px;
  height: 40px;
  background: #e3f2fd;
  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;
}

.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: #666;
}

.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 #ddd;
  border-radius: 6px;
  background: white;
  color: #333;
  text-decoration: none;
  transition: all 0.2s;
}

.pagination-btn:hover:not(.disabled) {
  background: #f5f5f5;
  border-color: #2196f3;
  color: #2196f3;
}

.pagination-btn.disabled {
  color: #ccc;
  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: 6px;
  font-size: 14px;
  color: #333;
  text-decoration: none;
  transition: all 0.2s;
}

.pagination-page:hover:not(.current) {
  background: #f5f5f5;
}

.pagination-page.current {
  background: #2196f3;
  color: white;
  font-weight: 600;
}

.pagination-gap {
  padding: 0 8px;
  color: #999;
}

.page-number {
  font-size: 14px;
  color: #666;
}

/* 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: #999;
  transition: all 0.2s;
}

.search-clear:hover {
  background: #f0f0f0;
  color: #666;
}

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

/* Utility classes */
.text-muted {
  color: #999;
  font-style: italic;
}

.status-inactive {
  background: #f5f5f5;
  color: #666;
}

/* 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: #1a1a1a;
  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%;
  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, #ef5350 0%, #ec407a 100%);
}

.progress-low {
  background: linear-gradient(90deg, #ff7043 0%, #ff8a65 100%);
}

.progress-medium {
  background: linear-gradient(90deg, #ffa726 0%, #ffb74d 100%);
}

.progress-good {
  background: linear-gradient(90deg, #66bb6a 0%, #81c784 100%);
}

.progress-full {
  background: linear-gradient(90deg, #4caf50 0%, #66bb6a 100%);
}

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

.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: #e3f2fd;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 32px;
  flex-shrink: 0;
}

.course-detail-title {
  font-size: 24px;
  font-weight: 600;
  color: #1a1a1a;
  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: #666;
}

.course-location-header {
  font-size: 14px;
  color: #666;
}

.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-stat-card {
  background: white;
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  padding: 20px;
  display: flex;
  align-items: center;
  gap: 16px;
}

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

.course-tabs {
  display: flex;
  gap: 8px;
  border-bottom: 2px solid #f0f0f0;
  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: white;
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  padding: 24px;
}

.course-description {
  font-size: 14px;
  color: #666;
  line-height: 1.6;
  margin: 0;
}

.instructor-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.instructor-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
  background: #f8f9fa;
  border-radius: 8px;
}

.instructor-item-avatar {
  width: 40px;
  height: 40px;
  background: #e3f2fd;
  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: #1a1a1a;
  margin-bottom: 2px;
}

.instructor-item-role {
  font-size: 12px;
  color: #666;
}

.location-detail-item {
  display: flex;
  align-items: start;
  gap: 12px;
  padding: 12px 0;
  border-bottom: 1px solid #f0f0f0;
}

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

.location-name, .location-address, .location-contact {
  font-size: 14px;
  flex: 1;
}

.location-name {
  color: #1a1a1a;
  font-weight: 500;
}

.requirements-section {
  margin-bottom: 20px;
}

.requirements-section:last-child {
  margin-bottom: 0;
}

.requirements-subheading {
  font-size: 14px;
  font-weight: 600;
  color: #1a1a1a;
  margin-bottom: 12px;
}

.requirement-item {
  display: flex;
  align-items: start;
  gap: 10px;
  padding: 8px 0;
  font-size: 14px;
  color: #666;
}

.requirement-icon {
  color: #4caf50;
  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: white;
  border: 1px solid #e0e0e0;
  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: #e8f5e9;
}

.stat-available {
  background: #e3f2fd;
}

.stat-waitlisted {
  background: #fff3e0;
}

.stat-capacity {
  background: #f3e5f5;
}

.enrollment-stat-content {
  flex: 1;
}

.enrollment-stat-label {
  font-size: 13px;
  color: #666;
  margin-bottom: 4px;
}

.enrollment-stat-value {
  font-size: 24px;
  font-weight: 700;
  color: #1a1a1a;
}

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

.enrollments-table {
  width: 100%;
  background: white;
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  border-collapse: collapse;
  overflow: hidden;
}

.enrollments-table thead {
  background: #f8f9fa;
}

.enrollments-table th {
  padding: 12px 16px;
  text-align: left;
  font-size: 11px;
  font-weight: 600;
  color: #666;
  letter-spacing: 0.5px;
  border-bottom: 1px solid #e0e0e0;
}

.enrollments-table td {
  padding: 16px;
  font-size: 14px;
  border-bottom: 1px solid #f0f0f0;
}

.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: #e3f2fd;
  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: #1a1a1a;
}

.enrolled-student-email {
  font-size: 13px;
  color: #666;
}

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

.badge-enrolled {
  background: #e8f5e9;
  color: #2e7d32;
}

.badge-waitlisted {
  background: #fff3e0;
  color: #f57c00;
}

.progress-with-text {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 180px;
}

.progress-text {
  font-size: 13px;
  color: #1a1a1a;
  font-weight: 500;
}

.progress-bar.small {
  height: 6px;
}

.attendance-text {
  font-size: 12px;
  color: #666;
}

.not-started-text {
  font-size: 13px;
  color: #999;
}

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

.badge-current {
  background: #e8f5e9;
  color: #2e7d32;
}

.badge-overdue {
  background: #ffebee;
  color: #c62828;
}

.badge-not-required {
  background: #f5f5f5;
  color: #999;
}

/* Schedule Tab */
.schedule-details-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
}

.schedule-detail-item {
  padding: 20px;
  background: white;
  border: 1px solid #e0e0e0;
  border-radius: 8px;
}

.schedule-label {
  font-size: 13px;
  font-weight: 500;
  color: #666;
  margin-bottom: 8px;
}

.schedule-value {
  font-size: 16px;
  font-weight: 600;
  color: #1a1a1a;
}

/* Financial Tab */
.financial-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

.financial-item {
  padding: 24px;
  background: white;
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  text-align: center;
}

.financial-label {
  font-size: 14px;
  font-weight: 500;
  color: #666;
  margin-bottom: 12px;
}

.financial-value {
  font-size: 28px;
  font-weight: 700;
  color: #1a1a1a;
}

/* 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;
  }

  .enrollment-stats-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .schedule-details-grid {
    grid-template-columns: 1fr;
  }

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

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

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

  .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: white; border-radius: 8px; box-shadow: 0 1px 3px rgba(0,0,0,0.1); overflow: hidden; }
.terms-table { width: 100%; border-collapse: collapse; }
.terms-table thead { background: #f8f9fa; border-bottom: 2px solid #e0e0e0; }
.terms-table th { padding: 12px 16px; text-align: left; font-size: 11px; font-weight: 600; color: #666; letter-spacing: 0.5px; }
.term-row { border-bottom: 1px solid #f0f0f0; cursor: pointer; transition: background 0.2s; }
.term-row:hover { background: #f8fbff; }
.term-row.placeholder-row { opacity: 0.6; cursor: default; }
.terms-table td { padding: 16px; }
.term-cell { display: flex; align-items: center; gap: 12px; }
.term-icon { width: 40px; height: 40px; background: #e3f2fd; 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: #1a1a1a; font-size: 14px; }
.term-code { font-size: 12px; color: #666; }
.term-dates { display: flex; flex-direction: column; gap: 4px; font-size: 13px; color: #666; }
.deadline-text { font-size: 12px; color: #999; }
.count-badge { font-size: 13px; color: #666; }
.status-planning { background: #e3f2fd; color: #1976d2; }
.status-open { background: #e8f5e9; color: #2e7d32; }
.status-closed { background: #f5f5f5; color: #999; }
.status-archived { background: #f3e5f5; color: #7b1fa2; }

/* Term Detail */
.term-detail-page { max-width: 1400px; }
.term-detail-header { display: flex; justify-content: space-between; align-items: start; margin-bottom: 20px; }
.term-header-info { display: flex; gap: 20px; }
.term-header-icon { width: 64px; height: 64px; background: #e3f2fd; border-radius: 12px; display: flex; align-items: center; justify-content: center; font-size: 32px; }
.term-detail-title { font-size: 24px; font-weight: 600; color: #1a1a1a; margin-bottom: 8px; }
.term-header-meta { display: flex; gap: 16px; font-size: 13px; color: #666; margin-bottom: 8px; }
.term-date-range { font-size: 14px; color: #666; }
.term-status-pills { display: flex; gap: 8px; margin-bottom: 24px; position: relative; }
.term-status-pill { padding: 8px 20px; border: 1px solid #ddd; background: white; border-radius: 20px; font-size: 13px; font-weight: 500; color: #666; cursor: pointer; transition: all 0.2s; }
.term-status-pill.active { background: #2196f3; color: white; border-color: #2196f3; }
.demo-lifecycle-badge { position: absolute; top: -10px; right: 0; background: #ff9800; color: white; font-size: 10px; font-weight: 600; padding: 2px 8px; border-radius: 10px; }
.term-stats-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-bottom: 32px; }
.term-stat-card { background: white; border: 1px solid #e0e0e0; 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: #f8f9fa; }
.term-stat-content { flex: 1; }
.term-stat-label { font-size: 13px; color: #666; margin-bottom: 4px; }
.term-stat-value { font-size: 24px; font-weight: 700; color: #1a1a1a; }
.term-tabs { display: flex; gap: 8px; border-bottom: 2px solid #f0f0f0; 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: white; border: 1px solid #e0e0e0; 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: #f8f9fa; border-radius: 6px; }
.key-date-label { font-size: 14px; color: #666; }
.key-date-value { font-size: 14px; font-weight: 500; color: #1a1a1a; }
.regional-list { display: flex; flex-direction: column; gap: 12px; }
.regional-item { display: flex; align-items: start; gap: 12px; padding: 12px; background: #f8f9fa; border-radius: 6px; }
.regional-icon { font-size: 20px; }
.regional-info { flex: 1; }
.regional-name { font-size: 14px; font-weight: 500; color: #1a1a1a; margin-bottom: 4px; }
.regional-meta { font-size: 12px; color: #666; line-height: 1.5; }
.enrollment-progress-section { display: flex; flex-direction: column; gap: 16px; }
.overall-progress-label { font-size: 14px; color: #666; }
.overall-progress-value { font-size: 32px; font-weight: 700; color: #1a1a1a; }
.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: #1a1a1a; margin-bottom: 4px; }
.breakdown-label { font-size: 13px; color: #666; }
.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: #999; }

/* Term Courses Tab */
.term-courses-table { width: 100%; background: white; border: 1px solid #e0e0e0; border-radius: 8px; border-collapse: collapse; overflow: hidden; }
.term-courses-table thead { background: #f8f9fa; }
.term-courses-table th { padding: 12px 16px; text-align: left; font-size: 11px; font-weight: 600; color: #666; letter-spacing: 0.5px; border-bottom: 1px solid #e0e0e0; }
.term-courses-table td { padding: 16px; font-size: 14px; border-bottom: 1px solid #f0f0f0; }
.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: #e3f2fd; border-radius: 6px; 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: #1a1a1a; }
.term-course-badge { display: inline-block; padding: 2px 8px; border-radius: 10px; font-size: 11px; font-weight: 500; }
.course-location-info { display: flex; flex-direction: column; gap: 4px; }
.location-region { font-size: 14px; color: #1a1a1a; font-weight: 500; }
.location-name-small { font-size: 12px; color: #666; line-height: 1.4; }
.enrollment-fraction { display: flex; flex-direction: column; gap: 4px; }
.fraction-value { font-size: 16px; font-weight: 600; color: #1a1a1a; }
.fraction-label { font-size: 12px; color: #666; }
.course-progress-info { display: flex; flex-direction: column; gap: 6px; min-width: 100px; }
.course-progress-value { font-size: 13px; font-weight: 500; color: #1a1a1a; }

/* Term Enrollments Tab */
.term-enrollments-table { width: 100%; background: white; border: 1px solid #e0e0e0; border-radius: 8px; border-collapse: collapse; overflow: hidden; }
.term-enrollments-table thead { background: #f8f9fa; }
.term-enrollments-table th { padding: 12px 16px; text-align: left; font-size: 11px; font-weight: 600; color: #666; letter-spacing: 0.5px; border-bottom: 1px solid #e0e0e0; }
.term-enrollments-table td { padding: 16px; font-size: 13px; border-bottom: 1px solid #f0f0f0; }
.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: #2196f3; 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: #1a1a1a; }
.term-enrollment-email { font-size: 12px; color: #666; }
.enrollment-location { display: flex; flex-direction: column; gap: 4px; font-size: 13px; color: #1a1a1a; }
.enrollment-location-region { font-size: 12px; color: #666; }
.badge-pending { background: #fff3e0; color: #f57c00; }
.badge-deposit-paid { background: #e8f5e9; color: #2e7d32; }
.badge-payment-pending { background: #fff3e0; color: #f57c00; }

/* 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: #2196f3; flex-shrink: 0; margin-top: 4px; }
.timeline-indicator.upcoming { background: #2196f3; }
.timeline-content { flex: 1; }
.timeline-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; flex-wrap: wrap; gap: 8px; }
.timeline-title { font-size: 15px; font-weight: 600; color: #1a1a1a; }
.timeline-date { font-size: 13px; color: #666; }
.timeline-badge { display: inline-block; padding: 4px 12px; border-radius: 12px; font-size: 12px; font-weight: 500; }
.badge-upcoming { background: #e3f2fd; color: #1976d2; }
.timeline-description { font-size: 14px; color: #666; line-height: 1.5; }

/* ===== Locations Page Styles ===== */
.locations-page { max-width: 1600px; }
.locations-table-container { background: white; border-radius: 8px; box-shadow: 0 1px 3px rgba(0,0,0,0.1); overflow: hidden; }
.locations-table { width: 100%; border-collapse: collapse; }
.locations-table thead { background: #f8f9fa; border-bottom: 2px solid #e0e0e0; }
.locations-table th { padding: 12px 16px; text-align: left; font-size: 11px; font-weight: 600; color: #666; letter-spacing: 0.5px; }
.location-row { border-bottom: 1px solid #f0f0f0; cursor: pointer; transition: background 0.2s; }
.location-row:hover { background: #f8fbff; }
.location-row.placeholder-row { opacity: 0.6; cursor: default; }
.locations-table td { padding: 16px; vertical-align: middle; }

/* Location Cell */
.location-cell { display: flex; align-items: center; gap: 16px; }
.location-icon-box { width: 48px; height: 48px; background: #e3f2fd; border-radius: 8px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.location-icon-inner { font-size: 24px; }
.location-info { display: flex; flex-direction: column; gap: 2px; }
.location-name { font-size: 14px; font-weight: 600; color: #1a1a1a; }
.location-subtitle { font-size: 12px; color: #666; }
.location-address { font-size: 12px; color: #2196f3; }

/* Contact Cell */
.contact-cell { display: flex; flex-direction: column; gap: 4px; }
.contact-phone { font-size: 13px; color: #666; }
.contact-email { font-size: 13px; color: #2196f3; }

/* Program Badges */
.program-badges { display: flex; flex-wrap: wrap; gap: 6px; }
.program-badge { display: inline-block; padding: 4px 10px; border-radius: 12px; font-size: 12px; font-weight: 500; }
.badge-dental { background: #e3f2fd; color: #1976d2; }
.badge-medical { background: #e8f5e9; color: #2e7d32; }
.badge-pharmacy { background: #f3e5f5; color: #7b1fa2; }
.badge-default { background: #f5f5f5; color: #666; }

/* Status badges */
.status-pending { background: #fff3e0; color: #f57c00; }

/* ===== Location Detail Page ===== */
.location-detail-page { max-width: 1400px; }
.location-detail-header { display: flex; justify-content: space-between; align-items: start; margin-bottom: 24px; }
.location-header-info { display: flex; gap: 20px; }
.location-header-icon { width: 64px; height: 64px; background: #e3f2fd; border-radius: 12px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.location-icon-large { font-size: 32px; }
.location-title-row { display: flex; align-items: center; gap: 12px; margin-bottom: 8px; }
.location-detail-title { font-size: 24px; font-weight: 600; color: #1a1a1a; margin: 0; }
.location-header-meta { display: flex; align-items: center; gap: 12px; margin-bottom: 8px; }
.meta-item { font-size: 13px; color: #666; }
.region-badge { display: inline-block; padding: 4px 12px; background: #e3f2fd; color: #1976d2; border-radius: 12px; font-size: 12px; font-weight: 500; }
.location-header-address { font-size: 13px; color: #666; margin-bottom: 8px; }
.location-programs-badges { display: flex; gap: 8px; }
.program-badge-small { display: inline-block; padding: 4px 10px; border-radius: 12px; font-size: 11px; font-weight: 500; }
.btn-outline { padding: 10px 20px; background: white; color: #333; border: 1px solid #ddd; border-radius: 6px; font-size: 14px; font-weight: 500; cursor: pointer; transition: all 0.2s; }
.btn-outline:hover { border-color: #2196f3; color: #2196f3; }

/* Location Stats Grid */
.location-stats-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 16px; margin-bottom: 32px; }
.location-stat-card { background: white; border: 1px solid #e0e0e0; border-radius: 8px; padding: 20px; display: flex; align-items: center; gap: 16px; }
.stat-courses { background: #e3f2fd; color: #1976d2; }
.stat-students { background: #fff3e0; color: #f57c00; }
.stat-instructors { background: #e8f5e9; color: #2e7d32; }
.stat-completion { background: #e8f5e9; color: #2e7d32; }
.stat-rating { background: #fff8e1; color: #fbc02d; }

/* Location Tabs */
.location-tabs { display: flex; gap: 8px; border-bottom: 2px solid #f0f0f0; margin-bottom: 32px; }
.location-tab-content { display: block; }
.location-tab-content.hidden { display: none; }

/* Location Overview Grid */
.location-overview-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.overview-left, .overview-right { display: flex; flex-direction: column; gap: 24px; }
.location-section-card { background: white; border: 1px solid #e0e0e0; border-radius: 8px; padding: 24px; }
.location-description { font-size: 14px; color: #666; line-height: 1.7; margin: 0; }

/* Subsection Heading */
.subsection-heading { font-size: 13px; font-weight: 600; color: #1a1a1a; 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: #666; 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: #666; }

/* 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: #333; }
.contact-info-link { font-size: 14px; color: #2196f3; 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: center; gap: 10px; margin-bottom: 10px; font-size: 14px; color: #666; }
.requirement-check { color: #4caf50; font-weight: bold; width: 20px; }
.requirement-circle { color: #999; width: 20px; text-align: center; }

/* Location Courses Tab */
.location-courses-table { width: 100%; background: white; border: 1px solid #e0e0e0; border-radius: 8px; border-collapse: collapse; overflow: hidden; }
.location-courses-table thead { background: #f8f9fa; }
.location-courses-table th { padding: 12px 16px; text-align: left; font-size: 11px; font-weight: 600; color: #666; letter-spacing: 0.5px; border-bottom: 1px solid #e0e0e0; }
.location-courses-table td { padding: 16px; font-size: 14px; border-bottom: 1px solid #f0f0f0; vertical-align: middle; }
.location-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: #e3f2fd; border-radius: 6px; 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: #666; }

/* Location Instructors Tab */
.location-instructors-table { width: 100%; background: white; border: 1px solid #e0e0e0; border-radius: 8px; border-collapse: collapse; overflow: hidden; }
.location-instructors-table thead { background: #f8f9fa; }
.location-instructors-table th { padding: 12px 16px; text-align: left; font-size: 11px; font-weight: 600; color: #666; letter-spacing: 0.5px; border-bottom: 1px solid #e0e0e0; }
.location-instructors-table td { padding: 16px; font-size: 14px; border-bottom: 1px solid #f0f0f0; vertical-align: middle; }
.location-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: #e3f2fd; 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: #1a1a1a; }
.instructor-email { font-size: 12px; color: #666; }

/* Empty State */
.empty-state { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 60px 20px; background: white; border: 1px solid #e0e0e0; border-radius: 8px; }
.empty-state-icon { font-size: 48px; opacity: 0.3; margin-bottom: 16px; }
.empty-state-text { font-size: 14px; color: #666; margin-bottom: 20px; }

/* Facilities Tab */
.facilities-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 20px; }
.facility-card { background: white; border: 1px solid #e0e0e0; border-radius: 8px; padding: 20px; }
.facility-title { font-size: 13px; font-weight: 600; color: #666; margin-bottom: 8px; }
.facility-value { font-size: 18px; font-weight: 600; color: #1a1a1a; margin-bottom: 4px; }
.facility-detail { font-size: 12px; color: #666; }

/* Logistics Tab */
.logistics-info { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; }
.logistics-section { background: white; border: 1px solid #e0e0e0; border-radius: 8px; padding: 24px; }
.logistics-item { display: flex; justify-content: space-between; padding: 12px 0; border-bottom: 1px solid #f0f0f0; }
.logistics-item:last-child { border-bottom: none; }
.logistics-label { font-size: 13px; color: #666; }
.logistics-value { font-size: 13px; color: #1a1a1a; font-weight: 500; }

/* Location Page Responsive */
@media (max-width: 1200px) {
  .location-stats-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 968px) {
  .location-stats-grid { grid-template-columns: repeat(2, 1fr); }
  .location-overview-grid { grid-template-columns: 1fr; }
  .logistics-info { grid-template-columns: 1fr; }
}
@media (max-width: 768px) {
  .location-stats-grid { grid-template-columns: 1fr; }
  .location-detail-header { flex-direction: column; gap: 20px; }
  .facilities-grid { grid-template-columns: 1fr; }
}

/* ===== Location Tabs V2 Styles ===== */

/* Courses Tab V2 */
.course-count-label { font-size: 13px; color: #666; }
.location-courses-table-v2 { width: 100%; background: white; border: 1px solid #e0e0e0; border-radius: 8px; border-collapse: collapse; }
.location-courses-table-v2 thead { background: #f8f9fa; }
.location-courses-table-v2 th { padding: 12px 16px; text-align: left; font-size: 11px; font-weight: 600; color: #666; letter-spacing: 0.5px; border-bottom: 1px solid #e0e0e0; }
.location-courses-table-v2 td { padding: 16px; font-size: 14px; border-bottom: 1px solid #f0f0f0; vertical-align: middle; }
.location-courses-table-v2 tbody tr:last-child td { border-bottom: none; }

.course-cell-v2 { display: flex; align-items: flex-start; gap: 12px; }
.course-icon-v2 { width: 36px; height: 36px; background: #e3f2fd; border-radius: 6px; 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: #1a1a1a; line-height: 1.3; }

.type-format-cell { display: flex; flex-direction: column; gap: 2px; }
.type-text { font-size: 14px; color: #1a1a1a; }
.format-text { font-size: 12px; color: #666; }

.term-dates-cell { display: flex; flex-direction: column; gap: 2px; }
.term-text { font-size: 14px; font-weight: 500; color: #1a1a1a; }
.dates-text { font-size: 12px; color: #666; }

.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: #1a1a1a; }
.enrollment-percent { font-size: 12px; color: #666; }
.enrollment-progress-bar { height: 6px; background: #e0e0e0; border-radius: 3px; overflow: hidden; margin-bottom: 4px; }
.enrollment-progress-fill { height: 100%; background: #2196f3; border-radius: 3px; transition: width 0.3s; }
.enrollment-available { font-size: 11px; color: #666; }

.tuition-cell { font-size: 14px; font-weight: 500; color: #1a1a1a; }

/* Instructors Tab V2 */
.instructors-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; }
.instructor-card { background: white; border: 1px solid #e0e0e0; border-radius: 8px; padding: 20px; }
.instructor-card-header { display: flex; align-items: flex-start; gap: 16px; margin-bottom: 16px; }
.instructor-card-avatar { width: 56px; height: 56px; background: #2196f3; border-radius: 50%; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.instructor-card-avatar.avatar-secondary { background: #e0e0e0; }
.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: #1a1a1a; margin-bottom: 4px; }
.instructor-card-role { font-size: 13px; color: #666; }
.instructor-specializations { border-top: 1px solid #f0f0f0; padding-top: 12px; }
.specializations-label { font-size: 12px; font-weight: 600; color: #666; margin-bottom: 8px; }
.specializations-badges { display: flex; flex-wrap: wrap; gap: 6px; }
.specialization-badge { display: inline-block; padding: 4px 10px; background: #f5f5f5; border: 1px solid #e0e0e0; border-radius: 12px; font-size: 12px; color: #666; }

/* 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: white; border: 1px solid #e0e0e0; 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: #666; margin-bottom: 8px; }
.capacity-value { font-size: 24px; font-weight: 700; color: #2196f3; }

.equipment-section { }
.equipment-label { font-size: 13px; font-weight: 600; color: #666; margin-bottom: 12px; }
.equipment-list { display: flex; flex-direction: column; gap: 8px; }
.equipment-item { display: flex; align-items: center; gap: 10px; }
.equipment-check { color: #4caf50; font-weight: bold; }
.equipment-text { font-size: 14px; color: #333; }

.accessibility-section { margin-bottom: 24px; }
.accessibility-label { font-size: 13px; font-weight: 600; color: #666; margin-bottom: 12px; }
.accessibility-list { display: flex; flex-direction: column; gap: 8px; }
.accessibility-item { display: flex; align-items: center; gap: 10px; }
.accessibility-check { color: #4caf50; font-weight: bold; }
.accessibility-text { font-size: 14px; color: #333; }

.amenities-section { }
.amenities-label { font-size: 13px; font-weight: 600; color: #666; margin-bottom: 12px; }
.amenities-list { display: flex; flex-direction: column; gap: 8px; }
.amenity-item { display: flex; align-items: center; gap: 10px; }
.amenity-icon { color: #ffc107; font-size: 14px; }
.amenity-text { font-size: 14px; color: #333; }

.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: #666; 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: #333; }
.financial-status { display: flex; align-items: center; gap: 8px; }
.status-check { color: #4caf50; font-weight: bold; }
.status-text { font-size: 14px; color: #333; }

/* Logistics Tab V2 */
.logistics-layout { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.logistics-card { background: white; border: 1px solid #e0e0e0; 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: #1a1a1a; margin-bottom: 8px; }
.logistics-section-text { font-size: 14px; color: #666; line-height: 1.5; margin: 0; }

.map-placeholder { display: flex; flex-direction: column; align-items: center; justify-content: center; height: 200px; background: #f8f9fa; border: 1px solid #e0e0e0; border-radius: 8px; }
.map-pin { font-size: 32px; margin-bottom: 8px; }
.map-label { font-size: 14px; color: #666; margin-bottom: 4px; }
.map-address { font-size: 12px; color: #999; 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: white; border: 1px solid #e0e0e0; border-radius: 8px; border-collapse: collapse; }
.region-courses-table thead { background: #f8f9fa; }
.region-courses-table th { padding: 12px 16px; text-align: left; font-size: 11px; font-weight: 600; color: #666; letter-spacing: 0.5px; border-bottom: 1px solid #e0e0e0; }
.region-courses-table td { padding: 16px; font-size: 14px; border-bottom: 1px solid #f0f0f0; 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: #f5f5f5; border: 1px solid #e0e0e0; border-radius: 12px; font-size: 11px; color: #666; }
.schedule-cell { display: flex; flex-direction: column; gap: 2px; }
.schedule-term { font-size: 14px; font-weight: 500; color: #1a1a1a; }
.schedule-dates { font-size: 12px; color: #666; }
.simple-text { font-size: 14px; color: #1a1a1a; }
.status-published { background: #e3f2fd; color: #1976d2; }

/* Compliance Tab */
.compliance-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 24px; padding-bottom: 16px; border-bottom: 1px solid #e0e0e0; }
.compliance-info-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-bottom: 32px; background: #f8f9fa; padding: 20px; border-radius: 8px; }
.compliance-info-item { }
.compliance-info-label { font-size: 12px; color: #666; margin-bottom: 4px; font-weight: 600; }
.compliance-info-value { font-size: 14px; color: #1a1a1a; }
.compliance-section { background: white; border: 1px solid #e0e0e0; border-radius: 8px; padding: 24px; margin-bottom: 20px; }
.compliance-section-title { font-size: 16px; font-weight: 600; color: #1a1a1a; 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: #333; }
.compliance-req-check { color: #4caf50; 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; }

/* Salesforce Button */
.btn-salesforce { padding: 10px 20px; background: white; color: #2196f3; border: 1px solid #2196f3; border-radius: 6px; font-size: 14px; font-weight: 500; cursor: pointer; transition: all 0.2s; display: flex; align-items: center; gap: 8px; }
.btn-salesforce:hover { background: #e3f2fd; }

/* Finance Stats Pills */
.finance-stats-pills { display: flex; gap: 16px; margin-bottom: 32px; }
.finance-pill { background: white; border: 1px solid #e0e0e0; 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: #666; }
.pill-collected .pill-value { color: #4caf50; }
.pill-overdue .pill-value { color: #f44336; }
.pill-plans .pill-value { color: #2196f3; }
.pill-risk .pill-value { color: #ff9800; }
.pill-recovery .pill-value { color: #666; }

/* Today's Focus */
.todays-focus-section { background: #f8f9fa; 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: white; border-radius: 8px; padding: 16px; display: flex; align-items: center; gap: 16px; }
.focus-high-priority { border-left: 4px solid #f44336; }
.focus-warning { border-left: 4px solid #ff9800; }
.focus-success { border-left: 4px solid #4caf50; }
.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: #ffebee; }
.focus-warning .focus-icon-wrapper { background: #fff3e0; }
.focus-success .focus-icon-wrapper { background: #e8f5e9; }
.focus-icon { width: 20px; height: 20px; color: inherit; }
.focus-content { flex: 1; }
.focus-title { font-size: 14px; font-weight: 600; color: #1a1a1a; margin-bottom: 2px; }
.focus-subtitle { font-size: 12px; color: #666; }

/* 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 #ddd; border-radius: 6px; font-size: 14px; color: #333; background: white; cursor: pointer; min-width: 180px; }

/* Finance Table */
.finance-table-container { background: 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: #f8f9fa; border-bottom: 2px solid #e0e0e0; }
.finance-table th { padding: 12px 16px; text-align: left; font-size: 11px; font-weight: 600; color: #666; letter-spacing: 0.5px; }
.finance-row { border-bottom: 1px solid #f0f0f0; transition: background 0.2s; }
.finance-row:hover { background: #f8fbff; }
.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: #f44336; vertical-align: middle; }

.overdue-amount { font-weight: 600; }
.overdue-5d { color: #f44336; }
.overdue-1d { color: #f44336; }
.overdue-6d { color: #f44336; }
.overdue-56d { color: #d32f2f; }
.overdue-high { color: #d32f2f; background: rgba(211, 47, 47, 0.1); padding: 4px 8px; border-radius: 4px; }
.overdue-normal { color: #f57c00; 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: #333; }
.student-email { font-size: 12px; color: #666; }

.balance-cell { font-weight: 500; color: #1a1a1a; }
.due-cell { color: #666; }

.card-cell { text-align: center; }
.card-check { color: #4caf50; font-weight: bold; font-size: 16px; }

.priority-badge { display: inline-block; padding: 4px 12px; border-radius: 12px; font-size: 12px; font-weight: 600; }
.priority-high { background: #ffebee; color: #c62828; }
.priority-medium { background: #fff3e0; color: #f57c00; }
.priority-low { background: #f5f5f5; color: #666; }

.action-badge { display: inline-block; padding: 4px 12px; border-radius: 12px; font-size: 12px; font-weight: 500; }
.action-active { background: #e8f5e9; color: #2e7d32; }
.action-restructured { background: #fff3e0; color: #f57c00; }
.action-failed { background: #ffebee; color: #c62828; }

.btn-action-primary { padding: 8px 16px; background: #2196f3; color: white; border: none; border-radius: 6px; font-size: 13px; font-weight: 500; cursor: pointer; transition: background 0.2s; }
.btn-action-primary:hover { background: #1976d2; }

/* Finance Charts Section */
.finance-charts-section { margin-bottom: 32px; }
.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: #666; }
.legend-dot { width: 12px; height: 12px; border-radius: 50%; display: inline-block; }
.legend-line { width: 20px; height: 3px; background: #2196f3; 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 #f0f0f0; }
.chart-footer-stat { display: flex; flex-direction: column; gap: 4px; }
.footer-stat-label { font-size: 11px; color: #666; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; }
.footer-stat-value { font-size: 18px; font-weight: 700; }
.footer-stat-value.green { color: #4caf50; }
.footer-stat-value.blue { color: #2196f3; }
.footer-stat-value.orange { color: #ff9800; }

.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: #4caf50; }
.health-dot.orange { background: #ff9800; }
.health-dot.red { background: #f44336; }
.health-label { font-size: 13px; color: #666; font-weight: 500; }

/* Responsive for Finances */
@media (max-width: 1200px) {
  .finance-stats-pills { flex-wrap: wrap; }
  .focus-cards-grid { grid-template-columns: 1fr; }
  .finance-charts-grid { grid-template-columns: 1fr; }
}
@media (max-width: 768px) {
  .finance-stats-pills { flex-direction: column; }
  .finance-search-row { flex-direction: column; }
  .overdue-filter { width: 100%; }
  .chart-legend-info { flex-wrap: wrap; gap: 12px; }
  .chart-footer { flex-direction: column; gap: 12px; }
}

/* ===== Login Page Styles ===== */
.login-page { min-height: 100vh; display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, #0a3d62 0%, #1565c0 100%); }
.login-container { width: 100%; max-width: 440px; padding: 20px; }
.login-card { background: white; border-radius: 12px; 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: #0a3d62; border-radius: 50%; }
.login-logo-text { display: flex; flex-direction: column; }
.login-logo-title { font-size: 18px; font-weight: 700; color: #1a1a1a; }
.login-logo-subtitle { font-size: 13px; color: #666; }
.login-title { font-size: 24px; font-weight: 600; color: #1a1a1a; margin-bottom: 8px; }
.login-subtitle { font-size: 14px; color: #666; margin-bottom: 24px; }

.alert { padding: 12px 16px; border-radius: 6px; margin-bottom: 20px; font-size: 14px; }
.alert-error { background: #ffebee; color: #c62828; border: 1px solid #ef9a9a; }

.login-form { }
.form-group { margin-bottom: 20px; }
.form-label { display: block; font-size: 14px; font-weight: 500; color: #333; margin-bottom: 6px; }
.form-input { width: 100%; padding: 12px 16px; border: 1px solid #ddd; border-radius: 6px; font-size: 14px; transition: all 0.2s; }
.form-input:focus { outline: none; border-color: #2196f3; box-shadow: 0 0 0 3px rgba(33, 150, 243, 0.1); }
.form-input-error { border-color: #f44336; }
.form-error { display: block; margin-top: 6px; font-size: 12px; color: #f44336; }

.form-actions { margin-top: 24px; }
.btn-login { width: 100%; padding: 14px; background: #2196f3; color: white; border: none; border-radius: 6px; font-size: 15px; font-weight: 600; cursor: pointer; transition: background 0.2s; }
.btn-login:hover { background: #1976d2; }

.login-links { margin-top: 16px; text-align: center; }
.login-link { font-size: 13px; color: #2196f3; text-decoration: none; }
.login-link:hover { text-decoration: underline; }

.login-footer { margin-top: 32px; padding-top: 20px; border-top: 1px solid #f0f0f0; }
.login-footer-text { font-size: 13px; color: #666; text-align: center; margin: 0; }
.login-footer-link { color: #2196f3; 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, #e3f2fd 0%, #f3e5f5 100%); border: 1px solid #2196f3; 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: #2196f3; }
.auth-setting-text { display: flex; flex-direction: column; gap: 2px; }
.auth-setting-label { font-size: 11px; color: #666; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; }
.auth-setting-value { font-size: 13px; color: #1a1a1a; font-weight: 500; }
.auth-settings-actions { display: flex; gap: 8px; }
.btn-secondary-small { padding: 8px 16px; background: white; color: #2196f3; border: 1px solid #2196f3; border-radius: 6px; 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: #2196f3; color: white; }

.users-stats-row { display: flex; gap: 16px; margin-bottom: 24px; }
.user-stat-pill { background: white; border: 1px solid #e0e0e0; border-radius: 8px; padding: 16px 24px; text-align: center; flex: 1; }
.stat-pill-value { font-size: 28px; font-weight: 700; color: #1a1a1a; margin-bottom: 4px; }
.stat-pill-label { font-size: 12px; color: #666; }

.users-table-container { background: 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: #f8f9fa; border-bottom: 2px solid #e0e0e0; }
.users-table th { padding: 12px 16px; text-align: left; font-size: 11px; font-weight: 600; color: #666; letter-spacing: 0.5px; }
.user-row { border-bottom: 1px solid #f0f0f0; cursor: pointer; transition: background 0.2s; }
.user-row:hover { background: #f8fbff; }
.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: #2196f3; 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: #1a1a1a; }
.user-phone-table { font-size: 12px; color: #666; }
.email-cell { font-size: 14px; color: #2196f3; }
.date-cell { font-size: 13px; color: #666; }

.role-badge { display: inline-block; padding: 4px 12px; border-radius: 12px; font-size: 12px; font-weight: 500; }
.role-admin { background: #ffebee; color: #c62828; }
.role-staff { background: #fff3e0; color: #f57c00; }
.role-instructor { background: #e3f2fd; color: #1976d2; }
.role-student { background: #e8f5e9; color: #2e7d32; }

.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: #f5f5f5; }

.alert-success { background: #e8f5e9; color: #2e7d32; border: 1px solid #a5d6a7; padding: 12px 16px; border-radius: 6px; 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: #2196f3; 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: #1a1a1a; margin-bottom: 8px; }
.user-detail-meta { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.user-email-header { font-size: 14px; color: #666; }

.user-detail-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.user-detail-card { background: white; border: 1px solid #e0e0e0; border-radius: 8px; padding: 24px; }
.card-heading { font-size: 18px; font-weight: 600; color: #1a1a1a; 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 #f0f0f0; }
.info-row:last-child { border-bottom: none; padding-bottom: 0; }
.info-label { font-size: 13px; color: #666; font-weight: 500; }
.info-value { font-size: 14px; color: #1a1a1a; }
.code-text { font-family: monospace; font-size: 12px; background: #f5f5f5; padding: 2px 6px; border-radius: 3px; }

.security-actions { display: flex; gap: 12px; margin-top: 20px; padding-top: 20px; border-top: 1px solid #f0f0f0; }
.btn-danger { padding: 10px 20px; background: #f44336; color: white; border: none; border-radius: 6px; font-size: 14px; font-weight: 500; cursor: pointer; transition: background 0.2s; }
.btn-danger:hover { background: #d32f2f; }

/* User Form Page */
.user-form-page { max-width: 800px; }
.page-header-simple { margin-bottom: 32px; }
.form-container { background: white; border: 1px solid #e0e0e0; border-radius: 8px; padding: 32px; }

.user-form { }
.form-errors { background: #ffebee; border: 1px solid #ef9a9a; border-radius: 6px; padding: 16px; margin-bottom: 24px; }
.form-errors h4 { font-size: 14px; font-weight: 600; color: #c62828; margin-bottom: 8px; }
.form-errors ul { margin: 0; padding-left: 20px; }
.form-errors li { font-size: 13px; color: #c62828; margin-bottom: 4px; }

.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.form-hint { display: block; font-size: 12px; color: #666; margin-top: 4px; }
.form-actions-row { display: flex; justify-content: flex-end; gap: 12px; margin-top: 32px; padding-top: 24px; border-top: 1px solid #f0f0f0; }

/* 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: white; border: 1px solid #e0e0e0; border-radius: 8px; padding: 32px; }
.test-description { font-size: 14px; color: #666; 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: #1a1a1a; margin-bottom: 12px; }
.success-message { font-size: 15px; color: #666; margin-bottom: 32px; }

.magic-link-display { background: #f8f9fa; border: 1px solid #e0e0e0; border-radius: 8px; padding: 20px; margin-bottom: 24px; }
.link-label { font-size: 13px; color: #666; font-weight: 600; margin-bottom: 8px; }
.link-url { font-family: monospace; font-size: 12px; color: #2196f3; word-break: break-all; margin-bottom: 16px; background: white; padding: 12px; border-radius: 4px; }

.info-box { background: #e3f2fd; border: 1px solid #90caf9; border-radius: 8px; padding: 20px; margin-bottom: 24px; }
.info-box-title { font-size: 15px; font-weight: 600; color: #1976d2; margin-bottom: 12px; }
.info-box p { font-size: 14px; color: #666; line-height: 1.6; margin: 0; }
.info-list { margin: 0; padding-left: 24px; }
.info-list li { font-size: 14px; color: #666; margin-bottom: 8px; line-height: 1.5; }

/* ===== Regions Page Styles ===== */
.regions-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: #666; margin-top: 4px; }

/* Regions Map Layout */
.regions-map-layout { display: grid; grid-template-columns: 1.2fr 1fr; gap: 24px; margin-bottom: 32px; }

/* Map Container */
.map-container-card { background: white; border: 1px solid #e0e0e0; border-radius: 12px; 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: #1a1a1a; margin: 0; }

/* Metric Toggle Buttons */
.map-metric-toggles { display: flex; gap: 8px; }
.map-metric-btn { padding: 6px 14px; background: white; border: 1px solid #e0e0e0; border-radius: 20px; font-size: 12px; font-weight: 500; color: #666; cursor: pointer; transition: all 0.2s; display: flex; align-items: center; gap: 6px; }
.map-metric-btn:hover { border-color: #2196f3; color: #2196f3; }
.map-metric-btn.active { background: #2196f3; color: white; border-color: #2196f3; }
.map-metric-btn iconify-icon { width: 14px; height: 14px; }

/* Map SVG Wrapper */
.map-svg-wrapper { position: relative; width: 100%; height: 400px; background: #fafbfc; border: 1px solid #e8eaed; border-radius: 8px; overflow: hidden; }

/* US Map SVG */
.us-map-svg { width: 100%; height: 100%; }
.us-map-svg path { fill: #f5f5f5; stroke: white; stroke-width: 1.5; transition: all 0.2s; }
.us-map-svg path.has-data:hover { stroke: #2196f3; 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: 6px; 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: #666; }
.legend-gradient { width: 120px; height: 8px; background: linear-gradient(90deg, #e3f2fd 0%, #2196f3 50%, #1976d2 100%); border-radius: 4px; }

.map-footer-note { margin-top: 12px; text-align: center; font-size: 12px; color: #999; 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 */
.regions-right-column { display: flex; flex-direction: column; gap: 12px; }

/* Compact Stats Grid (3x2) */
.regions-stats-grid-compact { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.region-stat-card-compact { background: white; border: 1px solid #e0e0e0; border-radius: 6px; 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); }
.region-stat-card-compact:hover { box-shadow: 0 2px 8px rgba(0,0,0,0.1); transform: translateY(-1px); }
.region-stat-card-compact .region-stat-icon { width: 32px; height: 32px; flex-shrink: 0; }
.region-stat-card-compact .region-stat-icon iconify-icon { width: 16px; height: 16px; }
.region-stat-card-compact .region-stat-content { min-width: 0; }
.region-stat-card-compact .region-stat-label { font-size: 9px; line-height: 1.2; margin-bottom: 2px; text-transform: uppercase; letter-spacing: 0.3px; }
.region-stat-card-compact .region-stat-value { font-size: 16px; font-weight: 700; line-height: 1; }

/* Region Charts Stack */
.region-charts-stack { display: flex; flex-direction: column; gap: 12px; flex: 1; }
.region-chart-card-mini { background: white; border: 1px solid #e0e0e0; 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: #1a1a1a; 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 #e0e0e0; border-radius: 8px; padding: 20px; display: flex; align-items: center; gap: 16px; }
.region-stat-icon { width: 48px; height: 48px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 20px; flex-shrink: 0; }
.icon-regions { background: #e3f2fd; }
.icon-locations { background: #e8f5e9; }
.icon-courses-stat { background: #f3e5f5; }
.icon-students-stat { background: #fff3e0; }
.icon-enrollment-stat { background: #fce4ec; }
.region-stat-content { flex: 1; }
.region-stat-label { font-size: 12px; color: #666; margin-bottom: 4px; }
.region-stat-value { font-size: 24px; font-weight: 700; color: #1a1a1a; }

/* Regions Search Row */
.regions-search-row { display: flex; gap: 12px; margin-bottom: 16px; }
.regions-search-row .search-box { flex: 1; }
.status-filter { padding: 10px 16px; border: 1px solid #ddd; border-radius: 6px; font-size: 14px; color: #333; background: white; cursor: pointer; }

/* Regions Table */
.regions-table-container { background: white; border-radius: 8px; box-shadow: 0 1px 3px rgba(0,0,0,0.1); overflow: hidden; }
.regions-table { width: 100%; border-collapse: collapse; }
.regions-table thead { background: #f8f9fa; border-bottom: 2px solid #e0e0e0; }
.regions-table th { padding: 12px 16px; text-align: left; font-size: 11px; font-weight: 600; color: #666; letter-spacing: 0.5px; }
.region-row { border-bottom: 1px solid #f0f0f0; cursor: pointer; transition: background 0.2s; }
.region-row:hover { background: #f8fbff; }
.regions-table td { padding: 16px; vertical-align: middle; }

.region-cell { display: flex; align-items: center; gap: 12px; }
.region-icon-badge { width: 40px; height: 40px; background: #e3f2fd; border-radius: 8px; display: flex; align-items: center; justify-content: center; font-size: 20px; flex-shrink: 0; }
.region-info { display: flex; flex-direction: column; gap: 2px; }
.region-name { font-size: 14px; font-weight: 600; color: #1a1a1a; }
.region-code { font-size: 12px; color: #666; }

.locations-courses-cell { display: flex; flex-direction: column; gap: 2px; }
.cell-primary { font-size: 14px; color: #1a1a1a; }
.cell-secondary { font-size: 12px; color: #666; }

.enrollment-cell-region { min-width: 120px; }
.enrollment-fraction-text { font-size: 14px; font-weight: 600; color: #1a1a1a; margin-bottom: 2px; }
.enrollment-percent-text { font-size: 12px; color: #666; margin-bottom: 6px; }
.enrollment-progress-bar { height: 6px; background: #e0e0e0; border-radius: 3px; overflow: hidden; }
.enrollment-progress-fill { height: 100%; background: #2196f3; border-radius: 3px; }

.compliance-badge { display: inline-block; padding: 4px 12px; border-radius: 12px; font-size: 12px; font-weight: 500; }
.compliance-ok { background: #e8f5e9; color: #2e7d32; }
.compliance-review { background: #fff3e0; color: #f57c00; }
.compliance-bad { background: #ffebee; color: #c62828; }

.status-planning { background: #e3f2fd; color: #1976d2; }

.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: #f5f5f5; }

/* ===== Region Detail Page ===== */
.region-detail-page { max-width: 1400px; }
.region-detail-header { display: flex; justify-content: space-between; align-items: start; margin-bottom: 24px; }
.region-header-info { display: flex; gap: 20px; }
.region-header-icon { width: 64px; height: 64px; background: #e3f2fd; border-radius: 12px; display: flex; align-items: center; justify-content: center; font-size: 32px; flex-shrink: 0; }
.region-title-row { display: flex; align-items: center; gap: 12px; margin-bottom: 8px; flex-wrap: wrap; }
.region-detail-title { font-size: 24px; font-weight: 600; color: #1a1a1a; margin: 0; }
.region-header-meta { display: flex; align-items: center; gap: 12px; margin-bottom: 8px; flex-wrap: wrap; }
.meta-code { font-size: 13px; color: #666; }
.region-header-counts { font-size: 13px; color: #666; }

/* Region Detail Stats */
.region-stats-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-bottom: 32px; }
.region-stat-card-detail { background: white; border: 1px solid #e0e0e0; border-radius: 8px; padding: 20px; display: flex; align-items: center; gap: 16px; }
.stat-students-green { background: #e8f5e9; color: #2e7d32; }
.stat-locations-blue { background: #e3f2fd; color: #1976d2; }
.stat-enrollment-purple { background: #f3e5f5; color: #7b1fa2; }
.stat-completion-orange { background: #fff3e0; color: #f57c00; }

/* Region Tabs */
.region-tabs { display: flex; gap: 8px; border-bottom: 2px solid #f0f0f0; margin-bottom: 32px; }
.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; }
.region-section-card { background: white; border: 1px solid #e0e0e0; 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: #666; }
.performance-value { font-size: 14px; font-weight: 600; color: #1a1a1a; }
.performance-bar { height: 8px; background: #e0e0e0; border-radius: 4px; overflow: hidden; }
.performance-fill { height: 100%; background: #2196f3; border-radius: 4px; }
.performance-bar-green { background: #e8f5e9; }
.performance-fill-green { background: #4caf50; }

.performance-stats-row { display: flex; justify-content: space-around; padding-top: 20px; border-top: 1px solid #f0f0f0; }
.performance-stat-box { text-align: center; }
.perf-stat-value { font-size: 24px; font-weight: 700; color: #1a1a1a; margin-bottom: 4px; }
.perf-stat-label { font-size: 12px; color: #666; }

/* Top Performing Locations */
.top-locations-list { display: flex; flex-direction: column; gap: 12px; }
.top-location-item { display: flex; align-items: center; gap: 12px; padding: 12px; background: #f8f9fa; border-radius: 8px; }
.top-location-icon { font-size: 20px; flex-shrink: 0; }
.top-location-info { flex: 1; }
.top-location-name { font-size: 14px; font-weight: 500; color: #1a1a1a; margin-bottom: 2px; }
.top-location-city { font-size: 12px; color: #666; }
.top-location-stats { text-align: right; }
.top-location-percent { font-size: 18px; font-weight: 700; color: #1a1a1a; }
.top-location-enrollment { font-size: 11px; color: #666; }

/* 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: #999; }

/* 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: #f8f9fa; border-radius: 8px; }
.program-dist-left { }
.program-dist-right { text-align: right; }
.program-dist-courses { font-size: 14px; font-weight: 600; color: #1a1a1a; }
.program-dist-students { font-size: 12px; color: #666; }

.empty-state-small { padding: 40px 20px; text-align: center; font-size: 13px; color: #999; }

/* Region Locations Table */
.region-locations-table { width: 100%; background: white; border: 1px solid #e0e0e0; border-radius: 8px; border-collapse: collapse; }
.region-locations-table thead { background: #f8f9fa; }
.region-locations-table th { padding: 12px 16px; text-align: left; font-size: 11px; font-weight: 600; color: #666; letter-spacing: 0.5px; border-bottom: 1px solid #e0e0e0; }
.region-locations-table td { padding: 16px; font-size: 14px; border-bottom: 1px solid #f0f0f0; vertical-align: middle; }
.region-locations-table tbody tr:last-child td { border-bottom: none; }

.location-cell-region { display: flex; align-items: center; gap: 12px; }
.location-icon-small { width: 36px; height: 36px; background: #e3f2fd; border-radius: 6px; display: flex; align-items: center; justify-content: center; font-size: 18px; flex-shrink: 0; }
.location-info-region { display: flex; flex-direction: column; gap: 2px; }
.location-name-region { font-size: 14px; font-weight: 500; color: #1a1a1a; }
.location-subtitle-region { font-size: 12px; color: #666; }

.contact-cell-region { display: flex; flex-direction: column; gap: 4px; }
.contact-phone-region { font-size: 13px; color: #666; }
.contact-email-region { font-size: 13px; color: #2196f3; }

.address-cell-region { display: flex; flex-direction: column; gap: 2px; }
.address-line-region { font-size: 13px; color: #1a1a1a; }
.address-city-region { font-size: 12px; color: #666; }

.utilization-cell { min-width: 100px; }
.utilization-fraction { font-size: 14px; font-weight: 600; color: #1a1a1a; margin-bottom: 2px; }
.utilization-percent { font-size: 11px; color: #666; margin-bottom: 6px; }
.utilization-bar { height: 6px; background: #e0e0e0; border-radius: 3px; overflow: hidden; }
.utilization-fill { height: 100%; background: #2196f3; border-radius: 3px; }

/* Responsive for Regions */
@media (max-width: 1200px) {
  .regions-map-layout { grid-template-columns: 1fr; }
  .regions-stats-grid-compact { grid-template-columns: repeat(3, 1fr); }
  .regions-stats-grid { grid-template-columns: repeat(3, 1fr); }
  .region-stats-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 968px) {
  .regions-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; }
  .region-stats-grid { grid-template-columns: 1fr; }
  .map-metric-toggles { flex-wrap: wrap; }
  .chart-container-mini { height: 200px; }
  .region-charts-stack { gap: 16px; }
}
@media (max-width: 768px) {
  .regions-stats-grid-compact { grid-template-columns: 1fr; }
  .regions-stats-grid { grid-template-columns: 1fr; }
  .page-header-with-subtitle { flex-direction: column; gap: 20px; }
  .region-detail-header { flex-direction: column; gap: 20px; }
  .map-header { flex-direction: column; align-items: start; gap: 12px; }
  .header-left { max-width: 100%; }
  .sparkline-chart { height: 40px; }
}

/* ===== Location Landing Page Styles ===== */
.location-landing-body {
  min-height: 100vh;
  font-family: 'Montserrat', -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;
}

.location-landing-wrapper {
  display: grid;
  grid-template-columns: 1fr 380px;
  gap: 32px;
  max-width: 1400px;
  margin: 0 auto;
  padding: 32px;
  min-height: 100vh;
}

/* Location Hero Section */
.location-hero {
  background: linear-gradient(135deg, #3d6a7a 0%, #4a7a8a 100%);
  border-radius: 16px;
  padding: 40px;
  margin-bottom: 24px;
  text-align: center;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
}

.location-hero-inner {
  max-width: 600px;
  margin: 0 auto;
}

.location-city {
  font-size: 42px;
  font-weight: 700;
  color: white;
  margin-bottom: 8px;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.location-tagline {
  font-size: 18px;
  color: rgba(255, 255, 255, 0.9);
  margin-bottom: 28px;
}

.clinical-location {
  background: rgba(255, 255, 255, 0.15);
  border-radius: 12px;
  padding: 20px;
  margin-bottom: 20px;
}

.clinical-label {
  display: block;
  font-size: 12px;
  font-weight: 600;
  color: #ff6b6b;
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: 8px;
}

.clinical-link {
  display: block;
  font-size: 16px;
  font-weight: 600;
  color: #4ecdc4;
  text-decoration: none;
  margin-bottom: 4px;
}

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

.clinical-address {
  display: block;
  font-size: 14px;
  color: #4ecdc4;
}

.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: linear-gradient(135deg, #3d6a7a 0%, #4a7a8a 100%);
  border-radius: 16px;
  padding: 24px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
}

.loc-card-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
}

.loc-card-label {
  font-size: 11px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.7);
  text-transform: uppercase;
  letter-spacing: 1px;
  background: rgba(255, 255, 255, 0.1);
  padding: 4px 10px;
  border-radius: 4px;
}

.loc-card-weather {
  color: #ffd93d;
  display: flex;
  align-items: center;
}

.loc-open-seats {
  margin-left: auto;
  font-size: 12px;
  font-weight: 600;
  color: white;
  background: #4caf50;
  padding: 6px 14px;
  border-radius: 20px;
}

.loc-course-title {
  font-size: 22px;
  font-weight: 700;
  color: white;
  margin-bottom: 16px;
}

.loc-course-meta {
  display: flex;
  gap: 24px;
  margin-bottom: 20px;
  padding: 12px 16px;
  background: rgba(0, 0, 0, 0.15);
  border-radius: 8px;
}

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

.loc-meta-label {
  font-size: 11px;
  color: rgba(255, 255, 255, 0.6);
  text-transform: uppercase;
}

.loc-meta-value {
  font-size: 14px;
  font-weight: 600;
  color: white;
}

.loc-enroll-btn {
  display: block;
  width: 100%;
  padding: 14px;
  background: #4caf50;
  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: #43a047;
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(76, 175, 80, 0.4);
}

.loc-tuition-section {
  border-top: 1px solid rgba(255, 255, 255, 0.15);
  padding-top: 20px;
}

.loc-tuition-title {
  font-size: 16px;
  font-weight: 600;
  color: white;
  margin-bottom: 16px;
}

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

.loc-tuition-option {
  background: rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  padding: 14px;
  text-align: center;
}

.loc-tuition-name {
  font-size: 12px;
  font-weight: 600;
  color: white;
  margin-bottom: 6px;
}

.loc-tuition-amount {
  font-size: 20px;
  font-weight: 700;
  color: #4ecdc4;
}

.loc-tuition-desc {
  font-size: 10px;
  color: rgba(255, 255, 255, 0.7);
  line-height: 1.4;
}

/* Course Information Documents */
.course-documents-section {
  background: linear-gradient(135deg, #3d6a7a 0%, #4a7a8a 100%);
  border-radius: 16px;
  padding: 24px;
  margin-bottom: 24px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
}

.section-title-dark {
  font-size: 16px;
  font-weight: 600;
  color: white;
  margin-bottom: 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.15);
}

.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: rgba(255, 255, 255, 0.15);
  border-radius: 8px;
  color: white;
  text-decoration: none;
  font-size: 13px;
  font-weight: 500;
  transition: all 0.2s;
}

.doc-btn:hover {
  background: rgba(255, 255, 255, 0.25);
  transform: translateY(-2px);
}

/* Marketing Sections */
.marketing-section {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-bottom: 24px;
}

.marketing-block {
  background: linear-gradient(135deg, #4a7a8a 0%, #5a8a9a 100%);
  border-radius: 16px;
  padding: 28px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
}

.marketing-title {
  font-size: 18px;
  font-weight: 700;
  color: white;
  margin-bottom: 16px;
  text-align: center;
}

.marketing-text {
  font-size: 14px;
  color: rgba(255, 255, 255, 0.9);
  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: rgba(255, 255, 255, 0.9);
  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: #4ecdc4;
  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: #4ecdc4;
  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: white;
}

.highlights-list li a,
.included-list li a,
.benefits-list li a,
.unique-list li a {
  color: #4ecdc4;
  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: rgba(255, 255, 255, 0.9);
  text-align: center;
  margin-bottom: 20px;
}

.strike-price {
  text-decoration: line-through;
  color: rgba(255, 255, 255, 0.5);
}

.actual-price {
  font-weight: 700;
  color: #4ecdc4;
  font-size: 20px;
}

/* Footer */
.location-footer {
  background: linear-gradient(135deg, #3d6a7a 0%, #4a7a8a 100%);
  border-radius: 16px;
  padding: 32px;
  text-align: center;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
}

.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: rgba(255, 255, 255, 0.1);
  padding: 16px 24px;
  border-radius: 12px;
  color: white;
}

.footer-badge.bbb-badge {
  flex-direction: row;
  gap: 8px;
  font-weight: 600;
}

.badge-year {
  font-size: 20px;
  font-weight: 700;
  color: #4ecdc4;
}

.badge-text {
  font-size: 11px;
  line-height: 1.3;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.footer-licensing {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.7);
}

/* Application Sidebar */
.application-sidebar {
  position: sticky;
  top: 32px;
  align-self: start;
}

.application-sidebar .application-card {
  background: white;
  border-radius: 12px;
  padding: 32px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
}

.application-sidebar .application-title {
  font-size: 20px;
  font-weight: 600;
  color: #1a1a1a;
  margin-bottom: 8px;
}

.application-sidebar .application-subtitle {
  font-size: 14px;
  color: #666;
  margin-bottom: 24px;
  line-height: 1.5;
}

/* Location Landing Responsive */
@media (max-width: 1100px) {
  .location-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) {
  .location-hero {
    padding: 28px 20px;
  }

  .location-city {
    font-size: 32px;
  }

  .location-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: #f5f7fa;
  min-height: 100vh;
  font-family: 'Montserrat', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  -webkit-font-smoothing: antialiased;
}

/* Header */
.app-form-header {
  background: white;
  padding: 16px 32px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid #e0e0e0;
}

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

.app-form-logo-icon {
  width: 32px;
  height: 32px;
  background: #0a3d62;
  border-radius: 50%;
}

.app-form-logo-text {
  font-size: 16px;
  font-weight: 600;
  color: #1a1a1a;
}

.app-form-phone {
  font-size: 14px;
  color: #666;
  text-decoration: none;
}

.app-form-phone:hover {
  color: #2196f3;
}

/* When app-form-header is used on landing page with background */
.landing-body .app-form-header {
  margin-bottom: 48px;
}

/* Progress Bar */
.app-form-progress-bar {
  background: #0a3d62;
  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: white;
  color: #0a3d62;
}

.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: #2196f3;
  text-decoration: none;
  margin-bottom: 24px;
}

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

.app-form-title-section {
  background: white;
  border-radius: 12px;
  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: #1a1a1a;
  margin-bottom: 8px;
}

.app-form-subtitle {
  font-size: 15px;
  color: #666;
}

/* Form Sections */
.form-section {
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: 24px;
  background: white;
  border-radius: 12px;
  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: #0a3d62;
  margin-bottom: 12px;
}

.section-description {
  font-size: 13px;
  color: #666;
  line-height: 1.6;
  margin-bottom: 16px;
}

.section-bullets {
  list-style: none;
  padding: 0;
}

.section-bullets li {
  font-size: 13px;
  color: #666;
  padding: 4px 0;
  padding-left: 16px;
  position: relative;
}

.section-bullets li:before {
  content: "•";
  position: absolute;
  left: 0;
  color: #2196f3;
}

.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: #333;
  display: flex;
  align-items: center;
  gap: 4px;
}

.info-icon {
  color: #999;
  cursor: help;
}

.field-input,
.field-select {
  padding: 12px 14px;
  border: 1px solid #e0e0e0;
  border-radius: 6px;
  font-size: 14px;
  font-family: inherit;
  color: #333;
  background: white;
  transition: all 0.2s;
}

.field-input:focus,
.field-select:focus {
  outline: none;
  border-color: #2196f3;
  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: #999;
  font-style: italic;
}

/* SSN Fields */
.ssn-fields {
  display: flex;
  gap: 8px;
}

.ssn-input {
  text-align: center;
}

.ssn-input:first-child {
  width: 70px;
}

.ssn-input:nth-child(2) {
  width: 55px;
}

.ssn-input:nth-child(3) {
  width: 80px;
}

/* Subsections */
.subsection {
  padding-top: 16px;
  border-top: 1px solid #f0f0f0;
}

.subsection:first-child {
  padding-top: 0;
  border-top: none;
}

.subsection-title {
  font-size: 15px;
  font-weight: 600;
  color: #1a1a1a;
  margin-bottom: 8px;
}

.subsection-description {
  font-size: 13px;
  color: #666;
  margin-bottom: 16px;
}

/* Checkbox */
.checkbox-label {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 14px;
  color: #333;
  cursor: pointer;
}

.field-checkbox {
  width: 18px;
  height: 18px;
  margin-top: 2px;
  accent-color: #2196f3;
  cursor: pointer;
}

/* Radio Buttons */
.radio-group {
  display: flex;
  gap: 24px;
}

.radio-label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  color: #333;
  cursor: pointer;
}

.field-radio {
  width: 18px;
  height: 18px;
  accent-color: #2196f3;
  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: #666;
  line-height: 1.6;
  margin: 0;
}

/* Submit Button */
.form-submit {
  text-align: center;
}

.submit-btn {
  display: inline-block;
  width: 100%;
  max-width: 400px;
  padding: 18px 48px;
  background: linear-gradient(135deg, #2196f3 0%, #1976d2 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, #1976d2 0%, #1565c0 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: #f5f7fa;
  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: white;
  border-radius: 12px;
  padding: 40px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
}

.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;
  }
}

/* ===== Prevent Page Styles ===== */
.prevent-page-body {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  font-family: 'Montserrat', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  -webkit-font-smoothing: antialiased;
  background: #f5f7fa;
}

/* 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: #2196f3;
  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: #ff9800;
}

.prevent-title {
  font-size: 28px;
  font-weight: 600;
  color: #1a3a4a;
  line-height: 1.4;
  margin-bottom: 16px;
  font-style: italic;
}

.prevent-subtitle {
  font-size: 16px;
  color: #666;
  margin-bottom: 32px;
}

.prevent-call-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 16px 32px;
  background: linear-gradient(135deg, #2196f3 0%, #1976d2 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, #1976d2 0%, #1565c0 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: #666;
  margin-bottom: 16px;
}

.override-form {
  display: flex;
  gap: 12px;
  justify-content: center;
}

.override-input {
  padding: 14px 18px;
  border: 1px solid #e0e0e0;
  border-radius: 6px;
  font-size: 14px;
  font-family: inherit;
  width: 280px;
  transition: all 0.2s;
}

.override-input:focus {
  outline: none;
  border-color: #2196f3;
  box-shadow: 0 0 0 3px rgba(33, 150, 243, 0.1);
}

.override-input::placeholder {
  color: #999;
}

.override-btn {
  padding: 14px 24px;
  background: white;
  border: 1px solid #1a3a4a;
  border-radius: 6px;
  font-size: 14px;
  font-weight: 500;
  font-family: inherit;
  color: #1a3a4a;
  cursor: pointer;
  transition: all 0.2s;
}

.override-btn:hover {
  background: #1a3a4a;
  color: white;
}

/* Prevent Footer */
.prevent-footer {
  border-top: 1px solid #e0e0e0;
  padding: 48px 32px;
  background: 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: #2196f3;
  border-radius: 12px;
  margin: 0 auto;
  position: relative;
}

.footer-logo-icon::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 28px;
  height: 28px;
  border: 3px solid white;
  border-radius: 4px;
  border-top-width: 8px;
}

.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: #1a3a4a;
  text-decoration: none;
  transition: color 0.2s;
}

.footer-nav a:hover {
  color: #2196f3;
}

.footer-nav-dot {
  width: 4px;
  height: 4px;
  background: #2196f3;
  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: #666;
  text-decoration: none;
}

.footer-legal a:hover {
  color: #2196f3;
}

.footer-divider {
  color: #ccc;
}

.footer-social {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
}

.social-link {
  width: 40px;
  height: 40px;
  border: 2px solid #2196f3;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #2196f3;
  transition: all 0.2s;
}

.social-link:hover {
  background: #2196f3;
  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;
  }
}

/* ===== Approved/Cart Page Styles ===== */

/* Progress bar completed state */
.progress-step.completed .step-number {
  background: #4caf50;
  color: white;
}

.progress-step.completed .step-text {
  color: rgba(255, 255, 255, 0.8);
}

.progress-line.completed {
  background: #4caf50;
}

/* Approved Main */
.approved-main {
  padding: 32px;
  background: #f5f7fa;
  min-height: calc(100vh - 120px);
}

.approved-header {
  text-align: center;
  margin-bottom: 32px;
}

.approved-title {
  font-size: 32px;
  font-weight: 700;
  color: #0a3d62;
  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: #333;
  margin-bottom: 4px;
}

.approved-tagline {
  font-size: 14px;
  color: #666;
}

.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: white;
  border-radius: 12px;
  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: #1a1a1a;
  margin-bottom: 4px;
}

.card-subtitle {
  font-size: 13px;
  color: #666;
  margin-bottom: 4px;
}

.card-note {
  font-size: 12px;
  color: #999;
  font-style: italic;
}

/* Badges */
.badge {
  font-size: 11px;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: 4px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.badge-required {
  background: #e3f2fd;
  color: #1976d2;
}

.badge-optional {
  background: #e8f5e9;
  color: #388e3c;
}

.badge-popular {
  background: #fff3e0;
  color: #f57c00;
  font-size: 10px;
  padding: 2px 8px;
}

/* Selected Course */
.selected-course {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 16px;
  background: #f8fbff;
  border-radius: 8px;
  border: 1px solid #e3f2fd;
}

.course-icon {
  width: 48px;
  height: 48px;
  background: #e3f2fd;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.course-icon iconify-icon {
  color: #2196f3;
}

.course-icon.icon-purple {
  background: #f3e5f5;
}

.course-icon.icon-purple iconify-icon {
  color: #9c27b0;
}

.course-details {
  flex: 1;
}

.course-name {
  font-size: 15px;
  font-weight: 600;
  color: #1a1a1a;
  margin-bottom: 4px;
}

.course-name-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 4px;
}

.course-desc {
  font-size: 13px;
  color: #666;
  margin-bottom: 8px;
}

.course-price {
  font-size: 16px;
  font-weight: 700;
  color: #2196f3;
}

.course-price.free {
  color: #4caf50;
}

.course-pricing {
  display: flex;
  align-items: center;
  gap: 8px;
}

.course-price-original {
  font-size: 14px;
  color: #999;
  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: white;
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.2s;
}

.supplemental-course-option:hover {
  border-color: #2196f3;
  background: #f8fbff;
}

.course-checkbox {
  width: 20px;
  height: 20px;
  margin-top: 14px;
  accent-color: #2196f3;
  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: #999;
  font-size: 13px;
}

.supplemental-footer iconify-icon {
  color: #ccc;
}

/* Cart Sidebar */
.cart-sidebar {
  position: sticky;
  top: 24px;
}

.cart-summary-card {
  background: white;
  border-radius: 12px;
  padding: 24px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

.cart-title {
  font-size: 16px;
  font-weight: 600;
  color: #1a1a1a;
  margin-bottom: 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid #f0f0f0;
}

.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: #333;
}

.cart-item-price {
  font-size: 14px;
  font-weight: 600;
  color: #1a1a1a;
}

.cart-total {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 0;
  border-top: 1px solid #f0f0f0;
  margin-bottom: 20px;
}

.cart-total-label {
  font-size: 15px;
  font-weight: 600;
  color: #1a1a1a;
}

.cart-total-amount {
  font-size: 20px;
  font-weight: 700;
  color: #1a1a1a;
}

/* Payment Options */
.payment-options {
  margin-bottom: 20px;
}

.payment-options-title {
  font-size: 14px;
  font-weight: 600;
  color: #1a1a1a;
  margin-bottom: 12px;
}

.payment-option {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px;
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  margin-bottom: 10px;
  cursor: pointer;
  transition: all 0.2s;
}

.payment-option:hover {
  border-color: #2196f3;
}

.payment-option:has(.payment-radio:checked) {
  border-color: #2196f3;
  background: #f8fbff;
}

.payment-radio {
  width: 18px;
  height: 18px;
  accent-color: #2196f3;
  cursor: pointer;
}

.payment-option-icon {
  width: 36px;
  height: 36px;
  background: #f5f7fa;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #666;
}

.payment-option-details {
  flex: 1;
}

.payment-option-name {
  display: block;
  font-size: 14px;
  font-weight: 600;
  color: #1a1a1a;
  margin-bottom: 2px;
}

.payment-option-desc {
  display: block;
  font-size: 12px;
  color: #666;
}

.continue-payment-btn {
  width: 100%;
  padding: 16px;
  background: #1a3a4a;
  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: #0a2a3a;
}

.cart-footnote {
  font-size: 11px;
  color: #999;
  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: #666;
  margin-top: 4px;
}

.dev-section {
  background: white;
  border-radius: 8px;
  padding: 24px;
  margin-bottom: 24px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.dev-section-title {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 18px;
  font-weight: 600;
  color: #1a1a1a;
  margin-bottom: 8px;
}

.dev-section-title iconify-icon {
  color: #2196f3;
}

.dev-section-desc {
  font-size: 14px;
  color: #666;
  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: #f8fbff;
  border: 1px solid #e3f2fd;
  border-radius: 8px;
  width: 100%;
  max-width: 500px;
}

.flow-number {
  width: 32px;
  height: 32px;
  background: #2196f3;
  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: #2196f3;
}

.flow-name {
  font-size: 15px;
  font-weight: 600;
  color: #1a1a1a;
  transition: color 0.2s;
}

.flow-path {
  font-size: 12px;
  color: #666;
  font-family: monospace;
}

.flow-arrow {
  padding: 8px 0;
  color: #ccc;
}

/* Dev Status */
.dev-status {
  font-size: 11px;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: 12px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.dev-status.status-complete {
  background: #e8f5e9;
  color: #388e3c;
}

.dev-status.status-in_progress {
  background: #fff3e0;
  color: #f57c00;
}

.dev-status.status-planned {
  background: #f5f5f5;
  color: #666;
}

/* 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: #666;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  border-bottom: 1px solid #e0e0e0;
  background: #f8f9fa;
}

.dev-table td {
  padding: 16px;
  font-size: 14px;
  border-bottom: 1px solid #f0f0f0;
  vertical-align: middle;
}

.dev-table tbody tr:hover {
  background: #f8fbff;
}

.page-name-cell {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 500;
}

.page-name-cell iconify-icon {
  color: #2196f3;
}

.desc-cell {
  color: #666;
  max-width: 300px;
}

.endpoint-code {
  background: #f5f5f5;
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 13px;
  color: #e91e63;
}

.dev-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  background: white;
  border: 1px solid #e0e0e0;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 500;
  color: #333;
  text-decoration: none;
  transition: all 0.2s;
}

.dev-btn:hover {
  border-color: #2196f3;
  color: #2196f3;
  background: #f8fbff;
}

/* 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: #f8f9fa;
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  text-decoration: none;
  transition: all 0.2s;
}

.quick-link-card:hover {
  border-color: #2196f3;
  background: #f8fbff;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

.quick-link-icon {
  width: 40px;
  height: 40px;
  background: #e3f2fd;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #2196f3;
  flex-shrink: 0;
}

.quick-link-content {
  flex: 1;
  min-width: 0;
}

.quick-link-name {
  display: block;
  font-size: 14px;
  font-weight: 600;
  color: #1a1a1a;
  margin-bottom: 2px;
}

.quick-link-path {
  display: block;
  font-size: 12px;
  color: #666;
  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;
  }
}