/* =========================================================================
   Magellán Bike – adminisztrációs felület
   ========================================================================= */

:root{
  --ink:#17211b; --ink-2:#202b25; --ink-3:#2c3a32;
  --lime:#a8d53a; --lime-dark:#7ea628;
  /* Zöld szöveghez világos háttéren – a --lime-dark fehéren csak 2,85:1. */
  --lime-ink:#55731d;
  --bg:#f2f4f1; --card:#fff;
  --text:#181e1a; --dim:#67716a; --line:#e0e5dd;
  --ok:#2f8a3e; --bad:#c9452f; --warn:#d19420; --info:#2c6fa8;
  --r:12px; --shadow:0 1px 2px rgba(17,28,21,.05), 0 10px 30px -16px rgba(17,28,21,.28);
  --sans:"Segoe UI", system-ui, -apple-system, Arial, sans-serif;
}
*,*::before,*::after{box-sizing:border-box}
body{margin:0; font-family:var(--sans); background:var(--bg); color:var(--text); font-size:15.5px; line-height:1.6; -webkit-font-smoothing:antialiased}
img{max-width:100%; height:auto; display:block}
a{color:var(--lime-ink)}
h1,h2,h3{line-height:1.2; margin:0 0 .5em; letter-spacing:-.015em}
h1{font-size:1.65rem}
h2{font-size:1.2rem}
h3{font-size:1.02rem}
code{background:#eef1ec; padding:.12em .4em; border-radius:5px; font-size:.88em}
:focus-visible{outline:3px solid var(--lime); outline-offset:2px}
.dim{color:var(--dim)}
.small{font-size:.87rem}
.nowrap{white-space:nowrap}
.right{text-align:right}
.center{text-align:center}

/* ---------- Belépés / telepítés ----------------------------------------- */
.auth-page{display:grid; place-items:center; min-height:100dvh; background:var(--ink); padding:1.5rem}
.auth{background:#fff; border-radius:18px; padding:2.5rem; width:min(100%,460px); box-shadow:0 30px 70px -30px rgba(0,0,0,.6)}
.auth__logo{margin:0 auto 1.5rem}
.auth h1{text-align:center; margin-bottom:1.5rem}
.auth form{display:grid; gap:1rem}
.checks{width:100%; border-collapse:collapse; margin-bottom:1.5rem; font-size:.9rem}
.checks td,.checks th{padding:.35rem .5rem; text-align:left; font-weight:400}
.checks th{font-weight:600}
.checks tr.ok td:first-child{color:var(--ok); font-weight:800}
.checks tr.bad td:first-child{color:var(--bad); font-weight:800}

/* ---------- Elrendezés --------------------------------------------------- */
.shell{display:grid; grid-template-columns:250px 1fr; min-height:100dvh}
.side{background:var(--ink); color:#c6d0c6; padding:1.5rem 1rem; display:flex; flex-direction:column; gap:1.5rem; position:sticky; top:0; height:100dvh; overflow:auto}
.side__brand{display:flex; align-items:center; gap:.6rem; padding:0 .5rem}
.side__brand img{width:110px}
.side nav{display:grid; gap:.15rem}
.side__group{margin:.9rem .75rem .35rem; font-size:.68rem; letter-spacing:.14em; text-transform:uppercase; color:#8b968a; font-weight:800}
.side a{display:flex; align-items:center; gap:.6rem; padding:.6rem .75rem; border-radius:9px; text-decoration:none; color:#c6d0c6; font-size:.94rem; font-weight:600; transition:.15s}
.side a:hover{background:rgba(255,255,255,.07); color:#fff}
.side a.is-active{background:var(--lime); color:#111}
.side a svg{flex:none; opacity:.85}
.side a.is-active svg{opacity:1}
.side__foot{margin-top:auto; border-top:1px solid rgba(255,255,255,.1); padding-top:1rem; font-size:.85rem}
.side__foot a{padding:.45rem .75rem}

.main{padding:1.75rem clamp(1rem,3vw,2.5rem) 4rem; min-width:0}
.topbar{display:flex; flex-wrap:wrap; gap:1rem; align-items:center; justify-content:space-between; margin-bottom:1.75rem}
.topbar__t h1{margin:0}
.topbar__t p{margin:.2rem 0 0; color:var(--dim); font-size:.93rem}
.topbar__a{display:flex; gap:.6rem; flex-wrap:wrap}

.mobile-top{display:none}

/* Tablet fekvő: keskenyebb oldalsáv, hogy több hely maradjon a tartalomnak */
@media (min-width:901px) and (max-width:1180px){
  .shell{grid-template-columns:210px 1fr}
  .side{padding:1.25rem .75rem}
  .side a{padding:.55rem .6rem; font-size:.9rem}
  .side__brand img{width:95px}
  .main{padding:1.5rem 1.25rem 3rem}
  .grid--2{grid-template-columns:1fr}
}

/* Érintőképernyő: nagyobb kattintható felületek */
@media (pointer:coarse){
  .btn{min-height:44px}
  .btn--sm{min-height:38px}
  .side a{min-height:46px}
  input[type=text],input[type=password],input[type=email],input[type=url],input[type=number],
  input[type=date],input[type=time],select,textarea{font-size:16px; padding:.7rem .8rem}
  .check input{width:20px; height:20px}
  table.data td,table.data th{padding:.85rem}
}

@media (max-width:900px){
  .shell{grid-template-columns:1fr}
  .side{position:fixed; inset:0 auto 0 0; width:265px; z-index:60; transform:translateX(-100%); transition:transform .25s cubic-bezier(.22,.61,.36,1)}
  .side.is-open{transform:none; box-shadow:0 0 60px rgba(0,0,0,.5)}
  .mobile-top{display:flex; align-items:center; gap:.75rem; background:var(--ink); color:#fff; padding:.75rem 1rem; position:sticky; top:0; z-index:50}
  .mobile-top img{width:100px}
  .mobile-top button{background:none; border:0; color:#fff; font-size:1.6rem; cursor:pointer; line-height:1; padding:.2rem .5rem}
  .scrim{position:fixed; inset:0; background:rgba(0,0,0,.5); z-index:55}
  .scrim[hidden]{display:none}
}

/* ---------- Kártyák, panelek --------------------------------------------- */
.panel{background:var(--card); border:1px solid var(--line); border-radius:var(--r); padding:1.5rem; margin-bottom:1.5rem}
.panel > h2:first-child{margin-top:0}
.panel__head{display:flex; gap:1rem; align-items:center; justify-content:space-between; flex-wrap:wrap; margin-bottom:1.25rem}
.panel__head h2{margin:0}
.grid{display:grid; gap:1.25rem}
.grid--2{grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}
.grid--3{grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
.grid--4{grid-template-columns:repeat(auto-fit,minmax(190px,1fr))}

.stat{background:var(--card); border:1px solid var(--line); border-radius:var(--r); padding:1.25rem}
.stat b{display:block; font-size:2rem; line-height:1.1; font-weight:850; letter-spacing:-.02em}
.stat span{color:var(--dim); font-size:.87rem}
.stat--ok b{color:var(--ok)}
.stat--bad b{color:var(--bad)}
.stat--warn b{color:#96690f}   /* a --warn sárga fehéren csak 2,6:1 */

/* ---------- Űrlapelemek --------------------------------------------------- */
label{display:block; font-weight:650; font-size:.9rem}
label > input, label > select, label > textarea{margin-top:.35rem}
input[type=text],input[type=password],input[type=email],input[type=url],input[type=number],
input[type=date],input[type=time],input[type=search],select,textarea{
  width:100%; font:inherit; font-size:.95rem; padding:.6rem .75rem; border:1.5px solid var(--line);
  border-radius:9px; background:#fff; color:var(--text); transition:border-color .15s, box-shadow .15s;
}
input:focus,select:focus,textarea:focus{border-color:var(--lime); box-shadow:0 0 0 3px rgba(168,213,58,.25); outline:none}
textarea{min-height:120px; resize:vertical; line-height:1.55}
input[type=file]{font-size:.9rem}
label small{display:block; font-weight:400; color:var(--dim); font-size:.83rem; margin-top:.3rem}
.check{display:flex; align-items:flex-start; gap:.6rem; font-weight:600; font-size:.93rem; cursor:pointer}
.check input{margin:.25rem 0 0; width:17px; height:17px; accent-color:var(--lime-dark); flex:none}
.form-grid{display:grid; gap:1.1rem; grid-template-columns:repeat(auto-fit,minmax(230px,1fr))}
.form-grid .wide{grid-column:1/-1}
.form-actions{display:flex; gap:.7rem; flex-wrap:wrap; align-items:center; margin-top:1.5rem; padding-top:1.25rem; border-top:1px solid var(--line)}
fieldset{border:1px solid var(--line); border-radius:var(--r); padding:1.25rem; margin:0 0 1.25rem}
legend{font-weight:800; font-size:.82rem; letter-spacing:.1em; text-transform:uppercase; color:var(--dim); padding:0 .5rem}

/* ---------- Gombok -------------------------------------------------------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.45rem;
  padding:.62rem 1.15rem; border-radius:9px; border:1.5px solid transparent;
  font:inherit; font-size:.93rem; font-weight:700; text-decoration:none; cursor:pointer;
  background:#fff; color:var(--text); border-color:var(--line); transition:.15s;
}
.btn:hover{border-color:#bcc7b6; background:#fafbf9}
.btn--primary{background:var(--lime); border-color:var(--lime); color:#12160e}
.btn--primary:hover{background:#b5e04a; border-color:#b5e04a}
.btn--dark{background:var(--ink); border-color:var(--ink); color:#fff}
.btn--dark:hover{background:#27332b; border-color:#27332b}
.btn--danger{background:#fff; color:var(--bad); border-color:#e8c3bb}
.btn--danger:hover{background:var(--bad); color:#fff; border-color:var(--bad)}
.btn--sm{padding:.38rem .75rem; font-size:.85rem}
.btn--block{width:100%}
.btn[disabled]{opacity:.5; cursor:not-allowed}

/* ---------- Üzenetek ------------------------------------------------------ */
.note{border-radius:10px; padding:.9rem 1.1rem; margin-bottom:1rem; border-left:4px solid var(--info); background:#eaf2f9; font-size:.93rem}
.note p{margin:0 0 .5em}
.note p:last-child{margin:0}
.note--ok{border-color:var(--ok); background:#eaf6ec}
.note--bad{border-color:var(--bad); background:#fbecea}
.note--warn{border-color:var(--warn); background:#fdf5e5}
.flashes{position:fixed; top:1rem; right:1rem; z-index:80; display:grid; gap:.6rem; max-width:380px}
.flashes .note{box-shadow:var(--shadow); margin:0; animation:slidein .3s cubic-bezier(.22,.61,.36,1)}
@keyframes slidein{from{opacity:0; transform:translateX(20px)}}

/* ---------- Táblázatok ---------------------------------------------------- */
.tablewrap{overflow-x:auto; border:1px solid var(--line); border-radius:var(--r); background:#fff}
table.data{width:100%; border-collapse:collapse; font-size:.92rem; min-width:640px}
table.data th{background:#f7f9f6; text-align:left; font-size:.75rem; letter-spacing:.08em; text-transform:uppercase; color:var(--dim); padding:.7rem .85rem; border-bottom:1px solid var(--line); white-space:nowrap}
table.data td{padding:.7rem .85rem; border-bottom:1px solid var(--line); vertical-align:middle}
table.data tr:last-child td{border-bottom:0}
table.data tbody tr:hover{background:#fbfcfa}
table.data .thumb{width:56px; height:44px; object-fit:contain; background:#f5f7f4; border-radius:6px}
table.data .acts{display:flex; gap:.35rem; justify-content:flex-end; flex-wrap:wrap}
table.data .acts form{display:inline}
.pill{display:inline-block; padding:.15rem .55rem; border-radius:999px; font-size:.74rem; font-weight:800; letter-spacing:.03em}
.pill--on{background:#e4f3e6; color:#256f32}
.pill--off{background:#f0f0f0; color:#7b7b7b}
.pill--sale{background:#fbe6e2; color:var(--bad)}
.pill--star{background:#f6f1d9; color:#6f570f}
.drag{cursor:grab; color:#7d857a; user-select:none}
tr.dragging{opacity:.45}

/* ---------- Súgó ---------------------------------------------------------- */
.help{max-width:78ch}
.help h2{margin-top:2.25rem; padding-top:1.25rem; border-top:1px solid var(--line)}
.help h2:first-of-type{border-top:0; padding-top:0}
.help h3{margin-top:1.5rem}
.help ol,.help ul{padding-left:1.35rem}
.help li{margin-bottom:.4rem}
.help kbd{background:#eef1ec; border:1px solid #d5dbd1; border-bottom-width:2px; border-radius:5px; padding:.1em .45em; font-size:.85em; font-family:inherit}
.toc{background:#f7f9f6; border:1px solid var(--line); border-radius:var(--r); padding:1.25rem 1.5rem; margin-bottom:2rem}
.toc ol{margin:.5rem 0 0; columns:2; column-gap:2rem}
@media (max-width:640px){.toc ol{columns:1}}
.step{counter-reset:none; display:flex; gap:1rem; margin-bottom:1rem}
.step__n{flex:none; width:28px; height:28px; border-radius:50%; background:var(--lime); color:#12160e; display:grid; place-items:center; font-weight:850; font-size:.85rem}

/* ---------- Média --------------------------------------------------------- */
.media-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:1rem}
.media-item{border:1px solid var(--line); border-radius:10px; overflow:hidden; background:#fff}
.media-item img{aspect-ratio:4/3; object-fit:contain; background:#f5f7f4; width:100%; padding:.4rem}
.media-item__b{padding:.5rem .6rem; font-size:.76rem; color:var(--dim); display:flex; gap:.35rem; align-items:center; justify-content:space-between}
.media-item__b button{background:none; border:0; cursor:pointer; color:var(--bad); font-size:1rem; padding:0 .2rem}
.imgpick{display:flex; gap:1rem; align-items:flex-start; flex-wrap:wrap}
.imgpick__prev{width:120px; height:96px; object-fit:contain; background:#f5f7f4; border:1px solid var(--line); border-radius:9px; padding:.35rem}