/* =====================================================================
   Neomorphism Design System (Soft UI) - Khlongkhae Market (เจ้เล็ก)
   Designed for High Accessibility & Tactile Feedback (Light & Dark Mode)
   ===================================================================== */

:root {
  /* Font Family */
  --font-thai: 'Prompt', 'Kanit', -apple-system, BlinkMacSystemFont, sans-serif;
  
  /* Light Mode Palette (Default) */
  --bg-primary: #e6edf5;
  --bg-surface: #edf3f8;
  --bg-card: #eaf0f7;
  --bg-input: #e2eaf2;
  
  --shadow-light: #ffffff;
  --shadow-dark: rgba(166, 180, 200, 0.7);
  --shadow-dark-subtle: rgba(166, 180, 200, 0.35);
  
  /* Neomorphic Shadows (Soft UI) */
  --neu-flat: 7px 7px 15px var(--shadow-dark), -7px -7px 15px var(--shadow-light);
  --neu-flat-sm: 4px 4px 8px var(--shadow-dark), -4px -4px 8px var(--shadow-light);
  --neu-flat-lg: 12px 12px 24px var(--shadow-dark), -12px -12px 24px var(--shadow-light);
  --neu-pressed: inset 4px 4px 8px var(--shadow-dark), inset -4px -4px 8px var(--shadow-light);
  --neu-pressed-sm: inset 2px 2px 5px var(--shadow-dark), inset -2px -2px 5px var(--shadow-light);
  --neu-convex: linear-gradient(145deg, #f7faff, #d5dee9);
  --neu-concave: linear-gradient(145deg, #d5dee9, #f7faff);
  
  /* Typography Colors */
  --text-primary: #1e293b;
  --text-secondary: #475569;
  --text-muted: #64748b;
  --text-light: #ffffff;
  
  /* Brand & Status Accents */
  --color-primary: #2563eb;
  --color-primary-hover: #1d4ed8;
  --color-primary-soft: #dbeafe;
  
  --color-line-green: #06c755;
  --color-line-dark: #05a847;
  
  /* Stall Status Colors (Vibrant & Distinct) */
  --status-available: #10b981;        /* ว่าง (จองได้ทันที) - เขียว */
  --status-available-bg: #d1fae5;
  --status-available-text: #065f46;
  
  --status-absent: #f59e0b;           /* ประจำแจ้งหยุด (ขาจรลงได้) - ส้ม/เหลืองทอง */
  --status-absent-bg: #fef3c7;
  --status-absent-text: #92400e;
  
  --status-regular: #6366f1;          /* ประจำรายเดือน/รายปี - น้ำเงินอมม่วง */
  --status-regular-bg: #e0e7ff;
  --status-regular-text: #3730a3;
  
  --status-occupied: #e11d48;         /* ขาจรลงแทนแล้ว / จองแล้ว - แดง */
  --status-occupied-bg: #ffe4e6;
  --status-occupied-text: #9f1239;
  
  --status-daily: #0284c7;            /* จองรายวัน - ฟ้า */
  --status-daily-bg: #e0f2fe;
  --status-daily-text: #075985;
  
  /* Border & Radius */
  --border-subtle: rgba(255, 255, 255, 0.6);
  --radius-sm: 10px;
  --radius-md: 16px;
  --radius-lg: 24px;
  --radius-full: 9999px;
  
  /* Transitions */
  --transition-fast: 0.15s cubic-bezier(0.4, 0, 0.2, 1);
  --transition-normal: 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  --transition-bounce: 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

/* =====================================================================
   Dark Mode Overrides
   ===================================================================== */
[data-theme="dark"] {
  --bg-primary: #121824;
  --bg-surface: #182030;
  --bg-card: #1c2538;
  --bg-input: #151d2c;
  
  --shadow-light: rgba(255, 255, 255, 0.04);
  --shadow-dark: rgba(0, 0, 0, 0.65);
  --shadow-dark-subtle: rgba(0, 0, 0, 0.35);
  
  --neu-flat: 6px 6px 14px var(--shadow-dark), -4px -4px 10px var(--shadow-light);
  --neu-flat-sm: 3px 3px 7px var(--shadow-dark), -2px -2px 6px var(--shadow-light);
  --neu-flat-lg: 10px 10px 22px var(--shadow-dark), -8px -8px 18px var(--shadow-light);
  --neu-pressed: inset 4px 4px 8px var(--shadow-dark), inset -3px -3px 6px var(--shadow-light);
  --neu-pressed-sm: inset 2px 2px 4px var(--shadow-dark), inset -2px -2px 4px var(--shadow-light);
  --neu-convex: linear-gradient(145deg, #202b3f, #141b29);
  --neu-concave: linear-gradient(145deg, #141b29, #202b3f);
  
  --text-primary: #f8fafc;
  --text-secondary: #cbd5e1;
  --text-muted: #8492a6;
  
  --color-primary: #3b82f6;
  --color-primary-hover: #60a5fa;
  --color-primary-soft: #1e3a8a;
  
  --status-available-bg: #064e3b;
  --status-available-text: #a7f3d0;
  
  --status-absent-bg: #78350f;
  --status-absent-text: #fde68a;
  
  --status-regular-bg: #312e81;
  --status-regular-text: #c7d2fe;
  
  --status-occupied-bg: #881337;
  --status-occupied-text: #fecdd3;
  
  --status-daily-bg: #0c4a6e;
  --status-daily-text: #bae6fd;
  
  --border-subtle: rgba(255, 255, 255, 0.08);
}

/* =====================================================================
   Base Reset & Styles
   ===================================================================== */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  -webkit-tap-highlight-color: transparent;
}

body {
  font-family: var(--font-thai);
  background-color: var(--bg-primary);
  color: var(--text-primary);
  min-height: 100vh;
  line-height: 1.6;
  overflow-x: hidden;
  transition: background-color var(--transition-normal), color var(--transition-normal);
}

/* Neomorphic Utility Classes */
.neu-box {
  background: var(--bg-card);
  border-radius: var(--radius-md);
  box-shadow: var(--neu-flat);
  border: 1px solid var(--border-subtle);
  transition: all var(--transition-normal);
}

.neu-box-sm {
  background: var(--bg-card);
  border-radius: var(--radius-sm);
  box-shadow: var(--neu-flat-sm);
  border: 1px solid var(--border-subtle);
  transition: all var(--transition-normal);
}

.neu-box-lg {
  background: var(--bg-card);
  border-radius: var(--radius-lg);
  box-shadow: var(--neu-flat-lg);
  border: 1px solid var(--border-subtle);
}

.neu-inset {
  background: var(--bg-input);
  box-shadow: var(--neu-pressed);
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-subtle);
}

.neu-btn {
  font-family: var(--font-thai);
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 20px;
  border-radius: var(--radius-md);
  border: none;
  cursor: pointer;
  background: var(--bg-card);
  color: var(--text-primary);
  box-shadow: var(--neu-flat-sm);
  transition: all var(--transition-fast);
  text-decoration: none;
  font-size: 1rem;
  user-select: none;
}

.neu-btn:hover {
  transform: translateY(-2px);
  box-shadow: var(--neu-flat);
  color: var(--color-primary);
}

.neu-btn:active, .neu-btn.active {
  transform: translateY(1px);
  box-shadow: var(--neu-pressed-sm);
}

.neu-btn-primary {
  background: linear-gradient(135deg, #2563eb, #1d4ed8);
  color: #ffffff !important;
  box-shadow: 4px 4px 12px rgba(37, 99, 235, 0.4), -3px -3px 8px var(--shadow-light);
}

.neu-btn-primary:hover {
  background: linear-gradient(135deg, #3b82f6, #1e40af);
  transform: translateY(-2px);
  box-shadow: 6px 6px 16px rgba(37, 99, 235, 0.5), -4px -4px 10px var(--shadow-light);
}

.neu-btn-primary:active {
  transform: translateY(1px);
  box-shadow: inset 2px 2px 6px rgba(0, 0, 0, 0.3);
}

.neu-btn-line {
  background: linear-gradient(135deg, #06c755, #05a847);
  color: #ffffff !important;
  box-shadow: 4px 4px 12px rgba(6, 199, 85, 0.4), -3px -3px 8px var(--shadow-light);
}

.neu-btn-line:hover {
  background: linear-gradient(135deg, #10d861, #048b3b);
  transform: translateY(-2px);
  box-shadow: 6px 6px 16px rgba(6, 199, 85, 0.5), -4px -4px 10px var(--shadow-light);
}

.neu-btn-warning {
  background: linear-gradient(135deg, #f59e0b, #d97706);
  color: #ffffff !important;
  box-shadow: 4px 4px 12px rgba(245, 158, 11, 0.4), -3px -3px 8px var(--shadow-light);
}

.neu-btn-danger {
  background: linear-gradient(135deg, #e11d48, #be123c);
  color: #ffffff !important;
  box-shadow: 4px 4px 12px rgba(225, 29, 72, 0.4), -3px -3px 8px var(--shadow-light);
}

.neu-input {
  font-family: var(--font-thai);
  width: 100%;
  padding: 12px 16px;
  border-radius: var(--radius-sm);
  background: var(--bg-input);
  box-shadow: var(--neu-pressed-sm);
  border: 1px solid var(--border-subtle);
  color: var(--text-primary);
  font-size: 1rem;
  outline: none;
  transition: all var(--transition-fast);
}

.neu-input:focus {
  border-color: var(--color-primary);
  box-shadow: var(--neu-pressed), 0 0 0 3px rgba(37, 99, 235, 0.2);
}

.neu-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 12px;
  border-radius: var(--radius-full);
  font-size: 0.85rem;
  font-weight: 600;
}

/* Badge Status Styles */
.badge-available {
  background-color: var(--status-available-bg);
  color: var(--status-available-text);
  border: 1px solid var(--status-available);
}

.badge-absent {
  background-color: var(--status-absent-bg);
  color: var(--status-absent-text);
  border: 1px solid var(--status-absent);
  animation: pulse-badge 2s infinite ease-in-out;
}

.badge-regular {
  background-color: var(--status-regular-bg);
  color: var(--status-regular-text);
  border: 1px solid var(--status-regular);
}

.badge-occupied {
  background-color: var(--status-occupied-bg);
  color: var(--status-occupied-text);
  border: 1px solid var(--status-occupied);
}

.badge-daily {
  background-color: var(--status-daily-bg);
  color: var(--status-daily-text);
  border: 1px solid var(--status-daily);
}

@keyframes pulse-badge {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.85; transform: scale(1.03); }
}