/* Светлая тема Штурвала — общие CSS-переменные для всех модулей.
   Подключается вместе с /static/js/theme.js (data-theme на <html>). */

html[data-theme="light"] {
  color-scheme: light;
  --bg: #f0ebe3;
  --bg0: #f4f0e8;
  --bg1: #ebe4d8;
  --bg2: #e5dfd4;
  --panel: #ffffff;
  --panel2: #f7f3ec;
  --panel-2: #f7f3ec;
  --panel-solid: #ffffff;
  --card-bg: rgba(255, 255, 255, 0.94);
  --text: #1a2428;
  --muted: #5c6b72;
  --accent: #c45c2a;
  --accent-2: #2a8a7a;
  --ok: #2d8a64;
  --warn: #b8860b;
  --fail: #c44a3a;
  --danger: #c44a3a;
  --border: #d8d0c4;
  --line: rgba(196, 92, 42, 0.22);
  --input: #ffffff;
  --icon: #c00000;
  --shadow: 0 12px 28px rgba(40, 30, 20, 0.12);
}

html[data-theme="light"] body {
  color: var(--text);
  background: linear-gradient(180deg, #f4f0e8, var(--bg)) !important;
}

/* Часто захардкоженные тёмные поверхности в модулях */
html[data-theme="light"] input[type="text"],
html[data-theme="light"] input[type="number"],
html[data-theme="light"] input[type="password"],
html[data-theme="light"] input[type="search"],
html[data-theme="light"] select,
html[data-theme="light"] textarea {
  background: var(--input) !important;
  border-color: var(--border) !important;
  color: var(--text) !important;
}

:where(html[data-theme="light"]) button {
  background: var(--panel2);
  border-color: var(--border);
}

html[data-theme="light"] button.primary {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}

html[data-theme="light"] a {
  color: var(--accent);
}

html[data-theme="light"] .back {
  color: var(--muted);
}

html[data-theme="light"] .wrap,
html[data-theme="light"] .topbar,
html[data-theme="light"] .sub,
html[data-theme="light"] .muted {
  color: inherit;
}

html[data-theme="light"] .sub,
html[data-theme="light"] .muted {
  color: var(--muted);
}

html[data-theme="light"] code {
  background: var(--panel2);
}

html[data-theme="light"] table th,
html[data-theme="light"] table td {
  border-color: var(--border);
}

html[data-theme="light"] .panel,
html[data-theme="light"] .card,
html[data-theme="light"] .apk-link,
html[data-theme="light"] .lk-card {
  background: var(--panel);
  border-color: var(--border);
}

/* pricing / marketplaces sticky cells */
html[data-theme="light"] th.check-col,
html[data-theme="light"] td.check-col,
html[data-theme="light"] th.article-col,
html[data-theme="light"] td.article-col,
html[data-theme="light"] th.name-col,
html[data-theme="light"] td.name-col {
  background: var(--panel) !important;
}

html[data-theme="light"] tr.checked td.name-col {
  background: #f3e8dc !important;
}

/* shop / tsd tablet shells use --bg/--panel already — переменные выше достаточно */
html[data-theme="light"] .toast.err {
  background: #f8e8e6;
  border-color: rgba(196, 74, 58, 0.35);
  color: var(--text);
}

/* Переключатель темы оформления (theme.js mountSkinSwitcher) */
.sk-switch { position: relative; display: inline-block; vertical-align: middle; margin-left: 10px; font-family: "Manrope", "Segoe UI", system-ui, sans-serif; z-index: 60; }
.sk-switch.sk-float { position: fixed; right: 14px; bottom: 14px; margin: 0; }
.sk-switch .sk-btn {
  display: inline-flex; align-items: center; gap: 6px;
  font: 600 13px/1 "Manrope", system-ui, sans-serif;
  padding: 6px 12px; border-radius: 999px; cursor: pointer;
  background: rgba(127, 127, 127, 0.12); color: inherit;
  border: 1px solid rgba(127, 127, 127, 0.35);
}
.sk-switch .sk-btn:hover { border-color: var(--sector, #d4a574); }
.sk-switch .sk-pop {
  position: absolute; top: calc(100% + 8px); left: 0; width: 270px; padding: 10px;
  border-radius: 14px; background: #0f252c; color: #eaf4f2;
  border: 1px solid #244a54; box-shadow: 0 18px 40px rgba(0, 0, 0, 0.45);
}
.sk-switch.sk-float .sk-pop { top: auto; bottom: calc(100% + 8px); left: auto; right: 0; }
html[data-theme="light"] .sk-switch .sk-pop { background: #fff; color: #0f252c; border-color: #d3e0dd; box-shadow: 0 14px 30px rgba(15, 37, 44, 0.16); }
.sk-switch .sk-cap { font: 700 11px/1 "Manrope", system-ui, sans-serif; letter-spacing: 0.08em; text-transform: uppercase; opacity: 0.6; margin: 4px 4px 8px; }
.sk-switch .sk-opt {
  display: flex; align-items: center; gap: 10px; width: 100%; text-align: left;
  padding: 8px 10px; margin: 0 0 6px; border-radius: 10px; cursor: pointer;
  background: transparent !important; color: inherit !important; border: 1px solid transparent !important;
  font: inherit; white-space: normal;
}
.sk-switch .sk-opt:hover { border-color: rgba(127, 127, 127, 0.35) !important; }
.sk-switch .sk-opt.on { border-color: var(--sector, #d4a574) !important; background: rgba(127, 127, 127, 0.1) !important; }
.sk-switch .sk-opt b { display: block; font-size: 14px; }
.sk-switch .sk-opt small { display: block; font-size: 12px; opacity: 0.65; }
.sk-switch .sk-dots { display: inline-flex; gap: 3px; flex: none; }
.sk-switch .sk-dots i { width: 10px; height: 10px; border-radius: 50%; box-shadow: 0 0 0 1px rgba(127, 127, 127, 0.4); }
.sk-switch .sk-seg { display: flex; gap: 6px; }
.sk-switch .sk-seg button {
  flex: 1; padding: 7px 8px; border-radius: 10px; cursor: pointer; font: 600 13px/1.2 "Manrope", system-ui, sans-serif;
  background: transparent !important; color: inherit !important; border: 1px solid rgba(127, 127, 127, 0.35) !important;
}
.sk-switch .sk-seg button.on { border-color: var(--sector, #d4a574) !important; background: rgba(127, 127, 127, 0.14) !important; }