/* ============================================================
   Strefa Handlowca ROCKWOOL — arkusz stylów zbudowany od zera na
   bazie referencyjnego szablonu UI (szablon/index.html — ten sam
   plik, który szablon/podglad.html tylko osadza w dwóch ramkach
   podglądu, desktop i mobile). Kolory to prawdziwa marka ROCKWOOL
   (szablon używał nieoficjalnego placeholderowego czerwonego),
   typografia to Archivo/IBM Plex zamiast czystego Arialu z
   szablonu — reszta (promienie, odstępy, skala typografii, cienie,
   układ sidebar/topbar/content) jest wzorowana 1:1.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Archivo:wght@600;700;800&family=IBM+Plex+Sans:wght@400;500;600&family=IBM+Plex+Mono:wght@500&display=swap');

:root{
  --paper:#FAF6F2; --paper-raised:#FFFFFF; --stone:#EDE5DD; --stone-line:#DCD1C6;
  --ink:#211C19; --ink-soft:#6B5F56;
  --accent:#D20014; --accent-ink:#8F000E; --accent-tint:#F7DEE0;
  --success:#2E7D4F; --success-tint:#DCEEE2;
  --warning:#A66A16; --warning-tint:#F4E4C8;
  --focus:#1F6FEB;
  --shadow:0 6px 24px rgba(33,28,25,.05);
  --nav-size:64px;
  --sidebar-size:0px;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --paper:#171310; --paper-raised:#221C18; --stone:#2A231E; --stone-line:#3C332B;
    --ink:#F3EAE3; --ink-soft:#B7A99C;
    --accent:#E8536A; --accent-ink:#FF95A4; --accent-tint:#3A1B21;
    --success:#63C990; --success-tint:#173225;
    --warning:#E0A94B; --warning-tint:#3A2C11;
    --shadow:0 6px 24px rgba(0,0,0,.35);
  }
}
:root[data-theme="dark"]{
  --paper:#171310; --paper-raised:#221C18; --stone:#2A231E; --stone-line:#3C332B;
  --ink:#F3EAE3; --ink-soft:#B7A99C;
  --accent:#E8536A; --accent-ink:#FF95A4; --accent-tint:#3A1B21;
  --success:#63C990; --success-tint:#173225;
  --warning:#E0A94B; --warning-tint:#3A2C11;
  --shadow:0 6px 24px rgba(0,0,0,.35);
}

/* ---------- Reset / bazowe elementy ---------- */
*{box-sizing:border-box;}
html,body{height:100%;}
body{margin:0; background:var(--paper); color:var(--ink); font-family:'IBM Plex Sans',system-ui,sans-serif;}
h1,h2,h3{font-family:'Archivo',system-ui,sans-serif; text-wrap:balance; margin:0;}
.mono{font-family:'IBM Plex Mono',ui-monospace,monospace; font-variant-numeric:tabular-nums;}
button,input,select,textarea{font:inherit; color:inherit;}
button{cursor:pointer;}
a{color:var(--accent);}
:focus-visible{outline:3px solid var(--accent); outline-offset:2px; border-radius:4px;}
[hidden]{display:none !important;}

/* ---------- Przyciski (szablon: .btn / .btn.primary) ---------- */
.btn-primary{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  background:var(--accent); color:#fff; border:1px solid var(--accent); border-radius:5px;
  padding:12px 18px; font-size:14px; font-weight:800; cursor:pointer; margin-top:18px;
}
.btn-primary:hover{background:var(--accent-ink); border-color:var(--accent-ink);}
.btn-primary:disabled{opacity:.45; cursor:not-allowed;}
.btn-ghost{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  background:var(--paper-raised); color:var(--ink); border:1px solid var(--stone-line); border-radius:5px;
  padding:12px 18px; font-size:14px; font-weight:800; cursor:pointer;
}
.btn-ghost:hover{background:var(--stone);}
.btn-danger{
  background:var(--accent-tint); color:var(--accent-ink); border:1px solid var(--accent);
  border-radius:5px; padding:8px 14px; font-size:13px; font-weight:700; cursor:pointer;
}
.btn-back{background:none; border:none; color:var(--ink-soft); font-size:13.5px; font-weight:700; padding:8px 4px; cursor:pointer;}

/* ---------- Ekran logowania (szablon: karta wyśrodkowana) ---------- */
.auth-body{display:flex; align-items:center; justify-content:center; min-height:100%; padding:24px 16px;}
.auth-card{width:100%; max-width:380px; background:var(--paper-raised); border:1px solid var(--stone-line); border-radius:9px; box-shadow:var(--shadow); padding:28px 24px;}
.auth-wordmark{display:flex; flex-direction:column; align-items:flex-start; margin-bottom:22px;}
.auth-wordmark img{height:42px; width:auto; display:block;}
.auth-wordmark span{font-size:12px; color:var(--ink-soft); margin-top:8px; text-transform:uppercase; letter-spacing:.08em; font-weight:700;}
.auth-form{display:flex; flex-direction:column; gap:4px;}
.auth-form label{font-size:12.5px; font-weight:700; margin-top:12px;}
.auth-form input{padding:12px 13px; border:1px solid var(--stone-line); background:var(--paper-raised); border-radius:5px; font-size:15px; color:var(--ink); font-family:inherit;}
.auth-error{background:var(--accent-tint); color:var(--accent-ink); padding:10px 12px; border-radius:5px; font-size:13.5px; margin:0 0 14px;}
.auth-hint{font-size:12px; color:var(--ink-soft); margin-top:16px; text-align:center;}

/* ---------- Powłoka aplikacji: topbar + sidebar (szablon: .top / .side) ---------- */
.shell{min-height:100%; display:flex; flex-direction:column; padding-bottom: calc(var(--nav-size) + env(safe-area-inset-bottom, 0px));}
.topbar{
  position:sticky; top:0; z-index:20; display:flex; align-items:center; justify-content:space-between;
  padding: calc(10px + env(safe-area-inset-top,0px)) 16px 10px; background:var(--paper-raised);
  border-bottom:1px solid var(--stone-line); gap:10px;
}
.wordmark{display:flex; flex-direction:column; line-height:1;}
.wordmark img{height:24px; width:auto; display:block;}
.wordmark span{font-size:10.5px; color:var(--ink-soft); margin-top:5px; text-transform:uppercase; letter-spacing:.08em; font-weight:700;}
.topbar-actions{display:flex; align-items:center; gap:10px; position:relative;}
.icon-btn{position:relative; background:none; border:none; padding:8px; border-radius:7px; cursor:pointer; color:var(--ink);}
.icon-btn:hover{background:var(--stone);}
.badge-dot{position:absolute; top:2px; right:2px; min-width:16px; height:16px; padding:0 3px; background:var(--accent); color:#fff; border-radius:99px; font-size:10px; font-family:'IBM Plex Mono',monospace; display:flex; align-items:center; justify-content:center;}
.user-chip{display:flex; align-items:center; gap:8px;}
.user-avatar{width:36px; height:36px; border-radius:50%; background:var(--accent-tint); color:var(--accent); display:flex; align-items:center; justify-content:center; font-size:13px; font-weight:800; font-family:'Archivo',sans-serif; flex-shrink:0;}
.user-meta{display:none; flex-direction:column; font-size:12px; line-height:1.3;}
.user-meta a{font-size:11px; color:var(--ink-soft); text-decoration:none;}
.user-meta a:hover{text-decoration:underline;}

.notif-panel{
  position:absolute; top:calc(100% + 8px); right:0; width:320px; max-width:calc(100vw - 32px); max-height:70vh; overflow-y:auto;
  background:var(--paper-raised); border:1px solid var(--stone-line); border-radius:9px; box-shadow:var(--shadow); padding:10px; z-index:30;
}
.notif-panel h3{font-size:13px; padding:6px 8px 10px;}
.notif-item{padding:10px 10px; border-radius:7px; border-bottom:1px solid var(--stone-line);}
.notif-item:last-child{border-bottom:none;}
.notif-item.unread{background:var(--accent-tint);}
.notif-item b{display:block; font-size:13px; margin-bottom:3px;}
.notif-item p{margin:0; font-size:12.5px; color:var(--ink-soft);}
.notif-item time{font-size:10.5px; color:var(--ink-soft);}
.notif-empty{padding:20px 10px; text-align:center; font-size:13px; color:var(--ink-soft);}
.notif-permission{padding:10px; font-size:12.5px; color:var(--ink-soft); border-top:1px solid var(--stone-line); margin-top:6px;}
.notif-permission button{margin-top:8px; width:100%;}

/* Nawigacja — dolny pasek na mobile (szablon ukrywa .side i pokazuje .mobilebar) */
.mainnav{
  position:fixed; left:0; right:0; bottom:0; z-index:20; display:flex; flex-direction:row;
  background:var(--paper-raised); border-top:1px solid var(--stone-line);
  padding: 4px 4px calc(4px + env(safe-area-inset-bottom,0px));
}
.nav-item{
  flex:1; display:flex; flex-direction:column; align-items:center; gap:2px; background:none; border:none;
  padding:8px 4px; border-radius:7px; cursor:pointer; color:var(--ink-soft); font-size:10.5px; font-weight:700;
  transition:background .12s ease, color .12s ease;
}
.nav-item.active{color:var(--accent); background:var(--accent-tint);}
.nav-item:hover{background:var(--stone);}
.nav-item.active:hover{background:var(--accent-tint);}

/* ---------- Treść (szablon: .content, max-width 1320px) ---------- */
.view-container{flex:1; padding:16px; padding-bottom:24px; max-width:820px; width:100%; margin:0 auto;}
.view-header{display:flex; justify-content:space-between; align-items:flex-end; gap:16px; margin-bottom:18px; flex-wrap:wrap;}
.view-header h1{font-size:22px; letter-spacing:-.02em; margin:4px 0 0;}
.view-header p{font-size:13px; color:var(--ink-soft); margin-top:6px;}
.eyebrow{text-transform:uppercase; letter-spacing:.07em; font-weight:800; color:var(--accent); font-size:11px;}

/* ---------- Karta (szablon: .card) ---------- */
.card{background:var(--paper-raised); border:1px solid var(--stone-line); border-radius:9px; box-shadow:var(--shadow); padding:20px;}

/* ---------- Kafelki KPI (szablon: .kpis / .kpi) ---------- */
.stat-tiles{display:flex; gap:12px; flex-wrap:wrap; margin-bottom:16px;}
.stat-tile{position:relative; flex:1; min-width:140px; background:var(--paper-raised); border:1px solid var(--stone-line); border-radius:9px; padding:22px;}
.stat-tile .num{font-family:'IBM Plex Mono',monospace; font-size:28px; font-weight:700; display:block;}
.stat-tile .lab{font-size:12px; font-weight:700; color:var(--ink-soft); margin-top:4px;}
.stat-tile::after{content:""; display:block; height:3px; width:32px; background:var(--accent); margin-top:16px; border-radius:2px;}

/* ---------- Dwukolumnowy układ paneli (szablon: .twocol / .panel) ---------- */
.twocol{display:flex; flex-direction:column; gap:16px;}
.twocol > .card{margin-bottom:0;}
.paneltitle{display:flex; align-items:center; justify-content:space-between; margin-bottom:16px; gap:10px;}
.paneltitle h2{font-size:16px; letter-spacing:-.01em;}
.mutelink{border:0; background:none; color:var(--accent); font-size:12px; font-weight:800; cursor:pointer; padding:0;}

/* ---------- Baner powitalny (szablon: .hero) ---------- */
.hero{background:var(--ink); border-radius:9px; color:#fff; padding:25px; display:flex; justify-content:space-between; align-items:center; margin-bottom:16px; gap:20px; flex-wrap:wrap;}
.hero .eyebrow{color:#ff9aa3;}
.hero h2{font-size:20px; margin:6px 0; color:#fff;}
.hero p{font-size:13px; color:rgba(255,255,255,.75); margin:0;}

/* ---------- Progres kroków formularza ---------- */
.progress{display:flex; gap:5px; margin-bottom:16px;}
.progress i{flex:1; height:4px; border-radius:99px; background:var(--stone-line); display:block;}
.progress i.done{background:var(--accent);}
.progress i.now{background:var(--accent); opacity:.5;}

.step-eyebrow{font-size:11px; font-weight:800; letter-spacing:.07em; text-transform:uppercase; color:var(--accent);}
.step-title{font-size:21px; font-weight:700; margin-top:4px; font-family:'Archivo',sans-serif;}
.step-hint{font-size:12.5px; color:var(--ink-soft); margin-top:6px;}

/* ---------- Kafelki opcji formularza (szablon: .choice, wybór jednej odpowiedzi) ---------- */
.options{display:flex; flex-direction:column; gap:8px;}
.opt{
  text-align:left; border:1px solid var(--stone-line); background:var(--paper-raised); border-radius:6px; padding:13px 14px;
  font-size:14px; font-weight:500; display:flex; align-items:center; justify-content:space-between; gap:10px; cursor:pointer;
  transition:border-color .15s ease, background .15s ease;
}
@media (prefers-reduced-motion: reduce){ .opt, .toast{transition:none !important;} }
.opt:hover{border-color:var(--accent);}
.opt[aria-pressed="true"]{border-color:var(--accent); background:var(--accent-tint); color:var(--accent-ink); font-weight:700;}
.opt .tick{width:18px; height:18px; border-radius:50%; border:1.5px solid var(--stone-line); flex-shrink:0; display:flex; align-items:center; justify-content:center;}
.opt[aria-pressed="true"] .tick{background:var(--accent); border-color:var(--accent);}
.opt[aria-pressed="true"] .tick::after{content:"✓"; color:#fff; font-size:11px; font-weight:700;}
.topics-grid{display:flex; flex-direction:column; gap:8px; max-height:400px; overflow-y:auto; padding-right:2px;}

/* ---------- Pola formularza (szablon: .control) ---------- */
input[type="text"], input[type="email"], input[type="password"], input[type="date"], input[type="search"],
input[type="number"], input[type="tel"], input[type="datetime-local"], textarea, select{
  width:100%; border:1px solid var(--stone-line); background:var(--paper-raised); border-radius:5px; padding:12px 13px;
  font-size:14.5px; font-family:inherit; color:var(--ink); min-height:47px;
}
textarea{min-height:100px; resize:vertical;}
input[type="date"], input[type="datetime-local"]{font-family:'IBM Plex Mono',monospace;}
label{font-size:13px; font-weight:800; display:block; margin-bottom:6px;}
.field{margin-bottom:14px;}

/* ---------- Karty formularza z numerowanymi sekcjami (szablon: .formcard) ---------- */
.formcard h2{font-size:16px; margin:0 0 4px;}
.formcard .sub{font-size:13px; color:var(--ink-soft); margin:0 0 16px;}
.chips{display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:10px;}
.choice{display:flex; gap:10px; align-items:center; border:1px solid var(--stone-line); border-radius:6px; padding:13px; font-size:13px; cursor:pointer;}
.choice:has(input:checked){border-color:var(--accent); background:var(--accent-tint); color:var(--accent-ink); font-weight:700;}
.choice input{accent-color:var(--accent); width:17px; height:17px; flex:0 0 auto;}
.actions{display:flex; justify-content:flex-end; gap:10px; margin:20px 0;}

.nav-row{display:flex; align-items:center; justify-content:space-between; margin-top:20px; gap:10px;}

/* ---------- Etykiety / plakietki statusu (szablon: .pill) ---------- */
.tag-row{display:flex; flex-wrap:wrap; gap:6px;}
.tag{background:var(--stone); border:1px solid var(--stone-line); border-radius:20px; padding:4px 10px; font-size:11.5px; font-weight:600;}
.badge{border-radius:20px; padding:4px 10px; font-size:11px; font-weight:800; letter-spacing:.02em; display:inline-block; white-space:nowrap;}
.badge.success{background:var(--success-tint); color:var(--success);}
.badge.warning{background:var(--warning-tint); color:var(--warning);}
.badge.neutral{background:var(--stone); color:var(--ink-soft);}

/* ---------- Listy kart (szablon: .visit — tu jako samodzielne karty, nie płaska lista) ---------- */
.list-cards{display:flex; flex-direction:column; gap:10px;}
.visit-card{border:1px solid var(--stone-line); border-radius:9px; padding:14px; background:var(--paper-raised); display:flex; flex-direction:column; gap:8px;}
.visit-top{display:flex; justify-content:space-between; align-items:flex-start; gap:8px; flex-wrap:wrap;}
.visit-dist{font-weight:700; font-size:14.5px;}
.visit-date{font-size:11px; color:var(--ink-soft);}
.empty-state{text-align:center; color:var(--ink-soft); font-size:13px; padding:40px 10px;}

.filters-row{display:flex; gap:10px; flex-wrap:wrap; margin-bottom:16px; align-items:flex-end;}
.filters-row .field{margin-bottom:0; min-width:150px; flex:1;}

.tabs{display:flex; gap:4px; border-bottom:1px solid var(--stone-line); margin-bottom:16px; overflow-x:auto;}
.tab-btn{background:none; border:none; padding:10px 14px; font-size:13.5px; font-weight:700; color:var(--ink-soft); cursor:pointer; border-bottom:2px solid transparent; white-space:nowrap;}
.tab-btn.active{color:var(--accent); border-bottom-color:var(--accent);}

.accordion-item{border:1px solid var(--stone-line); border-radius:9px; margin-bottom:8px; overflow:hidden;}
.accordion-q{width:100%; text-align:left; background:var(--paper-raised); border:none; padding:13px 14px; font-size:14px; font-weight:700; cursor:pointer; display:flex; justify-content:space-between; align-items:center; gap:10px;}
.accordion-a{padding:0 14px 14px; font-size:13.5px; color:var(--ink-soft); line-height:1.5;}

.material-row, .link-row, .topic-card{display:flex; align-items:center; justify-content:space-between; gap:12px; border:1px solid var(--stone-line); border-radius:9px; padding:13px 14px; background:var(--paper-raised);}
.material-row .meta, .link-row .meta{display:flex; flex-direction:column; gap:2px;}
.material-row .meta b, .link-row .meta b{font-size:14px;}
.material-row .meta span, .link-row .meta span{font-size:12px; color:var(--ink-soft);}
.topic-card{flex-direction:column; align-items:stretch; gap:6px;}

.topic-checklist{list-style:none; padding:0; margin:0 0 4px; display:flex; flex-direction:column; gap:6px;}
.topic-checklist li{font-size:13px; padding-left:22px; position:relative; color:var(--ink-soft);}
.topic-checklist li::before{content:"☐"; position:absolute; left:0; top:0; color:var(--accent);}

/* ---------- Tabele (szablon: table/th/td) ---------- */
table.data-table{width:100%; border-collapse:collapse; font-size:13px;}
table.data-table th, table.data-table td{text-align:left; padding:15px 12px; border-bottom:1px solid var(--stone-line); white-space:nowrap;}
table.data-table th{font-size:11px; text-transform:uppercase; letter-spacing:.05em; color:var(--ink-soft); font-weight:700;}
.table-scroll{overflow-x:auto;}

/* ---------- Pasek postępu / wykres słupkowy (szablon: .bar) ---------- */
.bar-row{display:flex; align-items:center; gap:8px; font-size:12.5px; margin-bottom:6px;}
.bar-label{flex:0 0 140px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.bar-track{flex:1; height:8px; background:var(--stone); border-radius:5px; overflow:hidden;}
.bar-fill{height:100%; background:var(--accent); border-radius:5px;}
.bar-count{flex:0 0 22px; text-align:right; font-family:'IBM Plex Mono',monospace; color:var(--ink-soft);}

/* ---------- Powiadomienie chwilowe (szablon: .toast) ---------- */
.toast{position:fixed; bottom:calc(var(--nav-size) + 16px + env(safe-area-inset-bottom,0px)); left:50%; transform:translateX(-50%); background:var(--ink); color:var(--paper); padding:14px 20px; border-radius:7px; font-size:13px; z-index:50; box-shadow:var(--shadow); max-width:min(90vw, 350px);}
@media (min-width:900px){ .toast{bottom:20px;} }

/* ---------- Edycja list w panelu admina (CRUD) ---------- */
.crud-row{display:flex; align-items:center; gap:8px; padding:8px 0; border-bottom:1px solid var(--stone-line);}
.crud-row input[type="text"]{flex:1;}
.crud-row.inactive{opacity:.5;}
.crud-add-row{display:flex; gap:8px; margin-top:12px;}
.crud-add-row input{flex:1;}

/* ---------- Edytor formularzy (wzorzec "Elementora"): paleta + lista pól +
   panel ustawień + podgląd na żywo. Mobile: zakładki (jedna kolumna widoczna
   naraz, patrz .builder-tabs); desktop ≥1100px: trzy kolumny naraz (patrz
   media query niżej). ---------- */
.builder-layout{display:block;}
.builder-col{display:none;}
.builder-col.active{display:block;}
.palette-btn{
  display:flex; align-items:center; gap:10px; width:100%; text-align:left;
  border:1px solid var(--stone-line); background:var(--paper-raised); border-radius:7px;
  padding:11px 12px; font-size:13.5px; font-weight:600; cursor:pointer; min-height:44px;
}
.palette-btn:hover{border-color:var(--accent); background:var(--accent-tint);}
.palette-icon{flex:0 0 auto; width:24px; text-align:center; font-size:15px;}
.field-list{display:flex; flex-direction:column; gap:6px;}
.field-list-item{
  display:flex; align-items:center; gap:8px; border:1px solid var(--stone-line); background:var(--paper-raised);
  border-radius:7px; padding:10px 10px; cursor:pointer;
}
.field-list-item.selected{border-color:var(--accent); background:var(--accent-tint);}
.field-list-item.inactive{opacity:.5;}
.field-list-item.dragging{opacity:.3;}
.drag-handle{cursor:grab; color:var(--ink-soft); flex:0 0 auto; padding:0 2px;}
.field-type-tag{font-size:10.5px; text-transform:uppercase; letter-spacing:.05em; font-weight:800; color:var(--ink-soft);}
.field-label-preview{font-size:13.5px; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.settings-panel{min-height:40px;}
.live-preview-frame{width:100%; min-height:520px; border:1px solid var(--stone-line); border-radius:9px; background:var(--paper);}

/* ============================================================
   Breakpointy — WAŻNE: muszą zostać na końcu pliku (przy równej
   specyficzności w CSS wygrywa reguła zapisana niżej źródłowo).
   Mobile (bazowo, poniżej): dolny pasek nawigacji, jedna kolumna.
   Tablet 768–1099px: wąski sidebar z ikonami.
   Desktop od 1100px: pełny sidebar z etykietami, treść niemal na
   całą szerokość okna (max-width 1320px jak w szablonie).
   ============================================================ */

@media (min-width:768px) and (max-width:1099.98px){
  :root{ --sidebar-size:84px; }
  .shell{padding-bottom:0;}
  .topbar{margin-left:var(--sidebar-size); padding-inline:20px;}
  .mainnav{
    position:fixed; top:0; left:0; bottom:0; right:auto; width:var(--sidebar-size);
    flex-direction:column; align-items:stretch; border-top:none; border-right:1px solid var(--stone-line);
    background:var(--paper-raised); padding:16px 6px; gap:6px;
  }
  .nav-item{flex-direction:column; gap:4px; font-size:9.5px; padding:10px 4px; text-align:center;}
  .view-container{margin-left:var(--sidebar-size); max-width:100%; padding:24px 28px;}
  .user-meta{display:none;}
  .view-header h1{font-size:34px; letter-spacing:-.03em;}

  .list-cards{display:grid; grid-template-columns:repeat(auto-fill, minmax(260px, 1fr)); gap:12px; align-items:start;}
  .wizard-view{max-width:640px; margin:0 auto; width:100%;}
  .wizard-view .card{padding:32px 36px;}
  .wizard-view .step-title{font-size:24px;}
  .wizard-view .opt{padding:14px 16px; font-size:15px;}
  .view-container.view-wizyta{display:flex; align-items:center; justify-content:center; min-height:calc(100vh - 96px);}
  .stats-grid{display:grid; grid-template-columns:repeat(auto-fill, minmax(300px, 1fr)); gap:14px;}
  .stats-grid > .card{margin-bottom:0 !important;}
  .twocol{flex-direction:row;}
  .twocol > *{flex:1; min-width:0;}
}

@media (min-width:1100px){
  :root{ --sidebar-size:248px; }
  .shell{padding-bottom:0;}
  .topbar{margin-left:var(--sidebar-size); padding-inline:42px; height:75px;}
  .mainnav{
    position:fixed; top:0; left:0; bottom:0; right:auto; width:var(--sidebar-size);
    flex-direction:column; align-items:stretch; border-top:none; border-right:1px solid var(--stone-line);
    background:var(--paper-raised); padding:25px 15px; gap:6px;
  }
  .wordmark{padding-left:2px;}
  .wordmark img{height:28px;}
  .nav-item{flex-direction:row; justify-content:flex-start; gap:12px; font-size:14px; padding:13px 15px; border-radius:7px;}
  .view-container{margin-left:var(--sidebar-size); max-width:1320px; width:100%; padding:34px 42px 55px;}
  .user-meta{display:flex;}

  .view-header h1{font-size:34px; letter-spacing:-.03em;}

  .wizard-view{max-width:760px; margin:0 auto; width:100%;}
  .wizard-view .card{padding:44px 52px;}
  .wizard-view .step-eyebrow{font-size:13px;}
  .wizard-view .step-title{font-size:28px;}
  .wizard-view .step-hint{font-size:13.5px;}
  .wizard-view .opt{padding:16px 20px; font-size:16px;}
  .wizard-view .progress{margin-bottom:24px;}
  .view-container.view-wizyta{display:flex; align-items:center; justify-content:center; min-height:calc(100vh - 75px);}

  .twocol{display:grid; grid-template-columns:1.55fr 1fr; gap:20px; align-items:start;}
  .twocol > .card{margin-bottom:0 !important;}

  .list-cards{display:grid; grid-template-columns:repeat(auto-fill, minmax(320px, 1fr)); gap:16px; align-items:start;}

  .stat-tiles{flex-wrap:nowrap;}
  .admin-grid-2{display:grid; grid-template-columns:1.3fr 1fr; gap:16px; align-items:start;}
  .admin-grid-2 > .card{margin-bottom:0 !important;}
  .stats-grid{display:grid; grid-template-columns:repeat(auto-fill, minmax(320px, 1fr)); gap:16px;}
  .stats-grid > .card{margin-bottom:0 !important;}

  .builder-tabs{display:none;}
  .builder-layout{display:grid; grid-template-columns:220px 1fr 1.3fr; gap:16px; align-items:start;}
  .builder-col{display:block !important;}
}

@media (min-width:1500px){
  .stat-tiles{display:grid; grid-template-columns:repeat(4, 1fr); gap:16px;}
  .stat-tiles .stat-tile{min-width:0;}
}

@media (max-width:480px){
  .chips{grid-template-columns:1fr;}
}

@media (max-width:440px){
  .view-header{flex-wrap:wrap;}
}

@media print{
  .topbar, .mainnav, .no-print{display:none !important;}
  .view-container{margin:0; max-width:100%;}
}


/* ===== UX/UI refresh 2026: spójny system layoutu i panelu zarządzania ===== */
:root{--paper:#F5F6F8;--paper-raised:#fff;--stone:#F0F2F5;--stone-line:#E3E7ED;--ink:#202735;--ink-soft:#647184;--accent:#D20014;--accent-ink:#A50010;--accent-tint:#FFF0F1;--shadow:0 6px 22px rgba(27,37,55,.045);}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--paper:#121923;--paper-raised:#1D2633;--stone:#273241;--stone-line:#364353;--ink:#F3F6FA;--ink-soft:#B7C1CD;--accent:#FF6472;--accent-ink:#FF9DA6;--accent-tint:#40252C;}}
:root[data-theme="dark"]{--paper:#121923;--paper-raised:#1D2633;--stone:#273241;--stone-line:#364353;--ink:#F3F6FA;--ink-soft:#B7C1CD;--accent:#FF6472;--accent-ink:#FF9DA6;--accent-tint:#40252C;}
html{scroll-behavior:smooth}body{line-height:1.52;-webkit-font-smoothing:antialiased}
.skip-link{position:fixed;top:-80px;left:16px;z-index:100;background:var(--paper-raised);padding:12px 18px;border-radius:10px}.skip-link:focus{top:12px}
.topbar{box-shadow:0 1px 0 rgba(29,40,56,.025)}.wordmark span{letter-spacing:.035em}
.card,.stat-tile,.topic-card,.material-row,.link-row,.accordion-item{border-radius:14px;box-shadow:var(--shadow)}
.btn-primary,.btn-ghost,.btn-danger{border-radius:9px;min-height:42px;transition:background .16s,border-color .16s,transform .16s}
.btn-primary:active,.btn-ghost:active{transform:translateY(1px)}
.btn-primary{margin-top:0} .auth-form .btn-primary{margin-top:18px}
.nav-item{border-radius:10px}.nav-item.active{position:relative}
.view-header{margin-bottom:24px}.view-header h1{font-size:clamp(24px,3vw,34px)}.view-header p{font-size:14px}
input[type="text"],input[type="email"],input[type="password"],input[type="date"],input[type="search"],input[type="number"],input[type="tel"],input[type="datetime-local"],textarea,select{border-radius:9px;transition:border-color .15s,box-shadow .15s;min-width:0}
input:focus,textarea:focus,select:focus{border-color:var(--focus);box-shadow:0 0 0 3px rgba(31,111,235,.11);outline:0}
input:disabled,textarea:disabled,select:disabled{opacity:.55;cursor:not-allowed}
.tab-btn{min-height:44px}.table-scroll{border:1px solid var(--stone-line);border-radius:12px;overflow:auto}
table.data-table th{background:var(--stone);position:sticky;top:0;z-index:1}
table.data-table tbody tr:hover{background:var(--stone)}table.data-table td{vertical-align:middle}
.crud-row{background:var(--paper-raised);border:1px solid var(--stone-line);border-radius:12px;padding:14px;margin-bottom:10px;flex-wrap:wrap;gap:10px}
.crud-row input[type="text"]{min-width:170px}.crud-row.inactive{opacity:.68}
.crud-add-row{flex-wrap:wrap}.crud-add-row input{min-width:180px}
.field-list-item,.palette-btn,.choice,.opt{border-radius:10px}
.field-list-item:hover,.choice:hover,.palette-btn:hover{border-color:var(--accent)}
.admin-view{max-width:unset !important}
.admin-heading{display:flex;align-items:center;justify-content:space-between;gap:18px;margin-bottom:24px}
.admin-heading h1{font-size:clamp(25px,3vw,36px);letter-spacing:-.035em;margin:6px 0}
.admin-heading p{font-size:14px;color:var(--ink-soft);margin:0}
.admin-heading-tag{color:var(--ink-soft);background:var(--paper-raised);border:1px solid var(--stone-line);border-radius:99px;padding:8px 13px;font-size:11px;font-weight:800;white-space:nowrap}
.admin-workspace{display:grid;grid-template-columns:minmax(225px,255px) minmax(0,1fr);gap:22px;align-items:start}
.admin-sidebar{background:var(--paper-raised);border:1px solid var(--stone-line);border-radius:16px;padding:16px;position:sticky;top:96px;max-height:calc(100vh - 115px);overflow-y:auto}
.admin-search-label{font-size:12px;margin:0 0 8px}.admin-search-wrap{position:relative}.admin-search-wrap span{position:absolute;left:12px;top:5px;font-size:26px;color:var(--ink-soft);pointer-events:none}
.admin-search-wrap input{padding-left:34px;font-size:13px;min-height:42px}
.admin-menu-group{margin-top:22px}.admin-menu-group-title{color:var(--ink-soft);font-size:10px;letter-spacing:.11em;text-transform:uppercase;font-weight:800;margin:0 9px 8px}
.admin-menu-item{display:flex;width:100%;align-items:center;gap:10px;background:transparent;border:0;border-radius:9px;padding:11px 9px;text-align:left;color:var(--ink-soft);font-size:13px;font-weight:600;min-height:43px}
.admin-menu-item:hover{background:var(--stone);color:var(--ink)}.admin-menu-item.active{background:var(--accent-tint);color:var(--accent-ink);font-weight:800}
.admin-menu-icon{display:grid;place-items:center;width:24px;height:24px;flex:0 0 24px;font-size:17px}
.admin-menu-chevron{margin-left:auto;font-size:20px;opacity:.35}.admin-menu-item.active .admin-menu-chevron{opacity:1}
.admin-keyboard-hint{font-size:11px;color:var(--ink-soft);margin:22px 8px 3px}.admin-no-results{font-size:13px;color:var(--ink-soft);padding:12px}
.admin-main{min-width:0;background:var(--paper-raised);border:1px solid var(--stone-line);border-radius:16px;padding:24px;min-height:590px}
.admin-section-heading{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-bottom:22px;padding-bottom:20px;border-bottom:1px solid var(--stone-line)}
.admin-section-heading h2{font-size:clamp(21px,2.2vw,27px);margin:5px 0;letter-spacing:-.025em}.admin-section-heading p{font-size:13px;color:var(--ink-soft);margin:0}
.admin-body{min-width:0}.admin-body .card{box-shadow:none}.admin-loading{padding:30px;color:var(--ink-soft)}.admin-mobile-menu{display:none}
@media(min-width:1100px){.view-container.admin-view{max-width:1600px;padding-left:30px;padding-right:30px}.admin-view .admin-heading{margin-top:3px}}
@media(min-width:768px) and (max-width:1200px){.admin-workspace{grid-template-columns:205px minmax(0,1fr);gap:14px}.admin-main{padding:18px}.admin-sidebar{padding:12px}}
@media(max-width:767.98px){
  :root{--nav-size:74px}
  .mainnav{overflow-x:auto;scroll-snap-type:x proximity;justify-content:flex-start;gap:3px;scrollbar-width:thin;padding-left:8px;padding-right:8px}
  .nav-item{flex:0 0 78px;min-width:78px;scroll-snap-align:start;font-size:10px;line-height:1.2;min-height:58px;justify-content:center}
  .view-container{padding:18px 14px 35px}
  .card{padding:17px}.admin-heading-tag{display:none}.admin-heading{margin-bottom:15px}
  .admin-workspace{display:flex;flex-direction:column;gap:12px}
  .admin-sidebar{position:static;max-height:none;width:100%;padding:12px}
  .admin-sidebar:not(.mobile-open) .admin-menu,.admin-sidebar:not(.mobile-open) .admin-keyboard-hint{display:none}
  .admin-sidebar:not(.mobile-open) .admin-search-label,.admin-sidebar:not(.mobile-open) .admin-search-wrap{display:none}
  .admin-main{width:100%;min-height:450px;padding:17px}
  .admin-section-heading{margin-bottom:16px;padding-bottom:16px}.admin-mobile-menu{display:inline-flex;flex:0 0 auto;font-size:12px;padding:9px}
  .admin-sidebar{order:0}.admin-main{order:1}
  .admin-view .table-scroll{max-width:calc(100vw - 64px)}
  .crud-row{flex-direction:column;align-items:stretch}.crud-row input,.crud-row button{width:100%}
  .admin-heading h1{font-size:25px}
}
@media(max-width:380px){.admin-section-heading{align-items:flex-start;flex-direction:column}.admin-mobile-menu{width:100%}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}}
@media(min-width:768px){.view-container{width:calc(100% - var(--sidebar-size));}.view-container.admin-view{width:calc(100% - var(--sidebar-size));}}

/* UX/UI v3: user administration */
.users-directory { margin-top: 18px; }
.user-directory-head,.user-edit-head { display:flex; justify-content:space-between; align-items:center; gap:12px; margin-bottom:14px; flex-wrap:wrap; }
.users-filters { display:grid; grid-template-columns:minmax(200px,2fr) repeat(2,minmax(135px,1fr)); gap:12px; align-items:end; margin-bottom:16px; }
.users-filters .field { margin-bottom:0; }
.user-edit-row[hidden] { display:none; }
.user-edit-row>td { padding:0 10px 16px !important; background:var(--surface,#fff); }
.user-edit-card { padding:20px; border:1px solid var(--border,#ddd); border-radius:14px; background:var(--bg,#f8f9fb); }
.user-form-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
.user-edit-actions { display:flex; flex-wrap:wrap; gap:9px; margin:14px 0 10px; align-items:center; }
.users-table td { vertical-align:middle; }
@media(max-width:760px) { .users-filters,.user-form-grid { grid-template-columns:1fr; } .user-edit-card { padding:14px; } .users-table { min-width:720px; } }

/* UX/UI v3: reports */
.reports-toolbar { margin-bottom:16px; }
.report-presets { display:flex; flex-wrap:wrap; gap:8px; margin:12px 0; }
.report-presets [aria-pressed="true"] { border-color:var(--accent,#d20a11); color:var(--accent,#d20a11); background:var(--accent-tint,#fff2f2); }
.reports-toolbar .filters-row { margin-bottom:0; }
#reportDateError:not([hidden]) { color:#b42318; margin-top:8px; }

/* v5: robust admin layout, no controls clipped by grid or tables */
*,*::before,*::after{box-sizing:border-box}
.admin-view,.admin-workspace,.admin-main,.admin-body,.admin-body .card,.admin-body .field,.view-container{min-width:0;max-width:100%}
.admin-workspace{grid-template-columns:minmax(210px,245px) minmax(0,1fr)}
.admin-main{overflow:visible;padding:clamp(14px,2vw,24px)}
.admin-body input:not([type=checkbox]):not([type=radio]),.admin-body select,.admin-body textarea{max-width:100%;min-width:0}
.admin-body .crud-row{min-width:0;flex-wrap:wrap;align-items:stretch}
.admin-body .crud-row>input[type=text]{flex:1 1 210px}
.admin-body .crud-row>button,.admin-body .material-row button{white-space:normal;overflow-wrap:anywhere}
.admin-body .table-scroll{width:100%;max-width:100%;overflow-x:auto;overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch}
.admin-body .data-table{width:max-content;min-width:100%;table-layout:auto}
.admin-body .data-table td,.admin-body .data-table th{vertical-align:middle;max-width:310px;overflow-wrap:anywhere}
.admin-body .data-table td:last-child{min-width:180px}
.admin-body .data-table .btn-ghost,.admin-body .data-table .btn-primary{max-width:100%;white-space:normal}
.agreement-actions{display:flex;flex-wrap:wrap;gap:6px;min-width:170px}
.agreement-actions>*{margin:0!important;display:inline-flex;align-items:center;justify-content:center;min-height:34px}
.admin-body .material-row{min-width:0;flex-wrap:wrap;gap:8px}
.admin-body .material-row .meta{flex:1 1 220px;min-width:0;overflow-wrap:anywhere}
.admin-body .filters-row,.admin-body .nav-row,.admin-body .crud-add-row{flex-wrap:wrap;min-width:0}
.admin-body button{height:auto;min-height:34px;line-height:1.3}
@media(max-width:850px){.admin-workspace{display:flex;flex-direction:column}.admin-main,.admin-sidebar{width:100%;max-width:100%}.admin-main{padding:14px}.admin-body .crud-row{flex-direction:column}.admin-body .crud-row>input[type=text]{flex-basis:auto;width:100%}}

.material-edit-fields{flex:1 1 280px;display:grid;gap:6px;min-width:160px}.material-edit-fields textarea{min-height:60px}.admin-body .stat-tile .num{overflow-wrap:anywhere;font-size:clamp(16px,2vw,26px)}

/* v5.4: stable form builder and submission tables in nested admin workspace */
.admin-body .builder-layout,.admin-main .builder-layout{min-width:0;max-width:100%;}
.admin-body .builder-col,.admin-main .builder-col{min-width:0;max-width:100%;overflow-wrap:anywhere;}
.admin-body .builder-col .field,.admin-body .builder-col input,.admin-body .builder-col select,.admin-body .builder-col textarea{min-width:0;max-width:100%;}
.admin-body .builder-layout .crud-row{flex-wrap:wrap;}
.admin-body .builder-layout .crud-row input{flex:1 1 170px;min-width:0;}
.admin-body .live-preview-frame{display:block;box-sizing:border-box;max-width:100%;height:680px;min-height:520px;}
.admin-body .table-scroll{min-width:0;max-width:100%;overflow-x:auto;}
.admin-body .data-table{width:max-content;min-width:100%;}
.admin-body .data-table td{white-space:normal;min-width:110px;max-width:290px;overflow-wrap:anywhere;vertical-align:top;}
.admin-body .data-table th{white-space:normal;min-width:110px;}
@media(min-width:768px) and (max-width:1599px){
  .admin-body .builder-tabs{display:flex;flex-wrap:wrap;}
  .admin-body .builder-layout{display:block;}
  .admin-body .builder-col{display:none!important;}
  .admin-body .builder-col.active{display:block!important;}
}
@media(min-width:1600px){
  .admin-body .builder-tabs{display:none;}
  .admin-body .builder-layout{display:grid;grid-template-columns:minmax(170px,.75fr) minmax(280px,1.25fr) minmax(310px,1.4fr);gap:12px;}
  .admin-body .builder-col{display:block!important;}
}