/* ============================================
   MODERN MEDICAL THEME - Clean Blue Professional
   ============================================

   Professional medical calculator design
   - Clean light gradient background
   - Professional blue color system
   - Mobile-optimized and accessible
   ============================================ */

/* COLOR VARIABLES */
:root {
  /* Primary Colors - Based on discharge theme */
  --primary-blue: #0066CC;
  --primary-dark: #004C99;
  --secondary-blue: #E6F2FF;
  --accent-green: #00A651;
  --accent-red: #E31E24;

  /* Neutral Colors */
  --neutral-100: #FFFFFF;
  --neutral-200: #F5F7FA;
  --neutral-300: #E4E7EB;
  --neutral-400: #CBD2D9;
  --neutral-600: #616E7C;
  --neutral-700: #52606D;
  --neutral-800: #2E3D4C;
  --neutral-900: #1F2933;

  /* Shadows */
  --shadow-sm: 0 1px 3px 0 rgba(0, 0, 0, 0.1);
  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
  --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1);

  /* Legacy variable mappings for compatibility */
  --card: var(--neutral-100);
  --card-hover: var(--neutral-100);
  --panel: var(--neutral-100);
  --text: var(--neutral-800);
  --muted: var(--neutral-600);
  --border: var(--neutral-300);
  --shadow: var(--shadow-lg);

  /* COLOR-CODED URGENCY SYSTEM */

  /* Critical/Urgent - Red tones */
  --urgent: #dc2626;
  --urgent-bg: #fef2f2;
  --urgent-border: #fca5a5;
  --urgent-glow: rgba(220, 38, 38, 0.3);

  /* High Priority - Orange tones */
  --high: #ea580c;
  --high-bg: #fff7ed;
  --high-border: #fdba74;

  /* Moderate/Warning - Amber tones */
  --warn: #f59e0b;
  --warn-bg: #fffbeb;
  --warn-border: #fcd34d;

  /* Normal/OK - Green tones */
  --ok: #16a34a;
  --ok-bg: #f0fdf4;
  --ok-border: #86efac;

  /* Low Priority - Blue tones */
  --low: #0284c7;
  --low-bg: #f0f9ff;
  --low-border: #7dd3fc;

  /* Severity levels */
  --mild: #16a34a;
  --moderate: #ea580c;
  --severe: #dc2626;

  /* Status colors */
  --danger: #dc2626;
  --bad: #dc2626;

  /* Border radius */
  --radius: 16px;
  --radius-sm: 8px;
  --radius-lg: 20px;
}

/* BODY BACKGROUND - Clean Gradient */
body {
  background: linear-gradient(135deg, var(--secondary-blue) 0%, #f0f9ff 100%);
  background-attachment: fixed;
  min-height: 100vh;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;
}

/* Ensure content is properly positioned */
.container {
  position: relative;
  z-index: 1;
}

/* BUTTON STYLES */
.btn {
  background: linear-gradient(135deg, var(--primary-blue), var(--primary-dark));
  color: #ffffff;
  border: none;
  box-shadow: var(--shadow-sm);
  transition: all 0.3s ease;
  font-weight: 600;
}

.btn:hover,
.btn:focus {
  background: var(--primary-dark);
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}

/* CALCULATE BUTTON */
.btn-calc {
  background: linear-gradient(135deg, var(--primary-blue), var(--primary-dark));
  color: #fff;
  box-shadow: var(--shadow-md);
}

.btn-calc:hover {
  background: var(--primary-dark);
  box-shadow: var(--shadow-lg);
  transform: translateY(-2px);
}

/* RESET BUTTON */
.btn-reset {
  background: var(--neutral-200);
  color: var(--neutral-800);
  border: 1px solid var(--neutral-300);
}

.btn-reset:hover {
  background: var(--neutral-300);
  border-color: var(--neutral-400);
}

/* BACK BUTTON */
.btn-back {
  background: var(--neutral-100);
  color: var(--neutral-800);
  box-shadow: var(--shadow-sm);
  transition: all 0.3s ease;
  border: 1px solid var(--neutral-300);
}

.btn-back:hover {
  background: var(--neutral-100);
  box-shadow: var(--shadow-md);
  border-color: var(--primary-blue);
  transform: translateY(-2px);
}

/* PRIMARY BUTTON */
.primary {
  background: linear-gradient(135deg, var(--primary-blue), var(--primary-dark));
  color: #fff;
  box-shadow: var(--shadow-md);
}

.primary:hover {
  background: var(--primary-dark);
  box-shadow: var(--shadow-lg);
  transform: translateY(-2px);
}

/* GHOST BUTTON */
.ghost {
  background: var(--neutral-100);
  color: var(--neutral-800);
  border: 1px solid var(--neutral-300);
}

.ghost:hover {
  background: var(--neutral-200);
  border-color: var(--neutral-400);
}

/* PRINT BUTTON */
.print-btn {
  background: linear-gradient(135deg, var(--primary-blue), var(--primary-dark));
  color: white;
  box-shadow: var(--shadow-md);
}

.print-btn:hover {
  background: var(--primary-dark);
  box-shadow: var(--shadow-lg);
  transform: translateY(-2px);
}

/* ABOUT SECTION */
.about-section {
  background: var(--neutral-100);
  box-shadow: var(--shadow-md);
}

/* CARD BACKGROUNDS */
.card,
.panel,
.header,
.search-panel {
  background: var(--neutral-100);
  box-shadow: var(--shadow-lg);
  border: 1px solid var(--neutral-300);
  transition: all 0.3s ease;
}

.card:hover {
  box-shadow: var(--shadow-xl);
  transform: translateY(-2px);
  border-color: var(--primary-blue);
}

/* COLOR-CODED URGENCY INDICATORS */

/* Urgent/Critical items */
.urgent-indicator,
.critical {
  background: var(--urgent-bg);
  border: 2px solid var(--urgent-border);
  color: var(--urgent);
  box-shadow: 0 0 15px var(--urgent-glow);
}

/* High priority items */
.high-priority {
  background: var(--high-bg);
  border: 2px solid var(--high-border);
  color: var(--high);
}

/* Warning/Moderate items */
.warning-indicator,
.moderate {
  background: var(--warn-bg);
  border: 2px solid var(--warn-border);
  color: var(--warn);
}

/* Normal/OK items */
.ok-indicator,
.normal {
  background: var(--ok-bg);
  border: 2px solid var(--ok-border);
  color: var(--ok);
}

/* Low priority items */
.low-priority {
  background: var(--low-bg);
  border: 2px solid var(--low-border);
  color: var(--low);
}

/* Dose range color coding */
.dose-low-label,
.dose-low-value,
.pill-low {
  color: var(--ok) !important;
  font-weight: 800;
}

.dose-high-label,
.dose-high-value,
.pill-high {
  color: var(--high) !important;
  font-weight: 800;
}

/* Severity tags for fluid calculator */
.tag.mild {
  background: var(--ok-bg);
  color: var(--mild);
  border: 2px solid var(--ok-border);
}

.tag.moderate {
  background: var(--warn-bg);
  color: var(--moderate);
  border: 2px solid var(--warn-border);
}

.tag.severe {
  background: var(--urgent-bg);
  color: var(--severe);
  border: 2px solid var(--urgent-border);
  box-shadow: 0 0 15px var(--urgent-glow);
}

/* Drug section color coding */
.drug-section.red {
  background: linear-gradient(135deg, rgba(254, 242, 242, 0.95) 0%, rgba(254, 226, 226, 0.95) 100%);
  border-color: var(--urgent-border);
  box-shadow: 0 10px 30px rgba(220, 38, 38, 0.2);
}

.drug-section.blue {
  background: linear-gradient(135deg, rgba(239, 246, 255, 0.95) 0%, rgba(219, 234, 254, 0.95) 100%);
  border-color: var(--low-border);
}

.drug-section.purple {
  background: linear-gradient(135deg, rgba(250, 245, 255, 0.95) 0%, rgba(243, 232, 255, 0.95) 100%);
  border-color: #d8b4fe;
}

.drug-section.green {
  background: linear-gradient(135deg, rgba(240, 253, 244, 0.95) 0%, rgba(220, 252, 231, 0.95) 100%);
  border-color: var(--ok-border);
}

.drug-section.teal {
  background: linear-gradient(135deg, rgba(240, 253, 250, 0.95) 0%, rgba(204, 251, 241, 0.95) 100%);
  border-color: #99f6e4;
}

.drug-section.pink {
  background: linear-gradient(135deg, rgba(253, 242, 248, 0.95) 0%, rgba(252, 231, 243, 0.95) 100%);
  border-color: #fbcfe8;
}

.drug-section.dark-blue {
  background: linear-gradient(135deg, rgba(224, 242, 254, 0.95) 0%, rgba(186, 230, 253, 0.95) 100%);
  border-color: var(--low-border);
}

/* Alert boxes with urgency */
.alert-box {
  background: var(--urgent-bg);
  color: var(--urgent);
  border: 2px solid var(--urgent-border);
  box-shadow: 0 0 20px var(--urgent-glow);
}

/* Mobile responsiveness enhancements */
@media (max-width: 768px) {
  :root {
    --radius: 12px;
    --radius-lg: 16px;
  }

  .card {
    padding: 16px;
  }

  .btn {
    padding: 12px 18px;
    font-size: 16px;
  }
}

/* Print styles */
@media print {
  body {
    background: white !important;
    background-image: none !important;
  }

  .card,
  .panel,
  .header {
    box-shadow: none !important;
    border: 1px solid #ccc !important;
    background: white !important;
  }
}

/* ============================================
   ACCESSIBILITY ENHANCEMENTS
   ============================================ */

/* Focus states for keyboard navigation */
button:focus,
input:focus,
select:focus,
a:focus {
  outline: 3px solid rgba(0, 102, 204, 0.5);
  outline-offset: 2px;
}

/* High contrast mode support */
@media (prefers-contrast: high) {
  .card,
  .panel,
  .header {
    border: 2px solid var(--neutral-400);
  }
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}