/* app/static/theme.css  (ЗАМЕНИ ФАЙЛ ПОЛНОСТЬЮ) */

/* ---------------------------
   THEME TOKENS
----------------------------*/
:root{
  --bg: #ffffff;
  --text: #111827;
  --muted: #6b7280;
  --muted2: #9ca3af;

  --card: #ffffff;
  --card2: #f9fafb;
  --border: #e5e7eb;

  --accent: #2563eb;
  --accent-soft: rgba(37,99,235,0.16);

  --topbar-bg: #ffffff;
  --topbar-border: rgba(17,24,39,0.10);

  --btn-bg: #ffffff;
  --btn-bg2: #f3f4f6;
  --btn-text: var(--text);

  --hover: rgba(0,0,0,0.06);

  --overlay: rgba(17,24,39,0.55);
  --shadow: 0 12px 30px rgba(0,0,0,0.18);

  --tooltip-bg: #111827;
  --tooltip-text: #ffffff;

  --table-head: #f9fafb;
  --table-row: #ffffff;
  --table-row-alt: #fcfcfd;

  --scroll-track: rgba(0,0,0,0.06);
  --scroll-thumb: rgba(0,0,0,0.22);
  --scroll-thumb-hover: rgba(0,0,0,0.32);
}

html[data-theme="dark"]{
  /* requested base */
  --bg: rgb(28,37,52); /* #1c2534 */
  --text: #e5e7eb;
  --muted: #b6c0cf;
  --muted2: #94a3b8;

  --card: #111a2b;
  --card2: #0b1220;
  --border: #23324b;

  --accent: #60a5fa;
  --accent-soft: rgba(96,165,250,0.18);

  /* topbar not “blocky” */
  --topbar-bg: var(--bg);
  --topbar-border: rgba(255,255,255,0.06);

  /* glass buttons */
  --btn-bg: rgba(255,255,255,0.06);
  --btn-bg2: rgba(255,255,255,0.10);
  --btn-text: var(--text);

  --hover: rgba(255,255,255,0.10);

  --overlay: rgba(0,0,0,0.60);
  --shadow: 0 16px 38px rgba(0,0,0,0.55);

  --tooltip-bg: #0b1220;
  --tooltip-text: #e5e7eb;

  --table-head: #0b1220;
  --table-row: #111a2b;
  --table-row-alt: #0f1729;

  --scroll-track: rgba(255,255,255,0.06);
  --scroll-thumb: rgba(255,255,255,0.22);
  --scroll-thumb-hover: rgba(255,255,255,0.34);
}

/* ---------------------------
   GLOBAL BASE
----------------------------*/
html, body{ height:100%; }
body{ background: var(--bg); color: var(--text); }
a{ color: inherit; }
h1,h2,h3,h4,h5,h6{ color: var(--text); }
hr{ border-color: var(--border); }
.muted{ color: var(--muted) !important; }

/* ---------------------------
   SCROLLBARS (pretty)
----------------------------*/
*{ scrollbar-width: thin; scrollbar-color: var(--scroll-thumb) var(--scroll-track); }
::-webkit-scrollbar{ width:10px; height:10px; }
::-webkit-scrollbar-track{ background:var(--scroll-track); border-radius:999px; }
::-webkit-scrollbar-thumb{
  background:var(--scroll-thumb);
  border-radius:999px;
  border:2px solid var(--scroll-track);
}
::-webkit-scrollbar-thumb:hover{ background:var(--scroll-thumb-hover); }

/* ---------------------------
   TOPBAR
----------------------------*/
.topbar{
  background: var(--topbar-bg) !important;
  border-bottom: 1px solid var(--topbar-border) !important;
}

/* ---------------------------
   BUTTONS / CONTROLS
----------------------------*/
button, .btn, .btnSm, .btnDark, .btnDanger, .nav-btn{ color: var(--btn-text); }
.btn, .btnSm, button, .nav-btn{
  background: var(--btn-bg) !important;
  border: 1px solid var(--border) !important;
}
.btn.primary, .btnPrimary, button.primary{
  background: var(--accent) !important;
  border-color: var(--accent) !important;
  color:#fff !important;
}
.btnDanger{ background:#ef4444 !important; border-color:#ef4444 !important; color:#fff !important; }
html[data-theme="dark"] .btnDark,
html[data-theme="dark"] button.btnDark,
html[data-theme="dark"] .btn.dark{
  background: var(--btn-bg2) !important;
  border-color: var(--border) !important;
  color: var(--text) !important;
}

/* dash pagination / select all etc */
html[data-theme="dark"] .pagination a,
html[data-theme="dark"] .pagination button,
html[data-theme="dark"] .pager a,
html[data-theme="dark"] .pager button,
html[data-theme="dark"] .pageBtn,
html[data-theme="dark"] .btnPage,
html[data-theme="dark"] .btnCheck,
html[data-theme="dark"] .btnUncheck{
  background: var(--btn-bg) !important;
  border-color: var(--border) !important;
  color: var(--text) !important;
}

/* ---------------------------
   INPUTS
----------------------------*/
input, select, textarea{
  background: var(--card) !important;
  color: var(--text) !important;
  border-color: var(--border) !important;
}
input::placeholder, textarea::placeholder{ color: var(--muted2); }

/* prettier file inputs */
input[type="file"]{
  color: var(--text) !important;
  border: 1px solid var(--border) !important;
  background: var(--card) !important;
  border-radius: 12px !important;
  padding: 8px 10px !important;
}
input[type="file"]::file-selector-button{
  margin-right: 10px;
  border: 1px solid var(--border);
  background: var(--btn-bg);
  color: var(--text);
  padding: 8px 12px;
  border-radius: 10px;
  cursor: pointer;
  font-weight: 700;
}
input[type="file"]::file-selector-button:hover{ background: var(--btn-bg2); }
input[type="file"]::-webkit-file-upload-button{
  margin-right: 10px;
  border: 1px solid var(--border);
  background: var(--btn-bg);
  color: var(--text);
  padding: 8px 12px;
  border-radius: 10px;
  cursor: pointer;
  font-weight: 700;
}
input[type="file"]::-webkit-file-upload-button:hover{ background: var(--btn-bg2); }

/* ---------------------------
   MODALS
----------------------------*/
.modalBack, .modalOverlay{ background: var(--overlay) !important; }
.modal, .modalBox, .modalBody, .modalCard, .modalWin{
  background: var(--card) !important;
  color: var(--text) !important;
  border: 1px solid var(--border) !important;
  box-shadow: var(--shadow) !important;
}
.modalHead, .modalHeader, .modalFoot, .modalFooter{
  background: var(--card) !important;
  color: var(--text) !important;
  border-color: var(--border) !important;
}
.modalClose{ color: var(--muted) !important; }

/* ---------------------------
   TABLES (no white borders)
----------------------------*/
table{ color: var(--text); }
table, thead, tbody, tr, th, td{ border-color: var(--border) !important; }
table th{
  background: var(--table-head) !important;
  color: var(--text) !important;
}
table td{
  background: var(--table-row) !important;
  color: var(--text) !important;
}
table tr:nth-child(even) td{ background: var(--table-row-alt) !important; }
html[data-theme="dark"] table,
html[data-theme="dark"] .tableWrap,
html[data-theme="dark"] .tbl,
html[data-theme="dark"] .itemsTable{
  box-shadow:none !important;
  outline:none !important;
}

/* ---------------------------
   ✅ WHITE BLOCKS FIX (all tabs)
----------------------------*/
html[data-theme="dark"] .card,
html[data-theme="dark"] .panel,
html[data-theme="dark"] .box,
html[data-theme="dark"] .wrap,
html[data-theme="dark"] .block,
html[data-theme="dark"] .section,
html[data-theme="dark"] .widget,
html[data-theme="dark"] .kpi,
html[data-theme="dark"] .kpiCard,
html[data-theme="dark"] .kpi2,
html[data-theme="dark"] .kpiBox,
html[data-theme="dark"] .summary,
html[data-theme="dark"] .summaryBox,
html[data-theme="dark"] .reportBox,
html[data-theme="dark"] .reportWrap,
html[data-theme="dark"] .filters,
html[data-theme="dark"] .filtersBox,
html[data-theme="dark"] .subtabs,
html[data-theme="dark"] .subtab,
html[data-theme="dark"] .accBody,
html[data-theme="dark"] .accWhHead,
html[data-theme="dark"] .accWhBody,
html[data-theme="dark"] .colItem{
  background: var(--card) !important;
  color: var(--text) !important;
  border-color: var(--border) !important;
}

/* super-aggressive but fast for your project */
html[data-theme="dark"] [class*="card"],
html[data-theme="dark"] [class*="Card"],
html[data-theme="dark"] [class*="panel"],
html[data-theme="dark"] [class*="Panel"],
html[data-theme="dark"] [class*="box"],
html[data-theme="dark"] [class*="Box"],
html[data-theme="dark"] [class*="wrap"],
html[data-theme="dark"] [class*="Wrap"]{
  background: var(--card) !important;
  color: var(--text) !important;
  border-color: var(--border) !important;
}

/* раскрывашки: FBO cabinets / списки складов / etc */
html[data-theme="dark"] details,
html[data-theme="dark"] details > summary{
  background: var(--card) !important;
  color: var(--text) !important;
  border-color: var(--border) !important;
}

/* --- FIX: Returns summary text invisible --- */
html[data-theme="dark"] .kpi2,
html[data-theme="dark"] .kpi2 *{
  color: var(--text) !important;
}
html[data-theme="dark"] .kpi2 .subline,
html[data-theme="dark"] .kpi2 .subline *{
  color: var(--muted) !important;
}

/* --- FIX: white borders in lists/warehouses inside FBO / supplies --- */
html[data-theme="dark"] ul li,
html[data-theme="dark"] ol li{
  border-color: var(--border) !important;
}
html[data-theme="dark"] [style*="border-bottom: 1px solid #e5e7eb"],
html[data-theme="dark"] [style*="border-bottom:1px solid #e5e7eb"],
html[data-theme="dark"] [style*="border-top: 1px solid #e5e7eb"],
html[data-theme="dark"] [style*="border-top:1px solid #e5e7eb"],
html[data-theme="dark"] [style*="border: 1px solid #e5e7eb"],
html[data-theme="dark"] [style*="border:1px solid #e5e7eb"],
html[data-theme="dark"] [style*="border: 1px solid white"],
html[data-theme="dark"] [style*="border:1px solid white"],
html[data-theme="dark"] [style*="border: 1px solid #fff"],
html[data-theme="dark"] [style*="border:1px solid #fff"]{
  border-color: var(--border) !important;
}

/* --- FIX: column picker (checkbox list) header not visible --- */
html[data-theme="dark"] .colPick,
html[data-theme="dark"] .colPicker,
html[data-theme="dark"] .colsBox,
html[data-theme="dark"] .colsMenu,
html[data-theme="dark"] .colsPopover,
html[data-theme="dark"] [id*="colPick"],
html[data-theme="dark"] [id*="cols"],
html[data-theme="dark"] [class*="colPick"],
html[data-theme="dark"] [class*="cols"]{
  background: var(--card) !important;
  color: var(--text) !important;
  border-color: var(--border) !important;
}
html[data-theme="dark"] .colPick label,
html[data-theme="dark"] .colPicker label,
html[data-theme="dark"] [id*="colPick"] label,
html[data-theme="dark"] [id*="cols"] label{
  color: var(--text) !important;
}

/* sticky headers (часто у тебя белый фон/невидимый текст) */
html[data-theme="dark"] [style*="position:sticky"],
html[data-theme="dark"] [style*="position: sticky"]{
  background: var(--table-head) !important;
  color: var(--text) !important;
  border-color: var(--border) !important;
}

/* ---------------------------
   ✅ ACTIONS: cabinet picker text was black on dark + solid background
----------------------------*/
html[data-theme="dark"] .cabWrap,
html[data-theme="dark"] .cabBox,
html[data-theme="dark"] .cabPanel,
html[data-theme="dark"] .cabinetWrap,
html[data-theme="dark"] .cabinetBox,
html[data-theme="dark"] [class*="cab"],
html[data-theme="dark"] [id*="cab"]{
  background-image: none !important;
  background: var(--card) !important;
  border-color: var(--border) !important;
  color: var(--text) !important;
}
html[data-theme="dark"] .cabBtn,
html[data-theme="dark"] .cabinetBtn,
html[data-theme="dark"] [class*="cab"] button,
html[data-theme="dark"] [id*="cab"] button{
  background: var(--btn-bg) !important;
  border-color: var(--border) !important;
  color: var(--text) !important;
}
html[data-theme="dark"] .cabBtn.active,
html[data-theme="dark"] .cabinetBtn.active,
html[data-theme="dark"] [class*="cab"] button.active,
html[data-theme="dark"] [class*="cab"] button.sel,
html[data-theme="dark"] [class*="cab"] button.on{
  background: var(--accent) !important;
  border-color: var(--accent) !important;
  color:#fff !important;
}

/* ---------------------------
   ✅ INLINE STYLES FIX (background/foreground)
----------------------------*/
html[data-theme="dark"] [style*="background:#fff"],
html[data-theme="dark"] [style*="background: #fff"],
html[data-theme="dark"] [style*="background:#ffffff"],
html[data-theme="dark"] [style*="background: #ffffff"],
html[data-theme="dark"] [style*="background:white"],
html[data-theme="dark"] [style*="background: white"],
html[data-theme="dark"] [style*="background:rgb(255"],
html[data-theme="dark"] [style*="background: rgb(255"]{
  background: var(--card) !important;
  background-image: none !important;
}
html[data-theme="dark"] [style*="color:#111827"],
html[data-theme="dark"] [style*="color: #111827"],
html[data-theme="dark"] [style*="color:#000"],
html[data-theme="dark"] [style*="color: #000"],
html[data-theme="dark"] [style*="color:black"],
html[data-theme="dark"] [style*="color: black"],
html[data-theme="dark"] [style*="color:rgb(0"],
html[data-theme="dark"] [style*="color: rgb(0"]{
  color: var(--text) !important;
}
html[data-theme="dark"] [style*="color:#6b7280"],
html[data-theme="dark"] [style*="color: #6b7280"]{
  color: var(--muted) !important;
}

html[data-theme="dark"] details > summary,
html[data-theme="dark"] details > summary *{
  color: var(--text) !important;
}

html[data-theme="dark"] details > summary{
  background: var(--card) !important;
  border: 1px solid var(--border) !important;
  box-shadow: none !important;
}

/* если summary внутри имеет белый фон/борд через inline */
html[data-theme="dark"] details > summary[style*="background"],
html[data-theme="dark"] details > summary[style*="border"]{
  background: var(--card) !important;
  border-color: var(--border) !important;
}

/* 2) Любые “кабинетные” блоки по именованию (очень вероятно попадает в твой FBO) */
html[data-theme="dark"] [class*="cabinet"],
html[data-theme="dark"] [class*="Cabinet"],
html[data-theme="dark"] [id*="cabinet"],
html[data-theme="dark"] [id*="Cabinet"],
html[data-theme="dark"] [class*="cab"],
html[data-theme="dark"] [id*="cab"]{
  background: var(--card) !important;
  color: var(--text) !important;
  border-color: var(--border) !important;
}

/* 3) Белые борды внутри раскрытия (склады/списки/строки):
   убиваем любые #fff / white / светло-серые границы */
html[data-theme="dark"] [style*="border: 1px solid #fff"],
html[data-theme="dark"] [style*="border:1px solid #fff"],
html[data-theme="dark"] [style*="border: 1px solid white"],
html[data-theme="dark"] [style*="border:1px solid white"],
html[data-theme="dark"] [style*="border-color:#fff"],
html[data-theme="dark"] [style*="border-color: #fff"],
html[data-theme="dark"] [style*="border-color:white"],
html[data-theme="dark"] [style*="border-color: white"],
html[data-theme="dark"] [style*="border: 1px solid #f3f4f6"],
html[data-theme="dark"] [style*="border:1px solid #f3f4f6"],
html[data-theme="dark"] [style*="border: 1px solid #e5e7eb"],
html[data-theme="dark"] [style*="border:1px solid #e5e7eb"],
html[data-theme="dark"] [style*="border-bottom: 1px solid #fff"],
html[data-theme="dark"] [style*="border-bottom:1px solid #fff"],
html[data-theme="dark"] [style*="border-bottom: 1px solid white"],
html[data-theme="dark"] [style*="border-bottom:1px solid white"],
html[data-theme="dark"] [style*="border-bottom: 1px solid #e5e7eb"],
html[data-theme="dark"] [style*="border-bottom:1px solid #e5e7eb"],
html[data-theme="dark"] [style*="border-top: 1px solid #fff"],
html[data-theme="dark"] [style*="border-top:1px solid #fff"],
html[data-theme="dark"] [style*="border-top: 1px solid white"],
html[data-theme="dark"] [style*="border-top:1px solid white"],
html[data-theme="dark"] [style*="border-top: 1px solid #e5e7eb"],
html[data-theme="dark"] [style*="border-top:1px solid #e5e7eb"]{
  border-color: var(--border) !important;
}

/* 4) Если “кабинетные карточки” сделаны как list-row/div с рамкой:
   прибиваем outline/shadow */
html[data-theme="dark"] details,
html[data-theme="dark"] details *{
  outline-color: var(--border) !important;
}
html[data-theme="dark"] details,
html[data-theme="dark"] details > summary,
html[data-theme="dark"] [class*="cab"],
html[data-theme="dark"] [id*="cab"]{
  box-shadow: none !important;
}

/* сам summary (Котоград / ID: 1) */
html[data-theme="dark"] details > summary{
  background: var(--card) !important;
  color: var(--text) !important;
  border:1px solid var(--border) !important;
}

/* текст внутри summary */
html[data-theme="dark"] details > summary *{
  color: var(--text) !important;
}

/* раскрытое тело */
html[data-theme="dark"] details{
  background: var(--card) !important;
  border:1px solid var(--border) !important;
}

/* все вложенные блоки складов */
html[data-theme="dark"] details div,
html[data-theme="dark"] details section{
  background: var(--card) !important;
  color: var(--text) !important;
}

/* убиваем ВСЕ белые борды внутри FBO */
html[data-theme="dark"] details *{
  border-color: var(--border) !important;
  outline-color: var(--border) !important;
  box-shadow:none !important;
}

/* складовые строки */
html[data-theme="dark"] details ul li,
html[data-theme="dark"] details ol li{
  background: var(--card) !important;
  color: var(--text) !important;
  border-color: var(--border) !important;
}

/* inline background:white */
html[data-theme="dark"] details [style*="background"]{
  background: var(--card) !important;
}

/* inline borders */
html[data-theme="dark"] details [style*="border"]{
  border-color: var(--border) !important;
}

/* -----------------------------------------------------
   TABLE BORDERS INSIDE FBO
----------------------------------------------------- */

html[data-theme="dark"] details table,
html[data-theme="dark"] details th,
html[data-theme="dark"] details td{
  background: var(--card) !important;
  color: var(--text) !important;
  border-color: var(--border) !important;
}

/* -----------------------------------------------------
   FORCE CABINET HEADERS (если вдруг не summary)
----------------------------------------------------- */

html[data-theme="dark"] [class*="Cab"],
html[data-theme="dark"] [class*="cab"],
html[data-theme="dark"] [id*="cab"]{
  background: var(--card) !important;
  color: var(--text) !important;
  border-color: var(--border) !important;
}

/* -----------------------------------------------------
   REMOVE WHITE SHADOWS
----------------------------------------------------- */

html[data-theme="dark"] details,
html[data-theme="dark"] details *{
  box-shadow:none !important;
}

/* =====================================================
   FBO – REMOVE ALL INNER WHITE LINES
===================================================== */

html[data-theme="dark"] details *{
  border-color: var(--border) !important;
  outline-color: var(--border) !important;
}

/* bottom / top separators */
html[data-theme="dark"] details *{
  border-top-color: var(--border) !important;
  border-bottom-color: var(--border) !important;
}

/* hr separators */
html[data-theme="dark"] details hr{
  background: var(--border) !important;
  border: none !important;
  height:1px !important;
}

/* row dividers often done via box-shadow */
html[data-theme="dark"] details *{
  box-shadow:none !important;
}

/* list rows */
html[data-theme="dark"] details li{
  border-bottom:1px solid var(--border) !important;
}

/* tables inside */
html[data-theme="dark"] details table tr{
  border-bottom:1px solid var(--border) !important;
}

/* inline styles override */
html[data-theme="dark"] details [style*="border"]{
  border-color: var(--border) !important;
}

/* sometimes they use rgba white */
html[data-theme="dark"] details [style*="rgba(255"]{
  border-color: var(--border) !important;
}

/* summary divider */
html[data-theme="dark"] details > summary{
  border-bottom:1px solid var(--border) !important;
}

/* =====================================================
   FBO WAREHOUSE CARDS: kill white outlines/shadows/lines
   (ДОМОДЕДОВО_РФЦ / Артикулы / Ср. продажи / Открыть)
===================================================== */

/* 1) Убираем белые "рамки" через box-shadow / outline */
html[data-theme="dark"] details *{
  outline: none !important;
  box-shadow: none !important;
}

/* 2) Часто рамку делают через inset shadow (оставляем нашу) */
html[data-theme="dark"] details [style*="box-shadow"],
html[data-theme="dark"] details [class*="shadow"],
html[data-theme="dark"] details [class*="Shadow"]{
  box-shadow: none !important;
}

/* 3) Если рамка через outline */
html[data-theme="dark"] details [style*="outline"],
html[data-theme="dark"] details [class*="outline"],
html[data-theme="dark"] details [class*="Outline"]{
  outline: none !important;
}

/* 4) Псевдоэлементы-разделители (часто белые линии) */
html[data-theme="dark"] details *::before,
html[data-theme="dark"] details *::after{
  border-color: var(--border) !important;
  background-color: transparent !important;
  box-shadow: none !important;
}

/* 5) Жёстко заменяем любые “белые/светло-серые” рамки у складов */
html[data-theme="dark"] details [style*="#fff"],
html[data-theme="dark"] details [style*="white"],
html[data-theme="dark"] details [style*="#e5e7eb"],
html[data-theme="dark"] details [style*="#eef2f7"],
html[data-theme="dark"] details [style*="rgb(255"],
html[data-theme="dark"] details [style*="rgba(255"]{
  border-color: var(--border) !important;
  outline-color: var(--border) !important;
  box-shadow: none !important;
}

/* 6) Если карточка склада — это div с border, делаем единый стиль */
html[data-theme="dark"] details div,
html[data-theme="dark"] details section,
html[data-theme="dark"] details article{
  border-color: var(--border) !important;
}

/* 7) Кнопка "Открыть" внутри складов — рамка/фон */
html[data-theme="dark"] details button,
html[data-theme="dark"] details .btn,
html[data-theme="dark"] details .btnSm,
html[data-theme="dark"] details a.nav-btn{
  background: var(--btn-bg) !important;
  border-color: var(--border) !important;
  color: var(--text) !important;
}

/* 8) Если у складов рамка делается через background-gradient */
html[data-theme="dark"] details [style*="linear-gradient"]{
  background-image: none !important;
  background: var(--card) !important;
}

/* =====================================================
   ULTIMATE FBO WAREHOUSE BORDER KILL
   (если борды "неубиваемые" — обычно это shadow/drop-shadow/::before)
===================================================== */

/* 0) Ограничим область: только во вкладке FBO (обычно /stocks).
   Если у тебя другой путь/контейнер — всё равно сработает через details. */
html[data-theme="dark"] details{
  /* на всякий случай */
  filter: none !important;
}

/* 1) Любая карточка с радиусом (типично у складов) — убираем белую обводку/тень */
html[data-theme="dark"] details *[style*="border-radius"],
html[data-theme="dark"] details *[class*="round"],
html[data-theme="dark"] details *[class*="Round"],
html[data-theme="dark"] details *[class*="radius"],
html[data-theme="dark"] details *[class*="Radius"]{
  border-color: var(--border) !important;
  outline: none !important;
  box-shadow: none !important;
  filter: none !important;
}

/* 2) Убираем drop-shadow (он часто выглядит как белая рамка) */
html[data-theme="dark"] details *{
  filter: none !important;
}

/* 3) Если рамка сделана как 0 0 0 1px #fff / inset … */
html[data-theme="dark"] details *{
  box-shadow: none !important;
}

/* 4) Псевдоэлементы-рамки (очень частая причина) */
html[data-theme="dark"] details *::before,
html[data-theme="dark"] details *::after{
  box-shadow: none !important;
  filter: none !important;
  outline: none !important;
  border-color: var(--border) !important;
}

/* 5) Но иногда белая линия — это background у ::before/::after.
      Поэтому гасим любые "линии" через background-color/gradient */
html[data-theme="dark"] details *::before,
html[data-theme="dark"] details *::after{
  background-image: none !important;
  /* не ставим всем var(--card), чтобы не сломать иконки, только убираем белый */
  background-color: transparent !important;
}

/* 6) Самые вероятные контейнеры складов: li / div с рамкой */
html[data-theme="dark"] details li,
html[data-theme="dark"] details li *{
  border-color: var(--border) !important;
  box-shadow: none !important;
  filter: none !important;
}
html[data-theme="dark"] details div,
html[data-theme="dark"] details section,
html[data-theme="dark"] details article{
  border-color: var(--border) !important;
  box-shadow: none !important;
  filter: none !important;
}

/* 7) Пробиваем конкретно "белые" значения, если они зашиты inline */
html[data-theme="dark"] details [style*="#fff"],
html[data-theme="dark"] details [style*="#ffffff"],
html[data-theme="dark"] details [style*="white"],
html[data-theme="dark"] details [style*="#e5e7eb"],
html[data-theme="dark"] details [style*="#eef2f7"],
html[data-theme="dark"] details [style*="rgb(255"],
html[data-theme="dark"] details [style*="rgba(255"]{
  border-color: var(--border) !important;
  box-shadow: none !important;
  filter: none !important;
  outline: none !important;
}

/* 8) Если "карточка склада" сделана через <summary> внутри вложенного details */
html[data-theme="dark"] details details > summary{
  border: 1px solid var(--border) !important;
  box-shadow: none !important;
  filter: none !important;
}

/* =====================================================
   END ULTIMATE
===================================================== */

/* =========================
   FBO / склады: accWh борды + фон + заголовок
========================= */
html[data-theme="dark"] .accWh{
  border: 1px solid var(--border) !important;
  background: var(--card) !important;
  color: var(--text) !important;
}

html[data-theme="dark"] .accWhHead{
  background: var(--card2) !important;
  border-bottom: 1px solid var(--border) !important;
  color: var(--text) !important;
}

html[data-theme="dark"] .accWhHead .muted{
  color: var(--muted) !important;
}

/* pill’ы в правой части (Артикулы / Ср. продажи / ИТОГО) */
html[data-theme="dark"] .accWh .pill{
  background: rgba(255,255,255,0.06) !important;
  border: 1px solid var(--border) !important;
  color: var(--text) !important;
}

html[data-theme="dark"] .accWh .pillStrong{
  background: rgba(96,165,250,0.16) !important;
  border-color: rgba(96,165,250,0.30) !important;
}

html[data-theme="dark"] .accWh .pill.ok{
  background: rgba(34,197,94,0.16) !important;
  border-color: rgba(34,197,94,0.30) !important;
  color: #d1fae5 !important;
}

/* если внутри accWh есть строки/списки с разделителями */
html[data-theme="dark"] .accWh *{
  border-color: var(--border) !important;
}

/* =====================================================
   RETURNS: summary cards + modal (убрать белые борды/текст)
   returns.html has inline <style>, so we override with !important
===================================================== */

/* подсветки строк таблицы в returns — делаем адекватно для dark */
html[data-theme="dark"] tr.return-row.return-unseen td{
  background: rgba(96,165,250,0.14) !important;
}
html[data-theme="dark"] tr.return-row.util-soon-7 td { background: rgba(245,158,11,0.14) !important; }
html[data-theme="dark"] tr.return-row.util-soon-3 td { background: rgba(239,68,68,0.14) !important; }

/* обертка таблицы (в шаблоне border:1px solid #eee) */
html[data-theme="dark"] [style*="border:1px solid #eee"],
html[data-theme="dark"] [style*="border: 1px solid #eee"]{
  border-color: var(--border) !important;
  background: var(--card) !important;
}

/* ===== SUMMARY CARDS ===== */
html[data-theme="dark"] .sumCard{
  background: var(--card) !important;
  border: 1px solid var(--border) !important;
  color: var(--text) !important;
  box-shadow: none !important;
}
html[data-theme="dark"] .sumCard:hover{
  box-shadow: 0 10px 25px rgba(0,0,0,0.35) !important;
}

html[data-theme="dark"] .sumTitle{
  color: var(--text) !important;
}
html[data-theme="dark"] .sumCount{
  color: var(--text) !important;
  background: rgba(255,255,255,0.06) !important;
  border: 1px solid var(--border) !important;
}

html[data-theme="dark"] .sumBody{
  color: var(--text) !important;
}
html[data-theme="dark"] .sumEmpty{
  color: var(--muted) !important;
}

/* мини-таблица в карточке */
html[data-theme="dark"] .sumMiniRow + .sumMiniRow{
  border-top: 1px solid var(--border) !important; /* было #eef2f7 */
}
html[data-theme="dark"] .sumMiniCab{
  color: var(--text) !important; /* название кабинета */
}
html[data-theme="dark"] .sumMiniArts{
  color: var(--text) !important;
}

html[data-theme="dark"] .sumMiniArt{
  border: 1px solid var(--border) !important;
  background: rgba(255,255,255,0.06) !important; /* было #fff */
  color: var(--text) !important;                 /* было #111827 */
}
html[data-theme="dark"] .sumMiniArt .a{ color: var(--text) !important; }
html[data-theme="dark"] .sumMiniArt .d{ color: var(--muted) !important; }

/* urgent badge */
html[data-theme="dark"] .sumMiniArt.urg{
  border-color: rgba(239,68,68,0.35) !important;
  background: rgba(239,68,68,0.12) !important;
}
html[data-theme="dark"] .sumMiniArt.urg .a{ color: #fecaca !important; }
html[data-theme="dark"] .sumMiniArt.urg .d{ color: #fecaca !important; font-weight:700 !important; }

/* ===== SUMMARY MODAL ===== */
html[data-theme="dark"] #sumModalBack .modal{
  background: var(--card) !important;
  border: 1px solid var(--border) !important;
  color: var(--text) !important;
}

/* кнопка закрыть (в шаблоне background:#fff border:#e5e7eb) */
html[data-theme="dark"] .sumModalClose{
  background: var(--btn-bg) !important;
  border: 1px solid var(--border) !important;
  color: var(--text) !important;
}

/* группы внутри модалки */
html[data-theme="dark"] .sumGroup{
  background: var(--card) !important;
  border: 1px solid var(--border) !important;
}
html[data-theme="dark"] .sumGroupName{
  color: var(--text) !important;
}
html[data-theme="dark"] .sumPdfBtn{
  background: var(--btn-bg) !important;
  border: 1px solid var(--border) !important;
  color: var(--text) !important;
}

/* строки в модалке (в шаблоне background:#11182705) */
html[data-theme="dark"] .sumRow{
  background: rgba(255,255,255,0.06) !important;
}
html[data-theme="dark"] .sumRowArt{ color: var(--text) !important; }
html[data-theme="dark"] .sumRowStatus{ color: var(--muted) !important; } /* было #374151 */
html[data-theme="dark"] .sumRowDays{ color: var(--muted) !important; }
html[data-theme="dark"] .sumRowDaysRed{ color: #fecaca !important; }

/* ===== pills в returns (в таблице и внутри карточек) ===== */
html[data-theme="dark"] .pill{
  background: rgba(255,255,255,0.06) !important;
  border: 1px solid var(--border) !important;
  color: var(--text) !important;
}

/* =====================================================
   UNIVERSAL: убрать белые борды/текст из inline стилей в returns
   (очень помогает, потому что в шаблоне много #fff/#e5e7eb)
===================================================== */
html[data-theme="dark"] .sumGrid [style*="border: 1px solid #e5e7eb"],
html[data-theme="dark"] .sumGrid [style*="border:1px solid #e5e7eb"],
html[data-theme="dark"] #sumModalBack [style*="border: 1px solid #e5e7eb"],
html[data-theme="dark"] #sumModalBack [style*="border:1px solid #e5e7eb"]{
  border-color: var(--border) !important;
}

html[data-theme="dark"] .sumGrid [style*="background:#fff"],
html[data-theme="dark"] .sumGrid [style*="background: #fff"],
html[data-theme="dark"] #sumModalBack [style*="background:#fff"],
html[data-theme="dark"] #sumModalBack [style*="background: #fff"]{
  background: var(--card) !important;
}

html[data-theme="dark"] .sumGrid [style*="color:#111827"],
html[data-theme="dark"] #sumModalBack [style*="color:#111827"]{
  color: var(--text) !important;
}

/* =====================================================
   SUPPLY (формирование поставки): accHead / accordion
   Убираем белые блоки #fafafa + белые борды
===================================================== */

/* заголовок аккордеона (ВОЛГОГРАД_МРФЦ и т.п.) */
html[data-theme="dark"] .accHead{
  background: var(--card2) !important;   /* было #fafafa */
  color: var(--text) !important;
  border: 1px solid var(--border) !important;
}

/* текст внутри */
html[data-theme="dark"] .accHead *{
  color: var(--text) !important;
}
html[data-theme="dark"] .accHead .muted{
  color: var(--muted) !important;
}

/* если тело аккордеона есть (часто .accBody/.accCont/.accBox) */
html[data-theme="dark"] .accBody,
html[data-theme="dark"] .accCont,
html[data-theme="dark"] .accBox{
  background: var(--card) !important;
  color: var(--text) !important;
  border-color: var(--border) !important;
}

/* pills справа (К поставке / Открыть) */
html[data-theme="dark"] .accHead .pill{
  background: rgba(255,255,255,0.06) !important;
  border: 1px solid var(--border) !important;
  color: var(--text) !important;
}
html[data-theme="dark"] .accHead .pillStrong{
  background: rgba(96,165,250,0.16) !important;
  border-color: rgba(96,165,250,0.30) !important;
}

/* общий фикс: любые борды внутри блока поставки */
html[data-theme="dark"] .accHead,
html[data-theme="dark"] .accHead *{
  border-color: var(--border) !important;
  outline-color: var(--border) !important;
}

/* если где-то разделители строк сделаны как hr/box-shadow */
html[data-theme="dark"] .accHead hr,
html[data-theme="dark"] .accBody hr{
  background: var(--border) !important;
  border: none !important;
  height: 1px !important;
}
html[data-theme="dark"] .accHead,
html[data-theme="dark"] .accBody,
html[data-theme="dark"] .accCont,
html[data-theme="dark"] .accBox{
  box-shadow: none !important;
}

/* =====================================================
   SUPPLY: KILL WHITE BORDERS (accordion + inner rows)
   (формирование поставки)
===================================================== */

/* 1) Контейнеры аккордеона (часто вокруг accHead) */
html[data-theme="dark"] .acc,
html[data-theme="dark"] .accItem,
html[data-theme="dark"] .accWrap,
html[data-theme="dark"] .accBlock,
html[data-theme="dark"] .accBox,
html[data-theme="dark"] .accCont,
html[data-theme="dark"] .accBody{
  border-color: var(--border) !important;
  box-shadow: none !important;
  outline: none !important;
}

/* 2) Любые разделители строк внутри поставки:
      border-top/bottom и светло-серые цвета */
html[data-theme="dark"] .accHead,
html[data-theme="dark"] .accBody,
html[data-theme="dark"] .accBody *{
  border-color: var(--border) !important;
}

/* 3) Если белые борды зашиты inline/встроенным CSS как #e5e7eb/#eef2f7 */
html[data-theme="dark"] .accBody [style*="border"],
html[data-theme="dark"] .accHead [style*="border"],
html[data-theme="dark"] .accBody [style*="#e5e7eb"],
html[data-theme="dark"] .accBody [style*="#eef2f7"],
html[data-theme="dark"] .accHead [style*="#e5e7eb"],
html[data-theme="dark"] .accHead [style*="#eef2f7"]{
  border-color: var(--border) !important;
}

/* 4) Часто линии делаются через border-bottom у "строк" */
html[data-theme="dark"] .accRow,
html[data-theme="dark"] .rowLine,
html[data-theme="dark"] .skuRow,
html[data-theme="dark"] .whRow,
html[data-theme="dark"] .line,
html[data-theme="dark"] .itemRow{
  border-bottom-color: var(--border) !important;
  border-top-color: var(--border) !important;
}

/* 5) Если линии сделаны через HR */
html[data-theme="dark"] .accBody hr{
  background: var(--border) !important;
  border: none !important;
  height: 1px !important;
}

/* 6) Если “белый борд” — это box-shadow: 0 0 0 1px ... */
html[data-theme="dark"] .accBody *,
html[data-theme="dark"] .accHead{
  box-shadow: none !important;
}

/* 7) Внутренние карточки/плашки складов (часто border:1px solid #e5e7eb) */
html[data-theme="dark"] .accBody .card,
html[data-theme="dark"] .accBody .box,
html[data-theme="dark"] .accBody [class*="card"],
html[data-theme="dark"] .accBody [class*="box"]{
  border: 1px solid var(--border) !important;
  background: var(--card) !important;
  color: var(--text) !important;
}

/* =====================================================
   ADS: Bid Test modal – steps (.btStep) dark theme fix
===================================================== */

html[data-theme="dark"] .btStep{
  background: var(--card) !important;              /* было #fff */
  border: 1px solid var(--border) !important;      /* было #00000012 */
  color: var(--text) !important;
}

/* заголовки/лейблы внутри шага */
html[data-theme="dark"] .btStep .btStepIdx{
  color: var(--text) !important;
  background: rgba(255,255,255,0.06) !important;   /* если есть подложка */
  border: 1px solid var(--border) !important;
  border-radius: 10px;
  padding: 4px 8px;
  display: inline-block;
}

html[data-theme="dark"] .btStep .btLabel{
  color: var(--muted) !important;
}

/* инпуты внутри модалки теста */
html[data-theme="dark"] .btStep .btInput,
html[data-theme="dark"] .btStep input[type="number"],
html[data-theme="dark"] .btStep input[type="text"]{
  background: var(--card2) !important;
  color: var(--text) !important;
  border: 1px solid var(--border) !important;
}

/* плейсхолдер */
html[data-theme="dark"] .btStep .btInput::placeholder,
html[data-theme="dark"] .btStep input::placeholder{
  color: var(--muted2) !important;
}

/* если у шага есть кнопка удаления/иконка справа */
html[data-theme="dark"] .btStep button,
html[data-theme="dark"] .btStep .nav-btn{
  background: var(--btn-bg) !important;
  border: 1px solid var(--border) !important;
  color: var(--text) !important;
}

/* =====================================================
   ADS: critical metrics (.critRow) – dark theme fix
===================================================== */
html[data-theme="dark"] .critRow{
  background: var(--card) !important;          /* было #fff */
  border: 1px solid var(--border) !important;  /* было #00000012 */
  color: var(--text) !important;
  box-shadow: none !important;                 /* убираем светлую подсветку */
}

html[data-theme="dark"] .critRow .muted{
  color: var(--muted) !important;
}

html[data-theme="dark"] .critRow select,
html[data-theme="dark"] .critRow input{
  background: var(--card2) !important;
  color: var(--text) !important;
  border: 1px solid var(--border) !important;
}

html[data-theme="dark"] .critRow input::placeholder{
  color: var(--muted2) !important;
}

html[data-theme="dark"] .critRemove{
  background: var(--btn-bg) !important;
  border: 1px solid var(--border) !important;
  color: var(--text) !important;
}
html[data-theme="dark"] .critRemove:hover{
  background: var(--btn-bg2) !important;
}

/* =====================================================
   AUTOBID SCHEDULE: rules grid – dark theme fix
   (rulesGridWrap / rulesGridHead / hourCell)
===================================================== */

/* ВАЖНО: в проекте есть второй :root с --line светлым.
   Поэтому в dark переопределяем --line/--line2/--soft/--soft2. */
html[data-theme="dark"]{
  --line: var(--border) !important;
  --line2: rgba(255,255,255,0.06) !important;
  --soft: var(--card2) !important;
  --soft2: rgba(255,255,255,0.06) !important;
}

/* контейнер сетки */
html[data-theme="dark"] .rulesGridWrap{
  background: var(--card) !important;          /* было #fff */
  border: 1px solid var(--border) !important;  /* было var(--line) */
  color: var(--text) !important;
}

/* шапка */
html[data-theme="dark"] .rulesGridHead{
  background: var(--card2) !important;
  border-bottom: 1px solid var(--border) !important;
  color: var(--text) !important;
}
html[data-theme="dark"] .rulesGridHead .muted{
  color: var(--muted) !important;
}
html[data-theme="dark"] .rulesGridHead b{
  color: var(--text) !important;
}

/* ячейки часов */
html[data-theme="dark"] .rulesGrid{
  background: var(--card) !important;
}
html[data-theme="dark"] .hourCell{
  background: rgba(255,255,255,0.04) !important;
  border: 1px solid var(--border) !important;
  color: var(--text) !important;
  box-shadow: none !important;
}
html[data-theme="dark"] .hourCell:hover{
  background: rgba(255,255,255,0.07) !important;
}

/* текст внутри ячеек */
html[data-theme="dark"] .hourNum{ color: var(--text) !important; }
html[data-theme="dark"] .hourBid{ color: var(--muted) !important; }

/* выбранная ячейка (если у тебя класс selected/sel/on/active) */
html[data-theme="dark"] .hourCell.selected,
html[data-theme="dark"] .hourCell.sel,
html[data-theme="dark"] .hourCell.on,
html[data-theme="dark"] .hourCell.active{
  background: rgba(96,165,250,0.18) !important;
  border-color: rgba(96,165,250,0.35) !important;
}

/* =====================================================
   REPORTS: rowsList / rowLine – dark text fix
   (в блоке расходов/отчетов местами остаётся #111827)
===================================================== */
html[data-theme="dark"] .rowsList,
html[data-theme="dark"] .rowsList *{
  color: var(--text) !important;
}

html[data-theme="dark"] .rowLine{
  background: rgba(255,255,255,0.03) !important;
  border: 1px solid var(--border) !important;
  color: var(--text) !important;
}
html[data-theme="dark"] .rowLine .lbl{ color: var(--text) !important; }
html[data-theme="dark"] .rowLine .cur{ color: var(--text) !important; }
html[data-theme="dark"] .rowLine .prev{ color: var(--muted) !important; }

/* проценты всегда должны быть видны */
html[data-theme="dark"] .pctWrap,
html[data-theme="dark"] .pct{
  color: var(--text) !important;
  border-color: var(--border) !important;
}
html[data-theme="dark"] .pct.good{ color: #86efac !important; }   /* зелёный */
html[data-theme="dark"] .pct.bad{  color: #fecaca !important; }   /* красный */
html[data-theme="dark"] .pct.neutral{ color: #e5e7eb !important; }


/* =====================================================
   DYNAMICS TOP STRIP: kpi2 percent invisible fix
===================================================== */
html[data-theme="dark"] #blkTopStrip .kpi2 .t{ color: var(--muted) !important; }
html[data-theme="dark"] #blkTopStrip .kpi2 .v{ color: var(--text) !important; }

/* проценты рядом с суммой */
html[data-theme="dark"] #blkTopStrip .kpi2 .vline .pct{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 2px 8px;
  border-radius: 999px;
  border: 1px solid var(--border) !important;
  background: rgba(255,255,255,0.06) !important;
  font-weight: 800;
}
html[data-theme="dark"] #blkTopStrip .kpi2 .vline .pct.good{
  color: #86efac !important;
  border-color: rgba(34,197,94,0.35) !important;
  background: rgba(34,197,94,0.12) !important;
}
html[data-theme="dark"] #blkTopStrip .kpi2 .vline .pct.bad{
  color: #fecaca !important;
  border-color: rgba(239,68,68,0.35) !important;
  background: rgba(239,68,68,0.12) !important;
}
html[data-theme="dark"] #blkTopStrip .kpi2 .subline{ color: var(--muted) !important; }
html[data-theme="dark"] #blkTopStrip .kpi2 .subline b{ color: var(--text) !important; }


/* =====================================================
   ACTIONS: cabinet list – dark text + убрать "скачок" фона
   (у тебя inline style: background: rgb(249,250,251); color: rgb(17,24,39))
===================================================== */

/* карточка "Кабинеты" пусть будет однотонная, без "темного бек" */
html[data-theme="dark"] #cabList{
  background: transparent !important;
}

/* все кнопки кабинетов: перебиваем inline светлый фон/черный текст */
html[data-theme="dark"] #cabList .btn{
  background: rgba(255,255,255,0.06) !important;
  border: 1px solid var(--border) !important;
  color: var(--text) !important;
}

/* активный кабинет (у тебя он становится background: rgb(17,24,39) и прыгает) */
html[data-theme="dark"] #cabList .btn.active,
html[data-theme="dark"] #cabList .btn.isActive,
html[data-theme="dark"] #cabList .btn[aria-current="true"]{
  background: rgba(96,165,250,0.18) !important;       /* мягко, не черная плашка */
  border-color: rgba(96,165,250,0.35) !important;
  color: var(--text) !important;
}

/* если активность задаётся inline (как у тебя: background rgb(17,24,39); color white) — тоже гасим */
html[data-theme="dark"] #cabList .btn[style*="background: rgb(17, 24, 39)"],
html[data-theme="dark"] #cabList .btn[style*="background:rgb(17, 24, 39)"]{
  background: rgba(96,165,250,0.18) !important;
  border-color: rgba(96,165,250,0.35) !important;
  color: var(--text) !important;
}

/* hover без скачков */
html[data-theme="dark"] #cabList .btn:hover{
  background: rgba(255,255,255,0.09) !important;
}

/* =====================================================
   FBO modal (ovModalBody): mini accordion (.accMini*)
   Убираем белые борды/поля + приводим таблицы/кнопки к dark
===================================================== */

html[data-theme="dark"] #ovModalBody{
  background: var(--card) !important;
  color: var(--text) !important;
}

/* контейнер одного кабинета */
html[data-theme="dark"] .accMini{
  background: var(--card) !important;
  border: 1px solid var(--border) !important;
  border-radius: 14px;
  overflow: hidden;
}

/* шапка (Rubi&Jons, Котоград...) */
html[data-theme="dark"] .accMiniHead{
  background: var(--card2) !important;
  color: var(--text) !important;
  border-bottom: 1px solid var(--border) !important;
}

/* тело раскрытия */
html[data-theme="dark"] .accMiniBody{
  background: var(--card) !important;
  color: var(--text) !important;
}

/* всё внутри — чтобы не оставалось #111827/#fff из inline */
html[data-theme="dark"] .accMiniBody *{
  border-color: var(--border) !important;
  color: var(--text) !important;
}

/* карточки складов внутри (у тебя <div class="card" style="margin:10px 0;">) */
html[data-theme="dark"] .accMiniBody .card{
  background: var(--card) !important;
  border: 1px solid var(--border) !important;
  box-shadow: none !important;
}

/* табличка внутри карточки */
html[data-theme="dark"] .accMiniBody table{
  background: transparent !important;
  border-collapse: collapse;
  width: 100%;
}

html[data-theme="dark"] .accMiniBody thead th{
  background: var(--table-head) !important;
  color: var(--text) !important;
  border-bottom: 1px solid var(--border) !important;
}

html[data-theme="dark"] .accMiniBody tbody td{
  background: transparent !important;
  color: var(--text) !important;
  border-top: 1px solid var(--border) !important;
}

/* строки таблицы (если есть чередование) */
html[data-theme="dark"] .accMiniBody tbody tr:nth-child(even) td{
  background: rgba(255,255,255,0.03) !important;
}

/* маленькие кнопки PDF/Excel */
html[data-theme="dark"] .btnSm{
  background: var(--btn-bg) !important;
  color: var(--text) !important;
  border: 1px solid var(--border) !important;
}
html[data-theme="dark"] .btnSm:hover{
  background: var(--btn-bg2) !important;
}

/* "dash" и muted в сводке */
html[data-theme="dark"] .accMini .dash{ color: var(--muted2) !important; }
html[data-theme="dark"] .accMini .muted{ color: var(--muted) !important; }

/* pills в этих блоках (kpiVal и обычные) */
html[data-theme="dark"] .accMini .pill{
  background: rgba(255,255,255,0.06) !important;
  border: 1px solid var(--border) !important;
  color: var(--text) !important;
}
html[data-theme="dark"] .accMini .pill.danger{
  background: rgba(239,68,68,0.12) !important;
  border-color: rgba(239,68,68,0.35) !important;
  color: #fecaca !important;
}

/* на всякий случай: гасим inline background rgb(249,250,251) внутри модалки */
html[data-theme="dark"] #ovModalBody [style*="background: rgb(249, 250, 251)"],
html[data-theme="dark"] #ovModalBody [style*="background:rgb(249, 250, 251)"],
html[data-theme="dark"] #ovModalBody [style*="background:#fff"],
html[data-theme="dark"] #ovModalBody [style*="background: #fff"]{
  background: var(--card) !important;
}

/* =====================================================
   DASHBOARD: dark text/buttons fixes
   (там часто inline color/background остаются светлые)
===================================================== */

/* 1) Весь дашборд принудительно в цвет темы */
html[data-theme="dark"] #dashboard,
html[data-theme="dark"] .dashboard,
html[data-theme="dark"] [data-page="dashboard"],
html[data-theme="dark"] body[data-page="dashboard"]{
  color: var(--text) !important;
}

/* 2) Заголовки/лейблы/жирный текст (часто остаётся #111827) */
html[data-theme="dark"] #dashboard b,
html[data-theme="dark"] #dashboard .title,
html[data-theme="dark"] #dashboard .lbl,
html[data-theme="dark"] #dashboard h1,
html[data-theme="dark"] #dashboard h2,
html[data-theme="dark"] #dashboard h3,
html[data-theme="dark"] #dashboard h4,
html[data-theme="dark"] #dashboard h5,
html[data-theme="dark"] #dashboard h6{
  color: var(--text) !important;
}

/* 3) muted */
html[data-theme="dark"] #dashboard .muted{
  color: var(--muted) !important;
}

/* 4) Кнопки (пагинация/выделить все/снять все/и т.п.) */
html[data-theme="dark"] #dashboard .btn,
html[data-theme="dark"] #dashboard button,
html[data-theme="dark"] #dashboard .nav-btn,
html[data-theme="dark"] #dashboard .btnSm{
  background: var(--btn-bg) !important;
  color: var(--text) !important;
  border: 1px solid var(--border) !important;
}
html[data-theme="dark"] #dashboard .btn:hover,
html[data-theme="dark"] #dashboard button:hover,
html[data-theme="dark"] #dashboard .nav-btn:hover,
html[data-theme="dark"] #dashboard .btnSm:hover{
  background: var(--btn-bg2) !important;
}

/* 5) Инпуты/селекты в дашборде (если есть) */
html[data-theme="dark"] #dashboard input,
html[data-theme="dark"] #dashboard select,
html[data-theme="dark"] #dashboard textarea{
  background: var(--card2) !important;
  color: var(--text) !important;
  border: 1px solid var(--border) !important;
}

/* 6) Самое частое: INLINE стили светлой темы — убиваем их в дашборде */
html[data-theme="dark"] #dashboard [style*="color: rgb(17, 24, 39)"],
html[data-theme="dark"] #dashboard [style*="color:rgb(17, 24, 39)"],
html[data-theme="dark"] #dashboard [style*="color:#111827"],
html[data-theme="dark"] #dashboard [style*="color: #111827"]{
  color: var(--text) !important;
}

html[data-theme="dark"] #dashboard [style*="background: rgb(249, 250, 251)"],
html[data-theme="dark"] #dashboard [style*="background:rgb(249, 250, 251)"],
html[data-theme="dark"] #dashboard [style*="background:#fff"],
html[data-theme="dark"] #dashboard [style*="background: #fff"],
html[data-theme="dark"] #dashboard [style*="background:#fafafa"],
html[data-theme="dark"] #dashboard [style*="background: #fafafa"]{
  background: var(--card) !important;
}

/* 7) Pills (часто выглядят “не темные”) */
html[data-theme="dark"] #dashboard .pill{
  background: rgba(255,255,255,0.06) !important;
  border: 1px solid var(--border) !important;
  color: var(--text) !important;
}

/* ===========================
   Dark theme fixes (dashboard)
   =========================== */
html[data-theme="dark"] h2,
html[data-theme="dark"] h3{ color: var(--text) !important; }

html[data-theme="dark"] .card,
html[data-theme="dark"] .tableWrap,
html[data-theme="dark"] .topScroll{
  background: var(--card) !important;
  border-color: var(--border) !important;
}

html[data-theme="dark"] .cardTitle{ color: var(--text) !important; }
html[data-theme="dark"] .muted{ color: var(--muted) !important; }

html[data-theme="dark"] .btn,
html[data-theme="dark"] .tabBtn{
  background: var(--btn-bg) !important;
  color: var(--btn-text) !important;
  border-color: var(--border) !important;
}
html[data-theme="dark"] .btn:hover,
html[data-theme="dark"] .tabBtn:hover{ background: var(--btn-bg2) !important; }

html[data-theme="dark"] .btn.primary,
html[data-theme="dark"] .tabBtn.active{
  background: var(--accent) !important;
  border-color: var(--accent) !important;
  color: #0b1220 !important;
}
html[data-theme="dark"] .tabBtn.inactive{
  background: var(--btn-bg) !important;
  color: var(--btn-text) !important;
}

html[data-theme="dark"] .input,
html[data-theme="dark"] select{
  background: var(--card2) !important;
  color: var(--text) !important;
  border-color: var(--border) !important;
}
html[data-theme="dark"] .input::placeholder{ color: var(--muted2) !important; }

/* badges with inline colors */
html[data-theme="dark"] #syncBadge,
html[data-theme="dark"] #autosyncStatus{
  background: var(--btn-bg) !important;
  color: var(--text) !important;
}

/* modals that used translucent white */
html[data-theme="dark"] .modalBox,
html[data-theme="dark"] .modalCard{
  background: var(--card) !important;
  border: 1px solid var(--border) !important;
  box-shadow: var(--shadow) !important;
}

html[data-theme="dark"] .colItem,
html[data-theme="dark"] .seg,
html[data-theme="dark"] .seg label{
  background: var(--card2) !important;
  border-color: var(--border) !important;
  color: var(--text) !important;
}
html[data-theme="dark"] .seg input:checked + label{
  background: var(--accent) !important;
  color: #0b1220 !important;
}

/* tables in modals (FBO summary etc.) */
html[data-theme="dark"] table{ color: var(--text) !important; }
html[data-theme="dark"] thead th{
  background: var(--table-head) !important;
  color: var(--muted) !important;
  border-color: var(--border) !important;
}
html[data-theme="dark"] td{
  border-color: var(--border) !important;
}

/* inline style fallbacks (generated in JS) */
html[data-theme="dark"] [style*="background:#fff"],
html[data-theme="dark"] [style*="background: #fff"]{
  background: var(--card) !important;
}
html[data-theme="dark"] [style*="background:#f9fafb"],
html[data-theme="dark"] [style*="background: #f9fafb"],
html[data-theme="dark"] [style*="background:rgb(249, 250, 251)"],
html[data-theme="dark"] [style*="background: rgb(249, 250, 251)"]{
  background: var(--btn-bg) !important;
}
html[data-theme="dark"] [style*="background:#f3f4f6"],
html[data-theme="dark"] [style*="background: #f3f4f6"],
html[data-theme="dark"] [style*="background:#e5e7eb"],
html[data-theme="dark"] [style*="background: #e5e7eb"]{
  background: var(--btn-bg2) !important;
}
html[data-theme="dark"] [style*="border:1px solid #e5e7eb"],
html[data-theme="dark"] [style*="border: 1px solid #e5e7eb"]{
  border-color: var(--border) !important;
}
html[data-theme="dark"] [style*="color:#111827"],
html[data-theme="dark"] [style*="color: #111827"],
html[data-theme="dark"] [style*="color:#374151"],
html[data-theme="dark"] [style*="color: #374151"]{
  color: var(--text) !important;
}

/* cabinet list buttons in акции */
html[data-theme="dark"] #cabList .btn{
  background: var(--btn-bg) !important;
  color: var(--btn-text) !important;
  border-color: var(--border) !important;
}
html[data-theme="dark"] #cabList .btn[style*="background: rgb(17, 24, 39)"],
html[data-theme="dark"] #cabList .btn[style*="background:rgb(17, 24, 39)"]{
  background: var(--accent) !important;
  border-color: var(--accent) !important;
  color: #0b1220 !important;
}

/* ==========================================
   Admin / Access table: убираем "белые поля"
   из-за border-spacing и separate layout
========================================== */

html[data-theme="dark"] table{
  background: var(--bg) !important;          /* чтобы промежутки между строками были тёмные */
}

/* строки, у тебя <tr class="row"> */
html[data-theme="dark"] tr.row{
  background: var(--card) !important;
  color: var(--text) !important;
}

/* ячейки строки */
html[data-theme="dark"] tr.row > td{
  background: transparent !important;        /* фон берём от tr */
  border-top: 1px solid var(--border) !important;
  border-bottom: 1px solid var(--border) !important;
  padding: 12px 12px;
}

/* скругления + боковые борды (т.к. separate) */
html[data-theme="dark"] tr.row > td:first-child{
  border-left: 1px solid var(--border) !important;
  border-top-left-radius: 12px;
  border-bottom-left-radius: 12px;
}
html[data-theme="dark"] tr.row > td:last-child{
  border-right: 1px solid var(--border) !important;
  border-top-right-radius: 12px;
  border-bottom-right-radius: 12px;
}

/* tabsBox (чекбоксы доступа) часто имеет светлый фон */
html[data-theme="dark"] .tabsBox{
  background: var(--card2) !important;
  border: 1px solid var(--border) !important;
  border-radius: 12px;
  padding: 10px;
}

/* сами label чекбоксов */
html[data-theme="dark"] .tabsBox .chk{
  background: rgba(255,255,255,0.03) !important;
  border: 1px solid var(--border) !important;
  border-radius: 10px;
  padding: 8px 10px;
  color: var(--text) !important;
}
html[data-theme="dark"] .tabsBox .chk:hover{
  background: rgba(255,255,255,0.06) !important;
}

/* Сохранить (saveBtn) */
html[data-theme="dark"] .saveBtn{
  background: var(--btn-bg) !important;
  color: var(--text) !important;
  border: 1px solid var(--border) !important;
}
html[data-theme="dark"] .saveBtn:hover{
  background: var(--btn-bg2) !important;
}

/* ==========================================
   AUTOSYNC (asGrid / asCard): тёмный текст + инпуты
========================================== */

html[data-theme="dark"] .asGrid,
html[data-theme="dark"] .asCard,
html[data-theme="dark"] .asCard *{
  color: var(--text) !important;
}

/* заголовки/мета */
html[data-theme="dark"] .asTitle{ color: var(--text) !important; }
html[data-theme="dark"] .asMeta{ color: var(--muted) !important; }
html[data-theme="dark"] .asHelp{ color: var(--muted) !important; }

/* карточки и борды */
html[data-theme="dark"] .asCard{
  background: var(--card) !important;
  border: 1px solid var(--border) !important;
  box-shadow: var(--shadow) !important;
}
html[data-theme="dark"] .asCardHead{
  border-bottom: 1px solid rgba(255,255,255,0.06) !important;
}

/* times box */
html[data-theme="dark"] .asTimesBox{
  background: var(--card2) !important;
  border: 1px solid var(--border) !important;
  border-radius: 12px;
}

/* инпуты (в т.ч. time/number) */
html[data-theme="dark"] .asInp,
html[data-theme="dark"] input.asInp,
html[data-theme="dark"] input[type="time"].asInp,
html[data-theme="dark"] input[type="number"].asInp{
  background: rgba(255,255,255,0.06) !important;
  color: var(--text) !important;
  border: 1px solid var(--border) !important;
  border-radius: 10px;
  outline: none;
}
html[data-theme="dark"] .asInp::placeholder{ color: var(--muted2) !important; }
html[data-theme="dark"] .asInp:focus{
  border-color: var(--accent) !important;
  box-shadow: 0 0 0 4px var(--accent-soft) !important;
}

/* чтобы текст внутри time не был тёмным на некоторых браузерах */
html[data-theme="dark"] input[type="time"].asInp{
  color-scheme: dark;
}

/* мелкие кнопки ✖ и "+ Время" */
html[data-theme="dark"] .asSmallBtn{
  background: var(--btn-bg) !important;
  color: var(--text) !important;
  border: 1px solid var(--border) !important;
}
html[data-theme="dark"] .asSmallBtn:hover{ background: var(--btn-bg2) !important; }
html[data-theme="dark"] .asSmallBtn:disabled{
  opacity: .45;
  cursor: not-allowed;
}

/* обычные .btn внутри автосинка */
html[data-theme="dark"] .asCard .btn{
  background: var(--btn-bg2) !important;
  color: var(--text) !important;
  border: 1px solid var(--border) !important;
}
html[data-theme="dark"] .asCard .btn:hover{
  background: rgba(255,255,255,0.14) !important;
}

/* чекбоксы + подписи */
html[data-theme="dark"] .asCard input[type="checkbox"]{
  accent-color: var(--accent);
}
html[data-theme="dark"] .asCard label span{
  color: var(--text) !important;
}

/* =========================
   THEME TOGGLE: drum icon
========================= */
.themeToggle{
  width: 40px;
  height: 40px;
  border-radius: 12px;
  border: 1px solid var(--topbar-border);
  background: var(--btn-bg);
  color: var(--btn-text);
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  transition: background .18s ease, border-color .18s ease, transform .08s ease;
}
.themeToggle:hover{ background: var(--btn-bg2); }
.themeToggle:active{ transform: scale(0.98); }

.iconDrum{
  width: 18px;
  height: 18px;
  position: relative;
  overflow: hidden;
  display: inline-block;
}
.iconDrum .ico{
  width: 18px;
  height: 18px;
  display:block;
  position:absolute;
  left:0;
  top:0;
  transform: translateY(0);
}

/* солнце сверху, луна ниже — это "барабан" */
.iconDrum .sun{ transform: translateY(0); }
.iconDrum .moon{ transform: translateY(22px); }

/* состояние: dark -> показываем луну (прокрутка вверх) */
html[data-theme="dark"] .iconDrum .sun{ transform: translateY(-22px); }
html[data-theme="dark"] .iconDrum .moon{ transform: translateY(0); }

/* плавность прокрутки барабана */
.iconDrum .ico{
  transition: transform .32s cubic-bezier(.2,.9,.2,1);
}

/* =========================
   THEME SWITCH: splash reveal
========================= */

@keyframes themeReveal{
  from{
    clip-path: circle(0px at var(--x) var(--y));
  }
  to{
    /* 150vmax гарантированно перекрывает экран */
    clip-path: circle(150vmax at var(--x) var(--y));
  }
}

/* ---------- View Transitions (реальный наплыв без скрытия контента) ---------- */
@media (prefers-reduced-motion: no-preference) {
  ::view-transition-old(root),
  ::view-transition-new(root) {
    animation: none;
    mix-blend-mode: normal;
  }

  /* Новый кадр “въезжает” кругом из точки клика */
  ::view-transition-new(root) {
    clip-path: circle(0px at var(--vt-x, 50vw) var(--vt-y, 20vh));
    -webkit-clip-path: circle(0px at var(--vt-x, 50vw) var(--vt-y, 20vh));
    animation: vt-reveal 520ms cubic-bezier(.2,.9,.2,1) forwards;
  }

  @keyframes vt-reveal {
    to {
      clip-path: circle(150vmax at var(--vt-x, 50vw) var(--vt-y, 20vh));
      -webkit-clip-path: circle(150vmax at var(--vt-x, 50vw) var(--vt-y, 20vh));
    }
  }
}

/* =========================================================
   THEME TRANSITION (works even without ViewTransition API)
   ========================================================= */

/* на некоторых сборках нужно явно назвать root */
html { view-transition-name: root; }

/* --- fallback overlay BEHIND content --- */
#themeSplash{
  position: fixed;
  inset: 0;
  z-index: 0;                 /* важно: позади */
  pointer-events: none;
  background: var(--bg);
  opacity: 0;
  clip-path: circle(0px at var(--sx, 50vw) var(--sy, 20vh));
  -webkit-clip-path: circle(0px at var(--sx, 50vw) var(--sy, 20vh));
  transition:
    opacity 120ms ease,
    clip-path 520ms cubic-bezier(.2,.9,.2,1),
    -webkit-clip-path 520ms cubic-bezier(.2,.9,.2,1);
}

#themeSplash.on{
  opacity: 1;
  clip-path: circle(150vmax at var(--sx, 50vw) var(--sy, 20vh));
  -webkit-clip-path: circle(150vmax at var(--sx, 50vw) var(--sy, 20vh));
}

/* все элементы страницы выше оверлея */
body{ position: relative; }
body > *:not(#themeSplash){
  position: relative;
  z-index: 1;
}

/* --- ViewTransition: если доступно, будет ещё красивее --- */
::view-transition-old(root),
::view-transition-new(root){
  animation: none;
  mix-blend-mode: normal;
}

::view-transition-new(root){
  clip-path: circle(0px at var(--sx, 50vw) var(--sy, 20vh));
  -webkit-clip-path: circle(0px at var(--sx, 50vw) var(--sy, 20vh));
  animation: vt-reveal 520ms cubic-bezier(.2,.9,.2,1) forwards;
}

@keyframes vt-reveal{
  to{
    clip-path: circle(150vmax at var(--sx, 50vw) var(--sy, 20vh));
    -webkit-clip-path: circle(150vmax at var(--sx, 50vw) var(--sy, 20vh));
  }
}

/* =====================================================
   SUPPLY PLANNING (FBO) – modal + add products (THEME FIX)
   Add to the END of theme.css
===================================================== */

/* modal overlay/backdrop on supply planning page */
#ozonExcelModal{
  background: var(--overlay) !important;
}

/* modal window */
#ozonExcelModal > div{
  background: var(--card) !important;
  color: var(--text) !important;
  border: 1px solid var(--border) !important;
  box-shadow: var(--shadow) !important;
}

/* all text inside modal must follow theme */
#ozonExcelModal,
#ozonExcelModal *{
  color: var(--text);
}

/* fix: muted inside modal */
#ozonExcelModal .muted{
  color: var(--muted) !important;
}

/* buttons inside modal */
#ozonExcelModal .btn{
  background: var(--btn-bg) !important;
  border: 1px solid var(--border) !important;
  color: var(--btn-text) !important;
}
#ozonExcelModal .btn:hover{
  background: var(--btn-bg2) !important;
}

/* IMPORTANT:
   Your page defines .btnDark as black/white inline in the template.
   We override it in modal so selected cluster is readable in BOTH themes.
*/
#ozonExcelModal .btnDark{
  background: var(--accent) !important;
  border-color: var(--accent) !important;
  color: #fff !important;
}
html[data-theme="dark"] #ozonExcelModal .btnDark{
  /* in your dark theme accent is light; black text is readable */
  color: #0b1220 !important;
}

/* cluster buttons list scrollbar (left column) */
#ozonWhButtons{
  scrollbar-color: var(--scroll-thumb) var(--scroll-track);
}

/* preview table wrapper (right) */
#ozonPreview.tableWrap,
#productsTable.tableWrap{
  border: 1px solid var(--border) !important;
  border-radius: 14px;
  background: var(--card) !important;
}

/* Add products box: remove white border + keep theme background */
#addProductsBox{
  background: var(--card) !important;
  color: var(--text) !important;
  border: none !important;
  box-shadow: none !important;
}

/* search input inside add products */
#addProductsBox input,
#ozonExcelModal input,
#ozonExcelModal select{
  background: var(--card2) !important;
  color: var(--text) !important;
  border: 1px solid var(--border) !important;
}
#addProductsBox input::placeholder{
  color: var(--muted2) !important;
}

/* tables inside modal (avoid white rows/borders) */
#ozonExcelModal table,
#ozonExcelModal thead,
#ozonExcelModal tbody,
#ozonExcelModal tr,
#ozonExcelModal th,
#ozonExcelModal td{
  border-color: var(--border) !important;
}

#ozonExcelModal th{
  background: var(--table-head) !important;
  color: var(--text) !important;
}
#ozonExcelModal td{
  background: var(--table-row) !important;
  color: var(--text) !important;
}
#ozonExcelModal tr:nth-child(even) td{
  background: var(--table-row-alt) !important;
}

/* qty input in preview table */
#ozonExcelModal #ozonPreview input[type="number"]{
  background: var(--card2) !important;
  color: var(--text) !important;
  border: 1px solid var(--border) !important;
}
html[data-theme="dark"] #ozonExcelModal #ozonPreview input[type="number"]{
  color-scheme: dark;
}

/* (optional) small icon buttons if you add remove buttons */
#ozonExcelModal .btn.iconBtn{
  padding: 6px 10px;
  border-radius: 10px;
  line-height: 1;
}

/* --- FORCE FIX: supply planning addProductsBox overrides inline backgrounds --- */
#addProductsBox{
  background: var(--card) !important;
  color: var(--text) !important;
}

/* у тебя там есть вложенный div со style="background:#fafafa" */
#addProductsBox > div{
  background: var(--card2) !important;
  color: var(--text) !important;
  border: 1px solid var(--border) !important;
}

/* инпут поиска с inline border */
#addProductsBox #prodSearch{
  background: var(--card) !important;
  color: var(--text) !important;
  border: 1px solid var(--border) !important;
}
#addProductsBox #prodSearch::placeholder{
  color: var(--muted2) !important;
}

/* таблица внутри блока */
#addProductsBox #productsTable{
  background: var(--card) !important;
  border: 1px solid var(--border) !important;
}
#addProductsBox table th{
  background: var(--table-head) !important;
  color: var(--text) !important;
}
#addProductsBox table td{
  background: var(--table-row) !important;
  color: var(--text) !important;
}
#addProductsBox table tr:nth-child(even) td{
  background: var(--table-row-alt) !important;
}

/* =====================================================
   SUPPLY / OZON MODAL – FORCE THEME OVERRIDES
   (побеждаем inline и локальный <style> на странице)
===================================================== */

/* overlay */
#ozonExcelModal{
  background: var(--overlay) !important;
}

/* сама модалка (у тебя inline background:#fff) */
#ozonExcelModal > div{
  background: var(--card) !important;
  color: var(--text) !important;
  border: 1px solid var(--border) !important;
  box-shadow: var(--shadow) !important;
}

/* заголовки/текст внутри */
#ozonExcelModal b,
#ozonExcelModal .muted,
#ozonExcelModal span,
#ozonExcelModal div{
  color: inherit;
}
#ozonExcelModal .muted{ color: var(--muted) !important; }

/* кнопки внутри модалки (в светлой теме у тебя btnDark может стать нечитаемой) */
#ozonExcelModal .btn{
  background: var(--btn-bg) !important;
  border-color: var(--border) !important;
  color: var(--btn-text) !important;
}
#ozonExcelModal .btn:hover{ background: var(--btn-bg2) !important; }

/* btnDark: делаем стабильной в обеих темах */
#ozonExcelModal .btnDark{
  background: var(--accent) !important;
  border-color: var(--accent) !important;
  color: #fff !important;
}
#ozonExcelModal .btnDark:hover{
  filter: brightness(0.95);
}

/* выбранный склад: сейчас он у тебя становится btnDark и может ломать текст */
#ozonWhButtons .btn.btnDark b,
#ozonWhButtons .btn.btnDark .muted{
  color:#fff !important;
}

/* превью таблицы */
#ozonPreview.tableWrap{
  background: var(--card) !important;
  border: 1px solid var(--border) !important;
  border-radius: 14px;
}
#ozonPreview table th{
  background: var(--table-head) !important;
  color: var(--text) !important;
}
#ozonPreview table td{
  background: var(--table-row) !important;
  color: var(--text) !important;
}
#ozonPreview table tr:nth-child(even) td{
  background: var(--table-row-alt) !important;
}

/* инпуты количества в превью (у тебя inline border #e5e7eb) */
#ozonPreview input[type="number"]{
  background: var(--card) !important;
  color: var(--text) !important;
  border: 1px solid var(--border) !important;
}

/* -----------------------------------------------------
   ADD PRODUCTS BOX (белый/серый блок в dark из inline)
----------------------------------------------------- */

/* наружная обёртка (у тебя inline background:#f6f7f9) */
#addProductsBox{
  background: var(--card) !important;
  color: var(--text) !important;
  border: 1px solid var(--border) !important;
}

/* внутренний wrapper (у тебя inline background:#fafafa) */
#addProductsBox > div{
  background: var(--card2) !important;
  color: var(--text) !important;
  border: 1px solid var(--border) !important;
}

/* поиск */
#addProductsBox #prodSearch{
  background: var(--card) !important;
  color: var(--text) !important;
  border: 1px solid var(--border) !important;
}
#addProductsBox #prodSearch::placeholder{ color: var(--muted2) !important; }

/* таблица товаров */
#addProductsBox #productsTable{
  background: var(--card) !important;
  border: 1px solid var(--border) !important;
  border-radius: 12px;
}
#addProductsBox table th{
  background: var(--table-head) !important;
  color: var(--text) !important;
}
#addProductsBox table td{
  background: var(--table-row) !important;
  color: var(--text) !important;
}
#addProductsBox table tr:nth-child(even) td{
  background: var(--table-row-alt) !important;
}

/* чекбоксы в dark – пусть нормально подсвечиваются */
html[data-theme="dark"] #addProductsBox input[type="checkbox"]{
  accent-color: var(--accent);
}

/* -----------------------------------------------------
   FIX: локальные классы со страницы (card/btn/acc*)
   (они у тебя в <style> задают #fff/#e5e7eb/#fafafa)
   Перебиваем только в контексте этой страницы/модалки.
----------------------------------------------------- */

/* карточки и аккордеон на странице поставки */
html[data-theme="dark"] .card{
  background: var(--card) !important;
  border-color: var(--border) !important;
  color: var(--text) !important;
}
html[data-theme="dark"] .acc{
  border-color: var(--border) !important;
}
html[data-theme="dark"] .accHead{
  background: var(--card2) !important;
  border-color: var(--border) !important;
  color: var(--text) !important;
}
html[data-theme="dark"] .accBody{
  background: var(--card) !important;
  border-color: var(--border) !important;
  color: var(--text) !important;
}

/* таблицы на странице поставки */
html[data-theme="dark"] th, 
html[data-theme="dark"] td{
  border-bottom-color: var(--border) !important;
}

/* ========= SUPPLY PAGE BASE UI (theme-aware) ========= */

/* базовая карточка */
.card{
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 12px;
  background: var(--card);
  color: var(--text);
  margin-bottom: 12px;
}

/* строки */
.row{
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
}

/* кнопки */
.btn{
  padding: 8px 12px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: var(--btn-bg);
  color: var(--btn-text);
  cursor: pointer;
}
.btn:hover{ background: var(--btn-bg2); }

/* “тёмная” кнопка (в твоём UI это primary action) */
.btnDark{
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
}
.btnDark:hover{ filter: brightness(0.95); }

/* подписи */
.muted{ color: var(--muted); font-size: 12px; }

/* pill */
.pill{
  display: inline-block;
  padding: 3px 8px;
  border-radius: 999px;
  font-size: 12px;
  background: rgba(0,0,0,0.06);
  border: 1px solid rgba(0,0,0,0.00);
  color: var(--text);
}
html[data-theme="dark"] .pill{
  background: rgba(255,255,255,0.06);
  border-color: var(--border);
}
.pillStrong{ font-weight: 700; }

/* аккордеон */
.acc{
  border: 1px solid var(--border);
  border-radius: 14px;
  overflow: hidden;
  margin-bottom: 10px;
  background: var(--card);
}
.accHead{
  padding: 10px 12px;
  background: var(--card2);
  display: flex;
  justify-content: space-between;
  gap: 10px;
  align-items: center;
  cursor: pointer;
  flex-wrap: wrap;
  color: var(--text);
  border-bottom: 1px solid var(--border);
}
.accBody{
  display: none;
  padding: 10px 12px;
  background: var(--card);
  color: var(--text);
}
.acc.open .accBody{ display: block; }

/* таблицы */
table{ width: 100%; border-collapse: collapse; color: var(--text); }
th, td{
  border-bottom: 1px solid var(--border);
  padding: 8px 6px;
  font-size: 13px;
  vertical-align: top;
}
th{
  cursor: pointer;
  user-select: none;
  text-align: left;
  white-space: nowrap;
  background: var(--table-head);
  color: var(--text);
}

/* сортировка */
th .sort{ font-size: 11px; color: var(--muted); margin-left: 4px; }

/* tooltip в заголовке */
.thTip{ position: relative; cursor: help; white-space: nowrap; }
.thTip .tipBox{
  display: none;
  position: absolute;
  z-index: 9999;
  left: 50%;
  transform: translateX(-50%);
  top: 110%;
  min-width: 220px;
  max-width: 360px;
  background: var(--tooltip-bg);
  color: var(--tooltip-text);
  padding: 8px 10px;
  border-radius: 10px;
  font-size: 12px;
  line-height: 1.25;
  box-shadow: 0 10px 25px rgba(0,0,0,.25);
}
.thTip .tipBox::before{
  content:"";
  position:absolute;
  top:-6px;
  left:50%;
  transform:translateX(-50%);
  border-width:0 6px 6px 6px;
  border-style:solid;
  border-color:transparent transparent var(--tooltip-bg) transparent;
}
.thTip:hover .tipBox{ display: block; }

/* обёртка таблиц */
.tableWrap{ overflow: auto; }
.tableWrap table{ min-width: 980px; }

/* фильтры */
.filters{ display:flex; gap:8px; flex-wrap:wrap; }

/* ========= MODAL OZON + ADD PRODUCTS (theme-aware overrides) ========= */

/* модалка: убираем белый inline фон и приводим к теме */
#ozonExcelModal > div{
  background: var(--card) !important;
  color: var(--text) !important;
  border: 1px solid var(--border) !important;
}

/* addProductsBox: больше не “белый/серый” блок */
#addProductsBox{
  background: var(--card) !important;
  border: 1px solid var(--border) !important;
  color: var(--text) !important;
}
#addProductsBox > div{
  background: var(--card2) !important;
  border: 1px solid var(--border) !important;
}

/* поиск и инпуты внутри */
#addProductsBox input,
#ozonPreview input{
  background: var(--card) !important;
  color: var(--text) !important;
  border: 1px solid var(--border) !important;
}
#addProductsBox input::placeholder{ color: var(--muted2); }

/* активный склад (кнопка слева) — текст всегда виден */
#ozonWhButtons .btn.btnDark b,
#ozonWhButtons .btn.btnDark .muted{
  color: #fff !important;
}

/* =========================
   OZON MODAL: add products block theme
========================= */
#addProductsBox{
  background: var(--card) !important;
  border: 1px solid var(--border) !important;
}

#addProductsBox > div{
  background: var(--card2) !important;
  border: 1px solid var(--border) !important;
}

/* таблица товаров внутри addProducts */
#addProductsBox table th{
  background: var(--table-head) !important;
}
#addProductsBox table td{
  background: var(--table-row) !important;
}

/* компактные элементы в мульти-склад превью */
.ozCell{
  display:flex;
  align-items:center;
  gap:6px;
}
.ozCell input[type="number"]{
  width:86px;
  padding:6px 8px;
  border-radius:10px;
}
.ozCell input[type="checkbox"]{
  transform: translateY(1px);
}