/* ═══════════════════════════════════════════════════════════════
   AuxiSol — CRI Osimo Sala Operativa
   Dark mode operativo — Monitor 1080p / 15"
   ═══════════════════════════════════════════════════════════════ */

:root {
  --bg:          #0d1117;
  --bg-card:     #161b22;
  --bg-hover:    #1c2128;
  --border:      #30363d;
  --border-light:#21262d;
  --text:        #e6edf3;
  --text-muted:  #7d8590;
  --text-dim:    #484f58;

  --red:         #CC0000;
  --red-light:   #e03333;
  --red-dim:     #2d0000;

  --green:       #3fb950;
  --green-dim:   #0d2b17;
  --yellow:      #d29922;
  --yellow-dim:  #2d2000;
  --blue:        #388bfd;
  --blue-dim:    #0c1f3d;
  --orange:      #f0883e;
  --orange-dim:  #2d1500;
  --purple:      #bc8cff;
  --purple-dim:  #1e1040;

  --sidebar-w:   200px;
  --navbar-h:    64px;
  --radius:      8px;
  --shadow:      0 1px 3px rgba(0,0,0,.5), 0 4px 12px rgba(0,0,0,.3);
}

/* ── Reset ────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 15px; }
body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  background: var(--bg);
  color: var(--text);
  line-height: 1.5;
  min-height: 100vh;
}
a { color: var(--blue); text-decoration: none; }
a:hover { text-decoration: underline; }

::-webkit-scrollbar { width: 5px; height: 5px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }

/* ── Navbar ───────────────────────────────────────────────────── */
.navbar {
  position: fixed; top: 0; left: 0; right: 0; z-index: 200;
  height: var(--navbar-h);
  background: var(--bg-card);
  border-bottom: 1px solid var(--border);
  display: flex; align-items: center; gap: 12px;
  padding: 0 16px;
  box-shadow: 0 1px 8px rgba(0,0,0,.6);
}

.navbar-logo {
  display: flex; align-items: center; gap: 9px;
  color: var(--text); text-decoration: none; white-space: nowrap;
}
.navbar-logo img {
  height: 48px; width: 48px;
  object-fit: contain; border-radius: 6px;
}
.navbar-logo-text { line-height: 1.2; }
.navbar-logo-text .nome { font-size: 13px; font-weight: 700; }
.navbar-logo-text .sub  { font-size: 10px; color: var(--text-muted); }
.navbar-logo:hover { text-decoration: none; }

.navbar-spacer { flex: 1; }

.navbar-clock {
  font-family: 'SF Mono', 'Fira Code', 'Consolas', monospace;
  font-size: 19px; font-weight: 700;
  color: var(--text); letter-spacing: 1px;
}

.navbar-status {
  display: flex; align-items: center; gap: 5px;
  font-size: 11px; padding: 3px 9px;
  border-radius: 20px; border: 1px solid; font-weight: 500;
}
.navbar-status.online  { color: var(--green); border-color: #14532d; background: var(--green-dim); }
.navbar-status.offline { color: var(--yellow); border-color: #451a03; background: var(--yellow-dim); }
.navbar-status .dot { font-size: 7px; }

/* ── Layout ───────────────────────────────────────────────────── */
.layout { display: flex; padding-top: var(--navbar-h); min-height: 100vh; }

/* ── Sidebar ──────────────────────────────────────────────────── */
.sidebar {
  width: var(--sidebar-w); flex-shrink: 0;
  position: fixed; top: var(--navbar-h); bottom: 0; left: 0;
  background: var(--bg-card);
  border-right: 1px solid var(--border);
  overflow-y: auto; overflow-x: hidden;
  display: flex; flex-direction: column;
  padding: 10px 0;
}

.sidebar-section {
  padding: 8px 12px 2px;
  font-size: 10px; font-weight: 600;
  color: var(--text-dim); text-transform: uppercase; letter-spacing: .8px;
}

.sidebar a {
  display: flex; align-items: center; gap: 8px;
  padding: 7px 12px; margin: 1px 6px;
  color: var(--text-muted); font-size: 14px; font-weight: 500;
  border-radius: 6px; text-decoration: none;
  transition: background .12s, color .12s;
  position: relative;
}
.sidebar a:hover  { background: var(--bg-hover); color: var(--text); text-decoration: none; }
.sidebar a.active { background: var(--red-dim); color: #f87171; font-weight: 600; }
.sidebar a.active::before {
  content: ''; position: absolute; left: -6px;
  width: 3px; height: 18px; border-radius: 0 2px 2px 0;
  background: var(--red);
}

.sidebar hr { border: none; border-top: 1px solid var(--border-light); margin: 8px 12px; }
.sidebar-bottom { margin-top: auto; }

.badge-nav {
  margin-left: auto; background: var(--red); color: #fff;
  font-size: 10px; font-weight: 700;
  padding: 1px 6px; border-radius: 10px; min-width: 18px; text-align: center;
}

/* ── Main ─────────────────────────────────────────────────────── */
.main {
  flex: 1; margin-left: var(--sidebar-w);
  padding: 20px 24px; min-width: 0;
}

/* ── Page header ──────────────────────────────────────────────── */
.page-header {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 18px; gap: 10px; flex-wrap: wrap;
}
.page-title { font-size: 20px; font-weight: 700; color: var(--text); }
.page-sub   { font-size: 13px; color: var(--text-muted); margin-top: 2px; }

/* ── Cards ────────────────────────────────────────────────────── */
.card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 14px 16px;
  margin-bottom: 14px;
  box-shadow: var(--shadow);
}
.card-title {
  font-size: 12px; font-weight: 600;
  color: var(--text-muted); text-transform: uppercase; letter-spacing: .6px;
  margin-bottom: 12px; padding-bottom: 9px;
  border-bottom: 1px solid var(--border-light);
}

/* ── Buttons ──────────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 5px;
  padding: 7px 15px; border-radius: 6px;
  font-size: 13px; font-weight: 500;
  border: 1px solid transparent; cursor: pointer;
  text-decoration: none; line-height: 1;
  transition: background .12s, opacity .12s;
  white-space: nowrap;
}
.btn:hover { opacity: .88; text-decoration: none; }
.btn:active { opacity: .75; }

.btn-primary   { background: var(--red);      color: #fff; border-color: var(--red); }
.btn-secondary { background: var(--bg-hover); color: var(--text); border-color: var(--border); }
.btn-danger    { background: #991b1b;         color: #fca5a5; border-color: #7f1d1d; }
.btn-success   { background: #14532d;         color: #86efac; border-color: #166534; }
.btn-outline   { background: transparent;     color: var(--text-muted); border-color: var(--border); }
.btn-outline:hover { background: var(--bg-hover); color: var(--text); }
.btn-warning   { background: var(--yellow-dim); color: #fcd34d; border-color: #451a03; }

.btn-sm { padding: 4px 11px; font-size: 12px; border-radius: 5px; }
.btn-lg { padding: 9px 18px; font-size: 14px; }

/* ── Forms ────────────────────────────────────────────────────── */
.form-group { display: flex; flex-direction: column; gap: 4px; margin-bottom: 10px; }
.form-group label { font-size: 12px; font-weight: 500; color: var(--text-muted); }

.form-control {
  background: var(--bg); border: 1px solid var(--border);
  border-radius: 6px; color: var(--text);
  padding: 8px 11px; font-size: 14px; width: 100%;
  transition: border-color .12s, box-shadow .12s;
}
.form-control:focus {
  outline: none; border-color: var(--blue);
  box-shadow: 0 0 0 3px rgba(56,139,253,.12);
}
.form-control::placeholder { color: var(--text-dim); }
select.form-control { cursor: pointer; }
textarea.form-control { resize: vertical; min-height: 64px; }

/* ── Badges ───────────────────────────────────────────────────── */
.badge {
  display: inline-flex; align-items: center;
  padding: 2px 9px; border-radius: 20px;
  font-size: 11px; font-weight: 700; letter-spacing: .2px; line-height: 1.7;
}
.badge-danger      { background: var(--red-dim);    color: #f87171; border: 1px solid #7f1d1d; }
.badge-primary     { background: var(--blue-dim);   color: #93c5fd; border: 1px solid #1e3a5f; }
.badge-success     { background: var(--green-dim);  color: #86efac; border: 1px solid #14532d; }
.badge-warning     { background: var(--yellow-dim); color: #fcd34d; border: 1px solid #451a03; }
.badge-secondary   { background: var(--bg-hover);   color: var(--text-muted); border: 1px solid var(--border); }
.badge-info        { background: var(--blue-dim);   color: #60a5fa; border: 1px solid #1e3a5f; }
.badge-orange      { background: var(--orange-dim); color: #fdba74; border: 1px solid #431407; }
.badge-purple      { background: var(--purple-dim); color: #c4b5fd; border: 1px solid #2e1065; }

.badge-nota           { background: var(--bg-hover); color: var(--text-muted); border: 1px solid var(--border); }
.badge-comunicazione  { background: var(--blue-dim);  color: #93c5fd; border: 1px solid #1e3a5f; }
.badge-allerta        { background: var(--red-dim);   color: #f87171; border: 1px solid #7f1d1d; }
.badge-decisione      { background: var(--purple-dim);color: #c4b5fd; border: 1px solid #2e1065; }
.badge-aggiornamento  { background: var(--green-dim); color: #86efac; border: 1px solid #14532d; }

/* ── Widget grid ──────────────────────────────────────────────── */
.widget-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 14px;
}

/* ── Voce Diario ──────────────────────────────────────────────── */
.voce-diario {
  display: flex; gap: 10px;
  padding: 9px 0;
  border-bottom: 1px solid var(--border-light);
}
.voce-diario:last-child { border-bottom: none; }
.voce-ora {
  font-family: 'SF Mono', 'Fira Code', monospace;
  font-size: 10px; color: var(--text-dim); font-weight: 600;
  min-width: 50px; padding-top: 2px; white-space: nowrap;
}
.voce-corpo { flex: 1; min-width: 0; }
.voce-corpo p { font-size: 14px; color: var(--text); margin-top: 5px; line-height: 1.6; }
.voce-operatore { font-size: 12px; color: var(--text-dim); margin-top: 4px; }

/* Timeline line */
.timeline { position: relative; padding-left: 20px; }
.timeline::before {
  content: ''; position: absolute; left: 5px; top: 0; bottom: 0;
  width: 1px; background: var(--border-light);
}
.timeline .voce-diario { position: relative; }
.timeline .voce-diario::before {
  content: ''; position: absolute; left: -17px; top: 13px;
  width: 5px; height: 5px; border-radius: 50%; background: var(--text-dim);
}
.timeline .tipo-ALLERTA::before       { background: var(--red-light); }
.timeline .tipo-DECISIONE::before     { background: var(--purple); }
.timeline .tipo-COMUNICAZIONE::before { background: var(--blue); }
.timeline .tipo-AGGIORNAMENTO::before { background: var(--green); }

/* ── Intervento row ───────────────────────────────────────────── */
.intervento-row {
  display: flex; align-items: center; gap: 10px;
  padding: 11px 13px; border-radius: var(--radius);
  border: 1px solid var(--border); background: var(--bg-card);
  margin-bottom: 7px; color: var(--text);
  text-decoration: none; transition: background .12s, border-color .12s;
}
.intervento-row:hover { background: var(--bg-hover); text-decoration: none; border-color: #444c56; }
.int-codice { font-size: 11px; color: var(--text-muted); font-family: monospace; font-weight: 600; }
.int-titolo { font-size: 14px; font-weight: 600; color: var(--text); }
.int-meta   { font-size: 12px; color: var(--text-muted); }

.priorita-dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; }
.p1 { background: #ef4444; box-shadow: 0 0 5px #ef4444; }
.p2 { background: var(--orange); }
.p3 { background: var(--yellow); }
.p4 { background: var(--text-dim); }

/* ── Status pill ──────────────────────────────────────────────── */
.status-pill {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 9px; border-radius: 20px; font-size: 11px; font-weight: 600; border: 1px solid;
}
.status-APERTO   { color: #f87171; background: var(--red-dim);    border-color: #7f1d1d; }
.status-IN_CORSO { color: #93c5fd; background: var(--blue-dim);   border-color: #1e3a5f; }
.status-SOSPESO  { color: #fcd34d; background: var(--yellow-dim); border-color: #451a03; }
.status-CHIUSO   { color: var(--text-muted); background: var(--bg-hover); border-color: var(--border); }

/* ── Intervento switcher (diario sala) ────────────────────────── */
.intervento-switcher {
  display: flex; align-items: center; gap: 7px; flex-wrap: wrap;
  padding: 10px 14px; background: var(--bg-card);
  border: 1px solid var(--border); border-radius: var(--radius); margin-bottom: 14px;
}
.intervento-pill {
  padding: 3px 11px; border-radius: 20px; font-size: 12px; font-weight: 500;
  border: 1px solid var(--border); color: var(--text-muted); text-decoration: none;
  transition: all .12s;
}
.intervento-pill:hover { border-color: var(--red-light); color: var(--text); text-decoration: none; }
.intervento-pill.active { background: var(--red-dim); color: #f87171; border-color: var(--red); font-weight: 700; }

/* ── KPI ──────────────────────────────────────────────────────── */
.kpi { text-align: center; padding: 8px; }
.kpi-number { font-size: 32px; font-weight: 800; color: var(--red-light); line-height: 1; }
.kpi-label  { font-size: 11px; color: var(--text-muted); margin-top: 3px; }

/* ── Mezzo card ───────────────────────────────────────────────── */
.mezzo-card {
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 13px;
  transition: border-color .12s;
}
.mezzo-card:hover { border-color: #444c56; }
.mezzo-nome  { font-size: 14px; font-weight: 700; color: var(--text); }
.mezzo-targa { font-size: 10px; color: var(--text-muted); font-family: monospace; margin-top: 1px; }
.mezzo-stati { display: flex; gap: 5px; flex-wrap: wrap; margin-top: 8px; }

/* ── Sync ─────────────────────────────────────────────────────── */
.sync-attesa { color: var(--yellow); font-size: 12px; }
.sync-ok     { color: var(--green);  font-size: 12px; }
.sync-errore { color: #f87171;       font-size: 12px; }

/* ── Alerts ───────────────────────────────────────────────────── */
.alert {
  padding: 9px 13px; border-radius: 6px; margin-bottom: 10px;
  font-size: 12px; border: 1px solid;
}
.alert-error   { background: var(--red-dim);   color: #f87171; border-color: #7f1d1d; }
.alert-success { background: var(--green-dim); color: #86efac; border-color: #14532d; }
.alert-info    { background: var(--blue-dim);  color: #93c5fd; border-color: #1e3a5f; }

/* ── HTMX spinner ─────────────────────────────────────────────── */
.htmx-indicator { display: none; }
.htmx-request .htmx-indicator { display: inline-flex; align-items: center; }
.spinner {
  width: 13px; height: 13px;
  border: 2px solid var(--border); border-top-color: var(--red);
  border-radius: 50%; animation: spin .65s linear infinite; display: inline-block;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ── Utilities ────────────────────────────────────────────────── */
.d-flex          { display: flex; }
.align-center    { align-items: center; }
.justify-between { justify-content: space-between; }
.flex-1          { flex: 1; }
.flex-wrap       { flex-wrap: wrap; }
.gap-1           { gap: 6px; }
.gap-2           { gap: 12px; }
.mt-1            { margin-top: 6px; }
.mt-2            { margin-top: 12px; }
.mb-1            { margin-bottom: 6px; }
.mb-2            { margin-bottom: 12px; }
.text-muted      { color: var(--text-muted); }
.text-red        { color: var(--red-light); }
.text-green      { color: var(--green); }
.small           { font-size: 12px; }
.fw-bold         { font-weight: 700; }
.text-center     { text-align: center; }
.w-100           { width: 100%; }

/* ── Required asterisk ───────────────────────────────────────── */
.req { color: var(--red-light); }

/* ── Progress bar dark ───────────────────────────────────────── */
.progress-bar-bg {
  width: 80px; height: 5px; background: var(--border);
  border-radius: 3px; margin-top: 4px; overflow: hidden;
}
.progress-bar-fill {
  height: 5px; border-radius: 3px; transition: width .3s;
  background: var(--red);
}
.progress-bar-fill.completa { background: var(--green); }

/* ── Lista voce row ──────────────────────────────────────────── */
.lista-voce-row {
  display: flex; align-items: center; gap: 8px;
  padding: 5px 0;
  border-bottom: 1px solid var(--border-light);
}
.lista-voce-row:last-child { border-bottom: none; }
.lista-voce-row .testo { flex: 1; font-size: 13px; color: var(--text); }
.lista-voce-row .testo.fatto { text-decoration: line-through; color: var(--text-dim); }

/* ── Print ────────────────────────────────────────────────────── */
@media print {
  .navbar, .sidebar, .btn, .btn-sm, .htmx-indicator,
  form, details summary ~ *, .intervento-switcher { display: none !important; }
  .main { margin-left: 0 !important; padding: 0 !important; }
  .layout { padding-top: 0 !important; }
  body { background: #fff !important; color: #000 !important; font-size: 11px; }
  .card { border: 1px solid #ccc !important; background: #fff !important;
          box-shadow: none !important; break-inside: avoid; }
  .voce-corpo p, .int-titolo { color: #000 !important; }
  .text-muted, .voce-ora, .voce-operatore { color: #555 !important; }
  a { color: #000 !important; text-decoration: none !important; }
}

/* ── Responsive 15" ──────────────────────────────────────────── */
@media (max-width: 1200px) {
  :root { --sidebar-w: 180px; }
  .main { padding: 16px 18px; }
  .widget-grid { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
}
@media (max-width: 768px) {
  :root { --sidebar-w: 0px; }
  .sidebar { display: none; }
  .main { margin-left: 0; padding: 12px; }
}