/* ===== Globális téma ===== */
:root{
  --bg: #eaf2ff;            /* háttér */
  --panel: #3c86c3;         /* panel szín */
  --text: #ffff00;          /* szöveg szín */
  --muted: #6a7685;
  --primary: #1e6bd6;
  --primary-600:#1554a9;
  --border:#3c86c3;
  --link:#ffff00;
  --link-hover:#646464;
  --ok:#1f7a1f;
  --warn:#9a6b00;

  /* Oldalsáv és kanyar kép paraméterek */
  --side-w: 150px;          /* oldalsáv szélessége */
  --curve-w: 150px;         /* fejlec1.png szélesség (dísz) */
  --curve-h: 92px;          /* fejlec1.png magasság (dísz) */
  --side-btn-h: 30px;       /* oldalsáv gombmagasság */
  --logo-size: 50px;        /* logó méret a fejlécben */
  --topbar-pad-left: 16px;  /* topbar bal padding */
}

*{ box-sizing: border-box; }

/* A teljes oldal ne görgessen – a görgetés a MAIN-ben történik */
html, body{ height:100%; overflow:hidden; }

body{
  margin:0;
  font-family: Arial, Helvetica, sans-serif;
  color: var(--text);
  background: var(--panel);
}

/* ===== Oldalrács (desktop elrendezés) ===== */
.page{
  /* fix viewport kitöltés -> a belső scroll a .main-ben lesz */
  height: 100dvh;
  display: grid;
  grid-template-rows: 92px minmax(0,1fr);   /* a 2. sor zsugorodhat/görgethet */
  grid-template-columns: var(--side-w) 1fr;
  grid-template-areas:
    "top top"
    "side main";
}

/* Rácsterületek */
.top  { grid-area: top;  }
.side { grid-area: side; }
.main { grid-area: main; }
.mobile-bottombar{display: none;}

/* Belső panelek: csak ezek görögnek */
.side,
.main{
  min-height:0 !important;            /* grid-gyerek: engedjük zsugorodni */
  overflow:auto;
  -webkit-overflow-scrolling:touch;

  /* A MAIN-ben a .content fel tudja venni a maradék helyet */
  display:flex;
  flex-direction:column;
}

/* --- Mobil toolbar alap (ha később kell) --- */
.mobile-toolbar{ display:none; }

/* Mobil toolbar select */
.mobile-toolbar .sel{
  appearance:none;
  -webkit-appearance:none;
  -moz-appearance:none;
  border:0;
  border-radius:10px;
  padding:10px 12px;
  font-size:14px;
  font-weight:700;
  background:var(--panel);
  color:var(--text);
  margin-right:8px;
}
.mobile-toolbar .sel:focus{ outline:none; }
.mobile-toolbar .sel:hover{ background:#1d4c7d; }

/* Mobilos gomb (ha kell külön) */
.btn.btn--mobile{
  background:var(--panel);
  color:var(--text);
  padding:10px 12px;
  border-radius:10px;
  font-weight:700;
  text-decoration:none;
  white-space:nowrap;
}
.btn.btn--mobile:hover{ background:#1d4c7d; }

/* ===== FEJLÉC / TOPBAR ===== */
.top{
  background: var(--panel);
  border-bottom:0px solid var(--border);
  position: relative;
  overflow: visible;
}
.topbar{
  height: 92px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  padding-left: var(--topbar-pad-left);
  background: none;
  border-bottom: 0px solid var(--border);
  box-shadow: none !important;
  position: relative;
  z-index: 3;
}
/* Háttércsík – .png! */
.top::before{
  content: "";
  position: absolute;
  inset: 0;
  background:
    url('pics/fejlec2.png') repeat-x bottom,
    var(--panel);
  z-index: 1;
  pointer-events: none;
}
/* Kanyargó dísz – .png! */
.top::after{
  content:"";
  position:absolute;
  width:var(--curve-w);
  height:100%;
  background:url('pics/fejlec1.png') no-repeat right center;
  background-size: auto 100%;
  left: var(--side-w);
  transform: translateX(-100%);
  top: 0;
  bottom: 0; 
  pointer-events:none;
  z-index: 2;
}

.brand{display:flex; align-items:center; gap:12px;}
.brand .logo{
  width: var(--logo-size);
  height: var(--logo-size);
  flex-shrink: 0;
  margin-left: calc( (var(--side-w) / 2) - (var(--logo-size) / 2) - var(--topbar-pad-left) );
  background: url('pics/MTVA.svg') no-repeat center center;
  background-size: contain;
  filter: brightness(0) invert(1);
}
.brand .title{
  font-size:28px; font-weight:700; letter-spacing:.2px; color:var(--text);
  margin-left: calc( (var(--side-w) / 2) - (var(--logo-size) / 2) );
}

.actions{ display:flex; align-items:center; gap:10px; }
.userbox{display:flex; flex-direction:column; margin-right:6px; line-height:1.1;}
.userbox .label{font-size:11px; color:var(--text);}
.userbox .name{font-size:14px; color:var(--text);}

/* ===== GOMBOK ===== */
.btn{
  display:inline-flex; align-items:center; gap:8px;
  border:0px solid var(--border);
  background:var(--panel); color:var(--text);
  padding:10px 12px; border-radius:10px;
  font-weight:700; font-size:14px; text-decoration:none; cursor:pointer;
}
.btn:hover{ background:#1d4c7d; }
.btn.ghost{ background:var(--panel); color:var(--text); }
.btn.ghost:hover{ background:#1d4c7d; }

/* Sidebar gombok */
.btn--sidebar{
  height: var(--side-btn-h);
  line-height: var(--side-btn-h);
  padding: 0 12px;
  width:110px; text-align:left; box-sizing:border-box;
}

/* ===== OLDALSÁV ===== */
.side{
  grid-area: side;
  background:
    url('pics/bckgrnd.png') repeat-y right,
    var(--panel);
  border-right: 0px solid var(--border);
}
.sidebar{ height:100%; display:flex; flex-direction:column; padding:14px 14px 10px; }
.side-scroll{
  overflow:auto; flex:1; padding-right:4px;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.side-scroll::-webkit-scrollbar{ display: none; }

.section{
  font-weight:700; margin:6px 0; color: var(--text);
  font-size:12px; text-transform:uppercase; letter-spacing:.8px;
}
.hr{height:1px; background:var(--border); margin:10px 0;}

/* ÉV választó */
.year-select{ width:100%; margin:6px 0 12px; }
.year-select select{
  height: var(--side-btn-h);
  line-height: var(--side-btn-h);
  padding: 0 12px;
  width:110px;
  border:0px;
  border-radius:10px;
  font-size:14px;
  color:var(--text);
  background:var(--panel);
  outline: none;
}
.year-select select option{
  background: var(--panel);
  color: var(--text);
}
.year-select select:hover,
.year-select select:focus{
  background:#1d4c7d;
  color:var(--text);
}
.year-select select option:hover,
.year-select select option:checked{
  background: var(--panel);
  color: var(--text);
}

/* HÓNAP lista */
.nav{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:0px;}
.nav a{
  height: var(--side-btn-h);
  line-height: var(--side-btn-h);
  padding: 0 12px;
  display:block;
  border:0px solid var(--border); border-radius:12px;
  text-decoration:none; color:var(--text); background:var(--panel);
  text-align:left; width:110px; box-sizing:border-box;
}
.nav a:hover{ background:#1d4c7d; }
.nav span.disabled{
  height: var(--side-btn-h);
  line-height: var(--side-btn-h);
  padding: 0 12px;
  display:block; width:110px; box-sizing:border-box;
  border:0px dashed var(--border); border-radius:12px;
  color:var(--link-hover);
  background:var(--panel);
  font-size:14px; text-align:left;
}

/* ===== FŐ TARTALOM ===== */
.main{ background:#d6ebff; }

.content{
  margin:18px 20px;
  background:#fff;
  border:0;
  border-radius:12px;
  box-shadow:0 4px 14px rgba(0,0,0,.05);
  padding:18px 20px;

  /* A teljes sor kitöltése, belső scroll itt */
  flex:1 1 auto;
  min-height:0 !important;
  height:auto !important;

  max-width:100%;
  overflow:auto;
  -webkit-overflow-scrolling:touch;
  color:#222;
}

#inner{ max-width:100%; overflow:auto; }
#inner img{ max-width:100%; height:auto; }
#inner table{ display:block; max-width:100%; overflow:auto; }
#inner pre, #inner code{ white-space:pre-wrap; word-break:break-word; }

/* Mai nap jelölése (ha osztályt használsz) */
.today{ background:#00ff00 !important; }

.top::before,
.top::after{
  opacity: 1;
  visibility: visible;
  transition: opacity .01s linear;
}

/* ===== Csak MOBILON (<=719px) ===== */
@media (max-width: 719px){
  /* Fejléc képek nélkül */
  .topbar{ background:var(--panel) !important; }
  .top::before,
  .top::after{
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
  }
  .brand .logo{
	opacity: 1;
	visibility: visible;
	transition: opacity .01s linear;
  }

  /* Oldalsáv mobilon rejtve */
  .side{ display:none !important; }

  /* Fejléc mobil: logó el, kisebb cím, csak név; gombok rejtve */
  .brand .logo{ 
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
	width: 0;
	height: 0;
	margin-left: 0;
  }
  .brand .title{
    font-size:18px;
    line-height:1.2;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
    margin-left:0;
    text-align:center;
    flex:1;
  }
  .top .actions .btn{ display:none !important; }
  .userbox{ display:none !important; }
  .userbox .label{ display:none; }

  /* GRID: top, main, alul a mobil-sáv */
  .page{
    height: 100svh;                    /* kezdeti állapotban is jó legyen */
    grid-template-rows: auto minmax(0,1fr) auto !important;
    grid-template-columns: 1fr !important;
    grid-template-areas:
      "top"
      "main"
      "mobilebar";
  }

  /* Mobil alsó sáv */
  .mobile-bottombar{
    grid-area: mobilebar;
    display:flex !important;
    flex-direction:column;
    flex-wrap:wrap;
    align-items:center;
    gap:6px;
    padding:6px 8px;
    background:var(--panel);
    border-top:1px solid var(--border);
  }
  .mobile-bottombar .sel{
    appearance:none;
    border:0;
    border-radius:10px;
    padding:10px 12px;
    font-size:14px; font-weight:700;
    background:var(--panel); color:var(--text);
  }
  .mobile-bottombar .row{
    display:grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap:6px 6px;
  }
  .mobile-bottombar select{
    appearance:auto;
    -webkit-appearance:auto;
    -moz-appearance:auto;
    width:100%;
    min-height:32px;
    padding:4px 6px;
    font-size:14px;
    border:1px solid #cfd8e3;
    border-radius:8px;
    background:#fff;
    color:#000;
  }
  .mobile-bottombar .btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:6px;
    width:100%;
    min-height:32px;
    padding:6px 8px;
    border-radius:8px;
    font-size:14px;
    font-weight:700;
    background: var(--panel);
    color: var(--text);
    border: 1px solid rgba(255,255,255,.15);
  }
  .mobile-bottombar .btn:hover{ background:#1d4c7d; }

  .mobile-bottombar .mob-username{
    display:flex;
    align-items:center;
    justify-content:center;
    min-height:32px;
    padding:6px 8px;
    border-radius:8px;
    color: var(--text);
    background: transparent;
    text-align:center;
    border: 1px solid rgba(255,255,255,0);
  }
  .mobile-bottombar .sel:hover{ background:#1d4c7d; }

  .btn.btn--mobile{
    background:var(--panel); color:var(--text);
    padding:10px 12px; border-radius:10px;
    font-weight:700; text-decoration:none; white-space:nowrap;
  }
  .btn.btn--mobile:hover{ background:#1d4c7d; }

  .topbar{
    height:auto !important;
    min-height:0;
    padding:6px 10px !important;
    justify-content: center;
  }

  .main{ overflow:auto; }
  .topbar, .mobile-bottombar{ overflow-x:hidden; }

  /* A kártya mobilon se kényszerítsen magasságot */
  .content{
    min-height:0 !important;
    height:auto !important;
  }
}

/* ===== changepw.php (változatlan kinézet) ===== */
:root{
  --cp-bg:#f5f7fb; --cp-card:#fff; --cp-text:#222; --cp-muted:#666;
  --cp-primary:var(--primary); --cp-primaryH:var(--primary-600);
  --cp-danger:#c53131; --cp-dangerH:#a02828;
  --cp-ok:var(--ok); --cp-err:#b00020; --cp-border:#e3e7ef
}
.cp-wrap{max-width:400px;margin:0 auto}
.cp-title{font-size:20px;margin:0 0 12px;text-align:center}
.cp-msg{padding:10px 12px;border-radius:10px;margin:12px 0;border:1px solid var(--cp-border);text-align:center}
.cp-msg.ok{background:#e8f7ec;color:var(--cp-ok);border-color:#ccecd4}
.cp-msg.err{background:#fdecec;color:var(--cp-err);border-color:#f5c8c8}
.cp-card{background:var(--cp-card);border:1px solid var(--cp-border);border-radius:14px;padding:18px;margin:14px auto;box-shadow:0 6px 18px rgba(0,0,0,.06);max-width:400px}
.cp-card h3{text-align:center;margin:0 0 12px;font-size:16px}
.cp-fld{display:block;width:100%;padding:12px 44px 12px 12px;background:#d6ebff;margin:8px 0 12px;border:1px solid var(--cp-border);border-radius:10px;box-sizing:border-box}
.cp-row{display:flex;flex-direction:column;gap:10px;align-items:stretch}
.cp-btn{appearance:none;border:0;border-radius:10px;padding:12px 18px;font-weight:700;cursor:pointer;width:100%}
.cp-btn.primary{background:var(--cp-primary);color:#fff}
.cp-btn.primary:hover{background:var(--cp-primaryH)}
.cp-btn.danger{background:var(--cp-danger);color:#fff}
.cp-btn.danger:hover{background:var(--cp-dangerH)}
.cp-icon-btn{position:absolute;right:10px;top:50%;transform:translateY(-50%);border:none;background:transparent;cursor:pointer;font-size:18px;line-height:1;min-width:28px;color:#334}
.cp-pw{position:relative}
.cp-note{color:var(--cp-muted);font-size:12px;margin-top:12px;text-align:center}

/* changepw háttér */
body.cp-page{ background:#eef6ff; }

/* Desktop fixek: fejléc magasság + oldalsáv szélesség */
@media (min-width: 720px){
  .topbar{ height: 92px; min-height: 92px; }
  .page{ grid-template-columns: var(--side-w) minmax(0, 1fr); }
  .side{ width: var(--side-w); min-width: var(--side-w); max-width: var(--side-w); }
}

/* Linkek: ne legyen text-decoration */
a{ text-decoration: none; }

/* --- Mobil tartalomskálázás (#inner-ben) --- */
#inner #scaleWrap{ transform-origin: top left; }

/* Zoom vezérlők – csak mobilon lebegnek a tartalom felett */
@media (max-width: 719px){
  .zoom-controls{
    position: fixed;
    right: 10px;
    bottom: 10px;
    display: flex;
    gap: 6px;
    z-index: 50;
  }
  .zoom-controls button{
    appearance: none;
    border: 1px solid rgba(0,0,0,.15);
    border-radius: 8px;
    background: #ffffff;
    padding: 6px 10px;
    font-size: 13px;
    line-height: 1;
    box-shadow: 0 2px 6px rgba(0,0,0,.15);
    cursor: pointer;
  }
  .zoom-controls button:active{ transform: translateY(1px); }
}

/* Zoom-kompatibilis felülírások – ne vágja le a tartalmat skálázás közben */
.zoom-enabled #inner{
  display: block;
  transform-origin: top left;
  max-width: none !important;
  overflow: visible !important;
  backface-visibility: hidden;
  will-change: transform;
}

#innerZoomWrap{
  overflow: visible;
  min-width: 1px;
  min-height: 1px;
}

/* (ha vannak széles táblák a HTM-ben) */
.zoom-enabled #inner table{
  display: table !important;
  max-width: none !important;
  overflow: visible !important;
}

/* ===== Login teljes nézet ===== */
body.cp-page{
  background: var(--cp-bg);
  min-height: 100dvh;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;               /* ne legyen body-scroll a login oldalon */
}

/* A login kártya saját burkolója – nem a .content! */
body.cp-page .login-shell{
  width: 100%;
  max-width: 420px;
  padding: 16px;
  box-sizing: border-box;
}

/* A login fragment alap konténere, ne nyúljon túl */
body.cp-page .cp-wrap{
  max-width: 100%;
  margin: 0;
  color: #000;
}

/* Biztonság kedvéért – a login nézetben nincs szükség a nagy, appos kártyára */
body.cp-page .cp-card{
  margin: 12px 0;
  padding: 16px;
}

/* Viewport magasság kezelése mobilon (Chrome URL sáv) */
html, body { block-size: 100%; }

/* ==== Minden, a #inner-ben megjelenő táblázat: első oszlop fixálása ==== */

/* A sticky-hoz a border-collapse legyen separate, különben több böngészőben bugos */
#inner table {
  border-collapse: collapse !important;
  border-spacing: 0;
}

/* Cella-alap stílusok: ne törjenek feleslegesen sorba mobilon */
#inner table th,
#inner table td {
  white-space: nowrap;          /* ha mégis törni szeretnéd: vedd ki ezt a sort */
}

/* Bal első oszlop „fagyasztva” – a háttér legyen fedő, hogy ne ütközzön össze */
#inner .freeze-col {
  position: relative;
  z-index: 3;
  background: #fff;          /* ha sötét téma kell, állítsd át */
  will-change: transform;
  box-shadow: -1px 0 0 rgba(0,0,0,.06), 1px 0 0 rgba(0,0,0,.06);
}

/* Firefox "Asztali nézet" bug fix: ha a <html> megkapja a .force-desktop osztályt,
   mutassuk a logót és a fejléc díszeket akkor is, ha a mobil @media beragadt. */
.force-desktop .brand .logo{ display:block !important; }
.force-desktop .top::before,
.force-desktop .top::after{ display:block !important; }