/**
 * ScheduleMyClasses Component Library
 * Reusable UI components with consistent styling
 * Created: September 2025
 * Updated: September 9, 2025 - Fixed @extend syntax, added Bootstrap compatibility
 */

/* === BASE BUTTON COMPONENT === */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: var(--btn-padding-base);
  border: 1px solid transparent;
  border-radius: var(--radius-base);
  font-family: var(--font-family-base);
  font-size: var(--btn-font-size);
  font-weight: var(--font-weight-medium);
  line-height: var(--line-height-tight);
  text-decoration: none;
  text-align: center;
  cursor: pointer;
  transition: var(--transition-base);
  min-height: var(--btn-height-base);
  
  /* Disable user selection */
  user-select: none;
  -webkit-user-select: none;
  
  /* Focus states */
  &:focus-visible {
    outline: 2px solid var(--color-primary-500);
    outline-offset: 2px;
  }
  
  /* Disabled state */
  &:disabled,
  &.disabled {
    opacity: 0.6;
    cursor: not-allowed;
    pointer-events: none;
  }
}

/* === BUTTON VARIANTS === */

/* Primary Button */
.btn--primary {
  background: var(--gradient-primary);
  color: white;
  border-color: var(--color-primary-500);
  box-shadow: var(--shadow-button);
  
  &:hover {
    transform: translateY(-1px);
    box-shadow: var(--shadow-button-hover), 0 6px 20px rgba(102, 126, 234, 0.4);
    color: white;
    text-decoration: none;
  }
  
  &:active {
    transform: translateY(0);
  }
}

/* Secondary Button */
.btn--secondary {
  background: transparent;
  color: var(--color-primary-500);
  border-color: var(--color-primary-500);
  
  &:hover {
    background: var(--gradient-primary);
    color: white;
    transform: translateY(-1px);
    box-shadow: var(--shadow-button-hover), 0 6px 15px rgba(102, 126, 234, 0.3);
    text-decoration: none;
  }
  
  &:active {
    transform: translateY(0);
  }
}

/* Danger Button */
.btn--danger {
  background: var(--gradient-warm);
  color: white;
  border-color: var(--color-accent-gold);
  
  &:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(255, 215, 0, 0.4);
    color: white;
    text-decoration: none;
  }
  
  &:active {
    transform: translateY(0);
  }
}

/* Success Button */
.btn--success {
  background: var(--gradient-success);
  color: white;
  border-color: var(--color-success-500);
  
  &:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 15px rgba(40, 167, 69, 0.3);
    color: white;
    text-decoration: none;
  }
  
  &:active {
    transform: translateY(0);
  }
}

/* === BUTTON SIZES === */

.btn--sm {
  padding: var(--btn-padding-sm);
  font-size: var(--font-size-xs);
  min-height: var(--btn-height-sm);
  gap: var(--space-1);
}

.btn--lg {
  padding: var(--btn-padding-lg);
  font-size: var(--font-size-lg);
  min-height: var(--btn-height-lg);
  gap: var(--space-3);
}

/* === BUTTON GROUPS === */
.btn-group {
  display: flex;
  gap: var(--space-3);
  
  &--center {
    justify-content: center;
  }
  
  &--end {
    justify-content: flex-end;
  }
  
  &--full {
    width: 100%;
    
    .btn {
      flex: 1;
    }
  }
}

/* === CARD COMPONENT === */
.card {
  background: white;
  border-radius: var(--card-radius);
  box-shadow: var(--card-shadow);
  overflow: hidden;
  transition: var(--transition-base);
  
  &:hover {
    transform: translateY(-2px);
    box-shadow: var(--card-shadow-hover);
  }
}

.card__header {
  background: var(--gradient-primary);
  color: white;
  padding: var(--space-6);
  border: none;
  font-weight: var(--font-weight-semibold);
  font-size: var(--font-size-lg);
  display: flex;
  align-items: center;
  gap: var(--space-3);
  
  i {
    font-size: var(--font-size-xl);
    opacity: 0.9;
  }
}

.card__body {
  padding: var(--card-padding);
}

.card__footer {
  padding: var(--space-4) var(--card-padding);
  border-top: 1px solid var(--color-neutral-200);
  background: var(--color-neutral-50);
}



/* === COMING SOON FEATURES === */
.main-card--disabled {
  opacity: 0.6;
  cursor: default;
  pointer-events: none;
  position: relative;
}

.main-card--disabled .main-card-icon {
  opacity: 0.7;
}

.coming-soon-badge {
  display: inline-block;
  background: var(--color-warning-500);
  color: white;
  font-size: 0.75rem;
  font-weight: var(--font-weight-semibold);
  padding: 0.25rem 0.5rem;
  border-radius: var(--radius-full);
  margin-left: var(--space-2);
  text-transform: uppercase;
  letter-spacing: 0.025em;
}

/* === SECTION DIVIDER === */
.section-divider {
  margin: var(--space-8) 0 var(--space-6) 0;
  text-align: center;
}

.section-title {
  font-size: 1.5rem;
  font-weight: var(--font-weight-semibold);
  color: var(--color-neutral-800);
  margin-bottom: 0;
}


/* === DASHBOARD CARD VARIANT === */
.dashboard-card {
  /* Modern card with gradient background */
  background: var(--gradient-card);
  border: 1px solid rgba(102, 126, 234, 0.1);
  border-radius: var(--card-radius);
  box-shadow: var(--shadow-card);
  overflow: hidden;
  transition: all 0.3s ease;
  margin-bottom: var(--space-8);
  
  /* Enhanced hover effect */
  position: relative;
  
  &::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: var(--gradient-primary);
    transform: scaleX(0);
    transition: var(--transition-base);
  }
  
  &:hover {
    box-shadow: var(--shadow-card-hover);
    transform: translateY(-2px);
  }
  
  &:hover::before {
    transform: scaleX(1);
  }
}

.dashboard-card__header {
  /* Copy .card__header styles */
  background: var(--gradient-primary);
  color: white;
  padding: var(--space-6);
  border: none;
  font-weight: var(--font-weight-semibold);
  font-size: var(--font-size-lg);
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.dashboard-form {
  /* Copy .card__body styles */
  padding: var(--card-padding);
  border-top: 1px solid var(--color-neutral-200);
}

/* === MODAL COMPONENTS === */
.modal-dialog {
  max-width: var(--modal-max-width);
  margin: 2.5rem auto;
  max-height: calc(100vh - 140px);
  overflow-y: auto;
}

.modal-content {
  border: none;
  border-radius: var(--modal-radius);
  box-shadow: var(--modal-shadow);
}

.modal-header--branded {
  background: var(--gradient-primary);
  color: white;
  border-bottom: none;
  border-radius: var(--modal-radius) var(--modal-radius) 0 0;
  
  .btn-close {
    filter: invert(1);
  }
}

.modal-body {
  max-height: calc(100vh - 300px);
  overflow-y: auto;
}

/* === FORM COMPONENTS === */
.form-group {
  margin-bottom: var(--space-5);
}

.form-label {
  display: block;
  margin-bottom: var(--space-2);
  font-weight: var(--font-weight-semibold);
  color: var(--color-neutral-700);
  font-size: var(--form-label-font-size);
}

.form-input {
  width: 100%;
  min-height: var(--form-input-height);
  padding: var(--form-input-padding);
  border: var(--form-input-border);
  border-radius: var(--form-input-radius);
  font-family: var(--font-family-base);
  font-size: var(--form-input-font-size);
  transition: var(--transition-base);
}

.form-input:focus {
  outline: none;
  border-color: var(--color-primary-500);
  box-shadow: var(--form-input-focus);
}

.form-input::placeholder {
  color: var(--color-neutral-400);
}

.form-select {
  /* Copy .form-input styles */
  width: 100%;
  min-height: var(--form-input-height);
  padding: var(--form-input-padding);
  border: var(--form-input-border);
  border-radius: var(--form-input-radius);
  font-family: var(--font-family-base);
  font-size: var(--form-input-font-size);
  transition: var(--transition-base);
  
  /* Select-specific styles */
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
  background-position: right 0.5rem center;
  background-repeat: no-repeat;
  background-size: 1.5em 1.5em;
  padding-right: 2.5rem;
}

.form-select:focus {
  outline: none;
  border-color: var(--color-primary-500);
  box-shadow: var(--form-input-focus);
}

.form-textarea {
  /* Copy .form-input styles */
  width: 100%;
  min-height: var(--form-input-height);
  padding: var(--form-input-padding);
  border: var(--form-input-border);
  border-radius: var(--form-input-radius);
  font-family: var(--font-family-base);
  font-size: var(--form-input-font-size);
  transition: var(--transition-base);
  
  /* Textarea-specific styles */
  min-height: 100px;
  resize: vertical;
}

.form-textarea:focus {
  outline: none;
  border-color: var(--color-primary-500);
  box-shadow: var(--form-input-focus);
}

/* === MULTI-SELECT DROPDOWN COMPONENTS === */

/* Reusable multi-select dropdown sizing classes */
.form-select-4,
.form-select[multiple][size="4"],
select[multiple].form-select-4 {
  height: auto !important;
  min-height: 100px !important;
}

.form-select-3,
.form-select[multiple][size="3"],
select[multiple].form-select-3 {
  height: auto !important;
  min-height: 75px !important;
}

.form-select-5,
.form-select[multiple][size="5"],
select[multiple].form-select-5 {
  height: auto !important;
  min-height: 125px !important;
}

.form-select-6,
.form-select[multiple][size="6"],
select[multiple].form-select-6 {
  height: auto !important;
  min-height: 150px !important;
}

.form-select-7,
.form-select[multiple][size="7"],
select[multiple].form-select-7 {
  height: auto !important;
  min-height: 175px !important;
}

/* Ensure multi-select options are properly visible across all sizes */
.form-select[multiple] option,
.form-select-3 option,
.form-select-4 option,
.form-select-5 option,
.form-select-6 option,
.form-select-7 option {
  padding: 0.375rem 0.75rem;
  line-height: 1.5;
}

/* === NAVIGATION COMPONENTS === */
.nav-modern {
  background: var(--nav-bg);
  backdrop-filter: var(--nav-backdrop-blur);
  -webkit-backdrop-filter: var(--nav-backdrop-blur);
  box-shadow: var(--nav-shadow);
  position: sticky;
  top: 0;
  z-index: 1030;
}

/* === STATUS INDICATORS === */
.badge {
  display: inline-flex;
  align-items: center;
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-full);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.badge--success {
  background: var(--color-success-100);
  color: var(--color-success-700);
}

.badge--danger {
  background: var(--color-danger-100);
  color: var(--color-danger-700);
}

.badge--warning {
  background: var(--color-warning-100);
  color: var(--color-warning-700);
}

.badge--info {
  background: var(--color-info-100);
  color: var(--color-info-700);
}

/* === LOADING STATES === */

/* Basic loading state */
.loading {
  opacity: 0.6;
  pointer-events: none;
  position: relative;
}

.loading::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 20px;
  height: 20px;
  margin: -10px 0 0 -10px;
  border: 2px solid var(--color-neutral-300);
  border-top: 2px solid var(--color-primary-500);
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

/* Button loading states */
.btn.loading {
  pointer-events: none;
  opacity: 0.7;
  position: relative;
}

.btn.loading::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 16px;
  height: 16px;
  margin: -8px 0 0 -8px;
  border: 2px solid transparent;
  border-top-color: currentColor;
  border-radius: 50%;
  animation: button-loading-spinner 1s ease infinite;
}

/* Loading overlay */
.loading-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(4px);
  z-index: 1050;
  display: flex;
  align-items: center;
  justify-content: center;
}

.loading-content {
  text-align: center;
  color: var(--color-primary-500);
}

.loading-spinner {
  width: 48px;
  height: 48px;
  border: 4px solid var(--color-neutral-200);
  border-top: 4px solid var(--color-primary-500);
  border-radius: 50%;
  animation: spin 1s linear infinite;
  margin: 0 auto var(--space-4) auto;
}

/* === SKELETON LOADERS === */

/* Base skeleton animation */
@keyframes skeleton-loading {
  0% {
    background-position: -200px 0;
  }
  100% {
    background-position: calc(200px + 100%) 0;
  }
}

.skeleton {
  background: linear-gradient(90deg, var(--color-neutral-200) 25%, var(--color-neutral-100) 50%, var(--color-neutral-200) 75%);
  background-size: 200px 100%;
  animation: skeleton-loading 1.5s infinite;
  border-radius: var(--radius-base);
}

/* Skeleton variants */
.skeleton--text {
  height: 1rem;
  margin-bottom: var(--space-2);
  border-radius: var(--radius-sm);
}

.skeleton--text.skeleton--text-lg {
  height: 1.25rem;
}

.skeleton--text.skeleton--text-sm {
  height: 0.875rem;
}

.skeleton--button {
  height: var(--btn-height-base);
  width: 120px;
  border-radius: var(--radius-base);
}

.skeleton--card {
  height: 200px;
  border-radius: var(--card-radius);
  margin-bottom: var(--space-6);
}

.skeleton--table-row {
  height: 48px;
  margin-bottom: var(--space-1);
  border-radius: var(--radius-sm);
}

.skeleton--calendar {
  height: 600px;
  border-radius: var(--radius-lg);
}

/* Clean, performant loading - no complex animations */

/* Form skeleton */
.skeleton--form-group {
  margin-bottom: var(--space-5);
}

.skeleton--form-label {
  width: 120px;
  height: 1rem;
  margin-bottom: var(--space-2);
}

.skeleton--form-input {
  width: 100%;
  height: var(--form-input-height);
  border-radius: var(--form-input-radius);
}

/* Progress indicators */
.progress-bar {
  width: 100%;
  height: 8px;
  background: var(--color-neutral-200);
  border-radius: var(--radius-full);
  overflow: hidden;
  margin: var(--space-3) 0;
}

.progress-bar-fill {
  height: 100%;
  background: var(--gradient-primary);
  border-radius: var(--radius-full);
  transition: width 0.3s ease;
  animation: progress-shimmer 2s infinite;
}

@keyframes progress-shimmer {
  0% {
    background-position: -200px 0;
  }
  100% {
    background-position: calc(200px + 100%) 0;
  }
}

/* Pulse loading for immediate feedback */
.pulse-loading {
  animation: pulse 1.5s ease-in-out infinite;
}

@keyframes pulse {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0.5;
  }
}

/* Animation keyframes */
@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

@keyframes button-loading-spinner {
  from {
    transform: rotate(0turn);
  }
  to {
    transform: rotate(1turn);
  }
}

/* === RESPONSIVE FORM ENHANCEMENTS === */

/* Mobile-first form improvements */
@media (max-width: 767.98px) {
  /* Enhanced form spacing on mobile */
  .dashboard-form .row {
    margin-left: 0;
    margin-right: 0;
  }
  
  .dashboard-form [class*="col-"] {
    padding-left: 0;
    padding-right: 0;
    margin-bottom: var(--space-4);
  }
  
  /* Larger form inputs for better touch interaction */
  .form-control,
  .form-select {
    min-height: 48px;
    font-size: 1rem;
    padding: 0.75rem 1rem;
    border-radius: var(--radius-lg);
    border-width: 2px;
  }
  
  .form-control:focus,
  .form-select:focus {
    border-width: 2px;
    box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.15);
  }
  
  /* Better checkbox and radio styling on mobile */
  .form-check-input {
    width: 1.25rem;
    height: 1.25rem;
    margin-top: 0.125rem;
  }
  
  .form-check-label {
    margin-left: 0.5rem;
    font-size: 1rem;
    line-height: 1.5;
  }
  
  /* Enhanced form labels */
  .form-label {
    font-size: 1rem;
    font-weight: 600;
    margin-bottom: var(--space-2);
    color: var(--color-neutral-700);
  }
  
  /* Better button spacing and sizing */
  .btn {
    min-height: 48px;
    padding: 0.75rem 1.5rem;
    font-size: 1rem;
    border-radius: var(--radius-lg);
    margin-bottom: var(--space-2);
  }
  
  /* Form button groups on mobile */
  .d-flex.justify-content-center {
    flex-direction: column;
    gap: var(--space-3);
  }
  
  .d-flex.justify-content-center .btn {
    width: 100%;
    max-width: 280px;
    margin: 0 auto;
  }
  
  /* Form row improvements */
  .row.mb-3,
  .row.mb-4 {
    margin-bottom: var(--space-5);
  }
  
  /* Time input specific improvements */
  input[type="time"] {
    min-height: 48px;
    font-size: 1.1rem;
  }
  
  /* Multi-select dropdown improvements */
  .form-select[multiple] {
    min-height: 120px;
    font-size: 1rem;
  }
  
  .form-select[multiple] option {
    padding: 0.5rem;
    line-height: 1.4;
  }
}

/* Tablet-specific form enhancements */
@media (min-width: 768px) and (max-width: 991.98px) {
  .form-control,
  .form-select {
    min-height: 44px;
    font-size: 0.95rem;
  }
  
  .btn {
    min-height: 44px;
    font-size: 0.95rem;
  }
  
  /* Better use of space on tablets */
  .dashboard-form .col-md-6 {
    flex: 0 0 50%;
    max-width: 50%;
  }
  
  .dashboard-form .col-md-4 {
    flex: 0 0 33.333333%;
    max-width: 33.333333%;
  }
}

/* Enhanced form validation on mobile */
@media (max-width: 767.98px) {
  .is-invalid {
    border-color: var(--color-danger-500);
    border-width: 2px;
    background-image: none; /* Remove Bootstrap's background image on mobile */
  }
  
  .is-valid {
    border-color: var(--color-success-500);
    border-width: 2px;
    background-image: none;
  }
  
  .invalid-feedback {
    font-size: 0.9rem;
    margin-top: var(--space-2);
    padding: var(--space-2);
    background: var(--color-danger-50);
    border-radius: var(--radius-base);
    border-left: 4px solid var(--color-danger-500);
  }
  
  .valid-feedback {
    font-size: 0.9rem;
    margin-top: var(--space-2);
    padding: var(--space-2);
    background: var(--color-success-50);
    border-radius: var(--radius-base);
    border-left: 4px solid var(--color-success-500);
  }
}

/* Form accessibility improvements */
@media (max-width: 767.98px) {
  /* Larger focus indicators */
  .form-control:focus,
  .form-select:focus,
  .form-check-input:focus,
  .btn:focus {
    outline: 3px solid var(--color-primary-500);
    outline-offset: 2px;
  }
  
  /* High contrast mode support */
  @media (prefers-contrast: high) {
    .form-control,
    .form-select {
      border-width: 3px;
      border-color: var(--color-neutral-800);
    }
    
    .form-label {
      color: var(--color-neutral-900);
      font-weight: 700;
    }
  }
  
  /* Reduced motion support */
  @media (prefers-reduced-motion: reduce) {
    .form-control,
    .form-select,
    .btn {
      transition: none;
    }
  }
}

/* Form spacing enhancements */
.compact-form {
  /* Consistent spacing for compact forms */
}

.compact-form .row {
  margin-bottom: var(--space-4);
}

.compact-form .form-group {
  margin-bottom: var(--space-4);
}

/* Enhanced preference info boxes for mobile */
@media (max-width: 767.98px) {
  .preference-info-box {
    margin: var(--space-4) 0;
    padding: var(--space-4);
    font-size: 0.9rem;
    line-height: 1.5;
  }
  
  .preference-info-box ul {
    padding-left: var(--space-4);
  }
  
  .preference-info-box li {
    margin-bottom: var(--space-2);
  }
  
  /* Mobile form field enhancements */
  .form-control,
  .form-select,
  .form-textarea {
    min-height: 48px !important;
    font-size: 16px !important; /* Prevent iOS zoom */
    padding: 12px 16px !important;
  }
  
  /* Mobile button enhancements */
  .btn {
    min-height: 48px !important;
    padding: 12px 24px !important;
    font-size: 14px !important;
    margin: 4px 0 !important;
    touch-action: manipulation; /* Optimize for touch */
  }
  
  /* Form group spacing */
  .form-group,
  .mb-3 {
    margin-bottom: 20px !important;
  }
  
  /* Conservative FullCalendar mobile improvements */
  .fc-timegrid-event {
    font-size: 11px;
    padding: 1px 2px;
  }
  
  .fc-timegrid-slot {
    height: 25px;
  }
  
  .fc-timegrid-axis {
    width: 45px;
    font-size: 10px;
  }
  
  .fc-col-header-cell {
    font-size: 11px;
    padding: 4px 1px;
  }
  
  .fc-toolbar h2 {
    font-size: 14px;
  }
  
}

/* === COMPACT DESIGN VARIANTS === */

/* Compact Modal */
.modal--compact .modal-header {
    padding: var(--space-3) var(--space-4);
}

.modal--compact .modal-body {
    padding: var(--space-4);
}

.modal--compact .modal-footer {
    padding: var(--space-3) var(--space-4);
}

/* Compact Form in Modal */
.modal--compact .form-group {
    margin-bottom: var(--space-3);
}

.modal--compact .form-label {
    font-size: var(--font-size-sm);
    margin-bottom: var(--space-1);
}

.modal--compact .form-input,
.modal--compact .form-select,
.modal--compact .form-textarea {
    padding: var(--space-2) var(--space-3);
    font-size: var(--font-size-sm);
    min-height: 36px;
}

.modal--compact .btn {
    padding: var(--space-2) var(--space-4);
    font-size: var(--font-size-sm);
}

/* Compact Table */
.table--compact th,
.table--compact td {
    padding: var(--space-2);
    font-size: var(--font-size-sm);
    vertical-align: middle;
}

.table--compact th {
    font-weight: var(--font-weight-semibold);
}

/* Compact Cards */
.card--compact {
    /* Copy .card base styles */
    background: white;
    border-radius: var(--card-radius);
    box-shadow: var(--card-shadow);
    overflow: hidden;
    transition: var(--transition-base);
}

.card--compact .card__header {
    padding: var(--space-3) var(--space-4);
    font-size: var(--font-size-base);
}

.card--compact .card__body {
    padding: var(--space-4);
}

.card--compact .card__footer {
    padding: var(--space-3) var(--space-4);
}

/* === SPACING UTILITIES === */
/* Standard margin utilities for consistent spacing */
.page-bottom-margin {
    margin-bottom: var(--page-margin-bottom) !important;
}

.section-bottom-margin {
    margin-bottom: var(--section-margin-bottom) !important;
}

.element-bottom-margin {
    margin-bottom: var(--element-margin-bottom) !important;
}

.button-bottom-margin {
    margin-bottom: var(--button-margin-bottom) !important;
}

/* === RESPONSIVE UTILITIES === */
@media (max-width: 768px) {
  .btn-group {
    flex-direction: column;
  }
  
  .btn-group--mobile-stack {
    flex-direction: column;
    
    .btn {
      width: 100%;
    }
  }
  
  .modal-dialog {
    margin: var(--space-4);
    max-height: calc(100vh - 2rem);
  }
  
  .card__header,
  .dashboard-card__header {
    padding: var(--space-4) var(--space-5);
    font-size: var(--font-size-base);
  }
  
  /* Mobile Table Responsiveness - Enhanced */
  .dashboard-table,
  .table-responsive {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    margin-bottom: var(--space-4);
    border-radius: var(--radius-base);
    box-shadow: inset 0 1px 3px rgba(0,0,0,0.1);
  }
  
  .dashboard-table table,
  .table-responsive table,
  .table {
    min-width: 650px !important; /* Force minimum width */
    white-space: nowrap;
    margin-bottom: 0;
  }
  
  .table th,
  .table td {
    padding: var(--space-2) var(--space-3) !important;
    font-size: var(--font-size-sm) !important;
    vertical-align: middle;
    min-width: 80px; /* Prevent column collapse */
  }
  
  /* Ensure buttons in tables maintain proper sizing */
  .table .btn,
  .dashboard-table .btn {
    padding: 6px 12px !important;
    font-size: 12px !important;
    min-height: 32px !important;
    white-space: nowrap !important;
    margin: 2px !important;
  }
  
  /* Action column specific fixes */
  .table td:last-child,
  .dashboard-table td:last-child {
    min-width: 120px !important;
    text-align: center;
  }
  
  /* Button container alignment fixes */
  .d-flex.justify-content-center.gap-2 {
    flex-direction: column !important;
    gap: var(--space-3) !important;
  }
  
  .d-flex.justify-content-center.gap-2 .btn {
    width: 100% !important;
    margin-bottom: var(--space-2);
  }
  
  .d-flex.justify-content-center.gap-2 form {
    width: 100%;
  }
  
  .d-flex.justify-content-center.gap-2 form .btn {
    width: 100% !important;
  }
}

/* === NETWORK STATUS INDICATORS === */

/* Network status message animations */
@keyframes slideInFromRight {
  from {
    transform: translateX(100%);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}

@keyframes slideInFromBottom {
  from {
    transform: translateY(100%);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

/* Network status message styling */
.network-status-message {
  font-size: 0.9rem;
  border: none !important;
}

.network-status-message .btn-close {
  font-size: 0.7rem;
}

/* Offline mode indicators */
.offline-mode {
  position: relative;
}

.offline-mode::before {
  content: "OFFLINE MODE";
  position: fixed;
  top: 10px;
  right: 10px;
  background: #dc3545;
  color: white;
  padding: 4px 8px;
  font-size: 11px;
  font-weight: bold;
  border-radius: 4px;
  z-index: 1080;
  animation: pulse 2s infinite;
}

.offline-mode form button[type="submit"]:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.offline-mode form button[type="submit"]:disabled::after {
  content: " (Offline)";
  font-size: 0.8em;
  opacity: 0.7;
}

@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.7; }
}

/* Network error styling */
#network-error-message {
  backdrop-filter: blur(2px);
  border-left: 4px solid #ffc107 !important;
}

#network-error-message .btn-outline-secondary {
  border-color: #6c757d;
  color: #6c757d;
  font-size: 0.8rem;
}

#network-error-message .btn-outline-secondary:hover {
  background-color: #6c757d;
  color: white;
}

/* === LEGACY COMPATIBILITY === */
/* Aliases for existing class names */
.profile-btn,
.schedule-btn,
.dashboard-btn {
  /* Copy .btn base styles */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: var(--btn-padding-base);
  border: 1px solid transparent;
  border-radius: var(--radius-base);
  font-family: var(--font-family-base);
  font-size: var(--btn-font-size);
  font-weight: var(--font-weight-medium);
  line-height: var(--line-height-tight);
  text-decoration: none;
  text-align: center;
  cursor: pointer;
  transition: var(--transition-base);
  min-height: var(--btn-height-base);
  user-select: none;
  -webkit-user-select: none;
  
  /* Copy .btn--primary styles */
  background: var(--gradient-primary);
  color: white;
  border-color: var(--color-primary-500);
}

.profile-btn:hover,
.schedule-btn:hover,
.dashboard-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(102, 126, 234, 0.4);
  color: white;
  text-decoration: none;
}

.dashboard-btn-secondary {
  /* Copy .btn base styles */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: var(--btn-padding-base);
  border: 1px solid transparent;
  border-radius: var(--radius-base);
  font-family: var(--font-family-base);
  font-size: var(--btn-font-size);
  font-weight: var(--font-weight-medium);
  line-height: var(--line-height-tight);
  text-decoration: none;
  text-align: center;
  cursor: pointer;
  transition: var(--transition-base);
  min-height: var(--btn-height-base);
  user-select: none;
  -webkit-user-select: none;
  
  /* Copy .btn--secondary styles */
  background: transparent;
  color: var(--color-primary-500);
  border-color: var(--color-primary-500);
}

.dashboard-btn-secondary:hover {
  background: var(--gradient-primary);
  color: white;
  transform: translateY(-2px);
  box-shadow: 0 6px 15px rgba(102, 126, 234, 0.3);
  text-decoration: none;
}

/* Bootstrap compatibility classes */
.btn-primary {
  /* Copy .btn base styles */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: var(--btn-padding-base);
  border: 1px solid transparent;
  border-radius: var(--radius-base);
  font-family: var(--font-family-base);
  font-size: var(--btn-font-size);
  font-weight: var(--font-weight-medium);
  line-height: var(--line-height-tight);
  text-decoration: none;
  text-align: center;
  cursor: pointer;
  transition: var(--transition-base);
  min-height: var(--btn-height-base);
  user-select: none;
  -webkit-user-select: none;
  
  /* Copy .btn--primary styles */
  background: var(--gradient-primary);
  color: white;
  border-color: var(--color-primary-500);
}

.btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(102, 126, 234, 0.4);
  color: white;
  text-decoration: none;
}

.btn-primary:active {
  transform: translateY(0);
}

.btn-primary:focus-visible {
  outline: 2px solid var(--color-primary-500);
  outline-offset: 2px;
}

.btn-secondary {
  /* Copy .btn base styles */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: var(--btn-padding-base);
  border: 1px solid transparent;
  border-radius: var(--radius-base);
  font-family: var(--font-family-base);
  font-size: var(--btn-font-size);
  font-weight: var(--font-weight-medium);
  line-height: var(--line-height-tight);
  text-decoration: none;
  text-align: center;
  cursor: pointer;
  transition: var(--transition-base);
  min-height: var(--btn-height-base);
  user-select: none;
  -webkit-user-select: none;
  
  /* Copy .btn--secondary styles */
  background: transparent;
  color: var(--color-primary-500);
  border-color: var(--color-primary-500);
}

.btn-secondary:hover {
  background: var(--gradient-primary);
  color: white;
  transform: translateY(-2px);
  box-shadow: 0 6px 15px rgba(102, 126, 234, 0.3);
  text-decoration: none;
}

.btn-secondary:active {
  transform: translateY(0);
}
/* === EMAIL TEMPLATE EDITOR COMPONENTS === */
/* Shared styles for email template editing (tuition & availability) */

.email-template-editor {
    min-height: 400px !important;
    height: 400px !important;
    resize: vertical !important;
    overflow-y: auto !important;
    font-family: 'Courier New', Courier, monospace !important;
    line-height: 1.5 !important;
}

/* High specificity overrides for Bootstrap conflicts */
textarea.form-control.email-template-editor {
    min-height: 400px !important;
    height: 400px !important;
}

textarea.email-template-editor[rows] {
    min-height: 400px !important;
    height: 400px !important;
}

/* Highlight placeholder instructions */
.email-template-instructions {
    background-color: #f8f9fa;
    border-left: 4px solid #0d6efd;
}

.email-template-instructions code {
    background-color: #e3f2fd;
    color: #1565c0;
    padding: 2px 6px;
    border-radius: 4px;
    font-weight: bold;
}

/* === ANALYTICS CARD ICON === */
/* Shared style for analytics dashboard card icons (Student Analytics, Income Dashboard, etc.) */
/* Note: The blue gradient background (#42a5f5 to #1e88e5) is defined in each template's <style> block */
/* This is required due to CSS specificity - each template overrides their base icon class */
/* Example: .student-card-icon.analytics-card-icon, .tuition-card-icon.analytics-card-icon, etc. */

/* === BATCH IMPORT COMPONENTS === */
/* Specialized textarea styles for batch student import */

.form-control-monospace {
    font-family: monospace !important;
    font-size: 13px !important;
    line-height: 1.5 !important;
}

.form-control-tall {
    min-height: 350px !important;
    height: 350px !important;
    resize: vertical !important;
    overflow-y: auto !important;
}

/* High specificity override for Bootstrap textarea conflicts */
textarea.form-control.form-control-tall {
    min-height: 350px !important;
    height: 350px !important;
}

/* Lighter placeholder text for better readability */
textarea.form-control.form-control-tall::placeholder {
    color: #adb5bd;
    opacity: 0.6;
}

/* === UTILITY CLASSES === */

/* Cursor pointer for interactive elements */
.cursor-pointer {
    cursor: pointer;
}