/**
 * Kalpak EMR — Global UI theme (presentational overrides only)
 * Loads after AdminLTE 3.2 / Bootstrap 4. Does not alter markup, IDs, or JS behavior.
 */

/* --------------------------------------------------------------------------
   Design tokens
   -------------------------------------------------------------------------- */
:root {
  --kalpak-primary: #2563eb;
  --kalpak-primary-hover: #1d4ed8;
  --kalpak-primary-soft: #dbeafe;
  --kalpak-success: #16a34a;
  --kalpak-warning: #f59e0b;
  --kalpak-danger: #dc2626;
  --kalpak-info: #0ea5e9;
  --kalpak-bg: #f8fafc;
  --kalpak-surface: #ffffff;
  --kalpak-sidebar: #111827;
  --kalpak-sidebar-hover: #1f2937;
  --kalpak-sidebar-active: #2563eb;
  --kalpak-text: #0f172a;
  --kalpak-text-muted: #64748b;
  --kalpak-border: #e2e8f0;
  --kalpak-radius: 12px;
  --kalpak-radius-sm: 10px;
  --kalpak-shadow: 0 1px 3px rgba(15, 23, 42, 0.08), 0 1px 2px rgba(15, 23, 42, 0.04);
  --kalpak-shadow-md: 0 4px 12px rgba(15, 23, 42, 0.1);
  --kalpak-font: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --blue: var(--kalpak-primary);
  --primary: var(--kalpak-primary);
  --success: var(--kalpak-success);
  --warning: var(--kalpak-warning);
  --danger: var(--kalpak-danger);
  --info: var(--kalpak-info);
}

/* --------------------------------------------------------------------------
   Typography
   -------------------------------------------------------------------------- */
body,
.wrapper,
.main-header,
.main-sidebar,
.content-wrapper,
.modal,
.dropdown-menu {
  font-family: var(--kalpak-font);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  color: var(--kalpak-text);
  font-size: 0.9375rem;
  line-height: 1.5;
}

h1, .h1 { font-size: 1.75rem; font-weight: 700; letter-spacing: -0.02em; }
h2, .h2 { font-size: 1.5rem; font-weight: 700; letter-spacing: -0.02em; }
h3, .h3 { font-size: 1.25rem; font-weight: 600; }
h4, .h4 { font-size: 1.125rem; font-weight: 600; }
h5, .h5 { font-size: 1rem; font-weight: 600; }

.text-muted { color: var(--kalpak-text-muted) !important; }

.fw-bold { font-weight: 700 !important; }

/* --------------------------------------------------------------------------
   Page shell & content area
   -------------------------------------------------------------------------- */
.wrapper,
.content-wrapper {
  background-color: var(--kalpak-bg) !important;
}

.content-wrapper {
  padding: 1.25rem 1.5rem !important;
}

@media (max-width: 767.98px) {
  .content-wrapper {
    padding: 1rem !important;
  }
}

/* --------------------------------------------------------------------------
   Top navbar
   -------------------------------------------------------------------------- */
.main-header.navbar {
  border-bottom: 1px solid var(--kalpak-border);
  box-shadow: var(--kalpak-shadow);
  min-height: 3.25rem;
  padding-top: 0.35rem;
  padding-bottom: 0.35rem;
}

/* EMR shell owns topbar metrics — avoid double padding / misaligned controls */
body.emr-app .main-header.navbar {
  min-height: unset;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

.main-header.navbar-white {
  background-color: var(--kalpak-surface) !important;
}

.main-header .navbar-brand {
  font-weight: 700;
  font-size: 1.05rem;
  color: var(--kalpak-text);
}

.main-header .nav-link {
  padding: 0.5rem 0.65rem;
  border-radius: var(--kalpak-radius-sm);
  transition: background-color 0.15s ease, color 0.15s ease;
}

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

.main-header .form-control-sm {
  border-radius: var(--kalpak-radius-sm);
  border-color: var(--kalpak-border);
}

.main-header .btn-outline-secondary {
  border-color: var(--kalpak-border);
  color: var(--kalpak-text-muted);
  border-radius: var(--kalpak-radius-sm);
  font-weight: 500;
}

.main-header .btn-outline-secondary:hover {
  background-color: var(--kalpak-bg);
  border-color: #cbd5e1;
  color: var(--kalpak-text);
}

.navbar-dark-mode {
  background-color: #0f172a !important;
  border-bottom-color: #1e293b !important;
}

@media (min-width: 768px) {
  .navbar-brand-tenant {
    max-width: none !important;
  }
}

/* --------------------------------------------------------------------------
   Sidebar
   -------------------------------------------------------------------------- */
.main-sidebar.sidebar-dark-primary {
  background-color: var(--kalpak-sidebar) !important;
  border-right: 1px solid rgba(255, 255, 255, 0.06);
  box-shadow: 2px 0 12px rgba(0, 0, 0, 0.12);
}

.main-sidebar .brand-link {
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  padding: 0.9rem 1rem;
}

.main-sidebar .brand-text {
  font-weight: 600 !important;
  font-size: 1rem;
  letter-spacing: 0.01em;
}

.main-sidebar .nav-sidebar > .nav-item > .nav-link {
  border-radius: var(--kalpak-radius-sm);
  margin: 2px 0.5rem;
  padding: 0.55rem 0.75rem;
  font-weight: 500;
  transition: background-color 0.15s ease, color 0.15s ease;
}

.main-sidebar .nav-sidebar > .nav-item > .nav-link:hover {
  background-color: var(--kalpak-sidebar-hover) !important;
  color: #f1f5f9;
}

.main-sidebar .nav-sidebar > .nav-item > .nav-link.active {
  background-color: var(--kalpak-sidebar-active) !important;
  color: #fff !important;
  box-shadow: 0 2px 8px rgba(37, 99, 235, 0.35);
}

.main-sidebar .nav-icon {
  font-size: 0.95rem;
  width: 1.5rem;
  margin-right: 0.35rem;
}

/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */
.main-footer {
  background-color: var(--kalpak-surface);
  border-top: 1px solid var(--kalpak-border);
  color: var(--kalpak-text-muted);
  font-size: 0.8125rem;
  padding: 0.75rem 1rem;
}

/* --------------------------------------------------------------------------
   Cards
   -------------------------------------------------------------------------- */
.card {
  border: none;
  border-radius: var(--kalpak-radius);
  box-shadow: var(--kalpak-shadow);
  margin-bottom: 1.25rem;
}

.card-header {
  background-color: var(--kalpak-surface);
  border-bottom: 1px solid var(--kalpak-border);
  border-radius: var(--kalpak-radius) var(--kalpak-radius) 0 0 !important;
  padding: 0.85rem 1.15rem;
}

.card-title {
  font-weight: 600;
  font-size: 1rem;
  margin-bottom: 0;
}

.card-body {
  padding: 1.15rem 1.25rem;
}

.card-footer {
  background-color: var(--kalpak-bg);
  border-top: 1px solid var(--kalpak-border);
  border-radius: 0 0 var(--kalpak-radius) var(--kalpak-radius);
}

.card-outline.card-primary {
  border-top: 3px solid var(--kalpak-primary);
}

.card-outline.card-secondary {
  border-top: 3px solid #94a3b8;
}

.card-outline.card-success {
  border-top: 3px solid var(--kalpak-success);
}

.card-outline.card-danger {
  border-top: 3px solid var(--kalpak-danger);
}

.card-outline.card-warning {
  border-top: 3px solid var(--kalpak-warning);
}

.card-outline.card-info {
  border-top: 3px solid var(--kalpak-info);
}

/* --------------------------------------------------------------------------
   Buttons
   -------------------------------------------------------------------------- */
.btn {
  border-radius: var(--kalpak-radius-sm);
  font-weight: 500;
  transition: background-color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease, transform 0.1s ease;
}

.btn-primary {
  background-color: var(--kalpak-primary);
  border-color: var(--kalpak-primary);
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active {
  background-color: var(--kalpak-primary-hover) !important;
  border-color: var(--kalpak-primary-hover) !important;
}

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

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

.btn-warning {
  background-color: var(--kalpak-warning);
  border-color: var(--kalpak-warning);
  color: #1e293b;
}

.btn-info {
  background-color: var(--kalpak-info);
  border-color: var(--kalpak-info);
}

.btn-outline-primary {
  color: var(--kalpak-primary);
  border-color: var(--kalpak-primary);
}

.btn-outline-primary:hover {
  background-color: var(--kalpak-primary);
  border-color: var(--kalpak-primary);
}

.btn-sm {
  padding: 0.3rem 0.65rem;
  font-size: 0.8125rem;
}

/* --------------------------------------------------------------------------
   Forms
   -------------------------------------------------------------------------- */
.form-control {
  border-radius: var(--kalpak-radius-sm);
  border-color: var(--kalpak-border);
  padding: 0.45rem 0.75rem;
  font-size: 0.9375rem;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.form-control:focus {
  border-color: var(--kalpak-primary);
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15);
}

.form-control-sm {
  border-radius: var(--kalpak-radius-sm);
}

.form-group {
  margin-bottom: 1rem;
}

label,
.col-form-label {
  font-weight: 500;
  color: var(--kalpak-text);
  margin-bottom: 0.35rem;
}

.input-group-text {
  border-color: var(--kalpak-border);
  background-color: var(--kalpak-bg);
  border-radius: var(--kalpak-radius-sm);
}

.custom-select,
select.form-control {
  border-radius: var(--kalpak-radius-sm);
}

/* --------------------------------------------------------------------------
   Tables & DataTables
   -------------------------------------------------------------------------- */
.table {
  color: var(--kalpak-text);
}

.table thead th {
  border-bottom: 2px solid var(--kalpak-border);
  font-weight: 600;
  font-size: 0.8125rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--kalpak-text-muted);
  background-color: var(--kalpak-bg);
  vertical-align: middle;
  padding: 0.65rem 0.75rem;
}

.table td {
  padding: 0.65rem 0.75rem;
  vertical-align: middle;
  border-top: 1px solid var(--kalpak-border);
}

.table-bordered {
  border: 1px solid var(--kalpak-border);
}

.table-bordered th,
.table-bordered td {
  border-color: var(--kalpak-border);
}

.table-striped tbody tr:nth-of-type(odd) {
  background-color: rgba(248, 250, 252, 0.85);
}

.table-hover tbody tr:hover {
  background-color: var(--kalpak-primary-soft);
}

.card .table {
  margin-bottom: 0;
}

.card-body.p-2 {
  padding: 0.75rem !important;
}

table.dataTable {
  border-collapse: collapse !important;
}

table.dataTable thead th {
  border-bottom: 2px solid var(--kalpak-border) !important;
}

.dataTables_wrapper .dataTables_paginate .paginate_button.current {
  background: var(--kalpak-primary) !important;
  border-color: var(--kalpak-primary) !important;
  color: #fff !important;
  border-radius: var(--kalpak-radius-sm) !important;
}

.dataTables_wrapper .dataTables_paginate .paginate_button:hover {
  background: var(--kalpak-primary-soft) !important;
  border-color: var(--kalpak-border) !important;
  color: var(--kalpak-primary) !important;
}

/* --------------------------------------------------------------------------
   Dashboard widgets
   -------------------------------------------------------------------------- */
.small-box {
  border-radius: var(--kalpak-radius);
  box-shadow: var(--kalpak-shadow-md);
  overflow: hidden;
}

.small-box .inner {
  padding: 1.15rem 1.25rem;
}

.small-box .inner h3 {
  font-weight: 700;
  font-size: 2rem;
}

.small-box .icon {
  opacity: 0.25;
}

.small-box.bg-info,
.small-box.bg-primary {
  background-color: var(--kalpak-primary) !important;
}

.small-box.bg-success {
  background-color: var(--kalpak-success) !important;
}

.small-box.bg-warning {
  background-color: var(--kalpak-warning) !important;
  color: #1e293b !important;
}

.small-box.bg-danger {
  background-color: var(--kalpak-danger) !important;
}

.dashboard-stat-link {
  color: inherit;
}

.dashboard-stat-link:hover {
  color: inherit;
  text-decoration: none;
}

.dashboard-stat-link .small-box {
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.dashboard-stat-link:hover .small-box {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(15, 23, 42, 0.15);
}

.dashboard-quick-card {
  min-height: 100px;
  border-radius: var(--kalpak-radius) !important;
  transition: box-shadow 0.15s ease, transform 0.15s ease;
}

.dashboard-quick-card:hover {
  box-shadow: var(--kalpak-shadow-md);
  transform: translateY(-1px);
}

.dashboard-skeleton {
  min-height: 90px;
  background: linear-gradient(90deg, #f1f5f9 25%, #e2e8f0 50%, #f1f5f9 75%);
  background-size: 200% 100%;
  animation: kalpak-dash-shimmer 1.2s infinite;
  border-radius: var(--kalpak-radius);
}

@keyframes kalpak-dash-shimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

.activity-row {
  font-size: 0.875rem;
  border-bottom: 1px solid var(--kalpak-border);
  padding: 0.5rem 0;
}

.activity-row:last-child {
  border-bottom: none;
}

.callout {
  border-radius: var(--kalpak-radius);
  border-left-width: 4px;
}

.callout-info {
  border-left-color: var(--kalpak-primary);
  background-color: var(--kalpak-primary-soft);
}

/* --------------------------------------------------------------------------
   Alerts, badges, modals
   -------------------------------------------------------------------------- */
.alert {
  border-radius: var(--kalpak-radius-sm);
  border: none;
  box-shadow: var(--kalpak-shadow);
}

.badge {
  font-weight: 600;
  border-radius: 6px;
  padding: 0.3em 0.55em;
}

.modal-content {
  border: none;
  border-radius: var(--kalpak-radius);
  box-shadow: 0 20px 40px rgba(15, 23, 42, 0.18);
}

.modal-header {
  border-bottom: 1px solid var(--kalpak-border);
  border-radius: var(--kalpak-radius) var(--kalpak-radius) 0 0;
}

.modal-footer {
  border-top: 1px solid var(--kalpak-border);
}

.dropdown-menu {
  border: 1px solid var(--kalpak-border);
  border-radius: var(--kalpak-radius-sm);
  box-shadow: var(--kalpak-shadow-md);
}

/* --------------------------------------------------------------------------
   Login / public AdminLTE boxes (when theme loaded on public layout)
   -------------------------------------------------------------------------- */
.login-box .card,
.register-box .card {
  border-radius: var(--kalpak-radius);
  box-shadow: var(--kalpak-shadow-md);
}

.login-card-body {
  padding: 1.5rem 1.75rem;
}

/* --------------------------------------------------------------------------
   Utilities (moved from layouts/styles.php)
   -------------------------------------------------------------------------- */
.row-highlight {
  background-color: #fef3c7 !important;
}

.global-loader {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: rgba(248, 250, 252, 0.85);
  backdrop-filter: blur(2px);
  display: flex;
  align-items: center;
  justify-content: center;
}

.dark-mode .global-loader {
  background: rgba(15, 23, 42, 0.85);
}

/* --------------------------------------------------------------------------
   Bootstrap semantic color overrides
   -------------------------------------------------------------------------- */
.bg-primary { background-color: var(--kalpak-primary) !important; }
.text-primary { color: var(--kalpak-primary) !important; }
.border-primary { border-color: var(--kalpak-primary) !important; }

.bg-success { background-color: var(--kalpak-success) !important; }
.bg-danger { background-color: var(--kalpak-danger) !important; }
.bg-warning { background-color: var(--kalpak-warning) !important; }

.badge-primary { background-color: var(--kalpak-primary); }
.badge-success { background-color: var(--kalpak-success); }
.badge-danger { background-color: var(--kalpak-danger); }
.badge-warning { background-color: var(--kalpak-warning); color: #1e293b; }

/* --------------------------------------------------------------------------
   Dark mode (AdminLTE .dark-mode)
   -------------------------------------------------------------------------- */
.dark-mode {
  --kalpak-bg: #0f172a;
  --kalpak-surface: #1e293b;
  --kalpak-text: #f1f5f9;
  --kalpak-text-muted: #94a3b8;
  --kalpak-border: #334155;
}

.dark-mode .wrapper,
.dark-mode .content-wrapper {
  background-color: var(--kalpak-bg) !important;
}

.dark-mode .main-header.navbar-white {
  background-color: var(--kalpak-surface) !important;
  border-bottom-color: var(--kalpak-border);
}

.dark-mode .card {
  background-color: var(--kalpak-surface);
  color: var(--kalpak-text);
}

.dark-mode .card-header,
.dark-mode .card-footer {
  background-color: #1e293b;
  border-color: var(--kalpak-border);
}

.dark-mode .table thead th {
  background-color: #0f172a;
  color: var(--kalpak-text-muted);
}

.dark-mode .table-striped tbody tr:nth-of-type(odd),
.dark-mode table.dataTable.table-striped tbody tr:nth-of-type(odd),
.dark-mode table.dataTable.table-striped > tbody > tr:nth-of-type(odd) {
  background-color: rgba(15, 23, 42, 0.75) !important;
  color: var(--kalpak-text);
}

.dark-mode .table-striped tbody tr:nth-of-type(even),
.dark-mode table.dataTable.table-striped tbody tr:nth-of-type(even),
.dark-mode table.dataTable.table-striped > tbody > tr:nth-of-type(even) {
  background-color: var(--kalpak-surface) !important;
  color: var(--kalpak-text);
}

.dark-mode .table tbody td,
.dark-mode .table tbody th,
.dark-mode table.dataTable tbody td,
.dark-mode table.dataTable tbody th {
  color: var(--kalpak-text);
  border-color: var(--kalpak-border) !important;
}

.dark-mode .table-hover tbody tr:hover,
.dark-mode table.dataTable.table-hover tbody tr:hover {
  background-color: rgba(37, 99, 235, 0.18) !important;
  color: var(--kalpak-text);
}

.dark-mode table.dataTable > tbody > tr.child {
  background: var(--kalpak-surface) !important;
}

.dark-mode table.dataTable > tbody > tr.child ul.dtr-details > li {
  border-bottom-color: var(--kalpak-border);
  color: var(--kalpak-text);
}

.dark-mode .form-control {
  background-color: #0f172a;
  border-color: var(--kalpak-border);
  color: var(--kalpak-text);
}

.dark-mode .form-control:focus {
  background-color: #0f172a;
  color: var(--kalpak-text);
}

.dark-mode .main-footer {
  background-color: var(--kalpak-surface);
  border-top-color: var(--kalpak-border);
  color: var(--kalpak-text-muted);
}

.dark-mode .activity-row {
  border-bottom-color: var(--kalpak-border);
}

.dark-mode .dashboard-skeleton {
  background: linear-gradient(90deg, #1e293b 25%, #334155 50%, #1e293b 75%);
  background-size: 200% 100%;
}

/* --------------------------------------------------------------------------
   Page headers & section titles
   -------------------------------------------------------------------------- */
.content-header h1,
.container-fluid > .row > .col h4,
.container-fluid h4.mb-0 {
  font-weight: 700;
  color: var(--kalpak-text);
}

.content-header {
  padding: 0 0 1rem;
}

.content-header .breadcrumb {
  background: transparent;
  padding: 0;
  margin-bottom: 0;
  font-size: 0.875rem;
}

/* Nav tabs */
.nav-tabs .nav-link {
  border-radius: var(--kalpak-radius-sm) var(--kalpak-radius-sm) 0 0;
  font-weight: 500;
  color: var(--kalpak-text-muted);
}

.nav-tabs .nav-link.active {
  color: var(--kalpak-primary);
  font-weight: 600;
}

.nav-pills .nav-link.active {
  background-color: var(--kalpak-primary);
}

/* Pagination */
.page-item.active .page-link {
  background-color: var(--kalpak-primary);
  border-color: var(--kalpak-primary);
}

.page-link {
  color: var(--kalpak-primary);
  border-radius: var(--kalpak-radius-sm);
}

/* Select2 / plugin harmonization (when present) */
.select2-container--default .select2-results__option--highlighted[aria-selected] {
  background-color: var(--kalpak-primary) !important;
}

/* --------------------------------------------------------------------------
   Responsive refinements
   -------------------------------------------------------------------------- */
@media (max-width: 991.98px) {
  .main-sidebar {
    box-shadow: 4px 0 24px rgba(0, 0, 0, 0.2);
  }
}

@media (max-width: 575.98px) {
  .card-body {
    padding: 1rem;
  }

  .small-box .inner h3 {
    font-size: 1.5rem;
  }
}

/* ========== DASHBOARD MODULE (kp-dashboard) ========== */


[x-cloak] {
  display: none !important;
}

.kp-dashboard {
  --kp-font: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --kp-primary: #2563eb;
  --kp-primary-soft: #eff6ff;
  --kp-success: #16a34a;
  --kp-success-soft: #ecfdf5;
  --kp-warning: #f59e0b;
  --kp-warning-soft: #fffbeb;
  --kp-danger: #dc2626;
  --kp-danger-soft: #fef2f2;
  --kp-info: #0ea5e9;
  --kp-info-soft: #f0f9ff;
  --kp-muted: #64748b;
  --kp-text: #0f172a;
  --kp-border: #e2e8f0;
  --kp-surface: #ffffff;
  --kp-bg: #f8fafc;
  --kp-radius: 12px;
  --kp-shadow: 0 1px 2px rgba(15, 23, 42, 0.05), 0 4px 16px rgba(15, 23, 42, 0.06);
  --kp-shadow-hover: 0 8px 24px rgba(15, 23, 42, 0.1);
  font-family: var(--kp-font);
  color: var(--kp-text);
  max-width: 1440px;
  margin: 0 auto;
  padding-bottom: 2rem;
}

/* ---- Page header ---- */
.kp-dashboard__header {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 1.5rem 2rem;
  align-items: start;
  margin-bottom: 2rem;
  padding: 1.75rem 2rem;
  background: var(--kp-surface);
  border: 1px solid var(--kp-border);
  border-radius: var(--kp-radius);
  box-shadow: var(--kp-shadow);
}

.kp-dashboard__eyebrow {
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--kp-muted);
  margin: 0 0 0.35rem;
  letter-spacing: 0.01em;
}

.kp-dashboard__title {
  font-size: 1.75rem;
  font-weight: 700;
  letter-spacing: -0.03em;
  margin: 0 0 0.5rem;
  line-height: 1.2;
  color: var(--kp-text);
}

.kp-dashboard__clinic {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.875rem;
  color: var(--kp-muted);
  margin: 0;
  padding: 0.35rem 0.75rem;
  background: var(--kp-bg);
  border-radius: 999px;
}

.kp-dashboard__clinic i {
  color: var(--kp-primary);
  font-size: 0.8rem;
}

.kp-dashboard__actions {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.5rem;
}

.kp-dashboard__refresh {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 1rem;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--kp-primary);
  background: var(--kp-primary-soft);
  border: 1px solid transparent;
  border-radius: var(--kp-radius);
  cursor: pointer;
  transition: background 0.15s ease, box-shadow 0.15s ease, transform 0.1s ease;
}

.kp-dashboard__refresh:hover:not(:disabled) {
  background: #dbeafe;
  box-shadow: var(--kp-shadow);
}

.kp-dashboard__refresh:disabled {
  opacity: 0.65;
  cursor: not-allowed;
}

.kp-dashboard__meta {
  font-size: 0.75rem;
  color: var(--kp-muted);
  text-align: right;
  margin: 0;
  line-height: 1.5;
}

/* ---- Alerts ---- */
.kp-dashboard__alert {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem;
  padding: 1rem 1.25rem;
  margin-bottom: 1.5rem;
  background: var(--kp-danger-soft);
  border: 1px solid #fecaca;
  border-radius: var(--kp-radius);
  color: #991b1b;
  font-size: 0.875rem;
}

.kp-dashboard__alert-retry {
  padding: 0.35rem 0.85rem;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--kp-danger);
  background: #fff;
  border: 1px solid #fecaca;
  border-radius: 8px;
  cursor: pointer;
}

.kp-dashboard__empty {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 1.25rem 1.5rem;
  margin-bottom: 2rem;
  background: var(--kp-info-soft);
  border: 1px solid #bae6fd;
  border-radius: var(--kp-radius);
  color: #0369a1;
  font-size: 0.9375rem;
}

/* ---- Section headings ---- */
.kp-dashboard__section {
  margin-bottom: 1.25rem;
}

.kp-dashboard__section-title {
  font-size: 0.6875rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--kp-muted);
  margin: 0 0 1rem;
}

/* ---- Metric cards grid ---- */
.kp-dashboard__metrics {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.25rem;
  margin-bottom: 2.5rem;
}

.kp-dashboard__metric-cell {
  min-width: 0;
}

.kp-dashboard__metric-cell .kp-metric-card {
  height: 100%;
}

@media (max-width: 1199.98px) {
  .kp-dashboard__metrics { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 575.98px) {
  .kp-dashboard__metrics { grid-template-columns: 1fr; }
  .kp-dashboard__header {
    grid-template-columns: 1fr;
    padding: 1.25rem;
  }
  .kp-dashboard__actions { align-items: flex-start; }
  .kp-dashboard__meta { text-align: left; }
}

.kp-metric-card {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 132px;
  padding: 1.35rem 1.5rem;
  background: var(--kp-surface);
  border: 1px solid var(--kp-border);
  border-radius: var(--kp-radius);
  box-shadow: var(--kp-shadow);
  overflow: hidden;
  transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}

.kp-metric-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: var(--kp-metric-accent, var(--kp-primary));
}

a.kp-metric-card:hover,
a.kp-metric-card:focus {
  text-decoration: none;
  color: inherit;
  transform: translateY(-2px);
  box-shadow: var(--kp-shadow-hover);
  border-color: #cbd5e1;
}

.kp-metric-card__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  margin-bottom: 1rem;
  border-radius: 10px;
  font-size: 1rem;
  background: var(--kp-metric-icon-bg, var(--kp-primary-soft));
  color: var(--kp-metric-accent, var(--kp-primary));
}

.kp-metric-card__value {
  font-size: 1.875rem;
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.1;
  margin: 0 0 0.35rem;
  color: var(--kp-text);
}

.kp-metric-card__label {
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--kp-muted);
  margin: 0;
  line-height: 1.4;
}

.kp-metric-card__sublabel {
  display: block;
  font-size: 0.75rem;
  font-weight: 400;
  color: #94a3b8;
  margin-top: 0.2rem;
}

.kp-metric-card__badge {
  display: inline-block;
  margin-top: 0.65rem;
  padding: 0.2rem 0.5rem;
  font-size: 0.6875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #92400e;
  background: var(--kp-warning-soft);
  border-radius: 6px;
}

/* Metric color variants (API: primary, info, success, warning, danger, secondary) */
.kp-metric-card--primary { --kp-metric-accent: #2563eb; --kp-metric-icon-bg: #eff6ff; }
.kp-metric-card--info    { --kp-metric-accent: #0ea5e9; --kp-metric-icon-bg: #f0f9ff; }
.kp-metric-card--success { --kp-metric-accent: #16a34a; --kp-metric-icon-bg: #ecfdf5; }
.kp-metric-card--warning { --kp-metric-accent: #f59e0b; --kp-metric-icon-bg: #fffbeb; }
.kp-metric-card--danger  { --kp-metric-accent: #dc2626; --kp-metric-icon-bg: #fef2f2; }
.kp-metric-card--secondary { --kp-metric-accent: #64748b; --kp-metric-icon-bg: #f1f5f9; }

/* Skeleton */
.kp-dashboard__skeleton {
  min-height: 132px;
  border-radius: var(--kp-radius);
  background: linear-gradient(90deg, #f1f5f9 25%, #e2e8f0 50%, #f1f5f9 75%);
  background-size: 200% 100%;
  animation: kp-dash-shimmer 1.2s infinite;
}

@keyframes kp-dash-shimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* ---- Main two-column layout ---- */
.kp-dashboard__grid {
  display: grid;
  grid-template-columns: 1fr 380px;
  gap: 1.5rem;
  align-items: start;
}

@media (max-width: 991.98px) {
  .kp-dashboard__grid { grid-template-columns: 1fr; }
}

/* ---- Panel (replaces AdminLTE card) ---- */
.kp-panel {
  background: var(--kp-surface);
  border: 1px solid var(--kp-border);
  border-radius: var(--kp-radius);
  box-shadow: var(--kp-shadow);
  overflow: hidden;
}

.kp-panel + .kp-panel {
  margin-top: 1.25rem;
}

.kp-panel__head {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  padding: 1.25rem 1.5rem;
  border-bottom: 1px solid var(--kp-border);
}

.kp-panel__head-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 10px;
  background: var(--kp-primary-soft);
  color: var(--kp-primary);
  font-size: 0.9rem;
}

.kp-panel__head-icon--muted {
  background: #f1f5f9;
  color: #64748b;
}

.kp-panel__head-icon--success {
  background: var(--kp-success-soft);
  color: var(--kp-success);
}

.kp-panel__title {
  font-size: 1rem;
  font-weight: 600;
  margin: 0;
  color: var(--kp-text);
  letter-spacing: -0.01em;
}

.kp-panel__body {
  padding: 1.5rem;
}

.kp-panel__body--flush {
  padding: 0;
}

.kp-panel__body--scroll {
  max-height: 300px;
  overflow-y: auto;
  padding: 0.5rem 1.5rem 1rem;
}

/* ---- Quick access tiles ---- */
.kp-quick-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 1rem;
}

.kp-quick-tile {
  display: block;
  text-decoration: none;
  color: inherit;
  padding: 1.15rem 1.25rem;
  background: var(--kp-bg);
  border: 1px solid var(--kp-border);
  border-radius: var(--kp-radius);
  transition: background 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease, transform 0.1s ease;
}

.kp-quick-tile:hover {
  text-decoration: none;
  color: inherit;
  background: #fff;
  border-color: #cbd5e1;
  box-shadow: var(--kp-shadow);
  transform: translateY(-1px);
}

.kp-quick-tile__row {
  display: flex;
  align-items: flex-start;
  gap: 0.85rem;
}

.kp-quick-tile__icon {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 10px;
  font-size: 0.85rem;
  color: #fff;
}

.kp-quick-tile__icon--primary { background: #2563eb; }
.kp-quick-tile__icon--info    { background: #0ea5e9; }
.kp-quick-tile__icon--success { background: #16a34a; }
.kp-quick-tile__icon--warning { background: #f59e0b; color: #1e293b; }
.kp-quick-tile__icon--danger  { background: #dc2626; }
.kp-quick-tile__icon--secondary { background: #64748b; }

.kp-quick-tile__label {
  display: block;
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--kp-text);
  margin-bottom: 0.2rem;
}

.kp-quick-tile__desc {
  font-size: 0.8125rem;
  color: var(--kp-muted);
  margin: 0;
  line-height: 1.45;
}

.kp-dashboard__placeholder {
  font-size: 0.875rem;
  color: var(--kp-muted);
  margin: 0;
}

/* ---- Activity feed (SaaS list, not table) ---- */
.kp-activity-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.kp-activity-item {
  padding: 0.85rem 0;
  border-bottom: 1px solid var(--kp-border);
}

.kp-activity-item:last-child {
  border-bottom: none;
}

.kp-activity-item__top {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.35rem;
}

.kp-activity-item__method {
  display: inline-block;
  padding: 0.15rem 0.45rem;
  font-size: 0.6875rem;
  font-weight: 700;
  font-family: ui-monospace, monospace;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #475569;
  background: #f1f5f9;
  border-radius: 6px;
}

.kp-activity-item__path {
  flex: 1;
  min-width: 0;
  font-size: 0.8125rem;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  color: var(--kp-text);
  word-break: break-all;
}

.kp-activity-item__time {
  font-size: 0.75rem;
  color: var(--kp-muted);
  white-space: nowrap;
}

.kp-activity-item__meta {
  font-size: 0.75rem;
  color: var(--kp-muted);
}

/* ---- System status ---- */
.kp-status {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.kp-status__pill {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  align-self: flex-start;
  padding: 0.4rem 0.85rem;
  font-size: 0.8125rem;
  font-weight: 600;
  color: #166534;
  background: var(--kp-success-soft);
  border: 1px solid #bbf7d0;
  border-radius: 999px;
}

.kp-status__pill::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--kp-success);
  box-shadow: 0 0 0 3px rgba(22, 163, 74, 0.25);
  animation: kp-pulse 2s ease infinite;
}

@keyframes kp-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.6; }
}

.kp-status__clock {
  font-size: 0.875rem;
  color: var(--kp-muted);
  margin: 0;
}

.kp-status__clock strong {
  color: var(--kp-text);
  font-weight: 600;
}

/* Dark mode */
.dark-mode .kp-dashboard {
  --kp-text: #f1f5f9;
  --kp-muted: #94a3b8;
  --kp-border: #334155;
  --kp-surface: #1e293b;
  --kp-bg: #0f172a;
}

.dark-mode .kp-dashboard__header,
.dark-mode .kp-metric-card,
.dark-mode .kp-panel {
  background: var(--kp-surface);
}

.dark-mode .kp-quick-tile {
  background: #0f172a;
}

.dark-mode .kp-quick-tile:hover {
  background: #1e293b;
}

.dark-mode .kp-dashboard__skeleton {
  background: linear-gradient(90deg, #1e293b 25%, #334155 50%, #1e293b 75%);
  background-size: 200% 100%;
}

.dark-mode .kp-activity-item__method {
  background: #334155;
  color: #cbd5e1;
}

/* ========== DESIGN SYSTEM EXTENSIONS ========== */

/**
 * Kalpak Design System — Extended components (app-wide)
 * Loaded after kalpak-design-system.css
 */

/* ==========================================================================
   LEGACY AdminLTE page sections (masters, older screens)
   ========================================================================== */
body.kp-app .content-header {
  margin-bottom: 1.5rem;
  padding: 1.25rem 1.5rem;
  background: var(--kalpak-surface);
  border: 1px solid var(--kalpak-border);
  border-radius: var(--kalpak-radius);
  box-shadow: var(--kalpak-shadow);
}

body.kp-app .content-header h1,
body.kp-app .content-header h1 small {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--kalpak-text);
}

body.kp-app section.content {
  padding: 0;
}

body.kp-app section.content > .container-fluid,
body.kp-app section.content > .row {
  margin-left: 0;
  margin-right: 0;
}

/* ==========================================================================
   APP SHELL — De-AdminLTE / SaaS chrome
   ========================================================================== */
body.kp-app:not(.emr-app) {
  overflow-x: hidden;
}

body.kp-app .wrapper {
  background: var(--kalpak-bg);
}

body.kp-app .content-wrapper > .kp-app-content {
  max-width: 1600px;
  margin: 0 auto;
  width: 100%;
}

/* Remove heavy AdminLTE elevation look */
body.kp-app .elevation-4,
body.kp-app .elevation-3,
body.kp-app .elevation-2 {
  box-shadow: none !important;
}

body.kp-app .main-sidebar {
  border-radius: 0;
}

/* ==========================================================================
   PAGE LAYOUT (.kp-page) — all list/form/detail screens
   ========================================================================== */
.kp-page {
  padding-bottom: 2rem;
}

.kp-page > .d-flex.justify-content-between,
.kp-page > .row > .col .d-flex.justify-content-between,
.kp-page .kp-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1.5rem;
  padding: 1.25rem 1.5rem;
  background: var(--kalpak-surface);
  border: 1px solid var(--kalpak-border);
  border-radius: var(--kalpak-radius);
  box-shadow: var(--kalpak-shadow);
}

.kp-page > .d-flex.justify-content-between h4,
.kp-page > .d-flex.justify-content-between .h4,
.kp-page .kp-toolbar h4,
.kp-page .kp-toolbar .h4,
.kp-page > h4:first-child,
.kp-page > .row h4 {
  font-size: 1.25rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  margin: 0;
  color: var(--kalpak-text);
}

.kp-page .content-header {
  margin-bottom: 1.5rem;
  padding: 1.25rem 1.5rem;
  background: var(--kalpak-surface);
  border: 1px solid var(--kalpak-border);
  border-radius: var(--kalpak-radius);
  box-shadow: var(--kalpak-shadow);
}

/* ==========================================================================
   BREADCRUMBS
   ========================================================================== */
.breadcrumb {
  background: transparent;
  padding: 0;
  margin-bottom: 0.5rem;
  font-size: 0.8125rem;
}

.breadcrumb-item + .breadcrumb-item::before {
  color: var(--kalpak-text-muted);
}

.breadcrumb-item.active {
  color: var(--kalpak-text-muted);
  font-weight: 500;
}

.breadcrumb-item a {
  color: var(--kalpak-primary);
}

/* ==========================================================================
   INFO-BOX / SMALL-BOX → Modern metric surfaces (non-dashboard pages)
   ========================================================================== */
.info-box {
  border-radius: var(--kalpak-radius);
  box-shadow: var(--kalpak-shadow);
  border: 1px solid var(--kalpak-border);
  background: var(--kalpak-surface);
  min-height: auto;
  margin-bottom: 1rem;
}

.info-box-icon {
  border-radius: 10px;
  width: 3rem;
  height: 3rem;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
}

.info-box-content {
  padding: 0.75rem 1rem;
}

.info-box-number {
  font-weight: 700;
  font-size: 1.5rem;
}

.info-box-text {
  font-weight: 500;
  color: var(--kalpak-text-muted);
  font-size: 0.875rem;
}

/* ==========================================================================
   TABS & PILLS
   ========================================================================== */
.nav-tabs {
  border-bottom: 1px solid var(--kalpak-border);
  gap: 0.25rem;
}

.nav-tabs .nav-link {
  border: none;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  padding: 0.65rem 1rem;
  color: var(--kalpak-text-muted);
}

.nav-tabs .nav-link:hover {
  border-color: transparent;
  color: var(--kalpak-text);
  background: var(--kalpak-bg);
  border-radius: var(--kalpak-radius-sm) var(--kalpak-radius-sm) 0 0;
}

.nav-tabs .nav-link.active {
  color: var(--kalpak-primary);
  background: transparent;
  border-bottom-color: var(--kalpak-primary);
  font-weight: 600;
}

.tab-content {
  padding-top: 1.25rem;
}

.card-tabs .card-header .nav-tabs {
  margin-bottom: -1px;
}

/* ==========================================================================
   ACCORDION / COLLAPSE
   ========================================================================== */
.card .card-header[data-toggle="collapse"],
.accordion .card-header {
  cursor: pointer;
  background: var(--kalpak-bg);
  border-bottom: 1px solid var(--kalpak-border);
}

.collapse.show + .card-body,
.card-outline .card-header {
  font-weight: 600;
}

/* ==========================================================================
   FORMS — sections, grids, validation
   ========================================================================== */
.kp-form-section {
  margin-bottom: 2rem;
  padding: 1.5rem;
  background: var(--kalpak-surface);
  border: 1px solid var(--kalpak-border);
  border-radius: var(--kalpak-radius);
  box-shadow: var(--kalpak-shadow);
}

.kp-form-section__title {
  font-size: 0.6875rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--kalpak-text-muted);
  margin: 0 0 1.25rem;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid var(--kalpak-border);
}

form .form-row,
form .row {
  margin-bottom: 0.25rem;
}

.form-control.is-invalid,
.was-validated .form-control:invalid {
  border-color: var(--kalpak-danger);
  box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.12);
}

.invalid-feedback,
.error {
  font-size: 0.8125rem;
  color: var(--kalpak-danger);
  margin-top: 0.25rem;
}

.custom-control-input:checked ~ .custom-control-label::before {
  background-color: var(--kalpak-primary);
  border-color: var(--kalpak-primary);
}

/* Fieldset / legend clinical forms */
fieldset {
  border: 1px solid var(--kalpak-border);
  border-radius: var(--kalpak-radius);
  padding: 1.25rem 1.5rem;
  margin-bottom: 1.5rem;
  background: var(--kalpak-surface);
}

fieldset legend {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--kalpak-text);
  width: auto;
  padding: 0 0.5rem;
  margin-bottom: 0;
}

/* ==========================================================================
   TABLES — sticky header, SaaS density
   ========================================================================== */
.kp-page .card .table-responsive,
.kp-page .table-responsive {
  border-radius: 0 0 var(--kalpak-radius) var(--kalpak-radius);
}

.kp-page .card > .card-body.p-2 .dataTables_wrapper,
.kp-page .card > .card-body .dataTables_wrapper {
  padding: 0.25rem 0;
}

.table thead th {
  position: sticky;
  top: 0;
  z-index: 2;
  background-color: var(--kalpak-bg);
}

.card-body.p-0 .table thead th,
.table-responsive .table thead th {
  position: sticky;
  top: 0;
}

.dataTables_wrapper .dataTables_length select,
.dataTables_wrapper .dataTables_filter input {
  border-radius: var(--kalpak-radius-sm);
  border: 1px solid var(--kalpak-border);
  padding: 0.35rem 0.5rem;
}

.dataTables_wrapper .dataTables_info {
  font-size: 0.8125rem;
  color: var(--kalpak-text-muted);
}

.dt-buttons .btn {
  margin-right: 0.35rem;
  margin-bottom: 0.35rem;
}

/* Action column buttons in tables */
.table .btn-group .btn,
.table .btn-xs,
.table .btn-sm {
  margin: 0 0.1rem;
}

/* ==========================================================================
   BADGES — status system
   ========================================================================== */
.badge {
  font-size: 0.6875rem;
  letter-spacing: 0.02em;
}

.badge-pill,
.badge.rounded-pill {
  border-radius: 999px;
  padding: 0.35em 0.65em;
}

.badge-secondary {
  background-color: #e2e8f0;
  color: #475569;
}

.badge-info {
  background-color: #e0f2fe;
  color: #0369a1;
}

.badge-light {
  background-color: #f1f5f9;
  color: #475569;
}

/* ==========================================================================
   MODALS — global + confirm
   ========================================================================== */
.modal-backdrop.show {
  opacity: 0.4;
}

#globalModal .modal-dialog,
#confirmModal .modal-dialog {
  margin: 1.5rem auto;
}

#confirmModal .modal-header.bg-danger {
  background: linear-gradient(135deg, #dc2626, #b91c1c) !important;
  border-radius: var(--kalpak-radius) var(--kalpak-radius) 0 0;
  border: none;
}

.modal-header .close {
  opacity: 0.8;
  text-shadow: none;
}

/* ==========================================================================
   SWEETALERT2 + TOASTR
   ========================================================================== */
.swal2-popup {
  border-radius: var(--kalpak-radius) !important;
  font-family: var(--kalpak-font) !important;
}

.swal2-styled.swal2-confirm {
  background-color: var(--kalpak-primary) !important;
  border-radius: var(--kalpak-radius-sm) !important;
}

#toast-container > div {
  border-radius: var(--kalpak-radius-sm);
  box-shadow: var(--kalpak-shadow-md);
  font-family: var(--kalpak-font);
}

/* ==========================================================================
   JQUERY UI / DATEPICKER
   ========================================================================== */
.ui-widget {
  font-family: var(--kalpak-font);
}

.ui-datepicker {
  border-radius: var(--kalpak-radius);
  border: 1px solid var(--kalpak-border);
  box-shadow: var(--kalpak-shadow-md);
}

.ui-state-active,
.ui-widget-content .ui-state-active {
  background: var(--kalpak-primary) !important;
  border-color: var(--kalpak-primary) !important;
}

/* ==========================================================================
   SELECT2
   ========================================================================== */
.select2-container--default .select2-selection--single,
.select2-container--default .select2-selection--multiple {
  border: 1px solid var(--kalpak-border);
  border-radius: var(--kalpak-radius-sm);
  min-height: calc(1.5em + 0.9rem);
}

.select2-container--default.select2-container--focus .select2-selection--multiple,
.select2-container--default.select2-container--open .select2-selection--single {
  border-color: var(--kalpak-primary);
}

/* ==========================================================================
   LOGIN (AdminLTE login-box on public + master)
   ========================================================================== */
.login-box,
.register-box {
  width: 100%;
  max-width: 420px;
  margin: 6vh auto !important;
}

.login-box .card,
.register-box .card {
  border: 1px solid var(--kalpak-border);
  overflow: hidden;
}

.login-box-msg,
.register-box-msg {
  font-weight: 500 !important;
  color: var(--kalpak-text-muted);
  font-size: 0.9375rem;
}

.public-portal-page-title {
  font-size: 1.35rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  text-align: center;
  margin-bottom: 0.5rem;
}

/* ==========================================================================
   TIMELINE / CLINICAL MODULE OVERRIDES (preserve layout IDs)
   ========================================================================== */
.timeline {
  padding-left: 0;
}

.timeline > div > .timeline-item {
  border-radius: var(--kalpak-radius);
  box-shadow: var(--kalpak-shadow);
  border: 1px solid var(--kalpak-border);
}

.direct-chat-messages {
  border-radius: var(--kalpak-radius-sm);
  background: var(--kalpak-bg);
}

/* ==========================================================================
   ULTRASOUND / HEAVY FORM MODULES (inline style complements)
   ========================================================================== */
.consultation-panel,
.echo-panel,
.usg-panel {
  border-radius: var(--kalpak-radius);
}

/* ==========================================================================
   PRINT — do not break reports
   ========================================================================== */
@media print {
  .main-sidebar,
  .main-header,
  .main-footer,
  .kp-dashboard__refresh {
    display: none !important;
  }
  .content-wrapper {
    margin: 0 !important;
    padding: 0 !important;
  }
}

/* ==========================================================================
   UTILITIES
   ========================================================================== */
[x-cloak] {
  display: none !important;
}

.kp-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}

.shadow-sm {
  box-shadow: var(--kalpak-shadow) !important;
}

.border {
  border-color: var(--kalpak-border) !important;
}

/* Alpine treeview submenu */
.nav-treeview > .nav-item > .nav-link {
  padding-left: 2rem !important;
  font-size: 0.875rem;
}

.nav-sidebar .menu-open > .nav-link {
  background-color: var(--kalpak-sidebar-hover) !important;
}