/* Kódszabó – a tetőtervező (tfe) és a telefonos projektnézet (tfm) átszínezése a látogató színére (lásd ceg.css).
   A régi türkiz és sötétkék márkaszín helyett --ceg (gombok, kiemelés), --ceg-s (sötét fejléc) és --ceg-h (halvány háttér).
   Ami marad: a lejtéstérkép színskálája, az összefolyók kékje, a kijelölt összefolyó narancsa a rajzon,
   a zöld/sárga/piros állapotszínek és a semleges szürkék. A .tfm az ügyfélszerzővel közös, ezért ott is ez színez. */

/* ---- tetőtervező (tfe) ---- */
.tfe[data-ceg] {
  --tf-kek: var(--ceg); --tf-navy: var(--ceg-s); --tf-akt: var(--ceg);
  --tf-ceg-sz: color-mix(in srgb, var(--ceg) 82%, #000); /* szövegszín világos alapon: minden választható színnél olvasható */
  --tf-fej-vonal: color-mix(in srgb, var(--ceg-s) 76%, #fff);
  --tf-fej-halk: color-mix(in srgb, var(--ceg-h) 78%, #a3a3ab);
}
.tfe[data-ceg] .tfe-fej { border-bottom-color: var(--ceg); }
.tfe[data-ceg] .tfe-fej .tf-marka { border-right-color: var(--tf-fej-vonal); }
.tfe[data-ceg] .tfe-cim small { color: var(--tf-fej-halk); }
.tfe[data-ceg] .tfe-fg { border-color: var(--tf-fej-vonal); color: color-mix(in srgb, var(--ceg-h) 40%, #fff); }
.tfe[data-ceg] .tfe-fg:hover { background: color-mix(in srgb, var(--ceg-s) 86%, #fff); }
.tfe[data-ceg] .tfe-fg.fo { background: var(--ceg); border-color: var(--ceg); color: #fff; }
.tfe[data-ceg] :is(.tfe-fg.fo, .tfe-gomb.fo):hover { background: color-mix(in srgb, var(--ceg) 82%, #000); }
/* az állapotjel a fenti .tfe-fg szabály miatt kapja vissza a saját zöld/sárga színét (rámutatáskor sem változik) */
.tfe[data-ceg] .tfe-allapotjel, .tfe[data-ceg] .tfe-allapotjel:hover { border-color: #2d6b55; background: #1d4b3c; color: #b7f0d2; }
.tfe[data-ceg] .tfe-allapotjel.figy, .tfe[data-ceg] .tfe-allapotjel.figy:hover { border-color: #8a5a10; background: #4a3410; color: #ffd98a; }

.tfe[data-ceg] .tfe-pcim { border-left-color: var(--ceg); }
.tfe[data-ceg] .tfe-lepesek button.aktiv { background: var(--ceg-h); }
.tfe[data-ceg] :is(.tfe-lepesek button.aktiv, .tfe-also button.aktiv, .tfe-tul-cim b) { color: var(--tf-ceg-sz); }
.tfe[data-ceg] .tfe-mezok span:focus-within { border-color: var(--ceg); box-shadow: 0 0 0 2px color-mix(in srgb, var(--ceg) 22%, transparent); }
.tfe[data-ceg] :is(.tfe-lef-lista button[aria-pressed="true"], .tfe-eg[aria-pressed="true"]) { border-color: var(--ceg); background: var(--ceg-h); }
.tfe[data-ceg] .tfe-retegek li.kiemelt { border-left-color: var(--ceg); background: color-mix(in srgb, var(--ceg-h) 55%, #fff); }
.tfe[data-ceg] .tfe-tabla tr.alap td { background: color-mix(in srgb, var(--ceg-h) 55%, #fff); }
.tfe[data-ceg] .tfe-zoom button { color: var(--tf-ceg-sz); }
.tfe[data-ceg] .tfe-korvonal { stroke: var(--ceg-s); }

/* ---- a projekt telefonon (tfm; a tervező és az ügyfélszerző közös nézete) ---- */
.tfm[data-ceg] .tfm-fej { background: var(--ceg-s); border-bottom-color: var(--ceg); }
.tfm[data-ceg] .tfm-szem { color: color-mix(in srgb, var(--ceg) 82%, #000); }
.tfm[data-ceg] .tfm-kpik div:first-child { background: var(--ceg-s); border-color: var(--ceg-s); }
.tfm[data-ceg] .tfm-kpik div:first-child small { color: color-mix(in srgb, var(--ceg-h) 78%, #a3a3ab); }