/* ==========================================================================
   Marketplace – dark mode
   Activated by `body.dark-mode` (toggled in static/js/global.js).
   Loaded after main.css on every marketplace template.
   ========================================================================== */

body.dark-mode {
  --mp-surface: #1e1e1e;
  --mp-surface-2: #262626;
  --mp-surface-3: #2d2d2d;
  --mp-border: #333;
  --mp-text: #e4e4e4;
  --mp-text-soft: #b8bfba;
  --mp-accent: #52b788;
  --mp-accent-strong: #74c69d;

  /* Override the detail page's custom properties */
  --hl-border: rgba(255, 255, 255, 0.10);
  --hl-shadow: 0 1px 2px rgba(0, 0, 0, 0.4), 0 6px 16px rgba(0, 0, 0, 0.35);
  --hl-green: #52b788;

  /* Bootstrap 5.3 variables used by breadcrumbs / modals / tables / lists */
  --bs-breadcrumb-divider-color: #777;
  --bs-body-color: var(--mp-text);
  --bs-border-color: var(--mp-border);
}

/* ---------- Generic Bootstrap surfaces ---------- */
body.dark-mode .bg-white,
body.dark-mode .card-header.bg-white {
  background-color: var(--mp-surface) !important;
  border-color: var(--mp-border) !important;
  color: var(--mp-text);
}
body.dark-mode .bg-light {
  background-color: var(--mp-surface-2) !important;
  color: var(--mp-text);
}
body.dark-mode .border,
body.dark-mode .border-bottom,
body.dark-mode .border-top {
  border-color: var(--mp-border) !important;
}
body.dark-mode hr { border-color: #444; }
body.dark-mode .shadow-sm,
body.dark-mode .shadow { box-shadow: 0 4px 14px rgba(0, 0, 0, 0.45) !important; }

/* Bootstrap's .text-dark is !important – keep dark text only on light-coloured badges */
body.dark-mode .text-dark:not(.badge) { color: var(--mp-text) !important; }
body.dark-mode .badge.bg-light.text-dark,
body.dark-mode .badge.bg-light.text-secondary,
body.dark-mode .badge.bg-light.text-muted,
body.dark-mode .badge.bg-white.text-muted {
  background-color: var(--mp-surface-3) !important;
  color: var(--mp-text-soft) !important;
  border-color: #444 !important;
}
body.dark-mode .text-secondary:not(.badge) { color: var(--mp-text-soft) !important; }
body.dark-mode .text-success:not(.badge):not(.btn) { color: var(--mp-accent) !important; }
body.dark-mode .text-primary { color: #6ea8fe !important; }
body.dark-mode .badge.bg-success-subtle {
  background-color: rgba(82, 183, 136, 0.15) !important;
  color: var(--mp-accent-strong) !important;
  border-color: rgba(82, 183, 136, 0.35) !important;
}
body.dark-mode h1, body.dark-mode h2, body.dark-mode h3,
body.dark-mode h4, body.dark-mode h5, body.dark-mode h6 { color: inherit; }

/* ---------- Forms ---------- */
body.dark-mode .form-control,
body.dark-mode .form-select,
body.dark-mode .input-group-text {
  background-color: var(--mp-surface-2);
  border-color: #444;
  color: #f1f1f1;
}
body.dark-mode .form-select {
  --bs-form-select-bg-img: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23bbbbbb' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
}
body.dark-mode .form-control:focus,
body.dark-mode .form-select:focus {
  background-color: var(--mp-surface-3);
  border-color: var(--mp-accent);
  color: #fff;
  box-shadow: 0 0 0 0.2rem rgba(82, 183, 136, 0.25);
}
body.dark-mode .form-control:disabled,
body.dark-mode .form-control[readonly],
body.dark-mode .form-select:disabled {
  background-color: #222 !important;
  color: #999;
}
body.dark-mode .form-select option { background-color: var(--mp-surface-2); color: #f1f1f1; }
body.dark-mode .form-select-custom { border-color: #444; }
body.dark-mode .form-check-input {
  background-color: var(--mp-surface-3);
  border-color: #666;
}
body.dark-mode .form-check-input:checked {
  background-color: #2d6a4f;
  border-color: #2d6a4f;
}
body.dark-mode .form-check-label { color: var(--mp-text); }
body.dark-mode .form-text,
body.dark-mode .invalid-feedback + .form-text { color: #999; }
body.dark-mode input[type="file"]::file-selector-button {
  background-color: var(--mp-surface-3);
  color: var(--mp-text);
  border-color: #444;
}
body.dark-mode .form-range::-webkit-slider-runnable-track { background-color: #444; }

/* ---------- Buttons ---------- */
body.dark-mode .btn-outline-success { color: var(--mp-accent); border-color: var(--mp-accent); }
body.dark-mode .btn-outline-success:hover { background-color: #2d6a4f; border-color: #2d6a4f; color: #fff; }
body.dark-mode .btn-outline-primary { color: #6ea8fe; border-color: #6ea8fe; }
body.dark-mode .btn-outline-primary:hover { background-color: #0d6efd; color: #fff; }
body.dark-mode .btn-outline-danger { color: #ea868f; border-color: #ea868f; }
body.dark-mode .btn-outline-danger:hover { background-color: #dc3545; border-color: #dc3545; color: #fff; }
body.dark-mode .btn-secondary { background-color: #3a3a3a; border-color: #3a3a3a; color: #eee; }
body.dark-mode .btn-close { filter: invert(1) grayscale(100%) brightness(200%); }

/* ---------- Cards / lists / tables / accordion / alerts ---------- */
body.dark-mode .card-header,
body.dark-mode .card-footer {
  background-color: var(--mp-surface-2);
  border-color: var(--mp-border);
}
body.dark-mode .card.card-body.bg-light { background-color: var(--mp-surface-2) !important; }
body.dark-mode .list-group-item {
  background-color: var(--mp-surface);
  border-color: var(--mp-border);
  color: var(--mp-text);
}
body.dark-mode .list-group-item.border-0.border-bottom { border-bottom: 1px solid var(--mp-border) !important; }

body.dark-mode .table { --bs-table-color: var(--mp-text); --bs-table-bg: transparent; --bs-table-border-color: var(--mp-border); }
body.dark-mode .table-hover > tbody > tr:hover > * {
  --bs-table-hover-bg: rgba(255, 255, 255, 0.05);
  color: #fff;
}
body.dark-mode .table-light,
body.dark-mode .table-light > th,
body.dark-mode .table > :not(caption) > .table-light > * {
  --bs-table-bg: var(--mp-surface-2);
  --bs-table-color: var(--mp-text-soft);
  background-color: var(--mp-surface-2);
  color: var(--mp-text-soft);
}

body.dark-mode .accordion { --bs-accordion-bg: var(--mp-surface); --bs-accordion-border-color: var(--mp-border); --bs-accordion-color: var(--mp-text); }
body.dark-mode .accordion-item { background-color: var(--mp-surface); border-color: var(--mp-border); }
body.dark-mode .accordion-button {
  background-color: var(--mp-surface-2) !important;
  color: var(--mp-text);
}
body.dark-mode .accordion-button:not(.collapsed) { color: var(--mp-accent-strong); box-shadow: inset 0 -1px 0 var(--mp-border); }
body.dark-mode .accordion-button::after { filter: invert(1) brightness(1.5); }
body.dark-mode .accordion-body { background-color: var(--mp-surface); }

body.dark-mode .alert-success { background-color: #14352a; border-color: #1f5a44; color: #b7ebd0; }
body.dark-mode .alert-warning { background-color: #3d3216; border-color: #5c4a1a; color: #ffe69c; }
body.dark-mode .alert-danger  { background-color: #3b1d21; border-color: #5c2b31; color: #f1aeb5; }
body.dark-mode .alert-light   { background-color: var(--mp-surface-2); border-color: var(--mp-border); color: var(--mp-text); }

body.dark-mode .page-link { background-color: var(--mp-surface); border-color: var(--mp-border); color: var(--mp-accent); }
body.dark-mode .page-link:hover { background-color: var(--mp-surface-3); color: var(--mp-accent-strong); }
body.dark-mode .page-item.active .page-link { background-color: #2d6a4f; border-color: #2d6a4f; color: #fff; }
body.dark-mode .page-item.disabled .page-link { background-color: #1a1a1a; color: #666; }

body.dark-mode .modal-content { background-color: var(--mp-surface); color: var(--mp-text); border-color: var(--mp-border); }
body.dark-mode .modal-header,
body.dark-mode .modal-footer { border-color: var(--mp-border); }

/* ---------- Marketplace list page ---------- */
body.dark-mode .marketplace-filter-panel {
  background: var(--mp-surface);
  border-top-color: #40916c;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
}
body.dark-mode .marketplace-filter-panel .form-label { color: var(--mp-text) !important; }
body.dark-mode .gear-card {
  background: var(--mp-surface);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
}
body.dark-mode .gear-card:hover { box-shadow: 0 10px 24px rgba(0, 0, 0, 0.6); }
body.dark-mode .gear-card .text-dark { color: var(--mp-text) !important; }
body.dark-mode .gear-title { color: #d8f3dc; }
body.dark-mode .gear-location { color: #a0a8a3; }
body.dark-mode .gear-badge-state {
  background: rgba(20, 20, 20, 0.85);
  color: #b7e4c7;
}
body.dark-mode .gear-price { background: #2d6a4f; }
body.dark-mode .gear-card-body .border-top { border-color: var(--mp-border) !important; }

/* ---------- Listing detail page ---------- */
body.dark-mode .breadcrumb-custom a { color: var(--mp-accent); }
body.dark-mode .breadcrumb-custom a:hover { color: var(--mp-accent-strong); }

body.dark-mode .product-gallery {
  background: var(--mp-surface);
}
body.dark-mode .product-gallery img { box-shadow: 0 12px 28px rgba(0, 0, 0, 0.55); }
body.dark-mode .gallery-thumb { outline-color: rgba(255, 255, 255, 0.12); }

body.dark-mode .product-info-box,
body.dark-mode .description-box,
body.dark-mode .author-card {
  background: var(--mp-surface);
  border-color: var(--hl-border);
  color: var(--mp-text);
}
body.dark-mode .product-title { color: #f1f5f3; }
body.dark-mode .product-price { color: var(--mp-accent); }
body.dark-mode .product-meta-item { color: #dee2e6; }
body.dark-mode .product-meta-label { color: #9aa29d; }
body.dark-mode .description-text { color: #c4ccc7; }
body.dark-mode .tag-pill {
  background-color: rgba(82, 183, 136, 0.12) !important;
  color: var(--mp-accent-strong) !important;
  border-color: rgba(82, 183, 136, 0.35) !important;
}
body.dark-mode .tag-pill:hover {
  background-color: #2d6a4f !important;
  color: #fff !important;
}
body.dark-mode .seller-avatar { box-shadow: 0 0 0 3px var(--mp-surface), 0 0 0 4px rgba(82, 183, 136, 0.5); }
body.dark-mode .safety-note { border-top-color: var(--hl-border); }
body.dark-mode .rating-stars i { text-shadow: none; }

/* ---------- Admin pages ---------- */
body.dark-mode .card.border-top.border-warning { border-top-color: #ffc107 !important; }
body.dark-mode .card.border-top.border-success { border-top-color: #40916c !important; }
body.dark-mode .card-title a.text-dark { color: var(--mp-text) !important; }