/*
 * Dark mode — follows the operating system setting (prefers-color-scheme).
 *
 * Component styles use `var(--dm-token, <light value>)`. The --dm-* tokens are only
 * defined here, inside the dark media query, so light mode keeps its original colors.
 */
:root { color-scheme: light dark; }

@media (prefers-color-scheme: dark) {
  :root {
    --dm-bg: #0d1724;
    --dm-surface: #142131;
    --dm-surface-2: #1a2a3d;

    --dm-text: #e4ecf5;
    --dm-text-2: #b3c1d1;
    --dm-text-3: #8699ad;

    --dm-header-bg: rgba(13, 23, 36, 0.85);

    --dm-border: #24364b;
    --dm-border-strong: #2f4760;

    --dm-accent-soft: rgba(54, 150, 206, 0.16);
    --dm-accent-text: #9ccdec;
    --dm-success-soft: rgba(32, 201, 151, 0.14);
    --dm-success-text: #5fdcb4;
    --dm-success-border: rgba(32, 201, 151, 0.4);
    --dm-danger-soft: rgba(229, 85, 85, 0.15);
    --dm-danger-text: #f59a9a;
    --dm-danger-border: rgba(229, 85, 85, 0.45);
    --dm-warning-soft: rgba(245, 158, 11, 0.15);
    --dm-warning-text: #f5c26b;
    --dm-warning-border: rgba(245, 158, 11, 0.45);

    /* theme variables from style.css */
    --white-color: var(--dm-bg);
    --grey-color: var(--dm-surface-2);
    --dark-color: var(--dm-text);
    --secondary-color: var(--dm-text-2);
  }

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

  h1, h2, h3, h4, h5, h6 { color: var(--dm-text); }

  #pt-loading { background: var(--dm-bg); }
  /* loading.gif has an opaque white background: invert it (white → black, hues kept)
     and blend with `lighten` so the black drops out into the page background. */
  #pt-loading img[src*="loading.gif"] { filter: invert(1) hue-rotate(180deg); mix-blend-mode: lighten; }
  /* Cart "processing" overlay (style_.min.css uses a light gray veil) */
  .overlay-pago { background-color: rgba(13, 23, 36, 0.6); }

  /* Bootstrap surfaces */
  .card, .modal-content, .dropdown-menu, .list-group-item, .popover {
    background-color: var(--dm-surface);
    color: var(--dm-text-2);
    border-color: var(--dm-border);
  }
  .dropdown-item { color: var(--dm-text-2); }
  .dropdown-item:hover, .dropdown-item:focus { background-color: var(--dm-surface-2); color: var(--dm-text); }
  .modal-header, .modal-footer, hr { border-color: var(--dm-border); }
  .close { color: var(--dm-text); text-shadow: none; }
  .table { color: var(--dm-text-2); }
  .table th, .table td, .table thead th { border-color: var(--dm-border); }
  .bg-white, .bg-light { background-color: var(--dm-surface) !important; }
  .text-dark { color: var(--dm-text) !important; }
  .text-muted { color: var(--dm-text-3) !important; }

  /* Form controls */
  .form-control, .custom-select, select, textarea,
  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="submit"]):not([type="button"]) {
    background-color: var(--dm-surface);
    color: var(--dm-text);
    border-color: var(--dm-border-strong);
  }
  .form-control:focus { background-color: var(--dm-surface); color: var(--dm-text); }
  .form-control:disabled, .form-control[readonly] { background-color: var(--dm-surface-2); }
  .form-control::placeholder, input::placeholder, textarea::placeholder { color: var(--dm-text-3); }
  .input-group-text { background-color: var(--dm-surface-2); color: var(--dm-text-2); border-color: var(--dm-border-strong); }
  input:-webkit-autofill, input:-webkit-autofill:hover, input:-webkit-autofill:focus {
    -webkit-text-fill-color: var(--dm-text);
    -webkit-box-shadow: 0 0 0 1000px var(--dm-surface) inset;
  }

  /* bootstrap-select */
  .bootstrap-select > .dropdown-toggle, .bootstrap-select .btn-light {
    background-color: var(--dm-surface);
    color: var(--dm-text);
    border-color: var(--dm-border-strong);
  }
  .bootstrap-select .dropdown-menu li a { color: var(--dm-text-2); }
  .bootstrap-select .dropdown-menu li a:hover,
  .bootstrap-select .dropdown-menu li.selected a { background-color: var(--dm-surface-2); color: var(--dm-text); }
  .bootstrap-select .bs-searchbox .form-control { background-color: var(--dm-surface-2); }
  .card-checkbox .dropdown-item.active, .dropdown-item:active {
    color: var(--dm-accent-text) !important;
    background-color: var(--dm-accent-soft) !important;
  }
  .select-btn-2 { background: var(--dm-surface) !important; color: var(--dm-text); }
  .select-btn-2:hover, .select-btn-2:active, .select-btn-2:focus { color: var(--dm-text) !important; }

  /* Radio / checkbox lists (filter.css) */
  .cd-filter-block .checkbox-label, .cd-filter-block .radio-label { color: var(--dm-text); }
  .cd-filter-block h4 { color: var(--dm-text) !important; }
  .cd-filter-block .checkbox-label::before, .cd-filter-block .radio-label::before {
    border-color: var(--dm-text-3) !important;
    background-color: var(--dm-surface);
  }
  .cd-filter-block input[type=radio]:checked + label::before,
  .cd-filter-block input[type=checkbox]:checked + label::before { background-color: #3696ce; }

  /* Global template helpers (style_.min.css) */
  .card-new { background-color: var(--dm-surface); }
  .card-checkbox .card-input { background: var(--dm-surface); }
  .card-checkbox .card-input-element:checked + .card-input { background-color: var(--dm-accent-soft); }
  #order-standard_cart .view-cart-items .item { background-color: var(--dm-surface); }
  #order-standard_cart .view-cart-items .item:nth-child(even) { background-color: var(--dm-surface-2); }
  #order-standard_cart .btn-remove-from-cart { color: var(--dm-text-2); }
  .input-white-custom { background: var(--dm-surface) !important; }

  /* vue-password-strength-meter */
  body .Password__strength-meter { background: var(--dm-border-strong); }
  body .Password__strength-meter:before, body .Password__strength-meter:after { border-color: var(--dm-bg); }

  /* vue-js-modal */
  .vm--modal { background-color: var(--dm-surface); color: var(--dm-text-2); }

  /* v-tooltip */
  .tooltip .tooltip-inner { background: var(--dm-surface-2); color: var(--dm-text); }

  /* Logos drawn in dark ink on transparent backgrounds */
  img[src*="logo_negro"] { filter: invert(1) hue-rotate(180deg) brightness(1.1); }
}