/*
 * com_vezetekmeretezo — témák (kézzel írt; a meretezo.css generált, azt ne szerkeszd).
 *
 *   .vzm-theme-dark   a webapp eredeti sötét színvilága (alapértelmezés, nincs felülírás)
 *   .vzm-theme-light  világos színvilág
 *   .vzm-theme-auto   a látogató rendszerbeállítását követi (prefers-color-scheme)
 *
 * Az ábrák (.diagram) sötét háttéren maradnak: az SVG-k színei arra készültek.
 */

/* ---------- Világos: változók ---------- */
.vzm-app.vzm-theme-light {
  --bg: #f6f7f9; --panel: #ffffff; --panel2: #eef1f5; --border: #cfd6df;
  --text: #1d2330; --muted: #566070; --accent: #b36b00; --accent2: #1c776d;
  --ok: #23804d; --bad: #c23a3a; --warn: #9a6200;
}
@media (prefers-color-scheme: light) {
  .vzm-app.vzm-theme-auto {
    --bg: #f6f7f9; --panel: #ffffff; --panel2: #eef1f5; --border: #cfd6df;
    --text: #1d2330; --muted: #566070; --accent: #b36b00; --accent2: #1c776d;
    --ok: #23804d; --bad: #c23a3a; --warn: #9a6200;
  }
}

/* ---------- Világos: a generált CSS fix sötét színei ---------- */
.vzm-app.vzm-theme-light header { background: linear-gradient(135deg, #ffffff, #eef1f5); }
.vzm-app.vzm-theme-light select,
.vzm-app.vzm-theme-light input[type=number],
.vzm-app.vzm-theme-light input[type=text],
.vzm-app.vzm-theme-light table.res th { background: #f8f9fb; }
.vzm-app.vzm-theme-light .edu { background: #fff8ec; }
.vzm-app.vzm-theme-light .formula { background: #f3f5f8; }
.vzm-app.vzm-theme-light .mode-switch button.active,
.vzm-app.vzm-theme-light button.calc { color: #ffffff; }
.vzm-app.vzm-theme-light table.res td.hl { background: rgba(179, 107, 0, .14); }

@media (prefers-color-scheme: light) {
  .vzm-app.vzm-theme-auto header { background: linear-gradient(135deg, #ffffff, #eef1f5); }
  .vzm-app.vzm-theme-auto select,
  .vzm-app.vzm-theme-auto input[type=number],
  .vzm-app.vzm-theme-auto input[type=text],
  .vzm-app.vzm-theme-auto table.res th { background: #f8f9fb; }
  .vzm-app.vzm-theme-auto .edu { background: #fff8ec; }
  .vzm-app.vzm-theme-auto .formula { background: #f3f5f8; }
  .vzm-app.vzm-theme-auto .mode-switch button.active,
  .vzm-app.vzm-theme-auto button.calc { color: #ffffff; }
  .vzm-app.vzm-theme-auto table.res td.hl { background: rgba(179, 107, 0, .14); }
}

/* ---------- Ábrák: mindig sötét háttér ---------- */
.vzm-app .diagram { background: #181b20; }
.vzm-app .diagram .cap { color: #b8c0cc; }

/* ---------- Kétoszlopos sorok: a mezők egy vonalban, ha az egyik címke több sorba törik ----------
 * Az oszlopok (div: címke + mező + csúszka + gomb, legfeljebb 4 elem) közös rácssorokon
 * osztoznak (subgrid), így a címkesor egyforma magas, a mezők egy vonalba kerülnek. */
.vzm-app .row2, .vzm-app .row3 { grid-template-rows: repeat(4, auto); row-gap: 0; column-gap: 10px; }
.vzm-app .row2 > div, .vzm-app .row3 > div { display: grid; grid-row: span 4; grid-template-rows: subgrid; align-content: start; }
.vzm-app .row2 > div > label, .vzm-app .row3 > div > label { align-self: end; }

/* ---------- Tudástár: minden táblázat, megjegyzés és lista egyforma (teljes) szélességű ----------
 * A webappból örökölt jelölésben eltérő inline max-width értékek vannak (820/860/900 px) —
 * ezeket csak !important írja felül. */
.vzm-app .knowledge table.res,
.vzm-app .knowledge p.note,
.vzm-app .knowledge ol.steps { max-width: none !important; width: 100%; }
.vzm-app .knowledge table.res { margin-bottom: 8px; }

/* ---------- Gyorsbeállítások: rendezett, csoportosított kártyák a két oszlop alatt ---------- */
.vzm-app .presets {
  background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 14px 16px 6px; margin: 20px 0 0;
}
.vzm-app .presets > .lbl { font-size: .8rem; color: var(--muted); margin: 0 0 10px; }
.vzm-app .presets-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 6px 18px; }
.vzm-app .preset-group h4 {
  margin: 0 0 6px; font-size: .75rem; letter-spacing: .5px; text-transform: uppercase; color: var(--accent2);
}
.vzm-app .preset-group button {
  display: block; width: 100%; text-align: left; margin: 0 0 8px; padding: 7px 11px;
  background: var(--panel2); color: var(--text); border: 1px solid var(--border); border-radius: 8px;
  font-family: inherit; font-size: .88rem; line-height: 1.3; cursor: pointer;
}
.vzm-app .preset-group button small { display: block; color: var(--muted); font-size: .78rem; margin-top: 2px; }
.vzm-app .preset-group button:hover { border-color: var(--accent); }
.vzm-app .preset-group button.active { border-color: var(--accent); box-shadow: inset 3px 0 0 var(--accent); }

/* ---------- Minden témában: a sablon (Bootstrap/Cassiopeia) stílusai ne írják felül a méretezőét ---------- */
.vzm-app header h1 { color: var(--text); }
.vzm-app header h1 small { color: var(--muted); }
/* A méretező .card osztálya a Bootstrap .card-jával ütközik: az saját szövegszínt állít (--card-color) */
.vzm-app .card {
  --card-color: var(--text); --bs-card-color: var(--text);
  --card-bg: var(--panel);   --bs-card-bg: var(--panel);
  --card-border-color: var(--border); --bs-card-border-color: var(--border);
  color: var(--text);
}
/* A Cassiopeia minden <table>-re ráteszi a Bootstrap táblázat-változóit (sötét szöveg, --body-bg háttér) */
.vzm-app table.res {
  --table-color: var(--text); --bs-table-color: var(--text);
  --table-bg: transparent;    --bs-table-bg: transparent;
  --table-border-color: var(--border); --bs-table-border-color: var(--border);
  --table-accent-bg: transparent; --bs-table-accent-bg: transparent;
  color: var(--text);
  margin-bottom: 0;
}
.vzm-app table.res td { color: var(--text); background-color: transparent; }
.vzm-app table.res td.hl { color: var(--accent); }
.vzm-app table.res td.okc { color: var(--ok); }
.vzm-app table.res td.badc { color: var(--bad); }

/*
 * ---------- „A sablont követi" (vzm-theme-site) ----------
 * A színek a sablon változóiból jönnek, így a sablon sötét/világos váltóját
 * (pl. <html data-bs-theme>, data-ejkek-mode) azonnal követik:
 *   1. az ÉJKÉK sablon változói (--ejkek-*), ha vannak;
 *   2. különben a Joomla/Bootstrap 5.3 változói (előtag nélkül és --bs- előtaggal);
 *   3. végül világos alapértékek.
 * A verdikt-színek (megfelel / nem / határeset) jelentést hordoznak — azok maradnak.
 */
.vzm-app.vzm-theme-site {
  --bg:      var(--ejkek-bg,      var(--body-bg, var(--bs-body-bg, #ffffff)));
  --panel:   var(--ejkek-surface, var(--body-bg, var(--bs-body-bg, #ffffff)));
  --panel2:  var(--ejkek-bg2,     var(--tertiary-bg, var(--bs-tertiary-bg, #f2f4f8)));
  --field:   var(--ejkek-bg2,     var(--body-bg, var(--bs-body-bg, #ffffff)));
  --border:  var(--ejkek-border,  var(--border-color, var(--bs-border-color, #cfd6df)));
  --text:    var(--ejkek-text,    var(--body-color, var(--bs-body-color, #1d2330)));
  --muted:   var(--ejkek-text2,   var(--secondary-color, var(--bs-secondary-color, #566070)));
  --accent:  var(--ejkek-accent,  var(--link-color, var(--bs-link-color, #0063b8)));
  --accent-text: var(--ejkek-accent-text, #ffffff);
  --accent2: var(--ejkek-link,    var(--link-color, var(--bs-link-color, #004f94)));
  background: transparent;
  color: var(--text);
  font-family: inherit;
  font-weight: inherit;
}
html[data-bs-theme="dark"] .vzm-app.vzm-theme-site,
html[data-ejkek-mode="sotet"] .vzm-app.vzm-theme-site {
  --ok: #4caf78; --bad: #ef6b6b; --warn: #e0a83c;
}
html[data-bs-theme="light"] .vzm-app.vzm-theme-site,
html[data-ejkek-mode="kivetito"] .vzm-app.vzm-theme-site {
  --ok: #1e7a45; --bad: #b3261e; --warn: #8a5a00;
}

.vzm-app.vzm-theme-site header {
  background: var(--panel);
  border: 1px solid var(--border);
  border-bottom: 2px solid var(--accent);
  border-radius: var(--radius) var(--radius) 0 0;
}
.vzm-app.vzm-theme-site nav.tabs { padding-left: 0; padding-right: 0; }
.vzm-app.vzm-theme-site main { padding-left: 0; padding-right: 0; }
.vzm-app.vzm-theme-site nav.tabs button { background: var(--panel2); color: var(--text); }
.vzm-app.vzm-theme-site nav.tabs button.active { background: var(--panel); }
.vzm-app.vzm-theme-site section.tab { background: var(--panel); }
.vzm-app.vzm-theme-site .card { background: var(--panel2); }
.vzm-app.vzm-theme-site select,
.vzm-app.vzm-theme-site input[type=number],
.vzm-app.vzm-theme-site input[type=text] { background: var(--field); color: var(--text); }
.vzm-app.vzm-theme-site table.res th { background: var(--panel2); color: var(--muted); }
.vzm-app.vzm-theme-site table.res td.hl { background: color-mix(in srgb, var(--accent) 18%, transparent); }
.vzm-app.vzm-theme-site .edu { background: var(--panel2); }
.vzm-app.vzm-theme-site .formula { background: var(--field); }
.vzm-app.vzm-theme-site .mode-switch { background: var(--panel2); }
.vzm-app.vzm-theme-site .mode-switch button.active,
.vzm-app.vzm-theme-site button.calc { color: var(--accent-text); }
.vzm-app.vzm-theme-site .chips button { background: var(--panel); }
.vzm-app.vzm-theme-site .diagram { background: var(--panel2); }
html[data-bs-theme="dark"] .vzm-app.vzm-theme-site .diagram,
html[data-ejkek-mode="sotet"] .vzm-app.vzm-theme-site .diagram { background: var(--ejkek-nav, #181b20); }

/*
 * ---------- Világos ábrák ----------
 * Az SVG-k színei sötét háttérre készültek (a rajzoló a meretezo.js-ben változatlan);
 * világos módban a sötét elemeket CSS-sel világos párjukra cseréljük
 * (a CSS felülírja az SVG fill/stroke attribútumait).
 * Érvényes: világos téma; automatikus téma világos rendszernél; „a sablont követi"
 * téma, ha a sablon nem jelez sötét módot.
 */
.vzm-app.vzm-theme-light .diagram,
html:not([data-bs-theme="dark"]):not([data-ejkek-mode="sotet"]) .vzm-app.vzm-theme-site .diagram {
  background: var(--panel2);
}
.vzm-app.vzm-theme-light .diagram .cap,
html:not([data-bs-theme="dark"]):not([data-ejkek-mode="sotet"]) .vzm-app.vzm-theme-site .diagram .cap { color: var(--muted); }
/* kábelköpeny / egyerű kábel háttere */
.vzm-app.vzm-theme-light .diagram [fill="#14161b"],
html:not([data-bs-theme="dark"]):not([data-ejkek-mode="sotet"]) .vzm-app.vzm-theme-site .diagram [fill="#14161b"] { fill: #ffffff; }
.vzm-app.vzm-theme-light .diagram [stroke="#58b8ae"],
html:not([data-bs-theme="dark"]):not([data-ejkek-mode="sotet"]) .vzm-app.vzm-theme-site .diagram [stroke="#58b8ae"] { stroke: #1c776d; }
/* védőcső */
.vzm-app.vzm-theme-light .diagram [fill="#101216"],
html:not([data-bs-theme="dark"]):not([data-ejkek-mode="sotet"]) .vzm-app.vzm-theme-site .diagram [fill="#101216"] { fill: #e3e8ef; }
/* cső- és tálcakontúr, tartók, feliratok */
.vzm-app.vzm-theme-light .diagram [stroke="#9aa3af"],
html:not([data-bs-theme="dark"]):not([data-ejkek-mode="sotet"]) .vzm-app.vzm-theme-site .diagram [stroke="#9aa3af"] { stroke: #5b6574; }
.vzm-app.vzm-theme-light .diagram [stroke="#6b7684"],
html:not([data-bs-theme="dark"]):not([data-ejkek-mode="sotet"]) .vzm-app.vzm-theme-site .diagram [stroke="#6b7684"] { stroke: #4b5563; }
.vzm-app.vzm-theme-light .diagram [stroke="#8a9aa8"],
html:not([data-bs-theme="dark"]):not([data-ejkek-mode="sotet"]) .vzm-app.vzm-theme-site .diagram [stroke="#8a9aa8"] { stroke: #5b6574; }
.vzm-app.vzm-theme-light .diagram text,
html:not([data-bs-theme="dark"]):not([data-ejkek-mode="sotet"]) .vzm-app.vzm-theme-site .diagram text { fill: #343b45; }
@media (prefers-color-scheme: light) {
  .vzm-app.vzm-theme-auto .diagram { background: var(--panel2); }
  .vzm-app.vzm-theme-auto .diagram .cap { color: var(--muted); }
  .vzm-app.vzm-theme-auto .diagram [fill="#14161b"] { fill: #ffffff; }
  .vzm-app.vzm-theme-auto .diagram [stroke="#58b8ae"] { stroke: #1c776d; }
  .vzm-app.vzm-theme-auto .diagram [fill="#101216"] { fill: #e3e8ef; }
  .vzm-app.vzm-theme-auto .diagram [stroke="#9aa3af"] { stroke: #5b6574; }
  .vzm-app.vzm-theme-auto .diagram [stroke="#6b7684"] { stroke: #4b5563; }
  .vzm-app.vzm-theme-auto .diagram [stroke="#8a9aa8"] { stroke: #5b6574; }
  .vzm-app.vzm-theme-auto .diagram text { fill: #343b45; }
}

/*
 * ---------- Biztosító-táblázat (kiegészítő fül, #tabBt) ----------
 * A .layout rács 1fr oszlopa a tartalom min-content szélességéig nőne, így a négyoszlopos
 * táblázat keskeny kijelzőn (375 px) kitolná az oldalt. A kártyák min-width: 0-val a rácsban
 * maradnak, a táblázat a saját dobozában (.bt-scroll) görgethető. A táblázat színei a közös
 * table.res szabályokból jönnek (sötét, világos, automatikus és „a sablont követi" téma).
 */
.vzm-app #tabBt .layout > .card { min-width: 0; }
.vzm-app .bt-scroll { overflow-x: auto; }
.vzm-app .bt-scroll table.res td:not(:last-child) { white-space: nowrap; }
.vzm-app .bt-scroll table.res td:first-child { font-weight: 600; }
.vzm-app .bt-scroll table.res sup { color: var(--accent); font-weight: 700; }
.vzm-app .bt-cond { margin: 0 0 4px; font-size: .88rem; line-height: 1.45; }
.vzm-app .bt-cond b { color: var(--accent2); }