/**
 * ═══════════════════════════════════════════════════════════════════════════
 * ILLUMINATE AI — Components CSS
 * 
 * Shared UI components and utilities used across the application.
 * This file provides:
 *   - Base element styles (buttons, inputs, cards, badges)
 *   - Utility classes for layout and spacing
 *   - Modal, toast, and notification components
 *   - Page-specific components (appointments, doctor cards)
 * 
 * Dependencies:
 *   - ./variables.css (CSS custom properties)
 * 
 * Usage:
 *   Import after variables.css: @import './variables.css';
 *   For pages using design-system.css, import this as a supplement
 * ═══════════════════════════════════════════════════════════════════════════
 */

/* ─────────────────────────────────────────────────────────────────────────────
   CSS RESET & BASE STYLES
   Normalizes default browser styling for consistent cross-browser appearance
   ───────────────────────────────────────────────────────────────────────────── */

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

html {
  scroll-behavior: smooth;
  font-size: 16px;
}

body {
  background-color: var(--bg);
  color: var(--text-main);
  font-family: var(--font-body);
  min-height: 100vh;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Link defaults - use utility classes for custom colors */
a {
  color: var(--accent);
  text-decoration: none;
  transition: color var(--transition-fast);
}

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

/* Responsive images */
img {
  max-width: 100%;
  height: auto;
  display: block;
}

/* Form element defaults */
button {
  font-family: inherit;
  cursor: pointer;
  border: none;
  outline: none;
}

input, textarea, select {
  font-family: inherit;
  font-size: inherit;
}

/* ─────────────────────────────────────────────────────────────────────────────
   LAYOUT CONTAINERS
   Responsive container classes for content centering
   ───────────────────────────────────────────────────────────────────────────── */

/**
 * Container widths:
 * - .container: 1200px (default, full content)
 * - .container-sm: 640px (narrow content, auth forms)
 * - .container-md: 768px (medium content)
 * - .container-lg: 1024px (wide content)
 * - .container-xl: 1280px (extra wide)
 */
.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 1.5rem;
  width: 100%;
}

.container-sm { max-width: 640px; }
.container-md { max-width: 768px; }
.container-lg { max-width: 1024px; }
.container-xl { max-width: 1280px; }
.container-narrow { max-width: 700px; }

/* ─────────────────────────────────────────────────────────────────────────────
   BADGES & TAGS
   Small inline labels for status, categories, and metadata
   ───────────────────────────────────────────────────────────────────────────── */

/**
 * Badge variants:
 * - .badge (default gray)
 * - .badge-success (green, for positive/completed states)
 * - .badge-warning (amber, for pending/warning states)
 * - .badge-error (red, for error/critical states)
 * - .badge-info (blue, for informational states)
 * 
 * Badge dot variant adds an animated pulsing dot indicator
 */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.375rem 0.75rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-full);
  font-size: 0.75rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/** Animated dot indicator for badges (e.g., online status) */
.badge-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  animation: pulse 2s infinite;
}

.badge-success .badge-dot { background: var(--success); }
.badge-warning .badge-dot { background: var(--warning); }
.badge-error .badge-dot { background: var(--error); }
.badge-info .badge-dot { background: var(--info); }

/* ─────────────────────────────────────────────────────────────────────────────
   BUTTONS
   Interactive elements for actions and navigation
   ───────────────────────────────────────────────────────────────────────────── */

/**
 * Button hierarchy (by importance):
 * - .btn-primary: Main actions, gradient background
 * - .btn: Default secondary actions
 * - .btn-ghost: Subtle actions, transparent background
 * - .btn-danger: Destructive actions (red)
 * 
 * Size modifiers:
 * - .btn-sm: Smaller buttons for inline actions
 * - .btn-lg: Larger buttons for prominent CTAs
 * - .btn-icon: Square buttons for icon-only actions
 */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.75rem 1.5rem;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  color: var(--text-main);
  font-weight: 500;
  font-size: 0.875rem;
  transition: all var(--transition-fast);
  white-space: nowrap;
}

.btn:hover {
  background: var(--surface-3);
  border-color: var(--border-strong);
}

.btn:active { transform: scale(0.98); }
.btn:disabled { opacity: 0.5; cursor: not-allowed; }

/** Primary button - gradient background for main actions */
.btn-primary {
  background: var(--accent-gradient);
  border-color: transparent;
  color: white;
  box-shadow: 0 4px 12px var(--accent-light);
  text-shadow: 0 1px 2px rgba(0,0,0,0.2);
}

.btn-primary:hover {
  background: var(--accent-gradient-hover);
  box-shadow: var(--shadow-glow);
  transform: translateY(-2px);
}

/** Ghost button - minimal styling for secondary actions */
.btn-ghost {
  background: transparent;
  border-color: transparent;
}

.btn-ghost:hover { 
  background: var(--glass);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

/** Danger button - for destructive actions like delete */
.btn-danger { 
  background: var(--error); 
  border-color: transparent; 
  color: white; 
}

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

/** Success button - for positive actions */
.btn-success { 
  background: var(--success); 
  border-color: transparent; 
  color: white; 
}

/** Button size variants */
.btn-sm { padding: 0.5rem 1rem; font-size: 0.8125rem; }
.btn-lg { padding: 1rem 2rem; font-size: 1rem; }

/** Icon-only buttons */
.btn-icon {
  width: 40px;
  height: 40px;
  padding: 0;
  border-radius: var(--radius-md);
}

.btn-icon.sm { width: 32px; height: 32px; }
.btn-icon.lg { width: 48px; height: 48px; }

/* ─────────────────────────────────────────────────────────────────────────────
   CARDS
   Container components for grouping related content
   ───────────────────────────────────────────────────────────────────────────── */

/**
 * Card component - glassmorphism effect with border and shadow
 * Use .card-hover for interactive cards with hover effects
 */
.card {
  background: var(--glass-bg);
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-xl);
  padding: 1.5rem;
  box-shadow: var(--shadow-sm);
  transition: all var(--transition-normal);
}

.card:hover.card-interactive {
  transform: translateY(-4px) scale(1.01);
  box-shadow: var(--shadow-xl);
  border-color: var(--glass-border-hover);
  background: var(--glass-bg-strong);
}

/** Card with hover lift effect - for clickable cards */
.card-hover {
  transition: all var(--transition-normal);
}

.card-hover:hover {
  background: var(--surface-2);
  border-color: var(--border-strong);
  transform: translateY(-2px);
  box-shadow: var(--shadow-lg);
}

/* ─────────────────────────────────────────────────────────────────────────────
   FORM ELEMENTS
   Inputs, textareas, selects, and form groupings
   ───────────────────────────────────────────────────────────────────────────── */

/** Vertical form field grouping */
.input-group {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

/** Label for form inputs */
.input-label {
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--text-dim);
}

/** Text input styling */
.input {
  width: 100%;
  padding: 0.75rem 1rem;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  color: var(--text-main);
  font-size: 0.9375rem;
  transition: all var(--transition-fast);
}

.input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-glow);
}

.input::placeholder { color: var(--text-muted); }
.input-error { border-color: var(--error); }
.input-error:focus { box-shadow: 0 0 0 3px var(--error-glow); }

/** Error message text */
.error-text { font-size: 0.8125rem; color: var(--error); }

/* ─────────────────────────────────────────────────────────────────────────────
   TEXT UTILITIES
   Color, size, and weight utilities for typography
   ───────────────────────────────────────────────────────────────────────────── */

/** Text color utilities */
.text-muted { color: var(--text-muted); }
.text-dim { color: var(--text-dim); }
.text-success { color: var(--success); }
.text-warning { color: var(--warning); }
.text-error { color: var(--error); }
.text-accent { color: var(--accent); }

/** Text size utilities */
.text-sm { font-size: 0.875rem; }
.text-xs { font-size: 0.75rem; }
.text-lg { font-size: 1.125rem; }
.text-xl { font-size: 1.25rem; }
.text-2xl { font-size: 1.5rem; }
.text-3xl { font-size: 1.875rem; }

/** Font weight utilities */
.font-display { font-family: var(--font-display); }
.font-bold { font-weight: 700; }
.font-medium { font-weight: 500; }
.font-semibold { font-weight: 600; }

/* ─────────────────────────────────────────────────────────────────────────────
   FLEXBOX UTILITIES
   Layout utilities for flexbox-based alignment and distribution
   ───────────────────────────────────────────────────────────────────────────── */

/** Core flexbox */
.flex { display: flex; }
.flex-col { flex-direction: column; }

/** Flex alignment */
.items-center { align-items: center; }
.items-start { align-items: flex-start; }
.items-end { align-items: flex-end; }

/** Flex distribution */
.justify-center { justify-content: center; }
.justify-between { justify-content: space-between; }
.justify-end { justify-content: flex-end; }

/** Flex sizing and wrapping */
.flex-1 { flex: 1; }
.flex-wrap { flex-wrap: wrap; }

/** Gap utilities for flex/grid spacing */
.gap-1 { gap: 0.25rem; }
.gap-2 { gap: 0.5rem; }
.gap-3 { gap: 0.75rem; }
.gap-4 { gap: 1rem; }
.gap-6 { gap: 1.5rem; }
.gap-8 { gap: 2rem; }

/* ─────────────────────────────────────────────────────────────────────────────
   GRID UTILITIES
   CSS Grid-based layout utilities
   ───────────────────────────────────────────────────────────────────────────── */

.grid { display: grid; }
.grid-cols-2 { grid-template-columns: repeat(2, 1fr); }
.grid-cols-3 { grid-template-columns: repeat(3, 1fr); }
.grid-cols-4 { grid-template-columns: repeat(4, 1fr); }

/* ─────────────────────────────────────────────────────────────────────────────
   SIZING UTILITIES
   Width, height, and minimum height utilities
   ───────────────────────────────────────────────────────────────────────────── */

.w-full { width: 100%; }
.h-full { height: 100%; }
.min-h-screen { min-height: 100vh; }

/* ─────────────────────────────────────────────────────────────────────────────
   POSITION UTILITIES
   CSS position property shortcuts
   ───────────────────────────────────────────────────────────────────────────── */

.relative { position: relative; }
.absolute { position: absolute; }
.fixed { position: fixed; }
.sticky { position: sticky; }

/* ─────────────────────────────────────────────────────────────────────────────
   DISPLAY UTILITIES
   Show/hide and display mode utilities
   ───────────────────────────────────────────────────────────────────────────── */

.hidden { display: none !important; }
.block { display: block; }
.inline-block { display: inline-block; }

/* Responsive Utilities */
@media (max-width: 768px) {
  .hidden-mobile { display: none !important; }
  .visible-mobile { display: block !important; }
  .grid-mobile-1 { grid-template-columns: 1fr !important; }
}

@media (min-width: 769px) {
  .hidden-desktop { display: none !important; }
  .visible-desktop { display: block !important; }
}

/* Fluid Typography */
.text-fluid-lg { font-size: clamp(1.25rem, 4vw, 2.5rem); }
.text-fluid-md { font-size: clamp(1.125rem, 3vw, 1.75rem); }
.text-fluid-sm { font-size: clamp(0.875rem, 2vw, 1rem); }

/* ─────────────────────────────────────────────────────────────────────────────
   OVERFLOW UTILITIES
   Control content overflow behavior
   ───────────────────────────────────────────────────────────────────────────── */

.overflow-hidden { overflow: hidden; }
.overflow-auto { overflow: auto; }
.overflow-y-auto { overflow-y: auto; }

/* ─────────────────────────────────────────────────────────────────────────────
   Z-INDEX UTILITIES
   Layering control for positioned elements
   ───────────────────────────────────────────────────────────────────────────── */

.z-10 { z-index: 10; }
.z-20 { z-index: 20; }
.z-50 { z-index: 50; }
.z-100 { z-index: 100; }

/* ─────────────────────────────────────────────────────────────────────────────
   CURSOR UTILITIES
   Pointer style control
   ───────────────────────────────────────────────────────────────────────────── */

.cursor-pointer { cursor: pointer; }
.cursor-not-allowed { cursor: not-allowed; }
.select-none { user-select: none; }
.pointer-events-none { pointer-events: none; }

/* ─────────────────────────────────────────────────────────────────────────────
   VISUAL EFFECTS
   Gradient text, screen reader only, and decorative elements
   ───────────────────────────────────────────────────────────────────────────── */

/** Gradient text effect - use for headlines */
.gradient-text {
  background: var(--accent-gradient);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/** Screen reader only - visually hidden but accessible */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/** Horizontal divider */
.divider {
  height: 1px;
  background: var(--border);
  margin: 1.5rem 0;
}

/* ─────────────────────────────────────────────────────────────────────────────
   AVATARS
   User profile images and initials
   ───────────────────────────────────────────────────────────────────────────── */

/**
 * Avatar component for user profile images
 * - Uses background color with initials when no image
 * - Size variants: .avatar-sm (32px), default (40px), .avatar-lg (56px), .avatar-xl (80px)
 * 
 * HTML structure:
 * <div class="avatar">JD</div>  <!-- Initials -->
 * <div class="avatar"><img src="..." alt="..."></div>  <!-- Image -->
 */
.avatar {
  width: 40px;
  height: 40px;
  border-radius: var(--radius-full);
  background: var(--surface-3);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  font-size: 0.875rem;
  color: var(--text-dim);
  overflow: hidden;
}

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

.avatar-sm { width: 32px; height: 32px; font-size: 0.75rem; }
.avatar-lg { width: 56px; height: 56px; font-size: 1.125rem; }
.avatar-xl { width: 80px; height: 80px; font-size: 1.5rem; }

/* ─────────────────────────────────────────────────────────────────────────────
   LOADING STATES
   Spinners and skeleton loaders for async content
   ───────────────────────────────────────────────────────────────────────────── */

/** Loading spinner - rotating circle */
.spinner {
  width: 20px;
  height: 20px;
  border: 2px solid var(--border);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

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

/** Skeleton loader - pulsing placeholder for loading content */
.skeleton {
  background: linear-gradient(90deg, var(--surface-2) 25%, var(--surface-3) 50%, var(--surface-2) 75%);
  background-size: 200% 100%;
  animation: skeleton 1.5s ease-in-out infinite;
  border-radius: var(--radius-md);
}

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

/* ─────────────────────────────────────────────────────────────────────────────
   MODALS & OVERLAYS
   Dialog components for focused interactions
   ───────────────────────────────────────────────────────────────────────────── */

/**
 * Modal component structure:
 * .modal-backdrop (overlay backdrop)
 *   .modal
 *     .modal-header
 *     .modal-body
 *     .modal-footer
 */
.modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.7);
  backdrop-filter: blur(4px);
  z-index: var(--z-modal);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
}

.modal {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  width: 100%;
  max-width: 500px;
  max-height: 90vh;
  overflow-y: auto;
}

.modal-header {
  padding: 1.5rem;
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.modal-body { padding: 1.5rem; }

.modal-footer {
  padding: 1.5rem;
  border-top: 1px solid var(--border);
  display: flex;
  justify-content: flex-end;
  gap: 0.75rem;
}

/* ─────────────────────────────────────────────────────────────────────────────
   TOAST NOTIFICATIONS
   Temporary feedback messages (success, error, warning)
   ───────────────────────────────────────────────────────────────────────────── */

/**
 * Toast notification container and individual toasts
 * Positioned fixed at bottom-right
 * Use .toast-success, .toast-error, .toast-warning for color variants
 */
.toast-container {
  position: fixed;
  bottom: 1.5rem;
  right: 1.5rem;
  z-index: var(--z-toast);
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.toast {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 1rem 1.25rem;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  min-width: 300px;
  max-width: 400px;
  box-shadow: var(--shadow-lg);
  animation: slideIn 0.3s var(--transition);
}

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

.toast-success { border-color: var(--success); }
.toast-error { border-color: var(--error); }
.toast-warning { border-color: var(--warning); }

/* ─────────────────────────────────────────────────────────────────────────────
   PROGRESS BARS
   Visual indicators for completion and progress
   ───────────────────────────────────────────────────────────────────────────── */

.progress {
  width: 100%;
  height: 8px;
  background: var(--surface-3);
  border-radius: var(--radius-full);
  overflow: hidden;
}

.progress-bar {
  height: 100%;
  background: var(--accent-gradient);
  border-radius: var(--radius-full);
  transition: width var(--transition-normal);
}

.progress-sm { height: 4px; }
.progress-lg { height: 12px; }

/* ─────────────────────────────────────────────────────────────────────────────
   TABS
   Tab navigation for switching between content views
   ───────────────────────────────────────────────────────────────────────────── */

/**
 * Tab component for content switching
 * Structure:
 * .tabs
 *   .tab.active (selected tab)
 *   .tab (unselected tab)
 */
.tabs {
  display: flex;
  gap: 0.25rem;
  background: var(--surface-2);
  padding: 0.25rem;
  border-radius: var(--radius-md);
}

.tab {
  padding: 0.5rem 1rem;
  border-radius: var(--radius-sm);
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--text-dim);
  transition: all var(--transition-fast);
  cursor: pointer;
}

.tab:hover { color: var(--text-main); }

.tab.active {
  background: var(--surface);
  color: var(--text-main);
  box-shadow: var(--shadow-sm);
}

/* ─────────────────────────────────────────────────────────────────────────────
   DROPDOWNS
   Dropdown menu component
   ───────────────────────────────────────────────────────────────────────────── */

/**
 * Dropdown structure:
 * .dropdown.open .dropdown-menu (visible)
 *   .dropdown-item
 *   .dropdown-item.danger (for destructive actions)
 */
.dropdown { position: relative; }

.dropdown-menu {
  position: absolute;
  top: 100%;
  right: 0;
  margin-top: 0.5rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 0.5rem;
  min-width: 180px;
  box-shadow: var(--shadow-lg);
  z-index: var(--z-dropdown);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  transition: all var(--transition-fast);
}

.dropdown.open .dropdown-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.dropdown-item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.625rem 0.75rem;
  border-radius: var(--radius-sm);
  font-size: 0.875rem;
  color: var(--text-dim);
  cursor: pointer;
  transition: all var(--transition-fast);
}

.dropdown-item:hover {
  background: var(--surface-2);
  color: var(--text-main);
}

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

/* ─────────────────────────────────────────────────────────────────────────────
   TABLES
   Data tables for structured information display
   ───────────────────────────────────────────────────────────────────────────── */

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

.table th,
.table td {
  padding: 0.875rem 1rem;
  text-align: left;
  border-bottom: 1px solid var(--border);
}

.table th {
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--text-muted);
  background: var(--surface-2);
}

.table tr:hover td { background: var(--surface-2); }

/* ─────────────────────────────────────────────────────────────────────────────
   PAGINATION
   Page navigation for paginated content
   ───────────────────────────────────────────────────────────────────────────── */

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

.page-btn {
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-md);
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--text-dim);
  background: var(--surface);
  border: 1px solid var(--border);
  transition: all var(--transition-fast);
  cursor: pointer;
}

.page-btn:hover {
  background: var(--surface-2);
  border-color: var(--border-strong);
}

.page-btn.active {
  background: var(--accent);
  border-color: var(--accent);
  color: white;
}

.page-btn:disabled { opacity: 0.5; cursor: not-allowed; }

/* ─────────────────────────────────────────────────────────────────────────────
   SEARCH INPUT
   Input with embedded search icon
   ───────────────────────────────────────────────────────────────────────────── */

.search-input { position: relative; }

.search-input .material-symbols-outlined {
  position: absolute;
  left: 1rem;
  top: 50%;
  transform: translateY(-50%);
  color: var(--text-muted);
  font-size: 1.25rem;
}

.search-input .input { padding-left: 3rem; }

/* ─────────────────────────────────────────────────────────────────────────────
   EMPTY STATES
   Placeholder content when no data is available
   ───────────────────────────────────────────────────────────────────────────── */

.empty-state {
  text-align: center;
  padding: 3rem 1.5rem;
  color: var(--text-muted);
}

.empty-state .material-symbols-outlined {
  font-size: 3rem;
  margin-bottom: 1rem;
  opacity: 0.5;
}

.empty-state h3 {
  font-size: 1.125rem;
  font-weight: 600;
  color: var(--text-dim);
  margin-bottom: 0.5rem;
}

.empty-state p {
  font-size: 0.875rem;
  max-width: 300px;
  margin: 0 auto 1.5rem;
}

/* ─────────────────────────────────────────────────────────────────────────────
   LOADING OVERLAY
   Full-screen loading indicator
   ───────────────────────────────────────────────────────────────────────────── */

.loading-overlay {
  position: fixed;
  inset: 0;
  background: rgba(3, 3, 3, 0.8);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
}

.loading-content { text-align: center; }

.loading-content .spinner {
  width: 40px;
  height: 40px;
  margin: 0 auto 1rem;
}

/* ─────────────────────────────────────────────────────────────────────────────
   KEYFRAME ANIMATIONS
   Reusable animation definitions
   ───────────────────────────────────────────────────────────────────────────── */

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

/* ─────────────────────────────────────────────────────────────────────────────
   PAGE-SPECIFIC COMPONENTS
   Components unique to specific pages
   ───────────────────────────────────────────────────────────────────────────── */

/* ═══════════════════════════════════════════════════════════════════════════
   APPOINTMENT COMPONENTS
   Used on: pages/appointments.html
   ═══════════════════════════════════════════════════════════════════════════ */

/**
 * Appointment item - list item for scheduled appointments
 * Structure:
 * .appointment-item
 *   .appointment-date-block (date badge)
 *   .appointment-info
 *     .appointment-title
 *     .appointment-time
 *     .appointment-badges
 *   .flex (action buttons)
 */
.appointment-item {
  padding: 1.5rem;
  border-bottom: 1px solid var(--border);
  display: flex;
  gap: 1rem;
  align-items: center;
  transition: background var(--transition-fast);
}

.appointment-item:last-child { border-bottom: none; }
.appointment-item:hover { background: var(--surface-2); }

/** Date display block with gradient background */
.appointment-date-block {
  width: 60px;
  height: 60px;
  border-radius: var(--radius-lg);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: white;
  flex-shrink: 0;
}

.appointment-date-block .date-day {
  font-size: 1.25rem;
  font-weight: 600;
}

.appointment-date-block .date-month {
  font-size: 0.625rem;
  text-transform: uppercase;
}

.appointment-info { flex: 1; }

.appointment-title {
  font-size: 1rem;
  font-weight: 600;
  margin-bottom: 0.25rem;
}

.appointment-time {
  font-size: 0.875rem;
  color: var(--text-muted);
  margin-bottom: 0.5rem;
}

.appointment-badges {
  display: flex;
  gap: 0.75rem;
  font-size: 0.75rem;
}

.appointment-badge {
  display: flex;
  align-items: center;
  gap: 0.25rem;
}

.appointment-badge .material-symbols-outlined {
  font-size: 1rem;
}

/* ═══════════════════════════════════════════════════════════════════════════
   DOCTOR CARD COMPONENT
   Used on: pages/appointments.html, pages/user/doctors.html
   ═══════════════════════════════════════════════════════════════════════════ */

/**
 * Doctor card - displays doctor info with booking button
 * Structure:
 * .doctor-card
 *   .avatar (doctor photo/initials)
 *   .doctor-card-info
 *     .doctor-card-name
 *     .doctor-card-specialty
 *     .doctor-card-rating
 *   .btn (book button)
 */
.doctor-card {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 1.25rem;
  display: flex;
  gap: 1rem;
  transition: all var(--transition-fast);
}

.doctor-card:hover {
  border-color: var(--border-strong);
  transform: translateY(-2px);
}

.doctor-card-info { flex: 1; }

.doctor-card-name {
  font-size: 0.9375rem;
  font-weight: 600;
  margin-bottom: 0.25rem;
}

.doctor-card-specialty {
  font-size: 0.75rem;
  color: var(--text-muted);
  margin-bottom: 0.5rem;
}

.doctor-card-rating {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.75rem;
}

.doctor-card-rating .material-symbols-outlined {
  font-size: 1rem;
  color: var(--warning);
}

/* ─────────────────────────────────────────────────────────────────────────────
   SPACING UTILITIES
   Margin and padding helpers for layout adjustments
   ───────────────────────────────────────────────────────────────────────────── */

/** Padding utilities */
.p-0 { padding: 0; }
.p-1 { padding: 0.25rem; }
.p-2 { padding: 0.5rem; }
.p-3 { padding: 0.75rem; }
.p-4 { padding: 1rem; }
.p-5 { padding: 1.25rem; }
.p-6 { padding: 1.5rem; }
.p-8 { padding: 2rem; }
.p-10 { padding: 2.5rem; }

/** Padding horizontal/vertical */
.px-2 { padding-left: 0.5rem; padding-right: 0.5rem; }
.px-4 { padding-left: 1rem; padding-right: 1rem; }
.py-2 { padding-top: 0.5rem; padding-bottom: 0.5rem; }
.py-4 { padding-top: 1rem; padding-bottom: 1rem; }

/** Margin top utilities */
.mt-0 { margin-top: 0; }
.mt-1 { margin-top: 0.25rem; }
.mt-2 { margin-top: 0.5rem; }
.mt-3 { margin-top: 0.75rem; }
.mt-4 { margin-top: 1rem; }
.mt-6 { margin-top: 1.5rem; }
.mt-8 { margin-top: 2rem; }

/** Margin bottom utilities */
.mb-0 { margin-bottom: 0; }
.mb-1 { margin-bottom: 0.25rem; }
.mb-2 { margin-bottom: 0.5rem; }
.mb-3 { margin-bottom: 0.75rem; }
.mb-4 { margin-bottom: 1rem; }
.mb-5 { margin-bottom: 1.25rem; }
.mb-6 { margin-bottom: 1.5rem; }
.mb-8 { margin-bottom: 2rem; }

/** Margin auto */
.mx-auto { margin-left: auto; margin-right: auto; }
.my-auto { margin-top: auto; margin-bottom: auto; }
.ml-auto { margin-left: auto; }
.mr-auto { margin-right: auto; }

/** Card padding overrides */
.card-p0 { padding: 0; }
.card-pb-0 { padding-bottom: 0; }

/** Gap utilities */
.gap-0 { gap: 0; }
.gap-1 { gap: 0.25rem; }
.gap-2 { gap: 0.5rem; }
.gap-3 { gap: 0.75rem; }
.gap-4 { gap: 1rem; }
.gap-5 { gap: 1.25rem; }
.gap-6 { gap: 1.5rem; }
.gap-8 { gap: 2rem; }

/** Width utilities */
.w-full { width: 100%; }
.w-auto { width: auto; }

/** Height utilities */
.h-full { height: 100%; }
.h-screen { height: 100vh; }
.min-h-screen { min-height: 100vh; }

/** Border radius utilities */
.rounded { border-radius: var(--radius); }
.rounded-lg { border-radius: var(--radius-lg); }
.rounded-xl { border-radius: var(--radius-xl); }
.rounded-full { border-radius: 9999px; }

/** Display utilities */
.hidden { display: none; }
.block { display: block; }
.inline-block { display: inline-block; }
.flex { display: flex; }
.inline-flex { display: inline-flex; }
.grid { display: grid; }

/** Text transforms */
.text-uppercase { text-transform: uppercase; }
.text-center { text-align: center; }
.text-left { text-align: left; }
.text-right { text-align: right; }

/** Text colors */
.text-primary { color: var(--text-primary); }
.text-secondary { color: var(--text-secondary); }
.text-muted { color: var(--text-muted); }
.text-success { color: var(--success); }
.text-warning { color: var(--warning); }
.text-error { color: var(--error); }
.text-accent { color: var(--accent); }

/** Text sizes */
.text-xs { font-size: 0.75rem; }
.text-sm { font-size: 0.875rem; }
.text-base { font-size: 1rem; }
.text-lg { font-size: 1.125rem; }
.text-xl { font-size: 1.25rem; }
.text-2xl { font-size: 1.5rem; }

/** Font weights */
.font-normal { font-weight: 400; }
.font-medium { font-weight: 500; }
.font-semibold { font-weight: 600; }
.font-bold { font-weight: 700; }

/** Background utilities */
.bg-accent { background: var(--accent-gradient); }
.bg-success { background: var(--gradient-success); }
.bg-primary { background: var(--gradient-primary); }
.bg-transparent { background: transparent; }

/** Overflow utilities */
.overflow-hidden { overflow: hidden; }
.overflow-auto { overflow: auto; }
.overflow-x-auto { overflow-x: auto; }
.overflow-y-auto { overflow-y: auto; }

/** Position utilities */
.relative { position: relative; }
.absolute { position: absolute; }
.fixed { position: fixed; }
.sticky { position: sticky; }

/** Cursor utilities */
.cursor-pointer { cursor: pointer; }

/** Opacity utilities */
.opacity-0 { opacity: 0; }
.opacity-50 { opacity: 0.5; }
.opacity-75 { opacity: 0.75; }
.opacity-100 { opacity: 1; }

/** Max width utilities */
.max-w-3xl { max-width: 48rem; }
.max-w-4xl { max-width: 56rem; }
.max-w-5xl { max-width: 64rem; }
.max-w-6xl { max-width: 72rem; }
.max-w-7xl { max-width: 80rem; }

/** Z-index utilities */
.z-10 { z-index: 10; }
.z-20 { z-index: 20; }
.z-30 { z-index: 30; }
.z-40 { z-index: 40; }
.z-50 { z-index: 50; }

/** Transition utilities */
.transition { transition: all 0.2s ease; }
.transition-fast { transition: all 0.15s ease; }
.transition-slow { transition: all 0.3s ease; }

/** Line height utilities */
.leading-tight { line-height: 1.25; }
.leading-normal { line-height: 1.5; }
.leading-relaxed { line-height: 1.75; }

/* ═══════════════════════════════════════════════════════════════════════════
   GRID COLUMN UTILITIES
   Spanning utilities for grid layouts
   ═══════════════════════════════════════════════════════════════════════════ */

.col-span-full { grid-column: 1 / -1; }

/* ═══════════════════════════════════════════════════════════════════════════
   CARD SECTION TITLE
   Section headers within cards
   ═══════════════════════════════════════════════════════════════════════════ */

.card-section-title {
  font-weight: 700;
  font-size: 1rem;
  margin-bottom: 0.5rem;
  color: var(--text);
}

/* ═══════════════════════════════════════════════════════════════════════════
   ICON UTILITIES
   Sizes for Material Symbols icons
   ═══════════════════════════════════════════════════════════════════════════ */

.icon-sm { font-size: 1rem; }
.icon-md { font-size: 1.5rem; }
.icon-lg { font-size: 1.75rem; }
.icon-xl { font-size: 3rem; }

/* Icon container sizes */
.icon-48 { width: 48px; height: 48px; }
.icon-56 { width: 56px; height: 56px; }
.icon-64 { width: 64px; height: 64px; }

/* Modal warning icon */
.modal-warning-icon {
  font-size: 2.5rem;
  color: #ef4444;
  margin-bottom: 1rem;
}

/* ═══════════════════════════════════════════════════════════════════════════
   SKELETON LOADER UTILITIES
   Predefined skeleton sizes for common loading states
   ═══════════════════════════════════════════════════════════════════════════ */

/**
 * Skeleton card - placeholder for card content loading
 * Usage: <div class="glass-card skeleton-card"><div class="skeleton"></div></div>
 */
.skeleton-card {
  padding: 1.5rem;
}

.skeleton-card .skeleton {
  height: 150px;
  border-radius: 12px;
}

.skeleton-avatar {
  width: 48px;
  height: 48px;
  border-radius: 50%;
}

.skeleton-line {
  height: 16px;
  border-radius: 6px;
}

.skeleton-text-sm {
  height: 14px;
  border-radius: 4px;
}

/* ═══════════════════════════════════════════════════════════════════════════
   CONTENT GRID UTILITIES
   Predefined grid layouts for responsive content
   ═══════════════════════════════════════════════════════════════════════════ */

/**
 * Stat grid - 4 column grid for dashboard statistics
 * Usage: <div class="stat-grid">...stat cards...</div>
 */
.stat-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem;
  margin-bottom: 1.5rem;
}

.stat-grid-3 {
  grid-template-columns: repeat(3, 1fr);
}

/**
 * Stat card - individual stat display with value and label
 * Usage: <div class="glass-card stat-card">
 *          <div class="stat-value">42</div>
 *          <div class="stat-label">Label</div>
 *        </div>
 */
.stat-card {
  padding: 1.25rem;
  text-align: center;
}

.stat-value {
  font-size: 1.75rem;
  font-weight: 800;
}

.stat-label {
  font-size: 0.78rem;
  color: var(--text-muted);
  margin-top: 4px;
}

.stat-value-primary { color: var(--primary-light); }
.stat-value-success { color: #22c55e; }
.stat-value-warning { color: #fbbf24; }
.stat-value-error { color: #f87171; }

/**
 * Chart container for performance/voting charts
 */
.perf-chart {
  display: flex;
  align-items: flex-end;
  gap: 0.5rem;
  height: 180px;
  padding: 1rem 0;
}

.perf-bar {
  flex: 1;
  background: var(--accent-gradient);
  border-radius: 6px 6px 0 0;
  min-height: 4px;
  transition: height 0.3s ease;
}

.perf-bar-label {
  font-size: 0.7rem;
  color: var(--text-muted);
  text-align: center;
}

/* ═══════════════════════════════════════════════════════════════════════════
   SEARCH BAR UTILITIES
   Search input with integrated filter dropdown
   ═══════════════════════════════════════════════════════════════════════════ */

.search-bar-filter {
  width: auto;
  min-width: 150px;
  padding: 0.5rem 2rem 0.5rem 0.75rem;
}

/* ═══════════════════════════════════════════════════════════════════════════
   APPOINTMENT TYPE SELECTOR
   Radio button group for virtual vs clinic selection
   ═══════════════════════════════════════════════════════════════════════════ */

/**
 * Appointment type option - radio label styling
 * Usage: <label class="appt-type-option">
 *          <input type="radio" name="apptType" value="virtual">
 *          <span>Virtual</span>
 *        </label>
 */
.appt-type-option {
  flex: 1;
  cursor: pointer;
  padding: 0.5rem;
  border-radius: 8px;
  border: 1px solid var(--glass-border);
  text-align: center;
  transition: all var(--transition-fast);
}

.appt-type-option.selected {
  background: rgba(99, 102, 241, 0.1);
  border-color: var(--accent);
}

.appt-type-label {
  font-size: 0.85rem;
  font-weight: 600;
}

.slot-hint {
  font-size: 0.75rem;
  color: var(--text-secondary);
  margin-top: 0.25rem;
}

/* ═══════════════════════════════════════════════════════════════════════════
   DOCTOR CARD UTILITIES
   Components for doctor listing and display
   ═══════════════════════════════════════════════════════════════════════════ */

/**
 * Doctor avatar with gradient background and initials
 * Usage: <div class="doctor-avatar">JD</div>
 */
.doctor-avatar {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--accent-gradient);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-weight: 700;
  font-size: 1rem;
  flex-shrink: 0;
  box-shadow: 0 4px 12px rgba(99, 102, 241, 0.3);
}

.doctor-avatar-sm {
  width: 32px;
  height: 32px;
  font-size: 0.75rem;
}

.doctor-avatar-lg {
  width: 64px;
  height: 64px;
  font-size: 1.5rem;
}

/**
 * Doctor info section
 */
.doctor-info-header {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 1rem;
}

.doctor-name {
  font-weight: 700;
  font-size: 0.95rem;
}

.doctor-specialty {
  font-size: 0.75rem;
  color: var(--accent);
  font-weight: 600;
}

.doctor-bio {
  font-size: 0.8125rem;
  color: var(--text-secondary);
  margin-bottom: 1rem;
  line-height: 1.5;
}

/**
 * Rating display with star icon
 */
.rating-display {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-bottom: 1rem;
}

.rating-display .material-symbols-outlined {
  font-size: 16px;
  color: var(--warning);
  font-variation-settings: 'FILL' 1;
}

.rating-value {
  font-size: 0.8125rem;
  font-weight: 600;
}

/**
 * Action buttons row for doctor cards
 */
.doctor-actions {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.doctor-actions .btn {
  flex: 1;
  min-width: 0;
}

/* ═══════════════════════════════════════════════════════════════════════════
   MODAL UTILITIES
   Modal-specific content styling
   ═══════════════════════════════════════════════════════════════════════════ */

.modal-booking-subtitle {
  font-size: 0.875rem;
  color: var(--text-secondary);
  margin-bottom: 1.25rem;
}

/* ═══════════════════════════════════════════════════════════════════════════
   CONTENT GRID LAYOUTS
   Common grid configurations for content pages
   ═══════════════════════════════════════════════════════════════════════════ */

/**
 * 2 column content grid (2fr 1fr split)
 */
.content-grid-2-1 {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 1rem;
  margin-bottom: 1rem;
}

/**
 * 3 column content grid
 */
.content-grid-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
}

/* ═══════════════════════════════════════════════════════════════════════════
   GLASS CARD UTILITIES
   Common padding and styling variants
   ═══════════════════════════════════════════════════════════════════════════ */

.glass-card-p-sm { padding: 1rem; }
.glass-card-p-md { padding: 1.5rem; }
.glass-card-p-lg { padding: 2rem; }

/* ═══════════════════════════════════════════════════════════════════════════
   FADE ANIMATION UTILITIES
   Animation delay helpers for staggered effects
   ═══════════════════════════════════════════════════════════════════════════ */

.fade-up {
  animation: fadeUp 0.5s ease forwards;
  opacity: 0;
}

@keyframes fadeUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.fade-up-1 { animation-delay: 0.05s; }
.fade-up-2 { animation-delay: 0.1s; }
.fade-up-3 { animation-delay: 0.15s; }
.fade-up-4 { animation-delay: 0.2s; }
.fade-up-5 { animation-delay: 0.25s; }
.fade-up-6 { animation-delay: 0.3s; }

/* ═══════════════════════════════════════════════════════════════════════════
   PAGE HEADER UTILITIES
   Page header typography variants
   ═══════════════════════════════════════════════════════════════════════════ */

.page-heading-lg {
  font-weight: 800;
  font-size: 1.6rem;
  letter-spacing: -0.02em;
}

.page-subtitle-sm {
  color: var(--text-muted);
  font-size: 0.9rem;
  margin-top: 0.25rem;
}

/* ═══════════════════════════════════════════════════════════════════════════
   RATING BREAKDOWN UTILITIES
   Star rating distribution display
   ═══════════════════════════════════════════════════════════════════════════ */

.rating-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.4rem;
}

.rating-row-label {
  font-size: 0.75rem;
  width: 12px;
  text-align: right;
  color: var(--text-muted);
}

.rating-bar-container {
  flex: 1;
  height: 6px;
  background: rgba(255, 255, 255, 0.06);
  border-radius: 999px;
  overflow: hidden;
}

.rating-bar-fill {
  height: 100%;
  background: linear-gradient(90deg, #f59e0b, #fbbf24);
  border-radius: 999px;
  transition: width 0.3s ease;
}

.rating-percentage {
  font-size: 0.7rem;
  color: var(--text-muted);
  width: 30px;
  text-align: right;
}