/* A prototípus (spec/szmk-prototipus_3.html) design-rendszere, változatlanul átemelve.
   Szemantikus, magyar osztálynevek — a nézetek ezekre építenek. */
:root{
  --zold:#1f6b45; --zold-vil:#2e8b5a; --zold-halv:#e8f3ec; --zold-kontur:#c3e0d0;
  --alap:#f6f7f5; --lap:#ffffff; --szoveg:#1c2621; --halvany:#6b7a72;
  --vonal:#dfe5e1; --piros:#c0392b; --piros-halv:#fdeceb;
  --sarga:#b8860b; --sarga-halv:#fdf6e3; --kek:#2c5f8d; --kek-halv:#eaf1f8;
  --r:10px; --arny:0 1px 2px rgba(0,0,0,.05), 0 4px 12px rgba(0,0,0,.04);
}
*{box-sizing:border-box}
body{margin:0;font:15px/1.5 -apple-system,BlinkMacSystemFont,"Segoe UI",Inter,system-ui,sans-serif;
  color:var(--szoveg);background:var(--alap);-webkit-font-smoothing:antialiased}
h1,h2,h3,h4{margin:0;font-weight:650;letter-spacing:-.01em}
h1{font-size:22px} h2{font-size:18px} h3{font-size:15px} h4{font-size:13px}
a{color:var(--zold);text-decoration:none} a:hover{text-decoration:underline}
button{font:inherit;cursor:pointer}
input,select,textarea{font:inherit;color:inherit;padding:8px 10px;border:1px solid var(--vonal);
  border-radius:8px;background:#fff;width:100%}
input:focus,select:focus,textarea:focus{outline:2px solid var(--zold-vil);outline-offset:-1px;border-color:transparent}
label{display:block;font-size:12px;font-weight:600;color:var(--halvany);margin-bottom:4px;
  text-transform:uppercase;letter-spacing:.04em}
.field{margin-bottom:12px}
.row{display:flex;gap:12px;flex-wrap:wrap} .row>*{flex:1;min-width:150px}

/* --- váz --- */
#app{display:flex;min-height:100vh}
#oldalsav{width:230px;flex:0 0 230px;background:#14261d;color:#cfe0d6;display:flex;flex-direction:column;
  position:sticky;top:0;height:100vh}
#oldalsav .brand{padding:18px 18px 14px;border-bottom:1px solid #24382d}
#oldalsav .brand b{color:#fff;font-size:16px;display:block}
#oldalsav .brand span{font-size:11px;color:#7fa08d;text-transform:uppercase;letter-spacing:.08em}
#oldalsav nav{padding:10px 10px;flex:1;overflow:auto}
#oldalsav a{display:flex;align-items:center;gap:10px;padding:9px 12px;border-radius:8px;
  color:#cfe0d6;font-size:14px;margin-bottom:2px}
#oldalsav a:hover{background:#1e3527;text-decoration:none;color:#fff}
#oldalsav a.aktiv{background:var(--zold);color:#fff;font-weight:600}
#oldalsav a .em{font-size:15px;width:20px;text-align:center}
#oldalsav .csop{padding:12px 18px;border-top:1px solid #24382d;font-size:12px;color:#7fa08d}
main{flex:1;min-width:0;display:flex;flex-direction:column}
header.top{background:var(--lap);border-bottom:1px solid var(--vonal);padding:12px 24px;
  display:flex;align-items:center;gap:16px;flex-wrap:wrap;position:sticky;top:0;z-index:20}
header.top .cim{flex:1;min-width:180px}
header.top .cim small{display:block;color:var(--halvany);font-size:12px;font-weight:500}
.szerepvalto{display:flex;align-items:center;gap:8px;background:var(--zold-halv);
  border:1px solid var(--zold-kontur);border-radius:999px;padding:4px 6px 4px 12px}
.szerepvalto span{font-size:11px;font-weight:700;color:var(--zold);text-transform:uppercase;letter-spacing:.05em}
.szerepvalto select{width:auto;border:none;background:transparent;padding:2px 4px;font-weight:600;font-size:13px}
.tartalom{padding:24px;max-width:1180px;width:100%}

/* --- kártyák, gombok --- */
.kartya{background:var(--lap);border:1px solid var(--vonal);border-radius:var(--r);
  box-shadow:var(--arny);margin-bottom:18px;overflow:hidden}
.kartya>.fej{padding:14px 18px;border-bottom:1px solid var(--vonal);display:flex;
  align-items:center;gap:12px;flex-wrap:wrap}
.kartya>.fej h2,.kartya>.fej h3{flex:1;min-width:140px}
.kartya>.torzs{padding:18px}
.kartya>.torzs.tomor{padding:0}
.b{display:inline-flex;align-items:center;gap:6px;padding:8px 14px;border-radius:8px;
  border:1px solid var(--vonal);background:#fff;font-size:14px;font-weight:600;color:var(--szoveg)}
.b:hover{background:#f2f4f2}
.b.fo{background:var(--zold);border-color:var(--zold);color:#fff}
.b.fo:hover{background:var(--zold-vil)}
.b.vesz{color:var(--piros);border-color:#f0c8c3}
.b.kicsi{padding:5px 10px;font-size:13px}
.b:disabled{opacity:.45;cursor:not-allowed}
.cimke{display:inline-block;padding:2px 8px;border-radius:999px;font-size:11.5px;font-weight:700;
  letter-spacing:.02em;white-space:nowrap}
.c-zold{background:var(--zold-halv);color:var(--zold)}
.c-sarga{background:var(--sarga-halv);color:var(--sarga)}
.c-piros{background:var(--piros-halv);color:var(--piros)}
.c-kek{background:var(--kek-halv);color:var(--kek)}
.c-szurke{background:#eef0ee;color:var(--halvany)}

/* --- táblák --- */
table{width:100%;border-collapse:collapse;font-size:14px}
th{text-align:left;font-size:11px;text-transform:uppercase;letter-spacing:.05em;color:var(--halvany);
  padding:10px 14px;border-bottom:1px solid var(--vonal);background:#fbfcfb;font-weight:700;white-space:nowrap}
td{padding:10px 14px;border-bottom:1px solid #eef1ef;vertical-align:middle}
tr:last-child td{border-bottom:none}
tbody tr:hover{background:#fafbfa}
td.szam,th.szam{text-align:right;font-variant-numeric:tabular-nums}
.hetvege td{background:#f7f8f7;color:var(--halvany)}
.nowrap,td.nowrap{white-space:nowrap}

/* --- mutatók --- */
.mutatok{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:14px;margin-bottom:18px}
.mutato{background:var(--lap);border:1px solid var(--vonal);border-radius:var(--r);padding:14px 16px;box-shadow:var(--arny)}
.mutato .cimke2{font-size:11px;text-transform:uppercase;letter-spacing:.05em;color:var(--halvany);font-weight:700}
.mutato .ertek{font-size:26px;font-weight:700;margin-top:6px;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.mutato .alsz{font-size:12.5px;color:var(--halvany);margin-top:2px}

/* --- egyéb --- */
.uzenet{padding:11px 14px;border-radius:8px;font-size:13.5px;margin-bottom:14px;border:1px solid}
.u-info{background:var(--kek-halv);border-color:#cfe0ef;color:#1d4569}
.u-info{color:#1d4569}
.u-fig{background:var(--sarga-halv);border-color:#eddcb0;color:#7a5c07}
.u-ok{background:var(--zold-halv);border-color:var(--zold-kontur);color:var(--zold)}
.fulek{display:flex;gap:4px;border-bottom:1px solid var(--vonal);padding:0 18px;background:#fbfcfb;flex-wrap:wrap}
.fulek button{background:none;border:none;padding:12px 14px;font-size:14px;font-weight:600;
  color:var(--halvany);border-bottom:2px solid transparent;margin-bottom:-1px}
.fulek button.aktiv{color:var(--zold);border-bottom-color:var(--zold)}
.ures{padding:34px;text-align:center;color:var(--halvany);font-size:14px}
.szurke{color:var(--halvany)} .kicsi{font-size:12.5px}
.jobb{text-align:right} .kozep{text-align:center}
.rakas{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.sav{height:7px;background:#eef0ee;border-radius:99px;overflow:hidden}
.sav i{display:block;height:100%;background:var(--zold);border-radius:99px}

/* --- modal --- */
.fedo{position:fixed;inset:0;background:rgba(15,25,20,.45);display:flex;align-items:center;
  justify-content:center;padding:20px;z-index:100}
.modal{background:#fff;border-radius:14px;max-width:560px;width:100%;max-height:88vh;overflow:auto;
  box-shadow:0 20px 60px rgba(0,0,0,.25)}
.modal .fej{padding:16px 20px;border-bottom:1px solid var(--vonal);display:flex;align-items:center}
.modal .fej h2{flex:1}
.modal .torzs{padding:20px}
.modal .lab{padding:14px 20px;border-top:1px solid var(--vonal);display:flex;gap:8px;justify-content:flex-end;background:#fbfcfb}
.x{border:none;background:none;font-size:22px;line-height:1;color:var(--halvany);padding:0 4px}

/* --- publikus --- */
.pub{max-width:820px;margin:0 auto;padding:44px 20px}
.pub .hero{text-align:center;margin-bottom:34px}
.pub .hero .alma{font-size:46px}
.pub .hero h1{font-size:32px;margin:10px 0 8px}
.pub .hero p{color:var(--halvany);font-size:16px;max-width:520px;margin:0 auto}
.pub .dobozok{display:grid;grid-template-columns:1fr 1fr;gap:16px}
@media(max-width:720px){.pub .dobozok{grid-template-columns:1fr}}
.jellemzok{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:14px;margin-top:26px}
.jellemzo{background:#fff;border:1px solid var(--vonal);border-radius:var(--r);padding:14px}
.jellemzo b{display:block;margin-bottom:4px}
.jellemzo span{font-size:13px;color:var(--halvany)}

.nyomtat{display:none}
@media print{
  #oldalsav,header.top,.nemnyomtat{display:none!important}
  .tartalom{padding:0} .kartya{box-shadow:none;border:none}
  body{background:#fff}
}
@media(max-width:860px){
  #oldalsav{position:fixed;left:-230px;z-index:50;transition:left .2s} #oldalsav.nyit{left:0}
  .tartalom{padding:16px}
}

/* SZMK-váltó az oldalsávban — csak több tagság esetén jelenik meg. */
#oldalsav .szmk-valto { padding: 0 14px 12px; }
#oldalsav .szmk-valto label { display: block; margin-bottom: 4px; }
#oldalsav .szmk-valto select { width: 100%; }