/* VVS Magazyn — telefon najpierw, te same barwy co aplikacja godzin VVS. */
:root{color-scheme:light;--bg:#f3f6f9;--surface:#fff;--ink:#22303d;--muted:#5f7484;--line:#dbe4eb;--brand:#176fc0;--brand-ink:#0f4f8c;--soft:#e7f1fb;--ok:#1d7a52;--ok-bg:#e3f4ec;--warn:#8a5a0c;--warn-bg:#fff3d9;--bad:#b42318;--bad-bg:#fdecea;--info-bg:#eef3f7;--radius:12px;--tap:48px;font-family:"Segoe UI",Roboto,Arial,Helvetica,sans-serif;font-size:16px}
*{box-sizing:border-box}
[hidden]{display:none!important}
html,body{margin:0;background:var(--bg);color:var(--ink)}
body{min-height:100vh;-webkit-text-size-adjust:100%}
button,input,select,textarea{font:inherit;color:inherit}
a{color:var(--brand-ink)}
h1,h2,h3{line-height:1.25;margin:0}
h1{font-size:1.35rem}h2{font-size:1.12rem}h3{font-size:1rem}
p{margin:.4rem 0}
.muted{color:var(--muted)}.small{font-size:.86rem}.nowrap{white-space:nowrap}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}

/* Układ */
.app{display:flex;flex-direction:column;min-height:100vh}
.topbar{position:sticky;top:0;z-index:20;background:var(--brand);color:#fff;display:flex;align-items:center;gap:10px;padding:10px 14px;min-height:56px;box-shadow:0 1px 0 rgba(0,0,0,.08)}
.topbar .brand{display:flex;align-items:center;gap:9px;color:#fff;text-decoration:none;font-weight:700;letter-spacing:.01em;margin-right:auto;min-width:0}
.topbar .brand img{width:30px;height:30px;border-radius:7px;background:#fff}
.topbar .brand small{display:block;font-weight:400;font-size:.74rem;opacity:.85}
.icon-button{min-width:var(--tap);min-height:var(--tap);border:0;border-radius:10px;background:transparent;color:inherit;display:inline-flex;align-items:center;justify-content:center;gap:6px;cursor:pointer;position:relative;padding:0 10px}
.icon-button:hover{background:rgba(255,255,255,.14)}
.icon-button svg{width:24px;height:24px}
.badge-count{position:absolute;top:5px;right:4px;min-width:19px;height:19px;border-radius:10px;background:#ffd166;color:#3d2b00;font-size:.72rem;font-weight:700;display:flex;align-items:center;justify-content:center;padding:0 5px}
.test-banner{background:var(--warn-bg);color:var(--warn);border-bottom:1px solid #ecd297;padding:8px 14px;font-size:.86rem;font-weight:600}
.offline-banner{background:#fff7e6;color:#7a4b00;border-bottom:1px solid #edd6a6;padding:8px 14px;font-size:.86rem}
.main{flex:1;width:100%;max-width:980px;margin:0 auto;padding:14px 14px calc(88px + env(safe-area-inset-bottom))}
.page-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin:4px 0 12px}
.page-head p{margin:.2rem 0 0}
.bottom-nav{position:fixed;left:0;right:0;bottom:0;z-index:20;background:var(--surface);border-top:1px solid var(--line);display:grid;grid-template-columns:repeat(5,1fr);padding-bottom:env(safe-area-inset-bottom)}
.bottom-nav a,.bottom-nav button{min-height:62px;min-width:0;line-height:1.15;text-align:center;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;font-size:.74rem;color:var(--muted);text-decoration:none;border:0;background:transparent;cursor:pointer;position:relative;padding:4px 2px}
.bottom-nav svg{width:24px;height:24px}
.bottom-nav [aria-current=page]{color:var(--brand)}
.bottom-nav [aria-current=page]::before{content:"";position:absolute;top:0;left:22%;right:22%;height:3px;border-radius:0 0 3px 3px;background:var(--brand)}
.bottom-nav .badge-count{top:6px;right:calc(50% - 22px)}
.side-nav{display:none}
@media(min-width:900px){
  .shell{display:grid;grid-template-columns:230px 1fr;flex:1}
  .side-nav{display:flex;flex-direction:column;gap:3px;padding:16px 10px;border-right:1px solid var(--line);background:var(--surface);position:sticky;top:56px;height:calc(100vh - 56px);overflow-y:auto}
  .side-nav a{display:flex;align-items:center;gap:11px;padding:11px 12px;border-radius:10px;color:var(--ink);text-decoration:none;font-weight:500;position:relative}
  .side-nav a svg{width:21px;height:21px;color:var(--muted)}
  .side-nav a[aria-current=page]{background:var(--soft);color:var(--brand-ink)}
  .side-nav a[aria-current=page] svg{color:var(--brand)}
  .side-nav .badge-count{position:static;margin-left:auto}
  .side-nav .nav-label{font-size:.72rem;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);padding:14px 12px 4px}
  .bottom-nav{display:none}
  .main{padding:22px 26px 40px}
}

/* Elementy */
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:14px;margin-bottom:12px}
.card.flat{box-shadow:none}
.card-head{display:flex;align-items:flex-start;justify-content:space-between;gap:10px}
.card h3{margin-bottom:2px}
.section-title{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:20px 0 9px}
.section-title h2{font-size:1.02rem}
.list{display:grid;gap:10px}
.row{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.row.between{justify-content:space-between}
.grow{flex:1;min-width:0}
.meta{display:flex;flex-wrap:wrap;gap:4px 12px;color:var(--muted);font-size:.86rem;margin-top:3px}
.chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:6px}
.chip{display:inline-flex;align-items:center;gap:4px;border-radius:999px;padding:3px 10px;font-size:.8rem;font-weight:600;background:var(--info-bg);color:var(--ink);border:1px solid transparent;max-width:100%;overflow-wrap:break-word}
.card-head>.chip{flex:none;white-space:nowrap}
.chips + .card{margin-top:10px}
.avail{margin:10px 0 0;font-size:.95rem}
.avail.ok b{color:var(--ok)}
.avail:not(.ok){color:var(--warn)}
.avail .site{display:block;color:var(--ink);margin-top:2px}
.line.pick{display:flex;gap:12px;align-items:flex-start}
.line.pick input{width:22px;height:22px;margin:2px 0 0;flex:none}
.copies input[type=number]{width:84px;flex:none}
.warn-text{color:var(--warn)}
.ok-text{color:var(--ok)}
.error{color:var(--bad)}
.chip.ok{background:var(--ok-bg);color:var(--ok)}.chip.warn{background:var(--warn-bg);color:var(--warn)}.chip.bad{background:var(--bad-bg);color:var(--bad)}.chip.brand{background:var(--soft);color:var(--brand-ink)}
.chip.outline{background:transparent;border-color:var(--line);color:var(--muted);font-weight:500}
.stock{display:grid;grid-template-columns:repeat(auto-fit,minmax(110px,1fr));gap:8px;margin-top:10px}
.stock div{background:var(--info-bg);border-radius:9px;padding:8px 10px}
.stock strong{display:block;font-size:1.08rem}
.stock span{font-size:.76rem;color:var(--muted)}
.stock .main-figure{background:var(--ok-bg)}.stock .main-figure strong{color:var(--ok)}
.stock .zero{background:#f1f3f5}.stock .zero strong{color:var(--muted)}
.banner{border-radius:10px;padding:11px 13px;margin:0 0 12px;background:var(--info-bg);font-size:.93rem}
.banner.ok{background:var(--ok-bg);color:#14563a}.banner.warn{background:var(--warn-bg);color:var(--warn)}.banner.bad{background:var(--bad-bg);color:var(--bad)}
.banner strong{display:block;margin-bottom:2px}
.empty{text-align:center;color:var(--muted);padding:26px 12px;border:1px dashed var(--line);border-radius:var(--radius);background:var(--surface)}

.button{min-height:var(--tap);border-radius:10px;border:1px solid var(--line);background:var(--surface);color:var(--ink);padding:6px 16px;font-weight:600;display:inline-flex;align-items:center;justify-content:center;gap:8px;cursor:pointer;text-decoration:none;text-align:center;line-height:1.2;max-width:100%}
.button svg{flex:none}
.button:hover{border-color:#b8c8d6}
.button.primary{background:var(--brand);border-color:var(--brand);color:#fff}
.button.primary:hover{background:var(--brand-ink)}
.button.danger{color:var(--bad);border-color:#f0c4bf}
.button.primary.danger{background:var(--bad);border-color:var(--bad);color:#fff}
.button.ghost{border-color:transparent;background:transparent;color:var(--brand-ink)}
.button.block{width:100%}
.button.small{min-height:38px;padding:0 12px;font-size:.9rem}
.button:disabled{opacity:.55;cursor:not-allowed}
.button svg{width:20px;height:20px}
.actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.actions.end{justify-content:flex-end}
.sticky-actions{position:sticky;bottom:72px;z-index:5;background:linear-gradient(transparent,var(--bg) 30%);padding:16px 0 4px}
@media(min-width:900px){.sticky-actions{bottom:0}}

.field{display:grid;gap:5px;margin-bottom:12px}
.field>span{font-weight:600;font-size:.92rem}
.field small{color:var(--muted);font-size:.8rem}
input[type=text],input[type=search],input[type=number],input[type=date],input:not([type]),select,textarea{width:100%;min-height:var(--tap);border:1px solid #c9d6e0;border-radius:10px;background:#fff;padding:10px 12px}
textarea{min-height:84px;resize:vertical}
input:focus,select:focus,textarea:focus,button:focus-visible,a:focus-visible{outline:3px solid #9cc9f0;outline-offset:1px}
.check{display:flex;align-items:center;gap:10px;min-height:var(--tap);font-weight:500}
.check input{width:22px;height:22px}
.segmented{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;border:1px solid var(--line);border-radius:10px;overflow:hidden;background:#fff}
.segmented button{min-height:44px;border:0;background:transparent;font-weight:600;color:var(--muted);cursor:pointer}
.segmented button[aria-pressed=true]{background:var(--soft);color:var(--brand-ink)}
.search-bar{display:flex;gap:8px;position:sticky;top:64px;z-index:6;background:var(--bg);padding:2px 0 8px}
.search-bar input{font-size:1.05rem}
.qty{display:grid;grid-template-columns:var(--tap) 1fr var(--tap);gap:6px}
.qty button{border:1px solid #c9d6e0;border-radius:10px;background:#fff;font-size:1.3rem;font-weight:700;cursor:pointer}
.qty input{text-align:center;font-size:1.15rem;font-weight:700}
.two{display:grid;grid-template-columns:1fr 1fr;gap:10px;align-items:end}
.two>*{min-width:0}
@media(max-width:420px){.two.stack{grid-template-columns:1fr}}

table.data{width:100%;border-collapse:collapse;font-size:.92rem}
table.data th{text-align:left;font-size:.76rem;text-transform:uppercase;letter-spacing:.04em;color:var(--muted);font-weight:600;padding:8px 6px;border-bottom:1px solid var(--line)}
table.data td{padding:10px 6px;border-bottom:1px solid var(--line);vertical-align:top}
table.data td.num,table.data th.num{text-align:right;white-space:nowrap}
.table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}

.line{border-top:1px solid var(--line);padding:11px 0}
.line:first-child{border-top:0;padding-top:4px}
.line-figures{display:flex;flex-wrap:wrap;gap:6px 14px;font-size:.88rem;margin-top:5px}
.line-figures b{font-weight:700}

/* Okna dialogowe (arkusz od dołu na telefonie) */
dialog{border:0;border-radius:16px 16px 0 0;padding:0;width:100%;max-width:640px;max-height:92vh;margin:auto auto 0;background:var(--surface);color:var(--ink)}
dialog::backdrop{background:rgba(15,30,45,.45)}
@media(min-width:700px){dialog{border-radius:16px;margin:auto}}
.sheet-head{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:14px 16px;border-bottom:1px solid var(--line);position:sticky;top:0;background:var(--surface);z-index:1}
.sheet-body{padding:16px;overflow-y:auto}
.sheet-foot{padding:12px 16px calc(12px + env(safe-area-inset-bottom));border-top:1px solid var(--line);display:flex;gap:8px;justify-content:flex-end;position:sticky;bottom:0;background:var(--surface)}
.sheet-foot .button{flex:1 1 0}
.sheet-foot .button.primary,.sheet-foot .button.danger{flex-grow:1.6}
@media(min-width:700px){.sheet-foot .button{flex:0 0 auto}}

/* Komunikat u góry: na telefonie nie zasłania przycisków akcji przy dolnym pasku. Dotknięcie zamyka. */
.notice{position:fixed;left:12px;right:12px;top:calc(76px + env(safe-area-inset-top));cursor:pointer;z-index:40;background:#1f2d3a;color:#fff;border-radius:12px;padding:13px 15px;box-shadow:0 8px 28px rgba(0,0,0,.25);font-size:.95rem;max-width:560px;margin:0 auto}
.notice.bad{background:var(--bad)}
@media(min-width:900px){.notice{top:auto;bottom:20px}}

.login{max-width:480px;margin:6vh auto;padding:0 16px}
.login .logo{display:flex;align-items:center;gap:12px;margin-bottom:18px}
.login .logo img{width:52px;height:52px;border-radius:12px}
.person-list{display:grid;gap:8px}
.person-list button{display:flex;align-items:center;justify-content:space-between;gap:10px;text-align:left;min-height:56px;border:1px solid var(--line);border-radius:12px;background:#fff;padding:10px 14px;cursor:pointer}
.person-list button:hover{border-color:var(--brand)}

.result-ok{border-left:5px solid var(--ok)}
.result-warn{border-left:5px solid #e0a526}
.scan-video{width:100%;max-height:52vh;background:#000;border-radius:12px;object-fit:cover}
.placeholder-loading{color:var(--muted);padding:20px 0}
.kv{display:grid;grid-template-columns:auto 1fr;gap:4px 14px;font-size:.92rem}
.kv dt{color:var(--muted)}.kv dd{margin:0}
.tabs{display:flex;gap:6px;overflow-x:auto;margin:0 0 12px;padding-bottom:2px}
.tabs button{min-height:40px;border:1px solid var(--line);border-radius:999px;background:#fff;padding:0 14px;font-weight:600;color:var(--muted);cursor:pointer;white-space:nowrap}
.tabs button[aria-pressed=true]{background:var(--brand);border-color:var(--brand);color:#fff}
.more-list{display:grid;gap:6px}
.more-list a{display:flex;align-items:center;gap:12px;min-height:52px;padding:0 12px;border-radius:10px;text-decoration:none;color:var(--ink);border:1px solid var(--line)}
.more-list a[aria-current=page]{background:var(--soft);border-color:#b9d6f2;color:var(--brand-ink)}
.more-list a .chip{margin-left:auto}
.more-list svg{width:22px;height:22px;color:var(--brand)}
.notif{display:flex;gap:10px;align-items:flex-start}
.notif.unread h3::before{content:"";display:inline-block;width:9px;height:9px;border-radius:50%;background:var(--brand);margin-right:7px;vertical-align:1px}
@media print{.topbar,.bottom-nav,.side-nav,.actions,.test-banner{display:none!important}.main{padding:0}}
.note-text{overflow-wrap:anywhere;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;cursor:pointer;margin-top:2px}.note-text.open{display:block;-webkit-line-clamp:unset}