/* /assets/css/style.css */
body { background-color: #f8f9fa; }
.login-card { max-width: 420px; margin: 1rem; border-radius: 1rem; }

/* ====== Színek, méretek ====== */
:root{
  --mustard:    #FED351;
  --gray-50:    #f6f6f6;
  --gray-100:   #eee;
  --gray-200:   #e3e3e3;
  --gray-400:   #b5b5b5;
  --gray-700:   #3b3b3b;
  --black:      #101010;

  --header-h:   64px;
  --radius:     6px;
  --gap:        12px;

  --fw:         300; /* LIGHT betűsúly */
}

/* Fix header + content offset */
.hx-header{
  position: fixed; inset: 0 0 auto 0; height: var(--header-h);
  z-index: 1000; background: var(--gray-50); border-bottom: 1px solid var(--gray-200);
}
body{ padding-top: var(--header-h); }

/* NYITOTT DRAWER ESETÉN A HÁTTÉR NE SCROLLOZZON */
body.nav-open { overflow: hidden; }

/* Sáv */
.hx-bar{
  max-width: 1200px; height: 100%; margin: 0 auto;
  display: flex; align-items: center; justify-content: space-between;
  padding-inline: 16px;
}

/* Brand */
.hx-brand{ display: inline-flex; align-items: center; gap: 10px; text-decoration: none; color: var(--black); font-weight: var(--fw); }
.hx-brand img{ width: 70px; height: 55px; object-fit: contain; }
.hx-brand__txt{ font-size: 16px; }

/* Desktop nav */
.hx-nav{ display: none; }
@media (min-width: 992px){ .hx-nav{ display: block; } }
.hx-menu{ list-style: none; display: flex; gap: var(--gap); padding: 0; margin: 0; }
.hx-menu__item{ display: block; }

.hx-link{
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 12px; border-radius: var(--radius);
  text-decoration: none; color: var(--black); font-weight: var(--fw);
  transition: background-color .15s ease, color .15s ease;
  width:100%;
}
.hx-link:hover, .hx-link:focus{ background: var(--gray-100); color: var(--black); outline: none; }
.hx-link.is-active{ background: var(--gray-100); border-bottom: 2px solid var(--mustard); }

/* Ikonok */
.hx-ico{ width: 18px; height: 18px; display: inline-flex; align-items: center; justify-content: center; }
.hx-ico svg{ width: 18px; height: 18px; fill: currentColor; }

/* Logout enyhén sötétebb */
.hx-link--logout{ color: var(--gray-700); }
.hx-link--logout:hover{ color: var(--black); }

/* Hamburger — csak mobilon */
.hx-burger{ background: transparent; border: none; padding: 10px; cursor: pointer; }
.hx-burger:focus{ outline: 2px solid var(--gray-200); border-radius: var(--radius); outline-offset: 2px; }
.hx-burger__line{ width: 22px; height: 2px; background: var(--black); display: block; margin: 4px 0; }
@media (min-width: 992px){ .hx-burger{ display: none; } } /* asztalin elrejtve */

/* Mobil drawer – TELJES SZÉLESSÉG + SCROLL FIX */
.hx-drawer{ position: relative; z-index: 1000; }
.hx-drawer__panel{
  position: fixed;
  top: var(--header-h);
  left: -100vw;
  width: 100vw;

  /* <<< fontos: dinamikus viewport magasság + fallback >>> */
  height: calc(100dvh - var(--header-h));
  overflow-y: auto;                   /* görgethető */
  -webkit-overflow-scrolling: touch;  /* iOS lendület-görgetés */
  overscroll-behavior: contain;       /* ne görgesse a hátteret */

  background: var(--gray-50);
  border-right: 1px solid var(--gray-200);
  transition: left .25s ease;
  padding: 16px;
  padding-bottom: calc(16px + env(safe-area-inset-bottom, 0px)); /* notch/safe-area */
  z-index: 1001; /* panel a backdrop fölött */
}

/* Ha a böngésző még nem ismeri a 100dvh-t, fallback 100vh-ra */
@supports not (height: 100dvh) {
  .hx-drawer__panel{
    height: calc(100vh - var(--header-h));
  }
}

.hx-backdrop{
  position: fixed; inset: var(--header-h) 0 0 0;
  background: rgba(0,0,0,.2);
  border: 0; padding: 0; margin: 0;
  display: none;
  z-index: 1000;
}

/* Drawer menü */
.hx-drawer__menu{ list-style: none; padding: 0 0 24px 0; margin: 0; display: grid; gap: 6px; }
.hx-drawer__link{
  display: flex; align-items: center; gap: 10px;
  padding: 14px 12px; border-radius: var(--radius);
  color: var(--black); text-decoration: none; font-weight: var(--fw);
}
.hx-drawer__link:hover, .hx-drawer__link:focus{ background: var(--gray-100); outline: none; }
.hx-drawer__link.is-active{ background: var(--gray-100); border-left: 3px solid var(--mustard); padding-left: 9px; }

/* Nyitott állapot */
body.nav-open .hx-drawer__panel{ left: 0; }
body.nav-open .hx-backdrop{ display: block; }

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  .hx-link, .hx-drawer__panel{ transition: none !important; }
}

/* Ikonok mérete egységesen (ikonfont esetén is) */
.hx-ico {
  font-size: 18px;      /* Tabler webfont méretezése */
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
}

/* Alap és aktív állapot */
.hx-link .hx-ico { color: var(--black); }
.hx-link.is-active .hx-ico { color: var(--mustard); }

/* Hoveren a szöveggel együtt sötétedik */
.hx-link:hover .hx-ico,
.hx-link:focus .hx-ico { color: var(--black); }

/* Mobil drawer linkeknél is */
.hx-drawer__link .hx-ico { color: var(--black); }
.hx-drawer__link.is-active .hx-ico { color: var(--mustard); }

/* --- Dropdown (asztali nézet) --- */
.hx-has-sub { position: relative; }

.hx-sub-toggle {
  cursor: pointer;
  background: none;
  border: none;
  width: 100%;
  text-align: left;
}

.hx-caret {
  font-size: 14px;
  margin-left: 4px;
  transition: transform .2s ease;
}

/* rejtett alapértelmezésben */
.hx-submenu {
  display: none;
  position: absolute;
  /*top: calc(100% + 4px);*/
  left: 0;
  min-width: 200px;
  background: var(--gray-50);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius);
  padding: 4px 0;
  box-shadow: 0 2px 8px rgba(0,0,0,.05);
  z-index: 2000;
}

.hx-submenu li { list-style: none; }
.hx-sublink {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  color: var(--black);
  text-decoration: none;
  font-weight: var(--fw);
}
.hx-sublink:hover,
.hx-sublink:focus {
  background: var(--gray-100);
  color: var(--black);
}

/* Hoverrel/nyitással látszódjon */
.hx-has-sub:hover > .hx-submenu,
.hx-has-sub.open > .hx-submenu { display: block; }

.hx-has-sub.open .hx-caret { transform: rotate(180deg); }

/* --- Mobil drawer: beállítások al-lépcső --- */
@media (max-width: 991.98px) {
  .hx-submenu {
    position: static;
    border: none;
    box-shadow: none;
    padding: 0;
  }
  .hx-sublink {
    padding-left: 32px;
  }
}

/* Mobil drawer – submenu */
.hx-dw-has-sub { border-top: 1px solid var(--gray-200); }
.hx-dw-has-sub:first-child { border-top: 0; }

.hx-dw-sub-toggle {
  width: 100%;
  text-align: left;
  background: transparent;
  border: 0;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 12px;
  color: var(--black);
  font-weight: var(--fw);
  cursor: pointer;
  border-radius: var(--radius);
}

.hx-dw-sub-toggle:hover,
.hx-dw-sub-toggle:focus { background: var(--gray-100); outline: none; }

.hx-dw-sub {
  list-style: none;
  padding: 4px 0 10px 0;
  margin: 0;
}
.hx-dw-sub li { margin: 0; }

.hx-dw-sub .hx-drawer__link {
  padding-left: 32px; /* vizuális behúzás */
}

.hx-caret { margin-left: auto; transition: transform .2s ease; }
.hx-dw-has-sub.open .hx-caret { transform: rotate(180deg); }