/* ============================================================================
 *  theme.css — светлая современная тема + каркас под тракт CLI→LAM
 *  Грузится ПОСЛЕ lam.css → перекрывает тёмную тему. Цвета — на CSS-переменных.
 * ==========================================================================*/
:root{
  --bg:#eef2f7;            /* фон страницы */
  --panel:#ffffff;         /* панели */
  --panel-2:#f3f6fa;       /* вложенные блоки */
  --border:#d8e0ea;
  --text:#1f2a37;
  --muted:#6b7280;
  --accent:#2563eb;        /* синий акцент */
  --accent-d:#1d4ed8;
  --accent-bg:#e8f0fe;
  --ok:#16a34a; --warn:#d97706; --err:#dc2626;
  --plate:#11161c;         /* тёмная рабочая область плиты (линии видны) */
  --radius:8px;
  --shadow:0 1px 3px rgba(16,24,40,.08), 0 1px 2px rgba(16,24,40,.06);
  --shadow-l:0 6px 20px rgba(16,24,40,.12);
  --hdr-h:52px;
}

html,body{ background:var(--bg); color:var(--text);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif; }

/* рабочая область сдвинута под шапку */
#main{ top:var(--hdr-h)!important; }
#main2d, #main3d{ background:var(--plate); }
#main2d canvas, #canvas2d{ background:var(--plate)!important; }

/* ---------- панели ---------- */
#panel, #panels2, #top-panel, .panel, #jobs, #commands-search,
#objects-2d, #lasers, #scan-param, #scan-modes, #views{
  background:var(--panel)!important; color:var(--text)!important;
  border:1px solid var(--border)!important; border-radius:var(--radius)!important;
  box-shadow:var(--shadow)!important;
}
#panel{ top:calc(var(--hdr-h) + 6px)!important; }
#panels2{ top:calc(var(--hdr-h) + 6px)!important; }
.panel label, #panel label, .frame label{ color:var(--muted)!important; font-weight:600; }
.panel .frame, .frame{ background:transparent!important; border-color:var(--border)!important; }
.panel .label, .frame .label{ color:var(--text)!important; }

/* ---------- кнопки ---------- */
button{
  background:var(--panel-2)!important; color:var(--text)!important;
  border:1px solid var(--border)!important; border-radius:6px!important;
  padding:5px 10px!important; cursor:pointer; font-size:12px;
  transition:background .12s,border-color .12s,box-shadow .12s;
}
button:hover{ background:#e9eef5!important; border-color:#c4cfdd!important; }
button:active{ background:#dfe7f1!important; }
button.active, .toggle.active, #mode-select button.active{
  background:var(--accent)!important; color:#fff!important; border-color:var(--accent-d)!important;
}
.apply, .save-preset{ background:var(--accent)!important; color:#fff!important; border-color:var(--accent-d)!important; }
.apply:hover, .save-preset:hover{ background:var(--accent-d)!important; }

/* ---------- поля ввода ---------- */
input, select, textarea{
  background:#fff!important; color:var(--text)!important;
  border:1px solid var(--border)!important; border-radius:6px!important;
  padding:3px 6px!important; font-size:12px;
}
input:focus, select:focus, textarea:focus{ outline:none; border-color:var(--accent)!important;
  box-shadow:0 0 0 3px var(--accent-bg)!important; }
input[type=range]{ accent-color:var(--accent); }

/* списки пресетов / объекты */
.list li, .obj-list li{ color:var(--text)!important; }
.list li:hover{ background:var(--accent-bg)!important; }
.list li.active, li.active{ background:var(--accent-bg)!important; }

/* ---------- диалоги ---------- */
.dialog{ background:var(--panel)!important; color:var(--text)!important;
  border:1px solid var(--border)!important; border-radius:12px!important; box-shadow:var(--shadow-l)!important; }
.dialog::after{ background:rgba(16,24,40,.35)!important; }
.dialog h1{ color:var(--text)!important; }

/* статусбар */
#statusbar .inner > div{ border-radius:8px!important; box-shadow:var(--shadow-l); }

/* ---------- шапка + стэпер ---------- */
#app-header{
  position:fixed; left:0; top:0; right:0; height:var(--hdr-h); z-index:200;
  display:flex; align-items:center; gap:16px; padding:0 16px;
  background:var(--panel); border-bottom:1px solid var(--border); box-shadow:var(--shadow);
}
#app-header .brand{ font-weight:800; font-size:16px; letter-spacing:.2px; color:var(--text); white-space:nowrap; }
#app-header .brand small{ color:var(--muted); font-weight:600; font-size:11px; margin-left:6px; }
#app-stepper{ display:flex; align-items:center; gap:6px; flex:1; flex-wrap:wrap; }
#app-stepper .step{
  display:flex; align-items:center; gap:7px; padding:5px 12px; border-radius:20px;
  background:var(--panel-2); border:1px solid var(--border); cursor:pointer; font-size:12.5px; color:var(--text);
  transition:background .12s,border-color .12s;
}
#app-stepper .step:hover{ background:#e9eef5; }
#app-stepper .step.active{ background:var(--accent); color:#fff; border-color:var(--accent-d); }
#app-stepper .step .num{
  width:20px; height:20px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  background:#fff; color:var(--accent); font-weight:700; font-size:11px; border:1px solid var(--border);
}
#app-stepper .step.active .num{ background:#fff; color:var(--accent-d); border-color:#fff; }
#app-header .hdr-right{ display:flex; align-items:center; gap:8px; margin-left:auto; }
#app-header .hdr-right select{ min-width:120px; }
#app-header .hdr-right .export-btn{ background:var(--ok)!important; color:#fff!important; border-color:#15803d!important; font-weight:600; }

/* убрать дублирующее стэпером: File (Save/Open/Check). Animate (просмотр сканирования) — оставляем */
#panel-2d{ display:none!important; }
/* read-only зеркало параметров (SCAN MODES, всегда нули) дублирует редактирование в
   дереве «Детали» → скрываем, чтобы не путать оператора тремя копиями скор./мощн. */
#scan-modes{ display:none!important; }
#gas-indicator{ z-index:120!important; }
/* ползунок времени лазера (прокрутка хода сканирования) — заметный внизу */
#range2d-laser{ accent-color:var(--accent); height:18px; }

/* спрятать 3D-режимы и старый селектор/лого */
#mode-select .project, #mode-select .support, #mode-select .slice,
#mode-select > label, #intro{ display:none!important; }
#mode-select{ display:none!important; }   /* режимы выбираются стэпером */

/* частая мелочь */
.material-icons{ color:var(--muted); }

/* ---------- читабельность / контраст ---------- */
:root{ --muted:#5b6470; }                 /* темнее для контраста на белом */
#panel, #panels2, .panel, #objects-2d{ font-size:12.5px; }
.panel label, .frame label, #panel label{ color:#374151!important; font-weight:600; font-size:11px; text-transform:uppercase; letter-spacing:.3px; }
.frame .label, .panel .label{ color:#374151!important; font-weight:700; font-size:12px; text-transform:none; letter-spacing:0; }
.panel .value, .value{ color:var(--text)!important; font-weight:600; }
.panel, .frame{ padding:8px 10px!important; }
.frame{ margin-bottom:8px!important; }
button{ font-size:12px; }
input, select{ font-size:12px; color:var(--text)!important; }

/* ---------- слой-слайдер не должен прятаться за деревом ---------- */
#range2d{ left:8px!important; z-index:65!important; width:26px!important; }
#objects-2d{ left:44px!important; }        /* дерево правее вертикального слайдера слоёв */

/* ---------- убрать дублирующее/редкое в правой колонке ---------- */
/* «Color legend» заменён панелью «Порядок сканирования» в дереве; Reinforce supports — редко */
#2d-panel .frame:has(#color-legend){ display:none!important; }
#2d-panel .frame:has(#reinforce-supports){ display:none!important; }

/* ============================================================================
 *  ФИКС КОНТРАСТА (жалоба оператора: «плохо видно текст»)
 *  Множество текста наследовало светло-серый #ccc из ТЁМНОЙ темы (lam.css) и на
 *  белых панелях давало контраст ~1.4:1 (практически невидимо): <t>-метки
 *  (Outline/Body/Supports/speed/power/Layer:/Z level), панель «Порядок
 *  сканирования», статистика, навигация по слоям. Делаем тёмным (≈12:1).
 *  Кнопки, активные состояния и цветные бейджи НЕ трогаем.
 * ==========================================================================*/
/* контейнеры со светло-серым текстом — форсируем тёмный на ВС�ех потомках-надписях
   (кнопки/поля исключены — у них свои цвета). Покрывает <t>, span.name/.power/.speed и т.п. */
/* ПРЯМОЕ переопределение lam.css-правил (родитель #ccc → t наследует). Раздельные
   правила: невалидный селектор не рушит остальные (в одном comma-списке — рушил). */
.param-list span.name{ color:var(--text)!important; }
.param-list .name, .param-list .power, .param-list .speed{ color:var(--text)!important; }
.param-list h2{ color:var(--text)!important; }
#panel-clip{ color:var(--text)!important; }
#scan-modes, #scan-modes li, #scan-modes span{ color:var(--text)!important; }
#2d-panel .frame, #2d-panel .frame span, #2d-panel .frame div, #2d-panel .frame label{ color:var(--text)!important; }
#2d-panel #ln-nav, #2d-panel #ln-nav span, #2d-panel #ln-nav label{ color:var(--text)!important; }
#lasers .list, #lasers .list li{ color:var(--text)!important; }
.ord-title{ color:var(--text)!important; }
.ord-row .nm{ color:var(--text)!important; }
#pi-order .ord-title, #pi-order .ord-row, #pi-order .nm{ color:var(--text)!important; }
.panel t, #panel t, #panels2 t, .dialog .text t{ color:var(--text)!important; }
/* НО в цветных action-кнопках (белый текст на синем) t должен остаться белым —
   выше специфичность, чем у «.panel t», иначе тёмный t на синем = нечитаемо */
#panel .apply t, #panel .save-preset t, #panels2 .apply t, #panels2 .save-preset t,
.panel .apply t, .panel .save-preset t, button.active t{ color:#fff!important; }
/* второстепенный текст — приглушённый, но читаемый (--muted ≈ 5.9:1) */
#objects-2d .pi-meta, #objects-2d .pi-rcount, #objects-2d .pi-laser,
#objects-2d .pi-pdel, #objects-2d .pi-legend, #objects-2d .ord-hint{ color:var(--muted)!important; opacity:1!important; }
.presets .list .pk{ color:var(--muted)!important; }
/* навигация по слоям (#ln-nav): «Слой №», «Z», «/1652», «мм» были #ccc + opacity .6/.7 */
#ln-nav, #ln-nav span, #ln-nav label, #ln-nav t, #ln-nav div{ color:var(--text)!important; opacity:1!important; }
/* заголовок «speed / power» в списке параметров */
#scan-param .param-list div, #scan-modes .param-list div{ color:var(--text)!important; }
/* action-кнопки: белый текст на более тёмном синем для контраста ≥4.5:1 */
.apply, .save-preset, button.apply, .save-preset button{ background:var(--accent-d)!important; }
/* кнопка «Экспорт .lam»: белый на светло-зелёном был 3.3:1 → более тёмный зелёный (≈5.7:1) */
#app-header .hdr-right .export-btn{ background:#166534!important; border-color:#14532d!important; }