/* ===================================================================
   Konzentra — design system
   Shell a due aree (Gestione Immobili / Gestione Affitti) + token CSS.
   Tutte le classi storiche (.grid .card .badge .tiles .ctxbar form.* …)
   sono mantenute: i CGI esistenti non vanno toccati.
   =================================================================== */

:root {
  /* superfici / testo */
  --bg: #eef1f6;
  --card: #ffffff;
  --ink: #1f2733;
  --muted: #6b7685;
  --line: #e2e6ec;
  --line-strong: #cdd4de;

  /* brand (area Immobili) + scala */
  --brand: #2d6cdf;
  --brand-50: #eaf1fd;
  --brand-100: #d6e4fb;
  --brand-600: #1f53b8;

  /* accent (area Affitti) */
  --accent: #0d9488;
  --accent-50: #e6f6f4;
  --accent-600: #0b7d72;

  /* colore-area: cambia in base a body[data-area] */
  --area: var(--brand);
  --area-50: var(--brand-50);

  /* stati */
  --ok-bg:#e6f6ec;  --ok:#1d8f4e;
  --ko-bg:#fdeaea;  --ko:#c8372d;
  --warn-bg:#fff4e0;--warn:#b3760a;
  --info-bg:#e9f0fd;--info:#2d6cdf;

  /* spaziatura */
  --space-1:.25rem; --space-2:.5rem; --space-3:.75rem;
  --space-4:1rem;   --space-5:1.5rem; --space-6:2rem;

  /* tipografia */
  --text-xs:.78rem; --text-sm:.86rem; --text-md:1rem;
  --text-lg:1.2rem; --text-xl:1.5rem;

  /* forma */
  --radius:9px; --radius-sm:6px; --radius-pill:999px;
  --shadow-sm:0 1px 2px rgba(16,24,40,.06);
  --shadow-md:0 6px 18px rgba(16,24,40,.10);
  --shadow-lg:0 12px 32px rgba(16,24,40,.14);

  --sidebar-w: 248px;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  background: var(--bg);
  color: var(--ink);
  line-height: 1.5;
  font-size: 15px;
}
a { color: var(--brand); }

/* accessibilità: focus sempre visibile (WCAG 2.2) */
*:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; border-radius: 3px; }

/* ====================== SHELL CON SIDEBAR ====================== */
/* La sidebar è fissa nel gutter di sinistra; il contenuto è spinto a
   destra dal padding del body. Così topbar/main/footer/ctxbar si
   allineano da soli, senza margini per-elemento. */
body.has-sidebar { padding-left: var(--sidebar-w); }

.sidebar {
  position: fixed; left: 0; top: 0;
  width: var(--sidebar-w); height: 100vh;
  background: var(--card);
  border-right: 1px solid var(--line);
  display: flex; flex-direction: column;
  padding: var(--space-3) var(--space-3) var(--space-2);
  overflow-y: auto; z-index: 40;
}
.sidebar .brand {
  font-weight: 800; font-size: 1.2rem; letter-spacing: -.01em;
  color: var(--brand); text-decoration: none;
  padding: var(--space-2) var(--space-2) var(--space-3);
}
.sidebar .nav { flex: 1 1 auto; }

.nav-section { margin-bottom: var(--space-3); }
.nav-section h3 {
  font-size: var(--text-xs); text-transform: uppercase; letter-spacing: .06em;
  color: var(--muted); margin: var(--space-3) var(--space-2) var(--space-1); font-weight: 700;
}
.nav-section.nav-immobili { --area: var(--brand);  --area-50: var(--brand-50); }
.nav-section.nav-affitti  { --area: var(--accent); --area-50: var(--accent-50); }
.nav-section.nav-foot { margin-top: var(--space-2); }

.nav-item {
  display: flex; align-items: center; gap: .6rem;
  padding: .48rem .6rem; margin: 1px 0;
  border-radius: var(--radius-sm);
  color: var(--ink); text-decoration: none; font-size: var(--text-sm);
  box-shadow: inset 3px 0 0 transparent;
}
.nav-item:hover { background: var(--area-50); }
.nav-item.active {
  background: var(--area-50); color: var(--area);
  font-weight: 600; box-shadow: inset 3px 0 0 var(--area);
}
.nav-ic { width: 1.25rem; text-align: center; flex: 0 0 auto; font-size: .95rem; }

.sidebar-user {
  border-top: 1px solid var(--line); margin-top: var(--space-2);
  padding: var(--space-3) var(--space-2) var(--space-1);
  font-size: var(--text-sm); color: var(--ink);
  display: flex; align-items: center; gap: .4rem; flex-wrap: wrap;
}
.sidebar-user .logout { margin-left: auto; color: var(--brand); text-decoration: none; font-weight: 600; }

/* topbar dell'app: visibile solo su mobile (hamburger + brand) */
.has-sidebar .topbar { display: none; }
.navtoggle {
  text-decoration: none; color: var(--ink); font-size: 1.4rem; line-height: 1;
  padding: .1rem .4rem; border-radius: var(--radius-sm);
}
.brand-mini { font-weight: 800; color: var(--brand); text-decoration: none; }

/* shell "plain" (login) e portale: nessuna sidebar, topbar piena */
.topbar {
  display: flex; align-items: center; flex-wrap: wrap;
  column-gap: 1.5rem; row-gap: .5rem;
  background: var(--card); border-bottom: 1px solid var(--line);
  padding: .7rem 1.5rem;
}
.topbar.topbar-plain { justify-content: center; }
.brand { font-weight: 800; font-size: 1.15rem; color: var(--brand); text-decoration: none; }

/* legacy: vecchio menu orizzontale (portale/compat) */
.topbar nav { order: 10; flex-basis: 100%; }
.topbar nav a { color: var(--ink); text-decoration: none; margin-right: 1rem; }
.topbar nav a:hover { color: var(--brand); }
.userbox { margin-left: auto; font-size: .85rem; color: var(--ink); white-space: nowrap; }
.userbox a { color: var(--brand); text-decoration: none; }

/* tendine legacy (CSS puro) — non più usate dalla sidebar ma mantenute */
.navgroup { position: relative; display: inline-block; margin-right: 1rem; }
.navgroup > .navbtn { background:none;border:none;padding:0;margin:0;cursor:pointer;color:var(--ink);font:inherit; }
.navgroup > .navbtn:hover { color: var(--brand); }
.navgroup .navpanel {
  display:none; position:absolute; top:100%; left:0; z-index:50;
  background:var(--card); border:1px solid var(--line); border-radius:8px;
  box-shadow:var(--shadow-md); padding:.35rem; min-width:12rem;
}
.navgroup:hover .navpanel, .navgroup:focus-within .navpanel { display:block; }
.navgroup .navpanel a { display:block; margin:0; padding:.4rem .6rem; border-radius:6px; white-space:nowrap; }
.navgroup .navpanel a:hover { background:#eef3fb; color:var(--brand); }

/* ====================== CONTENUTO ====================== */
main { max-width: 64rem; margin: var(--space-5) auto; padding: 0 var(--space-5); }
footer { max-width: 64rem; margin: var(--space-6) auto; padding: var(--space-4) var(--space-5); color: var(--muted); font-size: var(--text-sm); border-top: 1px solid var(--line); }

h1 { font-size: var(--text-xl); margin: 0; letter-spacing: -.01em; }
h2 { letter-spacing: -.005em; }
.page-head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); margin-bottom: var(--space-4); flex-wrap: wrap; }
.muted { color: var(--muted); }
.empty {
  color: var(--muted); padding: var(--space-6); text-align: center;
  background: var(--card); border: 1px dashed var(--line-strong); border-radius: var(--radius);
}
.empty .ic { font-size: 2rem; display: block; margin-bottom: var(--space-2); opacity: .8; }
.empty h3 { margin: var(--space-2) 0 var(--space-1); color: var(--ink); font-size: var(--text-lg); }

/* bottoni */
.btn {
  display: inline-flex; align-items: center; gap: .4rem;
  background: var(--brand); color: #fff; text-decoration: none;
  padding: .5rem .9rem; border-radius: var(--radius-sm); border: 1px solid transparent;
  font-size: .92rem; font-weight: 600; cursor: pointer; line-height: 1.2;
  transition: filter .1s ease, box-shadow .1s ease;
}
.btn:hover { filter: brightness(1.06); box-shadow: var(--shadow-sm); }
.btn.secondary, .btn.ghost { background: #fff; color: var(--ink); border: 1px solid var(--line-strong); }
.btn.secondary:hover, .btn.ghost:hover { background: #f6f8fb; filter: none; }
.btn.affitti { background: var(--accent); }
.btn.danger { background: var(--ko); }

/* tabella dati densa */
table.grid {
  width: 100%; border-collapse: collapse; background: var(--card);
  border-radius: var(--radius); overflow: hidden;
  box-shadow: var(--shadow-sm); border: 1px solid var(--line);
}
table.grid th, table.grid td { text-align: left; padding: .55rem .8rem; border-bottom: 1px solid var(--line); }
table.grid th {
  background: #f7f9fc; font-size: var(--text-xs); text-transform: uppercase;
  letter-spacing: .03em; color: var(--muted); font-weight: 700;
  position: sticky; top: 0; z-index: 1;
}
table.grid td.num, table.grid th.num { text-align: right; font-variant-numeric: tabular-nums; }
table.grid tbody tr:hover { background: var(--brand-50); }
table.grid tr:last-child td { border-bottom: none; }

/* card */
.card { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: var(--space-5); margin-bottom: var(--space-4); box-shadow: var(--shadow-sm); }
.card h2 { margin-top: 0; font-size: 1.05rem; }
dl.meta { display: grid; grid-template-columns: max-content 1fr; gap: .3rem 1.2rem; margin: 0; }
dl.meta dt { color: var(--muted); }
dl.meta dd { margin: 0; }

/* badge di stato */
.badge { display: inline-flex; align-items: center; gap: .25rem; padding: .15rem .55rem; border-radius: var(--radius-pill); font-size: .76rem; font-weight: 600; }
.badge.ok   { background: var(--ok-bg);   color: var(--ok); }
.badge.ko   { background: var(--ko-bg);   color: var(--ko); }
.badge.warn { background: var(--warn-bg); color: var(--warn); }
.badge.info { background: var(--info-bg); color: var(--info); }
.badge.muted{ background: #eef1f4;        color: var(--muted); }

.livello-head { margin: 1.4rem 0 .5rem; font-size: .9rem; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }

/* form */
form.row-form { display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; }
form.row-form select, form.row-form input { padding: .35rem .45rem; border: 1px solid var(--line-strong); border-radius: var(--radius-sm); font-size: .85rem; background: #fff; }
form.stack { display: grid; gap: .9rem; max-width: 40rem; }
form.stack label { display: grid; gap: .25rem; font-size: .9rem; }
form.stack input, form.stack select, form.stack textarea { padding: .55rem; border: 1px solid var(--line-strong); border-radius: var(--radius-sm); font: inherit; background: #fff; }
form.stack input:focus, form.stack select:focus, form.stack textarea:focus { border-color: var(--brand); }
form.stack .two { display: grid; grid-template-columns: 1fr 1fr; gap: .9rem; }
form.stack .actions { display: flex; gap: .6rem; margin-top: .4rem; }

.summary { display: flex; gap: .6rem; flex-wrap: wrap; margin: .3rem 0 1rem; align-items: center; }

/* ===== barra di contesto "immobile selezionato" ===== */
.ctxbar {
  background: var(--area-50); border-bottom: 1px solid var(--line);
  padding: .5rem 1.5rem; display: flex; align-items: center; gap: .8rem; flex-wrap: wrap;
}
.ctxbar .ctxlabel { color: var(--muted); font-size: .85rem; }
.ctxbar b { color: var(--area); }
.ctxnav { display: flex; gap: .3rem; flex-wrap: wrap; margin-left: auto; }
.ctxnav a { text-decoration: none; color: var(--ink); font-size: .88rem; padding: .25rem .6rem; border-radius: var(--radius-sm); }
.ctxnav a:hover { background: #fff; }
.ctxnav a.ctxclear { color: var(--ko); }
.ctxgrp { display: inline-flex; align-items: center; gap: .12rem; padding-right: .5rem; margin-right: .3rem; border-right: 1px solid var(--line-strong); }
.ctxglab { font-size: .68rem; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); margin-right: .25rem; }
.ctxgrp-aff .ctxglab { color: var(--accent-600); }
.ctxgrp-aff a:hover { background: var(--accent-50); }

/* ===== dashboard tiles ===== */
.tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr)); gap: .8rem; margin-bottom: .5rem; }
.tile { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 1rem 1.1rem; box-shadow: var(--shadow-sm); transition: box-shadow .12s ease, border-color .12s ease, transform .12s ease; }
.tile-val { font-size: 1.6rem; font-weight: 800; color: var(--ink); letter-spacing: -.01em; }
.tile-lab { color: var(--muted); font-size: .85rem; margin-top: .2rem; }
.tile-link { text-decoration: none; }
.tile-link:hover .tile { border-color: var(--brand); box-shadow: var(--shadow-md); transform: translateY(-1px); }
.tile.ok   { border-left: 4px solid var(--ok); }
.tile.warn { border-left: 4px solid var(--warn); }
.tile.ko   { border-left: 4px solid var(--ko); }

/* ====================== RESPONSIVE ====================== */
@media (max-width: 900px) {
  body.has-sidebar { padding-left: 0; }
  .sidebar {
    transform: translateX(-100%);
    transition: transform .2s ease;
    box-shadow: var(--shadow-lg);
  }
  .sidebar:target { transform: none; }
  .has-sidebar .topbar { display: flex; gap: .8rem; }
  .ctxnav { margin-left: 0; }
}