/* ==============================================
   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: #502b31;
  --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;
  flex: 1 1 auto;
  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;
  display: inline-flex !important;
  align-items: center;
  gap: var(--space-4);
  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 mobile */
.navbar-default .navbar-toggle {
  float: none !important;
  margin: 0 0 0 12px !important;
  padding: 10px 11px !important;
  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;
}

.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: var(--pa-primary) !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: 72px;
    padding: 8px 0;
  }

  .navbar-default .logo .logo-img {
    height: 52px !important;
    max-width: min(260px, 68vw) !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;
}

/* 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;
  column-gap: var(--space-4);
  row-gap: var(--space-2);
  box-sizing: border-box;
  width: 100%;
  margin: 0 !important;
  padding: var(--space-3) var(--space-4);
  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;
}

#main .nav.nav-pills.no-pointer > li {
  float: none !important;
  margin: 0 !important;
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-1);
  line-height: 1.4;
}

#main .nav.nav-pills.no-pointer > li.active > span,
#main .nav.nav-pills.no-pointer > li > span {
  color: var(--pa-text-muted);
  font-size: 13px;
  font-weight: 600;
}

#main .nav.nav-pills.no-pointer .badge {
  display: inline-block;
  margin-left: 0;
  padding: var(--space-1) var(--space-3) !important;
  background: var(--pa-primary) !important;
  border-radius: 999px !important;
  color: #fff !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  letter-spacing: 0.03em;
  line-height: 1.35;
  text-transform: uppercase;
}

/*
  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;
}

/*
  Unifica i titoli sezione: "…tuo utente" → "…tuo profilo" (solo CSS).
  Nasconde il testo originale (font-size:0) e lo riscrive via ::before.
*/
div[style*="min-height:300px"] label[data-translate="home.section.personalServices"] {
  font-size: 0 !important;
  letter-spacing: 0 !important;
}

div[style*="min-height:300px"] label[data-translate="home.section.personalServices"]::before {
  display: block !important;
  content: "Applicativi disponibili per il tuo profilo" !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;
  color: var(--pa-text) !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 */
}

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 */
}

/* ---------- Tasti in evidenza: Cambio password + Gestione dati personali ----------
   Prominenza senza bordo: scala maggiore, colore brand pieno, ombra tinta, hover lift
   (ui-design-brain: shadow OR border — qui solo elevazione)
*/
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"] {
  position: relative;
  z-index: 1;
  min-height: 196px !important;
  padding: 32px 24px !important;
  font-size: 1.5rem !important;
  letter-spacing: 0.02em !important;
  background: linear-gradient(165deg, var(--pa-primary-light) 0%, var(--pa-primary) 48%, var(--pa-primary-dark) 100%) !important;
  outline: none !important;
  border: 0 !important;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.18) inset,
    0 10px 28px rgba(82, 36, 51, 0.32) !important;
  filter: none;
  transform: translateY(0);
  transition:
    background-color 0.15s ease,
    box-shadow 0.2s ease,
    transform 0.2s 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: linear-gradient(165deg, #b34454 0%, var(--pa-primary) 45%, #4a1f1e 100%) !important;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.22) inset,
    0 14px 36px rgba(82, 36, 51, 0.4) !important;
  transform: translateY(-3px);
  text-decoration: none !important;
}

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: translateY(-1px);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.12) inset,
    0 6px 16px rgba(82, 36, 51, 0.28) !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(--pa-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: 5.75rem !important;
  height: 5.75rem !important;
  font-size: 5.75rem !important;
  margin-bottom: 4px;
}

/* Self-Service sticky (colonna intera, titolo + box) */
div[style*="min-height:300px"] > .col-md-4:last-child {
  position: sticky;
  top: var(--sticky-top);
  align-self: flex-start;
  z-index: 30;
  max-height: calc(100vh - var(--space-4));
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  background: var(--pa-bg);
}

div[style*="min-height:300px"] > .col-md-4:last-child label {
  position: sticky;
  top: 0;
  z-index: 1;
  background: var(--pa-bg);
}

/* ---------- 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: sticky;
    top: 0;
    z-index: 30;
    max-height: none;
    overflow: visible;
    background: var(--pa-bg);
  }

  /* 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 {
    padding: var(--space-3);
    column-gap: var(--space-3);
  }

  .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;
  }

  div[style*="min-height:300px"] label[data-translate="home.section.personalServices"] {
    font-size: 0 !important;
  }

  div[style*="min-height:300px"] label[data-translate="home.section.personalServices"]::before {
    font-size: 1.3rem !important;
  }

  /* Mobile: pulsanti in colonna, niente scroll orizzontale */
  div[style*="min-height:300px"] ul {
    display: grid;
    grid-template-columns: 1fr;
    grid-auto-flow: row;
    grid-auto-columns: unset;
    overflow-x: visible;
    overflow-y: visible;
    scroll-snap-type: none;
    padding-bottom: 0;
  }

  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;
  }
}