/* ── Reset & Base ── */
*{box-sizing:border-box;margin:0;padding:0}
body{font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;background:#f5f5f3;color:#1a1a1a;min-height:100vh}
a{text-decoration:none;color:inherit}
input,select,textarea,button{font-family:inherit;font-size:14px}
input,select,textarea{width:100%;padding:8px 12px;border:1px solid rgba(0,0,0,0.25);border-radius:8px;background:#fff;color:#1a1a1a;outline:none;transition:border-color .15s}
input:focus,select:focus,textarea:focus{border-color:#7F77DD;box-shadow:0 0 0 3px rgba(127,119,221,.15)}
textarea{resize:vertical}
button,a.btn{display:inline-flex;align-items:center;justify-content:center;cursor:pointer;border:1px solid rgba(0,0,0,.2);border-radius:8px;padding:8px 16px;background:#fff;color:#1a1a1a;transition:all .15s;gap:6px}
button:hover,a.btn:hover{background:#efefed}
button:active,a.btn:active{transform:scale(.98)}
button:disabled{opacity:.45;cursor:not-allowed;transform:none}

/* ── Colour palette ── */
.btn-primary,button.btn-primary,a.btn.btn-primary{background:#7F77DD;color:#fff;border-color:#534AB7;font-weight:500}
.btn-primary:hover{background:#534AB7!important}
.btn-danger,button.btn-danger{background:#E24B4A;color:#fff;border-color:#A32D2D}
.btn-danger:hover{background:#A32D2D!important}
.btn-success,a.btn.btn-success{background:#639922;color:#fff;border-color:#3B6D11}
.btn-success:hover{background:#3B6D11!important}
.btn-sm{padding:3px 9px;font-size:12px}
.btn-full{width:100%;display:flex}

/* ── Layout ── */
nav{background:#fff;border-bottom:1px solid rgba(0,0,0,.1);padding:0 1rem;display:flex;align-items:center;position:sticky;top:0;z-index:10;box-shadow:0 1px 3px rgba(0,0,0,.05)}
.nav-brand{font-size:15px;font-weight:600;padding:14px 0;flex:1}
.nav-btn{padding:10px 12px;font-size:13px;border:none;border-radius:0;background:transparent;color:#666;border-bottom:2px solid transparent;margin-bottom:-1px;display:inline-flex}
.nav-btn:hover,.nav-btn.act{color:#7F77DD;border-bottom-color:#7F77DD}
.nav-btn.act{font-weight:600}
.main-wrap{padding:1rem;max-width:680px;margin:0 auto}

/* ── Cards ── */
.card{background:#fff;border:1px solid rgba(0,0,0,.1);border-radius:12px;padding:1rem 1.25rem;margin-bottom:12px}
.p-lg{padding:2.5rem}
hr.divider,.divider{height:1px;background:rgba(0,0,0,.08);margin:10px 0;border:none}

/* ── Typography helpers ── */
.fw-600{font-weight:600}.fs-11{font-size:11px}.fs-12{font-size:12px}.fs-13{font-size:13px}
.fs-14{font-size:14px}.fs-15{font-size:15px}.fs-16{font-size:16px}.fs-20{font-size:20px}
.text-muted{color:#888}.text-muted-purple{color:#534AB7}.c-purple{color:#534AB7}.c-teal{color:#0F6E56}
.mt-1{margin-top:4px}.mt-2{margin-top:8px}.mt-3{margin-top:12px}.mb-1{margin-bottom:4px}
.mb-2{margin-bottom:8px}.mb-3{margin-bottom:12px}.ml-1{margin-left:4px}.ml-2{margin-left:8px}
.mr-1{margin-right:4px}.mx-auto{margin-left:auto;margin-right:auto}
.text-center{text-align:center}.gap-4{gap:4px}.gap-6{gap:6px}.gap-8{gap:8px}
.flex-1{flex:1}.flex-wrap{flex-wrap:wrap}.py-4{padding-top:4px;padding-bottom:4px}

/* ── Row / Col ── */
.row{display:flex;gap:8px;align-items:center}
.col{display:flex;flex-direction:column;gap:10px}

/* ── Badges ── */
.badge{display:inline-flex;align-items:center;font-size:11px;padding:2px 8px;border-radius:5px;font-weight:500}
.b-purple{background:#EEEDFE;color:#3C3489}
.b-green{background:#EAF3DE;color:#27500A}
.b-gray{background:#F1EFE8;color:#444441}
.b-teal{background:#E1F5EE;color:#085041}
.b-amber{background:#FAEEDA;color:#633806}
.b-red{background:#FCEBEB;color:#791F1F}

/* ── Avatar ── */
.avatar{border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:600;flex-shrink:0;font-size:14px;width:36px;height:36px}
.avatar-xs{width:22px;height:22px;font-size:9px}
.avatar-sm{width:28px;height:28px;font-size:11px}
.avatar-lg{width:44px;height:44px;font-size:17px}
.avatar-xl{width:64px;height:64px;font-size:24px}
.ci0{background:#EEEDFE;color:#3C3489}.ci1{background:#E1F5EE;color:#085041}
.ci2{background:#FAECE7;color:#4A1B0C}.ci3{background:#E6F1FB;color:#042C53}
.ci4{background:#FAEEDA;color:#412402}.ci5{background:#FBEAF0;color:#4B1528}

/* ── Alerts / toasts ── */
.alert{padding:10px 12px;border-radius:8px;font-size:13px;margin-bottom:12px}
.alert-err{background:#FCEBEB;color:#791F1F;border:1px solid #A32D2D}
.alert-ok{background:#EAF3DE;color:#27500A;border:1px solid #639922}
.alert-green{background:#EAF3DE;border:1px solid #C0DD97;border-radius:8px;padding:9px 12px;font-size:13px;color:#27500A}
.toast{position:fixed;top:66px;right:1rem;padding:10px 16px;border-radius:8px;font-size:13px;font-weight:500;z-index:200;box-shadow:0 4px 12px rgba(0,0,0,.15);animation:fadeIn .3s}
.toast.ok{background:#EAF3DE;color:#27500A;border:1px solid #639922}
.toast.err{background:#FCEBEB;color:#791F1F;border:1px solid #A32D2D}
@keyframes fadeIn{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:translateY(0)}}
.info-box{background:#E6F1FB;border:1px solid #B5D4F4;border-radius:8px;padding:9px 12px;font-size:13px;color:#0C447C}
.warn-box{background:#FAEEDA;border:1px solid #FAC775;border-radius:8px;padding:9px 12px;font-size:13px;color:#633806}

/* ── Form field ── */
.field{margin-bottom:12px}
.label{font-size:11px;color:#666;margin-bottom:4px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;display:block}
.input-wrap{position:relative}
.input-wrap input{padding-right:40px}
.pw-toggle{position:absolute;right:10px;top:50%;transform:translateY(-50%);background:none;border:none;cursor:pointer;font-size:15px;color:#888;padding:0;width:24px;border-radius:0}
.pw-toggle:hover{background:none}

/* ── Password strength ── */
.pw-meter{height:4px;border-radius:2px;margin-top:6px;transition:width .3s,background .3s}
.pw-hint{font-size:11px;margin-top:4px;color:#aaa}
.pw-req{font-size:11px;color:#888;margin-top:6px;line-height:1.9}
.pw-req span{display:inline-block;margin-right:10px}
.pw-req .ok{color:#27500A}.pw-req .no{color:#bbb}

/* ── Auth page ── */
.auth-page{background:#f5f5f3}
.auth-wrap{display:flex;align-items:center;justify-content:center;min-height:100vh;padding:1rem}
.auth-card{max-width:400px;width:100%}
.auth-logo{font-size:36px;text-align:center;margin-bottom:8px}
.auth-title{font-size:20px;font-weight:600;text-align:center;margin-bottom:4px}
.auth-sub{font-size:13px;color:#666;text-align:center;margin-bottom:1.25rem}
.auth-hint{font-size:11px;color:#aaa;text-align:center;margin-top:8px}
.tab-switch{display:flex;background:#f5f5f3;border-radius:8px;padding:3px;margin-bottom:1.25rem}
.tab-btn{flex:1;text-align:center;padding:7px;border-radius:6px;font-size:14px;color:#666}
.tab-btn.act{background:#fff;font-weight:600;color:#1a1a1a}

/* ── Stat row ── */
.stat-row{display:flex;align-items:center;gap:8px;padding:7px 0;border-bottom:1px solid rgba(0,0,0,.06)}
.stat-row:last-child{border-bottom:none}

/* ── Metrics ── */
.metrics-3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px;margin-bottom:8px}
.metric{background:#f5f5f3;border-radius:8px;padding:12px;text-align:center}
.metric-val{font-size:22px;font-weight:600}
.metric-lbl{font-size:11px;color:#666;margin-top:2px}

/* ── Section header ── */
.section-hdr{font-size:12px;font-weight:600;color:#888;margin:14px 0 8px;display:flex;align-items:center;gap:8px;text-transform:uppercase;letter-spacing:.04em}
.section-hdr::after{content:'';flex:1;height:1px;background:rgba(0,0,0,.08)}

/* ── Home page ── */
.page-hdr{margin-bottom:1.25rem;align-items:center}
.page-sub{font-size:13px;color:#888}
.page-title{font-size:20px;font-weight:600}
.next-driver-box{background:#EEEDFE;border-radius:8px;padding:9px 12px;display:flex;align-items:center;gap:10px}
.pair-row{background:#f5f5f3;border-radius:8px;padding:7px 10px;margin-bottom:5px;display:flex;align-items:center;gap:8px}
.pair-avatars{display:flex;gap:3px}
.pair-names{flex:1;font-size:12px}
.pair-next{display:flex;align-items:center;gap:5px}
.today-box{background:#EAF3DE;border-radius:8px;padding:8px 12px;font-size:13px;color:#27500A;border:1px solid #C0DD97}

/* ── Calendar ── */
.cal-month-nav{display:flex;align-items:center;gap:8px;margin-bottom:1rem}
.cal-day{display:flex;gap:0;margin-bottom:10px}
.cal-day-label{width:52px;flex-shrink:0;padding-top:12px}
.cal-day-num{font-size:18px;font-weight:700;line-height:1}
.cal-day-name{font-size:11px;color:#888;margin-top:2px;text-transform:uppercase;letter-spacing:.03em}
.cal-day-rides{flex:1;display:flex;flex-direction:column;gap:6px}
.cal-ride{border-radius:10px;padding:10px 12px;border:1px solid rgba(0,0,0,.08)}
.cal-ride.full-group{border-left:4px solid #7F77DD;background:#fafafa}
.cal-ride.sub-group{border-left:4px solid #1D9E75;background:#fafafa}
.cal-ride-hdr{display:flex;align-items:center;margin-bottom:8px;flex-wrap:wrap;gap:4px}
.cal-ride-body{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.cal-role-driver{display:inline-flex;align-items:center;gap:5px;background:#EEEDFE;border-radius:6px;padding:3px 8px}
.cal-role-passenger{display:inline-flex;align-items:center;gap:5px;background:#F1EFE8;border-radius:6px;padding:3px 8px}
.role-lbl{font-size:10px;opacity:.65}
.arrow-sep{font-size:14px;color:#bbb;margin:0 2px}
.ride-comment{font-size:11px;color:#888;margin-top:6px;font-style:italic;border-top:1px solid rgba(0,0,0,.06);padding-top:5px}

/* ── Ride form ── */
.chk-card{border:1px solid rgba(0,0,0,.1);border-radius:8px;margin-bottom:4px;transition:all .15s}
.chk-card.suggested{border-color:#639922;background:#EAF3DE}
.chk{display:flex;align-items:center;gap:8px;padding:7px 8px;cursor:pointer;border-radius:8px}
.chk:hover{background:#f5f5f3}
.chk input[type=checkbox]{width:16px;height:16px;cursor:pointer;accent-color:#7F77DD}

/* ── Stats bars ── */
.bar-wrap{height:18px;background:#f0f0ee;border-radius:4px;overflow:hidden}
.bar-fill{height:100%;background:#7F77DD;border-radius:4px;transition:width .3s}
.pair-box{background:#f9f9f7;border:1px solid rgba(0,0,0,.08);border-radius:10px;padding:10px 12px}

/* ── Modals ── */
.modal-bg{position:fixed;inset:0;background:rgba(0,0,0,.5);display:flex;align-items:center;justify-content:center;z-index:100;padding:1rem;overflow-y:auto}
.modal{background:#fff;border-radius:12px;padding:1.5rem;width:100%;max-width:420px;max-height:90vh;overflow-y:auto;box-shadow:0 20px 60px rgba(0,0,0,.3);margin:auto}

select option{background:#fff;color:#1a1a1a}

/* ══════════════════════════════════════════
   TEMNA TEMA
   ══════════════════════════════════════════ */

body.dark {
    background: #111318;
    color: #e8e8f0;
}

/* Nav */
body.dark nav {
    background: #1a1c24;
    border-bottom-color: rgba(255,255,255,.08);
    box-shadow: 0 1px 3px rgba(0,0,0,.4);
}
body.dark .nav-btn { color: #999; }
body.dark .nav-btn:hover,
body.dark .nav-btn.act { color: #A09EDD; border-bottom-color: #A09EDD; }

/* Cards */
body.dark .card {
    background: #1e2028;
    border-color: rgba(255,255,255,.08);
    color: #e8e8f0;
}

/* Inputs */
body.dark input,
body.dark select,
body.dark textarea {
    background: #252830;
    border-color: rgba(255,255,255,.15);
    color: #e8e8f0;
}
body.dark input:focus,
body.dark select:focus,
body.dark textarea:focus {
    border-color: #7F77DD;
    box-shadow: 0 0 0 3px rgba(127,119,221,.2);
}
body.dark select option { background: #252830; color: #e8e8f0; }

/* Buttons */
body.dark button:not(.btn-primary):not(.btn-danger):not(.btn-success),
body.dark a.btn:not(.btn-primary):not(.btn-danger):not(.btn-success) {
    background: #252830;
    border-color: rgba(255,255,255,.15);
    color: #e8e8f0;
}
body.dark button:not(.btn-primary):not(.btn-danger):not(.btn-success):hover,
body.dark a.btn:not(.btn-primary):not(.btn-danger):not(.btn-success):hover {
    background: #2e3140;
}

/* Text helpers */
body.dark .text-muted  { color: #888; }
body.dark .label       { color: #999; }
body.dark .fw-600      { color: #e8e8f0; }

/* Divider */
body.dark hr.divider,
body.dark .divider { background: rgba(255,255,255,.08); }

/* Metrics */
body.dark .metric      { background: #252830; }
body.dark .metric-lbl  { color: #888; }

/* Stat rows */
body.dark .stat-row    { border-bottom-color: rgba(255,255,255,.06); }

/* Section header */
body.dark .section-hdr       { color: #666; }
body.dark .section-hdr::after{ background: rgba(255,255,255,.06); }

/* Home */
body.dark .pair-row    { background: #252830; }
body.dark .pair-box    { background: #252830; border-color: rgba(255,255,255,.08); }
body.dark .next-driver-box { background: #2a2550; }

/* Auth */
body.dark .auth-page   { background: #111318; }
body.dark .tab-switch  { background: #252830; }
body.dark .tab-btn     { color: #888; }
body.dark .tab-btn.act { background: #1e2028; color: #e8e8f0; }

/* Calendar */
body.dark .cal-ride              { border-color: rgba(255,255,255,.08); }
body.dark .cal-ride.full-group   { background: #1e2028; border-left-color: #7F77DD; }
body.dark .cal-ride.sub-group    { background: #1e2028; border-left-color: #1D9E75; }
body.dark .cal-role-driver       { background: #2a2550; }
body.dark .cal-role-passenger    { background: #252830; }
body.dark .cal-day-name          { color: #666; }
body.dark .ride-comment          { color: #666; border-top-color: rgba(255,255,255,.06); }
body.dark .arrow-sep             { color: #555; }

/* Ride form */
body.dark .chk-card              { border-color: rgba(255,255,255,.1); }
body.dark .chk-card.suggested    { border-color: #639922; background: #1a2a10; }
body.dark .chk:hover             { background: #252830; }

/* Modals */
body.dark .modal-bg              { background: rgba(0,0,0,.7); }
body.dark .modal                 { background: #1e2028; }

/* Bars */
body.dark .bar-wrap              { background: #252830; }

/* Alerts */
body.dark .info-box  { background: #0d2035; border-color: #1a4060; color: #7BB8E8; }
body.dark .warn-box  { background: #2a1e08; border-color: #5a3a08; color: #F0B84A; }

/* Toast */
body.dark .toast.ok  { background: #1a2a10; border-color: #3B6D11; color: #8BC34A; }
body.dark .toast.err { background: #2a1010; border-color: #6D1111; color: #E87A7A; }

/* Theme toggle gumb */
.theme-toggle {
    background: none;
    border: none;
    cursor: pointer;
    font-size: 18px;
    padding: 8px 10px;
    color: #888;
    border-radius: 8px;
    transition: background .15s;
    line-height: 1;
}
.theme-toggle:hover { background: rgba(0,0,0,.06); }
body.dark .theme-toggle:hover { background: rgba(255,255,255,.08); }