/* =====================================================
   HALO DAY HOSPITAL - MODERN PASTEL DESIGN SYSTEM
   Clean, Professional, Industry-Standard UI/UX
   NO GRADIENTS • NO OVERLAYS • FLAT DESIGN
   ===================================================== */

:root {
  /* === Modern Pastel Color Palette === */
  --pastel-mint: #1a9d8a;        /* Primary accent - soft mint */
  --pastel-mint-light: #4db8a8;  /* Lighter mint */
  --pastel-mint-dark: #15826f;   /* Darker mint */
  
  --pastel-lavender: #D4C5F9;    /* Secondary - soft lavender */
  --pastel-lavender-light: #E8E0FC;
  --pastel-lavender-dark: #BFB0E6;
  
  --pastel-peach: #FFD4B8;       /* Warm accent - soft peach */
  --pastel-peach-light: #FFE6D4;
  --pastel-peach-dark: #F5C4A8;
  
  --pastel-sky: #B8D4FF;         /* Info - soft sky blue */
  --pastel-sky-light: #D4E4FF;
  --pastel-sky-dark: #A8C4F0;
  
  --pastel-rose: #FFB8D4;        /* Alert - soft rose */
  --pastel-rose-light: #FFD4E8;
  --pastel-rose-dark: #F0A8C4;
  
  --pastel-cream: #FFF9F0;       /* Background - warm cream */
  --pastel-snow: #FFFFFF;        /* Pure white for cards */
  
  /* === Semantic Healthcare Colors (Pastel) === */
  --health-success: #1a9d8a;     /* Mint for success */
  --health-success-bg: #e6f7f4;
  --health-success-text: #ffffff;
  
  --health-info: #B8D4FF;        /* Sky for info */
  --health-info-bg: #F0F6FF;
  --health-info-text: #2D4A66;
  
  --health-warning: #FFD4B8;     /* Peach for warning */
  --health-warning-bg: #FFF8F0;
  --health-warning-text: #664A2D;
  
  --health-danger: #FFB8D4;      /* Rose for danger */
  --health-danger-bg: #FFF0F6;
  --health-danger-text: #662D4A;
  
  /* === Neutral Grays (Soft) === */
  --gray-50: #FAFAFA;
  --gray-100: #F5F5F5;
  --gray-200: #EEEEEE;
  --gray-300: #E0E0E0;
  --gray-400: #BDBDBD;
  --gray-500: #9E9E9E;
  --gray-600: #757575;
  --gray-700: #616161;
  --gray-800: #424242;
  --gray-900: #212121;
  
  /* === Typography === */
  --font-display: 'Inter', system-ui, -apple-system, sans-serif;
  --font-body: 'Inter', system-ui, -apple-system, sans-serif;
  --font-mono: 'SF Mono', 'Monaco', 'Courier New', monospace;
  
  /* === Spacing System === */
  --space-xs: 0.25rem;
  --space-sm: 0.5rem;
  --space-md: 1rem;
  --space-lg: 1.5rem;
  --space-xl: 2rem;
  --space-2xl: 3rem;
  --space-3xl: 4rem;
  
  /* === Border Radius === */
  --radius-sm: 0.375rem;
  --radius-md: 0.5rem;
  --radius-lg: 0.75rem;
  --radius-xl: 1rem;
  --radius-2xl: 1.5rem;
  --radius-full: 9999px;
  
  /* === Shadows (Subtle) === */
  --shadow-xs: 0 1px 2px rgba(0,0,0,0.03);
  --shadow-sm: 0 1px 3px rgba(0,0,0,0.05), 0 1px 2px rgba(0,0,0,0.03);
  --shadow-md: 0 4px 6px rgba(0,0,0,0.05), 0 2px 4px rgba(0,0,0,0.03);
  --shadow-lg: 0 10px 15px rgba(0,0,0,0.05), 0 4px 6px rgba(0,0,0,0.03);
  --shadow-xl: 0 20px 25px rgba(0,0,0,0.05), 0 8px 10px rgba(0,0,0,0.04);
  
  /* === Border Colors === */
  --border-light: var(--gray-200);
  --border-base: var(--gray-300);
  --border-focus: var(--pastel-mint);
  
  /* === Transitions === */
  --transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-base: 200ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-slow: 300ms cubic-bezier(0.4, 0, 0.2, 1);
}

/* =====================================================
   BASE STYLES
   ===================================================== */
body {
  font-family: var(--font-body);
  background: var(--pastel-cream);
  color: var(--gray-900);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* =====================================================
   BUTTONS - Modern Flat Design
   ===================================================== */
.btn-pastel-primary {
  background: var(--pastel-mint);
  color: var(--health-success-text);
  border: 2px solid var(--pastel-mint-dark);
  padding: 0.625rem 1.25rem;
  border-radius: var(--radius-lg);
  font-weight: 600;
  font-size: 0.875rem;
  transition: all var(--transition-base);
  box-shadow: var(--shadow-sm);
}

.btn-pastel-primary:hover {
  background: var(--pastel-mint-dark);
  border-color: var(--pastel-mint-dark);
  transform: translateY(-1px);
  box-shadow: var(--shadow-md);
}

.btn-pastel-secondary {
  background: var(--pastel-lavender);
  color: #5A4A7A;
  border: 2px solid var(--pastel-lavender-dark);
  padding: 0.625rem 1.25rem;
  border-radius: var(--radius-lg);
  font-weight: 600;
  font-size: 0.875rem;
  transition: all var(--transition-base);
  box-shadow: var(--shadow-sm);
}

.btn-pastel-secondary:hover {
  background: var(--pastel-lavender-dark);
  transform: translateY(-1px);
  box-shadow: var(--shadow-md);
}

.btn-pastel-danger {
  background: var(--pastel-rose);
  color: var(--health-danger-text);
  border: 2px solid var(--pastel-rose-dark);
  padding: 0.625rem 1.25rem;
  border-radius: var(--radius-lg);
  font-weight: 600;
  font-size: 0.875rem;
  transition: all var(--transition-base);
  box-shadow: var(--shadow-sm);
}

.btn-pastel-outline {
  background: transparent;
  color: var(--pastel-mint);
  border: 2px solid var(--pastel-mint);
  padding: 0.625rem 1.25rem;
  border-radius: var(--radius-lg);
  font-weight: 600;
  font-size: 0.875rem;
  transition: all var(--transition-base);
}

.btn-pastel-outline:hover {
  background: var(--pastel-mint);
  color: #ffffff;
}

/* =====================================================
   CARDS - Clean & Minimal
   ===================================================== */
.card-pastel {
  background: var(--pastel-snow);
  border: 2px solid var(--border-light);
  border-radius: var(--radius-xl);
  padding: var(--space-xl);
  box-shadow: var(--shadow-sm);
  transition: all var(--transition-base);
}

.card-pastel:hover {
  border-color: var(--pastel-mint-light);
  box-shadow: var(--shadow-md);
}

.card-pastel-header {
  padding: var(--space-lg) var(--space-xl);
  border-bottom: 2px solid var(--border-light);
  background: var(--gray-50);
  border-radius: var(--radius-xl) var(--radius-xl) 0 0;
}

.card-pastel-header h3 {
  margin: 0;
  font-size: 1.125rem;
  font-weight: 700;
  color: var(--gray-900);
  letter-spacing: -0.02em;
}

.card-pastel-body {
  padding: var(--space-xl);
}

/* =====================================================
   PAGE HEADER - Modern Flat
   ===================================================== */
.page-header-pastel {
  background: var(--pastel-snow);
  border: 2px solid var(--border-light);
  border-radius: var(--radius-2xl);
  padding: var(--space-xl) var(--space-2xl);
  margin-bottom: var(--space-xl);
  box-shadow: var(--shadow-sm);
}

.page-header-pastel h1 {
  font-size: 2rem;
  font-weight: 800;
  color: var(--gray-900);
  margin: 0;
  letter-spacing: -0.03em;
}

.page-header-pastel p {
  color: var(--gray-600);
  font-size: 1rem;
  margin: var(--space-sm) 0 0 0;
}

/* =====================================================
   FORM INPUTS - Pastel Focus States
   ===================================================== */
.input-pastel {
  background: var(--pastel-snow);
  border: 2px solid var(--border-base);
  border-radius: var(--radius-md);
  padding: 0.75rem 1rem;
  font-size: 0.9375rem;
  color: var(--gray-900);
  transition: all var(--transition-base);
  width: 100%;
}

.input-pastel:focus {
  outline: none;
  border-color: var(--pastel-mint);
  box-shadow: 0 0 0 3px rgba(184, 230, 213, 0.3);
}

.input-pastel::placeholder {
  color: var(--gray-400);
}

/* =====================================================
   BADGES - Flat Pastel
   ===================================================== */
.badge-pastel {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.375rem 0.875rem;
  border-radius: var(--radius-full);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.badge-pastel-success {
  background: var(--health-success-bg);
  color: var(--health-success-text);
  border: 1px solid var(--pastel-mint-light);
}

.badge-pastel-info {
  background: var(--health-info-bg);
  color: var(--health-info-text);
  border: 1px solid var(--pastel-sky-light);
}

.badge-pastel-warning {
  background: var(--health-warning-bg);
  color: var(--health-warning-text);
  border: 1px solid var(--pastel-peach-light);
}

.badge-pastel-danger {
  background: var(--health-danger-bg);
  color: var(--health-danger-text);
  border: 1px solid var(--pastel-rose-light);
}

/* =====================================================
   ALERTS - Clean Notifications
   ===================================================== */
.alert-pastel {
  background: var(--pastel-snow);
  border: 2px solid var(--border-light);
  border-left: 4px solid var(--pastel-mint);
  border-radius: var(--radius-lg);
  padding: var(--space-lg);
  margin-bottom: var(--space-lg);
  box-shadow: var(--shadow-xs);
}

.alert-pastel-info {
  border-left-color: var(--pastel-sky);
  background: var(--health-info-bg);
}

.alert-pastel-warning {
  border-left-color: var(--pastel-peach);
  background: var(--health-warning-bg);
}

.alert-pastel-danger {
  border-left-color: var(--pastel-rose);
  background: var(--health-danger-bg);
}

/* =====================================================
   NAVIGATION - Modern Clean
   ===================================================== */
.nav-pastel {
  background: var(--pastel-snow);
  border-bottom: 2px solid var(--border-light);
  box-shadow: var(--shadow-sm);
}

.nav-pastel-link {
  color: var(--gray-700);
  padding: 0.75rem 1rem;
  border-radius: var(--radius-md);
  font-weight: 500;
  transition: all var(--transition-fast);
}

.nav-pastel-link:hover {
  background: var(--pastel-mint-light);
  color: var(--health-success-text);
}

.nav-pastel-link.active {
  background: var(--pastel-mint);
  color: var(--health-success-text);
  font-weight: 600;
}

/* =====================================================
   SIDEBAR - Soft Pastel
   ===================================================== */
.sidebar-pastel {
  background: var(--pastel-snow);
  border-right: 2px solid var(--border-light);
  box-shadow: var(--shadow-sm);
}

.sidebar-pastel-link {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.875rem 1.25rem;
  color: var(--gray-700);
  border-radius: var(--radius-md);
  transition: all var(--transition-fast);
  margin-bottom: 0.375rem;
}

.sidebar-pastel-link:hover {
  background: var(--pastel-mint-light);
  color: var(--health-success-text);
}

.sidebar-pastel-link.active {
  background: var(--pastel-mint);
  color: var(--health-success-text);
  font-weight: 600;
  box-shadow: var(--shadow-xs);
}

/* =====================================================
   TABLES - Clean Design
   ===================================================== */
.table-pastel {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  background: var(--pastel-snow);
  border: 2px solid var(--border-light);
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.table-pastel thead {
  background: var(--gray-50);
}

.table-pastel th {
  padding: 1rem 1.25rem;
  text-align: left;
  font-weight: 700;
  font-size: 0.75rem;
  color: var(--gray-700);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  border-bottom: 2px solid var(--border-light);
}

.table-pastel td {
  padding: 1rem 1.25rem;
  border-bottom: 1px solid var(--border-light);
  color: var(--gray-800);
  font-size: 0.9375rem;
}

.table-pastel tbody tr:hover {
  background: var(--pastel-mint-light);
}

.table-pastel tbody tr:last-child td {
  border-bottom: none;
}

/* =====================================================
   STAT CARDS - Dashboard KPIs
   ===================================================== */
.stat-card-pastel {
  background: var(--pastel-snow);
  border: 2px solid var(--border-light);
  border-radius: var(--radius-xl);
  padding: var(--space-xl);
  box-shadow: var(--shadow-sm);
  transition: all var(--transition-base);
}

.stat-card-pastel:hover {
  border-color: var(--pastel-mint);
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

.stat-card-pastel-value {
  font-size: 2.5rem;
  font-weight: 800;
  color: var(--gray-900);
  letter-spacing: -0.04em;
  margin: 0;
}

.stat-card-pastel-label {
  font-size: 0.875rem;
  color: var(--gray-600);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-top: var(--space-sm);
}

.stat-card-pastel-icon {
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--pastel-mint-light);
  border: 2px solid var(--pastel-mint);
  border-radius: var(--radius-lg);
  color: var(--health-success-text);
  font-size: 1.25rem;
}

/* Icon color variations */
.stat-card-pastel-icon.success { background: var(--health-success-bg); border-color: var(--pastel-mint); color: var(--health-success-text); }
.stat-card-pastel-icon.info { background: var(--health-info-bg); border-color: var(--pastel-sky); color: var(--health-info-text); }
.stat-card-pastel-icon.warning { background: var(--health-warning-bg); border-color: var(--pastel-peach); color: var(--health-warning-text); }
.stat-card-pastel-icon.danger { background: var(--health-danger-bg); border-color: var(--pastel-rose); color: var(--health-danger-text); }

/* =====================================================
   UTILITY CLASSES
   ===================================================== */
.text-pastel-primary { color: var(--health-success-text); }
.text-pastel-secondary { color: #5A4A7A; }
.text-pastel-muted { color: var(--gray-600); }

.bg-pastel-primary { background: var(--pastel-mint); }
.bg-pastel-secondary { background: var(--pastel-lavender); }
.bg-pastel-light { background: var(--pastel-cream); }
.bg-pastel-white { background: var(--pastel-snow); }

.border-pastel { border-color: var(--border-light); }
.border-pastel-focus { border-color: var(--pastel-mint); }

/* Spacing utilities */
.p-pastel-sm { padding: var(--space-sm); }
.p-pastel-md { padding: var(--space-md); }
.p-pastel-lg { padding: var(--space-lg); }
.p-pastel-xl { padding: var(--space-xl); }

.m-pastel-sm { margin: var(--space-sm); }
.m-pastel-md { margin: var(--space-md); }
.m-pastel-lg { margin: var(--space-lg); }
.m-pastel-xl { margin: var(--space-xl); }