:root{
  --pine:#3B6B33;
  --pine-dark:#20401C;
  --cream:#F5EFDC;
  --cream-2:#FBF8EE;
  --stamp:#A63A2E;
  --brass:#F2B705;
  --brass-deep:#B98600;
  --ink:#23241E;
  --sage:#5C7355;
  --line:#DED3A0;
}
*{box-sizing:border-box;}
body{
  margin:0;
  background:var(--cream);
  color:var(--ink);
  font-family:'Source Serif 4', Georgia, serif;
}
.display{font-family:'Oswald',sans-serif; text-transform:uppercase; letter-spacing:0.04em;}
.mono{font-family:'IBM Plex Mono',monospace;}

header.board{
  background:linear-gradient(180deg, var(--pine) 0%, var(--pine-dark) 100%);
  color:var(--cream-2);
  padding:18px 24px;
  border-bottom:6px solid var(--brass);
  display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:10px;
}
header.board .title{font-family:'Oswald',sans-serif; font-weight:700; font-size:20px; letter-spacing:0.05em;}
header.board .title:hover{opacity:0.85;}
header.board .title small{display:block; font-family:'IBM Plex Mono',monospace; font-weight:400; font-size:10.5px; color:var(--brass); margin-top:3px; text-transform:uppercase;}
header.board .who{font-family:'IBM Plex Mono',monospace; font-size:12px; display:flex; align-items:center; gap:10px; flex-wrap:wrap; justify-content:flex-end;}
header.board button.logout{background:transparent; border:1px solid rgba(255,255,255,0.4); color:var(--cream-2); padding:6px 12px; cursor:pointer; font-family:'IBM Plex Mono',monospace; font-size:11px; text-transform:uppercase;}

/* Egységes fejléc-navigáció (renderNav, api.js). Admin nézetben a sok
   menüpont kategóriánként legördülő panelbe rendeződik (nav-group-toggle
   + nav-group-panel), hogy a fejléc ne legyen zsúfolt — a kategória neve
   akkor is kiemelt (has-active), ha az aktuális oldal a becsukott panelben
   van, hogy mindig látszódjon, melyik szekcióban áll a felhasználó.
   Csoportvezetői nézetben (kevés elem) egyszerű, önálló linkek maradnak. */
.nav-links{display:flex; align-items:center; gap:8px; flex-wrap:wrap;}
.nav-group{position:relative;}
.nav-group-toggle{
  background:transparent; border:1px solid rgba(255,255,255,0.4); color:var(--cream-2);
  font-family:'Oswald',sans-serif; letter-spacing:0.05em; text-transform:uppercase; font-size:12px;
  padding:9px 14px; cursor:pointer; display:inline-flex; align-items:center; gap:6px;
}
.nav-group-toggle:hover, .nav-group.open .nav-group-toggle, .nav-group-toggle.has-active{
  border-color:var(--brass); color:var(--brass);
}
.nav-caret{font-size:9px; transition:transform 0.15s;}
.nav-group.open .nav-caret{transform:rotate(180deg);}
.nav-group-panel{
  display:none; flex-direction:column; gap:1px; position:absolute; top:calc(100% + 6px); left:0;
  min-width:210px; background:var(--cream-2); border:1px solid var(--line);
  box-shadow:0 10px 24px rgba(32,64,28,0.3); padding:5px; z-index:100;
}
.nav-group.open .nav-group-panel{display:flex;}
.nav-group-panel .nav-link{
  color:var(--ink); font-family:'IBM Plex Mono',monospace; font-size:12px; text-transform:none;
  letter-spacing:0; padding:8px 10px; border-radius:1px;
}
.nav-group-panel .nav-link:hover{background:rgba(59,107,51,0.08);}
.nav-group-panel .nav-link.active{background:var(--pine); color:var(--cream-2); font-weight:600;}
.nav-link.active{background:var(--brass); color:var(--pine-dark); font-weight:700;}

/* Csoportvezetői "Ne nyomd meg" tréfagomb (renderNav) és a rá adott
   felugró üzenet — pár másodpercig látszik, majd elhalványul. */
.funny-toast{
  position:fixed; top:24px; left:50%; transform:translateX(-50%) translateY(-14px);
  background:var(--pine-dark); color:var(--cream-2); border:2px solid var(--brass);
  font-family:'Oswald',sans-serif; font-size:14px; letter-spacing:0.03em; padding:14px 24px;
  box-shadow:0 10px 28px rgba(0,0,0,0.35); z-index:9999; opacity:0;
  transition:opacity 0.25s ease, transform 0.25s ease; pointer-events:none;
}
.funny-toast.show{opacity:1; transform:translateX(-50%) translateY(0);}

main{max-width:1180px; margin:0 auto; padding:24px 20px 60px;}

.panel{background:var(--cream-2); border:1px solid var(--line);}
.panel h2{font-family:'Oswald',sans-serif; font-size:13px; letter-spacing:0.08em; text-transform:uppercase; color:var(--pine); margin:0; padding:12px 16px; border-bottom:1px solid var(--line);}

button, .btn{
  font-family:'Oswald',sans-serif; letter-spacing:0.05em; text-transform:uppercase; font-size:12px;
  border:none; padding:9px 16px; cursor:pointer; background:var(--pine); color:var(--cream-2);
}
button.yellow, .btn.yellow{background:var(--brass); color:var(--pine-dark); font-weight:600;}
button.outline{background:transparent; border:1px solid var(--pine); color:var(--pine);}
button:disabled{opacity:0.5; cursor:not-allowed;}

/* A radio/checkbox szándékosan kimarad: a width:100% ezeknél nem a
   látható jelölőt nagyítja fel, hanem a láthatatlan doboz szélességét
   nyújtja a szülő teljes szélességéig — emiatt a jelölő és a hozzá
   tartozó felirat (pl. az ebéd-választó rádiógombok, student.js
   lunchWidgetHtml) messze elcsúszik egymástól flex elrendezésben. */
input:not([type="radio"]):not([type="checkbox"]), select, textarea{
  font-family:'IBM Plex Mono',monospace; font-size:13px; padding:8px 10px; border:1px solid var(--line);
  background:var(--cream-2); color:var(--ink); width:100%;
}
label{font-family:'IBM Plex Mono',monospace; font-size:10.5px; text-transform:uppercase; color:var(--sage); display:block; margin-bottom:4px; letter-spacing:0.05em;}
.field{margin-bottom:12px;}
.field-row{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px;}

.ticket{
  display:grid; grid-template-columns:100px minmax(0,1fr) auto; gap:14px; align-items:center;
  background:var(--cream-2); border:1px dashed var(--brass); padding:10px 14px; margin-bottom:8px;
}
.ticket .date{font-family:'IBM Plex Mono',monospace; font-size:12px; color:var(--sage);}
.ticket .place b{color:var(--pine);}
.ticket .totals{font-family:'Oswald',sans-serif; font-size:17px; color:var(--pine); text-align:right;}
.ticket .totals span{display:block; font-family:'IBM Plex Mono',monospace; font-size:9.5px; color:var(--sage); font-weight:400;}
.ticket .breakdown{grid-column:1 / -1; font-family:'IBM Plex Mono',monospace; font-size:10.5px; color:var(--sage); margin-top:2px; padding-top:6px; border-top:1px dashed var(--line);}
.ticket .breakdown b{color:var(--pine); font-weight:600;}

.reason-chip{display:inline-block; font-family:'IBM Plex Mono',monospace; font-size:10px; padding:2px 7px; margin:2px 4px 2px 0; border-radius:2px; white-space:nowrap;}
.reason-chip.levonas{background:#FBEAE7; color:var(--stamp); border:1px solid var(--stamp);}
.reason-chip.jutalom{background:#EAF2E7; color:var(--pine); border:1px solid var(--pine);}

.leader-mark{color:var(--brass-deep); font-size:0.9em;}
.leader-name{color:var(--brass-deep); font-weight:700;}

.note-entry{border-left:3px solid var(--stamp); background:var(--cream-2); padding:10px 14px; margin-bottom:8px; font-size:13.5px;}
.note-entry.praise{border-left-color:var(--pine);}
.note-entry .date{font-family:'IBM Plex Mono',monospace; font-size:11px; color:var(--sage); display:block; margin-bottom:4px;}

.doc-chip{display:flex; align-items:center; gap:10px; background:var(--cream); border:1px solid var(--line); padding:9px 12px; margin-top:8px; font-size:13px;}
.doc-chip a{color:var(--pine); font-family:'IBM Plex Mono',monospace; font-size:10.5px; text-decoration:none; border-bottom:1px dotted var(--pine);}
.doc-chip .doc-name{flex:1;}

.error-box{background:#FBEAE7; border:1px solid var(--stamp); color:var(--stamp); padding:10px 14px; margin-bottom:14px; font-family:'IBM Plex Mono',monospace; font-size:12.5px;}
.ok-box{background:#EAF2E7; border:1px solid var(--pine); color:var(--pine); padding:10px 14px; margin-bottom:14px; font-family:'IBM Plex Mono',monospace; font-size:12.5px;}

.tabbar{display:flex; gap:2px; padding:0 16px; border-bottom:1px solid var(--line); background:var(--cream-2); overflow-x:auto; -webkit-overflow-scrolling:touch;}
.tabbar button{background:transparent; border:none; padding:10px 4px; margin-right:20px; color:var(--sage); border-bottom:3px solid transparent; font-size:11.5px; white-space:nowrap; flex-shrink:0;}
.tabbar button.active{color:var(--pine); border-bottom-color:var(--brass); font-weight:600;}
.tabpane{display:none; padding:16px;}
.tabpane.active{display:block;}

table.data{width:100%; border-collapse:collapse; font-size:13px;}
table.data th{text-align:left; font-family:'IBM Plex Mono',monospace; font-size:10.5px; text-transform:uppercase; color:var(--sage); border-bottom:1px solid var(--line); padding:8px;}
table.data td{padding:8px; border-bottom:1px solid var(--line);}
table.data tr:hover td{background:rgba(59,107,51,0.05);}

.login-wrap{max-width:380px; margin:80px auto; padding:0 20px;}
.login-card{background:var(--cream-2); border:1px solid var(--line); padding:28px 24px;}
.login-card h1{font-family:'Oswald',sans-serif; font-size:20px; color:var(--pine); margin:0 0 4px;}
.login-card p.sub{font-family:'IBM Plex Mono',monospace; font-size:11px; color:var(--sage); margin:0 0 20px;}

@media (max-width:640px){
  main{padding:16px 12px 50px;}
  .field-row{grid-template-columns:minmax(0,1fr);}
  .ticket{grid-template-columns:minmax(0,1fr); text-align:left;}
  .ticket .totals{text-align:left;}

  header.board{padding:14px 16px; gap:8px;}
  header.board .title{font-size:17px;}
  header.board .who{width:100%; justify-content:flex-start; gap:8px;}
  header.board .who .btn, header.board .who button{font-size:10.5px; padding:7px 10px;}
  .nav-group-panel{min-width:180px; max-width:calc(100vw - 32px);}

  table.data{display:block; overflow-x:auto; -webkit-overflow-scrolling:touch; white-space:nowrap;}
}

/* Bármelyik vízszintesen túlcsorduló elem (táblázat, széles rács) kapjon
   saját görgetést, hogy az EGÉSZ oldal soha ne csússzon oldalra mobilon. */
.scroll-x{overflow-x:auto; -webkit-overflow-scrolling:touch;}