:root {
  --hm-primary: #087f78;
  --hm-primary-dark: #05635e;
  --hm-accent: #f4a62a;
  --hm-ink: #17324d;
  --hm-muted: #718096;
  --hm-surface: #f8fbfa;
  --hm-bg: #f2f7f8;
  --hm-border: #e7edf4;
  --hm-sidebar: #092f3a;
  --hm-radius: 18px;
  --hm-shadow: 0 14px 36px rgba(8, 47, 58, .08);
}

html, body { min-height: 100%; }
body.hold-transition {
  color: var(--hm-ink);
  background: var(--hm-bg);
  font-family: "Segoe UI", Inter, Arial, sans-serif;
  font-size: 14px;
  letter-spacing: .01em;
}

.wrapper, .content-wrapper, .right-side {
  background:
    radial-gradient(circle at 92% 2%, rgba(45,212,191,.09), transparent 24rem),
    var(--hm-bg) !important;
}
.content-wrapper { padding: 68px 22px 28px !important; }
.content { padding: 18px 0; }

.main-header {
  position: fixed !important;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1030;
  box-shadow: 0 1px 0 rgba(15, 23, 42, .08);
}
.main-header .logo {
  height: 68px;
  line-height: 68px;
  background: linear-gradient(135deg, #062e38, #0b4650) !important;
  color: #fff !important;
  font-size: 18px;
  letter-spacing: -.02em;
}
.main-header .logo .logo-lg b { color: #5eead4; }
.main-header .logo .logo-lg:after {
  content: " • Klinik";
  color: #a7f3d0;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .06em;
}
.main-header .navbar {
  min-height: 68px;
  background: rgba(229,241,239,.98) !important;
  backdrop-filter: blur(12px);
}
.main-header .sidebar-toggle { padding: 24px 20px; color: var(--hm-ink) !important; }
.main-header .sidebar-toggle:hover { background: #edf7f6 !important; color: var(--hm-primary) !important; }
.main-header .navbar .nav > li > a { padding-top: 14px; padding-bottom: 14px; color: var(--hm-ink) !important; }
.main-header .navbar .nav > li > a:hover { background: #f8fafc !important; }

html.hm-dark .main-header .navbar {
  background: rgba(22,65,74,.98) !important;
  border-bottom: 1px solid #2d5861;
}

html.hm-dark .main-header .sidebar-toggle,
html.hm-dark .main-header .navbar .nav > li > a {
  color: #e5f0ef !important;
}

html.hm-dark .main-header .sidebar-toggle:hover,
html.hm-dark .main-header .navbar .nav > li > a:hover {
  color: #fff !important;
  background: #1c4d56 !important;
}
.main-header .user-image { width: 38px !important; height: 38px !important; border: 2px solid #d8f3ef; }
.navbar-nav > .user-menu > .dropdown-menu { border: 0; border-radius: 14px; box-shadow: var(--hm-shadow); overflow: hidden; }
.navbar-nav > .user-menu > .dropdown-menu > .user-header { background: linear-gradient(135deg, var(--hm-primary), #14b8a6) !important; }
.navbar-nav > .user-menu > .dropdown-menu > .user-footer { background: #f8fafc; }

.main-sidebar {
  position: fixed !important;
  top: 0;
  bottom: 0;
  left: 0;
  z-index: 1020;
  height: 100vh;
  overflow-y: auto;
  overflow-x: hidden;
  padding-top: 68px;
  background:
    radial-gradient(circle at 20% 10%, rgba(45,212,191,.16), transparent 14rem),
    linear-gradient(180deg, #082f3a 0%, #0c2939 55%, #0b2232 100%) !important;
  box-shadow: 8px 0 32px rgba(16,42,67,.1);
  transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.sidebar { padding: 10px 8px 24px; }
.user-panel {
  margin: 8px 4px 18px;
  padding: 10px 10px;
  border-radius: 14px;
  background: rgba(255,255,255,.07);
  display: flex;
  align-items: center;
  gap: 10px;
  overflow: hidden;
}
.user-panel > .image > img { width: 40px; height: 40px; border: 2px solid rgba(94,234,212,.55); flex-shrink: 0; }
.user-panel > .info {
  position: static !important;
  padding-top: 0 !important;
  left: auto !important;
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
}
.user-panel > .info > p {
  color: #fff;
  margin-bottom: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-weight: 700;
  font-size: 13px;
}
.user-panel > .info > a {
  color: #9fb3c8;
  font-size: 11px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: block;
}

.sidebar-menu > li.header {
  padding: 12px 10px 6px;
  background: transparent !important;
  color: #2dd4bf !important;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
  text-shadow: 0 1px 3px rgba(0,0,0,.4);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.sidebar-menu > li { margin: 3px 0; position: relative; }
.sidebar-menu > li > a, .sidebar-menu .treeview-menu > li > a {
  border: 0 !important;
  border-radius: 10px;
  color: #f1f5f9 !important;
  font-weight: 600;
  transition: .2s ease;
  display: flex !important;
  align-items: center !important;
  padding: 11px 12px !important;
  white-space: nowrap !important;
  overflow: hidden !important;
}

.sidebar-menu > li > a > span {
  flex: 1 1 auto !important;
  min-width: 0 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  font-size: 13px !important;
  display: inline-block !important;
}

/* VIBRANT SIDEBAR ICON COLORS FOR ALL MENUS */
.sidebar-menu i.fa {
  width: 24px !important;
  text-align: center !important;
  margin-right: 8px !important;
  font-size: 16px !important;
  display: inline-block !important;
  transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1), filter 0.25s ease !important;
}

/* 1. Dashboard / Beranda -> Vibrant Sky Blue */
.sidebar-menu i.fa-dashboard,
.sidebar-menu i.fa-tachometer,
.sidebar-menu i.fa-home {
  color: #38bdf8 !important;
  text-shadow: 0 2px 8px rgba(56, 189, 248, 0.4);
}

/* 2. Absensi & Waktu -> Mint Cyan */
.sidebar-menu i.fa-clock-o,
.sidebar-menu i.fa-calendar-check-o,
.sidebar-menu i.fa-calendar {
  color: #2dd4bf !important;
  text-shadow: 0 2px 8px rgba(45, 212, 191, 0.4);
}

/* 3. Antrian / Queue -> Vibrant Yellow Gold */
.sidebar-menu i.fa-list,
.sidebar-menu i.fa-list-ol,
.sidebar-menu i.fa-tasks {
  color: #facc15 !important;
  text-shadow: 0 2px 8px rgba(250, 204, 21, 0.4);
}

/* 4. Pendaftaran Client / Pasien -> Emerald Green */
.sidebar-menu i.fa-user-plus,
.sidebar-menu i.fa-user-md,
.sidebar-menu i.fa-users {
  color: #34d399 !important;
  text-shadow: 0 2px 8px rgba(52, 211, 153, 0.4);
}

/* 5. Pendaftaran Online / Messaging -> Vibrant Purple */
.sidebar-menu i.fa-inbox,
.sidebar-menu i.fa-envelope,
.sidebar-menu i.fa-paper-plane {
  color: #c084fc !important;
  text-shadow: 0 2px 8px rgba(192, 132, 252, 0.4);
}

/* 6. Database Pasien -> Cyan Blue */
.sidebar-menu i.fa-database,
.sidebar-menu i.fa-folder-open,
.sidebar-menu i.fa-address-book {
  color: #60a5fa !important;
  text-shadow: 0 2px 8px rgba(96, 165, 250, 0.4);
}

/* 7. Produk & Stok Herbal -> Fresh Spring Green */
.sidebar-menu i.fa-leaf,
.sidebar-menu i.fa-cubes,
.sidebar-menu i.fa-shopping-bag {
  color: #4ade80 !important;
  text-shadow: 0 2px 8px rgba(74, 222, 128, 0.4);
}

/* 8. Penjualan & Analytics -> Bright Teal */
.sidebar-menu i.fa-line-chart,
.sidebar-menu i.fa-bar-chart,
.sidebar-menu i.fa-pie-chart,
.sidebar-menu i.fa-area-chart {
  color: #2dd4bf !important;
  text-shadow: 0 2px 8px rgba(45, 212, 191, 0.4);
}

/* 9. Pengeluaran / Kas Cabang -> Coral Red */
.sidebar-menu i.fa-money,
.sidebar-menu i.fa-credit-card,
.sidebar-menu i.fa-dollar {
  color: #f87171 !important;
  text-shadow: 0 2px 8px rgba(248, 113, 113, 0.4);
}

/* 10. Pendapatan Terapi -> Rose Pink */
.sidebar-menu i.fa-heartbeat,
.sidebar-menu i.fa-heart,
.sidebar-menu i.fa-medkit {
  color: #fb7185 !important;
  text-shadow: 0 2px 8px rgba(251, 113, 133, 0.4);
}

/* 11. Cabang Abdesir / Gedung 1 -> Golden Amber */
.sidebar-menu i.fa-building {
  color: #fbbf24 !important;
  text-shadow: 0 2px 8px rgba(251, 191, 36, 0.4);
}

/* 12. Cabang Hertasning / Gedung 2 -> Violet Purple */
.sidebar-menu i.fa-building-o {
  color: #a78bfa !important;
  text-shadow: 0 2px 8px rgba(167, 139, 250, 0.4);
}

/* 13. Klinik Parepare -> Indigo Blue */
.sidebar-menu i.fa-hospital-o {
  color: #818cf8 !important;
  text-shadow: 0 2px 8px rgba(129, 140, 248, 0.4);
}

/* 14. Unit Home Care / Mobil Driver -> Orange Coral */
.sidebar-menu i.fa-car,
.sidebar-menu i.fa-truck {
  color: #fb923c !important;
  text-shadow: 0 2px 8px rgba(251, 146, 60, 0.4);
}

/* 15. Tutup Buku & Laporan -> Soft Mint Green */
.sidebar-menu i.fa-book,
.sidebar-menu i.fa-lock,
.sidebar-menu i.fa-archive {
  color: #34d399 !important;
  text-shadow: 0 2px 8px rgba(52, 211, 153, 0.4);
}

/* 16. Kontrol Kasir / Kalkulator -> Amber Yellow */
.sidebar-menu i.fa-calculator {
  color: #facc15 !important;
  text-shadow: 0 2px 8px rgba(250, 204, 21, 0.4);
}

/* 17. Lembur / Jam Pasir -> Orange Amber */
.sidebar-menu i.fa-hourglass-half {
  color: #f59e0b !important;
  text-shadow: 0 2px 8px rgba(245, 158, 11, 0.4);
}

/* 18. ID Card / Shift -> Purple Pink */
.sidebar-menu i.fa-id-card {
  color: #e879f9 !important;
  text-shadow: 0 2px 8px rgba(232, 121, 249, 0.4);
}

/* 19. PDF Slip Gaji -> Red Crimson */
.sidebar-menu i.fa-file-pdf-o {
  color: #ef4444 !important;
  text-shadow: 0 2px 8px rgba(239, 68, 68, 0.4);
}

/* 20. Transaksi / Exchange -> Mint Teal */
.sidebar-menu i.fa-exchange,
.sidebar-menu i.fa-list-alt {
  color: #2dd4bf !important;
  text-shadow: 0 2px 8px rgba(45, 212, 191, 0.4);
}

/* 21. LogOut -> Rose Red */
.sidebar-menu i.fa-sign-out {
  color: #f43f5e !important;
  text-shadow: 0 2px 8px rgba(244, 63, 94, 0.4);
}

.sidebar-menu > li:hover > a, .sidebar-menu > li.active > a {
  background: linear-gradient(90deg, #0d9488, #059669) !important;
  color: #ffffff !important;
  transform: translateX(2px);
}
.sidebar-menu > li.active > a { box-shadow: inset 3px 0 #5eead4, 0 4px 14px rgba(13,148,136,.4); }
.sidebar-menu > li.active > a > i.fa, .sidebar-menu > li:hover > a > i.fa {
  color: #ffffff !important;
  text-shadow: 0 2px 10px rgba(255, 255, 255, 0.6) !important;
  transform: scale(1.2) rotate(4deg) !important;
}
.sidebar-menu .treeview-menu { margin: 5px 0 8px; padding-left: 12px; background: transparent !important; }

.content-header { padding: 28px 0 10px; }
.content-header > h1 { color: var(--hm-ink); font-size: 28px; font-weight: 750; letter-spacing: -.035em; }
.content-header > h1 > small { display: block; margin-top: 6px; color: var(--hm-muted); font-size: 13px; font-weight: 400; }
.content-header > .breadcrumb { top: 34px; right: 0; padding: 6px 10px; border: 1px solid var(--hm-border); border-radius: 999px; background: #f8fbfa; }
.breadcrumb > li > a { color: var(--hm-primary); }

.box {
  margin-bottom: 20px;
  border: 1px solid var(--hm-border) !important;
  border-radius: var(--hm-radius);
  background: var(--hm-surface);
  box-shadow: var(--hm-shadow);
  overflow: hidden;
  transition: transform .2s ease, box-shadow .2s ease;
}
.box:hover { box-shadow: 0 18px 44px rgba(8,47,58,.11); }
.box.box-solid > .box-header, .box-header {
  padding: 17px 20px;
  border-bottom: 1px solid var(--hm-border);
  background: linear-gradient(180deg, #fff, #fbfefe) !important;
  color: var(--hm-ink) !important;
}
.box-header > .fa, .box-header > .glyphicon { color: var(--hm-primary); }
.box-header > .fa {
  display: inline-grid;
  place-items: center;
  width: 31px;
  height: 31px;
  margin-right: 7px;
  border-radius: 9px;
  background: #e6fffb;
}
.box-header .box-title { font-size: 15px; font-weight: 700; letter-spacing: .01em; }
.box-body { padding: 20px; }
.box-footer { padding: 16px 20px; border-color: var(--hm-border); background: #fbfdff; }
.box-tools .btn { border: 0; background: #f1f5f9 !important; color: var(--hm-muted) !important; }

.small-box { min-height: 142px; border-radius: var(--hm-radius); box-shadow: var(--hm-shadow); overflow: hidden; }
.small-box {
  border: 1px solid rgba(255,255,255,.45);
  background-image: linear-gradient(135deg, rgba(255,255,255,.11), transparent) !important;
}
.small-box > .inner { padding: 22px; }
.small-box h3 { font-size: 30px; font-weight: 700; }
.small-box p { font-size: 13px; opacity: .9; }
.small-box .icon { top: 10px; right: 18px; opacity: .2; }
.small-box:hover .icon { transform: scale(1.06) rotate(-3deg); }
.small-box .icon { transition: transform .25s ease; }
.small-box .small-box-footer { padding: 9px; background: rgba(0,0,0,.08); }

.btn {
  border-radius: 9px;
  font-weight: 600;
  box-shadow: none !important;
  transition: transform .15s ease, background .15s ease, border-color .15s ease;
}
.btn:hover { transform: translateY(-1px); }
.btn-primary, .btn-info { border-color: var(--hm-primary) !important; background: var(--hm-primary) !important; }
.btn-primary:hover, .btn-info:hover { background: var(--hm-primary-dark) !important; }
.btn-success { border-color: #16a34a; background: #16a34a; }
.btn-warning { border-color: #f59e0b; background: #f59e0b; }
.btn-danger { border-color: #ef4444; background: #ef4444; }
.btn-default { border-color: var(--hm-border); background: #fff; color: var(--hm-ink); }

.form-control, .select2-container--default .select2-selection--single,
.select2-container--default .select2-selection--multiple {
  min-height: 40px;
  border: 1px solid #d8e2ec;
  border-radius: 9px;
  background: #fff;
  box-shadow: none;
}
.form-control { padding: 9px 12px; }
.form-control:focus, .select2-container--default.select2-container--focus .select2-selection--multiple {
  border-color: #2dd4bf;
  box-shadow: 0 0 0 3px rgba(45,212,191,.13);
}
label { margin-bottom: 7px; color: #334e68; font-size: 12px; font-weight: 700; }
.input-group-addon { border-color: #d8e2ec; background: #f8fafc; color: var(--hm-muted); }

.table-responsive { border: 0; }
.table { margin-bottom: 0; }
.table > thead > tr > th {
  padding: 13px 12px;
  border-bottom: 1px solid #dce6ef !important;
  background: #f7fafc;
  color: #486581;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
}
.table > tbody > tr > td { padding: 13px 12px; border-color: #edf2f7; vertical-align: middle; }
.table-striped > tbody > tr:nth-of-type(odd) { background: #fbfdff; }
.table-hover > tbody > tr:hover { background: #f0fdfa; }
.dataTables_wrapper .dataTables_filter input, .dataTables_wrapper .dataTables_length select { border: 1px solid #d8e2ec; border-radius: 8px; }
.pagination > li > a, .pagination > li > span { margin: 0 2px; border: 0; border-radius: 8px !important; color: var(--hm-primary); }
.pagination > .active > a, .pagination > .active > a:hover { background: var(--hm-primary); }
.label { display: inline-block; padding: .45em .7em; border-radius: 999px; font-weight: 600; }

/* Dashboard welcome */
.hm-dashboard-welcome {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 12px;
  padding: 16px 22px;
  border: 1px solid rgba(94,234,212,.28);
  border-radius: 18px;
  background:
    radial-gradient(circle at 86% 10%, rgba(94,234,212,.20), transparent 13rem),
    linear-gradient(120deg, #073b46 0%, #0b6c68 68%, #138a7f 100%);
  box-shadow: 0 12px 30px rgba(7,59,70,.14);
  color: #fff;
  overflow: hidden;
}
.hm-dashboard-welcome:after {
  content: "";
  position: absolute;
  width: 150px;
  height: 150px;
  right: -60px;
  bottom: -95px;
  border: 20px solid rgba(255,255,255,.08);
  border-radius: 50%;
}
.hm-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 6px;
  color: #a7f3d0;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.hm-dashboard-welcome h2 { margin: 0 0 4px; font-size: 20px; font-weight: 800; letter-spacing: -.02em; }
.hm-dashboard-welcome p { max-width: 580px; margin: 0; color: #cce9e6; font-size: 12px; }
.hm-welcome-metric {
  position: relative;
  z-index: 1;
  min-width: 190px;
  padding: 10px 14px;
  border: 1px solid rgba(255,255,255,.16);
  border-radius: 14px;
  background: rgba(255,255,255,.10);
  backdrop-filter: blur(8px);
}
.hm-welcome-metric small, .hm-welcome-metric span { display: block; color: #cce9e6; font-size: 10.5px; }
.hm-welcome-metric strong { display: block; margin: 2px 0; font-size: 24px; color: #fff; }

/* Filter Bar */
.hm-filter-bar {
  margin-bottom: 12px;
  padding: 10px 16px;
  border: 1px solid #dce8e6;
  border-radius: 14px;
  background: #f4fbf9;
  box-shadow: 0 2px 8px rgba(8,47,58,.03);
}
.hm-filter-inputs {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.hm-filter-label {
  color: #334e68;
  font-size: 11.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .03em;
}
.hm-filter-sep {
  color: #627d98;
  font-size: 12px;
  font-weight: 600;
}
.hm-filter-inputs .input-group-sm .form-control {
  height: 32px;
  min-width: 140px;
  border-radius: 8px;
  font-weight: 600;
}

/* Patient analytics and drill-down */
.hm-analytics-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin-bottom: 12px;
}
.hm-analytics-card {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
  padding: 12px 14px;
  border: 1px solid var(--hm-border);
  border-radius: 15px;
  background: #fff;
  box-shadow: 0 3px 10px rgba(8,47,58,.04);
  color: var(--hm-ink);
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
a.hm-analytics-card:hover {
  border-color: #5eead4;
  box-shadow: 0 10px 24px rgba(8,47,58,.10);
  color: var(--hm-ink);
  text-decoration: none;
  transform: translateY(-2px);
}
.hm-analytics-icon {
  display: grid;
  flex: 0 0 40px;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 12px;
  background: #dffbf6;
  color: var(--hm-primary);
  font-size: 16px;
}
.hm-analytics-icon.is-blue { background: #e8f2ff; color: #3077bd; }
.hm-analytics-icon.is-amber { background: #fff4d9; color: #d7890c; }
.hm-analytics-icon.is-purple { background: #f3eaff; color: #8055b9; }
.hm-analytics-card div { min-width: 0; }
.hm-analytics-card small, .hm-analytics-card em { display: block; color: var(--hm-muted); font-size: 10.5px; font-style: normal; }
.hm-analytics-card strong { display: block; margin: 1px 0 2px; font-size: 20px; letter-spacing: -.02em; }
.hm-analytics-card strong b { color: #a0aec0; font-weight: 400; }
.hm-analytics-card em { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.hm-daily-chart-box {
  margin-bottom: 14px;
  border-radius: 16px;
  border: 1px solid #e1ebee;
  box-shadow: 0 4px 16px rgba(8,47,58,.05);
}
.hm-daily-chart-box .box-header { display: flex; align-items: center; padding: 12px 16px; }
.hm-chart-wrapper {
  position: relative;
  max-height: 240px;
  overflow: hidden;
}
.hm-chart-period {
  margin-left: auto;
  padding: 4px 10px;
  border-radius: 999px;
  background: #edf9f7;
  color: var(--hm-primary-dark);
  font-size: 10.5px;
  font-weight: 650;
}
.hm-chart-link { display: block; color: inherit; text-decoration: none !important; }
.hm-chart-link:hover, .hm-chart-link:focus { color: inherit; outline: none; }

.hm-domicile-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  min-height: 390px;
  margin: 10px 0 20px;
  padding: 20px 18px 17px;
  overflow: hidden;
  background: linear-gradient(180deg, #fff 0%, #f7fbfc 100%);
  border: 1px solid #e1ebee;
  border-radius: 18px;
  box-shadow: 0 8px 24px rgba(35,67,77,.07);
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}

.hm-domicile-grid {
  display: flex;
  flex-wrap: wrap;
}

.hm-domicile-grid > [class*="col-"] {
  display: flex;
  float: none;
}

.hm-domicile-grid .hm-domicile-card {
  width: 100%;
}

.hm-domicile-card:hover,
.hm-domicile-card:focus {
  transform: translateY(-3px);
  border-color: #8ed6cf;
  box-shadow: 0 14px 32px rgba(8,127,120,.13);
}

.hm-domicile-chart {
  min-height: 126px;
  text-align: center;
}

.hm-domicile-total {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin: 5px 0 14px;
  padding: 9px 12px;
  color: #37606b;
  background: #e9faf7;
  border-radius: 11px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.hm-domicile-total strong {
  color: #087f78;
  font-size: 17px;
  letter-spacing: 0;
}

.hm-domicile-detail {
  flex: 1;
  margin: 0;
}

.hm-domicile-detail > div {
  padding: 8px 0;
  border-bottom: 1px solid #e7eff1;
}

.hm-domicile-detail > div:last-child { border-bottom: 0; }

.hm-domicile-detail dt {
  margin: 0 0 3px;
  color: #78909a;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .07em;
  line-height: 1.3;
  text-transform: uppercase;
}

.hm-domicile-detail dd {
  min-height: 20px;
  margin: 0;
  overflow-wrap: anywhere;
  color: #193b46;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.45;
}

.hm-domicile-card .hm-open-data {
  align-self: flex-start;
  margin-top: 10px;
}
.hm-open-data {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 8px;
  color: var(--hm-primary);
  font-size: 10px;
  font-weight: 750;
  letter-spacing: .05em;
  opacity: 0;
  text-transform: uppercase;
  transform: translateY(4px);
  transition: opacity .2s ease, transform .2s ease;
}
.text-center:hover .hm-open-data, .hm-chart-link:focus .hm-open-data { opacity: 1; transform: translateY(0); }
.hm-active-filter {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 18px;
  padding: 15px 18px;
  border: 1px solid #b8ebe4;
  border-radius: 15px;
  background: linear-gradient(90deg, #ecfdf9, #f8fffd);
  color: #365b64;
}
.hm-active-filter > div { display: flex; align-items: center; gap: 9px; }
.hm-active-filter > div > i { color: var(--hm-primary); font-size: 17px; }
.hm-active-filter span { color: var(--hm-muted); font-size: 11px; text-transform: uppercase; letter-spacing: .07em; }
.hm-active-filter strong { color: var(--hm-primary-dark); }

/* Fresh compact dashboard diagrams */
.content .box .knob-label {
  min-height: 48px;
  margin: 6px 0 0;
  color: #526d82;
  font-size: 10.5px;
  font-weight: 650;
  line-height: 1.4;
  letter-spacing: .02em;
  text-transform: uppercase;
}
.content .box .knob-label h5 {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin: 0 0 5px;
  padding: 3px 8px;
  border-radius: 999px;
  background: #ecfdf8;
  color: var(--hm-primary-dark);
  font-size: 10px;
  font-weight: 650;
  text-transform: none;
}
.content .box .knob-label h5 b { font-size: 11.5px; }

.content .box-body > .row > [class*="col-"].text-center:has(.knob),
.content .box-body > .row > [class*="col-"].hm-knob-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  min-height: 185px;
  margin: 6px 0;
  padding: 12px 8px 10px;
  border: 2px solid #e5f0ee;
  border-radius: 16px;
  background:
    radial-gradient(circle at 50% 20%, rgba(45,212,191,.06), transparent 6rem),
    #f8fcfb;
  box-shadow: 0 2px 8px rgba(8,47,58,.04);
  transition: transform .2s ease, background .2s ease, border-color .2s ease, box-shadow .2s ease;
}

.content .box-body > .row > [class*="col-"].text-center:has(.knob):hover,
.content .box-body > .row > [class*="col-"].hm-knob-card:hover {
  z-index: 2;
  border-color: #5eead4;
  background: #ffffff;
  transform: translateY(-3px);
  box-shadow: 0 10px 22px rgba(8,47,58,.09);
}

html.hm-dark .content .box-body > .row > [class*="col-"].text-center:has(.knob),
html.hm-dark .content .box-body > .row > [class*="col-"].hm-knob-card {
  border-color: #214852 !important;
  background: #0f2730 !important;
  color: #e5f0ef !important;
}
html.hm-dark .content .box-body > .row > [class*="col-"].text-center:has(.knob):hover,
html.hm-dark .content .box-body > .row > [class*="col-"].hm-knob-card:hover {
  border-color: #5eead4 !important;
  background: #143542 !important;
}
html.hm-dark .content .box .knob-label { color: #a5c2ca !important; }
html.hm-dark .content .box .knob-label h5 { background: #164348 !important; color: #5eead4 !important; }

.content .box-body canvas {
  filter: drop-shadow(0 8px 10px rgba(8,127,120,.09));
}

/* Modern search/filter bar */
.content .box-info:first-child .box-body form {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}
.content .box-info:first-child .box-body form > [class*="col-"] {
  width: auto;
  min-width: 210px;
  padding: 0;
}
.content .box-info:first-child .box-body form > .btn {
  min-height: 40px;
  padding: 9px 18px;
}

/* Fresh table and action treatment */
.table > tbody > tr { transition: background .15s ease, transform .15s ease; }
.table > tbody > tr:hover { box-shadow: inset 3px 0 var(--hm-primary); }
.table td .btn, .table td a.btn { margin: 2px; border-radius: 8px; }
.dataTables_wrapper .dataTables_filter input {
  min-width: 210px;
  padding: 8px 11px;
  background: #fbfefe;
}

@supports not selector(:has(*)) {
  .content .box .knob-label { padding: 0 8px; }
}

.alert { border: 0; border-radius: 12px; box-shadow: 0 8px 20px rgba(16,42,67,.06); }
.modal-content { border: 0; border-radius: 18px; box-shadow: 0 22px 60px rgba(16,42,67,.2); overflow: hidden; }
.modal-header, .modal-footer { border-color: var(--hm-border); }
.dropdown-menu { border: 1px solid var(--hm-border); border-radius: 10px; box-shadow: var(--hm-shadow); }

.main-footer { padding: 18px 24px; border-top: 1px solid var(--hm-border); background: #fff; color: var(--hm-muted); }

@media (min-width: 768px) {
  .main-header .logo, .main-sidebar { width: 245px; }
  .main-header .navbar, .content-wrapper, .main-footer { margin-left: 245px; }
  .sidebar-mini.sidebar-collapse .main-header .navbar,
  .sidebar-mini.sidebar-collapse .content-wrapper,
  .sidebar-mini.sidebar-collapse .main-footer { margin-left: 50px; }
}

@media (max-width: 767px) {
  .main-header .logo { height: 58px; line-height: 58px; }
  .main-header .navbar { min-height: 58px; }
  .main-header .sidebar-toggle { padding: 19px; }
  .main-sidebar { padding-top: 116px; }
  .content-wrapper { padding: 0 14px 22px; }
  .content-header { padding-top: 22px; }
  .content-header > h1 { font-size: 22px; }
  .content-header > .breadcrumb { position: static; display: inline-block; margin-top: 12px; }
  .box-body { padding: 15px; }
  .form-group, .col-xs-4 { margin-bottom: 10px; }
  .table-responsive { margin-bottom: 0; border-radius: 10px; }
  .btn { min-height: 38px; }
  .hm-dashboard-welcome { align-items: stretch; flex-direction: column; padding: 22px 20px; }
  .hm-dashboard-welcome h2 { font-size: 21px; }
  .hm-welcome-metric { min-width: 0; }
  .content .box-info:first-child .box-body form { display: block; }
  .content .box-info:first-child .box-body form > [class*="col-"] { width: 100%; min-width: 0; }
  .hm-analytics-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .hm-analytics-card { align-items: flex-start; flex-direction: column; padding: 15px; }
  .hm-analytics-card strong { font-size: 20px; }
  .hm-chart-period { display: none; }
  .hm-active-filter { align-items: stretch; flex-direction: column; }
  .hm-active-filter > div { align-items: flex-start; flex-wrap: wrap; }
}

/* Follow-up center */
.hm-followup-summary { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:12px; margin-bottom:18px; }
.hm-followup-stat { display:flex; align-items:center; gap:12px; min-height:92px; padding:16px; background:var(--hm-surface); border:1px solid var(--hm-border); border-radius:16px; box-shadow:0 8px 20px rgba(8,47,58,.06); }
.hm-followup-stat > span { display:flex; align-items:center; justify-content:center; flex:0 0 40px; width:40px; height:40px; color:#fff; background:#087f78; border-radius:12px; font-size:17px; }
.hm-followup-stat small { display:block; margin-bottom:3px; color:var(--hm-muted); font-size:10px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; }
.hm-followup-stat strong { display:block; color:var(--hm-ink); font-size:23px; line-height:1; }
.hm-followup-stat.is-orange > span { background:#e99124; }.hm-followup-stat.is-blue > span { background:#3182bd; }.hm-followup-stat.is-red > span { background:#db5b5b; }.hm-followup-stat.is-green > span { background:#27956b; }
.hm-followup-box { border-top:0 !important; }
.hm-followup-filter { display:grid; grid-template-columns:2fr 1fr 1fr 1.3fr auto; align-items:end; gap:10px; margin-bottom:18px; padding:14px; background:#edf7f5; border:1px solid #d5e9e6; border-radius:13px; }
.hm-followup-filter label { margin-bottom:5px; color:#59737a; font-size:10px; letter-spacing:.06em; text-transform:uppercase; }
.hm-followup-table td { vertical-align:middle !important; }
.hm-followup-table td:first-child strong,.hm-followup-table td:first-child small { display:block; }.hm-followup-table td:first-child small { margin-top:3px; color:var(--hm-muted); }
.hm-schedule-date { display:inline-flex; align-items:center; gap:6px; white-space:nowrap; font-weight:700; }.hm-schedule-date.is-overdue { color:#c63d3d; }
.hm-status { display:inline-block; padding:5px 8px; border-radius:999px; background:#e7eef0; color:#536b73; font-size:10px; font-weight:800; white-space:nowrap; text-transform:uppercase; }
.hm-status.is-sudah_dihubungi { background:#e6f0fb; color:#25669c; }.hm-status.is-dikonfirmasi,.hm-status.is-selesai { background:#ddf4ea; color:#157454; }.hm-status.is-jadwal_ulang { background:#fff0d9; color:#a86108; }
.hm-btn-wa { color:#fff !important; background:#25a866; }.hm-btn-wa:hover { color:#fff !important; background:#1d8b54; }
.hm-empty-state { padding:45px 15px !important; color:#8aa0a6; }.hm-empty-state > i { font-size:30px; }.hm-empty-state p { margin:8px 0 0; }
.hm-mini-calendar { display:grid; grid-template-columns:repeat(7,1fr); gap:5px; }
.hm-mini-calendar > span,.hm-mini-calendar > a { display:flex; min-height:45px; flex-direction:column; align-items:center; justify-content:center; color:#45636b; background:#eff6f5; border:1px solid #dceae8; border-radius:9px; text-decoration:none; }
.hm-mini-calendar .hm-cal-head { min-height:28px; color:#71878d; background:transparent; border:0; font-size:10px; font-weight:800; text-transform:uppercase; }
.hm-mini-calendar .is-empty { visibility:hidden; }.hm-mini-calendar > a:hover { background:#dcefeb; border-color:#9fcfc8; }.hm-mini-calendar > a.is-today { color:#fff; background:#e99124; border-color:#d88017; }
.hm-mini-calendar > a small { margin-top:2px; padding:1px 5px; color:#fff; background:#087f78; border-radius:99px; font-size:8px; }
.hm-followup-legend { display:flex; gap:14px; margin-top:13px; color:#71878d; font-size:10px; }.hm-followup-legend span { display:flex; align-items:center; gap:5px; }.hm-followup-legend i { width:8px; height:8px; background:#087f78; border-radius:50%; }.hm-followup-legend i.is-orange { background:#e99124; }
.hm-modal-patient { margin-bottom:14px; padding:10px 12px; color:#087f78; background:#e8f7f4; border-radius:10px; font-weight:800; }

html.hm-dark .hm-followup-stat,html.hm-dark .hm-followup-box,html.hm-dark .hm-followup-box .box-body { background:#102831 !important; border-color:#294b55 !important; }
html.hm-dark .hm-followup-stat strong { color:#e7f2f1; } html.hm-dark .hm-followup-stat small { color:#9db5bb; }
html.hm-dark .hm-followup-filter { background:#12343d; border-color:#2b535c; }
html.hm-dark .hm-mini-calendar > a,html.hm-dark .hm-mini-calendar > span { color:#dbe9eb; background:#15333c; border-color:#2a4c55; }
html.hm-dark .hm-mini-calendar .hm-cal-head { color:#9eb5ba; background:transparent; border:0; }
html.hm-dark .hm-mini-calendar > a:hover { background:#1a424a; }
html.hm-dark .hm-status { background:#29444c; color:#c6d7da; }
html.hm-dark .hm-status.is-sudah_dihubungi { background:#173f58; color:#9ed2f4; } html.hm-dark .hm-status.is-dikonfirmasi,html.hm-dark .hm-status.is-selesai { background:#17463a; color:#9be2c7; } html.hm-dark .hm-status.is-jadwal_ulang { background:#49391d; color:#f2ca88; }
html.hm-dark .hm-modal-patient { color:#8ce5dc; background:#123d3d; }

@media (max-width:1199px) { .hm-followup-summary { grid-template-columns:repeat(3,1fr); }.hm-followup-filter { grid-template-columns:1fr 1fr; }.hm-followup-filter button { height:34px; } }
@media (max-width:767px) { .hm-followup-summary { grid-template-columns:1fr 1fr; }.hm-followup-stat { min-height:78px; padding:12px; }.hm-followup-filter { display:block; }.hm-followup-filter > div,.hm-followup-filter > button { width:100%; margin-bottom:10px; }.hm-followup-table { min-width:760px; } }

/* Simple synchronized Home Care agenda */
.hm-homecare-hero { display:flex; align-items:center; justify-content:space-between; gap:20px; margin-bottom:16px; padding:22px 24px; color:#fff; background:linear-gradient(135deg,#0c736d,#0d4d58); border-radius:18px; box-shadow:0 13px 30px rgba(8,76,74,.16); }
.hm-homecare-hero span { display:block; margin-bottom:4px; color:#a9eee6; font-size:10px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; }
.hm-homecare-hero h2 { margin:0 0 5px; color:#fff !important; font-size:23px; }.hm-homecare-hero p { margin:0; color:#d5f0ed; }
.hm-homecare-hero .btn.btn-primary { flex:0 0 auto; color:#075e59 !important; background:#f5fffd !important; border:2px solid #b9f0e5 !important; box-shadow:0 7px 18px rgba(0,0,0,.18); font-weight:800; opacity:1 !important; text-shadow:none !important; }
.hm-homecare-hero .btn.btn-primary i { color:#087f78 !important; }
.hm-homecare-hero .btn.btn-primary:hover,.hm-homecare-hero .btn.btn-primary:focus { color:#043f3c !important; background:#cffff3 !important; border-color:#fff !important; box-shadow:0 8px 22px rgba(0,0,0,.24),0 0 0 3px rgba(255,255,255,.22); transform:translateY(-1px); }
html.hm-dark .hm-homecare-hero .btn.btn-primary,html[data-theme=dark] .hm-homecare-hero .btn.btn-primary { color:#063f3b !important; background:#e8fff8 !important; border-color:#7fe0cf !important; }
.hm-homecare-summary { display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:12px; margin-bottom:15px; }
.hm-homecare-summary > a { display:grid; grid-template-columns:36px 1fr auto; align-items:center; gap:10px; min-height:72px; padding:13px 15px; color:#375861; background:#f1f8f7; border:1px solid #d3e7e4; border-radius:14px; text-decoration:none !important; }
.hm-homecare-summary > a:hover,.hm-homecare-summary > a.active { color:#145e5a; background:#dcefeb; border-color:#8fc8c1; }.hm-homecare-summary i { display:flex; align-items:center; justify-content:center; width:36px; height:36px; color:#fff; background:#087f78; border-radius:10px; }
.hm-homecare-summary span { font-size:11px; font-weight:700; }.hm-homecare-summary strong { color:#087f78; font-size:20px; }
.hm-homecare-tabs { display:flex; gap:7px; margin-bottom:14px; overflow-x:auto; }.hm-homecare-tabs a { padding:8px 13px; color:#557079; background:#edf5f4; border:1px solid #d5e5e3; border-radius:999px; font-size:11px; font-weight:800; white-space:nowrap; text-decoration:none !important; }.hm-homecare-tabs a.active { color:#fff; background:#087f78; border-color:#087f78; }
.hm-homecare-list { display:grid; gap:13px; }
.hm-homecare-card { display:grid; grid-template-columns:130px 1fr; overflow:hidden; background:#f8fbfa; border:1px solid #dce9e7; border-radius:17px; box-shadow:0 8px 22px rgba(8,47,58,.06); }.hm-homecare-card.has-rm-warning { border-color:#e6a3a3; box-shadow:0 8px 22px rgba(190,54,54,.08); }
.hm-homecare-time { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:5px; padding:18px 12px; color:#fff; background:#123f49; text-align:center; }.hm-homecare-time strong { font-size:28px; line-height:1; }.hm-homecare-time span { color:#bcd6da; font-size:10px; }.hm-homecare-time em { margin-top:5px; padding:4px 8px; color:#173d45; background:#dcebea; border-radius:99px; font-size:9px; font-style:normal; font-weight:800; text-transform:uppercase; }.hm-homecare-time em.is-status-1 { color:#126044; background:#bcebd8; }.hm-homecare-time em.is-status-2 { color:#81520c; background:#f7d99d; }.hm-homecare-time em.is-status-3 { color:#8f2d2d; background:#f4c2c2; }
.hm-homecare-main { min-width:0; padding:17px 19px; }.hm-homecare-title { display:flex; align-items:flex-start; justify-content:space-between; gap:12px; }.hm-homecare-title small { color:#7c9399; font-size:10px; font-weight:800; }.hm-homecare-title h3 { margin:2px 0 8px; color:#173d45; font-size:18px; }
.hm-rm-warning,.hm-rm-complete { padding:5px 8px; border-radius:99px; font-size:10px; font-weight:800; white-space:nowrap; }.hm-rm-warning { color:#a52f2f; background:#fee2e2; }.hm-rm-complete { color:#176a4d; background:#dff5eb; }
.hm-homecare-address,.hm-homecare-complaint { margin:0 0 6px; color:#557078; font-size:12px; }.hm-homecare-address i { color:#e26b50; }.hm-homecare-meta { margin:9px 0; color:#315a63; font-size:11px; font-weight:700; }
.hm-visit-timeline { display:grid; grid-template-columns:repeat(4,1fr); gap:6px; margin:12px 0; }.hm-visit-timeline span { position:relative; display:grid; grid-template-columns:25px 1fr; align-items:center; min-height:42px; padding:6px 8px; color:#82979d; background:#edf3f2; border-radius:9px; }.hm-visit-timeline i { grid-row:1/3; }.hm-visit-timeline b { font-size:9px; text-transform:uppercase; }.hm-visit-timeline small { font-size:10px; }.hm-visit-timeline span.done { color:#12695f; background:#dff3ef; }
.hm-homecare-actions { display:flex; flex-wrap:wrap; align-items:center; gap:6px; }.hm-homecare-actions form { display:inline-block; margin:0; }
.hm-homecare-empty { padding:50px 15px; color:#82979d; background:#f4f9f8; border:1px dashed #c9deda; border-radius:16px; text-align:center; }.hm-homecare-empty i { font-size:34px; }.hm-homecare-empty h3 { margin:10px 0 4px; font-size:17px; }.hm-homecare-empty p { margin:0; }
html.hm-dark .hm-homecare-summary > a,html.hm-dark .hm-homecare-card,html.hm-dark .hm-homecare-empty { color:#cfe0e3; background:#102d36; border-color:#2a4e58; } html.hm-dark .hm-homecare-summary > a.active,html.hm-dark .hm-homecare-summary > a:hover { background:#17444b; border-color:#3a7479; }
html.hm-dark .hm-homecare-title h3 { color:#e6f1f0; } html.hm-dark .hm-homecare-address,html.hm-dark .hm-homecare-complaint,html.hm-dark .hm-homecare-meta { color:#afc4c9; } html.hm-dark .hm-visit-timeline span { color:#8ca4aa; background:#17343d; } html.hm-dark .hm-visit-timeline span.done { color:#94dfd4; background:#17443f; }
@media(max-width:991px){.hm-homecare-summary{grid-template-columns:1fr 1fr}.hm-homecare-card{grid-template-columns:110px 1fr}.hm-visit-timeline{grid-template-columns:1fr 1fr}}
@media(max-width:600px){.hm-homecare-hero{align-items:flex-start;flex-direction:column}.hm-homecare-summary{grid-template-columns:1fr}.hm-homecare-card{display:block}.hm-homecare-time{align-items:flex-start;flex-direction:row;justify-content:flex-start}.hm-homecare-time strong{font-size:22px}.hm-homecare-main{padding:15px}.hm-homecare-title{display:block}.hm-rm-warning,.hm-rm-complete{display:inline-block;margin-bottom:8px}}
.hm-homecare-pagination{display:flex;align-items:center;justify-content:center;gap:12px;margin:20px 0}.hm-homecare-pagination span{font-weight:700;color:#527078}html.hm-dark .hm-homecare-pagination span{color:#cfe0e3}
.hm-homecare-search{display:flex;align-items:flex-end;gap:10px;padding:14px;margin:0 0 14px;background:#f1f8f7;border:1px solid #d3e7e4;border-radius:14px}.hm-homecare-search label{margin:0;min-width:190px}.hm-homecare-search label span{display:block;margin-bottom:5px;font-size:11px;text-transform:uppercase;letter-spacing:.05em}.hm-homecare-search .hm-homecare-search-input{flex:1}html.hm-dark .hm-homecare-search{background:#102d36;border-color:#2a4e58}@media(max-width:700px){.hm-homecare-search{align-items:stretch;flex-direction:column}.hm-homecare-search label{width:100%}}

/* ==========================================================
   SIDEBAR COLLAPSED MODE (ICON-ONLY MODE WHEN GARIS 3 CLICKED)
   ========================================================== */

body.sidebar-collapse .main-sidebar,
body.sidebar-mini.sidebar-collapse .main-sidebar {
  width: 64px !important;
}

body.sidebar-collapse .main-header .logo,
body.sidebar-mini.sidebar-collapse .main-header .logo {
  width: 64px !important;
  padding: 0 !important;
}

body.sidebar-collapse .main-header .navbar,
body.sidebar-collapse .content-wrapper,
body.sidebar-collapse .main-footer,
body.sidebar-mini.sidebar-collapse .main-header .navbar,
body.sidebar-mini.sidebar-collapse .content-wrapper,
body.sidebar-mini.sidebar-collapse .main-footer {
  margin-left: 64px !important;
}

body.sidebar-collapse .sidebar,
body.sidebar-mini.sidebar-collapse .sidebar {
  padding: 10px 4px 24px !important;
}

body.sidebar-collapse .user-panel > .info,
body.sidebar-collapse .sidebar-menu > li.header,
body.sidebar-mini.sidebar-collapse .user-panel > .info,
body.sidebar-mini.sidebar-collapse .sidebar-menu > li.header {
  display: none !important;
}

body.sidebar-collapse .user-panel,
body.sidebar-mini.sidebar-collapse .user-panel {
  padding: 8px 0 !important;
  margin: 6px 0 14px !important;
  justify-content: center !important;
  background: transparent !important;
}

body.sidebar-collapse .user-panel > .image > img,
body.sidebar-mini.sidebar-collapse .user-panel > .image > img {
  width: 36px !important;
  height: 36px !important;
}

body.sidebar-collapse .sidebar-menu > li > a > span,
body.sidebar-collapse .sidebar-menu > li > a > .pull-right-container,
body.sidebar-collapse .treeview-menu,
body.sidebar-mini.sidebar-collapse .sidebar-menu > li > a > span,
body.sidebar-mini.sidebar-collapse .sidebar-menu > li > a > .pull-right-container,
body.sidebar-mini.sidebar-collapse .treeview-menu {
  display: none !important;
}

body.sidebar-collapse .sidebar-menu > li > a,
body.sidebar-mini.sidebar-collapse .sidebar-menu > li > a {
  justify-content: center !important;
  padding: 13px 0 !important;
  text-align: center !important;
  width: 100% !important;
  border-radius: 10px !important;
}

body.sidebar-collapse .sidebar-menu i.fa,
body.sidebar-mini.sidebar-collapse .sidebar-menu i.fa {
  margin: 0 !important;
  width: 100% !important;
  flex: 0 0 100% !important;
  font-size: 19px !important;
  text-align: center !important;
}

/* SLEEK FLOATING TOOLTIP ON HOVER IN COLLAPSED MODE */
body.sidebar-collapse .sidebar-menu > li:hover > a > span,
body.sidebar-mini.sidebar-collapse .sidebar-menu > li:hover > a > span {
  display: flex !important;
  align-items: center !important;
  position: fixed !important;
  left: 68px !important;
  margin-top: -38px !important;
  height: 38px !important;
  padding: 0 16px !important;
  background: linear-gradient(135deg, #092c36, #113c49) !important;
  color: #ffffff !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  letter-spacing: 0.02em !important;
  border-radius: 8px !important;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.45), 0 0 0 1px rgba(45, 212, 191, 0.3) !important;
  white-space: nowrap !important;
  z-index: 99999 !important;
  pointer-events: none !important;
  animation: hmSidebarTooltipIn 0.2s cubic-bezier(0.34, 1.56, 0.64, 1) forwards !important;
}

@keyframes hmSidebarTooltipIn {
  0% { opacity: 0; transform: translateX(-8px) scale(0.95); }
  100% { opacity: 1; transform: translateX(0) scale(1); }
}

/* Manual and online registration paths */
.hm-registration-paths{display:flex;align-items:center;gap:9px;margin-bottom:16px;padding:14px 16px;background:#eaf6f4;border:1px solid #cfe5e1;border-radius:15px}.hm-registration-paths>div{flex:1}.hm-registration-paths span,.hm-registration-paths strong,.hm-registration-paths small{display:block}.hm-registration-paths span{color:#087f78;font-size:9px;font-weight:800;letter-spacing:.07em;text-transform:uppercase}.hm-registration-paths strong{margin:2px 0;color:#224b53}.hm-registration-paths small{color:#71868c}.hm-registration-paths>a{padding:8px 11px;color:#315d64;background:#fff;border:1px solid #c9dfdc;border-radius:9px;font-size:11px;font-weight:800;text-decoration:none!important;white-space:nowrap}.hm-registration-paths>a.is-primary{color:#fff;background:#087f78;border-color:#087f78}
.hm-online-summary{display:grid;grid-template-columns:repeat(5,1fr);gap:11px;margin-bottom:16px}.hm-online-summary>a{display:flex;align-items:center;justify-content:space-between;padding:15px;color:#536f76;background:#f1f8f7;border:1px solid #d3e6e3;border-radius:13px;text-decoration:none!important}.hm-online-summary small{font-size:10px;font-weight:800;text-transform:uppercase}.hm-online-summary strong{color:#087f78;font-size:20px}
.hm-online-table td{vertical-align:middle!important}.hm-online-table td strong,.hm-online-table td small,.hm-online-table td em{display:block}.hm-online-table td small{margin-top:3px;color:#7c9197;font-size:10px}.hm-online-table td em{max-width:260px;margin-top:5px;color:#59747b;font-size:10px;font-style:normal;white-space:normal}.hm-service-type,.hm-online-status{display:inline-block;padding:5px 8px;border-radius:99px;font-size:9px;font-weight:800;text-transform:uppercase;white-space:nowrap}.hm-service-type{color:#176c62;background:#dff3ef}.hm-service-type.is-home_care{color:#7c560d;background:#fff0ce}.hm-online-status{color:#6b7f84;background:#e9eff0}.hm-online-status.is-menunggu{color:#946010;background:#fff0d4}.hm-online-status.is-duplikat{color:#a33d3d;background:#fee3e3}.hm-online-status.is-disetujui{color:#176c4d;background:#ddf4e9}.hm-online-actions{display:flex;flex-wrap:wrap;gap:4px}.hm-online-actions form{margin:0}
.hm-online-status.is-valid,.hm-online-status.is-disetujui{color:#176c4d;background:#ddf4e9}.hm-online-status.is-dikonfirmasi{color:#185b91;background:#dceeff}.hm-online-status.is-diteruskan_kasir,.hm-online-status.is-diteruskan_homecare{color:#54439b;background:#e9e4ff}.hm-online-status.is-masuk_antrian{color:#176c4d;background:#d8f4e7}.hm-online-status.is-ditolak{color:#8b4850;background:#f5e5e7}.hm-cashier-enqueue{display:grid;grid-template-columns:minmax(150px,1fr) minmax(115px,.7fr) auto;gap:7px;min-width:420px}.hm-cashier-enqueue .form-control{width:100%}@media(max-width:767px){.hm-cashier-enqueue{grid-template-columns:1fr;min-width:230px}}
.hm-queue-summary{display:grid;grid-template-columns:repeat(6,minmax(120px,1fr));gap:12px;margin-bottom:16px}.hm-queue-summary a{position:relative;display:block;min-height:86px;padding:15px;border:1px solid #dce7e9;border-radius:15px;background:#f7fbfb;color:#48646a;transition:.2s}.hm-queue-summary a:hover,.hm-queue-summary a.is-active{border-color:#64c6b6;background:#eaf7f4;transform:translateY(-1px)}.hm-queue-summary small,.hm-queue-summary strong{display:block}.hm-queue-summary small{font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:.5px}.hm-queue-summary strong{margin-top:7px;color:#123e46;font-size:24px}.hm-queue-toolbar{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap}.hm-queue-note{color:#6f878c;font-size:12px}@media(max-width:991px){.hm-queue-summary{grid-template-columns:repeat(3,1fr)}}@media(max-width:600px){.hm-queue-summary{grid-template-columns:repeat(2,1fr)}}
.hm-invoice-layout{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(300px,.7fr);gap:18px;align-items:start}.hm-invoice-patient{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-bottom:16px}.hm-invoice-patient>div{padding:12px;border-radius:12px;background:#eef7f5}.hm-invoice-patient small,.hm-invoice-patient strong{display:block}.hm-invoice-patient small{color:#71888d;font-size:9px;font-weight:800;text-transform:uppercase}.hm-invoice-items td{vertical-align:middle!important}.hm-invoice-items .item-name{min-width:160px}.hm-invoice-items .item-qty{width:80px}.hm-invoice-items .item-price{min-width:120px}.hm-invoice-items .item-subtotal{min-width:105px;font-weight:700}.hm-payment-fields dl{display:grid;grid-template-columns:1fr auto;gap:7px;padding:12px;border-radius:12px;background:#f1f7f6}.hm-payment-fields dd{text-align:right}.hm-invoice-actions{display:flex;gap:8px;justify-content:flex-end;flex-wrap:wrap}.hm-payment-status{display:inline-block;padding:6px 10px;border-radius:99px;font-size:10px;font-weight:800;text-transform:uppercase}.hm-payment-status.is-draft{background:#e8eef0;color:#587076}.hm-payment-status.is-belum_lunas{background:#fff0d4;color:#946010}.hm-payment-status.is-lunas{background:#d8f4e7;color:#176c4d}.hm-receipt-panel{position:sticky;top:20px}.hm-receipt-tools{display:flex;align-items:center;gap:10px;margin-bottom:10px}.hm-receipt-tools .form-control{width:100px}.hm-receipt{margin:auto;padding:18px;background:#fff;color:#111;box-shadow:0 8px 30px rgba(10,40,45,.14);font-family:Arial,sans-serif;font-size:11px}.hm-receipt.receipt-58{max-width:219px}.hm-receipt.receipt-80{max-width:302px}.receipt-center{text-align:center}.hm-receipt img{width:48px}.hm-receipt h3{margin:5px 0;font-size:15px}.receipt-divider{margin:9px 0;border-top:1px dashed #333}.receipt-meta,.receipt-totals{display:grid;grid-template-columns:1fr auto;gap:4px 8px}.receipt-meta b,.receipt-totals b{text-align:right}.receipt-item{display:flex;justify-content:space-between;gap:8px;margin:6px 0}.receipt-item small{display:block;font-size:9px}.receipt-status{margin-top:10px;padding:6px;border:2px solid #111;text-align:center;font-weight:900}.receipt-footer{font-size:9px;font-style:italic}@media(max-width:1050px){.hm-invoice-layout{grid-template-columns:1fr}.hm-receipt-panel{position:static}.hm-invoice-patient{grid-template-columns:repeat(2,1fr)}}@media print{body *{visibility:hidden!important}#invoice-receipt,#invoice-receipt *{visibility:visible!important}#invoice-receipt{position:absolute;left:0;top:0;margin:0;box-shadow:none;padding:4mm;width:100%;max-width:none}.main-header,.main-sidebar,.main-footer{display:none!important}}
.hm-payment-verification{margin:12px 0;padding:14px;border:1px solid #9bd8c3;border-radius:12px;background:#eaf8f3}.hm-payment-verification>strong{display:block;color:#176c4d;font-size:13px}.hm-payment-verification small{display:block;margin:5px 0 11px;color:#55776d;line-height:1.45}.hm-payment-verification .btn{padding:11px;font-weight:800;white-space:normal}.hm-payment-verification .btn-success{border-color:#258b68;background:#2aa477}.hm-payment-verification .btn-success:hover{background:#238c66}.receipt-verified{margin-top:5px;text-align:center;font-size:8px;font-style:italic}
.hm-finance-cards {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin-bottom: 16px;
}
.hm-fcard {
  position: relative;
  min-height: 98px;
  padding: 14px 16px;
  border: 1px solid var(--hm-border);
  border-radius: 15px;
  background: #ffffff;
  box-shadow: 0 4px 12px rgba(8,47,58,.04);
  overflow: hidden;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.hm-fcard:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 22px rgba(8,47,58,.08);
  border-color: #5eead4;
}
.hm-fcard small { display: block; color: var(--hm-muted); font-size: 10.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .02em; }
.hm-fcard strong { display: block; margin-top: 6px; color: var(--hm-ink); font-size: 20px; font-weight: 800; letter-spacing: -.02em; }
.hm-fcard i { position: absolute; right: 12px; bottom: 8px; font-size: 28px; opacity: .18; color: var(--hm-primary); }
.hm-fcard-sub { display: block; margin-top: 2px; color: #d97706; font-size: 10.5px; font-weight: 700; }

.hm-fcard.is-today strong { color: #0f766e; }
.hm-fcard.is-period strong { color: #0284c7; }
.hm-fcard.is-clinic strong { color: #2563eb; }
.hm-fcard.is-homecare strong { color: #d97706; }
.hm-fcard.is-herbal strong { color: #16a34a; }
.hm-fcard.is-expense strong { color: #dc2626; }
.hm-fcard.is-net strong { color: #059669; }
.hm-fcard.is-due strong { color: #ea580c; }

html.hm-dark .hm-fcard {
  background: #0f2730 !important;
  border-color: #214852 !important;
  box-shadow: 0 4px 14px rgba(0,0,0,.2) !important;
}
html.hm-dark .hm-fcard small { color: #9bb7bd !important; }
html.hm-dark .hm-fcard.is-today strong { color: #5eead4 !important; }
html.hm-dark .hm-fcard.is-period strong { color: #7dd3fc !important; }
html.hm-dark .hm-fcard.is-clinic strong { color: #93c5fd !important; }
html.hm-dark .hm-fcard.is-homecare strong { color: #fde047 !important; }
html.hm-dark .hm-fcard.is-herbal strong { color: #86efac !important; }
html.hm-dark .hm-fcard.is-expense strong { color: #fca5a5 !important; }
html.hm-dark .hm-fcard.is-net strong { color: #6ee7b7 !important; }
html.hm-dark .hm-fcard.is-due strong { color: #fdba74 !important; }

.hm-finance-chart-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin-bottom: 16px;
}
.hm-finance-chart-grid .box {
  margin-bottom: 0;
  border-radius: 15px;
  border: 1px solid #e1ebee;
  box-shadow: 0 4px 14px rgba(8,47,58,.04);
}
.hm-finance-chart-grid .box-body {
  padding: 10px 14px 14px;
}

.hm-finance-branch { display:flex; align-items:center; justify-content:space-between; gap:10px; padding:10px 4px; border-bottom:1px solid #e6efed }
.hm-finance-branch small { display:block; color:#78908c; font-size:10.5px }
.hm-finance-branch b { color:#16705e }

@media(max-width:900px){.hm-finance-cards{grid-template-columns:repeat(2,1fr)}.hm-finance-chart-grid{grid-template-columns:1fr}}
@media(max-width:520px){.hm-finance-cards{grid-template-columns:1fr}}
.hm-herbal-summary{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:16px}.hm-herbal-summary>div{position:relative;padding:16px;border:1px solid #dceae4;border-radius:15px;background:#f4faf7}.hm-herbal-summary small,.hm-herbal-summary strong{display:block}.hm-herbal-summary small{color:#6d867c;font-size:10px;font-weight:800;text-transform:uppercase}.hm-herbal-summary strong{margin-top:8px;color:#174d3e;font-size:25px}.hm-herbal-summary i{position:absolute;right:14px;bottom:12px;color:#4eaf8c;font-size:28px;opacity:.25}.hm-herbal-toolbar{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap}.hm-herbal-toolbar label{display:flex;align-items:center;gap:8px;margin:0}.hm-herbal-toolbar select{width:190px}.hm-herbal-toolbar>input{max-width:300px}.hm-herbal-table td{vertical-align:middle!important}.hm-herbal-table td strong,.hm-herbal-table td small{display:block}.hm-herbal-table td small{margin-top:3px;color:#78908a;font-size:10px}.hm-stock-status{display:inline-block;padding:5px 8px;border-radius:99px;font-size:9px;font-weight:800;text-transform:uppercase}.hm-stock-status.is-safe{color:#176c4d;background:#d8f4e7}.hm-stock-status.is-low{color:#946010;background:#fff0d4}.hm-stock-status.is-out{color:#9a3737;background:#fadddd}.hm-stock-status.is-expiring{color:#724394;background:#eee2f7}@media(max-width:750px){.hm-herbal-summary{grid-template-columns:repeat(2,1fr)}.hm-herbal-toolbar>input{max-width:none;width:100%}}
html.hm-dark .hm-registration-paths,html.hm-dark .hm-online-summary>a{background:#12343d;border-color:#2b535c}html.hm-dark .hm-registration-paths strong{color:#e2efee}html.hm-dark .hm-registration-paths small,html.hm-dark .hm-online-summary>a{color:#afc4c9}html.hm-dark .hm-registration-paths>a{color:#cfe1e3;background:#173a43;border-color:#315660}
@media(max-width:991px){.hm-registration-paths{align-items:stretch;flex-direction:column}.hm-registration-paths>div{width:100%}.hm-registration-paths>a{width:100%;text-align:center}.hm-online-summary{grid-template-columns:1fr 1fr}.hm-online-table{min-width:900px}}

/* Theme switcher */
.hm-theme-menu {
  display: flex !important;
  align-items: center;
  height: 50px;
  padding: 0 7px;
}

.hm-theme-toggle {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 36px;
  padding: 7px 12px;
  color: #fff;
  background: #087f78;
  border: 1px solid #076d67;
  box-shadow: 0 4px 12px rgba(8,127,120,.24);
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .02em;
  transition: background .2s ease, transform .2s ease;
}

.hm-theme-toggle:hover,
.hm-theme-toggle:focus {
  color: #fff;
  background: #05655f;
  border-color: #034f4a;
  outline: 2px solid rgba(8,127,120,.22);
  outline-offset: 2px;
}

.hm-theme-toggle:active { transform: scale(.96); }
.hm-theme-toggle .fa { font-size: 15px; }

.hm-account-greeting {
  display: flex;
  align-items: center;
  gap: 15px;
  margin: 0 0 18px;
  padding: 17px 20px;
  color: #16434b;
  background: linear-gradient(115deg, #effbf9 0%, #fffdf4 100%);
  border: 1px solid #d5ece8;
  border-radius: 17px;
  box-shadow: 0 8px 24px rgba(38,74,83,.07);
}

.hm-greeting-icon {
  display: inline-flex;
  flex: 0 0 44px;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  color: #fff;
  background: linear-gradient(135deg, #0d9488, #087f78);
  border-radius: 14px;
  box-shadow: 0 7px 16px rgba(8,127,120,.2);
  font-size: 19px;
}

.hm-greeting-copy {
  flex: 1;
  min-width: 0;
}

.hm-greeting-time {
  display: block;
  margin-bottom: 3px;
  color: #087f78;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.hm-greeting-message {
  margin: 0;
  color: #244a53;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.5;
}

.hm-greeting-clock {
  flex: 0 0 auto;
  padding: 7px 11px;
  color: #5d747b;
  background: rgba(255,255,255,.8);
  border: 1px solid #e0ecee;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 800;
}

html.hm-dark .hm-theme-toggle {
  color: #102028;
  background: #f8d66d;
  border-color: #e4bd43;
  box-shadow: 0 4px 14px rgba(248,214,109,.2);
}

html.hm-dark .hm-theme-toggle:hover,
html.hm-dark .hm-theme-toggle:focus {
  color: #07151b;
  background: #ffe69c;
  border-color: #f4cc54;
  outline-color: rgba(248,214,109,.25);
}

html.hm-dark .hm-account-greeting {
  color: #dcebed;
  background: linear-gradient(115deg, #12343b 0%, #282b22 100%);
  border-color: #2c4d55;
}

html.hm-dark .hm-greeting-message { color: #e1edef; }
html.hm-dark .hm-greeting-time { color: #75ded3; }
html.hm-dark .hm-greeting-clock {
  color: #c7d8dc;
  background: rgba(7,21,27,.55);
  border-color: #31515a;
}

/* Dark appearance — scoped to the saved html theme so legacy behavior is untouched. */
html.hm-dark {
  color-scheme: dark;
  background: #07151b;
}

html.hm-dark body,
html.hm-dark .content-wrapper,
html.hm-dark .right-side {
  color: #d9e7eb;
  background-color: #0a1b22 !important;
}

html.hm-dark .content-header > h1,
html.hm-dark .content-header > h1 > small,
html.hm-dark h1,
html.hm-dark h2,
html.hm-dark h3,
html.hm-dark h4,
html.hm-dark h5,
html.hm-dark h6,
html.hm-dark label,
html.hm-dark .box-title {
  color: #eaf4f6 !important;
}

html.hm-dark .box,
html.hm-dark .hm-dashboard-hero,
html.hm-dark .hm-search-panel,
html.hm-dark .hm-chart-box,
html.hm-dark .hm-analytics-card,
html.hm-dark .hm-chart-link,
html.hm-dark .hm-active-filter,
html.hm-dark .small-box,
html.hm-dark .info-box,
html.hm-dark .modal-content,
html.hm-dark .dropdown-menu,
html.hm-dark .well,
html.hm-dark .panel,
html.hm-dark .nav-tabs-custom {
  color: #d9e7eb;
  background: #102831 !important;
  border-color: #22414b !important;
  box-shadow: 0 16px 38px rgba(0,0,0,.22);
}

html.hm-dark .hm-domicile-card {
  background: linear-gradient(180deg, #12303a 0%, #0e252d 100%) !important;
  border-color: #294b55 !important;
}

html.hm-dark .content .box-body > .row > [class*="col-"].text-center:has(.knob) {
  color: #e7f2f1;
  background:
    radial-gradient(circle at 50% 22%, rgba(103,216,204,.11), transparent 7rem),
    #12333c !important;
  border-color: #0d252d !important;
  box-shadow: inset 0 0 0 1px #2a5059;
}

html.hm-dark .content .box-body > .row > [class*="col-"].text-center:has(.knob):hover {
  background: #163b44 !important;
  box-shadow: 0 14px 28px rgba(0,0,0,.2), inset 0 0 0 1px #39707a;
}

html.hm-dark .content .box .knob,
html.hm-dark .content .box input.knob {
  color: #e8f3f1 !important;
  -webkit-text-fill-color: #e8f3f1 !important;
  text-shadow: 0 1px 8px rgba(0,0,0,.3);
}

html.hm-dark .content .box .knob-label {
  color: #c9dcdf !important;
}

html.hm-dark .content .box .knob-label h5 {
  color: #8ce5dc !important;
  background: #10443f !important;
}

/* Admin dashboard light palette: a soft version of the teal switch color.
   Diagram surfaces remain visibly separated instead of blending into white. */
html:not(.hm-dark) .hm-dashboard-page {
  color: #244b53;
  background:
    radial-gradient(circle at 92% 2%, rgba(8,127,120,.09), transparent 24rem),
    #e8f3f2 !important;
}

html:not(.hm-dark) .hm-dashboard-page .content {
  background: transparent !important;
}

html:not(.hm-dark) .hm-dashboard-page .box,
html:not(.hm-dark) .hm-dashboard-page .box-body,
html:not(.hm-dark) .hm-dashboard-page .box-footer,
html:not(.hm-dark) .hm-dashboard-page .hm-chart-box {
  color: #244b53 !important;
  background: #f0f8f7 !important;
  border-color: #c7dfdc !important;
}

html:not(.hm-dark) .hm-dashboard-page .box-header {
  color: #174b51 !important;
  background: #dcefed !important;
  border-color: #bddbd7 !important;
}

html:not(.hm-dark) .hm-dashboard-page .box-header .box-title,
html:not(.hm-dark) .hm-dashboard-page .box-header .fa {
  color: #155e5b !important;
}

html:not(.hm-dark) .hm-dashboard-page .box-body > .row > [class*="col-"].text-center:has(.knob),
html:not(.hm-dark) .hm-dashboard-page .hm-domicile-card {
  color: #244b53 !important;
  background:
    radial-gradient(circle at 50% 20%, rgba(8,127,120,.08), transparent 8rem),
    #dcefed !important;
  border-color: #c0dcd8 !important;
  box-shadow: 0 7px 18px rgba(8,76,74,.08), inset 0 0 0 1px rgba(255,255,255,.45) !important;
}

html:not(.hm-dark) .hm-dashboard-page .box-body > .row > [class*="col-"].text-center:has(.knob):hover,
html:not(.hm-dark) .hm-dashboard-page .hm-domicile-card:hover {
  background: #d2e9e6 !important;
  border-color: #8ec7c1 !important;
  box-shadow: 0 14px 28px rgba(8,76,74,.13), inset 0 0 0 1px rgba(255,255,255,.55) !important;
}

html:not(.hm-dark) .hm-dashboard-page .hm-analytics-card,
html:not(.hm-dark) .hm-dashboard-page .hm-account-greeting,
html:not(.hm-dark) .hm-dashboard-page .hm-search-panel,
html:not(.hm-dark) .hm-dashboard-page .hm-active-filter {
  background: #edf7f5 !important;
  border-color: #c5dfdc !important;
}

html:not(.hm-dark) .hm-dashboard-page .knob-label {
  color: #456970 !important;
}

html:not(.hm-dark) .hm-dashboard-page .knob-label h5,
html:not(.hm-dark) .hm-dashboard-page .hm-domicile-total {
  color: #356169 !important;
  background: #c8e8e4 !important;
}

html:not(.hm-dark) .hm-dashboard-page .knob-label h5 b,
html:not(.hm-dark) .hm-dashboard-page .hm-domicile-total strong {
  color: #086f69 !important;
}

/* Admin dashboard dark palette: keep every diagram and former white surface
   consistent with the domicile reference without affecting other pages. */
html.hm-dark .hm-dashboard-page,
html.hm-dark .hm-dashboard-page .content,
html.hm-dark .hm-dashboard-page .box,
html.hm-dark .hm-dashboard-page .box-body,
html.hm-dark .hm-dashboard-page .box-footer,
html.hm-dark .hm-dashboard-page .hm-chart-box,
html.hm-dark .hm-dashboard-page .hm-analytics-card {
  color: #dcebea !important;
  background: #0d2932 !important;
  border-color: #28505a !important;
}

html.hm-dark .hm-dashboard-page .box-header {
  color: #e7f2f1 !important;
  background: #12343d !important;
  border-color: #2b535c !important;
}

html.hm-dark .hm-dashboard-page .box-body > .row {
  background: transparent !important;
}

html.hm-dark .hm-dashboard-page .box-body > .row > [class*="col-"].text-center:has(.knob),
html.hm-dark .hm-dashboard-page .hm-domicile-card {
  color: #dcebea !important;
  background:
    radial-gradient(circle at 50% 20%, rgba(105,220,208,.08), transparent 8rem),
    #12343d !important;
  border-color: #28515b !important;
  box-shadow: inset 0 0 0 1px rgba(103,171,179,.08) !important;
}

html.hm-dark .hm-dashboard-page .box-body > .row > [class*="col-"].text-center:has(.knob):hover,
html.hm-dark .hm-dashboard-page .hm-domicile-card:hover {
  background: #163c45 !important;
  border-color: #39727b !important;
  box-shadow: 0 14px 28px rgba(0,0,0,.2), inset 0 0 0 1px rgba(117,222,211,.12) !important;
}

html.hm-dark .hm-dashboard-page .hm-dashboard-welcome {
  background: linear-gradient(135deg, #12343d 0%, #0d4947 100%) !important;
  border-color: #2b575d !important;
}

html.hm-dark .hm-dashboard-page .hm-account-greeting,
html.hm-dark .hm-dashboard-page .hm-search-panel,
html.hm-dark .hm-dashboard-page .hm-active-filter {
  background: #12343d !important;
  border-color: #2b535c !important;
}

html.hm-dark .hm-dashboard-page .knob-label,
html.hm-dark .hm-dashboard-page .hm-domicile-detail dd,
html.hm-dark .hm-dashboard-page .hm-greeting-message {
  color: #e5f0ef !important;
}

html.hm-dark .hm-dashboard-page .knob-label h5,
html.hm-dark .hm-dashboard-page .hm-domicile-total {
  color: #a8c9ce !important;
  background: #104843 !important;
}

html.hm-dark .hm-dashboard-page .knob-label h5 b,
html.hm-dark .hm-dashboard-page .hm-domicile-total strong {
  color: #83e1d8 !important;
}

html.hm-dark .hm-domicile-total {
  color: #a8c9ce;
  background: #123d3d;
}

html.hm-dark .hm-domicile-total strong { color: #75ded3; }
html.hm-dark .hm-domicile-detail > div { border-color: #294750; }
html.hm-dark .hm-domicile-detail dt { color: #8faab2; }
html.hm-dark .hm-domicile-detail dd { color: #e3f0f2; }

html.hm-dark .box-header,
html.hm-dark .box-footer,
html.hm-dark .panel-heading,
html.hm-dark .modal-header,
html.hm-dark .modal-footer,
html.hm-dark .nav-tabs-custom > .nav-tabs {
  color: #eaf4f6;
  background: #132f39 !important;
  border-color: #284b56 !important;
}

html.hm-dark .hm-dashboard-hero {
  background: linear-gradient(135deg, #12323b 0%, #0b4f4b 100%) !important;
}

html.hm-dark .hm-analytics-card small,
html.hm-dark .hm-chart-period,
html.hm-dark .help-block,
html.hm-dark .text-muted,
html.hm-dark .description-text {
  color: #9cb5bd !important;
}

html.hm-dark .hm-analytics-card strong,
html.hm-dark .hm-chart-link,
html.hm-dark a:not(.btn):not(.logo):not(.sidebar-toggle) {
  color: #73ddd1;
}

html.hm-dark .main-footer {
  color: #9fb5bc;
  background: #0c2028;
  border-top-color: #24424c;
}

html.hm-dark .main-sidebar,
html.hm-dark .left-side {
  background: #07171d !important;
}

html.hm-dark .sidebar-menu > li.header {
  background: transparent !important;
  color: #2dd4bf !important;
  font-weight: 800 !important;
  letter-spacing: .12em !important;
  text-transform: uppercase !important;
}

html.hm-dark .sidebar-menu > li > a {
  color: #ffffff !important;
  font-weight: 600 !important;
}

html.hm-dark .sidebar-menu > li > a > .fa {
  color: #38bdf8 !important;
}

html.hm-dark .sidebar-menu > li:hover > a,
html.hm-dark .sidebar-menu > li.active > a,
html.hm-dark .sidebar-menu > li.menu-open > a {
  color: #ffffff !important;
  background: linear-gradient(90deg, #0d9488, #059669) !important;
}

html.hm-dark .sidebar-menu .treeview-menu {
  background: #0a2028 !important;
}

html.hm-dark .table,
html.hm-dark .table > thead > tr > th,
html.hm-dark .table > tbody > tr > td,
html.hm-dark .table > tfoot > tr > td {
  color: #d8e7eb;
  background: #102831;
  border-color: #284852 !important;
}

html.hm-dark .table-striped > tbody > tr:nth-of-type(odd) > td,
html.hm-dark .table-hover > tbody > tr:hover > td {
  background: #17343e !important;
}

html.hm-dark .form-control,
html.hm-dark .select2-container--default .select2-selection--single,
html.hm-dark .select2-container--default .select2-selection--multiple,
html.hm-dark .select2-dropdown,
html.hm-dark .input-group-addon,
html.hm-dark .dataTables_length select,
html.hm-dark .dataTables_filter input {
  color: #ecf5f7 !important;
  background: #0b2028 !important;
  border-color: #31515b !important;
}

html.hm-dark .form-control::placeholder { color: #78949d; }
html.hm-dark .form-control:focus {
  border-color: #36c8b9 !important;
  box-shadow: 0 0 0 3px rgba(54,200,185,.13);
}

html.hm-dark .select2-container--default .select2-results__option[aria-selected=true],
html.hm-dark .select2-container--default .select2-results__option--highlighted[aria-selected] {
  color: #fff !important;
  background: #087f78 !important;
}

html.hm-dark .pagination > li > a,
html.hm-dark .pagination > li > span {
  color: #bfe3e0;
  background: #102831;
  border-color: #31515b;
}

html.hm-dark .pagination > .active > a,
html.hm-dark .pagination > .active > span {
  color: #fff;
  background: #087f78;
  border-color: #23a99e;
}

html.hm-dark .breadcrumb,
html.hm-dark .content-header > .breadcrumb,
html.hm-dark .content-header > .breadcrumb > li > a {
  color: #9fb9c0 !important;
}

html.hm-dark .dropdown-menu > li > a {
  color: #dcecef !important;
}

html.hm-dark .dropdown-menu > li > a:hover {
  background: #193842 !important;
}

html.hm-dark .alert-info,
html.hm-dark .callout-info {
  color: #d9f8f4;
  background: #0d4e4b !important;
  border-color: #2ba99f;
}

html.hm-dark hr { border-color: #294750; }

@media (max-width: 767px) {
  .hm-theme-menu { padding: 0 3px; }
  .hm-theme-toggle { width: 36px; justify-content: center; padding: 7px; }
  .hm-domicile-card { min-height: 0; margin-bottom: 14px; }
  .hm-domicile-grid,
  .hm-domicile-grid > [class*="col-"] { display: block; }
  .hm-account-greeting { align-items: flex-start; padding: 15px; }
  .hm-greeting-icon { flex-basis: 38px; width: 38px; height: 38px; }
  .hm-greeting-clock { display: none; }
  .hm-greeting-message { font-size: 13px; }
}

/* Standalone review page */
.hm-preview { background: var(--hm-bg); }
.hm-preview-shell { display: grid; grid-template-columns: 245px 1fr; min-height: 100vh; }
.hm-preview-side { padding: 28px 18px; background: var(--hm-sidebar); color: #fff; }
.hm-preview-brand { margin: 0 10px 28px; font-size: 20px; font-weight: 700; }
.hm-preview-brand span { color: #5eead4; }
.hm-preview-menu { margin: 0; padding: 0; list-style: none; }
.hm-preview-menu li { margin: 5px 0; padding: 12px 14px; border-radius: 10px; color: #cbd5e1; }
.hm-preview-menu li.active { background: rgba(45,212,191,.15); color: #fff; box-shadow: inset 3px 0 #5eead4; }
.hm-preview-menu i { width: 24px; color: #5eead4; }
.hm-preview-main { min-width: 0; }
.hm-preview-top { display:flex; align-items:center; justify-content:space-between; height:68px; padding:0 28px; background:#fff; border-bottom:1px solid var(--hm-border); }
.hm-preview-top strong { color: var(--hm-ink); }
.hm-avatar { display:grid; place-items:center; width:38px; height:38px; border-radius:50%; background:#ccfbf1; color:var(--hm-primary); font-weight:700; }
.hm-preview-content { padding: 28px; }
.hm-title { margin: 0; font-size: 28px; font-weight: 700; }
.hm-subtitle { margin: 7px 0 24px; color: var(--hm-muted); }
.hm-stat-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:16px; margin-bottom:20px; }
.hm-stat { position:relative; padding:20px; border:1px solid var(--hm-border); border-radius:var(--hm-radius); background:#fff; box-shadow:var(--hm-shadow); overflow:hidden; }
.hm-stat::after { content:""; position:absolute; right:-18px; top:-24px; width:84px; height:84px; border-radius:50%; background:#ccfbf1; }
.hm-stat small { color:var(--hm-muted); font-weight:600; }
.hm-stat h2 { margin:8px 0 3px; font-size:28px; }
.hm-stat span { color:#16a34a; font-size:12px; }
.hm-grid { display:grid; grid-template-columns:1.5fr 1fr; gap:20px; }
.hm-card { padding:20px; border:1px solid var(--hm-border); border-radius:var(--hm-radius); background:#fff; box-shadow:var(--hm-shadow); }
.hm-card h3 { margin:0 0 18px; font-size:16px; }
.hm-bars { display:flex; align-items:end; gap:14px; height:180px; padding-top:15px; }
.hm-bar { flex:1; min-width:20px; border-radius:8px 8px 3px 3px; background:linear-gradient(#2dd4bf,var(--hm-primary)); }
.hm-queue { display:flex; align-items:center; gap:12px; padding:12px 0; border-bottom:1px solid var(--hm-border); }
.hm-queue:last-child { border:0; }
.hm-queue b { flex:1; }
.hm-pill { padding:5px 9px; border-radius:999px; background:#ecfdf5; color:#15803d; font-size:11px; font-weight:700; }
@media (max-width:900px) { .hm-stat-grid{grid-template-columns:repeat(2,1fr)} .hm-grid{grid-template-columns:1fr} }
@media (max-width:640px) { .hm-preview-shell{grid-template-columns:1fr} .hm-preview-side{display:none} .hm-preview-content{padding:20px 14px} .hm-stat-grid{grid-template-columns:1fr 1fr;gap:10px} .hm-stat{padding:15px} .hm-stat h2{font-size:23px} }
.hm-invoice-items .item-name,.hm-invoice-items .herbal-product-select{min-width:210px}.herbal-stock-hint{display:block;margin-top:5px;color:#27816f;font-size:10px;font-weight:700}
.hm-herbal-summary{grid-template-columns:repeat(5,1fr)}.hm-herbal-analytics{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin-bottom:16px}.hm-herbal-analytics .box{margin:0}.hm-herbal-analytics .box-body{position:relative;min-height:245px}.hm-herbal-analytics canvas{width:100%!important;max-height:205px}.hm-chart-legend{display:flex;justify-content:center;gap:12px;flex-wrap:wrap;margin-top:9px;color:#607b73;font-size:10px;font-weight:700}.hm-chart-legend i{display:inline-block;width:8px;height:8px;margin-right:4px;border-radius:50%}.hm-chart-legend i.is-safe{background:#32b98b}.hm-chart-legend i.is-low{background:#f2b84b}.hm-chart-legend i.is-out{background:#e45b5b}.hm-chart-legend i.is-expiring{background:#9b6bc2}.hm-price-missing{display:inline-block;padding:5px 8px;border-radius:8px;background:#fff0d4;color:#946010;font-size:10px;font-weight:800}@media(max-width:1050px){.hm-herbal-summary{grid-template-columns:repeat(3,1fr)}}@media(max-width:750px){.hm-herbal-analytics{grid-template-columns:1fr}.hm-herbal-summary{grid-template-columns:repeat(2,1fr)}}
.hm-finance-filter{display:flex;align-items:flex-end;gap:10px;flex-wrap:wrap;margin-bottom:16px;padding:13px 15px;border:1px solid #d8e8e5;border-radius:14px;background:#f8fbfa}.hm-finance-filter label{margin:0;color:#617d78;font-size:10px;font-weight:800;text-transform:uppercase}.hm-finance-filter .form-control{min-width:145px;margin-top:5px}.hm-finance-cards.is-eight{grid-template-columns:repeat(4,1fr)}.hm-finance-chart-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin-bottom:18px}.hm-finance-chart-grid .box{margin:0}.hm-finance-chart-grid .box-body{position:relative;min-height:240px}.hm-finance-chart-grid canvas{width:100%!important;max-height:210px}.hm-finance-branch-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}.hm-finance-branch-card{padding:18px;border:1px solid #d8e8e5;border-radius:16px;background:#f7fbfa}.hm-finance-branch-card small,.hm-finance-branch-card strong,.hm-finance-branch-card a{display:block}.hm-finance-branch-card h3{margin:8px 0}.hm-finance-branch-card strong{margin-bottom:14px;color:#16705e;font-size:22px}.hm-finance-branch-card a{color:#397e72;font-weight:800}.hm-finance-table small,.hm-monthly-report small{display:block}.hm-report-head{display:flex;align-items:flex-start;justify-content:space-between;margin-bottom:15px;padding:20px;border-radius:16px;background:linear-gradient(135deg,#0d4851,#16705e);color:#fff}.hm-report-head h2{margin:5px 0}.hm-report-head p{margin:0;opacity:.8}html[data-theme=dark] .hm-finance-filter,html[data-theme=dark] .hm-finance-branch-card{border-color:#28505a;background:#10323a}@media(max-width:1100px){.hm-finance-cards.is-eight{grid-template-columns:repeat(3,1fr)}.hm-finance-branch-grid{grid-template-columns:repeat(2,1fr)}}@media(max-width:800px){.hm-finance-chart-grid{grid-template-columns:1fr}.hm-finance-cards.is-eight{grid-template-columns:repeat(2,1fr)}.hm-finance-branch-grid{grid-template-columns:1fr}}@media print{.hm-finance-filter,.main-header,.main-sidebar,.main-footer,.hm-report-head .btn{display:none!important}.content-wrapper{margin:0!important}.hm-monthly-report{position:absolute;inset:0;background:#fff;color:#111}}
.hm-role-analytics{margin-bottom:22px}.hm-role-heading{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px;padding:20px 24px;border-radius:18px;background:linear-gradient(135deg,#0d4d55,#14866f);color:#fff;box-shadow:0 14px 32px rgba(14,91,83,.18)}.hm-role-heading.is-cashier{background:linear-gradient(135deg,#164d3d,#269763)}.hm-role-heading span{font-size:10px;font-weight:900;letter-spacing:1.5px;opacity:.75}.hm-role-heading h2{margin:4px 0 3px;font-size:23px;font-weight:800}.hm-role-heading p{margin:0;opacity:.78}.hm-role-heading>i{font-size:48px;opacity:.22}.hm-role-kpis{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-bottom:14px}.hm-role-kpis.is-four{grid-template-columns:repeat(4,1fr)}.hm-role-kpis>div{position:relative;min-height:112px;padding:17px;border:1px solid #d8e8e5;border-radius:16px;background:#fff;box-shadow:0 8px 22px rgba(12,55,61,.06)}.hm-role-kpis small,.hm-role-kpis strong,.hm-role-kpis em{display:block}.hm-role-kpis small{color:#66827d;font-size:10px;font-weight:900;text-transform:uppercase;letter-spacing:.4px}.hm-role-kpis strong{margin:9px 0 5px;color:#123b43;font-size:23px;line-height:1.05}.hm-role-kpis em{color:#8aa09c;font-size:10px;font-style:normal}.hm-role-chart-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin-bottom:14px}.hm-role-chart-grid .box{margin:0}.hm-role-chart-grid .box-body{min-height:235px}.hm-role-chart-grid canvas{width:100%!important;max-height:205px}.hm-role-chart-grid .hm-role-chart-wide{grid-column:1/-1}.hm-role-chart-grid .hm-role-chart-wide .box-body{min-height:215px}html[data-theme=dark] .hm-role-kpis>div,html.hm-dark .hm-role-kpis>div{border-color:#28505a;background:#11333b}html[data-theme=dark] .hm-role-kpis strong,html.hm-dark .hm-role-kpis strong{color:#e7f6f3}html[data-theme=dark] .hm-role-kpis small,html.hm-dark .hm-role-kpis small{color:#a9c8c2}@media(max-width:1050px){.hm-role-kpis,.hm-role-kpis.is-four{grid-template-columns:repeat(2,1fr)}}@media(max-width:720px){.hm-role-heading{padding:17px}.hm-role-heading h2{font-size:19px}.hm-role-heading>i{display:none}.hm-role-kpis,.hm-role-kpis.is-four,.hm-role-chart-grid{grid-template-columns:1fr}.hm-role-chart-grid .hm-role-chart-wide{grid-column:auto}.hm-role-kpis strong{font-size:20px}}
/* Kepegawaian, absensi, dan slip gaji */
.hm-staff-dashboard-link{border:0;border-radius:14px;padding:14px 18px;box-shadow:0 8px 24px rgba(20,74,82,.08)}
.hm-staff-dashboard-link>i{font-size:22px;margin-right:10px;vertical-align:middle}
.hm-staff-dashboard-link span{margin-left:8px;color:#55727b}
.hm-staff-dashboard-link .btn{margin-top:-5px}
body.hm-theme-dark .hm-staff-dashboard-link{background:#123a40!important;color:#dff8f3!important}
body.hm-theme-dark .hm-staff-dashboard-link span{color:#a9cbc8}
@media(max-width:767px){
  .hm-staff-dashboard-link span{display:block;margin:6px 0 10px 32px}
  .hm-staff-dashboard-link .btn{float:none!important;display:block;width:100%;margin-top:8px}
}

/* Mobile-first operational layout: Android, iOS and iPad */
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{-webkit-overflow-scrolling:touch}
img,svg,video{max-width:100%;height:auto}
canvas{max-width:100%!important}
.content-wrapper,.content,.box,.box-body,.row>[class*="col-"]{min-width:0}
.hm-mobile-role{display:none}
.table-responsive{-webkit-overflow-scrolling:touch;overscroll-behavior-inline:contain}
.form-control,select.form-control,input.form-control,textarea.form-control{max-width:100%}

@media (min-width:768px) and (max-width:1180px){
  .content{padding:18px}
  .content-header{padding:18px 18px 0}
  .hm-homecare-summary{grid-template-columns:repeat(3,minmax(0,1fr))}
  .hm-homecare-card{grid-template-columns:105px minmax(0,1fr)}
  .hm-dashboard-hero,.hm-role-heading,.hm-homecare-hero{padding:20px}
  .hm-finance-cards,.hm-analytics-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .modal-dialog{width:calc(100% - 48px);max-width:900px;margin:24px auto}
}

@media (max-width:767px){
  body{font-size:13px}
  .wrapper{overflow-x:hidden}
  .main-header{position:sticky;top:0;z-index:1040;height:58px}
  .main-header .logo{display:none!important}
  .main-header .navbar{position:relative;float:none;width:100%;min-height:58px;margin-left:0!important;padding-left:42px}
  .main-header .sidebar-toggle{position:absolute;z-index:3;top:0;left:0;width:42px;height:58px;padding:19px 14px}
  .main-header .navbar-custom-menu{position:absolute;top:0;right:4px;left:42px}
  .main-header .navbar-custom-menu>.navbar-nav{display:flex;align-items:center;width:100%;margin:0}
  .main-header .navbar-custom-menu>.navbar-nav>li{float:left}
  .main-header .navbar-custom-menu>.navbar-nav>.user-menu{order:-1}
  .main-header .navbar-custom-menu>.navbar-nav>.hm-theme-menu{margin-left:auto}
  .navbar-custom-menu>.navbar-nav>li>a{padding-left:8px;padding-right:8px}
  .navbar-nav>.user-menu>a{display:grid;grid-template-columns:34px auto;grid-template-rows:21px 16px;align-items:center;column-gap:8px;height:58px;padding-top:9px!important;padding-bottom:8px!important}
  .navbar-nav>.user-menu>a>.user-image{grid-row:1/3;float:none;width:34px!important;height:34px!important;margin:0}
  .navbar-nav>.user-menu>a>.hidden-xs{display:block!important;max-width:130px;overflow:hidden;align-self:end;font-size:12px;font-weight:800;line-height:16px;text-overflow:ellipsis;white-space:nowrap}
  .navbar-nav>.user-menu>a>.hm-mobile-role{display:block;max-width:130px;overflow:hidden;align-self:start;color:#60807e;font-size:9px;font-weight:700;line-height:13px;text-overflow:ellipsis;white-space:nowrap}
  html.hm-dark .navbar-nav>.user-menu>a>.hm-mobile-role{color:#a7c8c6}
  .main-sidebar .user-panel{display:block}
  .main-sidebar{position:fixed!important;z-index:1035!important;top:58px!important;left:0!important;width:245px!important;height:calc(100vh - 58px)!important;padding-top:0!important;transform:translate3d(-100%,0,0)!important;transition:transform 0.3s cubic-bezier(0.4, 0, 0.2, 1)!important;box-shadow:4px 0 25px rgba(0,0,0,0.3)!important;}
  body.sidebar-open .main-sidebar{transform:translate3d(0,0,0)!important;}
  body.sidebar-open::after{content:"";position:fixed;top:58px;left:0;right:0;bottom:0;background:rgba(15,23,42,0.6);backdrop-filter:blur(2px);z-index:1030;cursor:pointer;}
  .content-wrapper,.main-footer{width:100%;margin-left:0!important;transform:none!important}
  .sidebar-open .content-wrapper,.sidebar-open .main-footer{transform:none!important}
  .content-wrapper{overflow:hidden}
  .content{padding:12px}
  .content-header{padding:15px 13px 0}
  .content-header>h1{font-size:23px;line-height:1.2}
  .content-header>h1>small{display:block;margin-top:4px;font-size:12px}
  .content-header>.breadcrumb{position:static;float:none;margin:9px 0 0;padding:7px 10px;white-space:nowrap;overflow-x:auto}
  .box{margin-bottom:12px;border-radius:14px}
  .box-header{padding:13px 14px}
  .box-header>.box-title{font-size:15px;line-height:1.35}
  .box-body,.box-footer{padding:13px}
  .row{margin-left:-6px;margin-right:-6px}
  .row>[class*="col-"]{padding-left:6px;padding-right:6px}
  .form-group{margin-bottom:12px}
  label{line-height:1.35}
  .form-control,input[type=date],input[type=time],select{min-height:44px;font-size:16px!important}
  textarea.form-control{min-height:90px}
  .input-group .form-control{min-height:44px}
  .input-group-btn>.btn{min-height:44px}
  .btn{min-height:40px;padding:9px 12px;white-space:normal;touch-action:manipulation}
  .btn-xs{min-height:34px;padding:7px 9px}
  .btn-sm{min-height:38px;padding:8px 10px}
  .form-inline .form-control{display:block;width:100%;margin-bottom:7px}
  .form-inline .btn{width:100%;margin:3px 0}
  .alert{padding:12px;border-radius:12px}
  .table-responsive{margin-bottom:0;border:0}
  .table-responsive>.table{min-width:680px;margin-bottom:4px}
  .table>thead>tr>th,.table>tbody>tr>td{padding:10px 9px;vertical-align:middle}
  .dataTables_wrapper .dataTables_length,.dataTables_wrapper .dataTables_filter{float:none!important;width:100%;margin:0 0 9px;text-align:left!important}
  .dataTables_wrapper .dataTables_filter input{width:calc(100% - 58px)!important;min-height:40px}
  .dataTables_wrapper .dataTables_info{float:none!important;padding:10px 0!important}
  .dataTables_wrapper .dataTables_paginate{float:none!important;overflow-x:auto;text-align:left!important;white-space:nowrap}
  .pagination>li>a,.pagination>li>span{padding:8px 11px}
  .modal{padding:0!important}
  .modal-dialog{width:auto;margin:10px}
  .modal-content{border-radius:16px}
  .modal-header,.modal-body,.modal-footer{padding:14px}
  .modal-footer .btn{display:block;width:100%;margin:7px 0 0!important}
  .select2-container{width:100%!important}
  .select2-container--default .select2-selection--single{min-height:44px}
  .select2-container--default .select2-selection--single .select2-selection__rendered{line-height:42px}
  .select2-container--default .select2-selection--single .select2-selection__arrow{height:42px}
  /* Compact & Modern Hero Banners */
  .hm-dashboard-hero, .hm-role-heading, .hm-homecare-hero, .hm-report-head {
    padding: 12px 14px !important;
    border-radius: 12px !important;
  }
  .hm-dashboard-hero h1, .hm-dashboard-hero h2, .hm-homecare-hero h2, .hm-role-heading h2 {
    font-size: 16px !important;
    line-height: 1.25 !important;
    margin: 0 0 4px !important;
  }
  .hm-dashboard-hero p, .hm-role-heading p, .hm-homecare-hero p {
    font-size: 11px !important;
    line-height: 1.3 !important;
    margin: 0 !important;
  }

  /* Compact 2-Column Grid for KPI & Stat Boxes on Mobile */
  .hm-role-kpis, .hm-role-kpis.is-four, .hm-finance-cards, .hm-finance-cards.is-eight, .hm-herbal-summary, .hm-role-kpi-grid {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
    margin-bottom: 12px !important;
  }
  .hm-role-kpis > div, .hm-finance-cards > div, .hm-herbal-summary > div {
    min-height: 60px !important;
    padding: 8px 10px !important;
    border-radius: 10px !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
  }
  .hm-role-kpis strong, .hm-finance-cards strong, .hm-herbal-summary strong {
    font-size: 16px !important;
    line-height: 1.2 !important;
    overflow-wrap: anywhere !important;
  }
  .hm-role-kpis small, .hm-role-kpis span, .hm-finance-cards small, .hm-finance-cards span {
    font-size: 10px !important;
    font-weight: 700 !important;
    letter-spacing: 0.03em !important;
    text-transform: uppercase !important;
    line-height: 1.2 !important;
  }

  /* Compact AdminLTE Small Boxes on Mobile */
  .small-box {
    margin-bottom: 8px !important;
    border-radius: 10px !important;
  }
  .small-box .inner {
    padding: 8px 10px !important;
  }
  .small-box h3 {
    font-size: 18px !important;
    font-weight: 800 !important;
    margin: 0 0 2px !important;
  }
  .small-box p {
    font-size: 11px !important;
    margin: 0 !important;
  }
  .small-box .icon {
    font-size: 36px !important;
    top: 4px !important;
    right: 8px !important;
    opacity: 0.22 !important;
  }
  .small-box-footer {
    padding: 4px 0 !important;
    font-size: 10px !important;
  }

  /* Agenda Operasional & Home Care Compact Layout */
  .hm-homecare-summary {
    display: flex !important;
    gap: 6px !important;
    margin-right: -10px !important;
    padding: 2px 10px 6px 0 !important;
    overflow-x: auto !important;
    scroll-snap-type: x proximity !important;
  }
  .hm-homecare-summary > a {
    flex: 0 0 130px !important;
    min-height: 52px !important;
    padding: 7px 9px !important;
    border-radius: 10px !important;
    scroll-snap-align: start !important;
  }
  .hm-homecare-summary > a strong {
    font-size: 16px !important;
  }
  .hm-homecare-summary > a small {
    font-size: 10px !important;
  }
  .hm-homecare-tabs {
    margin-right: -10px !important;
    padding: 0 10px 4px 0 !important;
    gap: 4px !important;
  }
  .hm-homecare-tabs .btn {
    padding: 5px 9px !important;
    font-size: 11px !important;
    border-radius: 8px !important;
    min-height: 32px !important;
  }

  /* Compact Home Care Cards & Timelines */
  .hm-homecare-card {
    display: block !important;
    border-radius: 10px !important;
    margin-bottom: 10px !important;
  }
  .hm-homecare-time {
    padding: 8px 11px !important;
    font-size: 12px !important;
  }
  .hm-homecare-time strong {
    font-size: 16px !important;
  }
  .hm-homecare-main {
    padding: 10px 11px !important;
  }
  .hm-homecare-main h4 {
    font-size: 14px !important;
    margin: 0 0 4px !important;
  }
  .hm-homecare-meta {
    gap: 4px !important;
    margin-top: 4px !important;
  }
  .hm-homecare-meta span {
    padding: 3px 6px !important;
    font-size: 10px !important;
    border-radius: 6px !important;
  }
  .hm-visit-timeline {
    gap: 5px !important;
    padding: 3px 10px 5px 0 !important;
  }
  .hm-visit-timeline span {
    flex: 0 0 92px !important;
    padding: 3px 6px !important;
    font-size: 10px !important;
    border-radius: 6px !important;
  }

  /* Compact Cards, Headers & Tables */
  .box-header {
    padding: 9px 11px !important;
  }
  .box-header > .box-title {
    font-size: 13px !important;
    font-weight: 700 !important;
  }
  .box-body, .box-footer {
    padding: 9px 11px !important;
  }
  .table > thead > tr > th, .table > tbody > tr > td {
    padding: 6px 8px !important;
    font-size: 12px !important;
  }
  .label, .badge {
    padding: 3px 6px !important;
    font-size: 10px !important;
    border-radius: 6px !important;
  }
  .hm-homecare-actions {
    align-items: stretch !important;
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 6px !important;
  }
  .hm-homecare-actions > .btn, .hm-homecare-actions > form, .hm-homecare-actions > form > .btn {
    width: 100% !important;
  }
  .hm-homecare-actions .hm-cancel-visit, .hm-homecare-actions .form-inline {
    grid-column: 1 / -1 !important;
  }
  .hm-homecare-actions .label {
    grid-column: 1 / -1 !important;
    padding: 7px !important;
    white-space: normal !important;
  }
  .hm-homecare-pagination {
    flex-wrap: wrap !important;
  }
  .chart, .chart-responsive, .hm-role-chart-grid .box-body, .hm-finance-chart-grid .box-body, .hm-herbal-analytics .box-body {
    min-height: 180px !important;
  }
  .main-footer {
    padding: 12px !important;
    text-align: center !important;
  }
}

@media (max-width:420px){
  .main-header .navbar{margin-left:0!important;padding-left:42px}
  .navbar-nav>.user-menu>a>.hidden-xs,.navbar-nav>.user-menu>a>.hm-mobile-role{max-width:105px}
  .content{padding:8px}
  .content-header{padding-left:8px;padding-right:8px}
  .hm-role-kpis,.hm-role-kpis.is-four,.hm-finance-cards,.hm-finance-cards.is-eight,.hm-herbal-summary{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .hm-homecare-actions{grid-template-columns:1fr 1fr!important}
  .hm-homecare-title h3{font-size:15px;overflow-wrap:anywhere}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{scroll-behavior:auto!important;animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
}

/* ==========================================================
   HERBAL SALES MENU DESIGN SYSTEM (LIGHT & DARK MODE)
   ========================================================== */

/* 1. LIGHT MODE DEFAULT DESIGN */
.hm-herbal-card {
  background: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 14px !important;
  box-shadow: 0 4px 14px rgba(15, 23, 42, 0.04) !important;
  overflow: hidden;
}

.hm-herbal-card > .box-header {
  background: #f8fafc !important;
  color: #0f172a !important;
  border-bottom: 1px solid #e2e8f0 !important;
  padding: 14px 18px !important;
}

.hm-herbal-card > .box-header .box-title {
  color: #0f172a !important;
  font-weight: 700 !important;
  font-size: 15px !important;
  letter-spacing: 0.01em;
}

.hm-herbal-card > .box-header .box-title i {
  color: #0d9488 !important;
  margin-right: 6px;
}

.hm-herbal-table {
  margin-bottom: 0 !important;
}

.hm-herbal-table > thead > tr > th {
  background: #f1f5f9 !important;
  color: #0f172a !important;
  font-weight: 700 !important;
  border-bottom: 2px solid #cbd5e1 !important;
  padding: 12px 14px !important;
}

.hm-herbal-table > tbody > tr > td {
  padding: 12px 14px !important;
  vertical-align: middle !important;
  color: #1e293b !important;
  border-top: 1px solid #f1f5f9 !important;
  background-color: #ffffff !important;
}

.hm-herbal-table > tbody > tr:nth-of-type(odd) > td {
  background-color: #f8fafc !important;
}

.hm-herbal-table > tbody > tr:hover > td {
  background-color: #f0fdfa !important;
}

.hm-text-user {
  color: #0d9488 !important;
  font-weight: 700 !important;
}


/* 2. DARK MODE OVERRIDES (html.hm-dark) */
html.hm-dark .hm-herbal-card {
  background: #11232b !important;
  border: 1px solid #1e3b47 !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25) !important;
}

html.hm-dark .hm-herbal-card > .box-header {
  background: #162f3a !important;
  color: #ffffff !important;
  border-bottom: 1px solid #1e3b47 !important;
}

html.hm-dark .hm-herbal-card > .box-header .box-title {
  color: #ffffff !important;
  font-weight: 700 !important;
}

html.hm-dark .hm-herbal-card > .box-header .box-title i {
  color: #2dd4bf !important;
}

html.hm-dark .hm-herbal-table > thead > tr > th {
  background: #183744 !important;
  color: #5eead4 !important;
  border-bottom: 2px solid #234b5c !important;
}

html.hm-dark .hm-herbal-table > tbody > tr > td {
  background-color: #11232b !important;
  color: #e2e8f0 !important;
  border-top: 1px solid #1a3542 !important;
}

html.hm-dark .hm-herbal-table > tbody > tr:nth-of-type(odd) > td {
  background-color: #142b35 !important;
}

html.hm-dark .hm-herbal-table > tbody > tr:hover > td {
  background-color: #1a3946 !important;
  color: #ffffff !important;
}

html.hm-dark .hm-text-user {
  color: #2dd4bf !important;
  font-weight: 700 !important;
}

html.hm-dark .hm-herbal-table .form-control {
  background-color: #0c1a20 !important;
  color: #ffffff !important;
  border-color: #234b5c !important;
}

html.hm-dark .hm-herbal-table .input-group-addon {
  background-color: #183744 !important;
  color: #2dd4bf !important;
  border-color: #234b5c !important;
}

/* ========================================== */
/* MANAGER DASHBOARD DYNAMIC THEME STYLES     */
/* ========================================== */
.hm-manager-card {
  border-radius: 16px !important;
  border: 1px solid var(--hm-border) !important;
  background: #ffffff;
  box-shadow: 0 4px 18px rgba(0,0,0,0.03);
  margin-bottom: 18px;
  overflow: hidden;
}

.hm-manager-card .box-header {
  background: #f8fafc;
  border-bottom: 1px solid #e2e8f0;
  padding: 12px 18px;
}

.hm-manager-card .box-title {
  font-weight: 700;
  font-size: 14px;
  color: #0f172a;
}

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

.hm-manager-card .list-group-item {
  background: transparent;
  border-color: #e2e8f0;
  color: #1e293b;
}

.hm-filter-box {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 14px;
  margin-bottom: 18px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.02);
}

/* Dark Mode Overrides for Manager Dashboard */
html.hm-dark .nav-tabs-custom,
html.hm-dark .nav-tabs-custom > .tab-content {
  background: #0b2228 !important;
  border-color: #24464f !important;
  color: #f1f5f9 !important;
  box-shadow: 0 4px 20px rgba(0,0,0,0.3) !important;
}

html.hm-dark .nav-tabs-custom > .nav-tabs {
  background: #07191e !important;
  border-bottom-color: #1e3c43 !important;
}

html.hm-dark .nav-tabs-custom > .nav-tabs > li > a {
  color: #cbd5e1 !important;
}

html.hm-dark .nav-tabs-custom > .nav-tabs > li.active > a {
  background: #0b2228 !important;
  color: #5eead4 !important;
  border-bottom-color: transparent !important;
}

html.hm-dark .hm-manager-card,
html.hm-dark .hm-manager-card .box-body,
html.hm-dark .hm-manager-card .table-responsive {
  background: #103038 !important;
  border-color: #234b56 !important;
  color: #f1f5f9 !important;
  box-shadow: 0 4px 20px rgba(0,0,0,0.2) !important;
}

html.hm-dark .hm-manager-card .box-header {
  background: #071d22 !important;
  border-bottom-color: #1e3f47 !important;
}

html.hm-dark .hm-manager-card .box-title {
  color: #ffffff !important;
}

html.hm-dark .table {
  background: #103038 !important;
  color: #f1f5f9 !important;
}

html.hm-dark .table > tbody > tr > td,
html.hm-dark .table > tbody > tr > th,
html.hm-dark .table > tfoot > tr > td,
html.hm-dark .table > tfoot > tr > th {
  background: #103038 !important;
  color: #f1f5f9 !important;
  border-color: #1a3d46 !important;
}

html.hm-dark .table-striped > tbody > tr:nth-of-type(odd) > td {
  background-color: #0b252b !important;
}

html.hm-dark .table-hover > tbody > tr:hover > td {
  background-color: #18444f !important;
  color: #ffffff !important;
}

html.hm-dark .table > thead > tr > th {
  background: #071d22 !important;
  color: #5eead4 !important;
  border-bottom-color: #1e3f47 !important;
}

html.hm-dark .table td strong,
html.hm-dark .table td b {
  color: #ffffff !important;
}

html.hm-dark .table td small,
html.hm-dark .table td .text-muted,
html.hm-dark .text-muted {
  color: #94a3b8 !important;
}

html.hm-dark .hm-manager-card .list-group-item {
  background: #103038 !important;
  border-color: #1a3d46 !important;
  color: #f1f5f9 !important;
}

html.hm-dark .hm-manager-card .list-group-item b {
  color: #ffffff !important;
}

html.hm-dark .hm-role-kpis > div {
  background: #103038 !important;
  border-color: #234b56 !important;
  color: #ffffff !important;
}

html.hm-dark .hm-role-kpis strong {
  color: #ffffff !important;
}

html.hm-dark .hm-role-kpis small {
  color: #94a3b8 !important;
}

html.hm-dark .hm-role-kpis em,
html.hm-dark .hm-role-kpis span {
  color: #5eead4 !important;
}

html.hm-dark .hm-filter-box {
  background: #103038 !important;
  border-color: #234b56 !important;
  color: #f1f5f9 !important;
}

html.hm-dark .hm-filter-box label,
html.hm-dark .hm-filter-box span {
  color: #f1f5f9 !important;
}

html.hm-dark .hm-filter-box .form-control {
  background: #071d22 !important;
  border-color: #1e3f47 !important;
  color: #ffffff !important;
}

/* Light Mode High Contrast Overrides */
html:not(.hm-dark) .table > tbody > tr > td {
  background: #ffffff !important;
  color: #1e293b !important;
}

html:not(.hm-dark) .table-striped > tbody > tr:nth-of-type(odd) > td {
  background-color: #f8fafc !important;
}

html:not(.hm-dark) .table td strong,
html:not(.hm-dark) .table td b {
  color: #0f172a !important;
}

html:not(.hm-dark) .table td small,
html:not(.hm-dark) .table td .text-muted {
  color: #475569 !important;
}

/* ========================================== */
/* CREATIVE STEPPED INFOGRAPHIC CHART STYLES  */
/* ========================================== */
.hm-infographic-wrapper {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  min-width: 700px;
  height: 290px;
  padding: 8px 6px 0;
  position: relative;
}

.hm-info-bar-col {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 0 4px;
  height: 100%;
  justify-content: flex-end;
  position: relative;
}

.hm-info-card-popup {
  width: 100%;
  max-width: 84px;
  background: #ffffff;
  border: 1.5px solid #ccc;
  border-radius: 7px;
  padding: 4px 2px;
  text-align: center;
  box-shadow: 0 3px 10px rgba(0,0,0,0.05);
  z-index: 2;
  transition: transform 0.2s ease;
}

.hm-info-card-popup:hover {
  transform: translateY(-3px);
}

.hm-popup-title {
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.3px;
}

.hm-popup-value {
  font-size: 11px;
  font-weight: 800;
  margin: 1px 0;
}

.hm-popup-sub {
  font-size: 8px;
  color: #64748b;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.hm-info-line {
  width: 2px;
  height: 20px;
  background: #ccc;
  position: relative;
}

.hm-info-line::before {
  content: '';
  position: absolute;
  top: -3px;
  left: -2px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: inherit;
}

.hm-info-bar-track {
  width: 100%;
  max-width: 54px;
  height: 140px;
  background: rgba(0,0,0,0.03);
  border-radius: 6px 6px 0 0;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
}

.hm-info-bar-fill {
  width: 100%;
  border-radius: 5px 5px 0 0;
  transition: height 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

.hm-info-axis-badge {
  width: 100%;
  max-width: 54px;
  padding: 2px 0;
  text-align: center;
  font-weight: 800;
  font-size: 11px;
  color: #ffffff;
  border-radius: 0 0 5px 5px;
  margin-bottom: 4px;
}

.hm-info-label-title {
  font-size: 10px;
  font-weight: 700;
  color: #1e293b;
  text-align: center;
  white-space: nowrap;
}

.hm-info-label-sub {
  font-size: 9px;
  color: #64748b;
  text-align: center;
  white-space: nowrap;
}

/* Colors for 8 Infographic Columns */
.color-1 .hm-info-card-popup { border-color: #be123c; }
.color-1 .hm-popup-title, .color-1 .hm-popup-value { color: #be123c; }
.color-1 .hm-info-line { background: #be123c; }
.color-1 .hm-info-bar-fill, .color-1 .hm-info-axis-badge { background: linear-gradient(180deg, #e11d48, #9f1239); }

.color-2 .hm-info-card-popup { border-color: #6d28d9; }
.color-2 .hm-popup-title, .color-2 .hm-popup-value { color: #6d28d9; }
.color-2 .hm-info-line { background: #6d28d9; }
.color-2 .hm-info-bar-fill, .color-2 .hm-info-axis-badge { background: linear-gradient(180deg, #7c3aed, #5b21b6); }

.color-3 .hm-info-card-popup { border-color: #1d4ed8; }
.color-3 .hm-popup-title, .color-3 .hm-popup-value { color: #1d4ed8; }
.color-3 .hm-info-line { background: #1d4ed8; }
.color-3 .hm-info-bar-fill, .color-3 .hm-info-axis-badge { background: linear-gradient(180deg, #2563eb, #1e40af); }

.color-4 .hm-info-card-popup { border-color: #0284c7; }
.color-4 .hm-popup-title, .color-4 .hm-popup-value { color: #0284c7; }
.color-4 .hm-info-line { background: #0284c7; }
.color-4 .hm-info-bar-fill, .color-4 .hm-info-axis-badge { background: linear-gradient(180deg, #0369a1, #075985); }

.color-5 .hm-info-card-popup { border-color: #0d9488; }
.color-5 .hm-popup-title, .color-5 .hm-popup-value { color: #0d9488; }
.color-5 .hm-info-line { background: #0d9488; }
.color-5 .hm-info-bar-fill, .color-5 .hm-info-axis-badge { background: linear-gradient(180deg, #14b8a6, #0f766e); }

.color-6 .hm-info-card-popup { border-color: #059669; }
.color-6 .hm-popup-title, .color-6 .hm-popup-value { color: #059669; }
.color-6 .hm-info-line { background: #059669; }
.color-6 .hm-info-bar-fill, .color-6 .hm-info-axis-badge { background: linear-gradient(180deg, #10b981, #047857); }

.color-7 .hm-info-card-popup { border-color: #65a30d; }
.color-7 .hm-popup-title, .color-7 .hm-popup-value { color: #65a30d; }
.color-7 .hm-info-line { background: #65a30d; }
.color-7 .hm-info-bar-fill, .color-7 .hm-info-axis-badge { background: linear-gradient(180deg, #84cc16, #4d7c0f); }

.color-8 .hm-info-card-popup { border-color: #ea580c; }
.color-8 .hm-popup-title, .color-8 .hm-popup-value { color: #ea580c; }
.color-8 .hm-info-line { background: #ea580c; }
.color-8 .hm-info-bar-fill, .color-8 .hm-info-axis-badge { background: linear-gradient(180deg, #f97316, #c2410c); }

/* Dark Mode Overrides for Infographic Chart */
html.hm-dark .hm-info-card-popup {
  background: #09272f !important;
  box-shadow: 0 4px 14px rgba(0,0,0,0.3) !important;
}
html.hm-dark .hm-popup-sub {
  color: #94a3b8 !important;
}
html.hm-dark .hm-info-bar-track {
  background: rgba(255,255,255,0.05) !important;
}
html.hm-dark .hm-info-label-title {
  color: #f1f5f9 !important;
}
html.hm-dark .hm-info-label-sub {
  color: #94a3b8 !important;
}

/* Tablet & Mobile Media Queries for Infographic Chart */
@media (max-width: 1024px) {
  .hm-infographic-wrapper {
    min-width: 640px;
    height: 260px;
  }
  .hm-info-card-popup {
    max-width: 72px;
  }
  .hm-popup-value {
    font-size: 10px;
  }
  .hm-info-bar-track {
    max-width: 44px;
    height: 120px;
  }
  .hm-info-axis-badge {
    max-width: 44px;
    font-size: 10px;
  }
}

@media (max-width: 767px) {
  .hm-infographic-wrapper {
    min-width: 580px;
    height: 240px;
    padding-bottom: 6px;
  }
  .hm-info-bar-col {
    margin: 0 2px;
  }
  .hm-info-card-popup {
    max-width: 64px;
    padding: 3px 1px;
  }
  .hm-popup-title {
    font-size: 8px;
  }
  .hm-popup-value {
    font-size: 9px;
  }
  .hm-info-bar-track {
    max-width: 36px;
    height: 100px;
  }
  .hm-info-axis-badge {
    max-width: 36px;
    font-size: 9px;
  }
  .hm-info-label-title {
    font-size: 9px;
  }
  .hm-info-label-sub {
    font-size: 8px;
  }
/* ========================================== */
/* COMPACT USER DROPDOWN LOGOUT MODAL         */
/* ========================================== */
.navbar-nav > .user-menu > .dropdown-menu {
  width: 210px !important;
  min-width: 210px !important;
  border-radius: 14px !important;
  box-shadow: 0 10px 30px rgba(0,0,0,0.18) !important;
  border: 1px solid rgba(0,0,0,0.08) !important;
  overflow: hidden !important;
  padding: 0 !important;
  right: 8px !important;
  left: auto !important;
}

.navbar-nav > .user-menu > .dropdown-menu > .user-header {
  height: auto !important;
  padding: 12px 14px !important;
  text-align: center !important;
  background: linear-gradient(135deg, #092f3a, #0b4650) !important;
}

.navbar-nav > .user-menu > .dropdown-menu > .user-header > img.img-circle {
  width: 44px !important;
  height: 44px !important;
  border: 2px solid rgba(255,255,255,0.3) !important;
  margin: 0 auto 6px !important;
  float: none !important;
  display: block !important;
}

.navbar-nav > .user-menu > .dropdown-menu > .user-header > p {
  margin: 0 !important;
  font-size: 13px !important;
  font-weight: 800 !important;
  color: #ffffff !important;
  line-height: 1.3 !important;
}

.navbar-nav > .user-menu > .dropdown-menu > .user-header > p small {
  font-size: 10px !important;
  display: block !important;
  color: #a7f3d0 !important;
  margin-top: 2px !important;
  font-weight: 600 !important;
}

.navbar-nav > .user-menu > .dropdown-menu > .user-footer {
  padding: 8px 12px !important;
  background: #f8fafc !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  border-top: 1px solid #e2e8f0 !important;
}

.navbar-nav > .user-menu > .dropdown-menu > .user-footer .btn {
  background: #ef4444 !important;
  color: #ffffff !important;
  border: none !important;
  border-radius: 8px !important;
  font-weight: 700 !important;
  font-size: 11px !important;
  padding: 5px 14px !important;
  box-shadow: 0 2px 6px rgba(239, 68, 68, 0.3) !important;
  transition: all 0.2s ease !important;
}

.navbar-nav > .user-menu > .dropdown-menu > .user-footer .btn:hover {
  background: #dc2626 !important;
  transform: translateY(-1px) !important;
}

/* Dark Mode Overrides for Compact Logout Menu */
html.hm-dark .navbar-nav > .user-menu > .dropdown-menu {
  background: #09272f !important;
  border-color: #24464f !important;
  box-shadow: 0 10px 30px rgba(0,0,0,0.5) !important;
}

html.hm-dark .navbar-nav > .user-menu > .dropdown-menu > .user-footer {
  background: #071d22 !important;
  border-top-color: #1e3f47 !important;
}

/* ========================================== */
/* THERAPIST KPI CARDS DYNAMIC THEME STYLES   */
/* ========================================== */

/* Light Mode (Default) */
.hm-kpi-announcement-callout {
  background: #f0fdf4 !important;
  border-left: 4px solid #059669 !important;
  color: #166534 !important;
  margin-bottom: 15px;
  border-radius: 8px;
  padding: 12px 16px;
}

.hm-therapist-kpi-item {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-left: 4px solid #0d9488;
  border-radius: 10px;
  padding: 12px 14px;
  margin-bottom: 12px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.03);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.hm-therapist-kpi-item h4 {
  color: #0f172a;
}

.hm-therapist-kpi-item p {
  color: #475569;
}

.hm-therapist-kpi-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: #f8fafc;
  padding: 6px 10px;
  border-radius: 6px;
  border: 1px solid #e2e8f0;
}

.hm-therapist-kpi-footer span {
  color: #64748b;
}

.hm-therapist-kpi-footer strong {
  color: #059669;
}

/* Dark Mode Overrides (html.hm-dark) */
html.hm-dark .hm-kpi-announcement-callout {
  background: #09272f !important;
  border-left-color: #5eead4 !important;
  color: #5eead4 !important;
}

html.hm-dark .hm-kpi-announcement-callout p,
html.hm-dark .hm-kpi-announcement-callout strong {
  color: #e2e8f0 !important;
}

html.hm-dark .hm-therapist-kpi-item {
  background: #103038 !important;
  border-color: #234b56 !important;
  border-left-color: #5eead4 !important;
  box-shadow: 0 4px 14px rgba(0,0,0,0.2) !important;
}

html.hm-dark .hm-therapist-kpi-item h4 {
  color: #ffffff !important;
}

html.hm-dark .hm-therapist-kpi-item p {
  color: #cbd5e1 !important;
}

html.hm-dark .hm-therapist-kpi-footer {
  background: #071d22 !important;
  border-color: #1e3f47 !important;
}

html.hm-dark .hm-therapist-kpi-footer span {
  color: #94a3b8 !important;
}

html.hm-dark .hm-therapist-kpi-footer strong {
  color: #5eead4 !important;
}

html.hm-dark .box.box-teal {
  background: #103038 !important;
  border-color: #234b56 !important;
}

html.hm-dark .box.box-teal .box-header {
  background: #071d22 !important;
  border-bottom-color: #1e3f47 !important;
}

html.hm-dark .box.box-teal .box-title {
  color: #ffffff !important;
}

/* ========================================== */
/* KEUANGAN MODULE DARK MODE HARMONIZATION    */
/* ========================================== */

html.hm-dark .box.box-solid.box-info > .box-header,
html.hm-dark .box.box-solid.box-primary > .box-header,
html.hm-dark .box.box-solid.box-success > .box-header,
html.hm-dark .box.box-solid.box-warning > .box-header,
html.hm-dark .box.box-solid.box-danger > .box-header {
  background: linear-gradient(135deg, #092f3a, #0b4650) !important;
  color: #ffffff !important;
  border-bottom: 1px solid #1e4550 !important;
}

html.hm-dark .box.box-solid.box-info > .box-header .box-title,
html.hm-dark .box.box-solid.box-primary > .box-header .box-title,
html.hm-dark .box.box-solid.box-success > .box-header .box-title,
html.hm-dark .box.box-solid.box-warning > .box-header .box-title,
html.hm-dark .box.box-solid.box-danger > .box-header .box-title {
  color: #5eead4 !important;
}

html.hm-dark .nav-tabs-custom {
  background: #0b2c34 !important;
  border-color: #1e4550 !important;
}

html.hm-dark .nav-tabs-custom > .nav-tabs {
  background: #071d22 !important;
  border-bottom-color: #1e4550 !important;
}

html.hm-dark .nav-tabs-custom > .nav-tabs > li > a {
  color: #94a3b8 !important;
}

html.hm-dark .nav-tabs-custom > .nav-tabs > li.active > a,
html.hm-dark .nav-tabs-custom > .nav-tabs > li.active > a:hover {
  background: #0b2c34 !important;
  color: #5eead4 !important;
  border-color: #1e4550 !important;
}

html.hm-dark .nav-tabs-custom > .tab-content {
  background: #0b2c34 !important;
  color: #ffffff !important;
}

html.hm-dark .table-striped > tbody > tr:nth-of-type(odd) {
  background-color: rgba(255, 255, 255, 0.03) !important;
}

html.hm-dark .table-hover > tbody > tr:hover {
  background-color: rgba(94, 234, 212, 0.08) !important;
}

html.hm-dark table thead tr[style*="background: #f1f5f9"],
html.hm-dark table thead tr[style*="background:#f1f5f9"] {
  background: #071d22 !important;
  color: #5eead4 !important;
}

html.hm-dark table thead tr th {
  border-bottom-color: #1e4550 !important;
}

.hm-table-head-row {
  background: #f1f5f9;
  color: #0f172a;
}

html.hm-dark .hm-table-head-row {
  background: #071d22 !important;
  color: #5eead4 !important;
}

html.hm-dark .hm-table-head-row th {
  color: #5eead4 !important;
  background: #071d22 !important;
  border-bottom-color: #1e4550 !important;
}

/* GLOBAL DARK MODE BOX HEADER & CARD OVERRIDES */
html.hm-dark .box,
html.hm-dark .box-body,
html.hm-dark .box-footer {
  background-color: #071d22 !important;
  color: #ffffff !important;
  border-color: #1e4550 !important;
}

html.hm-dark .box-header,
html.hm-dark .box-header.with-border,
html.hm-dark .box.box-solid > .box-header,
html.hm-dark .box.box-solid.box-primary > .box-header {
  background: linear-gradient(135deg, #092f3a 0%, #0b4650 100%) !important;
  color: #5eead4 !important;
  border-bottom: 1px solid #1e4550 !important;
}

html.hm-dark .box-header .box-title,
html.hm-dark .box-header .box-title b,
html.hm-dark .box-header .box-title strong {
  color: #5eead4 !important;
}

html.hm-dark .form-control {
  background-color: #041216 !important;
  color: #5eead4 !important;
  border-color: #1e4550 !important;
}

html.hm-dark .form-control::placeholder {
  color: #64748b !important;
}


/* ============================================================
   COMPREHENSIVE DARK MODE OVERRIDES - ALL WHITE BG FIX
   Covers every .box variant so no white bg appears in dark mode
   ============================================================ */

/* All box types - default, info, primary, success, warning, danger */
html.hm-dark .box,
html.hm-dark .box.box-default,
html.hm-dark .box.box-info,
html.hm-dark .box.box-primary,
html.hm-dark .box.box-success,
html.hm-dark .box.box-warning,
html.hm-dark .box.box-danger,
html.hm-dark .box-body,
html.hm-dark .box-footer {
  background-color: #071d22 !important;
  color: #e2e8f0 !important;
  border-color: #1e4550 !important;
}

/* All box-header variants */
html.hm-dark .box-header,
html.hm-dark .box-header.with-border,
html.hm-dark .box.box-default > .box-header,
html.hm-dark .box.box-default > .box-header.with-border,
html.hm-dark .box.box-solid > .box-header,
html.hm-dark .box.box-solid.box-default > .box-header,
html.hm-dark .box.box-solid.box-primary > .box-header,
html.hm-dark .box.box-solid.box-info > .box-header,
html.hm-dark .box.box-solid.box-success > .box-header,
html.hm-dark .box.box-solid.box-warning > .box-header,
html.hm-dark .box.box-solid.box-danger > .box-header {
  background: linear-gradient(135deg, #092f3a 0%, #0b4650 100%) !important;
  background-color: #092f3a !important;
  color: #5eead4 !important;
  border-bottom: 1px solid #1e4550 !important;
}

/* Box titles inside headers */
html.hm-dark .box-header .box-title,
html.hm-dark .box-header .box-title b,
html.hm-dark .box-header .box-title strong,
html.hm-dark .box-header h3,
html.hm-dark .box-header h4 {
  color: #5eead4 !important;
}

/* All form controls */
html.hm-dark .form-control,
html.hm-dark input[type="text"],
html.hm-dark input[type="search"],
html.hm-dark input[type="email"],
html.hm-dark input[type="password"],
html.hm-dark input[type="number"],
html.hm-dark textarea,
html.hm-dark select {
  background-color: #041216 !important;
  color: #5eead4 !important;
  border-color: #1e4550 !important;
}

html.hm-dark .form-control::placeholder,
html.hm-dark input::placeholder,
html.hm-dark textarea::placeholder {
  color: #4a6a76 !important;
  opacity: 1 !important;
}

/* Table elements */
html.hm-dark table,
html.hm-dark .table,
html.hm-dark .table-responsive {
  background-color: #071d22 !important;
  color: #e2e8f0 !important;
}

html.hm-dark .table > thead > tr > th,
html.hm-dark .table > thead > tr > td {
  background-color: #092f3a !important;
  color: #5eead4 !important;
  border-color: #1e4550 !important;
}

html.hm-dark .table > tbody > tr > td,
html.hm-dark .table > tbody > tr > th {
  background-color: transparent !important;
  color: #e2e8f0 !important;
  border-color: #1e4550 !important;
}

html.hm-dark .table-striped > tbody > tr:nth-of-type(odd) > td,
html.hm-dark .table-striped > tbody > tr:nth-of-type(odd) > th {
  background-color: #061820 !important;
}

html.hm-dark .table-hover > tbody > tr:hover > td,
html.hm-dark .table-hover > tbody > tr:hover > th {
  background-color: #0c3040 !important;
}

/* Search result dynamically rendered cards */
html.hm-dark #therapy-search-results .box,
html.hm-dark #therapy-search-results .box.box-default,
html.hm-dark #therapy-search-results .box-header,
html.hm-dark #therapy-search-results .box.box-default > .box-header {
  background-color: #0b2c34 !important;
  border-color: #1e4550 !important;
  color: #e2e8f0 !important;
}

/* Alert boxes in dark mode */
html.hm-dark .alert {
  background-color: #0c2a33 !important;
  border-color: #1e4550 !important;
  color: #e2e8f0 !important;
}

html.hm-dark .alert-warning {
  background-color: #2a200a !important;
  border-color: #78500a !important;
  color: #fcd34d !important;
}

html.hm-dark .alert-danger {
  background-color: #2a0a0a !important;
  border-color: #7f1d1d !important;
  color: #fca5a5 !important;
}

html.hm-dark .alert-success {
  background-color: #042a1a !important;
  border-color: #065f46 !important;
  color: #6ee7b7 !important;
}

html.hm-dark .alert-info {
  background-color: #0a1f2a !important;
  border-color: #0c4a6e !important;
  color: #7dd3fc !important;
}

/* Input groups */
html.hm-dark .input-group-addon,
html.hm-dark .input-group-btn .btn-default {
  background-color: #0b3040 !important;
  border-color: #1e4550 !important;
  color: #5eead4 !important;
}

/* Panels and wells */
html.hm-dark .panel,
html.hm-dark .panel-body,
html.hm-dark .well {
  background-color: #071d22 !important;
  border-color: #1e4550 !important;
  color: #e2e8f0 !important;
}

html.hm-dark .panel-heading,
html.hm-dark .panel-title {
  background-color: #092f3a !important;
  color: #5eead4 !important;
  border-color: #1e4550 !important;
}

/* Label & badge dark mode */
html.hm-dark .label-default {
  background-color: #1e4550 !important;
  color: #a0e9dc !important;
}

/* Scrollbars */
html.hm-dark ::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}
html.hm-dark ::-webkit-scrollbar-track {
  background: #041216;
}
html.hm-dark ::-webkit-scrollbar-thumb {
  background: #1e4550;
  border-radius: 3px;
}
html.hm-dark ::-webkit-scrollbar-thumb:hover {
  background: #0d9488;
}

/* Content wrapper and section background */
html.hm-dark .content-wrapper,
html.hm-dark .content {
  background-color: #041216 !important;
}


html.hm-dark .content-header h1,
html.hm-dark .content-header h1 small {
  color: #5eead4 !important;
}

/* ==========================================================
   ULTRA-SPECIFIC INPUT DARK MODE OVERRIDES
   Forces dark background on ALL input types in dark mode
   placed at end of file for maximum CSS cascade priority
   ========================================================== */

html.hm-dark body input,
html.hm-dark body input[type="text"],
html.hm-dark body input[type="search"],
html.hm-dark body input[type="email"],
html.hm-dark body input[type="password"],
html.hm-dark body input[type="number"],
html.hm-dark body input[type="tel"],
html.hm-dark body input[type="url"],
html.hm-dark body input[type="date"],
html.hm-dark body input[type="time"],
html.hm-dark body textarea,
html.hm-dark body select,
html.hm-dark body .form-control,
html.hm-dark body .input-sm,
html.hm-dark body .input-lg {
  background-color: #041216 !important;
  background: #041216 !important;
  color: #5eead4 !important;
  border-color: #1e4550 !important;
  box-shadow: none !important;
}

html.hm-dark body input::placeholder,
html.hm-dark body textarea::placeholder,
html.hm-dark body .form-control::placeholder {
  color: #3a7a8a !important;
  opacity: 1 !important;
}

html.hm-dark body input:focus,
html.hm-dark body textarea:focus,
html.hm-dark body select:focus,
html.hm-dark body .form-control:focus {
  background-color: #061a20 !important;
  background: #061a20 !important;
  color: #5eead4 !important;
  border-color: #0d9488 !important;
  box-shadow: 0 0 0 3px rgba(13,148,136,0.18) !important;
  outline: none !important;
}

/* Select dropdown arrow fix */
html.hm-dark body select {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%235eead4' d='M1 1l5 5 5-5'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 10px center !important;
  background-size: 12px !important;
  padding-right: 30px !important;
}

/* Input group addon */
html.hm-dark body .input-group-addon {
  background-color: #0b3040 !important;
  border-color: #1e4550 !important;
  color: #5eead4 !important;
}

/* Content wrapper */
html.hm-dark body .content-wrapper {
  background-color: #041216 !important;
}

/* General text in dark mode */
html.hm-dark body .content-wrapper p,
html.hm-dark body .content-wrapper span:not(.label):not(.badge),
html.hm-dark body .box-body p,
html.hm-dark body .box p {
  color: #cbd5e1;
}