/* ModeloPilot keret – a keret saját oldalai (.mp-oldal) és a modelo-felületekbe beszúrt sáv (#mp-keret).
   Minden szabály a fenti két gyökérre van szűkítve, hogy a modelók saját stílusát ne zavarja.
   Az értékek a tokenek.css-ből jönnek (var(--mp-…)) – itt színt/betűt/rádiuszt közvetlenül ne írj. */
@import url("tokenek.css");

/* ── alap ── */
.mp-oldal { margin:0; background:var(--mp-bg); color:var(--mp-sz); font:15px/1.5 var(--mp-betu); -webkit-text-size-adjust:100%; }
.mp-oldal * { box-sizing:border-box; }
.mp-oldal h1, .mp-oldal h2, .mp-oldal h3 { font-family:var(--mp-betu-cim); color:var(--mp-sz); letter-spacing:-.01em; }
.mp-oldal a { color:var(--mp-link); text-underline-offset:2px; }
.mp-oldal a:hover { color:var(--mp-link-2); }
.mp-oldal code { font-size:.92em; overflow-wrap:anywhere; }
.mp-oldal :focus-visible, #mp-keret :focus-visible { outline:3px solid var(--mp-fokusz); outline-offset:2px; }
.mp-szam, .mp-tabla, .mp-adatok dd { font-variant-numeric:tabular-nums; }
.mp-rejtett { position:absolute !important; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }

/* ── tesztüzem-sáv ── */
.mp-teszt { background:var(--mp-terrakotta-h); color:var(--mp-link-2); font:600 13px/1.4 var(--mp-betu); padding:7px 16px; text-align:center; border-bottom:1px solid var(--mp-vonal-eros); }

/* ── fejléc (vízszintes menü) ── */
.mp-fej { display:flex; align-items:center; gap:4px 24px; flex-wrap:wrap; background:var(--mp-lap); border-bottom:1px solid var(--mp-vonal); padding:8px 24px; min-height:64px; }
.mp-fej nav { display:flex; gap:2px; flex-wrap:wrap; }
.mp-fej nav a { color:var(--mp-halv); text-decoration:none; font-size:15px; padding:0 12px; min-height:var(--mp-erintes); display:inline-flex; align-items:center; border-bottom:2px solid transparent; }
.mp-fej nav a:hover { color:var(--mp-sz); }
.mp-fej nav a[aria-current="page"] { color:var(--mp-sz); font-weight:600; border-bottom-color:var(--mp-terrakotta); }
.mp-fej .mp-link { color:var(--mp-sz); text-decoration:none; min-height:var(--mp-erintes); padding:0 6px; }
.mp-fej .mp-link:hover { color:var(--mp-link); text-decoration:underline; }
.mp-logo { display:inline-flex; align-items:center; gap:10px; color:var(--mp-sz) !important; text-decoration:none !important; min-height:var(--mp-erintes); }
.mp-logo svg { flex:none; display:block; }
.mp-logo-szo { font:700 20px/1 var(--mp-betu-cim); letter-spacing:-.02em; }
.mp-ter { flex:1; }
@media (max-width:760px) {
  .mp-fej { padding:6px 16px; gap:0 12px; }
  .mp-fej nav { order:10; flex-basis:calc(100% + 32px); flex-wrap:nowrap; overflow-x:auto; margin:0 -16px; padding:0 6px; }
  .mp-fej nav a { white-space:nowrap; padding:0 10px; }
}

/* ── elrendezés ── */
.mp-fo { max-width:1040px; margin:28px auto; padding:0 16px; overflow-wrap:break-word; }
.mp-fo.mp-fo-szeles { max-width:1320px; }
.mp-lab { max-width:1040px; margin:32px auto; padding:16px; color:var(--mp-halv); font-size:12px; border-top:1px solid var(--mp-vonal); }
.mp-kartya { background:var(--mp-lap); border:1px solid var(--mp-vonal); border-radius:var(--mp-r-nagy); padding:20px 24px; margin-bottom:18px; box-shadow:var(--mp-arnyek); min-width:0; }
.mp-kartya h1 { font-size:24px; font-weight:700; margin:0 0 14px; line-height:1.2; }
.mp-kartya h2 { font-size:18px; font-weight:600; margin:0 0 12px; }
.mp-kartya h3 { font-size:15px; font-weight:600; margin:16px 0 8px; }
.mp-kozep { max-width:520px; margin-left:auto; margin-right:auto; }
@media (max-width:600px) { .mp-kartya { padding:16px; } .mp-fo { margin:16px auto; } .mp-kartya h1 { font-size:21px; } }

/* ── mezők, címkék ── */
.mp-oldal label { display:flex; flex-direction:column; gap:6px; font-size:13px; font-weight:500; color:var(--mp-halv); margin:12px 0; }
.mp-oldal label.mp-jelolo { flex-direction:row; align-items:flex-start; gap:10px; color:var(--mp-sz); font-weight:400; }
.mp-oldal input:not([type=checkbox]):not([type=radio]):not([type=file]):not([type=hidden]), .mp-oldal select, .mp-oldal textarea {
  min-height:var(--mp-erintes); padding:0 12px; border:1px solid var(--mp-mezo-keret); border-radius:var(--mp-r); font:inherit; font-size:15px;
  color:var(--mp-sz); background:var(--mp-lap); max-width:100%; }
.mp-oldal textarea { padding:10px 12px; line-height:1.45; }
.mp-oldal input[type=checkbox], .mp-oldal input[type=radio] { width:20px; height:20px; margin:1px 0 0; accent-color:var(--mp-grafit); flex:none; }
.mp-oldal input[type=file] { font:inherit; font-size:14px; max-width:100%; }
.mp-oldal input:focus-visible, .mp-oldal select:focus-visible, .mp-oldal textarea:focus-visible { outline:3px solid var(--mp-fokusz); outline-offset:1px; border-color:var(--mp-fokusz); }
.mp-oldal input::placeholder, .mp-oldal textarea::placeholder { color:var(--mp-halv); opacity:1; }
.mp-zarolt, .mp-oldal input[readonly] { background:var(--mp-lap-2) !important; color:var(--mp-sz); }

/* ── gombok ── */
/* a hidden attribútum mindig rejtsen – a display:flex / inline-flex szabályok különben felülírnák */
.mp-oldal [hidden], #mp-keret [hidden] { display:none !important; }
.mp-gomb, #mp-keret .mp-gomb { display:inline-flex; align-items:center; justify-content:center; gap:6px; min-height:var(--mp-erintes); padding:0 18px;
  background:var(--mp-terrakotta); color:var(--mp-sz-sotet) !important; border:1px solid var(--mp-terrakotta); border-radius:var(--mp-r);
  font:600 15px/1.2 var(--mp-betu); cursor:pointer; text-decoration:none !important; text-align:center; vertical-align:middle; }
.mp-gomb:hover, #mp-keret .mp-gomb:hover { background:var(--mp-terrakotta-2); border-color:var(--mp-terrakotta-2); }
.mp-gomb:disabled, .mp-gomb[aria-busy="true"] { opacity:.65; cursor:wait; }
.mp-masodlagos, #mp-keret .mp-masodlagos { background:var(--mp-lap); color:var(--mp-sz) !important; border-color:var(--mp-mezo-keret); font-weight:500; }
.mp-masodlagos:hover { background:var(--mp-lap-2); border-color:var(--mp-sz); }
.mp-sotet { background:var(--mp-grafit); border-color:var(--mp-grafit); }
.mp-sotet:hover { background:var(--mp-grafit-2); border-color:var(--mp-grafit-2); }
.mp-veszely-gomb, .mp-gomb.mp-veszely-gomb { background:var(--mp-hiba); border-color:var(--mp-hiba); color:var(--mp-sz-sotet) !important; }
.mp-veszely-gomb:hover, .mp-gomb.mp-veszely-gomb:hover { background:var(--mp-hiba-2); border-color:var(--mp-hiba-2); }
.mp-kicsi, #mp-keret .mp-kicsi { min-height:36px; padding:0 12px; font-size:14px; }
@media (pointer:coarse) { .mp-kicsi, #mp-keret .mp-kicsi { min-height:var(--mp-erintes); } }
.mp-link { background:none; border:0; padding:0; color:var(--mp-link); cursor:pointer; font:inherit; text-decoration:underline; text-underline-offset:2px; display:inline-flex; align-items:center; }
.mp-link:hover { color:var(--mp-link-2); }
@media (pointer:coarse) { .mp-link { min-height:var(--mp-erintes); } }
.mp-veszely, .mp-link.mp-veszely { color:var(--mp-hiba); }
.mp-inline { display:inline; margin:0; }
form.mp-inline { display:inline-flex; align-items:center; gap:8px; flex-wrap:wrap; vertical-align:middle; }
form.mp-inline label { margin:0; }
.mp-oldal p > .mp-gomb, .mp-oldal p > form.mp-inline { margin:4px 8px 4px 0; }

/* ── szövegek ── */
.mp-halvany { color:var(--mp-halv); }
.mp-kicsi-szoveg { font-size:13px; }

/* ── állapotcímkék ── */
.mp-cimke { display:inline-flex; align-items:center; gap:5px; font-size:12px; font-weight:600; line-height:1.4; background:var(--mp-sarga-h); color:var(--mp-sarga);
  border-radius:var(--mp-r-kerek); padding:2px 10px; white-space:nowrap; }
.mp-cimke::before { content:""; width:6px; height:6px; border-radius:50%; background:currentColor; flex:none; }
.mp-hiba-cimke { background:var(--mp-hiba-h); color:var(--mp-hiba); }
.mp-ok-cimke { background:var(--mp-ok-h); color:var(--mp-ok); }
.mp-semleges-cimke { background:var(--mp-lap-2); color:var(--mp-halv); }

/* ── értesítések ── */
.mp-uzenet { border-radius:var(--mp-r); padding:11px 14px; margin:10px 0 14px; font-size:14px; background:var(--mp-lap-2); color:var(--mp-sz);
  border:1px solid var(--mp-vonal); border-left:4px solid var(--mp-halv); }
.mp-uzenet.mp-hiba { background:var(--mp-hiba-h); color:var(--mp-hiba); border-color:var(--mp-hiba-vonal); border-left-color:var(--mp-hiba); }
.mp-uzenet.mp-ok { background:var(--mp-ok-h); color:var(--mp-ok); border-color:var(--mp-ok-vonal); border-left-color:var(--mp-ok); }
.mp-uzenet.mp-figy { background:var(--mp-sarga-h); color:var(--mp-sarga); border-color:var(--mp-sarga-vonal); border-left-color:var(--mp-sarga); }
.mp-hiba { background:var(--mp-hiba-h); color:var(--mp-hiba); }
.mp-ok { background:var(--mp-ok-h); color:var(--mp-ok); }
.mp-figy { background:var(--mp-sarga-h); color:var(--mp-sarga); }

/* ── táblázatok (keskeny képernyőn saját görgethető doboz) ── */
.mp-tabla { width:100%; border-collapse:collapse; font-size:14px; }
.mp-tabla td, .mp-tabla th { padding:10px 8px; border-bottom:1px solid var(--mp-vonal); text-align:left; vertical-align:middle; }
.mp-tabla th { font-size:12px; color:var(--mp-halv); font-weight:600; letter-spacing:.02em; }
.mp-tabla tr:hover > td { background:var(--mp-sor-hover); }
.mp-tabla input:not([type=checkbox]):not([type=radio]), .mp-tabla select { min-height:36px !important; padding:0 8px !important; font-size:14px !important; }
.mp-szam { text-align:right !important; font-variant-numeric:tabular-nums; white-space:nowrap; }
.mp-kivalasztott, .mp-kivalasztott > td { background:var(--mp-terrakotta-h) !important; }
.mp-gorget { overflow-x:auto; max-width:100%; -webkit-overflow-scrolling:touch; }
@media (max-width:760px) {
  .mp-tabla { display:block; overflow-x:auto; max-width:100%; -webkit-overflow-scrolling:touch; }
  .mp-tabla > tbody:only-child { display:table; width:100%; }
  .mp-tabla td, .mp-tabla th { padding:8px 6px; }
}

/* ── egyéb elrendezési elemek ── */
.mp-sor { display:flex; gap:12px; align-items:flex-end; flex-wrap:wrap; }
.mp-sor label { flex:1; min-width:min(200px, 100%); }
.mp-sor-ter { display:flex; justify-content:space-between; align-items:baseline; gap:8px 12px; flex-wrap:wrap; }
.mp-sor-ter > * { min-width:0; }
.mp-adatok { display:grid; grid-template-columns:max-content 1fr; gap:8px 18px; margin:0; }
.mp-adatok dt { color:var(--mp-halv); }
.mp-adatok dd { margin:0; min-width:0; overflow-wrap:anywhere; }
.mp-modelok { list-style:none; padding:0; margin:0 0 8px; }
.mp-modelok li { padding:10px 0; border-bottom:1px dashed var(--mp-vonal-eros); }
.mp-modelok li:last-child { border-bottom:0; }
.mp-qr svg { width:180px; height:180px; max-width:100%; }
.mp-titok { font-size:13px; word-break:break-all; }
.mp-naplo { list-style:none; padding:0; margin:0; font-size:13px; max-height:220px; overflow:auto; }
.mp-naplo li { padding:4px 0; border-bottom:1px solid var(--mp-vonal); }
.mp-oldal details > summary { cursor:pointer; color:var(--mp-link); margin:10px 0; padding:6px 0; font-weight:500; }
.mp-oldal details > summary:hover { color:var(--mp-link-2); }
@media (max-width:700px) { .mp-adatok { grid-template-columns:1fr; gap:2px 0; } .mp-adatok dd { margin-bottom:8px; } }

/* ── kapcsolatjelző pötty (kapcsolat.js): zöld = van internet / a szerver elérhető, piros = nincs ── */
.mp-kapcsolat { display:inline-block; width:10px; height:10px; border-radius:50%; background:var(--mp-pont-ism); flex:none; vertical-align:middle; }
.mp-kapcsolat.mp-kapcsolat-ok { background:var(--mp-pont-ok); box-shadow:0 0 0 3px var(--mp-ok-h); }
.mp-kapcsolat.mp-kapcsolat-nincs { background:var(--mp-pont-nincs); box-shadow:0 0 0 3px var(--mp-hiba-h); }

/* ── sáv a modelo-felületek tetején (grafit) ── */
#mp-keret { font:14px/1.4 var(--mp-betu); color:var(--mp-sz); position:sticky; top:0; z-index:50; }
#mp-keret * { box-sizing:border-box; }
#mp-keret .mp-sav { display:flex; align-items:center; gap:6px 14px; flex-wrap:wrap; background:var(--mp-grafit); color:var(--mp-sz-sotet); padding:6px 20px; min-height:56px; }
#mp-keret .mp-sav a { color:var(--mp-sz-sotet); text-decoration:none; }
#mp-keret .mp-sav a:hover { text-decoration:underline; }
#mp-keret .mp-logo { color:var(--mp-sz-sotet) !important; gap:8px; }
#mp-keret .mp-logo:hover { text-decoration:none; }
#mp-keret .mp-logo-szo { font-size:17px; }
#mp-keret .mp-sav-modelo { font:600 15px var(--mp-betu-cim); }
#mp-keret .mp-sav-aa { border:1px solid var(--mp-halv-sotet); border-radius:var(--mp-r-kerek); padding:0 12px; min-height:32px; display:inline-flex; align-items:center; max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
#mp-keret .mp-sav-allapot { font-size:13px; color:var(--mp-halv-sotet); }
#mp-keret .mp-sav-allapot.mp-hiba { color:var(--mp-hiba-sotet); background:none; }
#mp-keret .mp-sav-link { min-height:var(--mp-erintes); display:inline-flex; align-items:center; padding:0 4px; }
#mp-keret .mp-masodlagos { background:transparent; color:var(--mp-sz-sotet) !important; border-color:var(--mp-halv-sotet); }
#mp-keret .mp-masodlagos:hover { background:var(--mp-grafit-2); }
#mp-keret :focus-visible { outline-color:var(--mp-fokusz-sotet); }
#mp-keret .mp-kapcsolat, #mp-keret .mp-kapcsolat.mp-kapcsolat-ok, #mp-keret .mp-kapcsolat.mp-kapcsolat-nincs { box-shadow:0 0 0 2px var(--mp-sz-sotet); }
#mp-keret .mp-teszt { font-size:12px; padding:5px 16px; }
@media (max-width:760px) { #mp-keret .mp-sav { padding:6px 12px; } #mp-keret .mp-ter { display:none; } }
/* logó-jel színei (templates/_logo.html) */
.mp-jel-alap { fill:var(--mp-grafit); } .mp-jel-vonal { stroke:var(--mp-sz-sotet); } .mp-jel-tu { fill:var(--mp-terrakotta); }
#mp-keret .mp-jel-alap { fill:var(--mp-grafit-2); }