/* Booking global styles (events module inspired) */


.site-footer {
  background: transparent;
}

/* Form improvements for mobile */
.card {
  border-radius: 0.5rem;
}

/* Improve form field spacing on mobile */
.form-label {
  font-size: 0.9rem;
  margin-bottom: 0.4rem;
}

.form-control,
.form-select {
  font-size: 16px;
  /* Prevents zoom on iOS */
  padding: 0.5rem 0.75rem;
}

/* Button improvements */
.btn {
  padding: 0.6rem 1.2rem;
  font-size: 0.95rem;
}

/* Better textarea on mobile */
textarea.form-control {
  min-height: 80px;
}

/* Autocomplete suggestions mobile optimization: make these behave like dropdowns */
.autocomplete-suggestions {
  /* Positioned absolutely so suggestions overlay content instead of pushing it */
  position: absolute;
  z-index: 9999;
  background: var(--bs-body-bg, #fff);
  color: var(--bs-body-color, #111);
  border: 1px solid rgba(0, 0, 0, 0.08);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.08);
  border-radius: 0.375rem;
  max-height: 200px;
  overflow-y: auto;
  font-size: 0.9rem;
  width: 100%;
  left: 0;
  top: 100%;
}

/* Dark theme variant for suggestions */
[data-bs-theme="dark"] .autocomplete-suggestions {
  background: #212529;
  border-color: #495057;
  color: #e7eef7;
}

/* Fallback: ensure suggestions default to absolute positioning */
.autocomplete-suggestions:not([style*="position:"]) {
  position: absolute;
}

/* Suggestion item styling to visually match Select2 results */
.autocomplete-suggestions .suggestion {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.45rem 0.6rem;
  cursor: pointer;
  font-size: 0.95rem;
  color: inherit;
}

.autocomplete-suggestions .suggestion img {
  width: 18px;
  height: 12px;
  object-fit: cover;
  border-radius: 2px;
}

/* Hover/active state similar to Select2 highlighted option */
.autocomplete-suggestions .suggestion:hover,
.autocomplete-suggestions .suggestion.active {
  background-color: rgba(13, 110, 253, 0.08);
  color: var(--bs-body-color, #111);
}

[data-bs-theme="dark"] .autocomplete-suggestions .suggestion:hover,
[data-bs-theme="dark"] .autocomplete-suggestions .suggestion.active {
  background-color: rgba(13, 110, 253, 0.18);
  color: #fff;
}

/* File input improvements */
.form-text {
  font-size: 0.8rem;
}

/* Theme toggle adjustments for mobile */
#themeToggle+.toggle-track {
  width: 52px;
  height: 25px;
}

#themeToggle+.toggle-track .toggle-thumb {
  width: 19px;
  height: 19px;
}

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


/* Medium screens adjustments */
@media (max-width: 992px) {
  .site-header .container-fluid {
    padding-left: 1rem;
    padding-right: 1rem;
  }
}

/* Remove borders/shadows */
.site-header,
.navbar,
.site-header .container {
  border-bottom: none !important;
  box-shadow: none !important;
}

/* Card and table styling */
.card {
  border-radius: .8rem;
}

table.table>tbody>tr>td,
table.table>thead>tr>th {
  vertical-align: middle !important;
}

.badge {
  border-radius: 999px !important;
  padding: 0.35em 1em !important;
  font-weight: 600;
}

.auth-container {
  max-width: 520px;
}

/* ---------- Forms & Cards ---------- */
.form-control,
.form-select {
  background-color: var(--bs-body-bg);
  color: var(--bs-body-color);
}

.form-control:focus,
.form-select:focus {
  box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.2);
}

/* ---------- Light/Dark theming ---------- */
[data-bs-theme="dark"] body {
  background: #08151d !important;
  color: #e0f0ff;
}

[data-bs-theme="dark"] .site-header {
  background-color: #08151d !important;
  box-shadow: none;
}

[data-bs-theme="dark"] .user-icon i {
  color: #f87171;
}

/* Dark: glassy cards and inputs inspired by events */
[data-bs-theme="dark"] .card {
  background: rgba(8, 21, 29, 0.85) !important;
  border: 1px solid rgba(0, 180, 255, 0.1) !important;
  box-shadow: 0 0 40px rgba(0, 180, 255, 0.05) !important;
  color: inherit !important;
}

[data-bs-theme="dark"] .card .card-body {
  color: inherit;
}

[data-bs-theme="dark"] .card .card-title,
[data-bs-theme="dark"] h1,
[data-bs-theme="dark"] h2,
[data-bs-theme="dark"] h3 {
  color: #fff;
  letter-spacing: .3px;
}

/* Brand-blue page titles (container-level headings only) */
/* Page section titles: blue, a bit larger (exclude card/modal titles) */
[data-bs-theme="dark"] main .container h1:not(.card-title),
[data-bs-theme="dark"] main .container h2:not(.card-title),
[data-bs-theme="dark"] main .container h3:not(.card-title),
[data-bs-theme="dark"] main .container h4:not(.card-title),
[data-bs-theme="dark"] main .container h5:not(.card-title) {
  color: #0d6efd !important;
}

[data-bs-theme="light"] main .container h1:not(.card-title),
[data-bs-theme="light"] main .container h2:not(.card-title),
[data-bs-theme="light"] main .container h3:not(.card-title),
[data-bs-theme="light"] main .container h4:not(.card-title),
[data-bs-theme="light"] main .container h5:not(.card-title) {
  color: #0d6efd !important;
}

/* Slight size bump for common page titles that are <h4> */
main .container h4:not(.card-title) {
  font-size: 1.6rem;
  font-weight: 700;
}

[data-bs-theme="dark"] label,
[data-bs-theme="dark"] small,
[data-bs-theme="dark"] .text-muted {
  color: rgba(255, 255, 255, .75) !important;
}

[data-bs-theme="dark"] .form-control,
[data-bs-theme="dark"] .form-select {
  background: rgba(255, 255, 255, .08);
  border-color: rgba(255, 255, 255, .2);
  color: #f0f4f8;
}

[data-bs-theme="dark"] .form-select {
  background: #08151d !important;
  border-color: rgba(255, 255, 255, .12) !important;
}

[data-bs-theme="dark"] .form-select:focus {
  background: #08151d !important;
  border-color: #3998ff !important;
}

[data-bs-theme="dark"] .form-control,
[data-bs-theme="dark"] .form-select {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .03);
}

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

[data-bs-theme="dark"] .form-control:focus,
[data-bs-theme="dark"] .form-select:focus {
  background: rgba(255, 255, 255, .1);
  border-color: #3998ff;
  box-shadow: none;
  color: #fff;
}

/* --- Dark mode: native <select> and Bootstrap dropdowns --- */
/* Brighten the chevron and ensure dark menu/option backgrounds */
[data-bs-theme="dark"] .form-select {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='%23cfe0ff' d='M3.2 5.8a1 1 0 0 1 1.4 0L8 9.2l3.4-3.4a1 1 0 1 1 1.4 1.4l-4.1 4.1a1 1 0 0 1-1.4 0L3.2 7.2a1 1 0 0 1 0-1.4z'/%3e%3c/svg%3e") !important;
  background-repeat: no-repeat !important;
  background-position: right .75rem center !important;
  background-size: 16px 12px !important;
}

[data-bs-theme="dark"] .form-select option,
[data-bs-theme="dark"] .form-select optgroup {
  background-color: #08151d !important;
  color: #e7eef7 !important;
}

[data-bs-theme="dark"] .form-select option:checked {
  background-color: rgba(13, 110, 253, .35) !important;
  color: #fff !important;
}

[data-bs-theme="dark"] .form-select[multiple] option:checked {
  background-color: rgba(13, 110, 253, .35) !important;
}

[data-bs-theme="dark"] .form-select option[disabled] {
  color: rgba(231, 238, 247, .45) !important;
}

/* Bootstrap dropdown components */
[data-bs-theme="dark"] .dropdown-menu {
  background-color: #08151d !important;
  border: 1px solid rgba(255, 255, 255, .06) !important;
  box-shadow: 0 12px 28px rgba(0, 0, 0, .45) !important;
}

[data-bs-theme="dark"] .dropdown-menu:focus {
  outline: none !important;
}

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

[data-bs-theme="dark"] .dropdown-item:hover,
[data-bs-theme="dark"] .dropdown-item:focus {
  color: #fff !important;
  background-color: rgba(13, 110, 253, .18) !important;
}

[data-bs-theme="dark"] .dropdown-item.active,
[data-bs-theme="dark"] .dropdown-item:active {
  color: #fff !important;
  background-color: #0d6efd !important;
}

[data-bs-theme="dark"] .dropdown-divider {
  border-top-color: rgba(255, 255, 255, .08) !important;
}

/* Remove bright borders on sized/multi selects to match background */
[data-bs-theme="dark"] .form-select[multiple],
[data-bs-theme="dark"] .form-select[size] {
  background-color: #08151d !important;
  color: #e7eef7 !important;
  border: 1px solid rgba(255, 255, 255, .12) !important;
  box-shadow: none !important;
}

/* --- Dark mode: inputs unified to app background --- */
[data-bs-theme="dark"] .form-control {
  background: #08151d !important;
  color: #e7eef7 !important;
  border: 1px solid rgba(255, 255, 255, .12) !important;
  box-shadow: none !important;
}

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

[data-bs-theme="dark"] .form-control:focus {
  background: #08151d !important;
  color: #ffffff !important;
  border-color: #3998ff !important;
  box-shadow: none !important;
}

[data-bs-theme="dark"] .form-control:disabled,
[data-bs-theme="dark"] .form-control[disabled] {
  background: #0b1a23 !important;
  color: rgba(231, 238, 247, .55) !important;
  border-color: rgba(255, 255, 255, .1) !important;
}

[data-bs-theme="dark"] .form-control[readonly] {
  background: #0b1a23 !important;
  color: #e7eef7 !important;
}

[data-bs-theme="dark"] .form-select:disabled,
[data-bs-theme="dark"] .form-select[disabled] {
  background: #0b1a23 !important;
  /* slightly dimmer to signal dependency */
  color: rgba(231, 238, 247, .55) !important;
  border-color: rgba(255, 255, 255, .1) !important;
  opacity: 1 !important;
  /* avoid washed-out look */
}

[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;
  /* match other inputs */
  color: #e7eef7 !important;
}

/* --- Dark mode: Event info and alerts --- */
[data-bs-theme="dark"] #event-info {
  color: #d0e8ff !important;
  background: rgba(13, 110, 253, 0.08);
  padding: 0.75rem;
  border-radius: 0.375rem;
  border-left: 3px solid rgba(13, 110, 253, 0.5);
}

[data-bs-theme="dark"] .text-danger {
  color: #ff6b6b !important;
}

[data-bs-theme="dark"] .text-warning {
  color: #ffd43b !important;
}

[data-bs-theme="dark"] .text-success {
  color: #51cf66 !important;
}

[data-bs-theme="dark"] .text-info {
  color: #66d9ef !important;
}

[data-bs-theme="dark"] .alert {
  background: rgba(13, 110, 253, 0.1);
  border-color: rgba(13, 110, 253, 0.3);
  color: #e7eef7;
}

[data-bs-theme="dark"] .alert-danger {
  background: rgba(255, 107, 107, 0.15);
  border-color: rgba(255, 107, 107, 0.4);
  color: #ffb3b3;
}

[data-bs-theme="dark"] .alert-warning {
  background: rgba(255, 212, 59, 0.15);
  border-color: rgba(255, 212, 59, 0.4);
  color: #ffe066;
}

[data-bs-theme="dark"] .alert-success {
  background: rgba(81, 207, 102, 0.15);
  border-color: rgba(81, 207, 102, 0.4);
  color: #9fdc9f;
}

[data-bs-theme="dark"] .alert-info {
  background: rgba(102, 217, 239, 0.15);
  border-color: rgba(102, 217, 239, 0.4);
  color: #99e9f2;
  border: 1px solid rgba(255, 255, 255, .12) !important;
}

/* --- Dark mode: File inputs --- */
[data-bs-theme="dark"] .form-control[type="file"] {
  color: #e7eef7 !important;
}

[data-bs-theme="dark"] .form-control[type="file"]::file-selector-button {
  background: rgba(13, 110, 253, 0.2);
  color: #66b3ff;
  border: 1px solid rgba(13, 110, 253, 0.4);
  border-radius: 0.25rem;
  padding: 0.375rem 0.75rem;
  margin-right: 0.75rem;
  transition: all 0.2s;
}

[data-bs-theme="dark"] .form-control[type="file"]::file-selector-button:hover {
  background: rgba(13, 110, 253, 0.3);
  border-color: rgba(13, 110, 253, 0.6);
  color: #99ccff;
}

/* --- Dark mode: Helper text --- */
[data-bs-theme="dark"] .form-text {
  color: rgba(255, 255, 255, 0.6) !important;
}

/* --- Dark mode: Disabled states --- */
[data-bs-theme="dark"] .btn:disabled,
[data-bs-theme="dark"] .btn.disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

[data-bs-theme="dark"] .form-control.flatpickr-input:focus,
[data-bs-theme="dark"] input.flatpickr-input:focus {
  border-color: #3998ff !important;
  color: #fff !important;
}

[data-bs-theme="dark"] .input-group-text {
  background: #08151d !important;
  color: #cfe0ff !important;
  border: 1px solid rgba(255, 255, 255, .12) !important;
}

[data-bs-theme="dark"] .form-text {
  color: rgba(231, 238, 247, .7) !important;
}

/* Validation (no harsh glow) */
[data-bs-theme="dark"] .form-control.is-invalid,
[data-bs-theme="dark"] .was-validated .form-control:invalid {
  border-color: rgba(242, 71, 71, .8) !important;
  color: #fff !important;
  box-shadow: none !important;
}

[data-bs-theme="dark"] .form-control.is-valid,
[data-bs-theme="dark"] .was-validated .form-control:valid {
  border-color: rgba(47, 207, 144, .8) !important;
  color: #eafff4 !important;
  box-shadow: none !important;
}

/* Buttons – gradient & glow */
.btn-primary {
  background: linear-gradient(145deg, #00baff, #0077cc);
  color: #fff;
  border: none;
  box-shadow: 0 0 10px rgba(0, 186, 255, .4)
}

.btn-primary:hover {
  transform: scale(1.03);
  box-shadow: 0 0 15px rgba(0, 186, 255, .6)
}

.btn-success {
  background: linear-gradient(145deg, #2fcf90, #25a372);
  color: #fff;
  border: none;
  box-shadow: 0 0 10px rgba(47, 207, 144, .4)
}

.btn-success:hover {
  transform: scale(1.03);
  box-shadow: 0 0 15px rgba(47, 207, 144, .6)
}

.btn-warning {
  background: linear-gradient(145deg, #e5c84c, #b69f3c);
  color: #000;
  border: none;
  box-shadow: 0 0 10px rgba(229, 200, 76, .4)
}

.btn-warning:hover {
  transform: scale(1.03);
  box-shadow: 0 0 15px rgba(229, 200, 76, .6)
}

.btn-danger {
  background: linear-gradient(145deg, #f24747, #c13939);
  color: #fff;
  border: none;
  box-shadow: 0 0 10px rgba(242, 71, 71, .4)
}

.btn-danger:hover {
  transform: scale(1.03);
  box-shadow: 0 0 15px rgba(242, 71, 71, .6)
}

.btn-info {
  background: linear-gradient(145deg, #17a2b8, #117a8b);
  color: #fff;
  border: none;
  box-shadow: 0 0 10px rgba(23, 162, 184, .4)
}

.btn-info:hover {
  transform: scale(1.03);
  box-shadow: 0 0 15px rgba(23, 162, 184, .6)
}

.btn-secondary {
  background: linear-gradient(145deg, #937bff, #7662cc);
  color: #fff;
  border: none;
  box-shadow: 0 0 10px rgba(153, 123, 191, .4)
}

.btn-secondary:hover {
  transform: scale(1.03);
  box-shadow: 0 0 15px rgba(153, 123, 191, .6)
}

.btn-outline-warning {
  color: #ffc107;
  border-color: #ffc107;
  background: rgba(255, 193, 7, .05);
  box-shadow: 0 0 10px rgba(255, 193, 7, .25);
  transition: all .2s ease-in-out
}

.btn-outline-warning:hover {
  background: #ffc107;
  color: #000;
  transform: scale(1.03);
  box-shadow: 0 0 15px rgba(255, 193, 7, .4)
}

/* Action buttons layout (used across tables) */
.action-buttons {
  display: flex;
  gap: .5rem;
  flex-wrap: nowrap;
  justify-content: flex-end;
  align-items: center
}

.action-buttons .btn {
  min-width: 120px;
  text-align: center;
  white-space: nowrap;
  padding: .25rem .75rem;
  border-radius: 999px;
  font-size: .875rem;
  line-height: 1.2
}

/* ---------- Enhanced Table Styling ---------- */
.table {
  border-radius: 12px;
  overflow: hidden;
  box-shadow: none !important;
  /* no inner shadow; glow lives on card */
  border: none;
  background: var(--bs-body-bg);
}

.table thead th {
  background: transparent;
  color: var(--bs-body-color);
  border: none;
  font-weight: 600;
  text-transform: uppercase;
  font-size: 0.85rem;
  letter-spacing: 0.5px;
  padding: 1.2rem 1rem;
  position: relative;
  text-align: left;
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}

.table thead th::after {
  display: none;
}

.table thead th i {
  margin-right: 0.5rem;
  font-size: 0.9rem;
}

.table tbody tr {
  border: none;
  background: var(--bs-body-bg);
  transition: background-color 0.15s ease, transform 0.1s ease;
}

/* Ensure ID and name columns always have blue text */
.table tbody td:first-child,
.table tbody td:nth-child(2),
.table tbody td.fw-semibold.text-primary {
  font-weight: 600 !important;
  color: var(--bs-primary) !important;
}

/* Zebra striping (light mode) */
.table tbody tr:nth-child(even) {
  background-color: rgba(0, 0, 0, 0.02);
}

.table tbody tr:nth-child(odd) {
  background-color: var(--bs-body-bg);
}

.table-striped>tbody>tr:nth-of-type(odd) {
  background-color: rgba(var(--bs-primary-rgb), 0.02);
}

.table-striped>tbody>tr:nth-of-type(even) {
  background-color: var(--bs-body-bg);
}

/* Simple hover effects - slight scale for rows */
.table tbody tr:hover {
  background-color: rgba(0, 123, 255, 0.05) !important;
  cursor: pointer;
  transform: scale(1.01);
}

.table tbody tr:hover .actions-col .btn {
  opacity: 1;
}

.table tbody td {
  padding: 1rem 0.75rem;
  vertical-align: middle;
  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}

/* Action column styling */
.actions-col {
  text-align: center;
  width: 80px;
  min-width: 80px;
  max-width: 80px;
}

.actions-col .btn {
  opacity: 0.7;
  transition: all 0.2s ease;
  padding: 0.25rem 0.5rem;
  font-size: 0.875rem;
}

/* Center ID (first) and Actions (last) columns */
table.dataTable thead th:first-child,
table.dataTable tbody td:first-child {
  text-align: center !important;
}

table.dataTable thead th:last-child,
table.dataTable tbody td:last-child {
  text-align: center !important;
}

/* Ensure actions button centers within the cell */
td.actions-col,
th.actions-col {
  text-align: center !important;
}

.actions-col .btn {
  margin: 0 auto;
  display: inline-flex;
  justify-content: center;
}

/* Table responsive enhancements */
.table-responsive {
  border-radius: 12px;
  box-shadow: none !important;
  /* prevent inner container shadow */
}

/* ---------- Dark Mode Table Enhancements ---------- */
[data-bs-theme="dark"] .table {
  background-color: #08151d !important;
  box-shadow: none !important;
  /* no inner shadow in dark mode */
}

[data-bs-theme="dark"] .table thead th {
  background: transparent !important;
  color: #ffffff !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

/* Dark mode - force ID and name text to remain blue */
[data-bs-theme="dark"] .table tbody td:first-child,
[data-bs-theme="dark"] .table tbody td:nth-child(2),
[data-bs-theme="dark"] .table tbody td.fw-semibold.text-primary {
  color: #00ccff !important;
}

/* NUCLEAR DATATABLES OVERRIDE - Use box-shadow like DataTables does */
[data-bs-theme="dark"] table.dataTable.table-striped>tbody>tr.odd>*,
[data-bs-theme="dark"] table.dataTable.table-striped>tbody>tr:nth-child(odd)>*,
[data-bs-theme="dark"] .table-striped>tbody>tr:nth-child(odd)>*,
[data-bs-theme="dark"] .table tbody tr:nth-child(odd)>* {
  box-shadow: inset 0 0 0 9999px #101c26 !important;
}

[data-bs-theme="dark"] table.dataTable.table-striped>tbody>tr.even>*,
[data-bs-theme="dark"] table.dataTable.table-striped>tbody>tr:nth-child(even)>*,
[data-bs-theme="dark"] .table-striped>tbody>tr:nth-child(even)>*,
[data-bs-theme="dark"] .table tbody tr:nth-child(even)>* {
  box-shadow: inset 0 0 0 9999px #172635 !important;
}

/* Remove column border on hover in dark mode */
[data-bs-theme="dark"] .table tbody tr:hover td,
[data-bs-theme="dark"] .table-striped>tbody>tr:hover>td,
[data-bs-theme="dark"] table.dataTable.table-striped>tbody>tr:hover>td {
  border-color: transparent !important;
}

[data-bs-theme="dark"] .table tbody tr:hover {
  background-color: rgba(13, 110, 253, 0.15) !important;
  transform: scale(1.01);
}

[data-bs-theme="dark"] .table tbody td {
  border-color: rgba(255, 255, 255, 0.1);
  color: #ffffff !important;
}

/* ---------- DataTables Dark Mode ---------- */
[data-bs-theme="dark"] .dataTables_wrapper .dataTables_length label,
[data-bs-theme="dark"] .dataTables_wrapper .dataTables_filter label {
  color: var(--bs-body-color) !important;
}

[data-bs-theme="dark"] .dataTables_wrapper .dataTables_length select,
[data-bs-theme="dark"] .dataTables_wrapper .dataTables_filter input {
  background-color: var(--bs-body-bg);
  border-color: var(--bs-border-color);
  color: var(--bs-body-color) !important;
}

[data-bs-theme="dark"] .dataTables_wrapper .dataTables_info,
[data-bs-theme="dark"] .dataTables_wrapper .dataTables_paginate .paginate_button {
  color: var(--bs-body-color) !important;
}

[data-bs-theme="dark"] .dataTables_wrapper .dataTables_paginate .paginate_button:hover {
  background: var(--bs-secondary-bg);
  border-color: var(--bs-border-color);
  color: var(--bs-body-color) !important;
}

[data-bs-theme="dark"] .dataTables_wrapper .dataTables_paginate .paginate_button.current {
  background: var(--bs-primary);
  border-color: var(--bs-primary);
  color: #fff;
}

.dataTables_length select {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  padding: 0.5rem 0.75rem;
  border-radius: 0.375rem;
  border: 1px solid var(--bs-border-color);
  background-color: var(--bs-body-bg);
  color: var(--bs-body-color);
  min-height: 2.25rem;
  font-size: 0.875rem;
  padding-right: 2.5rem;
  /* Increase space for arrow */
  /* Adjust arrow position and dropdown rectangle size for DataTables length select */
  background-position: right 1rem center;
  /* Move arrow slightly to the right */
  min-width: 5rem;
  /* Resize rectangle width */
}

/* Ensure consistent styling in dark mode */
[data-bs-theme="dark"] .dataTables_length select {
  background-color: #08151d !important;
  border-color: rgba(255, 255, 255, 0.12) !important;
  color: #e7eef7 !important;
  background-position: right 1rem center !important;
  /* Match arrow position */
}

.dataTables_wrapper .dataTables_length,
.dataTables_wrapper .dataTables_filter,
.dataTables_wrapper .dataTables_info,
.dataTables_wrapper .dataTables_paginate {
  margin: 0.75rem;
}

/* Light-mode DataTables controls for parity */
[data-bs-theme="light"] .dataTables_wrapper .dataTables_length select,
[data-bs-theme="light"] .dataTables_wrapper .dataTables_filter input {
  background-color: #fff !important;
  color: #0e2433 !important;
  border-color: rgba(0, 0, 0, 0.15) !important;
}

/* Remove DataTables' default bottom border */
table.dataTable.no-footer {
  border-bottom: none !important;
}

/* Table loading animation */
.table-loading {
  position: relative;
  overflow: hidden;
}

.table-loading::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(0, 123, 255, 0.1), transparent);
  animation: table-shimmer 1.5s infinite;
}

@keyframes table-shimmer {
  0% {
    left: -100%;
  }

  100% {
    left: 100%;
  }
}

/* Unify table colors via Bootstrap CSS variables */
[data-bs-theme="dark"] .table {
  --bs-table-bg: transparent;
  --bs-table-striped-bg: rgba(255, 255, 255, .03);
  --bs-table-hover-bg: rgba(255, 255, 255, .06);
  --bs-table-border-color: rgba(255, 255, 255, .08);
}

[data-bs-theme="light"] .table {
  --bs-table-bg: transparent;
  --bs-table-striped-bg: rgba(0, 0, 0, .02);
  --bs-table-hover-bg: rgba(13, 110, 253, .06);
  --bs-table-border-color: rgba(0, 0, 0, .08);
}

/* Remove heavy row separators in both themes */
.table>tbody>tr>* {
  border-bottom: 0 !important;
}

.table>tbody>tr+tr {
  border-top-width: 0 !important;
}

/* Uniform badge glow for common statuses (works with Bootstrap bg-* classes) */
[data-bs-theme="dark"] .badge.bg-success {
  box-shadow: 0 0 8px rgba(47, 207, 144, .3)
}

[data-bs-theme="dark"] .badge.bg-info {
  color: #0c2a35;
  background: linear-gradient(145deg, #4c9aff, #1e90ff);
  box-shadow: 0 0 8px rgba(76, 154, 255, .35)
}

[data-bs-theme="dark"] .badge.bg-warning {
  color: #000;
  box-shadow: 0 0 8px rgba(229, 200, 76, .35)
}

[data-bs-theme="dark"] .badge.bg-danger {
  box-shadow: 0 0 8px rgba(242, 71, 71, .35)
}

[data-bs-theme="dark"] .badge.bg-secondary {
  background: rgba(148, 163, 184, .20);
  /* neutral slate gray */
  color: #e2e8f0;
  border: 1px solid rgba(148, 163, 184, .45);
  box-shadow: 0 0 6px rgba(148, 163, 184, .15);
}

/* Gray/Light badge improvements for dark mode */
[data-bs-theme="dark"] .badge.bg-light {
  background: rgba(255, 255, 255, .15);
  color: #e8f4f8;
  border: 1px solid rgba(255, 255, 255, .25);
  box-shadow: 0 0 8px rgba(255, 255, 255, .1)
}

[data-bs-theme="dark"] .badge.text-muted {
  background: rgba(156, 163, 175, .2);
  color: #d1d9e0;
  border: 1px solid rgba(156, 163, 175, .4);
  box-shadow: 0 0 6px rgba(156, 163, 175, .15)
}

[data-bs-theme="dark"] .badge:not([class*="bg-"]):not([class*="text-"]) {
  background: rgba(255, 255, 255, .12);
  color: #e8f4f8;
  border: 1px solid rgba(255, 255, 255, .2);
  box-shadow: 0 0 6px rgba(255, 255, 255, .08)
}

/* ---------- Pagination (generic) ---------- */
.pagination .page-link {
  background: rgba(0, 0, 0, 0.02);
  color: var(--bs-primary);
  border: none;
  margin: 0 2px;
  border-radius: .375rem;
  transition: background .2s, color .2s
}

.pagination .page-link:hover {
  background: var(--bs-primary);
  color: #000
}

.pagination .page-item.active .page-link {
  background: var(--bs-primary);
  color: #000;
  border: none
}

.pagination {
  margin-top: 1.25rem;
  margin-bottom: 1.25rem
}

[data-bs-theme="dark"] .pagination .page-link {
  background: rgba(255, 255, 255, .08);
  color: #00cfff
}

/* ---------- Flatpickr (override material_blue when dark) ---------- */
[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: 2000 !important
}

/* Flatpickr – Light mode brand-matched to dark */
[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="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);
  }
}

/* Faster modal transitions - reduce lag and lingering on darker backgrounds */
.modal.fade {
  transition: opacity 0.2s linear !important;
}

.modal.fade .modal-dialog {
  transition: transform 0.2s ease-out !important;
}

.modal-backdrop.fade {
  transition: opacity 0.2s linear !important;
}

.modal-backdrop.show {
  opacity: 0.4 !important;
  /* Lighter backdrop - less lingering darker color */
}

/* ─── 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;
}

/* ─── 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: 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);
}


.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;
}

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

.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;
}


/* --- 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: #181c1f !important;
  color: #fff !important;
  border-color: #2c3035 !important;
}

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;
}