.header {
  padding:0;
  background-color:#fff;
  /* border-bottom: 1px solid #e6e6e6; */
  min-height:50px;
  /* margin: 10px; */
  border-radius: 3em !important;
  -webkit-box-shadow: 0px 0px 15px 5px rgba(0,0,0, .06);
  -moz-box-shadow: 0px 0px 15px 5px rgba(0,0,0, .06);
  box-shadow: 0px 0px 15px 5px rgba(0,0,0, .06);

}

.header_rounded {
  background: linear-gradient(to bottom, #f2f5f7 0%, #f2f5f7 50%, transparent 100%);
  /* background: #f2f5f7; */
}
.sticky {
  position: fixed;
  top: 0;
  width: 100%;
  z-index:1000;
}

.sticky ~ section{
  margin-top:60px !important
}


/* Vertical-only submenu cue; never show in horizontal header */
.header_nav_submenu_chevron {
  display: none !important;
}

.nav_header {
  color: #9dabb5 !important;
  border-radius: 30px;
  min-width: 34px;
  padding:8px 8px 8px 8px !important;
  cursor: pointer;
  background: transparent;
  position: relative;
  transition: .2s ease-in-out;
}

.nav_header:hover {
  color: #6793af !important;
  background-color: rgba(39, 78, 115,.025);
  border-radius: 30px;
  padding:8px 8px 8px 8px !important;
  transition: .2s ease-in-out;
}

.nav_header:before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  color: #9dabb5 !important;
  border-radius: 30px;
  padding:8px 8px 8px 8px !important;
  background: rgba(39, 78, 115,.025);
  z-index: -1;
  transform: scale(0);
  transition: .2s ease-in-out;
  opacity: 1;
}

.nav_header:hover:before {
  transform: scale(1);
  opacity: 1;
}

.nav_header_rounded {
  color: #9dabb5;
  text-align: center;
  background-color: rgba(39, 78, 115,.05);
  border-radius: 30px;
  padding:8px 12px 8px 12px !important;
  cursor:pointer;
  transition: background-color 0.2s ease-in-out;
}

.nav_header_rounded:hover {
  color: #6793af;
  background-color: rgba(39, 78, 115,.1);
  border-radius: 30px;
  transition: background-color 0.2s ease-in-out;
}

.nav_header_square {
  color: #9dabb5;
  text-align: center;
  background-color: rgba(39, 78, 115,.05);
  /* border-radius: 12px 2rem 2rem 12px; */
  border-radius: 8px;
  padding:8px 12px 8px 12px !important;
  cursor:pointer;
  transition: background-color 0.2s ease-in-out;
}

.nav_header_square:hover {
  color: #6793af;
  background-color: rgba(39, 78, 115,.1);
  border-radius: 8px;
  transition: background-color 0.2s ease-in-out;
}

.nav_header.nav-link {
  display: flex !important
}

/* Header orizzontale desktop: etichette moduli mai a capo (es. "Risorse umane").
   min-width:0 sul collapse/menu così il flex può restringersi; #header_right resta a destra.
   Pre-JS: menu invisibile finché handleResponsiveNav non ha fatto il fit (niente FOUC).
   Dopo .header-horizontal-ready: visibile, overflow per i dropdown. */
@media (min-width: 992px) {
  body:not(.header-layout-vertical) #HeaderMenu {
    min-width: 0;
    flex: 1 1 auto;
  }
  body:not(.header-layout-vertical) #header_menu {
    flex: 1 1 auto;
    min-width: 0;
    flex-wrap: nowrap;
  }
  body:not(.header-layout-vertical):not(.header-horizontal-ready) #header_menu {
    visibility: hidden;
  }
  body:not(.header-layout-vertical) #header_menu > .nav-item {
    flex-shrink: 0;
  }
  body:not(.header-layout-vertical) #header_menu > .nav-item > .nav-link,
  body:not(.header-layout-vertical) #header_menu .nav_header_label {
    white-space: nowrap;
  }
  body:not(.header-layout-vertical) #header_right {
    flex-shrink: 0;
    position: relative;
    z-index: 3;
  }
}

.nav_header_active {
  color: #2265a3 !important;
  border-radius: 30px;
  background-color: #dbf3ff;
  padding:8px 8px 8px 8px !important;
  transition: 0.2s ease-in-out;
}

.top_bar {
  width:100%;
  min-height:60px;
  height:100%;
  margin:-15px 0 15px 0;
  /* background: #e9eef2; */
  padding:.75rem 1rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}

.top_bar > h4,
.top_bar > .top_bar_title {
  flex: 1 1 auto;
  min-width: 0;
  margin-bottom: 0;
}

.navbar-brand {
  margin-left:1rem;
}

.navbar-brand img{
  height:26px;
}

/* Logo org header: stessa misura orizzontale/verticale (come w30/h30 di prima), tondo */
.navbar-brand .header_brand_logo {
  width: 30px !important;
  height: 30px !important;
  min-width: 30px !important;
  object-fit: contain;
  border-radius: 50%;
}
/* Favicon Mokapen: shape irregolare — mai mask tonda */
.navbar-brand .header_brand_logo_app {
  border-radius: 0 !important;
}

.nav-link {
  font-weight: bold;
  transition: color 0.2s ease-in-out;
}

.nav-header {
  font-weight: bold;
  transition: background-color 0.2s ease-in-out;
}

.nav-header:hover {
  background: rgb(65, 130, 117,.2);
  border-radius: 6px;
  transition: background-color 0.2s ease-in-out;
}

.nav-header-active {
  background: rgb(65, 130, 117,.5);
  border-radius: 6px;
}

.navbar-light .navbar-toggler {
  border-color:transparent;
  padding:1.6rem 1rem
}

.dropdown-menu {
  -webkit-box-shadow: 0px 0px 10px 5px rgba(0,0,0, .04);
  -moz-box-shadow: 0px 0px 10px 5px rgba(0,0,0, .04);
  box-shadow: 0px 0px 10px 5px rgba(0,0,0, .04);
  -moz-transition: opacity .2s ease-in-out;
  -o-transition: opacity .2s ease-in-out;
  transition: opacity .2s ease-in-out;
}

.min-width-auto {
  min-width: max-content;
}


.dropdown-post{
  min-width:60px !important;
}

.dropdown-header {
  font-weight: bold;
  padding:10px 20px 10px 20px;
}

.cart_icon {
  position: absolute;
  width: 24px;
  height: 24px;
  border-radius:50px;
  background-color: #cc3366;
  text-align: center;
  padding-top:2px;
  right: -12px;
  top:10px;
  color: #fff;
  font-weight: bold;
}

.user_profile_icon {
  width:30px;
  height:30px;
  object-fit: cover;
  font-weight: normal;
  text-align: center;
  padding-top: 0px;
  border-radius:20px;
  background-color:#93b4c9;
  transition: background-color 0.2s ease-in-out;
}

.user_profile_icon:hover {
  color:#fff !important;
  background-color:#7798ad;
  transition: background-color 0.2s ease-in-out;
}

.help_icon {
  width:30px;
  height:30px;
  color:#fff !important;
  font-size: 20px;
  font-weight: normal;
  text-align: center;
  padding-top: 0px;
  margin:8px 0 8px 0;
  border-radius:3px;
  background-color:#cecece;
  transition: background-color 0.2s ease-in-out;
}

.help_icon:hover {
  color:#fff !important;
  background-color:#e6e6e6;
  transition: background-color 0.2s ease-in-out;
}

.notification_alert {
  width: 12px;
  height: 12px;
  border:2px solid #fff;
  border-radius: 50%;
  background: #DF547A;
  position: absolute;
  top: 5px;
  right: 6px;
  cursor: pointer;
  box-shadow: 0 0 0 rgba(255,183,0, 0.4);
  animation: pulse 2s infinite;
}

.notification_alert:hover {
  animation: none;
}


@-webkit-keyframes pulse {
  0% {
    -webkit-box-shadow: 0 0 0 0 rgba(255,183,0, 0.4);
  }
  70% {
    -webkit-box-shadow: 0 0 0 10px rgba(255,183,0, 0);
  }
  100% {
    -webkit-box-shadow: 0 0 0 0 rgba(255,183,0, 0);
  }
}
@keyframes pulse {
  0% {
    -moz-box-shadow: 0 0 0 0 rgba(255,183,0, 0.4);
    box-shadow: 0 0 0 0 rgba(255,183,0, 0.4);
  }
  70% {
    -moz-box-shadow: 0 0 0 10px rgba(255,183,0, 0);
    box-shadow: 0 0 0 10px rgba(255,183,0, 0);
  }
  100% {
    -moz-box-shadow: 0 0 0 0 rgba(255,183,0, 0);
    box-shadow: 0 0 0 0 rgba(255,183,0, 0);
  }
}

@keyframes pulsing {
  from { transform: scale(1); }
  50% { transform: scale(0.85); }
  to { transform: scale(1); }
}

.pulsing {
  animation-name: pulse;
  animation-duration: 3s;
  animation-iteration-count: infinite;
}


/*-- MEGA MENU ---------------------------------------------------------------*/

.navbar .mega-dropdown {
  position: static !important;
}

.navbar .dropdown-menu.mega-menu {
  width: 100%;
  border: none;
  border-radius: 0;
}
.navbar .dropdown-menu.mega-menu a {
  padding: 0 0 0 0;
}
.navbar .dropdown-menu.mega-menu a.news-title {
  font-weight: 500;
  font-size: 1.1rem;
  line-height: 1.5;
  -webkit-transition: .2s;
  transition: .2s;
  color: #4f4f4f !important;
}
.navbar .dropdown-menu.mega-menu a.news-title:hover {
  color: #2196f3 !important;
}
.navbar .dropdown-menu.mega-menu a.news-title.smaller {
  font-weight: 400;
  font-size: 1rem;
  line-height: 1.4;
}
.navbar .dropdown-menu.mega-menu .sub-menu a.menu-item {
  color: #4f4f4f !important;
}
.navbar .dropdown-menu.mega-menu .sub-menu a.menu-item:hover {
  color: #4f4f4f !important;
}
.navbar .dropdown-menu.mega-menu .news-single {
  margin-bottom: 1.2rem;
  border-bottom: 1px solid #e0e0e0;
}
.navbar .dropdown-menu.mega-menu .sub-title {
  padding-bottom: 0.5rem;
  margin-bottom: 1rem;
  border-bottom: 1px solid #e0e0e0;
}
.navbar .dropdown-menu.mega-menu .p-sm {
  padding-bottom: 17px;
}
.navbar .dropdown-menu.mega-menu .m-sm {
  margin-bottom: -5px;
  font-size: 0.85rem;
  color: #2196f3 !important;
}
.navbar .dropdown-menu.mega-menu .m-sm:hover {
  color: #2196f3 !important;
}
.navbar .dropdown-menu.mega-menu .mt-sm {
  margin-top: -3px;
}
.navbar .dropdown-menu.mega-menu .font-small {
  font-size: 0.85rem;
}

/*--/ MEGA MENU --------------------------------------------------------------*/


/*-- TOGGLE MENU -------------------------------------------------------------*/
.navbar_expand, .navbar_scroll {
  background-color: #fff;
  transition: 0.2s ease-in-out;
}

.navbar_expand .navbar-nav .nav-item .nav-link, .navbar_scroll .navbar-nav .nav-item .nav-link {
  color:#61707d;
  transition: 0.2s ease-in-out;
}

.navbar-nav {
  display: flex;
  flex-direction: column;
  padding-left: 0;
  margin-bottom: 0;
  list-style: none
}

.navbar-nav .nav-link {
  padding-right: 0;
  padding-left: 0
}

.navbar-nav .nav-item .nav-link {
  padding-right: 0;
  padding-left: 0;
  color:#fff;
}

.navbar-nav .dropdown-menu {
  position: static;
  float: none
}

.navbar-text {
  display: inline-block;
  padding-top: .5rem;
  padding-bottom: .5rem
}

.navbar-collapse {
  flex-basis: 100%;
  flex-grow: 1;
  align-items: center
}

.navbar-toggler {
  padding: .25rem .75rem;
  font-size: 1.25rem;
  line-height: 1;
  background-color: transparent;
  border: 1px solid transparent;
  border-radius: .25rem
}

.navbar-toggler:focus,
.navbar-toggler:hover {
  text-decoration: none
}

.navbar-toggler:not(:disabled):not(.disabled) {
  cursor: pointer
}

.navbar-toggler-icon {
  display: inline-block;
  width: 1.5em;
  height: 1.5em;
  vertical-align: middle;
  content: "";
  background: no-repeat 50%;
  background-size: 100% 100%
}

.navbar-light .navbar-toggler-icon {
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(0, 0, 0, 0.5) ' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E")
}

.navbar-dark .navbar-toggler-icon {
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 30 30' xmlns='http: //www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(255, 255, 255, 0.5) ' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E")
}

.navbar .navbar-toggler .navbar-toggler-icon {
  position: relative;
  width: 22px;
  height: 2px;
  vertical-align: middle;
  outline: 0;
  display: block;
  border-radius: 1px;
  background-color:#fff;
}

.navbar .navbar-toggler .navbar-toggler-icon+.navbar-toggler-icon {
  margin-top: 4px
}

.navbar.navbar-transparent .navbar-toggler .navbar-toggler-icon {
  background-color: #fff
}

.view_mobile {
  display: none
}

.view_screen {
  display: inline-flex;
}

/* Wrapper icona azioni pinnate header (campanella/conversazioni/news): a differenza di
   .view_mobile resta SEMPRE visibile (icona-only in orizzontale/mobile); serve anche da
   contesto di posizionamento per il badge, cosi' non "scappa" dalla riga in sidebar verticale. */
.nav_action_icon {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  overflow: visible;
}

/* Badge header: ancorati col LEFT vicino al bordo destro icona → crescono a DESTRA
   (con right: i numeri lunghi crescono a sinistra e coprono l'icona). */
.nav_action_icon > .notifications_badge,
.nav_action_icon > .conv_email_badge,
.nav_action_icon > .sys_news_badge {
  position: absolute !important;
  top: -6px !important;
  left: calc(100% - 8px) !important;
  right: auto !important;
  z-index: 5;
  pointer-events: none;
  transform: none !important;
  white-space: nowrap;
}

/* Verticale: box 32px con icona centrata — parte dal bordo destro icona, cresce a destra */
body.header-layout-vertical .nav_action_icon > .notifications_badge,
body.header-layout-vertical .nav_action_icon > .conv_email_badge,
body.header-layout-vertical .nav_action_icon > .sys_news_badge {
  top: -2px !important;
  left: calc(100% - 14px) !important;
  right: auto !important;
}

/* Bordino bianco anche su conversations (notifications/news già in custom.css) */
.conv_email_badge.badge {
  box-shadow: 0 0 0 2px #fff;
}

/* Mobile #header_right: badge diretto sul nav-link (senza .nav_action_icon) */
#header_right .nav_header > .notifications_badge,
#header_right .nav_header > .conv_email_badge,
#header_right .nav_header > .sys_news_badge {
  position: absolute !important;
  top: -4px !important;
  left: calc(100% - 8px) !important;
  right: auto !important;
  z-index: 5;
  pointer-events: none;
  white-space: nowrap;
}

/* Default (orizzontale/mobile): queste azioni restano solo icona, senza etichetta testuale.
   In sidebar verticale espansa/hover l'etichetta viene riabilitata (vedi header.css vertical). */
#hr_action_notifications .nav_header_label,
#hr_action_conversations .nav_header_label,
#hr_action_news .nav_header_label {
  display: none;
}

/* Dropdown submenu styling */
.header .dropdown-submenu {
  position: relative;
}
.header .dropdown-submenu .dropdown-menu {
  top: 0;
  left: 100%;
  margin-top: -1px;
  width: auto; /* beat vendors.css width:100% — long labels must not clip */
  min-width: max-content;
  max-width: min(360px, calc(100vw - 16px));
}
.header .dropdown-submenu:hover > .dropdown-menu {
  display: block;
}

/* Horizontal header: Support / help + other #header_right menus */
#header_right .dropdown-menu {
  min-width: max-content;
  max-width: min(360px, calc(100vw - 16px));
}
#header_right .dropdown-menu .dropdown-item {
  white-space: nowrap;
}

/*--/ TOGGLE MENU ------------------------------------------------------------*/


/* -- MEDIA QUERIES ----------------------------------------------------------*/


/* Medium devices (tablets, less than 992px) */
@media (max-width: 991.98px) {

  body.no_scroll {
    overflow: hidden;
  }

  .navbar-collapse {
    overflow: auto;
    max-height: calc(100vh - 70px);
    align-items: flex-start;
  }

  /* Navbar Toggler */
  @keyframes g {
    0% {
      top: 0;
      transform: rotate(0deg)
    }
    45% {
      top: 6px;
      transform: rotate(145deg)
    }
    75% {
      transform: rotate(130deg)
    }
    to {
      transform: rotate(135deg)
    }
  }
  @keyframes h {
    0% {
      top: 6px;
      transform: rotate(135deg)
    }
    45% {
      transform: rotate(-10deg)
    }
    75% {
      transform: rotate(5deg)
    }
    to {
      top: 0;
      transform: rotate(0)
    }
  }
  @keyframes i {
    0% {
      bottom: 0;
      transform: rotate(0deg)
    }
    45% {
      bottom: 6px;
      transform: rotate(-145deg)
    }
    75% {
      transform: rotate(-130deg)
    }
    to {
      transform: rotate(-135deg)
    }
  }
  @keyframes j {
    0% {
      bottom: 6px;
      transform: rotate(-135deg)
    }
    45% {
      transform: rotate(10deg)
    }
    75% {
      transform: rotate(-5deg)
    }
    to {
      bottom: 0;
      transform: rotate(0)
    }
  }
  .navbar .navbar-toggler .navbar-toggler-icon:nth-child(2) {
    top: 0;
    animation: h .5s 0s;
    animation-fill-mode: forwards
  }
  .navbar .navbar-toggler .navbar-toggler-icon:nth-child(3) {
    opacity: 1
  }
  .navbar .navbar-toggler .navbar-toggler-icon:nth-child(4) {
    bottom: 0;
    animation: j .5s 0s;
    animation-fill-mode: forwards
  }
  .navbar .navbar-toggler.toggled .navbar-toggler-icon:nth-child(2) {
    top: 6px;
    animation: g .5s 0s;
    animation-fill-mode: forwards
  }
  .navbar .navbar-toggler.toggled .navbar-toggler-icon:nth-child(3) {
    opacity: 0
  }
  .navbar .navbar-toggler.toggled .navbar-toggler-icon:nth-child(4) {
    bottom: 6px;
    animation: i .5s 0s;
    animation-fill-mode: forwards
  }
  /* Navbar Toggler */

  .navbar.navbar-transparent .navbar-toggler .navbar-toggler-icon {
    background-color: #fff !important
  }

  .navbar .navbar-toggler .navbar-toggler-icon {
    background-color: #555 !important
  }

  .navbar {
    max-height: 100vh;
  }

  /*
   * Menu mobile: #header_menu + #header_right devono stare in colonna.
   * height:100vh su tutte le ul + ml-auto su #header_right le affiancava/sovrapponeva.
   */
  .navbar-collapse {
    flex-direction: column !important;
    align-items: stretch !important;
  }
  .navbar-collapse #header_menu,
  .navbar-collapse #header_right {
    height: auto !important;
    width: 100%;
    max-width: 100%;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  .navbar_expand .navbar-nav .nav-item {
    margin:10px 20px 10px 20px !important;
  }

  .view_mobile {
    display: block !important;
  }

  .view_screen {
    display: none !important;
  }

  /* Vertical submenu chevrons: desktop sidebar only (never in mobile nav) */
  .header_nav_submenu_chevron,
  body.header-layout-vertical #header_menu .header_nav_submenu_chevron {
    display: none !important;
  }

  /*
   * Top bar liste/kanban/calendar — puro CSS:
   * Override obbligatorio di Bootstrap .row (display:flex + flex-wrap), altrimenti i
   * pulsanti vanno a capo su più righe. Modello: titolo block a riga 1, azioni
   * inline su una sola riga nowrap con scroll orizzontale.
   * Solo .top_bar con <h4> diretto (esclude page_*).
   */
  .top_bar.row:has(> h4),
  .top_bar:has(> h4),
  .top_bar:has(> .top_bar_title) {
    display: block !important;
    flex-wrap: nowrap;
    height: auto;
    min-height: 0;
    margin-left: 0;
    margin-right: 0;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    -ms-overflow-style: none;
    white-space: nowrap;
    /* fade dinamico (classi .can_scroll_left / .can_scroll_right da JS) */
    -webkit-mask-image: none;
    mask-image: none;
  }

  .top_bar:has(> h4).can_scroll_right {
    -webkit-mask-image: linear-gradient(to right, #000 0%, #000 calc(100% - 28px), transparent 100%);
    mask-image: linear-gradient(to right, #000 0%, #000 calc(100% - 28px), transparent 100%);
  }

  .top_bar:has(> h4).can_scroll_left {
    -webkit-mask-image: linear-gradient(to left, #000 0%, #000 calc(100% - 28px), transparent 100%);
    mask-image: linear-gradient(to left, #000 0%, #000 calc(100% - 28px), transparent 100%);
  }

  .top_bar:has(> h4).can_scroll_left.can_scroll_right {
    -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 28px, #000 calc(100% - 28px), transparent 100%);
    mask-image: linear-gradient(to right, transparent 0%, #000 28px, #000 calc(100% - 28px), transparent 100%);
  }

  .top_bar:has(> h4)::-webkit-scrollbar,
  .top_bar:has(> .top_bar_title)::-webkit-scrollbar {
    display: none;
  }

  .top_bar:has(> h4) > h4,
  .top_bar:has(> .top_bar_title) > .top_bar_title,
  .top_bar:has(> .top_bar_title) > h4 {
    display: block;
    width: 100%;
    max-width: 100%;
    margin-right: 0 !important;
    margin-bottom: 0.5rem;
    white-space: normal;
    position: sticky;
    left: 0;
    z-index: 2;
    background: #f2f5f7;
    box-sizing: border-box;
  }

  /* Azioni: una sola riga inline (non flex-wrap). Non forzare .view_screen (resta display:none).
     Escludere script/style: altrimenti display:inline-flex li rende testo visibile in pagina. */
  .top_bar:has(> h4) > *:not(h4):not(.view_screen):not(script):not(style),
  .top_bar:has(> .top_bar_title) > *:not(h4):not(.top_bar_title):not(.view_screen):not(script):not(style) {
    display: inline-flex;
    align-items: center;
    vertical-align: middle;
    white-space: normal;
    flex-shrink: 0;
  }

  /* I .btn non devono ereditare white-space:normal dal wrapper: altrimenti icona+label vanno a capo
     e con height:38px il testo esce sotto la pill (Modifica/Duplica/Elimina in show pages). */
  .top_bar:has(> h4) .btn,
  .top_bar:has(> .top_bar_title) .btn,
  .top_bar .page_menu .btn {
    white-space: nowrap;
  }

  /* Su mobile il primo pulsante non deve ereditare ml-3 (su desktop serve dopo il titolo in riga) */
  .top_bar:has(> h4) > h4 + *:not(.view_screen),
  .top_bar:has(> .top_bar_title) > h4 + *:not(.view_screen),
  .top_bar:has(> .top_bar_title) > .top_bar_title + *:not(.view_screen) {
    margin-left: 0 !important;
  }

  /* Evita che i toggle vista diventino width:100% (custom.css mobile) */
  .top_bar:has(> h4) .btn_toggle,
  .top_bar:has(> .top_bar_title) .btn_toggle,
  .top_bar:has(> h4) .btn-group .btn_toggle {
    width: auto !important;
  }

  /* Top bar scrollabile: mostra label dei toggle (su mobile view_screen è nascosto e restano pill vuote) */
  .top_bar .btn_toggle .view_screen {
    display: inline !important;
    margin-left: 0 !important;
  }

  .top_bar:has(> h4) .btn-group,
  .top_bar:has(> .top_bar_title) .btn-group {
    display: inline-flex;
    width: auto;
    vertical-align: middle;
    white-space: nowrap;
  }

  .search_mobile {
    width: 100%;
  }

  .language_dropdown, .help_dropdown {
    display: none
  }

  .nav-item:last-child .nav-link {
    margin: 0
  }

  .navbar-brand img {
    max-width:140px;
    height:auto
  }

}

/* -- HEADER LAYOUT VERTICAL (desktop only; mobile unchanged) ---------------*/
.header_theme_shortcuts {
  display: none;
}

.header_menu_sidebar_only {
  display: none !important;
}

/* Vertical collapsed rail: shown only when sidebar expanded / hover */
.header_menu_expand_only {
  /* no-op in horizontal; vertical rules below */
}

/* Horizontal: children flow in navbar; vertical: logo / actions / modules / footer */
.header_v_brand_pill {
  display: contents;
}

.header_v_actions_pill {
  display: contents;
}

.header_v_footer {
  display: contents;
}

/* Lucchetto + organization settings: solo footer verticale desktop */
#hr_action_sidebar_toggle,
#hr_action_org_settings {
  display: none !important;
}

/* Voci menu solo in header verticale (automations / integrations dopo report) */
.header_menu_vertical_only {
  display: none !important;
}

.header_sidebar_main {
  display: contents;
}

/* Mobile + header verticale: nascondi chrome solo-desktop (search pill / footer theme) */
@media (max-width: 991.98px) {
  body.header-layout-vertical #header_v_actions,
  body.header-layout-vertical .header_v_footer {
    display: none !important;
  }
}

@media (min-width: 992px) {
  /* Evita flash layout pre-JS (azioni ancora in #header_right, utils in menu) */
  body.header-layout-vertical:not(.header-vertical-ready) #app_header_shell {
    visibility: hidden;
  }

  body.header-layout-vertical {
    --app-sidebar-w: 240px;
    --app-sidebar-row-h: 36px;
    --app-brand-size: 40px; /* logo + rail collassata: stessa larghezza */
    --app-actions-pill-h: calc(var(--app-sidebar-row-h) * 4 + 0.6rem); /* search + + + notif + conv */
    --app-footer-collapsed-h: calc(var(--app-sidebar-row-h) * 2 + 0.8rem); /* news + org */
    --app-sidebar-pad-x: 0.35rem; /* solo inset della pill expanded (non allarga la rail) */
    --app-sidebar-pad-y: 0.2rem;
    /* Fascia sotto il top: pillola in alto a dx rimossa (tutto nella sidebar), basta un margine minimo */
    --app-content-top: 1rem;
    /* top_bar under pills for viewport-locked boards (kanban / calendar) */
    --app-board-chrome: 80px;
    --app-sidebar-pill-radius: 20px; /* fisso: stesso collapsed / expanded (no jump) */
    --app-sidebar-pill-shadow: 0 0 15px 5px rgba(0, 0, 0, 0.06);
  }

  body.header-layout-vertical.header-sidebar-collapsed {
    /* colonna = logo; niente pad extra sulla rail */
    --app-sidebar-w: calc(var(--app-brand-size) + 0.5rem);
    --app-sidebar-icon-hit: 30px;
  }

  /* Sidebar fissa a sinistra; content in flusso normale (niente flex/grid wrap → niente “arroccato in basso”) */
  body.header-layout-vertical #app {
    display: block;
    min-height: 100vh;
    width: 100%;
    padding-left: var(--app-sidebar-w);
    box-sizing: border-box;
  }

  body.header-layout-vertical .newsbar {
    /* height:100% + #app min-height:100vh → newsbar a tutta pagina; resta altezza contenuto */
    height: auto;
    width: calc(100% + var(--app-sidebar-w));
    margin-left: calc(var(--app-sidebar-w) * -1);
    box-sizing: border-box;
  }

  /* !important: .sticky-top + height:100vh in flusso = body sotto 1 viewport */
  body.header-layout-vertical #app_header_shell.header_rounded {
    position: fixed !important;
    left: 0;
    top: 0;
    display: flex;
    flex-direction: column;
    width: var(--app-sidebar-w);
    min-width: var(--app-sidebar-w);
    max-width: var(--app-sidebar-w);
    height: 100vh;
    max-height: 100vh;
    margin: 0;
    /* Match horizontal .header_rounded.sticky-top.p-2 */
    padding: 0.5rem 4px !important;
    z-index: 1055;
    overflow: visible;
    background: linear-gradient(to right, #f2f5f7 0%, #f2f5f7 70%, transparent 100%);
    transition: width .2s ease, max-width .2s ease;
    box-sizing: border-box;
  }

  /* Collassata: inset sinistro come expanded; destra 0 (rail cresce a destra in hover) */
  body.header-layout-vertical.header-sidebar-collapsed #app_header_shell.header_rounded {
    padding: 0.5rem 0 0.5rem 0.5rem !important;
  }

  /* Under modal backdrop: chrome below overlay.
     Use :has(.modal.show) too — Bootstrap drops modal-open when closing a stacked modal. */
  body.modal-open.header-layout-vertical #app_header_shell.header_rounded,
  body.modal-open.header-layout-vertical #app_header_shell .header_sidebar_main,
  body.header-layout-vertical:has(.modal.show) #app_header_shell.header_rounded,
  body.header-layout-vertical:has(.modal.show) #app_header_shell .header_sidebar_main {
    background-image: none !important;
    z-index: 1020 !important;
  }

  body.modal-open.header-layout-vertical #app_header_shell.header_rounded,
  body.header-layout-vertical:has(.modal.show) #app_header_shell.header_rounded {
    background: transparent !important;
  }

  body.modal-open.header-layout-vertical #header_right,
  body.header-layout-vertical:has(.modal.show) #header_right {
    z-index: 1020 !important;
  }

  /* Transparent shell: brand pill (logo+search) + menu pill */
  body.header-layout-vertical #app_header_shell .header {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    flex: 1 1 auto;
    width: 100%;
    height: 100%;
    min-height: 0;
    max-height: none;
    border-radius: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    overflow: visible;
    gap: 0.4rem;
  }

  /* Logo: solo tondo */
  body.header-layout-vertical .header_v_brand_pill {
    display: flex !important;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    flex: 0 0 auto;
    align-self: flex-start;
    width: var(--app-brand-size);
    min-width: var(--app-brand-size);
    max-width: var(--app-brand-size);
    height: auto;
    min-height: 0;
    max-height: none;
    margin: 0;
    padding: 0;
    background: transparent !important;
    border-radius: 0;
    box-shadow: none !important;
    overflow: visible;
    box-sizing: border-box;
    z-index: 2;
  }

  /* Pill azioni: search / + / notifiche / conversazioni — NON si espande a destra */
  body.header-layout-vertical .header_v_actions_pill {
    display: flex !important;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    flex: 0 0 auto;
    align-self: flex-start;
    width: var(--app-brand-size);
    min-width: var(--app-brand-size);
    max-width: var(--app-brand-size);
    margin: 0;
    padding: var(--app-sidebar-pad-y) 0;
    background: #fff !important;
    border-radius: var(--app-sidebar-pill-radius);
    box-shadow: var(--app-sidebar-pill-shadow);
    overflow: visible; /* badge escono dal pill */
    box-sizing: border-box;
    gap: 0;
    z-index: 2;
  }

  body.header-layout-vertical .header_v_actions_pill > .nav-item {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 var(--app-sidebar-row-h);
    width: var(--app-brand-size);
    height: var(--app-sidebar-row-h);
    min-height: var(--app-sidebar-row-h);
    max-height: var(--app-sidebar-row-h);
    margin: 0 !important;
    padding: 0;
    overflow: visible;
    position: relative;
  }

  body.header-layout-vertical .header_v_actions_pill .nav-link,
  body.header-layout-vertical .header_v_actions_pill .nav_header.nav-link {
    display: flex !important;
    align-items: center;
    justify-content: center;
    width: var(--app-brand-size) !important;
    height: var(--app-sidebar-row-h) !important;
    min-width: var(--app-brand-size) !important;
    max-width: var(--app-brand-size) !important;
    margin: 0 !important;
    padding: 0 !important;
    font-size: 0 !important;
    line-height: 0 !important;
    border-radius: 0 !important;
    overflow: visible !important;
  }

  body.header-layout-vertical .header_v_actions_pill .nav_header_label,
  body.header-layout-vertical .header_v_actions_pill .header_nav_submenu_chevron {
    display: none !important;
  }

  body.header-layout-vertical .header_v_actions_pill .nav-link .view_mobile,
  body.header-layout-vertical .header_v_actions_pill .nav-link .nav_action_icon {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    margin: 0 !important;
    font-size: inherit;
    line-height: 1 !important;
  }

  /* Selected/hover conversazioni: tondo sull'icona, non blocco 40×36.
     Esclude #hr_action_create (gradient +): altrimenti background:transparent lo fa sparire. */
  body.header-layout-vertical .header_v_actions_pill .nav-link.nav_header:not(.bg_brand_gradient2),
  body.header-layout-vertical .header_v_actions_pill .nav-link.nav_header_active:not(.bg_brand_gradient2) {
    background: transparent !important;
  }

  body.header-layout-vertical .header_v_actions_pill .nav-link.nav_header:before,
  body.header-layout-vertical .header_v_actions_pill .nav-link.nav_header:hover:before {
    display: none !important;
  }

  body.header-layout-vertical .header_v_actions_pill .nav-link .nav_action_icon {
    width: 32px;
    height: 32px;
    min-width: 32px;
    min-height: 32px;
    border-radius: 50%;
    box-sizing: border-box;
  }

  body.header-layout-vertical .header_v_actions_pill .nav-link:hover .nav_action_icon {
    background-color: rgba(39, 78, 115, 0.05);
  }

  body.header-layout-vertical .header_v_actions_pill .nav-link.nav_header_active .nav_action_icon {
    background-color: #dbf3ff !important;
    color: #2265a3;
  }

  /* Badge: il nav-link ha font-size:0 (nasconde label) — ripristina testo badge */
  body.header-layout-vertical .header_v_actions_pill .notifications_badge,
  body.header-layout-vertical .header_v_actions_pill .conv_email_badge,
  body.header-layout-vertical .header_v_actions_pill .sys_news_badge,
  body.header-layout-vertical #header_sidebar_pins .sys_news_badge,
  body.header-layout-vertical #header_sidebar_pins .notifications_badge,
  body.header-layout-vertical #header_sidebar_pins .conv_email_badge {
    font-size: 11px !important;
    line-height: 1.2 !important;
  }

  /* Come prima: search 20 / + 18 / bell+conversazioni 22 */
  body.header-layout-vertical .header_v_actions_pill .header_v_search .nav-link i {
    font-size: 20px !important;
    line-height: 1 !important;
  }

  body.header-layout-vertical .header_v_actions_pill #hr_action_create .nav-link i {
    font-size: 18px !important;
    line-height: 1 !important;
  }

  body.header-layout-vertical .header_v_actions_pill #hr_action_notifications .nav-link i,
  body.header-layout-vertical .header_v_actions_pill #hr_action_conversations .nav-link i {
    font-size: 20px !important;
    line-height: 1 !important;
  }

  body.header-layout-vertical .header_v_actions_pill #hr_action_create .nav-link {
    width: 32px !important;
    min-width: 32px !important;
    max-width: 32px !important;
    height: 32px !important;
    min-height: 32px !important;
    max-height: 32px !important;
    padding: .3em !important;
    border-radius: 30px !important;
    font-size: inherit !important;
  }


  body.header-layout-vertical .header_v_actions_pill .dropdown-menu {
    /* flyout a destra (JS fixed), non espandere la pill */
  }

  /* Footer: pins (utils/news + lucchetto/org/profilo) */
  body.header-layout-vertical .header_v_footer {
    display: flex;
    flex-direction: column;
    flex: 0 0 auto;
    align-self: flex-start;
    width: 100%;
    margin-top: auto;
    gap: 0.35rem;
    z-index: 2;
    transition: width .12s ease, min-width .12s ease, max-width .12s ease;
  }

  /* Tondino brand = stesso cerchio della search (40px) */
  body.header-layout-vertical #app_header_shell .navbar-brand {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 var(--app-brand-size);
    width: var(--app-brand-size) !important;
    height: var(--app-brand-size) !important;
    min-width: var(--app-brand-size) !important;
    max-width: var(--app-brand-size) !important;
    margin: 0 !important;
    padding: 0 !important;
    background: #fff !important;
    border-radius: 50% !important;
    box-shadow: var(--app-sidebar-pill-shadow);
    overflow: hidden !important;
    box-sizing: border-box;
  }

  body.header-layout-vertical #app_header_shell .navbar-brand .logo_light {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    overflow: hidden;
    border-radius: 50%;
    line-height: 0;
  }

  /*
   * Logo ORG verticale = stessa misura dell’orizzontale (30px) dentro il tondo 40px
   * → anello bianco = padding (come icona search nel suo cerchio).
   */
  body.header-layout-vertical #app_header_shell .navbar-brand .header_brand_logo:not(.header_brand_logo_app) {
    display: block !important;
    width: 30px !important;
    height: 30px !important;
    min-width: 30px !important;
    max-width: 30px !important;
    margin: 0 !important;
    padding: 0 !important;
    object-fit: contain !important;
    border-radius: 50% !important;
    flex: 0 0 30px;
  }

  /* Favicon Mokapen: intero nel tondo, inset come padding */
  body.header-layout-vertical #app_header_shell .navbar-brand .header_brand_logo_app {
    display: block !important;
    width: 30px !important;
    height: 30px !important;
    min-width: 30px !important;
    max-width: 30px !important;
    margin: 0 !important;
    padding: 0 !important;
    object-fit: contain !important;
    border-radius: 0 !important;
    flex: 0 0 30px;
  }

  body.header-layout-vertical #app_header_shell .ml-auto.mt-2.d-flex {
    display: none !important;
  }

  body.header-layout-vertical #app_header_shell .navbar-toggler {
    display: none !important;
  }

  body.header-layout-vertical #app_header_shell .navbar-collapse {
    display: flex !important;
    flex-direction: column;
    flex: 1 1 0;
    min-height: 0;
    width: 100%;
    align-items: stretch !important;
    overflow: visible;
    gap: 0.4rem;
  }

  /* Gruppo moduli: pill bianca, riempie lo spazio; scroll + fade sulle voci */
  body.header-layout-vertical .header_sidebar_main {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    align-self: flex-start;
    width: 100%;
    height: auto;
    min-height: 0;
    max-height: none; /* altezza = spazio flex tra actions e footer */
    padding: var(--app-sidebar-pad-y) 0;
    background: #fff;
    border-radius: var(--app-sidebar-pill-radius);
    box-shadow: var(--app-sidebar-pill-shadow);
    overflow: hidden;
    box-sizing: border-box;
    transition: width .12s ease, min-width .12s ease, max-width .12s ease, box-shadow .12s ease;
  }

  body.header-layout-vertical #header_menu.scroll_fade_y,
  body.header-layout-vertical #header_menu {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    height: auto !important;
    max-height: none !important;
    overscroll-behavior: contain; /* non scrolla la pagina sotto */
  }

  body.header-layout-vertical .header_sidebar_main {
    overscroll-behavior: contain;
  }

  body.header-layout-vertical #nav-more-dropdown {
    display: none !important;
  }

  /* Utils non restano nel menu moduli (vanno nel footer via JS) */
  body.header-layout-vertical #header_menu > .header_menu_sidebar_only {
    display: none !important;
  }

  /* News in footer: stessa logica badge di bell/conversations (box 32px + overflow visible) */
  body.header-layout-vertical #header_sidebar_pins #hr_action_news .nav-link {
    font-size: 0 !important;
    overflow: visible !important;
  }

  body.header-layout-vertical #header_sidebar_pins #hr_action_news .nav_action_icon {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    position: relative;
    width: 32px;
    height: 32px;
    min-width: 32px;
    min-height: 32px;
    margin: 0 !important;
    overflow: visible;
    box-sizing: border-box;
  }

  body.header-layout-vertical #header_sidebar_pins #hr_action_news .nav_action_icon > .sys_news_badge {
    top: -2px !important;
    left: calc(100% - 14px) !important;
    right: auto !important;
  }

  /* Footer pins: tutte le icone 20 (fiamma, utils, organization, lucchetto) */
  body.header-layout-vertical #header_sidebar_pins #hr_action_news .nav_action_icon i,
  body.header-layout-vertical #header_sidebar_pins .header_menu_sidebar_only .view_mobile i,
  body.header-layout-vertical #header_sidebar_pins .nav-link > i {
    font-size: 20px !important;
    line-height: 1 !important;
  }

  /* Footer pins: utils + news | lucchetto + org + profilo */
  body.header-layout-vertical #header_sidebar_pins {
    display: flex;
    flex-direction: column;
    flex: 0 0 auto;
    align-self: flex-start;
    width: var(--app-brand-size);
    min-width: var(--app-brand-size);
    max-width: var(--app-brand-size);
    margin: 0;
    padding: var(--app-sidebar-pad-y) 0;
    background: #fff;
    border-radius: var(--app-sidebar-pill-radius);
    box-shadow: var(--app-sidebar-pill-shadow);
    box-sizing: border-box;
  }

  body.header-layout-vertical #header_sidebar_pins:empty {
    display: none;
  }

  body.header-layout-vertical #header_sidebar_pins > .nav-item {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 var(--app-sidebar-row-h);
    width: 100%;
    height: var(--app-sidebar-row-h);
    min-height: var(--app-sidebar-row-h);
    max-height: var(--app-sidebar-row-h);
    margin: 0 !important;
    padding: 0;
    position: relative;
  }

  /* Collapsed: solo news + org */
  body.header-layout-vertical.header-sidebar-collapsed:not(.header-sidebar-hover) #header_sidebar_pins #hr_action_profile,
  body.header-layout-vertical.header-sidebar-collapsed:not(.header-sidebar-hover) #header_sidebar_pins #hr_action_org_settings,
  body.header-layout-vertical.header-sidebar-collapsed:not(.header-sidebar-hover) #header_sidebar_pins #hr_action_sidebar_toggle,
  body.header-layout-vertical.header-sidebar-collapsed:not(.header-sidebar-hover) #header_sidebar_pins .header_menu_sidebar_only,
  body.header-layout-vertical.header-sidebar-collapsed:not(.header-sidebar-hover) #header_sidebar_pins .header_pins_row_break {
    display: none !important;
  }

  /* Expanded / hover: griglia 4 colonne */
  body.header-layout-vertical:not(.header-sidebar-collapsed) #header_sidebar_pins,
  body.header-layout-vertical.header-sidebar-collapsed.header-sidebar-hover #header_sidebar_pins {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    justify-items: center;
    align-items: center;
    width: 100%;
    min-width: 0;
    max-width: 100%;
    padding-left: var(--app-sidebar-pad-x);
    padding-right: var(--app-sidebar-pad-x);
  }

  body.header-layout-vertical:not(.header-sidebar-collapsed) #header_sidebar_pins #hr_action_news,
  body.header-layout-vertical:not(.header-sidebar-collapsed) #header_sidebar_pins .header_menu_sidebar_only,
  body.header-layout-vertical:not(.header-sidebar-collapsed) #header_sidebar_pins #hr_action_org,
  body.header-layout-vertical:not(.header-sidebar-collapsed) #header_sidebar_pins #hr_action_profile,
  body.header-layout-vertical:not(.header-sidebar-collapsed) #header_sidebar_pins #hr_action_org_settings,
  body.header-layout-vertical:not(.header-sidebar-collapsed) #header_sidebar_pins #hr_action_sidebar_toggle,
  body.header-layout-vertical.header-sidebar-collapsed.header-sidebar-hover #header_sidebar_pins #hr_action_news,
  body.header-layout-vertical.header-sidebar-collapsed.header-sidebar-hover #header_sidebar_pins .header_menu_sidebar_only,
  body.header-layout-vertical.header-sidebar-collapsed.header-sidebar-hover #header_sidebar_pins #hr_action_org,
  body.header-layout-vertical.header-sidebar-collapsed.header-sidebar-hover #header_sidebar_pins #hr_action_profile,
  body.header-layout-vertical.header-sidebar-collapsed.header-sidebar-hover #header_sidebar_pins #hr_action_org_settings,
  body.header-layout-vertical.header-sidebar-collapsed.header-sidebar-hover #header_sidebar_pins #hr_action_sidebar_toggle {
    display: flex !important;
    flex: 0 0 auto;
    width: 100%;
    max-width: 100%;
    height: var(--app-sidebar-row-h);
    padding: 0;
    justify-content: center;
  }

  /* A capo tra riga1 (news/utils) e riga2 (org/profilo/organization/lucchetto) */
  body.header-layout-vertical #header_sidebar_pins .header_pins_row_break {
    grid-column: 1 / -1;
    width: 100%;
    height: 0 !important;
    min-height: 0 !important;
    max-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden;
    border: 0;
    list-style: none;
  }

  body.header-layout-vertical #header_menu > .header_menu_vertical_only {
    display: flex !important;
  }

  body.header-layout-vertical #header_sidebar_pins .nav-link,
  body.header-layout-vertical #header_sidebar_pins .nav_header_square {
    display: flex !important;
    align-items: center;
    justify-content: center;
    width: 32px !important;
    height: 32px !important;
    min-width: 32px !important;
    max-width: 32px !important;
    min-height: 32px !important;
    max-height: 32px !important;
    margin: 0 !important;
    padding: 0 !important;
    border-radius: 50%;
    overflow: hidden;
    transform: none !important;
  }

  body.header-layout-vertical #header_sidebar_pins .nav_header_label {
    display: none !important;
  }

  /* Utils in footer: icona dentro .view_mobile (15px come moduli) */
  body.header-layout-vertical #header_sidebar_pins .header_menu_sidebar_only .view_mobile {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    margin: 0 !important;
    font-size: inherit;
    line-height: 1 !important;
  }
  body.header-layout-vertical #header_sidebar_pins .nav-item:not(.header_menu_sidebar_only) .view_mobile {
    display: none !important;
  }

  body.header-layout-vertical #header_sidebar_pins .nav_header:before,
  body.header-layout-vertical #header_sidebar_pins .nav_header:hover:before {
    display: none !important;
  }

  /* Org/profilo: tondo 1:1 (batte min-width .avatar_sm / .avatar_square_sm che deformava) */
  body.header-layout-vertical #header_sidebar_pins #hr_action_org .nav-link > div,
  body.header-layout-vertical #header_sidebar_pins #hr_action_org .d-flex,
  body.header-layout-vertical #header_sidebar_pins #hr_action_profile .nav-link > div,
  body.header-layout-vertical #header_sidebar_pins #hr_action_profile .d-flex {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: auto !important;
    height: auto !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  body.header-layout-vertical #header_sidebar_pins .header_org_avatar,
  body.header-layout-vertical #header_sidebar_pins .avatar_square_sm,
  body.header-layout-vertical #header_sidebar_pins .avatar_sm,
  body.header-layout-vertical #header_sidebar_pins .avatar_bg {
    width: 28px !important;
    height: 28px !important;
    min-width: 28px !important;
    min-height: 28px !important;
    max-width: 28px !important;
    max-height: 28px !important;
    border-radius: 50% !important;
    object-fit: cover !important;
    flex: 0 0 28px !important;
    aspect-ratio: 1 / 1;
    line-height: 26px !important;
  }

  /* Lucchetto pin: stesso look degli altri nav-link del footer */
  body.header-layout-vertical #header_sidebar_pins .btn_header_sidebar_toggle {
    border: 0;
    background: transparent;
    color: inherit;
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
  }

  body.header-layout-vertical #header_menu {
    display: flex !important;
    flex-direction: column !important;
    flex: 0 0 auto; /* non espandere spazio vuoto sotto le voci */
    align-items: stretch !important;
    justify-content: flex-start !important;
    overflow-x: hidden;
    overflow-y: auto;
    width: 100%;
    min-height: 0;
    height: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
  }

  body.header-layout-vertical #header_menu::-webkit-scrollbar {
    width: 0;
    height: 0;
    display: none;
  }

  /* Fixed row height — same collapsed / expanded (kill .my-auto flex gaps) */
  body.header-layout-vertical #header_menu > .nav-item {
    flex: 0 0 var(--app-sidebar-row-h);
    width: 100%;
    height: var(--app-sidebar-row-h);
    min-height: var(--app-sidebar-row-h);
    max-height: var(--app-sidebar-row-h);
    margin: 0 !important;
    padding: 0;
    position: relative;
  }

  body.header-layout-vertical #header_menu .nav-link,
  body.header-layout-vertical #header_menu .nav_header.nav-link {
    display: flex !important;
    align-items: center;
    position: relative;
    box-sizing: border-box;
    width: 100%;
    height: var(--app-sidebar-row-h) !important;
    min-height: var(--app-sidebar-row-h) !important;
    max-height: var(--app-sidebar-row-h) !important;
    margin: 0 !important;
    padding: 0 0.5rem 0 0 !important;
    font-size: 14px;
    line-height: 1;
    white-space: nowrap;
    overflow: hidden;
    /* Do NOT transition font-size — collapsed uses font-size:0; animating to normal looks like text zoom */
    transition: color .15s ease !important; /* no background tween: active usa ::before */
    transform: none !important;
  }

  body.header-layout-vertical #header_menu .nav_header:before,
  body.header-layout-vertical #header_menu .nav_header:hover:before {
    display: none !important;
  }

  /* Tondino active collapsed */
  body.header-layout-vertical.header-sidebar-collapsed:not(.header-sidebar-hover) #header_menu .nav-link.nav_header_active::before {
    display: block !important;
  }

  body.header-layout-vertical #header_menu .nav-link.nav_header_active {
    transition: color .15s ease !important;
  }

  body.header-layout-vertical #header_menu .nav-link.nav_header_active::before {
    transition: none !important;
  }

  /* Expanded / hover: pill inset — snap istantaneo, NIENTE morph dal tondino */
  body.header-layout-vertical:not(.header-sidebar-collapsed) #header_menu .nav-link.nav_header_active,
  body.header-layout-vertical.header-sidebar-collapsed.header-sidebar-hover #header_menu .nav-link.nav_header_active {
    background-color: transparent !important;
    border-radius: 0 !important;
    color: #2265a3 !important;
    overflow: visible !important;
  }

  body.header-layout-vertical #header_menu .nav-link.nav_header_active::before {
    transition: none !important;
  }

  body.header-layout-vertical:not(.header-sidebar-collapsed) #header_menu .nav-link.nav_header_active::before,
  body.header-layout-vertical.header-sidebar-collapsed.header-sidebar-hover #header_menu .nav-link.nav_header_active::before {
    content: '';
    display: block !important;
    position: absolute;
    left: var(--app-sidebar-pad-x);
    right: var(--app-sidebar-pad-x);
    top: 0;
    bottom: 0;
    width: auto;
    height: auto;
    margin: 0;
    border-radius: 30px;
    background-color: #dbf3ff;
    transform: none !important;
    transition: none !important;
    z-index: 0;
    pointer-events: none;
  }

  body.header-layout-vertical:not(.header-sidebar-collapsed) #header_menu .nav-link > *,
  body.header-layout-vertical.header-sidebar-collapsed.header-sidebar-hover #header_menu .nav-link > * {
    position: relative;
    z-index: 1;
  }

  /* Colonna icone = larghezza logo (allineamento verticale sotto il brand).
     .nav_action_icon (campanella/conversazioni/news) segue la stessa colonna dei moduli. */
  /* Moduli: 15px (body), come in header orizzontale — senza override uniforme */
  body.header-layout-vertical #header_menu .nav-link .view_mobile,
  body.header-layout-vertical #header_menu .nav-link .nav_action_icon {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    flex: 0 0 var(--app-brand-size);
    width: var(--app-brand-size);
    min-width: var(--app-brand-size);
    margin-right: 0.35rem !important;
    font-size: inherit;
    line-height: 1 !important;
    transform: none !important;
    transition: none !important;
  }

  body.header-layout-vertical #header_menu .nav-link .view_mobile i,
  body.header-layout-vertical #header_menu .nav-link .nav_action_icon i {
    font-size: 15px !important;
    line-height: 1 !important;
    transform: none !important;
    transition: none !important;
  }

  body.header-layout-vertical #header_menu .nav_header_label {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  body.header-layout-vertical #header_menu .header_nav_submenu_chevron {
    display: inline-block !important;
    flex: 0 0 auto;
    margin-left: auto;
    font-size: 11px !important;
    line-height: 1 !important;
  }

  /* Submenus: flyout to the right (position fixed via JS; solid bg like .dropdown-submenu) */
  body.header-layout-vertical #header_menu .dropdown-menu,
  body.header-layout-vertical #header_menu .dropdown-submenu > .dropdown-menu,
  body.header-layout-vertical #header_sidebar_pins .dropdown-menu,
  body.header-layout-vertical #header_v_actions .dropdown-menu,
  body.header-layout-vertical .header_v_dropdown_fixed {
    min-width: max-content;
    max-width: min(360px, calc(100vw - 16px));
    width: max-content;
    overflow-x: visible;
    overflow-y: auto;
    z-index: 2000;
    background-color: #fff;
    border: none;
    box-shadow: 0 0 15px 5px rgba(0, 0, 0, 0.06);
    transform: none !important; /* avoid Popper translate fighting fixed left/top */
  }
  body.header-layout-vertical .header_v_dropdown_fixed.show {
    display: block !important;
  }
  body.header-layout-vertical #header_menu .dropdown-menu .dropdown-item,
  body.header-layout-vertical #header_sidebar_pins .dropdown-menu .dropdown-item,
  body.header-layout-vertical #header_v_actions .dropdown-menu .dropdown-item,
  body.header-layout-vertical .header_v_dropdown_fixed .dropdown-item {
    white-space: nowrap;
  }
  /* Side flyout: no Bootstrap top caret */
  body.header-layout-vertical #header_menu .dropdown-menu::before,
  body.header-layout-vertical #header_menu .dropdown-menu::after,
  body.header-layout-vertical #header_sidebar_pins .dropdown-menu::before,
  body.header-layout-vertical #header_sidebar_pins .dropdown-menu::after,
  body.header-layout-vertical #header_v_actions .dropdown-menu::before,
  body.header-layout-vertical #header_v_actions .dropdown-menu::after,
  body.header-layout-vertical .header_v_dropdown_fixed::before,
  body.header-layout-vertical .header_v_dropdown_fixed::after {
    display: none !important;
  }

  /* Menu moduli: il dropdown vive su body; dentro la riga resta nascosto */
  body.header-layout-vertical #header_menu > .nav-item.dropdown > .dropdown-menu {
    display: none !important;
  }

  /* Verticale: tutte le voci di #header_right vengono spostate via JS dentro
     #header_menu / #header_sidebar_pins (vedi applyVerticalActionSlots in header_menu.blade.php).
     Il contenitore resta solo come "casa" degli anchor per il ripristino su mobile/orizzontale. */
  body.header-layout-vertical #header_right {
    display: none !important;
  }

  /* Opzione 1: spazio sotto le pills globali — 1 regola, tutte le pagine via #ajax_reload */
  body.header-layout-vertical #ajax_reload.app_main_content {
    display: block;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
    margin-top: var(--app-content-top) !important; /* override anche .mt-3 del layout */
    padding-right: 0.5rem;
    transition: none;
  }

  /* .top_bar ha margin:-15px (era sotto header orizzontale): in verticale tirerebbe il titolo nella pill */
  body.header-layout-vertical #ajax_reload .top_bar {
    margin-top: 0;
  }

  /*
   * Viewport-locked boards (kanban / calendar): with horizontal header, height is
   * calc(100vh - N) so the page does not scroll. Vertical adds margin-top:content-top
   * for the top-right pills — subtract that too, or body grows past 100vh.
   * --app-board-chrome ≈ .top_bar (min-height + margin-bottom).
   */
  body.header-layout-vertical .kanban {
    height: calc(100vh - var(--app-content-top) - var(--app-board-chrome));
    max-height: calc(100vh - var(--app-content-top) - var(--app-board-chrome));
  }

  body.header-layout-vertical .k_bucket_col {
    max-height: calc(100vh - var(--app-content-top) - var(--app-board-chrome) - 10px);
  }

  body.header-layout-vertical .fc_height {
    position: relative;
    height: calc(100vh - var(--app-content-top) - var(--app-board-chrome));
    max-height: calc(100vh - var(--app-content-top) - var(--app-board-chrome));
    overflow: hidden;
  }

  body.header-layout-vertical .fc_height .fc,
  body.header-layout-vertical .fc_height #calendar {
    height: 100%;
    max-height: 100%;
  }

  /* Safety: no document scroll on these boards (columns/calendar scroll inside) */
  body.header-layout-vertical:has(.kanban),
  body.header-layout-vertical:has(.fc_height) {
    overflow-y: hidden;
  }
  body.header-layout-vertical:has(.kanban) #app,
  body.header-layout-vertical:has(.fc_height) #app {
    min-height: 0;
    height: 100vh;
    overflow: hidden;
  }

  /* Collapsed rail: menu grows right; brand pill stays put */
  body.header-layout-vertical.header-sidebar-collapsed #app_header_shell .header,
  body.header-layout-vertical.header-sidebar-collapsed #app_header_shell .navbar-collapse {
    overflow: visible;
  }

  body.header-layout-vertical.header-sidebar-collapsed #app_header_shell .navbar-collapse {
    align-items: flex-start !important; /* larghezza = logo; altezza resta flex */
  }

  body.header-layout-vertical.header-sidebar-collapsed .header_v_brand_pill {
    align-self: flex-start;
  }

  /* Rail icon-only: LARGHEZZA = logo; pill moduli riempie altezza e scrolla */
  body.header-layout-vertical.header-sidebar-collapsed:not(.header-sidebar-hover) .header_sidebar_main {
    align-self: flex-start;
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    width: var(--app-brand-size);
    min-width: var(--app-brand-size);
    max-width: var(--app-brand-size);
    height: auto;
    min-height: 0;
    max-height: none;
    padding: var(--app-sidebar-pad-y) 0;
    border-radius: var(--app-sidebar-pill-radius);
    box-sizing: border-box;
    position: relative;
    z-index: 1;
    transform-origin: left center;
    overflow: hidden;
  }

  body.header-layout-vertical.header-sidebar-collapsed:not(.header-sidebar-hover) .header_v_footer {
    width: var(--app-brand-size);
    min-width: var(--app-brand-size);
    max-width: var(--app-brand-size);
  }

  body.header-layout-vertical.header-sidebar-collapsed:not(.header-sidebar-hover) #header_menu {
    flex: 1 1 auto;
    min-height: 0;
  }

  /* Expanded / hover: pill moduli full width, scroll fade */
  body.header-layout-vertical:not(.header-sidebar-collapsed) .header_sidebar_main,
  body.header-layout-vertical.header-sidebar-collapsed.header-sidebar-hover .header_sidebar_main {
    flex: 1 1 auto;
    align-self: stretch;
    min-height: 0;
    max-height: none;
    overflow: hidden;
  }

  body.header-layout-vertical:not(.header-sidebar-collapsed) .header_sidebar_main {
    width: 100%;
    min-width: 0;
    max-width: 100%;
  }

  /* Icon-only: riga identica all’expanded; active = tondo ::before (link non cambia size → icona ferma) */
  body.header-layout-vertical.header-sidebar-collapsed:not(.header-sidebar-hover) #header_menu > .nav-item {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 var(--app-sidebar-row-h);
    width: var(--app-brand-size);
    height: var(--app-sidebar-row-h);
    min-height: var(--app-sidebar-row-h);
    max-height: var(--app-sidebar-row-h);
  }

  body.header-layout-vertical.header-sidebar-collapsed:not(.header-sidebar-hover) #header_menu .nav-link,
  body.header-layout-vertical.header-sidebar-collapsed:not(.header-sidebar-hover) #header_menu .nav-link.nav_header_active {
    position: relative;
    justify-content: center;
    align-items: center;
    width: var(--app-brand-size) !important;
    height: var(--app-sidebar-row-h) !important;
    min-width: var(--app-brand-size) !important;
    max-width: var(--app-brand-size) !important;
    min-height: var(--app-sidebar-row-h) !important;
    max-height: var(--app-sidebar-row-h) !important;
    margin: 0 !important;
    padding: 0 !important;
    font-size: 0 !important;
    line-height: 0 !important;
    border-radius: 0 !important;
    background-color: transparent !important;
    overflow: visible !important;
    transform: none !important;
  }

  body.header-layout-vertical.header-sidebar-collapsed:not(.header-sidebar-hover) #header_menu .nav-link.nav_header_active {
    color: #2265a3 !important;
  }

  body.header-layout-vertical.header-sidebar-collapsed:not(.header-sidebar-hover) #header_menu .nav-link.nav_header_active::before {
    content: '';
    display: block !important;
    position: absolute;
    left: 50%;
    top: 50%;
    width: var(--app-sidebar-icon-hit);
    height: var(--app-sidebar-icon-hit);
    margin: 0;
    border-radius: 50%;
    background-color: #dbf3ff;
    transform: translate(-50%, -50%) !important;
    transition: none !important;
    z-index: 0;
    pointer-events: none;
  }

  body.header-layout-vertical.header-sidebar-collapsed:not(.header-sidebar-hover) #header_menu .nav_header_label,
  body.header-layout-vertical.header-sidebar-collapsed:not(.header-sidebar-hover) #header_menu .header_nav_submenu_chevron,
  body.header-layout-vertical.header-sidebar-collapsed:not(.header-sidebar-hover) #header_menu .nav-link .text_orange,
  body.header-layout-vertical.header-sidebar-collapsed:not(.header-sidebar-hover) #header_menu .nav-link .fa-medal {
    display: none !important;
  }

  body.header-layout-vertical.header-sidebar-collapsed:not(.header-sidebar-hover) #header_menu .nav-link .view_mobile,
  body.header-layout-vertical.header-sidebar-collapsed:not(.header-sidebar-hover) #header_menu .nav-link .nav_action_icon {
    position: relative;
    z-index: 1;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    margin-right: 0 !important;
    flex: 0 0 var(--app-brand-size);
    width: var(--app-brand-size);
    min-width: var(--app-brand-size);
  }

  body.header-layout-vertical.header-sidebar-collapsed:not(.header-sidebar-hover) #header_menu .dropdown-menu {
    display: none !important;
  }

  /* Hover expand: moduli + footer crescono a destra; actions pill resta stretta */
  body.header-layout-vertical.header-sidebar-collapsed.header-sidebar-hover .header_sidebar_main {
    align-self: flex-start;
    flex: 1 1 auto;
    width: 232px;
    min-width: 232px;
    max-width: 232px;
    height: auto;
    min-height: 0;
    max-height: none;
    padding: var(--app-sidebar-pad-y) 0;
    border-radius: var(--app-sidebar-pill-radius);
    z-index: 1056;
    box-shadow: 0 0 18px 6px rgba(0, 0, 0, 0.08);
    overflow: hidden;
  }

  body.header-layout-vertical.header-sidebar-collapsed.header-sidebar-hover .header_v_footer {
    width: 232px;
    min-width: 232px;
    max-width: 232px;
    z-index: 1056;
  }

  body.header-layout-vertical.header-sidebar-collapsed.header-sidebar-hover .header_v_actions_pill {
    width: var(--app-brand-size) !important;
    min-width: var(--app-brand-size) !important;
    max-width: var(--app-brand-size) !important;
  }

  body.header-layout-vertical.header-sidebar-collapsed.header-sidebar-hover #header_menu > .nav-item {
    flex: 0 0 var(--app-sidebar-row-h);
    width: 100%;
    height: var(--app-sidebar-row-h);
    min-height: var(--app-sidebar-row-h);
    max-height: var(--app-sidebar-row-h);
  }

  body.header-layout-vertical.header-sidebar-collapsed.header-sidebar-hover #header_menu .nav-link,
  body.header-layout-vertical.header-sidebar-collapsed.header-sidebar-hover #header_menu .nav-link.nav_header_active {
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    height: var(--app-sidebar-row-h) !important;
    min-height: var(--app-sidebar-row-h) !important;
    max-height: var(--app-sidebar-row-h) !important;
    padding: 0 0.5rem 0 0 !important;
    border-radius: 0 !important;
    font-size: 14px !important;
    line-height: 1 !important;
    justify-content: flex-start;
    transition: color .15s ease !important;
  }

  body.header-layout-vertical.header-sidebar-collapsed.header-sidebar-hover #header_menu .nav-link .view_mobile,
  body.header-layout-vertical.header-sidebar-collapsed.header-sidebar-hover #header_menu .nav-link .nav_action_icon {
    flex: 0 0 var(--app-brand-size);
    width: var(--app-brand-size);
    min-width: var(--app-brand-size);
    margin-right: 0.35rem !important;
  }
}

/* --/ MEDIA QUERIES ---------------------------------------------------------*/

/*
 * Scroll orizzontale con sfumatura bordi (stessa tech di .top_bar mobile).
 * Usato da: preview editor tab, entity_nav modal (non page), top_menu tab bar.
 * Classi .can_scroll_left / .can_scroll_right aggiornate da common/top_bar_js.
 */
.scroll_fade_x {
  display: flex !important;
  flex-wrap: nowrap !important;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  -ms-overflow-style: none;
  min-width: 0;
  -webkit-mask-image: none;
  mask-image: none;
}
.scroll_fade_x::-webkit-scrollbar {
  display: none;
}
.scroll_fade_x > * {
  flex-shrink: 0;
}
.scroll_fade_x.can_scroll_right {
  -webkit-mask-image: linear-gradient(to right, #000 0%, #000 calc(100% - 28px), transparent 100%);
  mask-image: linear-gradient(to right, #000 0%, #000 calc(100% - 28px), transparent 100%);
}
.scroll_fade_x.can_scroll_left {
  -webkit-mask-image: linear-gradient(to left, #000 0%, #000 calc(100% - 28px), transparent 100%);
  mask-image: linear-gradient(to left, #000 0%, #000 calc(100% - 28px), transparent 100%);
}
.scroll_fade_x.can_scroll_left.can_scroll_right {
  -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 28px, #000 calc(100% - 28px), transparent 100%);
  mask-image: linear-gradient(to right, transparent 0%, #000 28px, #000 calc(100% - 28px), transparent 100%);
}
.top_menu > .scroll_fade_x {
  flex: 1 1 auto;
  min-width: 0;
}

/*
 * Scroll verticale con sfumatura alto/basso (simmetrico a .scroll_fade_x).
 * Classi .can_scroll_up / .can_scroll_down da common/top_bar_js (init_scroll_fade_y).
 */
.scroll_fade_y {
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  -ms-overflow-style: none;
  min-height: 0;
  -webkit-mask-image: none;
  mask-image: none;
}
.scroll_fade_y::-webkit-scrollbar {
  display: none;
  width: 0;
  height: 0;
}
.scroll_fade_y.can_scroll_down {
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 calc(100% - 28px), transparent 100%);
  mask-image: linear-gradient(to bottom, #000 0%, #000 calc(100% - 28px), transparent 100%);
}
.scroll_fade_y.can_scroll_up {
  -webkit-mask-image: linear-gradient(to top, #000 0%, #000 calc(100% - 28px), transparent 100%);
  mask-image: linear-gradient(to top, #000 0%, #000 calc(100% - 28px), transparent 100%);
}
.scroll_fade_y.can_scroll_up.can_scroll_down {
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 28px, #000 calc(100% - 28px), transparent 100%);
  mask-image: linear-gradient(to bottom, transparent 0%, #000 28px, #000 calc(100% - 28px), transparent 100%);
}

/*
 * Entity tabs: overflow nel caret (come header). Niente overflow:hidden sul nav
 * (taglierebbe il dropdown). Scroll+fade solo nel preview editor.
 * page_*: col-md-6 (allineata alla card sotto). modal: max 80% per Messaggi/azioni.
 */
.top_menu:has(> .entity_tabs_fit) {
  overflow: visible;
}
.top_menu > .entity_tabs_fit {
  display: flex !important;
  flex-wrap: nowrap !important;
  min-width: 0;
  overflow: visible;
  position: relative;
}
.top_menu > .entity_tabs_fit.col-md-6 {
  flex: 0 0 50%;
  max-width: 50%;
}
.modal .top_menu > .entity_tabs_fit {
  flex: 0 1 auto;
  max-width: 80%;
}
.top_menu > .entity_tabs_fit > .nav-item {
  flex-shrink: 0;
}
.top_menu > .entity_tabs_fit .nav-link {
  white-space: nowrap;
}
.top_menu > .entity_tabs_fit > .entity_tabs_more {
  position: relative;
}
.top_menu > .entity_tabs_fit > .entity_tabs_more .nav-link {
  white-space: nowrap;
}
.top_menu > .entity_tabs_fit > .entity_tabs_more .dropdown-menu {
  z-index: 1060;
}