/* ============================================================
   Gestionale SEO — design system
   PHP puro, CSS statico, nessuna dipendenza esterna (a parte il
   web font qui sotto, caricato via CSS puro — nessun cambiamento
   nell'HTML delle pagine e nessun impatto se il font non carica,
   la stack di fallback e' comunque solida).

   Terzo giro di restyling (29/08/2026): stessa base (indigo/teal,
   .stat-card, .data-table, badge di costo) con una mano di finitura
   "piu' futuristica" - typeface geometrico per i titoli, vetro/blur
   sulle card con fallback solido, glow su focus/hover, un pattern a
   griglia molto tenue sugli sfondi "tech" (sidebar, login, body).
   Tutto CSS puro via token: zero nuove classi richieste nell'HTML,
   nessun file PHP toccato in questo giro.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=Space+Grotesk:wght@500;600;700&display=swap');

:root {
  --font-body: "Inter", "Segoe UI", -apple-system, BlinkMacSystemFont, Roboto, Helvetica, Arial, sans-serif;
  /* Titoli/numeri: geometrico e un po' "tecnico" - fallback diretto sulla stack body se non carica. */
  --font-display: "Space Grotesk", "Inter", "Segoe UI", -apple-system, BlinkMacSystemFont, Roboto, Helvetica, Arial, sans-serif;

  --color-bg: #f4f5fb;
  --color-surface: #ffffff;
  --color-surface-rgb: 255, 255, 255;
  --color-surface-alt: #f7f8fd;
  --color-border: #e4e7f2;
  --color-border-strong: #d3d8ea;

  --color-text: #1c2033;
  --color-text-muted: #5b6178;
  --color-text-subtle: #8a90a8;

  --color-primary: #4f46e5;
  --color-primary-dark: #4338ca;
  --color-primary-darker: #362f9e;
  --color-primary-light: #eef0fd;
  --color-primary-soft: #e0e2fb;
  --color-accent: #7c3aed;
  --color-primary-rgb: 79, 70, 229;

  --color-sidebar-start: #14172b;
  --color-sidebar-end: #1f2344;

  --color-danger: #dc2626;
  --color-danger-dark: #b91c1c;
  --color-danger-light: #fee2e2;

  --color-success: #16a34a;
  --color-success-dark: #15803d;
  --color-success-light: #dcfce7;

  --color-warning: #d97706;
  --color-warning-dark: #b45309;
  --color-warning-light: #fef3c7;

  --color-info: #2563eb;
  --color-info-dark: #1d4ed8;
  --color-info-light: #dbeafe;

  /* Accento secondario (teal) - usato con parsimonia per dare una firma visiva piu'
     distintiva della sezione Console SEO e per variare le KPI, non un secondo blu generico. */
  --color-teal: #0d9488;
  --color-teal-dark: #0f766e;
  --color-teal-light: #ccfbf1;
  --color-teal-rgb: 13, 148, 136;

  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 20px;
  --radius-pill: 999px;

  --shadow-xs: 0 1px 2px rgba(20, 23, 43, 0.05);
  --shadow-sm: 0 2px 6px rgba(20, 23, 43, 0.06), 0 1px 2px rgba(20, 23, 43, 0.05);
  --shadow-md: 0 8px 24px -6px rgba(20, 23, 43, 0.14), 0 2px 6px -2px rgba(20, 23, 43, 0.06);
  --shadow-lg: 0 20px 44px -12px rgba(20, 23, 43, 0.28);
  --shadow-glow-primary: 0 10px 22px -8px rgba(var(--color-primary-rgb), 0.45);
  --shadow-glow-teal: 0 10px 22px -8px rgba(var(--color-teal-rgb), 0.4);
  /* Glow di focus e "alone" tenue per card/bottoni in hover - piu' morbido dei glow sopra,
     pensato per essere presente anche senza uno stato hover attivo (bordo card in vetro). */
  --ring-primary: 0 0 0 5px rgba(var(--color-primary-rgb), 0.16);
  --ring-teal: 0 0 0 5px rgba(var(--color-teal-rgb), 0.16);

  /* Pattern a griglia molto tenue, riusato su sfondi "tecnici" (body, sidebar, pannello login):
     una singola dimensione di passo cosi' resta coerente ovunque compaia. */
  --grid-size: 42px;
  --grid-line: rgba(var(--color-primary-rgb), 0.05);

  --ease: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: var(--font-body);
  background: var(--color-bg);
  background-image:
    radial-gradient(circle at 0% 0%, rgba(79, 70, 229, 0.07), transparent 45%),
    radial-gradient(circle at 100% 0%, rgba(37, 99, 235, 0.05), transparent 40%),
    radial-gradient(circle at 100% 100%, rgba(124, 58, 237, 0.04), transparent 40%),
    linear-gradient(var(--grid-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-line) 1px, transparent 1px);
  background-size: auto, auto, auto, var(--grid-size) var(--grid-size), var(--grid-size) var(--grid-size);
  background-attachment: fixed;
  color: var(--color-text);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

::selection { background: var(--color-primary-soft); color: var(--color-primary-darker); }

.layout { display: flex; min-height: 100vh; }

/* ---------- Accessibility ---------- */

a:focus-visible, button:focus-visible, .btn:focus-visible,
input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
  border-radius: 4px;
  box-shadow: var(--ring-primary);
  transition: outline-offset var(--ease) 120ms, box-shadow var(--ease) 120ms;
}

/* ---------- Sidebar ---------- */

.sidebar {
  width: 246px;
  flex-shrink: 0;
  /* Pannello diagonale indigo esistente + una griglia tecnica appena percettibile sopra, in
     stile "pannello di controllo" - stesso passo di --grid-size, solo piu' chiara perche' e'
     su sfondo scuro. Puramente decorativo, nessun impatto sulla leggibilita' della nav. */
  background:
    linear-gradient(rgba(255, 255, 255, 0.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.045) 1px, transparent 1px),
    linear-gradient(165deg, var(--color-sidebar-start) 0%, var(--color-sidebar-end) 100%);
  background-size: var(--grid-size) var(--grid-size), var(--grid-size) var(--grid-size), auto;
  color: #dfe1f5;
  padding: 1.25rem 0.9rem;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  position: sticky;
  top: 0;
  height: 100vh;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.18) transparent;
}
.sidebar::-webkit-scrollbar { width: 6px; }
.sidebar::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.14); border-radius: 999px; }
.sidebar::-webkit-scrollbar-track { background: transparent; }

.sidebar-brand { padding: 0.35rem 0.6rem 1rem; margin-bottom: 0.15rem; border-bottom: 1px solid rgba(255, 255, 255, 0.08); }

.sidebar-title {
  display: block;
  font-family: var(--font-display);
  font-size: 1.08rem;
  font-weight: 700;
  color: #ffffff;
  text-decoration: none;
  letter-spacing: -0.01em;
}

.sidebar-subtitle {
  font-size: 0.72rem;
  color: #9298c2;
  margin-top: 0.25rem;
  letter-spacing: 0.02em;
}

/* legacy alias kept so any old markup referencing .sidebar-title alone still looks right */
.sidebar-title + .sidebar-title { margin-top: 0; }

.sidebar-nav { display: flex; flex-direction: column; gap: 0.15rem; }

.sidebar-section-label {
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #6b7099;
  padding: 0.9rem 0.6rem 0.3rem;
  display: flex;
  align-items: center;
  gap: 0.4rem;
}
.sidebar-section-label::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--color-teal);
  box-shadow: 0 0 6px rgba(var(--color-teal-rgb), 0.7);
  flex-shrink: 0;
}

.sidebar a {
  color: #c7cbe8;
  text-decoration: none;
  padding: 0.55rem 0.65rem;
  border-radius: var(--radius-sm);
  font-size: 0.88rem;
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 0.65rem;
  transition: background var(--ease) 120ms, color var(--ease) 120ms, transform var(--ease) 120ms;
}

.sidebar a .nav-icon {
  font-size: 1rem;
  line-height: 1;
  width: 1.65rem;
  height: 1.65rem;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 7px;
  background: rgba(255, 255, 255, 0.04);
  transition: background var(--ease) 120ms;
}

.sidebar a:hover { background: rgba(255, 255, 255, 0.07); color: #fff; }
.sidebar a:hover .nav-icon { background: rgba(255, 255, 255, 0.1); }

.sidebar a.active {
  background: linear-gradient(135deg, var(--color-primary), var(--color-accent));
  color: #fff;
  box-shadow: var(--shadow-sm);
  position: relative;
}
.sidebar a.active .nav-icon { background: rgba(255, 255, 255, 0.16); }

.sidebar a.active:hover { transform: none; }

/* Indicatore "pagina attiva" - una barretta arrotondata che sporge dal bordo sinistro della
   sidebar, oltre al tint di sfondo gia' presente: rende la posizione corrente riconoscibile
   anche a colpo d'occhio periferico. Puro CSS, nessuna modifica al markup della sidebar. */
.sidebar a.active::after {
  content: "";
  position: absolute;
  left: -0.9rem;
  top: 50%;
  transform: translateY(-50%);
  width: 4px;
  height: 1.35rem;
  border-radius: var(--radius-pill);
  background: #fff;
  box-shadow: 0 0 10px rgba(255, 255, 255, 0.55);
}

/* ---------- Main content ---------- */

/* `min-width: 0`: senza, la colonna centrale e' un flex item che non scende mai sotto la larghezza
   del suo contenuto piu' largo, quindi un solo elemento troppo largo allarga TUTTA la pagina e
   compare la barra di scorrimento orizzontale. Le tabelle larghe non ne soffrono: scorrono gia'
   per conto loro dentro `.data-table-wrap` (08/09/2026). */
.content { flex: 1; padding: 2.1rem 2.6rem 3.5rem; max-width: 1120px; min-width: 0; }

h1 {
  font-family: var(--font-display);
  font-size: 1.75rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  margin: 0 0 1.5rem;
  color: var(--color-text);
}

h2 {
  font-size: 0.82rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--color-text-muted);
  margin: 0 0 1rem;
}

p { line-height: 1.6; margin: 0 0 0.75rem; }
a { color: var(--color-primary); }
a:hover { color: var(--color-primary-dark); }
code {
  background: var(--color-surface-alt);
  border: 1px solid var(--color-border);
  border-radius: 4px;
  padding: 0.1rem 0.35rem;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.85em;
}

/* ---------- Cards ---------- */

.card {
  /* Sfondo pieno di default (funziona ovunque); dove backdrop-filter e' supportato lo
     stile "vetro" sotto lo trasforma in una superficie semi-trasparente sfocata, cosi' la
     griglia/gradient dello sfondo pagina traspare leggermente attraverso le card. */
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: 1.5rem;
  margin-bottom: 1.5rem;
  box-shadow: var(--shadow-xs);
  transition: box-shadow var(--ease) 150ms, transform var(--ease) 150ms, border-color var(--ease) 150ms, background var(--ease) 150ms;
}

.card-link {
  display: block;
  text-decoration: none;
  color: inherit;
  position: relative;
}

.card-link:hover {
  box-shadow: var(--shadow-md), 0 0 0 1px rgba(var(--color-primary-rgb), 0.12);
  border-color: var(--color-border-strong);
  transform: translateY(-3px);
}

.card-link h2 { color: var(--color-text); font-size: 1.04rem; text-transform: none; letter-spacing: 0; font-weight: 700; display: flex; align-items: center; gap: 0.55rem; }

.card-link-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.1rem;
  height: 2.1rem;
  border-radius: var(--radius-md);
  background: var(--color-primary-light);
  font-size: 1.05rem;
  flex-shrink: 0;
  transition: transform var(--ease-spring) 320ms;
}
.card-link:hover .card-link-icon { transform: scale(1.1) rotate(-4deg); }

.card-link-arrow {
  position: absolute;
  right: 1.4rem;
  top: 1.5rem;
  color: var(--color-text-subtle);
  opacity: 0;
  transform: translateX(-4px);
  transition: opacity var(--ease) 150ms, transform var(--ease) 150ms, color var(--ease) 150ms;
}
.card-link:hover .card-link-arrow { opacity: 1; transform: translateX(0); color: var(--color-primary); }

/* ---------- Forms ---------- */

label { display: block; margin-bottom: 1rem; }
.label-text { font-size: 0.76rem; font-weight: 600; color: var(--color-text-muted); margin-bottom: 0.3rem; }

input[type=text], input[type=number], input[type=password], input[type=search], input[type=date],
input:not([type]), select, textarea {
  width: 100%;
  border: 1px solid var(--color-border-strong);
  background: var(--color-surface);
  border-radius: var(--radius-sm);
  padding: 0.55rem 0.8rem;
  font-size: 0.875rem;
  font-family: inherit;
  color: var(--color-text);
  transition: border-color var(--ease) 120ms, box-shadow var(--ease) 120ms;
}

input[type=text]:focus, input[type=number]:focus, input[type=password]:focus,
input[type=search]:focus, input[type=date]:focus, input:not([type]):focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px var(--color-primary-light);
}

input:hover, select:hover, textarea:hover { border-color: var(--color-border-strong); }

textarea.mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0.75rem; }

/* ---------- Buttons ---------- */

.btn {
  background: linear-gradient(135deg, var(--color-primary), var(--color-accent));
  background-size: 160% 160%;
  background-position: 0% 50%;
  color: #fff;
  border: none;
  padding: 0.62rem 1.25rem;
  border-radius: var(--radius-sm);
  font-size: 0.875rem;
  font-weight: 600;
  cursor: pointer;
  display: inline-block;
  text-decoration: none;
  box-shadow: var(--shadow-xs);
  transition: box-shadow var(--ease) 150ms, transform var(--ease) 150ms, background var(--ease) 150ms, background-position var(--ease) 250ms;
}
/* Il gradiente scorre leggermente al passaggio del mouse invece di restare fermo - solo in
   hover, non in loop continuo, per non essere fastidioso durante un uso prolungato. */
.btn:hover { box-shadow: var(--shadow-glow-primary); transform: translateY(-1px); background-position: 100% 50%; }
.btn:active { transform: translateY(0) scale(0.97); box-shadow: var(--shadow-xs); transition-duration: 60ms; }
.btn:disabled { opacity: 0.5; cursor: default; box-shadow: none; transform: none; }
.btn-sm { padding: 0.38rem 0.8rem; font-size: 0.78rem; }
.btn-danger { background: linear-gradient(135deg, #ef4444, var(--color-danger-dark)); }
.btn-danger:hover { background: linear-gradient(135deg, var(--color-danger), #991b1b); box-shadow: 0 10px 22px -8px rgba(220, 38, 38, 0.4); }
.btn-outline { background: var(--color-surface); color: var(--color-text); border: 1px solid var(--color-border-strong); box-shadow: none; }
.btn-outline:hover { background: var(--color-primary-light); border-color: var(--color-primary); color: var(--color-primary-dark); box-shadow: none; transform: translateY(-1px); }
.btn-outline:active { transform: translateY(0) scale(0.97); }

/* ---------- Layout helpers ---------- */

.row { display: flex; gap: 0.75rem; align-items: center; flex-wrap: wrap; }
.row-start { display: flex; gap: 0.75rem; align-items: flex-start; }
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 1.1rem; }
.grid-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 1.1rem; }

.text-xs { font-size: 0.75rem; color: var(--color-text-muted); }
.text-sm { font-size: 0.875rem; color: var(--color-text-muted); }
.text-red { color: var(--color-danger); }
.text-green { color: var(--color-success); }
.text-amber { color: var(--color-warning); }

/* ---------- Badges ---------- */

.badge {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  padding: 0.28rem 0.65rem;
  border-radius: var(--radius-pill);
}
.badge::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex-shrink: 0; }
.badge-suggerito { background: var(--color-warning-light); color: var(--color-warning-dark); }
.badge-dagenerare { background: var(--color-info-light); color: var(--color-info-dark); }
.badge-generato { background: var(--color-success-light); color: var(--color-success-dark); }
.badge-escluso { background: var(--color-danger-light); color: var(--color-danger-dark); }
.badge-incluso { background: var(--color-success-light); color: var(--color-success-dark); }

/* ---------- Lists ---------- */

.list-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.9rem 1.15rem;
  border-bottom: 1px solid var(--color-border);
  text-decoration: none;
  color: inherit;
  gap: 1rem;
  transition: background var(--ease) 120ms, box-shadow var(--ease) 120ms;
}
.list-item:last-child { border-bottom: none; }
.list-item:hover { background: var(--color-surface-alt); box-shadow: inset 3px 0 0 var(--color-primary); }

/* RETE DI SICUREZZA DELLA RIGA (08/09/2026). Sopra si e' tolta la causa (una pillola che non
   sapeva accorciarsi); qui si toglie l'EFFETTO, per qualunque contenuto largo che possa capitare
   domani. `flex-wrap: wrap` fa scendere il gruppo di bottoni sulla riga sotto invece di spingerlo
   fuori dalla scheda; `min-width: 0` toglie il minimo automatico dei flex item, che e' il motivo
   per cui un blocco troppo largo non si stringe e sfonda il contenitore invece di adattarsi. */
.list-item { flex-wrap: wrap; }
.list-item > * { min-width: 0; }

.group-header {
  padding: 0.7rem 1.15rem;
  background: var(--color-surface-alt);
  border-bottom: 1px solid var(--color-border);
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--color-text);
  letter-spacing: -0.005em;
}

/* ---------- Stepper ---------- */

.stepper { display: flex; gap: 0.5rem; align-items: center; font-size: 0.75rem; margin-bottom: 1.5rem; flex-wrap: wrap; }
.step { padding: 0.32rem 0.75rem; border-radius: var(--radius-pill); background: var(--color-surface-alt); color: var(--color-text-subtle); font-weight: 600; border: 1px solid var(--color-border); transition: background var(--ease) 150ms, color var(--ease) 150ms; }
.step.done { background: var(--color-success-light); color: var(--color-success-dark); border-color: transparent; }
.step.active { background: linear-gradient(135deg, var(--color-primary), var(--color-accent)); color: #fff; border-color: transparent; box-shadow: var(--shadow-glow-primary); }

/* ---------- Filters ---------- */

.filters {
  display: flex;
  gap: 0.75rem;
  margin-bottom: 1.4rem;
  align-items: center;
  flex-wrap: wrap;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 0.85rem 1rem;
  box-shadow: var(--shadow-xs);
  transition: box-shadow var(--ease) 150ms, border-color var(--ease) 150ms;
}
.filters:focus-within { border-color: var(--color-border-strong); box-shadow: var(--shadow-sm); }
.filters select { width: auto; min-width: 180px; }
.filters input[type=text] { min-width: 160px; }

.checkbox-row { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0; }
.checkbox-row input { width: auto; }

.tag-select { display: flex; gap: 0.4rem; flex-wrap: wrap; }
.tag-select label {
  display: flex; align-items: center; gap: 0.3rem; margin: 0;
  font-size: 0.8rem; border: 1px solid var(--color-border-strong);
  padding: 0.3rem 0.7rem; border-radius: var(--radius-pill); cursor: pointer;
  transition: border-color var(--ease) 100ms, background var(--ease) 100ms, color var(--ease) 100ms;
}
.tag-select label:hover { border-color: var(--color-primary); background: var(--color-primary-light); color: var(--color-primary-dark); }
.tag-select input { width: auto; }

/* ---------- Status badges (pagine "in corso / completato / errore") ---------- */

.stato-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.35rem 0.85rem;
  border-radius: var(--radius-pill);
  font-size: 0.85rem;
  font-weight: 700;
}
.stato-badge::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; flex-shrink: 0; }
.stato-success { background: var(--color-success-light); color: var(--color-success-dark); }
.stato-error { background: var(--color-danger-light); color: var(--color-danger-dark); }
.stato-warning { background: var(--color-warning-light); color: var(--color-warning-dark); }

/* Stato "in corso": il pallino pulsa con un doppio anello che si espande, cosi' le pagine di
   attesa (le *_attesa.php che fanno meta-refresh ogni pochi secondi) comunicano "sto ancora
   lavorando" a colpo d'occhio invece di un badge statico - nessuna modifica HTML richiesta,
   si applica automaticamente ovunque compare .stato-running. */
.stato-running {
  background: var(--color-info-light);
  color: var(--color-info-dark);
  position: relative;
}
.stato-running::before { position: relative; z-index: 1; animation: stato-running-dot 1.6s ease-in-out infinite; }
.stato-running::after {
  content: "";
  position: absolute;
  left: 0.85rem;
  top: 50%;
  transform: translateY(-50%) scale(1);
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--color-info);
  animation: stato-running-ring 1.6s ease-out infinite;
}
@keyframes stato-running-dot { 0%, 100% { opacity: 1; } 50% { opacity: 0.45; } }
@keyframes stato-running-ring {
  0% { opacity: 0.55; transform: translateY(-50%) scale(1); }
  100% { opacity: 0; transform: translateY(-50%) scale(3.2); }
}

/* Una card che contiene un badge "in corso" guadagna una barra di avanzamento indeterminata in
   fondo - segnale ambientale di "sto ancora facendo qualcosa" che non richiede JS ne' markup
   dedicato (:has() e' supportato da tutti i browser moderni; dove non lo fosse la card resta
   semplicemente statica, nessuna rottura). */
.card:has(.stato-running) { position: relative; overflow: hidden; }
.card:has(.stato-running)::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 3px;
  background: linear-gradient(90deg, transparent, var(--color-info), var(--color-primary), transparent);
  background-size: 60% 100%;
  animation: card-progress-sweep 1.8s ease-in-out infinite;
}
@keyframes card-progress-sweep {
  0% { background-position: -60% 0; }
  100% { background-position: 160% 0; }
}

/* ---------- Callout (avvisi contestuali) ---------- */

.callout {
  background: var(--color-warning-light);
  border: 1px solid rgba(217, 119, 6, 0.22);
  border-radius: var(--radius-md);
  padding: 0.9rem 1.1rem;
}
.callout-label {
  font-weight: 700;
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--color-warning-dark);
  margin: 0 0 0.35rem;
}
.callout p:not(.callout-label) { margin: 0; font-size: 0.85rem; color: var(--color-text); }

/* ---------- Error / info inline boxes ---------- */

.error-box {
  display: inline-block;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.82rem;
  background: var(--color-danger-light);
  border: 1px solid rgba(220, 38, 38, 0.22);
  color: var(--color-danger-dark);
  border-radius: var(--radius-sm);
  padding: 0.6rem 0.85rem;
}

.info-note {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.75rem;
  background: var(--color-primary-light);
  color: var(--color-primary-dark);
  border-radius: var(--radius-sm);
  padding: 0.5rem 0.75rem;
  margin-top: 0.6rem;
}

/* ---------- Criteria box (spiegazione keyword nel calendario) ---------- */

.criteria-box {
  margin: 0.45rem 0 0;
  padding: 0.55rem 0.7rem 0.55rem 1.5rem;
  background: var(--color-surface-alt);
  border-left: 3px solid var(--color-primary);
  border-radius: var(--radius-sm);
  list-style: disc;
}
.criteria-box li { margin-bottom: 0.2rem; }
.criteria-box li:last-child { margin-bottom: 0; }

/* ---------- Preview / brief boxes (calendario/articolo.php) ---------- */

.preview-box {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 1rem;
  max-height: 32rem;
  overflow: auto;
  background: var(--color-surface);
  margin-bottom: 1rem;
}

.brief-pre {
  white-space: pre-wrap;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.78rem;
  background: var(--color-surface-alt);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: 0.85rem;
  max-height: 24rem;
  overflow: auto;
  margin: 0;
}

.resource-option {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: 0.75rem;
  margin-bottom: 0.5rem;
  transition: border-color var(--ease) 120ms, background var(--ease) 120ms;
}
.resource-option:hover { border-color: var(--color-primary); background: var(--color-primary-light); }

/* ---------- Candidati di pianificazione (pianifica/risultati.php) ---------- */

.cand-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 1rem;
  padding: 0.9rem 1.1rem;
  border-bottom: 1px solid var(--color-border);
  transition: background var(--ease) 120ms;
}
.cand-row:last-child { border-bottom: none; }
.cand-row:hover { background: var(--color-surface-alt); }
.cand-row.promosso { opacity: 0.55; }

.badge-scoperta, .badge-standard {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  font-size: 0.68rem;
  font-weight: 700;
  padding: 0.16rem 0.55rem;
  border-radius: var(--radius-pill);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
.badge-scoperta::before, .badge-standard::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.badge-scoperta { background: var(--color-warning-light); color: var(--color-warning-dark); }
.badge-standard { background: var(--color-surface-alt); color: var(--color-text-subtle); border: 1px solid var(--color-border); }
.badge-opportunita {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  font-size: 0.68rem;
  font-weight: 700;
  padding: 0.16rem 0.55rem;
  border-radius: var(--radius-pill);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  background: #ecfdf5;
  color: #047857;
  border: 1px solid #a7f3d0;
}
.badge-opportunita::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }

.mese-evidenziato { background: var(--color-success-light); color: var(--color-success-dark); padding: 0.05rem 0.4rem; border-radius: 4px; font-weight: 700; }

/* Keyword modificabile al volo in pianifica/risultati.php (01/09): stessa resa visiva di un
   <strong>, ma editabile - il bordo compare solo al focus per non sembrare un campo modulo. */
.cand-keyword-input {
  font-weight: 700; font-size: inherit; font-family: inherit; color: var(--color-text);
  border: 1px solid transparent; background: transparent; padding: 0.1rem 0.3rem;
  border-radius: 4px; min-width: 16rem; max-width: 100%;
}
.cand-keyword-input:hover { border-color: var(--color-border); }
.cand-keyword-input:focus { border-color: var(--color-primary); background: var(--color-surface); outline: none; }
.stat-mini { display: inline-block; margin-right: 0.9rem; font-size: 0.875rem; }

/* Chip informativi (30/08→01/09): stesso pattern visivo di .badge-scoperta/.badge-standard, ma
   riusabile per qualunque elenco di segnali misti (mercato/lingua, volume, priorita', ecc.) dove
   prima c'era un elenco puntato piatto - a colpo d'occhio si distinguono tipi di informazione
   diversi invece di dover leggere ogni riga per capire di cosa si tratta. */
.chip-list { display: flex; flex-wrap: wrap; gap: 0.4rem; list-style: none; margin: 0.5rem 0 0; padding: 0; }
/* UNA PILLOLA NON PUO' ESSERE PIU' LARGA DI CIO' CHE LA CONTIENE (08/09/2026).
   Misurato sul calendario: la pillola con la spiegazione di come e' stata trovata la keyword
   ("trovata chiedendo a Google ...", 240 caratteri) era larga 1209 px dentro una scheda da 1035, e
   con `white-space: nowrap` non poteva accorciarsi. Da li' tre effetti a catena: la scheda sforava,
   il gruppo di bottoni a destra finiva FUORI dal riquadro (bordo destro a 1532 contro 1324), e
   l'intera pagina scorreva in orizzontale (1629 contro 1440 di finestra).
   `nowrap` va bene per le pillole corte, ma qui una di esse e' una frase intera: quindi si lascia
   andare a capo quando serve e non si permette mai di superare il contenitore. Le pillole corte
   restano su una riga da sole, semplicemente perche' ci stanno. */
.info-chip {
  display: inline-flex; align-items: center; gap: 0.3rem;
  font-size: 0.74rem; font-weight: 600; padding: 0.2rem 0.6rem;
  border-radius: var(--radius-pill); line-height: 1.4;
  max-width: 100%; white-space: normal; overflow-wrap: anywhere;
}
.info-chip-neutro { background: var(--color-surface-alt); color: var(--color-text-muted); border: 1px solid var(--color-border); }
.info-chip-successo { background: var(--color-success-light); color: var(--color-success-dark); }
.info-chip-info { background: var(--color-info-light); color: var(--color-info-dark); }
.info-chip-teal { background: var(--color-teal-light); color: var(--color-teal-dark); }
.info-chip-warning { background: var(--color-warning-light); color: var(--color-warning-dark); }
.info-chip-primario { background: var(--color-primary-light); color: var(--color-primary-dark); }
.info-chip-muto { background: var(--color-surface-alt); color: var(--color-text-subtle); border: 1px dashed var(--color-border); }

/* ---------- Recensioni ---------- */

.stars { color: #f59e0b; letter-spacing: 0.05em; }

/* ============================================================
   Dashboard (index.php)
   ============================================================ */

.dashboard-intro { color: var(--color-text-muted); margin: -0.75rem 0 1.75rem; max-width: 62ch; }

.stat-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.1rem;
  margin-bottom: 2rem;
}

/* VARIANTI DI COLONNE COME CLASSI, NON COME `style=""` (08/09/2026).
   Console SEO aveva `style="grid-template-columns: repeat(6, 1fr)"` scritto nell'HTML: uno stile
   in linea batte QUALUNQUE regola del foglio di stile, media query comprese — quindi su un telefono
   da 375 px quella pagina disegnava comunque **sei colonne da 45 px**, con le schede accartocciate e
   la griglia che sfondava di 39 px. Le due riduzioni piu' in basso (a 2 colonne e poi a 1) non
   avevano modo di intervenire. Come classi invece si lasciano sovrascrivere. */
.stat-grid-6 { grid-template-columns: repeat(6, 1fr); }
.stat-grid-2 { grid-template-columns: repeat(2, 1fr); }

.stat-card {
  min-width: 0; /* senza, la scheda non scende sotto la larghezza del suo contenuto e sfonda la griglia sul telefono (08/09/2026) */
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: 1.25rem 1.35rem;
  box-shadow: var(--shadow-xs);
  position: relative;
  overflow: hidden;
  transition: box-shadow var(--ease) 150ms, transform var(--ease) 150ms, border-color var(--ease) 150ms;
}
.stat-card:hover { box-shadow: var(--shadow-md), 0 0 26px -10px rgba(var(--color-primary-rgb), 0.35); transform: translateY(-3px); border-color: var(--color-border-strong); }

/* I riquadri della Panoramica sono <a>: neutralizza lo stile link ereditato e segnala che si
   clicca (01/09/2026 - prima erano <div> non cliccabili). */
.stat-card-link { display: block; text-decoration: none; color: inherit; cursor: pointer; }
.stat-card-link:hover { text-decoration: none; color: inherit; }
.stat-card-link:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; }

.stat-card::before {
  content: "";
  position: absolute;
  inset: 0 auto auto 0;
  width: 100%;
  height: 4px;
  background: linear-gradient(90deg, var(--stat-accent, var(--color-primary)), var(--stat-accent-2, var(--stat-accent, var(--color-primary))));
}

.stat-icon {
  font-size: 1.1rem;
  margin-bottom: 0.75rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.35rem;
  height: 2.35rem;
  border-radius: var(--radius-md);
  background: var(--stat-icon-bg, var(--color-primary-light));
  transition: transform var(--ease-spring) 320ms;
}
.stat-card:hover .stat-icon { transform: scale(1.1) rotate(-3deg); }
.stat-value { font-family: var(--font-display); font-size: 2.05rem; font-weight: 700; letter-spacing: -0.01em; line-height: 1; color: var(--color-text); font-variant-numeric: tabular-nums; }
.stat-label { font-size: 0.78rem; color: var(--color-text-muted); margin-top: 0.45rem; font-weight: 500; }

.stat-card.accent-primary { --stat-accent: var(--color-primary); --stat-accent-2: var(--color-accent); --stat-icon-bg: var(--color-primary-light); }
.stat-card.accent-warning { --stat-accent: var(--color-warning); --stat-accent-2: #f59e0b; --stat-icon-bg: var(--color-warning-light); }
.stat-card.accent-info { --stat-accent: var(--color-info); --stat-accent-2: #38bdf8; --stat-icon-bg: var(--color-info-light); }
.stat-card.accent-success { --stat-accent: var(--color-success); --stat-accent-2: #4ade80; --stat-icon-bg: var(--color-success-light); }
.stat-card.accent-danger { --stat-accent: var(--color-danger); --stat-accent-2: #f87171; --stat-icon-bg: var(--color-danger-light); }
.stat-card.accent-teal { --stat-accent: var(--color-teal); --stat-accent-2: #2dd4bf; --stat-icon-bg: var(--color-teal-light); }

.section-heading {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin: 2.25rem 0 1rem;
}
.section-heading h2 { margin: 0; }
.section-heading .text-xs a { color: var(--color-primary); font-weight: 600; text-decoration: none; }
.section-heading .text-xs a:hover { text-decoration: underline; }

.nav-card-badge {
  position: absolute;
  top: 1.1rem;
  right: 1.25rem;
  background: var(--color-warning-light);
  color: var(--color-warning-dark);
  font-size: 0.72rem;
  font-weight: 700;
  padding: 0.22rem 0.6rem;
  border-radius: var(--radius-pill);
}

.mini-list { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); box-shadow: var(--shadow-xs); overflow: hidden; }
.mini-list-empty { padding: 1.5rem; color: var(--color-text-muted); font-size: 0.875rem; }

/* Login: vedi sezione dedicata "Login: pannello diviso" piu' in basso nel file per
   .login-shell/.login-visual/.login-page/.login-card (spostata li' insieme al resto dei
   componenti aggiunti nel secondo giro di restyling). */

/* ---------- Sidebar footer (account/logout) ---------- */

.sidebar-footer {
  margin-top: auto;
  padding-top: 0.75rem;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.sidebar-footer-user {
  font-size: 0.78rem;
  color: #9298c2;
  padding: 0.2rem 0.65rem 0.5rem;
}

.sidebar-footer a {
  display: block;
  font-size: 0.82rem;
  padding: 0.4rem 0.65rem;
}

/* ============================================================
   Responsive
   ============================================================ */

@media (max-width: 980px) {
  .layout { flex-direction: column; }
  .sidebar {
    width: 100%;
    height: auto;
    position: relative;
    top: auto;
    padding: 1rem;
  }
  .sidebar-nav { flex-direction: row; flex-wrap: wrap; }
  .sidebar-nav a { flex: 1 1 auto; }
  .sidebar-footer { display: flex; align-items: center; gap: 0.5rem; margin-top: 0.5rem; border-top: none; padding-top: 0; flex-wrap: wrap; }
  .sidebar-footer-user { padding: 0.2rem 0.65rem; }
  .sidebar-footer a { display: inline-block; padding: 0.35rem 0.65rem; }
  .content { padding: 1.5rem 1.25rem 2.5rem; max-width: 100%; }
  .stat-grid, .stat-grid-6, .stat-grid-2 { grid-template-columns: repeat(2, 1fr); }
  .grid-2, .grid-3 { grid-template-columns: 1fr; }
  .page-head { flex-direction: column; align-items: stretch; }
  .page-head-actions { width: 100%; }
}

@media (max-width: 620px) {
  .stat-grid, .stat-grid-6, .stat-grid-2 { grid-template-columns: 1fr; }
  .filters { flex-direction: column; align-items: stretch; }
  .filters select, .filters input[type=text] { width: 100%; min-width: 0; }
  .list-item { flex-direction: column; align-items: flex-start; }
  .row { row-gap: 0.5rem; }
}

/* Tabella dati vera (console SEO e futuri usi) - scroll orizzontale su schermi stretti,
   intestazioni cliccabili per ordinamento server-side (link semplici, no JS). */
.data-table-wrap { position: relative; overflow-x: auto; border-radius: var(--radius-lg); border: 1px solid var(--color-border); background: var(--color-surface); }
/* Sottile cappello a gradiente indigo->teal in cima a ogni tabella dati, per dare un accento
   "tech" coerente ovunque compaiano dati tabellari senza toccare la struttura <table> reale. */
.data-table-wrap::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--color-primary), var(--color-teal));
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}
.data-table { width: 100%; border-collapse: collapse; font-size: 0.85rem; white-space: nowrap; }
.data-table th, .data-table td { padding: 0.65rem 0.9rem; text-align: left; border-bottom: 1px solid var(--color-border); }
.data-table thead th { background: var(--color-surface-alt); font-weight: 600; color: var(--color-text-muted); font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.03em; position: sticky; top: 0; }
.data-table th a { color: inherit; text-decoration: none; }
.data-table th a:hover { color: var(--color-primary); }
.data-table th a.sorted { color: var(--color-primary); }
.data-table tbody tr { transition: background var(--ease) 100ms, box-shadow var(--ease) 100ms; }
.data-table tbody tr:hover { background: var(--color-surface-alt); box-shadow: inset 3px 0 0 var(--color-primary); }
.data-table tbody tr:last-child td { border-bottom: none; }
.data-table td.num, .data-table th.num { text-align: right; font-variant-numeric: tabular-nums; }
.data-table td.cell-keyword { white-space: normal; max-width: 320px; font-weight: 500; }
.data-table td a.ext-link { color: var(--color-text-subtle); font-size: 0.75rem; }

/* Card "modulo" con <details>/<summary> nativo - interattivita' senza JS (Console SEO). */
.module-card summary {
  list-style: none;
  cursor: pointer;
  font-size: 1rem;
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.1rem 0 0.1rem 1.6rem;
  position: relative;
  color: var(--color-text);
  user-select: none;
}
.module-card summary::-webkit-details-marker { display: none; }
.module-card summary::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 0.6rem;
  height: 0.6rem;
  border-right: 2px solid var(--color-text-subtle);
  border-bottom: 2px solid var(--color-text-subtle);
  transform: translateY(-65%) rotate(-45deg);
  transition: transform var(--ease) 150ms;
}
.module-card[open] summary::before { transform: translateY(-35%) rotate(45deg); }
.module-card summary:hover::before { border-color: var(--color-primary); }
.module-card .module-icon { font-size: 1.2rem; transition: transform var(--ease-spring) 320ms; }
.module-card summary:hover .module-icon { transform: scale(1.12) rotate(-4deg); }
.module-card p.text-xs, .module-card form { margin-top: 0.85rem; }
.module-card[open] { border-color: var(--color-primary-soft); }

/* Il contenuto si apre con una piccola dissolvenza+scivolata invece di comparire di scatto -
   <details>/<summary> restano nativi (funzionano identici senza JS/CSS), e' solo rifinitura
   sull'animazione gia' presente sulla freccia. */
@keyframes module-card-reveal {
  from { opacity: 0; transform: translateY(-4px); }
  to { opacity: 1; transform: translateY(0); }
}
.module-card[open] > *:not(summary) { animation: module-card-reveal 220ms var(--ease) both; }

/* Barra orizzontale semplice per distribuzioni categoriche (audit issues, backlink dofollow/nofollow). */
.bar-chart { display: flex; flex-direction: column; gap: 0.55rem; }
.bar-chart-row { display: grid; grid-template-columns: 170px 1fr 3.2rem; align-items: center; gap: 0.6rem; font-size: 0.82rem; }
.bar-chart-row .bar-label { color: var(--color-text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bar-chart-track { background: var(--color-surface-alt); border-radius: var(--radius-pill); height: 10px; overflow: hidden; }
.bar-chart-fill { height: 100%; border-radius: var(--radius-pill); transform-origin: left; animation: bar-chart-grow 700ms var(--ease) both; }
.bar-chart-row .bar-value { text-align: right; font-variant-numeric: tabular-nums; color: var(--color-text-muted); }
@keyframes bar-chart-grow { from { transform: scaleX(0); } to { transform: scaleX(1); } }
/* Ogni riga parte con un piccolo ritardo scalare in base alla sua posizione, cosi' il grafico si
   "costruisce" invece di apparire tutto insieme - puro effetto CSS, i dati/valori sono identici. */
.bar-chart-row:nth-child(1) .bar-chart-fill { animation-delay: 0ms; }
.bar-chart-row:nth-child(2) .bar-chart-fill { animation-delay: 40ms; }
.bar-chart-row:nth-child(3) .bar-chart-fill { animation-delay: 80ms; }
.bar-chart-row:nth-child(4) .bar-chart-fill { animation-delay: 120ms; }
.bar-chart-row:nth-child(5) .bar-chart-fill { animation-delay: 160ms; }
.bar-chart-row:nth-child(n+6) .bar-chart-fill { animation-delay: 200ms; }

/* Filtro live lato client per tabelle grandi (progressive enhancement - la tabella funziona
   identica senza JS, il filtro e' solo un aiuto in piu'). */
.table-filter { margin-bottom: 0.85rem; max-width: 320px; }

/* Avviso di costo accanto ai bottoni che fanno una chiamata reale a pagamento (o esplicitamente
   "gratuito" per azioni che invece non ne fanno, cosi' non resta ambiguo). */
/* `white-space: normal` + `max-width: 100%` per lo stesso motivo di .info-chip (08/09/2026): alcune
   di queste targhette sono frasi intere ("chiamata reale a pagamento, ~$0,01 + ..."), misurate fino
   a 516 px, e con `nowrap` uscivano dal riquadro sugli schermi stretti. */
.cost-note { display: inline-flex; align-items: center; gap: 0.35rem; font-size: 0.72rem; padding: 0.25rem 0.6rem; border-radius: var(--radius-pill); font-weight: 600; margin-left: 0.6rem; vertical-align: middle; white-space: normal; max-width: 100%; }
.cost-note.cost-paid { background: var(--color-warning-light); color: var(--color-warning-dark); border: 1px solid rgba(217, 119, 6, 0.22); }
.cost-note.cost-free { background: var(--color-success-light); color: var(--color-success-dark); border: 1px solid rgba(22, 163, 74, 0.2); }

/* ============================================================
   Page head - intestazione standard di pagina (titolo + sottotitolo
   + azione opzionale a destra), sostituisce il pattern ad-hoc
   "<h1> + <p style="margin-top:-1rem">" ripetuto su ogni pagina.
   ============================================================ */

.page-head {
  position: relative;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1.5rem;
  margin-bottom: 1.75rem;
  padding-bottom: 1.1rem;
  flex-wrap: wrap;
}
/* Riga di chiusura a gradiente indigo->teal che sfuma verso destra - firma visiva discreta,
   ripetuta su ogni pagina perche' .page-head e' gia' lo header condiviso, nessun markup nuovo. */
.page-head::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 1px;
  background: linear-gradient(90deg, rgba(var(--color-primary-rgb), 0.35), rgba(var(--color-teal-rgb), 0.25) 45%, transparent 85%);
}
.page-head h1 { margin-bottom: 0.4rem; }
.page-head-sub { color: var(--color-text-muted); margin: 0; max-width: 68ch; font-size: 0.92rem; line-height: 1.55; }
.page-head-actions { display: flex; align-items: center; gap: 0.6rem; flex-shrink: 0; }
.page-head-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-primary);
  margin: 0 0 0.5rem;
}

/* Titolo con leggero effetto gradiente - riservato a un pugno di pagine "hub" (dashboard, login,
   Console SEO) per dare un punto focale, non usato ovunque per non banalizzarlo. Fallback: se
   background-clip:text non fosse supportato il testo resta semplicemente color:var(--color-text). */
.heading-gradient {
  background: linear-gradient(120deg, var(--color-text) 12%, var(--color-primary) 55%, var(--color-teal) 82%, var(--color-accent));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* ---------- Empty states ---------- */

.empty-state {
  padding: 2.75rem 1.5rem;
  text-align: center;
  color: var(--color-text-muted);
  border: 1.5px dashed var(--color-border-strong);
  border-radius: var(--radius-lg);
  background: var(--color-surface-alt);
}
.empty-state-icon {
  font-size: 1.9rem;
  margin-bottom: 0.6rem;
  opacity: 0.75;
  display: block;
}
.empty-state-title { font-weight: 700; color: var(--color-text); font-size: 0.95rem; margin-bottom: 0.25rem; }
.empty-state-hint { font-size: 0.82rem; max-width: 42ch; margin: 0 auto; }
/* Dentro un contenitore che ha gia' un bordo/ombra proprio (es. .card, .data-table-wrap) lo stato
   vuoto non deve raddoppiare bordo+sfondo - versione "flat" per quei casi. */
.card > .empty-state, .data-table-wrap .empty-state, .mini-list .empty-state {
  border: none;
  background: transparent;
  border-radius: 0;
}

/* ---------- Login: pannello diviso ---------- */

.login-shell {
  min-height: 100vh;
  display: flex;
}
.login-visual {
  flex: 1 1 46%;
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 3rem 3.5rem;
  color: #fff;
  /* Stesso pannello diagonale gia' in uso + la griglia tecnica condivisa con la sidebar, cosi'
     il pannello di login sembra la stessa "famiglia" di superficie invece di uno sfondo a se'. */
  background:
    linear-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.05) 1px, transparent 1px),
    linear-gradient(155deg, var(--color-sidebar-start) 0%, var(--color-primary-darker) 62%, var(--color-teal-dark) 130%);
  background-size: var(--grid-size) var(--grid-size), var(--grid-size) var(--grid-size), auto;
}
.login-visual::before, .login-visual::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  filter: blur(10px);
  opacity: 0.5;
}
.login-visual::before { width: 22rem; height: 22rem; background: radial-gradient(circle, rgba(124, 58, 237, 0.55), transparent 70%); top: -8rem; right: -6rem; }
.login-visual::after { width: 18rem; height: 18rem; background: radial-gradient(circle, rgba(13, 148, 136, 0.5), transparent 70%); bottom: -7rem; left: -5rem; }
.login-visual-content { position: relative; z-index: 1; max-width: 30rem; }
.login-visual-brand { font-family: var(--font-display); font-size: 1.5rem; font-weight: 700; letter-spacing: -0.01em; margin-bottom: 0.5rem; }
.login-visual-tag { color: #c7cbe8; font-size: 0.95rem; line-height: 1.6; }
.login-visual-points { list-style: none; margin: 2rem 0 0; padding: 0; display: flex; flex-direction: column; gap: 0.85rem; }
.login-visual-points li { display: flex; align-items: center; gap: 0.65rem; font-size: 0.85rem; color: #dfe1f5; }
.login-visual-points li::before { content: "✓"; display: inline-flex; align-items: center; justify-content: center; width: 1.4rem; height: 1.4rem; border-radius: 50%; background: rgba(255, 255, 255, 0.12); font-size: 0.7rem; flex-shrink: 0; }

.login-page {
  flex: 1 1 54%;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
}

.login-card { width: 100%; max-width: 380px; box-shadow: var(--shadow-lg); animation: module-card-reveal 380ms var(--ease) both; }
.login-card h1 { font-size: 1.4rem; margin-bottom: 0.15rem; }

@media (max-width: 860px) {
  .login-shell { flex-direction: column; }
  .login-visual { flex: none; padding: 2.25rem 1.75rem; }
  .login-visual-points { display: none; }
}

/* ============================================================
   Vetro/profondita' (terzo giro di restyling)
   Va in fondo al file di proposito: deve vincere in cascata sulle
   dichiarazioni "background" piene di .card/.stat-card/.filters/
   .mini-list/.data-table-wrap/.login-card definite piu' sopra
   (stessa specificita' di selettore, l'ultima regola nel file
   vince). Fallback automatico: dove backdrop-filter non e'
   supportato queste regole non si applicano affatto e resta lo
   sfondo pieno gia' dichiarato sopra - nessuna rottura, nessun
   markup nuovo richiesto. */
@supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) {
  .card, .stat-card, .filters, .mini-list, .data-table-wrap {
    background: rgba(var(--color-surface-rgb), 0.74);
    -webkit-backdrop-filter: blur(18px) saturate(150%);
    backdrop-filter: blur(18px) saturate(150%);
  }
}

/* ---------- Fasce della scheda hotel (05/09/2026) ----------
   La scheda aveva 14 card tutte uguali una sotto l'altra: nessuna gerarchia, e per capire dove
   fosse un campo bisognava scorrere tutto. Queste fasce raggruppano le card per scopo. Sono piu'
   grandi degli h2 (che nel progetto sono etichette piccole maiuscole DENTRO la card), cosi' si
   legge subito quale livello sta sopra quale. */
.form-sezione {
  display: flex;
  align-items: baseline;
  gap: 0.7rem;
  margin: 2.4rem 0 1rem;
  font-size: 1.02rem;
  font-weight: 700;
  color: var(--color-text);
  letter-spacing: -0.01em;
}
.form-sezione:first-child { margin-top: 0.4rem; }
.form-sezione span {
  font-size: 0.78rem;
  font-weight: 400;
  color: var(--color-text-muted);
  white-space: nowrap;
}
.form-sezione::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--color-border);
}

/* Dati di sola lettura della struttura collegata, ora dentro la stessa card della tendina che la
   sceglie: un filetto a sinistra li distingue dai campi modificabili sopra. */
.struttura-collegata {
  margin-top: 1rem;
  padding: 0.9rem 0 0.2rem 0.9rem;
  border-left: 3px solid var(--color-primary-soft);
  border-radius: 0;
}
.struttura-collegata > p:first-child { margin-bottom: 0.35rem; }