/* 
 * CSS globale per ottimizzazione mobile della Dashboard
 * File UNICO unificato - include in tutte le pagine dashboard per esperienza mobile
 * (ex dashboardso/css/dashboard-mobile.css consolidato qui)
 */

/* Forza tema chiaro: evita che il browser (es. su mobile con dark mode di sistema) scurisca la pagina */
html {
  color-scheme: light;
}

/* ===== FIX TABLET/MOBILE (max-width: 991px) — drawer sidebar ===== */
@media screen and (max-width: 991.98px) {
  /*
   * Mobile drawer: light surface for dark text.
   * Brand primary may be saturated (--sidebar-bg); use it on the header only.
   * IMPORTANT: target ONLY the offcanvas drawer — never #sidebar-placeholder.
   * Some pages still put class="sidebar" on the placeholder; that must not
   * become a permanent blue column that squeezes the page.
   */
  #sidebar-placeholder {
    width: 0 !important;
    min-width: 0 !important;
    max-width: 0 !important;
    flex: 0 0 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    background-color: transparent !important;
    box-shadow: none !important;
    overflow: visible !important;
    position: static !important;
    height: 0 !important;
    min-height: 0 !important;
    max-height: none !important;
    display: block !important;
    z-index: auto !important;
  }

  #sidebar-container {
    width: 0 !important;
    min-width: 0 !important;
    max-width: 0 !important;
    flex: 0 0 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    background-color: transparent !important;
    box-shadow: none !important;
    overflow: visible !important;
    position: static !important;
    height: 0 !important;
    min-height: 0 !important;
    max-height: none !important;
    display: block !important;
    z-index: auto !important;
  }

  /* Navbar accidentalmente dentro .wrapper: non deve diventare colonna */
  .wrapper {
    flex-wrap: wrap !important;
  }
  .wrapper > #navbar-placeholder,
  .wrapper > #navbar-container {
    flex: 0 0 100% !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 100% !important;
  }

  #sidebarOffcanvas.offcanvas.sidebar,
  .offcanvas.sidebar,
  .sidebar.offcanvas {
    --sidebar-drawer-surface: var(--card-bg, #ffffff);
    --sidebar-drawer-ink: var(--dark-text, #1f2937);
    --sidebar-drawer-muted: var(--text-secondary, #4b5563);
    --sidebar-drawer-accent: var(--primary-green, #198754);
    top: 0 !important;
    left: 0 !important;
    bottom: 0 !important;
    width: min(20rem, calc(100vw - 3rem)) !important;
    max-width: calc(100vw - 2.5rem) !important;
    height: 100vh !important;
    height: 100dvh !important;
    height: calc(var(--vh, 1vh) * 100) !important;
    margin: 0 !important;
    padding: 0 !important;
    padding-top: env(safe-area-inset-top, 0px) !important;
    z-index: 1050 !important;
    background: var(--sidebar-drawer-surface) !important;
    background-color: var(--sidebar-drawer-surface) !important;
    color: var(--sidebar-drawer-ink) !important;
    border-right: 1px solid var(--border-light, #e5e7eb) !important;
    box-shadow: 8px 0 28px rgba(15, 23, 42, 0.18) !important;
    overflow: hidden !important;
    display: flex !important;
    flex-direction: column !important;
    --bs-offcanvas-bg: var(--sidebar-drawer-surface);
    --bs-offcanvas-width: min(20rem, calc(100vw - 3rem));
  }

  .navbar-toggler {
    -webkit-tap-highlight-color: transparent !important;
  }

  .sidebar .nav-link,
  .sidebar .collapsible-link,
  .sidebar .sub-link {
    -webkit-tap-highlight-color: rgba(25, 135, 84, 0.12) !important;
  }

  /* Closed state: hide off-screen */
  .offcanvas.sidebar:not(.show):not(.showing):not(.hiding),
  .sidebar.offcanvas:not(.show):not(.showing):not(.hiding) {
    visibility: hidden !important;
    transform: translateX(-105%) !important;
    pointer-events: none !important;
  }

  .offcanvas.sidebar.show,
  .offcanvas.sidebar.showing,
  .sidebar.offcanvas.show,
  .sidebar.offcanvas.showing {
    visibility: visible !important;
    transform: translateX(0) !important;
    pointer-events: auto !important;
  }

  /* Overlay tap-to-close */
  .overlay,
  #sidebarOverlay {
    display: none;
    position: fixed !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    background: rgba(15, 23, 42, 0.48) !important;
    z-index: 1045 !important;
    pointer-events: auto !important;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    border: 0;
  }
  body.sidebar-open .overlay,
  body.sidebar-open #sidebarOverlay {
    display: block !important;
    animation: dashboardOverlayFadeIn 0.2s ease-out;
  }

  /* Header: brand a sinistra, X a destra */
  .sidebar .offcanvas-header,
  .offcanvas.sidebar .offcanvas-header {
    display: flex !important;
    flex: 0 0 auto !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 0.75rem !important;
    min-height: 3.25rem !important;
    padding: 0.625rem 0.75rem !important;
    position: relative !important;
    z-index: 2 !important;
    background: var(--primary-green, #198754) !important;
    background-color: var(--primary-green, #198754) !important;
    border-bottom: 0 !important;
  }

  .sidebar .offcanvas-header .sidebar-header-brand,
  .offcanvas.sidebar .offcanvas-header .sidebar-header-brand,
  #sidebarHeaderBrand {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    max-width: none !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    display: block !important;
    font-weight: 700 !important;
    font-size: 1rem !important;
    line-height: 1.25 !important;
    color: #fff !important;
    text-shadow: none !important;
    text-decoration: none !important;
    text-align: left !important;
    min-height: auto !important;
    min-width: 0 !important;
    justify-content: flex-start !important;
  }

  .sidebar .btn-close,
  .offcanvas.sidebar .btn-close,
  #sidebarCloseBtn {
    position: relative !important;
    z-index: 5 !important;
    flex: 0 0 auto !important;
    width: 2.75rem !important;
    height: 2.75rem !important;
    min-width: 44px !important;
    min-height: 44px !important;
    padding: 0 !important;
    margin: 0 !important;
    opacity: 1 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    background-color: rgba(255, 255, 255, 0.22) !important;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23ffffff'%3e%3cpath d='M.293.293a1 1 0 011.414 0L8 6.586 14.293.293a1 1 0 111.414 1.414L9.414 8l6.293 6.293a1 1 0 01-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 01-1.414-1.414L6.586 8 .293 1.707a1 1 0 010-1.414z'/%3e%3c/svg%3e") !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
    background-size: 1rem auto !important;
    border-radius: 0.5rem !important;
    border: 0 !important;
    box-shadow: none !important;
    filter: none !important;
    cursor: pointer !important;
    -webkit-tap-highlight-color: transparent;
  }
  .sidebar .btn-close:active,
  .offcanvas.sidebar .btn-close:active,
  #sidebarCloseBtn:active {
    background-color: rgba(255, 255, 255, 0.35) !important;
  }
  html[data-theme="dark"] .sidebar .btn-close,
  html[data-theme="dark"] .offcanvas.sidebar .btn-close,
  html[data-theme="dark"] #sidebarCloseBtn {
    background-color: rgba(255, 255, 255, 0.12) !important;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23f3f4f6'%3e%3cpath d='M.293.293a1 1 0 011.414 0L8 6.586 14.293.293a1 1 0 111.414 1.414L9.414 8l6.293 6.293a1 1 0 01-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 01-1.414-1.414L6.586 8 .293 1.707a1 1 0 010-1.414z'/%3e%3c/svg%3e") !important;
    filter: none !important;
  }

  /* Ricerca menu (solo mobile) */
  .sidebar-mobile-tools {
    display: block !important;
    flex: 0 0 auto !important;
    padding: 0.65rem 0.75rem 0.5rem !important;
    background: var(--sidebar-drawer-surface) !important;
    border-bottom: 1px solid var(--border-light, #e5e7eb) !important;
  }
  .sidebar-search-field {
    position: relative;
    display: flex;
    align-items: center;
  }
  .sidebar-search-field > i {
    position: absolute;
    left: 0.85rem;
    color: var(--sidebar-drawer-muted);
    font-size: 0.85rem;
    pointer-events: none;
  }
  .sidebar-search-field .form-control,
  #sidebarMenuSearch {
    width: 100% !important;
    min-height: 44px !important;
    padding: 0.55rem 0.75rem 0.55rem 2.35rem !important;
    font-size: 16px !important;
    border-radius: 0.65rem !important;
    border: 1px solid var(--border-light, #d1d5db) !important;
    background: var(--card-bg, #fff) !important;
    color: var(--sidebar-drawer-ink) !important;
    box-shadow: none !important;
  }
  .sidebar-search-field .form-control:focus,
  #sidebarMenuSearch:focus {
    border-color: var(--sidebar-drawer-accent) !important;
    outline: 2px solid rgba(25, 135, 84, 0.28);
    outline-offset: 1px;
  }
  .sidebar-search-empty {
    display: none;
    padding: 1rem 1.25rem;
    color: var(--sidebar-drawer-muted);
    font-size: 0.9rem;
  }
  .sidebar-search-empty.is-visible {
    display: block !important;
  }

  /* Body scrollabile sotto header + search */
  .sidebar .offcanvas-body,
  .offcanvas.sidebar .offcanvas-body {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    background: var(--sidebar-drawer-surface) !important;
    background-color: var(--sidebar-drawer-surface) !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    overscroll-behavior: contain;
    padding-bottom: calc(0.75rem + env(safe-area-inset-bottom, 0px)) !important;
  }

  .sidebar .offcanvas-body .nav,
  .offcanvas.sidebar .offcanvas-body .nav {
    margin: 0 !important;
    padding: 0.35rem 0 0.75rem !important;
    background: transparent !important;
    max-width: none !important;
  }

  /* Voci menu: allineate a sinistra (override touch-target globale) */
  .sidebar .nav-link,
  .sidebar .collapsible-link,
  .offcanvas.sidebar .nav-link,
  .offcanvas.sidebar .collapsible-link {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 0.75rem !important;
    width: 100% !important;
    max-width: none !important;
    min-height: 48px !important;
    min-width: 0 !important;
    padding: 0.7rem 1rem 0.7rem 1.15rem !important;
    margin: 0 !important;
    font-size: 0.9375rem !important;
    font-weight: 500 !important;
    line-height: 1.3 !important;
    text-align: left !important;
    text-decoration: none !important;
    color: var(--sidebar-drawer-ink) !important;
    background: transparent !important;
    border: 0 !important;
    border-left: none !important;
    border-radius: 0 !important;
    opacity: 1 !important;
  }

  .sidebar .nav-link i,
  .sidebar .collapsible-link i:first-child,
  .offcanvas.sidebar .nav-link i,
  .offcanvas.sidebar .collapsible-link i:first-child {
    flex: 0 0 1.35rem !important;
    width: 1.35rem !important;
    min-width: 1.35rem !important;
    text-align: center !important;
    font-size: 1.05rem !important;
    color: inherit !important;
  }

  .sidebar .nav-link span,
  .sidebar .collapsible-link span,
  .offcanvas.sidebar .nav-link span,
  .offcanvas.sidebar .collapsible-link span {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    text-align: left !important;
    color: inherit !important;
  }

  .sidebar .collapsible-link .ms-auto,
  .sidebar .collapsible-link i:last-child,
  .offcanvas.sidebar .collapsible-link .ms-auto,
  .offcanvas.sidebar .collapsible-link i:last-child {
    margin-left: auto !important;
    flex: 0 0 auto !important;
    font-size: 0.8rem !important;
    opacity: 0.7;
  }

  .sidebar .nav-link:hover,
  .sidebar .collapsible-link:hover,
  .sidebar .nav-link:active,
  .sidebar .collapsible-link:active,
  .offcanvas.sidebar .nav-link:hover,
  .offcanvas.sidebar .collapsible-link:hover {
    background-color: var(--sidebar-hover-bg, rgba(25, 135, 84, 0.08)) !important;
    color: var(--sidebar-hover-color, var(--sidebar-drawer-accent)) !important;
    border-left: none !important;
  }

  .sidebar .nav-link.active,
  .sidebar .collapsible-link.active,
  .offcanvas.sidebar .nav-link.active,
  .offcanvas.sidebar .collapsible-link.active {
    background-color: var(--sidebar-active-bg, rgba(25, 135, 84, 0.12)) !important;
    color: var(--sidebar-active-color, var(--sidebar-drawer-accent)) !important;
    font-weight: 600 !important;
    border-left: none !important;
  }

  .sidebar .sub-link,
  .offcanvas.sidebar .sub-link {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    width: 100% !important;
    min-height: 44px !important;
    min-width: 0 !important;
    padding: 0.55rem 1rem 0.55rem 2.85rem !important;
    font-size: 0.875rem !important;
    font-weight: 450 !important;
    text-align: left !important;
    color: var(--sidebar-drawer-muted) !important;
    background: rgba(31, 41, 55, 0.03) !important;
    border-left: none !important;
    opacity: 1 !important;
  }

  .sidebar .sub-link:hover,
  .sidebar .sub-link.active,
  .offcanvas.sidebar .sub-link:hover,
  .offcanvas.sidebar .sub-link.active {
    color: var(--sidebar-active-color, var(--sidebar-drawer-accent)) !important;
    background-color: var(--sidebar-active-bg, rgba(25, 135, 84, 0.1)) !important;
    border-left: none !important;
    padding-left: 2.85rem !important;
  }

  /* Filtro ricerca: specificità > .nav-link { display:flex !important } */
  .sidebar .nav-link.sidebar-item-hidden,
  .sidebar .collapsible-link.sidebar-item-hidden,
  .sidebar .sub-link.sidebar-item-hidden,
  .sidebar .collapse.sidebar-item-hidden,
  .offcanvas.sidebar .nav-link.sidebar-item-hidden,
  .offcanvas.sidebar .collapsible-link.sidebar-item-hidden,
  .offcanvas.sidebar .sub-link.sidebar-item-hidden,
  .offcanvas.sidebar .collapse.sidebar-item-hidden {
    display: none !important;
  }

  .sidebar .collapse,
  .offcanvas.sidebar .collapse {
    background: transparent !important;
  }

  .sidebar.collapsed {
    width: min(20rem, calc(100vw - 3rem)) !important;
  }

  html[data-theme="dark"] .sidebar,
  html[data-theme="dark"] .offcanvas.sidebar {
    --sidebar-drawer-surface: #0e1012;
    --sidebar-drawer-ink: #e5e7eb;
    --sidebar-drawer-muted: #a8adb4;
    border-right-color: #252a30 !important;
    box-shadow: 8px 0 28px rgba(0, 0, 0, 0.45) !important;
  }
  html[data-theme="dark"] .sidebar .offcanvas-header,
  html[data-theme="dark"] .offcanvas.sidebar .offcanvas-header {
    background: #161a1e !important;
    background-color: #161a1e !important;
  }
  html[data-theme="dark"] .sidebar-mobile-tools {
    border-bottom-color: #252a30 !important;
  }
  html[data-theme="dark"] .sidebar-search-field .form-control,
  html[data-theme="dark"] #sidebarMenuSearch {
    background: #161a1e !important;
    border-color: #2c3138 !important;
    color: #e5e7eb !important;
  }
}

@keyframes dashboardOverlayFadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* Navbar toggler: icona burger bianca per navbar scura */
.navbar-toggler-icon {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255, 255, 255, 0.8%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e") !important;
}

/* ===== MEDIA QUERY MOBILE (max-width: 767px) ===== */
@media screen and (max-width: 767px) {
  
  /* ===== PREVENZIONE OVERFLOW ORIZZONTALE ===== */
  html,
  body {
    overflow-x: hidden !important;
    max-width: 100vw !important;
    width: 100% !important;
  }
  
  * {
    box-sizing: border-box !important;
  }
  
  /* max-width: 100% per la maggior parte degli elementi, MA NON per tabelle */
  *:not(table):not(thead):not(tbody):not(tr):not(th):not(td):not(.table):not(.table-responsive):not(.table-responsive *) {
    max-width: 100% !important;
  }
  
  /* Elementi che possono causare overflow */
  img,
  video,
  iframe,
  embed,
  object {
    max-width: 100% !important;
    height: auto !important;
  }
  
  /* Tabelle: permettere scroll orizzontale, NON comprimere */
  table,
  .table {
    /* NON impostare max-width: 100% sulle tabelle - serve scroll orizzontale */
    table-layout: auto !important;
  }
  
  /* ===== BODY E LAYOUT GENERALE ===== */
  body {
    padding-top: 0 !important;
    margin-top: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
  
  html {
    margin-top: 0 !important;
    padding-top: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  /* ===== NAVBAR MOBILE ===== */
  .navbar {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    height: 56px !important;
    min-height: 56px !important;
    max-height: 56px !important;
    position: fixed !important;
    top: 0 !important;
    z-index: 1040 !important;
  }
  
  .navbar .container-fluid,
  .navbar .container {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
  }
  
  .navbar-brand,
  .navbar-nav {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
  }
  
  /* Navbar toggler - sempre visibile su mobile */
  .navbar-toggler {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    padding: 0.5rem 0.75rem !important;
    border: none !important;
    background-color: transparent !important;
    min-width: 44px !important;
    min-height: 44px !important;
  }
  
  .navbar-toggler-icon {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
  }
  
  /* Navbar collapse - nascosto di default su mobile */
  .navbar-collapse {
    display: none !important;
  }
  
  .navbar-collapse.show {
    display: block !important;
  }

  /* Sidebar: stili drawer unificati in @media (max-width: 991.98px) */

  /* ===== MAIN CONTENT ===== */
  .main-content,
  body .main-content,
  .wrapper .main-content {
    margin-left: 0 !important;
    margin-top: 0 !important;
    margin-right: 0 !important;
    padding: 15px 10px !important;
    padding-top: 72px !important; /* 56px navbar + 16px spazio */
    padding-left: 10px !important;
    padding-right: 10px !important;
    max-width: 100vw !important;
    width: 100% !important;
    overflow-x: hidden !important;
  }
  
  /* Rimuovi spazio da wrapper */
  .wrapper,
  body .wrapper {
    margin-top: 0 !important;
    padding-top: 0 !important;
    margin-left: 0 !important;
    padding-left: 0 !important;
    margin-right: 0 !important;
    padding-right: 0 !important;
    max-width: 100vw !important;
    width: 100% !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
  }
  
  /* Wrapper con sidebar placeholder */
  .wrapper > #sidebar-placeholder,
  body > div > #sidebar-placeholder {
    position: relative !important;
    height: auto !important;
    max-height: none !important;
  }
  
  /* Fix per div con display flex inline */
  body > div[style*="display: flex"] {
    max-width: 100vw !important;
    width: 100% !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    flex-direction: column !important;
  }
  
  body > div[style*="display: flex"] > #sidebar-placeholder {
    height: auto !important;
    max-height: none !important;
  }
  
  /* Rimuovi spazio da container-custom */
  .container-custom,
  .main-content .container-custom,
  body .container-custom {
    margin-top: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding: 15px 10px !important;
    padding-top: 15px !important;
    padding-left: 10px !important;
    padding-right: 10px !important;
    max-width: 100% !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }
  
  .container-custom > *:first-child,
  .main-content .container-custom > *:first-child {
    margin-top: 0 !important;
    padding-top: 0 !important;
  }
  
  /* Rimuovi spazio da container-fluid */
  .container-fluid,
  .main-content .container-fluid {
    padding-left: 10px !important;
    padding-right: 10px !important;
    padding-top: 0 !important;
    margin-top: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    max-width: 100% !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }
  
  /* Container Bootstrap */
  .container,
  .container-sm,
  .container-md,
  .container-lg,
  .container-xl {
    max-width: 100% !important;
    width: 100% !important;
    padding-left: 10px !important;
    padding-right: 10px !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    box-sizing: border-box !important;
  }
  
  /* Rimuovi spazio da qualsiasi elemento direttamente nel body */
  body > *:not(.navbar):not(#navbar-placeholder) {
    margin-top: 0 !important;
  }
  
  body > *:not(.navbar):not(#navbar-placeholder):first-of-type {
    padding-top: 0 !important;
    margin-top: 0 !important;
  }
  
  #navbar-placeholder {
    margin-top: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    min-height: 0 !important;
    height: 0 !important;
    overflow: visible !important;
  }
  
  #navbar-placeholder > * {
    margin-top: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
  }
  
  /* Override per h2 e headings */
  h2,
  .container-custom h2,
  .main-content h2 {
    margin-top: 0 !important;
    padding-top: 0 !important;
    font-size: 1.25rem !important;
    text-align: left !important;
  }
  
  /* Override per hr */
  hr,
  .container-custom hr {
    margin-top: 1rem !important;
    margin-bottom: 1rem !important;
  }

  .container-fluid {
    padding-left: 10px !important;
    padding-right: 10px !important;
  }

  /* ===== HEADINGS ===== */
  h1, h2, h3, h4, h5, h6 {
    font-size: clamp(1.2rem, 4vw, 1.8rem) !important;
    margin-bottom: 1rem !important;
  }

  h2 {
    text-align: center !important;
    padding: 0 10px !important;
  }

  /* ===== CARD ===== */
  .card {
    margin-bottom: 15px !important;
    border-radius: 8px !important;
  }

  .card-body {
    padding: 15px !important;
  }

  .card-header {
    padding: 12px 15px !important;
    font-size: 0.95rem !important;
  }

  .card-title {
    font-size: 1.1rem !important;
  }

  /* ===== TABELLE ===== */
  .table-responsive {
    margin: 0 -10px !important;
    border-radius: 0 !important;
  }

  .table {
    font-size: 0.85rem !important;
    margin-top: 15px !important;
  }

  .table thead th {
    padding: 10px 8px !important;
    font-size: 0.75rem !important;
    white-space: nowrap;
  }

  .table tbody td {
    padding: 10px 8px !important;
    font-size: 0.85rem !important;
  }

  /* Nascondi colonne meno importanti su mobile */
  .table .d-none-mobile {
    display: none !important;
  }

  /* ===== FORM E INPUT ===== */
  .form-group,
  .mb-3,
  .mb-4 {
    margin-bottom: 1rem !important;
  }

  .form-label {
    font-size: 0.9rem !important;
    margin-bottom: 0.5rem !important;
    font-weight: 500 !important;
  }

  .form-control,
  .form-select {
    padding: 10px 12px !important;
    font-size: 16px !important; /* Previene zoom su iOS */
    border-radius: 6px !important;
  }

  .form-control-sm {
    padding: 8px 10px !important;
    font-size: 14px !important;
  }

  /* Input groups */
  .input-group:not(.prodotti-search-row .input-group) {
    flex-wrap: wrap !important;
  }
  .prodotti-search-row .input-group {
    flex-wrap: nowrap !important;
  }

  .input-group-text {
    padding: 10px 12px !important;
    font-size: 0.9rem !important;
  }

  /* ===== BOTTONI ===== */
  .btn {
    padding: 10px 16px !important;
    font-size: 0.9rem !important;
    min-height: 44px !important; /* Touch-friendly */
    border-radius: 6px !important;
  }

  .btn-sm {
    padding: 8px 12px !important;
    font-size: 0.85rem !important;
    min-height: 38px !important;
  }

  .btn-lg {
    padding: 12px 20px !important;
    font-size: 1rem !important;
    min-height: 48px !important;
  }

  /* Bottoni icona */
  .btn i {
    font-size: 1rem !important;
  }

  /* ===== NAVBAR ===== */
  .navbar {
    padding: 0.5rem 1rem !important;
  }

  .navbar-brand {
    font-size: 1rem !important;
  }

  /* Badge notifiche: più visibile su mobile, posizionato più in basso */
  #notificationBadge {
    min-width: 20px !important;
    min-height: 20px !important;
    padding: 4px 6px !important;
    font-size: 0.75rem !important;
    font-weight: 700 !important;
    line-height: 1 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border: 2px solid white !important;
    box-shadow: 0 1px 3px rgba(0,0,0,0.2);
    transform: translate(-50%, 0) !important;
    top: 70% !important;
    left: 100% !important;
  }

  .navbar-brand span {
    display: none; /* Nascondi testo su mobile molto piccolo */
  }

  @media screen and (max-width: 360px) {
    .navbar-brand i {
      font-size: 1.2rem !important;
    }
  }

  /* ===== MODALI ===== */
  .modal-dialog {
    margin: 0 !important;
    max-width: 100% !important;
    height: 100% !important;
  }

  .modal-content {
    border-radius: 0 !important;
    height: 100% !important;
    border: none !important;
  }

  .modal-header {
    padding: 15px !important;
    border-bottom: 1px solid #dee2e6 !important;
  }

  .modal-title {
    font-size: 1.1rem !important;
  }

  .modal-body {
    padding: 15px !important;
    overflow-y: auto !important;
    max-height: calc(100vh - 120px) !important;
  }

  .modal-footer {
    padding: 15px !important;
    border-top: 1px solid #dee2e6 !important;
    flex-wrap: wrap !important;
    gap: 10px !important;
  }

  .modal-footer .btn {
    flex: 1 1 auto !important;
    min-width: 120px !important;
  }

  /* ===== ALERT ===== */
  .alert {
    padding: 12px 15px !important;
    font-size: 0.9rem !important;
    margin-bottom: 15px !important;
  }

  .alert-dismissible .btn-close {
    padding: 0.75rem !important;
  }

  /* ===== BREADCRUMB ===== */
  .breadcrumb {
    padding: 10px 15px !important;
    font-size: 0.85rem !important;
    margin-bottom: 15px !important;
  }

  .breadcrumb-item {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 150px;
  }

  /* ===== BADGE ===== */
  .badge {
    font-size: 0.75rem !important;
    padding: 4px 8px !important;
  }

  /* ===== DROPDOWN ===== */
  .dropdown-menu {
    max-width: calc(100vw - 20px) !important;
    font-size: 0.9rem !important;
  }

  .dropdown-item {
    padding: 10px 15px !important;
    font-size: 0.9rem !important;
  }

  /* ===== PAGINATION ===== */
  .pagination {
    font-size: 0.85rem !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
  }

  .page-link {
    padding: 8px 12px !important;
    min-width: 44px !important;
    min-height: 44px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  /* ===== SEARCH E FILTER ===== */
  .input-group-search,
  .search-container,
  .filter-container {
    margin-bottom: 15px !important;
  }

  /* ===== TAB NAVIGATION ===== */
  .nav-tabs {
    flex-wrap: wrap !important;
    border-bottom: 2px solid #dee2e6 !important;
  }

  .nav-tabs .nav-link {
    padding: 10px 15px !important;
    font-size: 0.9rem !important;
    min-height: 44px !important;
  }

  /* ===== UTILITY CLASSES ===== */
  .text-mobile-center {
    text-align: center !important;
  }

  .d-mobile-none {
    display: none !important;
  }

  .d-mobile-block {
    display: block !important;
  }

  .w-mobile-100 {
    width: 100% !important;
  }

  .mb-mobile-2 {
    margin-bottom: 1rem !important;
  }

  .p-mobile-2 {
    padding: 1rem !important;
  }

  /* ===== DASHBOARD CARDS (index.html) ===== */
  .dashboard-card {
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    min-height: 0 !important;
    height: 100% !important;
  }
  .dashboard-card .card-body {
    padding: 1.5rem 1rem !important;
  }

  .dashboard-card .card-icon {
    width: 60px !important;
    height: 60px !important;
    margin-bottom: 0.75rem !important;
  }

  .dashboard-card .card-icon i {
    font-size: 1.5rem !important;
  }

  .dashboard-card .card-title {
    font-size: 1rem !important;
  }

  /* ===== OVERLAY ===== */
  .overlay {
    z-index: 1049 !important;
  }

  /* ===== FIX PER ELEMENTI FLOATING ===== */
  .fixed-top,
  .fixed-bottom {
    position: relative !important;
  }

  /* ===== SCROLL SMOOTH ===== */
  html {
    scroll-behavior: smooth;
  }

  /* ===== TOOLTIP E POPOVER ===== */
  .tooltip,
  .popover {
    font-size: 0.85rem !important;
    max-width: 90vw !important;
  }

  /* ===== TABELLE CON AZIONI ===== */
  .table .btn-group {
    flex-direction: column !important;
    gap: 5px !important;
  }

  .table .btn-group .btn {
    width: 100% !important;
    margin: 0 !important;
  }

  /* ===== FIX PER CONTAINER CUSTOM ===== */
  .container-custom {
    padding: 15px 10px !important;
    margin-top: 15px !important;
    border-radius: 8px !important;
  }

  /* ===== SPACING GENERALE ===== */
  .mb-4 {
    margin-bottom: 1.5rem !important;
  }

  .mb-5 {
    margin-bottom: 2rem !important;
  }

  .mt-4 {
    margin-top: 1.5rem !important;
  }

  .mt-5 {
    margin-top: 2rem !important;
  }

  .py-4 {
    padding-top: 1.5rem !important;
    padding-bottom: 1.5rem !important;
  }

  .px-4 {
    padding-left: 1.5rem !important;
    padding-right: 1.5rem !important;
  }

  /* ===== FIX PER FOOTER ===== */
  .footer {
    padding: 15px 10px !important;
    font-size: 0.85rem !important;
  }

  /* ===== COLONNE BOOTSTRAP ===== */
  .row {
    margin-left: -10px !important;
    margin-right: -10px !important;
  }

  .row > * {
    padding-left: 10px !important;
    padding-right: 10px !important;
  }

  /* Forza colonne a full-width su mobile (tranne dove necessario) */
  [class*="col-md"],
  [class*="col-lg"],
  [class*="col-xl"] {
    flex: 0 0 100% !important;
    max-width: 100% !important;
    margin-bottom: 1rem !important;
  }

  /* Colonne small rimangono responsive */
  .col-sm-6 {
    flex: 0 0 50% !important;
    max-width: 50% !important;
  }

  .col-sm-12 {
    flex: 0 0 100% !important;
    max-width: 100% !important;
  }

  /* ===== LIST GROUP ===== */
  .list-group-item {
    padding: 12px 15px !important;
    font-size: 0.9rem !important;
  }

  .list-group-item-action {
    min-height: 44px !important;
  }

  /* ===== ACCORDION ===== */
  .accordion-item {
    margin-bottom: 10px !important;
  }

  .accordion-header button {
    padding: 15px !important;
    font-size: 0.95rem !important;
    min-height: 44px !important;
  }

  .accordion-body {
    padding: 15px !important;
    font-size: 0.9rem !important;
  }

  /* ===== PROGRESS BAR ===== */
  .progress {
    height: 24px !important;
    margin-bottom: 15px !important;
  }

  .progress-bar {
    font-size: 0.85rem !important;
    line-height: 24px !important;
  }

  /* ===== SPINNER ===== */
  .spinner-border,
  .spinner-grow {
    width: 2rem !important;
    height: 2rem !important;
  }

  .spinner-border-sm,
  .spinner-grow-sm {
    width: 1rem !important;
    height: 1rem !important;
  }

  /* ===== BUTTON GROUP ===== */
  .btn-group {
    flex-wrap: wrap !important;
    width: 100% !important;
  }

  .btn-group > .btn {
    flex: 1 1 auto !important;
    min-width: 100px !important;
  }

  .btn-group-vertical {
    width: 100% !important;
  }

  .btn-group-vertical > .btn {
    width: 100% !important;
  }

  /* ===== INPUT GROUP ===== */
  .input-group-text {
    font-size: 0.85rem !important;
    min-width: 40px !important;
    justify-content: center !important;
  }

  .input-group-lg > .form-control,
  .input-group-lg > .input-group-text,
  .input-group-lg > .btn {
    padding: 12px 15px !important;
    font-size: 16px !important;
  }

  /* ===== TAB PANELS ===== */
  .nav-tabs .nav-item {
    flex: 1 1 auto !important;
    min-width: 0 !important;
  }

  .nav-tabs .nav-link {
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    font-size: 0.85rem !important;
  }

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

  /* ===== CARD DECK E GRID ===== */
  .card-deck,
  .card-group {
    flex-direction: column !important;
  }

  .card-deck .card,
  .card-group .card {
    margin-bottom: 15px !important;
  }

  /* ===== FORM ROW ===== */
  .form-row {
    margin-left: -5px !important;
    margin-right: -5px !important;
  }

  .form-row > * {
    padding-left: 5px !important;
    padding-right: 5px !important;
  }

  /* ===== SWITCH E CHECKBOX ===== */
  .form-check-input {
    width: 1.5em !important;
    height: 1.5em !important;
    margin-top: 0.25em !important;
  }

  .form-check-label {
    padding-left: 0.5em !important;
    font-size: 0.9rem !important;
    line-height: 1.75em !important;
  }

  .form-switch .form-check-input {
    width: 2.5em !important;
    height: 1.5em !important;
  }

  /* ===== RANGE INPUT ===== */
  .form-range {
    padding: 10px 0 !important;
  }

  /* ===== FILE INPUT ===== */
  .form-control[type="file"] {
    padding: 8px !important;
    font-size: 0.9rem !important;
  }

  /* ===== SELECT MULTIPLE ===== */
  select[multiple],
  select[size] {
    min-height: 150px !important;
  }

  /* ===== TEXTAREA ===== */
  textarea.form-control {
    min-height: 100px !important;
    resize: vertical !important;
  }

  /* ===== IMAGES ===== */
  img {
    max-width: 100% !important;
    height: auto !important;
  }

  .img-fluid {
    width: 100% !important;
  }

  /* ===== FIGURE ===== */
  figure {
    margin: 15px 0 !important;
  }

  figure img {
    margin-bottom: 10px !important;
  }

  figcaption {
    font-size: 0.85rem !important;
    padding: 0 10px !important;
  }

  /* ===== TABLE SPECIFIC IMPROVEMENTS ===== */
  /* Tabelle scrollabili su mobile - IMPORTANTE: non comprimere troppo */
  .table-responsive {
    display: block !important;
    width: 100% !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }
  
  .table-responsive table,
  .table-responsive .table {
    min-width: 700px !important; /* Min width per scroll orizzontale */
    width: max-content !important;
    table-layout: auto !important;
  }
  
  /* Assicura che le celle della tabella siano visibili */
  .table th,
  .table td {
    max-width: none !important; /* Rimuove il max-width: 100% globale */
    white-space: nowrap !important;
    overflow: visible !important;
  }
  
  /* Descrizione può wrappare */
  .table td:nth-child(2) {
    white-space: normal !important;
    min-width: 150px !important;
    max-width: 250px !important;
  }

  /* Alternative: card layout per tabelle su mobile molto piccolo */
  @media screen and (max-width: 480px) {
    .table-mobile-card {
      display: block !important;
    }

    .table-mobile-card thead {
      display: none !important;
    }

    .table-mobile-card tbody,
    .table-mobile-card tr,
    .table-mobile-card td {
      display: block !important;
      width: 100% !important;
    }

    .table-mobile-card tr {
      border: 1px solid #dee2e6 !important;
      margin-bottom: 15px !important;
      border-radius: 8px !important;
      padding: 10px !important;
      background: var(--card-bg, #fff) !important;
    }

    .table-mobile-card td {
      border: none !important;
      padding: 8px 0 !important;
      text-align: left !important;
    }

    .table-mobile-card td:before {
      content: attr(data-label) ": ";
      font-weight: 600 !important;
      display: inline-block !important;
      min-width: 120px !important;
      color: #6c757d !important;
    }
  }

  /* ===== CUSTOM SCROLLBAR ===== */
  * {
    scrollbar-width: thin !important;
    scrollbar-color: rgba(0, 0, 0, 0.2) transparent !important;
  }

  *::-webkit-scrollbar {
    width: 6px !important;
    height: 6px !important;
  }

  *::-webkit-scrollbar-track {
    background: transparent !important;
  }

  *::-webkit-scrollbar-thumb {
    background-color: rgba(0, 0, 0, 0.2) !important;
    border-radius: 3px !important;
  }

  /* ===== FOCUS STATES (Accessibilità) ===== */
  .btn:focus-visible,
  .form-control:focus-visible,
  .form-select:focus-visible {
    outline: 3px solid #0d6efd !important;
    outline-offset: 2px !important;
  }

  /* ===== TOUCH TARGETS ===== */
  /* Non forzare justify-content:center su link di navigazione (rompe la sidebar) */
  .btn,
  .page-link,
  .list-group-item-action,
  input[type="checkbox"],
  input[type="radio"],
  .form-check-label {
    min-height: 44px !important;
  }

  .btn:not(.d-none):not(.d-md-none):not(.d-sm-none):not(.d-lg-none),
  .page-link:not(.d-none) {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  /* Non annullare le utility Bootstrap di hide/show responsive */
  .d-none,
  .btn.d-none {
    display: none !important;
  }
  /* Sotto md: nascondi ciò che Bootstrap mostrerebbe solo da md in su */
  .d-md-inline-flex,
  .d-md-flex,
  .d-md-block,
  .d-md-inline,
  .d-md-inline-block,
  .btn.d-md-inline-flex,
  .btn.d-md-flex {
    display: none !important;
  }
  /* Testi solo-desktop dentro bottoni */
  .btn .d-none,
  .btn .d-sm-inline,
  .btn .d-md-inline {
    display: none !important;
  }

  .sidebar .nav-link,
  .sidebar .collapsible-link,
  .sidebar .sub-link,
  .offcanvas.sidebar .nav-link,
  .offcanvas.sidebar .collapsible-link,
  .offcanvas.sidebar .sub-link {
    justify-content: flex-start !important;
    text-align: left !important;
  }

  /* ===== UTILITY: STACK VERTICAL ===== */
  .mobile-stack {
    flex-direction: column !important;
  }

  .mobile-stack > * {
    width: 100% !important;
    margin-bottom: 10px !important;
  }

  .mobile-stack > *:last-child {
    margin-bottom: 0 !important;
  }

  /* ===== UTILITY: HIDE ON MOBILE ===== */
  .mobile-hide {
    display: none !important;
  }

  /* ===== UTILITY: SHOW ON MOBILE ===== */
  .mobile-show {
    display: block !important;
  }

  .mobile-show-inline {
    display: inline !important;
  }

  .mobile-show-flex {
    display: flex !important;
  }

  /* ===== PRINT STYLES ===== */
  @media print {
    .sidebar,
    .navbar,
    .btn,
    .modal,
    .overlay {
      display: none !important;
    }

    .main-content {
      margin-left: 0 !important;
      padding: 0 !important;
    }

    .table {
      font-size: 0.8rem !important;
    }
  }
  
  /* ===== REGOLE AGGIUNTIVE PER SOVRASCRIVERE STILI INLINE ===== */
  
  /* d-flex con gap - stack verticale su mobile (escludi toolbar prodotti) */
  .d-flex.gap-2:not(.prodotti-toolbar):not(.prodotti-search-row):not(.prodotti-actions),
  .d-flex.gap-3:not(.prodotti-toolbar):not(.prodotti-search-row):not(.prodotti-actions),
  .d-flex.gap-4:not(.prodotti-toolbar):not(.prodotti-search-row):not(.prodotti-actions) {
    flex-direction: column !important;
    gap: 0.75rem !important;
  }
  
  .d-flex.gap-2:not(.prodotti-toolbar):not(.prodotti-search-row):not(.prodotti-actions) > *,
  .d-flex.gap-3:not(.prodotti-toolbar):not(.prodotti-search-row):not(.prodotti-actions) > *,
  .d-flex.gap-4:not(.prodotti-toolbar):not(.prodotti-search-row):not(.prodotti-actions) > * {
    width: 100% !important;
  }
  
  /* justify-content-between - stack verticale su mobile (non sidebar header / listini head) */
  .d-flex.justify-content-between:not(.offcanvas-header):not(.sidebar-header):not(.listini-page-head):not(.navbar *) {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 1rem !important;
  }
  
  .d-flex.justify-content-between:not(.offcanvas-header):not(.sidebar-header):not(.listini-page-head) > * {
    width: 100% !important;
  }

  /* Header drawer: resta in riga brand | X */
  .sidebar .offcanvas-header.d-flex,
  .offcanvas.sidebar .offcanvas-header.d-flex,
  .sidebar .offcanvas-header.justify-content-between,
  .offcanvas.sidebar .offcanvas-header.justify-content-between {
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 0.75rem !important;
  }
  .sidebar .offcanvas-header > *,
  .offcanvas.sidebar .offcanvas-header > * {
    width: auto !important;
  }
  .sidebar .offcanvas-header .sidebar-header-brand,
  .offcanvas.sidebar .offcanvas-header .sidebar-header-brand,
  #sidebarHeaderBrand {
    flex: 1 1 auto !important;
    width: auto !important;
    max-width: 100% !important;
    display: block !important;
  }
  
  /* Input group - stack verticale su mobile (escludi ricerca prodotti) */
  .input-group:not(.prodotti-search-row .input-group) {
    flex-direction: column !important;
    width: 100% !important;
  }
  
  .input-group:not(.prodotti-search-row .input-group) > * {
    width: 100% !important;
    border-radius: 6px !important;
    margin-bottom: 0.5rem !important;
  }
  
  .input-group:not(.prodotti-search-row .input-group) > *:last-child {
    margin-bottom: 0 !important;
  }

  /* Prodotti: ricerca in riga (non stack) */
  .prodotti-toolbar {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 0.5rem !important;
  }
  .prodotti-toolbar > * {
    width: 100% !important;
  }
  .prodotti-search-row {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: stretch !important;
    gap: 0.4rem !important;
    width: 100% !important;
  }
  .prodotti-search-row > * {
    width: auto !important;
  }
  .prodotti-search-row .input-group {
    display: flex !important;
    flex: 1 1 auto !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    width: auto !important;
    min-width: 0 !important;
    margin: 0 !important;
  }
  .prodotti-search-row .input-group > * {
    width: auto !important;
    margin-bottom: 0 !important;
    border-radius: 0 !important;
  }
  .prodotti-search-row .input-group > .form-control {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    width: auto !important;
    max-width: none !important;
    border-radius: 0.5rem 0 0 0.5rem !important;
    font-size: 16px !important;
    min-height: 44px !important;
  }
  .prodotti-search-row #searchButtonDesktop {
    display: none !important;
  }
  .prodotti-search-row .input-group > .dropdown {
    flex: 0 0 auto !important;
  }
  .prodotti-search-row .input-group > .dropdown > .btn {
    border-radius: 0 0.5rem 0.5rem 0 !important;
    min-height: 44px !important;
    min-width: 44px !important;
  }
  .prodotti-search-row .btn-search-mobile {
    flex: 0 0 44px !important;
    width: 44px !important;
    min-width: 44px !important;
    min-height: 44px !important;
    padding: 0 !important;
    border-radius: 0.5rem !important;
  }
  .prodotti-actions {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 0.45rem !important;
    width: 100% !important;
  }
  .prodotti-actions > * {
    width: 100% !important;
  }
  .prodotti-actions > .btn,
  .prodotti-actions > a.btn {
    min-height: 44px !important;
    justify-content: center !important;
    font-size: 0.875rem !important;
  }
  .prodotti-actions > .btn-add {
    grid-column: 1 / -1;
  }
  
  /* Dropdown - full width su mobile (non nella ricerca prodotti) */
  .dropdown:not(.prodotti-search-row .dropdown) {
    width: 100% !important;
  }
  
  .dropdown-toggle:not(.prodotti-search-row .dropdown-toggle) {
    width: 100% !important;
    justify-content: space-between !important;
  }
  
  .dropdown-menu:not(.prodotti-search-row .dropdown-menu) {
    width: 100% !important;
    max-width: 100% !important;
    left: 0 !important;
    right: 0 !important;
  }

  .prodotti-search-row .dropdown,
  .prodotti-search-row .dropdown-toggle {
    width: auto !important;
  }
  .prodotti-search-row .dropdown-toggle {
    justify-content: center !important;
  }
  
  /* Bottoni - full width quando in container responsive (non toolbar prodotti) */
  .d-flex.gap-2:not(.prodotti-search-row):not(.prodotti-actions) .btn,
  .d-flex.gap-3:not(.prodotti-search-row):not(.prodotti-actions) .btn,
  .d-flex.gap-4:not(.prodotti-search-row):not(.prodotti-actions) .btn,
  .d-flex.justify-content-between:not(.listini-page-head):not(.offcanvas-header) .btn {
    width: 100% !important;
  }
  
  /* Form row - stack verticale (ma NON le griglie dashboard card) */
  .form-row,
  .row.g-2:not(:has(.dashboard-card)),
  .row.g-3:not(:has(.dashboard-card)),
  .row.g-4:not(:has(.dashboard-card)):not([class*="row-cols"]) {
    flex-direction: column !important;
    margin: 0 !important;
  }
  
  .form-row > *,
  .row.g-2:not(:has(.dashboard-card)) > *,
  .row.g-3:not(:has(.dashboard-card)) > *,
  .row.g-4:not(:has(.dashboard-card)):not([class*="row-cols"]) > * {
    width: 100% !important;
    max-width: 100% !important;
    margin-bottom: 1rem !important;
  }
  
  .form-row > *:last-child,
  .row.g-2:not(:has(.dashboard-card)) > *:last-child,
  .row.g-3:not(:has(.dashboard-card)) > *:last-child,
  .row.g-4:not(:has(.dashboard-card)):not([class*="row-cols"]) > *:last-child {
    margin-bottom: 0 !important;
  }

  /* Dashboard cards: almeno 2 per riga su mobile */
  .row:has(> .col .dashboard-card),
  .row[class*="row-cols"]:has(.dashboard-card) {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    margin-left: -0.4rem !important;
    margin-right: -0.4rem !important;
  }
  .row:has(> .col .dashboard-card) > .col,
  .row[class*="row-cols"]:has(.dashboard-card) > .col {
    flex: 0 0 50% !important;
    max-width: 50% !important;
    width: 50% !important;
    margin-bottom: 0.8rem !important;
    padding-left: 0.4rem !important;
    padding-right: 0.4rem !important;
  }
  .row:has(> .col .dashboard-card) .dashboard-card .card-body,
  .row[class*="row-cols"]:has(.dashboard-card) .dashboard-card .card-body {
    padding: 1rem 0.5rem !important;
  }
  .row:has(> .col .dashboard-card) .dashboard-card .card-icon,
  .row[class*="row-cols"]:has(.dashboard-card) .dashboard-card .card-icon {
    width: 48px !important;
    height: 48px !important;
    margin-bottom: 0.5rem !important;
  }
  .row:has(> .col .dashboard-card) .dashboard-card .card-icon i,
  .row[class*="row-cols"]:has(.dashboard-card) .dashboard-card .card-icon i {
    font-size: 1.25rem !important;
  }
  .row:has(> .col .dashboard-card) .dashboard-card .card-title,
  .row[class*="row-cols"]:has(.dashboard-card) .dashboard-card .card-title {
    font-size: 0.85rem !important;
    line-height: 1.25 !important;
    margin: 0 !important;
  }
  
  /* Col colonne - full width su mobile */
  [class*="col-md"],
  [class*="col-lg"],
  [class*="col-xl"] {
    flex: 0 0 100% !important;
    max-width: 100% !important;
    margin-bottom: 1rem !important;
  }
  
  /* Table responsive - migliorato */
  .table-responsive {
    margin: 0 -10px !important;
    border-radius: 0 !important;
    -webkit-overflow-scrolling: touch !important;
  }
  
  /* Card - padding ridotto */
  .card,
  .container-custom .card {
    margin-bottom: 1rem !important;
  }
  
  .card-body,
  .container-custom .card-body {
    padding: 1rem !important;
  }
  
  /* Badge e label - dimensioni ottimizzate */
  .badge,
  .container-custom .badge {
    font-size: 0.75rem !important;
    padding: 0.35em 0.65em !important;
  }
  
  /* Alert - padding ridotto */
  .alert,
  .container-custom .alert {
    padding: 0.75rem 1rem !important;
    font-size: 0.875rem !important;
  }
  
  /* ===== PREVENZIONE OVERFLOW ORIZZONTALE - ELEMENTI SPECIFICI ===== */
  
  /* Row Bootstrap - rimuovi margin negativo */
  .row {
    margin-left: 0 !important;
    margin-right: 0 !important;
    max-width: 100% !important;
  }
  
  .row > * {
    padding-left: 10px !important;
    padding-right: 10px !important;
    max-width: 100% !important;
  }
  
  /* Card - max-width */
  .card,
  .card-body,
  .card-header,
  .card-footer {
    max-width: 100% !important;
    box-sizing: border-box !important;
  }
  
  /* Table responsive - fix overflow */
  .table-responsive {
    max-width: 100% !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
  
  /* NON sovrascrivere min-width della tabella - serve per lo scroll */
  /* .table { min-width: auto !important; } - RIMOSSO: causava tabella invisibile */
  
  /* Form - max-width */
  form,
  .form-group,
  .mb-3,
  .mb-4 {
    max-width: 100% !important;
    box-sizing: border-box !important;
  }
  
  /* Input e select - max-width */
  input,
  textarea,
  select,
  .form-control,
  .form-select {
    max-width: 100% !important;
    box-sizing: border-box !important;
  }
  
  /* Button group - max-width */
  .btn-group,
  .btn-group-vertical {
    max-width: 100% !important;
    flex-wrap: wrap !important;
  }
  
  /* Dropdown - max-width */
  .dropdown-menu {
    max-width: calc(100vw - 20px) !important;
    left: 10px !important;
    right: 10px !important;
  }
  
  /* Modal - max-width */
  .modal,
  .modal-dialog,
  .modal-content {
    max-width: 100vw !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
  
  /* Navbar - max-width */
  .navbar,
  .navbar-brand,
  .navbar-nav,
  .navbar-collapse {
    max-width: 100vw !important;
  }
  
  /* Sidebar width: gestita in @media max 991.98px */
  
  /* Elementi con width fissa - converti in max-width */
  [style*="width"] {
    max-width: 100% !important;
  }
  
  /* Preveni overflow da elementi con min-width */
  [style*="min-width"] {
    min-width: auto !important;
    max-width: 100% !important;
  }
  
  /* Fix per elementi con padding/margin che causano overflow */
  * {
    box-sizing: border-box !important;
  }
  
  /* Assicura che tutti i contenitori rispettino la larghezza */
  div,
  section,
  article,
  aside,
  header,
  footer,
  nav {
    max-width: 100% !important;
    box-sizing: border-box !important;
  }
  
  /* ===== TASK MANAGER SPECIFIC ===== */
  .task-app-container {
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    max-width: 100vw !important;
    width: 100% !important;
    overflow-x: hidden !important;
    height: calc(100vh - 56px) !important;
  }
  
  body.sidebar-collapsed .task-app-container {
    margin-left: 0 !important;
  }
  
  .tm-tabs-bar {
    padding: 0 10px !important;
    height: auto !important;
    min-height: 60px !important;
    flex-wrap: wrap !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }
  
  .tm-tab-item {
    padding: 10px 15px !important;
    font-size: 0.9rem !important;
    min-width: auto !important;
    white-space: nowrap !important;
    flex-shrink: 0 !important;
  }
  
  .tm-user-filter {
    margin-left: 0 !important;
    margin-top: 0.5rem !important;
    width: 100% !important;
    order: 10 !important;
  }
  
  .tm-user-filter select {
    width: 100% !important;
    max-width: 100% !important;
  }
  
  .tm-content-wrapper {
    flex-direction: column !important;
    max-width: 100% !important;
    overflow-x: hidden !important;
  }
  
  .tm-main {
    max-width: 100% !important;
    overflow-x: hidden !important;
  }
  
  .tm-header {
    padding: 15px 10px !important;
    flex-direction: column !important;
    align-items: flex-start !important;
  }
  
  .tm-title {
    font-size: 1.25rem !important;
    margin-bottom: 0.5rem !important;
  }
  
  .tm-task-list {
    padding: 0 10px 20px !important;
    max-width: 100% !important;
    overflow-x: hidden !important;
  }
  
  .tm-add-task {
    flex-wrap: wrap !important;
    padding: 10px !important;
    margin-bottom: 15px !important;
  }
  
  .tm-add-task input {
    width: 100% !important;
    min-width: 0 !important;
    font-size: 1rem !important;
    margin-bottom: 0.5rem !important;
  }
  
  .tm-add-task .tm-assign-btn,
  .tm-add-task select {
    flex: 1 1 auto !important;
    min-width: 120px !important;
    margin-bottom: 0.5rem !important;
  }
  
  .tm-assign-dropdown {
    width: calc(100vw - 20px) !important;
    max-width: 320px !important;
    right: 10px !important;
    left: auto !important;
  }
  
  .tm-task {
    padding: 10px !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
  }
  
  .tm-task-text {
    flex: 1 1 100% !important;
    min-width: 0 !important;
  }
  
  .tm-details {
    width: 100% !important;
    max-width: 100% !important;
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    z-index: 1050 !important;
    height: 100vh !important;
    border-left: none !important;
    box-shadow: none !important;
  }
  
  .tm-details.open {
    display: flex !important;
  }
  
  .tm-project-item {
    margin-bottom: 10px !important;
  }
  
  .tm-project-header {
    padding: 12px 15px !important;
    flex-wrap: wrap !important;
  }
  
  .tm-project-title {
    font-size: 1rem !important;
    flex: 1 1 100% !important;
    margin-top: 0.5rem !important;
  }
  
  .tm-project-tasks {
    padding: 10px 15px !important;
  }
  
  .tm-project-add-task {
    flex-wrap: wrap !important;
    padding: 8px 12px !important;
  }
  
  .tm-project-add-task input {
    width: 100% !important;
    margin-bottom: 0.5rem !important;
  }

}

/* ===== MEDIA QUERY TABLET (768px - 991px) ===== */
@media screen and (min-width: 768px) and (max-width: 991px) {
  
  .main-content {
    padding: 20px 15px !important;
  }

  .table {
    font-size: 0.9rem !important;
  }

  .card-body {
    padding: 20px !important;
  }

  .btn {
    min-height: 42px !important;
  }

  /* Colonne responsive su tablet */
  [class*="col-md"] {
    margin-bottom: 1rem !important;
  }
  
  /* ===== SIDEBAR TABLET: eredita drawer @media 991 ===== */
}

/* ===== MEDIA QUERY LARGE MOBILE (480px - 767px) ===== */
@media screen and (min-width: 480px) and (max-width: 767px) {
  
  /* Padding leggermente più generoso */
  .main-content {
    padding: 20px 15px !important;
  }

  /* Tabelle con font leggermente più grande */
  .table {
    font-size: 0.9rem !important;
  }

  .table thead th {
    font-size: 0.8rem !important;
  }

}

/* ===== MEDIA QUERY EXTRA SMALL (max-width: 479px) ===== */
@media screen and (max-width: 479px) {
  
  /* Layout ancora più compatto */
  .main-content {
    padding: 10px 5px !important;
  }

  .container-fluid {
    padding-left: 5px !important;
    padding-right: 5px !important;
  }

  /* Heading ancora più piccoli */
  h1, h2, h3, h4, h5, h6 {
    font-size: clamp(1rem, 5vw, 1.5rem) !important;
  }

  /* Card padding ridotto */
  .card-body {
    padding: 12px !important;
  }

  /* Bottoni ancora più compatti ma sempre touch-friendly */
  .btn {
    padding: 8px 12px !important;
    font-size: 0.85rem !important;
  }

  /* Tabelle ancora più compatte */
  .table {
    font-size: 0.8rem !important;
  }

  .table thead th {
    padding: 8px 5px !important;
    font-size: 0.7rem !important;
  }

  .table tbody td {
    padding: 8px 5px !important;
    font-size: 0.8rem !important;
  }

  /* Input groups stack completamente */
  .input-group {
    flex-direction: column !important;
  }

  .input-group > * {
    width: 100% !important;
    border-radius: 6px !important;
    margin-bottom: 5px !important;
  }

  .input-group > *:last-child {
    margin-bottom: 0 !important;
  }

  /* Navbar ancora più compatta */
  .navbar {
    padding: 0.5rem 0.75rem !important;
  }

  .navbar-brand {
    font-size: 0.9rem !important;
  }

  /* Modali ancora più full-screen */
  .modal-body {
    padding: 10px !important;
  }

  .modal-header,
  .modal-footer {
    padding: 12px !important;
  }

}

/* ===== ORIENTAZIONE LANDSCAPE MOBILE ===== */
@media screen and (max-width: 991px) and (orientation: landscape) {
  
  /* Riduci padding verticale su landscape */
  .main-content {
    padding-top: 10px !important;
    padding-bottom: 10px !important;
  }

  /* Sidebar landscape: un filo più stretta */
  #sidebarOffcanvas.offcanvas.sidebar,
  .offcanvas.sidebar,
  .sidebar.offcanvas {
    width: min(18rem, calc(100vw - 4rem)) !important;
  }

  /* Modali meno alte su landscape */
  .modal-body {
    max-height: calc(100vh - 100px) !important;
  }

  /* Tabelle con scroll orizzontale più evidente */
  .table-responsive {
    -webkit-overflow-scrolling: touch !important;
    overflow-x: auto !important;
  }

}

/* ===== TOUCH DEVICE SPECIFIC ===== */
@media (hover: none) and (pointer: coarse) {
  
  /* Aumenta aree toccabili su dispositivi touch */
  .btn,
  .nav-link,
  .dropdown-item,
  .page-link,
  .list-group-item-action {
    min-height: 48px !important;
  }

  /* Feedback visivo migliore per touch */
  .btn:active,
  .nav-link:active,
  .dropdown-item:active {
    opacity: 0.7 !important;
    transform: scale(0.98) !important;
    transition: all 0.1s ease !important;
  }

  /* Disabilita hover effects su touch */
  .btn:hover,
  .nav-link:hover {
    transform: none !important;
  }

}

/* ===== UTILITY CLASSES GLOBALI ===== */
/* Classi helper per nascondere/mostrare elementi su mobile */
@media screen and (max-width: 767px) {
  .d-mobile-none {
    display: none !important;
  }
  
  .d-mobile-block {
    display: block !important;
  }
  
  .d-mobile-flex {
    display: flex !important;
  }
  
  .d-mobile-inline {
    display: inline !important;
  }
  
  .d-mobile-inline-block {
    display: inline-block !important;
  }
}

/* Classi per desktop - nascondi su mobile */
@media screen and (max-width: 767px) {
  .d-desktop-block {
    display: none !important;
  }
}

/* ===== FIX PER ZOOM SU INPUT (già gestito ma per sicurezza) ===== */
@media screen and (max-width: 767px) {
  input:not([type="checkbox"]):not([type="radio"]),
  textarea,
  select {
    font-size: 16px !important;
  }
}

/* Lista fornitori: tabella su desktop, card su mobile — evita il doppio elenco */
.table-mobile-view {
  display: none;
}

@media screen and (max-width: 767.98px) {
  .container-custom:has(> #table-mobile-view) {
    display: flex;
    flex-direction: column;
  }

  .container-custom:has(> #table-mobile-view) > .table-responsive {
    display: none;
  }

  #table-mobile-view.table-mobile-view {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    order: 1;
  }

  .container-custom:has(> #table-mobile-view) > .d-flex.justify-content-between.align-items-center.mt-4 {
    order: 2;
  }

  .fornitore-card {
    background: var(--card-bg);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-md);
    padding: 1rem;
    box-shadow: var(--shadow-xs);
    transition: box-shadow var(--transition-fast), border-color var(--transition-fast);
  }

  .fornitore-card:hover,
  .fornitore-card:focus-visible {
    border-color: var(--primary-green);
    box-shadow: var(--shadow-sm);
  }

  .fornitore-card:focus-visible {
    outline: 2px solid var(--primary-green);
    outline-offset: 2px;
  }

  .fornitore-card-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 0.75rem;
    margin-bottom: 0.75rem;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid var(--border-light);
  }

  .fornitore-card-title {
    font-weight: 600;
    font-size: 1.0625rem;
    line-height: 1.3;
    color: var(--dark-text);
    margin: 0;
    flex: 1;
    min-width: 0;
  }

  .fornitore-card-badge {
    flex-shrink: 0;
  }

  .fornitore-card-body {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
  }

  .fornitore-card-row {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    font-size: 0.8125rem;
    line-height: 1.45;
  }

  .fornitore-card-label {
    font-weight: 500;
    color: var(--text-secondary);
    min-width: 5.5rem;
    flex-shrink: 0;
  }

  .fornitore-card-value {
    color: var(--dark-text);
    flex: 1;
    min-width: 0;
    overflow-wrap: anywhere;
  }

  .fornitore-card-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.5rem;
    margin-top: 0.75rem;
    padding-top: 0.75rem;
    border-top: 1px solid var(--border-light);
  }

  .fornitore-card-actions .btn {
    min-height: 44px;
    font-size: 0.8125rem;
  }

  html[data-theme="dark"] .fornitore-card {
    background: #1a1d21;
    border-color: #2c3138;
  }

  html[data-theme="dark"] .fornitore-card-header,
  html[data-theme="dark"] .fornitore-card-actions {
    border-color: #2c3138;
  }

  html[data-theme="dark"] .fornitore-card-title,
  html[data-theme="dark"] .fornitore-card-value {
    color: #e8eaed;
  }

  html[data-theme="dark"] .fornitore-card-label {
    color: #9ca3af;
  }
}

@media (prefers-reduced-motion: reduce) {
  .fornitore-card {
    transition: none;
  }
}

@media print {
  .table-mobile-view {
    display: none !important;
  }

  .container-custom:has(> #table-mobile-view) > .table-responsive {
    display: block !important;
  }
}

/* Dark mode: drawer surface già gestita nel blocco 991.98px */

/* ===== LISTINI: card mobile ===== */
@media screen and (max-width: 767.98px) {
  .listini-page-head {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 0.75rem !important;
  }
  .listini-page-head > * {
    width: 100% !important;
  }
  .listini-btn-nuovo {
    width: 100% !important;
    min-height: 44px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
  }
  .listini-table-wrap {
    display: none !important;
  }
  .listini-cards {
    display: flex !important;
    flex-direction: column;
    gap: 0.75rem;
  }
  .listino-card {
    border: 1px solid var(--border-light, #e5e7eb);
    border-radius: 0.75rem;
    padding: 1rem;
    background: var(--card-bg, #fff);
  }
  .listino-card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin-bottom: 0.75rem;
    padding-bottom: 0.65rem;
    border-bottom: 1px solid var(--border-light, #e5e7eb);
  }
  .listino-card-code {
    font-size: 1.25rem;
    font-weight: 700;
    line-height: 1.2;
    color: var(--dark-text, #111827);
  }
  .listino-card-actions {
    display: flex;
    gap: 0.4rem;
    flex-shrink: 0;
  }
  .listino-card-actions .btn {
    min-width: 44px;
    min-height: 44px;
  }
  .listino-card-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.65rem 0.85rem;
  }
  .listino-card-label {
    display: block;
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--text-secondary, #6b7280);
    margin-bottom: 0.15rem;
  }
  .listino-card-value {
    display: block;
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.3;
    color: var(--dark-text, #111827);
  }
  html[data-theme="dark"] .listino-card {
    background: #1a1d21;
    border-color: #2c3138;
  }
  html[data-theme="dark"] .listino-card-head {
    border-color: #2c3138;
  }
  html[data-theme="dark"] .listino-card-code,
  html[data-theme="dark"] .listino-card-value {
    color: #e8eaed;
  }
  html[data-theme="dark"] .listino-card-label {
    color: #9ca3af;
  }
}
@media screen and (min-width: 768px) {
  .listini-cards {
    display: none !important;
  }
}