/* ==========================================================================
   NamenyLan - admin felulet
   ========================================================================== */

body { overflow-x: hidden; }

/* ---------- Belepes ---------- */
.login-screen { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 24px; }
.login-box { width: 100%; max-width: 400px; }
.login-box .logo { font-size: 1.8rem; display: block; text-align: center; margin-bottom: 6px; }

/* ---------- Vaz ---------- */
.app { display: none; min-height: 100vh; }
.app.on { display: flex; }

.side {
  width: 250px; flex: 0 0 250px; background: rgba(10, 12, 22, .82);
  border-right: 1px solid var(--line); padding: 22px 14px;
  display: flex; flex-direction: column; gap: 4px;
  position: sticky; top: 0; height: 100vh; overflow-y: auto;
  backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
}
.side .logo { padding: 0 10px 18px; font-size: 1.25rem; }

.nav-item {
  display: flex; align-items: center; gap: 11px; padding: 10px 12px;
  border-radius: 10px; color: var(--txt-2); cursor: pointer; font-size: .92rem;
  font-weight: 500; transition: all .18s var(--e); border: 0; background: none;
  font-family: inherit; text-align: left; width: 100%;
}
.nav-item:hover { background: rgba(255, 255, 255, .06); color: #fff; }
.nav-item.on { background: rgba(0, 229, 255, .12); color: var(--acc); font-weight: 600; }
.nav-item .ic { width: 20px; display: inline-flex; align-items: center; justify-content: center; }
.nav-item .badge {
  margin-left: auto; background: var(--bad); color: #fff; font-size: .68rem;
  font-weight: 700; padding: 1px 7px; border-radius: 999px; min-width: 20px; text-align: center;
}

.side-user {
  margin-top: auto; padding: 14px 10px 0; border-top: 1px solid var(--line);
  display: flex; align-items: center; gap: 11px;
}
.side-user .ava { width: 38px; height: 38px; font-size: 16px; }
.side-user .nm { font-size: .88rem; font-weight: 600; line-height: 1.2; }
.side-user .rl { font-size: .72rem; color: var(--txt-3); }

.main { flex: 1; min-width: 0; padding: 26px 30px 60px; }
.page-head { display: flex; align-items: center; gap: 16px; margin-bottom: 24px; flex-wrap: wrap; }
.page-head h1 { font-size: 1.7rem; margin: 0; }
.page-head .sp { margin-left: auto; display: flex; gap: 9px; flex-wrap: wrap; }

.view { display: none; }
.view.on { display: block; animation: fade .3s var(--e); }
@keyframes fade { from { opacity: 0; transform: translateY(8px); } }

/* ---------- Statisztika kartyak ---------- */
.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 14px; margin-bottom: 24px; }
.kpi { background: var(--panel); border: 1px solid var(--line); border-radius: 14px; padding: 18px; }
.kpi b { display: block; font-family: 'Space Grotesk', sans-serif; font-size: 1.9rem; line-height: 1.05; }
.kpi span { font-size: .74rem; letter-spacing: .1em; text-transform: uppercase; color: var(--txt-3); }
.kpi .sub { font-size: .8rem; color: var(--txt-2); margin-top: 6px; }

/* ---------- Fazisterheles ---------- */
.phase-row { display: flex; align-items: center; gap: 14px; padding: 11px 0; border-bottom: 1px solid var(--line); }
.phase-row .lb { font-family: 'JetBrains Mono', monospace; font-weight: 700; width: 34px; }
.phase-row .bar { flex: 1; }
.phase-row .val { font-family: 'JetBrains Mono', monospace; font-size: .86rem; min-width: 130px; text-align: right; color: var(--txt-2); }
.phase-row.hot .val { color: var(--warn); }
.phase-row.over .val { color: var(--bad); }

/* ---------- Eszkozsor ---------- */
.toolbar { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin-bottom: 18px; }
.toolbar input, .toolbar select { width: auto; min-width: 150px; }
.toolbar .grow { flex: 1; min-width: 200px; }

/* ---------- Tablazat ---------- */
.tbl-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: 14px; background: var(--panel); }
.tbl-wrap .tbl th { background: rgba(0, 0, 0, .25); position: sticky; top: 0; z-index: 1; }
.tbl td .ava { width: 30px; height: 30px; font-size: 13px; }
.cell-user { display: flex; align-items: center; gap: 10px; }
.cell-user .nm { font-weight: 600; color: var(--txt); }
.cell-user .sm { font-size: .78rem; color: var(--txt-3); }

.row-act { display: flex; gap: 5px; }
.ib {
  width: 30px; height: 30px; border-radius: 8px; border: 1px solid var(--line);
  background: rgba(255, 255, 255, .04); color: var(--txt-2); cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; font-size: .85rem;
  transition: all .18s var(--e);
}
.ib:hover { border-color: var(--acc); color: var(--acc); }
.ib.danger:hover { border-color: var(--bad); color: var(--bad); }
.ib.on { background: rgba(46, 230, 168, .16); border-color: rgba(46, 230, 168, .45); color: var(--ok); }

/* ---------- Modal ---------- */
.modal {
  position: fixed; inset: 0; z-index: 500; display: none;
  align-items: center; justify-content: center; padding: 24px;
  background: rgba(3, 4, 9, .82); backdrop-filter: blur(6px);
}
.modal.on { display: flex; animation: fade .25s var(--e); }
.modal-box {
  background: var(--panel-solid); border: 1px solid var(--line-2); border-radius: 18px;
  width: 100%; max-width: 620px; max-height: 88vh; overflow-y: auto; padding: 26px;
  box-shadow: 0 30px 80px -30px #000;
}
.modal-box.wide { max-width: 980px; }
.modal-head { display: flex; align-items: center; gap: 14px; margin-bottom: 20px; }
.modal-head h3 { margin: 0; flex: 1; }
.modal-x { background: none; border: 0; color: var(--txt-3); cursor: pointer; line-height: 1;
  display: inline-flex; padding: 4px; transition: color .25s var(--e); }
.modal-x:hover { color: var(--bad); }
.modal-foot { display: flex; gap: 10px; justify-content: flex-end; margin-top: 22px; flex-wrap: wrap; }

/* ---------- Kapcsolo ---------- */
.sw { display: flex; align-items: center; gap: 12px; padding: 13px 0; border-bottom: 1px solid var(--line); }
.sw .tx { flex: 1; }
.sw .tx b { display: block; font-size: .94rem; font-weight: 600; }
.sw .tx span { font-size: .82rem; color: var(--txt-3); }
.tgl { width: 46px; height: 26px; border-radius: 99px; background: rgba(255, 255, 255, .12);
  border: 0; cursor: pointer; position: relative; flex: 0 0 auto; transition: background .25s var(--e); }
.tgl::after {
  content: ''; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px;
  border-radius: 50%; background: #fff; transition: transform .25s var(--e);
}
.tgl.on { background: var(--ok); }
.tgl.on::after { transform: translateX(20px); }
.tgl:disabled { opacity: .4; cursor: not-allowed; }

/* ---------- Ulesrend racs ---------- */
.smap { display: flex; flex-direction: column; gap: 20px; }
.smap .zone-h { font-size: .8rem; letter-spacing: .14em; text-transform: uppercase; color: var(--txt-3); margin-bottom: 9px; }
.smap .srow { display: flex; gap: 6px; margin-bottom: 6px; flex-wrap: wrap; }
.scell {
  width: 74px; min-height: 52px; border-radius: 9px; border: 1px solid var(--line);
  background: rgba(255, 255, 255, .03); padding: 5px 6px; cursor: pointer;
  font-size: .64rem; line-height: 1.25; transition: all .18s var(--e); text-align: left;
  color: var(--txt-3); overflow: hidden;
}
.scell:hover { border-color: var(--acc); transform: translateY(-2px); }
.scell .lb { font-family: 'JetBrains Mono', monospace; font-weight: 700; font-size: .66rem; color: var(--txt-2); }
.scell .who { color: #fff; font-weight: 600; font-size: .68rem; margin-top: 2px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.scell .ph { float: right; opacity: .55; }
.scell.filled { background: rgba(0, 229, 255, .1); border-color: rgba(0, 229, 255, .3); }
.scell.paid { background: rgba(46, 230, 168, .1); border-color: rgba(46, 230, 168, .3); }
.scell.here { background: rgba(124, 92, 255, .16); border-color: rgba(124, 92, 255, .45); }
.scell.blocked { background: rgba(255, 255, 255, .015); border-style: dashed; opacity: .5; }
.scell.sel { outline: 2px solid var(--acc); outline-offset: 1px; }

/* ---------- Checkin ---------- */
.checkin-box { max-width: 560px; }
.checkin-box input {
  font-family: 'JetBrains Mono', monospace; font-size: 1.5rem; text-align: center;
  letter-spacing: .1em; padding: 18px; text-transform: uppercase;
}
.ci-result { margin-top: 20px; padding: 22px; border-radius: 14px; border: 1px solid var(--line); }
.ci-result.ok { border-color: rgba(46, 230, 168, .5); background: rgba(46, 230, 168, .08); }
.ci-result.bad { border-color: rgba(255, 84, 112, .5); background: rgba(255, 84, 112, .08); }
.ci-result .nm { font-family: 'Space Grotesk', sans-serif; font-size: 1.6rem; font-weight: 800; }
.ci-seat { font-family: 'JetBrains Mono', monospace; font-size: 2.2rem; font-weight: 700; color: var(--acc); }

/* ---------- Hibabejelentesek ---------- */
.issue { border-left: 3px solid var(--line-2); padding: 14px 16px; margin-bottom: 10px;
  background: var(--panel); border-radius: 0 12px 12px 0; border-top: 1px solid var(--line);
  border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.issue.high { border-left-color: var(--bad); }
.issue.normal { border-left-color: var(--warn); }
.issue.low { border-left-color: var(--txt-3); }
.issue.done { opacity: .5; }
.issue-top { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-bottom: 7px; font-size: .8rem; color: var(--txt-3); }
.issue p { margin: 0 0 10px; font-size: .93rem; color: var(--txt); }

/* ---------- Csapat kartya ---------- */
.sq-adm { margin-bottom: 14px; }
.sq-adm-head { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; }
.sq-adm-head .nm { font-family: 'Space Grotesk', sans-serif; font-weight: 700; font-size: 1.08rem; }
.sq-badge {
  width: 46px; height: 46px; border-radius: 13px; flex: 0 0 auto;
  display: flex; align-items: center; justify-content: center;
  font-family: 'Space Grotesk', sans-serif; font-weight: 700; font-size: .95rem;
  background: var(--grad); color: #04050b; letter-spacing: -.03em;
}
.slots { display: flex; gap: 5px; margin: 14px 0 12px; }
.slots i { flex: 1; height: 5px; border-radius: 99px; background: rgba(255, 255, 255, .09); }
.slots i.on { background: var(--grad); }
.sq-roster { display: flex; gap: 8px; flex-wrap: wrap; }
.sq-roster .rmem {
  display: inline-flex; align-items: center; gap: 7px; font-size: .84rem; color: var(--txt-2);
  border: 1px solid var(--line); border-radius: 99px; padding: 4px 12px 4px 4px;
  background: rgba(255, 255, 255, .03);
}
.sq-roster .rmem .ava { width: 26px; height: 26px; font-size: 12px; }
.sq-roster .rmem .ico { color: var(--acc); }

/* ---------- Verseny kartya ---------- */
.t-adm { margin-bottom: 14px; }
.t-adm-head { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; }
.t-adm-head .nm { font-family: 'Space Grotesk', sans-serif; font-weight: 700; font-size: 1.1rem; }
.t-flags { display: flex; gap: 18px; flex-wrap: wrap; margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--line); }
.t-flag { display: flex; align-items: center; gap: 9px; font-size: .84rem; color: var(--txt-2); }

/* ---------- Profil ---------- */
.prof-top { display: flex; gap: 22px; align-items: center; margin-bottom: 24px; flex-wrap: wrap; }
.prof-top .ava { width: 92px; height: 92px; font-size: 38px; }

/* ---------- Reszponziv ---------- */
@media (max-width: 900px) {
  .app.on { flex-direction: column; }
  .side { width: auto; flex: none; height: auto; position: static; flex-direction: row;
    overflow-x: auto; padding: 12px; gap: 6px; }
  .side .logo, .side-user { display: none; }
  .nav-item { width: auto; white-space: nowrap; }
  .nav-item span:not(.ic):not(.badge) { display: none; }
  .main { padding: 18px 16px 50px; }
}