:root{ --brand:#10b981; --bg:#f8fafc; --text:#0f172a; --muted:#64748b; }
*{ box-sizing:border-box; }
html,body{ height:100%; margin:0; }
body{ font-family: system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,'Helvetica Neue',Arial,sans-serif; background:var(--bg); color:var(--text); }
a{ color:inherit; text-decoration:none; }
button{ cursor:pointer; }
.container{ max-width: 1200px; margin: 0 auto; padding: 1rem; }
.card{ background:#fff; border:1px solid #e2e8f0; border-radius:16px; padding:1.25rem; box-shadow:0 10px 25px rgba(0,0,0,.07); }
.btn{ border:1px solid #cbd5e1; background:#fff; padding:.6rem .95rem; border-radius:.75rem; }
.btn.primary{ background:var(--brand); color:#fff; border-color:transparent; }
.btn.block{ width:100%; }
.input, select, textarea{ width:100%; padding:.6rem .8rem; border:1px solid #cbd5e1; border-radius:.6rem; font: inherit; }
.stack{ display:grid; gap:.75rem; }
.center{ display:grid; place-items:center; min-height: calc(100vh - 140px); padding:1rem; }
.notice{ font-size:.9rem; color:var(--muted); }
.footer{ border-top:1px solid #e2e8f0; padding:1rem; text-align:center; color:#64748b; font-size:.9rem; }

/* Fixed top bar with centered brand */
.topbar{ position:fixed; top:0; left:0; right:0; height:64px;
  display:grid; grid-template-columns: 1fr auto 1fr; align-items:center;
  padding:0 .75rem; background:rgba(255,255,255,.92); border-bottom:1px solid #e2e8f0; backdrop-filter: blur(8px); z-index:20; }
.brand-center{ justify-self:center; display:flex; align-items:center; gap:.5rem; font-weight:700; }
.brand-center img{ height:40px; width:auto; } /* large logo */
.left-slot{ justify-self:start; }
.right-slot{ justify-self:end; }

/* Dashboard layout: 3/5 map, 2/5 panel */
.dashboard{ position:fixed; top:64px; bottom:0; left:0; right:0; display:flex; }
.mapcol{ flex: 3 1 60%; border-right:1px solid #e2e8f0; }
.sidecol{ flex: 2 1 40%; display:flex; flex-direction:column; background:#ffffffcc; backdrop-filter: blur(8px); }
.side-header{ padding:.6rem 1rem; border-bottom:1px solid #e2e8f0; font-weight:700; display:flex; align-items:center; gap:.5rem; justify-content:space-between; }
.filters{ display:grid; grid-template-columns:1fr 1fr; gap:.5rem; padding:.6rem 1rem; border-bottom:1px solid #e2e8f0; }
.search{ padding:.6rem 1rem; border-bottom:1px solid #e2e8f0; }
.side-list{ flex:1; overflow:auto; padding: .75rem 1rem; }
.side-footer{ padding:.75rem 1rem; border-top:1px solid #e2e8f0; }
.legend{ display:flex; gap:.5rem; align-items:center; font-size:.85rem; color:#334155; }
.legend span{ display:inline-flex; align-items:center; gap:.3rem; }
.dot{ width:10px; height:10px; border-radius:10px; display:inline-block; border:1px solid #0f172a22; }

.intervento-item{ padding:.6rem .5rem; border:1px solid #e2e8f0; border-radius:.6rem; margin-bottom:.5rem; background:#fff; }
.badge{ display:inline-block; padding:.1rem .5rem; border-radius:.5rem; font-size:.75rem; border:1px solid #cbd5e1; margin-left:.5rem; color:#0f172a; }

#map{ width:100%; height:100%; }

/* Modal */
.modal{ position:fixed; inset:0; background:rgba(0,0,0,.5); display:none; align-items:center; justify-content:center; z-index:50; }
.modal[aria-hidden="false"]{ display:flex; }
.modal-card{ background:#fff; border-radius:12px; width:min(560px, 92vw); padding:1rem; border:1px solid #e2e8f0; max-height:90vh; overflow:auto; }
.modal-header{ display:flex; align-items:center; justify-content:space-between; margin-bottom:.5rem; }
.modal-title{ font-weight:700; }
.close{ background:transparent; border:none; font-size:1.2rem; }