/* ========================================================
   ICU Neuro Census & Admit App - Soft Mint Theme & Animations
   Designed for Eye-Comfort, Clinical Efficiency & Modern Aesthetics
   ======================================================== */

@import url('https://fonts.googleapis.com/css2?family=Sarabun:ital,wght@0,300;0,400;0,500;0,600;0,700;1,400&family=Prompt:wght@400;500;600;700;800&display=swap');

:root {
  --font-body: 'Sarabun', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-heading: 'Prompt', -apple-system, BlinkMacSystemFont, sans-serif;
  
  /* Mint Green Palette (Soft, Soothing, Non-glare) */
  --mint-50: #f2fbf7;
  --mint-100: #e3f7ed;
  --mint-200: #c7eedb;
  --mint-300: #9de0c1;
  --mint-400: #6dcca1;
  --mint-500: #42b382;
  --mint-600: #2f9469;
  --mint-700: #277655;
  --mint-800: #235e46;
  --mint-900: #1e4d3b;
  --mint-950: #0f2c21;
}

body {
  font-family: var(--font-body);
  background-color: var(--mint-50);
  background-image: 
    radial-gradient(at 0% 0%, rgba(157, 224, 193, 0.18) 0px, transparent 50%),
    radial-gradient(at 100% 100%, rgba(109, 204, 161, 0.12) 0px, transparent 50%);
  background-attachment: fixed;
  color: #1e293b;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6, .font-heading {
  font-family: var(--font-heading);
}

/* Glassmorphism Classes */
.glass-header {
  background: rgba(255, 255, 255, 0.88);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(199, 238, 219, 0.6);
}

.glass-card {
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(199, 238, 219, 0.7);
  box-shadow: 0 4px 20px -2px rgba(39, 118, 85, 0.05), 0 2px 6px -1px rgba(0, 0, 0, 0.02);
}

/* Custom Scrollbar in Mint */
::-webkit-scrollbar {
  width: 7px;
  height: 7px;
}
::-webkit-scrollbar-track {
  background: var(--mint-50);
}
::-webkit-scrollbar-thumb {
  background: var(--mint-300);
  border-radius: 9999px;
}
::-webkit-scrollbar-thumb:hover {
  background: var(--mint-500);
}

/* Bed Card Hover & Micro-interactions */
.patient-card {
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  border: 1px solid #dcf2e7;
}
.patient-card:hover {
  transform: translateY(-3px) scale(1.005);
  box-shadow: 0 16px 30px -6px rgba(39, 118, 85, 0.12), 0 6px 12px -4px rgba(39, 118, 85, 0.06);
  border-color: var(--mint-400);
}

/* Bed Map Slot Hover */
.bed-slot {
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}
.bed-slot:hover {
  transform: scale(1.02);
}

/* Pulse animation for high priority / ETT cases */
@keyframes softPulse {
  0%, 100% {
    box-shadow: 0 0 0 0 rgba(244, 63, 94, 0.4);
  }
  50% {
    box-shadow: 0 0 0 6px rgba(244, 63, 94, 0);
  }
}

.pulse-ett {
  animation: softPulse 2.5s infinite;
}

/* Respiratory Status Badges */
.badge-ett {
  background-color: #fff1f2;
  color: #e11d48;
  border: 1px solid #fecdd3;
}
.badge-hfnc {
  background-color: #f5f3ff;
  color: #7c3aed;
  border: 1px solid #ddd6fe;
}
.badge-mask {
  background-color: #f0f9ff;
  color: #0284c7;
  border: 1px solid #bae6fd;
}
.badge-canula {
  background-color: #e6fcf5;
  color: #0ca678;
  border: 1px solid #c3fae8;
}
.badge-roomair {
  background-color: #ebfbee;
  color: #2b8a3e;
  border: 1px solid #d3f9d8;
}
.badge-other {
  background-color: #f8fafc;
  color: #475569;
  border: 1px solid #e2e8f0;
}

/* Modal Animations */
.modal-overlay {
  animation: fadeIn 0.18s ease-out forwards;
}
.modal-content {
  animation: modalPop 0.25s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

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

/* Active tab pill slider */
.tab-btn.active {
  background: var(--mint-600);
  color: #ffffff;
  box-shadow: 0 2px 8px rgba(47, 148, 105, 0.3);
}

/* Print Stylesheet */
@media print {
  body {
    background: #ffffff !important;
    color: #000000 !important;
  }
  .no-print,
  #headerNav,
  #topKpis,
  #controlBar,
  #viewTabsNav,
  .bed-map-section,
  .action-buttons,
  #patientModal,
  #detailModal,
  #handoverModal,
  #backupModal,
  #toastContainer,
  footer {
    display: none !important;
  }
  .print-only {
    display: block !important;
  }
  #patientTableContainer {
    display: block !important;
    box-shadow: none !important;
    border: 1px solid #000 !important;
  }
  table {
    width: 100% !important;
    border-collapse: collapse !important;
  }
  th, td {
    border: 1px solid #cbd5e1 !important;
    padding: 6px 8px !important;
    font-size: 10pt !important;
  }
}