@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500;600&display=swap');

/* ==========================================================================
   Smart Clinic Suite --- Bespoke Healthcare Design Tokens & Theme System
   ========================================================================== */

:root {
  /* Typography */
  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;

  /* Light Theme Color Palette */
  --color-canvas: #f1f5f9;
  --color-surface: #ffffff;
  --color-card-header: #f8fafc;
  --color-surface-hover: #f8fafc;
  --color-surface-active: #e2e8f0;
  --color-border: #e2e8f0;
  --color-border-subtle: #cbd5e1;

  --color-text-primary: #0f172a;
  --color-text-secondary: #475569;
  --color-text-muted: #64748b;
  --color-text-inverted: #ffffff;

  /* Brand Palette - Clinical Navy & Healing Teal */
  --brand-primary: #1e3a8a;
  --brand-primary-light: #2563eb;
  --brand-primary-dark: #172554;
  --brand-primary-rgb: 30, 58, 138;

  --brand-teal: #0d9488;
  --brand-teal-light: #14b8a6;
  --brand-teal-dark: #0f766e;
  --brand-teal-rgb: 13, 148, 136;

  /* Semantic Feedback */
  --color-success: #059669;
  --color-success-bg: #ecfdf5;
  --color-success-border: #a7f3d0;

  --color-warning: #d97706;
  --color-warning-bg: #fffbeb;
  --color-warning-border: #fde68a;

  --color-danger: #dc2626;
  --color-danger-bg: #fef2f2;
  --color-danger-border: #fecaca;

  --color-info: #0284c7;
  --color-info-bg: #f0f9ff;
  --color-info-border: #bae6fd;

  /* Layout Dimensions */
  --sidebar-width: 260px;
  --sidebar-collapsed-width: 72px;
  --header-height: 64px;

  /* Radii */
  --radius-xs: 4px;
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 14px;
  --radius-xl: 20px;
  --radius-full: 9999px;

  /* Elevations */
  --shadow-xs: 0 1px 2px rgba(15, 23, 42, 0.04);
  --shadow-sm: 0 1px 3px rgba(15, 23, 42, 0.06), 0 1px 2px rgba(15, 23, 42, 0.04);
  --shadow-md: 0 4px 6px -1px rgba(15, 23, 42, 0.07), 0 2px 4px -2px rgba(15, 23, 42, 0.05);
  --shadow-lg: 0 10px 15px -3px rgba(15, 23, 42, 0.08), 0 4px 6px -4px rgba(15, 23, 42, 0.04);
  --shadow-card: 0 0 0 1px var(--color-border), 0 2px 4px rgba(15, 23, 42, 0.04);

  /* Focus Ring */
  --focus-ring: 0 0 0 3px rgba(13, 148, 136, 0.35);
  --transition-fast: 0.15s ease-in-out;
  --transition-normal: 0.25s ease-in-out;
}

/* Dark Theme Overrides */
[data-theme="dark"] {
  --color-canvas: #090d16;
  --color-surface: #111827;
  --color-card-header: #1f2937;
  --color-surface-hover: #1f2937;
  --color-surface-active: #374151;
  --color-border: #1f2937;
  --color-border-subtle: #374151;

  --color-text-primary: #f8fafc;
  --color-text-secondary: #94a3b8;
  --color-text-muted: #64748b;
  --color-text-inverted: #0f172a;

  --brand-primary: #3b82f6;
  --brand-primary-light: #60a5fa;
  --brand-primary-dark: #1d4ed8;

  --brand-teal: #14b8a6;
  --brand-teal-light: #2dd4bf;
  --brand-teal-dark: #0f766e;

  --color-success: #10b981;
  --color-success-bg: rgba(16, 185, 129, 0.12);
  --color-success-border: rgba(16, 185, 129, 0.3);

  --color-warning: #f59e0b;
  --color-warning-bg: rgba(245, 158, 11, 0.12);
  --color-warning-border: rgba(245, 158, 11, 0.3);

  --color-danger: #ef4444;
  --color-danger-bg: rgba(239, 68, 68, 0.12);
  --color-danger-border: rgba(239, 68, 68, 0.3);

  --color-info: #38bdf8;
  --color-info-bg: rgba(56, 189, 248, 0.12);
  --color-info-border: rgba(56, 189, 248, 0.3);

  --shadow-card: 0 0 0 1px var(--color-border), 0 4px 6px -1px rgba(0, 0, 0, 0.3);
}

/* Dark Theme Global Overrides for Bootstrap Utilities */
[data-theme="dark"] .text-dark {
  color: #f8fafc !important;
}

[data-theme="dark"] .bg-white {
  background-color: var(--color-surface) !important;
  color: var(--color-text-primary) !important;
}

[data-theme="dark"] .bg-light {
  background-color: #1e293b !important;
  color: var(--color-text-primary) !important;
}

[data-theme="dark"] .table {
  color: var(--color-text-primary) !important;
  border-color: var(--color-border) !important;
}

[data-theme="dark"] .table-hover tbody tr:hover {
  background-color: rgba(255, 255, 255, 0.05) !important;
  color: #ffffff !important;
}

[data-theme="dark"] .table thead th,
[data-theme="dark"] .table.dataTable thead th,
[data-theme="dark"] .dt-container table.dataTable thead th {
  background-color: #1b65af !important;
  color: #ffffff !important;
  border-bottom: 2px solid #144e88 !important;
}

[data-theme="dark"] .table.dataTable tbody td,
[data-theme="dark"] .dt-container table.dataTable tbody td {
  color: #cbd5e1 !important;
  border-bottom: 1px solid #1e293b !important;
}

[data-theme="dark"] .form-control,
[data-theme="dark"] .form-select {
  background-color: #1e293b !important;
  border-color: #334155 !important;
  color: #f8fafc !important;
}

[data-theme="dark"] .modal-content {
  background-color: #111827 !important;
  border-color: #374151 !important;
  color: #f8fafc !important;
}

[data-theme="dark"] .modal-header,
[data-theme="dark"] .modal-footer {
  border-color: #374151 !important;
}

[data-theme="dark"] .btn-close {
  filter: invert(1) grayscale(100%) brightness(200%);
}

/* Select2 Dark Theme Integration */
[data-theme="dark"] .select2-container--bootstrap-5 .select2-selection {
  background-color: #1e293b !important;
  border-color: #334155 !important;
  color: #f8fafc !important;
}

[data-theme="dark"] .select2-container--bootstrap-5 .select2-selection--single .select2-selection__rendered {
  color: #f8fafc !important;
}

[data-theme="dark"] .select2-container--bootstrap-5 .select2-dropdown {
  background-color: #111827 !important;
  border-color: #374151 !important;
  color: #f8fafc !important;
}

[data-theme="dark"] .select2-container--bootstrap-5 .select2-dropdown .select2-search .select2-search__field {
  background-color: #1e293b !important;
  border-color: #334155 !important;
  color: #f8fafc !important;
}

[data-theme="dark"] .select2-container--bootstrap-5 .select2-results__option--highlighted {
  background-color: #1e3a8a !important;
  color: #ffffff !important;
}

[data-theme="dark"] .select2-container--bootstrap-5 .select2-results__option {
  color: #cbd5e1 !important;
}

/* Base Styles */
body {
  font-family: var(--font-sans);
  background-color: var(--color-canvas);
  color: var(--color-text-primary);
  margin: 0;
  padding: 0;
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
}

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

/* Sidebar Styles - Deep Medical Navy Enterprise Framing */
.app-sidebar {
  width: var(--sidebar-width);
  background-color: #0b192c;
  border-right: 1px solid #1e293b;
  display: flex;
  flex-direction: column;
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  z-index: 100;
  transition: transform var(--transition-normal);
}

.sidebar-header {
  height: var(--header-height);
  padding: 0 1.25rem;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  background-color: #07111f;
  border-bottom: 1px solid #1e293b;
}

.brand-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: var(--radius-md);
  background: linear-gradient(135deg, var(--brand-teal), #2563eb);
  color: #ffffff;
  font-weight: 700;
  font-size: 1.1rem;
}

.brand-title {
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: #ffffff;
  margin: 0;
  line-height: 1.2;
}

.brand-subtitle {
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #38bdf8;
  margin: 0;
}

.sidebar-nav {
  flex: 1;
  padding: 0.75rem 0.65rem;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.12) transparent;
}

.sidebar-nav::-webkit-scrollbar {
  width: 4px;
}

.sidebar-nav::-webkit-scrollbar-track {
  background: transparent;
}

.sidebar-nav::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.12);
  border-radius: 4px;
}

.sidebar-nav::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.25);
}

.nav-section-label {
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #94a3b8;
  padding: 0.75rem 0.75rem 0.25rem;
}

.sidebar-link {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.6rem 0.75rem;
  border-radius: var(--radius-md);
  color: #cbd5e1;
  font-size: 0.88rem;
  font-weight: 500;
  text-decoration: none;
  border-left: 3px solid transparent;
  transition: all var(--transition-fast);
}

.sidebar-link:hover {
  background-color: rgba(255, 255, 255, 0.08);
  color: #ffffff;
}

.sidebar-link.active {
  background-color: rgba(56, 189, 248, 0.15) !important;
  color: #38bdf8 !important;
  border-left: 3px solid #38bdf8 !important;
  font-weight: 600 !important;
}

.sidebar-link .icon {
  font-size: 1.1rem;
  width: 20px;
  text-align: center;
  color: #94a3b8;
}

.sidebar-link.active .icon {
  color: #38bdf8;
}

.sidebar-footer {
  padding: 0.85rem 1rem;
  background-color: #07111f;
  border-top: 1px solid #1e293b;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* Main Content Wrapper */
.app-main {
  flex: 1;
  margin-left: var(--sidebar-width);
  display: flex;
  flex-direction: column;
  min-width: 0;
}

/* Header Styles */
.app-header {
  height: var(--header-height);
  background-color: var(--color-surface);
  border-bottom: 1px solid var(--color-border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 1.5rem;
  position: sticky;
  top: 0;
  z-index: 90;
}

.header-left {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.header-right {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

/* Content Area */
.app-content {
  flex: 1;
  padding: 1.75rem;
}

/* UI Cards */
.sc-card {
  background-color: var(--color-surface);
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-border);
  box-shadow: var(--shadow-sm);
  padding: 1.25rem;
  margin-bottom: 1.25rem;
  transition: box-shadow var(--transition-fast);
}

.sc-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 0.75rem;
  margin-bottom: 1rem;
  border-bottom: 1px solid var(--color-border);
}

.sc-card-title {
  font-size: 1.05rem;
  font-weight: 600;
  margin: 0;
  color: var(--color-text-primary);
}

/* Stat Widgets */
.stat-card {
  background-color: var(--color-surface);
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-border);
  padding: 1.25rem;
  display: flex;
  align-items: center;
  gap: 1rem;
  box-shadow: var(--shadow-sm);
}

.stat-icon {
  width: 48px;
  height: 48px;
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.35rem;
}

.stat-icon.primary {
  background: rgba(30, 58, 138, 0.1);
  color: var(--brand-primary);
}

.stat-icon.teal {
  background: rgba(13, 148, 136, 0.1);
  color: var(--brand-teal);
}

.stat-icon.success {
  background: var(--color-success-bg);
  color: var(--color-success);
}

.stat-icon.warning {
  background: var(--color-warning-bg);
  color: var(--color-warning);
}

.stat-label {
  font-size: 0.8rem;
  font-weight: 500;
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 0.2rem;
}

.stat-value {
  font-size: 1.6rem;
  font-weight: 700;
  color: var(--color-text-primary);
  line-height: 1;
}

/* Status Badges */
.badge-status {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.25rem 0.65rem;
  font-size: 0.75rem;
  font-weight: 600;
  border-radius: var(--radius-full);
}

.badge-status.active,
.badge-status.healthy {
  background-color: var(--color-success-bg);
  color: var(--color-success);
  border: 1px solid var(--color-success-border);
}

.badge-status.warning {
  background-color: var(--color-warning-bg);
  color: var(--color-warning);
  border: 1px solid var(--color-warning-border);
}

.badge-status.danger,
.badge-status.suspended {
  background-color: var(--color-danger-bg);
  color: var(--color-danger);
  border: 1px solid var(--color-danger-border);
}

.badge-status.info {
  background-color: var(--color-info-bg);
  color: var(--color-info);
  border: 1px solid var(--color-info-border);
}

/* Modern Accessible Tables */
.sc-table-container {
  overflow-x: auto;
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border);
}

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

.sc-table th {
  background-color: var(--color-surface-hover);
  color: var(--color-text-secondary);
  font-weight: 600;
  padding: 0.75rem 1rem;
  border-bottom: 1px solid var(--color-border);
  white-space: nowrap;
}

.sc-table td {
  padding: 0.85rem 1rem;
  border-bottom: 1px solid var(--color-border);
  color: var(--color-text-primary);
}

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

.sc-table tr:hover td {
  background-color: var(--color-surface-hover);
}

/* Buttons */
.btn-clinic {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.55rem 1.15rem;
  font-size: 0.88rem;
  font-weight: 500;
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: all var(--transition-fast);
  text-decoration: none;
  border: 1px solid transparent;
}

.btn-clinic:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}

.btn-primary {
  background-color: var(--brand-teal);
  color: #ffffff;
}

.btn-primary:hover {
  background-color: var(--brand-teal-dark);
  color: #ffffff;
}

.btn-secondary {
  background-color: var(--color-surface);
  border-color: var(--color-border);
  color: var(--color-text-primary);
}

.btn-secondary:hover {
  background-color: var(--color-surface-hover);
}

/* Form Controls */
.form-label {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--color-text-secondary);
  margin-bottom: 0.35rem;
  display: block;
}

.form-control-clinic {
  width: 100%;
  padding: 0.6rem 0.85rem;
  font-size: 0.9rem;
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border);
  background-color: var(--color-surface);
  color: var(--color-text-primary);
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
  box-sizing: border-box;
}

.form-control-clinic:focus {
  outline: none;
  border-color: var(--brand-teal);
  box-shadow: var(--focus-ring);
}

/* Theme Switcher Toggle */
.theme-toggle-btn {
  background: transparent;
  border: 1px solid var(--color-border);
  color: var(--color-text-secondary);
  width: 36px;
  height: 36px;
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all var(--transition-fast);
}

.theme-toggle-btn:hover {
  background-color: var(--color-surface-hover);
  color: var(--color-text-primary);
}

/* Responsive Sidebar Drawer for Mobile */
.sidebar-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background-color: rgba(15, 23, 42, 0.5);
  z-index: 95;
  backdrop-filter: blur(2px);
}

@media (max-width: 991px) {
  .app-sidebar {
    transform: translateX(-100%);
  }

  .app-sidebar.open {
    transform: translateX(0);
  }

  .app-sidebar.open+.sidebar-overlay {
    display: block;
  }

  .app-main {
    margin-left: 0;
  }
}

/* ==========================================================================
   Enterprise DataTables Customization - Clinical Dual-Tone Styling
   ========================================================================== */

.dt-container .dt-search input {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 0.4rem 0.85rem;
  font-size: 0.88rem;
  background-color: var(--color-surface);
  color: var(--color-text-primary);
  box-shadow: var(--shadow-xs);
  transition: all var(--transition-fast);
}

.dt-container .dt-search input:focus {
  border-color: var(--brand-teal);
  outline: none;
  box-shadow: var(--focus-ring);
}

.dt-container .dt-length select {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: 0.35rem 1.8rem 0.35rem 0.75rem;
  font-size: 0.85rem;
  background-color: var(--color-surface);
  color: var(--color-text-primary);
}

.dt-container .dt-paging .pagination .page-link {
  color: var(--brand-primary);
  border-color: var(--color-border);
  font-size: 0.85rem;
  padding: 0.35rem 0.75rem;
  border-radius: var(--radius-sm);
  margin: 0 2px;
}

.dt-container .dt-paging .pagination .page-item.active .page-link {
  background-color: var(--brand-primary);
  border-color: var(--brand-primary);
  color: #ffffff;
  font-weight: 600;
}

.dt-container .dt-buttons {
  gap: 0.4rem;
  display: inline-flex;
  flex-wrap: wrap;
}

.dt-container .dt-buttons .btn {
  font-size: 0.8rem;
  font-weight: 600;
  border-radius: var(--radius-sm);
  padding: 0.4rem 0.85rem;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  transition: all var(--transition-fast);
}

/* Distinct Enterprise Export Button Colors */
.dt-container .dt-buttons .btn.buttons-excel {
  background-color: #059669 !important;
  border-color: #059669 !important;
  color: #ffffff !important;
}

.dt-container .dt-buttons .btn.buttons-excel:hover {
  background-color: #047857 !important;
  border-color: #047857 !important;
  color: #ffffff !important;
  transform: translateY(-1px);
}

.dt-container .dt-buttons .btn.buttons-csv {
  background-color: #2563eb !important;
  border-color: #2563eb !important;
  color: #ffffff !important;
}

.dt-container .dt-buttons .btn.buttons-csv:hover {
  background-color: #1d4ed8 !important;
  border-color: #1d4ed8 !important;
  color: #ffffff !important;
  transform: translateY(-1px);
}

.dt-container .dt-buttons .btn.buttons-pdf {
  background-color: #dc2626 !important;
  border-color: #dc2626 !important;
  color: #ffffff !important;
}

.dt-container .dt-buttons .btn.buttons-pdf:hover {
  background-color: #b91c1c !important;
  border-color: #b91c1c !important;
  color: #ffffff !important;
  transform: translateY(-1px);
}

.dt-container .dt-buttons .btn.buttons-print {
  background-color: #475569 !important;
  border-color: #475569 !important;
  color: #ffffff !important;
}

.dt-container .dt-buttons .btn.buttons-print:hover {
  background-color: #334155 !important;
  border-color: #334155 !important;
  color: #ffffff !important;
  transform: translateY(-1px);
}

/* DataTables Container & Scrolling */
.dataTables_wrapper,
.dt-container {
  width: 100% !important;
  overflow-x: auto !important;
  -webkit-overflow-scrolling: touch;
}

/* Sleek Minimal Scrollbar for Wide Data Tables */
.dataTables_wrapper::-webkit-scrollbar,
.dt-container::-webkit-scrollbar,
.table-responsive::-webkit-scrollbar {
  height: 6px;
  width: 6px;
}

.dataTables_wrapper::-webkit-scrollbar-track,
.dt-container::-webkit-scrollbar-track,
.table-responsive::-webkit-scrollbar-track {
  background: #f1f5f9;
  border-radius: 4px;
}

.dataTables_wrapper::-webkit-scrollbar-thumb,
.dt-container::-webkit-scrollbar-thumb,
.table-responsive::-webkit-scrollbar-thumb {
  background: #cbd5e1;
  border-radius: 4px;
}

.dataTables_wrapper::-webkit-scrollbar-thumb:hover,
.dt-container::-webkit-scrollbar-thumb:hover,
.table-responsive::-webkit-scrollbar-thumb:hover {
  background: #94a3b8;
}

.dt-container table.dataTable,
.table.dataTable {
  border-collapse: separate;
  border-spacing: 0;
  width: 100% !important;
}

/* Professional Medical Table Header */
.dt-container table.dataTable thead th,
.table.dataTable thead th,
table.dataTable thead th,
.table thead th,
table thead th,
.table-clinical thead th,
thead.table-light th,
.table-light thead th {
  background-color: #1b65af !important;
  color: #ffffff !important;
  font-size: 0.8rem !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.05em !important;
  border-bottom: 2px solid #144e88 !important;
  border-top: none !important;
  padding: 6px 10px !important;
  white-space: nowrap !important;
}

/* Clean No-Wrap Data Cells */
.dt-container table.dataTable tbody td,
.table.dataTable tbody td,
table.dataTable tbody td {
  padding: 5px 8px !important;
  font-size: 0.8125rem !important;
  vertical-align: middle !important;
  border-bottom: 1px solid #e2e8f0 !important;
  white-space: nowrap !important;
  color: #334155;
}

/* Standardized Form Controls Across Complete Application */
.form-control,
.form-select {
  min-height: 30px;
  height: 30px;
  border-radius: 4px;
  font-size: 0.8rem;
  border: 1px solid #cbd5e1;
  font-size: 0.875rem;
  padding: 0.45rem 0.75rem;
  color: #1e293b;
  background-color: #ffffff;
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.form-control:focus,
.form-select:focus {
  border-color: #1e3a8a;
  box-shadow: 0 0 0 3px rgba(30, 58, 138, 0.15);
  outline: none;
}

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

/* Enterprise Card & Surface Structure */
.card,
.sc-card {
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 8px;
  box-shadow: 0 1px 3px 0 rgba(15, 23, 42, 0.06), 0 1px 2px -1px rgba(15, 23, 42, 0.04);
  color: var(--color-text-primary);
}

.card-header,
.sc-card-header {
  background-color: var(--color-card-header);
  border-bottom: 1px solid var(--color-border);
  padding: 0.85rem 1.25rem;
  font-weight: 600;
  color: var(--color-text-primary);
}

/* Suppress Duplicate DataTables Scroll Body Header */
.dt-scroll-body thead {
  visibility: collapse !important;
  height: 0 !important;
  padding: 0 !important;
  border: none !important;
}

.dt-scroll-body thead th {
  height: 0 !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  line-height: 0 !important;
  border: none !important;
}

.hover-elevate {
  transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.2s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.hover-elevate:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 15px -3px rgba(15, 23, 42, 0.08), 0 4px 6px -4px rgba(15, 23, 42, 0.04);
  border-color: var(--brand-primary);
}

/* Polished Topbar Header */
.app-header {
  background-color: var(--color-surface);
  border-bottom: 1px solid var(--color-border);
  box-shadow: 0 1px 3px 0 rgba(15, 23, 42, 0.04);
}

/* ==========================================================================
   Enterprise DataTables & Form Control Standard
   ========================================================================== */

/* DataTables Search Input & Button Alignment */
.dt-container .dt-search {
  display: flex !important;
  align-items: center !important;
  gap: 0.5rem !important;
}

.dt-container .dt-search input {
  min-width: 260px !important;
  max-width: 100% !important;
  border: 1px solid var(--color-border) !important;
  border-radius: 6px !important;
  padding: 0.4rem 0.75rem !important;
  font-size: 0.875rem !important;
  background-color: var(--color-surface) !important;
  color: var(--color-text-primary) !important;
}

.dt-container .dt-search input:focus {
  border-color: var(--brand-primary) !important;
  box-shadow: 0 0 0 3px rgba(30, 58, 138, 0.15) !important;
  outline: none !important;
}

.dt-container .dt-buttons {
  display: flex !important;
  gap: 0.35rem !important;
  flex-wrap: wrap !important;
}

.dt-container .dt-buttons .btn {
  font-size: 0.8rem !important;
  font-weight: 600 !important;
  padding: 0.35rem 0.75rem !important;
  border-radius: 6px !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 0.35rem !important;
}

/* Colored Export Buttons */
.dt-container .dt-buttons .buttons-excel {
  color: #15803d !important;
  border-color: #86efac !important;
  background-color: #f0fdf4 !important;
}

.dt-container .dt-buttons .buttons-excel:hover {
  background-color: #15803d !important;
  color: #ffffff !important;
}

.dt-container .dt-buttons .buttons-csv {
  color: #1d4ed8 !important;
  border-color: #93c5fd !important;
  background-color: #eff6ff !important;
}

.dt-container .dt-buttons .buttons-csv:hover {
  background-color: #1d4ed8 !important;
  color: #ffffff !important;
}

.dt-container .dt-buttons .buttons-pdf {
  color: #b91c1c !important;
  border-color: #fca5a5 !important;
  background-color: #fef2f2 !important;
}

.dt-container .dt-buttons .buttons-pdf:hover {
  background-color: #b91c1c !important;
  color: #ffffff !important;
}

.dt-container .dt-buttons .buttons-print {
  color: #334155 !important;
  border-color: #cbd5e1 !important;
  background-color: #f8fafc !important;
}

.dt-container .dt-buttons .buttons-print:hover {
  background-color: #334155 !important;
  color: #ffffff !important;
}

/* Strict High-Contrast Safety on White Card Surfaces */
.card,
.sc-card {
  color: var(--color-text-primary) !important;
}

.card .text-muted {
  color: #64748b !important;
}

.card .text-dark {
  color: #0f172a !important;
}

/* Clean Enterprise KPI Stat Tile */
.stat-tile {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 10px;
  padding: 0.85rem 1.15rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 92px !important;
  min-height: 92px !important;
  max-height: 92px !important;
  box-sizing: border-box !important;
  box-shadow: 0 1px 3px 0 rgba(15, 23, 42, 0.05);
  transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.stat-tile:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 12px -2px rgba(15, 23, 42, 0.08);
}

.stat-tile.border-accent-primary {
  border-left: 4px solid var(--brand-primary) !important;
}

.stat-tile.border-accent-teal {
  border-left: 4px solid var(--brand-teal) !important;
}

.stat-tile.border-accent-warning {
  border-left: 4px solid var(--color-warning) !important;
}

.stat-tile.border-accent-danger {
  border-left: 4px solid var(--color-danger) !important;
}

.stat-tile.border-accent-success {
  border-left: 4px solid var(--color-success) !important;
}

.stat-tile-label {
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #64748b;
  margin-bottom: 0.25rem;
}

.stat-tile-value {
  font-size: 1.75rem;
  font-weight: 800;
  color: #0f172a;
  line-height: 1.1;
}

.stat-tile-sub {
  font-size: 0.75rem;
  color: #64748b;
  margin-top: 0.2rem;
}

.stat-tile-icon {
  width: 44px;
  height: 44px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.35rem;
  flex-shrink: 0;
}

/* ==========================================================================
   Enterprise Hospital High-Density Clinical Design System
   ========================================================================== */

/* High-Density Medical Listing Tables */
.table.dataTable,
.table-hover {
  font-size: 0.82rem !important;
}

.table.dataTable tbody td,
.table-hover tbody td {
  padding: 0.45rem 0.65rem !important;
  vertical-align: middle !important;
}

.table.dataTable thead th,
table.dataTable thead th {
  padding: 0.55rem 0.65rem !important;
  font-size: 0.75rem !important;
  text-transform: uppercase !important;
  letter-spacing: 0.04em !important;
  font-weight: 700 !important;
  background-color: #1b65af !important;
  color: #ffffff !important;
  border-bottom: 2px solid #144e88 !important;
}

/* Pinned Actions Column 0 Styling */
.actions-dropdown-btn {
  padding: 0.2rem 0.55rem !important;
  font-size: 0.74rem !important;
  font-weight: 600 !important;
  border-radius: 6px !important;
  transition: all 0.15s ease-in-out !important;
}

/* Sticky Patient Clinical Context Banner */
.patient-clinical-banner {
  background: linear-gradient(90deg, #0f172a 0%, #1e293b 100%);
  color: #f8fafc;
  border-radius: 10px;
  padding: 0.75rem 1.25rem;
  margin-bottom: 1.25rem;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.05);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.patient-clinical-banner .patient-name {
  font-size: 1.15rem;
  font-weight: 700;
  color: #ffffff;
}

.patient-clinical-banner .patient-meta {
  font-size: 0.78rem;
  color: #94a3b8;
}

.patient-clinical-banner .uhid-pill {
  background: rgba(56, 189, 248, 0.15);
  color: #38bdf8;
  border: 1px solid rgba(56, 189, 248, 0.3);
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 0.75rem;
  padding: 0.2rem 0.5rem;
  border-radius: 4px;
}

.patient-clinical-banner .allergy-alert {
  background: #ef4444;
  color: #ffffff;
  font-weight: 700;
  font-size: 0.72rem;
  padding: 0.2rem 0.55rem;
  border-radius: 4px;
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  animation: pulse-allergy 2s infinite;
}

@keyframes pulse-allergy {
  0% {
    box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.4);
  }

  70% {
    box-shadow: 0 0 0 6px rgba(239, 68, 68, 0);
  }

  100% {
    box-shadow: 0 0 0 0 rgba(239, 68, 68, 0);
  }
}

/* Authentic Hospital OPD Status Pills */
.med-badge {
  font-size: 0.7rem !important;
  font-weight: 600 !important;
  padding: 0.2rem 0.5rem !important;
  border-radius: 4px !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 0.25rem !important;
  letter-spacing: 0.02em !important;
}

.med-badge-critical {
  background: #fef2f2 !important;
  color: #991b1b !important;
  border: 1px solid #fecaca !important;
}

.med-badge-waiting {
  background: #fffbeb !important;
  color: #92400e !important;
  border: 1px solid #fde68a !important;
}

.med-badge-consultation {
  background: #faf5ff !important;
  color: #6b21a8 !important;
  border: 1px solid #e9d5ff !important;
}

.med-badge-done {
  background: #ecfdf5 !important;
  color: #065f46 !important;
  border: 1px solid #a7f3d0 !important;
}

.med-badge-scheduled {
  background: #eff6ff !important;
  color: #1e40af !important;
  border: 1px solid #bfdbfe !important;
}

/* ==========================================================================
   Master Clinical Suite Consistency: DataTables, Toolbars & Micro-Controls
   ========================================================================== */

/* Locked Table Control Baseline */
div.dataTables_wrapper div.dataTables_filter {
  margin-bottom: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
}

div.dataTables_wrapper div.dataTables_filter label {
  display: inline-flex !important;
  align-items: center !important;
  margin-bottom: 0 !important;
  font-size: 0.8rem !important;
  font-weight: 500 !important;
  color: #64748b !important;
}

div.dataTables_wrapper div.dataTables_filter input {
  height: 32px !important;
  font-size: 0.8rem !important;
  padding: 4px 10px !important;
  border-radius: 4px !important;
  border: 1px solid #cbd5e1 !important;
  margin-left: 0.5rem !important;
  background-color: #ffffff !important;
  width: 220px !important;
}

div.dataTables_wrapper div.dt-buttons {
  margin-bottom: 0 !important;
  display: inline-flex !important;
  gap: 4px !important;
}

div.dataTables_wrapper div.dt-buttons .btn {
  height: 32px !important;
  line-height: 1 !important;
  font-size: 0.76rem !important;
  font-weight: 600 !important;
  padding: 0 10px !important;
  border-radius: 4px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 4px !important;
  box-shadow: none !important;
}

div.dataTables_wrapper div.dataTables_length {
  display: inline-flex !important;
  align-items: center !important;
}

div.dataTables_wrapper div.dataTables_length label {
  display: inline-flex !important;
  align-items: center !important;
  font-size: 0.78rem !important;
  color: #64748b !important;
  gap: 6px !important;
}

div.dataTables_wrapper div.dataTables_length select {
  height: 30px !important;
  font-size: 0.78rem !important;
  padding: 2px 24px 2px 8px !important;
  border-radius: 4px !important;
  border: 1px solid #cbd5e1 !important;
  display: inline-block !important;
  width: auto !important;
}

div.dataTables_wrapper div.dataTables_paginate {
  margin-top: 8px !important;
}

div.dataTables_wrapper div.dataTables_paginate ul.pagination {
  margin-bottom: 0 !important;
}

div.dataTables_wrapper div.dataTables_paginate ul.pagination .page-link {
  height: 30px !important;
  padding: 4px 10px !important;
  font-size: 0.78rem !important;
}

div.dataTables_wrapper .row:first-child {
  align-items: center !important;
  margin-bottom: 12px !important;
}

div.dataTables_wrapper .row:last-child {
  align-items: center !important;
  margin-top: 12px !important;
}

/* Master High-Density Clinical Tables */
.table.dataTable thead th,
.table-clinical thead th,
table thead th,
.table thead th {
  font-size: 0.72rem !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.05em !important;
  color: #ffffff !important;
  background-color: #1b65af !important;
  border-bottom: 2px solid #144e88 !important;
  padding: 8px 12px !important;
  vertical-align: middle !important;
  white-space: nowrap !important;
}

.table.dataTable tbody td,
.table-clinical tbody td {
  padding: 6px 12px !important;
  font-size: 0.84rem !important;
  vertical-align: middle !important;
  border-bottom: 1px solid #f1f5f9 !important;
}

.table.dataTable tbody tr:hover,
.table-clinical tbody tr:hover {
  background-color: #f8fafc !important;
}

/* Universal Page Action Header Buttons */
.page-header-actions .btn,
.btn-action-32 {
  height: 32px !important;
  font-size: 0.82rem !important;
  font-weight: 600 !important;
  padding: 0 12px !important;
  border-radius: 4px !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  white-space: nowrap !important;
}

/* Universal Card Headers (44px Lock) */
.card-header-locked {
  height: 44px !important;
  min-height: 44px !important;
  max-height: 44px !important;
  padding: 0 16px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  background-color: #ffffff !important;
  border-bottom: 1px solid #e2e8f0 !important;
}

.card-header-locked .card-title,
.card-header-locked h5,
.card-header-locked h6 {
  margin-bottom: 0 !important;
  font-size: 0.82rem !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.04em !important;
  color: #0f172a !important;
  white-space: nowrap !important;
}

/* Master Underlined Tabs (Never wrap, single clean line) */
.nav-tabs-clinical {
  border-bottom: 2px solid #e2e8f0 !important;
  display: flex !important;
  flex-wrap: nowrap !important;
  overflow-x: auto !important;
  white-space: nowrap !important;
  margin-bottom: 1rem !important;
  gap: 4px !important;
}

.nav-tabs-clinical .nav-item {
  margin-bottom: -2px !important;
}

.nav-tabs-clinical .nav-link {
  font-size: 0.82rem !important;
  font-weight: 600 !important;
  color: #64748b !important;
  border: none !important;
  border-bottom: 2px solid transparent !important;
  padding: 8px 14px !important;
  background: transparent !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  white-space: nowrap !important;
  border-radius: 0 !important;
  transition: all 0.15s ease-in-out !important;
}

.nav-tabs-clinical .nav-link:hover {
  color: #0284c7 !important;
  border-bottom-color: #cbd5e1 !important;
}

.nav-tabs-clinical .nav-link.active {
  color: #0284c7 !important;
  font-weight: 700 !important;
  border-bottom: 2px solid #0284c7 !important;
  background: transparent !important;
}

/* Universal Modern Corner Radiuses & Soft Healthcare Framing */
.card {
  border-radius: 10px !important;
  border: 1px solid var(--color-border);
  box-shadow: 0 1px 3px 0 rgba(15, 23, 42, 0.05);
}

.modal-content {
  border-radius: 14px !important;
  border: 1px solid var(--color-border) !important;
  box-shadow: 0 20px 25px -5px rgba(15, 23, 42, 0.15), 0 8px 10px -6px rgba(15, 23, 42, 0.1) !important;
  overflow: hidden;
}

.modal-header {
  border-top-left-radius: 14px !important;
  border-top-right-radius: 14px !important;
}

.modal-footer {
  border-bottom-left-radius: 14px !important;
  border-bottom-right-radius: 14px !important;
}

.offcanvas {
  border-top-left-radius: 16px !important;
  border-bottom-left-radius: 16px !important;
  box-shadow: -10px 0 25px -5px rgba(15, 23, 42, 0.15) !important;
}

.btn {
  border-radius: 6px !important;
}

.form-control,
.form-select,
.input-group-text {
  border-radius: 6px !important;
}

.alert {
  border-radius: 8px !important;
}

/* ==========================================================================
   Universal Enterprise Table Standard
   - Header Background: #1b65af
   - Header Text Color: #ffffff (White)
   - Header & Row Inline Text: No Wrap
   - Horizontal Scroll (HScroll) if Width Exceeds
   - Common to All Pages & Layouts
   ========================================================================== */

/* 1. Universal Table Header: #1b65af Background, Pure White Text */
table thead,
table thead tr,
table thead th,
table thead td,
.table thead,
.table thead tr,
.table thead th,
.table thead td,
.table thead tr th,
.table thead tr td,
table.dataTable thead,
table.dataTable thead tr,
table.dataTable thead th,
table.dataTable thead td,
table.dataTable thead tr th,
table.dataTable thead tr td,
.dt-container table.dataTable thead,
.dt-container table.dataTable thead th,
.table-clinical thead,
.table-clinical thead tr,
.table-clinical thead th,
.table-clinical thead td,
.table-clinical thead tr th,
thead.table-light,
thead.table-light tr,
thead.table-light th,
thead.table-light td,
.table-light thead,
.table-light thead th,
.table thead.table-light,
.table thead.table-light th,
[data-theme="dark"] table thead,
[data-theme="dark"] table thead th,
[data-theme="dark"] .table thead th,
[data-theme="dark"] table.dataTable thead th,
[data-theme="dark"] .dt-container table.dataTable thead th {
  background-color: #1b65af !important;
  color: #ffffff !important;
  --bs-table-bg: #1b65af !important;
  --bs-table-color: #ffffff !important;
  border-bottom: 2px solid #144e88 !important;
  border-top: none !important;
  border-color: #165390 !important;
  font-weight: 600 !important;
  vertical-align: middle !important;
  white-space: nowrap !important;
}

/* 2. Pure White Nested Text, Icons, and Sort Indicators in Headers */
table thead th *,
table thead td *,
.table thead th *,
.table thead td *,
table.dataTable thead th *,
table.dataTable thead td *,
.dt-container table.dataTable thead th * {
  color: #ffffff !important;
}

/* DataTables Sorting Indicators - Crisp White on #1b65af */
table.dataTable thead>tr>th span.dt-column-order:before,
table.dataTable thead>tr>th span.dt-column-order:after,
table.dataTable thead>tr>th.sorting:before,
table.dataTable thead>tr>th.sorting:after,
table.dataTable thead>tr>th.sorting_asc:before,
table.dataTable thead>tr>th.sorting_desc:after {
  color: #ffffff !important;
  opacity: 0.5 !important;
}

table.dataTable thead>tr>th.dt-ordering-asc span.dt-column-order:before,
table.dataTable thead>tr>th.dt-ordering-desc span.dt-column-order:after,
table.dataTable thead>tr>th.sorting_asc:before,
table.dataTable thead>tr>th.sorting_desc:after {
  color: #ffffff !important;
  opacity: 1 !important;
}

/* 3. Universal Table Header and Row Inline Text: No Wrap */
table thead th,
table thead td,
table tbody td,
table tbody th,
table tfoot td,
table tfoot th,
.table thead th,
.table thead td,
.table tbody td,
.table tbody th,
.table tfoot td,
.table tfoot th,
table.dataTable thead th,
table.dataTable thead td,
table.dataTable tbody td,
table.dataTable tbody th,
table.dataTable tfoot td,
table.dataTable tfoot th,
.table-clinical thead th,
.table-clinical tbody td {
  white-space: nowrap !important;
}

/* 4. Horizontal Scroll (HScroll) if Width Exceeds Container */
.table-responsive,
.table-responsive-sm,
.table-responsive-md,
.table-responsive-lg,
.table-responsive-xl,
.table-responsive-xxl,
div.dataTables_wrapper,
div.dt-container,
.dt-scroll-body,
.table-scroll-container,
.card-body:has(> .table),
.card-body:has(> .table-responsive),
.card-body:has(> .dataTables_wrapper),
.card-body:has(> .dt-container),
.card:has(> .table),
.card:has(> .table-responsive) {
  overflow-x: auto !important;
  -webkit-overflow-scrolling: touch;
  max-width: 100%;
}

/* 5. Smooth, Clear Minimal Horizontal Scrollbar */
.table-responsive::-webkit-scrollbar,
div.dataTables_wrapper::-webkit-scrollbar,
div.dt-container::-webkit-scrollbar,
.card-body:has(table)::-webkit-scrollbar {
  height: 8px !important;
  width: 8px !important;
}

.table-responsive::-webkit-scrollbar-track,
div.dataTables_wrapper::-webkit-scrollbar-track,
div.dt-container::-webkit-scrollbar-track,
.card-body:has(table)::-webkit-scrollbar-track {
  background: #f1f5f9 !important;
  border-radius: 4px;
}

.table-responsive::-webkit-scrollbar-thumb,
div.dataTables_wrapper::-webkit-scrollbar-thumb,
div.dt-container::-webkit-scrollbar-thumb,
.card-body:has(table)::-webkit-scrollbar-thumb {
  background: #94a3b8 !important;
  border-radius: 4px;
}

.table-responsive::-webkit-scrollbar-thumb:hover,
div.dataTables_wrapper::-webkit-scrollbar-thumb:hover,
div.dt-container::-webkit-scrollbar-thumb:hover,
.card-body:has(table)::-webkit-scrollbar-thumb:hover {
  background: #64748b !important;
}

/* ==========================================================================
   Industry-Standard Healthcare Compact UI & Consistent Typography
   (Epic Hyperdrive / Cerner Millennium / AthenaHealth Clinical Spec)
   ========================================================================== */

/* 1. Global Baseline & Type Scale - Standard High-Comfort Enterprise Desktop */
html {
  font-size: 16px !important;
  font-family: var(--font-sans);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

body {
  font-family: var(--font-sans) !important;
  font-size: 0.9375rem !important;
  /* 15px */
  line-height: 1.45 !important;
  letter-spacing: -0.01em;
  color: var(--color-text-primary);
}

/* Tabular Numbers for Clinical Precision */
.font-monospace,
.table td,
.table th,
.badge,
.badge-uhid,
.font-mono,
[data-mono] {
  font-feature-settings: 'tnum' 1, 'cv05' 1, 'cv11' 1;
}

/* Universal Typography Scale */
h1,
.h1 {
  font-family: var(--font-sans) !important;
  font-size: 1.6rem !important;
  /* ~25.6px */
  font-weight: 700 !important;
  line-height: 1.25 !important;
  letter-spacing: -0.02em !important;
}

h2,
.h2 {
  font-family: var(--font-sans) !important;
  font-size: 1.35rem !important;
  /* ~21.6px */
  font-weight: 700 !important;
  line-height: 1.25 !important;
  letter-spacing: -0.015em !important;
}

h3,
.h3 {
  font-family: var(--font-sans) !important;
  font-size: 1.2rem !important;
  /* ~19.2px */
  font-weight: 600 !important;
  line-height: 1.3 !important;
}

h4,
.h4,
.page-title,
.brand-title {
  font-family: var(--font-sans) !important;
  font-size: 1.15rem !important;
  /* ~18.4px */
  font-weight: 700 !important;
  line-height: 1.3 !important;
}

h5,
.h5,
.card-title,
.section-title {
  font-family: var(--font-sans) !important;
  font-size: 1.0rem !important;
  /* 16px */
  font-weight: 600 !important;
}

h6,
.h6 {
  font-family: var(--font-sans) !important;
  font-size: 0.9375rem !important;
  /* 15px */
  font-weight: 600 !important;
}

p,
span,
label,
div {
  font-family: var(--font-sans);
}

.small,
small,
.text-muted,
.form-text {
  font-size: 0.8125rem !important;
  /* 13px */
  line-height: 1.4 !important;
}

/* ==========================================================================
   Compact Design & Whitespace Optimization
   Eliminates Excess Blank Space, Bloated Gaps, & Bulky Paddings
   ========================================================================== */

/* 2. Compact High-Density Table Layout */
.table thead th,
table thead th,
.table.dataTable thead th,
table.dataTable thead th {
  padding: 8px 12px !important;
  font-size: 0.8125rem !important;
  /* 13px */
  font-weight: 700 !important;
  letter-spacing: 0.04em !important;
  text-transform: uppercase !important;
  line-height: 1.3 !important;
  vertical-align: middle !important;
  white-space: nowrap !important;
}

/* Dedicated clearance for DataTables sort indicators preventing text-icon collision */
table.dataTable thead th.dt-orderable-asc,
table.dataTable thead th.dt-orderable-desc,
table.dataTable thead th.sorting,
table.dataTable thead th.sorting_asc,
table.dataTable thead th.sorting_desc,
.table.dataTable thead th.dt-orderable-asc,
.table.dataTable thead th.dt-orderable-desc,
.dt-container table.dataTable thead th.dt-orderable-asc,
.dt-container table.dataTable thead th.dt-orderable-desc {
  padding-right: 30px !important;
  position: relative !important;
  cursor: pointer;
}

/* Explicitly disable sort indicators and restore standard padding on non-sortable columns (e.g., Actions) */
table.dataTable thead th.no-sort,
table.dataTable thead th.dt-orderable-none,
.table.dataTable thead th.no-sort,
.dt-container table.dataTable thead th.no-sort,
.dt-container table.dataTable thead th.dt-orderable-none {
  padding-right: 12px !important;
  cursor: default !important;
}

table.dataTable thead th.no-sort span.dt-column-order,
table.dataTable thead th.dt-orderable-none span.dt-column-order,
table.dataTable thead th.no-sort::before,
table.dataTable thead th.no-sort::after,
table.dataTable thead th.dt-orderable-none::before,
table.dataTable thead th.dt-orderable-none::after {
  display: none !important;
  content: "" !important;
}

table.dataTable thead>tr>th span.dt-column-order {
  right: 10px !important;
}

.table tbody td,
table tbody td,
.table.dataTable tbody td,
table.dataTable tbody td,
.table-clinical tbody td {
  padding: 7px 12px !important;
  font-size: 0.875rem !important;
  /* 14px */
  line-height: 1.4 !important;
  vertical-align: middle !important;
  white-space: nowrap !important;
}

/* Row hover highlight */
.table tbody tr:hover,
table.dataTable tbody tr:hover {
  background-color: #f1f5f9 !important;
}

/* 3. Table Dropdown & Row Actions */
.table .dropdown .btn,
.table .btn-sm,
.actions-dropdown-btn {
  height: 28px !important;
  min-height: 28px !important;
  padding: 2px 10px !important;
  font-size: 0.8125rem !important;
  /* 13px */
  line-height: 1.3 !important;
  border-radius: 4px !important;
}

/* 4. Form Controls */
.form-control,
.form-select {
  height: 34px !important;
  min-height: 34px !important;
  padding: 4px 10px !important;
  font-size: 0.875rem !important;
  /* 14px */
  border-radius: 5px !important;
  line-height: 1.35 !important;
}

.input-group-text {
  height: 34px !important;
  padding: 4px 10px !important;
  font-size: 0.875rem !important;
  /* 14px */
}

.form-label {
  font-size: 0.8125rem !important;
  /* 13px */
  font-weight: 600 !important;
  margin-bottom: 0.25rem !important;
  color: var(--color-text-secondary);
}

/* 5. Buttons & Toolbar Elements */
.btn:not(.btn-lg) {
  height: 34px !important;
  padding: 4px 12px !important;
  font-size: 0.875rem !important;
  /* 14px */
  font-weight: 600 !important;
  border-radius: 5px !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  line-height: 1.2 !important;
}

.btn-sm {
  height: 28px !important;
  padding: 2px 10px !important;
  font-size: 0.8125rem !important;
  /* 13px */
}

/* DataTables Button Bar & Search Input */
div.dataTables_wrapper div.dt-buttons .btn,
.dt-container .dt-buttons .btn {
  height: 32px !important;
  padding: 3px 10px !important;
  font-size: 0.8125rem !important;
  /* 13px */
}

div.dataTables_wrapper div.dataTables_filter input,
.dt-container .dt-search input {
  height: 32px !important;
  padding: 3px 10px !important;
  font-size: 0.875rem !important;
  /* 14px */
}

div.dataTables_wrapper div.dataTables_length select,
.dt-container .dt-length select {
  height: 32px !important;
  padding: 2px 20px 2px 8px !important;
  font-size: 0.8125rem !important;
  /* 13px */
}

div.dataTables_wrapper div.dataTables_paginate ul.pagination .page-link,
.dt-container .dt-paging .pagination .page-link {
  height: 30px !important;
  padding: 3px 10px !important;
  font-size: 0.8125rem !important;
  /* 13px */
}

/* 6. Compact Cards & Surface Containers */
.card,
.sc-card {
  border-radius: 6px !important;
  margin-bottom: 0.85rem !important;
}

.card-header,
.sc-card-header,
.card-header-locked {
  height: 40px !important;
  min-height: 40px !important;
  max-height: 40px !important;
  padding: 0 14px !important;
  display: flex !important;
  align-items: center !important;
  font-size: 0.9rem !important;
  /* 14.4px */
  font-weight: 600 !important;
}

.card-body {
  padding: 0.85rem 1rem !important;
}

/* 7. Metric / KPI Ribbon Elements */
.metric-card,
.stat-card,
.card:has(.fs-4),
.card:has(.display-6) {
  padding: 8px 14px !important;
}

.metric-value,
.card .fs-4,
.card .fs-3,
.card .fw-bold.h3 {
  font-size: 1.45rem !important;
  line-height: 1.2 !important;
  font-weight: 700 !important;
}

.metric-label,
.card .text-uppercase.small,
.card .text-muted.text-uppercase {
  font-size: 0.75rem !important;
  /* 12px */
  font-weight: 700 !important;
  letter-spacing: 0.04em !important;
  margin-bottom: 2px !important;
}

/* 8. Badges */
.badge {
  padding: 3px 8px !important;
  font-size: 0.78rem !important;
  /* ~12.5px */
  font-weight: 600 !important;
  border-radius: 4px !important;
  line-height: 1.2 !important;
}

/* 9. Rationalize Loose Spacing Utilities */
.mb-4 {
  margin-bottom: 0.85rem !important;
}

.mb-3 {
  margin-bottom: 0.65rem !important;
}

.py-3 {
  padding-top: 0.65rem !important;
  padding-bottom: 0.65rem !important;
}

.py-4 {
  padding-top: 0.85rem !important;
  padding-bottom: 0.85rem !important;
}

.p-3 {
  padding: 0.75rem !important;
}

.p-4 {
  padding: 0.95rem !important;
}

.gap-3 {
  gap: 0.6rem !important;
}

/* 10. Header Bar Height - Modern Glassmorphic Sticky Header */
.app-header {
  height: 56px !important;
  min-height: 56px !important;
  padding: 0 16px !important;
  background: rgba(255, 255, 255, 0.88) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  border-bottom: 1px solid rgba(226, 232, 240, 0.85) !important;
  position: sticky !important;
  top: 0 !important;
  z-index: 1020 !important;
  transition: background-color 0.2s ease, border-color 0.2s ease;
}

[data-theme="dark"] .app-header {
  background: rgba(17, 24, 39, 0.88) !important;
  border-bottom-color: rgba(255, 255, 255, 0.08) !important;
}

/* 11. Sidebar Navigation Items */
.sidebar-link {
  padding: 8px 14px !important;
  font-size: 0.875rem !important; /* 14px */
  border-radius: 8px !important;
  gap: 10px !important;
  transition: all 0.15s ease-in-out;
}

.sidebar-header {
  height: 56px !important;
  padding: 0 14px !important;
}

/* 12. Bento-Grid Card Styling & Modern Surface Elevation */
.card, .sc-card {
  border-radius: 12px !important;
  border: 1px solid #e2e8f0 !important;
  box-shadow: 0 1px 3px 0 rgba(15, 23, 42, 0.04), 0 1px 2px -1px rgba(15, 23, 42, 0.02) !important;
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}

.card:hover {
  box-shadow: 0 4px 6px -1px rgba(15, 23, 42, 0.07), 0 2px 4px -2px rgba(15, 23, 42, 0.04) !important;
}

[data-theme="dark"] .card,
[data-theme="dark"] .sc-card {
  border-color: rgba(255, 255, 255, 0.08) !important;
  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.3) !important;
}

/* 13. Global Omni Command Palette (Linear/Raycast Aesthetic) */
.cmd-palette-backdrop {
  position: fixed;
  inset: 0;
  z-index: 1060;
  background: rgba(15, 23, 42, 0.55);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding-top: 12vh;
  animation: cmdFadeIn 0.12s ease-out;
}

@@keyframes cmdFadeIn {
  from { opacity: 0; transform: scale(0.98); }
  to { opacity: 1; transform: scale(1); }
}

.cmd-palette-dialog {
  width: 100%;
  max-width: 640px;
  margin: 0 16px;
}

.cmd-palette-container {
  background: #ffffff;
  border-radius: 14px;
  border: 1px solid rgba(226, 232, 240, 0.9);
  overflow: hidden;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
  display: flex;
  flex-direction: column;
}

[data-theme="dark"] .cmd-palette-container {
  background: #111827;
  border-color: rgba(255, 255, 255, 0.12);
  color: #f8fafc;
}

.cmd-palette-input-wrap {
  display: flex;
  align-items: center;
  padding: 14px 18px;
  border-bottom: 1px solid #e2e8f0;
  gap: 12px;
}

[data-theme="dark"] .cmd-palette-input-wrap {
  border-bottom-color: #1f2937;
}

.cmd-palette-search-icon {
  font-size: 1.15rem;
  color: #94a3b8;
}

.cmd-palette-input {
  flex: 1;
  border: none;
  background: transparent;
  font-size: 1.05rem;
  font-family: var(--font-sans);
  color: inherit;
  outline: none;
}

.cmd-palette-badge {
  font-size: 0.72rem;
  font-family: var(--font-mono);
  background: #f1f5f9;
  color: #64748b;
  padding: 2px 8px;
  border-radius: 6px;
  border: 1px solid #e2e8f0;
}

[data-theme="dark"] .cmd-palette-badge {
  background: #1e293b;
  color: #94a3b8;
  border-color: #334155;
}

.cmd-palette-results {
  max-height: 400px;
  overflow-y: auto;
  padding: 8px 6px;
}

.cmd-group {
  margin-bottom: 10px;
}

.cmd-group:last-child {
  margin-bottom: 0;
}

.cmd-group-title {
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #94a3b8;
  padding: 6px 12px 4px 12px;
}

.cmd-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 12px;
  border-radius: 8px;
  text-decoration: none;
  color: inherit;
  cursor: pointer;
  transition: background 0.1s ease;
}

.cmd-item:hover,
.cmd-item.selected {
  background: #f1f5f9;
}

[data-theme="dark"] .cmd-item:hover,
[data-theme="dark"] .cmd-item.selected {
  background: #1e293b;
}

.cmd-item-icon {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.95rem;
  flex-shrink: 0;
}

.cmd-item-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.cmd-item-title {
  font-size: 0.9rem;
  font-weight: 600;
  line-height: 1.25;
  color: var(--color-text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.cmd-item-desc {
  font-size: 0.76rem;
  color: #64748b;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

[data-theme="dark"] .cmd-item-desc {
  color: #94a3b8;
}

.cmd-item-shortcut {
  font-size: 0.7rem;
  font-family: var(--font-mono);
  background: #f8fafc;
  color: #64748b;
  padding: 2px 6px;
  border-radius: 4px;
  border: 1px solid #e2e8f0;
}

[data-theme="dark"] .cmd-item-shortcut {
  background: #0f172a;
  color: #94a3b8;
  border-color: #1e293b;
}

.cmd-palette-footer {
  padding: 10px 16px;
  background: #f8fafc;
  border-top: 1px solid #e2e8f0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 0.75rem;
  color: #64748b;
}

[data-theme="dark"] .cmd-palette-footer {
  background: #0f172a;
  border-top-color: #1f2937;
  color: #94a3b8;
}

.cmd-kbd {
  background: #ffffff;
  border: 1px solid #cbd5e1;
  border-radius: 4px;
  padding: 1px 5px;
  font-size: 0.7rem;
  font-family: var(--font-mono);
  color: #475569;
  box-shadow: 0 1px 1px rgba(0,0,0,0.05);
  margin-right: 2px;
}

[data-theme="dark"] .cmd-kbd {
  background: #1e293b;
  border-color: #334155;
  color: #cbd5e1;
}

/* ==========================================================================
   Mobile App Native Bottom Navigation Bar (Handhelds & Tablets)
   ========================================================================== */
.mobile-bottom-nav {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 58px;
  background: #ffffff;
  border-top: 1px solid #e2e8f0;
  display: flex;
  justify-content: space-around;
  align-items: center;
  z-index: 1040;
  box-shadow: 0 -4px 12px rgba(0, 0, 0, 0.05);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

[data-theme="dark"] .mobile-bottom-nav {
  background: #0f172a;
  border-top-color: #1e293b;
  box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.3);
}

.mobile-nav-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: #64748b;
  text-decoration: none;
  font-size: 0.68rem;
  font-weight: 600;
  gap: 2px;
  flex: 1;
  padding: 6px 0;
  transition: color 0.15s ease;
}

.mobile-nav-item i {
  font-size: 1.15rem;
}

.mobile-nav-item:hover,
.mobile-nav-item.active {
  color: #2563eb;
}

[data-theme="dark"] .mobile-nav-item {
  color: #94a3b8;
}

[data-theme="dark"] .mobile-nav-item:hover,
[data-theme="dark"] .mobile-nav-item.active {
  color: #38bdf8;
}

@media (max-width: 991.98px) {
  .app-content {
    padding-bottom: 72px !important;
  }
}