/* ==========================================================
   OSK Ekspert – styl aplikacji
   Motyw dopasowany do logo: czerń + czerwień "Ekspert Szkoła Jazdy"
   ========================================================== */

:root{
  --czern: #14161a;
  --czern-2: #1f2227;
  --czerwony: #e01f26;
  --czerwony-ciemny: #ad1319;
  --czerwony-jasny: #fdecec;
  --zloty: #f5b301;
  --zloty-ciemny: #c98f00;
  --tlo: #f3f2f1;
  --karta: #ffffff;
  --tekst: #1c1e22;
  --tekst-jasny: #6b7280;
  --zielony: #1f9d55;
  --zielony-jasny: #e8f8ef;
  --niebieski: #2563eb;
  --niebieski-jasny: #eaf1ff;
  --border: #e6e3e1;
  --radius: 14px;
  --shadow: 0 1px 3px rgba(20,10,10,.06), 0 4px 14px rgba(20,10,10,.05);
  --gap: 1.4rem;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
html{overflow-x:hidden}
body{
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  background: var(--tlo);
  color: var(--tekst);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  overflow-x:hidden;
}
h1,h2,h3,h4{
  font-family: "Poppins", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-weight: 600;
  margin: 0 0 .6rem;
  letter-spacing: -.01em;
}
h1{font-size:1.6rem; margin-bottom:1.1rem}
.flex-between h1{margin-bottom:0}
a{color: var(--niebieski); text-decoration:none}
a:hover{text-decoration:underline}

/* ---------- Top bar ---------- */
.topbar{
  background: var(--czern);
  color:#fff;
  position: sticky; top:0; z-index:50;
  border-bottom: 3px solid var(--czerwony);
  box-shadow: 0 2px 10px rgba(0,0,0,.25);
}
.topbar-inner{
  max-width: 1140px; margin:0 auto;
  display:flex; align-items:center; justify-content:space-between;
  padding: .55rem 1.2rem;
  gap: 1rem;
}
.brand{display:flex; align-items:center; gap:.6rem; color:#fff; font-weight:700; font-size:1.05rem}
.brand img{height:34px; width:auto; display:block}
.brand .dot{width:10px;height:10px;border-radius:50%;background:var(--czerwony);display:inline-block}
.topbar nav{display:flex; align-items:center; gap:1.15rem; flex-wrap:wrap}
.topbar nav a{color:#c7c9cd; font-size:.92rem; font-weight:500; padding:.3rem 0}
.topbar nav a.active, .topbar nav a:hover{color:#fff; text-decoration:none}
.topbar nav a.nav-accent{color:var(--zloty); font-weight:700}
.topbar nav a.nav-accent:hover{color:#ffd257}
.hamburger{display:none; background:none;border:none;color:#fff;font-size:1.6rem;cursor:pointer; line-height:1; padding:.2rem .4rem}

@media (max-width: 860px){
  .topbar nav{
    display:none;
    position:absolute; top:100%; left:0; right:0;
    background: var(--czern-2);
    flex-direction:column; align-items:flex-start; padding: .4rem 1.2rem 1rem; gap:0;
    border-bottom: 3px solid var(--czerwony);
    max-height: 80vh; overflow-y:auto;
  }
  .topbar nav.open{display:flex}
  .topbar nav a{padding:.75rem 0; border-bottom:1px solid #33363c; width:100%}
  .hamburger{display:block}
}

.container{max-width:1140px; margin:0 auto; padding:1.6rem 1.1rem 3.5rem}

/* ---------- Karty ---------- */
.card{
  background: var(--karta);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 1.3rem 1.4rem;
  margin-bottom: var(--gap);
  border: 1px solid rgba(20,10,10,.03);
}
.card h2, .card h3{margin-top:0}
.card + .card{ /* extra breathing room when cards stack directly */ }
.grid{display:grid; gap: var(--gap); margin-bottom: var(--gap)}
.grid-2{grid-template-columns:repeat(2,1fr)}
.grid-3{grid-template-columns:repeat(3,1fr)}
.grid-4{grid-template-columns:repeat(4,1fr)}
@media (max-width:820px){
  .grid-2,.grid-3,.grid-4{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:560px){
  .grid-2,.grid-3,.grid-4{grid-template-columns:1fr}
  .container{padding:1.1rem .8rem 3rem}
  .card{padding:1.1rem 1.1rem; margin-bottom:1.1rem; border-radius:12px}
  h1{font-size:1.35rem}
  .topbar-inner{padding:.5rem .8rem}
}

/* Odstęp między głównym nagłówkiem strony a pierwszym blokiem */
.flex-between{display:flex; justify-content:space-between; align-items:center; gap:1rem; flex-wrap:wrap; margin-bottom: var(--gap)}
h1.mt-0{margin-top:0}
.page-title{margin: 0 0 var(--gap)}

/* ---------- Statystyki / kafelki liczbowe ---------- */
.stat{
  background: var(--karta); border-radius: var(--radius); box-shadow: var(--shadow);
  padding:1.1rem 1.3rem; border-left:5px solid var(--zloty);
}
.stat .label{font-size:.78rem; color:var(--tekst-jasny); text-transform:uppercase; letter-spacing:.04em; font-weight:600}
.stat .value{font-size:1.65rem; font-weight:700; margin-top:.3rem}
.stat.red{border-left-color:var(--czerwony)}
.stat.green{border-left-color:var(--zielony)}
.stat.blue{border-left-color:var(--niebieski)}

/* ---------- Formularze ---------- */
label{display:block; font-size:.85rem; font-weight:600; margin-bottom:.35rem; color:#374151}
input[type=text], input[type=email], input[type=tel], input[type=password],
input[type=date], input[type=number], select, textarea{
  width:100%; padding:.7rem .8rem; border:1px solid var(--border); border-radius:9px;
  font-size:1rem; background:#fff; color:var(--tekst); font-family:inherit;
  min-height:46px;
}
textarea{min-height:unset}
input:focus, select:focus, textarea:focus{
  outline:2px solid var(--czerwony); outline-offset:1px; border-color:var(--czerwony);
}
.field{margin-bottom:1.15rem}
.form-row{display:flex; gap:1rem; flex-wrap:wrap}
.form-row > .field{flex:1; min-width:200px}

/* ---------- Przyciski ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.4rem;
  padding:.7rem 1.15rem; border-radius:9px; border:none; cursor:pointer;
  font-size:.95rem; font-weight:600; text-decoration:none;
  min-height:44px;
  transition: transform .05s ease, background .15s ease, box-shadow .15s ease;
}
.btn:active{transform: translateY(1px)}
.btn-primary{background: var(--czern); color:#fff}
.btn-primary:hover{background:#000; text-decoration:none}
.btn-accent{background: linear-gradient(135deg, var(--czerwony), var(--czerwony-ciemny)); color:#fff; box-shadow:0 3px 10px rgba(224,31,38,.35)}
.btn-accent:hover{background: var(--czerwony-ciemny); text-decoration:none}
.btn-gold{background: var(--zloty); color:#1c1e22}
.btn-gold:hover{background: var(--zloty-ciemny); text-decoration:none}
.btn-outline{background:#fff; border:1px solid var(--border); color:var(--tekst)}
.btn-outline:hover{border-color:var(--tekst); text-decoration:none}
.btn-danger{background:#fff; border:1px solid var(--czerwony); color:var(--czerwony)}
.btn-danger:hover{background:var(--czerwony); color:#fff; text-decoration:none}
.btn-sm{padding:.45rem .75rem; font-size:.82rem; min-height:36px}
.btn-block{width:100%; justify-content:center}
.btn-icon{padding:.55rem .65rem; min-width:44px}

/* ---------- Tabele (z widokiem "kart" na mobile) ---------- */
table{width:100%; border-collapse:collapse}
th, td{padding:.7rem .65rem; text-align:left; border-bottom:1px solid var(--border); font-size:.92rem}
th{font-size:.74rem; text-transform:uppercase; letter-spacing:.04em; color:var(--tekst-jasny); font-weight:700}
tr:hover td{background:#fafafa}

@media (max-width: 720px){
  table.responsive thead{display:none}
  table.responsive tr{display:block; margin-bottom:.9rem; border:1px solid var(--border); border-radius:12px; overflow:hidden; box-shadow: var(--shadow)}
  table.responsive td{display:flex; justify-content:space-between; align-items:center; gap:1rem; border-bottom:1px solid #f0eeec; padding:.65rem .8rem}
  table.responsive td:last-child{border-bottom:none}
  table.responsive td::before{content: attr(data-label); font-weight:600; color:var(--tekst-jasny); font-size:.75rem; flex-shrink:0}
}

/* ---------- Przełącznik widoku lista / karty (mobile) ---------- */
.view-toggle{display:none; gap:.4rem; margin-bottom:1rem}
.view-toggle button{
  display:flex; align-items:center; justify-content:center;
  width:40px; height:40px; border-radius:9px; border:1px solid var(--border);
  background:#fff; color:var(--tekst-jasny); cursor:pointer; font-size:1.1rem; padding:0;
}
.view-toggle button.active{background:var(--czern); border-color:var(--czern); color:#fff}
@media (max-width: 720px){
  .view-toggle{display:flex}

  table.responsive.view-cards{
    display:grid; grid-template-columns:1fr; gap:.9rem;
  }
  table.responsive.view-cards thead{display:none}
  table.responsive.view-cards tbody{display:contents}
  table.responsive.view-cards tr{
    display:flex; flex-direction:column; margin-bottom:0;
    border:1px solid var(--border); border-radius:var(--radius); box-shadow:var(--shadow);
    padding:1rem 1.1rem; background:var(--karta);
  }
  table.responsive.view-cards td{
    display:flex; flex-direction:column; align-items:flex-start; gap:.15rem;
    border-bottom:none; padding:.5rem 0;
  }
  table.responsive.view-cards td::before{font-size:.72rem}
  table.responsive.view-cards td:not(:last-child){border-bottom:1px dashed #f0eeec}
}
@media (min-width:460px) and (max-width:720px){
  table.responsive.view-cards{grid-template-columns:repeat(2,1fr)}
}

/* ---------- Znaczniki statusu ---------- */
.badge{display:inline-block; padding:.25rem .6rem; border-radius:999px; font-size:.74rem; font-weight:700}
.badge-gray{background:#e9e7e6; color:#374151}
.badge-blue{background:var(--niebieski-jasny); color:#1d4ed8}
.badge-amber{background:#fef3c7; color:#92400e}
.badge-green{background:var(--zielony-jasny); color:#0e6b39}
.badge-red{background:var(--czerwony-jasny); color:#a8151b}

/* ---------- Flash / alerty ---------- */
.alert{padding:.85rem 1.05rem; border-radius:10px; margin-bottom: var(--gap); font-size:.92rem}
.alert-success{background:var(--zielony-jasny); color:#0e6b39}
.alert-error{background:var(--czerwony-jasny); color:#a8151b}
.alert-info{background:var(--niebieski-jasny); color:#1d4ed8}

/* ---------- Autouzupełnianie kursanta (wyszukiwarka) ---------- */
.autocomplete{position:relative}
.autocomplete-list{
  position:absolute; z-index:20; top:100%; left:0; right:0;
  background:#fff; border:1px solid var(--border); border-top:none;
  border-radius:0 0 10px 10px; max-height:280px; overflow-y:auto;
  box-shadow: var(--shadow); display:none;
}
.autocomplete-list.open{display:block}
.autocomplete-item{padding:.65rem .85rem; cursor:pointer; font-size:.92rem; border-bottom:1px solid #f2f0ee}
.autocomplete-item:hover, .autocomplete-item.active{background:var(--czerwony-jasny)}
.autocomplete-item small{display:block; color:var(--tekst-jasny)}

/* ---------- Kopiowanie do schowka ---------- */
.copy-row{display:flex; gap:.5rem; align-items:stretch; flex-wrap:wrap}
.copy-row input{flex:1}
.copy-feedback{font-size:.78rem; color:var(--zielony); font-weight:600; margin-top:.35rem; min-height:1.1em; display:block}

/* ---------- Panel publiczny kursanta ---------- */
.public-wrap{
  min-height:100vh; background: linear-gradient(180deg, var(--czern) 0%, var(--czern) 170px, var(--tlo) 170px);
}
.public-header{max-width:640px; margin:0 auto; padding:1.7rem 1.2rem 0; color:#fff; display:flex; align-items:center; gap:.7rem}
.public-header img{height:38px; width:auto}
.public-header .dot{color:var(--czerwony)}
.public-container{max-width:640px; margin:0 auto; padding:1.1rem 1.1rem 3.5rem}
.pin-card{max-width:380px; margin:4rem auto 0; text-align:center}
.pin-input{
  font-size:1.8rem; letter-spacing:.6rem; text-align:center; font-weight:700;
}
.saldo-box{
  background: linear-gradient(155deg, var(--czern) 0%, #24272d 100%); color:#fff; border-radius: var(--radius); padding:1.4rem 1.3rem;
  text-align:center; margin-bottom: var(--gap); border-top:3px solid var(--czerwony);
}
.saldo-box .kwota{font-size:2.1rem; font-weight:700; color: var(--zloty)}
.saldo-box .sub{font-size:.85rem; color:#c7c9cd; margin-top:.25rem}
.speak-btn{
  margin-top:1rem; background:transparent; border:1px solid var(--zloty); color:var(--zloty);
  padding:.6rem 1.15rem; border-radius:999px; cursor:pointer; font-weight:600; font-size:.85rem;
  min-height:44px;
}
.speak-btn:hover{background:var(--zloty); color:#1c1e22}
.progress{height:10px; border-radius:999px; background:rgba(255,255,255,.15); overflow:hidden; margin-top:.7rem}
.progress-bar{height:100%; background: linear-gradient(90deg, var(--czerwony), var(--zloty))}

.footer-note{text-align:center; color:var(--tekst-jasny); font-size:.8rem; margin-top:2rem; line-height:1.7}

.text-muted{color:var(--tekst-jasny)}
.text-right{text-align:right}
.mt-0{margin-top:0}
.mb-0{margin-bottom:0}

@media (max-width:560px){
  .saldo-box .kwota{font-size:1.8rem}
  .pin-card{margin-top:2.2rem}
  .pin-input{letter-spacing:.4rem; font-size:1.5rem}
  .public-header{padding:1.3rem 1rem 0}
}

/* ---------- Panel filtrów (zwijany) ---------- */
.filter-toggle{
  display:none; width:100%; background:none; border:none; cursor:pointer;
  align-items:center; justify-content:space-between; padding:0; margin-bottom:0;
  font-size:1rem; font-weight:600; color:var(--tekst); font-family:inherit;
}
.filter-toggle .chevron{transition: transform .15s ease; font-size:.85rem; color:var(--tekst-jasny)}
.filter-body{display:block}
.filters-card.collapsed .filter-body{display:none}
.filters-card.collapsed .filter-toggle .chevron{transform: rotate(-90deg)}
@media (max-width: 720px){
  .filter-toggle{display:flex}
  .filters-card .filter-body{margin-top:1rem}
}

/* ---------- Dolne menu (mobile) ---------- */
.bottomnav{
  display:none;
}
@media (max-width: 860px){
  .bottomnav{
    display:flex; position:fixed; left:0; right:0; bottom:0; z-index:60;
    background: var(--czern); border-top:3px solid var(--czerwony);
    box-shadow: 0 -2px 10px rgba(0,0,0,.25);
    padding-bottom: env(safe-area-inset-bottom, 0);
  }
  .bottomnav a{
    flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center;
    gap:.15rem; padding:.5rem .2rem .55rem; color:#9ca3af; font-size:.68rem; font-weight:600;
    text-decoration:none; text-align:center;
  }
  .bottomnav a:hover{text-decoration:none}
  .bottomnav a.active{color:#fff}
  .bottomnav-icon{font-size:1.25rem; line-height:1}
  .container{padding-bottom: calc(4.6rem + env(safe-area-inset-bottom, 0))}
}