/* ============================================================
   FilterMaster – design rendszer v2 · „Control Room"
   Sötét, sűrű, hatékony SaaS felület.
   Paletta:  grafit #0F1115 · panel #171A21 · kék #2E7BF6
             narancs #FF7A1A · fehér #F4F6FA
   Betűk:    Space Grotesk (display) · Inter (UI) · JetBrains Mono (adat)
   Szignatúra: „szűrőtölcsér" — 3 lépcsős sáv-motívum
   ============================================================ */

:root{
  --bg:       #0F1115;
  --bg-deep:  #0A0C0F;
  --panel:    #171A21;
  --panel-2:  #1E2229;
  --panel-3:  #242934;
  --line:     #262B36;
  --line-2:   #313848;
  --text:     #F4F6FA;
  --muted:    #8B93A7;
  --faint:    #5A6273;
  --blue:     #2E7BF6;
  --blue-hi:  #5AA2FF;
  --blue-bg:  rgba(46,123,246,.13);
  --orange:   #FF7A1A;
  --orange-hi:#FF934A;
  --orange-bg:rgba(255,122,26,.13);
  --red:      #F0503C;
  --red-bg:   rgba(240,80,60,.13);
  --ok:       #35C48D;
  --ok-bg:    rgba(53,196,141,.12);
  --r: 14px; --r-sm: 10px;
  --disp: "Space Grotesk", sans-serif;
  --ui:   "Inter", system-ui, sans-serif;
  --mono: "JetBrains Mono", monospace;
  --shadow: 0 10px 30px rgba(0,0,0,.35);
}

*{box-sizing:border-box}
::selection{background:var(--blue); color:#fff}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important;animation:none!important}}

body{
  margin:0; background:var(--bg); color:var(--text);
  font-family:var(--ui); font-size:14.5px; line-height:1.55;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3{font-family:var(--disp); line-height:1.12; letter-spacing:-.02em; color:var(--text)}
h1{font-size:clamp(1.5rem,3vw,2rem); margin:.1em 0 .5em; font-weight:700}
h2{font-size:1.2rem; margin:1.5em 0 .7em; font-weight:600}
h3{font-size:1rem; margin:1em 0 .5em; font-weight:600}
a{color:var(--blue-hi); text-decoration:none}
a:hover{text-decoration:underline}
.mono{font-family:var(--mono); font-size:.9em; font-feature-settings:"tnum"}
.muted{color:var(--muted)}

/* ============ APP SHELL ============ */
.shell{display:grid; grid-template-columns:232px 1fr; min-height:100vh}
.shell.no-side{grid-template-columns:1fr}

/* --- oldalsáv --- */
.side{
  background:var(--bg-deep); border-right:1px solid var(--line);
  padding:18px 14px; position:sticky; top:0; height:100vh;
  display:flex; flex-direction:column; gap:4px;
}
.side .brand{display:block; padding:4px 8px 18px}
.side .brand img{display:block; height:38px}
.side a.item{
  display:flex; align-items:center; gap:11px;
  color:var(--muted); padding:9px 12px; border-radius:var(--r-sm);
  font-weight:500; font-size:.92rem; text-decoration:none;
  transition:background .12s, color .12s;
}
.side a.item:hover{background:var(--panel); color:var(--text)}
.side a.item.on{background:var(--blue-bg); color:var(--blue-hi)}
.side a.item .ic{width:18px; text-align:center; opacity:.9}
.side .push{flex:1}
.side .userbox{
  border-top:1px solid var(--line); padding:12px 8px 2px;
  display:flex; align-items:center; gap:10px; font-size:.85rem;
}
.side .avatar{
  width:30px; height:30px; border-radius:9px; flex:none;
  background:linear-gradient(135deg,var(--blue),var(--orange));
  display:grid; place-items:center; font-family:var(--disp); font-weight:700; color:#fff; font-size:.8rem;
}
.side .userbox .nm{overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.side .userbox a{color:var(--faint); font-size:.78rem}

/* --- felső sáv (tartalom fölött) --- */
.topline{
  display:flex; align-items:center; gap:16px;
  padding:14px 26px; border-bottom:1px solid var(--line);
  background:rgba(15,17,21,.85); backdrop-filter:blur(10px);
  position:sticky; top:0; z-index:40;
}
.topline .ttl{font-family:var(--disp); font-weight:600; font-size:1.02rem; flex:1}
.topline .brand-top img{height:34px; display:block}
.langsw{font-family:var(--mono); font-size:.78rem; display:flex; gap:2px; background:var(--panel); border:1px solid var(--line); border-radius:8px; padding:3px}
.langsw a{color:var(--muted); text-decoration:none; padding:3px 9px; border-radius:6px}
.langsw a.on{color:#fff; background:var(--blue)}
.langsw a:hover{text-decoration:none; color:var(--text)}

.content{padding:26px; max-width:1220px; width:100%; margin:0 auto}
.content-narrow{max-width:480px; margin:8vh auto 0}

@media(max-width:900px){
  .shell{grid-template-columns:1fr}
  .side{position:static; height:auto; flex-direction:row; flex-wrap:wrap; align-items:center; border-right:0; border-bottom:1px solid var(--line)}
  .side .brand{padding:4px 10px}
  .side .push,.side .userbox{display:none}
  .content{padding:18px 14px}
}

/* ============ KOMPONENSEK ============ */
.card{
  background:var(--panel); border:1px solid var(--line);
  border-radius:var(--r); padding:20px 22px; margin-bottom:16px;
}
.card h2:first-child,.card h3:first-child{margin-top:0}
.grid{display:grid; gap:14px}
.grid-2{grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}
.grid-4{grid-template-columns:repeat(auto-fit,minmax(170px,1fr))}

/* KPI csempék */
.stat{padding:16px 18px; position:relative; overflow:hidden}
.stat::before{
  content:""; position:absolute; left:0; top:0; bottom:0; width:3px;
  background:var(--blue); border-radius:0 3px 3px 0;
}
.stat.warn::before{background:var(--orange)}
.stat.bad::before{background:var(--red)}
.stat .n{font-family:var(--disp); font-size:1.9rem; font-weight:700; letter-spacing:-.03em; font-feature-settings:"tnum"}
.stat.warn .n{color:var(--orange-hi)}
.stat.bad .n{color:var(--red)}
.stat .l{color:var(--muted); font-size:.8rem; margin-top:1px}

/* gombok */
.btn{
  display:inline-flex; align-items:center; gap:7px;
  border:0; cursor:pointer; text-decoration:none;
  font-family:var(--ui); font-weight:600; font-size:.88rem;
  padding:9px 16px; border-radius:var(--r-sm);
  background:var(--blue); color:#fff;
  transition:filter .12s, transform .08s;
}
.btn:hover{filter:brightness(1.12); text-decoration:none}
.btn:active{transform:translateY(1px)}
.btn-orange{background:var(--orange); color:#1A0E02}
.btn-line{background:var(--panel-2); color:var(--text); border:1px solid var(--line-2)}
.btn-line:hover{background:var(--panel-3)}
.btn-ghost{background:transparent; color:var(--muted); border:1px solid var(--line-2)}
.btn-ghost:hover{color:var(--text); background:var(--panel)}
.btn-sm{padding:6px 11px; font-size:.8rem; border-radius:8px}
.btn-wa{background:#1FB255; color:#04180b}

/* űrlapok */
label{display:block; font-weight:600; font-size:.8rem; margin:12px 0 5px; color:var(--muted); text-transform:uppercase; letter-spacing:.04em}
input,select,textarea{
  width:100%; padding:9px 12px; font:inherit; color:var(--text);
  border:1px solid var(--line-2); border-radius:var(--r-sm); background:var(--panel-2);
}
input::placeholder{color:var(--faint)}
input:focus,select:focus,textarea:focus{outline:2px solid var(--blue); outline-offset:0; border-color:var(--blue)}
input[type=date]{color-scheme:dark}
.form-row{display:grid; grid-template-columns:1fr 1fr; gap:0 14px}
@media(max-width:600px){.form-row{grid-template-columns:1fr}}
.hint{color:var(--faint); font-size:.78rem; margin-top:4px}

/* táblázat */
table.tbl{width:100%; border-collapse:collapse; font-size:.88rem}
.tbl th{
  text-align:left; font-family:var(--mono); font-size:.68rem; text-transform:uppercase;
  letter-spacing:.09em; color:var(--faint); padding:8px 10px; border-bottom:1px solid var(--line-2);
}
.tbl td{padding:10px; border-bottom:1px solid var(--line); vertical-align:top}
.tbl tr:last-child td{border-bottom:0}
.tbl tr:hover td{background:var(--panel-2)}

/* státusz jelvények */
.badge{display:inline-flex; align-items:center; gap:6px; padding:3px 10px; border-radius:99px; font-size:.74rem; font-weight:600; letter-spacing:.02em}
.badge::before{content:""; width:6px; height:6px; border-radius:99px; background:currentColor}
.b-ok{background:var(--ok-bg); color:var(--ok)}
.b-due{background:var(--orange-bg); color:var(--orange-hi)}
.b-overdue{background:var(--red-bg); color:var(--red)}
.b-pending{background:var(--blue-bg); color:var(--blue-hi)}
.b-muted{background:var(--panel-3); color:var(--muted)}

/* szűrő-élettartam sáv */
.life{height:8px; border-radius:99px; background:var(--panel-3); overflow:hidden}
.life > i{display:block; height:100%; border-radius:99px; background:linear-gradient(90deg,var(--blue),var(--blue-hi))}
.life.warn > i{background:linear-gradient(90deg,#E0680C,var(--orange-hi))}
.life.bad  > i{background:linear-gradient(90deg,#C43A28,var(--red))}
.life-lbl{font-family:var(--mono); font-size:.72rem; color:var(--faint); margin-top:5px}

/* flash */
.flash{padding:11px 15px; border-radius:var(--r-sm); margin-bottom:14px; font-weight:500; font-size:.9rem; border:1px solid}
.flash-ok{background:var(--ok-bg); color:var(--ok); border-color:rgba(53,196,141,.3)}
.flash-err{background:var(--red-bg); color:var(--red); border-color:rgba(240,80,60,.3)}

/* térkép */
.map{height:260px; border-radius:var(--r-sm); border:1px solid var(--line-2); z-index:1; filter:saturate(.85) contrast(1.02)}
.leaflet-container{background:var(--panel-2)}

/* details/summary */
details{border-top:1px solid var(--line); padding-top:12px}
summary{cursor:pointer; font-weight:600; font-size:.88rem; color:var(--blue-hi); list-style:none}
summary::before{content:"▸ "; font-size:.8em}
details[open] summary::before{content:"▾ "}

/* ============ LANDING ============ */
.hero{
  position:relative; border-radius:20px; overflow:hidden; margin-bottom:22px;
  background:
    radial-gradient(700px 340px at 85% -10%, rgba(255,122,26,.16), transparent 60%),
    radial-gradient(900px 480px at 10% 0%, rgba(46,123,246,.22), transparent 60%),
    var(--bg-deep);
  border:1px solid var(--line);
  padding:64px 48px 56px;
}
.hero::after{ /* finom rács */
  content:""; position:absolute; inset:0; pointer-events:none;
  background-image:linear-gradient(rgba(255,255,255,.028) 1px, transparent 1px),
                   linear-gradient(90deg, rgba(255,255,255,.028) 1px, transparent 1px);
  background-size:44px 44px;
  mask-image:radial-gradient(700px 420px at 30% 0%, #000 40%, transparent 100%);
}
.hero .kick{
  display:inline-flex; align-items:center; gap:8px;
  font-family:var(--mono); font-size:.75rem; letter-spacing:.12em; text-transform:uppercase;
  color:var(--orange-hi); background:var(--orange-bg); border:1px solid rgba(255,122,26,.3);
  padding:5px 13px; border-radius:99px; margin-bottom:22px;
}
.hero h1{
  font-size:clamp(2.1rem,5vw,3.5rem); max-width:700px; margin:0 0 16px; font-weight:700;
}
.hero h1 .grad{
  background:linear-gradient(92deg,var(--blue-hi) 0%,var(--blue) 45%,var(--orange) 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.hero p{max-width:560px; color:var(--muted); font-size:1.04rem; margin:0 0 30px}
.hero .cta{display:flex; gap:12px; flex-wrap:wrap}
.hero .cta .btn{padding:12px 22px; font-size:.95rem}

/* csepp-motívum (szignatúra) */
.dropmark{display:block; margin-bottom:22px}
.foot .dropmark{margin-bottom:10px}

/* nagy hero-logó + badge külön sorban */
.hero-brand{display:block; margin-bottom:20px}
.hero-logo{display:block; width:min(360px,70%); height:auto; filter:drop-shadow(0 6px 20px rgba(0,0,0,.35))}
.kickrow{display:block; margin-bottom:4px}
@media(max-width:600px){.hero-logo{width:80%}}

/* kattintható feature-kártyák */
a.fcard{text-decoration:none; color:inherit; display:block}
a.fcard:hover{text-decoration:none}
.fmore{display:inline-block; margin-top:12px; color:var(--blue-hi); font-weight:600; font-size:.86rem}

.fcard{position:relative; transition:transform .16s, border-color .16s}
.fcard:hover{transform:translateY(-3px); border-color:var(--line-2)}
.fcard .fic{
  width:40px; height:40px; border-radius:11px; display:grid; place-items:center;
  background:var(--blue-bg); color:var(--blue-hi); font-size:1.1rem; margin-bottom:12px;
}
.fcard:nth-child(3) .fic{background:var(--orange-bg); color:var(--orange-hi)}
.fcard h3{margin:.2em 0 .3em}
.fcard p{margin:0; color:var(--muted); font-size:.9rem}

/* lábléc */
.foot{max-width:1220px; margin:0 auto; padding:10px 26px 30px; color:var(--faint); font-size:.8rem}

/* segédek */
.row{display:flex; gap:10px; flex-wrap:wrap; align-items:center}
.spread{display:flex; justify-content:space-between; align-items:center; gap:12px; flex-wrap:wrap}
.mt{margin-top:14px}
.kv{display:grid; grid-template-columns:max-content 1fr; gap:5px 16px; font-size:.9rem; margin:0}
.kv dt{color:var(--faint)} .kv dd{margin:0; font-weight:500}
.codebox{font-family:var(--mono); font-size:.76rem; word-break:break-all; background:var(--bg-deep); border:1px solid var(--line); padding:10px 12px; border-radius:var(--r-sm); color:var(--blue-hi)}