/* ======================================================================
   FARMO ORGANIZER — APP UI V5.3
   Design system unico, responsive, mobile-first, primary #061b49.
   Questo file viene caricato per ultimo e normalizza il CSS legacy.
   ====================================================================== */

:root{
  --fo-primary:#061b49;
  --fo-primary-hover:#0a2a63;
  --fo-primary-active:#041334;
  --fo-accent:#2f6bd7;
  --fo-accent-soft:#e9f0ff;
  --fo-bg:#f3f6fa;
  --fo-surface:#ffffff;
  --fo-surface-soft:#f8fafc;
  --fo-surface-raised:#ffffff;
  --fo-text:#142033;
  --fo-text-strong:#071a3e;
  --fo-muted:#68778b;
  --fo-border:#dce4ee;
  --fo-border-strong:#c8d3e1;
  --fo-success:#16803f;
  --fo-warning:#b45309;
  --fo-danger:#b42318;
  --fo-info:#1f5ebc;
  --fo-topbar:72px;
  --fo-sidebar:clamp(236px,14vw,258px);
  --fo-content-pad:clamp(16px,1.25vw,28px);
  --fo-radius-xs:8px;
  --fo-radius-sm:11px;
  --fo-radius:15px;
  --fo-radius-lg:20px;
  --fo-shadow-xs:0 1px 2px rgba(6,27,73,.04);
  --fo-shadow-sm:0 8px 24px rgba(6,27,73,.07);
  --fo-shadow:0 16px 38px rgba(6,27,73,.10);
  --fo-shadow-lg:0 28px 72px rgba(6,27,73,.18);
}

*{box-sizing:border-box}
html{min-width:320px;background:var(--fo-bg);scroll-behavior:smooth}
body{
  min-width:320px;
  margin:0;
  overflow-x:hidden;
  color:var(--fo-text)!important;
  background:var(--fo-bg)!important;
  font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif!important;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
body *{font-family:inherit!important}
button,input,select,textarea{font:inherit}
button{touch-action:manipulation;-webkit-tap-highlight-color:transparent}
img,svg{max-width:100%}
::selection{background:#dbe7ff;color:var(--fo-primary)}
:focus-visible{outline:3px solid rgba(47,107,215,.24)!important;outline-offset:2px!important}

/* ----------------------------------------------------------------------
   Brand
   ---------------------------------------------------------------------- */
.fo-login-brand,.fo-header-brand{display:flex;align-items:center;gap:12px;color:var(--fo-primary)}
.fo-header-brand{
  flex:0 0 auto;
  min-width:0;
  padding:0;
  border:0;
  background:transparent;
  cursor:pointer;
  text-align:left;
}
.fo-brand-mark{display:block;object-fit:contain;flex:0 0 auto}
.fo-brand-mark-login{width:68px;height:68px;filter:drop-shadow(0 14px 24px rgba(6,27,73,.18))}
.fo-brand-mark-header{width:40px;height:40px}
.fo-brand-wordmark{display:flex;flex-direction:column;line-height:.94;min-width:0}
.fo-brand-wordmark strong{
  color:var(--fo-primary);
  font-size:26px;
  font-weight:900;
  letter-spacing:-.025em;
}
.fo-brand-wordmark span{
  margin-top:7px;
  color:#66758a;
  font-size:10px;
  font-weight:850;
  letter-spacing:.23em;
  text-transform:uppercase;
}
.fo-brand-wordmark-header strong{font-size:18px;letter-spacing:-.015em}
.fo-brand-wordmark-header span{margin-top:5px;font-size:7px;letter-spacing:.24em}

/* ----------------------------------------------------------------------
   Login
   ---------------------------------------------------------------------- */
#loginPage{
  min-height:100svh!important;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:max(22px,env(safe-area-inset-top)) max(18px,env(safe-area-inset-right)) max(22px,env(safe-area-inset-bottom)) max(18px,env(safe-area-inset-left))!important;
  background:
    radial-gradient(circle at 10% 10%,rgba(47,107,215,.12),transparent 31rem),
    radial-gradient(circle at 92% 90%,rgba(6,27,73,.08),transparent 28rem),
    linear-gradient(145deg,#fbfcff,#edf2f8)!important;
}
.login-card{
  width:min(100%,440px)!important;
  padding:36px!important;
  border:1px solid rgba(200,211,225,.88)!important;
  border-radius:26px!important;
  background:rgba(255,255,255,.96)!important;
  box-shadow:0 30px 90px rgba(6,27,73,.15)!important;
  backdrop-filter:blur(16px);
  -webkit-backdrop-filter:blur(16px);
}
.fo-login-brand{margin-bottom:30px}
.fo-login-intro{margin-bottom:24px}
.fo-login-intro h1{margin:0;color:var(--fo-primary);font-size:31px;line-height:1.08;letter-spacing:-.045em;font-weight:900}
.fo-login-intro p{margin:9px 0 0;color:var(--fo-muted);font-size:14px;font-weight:620}
.login-card>h1,.login-card>.login-brand-logo,.login-card>.login-farmores-logo{display:none!important}
#loginForm{display:grid;gap:9px}
#loginForm label{margin-top:7px;color:#344258;font-size:13px;font-weight:800}
#loginForm input{width:100%;height:50px!important;border-radius:12px!important}
#loginForm>button[type="submit"]{
  min-height:50px!important;
  margin-top:10px!important;
  border:1px solid var(--fo-primary)!important;
  border-radius:12px!important;
  background:var(--fo-primary)!important;
  color:#fff!important;
  font-weight:900!important;
  box-shadow:0 10px 24px rgba(6,27,73,.20)!important;
}
#loginForm>button[type="submit"]:hover{background:var(--fo-primary-hover)!important}

/* ----------------------------------------------------------------------
   Top bar
   ---------------------------------------------------------------------- */
#app>header{
  position:fixed!important;
  z-index:6000!important;
  inset:0 0 auto 0!important;
  height:var(--fo-topbar)!important;
  padding:0!important;
  background:rgba(255,255,255,.96)!important;
  border:0!important;
  border-bottom:1px solid var(--fo-border)!important;
  box-shadow:0 5px 22px rgba(6,27,73,.065)!important;
  backdrop-filter:blur(18px);
  -webkit-backdrop-filter:blur(18px);
}
.topbar{
  width:100%!important;
  max-width:none!important;
  height:100%!important;
  min-height:0!important;
  margin:0!important;
  padding:0 18px!important;
  display:flex!important;
  align-items:center!important;
  justify-content:flex-start!important;
  gap:18px!important;
}
.fo-topbar-context{
  min-width:0;
  display:flex;
  flex:1 1 auto;
  flex-direction:column;
  justify-content:center;
  padding-left:18px;
  border-left:1px solid var(--fo-border);
  line-height:1.05;
}
.fo-topbar-context span{
  overflow:hidden;
  color:var(--fo-muted);
  font-size:9px;
  font-weight:850;
  letter-spacing:.09em;
  text-overflow:ellipsis;
  text-transform:uppercase;
  white-space:nowrap;
}
.fo-topbar-context strong{
  margin-top:4px;
  overflow:hidden;
  color:var(--fo-primary);
  font-size:16px;
  font-weight:900;
  letter-spacing:-.018em;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.header-actions{
  flex:0 0 auto;
  display:flex!important;
  align-items:center!important;
  gap:8px!important;
  min-width:0;
  margin-left:auto!important;
}
#loggedUserLabel{
  min-height:42px!important;
  display:flex!important;
  align-items:center!important;
  padding:0!important;
  overflow:hidden;
  background:var(--fo-surface-soft)!important;
  border:1px solid var(--fo-border)!important;
  border-radius:12px!important;
  box-shadow:none!important;
}
#loggedUserLabel .user-role-box{height:40px!important;min-width:40px!important}
#loggedUserLabel .user-name-box{padding:0 12px!important}
.logged-user-prefix{color:var(--fo-muted)!important}
.logged-user-name{color:var(--fo-primary)!important;font-weight:900!important}
.theme-toggle-btn,.logout-icon-btn{
  width:42px!important;
  height:42px!important;
  min-width:42px!important;
  margin:0!important;
  border:1px solid var(--fo-border)!important;
  border-radius:12px!important;
  background:#fff!important;
  box-shadow:none!important;
}
.theme-toggle-btn:hover,.logout-icon-btn:hover{background:#f4f7fb!important;border-color:var(--fo-border-strong)!important}
.theme-toggle-btn svg{stroke:var(--fo-primary)!important}
.logout-icon-btn svg{stroke:var(--fo-danger)!important}
#userStatsDropdown{display:none!important}

/* ----------------------------------------------------------------------
   App shell and full-width workspace
   ---------------------------------------------------------------------- */
.fo-app-mode #app{min-height:100svh;padding-top:var(--fo-topbar)!important}
.fo-app-mode #app>main{
  display:block!important;
  width:100%!important;
  max-width:none!important;
  min-height:calc(100svh - var(--fo-topbar));
  margin:0!important;
  padding:0!important;
  overflow:visible!important;
}
.fo-app-content{
  width:calc(100vw - var(--fo-sidebar));
  max-width:none!important;
  min-width:0;
  min-height:calc(100svh - var(--fo-topbar));
  margin-left:var(--fo-sidebar);
  padding:var(--fo-content-pad) var(--fo-content-pad) clamp(34px,4vw,64px)!important;
  overflow:visible;
}
.fo-app-content>*{width:100%;max-width:none!important;min-width:0}
.fo-home-view,.fo-app-view{
  width:100%!important;
  max-width:none!important;
  min-width:0!important;
  margin:0!important;
}
.fo-home-view{display:block}
#homeWidgets{
  width:100%!important;
  max-width:none!important;
  min-width:0!important;
  display:grid!important;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,460px),1fr))!important;
  gap:clamp(14px,1.25vw,22px)!important;
  align-items:start!important;
}
#homeWidgets>*{min-width:0!important;max-width:none!important}
#homeWidgets>#ticketsHomeSection,
#ticketsHomeSection,
#assignedTransfersFixed{grid-column:1/-1!important;width:100%!important;max-width:none!important;min-width:0!important}
#ticketsHomeSection{overflow:hidden!important}
#ticketsHomeSection #ticketContainer{width:100%!important;max-width:100%!important;min-width:0!important;overflow-x:auto!important;overflow-y:visible!important}

/* ----------------------------------------------------------------------
   Sidebar navigation
   ---------------------------------------------------------------------- */
.fo-app-mode #toolbarButtons{
  position:fixed!important;
  z-index:5100!important;
  top:var(--fo-topbar)!important;
  bottom:0!important;
  left:0!important;
  width:var(--fo-sidebar)!important;
  height:auto!important;
  margin:0!important;
  padding:18px 12px max(20px,env(safe-area-inset-bottom))!important;
  display:flex!important;
  flex-direction:column!important;
  align-items:stretch!important;
  gap:5px!important;
  overflow-x:hidden!important;
  overflow-y:auto!important;
  overscroll-behavior:contain;
  background:var(--fo-primary)!important;
  border:0!important;
  border-radius:0!important;
  box-shadow:none!important;
  cursor:default!important;
  isolation:isolate;
}
.fo-nav-heading{
  flex:0 0 auto;
  display:flex;
  flex-direction:column;
  margin:0 4px 9px;
  padding:3px 8px 15px;
  border-bottom:1px solid rgba(255,255,255,.14);
}
.fo-nav-heading span{color:#fff;font-size:11px;font-weight:900;letter-spacing:.13em;text-transform:uppercase}
.fo-nav-heading small{margin-top:5px;color:rgba(255,255,255,.52);font-size:9px;font-weight:780;letter-spacing:.06em}
#toolbarButtons .fo-nav-item,
#toolbarButtons .primary-action-btn.fo-nav-item,
#toolbarButtons #openTrafficBtn.fo-nav-item{
  position:relative!important;
  width:100%!important;
  min-width:0!important;
  min-height:46px!important;
  height:auto!important;
  flex:0 0 auto!important;
  margin:0!important;
  padding:9px 11px!important;
  display:flex!important;
  align-items:center!important;
  justify-content:flex-start!important;
  gap:10px!important;
  overflow:visible!important;
  border:1px solid transparent!important;
  border-radius:11px!important;
  background:transparent!important;
  color:rgba(255,255,255,.78)!important;
  box-shadow:none!important;
  transform:none!important;
  text-align:left!important;
  white-space:normal!important;
  font-size:13px!important;
  font-weight:760!important;
  line-height:1.18!important;
  transition:background .14s ease,color .14s ease,border-color .14s ease!important;
}
#toolbarButtons .fo-nav-item:hover,
#toolbarButtons #openTrafficBtn.fo-nav-item:hover{
  background:rgba(255,255,255,.09)!important;
  color:#fff!important;
  border-color:rgba(255,255,255,.05)!important;
}
#toolbarButtons .fo-nav-item.app-nav-active,
#toolbarButtons #openTrafficBtn.fo-nav-item.app-nav-active{
  background:#fff!important;
  color:var(--fo-primary)!important;
  border-color:#fff!important;
  box-shadow:0 8px 22px rgba(0,0,0,.15)!important;
}
#toolbarButtons .fo-nav-item.fo-nav-section-start{margin-top:12px!important}
#toolbarButtons .fo-nav-item.fo-nav-section-start:before{
  content:""!important;
  position:absolute!important;
  left:8px!important;
  right:8px!important;
  top:-7px!important;
  width:auto!important;
  height:1px!important;
  background:rgba(255,255,255,.13)!important;
}
#toolbarButtons .fo-nav-icon,
#toolbarButtons #openTrafficBtn.fo-nav-item .fo-nav-icon,
#toolbarButtons #openTrafficBtn.fo-nav-item span:first-child{
  width:28px!important;
  height:28px!important;
  min-width:28px!important;
  flex:0 0 28px!important;
  display:grid!important;
  place-items:center!important;
  padding:0!important;
  border:0!important;
  border-radius:8px!important;
  background:rgba(255,255,255,.08)!important;
  color:currentColor!important;
  filter:none!important;
}
#toolbarButtons .fo-nav-item.app-nav-active .fo-nav-icon,
#toolbarButtons #openTrafficBtn.fo-nav-item.app-nav-active .fo-nav-icon{
  background:var(--fo-accent-soft)!important;
}
#toolbarButtons .fo-nav-icon svg,
#toolbarButtons #openTrafficBtn.fo-nav-item svg{
  display:block!important;
  width:18px!important;
  height:18px!important;
  max-width:18px!important;
  stroke:currentColor!important;
  stroke-width:2!important;
  stroke-linecap:round!important;
  stroke-linejoin:round!important;
  fill:none!important;
}
#toolbarButtons #openTrafficBtn.fo-nav-item svg circle{fill:currentColor!important;stroke:none!important}
#toolbarButtons .fo-nav-label,
#toolbarButtons #openTrafficBtn.fo-nav-item span:last-child{
  min-width:0!important;
  color:inherit!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
  white-space:nowrap!important;
}
.toolbar-lock-badge{display:none!important}

/* ----------------------------------------------------------------------
   Application views (not popups)
   ---------------------------------------------------------------------- */
.fo-app-view{
  position:static!important;
  inset:auto!important;
  z-index:auto!important;
  display:none;
  height:auto!important;
  min-height:0!important;
  padding:0!important;
  background:transparent!important;
  overflow:visible!important;
  backdrop-filter:none!important;
  -webkit-backdrop-filter:none!important;
}
.fo-app-view>.fo-view-panel,
.fo-app-view>.modal,
.fo-app-view>.ticket-modal,
.fo-app-view>.all-active-transfers-modal{
  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;
}
.fo-app-view .popup-modal-body,
.fo-app-view .ticket-modal-body,
.fo-app-view .fo-view-body{
  width:100%!important;
  max-width:none!important;
  min-width:0!important;
  max-height:none!important;
  padding:0!important;
  overflow:visible!important;
  background:transparent!important;
}
.fo-app-view .popup-modal-header,
.fo-app-view .ticket-modal-header,
.fo-view-header{
  position:sticky!important;
  z-index:100!important;
  top:var(--fo-topbar)!important;
  min-height:68px!important;
  margin:calc(var(--fo-content-pad) * -1) calc(var(--fo-content-pad) * -1) 20px!important;
  padding:14px var(--fo-content-pad)!important;
  display:flex!important;
  align-items:center!important;
  justify-content:space-between!important;
  gap:16px!important;
  background:rgba(243,246,250,.94)!important;
  border:0!important;
  border-bottom:1px solid rgba(220,228,238,.78)!important;
  box-shadow:0 8px 18px rgba(6,27,73,.035)!important;
  backdrop-filter:blur(16px)!important;
  -webkit-backdrop-filter:blur(16px)!important;
}
.fo-app-view .popup-modal-title,
.fo-app-view .ticket-modal-title,
.fo-view-header h2{
  min-width:0!important;
  margin:0!important;
  color:var(--fo-primary)!important;
  font-size:clamp(21px,1.55vw,28px)!important;
  font-weight:900!important;
  letter-spacing:-.035em!important;
  line-height:1.08!important;
}
.fo-app-view .popup-modal-title{display:flex!important;align-items:center!important;gap:11px!important}
.fo-app-view .popup-modal-title .home-widget-title-icon,
.fo-app-view .popup-modal-title .traffic-widget-title-icon{
  width:38px!important;
  height:38px!important;
  min-width:38px!important;
  display:grid!important;
  place-items:center!important;
  border-radius:11px!important;
  background:var(--fo-primary)!important;
  box-shadow:none!important;
}
.fo-app-view .popup-modal-title .home-widget-title-icon svg,
.fo-app-view .popup-modal-title .traffic-widget-title-icon svg{width:20px!important;height:20px!important;stroke:#fff!important}
.fo-eyebrow{display:block;margin-bottom:4px;color:var(--fo-muted);font-size:10px;font-weight:900;letter-spacing:.12em;text-transform:uppercase}
.fo-back-btn,.app-view-back-btn{
  flex:0 0 auto!important;
  min-height:40px!important;
  padding:0 13px!important;
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  gap:7px!important;
  border:1px solid var(--fo-border-strong)!important;
  border-radius:10px!important;
  background:#fff!important;
  color:var(--fo-primary)!important;
  box-shadow:none!important;
  font-size:13px!important;
  font-weight:850!important;
}
.fo-back-btn:hover,.app-view-back-btn:hover{background:#f4f7fb!important;border-color:#b8c5d5!important}

/* ----------------------------------------------------------------------
   Surface, typography and controls
   ---------------------------------------------------------------------- */
.card,.home-widget,.fixed-transfers-widget,.customer-list-card,.users-role-section,.ticket-section,
.activity-form-box,.machine-create-box,.planning-board,.permissions-card,.traffic-access-info{
  border:1px solid var(--fo-border)!important;
  border-radius:var(--fo-radius)!important;
  background:var(--fo-surface)!important;
  box-shadow:var(--fo-shadow-xs)!important;
}
.home-widget,.fixed-transfers-widget{overflow:hidden!important}
.home-widget-header,.list-header,.fixed-transfers-header{
  border-bottom:1px solid var(--fo-border)!important;
  background:var(--fo-surface)!important;
}
.home-widget-title,.fixed-transfers-title,.list-header h2,.card h2,.card h3{color:var(--fo-primary)!important}
.empty{
  padding:28px!important;
  border:1px dashed var(--fo-border-strong)!important;
  border-radius:12px!important;
  background:var(--fo-surface-soft)!important;
  color:var(--fo-muted)!important;
  text-align:center!important;
  font-weight:750!important;
}

input,select,textarea{
  min-width:0;
  min-height:46px!important;
  padding:10px 12px!important;
  border:1px solid var(--fo-border-strong)!important;
  border-radius:10px!important;
  background:#fff!important;
  color:var(--fo-text)!important;
  box-shadow:0 1px 2px rgba(6,27,73,.02)!important;
}
textarea{min-height:110px!important;resize:vertical}
input::placeholder,textarea::placeholder{color:#93a0b2!important}
input:hover,select:hover,textarea:hover{border-color:#aebbcf!important}
input:focus,select:focus,textarea:focus{border-color:var(--fo-accent)!important;box-shadow:0 0 0 3px rgba(47,107,215,.12)!important;outline:0!important}
label{color:#3f4d61;font-weight:760}
.filters{
  width:100%!important;
  max-width:none!important;
  padding:13px!important;
  display:flex!important;
  align-items:end!important;
  flex-wrap:wrap!important;
  gap:10px!important;
  border:1px solid var(--fo-border)!important;
  border-radius:13px!important;
  background:var(--fo-surface-soft)!important;
}
.filters>*{min-width:160px;max-width:100%}

.primary-action-btn:not(.fo-nav-item),
button[type="submit"]:not(.fo-nav-item){
  min-height:44px!important;
  padding:9px 15px!important;
  border:1px solid var(--fo-primary)!important;
  border-radius:10px!important;
  background:var(--fo-primary)!important;
  color:#fff!important;
  box-shadow:0 6px 16px rgba(6,27,73,.14)!important;
  font-weight:850!important;
}
.primary-action-btn:not(.fo-nav-item):hover,
button[type="submit"]:not(.fo-nav-item):hover{background:var(--fo-primary-hover)!important;border-color:var(--fo-primary-hover)!important;transform:none!important}
.secondary{
  min-height:42px!important;
  padding:8px 13px!important;
  border:1px solid var(--fo-border-strong)!important;
  border-radius:10px!important;
  background:#fff!important;
  color:var(--fo-primary)!important;
  box-shadow:none!important;
  font-weight:820!important;
}
.secondary:hover{background:#f4f7fb!important;border-color:#b7c4d5!important}
.danger{
  min-height:42px!important;
  padding:8px 13px!important;
  border:1px solid #f0b5b0!important;
  border-radius:10px!important;
  background:#fff6f5!important;
  color:var(--fo-danger)!important;
  box-shadow:none!important;
  font-weight:850!important;
}
.danger:hover{background:#feeceb!important}

/* ----------------------------------------------------------------------
   Tables, lists and common data components
   ---------------------------------------------------------------------- */
table{width:100%;border-collapse:separate!important;border-spacing:0!important}
th{
  background:#f3f6fa!important;
  color:#526176!important;
  border-color:var(--fo-border)!important;
  font-size:10.5px!important;
  font-weight:900!important;
  letter-spacing:.055em!important;
  text-transform:uppercase!important;
}
td{color:#26364c!important;border-color:#e8edf3!important}
tbody tr:hover td{background:#fafcff!important}
.users-role-title,.ticket-group-title,.machine-cost-group-header{
  background:#f6f8fb!important;
  color:var(--fo-primary)!important;
  border-color:var(--fo-border)!important;
}
.users-role-section,.ticket-section{overflow:hidden!important}
.customer-list-grid{width:100%!important;grid-template-columns:repeat(auto-fit,minmax(min(100%,360px),1fr))!important;gap:16px!important}
.customer-list-card{padding:18px!important}
.customer-list-actions{display:flex!important;flex-wrap:wrap!important;gap:8px!important}
.customer-list-actions>*{flex:0 0 auto}

/* Force the legacy assistance table to stay inside the available width. */
.main-tickets-table,.main-ticket-inner-table,.main-ticket-unified-row,.main-ticket-unified-cell,.main-ticket-unified-box{max-width:100%!important;min-width:0!important}
.ticket-section-body,.main-tickets-table{overflow-x:auto!important;overscroll-behavior-inline:contain}

/* Machines */
.machine-year-folder-grid,.machine-model-folder-grid,.machine-folder-grid{width:100%!important;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr))!important;gap:12px!important}
.machine-year-folder-card,.machine-model-folder-card,.machine-folder-card{
  overflow:hidden!important;
  border:1px solid var(--fo-border)!important;
  border-radius:13px!important;
  background:#fff!important;
  box-shadow:none!important;
}
.machine-year-folder-main,.machine-model-folder-main,.machine-folder-main{background:#fff!important;color:var(--fo-primary)!important}
.machine-year-folder-main:hover,.machine-model-folder-main:hover,.machine-folder-main:hover{background:#f6f8fb!important}
.machine-folder-serial{color:var(--fo-primary)!important}

/* Calendar */
.calendar-grid,.schedule-calendar-grid{gap:5px!important}
.calendar-day,.schedule-day{border:1px solid var(--fo-border)!important;border-radius:10px!important;background:#fff!important;box-shadow:none!important}
.calendar-ticket{border-radius:7px!important;box-shadow:none!important}

/* Traffic: identical visual language to every other section. */
#trafficAccessPopup.fo-app-view .traffic-access-modal{width:100%!important;max-width:none!important}
#trafficAccessPopup.fo-app-view .traffic-access-info{
  margin-bottom:14px!important;
  padding:13px 15px!important;
  background:var(--fo-accent-soft)!important;
  color:#27466f!important;
  font-weight:720!important;
}
#trafficAccessPopupBody{width:100%!important;max-width:none!important;overflow-x:auto!important}
.traffic-access-table{width:100%!important;min-width:720px!important}

/* ----------------------------------------------------------------------
   Real modal dialogs only
   ---------------------------------------------------------------------- */
.modal-backdrop:not(.fo-app-view){
  position:fixed!important;
  inset:0!important;
  z-index:9000!important;
  display:none;
  align-items:center;
  justify-content:center;
  padding:18px!important;
  background:rgba(7,16,34,.56)!important;
  backdrop-filter:blur(7px);
  -webkit-backdrop-filter:blur(7px);
}
.modal-backdrop:not(.fo-app-view)>.modal,
.modal-backdrop:not(.fo-app-view)>.ticket-modal,
.modal-backdrop:not(.fo-app-view)>.all-active-transfers-modal{
  width:min(100%,760px)!important;
  min-width:0!important;
  max-width:760px!important;
  max-height:min(88svh,900px)!important;
  margin:auto!important;
  border:1px solid rgba(255,255,255,.78)!important;
  border-radius:20px!important;
  background:#fff!important;
  box-shadow:var(--fo-shadow-lg)!important;
  overflow:auto!important;
}
.modal-backdrop:not(.fo-app-view) .popup-modal-header,
.modal-backdrop:not(.fo-app-view) .ticket-modal-header{
  position:sticky!important;
  z-index:4!important;
  top:0!important;
  margin:0!important;
  padding:15px 18px!important;
  background:#fff!important;
  border-bottom:1px solid var(--fo-border)!important;
}

/* ----------------------------------------------------------------------
   Mobile navigation primitives — one overlay, one drawer, correct z-index
   ---------------------------------------------------------------------- */
.mobile-menu-toggle,.mobile-menu-overlay{display:none}
body.mobile-menu-open:after{display:none!important;content:none!important;pointer-events:none!important}

/* ----------------------------------------------------------------------
   Dark mode
   ---------------------------------------------------------------------- */
body.dark-mode{
  --fo-bg:#0b1321;
  --fo-surface:#111c2d;
  --fo-surface-soft:#162236;
  --fo-surface-raised:#152135;
  --fo-text:#e8eef8;
  --fo-text-strong:#f4f7fb;
  --fo-muted:#9ba9bb;
  --fo-border:#26364c;
  --fo-border-strong:#394b64;
  background:var(--fo-bg)!important;
  color:var(--fo-text)!important;
}
body.dark-mode #app>header{background:rgba(17,28,45,.96)!important;border-color:var(--fo-border)!important}
body.dark-mode .fo-brand-wordmark strong,body.dark-mode .fo-topbar-context strong{color:#fff}
body.dark-mode .fo-brand-wordmark span{color:#9eacc0}
body.dark-mode .fo-topbar-context{border-color:var(--fo-border)}
body.dark-mode #loggedUserLabel,body.dark-mode .theme-toggle-btn,body.dark-mode .logout-icon-btn{background:#142033!important;border-color:var(--fo-border)!important}
body.dark-mode .theme-toggle-btn svg{stroke:#fff!important}
body.dark-mode .fo-app-view .popup-modal-header,
body.dark-mode .fo-app-view .ticket-modal-header,
body.dark-mode .fo-view-header{background:rgba(11,19,33,.94)!important;border-color:var(--fo-border)!important}
body.dark-mode .card,body.dark-mode .home-widget,body.dark-mode .fixed-transfers-widget,
body.dark-mode .customer-list-card,body.dark-mode .users-role-section,body.dark-mode .ticket-section,
body.dark-mode .activity-form-box,body.dark-mode .machine-create-box,body.dark-mode .planning-board{
  background:var(--fo-surface)!important;
  border-color:var(--fo-border)!important;
}
body.dark-mode .home-widget-header,body.dark-mode .list-header,body.dark-mode .fixed-transfers-header{background:var(--fo-surface)!important;border-color:var(--fo-border)!important}
body.dark-mode input,body.dark-mode select,body.dark-mode textarea,body.dark-mode .secondary,body.dark-mode .fo-back-btn{
  background:#111c2d!important;
  color:#e8eef8!important;
  border-color:var(--fo-border-strong)!important;
}
body.dark-mode .filters,body.dark-mode th,body.dark-mode .users-role-title,body.dark-mode .ticket-group-title,body.dark-mode .machine-cost-group-header{background:#162236!important;color:#b9c5d5!important;border-color:var(--fo-border)!important}
body.dark-mode td{color:#dce5f1!important;border-color:#26364c!important}
body.dark-mode tbody tr:hover td{background:#142033!important}
body.dark-mode .machine-year-folder-card,body.dark-mode .machine-model-folder-card,body.dark-mode .machine-folder-card,
body.dark-mode .machine-year-folder-main,body.dark-mode .machine-model-folder-main,body.dark-mode .machine-folder-main,
body.dark-mode .calendar-day,body.dark-mode .schedule-day{background:var(--fo-surface)!important;border-color:var(--fo-border)!important;color:#e7edf6!important}
body.dark-mode .empty{background:var(--fo-surface-soft)!important;border-color:var(--fo-border-strong)!important}
body.dark-mode .modal-backdrop:not(.fo-app-view)>.modal,
body.dark-mode .modal-backdrop:not(.fo-app-view)>.ticket-modal,
body.dark-mode .modal-backdrop:not(.fo-app-view)>.all-active-transfers-modal{background:var(--fo-surface)!important;border-color:var(--fo-border-strong)!important}
body.dark-mode .modal-backdrop:not(.fo-app-view) .popup-modal-header,
body.dark-mode .modal-backdrop:not(.fo-app-view) .ticket-modal-header{background:var(--fo-surface)!important;border-color:var(--fo-border)!important}
body.dark-mode #trafficAccessPopup.fo-app-view .traffic-access-info{background:#152b4f!important;color:#c8d9f6!important}

/* ----------------------------------------------------------------------
   Responsive shell
   ---------------------------------------------------------------------- */
@media (max-width:1023px){
  :root{--fo-topbar:64px;--fo-sidebar:min(86vw,320px);--fo-content-pad:clamp(14px,3vw,24px)}

  #app>header{height:var(--fo-topbar)!important;z-index:7000!important}
  .topbar{padding:0 12px!important;gap:10px!important}
  .mobile-menu-toggle{
    position:relative!important;
    inset:auto!important;
    z-index:7300!important;
    width:42px!important;
    height:42px!important;
    min-width:42px!important;
    flex:0 0 42px!important;
    display:inline-flex!important;
    align-items:center!important;
    justify-content:center!important;
    margin:0!important;
    padding:0!important;
    border:1px solid var(--fo-border)!important;
    border-radius:11px!important;
    background:#fff!important;
    color:var(--fo-primary)!important;
    box-shadow:none!important;
  }
  .mobile-menu-toggle span,
  .mobile-menu-toggle:before,
  .mobile-menu-toggle:after{
    content:"";
    position:absolute;
    left:10px;
    width:20px;
    height:2px;
    display:block;
    border-radius:999px;
    background:currentColor!important;
    transition:transform .18s ease,opacity .18s ease,top .18s ease;
  }
  .mobile-menu-toggle:before{top:13px}
  .mobile-menu-toggle span{top:19px}
  .mobile-menu-toggle:after{top:25px}
  body.mobile-menu-open .mobile-menu-toggle:before{top:19px;transform:rotate(45deg)}
  body.mobile-menu-open .mobile-menu-toggle:after{top:19px;transform:rotate(-45deg)}
  body.mobile-menu-open .mobile-menu-toggle span{opacity:0}

  .mobile-menu-overlay{
    position:fixed!important;
    z-index:7100!important;
    inset:var(--fo-topbar) 0 0!important;
    display:block!important;
    opacity:0;
    pointer-events:none;
    background:rgba(7,16,34,.48)!important;
    backdrop-filter:blur(3px);
    -webkit-backdrop-filter:blur(3px);
    transition:opacity .18s ease;
  }
  body.mobile-menu-open .mobile-menu-overlay{opacity:1;pointer-events:auto}

  .fo-app-mode #toolbarButtons,
  .fo-app-mode .toolbar-card#toolbarButtons{
    z-index:7200!important;
    top:var(--fo-topbar)!important;
    bottom:0!important;
    left:0!important;
    width:var(--fo-sidebar)!important;
    height:auto!important;
    padding:18px 12px max(20px,env(safe-area-inset-bottom))!important;
    border-radius:0 18px 18px 0!important;
    transform:translate3d(-103%,0,0)!important;
    transition:transform .21s ease!important;
    box-shadow:20px 0 50px rgba(4,19,52,.30)!important;
    pointer-events:auto!important;
    visibility:visible!important;
    isolation:isolate!important;
  }
  body.mobile-menu-open #toolbarButtons,
  body.mobile-menu-open .toolbar-card#toolbarButtons{transform:translate3d(0,0,0)!important}

  .fo-app-content{width:100%!important;margin-left:0!important;padding:var(--fo-content-pad) var(--fo-content-pad) 36px!important}
  .fo-app-view .popup-modal-header,.fo-app-view .ticket-modal-header,.fo-view-header{
    top:var(--fo-topbar)!important;
    margin:calc(var(--fo-content-pad) * -1) calc(var(--fo-content-pad) * -1) 16px!important;
    padding:12px var(--fo-content-pad)!important;
  }
  .fo-brand-wordmark-header{display:none}
  .fo-topbar-context{padding-left:12px}
  #loggedUserLabel .logged-user-prefix{display:none!important}
  body.mobile-menu-open{overflow:hidden!important}
}

@media (max-width:720px){
  :root{--fo-content-pad:12px}
  .topbar{padding:0 9px!important;gap:8px!important}
  .fo-header-brand{display:none!important}
  .fo-topbar-context{padding-left:0;border-left:0}
  .fo-topbar-context span{display:none}
  .fo-topbar-context strong{margin:0;font-size:15px}
  .header-actions{gap:6px!important}
  #loggedUserLabel{max-width:132px!important;height:40px!important;min-height:40px!important}
  #loggedUserLabel .user-role-box{display:none!important}
  #loggedUserLabel .user-name-box{min-width:0!important;padding:0 10px!important}
  .logged-user-name{display:block!important;max-width:104px!important;overflow:hidden!important;text-overflow:ellipsis!important;white-space:nowrap!important}
  .theme-toggle-btn,.logout-icon-btn{width:40px!important;height:40px!important;min-width:40px!important}

  .fo-app-view .popup-modal-header,.fo-app-view .ticket-modal-header,.fo-view-header{
    min-height:58px!important;
    margin-bottom:12px!important;
    gap:9px!important;
  }
  .fo-app-view .popup-modal-title,.fo-app-view .ticket-modal-title,.fo-view-header h2{font-size:20px!important}
  .fo-app-view .popup-modal-title .home-widget-title-icon,.fo-app-view .popup-modal-title .traffic-widget-title-icon{width:34px!important;height:34px!important;min-width:34px!important}
  .fo-back-btn,.app-view-back-btn{min-height:38px!important;padding:0 10px!important;font-size:12px!important}

  #homeWidgets{grid-template-columns:1fr!important;gap:12px!important}
  .customer-list-grid,.machine-year-folder-grid,.machine-model-folder-grid,.machine-folder-grid{grid-template-columns:1fr!important}
  .customer-list-meta{grid-template-columns:1fr!important}
  .filters{display:grid!important;grid-template-columns:1fr!important;align-items:stretch!important;gap:9px!important;padding:11px!important}
  .filters>*{width:100%!important;max-width:none!important;min-width:0!important}
  input,select,textarea{font-size:16px!important}

  .users-role-table thead,.customer-machines-table thead{display:none!important}
  .users-role-table,.users-role-table tbody,.users-role-table tr,.users-role-table td,
  .customer-machines-table,.customer-machines-table tbody,.customer-machines-table tr,.customer-machines-table td{display:block!important;width:100%!important}
  .users-role-table tr,.customer-machines-table tr{padding:12px!important;border-bottom:1px solid var(--fo-border)!important}
  .users-role-table td,.customer-machines-table td{padding:6px 0!important;border:0!important;text-align:left!important}
  .users-role-table td[data-label]:before{content:attr(data-label);display:block;margin-bottom:3px;color:var(--fo-muted);font-size:10px;font-weight:900;letter-spacing:.06em;text-transform:uppercase}

  .modal-backdrop:not(.fo-app-view){padding:0!important;align-items:flex-end!important}
  .modal-backdrop:not(.fo-app-view)>.modal,
  .modal-backdrop:not(.fo-app-view)>.ticket-modal,
  .modal-backdrop:not(.fo-app-view)>.all-active-transfers-modal{
    width:100%!important;
    max-width:none!important;
    max-height:90svh!important;
    margin:0!important;
    border-radius:18px 18px 0 0!important;
    border-bottom:0!important;
  }
  .traffic-access-table{min-width:620px!important}
}

@media (max-width:460px){
  #loggedUserLabel{max-width:96px!important}
  .logged-user-name{max-width:72px!important}
  .theme-toggle-btn{display:none!important}
  .fo-app-view .popup-modal-title .home-widget-title-icon,.fo-app-view .popup-modal-title .traffic-widget-title-icon{display:none!important}
  .fo-back-btn span:last-child,.app-view-back-btn span:last-child{display:none}
  .fo-back-btn,.app-view-back-btn{width:38px!important;min-width:38px!important;padding:0!important}
}

@media (min-width:1440px){
  :root{--fo-sidebar:clamp(244px,13.5vw,260px);--fo-content-pad:clamp(18px,1.2vw,30px)}
  #homeWidgets{grid-template-columns:repeat(auto-fit,minmax(min(100%,520px),1fr))!important}
}

@media (min-width:2200px){
  :root{--fo-sidebar:268px;--fo-content-pad:34px}
  #homeWidgets{grid-template-columns:repeat(auto-fit,minmax(560px,1fr))!important}
}

@media (prefers-reduced-motion:reduce){
  *,*:before,*:after{scroll-behavior:auto!important;transition:none!important;animation:none!important}
}

/* V5.1 — coerenza permessi, brand drawer e voce Traffico */
#toolbarButtons .fo-nav-item[style*="display: none"],
#toolbarButtons .fo-nav-item[style*="display:none"]{display:none!important}
.fo-nav-brand{display:none}
.fo-nav-heading-title{color:#fff!important;font-size:11px!important;font-weight:900!important;letter-spacing:.13em!important;text-transform:uppercase!important}
.fo-nav-heading-subtitle{margin-top:5px!important;color:rgba(255,255,255,.52)!important;font-size:9px!important;font-weight:780!important;letter-spacing:.06em!important;text-transform:none!important}
@media (max-width:1023px){
  .fo-nav-heading{padding:0 6px 14px!important}
  .fo-nav-brand{display:flex;align-items:center;gap:10px;margin-bottom:14px;padding:2px 2px 13px;border-bottom:1px solid rgba(255,255,255,.14)}
  .fo-nav-brand>img{display:block;width:40px;height:40px;flex:0 0 40px}
  .fo-nav-brand>span{display:flex;min-width:0;flex-direction:column;line-height:1}
  .fo-nav-brand strong{color:#fff;font-size:17px;font-weight:900;letter-spacing:-.035em}
  .fo-nav-brand small{margin-top:4px!important;color:rgba(255,255,255,.58)!important;font-size:8px!important;font-weight:850!important;letter-spacing:.18em!important;text-transform:uppercase!important}
}

/* V5 coherence overrides for legacy widgets with stronger selectors. */
#assignedTransfersFixed.fixed-transfers-widget,
#assignedTransfersFixed{
  width:100%!important;
  max-width:none!important;
  min-width:0!important;
  overflow:hidden!important;
  border:1px solid var(--fo-border)!important;
  border-radius:var(--fo-radius)!important;
  background:var(--fo-surface)!important;
  box-shadow:var(--fo-shadow-xs)!important;
}
#assignedTransfersFixed .fixed-transfers-header{
  min-height:62px!important;
  padding:15px 18px!important;
  border:0!important;
  border-bottom:1px solid var(--fo-border)!important;
  background:var(--fo-surface)!important;
}
#assignedTransfersFixed .fixed-transfers-title{color:var(--fo-primary)!important}
#assignedTransfersFixed .fixed-transfers-count{
  min-width:30px!important;
  height:30px!important;
  display:inline-grid!important;
  place-items:center!important;
  border-radius:999px!important;
  background:var(--fo-primary)!important;
  color:#fff!important;
  box-shadow:none!important;
}
body.dark-mode #assignedTransfersFixed{background:var(--fo-surface)!important;border-color:var(--fo-border)!important}
body.dark-mode #assignedTransfersFixed .fixed-transfers-header{background:var(--fo-surface)!important;border-color:var(--fo-border)!important}

/* V5.2 — elimina definitivamente il vecchio titolo "Menu" sovrapposto al drawer. */
.fo-app-mode #toolbarButtons.toolbar-card:before,
.fo-app-mode #toolbarButtons:before{
  content:none!important;
  display:none!important;
}

/* ======================================================================
   V5.3 — fluid workspace, menu mobile affidabile, logo e Traffico coerenti
   ====================================================================== */

/* Ogni vista usa realmente tutta la superficie disponibile. */
body.fo-app-mode #app,
body.fo-app-mode #app > main,
body.fo-app-mode #appContent{
  width:100%!important;
  max-width:none!important;
}
body.fo-app-mode #appContent{
  width:calc(100vw - var(--fo-sidebar))!important;
  padding-inline:var(--fo-content-pad)!important;
}
body.fo-app-mode #appContent > .fo-home-view,
body.fo-app-mode #appContent > .fo-app-view,
body.fo-app-mode #appContent .fo-view-panel,
body.fo-app-mode #appContent .fo-view-body,
body.fo-app-mode #appContent .popup-modal-body,
body.fo-app-mode #appContent .ticket-modal-body{
  inline-size:100%!important;
  max-inline-size:none!important;
  min-inline-size:0!important;
}
body.fo-app-mode #appContent :where(.card,.home-widget,.fixed-transfers-widget,.customer-list-card,.users-role-section,.ticket-section,.activity-form-box,.machine-create-box,.planning-board,.permissions-card){
  max-width:none!important;
}
#homeWidgets{
  grid-template-columns:repeat(auto-fit,minmax(min(100%,420px),1fr))!important;
}
.customer-list-grid{
  grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr))!important;
}
.machine-year-folder-grid,.machine-model-folder-grid,.machine-folder-grid{
  grid-template-columns:repeat(auto-fit,minmax(min(100%,270px),1fr))!important;
}

/* Nuovo wordmark: compatto e leggibile in tutte le dimensioni. */
.fo-brand-wordmark strong,.fo-nav-brand strong{text-transform:uppercase!important}
.fo-brand-wordmark span,.fo-nav-brand small{text-transform:uppercase!important}
.fo-header-brand{gap:10px!important}
.fo-header-brand:hover .fo-brand-mark{transform:translateY(-1px)}
.fo-brand-mark{transition:transform .16s ease,filter .16s ease}

/* Traffico è una vista nativa identica alle altre, non un popup promosso. */
.fo-view-heading{min-width:0}
.fo-view-heading p{
  margin:5px 0 0;
  color:var(--fo-muted);
  font-size:12px;
  font-weight:650;
}
.fo-view-header-actions{display:flex;align-items:center;gap:8px;flex:0 0 auto}
.fo-section-intro{
  width:100%;
  margin-bottom:14px;
  padding:14px 16px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  border:1px solid var(--fo-border);
  border-radius:13px;
  background:var(--fo-surface-soft);
}
.fo-section-intro strong{color:var(--fo-primary);font-size:14px;font-weight:900}
.fo-section-intro span{color:var(--fo-muted);font-size:12px;font-weight:650;text-align:right}
.fo-data-surface{
  width:100%;
  max-width:none;
  overflow:hidden;
  border:1px solid var(--fo-border);
  border-radius:var(--fo-radius);
  background:var(--fo-surface);
  box-shadow:var(--fo-shadow-xs);
}
#trafficAccessViewBody{width:100%;max-width:none;overflow-x:auto}
#trafficAccessView .traffic-access-table{width:100%!important;min-width:720px!important;margin:0!important}
#trafficAccessView .traffic-access-table th,
#trafficAccessView .traffic-access-table td{padding:14px 16px!important}
#trafficAccessView .traffic-access-role{margin-top:3px;color:var(--fo-muted)!important;font-size:11px;font-weight:750}
body.dark-mode .fo-section-intro,body.dark-mode .fo-data-surface{background:var(--fo-surface)!important;border-color:var(--fo-border)!important}
body.dark-mode .fo-section-intro strong{color:#fff!important}

/* Il pulsante Traffico annulla ogni vecchio stile legacy e usa lo stesso componente del menu. */
body.fo-app-mode #app #toolbarButtons #openTrafficBtn.fo-nav-item,
body.fo-app-mode #app #toolbarButtons #openTrafficBtn.primary-action-btn.fo-nav-item{
  position:relative!important;
  width:100%!important;
  min-width:0!important;
  min-height:46px!important;
  height:auto!important;
  margin:0!important;
  padding:9px 11px!important;
  display:flex!important;
  align-items:center!important;
  justify-content:flex-start!important;
  gap:10px!important;
  border:1px solid transparent!important;
  border-radius:11px!important;
  background:transparent!important;
  color:rgba(255,255,255,.78)!important;
  box-shadow:none!important;
  transform:none!important;
  font-size:13px!important;
  font-weight:760!important;
  line-height:1.18!important;
}
body.fo-app-mode #app #toolbarButtons #openTrafficBtn.fo-nav-item:hover{
  background:rgba(255,255,255,.09)!important;
  color:#fff!important;
  border-color:rgba(255,255,255,.05)!important;
}
body.fo-app-mode #app #toolbarButtons #openTrafficBtn.fo-nav-item.app-nav-active{
  background:#fff!important;
  color:var(--fo-primary)!important;
  border-color:#fff!important;
  box-shadow:0 8px 22px rgba(0,0,0,.15)!important;
}
body.fo-app-mode #app #toolbarButtons #openTrafficBtn.fo-nav-item .fo-nav-icon{
  width:28px!important;
  height:28px!important;
  min-width:28px!important;
  flex:0 0 28px!important;
  display:grid!important;
  place-items:center!important;
  border:0!important;
  border-radius:8px!important;
  background:rgba(255,255,255,.10)!important;
  color:inherit!important;
}
body.fo-app-mode #app #toolbarButtons #openTrafficBtn.fo-nav-item.app-nav-active .fo-nav-icon{background:var(--fo-accent-soft)!important}
body.fo-app-mode #app #toolbarButtons #openTrafficBtn.fo-nav-item .fo-nav-label{
  min-width:0!important;
  color:inherit!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
  white-space:nowrap!important;
}
body.fo-app-mode #app #toolbarButtons #openTrafficBtn.fo-nav-item svg{
  width:17px!important;
  height:17px!important;
  display:block!important;
  stroke:currentColor!important;
  fill:none!important;
}
body.fo-app-mode #app #toolbarButtons #openTrafficBtn.fo-nav-item svg circle{fill:currentColor!important;stroke:none!important}

/* Drawer mobile: livelli certi, nessuna ombra/overlay sopra i pulsanti. */
@media (max-width:1023px){
  body.fo-app-mode #app > header{
    z-index:10000!important;
  }
  body.fo-app-mode #app > main{
    position:relative!important;
    z-index:auto!important;
    overflow:visible!important;
    transform:none!important;
    filter:none!important;
    isolation:auto!important;
  }
  body.fo-app-mode #appContent{
    width:100%!important;
    margin-left:0!important;
    padding-inline:var(--fo-content-pad)!important;
  }
  body.fo-app-mode .mobile-menu-toggle{
    z-index:10100!important;
    pointer-events:auto!important;
  }
  body.fo-app-mode .mobile-menu-overlay{
    z-index:9000!important;
    inset:var(--fo-topbar) 0 0!important;
    pointer-events:none!important;
  }
  body.fo-app-mode.mobile-menu-open .mobile-menu-overlay{
    opacity:1!important;
    pointer-events:auto!important;
  }
  body.fo-app-mode #app #toolbarButtons.toolbar-card{
    position:fixed!important;
    z-index:9500!important;
    top:var(--fo-topbar)!important;
    right:auto!important;
    bottom:0!important;
    left:0!important;
    width:min(88vw,324px)!important;
    height:calc(100svh - var(--fo-topbar))!important;
    max-height:calc(100svh - var(--fo-topbar))!important;
    margin:0!important;
    padding:16px 12px max(20px,env(safe-area-inset-bottom))!important;
    display:flex!important;
    flex-direction:column!important;
    gap:5px!important;
    overflow-x:hidden!important;
    overflow-y:auto!important;
    overscroll-behavior:contain!important;
    -webkit-overflow-scrolling:touch;
    border:0!important;
    border-radius:0 18px 18px 0!important;
    background:var(--fo-primary)!important;
    box-shadow:18px 0 48px rgba(2,12,34,.28)!important;
    transform:translate3d(-104%,0,0)!important;
    opacity:.995!important;
    visibility:visible!important;
    pointer-events:none!important;
    touch-action:pan-y!important;
    isolation:isolate!important;
    transition:transform .2s cubic-bezier(.2,.8,.2,1)!important;
  }
  body.fo-app-mode.mobile-menu-open #app #toolbarButtons.toolbar-card{
    transform:translate3d(0,0,0)!important;
    pointer-events:auto!important;
  }
  body.fo-app-mode #app #toolbarButtons.toolbar-card::before,
  body.fo-app-mode #app #toolbarButtons.toolbar-card::after{
    content:""!important;
    display:none!important;
    visibility:hidden!important;
    pointer-events:none!important;
  }
  body.fo-app-mode #app #toolbarButtons.toolbar-card > *{
    position:relative;
    z-index:2;
    pointer-events:auto!important;
  }
  body.fo-app-mode #app #toolbarButtons .fo-nav-item{
    min-height:48px!important;
    padding:9px 10px!important;
    touch-action:manipulation!important;
  }
  body.fo-app-mode #app #toolbarButtons #openTrafficBtn.fo-nav-item{
    min-height:48px!important;
    padding:9px 10px!important;
  }
  .fo-nav-brand{margin-bottom:10px!important;padding:0 2px 14px!important}
  .fo-nav-brand>img{width:42px!important;height:42px!important;flex-basis:42px!important}
  .fo-nav-brand strong{font-size:16px!important;letter-spacing:-.01em!important}
  .fo-nav-brand small{font-size:7.5px!important;letter-spacing:.22em!important}
  .fo-nav-heading-title{margin-top:2px!important}
  .fo-view-heading p{display:none}
  .fo-section-intro{align-items:flex-start;flex-direction:column}
  .fo-section-intro span{text-align:left}
}

@media (max-width:720px){
  .fo-view-header-actions{gap:6px}
  .fo-refresh-btn{min-width:40px!important;width:40px!important;padding:0!important;font-size:0!important}
  .fo-refresh-btn:before{content:"↻";font-size:19px;line-height:1}
}

@media (min-width:1024px) and (max-width:1279px){
  :root{--fo-sidebar:232px;--fo-content-pad:16px}
}

@media (min-width:1800px){
  #homeWidgets{grid-template-columns:repeat(auto-fit,minmax(390px,1fr))!important}
  .customer-list-grid{grid-template-columns:repeat(auto-fit,minmax(300px,1fr))!important}
  .machine-year-folder-grid,.machine-model-folder-grid,.machine-folder-grid{grid-template-columns:repeat(auto-fit,minmax(250px,1fr))!important}
}

/* Visibilità Traffico: menu stabile, ma sempre subordinato all'autorizzazione server. */
body.fo-app-mode #app #toolbarButtons #openTrafficBtn.fo-nav-item[data-permission-allowed="false"]{
  display:none!important;
}
body.fo-app-mode #app #toolbarButtons #openTrafficBtn.fo-nav-item[data-permission-allowed="true"]{
  display:flex!important;
}

/* Card Traffico in home: stessi colori, icona e superfici del resto dell'app. */
.traffic-home-panel{
  border:1px solid var(--fo-border)!important;
  border-radius:13px!important;
  background:var(--fo-surface-soft)!important;
  box-shadow:none!important;
}
.traffic-home-icon,.traffic-widget-title-icon{background:var(--fo-primary)!important}
.traffic-home-title{color:var(--fo-primary)!important}
.traffic-home-text{color:var(--fo-muted)!important}
body.dark-mode .traffic-home-panel{background:var(--fo-surface-soft)!important;border-color:var(--fo-border)!important}
body.dark-mode .traffic-home-title{color:#fff!important}