/* ==========================================================================
   InSmile Dental Boutique & Front Desk Command Center — Custom Design System
   Palette:
     Warm Alabaster:  #F9F6F0 / #F2ECE1 / #EAE2D3
     Deep Charcoal:   #141413 / #1E1D1B / #2A2926
     Champagne Gold:  #C5A059 / #D4AF6A / #9E7B36
     Triage Urgent:   #DC2626 (Crimson)
     Triage HighVal:  #C5A059 (Champagne Gold)
     Triage Control:  #15803D (Emerald Sage)
   Typography:
     Editorial Serif: 'Playfair Display', Georgia, serif
     UI & Clinical:   'Plus Jakarta Sans', -apple-system, sans-serif
   ========================================================================== */

:root {
  --alabaster: #F9F6F0;
  --alabaster-warm: #F2ECE1;
  --alabaster-border: #E5DEC9;
  --charcoal: #141413;
  --charcoal-soft: #1E1D1B;
  --charcoal-muted: #57534E;
  --gold: #C5A059;
  --gold-light: #DFC286;
  --gold-dark: #9B7832;
}

html {
  scroll-behavior: smooth;
  font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, sans-serif;
  background-color: var(--alabaster);
  color: var(--charcoal);
  -webkit-font-smoothing: antialiased;
}

.font-serif-editorial {
  font-family: 'Playfair Display', Georgia, serif;
}

.tabular-nums {
  font-variant-numeric: tabular-nums;
}

/* Subtle luxury grain & ambient radial lighting */
.bg-boutique-mesh {
  background-color: #F9F6F0;
  background-image:
    radial-gradient(at 12% 15%, rgba(197, 160, 89, 0.14) 0px, transparent 50%),
    radial-gradient(at 88% 10%, rgba(20, 20, 19, 0.05) 0px, transparent 45%),
    radial-gradient(at 50% 85%, rgba(197, 160, 89, 0.10) 0px, transparent 55%);
}

.bg-charcoal-mesh {
  background-color: #141413;
  background-image:
    radial-gradient(at 18% 20%, rgba(197, 160, 89, 0.16) 0px, transparent 50%),
    radial-gradient(at 85% 80%, rgba(197, 160, 89, 0.09) 0px, transparent 50%);
}

/* Glass cards */
.glass-pill {
  background: rgba(249, 246, 240, 0.84);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(197, 160, 89, 0.25);
}

.glass-dark {
  background: rgba(28, 27, 25, 0.82);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  border: 1px solid rgba(197, 160, 89, 0.22);
}

/* Bento Card Hover Dynamics */
.bento-card {
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1),
              box-shadow 0.35s cubic-bezier(0.16, 1, 0.3, 1),
              border-color 0.35s ease;
}

.bento-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 24px 48px -16px rgba(20, 20, 19, 0.10),
              0 0 0 1px rgba(197, 160, 89, 0.45);
}

/* Custom Range Input for VAS Pain Detector (0 - 10) */
input[type="range"].pain-slider {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 10px;
  border-radius: 999px;
  background: linear-gradient(90deg, #16A34A 0%, #EAB308 50%, #DC2626 100%);
  outline: none;
}

input[type="range"].pain-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: #141413;
  border: 3px solid #F9F6F0;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
  cursor: pointer;
  transition: transform 0.15s ease;
}

input[type="range"].pain-slider::-webkit-slider-thumb:hover {
  transform: scale(1.12);
}

/* Interactive Before / After Comparison Slider */
.ba-container {
  position: relative;
  overflow: hidden;
  user-select: none;
  -webkit-user-select: none;
  touch-action: pan-y;
}

.ba-before-layer {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  clip-path: inset(0 50% 0 0);
}

.ba-divider {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 2px;
  background: #C5A059;
  transform: translateX(-50%);
  pointer-events: none;
  box-shadow: 0 0 16px rgba(0, 0, 0, 0.45);
}

.ba-handle {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 48px;
  height: 48px;
  border-radius: 9999px;
  background: #141413;
  border: 2px solid #C5A059;
  color: #F9F6F0;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.35);
  pointer-events: none;
  transition: transform 0.2s ease, background-color 0.2s ease;
}

.ba-container:hover .ba-handle {
  transform: translate(-50%, -50%) scale(1.08);
  background: #C5A059;
  color: #141413;
}

/* Clinical Boarding Pass Perforation */
.boarding-pass {
  position: relative;
  background: linear-gradient(145deg, #181816 0%, #111110 100%);
  border: 1px solid rgba(197, 160, 89, 0.35);
}

.boarding-divider {
  position: relative;
  border-top: 1px dashed rgba(197, 160, 89, 0.35);
}

/* Highlight animation for newly arrived triage row */
@keyframes pulseGoldHighlight {
  0%   { background-color: rgba(197, 160, 89, 0.28); }
  50%  { background-color: rgba(197, 160, 89, 0.08); }
  100% { background-color: transparent; }
}

.row-new-flash {
  animation: pulseGoldHighlight 2.8s ease-out 2;
}

/* Custom scrollbar */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}
::-webkit-scrollbar-track {
  background: #F2ECE1;
}
::-webkit-scrollbar-thumb {
  background: #C5A059;
  border-radius: 999px;
}