/* Dark theme for iPortals (Bootstrap 5.1.0). Activated by html[data-bs-theme="dark"],
   toggled from the navbar button and persisted in localStorage ("iPortalsTheme").
   Bootstrap 5.1 compiles most component colors as literal values, so this layers a
   small set of token redefinitions (for the var()-driven rules) plus targeted
   overrides for the literal-light components used across the site. Default is light;
   existing users see no change unless they opt in. */

html[data-bs-theme="dark"] {
  color-scheme: dark;

  /* Core body tokens. */
  --bs-body-bg: #212529;
  --bs-body-color: #dee2e6;
  --bs-border-color: #495057;

  /* Utility-flavored rgb tokens are repurposed so hardcoded classes flip with them:
     "dark" text becomes light-on-dark, and "white"/"light" surfaces become elevated
     dark surfaces (navbar, cards and detail boxes switch automatically). */
  --bs-dark-rgb: 248, 249, 250;
  --bs-white-rgb: 52, 58, 64;
  --bs-light-rgb: 43, 48, 53;
}

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

/* Light theme's text-muted (#6c757d) is too dark on dark backgrounds. */
html[data-bs-theme="dark"] .text-muted {
  color: #adb5bd !important;
}

/* Navbar: built with navbar-light + bg-white; both flip through the tokens above,
   but a few literal styles need explicit handling. */
html[data-bs-theme="dark"] .navbar-light .navbar-brand,
html[data-bs-theme="dark"] .navbar-light .navbar-brand:hover,
html[data-bs-theme="dark"] .navbar-light .navbar-brand:focus {
  color: var(--bs-body-color);
}
html[data-bs-theme="dark"] .navbar-light .navbar-nav .nav-link {
  color: var(--bs-body-color);
}
html[data-bs-theme="dark"] .navbar-light .navbar-toggler {
  border-color: var(--bs-border-color);
}
html[data-bs-theme="dark"] .navbar-light .navbar-toggler-icon {
  filter: invert(1);
}

/* Dropdown menu (Admin nav). */
html[data-bs-theme="dark"] .dropdown-menu {
  color: var(--bs-body-color);
  background-color: #343a40;
  border-color: var(--bs-border-color);
}
html[data-bs-theme="dark"] .dropdown-item {
  color: var(--bs-body-color);
}
html[data-bs-theme="dark"] .dropdown-item:hover,
html[data-bs-theme="dark"] .dropdown-item:focus {
  color: #fff;
  background-color: rgba(255, 255, 255, 0.1);
}
html[data-bs-theme="dark"] .dropdown-divider {
  border-color: var(--bs-border-color);
}

/* Cards. */
html[data-bs-theme="dark"] .card {
  color: var(--bs-body-color);
  background-color: #343a40;
  border-color: var(--bs-border-color);
}
html[data-bs-theme="dark"] .card-header,
html[data-bs-theme="dark"] .card-footer {
  background-color: rgba(255, 255, 255, 0.04);
  border-color: var(--bs-border-color);
}

/* Forms. */
html[data-bs-theme="dark"] .form-control,
html[data-bs-theme="dark"] .form-select,
html[data-bs-theme="dark"] .form-check-input {
  color: var(--bs-body-color);
  background-color: #1a1d20;
  border-color: var(--bs-border-color);
}
html[data-bs-theme="dark"] .form-control:focus,
html[data-bs-theme="dark"] .form-select:focus {
  color: var(--bs-body-color);
  background-color: #1a1d20;
}
html[data-bs-theme="dark"] .form-control::placeholder {
  color: #6c757d;
}
html[data-bs-theme="dark"] .form-select option {
  color: var(--bs-body-color);
  background-color: #343a40;
}
html[data-bs-theme="dark"] .input-group-text {
  color: var(--bs-body-color);
  background-color: #343a40;
  border-color: var(--bs-border-color);
}

/* Tables. */
html[data-bs-theme="dark"] .table {
  --bs-table-striped-bg: rgba(255, 255, 255, 0.05);
  --bs-table-striped-color: #dee2e6;
  --bs-table-active-bg: rgba(255, 255, 255, 0.1);
  --bs-table-active-color: #dee2e6;
  --bs-table-hover-bg: rgba(255, 255, 255, 0.075);
  --bs-table-hover-color: #dee2e6;
  color: #dee2e6;
  border-color: #495057;
}
html[data-bs-theme="dark"] .table-bordered {
  --bs-table-border-color: #495057;
}
/* Sticky grid headers: opaque cell background (the table background is
   transparent), matching the elevated surface used elsewhere in dark mode. */
html[data-bs-theme="dark"] .grid-scroll thead th {
  background-color: #343a40;
}

/* Pagination. */
html[data-bs-theme="dark"] .page-link {
  color: #6ea8fe;
  background-color: #343a40;
  border-color: var(--bs-border-color);
}
html[data-bs-theme="dark"] .page-link:hover {
  color: #9ec5fe;
  background-color: #3d444d;
  border-color: var(--bs-border-color);
}
html[data-bs-theme="dark"] .page-item.disabled .page-link {
  color: #6c757d;
  background-color: #343a40;
  border-color: var(--bs-border-color);
}

/* Alerts (dark palettes). */
html[data-bs-theme="dark"] .alert-info { color: #6edff6; background-color: #032830; border-color: #087990; }
html[data-bs-theme="dark"] .alert-info .alert-link { color: #9be8f8; }
html[data-bs-theme="dark"] .alert-success { color: #75b798; background-color: #041c10; border-color: #0f5132; }
html[data-bs-theme="dark"] .alert-success .alert-link { color: #9cd2ae; }
html[data-bs-theme="dark"] .alert-danger { color: #ea868f; background-color: #2c0b0e; border-color: #842029; }
html[data-bs-theme="dark"] .alert-danger .alert-link { color: #f0b9bc; }
html[data-bs-theme="dark"] .alert-warning { color: #ffda6a; background-color: #332703; border-color: #664d03; }
html[data-bs-theme="dark"] .alert-warning .alert-link { color: #ffe69c; }
html[data-bs-theme="dark"] .alert-light { color: #e9ecef; background-color: #343a40; border-color: #495057; }
html[data-bs-theme="dark"] .alert-light .alert-link { color: #f3f5f7; }

/* Hairlines on light-colored surfaces (footer, bordered detail boxes). */
html[data-bs-theme="dark"] .border-top,
html[data-bs-theme="dark"] .border-bottom,
html[data-bs-theme="dark"] .border {
  border-color: var(--bs-border-color) !important;
}

/* Theme toggle button icons: sun in light, moon in dark. */
#themeToggle .icon-moon { display: none; }
html[data-bs-theme="dark"] #themeToggle .icon-sun { display: none; }
html[data-bs-theme="dark"] #themeToggle .icon-moon { display: inline; }