/* Country field background fix for dark mode in profile view */
[data-bs-theme="dark"] .field-bg-country {
  background-color: rgba(255, 255, 255, 0.05) !important;
  color: #fff !important;
  border-color: var(--bs-border-color) !important;
}

/* Core layout and header/footer styles for Partners Portal */
body {
  font-family: var(--bs-body-font-family);
  font-size: 16px;
  background: #ffffff;
  margin: 0;
}

/* Light theme specific refinements */
[data-bs-theme="light"] body { background:#ffffff !important; color:#1f2a37 !important; }
[data-bs-theme="light"] .site-header { background:#ffffff !important; border-bottom:none; box-shadow:0 1px 0 rgba(0,0,0,0.02) !important; }
[data-bs-theme="light"] .proforma-list .proforma-number { color:#111827 !important; font-weight:700 !important; font-family:'Inter', ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, 'Apple Color Emoji', 'Segoe UI Emoji' !important; }
[data-bs-theme="light"] .proforma-list .patient-name { color:#334155 !important; font-weight:500 !important; font-family:'Inter', ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, 'Apple Color Emoji', 'Segoe UI Emoji' !important; }
[data-bs-theme="light"] #completedProformaList .proforma-cost { font-family:'Inter', ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, 'Apple Color Emoji', 'Segoe UI Emoji' !important; }
[data-bs-theme="light"] .date-input-group input.flatpickr-alt-input.form-control { background:#ffffff !important; color:#212529 !important; }
/* Light mode: make calendar icon sit inside the input on the right, identical to dark */
[data-bs-theme="light"] .date-input-group { position: relative !important; }
[data-bs-theme="light"] .date-input-group .form-control { padding-right: 3rem !important; }
[data-bs-theme="light"] .date-input-group .input-group-text {
  position: absolute !important;
  right: 0.6rem !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  border: none !important;
  background: transparent !important;
  width: 34px !important;
  height: 34px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 !important;
  cursor: pointer !important;
}
[data-bs-theme="light"] .date-input-group .input-group-text .bi {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 28px !important;
  height: 28px !important;
  background:#f1f5f9 !important;
  border-radius: 6px !important;
  color:#0d6efd !important;
  font-size: 0.9rem !important;
}
[data-bs-theme="light"] .select2-container .select2-selection--single, [data-bs-theme="light"] .card.card-dark .select2-container--bootstrap-5 .select2-selection--single { background:#ffffff !important; border:1px solid #ced4da !important; color:#212529 !important; }
[data-bs-theme="light"] .select2-container--bootstrap-5 .select2-dropdown { background:#ffffff !important; border:1px solid #ced4da !important; color:#212529 !important; }
[data-bs-theme="light"] .select2-container--bootstrap-5 .select2-results__option--highlighted, [data-bs-theme="light"] .select2-container--bootstrap-5 .select2-results__option--selected { background:#e9f5ff !important; color:#0c4a6e !important; }
[data-bs-theme="light"] .select2-search--dropdown .select2-search__field { background:#ffffff !important; border:1px solid #ced4da !important; color:#212529 !important; }
[data-bs-theme="light"] .card.card-dark { background:#ffffff !important; border:1px solid rgba(17,24,39,0.08) !important; box-shadow:0 10px 30px rgba(17,24,39,0.06) !important; color:#1f2a37 !important; }
[data-bs-theme="light"] .card.card-dark.card-highlight, [data-bs-theme="light"] .proforma-list .card.card-dark.card-highlight { background:#ffffff !important; border:1px solid rgba(17,24,39,0.08) !important; border-left:6px solid #00baff !important; box-shadow:0 0 28px 0 rgba(0,186,255,0.22) !important; }
[data-bs-theme="light"] .proforma-list .card.card-highlight, [data-bs-theme="light"] .proforma-list .card.proforma-accent { background:#ffffff !important; border:1px solid rgba(17,24,39,0.08) !important; border-left:6px solid #00baff !important; box-shadow:0 0 28px 0 rgba(0,186,255,0.22) !important; }
[data-bs-theme="light"] .proforma-accent { border-left:6px solid #00baff !important; box-shadow:0 0 24px 0 #00baff33 !important; }
[data-bs-theme="light"] .glow-text, [data-bs-theme="light"] .section-title { color:#0ea5e9 !important; text-shadow:none !important; }
[data-bs-theme="light"] .text-white, [data-bs-theme="light"] .text-light { color:#111827 !important; }
[data-bs-theme="light"] .card.card-dark .form-control, [data-bs-theme="light"] .card.card-dark .form-select, [data-bs-theme="light"] .card.card-dark textarea.form-control, [data-bs-theme="light"] .card.card-dark input.form-control { background:#ffffff !important; border:1px solid #ced4da !important; color:#212529 !important; }
[data-bs-theme="light"] .card.card-dark .form-control:focus, [data-bs-theme="light"] .card.card-dark .form-select:focus, [data-bs-theme="light"] .card.card-dark textarea.form-control:focus { background:#ffffff !important; border-color:#86b7fe !important; box-shadow:0 0 0 .2rem rgba(13,110,253,.25) !important; color:#212529 !important; }
[data-bs-theme="light"] .card.card-dark .form-control::placeholder, [data-bs-theme="light"] .card.card-dark textarea.form-control::placeholder { color:#6c757d !important; }
[data-bs-theme="light"] .card.card-dark .form-control[readonly], [data-bs-theme="light"] .card.card-dark input.form-control[readonly] { background:#f8fafc !important; color:#374151 !important; }
[data-bs-theme="light"] .ui-autocomplete { background:#ffffff !important; color:#212529 !important; border:1px solid #ced4da !important; box-shadow:0 6px 20px rgba(0,0,0,.08) !important; }
[data-bs-theme="light"] .ui-menu-item-wrapper { color:#212529 !important; }
[data-bs-theme="light"] .ui-state-active, [data-bs-theme="light"] .ui-menu-item-wrapper.ui-state-active { background:#e9f5ff !important; color:#0c4a6e !important; }

/* Light theme: proforma search bar parity */
[data-bs-theme="light"] #proformaSearchForm .input-group { max-width:1100px !important; margin:0 auto !important; display:flex !important; gap:0 !important; }
[data-bs-theme="light"] #proformaSearchForm .form-control { height:52px !important; border-radius:10px 0 0 10px !important; font-size:1rem !important; padding:0.6rem 1rem !important; background:#ffffff !important; border:1px solid #e5e7eb !important; color:#111827 !important; box-shadow:none !important; flex:1 1 auto !important; min-width:0 !important; }
[data-bs-theme="light"] #proformaSearchForm .input-group .btn { border-radius:0 10px 10px 0 !important; padding:0.35rem 0.9rem !important; width:52px !important; display:inline-flex !important; align-items:center !important; justify-content:center !important; background:linear-gradient(145deg,#0ea5e9,#0d6efd) !important; color:#ffffff !important; border:none !important; box-shadow:0 0 10px rgba(14,165,233,0.25) !important; margin-left:0 !important; }
[data-bs-theme="light"] #proformaSearchForm .input-group .btn:hover { box-shadow:0 0 14px rgba(14,165,233,0.35) !important; transform:translateY(-1px) !important; }

/* Disable hover transforms to prevent layout shift/movement */
#toggleCompletedBtn:hover,
[data-bs-theme="light"] #proformaSearchForm .input-group .btn:hover,
[data-bs-theme="dark"] #proformaSearchForm .input-group .btn:hover {
  transform: none !important;
}
[data-bs-theme="light"] #proformaSearchForm .input-group .btn .bi, [data-bs-theme="light"] #proformaSearchForm .input-group .btn .fa { color:#ffffff !important; font-size:1.05rem !important; }
[data-bs-theme="light"] #proformaSearchForm .form-control:focus { outline:none !important; box-shadow:0 0 8px rgba(13,110,253,0.12) !important; }

/* Light mode: fully neutralize Bootstrap .table-dark (single source of truth) */
[data-bs-theme="light"] .card.card-dark table.table.table-dark,
[data-bs-theme="light"] .card.card-dark table.table.table-dark thead th,
[data-bs-theme="light"] .card.card-dark table.table.table-dark tbody td,
[data-bs-theme="light"] .card.card-dark table.table.table-dark tfoot td,
[data-bs-theme="light"] .table.table-dark,
[data-bs-theme="light"] .table.table-dark thead th,
[data-bs-theme="light"] .table.table-dark tbody td,
[data-bs-theme="light"] .table.table-dark tfoot td {
  background: transparent !important; /* no dark/white blocks */
  color: var(--bs-body-color) !important; /* normal light text */
  border-color: transparent !important; /* borderless look */
  box-shadow: none !important;
}

/* Light mode: remove borders & background highlight for treatments table (match dark mode visual) */
/* Ensure body sections inheriting .table-dark are also transparent */
[data-bs-theme="light"] .table.table-dark > :not(caption) > * { background: transparent !important; }

/* Light mode: remove zebra striping artifacts for .table-dark */
[data-bs-theme="light"] .table.table-dark.table-striped tbody tr:nth-of-type(odd),
[data-bs-theme="light"] .table.table-dark.table-striped tbody tr:nth-of-type(even),
[data-bs-theme="light"] .card.card-dark table.table.table-dark.table-striped tbody tr:nth-of-type(odd),
[data-bs-theme="light"] .card.card-dark table.table.table-dark.table-striped tbody tr:nth-of-type(even) {
  background: transparent !important;
}

/* Light mode: inputs/selects inside treatments table */
[data-bs-theme="light"] .card.card-dark table.table.table-dark input.form-control,
[data-bs-theme="light"] .card.card-dark table.table.table-dark select.form-control,
[data-bs-theme="light"] .card.card-dark table.table.table-dark tbody td .form-control,
[data-bs-theme="light"] .card.card-dark table.table.table-dark tbody td .form-control-sm {
  background: #ffffff !important;
  color: #212529 !important;
  border: 1px solid #ced4da !important;
  box-shadow: none !important;
}

[data-bs-theme="light"] .card.card-dark table.table.table-dark .select2-container--bootstrap-5 .select2-selection--single {
  background:#ffffff !important;
  color:#212529 !important;
  border:1px solid #ced4da !important;
}

[data-bs-theme="light"] .card.card-dark table.table.table-dark td > .select2-container { width:100% !important; max-width:100% !important; }

/* ------------------------------------------------------------------
   Show Completed toggle: filled purple in both themes (match dark mode)
   Keep Help button as outline (it uses btn-outline-secondary). Target
   the toggle by id so we don't affect other outline buttons.
------------------------------------------------------------------ */
#toggleCompletedBtn,
[data-bs-theme="light"] #toggleCompletedBtn,
[data-bs-theme="dark"] #toggleCompletedBtn {
  background: linear-gradient(145deg,#937bff,#7662cc) !important;
  color: #ffffff !important;
  border: none !important;
  box-shadow: 0 0 10px rgba(147,123,255,0.32) !important;
  border-radius: 6px !important;
}
#toggleCompletedBtn:hover,
[data-bs-theme="light"] #toggleCompletedBtn:hover,
[data-bs-theme="dark"] #toggleCompletedBtn:hover {
  transform: none !important;
  box-shadow: 0 0 18px rgba(147,123,255,0.55) !important;
}

/* ─── Dark Mode Body Background ─── */
[data-bs-theme="dark"] body {
  background: #08151d !important;
}

/* ─── Dark Mode Text Override ─── */
[data-bs-theme="dark"] .text-muted {
  color: #ffffff !important;
}

/* ------------------------------------------------------------------
   Dashboard: Dark-mode header + chart light adjustments
   Keep changes minimal: only make white headers dark-mode friendly
   and ensure chart canvases are transparent in dark theme.
------------------------------------------------------------------ */
[data-bs-theme="dark"] .container .card .card-header.bg-white {
  background: transparent !important;
  border-bottom: 1px solid rgba(255,255,255,0.03) !important;
  color: #e6f4ff !important;
}

/* Make canvas backgrounds transparent so charts blend with parent cards */
[data-bs-theme="dark"] .container .card .card-body canvas {
  background: transparent !important;
}

/* Small responsive header sizing only */
@media (max-width: 576px) {
  .display-5 { font-size: 1.5rem !important; }
  .container .card .card-header h5 { font-size: 1rem !important; }
}

/* ─── SIDEBAR NAVIGATION ─── */
.sidebar {
  position: fixed;
  top: 0;
  left: -320px;
  width: 320px;
  height: 100vh;
  background: #ffffff;
  border-right: 1px solid #e9ecef;
  z-index: 1050;
  transition: left 0.3s ease;
  overflow-y: auto;
  box-shadow: 2px 0 10px rgba(0, 0, 0, 0.1);
  /* Hide scrollbar */
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none; /* Internet Explorer 10+ */
  display: flex;
  flex-direction: column;
}

/* Hide scrollbar for WebKit browsers (Chrome, Safari, Edge) */
.sidebar::-webkit-scrollbar {
  display: none;
}

.sidebar.active {
  left: 0;
}

[data-bs-theme="dark"] .sidebar {
  background: #0d1117;
  border-right-color: #21262d;
  box-shadow: 2px 0 10px rgba(0, 0, 0, 0.3);
}

.sidebar-header {
  padding: 1rem; /* Add back some padding for proper vertical spacing */
  display: flex;
  align-items: center;
  justify-content: flex-end; /* Space between theme toggle and close button */
  min-height: 60px; /* Ensure consistent height */
}

[data-bs-theme="dark"] .sidebar-header {
  border-bottom-color: #21262d;
}

.sidebar-header h5 {
  margin: 0;
  color: #495057;
  font-weight: 600;
}

[data-bs-theme="dark"] .sidebar-header h5 {
  color: #ffffff;
}

.sidebar-close {
  color: #6c757d;
  background: none;
  border: none;
  font-size: 1.5rem; /* Match sidebar-toggle size */
  padding: 0.5rem; /* Match sidebar-toggle padding */
  line-height: 1;
  margin-top: 0; /* Remove extra margin since header now has proper padding */
}

.sidebar-close:hover {
  color: #495057;
}

[data-bs-theme="dark"] .sidebar-close {
  color: #9ca3af;
}

[data-bs-theme="dark"] .sidebar-close:hover {
  color: #ffffff;
}

/* ─── SIDEBAR PROFILE SECTION ─── */
.profile-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: linear-gradient(135deg, #007bff, #0056b3);
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-weight: 600;
  font-size: 0.875rem;
}

.profile-info {
  min-width: 0; /* Allows text to truncate */
}

.profile-name {
  font-weight: 600;
  font-size: 0.9rem;
  color: #495057;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.profile-role {
  font-size: 0.75rem;
  text-transform: capitalize;
}

.settings-btn {
  color: #6c757d;
  padding: 0.25rem;
  border: none;
  background: none;
  font-size: 1.1rem;
}

.settings-btn:hover {
  color: #495057;
}

[data-bs-theme="dark"] .profile-name {
  color: #ffffff;
}

[data-bs-theme="dark"] .settings-btn {
  color: #9ca3af;
}

[data-bs-theme="dark"] .settings-btn:hover {
  color: #ffffff;
}

/* ─── Modal field sizing parity (view vs edit) ─── */
#hospitalModalContainer .form-control.form-control-lg,
#hospitalModalContainer .form-select.form-select-lg {
  font-size: 1rem; /* keep large height but align font size with view modal text */
}

/* ─── LOG OUT STYLING ─── */
.dropdown-item.logout {
  color: var(--bs-danger) !important; /* use Bootstrap danger for parity */
}

.dropdown-item.logout:hover,
.dropdown-item.logout:focus {
  background-color: var(--bs-danger) !important; /* solid danger */
  color: #fff !important; /* white text for contrast */
  box-shadow: 0 6px 20px rgba(220, 53, 69, 0.14);
  border-radius: 0.375rem;
}

.dropdown-item.logout i {
  color: inherit !important; /* will become white on hover due to color inheritance */
}

.dropdown-item.logout:hover i,
.dropdown-item.logout:focus i {
  color: #fff !important;
}

/* ─── PROFILE DROPDOWN HOVER EFFECTS ─── */
.sidebar-profile .dropdown-item:not(.logout):hover,
.sidebar-profile .dropdown-item:not(.logout):focus {
  background-color: var(--bs-primary) !important; /* solid primary */
  color: #fff !important; /* white text for contrast */
  box-shadow: 0 6px 20px rgba(13, 110, 253, 0.12); /* soft glow */
  border-radius: 0.375rem;
}

.sidebar-profile .dropdown-item:not(.logout):hover i,
.sidebar-profile .dropdown-item:not(.logout):focus i {
  color: #fff !important;
}

[data-bs-theme="dark"] .sidebar-profile .dropdown-item:not(.logout):hover,
[data-bs-theme="dark"] .sidebar-profile .dropdown-item:not(.logout):focus {
  background-color: var(--bs-primary) !important; /* keep primary saturated in dark */
  color: #fff !important;
  box-shadow: 0 6px 20px rgba(88, 166, 255, 0.12);
}

[data-bs-theme="dark"] .sidebar-profile .dropdown-item:not(.logout):hover i,
[data-bs-theme="dark"] .sidebar-profile .dropdown-item:not(.logout):focus i {
  color: #fff !important;
}

/* ─── SIDEBAR PROFILE SECTION (BOTTOM) ─── */
/* Keep profile always visible at the bottom; let menu scroll underneath */
.sidebar-profile {
  padding: 1rem;
  background: inherit; /* Use same background as sidebar */
  margin-top: auto; /* Push to bottom in normal flow */
  position: sticky; /* Stick to the bottom of the sidebar viewport */
  bottom: 0;
  z-index: 2; /* Ensure it sits above scrolling links */
  border-top: none; /* Visual separation */
}

[data-bs-theme="dark"] .sidebar-profile {
  background: inherit; /* Use same background as sidebar */
}

/* Ensure the clickable profile area at the bottom is left-aligned
   and does not inherit submenu padding (which would visually center it). */
.sidebar-profile .profile-link {
  padding: 0; /* remove submenu-link padding */
  display: flex;
  align-items: center;
  gap: 0.75rem; /* space between avatar and text */
  color: inherit;
  width: auto;
  justify-content: flex-start;
}

.sidebar-profile .profile-info {
  text-align: left;
}

.sidebar-content {
  padding: 0.1rem 0; /* Reduced from 1rem to 0.5rem */
  flex: 1; /* Take up available space */
  /* Provide space so last items aren't obscured by sticky profile */
  padding-bottom: 96px; /* approx profile height + spacing */
}

.sidebar-item {
  margin-bottom: 0.1rem; /* Reduced from 0.25rem to 0.1rem */
}

.sidebar-link {
  display: flex;
  align-items: center;
  padding: 0.75rem 1.25rem;
  color: #495057;
  text-decoration: none;
  transition: all 0.2s ease;
  position: relative;
}

.sidebar-link:hover {
  background-color: #f8f9fa;
  color: #007bff;
  text-decoration: none;
}

.sidebar-link.active {
  background-color: #e7f3ff;
  color: #007bff;
  font-weight: 500;
  border-right: 3px solid #007bff;
}

.sidebar-link i {
  margin-right: 0.75rem;
  font-size: 1.1rem;
  width: 20px;
  text-align: center;
}

.sidebar-link.has-submenu .submenu-arrow {
  margin-left: auto;
  margin-right: 0;
  font-size: 0.875rem;
  transition: transform 0.2s ease;
}

.sidebar-link.has-submenu.expanded .submenu-arrow {
  transform: rotate(180deg);
}

.sidebar-link .badge {
  margin-left: 0;
  margin-right: 0;
  font-size: 0.75rem;
  order: 1; /* Place badge before arrow */
}

.sidebar-link.has-submenu .badge.ms-auto {
  margin-left: 0 !important; /* Override Bootstrap's ms-auto */
  margin-right: 0.25rem !important; /* Small space before arrow */
  order: 1; /* Ensure badge comes right before arrow */
}

.sidebar-link.has-submenu .badge {
  margin-left: 0;
  margin-right: 0.25rem; /* Space before arrow */
}

.sidebar-link.has-submenu span:not(.badge) {
  flex: 1; /* Make the text span take up available space */
}

.sidebar-link.has-submenu .submenu-arrow {
  order: 2; /* Place arrow after badge */
}

/* Dark mode sidebar links */
[data-bs-theme="dark"] .sidebar-link {
  color: #e6edf3;
}

[data-bs-theme="dark"] .sidebar-link:hover {
  background-color: #161b22;
  color: #58a6ff;
}

[data-bs-theme="dark"] .sidebar-link.active {
  background-color: #0d2840;
  color: #58a6ff;
  border-right-color: #58a6ff;
}

.sidebar-submenu {
  background-color: #f8f9fa;
  border-top: 1px solid #e9ecef;
  border-bottom: 1px solid #e9ecef;
}

[data-bs-theme="dark"] .sidebar-submenu {
  background-color: #0d1117;
  border-top-color: #21262d;
  border-bottom-color: #21262d;
}

.submenu-link {
  display: flex;
  align-items: center;
  padding: 0.5rem 1.25rem 0.5rem 3rem;
  color: #6c757d;
  text-decoration: none;
  font-size: 0.9rem;
  transition: all 0.2s ease;
}

.submenu-link:hover {
  background-color: #e9ecef;
  color: #007bff;
  text-decoration: none;
}

.submenu-link i {
  margin-right: 0.5rem;
  font-size: 0.875rem;
  width: 16px;
  text-align: center;
}

.submenu-divider {
  margin: 0.5rem 1.25rem;
  border-color: #dee2e6;
}

[data-bs-theme="dark"] .submenu-link {
  color: #8b949e;
}

[data-bs-theme="dark"] .submenu-link:hover {
  background-color: #161b22;
  color: #58a6ff;
}

[data-bs-theme="dark"] .submenu-divider {
  border-color: #21262d;
}

.sidebar-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  z-index: 1040;
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s ease;
  pointer-events: none;
}

.sidebar-overlay.active {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

/* Toast Notifications */
.toast-container {
  position: fixed;
  top: 32px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 20000;
  width: 100%;
  max-width: 420px;
  pointer-events: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}

.toast {
  min-width: 280px;
  max-width: 420px;
  margin: 0 auto;
  background: rgba(30, 42, 70, 0.92);
  color: #fff;
  border-radius: 16px;
  box-shadow: 0 4px 32px 0 rgba(0, 186, 255, 0.18), 0 1.5px 8px 0 rgba(0, 0, 0, 0.10);
  padding: 1.1rem 1.5rem 1.1rem 1.2rem;
  display: flex;
  align-items: center;
  font-size: 1rem;
  font-weight: 500;
  pointer-events: auto;
  border: none;
  opacity: 0;
  animation: toast-fade-in 0.35s cubic-bezier(0.4, 0, 0.2, 1) forwards;
  transition: opacity 0.3s;
  backdrop-filter: blur(8px);
  position: relative;
}

.toast.toast-success {
  background: linear-gradient(135deg, #1e3c72 60%, #2fcf90 100%);
  box-shadow: 0 4px 32px 0 rgba(47, 207, 144, 0.18), 0 1.5px 8px 0 rgba(0, 0, 0, 0.10);
}

.toast.toast-danger,
.toast.toast-error {
  background: linear-gradient(135deg, #1e3c72 60%, #f24747 100%);
  box-shadow: 0 4px 32px 0 rgba(242, 71, 71, 0.18), 0 1.5px 8px 0 rgba(0, 0, 0, 0.10);
}

.toast.toast-info {
  background: linear-gradient(135deg, #1e3c72 60%, #00baff 100%);
  box-shadow: 0 4px 32px 0 rgba(0, 186, 255, 0.18), 0 1.5px 8px 0 rgba(0, 0, 0, 0.10);
}

.toast.toast-warning {
  background: linear-gradient(135deg, #1e3c72 60%, #e5c84c 100%);
  color: #222;
  box-shadow: 0 4px 32px 0 rgba(229, 200, 76, 0.18), 0 1.5px 8px 0 rgba(0, 0, 0, 0.10);
}

.toast .toast-header {
  display: none;
}

.toast .toast-body {
  width: 100%;
  padding: 0;
  background: none;
  color: inherit;
  font-size: 1rem;
  font-weight: 500;
}

.toast .btn-close {
  position: absolute;
  top: 12px;
  right: 16px;
  color: rgba(255, 71, 87, 0.9);
  opacity: 0.8;
  background: none;
  border: none;
  font-size: 1.2rem;
  pointer-events: auto;
  transition: all 0.2s;
}

.toast .btn-close:hover {
  color: #ff4757;
  opacity: 1;
}

@keyframes toast-fade-in {
  from {
    opacity: 0;
    transform: translateY(-24px) scale(0.98);
  }

  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.sidebar-toggle {
  color: #495057;
  background: none;
  border: none;
  font-size: 1.5rem;
  padding: 0.5rem;
  line-height: 1;
  margin-right: 0.5rem;
}

.sidebar-toggle:hover {
  color: #007bff;
  background: none;
}

[data-bs-theme="dark"] .sidebar-toggle {
  color: #e6edf3;
}

[data-bs-theme="dark"] .sidebar-toggle:hover {
  color: #58a6ff;
}

/* Adjust header layout for closer spacing */
.site-header .container {
  gap: 0.5rem;
}

.header-logo {
  flex-shrink: 0;
}

/* ─── Site Header Base Styling ─── */

.site-header {
  background-color: #ffffff;
  padding: 1rem 0; /* Responsive vertical padding */
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
  /* optional soft shadow */
  z-index: 1000;
  position: relative;
  width: 100%; /* Ensure full width */
}

.site-header .container {
  /* Let Bootstrap's container handle responsive width automatically */
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.site-title {
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--bs-body-color);
  margin: 0;
}

.header-logo img {
  height: 85px;
  transition: filter 0.2s;
}

/* ─── Base Nav Link Layout ─── */
.nav-icons {
  gap: 2rem;
}

.nav-icons .nav-link {
  display: flex;
  flex-direction: column;
  align-items: center;
  font-size: 1rem;
  color: var(--bs-body-color-secondary);
  padding: 0.75rem 0;
  transition: color 0.2s;
}

.nav-icons .nav-link .bi {
  font-size: 1.6rem;
  margin-bottom: 0.3rem;
}

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

.nav-icons .nav-link.active .bi {
  color: var(--bs-primary);
}

.nav-icons .nav-link.active::after {
  content: "";
  display: block;
  width: 1.75rem;
  height: 3px;
  background: var(--bs-primary);
  margin-top: 0.3rem;
  border-radius: 2px;
}

/* Logout Icon Consistency */
.user-icon {
  padding: 0.25rem;
  margin-left: 0.5rem;
}

.user-icon i {
  font-size: 1.5rem;
  color: #dc3545;
}

.site-header,
.navbar,
.site-header .container {
  border-bottom: none !important;
  box-shadow: none !important;
}

/* ─── Dark Mode Toggle Switch Styling ─── */
.theme-toggle input#themeToggle {
  display: none;
}

#themeToggle+.toggle-track {
  position: relative;
  width: 62px;
  height: 29px;
  background: var(--bs-border-color);
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 6px;
  cursor: pointer;
  transition: background 0.3s;
}

#themeToggle+.toggle-track .bi {
  color: var(--bs-body-color-secondary);
  font-size: 1rem;
}

#themeToggle+.toggle-track .toggle-thumb {
  position: absolute;
  top: 4px;
  left: 4px;
  width: 22px;
  height: 21px;
  background: var(--bs-body-bg);
  border-radius: 50%;
  transition: transform 0.3s;
}

#themeToggle:checked+.toggle-track {
  background: var(--bs-primary);
}

#themeToggle:checked+.toggle-track .bi {
  color: #fff;
}

#themeToggle:checked+.toggle-track .toggle-thumb {
  transform: translateX(32px);
}

/* ─── Header Profile Dropdown Styling ─── */
.header-profile .dropdown-menu {
  min-width: 140px;
  width: 140px;
  margin-top: 0.75rem !important;
  box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075), 0 0.5rem 1rem rgba(0, 0, 0, 0.15) !important;
}

.header-profile .dropdown-menu::before {
  content: '';
  position: absolute;
  top: -0.9rem;
  right: 0.1rem;
  width: 0;
  height: 0;
  border-left: 0.7rem solid transparent;
  border-right: 0.7rem solid transparent;
  border-bottom: 0.9rem solid var(--bs-dropdown-bg);
}

/* Make theme toggle wider in dropdown to match menu items */
#themeToggleMenuContainer .theme-toggle {
  display: flex;
  justify-content: flex-start;
}

#themeToggleMenuContainer .toggle-track {
  width: 105px !important;
}

#themeToggleMenuContainer #themeToggle:checked+.toggle-track .toggle-thumb {
  transform: translateX(75px) !important;
}

/* ─── Dark Mode Support for Header ─── */
[data-bs-theme="dark"] .site-header {
  background-color: #08151d !important;
  border-bottom: none !important;
  box-shadow: none !important;
  color: white;
}

[data-bs-theme="dark"] .site-title {
  color: var(--bs-body-color) !important;
}

[data-bs-theme="dark"] .nav-icons .nav-link {
  color: #ffffff;
}

[data-bs-theme="dark"] .nav-icons .nav-link.active,
[data-bs-theme="dark"] .nav-icons .nav-link.active .bi {
  color: var(--bs-primary) !important;
}

/* Blue h1*/
h1,
.page-title,
h1.page-title {
  color: var(--bs-primary) !important;
}

[data-bs-theme="dark"] h1,
[data-bs-theme="dark"] .page-title,
[data-bs-theme="dark"] h1.page-title {
  color: var(--bs-primary) !important;
}

/* ─── Select2 Styling ─── */
.select2-container--default .select2-selection--single {
  height: 38px !important;
  padding: 0 0.75rem !important;
  border: 1px solid var(--bs-border-color) !important;
  border-radius: 0.375rem !important;
  font-size: 1rem !important;
  line-height: 1.5 !important;
  background-color: var(--bs-body-bg) !important;
  display: flex !important;
  align-items: center !important;
  box-sizing: border-box;
}

/* --- Select2 Multi-Select Styling (Light & Dark) --- */

.select2-container--default .select2-selection--multiple {
  min-height: 38px !important;
  background-color: var(--bs-body-bg) !important;
  border: 1px solid var(--bs-border-color) !important;
  border-radius: 0.375rem !important;
  font-size: 1rem !important;
  line-height: 1.5 !important;
  box-sizing: border-box !important;
  padding: 0.25rem 0.5rem 0.25rem 0.5rem !important;
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  gap: 0.25em !important;
  cursor: text;
}

.select2-container--default .select2-selection--multiple .select2-selection__rendered {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  gap: 0.25em !important;
  padding: 0 !important;
  margin: 0 !important;
  min-height: 28px !important;
}

.select2-container--default .select2-selection--multiple .select2-search__field {
  background: transparent !important;
  color: var(--bs-body-color) !important;
  border: none !important;
  outline: none !important;
  font-size: 1rem !important;
  margin: 0 !important;
  padding: 0.15em 0 !important;
  min-width: 80px;
  height: 28px !important;
  box-sizing: border-box;
  vertical-align: middle !important;
}


/* --- Fix Select2 multi-select choice overlapping remove button --- */
.select2-container--default .select2-selection--multiple .select2-selection__choice {
  background-color: var(--bs-primary) !important;
  border: 1.5px solid var(--bs-primary) !important;
  color: #fff !important;
  border-radius: 0.375rem !important;
  padding: 0.15em 0.75em 0.15em 2em !important;
  /* extra left padding for the x */
  margin-right: 0.25em;
  margin-bottom: 0.15em;
  font-size: 0.98em;
  font-weight: 500;
  position: relative !important;
  display: flex !important;
  align-items: center !important;
  vertical-align: middle !important;
  height: 28px !important;
  overflow: visible !important;
}

.select2-container--default .select2-selection--multiple .select2-selection__choice__remove {
  color: var(--bs-danger) !important;
  position: absolute !important;
  left: 0.5em;
  top: 50%;
  transform: translateY(-50%);
  margin: 0 !important;
  font-size: 1em;
  align-self: center !important;
  cursor: pointer;
  z-index: 2;
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
  line-height: 1 !important;
}

.select2-container--default .select2-selection--multiple .select2-selection__choice__remove {
  color: var(--bs-danger) !important;
  margin-right: 0.25em;
  font-size: 1em;
  align-self: center !important;
}

.select2-container--default .select2-selection--multiple .select2-search__field {
  background: transparent !important;
  color: var(--bs-body-color) !important;
  border: none !important;
  outline: none !important;
  font-size: 1rem !important;
  margin-top: 0.1rem;
}

.select2-container--default .select2-selection--multiple .select2-selection__choice {
  background-color: var(--bs-secondary-bg) !important;
  border: 1px solid var(--bs-border-color) !important;
  color: var(--bs-body-color) !important;
  border-radius: 0.375rem !important;
  padding: 0.15em 0.75em 0.15em 0.75em !important;
  margin-right: 0.25em;
  margin-bottom: 0.15em;
  font-size: 0.98em;
  font-weight: 500;
}

.select2-container--default .select2-selection--multiple .select2-selection__choice__remove {
  color: var(--bs-danger) !important;
  margin-right: 0.25em;
  font-size: 1em;
}

/* --- Select2 Multi-Select Dark Mode --- */

[data-bs-theme="dark"] .select2-container--default .select2-selection--multiple {
  background-color: rgba(255, 255, 255, 0.05) !important;
  border-color: rgba(255, 255, 255, 0.2) !important;
  color: #fff !important;
}

[data-bs-theme="dark"] .select2-container--default .select2-selection--multiple .select2-search__field {
  color: #fff !important;
}


[data-bs-theme="dark"] .select2-container--default .select2-selection--multiple .select2-selection__choice {
  background-color: #2563eb !important;
  /* strong blue for selected in dark mode */
  border: 1.5px solid #2563eb !important;
  color: #fff !important;
  height: 28px !important;
  display: flex !important;
  align-items: center !important;
  vertical-align: middle !important;
  position: relative !important;
  padding: 0.15em 0.75em 0.15em 2em !important;
  /* match light mode fix */
  overflow: visible !important;
}

[data-bs-theme="dark"] .select2-container--default .select2-selection--multiple .select2-selection__choice__remove {
  color: #ff4757 !important;
  position: absolute !important;
  left: 0.5em;
  top: 50%;
  transform: translateY(-50%);
  margin: 0 !important;
  font-size: 1em;
  align-self: center !important;
  cursor: pointer;
  z-index: 2;
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
  line-height: 1 !important;
}

[data-bs-theme="dark"] .select2-container--default .select2-selection--multiple .select2-selection__choice__remove {
  color: #ff4757 !important;
  align-self: center !important;
}

[data-bs-theme="dark"] .select2-container--default .select2-selection--multiple .select2-selection__placeholder {
  color: rgba(255, 255, 255, 0.6) !important;
}

.select2-selection__rendered {
  padding-left: 0 !important;
  padding-right: 0 !important;
  line-height: 1.5 !important;
  margin: 0 !important;
  color: var(--bs-body-color) !important;
}

.select2-selection__arrow {
  height: 38px !important;
  top: 0 !important;
  right: 10px !important;
  display: flex !important;
  align-items: center !important;
}

/* Light mode: ensure Select2 single-select shows caret arrow */
[data-bs-theme="light"] .select2-selection__arrow { 
  position: absolute !important;
  top: 0 !important;
  right: 0.75rem !important;
  width: 1.2rem !important;
  height: 100% !important;
  pointer-events: none !important;
  display: block !important;
}

[data-bs-theme="light"] .select2-container--default .select2-selection--single { 
  padding-right: 2.5rem !important;
  position: relative !important;
}

/* Hide the default b element and use :after like dark mode */
[data-bs-theme="light"] .select2-selection__arrow b {
  display: none !important;
}

/* CSS triangle arrow - black for light mode */
[data-bs-theme="light"] .select2-selection__arrow:after {
  content: "" !important;
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -45%) !important;
  border-left: 0.4rem solid transparent !important;
  border-right: 0.4rem solid transparent !important;
  border-top: 0.48rem solid #212529 !important;
}

/* Ensure Select2 dropdown arrow is always visible in light theme */
[data-bs-theme="light"] .select2-container--default .select2-selection--single .select2-selection__arrow {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
}

/* Fix Select2 dropdown text color in light mode */
[data-bs-theme="light"] .select2-container--bootstrap-5 .select2-selection--single .select2-selection__rendered {
  color: #212529 !important;
}

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

/* Fix Select2 dropdown results container text */
[data-bs-theme="light"] .select2-results__options {
  color: #212529 !important;
}

[data-bs-theme="light"] .select2-results {
  color: #212529 !important;
}

/* Make sure all option elements have black text */
[data-bs-theme="light"] .select2-container--bootstrap-5 .select2-results__option--highlighted,
[data-bs-theme="light"] .select2-container--bootstrap-5 .select2-results__option--selected {
  color: #212529 !important;
}

/* Fix the two-line hospital display */
[data-bs-theme="light"] .opt-primary {
  color: #212529 !important;
}

[data-bs-theme="light"] .opt-secondary {
  color: #6c757d !important;
}

.select2-container {
  width: 100% !important;
  /* Keep below overlays/sidebars but above page content */
  z-index: 1000 !important;
}

/* When Select2 is open, ensure it's above Bootstrap modals (1055) but
   still below any app-level full overlays we purposely raise higher. */
.select2-container--open {
  z-index: 1061 !important;
}

.select2-container--default {
  margin: 0 !important;
  padding: 0 !important;
  vertical-align: middle !important;
  position: relative;
  top: 0;
}

/* Select2 Dark Mode */
[data-bs-theme="dark"] .select2-container--default .select2-selection--single {
  background-color: rgba(255, 255, 255, 0.05) !important;
  border-color: var(--bs-border-color) !important;
  color: var(--bs-body-color) !important;
}

/* Ensure Select2 country selects match all other fields in dark mode */
[data-bs-theme="dark"] .country-select+.select2-container .select2-selection--single {
  background-color: rgba(255, 255, 255, 0.05) !important;
  border-color: var(--bs-border-color) !important;
  color: #fff !important;
}

[data-bs-theme="dark"] .select2-selection__rendered {
  color: var(--bs-body-color) !important;
}

[data-bs-theme="dark"] .select2-container--default .select2-selection--single .select2-selection__rendered.select2-selection__placeholder {
  color: var(--bs-secondary-color) !important;
}

[data-bs-theme="dark"] .select2-dropdown {
  background-color: var(--bs-body-bg) !important;
  border: 1px solid var(--bs-border-color) !important;
  color: var(--bs-body-color) !important;
  z-index: 1061 !important;
}

/* Ensure dropdown layer uses same stacking context in light mode too */
.select2-dropdown { z-index: 1061 !important; }

[data-bs-theme="dark"] .select2-results__option {
  background-color: var(--bs-body-bg) !important;
  color: var(--bs-body-color) !important;
}

[data-bs-theme="dark"] .select2-results__option--highlighted {
  background-color: var(--bs-secondary-bg) !important;
  color: var(--bs-body-color) !important;
}

/* --- Select2 Bootstrap 5 dark mode patch --- */
body[data-bs-theme="dark"] .select2-container--bootstrap-5 .select2-selection {
  background-color: #181c1f !important;
  color: #fff !important;
  border-color: #2c3035 !important;
}

body[data-bs-theme="dark"] .select2-container--bootstrap-5 .select2-selection__rendered {
  color: #fff !important;
}

body[data-bs-theme="dark"] .select2-container--bootstrap-5 .select2-dropdown {
  background-color: #181c1f !important;
  color: #fff !important;
  border-color: #2c3035 !important;
}

body[data-bs-theme="dark"] .select2-container--bootstrap-5 .select2-results__option--selected {
  background-color: #0d6efd !important;
  color: #fff !important;
}

body[data-bs-theme="dark"] .select2-container--bootstrap-5 .select2-results__option--highlighted {
  background-color: #0d6efd !important;
  color: #fff !important;
}

/* ─── Flatpickr Styling (Matched to booking global.css) ─── */
/* Dark mode calendar shell and glow */
[data-bs-theme="dark"] .flatpickr-calendar{border:1px solid rgba(255,255,255,.05); box-shadow:0 0 12px 2px rgba(0,183,255,.35),0 0 25px 3px rgba(150,66,255,.2); background:linear-gradient(145deg,#1a1a1a,#2b2b2b); border-radius:.75rem; overflow:hidden; color:#f0f4f8}
[data-bs-theme="dark"] .flatpickr-innerContainer,
[data-bs-theme="dark"] .flatpickr-days,
[data-bs-theme="dark"] .flatpickr-days .dayContainer { background: transparent !important; }
[data-bs-theme="dark"] .flatpickr-day{background:transparent;border:none;color:#f0f4f8}
[data-bs-theme="dark"] .flatpickr-day.disabled,
[data-bs-theme="dark"] .flatpickr-day.flatpickr-disabled { 
  color: rgba(240,244,248,.28) !important; 
  cursor: not-allowed !important; 
  background-image: repeating-linear-gradient(-45deg, rgba(255,255,255,.05) 0 2px, transparent 2px 6px) !important; 
  border-radius: 6px !important;
}
[data-bs-theme="dark"] .flatpickr-day.prevMonthDay,
[data-bs-theme="dark"] .flatpickr-day.nextMonthDay { 
  color: rgba(240,244,248,.45) !important; 
  background: none !important;
}
[data-bs-theme="dark"] .flatpickr-day.prevMonthDay { 
  color: rgba(240,244,248,.45) !important; 
  background: none !important;
}
[data-bs-theme="dark"] .flatpickr-day.nextMonthDay:hover,
[data-bs-theme="dark"] .flatpickr-day.prevMonthDay:hover { background: none !important; }
[data-bs-theme="dark"] .flatpickr-day.prevMonthDay.disabled,
[data-bs-theme="dark"] .flatpickr-day.nextMonthDay.disabled,
[data-bs-theme="dark"] .flatpickr-day.prevMonthDay.flatpickr-disabled,
[data-bs-theme="dark"] .flatpickr-day.nextMonthDay.flatpickr-disabled {
  color: rgba(240,244,248,.28) !important;
  background-image: repeating-linear-gradient(-45deg, rgba(255,255,255,.05) 0 2px, transparent 2px 6px) !important;
  background-color: transparent !important;
  border-radius: 6px !important;
  cursor: not-allowed !important;
}
[data-bs-theme="dark"] .flatpickr-day.prevMonthDay.disabled:hover,
[data-bs-theme="dark"] .flatpickr-day.nextMonthDay.disabled:hover,
[data-bs-theme="dark"] .flatpickr-day.prevMonthDay.flatpickr-disabled:hover,
[data-bs-theme="dark"] .flatpickr-day.nextMonthDay.flatpickr-disabled:hover {
  background-image: repeating-linear-gradient(-45deg, rgba(255,255,255,.05) 0 2px, transparent 2px 6px) !important;
  background-color: transparent !important;
}
[data-bs-theme="dark"] .flatpickr-day.disabled:hover,
[data-bs-theme="dark"] .flatpickr-day.flatpickr-disabled:hover { 
  background-image: repeating-linear-gradient(-45deg, rgba(255,255,255,.05) 0 2px, transparent 2px 6px) !important; 
  background-color: transparent !important;
}
[data-bs-theme="dark"] .flatpickr-day:hover,[data-bs-theme="dark"] .flatpickr-day:focus{background:#1e90ff!important;color:#fff!important;border-color:#1e90ff!important}
[data-bs-theme="dark"] .flatpickr-day.selected,[data-bs-theme="dark"] .flatpickr-day.selected:hover{background:#00d4ff!important;color:#000!important;border-color:#00d4ff!important}
[data-bs-theme="dark"] .flatpickr-day.today{border-color:#00d4ff;background:rgba(0,212,255,.1)}
[data-bs-theme="dark"] .flatpickr-time{ background:#121e28 !important; border-top:1px solid rgba(255,255,255,.12) !important; }
[data-bs-theme="dark"] .flatpickr-time .numInputWrapper, 
[data-bs-theme="dark"] .flatpickr-time .flatpickr-am-pm { background: transparent !important; }
[data-bs-theme="dark"] .flatpickr-months .flatpickr-month{color:#fff;font-weight:600;background:linear-gradient(135deg,#0d6efd,#3a86ff); box-shadow:0 0 10px rgba(0,123,255,.15)}
[data-bs-theme="dark"] .flatpickr-prev-month,[data-bs-theme="dark"] .flatpickr-next-month{color:#fff!important}
[data-bs-theme="dark"] .flatpickr-prev-month svg,[data-bs-theme="dark"] .flatpickr-next-month svg{fill:#fff!important}
[data-bs-theme="dark"] .flatpickr-current-month input.cur-year{color:#fff!important;background:transparent!important;border:none!important}
[data-bs-theme="dark"] .flatpickr-monthDropdown-months{background:transparent!important;color:#fff!important;border:none!important;border-radius:0!important;box-shadow:none!important;appearance:none!important;-webkit-appearance:none!important;-moz-appearance:none!important}
[data-bs-theme="dark"] .flatpickr-monthDropdown-months:focus{outline:none!important;border:none!important;box-shadow:none!important}
[data-bs-theme="dark"] .flatpickr-weekdays{background:linear-gradient(135deg,#0d6efd,#3a86ff)!important;border:none!important;box-shadow:none!important}
[data-bs-theme="dark"] .flatpickr-weekday{background:transparent!important;color:#fff!important; font-weight:bold; padding:.5rem 0!important; margin:0!important; border:none!important}
[data-bs-theme="dark"] .flatpickr-time input{background-color:#0d6efd;color:#fff;border:1px solid rgba(13,110,253,.3);border-radius:5px;padding:4px 6px;text-align:center; box-shadow:inset 0 0 4px rgba(13,110,253,.4)}
[data-bs-theme="dark"] .flatpickr-time input:focus{outline:none; box-shadow:0 0 6px #00bfff, inset 0 0 4px #00bfff}
.flatpickr-calendar.open{z-index:999999!important}

/* Ensure flatpickr inputs inside Bootstrap modals match regular form-control sizing
   and keep the calendar positioned above modal layers without shifting layout. */
.modal .flatpickr-wrapper,
.modal .flatpickr-input,
.modal .flatpickr-alt-input {
  display: block !important;
  width: 100% !important;
  height: 38px !important;
  padding: -0.675rem 0.75rem !important;
  box-sizing: border-box !important;
  border-radius: 0.375rem !important;
}

/* Make sure the calendar popup sits above modal z-index and uses absolute positioning
   so it doesn't push or reflow accordion/modal content. */
.modal .flatpickr-calendar {
  position: absolute !important;
  z-index: 30000 !important;
}

/* Stronger, theme-scoped overrides to ensure flatpickr alt inputs inside modals
   inherit the same sizing and padding as other form controls. Use !important to
   beat other theme/global rules that were still taking precedence. */
body[data-bs-theme="dark"] .modal .flatpickr-wrapper,
body[data-bs-theme="dark"] .modal input.flatpickr-alt-input,
body[data-bs-theme="dark"] .modal input.flatpickr-input,
body[data-bs-theme="dark"] .modal input.flatpickr-input[readonly],
body[data-bs-theme="dark"] .modal input.flatpickr-alt-input[readonly] {
  display: block !important;
  width: 100% !important;
  height: 38px !important;
  padding: 0.375rem 0.75rem !important;
  box-sizing: border-box !important;
  border-radius: 0.375rem !important;
  line-height: 1.5 !important;
  font-size: 1rem !important;
}

body[data-bs-theme="light"] .modal .flatpickr-wrapper,
body[data-bs-theme="light"] .modal input.flatpickr-alt-input,
body[data-bs-theme="light"] .modal input.flatpickr-input,
body[data-bs-theme="light"] .modal input.flatpickr-input[readonly],
body[data-bs-theme="light"] .modal input.flatpickr-alt-input[readonly] {
  display: block !important;
  width: 100% !important;
  height: 38px !important;
  padding: 0.375rem 0.75rem !important;
  box-sizing: border-box !important;
  border-radius: 0.375rem !important;
  line-height: 1.5 !important;
  font-size: 1rem !important;
}

/* Ensure the alt input keeps form-control appearance inside input groups */
.modal .date-input-group .flatpickr-alt-input,
.modal .date-input-group .flatpickr-input {
  padding-right: 3rem !important;
}


/* Light mode parity with booking */
[data-bs-theme="light"] .flatpickr-calendar{ border:1px solid rgba(0,0,0,.08) !important; border-radius:.75rem !important; box-shadow:0 10px 30px rgba(0,0,0,.08) !important; background:#fff !important; overflow:hidden; }
[data-bs-theme="light"] .flatpickr-innerContainer,
[data-bs-theme="light"] .flatpickr-days,
[data-bs-theme="light"] .flatpickr-days .dayContainer{ background:#ffffff !important; }
[data-bs-theme="light"] .flatpickr-months .flatpickr-month{ color:#0e2433; font-weight:600; background:linear-gradient(135deg,#0d6efd,#3a86ff) !important; box-shadow:0 0 10px rgba(13,110,253,.15); }
[data-bs-theme="light"] .flatpickr-weekdays{ background:linear-gradient(135deg,#0d6efd,#3a86ff) !important; }
[data-bs-theme="light"] .flatpickr-weekday{ color:#fff !important; font-weight:600; background:transparent !important; box-shadow:none !important; border:none !important; }
[data-bs-theme="light"] .flatpickr-weekdays .flatpickr-weekdaycontainer{ background:transparent !important; box-shadow:none !important; border:none !important; }
[data-bs-theme="light"] .flatpickr-day{ color:#0e2433; }
[data-bs-theme="light"] .flatpickr-day.disabled,
[data-bs-theme="light"] .flatpickr-day.flatpickr-disabled { 
  color: rgba(14,36,51,.32) !important; 
  cursor: not-allowed !important; 
  background-image: repeating-linear-gradient(-45deg, rgba(0,0,0,.05) 0 2px, transparent 2px 6px) !important; 
  border-radius: 6px !important;
}
[data-bs-theme="light"] .flatpickr-day.prevMonthDay,
[data-bs-theme="light"] .flatpickr-day.nextMonthDay { 
  color: rgba(14,36,51,.5) !important; 
  background: none !important;
}
[data-bs-theme="light"] .flatpickr-day.prevMonthDay { 
  color: rgba(14,36,51,.5) !important; 
  background: none !important;
}
[data-bs-theme="light"] .flatpickr-day.nextMonthDay:hover,
[data-bs-theme="light"] .flatpickr-day.prevMonthDay:hover { background: none !important; }
[data-bs-theme="light"] .flatpickr-day.prevMonthDay.disabled,
[data-bs-theme="light"] .flatpickr-day.nextMonthDay.disabled,
[data-bs-theme="light"] .flatpickr-day.prevMonthDay.flatpickr-disabled,
[data-bs-theme="light"] .flatpickr-day.nextMonthDay.flatpickr-disabled {
  color: rgba(14,36,51,.32) !important;
  background-image: repeating-linear-gradient(-45deg, rgba(0,0,0,.05) 0 2px, transparent 2px 6px) !important;
  background-color: transparent !important;
  border-radius: 6px !important;
  cursor: not-allowed !important;
}
[data-bs-theme="light"] .flatpickr-day.prevMonthDay.disabled:hover,
[data-bs-theme="light"] .flatpickr-day.nextMonthDay.disabled:hover,
[data-bs-theme="light"] .flatpickr-day.prevMonthDay.flatpickr-disabled:hover,
[data-bs-theme="light"] .flatpickr-day.nextMonthDay.flatpickr-disabled:hover {
  background-image: repeating-linear-gradient(-45deg, rgba(0,0,0,.05) 0 2px, transparent 2px 6px) !important;
  background-color: transparent !important;
}
[data-bs-theme="light"] .flatpickr-day.disabled:hover,
[data-bs-theme="light"] .flatpickr-day.flatpickr-disabled:hover { 
  background-image: repeating-linear-gradient(-45deg, rgba(0,0,0,.05) 0 2px, transparent 2px 6px) !important; 
  background-color: transparent !important;
}
[data-bs-theme="light"] .flatpickr-day:hover,[data-bs-theme="light"] .flatpickr-day:focus{ background:#1e90ff !important; color:#fff !important; border-color:#1e90ff !important; }
[data-bs-theme="light"] .flatpickr-day.selected,[data-bs-theme="light"] .flatpickr-day.selected:hover{ background:#0d6efd !important; color:#fff !important; border-color:#0d6efd !important; }
[data-bs-theme="light"] .flatpickr-day.today{ border-color:#0d6efd; background:rgba(13,110,253,.08); }
[data-bs-theme="light"] .flatpickr-time{ background:#f6faff !important; border-top:1px solid rgba(13,110,253,.2) !important; }
[data-bs-theme="light"] .flatpickr-time input{ background:#0d6efd; color:#fff; border:1px solid rgba(13,110,253,.3); border-radius:5px; padding:4px 6px; text-align:center; box-shadow:inset 0 0 4px rgba(13,110,253,.25); }
[data-bs-theme="light"] .flatpickr-time input:focus{ outline:none; box-shadow:0 0 6px rgba(13,110,253,.45), inset 0 0 4px rgba(13,110,253,.3); }

/* Light: remove border around month dropdown and year input */
[data-bs-theme="light"] .flatpickr-current-month input.cur-year{ background:transparent !important; border:none !important; color:#fff !important; }
[data-bs-theme="light"] .flatpickr-monthDropdown-months{ background:transparent !important; border:none !important; box-shadow:none !important; appearance:none !important; -webkit-appearance:none !important; -moz-appearance:none !important; color:#fff !important; }

/* Dark mode: ensure flatpickr input fields match */
[data-bs-theme="dark"] .flatpickr-current-month .cur-month,
[data-bs-theme="light"] .flatpickr-current-month .cur-month{
  background: transparent !important;
  color: #fff !important;
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
}

/* Month header container transparent in both themes */
[data-bs-theme="dark"] .flatpickr-current-month,
[data-bs-theme="light"] .flatpickr-current-month{
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

/* Month dropdown option lists themed */
[data-bs-theme="dark"] .flatpickr-monthDropdown-months option{ background:#08151d !important; color:#e7eef7 !important; }
[data-bs-theme="dark"] .flatpickr-monthDropdown-months option:checked{ background-color: rgba(13,110,253,.35) !important; color:#fff !important; }
[data-bs-theme="light"] .flatpickr-monthDropdown-months option{ background:#ffffff !important; color:#0e2433 !important; }

/* Reduce OS highlight variance on hover/selected in dark mode */
[data-bs-theme="dark"] .flatpickr-monthDropdown-months option:hover,
[data-bs-theme="dark"] .flatpickr-monthDropdown-months option:focus{
  background-color:#0b1a23 !important;
  color:#e7eef7 !important;
}

/* Remove focus glow/border on the month select in both themes */
[data-bs-theme="light"] .flatpickr-monthDropdown-months:focus{ outline:none !important; border:none !important; box-shadow:none !important; background: transparent !important; }
[data-bs-theme="dark"] .flatpickr-monthDropdown-months:focus{ background: transparent !important; }

[data-bs-theme="dark"] .form-control.flatpickr-input,
[data-bs-theme="dark"] .form-control.flatpickr-input[readonly],
[data-bs-theme="dark"] input.flatpickr-input,
[data-bs-theme="dark"] input.flatpickr-input[readonly]{
  background:#08151d!important; 
  color:#e7eef7!important;
  border:1px solid rgba(255,255,255,.12)!important;
}
[data-bs-theme="dark"] .form-control.flatpickr-input:focus,
[data-bs-theme="dark"] input.flatpickr-input:focus{ border-color:#3998ff!important; color:#fff!important; }

/* ─── Form Controls Alignment ─── */
.form-select,
.form-control,
.select2-container--default .select2-selection--single {
  height: 38px !important;
  line-height: 1.5 !important;
  padding: 0.375rem 0.75rem !important;
  box-sizing: border-box !important;
  font-size: 1rem !important;
}

/* ─── Global Form Dark Mode Support ─── */
[data-bs-theme="dark"] .form-label {
  color: var(--bs-body-color) !important;
}

[data-bs-theme="dark"] .form-control,
[data-bs-theme="dark"] .form-select {
  background-color: rgba(255, 255, 255, 0.05) !important;
  border-color: var(--bs-border-color) !important;
  color: var(--bs-body-color) !important;
}

[data-bs-theme="dark"] .form-control:focus,
[data-bs-theme="dark"] .form-select:focus {
  background-color: rgba(255, 255, 255, 0.08) !important;
  border-color: var(--bs-primary) !important;
  color: var(--bs-body-color) !important;
  box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25) !important;
}

[data-bs-theme="dark"] .form-control::placeholder {
  color: rgba(255, 255, 255, 0.6) !important;
}

[data-bs-theme="dark"] .form-check-label {
  color: var(--bs-body-color) !important;
  background-color: transparent !important;
}

/* Ensure country select matches all fields in dark mode */
[data-bs-theme="dark"] .country-select {
  background-color: rgba(255, 255, 255, 0.05) !important;
  color: #fff !important;
  border-color: var(--bs-border-color) !important;
  appearance: none !important;
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  box-shadow: none !important;
}

[data-bs-theme="dark"] .form-check-input {
  background-color: var(--bs-body-bg);
  border-color: var(--bs-border-color);
}

[data-bs-theme="dark"] textarea.form-control {
  background-color: rgba(255, 255, 255, 0.05) !important;
  border-color: var(--bs-border-color) !important;
  color: var(--bs-body-color) !important;
}

/* Light mode: remove native select arrow - we'll use CSS arrow like dark mode */
[data-bs-theme="light"] .form-select {
  appearance: none !important;
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  background-image: none !important;
  padding-right: 2.5rem !important;
}

/* Prevent any hover-based movement on inputs/selects in both themes */
[data-bs-theme="light"] .form-control:hover,
[data-bs-theme="light"] .form-select:hover,
[data-bs-theme="dark"] .form-control:hover,
[data-bs-theme="dark"] .form-select:hover {
  transform: none !important;
  box-shadow: none !important;
}

/* Lock all form controls to prevent size changes on hover */
[data-bs-theme="light"] table .form-control,
[data-bs-theme="light"] table .form-select,
[data-bs-theme="light"] table input,
[data-bs-theme="light"] table select,
[data-bs-theme="dark"] table .form-control,
[data-bs-theme="dark"] table .form-select,
[data-bs-theme="dark"] table input,
[data-bs-theme="dark"] table select {
  height: 38px !important;
  min-height: 38px !important;
  max-height: 38px !important;
  box-sizing: border-box !important;
}

[data-bs-theme="light"] table .form-control:hover,
[data-bs-theme="light"] table .form-select:hover,
[data-bs-theme="light"] table input:hover,
[data-bs-theme="light"] table select:hover,
[data-bs-theme="dark"] table .form-control:hover,
[data-bs-theme="dark"] table .form-select:hover,
[data-bs-theme="dark"] table input:hover,
[data-bs-theme="dark"] table select:hover {
  height: 38px !important;
  min-height: 38px !important;
  max-height: 38px !important;
  transform: none !important;
  scale: none !important;
  border-width: 1px !important;
  padding: 0.375rem 0.75rem !important;
}

/* Remove row hover highlight in tables so fields don't appear to shift */
[data-bs-theme="light"] .card.card-dark table.table tbody tr:hover,
[data-bs-theme="light"] .table.table-hover tbody tr:hover {
  background-color: transparent !important;
}

/* Prevent hover-induced row size/animation in both themes */
[data-bs-theme="light"] .card.card-dark table.table tbody tr,
[data-bs-theme="light"] .table.table-hover tbody tr,
[data-bs-theme="dark"] .card.card-dark table.table tbody tr,
[data-bs-theme="dark"] .table.table-hover tbody tr,
[data-bs-theme="light"] table tbody tr,
[data-bs-theme="dark"] table tbody tr {
  transition: none !important;
  height: auto !important;
  min-height: auto !important;
  max-height: none !important;
}

/* Compact table option (opt-in). Use class="table compact" to apply tighter spacing
   without affecting all tables globally. */
[data-bs-theme="light"] table.table.compact tbody tr td,
[data-bs-theme="light"] table.table.compact tbody tr th,
[data-bs-theme="dark"] table.table.compact tbody tr td,
[data-bs-theme="dark"] table.table.compact tbody tr th {
  padding: 0.5rem !important;
  vertical-align: middle !important;
  line-height: 1.5 !important;
}

[data-bs-theme="dark"] .card.card-dark table.table tbody tr:hover,
[data-bs-theme="dark"] .table.table-hover tbody tr:hover,
[data-bs-theme="light"] table tbody tr:hover,
[data-bs-theme="dark"] table tbody tr:hover {
  background-color: transparent !important;
  transform: none !important;
  scale: none !important;
}


/* ─── Toast and Utility Styles ─── */
.flash-message {
  position: fixed;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 9999;
  padding: 0.75rem 1.25rem;
  border-radius: 0.375rem;
  box-shadow: 0 2px 6px rgba(0,0,0,0.2);
  opacity: 1;
  transition: opacity 0.5s ease;
  font-size: 0.9rem;
}
.flash-success { background: rgba(40,167,69,0.9); color: #fff; }
.flash-error   { background: rgba(220,53,69,0.9); color: #fff; }
.toast-container {
  position: fixed;
  top: 32px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 20000;
  width: 100%;
  max-width: 420px;
  pointer-events: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}

.toast {
  min-width: 280px;
  max-width: 420px;
  margin: 0 auto;
  background: rgba(30, 42, 70, 0.92);
  color: #fff;
  border-radius: 16px;
  box-shadow: 0 4px 32px 0 rgba(0, 186, 255, 0.18), 0 1.5px 8px 0 rgba(0, 0, 0, 0.10);
  padding: 1.1rem 1.5rem 1.1rem 1.2rem;
  display: flex;
  align-items: center;
  font-size: 1rem;
  font-weight: 500;
  pointer-events: auto;
  border: none;
  opacity: 0;
  animation: toast-fade-in 0.35s cubic-bezier(0.4, 0, 0.2, 1) forwards;
  transition: opacity 0.3s;
  backdrop-filter: blur(8px);
  position: relative;
}

.toast.toast-success {
  background: linear-gradient(135deg, #1e3c72 60%, #2fcf90 100%);
  box-shadow: 0 4px 32px 0 rgba(47, 207, 144, 0.18), 0 1.5px 8px 0 rgba(0, 0, 0, 0.10);
}

.toast.toast-danger,
.toast.toast-error {
  background: linear-gradient(135deg, #1e3c72 60%, #f24747 100%);
  box-shadow: 0 4px 32px 0 rgba(242, 71, 71, 0.18), 0 1.5px 8px 0 rgba(0, 0, 0, 0.10);
}

.toast.toast-info {
  background: linear-gradient(135deg, #1e3c72 60%, #00baff 100%);
  box-shadow: 0 4px 32px 0 rgba(0, 186, 255, 0.18), 0 1.5px 8px 0 rgba(0, 0, 0, 0.10);
}

.toast.toast-warning {
  background: linear-gradient(135deg, #1e3c72 60%, #e5c84c 100%);
  color: #222;
  box-shadow: 0 4px 32px 0 rgba(229, 200, 76, 0.18), 0 1.5px 8px 0 rgba(0, 0, 0, 0.10);
}

.toast .toast-header {
  display: none;
}

.toast .toast-body {
  width: 100%;
  padding: 0;
  background: none;
  color: inherit;
  font-size: 1rem;
  font-weight: 500;
}

.toast .btn-close {
  position: absolute;
  top: 12px;
  right: 16px;
  color: rgba(255, 71, 87, 0.9);
  opacity: 0.8;
  background: none;
  border: none;
  font-size: 1.2rem;
  pointer-events: auto;
  transition: all 0.2s;
}

.toast .btn-close:hover {
  color: #ff4757;
  opacity: 1;
}

@keyframes toast-fade-in {
  from {
    opacity: 0;
    transform: translateY(-24px) scale(0.98);
  }

  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* ─── Responsive Utilities ─── */
@media (max-width: 768px) {
  .nav-icons {
    gap: 1rem;
  }

  .nav-icons .nav-link {
    font-size: 0.9rem;
  }

  .nav-icons .nav-link .bi {
    font-size: 1.4rem;
  }
}

/* ─── Country Flag Styling for Select2 ─── */
.select2-results__option[data-flag]::before,
.select2-selection__rendered[data-flag]::before {
  content: '';
  display: inline-block;
  width: 20px;
  height: 15px;
  background-size: cover;
  background-repeat: no-repeat;
  margin-right: 8px;
  vertical-align: middle;
  background-image: none;
}

/* Flag styles for common countries - dynamically loaded via flagcdn.com */
.select2-results__option[data-flag]::before {
  background-image: var(--flag-url);
}

.select2-selection__rendered[data-flag]::before {
  background-image: var(--flag-url);
}

/* Special handling for countries without flags */
.select2-results__option[data-flag="world"]::before,
.select2-results__option[data-flag="other"]::before,
.select2-selection__rendered[data-flag="world"]::before,
.select2-selection__rendered[data-flag="other"]::before {
  content: '🌍';
  background-image: none;
  width: auto;
  height: auto;
  font-size: 16px;
}

/* Improved Select2 alignment for flags */
.select2-selection--single {
  min-height: 38px !important;
  display: flex !important;
  align-items: center !important;
}

.select2-selection__rendered {
  display: flex !important;
  align-items: center !important;
  padding-left: 8px !important;
}

/* Country dropdown specific styling */
.country-select.select2-container--default .select2-selection--single {
  padding-left: 0 !important;
}

/* ─── FORM CONTROL PLAINTEXT DARK MODE FIXES ─── */
/* Fix bg-light text-dark elements in dark mode */
[data-bs-theme="dark"] .form-control-plaintext.bg-light.text-dark,
[data-bs-theme="dark"] .bg-light.text-dark {
  background-color: rgba(255, 255, 255, 0.05) !important;
  color: #ffffff !important;
  border-color: rgba(255, 255, 255, 0.2) !important;
}

[data-bs-theme="dark"] .form-control-plaintext {
  color: #ffffff !important;
  background-color: transparent !important;
}

/* Override for country field to match other form controls */
[data-bs-theme="dark"] .form-control-plaintext.field-bg-country {
  background-color: rgba(255, 255, 255, 0.05) !important;
}

/* General text color fixes for dark mode */
[data-bs-theme="dark"] .text-dark {
  color: #ffffff !important;
}

[data-bs-theme="dark"] .bg-light {
  background-color: rgba(255, 255, 255, 0.05) !important;
}


/* --- Card blue glow and borderless style for table container cards --- */
/* --- Card blue glow and borderless style for table container cards --- */
.card {
  border: none !important;
  box-shadow: 0 0 10px 2px rgba(0, 123, 255, 0.07), 0 1px 6px 0 rgba(0, 123, 255, 0.04) !important;
  border-radius: 16px !important;
  background: var(--bs-body-bg) !important;
}

[data-bs-theme="dark"] .card {
  border: none !important;
  box-shadow: 0 0 16px 4px rgba(0, 186, 255, 0.13), 0 1px 8px 0 rgba(0, 186, 255, 0.07) !important;
  background: #08151d !important;
}

/* NOTE: Previously we removed the glow on the examination sidebar
  patient/doctor cards. That made their appearance inconsistent with
  other cards. We've removed the override so these cards inherit the
  standard .card glow and border styles. If a future need arises to
  target only a specific card, use a more specific class instead of
  relying on the global #examinationForm selector. */

/* Style for patient comment field */
#PatientComment {
    height: 120px !important;
    font-size: 1.2rem;
    padding: 1.5rem;
    border: 2px solid #6c757d;
    border-radius: 0.5rem;
    background-color: #343a40;
    color: #f8f9fa;
    resize: none;
}

/* Examination page: ensure PatientComment and DoctorNotes are visibly taller
   Target both the id and name attributes because some templates use name only. */
textarea[name="PatientComment"],
textarea[name="AppointmentNotes"],
#PatientComment,
#AppointmentNotes,
#DoctorNotes,
textarea[name="DoctorNotes"] {
  min-height: 140px !important;
  height: auto !important;
  padding: 0.75rem 1rem !important;
  resize: vertical !important;
  box-sizing: border-box !important;
}

/* Light mode specific: keep backgrounds & text readable when taller */
[data-bs-theme="light"] textarea[name="PatientComment"],
[data-bs-theme="light"] textarea[name="AppointmentNotes"],
[data-bs-theme="light"] #PatientComment,
[data-bs-theme="light"] #AppointmentNotes,
[data-bs-theme="light"] #DoctorNotes,
[data-bs-theme="light"] textarea[name="DoctorNotes"] {
  background: #ffffff !important;
  color: #212529 !important;
  border: 1px solid #ced4da !important;
}

/* Dark mode specific: preserve dark textarea appearance while increasing height */
[data-bs-theme="dark"] textarea[name="PatientComment"],
[data-bs-theme="dark"] textarea[name="AppointmentNotes"],
[data-bs-theme="dark"] #PatientComment,
[data-bs-theme="dark"] #AppointmentNotes,
[data-bs-theme="dark"] #DoctorNotes,
[data-bs-theme="dark"] textarea[name="DoctorNotes"] {
  background: rgba(255,255,255,0.05) !important;
  color: var(--bs-body-color) !important;
  border-color: var(--bs-border-color) !important;
}

/* Updated style for attachment links */
.attachment-link {
    text-decoration: none;
    color: #0d6efd;
    transition: color 0.3s ease-in-out;
}

.attachment-link:hover {
    color: #0d6efd;
    text-shadow: 0 0 10px #0d6efd;
}

/* Style for icons */
.attachment-icon {
    color: #0d6efd;
    transition: color 0.3s ease-in-out;
}

.attachment-icon:hover {
    color: #0d6efd;
    text-shadow: 0 0 10px #0d6efd;
}

/* Avatar styling */
.avatar-lg {
    width: 130px;
    height: 180px;
}

/* Doctor avatar (square + cover) to ensure round appearance when using
   .rounded-circle; overrides .avatar-lg which sets a taller oval shape. */
.doctor-avatar-xl {
  width: 140px !important;
  height: 140px !important;
  object-fit: cover !important;
  border-radius: 50% !important; /* ensure fully round */
  display: inline-block;
}

/* ------------------------------------------------------------------
   Hide scrollbars globally (preserve scrolling). Applied via CSS files
   so no inline styles are required. This hides scrollbars in pages
   and overlays (modals) while keeping content scrollable.

   - Firefox: scrollbar-width: none
   - IE/Edge (legacy): -ms-overflow-style: none
   - WebKit: hide using ::-webkit-scrollbar
------------------------------------------------------------------ */
html, body {
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none; /* IE 10+ */
}

/* Hide scrollbars for all scrollable elements but preserve scroll behavior */
* {
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none; /* IE 10+ */
}

/* WebKit (Chrome, Safari, Edge) */
*::-webkit-scrollbar {
  width: 0px;
  height: 0px;
  display: none;
}

/* Keep preformatted content (e.g. <pre>) unaffected where removing scrollbar
   would break UX: allow scrollbars for pre elements */
pre, code {
  scrollbar-width: auto;
}

/* ─── Header Toggle Placement & Sizing (moved from inline) ─── */
/* Place the sidebar toggle immediately next to the logo and slightly outside
   the container's left margin. Keep this at the end of the file to override
   earlier generic .sidebar-toggle styles. */
.site-header .header-left {
  display: flex;
  align-items: center;
  gap: .25rem; /* tiny gap between toggle and logo */
}

.site-header .header-toggle {
  margin-left: -4.0rem; /* pull outside container so it sits just beyond the margin */
  padding: .65rem .75rem; /* larger hit area */
  font-size: 2.2rem; /* bigger icon */
  line-height: 1;
  position: relative;
  z-index: 1050; /* ensure above header content */
  border-radius: .5rem;
}

@media (max-width: 575.98px) {
  .site-header .header-toggle {
    margin-left: -3.0rem;
    font-size: 2rem;
    padding: .6rem .7rem;
  }
}

@media (min-width: 1200px) {
  .site-header .header-toggle {
    margin-left: -4.0rem; /* a touch further out on wide screens */
    font-size: 2.3rem;
    padding: .7rem .8rem;
  }
}

/* ─── Header Profile Section (moved from sidebar) ─── */
.header-profile {
  display: flex;
  align-items: center;
  gap: 1.25rem; /* increased spacing between profile and settings */
}

.header-profile-img {
  width: 52px;
  height: 52px;
  object-fit: cover;
  border-radius: 50%;
  border: 2px solid var(--bs-border-color);
}

.header-profile .header-profile-avatar {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: linear-gradient(135deg, #007bff, #0056b3);
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-weight: 600;
  font-size: 1rem;
  border: 2px solid var(--bs-border-color);
}

.header-profile .profile-info {
  display: flex;
  flex-direction: column;
  line-height: 1.3;
  margin-right: 0.5rem; /* extra space after name/role before settings */
}

.header-profile .profile-name {
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--bs-body-color);
  white-space: nowrap;
}

.header-profile .profile-role {
  font-size: 0.8rem;
  text-transform: capitalize;
  color: var(--bs-secondary-color);
}

.header-profile .settings-btn {
  color: var(--bs-body-color);
  transition: color 0.2s ease;
  margin-left: 0.25rem; /* additional left margin for settings button */
}

.header-profile .settings-btn .bi-gear {
  font-size: 1.6rem;
}

.header-profile .settings-btn:hover {
  color: var(--bs-primary);
}

[data-bs-theme="dark"] .header-profile .profile-name {
  color: #ffffff;
}

[data-bs-theme="dark"] .header-profile .settings-btn {
  color: #e6edf3;
}

[data-bs-theme="dark"] .header-profile .settings-btn:hover {
  color: #58a6ff;
}

/* ─── Dark Mode Profile Dropdown Fix ─── */
[data-bs-theme="dark"] .header-profile .dropdown-menu {
  background-color: #08151d !important;
  border-color: #21262d !important;
}

[data-bs-theme="dark"] .header-profile .dropdown-menu::before {
  border-bottom-color: #08151d !important;
}

[data-bs-theme="dark"] .header-profile .dropdown-menu .dropdown-item {
  color: #e6edf3 !important;
}

[data-bs-theme="dark"] .header-profile .dropdown-menu .dropdown-item:hover,
[data-bs-theme="dark"] .header-profile .dropdown-menu .dropdown-item:focus {
  background-color: #161b22 !important;
  color: #58a6ff !important;
}

[data-bs-theme="dark"] .header-profile .dropdown-menu .dropdown-divider {
  border-color: #21262d !important;
}

/* ─── Fix Log Out Button Color in Dark Mode ─── */
[data-bs-theme="dark"] .header-profile .dropdown-menu .dropdown-item.logout {
  color: #dc3545 !important; /* Bootstrap danger color */
}

[data-bs-theme="dark"] .header-profile .dropdown-menu .dropdown-item.logout:hover,
[data-bs-theme="dark"] .header-profile .dropdown-menu .dropdown-item.logout:focus {
  background-color: #dc3545 !important;
  color: #ffffff !important;
}

/* Notification Dropdown Styles */
.notification-btn {
  position: relative;
  color: var(--bs-body-color);
  transition: color 0.2s ease;
}

.notification-btn:hover {
  color: var(--bs-primary);
}

.notification-count {
  position: absolute;
  top: -4px;
  right: -8px;
  font-size: 0.65rem;
  padding: 0.25em 0.5em;
  min-width: 18px;
  height: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.notification-dropdown {
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
}

.notification-dropdown-item {
  padding: 0.75rem 1rem;
  border-bottom: 1px solid var(--bs-border-color);
  transition: background-color 0.2s;
}

.notification-dropdown-item:hover {
  background-color: var(--bs-tertiary-bg);
}

.notification-dropdown-item:last-child {
  border-bottom: none;
}

.notification-dropdown-unread {
  background-color: rgba(13, 110, 253, 0.05);
}

[data-bs-theme="dark"] .notification-dropdown-unread {
  background-color: rgba(13, 110, 253, 0.1);
}