/* Modern Hospital Management Stylesheet - Glassmorphic Theme */

@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700;800&family=Plus+Jakarta+Sans:wght@300;400;500;600;700&display=swap');

:root {
  /* Font Families */
  --font-display: 'Outfit', sans-serif;
  --font-body: 'Plus Jakarta Sans', sans-serif;

  /* Theme: Dark Mode (Default) — Light Gray "Dim" Palette */
  --bg-primary: #d5d8de;
  --bg-secondary: #e0e4ea;
  --bg-sidebar: rgba(200, 204, 214, 0.92);
  --card-bg: rgba(255, 255, 255, 0.5);
  --card-hover: rgba(255, 255, 255, 0.7);
  --border-color: rgba(0, 0, 0, 0.1);
  --border-focus: rgba(99, 102, 241, 0.4);
  
  --text-main: #1e2030;
  --text-muted: #5c6478;
  --text-inverse: #f0f2f5;

  /* Credits variables for default theme */
  --credits-bg-ok: rgba(99, 102, 241, 0.15);
  --credits-text-ok: #4f46e5;
  --credits-bg-zero: rgba(239, 68, 68, 0.15);
  --credits-text-zero: #ef4444;

  --input-bg: rgba(0, 0, 0, 0.03);
  --input-focus-bg: rgba(0, 0, 0, 0.05);
  --input-placeholder: rgba(30, 41, 59, 0.45);

  --dropdown-bg: rgba(220, 224, 232, 0.98);

  /* Special Brand Colors */
  --obgy-primary: #f43f5e;     /* Rose Pink */
  --obgy-secondary: #fda4af;
  --obgy-glow: rgba(244, 63, 94, 0.2);

  --peds-primary: #10b981;     /* Emerald Mint */
  --peds-secondary: #6ee7b7;
  --peds-glow: rgba(16, 185, 129, 0.2);

  --diag-primary: #6366f1;     /* Violet Indigo */
  --diag-secondary: #a5b4fc;
  --diag-glow: rgba(99, 102, 241, 0.2);

  --bill-primary: #f59e0b;     /* Amber Gold */
  --bill-secondary: #fde047;
  --bill-glow: rgba(245, 158, 11, 0.2);

  --danger: #ef4444;
  --success: #10b981;
  --info: #06b6d4;

  /* Layout Constants */
  --sidebar-width: 260px;
  --header-height: 70px;
  --transition-speed: 0.25s;
  --glass-blur: 16px;
  --card-shadow: 0 8px 24px 0 rgba(0, 0, 0, 0.08);
}

[data-theme="light"] {
  /* Theme: Light Mode */
  --bg-primary: #f1f5f9;
  --bg-secondary: #ffffff;
  --bg-sidebar: rgba(255, 255, 255, 0.9);
  --card-bg: rgba(255, 255, 255, 0.75);
  --card-hover: rgba(255, 255, 255, 0.95);
  --border-color: rgba(15, 23, 42, 0.08);
  --border-focus: rgba(99, 102, 241, 0.6);

  --text-main: #0f172a;
  --text-muted: #64748b;
  --text-inverse: #f8fafc;

  --obgy-glow: rgba(244, 63, 94, 0.1);
  --peds-glow: rgba(16, 185, 129, 0.1);
  --diag-glow: rgba(99, 102, 241, 0.1);
  --bill-glow: rgba(245, 158, 11, 0.1);

  --card-shadow: 0 8px 24px 0 rgba(148, 163, 184, 0.15);

  --credits-bg-ok: rgba(99, 102, 241, 0.12);
  --credits-text-ok: #312e81; /* High contrast dark indigo for white background */
  --credits-bg-zero: rgba(239, 68, 68, 0.12);
  --credits-text-zero: #991b1b; /* High contrast dark red */

  --input-bg: rgba(0, 0, 0, 0.03);
  --input-focus-bg: rgba(0, 0, 0, 0.05);
  --input-placeholder: rgba(15, 23, 42, 0.35);

  --dropdown-bg: rgba(241, 245, 249, 0.98);
}

[data-theme="dark"] {
  /* Theme: Premium Dark Mode */
  --bg-primary: #0a0e27;       /* Deep navy */
  --bg-secondary: #131842;     /* Card/Header navy */
  --bg-sidebar: rgba(10, 14, 39, 0.95);
  --card-bg: rgba(19, 24, 66, 0.6);
  --card-hover: rgba(19, 24, 66, 0.8);
  --border-color: rgba(255, 255, 255, 0.08);
  --border-focus: rgba(99, 102, 241, 0.6);

  --text-main: #f1f5f9;        /* Light text */
  --text-muted: #94a3b8;       /* Muted slate */
  --text-inverse: #0f172a;     /* Dark text for buttons */

  --obgy-glow: rgba(244, 63, 94, 0.2);
  --peds-glow: rgba(16, 185, 129, 0.2);
  --diag-glow: rgba(99, 102, 241, 0.2);
  --bill-glow: rgba(245, 158, 11, 0.2);

  --card-shadow: 0 8px 24px 0 rgba(0, 0, 0, 0.3);

  --credits-bg-ok: rgba(165, 180, 252, 0.2);
  --credits-text-ok: #c7d2fe;  /* Bright visible lavender in dark mode */
  --credits-bg-zero: rgba(248, 113, 113, 0.2);
  --credits-text-zero: #fca5a5;

  --input-bg: rgba(255, 255, 255, 0.04);
  --input-focus-bg: rgba(255, 255, 255, 0.07);
  --input-placeholder: rgba(255, 255, 255, 0.35);

  --dropdown-bg: rgba(30, 41, 59, 0.98);
}

/* Base Styles */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  font-family: var(--font-body);
  background-color: var(--bg-primary);
  color: var(--text-main);
  min-height: 100vh;
  overflow-x: hidden;
  transition: background-color var(--transition-speed) ease, color var(--transition-speed) ease;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: -0.02em;
}

a {
  text-decoration: none;
  color: inherit;
}

/* Custom Scrollbar */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

::-webkit-scrollbar-track {
  background: transparent;
}

::-webkit-scrollbar-thumb {
  background: var(--border-color);
  border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--text-muted);
}

/* Layout Wrapper */
.app-container {
  display: flex;
  min-height: 100vh;
}

/* Sidebar navigation */
.sidebar {
  width: var(--sidebar-width);
  background-color: var(--bg-sidebar);
  border-right: 1px solid var(--border-color);
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
  display: flex;
  flex-direction: column;
  position: fixed;
  height: 100vh;
  z-index: 100;
  transition: transform var(--transition-speed) ease, background-color var(--transition-speed) ease;
}

.brand-section {
  padding: 24px;
  display: flex;
  align-items: center;
  gap: 12px;
  border-bottom: 1px solid var(--border-color);
}

.brand-logo-container {
  width: 42px;
  height: 42px;
  border-radius: 12px;
  background: linear-gradient(135deg, var(--obgy-primary), var(--diag-primary));
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 12px rgba(99, 102, 241, 0.3);
}

.brand-logo-container svg {
  color: white;
  width: 24px;
  height: 24px;
}

.brand-title {
  font-size: 1.15rem;
  font-weight: 800;
  line-height: 1.2;
}

.brand-title span {
  font-weight: 400;
  font-size: 0.75rem;
  display: block;
  color: var(--text-muted);
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.nav-menu {
  list-style: none;
  padding: 24px 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex-grow: 1;
}

.nav-item {
  width: 100%;
}

.nav-link {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 16px;
  border-radius: 10px;
  font-size: 0.95rem;
  font-weight: 500;
  color: var(--text-muted);
  transition: all var(--transition-speed) ease;
  cursor: pointer;
}

.nav-link svg {
  width: 20px;
  height: 20px;
  transition: transform var(--transition-speed) ease;
}

.nav-link:hover {
  background: var(--card-bg);
  color: var(--text-main);
}

.nav-link:hover svg {
  transform: translateX(2px);
}

.nav-link.active {
  background: linear-gradient(135deg, rgba(99, 102, 241, 0.15), rgba(244, 63, 94, 0.1));
  border-left: 3px solid var(--diag-primary);
  color: var(--text-main);
  font-weight: 600;
}

.nav-link.active svg {
  color: var(--diag-primary);
}

/* Sidebar Footer Profile */
.sidebar-footer {
  padding: 20px;
  border-top: 1px solid var(--border-color);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.profile-info {
  display: flex;
  align-items: center;
  gap: 10px;
}

.avatar {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--diag-primary), var(--peds-primary));
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-weight: 700;
  font-size: 0.9rem;
}

.profile-meta .name {
  font-size: 0.85rem;
  font-weight: 600;
}

.profile-meta .role {
  font-size: 0.75rem;
  color: var(--text-muted);
}

.theme-toggle-btn {
  background: transparent;
  border: 1px solid var(--border-color);
  width: 32px;
  height: 32px;
  border-radius: 8px;
  color: var(--text-main);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all var(--transition-speed) ease;
}

.theme-toggle-btn:hover {
  background: var(--card-bg);
  border-color: var(--text-muted);
}

/* Main Content Area */
.main-content {
  margin-left: var(--sidebar-width);
  flex-grow: 1;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  padding: 0;
  transition: margin-left var(--transition-speed) ease;
}

/* Header */
.top-header {
  height: var(--header-height);
  background-color: var(--bg-secondary);
  border-bottom: 1px solid var(--border-color);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 32px;
  position: sticky;
  top: 0;
  z-index: 90;
  backdrop-filter: blur(10px);
}

.header-search {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--card-bg);
  border: 1px solid var(--border-color);
  padding: 8px 16px;
  border-radius: 20px;
  width: 300px;
  transition: all var(--transition-speed) ease;
}

.header-search:focus-within {
  border-color: var(--border-focus);
  box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.1);
  width: 360px;
}

.header-search input {
  background: transparent;
  border: none;
  outline: none;
  color: var(--text-main);
  font-family: inherit;
  font-size: 0.9rem;
  width: 100%;
}

.header-search svg {
  color: var(--text-muted);
  width: 18px;
  height: 18px;
}

.header-actions {
  display: flex;
  align-items: center;
  gap: 20px;
}

.system-time {
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--text-muted);
  display: flex;
  align-items: center;
  gap: 8px;
}

.system-time svg {
  width: 16px;
  height: 16px;
  color: var(--diag-primary);
}

/* Page Wrapper / Container */
.page-container {
  padding: 32px;
  flex-grow: 1;
  display: none; /* Controlled by routing */
  animation: fadeIn 0.4s ease-out;
}

.page-container.active-page {
  display: block;
}

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

/* Page Header Panel */
.page-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 28px;
}

.page-header h2 {
  font-size: 1.85rem;
  color: var(--text-main);
  position: relative;
}

.page-header p {
  color: var(--text-muted);
  font-size: 0.95rem;
  margin-top: 4px;
}

.header-buttons {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 18px;
  border-radius: 10px;
  font-size: 0.9rem;
  font-weight: 600;
  font-family: inherit;
  border: none;
  cursor: pointer;
  transition: all var(--transition-speed) ease;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.btn-primary {
  background: linear-gradient(135deg, var(--diag-primary), var(--diag-secondary));
  color: white;
}

.btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(99, 102, 241, 0.4);
  filter: brightness(1.1);
}

.btn-secondary {
  background: var(--card-bg);
  color: var(--text-main);
  border: 1px solid var(--border-color);
}

.btn-secondary:hover {
  background: var(--card-hover);
  border-color: var(--text-muted);
}

.btn-danger {
  background: var(--danger);
  color: white;
}

.btn-danger:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(239, 68, 68, 0.3);
}

.btn-success {
  background: var(--success);
  color: white;
}

.btn-success:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(16, 185, 129, 0.3);
}

.btn-obgy {
  background: linear-gradient(135deg, var(--obgy-primary), var(--obgy-secondary));
  color: white;
}

.btn-obgy:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 18px var(--obgy-glow);
}

.btn-peds {
  background: linear-gradient(135deg, var(--peds-primary), var(--peds-secondary));
  color: white;
}

.btn-peds:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 18px var(--peds-glow);
}

.btn-icon-only {
  width: 36px;
  height: 36px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}

/* Dashboard Analytics Grid */
.dashboard-kpis {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 20px;
  margin-bottom: 32px;
}

.kpi-card {
  background-color: var(--card-bg);
  border: 1px solid var(--border-color);
  border-radius: 16px;
  padding: 24px;
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
  box-shadow: var(--card-shadow);
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: relative;
  overflow: hidden;
  transition: all var(--transition-speed) ease;
}

.kpi-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 4px;
  height: 100%;
}

.kpi-card.kpi-obgy::before { background: var(--obgy-primary); }
.kpi-card.kpi-peds::before { background: var(--peds-primary); }
.kpi-card.kpi-diag::before { background: var(--diag-primary); }
.kpi-card.kpi-bill::before { background: var(--bill-primary); }

.kpi-card:hover {
  transform: translateY(-4px);
  background-color: var(--card-hover);
  border-color: var(--border-focus);
}

.kpi-info .kpi-label {
  font-size: 0.85rem;
  color: var(--text-muted);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.kpi-info .kpi-val {
  font-size: 2.1rem;
  font-weight: 800;
  margin-top: 8px;
  line-height: 1.1;
  font-family: var(--font-display);
}

.kpi-info .kpi-subtext {
  font-size: 0.75rem;
  color: var(--text-muted);
  margin-top: 6px;
}

.kpi-icon-wrapper {
  width: 52px;
  height: 52px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.kpi-obgy .kpi-icon-wrapper { background: rgba(244, 63, 94, 0.15); color: var(--obgy-primary); }
.kpi-peds .kpi-icon-wrapper { background: rgba(16, 185, 129, 0.15); color: var(--peds-primary); }
.kpi-diag .kpi-icon-wrapper { background: rgba(99, 102, 241, 0.15); color: var(--diag-primary); }
.kpi-bill .kpi-icon-wrapper { background: rgba(245, 158, 11, 0.15); color: var(--bill-primary); }

.kpi-icon-wrapper svg {
  width: 26px;
  height: 26px;
}

/* Dashboard Section Grid */
.dashboard-grid {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 24px;
  margin-bottom: 24px;
}

.section-card {
  background-color: var(--card-bg);
  border: 1px solid var(--border-color);
  border-radius: 16px;
  padding: 24px;
  box-shadow: var(--card-shadow);
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
  min-width: 0;
}

.card-title-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.card-title-row h3 {
  font-size: 1.25rem;
  display: flex;
  align-items: center;
  gap: 10px;
}

.card-title-row h3 svg {
  color: var(--diag-primary);
  width: 20px;
  height: 20px;
}

/* Ward Room Telemetry Map */
.ward-map-container {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.ward-section-header {
  font-size: 1rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-muted);
  border-bottom: 1px solid var(--border-color);
  padding-bottom: 8px;
  margin-bottom: 16px;
}

.ward-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 16px;
  margin-bottom: 24px;
}

.room-card {
  background: rgba(0, 0, 0, 0.04);
  border: 1px dashed var(--border-color);
  border-radius: 12px;
  padding: 16px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 120px;
  transition: all var(--transition-speed) ease;
  position: relative;
}

.room-card.occupied {
  background: var(--card-bg);
  border-style: solid;
  border-color: var(--border-color);
  box-shadow: var(--card-shadow);
}

.room-card.occupied.ward-obgy { border-left: 3px solid var(--obgy-primary); }
.room-card.occupied.ward-pediatrics { border-left: 3px solid var(--peds-primary); }

.room-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 12px;
}

.room-name {
  font-weight: 700;
  font-size: 0.95rem;
}

.room-type {
  font-size: 0.7rem;
  color: var(--text-muted);
}

.room-rate-badge {
  font-size: 0.75rem;
  font-weight: 600;
  background: rgba(0, 0, 0, 0.04);
  padding: 2px 6px;
  border-radius: 4px;
  border: 1px solid var(--border-color);
}

.room-status {
  font-size: 0.8rem;
  color: var(--text-muted);
}

.room-card.occupied .room-status {
  color: var(--text-main);
  font-weight: 600;
}

.room-patient-name {
  font-size: 0.85rem;
  font-weight: 600;
  margin-top: 4px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.room-patient-dept {
  font-size: 0.7rem;
  padding: 2px 6px;
  border-radius: 4px;
  display: inline-block;
  margin-top: 6px;
  font-weight: 600;
}

.ward-obgy .room-patient-dept {
  background: var(--obgy-glow);
  color: var(--obgy-primary);
}

.ward-pediatrics .room-patient-dept {
  background: var(--peds-glow);
  color: var(--peds-primary);
}

/* Vital pulse telemetry glow */
.pulse-indicator {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  position: absolute;
  top: 16px;
  right: 16px;
  display: none;
}

.room-card.occupied .pulse-indicator {
  display: block;
}

.ward-obgy .pulse-indicator {
  background-color: var(--obgy-primary);
  box-shadow: 0 0 0 rgba(244, 63, 94, 0.4);
  animation: pulse-obgy 1.5s infinite;
}

.ward-pediatrics .pulse-indicator {
  background-color: var(--peds-primary);
  box-shadow: 0 0 0 rgba(16, 185, 129, 0.4);
  animation: pulse-peds 1.5s infinite;
}

@keyframes pulse-obgy {
  0% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(244, 63, 94, 0.7); }
  70% { transform: scale(1.1); box-shadow: 0 0 0 6px rgba(244, 63, 94, 0); }
  100% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(244, 63, 94, 0); }
}

@keyframes pulse-peds {
  0% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.7); }
  70% { transform: scale(1.1); box-shadow: 0 0 0 6px rgba(16, 185, 129, 0); }
  100% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(16, 185, 129, 0); }
}

/* Directory / Patients view lists */
.list-filter-row {
  display: flex;
  gap: 12px;
  margin-bottom: 20px;
  align-items: center;
  justify-content: space-between;
}

.filters-group {
  display: flex;
  gap: 10px;
}

.filter-tab {
  background: var(--card-bg);
  border: 1px solid var(--border-color);
  color: var(--text-muted);
  padding: 8px 16px;
  border-radius: 20px;
  font-size: 0.85rem;
  font-weight: 500;
  cursor: pointer;
  transition: all var(--transition-speed) ease;
}

.filter-tab:hover {
  background: var(--card-hover);
  color: var(--text-main);
}

.filter-tab.active {
  background: var(--diag-primary);
  border-color: var(--diag-primary);
  color: white;
  font-weight: 600;
}

/* Patient cards directory grid */
.patients-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 20px;
}

.patient-card {
  background: var(--card-bg);
  border: 1px solid var(--border-color);
  border-radius: 16px;
  padding: 20px;
  box-shadow: var(--card-shadow);
  transition: all var(--transition-speed) ease;
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.patient-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 6px;
  height: 100%;
  border-radius: 16px 0 0 16px;
}

.patient-card.dept-obgy::before { background: var(--obgy-primary); }
.patient-card.dept-peds::before { background: var(--peds-primary); }

.patient-card:hover {
  transform: translateY(-5px) scale(1.03);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.15);
  background-color: var(--card-hover);
  border-color: var(--border-focus);
}

.patient-card-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 14px;
}

.patient-card-title h4 {
  font-size: 1.1rem;
  font-weight: 700;
}

.patient-card-title span {
  font-size: 0.75rem;
  color: var(--text-muted);
  display: block;
  margin-top: 2px;
}

.badge {
  font-size: 0.7rem;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: 20px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  display: inline-block;
}

.badge-obgy { background: var(--obgy-glow); color: var(--obgy-primary); }
.badge-peds { background: var(--peds-glow); color: var(--peds-primary); }
.badge-admitted { background: rgba(16, 185, 129, 0.15); color: var(--success); }
.badge-discharged { background: rgba(148, 163, 184, 0.15); color: var(--text-muted); }

.patient-card-body {
  font-size: 0.85rem;
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 18px;
  color: var(--text-muted);
}

.patient-info-item {
  display: flex;
  justify-content: space-between;
}

.patient-info-item .label {
  font-weight: 500;
}

.patient-info-item .value {
  color: var(--text-main);
  font-weight: 600;
}

.patient-vitals-strip {
  background: rgba(0, 0, 0, 0.03);
  border: 1px solid var(--border-color);
  border-radius: 10px;
  padding: 8px 12px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
  text-align: center;
  margin-top: 4px;
}

.vital-stat {
  display: flex;
  flex-direction: column;
}

.vital-stat .v-label {
  font-size: 0.65rem;
  color: var(--text-muted);
  text-transform: uppercase;
}

.vital-stat .v-val {
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--text-main);
}

.patient-card-footer {
  border-top: 1px solid var(--border-color);
  padding-top: 14px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.patient-doc-tag {
  font-size: 0.75rem;
  color: var(--text-muted);
  display: flex;
  align-items: center;
  gap: 4px;
}

.patient-doc-tag svg {
  width: 14px;
  height: 14px;
  color: var(--diag-primary);
}

/* Modals (Wizards/Dialogs) */
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.45);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 200;
  padding: 20px;
  animation: modalFadeIn 0.3s ease;
}

.modal-overlay.active {
  display: flex;
}

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

.modal-card {
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-radius: 20px;
  width: 100%;
  max-width: 680px;
  max-height: 90vh;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  animation: modalSlideUp 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.modal-card.modal-landscape {
  width: 95vw !important;
  max-width: 1200px !important;
  height: 85vh !important;
  max-height: 85vh !important;
}

.modal-card form {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  overflow: hidden;
  min-height: 0;
}

@keyframes modalSlideUp {
  from { transform: translateY(20px) scale(0.97); }
  to { transform: translateY(0) scale(1); }
}

.modal-header {
  padding: 24px;
  border-bottom: 1px solid var(--border-color);
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.modal-header h3 {
  font-size: 1.35rem;
  color: var(--text-main);
}

.modal-close-btn {
  background: transparent;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  transition: all var(--transition-speed) ease;
}

.modal-close-btn:hover {
  background: var(--card-bg);
  color: var(--text-main);
}

.modal-body {
  padding: 24px;
  overflow-y: auto;
  flex-grow: 1;
}

.modal-footer {
  padding: 20px 24px;
  border-top: 1px solid var(--border-color);
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  background: rgba(0, 0, 0, 0.15);
}

/* Forms styling inside modals */
.form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}

.form-group-full {
  grid-column: span 2;
}

.form-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.form-group label {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text-muted);
}

.form-control {
  background: var(--input-bg);
  border: 1px solid var(--border-color);
  border-radius: 8px;
  padding: 10px 14px;
  color: var(--text-main);
  font-family: inherit;
  font-size: 0.9rem;
  outline: none;
  transition: all var(--transition-speed) ease;
}

.form-control:focus {
  border-color: var(--border-focus);
  background: var(--input-focus-bg);
  box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.1);
}

.form-control::placeholder {
  color: var(--input-placeholder);
}

textarea.form-control {
  resize: vertical;
  min-height: 80px;
}

/* Radio Cards selection */
.radio-cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.radio-card {
  border: 1px solid var(--border-color);
  border-radius: 12px;
  padding: 16px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 12px;
  transition: all var(--transition-speed) ease;
  background: rgba(0, 0, 0, 0.02);
}

.radio-card input {
  display: none;
}

.radio-circle {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 2px solid var(--text-muted);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  position: relative;
}

.radio-circle::after {
  content: '';
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--diag-primary);
  transform: scale(0);
  transition: transform 0.15s ease;
}

.radio-card:hover {
  background: var(--card-bg);
}

.radio-card.selected {
  border-color: var(--border-focus);
  background: rgba(99, 102, 241, 0.08);
}

.radio-card.selected .radio-circle {
  border-color: var(--diag-primary);
}

.radio-card.selected .radio-circle::after {
  transform: scale(1);
}

.radio-card.selected.obgy-select {
  border-color: var(--obgy-primary);
  background: var(--obgy-glow);
}
.radio-card.selected.obgy-select .radio-circle { border-color: var(--obgy-primary); }
.radio-card.selected.obgy-select .radio-circle::after { background: var(--obgy-primary); }

.radio-card.selected.peds-select {
  border-color: var(--peds-primary);
  background: var(--peds-glow);
}
.radio-card.selected.peds-select .radio-circle { border-color: var(--peds-primary); }
.radio-card.selected.peds-select .radio-circle::after { background: var(--peds-primary); }

/* Table layouts for Diagnostic & Billing list */
.table-wrapper {
  overflow-x: auto;
  border-radius: 12px;
  border: 1px solid var(--border-color);
  background: rgba(0, 0, 0, 0.03);
  width: 100%;
  max-width: 100%;
}

.custom-table {
  width: 100%;
  border-collapse: collapse;
  text-align: left;
  font-size: 0.9rem;
}

.custom-table th {
  background: rgba(0, 0, 0, 0.03);
  padding: 14px 18px;
  font-weight: 600;
  color: var(--text-muted);
  border-bottom: 1px solid var(--border-color);
}

[data-theme="light"] .custom-table th {
  background: rgba(0, 0, 0, 0.02);
}

.custom-table td {
  padding: 14px 18px;
  border-bottom: 1px solid var(--border-color);
  color: var(--text-main);
  font-weight: 500;
}

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

.custom-table tr:hover td {
  background: rgba(0, 0, 0, 0.02);
}

/* Telemetry badges */
.status-pill {
  font-size: 0.75rem;
  font-weight: 700;
  padding: 4px 8px;
  border-radius: 6px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.status-pill.pending { background: rgba(245, 158, 11, 0.15); color: var(--bill-primary); }
.status-pill.completed { background: rgba(16, 185, 129, 0.15); color: var(--success); }
.status-pill.paid { background: rgba(16, 185, 129, 0.15); color: var(--success); }
.status-pill.partial { background: rgba(245, 158, 11, 0.15); color: var(--bill-primary); }
.status-pill.unpaid { background: rgba(239, 68, 68, 0.15); color: var(--danger); }

/* Vitals entry sliders & display panel */
.patient-details-drawer {
  position: fixed;
  top: 0;
  right: -105vw;
  width: 100vw;
  height: 100vh;
  background: var(--bg-secondary);
  border-left: 1px solid var(--border-color);
  box-shadow: -10px 0 40px rgba(0, 0, 0, 0.4);
  z-index: 150;
  transition: right 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  display: flex;
  flex-direction: column;
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
}

.patient-details-drawer.active {
  right: 0;
}

.drawer-header {
  padding: 24px;
  border-bottom: 1px solid var(--border-color);
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.drawer-body {
  padding: 24px;
  overflow-y: auto;
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.vitals-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.vital-gauge {
  background: rgba(0, 0, 0, 0.02);
  border: 1px solid var(--border-color);
  border-radius: 12px;
  padding: 16px;
  text-align: center;
  transition: transform 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
}

.vital-gauge:hover {
  transform: scale(1.06);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
  background-color: var(--card-bg);
}

.vital-gauge .val {
  font-size: 1.5rem;
  font-weight: 800;
  margin-top: 8px;
  font-family: var(--font-display);
}

.vital-gauge.vital-temp .val { color: var(--obgy-primary); }
.vital-gauge.vital-bp .val { color: var(--diag-primary); }
.vital-gauge.vital-pulse .val { color: var(--danger); }
.vital-gauge.vital-spo2 .val { color: var(--peds-primary); }

.vital-gauge .lbl {
  font-size: 0.75rem;
  color: var(--text-muted);
  text-transform: uppercase;
  margin-top: 4px;
}

/* Discharge checklists design */
.discharge-checklist {
  display: flex;
  flex-direction: column;
  gap: 12px;
  background: rgba(0, 0, 0, 0.02);
  border: 1px solid var(--border-color);
  border-radius: 12px;
  padding: 16px;
}

.checklist-item {
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  font-size: 0.9rem;
  font-weight: 500;
}

.checklist-item input[type="checkbox"] {
  width: 18px;
  height: 18px;
  accent-color: var(--diag-primary);
  cursor: pointer;
}

.checklist-item.verified {
  color: var(--success);
}

/* Billing ledger style */
.ledger-summary {
  margin-top: 20px;
  background: rgba(0, 0, 0, 0.02);
  border: 1px solid var(--border-color);
  border-radius: 12px;
  padding: 16px;
  font-size: 0.9rem;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.ledger-row {
  display: flex;
  justify-content: space-between;
}

.ledger-row.total-row {
  border-top: 1px solid var(--border-color);
  padding-top: 8px;
  font-size: 1.1rem;
  font-weight: 800;
}

/* Meds list inside wizards */
.meds-entry-row {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr auto;
  gap: 10px;
  margin-bottom: 8px;
}

/* Printing styles wrapper */
.print-only-container {
  display: none;
}

@page {
  size: A4 portrait;
  margin: 12mm 12mm 12mm 12mm;
}

@media print {
  html, body {
    height: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    background: white !important;
    color: black !important;
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif !important;
    font-size: 11pt !important;
    overflow: visible !important;
  }
  
  .app-container {
    display: none !important;
  }
  
  .sidebar, .top-header, .btn, .theme-toggle-btn, .modal-close-btn, .modal-footer, .header-search, .header-actions, .list-filter-row, .toast-container, .modal-overlay, .sidebar-backdrop, .patient-details-drawer {
    display: none !important;
  }

  .main-content {
    margin-left: 0 !important;
    padding: 0 !important;
    margin-top: 0 !important;
  }

  .page-container {
    display: none !important;
  }

  .print-only-container {
    display: none !important;
  }

  .print-only-container.active-print-target {
    display: block !important;
    padding: 0 !important;
    margin: 0 auto !important;
    width: 100% !important;
    max-width: 800px !important;
    box-sizing: border-box !important;
    page-break-after: avoid !important;
    page-break-inside: avoid !important;
  }

  .print-invoice-sheet, .print-discharge-sheet, .print-opd-sheet, .print-uhid-sheet {
    border: none !important;
    box-shadow: none !important;
    background: white !important;
    color: black !important;
  }
}

/* Toast Messages */
.toast-container {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 300;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.toast {
  background: var(--bg-secondary);
  border-left: 4px solid var(--diag-primary);
  border-top: 1px solid var(--border-color);
  border-bottom: 1px solid var(--border-color);
  border-right: 1px solid var(--border-color);
  padding: 12px 20px;
  border-radius: 8px;
  color: var(--text-main);
  font-size: 0.85rem;
  font-weight: 600;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.12);
  display: flex;
  align-items: center;
  gap: 10px;
  animation: toastSlideIn 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.toast.toast-success { border-left-color: var(--success); }
.toast.toast-danger { border-left-color: var(--danger); }
.toast.toast-warning { border-left-color: var(--bill-primary); }

@keyframes toastSlideIn {
  from { transform: translateX(50px); opacity: 0; }
  to { transform: translateX(0); opacity: 1; }
}

/* Empty State Styling */
.empty-state {
  text-align: center;
  padding: 48px;
  color: var(--text-muted);
}

.empty-state svg {
  width: 48px;
  height: 48px;
  margin-bottom: 16px;
  opacity: 0.5;
}

.empty-state h4 {
  font-size: 1.1rem;
  color: var(--text-main);
  margin-bottom: 6px;
}

.empty-state p {
  font-size: 0.9rem;
}

/* ==================== PATIENT PORTAL & PATIENT MODE ==================== */
.app-container.patient-mode .sidebar {
  display: none !important;
}

.app-container.patient-mode .top-header {
  display: none !important;
}

.app-container.patient-mode .main-content {
  margin-left: 0 !important;
  padding: 0 !important;
}

.app-container.patient-mode #patient-dashboard-page {
  padding: 40px 24px;
  max-width: 1200px;
  margin: 0 auto;
  width: 100%;
}

.app-container.patient-mode #login-gateway-page,
.app-container.not-logged-in #login-gateway-page {
  padding: 40px 24px;
  max-width: 100%;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
}

/* ==================== NOT LOGGED IN OVERRIDES ==================== */
.app-container.not-logged-in .sidebar {
  display: none !important;
}

.app-container.not-logged-in .top-header {
  display: none !important;
}

.app-container.not-logged-in .main-content {
  margin-left: 0 !important;
  padding: 0 !important;
}

/* Login gateway tab active styles */
.login-tab-btn.active {
  background: var(--diag-primary) !important;
  color: var(--text-inverse) !important;
  box-shadow: 0 4px 12px rgba(99, 102, 241, 0.3);
}

.login-tab-btn:not(.active):hover {
  background: rgba(0, 0, 0, 0.05);
  color: var(--text-main);
}

.patient-vital-card {
  background: rgba(0, 0, 0, 0.03);
  border: 1px solid var(--border-color);
  border-radius: 12px;
  padding: 16px;
  display: flex;
  align-items: center;
  gap: 16px;
  transition: transform var(--transition-speed) ease, background var(--transition-speed) ease;
}

.patient-vital-card:hover {
  transform: translateY(-2px);
  background: rgba(0, 0, 0, 0.05);
}

[data-theme="light"] .patient-vital-card {
  background: rgba(0, 0, 0, 0.02);
}
[data-theme="light"] .patient-vital-card:hover {
  background: rgba(0, 0, 0, 0.04);
}

.patient-vital-icon {
  width: 48px;
  height: 48px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.patient-vital-value {
  font-size: 1.4rem;
  font-weight: 700;
  font-family: var(--font-display);
}

.patient-vital-label {
  font-size: 0.8rem;
  color: var(--text-muted);
}

/* ==================== APPOINTMENT BADGES ==================== */
.badge-requested {
  background: rgba(245, 158, 11, 0.15);
  color: var(--bill-primary);
}

.badge-confirmed {
  background: rgba(16, 185, 129, 0.15);
  color: var(--success);
}

.badge-cancelled {
  background: rgba(239, 68, 68, 0.15);
  color: var(--danger);
}

.badge-completed {
  background: rgba(148, 163, 184, 0.15);
  color: var(--text-muted);
}

/* Color Palette Themes */
:root[data-color-theme="emerald"] {
  --diag-primary: #0ea5e9; /* Sky Blue */
  --diag-secondary: #7dd3fc;
  --diag-glow: rgba(14, 165, 233, 0.2);
  --border-focus: rgba(14, 165, 233, 0.4);
}
:root[data-color-theme="mint"] {
  --diag-primary: #14b8a6; /* Teal Mint */
  --diag-secondary: #5eead4;
  --diag-glow: rgba(20, 184, 166, 0.2);
  --border-focus: rgba(20, 184, 166, 0.4);
}
:root[data-color-theme="purple"] {
  --diag-primary: #a855f7; /* Purple */
  --diag-secondary: #d8b4fe;
  --diag-glow: rgba(168, 85, 247, 0.2);
  --border-focus: rgba(168, 85, 247, 0.4);
}
:root[data-color-theme="rose"] {
  --diag-primary: #ec4899; /* Pink Rose */
  --diag-secondary: #fbcfe8;
  --diag-glow: rgba(236, 72, 153, 0.2);
  --border-focus: rgba(236, 72, 153, 0.4);
}
:root[data-color-theme="amber"] {
  --diag-primary: #f59e0b; /* Amber Gold */
  --diag-secondary: #fde047;
  --diag-glow: rgba(245, 158, 11, 0.2);
  --border-focus: rgba(245, 158, 11, 0.4);
}
:root[data-color-theme="crimson"] {
  --diag-primary: #dc2626; /* Crimson Red */
  --diag-secondary: #fca5a5;
  --diag-glow: rgba(220, 38, 38, 0.2);
  --border-focus: rgba(220, 38, 38, 0.4);
}

/* iPad & Tablet Responsive Layout Optimization */
@media (max-width: 1024px) {
  :root {
    --sidebar-width: 80px;
  }
  
  .brand-title {
    display: none;
  }
  
  .brand-section {
    justify-content: center;
    padding: 16px 8px;
  }
  
  .nav-link {
    justify-content: center;
    padding: 12px;
  }
  
  .nav-link span {
    display: none;
  }
  
  .nav-link svg {
    margin: 0;
  }
  
  .profile-meta {
    display: none;
  }
  
  .sidebar-footer {
    justify-content: center;
    padding: 16px 8px;
  }
  
  .top-header {
    padding: 0 20px;
  }
  
  .page-container {
    padding: 20px;
  }

  .form-grid {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }

  .form-group-full {
    grid-column: span 1 !important;
  }

  .modal-card.modal-landscape {
    width: 96vw !important;
    height: 90vh !important;
    max-height: 90vh !important;
  }
}

/* Mobile Phone Responsive Optimization */
@media (max-width: 768px) {
  :root {
    --sidebar-width: 0px;
  }
  
  .sidebar {
    width: 260px;
    transform: translateX(-100%);
    position: fixed;
    height: 100vh;
    z-index: 1000;
    transition: transform var(--transition-speed) cubic-bezier(0.4, 0, 0.2, 1);
  }
  
  .app-container.sidebar-open .sidebar {
    transform: translateX(0);
  }
  
  .sidebar-backdrop {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    z-index: 999;
  }
  
  .app-container.sidebar-open .sidebar-backdrop {
    display: block;
  }
  
  .brand-title {
    display: block !important;
  }
  
  .brand-section {
    justify-content: flex-start !important;
    padding: 24px !important;
  }
  
  .nav-link {
    justify-content: flex-start !important;
    padding: 12px 16px !important;
  }
  
  .nav-link span {
    display: inline !important;
  }
  
  .profile-meta {
    display: block !important;
  }
  
  .sidebar-footer {
    justify-content: space-between !important;
    padding: 20px !important;
  }

  .top-header {
    height: 60px;
    padding: 0 16px;
    display: flex;
    align-items: center;
    gap: 12px;
  }

  .mobile-menu-toggle {
    display: flex !important;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: 1px solid var(--border-color);
    color: var(--text-main);
    width: 36px;
    height: 36px;
    border-radius: 8px;
    cursor: pointer;
    transition: all var(--transition-speed) ease;
  }

  .mobile-menu-toggle:hover {
    background: var(--card-bg);
  }

  .header-search {
    display: none !important;
  }

  .system-time {
    font-size: 0.8rem;
  }

  .color-theme-picker {
    display: none !important;
  }

  .main-content {
    margin-left: 0 !important;
  }

  .page-container {
    padding: 16px 12px;
  }

  .page-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 20px;
  }

  .page-header h2 {
    font-size: 1.5rem;
  }

  .header-buttons {
    display: flex;
    gap: 8px;
    width: 100%;
  }

  .header-buttons .btn {
    flex: 1;
    justify-content: center;
    padding: 10px;
    font-size: 0.8rem;
  }

  .dashboard-kpis {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 10px;
    margin-bottom: 20px;
  }

  .kpi-card {
    padding: 16px 12px;
    border-radius: 12px;
  }

  .kpi-info .kpi-val {
    font-size: 1.4rem;
  }

  .kpi-icon-wrapper {
    width: 38px;
    height: 38px;
    border-radius: 10px;
  }

  .kpi-icon-wrapper svg {
    width: 18px;
    height: 18px;
  }

  .dashboard-grid {
    grid-template-columns: 1fr !important;
    gap: 16px;
  }

  .custom-modal .modal-content {
    width: 96% !important;
    margin: 2% auto;
    max-height: 96vh;
    border-radius: 16px;
  }

  #staff-desk-page > div {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }

  #doctor-desk-page > div {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }
}

/* Autocomplete Dropdown styling */
.autocomplete-dropdown {
  backdrop-filter: blur(10px);
  background: var(--dropdown-bg) !important;
  border: 1px solid var(--border-color);
  border-radius: 8px;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.12);
  z-index: 999;
  max-height: 250px;
  overflow-y: auto;
}
.autocomplete-item {
  padding: 10px 14px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 4px;
  transition: background 0.2s ease;
}
.autocomplete-item:last-child {
  border-bottom: none;
}
.autocomplete-item:hover, .autocomplete-item.active {
  background: rgba(0, 0, 0, 0.06) !important;
}
.autocomplete-item-title {
  font-weight: 600;
  color: var(--text-main);
  font-size: 0.9rem;
}
.autocomplete-item-details {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  font-size: 0.78rem;
  color: var(--text-muted);
}
.autocomplete-item-detail {
  display: flex;
  align-items: center;
  gap: 4px;
}

/* Print UHID Sheet specific typography */
.print-uhid-sheet {
  background: white !important;
  color: black !important;
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif !important;
  padding: 0 !important;
}
.print-uhid-sheet table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 15px;
  font-size: 10pt;
}
.print-uhid-sheet th, .print-uhid-sheet td {
  border: 1px solid #ddd;
  padding: 8px;
  text-align: left;
}
.print-uhid-sheet th {
  background-color: #f2f2f2 !important;
  color: black !important;
  font-weight: bold;
}

/* Clinical Makeover CSS */
.clinical-focus-tabs .btn {
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid var(--border-color);
  color: var(--text-muted);
  box-shadow: none;
}

.clinical-focus-tabs .btn:hover {
  background: rgba(255, 255, 255, 0.05);
  color: var(--text-main);
}

.clinical-focus-tabs .btn.active-tab-btn {
  background: var(--diag-glow) !important;
  border-color: var(--diag-primary) !important;
  color: var(--diag-primary) !important;
  box-shadow: 0 0 12px var(--diag-glow);
}.complaint-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--border-color);
  color: var(--text-main);
  border-radius: 24px; /* Extremely bubbly/pill-shaped */
  font-size: 0.8rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
}

.complaint-chip:hover {
  background: rgba(99, 102, 241, 0.08);
  border-color: var(--diag-primary);
  transform: translateY(-1px);
}

.documented-complaint-row {
  display: grid;
  grid-template-columns: 1.5fr 1.5fr 2fr auto;
  gap: 12px;
  align-items: center;
  padding: 14px 18px;
  background: rgba(255, 255, 255, 0.015);
  border: 1px solid var(--border-color);
  border-radius: 16px; /* Bubbly card shape */
  transition: all 0.2s ease;
}

.documented-complaint-row:hover {
  background: rgba(255, 255, 255, 0.025);
  border-color: rgba(99, 102, 241, 0.25);
}

/* Severity toggle button group styling - extremely bubbly! */
.severity-group {
  display: flex;
  background: rgba(0, 0, 0, 0.15);
  padding: 3px;
  border-radius: 30px; /* Completely pill-shaped container */
  border: 1px solid var(--border-color);
  gap: 3px;
}

.severity-btn {
  flex: 1;
  padding: 4px 12px;
  font-size: 0.72rem;
  font-weight: 600;
  border: none;
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
  border-radius: 20px; /* Pill-shaped active toggle buttons */
  transition: all 0.15s ease;
  text-align: center;
}

.severity-btn:hover {
  color: var(--text-main);
}

.severity-btn.active.mild {
  background: rgba(16, 185, 129, 0.18) !important;
  color: #34d399 !important;
  border: 1px solid rgba(16, 185, 129, 0.4) !important;
}

.severity-btn.active.moderate {
  background: rgba(245, 158, 11, 0.18) !important;
  color: #fbbf24 !important;
  border: 1px solid rgba(245, 158, 11, 0.4) !important;
}

.severity-btn.active.severe {
  background: rgba(239, 68, 68, 0.18) !important;
  color: #f87171 !important;
  border: 1px solid rgba(239, 68, 68, 0.4) !important;
}

.suggestion-chip {
  display: inline-flex;
  align-items: center;
  padding: 6px 14px;
  border-radius: 24px; /* Premium rounded pill shape */
  font-size: 0.72rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
  background: var(--card-bg);
  border: 1px solid var(--border-color);
  box-shadow: var(--card-shadow);
}

.suggestion-chip.med {
  color: var(--peds-primary);
  background: var(--peds-glow);
  border-color: rgba(20, 184, 166, 0.25);
}

.suggestion-chip.med:hover {
  background: rgba(20, 184, 166, 0.25);
  border-color: var(--peds-primary);
  transform: scale(1.03);
}

.suggestion-chip.inv {
  color: var(--diag-primary);
  background: var(--diag-glow);
  border-color: rgba(99, 102, 241, 0.25);
}

.suggestion-chip.inv:hover {
  background: rgba(99, 102, 241, 0.2);
  border-color: var(--diag-primary);
  transform: scale(1.03);
}

.suggestion-chip.proc {
  color: var(--bill-primary);
  background: var(--bill-glow);
  border-color: rgba(245, 158, 11, 0.25);
}

.suggestion-chip.proc:hover {
  background: rgba(245, 158, 11, 0.2);
  border-color: var(--bill-primary);
  transform: scale(1.03);
}

.duration-quick-btn {
  padding: 3px 10px;
  font-size: 0.65rem;
  border: 1px solid var(--border-color);
  background: rgba(255, 255, 255, 0.02);
  color: var(--text-muted);
  border-radius: 20px; /* Bubbly pill shape! */
  cursor: pointer;
  transition: all 0.15s ease;
}

.duration-quick-btn:hover {
  background: rgba(255, 255, 255, 0.08);
  color: var(--text-main);
  border-color: var(--diag-primary);
  transform: translateY(-1px);
}
}

/* Premium Bubbly Proforma Switcher Tabs */
.proforma-tab {
  padding: 8px 18px;
  font-size: 0.82rem;
  font-weight: 600;
  font-family: inherit;
  border: none !important; /* Remove box-shaped outlines */
  border-radius: 30px !important; /* Extremely bubbly/pill-shaped */
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: all 0.2s ease;
  background: rgba(255, 255, 255, 0.03); /* Soft flat background */
  color: var(--text-muted);
}

.proforma-tab:hover {
  background: rgba(255, 255, 255, 0.05);
  color: var(--text-main);
  transform: translateY(-1px);
}

/* Custom rounded select/inputs inside documented complaint row to match bubbly theme */
.documented-complaint-row .form-control {
  border-radius: 20px !important; /* Bubbly form inputs in complaints section */
  padding: 2px 10px !important;
  background: rgba(0, 0, 0, 0.02);
  border: 1px solid var(--border-color);
  color: var(--text-main);
}
.documented-complaint-row select.form-control {
  appearance: none;
  background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235c6478' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
  background-repeat: no-repeat;
  background-position: right 8px center;
  background-size: 12px;
  padding-right: 22px !important;
}
.documented-complaint-row select.form-control:focus,
.documented-complaint-row input.form-control:focus {
  border-color: var(--border-focus);
  background: rgba(0, 0, 0, 0.04);
}

.investigation-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  background: rgba(99, 102, 241, 0.08);
  border: 1px solid rgba(99, 102, 241, 0.25);
  color: #a5b4fc;
  border-radius: 6px;
  font-size: 0.78rem;
  font-weight: 600;
}

.investigation-tag .close-btn {
  background: transparent;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  font-size: 0.9rem;
}

.investigation-tag .close-btn:hover {
  color: var(--danger);
}

.staff-dashboard-layout {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 20px;
  align-items: start;
  min-width: 0;
}

@media (max-width: 1200px) {
  .staff-dashboard-layout {
    grid-template-columns: 1fr !important;
  }
}

/* ==========================================
   PEDIATRICS UI STYLING & ACCENT THEME MATCH
   ========================================== */

/* Theme color overrides for Pediatrics active focus */
.peds-theme-active {
  --bg-primary: #eef2f8;
  --bg-secondary: #ffffff;
  --bg-sidebar: #ffffff;
  --card-bg: #ffffff;
  --card-hover: #f7f9fc;
  --text-main: #0f172a;
  --text-muted: #64748b;
  --border-color: #e6ebf2;
  --border2: #eef2f7;
  
  --peds-primary: #14b8a6;
  --peds-secondary: #0d9488;
  --peds-glow: rgba(20, 184, 166, 0.2);

  --accent: #14b8a6;
  --accent-d: #0d9488;
  --accent-soft: #e6faf6;
  --cc: #e11d48;
  --cc-soft: #fdeaef;
  --hx: #0d9488;
  --hx-soft: #e6f6f4;
  --med: #16a34a;
  --med-soft: #e8f7ee;
  --lab: #db2777;
  --lab-soft: #fdebf4;
  --success: #16a34a;
  --danger: #ef4444;
  --warn: #b45309;
  --warn-soft: #fdecd9;
  --radius: 14px;
}

[data-theme="dark"] .peds-theme-active {
  --bg-primary: #0a1120;
  --bg-secondary: #111a2c;
  --bg-sidebar: #111a2c;
  --card-bg: #111a2c;
  --card-hover: #0e1626;
  --text-main: #e7ecf3;
  --text-muted: #93a1b5;
  --border-color: #22304a;
  --border2: #1b273d;

  --peds-primary: #14b8a6;
  --peds-secondary: #0d9488;
  --peds-glow: rgba(20, 184, 166, 0.2);

  --accent: #14b8a6;
  --accent-d: #0d9488;
  --accent-soft: #1b2236;
  --cc: #e11d48;
  --cc-soft: #2a1620;
  --hx: #0d9488;
  --hx-soft: #0f2422;
  --med: #16a34a;
  --med-soft: #10241a;
  --lab: #db2777;
  --lab-soft: #2a1322;
  --success: #16a34a;
  --danger: #ef4444;
  --warn: #b45309;
  --warn-soft: #2a1e10;
}

/* Base style for capsule pills */
.peds-theme-active .caps {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.peds-theme-active .cap {
  font-size: 13.5px;
  font-weight: 600;
  border: 1.5px solid var(--border-color);
  background: var(--bg-secondary);
  color: var(--text-muted);
  border-radius: 22px;
  padding: 8px 15px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  user-select: none;
  transition: 0.12s;
  line-height: 1;
}

.peds-theme-active .cap:hover {
  border-color: var(--text-muted);
}

.peds-theme-active .cap .pm {
  font-weight: 800;
  opacity: 0.55;
}

/* Capsule ON states */
.peds-theme-active .cap.cc.on {
  border-color: var(--cc);
  background: var(--cc-soft);
  color: var(--cc);
  font-weight: 700;
}

.peds-theme-active .cap.ex.on {
  border-color: var(--accent);
  background: var(--accent-soft);
  color: var(--accent-d);
  font-weight: 700;
}

.peds-theme-active .cap.hx.on {
  border-color: var(--hx);
  background: var(--hx-soft);
  color: var(--hx);
  font-weight: 700;
}

/* Prescription table styling override in Pediatrics active focus */
.peds-theme-active #exam-prescription-table {
  width: 100%;
  border-collapse: collapse;
}

.peds-theme-active #exam-prescription-table th {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .5px;
  color: var(--text-muted);
  font-weight: 800;
  text-align: left;
  padding: 0 8px 7px;
  border-bottom: 2px solid var(--border-color);
}

.peds-theme-active #exam-prescription-table td {
  padding: 8px;
  vertical-align: middle;
  border-bottom: 1px solid var(--border2);
}

.peds-theme-active #exam-prescription-table input,
.peds-theme-active #exam-prescription-table select {
  padding: 8px 9px;
  font-size: 13.5px;
}

/* Template Details & Suggestions layout overrides */
.peds-theme-active #peds-template-details {
  background: var(--bg-secondary);
  border: 1.5px solid var(--border-color);
  border-radius: var(--radius);
  padding: 18px;
  box-shadow: 0 1px 3px rgba(16,24,40,.04);
}

.peds-theme-active .tcards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(235px, 1fr));
  gap: 10px;
}

.peds-theme-active .tcard {
  border: 1.5px solid var(--border-color);
  border-radius: 13px;
  padding: 13px;
  background: var(--bg-secondary);
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.peds-theme-active .tcard.sugg {
  border-color: var(--cc);
  background: var(--cc-soft);
}

.peds-theme-active .tcard .tdx {
  font-weight: 750;
  font-size: 14px;
  display: flex;
  align-items: center;
  gap: 6px;
}

.peds-theme-active .tcard .tmeta {
  font-size: 12px;
  color: var(--text-muted);
}