/* =========================================================
   MOTOBRO webalkalmazás — ugyanaz a dizájnrendszer, mint a
   motobro.hu weboldalon: sötét háttér, narancs kiemelés,
   Montserrat, pill gombok, lekerekített kártyák.
   ========================================================= */
:root{
  --bg:#0d0f12; --bg-alt:#15181c; --bg-card:#1b1f24; --bg-input:#0d0f12;
  --orange:#ff6a1a; --orange-dark:#e2550a;
  --white:#f5f6f7; --gray-light:#c7cad0; --gray-mid:#8a8f98;
  --border:rgba(255,255,255,.09);
  --ok:#37c871; --danger:#ff5a4e; --hazard:#ffb020;
  --radius:14px; --shadow:0 10px 30px rgba(0,0,0,.35);
  --font:'Montserrat','Segoe UI',Arial,sans-serif;

  /* régi változónevek — a nézetekben inline használtak, ezért megmaradnak */
  --paper:var(--bg); --paper-2:var(--bg-card); --line:#2a2f36;
  --concrete:var(--gray-mid); --steel:var(--gray-light); --asphalt:var(--white);
  --rust:var(--orange); --rust-dim:var(--orange-dark);
}
*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{margin:0;background:var(--bg);color:var(--white);font-family:var(--font);font-weight:400;
     line-height:1.55;-webkit-font-smoothing:antialiased;}
a{color:var(--orange);text-decoration:none;} a:hover{color:var(--orange-dark);}
h1,h2,h3{font-weight:800;letter-spacing:-.01em;}
:focus-visible{outline:none;box-shadow:0 0 0 3px rgba(255,106,26,.45);border-radius:6px;}

/* ---------- Fejléc ---------- */
.app-header{position:sticky;top:0;z-index:50;background:rgba(13,15,18,.88);backdrop-filter:blur(10px);
            border-bottom:1px solid var(--border);}
.app-header-top{max-width:1240px;margin:0 auto;padding:12px 24px;display:flex;align-items:center;
                justify-content:space-between;gap:14px;}
.brand{display:flex;align-items:baseline;gap:10px;font-size:1.4rem;font-weight:800;letter-spacing:-.01em;color:var(--white);}
.brand:hover{color:var(--white);}
.logo-white{color:var(--white);} .logo-orange{color:var(--orange);}
.logo{display:inline-block;}
.brand small{font-size:.68rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--gray-mid);}
.app-user{display:flex;align-items:center;gap:14px;font-size:.82rem;color:var(--gray-light);font-weight:600;}
.app-user form{margin:0;}
.logout-btn{background:none;border:1px solid var(--border);color:var(--gray-light);font-family:var(--font);
            font-weight:700;font-size:.78rem;padding:7px 14px;border-radius:999px;cursor:pointer;transition:.2s;}
.logout-btn:hover{border-color:var(--orange);color:var(--orange);}
.app-nav{max-width:1240px;margin:0 auto;padding:0 24px 10px;display:flex;gap:4px;overflow-x:auto;scrollbar-width:thin;}
.app-nav a{flex:none;color:var(--gray-light);font-size:.82rem;font-weight:600;padding:7px 14px;border-radius:999px;transition:.2s;}
.app-nav a:hover{color:var(--white);background:rgba(255,255,255,.06);}
.app-nav a.active{background:var(--orange);color:#12130f;}

main{max-width:1240px;margin:0 auto;padding:34px 24px 80px;}
h2{font-size:1.9rem;margin:0 0 4px;}
.sub{color:var(--gray-mid);font-size:.9rem;margin:0 0 24px;}

/* ---------- Kártyák, statisztikák ---------- */
.panel{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius);padding:22px;margin-bottom:16px;}
.panel h3{margin:0 0 14px;font-size:.78rem;text-transform:uppercase;letter-spacing:.1em;color:var(--orange);font-weight:700;}
.grid{display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));margin-bottom:18px;}
.stat{background:var(--bg-card);border:1px solid var(--border);border-top:3px solid var(--orange);
      border-radius:var(--radius);padding:16px 18px;}
.stat .num{text-align:left;font-size:1.7rem;font-weight:800;font-variant-numeric:tabular-nums;color:var(--white);}
.stat .lbl{font-size:.7rem;color:var(--gray-mid);text-transform:uppercase;letter-spacing:.08em;font-weight:600;}

/* ---------- Gombok ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font-family:var(--font);font-weight:700;
     font-size:.86rem;padding:10px 22px;border-radius:999px;border:2px solid var(--orange);background:var(--orange);
     color:#12130f;cursor:pointer;transition:transform .15s,background .2s,color .2s,border-color .2s;}
.btn:hover{background:var(--orange-dark);border-color:var(--orange-dark);color:#12130f;transform:translateY(-1px);}
.btn.rust{background:var(--orange);}
.btn.ghost{background:transparent;color:var(--white);border-color:var(--border);}
.btn.ghost:hover{border-color:var(--orange);color:var(--orange);background:transparent;}
.btn.small{padding:6px 14px;font-size:.76rem;}
.btn:disabled{opacity:.5;cursor:not-allowed;transform:none;}

/* ---------- Űrlapok ---------- */
label{font-size:.7rem;font-weight:700;color:var(--gray-mid);text-transform:uppercase;letter-spacing:.07em;display:block;margin-bottom:6px;}
input,select,textarea{width:100%;padding:11px 14px;background:var(--bg-input);color:var(--white);
       border:1px solid var(--border);border-radius:10px;font-size:.9rem;font-family:inherit;transition:border-color .2s,box-shadow .2s;}
input::placeholder,textarea::placeholder{color:var(--gray-mid);opacity:.7;}
input:hover,select:hover,textarea:hover{border-color:rgba(255,106,26,.4);}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--orange);box-shadow:0 0 0 3px rgba(255,106,26,.18);}
input[type=checkbox],input[type=radio]{width:auto;accent-color:var(--orange);}
select option{background:var(--bg-card);color:var(--white);}
textarea{resize:vertical;}
.field{margin-bottom:14px;}
.field-row{display:grid;grid-template-columns:1fr 1fr;gap:14px;}
.error{color:var(--danger);font-size:.84rem;margin-top:6px;font-weight:600;}
.success{color:var(--ok);font-size:.9rem;font-weight:600;}
fieldset{border:1px dashed var(--line);border-radius:12px;padding:14px;margin:0 0 16px;}
legend{font-size:.7rem;text-transform:uppercase;letter-spacing:.1em;color:var(--orange);padding:0 8px;font-weight:700;}

/* ---------- Táblázat ---------- */
table{width:100%;border-collapse:collapse;font-size:.88rem;}
th{text-align:left;font-size:.68rem;text-transform:uppercase;letter-spacing:.08em;color:var(--gray-mid);
   padding:8px 10px;border-bottom:2px solid var(--orange);font-weight:700;}
td{padding:10px;border-bottom:1px solid var(--border);}
tbody tr:hover td{background:rgba(255,255,255,.025);}
.num{text-align:right;font-variant-numeric:tabular-nums;}
.mono{font-variant-numeric:tabular-nums;}

/* ---------- Címkék, listák ---------- */
.badge{display:inline-block;padding:4px 11px;border-radius:999px;font-size:.66rem;font-weight:700;text-transform:uppercase;
       letter-spacing:.05em;background:rgba(255,255,255,.08);color:var(--gray-light);}
.badge.ok{background:rgba(55,200,113,.15);color:var(--ok);}
.badge.warn{background:rgba(255,176,32,.15);color:var(--hazard);}
.badge.hot{background:rgba(255,106,26,.16);color:var(--orange);}
.ticket{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius);padding:14px 18px;
        display:flex;align-items:center;gap:14px;cursor:pointer;margin-bottom:10px;transition:border-color .2s,transform .2s;}
.ticket:hover{border-color:var(--orange);transform:translateY(-2px);}
.toolbar{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-bottom:18px;}
.toolbar input,.toolbar select{max-width:230px;} .spacer{flex:1;}
.empty{color:var(--gray-mid);font-size:.88rem;}
.no-access{text-align:center;padding:60px 20px;color:var(--gray-mid);}
.locked-note{font-size:.78rem;color:var(--gray-mid);border:1px dashed var(--line);border-radius:10px;padding:9px 12px;margin-top:10px;}
.row{display:flex;justify-content:space-between;gap:12px;padding:11px 0;border-bottom:1px solid var(--border);font-size:.9rem;}
.row:last-child{border-bottom:none;}
.toast{position:fixed;bottom:24px;left:50%;transform:translateX(-50%);background:var(--bg-card);color:var(--white);
       padding:12px 22px;border-radius:999px;font-size:.84rem;font-weight:600;z-index:100;border:1px solid var(--orange);
       box-shadow:var(--shadow);opacity:0;pointer-events:none;transition:opacity .2s;}
.toast.show{opacity:1;}

/* ---------- Belépő / vendég oldalak ---------- */
body.guest{min-height:100vh;background:radial-gradient(ellipse at 50% 0%,rgba(255,106,26,.16),transparent 55%),var(--bg);}
.auth-wrap{max-width:460px;margin:0 auto;padding:56px 20px 60px;}
.auth-wrap.wide{max-width:640px;}
.auth-logo{display:block;text-align:center;font-size:2rem;font-weight:800;margin-bottom:26px;}
.auth-logo:hover{color:var(--white);}
.auth-card{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius);padding:30px;box-shadow:var(--shadow);}
.auth-card h2{font-size:1.4rem;margin-bottom:6px;}
.auth-card .lead{color:var(--gray-mid);font-size:.88rem;margin:0 0 22px;}
.auth-card .btn{width:100%;padding:13px 22px;margin-top:6px;}
.auth-links{margin-top:20px;font-size:.84rem;color:var(--gray-mid);text-align:center;}
.auth-links a{font-weight:700;}
.auth-back{display:block;text-align:center;margin-top:22px;font-size:.78rem;color:var(--gray-mid);}
.auth-center{text-align:center;}
.auth-center h1{color:var(--orange);font-size:2rem;margin:0 0 12px;}
.auth-center p{color:var(--gray-light);}

/* ---------- Ügyfélportál ---------- */
.portal-main{max-width:860px;}

@media (max-width:760px){
  .app-header-top{padding:10px 16px;} .app-nav{padding:0 16px 10px;}
  main{padding:24px 16px 60px;}
  .app-user .who{display:none;}
  .field-row{grid-template-columns:1fr;}
  h2{font-size:1.5rem;}
  table{display:block;overflow-x:auto;}
}
@media print{
  .app-header,.toast{display:none;} body{background:#fff;color:#000;}
}

/* Regisztrációs űrlap: címke+mező párok térköze */
#reg-form input,#reg-form textarea{margin-bottom:14px;}
#reg-form .field-row input{margin-bottom:14px;}
#reg-form input[type=checkbox]{margin:0;}