/* FARMO Organizer - Mobile first layer */
.mobile-menu-toggle,
.mobile-menu-overlay {
  display: none
}


@media (max-width: 820px) {

  #calendarTechModal .popup-modal-title {
    padding-left: 48px !important;
  }

  /* Header Elenco Assistenze: disponi titolo e bottoni su due righe */
  #ticketsPopupPage .popup-modal-header {
    flex-wrap: wrap !important;
  }

  #ticketsPopupPage .popup-modal-title {
    flex: 1 1 100% !important;
    /* titolo occupa tutta la prima riga */
    font-size: 20px !important;
  }

  #ticketsPopupPage .new-assistance-header-btn {
    flex: 1 1 auto !important;
  }

  #ticketsPopupPage .popup-close-btn {
    flex: 0 0 auto !important;
  }

  /* Nascondi bottone chiudi solo nei popup principali */
  #transferHoursModal .popup-close-btn,
  #machinesPage .popup-close-btn,
  #trafficAccessPopup .popup-close-btn,
  #calendarPage .popup-close-btn,
  #activityBoardPage .popup-close-btn,
  #permissionsPage .popup-close-btn,
  #allActiveTransfersPage .popup-close-btn,
  #ticketsPopupPage .popup-close-btn,
  #usersPage .popup-close-btn {
    display: none !important;
  }

  html,
  body {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden
  }

  body {
    font-size: 15px;
    background: #f6f8fb
  }

  body.mobile-menu-open {
    overflow: hidden
  }

  .mobile-menu-toggle {
    display: inline-flex !important;
    position: fixed;
    left: 12px;
    top: 12px;
    z-index: 16000;
    width: 46px;
    height: 46px;
    border-radius: 14px;
    border: 1px solid #c8d4e5;
    background: #fff;
    color: #082765;
    align-items: center;
    justify-content: center;
    box-shadow: 0 10px 28px rgba(15, 23, 42, .18);
    padding: 0;
    margin: 0
  }

  .mobile-menu-toggle span,
  .mobile-menu-toggle:before,
  .mobile-menu-toggle:after {
    content: "";
    display: block;
    width: 21px;
    height: 2.5px;
    background: currentColor;
    border-radius: 999px;
    position: absolute;
    transition: .18s ease
  }

  .mobile-menu-toggle span {
    top: 22px
  }

  .mobile-menu-toggle:before {
    top: 15px
  }

  .mobile-menu-toggle:after {
    top: 29px
  }

  body.mobile-menu-open .mobile-menu-toggle:before {
    top: 22px;
    transform: rotate(45deg)
  }

  body.mobile-menu-open .mobile-menu-toggle:after {
    top: 22px;
    transform: rotate(-45deg)
  }

  body.mobile-menu-open .mobile-menu-toggle span {
    opacity: 0
  }

  .mobile-menu-overlay {
    display: block;
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, .54);
    z-index: 14990;
    opacity: 0;
    pointer-events: none;
    transition: .18s ease
  }

  body.mobile-menu-open .mobile-menu-overlay {
    opacity: 1;
    pointer-events: auto
  }

  #app {
    min-height: 100vh
  }

  header {
    position: sticky;
    top: 0;
    z-index: 12000;
    padding: 10px 10px 10px 66px !important;
    border-bottom: 1px solid #dbe3ee !important;
    box-shadow: 0 8px 20px rgba(15, 23, 42, .08)
  }

  .topbar {
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 8px !important;
    min-height: 50px
  }

  .brand-logo {
    max-width: calc(100vw - 190px);
    overflow: hidden !important
  }

  .brand-logo-svg {
    width: 210px !important;
    height: 42px !important;
    max-width: 100%
  }

  .header-actions {
    gap: 6px !important;
    flex-wrap: nowrap !important;
    margin-left: auto !important
  }

  .theme-toggle-btn,
  .settings-btn {
    width: 40px !important;
    height: 40px !important;
    min-width: 40px !important;
    border-radius: 12px !important
  }

  #loggedUserLabel {
    height: 40px !important;
    min-height: 40px !important;
    max-width: 118px !important;
    padding: 0 8px !important;
    border-radius: 12px !important;
    border: 1px solid #b9c4d6 !important;
    font-size: 12px !important;
    overflow: hidden !important;
    white-space: nowrap !important
  }

  .user-role-box,
  .user-menu-icons {
    display: none !important
  }

  .logged-user-prefix {
    display: none !important
  }

  .logged-user-name {
    max-width: 92px !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    display: inline-block !important
  }

  .logout-icon-btn {
    width: 40px !important;
    height: 40px !important;
    min-width: 40px !important;
    margin-left: 0 !important;
    border-radius: 12px !important;
    border: 1px solid #b9c4d6 !important
  }

  .logout-icon-btn svg {
    width: 21px !important;
    height: 21px !important
  }

  .user-stats-dropdown {
    position: fixed !important;
    top: 66px !important;
    left: 10px !important;
    right: 10px !important;
    width: auto !important;
    max-width: none !important;
    padding: 12px !important;
    z-index: 17000 !important
  }

  .user-stats-dropdown:before {
    display: none !important
  }

  main {
    padding: 14px 10px 22px !important;
    max-width: 100vw !important;
    overflow: hidden !important
  }

  .toolbar-lock-badge {
    display: none !important
  }

  .toolbar-card {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    bottom: 0 !important;
    width: min(86vw, 340px) !important;
    height: 100vh !important;
    z-index: 15000 !important;
    margin: 0 !important;
    padding: 74px 14px 20px !important;
    border-radius: 0 22px 22px 0 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    transform: translateX(-105%);
    transition: transform .22s ease !important;
    box-shadow: 18px 0 50px rgba(15, 23, 42, .28) !important;
    white-space: normal !important;
    cursor: default !important
  }

  body.mobile-menu-open .toolbar-card {
    transform: translateX(0) !important
  }

  .toolbar-card:before {
    content: "Menu";
    position: absolute;
    left: 68px;
    top: 20px;
    color: #082765;
    font-size: 24px;
    font-weight: 900
  }

  .toolbar-card .primary-action-btn {
    width: 100% !important;
    min-height: 52px !important;
    justify-content: flex-start !important;
    padding: 12px 14px !important;
    border-radius: 14px !important;
    white-space: normal !important;
    flex: 0 0 auto !important;
    font-size: 15px !important;
    text-align: left !important
  }

  .toolbar-card .primary-action-btn span:first-child {
    width: 34px !important;
    height: 34px !important;
    min-width: 34px !important
  }

  /* Fix allineamento "Traffico sito" nel menu mobile */
  #toolbarButtons #openTrafficBtn.primary-action-btn {
    justify-content: flex-start !important;
    text-align: left !important;
    padding: 12px 14px !important;
  }

  #toolbarButtons #openTrafficBtn.primary-action-btn span:first-child {
    width: 34px !important;
    height: 34px !important;
    min-width: 34px !important
  }

  .card,
  main section.card,
  .home-widget,
  .fixed-transfers-widget {
    border-radius: 16px !important;
    padding: 14px !important;
    box-shadow: 0 6px 18px rgba(15, 23, 42, .08) !important;
    max-width: 100% !important;
    overflow: hidden !important
  }

  #ticketsHomeSection {
    padding: 0 !important
  }

  .tickets-list-header,
  .home-widget-header {
    padding: 13px 14px !important;
    align-items: flex-start !important;
    gap: 10px !important
  }

  .tickets-title-row,
  .list-header {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 10px !important
  }

  .section-title,
  .home-widget-title,
  .popup-modal-title {
    font-size: 21px !important;
    line-height: 1.15 !important;
    gap: 10px !important;
    word-break: break-word !important
  }

  .title-icon,
  .home-widget-title-icon {
    width: 38px !important;
    height: 38px !important;
    min-width: 38px !important
  }

  .new-assistance-header-btn {
    width: 100% !important;
    min-height: 46px !important;
    margin: 0 !important;
    border-radius: 14px !important
  }

  .filters,
  .machine-search-filter,
  .activity-sort-box {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 10px !important;
    margin: 12px !important;
    padding: 12px !important;
    min-width: 0 !important
  }

  .filters input,
  .filters select,
  input,
  select,
  textarea {
    min-height: 44px !important;
    font-size: 16px !important
  }

  textarea {
    min-height: 96px !important
  }

  .home-widgets-drop {
    padding: 0 !important;
    margin: 0 0 12px !important;
    border: none !important;
    background: transparent !important;
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 12px !important
  }

  .home-mini-grid,
  .machine-costs-grid,
  .receipt-summary-grid,
  .permissions-buttons-grid {
    grid-template-columns: 1fr !important
  }

  /* Tabelle trasformate in card leggibili */
  table.responsive-card-table,
  .responsive-card-table thead,
  .responsive-card-table tbody,
  .responsive-card-table tr,
  .responsive-card-table th,
  .responsive-card-table td {
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important
  }

  table.responsive-card-table {
    border: none !important;
    background: transparent !important;
    margin: 8px 0 !important;
    overflow: visible !important;
    border-spacing: 0 !important
  }

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

  .responsive-card-table tr {
    background: #fff !important;
    border: none !important;
    border-radius: 16px !important;
    margin: 0 0 12px !important;
    padding: 10px !important;
    box-shadow: 0 2px 8px rgba(15, 23, 42, .10), 0 5px 16px rgba(15, 23, 42, .07) !important;
    overflow: hidden !important
  }

  .responsive-card-table td {
    position: relative !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    justify-content: flex-start !important;
    gap: 6px !important;
    text-align: left !important;
    border: none !important;
    border-bottom: 1px solid #eef2f7 !important;
    background: transparent !important;
    padding: 10px 4px !important;
    font-size: 14px !important;
    white-space: normal !important;
    word-break: break-word !important;
    min-height: 42px !important
  }

  .responsive-card-table td:last-child {
    border-bottom: none !important
  }

  .responsive-card-table td:before {
    content: attr(data-label);
    font-weight: 900;
    color: #082765;
    text-align: left;
    flex: none;
    width: 100%;
    max-width: none;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: .2px;
    line-height: 1.25
  }

  .responsive-card-table td>* {
    max-width: 100%;
    width: 100%
  }

  .responsive-card-table .actions,
  .responsive-card-table .users-role-actions,
  .responsive-card-table .activity-actions,
  .responsive-card-table .machine-file-actions {
    justify-content: flex-start !important;
    min-height: 0 !important;
    flex-wrap: wrap !important
  }

  .responsive-card-table .description-cell {
    display: block !important;
    max-height: none !important;
    -webkit-line-clamp: unset !important;
    line-clamp: unset !important
  }

  .machine-folders-table,
  .activity-table,
  .users-role-table,
  .machine-files-table,
  .permissions-groups-table {
    min-width: 0 !important;
    width: 100% !important;
    table-layout: auto !important
  }

  .main-tickets-table,
  .main-tickets-unified-table,
  .main-ticket-inner-table {
    min-width: 0 !important;
    width: 100% !important;
    table-layout: auto !important;
  }

  #popupTicketContainer,
  .home-widget-body,
  .machine-folder-content {
    overflow-x: hidden !important;
    width: 100% !important;
    max-width: 100% !important
  }

  #ticketContainer,
  .ticket-section-body {
    overflow-x: hidden !important;
    width: 100% !important;
    max-width: 100% !important;
    -webkit-overflow-scrolling: touch;
  }

  .modal-backdrop {
    padding: 0 !important;
    align-items: stretch !important;
    justify-content: stretch !important;
    overflow: hidden !important;
    z-index: 12500 !important
  }

  /* FIX: Popup Orari/Scontrini devono apparire sopra la pagina Spese/Ore trasferta.
     La regola generica .modal-backdrop (z-index:12500) sovrascrive gli z-index specifici
     di app.css, e poiché #allActiveTransfersPage è dopo nel DOM, copre i popup. */
  #transferHoursModal.modal-backdrop {
    z-index: 12600 !important
  }

  #transferReceiptsModal.modal-backdrop {
    z-index: 12700 !important
  }

  #receiptCameraModal.modal-backdrop {
    z-index: 12800 !important
  }

  #deleteReceiptConfirmModal.modal-backdrop {
    z-index: 12900 !important
  }

  #fileViewerModal.modal-backdrop {
    z-index: 13000 !important
  }

  .modal,
  .modal-popup-style,
  .ticket-modal,
  #ticketPage .modal-popup-style,
  #machinesPage .modal-popup-style,
  #machineDetailModal .modal-popup-style,
  #usersPage .modal-popup-style,
  #schedulePickerModal .modal-popup-style,
  #transferReceiptsModal .modal-popup-style,
  .transfer-hours-popup,
  #ticketsPopupPage .modal-popup-style,
  .all-active-transfers-modal {
    width: 100vw !important;
    min-width: 0 !important;
    max-width: 100vw !important;
    height: 100dvh !important;
    max-height: 100dvh !important;
    border-radius: 0 !important;
    overflow: hidden !important
  }

  #activityBoardPage .modal-popup-style,
  #permissionsPage .modal-popup-style,
  #calendarPage .modal-popup-style,
  #calendarTechModal .modal-popup-style {
    width: 100vw !important;
    min-width: 0 !important;
    max-width: 100vw !important;
    height: 100dvh !important;
    max-height: 100dvh !important;
    border-radius: 0 !important;
    overflow: hidden !important
  }

  .popup-modal-header {
    position: sticky !important;
    top: 0 !important;
    z-index: 10 !important;
    padding: 12px 14px !important;
    min-width: 0 !important;
    width: 100% !important;
    align-items: center !important
  }

  .popup-modal-body,
  .modal-popup-style .popup-modal-body,
  #machinesPage .popup-modal-body,
  #machineDetailModal .popup-modal-body,
  #schedulePickerModal .popup-modal-body,
  #transferReceiptsModal .popup-modal-body {
    width: 100% !important;
    max-width: 100% !important;
    height: calc(100dvh - 64px) !important;
    max-height: calc(100dvh - 64px) !important;
    overflow: auto !important;
    padding: 12px !important;
    min-height: 0 !important
  }

  /* usersPage: il modal ha header + user-create-wrapper + body,
     quindi usiamo flex invece di calc fisso */
  #usersPage .modal-popup-style {
    display: flex !important;
    flex-direction: column !important;
  }

  #usersPage .user-create-wrapper {
    flex: 0 1 auto !important;
    min-height: 0 !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    max-height: 55vh !important;
  }

  #usersPage .user-create-wrapper.collapsed {
    max-height: none !important;
    overflow: hidden !important;
  }

  #usersPage .popup-modal-body {
    width: 100% !important;
    max-width: 100% !important;
    flex: 1 1 auto !important;
    height: auto !important;
    max-height: none !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    padding: 12px !important;
    min-height: 0 !important;
  }

  #ticketsPopupPage .popup-modal-body {
    width: 100% !important;
    max-width: 100% !important;
    height: calc(100dvh - 112px) !important;
    max-height: calc(100dvh - 112px) !important;
    overflow: auto !important;
    padding: 12px !important;
    min-height: 0 !important
  }

  .popup-close-btn {
    min-width: 44px !important;
    height: 44px !important;
    border-radius: 14px !important
  }

  form,
  .ticket-form-grid,
  .home-user-form-card form,
  #usersPage #userForm,
  .activity-grid-form,
  .permissions-create-group,
  .machine-custom-file-row,
  .schedule-row,
  .ticket-modal .schedule-row {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 12px !important;
    width: 100% !important;
    max-width: 100% !important
  }

  .full-row,
  .user-form-actions,
  .activity-form-actions {
    grid-column: 1/-1 !important
  }

  .user-form-actions,
  .activity-form-actions,
  .modal-actions {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 10px !important
  }

  form button,
  .activity-form-submit,
  .activity-cancel-edit-btn,
  #usersPage #userSubmitBtn,
  #usersPage #cancelUserEditBtn {
    width: 100% !important;
    min-height: 48px !important
  }

  .assigned-users-box,
  .activity-assigned-users-box {
    grid-template-columns: 1fr !important;
    max-height: 260px !important
  }

  .calendar-toolbar-centered,
  .home-calendar-toolbar {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 10px !important;
    text-align: center !important
  }

  .calendar-filter-box {
    justify-content: space-between !important;
    width: 100% !important
  }

  .calendar-filter-box select {
    width: 160px !important
  }

  .calendar-month-nav {
    width: 100% !important;
    justify-content: space-between !important;
    border-radius: 16px !important
  }

  .calendar-grid,
  .schedule-calendar-grid {
    grid-template-columns: repeat(7, minmax(36px, 1fr)) !important;
    gap: 4px !important
  }

  .calendar-day,
  .schedule-day {
    min-height: 58px !important;
    padding: 5px !important;
    border-radius: 9px !important;
    font-size: 12px !important
  }

  .calendar-ticket {
    font-size: 9px !important;
    padding: 2px 3px !important;
    max-width: 100% !important
  }

  .calendar-day-name,
  .schedule-day-name {
    font-size: 11px !important;
    padding: 6px 2px !important
  }

  .fixed-transfers-header {
    flex-direction: row !important;
    align-items: center !important;
    padding: 14px !important
  }

  .fixed-transfer-columns,
  .all-active-transfer-columns {
    display: none !important
  }

  .fixed-transfer-row,
  .all-active-transfer-row,
  .all-transfer-main,
  .all-transfer-user-row {
    display: grid !important;
    grid-template-columns: 1fr !important;
    min-width: 0 !important;
    gap: 8px !important;
    padding: 12px !important
  }

  .fixed-transfer-row>div,
  .all-active-transfer-row>div,
  .all-transfer-main>div {
    border-left: none !important;
    border-right: none !important;
    border-bottom: 1px solid #e5edf8 !important;
    padding: 8px 0 !important;
    justify-content: flex-start !important;
    text-align: left !important
  }

  .fixed-transfer-row>div:last-child,
  .all-active-transfer-row>div:last-child,
  .all-transfer-main>div:last-child {
    border-bottom: none !important
  }

  body.dark-mode .mobile-menu-toggle {
    background: #111827;
    color: #dbeafe;
    border-color: #374151
  }

  body.dark-mode .toolbar-card:before {
    color: #dbeafe
  }

  body.dark-mode .responsive-card-table tr {
    background: #0f172a !important;
    border: none !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, .30), 0 5px 16px rgba(0, 0, 0, .20) !important
  }

  body.dark-mode .responsive-card-table td {
    border-bottom-color: #374151 !important;
    color: #e5e7eb !important
  }

  body.dark-mode .responsive-card-table td:before {
    color: #93c5fd !important
  }

  /* Traffico sito - tabella a card su mobile */
  .traffic-access-table {
    table-layout: auto !important
  }

  .traffic-access-table thead {
    display: none !important
  }

  .traffic-access-table tbody,
  .traffic-access-table tr {
    display: block !important;
    width: 100% !important
  }

  .traffic-access-table tr {
    background: #fff !important;
    border: 1px solid #e5e7eb !important;
    border-radius: 12px !important;
    margin-bottom: 10px !important;
    padding: 4px 0 !important;
    box-shadow: 0 2px 8px rgba(15, 23, 42, .06) !important
  }

  .traffic-access-table td {
    display: flex !important;
    align-items: flex-start !important;
    gap: 8px !important;
    width: 100% !important;
    padding: 9px 14px !important;
    border-bottom: 1px solid #f1f5f9 !important;
    word-break: break-word !important;
    box-sizing: border-box !important
  }

  .traffic-access-table tr td:last-child {
    border-bottom: none !important
  }

  .traffic-access-table td::before {
    content: attr(data-label);
    min-width: 80px !important;
    flex-shrink: 0 !important;
    font-size: 11px !important;
    font-weight: 800 !important;
    text-transform: uppercase !important;
    letter-spacing: .4px !important;
    color: #082765 !important;
    padding-top: 2px !important
  }

  .traffic-access-table td:nth-child(1)::before {
    content: "Data / Ora"
  }

  .traffic-access-table td:nth-child(2)::before {
    content: "Utente"
  }

  .traffic-access-table td:nth-child(3)::before {
    content: "IP"
  }

  .traffic-access-table td:nth-child(4)::before {
    content: "Locazione"
  }

  .traffic-access-table th:nth-child(1),
  .traffic-access-table td:nth-child(1),
  .traffic-access-table th:nth-child(2),
  .traffic-access-table td:nth-child(2),
  .traffic-access-table th:nth-child(3),
  .traffic-access-table td:nth-child(3),
  .traffic-access-table th:nth-child(4),
  .traffic-access-table td:nth-child(4) {
    width: 100% !important
  }

  .traffic-access-modal {
    width: 100vw !important;
    max-width: 100vw !important;
    border-radius: 0 !important
  }

  body.dark-mode .traffic-access-table tr {
    background: #0f172a !important;
    border-color: #374151 !important;
    box-shadow: none !important
  }

  body.dark-mode .traffic-access-table td {
    border-bottom-color: #1e293b !important
  }

  body.dark-mode .traffic-access-table td::before {
    color: #93c5fd !important
  }

  #ticketPage .modal {
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
  }

  #ticketPage .popup-modal-header {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    z-index: 13000 !important;
  }

  #ticketPage .popup-modal-title {
    padding-left: 60px !important;
  }

  #ticketPage .popup-modal-body {
    flex: 1 1 auto !important;
    overflow-y: auto !important;
    height: auto !important;
    max-height: none !important;
    padding-top: 64px !important;
  }

  #transferReceiptsModal .popup-modal-header {
    position: fixed !important;
    top: 71px !important;
    left: 0 !important;
    right: 0 !important;
    z-index: 10100 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    width: 100% !important;
    padding: 12px 14px !important;
    background: var(--card-bg, #1f2937) !important;
  }

  #transferReceiptsModal .popup-modal-body {
    position: absolute !important;
    top: 141px !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    height: auto !important;
    max-height: none !important;
    overflow-y: auto !important;
    width: 100% !important;
    max-width: 100% !important;
    padding: 12px !important;
  }

  #transferReceiptsModal .modal {
    position: relative !important;
    overflow: hidden !important;
  }

  .main-tickets-unified-table col,
  .main-ticket-inner-table col {
    width: auto !important;
  }

  .main-ticket-unified-row {
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  .tickets-list-header+.filters+#ticketContainer,
  .tickets-list-header+.filters+#popupTicketContainer {
    padding: 0 !important;
  }

  #homeWidgets.tickets-visible,
  .home-widgets-drop.tickets-visible {
    display: block !important;
  }

  /* ===== FIX Elenco Assistenze su mobile (spostato da 420px a 820px) ===== */

  /* 1. La section.card non deve tagliare il contenuto ticket */
  #ticketsHomeSection.card {
    overflow: visible !important;
  }

  /* outer wrapper ora è un div */
  .main-tickets-unified-table {
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
  }

  .main-ticket-unified-row {
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    margin-bottom: 12px !important;
  }

  .main-ticket-unified-cell {
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
  }

  .main-ticket-unified-box {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
  }

  .main-ticket-inner-table {
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
  }

  .main-ticket-inner-table col {
    width: auto !important;
  }

  .main-ticket-inner-table tbody {
    display: block !important;
    width: 100% !important;
  }

  .main-ticket-inner-table .main-ticket-row {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    min-width: 0 !important;
    grid-template-columns: none !important;
  }

  .main-ticket-inner-table td,
  .main-ticket-cell {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
    padding: 8px 4px !important;
    border-bottom: 1px solid #eef2f7 !important;
    max-width: 100% !important;
    text-align: left !important;
  }

  .main-ticket-inner-table td:last-child,
  .main-ticket-cell:last-child {
    border-bottom: none !important;
  }

  .main-ticket-inner-table td::before,
  .main-ticket-cell::before {
    content: attr(data-label) !important;
    font-size: 11px !important;
    font-weight: 900 !important;
    text-transform: uppercase !important;
    color: #64748b !important;
    margin-bottom: 4px !important;
    display: block !important;
  }

  .main-tickets-table .main-tickets-header-row {
    display: none !important;
  }

  .main-ticket-cell .priority-badge,
  .main-ticket-cell .badge,
  .main-ticket-cell .subscription-token,
  .main-ticket-cell .subscription-label {
    max-width: 100% !important;
    white-space: normal !important;
    text-align: center !important;
  }
}

@media (max-width: 420px) {
  .brand-logo-svg {
    width: 170px !important
  }

  .header-actions {
    gap: 4px !important
  }

  #loggedUserLabel {
    max-width: 82px !important
  }

  .logged-user-name {
    max-width: 64px !important
  }

  .section-title,
  .home-widget-title,
  .popup-modal-title {
    font-size: 18px !important
  }

  .toolbar-card {
    width: 90vw !important
  }

  .responsive-card-table td {
    flex-direction: column !important;
    text-align: left !important;
    gap: 5px !important
  }

  .responsive-card-table td:before {
    max-width: none !important;
    flex: auto !important
  }

  .responsive-card-table td>* {
    max-width: 100% !important
  }

  /* 9. Se #ticketsHomeSection è dentro #homeWidgets grid, deve occupare tutta la riga */
  #ticketsHomeSection {
    grid-column: 1 / -1 !important;
    min-width: 0 !important;
    width: 100% !important;
  }

  /* 10. Rimuovi il padding dalla catena che restringe */
  .tickets-list-header+.filters+#ticketContainer,
  .tickets-list-header+.filters+#popupTicketContainer {
    padding: 0 !important;
  }

  /* === UTENTI: tabella → card mobile (come elenco assistenze) === */
  #usersPage .users-role-table,
  #usersPage .users-role-table thead,
  #usersPage .users-role-table tbody,
  #usersPage .users-role-table tr,
  #usersPage .users-role-table th,
  #usersPage .users-role-table td {
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
  }

  #usersPage .users-role-table {
    border: none !important;
    background: transparent !important;
    margin: 8px 0 !important;
    overflow: visible !important;
    border-spacing: 0 !important;
    table-layout: auto !important;
  }

  #usersPage .users-role-table thead {
    display: none !important;
  }

  #usersPage .users-role-table tr {
    background: #fff !important;
    border: none !important;
    border-radius: 16px !important;
    margin: 0 0 12px !important;
    padding: 0 !important;
    box-shadow: 0 2px 8px rgba(15, 23, 42, .10), 0 5px 16px rgba(15, 23, 42, .07) !important;
    overflow: hidden !important;
  }

  body.dark-mode #usersPage .users-role-table tr {
    background: #111827 !important;
    border: none !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, .30), 0 5px 16px rgba(0, 0, 0, .20) !important;
  }

  #usersPage .users-role-table td,
  #usersPage .users-role-table td:first-child,
  #usersPage .users-role-table td:last-child {
    position: relative !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    justify-content: flex-start !important;
    gap: 6px !important;
    text-align: left !important;
    border: none !important;
    border-bottom: 1px solid #eef2f7 !important;
    background: transparent !important;
    padding: 10px 12px !important;
    font-size: 14px !important;
    white-space: normal !important;
    word-break: break-word !important;
    min-height: 42px !important;
    width: 100% !important;
  }

  #usersPage .users-role-table td:last-child {
    border-bottom: none !important;
  }

  body.dark-mode #usersPage .users-role-table td,
  body.dark-mode #usersPage .users-role-table td:first-child,
  body.dark-mode #usersPage .users-role-table td:last-child {
    background: transparent !important;
    border-bottom-color: #374151 !important;
    color: #e5e7eb !important;
  }

  body.dark-mode #usersPage .users-role-table td:last-child {
    border-bottom: none !important;
  }

  #usersPage .users-role-table td::before {
    content: attr(data-label);
    font-weight: 900;
    color: #082765;
    text-align: left;
    flex: none;
    width: 100%;
    max-width: none;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: .2px;
    line-height: 1.25;
  }

  body.dark-mode #usersPage .users-role-table td::before {
    color: #7eb3ff;
  }

  #usersPage .users-role-table td>* {
    max-width: 100%;
    width: 100%;
  }

  #usersPage .users-role-table .users-role-actions {
    justify-content: flex-start !important;
    min-height: 0 !important;
    flex-wrap: wrap !important;
  }

  #usersPage .users-role-table .user-permissions-list {
    justify-content: flex-start !important;
  }

  div#machineDetailModalBox {
    max-height: none !important;
    height: 100dvh !important;
    overflow: hidden !important;
    display: flex !important;
    flex-direction: column !important;
  }

  body div#machineDetailModal .modal .popup-modal-header {
    position: fixed !important;
    top: 71px !important;
    left: 0 !important;
    right: 0 !important;
    z-index: 13000 !important;
    background: #f4f7fb !important;
  }

  body.dark-mode div#machineDetailModal .modal .popup-modal-header {
    background: #1f2937 !important;
  }

  div#machineDetailModal .modal .popup-modal-body {
    flex: 1 1 auto !important;
    overflow-y: auto !important;
    height: auto !important;
    max-height: none !important;
    padding-top: 80px !important;
  }
}