/* ======================================================================
   FARMO ORGANIZER — UNIFIED ASSISTANCE CARDS V6
   Tutte le viste principali adottano la stessa grammatica grafica
   dell'Elenco Assistenze: riquadro bianco, fascia primary #061b49,
   campi ordinati, separatori leggeri, azioni coerenti e resa mobile-first.
   Caricato dopo farmo-wow.css per normalizzare il CSS legacy.
   ====================================================================== */

:root{
  --fo-card-band:#061b49;
  --fo-card-band-hover:#0a2a63;
  --fo-card-border:#dbe3ee;
  --fo-card-divider:#e8edf4;
  --fo-card-bg:#ffffff;
  --fo-card-soft:#f5f8fc;
  --fo-card-text:#061b49;
  --fo-card-muted:#64748b;
  --fo-card-radius:12px;
  --fo-card-band-radius:7px;
  --fo-card-shadow:0 4px 14px rgba(6,27,73,.055);
}

/* ----------------------------------------------------------------------
   1. Regole comuni: ogni vista si comporta come una scheda operativa
   ---------------------------------------------------------------------- */
body.fo-app-mode #appContent .fo-app-view .popup-modal-body,
body.fo-app-mode #appContent .fo-app-view .ticket-modal-body,
body.fo-app-mode #appContent .fo-app-view .all-active-transfers-body,
body.fo-app-mode #appContent .fo-app-view .fo-view-body{
  width:100%!important;
  min-width:0!important;
}

body.fo-app-mode #appContent .fo-app-view :where(
  .card,
  .activity-form-box,
  .machine-create-box,
  .user-create-wrapper,
  .permissions-create-box,
  .planning-orders-panel,
  .planning-grid,
  .all-transfer-section,
  .fo-data-surface,
  .machine-edit-panel,
  .task-hours-pending-row,
  .receipt-summary-card,
  .stats-section-box
){
  border:1px solid var(--fo-card-border)!important;
  border-radius:var(--fo-card-radius)!important;
  background:var(--fo-card-bg)!important;
  box-shadow:var(--fo-card-shadow)!important;
}

/* I contenitori già usati come semplici wrapper non devono creare un doppio bordo. */
body.fo-app-mode #machinesPage .popup-modal-body>.card,
body.fo-app-mode #ticketsPopupPage .popup-modal-body>.card{
  border:0!important;
  background:transparent!important;
  box-shadow:none!important;
  padding:0!important;
}

/* Form, filtri e barre operative: stesso riquadro chiaro dell'Elenco Assistenze. */
body.fo-app-mode #appContent :where(
  .filters,
  .resource-planning-toolbar,
  .all-active-transfers-toolbar,
  .users-search-box,
  .customer-list-summary,
  #calendarPage .popup-modal-body>div:first-child,
  .task-board-toolbar,
  .task-home-intro,
  .fo-section-intro
){
  width:100%!important;
  margin:0 0 14px!important;
  padding:12px 14px!important;
  border:1px solid var(--fo-card-border)!important;
  border-radius:var(--fo-card-radius)!important;
  background:var(--fo-card-soft)!important;
  box-shadow:none!important;
}

/* Header interni: replica la fascia primary sottile delle righe assistenza. */
body.fo-app-mode #appContent :where(
  .activity-form-header,
  .machine-create-header,
  .user-create-header,
  .permissions-create-header,
  .users-role-title,
  .all-transfer-section-header,
  .activity-table-header,
  .machine-cost-group-header
){
  min-height:44px!important;
  margin:8px 10px 0!important;
  padding:8px 11px!important;
  display:flex!important;
  align-items:center!important;
  justify-content:space-between!important;
  gap:10px!important;
  border:0!important;
  border-radius:var(--fo-card-band-radius)!important;
  background:var(--fo-card-band)!important;
  color:#fff!important;
  box-shadow:none!important;
}

body.fo-app-mode #appContent :where(
  .activity-form-header,
  .machine-create-header,
  .user-create-header,
  .permissions-create-header,
  .users-role-title,
  .all-transfer-section-header,
  .activity-table-header,
  .machine-cost-group-header
) :where(h2,h3,strong,span,label){
  color:#fff!important;
}

body.fo-app-mode #appContent :where(
  .activity-form-title-with-icon,
  .machine-create-title,
  .user-create-title,
  .permissions-create-title,
  .activity-table-title,
  .all-transfer-section-header h3
){
  margin:0!important;
  color:#fff!important;
  font-size:14px!important;
  font-weight:900!important;
  letter-spacing:-.01em!important;
}

/* Icone degli header uniformi e senza riquadri discordanti. */
body.fo-app-mode #appContent :where(
  .activity-create-icon,
  .machine-create-folder-icon,
  .user-create-icon,
  .permissions-create-icon,
  .title-icon
){
  width:28px!important;
  height:28px!important;
  min-width:28px!important;
  display:grid!important;
  place-items:center!important;
  border:1px solid rgba(255,255,255,.18)!important;
  border-radius:8px!important;
  background:rgba(255,255,255,.10)!important;
  box-shadow:none!important;
  color:#fff!important;
}
body.fo-app-mode #appContent :where(
  .activity-create-icon,
  .machine-create-folder-icon,
  .user-create-icon,
  .permissions-create-icon,
  .title-icon
) svg{
  width:17px!important;
  height:17px!important;
  stroke:#fff!important;
}

/* Toggle su fascia blu. */
body.fo-app-mode #appContent :where(
  .activity-form-toggle,
  .machine-create-toggle,
  .user-create-toggle,
  .permissions-create-toggle
){
  width:32px!important;
  height:32px!important;
  min-width:32px!important;
  border:1px solid rgba(255,255,255,.22)!important;
  border-radius:8px!important;
  background:rgba(255,255,255,.10)!important;
  color:#fff!important;
  box-shadow:none!important;
}

/* Corpi dei pannelli di creazione. */
body.fo-app-mode #appContent :where(
  .activity-form-body,
  .machine-create-body,
  .permissions-create-body
){
  padding:12px 10px 10px!important;
}
body.fo-app-mode #usersPage .user-create-wrapper>form{
  padding:14px 10px 10px!important;
}

/* ----------------------------------------------------------------------
   2. Tabelle: righe a scheda come nell'Elenco Assistenze
   ---------------------------------------------------------------------- */
body.fo-app-mode #appContent :where(
  .activity-table,
  .users-role-table,
  .permissions-groups-table,
  .traffic-access-table,
  .customer-machines-table,
  .machine-files-table,
  .machine-external-combined-table,
  .machine-external-hours-table
){
  width:100%!important;
  border-collapse:separate!important;
  border-spacing:0 9px!important;
  padding:0 10px 10px!important;
  background:transparent!important;
}

body.fo-app-mode #appContent :where(
  .activity-table,
  .users-role-table,
  .permissions-groups-table,
  .traffic-access-table,
  .customer-machines-table,
  .machine-files-table,
  .machine-external-combined-table,
  .machine-external-hours-table
) thead th{
  height:42px!important;
  padding:9px 12px!important;
  border-top:1px solid var(--fo-card-border)!important;
  border-bottom:1px solid var(--fo-card-border)!important;
  border-right:1px solid var(--fo-card-divider)!important;
  background:#f1f5f9!important;
  color:#526176!important;
  font-size:10.5px!important;
  font-weight:900!important;
  letter-spacing:.055em!important;
  text-transform:uppercase!important;
}
body.fo-app-mode #appContent :where(
  .activity-table,
  .users-role-table,
  .permissions-groups-table,
  .traffic-access-table,
  .customer-machines-table,
  .machine-files-table,
  .machine-external-combined-table,
  .machine-external-hours-table
) thead th:first-child{
  border-left:1px solid var(--fo-card-border)!important;
  border-radius:9px 0 0 9px!important;
}
body.fo-app-mode #appContent :where(
  .activity-table,
  .users-role-table,
  .permissions-groups-table,
  .traffic-access-table,
  .customer-machines-table,
  .machine-files-table,
  .machine-external-combined-table,
  .machine-external-hours-table
) thead th:last-child{
  border-right:1px solid var(--fo-card-border)!important;
  border-radius:0 9px 9px 0!important;
}

body.fo-app-mode #appContent :where(
  .activity-table,
  .users-role-table,
  .permissions-groups-table,
  .traffic-access-table,
  .customer-machines-table,
  .machine-files-table,
  .machine-external-combined-table,
  .machine-external-hours-table
) tbody tr{
  filter:drop-shadow(0 3px 8px rgba(6,27,73,.035));
}
body.fo-app-mode #appContent :where(
  .activity-table,
  .users-role-table,
  .permissions-groups-table,
  .traffic-access-table,
  .customer-machines-table,
  .machine-files-table,
  .machine-external-combined-table,
  .machine-external-hours-table
) tbody td{
  padding:12px!important;
  border-top:1px solid var(--fo-card-border)!important;
  border-bottom:1px solid var(--fo-card-border)!important;
  border-right:1px solid var(--fo-card-divider)!important;
  background:#fff!important;
  color:#26364c!important;
  vertical-align:middle!important;
}
body.fo-app-mode #appContent :where(
  .activity-table,
  .users-role-table,
  .permissions-groups-table,
  .traffic-access-table,
  .customer-machines-table,
  .machine-files-table,
  .machine-external-combined-table,
  .machine-external-hours-table
) tbody td:first-child{
  border-left:1px solid var(--fo-card-border)!important;
  border-radius:var(--fo-card-radius) 0 0 var(--fo-card-radius)!important;
  box-shadow:inset 5px 0 0 var(--fo-card-band)!important;
}
body.fo-app-mode #appContent :where(
  .activity-table,
  .users-role-table,
  .permissions-groups-table,
  .traffic-access-table,
  .customer-machines-table,
  .machine-files-table,
  .machine-external-combined-table,
  .machine-external-hours-table
) tbody td:last-child{
  border-right:1px solid var(--fo-card-border)!important;
  border-radius:0 var(--fo-card-radius) var(--fo-card-radius) 0!important;
}
body.fo-app-mode #appContent :where(
  .activity-table,
  .users-role-table,
  .permissions-groups-table,
  .traffic-access-table,
  .customer-machines-table,
  .machine-files-table,
  .machine-external-combined-table,
  .machine-external-hours-table
) tbody tr:hover td{
  background:#fbfdff!important;
}

/* ----------------------------------------------------------------------
   3. Clienti: ogni cliente riprende esattamente fascia + corpo + azioni
   ---------------------------------------------------------------------- */
body.fo-app-mode .customer-list-grid{
  display:grid!important;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,360px),1fr))!important;
  gap:12px!important;
  margin-top:12px!important;
}
body.fo-app-mode .customer-list-card{
  min-width:0!important;
  padding:8px 10px 10px!important;
  overflow:hidden!important;
  border:1px solid var(--fo-card-border)!important;
  border-radius:var(--fo-card-radius)!important;
  background:#fff!important;
  box-shadow:var(--fo-card-shadow)!important;
}
body.fo-app-mode .customer-list-card-head{
  min-height:54px!important;
  margin:0!important;
  padding:9px 10px!important;
  display:flex!important;
  align-items:center!important;
  justify-content:space-between!important;
  gap:10px!important;
  border-radius:var(--fo-card-band-radius)!important;
  background:var(--fo-card-band)!important;
  color:#fff!important;
}
body.fo-app-mode .customer-list-card-head h3{
  margin:2px 0 0!important;
  color:#fff!important;
  font-size:17px!important;
  line-height:1.2!important;
}
body.fo-app-mode .customer-list-code,
body.fo-app-mode .customer-legal-name{
  color:rgba(255,255,255,.74)!important;
}
body.fo-app-mode .customer-status{
  border:1px solid rgba(255,255,255,.35)!important;
  background:rgba(255,255,255,.14)!important;
  color:#fff!important;
}
body.fo-app-mode .customer-list-meta{
  display:grid!important;
  grid-template-columns:repeat(2,minmax(0,1fr))!important;
  gap:0!important;
  margin:5px 0 0!important;
  overflow:hidden!important;
  border:1px solid var(--fo-card-divider)!important;
  border-radius:9px!important;
  background:#fff!important;
}
body.fo-app-mode .customer-list-meta>div{
  min-width:0!important;
  min-height:64px!important;
  padding:10px 12px!important;
  border-right:1px solid var(--fo-card-divider)!important;
  border-bottom:1px solid var(--fo-card-divider)!important;
}
body.fo-app-mode .customer-list-meta>div:nth-child(2n){border-right:0!important}
body.fo-app-mode .customer-list-meta>div:nth-last-child(-n+2){border-bottom:0!important}
body.fo-app-mode .customer-list-meta span{color:var(--fo-card-muted)!important}
body.fo-app-mode .customer-list-meta strong{color:var(--fo-card-text)!important}
body.fo-app-mode .customer-list-actions{
  margin:8px 0 0!important;
  padding:9px 0 0!important;
  border-top:1px solid var(--fo-card-divider)!important;
}

/* ----------------------------------------------------------------------
   4. Utenti e autorizzazioni
   ---------------------------------------------------------------------- */
body.fo-app-mode .users-role-section,
body.fo-app-mode .all-transfer-section{
  margin:0 0 12px!important;
  padding:0 0 2px!important;
  overflow:hidden!important;
  border:1px solid var(--fo-card-border)!important;
  border-radius:var(--fo-card-radius)!important;
  background:#fff!important;
  box-shadow:var(--fo-card-shadow)!important;
}
body.fo-app-mode .users-role-title,
body.fo-app-mode .all-transfer-section-header{
  margin:8px 10px 0!important;
  cursor:pointer!important;
}
body.fo-app-mode .users-role-body,
body.fo-app-mode .all-transfer-section-body{
  padding:2px 0 0!important;
  background:transparent!important;
}
body.fo-app-mode .all-transfer-section .ticket-group-count,
body.fo-app-mode .activity-count-badge,
body.fo-app-mode .machine-year-folder-count,
body.fo-app-mode .machine-model-folder-count,
body.fo-app-mode .all-active-transfers-counter{
  min-width:26px!important;
  height:26px!important;
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  border:1px solid rgba(255,255,255,.28)!important;
  border-radius:999px!important;
  background:rgba(255,255,255,.14)!important;
  color:#fff!important;
  font-size:11px!important;
  font-weight:900!important;
}
body.fo-app-mode .permissions-create-box{
  margin-bottom:14px!important;
  overflow:hidden!important;
}
body.fo-app-mode .permissions-create-group{
  display:grid!important;
  grid-template-columns:minmax(0,1fr) auto!important;
  gap:10px!important;
}
body.fo-app-mode .permissions-role-icons{
  display:flex!important;
  flex-wrap:wrap!important;
  gap:7px!important;
}
body.fo-app-mode .permissions-groups-table tbody td:first-child{
  min-width:180px!important;
}

/* ----------------------------------------------------------------------
   5. Task: form, tabella e kanban nella stessa famiglia grafica
   ---------------------------------------------------------------------- */
body.fo-app-mode .activity-form-box{
  margin-bottom:14px!important;
  overflow:hidden!important;
}
body.fo-app-mode .activity-table-header{
  margin:0 0 8px!important;
}
body.fo-app-mode .activity-table-header-right{
  display:flex!important;
  align-items:center!important;
  gap:8px!important;
}
body.fo-app-mode .activity-table-header .activity-sort-box{
  display:flex!important;
  align-items:center!important;
  gap:7px!important;
}
body.fo-app-mode .activity-table-header .activity-sort-box label{
  color:rgba(255,255,255,.78)!important;
  font-size:11px!important;
}
body.fo-app-mode .activity-table-header select{
  min-height:34px!important;
  height:34px!important;
  border:1px solid rgba(255,255,255,.28)!important;
  background:#fff!important;
  color:var(--fo-card-text)!important;
}
body.fo-app-mode .activity-list{
  width:100%!important;
  min-width:0!important;
  overflow-x:auto!important;
}
body.fo-app-mode .task-kanban{
  gap:12px!important;
}
body.fo-app-mode .task-column{
  overflow:hidden!important;
  border:1px solid var(--fo-card-border)!important;
  border-radius:var(--fo-card-radius)!important;
  background:#fff!important;
  box-shadow:var(--fo-card-shadow)!important;
}
body.fo-app-mode .task-column-header{
  min-height:45px!important;
  padding:9px 11px!important;
  border:0!important;
  background:var(--fo-card-band)!important;
  color:#fff!important;
}
body.fo-app-mode .task-column-header b{
  border-color:rgba(255,255,255,.28)!important;
  background:rgba(255,255,255,.14)!important;
  color:#fff!important;
}
body.fo-app-mode .task-column-body{
  background:var(--fo-card-soft)!important;
}
body.fo-app-mode .task-card{
  position:relative!important;
  padding:11px!important;
  overflow:hidden!important;
  border:1px solid var(--fo-card-border)!important;
  border-radius:var(--fo-card-radius)!important;
  background:#fff!important;
  box-shadow:none!important;
}
body.fo-app-mode .task-card:before{
  content:"";
  display:block;
  height:5px;
  margin:-11px -11px 10px;
  background:var(--fo-card-band);
}
body.fo-app-mode .task-card-title,
body.fo-app-mode .task-card-footer{
  color:var(--fo-card-text)!important;
}

/* ----------------------------------------------------------------------
   6. Trasferte: testata primary e dettaglio strutturato
   ---------------------------------------------------------------------- */
body.fo-app-mode .all-transfer-sections{
  display:grid!important;
  gap:12px!important;
}
body.fo-app-mode .all-transfer-section-header{
  margin:8px 10px!important;
}
body.fo-app-mode .all-active-transfer-columns{
  margin:0 10px 7px!important;
  padding:9px 11px!important;
  border:1px solid var(--fo-card-border)!important;
  border-radius:9px!important;
  background:#f1f5f9!important;
  color:#526176!important;
  font-size:10.5px!important;
  font-weight:900!important;
  letter-spacing:.055em!important;
  text-transform:uppercase!important;
}
body.fo-app-mode .all-active-transfers-list{
  padding:0 0 4px!important;
}
body.fo-app-mode .all-transfer-card{
  margin:0 10px 9px!important;
  padding:8px 10px 10px!important;
  overflow:hidden!important;
  border:1px solid var(--fo-card-border)!important;
  border-radius:var(--fo-card-radius)!important;
  background:#fff!important;
  box-shadow:var(--fo-card-shadow)!important;
}
body.fo-app-mode .all-transfer-main{
  min-height:54px!important;
  margin:0!important;
  padding:9px 10px!important;
  border:0!important;
  border-radius:var(--fo-card-band-radius)!important;
  background:var(--fo-card-band)!important;
  color:#fff!important;
}
body.fo-app-mode .all-transfer-main :where(.all-active-transfer-client,.all-active-transfer-machine,.all-active-transfer-date){
  color:#fff!important;
}
body.fo-app-mode .all-transfer-main .all-active-transfer-machine{
  opacity:.74!important;
}
body.fo-app-mode .all-transfer-expand-btn{
  border:1px solid rgba(255,255,255,.28)!important;
  background:rgba(255,255,255,.12)!important;
  color:#fff!important;
}
body.fo-app-mode .all-transfer-users-panel{
  margin-top:5px!important;
  overflow:hidden!important;
  border:1px solid var(--fo-card-divider)!important;
  border-radius:9px!important;
  background:#fff!important;
}
body.fo-app-mode .all-transfer-user-row{
  margin:0!important;
  padding:10px 12px!important;
  border:0!important;
  border-bottom:1px solid var(--fo-card-divider)!important;
  border-radius:0!important;
  background:#fff!important;
}
body.fo-app-mode .all-transfer-user-row:last-child{border-bottom:0!important}

/* ----------------------------------------------------------------------
   7. Macchine: stessa scheda, gerarchia visiva chiara
   ---------------------------------------------------------------------- */
body.fo-app-mode .machine-create-box{
  margin-bottom:14px!important;
  overflow:hidden!important;
}
body.fo-app-mode .machine-year-folder-grid,
body.fo-app-mode .machine-model-folder-grid,
body.fo-app-mode .machine-folder-grid{
  display:grid!important;
  gap:10px!important;
}
body.fo-app-mode .machine-year-folder-card,
body.fo-app-mode .machine-model-folder-card,
body.fo-app-mode .machine-folder-card{
  position:relative!important;
  min-width:0!important;
  overflow:hidden!important;
  border:1px solid var(--fo-card-border)!important;
  border-radius:var(--fo-card-radius)!important;
  background:#fff!important;
  box-shadow:var(--fo-card-shadow)!important;
}
body.fo-app-mode .machine-year-folder-main{
  min-height:50px!important;
  padding:9px 11px!important;
  border:0!important;
  background:var(--fo-card-band)!important;
  color:#fff!important;
}
body.fo-app-mode .machine-year-folder-main :where(.machine-year-folder-title,.machine-year-folder-count){color:#fff!important}
body.fo-app-mode .machine-year-folder-main svg{stroke:#fff!important}
body.fo-app-mode .machine-model-folder-main{
  min-height:48px!important;
  padding:9px 11px!important;
  border:0!important;
  border-bottom:1px solid var(--fo-card-divider)!important;
  background:#f1f5f9!important;
  color:var(--fo-card-text)!important;
}
body.fo-app-mode .machine-model-folder-main svg{stroke:var(--fo-card-text)!important}
body.fo-app-mode .machine-model-folder-count{
  border-color:#c9d4e3!important;
  background:#fff!important;
  color:var(--fo-card-text)!important;
}
body.fo-app-mode .machine-folder-main{
  min-height:70px!important;
  padding:15px 12px 11px!important;
  border:0!important;
  background:#fff!important;
  color:var(--fo-card-text)!important;
}
body.fo-app-mode .machine-folder-main:before{
  content:"";
  position:absolute;
  inset:0 0 auto;
  height:5px;
  background:var(--fo-card-band);
}
body.fo-app-mode .machine-folder-main svg{stroke:var(--fo-card-text)!important}
body.fo-app-mode .machine-folder-serial{color:var(--fo-card-text)!important}
body.fo-app-mode .machine-folder-client-name{color:var(--fo-card-muted)!important}
body.fo-app-mode .machine-model-folder-content,
body.fo-app-mode .machine-year-folder-content{
  padding:10px!important;
  background:var(--fo-card-soft)!important;
}

/* Dettaglio macchina: stesso riquadro delle righe assistenza. */
body.fo-app-mode .machine-detail-assistance-unified-box{
  border:1px solid var(--fo-card-border)!important;
  border-radius:var(--fo-card-radius)!important;
  background:#fff!important;
  box-shadow:var(--fo-card-shadow)!important;
}
body.fo-app-mode .machine-detail-creator-band{
  border-radius:var(--fo-card-band-radius)!important;
  background:var(--fo-card-band)!important;
  color:#fff!important;
}

/* ----------------------------------------------------------------------
   8. Planning risorse e reparti
   ---------------------------------------------------------------------- */
body.fo-app-mode .resource-planning-layout{
  gap:12px!important;
}
body.fo-app-mode .planning-orders-panel{
  padding:8px 10px 10px!important;
  overflow:hidden!important;
}
body.fo-app-mode .planning-panel-title{
  margin:0 0 9px!important;
  padding:9px 11px!important;
  border-radius:var(--fo-card-band-radius)!important;
  background:var(--fo-card-band)!important;
  color:#fff!important;
  font-size:14px!important;
  font-weight:900!important;
}
body.fo-app-mode .planning-order-card{
  position:relative!important;
  margin:8px 0 0!important;
  padding:14px 10px 10px!important;
  overflow:hidden!important;
  border:1px solid var(--fo-card-border)!important;
  border-radius:var(--fo-card-radius)!important;
  background:#fff!important;
  box-shadow:none!important;
}
body.fo-app-mode .planning-order-card:before{
  content:"";
  position:absolute;
  inset:0 0 auto;
  height:5px;
  background:var(--fo-card-band);
}
body.fo-app-mode .planning-order-card strong{color:var(--fo-card-text)!important}
body.fo-app-mode .planning-grid{
  border:1px solid var(--fo-card-border)!important;
  border-radius:var(--fo-card-radius)!important;
  background:#fff!important;
  box-shadow:var(--fo-card-shadow)!important;
}
body.fo-app-mode .planning-grid-header{
  background:var(--fo-card-band)!important;
}
body.fo-app-mode .planning-grid-header :where(.planning-person-cell,.planning-day-head){
  border-color:rgba(255,255,255,.14)!important;
  background:var(--fo-card-band)!important;
  color:#fff!important;
}
body.fo-app-mode .planning-grid-header :where(strong,span){color:#fff!important}
body.fo-app-mode .planning-person-cell{
  color:var(--fo-card-text)!important;
}
body.fo-app-mode .planning-team-card{
  margin:0 0 10px!important;
  padding:8px 10px 10px!important;
  overflow:hidden!important;
  border:1px solid var(--fo-card-border)!important;
  border-radius:var(--fo-card-radius)!important;
  background:#fff!important;
  box-shadow:var(--fo-card-shadow)!important;
}
body.fo-app-mode .planning-team-card>div:first-child{
  min-height:46px!important;
  margin:0!important;
  padding:8px 10px!important;
  border-radius:var(--fo-card-band-radius)!important;
  background:var(--fo-card-band)!important;
  color:#fff!important;
}
body.fo-app-mode .planning-team-card>div:first-child :where(strong,span){color:#fff!important}
body.fo-app-mode .planning-team-card>div:first-child .secondary{
  border-color:rgba(255,255,255,.30)!important;
  background:rgba(255,255,255,.12)!important;
  color:#fff!important;
}
body.fo-app-mode .planning-team-card>div:first-child .danger{
  border-color:rgba(255,255,255,.30)!important;
  background:#fff!important;
  color:#b42318!important;
}
body.fo-app-mode .planning-team-members{
  margin:6px 0 0!important;
  padding:10px 12px!important;
  border:1px solid var(--fo-card-divider)!important;
  border-radius:9px!important;
  background:#fff!important;
}

/* ----------------------------------------------------------------------
   9. Calendario: ogni giorno è una scheda coerente
   ---------------------------------------------------------------------- */
body.fo-app-mode #calendarPage .calendar-month-nav{
  min-height:44px!important;
  padding:6px 8px!important;
  border:1px solid var(--fo-card-border)!important;
  border-radius:var(--fo-card-radius)!important;
  background:#fff!important;
  box-shadow:none!important;
}
body.fo-app-mode #calendarPage #calendarMonthTitle{
  color:var(--fo-card-text)!important;
  font-size:18px!important;
}
body.fo-app-mode .calendar-grid{
  gap:7px!important;
}
body.fo-app-mode .calendar-day-name{
  padding:8px 4px!important;
  color:var(--fo-card-muted)!important;
  font-size:10.5px!important;
  font-weight:900!important;
  letter-spacing:.055em!important;
  text-transform:uppercase!important;
}
body.fo-app-mode .calendar-day{
  min-height:118px!important;
  padding:7px!important;
  overflow:hidden!important;
  border:1px solid var(--fo-card-border)!important;
  border-radius:var(--fo-card-radius)!important;
  background:#fff!important;
  box-shadow:var(--fo-card-shadow)!important;
}
body.fo-app-mode .calendar-number{
  width:28px!important;
  height:24px!important;
  display:grid!important;
  place-items:center!important;
  margin-bottom:5px!important;
  border-radius:7px!important;
  background:var(--fo-card-band)!important;
  color:#fff!important;
  font-size:11px!important;
  font-weight:900!important;
}
body.fo-app-mode .calendar-ticket{
  border:1px solid #c8d5ea!important;
  border-radius:7px!important;
  background:#edf3ff!important;
  color:var(--fo-card-text)!important;
  box-shadow:none!important;
}
body.fo-app-mode .calendar-ticket.transfer-ticket{
  border-color:#e8c06b!important;
  background:#fff5dc!important;
  color:#765000!important;
}

/* ----------------------------------------------------------------------
   10. Traffico, profilo, home e schede secondarie
   ---------------------------------------------------------------------- */
body.fo-app-mode .fo-data-surface{
  padding:0!important;
  overflow-x:auto!important;
}
body.fo-app-mode .traffic-home-panel,
body.fo-app-mode .stat-card,
body.fo-app-mode .home-widget,
body.fo-app-mode .fixed-transfers-widget{
  border:1px solid var(--fo-card-border)!important;
  border-radius:var(--fo-card-radius)!important;
  background:#fff!important;
  box-shadow:var(--fo-card-shadow)!important;
}
body.fo-app-mode .traffic-home-panel{
  position:relative!important;
  overflow:hidden!important;
}
body.fo-app-mode .traffic-home-panel:before,
body.fo-app-mode .stat-card:before{
  content:"";
  position:absolute;
  inset:0 0 auto;
  height:5px;
  background:var(--fo-card-band);
}
body.fo-app-mode .stat-card{position:relative!important;overflow:hidden!important}

/* Schede dettaglio cliente generate dinamicamente. */
body.fo-app-mode #customerDetailContent>.modal-actions,
body.fo-app-mode #machineDetailContent>.machine-admin-actions{
  padding:10px!important;
  border:1px solid var(--fo-card-border)!important;
  border-radius:var(--fo-card-radius)!important;
  background:var(--fo-card-soft)!important;
}
body.fo-app-mode #customerDetailContent>.modal-actions{margin-top:14px!important}

/* Azioni interne sempre della stessa altezza. */
body.fo-app-mode #appContent :where(
  .customer-list-actions,
  .users-role-actions,
  .activity-actions,
  .all-transfer-user-actions,
  .machine-file-actions,
  .planning-assignment-actions
) button{
  min-height:36px!important;
  border-radius:9px!important;
}

/* ----------------------------------------------------------------------
   11. Dark mode
   ---------------------------------------------------------------------- */
body.dark-mode{
  --fo-card-border:#334155;
  --fo-card-divider:#2d3b50;
  --fo-card-bg:#111c2d;
  --fo-card-soft:#162236;
  --fo-card-text:#e7eef9;
  --fo-card-muted:#9aabc1;
  --fo-card-shadow:0 4px 14px rgba(0,0,0,.16);
}
body.dark-mode.fo-app-mode #appContent :where(
  .customer-list-card,
  .users-role-section,
  .all-transfer-section,
  .all-transfer-card,
  .task-column,
  .task-card,
  .machine-year-folder-card,
  .machine-model-folder-card,
  .machine-folder-card,
  .planning-order-card,
  .planning-grid,
  .planning-team-card,
  .calendar-day,
  .traffic-home-panel,
  .stat-card
){
  background:var(--fo-card-bg)!important;
  border-color:var(--fo-card-border)!important;
}
body.dark-mode.fo-app-mode #appContent :where(
  .filters,
  .resource-planning-toolbar,
  .all-active-transfers-toolbar,
  .users-search-box,
  .customer-list-summary,
  #calendarPage .popup-modal-body>div:first-child,
  .task-board-toolbar,
  .task-home-intro,
  .fo-section-intro,
  .machine-model-folder-content,
  .machine-year-folder-content,
  .task-column-body
){
  background:var(--fo-card-soft)!important;
  border-color:var(--fo-card-border)!important;
}
body.dark-mode.fo-app-mode #appContent :where(
  .customer-list-meta,
  .customer-list-meta>div,
  .all-transfer-users-panel,
  .all-transfer-user-row,
  .planning-team-members,
  .machine-folder-main,
  .planning-day-cell,
  .planning-person-cell,
  .calendar-month-nav
){
  background:var(--fo-card-bg)!important;
  border-color:var(--fo-card-divider)!important;
}
body.dark-mode.fo-app-mode #appContent :where(
  .customer-list-meta strong,
  .machine-folder-serial,
  .planning-order-card strong,
  .planning-person-cell strong,
  .task-card-title,
  .task-card-footer,
  #calendarPage #calendarMonthTitle
){color:var(--fo-card-text)!important}
body.dark-mode.fo-app-mode #appContent :where(
  .activity-table,
  .users-role-table,
  .permissions-groups-table,
  .traffic-access-table,
  .customer-machines-table,
  .machine-files-table,
  .machine-external-combined-table,
  .machine-external-hours-table
) thead th{
  background:#162236!important;
  color:#b9c5d5!important;
  border-color:var(--fo-card-border)!important;
}
body.dark-mode.fo-app-mode #appContent :where(
  .activity-table,
  .users-role-table,
  .permissions-groups-table,
  .traffic-access-table,
  .customer-machines-table,
  .machine-files-table,
  .machine-external-combined-table,
  .machine-external-hours-table
) tbody td{
  background:var(--fo-card-bg)!important;
  color:#e7edf6!important;
  border-color:var(--fo-card-border)!important;
}
body.dark-mode.fo-app-mode #appContent :where(
  .activity-table,
  .users-role-table,
  .permissions-groups-table,
  .traffic-access-table,
  .customer-machines-table,
  .machine-files-table,
  .machine-external-combined-table,
  .machine-external-hours-table
) tbody tr:hover td{
  background:#15243a!important;
}
body.dark-mode.fo-app-mode .machine-model-folder-main,
body.dark-mode.fo-app-mode .all-active-transfer-columns{
  background:#162236!important;
  color:#c5d0df!important;
  border-color:var(--fo-card-border)!important;
}
body.dark-mode.fo-app-mode .calendar-ticket{
  background:#172b4d!important;
  border-color:#355c95!important;
  color:#dbeafe!important;
}

/* ----------------------------------------------------------------------
   12. Mobile first: le tabelle diventano vere schede verticali
   ---------------------------------------------------------------------- */
@media (max-width:820px){
  body.fo-app-mode #appContent .fo-app-view :where(
      .activity-form-header,
    .machine-create-header,
    .user-create-header,
    .permissions-create-header,
      .users-role-title,
    .all-transfer-section-header,
    .activity-table-header,
    .machine-cost-group-header
  ){
    margin:7px 7px 0!important;
    padding:8px 9px!important;
  }

  body.fo-app-mode #appContent :where(
    .activity-table,
    .users-role-table,
    .permissions-groups-table,
    .customer-machines-table,
    .machine-files-table
  ){
    display:block!important;
    padding:0 7px 7px!important;
  }
  body.fo-app-mode #appContent :where(
    .activity-table,
    .users-role-table,
    .permissions-groups-table,
    .customer-machines-table,
    .machine-files-table
  ) thead{
    display:none!important;
  }
  body.fo-app-mode #appContent :where(
    .activity-table,
    .users-role-table,
    .permissions-groups-table,
    .customer-machines-table,
    .machine-files-table
  ) tbody,
  body.fo-app-mode #appContent :where(
    .activity-table,
    .users-role-table,
    .permissions-groups-table,
    .customer-machines-table,
    .machine-files-table
  ) tr{
    display:block!important;
    width:100%!important;
  }
  body.fo-app-mode #appContent :where(
    .activity-table,
    .users-role-table,
    .permissions-groups-table,
    .customer-machines-table,
    .machine-files-table
  ) tbody tr{
    margin:8px 0!important;
    padding:7px 9px 9px!important;
    overflow:hidden!important;
    border:1px solid var(--fo-card-border)!important;
    border-radius:var(--fo-card-radius)!important;
    background:#fff!important;
    box-shadow:var(--fo-card-shadow)!important;
    filter:none!important;
  }
  body.fo-app-mode #appContent :where(
    .activity-table,
    .users-role-table,
    .permissions-groups-table,
    .customer-machines-table,
    .machine-files-table
  ) tbody tr:before{
    content:"";
    display:block;
    height:5px;
    margin:-7px -9px 8px;
    background:var(--fo-card-band);
  }
  body.fo-app-mode #appContent :where(
    .activity-table,
    .users-role-table,
    .permissions-groups-table,
    .customer-machines-table,
    .machine-files-table
  ) tbody td{
    display:flex!important;
    width:100%!important;
    min-height:42px!important;
    padding:8px 2px!important;
    align-items:center!important;
    justify-content:space-between!important;
    gap:12px!important;
    border:0!important;
    border-bottom:1px solid var(--fo-card-divider)!important;
    border-radius:0!important;
    background:transparent!important;
    box-shadow:none!important;
    text-align:right!important;
  }
  body.fo-app-mode #appContent :where(
    .activity-table,
    .users-role-table,
    .permissions-groups-table,
    .customer-machines-table,
    .machine-files-table
  ) tbody td:last-child{
    border-bottom:0!important;
  }
  body.fo-app-mode #appContent :where(
    .activity-table,
    .users-role-table,
    .permissions-groups-table,
    .customer-machines-table,
    .machine-files-table
  ) td[data-label]:before{
    content:attr(data-label);
    flex:0 0 42%;
    display:block!important;
    margin:0!important;
    color:var(--fo-card-muted)!important;
    font-size:10px!important;
    font-weight:900!important;
    letter-spacing:.055em!important;
    text-align:left!important;
    text-transform:uppercase!important;
  }

  body.fo-app-mode .customer-list-grid{
    grid-template-columns:1fr!important;
  }
  body.fo-app-mode .customer-list-meta{
    grid-template-columns:1fr!important;
  }
  body.fo-app-mode .customer-list-meta>div{
    border-right:0!important;
    border-bottom:1px solid var(--fo-card-divider)!important;
  }
  body.fo-app-mode .customer-list-meta>div:last-child{border-bottom:0!important}

  body.fo-app-mode .all-active-transfer-columns{display:none!important}
  body.fo-app-mode .all-transfer-card{margin:0 7px 8px!important}
  body.fo-app-mode .all-transfer-main{
    grid-template-columns:1fr!important;
    align-items:flex-start!important;
  }
  body.fo-app-mode .all-active-transfer-date{text-align:left!important}
  body.fo-app-mode .all-transfer-user-row{
    align-items:flex-start!important;
    flex-direction:column!important;
  }
  body.fo-app-mode .all-transfer-user-actions{
    width:100%!important;
    justify-content:flex-start!important;
    flex-wrap:wrap!important;
  }

  body.fo-app-mode .activity-table-header{
    align-items:flex-start!important;
    flex-direction:column!important;
  }
  body.fo-app-mode .activity-table-header-right{
    width:100%!important;
    justify-content:space-between!important;
  }

  body.fo-app-mode #calendarPage .popup-modal-body>div:first-child{
    display:flex!important;
    align-items:stretch!important;
    flex-direction:column!important;
  }
  body.fo-app-mode #calendarPage .popup-modal-body>div:first-child>div:first-child{display:none!important}
  body.fo-app-mode #calendarPage .popup-modal-body>div:first-child>div:last-child{
    align-items:stretch!important;
  }
  body.fo-app-mode .calendar-filter-box,
  body.fo-app-mode .calendar-filter-box select{
    width:100%!important;
  }
  body.fo-app-mode .calendar-grid{
    min-width:760px!important;
  }
  body.fo-app-mode #calendarContainer{
    overflow-x:auto!important;
    padding-bottom:8px!important;
  }

  body.fo-app-mode .permissions-create-group{
    grid-template-columns:1fr!important;
  }
  body.fo-app-mode .planning-team-members{
    padding:10px!important;
  }
}

@media (max-width:520px){
  body.fo-app-mode .customer-list-card,
  body.fo-app-mode .all-transfer-card,
  body.fo-app-mode .planning-team-card{
    padding:7px!important;
  }
  body.fo-app-mode .customer-list-card-head{
    align-items:flex-start!important;
    flex-direction:column!important;
  }
  body.fo-app-mode .customer-list-actions>*{
    flex:1 1 calc(50% - 6px)!important;
  }
  body.fo-app-mode .activity-table-header-right{
    align-items:stretch!important;
    flex-direction:column!important;
  }
  body.fo-app-mode .activity-table-header .activity-sort-box{
    width:100%!important;
    justify-content:space-between!important;
  }
}

/* Reduced motion: grafica coerente senza animazioni inutili. */
@media (prefers-reduced-motion:reduce){
  body.fo-app-mode #appContent *{
    scroll-behavior:auto!important;
    transition:none!important;
    animation:none!important;
  }
}

/* ======================================================================
   V6.1 — CLIENTI / MACCHINE / UTENTI ALLINEATI A ELENCO ASSISTENZE
   ====================================================================== */

/* Icone di navigazione: nessuna emoji, stessa geometria SVG per tutte. */
body.fo-app-mode .fo-nav-line-icon{
  width:22px!important;height:22px!important;min-width:22px!important;
  display:grid!important;place-items:center!important;color:inherit!important;
}
body.fo-app-mode .fo-nav-line-icon svg{width:20px!important;height:20px!important;stroke:currentColor!important;stroke-width:2.1!important;stroke-linecap:round!important;stroke-linejoin:round!important}
body.fo-app-mode .fo-customer-title-icon svg{width:24px!important;height:24px!important;stroke:#fff!important;stroke-width:2!important;stroke-linecap:round!important;stroke-linejoin:round!important}

/* ----------------------------- MACCHINE ----------------------------- */
body.fo-app-mode .machine-folder-grid.machine-assistance-grid{
  grid-template-columns:repeat(auto-fit,minmax(min(100%,340px),1fr))!important;
  gap:12px!important;
}
body.fo-app-mode .machine-folder-card.machine-assistance-card{
  padding:8px 10px 10px!important;
  border:1px solid var(--fo-card-border)!important;
  border-radius:var(--fo-card-radius)!important;
  background:#fff!important;
  box-shadow:var(--fo-card-shadow)!important;
}
body.fo-app-mode .machine-assistance-card-main{
  width:100%!important;min-height:0!important;padding:0!important;
  display:block!important;text-align:left!important;border:0!important;background:transparent!important;
  color:var(--fo-card-text)!important;border-radius:0!important;
}
body.fo-app-mode .machine-assistance-card-main:before{display:none!important}
body.fo-app-mode .machine-assistance-card-head{
  min-height:58px!important;padding:9px 10px!important;
  display:grid!important;grid-template-columns:auto minmax(0,1fr) auto!important;align-items:center!important;gap:10px!important;
  border-radius:var(--fo-card-band-radius)!important;background:var(--fo-card-band)!important;color:#fff!important;
}
body.fo-app-mode .machine-assistance-card-icon{
  width:34px!important;height:34px!important;display:grid!important;place-items:center!important;
  border:1px solid rgba(255,255,255,.2)!important;border-radius:9px!important;background:rgba(255,255,255,.1)!important;
}
body.fo-app-mode .machine-assistance-card-icon svg{width:20px!important;height:20px!important;stroke:#fff!important;stroke-width:2.1!important;stroke-linecap:round!important;stroke-linejoin:round!important}
body.fo-app-mode .machine-assistance-card-title{min-width:0!important;display:grid!important;gap:2px!important}
body.fo-app-mode .machine-assistance-card-title strong{color:#fff!important;font-size:17px!important;font-weight:900!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important}
body.fo-app-mode .machine-assistance-card-title small{color:rgba(255,255,255,.72)!important;font-size:11px!important;font-weight:800!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important}
body.fo-app-mode .machine-assistance-card-year{
  min-width:48px!important;height:28px!important;padding:0 9px!important;display:inline-flex!important;align-items:center!important;justify-content:center!important;
  border:1px solid rgba(255,255,255,.28)!important;border-radius:999px!important;background:rgba(255,255,255,.14)!important;color:#fff!important;font-size:11px!important;font-weight:900!important;
}
body.fo-app-mode .machine-assistance-card-meta{
  margin-top:5px!important;display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;
  overflow:hidden!important;border:1px solid var(--fo-card-divider)!important;border-radius:9px!important;background:#fff!important;
}
body.fo-app-mode .machine-assistance-card-meta>div{min-width:0!important;min-height:62px!important;padding:10px 12px!important;border-right:1px solid var(--fo-card-divider)!important;border-bottom:1px solid var(--fo-card-divider)!important;display:grid!important;align-content:center!important;gap:3px!important}
body.fo-app-mode .machine-assistance-card-meta>div:nth-child(2n){border-right:0!important}
body.fo-app-mode .machine-assistance-card-meta>div:nth-last-child(-n+2){border-bottom:0!important}
body.fo-app-mode .machine-assistance-card-meta span{color:var(--fo-card-muted)!important;font-size:10px!important;font-weight:900!important;text-transform:uppercase!important;letter-spacing:.04em!important}
body.fo-app-mode .machine-assistance-card-meta strong{color:var(--fo-card-text)!important;font-size:13px!important;font-weight:900!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important}
body.fo-app-mode .machine-assistance-card-footer{margin-top:8px!important;padding:9px 3px 0!important;display:flex!important;align-items:center!important;justify-content:space-between!important;border-top:1px solid var(--fo-card-divider)!important;color:var(--fo-card-text)!important;font-size:12px!important;font-weight:900!important}
body.fo-app-mode .machine-assistance-card-main:hover .machine-assistance-card-head{background:var(--fo-card-band-hover)!important}

/* Anno e modello sono raggruppatori, non card concorrenti con la macchina. */
body.fo-app-mode .machine-year-folder-card,
body.fo-app-mode .machine-model-folder-card{box-shadow:none!important}
body.fo-app-mode .machine-model-folder-main{background:#fff!important}
body.fo-app-mode .machine-model-folder-content,
body.fo-app-mode .machine-year-folder-content{background:#f7f9fc!important}

/* ------------------------------ UTENTI ------------------------------ */
body.fo-app-mode .users-assistance-section{padding-bottom:10px!important}
body.fo-app-mode .users-assistance-role-title{width:calc(100% - 20px)!important;cursor:pointer!important}
body.fo-app-mode .users-role-count{
  margin-left:auto!important;min-width:26px!important;height:26px!important;padding:0 8px!important;
  display:inline-flex!important;align-items:center!important;justify-content:center!important;
  border:1px solid rgba(255,255,255,.28)!important;border-radius:999px!important;background:rgba(255,255,255,.14)!important;color:#fff!important;font-size:11px!important;font-weight:900!important;
}
body.fo-app-mode .users-assistance-section.collapsed .users-role-body{display:none!important}
body.fo-app-mode .users-assistance-grid{
  padding:10px!important;display:grid!important;grid-template-columns:repeat(auto-fit,minmax(min(100%,360px),1fr))!important;gap:12px!important;
}
body.fo-app-mode .user-list-card{
  min-width:0!important;padding:8px 10px 10px!important;overflow:hidden!important;
  border:1px solid var(--fo-card-border)!important;border-radius:var(--fo-card-radius)!important;background:#fff!important;box-shadow:var(--fo-card-shadow)!important;
}
body.fo-app-mode .user-list-card-head{
  min-height:58px!important;padding:9px 10px!important;display:grid!important;grid-template-columns:auto minmax(0,1fr) auto!important;align-items:center!important;gap:10px!important;
  border-radius:var(--fo-card-band-radius)!important;background:var(--fo-card-band)!important;color:#fff!important;
}
body.fo-app-mode .user-list-card-icon{width:34px!important;height:34px!important;display:grid!important;place-items:center!important;border:1px solid rgba(255,255,255,.2)!important;border-radius:9px!important;background:rgba(255,255,255,.1)!important}
body.fo-app-mode .user-list-card-icon svg{width:20px!important;height:20px!important;stroke:#fff!important;stroke-width:2.1!important;stroke-linecap:round!important;stroke-linejoin:round!important}
body.fo-app-mode .user-list-card-title{min-width:0!important;display:grid!important;gap:2px!important}
body.fo-app-mode .user-list-card-title strong{color:#fff!important;font-size:16px!important;font-weight:900!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important}
body.fo-app-mode .user-list-card-title small{color:rgba(255,255,255,.72)!important;font-size:11px!important;font-weight:800!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important}
body.fo-app-mode .user-list-card-status{min-width:52px!important;height:28px!important;padding:0 9px!important;display:inline-flex!important;align-items:center!important;justify-content:center!important;border:1px solid rgba(255,255,255,.28)!important;border-radius:999px!important;background:rgba(255,255,255,.14)!important;color:#fff!important;font-size:10px!important;font-weight:900!important}
body.fo-app-mode .user-list-card-meta{margin-top:5px!important;display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;overflow:hidden!important;border:1px solid var(--fo-card-divider)!important;border-radius:9px!important;background:#fff!important}
body.fo-app-mode .user-list-card-meta>div{min-width:0!important;min-height:66px!important;padding:10px 12px!important;border-right:1px solid var(--fo-card-divider)!important;border-bottom:1px solid var(--fo-card-divider)!important;display:grid!important;align-content:center!important;gap:4px!important}
body.fo-app-mode .user-list-card-meta>div:nth-child(2n){border-right:0!important}
body.fo-app-mode .user-list-card-meta>div:nth-last-child(-n+2){border-bottom:0!important}
body.fo-app-mode .user-list-card-meta>div>span:first-child{color:var(--fo-card-muted)!important;font-size:10px!important;font-weight:900!important;text-transform:uppercase!important;letter-spacing:.04em!important}
body.fo-app-mode .user-list-card-meta strong{color:var(--fo-card-text)!important;font-size:13px!important;font-weight:900!important;overflow-wrap:anywhere!important}
body.fo-app-mode .user-list-permissions .user-permission-chip{justify-self:start!important}
body.fo-app-mode .user-list-permissions>div{justify-items:start!important;text-align:left!important}
body.fo-app-mode .user-list-card-footer{margin-top:8px!important;padding-top:9px!important;border-top:1px solid var(--fo-card-divider)!important}
body.fo-app-mode .user-card-actions{width:100%!important;display:flex!important;flex-wrap:wrap!important;gap:7px!important;justify-content:flex-end!important}
body.fo-app-mode .user-card-actions button{min-height:38px!important;padding:7px 10px!important;display:inline-flex!important;align-items:center!important;gap:6px!important;border-radius:9px!important;font-size:11px!important;font-weight:900!important}
body.fo-app-mode .user-card-actions button svg{width:15px!important;height:15px!important}
body.fo-app-mode .user-action-symbol{font-size:17px!important;line-height:1!important}
body.fo-app-mode .user-card-readonly,
body.fo-app-mode .user-card-protected{display:inline-flex!important;align-items:center!important;min-height:34px!important;padding:0 10px!important;border:1px solid var(--fo-card-border)!important;border-radius:999px!important;background:var(--fo-card-soft)!important;color:var(--fo-card-muted)!important;font-size:11px!important;font-weight:900!important}

/* Dark: la grammatica resta identica, cambia solo il piano cromatico. */
body.dark-mode.fo-app-mode .machine-folder-card.machine-assistance-card,
body.dark-mode.fo-app-mode .user-list-card,
body.dark-mode.fo-app-mode .machine-assistance-card-meta,
body.dark-mode.fo-app-mode .user-list-card-meta{background:#101b32!important;border-color:#253453!important}
body.dark-mode.fo-app-mode .machine-assistance-card-meta>div,
body.dark-mode.fo-app-mode .user-list-card-meta>div{border-color:#253453!important}
body.dark-mode.fo-app-mode .machine-assistance-card-meta strong,
body.dark-mode.fo-app-mode .user-list-card-meta strong,
body.dark-mode.fo-app-mode .machine-assistance-card-footer{color:#e7eefc!important}
body.dark-mode.fo-app-mode .machine-model-folder-main{background:#101b32!important;color:#e7eefc!important}

@media (max-width:700px){
  body.fo-app-mode .machine-folder-grid.machine-assistance-grid,
  body.fo-app-mode .users-assistance-grid{grid-template-columns:1fr!important}
  body.fo-app-mode .user-card-actions{display:grid!important;grid-template-columns:1fr 1fr!important}
  body.fo-app-mode .user-card-actions .danger{grid-column:1/-1!important}
  body.fo-app-mode .user-card-actions button{justify-content:center!important;min-height:42px!important}
}

@media (min-width:1500px){
  body.fo-app-mode .machine-folder-grid.machine-assistance-grid,
  body.fo-app-mode .users-assistance-grid{grid-template-columns:repeat(3,minmax(0,1fr))!important}
}

/* ======================================================================
   V6.4 — HEADER MACCHINE E UTENTI IDENTICI A GESTIONE CLIENTI
   Le due viste usano ora la stessa popup-modal-header nativa di Clienti.
   Nessun offset aggiuntivo: l'header parte esattamente nello stesso punto.
   ====================================================================== */
body.fo-app-mode #appContent :is(#machinesPage,#usersPage) > .fo-view-panel > .popup-modal-header{
  /* Tutto il layout viene ereditato dalla regola comune .fo-app-view .popup-modal-header. */
}

/* ======================================================================
   V6.5 — FIX REALE HEADER UTENTI / MACCHINE
   Le vecchie regole legacy con ID mantenevano overflow:auto !important
   (e su Macchine height:92vh !important). Questo trasformava il pannello
   in uno scroll-container e spostava verso il basso l'header sticky.
   Qui i due pannelli vengono resettati esattamente come Gestione Clienti.
   ====================================================================== */
body.fo-app-mode #appContent #machinesPage.fo-app-view > .modal.modal-popup-style.fo-view-panel,
body.fo-app-mode #appContent #usersPage.fo-app-view > .modal.modal-popup-style.fo-view-panel {
  position: static !important;
  inset: auto !important;
  transform: none !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: none !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: visible !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

body.fo-app-mode #appContent #machinesPage.fo-app-view > .fo-view-panel > .popup-modal-body,
body.fo-app-mode #appContent #usersPage.fo-app-view > .fo-view-panel > .popup-modal-body {
  width: 100% !important;
  min-width: 0 !important;
  max-width: none !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  padding: 0 !important;
  overflow: visible !important;
}

/* L'header usa una sola superficie di scorrimento: #appContent / viewport. */
body.fo-app-mode #appContent #machinesPage.fo-app-view > .fo-view-panel > .popup-modal-header,
body.fo-app-mode #appContent #usersPage.fo-app-view > .fo-view-panel > .popup-modal-header,
body.fo-app-mode #appContent #customersPage.fo-app-view > .fo-view-panel > .popup-modal-header {
  position: sticky !important;
  top: var(--fo-topbar) !important;
  margin: calc(var(--fo-content-pad) * -1) calc(var(--fo-content-pad) * -1) 20px !important;
}