/* ===== Alap ===== */
:root{
  --bg:#eef3fb; --card:#fff; --text:#14213d; --muted:#6b7280;
  --primary:#186ad6; --success:#16a34a; --danger:#dc2626; --border:#e5e7eb;
  --shadow:0 20px 35px rgba(24,106,214,.12); --radius:18px; --maxw:960px;
  font-family: Roboto, system-ui, -apple-system, Segoe UI, Arial, sans-serif;
}
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0; background:var(--bg); color:var(--text); line-height:1.45}
.hidden{display:none !important}
.muted{color:var(--muted)}

/* ===== Layout ===== */
.container{max-width:var(--maxw); margin:0 auto; padding:24px}
.card{background:var(--card); border-radius:var(--radius); box-shadow:var(--shadow)}

/* ===== Login ===== */
.login-bg{display:flex; align-items:center; justify-content:center; min-height:100vh; padding:24px}
.login-card{width:100%; max-width:520px; padding:40px 36px; background:#fff; border-radius:var(--radius); box-shadow:var(--shadow); text-align:center}
.login-card h2{margin:0 0 22px; font-size:28px}
.input-group{position:relative; margin:16px 0}
.input-group input{
  width:100%; padding:14px 48px 14px 40px; border:1px solid var(--border);
  border-radius:12px; background:#f8f9fa; outline:none; font-size:16px;
}
.input-group input:focus{border-color:#457ef7}
.input-icon{position:absolute; left:12px; top:50%; transform:translateY(-50%); font-size:18px; opacity:.8; user-select:none; pointer-events:none}
.toggle-password{
  position:absolute !important; right:12px !important; left:auto !important;
  top:50%; transform:translateY(-50%); width:38px; height:38px; display:grid; place-items:center;
  background:transparent; border:0; cursor:pointer; color:#a0aec0; font-size:1.2em;
}
.toggle-password:hover{color:#1976d2}
.toggle-password span{display:none}
.toggle-password .eye-open{display:inline}
.showing .eye-open{display:none}
.showing .eye-closed{display:inline}

/* ===== Csak .btn osztályt formázunk (NEM minden gombot!) ===== */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:12px 18px; border:0; border-radius:14px;
  background:var(--primary); color:#fff; font-weight:600; cursor:pointer;
  transition:transform .04s ease, filter .15s ease;
}
.btn:hover{filter:brightness(1.05)}
.btn:active{transform:translateY(1px)}
.btn--xl{width:100%; padding:16px 18px; font-size:18px}
.btn--success{background:var(--success)}
.btn--danger{background:var(--danger)}
.btn.disabled{opacity:.55; pointer-events:none}

/* ===== App fejléce ===== */
.app-header{padding:14px 0 6px; display:flex; align-items:center; justify-content:space-between; gap:16px}
.brand{display:flex; align-items:center; gap:10px}
.brand-logo{width:36px; height:36px; object-fit:contain}
.brand-title{font-size:22px; font-weight:700}

/* ===== Menü kártyák ===== */
.menu-wrap{padding:12px 0 24px}
.menu-grid{display:grid; grid-template-columns:1fr; gap:14px}
@media (min-width:720px){ .menu-grid{ grid-template-columns:1fr 1fr } }

/* FONTOS: a menükártya NE legyen „kék gomb” */
.menu-card{
  all:unset;
  display:block; text-align:center; cursor:pointer;
  background:#fff; color:var(--text);
  border:1px solid var(--border); border-radius:16px; padding:18px;
  box-shadow:var(--shadow); transition:transform .05s ease, box-shadow .15s ease;
}
.menu-card:hover{transform:translateY(-1px); box-shadow:0 30px 40px rgba(24,106,214,.10)}
.menu-card-icon{font-size:22px; margin-bottom:6px; display:block}
.menu-card-title{font-weight:700; margin-bottom:4px}
.menu-card-sub{color:var(--muted); font-size:14px}
.menu-card.disabled{opacity:.55; pointer-events:none}

/* ===== Nézet fejlécek ===== */
.view-header{display:flex; align-items:center; justify-content:space-between; margin:12px 0}
.row-actions{display:flex; gap:10px; flex-wrap:wrap}

/* ===== Start nézet ===== */
#startView h1{font-size:28px; margin:8px 0 20px}
.input-block{max-width:560px}
.input-block label{display:block; margin:12px 0 6px}
.input-block select{width:100%; padding:12px; border:1px solid var(--border); border-radius:10px; background:#fff}

/* ===== Felhasználók ===== */
.users-layout{display:grid; gap:16px}
@media (min-width:900px){ .users-layout{ grid-template-columns: 380px 1fr } }
.user-ul{list-style:none; margin:0; padding:0; border:1px solid var(--border); border-radius:12px; background:#fff}
.user-ul li{padding:12px 14px; border-bottom:1px solid var(--border)}
.user-ul li:last-child{border-bottom:0}
.role-badge{display:inline-block; padding:4px 8px; border-radius:999px; background:#eef6ff}

/* ===== Checklista ===== */
#checklistContainer{margin:12px 0 18px}
.score-green{color:var(--success); font-weight:700}

/* ===== Naplók ===== */
#logList{display:grid; gap:10px}
.log-row{background:#fff; border:1px solid var(--border); border-radius:12px; padding:12px}

/* ===== Footer ===== */
.login-footer{display:block; text-align:center; margin-top:18px; color:var(--muted); font-size:12px}

/* ===== VÉDŐ OVERRIDE a régi globális button-szabály ellen ===== */
/* Ha bárhol maradt olyan CSS, ami minden <button>-t kék, 100% szélesre tesz,
   ez a blokk lenullázza azt, és csak a .btn marad „gomb”. */
button{background:initial; color:inherit; width:auto; min-width:0; border:0; padding:0}
/* ===== Safari prefix javítás ===== */
.input-icon {
  -webkit-user-select: none; /* Safari 3+ */
  user-select: none;
}
/* ===== Dark Mode manuális kapcsolóval ===== */
body.dark-mode {
  --bg:#1a202c; --card:#2d3748; --text:#edf2f7; --muted:#a0aec0;
  --primary:#63b3ed; --success:#48bb78; --danger:#f56565; --border:#4a5568;
  --shadow:0 20px 35px rgba(99,179,237,.12);
}

body.dark-mode {
  background:var(--bg); color:var(--text);
}
body.dark-mode .card{background:var(--card); color:var(--text); box-shadow:var(--shadow)}
body.dark-mode .input-group input{background:#2d3748; color:var(--text); border:1px solid var(--border)}
body.dark-mode .input-group input:focus{border-color:#63b3ed}
body.dark-mode .btn{background:var(--primary); color:#fff}
body.dark-mode .btn--success{background:var(--success)}
body.dark-mode .btn--danger{background:var(--danger)}
body.dark-mode .menu-card{background:#2d3748; color:var(--text); border:1px solid var(--border)}
body.dark-mode .menu-card:hover{box-shadow:0 30px 40px rgba(99,179,237,.10)}
body.dark-mode .role-badge{background:#2d3748; color:var(--text)}
body.dark-mode .login-card{background:#2d3748; color:var(--text); box-shadow:var(--shadow)}
body.dark-mode .login-footer{color:var(--muted)}
body.dark-mode .login-bg{background:var(--bg)}
body.dark-mode .login-card h2{color:var(--text)}
body.dark-mode .login-card input{background:#2d3748; color:var(--text); border:1px solid var(--border)}
body.dark-mode .login-card input:focus{border-color:#63b3ed}
body.dark-mode .login-card .toggle-password{color:#a0aec0}
body.dark-mode .login-card .toggle-password:hover{color:#63b3ed}
body.dark-mode .login-card .toggle-password span{color:var(--text)}
body.dark-mode .login-card .toggle-password .eye-open{display:inline}
body.dark-mode .login-card .showing .eye-open{display:none}
body.dark-mode .login-card .showing .eye-closed{display:inline}
/* ===== VÉDŐ OVERRIDE a régi globális button-szabály ellen ===== */         
/* ===== Safari prefix javítás ===== */
.input-icon {
  -webkit-user-select: none; /* Safari 3+ */
  user-select: none;
}
/* ===== RENDIX UI – egységes fekete gombok + középre igazítás (OVERRIDE) ===== */

/* 0) kis segédváltozók a gombokhoz */
:root{
  --btn-bg:#111;           /* fekete */
  --btn-text:#fff;         /* fehér szöveg */
  --btn-border:#000;       /* kontraszt szegély */
}

/* 1) FELSŐ MENÜ gombok – fekete, jobb olvashatóság */
.header-actions .btn{
  background:var(--btn-bg) !important;
  color:var(--btn-text) !important;
  border:1px solid var(--btn-border);
  font-weight:700;
  letter-spacing:.2px;
}

/* 2) ALSÓ „row-actions” gombok – fekete és egységes méret/illeszkedés */
.row-actions{ justify-content:center; gap:12px; }   /* szép középre illesztés */
.row-actions .btn{
  background:var(--btn-bg) !important;
  color:var(--btn-text) !important;
  border:1px solid var(--btn-border);
  min-width:180px;         /* egységes szélesség */
  height:46px;             /* egységes magasság */
}

/* 3) ALAP gomb – is fekete (kivéve success/danger) */
.btn{
  background:var(--btn-bg) !important;
  color:var(--btn-text) !important;
  border:1px solid var(--btn-border);
}
.btn:hover{ filter:brightness(1.06); }
.btn:active{ transform:translateY(1px); }

/* fontos: a zöld/piros gombok maradjanak tematikusak */
.btn--success{ background:#16a34a !important; border-color:#12873d !important; }
.btn--danger{  background:#dc2626 !important; border-color:#b81f1f !important; }

/* 4) MENÜ nézet – a két nagy kártya valóban középen legyen a teljes oldalon */
.menu-wrap{ display:flex; justify-content:center; }
.menu-grid{ width:100%; max-width:1040px; margin:0 auto; }

/* 5) START nézet – a nagy fehér kártya tényleg középen legyen */
#startView .input-block{ margin:0 auto; }

/* 6) fejléclogó és cím sor tömörebb, hogy ne húzza el az elrendezést */
.app-header{ align-items:center; gap:16px; }

/* 7) jobb kontraszt a kártyacímeken és a gombfeliratokon (olvashatóság) */
.menu-card-title{ font-weight:800; letter-spacing:.2px; }
.btn{ font-weight:700; }

/* ===== End of style.css ===== */