/* ==========================================================
   okosfoci.css  –  mobile-first dark & light theme
========================================================== */

/* -------------- VARS & THEME -------------- */
:root{
  /* dark (alap) */
  --bg1:#0f1117; --bg2:#161b22; --bg3:#202632;
  --accent1:#1f6feb; --accent2:#c084fc;
  --txt-main:#e6edf3; --txt-muted:#8b949e;
}
[data-theme="light"]{
  --bg1:#f2f2f2; --bg2:#ffffff; --bg3:#f0f3f8;
  --accent1:#0066ff; --accent2:#00c3ff;
  --txt-main:#1b1b1b; --txt-muted:#555;
}
:root{ --radius:10px; --shadow:0 4px 14px rgba(0,0,0,.2); --tr:.25s cubic-bezier(.4,.2,.2,1); --font:'Inter',sans-serif; }

/* --------------- RESET & BODY --------------- */
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  font-family:var(--font); background:var(--bg1); color:var(--txt-main);
  min-height:100vh; display:flex; flex-direction:column;
  align-items:center; padding:1rem .75rem 3rem; line-height:1.5;
  transition:var(--tr);
}

/* --------------- NAV / HEADER --------------- */
header{
  width:100%; max-width:640px; margin-bottom:1rem;
  display:flex; justify-content:space-between; align-items:center;
}
header h1{font-size:1.4rem;color:var(--accent1);}
.themeToggle{
  background:none;border:2px solid var(--accent1);color:var(--accent1);
  border-radius:var(--radius);padding:.35rem .7rem;cursor:pointer;
  transition:var(--tr);font-weight:600;
}
.themeToggle:hover{background:var(--accent1);color:#fff}

/* --------------- CARD ---------------- */
.card{
  width:100%; max-width:640px;
  background:var(--bg2); border:1px solid #2a2f38;
  border-radius:var(--radius); padding:1.4rem 1.5rem; margin:1rem 0;
  box-shadow:var(--shadow); transition:var(--tr);
}
.card.collapsed > .card-body{display:none;}
.card h2{font-size:1.25rem;margin:0 0 .8rem;color:var(--accent1);cursor:pointer;display:flex;justify-content:space-between;align-items:center}
.card h2::after{content:'▾';font-size:.9rem;transition:var(--tr);}
.card.collapsed h2::after{transform:rotate(-90deg);}

/* ---------------- FORM ---------------- */
input,textarea{
  width:100%;background:var(--bg3);
  border:1px solid #2a2f38;border-radius:var(--radius);
  color:var(--txt-main);padding:.65rem 1rem;margin:.55rem 0 1.2rem;
  transition:var(--tr);
}
input:focus,textarea:focus{border-color:var(--accent1);outline:none;}

button{
  background:linear-gradient(135deg,var(--accent1),var(--accent2));
  border:none;color:#fff;padding:.7rem 1.4rem;border-radius:var(--radius);
  font-weight:600;cursor:pointer;transition:var(--tr);
}
button:hover{transform:translateY(-2px);box-shadow:0 6px 14px rgba(0,0,0,.4);}
button:active{transform:translateY(0) scale(.98);}
button.full{width:100%}
button.hidden{display:none !important}

/* ---------------- TABLE ---------------- */
table{width:100%;border-collapse:collapse;margin-top:1rem;font-size:.9rem}
th,td{padding:.6rem .8rem;text-align:left;border:1px solid #2a2f38}
th{background:#1e242c}
tr:nth-child(odd){background:#1a1f27}
tr:hover{background:#273040}

/* Mobile table -> card */
@media (max-width:600px){
  table,thead,tbody,tr,th,td{display:block}
  thead{display:none}
  tr{margin-bottom:1rem;background:var(--bg2);padding:.6rem;border-radius:var(--radius)}
  td{border:none;position:relative;padding-left:45%}
  td::before{
    content:attr(data-label);
    position:absolute;left:1rem;top:.6rem;font-weight:600;color:var(--accent1)
  }
}

/* ---------------- QR ---------------- */
#qrCanvas{display:flex;justify-content:center;margin:1rem 0}

/* --------------- TOAST ---------------- */
.toast{
  position:fixed;left:50%;bottom:30px;transform:translateX(-50%) translateY(120%);
  background:var(--bg2);color:var(--txt-main);padding:.8rem 1.2rem;
  border-radius:var(--radius);box-shadow:var(--shadow);opacity:0;transition:var(--tr);
  z-index:9999;
}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0);}