/* ============================================================
   Dark mode — public website
   ------------------------------------------------------------
   Pure system sync: activates only when the visitor's OS/browser
   is set to a dark color scheme (prefers-color-scheme: dark).
   No toggle, no JavaScript.

   The public site is built on the Bootstrap 4 "Front" theme
   (css/theme.min.css), which predates native dark-mode support
   and hardcodes light surfaces (#fff) and dark text
   (#1e2022 / #677788). This file is loaded AFTER theme + custom
   CSS and re-paints those surfaces for dark viewing.
   ============================================================ */

@media (prefers-color-scheme: dark) {

  :root {
    /* Let native controls (scrollbars, checkboxes, date pickers)
       render in their dark variant automatically. */
    color-scheme: dark;

    /* Dark palette */
    --dm-bg:        #0f1116;  /* page background            */
    --dm-surface:   #171a21;  /* cards, header, dropdowns    */
    --dm-surface-2: #1f232d;  /* inputs, hover, raised areas */
    --dm-border:    #2a2f3a;  /* borders, dividers           */
    --dm-heading:   #e8eaee;  /* headings, strong text       */
    --dm-text:      #b4bbc6;  /* body text (was #677788)     */
    --dm-muted:     #868e9c;  /* muted / secondary text      */
    --dm-primary:   #4d8cff;  /* links / accent (lightened)  */
  }

  /* ---- Base -------------------------------------------------- */
  html,
  body {
    background-color: var(--dm-bg);
    color: var(--dm-text);
  }

  /* ---- Typography ------------------------------------------- */
  h1, h2, h3, h4, h5, h6,
  .h1, .h2, .h3, .h4, .h5, .h6 {
    color: var(--dm-heading);
  }
  p, li, dd, dt, blockquote, figcaption {
    color: var(--dm-text);
  }
  strong, b {
    color: var(--dm-heading);
  }
  a {
    color: var(--dm-primary);
  }
  a:hover,
  a:focus {
    color: #6ba0ff;
  }
  hr {
    border-color: var(--dm-border);
  }
  code, pre, kbd {
    background-color: var(--dm-surface-2);
    color: #e8b6c8;
  }

  /* ---- Text color utilities --------------------------------- */
  .text-dark,
  .text-body,
  .text-secondary,
  .text-gray-900,
  .text-gray-800,
  .text-gray-700 {
    color: var(--dm-heading) !important;
  }
  .text-muted,
  .text-gray-600,
  .text-gray-500 {
    color: var(--dm-muted) !important;
  }
  /* .text-white / .text-white-70 are intentionally left as-is —
     they sit over dark hero imagery. */

  /* ---- Background utilities → dark surfaces ------------------ */
  .bg-white,
  .bg-light,
  .bg-gray-100,
  .bg-gray-200 {
    background-color: var(--dm-surface) !important;
  }
  /* .bg-dark stays dark, .bg-transparent stays transparent. */

  /* ---- Header / navigation ---------------------------------- */
  .header-section {
    background-color: var(--dm-surface);
  }
  .header-box-shadow .header-section,
  .header-box-shadow-on-scroll.scrolled .header-section {
    box-shadow: 0 1px 10px rgba(0, 0, 0, 0.55);
  }
  /* Keep the transparent (home hero) header transparent. */
  .header-bg-transparent:not(.js-header-fix-moment) .header-section {
    background-color: transparent;
  }
  .navbar-brand,
  .nav-link {
    color: var(--dm-heading);
  }

  /* Below the lg breakpoint the theme paints the collapsed menu solid white
     (.header-bg-transparent .navbar-nav), because over a transparent header the
     links would otherwise sit on the hero image. That panel still has to be
     opaque in dark mode - just dark rather than white. */
  @media (max-width: 991.98px) {
    .header-bg-transparent .navbar-nav,
    .header-bg-transparent-lg .navbar-nav,
    .header-bg-transparent-md .navbar-nav,
    .header-bg-transparent-sm .navbar-nav {
      background-color: var(--dm-surface);
    }
  }

  /* ---- Cards ------------------------------------------------- */
  .card {
    background-color: var(--dm-surface);
    box-shadow: 0 12px 15px rgba(0, 0, 0, 0.35);
  }
  .card-header,
  .card-footer {
    background-color: var(--dm-surface);
    border-color: var(--dm-border);
  }
  .card-title {
    color: var(--dm-heading);
  }
  .card-text {
    color: var(--dm-text);
  }

  /* ---- Borders ---------------------------------------------- */
  .border,
  .border-top,
  .border-right,
  .border-bottom,
  .border-left {
    border-color: var(--dm-border) !important;
  }

  /* ---- Forms ------------------------------------------------- */
  .form-control,
  .custom-select,
  textarea,
  select,
  input[type="text"],
  input[type="email"],
  input[type="password"],
  input[type="number"],
  input[type="tel"],
  input[type="url"],
  input[type="search"],
  input[type="date"] {
    background-color: var(--dm-surface-2);
    border-color: var(--dm-border);
    color: var(--dm-heading);
  }
  .form-control:focus,
  .custom-select:focus,
  textarea:focus,
  select:focus {
    background-color: var(--dm-surface-2);
    border-color: var(--dm-primary);
    color: var(--dm-heading);
  }
  .form-control:disabled,
  .form-control[readonly] {
    background-color: var(--dm-surface);
    color: var(--dm-muted);
  }
  .form-control::placeholder {
    color: var(--dm-muted);
  }
  .form-control::-webkit-input-placeholder {
    color: var(--dm-muted);
  }
  .input-label,
  .col-form-label,
  label,
  legend {
    color: var(--dm-text);
  }
  .input-group-text {
    background-color: var(--dm-surface);
    border-color: var(--dm-border);
    color: var(--dm-text);
  }
  .custom-control-label {
    color: var(--dm-text);
  }
  .custom-file-label {
    background-color: var(--dm-surface-2);
    border-color: var(--dm-border);
    color: var(--dm-heading);
  }
  .custom-file-label::after {
    background-color: var(--dm-surface);
    color: var(--dm-text);
  }

  /* ---- Buttons that assume a light surface ------------------
     The Front theme forces these backgrounds with very high
     specificity, e.g.
       .btn-light:not([href]):not([href]):not(:disabled):not(.disabled)
     (and only sets background/border, not color), so !important
     is required to re-tint them for dark mode. */
  .btn-light,
  .btn-white,
  .btn-outline-light {
    background-color: var(--dm-surface-2) !important;
    border-color: var(--dm-border) !important;
    color: var(--dm-heading) !important;
  }
  .btn-light:hover,
  .btn-white:hover,
  .btn-outline-light:hover,
  .btn-light:focus,
  .btn-white:focus,
  .btn-outline-light:focus {
    background-color: var(--dm-border) !important;
    border-color: var(--dm-border) !important;
    color: var(--dm-heading) !important;
  }

  /* ---- Tables ----------------------------------------------- */
  .table {
    color: var(--dm-text);
  }
  .table th,
  .table td {
    border-color: var(--dm-border);
  }
  .table thead th {
    border-color: var(--dm-border);
    color: var(--dm-heading);
  }
  .table-hover tbody tr:hover {
    background-color: var(--dm-surface-2);
    color: var(--dm-heading);
  }
  .table-striped tbody tr:nth-of-type(odd) {
    background-color: rgba(255, 255, 255, 0.03);
  }

  /* ---- List groups ------------------------------------------ */
  .list-group-item {
    background-color: var(--dm-surface);
    border-color: var(--dm-border);
    color: var(--dm-text);
  }

  /* ---- Dropdowns -------------------------------------------- */
  .dropdown-menu {
    background-color: var(--dm-surface);
    border-color: var(--dm-border);
  }
  .dropdown-item {
    color: var(--dm-text);
  }
  .dropdown-item:hover,
  .dropdown-item:focus {
    background-color: var(--dm-surface-2);
    color: var(--dm-heading);
  }
  .dropdown-divider {
    border-color: var(--dm-border);
  }

  /* ---- Modals ----------------------------------------------- */
  .modal-content {
    background-color: var(--dm-surface);
    color: var(--dm-text);
  }
  .modal-header,
  .modal-footer {
    border-color: var(--dm-border);
  }
  .close {
    color: var(--dm-heading);
    text-shadow: none;
  }
  .close:hover {
    color: #fff;
  }

  /* ---- Badges ----------------------------------------------- */
  .badge-light {
    background-color: var(--dm-surface-2);
    color: var(--dm-heading);
  }

  /* ---- Alerts (dark-tinted, kept readable) ------------------ */
  .alert-danger {
    background-color: #3a1c22;
    border-color: #5c2a33;
    color: #f2b8c0;
  }
  .alert-warning {
    background-color: #3a3320;
    border-color: #5c5330;
    color: #f0d99a;
  }
  .alert-success {
    background-color: #1c3524;
    border-color: #2c5238;
    color: #a9e0bf;
  }
  .alert-info {
    background-color: #1c303a;
    border-color: #2c4a5c;
    color: #a9d4e6;
  }
  .alert-primary {
    background-color: #1e2b45;
    border-color: #2c4370;
    color: #adc3f0;
  }
  .alert-secondary {
    background-color: var(--dm-surface-2);
    border-color: var(--dm-border);
    color: var(--dm-text);
  }
  .alert a,
  .alert .alert-link {
    color: inherit;
    text-decoration: underline;
  }

  /* ---- Footer ----------------------------------------------- */
  footer,
  .footer {
    background-color: var(--dm-bg);
    color: var(--dm-text);
  }
  .footer-note {
    color: var(--dm-muted);
  }

  /* ---- Date/time picker widget (bootstrap-datetimepicker) ---- */
  .datetimepicker {
    background-color: var(--dm-surface);
    border-color: var(--dm-border);
    color: var(--dm-text);
  }
  .datetimepicker table tr td,
  .datetimepicker table tr th {
    color: var(--dm-text);
  }
  .datetimepicker table tr td.day:hover,
  .datetimepicker table tr td.hour:hover,
  .datetimepicker table tr td.minute:hover,
  .datetimepicker table tr td span:hover,
  .datetimepicker .switch:hover,
  .datetimepicker .prev:hover,
  .datetimepicker .next:hover {
    background-color: var(--dm-surface-2);
    color: var(--dm-heading);
  }
  .datetimepicker table tr td.old,
  .datetimepicker table tr td.new,
  .datetimepicker table tr td span.old {
    color: var(--dm-muted);
  }
  .datetimepicker table tr td.active,
  .datetimepicker table tr td.active:hover,
  .datetimepicker table tr td span.active {
    background-color: var(--dm-primary);
    color: #fff;
  }
  .datetimepicker table tr td.disabled,
  .datetimepicker table tr td span.disabled {
    color: #55606f;
  }

  /* ---- Scrollbars (WebKit) ---------------------------------- */
  ::-webkit-scrollbar {
    width: 12px;
    height: 12px;
  }
  ::-webkit-scrollbar-track {
    background: var(--dm-bg);
  }
  ::-webkit-scrollbar-thumb {
    background: #2f3542;
    border-radius: 6px;
    border: 3px solid var(--dm-bg);
  }
  ::-webkit-scrollbar-thumb:hover {
    background: #3a4150;
  }
}