:root { --brand:#1f5f54; --brand2:#2c8a78; --brand-active:#17463e; --ink:#1f2733; --muted:#6b7280; --line:#e2e6ea; --bg:#f5f7f6; }
* { box-sizing: border-box; }
body { margin:0; font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif; background:var(--bg); color:var(--ink); }
#topbar { display:flex; align-items:center; gap:1rem; background:var(--brand); color:#fff; padding:.6rem 1rem; flex-wrap:wrap; }
.brand { font-weight:700; }
#nav { display:flex; gap:.25rem; flex:1; flex-wrap:wrap; }
#nav a { color:#dcece8; text-decoration:none; padding:.45rem .8rem; border-radius:8px; display:flex; align-items:center; gap:.4rem; font-weight:500; transition:background .12s; }
#nav a:hover { background:var(--brand2); color:#fff; }
#nav a.active { background:var(--brand-active); color:#fff; }
.ico { font-size:1.1rem; line-height:1; }
.brand { display:flex; align-items:center; gap:.4rem; }
#who { color:#dcece8; font-size:.85rem; }
#navLogout { background:transparent; color:#fff; border:1px solid rgba(255,255,255,.5); border-radius:8px; padding:.35rem .7rem; cursor:pointer; font-size:.85rem; }
#navLogout:hover { background:rgba(255,255,255,.15); }
/* Rozwijane menu „Więcej" */
.dropdown { position:relative; display:inline-flex; }
#nav .dropbtn { display:flex; align-items:center; gap:.3rem; background:transparent; color:#dcece8; border:none; padding:.45rem .8rem; border-radius:8px; cursor:pointer; font:inherit; font-weight:500; }
#nav .dropbtn:hover { background:var(--brand2); color:#fff; }
#nav .dropdown.active .dropbtn { background:var(--brand-active); color:#fff; }
.dropmenu { display:none; position:absolute; top:calc(100% + 4px); left:0; background:#fff; border:1px solid var(--line); border-radius:10px; box-shadow:0 6px 20px rgba(0,0,0,.18); min-width:190px; padding:.3rem; z-index:30; }
.dropdown.open .dropmenu { display:block; }
#nav .dropmenu a { color:var(--ink); padding:.5rem .6rem; border-radius:6px; }
#nav .dropmenu a:hover { background:var(--bg); color:var(--ink); }
#nav .dropmenu a.active { background:var(--brand2); color:#fff; }
.routestops { padding-left:1.3rem; margin:.4rem 0; }
.doorinfo { margin:.3rem 0; padding:.4rem .6rem; background:#f2f5f4; border-radius:6px; font-size:.85rem; line-height:1.5; }
/* Mapa ciała */
.bmRow { display:flex; gap:1rem; flex-wrap:wrap; align-items:flex-start; }
.bmSvg { width:200px; max-width:55vw; height:auto; background:#fff; border:1px solid var(--line); border-radius:10px; touch-action:manipulation; cursor:crosshair; }
.bmSvg .bmMark { cursor:pointer; }
.bmSide { flex:1; min-width:220px; }
.bmSide form label { margin:.35rem 0; }
.bmLegend { display:flex; flex-wrap:wrap; gap:.3rem .7rem; margin-top:.6rem; font-size:.82rem; }
.bmLeg, .bmItem i { display:inline-flex; align-items:center; }
.bmLeg i, .bmItem i { width:.8rem; height:.8rem; border-radius:50%; margin-right:.35rem; display:inline-block; }
.bmList { margin-top:.7rem; display:grid; gap:.3rem; }
.bmItem { display:flex; align-items:center; gap:.4rem; flex-wrap:wrap; padding:.3rem .5rem; border:1px solid var(--line); border-radius:8px; }
.bmItem .bmDel { margin-left:auto; padding:.25rem .6rem; }
.bmSvgSmall { width:150px; cursor:default; }
.bmCmpRow { display:flex; gap:1rem; flex-wrap:wrap; }
.bmCmpCol { flex:1; min-width:150px; text-align:center; }
.bmCmpHd { font-size:.82rem; margin-bottom:.3rem; }
.routestops li { margin:.35rem 0; }
.genPickList { max-height:240px; overflow-y:auto; display:grid; gap:.2rem; border:1px solid var(--line); border-radius:8px; padding:.4rem; margin-top:.3rem; }
.genPickList .chk { justify-content:flex-start; }
.genScroll { max-height:320px; overflow:auto; border:1px solid var(--line); border-radius:8px; margin-top:.3rem; }
.genClients { width:100%; }
.genClients th { position:sticky; top:0; background:#fff; }
.genClients td, .genClients th { padding:.3rem .5rem; }
.genClients input[type=date] { width:9.5rem; }
.bar { height:12px; background:var(--brand2); border-radius:6px; min-width:2px; }
#app { max-width:900px; margin:1.2rem auto; padding:0 1rem; }
h1 { font-size:1.5rem; } h2 { font-size:1.1rem; }
.card { background:#fff; border:1px solid var(--line); border-radius:12px; padding:1rem; margin:1rem 0; }
.narrow { max-width:380px; margin:3rem auto; }
label { display:block; margin:.5rem 0; font-size:.9rem; color:#374151; }
input, select, textarea { width:100%; padding:.6rem; border:1px solid var(--line); border-radius:8px; font-size:1rem; margin-top:.2rem; font-family:inherit; }
input[type=checkbox] { width:auto; margin:0 .4rem 0 0; }
.chk { display:flex; align-items:center; gap:.3rem; font-weight:400; margin:.15rem 0; }
fieldset { border:1px solid var(--line); border-radius:8px; margin-top:.4rem; }
fieldset legend { font-size:.85rem; color:var(--muted); padding:0 .3rem; }
summary { cursor:pointer; color:var(--brand2); font-weight:600; margin:.5rem 0; }
.btn { display:inline-block; background:#fff; border:1px solid var(--line); border-radius:8px; padding:.6rem 1rem; cursor:pointer; font-size:1rem; text-decoration:none; color:var(--ink); }
.btn.primary { background:var(--brand2); border-color:var(--brand2); color:#fff; }
.btn.danger { border-color:#c0392b; color:#a02c20; }
.btn.danger:hover { background:#fdecea; }
.btn.tenant { display:block; width:100%; text-align:left; margin:.3rem 0; }
.row { display:flex; gap:.5rem; flex-wrap:wrap; align-items:end; }
.row input { flex:1; }
.grid { display:grid; grid-template-columns:1fr 1fr; gap:.2rem .8rem; }
@media (max-width:560px){ .grid { grid-template-columns:1fr; } }
.grid button { grid-column:1/-1; }
.stats { display:flex; gap:.8rem; flex-wrap:wrap; margin:1rem 0; }
.stat { background:#fff; border:1px solid var(--line); border-radius:10px; padding:.6rem 1rem; min-width:110px; }
.stat b { display:block; font-size:1.4rem; } .stat span { color:var(--muted); font-size:.8rem; }
table { width:100%; border-collapse:collapse; } th,td { text-align:left; padding:.4rem .5rem; border-bottom:1px solid var(--line); }
th { font-size:.78rem; text-transform:uppercase; color:var(--muted); }
.muted { color:var(--muted); } .list { display:grid; gap:.3rem; }
.lp { width:2.5rem; text-align:right; color:var(--muted); }
tr.vcancel td { opacity:.5; text-decoration:line-through; }
.tag { display:inline-block; background:var(--brand2); color:#fff; border-radius:6px; padding:.1rem .5rem; font-size:.8rem; }

/* Kalendarz (Grafik) */
.calbar { display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:.5rem; margin:.6rem 0; }
.calnav { display:flex; align-items:center; gap:.5rem; }
.calnav .btn { padding:.35rem .6rem; }
.viewswitch { display:flex; gap:.2rem; background:#fff; border:1px solid var(--line); border-radius:8px; padding:.15rem; }
.viewswitch a { padding:.35rem .7rem; border-radius:6px; cursor:pointer; color:var(--ink); font-size:.9rem; }
.viewswitch a.active { background:var(--brand2); color:#fff; }
.cal { display:grid; grid-template-columns:repeat(7,1fr); gap:1px; background:var(--line); border:1px solid var(--line); border-radius:10px; overflow:hidden; }
.calhead { background:#fff; padding:.4rem; text-align:center; font-size:.75rem; text-transform:uppercase; color:var(--muted); }
.calcell { background:#fff; min-height:94px; padding:.25rem; display:flex; flex-direction:column; gap:2px; cursor:pointer; }
.calcell.other { background:#fafbfc; color:var(--muted); }
.calcell.today { outline:2px solid var(--brand2); outline-offset:-2px; }
.calday { font-weight:600; font-size:.8rem; }
.chip { font-size:.72rem; background:#e8f2ef; color:#14463d; border-radius:4px; padding:1px 4px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.chip[data-vid], .wkevent[data-vid] { cursor:pointer; }
tr[data-vid] { cursor:pointer; }
tr[data-vid]:hover td { background:#f2f5f4; }
.chip.cancelled, .wkevent.cancelled { opacity:.5; text-decoration:line-through; }
/* Modal wizyty (interaktywny grafik) */
.modal-back { position:fixed; inset:0; background:rgba(0,0,0,.4); display:flex; align-items:center; justify-content:center; z-index:50; padding:1rem; }
.modal { background:#fff; border-radius:12px; padding:1.2rem; width:100%; max-width:420px; box-shadow:0 10px 40px rgba(0,0,0,.3); }
.modal h3 { margin:.1rem 0 .3rem; }
.modalActions { display:flex; flex-wrap:wrap; gap:.4rem; margin-top:.8rem; }
.chip.mobile { background:#fdeede; color:#7a4b12; }
.chip.more { background:#eef0f2; color:var(--muted); }
.weekwrap { display:flex; background:#fff; border:1px solid var(--line); border-radius:10px; overflow-x:auto; }
.wkhours { flex:0 0 46px; }
.wkhour { height:60px; box-sizing:border-box; font-size:.72rem; color:var(--muted); text-align:right; padding-right:4px; border-top:1px solid var(--line); }
.wkdays { display:grid; grid-template-columns:repeat(7,minmax(92px,1fr)); flex:1; }
.wkcol { border-left:1px solid var(--line); }
.wkcolhead { height:34px; box-sizing:border-box; display:flex; align-items:center; justify-content:center; font-size:.76rem; border-bottom:1px solid var(--line); color:var(--muted); }
.wkcolhead.today { color:#fff; background:var(--brand2); }
.wkbody { display:flow-root; box-sizing:border-box; background:
  repeating-linear-gradient(to bottom, transparent 0, transparent 59px, var(--line) 59px, var(--line) 60px),
  repeating-linear-gradient(to bottom, transparent 0, transparent 14px, #eef1f0 14px, #eef1f0 15px); }
.wkevent { box-sizing:border-box; margin:0 2px; background:var(--brand2); color:#fff; border:1.5px solid #fff; border-radius:5px; padding:1px 4px; font-size:.72rem; line-height:1.15; overflow:hidden; box-shadow:0 1px 3px rgba(0,0,0,.25); }
.wkevent.mobile { background:#c9781e; }

/* Druk / eksport PDF karty klienta */
.print-only { display:none; }
@media print {
  #topbar, #nav, #offline, .btn, details, #docView, .calbar, .no-print { display:none !important; }
  a { color:inherit; text-decoration:none; }
  body { background:#fff; }
  main { padding:0; }
  .card { border:1px solid #ccc; box-shadow:none; break-inside:avoid; margin:.4rem 0; }
  h1 { font-size:1.4rem; }
  .print-only { display:block; }
  body.print-plan-only #clientCard > *:not(#planPrintArea) { display:none !important; }
  body.print-plan-only #planPrintArea { display:block !important; }
  body.print-schedule-only #app section > *:not(#scheduleReport) { display:none !important; }
  body.print-schedule-only #scheduleReport { display:block !important; }
  body.print-bodymap-only #clientCard > *:not(#bodyMapPrintArea) { display:none !important; }
  body.print-bodymap-only #bodyMapPrintArea { display:block !important; }
  body.print-bodymap-only #bodyMapPrintArea .bmDel { display:none !important; }
}
#bodyMapPrintArea { display:none; }
.bmPrintView { break-inside:avoid; display:inline-block; width:47%; vertical-align:top; margin:.3rem 1% 1rem; text-align:center; }
.bmPrintView svg { width:150px; }
.bmPrintView .bmList { text-align:left; }
#scheduleReport { display:none; }
.report h2 { margin:.2rem 0; }
.report .rmeta { color:var(--muted); font-size:.85rem; margin-bottom:.7rem; }
.report .rday td { background:#f2f5f4; border-top:2px solid var(--line); }
.flash { padding:.6rem .9rem; border-radius:8px; margin:.6rem 0; }
.flash.err { background:#fdecea; color:#a02c20; border:1px solid #c0392b; }
.flash.ok { background:#e6f5ec; color:#176c3c; border:1px solid #1f9d55; }
.offline { position:fixed; bottom:0; left:0; right:0; background:#b9770e; color:#fff; text-align:center; padding:.4rem; }
button.primary:disabled { opacity:.6; }

/* Publiczna rezerwacja online */
.bk { max-width:460px; margin:1.5rem auto; padding:0 1rem 3rem; }
.bk h1 { font-size:1.4rem; margin:.4rem 0; }
.bk .salon { color:var(--brand); font-weight:600; }
.bk .step { margin:1.2rem 0; }
.bk .step h2 { font-size:1rem; color:#374151; margin:0 0 .5rem; }
.bkSlots { display:grid; grid-template-columns:repeat(auto-fill,minmax(4.5rem,1fr)); gap:.4rem; }
.bkSlot { padding:.55rem .2rem; border:1px solid var(--line); border-radius:8px; background:#fff; cursor:pointer; font-size:1rem; text-align:center; }
.bkSlot:hover { border-color:var(--brand2); }
.bkSlot.sel { background:var(--brand2); border-color:var(--brand2); color:#fff; }
.bkSvc { display:block; width:100%; text-align:left; margin:.35rem 0; padding:.7rem .9rem; }
.bkSvc.sel { background:var(--brand2); border-color:var(--brand2); color:#fff; }
.bkSvc .p { float:right; opacity:.85; }
.bk .powered { text-align:center; color:var(--muted); font-size:.8rem; margin-top:2rem; }
.bkQrBox { margin-top:1rem; padding:1rem; border:1px solid var(--line); border-radius:10px; text-align:center; background:#fafbfc; }
.bkQrImg { width:220px; height:auto; image-rendering:pixelated; border:1px solid var(--line); background:#fff; }