/* ==============================================
   UNIROMA LANDING — Design PA / Design Italia
   Solo override CSS
   Font Awesome 4.7 già caricato
   ============================================== */

@import url("https://fonts.googleapis.com/css2?family=Titillium+Web:wght@300;400;600;700&display=swap");

:root {
  /* Brand Sapienza (btn-uniroma / logo) */
  --pa-primary: #822433;
  --pa-primary-dark: #5a2726;
  --pa-primary-light: #a33a4a;
  --pa-primary-bg: #fdf0f2;
  --pa-text: #2a1f21;
  --pa-text-muted: #6b5a5d;
  --pa-border: #e4d8da;
  --pa-bg: #f7f4f5;
  --pa-surface: #ffffff;
  --pa-focus: #c45c16;
  --pa-success: #18625b;
  --pa-warning: #a66300;
  --pa-danger: #c03e27;
  --pa-footer: rgb(130, 36, 51);
  --pa-radius: 4px;
  --pa-shadow: 0 2px 8px rgba(82, 36, 51, 0.1);
  --pa-font: "Titillium Web", "Helvetica Neue", Helvetica, Arial, sans-serif;

  /* Scala spaziature — griglia 8px (ui-design-brain / Stack) */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 40px;
  --space-8: 48px;
  --space-9: 64px;

  --page-pad-x: var(--space-4);
  --page-pad-y: var(--space-4);
  --page-pad-y-bottom: var(--space-4);
  --section-gap: var(--space-4);
  --card-gap: var(--space-4);
  --card-pad: var(--space-4);
  --stack-tight: var(--space-2);
  --stack-default: var(--space-3);
  --stack-loose: var(--space-4);
  --touch-min: 44px;

  /* Ribbon servizi — deprecati a favore dei box Sapienza */
  --sticky-top: var(--space-2);
  --pa-neutral-border: #d9dadb;
  --pa-neutral-bg: #f5f5f5;
}

/* ---------- Icon font Glyphicons ----------
   Snapshot HTML senza fonts/glyphicons-* → icone navbar vuote.
   -------------------------------------------------------------- */

@font-face {
  font-family: "Glyphicons Halflings";
  src: url("../fonts/glyphicons-halflings-regular.eot");
  src: url("../fonts/glyphicons-halflings-regular.eot?#iefix") format("embedded-opentype"),
    url("../fonts/glyphicons-halflings-regular.woff2") format("woff2"),
    url("../fonts/glyphicons-halflings-regular.woff") format("woff"),
    url("../fonts/glyphicons-halflings-regular.ttf") format("truetype"),
    url("../fonts/glyphicons-halflings-regular.svg#glyphicons_halflingsregular") format("svg");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

/* Titillium non deve sovrascrivere le icon font */
.glyphicon {
  font-family: "Glyphicons Halflings" !important;
  font-style: normal !important;
  font-weight: normal !important;
  line-height: 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.fa {
  font-family: FontAwesome !important;
  font-style: normal !important;
  font-weight: normal !important;
}

/* ---------- Base ---------- */

html {
  scroll-behavior: smooth;
}

body {
  background: var(--pa-bg) !important;
  color: var(--pa-text) !important;
  font-family: var(--pa-font) !important;
  font-size: 16px !important;
  line-height: 1.55 !important;
  -webkit-font-smoothing: antialiased;
}

a:focus-visible,
button:focus-visible,
.navbar a:focus-visible,
div[style*="min-height:300px"] a:focus-visible {
  outline: 3px solid var(--pa-focus) !important;
  outline-offset: 2px;
}

/* ---------- Ribbon DEV (meno invasivo) ---------- */

.ribbon {
  background-color: var(--pa-warning) !important;
  box-shadow: none !important;
  top: 56px !important;
  z-index: 1040 !important;
}

.ribbon a {
  border-color: rgba(255, 255, 255, 0.45) !important;
  font-family: var(--pa-font) !important;
  text-shadow: none !important;
}

/* ---------- Header UniRoma1 ----------
   Fascia bianca brand + barra nav bordeaux
   (schema tipico uniroma1.it / IdM Sapienza)
   ------------------------------------ */

div[ui-view="navbar"] {
  position: relative;
  z-index: 1030;
  box-shadow: 0 4px 16px rgba(82, 36, 51, 0.12);
}

.navbar.navbar-default {
  background: var(--pa-surface) !important;
  border: 0 !important;
  border-radius: 0 !important;
  margin-bottom: 0 !important;
  min-height: 0 !important;
  padding: 0 !important;
}

/* Layout a due fasce: logo | menu full-width */
.navbar.navbar-default>.container {
  width: 100% !important;
  max-width: 1140px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  padding-left: 15px;
  padding-right: 15px;
}

.navbar-default .navbar-header {
  float: none !important;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  flex: 1 1 auto;
  width: 100%;
  min-height: 88px;
  margin: 0 !important;
  padding: var(--space-3) 0;
}

/* Logo: più grande, nitido, allineato come su uniroma1 */
.navbar-default .navbar-brand.logo {
  float: none !important;
  order: 1;
  display: inline-flex !important;
  align-items: center;
  gap: var(--space-4);
  flex: 1 1 auto;
  min-width: 0;
  height: auto !important;
  max-width: calc(100% - 56px);
  margin: 0 !important;
  padding: 0 !important;
  line-height: 1 !important;
}

.navbar-default .navbar-brand.logo:hover,
.navbar-default .navbar-brand.logo:focus {
  background: transparent !important;
  opacity: 0.92;
}

.navbar-default .logo .logo-img {
  display: block !important;
  height: 64px !important;
  width: auto !important;
  max-width: min(340px, 70vw) !important;
  margin: 0 !important;
  object-fit: contain;
  object-position: left center;
}

/* Versione app: nascosta (come in prod) */
.navbar-default .navbar-version {
  display: none !important;
  align-self: flex-end;
  margin: 0 0 6px !important;
  padding: 3px 9px !important;
  border: 1px solid var(--pa-border);
  border-radius: 2px;
  background: #faf7f8;
  color: var(--pa-text-muted) !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  letter-spacing: 0.06em;
  line-height: 1.2;
  text-transform: uppercase;
  white-space: nowrap;
}

/* Toggle: a destra (HTML lo mette prima del logo → order) */
.navbar-default .navbar-toggle {
  float: none !important;
  order: 2;
  flex: 0 0 auto;
  align-self: center;
  margin: 0 !important;
  padding: 11px 12px !important;
  min-width: var(--touch-min);
  min-height: var(--touch-min);
  border: 1px solid var(--pa-border) !important;
  border-radius: 2px !important;
  background: transparent !important;
}

.navbar-default .navbar-toggle .icon-bar {
  background-color: var(--pa-primary) !important;
  width: 20px;
  display: block;
  height: 2px;
  border-radius: 1px;
}

.navbar-default .navbar-toggle .icon-bar+.icon-bar {
  margin-top: 4px;
}

.navbar-default .navbar-toggle:hover,
.navbar-default .navbar-toggle:focus {
  background: var(--pa-primary-bg) !important;
  border-color: #d4a8af !important;
}

/* Barra navigazione bordeaux (seconda fascia) */
.navbar-default .navbar-collapse {
  float: none !important;
  flex: 1 1 100%;
  width: 100% !important;
  max-height: none !important;
  margin: 0 -15px !important;
  padding: 0 15px !important;
  border: 0 !important;
  border-top: 0 !important;
  background: rgb(130, 36, 51) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

/* Forza la fascia menu anche a desktop (override uib-collapse height:0) */
@media (min-width: 768px) {

  .navbar-default .navbar-collapse,
  .navbar-default .navbar-collapse.collapse {
    display: block !important;
    height: auto !important;
    overflow: visible !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-left: -15px !important;
    margin-right: -15px !important;
    width: calc(100% + 30px) !important;
  }

  .navbar-default .navbar-collapse .navbar-nav {
    float: none !important;
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    margin: 0 !important;
  }

  .navbar-default .navbar-nav.navbar-right {
    float: none !important;
    margin-right: 0 !important;
  }
}

.navbar-default .navbar-nav>li {
  float: none !important;
}

.navbar-default .navbar-nav>li>a {
  color: #fff !important;
  font-weight: 600;
  font-size: 14px;
  letter-spacing: 0.02em;
  padding: var(--space-3) var(--space-4) !important;
  min-height: var(--touch-min);
  display: flex;
  align-items: center;
  border: 0 !important;
  border-bottom: 3px solid transparent !important;
  line-height: 1.2;
  transition: background 0.15s ease, border-color 0.15s ease;
}

.navbar-default .navbar-nav>li>a:hover,
.navbar-default .navbar-nav>li>a:focus {
  background: rgba(255, 255, 255, 0.12) !important;
  color: #fff !important;
  border-bottom-color: rgba(255, 255, 255, 0.85) !important;
}

.navbar-default .navbar-nav>li.active>a,
.navbar-default .navbar-nav>.active>a,
.navbar-default .navbar-nav>.active>a:hover,
.navbar-default .navbar-nav>.active>a:focus,
.navbar-default .navbar-nav>.open>a,
.navbar-default .navbar-nav>.open>a:hover,
.navbar-default .navbar-nav>.open>a:focus {
  background: #fff !important;
  color: var(--pa-primary) !important;
  border-bottom-color: #fff !important;
  box-shadow: none !important;
}

.navbar-default .navbar-nav>li.active>a .glyphicon,
.navbar-default .navbar-nav>.active>a .glyphicon,
.navbar-default .navbar-nav>.active>a .fa,
.navbar-default .navbar-nav>.open>a .glyphicon,
.navbar-default .navbar-nav>.open>a .fa {
  color: var(--pa-primary) !important;
}

.navbar-default .navbar-nav>li>a .glyphicon,
.navbar-default .navbar-nav>li>a .fa {
  color: rgba(255, 255, 255, 0.95);
  margin-right: 6px;
}

.navbar-default .navbar-nav>li>a .caret {
  border-top-color: currentColor;
  border-bottom-color: currentColor;
  margin-left: 4px;
}

/* Dropdown su barra bordeaux */
.navbar-default .dropdown-menu {
  border: 0 !important;
  border-radius: 0 0 var(--pa-radius) var(--pa-radius) !important;
  box-shadow: 0 8px 20px rgba(82, 36, 51, 0.18) !important;
  padding: 6px 0 !important;
  margin-top: 0 !important;
  background: #fff !important;
}

.navbar-default .dropdown-menu>li>a {
  color: var(--pa-text) !important;
  font-weight: 600;
  font-size: 14px;
  padding: 10px 18px !important;
}

.navbar-default .dropdown-menu>li>a:hover,
.navbar-default .dropdown-menu>li>a:focus {
  background: var(--pa-primary-bg) !important;
  color: var(--pa-primary) !important;
}

/* Lingua corrente (li.active / active-menu): bianco su bordeaux
   Specificità >= Bootstrap .navbar-nav .open .dropdown-menu > .active > a */
.navbar-default .dropdown-menu>.active>a,
.navbar-default .dropdown-menu>.active>a:hover,
.navbar-default .dropdown-menu>.active>a:focus,
.navbar-default .dropdown-menu>li.active>a,
.navbar-default .dropdown-menu>li.active>a:hover,
.navbar-default .dropdown-menu>li.active>a:focus,
.navbar-default .dropdown-menu>li[active-menu].active>a,
.navbar-default .dropdown-menu>li[active-menu].active>a:hover,
.navbar-default .dropdown-menu>li[active-menu].active>a:focus,
.navbar-default .navbar-nav .open .dropdown-menu>.active>a,
.navbar-default .navbar-nav .open .dropdown-menu>.active>a:hover,
.navbar-default .navbar-nav .open .dropdown-menu>.active>a:focus,
.navbar-default .navbar-nav .open .dropdown-menu>li.active>a,
.navbar-default .navbar-nav .open .dropdown-menu>li.active>a:hover,
.navbar-default .navbar-nav .open .dropdown-menu>li.active>a:focus {
  background: var(--pa-primary) !important;
  background-color: var(--pa-primary) !important;
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
}

.navbar-default .dropdown-menu>li>a .fa,
.navbar-default .dropdown-menu>li>a .glyphicon {
  color: var(--pa-primary);
  width: 1.2em;
  text-align: center;
}

.navbar-default .dropdown-menu>.active>a .fa,
.navbar-default .dropdown-menu>.active>a .glyphicon,
.navbar-default .dropdown-menu>li.active>a .fa,
.navbar-default .dropdown-menu>li.active>a .glyphicon,
.navbar-default .navbar-nav .open .dropdown-menu>.active>a .fa,
.navbar-default .navbar-nav .open .dropdown-menu>.active>a .glyphicon,
.navbar-default .navbar-nav .open .dropdown-menu>li.active>a .fa,
.navbar-default .navbar-nav .open .dropdown-menu>li.active>a .glyphicon {
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
}

.navbar-default .dropdown-menu .divider {
  background-color: var(--pa-border) !important;
  margin: 6px 0 !important;
}

/* Mobile: menu a tendina bordeaux */
@media (max-width: 767px) {
  .navbar-default .navbar-header {
    min-height: 64px;
    padding: var(--space-2) 0;
    gap: var(--space-2);
  }

  .navbar-default .navbar-brand.logo {
    max-width: calc(100% - 52px);
  }

  .navbar-default .logo .logo-img {
    height: 48px !important;
    max-width: min(240px, calc(100vw - 96px)) !important;
  }

  .navbar-default .navbar-toggle {
    margin: 0 !important;
    padding: 10px !important;
  }

  .navbar-default .navbar-version {
    display: none !important;
  }

  .navbar-default .navbar-collapse {
    margin-left: -15px !important;
    margin-right: -15px !important;
    width: calc(100% + 30px) !important;
    padding: 0 !important;
  }

  .navbar-default .navbar-nav {
    margin: 0 !important;
  }

  .navbar-default .navbar-nav>li>a {
    padding: 14px 20px !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.12) !important;
    border-left: 3px solid transparent !important;
  }

  .navbar-default .navbar-nav>li.active>a,
  .navbar-default .navbar-nav>.active>a {
    border-left-color: #fff !important;
    border-bottom-color: rgba(255, 255, 255, 0.12) !important;
  }

  .navbar-default .dropdown-menu {
    background: #6e1e2c !important;
    box-shadow: none !important;
  }

  .navbar-default .dropdown-menu>li>a {
    color: #fff !important;
    padding-left: 36px !important;
  }

  .navbar-default .dropdown-menu>li>a:hover,
  .navbar-default .dropdown-menu>li>a:focus {
    background: rgba(255, 255, 255, 0.1) !important;
    color: #fff !important;
  }

  .navbar-default .dropdown-menu>.active>a,
  .navbar-default .dropdown-menu>.active>a:hover,
  .navbar-default .dropdown-menu>.active>a:focus,
  .navbar-default .dropdown-menu>li.active>a,
  .navbar-default .dropdown-menu>li.active>a:hover,
  .navbar-default .dropdown-menu>li.active>a:focus,
  .navbar-default .navbar-nav .open .dropdown-menu>.active>a,
  .navbar-default .navbar-nav .open .dropdown-menu>.active>a:hover,
  .navbar-default .navbar-nav .open .dropdown-menu>.active>a:focus,
  .navbar-default .navbar-nav .open .dropdown-menu>li.active>a,
  .navbar-default .navbar-nav .open .dropdown-menu>li.active>a:hover,
  .navbar-default .navbar-nav .open .dropdown-menu>li.active>a:focus {
    background: rgba(255, 255, 255, 0.22) !important;
    background-color: rgba(255, 255, 255, 0.22) !important;
    color: #fff !important;
    -webkit-text-fill-color: #fff !important;
  }

  .navbar-default .dropdown-menu>li>a .fa,
  .navbar-default .dropdown-menu>li>a .glyphicon {
    color: #fff;
  }
}

/* ---------- Main content — ritmo verticale ---------- */

#main.container {
  max-width: 1140px;
  padding-top: var(--page-pad-y) !important;
  padding-bottom: var(--page-pad-y-bottom) !important;
}

#main h1 {
  color: var(--pa-text) !important;
  font-family: var(--pa-font) !important;
  font-weight: 700 !important;
  font-size: clamp(1.6rem, 2.4vw, 2.1rem) !important;
  line-height: 1.25 !important;
  margin: 0 0 var(--space-3) !important;
  letter-spacing: -0.01em;
  max-width: 40ch;
}

/* Nasconde l'identificativo dopo il nome (secondo span in h1) */
#main h1>span+span {
  display: none !important;
}

/*
  Pagina Password: nasconde "Password per NOME [matricola]".
  Nome e IdM sono nello stesso <b> (non separabili come in h1),
  quindi si riscrive il titolo via ::before.
*/
#main h2[data-translate="password.title"] {
  font-size: 0 !important;
  letter-spacing: 0 !important;
  color: var(--pa-text) !important;
  font-family: var(--pa-font) !important;
  font-weight: 700 !important;
  line-height: 1.25 !important;
  margin: 0 0 var(--space-3) !important;
}

#main h2[data-translate="password.title"]::before {
  content: "Password" !important;
  display: block !important;
  font-size: clamp(1.6rem, 2.4vw, 2.1rem) !important;
  font-weight: 700 !important;
  letter-spacing: -0.01em;
  line-height: 1.25 !important;
  color: var(--pa-text) !important;
}

#main h2[data-translate="password.title"] b {
  display: none !important;
}

/*
  Pagina Impostazioni: toglie le [] intorno al nome.
  font-size:0 nasconde i text node "[" e "]";
  ::before ripristina l'etichetta; il <b> resta visibile (nome + IdM).
  Nota: " - 15830373" è nello stesso text node del nome → non separabile via CSS.
*/
#main h2[data-translate="settings.title"] {
  font-size: 0 !important;
  letter-spacing: 0 !important;
  color: var(--pa-text) !important;
  font-family: var(--pa-font) !important;
  font-weight: 700 !important;
  line-height: 1.25 !important;
  margin: 0 0 var(--space-3) !important;
}

#main h2[data-translate="settings.title"]::before {
  content: "Impostazioni per l'utente " !important;
  font-size: clamp(1.6rem, 2.4vw, 2.1rem) !important;
  font-weight: 700 !important;
  letter-spacing: -0.01em;
  line-height: 1.25 !important;
  color: var(--pa-text) !important;
}

#main h2[data-translate="settings.title"] b {
  font-size: clamp(1.6rem, 2.4vw, 2.1rem) !important;
  font-weight: 700 !important;
  letter-spacing: -0.01em;
  line-height: 1.25 !important;
  color: var(--pa-text) !important;
}

/* ---------- Form account (utente.html + password.html) ----------
   Layout istituzionale condiviso — token PA della home.
   Scope: settings.title | password.title → non tocca index.
   ---------------------------------------------------- */

#main:has(h2[data-translate="settings.title"]),
#main:has(h2[data-translate="password.title"]) {
  max-width: 720px;
  margin-left: auto !important;
  margin-right: auto !important;
}

#main:has(h2[data-translate="settings.title"])>div[ui-view="content"]>div>.row>[class*="col-"],
#main:has(h2[data-translate="password.title"])>div[ui-view="content"]>div>.row>[class*="col-"] {
  float: none !important;
  width: 100% !important;
  margin: 0 !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

#main:has(h2[data-translate="settings.title"]) h2[data-translate="settings.title"],
#main:has(h2[data-translate="password.title"]) h2[data-translate="password.title"] {
  margin: 0 0 var(--space-5) !important;
  padding-bottom: var(--space-3);
  border-bottom: 2px solid var(--pa-primary);
}

#main:has(h2[data-translate="settings.title"]) form[name="form"],
#main:has(h2[data-translate="password.title"]) form[name="form"] {
  display: flex;
  flex-direction: column;
  gap: 0;
  margin: 0;
  padding: var(--space-5) var(--space-5) var(--space-6);
  background: var(--pa-surface);
  border: 1px solid var(--pa-border);
  border-left: 4px solid var(--pa-primary);
  border-radius: var(--pa-radius);
  box-shadow: var(--pa-shadow);
}

#main:has(h2[data-translate="settings.title"]) .alert,
#main:has(h2[data-translate="password.title"]) .alert {
  border-radius: var(--pa-radius) !important;
  border: 1px solid transparent !important;
  border-left-width: 4px !important;
  padding: var(--space-3) var(--space-4) !important;
  margin: 0 0 var(--space-4) !important;
  font-family: var(--pa-font) !important;
  font-size: 15px !important;
  line-height: 1.5 !important;
}

#main:has(h2[data-translate="settings.title"]) .alert-success,
#main:has(h2[data-translate="password.title"]) .alert-success {
  background: #e8f5f3 !important;
  border-color: #b8ddd8 !important;
  border-left-color: var(--pa-success) !important;
  color: var(--pa-success) !important;
}

#main:has(h2[data-translate="settings.title"]) .alert-warning,
#main:has(h2[data-translate="password.title"]) .alert-warning {
  background: #fff8eb !important;
  border-color: #efd9a8 !important;
  border-left-color: var(--pa-warning) !important;
  color: #6b4500 !important;
}

#main:has(h2[data-translate="settings.title"]) .form-group,
#main:has(h2[data-translate="password.title"]) .form-group {
  margin: 0 0 var(--space-4) !important;
  position: relative;
}

#main:has(h2[data-translate="settings.title"]) .form-group:last-of-type,
#main:has(h2[data-translate="password.title"]) .form-group:last-of-type {
  margin-bottom: var(--space-5) !important;
}

#main:has(h2[data-translate="settings.title"]) .control-label,
#main:has(h2[data-translate="settings.title"]) label.control-label,
#main:has(h2[data-translate="password.title"]) .control-label,
#main:has(h2[data-translate="password.title"]) label.control-label {
  display: block;
  margin: 0 0 var(--space-2) !important;
  color: var(--pa-text) !important;
  font-family: var(--pa-font) !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  line-height: 1.35 !important;
  letter-spacing: 0.01em;
}

#main:has(h2[data-translate="settings.title"]) .form-control,
#main:has(h2[data-translate="password.title"]) .form-control {
  display: block;
  width: 100% !important;
  max-width: 100%;
  height: auto !important;
  min-height: var(--touch-min);
  padding: var(--space-3) var(--space-4) !important;
  padding-right: 48px !important;
  color: var(--pa-text) !important;
  background: var(--pa-surface) !important;
  border: 1px solid var(--pa-border) !important;
  border-radius: var(--pa-radius) !important;
  box-shadow: none !important;
  font-family: var(--pa-font) !important;
  font-size: 16px !important;
  line-height: 1.4 !important;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

#main:has(h2[data-translate="settings.title"]) .form-control:hover:not(:disabled):not([disabled]),
#main:has(h2[data-translate="password.title"]) .form-control:hover:not(:disabled):not([disabled]) {
  border-color: #cbb4b7 !important;
}

#main:has(h2[data-translate="settings.title"]) .form-control:focus,
#main:has(h2[data-translate="password.title"]) .form-control:focus {
  border-color: var(--pa-primary) !important;
  box-shadow: 0 0 0 3px rgba(130, 36, 51, 0.15) !important;
  outline: none !important;
}

#main:has(h2[data-translate="settings.title"]) .form-control:focus-visible,
#main:has(h2[data-translate="password.title"]) .form-control:focus-visible {
  outline: 3px solid var(--pa-focus) !important;
  outline-offset: 2px;
}

/* Campi anagrafici in sola lettura (settings) */
#main:has(h2[data-translate="settings.title"]) .form-control:disabled,
#main:has(h2[data-translate="settings.title"]) .form-control[disabled] {
  background: var(--pa-neutral-bg) !important;
  border-color: var(--pa-neutral-border) !important;
  color: var(--pa-text-muted) !important;
  cursor: not-allowed;
  opacity: 1 !important;
  padding-right: var(--space-4) !important;
}

#main:has(h2[data-translate="settings.title"]) .help-block,
#main:has(h2[data-translate="password.title"]) .help-block {
  margin: var(--space-2) 0 0 !important;
  color: var(--pa-danger) !important;
  font-size: 13px !important;
  line-height: 1.4 !important;
}

/* CTA primaria — "Salva" */
#main:has(h2[data-translate="settings.title"]) .btn.btn-uniroma,
#main:has(h2[data-translate="settings.title"]) button[type="submit"].btn-uniroma,
#main:has(h2[data-translate="password.title"]) .btn.btn-uniroma,
#main:has(h2[data-translate="password.title"]) button[type="submit"].btn-uniroma {
  align-self: flex-start;
  min-height: var(--touch-min);
  min-width: 140px;
  margin-top: var(--space-2);
  padding: var(--space-3) var(--space-5) !important;
  background: var(--pa-primary) !important;
  border: 0 !important;
  border-radius: var(--pa-radius) !important;
  color: #fff !important;
  font-family: var(--pa-font) !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  letter-spacing: 0.01em;
  line-height: 1.2 !important;
  box-shadow: none !important;
  transition: background-color 0.15s ease, filter 0.15s ease;
}

#main:has(h2[data-translate="settings.title"]) .btn.btn-uniroma:hover,
#main:has(h2[data-translate="settings.title"]) .btn.btn-uniroma:focus,
#main:has(h2[data-translate="settings.title"]) button[type="submit"].btn-uniroma:hover,
#main:has(h2[data-translate="settings.title"]) button[type="submit"].btn-uniroma:focus,
#main:has(h2[data-translate="password.title"]) .btn.btn-uniroma:hover,
#main:has(h2[data-translate="password.title"]) .btn.btn-uniroma:focus,
#main:has(h2[data-translate="password.title"]) button[type="submit"].btn-uniroma:hover,
#main:has(h2[data-translate="password.title"]) button[type="submit"].btn-uniroma:focus {
  background: var(--pa-primary-dark) !important;
  color: #fff !important;
  text-decoration: none !important;
}

#main:has(h2[data-translate="settings.title"]) .btn.btn-uniroma:focus-visible,
#main:has(h2[data-translate="settings.title"]) button[type="submit"].btn-uniroma:focus-visible,
#main:has(h2[data-translate="password.title"]) .btn.btn-uniroma:focus-visible,
#main:has(h2[data-translate="password.title"]) button[type="submit"].btn-uniroma:focus-visible {
  outline: 3px solid var(--pa-focus) !important;
  outline-offset: 3px;
}

#main:has(h2[data-translate="settings.title"]) .btn.btn-uniroma:active,
#main:has(h2[data-translate="settings.title"]) button[type="submit"].btn-uniroma:active,
#main:has(h2[data-translate="password.title"]) .btn.btn-uniroma:active,
#main:has(h2[data-translate="password.title"]) button[type="submit"].btn-uniroma:active {
  filter: brightness(0.96);
}

#main:has(h2[data-translate="settings.title"]) .btn.btn-uniroma[disabled],
#main:has(h2[data-translate="settings.title"]) .btn.btn-uniroma:disabled,
#main:has(h2[data-translate="settings.title"]) button[type="submit"].btn-uniroma[disabled],
#main:has(h2[data-translate="password.title"]) .btn.btn-uniroma[disabled],
#main:has(h2[data-translate="password.title"]) .btn.btn-uniroma:disabled,
#main:has(h2[data-translate="password.title"]) button[type="submit"].btn-uniroma[disabled] {
  background: #b89aa0 !important;
  color: rgba(255, 255, 255, 0.9) !important;
  cursor: not-allowed;
  filter: none;
  opacity: 1 !important;
}

/* --- Solo Impostazioni --- */

#main:has(h2[data-translate="settings.title"]) form[name="form"]>div:has(h3[data-translate="settings.contact.title"]) {
  margin: var(--space-2) 0 var(--space-4);
}

#main:has(h2[data-translate="settings.title"]) form[name="form"] hr {
  margin: 0 0 var(--space-4) !important;
  border: 0 !important;
  border-top: 1px solid var(--pa-border) !important;
}

#main:has(h2[data-translate="settings.title"]) h3[data-translate="settings.contact.title"] {
  margin: 0 !important;
  padding: 0 0 var(--space-2) !important;
  color: var(--pa-text) !important;
  font-family: var(--pa-font) !important;
  font-size: 1.125rem !important;
  font-weight: 700 !important;
  line-height: 1.3 !important;
  border-bottom: 2px solid var(--pa-primary);
}

#main:has(h2[data-translate="settings.title"]) .form-group:has([data-translate="global.form.aliasPosta"]) ul {
  list-style: none !important;
  margin: var(--space-2) 0 0 !important;
  padding: 0 !important;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

#main:has(h2[data-translate="settings.title"]) .form-group:has([data-translate="global.form.aliasPosta"]) li {
  margin: 0 !important;
  padding: 6px 12px !important;
  background: var(--pa-primary-bg);
  border: 1px solid #e8c5cb;
  border-radius: var(--pa-radius);
  color: var(--pa-primary) !important;
  font-family: var(--pa-font);
  font-size: 13px !important;
  font-weight: 600;
  line-height: 1.35;
}

#main:has(h2[data-translate="settings.title"]) .form-control {
  padding-right: var(--space-4) !important;
}

/* "Email Privata" + "*" sulla stessa riga (asterisco è text node dopo la label) */
#main:has(h2[data-translate="settings.title"]) .form-group:has(#email)>.control-label {
  display: inline !important;
  margin-bottom: 0 !important;
}

#main:has(h2[data-translate="settings.title"]) .form-group:has(#email) {
  color: var(--pa-danger);
  font-weight: 700;
  font-size: 14px;
  line-height: 1.35;
}

#main:has(h2[data-translate="settings.title"]) .form-group:has(#email)>.control-label {
  color: var(--pa-text) !important;
  font-weight: 600 !important;
}

#main:has(h2[data-translate="settings.title"]) .form-group:has(#email)>.form-control,
#main:has(h2[data-translate="settings.title"]) .form-group:has(#email)>div {
  display: block;
  margin-top: var(--space-2);
  color: var(--pa-text);
  font-weight: 400;
  font-size: 16px;
}

/* --- Solo Password --- */

#main:has(h2[data-translate="password.title"]) .alert-danger {
  background: #fdf0ee !important;
  border-color: #efc4bc !important;
  border-left-color: var(--pa-danger) !important;
  color: #8a2a1c !important;
}

#main:has(h2[data-translate="password.title"]) .alert-info {
  background: var(--pa-primary-bg) !important;
  border-color: #e8c5cb !important;
  border-left-color: var(--pa-primary) !important;
  color: var(--pa-text) !important;
}

#main:has(h2[data-translate="password.title"]) .alert-info ul {
  margin: var(--space-3) 0 0 !important;
  padding-left: 1.25em !important;
}

#main:has(h2[data-translate="password.title"]) .alert-info li {
  margin-bottom: var(--space-2);
}

#main:has(h2[data-translate="password.title"]) .alert-info ul ul {
  margin-top: var(--space-2) !important;
}

/* Toggle mostra/nascondi password (Glyphicon → FA) */
#main:has(h2[data-translate="password.title"]) .pass-eye-close,
#main:has(h2[data-translate="password.title"]) .pass-eye-open {
  position: absolute;
  /* label (14px * 1.35) + margin-bottom = bordo alto input; +1px bordo.
     Altezza = input (48px) - 2px bordi, così il box è sempre centrato */
  top: calc(14px * 1.35 + var(--space-2) + 1px);
  right: 1px;
  z-index: 2;
  float: none !important;
  width: var(--touch-min);
  height: 46px;
  margin: 0 !important;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  border: 0 !important;
  border-radius: var(--pa-radius) !important;
  background: transparent !important;
  color: var(--pa-text-muted) !important;
  font-family: FontAwesome !important;
  font-size: 18px !important;
  line-height: 1 !important;
  cursor: pointer;
  pointer-events: all;
}

/* Altezza input deterministica (indipendente dal browser) per allineare l'occhio */
#main:has(h2[data-translate="password.title"]) .form-group>input.form-control {
  box-sizing: border-box !important;
  height: 48px !important;
  min-height: 48px;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

#main:has(h2[data-translate="password.title"]) .pass-eye-close:hover,
#main:has(h2[data-translate="password.title"]) .pass-eye-open:hover,
#main:has(h2[data-translate="password.title"]) .pass-eye-close:focus,
#main:has(h2[data-translate="password.title"]) .pass-eye-open:focus {
  color: var(--pa-primary) !important;
  background: var(--pa-primary-bg) !important;
  outline: none;
}

#main:has(h2[data-translate="password.title"]) .pass-eye-close:focus-visible,
#main:has(h2[data-translate="password.title"]) .pass-eye-open:focus-visible {
  outline: 3px solid var(--pa-focus) !important;
  outline-offset: 2px;
}

#main:has(h2[data-translate="password.title"]) .pass-eye-close::before {
  content: "\f070" !important;
  /* eye-slash */
  font-family: FontAwesome !important;
}

#main:has(h2[data-translate="password.title"]) .pass-eye-open::before {
  content: "\f06e" !important;
  /* eye */
  font-family: FontAwesome !important;
}

#main:has(h2[data-translate="password.title"]) .pass-eye-open+.form-control,
#main:has(h2[data-translate="password.title"]) .pass-eye-open+input {
  background: #fffbf0 !important;
}

/* Robustezza password */
#main:has(h2[data-translate="password.title"]) #strength {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2) var(--space-3);
  margin-top: var(--space-3);
}

#main:has(h2[data-translate="password.title"]) #strength small {
  color: var(--pa-text-muted) !important;
  font-family: var(--pa-font);
  font-size: 13px !important;
}

#main:has(h2[data-translate="password.title"]) ul#strengthBar {
  display: flex !important;
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
  gap: 4px;
  vertical-align: middle;
}

#main:has(h2[data-translate="password.title"]) ul#strengthBar .point {
  display: block;
  width: 28px;
  height: 6px;
  border-radius: 2px;
  background: var(--pa-border);
}

@media (max-width: 767px) {

  #main:has(h2[data-translate="settings.title"]),
  #main:has(h2[data-translate="password.title"]) {
    max-width: none;
  }

  #main:has(h2[data-translate="settings.title"]) form[name="form"],
  #main:has(h2[data-translate="password.title"]) form[name="form"] {
    padding: var(--space-4);
  }

  #main:has(h2[data-translate="settings.title"]) .btn.btn-uniroma,
  #main:has(h2[data-translate="settings.title"]) button[type="submit"].btn-uniroma,
  #main:has(h2[data-translate="password.title"]) .btn.btn-uniroma,
  #main:has(h2[data-translate="password.title"]) button[type="submit"].btn-uniroma {
    width: 100%;
    align-self: stretch;
  }
}

@media (prefers-reduced-motion: reduce) {

  #main:has(h2[data-translate="settings.title"]) .form-control,
  #main:has(h2[data-translate="settings.title"]) .btn.btn-uniroma,
  #main:has(h2[data-translate="settings.title"]) button[type="submit"].btn-uniroma,
  #main:has(h2[data-translate="password.title"]) .form-control,
  #main:has(h2[data-translate="password.title"]) .btn.btn-uniroma,
  #main:has(h2[data-translate="password.title"]) button[type="submit"].btn-uniroma {
    transition: none !important;
  }
}

/* Macro / ruoli: full-bleed della colonna */
#main .margin-top-20.margin-bottom-20,
#main div[ng-repeat*="roleList"] {
  width: 100%;
  box-sizing: border-box;
}

/* Neutralizza utility Bootstrap: ritmo gestito sotto */
#main .margin-top-20 {
  margin-top: 0 !important;
}

#main .margin-bottom-20 {
  margin-bottom: 0 !important;
}

/* Stack tra chip ruolo consecutive */
#main .margin-top-20.margin-bottom-20+.margin-top-20.margin-bottom-20 {
  margin-top: var(--stack-tight) !important;
}

/* Gap stretto tra chip; gap di sezione prima delle card */
#main .margin-top-20.margin-bottom-20 {
  margin-bottom: var(--stack-tight) !important;
}

#main .margin-top-20.margin-bottom-20:has(+ div[style*="min-height:300px"]) {
  margin-bottom: var(--section-gap) !important;
}

/* ---------- Role pills → chip istituzionali ---------- */

#main .nav.nav-pills.no-pointer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-start;
  column-gap: var(--space-3);
  row-gap: var(--space-2);
  box-sizing: border-box;
  width: 100%;
  margin: 0 !important;
  padding: var(--space-2) var(--space-3) !important;
  padding-left: var(--space-3) !important;
  background: var(--pa-surface);
  border: 1px solid var(--pa-border);
  border-left: 4px solid var(--pa-primary);
  border-radius: var(--pa-radius);
  box-shadow: none;
  text-align: left;
}

/* Coppia label+badge: unita, altezza uniforme */
#main .nav.nav-pills.no-pointer>li {
  float: none !important;
  margin: 0 !important;
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
  flex-wrap: nowrap;
  gap: 6px;
  max-width: 100%;
  min-width: 0;
  line-height: 1.2;
  padding: 0 !important;
}

#main .nav.nav-pills.no-pointer>li.active>span,
#main .nav.nav-pills.no-pointer>li>span:not(.badge) {
  color: var(--pa-text-muted);
  font-size: 10px;
  font-weight: 600;
  flex: 0 0 auto;
  white-space: nowrap;
  line-height: 1.2;
}

/* Chip a riga unica: niente pillole alte */
#main .nav.nav-pills.no-pointer .badge {
  display: inline-block;
  box-sizing: border-box;
  margin: 0 !important;
  padding: 4px 10px !important;
  background: var(--pa-primary) !important;
  border-radius: 999px !important;
  color: #fff !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  letter-spacing: 0.02em;
  line-height: 1.25 !important;
  text-align: center;
  text-transform: uppercase;
  white-space: nowrap !important;
  overflow: hidden;
  text-overflow: ellipsis;
  vertical-align: middle;
}

/*
  Barra ruolo visibile solo con data-stato-specifico valorizzato e ≠ CESSATO.
  Attributo assente o valore CESSATO → display: none.
*/
#main .margin-top-20.margin-bottom-20:not([data-stato-specifico]),
#main div[ng-repeat*="roleList"]:not([data-stato-specifico]),
#main [data-stato-specifico="CESSATO" i],
#main [data-stato-specifico*="CESSATO" i] {
  display: none !important;
}

/* ---------- Voci servizio = box Sapienza con icona ---------- */

:root {
  --tile-gap: 10px;
  --tile-pad: 28px 16px;
  --tile-min-h: 168px;
  --tile-min-w: 200px;
  --tile-radius: 0;
  --tile-icon: 4.25rem;
  --tile-focus: #ffb400;
  --tile-a: #822433;
  --tile-a-hover: #6e1e2c;
  --tile-b: #c45a28;
  --tile-b-hover: #a84c22;
  --tile-c: #1a6b6e;
  --tile-c-hover: #155557;
  --tile-d: #3d5c3a;
  --tile-d-hover: #324c30;
  --tile-e: #6b5a4a;
  --tile-e-hover: #57493c;
  --section-gap: 16px;
  --sticky-top: 8px;
}

/*
  Tutte le sezioni: full-width, striscia orizzontale di pulsanti (grid).
*/
div[style*="min-height:300px"] {
  display: flex !important;
  flex-direction: column;
  flex-wrap: nowrap;
  align-items: stretch;
  gap: var(--section-gap);
  box-sizing: border-box;
  width: 100%;
  max-width: 100%;
  min-height: 0 !important;
  margin-top: var(--space-3) !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  overflow: visible;
  background: transparent;
}

div[style*="min-height:300px"]>.col-md-4 {
  float: none !important;
  display: flex;
  flex-direction: column;
  flex: 0 0 auto;
  min-width: 0;
  max-width: 100%;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

/* Titolo della sezione — sempre sopra i propri box */
div[style*="min-height:300px"] label {
  display: block;
  position: relative;
  flex: 0 0 auto;
  order: 0;
  margin: 0 0 var(--space-3) !important;
  padding: 0 0 var(--space-2) 0 !important;
  border: 0 !important;
  border-bottom: 2px solid var(--pa-primary) !important;
  color: var(--pa-text) !important;
  font-family: var(--pa-font) !important;
  font-size: clamp(1.35rem, 2.1vw, 1.7rem) !important;
  font-weight: 700 !important;
  letter-spacing: 0.03em;
  line-height: 1.3 !important;
  text-transform: uppercase !important;
  min-width: 0;
  max-width: 100%;
  overflow-wrap: anywhere;
  hyphens: auto;
}

div[style*="min-height:300px"] label::before,
div[style*="min-height:300px"] label::after {
  display: none !important;
  content: none !important;
}

/* Nasconde la label se l'ul non ha servizi (vale per tutte le colonne) */
div[style*="min-height:300px"]>.col-md-4:not(:has(ul > li))>label {
  display: none !important;
}

/* ——— Striscia orizzontale di pulsanti (tutte le sezioni) ——— */
div[style*="min-height:300px"] ul {
  list-style: none !important;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(var(--tile-min-w), 1fr));
  grid-auto-rows: 1fr;
  gap: var(--tile-gap);
  flex: 1 1 auto;
  width: 100%;
  align-items: stretch;
  align-content: start;
  order: 1;
}

div[style*="min-height:300px"] ul li {
  margin: 0;
  padding: 0;
  list-style: none !important;
  min-width: 0;
  border: 0;
  display: flex;
}

/* Pulsante: icona sopra, testo sotto (una sola riga) */
div[style*="min-height:300px"] ul li a {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 18px;
  width: 100%;
  min-height: var(--tile-min-h);
  height: 100%;
  margin: 0;
  padding: var(--tile-pad);
  border: 0 !important;
  border-radius: var(--tile-radius) !important;
  background: var(--tile-a) !important;
  color: #fff !important;
  font-family: var(--pa-font);
  font-size: 1.375rem;
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: 0.01em;
  text-align: center;
  text-decoration: none !important;
  text-transform: none;
  box-shadow: none !important;
  white-space: normal;
  word-break: normal;
  overflow-wrap: normal;
  hyphens: none;
  overflow: visible;
  transition: background-color 0.15s ease, filter 0.15s ease;
}

div[style*="min-height:300px"] ul li:nth-child(5n + 1) a {
  background: var(--tile-a) !important;
}

div[style*="min-height:300px"] ul li:nth-child(5n + 2) a {
  background: var(--tile-b) !important;
}

div[style*="min-height:300px"] ul li:nth-child(5n + 3) a {
  background: var(--tile-c) !important;
}

div[style*="min-height:300px"] ul li:nth-child(5n + 4) a {
  background: var(--tile-d) !important;
}

div[style*="min-height:300px"] ul li:nth-child(5n + 5) a {
  background: var(--tile-e) !important;
}

div[style*="min-height:300px"] ul li:nth-child(5n + 1) a:hover {
  background: var(--tile-a-hover) !important;
}

div[style*="min-height:300px"] ul li:nth-child(5n + 2) a:hover {
  background: var(--tile-b-hover) !important;
}

div[style*="min-height:300px"] ul li:nth-child(5n + 3) a:hover {
  background: var(--tile-c-hover) !important;
}

div[style*="min-height:300px"] ul li:nth-child(5n + 4) a:hover {
  background: var(--tile-d-hover) !important;
}

div[style*="min-height:300px"] ul li:nth-child(5n + 5) a:hover {
  background: var(--tile-e-hover) !important;
}

div[style*="min-height:300px"] ul li a:hover {
  color: #fff !important;
  text-decoration: none !important;
  box-shadow: none !important;
}

div[style*="min-height:300px"] ul li a:active {
  filter: brightness(0.92);
}

div[style*="min-height:300px"] ul li a:focus {
  outline: none;
}

div[style*="min-height:300px"] ul li a:focus-visible {
  outline: 3px solid var(--tile-focus) !important;
  outline-offset: 3px;
  z-index: 1;
  position: relative;
}

div[style*="min-height:300px"] ul li a .glyphicon {
  display: none !important;
}

/* ---------- Icone Font Awesome 4.7 (tile) ---------- */

div[style*="min-height:300px"] ul li a::before {
  content: "\f009";
  /* th-large */
  display: block;
  flex: 0 0 auto;
  order: -1;
  width: var(--tile-icon);
  height: var(--tile-icon);
  margin: 0;
  color: #fff !important;
  font-family: FontAwesome !important;
  font-size: var(--tile-icon);
  font-weight: normal;
  font-style: normal;
  line-height: 1;
  text-align: center;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  background: none !important;
  -webkit-mask: none !important;
  mask: none !important;
}

div[style*="min-height:300px"] ul li>span:not(.glyphicon):not(.ng-hide) {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 18px;
  width: 100%;
  min-height: var(--tile-min-h);
  height: 100%;
  padding: var(--tile-pad);
  border: 0;
  border-radius: var(--tile-radius);
  background: var(--tile-e);
  color: rgba(255, 255, 255, 0.85);
  font-family: var(--pa-font);
  font-weight: 700;
  font-size: 1.375rem;
  line-height: 1.25;
  letter-spacing: 0.01em;
  text-align: center;
  text-transform: none;
  white-space: normal;
  word-break: normal;
  overflow-wrap: normal;
  overflow: visible;
  hyphens: none;
  opacity: 0.9;
}

div[style*="min-height:300px"] ul li>span:not(.glyphicon):not(.ng-hide)::before {
  content: "\f05e";
  /* ban */
  display: block;
  flex: 0 0 auto;
  width: var(--tile-icon);
  height: var(--tile-icon);
  color: rgba(255, 255, 255, 0.75);
  font-family: FontAwesome !important;
  font-size: var(--tile-icon);
  line-height: 1;
  text-align: center;
  background: none !important;
  -webkit-mask: none !important;
  mask: none !important;
}

/* Wi-Fi — pittogramma SVG locale */
div[style*="min-height:300px"] ul li a#serv_WI-FI::before,
div[style*="min-height:300px"] ul li a[id*="WI-FI"]::before,
div[style*="min-height:300px"] ul li a[id*="WIFI"]::before,
div[style*="min-height:300px"] ul li a[href*="sapienza-wireless"]::before,
div[style*="min-height:300px"] ul li a[href*="wireless"]::before {
  content: "" !important;
  font-size: 0 !important;
  width: var(--tile-icon) !important;
  height: var(--tile-icon) !important;
  background-color: transparent !important;
  background-image: url("./icons/wifi.svg") !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: contain !important;
  transform: scale(1.2);
  transform-origin: center center;
}

/* Active Directory */
div[style*="min-height:300px"] ul li a#serv_ACTIVE_DIRECTORY::before,
div[style*="min-height:300px"] ul li a[id*="ACTIVE_DIRECTORY"]::before,
div[style*="min-height:300px"] ul li a[id*="AD_DOMINO"]::before {
  content: "\f233" !important;
  /* server */
}

/* U-GOV — logo ufficiale (scala senza spostare il testo) */
div[style*="min-height:300px"] ul li a#serv_U-GOV::before,
div[style*="min-height:300px"] ul li a[id*="U-GOV"]::before,
div[style*="min-height:300px"] ul li a[id*="UGOV"]::before,
div[style*="min-height:300px"] ul li a[href*="u-gov.it"]::before {
  content: "" !important;
  font-size: 0 !important;
  width: var(--tile-icon) !important;
  height: var(--tile-icon) !important;
  background-color: transparent !important;
  background-image: url("./icons/ugov.png") !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: contain !important;
  transform: scale(1.45);
  transform-origin: center center;
}

/* Cedolino U-WEB — logo ufficiale stipendi (esclude Timesheet /appts) */
div[style*="min-height:300px"] ul li a#serv_UWEB::before,
div[style*="min-height:300px"] ul li a[id*="CEDOLINO"]::before,
div[style*="min-height:300px"] ul li a[href*="u-web.cineca.it"]:not([href*="appts"]):not([id*="TIMESHEET"]):not([id*="UWEB-TS"])::before {
  content: "" !important;
  font-size: 0 !important;
  width: var(--tile-icon) !important;
  height: var(--tile-icon) !important;
  background-color: transparent !important;
  background-image: url("./icons/stipendi.png") !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: contain !important;
  transform: scale(1.45);
  transform-origin: center center;
}

/* Mail — logo ufficiale posta */
div[style*="min-height:300px"] ul li a#serv_MAIL::before,
div[style*="min-height:300px"] ul li a[id*="MAIL"]::before,
div[style*="min-height:300px"] ul li a[id*="GMAIL"]::before,
div[style*="min-height:300px"] ul li a[href*="mail.google.com"]::before {
  content: "" !important;
  font-size: 0 !important;
  width: var(--tile-icon) !important;
  height: var(--tile-icon) !important;
  background-color: transparent !important;
  background-image: url("./icons/posta.png") !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: contain !important;
  transform: scale(1.45);
  transform-origin: center center;
}

/* Presenze — icona dal riferimento (calendario checklist + gruppo) */
div[style*="min-height:300px"] ul li a#serv_PRESENZE::before,
div[style*="min-height:300px"] ul li a[id*="PRESENZE"]::before,
div[style*="min-height:300px"] ul li a[href*="presenze.uniroma1.it"]::before {
  content: "" !important;
  font-size: 0 !important;
  width: var(--tile-icon) !important;
  height: var(--tile-icon) !important;
  background-color: transparent !important;
  background-image: url("./icons/presenze.png") !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: contain !important;
  transform: scale(1.4);
  transform-origin: center center;
}

/* Acquisti — icona ufficiale ordini economato */
div[style*="min-height:300px"] ul li a#serv_ACQUISTI::before,
div[style*="min-height:300px"] ul li a[id*="ACQUISTI"]::before,
div[style*="min-height:300px"] ul li a[href*="acquisti"]::before {
  content: "" !important;
  font-size: 0 !important;
  width: var(--tile-icon) !important;
  height: var(--tile-icon) !important;
  background-color: transparent !important;
  background-image: url("./icons/acquisti.png") !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: contain !important;
  transform: scale(1.45);
  transform-origin: center center;
}

/* Elearning (Moodle) */
div[style*="min-height:300px"] ul li a#serv_ELEARNING::before,
div[style*="min-height:300px"] ul li a#serv_MOODLE::before,
div[style*="min-height:300px"] ul li a[id*="ELEARNING"]::before,
div[style*="min-height:300px"] ul li a[id*="MOODLE"]::before,
div[style*="min-height:300px"] ul li a[href*="elearning.uniroma1.it"]::before,
div[style*="min-height:300px"] ul li a[href*="moodle"]::before {
  content: "\f19d" !important;
  /* graduation-cap */
}

/* Infostud — logo ufficiale (Segreterie + Docenti) */
div[style*="min-height:300px"] ul li a#serv_INFOSTUD::before,
div[style*="min-height:300px"] ul li a#serv_INFOSTUD_SEGRETERIE::before,
div[style*="min-height:300px"] ul li a#serv_INFOSTUD_DOCENTI::before,
div[style*="min-height:300px"] ul li a[id*="INFOSTUD"]::before,
div[style*="min-height:300px"] ul li a[href*="infostud"]::before,
div[style*="min-height:300px"] ul li a[href*="idm.studenti"]::before {
  content: "" !important;
  font-size: 0 !important;
  width: var(--tile-icon) !important;
  height: var(--tile-icon) !important;
  background-color: transparent !important;
  background-image: url("./icons/infostud.png") !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: contain !important;
  transform: scale(2);
  transform-origin: center center;
}

/* IRIS ricerca — logo ufficiale */
div[style*="min-height:300px"] ul li a#serv_IRIS::before,
div[style*="min-height:300px"] ul li a#serv_RICERCA-IRIS::before,
div[style*="min-height:300px"] ul li a[id*="IRIS"]::before,
div[style*="min-height:300px"] ul li a[href*="iris.uniroma1.it"]::before {
  content: "" !important;
  font-size: 0 !important;
  width: var(--tile-icon) !important;
  height: var(--tile-icon) !important;
  background-color: transparent !important;
  background-image: url("./icons/iris.png") !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: contain !important;
  transform: scale(1.25);
  transform-origin: center center;
}

/* Media Library — logo ufficiale MLOL */
div[style*="min-height:300px"] ul li a#serv_MEDIALIBRARY::before,
div[style*="min-height:300px"] ul li a#serv_MEDIA_LIBRARY::before,
div[style*="min-height:300px"] ul li a#serv_MIOL::before,
div[style*="min-height:300px"] ul li a#serv_MLOL::before,
div[style*="min-height:300px"] ul li a[id*="MEDIA"]::before,
div[style*="min-height:300px"] ul li a[id*="MLOL"]::before,
div[style*="min-height:300px"] ul li a[href*="medialibrary"]::before,
div[style*="min-height:300px"] ul li a[href*="media-library"]::before,
div[style*="min-height:300px"] ul li a[href*="miol"]::before {
  content: "" !important;
  font-size: 0 !important;
  width: var(--tile-icon) !important;
  height: var(--tile-icon) !important;
  background-color: transparent !important;
  background-image: url("./icons/mlol.png") !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: contain !important;
  transform: scale(1.45);
  transform-origin: center center;
}

/* Protocollo informatico (Titulus) — documenti + timbro */
div[style*="min-height:300px"] ul li a#serv_PROTOCOLLO::before,
div[style*="min-height:300px"] ul li a#serv_TITULUS::before,
div[style*="min-height:300px"] ul li a[id*="PROTOCOLLO"]::before,
div[style*="min-height:300px"] ul li a[id*="TITULUS"]::before,
div[style*="min-height:300px"] ul li a[href*="titulus"]::before,
div[style*="min-height:300px"] ul li a[href*="protocollo"]::before {
  content: "" !important;
  font-size: 0 !important;
  width: var(--tile-icon) !important;
  height: var(--tile-icon) !important;
  background-color: transparent !important;
  background-image: url("./icons/protocollo.svg") !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: contain !important;
  transform: scale(1.15);
  transform-origin: center center;
}

/* Registro trattamento dati DPM — icona ufficiale */
div[style*="min-height:300px"] ul li a#serv_DPM::before,
div[style*="min-height:300px"] ul li a#serv_REGISTRO_DPM::before,
div[style*="min-height:300px"] ul li a[id*="DPM"]::before,
div[style*="min-height:300px"] ul li a[id*="REGISTRO"]::before,
div[style*="min-height:300px"] ul li a[href*="dpm"]::before,
div[style*="min-height:300px"] ul li a[href*="trattamento"]::before {
  content: "" !important;
  font-size: 0 !important;
  width: var(--tile-icon) !important;
  height: var(--tile-icon) !important;
  background-color: transparent !important;
  background-image: url("./icons/dpm.png") !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: contain !important;
  transform: scale(1.45);
  transform-origin: center center;
}

/* SIGEBA bandi ricerca — foglio + matita */
div[style*="min-height:300px"] ul li a#serv_SIGEBA::before,
div[style*="min-height:300px"] ul li a#serv_RICERCA-SIGEBA::before,
div[style*="min-height:300px"] ul li a[id*="SIGEBA"]::before,
div[style*="min-height:300px"] ul li a[href*="sigeba"]::before {
  content: "" !important;
  font-size: 0 !important;
  width: var(--tile-icon) !important;
  height: var(--tile-icon) !important;
  background-color: transparent !important;
  background-image: url("./icons/sigeba.png") !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: contain !important;
  transform: scale(1.35);
  transform-origin: center center;
}

/* Sistema Bibliotecario — icona ufficiale */
div[style*="min-height:300px"] ul li a#serv_BIBLIOTECARIO::before,
div[style*="min-height:300px"] ul li a#serv_BIBLIOTECHE::before,
div[style*="min-height:300px"] ul li a#serv_SISTEMA_BIBLIOTECARIO::before,
div[style*="min-height:300px"] ul li a#serv_SBS::before,
div[style*="min-height:300px"] ul li a#serv_CSB::before,
div[style*="min-height:300px"] ul li a#serv_OPAC::before,
div[style*="min-height:300px"] ul li a#serv_SEBINA::before,
div[style*="min-height:300px"] ul li a[id*="BIBLIOTEC"]::before,
div[style*="min-height:300px"] ul li a[id*="SISTEMA_BIBLIO"]::before,
div[style*="min-height:300px"] ul li a[id*="SBS"]::before,
div[style*="min-height:300px"] ul li a[id*="CSB"]::before,
div[style*="min-height:300px"] ul li a[id*="OPAC"]::before,
div[style*="min-height:300px"] ul li a[id*="SEBINA"]::before,
div[style*="min-height:300px"] ul li a[href*="bibliotec"]::before,
div[style*="min-height:300px"] ul li a[href*="/sbs"]::before,
div[style*="min-height:300px"] ul li a[href*="web.uniroma1.it/sbs"]::before,
div[style*="min-height:300px"] ul li a[href*="csb.web.uniroma1.it"]::before,
div[style*="min-height:300px"] ul li a[href*="opac.uniroma1.it"]::before,
div[style*="min-height:300px"] ul li a[href*="Sebina"]::before,
div[style*="min-height:300px"] ul li a[href*="sbn"]::before {
  content: "" !important;
  font-size: 0 !important;
  width: var(--tile-icon) !important;
  height: var(--tile-icon) !important;
  background-color: transparent !important;
  background-image: url("./icons/biblioteca.png") !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: contain !important;
  transform: scale(1.45);
  transform-origin: center center;
}

/* Statistiche OPIS */
div[style*="min-height:300px"] ul li a#serv_OPIS::before,
div[style*="min-height:300px"] ul li a#serv_STATISTICHE_OPIS::before,
div[style*="min-height:300px"] ul li a[id*="OPIS"]::before,
div[style*="min-height:300px"] ul li a[href*="opis"]::before {
  content: "\f201" !important;
  /* line-chart */
}

/* Timesheet U-WEB — documento + orologio */
div[style*="min-height:300px"] ul li a#serv_TIMESHEET::before,
div[style*="min-height:300px"] ul li a#serv_RICERCA-UWEB-TS::before,
div[style*="min-height:300px"] ul li a[id*="TIMESHEET"]::before,
div[style*="min-height:300px"] ul li a[id*="UWEB-TS"]::before,
div[style*="min-height:300px"] ul li a[href*="timesheet"]::before,
div[style*="min-height:300px"] ul li a[href*="/appts"]::before {
  content: "" !important;
  font-size: 0 !important;
  width: var(--tile-icon) !important;
  height: var(--tile-icon) !important;
  background-color: transparent !important;
  background-image: url("./icons/timesheet.svg") !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: contain !important;
  transform: scale(1.2);
  transform-origin: center center;
}

/* Zoom */
div[style*="min-height:300px"] ul li a#serv_ZOOM::before,
div[style*="min-height:300px"] ul li a[id*="ZOOM"]::before,
div[style*="min-height:300px"] ul li a[href*="zoom.us"]::before,
div[style*="min-height:300px"] ul li a[href*="zoom.com"]::before {
  content: "\f03d" !important;
  /* video-camera */
}

/* Elezioni Rettore/Rettrice — urna elettorale */
div[style*="min-height:300px"] ul li a[href*="eligonext"]::before,
div[style*="min-height:300px"] ul li a[href*="evoting"]::before,
div[style*="min-height:300px"] ul li a[id*="ELEZION"]::before,
div[style*="min-height:300px"] ul li a[id*="RETTORE"]::before {
  content: "" !important;
  font-size: 0 !important;
  width: var(--tile-icon) !important;
  height: var(--tile-icon) !important;
  background-color: transparent !important;
  background-image: url("./icons/elezioni.svg") !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: contain !important;
  transform: scale(1.15);
  transform-origin: center center;
}

/* Redazione portale uniroma1.it Icona Vespa */
div[style*="min-height:300px"] ul li a#serv_UNIROMA1_REDAZIONE::before {
  content: "" !important;
  font-size: 0 !important;
  width: var(--tile-icon) !important;
  height: var(--tile-icon) !important;
  background-color: transparent !important;
  background-image: url("./icons/redazione_uniroma1.png") !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: contain !important;
  transform: scale(1.3);
  transform-origin: center center;
}

div[style*="min-height:300px"] a[href*="#/dashboard"]::before {
  content: "\f0e4" !important;
  /* tachometer / dashboard */
}

div[style*="min-height:300px"] a[href*="/esternis"]::before,
div[style*="min-height:300px"] a[href*="#/esternis"]::before {
  content: "\f234" !important;
  /* user-plus */
}

div[style*="min-height:300px"] a[href*="#/policy"]::before {
  content: "\f132" !important;
  /* shield */
}

div[style*="min-height:300px"] a[href*="registryEntities"]::before {
  content: "\f1c0" !important;
  /* database */
}

div[style*="min-height:300px"] a[href*="esternisRid"]::before {
  content: "\f21b" !important;
  /* user-secret */
}

div[style*="min-height:300px"] a[href*="/studenti"]:not([id*="INFOSTUD"]):not([href*="idm.studenti"]):not([href*="infostud"])::before {
  content: "\f19d" !important;
  /* graduation-cap */
}

/* Infostud Docenti/Segreterie: ripete dopo /studenti così vince sul graduation-cap */
div[style*="min-height:300px"] ul li a#serv_INFOSTUD_DOCENTI::before,
div[style*="min-height:300px"] ul li a[id*="INFOSTUD_DOC"]::before,
div[style*="min-height:300px"] ul li a[id*="INFOSTUD-DOC"]::before,
div[style*="min-height:300px"] ul li a[id*="INFOSTUD"]::before,
div[style*="min-height:300px"] ul li a[href*="infostud"]::before,
div[style*="min-height:300px"] ul li a[href*="idm.studenti"]::before {
  content: "" !important;
  font-size: 0 !important;
  width: var(--tile-icon) !important;
  height: var(--tile-icon) !important;
  background-color: transparent !important;
  background-image: url("./icons/infostud.png") !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: contain !important;
  transform: scale(2);
  transform-origin: center center;
}

div[style*="min-height:300px"] a[href*="user-management"]::before {
  content: "\f0c0" !important;
  /* users */
}

div[style*="min-height:300px"] a[href*="rejectedRows"]::before {
  content: "\f071" !important;
  /* exclamation-triangle */
}

div[style*="min-height:300px"] a[href*="#/password"]::before {
  content: "\f084" !important;
  /* key */
}

div[style*="min-height:300px"] a[href*="#/settings"]::before {
  content: "\f007" !important;
  /* user */
}

/* ---------- Self-Service: box rossi più piccoli, allineati a destra ---------- */
div[style*="min-height:300px"]>.col-md-4:last-child ul {
  --tile-min-w: 112px;
  --tile-min-h: 92px;
  --tile-pad: 8px 6px;
  --tile-icon: 2rem;
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(var(--tile-min-w), var(--tile-min-w)));
  justify-content: end;
  justify-items: stretch;
  width: 100%;
  margin-left: auto;
  gap: 6px;
}

div[style*="min-height:300px"] ul li:nth-child(n) a[href*="#/password"],
div[style*="min-height:300px"] ul li:nth-child(n) a[href*="#/settings"] {
  min-height: var(--tile-min-h) !important;
  padding: var(--tile-pad) !important;
  font-size: 1.375rem !important;
  letter-spacing: 0.01em !important;
  gap: 8px !important;
  background: var(--tile-a) !important;
  outline: none !important;
  border: 0 !important;
  box-shadow: none !important;
  filter: none;
  transform: none;
  transition: background-color 0.15s ease, filter 0.15s ease !important;
}

div[style*="min-height:300px"] ul li:nth-child(n) a[href*="#/password"]:hover,
div[style*="min-height:300px"] ul li:nth-child(n) a[href*="#/settings"]:hover {
  background: var(--tile-a-hover) !important;
  box-shadow: none !important;
  transform: none;
  text-decoration: none !important;
  filter: none;
}

div[style*="min-height:300px"] ul li:nth-child(n) a[href*="#/password"]:active,
div[style*="min-height:300px"] ul li:nth-child(n) a[href*="#/settings"]:active {
  transform: none;
  box-shadow: none !important;
  filter: brightness(0.96);
}

div[style*="min-height:300px"] ul li:nth-child(n) a[href*="#/password"]:focus-visible,
div[style*="min-height:300px"] ul li:nth-child(n) a[href*="#/settings"]:focus-visible {
  outline: 3px solid var(--tile-focus) !important;
  outline-offset: 3px !important;
}

div[style*="min-height:300px"] ul li:nth-child(n) a[href*="#/password"]::before,
div[style*="min-height:300px"] ul li:nth-child(n) a[href*="#/settings"]::before {
  width: var(--tile-icon) !important;
  height: var(--tile-icon) !important;
  font-size: var(--tile-icon) !important;
  margin-bottom: 0;
}

/* Nasconde il titolo «Servizi Self-Service» */
div[style*="min-height:300px"] label[data-translate="home.section.selfServices"] {
  display: none !important;
}

/* Self-Service: sopra «Servizi disponibili per il tuo profilo» (niente sticky) */
div[style*="min-height:300px"]>.col-md-4:last-child {
  order: -1;
  position: static;
  z-index: auto;
  max-height: none;
  overflow: visible;
  background: transparent;
}

/* ---------- Navbar: Glyphicon → Font Awesome 4.7 ---------- */
.navbar-default .navbar-nav .glyphicon {
  font-family: FontAwesome !important;
  font-style: normal !important;
  font-weight: normal !important;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.navbar-default .navbar-nav .glyphicon-home::before {
  content: "\f015" !important;
}

/* home */
.navbar-default .navbar-nav .glyphicon-th-list::before {
  content: "\f0ca" !important;
}

/* list-ul */
.navbar-default .navbar-nav .glyphicon-screenshot::before {
  content: "\f132" !important;
}

/* shield */
.navbar-default .navbar-nav .glyphicon-tower::before {
  content: "\f19c" !important;
}

/* university */
.navbar-default .navbar-nav .glyphicon-wrench::before {
  content: "\f013" !important;
}

/* cog */
.navbar-default .navbar-nav .glyphicon-flag::before {
  content: "\f1ab" !important;
}

/* language */

.navbar-default .navbar-nav .fa-tachometer::before {
  content: "\f0e4" !important;
}

.navbar-default .navbar-nav .fa-times-circle::before {
  content: "\f057" !important;
}

.navbar-default .navbar-nav .fa-briefcase::before {
  content: "\f0b1" !important;
}

.navbar-default .navbar-nav .fa-asterisk::before {
  content: "\f069" !important;
}

.navbar-default .navbar-nav .fa-list-alt::before {
  content: "\f022" !important;
}

.navbar-default .navbar-nav .fa-users::before {
  content: "\f0c0" !important;
}

.navbar-default .navbar-nav .fa-user::before {
  content: "\f007" !important;
}

.navbar-default .navbar-nav .fa-key::before {
  content: "\f084" !important;
}

.navbar-default .navbar-nav .fa-sign-out::before {
  content: "\f08b" !important;
}

/* ---------- Footer istituzionale ---------- */

#footer.site-footer {
  margin-top: var(--space-4);
  background: var(--pa-footer) !important;
  color: #fff !important;
  border-top: 3px solid var(--pa-primary);
}

#footer #credits {
  padding: var(--space-4) var(--space-4);
}

#footer .region-credits p,
#footer #block-block-4 p {
  margin: 0;
  color: rgba(255, 255, 255, 0.92) !important;
  font-family: var(--pa-font);
  font-size: 14px;
  font-weight: 400;
  line-height: 1.55;
  text-align: center;
}

/* ---------- Utility Bootstrap overrides ---------- */

.alert-uniroma1 {
  background: var(--pa-primary-bg) !important;
  border: 1px solid #e8c5cb !important;
  border-left: 4px solid var(--pa-primary) !important;
  color: var(--pa-text) !important;
  border-radius: var(--pa-radius) !important;
  padding: var(--space-3) var(--space-4) !important;
  margin-bottom: var(--stack-loose) !important;
}

/* Neutralizzati in #main: vedi blocco ritmo verticale sopra */

.margin-top-20 {
  margin-top: var(--space-4) !important;
}

.margin-bottom-20 {
  margin-bottom: var(--space-4) !important;
}

/* ---------- Responsive ---------- */

@media (max-width: 991px) {
  :root {
    --tile-gap: 10px;
    --tile-min-w: 160px;
    --sticky-top: 0px;
  }

  div[style*="min-height:300px"]>.col-md-4:last-child {
    order: -1;
    position: static;
    z-index: auto;
    max-height: none;
    overflow: visible;
    background: transparent;
  }

  /* Tablet: pulsanti con larghezza minima, wrap su più righe se serve */
  div[style*="min-height:300px"] ul {
    grid-template-columns: repeat(auto-fit, minmax(var(--tile-min-w), 1fr));
  }
}

@media (max-width: 767px) {
  :root {
    --page-pad-y: var(--space-3);
    --page-pad-y-bottom: var(--space-3);
    --tile-gap: 8px;
  }

  #main.container {
    padding-top: var(--page-pad-y) !important;
    padding-bottom: var(--page-pad-y-bottom) !important;
    overflow-x: hidden;
  }

  #main h1 {
    font-size: 1.45rem !important;
    margin-bottom: var(--space-2) !important;
    max-width: none;
  }

  #footer.site-footer {
    margin-top: var(--space-3);
  }

  #footer #credits {
    padding: var(--space-3) var(--space-4);
  }

  #main .nav.nav-pills.no-pointer {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-start;
    column-gap: var(--space-2);
    row-gap: var(--space-2);
    padding: var(--space-2) var(--space-3) !important;
  }

  #main .nav.nav-pills.no-pointer>li {
    flex-direction: row;
    align-items: center;
    gap: 6px;
  }

  #main .nav.nav-pills.no-pointer>li>span:not(.badge) {
    white-space: nowrap;
    font-size: 10px;
  }

  #main .nav.nav-pills.no-pointer .badge {
    font-size: 10px !important;
    padding: 3px 8px !important;
  }

  .navbar-default .navbar-nav>li>a {
    min-height: var(--touch-min);
    padding: var(--space-3) var(--space-5) !important;
  }

  div[style*="min-height:300px"] label {
    font-size: 1.3rem !important;
  }

  /* Mobile: griglia 2 icone per riga (escluso Self-Service) */
  div[style*="min-height:300px"] ul {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-auto-flow: row;
    grid-auto-columns: unset;
    justify-content: stretch;
    overflow-x: visible;
    overflow-y: visible;
    scroll-snap-type: none;
    padding-bottom: 0;
  }

  /* Self-Service: restano piccoli e a destra anche su mobile */
  div[style*="min-height:300px"]>.col-md-4:last-child ul {
    --tile-min-w: 100px;
    --tile-min-h: 84px;
    --tile-pad: 8px 6px;
    --tile-icon: 1.85rem;
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(var(--tile-min-w), var(--tile-min-w))) !important;
    justify-content: end !important;
    justify-items: stretch;
    width: 100%;
    margin-left: auto;
    gap: 6px;
  }

  div[style*="min-height:300px"] ul li:nth-child(n) a[href*="#/password"],
  div[style*="min-height:300px"] ul li:nth-child(n) a[href*="#/settings"] {
    min-height: var(--tile-min-h) !important;
    padding: var(--tile-pad) !important;
    font-size: 1.125rem !important;
    gap: 8px !important;
  }

  div[style*="min-height:300px"] ul li:nth-child(n) a[href*="#/password"]::before,
  div[style*="min-height:300px"] ul li:nth-child(n) a[href*="#/settings"]::before {
    width: var(--tile-icon) !important;
    height: var(--tile-icon) !important;
    font-size: var(--tile-icon) !important;
  }

  div[style*="min-height:300px"] ul li {
    scroll-snap-align: unset;
  }

  div[style*="min-height:300px"] ul li a,
  div[style*="min-height:300px"] ul li>span:not(.glyphicon):not(.ng-hide) {
    min-height: 148px;
    font-size: 1.125rem;
    gap: 14px;
    padding: 22px 12px;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    white-space: normal;
    word-break: normal;
    overflow-wrap: normal;
    hyphens: none;
  }

  div[style*="min-height:300px"] ul li a::before,
  div[style*="min-height:300px"] ul li>span:not(.glyphicon):not(.ng-hide)::before {
    width: 3.75rem;
    height: 3.75rem;
    font-size: 3.75rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  div[style*="min-height:300px"] ul li a {
    transition: none;
  }
}

/* ---------- Pagina Rientro in relazione (home.html) ----------
   Scope esclusivo: body#restore → non tocca index / utente / password.
   ---------------------------------------------------------- */

body#restore {
  min-height: 100vh;
  margin: 0;
  background: var(--pa-bg) !important;
  color: var(--pa-text) !important;
  font-family: var(--pa-font) !important;
  font-size: 16px !important;
  line-height: 1.55 !important;
}

body#restore::before {
  content: "";
  display: block;
  height: 4px;
  background: var(--pa-primary);
}

body#restore>div {
  box-sizing: border-box;
  width: 100%;
  max-width: 720px;
  margin: 0 auto;
  padding: var(--space-6) var(--space-5) var(--space-8);
}

/* Intro informativa */
body#restore>div>p:first-of-type {
  margin: 0 0 var(--space-6) !important;
  padding: var(--space-4) var(--space-5) !important;
  background: var(--pa-surface);
  border: 1px solid var(--pa-border);
  border-left: 4px solid var(--pa-primary);
  border-radius: var(--pa-radius);
  box-shadow: var(--pa-shadow);
  color: var(--pa-text) !important;
  font-size: 15px !important;
  line-height: 1.65 !important;
}

body#restore>div>p:first-of-type a {
  color: var(--pa-primary);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 2px;
}

body#restore>div>p:first-of-type a:hover,
body#restore>div>p:first-of-type a:focus {
  color: var(--pa-primary-dark);
}

body#restore>div>p:first-of-type a:focus-visible {
  outline: 3px solid var(--pa-focus);
  outline-offset: 2px;
}

/* Stato corrente */
body#restore h2 {
  margin: 0 0 var(--space-4) !important;
  padding: 0 0 var(--space-3) !important;
  border-bottom: 2px solid var(--pa-primary);
  color: var(--pa-text) !important;
  font-family: var(--pa-font) !important;
  font-size: clamp(1.35rem, 2.2vw, 1.75rem) !important;
  font-weight: 700 !important;
  line-height: 1.25 !important;
  letter-spacing: -0.01em;
}

/* Meta UID / matricole → card */
body#restore>div>p:nth-of-type(2),
body#restore>div>p:nth-of-type(3) {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-2) var(--space-3);
  margin: 0 0 var(--space-3) !important;
  padding: var(--space-3) var(--space-4) !important;
  background: var(--pa-surface);
  border: 1px solid var(--pa-border);
  border-radius: var(--pa-radius);
  color: var(--pa-text) !important;
  font-size: 15px !important;
  font-weight: 600;
  line-height: 1.4 !important;
}

body#restore h4 {
  margin: var(--space-5) 0 var(--space-3) !important;
  padding: var(--space-3) var(--space-4) !important;
  background: var(--pa-primary-bg);
  border: 1px solid #e8c5cb;
  border-left: 4px solid var(--pa-primary);
  border-radius: var(--pa-radius);
  color: var(--pa-primary) !important;
  font-family: var(--pa-font) !important;
  font-size: 1rem !important;
  font-weight: 700 !important;
  line-height: 1.4 !important;
}

/* Nota NB */
body#restore>div>p:last-of-type {
  margin: 0 0 var(--space-6) !important;
  padding: var(--space-3) var(--space-4) !important;
  background: #fff8eb;
  border: 1px solid #efd9a8;
  border-left: 4px solid var(--pa-warning);
  border-radius: var(--pa-radius);
  color: #6b4500 !important;
  font-size: 14px !important;
  line-height: 1.55 !important;
}

body#restore>div>p:last-of-type b {
  color: var(--pa-danger);
  font-weight: 700;
}

/* Logout CTA */
body#restore #logout {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--touch-min);
  min-width: 140px;
  padding: var(--space-3) var(--space-5) !important;
  background: var(--pa-primary) !important;
  border: 0 !important;
  border-radius: var(--pa-radius) !important;
  color: #fff !important;
  font-family: var(--pa-font) !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  letter-spacing: 0.01em;
  line-height: 1.2 !important;
  text-decoration: none !important;
  transition: background-color 0.15s ease, filter 0.15s ease;
}

body#restore #logout:hover,
body#restore #logout:focus {
  background: var(--pa-primary-dark) !important;
  color: #fff !important;
  text-decoration: none !important;
}

body#restore #logout:focus-visible {
  outline: 3px solid var(--pa-focus) !important;
  outline-offset: 3px;
}

body#restore #logout:active {
  filter: brightness(0.96);
}

@media (max-width: 767px) {
  body#restore>div {
    padding: var(--space-5) var(--space-4) var(--space-7);
  }

  body#restore>div>p:first-of-type {
    padding: var(--space-3) var(--space-4) !important;
    font-size: 14px !important;
  }

  body#restore #logout {
    width: 100%;
  }
}

@media (prefers-reduced-motion: reduce) {
  body#restore #logout {
    transition: none !important;
  }
}

/* Redazione: primo tile visivo + primo colore della scala */
div[style*="min-height:300px"] ul > li:has(a[id="serv_UNIROMA1_REDAZIONE"]) {
  order: -1;
}

div[style*="min-height:300px"] ul > li:has(a[id="serv_UNIROMA1_REDAZIONE"]) a {
  background: var(--tile-a) !important;
}

div[style*="min-height:300px"] ul > li:has(a[id="serv_UNIROMA1_REDAZIONE"]) a:hover {
  background: var(--tile-a-hover) !important;
}

/* Gli altri tile: colori B,C,D,E,A... contati SENZA la Redazione,
   così la scala visiva riparte progressiva subito dopo di essa. */
div[style*="min-height:300px"] ul > li:nth-child(5n + 1 of li:not(:has(a[id="serv_UNIROMA1_REDAZIONE"]))) a {
  background: var(--tile-b) !important;
}

div[style*="min-height:300px"] ul > li:nth-child(5n + 2 of li:not(:has(a[id="serv_UNIROMA1_REDAZIONE"]))) a {
  background: var(--tile-c) !important;
}

div[style*="min-height:300px"] ul > li:nth-child(5n + 3 of li:not(:has(a[id="serv_UNIROMA1_REDAZIONE"]))) a {
  background: var(--tile-d) !important;
}

div[style*="min-height:300px"] ul > li:nth-child(5n + 4 of li:not(:has(a[id="serv_UNIROMA1_REDAZIONE"]))) a {
  background: var(--tile-e) !important;
}

div[style*="min-height:300px"] ul > li:nth-child(5n + 5 of li:not(:has(a[id="serv_UNIROMA1_REDAZIONE"]))) a {
  background: var(--tile-a) !important;
}

/* Hover coerente con la scala ricalcolata */
div[style*="min-height:300px"] ul > li:nth-child(5n + 1 of li:not(:has(a[id="serv_UNIROMA1_REDAZIONE"]))) a:hover {
  background: var(--tile-b-hover) !important;
}

div[style*="min-height:300px"] ul > li:nth-child(5n + 2 of li:not(:has(a[id="serv_UNIROMA1_REDAZIONE"]))) a:hover {
  background: var(--tile-c-hover) !important;
}

div[style*="min-height:300px"] ul > li:nth-child(5n + 3 of li:not(:has(a[id="serv_UNIROMA1_REDAZIONE"]))) a:hover {
  background: var(--tile-d-hover) !important;
}

div[style*="min-height:300px"] ul > li:nth-child(5n + 4 of li:not(:has(a[id="serv_UNIROMA1_REDAZIONE"]))) a:hover {
  background: var(--tile-e-hover) !important;
}

div[style*="min-height:300px"] ul > li:nth-child(5n + 5 of li:not(:has(a[id="serv_UNIROMA1_REDAZIONE"]))) a:hover {
  background: var(--tile-a-hover) !important;
}
html body div[style*="min-height:300px"] ul > li:has(a[href*="#/password"]) a[href*="#/password"],
html body div[style*="min-height:300px"] ul > li:has(a[href*="#/settings"]) a[href*="#/settings"] {
  background: var(--tile-a) !important;
}


html body div[style*="min-height:300px"] ul > li:has(a[href*="#/password"]) a[href*="#/password"]:hover,
html body div[style*="min-height:300px"] ul > li:has(a[href*="#/settings"]) a[href*="#/settings"]:hover {
  background: var(--tile-a-hover) !important;
}