@charset "UTF-8";
/* ==========================================================================
   MediCore HMIS - Shared application CSS
   Builds on Bootstrap 4.6.2; overrides where the Clinical Precision design
   diverges. Loaded after bootstrap.css and _tokens.css.
   ========================================================================== */

/* ---------- App shell ---------- */
.app-shell { display: flex; min-height: 100vh; width: 100%; }
.app-shell.fixed-screen { height: 100vh; overflow: hidden; }

/* ---------- Sidebar ---------- */
.sidebar {
  position: fixed;
  top: 0; left: 0;
  width: var(--sidebar-w);
  height: 100vh;
  z-index: 1040;
  display: flex;
  flex-direction: column;
  background-color: var(--surface);
  border-right: 1px solid var(--outline-variant);
  box-shadow: var(--shadow-1);
  transition: transform var(--transition-base);
}
.sidebar .brand { padding: var(--space-lg) var(--space-md); display: flex; align-items: center; gap: var(--space-sm); }
.sidebar .brand .logo-box {
  width: 40px; height: 40px;
  border-radius: 50%;
  overflow: hidden;
  flex-shrink: 0;
}
.sidebar .brand .logo-box img { width: 100%; height: 100%; object-fit: cover; }
.sidebar .brand h1 { margin: 0; font-size: 14px; font-weight: 700; color: var(--primary); line-height: 1.1; }
.sidebar .brand .branch { font-size: 10px; color: var(--secondary); display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.sidebar .nav-scroll { flex: 1 1 auto; overflow-y: auto; padding: var(--space-sm) var(--space-md); }
.sidebar .nav-label { font-size: 10px; font-weight: 700; color: var(--outline); text-transform: uppercase; letter-spacing: 0.14em; padding: var(--space-md) var(--space-md) var(--space-sm); }
.sidebar .nav-link {
  display: flex; align-items: center; gap: var(--space-md);
  padding: 12px var(--space-md);
  color: var(--on-surface-variant);
  border-radius: var(--radius-md);
  border-left: 4px solid transparent;
  transition: all var(--transition-fast);
  font-size: var(--fs-body-md);
  margin-bottom: 2px;
}
.sidebar .nav-link i { width: 24px; text-align: center; font-size: 20px; }
.sidebar .nav-link:hover { background-color: var(--surface-container-high); color: var(--on-surface); }
.sidebar .nav-link.active {
  color: var(--primary);
  font-weight: 700;
  background-color: rgba(0, 55, 176, 0.08);
  border-left-color: var(--primary);
}
.sidebar .nav-link .dot { width: 6px; height: 6px; border-radius: var(--radius-full); display: inline-block; }
.sidebar .nav-sublink { display: flex; align-items: center; gap: var(--space-md); padding: 8px var(--space-md); color: var(--on-surface-variant); font-size: var(--fs-body-md); border-radius: var(--radius-md); }
.sidebar .nav-sublink:hover { background-color: var(--surface-container-high); }
.sidebar .nav-sublink .dot { width: 6px; height: 6px; border-radius: var(--radius-full); display: inline-block; }

.sidebar .sidebar-cta { margin: var(--space-md); }
.sidebar .sidebar-footer { padding: 0; border-top: 1px solid var(--outline-variant); }

.sidebar-user {
  display: flex; align-items: center; gap: var(--space-sm);
  padding: var(--space-md);
  cursor: pointer;
  position: relative;
}
.sidebar-user:hover { background-color: var(--surface-container); }
.sidebar-user .avatar { width: 40px; height: 40px; border-radius: var(--radius-full); background-color: var(--primary-fixed-dim); overflow: hidden; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.sidebar-user .avatar img { width: 100%; height: 100%; object-fit: cover; }
.sidebar-user .meta { min-width: 0; flex: 1; }
.sidebar-user .meta p { margin: 0; font-weight: 700; font-size: var(--fs-label-md); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sidebar-user .meta small { font-size: 10px; color: var(--on-surface-variant); display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sidebar-user .sidebar-user-chevron { font-size: 14px; color: var(--outline); transition: transform var(--transition-fast); }
.sidebar-user.is-open .sidebar-user-chevron { transform: rotate(180deg); }

/* Sidebar user popup */
.sidebar-user-popup {
  display: none;
  position: absolute;
  bottom: calc(100% + 8px);
  left: var(--space-md);
  right: var(--space-md);
  min-width: 200px;
  background-color: var(--surface-container-lowest);
  border: 1px solid var(--outline-variant);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-float);
  padding: var(--space-sm) 0;
  z-index: 1070;
}
.sidebar-user.is-open .sidebar-user-popup { display: block; }
.sidebar-user-popup .popup-item {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  padding: 10px var(--space-md);
  color: var(--on-surface-variant);
  font-size: var(--fs-body-md);
  transition: background var(--transition-fast);
  text-decoration: none;
}
.sidebar-user-popup .popup-item:hover { background-color: var(--surface-container); color: var(--on-surface); text-decoration: none; }
.sidebar-user-popup .popup-item i { width: 20px; text-align: center; font-size: 16px; }
.sidebar-user-popup .popup-divider { height: 1px; background-color: var(--outline-variant); margin: 4px var(--space-sm); }

/* ---------- Main + Topbar ---------- */
.main { flex: 1 1 auto; margin-left: var(--sidebar-w); display: flex; flex-direction: column; min-width: 0; }
.main.has-rightpanel { margin-right: var(--rightpanel-w); }
.main-content { flex: 1 1 auto; padding: var(--space-md); overflow-y: auto; }
.main-content.with-topbar { padding-top: var(--space-md); }

.topbar {
  position: sticky;
  top: 0;
  z-index: 1030;
  height: var(--topbar-h);
  background-color: var(--surface-container-lowest);
  border-bottom: 1px solid var(--outline-variant);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px var(--space-lg);
  gap: var(--space-md);
}
.topbar .topbar-title { font-size: var(--fs-title-md); font-weight: 700; color: var(--on-surface); line-height: 1.1; }
.topbar .topbar-sub { font-size: 11px; font-weight: 700; color: var(--secondary); text-transform: uppercase; letter-spacing: 0.05em; }
.topbar .search-wrap { position: relative; flex: 1 1 auto; max-width: 420px; margin-left: var(--space-md); }
.topbar .search-wrap i { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: var(--outline); font-size: 20px; }
.topbar .search-wrap .form-control { padding-left: 42px; border-radius: var(--radius-full); background-color: var(--surface-container); border: 1px solid transparent; height: 34px; }
.topbar .search-wrap .form-control:focus { background-color: var(--surface-container-lowest); border-color: var(--primary); box-shadow: 0 0 0 3px rgba(0, 55, 176, 0.15); }
.topbar .icon-btn { width: 40px; height: 40px; border-radius: var(--radius-full); border: none; background: transparent; color: var(--on-surface-variant); display: inline-flex; align-items: center; justify-content: center; position: relative; transition: background var(--transition-fast); }
.topbar .icon-btn i { font-size: 18px; }
.topbar .icon-btn:hover { background-color: var(--surface-container); color: var(--on-surface); }
.topbar .icon-btn .badge-dot { position: absolute; top: 8px; right: 8px; width: 8px; height: 8px; border-radius: var(--radius-full); background: var(--error); border: 1px solid var(--surface-container-lowest); }
.topbar .user-block { display: flex; align-items: center; gap: var(--space-sm); padding-left: var(--space-md); border-left: 1px solid var(--outline-variant); margin-left: var(--space-sm); }
.topbar .user-block .avatar { width: 40px; height: 40px; border-radius: var(--radius-full); overflow: hidden; background-color: var(--primary-fixed); border: 2px solid var(--surface-container-highest); }
.topbar .user-block .avatar img { width: 100%; height: 100%; object-fit: cover; }

/* ---------- Right info panel ---------- */
.right-panel {
  position: fixed;
  top: var(--topbar-h);
  right: 0;
  width: var(--rightpanel-w);
  height: calc(100vh - var(--topbar-h));
  overflow-y: auto;
  padding: var(--space-lg);
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
}

/* ---------- Cards ---------- */
.card-soft {
  background-color: var(--surface-container-lowest);
  border: 1px solid rgba(196, 197, 215, 0.4);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-card);
}
.card-soft.accent-left { border-left: 4px solid var(--primary); }
.card-soft.accent-left-error { border-left: 4px solid var(--error); }
.card-soft.accent-left-secondary { border-left: 4px solid var(--secondary); }
.card-soft.accent-left-tertiary { border-left: 4px solid var(--tertiary); }
.card-soft .card-head { padding: var(--space-md) var(--space-lg); border-bottom: 1px solid rgba(196, 197, 215, 0.4); display: flex; align-items: center; justify-content: space-between; gap: var(--space-sm); }
.card-soft .card-head h3 { margin: 0; font-size: var(--fs-title-md); font-weight: 600; color: var(--on-surface); }
.card-soft .card-body { padding: var(--space-lg); }
.card-soft .card-foot { padding: var(--space-md) var(--space-lg); border-top: 1px solid rgba(196, 197, 215, 0.4); }

.hover-lift { transition: transform var(--transition-fast), box-shadow var(--transition-fast); }
.hover-lift:hover { transform: translateY(-2px); box-shadow: var(--shadow-float); }

/* ---------- KPI cards ---------- */
.kpi-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-md); }
.kpi-card {
  background-color: var(--surface-container-lowest);
  border: 1px solid rgba(196, 197, 215, 0.4);
  border-left: 4px solid var(--primary);
  border-radius: var(--radius-md);
  padding: var(--space-md);
  display: flex; align-items: center; gap: var(--space-md);
  box-shadow: var(--shadow-card);
}
.kpi-card.accent-error { border-left-color: var(--error); }
.kpi-card.accent-secondary { border-left-color: var(--secondary); }
.kpi-card.accent-tertiary { border-left-color: var(--tertiary); }
.kpi-card .icon-box { width: 48px; height: 48px; border-radius: var(--radius-md); display: flex; align-items: center; justify-content: center; font-size: 24px; flex-shrink: 0; }
.kpi-card .icon-box i { font-size: 28px; }
.kpi-card .label { font-size: var(--fs-label-md); font-weight: 500; color: var(--outline); letter-spacing: 0.04em; text-transform: none; margin: 0; }
.kpi-card .value { font-size: var(--fs-headline-md); font-weight: 700; color: var(--on-surface); line-height: 1.1; }
.kpi-card .delta { font-size: 11px; font-weight: 700; }
.kpi-card .delta.up { color: var(--secondary); }
.kpi-card .delta.down { color: var(--error); }

/* ---------- Pills / badges / status ---------- */
.status-pill {
  display: inline-flex; align-items: center; gap: var(--space-xs);
  padding: 4px 10px;
  border-radius: var(--radius-full);
  font-size: var(--fs-label-sm);
  font-weight: 700;
  letter-spacing: 0.04em;
  line-height: 1;
}
.status-pill .pulse { width: 6px; height: 6px; border-radius: var(--radius-full); display: inline-block; }
.status-pill.pill-error { background-color: var(--error-container); color: var(--on-error-container); }
.status-pill.pill-error .pulse { background-color: var(--error); animation: pulse 1.5s ease-in-out infinite; }
.status-pill.pill-secondary { background-color: var(--secondary-container); color: var(--on-secondary-container); }
.status-pill.pill-primary { background-color: var(--primary); color: var(--on-primary); }
.status-pill.pill-neutral { background-color: var(--surface-container); color: var(--on-surface-variant); }
.status-pill.pill-warning { background-color: rgba(217, 119, 6, 0.15); color: #92400e; }
.status-pill.pill-info { background-color: var(--surface-container-high); color: var(--primary); }
.status-pill.pill-success { background-color: #d1fae5; color: #065f46; }

.badge-count { display: inline-flex; align-items: center; padding: 2px 8px; border-radius: var(--radius-full); font-size: 11px; font-weight: 700; background: var(--primary); color: var(--on-primary); }
.badge-count.badge-live { background: var(--error); }
.badge-count.badge-new { background: var(--secondary); color: var(--on-secondary); }

@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } }

/* ---------- Buttons (BS4 overrides) ---------- */
.btn { border-radius: var(--radius-md); font-weight: 600; transition: all var(--transition-fast); }
.btn-primary { background-color: var(--primary); border-color: var(--primary); }
.btn-primary:hover { background-color: var(--primary-container); border-color: var(--primary-container); }
.btn-secondary-teal { background-color: var(--secondary); border-color: var(--secondary); color: var(--on-secondary); }
.btn-outline-soft { background-color: transparent; border: 1px solid var(--outline); color: var(--on-surface-variant); }
.btn-outline-soft:hover { background-color: var(--surface-container); color: var(--on-surface); }
.btn-error { background-color: var(--error); border-color: var(--error); color: var(--on-error); }
.btn-error:hover { background-color: #8a1313; border-color: #8a1313; color: var(--on-error); }
.btn-pill { border-radius: var(--radius-full); }
.btn-press { transition: transform 80ms ease; }
.btn-press:active { transform: scale(0.98); }

/* ---------- Forms ---------- */
.form-control-soft {
  border: 1px solid var(--outline-variant);
  border-radius: var(--radius-md);
  padding: 10px var(--space-md);
  background-color: var(--surface-container-lowest);
  font-size: var(--fs-body-md);
  transition: all var(--transition-fast);
}
.form-control-soft:focus { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(0, 55, 176, 0.15); outline: none; }

.form-control-clinical {
  border: 1px solid var(--outline-variant);
  border-radius: var(--radius-sm);
  padding: 10px 14px;
  font-size: var(--fs-body-md);
  background-color: var(--surface-container-lowest);
  color: var(--on-surface);
  width: 100%;
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}
.form-control-clinical:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(0, 55, 176, 0.15);
  outline: none;
}
.form-control-clinical::placeholder { color: var(--outline); opacity: 0.7; }
.form-control-clinical.readonly,
.form-control-clinical[readonly] { background-color: var(--surface-container); cursor: default; }
select.form-control-clinical { appearance: auto; }
textarea.form-control-clinical { resize: vertical; min-height: 80px; }
.form-control-clinical.form-control-sm { padding: 6px 10px; font-size: var(--fs-label-md); }

/* Input group fixes — form-control-clinical inside input-group */
.input-group > .form-control-clinical {
  position: relative;
  flex: 1 1 auto;
  width: 1%;
  min-width: 0;
  margin-bottom: 0;
}
.input-group > .form-control-clinical:not(:last-child) {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}
.input-group > .form-control-clinical:not(:first-child) {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}

/* Input group button radius fix */
.input-group-append .btn { border-top-left-radius: 0; border-bottom-left-radius: 0; }
.input-group-prepend .btn { border-top-right-radius: 0; border-bottom-right-radius: 0; }


/* ---------- Tables ---------- */
.table-clinical { width: 100%; border-collapse: collapse; background-color: var(--surface-container-lowest); }
.table-clinical thead { background-color: var(--surface-container-low); }
.table-clinical thead th { padding: 12px var(--space-lg); font-size: var(--fs-label-md); font-weight: 500; color: var(--outline); text-transform: uppercase; letter-spacing: 0.06em; border-bottom: 1px solid var(--outline-variant); white-space: nowrap; }
.table-clinical tbody td { padding: var(--space-md) var(--space-lg); border-bottom: 1px solid rgba(196, 197, 215, 0.4); font-size: var(--fs-body-md); vertical-align: middle; }
.table-clinical tbody tr { transition: background var(--transition-fast); }
.table-clinical tbody tr:hover { background-color: rgba(0, 55, 176, 0.04); cursor: pointer; }
.table-clinical tbody tr:last-child td { border-bottom: none; }
.table-clinical .row-primary-id { font-weight: 700; color: var(--primary); }

/* ---------- Avatar / initials ---------- */
.avatar { width: 40px; height: 40px; border-radius: var(--radius-full); overflow: hidden; background-color: var(--primary); display: inline-flex; align-items: center; justify-content: center; color: #e2e8f0; font-weight: 700; flex-shrink: 0; }
.avatar img { width: 100%; height: 100%; object-fit: cover; }
.avatar.sm { width: 32px; height: 32px; }
.avatar.lg { width: 48px; height: 48px; }
.avatar.with-status { position: relative; }
.avatar .status-dot { position: absolute; bottom: 0; right: 0; width: 12px; height: 12px; border-radius: var(--radius-full); border: 2px solid var(--surface-container-lowest); }
.avatar .status-dot.online { background: var(--secondary); }
.avatar .status-dot.busy { background: var(--error); }

/* ---------- Progress bars (clinical load) ---------- */
.progress-clinical { height: 8px; border-radius: var(--radius-full); background-color: var(--surface-container); overflow: hidden; }
.progress-clinical .bar { height: 100%; background-color: var(--primary); border-radius: var(--radius-full); transition: width 400ms ease; }
.progress-clinical .bar.bar-secondary { background-color: var(--secondary); }
.progress-clinical .bar.bar-error { background-color: var(--error); }
.progress-clinical .bar.bar-warning { background-color: #d97706; }

.progress-mini { height: 6px; border-radius: var(--radius-full); background-color: var(--surface-container); overflow: hidden; }
.progress-mini .bar { height: 100%; background-color: var(--primary); }

/* ---------- Timeline / activity ---------- */
.timeline { list-style: none; margin: 0; padding: 0; }
.timeline li { position: relative; padding-left: 28px; padding-bottom: var(--space-md); }
.timeline li::before { content: ''; position: absolute; left: 6px; top: 4px; width: 10px; height: 10px; border-radius: var(--radius-full); background: var(--primary); border: 2px solid var(--surface-container-lowest); }
.timeline li::after { content: ''; position: absolute; left: 10px; top: 14px; bottom: 0; width: 2px; background: rgba(196, 197, 215, 0.5); }
.timeline li:last-child::after { display: none; }

/* ---------- FAB ---------- */
.fab { position: fixed; right: var(--space-lg); bottom: var(--space-lg); width: 56px; height: 56px; border-radius: var(--radius-full); background: var(--primary); color: var(--on-primary); display: inline-flex; align-items: center; justify-content: center; font-size: 22px; border: none; box-shadow: var(--shadow-primary); z-index: 1050; transition: transform var(--transition-fast); }
.fab:active { transform: scale(0.9); }
.fab.fab-error { background: var(--error); }

/* ---------- Scrollbar utilities ---------- */
.custom-scrollbar::-webkit-scrollbar { width: 6px; height: 6px; }
.custom-scrollbar::-webkit-scrollbar-track { background: transparent; }
.custom-scrollbar::-webkit-scrollbar-thumb { background: var(--outline-variant); border-radius: var(--radius-full); }
.scrollbar-hide::-webkit-scrollbar { display: none; }
.scrollbar-hide { -ms-overflow-style: none; scrollbar-width: none; }

/* ---------- Dividers / misc ---------- */
.divider-y > * + * { border-left: 1px solid var(--outline-variant); }
.vdividers { display: flex; align-items: center; gap: var(--space-md); }
.vdividers > * + * { padding-left: var(--space-md); border-left: 1px solid var(--outline-variant); }

/* ---------- Sidebar collapsed (icon-only) ---------- */
.sidebar.collapsed { width: 72px; }
.sidebar.collapsed .brand h1,
.sidebar.collapsed .brand .branch { display: none; }
.sidebar.collapsed .brand { justify-content: center; padding: var(--space-md) 0; }
.sidebar.collapsed .nav-link span { display: none; }
.sidebar.collapsed .nav-link { justify-content: center; padding: 12px 0; }
.sidebar.collapsed .nav-link i { width: auto; margin: 0; }
.sidebar.collapsed .nav-label { display: none; }
.sidebar.collapsed .sidebar-cta { display: none; }
.sidebar.collapsed .sidebar-user .meta,
.sidebar.collapsed .sidebar-user .sidebar-user-chevron { display: none; }
.sidebar.collapsed .sidebar-user { justify-content: center; }
.sidebar.collapsed .sidebar-user .avatar { width: 36px; height: 36px; }
.sidebar.collapsed .sidebar-user-popup { display: none !important; }
.main.sidebar-collapsed { margin-left: 72px; }

/* Dark mode class (kept for parity with source, optional) */
.dark .sidebar { background-color: var(--inverse-surface); }
.dark .sidebar .nav-link { color: var(--outline-variant); }
.dark .sidebar .nav-link.active { color: var(--inverse-primary); }

/* ==========================================================================
   DataTables universal overrides (applies to all pages using DataTables)
   ========================================================================== */
.dataTables_wrapper .dataTables_length select {
    width: 90px !important;
    border: 1px solid var(--outline-variant);
    border-radius: var(--radius-sm);
    padding: 2px 4px;
}
.dataTables_wrapper .dataTables_filter input {
    border: 1px solid var(--outline-variant);
    border-radius: var(--radius-sm);
    padding: 4px 8px;
    margin-left: 8px;
}
.dataTables_wrapper .dt-buttons .btn {
    font-size: var(--fs-label-md);
    padding: 4px 10px;
    margin-right: 4px;
}
table.dataTable thead th {
    background: var(--surface-container-low);
    border-bottom: 2px solid var(--outline-variant);
    padding: 10px 12px;
    font-size: var(--fs-label-md);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--on-surface-variant);
}
table.dataTable tbody td {
    padding: 8px 12px;
    border-bottom: 1px solid rgba(196, 197, 215, 0.3);
    vertical-align: middle;
    color: var(--on-surface);
}
table.dataTable tbody tr:hover {
    background: rgba(0, 55, 176, 0.03);
}

/* ---------- Modal overrides for Clinical Precision ---------- */
.modal-content {
  border-radius: var(--radius-lg);
  border: 1px solid var(--outline-variant);
  box-shadow: var(--shadow-float);
  background-color: var(--surface-container-lowest);
}
.modal-header {
  border-bottom: 1px solid var(--outline-variant);
  padding: var(--space-md) var(--space-lg);
  background-color: var(--surface-container-low);
  align-items: center;
}
.modal-header .modal-title {
  margin: 0;
  font-size: var(--fs-title-md);
  font-weight: 700;
  color: var(--on-surface);
  display: flex;
  align-items: center;
  gap: var(--space-xs);
}
.modal-header .close {
  padding: var(--space-md) var(--space-lg);
  margin: calc(-1 * var(--space-md)) calc(-1 * var(--space-lg)) calc(-1 * var(--space-md)) auto;
  color: var(--on-surface-variant);
  opacity: 0.5;
  transition: opacity var(--transition-fast);
}
.modal-header .close:hover {
  opacity: 1;
}
.modal-body {
  padding: var(--space-lg);
}
.modal-footer {
  border-top: 1px solid var(--outline-variant);
  padding: var(--space-md) var(--space-lg);
  background-color: var(--surface-container-low);
}
.modal-footer .btn {
  font-size: 12px !important;
  font-weight: 400 !important;
  padding-top: 8px !important;
  padding-bottom: 8px !important;
}

/* ==========================================================================
   Responsive & Adaptive Viewport Overrides
   ========================================================================== */

/* Typography & Spacing Scaling */
@media (max-width: 1024px) {
  :root {
    --fs-display-lg: 36px;
    --fs-headline-lg: 26px;
    --fs-headline-md: 20px;
    --fs-title-lg: 18px;
    --fs-title-md: 15px;
    --fs-body-lg: 15px;
    --fs-body-md: 13px;
    --fs-label-md: 11px;
    --fs-label-sm: 10px;
  }
}

@media (max-width: 767.98px) {
  :root {
    --fs-display-lg: 28px;
    --fs-headline-lg: 22px;
    --fs-headline-md: 18px;
    --fs-title-lg: 16px;
    --fs-title-md: 14px;
    --fs-body-lg: 14px;
    --fs-body-md: 12px;
    --fs-label-md: 10px;
    --fs-label-sm: 9px;
    --space-md: 12px;
    --space-lg: 16px;
    --space-xl: 24px;
  }
  .main-content {
    padding: var(--space-md) !important;
  }
}

/* Sidebar & Navigation Responsiveness */
@media (min-width: 768px) and (max-width: 1024px) {
  :root {
    --sidebar-w: 70px;
  }
  .sidebar {
    width: 70px !important;
    align-items: center;
  }
  .main {
    margin-left: 70px !important;
  }
  /* Nav Brand: Logo only, hide text labels */
  .sidebar .brand {
    justify-content: center !important;
    padding: var(--space-md) 0 !important;
  }
  .sidebar .brand > div:not(.logo-box),
  .sidebar .brand h1,
  .sidebar .brand .branch {
    display: none !important;
  }
  /* Menu Details Section: Icons only, hide text labels */
  .sidebar .nav-scroll {
    padding: var(--space-sm) 4px !important;
    width: 100%;
  }
  .sidebar .nav-label {
    display: none !important;
  }
  .sidebar .nav-link {
    justify-content: center !important;
    padding: 12px 0 !important;
    border-left: none !important;
    border-bottom: 3px solid transparent !important;
  }
  .sidebar .nav-link.active {
    border-left-color: transparent !important;
    border-bottom-color: var(--primary) !important;
  }
  .sidebar .nav-link span {
    display: none !important;
  }
  .sidebar .nav-link i {
    margin: 0 !important;
    font-size: 20px !important;
  }
  .sidebar .nav-sublink {
    justify-content: center !important;
    padding: 8px 0 !important;
  }
  .sidebar .nav-sublink span:not(.dot) {
    display: none !important;
  }
  .sidebar .sidebar-cta {
    display: none !important;
  }
  /* Sidebar Footer User Section: Avatar only, hide text meta & chevron */
  .sidebar-user {
    justify-content: center !important;
    padding: var(--space-md) 0 !important;
  }
  .sidebar-user .meta,
  .sidebar-user .sidebar-user-chevron {
    display: none !important;
  }
  .sidebar-user-popup {
    left: 70px !important;
    bottom: 8px !important;
  }
}

@media (max-width: 767.98px) {
  .sidebar {
    position: fixed;
    top: 0; left: 0;
    width: var(--sidebar-w) !important;
    height: 100vh;
    z-index: 1040;
    transform: translateX(-100%);
    transition: transform var(--transition-base);
  }
  .sidebar.mobile-show {
    transform: translateX(0);
  }
  .main {
    margin-left: 0 !important;
  }
  .main.has-rightpanel {
    margin-right: 0 !important;
  }
  .right-panel {
    position: static;
    width: 100% !important;
    height: auto !important;
  }
  .sidebar-overlay {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 1039;
    display: none;
  }
  .sidebar-overlay.show {
    display: block;
  }
}

/* KPI & Summary Cards Layout */
@media (max-width: 1024px) {
  .kpi-grid {
    grid-template-columns: repeat(4, 1fr) !important;
  }
  .recep-page .row.mb-4 > [class*="col-"],
  .recep-page .page-header + .row > [class*="col-"] {
    flex: 0 0 25% !important;
    max-width: 25% !important;
  }
}

@media (max-width: 767.98px) {
  .kpi-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }
  .recep-page .row.mb-4 > [class*="col-"],
  .recep-page .page-header + .row > [class*="col-"] {
    flex: 0 0 50% !important;
    max-width: 50% !important;
    margin-bottom: var(--space-md) !important;
  }
}

/* Responsive Pagination & Pagers */
.pagination, .dataTables_paginate {
  display: flex !important;
  flex-wrap: wrap !important;
  justify-content: center !important;
  margin-top: var(--space-sm) !important;
  gap: 4px !important;
}
.pagination .page-item, .dataTables_paginate .paginate_button {
  margin: 0 !important;
}
.pagination .page-link, .dataTables_paginate .paginate_button {
  padding: 6px 10px !important;
  font-size: 12px !important;
  border-radius: var(--radius-sm) !important;
}

/* Page Header - Full-Width Cover Banner */
.page-header, .page-header-settings {
  margin-left: calc(-1 * var(--space-lg)) !important;
  margin-right: calc(-1 * var(--space-lg)) !important;
  margin-top: calc(-1 * var(--space-lg)) !important;
  padding: var(--space-md) var(--space-lg) !important;
  background: linear-gradient(to right, var(--surface-container-low), var(--surface-container-lowest)) !important;
  border-bottom: 1px solid var(--outline-variant) !important;
  margin-bottom: var(--space-lg) !important;
}

@media (max-width: 767.98px) {
  .page-header, .page-header-settings {
    margin-left: calc(-1 * var(--space-md)) !important;
    margin-right: calc(-1 * var(--space-md)) !important;
    margin-top: calc(-1 * var(--space-md)) !important;
    padding: var(--space-md) var(--space-md) !important;
    margin-bottom: var(--space-md) !important;
  }
/* Ensure main-content page content is scrollable */
.main-content {
  flex: 1 1 auto;
  overflow-y: auto !important;
  overflow-x: hidden;
  display: flex;
  flex-direction: column;
}

/* Sticky Page Footer — 100% width, distinct top border & sticky bottom */
footer, .sticky-footer, .admin-footer {
  position: sticky;
  bottom: 0;
  z-index: 100;
  margin-top: auto !important;
  margin-left: calc(-1 * var(--space-lg)) !important;
  margin-right: calc(-1 * var(--space-lg)) !important;
  margin-bottom: 0 !important;
  padding: 8px var(--space-lg) !important;
  width: calc(100% + (2 * var(--space-lg))) !important;
  background: var(--surface-container-lowest, #ffffff) !important;
  border-top: 2px solid var(--outline-variant, #cbd5e1) !important;
  box-shadow: 0 -4px 12px rgba(0, 0, 0, 0.05) !important;
}

@media (max-width: 767.98px) {
  footer, .sticky-footer, .admin-footer {
    margin-left: calc(-1 * var(--space-md)) !important;
    margin-right: calc(-1 * var(--space-md)) !important;
    padding: 8px var(--space-md) !important;
    width: calc(100% + (2 * var(--space-md))) !important;
  }
}

/* Centered & Fullscreen Lab Attachment Viewer Modal */
#labAttachmentModalDialog {
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}
#labAttachmentModalDialog.modal-fullscreen {
  max-width: 100vw !important;
  width: 100vw !important;
  height: 100vh !important;
  margin: 0 !important;
}
#labAttachmentModalDialog.modal-fullscreen .modal-content {
  height: 100vh !important;
  border-radius: 0 !important;
}
#labAttachmentModalDialog.modal-fullscreen #labAttachmentModalBody {
  max-height: calc(100vh - 110px) !important;
  height: calc(100vh - 110px) !important;
}