/**
 * Material Design 3 System
 * Implements Material You principles for NeuroBit
 * Maps .clay-* classes to Material Design equivalents for seamless switching
 */

:root {
  /* === CANDY COLOR PALETTE (Base - Same as Claymorphism for consistency) === */
  --candy-blue: #00C2FF;
  --candy-blue-dark: #00A3D9;
  --candy-green: #7FFF00;
  --candy-green-dark: #66CC00;
  --candy-pink: #FF69B4;
  --candy-pink-dark: #FF1493;
  --candy-yellow: #FFE135;
  --candy-yellow-dark: #D4B800;
  --candy-orange: #FF6B35;
  --candy-orange-dark: #E55A2B;
  --candy-purple: #B24BF3;
  --candy-purple-dark: #9333EA;
  --candy-red: #FF4B4B;
  --candy-red-dark: #DC2626;
  
  /* === BACKGROUND COLORS === */
  --cream: #FFFEF5;
  --cream-warm: #FFF8E7;
  --surface-1: #F3F4F6;
  --surface-2: #E5E7EB;
  --surface-3: #D1D5DB;
  
  /* === TEXT COLORS === */
  --ink: #1A365D;
  --ink-light: #2D4A6F;
  --ink-muted: #4A6FA5;
  
  /* === MATERIAL DESIGN TOKENS === */
  
  /* Elevation Shadows */
  --md-shadow-1: 0px 1px 3px 1px rgba(0, 0, 0, 0.15), 0px 1px 2px 0px rgba(0, 0, 0, 0.3);
  --md-shadow-2: 0px 2px 6px 2px rgba(0, 0, 0, 0.15), 0px 1px 2px 0px rgba(0, 0, 0, 0.3);
  --md-shadow-3: 0px 4px 8px 3px rgba(0, 0, 0, 0.15), 0px 1px 3px 0px rgba(0, 0, 0, 0.3);
  --md-shadow-4: 0px 6px 10px 4px rgba(0, 0, 0, 0.15), 0px 2px 3px 0px rgba(0, 0, 0, 0.3);
  --md-shadow-5: 0px 8px 12px 6px rgba(0, 0, 0, 0.15), 0px 4px 4px 0px rgba(0, 0, 0, 0.3);
  
  /* Border Radii */
  --radius-xs: 4px;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 28px;
  --radius-full: 9999px;
  
  /* Animation */
  --ease-standard: cubic-bezier(0.2, 0, 0, 1);
  --duration-short: 200ms;
  --duration-medium: 400ms;
}

/* ========================================
   RESET / UTILS
   ======================================== */
.clay-noise::before {
  display: none; /* No noise in Material Design */
}

/* ========================================
   CARDS (Elevated Card)
   ======================================== */
.clay-card {
  background: white;
  border-radius: var(--radius-md);
  box-shadow: var(--md-shadow-1);
  padding: 1.5rem;
  transition: box-shadow var(--duration-short) var(--ease-standard), transform var(--duration-short) var(--ease-standard);
  border: 1px solid transparent; /* Maintain sizing */
  position: relative;
  overflow: hidden;
}

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

/* Card Variants */
.clay-card-sm { border-radius: var(--radius-sm); padding: 1rem; }
.clay-card-lg { border-radius: var(--radius-lg); padding: 2rem; }

/* Colored Cards (Filled/Container Cards) */
.clay-card-blue { background: #E8F9FF; color: var(--ink); }
.clay-card-green { background: #ECFFEC; color: var(--ink); }
.clay-card-pink { background: #FFF0F5; color: var(--ink); }
.clay-card-yellow { background: #FFFDE7; color: var(--ink); }
.clay-card-orange { background: #FFF3E0; color: var(--ink); }
.clay-card-purple { background: #F3E5F5; color: var(--ink); }

/* Flat Card (Outlined) */
.clay-card-flat {
  box-shadow: none;
  border: 1px solid var(--surface-3);
  background: white;
}
.clay-card-flat:hover {
  box-shadow: none;
  background: var(--surface-1);
  transform: none;
}

/* Pressable Card */
.clay-card-press { cursor: pointer; }
.clay-card-press:active {
  background: var(--surface-2);
  transform: scale(0.99);
}

/* ========================================
   BUTTONS (Filled Button)
   ======================================== */
.clay-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.75rem 1.5rem;
  font-family: 'Nunito', sans-serif; /* MD uses Roboto usually, but keeping Nunito for brand */
  font-weight: 600;
  font-size: 1rem;
  text-decoration: none;
  border: none;
  border-radius: var(--radius-full);
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: box-shadow var(--duration-short) var(--ease-standard), background-color var(--duration-short) var(--ease-standard);
  
  /* Default: Primary (Green/Theme) */
  background: var(--candy-green);
  color: var(--ink);
  box-shadow: var(--md-shadow-1);
}

.clay-btn:hover {
  box-shadow: var(--md-shadow-2);
  filter: brightness(0.95); /* Simulate state layer */
}

.clay-btn:active {
  box-shadow: var(--md-shadow-1);
  filter: brightness(0.9);
}

.clay-btn:disabled, .clay-btn[disabled] {
  background: var(--surface-3);
  color: #9CA3AF;
  box-shadow: none;
  cursor: not-allowed;
  pointer-events: none;
}

/* Ripple Effect Simulation (Pseudo-element) */
.clay-btn::after {
  content: "";
  position: absolute;
  inset: 0;
  background: currentColor;
  opacity: 0;
  transition: opacity var(--duration-short);
}
.clay-btn:active::after {
  opacity: 0.1;
}

/* Button Sizes */
.clay-btn-xs { padding: 0.25rem 0.5rem; font-size: 0.75rem; }
.clay-btn-sm { padding: 0.5rem 1rem; font-size: 0.875rem; }
.clay-btn-lg { padding: 1rem 2rem; font-size: 1.125rem; }
.clay-btn-xl { padding: 1.25rem 2.5rem; font-size: 1.25rem; }

/* Button Color Variants */
.clay-btn-blue { background: var(--candy-blue); color: white; }
.clay-btn-pink { background: var(--candy-pink); color: white; }
.clay-btn-yellow { background: var(--candy-yellow); color: var(--ink); }
.clay-btn-orange { background: var(--candy-orange); color: white; }
.clay-btn-purple { background: var(--candy-purple); color: white; }
.clay-btn-red { background: var(--candy-red); color: white; }
.clay-btn-green { background: var(--candy-green); color: white; }

/* Ghost/Outlined Button */
.clay-btn-ghost {
  background: transparent;
  border: 1px solid var(--surface-3);
  color: var(--ink);
  box-shadow: none;
}
.clay-btn-ghost:hover {
  background: rgba(0,0,0,0.05);
  box-shadow: none;
  border-color: var(--ink-muted);
}

/* Icon Button */
.clay-btn-icon {
  width: 3rem;
  height: 3rem;
  padding: 0;
  border-radius: var(--radius-full); /* Circular */
}

/* ========================================
   INPUTS (Outlined Text Field - Material Design 3)
   ======================================== */
.clay-input {
  width: 100%;
  padding: 0 1rem; /* 16px padding horizontal */
  height: 3.5rem; /* 56px height */
  font-size: 1rem; /* 16px */
  font-family: 'Nunito', sans-serif; /* Roboto in strict MD, but Nunito for brand */
  color: var(--ink); /* On Surface */
  background: transparent; /* Outlined inputs are transparent */
  border: 1px solid var(--surface-3); /* Outline Variant */
  border-radius: 4px; /* Standard MD Outlined radius */
  outline: none;
  transition: border-color var(--duration-short), border-width 0s; /* Instant width change to avoid layout shift, color animates */
  caret-color: var(--candy-blue); /* Primary cursor */
}

.clay-input::placeholder {
  color: var(--ink-muted); /* On Surface Variant */
  opacity: 1;
}

.clay-input:hover {
  border-color: var(--ink); /* On Surface - High emphasis on hover */
}

.clay-input:focus {
  border-color: var(--candy-blue); /* Primary */
  border-width: 2px;
  padding-left: calc(1rem - 1px); /* Adjust padding to prevent layout shift */
  padding-right: calc(1rem - 1px);
}

.clay-input-success { border-color: var(--candy-green); }
.clay-input-success:focus { border-color: var(--candy-green); }

.clay-input-error { border-color: var(--candy-red); }
.clay-input-error:focus { border-color: var(--candy-red); }

/* Input Sizes */
.clay-input-sm { 
  height: 2.5rem; /* 40px - Dense */
  font-size: 0.875rem; 
  padding: 0 0.75rem;
}
.clay-input-sm:focus {
  padding-left: calc(0.75rem - 1px);
  padding-right: calc(0.75rem - 1px);
}

.clay-input-lg { 
  height: 4rem; /* 64px */
  font-size: 1.125rem; 
}

/* Textarea - Outlined */
.clay-textarea { 
  min-height: 120px; 
  resize: vertical; 
  padding: 1rem; /* Restore vertical padding for textarea */
  height: auto;
}
.clay-textarea:focus {
  padding: calc(1rem - 1px);
}

/* Select - Outlined */
.clay-select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23475569' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1rem center;
  padding-right: 2.5rem;
}
.dark .clay-select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23E0E0E0' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
}

/* ========================================
   CHECKBOX & RADIO
   ======================================== */
.clay-checkbox {
  appearance: none;
  width: 1.25rem;
  height: 1.25rem;
  border: 2px solid var(--ink-muted);
  border-radius: 2px;
  background: white;
  cursor: pointer;
  position: relative;
  transition: background-color var(--duration-short), border-color var(--duration-short);
}

.clay-checkbox:checked {
  background: var(--candy-blue);
  border-color: var(--candy-blue);
}

.clay-checkbox:checked::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 45%;
  width: 5px;
  height: 9px;
  border: solid white;
  border-width: 0 2px 2px 0;
  transform: translate(-50%, -50%) rotate(45deg);
}

.clay-radio {
  appearance: none;
  width: 1.25rem;
  height: 1.25rem;
  border: 2px solid var(--ink-muted);
  border-radius: 50%;
  background: white;
  cursor: pointer;
  position: relative;
}

.clay-radio:checked {
  border-color: var(--candy-blue);
}

.clay-radio:checked::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--candy-blue);
  transform: translate(-50%, -50%);
}

/* Toggle Switch */
.clay-toggle {
  appearance: none;
  width: 3.25rem;
  height: 2rem;
  background: var(--surface-3);
  border-radius: var(--radius-full);
  position: relative;
  cursor: pointer;
  transition: background-color var(--duration-short);
}

.clay-toggle::after {
  content: "";
  position: absolute;
  top: 4px;
  left: 4px;
  width: 1.5rem;
  height: 1.5rem;
  background: white;
  border-radius: 50%;
  box-shadow: var(--md-shadow-1);
  transition: transform var(--duration-short);
}

.clay-toggle:checked {
  background: var(--candy-green);
}

.clay-toggle:checked::after {
  transform: translateX(1.25rem);
}

/* ========================================
   PILLS & BADGES (Chips)
   ======================================== */
.clay-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.25rem 0.75rem;
  border-radius: var(--radius-sm); /* Assistive Chip shape */
  font-size: 0.875rem;
  font-weight: 600;
  background: var(--surface-2);
  color: var(--ink);
  border: 1px solid transparent;
}

.clay-pill-blue { background: #E8F9FF; color: var(--candy-blue-dark); }
.clay-pill-green { background: #ECFFEC; color: var(--candy-green-dark); }
.clay-pill-pink { background: #FFF0F5; color: var(--candy-pink-dark); }
.clay-pill-yellow { background: #FFFDE7; color: var(--candy-yellow-dark); }
.clay-pill-purple { background: #F3E5F5; color: var(--candy-purple-dark); }
.clay-pill-orange { background: #FFF3E0; color: var(--candy-orange-dark); }
.clay-pill-red { background: #FFF0F0; color: var(--candy-red-dark); }

.clay-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.25rem 0.5rem;
  border-radius: var(--radius-full);
  background: var(--candy-red);
  color: white;
  font-size: 0.75rem;
  font-weight: bold;
  min-width: 1.5rem;
  height: 1.5rem;
}

.clay-badge-dot {
  width: 0.75rem;
  height: 0.75rem;
  padding: 0;
  border: 1px solid white;
}

/* ========================================
   NAVIGATION (Drawer/Sidebar)
   ======================================== */
.clay-sidebar {
  background: var(--cream);
  border-right: 1px solid var(--surface-3);
  /* Material Drawer usually has no shadow or very light */
}

/* Sidebar Item - Material Design 3 Navigation Drawer Item */
/* Note: base.html uses .sidebar-item (utility) AND .clay-nav-item */
.clay-nav-item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0 1rem; /* 16px horizontal padding */
  height: 3.5rem; /* 56px height standard */
  margin: 0.25rem 0.75rem; /* 4px vertical margin, 12px horizontal */
  border-radius: 1.75rem; /* 28px - Full pill shape */
  
  font-family: var(--font-body);
  font-size: 0.875rem; /* 14px */
  font-weight: 500; /* Medium weight */
  color: var(--ink-muted); /* On Surface Variant */
  text-decoration: none;
  
  transition: background-color var(--duration-short) var(--ease-standard), 
              color var(--duration-short) var(--ease-standard);
  cursor: pointer;
  position: relative;
  overflow: hidden; /* For ripple */
}

.clay-nav-item:hover {
  background: rgba(0, 0, 0, 0.04); /* Light overlay on hover */
  color: var(--ink); /* On Surface */
}

/* Color Variants - Define active colors */
/* Material uses lighter pastel colors for active container backgrounds */
.clay-nav-item-blue { --nav-active-bg: var(--candy-blue-light); --nav-active-text: var(--candy-blue-dark); }
.clay-nav-item-green { --nav-active-bg: var(--candy-green-light); --nav-active-text: var(--candy-green-dark); }
.clay-nav-item-pink { --nav-active-bg: var(--candy-pink-light); --nav-active-text: var(--candy-pink-dark); }
.clay-nav-item-purple { --nav-active-bg: var(--candy-purple-light); --nav-active-text: var(--candy-purple-dark); }
.clay-nav-item-yellow { --nav-active-bg: var(--candy-yellow-light); --nav-active-text: var(--candy-yellow-dark); }
.clay-nav-item-orange { --nav-active-bg: var(--candy-orange-light); --nav-active-text: var(--candy-orange-dark); }
.clay-nav-item-red { --nav-active-bg: var(--candy-red-light); --nav-active-text: var(--candy-red-dark); }

/* Fallback if variables missing */
.clay-nav-item {
  --nav-active-bg: #E8F9FF;
  --nav-active-text: #001E2F;
}

/* Active State */
.clay-nav-item.clay-nav-item-active,
.clay-nav-item.active {
  background-color: var(--nav-active-bg); /* Secondary Container */
  color: var(--nav-active-text); /* On Secondary Container */
}

.clay-nav-item.clay-nav-item-active:hover {
   background-color: color-mix(in srgb, var(--nav-active-bg), black 4%);
}

/* Sidebar Icon */
.sidebar-icon {
  font-size: 1.5rem; /* 24px */
  width: 1.5rem;
  height: 1.5rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  /* Ensure no text styles interfere */
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;
}

/* Ensure material symbols render correctly */
.clay-nav-item .material-symbols-outlined {
  font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}

.clay-nav-item.clay-nav-item-active .material-symbols-outlined {
  font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}

.sidebar-text {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Tooltip (for collapsed state) */
.sidebar-tooltip {
  position: absolute;
  left: 3.5rem; /* Outside the collapsed sidebar width */
  top: 50%;
  transform: translateY(-50%);
  background: var(--ink);
  color: var(--cream);
  padding: 0.25rem 0.5rem;
  border-radius: 0.25rem;
  font-size: 0.75rem;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s;
  z-index: 100;
  white-space: nowrap;
  display: none; /* Hidden by default */
}

.sidebar.collapsed .clay-nav-item:hover .sidebar-tooltip {
  display: block;
  opacity: 1;
}

/* ========================================
   ICONS
   ======================================== */
.clay-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3rem;
  height: 3rem;
  border-radius: 50%;
  background: var(--surface-1);
  color: var(--candy-blue);
  font-size: 1.5rem;
}

.clay-icon-square {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3rem;
  height: 3rem;
  border-radius: 12px; /* Material 3 standard for medium shapes */
  background: var(--surface-1);
  color: var(--ink);
}

/* Icon Colors - Tonal/Container Style (Light BG, Dark Text) */
.clay-icon-blue { background: #E8F9FF; color: var(--candy-blue-dark); }
.clay-icon-green { background: #ECFFEC; color: var(--candy-green-dark); }
.clay-icon-pink { background: #FFF0F5; color: var(--candy-pink-dark); }
.clay-icon-purple { background: #F3E5F5; color: var(--candy-purple-dark); }
.clay-icon-yellow { background: #FFFDE7; color: var(--candy-yellow-dark); }
.clay-icon-orange { background: #FFF3E0; color: var(--candy-orange-dark); }
.clay-icon-red { background: #FFF0F0; color: var(--candy-red-dark); }

/* Apply same to squares */
.clay-icon-square-blue { background: #E8F9FF; color: var(--candy-blue-dark); }
.clay-icon-square-green { background: #ECFFEC; color: var(--candy-green-dark); }
.clay-icon-square-pink { background: #FFF0F5; color: var(--candy-pink-dark); }
.clay-icon-square-purple { background: #F3E5F5; color: var(--candy-purple-dark); }
.clay-icon-square-yellow { background: #FFFDE7; color: var(--candy-yellow-dark); }
.clay-icon-square-orange { background: #FFF3E0; color: var(--candy-orange-dark); }
.clay-icon-square-red { background: #FFF0F0; color: var(--candy-red-dark); }

/* Filled Style (Dark BG, White Text) - Matches .clay-purple utility usage */
.clay-icon-square.clay-blue, .clay-blue { background: var(--candy-blue); color: white; }
.clay-icon-square.clay-green, .clay-green { background: var(--candy-green); color: var(--ink); } /* Green is often light, but if 'candy-green' is dark enough... usually ink on green */
.clay-icon-square.clay-pink, .clay-pink { background: var(--candy-pink); color: white; }
.clay-icon-square.clay-purple, .clay-purple { background: var(--candy-purple); color: white; }
.clay-icon-square.clay-yellow, .clay-yellow { background: var(--candy-yellow); color: var(--ink); }
.clay-icon-square.clay-orange, .clay-orange { background: var(--candy-orange); color: white; }
.clay-icon-square.clay-red, .clay-red { background: var(--candy-red); color: white; }

/* Override for specific icon text if needed */
.clay-purple .material-symbols-outlined { color: white; }
.clay-blue .material-symbols-outlined { color: white; }
.clay-pink .material-symbols-outlined { color: white; }
.clay-red .material-symbols-outlined { color: white; }
.clay-orange .material-symbols-outlined { color: white; }


/* ========================================
   DIALOGS & TOASTS
   ======================================== */
.clay-modal-backdrop {
  background: rgba(0, 0, 0, 0.5);
  backdrop-filter: none; /* Material typically just dims */
}

.clay-modal {
  background: white;
  border-radius: var(--radius-xl);
  box-shadow: var(--md-shadow-5); /* High elevation */
  border: none;
  padding: 1.5rem;
}

.clay-modal-title {
  font-size: 1.5rem;
  margin-bottom: 1rem;
}

.clay-toast {
  background: #323232; /* Standard Snackbar color */
  color: white;
  border-radius: 4px;
  padding: 0.875rem 1rem;
  box-shadow: var(--md-shadow-2);
  border: none;
  font-size: 0.875rem;
}

.clay-toast-success { border-left: 4px solid var(--candy-green); }
.clay-toast-error { border-left: 4px solid var(--candy-red); }
.clay-toast-warning { border-left: 4px solid var(--candy-yellow); }
.clay-toast-info { border-left: 4px solid var(--candy-blue); }

/* ========================================
   ALERTS / BANNERS
   ======================================== */
.clay-alert {
  padding: 1rem;
  border-radius: var(--radius-xs);
  border: 1px solid transparent;
  display: flex;
  align-items: flex-start;
  gap: 1rem;
}

.clay-alert-success { background: #E8FFEB; border-color: var(--candy-green); color: #004d00; }
.clay-alert-error { background: #FFF0F0; border-color: var(--candy-red); color: #8a0000; }
.clay-alert-warning { background: #FFFDE7; border-color: var(--candy-yellow); color: #665c00; }
.clay-alert-info { background: #E8F9FF; border-color: var(--candy-blue); color: #004a61; }

/* ========================================
   PROGRESS BAR
   ======================================== */
.clay-progress {
  background: var(--surface-2);
  border-radius: var(--radius-full);
  height: 0.5rem; /* Thinner for Material */
  box-shadow: none;
}

.clay-progress-bar {
  background-color: var(--candy-green);
  border-radius: var(--radius-full);
  box-shadow: none;
}

.clay-progress-bar-blue { background-color: var(--candy-blue); }
.clay-progress-bar-green { background-color: var(--candy-green); }
.clay-progress-bar-pink { background-color: var(--candy-pink); }
.clay-progress-bar-yellow { background-color: var(--candy-yellow); }
.clay-progress-bar-purple { background-color: var(--candy-purple); }
.clay-progress-bar-orange { background-color: var(--candy-orange); }
.clay-progress-bar-red { background-color: var(--candy-red); }

/* ========================================
   QUIZ OPTIONS
   ======================================== */
.clay-option {
  background: white;
  border: 1px solid var(--surface-3);
  border-radius: var(--radius-md);
  box-shadow: none;
  padding: 1rem;
  transition: background-color var(--duration-short), border-color var(--duration-short);
}

.clay-option:hover {
  background: var(--surface-1);
  border-color: var(--ink-muted);
}

.clay-option.selected {
  background: #E8F9FF;
  border-color: var(--candy-blue);
  border-width: 2px;
}

.clay-option.correct {
  background: #E8FFEB;
  border-color: var(--candy-green);
  border-width: 2px;
}

.clay-option.incorrect {
  background: #FFF0F0;
  border-color: var(--candy-red);
  border-width: 2px;
}

/* ========================================
   TABS (Material Tabs)
   ======================================== */
.clay-tabs {
  display: flex;
  gap: 0;
  padding: 0;
  background: transparent;
  border-bottom: 1px solid var(--surface-3);
  border-radius: 0;
  box-shadow: none;
}

.clay-tab {
  flex: 1;
  padding: 1rem;
  font-weight: 600;
  font-size: 0.875rem;
  color: var(--ink-muted);
  background: transparent;
  border: none;
  border-bottom: 2px solid transparent;
  border-radius: 0;
  cursor: pointer;
  transition: color var(--duration-short), background-color var(--duration-short);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.clay-tab:hover {
  color: var(--ink);
  background: var(--surface-1);
}

.clay-tab.active {
  color: var(--candy-blue);
  background: transparent;
  border-bottom: 2px solid var(--candy-blue);
  box-shadow: none;
}

.clay-tab-panel {
  display: none;
  padding: 1.5rem 0;
}
.clay-tab-panel.active { display: block; }

/* ========================================
   TABLES (Material Data Table)
   ======================================== */
.clay-table-wrapper {
  background: white;
  border-radius: var(--radius-sm);
  border: 1px solid var(--surface-3);
  overflow: hidden;
  box-shadow: none;
}

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

.clay-table th {
  text-align: left;
  padding: 1rem;
  font-weight: 600;
  font-size: 0.875rem;
  color: var(--ink-light);
  background: white;
  border-bottom: 1px solid var(--surface-3);
}

.clay-table td {
  padding: 1rem;
  color: var(--ink);
  border-bottom: 1px solid var(--surface-2);
  font-size: 0.875rem;
}

.clay-table tbody tr {
  transition: background-color var(--duration-short);
}

.clay-table-striped tbody tr:nth-child(odd) {
  background: rgba(0, 0, 0, 0.04);
}

.clay-table tbody tr:hover {
  background: var(--surface-1);
}

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

/* ========================================
   SLIDERS (Material Slider)
   ======================================== */
.clay-slider {
  appearance: none;
  width: 100%;
  height: 4px;
  background: var(--surface-3);
  border-radius: var(--radius-full);
  outline: none;
  box-shadow: none;
}

.clay-slider::-webkit-slider-thumb {
  appearance: none;
  width: 20px;
  height: 20px;
  background: var(--candy-blue);
  border-radius: 50%;
  cursor: pointer;
  box-shadow: var(--md-shadow-1);
  transition: transform var(--duration-short), box-shadow var(--duration-short);
  border: none;
}

.clay-slider::-webkit-slider-thumb:hover {
  transform: scale(1.1);
  box-shadow: 0 0 0 8px rgba(0, 194, 255, 0.1);
}

.clay-slider::-webkit-slider-thumb:active {
  transform: scale(1.1);
  box-shadow: 0 0 0 12px rgba(0, 194, 255, 0.2);
}

/* ========================================
   TOOLTIPS (Material Tooltip)
   ======================================== */
.clay-tooltip {
  position: relative;
  display: inline-block;
}

.clay-tooltip-content {
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%) scale(0.9);
  padding: 0.5rem 0.75rem;
  background: #323232;
  color: white;
  font-size: 0.75rem;
  font-weight: 500;
  border-radius: 4px;
  border: none;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  z-index: 50;
  box-shadow: var(--md-shadow-2);
  transition: opacity var(--duration-short), transform var(--duration-short);
}

.clay-tooltip:hover .clay-tooltip-content {
  opacity: 1;
  transform: translateX(-50%) scale(1);
}

.clay-tooltip-content::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border: 4px solid transparent;
  border-top-color: #323232;
}

/* ========================================
   SKELETON LOADING
   ======================================== */
.clay-skeleton {
  background: linear-gradient(
    90deg,
    var(--surface-2) 25%,
    var(--surface-1) 50%,
    var(--surface-2) 75%
  );
  background-size: 200% 100%;
  border-radius: var(--radius-xs);
  animation: skeleton-shimmer 1.5s infinite linear;
}

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

.clay-skeleton-text { height: 1rem; margin-bottom: 0.5rem; border-radius: 4px; }
.clay-skeleton-title { height: 1.5rem; width: 60%; margin-bottom: 1rem; border-radius: 4px; }
.clay-skeleton-avatar { width: 3rem; height: 3rem; border-radius: 50%; }
.clay-skeleton-card { height: 200px; border-radius: var(--radius-md); }

/* ========================================
   EMPTY STATE
   ======================================== */
.clay-empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 3rem 2rem;
  text-align: center;
}

.clay-empty-state-icon {
  font-size: 4rem;
  color: var(--surface-3);
  margin-bottom: 1rem;
}

.clay-empty-state-title {
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--ink);
  margin-bottom: 0.5rem;
}

.clay-empty-state-description {
  color: var(--ink-muted);
  max-width: 300px;
  margin-bottom: 1.5rem;
}

/* ========================================
   UTILITY CLASSES
   ======================================== */
.text-ink { color: var(--ink); }
.text-ink-light { color: var(--ink-light); }
.text-ink-muted { color: var(--ink-muted); }
.bg-cream { background-color: var(--cream); }
.bg-cream-warm { background-color: var(--cream-warm); }

.clay-text-shadow { text-shadow: none; }
.clay-gradient-text {
  background: none;
  -webkit-background-clip: unset;
  -webkit-text-fill-color: initial;
  background-clip: unset;
  color: var(--candy-blue);
}

/* ========================================
   DARK MODE ADJUSTMENTS
   ======================================== */
.dark {
  --cream: #121212;
  --cream-warm: #1E1E1E;
  --surface-1: #1E1E1E;
  --surface-2: #2C2C2C;
  --surface-3: #444444;
  
  --ink: #E0E0E0;
  --ink-light: #B0B0B0;
  --ink-muted: #808080;
  
  --md-shadow-1: 0px 1px 2px rgba(0,0,0,0.6);
  --md-shadow-2: 0px 4px 8px rgba(0,0,0,0.6);
}

.dark .clay-card {
  background: var(--surface-1);
  border: 1px solid var(--surface-3);
  box-shadow: none;
}

.dark .clay-input {
  background: var(--surface-1);
  border-color: var(--surface-3);
  color: var(--ink);
}
.dark .clay-input:focus { border-color: var(--candy-blue); }

.dark .clay-sidebar {
  background: var(--surface-1);
  border-right-color: var(--surface-3);
}

.dark .clay-sidebar-item:hover { background: rgba(255,255,255,0.05); }
.dark .clay-sidebar-item.active { background: rgba(0, 194, 255, 0.2); color: #80D8FF; }

.dark .clay-option {
  background: var(--surface-1);
  border-color: var(--surface-3);
}

.dark .clay-table-wrapper {
  background: var(--surface-1);
  border-color: var(--surface-3);
}
.dark .clay-table th {
  background: var(--surface-1);
  border-bottom-color: var(--surface-3);
}
.dark .clay-table td {
  border-bottom-color: var(--surface-3);
}
.dark .clay-table tbody tr:nth-child(even) {
  background: rgba(255,255,255,0.02);
}
.dark .clay-table tbody tr:hover {
  background: rgba(255,255,255,0.05);
}

/* ========================================
   RESPONSIVE
   ======================================== */
@media (max-width: 768px) {
  :root {
    --radius-md: 8px;
    --radius-lg: 12px;
  }
  .clay-card { padding: 1rem; }
  .clay-btn { padding: 0.6rem 1.2rem; }
}

/* ========================================
   RESPONSIVE UTILITIES (Compat with Claymorphism markup)
   ======================================== */
@media (min-width: 768px) {
  .md\:clay-card {
    background: white;
    border-radius: var(--radius-md);
    box-shadow: var(--md-shadow-1);
    padding: 1.5rem;
    transition: box-shadow var(--duration-short) var(--ease-standard), transform var(--duration-short) var(--ease-standard);
    border: 1px solid transparent;
    position: relative;
    overflow: hidden;
  }
  
  .dark .md\:clay-card {
    background: var(--surface-1);
    border: 1px solid var(--surface-3);
    box-shadow: none;
  }
}