/* ==================================================================
   Re-solve — skin brand per AdminLTE 3.2 (aree riservate).
   Caricato DOPO adminlte.min.css. È auto-contenuto: porta la palette
   verde del brand, il font Poppins, gli override del tema AdminLTE e
   un "bridge" per i componenti legacy che i controller JS
   (app.js / studio.js / admin.js) iniettano a runtime con classi
   proprie (.button, .inline-form, .message, .config-pills,
   .provider-status, .tab-panel, .password-field, .cookie-banner).
   Sostituisce, su queste pagine, templatemo + styles.css + resolve.css.
   ================================================================== */

/* ---- Font self-hosted (CSP: niente Google Fonts CDN) ---- */
@font-face { font-family:"Poppins"; font-style:normal; font-weight:600; font-display:swap; src:url("../fonts/poppins-600.woff2") format("woff2"); }
@font-face { font-family:"Poppins"; font-style:normal; font-weight:700; font-display:swap; src:url("../fonts/poppins-700.woff2") format("woff2"); }
@font-face { font-family:"Poppins"; font-style:normal; font-weight:800; font-display:swap; src:url("../fonts/poppins-800.woff2") format("woff2"); }

/* ---- Palette brand (verde). Stessi NOMI di variabile dei vecchi
        fogli, così le regole-bridge sotto diventano verdi senza modifiche. */
:root {
  --primary: #1e3a2f;        /* verde scuro: sidebar, bordi, accenti */
  --primary-strong: #142a21;
  --action: #4e7d12;         /* verde leggibile su bianco: testo/accenti */
  --action-strong: #3d6210;
  --lime: #a4c639;           /* lime nativo del brand: CTA */
  --lime-strong: #8faf2f;
  --cyan: #a4c639;
  --coral: #c0392b;
  --success: #1f8a4c;
  --ink: #1b2336;
  --muted: #6b7280;
  --surface: #f4f6f9;        /* = sfondo content AdminLTE */
  --surface-strong: #e9f3df;
  --line: #dfe3ea;
  --white: #ffffff;
  --shadow: 0 .5rem 1rem rgba(0,0,0,.10);
  --radius: .35rem;
}

/* ==================================================================
   1. Override tema AdminLTE → verde brand
   ================================================================== */

body, .wrapper { font-family: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }
h1,h2,h3,h4,h5,h6,.brand-text,.btn { font-family:"Poppins", system-ui, sans-serif; }

/* Sidebar scura verde (usa .sidebar-dark-primary nel markup) */
.main-sidebar,
.sidebar-dark-primary { background-color: var(--primary); }
.sidebar-dark-primary .nav-sidebar > .nav-item > .nav-link.active,
.nav-sidebar > .nav-item > .nav-link.active {
  background-color: var(--lime);
  color: #143a1f;
  box-shadow: 0 0 6px rgba(0,0,0,.12);
}
.sidebar-dark-primary .nav-sidebar > .nav-item > .nav-link:not(.active):hover {
  background-color: rgba(255,255,255,.08);
  color: #fff;
}
.sidebar-dark-primary .nav-link p { color: #e7efe3; }
/* Testata brand: logo + etichetta ruolo IMPILATI e centrati, mai tagliati
   (il wordmark è largo: in linea col testo eccedeva i 250px della sidebar). */
.brand-link {
  height: auto;
  padding: .75rem .5rem;
  line-height: 1.1;
  white-space: normal;
  text-align: center;
  border-bottom: 1px solid rgba(255,255,255,.12);
  background: var(--primary-strong);
}
.brand-link .brand-image {
  display: block;
  float: none;
  margin: 0 auto .35rem;
  height: 34px;
  width: auto;
  max-width: 88%;
  max-height: 34px;
}
.brand-link .brand-text {
  display: block;
  white-space: normal;
  font-size: .82rem;
  font-weight: 600;
  color: #e7efe3;
}
/* Sidebar collassata: logo entro la larghezza ridotta (testo già nascosto da AdminLTE) */
.sidebar-collapse .brand-link .brand-image { max-width: 100%; }

/* Navbar topbar */
.main-header.navbar { border-bottom: 1px solid var(--line); }
.navbar-light .navbar-nav .nav-link { color: var(--ink); }
.navbar-light .navbar-nav .nav-link:hover { color: var(--action); }

/* Bottoni AdminLTE/Bootstrap → verde brand */
.btn-primary {
  background-color: var(--lime); border-color: var(--lime); color: #fff;
}
.btn-primary:hover, .btn-primary:focus, .btn-primary:active {
  background-color: var(--lime-strong); border-color: var(--lime-strong); color: #fff;
  box-shadow: 0 0 0 .2rem rgba(164,198,57,.4);
}
.btn-success { background-color: var(--success); border-color: var(--success); }
.btn-outline-primary { color: var(--action); border-color: var(--action); }
.btn-outline-primary:hover { background-color: var(--action); border-color: var(--action); color:#fff; }

/* Card / box accenti */
.card-primary:not(.card-outline) > .card-header { background-color: var(--primary); }
.card-outline.card-primary { border-top: 3px solid var(--lime); }
.small-box.bg-primary { background-color: var(--primary) !important; }
.small-box.bg-success { background-color: var(--lime) !important; color:#143a1f !important; }
.small-box.bg-success .icon, .small-box.bg-success a { color: rgba(20,58,31,.6) !important; }
.small-box.bg-info { background-color: var(--action) !important; }
a:not(.btn):not(.nav-link):not(.brand-link):not(.page-link) { color: var(--action); }
a:not(.btn):not(.nav-link):hover { color: var(--action-strong); }
.text-primary { color: var(--action) !important; }
.custom-control-input:checked ~ .custom-control-label::before { background-color: var(--lime); border-color: var(--lime); }
.form-control:focus { border-color: var(--lime); box-shadow: 0 0 0 .2rem rgba(164,198,57,.25); }
.page-item.active .page-link { background-color: var(--lime); border-color: var(--lime); }

/* ==================================================================
   2. Bridge componenti legacy (DOM iniettato dai controller JS)
   ================================================================== */

/* Tab system: app.js fa toggle della classe .active sui .tab-panel.
   QUESTA regola è il cardine del funzionamento delle schede. */
.tab-panel { display: none; }
.tab-panel.active { display: block; }

/* Router a sezioni (admin): dashboard-router.js fa toggle di .active.
   Nasconde le sezioni non attive preservandone il display naturale
   (grid per .dashboard-grid, block per le .card) → niente override del layout. */
.dash-panel:not(.active) { display: none !important; }

/* Intestazione pannello (login gate / staff panel iniettati) */
.panel-heading { display:flex; justify-content:space-between; gap:18px; align-items:flex-start; margin-bottom:18px; }
.panel-heading h3 { margin:0 0 4px; }
.panel-heading p { margin-bottom:0; color: var(--muted); }

/* Form "inline" (login gate iniettato da app.js/studio.js/admin.js) */
.inline-form { display:grid; grid-template-columns:repeat(auto-fit, minmax(210px,1fr)); gap:16px; align-items:end; margin-bottom:18px; max-width: 560px; }
.inline-form label { display:grid; gap:6px; font-weight:600; color: var(--ink); margin:0; }
.inline-form input, .inline-form select, .inline-form textarea {
  width:100%; border:1px solid var(--line); border-radius: var(--radius);
  padding:.5rem .75rem; background:#fff; color: var(--ink); font: inherit;
}
.inline-form input:focus, .inline-form select:focus, .inline-form textarea:focus {
  outline:none; border-color: var(--lime); box-shadow:0 0 0 .2rem rgba(164,198,57,.25);
}

/* Bottoni legacy (.button …) usati da login gate, badge logout, cookie banner */
.button {
  display:inline-flex; align-items:center; justify-content:center; min-height:40px;
  border:1px solid transparent; border-radius: var(--radius); padding:.5rem 1rem;
  font-weight:700; text-decoration:none; cursor:pointer; transition: all .16s ease;
}
.button.primary { background: var(--lime); color:#fff; }
.button.primary:hover, .button.primary:focus { background: var(--lime-strong); color:#fff; }
.button.secondary { background:#fff; border-color: var(--line); color: var(--action); }
.button.secondary:hover, .button.secondary:focus { border-color: var(--action); color: var(--action-strong); }
.button.success { background: var(--success); color:#fff; }
.button.small { min-height:32px; padding:.3rem .7rem; font-size:.85rem; }

/* Pills di stato configurazione (spostate nella navbar) */
.config-pills { display:flex; flex-wrap:wrap; gap:7px; align-items:center; margin:0; }
.config-pills span {
  display:inline-flex; align-items:center; min-height:26px; border-radius:999px;
  padding:3px 10px; font-size:.78rem; font-weight:700;
  border:1px solid rgba(192,57,43,.25); background:rgba(192,57,43,.07); color: var(--coral);
}
.config-pills span.ok { border-color:rgba(31,138,76,.28); background:rgba(31,138,76,.09); color: var(--success); }

/* Stato provider SMS + feedback testuali */
.provider-status {
  margin:0; padding:10px 12px; border-radius: var(--radius);
  border:1px solid rgba(192,57,43,.25); background:rgba(192,57,43,.07); color: var(--coral); font-weight:600;
}
.provider-status.ok { border-color:rgba(31,138,76,.28); background:rgba(31,138,76,.09); color: var(--success); }
.provider-status.error { border-color:rgba(192,57,43,.3); background:rgba(192,57,43,.08); color: var(--coral); }
#profile-feedback, #agreement-feedback, #otp-feedback, #login-feedback, #user-feedback, #crm-feedback, #referral-feedback {
  margin:.5rem 0 0; font-weight:600; color: var(--action);
}
#profile-feedback.error, #agreement-feedback.error, #otp-feedback.error, #login-feedback.error { color: var(--coral); }
#profile-feedback.ok, #agreement-feedback.ok, #otp-feedback.ok, #login-feedback.ok { color: var(--success); }

/* Timeline pratica (contenitore .sad-timeline per non collidere con
   il componente .timeline di AdminLTE; app.js agisce solo su .timeline-step) */
.sad-timeline { display:grid; gap:0; }
.timeline-step { display:grid; grid-template-columns:24px 1fr; gap:12px; min-height:70px; position:relative; }
.timeline-step::after { content:""; position:absolute; left:9px; top:22px; bottom:0; width:2px; background: var(--line); }
.timeline-step:last-child::after { display:none; }
.timeline-step > span { width:20px; height:20px; border-radius:50%; border:3px solid var(--line); background:#fff; z-index:1; }
.timeline-step.complete > span { border-color: var(--success); background: var(--success); }
.timeline-step.current > span { border-color: var(--primary); background: var(--lime); }
.timeline-step strong { font-weight:700; }
.timeline-step small { display:block; color: var(--muted); margin-top:2px; }

/* Lista documenti (#document-list, item iniettati da app.js) */
.document-list { display:grid; gap:10px; margin:0; padding:0; list-style:none; }
.document-list li { display:flex; justify-content:space-between; gap:12px; border:1px solid var(--line); border-radius: var(--radius); padding:12px; background:#fff; }
.document-list span { color: var(--muted); }

/* Zona upload */
.upload-zone { min-height:150px; display:grid; place-items:center; text-align:center; border:2px dashed var(--line); border-radius: var(--radius); background: var(--surface); padding:22px; cursor:pointer; }
.upload-zone strong { color: var(--ink); }
.upload-zone span { color: var(--muted); }
.upload-zone input { max-width:340px; }

/* Chat (#chat-log + .message iniettati, .chat-form) */
.chat-log { display:grid; gap:12px; max-height:430px; overflow:auto; padding:4px; }
.message { max-width:78%; padding:12px 14px; border-radius: var(--radius); background: var(--surface); }
.message.studio { border-left:4px solid var(--primary); }
.message.client { justify-self:end; background: var(--surface-strong); border-right:4px solid var(--success); }
.message strong, .message small { display:block; }
.message small { color: var(--muted); margin-top:4px; }
.chat-form { display:grid; grid-template-columns:1fr auto; gap:10px; margin-top:16px; }

/* Riquadri riepilogo mandato / OTP / accordo (markup statico ricostruito) */
.agreement-result { display:grid; grid-template-columns:repeat(auto-fit, minmax(180px,1fr)); gap:12px; margin:16px 0; }
.agreement-result > div { padding:14px 16px; border:1px solid var(--line); border-radius: var(--radius); background: var(--surface); }
.agreement-result span { display:block; color: var(--muted); font-size:.85rem; }
.agreement-result strong { display:block; font-size:1.2rem; color: var(--action); }
.agreement-actions { display:flex; flex-wrap:wrap; gap:12px; align-items:center; }
.consent-row { display:flex; align-items:flex-start; gap:10px; font-weight:500; color: var(--muted); }
.consent-row input { width:18px; height:18px; min-width:18px; margin-top:2px; }

/* Campo password con toggle occhio (password-toggle.js) */
.password-field { position:relative; display:block; }
.password-field input { width:100%; padding-right:2.6rem; }
.password-field .toggle-eye { position:absolute; top:50%; right:8px; transform:translateY(-50%); width:30px; height:30px; padding:0; border:none; border-radius:6px; background:transparent; color: var(--muted); cursor:pointer; display:inline-flex; align-items:center; justify-content:center; }
.password-field .toggle-eye:hover { color: var(--primary); background: var(--surface-strong); }
.password-field .toggle-eye:focus-visible { outline:2px solid var(--lime); outline-offset:1px; }

/* Banner consenso cookie (cookie-consent.js, presente su tutte le pagine) */
.cookie-banner { position:fixed; left:50%; bottom:16px; transform:translateX(-50%); width:min(720px, calc(100% - 24px)); z-index:1050; background:#fff; border:1px solid var(--line); border-top:4px solid var(--lime); border-radius: var(--radius); box-shadow: var(--shadow); }
.cookie-banner-body { padding:18px 20px; }
.cookie-banner-body p { margin:0 0 10px; font-size:.9rem; line-height:1.5; color: var(--ink); }
.cookie-banner-body a { color: var(--action); font-weight:600; }
.cookie-options { display:flex; flex-wrap:wrap; gap:14px; margin-bottom:12px; font-size:.85rem; color: var(--muted); }
.cookie-options label { display:inline-flex; align-items:center; gap:6px; }
.cookie-actions { display:flex; flex-wrap:wrap; gap:10px; justify-content:flex-end; }

/* Overview admin (#overview): .dashboard-grid > .status-card iniettate da admin.js */
.dashboard-grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(220px,1fr)); gap:1rem; margin-bottom:1rem; }
.status-card { background:#fff; border:1px solid var(--line); border-left:4px solid var(--lime); border-radius: var(--radius); padding:1.1rem 1.25rem; box-shadow:0 0 1px rgba(0,0,0,.08); }
.status-card .card-label { display:block; text-transform:uppercase; letter-spacing:.05em; font-size:.72rem; font-weight:800; color: var(--muted); }
.status-card h3 { margin:.25rem 0 .15rem; font-size:1.8rem; font-weight:800; color: var(--action); }
.status-card p { margin:0; color: var(--muted); font-size:.85rem; }

/* Dettaglio pratica studio (#detail): contenuto iniettato da studio.js */
#detail { margin-top:1rem; }
#detail h3 { font-size:1.3rem; }
#detail h4 { margin-top:1.5rem; padding-top:.75rem; border-top:1px solid var(--line); font-size:1.05rem; color: var(--primary); }

/* Select multi-uso nelle tabelle admin (assegna studio) */
.table td select.form-control-sm, .table td .form-control { min-width:140px; }

/* Utility minori */
.brand-eyebrow { text-transform:uppercase; letter-spacing:.08em; font-size:.72rem; font-weight:800; color: var(--lime-strong); }
.text-muted-2 { color: var(--muted); }

/* ---- Modale "Inserisci pratica": iframe del form di analisi (analisi.html embed) ----
   Bootstrap 4 con modal-dialog-scrollable + iframe collassa l'altezza dell'iframe; qui
   diamo dimensioni esplicite (larga + alta, responsive) così il form riempie la modale. */
#practice-modal .modal-dialog {
  max-width: 1140px;
  width: calc(100% - 2rem);
  margin: 1.5rem auto;
}
/* Niente slide-in: il dialog è alto quanto il viewport, quindi il translateY(-50px)
   dell'animazione fade di Bootstrap lo taglierebbe in alto. Restiamo al fade del backdrop. */
#practice-modal .modal-dialog { transform: none !important; transition: none !important; }
#practice-modal .modal-content {
  height: calc(100vh - 5rem);
  max-height: 940px;
  border: 0;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 18px 48px rgba(20, 40, 20, .22);
}
#practice-modal .modal-header {
  background: #fff;
  border-bottom: 2px solid var(--lime);
  padding: 1rem 1.25rem;
}
#practice-modal .modal-title { font-weight: 800; color: var(--primary); }
/* modal-body è il contenitore flex: ospita l'iframe (riempie) o il pannello di successo (centrato). */
#practice-modal .modal-body { padding: 0; overflow: hidden; display: flex; flex-direction: column; }
#practice-frame { flex: 1 1 auto; width: 100%; height: 100%; min-height: 0; border: 0; display: block; }
#practice-success { margin: auto; max-width: 540px; padding: 2.5rem 1.5rem; }
#practice-success .lead { font-size: 1.25rem; }

/* Sotto i 992px la modale diventa quasi a tutto schermo per non comprimere il form. */
@media (max-width: 991.98px) {
  #practice-modal .modal-dialog { width: calc(100% - 1rem); margin: .5rem auto; }
  #practice-modal .modal-content { height: calc(100vh - 1rem); max-height: none; }
}

/* ==================================================================
   3. Polish dashboard admin (riusa solo le variabili brand sopra)
   ================================================================== */

/* ---- 3.1 Fix sovrapposizione titolo/sottotitolo negli header ----
   AdminLTE imposta `.card-title{float:left}`: l'h3 esce dal flusso e il <p>
   sottostante risale sovrapponendosi. Annulliamo il float e impaginiamo
   l'header come blocco pulito (titolo sopra, descrizione sotto). */
.card-header .card-title { float: none; line-height: 1.3; margin: 0; }

/* Il contenitore titolo+sottotitolo (div dentro l'header d-flex) impila in
   colonna e può restringersi senza spingere fuori il bottone d'azione. */
.card-header > div { min-width: 0; }

/* Sottotitolo di sezione: respiro e leggibilità, sia <p> sia <span> inline. */
.card-header .text-muted-2 {
  display: block;
  margin-top: .15rem;
  margin-bottom: 0;
  font-size: .85rem;
  line-height: 1.4;
}
/* L'Audit log usa <span class="text-muted-2 ml-2"> inline accanto al titolo:
   in quel caso resta sulla stessa riga, allineato alla baseline del titolo. */
.card-header .card-title + .text-muted-2 {
  display: inline-block;
  margin-top: 0;
  vertical-align: middle;
}

/* ---- 3.2 Header sezioni: gerarchia e padding uniformi ---- */
.card-header {
  padding: 1rem 1.25rem;
  border-bottom: 1px solid var(--line);
}
.card-title {
  font-family: "Poppins", system-ui, sans-serif;
  font-size: 1.15rem;
  font-weight: 600;
  color: var(--primary);
}

/* ---- 3.3 Spaziatura costante tra le card di sezione ---- */
#app > .card { margin-bottom: 1.25rem; }
.content-header { padding-bottom: 1rem; }

/* ---- 3.4 Stat card overview: profondità all'hover senza layout shift ---- */
.status-card {
  transition: box-shadow .2s ease, border-color .2s ease;
}
.status-card:hover {
  box-shadow: var(--shadow);
  border-color: var(--lime);
}
.status-card h3 { line-height: 1.15; }

/* ---- 3.5 Tabelle: intestazioni e ariosità ---- */
.table thead th {
  color: var(--primary);
  font-weight: 600;
  border-top: 0;
  border-bottom: 2px solid var(--line);
  padding-top: .75rem;
  padding-bottom: .75rem;
}
.table tbody td { vertical-align: middle; }
/* Colonna azione (select "assegna studio" + bottone): niente a capo, distanza
   tra controllo e bottone così non si toccano. */
.table td select.form-control-sm, .table td .form-control { min-width: 140px; }
.table td select + .button,
.table td select + .btn { margin-left: .5rem; }

/* ---- 3.6 Stati interattivi e accessibilità ---- */
.btn, .nav-link, .status-card, .button {
  transition: background-color .18s ease, border-color .18s ease,
              color .18s ease, box-shadow .18s ease;
}
.btn:focus-visible,
.button:focus-visible,
a:focus-visible,
.nav-sidebar > .nav-item > .nav-link:focus-visible {
  outline: 2px solid var(--lime);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  .btn, .nav-link, .status-card, .button { transition: none; }
}

/* ==================================================================
   4. Polish sezioni guadagni/payout (widget AdminLTE nativi)
   ================================================================== */

/* ---- 4.1 small-box: micro-hover coerente con .status-card, senza layout shift ---- */
.small-box { transition: transform .18s ease, box-shadow .18s ease; }
.small-box:hover { transform: translateY(-2px); box-shadow: var(--shadow); }

/* ---- 4.2 Callout allineati alla palette brand (stato Connect/payout) ---- */
.callout {
  border-radius: var(--radius);
  box-shadow: 0 0 1px rgba(0,0,0,.08);
}
.callout.callout-success { border-left-color: var(--success); background: rgba(31,138,76,.06); }
.callout.callout-info    { border-left-color: var(--action);  background: rgba(78,125,18,.06); }
.callout.callout-warning { border-left-color: #c9a227; background: rgba(201,162,39,.08); }
.callout p { color: var(--ink); }

/* ---- 4.3 Badge: leggibilità del badge "consigliato"/stato in brand ---- */
.badge-success { background-color: var(--success); }
.badge-info { background-color: var(--action); }

/* ---- 4.4 Gruppo cambio piano: il bottone append non deborda dal campo ---- */
.input-group .btn { border-top-left-radius: 0; border-bottom-left-radius: 0; }

/* ---- 4.5 Importi a destra nelle tabelle (allineamento numerico) ---- */
.table td.text-right, .table th.text-right { text-align: right; }

/* ---- 4.6 Empty state grafici/tabelle: icona attenuata ---- */
.text-muted .fa-2x, .text-muted.py-4 .fa-2x { opacity: .5; }

@media (prefers-reduced-motion: reduce) {
  .small-box { transition: none; }
  .small-box:hover { transform: none; }
}

/* ---- Pre-analisi: pannello dettagli lead (blocchi con heading) ---- */
.lead-detail { display: grid; gap: .85rem; padding: .35rem 0; }
.lead-detail h6 {
  font-size: .72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: #6c757d;
  margin-bottom: .4rem;
}
.lead-contact-grid { display: flex; flex-wrap: wrap; gap: .25rem 2rem; }
/* Timeline email con stato di consegna SendGrid: una riga per invio, separatori leggeri. */
.email-timeline { list-style: none; padding: 0; margin: 0; max-width: 40rem; }
.email-timeline li { padding: .3rem 0; border-bottom: 1px dashed #e9ecef; }
.email-timeline li:last-child { border-bottom: 0; }

/* Comunicazioni email al lead in pre-analisi: una card leggera per messaggio. */
.lead-message-list { list-style: none; padding: 0; margin: 0 0 .75rem; max-width: 40rem; }
.lead-message-list li { padding: .4rem .6rem; margin-bottom: .4rem; background: #f8f9fa; border: 1px solid #e9ecef; border-radius: .3rem; white-space: pre-wrap; }

/* Pannello "Team legale (PACA)": discussione interna del fascicolo nella dashboard studio. */
.paca-panel { border: 1px solid #e9ecef; border-left: 4px solid #a4c639; border-radius: .3rem; padding: .75rem 1rem; margin: .75rem 0 1rem; background: #fcfdf8; }
.paca-comment-list { list-style: none; padding: 0; margin: .6rem 0; max-width: 44rem; }
.paca-comment { padding: .4rem .6rem; margin-bottom: .4rem; background: #fff; border: 1px solid #e9ecef; border-radius: .3rem; white-space: pre-wrap; }
.paca-comment-meta { font-size: .8rem; color: #6c757d; margin-bottom: .15rem; }
.paca-comment-input { display: block; width: 100%; max-width: 44rem; margin: .4rem 0; padding: .4rem .6rem; border: 1px solid #ced4da; border-radius: .3rem; font: inherit; }

/* ==================================================================
   Box accesso PACA — cerchio-logo interattivo + card ordinata.
   L'animazione d'entrata/idle è GSAP (paca-badge.js); qui stanno
   layout, cerchio, anello glow e stati hover/focus. CSP-safe (foglio
   esterno). prefers-reduced-motion azzera le transizioni.
   ================================================================== */
.paca-card { overflow: hidden; }
.paca-card__body {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  flex-wrap: wrap;
}
.paca-card__text { flex: 1 1 16rem; min-width: 0; }
/* AdminLTE mette float:left su .card-title → il sottotitolo gli finiva
   accanto (overlap). Qui lo riportiamo a blocco pulito. */
.paca-card__text .card-title { float: none; display: block; margin: 0 0 .3rem; color: var(--primary); }
.paca-card__cta { margin-left: auto; align-self: center; }

/* Split-text per l'animazione GSAP: la parola resta unita (no wrap a metà),
   il singolo carattere è animabile. Senza JS il testo è identico al normale. */
.paca-word { display: inline-block; white-space: nowrap; }
.paca-char { display: inline-block; will-change: transform; }
.paca-sub-word { display: inline-block; }

/* Cerchio interattivo con il logo PACA (terzo accesso, stesso URL). */
.paca-orb {
  position: relative;
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 84px;
  height: 84px;
  border-radius: 50%;
  background:
    radial-gradient(circle at 50% 38%, #ffffff 0%, #f4f8ec 62%, #e9f3df 100%);
  border: 2px solid var(--lime);
  box-shadow: 0 .4rem 1rem rgba(30,58,47,.18), inset 0 0 0 3px #fff;
  text-decoration: none;
  transition: transform .25s ease, box-shadow .25s ease;
  will-change: transform;
}
.paca-orb__logo {
  position: relative;
  z-index: 1;
  width: 92%;
  height: 92%;
  object-fit: contain;
  border-radius: 50%;
  pointer-events: none;
}
/* Anello glow attorno al cerchio: pulsato via GSAP, statico se manca JS. */
.paca-orb__ring {
  position: absolute;
  inset: -7px;
  border-radius: 50%;
  border: 2px solid var(--lime);
  opacity: .45;
  pointer-events: none;
}
.paca-orb:hover,
.paca-orb:focus-visible {
  transform: scale(1.06);
  box-shadow: 0 .6rem 1.4rem rgba(78,125,18,.32), inset 0 0 0 3px #fff;
}
.paca-orb:focus-visible {
  outline: 3px solid var(--action);
  outline-offset: 3px;
}

@media (max-width: 575.98px) {
  .paca-card__body { flex-direction: column; text-align: center; }
  .paca-card__cta { margin-left: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .paca-orb { transition: none; }
}

/* ---- Anteprima documento inline (pre-analisi admin) ---- */
.doc-preview { width: 100%; height: 600px; border: 1px solid #ced4da; margin-top: .5rem; }
/* Anteprima .docx renderizzata client-side (mammoth): HTML scrollabile, non un iframe a altezza fissa. */
.doc-preview-html { height: auto; max-height: 600px; overflow: auto; padding: 1rem; background: #fff; }
.doc-preview-html img { max-width: 100%; height: auto; }
.doc-preview-html table { border-collapse: collapse; }
.doc-preview-html td, .doc-preview-html th { border: 1px solid #ced4da; padding: .25rem .5rem; }

/* ---- Note del Verificatore ai Legali: testo libero, va reso con gli a capo scritti ---- */
.lead-legal-notes {
  white-space: pre-wrap;
  background: #f8f9fa;
  border-left: 3px solid var(--action, #7ab648);
  padding: .6rem .8rem;
  border-radius: 4px;
}

/* ---- Centro notifiche (campanella in navbar), iniettato da notifications.js ---- */
.notif { position: relative; }
.notif__button {
  background: none;
  border: 0;
  cursor: pointer;
  position: relative;
  padding: .5rem .75rem;
  color: inherit;
}
.notif__badge {
  position: absolute;
  top: .15rem;
  right: .15rem;
  min-width: 18px;
  height: 18px;
  padding: 0 4px;
  border-radius: 9px;
  background: #dc3545;
  color: #fff;
  font-size: 11px;
  line-height: 18px;
  text-align: center;
  font-weight: 700;
}
.notif__panel {
  position: absolute;
  right: 0;
  top: 100%;
  width: 340px;
  max-width: calc(100vw - 1rem);
  background: #fff;
  border: 1px solid #dee2e6;
  border-radius: 6px;
  box-shadow: 0 6px 20px rgba(0, 0, 0, .15);
  z-index: 1050;
}
.notif__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: .6rem .8rem;
  border-bottom: 1px solid #dee2e6;
}
.notif__markall {
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  font-size: 12px;
  color: #6c757d;
  text-decoration: underline;
}
.notif__list { max-height: 380px; overflow-y: auto; }
.notif__item { padding: .6rem .8rem; border-bottom: 1px solid #f1f3f5; cursor: pointer; }
.notif__item:last-child { border-bottom: 0; }
.notif__item:hover { background: #f8f9fa; }
.notif__item--unread { background: #f1f8e9; }
.notif__item--unread:hover { background: #e8f3dc; }
.notif__title { margin: 0; font-weight: 600; font-size: 14px; }
.notif__body { margin: .15rem 0 0; font-size: 13px; color: #495057; }
.notif__time { margin: .2rem 0 0; font-size: 11px; color: #868e96; }
.notif__empty { margin: 0; padding: 1.2rem .8rem; text-align: center; color: #868e96; font-size: 13px; }