:root {
    --navy: #2B2F64;
    --kek: #5376B8;
    --szurke-sav: #B3B5B5;
    --piros: #C0392B;
    --zold: #1E8449;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
body { font-family: -apple-system, "Segoe UI", Roboto, sans-serif; background: #f1f3f6; color: #1f2937; font-size: 15px; }
a { color: var(--kek); text-decoration: none; }

/* --- Fejléc (világos, logóval) --- */
.topbar { background: #fff; border-bottom: 1px solid #e5e7eb; box-shadow: 0 1px 3px rgba(0,0,0,.05); }
.topbar-in { max-width: 1100px; margin: 0 auto; padding: 0 14px; display: flex; align-items: center; min-height: 62px; gap: 14px; }
.brand { margin-right: auto; display: flex; align-items: center; }
.brand img { height: 34px; width: auto; display: block; }

.nav-desktop { display: flex; gap: 2px; }
.nav-desktop a { color: #374151; padding: 20px 11px; font-size: 14px; font-weight: 600; }
.nav-desktop a:hover { color: var(--navy); }
.nav-desktop a.aktiv { color: var(--navy); border-bottom: 3px solid var(--kek); }

/* --- Hamburger --- */
.menu-toggle { display: none; background: none; border: 0; cursor: pointer; padding: 8px; }
.menu-toggle span { display: block; width: 24px; height: 3px; background: var(--navy); border-radius: 2px; margin: 4px 0; }

@media (max-width: 900px) {
    .nav-desktop { display: none; }
    .menu-toggle { display: block; }
    .brand img { height: 28px; }
}

/* --- Off-canvas menü --- */
.offcanvas-overlay { position: fixed; inset: 0; background: rgba(17,24,39,.5); opacity: 0; pointer-events: none; transition: opacity .25s; z-index: 90; }
.offcanvas-overlay.open { opacity: 1; pointer-events: auto; }
.offcanvas { position: fixed; top: 0; right: 0; bottom: 0; width: 290px; max-width: 85vw; background: #fff; z-index: 100;
    transform: translateX(100%); transition: transform .25s ease; display: flex; flex-direction: column; box-shadow: -4px 0 20px rgba(0,0,0,.15); }
.offcanvas.open { transform: translateX(0); }
.offcanvas-fej { display: flex; align-items: center; justify-content: space-between; padding: 16px; border-bottom: 1px solid #e5e7eb; }
.offcanvas-fej img { height: 26px; width: auto; }
.offcanvas-zar { background: none; border: 0; font-size: 30px; line-height: 1; color: #6b7280; cursor: pointer; padding: 0 4px; }
.offcanvas-nav { flex: 1; overflow-y: auto; padding: 8px 0; }
.offcanvas-nav a { display: block; padding: 14px 20px; color: #374151; font-weight: 600; font-size: 15px; border-left: 4px solid transparent; }
.offcanvas-nav a.aktiv { color: var(--navy); border-left-color: var(--kek); background: #f8fafc; }
.offcanvas-lab { padding: 16px 20px; border-top: 1px solid #e5e7eb; display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.oc-user { font-weight: 700; font-size: 14px; }
.oc-user small { display: block; color: #6b7280; font-weight: 400; }

/* --- Tartalom --- */
.tartalom { max-width: 1100px; margin: 0 auto; padding: 20px 14px 40px; }
.oldal-cim { font-size: 22px; margin-bottom: 16px; color: var(--navy); }
.card { background: #fff; border-radius: 10px; padding: 18px; margin-bottom: 16px; box-shadow: 0 1px 3px rgba(0,0,0,.08); }
.card h2 { font-size: 15px; text-transform: uppercase; letter-spacing: .5px; color: #374151; margin-bottom: 12px; border-bottom: 1px solid #e5e7eb; padding-bottom: 8px; }
.lablec { text-align: center; color: #9ca3af; font-size: 12px; padding: 20px 0 30px; }

/* --- Űrlapok --- */
label { display: block; font-size: 13px; font-weight: 600; margin: 10px 0 4px; }
input, select, textarea { width: 100%; padding: 9px 11px; border: 1px solid #d1d5db; border-radius: 6px; font-size: 15px; background: #fff; }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--kek); box-shadow: 0 0 0 3px rgba(83,118,184,.18); }
.sor { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.sor3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 12px; }
@media (max-width: 600px) { .sor, .sor3 { grid-template-columns: 1fr; } }
.hint { font-size: 12px; color: #6b7280; margin-top: 3px; }

.btn { display: inline-block; padding: 10px 18px; background: var(--kek); color: #fff; border: 0; border-radius: 7px; font-size: 15px; font-weight: 600; cursor: pointer; }
.btn:hover { background: #44639e; }
.btn-kicsi { padding: 6px 12px; font-size: 13px; }
.btn-piros { background: var(--piros); } .btn-piros:hover { background: #a93226; }
.btn-szurke { background: #6b7280; } .btn-szurke:hover { background: #4b5563; }
.btn-zold { background: var(--zold); } .btn-zold:hover { background: #196f3d; }
.btn-navy { background: var(--navy); } .btn-navy:hover { background: #22254f; }

/* --- Flash --- */
.flash { padding: 12px 14px; border-radius: 8px; margin-bottom: 14px; font-size: 14px; }
.flash-ok { background: #f0fdf4; border: 1px solid #bbf7d0; color: #166534; }
.flash-hiba { background: #fef2f2; border: 1px solid #fecaca; color: #b91c1c; }

/* --- Táblázatok --- */
.tabla-wrap { overflow-x: auto; }
table.lista { width: 100%; border-collapse: collapse; font-size: 14px; }
table.lista th { text-align: left; padding: 9px 10px; background: #f9fafb; border-bottom: 2px solid #e5e7eb; font-size: 12px; text-transform: uppercase; letter-spacing: .4px; color: #6b7280; white-space: nowrap; }
table.lista td { padding: 9px 10px; border-bottom: 1px solid #f3f4f6; vertical-align: middle; }
table.lista tr:hover td { background: #f9fafb; }

.badge { display: inline-block; padding: 2px 9px; border-radius: 99px; font-size: 12px; font-weight: 600; }
.badge-zold { background: #dcfce7; color: #166534; }
.badge-piros { background: #fee2e2; color: #b91c1c; }
.badge-sarga { background: #fef9c3; color: #854d0e; }
.badge-kek { background: #dbeafe; color: #1e40af; }
.badge-szurke { background: #f3f4f6; color: #4b5563; }

/* --- Nagy dátumválasztó --- */
.nap-valaszto { display: flex; align-items: center; justify-content: center; gap: 8px; }
.nap-nyil { flex: 0 0 auto; width: 48px; height: 48px; display: flex; align-items: center; justify-content: center;
    background: #fff; border: 1px solid #d1d5db; border-radius: 10px; font-size: 26px; color: var(--navy); font-weight: 700; user-select: none; }
.nap-nyil:hover { background: #f8fafc; border-color: var(--kek); }
.nap-kozep { text-align: center; min-width: 200px; cursor: pointer; padding: 4px 10px; }
.nap-datum { font-size: 24px; font-weight: 800; color: var(--navy); line-height: 1.2; }
.nap-nev { font-size: 14px; color: #6b7280; margin-top: 2px; }
.nap-rejtett-input { position: absolute; opacity: 0; width: 0; height: 0; border: 0; padding: 0; }
@media (max-width: 480px) { .nap-datum { font-size: 19px; } .nap-kozep { min-width: 0; } }

/* --- Jelenlét: összegző --- */
.osszegzo { display: flex; gap: 8px; margin-bottom: 12px; }
.oszt { flex: 1; background: #fff; border-radius: 10px; padding: 10px 6px; text-align: center; box-shadow: 0 1px 3px rgba(0,0,0,.08); border-top: 3px solid transparent; }
.oszt b { display: block; font-size: 24px; line-height: 1.1; }
.oszt span { font-size: 11px; color: #6b7280; text-transform: uppercase; letter-spacing: .3px; }
.oszt-jelen { border-top-color: var(--zold); } .oszt-jelen b { color: var(--zold); }
.oszt-nincs { border-top-color: var(--piros); } .oszt-nincs b { color: var(--piros); }
.oszt-ures  { border-top-color: #9ca3af; }      .oszt-ures b  { color: #6b7280; }

/* --- Gyors műveletek --- */
.gyors-sav { display: flex; gap: 8px; margin-bottom: 12px; flex-wrap: wrap; }
.gyors-sav .btn { flex: 1 1 auto; }

/* --- Dolgozó kártyák --- */
.dolgozo-lista { display: flex; flex-direction: column; gap: 10px; }
.d-kartya { background: #fff; border-radius: 10px; padding: 12px 14px; box-shadow: 0 1px 3px rgba(0,0,0,.08);
    border-left: 5px solid #e5e7eb; transition: border-color .15s, background .15s; }
.d-kartya.k-jelen { border-left-color: var(--zold); background: #f6fdf8; }
.d-kartya.k-nincs { border-left-color: var(--piros); background: #fef7f6; }

.d-fej { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; margin-bottom: 10px; }
.d-nev { font-weight: 700; font-size: 16px; color: #111827; line-height: 1.25; }
.d-nev small { display: block; color: #6b7280; font-weight: 400; font-size: 12px; margin-top: 1px; }

.mj-nyit { background: none; border: 0; color: #9ca3af; font-size: 12px; font-weight: 600; cursor: pointer;
    padding: 4px 6px; white-space: nowrap; border-radius: 5px; }
.mj-nyit:hover { background: #f3f4f6; color: #4b5563; }
.mj-nyit.van { color: var(--kek); }

/* Státusz gombok — nagy, ujjbarát */
.d-gombok { display: flex; gap: 8px; }
.d-gombok label { margin: 0; flex: 1; cursor: pointer; }
.d-gombok label.g-ures { flex: 0 0 48px; }
.d-gombok input { position: absolute; opacity: 0; width: 0; height: 0; }
.d-gombok span { display: flex; align-items: center; justify-content: center; height: 50px;
    border: 2px solid #e5e7eb; border-radius: 9px; font-size: 15px; font-weight: 700; color: #6b7280;
    background: #fff; user-select: none; -webkit-tap-highlight-color: transparent; transition: all .12s; }
.d-gombok span:active { transform: scale(.97); }
.d-gombok .g-jelen input:checked + span { background: var(--zold); border-color: var(--zold); color: #fff; }
.d-gombok .g-nincs input:checked + span { background: var(--piros); border-color: var(--piros); color: #fff; }
.d-gombok .g-ures span { font-size: 22px; color: #9ca3af; }
.d-gombok .g-ures input:checked + span { background: #f3f4f6; border-color: #d1d5db; color: #6b7280; }

/* Megjegyzés mező (nyitható) */
.d-mj { display: none; margin-top: 10px; }
.d-mj.nyitva { display: block; }
.d-mj input { font-size: 14px; padding: 10px 12px; }

/* --- Ragadós mentő sáv --- */
.mento-sav { position: sticky; bottom: 0; padding: 12px 0; margin-top: 16px;
    background: linear-gradient(to top, #f1f3f6 65%, rgba(241,243,246,0)); }
.mento-sav .btn { width: 100%; padding: 15px; font-size: 16px; box-shadow: 0 3px 10px rgba(30,132,73,.28); }
.mento-sav.ketto { display: flex; gap: 8px; }
.mento-sav.ketto .btn { flex: 1; box-shadow: 0 3px 10px rgba(43,47,100,.22); }
.mento-hely { height: 6px; }

/* --- Napi jelentés: létszám blokk --- */
.letszam-blokk { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
@media (max-width: 600px) { .letszam-blokk { grid-template-columns: 1fr; gap: 14px; } }
.lb-cim { font-size: 13px; text-transform: uppercase; letter-spacing: .5px; margin-bottom: 6px; }
.lb-zold { color: var(--zold); }
.lb-piros { color: var(--piros); }
.lb-lista { list-style: none; }
.lb-lista li { padding: 6px 0; border-bottom: 1px solid #f3f4f6; font-size: 14px; }
.lb-lista li small { color: #9ca3af; font-size: 12px; }
.lb-mj { display: block; color: #6b7280; font-size: 12px; }

textarea { font-family: inherit; line-height: 1.5; resize: vertical; }

/* --- Nap kártya --- */
.nap-kartya { padding: 14px; }

@media (max-width: 600px) {
    .oszt b { font-size: 21px; }
    .d-gombok span { height: 52px; font-size: 15px; }
    .d-kartya { padding: 12px; }
}

/* --- Riport tábla --- */
table.riport { border-collapse: collapse; font-size: 12px; }
table.riport th, table.riport td { border: 1px solid #cbd5e1; padding: 4px 5px; text-align: center; white-space: nowrap; }
table.riport th { background: #f1f5f9; }
table.riport td.nev-cella { text-align: left; font-weight: 600; min-width: 140px; }
table.riport .hetvege { background: #fef2f2; }
.j-jelen { color: var(--zold); font-weight: 700; }
.j-nincs { color: var(--piros); font-weight: 700; }

/* --- Nyomtatás --- */
@media print {
    .no-print, .topbar, .lablec, .oldal-cim, .offcanvas, .offcanvas-overlay { display: none !important; }
    body { background: #fff; }
    .tartalom { max-width: none; padding: 0; }
    .card { box-shadow: none; padding: 0; }
    table.riport { font-size: 10px; width: 100%; }
}

/* --- Login --- */
.login-wrap { max-width: 380px; margin: 60px auto; padding: 0 14px; }
.login-cim { text-align: center; margin-bottom: 20px; }
.login-cim img { height: 44px; width: auto; margin-bottom: 10px; }
.login-cim p { color: #6b7280; font-size: 13px; }