/* Online dokumentáció készítő – Konkoord arculat (a network_scanner_gui.py színei) */
:root {
  --marka-kek: #0093DD;
  --marka-kek-sotet: #0079B8;
  --marka-zold: #6BA539;
  /* Világos mód: hűvös kékesszürke (pala) árnyalatok a márkakékhez; egyik felület sem tiszta fehér */
  --hatter: #D5DCE4;
  --felulet: #E7ECF1;
  --mezo: #F1F4F8;
  --keret: #BFC9D4;
  --szoveg: #1F2A37;
  --halvany: #4A5768;
  --lablec: #5F6B7A;
  --kiemeles: var(--marka-kek);
  --hiba: #AA0000;
  --hiba-hatter: #FDECEC;
  --siker: #2E7D32;
  --siker-hatter: #EAF5EA;
  --figyelem-hatter: #EDE4C8;
  --sor-hover: #D9E5F1;
  color-scheme: light;
}
[data-tema="sotet"] {
  --hatter: #1E1F22;
  --felulet: #2B2D30;
  --mezo: #26282B;
  --keret: #3C3F44;
  --szoveg: #E3E5E8;
  --halvany: #A2A7AE;
  --lablec: #8A8F96;
  --kiemeles: #4DB3EC;
  --hiba: #FF7B72;
  --hiba-hatter: #3A2424;
  --siker: #7CC47F;
  --siker-hatter: #213323;
  --figyelem-hatter: #3A3420;
  --sor-hover: #35383C;
  color-scheme: dark;
}
/* Belépés előtt (nincs még felhasználói beállítás): a rendszer témája */
@media (prefers-color-scheme: dark) {
  [data-tema="rendszer"] {
    --hatter: #1E1F22; --felulet: #2B2D30; --mezo: #26282B; --keret: #3C3F44; --szoveg: #E3E5E8;
    --halvany: #A2A7AE; --lablec: #8A8F96; --kiemeles: #4DB3EC; --hiba: #FF7B72; --hiba-hatter: #3A2424;
    --siker: #7CC47F; --siker-hatter: #213323; --figyelem-hatter: #3A3420; --sor-hover: #35383C;
    color-scheme: dark;
  }
}

* { box-sizing: border-box; }
html, body { margin: 0; }
body {
  background: var(--hatter);
  color: var(--szoveg);
  font: 15px/1.5 "Segoe UI", system-ui, -apple-system, "Ubuntu", sans-serif;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
a { color: var(--kiemeles); }
h1 { font-size: 1.5rem; color: var(--kiemeles); margin: 0 0 1rem; }
h2 { font-size: 1.15rem; color: var(--kiemeles); margin: 1.5rem 0 .75rem; }

/* Fejléc: logó, név, márkakék vonal */
.fejlec {
  background: var(--felulet);
  border-bottom: 3px solid var(--marka-kek);
  display: flex; align-items: center; gap: 1.25rem; flex-wrap: wrap;
  padding: .6rem 1.25rem;
}
.fejlec .logo { height: 34px; display: block; }
.fejlec .nev { font-weight: 600; font-size: 1.05rem; color: var(--szoveg); white-space: nowrap; }
.logo-sotet { display: none !important; }
[data-tema="sotet"] .logo-vilagos { display: none !important; }
[data-tema="sotet"] .logo-sotet { display: block !important; }
@media (prefers-color-scheme: dark) {
  [data-tema="rendszer"] .logo-vilagos { display: none !important; }
  [data-tema="rendszer"] .logo-sotet { display: block !important; }
}
.menu { display: flex; gap: .25rem; flex-wrap: wrap; flex: 1; }
.menu a { color: var(--szoveg); text-decoration: none; padding: .35rem .7rem; border-radius: 6px; }
.menu a:hover, .menu a.aktiv { background: var(--sor-hover); color: var(--kiemeles); }

main { flex: 1; width: 100%; max-width: 1200px; margin: 0 auto; padding: 1.5rem 1.25rem; }
.lablec { color: var(--lablec); font-size: .8rem; text-align: center; padding: 1rem; }

/* Kártyák, táblázatok */
.kartya { background: var(--felulet); border: 1px solid var(--keret); border-radius: 10px; padding: 1.25rem; }
.kartyak { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 1rem; }
.kartyak .kartya h3 { margin: 0 0 .25rem; font-size: 1.05rem; }
.kartyak .kartya a { text-decoration: none; }
.tabla-keret { overflow-x: auto; background: var(--felulet); border: 1px solid var(--keret); border-radius: 10px; }
table { width: 100%; border-collapse: collapse; }
th, td { text-align: left; padding: .55rem .8rem; border-bottom: 1px solid var(--keret); vertical-align: top; }
th { color: var(--halvany); font-weight: 600; font-size: .85rem; white-space: nowrap; }
tbody tr:hover { background: var(--sor-hover); }
tbody tr:last-child td { border-bottom: 0; }
.halvany { color: var(--halvany); }
.cimke { display: inline-block; padding: .05rem .5rem; border-radius: 999px; font-size: .8rem;
         background: var(--sor-hover); color: var(--szoveg); border: 1px solid var(--keret); }
.cimke.zold { border-color: var(--marka-zold); color: var(--marka-zold); }
.cimke.piros { border-color: var(--hiba); color: var(--hiba); }
.sor { display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; }
.sor.ter { justify-content: space-between; margin-bottom: 1rem; }
dl.adatok { display: grid; grid-template-columns: max-content 1fr; gap: .4rem 1.25rem; margin: 0; }
dl.adatok dt { color: var(--halvany); }
dl.adatok dd { margin: 0; }
/* Nyomtatókártyák: a hosszú értékek törhetnek; keskeny kijelzőn (telefon) a címke az érték fölött */
dl.nyomtato-adatok dd { overflow-wrap: anywhere; min-width: 0; }
@media (max-width: 640px) {
  dl.nyomtato-adatok { grid-template-columns: 1fr; gap: 0; }
  dl.nyomtato-adatok dt { margin-top: .5rem; font-size: .85rem; }
  dl.nyomtato-adatok dt:first-child { margin-top: 0; }
}

/* Gombok, űrlapok */
.gomb, button {
  display: inline-block; cursor: pointer; font: inherit; text-decoration: none;
  border: 1px solid var(--marka-kek); background: var(--marka-kek); color: #fff;
  padding: .45rem 1rem; border-radius: 6px;
}
.gomb:hover, button:hover { background: var(--marka-kek-sotet); border-color: var(--marka-kek-sotet); }
.gomb.masodlagos, button.masodlagos { background: transparent; color: var(--kiemeles); }
.gomb.masodlagos:hover, button.masodlagos:hover { background: var(--sor-hover); }
.gomb.veszelyes, button.veszelyes { background: transparent; border-color: var(--hiba); color: var(--hiba); }
.gomb.kicsi, button.kicsi { padding: .2rem .6rem; font-size: .85rem; }
button.link { background: none; border: 0; color: var(--kiemeles); padding: 0; text-decoration: underline; }
form.inline { display: inline; }
.urlap { max-width: 640px; }
.urlap .mezo { margin-bottom: 1rem; }
.urlap label { display: block; font-weight: 600; margin-bottom: .25rem; }
.urlap .mezo.pipa label { display: inline; font-weight: normal; }
input[type=text], input[type=password], input[type=email], input[type=date], input[type=search], input[type=number], select, textarea {
  width: 100%; font: inherit; color: var(--szoveg); background: var(--mezo);
  border: 1px solid var(--keret); border-radius: 6px; padding: .45rem .6rem;
}
input:focus, select:focus, textarea:focus { outline: 2px solid var(--marka-kek); outline-offset: -1px; }
.sugo { color: var(--halvany); font-size: .85rem; margin-top: .2rem; }
.mezohiba, .errorlist { color: var(--hiba); font-size: .9rem; margin: .25rem 0 0; padding: 0; list-style: none; }
.szuro { display: flex; gap: .75rem; flex-wrap: wrap; align-items: flex-end; margin-bottom: 1rem; }
.szuro > div { min-width: 160px; }
.szuro label { display: block; font-size: .85rem; color: var(--halvany); }

/* Üzenetek */
.uzenetek { list-style: none; padding: 0; margin: 0 0 1rem; }
.uzenetek li { padding: .6rem .9rem; border-radius: 6px; margin-bottom: .5rem; border: 1px solid var(--keret); }
.uzenetek .success { background: var(--siker-hatter); border-color: var(--siker); }
.uzenetek .error { background: var(--hiba-hatter); border-color: var(--hiba); }
.uzenetek .warning { background: var(--figyelem-hatter); }
.doboz-figyelem { background: var(--figyelem-hatter); border: 1px solid var(--keret); border-radius: 8px; padding: .8rem 1rem; }

/* Belépési oldalak: középre igazított kártya */
.belepes-oldal { flex: 1; display: flex; align-items: center; justify-content: center; padding: 2rem 1rem; }
.belepes-kartya { width: 100%; max-width: 420px; }
.belepes-kartya .belepes-logo { display: flex; justify-content: center; margin-bottom: .5rem; }
.belepes-kartya .belepes-logo img { height: 46px; }
.belepes-kartya .belepes-cim { text-align: center; font-weight: 600; font-size: 1.1rem; margin-bottom: 1.25rem; }
.belepes-kartya .kartya { border-top: 3px solid var(--marka-kek); }
.belepes-kartya button { width: 100%; }
.szerzo { text-align: center; font-size: .78rem; color: var(--lablec); margin-top: .9rem; }
.qr { display: flex; justify-content: center; margin: 1rem 0; }
.qr svg { background: #fff; border-radius: 6px; }
.titok { font-family: Consolas, "Ubuntu Mono", monospace; text-align: center; letter-spacing: .05em;
         background: var(--sor-hover); padding: .5rem; border-radius: 6px; word-break: break-all; }
.kodok { display: grid; grid-template-columns: repeat(2, 1fr); gap: .4rem; font-family: Consolas, "Ubuntu Mono", monospace;
         font-size: 1.05rem; text-align: center; margin: 1rem 0; }
.kodok span { background: var(--sor-hover); border-radius: 6px; padding: .35rem; }
.lapozo { display: flex; gap: .75rem; justify-content: center; align-items: center; margin-top: 1rem; }

/* Figyelmeztetési szintek (a GépLeltár ALLAPOT_SZINEK színei; sötétben tompítva) */
:root { --sz-cserelendo: #EBC4C1; --sz-cserelendo-szoveg: #6E211B; --sz-figyelmeztetes: #E8D9A8; --sz-figyelmeztetes-szoveg: #5A4511;
        --sz-informacio: #C9D3DE; --sz-informacio-szoveg: #2C3A4A; --sz-rendben: #CBE0C6; --sz-rendben-szoveg: #22451D; --sz-szoveg: #222; }
[data-tema="sotet"] { --sz-cserelendo: #5C2A30; --sz-figyelmeztetes: #5A4E1E; --sz-figyelmeztetes-szoveg: var(--sz-szoveg); --sz-cserelendo-szoveg: var(--sz-szoveg);
  --sz-informacio-szoveg: var(--sz-szoveg); --sz-rendben-szoveg: var(--sz-szoveg); --sz-informacio: #3A3D42; --sz-rendben: #24432A; --sz-szoveg: #E3E5E8; }
@media (prefers-color-scheme: dark) {
  [data-tema="rendszer"] { --sz-cserelendo: #5C2A30; --sz-figyelmeztetes: #5A4E1E; --sz-figyelmeztetes-szoveg: var(--sz-szoveg); --sz-cserelendo-szoveg: var(--sz-szoveg);
  --sz-informacio-szoveg: var(--sz-szoveg); --sz-rendben-szoveg: var(--sz-szoveg); --sz-informacio: #3A3D42; --sz-rendben: #24432A; --sz-szoveg: #E3E5E8; }
}
.szint { display: inline-block; padding: .05rem .5rem; border-radius: 4px; font-size: .82rem; color: var(--sz-szoveg); white-space: nowrap; }
.szint-cserelendo { background: var(--sz-cserelendo); color: var(--sz-cserelendo-szoveg); }
.szint-figyelmeztetes { background: var(--sz-figyelmeztetes); color: var(--sz-figyelmeztetes-szoveg); }
.szint-informacio { background: var(--sz-informacio); color: var(--sz-informacio-szoveg); }
.szint-rendben { background: var(--sz-rendben); color: var(--sz-rendben-szoveg); }

/* Lapfülek a gép adatlapján */
.fulek { display: flex; flex-wrap: wrap; gap: .25rem; border-bottom: 2px solid var(--marka-kek); margin: 1rem 0 0; }
.fulek a { padding: .4rem .75rem; text-decoration: none; color: var(--szoveg); border-radius: 6px 6px 0 0; font-size: .92rem; }
.fulek a:hover { background: var(--sor-hover); }
.fulek a.aktiv { background: var(--marka-kek); color: #fff; }
.lap-tartalom { margin-top: 1rem; }
.fulek + * { margin-top: 1rem; }

/* A cég Áttekintés fülének csempéi */
.ceg-csempek { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: .75rem; margin-bottom: 1rem; }
.ceg-csempe { display: flex; flex-direction: column; gap: .15rem; padding: .8rem 1rem; background: var(--felulet);
  border: 1px solid var(--keret); border-left: 4px solid var(--keret); border-radius: 10px; text-decoration: none; color: var(--szoveg); }
.ceg-csempe:hover { border-left-color: var(--marka-kek); background: var(--sor-hover); }
.ceg-csempe.csempe-figyelem { border-left-color: var(--sz-figyelmeztetes, #C9A227); }
.csempe-cim { font-size: .82rem; color: var(--halvany); text-transform: uppercase; letter-spacing: .03em; }
.csempe-szam { font-size: 1.6rem; line-height: 1.2; }
.csempe-reszlet { font-size: .82rem; color: var(--halvany); }
.csempe-reszlet .szint { font-size: .72rem; padding: .05rem .35rem; }

/* Kis „?” magyarázat (templates/sugo.html) */
.sugo-ikon { display: inline-block; position: relative; vertical-align: middle; font-size: 0; }
.sugo-ikon > summary { list-style: none; cursor: pointer; display: inline-flex; align-items: center; justify-content: center;
  width: 1.15rem; height: 1.15rem; border-radius: 50%; border: 1px solid var(--kiemeles); color: var(--kiemeles);
  font-size: .75rem; font-weight: 700; line-height: 1; user-select: none; }
.sugo-ikon > summary::-webkit-details-marker { display: none; }
.sugo-ikon[open] > summary { background: var(--kiemeles); color: #fff; }
.sugo-buborek { position: absolute; z-index: 30; left: 0; top: 1.6rem; width: min(24rem, 80vw); padding: .7rem .85rem;
  background: var(--felulet); color: var(--szoveg); border: 1px solid var(--keret); border-radius: 8px;
  box-shadow: 0 6px 20px rgba(0, 0, 0, .18); font-size: .85rem; font-weight: 400; line-height: 1.45; text-transform: none;
  letter-spacing: normal; white-space: normal; }
table.suru th, table.suru td { padding: .35rem .6rem; font-size: .88rem; }
th a.rendezo { color: inherit; text-decoration: none; }
th a.rendezo:hover { color: var(--kiemeles); }
.oszlopvalaszto { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: .2rem .75rem; margin: .5rem 0; }
.oszlopvalaszto label { font-weight: normal; font-size: .9rem; }
.nezet-sav { display: flex; gap: .4rem; flex-wrap: wrap; align-items: center; margin-bottom: .75rem; }
.nezet-sav a.gomb.aktiv { background: var(--marka-kek); color: #fff; }

@media print {
  .fejlec, .lablec, .szuro, .lapozo, button, .gomb { display: none !important; }
  body { background: #fff; color: #000; }
}

/* Áttekintés: összesítő számok és cégkártyák */
:root { --atk-piros: #C62828; --atk-narancs: #D97706; --atk-zold: #2E7D32; --atk-szurke: #9AA0A6; --atk-mutato: #DAE1E9; }
[data-tema="sotet"] { --atk-piros: #FF7B72; --atk-narancs: #F0B429; --atk-zold: #7CC47F; --atk-szurke: #6B7076; --atk-mutato: #232528; }
@media (prefers-color-scheme: dark) {
  [data-tema="rendszer"] { --atk-piros: #FF7B72; --atk-narancs: #F0B429; --atk-zold: #7CC47F; --atk-szurke: #6B7076; --atk-mutato: #232528; }
}
.atk-osszesito { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: .75rem; margin-bottom: 1.5rem; }
.atk-szam { background: var(--felulet); border: 1px solid var(--keret); border-radius: 10px; padding: .9rem 1.1rem; }
.atk-szam b { display: block; font-size: 1.9rem; line-height: 1.1; color: var(--szoveg); }
.atk-szam span { color: var(--halvany); font-size: .9rem; }
.atk-szam.piros b { color: var(--atk-piros); }
.atk-szam.narancs b { color: var(--atk-narancs); }

.atk-kartyak { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 1rem; }
.atk-kartya { display: flex; flex-direction: column; gap: .85rem; background: var(--felulet); border: 1px solid var(--keret);
  border-left: 5px solid var(--atk-zold); border-radius: 10px; padding: 1.1rem 1.25rem; color: inherit; text-decoration: none;
  transition: box-shadow .15s, transform .15s; }
.atk-kartya:hover { box-shadow: 0 4px 14px rgba(0, 0, 0, .10); transform: translateY(-1px); }
.atk-kartya.teendo { border-left-color: var(--atk-piros); }
.atk-fej { display: flex; justify-content: space-between; align-items: flex-start; gap: .75rem; }
.atk-nev { font-size: 1.1rem; font-weight: 600; color: var(--kiemeles); }
.atk-cim { color: var(--halvany); font-size: .88rem; }
.atk-allapot { flex: none; font-size: .78rem; font-weight: 600; padding: .15rem .6rem; border-radius: 999px; text-transform: uppercase; letter-spacing: .03em; }
.atk-allapot.rendben { color: var(--atk-zold); border: 1px solid var(--atk-zold); }
.atk-allapot.teendo { color: #fff; background: var(--atk-piros); }
.atk-allapot.inaktiv { color: var(--halvany); border: 1px solid var(--keret); }
.atk-mutatok { display: grid; grid-template-columns: repeat(auto-fit, minmax(70px, 1fr)); gap: .5rem; }
.atk-mutato { background: var(--atk-mutato); border-radius: 8px; padding: .5rem .25rem; text-align: center; min-width: 0; }
.atk-mutato b { display: block; font-size: 1.45rem; line-height: 1.15; color: var(--szoveg); }
.atk-mutato span { font-size: .72rem; color: var(--halvany); }
.atk-mutato.nulla b { color: var(--atk-szurke); }
.atk-mutato.piros b { color: var(--atk-piros); }
.atk-mutato.narancs b { color: var(--atk-narancs); }
.atk-nemak { font-size: .85rem; color: var(--atk-piros); margin-top: -.35rem; }
.atk-halozat { border-top: 1px solid var(--keret); padding-top: .7rem; display: flex; flex-direction: column; gap: .3rem; }
.atk-alcim { font-size: .75rem; text-transform: uppercase; letter-spacing: .05em; color: var(--halvany); }
.atk-telephely { display: flex; align-items: center; gap: .5rem; font-size: .9rem; }
.atk-pont { flex: none; width: .6rem; height: .6rem; border-radius: 50%; background: var(--atk-szurke); }
.atk-pont.zold { background: var(--atk-zold); }
.atk-pont.piros { background: var(--atk-piros); }
.atk-tnev { font-weight: 500; }
.atk-tadat { margin-left: auto; color: var(--halvany); white-space: nowrap; }
.atk-ures { color: var(--halvany); font-size: .9rem; }

/* Áttekintés, kicsinyített nézet (sok céghez): kis csempék névvel, gépszámmal és ikonokkal */
.atk-kicsi { display: none; }
.atk-kartyak.kicsi { grid-template-columns: repeat(auto-fill, minmax(175px, 1fr)); gap: .6rem; }
.atk-kartyak.kicsi .atk-kartya { padding: .55rem .75rem; gap: 0; border-left-width: 4px; }
.atk-kartyak.kicsi .atk-kartya > :not(.atk-kicsi) { display: none; }
.atk-kartyak.kicsi .atk-kicsi { display: flex; flex-direction: column; gap: .3rem; min-width: 0; flex: 1; }
.atk-kartyak.kicsi .atk-kartya.inaktiv { opacity: .6; }
/* A rövid név, ha van; különben a teljes név legfeljebb 2 sorban (a sor csempéi egyformán magasak, az ikonsor alul) */
.atk-kicsi-nev { font-weight: 600; color: var(--kiemeles); font-size: .95rem; line-height: 1.25; overflow: hidden; overflow-wrap: anywhere;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; }
.atk-kicsi-sor { margin-top: auto; display: flex; align-items: center; justify-content: space-between; gap: .5rem; }
.atk-kicsi svg { width: 15px; height: 15px; flex: none; }
.atk-kicsi-gep { display: inline-flex; align-items: center; gap: .25rem; font-size: .8rem; color: var(--halvany); }
.atk-ikonok { display: inline-flex; gap: .45rem; }
.atk-ikon { display: inline-flex; align-items: center; gap: .15rem; font-size: .78rem; font-weight: 600; }
.atk-ikon.piros { color: var(--atk-piros); }
.atk-ikon.narancs { color: var(--atk-narancs); }
.atk-ikon.zold { color: var(--atk-zold); }

/* Figyelmeztetés elnémítása: kapcsoló a sor végén, felugró indoklás */
tr.elnemitott td { opacity: .55; }
tr.elnemitott td.kapcsolo-cella { opacity: 1; }
.elnemitas-ok { margin-top: .3rem; font-size: .85rem; font-style: italic; color: var(--halvany); }
.kapcsolo-cella { position: relative; text-align: center; }
.kapcsolo { display: inline-block; position: relative; width: 38px; height: 20px; border-radius: 999px; cursor: pointer;
  background: var(--atk-szurke); border: none; padding: 0; vertical-align: middle; list-style: none; transition: background .15s; }
.kapcsolo::-webkit-details-marker { display: none; }
.kapcsolo::after { content: ""; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%;
  background: #fff; box-shadow: 0 1px 2px rgba(0, 0, 0, .3); transition: left .15s; }
.kapcsolo.be { background: var(--marka-kek); }
.kapcsolo.be::after { left: 20px; }
.kapcsolo.inaktiv { cursor: default; opacity: .6; }
details.kapcsolo-reszlet > summary { list-style: none; }
.elnemitas-urlap { position: absolute; right: 0; top: 2.2rem; z-index: 20; width: 340px; text-align: left; background: var(--felulet);
  border: 1px solid var(--keret); border-radius: 10px; padding: .9rem; box-shadow: 0 8px 24px rgba(0, 0, 0, .18);
  display: flex; flex-direction: column; gap: .5rem; }
.elnemitas-urlap textarea { width: 100%; }
.elnemitas-urlap p { margin: 0; font-size: .8rem; }
.zarolt { cursor: help; font-size: .95rem; opacity: .7; }

/* Nem látott hálózati eszközök (halványítva, az utolsó adataikkal) és törölt gépek a géplistában */
.nem-latott { opacity: .62; }
.nem-latott:hover { opacity: .85; }
.nem-latott-jelzes { margin: 0 0 .5rem; font-size: .9rem; }
tr.torolt-sor td { opacity: .6; }

/* Topológia: görgetősávval és egérrel húzva is mozgatható */
.topologia { overflow: auto; max-height: 78vh; padding: .5rem; cursor: grab; user-select: none; }
.topologia.huzas { cursor: grabbing; }
.topologia svg { display: block; }

/* ==========================================================================================
   Noctua kinézet: a Noctua ventilátorok csokoládébarna és bézs színei (a logó változatlan)
   ========================================================================================== */
[data-tema="noctua"] {
  --marka-kek: #7A4B33;          /* a gombok, fülek, kiemelések: Noctua-barna */
  --marka-kek-sotet: #5C3624;
  --marka-zold: #5F7F2E;
  --hatter: #CDB494;             /* bézs ventilátorkeret */
  --felulet: #E4D2B5;
  --mezo: #EFE3CD;
  --keret: #B19572;
  --szoveg: #34241B;
  --halvany: #66503F;
  --lablec: #6B5444;
  --kiemeles: #7A4B33;
  --hiba: #A3221B;
  --hiba-hatter: #EFD3C6;
  --siker: #4F6B2A;
  --siker-hatter: #DCE0BC;
  --figyelem-hatter: #E9D49F;
  --sor-hover: #D8C1A0;
  --sz-cserelendo: #E5AE9F; --sz-figyelmeztetes: #DDC184; --sz-figyelmeztetes-szoveg: #46320E;
  --sz-informacio: #D3C4AE; --sz-rendben: #C6D09E; --sz-szoveg: #2E2018;
  --sz-cserelendo-szoveg: #5E1A14; --sz-informacio-szoveg: #3A2A1F; --sz-rendben-szoveg: #2F4317;
  --atk-piros: #A3221B; --atk-narancs: #A85A0C; --atk-zold: #4F6B2A; --atk-szurke: #9C8A76; --atk-mutato: #D8C3A2;
  color-scheme: light;
}
/* Fejléc: sötét csokoládébarna sáv (a logó sötét változatával), bézs feliratokkal */
[data-tema="noctua"] .fejlec { background: #4A3227; border-bottom-color: #C49A6C; }
[data-tema="noctua"] .logo-vilagos { display: none !important; }
[data-tema="noctua"] .logo-sotet { display: block !important; }
[data-tema="noctua"] .fejlec .nev { color: #F1E3CB; }
[data-tema="noctua"] .menu a { color: #E6D3B5; }
[data-tema="noctua"] .menu a:hover, [data-tema="noctua"] .menu a.aktiv { background: #634435; color: #FFF1DA; }


/* Fiókmenü a fejlécben: kör alakú monogram + név, lenyíló a saját fiókkal, kinézettel, kilépéssel */
.fiok-menu { position: relative; margin-left: auto; }
.fiok-menu summary { list-style: none; display: flex; align-items: center; gap: .45rem; cursor: pointer; padding: .25rem .5rem;
  border-radius: 999px; color: var(--szoveg); }
.fiok-menu summary::-webkit-details-marker { display: none; }
.fiok-menu summary:hover, .fiok-menu[open] summary { background: var(--sor-hover); }
.fiok-ikon { display: inline-flex; align-items: center; justify-content: center; width: 1.9rem; height: 1.9rem; border-radius: 50%;
  background: var(--marka-kek); color: #fff; font-weight: 600; font-size: .9rem; }
.fiok-nev { font-size: .9rem; max-width: 11rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fiok-lenyilo { position: absolute; right: 0; top: calc(100% + .4rem); z-index: 50; width: 240px; display: flex; flex-direction: column;
  gap: .6rem; padding: .8rem; background: var(--felulet); border: 1px solid var(--keret); border-radius: 10px;
  box-shadow: 0 6px 20px rgba(0, 0, 0, .18); color: var(--szoveg); }
.fiok-fej { display: flex; flex-direction: column; border-bottom: 1px solid var(--keret); padding-bottom: .5rem; font-size: .9rem; }
.fiok-lenyilo a { color: var(--kiemeles); text-decoration: none; }
.fiok-lenyilo a:hover { text-decoration: underline; }
.fiok-lenyilo label { display: block; font-size: .8rem; margin-bottom: .2rem; }
.fiok-lenyilo select { padding: .3rem .4rem; }
[data-tema="noctua"] .fiok-menu summary { color: #F1E3CB; }
[data-tema="noctua"] .fiok-menu summary:hover, [data-tema="noctua"] .fiok-menu[open] summary { background: #634435; }
[data-tema="noctua"] .fiok-ikon { background: #C49A6C; color: #3A271D; }

/* Egysoros fejléc: a program neve két sorba tördelve, kisebb betűvel, a menü nem törik */
.fejlec { flex-wrap: nowrap; gap: 1rem; }
.fejlec .nev { white-space: normal; max-width: 8.5rem; line-height: 1.15; font-size: .95rem; }
.menu { flex-wrap: nowrap; }
.menu a { white-space: nowrap; padding: .35rem .6rem; }
@media (max-width: 1100px) {             /* keskeny ablakban mégis törhet, hogy semmi ne lógjon le */
  .fejlec, .menu { flex-wrap: wrap; }
  .fiok-nev { display: none; }
}

/* Topológia: a doboz és az ábra háttere a kinézetet követi (a dobozok színe marad) */
.topologia { background: var(--felulet); }
.topologia svg > rect:first-of-type { fill: transparent; }
.topologia svg > text:not([fill]) { fill: var(--szoveg); }

/* Figyelmeztetések menü: darabszám-jelvény (a legsúlyosabb szint színével) */
.menu-szam { display: inline-block; min-width: 1.4rem; padding: 0 .4rem; margin-left: .15rem; border-radius: 999px; font-size: .75rem;
  font-weight: 700; line-height: 1.35rem; text-align: center; color: #fff; background: var(--atk-szurke); }
.menu-szam.piros { background: var(--atk-piros); }
.menu-szam.narancs { background: var(--atk-narancs); }

/* „Rendszer ▾” lenyíló a menüben (szuperadmin pontjai) */
.menu-lenyilo { position: relative; }
.menu-lenyilo summary { list-style: none; cursor: pointer; color: var(--szoveg); padding: .35rem .6rem; border-radius: 6px; white-space: nowrap; }
.menu-lenyilo summary::-webkit-details-marker { display: none; }
.menu-lenyilo summary:hover, .menu-lenyilo summary.aktiv, .menu-lenyilo[open] summary { background: var(--sor-hover); color: var(--kiemeles); }
.menu-lenyilo-tartalom { position: absolute; left: 0; top: calc(100% + .35rem); z-index: 50; min-width: 180px; display: flex;
  flex-direction: column; padding: .35rem; background: var(--felulet); border: 1px solid var(--keret); border-radius: 10px;
  box-shadow: 0 6px 20px rgba(0, 0, 0, .18); }
.menu-lenyilo-tartalom a { color: var(--szoveg) !important; }
.menu-lenyilo-tartalom a:hover, .menu-lenyilo-tartalom a.aktiv { background: var(--sor-hover) !important; color: var(--kiemeles) !important; }
[data-tema="noctua"] .menu-lenyilo summary { color: #E6D3B5; }
[data-tema="noctua"] .menu-lenyilo summary:hover, [data-tema="noctua"] .menu-lenyilo summary.aktiv,
[data-tema="noctua"] .menu-lenyilo[open] summary { background: #634435; color: #FFF1DA; }

/* Gyorskereső a fejlécben, javaslatlistával */
.gyorskereso { position: relative; margin-left: auto; flex: 0 1 15rem; min-width: 9rem; }
.gyorskereso input { padding: .35rem .6rem; font-size: .88rem; }
.gyorskereso + .fiok-menu { margin-left: 0; }
.gyorskereso-lista { position: absolute; right: 0; top: calc(100% + .35rem); z-index: 60; width: min(30rem, 90vw); display: flex;
  flex-direction: column; padding: .3rem; background: var(--felulet); border: 1px solid var(--keret); border-radius: 10px;
  box-shadow: 0 6px 20px rgba(0, 0, 0, .18); }
.gyorskereso-lista[hidden] { display: none; }
.gyorskereso-lista a { display: flex; align-items: baseline; gap: .45rem; padding: .4rem .55rem; border-radius: 6px; color: var(--szoveg);
  text-decoration: none; font-size: .88rem; overflow: hidden; white-space: nowrap; }
.gyorskereso-lista a .halvany { overflow: hidden; text-overflow: ellipsis; }
.gyorskereso-lista a .cimke { font-size: .7rem; flex: none; }
.gyorskereso-lista a:hover, .gyorskereso-lista a.kijelolt { background: var(--sor-hover); }
.gyorskereso-lista a.osszes { color: var(--kiemeles); justify-content: center; border-top: 1px solid var(--keret); border-radius: 0 0 6px 6px; }
[data-tema="noctua"] .gyorskereso input { background: #634435; border-color: #8A6650; color: #FFF1DA; }
[data-tema="noctua"] .gyorskereso input::placeholder { color: #CDB494; }

/* Kellékek: szintsáv */
.kellek-sav { display: inline-block; vertical-align: middle; width: calc(100% - 7.5rem); min-width: 4rem; height: .75rem;
  background: var(--sor-hover); border-radius: 4px; overflow: hidden; }
.kellek-sav-ertek { height: 100%; border-radius: 4px; background: var(--atk-szurke); }
.kellek-sav-ertek.piros { background: var(--atk-piros); }
.kellek-sav-ertek.sarga { background: var(--atk-narancs); }
.kellek-sav-ertek.zold { background: var(--atk-zold); }
.kellek-szam { display: inline-block; width: 2.6rem; text-align: right; font-weight: 600; font-size: .85rem; }
.kellek-szam.piros { color: var(--atk-piros); }

/* Szerviznapló: új bejegyzés űrlapja */
.szerviz-urlap { display: flex; gap: .75rem; flex-wrap: wrap; align-items: flex-start; padding: .9rem 1rem; }
.szerviz-urlap label { display: block; font-size: .85rem; color: var(--halvany); margin-bottom: .2rem; }
.szerviz-urlap input[type=date] { width: 10rem; }

/* Gépek lista: tömeges műveletek sávja (a kijelöléskor jelenik meg, az ablak alján) */
.tomeges-sav { position: sticky; bottom: .75rem; z-index: 40; display: flex; flex-wrap: wrap; gap: .6rem; align-items: center;
  margin-top: .75rem; padding: .6rem .9rem; background: var(--felulet); border: 1px solid var(--marka-kek); border-radius: 10px;
  box-shadow: 0 6px 20px rgba(0, 0, 0, .18); }
.tomeges-sav[hidden] { display: none; }
.tomeges-sav select, .tomeges-sav input[type=text] { width: auto; min-width: 14rem; }

/* Szoftverkereső: a gépek listája lenyitható */
.szoftver-gepek summary { cursor: pointer; color: var(--kiemeles); white-space: nowrap; }
.szoftver-gepek ul { margin: .35rem 0 0; padding-left: 1.1rem; font-size: .88rem; }

/* Szervercím: leírás, kódrészlet, rádiógombok */
.leiras summary { cursor: pointer; }
.leiras h3 { font-size: 1rem; margin: 1rem 0 .3rem; color: var(--kiemeles); }
.leiras ol, .leiras ul { margin: .3rem 0; padding-left: 1.3rem; }
.leiras li { margin-bottom: .3rem; }
pre.kod { background: var(--mezo); border: 1px solid var(--keret); border-radius: 6px; padding: .6rem .8rem; overflow-x: auto;
  font-size: .82rem; margin: .4rem 0; }
.urlap label.pipa-sor { display: block; font-weight: normal; margin: .2rem 0; }
.doboz-rendben { background: var(--siker-hatter); border: 1px solid var(--siker); }

/* Telepítési lefedettség */
.lefedettseg-sav { height: .6rem; border-radius: 999px; background: var(--hiba-hatter); overflow: hidden; border: 1px solid var(--keret); }
.lefedettseg-sav > div { height: 100%; background: var(--atk-zold); }
.atk-lefedettseg { font-size: .85rem; color: var(--halvany); margin-top: .25rem; }
.atk-lefedettseg.hiany strong { color: var(--atk-piros); }
.kicsi-lenyilo summary { list-style: none; display: inline-block; }
.kicsi-lenyilo summary::-webkit-details-marker { display: none; }

/* Trendek az Áttekintésben: mérőszámonként kis vonaldiagram */
.atk-trendek { margin-bottom: 1.25rem; }
.atk-trendek > summary { cursor: pointer; margin-bottom: .6rem; }
.trend-racs { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: .75rem; }
.trend-kartya { background: var(--felulet); border: 1px solid var(--keret); border-radius: 10px; padding: .6rem .8rem .5rem; }
.trend-fej { display: flex; justify-content: space-between; align-items: baseline; font-size: .85rem; color: var(--halvany); }
.trend-fej b { font-size: 1.3rem; color: var(--szoveg); }
.trend-svg { display: block; margin: .3rem 0 .1rem; overflow: visible; }
.trend-pont { cursor: pointer; }
.trend-pont:hover { fill: var(--kiemeles); fill-opacity: .18; }
.trend-lab { display: flex; justify-content: space-between; font-size: .72rem; }
.trend-tabla { margin-top: .6rem; }
.trend-tabla summary { cursor: pointer; font-size: .85rem; }

/* Helyszíni nézet (telefon): nagy gombok, egy oszlop */
.helyszin { max-width: 560px; margin: 0 auto; }
.helyszin-fej h1 { margin: .1rem 0 .3rem; font-size: 1.6rem; }
.helyszin-adatok { display: grid; grid-template-columns: max-content 1fr; gap: .35rem .9rem; margin: 1rem 0; font-size: 1rem; }
.helyszin-adatok dt { color: var(--halvany); }
.helyszin-adatok dd { margin: 0; }
.helyszin-blokk { margin: .6rem 0; }
.helyszin-blokk > summary { list-style: none; display: block; text-align: center; }
.helyszin-blokk > summary::-webkit-details-marker { display: none; }
.helyszin-blokk form { display: flex; flex-direction: column; gap: .45rem; padding: .8rem; margin-top: .4rem; background: var(--felulet);
  border: 1px solid var(--keret); border-radius: 10px; }
.helyszin-blokk input, .helyszin-blokk textarea { font-size: 1rem; }
.gomb.nagy, button.nagy { display: block; width: 100%; padding: .85rem 1rem; font-size: 1.05rem; text-align: center; border-radius: 10px; }
.helyszin-lista { list-style: none; padding: 0; margin: 0 0 1rem; }
.helyszin-lista li { padding: .55rem 0; border-bottom: 1px solid var(--keret); }
.csak-mobil { display: none; }
@media (max-width: 700px) { .csak-mobil { display: inline-block; } }

/* Telefon: a menü a ☰ gomb mögött, a kereső teljes szélességben, semmi nem lóg ki */
.menu-gomb { display: none; }
@media (max-width: 700px) {
  .fejlec { flex-wrap: wrap; gap: .5rem; padding: .5rem .75rem; }
  .fejlec .nev { display: none; }
  .menu-gomb { display: inline-block; margin-left: auto; font-size: 1.1rem; }
  .fejlec .menu { display: none; flex-basis: 100%; flex-direction: column; flex-wrap: nowrap; }
  .fejlec.menu-nyitva .menu { display: flex; }
  .menu-lenyilo-tartalom { position: static; box-shadow: none; }
  .gyorskereso { order: 5; flex: 1 1 100%; margin-left: 0; }
  .fiok-menu { margin-left: 0; }
  main { padding: 1rem .75rem; }
  .helyszin-adatok dd { overflow-wrap: anywhere; }
  .tabla-keret { max-width: 100%; }
}

/* Cég: kapcsolattartók, szerződés */
.kartya-alcim { font-size: 1rem; color: var(--kiemeles); margin: 1.1rem 0 .4rem; padding-top: .8rem; border-top: 1px solid var(--keret); }
.kapcsolattarto-tabla input[type=text], .kapcsolattarto-tabla input[type=email] { min-width: 9rem; }
.sla-tabla td, .sla-tabla th { vertical-align: middle; }
.sla-tabla th { white-space: normal; }
.sla-tabla input { min-width: 7rem; }
.szerzodes-urlap .mezo { margin-bottom: .6rem; }
.szerzodes-urlap h3 { font-size: .95rem; color: var(--kiemeles); }
.pdf-lista { margin: .2rem 0 .6rem; padding-left: 1.1rem; }

/* Licencek */
tr.licenc-tullepes td { background: var(--hiba-hatter); }
.tomor-lista { margin: .3rem 0 0; padding-left: 1.1rem; font-size: .88rem; }
.elonezet-lista { list-style: none; padding: 0; margin: 0; font-size: .88rem; max-height: 26rem; overflow: auto; }
.elonezet-lista li { padding: .25rem 0; border-bottom: 1px solid var(--keret); }
.elonezet-lista li.illik { color: var(--siker); }
.elonezet-lista li.kizarva { color: var(--halvany); text-decoration: line-through; }
@media (max-width: 600px) {
  .sugo-buborek { position: fixed; left: 16px; right: 16px; top: auto; bottom: 16px; width: auto; }
}

/* Teendők az Áttekintés tetején (core/teendok.py) */
.teendok { margin: 1rem 0; }
.teendo-kat { border-top: 1px solid var(--keret); padding: .45rem 0; }
.teendo-kat:first-of-type { border-top: 0; }
.teendo-kat > summary { cursor: pointer; display: flex; align-items: center; gap: .45rem; list-style: none; }
.teendo-kat > summary::-webkit-details-marker { display: none; }
.teendo-kat > summary::after { content: "▸"; margin-left: auto; color: var(--halvany); }
.teendo-kat[open] > summary::after { content: "▾"; }
.teendo-pont { width: .7rem; height: .7rem; border-radius: 50%; flex: none; background: var(--halvany); }
.teendo-pont.piros { background: var(--hiba); }
.teendo-pont.narancs { background: #D98E04; }
.teendo-pont.kek { background: var(--marka-kek); }
.teendo-lista { margin: .35rem 0 .1rem 1.15rem; padding: 0; list-style: none; }
.teendo-lista li { padding: .12rem 0; font-size: .9rem; }
.teendo-ceg { display: inline-block; font-size: .75rem; padding: 0 .4rem; margin-right: .25rem; border-radius: 4px;
  background: var(--sor-hover); color: var(--szoveg); }
.teendo-tobb > summary { cursor: pointer; margin-left: 1.15rem; font-size: .85rem; }

/* Kiemelt ügyfél (Ceg.kiemelt): arany csillag, felső szegély, címke – csak belső felhasználónak */
:root { --kiemelt: #A87A08; --kiemelt-hatter: #F7EBCB; }
[data-tema="sotet"] { --kiemelt: #E0B84A; --kiemelt-hatter: #3D3420; }
@media (prefers-color-scheme: dark) { [data-tema="rendszer"] { --kiemelt: #E0B84A; --kiemelt-hatter: #3D3420; } }
.kiemelt-csillag { color: var(--kiemelt); }
.kiemelt-cimke { background: var(--kiemelt-hatter); color: var(--kiemelt); border: 1px solid var(--kiemelt); font-weight: 600; }
.atk-kartya.kiemelt { border-top: 3px solid var(--kiemelt); background: linear-gradient(var(--kiemelt-hatter), var(--felulet) 5.5rem); }
.teendo-ceg.kiemelt { background: var(--kiemelt-hatter); color: var(--kiemelt); font-weight: 600; }
.teendo-kat.info .teendo-pont { background: var(--halvany); }
.teendo-kat.info > summary strong { font-weight: 500; color: var(--halvany); }