/* Global typography */
:root {
  --bs-font-sans-serif: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
  --bs-body-font-family: var(--bs-font-sans-serif);
}

body,
button,
input,
select,
textarea {
  font-family: var(--bs-body-font-family);
  background-color: #dedede;
}

body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

/* ── Dark mode CSS variable overrides ─────────────────────────────────────
   CRITICAL FIX: Sneat's core.css defines --bs-paper-bg:#fff in :root but
   never overrides it for dark mode. Every .card, .modal-content, .accordion,
   .dropdown-menu, and .nav-tabs-active references var(--bs-paper-bg) (directly
   or via --bs-card-bg / --bs-modal-bg). Without this block they all stay white.
── */
[data-bs-theme="dark"] {
  --bs-paper-bg:                 #22303e;
  --bs-paper-bg-rgb:             34, 48, 62;
  --bs-body-bg:                  #18212b;
  --bs-body-bg-rgb:              24, 33, 43;
  --bs-body-color:               rgba(255, 255, 255, 0.88);
  --bs-heading-color:            rgba(255, 255, 255, 0.92);
  --bs-border-color:             rgba(255, 255, 255, 0.12);
  --bs-border-color-translucent: rgba(255, 255, 255, 0.08);
  --bs-secondary-color:          rgba(255, 255, 255, 0.55);
}

[data-bs-theme="dark"] body {
  background-color: #18212b;
}

.table thead th {
  font-weight: 700;
}

/* Wizard Steps */
.wizard-steps {
  gap: 10px;
}

.step {
  text-align: center;
  flex: 1;
  position: relative;
}

.step-icon {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: #e7e7ff;
  color: #696cff;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto;
  font-size: 20px;
  transition: all 0.3s ease;
}

.step-label {
  font-size: 0.85rem;
  margin-top: 6px;
  color: #697a8d;
}

/* Active Step */
.step.active .step-icon {
  background: #696cff;
  color: #fff;
  box-shadow: 0 0 0 6px rgba(105,108,255,0.15);
}

.step.active .step-label {
  font-weight: 600;
  color: #566a7f;
}

/* Completed Step */
.step.completed .step-icon {
  background: #28c76f;
  color: #fff;
}

.step.completed .step-icon::after {
  content: "✔";
  font-size: 14px;
}

/* Line Between Steps */
.step-line {
  height: 2px;
  background: #e7e7ff;
  flex: 1;
  margin-top: 20px;
}

.questionnaire-accordion {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.questionnaire-accordion-item {
  border: 1px solid rgba(67, 89, 113, 0.12);
  border-radius: 1rem;
  overflow: hidden;
  background-color: var(--bs-paper-bg);
}

.questionnaire-accordion-button {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1rem 1.25rem;
  background-color: transparent;
}

.questionnaire-accordion-button:not(.collapsed) {
  box-shadow: none;
}

.questionnaire-accordion-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3rem;
  height: 3rem;
  border-radius: 0.9rem;
  background: #e7e7ff;
  color: #696cff;
  font-size: 1.4rem;
  flex-shrink: 0;
}

.questionnaire-accordion-copy {
  display: flex;
  flex-direction: column;
  min-width: 0;
  flex: 1 1 auto;
}

.questionnaire-accordion-count {
  margin-left: auto;
  margin-right: 1rem;
  flex-shrink: 0;
}

.questionnaire-accordion-progress {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  width: min(220px, 28vw);
  margin-left: auto;
  margin-right: 1rem;
  flex-shrink: 0;
}

.questionnaire-accordion-progress-bar {
  position: relative;
  display: block;
  width: 100%;
  height: 0.5rem;
  border-radius: 999px;
  overflow: hidden;
  background-color: rgba(105, 122, 141, 0.16);
}

.questionnaire-accordion-progress-fill {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #696cff 0%, #03c3ec 100%);
  transition: width 0.2s ease;
}

.questionnaire-accordion-progress-text {
  min-width: 2.75rem;
  font-size: 0.85rem;
  font-weight: 600;
  color: #566a7f;
  text-align: right;
}

.questionnaire-accordion-title {
  font-size: 1rem;
  font-weight: 600;
  color: #566a7f;
}

.questionnaire-accordion-meta {
  font-size: 0.85rem;
  color: #697a8d;
}

.questionnaire-accordion-body {
  padding: 1.25rem;
}

.questionnaire-question-card {
  background-color: transparent;
}

.stat-card {
  display: flex;
  align-items: center;
  gap: 1rem;
  height: 100%;
  padding: 1.25rem;
  background: #fff;
  border: 1px solid rgba(67, 89, 113, 0.12);
  border-radius: 1rem;
  box-shadow: 0 0.25rem 1rem rgba(67, 89, 113, 0.08);
}

.stat-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 4.5rem;
  height: 4.5rem;
  border-radius: 1rem;
  flex-shrink: 0;
}

.stat-icon-target {
  background-color: #e9f7ef;
  color: #2e7d32;
}

.stat-icon-surveyed {
  background-color: #eef8ed;
  color: #2e7d32;
}

.stat-icon-revisited {
  background-color: #fff4e5;
  color: #ef6c00;
}

.stat-icon-pending {
  background-color: #fdecea;
  color: #c62828;
}

.stat-icon-text {
  font-size: 2.4rem;
  line-height: 1;
}

.stat-content {
  min-width: 0;
}

.stat-label {
  margin: 0 0 0.35rem;
  color: #566a7f;
  font-size: 0.95rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  white-space: normal;
  overflow-wrap: break-word;
}

.nowrap-word {
  white-space: nowrap;
}

.stat-value {
  margin: 0;
  color: #1f2b3d;
  font-size: 2rem;
  font-weight: 700;
  line-height: 1.1;
}

.division-summary-card,
.division-summary-table-wrap {
  background-color: #ffffff;
}

.division-summary-table {
  --bs-table-bg: #ffffff;
  --bs-table-color: #1f2b3d;
  --bs-table-border-color: rgba(67, 89, 113, 0.12);
  --bs-table-striped-bg: #f7f9fc;
  --bs-table-hover-bg: #eef3f8;
  border: 1px solid rgba(67, 89, 113, 0.12);
}

.division-summary-table thead th {
  background-color: #f7f9fc;
  color: #566a7f;
  border: 1px solid rgba(67, 89, 113, 0.12);
  padding-top: 0.1875rem;
  padding-bottom: 0.1875rem;
  line-height: 1.1;
}

.division-summary-table tbody td {
  border-color: rgba(67, 89, 113, 0.12);
}

.division-summary-table .division-summary-name {
  font-weight: 700;
}

.division-summary-table .division-summary-highlight {
  background-color: #e9f7ef !important;
  color: #2e5d34;
}

.division-summary-table .division-summary-total {
  background-color: #f8f9fa;
  font-weight: 600;
}

.division-summary-table .division-summary-grand-total {
  background-color: #e8eaf6;
  font-weight: 700;
  border-top: 2px solid #696cff;
}

[data-bs-theme="dark"] .division-summary-table .division-summary-total {
  background-color: rgba(255, 255, 255, 0.04);
}

[data-bs-theme="dark"] .division-summary-table .division-summary-grand-total {
  background-color: rgba(105, 108, 255, 0.18);
  border-top-color: #696cff;
}

.dashboard-total-row {
  background-color: #f8f9fa;
  font-weight: 700;
  border-top: 2px solid rgba(67, 89, 113, 0.15);
}

[data-bs-theme="dark"] .dashboard-total-row {
  background-color: rgba(255, 255, 255, 0.04);
  border-top-color: rgba(255, 255, 255, 0.08);
}

.division-summary-table th,
.division-summary-table td {
  padding-top: 0.375rem;
  padding-bottom: 0.375rem;
}

.division-summary-table tfoot th,
.division-summary-table tfoot td {
  background-color: #f7f9fc;
  border: 1px solid rgba(67, 89, 113, 0.12);
  color: #1f2b3d;
  font-weight: 700;
}

.division-summary-table .division-summary-merged-heading {
  white-space: normal;
  text-wrap: wrap;
  min-width: 9rem;
  line-height: 1.1;
}

.division-summary-table .division-summary-wrap-heading {
  white-space: normal;
  text-wrap: wrap;
  min-width: 7.5rem;
  line-height: 1.1;
}

.latest-inspections-card,
.latest-inspections-table-wrap {
  background-color: #ffffff;
}

.inspection-row-trigger {
  cursor: pointer;
}

.inspection-row-trigger:focus-visible,
.inspection-search-result-row:focus-visible {
  outline: 2px solid var(--bs-primary);
  outline-offset: -2px;
}

#latestInspectionModal .modal-content,
#inspectionImagePreviewModal .modal-content,
#inspectionSearchResultsModal .modal-content {
  background-color: var(--bs-body-bg);
  color: var(--bs-body-color);
  border: 1px solid var(--bs-border-color);
}

#latestInspectionModal .modal-content {
  box-shadow: 0 1rem 3rem rgba(0, 0, 0, 0.3);
}

#latestInspectionModal .modal-header {
  border-bottom: 1px solid var(--bs-border-color);
}

#latestInspectionModal .text-muted {
  color: var(--bs-secondary-color) !important;
}

#latestInspectionModal .modal-body,
#inspectionSearchResultsModal .modal-body {
  max-height: 75vh;
  overflow-y: auto;
}

#latestInspectionModal .inspection-detail-card {
  border: 1px solid var(--bs-border-color);
  border-radius: 1rem;
  background: color-mix(in srgb, var(--bs-body-bg) 92%, var(--bs-primary-bg-subtle) 8%);
}

#latestInspectionModal .inspection-detail-item {
  min-height: 100%;
  padding: 0.85rem 1rem;
  border: 1px solid var(--bs-border-color-translucent);
  border-radius: 0.85rem;
  background-color: color-mix(in srgb, var(--bs-body-bg) 96%, var(--bs-tertiary-bg) 4%);
  overflow: hidden;
}

#latestInspectionModal .inspection-detail-item .fw-semibold {
  overflow-wrap: anywhere;
  word-break: break-word;
}

#latestInspectionModal .inspection-question-card {
  height: 100%;
  padding: 1rem;
  border: 1px solid var(--bs-border-color-translucent);
  border-radius: 1rem;
  background-color: color-mix(in srgb, var(--bs-body-bg) 96%, var(--bs-secondary-bg) 4%);
}

#latestInspectionModal .inspection-file-link {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}

#inspectionImagePreviewModal img {
  width: 100%;
  height: auto;
  max-height: 75vh;
  object-fit: contain;
  border-radius: 0.75rem;
}

#latestInspectionModal .inspection-loading-state,
#latestInspectionModal .inspection-empty-state {
  padding: 2rem;
  text-align: center;
  color: var(--bs-secondary-color);
}

.latest-inspections-toolbar {
  width: 100%;
  max-width: 26rem;
  position: relative;
}

.latest-inspections-search-input {
  padding-right: 2.75rem;
}

.latest-inspections-search-icon {
  position: absolute;
  top: 50%;
  right: 0.95rem;
  transform: translateY(-50%);
  color: var(--bs-secondary-color);
  pointer-events: none;
}

.latest-inspections-search-results {
  position: absolute;
  top: calc(100% + 0.5rem);
  left: 0;
  right: 0;
  z-index: 20;
  display: none;
  padding: 0.5rem;
  border: 1px solid var(--bs-border-color);
  border-radius: 0.85rem;
  background-color: var(--bs-body-bg);
  box-shadow: 0 1rem 2rem rgba(0, 0, 0, 0.12);
}

.latest-inspections-search-results.is-visible {
  display: block;
}

.latest-inspections-search-status {
  padding: 0.75rem;
  color: var(--bs-secondary-color);
  font-size: 0.875rem;
  text-align: center;
}

.latest-inspections-search-result {
  display: block;
  width: 100%;
  padding: 0.75rem 0.85rem;
  border: 0;
  border-radius: 0.75rem;
  background: transparent;
  color: inherit;
  text-align: left;
}

.latest-inspections-search-result:hover,
.latest-inspections-search-result:focus-visible {
  background-color: var(--bs-tertiary-bg);
  outline: 0;
}

.latest-inspections-search-result + .latest-inspections-search-result {
  margin-top: 0.25rem;
}

.latest-inspections-search-name {
  font-weight: 600;
}

.latest-inspections-search-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.75rem;
  margin-top: 0.3rem;
}

.latest-inspections-search-taluka {
  color: var(--bs-secondary-color);
  font-size: 0.875rem;
}

.inspection-search-results-summary {
  margin-bottom: 1rem;
  color: var(--bs-secondary-color);
  font-size: 0.9rem;
}

.inspection-search-results-table th,
.inspection-search-results-table td {
  vertical-align: middle;
}

.inspection-search-result-row {
  cursor: pointer;
}

.inspection-search-pagination {
  display: flex;
  justify-content: flex-end;
  margin-top: 1rem;
}

.inspection-search-pagination .pagination {
  margin-bottom: 0;
}

@media (max-width: 767.98px) {
  .latest-inspections-toolbar {
    max-width: none;
  }
}

.latest-inspections-table {
  --bs-table-bg: #ffffff;
  --bs-table-color: #1f2b3d;
  --bs-table-border-color: rgba(67, 89, 113, 0.12);
  --bs-table-striped-bg: #f7f9fc;
  --bs-table-hover-bg: #eef3f8;
  border: 1px solid rgba(67, 89, 113, 0.12);
}

.latest-inspections-table thead th {
  background-color: #f7f9fc;
  color: #566a7f;
  border-bottom: 1px solid rgba(67, 89, 113, 0.12);
}

.latest-inspections-table tbody td {
  border-color: rgba(67, 89, 113, 0.12);
}

.latest-inspections-card .card-header,
.latest-inspections-card .card-footer {
  background-color: #ffffff;
}

[data-bs-theme="dark"] .stat-card {
  background: #22303e;
  border-color: rgba(255, 255, 255, 0.08);
  box-shadow: 0 0.45rem 1.4rem rgba(0, 0, 0, 0.25);
}

[data-bs-theme="dark"] .stat-label {
  color: rgba(255, 255, 255, 0.72);
}

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

[data-bs-theme="dark"] .stat-icon-target {
  background-color: rgba(46, 125, 50, 0.18);
  color: #7ee787;
}

[data-bs-theme="dark"] .stat-icon-surveyed {
  background-color: rgba(46, 125, 50, 0.18);
  color: #7ee787;
}

[data-bs-theme="dark"] .stat-icon-revisited {
  background-color: rgba(239, 108, 0, 0.18);
  color: #ffb86b;
}

[data-bs-theme="dark"] .stat-icon-pending {
  background-color: rgba(198, 40, 40, 0.18);
  color: #ff8a80;
}

[data-bs-theme="dark"] .division-summary-card,
[data-bs-theme="dark"] .division-summary-card .card-header,
[data-bs-theme="dark"] .division-summary-card .card-body,
[data-bs-theme="dark"] .division-summary-table-wrap {
  background-color: #22303e !important;
  color: rgba(255, 255, 255, 0.9);
}

[data-bs-theme="dark"] .division-summary-table {
  --bs-table-bg: #22303e;
  --bs-table-color: rgba(255, 255, 255, 0.9);
  --bs-table-border-color: rgba(255, 255, 255, 0.08);
  --bs-table-striped-bg: #263646;
  --bs-table-hover-bg: #2d4052;
  border: 1px solid rgba(255, 255, 255, 0.08);
}

[data-bs-theme="dark"] .division-summary-table thead th {
  background-color: #233140;
  color: rgba(255, 255, 255, 0.85);
  border: 1px solid rgba(255, 255, 255, 0.08);
}

[data-bs-theme="dark"] .division-summary-table tbody td {
  border-color: rgba(255, 255, 255, 0.08);
}

[data-bs-theme="dark"] .division-summary-table tfoot th,
[data-bs-theme="dark"] .division-summary-table tfoot td {
  background-color: #233140;
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.9);
}

[data-bs-theme="dark"] .division-summary-table .division-summary-highlight {
  background-color: rgba(126, 231, 135, 0.18) !important;
  color: #b8f5c0;
}

[data-bs-theme="dark"] .latest-inspections-card,
[data-bs-theme="dark"] .latest-inspections-card .card-header,
[data-bs-theme="dark"] .latest-inspections-card .card-footer,
[data-bs-theme="dark"] .latest-inspections-table-wrap {
  background-color: #22303e !important;
  color: rgba(255, 255, 255, 0.9);
}

[data-bs-theme="dark"] .latest-inspections-table {
  --bs-table-bg: #22303e;
  --bs-table-color: rgba(255, 255, 255, 0.9);
  --bs-table-border-color: rgba(255, 255, 255, 0.08);
  --bs-table-striped-bg: #263646;
  --bs-table-hover-bg: #2d4052;
  border: 1px solid rgba(255, 255, 255, 0.08);
}

[data-bs-theme="dark"] .latest-inspections-table thead th {
  background-color: #233140;
  color: rgba(255, 255, 255, 0.85);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

[data-bs-theme="dark"] .latest-inspections-table tbody td {
  border-color: rgba(255, 255, 255, 0.08);
}

[data-bs-theme="dark"] .latest-inspections-card .text-muted,
[data-bs-theme="dark"] .latest-inspections-card .pagination {
  color: rgba(255, 255, 255, 0.72) !important;
}

[data-bs-theme="dark"] .questionnaire-accordion-item {
  background-color: #22303e;
  border-color: rgba(255, 255, 255, 0.08);
}

[data-bs-theme="dark"] .questionnaire-accordion .accordion-button,
[data-bs-theme="dark"] .questionnaire-accordion-button {
  background-color: #22303e;
  color: rgba(255, 255, 255, 0.9);
}

[data-bs-theme="dark"] .questionnaire-accordion .accordion-button.collapsed,
[data-bs-theme="dark"] .questionnaire-accordion-button.collapsed {
  background-color: #22303e;
  color: rgba(255, 255, 255, 0.9);
}

[data-bs-theme="dark"] .questionnaire-accordion .accordion-button:not(.collapsed),
[data-bs-theme="dark"] .questionnaire-accordion-button:not(.collapsed) {
  background-color: #22303e;
  color: #ffffff;
}

[data-bs-theme="dark"] .questionnaire-accordion .accordion-button::after,
[data-bs-theme="dark"] .questionnaire-accordion-button::after {
  filter: brightness(0) invert(1);
}

[data-bs-theme="dark"] .questionnaire-accordion-icon {
  background: rgba(105, 108, 255, 0.18);
  color: #b8bcff;
}

[data-bs-theme="dark"] .questionnaire-accordion-title {
  color: rgba(255, 255, 255, 0.9);
}

[data-bs-theme="dark"] .questionnaire-accordion-meta {
  color: rgba(255, 255, 255, 0.65);
}

[data-bs-theme="dark"] .questionnaire-accordion-progress-bar {
  background-color: rgba(255, 255, 255, 0.14);
}

[data-bs-theme="dark"] .questionnaire-accordion-progress-text {
  color: rgba(255, 255, 255, 0.78);
}

[data-bs-theme="dark"] .questionnaire-accordion-body {
  background-color: var(--bs-paper-bg);
}

[data-bs-theme="dark"] .questionnaire-accordion .accordion-collapse,
[data-bs-theme="dark"] .questionnaire-accordion .accordion-body {
  background-color: var(--bs-paper-bg);
  color: rgba(255, 255, 255, 0.88);
}

@media (max-width: 991.98px) {
  .questionnaire-accordion-button {
    align-items: flex-start;
    flex-wrap: wrap;
  }

  .questionnaire-accordion-button .badge {
    margin-left: 4rem !important;
    margin-right: 0 !important;
  }

  .questionnaire-accordion-progress {
    width: calc(100% - 4rem);
    margin-left: 4rem;
    margin-right: 0;
    order: 3;
  }

  .questionnaire-accordion-count {
    margin-left: 4rem;
    margin-right: 0;
    order: 4;
  }
}

/* Shared layout theme styles */
.theme-surface {
  background-color: var(--bs-paper-bg) !important;
}

[data-bs-theme="dark"] .theme-header {
  background-color: #22303e !important;
  color: rgba(255, 255, 255, 0.9);
}

[data-bs-theme="dark"] .theme-header .text-body,
[data-bs-theme="dark"] .theme-header .card-title {
  color: rgba(255, 255, 255, 0.92) !important;
}

.theme-navbar {
  margin-top: 0;
}


[data-bs-theme="dark"] body,
[data-bs-theme="dark"] .layout-wrapper,
[data-bs-theme="dark"] .layout-container,
[data-bs-theme="dark"] .layout-page,
[data-bs-theme="dark"] .content-wrapper,
[data-bs-theme="dark"] .container-p-y {
  background-color: #18212b;
  color: var(--bs-body-color);
}

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

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

[data-bs-theme="dark"] .shadow-sm,
[data-bs-theme="dark"] .shadow,
[data-bs-theme="dark"] .shadow-none {
  box-shadow: 0 0.4rem 1.25rem rgba(0, 0, 0, 0.22) !important;
}

[data-bs-theme="dark"] .content-backdrop {
  background-color: rgba(11, 17, 23, 0.55);
}

[data-bs-theme="dark"] .theme-navbar {
  background-color: #22303e;
  border-color: rgba(255, 255, 255, 0.12) !important;
}

[data-bs-theme="dark"] .theme-navbar .navbar-collapse {
  background-color: #22303e;
}

[data-bs-theme="dark"] .theme-navbar .nav-link,
[data-bs-theme="dark"] .theme-navbar .navbar-toggler,
[data-bs-theme="dark"] .theme-navbar .navbar-toggler-icon {
  color: rgba(255, 255, 255, 0.92);
}

[data-bs-theme="dark"] .theme-navbar .nav-link:hover,
[data-bs-theme="dark"] .theme-navbar .nav-link:focus,
[data-bs-theme="dark"] .theme-navbar .nav-link.show {
  color: #ffffff;
}


[data-bs-theme="dark"] .theme-navbar .dropdown-menu {
  background-color: #2b3c4d;
  border-color: rgba(255, 255, 255, 0.1);
  box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.25);
}

[data-bs-theme="dark"] .theme-navbar .dropdown-item,
[data-bs-theme="dark"] .theme-navbar .dropdown-header {
  color: rgba(255, 255, 255, 0.88);
}

[data-bs-theme="dark"] .theme-navbar .dropdown-item:hover,
[data-bs-theme="dark"] .theme-navbar .dropdown-item:focus,
[data-bs-theme="dark"] .theme-navbar .dropdown-item.active {
  background-color: rgba(255, 255, 255, 0.08);
  color: #ffffff;
}

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

.theme-footer {
  padding-top: 0.175rem;
  padding-bottom: 0.175rem;
}

[data-bs-theme="dark"] .theme-footer {
  background-color: #22303e !important;
  color: rgba(255, 255, 255, 0.88);
}

[data-bs-theme="dark"] .theme-footer .text-body,
[data-bs-theme="dark"] .theme-footer .theme-toggle,
[data-bs-theme="dark"] .theme-footer .footer-link {
  color: rgba(255, 255, 255, 0.88) !important;
}

[data-bs-theme="dark"] .theme-footer .footer-link:hover,
[data-bs-theme="dark"] .theme-footer .footer-link:focus {
  color: #ffffff !important;
}

[data-bs-theme="dark"] .alert-success {
  background-color: rgba(40, 199, 111, 0.18);
  color: #9ae6b4;
}

[data-bs-theme="dark"] .alert-danger {
  background-color: rgba(234, 84, 85, 0.18);
  color: #ff9f9f;
}

[data-bs-theme="dark"] .card,
[data-bs-theme="dark"] .card-header,
[data-bs-theme="dark"] .card-body,
[data-bs-theme="dark"] .card-footer,
[data-bs-theme="dark"] .border.rounded,
[data-bs-theme="dark"] .border,
[data-bs-theme="dark"] .table-responsive,
[data-bs-theme="dark"] .list-group,
[data-bs-theme="dark"] .list-group-item,
[data-bs-theme="dark"] .modal-content,
[data-bs-theme="dark"] .offcanvas,
[data-bs-theme="dark"] .accordion-item,
[data-bs-theme="dark"] .accordion-button {
  background-color: var(--bs-paper-bg);
  border-color: rgba(255, 255, 255, 0.08) !important;
  color: var(--bs-body-color);
}

[data-bs-theme="dark"] .card {
  box-shadow: 0 0.4rem 1.25rem rgba(0, 0, 0, 0.22);
}

[data-bs-theme="dark"] .card-header,
[data-bs-theme="dark"] .card-footer {
  background-color: #233140;
}

[data-bs-theme="dark"] .questionnaire-accordion {
  --bs-accordion-bg: #22303e;
  --bs-accordion-border-color: rgba(255, 255, 255, 0.08);
  --bs-accordion-btn-bg: #22303e;
  --bs-accordion-btn-color: rgba(255, 255, 255, 0.9);
  --bs-accordion-active-bg: #22303e;
  --bs-accordion-active-color: #ffffff;
  --bs-accordion-color: rgba(255, 255, 255, 0.88);
}

[data-bs-theme="dark"] .questionnaire-accordion .accordion-item,
[data-bs-theme="dark"] .questionnaire-accordion .accordion-header,
[data-bs-theme="dark"] .questionnaire-accordion .accordion-button,
[data-bs-theme="dark"] .questionnaire-accordion .accordion-button.collapsed,
[data-bs-theme="dark"] .questionnaire-accordion .accordion-button:not(.collapsed),
[data-bs-theme="dark"] .questionnaire-accordion .accordion-collapse,
[data-bs-theme="dark"] .questionnaire-accordion .accordion-body {
  background-color: #22303e !important;
  color: rgba(255, 255, 255, 0.88) !important;
}

[data-bs-theme="dark"] .questionnaire-accordion .accordion-button::after {
  filter: brightness(0) invert(1);
}

[data-bs-theme="dark"] .card h1,
[data-bs-theme="dark"] .card h2,
[data-bs-theme="dark"] .card h3,
[data-bs-theme="dark"] .card h4,
[data-bs-theme="dark"] .card h5,
[data-bs-theme="dark"] .card h6,
[data-bs-theme="dark"] .list-group-item,
[data-bs-theme="dark"] .table,
[data-bs-theme="dark"] .table th,
[data-bs-theme="dark"] .table td {
  color: rgba(255, 255, 255, 0.9);
}

[data-bs-theme="dark"] .form-control,
[data-bs-theme="dark"] .form-select,
[data-bs-theme="dark"] .input-group-text {
  background-color: #2b3c4d;
  border-color: rgba(255, 255, 255, 0.12);
  color: rgba(255, 255, 255, 0.9);
}

[data-bs-theme="dark"] .form-control[type="file"]::file-selector-button {
  background-color: #22303e;
  color: rgba(255, 255, 255, 0.88);
  border-color: rgba(255, 255, 255, 0.12);
}

[data-bs-theme="dark"] .form-control[type="file"]:hover::file-selector-button {
  background-color: #314558;
}

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

[data-bs-theme="dark"] .form-control:focus,
[data-bs-theme="dark"] .form-select:focus {
  background-color: #314558;
  border-color: rgba(105, 108, 255, 0.65);
  color: #ffffff;
}

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

[data-bs-theme="dark"] .form-check-input:not(:checked) {
  background-color: #2b3c4d;
  border-color: rgba(255, 255, 255, 0.18);
}

[data-bs-theme="dark"] .form-check-input:checked,
[data-bs-theme="dark"] .form-check-input[type="radio"],
[data-bs-theme="dark"] .form-check-input[type="checkbox"] {
  border-color: rgba(255, 255, 255, 0.18);
}

[data-bs-theme="dark"] input:-webkit-autofill,
[data-bs-theme="dark"] input:-webkit-autofill:hover,
[data-bs-theme="dark"] input:-webkit-autofill:focus,
[data-bs-theme="dark"] textarea:-webkit-autofill,
[data-bs-theme="dark"] select:-webkit-autofill {
  -webkit-text-fill-color: rgba(255, 255, 255, 0.9);
  -webkit-box-shadow: 0 0 0 1000px #2b3c4d inset;
  transition: background-color 9999s ease-in-out 0s;
}

[data-bs-theme="dark"] .form-label,
[data-bs-theme="dark"] .col-form-label,
[data-bs-theme="dark"] .form-check-label,
[data-bs-theme="dark"] legend {
  color: rgba(255, 255, 255, 0.9);
}

[data-bs-theme="dark"] .form-control:disabled,
[data-bs-theme="dark"] .form-control[readonly],
[data-bs-theme="dark"] .form-select:disabled {
  background-color: #22303e;
  color: rgba(255, 255, 255, 0.7);
}

[data-bs-theme="dark"] .form-select option,
[data-bs-theme="dark"] datalist option {
  background-color: #22303e;
  color: rgba(255, 255, 255, 0.9);
}

[data-bs-theme="dark"] input[type="date"],
[data-bs-theme="dark"] input[type="datetime-local"],
[data-bs-theme="dark"] input[type="month"],
[data-bs-theme="dark"] input[type="time"] {
  color-scheme: dark;
}

[data-bs-theme="dark"] input[type="date"]::-webkit-calendar-picker-indicator,
[data-bs-theme="dark"] input[type="datetime-local"]::-webkit-calendar-picker-indicator,
[data-bs-theme="dark"] input[type="month"]::-webkit-calendar-picker-indicator,
[data-bs-theme="dark"] input[type="time"]::-webkit-calendar-picker-indicator {
  filter: invert(1) brightness(1.2);
}

[data-bs-theme="dark"] .table-responsive,
[data-bs-theme="dark"] .list-group,
[data-bs-theme="dark"] fieldset {
  background-color: transparent;
}

[data-bs-theme="dark"] .alert-success,
[data-bs-theme="dark"] .alert-danger {
  border-color: rgba(255, 255, 255, 0.08);
}

[data-bs-theme="dark"] .table {
  --bs-table-bg: transparent;
  --bs-table-color: rgba(255, 255, 255, 0.9);
  --bs-table-border-color: rgba(255, 255, 255, 0.08);
  --bs-table-striped-bg: rgba(255, 255, 255, 0.02);
  --bs-table-hover-bg: rgba(255, 255, 255, 0.04);
}

[data-bs-theme="dark"] .table-responsive {
  background-color: var(--bs-paper-bg);
}

[data-bs-theme="dark"] .table thead th {
  background-color: #233140;
  color: rgba(255, 255, 255, 0.85);
}

[data-bs-theme="dark"] .list-group-item {
  background-color: transparent;
  border-color: rgba(255, 255, 255, 0.08);
}

[data-bs-theme="dark"] .list-group-flush > .list-group-item {
  border-color: rgba(255, 255, 255, 0.08);
}

[data-bs-theme="dark"] .badge.bg-label-primary,
[data-bs-theme="dark"] .badge.bg-label-success,
[data-bs-theme="dark"] .badge.bg-label-warning,
[data-bs-theme="dark"] .badge.bg-label-info,
[data-bs-theme="dark"] .badge.bg-label-danger,
[data-bs-theme="dark"] .badge.bg-label-secondary {
  border: 1px solid rgba(255, 255, 255, 0.08);
}

[data-bs-theme="dark"] .badge.bg-label-primary {
  background-color: rgba(105, 108, 255, 0.18) !important;
  color: #b8bcff !important;
}

[data-bs-theme="dark"] .badge.bg-label-success {
  background-color: rgba(40, 199, 111, 0.18) !important;
  color: #9ae6b4 !important;
}

[data-bs-theme="dark"] .badge.bg-label-warning {
  background-color: rgba(255, 159, 67, 0.18) !important;
  color: #ffd08a !important;
}

[data-bs-theme="dark"] .badge.bg-label-info {
  background-color: rgba(3, 195, 236, 0.18) !important;
  color: #8fe9ff !important;
}

[data-bs-theme="dark"] .badge.bg-label-danger {
  background-color: rgba(234, 84, 85, 0.18) !important;
  color: #ff9f9f !important;
}

[data-bs-theme="dark"] .badge.bg-label-secondary,
[data-bs-theme="dark"] .badge.bg-label-dark {
  background-color: rgba(133, 146, 163, 0.18) !important;
  color: #d3dae3 !important;
}

[data-bs-theme="dark"] .btn-outline-secondary {
  color: rgba(255, 255, 255, 0.82);
  border-color: rgba(255, 255, 255, 0.18);
}

[data-bs-theme="dark"] .btn-outline-secondary:hover,
[data-bs-theme="dark"] .btn-outline-secondary:focus {
  background-color: rgba(255, 255, 255, 0.08);
  color: #ffffff;
  border-color: rgba(255, 255, 255, 0.22);
}

.theme-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--bs-body-color);
  white-space: nowrap;
}

.theme-toggle .form-check-input {
  cursor: pointer;
}

.footer-side {
  min-width: 120px;
}

.footer-spacer {
  width: 120px;
}

.header-logo {
  height: 90px;
  width: auto;
  object-fit: contain;
}

.inspection-location-map {
  min-height: 320px;
  border-radius: 0.75rem;
  overflow: hidden;
  border: 1px solid rgba(67, 89, 113, 0.12);
}

[data-bs-theme="dark"] .inspection-form .card,
[data-bs-theme="dark"] .inspection-form .card-header,
[data-bs-theme="dark"] .inspection-form .card-body,
[data-bs-theme="dark"] .inspection-form .border.rounded,
[data-bs-theme="dark"] .inspection-form fieldset,
[data-bs-theme="dark"] .inspection-form .form-check {
  background-color: #22303e !important;
  color: rgba(255, 255, 255, 0.9);
  border-color: rgba(255, 255, 255, 0.08) !important;
}

[data-bs-theme="dark"] .inspection-form .form-control,
[data-bs-theme="dark"] .inspection-form .form-select,
[data-bs-theme="dark"] .inspection-form textarea,
[data-bs-theme="dark"] .inspection-form input:not([type="radio"]):not([type="checkbox"]):not([type="submit"]):not([type="button"]) {
  background-color: #2b3c4d !important;
  color: rgba(255, 255, 255, 0.9) !important;
  border-color: rgba(255, 255, 255, 0.12) !important;
}

[data-bs-theme="dark"] .inspection-form .form-control[readonly],
[data-bs-theme="dark"] .inspection-form .form-control:disabled,
[data-bs-theme="dark"] .inspection-form .form-select:disabled {
  background-color: #22303e !important;
}

[data-bs-theme="dark"] .inspection-form .form-control:focus,
[data-bs-theme="dark"] .inspection-form .form-select:focus,
[data-bs-theme="dark"] .inspection-form textarea:focus {
  background-color: #314558 !important;
  color: #ffffff !important;
}

[data-bs-theme="dark"] .inspection-form .form-check-input {
  background-color: #2b3c4d;
  border-color: rgba(255, 255, 255, 0.18);
}

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

[data-bs-theme="dark"] .inspection-form .alert-success {
  background-color: rgba(40, 199, 111, 0.18);
  color: #9ae6b4;
}

[data-bs-theme="dark"] .inspection-form .alert-danger {
  background-color: rgba(234, 84, 85, 0.18);
  color: #ff9f9f;
}

[data-bs-theme="dark"] .inspection-location-map {
  border-color: rgba(255, 255, 255, 0.08);
}

[data-bs-theme="dark"] .leaflet-control-zoom a,
[data-bs-theme="dark"] .leaflet-bar a,
[data-bs-theme="dark"] .leaflet-bar a:hover {
  background-color: #22303e;
  border-color: rgba(255, 255, 255, 0.12);
  color: rgba(255, 255, 255, 0.88);
}

[data-bs-theme="dark"] .leaflet-popup-content-wrapper,
[data-bs-theme="dark"] .leaflet-popup-tip {
  background-color: #22303e;
  color: rgba(255, 255, 255, 0.88);
}

.login-page-shell {
  min-height: 100vh;
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  padding: 1.5rem;
  background-color: #f5f7fa;
}

.login-page-logo {
  max-height: 300px;
}

.login-page-shell .card {
  border-radius: 1.5rem;
  overflow: hidden;
}

.login-page-shell .card-body {
  border-radius: inherit;
}

.password-page-shell {
  margin-top: 0.5rem;
}

.password-page-shell .card {
  border-radius: 1.25rem;
  overflow: hidden;
}

[data-bs-theme="dark"] .password-page-shell .card,
[data-bs-theme="dark"] .password-page-shell .card-body,
[data-bs-theme="dark"] .password-page-shell .card-header {
  background-color: #22303e !important;
  color: rgba(255, 255, 255, 0.9) !important;
  border-color: rgba(255, 255, 255, 0.08) !important;
}

[data-bs-theme="dark"] .password-page-shell .card-header {
  background-color: #233140 !important;
}

[data-bs-theme="dark"] .password-page-shell .form-label,
[data-bs-theme="dark"] .password-page-shell h5 {
  color: rgba(255, 255, 255, 0.92) !important;
}

[data-bs-theme="dark"] .password-page-shell .form-control {
  background-color: #2b3c4d !important;
  color: rgba(255, 255, 255, 0.9) !important;
  border-color: rgba(255, 255, 255, 0.12) !important;
}

[data-bs-theme="dark"] .password-page-shell .form-control:focus {
  background-color: #314558 !important;
  color: #ffffff !important;
}

[data-bs-theme="dark"] .password-page-shell input:-webkit-autofill,
[data-bs-theme="dark"] .password-page-shell input:-webkit-autofill:hover,
[data-bs-theme="dark"] .password-page-shell input:-webkit-autofill:focus {
  -webkit-text-fill-color: rgba(255, 255, 255, 0.9);
  -webkit-box-shadow: 0 0 0 1000px #2b3c4d inset;
}

[data-bs-theme="dark"] .login-page-shell {
  background-color: #18212b;
}

@media (min-width: 768px) {
  .login-page-shell {
    padding: 2rem;
  }
}

[data-bs-theme="dark"] .login-page-shell .card,
[data-bs-theme="dark"] .login-page-shell .card-body {
  background-color: #22303e !important;
  color: rgba(255, 255, 255, 0.9);
}

[data-bs-theme="dark"] .login-page-shell .card {
  border-color: rgba(255, 255, 255, 0.08) !important;
  box-shadow: 0 0.6rem 1.8rem rgba(0, 0, 0, 0.28);
}

[data-bs-theme="dark"] .login-page-shell h4,
[data-bs-theme="dark"] .login-page-shell .form-label,
[data-bs-theme="dark"] .login-page-shell .form-check-label,
[data-bs-theme="dark"] .login-page-shell a {
  color: rgba(255, 255, 255, 0.9);
}

[data-bs-theme="dark"] .login-page-shell .text-muted,
[data-bs-theme="dark"] .login-page-shell .form-text,
[data-bs-theme="dark"] .login-page-shell .small {
  color: rgba(255, 255, 255, 0.65) !important;
}

[data-bs-theme="dark"] .admin-dashboard-page .card,
[data-bs-theme="dark"] .admin-dashboard-page .card-body,
[data-bs-theme="dark"] .admin-dashboard-page .card-header,
[data-bs-theme="dark"] .admin-dashboard-page .table-responsive,
[data-bs-theme="dark"] .admin-dashboard-page .list-group,
[data-bs-theme="dark"] .admin-dashboard-page .list-group-item {
  background-color: #22303e !important;
  color: rgba(255, 255, 255, 0.9) !important;
  border-color: rgba(255, 255, 255, 0.08) !important;
}

[data-bs-theme="dark"] .admin-dashboard-page .card-header {
  background-color: #233140 !important;
}

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

[data-bs-theme="dark"] .admin-dashboard-page .table {
  --bs-table-bg: transparent;
  --bs-table-color: rgba(255, 255, 255, 0.9);
  --bs-table-border-color: rgba(255, 255, 255, 0.08);
  --bs-table-striped-bg: rgba(255, 255, 255, 0.02);
  --bs-table-hover-bg: rgba(255, 255, 255, 0.04);
}

[data-bs-theme="dark"] .admin-dashboard-page .table thead th,
[data-bs-theme="dark"] .admin-dashboard-page .table td,
[data-bs-theme="dark"] .admin-dashboard-page .table th,
[data-bs-theme="dark"] .admin-dashboard-page .list-group-item span,
[data-bs-theme="dark"] .admin-dashboard-page h3,
[data-bs-theme="dark"] .admin-dashboard-page h4,
[data-bs-theme="dark"] .admin-dashboard-page h5 {
  color: rgba(255, 255, 255, 0.9) !important;
}

[data-bs-theme="dark"] .admin-dashboard-page .badge[class*="bg-label-"] {
  background-color: rgba(255, 255, 255, 0.08) !important;
}

[data-bs-theme="dark"] body.admin-area,
[data-bs-theme="dark"] body.admin-area .layout-page,
[data-bs-theme="dark"] body.admin-area .content-wrapper,
[data-bs-theme="dark"] body.admin-area .container-p-y,
[data-bs-theme="dark"] body.admin-area .container-xxl {
  background-color: #18212b;
}

[data-bs-theme="dark"] body.admin-area .card,
[data-bs-theme="dark"] body.admin-area .card-body,
[data-bs-theme="dark"] body.admin-area .card-header,
[data-bs-theme="dark"] body.admin-area .card-footer,
[data-bs-theme="dark"] body.admin-area .table-responsive,
[data-bs-theme="dark"] body.admin-area .list-group,
[data-bs-theme="dark"] body.admin-area .list-group-item,
[data-bs-theme="dark"] body.admin-area .border.rounded,
[data-bs-theme="dark"] body.admin-area .border {
  background-color: #22303e !important;
  color: rgba(255, 255, 255, 0.9) !important;
  border-color: rgba(255, 255, 255, 0.08) !important;
}

[data-bs-theme="dark"] body.admin-area .card-header,
[data-bs-theme="dark"] body.admin-area .card-footer {
  background-color: #233140 !important;
}

[data-bs-theme="dark"] body.admin-area .table {
  --bs-table-bg: transparent;
  --bs-table-color: rgba(255, 255, 255, 0.9);
  --bs-table-border-color: rgba(255, 255, 255, 0.08);
  --bs-table-striped-bg: rgba(255, 255, 255, 0.02);
  --bs-table-hover-bg: rgba(255, 255, 255, 0.04);
}

[data-bs-theme="dark"] body.admin-area .table thead th,
[data-bs-theme="dark"] body.admin-area .table th,
[data-bs-theme="dark"] body.admin-area .table td,
[data-bs-theme="dark"] body.admin-area .list-group-item,
[data-bs-theme="dark"] body.admin-area .card h1,
[data-bs-theme="dark"] body.admin-area .card h2,
[data-bs-theme="dark"] body.admin-area .card h3,
[data-bs-theme="dark"] body.admin-area .card h4,
[data-bs-theme="dark"] body.admin-area .card h5,
[data-bs-theme="dark"] body.admin-area .card h6,
[data-bs-theme="dark"] body.admin-area .text-body-emphasis {
  color: rgba(255, 255, 255, 0.9) !important;
}

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

[data-bs-theme="dark"] body.admin-area .badge[class*="bg-label-"] {
  background-color: rgba(255, 255, 255, 0.08) !important;
}

.question-col-number {
  width: 90px;
}

.question-col-key {
  width: 140px;
}

.question-col-short {
  width: 240px;
}

.question-col-action {
  width: 120px;
}

.role-select-min {
  min-width: 170px;
}

.mix-blend-hard-light {
  mix-blend-mode: hard-light;
}

.mix-blend-plus-darker {
  mix-blend-mode: plus-darker;
}

@media (max-width: 991.98px) {
  .nav-action-group {
    display: flex !important;
    flex-direction: column;
    align-items: stretch !important;
    width: 100%;
  }

  .nav-action-button,
  .nav-action-dropdown,
  .nav-user-toggle {
    width: 100%;
  }

  .footer-container {
    display: grid !important;
    grid-template-columns: 1fr;
    text-align: center;
  }

  .footer-left,
  .footer-right {
    min-width: auto !important;
    justify-content: center !important;
  }
}




/* ── Volunteer Registration Form ──────────────────────────────────────── */
.vol-page {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  min-height: 100vh;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 2rem 1rem;
}

.vol-container {
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 10px 40px rgba(0,0,0,.15);
  padding: 2rem;
  width: 100%;
  max-width: 1100px;
}

.vol-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding-bottom: 1.5rem;
  margin-bottom: 1.5rem;
  border-bottom: 2px solid #f0f1f4;
}

.vol-header img { max-width: 80px; flex-shrink: 0; }

.vol-header-text {
  flex: 1;
  text-align: center;
}

.vol-header-text h2 {
  color: #5a6c7d;
  font-weight: 600;
  margin: 0 0 .25rem;
  font-size: 1.1rem;
}

.vol-form-title {
  color: #e00 !important;
  font-size: 1.15rem !important;
  font-weight: 700 !important;
}

.vol-header-text p {
  color: #858d97;
  font-size: .85rem;
  margin: 0;
}

.vol-section-title {
  font-size: .95rem;
  font-weight: 700;
  color: #696cff;
  background: #f5f5ff;
  padding: .6rem 1rem;
  border-radius: 6px;
  border-left: 4px solid #696cff;
  margin: 1.75rem 0 1rem;
}

.vol-btn-submit {
  display: block;
  width: 100%;
  padding: .8rem;
  background: #696cff;
  color: #fff;
  font-size: 1rem;
  font-weight: 600;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  transition: background .15s ease, transform .1s ease;
  letter-spacing: .02em;
}

.vol-btn-submit:hover  { background: #5a5cd6; }
.vol-btn-submit:active { transform: scale(.99); }

/* ── Scribd-style Document Viewer ──────────────────────────────────────── */
.dv-container {
  height: 70vh;
  display: flex;
  flex-direction: column;
  border-radius: 6px;
  overflow: hidden;
  border: 1px solid #2e2e2e;
}
.dv-toolbar {
  background: #404040;
  color: #e0e0e0;
  padding: 8px 16px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: .82rem;
  gap: 12px;
}
.dv-toolbar .dv-title    { color: #fff; font-weight: 600; letter-spacing: .01em; }
.dv-toolbar .dv-page-info { color: #aaa; }
.dv-body {
  flex: 1;
  position: relative;
  background: #525659;
  overflow: hidden;
}
.dv-loading,
.dv-unsupported {
  position: absolute; inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: #888;
  gap: .5rem;
}
.dv-pages {
  position: absolute; inset: 0;
  overflow-y: auto;
  padding: 20px 20px 28px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}
.dv-page-wrap {
  box-shadow: 0 3px 16px rgba(0,0,0,.55);
  background: #fff;
  flex-shrink: 0;
}
.dv-page-wrap img {
  display: block;
  max-width: 100%;
  height: auto;
}
/* ── End Document Viewer ────────────────────────────────────────────────── */

/* ══════════════════════════════════════════════════════════════════════════
   Permission Matrix  (uses Sneat/Bootstrap theme classes for module headers)
══════════════════════════════════════════════════════════════════════════ */

.perm-matrix-wrap { font-size: .875rem; }

/* ── Module collapse-toggle button ─────────────────────────────────────── */
.perm-mod-toggle { cursor: pointer; outline: none; }
.perm-mod-toggle:focus { outline: none; }
.perm-mod-toggle:focus-visible { outline: 2px solid #696cff; outline-offset: 2px; }

.perm-chevron {
  transition: transform .2s ease;
  font-size: 1rem;
}
.perm-mod-toggle:not(.collapsed) .perm-chevron { transform: rotate(180deg); }

/* ── Allow/Deny micro-buttons ───────────────────────────────────────────── */
.btn-xs {
  padding: .18rem .55rem;
  font-size: .72rem;
  line-height: 1.5;
  border-radius: .25rem;
  white-space: nowrap;
}
.btn-perm-action {
  display: inline-flex;
  align-items: center;
  cursor: pointer;
  font-size: .72rem;
  font-weight: 500;
  transition: filter .15s;
}
.btn-perm-action:hover { filter: brightness(.88); }

/* ── Count badge (inside module header) ─────────────────────────────────── */
.perm-count-badge {
  font-size: .66rem !important;
  font-weight: 500;
  border-radius: 999px !important;
  padding: .15em .55em !important;
  line-height: 1.5;
  transition: background .2s, color .2s;
}

/* ── Permission table ───────────────────────────────────────────────────── */
.perm-table { font-size: .8rem; margin-bottom: 0; }
.perm-feature-col { min-width: 150px; width: 32%; }
.perm-action-col  { min-width: 72px; }

.perm-feature-label {
  font-weight: 500;
  color: #374151;
}
.perm-row:hover .perm-feature-label { color: #696cff; }
.perm-row:hover td                  { background: #f3f4ff !important; }

.perm-cell { text-align: center; vertical-align: middle; padding: .4rem .4rem; }

/* Checkbox + micro-label */
.perm-cb {
  width: 1.1em;
  height: 1.1em;
  cursor: pointer;
  margin: 0;
}
.perm-cb:checked {
  background-color: #71dd37;
  border-color: #71dd37;
}
.perm-cb:focus { box-shadow: 0 0 0 .18rem rgba(113,221,55,.3); }

/* ── Section sub-heading stripe inside an accordion module ─────────────── */
.perm-section-heading {
  background: #f8f8ff;
}
/* ── End Permission Matrix ──────────────────────────────────────────────── */

/* ── Application Manager Modal ─────────────────────────────────────────── */
.app-mgr-card { transition: opacity .2s ease; }
.app-mgr-disabled { opacity: .55; }
.app-mgr-disabled .avatar-initial { filter: grayscale(1); }
/* ── End Application Manager ─────────────────────────────────────────────── */

/* ══════════════════════════════════════════════════════════════════════════
   DARK MODE – ApexCharts SVG overrides
   These use !important to override inline attributes set by the library.
══════════════════════════════════════════════════════════════════════════ */

/* Grid lines */
[data-bs-theme="dark"] .apexcharts-gridlines-horizontal line,
[data-bs-theme="dark"] .apexcharts-gridlines-vertical line,
[data-bs-theme="dark"] .apexcharts-grid-borders line,
[data-bs-theme="dark"] .apexcharts-xcrosshairs,
[data-bs-theme="dark"] .apexcharts-ycrosshairs {
  stroke: rgba(255, 255, 255, 0.10) !important;
}

/* Axis labels / tick text */
[data-bs-theme="dark"] .apexcharts-xaxis-label text,
[data-bs-theme="dark"] .apexcharts-yaxis-label text,
[data-bs-theme="dark"] .apexcharts-xaxis-annotations text,
[data-bs-theme="dark"] .apexcharts-yaxis-annotations text {
  fill: rgba(255, 255, 255, 0.60) !important;
}

/* Legend text */
[data-bs-theme="dark"] .apexcharts-legend-text {
  color: rgba(255, 255, 255, 0.85) !important;
}

/* Data labels on bars / lines */
[data-bs-theme="dark"] .apexcharts-datalabels text {
  fill: rgba(255, 255, 255, 0.88) !important;
}

/* Radial/donut center labels */
[data-bs-theme="dark"] .apexcharts-text,
[data-bs-theme="dark"] .apexcharts-datalabel-label,
[data-bs-theme="dark"] .apexcharts-datalabel-value {
  fill: rgba(255, 255, 255, 0.88) !important;
}

/* Radial bar track (background ring) */
[data-bs-theme="dark"] .apexcharts-radialbar-track path {
  stroke: rgba(255, 255, 255, 0.08) !important;
}

/* Canvas SVG background – keep transparent so card background shows */
[data-bs-theme="dark"] .apexcharts-canvas svg,
[data-bs-theme="dark"] .apexcharts-canvas svg > rect:first-child {
  fill: transparent !important;
  background: transparent !important;
}

/* Tooltip */
[data-bs-theme="dark"] .apexcharts-tooltip {
  background: #2b3c4d !important;
  border-color: rgba(255, 255, 255, 0.12) !important;
  color: rgba(255, 255, 255, 0.90) !important;
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.40) !important;
}

[data-bs-theme="dark"] .apexcharts-tooltip-title {
  background: #22303e !important;
  border-bottom-color: rgba(255, 255, 255, 0.10) !important;
  color: rgba(255, 255, 255, 0.90) !important;
}

[data-bs-theme="dark"] .apexcharts-tooltip-text,
[data-bs-theme="dark"] .apexcharts-tooltip-text-y-label,
[data-bs-theme="dark"] .apexcharts-tooltip-text-y-value,
[data-bs-theme="dark"] .apexcharts-tooltip-text-goals-label,
[data-bs-theme="dark"] .apexcharts-tooltip-text-goals-value,
[data-bs-theme="dark"] .apexcharts-tooltip-y-group,
[data-bs-theme="dark"] .apexcharts-tooltip-series-group {
  color: rgba(255, 255, 255, 0.90) !important;
}

[data-bs-theme="dark"] .apexcharts-tooltip-marker {
  opacity: 1 !important;
}

/* Area chart gradient fallback when cardColor mismatch after toggle */
[data-bs-theme="dark"] .apexcharts-area {
  opacity: 0.25 !important;
}

/* ══════════════════════════════════════════════════════════════════════════
   DARK MODE – Translucent white stat cards  (.theme-glass-card)
   Used on heatwave dashboard and volunteer stats (rgba(255,255,255,0.5) bg)
══════════════════════════════════════════════════════════════════════════ */

.theme-glass-card {
  background: rgba(255, 255, 255, 0.5);
}

[data-bs-theme="dark"] .theme-glass-card {
  background: var(--bs-paper-bg) !important;
}

/* ══════════════════════════════════════════════════════════════════════════
   DARK MODE – Dashboard page: hazard cards, DM cycle, quick access, alerts
══════════════════════════════════════════════════════════════════════════ */

[data-bs-theme="dark"] .dm-cycle-card {
  background: rgba(255, 255, 255, 0.04) !important;
}

[data-bs-theme="dark"] .alert-ticker {
  background: rgba(243, 156, 18, 0.12);
  border-left-color: #f39c12;
  color: rgba(255, 255, 255, 0.85);
}

[data-bs-theme="dark"] .quick-link-card {
  border-color: rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.85);
}

[data-bs-theme="dark"] .quick-link-card:hover {
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.35);
  color: rgba(255, 255, 255, 0.95);
}

[data-bs-theme="dark"] .resource-item {
  border-bottom-color: rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.78);
}

[data-bs-theme="dark"] .resource-item:hover {
  color: #b8bcff;
}

/* ══════════════════════════════════════════════════════════════════════════
   DARK MODE – Permission matrix section heading
══════════════════════════════════════════════════════════════════════════ */

[data-bs-theme="dark"] .perm-section-heading {
  background: rgba(255, 255, 255, 0.04) !important;
}

[data-bs-theme="dark"] .perm-feature-label {
  color: rgba(255, 255, 255, 0.82) !important;
}

[data-bs-theme="dark"] .perm-row:hover .perm-feature-label { color: #b8bcff !important; }
[data-bs-theme="dark"] .perm-row:hover td { background: rgba(105, 108, 255, 0.08) !important; }

/* ══════════════════════════════════════════════════════════════════════════
   DARK MODE – Heatwave map popup (Leaflet popup inner content)
══════════════════════════════════════════════════════════════════════════ */

[data-bs-theme="dark"] .hw-popup-title {
  color: #ff8a80 !important;
  border-bottom-color: rgba(255, 255, 255, 0.12) !important;
}

[data-bs-theme="dark"] .hw-popup-table td {
  border-bottom-color: rgba(255, 255, 255, 0.08) !important;
  color: rgba(255, 255, 255, 0.88);
}

[data-bs-theme="dark"] .hw-popup-label {
  color: rgba(255, 255, 255, 0.60) !important;
}

[data-bs-theme="dark"] .hw-popup-counter {
  color: rgba(255, 255, 255, 0.45) !important;
}

/* ══════════════════════════════════════════════════════════════════════════
   DARK MODE – Login modal form panel (.lm-form)
   The brand panel has a dark gradient already; only the white form side needs fixing.
══════════════════════════════════════════════════════════════════════════ */

[data-bs-theme="dark"] .lm-form {
  background: #22303e !important;
}

[data-bs-theme="dark"] .lm-form h4 { color: rgba(255, 255, 255, 0.92) !important; }
[data-bs-theme="dark"] .lm-form .lm-sub { color: rgba(255, 255, 255, 0.60) !important; }
[data-bs-theme="dark"] .lm-form .form-label { color: rgba(255, 255, 255, 0.85) !important; }

[data-bs-theme="dark"] .lm-form .input-group-text {
  background: #2b3c4d !important;
  border-color: rgba(255, 255, 255, 0.12) !important;
  color: rgba(255, 255, 255, 0.55) !important;
}

[data-bs-theme="dark"] .lm-form .form-control {
  background: #2b3c4d !important;
  border-color: rgba(255, 255, 255, 0.12) !important;
  color: rgba(255, 255, 255, 0.90) !important;
}

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

[data-bs-theme="dark"] .lm-form .lm-toggle-pw {
  background: #2b3c4d !important;
  border-color: rgba(255, 255, 255, 0.12) !important;
  color: rgba(255, 255, 255, 0.55) !important;
}

[data-bs-theme="dark"] .lm-form .input-group:focus-within .input-group-text,
[data-bs-theme="dark"] .lm-form .input-group:focus-within .lm-toggle-pw {
  background: #314558 !important;
  border-color: rgba(105, 108, 255, 0.65) !important;
  color: #b8bcff !important;
}

[data-bs-theme="dark"] .lm-form .input-group:focus-within .form-control {
  background: #314558 !important;
  border-color: rgba(105, 108, 255, 0.65) !important;
  color: #ffffff !important;
}

[data-bs-theme="dark"] .lm-form .lm-footer {
  border-top-color: rgba(255, 255, 255, 0.10) !important;
}

[data-bs-theme="dark"] .lm-form .lm-footer,
[data-bs-theme="dark"] .lm-form .lm-footer a {
  color: rgba(255, 255, 255, 0.45) !important;
}

/* ══════════════════════════════════════════════════════════════════════════
   DARK MODE – Modal improvements (ensure backdrop and close button theme-aware)
══════════════════════════════════════════════════════════════════════════ */

[data-bs-theme="dark"] .modal-header {
  border-bottom-color: rgba(255, 255, 255, 0.10) !important;
}

[data-bs-theme="dark"] .modal-footer {
  border-top-color: rgba(255, 255, 255, 0.10) !important;
  background-color: var(--bs-paper-bg) !important;
}

[data-bs-theme="dark"] .modal-footer.bg-light {
  background-color: #233140 !important;
}

[data-bs-theme="dark"] .dropdown-menu {
  background-color: #2b3c4d;
  border-color: rgba(255, 255, 255, 0.10);
  color: rgba(255, 255, 255, 0.88);
}

[data-bs-theme="dark"] .dropdown-item {
  color: rgba(255, 255, 255, 0.88);
}

[data-bs-theme="dark"] .dropdown-item:hover,
[data-bs-theme="dark"] .dropdown-item:focus {
  background-color: rgba(255, 255, 255, 0.07);
  color: #ffffff;
}

[data-bs-theme="dark"] .dropdown-item.active,
[data-bs-theme="dark"] .dropdown-item:active {
  background-color: rgba(105, 108, 255, 0.20);
  color: #ffffff;
}

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

/* ══════════════════════════════════════════════════════════════════════════
   DARK MODE – Tables: striped, hover, bordered variants
══════════════════════════════════════════════════════════════════════════ */

[data-bs-theme="dark"] .table-striped > tbody > tr:nth-of-type(odd) > * {
  --bs-table-accent-bg: rgba(255, 255, 255, 0.025);
}

[data-bs-theme="dark"] .table-hover > tbody > tr:hover > * {
  --bs-table-accent-bg: rgba(255, 255, 255, 0.04);
}

[data-bs-theme="dark"] .table-bordered > :not(caption) > * > * {
  border-color: rgba(255, 255, 255, 0.08);
}

[data-bs-theme="dark"] .table.bg-warning thead,
[data-bs-theme="dark"] thead.bg-warning {
  background-color: #7d5c00 !important;
  color: rgba(255, 255, 255, 0.90) !important;
}

/* ══════════════════════════════════════════════════════════════════════════
   DARK MODE – Pagination
══════════════════════════════════════════════════════════════════════════ */

[data-bs-theme="dark"] .page-link {
  background-color: #22303e;
  border-color: rgba(255, 255, 255, 0.10);
  color: rgba(255, 255, 255, 0.80);
}

[data-bs-theme="dark"] .page-link:hover {
  background-color: #2b3c4d;
  border-color: rgba(255, 255, 255, 0.15);
  color: #ffffff;
}

[data-bs-theme="dark"] .page-item.active .page-link {
  background-color: var(--bs-primary);
  border-color: var(--bs-primary);
  color: #ffffff;
}

[data-bs-theme="dark"] .page-item.disabled .page-link {
  background-color: #1c2832;
  border-color: rgba(255, 255, 255, 0.06);
  color: rgba(255, 255, 255, 0.35);
}

/* ══════════════════════════════════════════════════════════════════════════
   DARK MODE – Breadcrumb, nav-tabs, nav-pills
══════════════════════════════════════════════════════════════════════════ */

[data-bs-theme="dark"] .breadcrumb-item,
[data-bs-theme="dark"] .breadcrumb-item a {
  color: rgba(255, 255, 255, 0.75);
}

[data-bs-theme="dark"] .breadcrumb-item.active {
  color: rgba(255, 255, 255, 0.45);
}

[data-bs-theme="dark"] .nav-tabs .nav-link {
  color: rgba(255, 255, 255, 0.65);
  border-color: transparent;
}

[data-bs-theme="dark"] .nav-tabs .nav-link:hover {
  color: rgba(255, 255, 255, 0.88);
  border-color: rgba(255, 255, 255, 0.10);
}

[data-bs-theme="dark"] .nav-tabs .nav-link.active {
  background-color: var(--bs-paper-bg);
  border-color: rgba(255, 255, 255, 0.10) rgba(255, 255, 255, 0.10) transparent;
  color: rgba(255, 255, 255, 0.92);
}

[data-bs-theme="dark"] .nav-tabs {
  border-bottom-color: rgba(255, 255, 255, 0.10);
}

[data-bs-theme="dark"] .nav-pills .nav-link {
  color: rgba(255, 255, 255, 0.65);
}

[data-bs-theme="dark"] .nav-pills .nav-link.active {
  background-color: var(--bs-primary);
  color: #ffffff;
}

/* ══════════════════════════════════════════════════════════════════════════
   DARK MODE – Buttons (outline variants and generic light/dark)
══════════════════════════════════════════════════════════════════════════ */

[data-bs-theme="dark"] .btn-outline-dark {
  color: rgba(255, 255, 255, 0.82);
  border-color: rgba(255, 255, 255, 0.30);
}

[data-bs-theme="dark"] .btn-outline-dark:hover {
  background-color: rgba(255, 255, 255, 0.10);
  color: #ffffff;
}

[data-bs-theme="dark"] .btn-light {
  background-color: #2b3c4d;
  border-color: rgba(255, 255, 255, 0.12);
  color: rgba(255, 255, 255, 0.88);
}

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

[data-bs-theme="dark"] .btn-icon {
  color: rgba(255, 255, 255, 0.78);
}

[data-bs-theme="dark"] .btn-icon:hover {
  color: #ffffff;
  background-color: rgba(255, 255, 255, 0.07);
}

/* ══════════════════════════════════════════════════════════════════════════
   DARK MODE – Misc utilities
══════════════════════════════════════════════════════════════════════════ */

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

[data-bs-theme="dark"] .border-bottom {
  border-bottom-color: rgba(255, 255, 255, 0.10) !important;
}

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

[data-bs-theme="dark"] hr {
  border-color: rgba(255, 255, 255, 0.10);
}

[data-bs-theme="dark"] code {
  background-color: rgba(255, 255, 255, 0.08);
  color: #b8bcff;
  padding: .1em .35em;
  border-radius: .25rem;
}

/* Theme toggle icon color in dark mode */
[data-bs-theme="dark"] #appThemeToggleBtn,
[data-bs-theme="dark"] #adminThemeToggleBtn {
  color: rgba(255, 255, 255, 0.78);
}

[data-bs-theme="dark"] #appThemeToggleBtn:hover,
[data-bs-theme="dark"] #adminThemeToggleBtn:hover {
  color: #ffd700;
}

/* ══════════════════════════════════════════════════════════════════════════
   DARK MODE – Phase 2: comprehensive project-wide coverage
══════════════════════════════════════════════════════════════════════════ */

/* ── .text-dark on labels/headings → light text in dark mode.
   Restore dark text only where it intentionally sits on a colored bg
   (yellow/green buttons, badges with text-bg-* coloring). ── */
[data-bs-theme="dark"] .text-dark {
  color: rgba(255, 255, 255, 0.88) !important;
}
[data-bs-theme="dark"] .btn-warning.text-dark,
[data-bs-theme="dark"] .btn-success.text-dark,
[data-bs-theme="dark"] .btn-info.text-dark,
[data-bs-theme="dark"] .bg-warning.text-dark,
[data-bs-theme="dark"] .bg-success.text-dark,
[data-bs-theme="dark"] .text-bg-warning.text-dark,
[data-bs-theme="dark"] .text-bg-success.text-dark,
[data-bs-theme="dark"] .text-bg-info.text-dark {
  color: rgba(0, 0, 0, 0.85) !important;
}

/* ── Table colour-variant theads/rows: give all variants a dark tint ── */
[data-bs-theme="dark"] .table-light > :not(caption) > * > * {
  --bs-table-bg: #233140;
  background-color: #233140 !important;
  color: rgba(255, 255, 255, 0.85) !important;
  border-color: rgba(255, 255, 255, 0.08) !important;
}

[data-bs-theme="dark"] .table-info > :not(caption) > * > * {
  --bs-table-bg: rgba(3, 195, 236, 0.12);
  background-color: rgba(3, 195, 236, 0.12) !important;
  color: rgba(255, 255, 255, 0.85) !important;
  border-color: rgba(255, 255, 255, 0.08) !important;
}

[data-bs-theme="dark"] .table-success > :not(caption) > * > * {
  --bs-table-bg: rgba(40, 199, 111, 0.12);
  background-color: rgba(40, 199, 111, 0.12) !important;
  color: rgba(255, 255, 255, 0.85) !important;
  border-color: rgba(255, 255, 255, 0.08) !important;
}

[data-bs-theme="dark"] .table-warning > :not(caption) > * > * {
  --bs-table-bg: rgba(255, 159, 67, 0.12);
  background-color: rgba(255, 159, 67, 0.12) !important;
  color: rgba(255, 255, 255, 0.85) !important;
  border-color: rgba(255, 255, 255, 0.08) !important;
}

[data-bs-theme="dark"] .table-danger > :not(caption) > * > * {
  --bs-table-bg: rgba(234, 84, 85, 0.12);
  background-color: rgba(234, 84, 85, 0.12) !important;
  color: rgba(255, 255, 255, 0.85) !important;
  border-color: rgba(255, 255, 255, 0.08) !important;
}

[data-bs-theme="dark"] .table-primary > :not(caption) > * > * {
  --bs-table-bg: rgba(105, 108, 255, 0.12);
  background-color: rgba(105, 108, 255, 0.12) !important;
  color: rgba(255, 255, 255, 0.85) !important;
  border-color: rgba(255, 255, 255, 0.08) !important;
}

/* Individual tr.table-warning rows (summary rows in heatwave stroke table) */
[data-bs-theme="dark"] tr.table-warning > * {
  background-color: rgba(255, 159, 67, 0.10) !important;
  color: rgba(255, 255, 255, 0.88) !important;
  border-color: rgba(255, 255, 255, 0.08) !important;
}

/* ── bg-*-subtle utility backgrounds (cards, card-headers, input-groups) ── */
[data-bs-theme="dark"] .bg-success-subtle {
  background-color: rgba(40, 199, 111, 0.10) !important;
}
[data-bs-theme="dark"] .bg-warning-subtle {
  background-color: rgba(255, 159, 67, 0.10) !important;
}
[data-bs-theme="dark"] .bg-danger-subtle {
  background-color: rgba(234, 84, 85, 0.10) !important;
}
[data-bs-theme="dark"] .bg-info-subtle {
  background-color: rgba(3, 195, 236, 0.10) !important;
}
[data-bs-theme="dark"] .bg-primary-subtle {
  background-color: rgba(105, 108, 255, 0.10) !important;
}

/* Modal header with subtle background needs light text */
[data-bs-theme="dark"] .modal-header.bg-warning-subtle,
[data-bs-theme="dark"] .modal-header.bg-success-subtle,
[data-bs-theme="dark"] .modal-header.bg-danger-subtle,
[data-bs-theme="dark"] .modal-header.bg-info-subtle {
  color: rgba(255, 255, 255, 0.92) !important;
}
[data-bs-theme="dark"] .modal-header.bg-warning-subtle .btn-close,
[data-bs-theme="dark"] .modal-header.bg-success-subtle .btn-close,
[data-bs-theme="dark"] .modal-header.bg-danger-subtle .btn-close {
  filter: invert(1) brightness(1.5);
}

/* ── alert-info dark mode ── */
[data-bs-theme="dark"] .alert-info {
  background-color: rgba(3, 195, 236, 0.12);
  border-color: rgba(3, 195, 236, 0.20);
  color: rgba(255, 255, 255, 0.88);
}

/* ── Progress bar tracks for named classes ── */
[data-bs-theme="dark"] .hw-progress-bar,
[data-bs-theme="dark"] .vms-progress-bar {
  background: rgba(255, 255, 255, 0.10) !important;
}

/* ── VMS Leaflet popup ── */
[data-bs-theme="dark"] .vms-popup-title {
  color: #ff8a80 !important;
  border-bottom-color: rgba(255, 255, 255, 0.12) !important;
}
[data-bs-theme="dark"] .vms-popup td {
  border-bottom-color: rgba(255, 255, 255, 0.08) !important;
  color: rgba(255, 255, 255, 0.88);
}
[data-bs-theme="dark"] .vms-popup .lbl {
  color: rgba(255, 255, 255, 0.58) !important;
}

/* ── Beneficiary list: detail-card panel
   (defined in @section('styles') inline CSS in beneficiary/list.blade.php) ── */
[data-bs-theme="dark"] .detail-card {
  border-color: rgba(255, 255, 255, 0.10) !important;
}
[data-bs-theme="dark"] .detail-card-header {
  background: rgba(255, 255, 255, 0.04) !important;
  border-bottom-color: rgba(255, 255, 255, 0.08) !important;
  color: rgba(255, 255, 255, 0.58) !important;
}
[data-bs-theme="dark"] .detail-label {
  color: rgba(255, 255, 255, 0.42) !important;
}
[data-bs-theme="dark"] .detail-value {
  color: rgba(255, 255, 255, 0.82) !important;
}
[data-bs-theme="dark"] .modal-img-thumb {
  border-color: rgba(255, 255, 255, 0.12) !important;
}
[data-bs-theme="dark"] #modalPhoto img {
  border-color: rgba(255, 255, 255, 0.15);
}
[data-bs-theme="dark"] #modalPhoto .initials-circle {
  background: rgba(105, 108, 255, 0.20);
  color: #b8bcff;
}

/* ── Neutral subtle bg for Impact-breakdown cells (replaces inline rgba(67,89,113,.04)) ── */
.neutral-subtle-bg {
  background: rgba(67, 89, 113, 0.04);
}
[data-bs-theme="dark"] .neutral-subtle-bg {
  background: rgba(255, 255, 255, 0.04) !important;
}

/* ── Volunteer registration form (standalone page, white container) ── */
[data-bs-theme="dark"] .vol-container {
  background: #22303e;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.40);
}
[data-bs-theme="dark"] .vol-header {
  border-bottom-color: rgba(255, 255, 255, 0.10);
}
[data-bs-theme="dark"] .vol-header-text h2 {
  color: rgba(255, 255, 255, 0.80) !important;
}
[data-bs-theme="dark"] .vol-header-text p {
  color: rgba(255, 255, 255, 0.55) !important;
}
[data-bs-theme="dark"] .vol-section-title {
  background: rgba(105, 108, 255, 0.15);
  color: #b8bcff;
}

/* ── Wizard / multi-step form steps ── */
[data-bs-theme="dark"] .step-icon {
  background: rgba(105, 108, 255, 0.18);
  color: #b8bcff;
}
[data-bs-theme="dark"] .step-label {
  color: rgba(255, 255, 255, 0.55);
}
[data-bs-theme="dark"] .step.active .step-icon {
  background: #696cff;
  color: #fff;
  box-shadow: 0 0 0 6px rgba(105, 108, 255, 0.22);
}
[data-bs-theme="dark"] .step.active .step-label {
  color: rgba(255, 255, 255, 0.92);
}
[data-bs-theme="dark"] .step.completed .step-icon {
  background: rgba(40, 199, 111, 0.22);
  color: #9ae6b4;
}

/* ══════════════════════════════════════════════════════════════════════════
   DARK MODE – Fix: card & modal rounded-corner overflow
   Bootstrap/Sneat sets border-radius on .card and .modal-content but does
   NOT set overflow:hidden. In dark mode, direct children with solid dark
   backgrounds paint square corners over the rounded card edge — clearly
   visible because child (#22303e) contrasts against the page bg (#18212b).

   Cards: apply matching inner border-radius to direct children at the
   first/last position (mirrors Bootstrap's own .card-header / .card-footer
   pattern). Avoids overflow:hidden which would clip action dropdown menus
   that extend below the card boundary.

   Modals: add overflow:hidden to .modal-content — safe because modal
   children rarely contain overflow dropdowns (Popper.js uses position:fixed).
══════════════════════════════════════════════════════════════════════════ */

/* ── Cards: bottom (last-child) corner fix ── */
[data-bs-theme="dark"] .card > .table-responsive:last-child,
[data-bs-theme="dark"] .card > .card-body:last-child,
[data-bs-theme="dark"] .card > .tab-content:last-child,
[data-bs-theme="dark"] .card > .accordion:last-child {
  border-bottom-left-radius:  var(--bs-card-inner-border-radius);
  border-bottom-right-radius: var(--bs-card-inner-border-radius);
}

/* ── Cards: top (first-child) corner fix — only needed when there is no .card-header ── */
[data-bs-theme="dark"] .card > .table-responsive:first-child,
[data-bs-theme="dark"] .card > .card-body:first-child {
  border-top-left-radius:  var(--bs-card-inner-border-radius);
  border-top-right-radius: var(--bs-card-inner-border-radius);
}

/* ── Modals: clip header/body/footer coloured backgrounds to rounded corners ── */
[data-bs-theme="dark"] .modal-content {
  overflow: hidden;
}

/* ── card-header dark bg needs top corners clipped too (when it IS first-child) ── */
[data-bs-theme="dark"] .card > .card-header:first-child {
  border-top-left-radius:  var(--bs-card-inner-border-radius);
  border-top-right-radius: var(--bs-card-inner-border-radius);
}

/* ── card-footer dark bg needs bottom corners clipped too (when it IS last-child) ── */
[data-bs-theme="dark"] .card > .card-footer:last-child {
  border-bottom-left-radius:  var(--bs-card-inner-border-radius);
  border-bottom-right-radius: var(--bs-card-inner-border-radius);
}

/* ── Dark mode: red border on all modals ── */
[data-bs-theme="dark"] .modal-content {
  border: 1px solid rgba(234, 84, 85, 0.60) !important;
}

/* ══════════════════════════════════════════════════════════════════════════
   KoboToolbox sync page (update.blade.php)
══════════════════════════════════════════════════════════════════════════ */

.sync-card { max-width: 860px; margin: 1.5rem auto; }

.log-box {
  background: #1e2a36;
  color: #c8d6e5;
  font-family: 'Courier New', monospace;
  font-size: .8rem;
  line-height: 1.6;
  padding: .9rem 1rem;
  border-radius: .5rem;
  max-height: 400px;
  overflow-y: auto;
  white-space: pre-wrap;
  word-break: break-word;
}
.log-box .log-ok  { color: #28c76f; }
.log-box .log-err { color: #ea5455; }
.log-box .log-sep { color: #444e5a; }
.log-box .log-ts  { color: #7fa8cc; }

.spinner {
  display: inline-block;
  width: 1rem;
  height: 1rem;
  border: 2px solid rgba(105, 108, 255, .25);
  border-top-color: #696cff;
  border-radius: 50%;
  animation: spin .8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

#livePanel { display: none; }

/* ══════════════════════════════════════════════════════════════════════════
   Fire Safety Audit dashboard (welcome.blade.php)
══════════════════════════════════════════════════════════════════════════ */

/* ── Chart card headers with a centered legend + filter controls ─────────── */
.chart-header-grid {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: .5rem;
}

.chart-header-grid .chart-legend {
  grid-column: 2;
  justify-self: center;
}

.chart-header-grid .chart-header-actions {
  grid-column: 3;
  justify-self: end;
}

.chart-legend-item {
  display: flex;
  align-items: center;
  gap: .35rem;
  font-size: .82rem;
  cursor: pointer;
  user-select: none;
  color: #4a5568;
}

.chart-legend-item.is-hidden {
  opacity: .4;
  text-decoration: line-through;
}

.chart-legend-swatch {
  display: inline-block;
  width: 12px;
  height: 12px;
  border-radius: 3px;
}

@media (max-width: 575.98px) {
  .chart-header-grid {
    grid-template-columns: 1fr;
    justify-items: flex-start;
  }
  .chart-header-grid .chart-legend,
  .chart-header-grid .chart-header-actions {
    grid-column: 1;
    justify-self: flex-start;
  }
}

/* ── Map legend (Leaflet bottom-right control) ────────────────────────────── */
.map-legend {
  background-color: #ffffff;
  border: 2px solid #c8c8c8;
  border-radius: 6px;
  padding: 8px 12px 10px;
  font-size: 13px;
  line-height: 1.6;
  color: #333333;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.25);
  min-width: 175px;
}
.map-legend .legend-title {
  font-weight: 700;
  font-size: 13px;
  margin-bottom: 6px;
  border-bottom: 2px solid #e0e0e0;
  padding-bottom: 4px;
  color: #111111;
}
.map-legend .legend-item {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-bottom: 4px;
}
.map-legend .legend-dot {
  display: inline-block;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  flex-shrink: 0;
  border: 1px solid rgba(0, 0, 0, 0.25);
}

[data-bs-theme="dark"] .map-legend {
  background-color: #22303e;
  border-color: rgba(255, 255, 255, 0.12);
  color: rgba(255, 255, 255, 0.88);
}
[data-bs-theme="dark"] .map-legend .legend-title {
  border-bottom-color: rgba(255, 255, 255, 0.12);
  color: rgba(255, 255, 255, 0.95);
}

/* ── Building search autocomplete ─────────────────────────────────────────── */
.bsearch-group:focus-within,
.bsearch-group:focus {
  box-shadow: none !important;
}
.bsearch-group:focus-within::before,
.bsearch-group:focus::before {
  box-shadow: none !important;
}
.bsearch-group:focus-within .btn,
.bsearch-group:focus .btn {
  box-shadow: none !important;
}
.bsearch-dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: #ffffff;
  border: 1px solid #c8c8c8;
  border-top: none;
  border-radius: 0 0 6px 6px;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.15);
  max-height: 340px;
  overflow-y: auto;
  z-index: 1050;
}
.bsearch-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  cursor: pointer;
  border-bottom: 1px solid #f2f2f2;
}
.bsearch-item:last-child { border-bottom: none; }
.bsearch-item:hover,
.bsearch-item.bsearch-active { background: #f0f4ff; }
.bsearch-dot {
  width: 11px;
  height: 11px;
  border-radius: 50%;
  flex-shrink: 0;
  border: 1px solid rgba(0, 0, 0, 0.18);
}
.bsearch-text { min-width: 0; }
.bsearch-name {
  font-weight: 600;
  font-size: .875rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.bsearch-meta {
  font-size: .75rem;
  color: #6c757d;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.bsearch-empty {
  padding: 10px 14px;
  font-size: .875rem;
  color: #6c757d;
}
.bsearch-more {
  padding: 6px 14px;
  font-size: .75rem;
  color: #999;
  background: #fafafa;
  border-top: 1px solid #eee;
  text-align: center;
}

[data-bs-theme="dark"] .bsearch-dropdown {
  background: #22303e;
  border-color: rgba(255, 255, 255, 0.12);
}
[data-bs-theme="dark"] .bsearch-item {
  border-bottom-color: rgba(255, 255, 255, 0.08);
}
[data-bs-theme="dark"] .bsearch-item:hover,
[data-bs-theme="dark"] .bsearch-item.bsearch-active {
  background: rgba(255, 255, 255, 0.06);
}
[data-bs-theme="dark"] .bsearch-meta {
  color: rgba(255, 255, 255, 0.6);
}
[data-bs-theme="dark"] .bsearch-more {
  background: rgba(255, 255, 255, 0.03);
  border-top-color: rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.5);
}

/* ── Building detail modal ────────────────────────────────────────────────── */
.bdetail-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  z-index: 9000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
}
.bdetail-modal {
  background: #ffffff;
  border-radius: 8px;
  width: 100%;
  max-width: 680px;
  max-height: 88vh;
  display: flex;
  flex-direction: column;
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.3);
}
.bdetail-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  border-bottom: 1px solid #dee2e6;
  flex-shrink: 0;
}
.bdetail-header h6 { font-weight: 700; font-size: .95rem; }
.bdetail-close {
  background: none;
  border: none;
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
  color: #888;
  padding: 0 2px;
}
.bdetail-close:hover { color: #111; }
.bdetail-body { overflow-y: auto; padding: 14px 16px; flex: 1; }
.bdetail-section { margin-bottom: 12px; }
.bdetail-row {
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding: 5px 0;
  border-bottom: 1px solid #f2f2f2;
  font-size: .855rem;
}
.bdetail-row:last-child { border-bottom: none; }
.bdetail-lbl {
  width: 140px;
  flex-shrink: 0;
  color: #6c757d;
  font-weight: 500;
}
.bdetail-qtitle {
  font-weight: 700;
  font-size: .85rem;
  padding: 6px 0 6px;
  border-bottom: 2px solid #dee2e6;
  margin-bottom: 8px;
}
.bdetail-badge {
  display: inline-block;
  padding: 2px 9px;
  border-radius: 4px;
  font-size: .73rem;
  font-weight: 600;
  letter-spacing: .02em;
}
.bdetail-yes { background: #d4edda; color: #155724; }
.bdetail-no  { background: #f8d7da; color: #721c24; }
.bdetail-na  { background: #f0f0f0; color: #777; }

[data-bs-theme="dark"] .bdetail-modal {
  background: #22303e;
  color: rgba(255, 255, 255, 0.9);
}
[data-bs-theme="dark"] .bdetail-header {
  border-bottom-color: rgba(255, 255, 255, 0.08);
}
[data-bs-theme="dark"] .bdetail-close {
  color: rgba(255, 255, 255, 0.6);
}
[data-bs-theme="dark"] .bdetail-close:hover {
  color: rgba(255, 255, 255, 0.95);
}
[data-bs-theme="dark"] .bdetail-row {
  border-bottom-color: rgba(255, 255, 255, 0.08);
}
[data-bs-theme="dark"] .bdetail-lbl {
  color: rgba(255, 255, 255, 0.6);
}
[data-bs-theme="dark"] .bdetail-qtitle {
  border-bottom-color: rgba(255, 255, 255, 0.12);
}


/* ── Footer ─────────────────────────────────────────────────────────────── */
.fsa-footer {
    background: rgba(255, 172, 38, .55);
    color: #000;
    padding: 8px;
    text-align: center;
    box-shadow: 0 -3px 8px rgba(0,0,0,.08);
    margin-top: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

.fsa-footer marquee {
    font-size: .875rem;
    font-weight: 500;
}

/* ── Building details page (buildingDetails.blade.php) ───────────────────── */
.qgroup-header {
    background: linear-gradient(90deg,#696cff 0%,#5e63d8 100%);
    color: #fff;
    font-size: .8rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    padding: 5px 10px;
}
.qgroup-header.orange { background: linear-gradient(90deg,#ff9f43 0%,#e8850e 100%); }
.qgroup-header.red    { background: linear-gradient(90deg,#ea5455 0%,#c73435 100%); }
.card-header:has(.qgroup-header) { overflow: hidden; border-bottom: none; }
.card-body:has(> .table-responsive:last-child) {
    overflow: hidden;
    border-bottom-left-radius: calc(0.375rem - 1px);
    border-bottom-right-radius: calc(0.375rem - 1px);
}

/* Remark row */
.q-remark-row td {
    background: #fffbf0;
    border-top: none !important;
    padding: 3px 10px 6px 42px !important;
    font-size: .75rem;
    color: #7a6000;
    font-style: italic;
}

/* Info grid */
.info-grid {
    display: flex;
    flex-direction: column;
}
.info-grid .ig-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    border-bottom: 1px solid #f2f2f2;
    transition: background-color .15s ease;
}
.info-grid .ig-row:last-child {
    border-bottom: none;
}
.info-grid .ig-row:nth-child(even) {
    background: #fafbfc;
}
.info-grid .ig-row:hover {
    background: #f1f2fe;
}
.info-grid .ig-field {
    padding: 10px 14px;
    border-right: 1px solid #f2f2f2;
}
.info-grid .ig-field:last-child {
    border-right: none;
}
.info-grid .ig-label {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: .72rem;
    color: #697a8d;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .03em;
    margin-bottom: 3px;
}
.info-grid .ig-label i {
    font-size: .9rem;
    color: #696cff;
    line-height: 1;
}
.info-grid .ig-value {
    display: block;
    font-size: .875rem;
    font-weight: 600;
    color: #1f2b3d;
}
@media (max-width: 575px) {
    .info-grid .ig-row { grid-template-columns: 1fr; }
    .info-grid .ig-field { border-right: none; border-bottom: 1px solid #f2f2f2; }
    .info-grid .ig-field:last-child { border-bottom: none; }
}

/* Photo gallery */
.photo-gallery {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    padding: 10px 0 0;
}
.photo-thumb {
    width: 120px;
    height: 120px;
    object-fit: cover;
    border-radius: 6px;
    border: 2px solid #dee2e6;
    cursor: pointer;
    transition: border-color .15s, transform .15s;
    display: block;
}
.photo-thumb:hover { border-color: #696cff; transform: scale(1.04); }

.doc-card {
    width: 120px;
    height: 120px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    border-radius: 6px;
    border: 2px solid #dee2e6;
    background: #f8f9fa;
    cursor: pointer;
    text-decoration: none;
    transition: border-color .15s, transform .15s;
    padding: 6px;
}
.doc-card:hover { border-color: #696cff; transform: scale(1.04); }
.doc-card .doc-icon { font-size: 2.4rem; line-height: 1; }
.doc-card .doc-name {
    font-size: .65rem;
    color: #555;
    text-align: center;
    word-break: break-all;
    max-height: 40px;
    overflow: hidden;
}
.doc-card .doc-date { font-size: .65rem; color: #888; }

/* Lightbox */
#lightbox {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.88);
    z-index: 9900;
    align-items: center;
    justify-content: center;
    padding: 20px;
}
#lightbox.open { display: flex; }
#lightbox img {
    max-width: 90vw;
    max-height: 90vh;
    border-radius: 6px;
    box-shadow: 0 8px 32px rgba(0,0,0,.6);
}
#lightboxClose {
    position: fixed;
    top: 18px;
    right: 22px;
    color: #fff;
    font-size: 2.2rem;
    line-height: 1;
    cursor: pointer;
    background: none;
    border: none;
    z-index: 9901;
    padding: 0 4px;
}
#lightboxClose:hover { color: #ccc; }
#lightboxCaption {
    position: fixed;
    bottom: 16px;
    left: 0;
    right: 0;
    text-align: center;
    color: rgba(255,255,255,.75);
    font-size: .82rem;
}

[data-bs-theme="dark"] .info-grid .ig-row,
[data-bs-theme="dark"] .info-grid .ig-field {
  border-color: rgba(255, 255, 255, 0.08);
}
[data-bs-theme="dark"] .info-grid .ig-row:nth-child(even) {
  background: rgba(255, 255, 255, 0.03);
}
[data-bs-theme="dark"] .info-grid .ig-row:hover {
  background: rgba(105, 108, 255, 0.12);
}
[data-bs-theme="dark"] .info-grid .ig-label {
  color: rgba(255, 255, 255, 0.6);
}
[data-bs-theme="dark"] .info-grid .ig-value {
  color: rgba(255, 255, 255, 0.9);
}
[data-bs-theme="dark"] .q-remark-row td {
  background: rgba(255, 159, 67, 0.08);
  color: #ffc684;
}
[data-bs-theme="dark"] .doc-card {
  background: rgba(255, 255, 255, 0.03);
  border-color: rgba(255, 255, 255, 0.12);
}
[data-bs-theme="dark"] .doc-card .doc-name {
  color: rgba(255, 255, 255, 0.7);
}
[data-bs-theme="dark"] .photo-thumb {
  border-color: rgba(255, 255, 255, 0.12);
}
@media (max-width: 575px) {
  [data-bs-theme="dark"] .info-grid .ig-field {
    border-bottom-color: rgba(255, 255, 255, 0.08);
  }
}