/* WUAO Care - componenti comuni (mappa, grafici, modale, avvisi) */
:root{
  --navy:#123d67;--sky:#31abd0;--sky-d:#1f8db6;--lime:#a9c22a;--lime-l:#c7dd35;--orange:#f6ad24;
  --ink:#18344d;--muted:#5f7387;--line:#d6e2e7;--bg:#f4f8f7;--white:#fff;
  --ok:#2f9a55;--crit:#d6443f;--warn:#e39b12;--info:#3b7fc4;--tech:#7c6fb0;--off:#98a6b3;
  --teal:#2bc4b0;--coral:#ff8a5c;
  --radius:10px;--shadow:0 2px 10px #1c3d4a12;
}
*{box-sizing:border-box}
[hidden]{display:none!important}
.ico{width:18px;height:18px;flex:none}
.muted{color:var(--muted)}.small{font-size:12px}.nowrap{white-space:nowrap}.right{text-align:right}.mono{font-family:ui-monospace,Consolas,monospace}

/* toast */
.toast{position:fixed;left:50%;bottom:24px;transform:translate(-50%,30px);background:#173a52;color:#fff;padding:11px 18px;border-radius:9px;opacity:0;pointer-events:none;transition:.25s;z-index:200;max-width:min(90vw,560px);box-shadow:0 8px 30px #0003}
.toast.show{opacity:1;transform:translate(-50%,0)}
.toast.err{background:#b23b37}

/* modale */
.modal-back{position:fixed;inset:0;background:#0e223399;display:grid;place-items:center;z-index:100;padding:16px}
.modal{background:#fff;border-radius:14px;width:min(560px,100%);max-height:calc(100vh - 32px);display:flex;flex-direction:column;box-shadow:0 20px 60px #0004}
.modal.wide{width:min(900px,100%)}.modal.xl{width:min(1240px,100%)}
.modal-head{display:flex;justify-content:space-between;align-items:center;padding:16px 20px;border-bottom:1px solid var(--line)}
.modal-head h2{margin:0;font-size:18px;color:var(--navy)}
.modal-head .x{border:0;background:none;font-size:26px;line-height:1;cursor:pointer;color:var(--muted);min-width:44px;min-height:44px}
.modal-body{padding:18px 20px;overflow:auto}
.modal-foot{padding:14px 20px;border-top:1px solid var(--line);display:flex;justify-content:flex-end;gap:8px;flex-wrap:wrap}

/* pill */
.pill{display:inline-block;padding:2px 9px;border-radius:999px;font-size:12px;font-weight:600;background:#eef3f6;color:#46607a;white-space:nowrap}
.pill.sev-critical{background:#fde4e2;color:#a8302c}.pill.sev-warning{background:#fff1d6;color:#8a5a00}
.pill.sev-info{background:#e3effa;color:#2a5f93}.pill.sev-tech{background:#ece8f7;color:#574b8c}
.pill.st-open{background:#fde4e2;color:#a8302c}.pill.st-acked{background:#fff1d6;color:#8a5a00}.pill.st-closed{background:#e6f3ea;color:#256c3e}
.pill.on{background:#e6f3ea;color:#256c3e}.pill.off{background:#eef1f3;color:#6b7b88}

/* grafici */
.chart svg{width:100%;height:auto;display:block}
.chart .grid{stroke:#e3ebef;stroke-width:1}
.chart .axis{fill:#6d8193;font-size:11px}
.chart .legend{display:flex;gap:14px;font-size:12px;color:var(--muted);margin-top:4px;flex-wrap:wrap}
.chart .legend i{display:inline-block;width:12px;height:3px;border-radius:2px;margin-right:5px;vertical-align:middle}
.chart-empty{padding:30px;text-align:center;color:var(--muted);background:#f6f9fa;border-radius:8px}
.spark{width:100%;height:26px;display:block}
.wave{width:100%;height:46px;display:block}

/* mappa del piano */
.floormap{position:relative;width:100%;height:100%;min-height:260px;touch-action:none;user-select:none}
.floormap svg{width:100%;height:100%;display:block}
.floormap .floor-bg{fill:#fbfcfc;stroke:#c9d7de;stroke-width:calc(var(--u)*0.25px)}
.floormap .grid-m{stroke:#e2eaee;stroke-width:0.02;fill:none}
.floormap .room{stroke:#8aa3b3;stroke-width:0.06;cursor:pointer;transition:fill .3s}
.floormap .room.occ{stroke:#2bc4b0;stroke-width:0.12}
.floormap .room.warn{stroke:var(--warn);stroke-width:0.18}
.floormap .room.crit{stroke:var(--crit);stroke-width:0.22;animation:blink 1s infinite}
.floormap .room.sel{stroke:var(--sky-d);stroke-width:0.18;stroke-dasharray:0.3 0.15}
.floormap .room-label{paint-order:stroke;stroke:#ffffffcc;stroke-width:0.08px;fill:#4a6378;font-weight:600;pointer-events:none;font-family:"Segoe UI",Arial,sans-serif}
.floormap .occ-dot{fill:#2bc4b0;opacity:.25;pointer-events:none}
.floormap .bed{cursor:pointer}
.floormap .bed .bed-frame{fill:#fff;stroke:#7d95a6;stroke-width:0.06}
.floormap .bed .pillow{fill:#e8eef2}
.floormap .bed .body{fill:#2bc4b0;opacity:.75}
.floormap .bed.st-in .bed-frame{stroke:#1fa392;stroke-width:0.1}
.floormap .bed.st-out .bed-frame{stroke:var(--warn);stroke-width:0.1;stroke-dasharray:0.15 0.08}
.floormap .bed.st-off .bed-frame{stroke:var(--off);fill:#f1f3f4}
.floormap .bed.st-warn .bed-frame{stroke:var(--warn);stroke-width:0.16;fill:#fff6e3}
.floormap .bed.st-crit .bed-frame{stroke:var(--crit);stroke-width:0.18;fill:#fde9e7}
.floormap .bed.st-acked .bed-frame{stroke:#c58b1c;stroke-width:0.14}
.floormap .bed.sel .bed-frame{stroke:var(--sky-d);stroke-width:0.16}
.floormap .bed-code{paint-order:stroke;stroke:#fff;stroke-width:0.06px;fill:#29465d;font-weight:700;pointer-events:none;font-family:"Segoe UI",Arial,sans-serif}
.floormap .bed-name{fill:#5f7387;font-weight:600;pointer-events:none;font-family:"Segoe UI",Arial,sans-serif}
.floormap .bed-vit{fill:#1b7f73;font-weight:600;pointer-events:none;font-family:"Segoe UI",Arial,sans-serif}
.floormap .dev{cursor:pointer}
.floormap .dev-dot{fill:#123d67;stroke:#fff;stroke-width:0.08}
.floormap .dev.off .dev-dot{fill:#98a6b3}
.floormap .dev.sel .dev-dot{fill:var(--sky)}
.floormap .dev-dir{stroke:#123d67;stroke-width:0.07}
.floormap .fov{fill:#31abd0;opacity:.10;stroke:#31abd0;stroke-width:0.04;pointer-events:none}
.floormap .fov.sel{opacity:.2}
.floormap .rot-handle{fill:#fff;stroke:var(--sky-d);stroke-width:0.12;cursor:grab}
.floormap .vertex{fill:#fff;stroke:var(--sky-d);stroke-width:0.1;cursor:move}
.floormap .person{fill:#ff8a5c;stroke:#fff;stroke-width:0.08;transition:cx .8s,cy .8s}
.floormap .person-halo{fill:#ff8a5c;opacity:.18;transition:cx .8s,cy .8s;pointer-events:none}
.floormap .pulse{fill:none;stroke-width:0.15;pointer-events:none;animation:pulse 1.4s infinite;transform-box:fill-box;transform-origin:center}
.floormap .pulse.crit{stroke:var(--crit)}.floormap .pulse.warn{stroke:var(--warn)}
.floormap .draft{fill:#31abd022;stroke:var(--sky-d);stroke-width:0.08;stroke-dasharray:0.2 0.1}
.floormap .draft-pt{fill:#fff;stroke:var(--sky-d);stroke-width:0.08}
.floormap .draft-pt.first{fill:var(--sky)}
.floormap .draft-label{fill:var(--sky-d);font-weight:700}
.floormap .scale line{stroke:#5f7387;stroke-width:0.06}
.floormap .scale text{fill:#5f7387}
.floormap[data-tool=rect],.floormap[data-tool=poly],.floormap[data-tool=bed]{cursor:crosshair}
.map-empty{padding:40px;text-align:center;color:var(--muted)}
@keyframes pulse{0%{transform:scale(.6);opacity:1}100%{transform:scale(1.6);opacity:0}}
@keyframes blink{50%{opacity:.55}}

/* lettore QR */
.scan{position:relative;background:#000;border-radius:10px;overflow:hidden;aspect-ratio:4/3}
.scan video{width:100%;height:100%;object-fit:cover}
.scan-frame{position:absolute;inset:18%;border:3px solid #fff;border-radius:14px;box-shadow:0 0 0 999px #0006}

/* etichette QR (stampa) */
.labels{display:grid;grid-template-columns:repeat(auto-fill,minmax(62mm,1fr));gap:4mm}
.label{border:1px dashed #9ab;border-radius:3mm;padding:3mm;display:flex;gap:3mm;align-items:center;break-inside:avoid;font-family:Arial,sans-serif}
.label .q{width:24mm;height:24mm}.label .q img,.label .q canvas{width:24mm!important;height:24mm!important}
.label b{display:block;font-size:11pt}.label small{display:block;font-size:8pt;color:#333}
@media print{body *{visibility:hidden}.print-area,.print-area *{visibility:visible}.print-area{position:absolute;left:0;top:0;width:100%}}