/*
 * ============================================================================
 * RESPONSIVE.CSS - EOS Moduli Esterni
 * ============================================================================
 * Foglio di stile responsivo centralizzato.
 * Gestisce tutte le media query per evitare sovrapposizioni di elementi
 * su schermi di diverse dimensioni.
 *
 * Breakpoints utilizzati:
 *   - xs:  < 480px   (smartphone portrait)
 *   - sm:  < 768px   (smartphone landscape / tablet portrait)
 *   - md:  < 992px   (tablet landscape)
 *   - lg:  < 1200px  (desktop piccolo)
 *   - xl:  < 1280px  (desktop medio)
 *   - xxl: >= 1280px (desktop grande)
 * ============================================================================
 */


/* ==========================================================================
   1. MODALI - max-width responsive per evitare overflow orizzontale
   ========================================================================== */

/*
 * Le modali utilizzano inline style con width fissa (1200px, 800px, 600px, ecc.)
 * Usiamo max-width con !important per limitarle alla viewport disponibile.
 */

/*
 * Su desktop (>991px) le modali hanno spazio sufficiente, non serve limitarle.
 * Limitiamo max-width solo su tablet e sotto per evitare overflow orizzontale.
 */

/* Tablet e sotto: modali limitate alla viewport */
@media (max-width: 991px) {
  .modal-dialog {
    max-width: calc(100vw - 20px) !important;
    margin-left: auto !important;
    margin-right: auto !important;
    margin: 10px auto !important;
  }

  /* Le modali xxl e xl scalano a 95% del viewport */
  #divModal_inv_xxl,
  #divModal_inv_xl,
  .modal-dialog[style*="width:1200px"],
  .modal-dialog[style*="width:800px"] {
    width: 95vw !important;
    max-width: 95vw !important;
  }
}

/* Smartphone: tutte le modali a larghezza piena */
@media (max-width: 767px) {
  .modal-dialog {
    width: calc(100vw - 10px) !important;
    max-width: calc(100vw - 10px) !important;
    margin: 5px auto !important;
  }

  .modal-dialog.modal-lg {
    width: calc(100vw - 10px) !important;
    max-width: calc(100vw - 10px) !important;
  }

  /* Modali piccole restano centrate ma non eccedono */
  #divModal_inv_xs,
  #divModal_inv_xxs {
    width: auto !important;
    min-width: 150px;
    max-width: calc(100vw - 10px) !important;
  }

  .modal-body {
    padding: 10px !important;
  }

  .modal-header {
    padding: 10px 15px !important;
  }

  .modal-footer {
    padding: 10px 15px !important;
  }
}

/* Smartphone piccoli */
@media (max-width: 480px) {
  .modal-dialog {
    width: 100vw !important;
    max-width: 100vw !important;
    margin: 0 !important;
  }

  .modal-content {
    border-radius: 0 !important;
  }
}


/* ==========================================================================
   2. HEADBAR - Layout responsive navbar superiore
   ========================================================================== */

/*
 * La HeadBar contiene: RUOLI (col-sm-10) | Campanella + Logout (col-sm-2)
 *
 * Problemi risolti:
 * 1) col-sm-10 aveva margin-top:1.1em ma col-sm-2 no → disallineamento verticale
 * 2) .nav-bassa aveva height:20px !important → troncava campanella e logout
 * 3) li:last-child aveva margin-right:40px → sprecava spazio a destra
 * 4) Con sidebar aperta (~220px), lo spazio e' ~780px → RUOLI e logout si sovrappongono
 *
 * Soluzione: flexbox su nav.navbar > .row (selettore specifico, non tocca altri .row)
 * con align-items:center per allineamento verticale perfetto.
 */

/* ---- Layout base: flexbox sulla riga HeadBar per allineare tutto ---- */

/* Rimuoviamo il padding del navbar che crea spazio inutile a sinistra/destra */
nav.navbar {
  padding: 0 !important;
}

/* Riga principale: flexbox con allineamento verticale centrato.
 * padding-top sposta tutto leggermente in basso rispetto al bordo superiore. */
nav.navbar > .row {
  display: flex !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  margin: 0 !important;
  padding: 10px 0 6px 0;
  min-height: 45px;
}

/* Colonna RUOLI: prende lo spazio disponibile */
nav.navbar > .row > .col-sm-10,
nav.navbar > .row > .col-sm-9 {
  flex: 1 1 0% !important;
  width: auto !important;
  min-width: 0 !important;
  float: none !important;
  /*overflow: hidden;*/
  overflow-x: clip;
  overflow-y: visible;
  padding-left: 10px !important;
  padding-right: 5px !important;
}

/* Colonna Campanella + Logout */
nav.navbar > .row > .col-sm-2,
nav.navbar > .row > .col-sm-3 {
  flex: 0 0 auto !important;
  width: auto !important;
  float: none !important;
  white-space: nowrap;
  padding-left: 0 !important;
  padding-right: 30px !important;
}

/* UL sinistra (RUOLI) — tutto centrato verticalmente sulla stessa linea */
nav.navbar .nav.navbar-top-links {
  display: flex !important;
  align-items: center;
  margin: 0;
  padding: 0;
  min-height: 36px;
  line-height: 1;
}

nav.navbar .nav.navbar-top-links > li {
  display: flex !important;
  align-items: center;
  line-height: 1;
}

nav.navbar .nav.navbar-top-links > li > a {
  padding: 8px 8px !important;
  min-height: auto !important;
  line-height: 1 !important;
  display: inline-flex !important;
  align-items: center !important;
}

/* UL destra (campanella + logout) — stessa altezza e centramento */
nav.navbar .nav-bassa {
  height: auto !important;
  min-height: 36px;
  display: flex !important;
  align-items: center;
  gap: 0;
  margin: 0;
  padding: 0;
  line-height: 1;
}

nav.navbar .nav-bassa > li {
  display: inline-flex !important;
  align-items: center;
  line-height: 1;
}

nav.navbar .nav-bassa > li > a {
  padding: 8px 12px !important;
  min-height: auto !important;
  white-space: nowrap;
  line-height: 1 !important;
  display: inline-flex !important;
  align-items: center !important;
}

/* Spazio tra campanella e Log out */
nav.navbar .nav-bassa > li + li {
  margin-left: 8px;
}

/* Nessun margin-right eccessivo */
nav.navbar .navbar-top-links li:last-child {
  margin-right: 0 !important;
}

/* Badge notifiche: posizionato in alto a destra della campanella */
nav.navbar .count-info {
  position: relative;
  display: inline-flex !important;
  align-items: center !important;
}
nav.navbar .count-info .label {
  position: absolute !important;
  top: -2px !important;
  left: 35% !important;
  right: auto !important;
  line-height: 1;
  padding: 2px 5px !important;
  font-size: 10px;
  border-radius: 3px;
}

/* Menu personale: fix allineamento verticale.
 * style.css impone margin: 0 0 0.75em 0.5em su .menu-personale
 * che spinge i bottoni in basso rispetto a "RUOLI:".
 * E .menu-personale-container ha padding-left: 1em inutile. */
.menu-personale {
  margin: 0 0 0 2px !important;
}

.menu-personale-container {
  padding: 0 !important;
}

/* Bottoni RUOLI: padding generoso, bordi arrotondati */
.menu-personale button,
.menu-personale .btn-outline-primary {
  padding: 6px 16px 6px 16px !important;
  line-height: 1.3 !important;
  vertical-align: middle;
  min-width: auto !important;
  border-radius: 4px;
}

/* Menu personale container - overflow scrollabile */
#menu-personale-container {
  overflow: visible !important;
  max-width: 100% !important;
}

/* ---- Tablet <= 991px: bottoni RUOLI piu' compatti ---- */
@media (max-width: 991px) {
  .menu-personale {
    margin: 2px 0 !important;
  }

  .menu-personale .btn-outline-primary {
    font-size: 0.8em !important;
    padding: 4px 8px !important;
    max-width: 180px !important;
  }

  .menu-personale-content {
    max-width: none !important;
    width: auto !important;
    min-width: 160px;
  }
}

/* ---- Mobile <= 767px: la HeadBar si impila verticalmente ---- */
@media (max-width: 767px) {
  nav.navbar > .row {
    flex-wrap: wrap !important;
    padding: 5px 0;
  }

  nav.navbar > .row > .col-sm-10,
  nav.navbar > .row > .col-sm-9 {
    flex: 0 0 100% !important;
    width: 100% !important;
    overflow: visible !important;
  }

  nav.navbar > .row > .col-sm-2,
  nav.navbar > .row > .col-sm-3 {
    flex: 0 0 100% !important;
    width: 100% !important;
    text-align: right;
    padding-top: 5px;
    padding-bottom: 5px;
  }

  nav.navbar .nav-bassa {
    justify-content: flex-end;
    padding: 5px 0;
  }

  #menu-personale-container {
    white-space: normal !important;
    overflow-x: visible !important;
  }

  #menu-personale-container > div {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 4px;
    align-items: center;
  }

  .menu-personale {
    display: inline-block !important;
    margin: 2px !important;
  }

  .menu-personale .btn-outline-primary {
    font-size: 0.75em !important;
    padding: 3px 6px !important;
    max-width: none !important;
    min-width: auto !important;
  }
}


/* ==========================================================================
   3. TABELLE - Wrapper responsive per evitare overflow
   ========================================================================== */

/* Tutte le tabelle con larghezza fissa vengono avvolte in un container scrollabile */
.table-responsive,
.doTable,
.doTable100width,
.tabEasy {
  overflow-x: auto !important;
  -webkit-overflow-scrolling: touch;
  max-width: 100%;
}

/* DataTables e contenitori pratiche: niente scrollbar orizzontale su desktop.
   Replica globale dei fix locali presenti in uni_autorizzazione.php e autorizzazione.php */
.dataTables_wrapper,
.dataTables_wrapper .table-responsive,
.divPratiche {
  overflow-x: hidden !important;
  max-width: 100% !important;
}
.dataTables_wrapper .table {
  max-width: 100% !important;
  box-sizing: border-box !important;
}

@media (max-width: 991px) {
  /* Su tablet/mobile le tabelle possono necessitare di scroll orizzontale */
  .dataTables_wrapper,
  .dataTables_wrapper .table-responsive {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
  }
}

@media (max-width: 991px) {
  /* Tabelle: font piu' piccolo su tablet */
  .dataTables_wrapper table {
    font-size: 11px;
  }

  .dataTables_wrapper .dataTables_length,
  .dataTables_wrapper .dataTables_filter {
    text-align: left !important;
    float: none !important;
    margin-bottom: 10px;
  }
}

@media (max-width: 767px) {
  .dataTables_wrapper table {
    font-size: 10px;
  }

  /* Bottoni html5 sotto la tabella su mobile */
  .html5buttons {
    float: none !important;
    margin-top: 10px !important;
    text-align: center;
  }

  .dataTables_wrapper .dataTables_info,
  .dataTables_wrapper .dataTables_paginate {
    text-align: center !important;
    float: none !important;
    margin-top: 10px;
  }
}

/* Tabelle custom (rTable) con float */
@media (max-width: 767px) {
  .rTableCell, .rTableHead,
  .rTableCell2, .rTableHead2,
  .rTableCell3, .rTableHead3,
  .rTableCell4, .rTableHead4,
  .rTableCellFeb, .rTableHeadFeb {
    float: none !important;
    width: 100% !important;
    display: block;
  }
}


/* ==========================================================================
   4. FORM LAYOUT - Elementi di form e colonne Bootstrap
   ========================================================================== */

/*
 * Bootstrap 3 gestisce nativamente lo stacking dei col-sm-* sotto 768px.
 * NON forzare width:100% su tutte le colonne perche' puo' rompere layout
 * con col-xs-* specifici o con float intenzionali.
 */

/* Intestazione pagina: titolo + bottoni azione (es. col-sm-8 + col-sm-4) */
/* col-sm funziona gia' da 768px in su, quindi stacking solo su smartphone */
@media (max-width: 767px) {
  .ibox-content > .row > [class*="col-sm-"],
  .ibox-content-small > .row > [class*="col-sm-"] {
    float: none !important;
    width: 100% !important;
  }

  .ibox-content > .row,
  .ibox-content-small > .row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
  }

  /* Bottoni azione nell'intestazione: margine sopra quando impilati */
  .ibox-content > .row > .col-sm-4,
  .ibox-content-small > .row > .col-sm-4,
  .ibox-content > .row > .col-sm-3,
  .ibox-content-small > .row > .col-sm-3 {
    margin-top: 8px;
  }
}

/* Elementi con larghezza fissa via inline style */
@media (max-width: 991px) {
  /* Input e select non devono mai superare il loro container */
  input[type="text"],
  input[type="email"],
  input[type="password"],
  input[type="number"],
  input[type="date"],
  input[type="tel"],
  select,
  textarea,
  .form-control {
    max-width: 100% !important;
    box-sizing: border-box !important;
  }
}

/* Select2 responsive */
@media (max-width: 767px) {
  .select2-container {
    width: 100% !important;
  }
}


/* ==========================================================================
   5. SIDEBAR / NAVIGATION + LINGUA TOGGLE
   ========================================================================== */

/*
 * ARCHITETTURA CLASSI SIDEBAR:
 * ============================
 * Il tema Inspinia usa "mini-navbar" per collassare la sidebar su desktop.
 * Il problema e' che riusare "mini-navbar" anche su mobile (con significato
 * invertito: "apri sidebar") causa conflitti CSS durante il resize del browser,
 * perche' le regole del tema per mini-navbar (width:70px, left:70px, ecc.)
 * interferiscono con le nostre regole mobile.
 *
 * SOLUZIONE: classi separate.
 *   - Desktop: "mini-navbar" = sidebar collassata (gestita dal tema Inspinia)
 *   - Mobile:  "sidebar-open-mobile" = sidebar aperta come overlay
 *
 * Il JS gestisce la transizione tra breakpoint:
 *   - Desktop → Mobile: rimuove mini-navbar, NON aggiunge sidebar-open-mobile
 *     → sidebar sempre chiusa su mobile al cambio di breakpoint
 *   - Mobile → Desktop: rimuove sidebar-open-mobile.
 *     Se la sidebar era chiusa su mobile, aggiunge mini-navbar per tenerla
 *     chiusa anche su desktop. Se era aperta, non aggiunge mini-navbar.
 *
 * POSIZIONAMENTO LINGUA (left):
 * Gestito interamente via JS tramite getBoundingClientRect() della sidebar.
 */

/* ---- Sidebar: scroll e scrollbar stilizzata ---- */
/* Regole spostate inline in index.php (funzione NavBar) per evitare
   problemi di cache e ordine di caricamento CSS.
   Le sub-page (elenco.php, kanban.php, ecc.) ri-caricano style.css
   che poteva sovrascrivere responsive.css. */

/* ---- Navbar-fixed-top: disabilita transizione CSS ---- */
/*
 * Il tema ha transition-duration: 0.4s sulla navbar. Ma il left
 * e' gestito via JS (requestAnimationFrame che traccia la sidebar).
 * La transizione CSS crea un ritardo: il JS setta left=150 ma la navbar
 * "scivola" lentamente verso 150 mentre il prossimo frame setta left=130.
 * Risultato: la navbar sembra muoversi in ritardo rispetto alla sidebar.
 *
 * Fix: disabilitiamo la transizione sulla navbar. Il JS la posiziona
 * istantaneamente ad ogni frame, perfettamente allineata con la sidebar.
 */
.navbar-fixed-top {
  transition: none !important;
}

/* ====================================================================
 * SIDEBAR COME BLOCCO UNICO
 * ====================================================================
 * Il tema Inspinia, quando mini-navbar e' attivo, fa animazioni SEPARATE
 * sulla .nav-header (cambia padding, background, nasconde profile-element)
 * rispetto alla sidebar (cambia width). Questo crea l'effetto "2 sezioni"
 * dove la parte alta (utente/ruolo) si muove prima del menu sotto.
 *
 * Con fixed-sidebar, la sidebar va a width:0 e overflow:hidden clippa tutto.
 * NON serve che .nav-header faccia la sua animazione: basta che la sidebar
 * cambi larghezza e tutto il contenuto viene clippato uniformemente.
 *
 * Fix: con fixed-sidebar, impediamo le animazioni indipendenti del tema
 * sulla .nav-header e sui suoi figli. Tutto resta al suo posto,
 * il clip della sidebar fa il resto.
 */

/* Nav-header: mantieni lo stile "espanso" anche con mini-navbar.
   overflow:hidden della sidebar clippa tutto uniformemente. */
body.fixed-sidebar.mini-navbar .nav-header {
  padding: 33px 25px !important;
  background-color: #2f4050 !important;
  background-image: url("patterns/header-profile.png") !important;
  transition: none !important;
}

/* Tieni visibili profilo, label e testo menu: il clip li nasconde. */
body.fixed-sidebar.mini-navbar .profile-element {
  display: block !important;
}

body.fixed-sidebar.mini-navbar .nav-label {
  display: block !important;
}

body.fixed-sidebar.mini-navbar .navbar-default .nav li a span {
  display: inline !important;
}

/* Logo-element: NON mostrarlo (appare solo nella versione a 70px, non serve) */
body.fixed-sidebar.mini-navbar .logo-element {
  display: none !important;
}

/* Disabilita la transizione sul nav-header per evitare che si muova
   indipendentemente dalla sidebar */
body.fixed-sidebar .nav-header {
  transition: none !important;
}

/*
 * ====================================================================
 * FIX DEFINITIVO: Navbar e sidebar sempre allineati.
 * ====================================================================
 * Il tema Inspinia usa "body-small" (basato su jQuery width, SENZA scrollbar)
 * per spostare la navbar a left:0. Ma le CSS media query usano la viewport
 * CON scrollbar. Esiste una finestra di ~7-17px dove body-small e' attiva
 * ma la media query no, causando la navbar a left:0 sopra la sidebar a 220px.
 *
 * SOLUZIONE PURA CSS: usiamo !important per forzare l'allineamento corretto
 * in base allo stato della sidebar (mini-navbar si/no), ignorando body-small.
 * Queste regole vincono su QUALSIASI regola del tema perche' usano !important.
 * ====================================================================
 */

/*
 * Le regole seguono 3 stati possibili:
 *
 * STATO A - Desktop, sidebar espansa (no mini-navbar, no body-small):
 *   navbar left:220px, page-wrapper margin-left:240px, sidebar width:220px
 *
 * STATO B - Desktop, sidebar collassata (mini-navbar):
 *   navbar left:0, page-wrapper margin-left:0, sidebar width:0
 *
 * STATO C - body-small attivo (sidebar nascosta dal tema):
 *   navbar left:0, page-wrapper margin-left:0, sidebar display:none
 *
 * STATO D - Mobile (media query max-width:768px):
 *   gestito nella sezione @media sotto
 */

/* --- Navbar left: gestito interamente via JS (come la lingua).
   Il JS legge getBoundingClientRect() della sidebar e setta
   navbar.style.left in tempo reale. Nessun !important qui. --- */

/* Fallback CSS (senza JS): */
body.fixed-nav.fixed-nav-basic:not(.mini-navbar):not(.body-small) .navbar-fixed-top {
  left: 220px;
}

body.mini-navbar .navbar-fixed-top {
  left: 0;
}

body.body-small.fixed-sidebar.mini-navbar .navbar-static-side,
body.body-small.mini-navbar .navbar-static-side {
  width: 0 !important;
  overflow: hidden !important;
}

body.mini-navbar #page-wrapper {
  margin-left: 0 !important;
}

/* --- STATO C: body-small (sidebar nascosta) --- */
body.body-small:not(.mini-navbar) .navbar-fixed-top {
  left: 0;
}

body.body-small #page-wrapper {
  margin-left: 0 !important;
}

/* Sidebar aperta su mobile/body-small: PUSH contenuto a destra.
   Viene DOPO body.body-small, stessa specificita' + !important → vince.
   overflow-x:hidden sul body evita la scrollbar orizzontale causata dal margin. */
body.sidebar-open-mobile {
  overflow-x: hidden !important;
}
body.sidebar-open-mobile #page-wrapper {
  margin-left: 220px !important;
}

/* ---- Lingua toggle ---- */
.sidebar-tongue {
  position: fixed !important;
  top: 200px;
  left: -50px;
  z-index: 2035 !important;
  width: 22px;
  height: 60px;
  background: #2f4050;
  border-radius: 0 8px 8px 0;
  display: flex !important;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.15s ease;
  box-shadow: 2px 0 6px rgba(0, 0, 0, 0.15);
  visibility: hidden;
}

.sidebar-tongue.positioned {
  visibility: visible !important;
  opacity: 1 !important;
}

.sidebar-tongue:hover {
  background: #1a2a38;
}

.sidebar-tongue i {
  color: #ffffff;
  font-size: 12px;
  line-height: 1;
}

/* ---- Mobile <= 768px ---- */
@media (max-width: 768px) {

  /* Sidebar: SEMPRE nascosta su mobile.
     Usiamo selettori molto specifici con !important per vincere su QUALSIASI
     regola del tema che usi mini-navbar, body-small, fixed-sidebar, ecc. */
  .navbar-static-side,
  body.mini-navbar .navbar-static-side,
  body.body-small .navbar-static-side,
  body.body-small.mini-navbar .navbar-static-side,
  body.fixed-sidebar .navbar-static-side,
  body.fixed-sidebar.mini-navbar .navbar-static-side,
  body.body-small.fixed-sidebar .navbar-static-side,
  body.body-small.fixed-sidebar.mini-navbar .navbar-static-side {
    display: none !important;
    position: fixed !important;
    z-index: 2001;
    width: 220px !important;
    height: 100% !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    top: 0;
    left: 0;
    background: #2f4050 !important;
  }

  /* UNICA regola che mostra la sidebar su mobile: sidebar-open-mobile.
     Specificita' altissima per vincere su TUTTI i selettori sopra.
     z-index: 2040 per stare SOPRA la navbar-fixed-top (2030). */
  body.sidebar-open-mobile.fixed-sidebar.body-small .navbar-static-side,
  body.sidebar-open-mobile.fixed-sidebar .navbar-static-side,
  body.sidebar-open-mobile.body-small .navbar-static-side,
  body.sidebar-open-mobile .navbar-static-side {
    display: block !important;
    width: 220px !important;
    z-index: 2040 !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
  }

  /* Lingua: visibile su mobile quando posizionata */
  .sidebar-tongue.positioned {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
  }

  /* Navbar-fixed-top: left gestito via JS (come la lingua).
     NO !important su left, altrimenti il JS non puo' sovrascriverlo. */
  .navbar-fixed-top {
    left: 0;
    transition: none !important;
  }

  /* Overlay scuro: copre TUTTO (anche la navbar), sotto la sidebar.
     z-index: 2035 → sopra navbar (2030), sotto sidebar (2040) e lingua (2035) */
  body.sidebar-open-mobile::after {
    content: "";
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.4);
    z-index: 2035;
  }

  /* Contenuto principale */
  #page-wrapper {
    margin-left: 0 !important;
    margin-right: 0 !important;
    margin-bottom: 0 !important;
  }
}


/* ==========================================================================
   5b. HEADER ROW CON BOTTONI (Nuova Istanza, Cerca, criteri di ricerca)
   ========================================================================== */

/*
 * Le righe intestazione (es. "ISTANZE NORME UNI" + bottone "Nuova Istanza",
 * oppure "GUIDA" + "Crea Nuova Istanza") usano col-sm-8 + col-sm-4 o
 * col-sm-6 + col-sm-6 con float-right. Quando la sidebar e' aperta,
 * l'area contenuto si riduce e i bottoni escono dal viewport.
 * Usiamo flex-wrap per forzare lo stacking quando lo spazio non basta.
 */

/* Su tablet e sotto: le righe intestazione dentro ibox-content wrappano */
@media (max-width: 991px) {
  .ibox-content > .row,
  .ibox-content-small > .row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
  }

  .ibox-content > .row > [class*="col-sm-"],
  .ibox-content-small > .row > [class*="col-sm-"],
  .ibox-content > .row > [class*="col-lg-"],
  .ibox-content-small > .row > [class*="col-lg-"] {
    flex: 1 1 auto;
    min-width: 250px;
  }

  /* Float-right sui bottoni: non troncare, permettere wrapping */
  .ibox-content .float-right,
  .ibox-content-small .float-right {
    float: none !important;
    display: inline-block;
    margin-top: 5px;
  }
}


/* ==========================================================================
   6. CONTENUTO PRINCIPALE - Wrapper e padding
   ========================================================================== */

@media (max-width: 991px) {
  .wrapper-content {
    padding: 15px 10px !important;
  }
}

@media (max-width: 767px) {
  .wrapper-content {
    padding: 10px 5px !important;
  }

  /* ibox piu' compatti su mobile */
  .ibox-content {
    padding: 10px !important;
  }

  .ibox-title {
    padding: 10px !important;
  }

  .ibox-title h5 {
    font-size: 13px;
  }
}


/* ==========================================================================
   7. FOOTER
   ========================================================================== */

@media (max-width: 991px) {
  .footer .row > div {
    float: none !important;
    width: 100% !important;
    text-align: center !important;
  }

  .footer .col-sm-1,
  .footer .col-sm-10 {
    width: 100% !important;
  }

  .footer .pull-right {
    float: none !important;
    text-align: center;
  }
}

@media (max-width: 767px) {
  .footer {
    padding: 10px !important;
  }

  .footer_txt {
    font-size: 9px !important;
  }
}


/* ==========================================================================
   8. TABS
   ========================================================================== */

@media (max-width: 767px) {
  .tabs-container .nav-tabs > li {
    float: none !important;
    margin-bottom: 0;
  }

  .tabs-container .nav-tabs > li > a {
    margin-right: 0 !important;
    border-radius: 0 !important;
  }

  .tabs-container .nav-tabs > li.active > a {
    border-bottom: 1px solid #e7eaec !important;
  }

  .tabs-container .tab-content {
    padding: 10px !important;
  }
}


/* ==========================================================================
   9. BOTTONI E GRUPPI DI BOTTONI
   ========================================================================== */

@media (max-width: 767px) {
  .btn-group {
    display: flex;
    flex-wrap: wrap;
  }

  .btn-group > .btn {
    flex: 1 1 auto;
    margin: 2px;
  }

  /* Bottoni action su mobile */
  .btn-xs {
    padding: 2px 5px !important;
    font-size: 10px !important;
  }
}


/* ==========================================================================
   10. GRAFICI E CANVAS (ChartJS)
   ========================================================================== */

@media (max-width: 767px) {
  canvas {
    max-width: 100% !important;
    height: auto !important;
  }
}


/* ==========================================================================
   11. DROPZONE (Upload file)
   ========================================================================== */

@media (max-width: 767px) {
  .dropzone {
    min-height: 120px !important;
    padding: 10px !important;
  }

  .dropzone .dz-message {
    font-size: 12px;
    margin: 10px 0 !important;
  }
}


/* ==========================================================================
   12. SUMMERNOTE (Editor WYSIWYG)
   ========================================================================== */

@media (max-width: 767px) {
  .note-editor .note-toolbar {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    white-space: nowrap;
  }

  .note-editor .note-toolbar .note-btn-group {
    display: inline-block;
    float: none !important;
  }
}


/* ==========================================================================
   13. SWEETALERT2
   ========================================================================== */

@media (max-width: 767px) {
  .swal2-popup {
    width: 90vw !important;
    max-width: 90vw !important;
    font-size: 13px !important;
  }
}

@media (max-width: 480px) {
  .swal2-popup {
    width: 95vw !important;
    max-width: 95vw !important;
    padding: 15px !important;
  }
}

/* SweetAlert sessione chiusa */
@media (max-width: 767px) {
  .swal-sessione-chiusa {
    width: 90% !important;
    height: auto !important;
  }
}


/* ==========================================================================
   14. PROGRESS BAR VERTICALE / ORIZZONTALE
   ========================================================================== */

@media (max-width: 767px) {
  .divPrincipaleVerticale .progressBarRemVerticale {
    height: 30vh !important;
    width: 80% !important;
    margin-left: 10% !important;
  }

  .progress-bar-vertical {
    min-height: 60px !important;
    margin-right: 10px !important;
  }
}


/* ==========================================================================
   15. UTILITIES RESPONSIVE
   ========================================================================== */

/* Overflow-x su container specifici */
@media (max-width: 991px) {
  [style*="overflow: auto; width: 98%"],
  [style*="overflow:auto; width:98%"] {
    width: 100% !important;
    height: auto !important;
    min-height: 200px;
    max-height: 80vh;
  }
}

/* Elementi con float: evitare rottura layout */
@media (max-width: 767px) {
  .pull-right,
  .float-right {
    float: none !important;
    text-align: center;
    margin-top: 5px;
  }

  .pull-left,
  .float-left {
    float: none !important;
  }
}

/* Container con position:absolute su schermi piccoli */
@media (max-width: 767px) {
  .tooltipLux .tooltiptextLux {
    left: auto !important;
    right: 0;
    top: 100% !important;
    width: auto;
    min-width: 100px;
    max-width: 200px;
  }
}

/* Nascondere elementi non essenziali su mobile */
@media (max-width: 480px) {
  .hidden-xs-custom {
    display: none !important;
  }
}


/* ==========================================================================
   16. CALENDARIO (FullCalendar)
   ========================================================================== */

@media (max-width: 991px) {
  .fc-toolbar {
    flex-direction: column;
    gap: 8px;
  }

  .fc-toolbar .fc-left,
  .fc-toolbar .fc-center,
  .fc-toolbar .fc-right {
    float: none !important;
    text-align: center;
    margin-bottom: 5px;
  }
}

@media (max-width: 767px) {
  .fc-toolbar .fc-button {
    padding: 4px 8px !important;
    font-size: 11px !important;
  }

  .fc-view-container {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
}


/* ==========================================================================
   17. PLANNING / GANTT - Barre con posizione assoluta
   ========================================================================== */

@media (max-width: 991px) {
  /* Container di planning con barre absolute: scrollabile */
  [style*="position:absolute"][style*="left:"] {
    min-width: 30px;
    font-size: 10px !important;
  }

  /* Container padre di elementi Gantt */
  .gantt-container,
  [id*="planning"],
  [id*="Planning"] {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
  }
}


/* ==========================================================================
   18. STAMPA - Override per evitare problemi in stampa
   ========================================================================== */

@media print {
  .modal-dialog {
    max-width: 100% !important;
    width: 100% !important;
  }

  .no-print {
    display: none !important;
  }

  .wrapper-content {
    padding: 0 !important;
  }

  #page-wrapper {
    margin: 0 !important;
  }
}


/* ==========================================================================
   19. iBox TOOLS - Pulsanti di azione ibox
   ========================================================================== */

@media (max-width: 767px) {
  .ibox-tools {
    float: none !important;
    text-align: right;
    display: block;
    margin-top: 5px;
  }

  .ibox-tools a {
    margin-left: 5px;
  }
}


/* ==========================================================================
   20. BREADCRUMB / PAGE HEADING
   ========================================================================== */

@media (max-width: 767px) {
  .page-heading {
    padding: 10px 15px !important;
  }

  .page-heading .breadcrumb {
    float: none !important;
    text-align: left;
    padding: 5px 0 !important;
    margin-bottom: 0;
  }
}


/* ==========================================================================
   21. CONTAINER DOCUMENTI E ALLEGATI
   ========================================================================== */

@media (max-width: 991px) {
  /* Container documenti con layout a colonne */
  .containerExp {
    width: 100% !important;
  }

  .containerExp .header {
    word-break: break-word;
  }
}


/* ==========================================================================
   22. LAYOUT FLEX HELPERS
   ========================================================================== */

@media (max-width: 767px) {
  .wrap {
    flex-direction: column;
  }

  .vcenter {
    display: block !important;
    float: none !important;
    text-align: center;
    margin-bottom: 5px;
  }
}


/* ==========================================================================
   23. PANNELLO NOTIFICHE DROPDOWN
   ========================================================================== */

@media (max-width: 767px) {
  .dropdown-alerts,
  .dropdown-messages,
  .dropdown-tasks {
    width: 280px !important;
    max-width: calc(100vw - 20px) !important;
    right: -50px;
  }
}

@media (max-width: 480px) {
  .dropdown-alerts,
  .dropdown-messages,
  .dropdown-tasks {
    width: calc(100vw - 20px) !important;
    right: auto;
    left: -100px;
  }
}


/* ==========================================================================
   24. POSTIT / NOTE
   ========================================================================== */

@media (max-width: 767px) {
  .note_1, .note_2, .note_3,
  .msg_doc_postit, .msg_doc_postit2 {
    margin: 5px !important;
    padding: 8px !important;
  }
}


/* ==========================================================================
   25. DIVIDER
   ========================================================================== */

@media (max-width: 767px) {
  .divider2 {
    width: 95% !important;
  }
}


/* ==========================================================================
   26. LOADER EOS
   ========================================================================== */

/* Il loader e' gia' centrato con calc, ma su viewport molto piccoli */
@media (max-width: 480px) {
  .loaderEos {
    width: 48px !important;
    height: 48px !important;
    top: calc(50% - 24px) !important;
    left: calc(50% - 24px) !important;
  }
}


/* ==========================================================================
   27. IMMAGINI RESPONSIVE
   ========================================================================== */

/* Immagini dentro il contenuto principale: non eccedere il container */
#main_page img,
.modal-body img,
.ibox-content img {
  max-width: 100%;
  height: auto;
}


/* ==========================================================================
   28. OVERFLOW GLOBALE - Prevenzione scroll orizzontale
   ========================================================================== */

/*
 * ATTENZIONE: NON usare overflow-x:hidden su html/body globalmente
 * perche' nasconde dropdown, tooltip e contenuti legittimi.
 * NON resettare i margini negativi di .row perche' rompono il grid Bootstrap.
 * Applicare solo su mobile dove lo scroll orizzontale e' il problema principale.
 */

/* Contenuti che potrebbero eccedere - solo su schermi ridotti */
@media (max-width: 991px) {
  #main_page {
    overflow-x: auto;
    max-width: 100%;
  }
}

/* Solo su mobile: prevenire scroll orizzontale indesiderato */
@media (max-width: 767px) {
  body {
    overflow-x: hidden;
  }

  #wrapper {
    overflow-x: hidden;
    max-width: 100%;
  }
}


/* ==========================================================================
   29. TIPPY / TOOLTIP
   ========================================================================== */

@media (max-width: 767px) {
  .tippy-popper {
    max-width: calc(100vw - 20px) !important;
  }
}


/* ==========================================================================
   30. CODEMIRROR
   ========================================================================== */

@media (max-width: 767px) {
  .CodeMirror {
    max-width: 100% !important;
    font-size: 12px;
  }
}


/* ==========================================================================
   31. SELECT2 DROPDOWN
   ========================================================================== */

@media (max-width: 767px) {
  .select2-dropdown {
    max-width: calc(100vw - 20px) !important;
  }
}


/* ==========================================================================
   32. JSONTREE / JSTREE
   ========================================================================== */

@media (max-width: 767px) {
  .jstree-default {
    overflow-x: auto;
  }
}


/* ==========================================================================
   33. TABELLE DOCUMENTAZIONE (PARM, PAICA, RCRM)
   ========================================================================== */

@media (max-width: 991px) {
  table[width],
  table[style*="width:"] {
    width: 100% !important;
    table-layout: auto !important;
  }

  td[width] {
    width: auto !important;
  }
}

@media (max-width: 767px) {
  table[width] td,
  .doTable td,
  .doTable100width td,
  .tabEasy td {
    word-break: break-word;
    padding: 5px !important;
    font-size: 11px !important;
  }
}


/* ==========================================================================
   34. CALENDARIO CUSTOM (rCalendar) - Layout float con celle 8%
   ========================================================================== */

/* Su schermi medi: il calendario diventa scrollabile orizzontalmente */
@media (max-width: 991px) {
  .rCalendarP,
  .rCalendarG {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    min-width: 100%;
  }

  /* Imposta una larghezza minima per evitare che le celle collassino */
  .rCalendarP .rCalendarRowP,
  .rCalendarP .rCalendarBodyP,
  .rCalendarG .rCalendarRowG,
  .rCalendarG .rCalendarBodyG {
    min-width: 700px;
  }
}


/* ==========================================================================
   35. FORM INLINE E BOTTONI AZIONE
   ========================================================================== */

@media (max-width: 767px) {
  /* Form inline su mobile diventano block */
  .form-inline .form-group {
    display: block !important;
    margin-bottom: 8px;
  }

  .form-inline .form-control {
    display: block !important;
    width: 100% !important;
  }

  /* Bottoni di azione in fila: wrapping */
  .btn-toolbar {
    flex-wrap: wrap;
  }
}


/* ==========================================================================
   36. PANNELLI LATERALI E SIDEBAR CONTENT
   ========================================================================== */

@media (max-width: 767px) {
  .sidebard-panel {
    width: 100% !important;
    position: relative !important;
  }

  .sidebar-content .wrapper {
    padding-right: 0 !important;
  }
}


/* ==========================================================================
   37. LABEL E BADGE RESPONSIVE
   ========================================================================== */

@media (max-width: 480px) {
  .label {
    font-size: 9px !important;
    padding: 2px 4px !important;
  }

  .badge {
    font-size: 9px !important;
  }
}


/* ==========================================================================
   38. CVS MODULE - Layout specifici
   ========================================================================== */

@media (max-width: 991px) {
  /* Tabelle CVS con select inline */
  select[style*="width:280px"],
  select[style*="width: 280px"] {
    max-width: 100% !important;
    width: 100% !important;
  }
}


/* ==========================================================================
   39. GANTT / PLANNING - Container scrollabile
   ========================================================================== */

@media (max-width: 991px) {
  /* Il container del Gantt deve essere scrollabile su tablet */
  .divPratiche {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
  }

  .divPratiche pre {
    font-size: 8px !important;
    margin: 0 !important;
    width: 100% !important;
  }
}


/* ==========================================================================
   40. INPUT E TEXTAREA CON LARGHEZZE FISSE
   ========================================================================== */

@media (max-width: 767px) {
  /* Input con larghezze fisse via inline style */
  input[style*="width:500px"],
  input[style*="width: 500px"],
  textarea[style*="width:500px"],
  textarea[style*="width: 500px"],
  select[style*="width:500px"],
  select[style*="width: 500px"] {
    max-width: 100% !important;
    width: 100% !important;
  }
}


/* ==========================================================================
   41. FIX SFONDO SCURO DEL BODY
   ========================================================================== */

/*
 * Il tema Inspinia usa body { background-color: #2f4050 } come "sfondo sidebar".
 * La sidebar <nav> e' transparent e mostra il body scuro attraverso di se'.
 * Il page-wrapper con .gray-bg copre il resto.
 *
 * Problema: qualsiasi gap tra sidebar e page-wrapper mostra il body scuro
 * (es. il gap di 20px tra sidebar 220px e page-wrapper margin-left 240px).
 *
 * Fix: diamo alla sidebar un background esplicito e cambiamo il body
 * allo stesso grigio del page-wrapper. Cosi' non ci sono piu' gap scuri.
 */
body {
  background-color: #fff !important; /* bianco: elimina righe grigie tra navbar e contenuto */
}

/* Il #wrapper fa da "sfondo sidebar" al posto del body.
 * Un gradiente orizzontale dipinge i primi 220px (larghezza sidebar) con il
 * colore scuro #2f4050 e il resto trasparente. Cosi' anche quando la sidebar
 * <nav> e' piu' corta del viewport, la colonna sinistra resta scura.
 * min-height: 100vh garantisce che lo sfondo copra almeno l'intera finestra. */
#wrapper {
  min-height: 100vh !important;
  background: linear-gradient(to right, #2f4050 220px, transparent 220px) !important;
}

/* Sidebar collassata (mini-navbar con fixed-sidebar): width 0 → niente sfondo scuro */
body.fixed-sidebar.mini-navbar #wrapper {
  background: transparent !important;
}

/* Mini-navbar senza fixed-sidebar: sidebar a 70px */
body.mini-navbar:not(.fixed-sidebar) #wrapper {
  background: linear-gradient(to right, #2f4050 70px, transparent 70px) !important;
}

/* body-small: sidebar nascosta → niente sfondo scuro */
body.body-small #wrapper {
  background: transparent !important;
}

/* Mobile: sidebar nascosta di default → niente sfondo scuro */
@media (max-width: 768px) {
  #wrapper {
    background: transparent !important;
  }
}

/* La sidebar ha il SUO background scuro, non dipende piu' dal body.
 * Colore uniforme su tutta l'altezza: sidebar, nav-header e side-menu identici. */
.navbar-static-side {
  background-color: #2f4050;
}

.nav-header {
  background-color: #2f4050;
  background-image: none !important; /* rimuove pattern che rende il colore non uniforme */
}

/* Assicura che anche i sotto-contenitori della sidebar ereditino lo sfondo */
.sidebar-collapse,
.slimScrollDiv {
  background-color: #2f4050;
}

/* Il rail dello slimScroll nella sidebar e' #333 di default (piu' scuro di #2f4050).
 * Lo nascondiamo e coloriamo la scrollbar in modo discreto. */
.navbar-static-side .slimScrollBar {
  background: rgba(255,255,255,0.2) !important;
}
.navbar-static-side .slimScrollRail {
  background: transparent !important;
}


/* ==========================================================================
   42. FIX LAYOUT PAGE-WRAPPER E CONTENUTO
   ========================================================================== */

/*
 * Il tema Inspinia impone:
 *   - html, body { height: 100% } → con margin-top del page-wrapper (navbar fissa)
 *     il contenuto eccede il viewport e genera scrollbar verticale inutile
 *   - min-height fissi (2002px, 1200px, 568px) → scrollbar ancora peggiore
 *   - padding: 0 15px → bordi grigi ai lati del contenuto
 *
 * Fix: height auto su html/body, min-height auto su page-wrapper, padding zero.
 */
html, body {
  height: auto !important;
}

#page-wrapper {
  min-height: auto !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  background-color: #f3f3f4 !important;
}

/* Area contenuto: larghezza 100%, padding-top ridotto. */
#main_page {
  width: 100% !important;
  padding-top: 5px !important;
}

/* .ibox-content ha border-top: 1px solid #e7eaec (da inspinia).
 * Separatore grigio tra le sezioni della pagina. */