/* ============================================================
   SICULAV DESIGN SYSTEM — css/siculav.css
   Tema sovrapposto ad AdminLTE 1.2 + Bootstrap 3.1.
   Caricato per ultimo, dopo css/my.css.
   Riferimento: DESIGN-SYSTEM.md
   ============================================================ */

/* ------------------------------------------------------------
   §1  Design Tokens (DESIGN-SYSTEM.md §1)
   ------------------------------------------------------------ */
:root {
  /* 1.1 Brand */
  --sv-navy:        #184C70;
  --sv-navy-dark:   #123A56;
  --sv-navy-light:  #E8EEF4;
  --sv-green:       #2A7A6F;
  --sv-green-dark:  #1F5C53;
  --sv-teal:        #3F9288;
  --sv-green-light: #E6F2EF;

  /* 1.2 Neutri */
  --sv-ink:    #1E2A33;
  --sv-ink-2:  #4B5B67;
  --sv-ink-3:  #8A97A1;
  --sv-line:   #D6DEE4;
  --sv-bg:     #F4F6F8;
  --sv-bg-2:   #EAEEF2;
  --sv-white:  #FFFFFF;

  /* 1.3 Semantici */
  --sv-success: #2A7A6F;
  --sv-warning: #B7791F;
  --sv-danger:  #B42318;
  --sv-info:    #184C70;
}

/* ============================================================
   §2  Base  (DESIGN-SYSTEM.md §2, §3, §6)
   Tipografia, sfondo, link, focus accessibile.
   NON si applicano dentro .sv-login (scoped separatamente).
   ============================================================ */

/* --- Sfondo e testo --- */
body.skin-black {
  background-color: var(--sv-bg);
  color: var(--sv-ink);
  font-family: -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: 14px;
  line-height: 1.5;
}

/* --- Sfondo area contenuto (tutti i rami) --- */
.right-side {
  background-color: var(--sv-bg);
  transition: margin-left 0.25s ease;
}

/* --- Flex column per footer sticky (solo ramo non-popup: dentro .wrapper) --- */
.wrapper > .right-side {
  display: flex;
  flex-direction: column;
  min-height: calc(100vh - 50px); /* viewport meno header 50px */
}

/* --- Transizione sidebar (collapse) --- */
.left-side {
  transition: left 0.25s ease;
}

/* --- Scala titoli (DS §2) --- */
h1 { font-size: 24px; font-weight: 600; color: var(--sv-navy); }
h2 { font-size: 20px; font-weight: 600; color: var(--sv-navy); }
h3 { font-size: 17px; font-weight: 600; color: var(--sv-ink); }
h4 { font-size: 15px; font-weight: 600; color: var(--sv-ink); }

/* --- Titolo di pagina (DS §2) --- */
.right-side > .content-header > h1 {
  font-size: 22px;
  font-weight: 600;
  color: var(--sv-navy);
}
.right-side > .content-header > h1 > small {
  font-size: 13px;
  color: var(--sv-ink-2);
}

/* --- Link (DS §1.4: verde primario, hover verde scuro) --- */
a { color: var(--sv-green); }
a:hover,
a:focus { color: var(--sv-green-dark); }

/* --- Numeri tabulari (DS §2) --- */
.font-tabular { font-variant-numeric: tabular-nums; }

/* --- Focus accessibile (DS §3, §6) --- */
a:focus-visible,
button:focus-visible,
.btn:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--sv-green);
  outline-offset: 2px;
}

/* ------------------------------------------------------------
   §4.10  Login  (DESIGN-SYSTEM.md §4.10)
   Tutti gli stili scopati sotto .sv-login
   ------------------------------------------------------------ */

/* --- Layout pagina --- */
.sv-login {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--sv-bg);
  padding: 24px 16px;
  font-family: -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  border-top: 6px solid var(--sv-navy);
}

/* --- Card --- */
.sv-login .form-box {
  background: var(--sv-white);
  width: 100%;
  max-width: 420px;
  border-radius: 6px;
  box-shadow: 0 4px 16px rgba(30,42,51,.16);
  padding: 32px;
  margin: 0;
  float: none;
}

/* --- Logo --- */
.sv-login-logo { margin-bottom: 24px; }
.sv-login-logo-img {
  max-width: 260px;
  height: auto;
  margin: 0 auto;
  display: block;
}
.sv-login-subtitle {
  font-size: 13px;
  color: var(--sv-ink-2);
  margin: 8px 0 0;
}

/* --- Tab di accesso --- */
.sv-login-tabs {
  display: flex;
  border-bottom: 2px solid var(--sv-line);
  margin-bottom: 16px;
}
.sv-login-tabs a {
  flex: 1;
  text-align: center;
  padding: 8px 4px 10px;
  font-size: 12px;
  font-weight: 600;
  color: var(--sv-ink-2);
  text-decoration: none;
  border-bottom: 2px solid transparent;
  margin-bottom: -2px;
  transition: color .15s, border-color .15s;
  cursor: pointer;
}
.sv-login-tabs a:hover {
  color: var(--sv-green);
  text-decoration: none;
}
.sv-login-tabs a.sv-tab-active {
  color: var(--sv-green);
  border-bottom-color: var(--sv-green);
}
.sv-login-tabs a i {
  display: block;
  font-size: 16px;
  margin-bottom: 4px;
}
.sv-login-tabs a span { margin-left: 0 !important; }

/* --- Help text sotto i campi --- */
.sv-login .sv-login-help {
  font-size: 12px;
  color: var(--sv-ink-2);
  margin: 4px 0 0;
}

/* --- Titolo sezione (h4#titolo) --- */
.sv-login .sv-login-section-title {
  font-size: 15px;
  font-weight: 600;
  color: var(--sv-ink);
  margin: 0 0 16px;
}

/* --- Body form (override AdminLTE .body.bg-gray) --- */
.sv-login .body.bg-gray,
.sv-login .body {
  background: var(--sv-white) !important;
  padding: 0;
}

/* --- Label --- */
.sv-login .sv-label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: var(--sv-ink-2);
  margin-bottom: 4px;
}

/* --- Input --- */
.sv-login .form-control {
  height: 34px;
  border: 1px solid var(--sv-line);
  border-radius: 4px;
  background: var(--sv-white);
  color: var(--sv-ink);
  font-size: 14px;
}
.sv-login .form-control:focus {
  border-color: var(--sv-green);
  box-shadow: 0 0 0 3px rgba(42,122,111,.18);
  outline: none;
}
.sv-login .form-control::placeholder { color: var(--sv-ink-3); }
.sv-login .form-group { margin-bottom: 16px; }

/* --- Bottone primario --- */
.sv-login .btn.bg-olive,
.sv-login .btn-primary {
  background-color: var(--sv-green) !important;
  border-color: var(--sv-green) !important;
  color: var(--sv-white) !important;
  height: 38px;
  border-radius: 4px;
  font-weight: 600;
  font-size: 14px;
  text-transform: none;
  width: 100%;
  margin-top: 8px;
}
.sv-login .btn.bg-olive:hover,
.sv-login .btn.bg-olive:focus,
.sv-login .btn-primary:hover,
.sv-login .btn-primary:focus {
  background-color: var(--sv-green-dark) !important;
  border-color: var(--sv-green-dark) !important;
}

/* --- Alert --- */
.sv-login .alert {
  border-radius: 4px;
  border: none;
  border-left: 4px solid;
  font-size: 13px;
  color: var(--sv-ink);
}
.sv-login .alert-danger {
  background: #FBE9E7;
  border-left-color: var(--sv-danger);
}
.sv-login .alert-success {
  background: var(--sv-green-light);
  border-left-color: var(--sv-success);
}

/* --- Link accesso dipendente --- */
.sv-login-dip-link {
  margin-top: 24px;
  padding-top: 16px;
  border-top: 1px solid var(--sv-line);
}
.sv-login-dip-link a {
  color: var(--sv-green);
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
}
.sv-login-dip-link a:hover {
  color: var(--sv-green-dark);
  text-decoration: underline;
}

/* --- Footer card --- */
.sv-login-footer {
  margin-top: 24px;
  padding-top: 16px;
  border-top: 1px solid var(--sv-line);
  font-size: 12px;
  color: var(--sv-ink-3);
}

/* ============================================================
   §4.6  Panel / Box  (DESIGN-SYSTEM.md §4.6)
   Tutte le varianti colorate convergono sullo stesso aspetto.
   ============================================================ */

/* --- Panel base --- */
.panel {
  border: 1px solid var(--sv-line);
  border-radius: 6px;
  box-shadow: 0 1px 2px rgba(30,42,51,.08);
  background-color: var(--sv-white);
}

/* --- Tutte le varianti: stesso bordo --- */
.panel-default,
.panel-success,
.panel-primary,
.panel-info,
.panel-warning,
.panel-danger {
  border-color: var(--sv-line);
}

/* --- Panel heading: navy-light per tutte le varianti --- */
.panel-default > .panel-heading,
.panel-success > .panel-heading,
.panel-primary > .panel-heading,
.panel-info > .panel-heading,
.panel-warning > .panel-heading,
.panel-danger > .panel-heading {
  background-color: var(--sv-navy-light);
  color: var(--sv-navy);
  border-bottom: 1px solid var(--sv-line);
  border-radius: 5px 5px 0 0;
}

/* --- Panel title --- */
.panel-title {
  font-size: 15px;
  font-weight: 600;
  color: var(--sv-navy);
}

/* --- Panel body --- */
.panel-body {
  padding: 16px;
}

/* --- Box base (override AdminLTE border-top 2px colored) --- */
.box {
  background: var(--sv-white);
  border: 1px solid var(--sv-line);
  border-top: 1px solid var(--sv-line);
  border-radius: 6px;
  box-shadow: 0 1px 2px rgba(30,42,51,.08);
}

/* --- Tutte le varianti box: stesso border-top --- */
.box.box-primary,
.box.box-info,
.box.box-danger,
.box.box-warning,
.box.box-success {
  border-top-color: var(--sv-line);
}

/* --- Box header --- */
.box .box-header {
  background-color: var(--sv-navy-light);
  color: var(--sv-navy);
  border-bottom: 1px solid var(--sv-line);
  border-radius: 5px 5px 0 0;
}

/* --- Box title --- */
.box .box-header .box-title {
  font-size: 15px;
  font-weight: 600;
  color: var(--sv-navy);
}

/* --- Box header link --- */
.box .box-header a:not(.btn) {
  color: var(--sv-navy);
}

/* --- Box body --- */
.box .box-body {
  padding: 16px;
}

/* --- Box footer --- */
.box .box-footer {
  border-top: 1px solid var(--sv-line);
  background-color: var(--sv-white);
  border-radius: 0 0 5px 5px;
}

/* --- Box solid: heading converge su navy-light --- */
.box.box-solid > .box-header,
.box.box-solid.box-primary > .box-header,
.box.box-solid.box-info > .box-header,
.box.box-solid.box-danger > .box-header,
.box.box-solid.box-warning > .box-header,
.box.box-solid.box-success > .box-header {
  background: var(--sv-navy-light);
  background-color: var(--sv-navy-light);
  color: var(--sv-navy);
}
.box.box-solid > .box-header a,
.box.box-solid.box-primary > .box-header a,
.box.box-solid.box-info > .box-header a,
.box.box-solid.box-danger > .box-header a,
.box.box-solid.box-warning > .box-header a,
.box.box-solid.box-success > .box-header a {
  color: var(--sv-navy);
}

/* --- Intestazione pagina "small-box bg-aqua" (f) ---
   ~20 pagine usano <div class="small-box bg-aqua"> come titolo.
   !important: AdminLTE.css:194 cablava bg-color:#00c0ef !important */
.small-box.bg-aqua {
  background-color: var(--sv-navy-light) !important;
  color: var(--sv-ink) !important;
  border-radius: 6px;
}
.small-box.bg-aqua .inner h3 {
  font-size: 22px;
  font-weight: 600;
  color: var(--sv-navy);
}
.small-box.bg-aqua .inner p {
  font-size: 13px;
  color: var(--sv-ink-2);
}

/* ============================================================
   §4.7  Alert  (DESIGN-SYSTEM.md §4.7)
   Markup canonico: .alert.sv-alert + .sv-alert-icon + .sv-alert-body
   Nessun pseudo-elemento: l'icona è nel markup.
   ============================================================ */

/* --- Colori base (tutti gli .alert, login inclusa) --- */
.alert {
  border-radius: 4px;
  border: none;
  border-left: 4px solid;
  font-size: 13px;
  color: var(--sv-ink);
  margin-bottom: 16px;
}
.alert-success { background: var(--sv-green-light); border-left-color: var(--sv-success); }
.alert-danger  { background: #FBE9E7;              border-left-color: var(--sv-danger); }
.alert-warning { background: #FBF1DD;              border-left-color: var(--sv-warning); }
.alert-info    { background: var(--sv-navy-light);  border-left-color: var(--sv-info); }

/* --- Alert figli diretti di .right-side (fuori da section.content) ---
   10 pagine li emettono senza wrapper .content: stesso margine */
.right-side > .sv-alert {
  margin: 15px 15px 16px;
}

/* --- Layout canonico .sv-alert --- */
.sv-alert {
  position: relative;
  padding: 12px 40px 12px 56px;
  min-height: 48px;
}

/* --- Cerchio bianco con icona --- */
.sv-alert-icon {
  position: absolute;
  left: 16px;
  top: 12px;
  width: 28px;
  height: 28px;
  line-height: 28px;
  text-align: center;
  border-radius: 50%;
  background: var(--sv-white);
  font-size: 14px;
}
.alert-success .sv-alert-icon { color: var(--sv-success); }
.alert-danger  .sv-alert-icon { color: var(--sv-danger); }
.alert-warning .sv-alert-icon { color: var(--sv-warning); }
.alert-info    .sv-alert-icon { color: var(--sv-info); }

/* --- Corpo del messaggio --- */
.sv-alert-body {
  flex: 1;
  min-width: 0;
}
.sv-alert-body a { color: var(--sv-green); font-weight: 600; }

/* --- Bottone chiusura × --- */
.sv-alert > .close {
  position: absolute;
  right: 12px;
  top: 12px;
  font-size: 18px;
  color: var(--sv-ink-2);
  opacity: 0.7;
  text-shadow: none;
}
.sv-alert > .close:hover { opacity: 1; }


/* ============================================================
   §4.1  Header  (DESIGN-SYSTEM.md §4.1)
   Sfondo navy, wordmark bianco, dropdown utente.
   ============================================================ */

/* --- Logo: sfondo navy ---
   !important: obbligatorio per vincere su AdminLTE.css:403
   che cablava background-color:#48763a !important */
body > .header .logo {
  background-color: var(--sv-navy) !important;
  color: var(--sv-white);
  font-family: -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: 18px;
  font-weight: 600;
  padding-left: 15px; /* (g) allineato al rientro voci menu */
}
.skin-black .logo {
  background-color: var(--sv-navy);
  color: var(--sv-white);
}
.skin-black .logo:hover {
  background: var(--sv-navy);
}
.skin-black .logo > a,
.skin-black .logo a {
  color: var(--sv-white);
  text-decoration: none;
}

/* --- Allineamento simbolo + wordmark --- */
.sv-brand-icon {
  vertical-align: middle;
  margin-right: 6px;
}
.sv-brand {
  color: var(--sv-white);
  text-decoration: none;
}
.sv-brand:hover,
.sv-brand:focus {
  color: var(--sv-white);
  text-decoration: none;
}

/* --- Navbar: sfondo navy (override skin-black bianco) --- */
.skin-black .navbar {
  background-color: var(--sv-navy);
  border-bottom: 1px solid var(--sv-navy-dark);
}

/* --- Nav link bianchi --- */
.skin-black .navbar .nav a {
  color: var(--sv-white);
}
.skin-black .navbar .nav > li > a:hover,
.skin-black .navbar .nav > li > a:active,
.skin-black .navbar .nav > li > a:focus,
.skin-black .navbar .nav .open > a,
.skin-black .navbar .nav .open > a:hover,
.skin-black .navbar .nav .open > a:focus {
  background: var(--sv-navy-dark);
  color: var(--sv-white);
}

/* --- Hamburger sidebar-toggle: barre bianche ---
   !important: obbligatorio per vincere su AdminLTE.css:2591
   che cablava background:#999 !important su hover */
.skin-black .navbar .sidebar-toggle .icon-bar {
  background: var(--sv-white);
}
.skin-black .navbar .sidebar-toggle:hover .icon-bar {
  background: var(--sv-navy-light) !important;
}

/* --- Dropdown utente: card bianca, voci ink, hover green-light --- */
.skin-black .navbar .nav .dropdown-menu {
  background-color: var(--sv-white);
  border: 1px solid var(--sv-line);
  box-shadow: 0 4px 16px rgba(30,42,51,.16);
}
.skin-black .navbar .nav .dropdown-menu > li > a {
  color: var(--sv-ink);
}
.skin-black .navbar .nav .dropdown-menu > li > a:hover,
.skin-black .navbar .nav .dropdown-menu > li > a:focus {
  background-color: var(--sv-green-light);
  color: var(--sv-ink);
}
.skin-black .navbar .nav .dropdown-menu > .divider {
  background-color: var(--sv-line);
}

/* ============================================================
   §4.3  Bottoni  (DESIGN-SYSTEM.md §4.3, §1.4)
   Mapping colori Bootstrap → DS. Niente gradienti né ombre.
   ============================================================ */

/* --- Base bottoni --- */
.btn {
  border-radius: 4px;
  font-weight: 600;
  font-size: 14px;
  padding: 6px 14px;
  box-shadow: none;
  text-transform: none;
  transition: background-color .15s, border-color .15s, color .15s;
}
.btn.btn-sm {
  padding: 4px 10px;
  font-size: 13px;
}

/* --- Niente ombra inset su :active (override AdminLTE) --- */
.btn:active {
  box-shadow: none;
}

/* --- Primario (verde) — DS: .btn-primary → verde --- */
.btn.btn-primary {
  background-color: var(--sv-green);
  border-color: var(--sv-green);
  color: var(--sv-white);
}
.btn.btn-primary:hover,
.btn.btn-primary:active,
.btn.btn-primary.hover {
  background-color: var(--sv-green-dark);
  border-color: var(--sv-green-dark);
  color: var(--sv-white);
}

/* --- Successo (= primario verde) — DS: .btn-success → verde --- */
.btn.btn-success {
  background-color: var(--sv-green);
  border-color: var(--sv-green);
  color: var(--sv-white);
}
.btn.btn-success:hover,
.btn.btn-success:active,
.btn.btn-success.hover {
  background-color: var(--sv-green-dark);
  border-color: var(--sv-green-dark);
  color: var(--sv-white);
}

/* --- Secondario — DS: .btn-default → bianco, bordo line, testo ink --- */
.btn.btn-default {
  background-color: var(--sv-white);
  color: var(--sv-ink);
  border-color: var(--sv-line);
}
/* !important: AdminLTE.css:1763 usa !important su .btn.btn-default:hover */
.btn.btn-default:hover,
.btn.btn-default:active,
.btn.btn-default.hover {
  background-color: var(--sv-bg-2) !important;
  border-color: var(--sv-line);
  color: var(--sv-ink);
}

/* --- Pericolo — DS: .btn-danger → rosso --- */
.btn.btn-danger {
  background-color: var(--sv-danger);
  border-color: var(--sv-danger);
  color: var(--sv-white);
}
.btn.btn-danger:hover,
.btn.btn-danger:active,
.btn.btn-danger.hover {
  background-color: #9A1F14; /* --sv-danger darkened ~8%, no token defined */
  border-color: #9A1F14;
  color: var(--sv-white);
}

/* --- Info (navy chiaro) — DS: .btn-info → sfondo navy-light, testo navy --- */
.btn.btn-info {
  background-color: var(--sv-navy-light);
  border-color: var(--sv-navy-light);
  color: var(--sv-navy);
}
.btn.btn-info:hover,
.btn.btn-info:active,
.btn.btn-info.hover {
  background-color: var(--sv-line);
  border-color: var(--sv-line);
  color: var(--sv-navy);
}

/* --- Warning (ambra) — DS: .btn-warning → ambra --- */
.btn.btn-warning {
  background-color: var(--sv-warning);
  border-color: var(--sv-warning);
  color: var(--sv-white);
}
.btn.btn-warning:hover,
.btn.btn-warning:active,
.btn.btn-warning.hover {
  background-color: #9E6819; /* --sv-warning darkened ~8%, no token defined */
  border-color: #9E6819;
  color: var(--sv-white);
}

/* --- Link — DS: testo verde, sottolineato solo in hover --- */
.btn.btn-link {
  color: var(--sv-green);
  text-decoration: none;
  font-weight: 600;
}
.btn.btn-link:hover,
.btn.btn-link:focus {
  color: var(--sv-green-dark);
  text-decoration: underline;
}

/* --- Disabled --- */
.btn.disabled,
.btn[disabled] {
  opacity: 0.5;
}

/* ============================================================
   §4.2  Sidebar  (DESIGN-SYSTEM.md §4.2)
   Sfondo navy, voci menu, hover, attivo con barra teal.
   ============================================================ */

/* --- Sfondo sidebar (override skin-black #333) --- */
.skin-black .left-side {
  background: var(--sv-navy);
}

/* --- Bordo sidebar --- */
.skin-black .sidebar {
  border-bottom: 1px solid var(--sv-navy-dark);
}

/* --- Separatori: bordo su <a>, non su <li> (fix separatori doppi) ---
   I <li>&nbsp;</li> spaziatori in menu.php non hanno <a> → niente bordo doppio */
.skin-black .sidebar > .sidebar-menu > li {
  border: none;
}
.skin-black .sidebar > .sidebar-menu > li > a {
  border-top: 1px solid var(--sv-navy-dark);
  transition: background-color 0.25s, color 0.25s;
}

/* --- Etichetta sezione (MENU OPERATIVO) — non cliccabile ---
   Primo <li> di ogni menu: <a href="#"><strong><span>MENU OPERATIVO</span></strong></a> */
.skin-black .sidebar > .sidebar-menu > li:first-of-type > a {
  border-top: none;
  pointer-events: none;
  cursor: default;
}
/* !important: menu.php ha inline style="color:#367fa9 !important" */
.skin-black .sidebar > .sidebar-menu > li:first-of-type > a strong,
.skin-black .sidebar > .sidebar-menu > li:first-of-type > a span {
  color: var(--sv-navy-light) !important;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.5px;
}

/* --- Link sidebar --- */
.skin-black .sidebar a {
  color: var(--sv-navy-light);
}
.skin-black .sidebar a:hover {
  text-decoration: none;
}

/* --- Hover e attivo --- */
.skin-black .sidebar > .sidebar-menu > li > a:hover,
.skin-black .sidebar > .sidebar-menu > li.active > a {
  color: var(--sv-white);
  background: var(--sv-navy-dark);
}

/* --- Voce attiva: barra sinistra teal (DS §4.2) --- */
.skin-black .sidebar > .sidebar-menu > li.active > a {
  border-left: 3px solid var(--sv-teal);
  padding-left: 12px; /* compensa i 3px del bordo (default 15px) */
}

/* --- Sottomenu treeview --- */
.skin-black .sidebar > .sidebar-menu > li > .treeview-menu {
  margin: 0 1px;
  background: var(--sv-navy-dark);
}
.skin-black .treeview-menu > li > a {
  color: var(--sv-navy-light);
  transition: color 0.25s;
}
.skin-black .treeview-menu > li.active > a,
.skin-black .treeview-menu > li > a:hover {
  color: var(--sv-white);
}

/* --- Blocco utente in testa alla sidebar (DS §4.2) --- */
/* !important: menu.php ha inline style="margin-top:82px" su ogni <ul> */
.sidebar-menu {
  margin-top: 0 !important;
}
.sv-sidebar-user {
  min-height: 82px;
  box-sizing: border-box;
  padding: 24px 15px;
  color: var(--sv-navy-light);
  border-bottom: 1px solid var(--sv-navy-dark);
}
.sv-sidebar-user strong {
  display: block;
  color: var(--sv-white);
  font-size: 14px;
  line-height: 1.3;
}
.sv-sidebar-user small {
  display: block;
  color: var(--sv-navy-light);
  font-size: 12px;
  margin-top: 4px;
}

/* ============================================================
   §footer  Footer app  (dentro .right-side, no popup)
   ============================================================ */
.sv-footer {
  text-align: center;
  padding: 16px;
  font-size: 12px;
  color: var(--sv-ink-3);
  border-top: 1px solid var(--sv-line);
  margin-top: auto; /* sticky in basso: flex + margin-top:auto */
  flex-shrink: 0;
}
.sv-footer a { color: var(--sv-green); }
.sv-footer-sep { margin: 0 4px; }

/* --- Vista ?dip: immagine SSO --- */
.sv-login .sv-login-sso-img {
  max-width: 200px;
  margin: 16px auto;
  display: block;
}