/* Tema chiaro (default) */
:root{
  /* Brand */
  --brand:#d14124;
  --brand-700:#a8341a;
  --brand-50: rgba(209,65,36,.08);

  /* Testo */
  --text:#15181c;
  --text-muted:#565b61;

  /* Superfici */
  --bg:#f1f3f5;
  --surface:#ffffff;
  --surface-2:#e6eaee;
  --surface-alt:#eef1f4;
  --top-bar-bg:#fbfcfd;

  /* Bordi e focus */
  --border:#d0d4d9;
  --focus:#2266ff;

  /* Link */
  --link:#a8341a;
  --link-hover:#7e2812;

  /* Stato */
  --ok:#117a3c;
  --bad:#b00020;
  --warn:#7a5500;
  --pill-ok-bg:#e3f5e8;
  --pill-bad-bg:#fde7e7;
  --pill-warn-bg:#fff5d9;

  /* Tipografia */
  --ff: system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans","Liberation Sans",sans-serif;
  --mono: ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono",monospace;
  --fs-1: clamp(.95rem, .92rem + .2vw, 1rem);
  --fs-2: 1.125rem; --fs-3: 1.25rem; --fs-4: 1.5rem; --fs-5: 1.875rem;

  /* Geometria */
  --radius: 12px; --radius-sm: 8px;
  --shadow: 0 1px 2px rgba(15,23,42,.06), 0 4px 14px rgba(15,23,42,.06);
  --sp-1:.25rem; --sp-2:.5rem; --sp-3:.75rem; --sp-4:1rem; --sp-5:1.25rem; --sp-6:1.5rem; --sp-8:2rem;
  --w-col-label: 9.5rem;
  --w-col-name:  22rem;

  /* da aggiornare se cambia il padding di .top-bar */
  --topbar-height: 3.5rem;
}

/* Tema scuro */
:root[data-theme="dark"] {
  /* Brand */
  --brand:#e9573b;
  --brand-700:#c0411f;
  --brand-50: rgba(233,87,59,.16);

  /* Testo */
  --text:#eceef2;
  --text-muted:#a3aab5;

  /* Superfici */
  --bg:#14171c;
  --surface:#1d2027;
  --surface-2:#262a32;
  --surface-alt:#2a2e37;
  --top-bar-bg:#1a1d23;

  /* Bordi e focus */
  --border:#3a3f4b;
  --focus:#6da3ff;

  /* Link */
  --link:#ffa07f;
  --link-hover:#ffc1ab;

  /* Stato */
  --ok:#4ade80;
  --bad:#ff7a85;
  --warn:#fbbf24;
  --pill-ok-bg: rgba(74,222,128,.14);
  --pill-bad-bg: rgba(255,122,133,.15);
  --pill-warn-bg: rgba(251,191,36,.16);

  /* Ombre */
  --shadow: 0 1px 2px rgba(0,0,0,.5), 0 6px 18px rgba(0,0,0,.45);

  color-scheme: dark;
}

/* transizione al cambio tema */
html, body, .sidebar, .top-bar, .card, .btn, .table, input, select, textarea, .news-box, .alert, .role-badge, .pill, .status {
  transition: background-color .2s ease, color .2s ease, border-color .2s ease;
}
@media (prefers-reduced-motion: reduce){
  html, body, .sidebar, .top-bar, .card, .btn, .table, input, select, textarea, .news-box, .alert, .role-badge, .pill, .status {
    transition: none;
  }
}

/* Link nel testo */
a { color: var(--link); }
a:hover { color: var(--link-hover); }
:root[data-theme="dark"] a { color: var(--link); }
:root[data-theme="dark"] a:hover { color: var(--link-hover); }

/* Bottoni brand: testo bianco */
.btn--primary,
.btn--bad,
.nav-list .btn.is-current,
.nav-list .btn[aria-current="page"],
.nav-tiles .tile,
.nav-tiles .tile strong,
.nav-tiles .tile .tile-sub {
  color:#fff;
}

/* Voce attiva della navbar */
.nav-list [aria-current="page"],
.nav-list .btn.is-current[aria-disabled="true"] {
  background: var(--brand);
  border-color: color-mix(in oklab, var(--brand) 75%, black);
  color: #fff;
  opacity: 1;
}

/* Dark: correzioni di contrasto */
:root[data-theme="dark"] .btn { color: var(--text); }
:root[data-theme="dark"] .nav-list .btn {
  background: var(--surface-2);
  border-color: var(--border);
  color: var(--text);
}
:root[data-theme="dark"] .muted,
:root[data-theme="dark"] .site-title .site-subtitle,
/* Breadcrumb in dark: eredita il colore del parent */
:root[data-theme="dark"] .breadcrumb a,
:root[data-theme="dark"] .breadcrumb a:hover { color: inherit; }
/* Logo in dark: resta rosso */
:root[data-theme="dark"] .top-bar .brand,
:root[data-theme="dark"] .top-bar .brand:hover { color: var(--brand); }
/* My Account: sempre rosso brand */
.top-bar-right .account-link,
.top-bar-right .account-link:hover { color: var(--brand); }
:root[data-theme="dark"] .top-bar-right .account-link,
:root[data-theme="dark"] .top-bar-right .account-link:hover { color: var(--brand); }
:root[data-theme="dark"] .badge {
  background: var(--surface-2);
  color: var(--text);
  border: 1px solid var(--border);
}
:root[data-theme="dark"] .table thead th,
:root[data-theme="dark"] .table.table--freeze thead th,
:root[data-theme="dark"] .table.table--freeze th[scope="row"],
:root[data-theme="dark"] .table.table--freeze .col-sticky-left,
:root[data-theme="dark"] .table.table--freeze .col-sticky-left-2 {
  background: var(--surface);
  color: var(--text);
  border-color: var(--border);
  box-shadow: 1px 0 0 var(--border);
}
:root[data-theme="dark"] .alert {
  background: var(--surface-2);
  color: var(--text);
  border-color: var(--border);
}
:root[data-theme="dark"] .alert-error {
  color: var(--bad);
  background: var(--pill-bad-bg);
  border-color: color-mix(in oklab, var(--bad) 25%, var(--border));
}
:root[data-theme="dark"] input,
:root[data-theme="dark"] select,
:root[data-theme="dark"] textarea {
  background: var(--surface);
  color: var(--text);
  border-color: var(--border);
}
:root[data-theme="dark"] label { color: var(--text); }

/* Toolbar in dark: testo bianco */
:root[data-theme="dark"] .toolbar .btn--search,
:root[data-theme="dark"] .toolbar .btn--primary { color:#fff; }

/* Toggle tema */
.theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .4rem;
  min-width: 2.4rem;
  height: 2.4rem;
  padding: 0 .7rem;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--surface-2);
  color: var(--text);
  cursor: pointer;
  font-weight: 600;
  font-size: .9rem;
  line-height: 1;
  transition: background-color .15s ease, border-color .15s ease, color .15s ease, transform .05s ease;
}
.theme-toggle:hover {
  background: color-mix(in oklab, var(--surface-2) 80%, var(--brand));
  border-color: var(--brand);
  transform: translateY(-1px);
}
.theme-toggle:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
}
.theme-toggle .theme-toggle__icon {
  width: 1.05rem;
  height: 1.05rem;
  display: inline-block;
  flex: 0 0 auto;
}

/* Reset */
*{box-sizing:border-box}
html,body{height:100%}
html{scroll-behavior:smooth}
body{
  margin:0; font-family: system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans","Liberation Sans",sans-serif; font-size:var(--fs-1); line-height:1.5;
  color:var(--text); background:var(--bg);
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
img,svg,video{max-width:100%; height:auto}
a{color:inherit; text-decoration:none}
a:hover{text-decoration:underline}
:focus-visible{outline:2px solid var(--focus); outline-offset:2px}

/* Layout principale */
.app-wrapper{
  --sidebar-width: 280px;
  min-height: 100vh;
  display: grid;
  grid-template-columns: var(--sidebar-width) minmax(0, 1fr);
  /* riga 1 = top-bar, riga 2 = sidebar + contenuto */
  grid-template-rows: var(--topbar-height) 1fr;
  background: var(--bg);
  /* animazione apertura/chiusura sidebar */
  transition: grid-template-columns 0.13s ease;
}
@media (prefers-reduced-motion: reduce){
  .app-wrapper{ transition: none; }
}
.app-wrapper.is-sidebar-collapsed{
  --sidebar-width: 64px;
}
.sidebar{
  grid-column: 1;
  grid-row: 2;
  position: sticky;
  top: var(--topbar-height);
  align-self: start;
  /* scroll interno se le voci non ci stanno */
  height: calc(100vh - var(--topbar-height));
  overflow-y: auto;
  padding: var(--sp-5) var(--sp-5);
  border-right: 1px solid var(--border);
  background: var(--surface);
  transition: padding 0.13s ease;
}
.sidebar.is-collapsed{
  padding: var(--sp-6) var(--sp-2);
}
.sidebar-header{
  display: flex;
  align-items: center;
  /* toggle a destra, al centro a sidebar chiusa */
  justify-content: flex-end;
  gap: var(--sp-2);
  margin-bottom: var(--sp-4);
}
.sidebar.is-collapsed .sidebar-header{
  justify-content: center;
}
.sidebar-toggle{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: transparent;
  color: var(--text);
  cursor: pointer;
  flex-shrink: 0;
}
.sidebar-toggle:hover{
  background: var(--surface-2);
}
.sidebar-nav .nav-list{
  flex-direction: column;
  align-items: stretch;
  gap: .4rem;
  list-style: none;
  padding: 0;
  margin: 0;
}
.sidebar-nav .nav-list > li{
  width: 100%;
  display: block;
}
.sidebar-nav .nav-list .btn{
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: .65rem;
  width: 100%;
  text-align: left;
  padding: .6rem .85rem;
  font-size: .95rem;
  font-weight: 600;
  line-height: 1.25;
  min-height: 2.5rem;
  border-radius: 10px;
}
.sidebar-nav .nav-list .btn .nav-icon{
  flex-shrink: 0;
}
/* etichette su una riga, troncate con … */
.sidebar-nav .nav-list .nav-label{
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.sidebar.is-collapsed .nav-list .btn{
  justify-content: center;
  padding: .6rem 0;
  gap: 0;
}
.sidebar.is-collapsed .nav-list .nav-label{
  display: none;
}
.sidebar-nav .nav-list .nav-divider-label{
  margin-top: .5rem;
  padding-top: .5rem;
  border-top: 1px solid var(--border);
  color: var(--text-muted);
  font-size: .85rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
}
.sidebar.is-collapsed .nav-list .nav-divider-label{
  font-size: 0;
  padding-top: .5rem;
  margin-top: .5rem;
}
.main-layout{
  grid-column: 2;
  grid-row: 2;
  min-width: 0;
  display: flex;
  flex-direction: column;
}
.top-bar{
  /* tutta la larghezza: il logo resta sempre visibile */
  grid-column: 1 / -1;
  grid-row: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: var(--topbar-height);
  padding: var(--sp-2) var(--sp-6);
  border-bottom: 1px solid var(--border);
  background: var(--top-bar-bg);
  position: sticky;
  top: 0;
  z-index: 20;
}
.top-bar-left{
  display: flex;
  align-items: center;
  gap: 0;
  min-width: 0;
}
/* Logo: largo quanto la sidebar, così il breadcrumb parte allineato */
.top-bar .brand{
  flex-shrink: 0;
  width: calc(var(--sidebar-width) - var(--sp-6));
  min-width: max-content;
  padding-right: var(--sp-4);
  font-size: 1.4rem;
  font-weight: 800;
  line-height: 1.1;
  color: var(--brand);
  text-decoration: none;
  white-space: nowrap;
}
.top-bar .brand:hover{
  text-decoration: none;
  opacity: 0.85;
}
.top-bar-right{
  display: flex;
  align-items: center;
  gap: .75rem;
  flex-wrap: wrap;
}
.role-badge{
  display: inline-flex;
  align-items: center;
  padding: .35rem .7rem;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--surface-2);
  font-size: .875rem;
  font-weight: 700;
}
.main-container{
  padding: var(--sp-3) var(--sp-6) var(--sp-6);
}

/* pagine strette centrate */
.container{ margin-left:auto; margin-right:auto; }

/* Menu mobile (sotto i 960px) */
.nav-burger,
.sidebar-backdrop{ display: none; }

/* Responsive */
@media (max-width: 960px){
  .app-wrapper{
    grid-template-columns: 1fr;
    grid-template-rows: auto 1fr;
  }
  /* sidebar mobile: pannello che scorre da sinistra */
  .sidebar{
    grid-column: auto;
    grid-row: auto;
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    width: min(300px, 85vw);
    height: 100%;
    min-height: 0;
    padding: var(--sp-4);
    border-right: 1px solid var(--border);
    box-shadow: 8px 0 24px rgba(0, 0, 0, 0.18);
    z-index: 2000;
    transform: translateX(-105%);
    visibility: hidden;
    transition: transform .2s ease, visibility .2s;
  }
  .sidebar.is-open{
    transform: translateX(0);
    visibility: visible;
  }
  .sidebar-backdrop{
    display: block;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.45);
    z-index: 1999;
  }
  .nav-burger{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.4rem;
    height: 2.4rem;
    flex-shrink: 0;
    margin-right: var(--sp-3);
    border: 1px solid var(--border);
    border-radius: 8px;
    background: transparent;
    color: var(--text);
    cursor: pointer;
  }
  /* su mobile niente sidebar ristretta */
  .sidebar-header{
    display: none;
  }
  .sidebar.is-collapsed{
    padding: var(--sp-4);
  }
  .sidebar.is-collapsed .nav-list .nav-label{
    display: inline;
  }
  .sidebar.is-collapsed .nav-list .btn{
    width: 100%;
    justify-content: flex-start;
    padding: .6rem .85rem;
    gap: .65rem;
  }
  .main-layout{
    grid-column: 1;
    grid-row: auto;
  }
  .top-bar{
    grid-column: 1;
    position: relative;
    top: auto;
  }
  .top-bar .brand{
    width: auto;
  }
  .top-bar-left{
    flex-wrap: wrap;
  }
}

@media (max-width: 960px) and (prefers-reduced-motion: reduce){
  .sidebar{ transition: none; }
}

/* Pagine pubbliche / auth */
.page-shell{
  max-width: 1100px;
  margin: 0 auto;
}
.page-hero{
  text-align: center;
  margin-bottom: 2rem;
}
.page-actions{
  display: flex;
  justify-content: center;
  gap: .75rem;
  flex-wrap: wrap;
  margin-top: 1.25rem;
}
.page-title{
  margin: 0 0 .75rem;
  font-size: clamp(2rem, 1.4rem + 2vw, 3rem);
}
.page-lead{
  margin: 0;
  color: var(--text-muted);
  font-size: 1.05rem;
}
.page-grid{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.5rem;
}
.page-card{
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.page-card-footer{
  margin-top: auto;
  padding: var(--sp-4);
  border-top: 1px solid var(--border);
  background: var(--surface-2);
}
.page-placeholder{
  min-height: 22rem;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  margin-bottom: 2rem;
}
.page-muted-block{
  color: var(--text-muted);
}
.auth-shell{
  min-height: calc(100vh - var(--topbar-height) - 2rem);
  display: grid;
  place-items: center;
  padding: 2rem 1rem;
}
.auth-card{
  width: min(100%, 420px);
}
.auth-title{
  margin: 0 0 1rem;
}
.auth-actions{
  margin-top: 1.25rem;
}
.auth-secondary{
  margin-top: 1rem;
  text-align: center;
  font-size: .9rem;
}
.auth-secondary a{
  color: var(--brand);
  text-decoration: none;
}
.auth-secondary a:hover{
  text-decoration: underline;
}
.dashboard-copy{
  margin-top: .35rem;
}
.stats-grid{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
  margin-top: 1rem;
}
.stat-card{
  text-align: center;
}
.stat-label{
  margin: 0 0 .5rem;
  color: var(--text-muted);
  font-size: .95rem;
}
.stat-value{
  font-size: clamp(2rem, 1.3rem + 2vw, 3rem);
  font-weight: 800;
  color: var(--brand);
}
.dashboard-columns{
  display: grid;
  grid-template-columns: 1.2fr .8fr;
  gap: 1.5rem;
  align-items: start;
}
.dashboard-section{
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

@media (max-width: 768px){
  .page-grid,
  .stats-grid,
  .dashboard-columns{
    grid-template-columns: 1fr;
  }
  .main-container{
    padding: var(--sp-4);
  }
  .top-bar{
    flex-direction: column;
    align-items: flex-start;
  }
  /* barra pubblica: solo due tasti, sta su una riga */
  .top-bar.top-bar--public{
    flex-direction: row;
    align-items: center;
  }
}

/* Header / navbar / breadcrumb */
.site-header .container{
  max-width: 80%;
  margin:0 auto;
  padding:.75rem var(--sp-4) .75rem; }

.site-title{ font-size:clamp(1.6rem,1.1rem + 2vw,2.4rem); margin:0; }
.site-title .site-subtitle{
  display: block;
  font-size: 1rem;
  color: var(--text-muted);
  font-weight: 500;
  margin-top: .25rem;
  margin-bottom: 1rem;
}

.nav {
  margin-top: .5rem;
  margin-bottom: 1.5rem;
}

.nav-list {
  list-style: none;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: .5rem;
  margin: 0;
  padding: 0;
  justify-content: flex-start;
}

.nav-list .nav-spacer {
  flex: 1 1 auto;
  min-width: 2rem;
  height: 1.5rem;
  margin-left: .75rem;
  padding-left: .75rem;
  border-left: 1px solid var(--border);
}

.nav-list .nav-session {
  display: flex;
  align-items: center;
  gap: .75rem;
}

.nav-list .nav-session .btn {
  min-width: 5rem;
  text-align: center;
}

.nav-list > li { margin: 0; padding: 0; }
.nav-list form { display: inline; margin: 0; }
.nav-list .btn {
  padding: .45rem .7rem;
  border-radius: 10px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  font-weight: 600;
  text-decoration: none;
}
.nav-list .btn:hover {
  text-decoration: none;
  transform: translateY(-1px);
}
.nav-list .btn.is-current,
.nav-list .btn[aria-current="page"] {
  background-color: var(--brand) !important;
  color: #ffffff !important;
  border-color: color-mix(in oklab, var(--brand) 75%, black) !important;
  opacity: 1 !important;
  filter: none !important;
  text-decoration: none !important;
}

.nav-list .btn.is-current:hover,
.nav-list .btn[aria-current="page"]:hover {
  background-color: var(--brand-700) !important;
  color: #ffffff !important;
}

.breadcrumb {
  margin-top: .5rem;
  /* breadcrumb: nero in light, rosso in dark */
  color: var(--text);
}
:root[data-theme="dark"] .breadcrumb {
  color: var(--brand);
}

.breadcrumb ol {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.breadcrumb li {
  display: flex;
  align-items: center;
}

.breadcrumb li:not(:last-child)::after {
  content: "/";
  margin-left: 0.5rem;
  opacity: 0.5;
}

.breadcrumb a {
  color: inherit;
  text-decoration: none;
}

.breadcrumb a:hover {
  text-decoration: underline;
}

.breadcrumb li:last-child {
  font-weight: 600;
  pointer-events: none;
}

/* Layout e utility */

body.page-graph .card {
  max-width: 1100px;
  margin-left: auto;
  margin-right: auto;
}

.main-title{ font-size:var(--fs-5); margin:0 0 var(--sp-4); }
.muted{ color:var(--text-muted) }
.nowrap{ white-space:nowrap }
.w-1ch{width:1ch} .w-3ch{width:3ch} .w-5ch{width:5ch} .w-10ch{width:10ch}
.mt-1{margin-top:var(--sp-4)} .mb-1{margin-bottom:var(--sp-4)}
.mt-2{margin-top:var(--sp-6)} .mb-2{margin-bottom:var(--sp-6)}
.fit{ width:100% }
.sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden;
  clip:rect(0,0,0,0); white-space:nowrap; border:0;
}

/* Grid */
.grid{display:grid; gap:var(--sp-4)}
.grid-2{grid-template-columns:1fr 1fr}
.grid-3{grid-template-columns:repeat(3, 1fr)}
@media (max-width: 768px){
  .grid-2, .grid-3{ grid-template-columns: 1fr; }
}

/* form + aside: sotto i 900px l'aside va sotto */
.form-layout{
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px;
  gap: var(--form-aside-gap, 2rem);
}
@media (max-width: 900px){
  .form-layout{ grid-template-columns: 1fr; }
}

/* Filter card richiudibile (solo sotto i 960px) */
.filter-card-toggle{ display: none; }
@media (max-width: 960px){
  .filter-card-toggle{
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
    width: 100%;
    min-height: 2.2rem;
    padding: .1rem 0;
    background: transparent;
    border: none;
    color: var(--text);
    font: inherit;
    font-weight: 700;
    cursor: pointer;
    text-align: left;
  }
  .filter-card.is-collapsed .filter-card-body{ display: none; }
  .filter-card:not(.is-collapsed) .filter-card-body{ margin-top: .35rem; }
}
.filter-card-toggle .filter-count{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.5rem;
  height: 1.5rem;
  padding: 0 .45rem;
  border-radius: 999px;
  background: var(--brand);
  color: #fff;
  font-size: .8rem;
}

/* Split + Sidebar */
.split{display:grid; grid-template-columns:280px 1fr; gap:var(--sp-6)}
aside.card.sidebar{ position:sticky; top:var(--sp-6); max-height:calc(100dvh - 2*var(--sp-6)); overflow:auto }
aside.card.sidebar h3{ margin-top:0 }
aside.card.sidebar ul{ list-style:none; margin:0; padding:0 }
aside.card.sidebar li{ display:flex; align-items:center; gap:.5rem; padding:.25rem 0 }
aside.card.sidebar a{ color:var(--text); text-decoration:none }
aside.card.sidebar a:hover{ text-decoration:underline }

/* Card */
.card{
  background:var(--surface); border:1px solid var(--border); border-radius:var(--radius);
  padding:var(--sp-5); box-shadow:var(--shadow);
}
.card + .card{ margin-top:var(--sp-4) }
/* card affiancate: lo spazio lo dà il gap */
:is(.page-grid, .taxonomy-columns, .examples-grid) > .card + .card{ margin-top:0 }
.card h2{ font-size:var(--fs-4); margin:.25rem 0 var(--sp-3) }
.card h3{ font-size:var(--fs-3); margin:.25rem 0 var(--sp-3) }

/* Bottoni */
.btn{
  --btn-bg:var(--surface-2); --btn-fg:var(--text); --btn-bd:var(--border);
  appearance:none; display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  padding:.55rem .9rem; border-radius:10px; border:1px solid var(--btn-bd);
  background:var(--btn-bg); color:var(--btn-fg); cursor:pointer; font-weight:600;
  transition:transform .04s ease, background .15s ease, border-color .15s ease;
  line-height:1.1; text-decoration:none;
}

button.btn {
  font-family: inherit;
  font-size: inherit;
  line-height: 1.1;
  padding: .55rem .9rem;
  border: 1px solid var(--btn-bd);
  border-radius: 10px;
  background: var(--btn-bg);
  color: var(--btn-fg);
  cursor: pointer;
  appearance: none;
}

.btn:hover{ transform:translateY(-1px) }
.btn:active{ transform:translateY(0) }
/* disabilitato: grigio leggibile */
.btn[disabled], .btn[aria-disabled="true"]{
  pointer-events:none;
  cursor:not-allowed;
  opacity:.85;
  filter:none;
  --btn-bg:var(--surface-2);
  --btn-fg:var(--text-muted);
  --btn-bd:var(--border);
}
.btn--primary{ --btn-bg:var(--brand); --btn-fg:#fff; --btn-bd:color-mix(in oklab, var(--brand) 75%, black) }
.btn--bad{
  --btn-bg:var(--brand);
  --btn-fg:#fff;
  --btn-bd:color-mix(in oklab, var(--brand) 75%, black);
}
.btn.btn-link{ background:transparent; border-color:transparent; padding:0 }

/* pallino giallo fisso: parametro con sezioni da completare (lista parametri, colonna To do) */
.todo-dot{
  display:inline-block; width:.75rem; height:.75rem; border-radius:50%;
  background:#f5c518; box-shadow:0 0 0 1px rgba(0,0,0,.18);
  cursor:help; vertical-align:middle;
}

/* pallino giallo: un altro utente sta modificando */
.presence-dot{
  width:.7rem; height:.7rem; border-radius:50%;
  background:#f5c518; flex:0 0 auto;
  animation:presence-blink 1s ease-in-out infinite;
}
@keyframes presence-blink{
  0%,100%{ opacity:1; box-shadow:0 0 0 0 rgba(245,197,24,.55); }
  50%{ opacity:.35; box-shadow:0 0 0 5px rgba(245,197,24,0); }
}
@media (prefers-reduced-motion: reduce){ .presence-dot{ animation:none } }

/* Dashboard tiles */
.dashboard-hero{ margin:0 0 1rem; text-align:center }
.dashboard-hero h1{ font-size:var(--fs-5); margin:0 0 .25rem }
.dashboard-hero .muted{ font-size:1rem }

.nav-tiles{ display:grid; gap:.9rem; justify-content:center; margin-top:1rem }
.nav-tiles .tile{
  background:var(--brand); color:#fff; border-color:color-mix(in oklab, var(--brand) 75%, black);
  min-width:min(90vw,520px); max-width:520px; width:100%; border-radius:16px;
  padding:.95rem 1.25rem; box-shadow:0 6px 18px rgba(209,65,36,.18);
  display:flex; align-items:center; justify-content:space-between; gap:.75rem;
}
.nav-tiles .tile:hover{ text-decoration:none; transform:translateY(-1px); background:var(--brand-700); border-color:color-mix(in oklab, var(--brand-700) 75%, black) }
.nav-tiles .tile strong{ font-weight:700; letter-spacing:.2px }
.nav-tiles .tile .tile-sub{ opacity:.9; font-weight:500; font-size:.95rem }

.mt-2{ margin-top:var(--sp-6) }

/* Form */
form{margin:0}
.form-row{display:flex; flex-direction:column; gap:.35rem; margin-bottom:var(--sp-4)}
label{font-weight:600}
input,select,textarea{
  width:100%; padding:.6rem .7rem; border-radius:10px; border:1px solid var(--border);
  background:var(--surface); color:var(--text); box-shadow:0 1px 0 rgba(0,0,0,.02) inset;
}
textarea{min-height:5.5rem; resize:vertical}
input[type="checkbox"], input[type="radio"]{width:auto}
input:focus-visible,select:focus-visible,textarea:focus-visible{ outline:2px solid var(--focus); outline-offset:2px }
.field-error,.error{
  background:var(--pill-bad-bg);
  border:1px solid color-mix(in oklab, var(--bad) 25%, var(--border));
  color:var(--bad); padding:.5rem .75rem; border-radius:10px;
}

/* Tabelle */
.table{
  width:100%;
  border:1px solid var(--border);
  border-radius:var(--radius);
  background:var(--surface);
}

.table:not(.table--freeze){
  border-collapse: collapse;
  border-spacing: 0;
}

.table thead th{ text-align:left; font-weight:700; padding:.7rem .8rem; border-bottom:1px solid var(--border); background:var(--surface-2) }
.table tbody td{ padding:.65rem .8rem; border-bottom:1px solid var(--border); vertical-align:top }
.table tbody tr:nth-child(odd){ background:color-mix(in oklab, var(--surface) 80%, var(--surface-2)) }
.table tbody tr:last-child td{ border-bottom:0 }

/* Table A: scroll e intestazioni fisse */

.table-container { padding: 0; }
.table-scroll{
  overflow: auto;
  max-height: 70vh;
  -webkit-overflow-scrolling: touch;
  border-radius: var(--radius);
}

/* header fisso */
.table.table--freeze thead th{
  position: sticky;
  top: 0;
  z-index: 5;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
}

/* prima colonna fissa */
.table.table--freeze th[scope="row"]{
  position: sticky;
  left: 0;
  z-index: 4;
  background: var(--surface);
  box-shadow: 1px 0 0 var(--border);
}

.table.table--freeze .col-sticky-left{
  position: sticky;
  left: 0;
  z-index: 4;
  background: var(--surface);
  box-shadow: 1px 0 0 var(--border);
  min-width: var(--w-col-label);
  width: var(--w-col-label);
}

/* seconda colonna fissa */
.table.table--freeze .col-sticky-left-2{
  position: sticky;
  left: var(--w-col-label);
  z-index: 3;
  background: var(--surface);
  box-shadow: 1px 0 0 var(--border);
  min-width: var(--w-col-name);
  width: var(--w-col-name);
}

.table.table--freeze thead .col-sticky-left,
.table.table--freeze thead .col-sticky-left-2{
  z-index: 7;
}
.table.table--freeze col.w-label {
  width: var(--w-col-label);
}
.table.table--freeze col.w-name  {
  width: var(--w-col-name);
}

.table.table--freeze thead .col-sticky-left{
  left: 0;
  z-index: 6;
}

.table-scroll .table{
  width: max(100%, 900px);
  border-left: 1px solid var(--border);
  border-right: 1px solid var(--border);
  border-radius: 0;
}

.table-scroll{ background: linear-gradient(to right, transparent 30%, rgba(0,0,0,0.03) 100%) }

/* tabelle larghe: scroll orizzontale invece di allargare la pagina */
.table-responsive{
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* tabelle delle Instructions: scroll su schermi stretti */
@media (max-width: 960px){
  .instructions-view table{
    display: block;
    overflow-x: auto;
  }
}

/* Alert */
.alert{ padding:.6rem .8rem; border-radius:10px; background:var(--surface-2); border:1px solid var(--border) }
.alert-error{
  background:var(--pill-bad-bg);
  border-color:color-mix(in oklab, var(--bad) 25%, var(--border));
  color:var(--bad);
}

/* Stati */
.status{
  display:inline-flex; align-items:center; gap:.4rem;
  padding:.15rem .5rem; border-radius:999px; font-weight:600; font-size:.875rem;
  border:1px solid var(--border); background:var(--surface-2);
}
.status .dot{ width:.55rem; height:.55rem; border-radius:50%; display:inline-block }
.status.ok{ color:var(--ok); background:var(--pill-ok-bg); border-color:color-mix(in oklab, var(--ok) 25%, var(--border)) }
.status.bad{ color:var(--bad); background:var(--pill-bad-bg); border-color:color-mix(in oklab, var(--bad) 25%, var(--border)) }
.status.warn{ color:var(--warn); background:var(--pill-warn-bg); border-color:color-mix(in oklab, var(--warn) 25%, var(--border)) }

/* Paginazione */
.pagination{
  display:flex; gap:.25rem; flex-wrap:wrap; align-items:center; justify-content:flex-end; margin-top:var(--sp-4)
}
.pagination a,.pagination .current{
  display:inline-flex; align-items:center; justify-content:center; min-width:2rem; height:2rem; padding:0 .5rem;
  border:1px solid var(--border); border-radius:8px; background:var(--surface-2);
  text-decoration:none; color:var(--text); font-weight:600;
}
.pagination .current{ background:var(--brand); color:#fff; border-color:color-mix(in oklab, var(--brand) 75%, black) }
.pagination a:hover{ text-decoration:none; transform:translateY(-1px) }

/* Azioni riga */
.row-actions{
  display:flex;
  gap:.4rem;
  flex-wrap:wrap;
  align-items:center;
  justify-content:flex-end;
}
.row-actions .btn{ padding:.4rem .6rem }
.card > .toolbar{ margin-top:.35rem }
.card .toolbar + .muted{ margin-top:.25rem }
.grid .form-row textarea{ min-height:4.25rem }
[disabled],[aria-disabled="true"]{ filter:saturate(.2) brightness(.96) }
.table a.btn{ text-decoration:none }

.nav-list .btn.is-current[aria-disabled="true"] {
  background: var(--brand);
  border-color: color-mix(in oklab, var(--brand) 75%, black);
  color: #fff;
  filter: none;
  opacity: 1;
  cursor: default;
  pointer-events: none;
}
:root[data-theme="dark"] .nav-list .btn.is-current[aria-disabled="true"] {
  background: var(--brand);
  border-color: color-mix(in oklab, var(--brand) 75%, black);
  color: #fff;
  filter: none;
}

/* Toolbar  */
.toolbar{
  display:flex; align-items:flex-start; justify-content:space-between;
  gap: 1rem;
  margin-bottom: 1.75rem;
  flex-wrap: wrap;
}
/* Toolbar in dark */
:root[data-theme="dark"] .toolbar .btn--search,
:root[data-theme="dark"] .toolbar .btn--primary {
  color: #fff !important;
}

.toolbar__form{
  display:flex; align-items:center;
  gap: 0.65rem;
  flex: 1 1 560px;
  max-width: 680px;
}
.toolbar__add{
  flex: 1 0 100%;
  margin-top: 0.25rem;
}
.btn--wide{
  width: 100%;
  justify-content: center;
}

.toolbar input[type="search"]{
  padding: 0.65rem 0.9rem;
}

@media (max-width: 600px){
  .toolbar{ flex-direction: column; align-items: stretch; gap: 0.75rem; }
  .toolbar__form{ width: 100%; max-width: none; }
}
.back-to-top {
  position: fixed;
  bottom: 1.5rem;
  right: 1.5rem;
  background: var(--brand);
  color: #fff;
  border: none;
  border-radius: 50%;
  width: 2.8rem;
  height: 2.8rem;
  cursor: pointer;
  font-size: 1.4rem;
  box-shadow: 0 2px 8px rgba(0,0,0,.3);
  transition: opacity .2s ease, transform .1s ease;
  z-index: 2147483647;
}
.back-to-top:hover { opacity: .85; }
.back-to-top.is-hidden { display: none; }

/* Messaggi flash */
.flash-messages {
  margin: 1rem 0;
}

.alert {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: .75rem 1rem;
  border-radius: .5rem;
  margin-bottom: .5rem;
  border: 1px solid var(--border);
  font-weight: 500;
  line-height: 1.4;
}

.alert-info    { background: #e7f3ff; border-color: #b3d6ff; color: #084298; }
.alert-success { background: #e6f7e9; border-color: #b9e6c0; color: #0f5132; }
.alert-warning { background: #fff6d9; border-color: #ffe39c; color: #664d03; }
.alert-error   { background: #ffe8e8; border-color: #ffc1c1; color: #842029; }

.alert-close {
  background: none;
  border: 0;
  font-size: 1.2rem;
  font-weight: bold;
  color: inherit;
  cursor: pointer;
}

/* Dark */
:root[data-theme='dark'] .alert-info    { background:#12283b; color:#9ec5fe; }
:root[data-theme='dark'] .alert-success { background:#10291a; color:#b1dfbb; }
:root[data-theme='dark'] .alert-warning { background:#392f0a; color:#ffda6a; }
:root[data-theme='dark'] .alert-error   { background:#3b1818; color:#f5b3b3; }

/* Dashboard */
.dashboard-flex {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 1.5rem;
}

.dashboard-links-grid {
  flex: 0 1 480px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem 1rem;
  align-content: flex-start;
}

.dash-tile {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;

  min-height: 4rem;
  border-radius: 16px;
  font-weight: 700;
  font-size: 1rem;
  line-height: 1.2;

  background: var(--brand);
  color: #fff;
  border:1px solid color-mix(in oklab, var(--brand) 75%, black);
  box-shadow: 0 6px 18px rgba(209,65,36,.18);
  padding: .75rem 1rem;
  text-decoration: none;
  transition: transform .05s ease, background .15s ease;
}
.dash-tile:hover {
  text-decoration: none;
  background: var(--brand-700);
  border-color: color-mix(in oklab, var(--brand-700) 75%, black);
  transform: translateY(-1px);
}

.dash-tile-label {
  display: block;
  color: #fff;
  font-weight: 600;
  font-size: 1rem;
  letter-spacing: .02em;
}
/* Latest changes */

.news-box {
  flex: 1 1 260px;

  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: var(--sp-5);

  display: flex;
  flex-direction: column;
  max-width: 100%;
}

.news-box h3 {
  font-size: 1rem;
  margin-top: 0;
  margin-bottom: .5rem;
  font-weight: 600;
  flex: 0 0 auto;
}

.news-list {
  list-style: none;
  margin: 0;
  padding: 0;
  flex: 1 1 auto;
}

.news-item {
  border-bottom: 1px solid var(--border);
  padding: 0.6rem 0;
}
.news-item:last-child {
  border-bottom: none;
}

.news-item p.small {
  font-size: 0.85rem;
  margin: 0.4rem 0 0;
  color: var(--text);
}
.news-item .small {
  font-size: 0.85rem;
  color: var(--text-muted);
}

/* compatto: altezza limitata, niente scrollbar */
.news-box.collapsed .news-list {
  max-height: 180px;
  overflow-y: hidden;
}

/* espanso: scroll solo nella lista */
.news-box.expanded .news-list {
  max-height: 50vh;
  overflow-y: auto;
}

.news-toggle-row {
  flex: 0 0 auto;
  padding-top: .75rem;
  margin-top: .5rem;
  border-top: 1px solid var(--border);
  background: var(--surface);
  text-align: center;
}

.news-toggle-btn {
  appearance: none;
  border: 1px solid var(--border);
  background: var(--surface-2);
  color: var(--text);
  font-size: .9rem;
  font-weight: 600;
  line-height: 1.2;
  border-radius: var(--radius);
  padding: .5rem .75rem;
  cursor: pointer;
  min-width: 7rem;
  transition: background .15s ease, border-color .15s ease, transform .05s ease;
}
.news-toggle-btn:hover {
  background: rgba(209,65,36,.07);
  border-color: var(--brand);
  transform: translateY(-1px);
}
.news-toggle-btn:focus {
  outline: 2px solid var(--brand);
  outline-offset: 2px;
}

/* Dashboard responsive */

@media (max-width: 768px) {
  .dashboard-flex {
    flex-direction: column;
  }

  .dashboard-links-grid {
    width: 100%;
    flex: 1 1 auto;
    grid-template-columns: 1fr;
  }

  .news-box {
    order: 2;
    max-width: 100%;
  }

  /* su mobile scrolla la pagina, non la lista */
  .news-box.expanded .news-list {
    max-height: none;
    overflow-y: visible;
  }
}

/* Checkbox lingue */
.checkbox-list .checkbox-item input[type="checkbox"] {
  width: 1.1rem;
  height: 1.1rem;
}
.checkbox-list .checkbox-item {
  line-height: 1.2;
}

.btn--disabled {
  opacity: .5;
  pointer-events: none;
  cursor: not-allowed;
}

/* Glossary edit */
.glossary-edit textarea#id_description {
  font-size: 1rem;
  line-height: 1.6;
}

.pill {
  display: inline-block;
  padding: .15rem .4rem;
  border-radius: 999px;
  border: 1px solid var(--border);
  font-size: .85em;
  background: var(--surface-2, #f1f2f4);
}
.pill--warn { background: var(--pill-warn-bg, #fff7e5); }

details > summary {
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  gap: .5rem;
}
details > summary::-webkit-details-marker { display:none; }

/* Review flag */
.param-title {
  display: flex; align-items: center; justify-content: space-between; gap: .75rem;
}
.review-flag {
  display: inline-flex; align-items: center; gap: .4rem;
  font-weight: 600;
}
.review-flag input[type="checkbox"] {
  width: 1.05rem; height: 1.05rem;
}
.param-btn {
  position: relative;
}
.param-btn .badge-review {
  position: absolute;
  top: -6px; right: -6px;
  display: inline-flex; align-items: center; justify-content: center;
  width: 18px; height: 18px; border-radius: 50%;
  background: var(--warn); color: #000; font-weight: 800; font-size: .8rem;
  border: 2px solid #fff;
}
:root[data-theme="dark"] .param-btn .badge-review {
  border-color: var(--surface);
}

/* Tooltip More info */
details.help-info { margin: .35rem 0 .5rem; }
details.help-info > summary { cursor: pointer; gap: .35rem; }
details.help-info > div { padding: .35rem .5rem; border-left: 3px solid var(--border); }

/* Menu delle Queries */
.queries-page .queries-nav {
  width: 100%;
  margin-bottom: 1.5rem;
}

.queries-page .queries-nav ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.queries-page .queries-nav li {
  width: 100%;
}

.queries-page .queries-nav a {
  display: block;
  width: 100%;
  text-align: left;
  padding: 0.6rem 1rem;
  text-decoration: none;
  color: var(--text-muted);
  background-color: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 1rem;
  font-size: 0.95rem;
  transition: all 0.15s ease-in-out;
  line-height: 1.3;
}

.queries-page .queries-nav a:hover {
  background-color: var(--surface);
  border-color: var(--brand);
  color: var(--text);
}

.queries-page .queries-nav a.active {
  background-color: var(--brand, #d14124);
  color: #fff;
  border-color: var(--brand, #d14124);
  font-weight: 600;
  box-shadow: 0 0 0 2px var(--surface);
}

.queries-page form .btn {
  margin-top: 0.6rem;
}

.queries-page .card-header {
  margin-bottom: 1rem;
}

/* Table A: filtri */
.filters-form {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: .75rem;
}

.filters-form label {
  font-weight: 600;
  text-align: left;
  width: 100%;
}

/* Table A: larghezza colonne */
.table.table--freeze.tableA .col-sticky-left {
  width: 5rem;
  min-width: 5rem;
}
.table.table--freeze.tableA col.w-name {
  width: 22rem;
}
.table.table--freeze.tableA col.w-implication {
  width: 22rem;
}

.table.table--freeze.tableA thead th:nth-child(2),
.table.table--freeze.tableA tbody td:nth-child(2) {
  min-width: 10rem;
}
.table.table--freeze.tableA thead th:nth-child(3),
.table.table--freeze.tableA tbody td:nth-child(3) {
  min-width: 20rem;
}

.table details > summary {
  text-decoration: underline;
  text-underline-offset: 2px;
  font-weight: 500;
}

/* Risposte: domanda + more info */
.q-head {
  display: grid;
  grid-template-columns: 1fr auto;
  column-gap: .6rem;
  align-items: start;
}
.q-head__text {
  margin: 0;
  min-width: 0;
  word-wrap: break-word;
}

.help-info--inline {
  display: contents;
}
.help-info__summary {
  white-space: nowrap;
  cursor: pointer;
  font-size: .95rem;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.help-info__summary:focus {
  outline: 2px solid var(--focus, #2266ff);
  outline-offset: 2px;
}

.help-info__panel {
  grid-column: 1 / -1;
  margin-top: .35rem;
}

/* Griglia esempi a 2 colonne */
.examples-list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.25rem;
  margin-bottom: 1.5rem;
  align-items: stretch;
}

.examples-list .example-row {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  height: 100%;
  display: flex;
  flex-direction: column;
}

.examples-list .example-row .grid {
  grid-template-columns: 1fr;
  gap: 0.6rem;
}

/* mobile: una colonna */
@media (max-width: 768px) {
  .examples-list {
    grid-template-columns: 1fr;
  }
}

/* Graphs */
.graph-layout { display:grid; grid-template-columns: 1fr minmax(260px,320px); gap:1rem; align-items:start; }
@media (max-width: 900px){ .graph-layout { grid-template-columns:1fr; } }
.param-card { border:1px solid var(--border,#ddd); border-radius:8px; padding:.5rem .75rem; background:var(--surface,#fff); }
.card-plus { background:#e8f7ec; color:#0c4a2a; }
.card-minus { background:#fde8e7; color:#7f1d1d; }
.card-zero { background:#eef1f5; color:#1f2937; }
.card-unset { background:#f8f8f8; color:#1f2937; }
.card-inactive { background:repeating-linear-gradient(45deg,#f8f8f8,#f8f8f8 6px,#eee 6px,#eee 12px); color:#1f2937; }
.legend .badge { display:inline-block; padding:.125rem .375rem; border-radius:4px; border:1px solid var(--border,#ddd); }
.legend .sep { display:inline-block; width:.75rem; }
.b-plus { background:#e8f7ec; color:#0c4a2a; } .b-minus { background:#fde8e7; color:#7f1d1d; } .b-zero { background:#eef1f5; color:#1f2937; } .b-unset { background:#f8f8f8; color:#1f2937; }
.b-focus { background:#fff6da; border-color:#eed68a; color:#1f2937; }
.b-up { background:#e5efff; color:#1f2937; } .b-down { background:#fff0e5; color:#1f2937; }

/* grafici in dark: testo chiaro */
:root[data-theme="dark"] .card-plus,
:root[data-theme="dark"] .b-plus { background: rgba(74,222,128,.18); color: var(--text); }
:root[data-theme="dark"] .card-minus,
:root[data-theme="dark"] .b-minus { background: rgba(255,122,133,.20); color: var(--text); }
:root[data-theme="dark"] .card-zero,
:root[data-theme="dark"] .b-zero { background: var(--surface-2); color: var(--text); }
:root[data-theme="dark"] .card-unset,
:root[data-theme="dark"] .b-unset { background: var(--surface-alt); color: var(--text); }
:root[data-theme="dark"] .card-inactive { background: repeating-linear-gradient(45deg, var(--surface-alt), var(--surface-alt) 6px, var(--surface-2) 6px, var(--surface-2) 12px); color: var(--text); }
:root[data-theme="dark"] .b-focus { background: rgba(251,191,36,.20); border-color: color-mix(in oklab, var(--warn) 35%, var(--border)); color: var(--text); }
:root[data-theme="dark"] .b-up { background: rgba(109,163,255,.18); color: var(--text); }
:root[data-theme="dark"] .b-down { background: rgba(233,87,59,.18); color: var(--text); }

/* Logo */
.pcm-logo-img {
  height: 1.4em;
  vertical-align: middle;
  margin-left: -8px;
  margin-top: -4px;
  display: inline-block;
}

/* Mobile */
@media (max-width: 768px) {
  .pcm-logo-img {
    height: 1.2em;
  }
}

.hide-on-desktop {
  display: none !important;
}

/* colonne secondarie nascoste su schermi stretti */
@media (max-width: 960px){
  .hide-mobile {
    display: none !important;
  }
}

/* Instructions: vista ed editor */

.instructions-view {
  color: var(--text);
  line-height: 1.6;
}
.instructions-view h2 {
  font-size: var(--fs-4);
  margin: 1.25rem 0 .6rem;
  padding-bottom: .35rem;
  border-bottom: 1px solid var(--border);
}
.instructions-view h3 {
  font-size: var(--fs-3);
  margin: 1.1rem 0 .5rem;
}
.instructions-view p {
  margin: .6rem 0;
}
.instructions-view a {
  color: var(--link);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.instructions-view a:hover { color: var(--link-hover); }
.instructions-view ul,
.instructions-view ol {
  margin: .5rem 0 .8rem 1.4rem;
  padding-left: .4rem;
}
.instructions-view li { margin: .25rem 0; }
.instructions-view code,
.instructions-view pre {
  font-family: var(--mono);
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: .15rem .35rem;
  font-size: .92em;
}
.instructions-view pre {
  padding: .75rem 1rem;
  overflow-x: auto;
}
.instructions-view blockquote {
  margin: .75rem 0;
  padding: .5rem .9rem;
  border-left: 3px solid var(--brand);
  background: var(--brand-50);
  color: var(--text);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}

/* tabelle nella vista */
.instructions-view table {
  width: 100%;
  border-collapse: collapse;
  margin: 1rem 0 1.25rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
}
.instructions-view table th,
.instructions-view table td {
  padding: .55rem .75rem;
  border: 1px solid var(--border);
  vertical-align: top;
  text-align: left;
}
.instructions-view table thead th {
  background: var(--surface-2);
  font-weight: 700;
}
.instructions-view table tbody tr:nth-child(odd) {
  background: color-mix(in oklab, var(--surface) 80%, var(--surface-2));
}

/* Editor */
.instructions-editor .ql-toolbar.ql-snow,
.instructions-editor .ql-container.ql-snow {
  border-color: var(--border);
}
.instructions-editor .ql-toolbar.ql-snow {
  background: var(--surface-2);
  border-top-left-radius: var(--radius-sm);
  border-top-right-radius: var(--radius-sm);
}
.instructions-editor .ql-container.ql-snow {
  border-bottom-left-radius: var(--radius-sm);
  border-bottom-right-radius: var(--radius-sm);
  background: var(--surface);
  font-family: var(--ff);
  font-size: var(--fs-1);
}
.instructions-editor .ql-editor {
  min-height: 360px;
  color: var(--text);
}
.instructions-editor .ql-editor.ql-blank::before {
  color: var(--text-muted);
  font-style: normal;
}

/* editor in dark: icone ricolorate */
:root[data-theme="dark"] .instructions-editor .ql-snow .ql-stroke {
  stroke: var(--text);
}
:root[data-theme="dark"] .instructions-editor .ql-snow .ql-fill,
:root[data-theme="dark"] .instructions-editor .ql-snow .ql-stroke.ql-fill {
  fill: var(--text);
}
:root[data-theme="dark"] .instructions-editor .ql-snow .ql-picker {
  color: var(--text);
}
:root[data-theme="dark"] .instructions-editor .ql-snow .ql-picker-options {
  background: var(--surface-2);
  border-color: var(--border);
  color: var(--text);
}
:root[data-theme="dark"] .instructions-editor .ql-snow .ql-picker-label:hover,
:root[data-theme="dark"] .instructions-editor .ql-snow .ql-picker-item:hover,
:root[data-theme="dark"] .instructions-editor .ql-snow.ql-toolbar button:hover,
:root[data-theme="dark"] .instructions-editor .ql-snow.ql-toolbar button.ql-active {
  color: var(--brand);
}
:root[data-theme="dark"] .instructions-editor .ql-snow.ql-toolbar button:hover .ql-stroke,
:root[data-theme="dark"] .instructions-editor .ql-snow.ql-toolbar button.ql-active .ql-stroke {
  stroke: var(--brand);
}
:root[data-theme="dark"] .instructions-editor .ql-snow.ql-toolbar button:hover .ql-fill,
:root[data-theme="dark"] .instructions-editor .ql-snow.ql-toolbar button.ql-active .ql-fill {
  fill: var(--brand);
}
:root[data-theme="dark"] .instructions-editor .ql-snow .ql-tooltip {
  background: var(--surface-2);
  border-color: var(--border);
  color: var(--text);
  box-shadow: var(--shadow);
}
:root[data-theme="dark"] .instructions-editor .ql-snow .ql-tooltip input[type="text"] {
  background: var(--surface);
  border-color: var(--border);
  color: var(--text);
}

/* modalità sorgente HTML */
.instructions-editor .instructions-source {
  width: 100%;
  min-height: 420px;
  font-family: var(--mono);
  font-size: .9rem;
  line-height: 1.5;
  padding: .9rem 1rem;
  background: var(--surface);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  resize: vertical;
  white-space: pre;
  overflow: auto;
  tab-size: 2;
}
.instructions-editor .instructions-source:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
}

/* Dashboard admin: layout 50/50 */
.dashboard-grid-admin {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
  align-items: stretch;
}
.admin-counters {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  min-width: 0;
  /* stessa altezza massima di Latest Changes */
  min-height: 0;
  max-height: calc(100vh - 8rem);
}
.admin-activity {
  min-width: 0;
  height: 100%;
}

.counter-card {
  padding: 0.7rem 0.9rem;
  display: flex;
  flex-direction: column;
}
/* l'ultima card riempie lo spazio che resta */
.admin-counters .counter-card:last-child {
  flex: 1 1 auto;
  min-height: 0;
}
.admin-label {
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1.2px;
  color: var(--text-muted);
  margin: 0 0 0.25rem 0;
  line-height: 1.2;
}
.admin-big-number {
  font-size: 1.4rem;
  font-weight: 800;
  line-height: 1;
  color: var(--text);
  margin-bottom: 0.15rem;
}

/* Languages by Status: 4 mini-counters */
.status-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.4rem;
  margin-top: 0.15rem;
}
.status-cell {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.1rem;
  padding: 0.4rem 0.2rem;
  border-radius: var(--radius-sm);
  background: var(--surface-alt);
  border: 1px solid var(--border);
  cursor: pointer;
  font: inherit;
  color: inherit;
  text-align: center;
  transition: background 0.15s ease, border-color 0.15s ease, transform 0.08s ease;
}
.status-cell:hover {
  background: var(--surface);
  border-color: var(--brand);
}
.status-cell:active {
  transform: scale(0.97);
}
.status-cell.is-active {
  background: rgba(59, 130, 246, 0.10);
  border-color: #3b82f6;
}
.status-num {
  font-size: 1.1rem;
  font-weight: 800;
  line-height: 1;
}
.status-lab {
  font-size: 0.62rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--text-muted);
  text-align: center;
}

/* Latest Changes (right column) */
.latest-changes-card {
  padding: 0;
  display: flex;
  flex-direction: column;
  height: 100%;
  max-height: calc(100vh - 8rem);
  position: sticky;
  top: 1rem;
}
.latest-changes-head {
  padding: 1.25rem 1.5rem 0.75rem;
  border-bottom: 1px solid var(--border);
}
.latest-changes-body {
  flex: 1 1 auto;
  overflow-y: auto;
  overflow-x: auto;
  min-height: 0;
}
.latest-changes-body table.table thead th {
  position: sticky;
  top: 0;
  background: var(--surface-2);
  z-index: 1;
}
/* nota troncata cliccabile */
.latest-change-note {
  transition: color 0.12s ease;
}
.latest-change-note:hover,
.latest-change-note:focus-visible {
  text-decoration: underline;
  text-decoration-color: var(--text);
  text-underline-offset: 2px;
}
.latest-change-note .note-caret {
  margin-left: 0.3rem;
  font-size: 0.7em;
  opacity: 0.6;
}

/* Responsive: una colonna sotto i 900px */
@media (max-width: 900px) {
  .dashboard-grid-admin {
    grid-template-columns: 1fr;
  }
  .admin-activity {
    order: -1;
  }
  .latest-changes-card {
    position: static;
    max-height: 420px;
  }
  .admin-counters {
    max-height: none;
  }
}

/* Language data */

/* Banner di status (asse B): senza colori */
.status-banner {
  background: var(--surface-2);
  color: var(--text);
  border: 1px solid var(--border);
}
.status-banner.is-draft,
.status-banner.is-submitted,
.status-banner.is-validated {
  background: var(--surface-2);
  color: var(--text);
  border-color: var(--border);
}

/* nota dell'admin nel banner */
.status-banner__note,
.lang-rejection-note {
  background: var(--surface);
  border: 1px solid color-mix(in oklab, var(--bad) 30%, var(--border));
  border-radius: 6px;
  padding: 0.6rem 0.8rem;
  margin-top: 0.6rem;
  color: var(--bad);
  white-space: pre-wrap;
  font-size: 0.85rem;
}

/* Quadratini dei parametri */
.param-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 1.5rem;
  background: var(--surface);
  padding: 0.75rem;
  border-radius: 8px;
  border: 1px solid var(--border);
  box-shadow: var(--shadow);
}
.param-nav .param-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 4px;
  font-weight: bold;
  font-size: 0.9rem;
  cursor: pointer;
  transition: transform 0.05s ease, background 0.15s ease, border-color 0.15s ease;
  padding: 0;
  border: 1px solid var(--border);
  background: var(--surface-2);
  color: var(--text);
}
.param-nav .param-btn.is-empty {
  background: var(--surface-2);
  color: var(--text);
  border-color: var(--border);
}
.param-nav .param-btn.is-incomplete {
  background: #dc3545;
  color: #fff;
  border-color: #a71d2a;
}
.param-nav .param-btn.is-complete {
  background: #198754;
  color: #fff;
  border-color: #0f5132;
}
/* giallo: da ricontrollare */
.param-nav .param-btn.is-warning {
  background: #e8a317;
  color: #3a2c00;
  border-color: #b3801a;
}
.param-nav .param-btn.is-active {
  border-bottom: 3px solid var(--text);
}
:root[data-theme="dark"] .param-nav .param-btn.is-incomplete {
  background: #b3303f;
  border-color: #7a1d27;
}
:root[data-theme="dark"] .param-nav .param-btn.is-complete {
  background: #1f9b62;
  border-color: #135f3d;
}
:root[data-theme="dark"] .param-nav .param-btn.is-warning {
  background: #c98a14;
  border-color: #8f6510;
  color: #221900;
}

/* quadratino trovato con la ricerca: anello blu */
.param-nav .param-btn.is-found {
  outline: 3px solid transparent;
  outline-offset: 2px;
  animation: param-found-blink 0.8s ease-in-out 3;
}
@keyframes param-found-blink {
  0%, 100% {
    outline-color: transparent;
    box-shadow: 0 0 0 0 transparent;
  }
  50% {
    outline-color: var(--focus);
    box-shadow: 0 0 0 5px color-mix(in oklab, var(--focus) 45%, transparent);
  }
}
@media (prefers-reduced-motion: reduce) {
  .param-nav .param-btn.is-found {
    animation: none;
    outline-color: var(--focus);
    box-shadow: 0 0 0 5px color-mix(in oklab, var(--focus) 45%, transparent);
  }
}

/* variante larga, per id più lunghi */
.param-nav--wide .param-btn {
  width: auto;
  min-width: 2.5rem;
  padding: 0 0.6rem;
}

/* ParameterBlock */
.parameter-block {
  background: var(--surface-alt);
  color: var(--text);
}
.parameter-finalize-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem;
  background: var(--surface);
  color: var(--text);
  border-radius: 8px;
  border: 1px solid var(--border);
}
.form-locked-banner {
  padding: 0.75rem 1rem;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--text-muted);
  font-size: 0.9rem;
}

/* bordo rosso temporaneo per esempi mancanti */
.question-row {
  transition: border-color 3s ease-out, box-shadow 3s ease-out;
}
.question-row.is-highlighted {
  border-color: #dc2626 !important;
  box-shadow: 0 0 0 3px color-mix(in oklab, #dc2626 25%, transparent) !important;
  transition: border-color 0.15s ease-in, box-shadow 0.15s ease-in;
}

/* Istruzioni YES/NO */
.instructions-yn {
  border-radius: 6px;
  padding: 0.5rem 1rem;
  margin: 0.5rem 0;
}
.instructions-yn--yes {
  border-left: 3px solid var(--ok);
  background: var(--pill-ok-bg);
  color: var(--text);
}
.instructions-yn--yes .info-row__label {
  color: var(--ok);
  font-weight: 700;
}
.instructions-yn--no {
  border-left: 3px solid var(--bad);
  background: var(--pill-bad-bg);
  color: var(--text);
}
.instructions-yn--no .info-row__label {
  color: var(--bad);
  font-weight: 700;
}

/* Backup detail: accordion */
.backup-accordion-head {
  background: var(--surface-2);
}
.backup-accordion-head:hover {
  background: color-mix(in oklab, var(--surface-2) 80%, var(--text));
}

/* Footer */
.site-footer {
  width: 100%;
  background-color: var(--bg);
  border-top: 1px solid var(--border);
  padding-top: 2rem;
  padding-bottom: 1.25rem;
  margin-top: 5rem;
  position: relative;
  z-index: 200;
}

.footer-container {
  padding: 0 2rem;
  max-width: 1600px;
  margin: 0 auto;
}

.footer-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 3rem;
  margin-bottom: 3rem;
}

.footer-col h4 {
  margin-top: 0;
  margin-bottom: 1rem;
  color: var(--text);
}

.footer-col .muted-text {
  font-size: 0.9rem;
  line-height: 1.6;
  margin-bottom: 1.5rem;
}

.footer-license {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.footer-links {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
}

.footer-parent-project {
  padding: 1.5rem;
  background: var(--surface-2);
  border-radius: 8px;
  border: 1px solid var(--border);
}

.footer-parent-project h4 {
  font-size: 0.9rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 0.8rem;
}

.footer-btn {
  display: inline-block;
  padding: 0.5rem 1rem;
  background: var(--brand);
  color: #fff;
  border-radius: 4px;
  text-decoration: none;
  font-size: 0.85rem;
  font-weight: 600;
}
.footer-btn:hover {
  background: var(--brand-700);
  color: #fff;
  text-decoration: none;
}
/* in dark resta bianco sul bottone rosso */
:root[data-theme="dark"] .footer-btn,
:root[data-theme="dark"] .footer-btn:hover {
  color: #fff;
}

.footer-bottom {
  padding-top: 2rem;
  border-top: 1px solid var(--border);
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 1rem;
}

@media (max-width: 768px) {
  .footer-grid {
    gap: 2rem;
    text-align: center;
  }
  .footer-license {
    justify-content: center;
  }
  .footer-bottom {
    flex-direction: column;
    text-align: center;
    gap: 1rem;
  }
}

/* Drawer (pannello laterale) */
.drawer-root {
  position: fixed;
  inset: 0;
  z-index: 2000;
  display: flex;
  justify-content: flex-end;
}
.drawer-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
  animation: drawer-fade-in 0.18s ease-out;
}
.drawer-panel {
  position: relative;
  background: var(--surface, #ffffff);
  color: var(--text, inherit);
  width: min(960px, 92vw);
  height: 100%;
  box-shadow: -8px 0 24px rgba(0, 0, 0, 0.18);
  animation: drawer-slide-in 0.22s cubic-bezier(.2,.7,.2,1);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.drawer-body {
  flex: 1;
  overflow-y: auto;
  padding: 1.25rem 1.25rem 1.5rem;
}
.drawer-close {
  position: absolute;
  top: 0.55rem;
  right: 0.85rem;
  z-index: 1;
  background: transparent;
  border: none;
  font-size: 1.7rem;
  line-height: 1;
  cursor: pointer;
  color: var(--text-muted);
  padding: 0.2rem 0.5rem;
  border-radius: 6px;
}
.drawer-close:hover {
  color: var(--text);
  background: var(--surface-2, rgba(0,0,0,0.06));
}
@keyframes drawer-slide-in {
  from { transform: translateX(100%); }
  to   { transform: translateX(0); }
}
@keyframes drawer-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .drawer-overlay,
  .drawer-panel {
    animation: none;
  }
}

/* Spinner */
@keyframes spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}
.spin {
  animation: spin 1s linear infinite;
}
@media (prefers-reduced-motion: reduce) {
  .spin {
    animation: none;
  }
}

/* Touch: bersagli più grandi, niente zoom */
@media (pointer: coarse){
  /* Safari iOS zooma i campi sotto i 16px */
  input:not([type="checkbox"]):not([type="radio"]),
  select,
  textarea{
    font-size: max(16px, 1em) !important;
  }
  /* chiusura Drawer: area da 44px */
  .drawer-close{
    min-width: 44px;
    min-height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
}

/* telefoni: striscia di 48px per chiudere il Drawer */
@media (max-width: 600px){
  .drawer-panel{
    width: calc(100vw - 48px);
  }
}
/* Stile compatto: attivo con data-density="compact" su <html> */

/* Design token */
:root[data-density="compact"] {
  /* Angoli piu' squadrati */
  --radius: 5px;
  --radius-sm: 3px;

  /* Ombre più leggere */
  --shadow: 0 1px 2px rgba(15,23,42,.05), 0 1px 3px rgba(15,23,42,.04);

  /* Titoli più piccoli */
  --fs-2: 1rem;
  --fs-3: 1.08rem;
  --fs-4: 1.2rem;
  --fs-5: 1.4rem;

  /* Spaziature: tutta la scala più stretta */
  --sp-3: .4rem;
  --sp-4: .5rem;
  --sp-5: .65rem;
  --sp-6: .8rem;
  --sp-8: 1rem;

  /* Top-bar piu' bassa */
  --topbar-height: 2.85rem;

  /* My Account */
  --acc-page-top: .75rem;
  --acc-section-gap: .5rem;
  --acc-header-gap: .35rem;
  --acc-action-top: .2rem;
  --acc-alert-gap: .4rem;

  /* Card filtri delle liste */
  --filter-card-pad: .45rem .65rem;
  --filter-card-gap: .4rem;
  --filter-card-actions-top: .4rem;
  --filter-card-input-pad: .3rem;

  /* Pagine-form */
  --form-page-top: .75rem;
  --form-aside-gap: .75rem;
  --form-col-gap: .55rem;
  --form-card-header-mb: .45rem;
  --form-field-mb: .4rem;
  --form-input-pad: .3rem;
  --form-box-pad: .5rem;
  --form-box-pad-lg: .65rem;
  --form-grid-gap: .5rem;
  --form-hr-margin: .7rem;
  --form-row-pad: .35rem .5rem;
  --form-row-radius: 5px;
  --modal-pad: .9rem;

  /* LanguageData */
  --ld-header-pad: .65rem .9rem;
  --ld-banner-pad: .5rem .7rem;
  --ld-meta-colgap: 1.1rem;

  /* Filters/Queries: tab del menu */
  --queries-tab-h: 38px;
  --queries-tab-pad: .4rem .85rem;
}

/* ombra per dark + compact */
:root[data-theme="dark"][data-density="compact"] {
  --shadow: 0 1px 2px rgba(0,0,0,.45), 0 2px 6px rgba(0,0,0,.4);
}

/* Layout: più spazio al contenuto */

/* sidebar più stretta (non quando è ristretta) */
:root[data-density="compact"] .app-wrapper:not(.is-sidebar-collapsed) {
  --sidebar-width: 212px;
}

/* padding della sidebar */
:root[data-density="compact"] .sidebar {
  padding: var(--sp-4) 0.75rem;
}

/* Body centrale: meno padding ai lati e sopra/sotto */
:root[data-density="compact"] .main-container {
  padding: var(--sp-2) var(--sp-4) var(--sp-5);
}

/* Logo un po' piu' piccolo per stare nella top-bar piu' bassa */
:root[data-density="compact"] .top-bar .brand {
  font-size: 1.2rem;
}

/* Bottoni */
:root[data-density="compact"] .btn,
:root[data-density="compact"] button.btn {
  padding: .28rem .55rem;
  border-radius: 5px;
}
:root[data-density="compact"] .btn.btn-link {
  padding: 0;
}
:root[data-density="compact"] .row-actions .btn {
  padding: .2rem .45rem;
}

/* Bottoni nav generici */
:root[data-density="compact"] .nav-list .btn {
  padding: .25rem .5rem;
  border-radius: 5px;
}

/* Voci della sidebar: piu' basse e meno tonde */
:root[data-density="compact"] .sidebar-nav .nav-list .btn {
  padding: .3rem .55rem;
  font-size: .88rem;
  min-height: 1.8rem;
  border-radius: 5px;
}

/* Toggle sidebar */
:root[data-density="compact"] .sidebar-toggle {
  width: 26px;
  height: 26px;
  border-radius: 5px;
}

/* Toggle tema: resta a pillola ma piu' piccolo */
:root[data-density="compact"] .theme-toggle {
  min-width: 1.8rem;
  height: 1.8rem;
  padding: 0 .5rem;
  font-size: .82rem;
}

/* Badge ruolo: resta a pillola, padding ridotto */
:root[data-density="compact"] .role-badge {
  padding: .2rem .5rem;
  font-size: .76rem;
}

/* Form / input */
:root[data-density="compact"] input,
:root[data-density="compact"] select,
:root[data-density="compact"] textarea {
  padding: .3rem .45rem;
  border-radius: 5px;
}
:root[data-density="compact"] .toolbar input[type="search"] {
  padding: .35rem .6rem;
}
:root[data-density="compact"] .form-row {
  margin-bottom: var(--sp-3);
}

/* Card, form e toolbar */

/* Padding interno card piu' contenuto (verticale soprattutto). */
:root[data-density="compact"] .card {
  padding: var(--sp-4) var(--sp-5);
}

/* Gap dei layout a griglia (i form usano .grid .grid-2). */
:root[data-density="compact"] .grid {
  gap: var(--sp-3);
}

/* Titoli interni card piu' attaccati al contenuto. */
:root[data-density="compact"] .card h2,
:root[data-density="compact"] .card h3 {
  margin-top: .1rem;
  margin-bottom: var(--sp-3);
}

/* h1 senza classe: margini più piccoli */
:root[data-density="compact"] .main-container h1 {
  margin-top: .15rem;
  margin-bottom: var(--sp-3);
}

:root[data-density="compact"] .toolbar {
  margin-bottom: var(--sp-3);
}
/* riga azioni in fondo: niente margine sotto */
:root[data-density="compact"] .card .toolbar:last-child {
  margin-bottom: 0;
}

/* Tiles dashboard */
:root[data-density="compact"] .dash-tile {
  min-height: 2.5rem;
  border-radius: 6px;
  padding: .4rem .7rem;
  font-size: .9rem;
}
:root[data-density="compact"] .nav-tiles .tile {
  border-radius: 6px;
  padding: .5rem .85rem;
}

/* Titoli */
:root[data-density="compact"] .page-title {
  font-size: clamp(1.3rem, 1rem + 1.2vw, 1.7rem);
}
:root[data-density="compact"] .stat-value {
  font-size: clamp(1.3rem, 1rem + 1.2vw, 1.7rem);
}

/* Paginazione */
:root[data-density="compact"] .pagination a,
:root[data-density="compact"] .pagination .current {
  min-width: 1.55rem;
  height: 1.55rem;
  border-radius: 4px;
}

/* Menu Queries */
:root[data-density="compact"] .queries-page .queries-nav a {
  padding: .35rem .6rem;
  border-radius: 5px;
}

/* Quadratini dei parametri */
:root[data-density="compact"] .param-nav .param-btn {
  width: 1.85rem;
  height: 1.85rem;
}

/* Tabelle */
:root[data-density="compact"] .table thead th {
  padding: .4rem .55rem;
}
:root[data-density="compact"] .table tbody td {
  padding: .35rem .55rem;
}

/* Dashboard */
:root[data-density="compact"] .dashboard-grid-admin {
  gap: var(--sp-4);
}
:root[data-density="compact"] .admin-counters {
  gap: var(--sp-2);
}
:root[data-density="compact"] .admin-big-number {
  font-size: 1.15rem;
}
:root[data-density="compact"] .latest-changes-head {
  padding: var(--sp-3) var(--sp-4) var(--sp-2);
}
:root[data-density="compact"] .dashboard-flex {
  gap: var(--sp-4);
}
:root[data-density="compact"] .dashboard-columns {
  gap: var(--sp-4);
}
:root[data-density="compact"] .dashboard-section {
  gap: var(--sp-4);
}
:root[data-density="compact"] .stats-grid,
:root[data-density="compact"] .dashboard-links-grid {
  gap: var(--sp-3);
}
:root[data-density="compact"] .news-item {
  padding: var(--sp-2) 0;
}

/* Drawer */
:root[data-density="compact"] .drawer-body {
  padding: var(--sp-4) var(--sp-4) var(--sp-5);
}

/* LanguageData: quadratini */
:root[data-density="compact"] .param-nav {
  padding: var(--sp-3);
  gap: .3rem;
  margin-bottom: var(--form-col-gap, 1.5rem);
}

/* Instructions: meno spazio, stessi font */
:root[data-density="compact"] .instructions-view {
  line-height: 1.45;
}
:root[data-density="compact"] .instructions-view h2 {
  margin: .6rem 0 .3rem;
}
:root[data-density="compact"] .instructions-view h3 {
  margin: .5rem 0 .3rem;
}
:root[data-density="compact"] .instructions-view p {
  margin: .3rem 0;
}
:root[data-density="compact"] .instructions-view ul,
:root[data-density="compact"] .instructions-view ol {
  margin: .3rem 0 .4rem 1.2rem;
}
:root[data-density="compact"] .instructions-view li {
  margin: .1rem 0;
}
:root[data-density="compact"] .instructions-view table {
  margin: .5rem 0 .6rem;
}
:root[data-density="compact"] .instructions-view table th,
:root[data-density="compact"] .instructions-view table td {
  padding: .3rem .45rem;
}

/* Pagine pubbliche / auth */
:root[data-density="compact"] .page-hero {
  margin-bottom: var(--form-col-gap, 2rem);
}
:root[data-density="compact"] .page-grid {
  gap: var(--form-grid-gap, 1.5rem);
}
:root[data-density="compact"] .page-actions,
:root[data-density="compact"] .auth-actions {
  margin-top: .45rem;
}
:root[data-density="compact"] .auth-shell {
  padding: .8rem;
}
:root[data-density="compact"] .auth-title {
  margin-bottom: .45rem;
}

/* Footer più compatto */
:root[data-density="compact"] .site-footer {
  margin-top: 1.1rem;
  padding-top: .9rem;
  padding-bottom: .8rem;
}
:root[data-density="compact"] .footer-grid {
  gap: 1.1rem;
  margin-bottom: .9rem;
}
:root[data-density="compact"] .footer-col h4 {
  margin-bottom: .4rem;
}
:root[data-density="compact"] .footer-col .muted-text {
  line-height: 1.4;
  margin-bottom: .6rem;
}
:root[data-density="compact"] .footer-links {
  gap: .3rem;
}
:root[data-density="compact"] .footer-parent-project {
  padding: .7rem;
}
:root[data-density="compact"] .footer-bottom {
  padding-top: .8rem;
}

/* Touch: controlli più grandi */
@media (pointer: coarse){
  :root[data-density="compact"] .param-nav .param-btn{
    width: 2.35rem;
    height: 2.35rem;
  }
  :root[data-density="compact"] .pagination a,
  :root[data-density="compact"] .pagination .current{
    min-width: 2.2rem;
    height: 2.2rem;
  }
}
@media (max-width: 960px) and (pointer: coarse){
  :root[data-density="compact"] .sidebar-nav .nav-list .btn{
    min-height: 2.5rem;
    padding: .45rem .7rem;
  }
}
:root,
:host {
  --ol-background-color: white;
  --ol-accent-background-color: #F5F5F5;
  --ol-subtle-background-color: rgba(128, 128, 128, 0.25);
  --ol-partial-background-color: rgba(255, 255, 255, 0.75);
  --ol-foreground-color: #333333;
  --ol-subtle-foreground-color: #666666;
  --ol-brand-color: #00AAFF;
}

.ol-box {
  box-sizing: border-box;
  border-radius: 2px;
  border: 1.5px solid var(--ol-background-color);
  background-color: var(--ol-partial-background-color);
}

.ol-mouse-position {
  top: 8px;
  right: 8px;
  position: absolute;
}

.ol-scale-line {
  background: var(--ol-partial-background-color);
  border-radius: 4px;
  bottom: 8px;
  left: 8px;
  padding: 2px;
  position: absolute;
}

.ol-scale-line-inner {
  border: 1px solid var(--ol-subtle-foreground-color);
  border-top: none;
  color: var(--ol-foreground-color);
  font-size: 10px;
  text-align: center;
  margin: 1px;
  will-change: contents, width;
  transition: all 0.25s;
}

.ol-scale-bar {
  position: absolute;
  bottom: 8px;
  left: 8px;
}

.ol-scale-bar-inner {
  display: flex;
}

.ol-scale-step-marker {
  width: 1px;
  height: 15px;
  background-color: var(--ol-foreground-color);
  float: right;
  z-index: 10;
}

.ol-scale-step-text {
  position: absolute;
  bottom: -5px;
  font-size: 10px;
  z-index: 11;
  color: var(--ol-foreground-color);
  text-shadow: -1.5px 0 var(--ol-partial-background-color), 0 1.5px var(--ol-partial-background-color), 1.5px 0 var(--ol-partial-background-color), 0 -1.5px var(--ol-partial-background-color);
}

.ol-scale-text {
  position: absolute;
  font-size: 12px;
  text-align: center;
  bottom: 25px;
  color: var(--ol-foreground-color);
  text-shadow: -1.5px 0 var(--ol-partial-background-color), 0 1.5px var(--ol-partial-background-color), 1.5px 0 var(--ol-partial-background-color), 0 -1.5px var(--ol-partial-background-color);
}

.ol-scale-singlebar {
  position: relative;
  height: 10px;
  z-index: 9;
  box-sizing: border-box;
  border: 1px solid var(--ol-foreground-color);
}

.ol-scale-singlebar-even {
  background-color: var(--ol-subtle-foreground-color);
}

.ol-scale-singlebar-odd {
  background-color: var(--ol-background-color);
}

.ol-unsupported {
  display: none;
}

.ol-viewport,
.ol-unselectable {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}

.ol-viewport canvas {
  all: unset;
  overflow: hidden;
}

.ol-viewport {
  touch-action: pan-x pan-y;
}

.ol-selectable {
  -webkit-touch-callout: default;
  -webkit-user-select: text;
  -moz-user-select: text;
  user-select: text;
}

.ol-grabbing {
  cursor: -webkit-grabbing;
  cursor: -moz-grabbing;
  cursor: grabbing;
}

.ol-grab {
  cursor: move;
  cursor: -webkit-grab;
  cursor: -moz-grab;
  cursor: grab;
}

.ol-control {
  position: absolute;
  background-color: var(--ol-subtle-background-color);
  border-radius: 4px;
}

.ol-zoom {
  top: .5em;
  left: .5em;
}

.ol-rotate {
  top: .5em;
  right: .5em;
  transition: opacity .25s linear, visibility 0s linear;
}

.ol-rotate.ol-hidden {
  opacity: 0;
  visibility: hidden;
  transition: opacity .25s linear, visibility 0s linear .25s;
}

.ol-zoom-extent {
  top: 4.643em;
  left: .5em;
}

.ol-full-screen {
  right: .5em;
  top: .5em;
}

.ol-control button {
  display: block;
  margin: 1px;
  padding: 0;
  color: var(--ol-subtle-foreground-color);
  font-weight: bold;
  text-decoration: none;
  font-size: inherit;
  text-align: center;
  height: 1.375em;
  width: 1.375em;
  line-height: .4em;
  background-color: var(--ol-background-color);
  border: none;
  border-radius: 2px;
}

.ol-control button::-moz-focus-inner {
  border: none;
  padding: 0;
}

.ol-zoom-extent button {
  line-height: 1.4em;
}

.ol-compass {
  display: block;
  font-weight: normal;
  will-change: transform;
}

.ol-touch .ol-control button {
  font-size: 1.5em;
}

.ol-touch .ol-zoom-extent {
  top: 5.5em;
}

.ol-control button:hover,
.ol-control button:focus {
  text-decoration: none;
  outline: 1px solid var(--ol-subtle-foreground-color);
  color: var(--ol-foreground-color);
}

.ol-zoom .ol-zoom-in {
  border-radius: 2px 2px 0 0;
}

.ol-zoom .ol-zoom-out {
  border-radius: 0 0 2px 2px;
}

.ol-attribution {
  text-align: right;
  bottom: .5em;
  right: .5em;
  max-width: calc(100% - 1.3em);
  display: flex;
  flex-flow: row-reverse;
  align-items: center;
}

.ol-attribution a {
  color: var(--ol-subtle-foreground-color);
  text-decoration: none;
}

.ol-attribution ul {
  margin: 0;
  padding: 1px .5em;
  color: var(--ol-foreground-color);
  text-shadow: 0 0 2px var(--ol-background-color);
  font-size: 12px;
}

.ol-attribution li {
  display: inline;
  list-style: none;
}

.ol-attribution li:not(:last-child):after {
  content: " ";
}

.ol-attribution img {
  max-height: 2em;
  max-width: inherit;
  vertical-align: middle;
}

.ol-attribution button {
  flex-shrink: 0;
}

.ol-attribution.ol-collapsed ul {
  display: none;
}

.ol-attribution:not(.ol-collapsed) {
  background: var(--ol-partial-background-color);
}

.ol-attribution.ol-uncollapsible {
  bottom: 0;
  right: 0;
  border-radius: 4px 0 0;
}

.ol-attribution.ol-uncollapsible img {
  margin-top: -.2em;
  max-height: 1.6em;
}

.ol-attribution.ol-uncollapsible button {
  display: none;
}

.ol-zoomslider {
  top: 4.5em;
  left: .5em;
  height: 200px;
}

.ol-zoomslider button {
  position: relative;
  height: 10px;
}

.ol-touch .ol-zoomslider {
  top: 5.5em;
}

.ol-overviewmap {
  left: 0.5em;
  bottom: 0.5em;
}

.ol-overviewmap.ol-uncollapsible {
  bottom: 0;
  left: 0;
  border-radius: 0 4px 0 0;
}

.ol-overviewmap .ol-overviewmap-map,
.ol-overviewmap button {
  display: block;
}

.ol-overviewmap .ol-overviewmap-map {
  border: 1px solid var(--ol-subtle-foreground-color);
  height: 150px;
  width: 150px;
}

.ol-overviewmap:not(.ol-collapsed) button {
  bottom: 0;
  left: 0;
  position: absolute;
}

.ol-overviewmap.ol-collapsed .ol-overviewmap-map,
.ol-overviewmap.ol-uncollapsible button {
  display: none;
}

.ol-overviewmap:not(.ol-collapsed) {
  background: var(--ol-subtle-background-color);
}

.ol-overviewmap-box {
  border: 1.5px dotted var(--ol-subtle-foreground-color);
}

.ol-overviewmap .ol-overviewmap-box:hover {
  cursor: move;
}

.ol-overviewmap .ol-viewport:hover {
  cursor: pointer;
}