/* ==========================================================================
   ТЕМНА ТЕМА (dark) — перевизначення дизайн-токенів теми Industrial Tools
   Активується класом .theme-dark на <html> (перемикач у топ-барі)
   ========================================================================== */

html.theme-dark {
  color-scheme: dark;

  --brand:        #ff9d3c;
  --brand-dark:   #e57a14;
  --brand-deep:   #ffb15e;
  --ink:          #e8edf4;
  --ink-2:        #131922;
  --ink-3:        #1c2431;
  --paper:        #161d27;
  --steel:        #9aa7b8;
  --muted:        #7f8ca0;
  --line:         #242e3c;
  --bg-soft:      #0e141c;
  --shadow-sm:    0 2px 6px rgba(0,0,0,0.35);
  --shadow-md:    0 8px 24px rgba(0,0,0,0.45);
  --shadow-lg:    0 16px 40px rgba(0,0,0,0.55);

  /* Bootstrap overrides */
  --bs-body-bg:               var(--bg-soft);
  --bs-body-color:            var(--ink);
  --bs-emphasis-color:        var(--ink);
  --bs-secondary-color:       var(--muted);
  --bs-border-color:          var(--line);
  --bs-link-color:            var(--brand);
  --bs-link-hover-color:      var(--brand-deep);
  --bs-dropdown-bg:           var(--paper);
  --bs-dropdown-link-color:   var(--ink);
  --bs-dropdown-link-hover-color: var(--ink);
  --bs-dropdown-link-hover-bg:    var(--ink-3);
  --bs-modal-bg:              var(--paper);
  --bs-table-bg:              transparent;
  --bs-table-striped-bg:      var(--ink-3);
  --bs-tooltip-bg:            var(--ink-2);
  --bs-pagination-bg:         var(--paper);
  --bs-pagination-border-color: var(--line);
  --bs-pagination-color:      var(--ink);
  --bs-pagination-hover-bg:   var(--ink-3);
  --bs-pagination-hover-border-color: var(--line);
}

/* Білі блоки теми -> темні */
html.theme-dark .card,
html.theme-dark .panel,
html.theme-dark .list-group-item,
html.theme-dark .dropdown-menu,
html.theme-dark .product-thumb,
html.theme-dark .product-thumb .image,
html.theme-dark .breadcrumb,
html.theme-dark #tab-description,
html.theme-dark #tab-specification,
html.theme-dark .thumbnail,
html.theme-dark .modal-content,
html.theme-dark .offcanvas,
html.theme-dark .toast {
  background-color: var(--paper);
  color: var(--ink);
  border-color: var(--line);
}

/* Пошук */
html.theme-dark #search .input-group,
html.theme-dark #search .form-control-lg {
  background: var(--paper);
  color: var(--ink);
}
html.theme-dark #search .input-group::placeholder,
html.theme-dark #search .form-control-lg::placeholder { color: var(--muted); }

/* Форми та інпути */
html.theme-dark .form-control,
html.theme-dark .form-select,
html.theme-dark .form-control-lg,
html.theme-dark .input-group-text,
html.theme-dark .input-group .form-control {
  background-color: var(--paper);
  color: var(--ink);
  border-color: var(--line);
}
html.theme-dark select.form-select option { background-color: var(--ink-2); color: var(--ink); }
html.theme-dark .form-control:focus,
html.theme-dark .form-select:focus {
  background-color: var(--paper);
}

/* Кнопки */
html.theme-dark .btn-light {
  background: var(--paper);
  color: var(--ink);
  border-color: var(--line);
}
html.theme-dark .btn-light:hover { background: var(--ink-3); }
html.theme-dark .btn-outline-secondary { color: var(--muted); border-color: var(--line); }

/* Текстові класи Bootstrap, що лишились світлими */
html.theme-dark .bg-white  { background-color: var(--paper) !important; }
html.theme-dark .bg-light  { background-color: var(--ink-3) !important; }
html.theme-dark .text-dark { color: var(--ink) !important; }
html.theme-dark .text-muted { color: var(--muted) !important; }
html.theme-dark .text-secondary { color: var(--muted) !important; }

/* Зображення в product-thumb мають білий подпіг (pixel-art фон) — за потреби нічого не міняємо, залишаємо фон блоку */

/* Товарні картки */
html.theme-dark .product-thumb .description h4 a { color: var(--ink); }
html.theme-dark .product-thumb .button button {
  background: var(--ink-3);
  color: var(--ink);
  border-color: var(--line);
}
html.theme-dark .product-thumb .button button:hover { background: var(--brand); color: #fff; }

/* Таби */
html.theme-dark #product .nav-tabs .nav-link.active {
  background: var(--paper);
  color: var(--brand-deep);
  border-color: var(--line) var(--line) var(--paper);
}

/* Таблиці */
html.theme-dark .table { color: var(--ink); --bs-table-bg: transparent; }
html.theme-dark .table-striped > tbody > tr:nth-of-type(odd) > * { --bs-table-accent-bg: var(--ink-3); }

/* Дропменю */
html.theme-dark .dropdown-item { color: var(--ink); }
html.theme-dark .dropdown-item:hover,
html.theme-dark .dropdown-item:focus { background: var(--ink-3); color: var(--ink); }

/* Топ-бар: текст та кнопка перемикача */
html.theme-dark #top a,
html.theme-dark #top .dropdown > a,
html.theme-dark #top .dropdown > span { color: #bfc9d8 !important; }
html.theme-dark #top a:hover { color: #fff !important; }

/* Пагінація — дод. темні стани */
html.theme-dark .pagination .page-link { background: var(--paper); color: var(--ink); border-color: var(--line); }
html.theme-dark .pagination .page-link:hover { background: var(--ink-3); color: var(--brand-deep); border-color: var(--brand); }

/* Alert / badge на світлому Bootstrap-фоні */
html.theme-dark .alert { background-color: var(--ink-3); color: var(--ink); border-color: var(--line); }
html.theme-dark .badge.bg-light,
html.theme-dark .badge.bg-secondary { background-color: var(--ink-3) !important; color: var(--ink) !important; }

/* Стрічки прокрутки */
html.theme-dark ::-webkit-scrollbar { width: 12px; height: 12px; }
html.theme-dark ::-webkit-scrollbar-track { background: #0e141c; }
html.theme-dark ::-webkit-scrollbar-thumb { background: #2a3444; border-radius: 6px; }

/* Автозаповнення браузера */
html.theme-dark input:-webkit-autofill {
  -webkit-box-shadow: 0 0 0 1000px var(--paper) inset;
  -webkit-text-fill-color: var(--ink);
}

/* Меню — матове скло в темній темі */
html.theme-dark #menu {
  background: rgba(18, 24, 34, 0.72) !important;
  border-color: rgba(255,255,255,0.08);
  border-bottom-color: rgba(255,157,60,0.45);
}