/* ==========================================================================
   ธีมและสไตล์เฉพาะสำหรับ Web App ประเมินความดันโลหิตเบื้องต้น
   คลินิกหมอวิชญะ หาดใหญ่ (Vichaya Clinic Hatyai)
   ========================================================================== */

:root {
  --primary-color: #1b6b50;
  --primary-hover: #14533e;
  --primary-light: #e8f5ed;
  --primary-soft: #f0f9f4;
  --accent-mint: #3ebd8a;
  --bg-cream: #faf9f5;
  --bg-card: #ffffff;
  --text-dark: #1e293b;
  --text-muted: #64748b;
  --border-light: #e2e8f0;
  
  /* Status Colors */
  --status-normal: #10b981;
  --status-normal-bg: #ecfdf5;
  --status-normal-border: #a7f3d0;
  
  --status-risk: #eab308;
  --status-risk-bg: #fefce8;
  --status-risk-border: #fde047;
  
  --status-stage1: #f97316;
  --status-stage1-bg: #fff7ed;
  --status-stage1-border: #fdba74;
  
  --status-stage2: #ef4444;
  --status-stage2-bg: #fef2f2;
  --status-stage2-border: #fca5a5;
}

body {
  font-family: 'Sarabun', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  background-color: var(--bg-cream);
  color: var(--text-dark);
  min-height: 100vh;
}

h1, h2, h3, h4, h5, h6, .font-prompt {
  font-family: 'Prompt', 'Sarabun', sans-serif;
}

/* Background subtle medical wave pattern */
.bg-medical-pattern {
  background-color: #f7faf7;
  background-image: radial-gradient(#d1e7dd 0.85px, transparent 0.85px), radial-gradient(#d1e7dd 0.85px, #f7faf7 0.85px);
  background-size: 34px 34px;
  background-position: 0 0, 17px 17px;
}

/* ==========================================================================
   Digital Blood Pressure Monitor Mockup UI
   ========================================================================== */
.bp-device {
  background: linear-gradient(145deg, #ffffff, #edf2ef);
  border: 2px solid #d7e4dc;
  box-shadow: 0 12px 30px -8px rgba(27, 107, 80, 0.12), 0 4px 12px rgba(0, 0, 0, 0.04);
  border-radius: 28px;
  position: relative;
}

.bp-lcd-screen {
  background: linear-gradient(180deg, #1b2621 0%, #111815 100%);
  border-radius: 18px;
  box-shadow: inset 0 2px 8px rgba(0, 0, 0, 0.8), 0 1px 0 rgba(255, 255, 255, 0.4);
  position: relative;
  overflow: hidden;
}

.bp-lcd-screen::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 40%;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.08) 0%, rgba(255, 255, 255, 0) 100%);
  pointer-events: none;
}

/* Digital Font & Glow */
.digital-number {
  font-family: 'Courier New', 'Roboto Mono', monospace;
  font-weight: 800;
  letter-spacing: -1px;
}

.digital-glow-sys {
  color: #5eead4;
  text-shadow: 0 0 12px rgba(94, 234, 212, 0.6);
}

.digital-glow-dia {
  color: #38bdf8;
  text-shadow: 0 0 12px rgba(56, 189, 248, 0.6);
}

.digital-glow-pul {
  color: #fb7185;
  text-shadow: 0 0 10px rgba(251, 113, 133, 0.5);
}

/* Glowing Guide Indicators */
.pulse-indicator {
  animation: pulse-ring 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

@keyframes pulse-ring {
  0%, 100% {
    transform: scale(1);
    opacity: 0.9;
  }
  50% {
    transform: scale(1.06);
    opacity: 0.6;
  }
}

/* Heartbeat Animation for Pulse icon */
.heartbeat {
  animation: beat 1.2s infinite ease-in-out;
}

@keyframes beat {
  0%, 100% { transform: scale(1); }
  14% { transform: scale(1.2); }
  28% { transform: scale(1); }
  42% { transform: scale(1.2); }
  70% { transform: scale(1); }
}

/* ==========================================================================
   Custom Inputs and Focus States
   ========================================================================== */
.input-clinic {
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

.input-clinic:focus {
  border-color: #1b6b50;
  box-shadow: 0 0 0 4px rgba(27, 107, 80, 0.15);
  outline: none;
}

/* Quick Preset Chips */
.preset-chip {
  transition: all 0.2s ease;
}

.preset-chip:hover {
  transform: translateY(-1px);
}

/* Result Card Styles */
.result-card {
  transition: all 0.35s ease;
}

.result-card.show {
  animation: slideUpFade 0.4s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

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

/* Smooth Toast Notification */
.toast-notice {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%) translateY(100px);
  opacity: 0;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  z-index: 9999;
}

.toast-notice.show {
  transform: translateX(-50%) translateY(0);
  opacity: 1;
}

/* Print Friendly Styles */
@media print {
  body {
    background: #ffffff !important;
  }
  .no-print {
    display: none !important;
  }
  .print-only {
    display: block !important;
  }
  .shadow-xl, .shadow-lg, .shadow-md, .shadow-sm {
    box-shadow: none !important;
  }
}