/* ==========================================================================
   UNIFIX — Executive Liquid Operations
   unifix-theme.css — unico foglio di stile proprietario
   Convive con Bootstrap 5.3 (caricare DOPO bootstrap.min.css)
   Prefisso componenti: ufx-
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. DESIGN TOKEN
   -------------------------------------------------------------------------- */
:root {
  /* Brand — derivati dai loghi UniFix / Unisan */
  --ufx-brand-azure:       #3C84E0;
  --ufx-brand-blue:        #3A82C4;
  --ufx-brand-institution: #6688B8;
  --ufx-brand-teal:        #149E87;
  --ufx-brand-peach:       #F1A586;
  --ufx-brand-green:       #34B325;
  --ufx-brand-silver:      #E0E3E7;

  /* Fondazioni navy (Materiale A) */
  --ufx-navy-950: #071522;
  --ufx-navy-900: #0B1C2C;
  --ufx-navy-850: #10273B;
  --ufx-navy-800: #153149;
  --ufx-navy-700: #1D3E5A;

  /* Ink (testo) */
  --ufx-ink-950: #101820;
  --ufx-ink-800: #263442;
  --ufx-ink-600: #526476;
  --ufx-ink-400: #8190A0;
  --ufx-ink-300: #A6B2C0;

  /* Frost (Materiale B) */
  --ufx-frost-50:  #F8FAFC;
  --ufx-frost-100: #F2F6F9;
  --ufx-frost-200: #E8EEF3;
  --ufx-frost-300: #D9E2E9;
  --ufx-white:     #FFFFFF;

  /* Scala blu operativa */
  --ufx-blue-700: #205E9E;
  --ufx-blue-600: #2B72BC;
  --ufx-blue-500: var(--ufx-brand-azure);
  --ufx-blue-100: #DCEAFA;
  --ufx-blue-50:  #EDF4FC;

  /* Semantica */
  --ufx-teal-700: #0E7A69;
  --ufx-teal-100: #D6EEEA;
  --ufx-teal-50:  #E9F6F4;
  --ufx-peach-700: #B4653F;
  --ufx-peach-100: #FBE6DB;
  --ufx-peach-50:  #FDF2EC;
  --ufx-green-700: #22821A;
  --ufx-green-100: #DEF3DC;
  --ufx-red-700:  #B3362B;
  --ufx-red-600:  #C74436;
  --ufx-red-100:  #F9E2DF;
  --ufx-red-50:   #FCF0EE;
  --ufx-amber-700: #8F6212;
  --ufx-amber-100: #FBEFD3;

  /* Tipografia */
  --ufx-font: "IBM Plex Sans", "Segoe UI", system-ui, -apple-system, sans-serif;
  --ufx-text-xs: 0.72rem;   /* 11.5px — label tecniche */
  --ufx-text-sm: 0.8125rem; /* 13px — tabelle, meta */
  --ufx-text-base: 0.875rem;/* 14px — corpo */
  --ufx-text-md: 0.9375rem; /* 15px */
  --ufx-text-lg: 1.0625rem; /* 17px — titoli card */
  --ufx-text-xl: 1.3125rem; /* 21px — titolo pagina */
  --ufx-text-2xl: 1.75rem;  /* 28px — KPI */
  --ufx-text-3xl: 2.125rem; /* 34px — KPI primario */

  /* Spaziatura */
  --ufx-sp-1: 4px;  --ufx-sp-2: 8px;  --ufx-sp-3: 12px; --ufx-sp-4: 16px;
  --ufx-sp-5: 20px; --ufx-sp-6: 24px; --ufx-sp-7: 32px; --ufx-sp-8: 40px;

  /* Radius — modulo squircle Unisan */
  --ufx-r-xs: 6px;
  --ufx-r-sm: 8px;
  --ufx-r-md: 10px;
  --ufx-r-lg: 14px;
  --ufx-r-xl: 18px;
  --ufx-r-pill: 999px;

  /* Elevation */
  --ufx-shadow-contact: 0 1px 2px rgba(20,42,62,.06);
  --ufx-shadow-panel:
    0 1px 0 rgba(255,255,255,.85) inset,
    0 0 0 1px rgba(92,120,146,.08),
    0 10px 28px rgba(20,42,62,.08),
    0 2px 6px rgba(20,42,62,.05);
  --ufx-shadow-acrylic:
    0 0 0 1px rgba(92,120,146,.12),
    0 18px 48px rgba(11,28,44,.22),
    0 4px 12px rgba(11,28,44,.12);
  --ufx-border-glass: 1px solid rgba(255,255,255,.76);
  --ufx-border-cold: 1px solid rgba(92,120,146,.16);

  /* Materiali */
  --ufx-glass-bg: linear-gradient(135deg, rgba(255,255,255,.86), rgba(244,248,251,.72));
  --ufx-glass-blur: blur(18px) saturate(122%);
  --ufx-acrylic-bg: linear-gradient(160deg, rgba(250,252,254,.96), rgba(238,244,249,.92));

  /* Motion */
  --ufx-ease: cubic-bezier(.33,.75,.35,1);
  --ufx-t-hover: 120ms;
  --ufx-t-select: 160ms;
  --ufx-t-panel: 220ms;

  /* Layout */
  --ufx-sidebar-w: 272px;
  --ufx-sidebar-w-collapsed: 76px;
  --ufx-commandbar-h: 56px;

  /* Densità (default: standard) */
  --ufx-row-h: 50px;
  --ufx-cell-py: 12px;
  --ufx-cell-px: 14px;

  --ufx-focus-ring: 0 0 0 2px var(--ufx-white), 0 0 0 4px var(--ufx-blue-600);
}
[data-density="compact"] {
  --ufx-row-h: 38px; --ufx-cell-py: 7px; --ufx-cell-px: 12px;
}
[data-density="comfortable"] {
  --ufx-row-h: 58px; --ufx-cell-py: 16px; --ufx-cell-px: 16px;
}

/* --------------------------------------------------------------------------
   2. BASE
   -------------------------------------------------------------------------- */
html { height: 100%; }
body {
  margin: 0;
  min-height: 100%;
  font-family: var(--ufx-font);
  font-size: var(--ufx-text-base);
  line-height: 1.5;
  color: var(--ufx-ink-800);
  background:
    radial-gradient(1100px 500px at 85% -8%, rgba(60,132,224,.055), transparent 60%),
    radial-gradient(900px 480px at -10% 110%, rgba(20,158,135,.045), transparent 55%),
    var(--ufx-frost-100);
  -webkit-font-smoothing: antialiased;
}
h1,h2,h3,h4,h5,h6 { color: var(--ufx-ink-950); letter-spacing: -0.011em; }
a { color: var(--ufx-blue-600); text-decoration: none; }
a:hover { color: var(--ufx-blue-700); text-decoration: underline; }
.ufx-num, td.ufx-num, .ufx-kpi__value { font-variant-numeric: tabular-nums; }
:focus-visible { outline: none; box-shadow: var(--ufx-focus-ring); border-radius: var(--ufx-r-xs); }
.ufx-skip-link {
  position: absolute; left: -9999px; top: 8px; z-index: 2000;
  background: var(--ufx-navy-900); color: #fff; padding: 8px 16px; border-radius: var(--ufx-r-sm);
}
.ufx-skip-link:focus { left: 8px; color: #fff; }
.ufx-label {
  font-size: var(--ufx-text-xs); font-weight: 600; letter-spacing: .06em;
  text-transform: uppercase; color: var(--ufx-ink-600);
}
.ufx-meta { font-size: var(--ufx-text-sm); color: var(--ufx-ink-600); }

/* --------------------------------------------------------------------------
   3. SHELL — ufx-app-shell
   -------------------------------------------------------------------------- */
.ufx-app-shell { display: flex; min-height: 100vh; }
.ufx-main {
  flex: 1; min-width: 0; display: flex; flex-direction: column;
}
.ufx-content {
  flex: 1; padding: var(--ufx-sp-6) var(--ufx-sp-7) var(--ufx-sp-8);
  max-width: 1720px; width: 100%; margin: 0 auto;
}

/* Materiale A — Structural Navy: sidebar */
.ufx-sidebar {
  width: var(--ufx-sidebar-w); flex-shrink: 0;
  position: sticky; top: 0; height: 100vh; z-index: 100;
  display: flex; flex-direction: column;
  color: var(--ufx-frost-200);
  background:
    linear-gradient(178deg, var(--ufx-navy-850), var(--ufx-navy-900) 42%, var(--ufx-navy-950));
  border-right: 1px solid rgba(129,167,204,.14);
  box-shadow: 1px 0 0 rgba(6,16,26,.5);
  transition: width var(--ufx-t-panel) var(--ufx-ease);
}
.ufx-sidebar__brand {
  display: flex; align-items: center; gap: 12px;
  padding: 22px 20px 20px;
  border-bottom: 1px solid rgba(129,167,204,.12);
}
.ufx-sidebar__brand img { height: 34px; display: block; }
.ufx-sidebar__brand-name { font-size: 1.05rem; font-weight: 700; color: #fff; letter-spacing: .01em; }
.ufx-sidebar__brand-sub { font-size: var(--ufx-text-xs); color: var(--ufx-brand-institution); letter-spacing: .08em; text-transform: uppercase; }
.ufx-sidebar__nav { flex: 1; overflow-y: auto; padding: 14px 12px; display: flex; flex-direction: column; gap: 2px; }
.ufx-sidebar__section {
  margin: 16px 10px 6px; font-size: var(--ufx-text-xs); font-weight: 600;
  letter-spacing: .09em; text-transform: uppercase; color: rgba(166,190,214,.55);
}
.ufx-sidebar-item {
  position: relative; display: flex; align-items: center; gap: 12px;
  padding: 10px 12px; border-radius: var(--ufx-r-md);
  color: rgba(216,228,240,.82); font-size: var(--ufx-text-md); font-weight: 500;
  text-decoration: none;
  transition: background var(--ufx-t-hover) var(--ufx-ease), color var(--ufx-t-hover) var(--ufx-ease);
}
.ufx-sidebar-item i, .ufx-sidebar-item svg { width: 20px; text-align: center; font-size: 1rem; color: rgba(166,190,214,.75); flex-shrink: 0; transition: color var(--ufx-t-hover); }
.ufx-sidebar-item:hover { background: rgba(129,167,204,.10); color: #fff; text-decoration: none; }
.ufx-sidebar-item:hover i { color: var(--ufx-brand-azure); }
.ufx-sidebar-item[aria-current="page"], .ufx-sidebar-item.is-active {
  background: linear-gradient(90deg, rgba(60,132,224,.20), rgba(60,132,224,.06));
  color: #fff;
}
.ufx-sidebar-item[aria-current="page"] i, .ufx-sidebar-item.is-active i { color: var(--ufx-brand-azure); }
.ufx-sidebar-item[aria-current="page"]::before, .ufx-sidebar-item.is-active::before {
  content: ""; position: absolute; left: -12px; top: 8px; bottom: 8px; width: 3px;
  border-radius: 2px; background: var(--ufx-brand-azure);
  box-shadow: 0 0 10px rgba(60,132,224,.65);
}
.ufx-sidebar-item .ufx-sidebar-item__count {
  margin-left: auto; font-size: var(--ufx-text-xs); font-weight: 600;
  background: rgba(60,132,224,.22); color: #BCD8F6;
  border-radius: var(--ufx-r-pill); padding: 1px 8px; font-variant-numeric: tabular-nums;
}
.ufx-sidebar__footer {
  padding: 16px 16px 22px; border-top: 1px solid rgba(129,167,204,.12);
  display: flex; flex-direction: column; gap: 22px;
}
.ufx-sidebar__unisan {
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  text-align: center;
}
.ufx-sidebar__unisan img { height: 18px; }

/* Utente in sidebar */
.ufx-user { display: flex; align-items: center; gap: 10px; min-width: 0; }
.ufx-user__meta { min-width: 0; }
.ufx-user__avatar--sm { width: 30px; height: 30px; font-size: .72rem; }
.ufx-user__avatar {
  width: 34px; height: 34px; border-radius: var(--ufx-r-md); flex-shrink: 0;
  display: grid; place-items: center; font-weight: 600; font-size: var(--ufx-text-sm);
  color: #fff; background: linear-gradient(145deg, var(--ufx-blue-600), var(--ufx-navy-700));
  border: 1px solid rgba(129,167,204,.35);
}
.ufx-user__name { font-size: var(--ufx-text-sm); font-weight: 600; color: #E8F0F8; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ufx-user__role { font-size: var(--ufx-text-xs); color: rgba(166,190,214,.7); }
.ufx-user__logout { margin-left: auto; color: rgba(166,190,214,.7); padding: 6px; border-radius: var(--ufx-r-sm); }
.ufx-user__logout:hover { color: #fff; background: rgba(129,167,204,.12); }

/* Sidebar collassata */
.ufx-app-shell.is-collapsed .ufx-sidebar { width: var(--ufx-sidebar-w-collapsed); }
.ufx-app-shell.is-collapsed .ufx-sidebar__brand-name,
.ufx-app-shell.is-collapsed .ufx-sidebar__brand-sub,
.ufx-app-shell.is-collapsed .ufx-sidebar-item span,
.ufx-app-shell.is-collapsed .ufx-sidebar-item__count,
.ufx-app-shell.is-collapsed .ufx-sidebar__section,
.ufx-app-shell.is-collapsed .ufx-user__meta,
.ufx-app-shell.is-collapsed .ufx-sidebar__unisan span { display: none; }
.ufx-app-shell.is-collapsed .ufx-sidebar-item { justify-content: center; }

/* --------------------------------------------------------------------------
   4. COMMAND BAR — ufx-command-bar
   -------------------------------------------------------------------------- */
.ufx-command-bar {
  height: var(--ufx-commandbar-h);
  position: sticky; top: 0; z-index: 90;
  display: flex; align-items: center; gap: var(--ufx-sp-4);
  padding: 0 var(--ufx-sp-7);
  background: linear-gradient(180deg, rgba(255,255,255,.78), rgba(246,250,252,.66));
  -webkit-backdrop-filter: var(--ufx-glass-blur); backdrop-filter: var(--ufx-glass-blur);
  border-bottom: var(--ufx-border-cold);
  box-shadow: 0 1px 0 rgba(255,255,255,.7) inset, var(--ufx-shadow-contact);
}
.ufx-command-bar__search { position: relative; width: min(380px, 34vw); }
.ufx-command-bar__search input {
  width: 100%; height: 36px; padding: 0 12px 0 36px;
  border-radius: var(--ufx-r-md); border: var(--ufx-border-cold);
  background: rgba(255,255,255,.72); font-size: var(--ufx-text-sm); color: var(--ufx-ink-800);
  transition: border-color var(--ufx-t-hover), box-shadow var(--ufx-t-hover);
}
.ufx-command-bar__search input:focus { outline: none; box-shadow: var(--ufx-focus-ring); background: #fff; }
.ufx-command-bar__search > i { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--ufx-ink-400); font-size: .85rem; }
.ufx-command-bar__kbd {
  position: absolute; right: 8px; top: 50%; transform: translateY(-50%);
  font-size: 10.5px; color: var(--ufx-ink-400); border: 1px solid var(--ufx-frost-300);
  border-radius: 4px; padding: 1px 5px; background: var(--ufx-frost-50);
}
.ufx-command-bar__context {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: var(--ufx-text-sm); font-weight: 500; color: var(--ufx-ink-800);
  border: var(--ufx-border-cold); background: rgba(255,255,255,.6);
  border-radius: var(--ufx-r-md); padding: 6px 12px; cursor: pointer;
}
.ufx-command-bar__context i { color: var(--ufx-brand-blue); }
.ufx-command-bar__spacer { flex: 1; }
.ufx-command-bar__bell { position: relative; }
.ufx-command-bar__bell-dot {
  position: absolute; top: 4px; right: 5px; width: 7px; height: 7px;
  border-radius: 50%; background: var(--ufx-brand-peach); border: 1.5px solid #fff;
}
.ufx-command-bar__chevron { font-size: .6rem; color: var(--ufx-ink-400); }

/* --------------------------------------------------------------------------
   5. PAGE HEADER + BREADCRUMB
   -------------------------------------------------------------------------- */
.ufx-breadcrumb { display: flex; align-items: center; gap: 8px; font-size: var(--ufx-text-sm); color: var(--ufx-ink-400); margin-bottom: 6px; }
.ufx-breadcrumb a { color: var(--ufx-ink-600); }
.ufx-breadcrumb .sep { font-size: .65rem; opacity: .6; }
.ufx-page-header { display: flex; align-items: flex-end; gap: var(--ufx-sp-5); margin-bottom: var(--ufx-sp-6); flex-wrap: wrap; }
.ufx-page-header__title { font-size: var(--ufx-text-xl); font-weight: 650; margin: 0; }
.ufx-page-header__desc { font-size: var(--ufx-text-sm); color: var(--ufx-ink-600); margin: 4px 0 0; max-width: 62ch; }
.ufx-page-header__actions { margin-left: auto; display: flex; gap: var(--ufx-sp-3); align-items: center; }

/* --------------------------------------------------------------------------
   6. MATERIALE C — Precision Glass: pannelli e card
   -------------------------------------------------------------------------- */
.ufx-glass-panel, .ufx-card {
  background: var(--ufx-glass-bg);
  border: var(--ufx-border-glass);
  border-radius: var(--ufx-r-lg);
  box-shadow: var(--ufx-shadow-panel);
  -webkit-backdrop-filter: var(--ufx-glass-blur); backdrop-filter: var(--ufx-glass-blur);
}
.ufx-card { display: flex; flex-direction: column; min-width: 0; }
.ufx-card-header {
  display: flex; align-items: center; gap: 10px;
  padding: var(--ufx-sp-4) var(--ufx-sp-5);
  border-bottom: 1px solid rgba(92,120,146,.10);
}
.ufx-card-header__title { font-size: var(--ufx-text-lg); font-weight: 600; margin: 0; }
.ufx-card-header__sub { font-size: var(--ufx-text-sm); color: var(--ufx-ink-600); }
.ufx-card-header__actions { margin-left: auto; display: flex; gap: 8px; align-items: center; }
.ufx-card__body { padding: var(--ufx-sp-5); }
.ufx-card__body--flush { padding: 0; }

/* --------------------------------------------------------------------------
   7. KPI — ufx-kpi
   -------------------------------------------------------------------------- */
.ufx-kpi {
  position: relative; display: flex; flex-direction: column; gap: 6px;
  padding: var(--ufx-sp-5);
}
.ufx-kpi__head { display: flex; align-items: center; gap: 10px; }
.ufx-kpi__icon {
  width: 38px; height: 38px; border-radius: 12px; flex-shrink: 0;
  display: grid; place-items: center; font-size: 1rem;
  color: var(--ufx-blue-700); background: var(--ufx-blue-50);
  border: 1px solid rgba(60,132,224,.18);
  box-shadow: 0 1px 0 rgba(255,255,255,.9) inset;
}
.ufx-kpi__icon--teal { color: var(--ufx-teal-700); background: var(--ufx-teal-50); border-color: rgba(20,158,135,.2); }
.ufx-kpi__icon--peach { color: var(--ufx-peach-700); background: var(--ufx-peach-50); border-color: rgba(241,165,134,.35); }
.ufx-kpi__icon--red { color: var(--ufx-red-700); background: var(--ufx-red-50); border-color: rgba(199,68,54,.2); }
.ufx-kpi__label { font-size: var(--ufx-text-sm); font-weight: 500; color: var(--ufx-ink-600); }
.ufx-kpi__value { font-size: var(--ufx-text-2xl); font-weight: 650; color: var(--ufx-ink-950); line-height: 1.1; letter-spacing: -0.02em; }
.ufx-kpi__unit { font-size: var(--ufx-text-md); font-weight: 500; color: var(--ufx-ink-400); margin-left: 3px; }
.ufx-kpi__foot { display: flex; align-items: baseline; gap: 8px; font-size: var(--ufx-text-xs); color: var(--ufx-ink-400); }
.ufx-kpi__trend { display: inline-flex; align-items: center; gap: 4px; font-size: var(--ufx-text-xs); font-weight: 600; border-radius: var(--ufx-r-pill); padding: 1px 8px; }
.ufx-kpi__trend--up   { color: var(--ufx-teal-700); background: var(--ufx-teal-100); }
.ufx-kpi__trend--down { color: var(--ufx-red-700); background: var(--ufx-red-100); }
.ufx-kpi__trend--flat { color: var(--ufx-ink-600); background: var(--ufx-frost-200); }
.ufx-kpi-primary { justify-content: space-between; }
.ufx-kpi-primary .ufx-kpi__value { font-size: var(--ufx-text-3xl); }
.ufx-kpi__spark { position: relative; margin-top: 4px; width: 100%; height: 42px; }
.ufx-kpi__spark canvas { position: absolute; inset: 0; }

/* --------------------------------------------------------------------------
   8. ICONE IMPIANTO — ufx-equipment-icon (contenitore squircle Unisan)
   -------------------------------------------------------------------------- */
.ufx-equipment-icon {
  position: relative; width: 40px; height: 40px; border-radius: 13px; flex-shrink: 0;
  display: grid; place-items: center; font-size: 1.02rem;
  color: var(--ufx-blue-700);
  background: linear-gradient(150deg, #FFFFFF, var(--ufx-blue-50));
  border: 1px solid rgba(60,132,224,.22);
  box-shadow: 0 1px 0 rgba(255,255,255,.9) inset, var(--ufx-shadow-contact);
}
.ufx-equipment-icon--sm { width: 30px; height: 30px; border-radius: 10px; font-size: .8rem; }
.ufx-equipment-icon--lg { width: 52px; height: 52px; border-radius: 16px; font-size: 1.35rem; }
.ufx-equipment-icon--teal  { color: var(--ufx-teal-700);  background: linear-gradient(150deg,#fff,var(--ufx-teal-50));  border-color: rgba(20,158,135,.25); }
.ufx-equipment-icon--peach { color: var(--ufx-peach-700); background: linear-gradient(150deg,#fff,var(--ufx-peach-50)); border-color: rgba(241,165,134,.4); }
.ufx-equipment-icon--navy  { color: #C9DCF0; background: linear-gradient(150deg,var(--ufx-navy-800),var(--ufx-navy-900)); border-color: rgba(129,167,204,.3); }
.ufx-equipment-icon__dot {
  position: absolute; right: -3px; bottom: -3px; width: 11px; height: 11px;
  border-radius: 50%; border: 2px solid #fff;
}
.ufx-dot--ok { background: var(--ufx-brand-green); }
.ufx-dot--warn { background: var(--ufx-brand-peach); }
.ufx-dot--crit { background: var(--ufx-red-600); }
.ufx-dot--off { background: var(--ufx-ink-400); }

/* Card / riga impianto */
.ufx-equipment-card { display: flex; gap: 14px; padding: var(--ufx-sp-4) var(--ufx-sp-5); align-items: flex-start; }
.ufx-equipment-card__name { font-weight: 600; color: var(--ufx-ink-950); font-size: var(--ufx-text-md); }
.ufx-equipment-card__meta { font-size: var(--ufx-text-sm); color: var(--ufx-ink-600); display: flex; flex-wrap: wrap; gap: 4px 14px; margin-top: 2px; }
.ufx-equipment-card__meta strong { font-weight: 600; color: var(--ufx-ink-800); }
.ufx-equipment-row { display: flex; align-items: center; gap: 12px; min-width: 0; }
.ufx-equipment-row__name { font-weight: 600; color: var(--ufx-ink-950); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ufx-equipment-row__sub { font-size: var(--ufx-text-xs); color: var(--ufx-ink-600); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Health indicator */
.ufx-health-indicator { display: inline-flex; align-items: center; gap: 7px; font-size: var(--ufx-text-sm); font-weight: 500; }
.ufx-health-indicator::before { content: ""; width: 8px; height: 8px; border-radius: 50%; box-shadow: 0 0 0 3px rgba(0,0,0,.04); }
.ufx-health-indicator--operativo { color: var(--ufx-teal-700); } .ufx-health-indicator--operativo::before { background: var(--ufx-brand-teal); }
.ufx-health-indicator--attenzione { color: var(--ufx-peach-700); } .ufx-health-indicator--attenzione::before { background: var(--ufx-brand-peach); }
.ufx-health-indicator--critico { color: var(--ufx-red-700); } .ufx-health-indicator--critico::before { background: var(--ufx-red-600); }
.ufx-health-indicator--fuori-servizio { color: var(--ufx-ink-600); } .ufx-health-indicator--fuori-servizio::before { background: var(--ufx-ink-400); }
.ufx-health-indicator--da-verificare { color: var(--ufx-blue-700); } .ufx-health-indicator--da-verificare::before { background: var(--ufx-brand-azure); }

/* --------------------------------------------------------------------------
   9. PRIORITY PANEL
   -------------------------------------------------------------------------- */
.ufx-priority-panel { border-left: 3px solid var(--ufx-brand-peach); }
.ufx-priority-panel .ufx-card-header { border-bottom-color: rgba(241,165,134,.25); }
.ufx-priority-item {
  display: flex; align-items: center; gap: 14px;
  padding: 11px var(--ufx-sp-5);
  border-bottom: 1px solid rgba(92,120,146,.08);
  transition: background var(--ufx-t-hover) var(--ufx-ease);
}
.ufx-priority-item:last-child { border-bottom: 0; }
.ufx-priority-item:hover { background: rgba(60,132,224,.045); }
.ufx-priority-item__body { min-width: 0; flex: 1; }
.ufx-priority-item__title { font-weight: 600; font-size: var(--ufx-text-sm); color: var(--ufx-ink-950); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ufx-priority-item__meta { font-size: var(--ufx-text-xs); color: var(--ufx-ink-600); }
.ufx-priority-item__when { font-size: var(--ufx-text-xs); font-weight: 600; white-space: nowrap; font-variant-numeric: tabular-nums; }

/* --------------------------------------------------------------------------
   10. TABELLE — ufx-data-table
   -------------------------------------------------------------------------- */
.ufx-table-wrap { overflow-x: auto; border-radius: 0 0 var(--ufx-r-lg) var(--ufx-r-lg); }
.ufx-data-table {
  width: 100%; border-collapse: separate; border-spacing: 0;
  background: rgba(255,255,255,.94); /* base quasi opaca: leggibilità */
  font-size: var(--ufx-text-sm);
}
.ufx-data-table thead th {
  position: sticky; top: 0; z-index: 2;
  text-align: left; font-size: var(--ufx-text-xs); font-weight: 600;
  letter-spacing: .05em; text-transform: uppercase; color: var(--ufx-ink-600);
  background: var(--ufx-frost-100);
  padding: 9px var(--ufx-cell-px);
  border-bottom: 1px solid var(--ufx-frost-300);
  white-space: nowrap;
}
.ufx-data-table tbody td {
  padding: var(--ufx-cell-py) var(--ufx-cell-px);
  border-bottom: 1px solid rgba(92,120,146,.09);
  color: var(--ufx-ink-800); vertical-align: middle;
  height: var(--ufx-row-h);
}
.ufx-data-table tbody tr { transition: background var(--ufx-t-hover) var(--ufx-ease); }
.ufx-data-table tbody tr:hover { background: var(--ufx-blue-50); }
.ufx-data-table tbody tr:last-child td { border-bottom: 0; }
.ufx-data-table td.ufx-num, .ufx-data-table th.ufx-num { text-align: right; font-variant-numeric: tabular-nums; }
.ufx-data-table .ufx-row-actions { display: flex; gap: 6px; justify-content: flex-end; opacity: .55; transition: opacity var(--ufx-t-hover); }
.ufx-data-table tbody tr:hover .ufx-row-actions,
.ufx-data-table tbody tr:focus-within .ufx-row-actions { opacity: 1; }
.ufx-data-table tr.is-selected { background: var(--ufx-blue-50); box-shadow: inset 3px 0 0 var(--ufx-brand-azure); }
.ufx-data-table td .ufx-cell-main { font-weight: 600; color: var(--ufx-ink-950); }
.ufx-data-table td .ufx-cell-sub { font-size: var(--ufx-text-xs); color: var(--ufx-ink-600); }
tr.ufx-row-overdue td { background: rgba(199,68,54,.045); box-shadow: inset 3px 0 0 var(--ufx-red-600); }
tr.ufx-row-warning td { background: rgba(241,165,134,.07); box-shadow: inset 3px 0 0 var(--ufx-brand-peach); }

/* Toolbar tabella */
.ufx-table-toolbar {
  display: flex; align-items: center; gap: var(--ufx-sp-3); flex-wrap: wrap;
  padding: var(--ufx-sp-3) var(--ufx-sp-5);
  border-bottom: 1px solid rgba(92,120,146,.10);
}
.ufx-table-toolbar__count { font-size: var(--ufx-text-sm); color: var(--ufx-ink-600); }
.ufx-table-toolbar__count strong { color: var(--ufx-ink-950); font-variant-numeric: tabular-nums; }

/* --------------------------------------------------------------------------
   11. FILTRI — ufx-filter-bar / ufx-filter-chip
   -------------------------------------------------------------------------- */
.ufx-filter-bar { display: flex; align-items: flex-end; gap: var(--ufx-sp-3); flex-wrap: wrap; }
.ufx-filter-bar .ufx-form-control { min-width: 160px; }
.ufx-filter-chip {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: var(--ufx-text-sm); font-weight: 500; color: var(--ufx-ink-800);
  background: rgba(255,255,255,.75); border: var(--ufx-border-cold);
  border-radius: var(--ufx-r-pill); padding: 4px 12px; cursor: pointer;
  transition: all var(--ufx-t-hover) var(--ufx-ease);
}
.ufx-filter-chip:hover { border-color: rgba(60,132,224,.4); background: #fff; }
.ufx-filter-chip.is-active {
  background: var(--ufx-blue-50); border-color: rgba(60,132,224,.45);
  color: var(--ufx-blue-700); font-weight: 600;
}
.ufx-filter-chip .ufx-chip-x { color: var(--ufx-ink-400); font-size: .7rem; }
.ufx-filter-chip .ufx-chip-n { font-size: var(--ufx-text-xs); font-weight: 600; color: var(--ufx-ink-600); background: var(--ufx-frost-200); border-radius: var(--ufx-r-pill); padding: 0 7px; font-variant-numeric: tabular-nums; }
.ufx-filter-chip.is-active .ufx-chip-n { background: rgba(60,132,224,.16); color: var(--ufx-blue-700); }

/* --------------------------------------------------------------------------
   12. STATI SEMANTICI — ufx-status / ufx-priority / ufx-role / ufx-document-type
   Sempre: marker + testo + tono (mai solo colore)
   -------------------------------------------------------------------------- */
.ufx-status, .ufx-priority, .ufx-role, .ufx-document-type {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: var(--ufx-text-xs); font-weight: 600; letter-spacing: .03em;
  border-radius: var(--ufx-r-xs); padding: 3px 9px;
  border: 1px solid transparent; white-space: nowrap;
}
.ufx-status i, .ufx-priority i { font-size: .68rem; }
/* Ticket */
.ufx-status--aperta      { color: var(--ufx-blue-700); background: var(--ufx-blue-50);  border-color: rgba(43,114,188,.25); }
.ufx-status--lavorazione { color: var(--ufx-amber-700); background: var(--ufx-amber-100); border-color: rgba(143,98,18,.22); }
.ufx-status--chiusa      { color: var(--ufx-ink-600); background: var(--ufx-frost-200); border-color: rgba(92,120,146,.18); }
/* Scadenze */
.ufx-status--scaduto     { color: #fff; background: var(--ufx-red-600); border-color: var(--ufx-red-700); }
.ufx-status--in-scadenza { color: var(--ufx-peach-700); background: var(--ufx-peach-100); border-color: rgba(180,101,63,.3); }
.ufx-status--programmato { color: var(--ufx-blue-700); background: var(--ufx-blue-50); border-color: rgba(43,114,188,.25); }
.ufx-status--completato  { color: var(--ufx-green-700); background: var(--ufx-green-100); border-color: rgba(34,130,26,.25); }
.ufx-status--ok          { color: var(--ufx-teal-700); background: var(--ufx-teal-100); border-color: rgba(14,122,105,.25); }
/* Priorità */
.ufx-priority--bassa   { color: var(--ufx-ink-600); background: var(--ufx-frost-200); border-color: rgba(92,120,146,.18); }
.ufx-priority--normale { color: var(--ufx-blue-700); background: var(--ufx-blue-50); border-color: rgba(43,114,188,.22); }
.ufx-priority--alta    { color: var(--ufx-peach-700); background: var(--ufx-peach-100); border-color: rgba(180,101,63,.3); }
.ufx-priority--urgente { color: #fff; background: var(--ufx-red-600); border-color: var(--ufx-red-700); }
/* Ruoli */
.ufx-role--admin        { color: var(--ufx-navy-800); background: var(--ufx-frost-200); border-color: rgba(21,49,73,.28); }
.ufx-role--coordinatore { color: var(--ufx-blue-700); background: var(--ufx-blue-50); border-color: rgba(43,114,188,.25); }
.ufx-role--standard     { color: var(--ufx-ink-600); background: var(--ufx-frost-100); border-color: rgba(92,120,146,.18); }
/* Documenti */
.ufx-document-type { font-weight: 500; letter-spacing: .04em; text-transform: uppercase; font-size: 0.68rem; }
.ufx-document-type--manuale       { color: var(--ufx-blue-700); background: var(--ufx-blue-50); border-color: rgba(43,114,188,.2); }
.ufx-document-type--schema        { color: var(--ufx-teal-700); background: var(--ufx-teal-50); border-color: rgba(14,122,105,.22); }
.ufx-document-type--collaudo      { color: var(--ufx-green-700); background: var(--ufx-green-100); border-color: rgba(34,130,26,.25); }
.ufx-document-type--rapporto      { color: var(--ufx-ink-600); background: var(--ufx-frost-200); border-color: rgba(92,120,146,.2); }
.ufx-document-type--certificazione{ color: var(--ufx-navy-800); background: var(--ufx-frost-200); border-color: rgba(21,49,73,.25); }
.ufx-document-type--lavorazione   { color: var(--ufx-amber-700); background: var(--ufx-amber-100); border-color: rgba(143,98,18,.22); }
.ufx-document-type--altro         { color: var(--ufx-ink-600); background: var(--ufx-frost-100); border-color: rgba(92,120,146,.16); }

/* --------------------------------------------------------------------------
   13. PULSANTI — ufx-button / ufx-icon-button
   -------------------------------------------------------------------------- */
.ufx-button {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 36px; padding: 0 16px;
  font-family: var(--ufx-font); font-size: var(--ufx-text-sm); font-weight: 600;
  border-radius: var(--ufx-r-md); border: 1px solid transparent; cursor: pointer;
  transition: all var(--ufx-t-hover) var(--ufx-ease);
  text-decoration: none; white-space: nowrap;
}
.ufx-button:hover { text-decoration: none; }
.ufx-button--primary {
  color: #fff;
  background: linear-gradient(180deg, var(--ufx-blue-500), var(--ufx-blue-600));
  border-color: var(--ufx-blue-700);
  box-shadow: 0 1px 0 rgba(255,255,255,.25) inset, 0 2px 6px rgba(43,114,188,.28);
}
.ufx-button--primary:hover { background: linear-gradient(180deg, #4A90E6, var(--ufx-blue-600)); color:#fff; box-shadow: 0 1px 0 rgba(255,255,255,.25) inset, 0 3px 10px rgba(43,114,188,.36); }
.ufx-button--primary:active { transform: translateY(1px); box-shadow: 0 1px 3px rgba(43,114,188,.3); }
.ufx-button--secondary {
  color: var(--ufx-ink-800); background: rgba(255,255,255,.8);
  border-color: rgba(92,120,146,.28);
  box-shadow: 0 1px 0 rgba(255,255,255,.9) inset, var(--ufx-shadow-contact);
}
.ufx-button--secondary:hover { border-color: rgba(60,132,224,.45); color: var(--ufx-blue-700); background: #fff; }
.ufx-button--ghost { color: var(--ufx-ink-600); background: transparent; }
.ufx-button--ghost:hover { color: var(--ufx-blue-700); background: var(--ufx-blue-50); }
.ufx-button--danger { color: #fff; background: var(--ufx-red-600); border-color: var(--ufx-red-700); }
.ufx-button--danger:hover { background: var(--ufx-red-700); color: #fff; }
.ufx-button--teal { color: #fff; background: linear-gradient(180deg, var(--ufx-brand-teal), var(--ufx-teal-700)); border-color: var(--ufx-teal-700); }
.ufx-button--teal:hover { color:#fff; filter: brightness(1.05); }
.ufx-button--sm { height: 30px; padding: 0 12px; font-size: var(--ufx-text-xs); border-radius: var(--ufx-r-sm); }
.ufx-button:disabled, .ufx-button.is-disabled { opacity: .5; cursor: not-allowed; pointer-events: none; }
.ufx-button.is-loading { position: relative; color: transparent !important; pointer-events: none; }
.ufx-button.is-loading::after {
  content: ""; position: absolute; width: 15px; height: 15px;
  border: 2px solid rgba(255,255,255,.4); border-top-color: #fff; border-radius: 50%;
  animation: ufx-spin .7s linear infinite;
}
.ufx-button--secondary.is-loading::after { border-color: rgba(38,52,66,.25); border-top-color: var(--ufx-ink-800); }
@keyframes ufx-spin { to { transform: rotate(360deg); } }

.ufx-icon-button {
  width: 30px; height: 30px; display: inline-grid; place-items: center;
  border-radius: var(--ufx-r-sm); border: 1px solid transparent;
  color: var(--ufx-ink-600); background: transparent; cursor: pointer; font-size: .82rem;
  transition: all var(--ufx-t-hover) var(--ufx-ease);
}
.ufx-icon-button:hover { color: var(--ufx-blue-700); background: var(--ufx-blue-50); border-color: rgba(60,132,224,.25); }
.ufx-icon-button--danger:hover { color: var(--ufx-red-700); background: var(--ufx-red-50); border-color: rgba(199,68,54,.3); }

/* --------------------------------------------------------------------------
   14. FORM — ufx-form-control / ufx-upload
   -------------------------------------------------------------------------- */
.ufx-field { display: flex; flex-direction: column; gap: 6px; }
.ufx-field > label { font-size: var(--ufx-text-sm); font-weight: 600; color: var(--ufx-ink-800); }
.ufx-field .ufx-hint { font-size: var(--ufx-text-xs); color: var(--ufx-ink-400); }
.ufx-form-control, select.ufx-form-control, textarea.ufx-form-control {
  width: 100%; font-family: var(--ufx-font); font-size: var(--ufx-text-sm); color: var(--ufx-ink-800);
  background: rgba(255,255,255,.85); border: 1px solid rgba(92,120,146,.28);
  border-radius: var(--ufx-r-md); padding: 8px 12px; min-height: 36px;
  transition: border-color var(--ufx-t-hover), box-shadow var(--ufx-t-hover);
}
select.ufx-form-control { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%23526476' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; padding-right: 32px; }
.ufx-form-control:focus { outline: none; border-color: var(--ufx-blue-600); box-shadow: 0 0 0 3px rgba(60,132,224,.18); background: #fff; }
.ufx-form-control:disabled { background: var(--ufx-frost-200); color: var(--ufx-ink-400); cursor: not-allowed; }
.ufx-field.has-error .ufx-form-control { border-color: var(--ufx-red-600); box-shadow: 0 0 0 3px rgba(199,68,54,.12); }
.ufx-field .ufx-error-msg { display: none; font-size: var(--ufx-text-xs); color: var(--ufx-red-700); font-weight: 500; }
.ufx-field.has-error .ufx-error-msg { display: flex; align-items: center; gap: 5px; }

.ufx-upload {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px;
  padding: var(--ufx-sp-6); text-align: center; cursor: pointer;
  border: 1.5px dashed rgba(92,120,146,.35); border-radius: var(--ufx-r-lg);
  background: rgba(255,255,255,.55);
  color: var(--ufx-ink-600); font-size: var(--ufx-text-sm);
  transition: all var(--ufx-t-hover) var(--ufx-ease);
}
.ufx-upload:hover, .ufx-upload.is-dragover { border-color: var(--ufx-blue-600); background: var(--ufx-blue-50); color: var(--ufx-blue-700); }
.ufx-upload i { font-size: 1.4rem; color: var(--ufx-brand-blue); }
.ufx-upload__formats { font-size: var(--ufx-text-xs); color: var(--ufx-ink-400); }

/* --------------------------------------------------------------------------
   15. TABS — ufx-tabs
   -------------------------------------------------------------------------- */
.ufx-tabs { display: flex; gap: 4px; border-bottom: 1px solid rgba(92,120,146,.16); padding: 0 4px; }
.ufx-tabs__tab {
  position: relative; padding: 10px 14px; font-size: var(--ufx-text-sm); font-weight: 500;
  color: var(--ufx-ink-600); background: none; border: 0; cursor: pointer;
  border-radius: var(--ufx-r-sm) var(--ufx-r-sm) 0 0;
  transition: color var(--ufx-t-hover) var(--ufx-ease);
}
.ufx-tabs__tab:hover { color: var(--ufx-ink-950); background: rgba(60,132,224,.05); }
.ufx-tabs__tab[aria-selected="true"] { color: var(--ufx-blue-700); font-weight: 600; }
.ufx-tabs__tab[aria-selected="true"]::after {
  content: ""; position: absolute; left: 10px; right: 10px; bottom: -1px; height: 2.5px;
  border-radius: 2px 2px 0 0; background: var(--ufx-brand-azure);
}
.ufx-tabs__tab .ufx-chip-n { margin-left: 6px; font-size: var(--ufx-text-xs); background: var(--ufx-frost-200); border-radius: var(--ufx-r-pill); padding: 0 7px; }

/* --------------------------------------------------------------------------
   16. MATERIALE D — Transient Acrylic: overlay
   -------------------------------------------------------------------------- */
.ufx-acrylic {
  background: var(--ufx-acrylic-bg);
  -webkit-backdrop-filter: blur(26px) saturate(130%); backdrop-filter: blur(26px) saturate(130%);
  border: 1px solid rgba(255,255,255,.85);
  border-radius: var(--ufx-r-lg);
  box-shadow: var(--ufx-shadow-acrylic);
}
/* Dialog */
.ufx-dialog-backdrop {
  position: fixed; inset: 0; z-index: 1050;
  background: rgba(7,21,34,.42);
  -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px);
  display: none; align-items: center; justify-content: center; padding: var(--ufx-sp-5);
}
.ufx-dialog-backdrop.is-open { display: flex; }
.ufx-dialog { width: min(480px, 100%); animation: ufx-pop var(--ufx-t-panel) var(--ufx-ease); }
.ufx-dialog--wide { width: min(680px, 100%); }
.ufx-dialog__header { display: flex; align-items: center; gap: 12px; padding: var(--ufx-sp-5) var(--ufx-sp-5) 0; }
.ufx-dialog__title { font-size: var(--ufx-text-lg); font-weight: 650; margin: 0; }
.ufx-dialog__body { padding: var(--ufx-sp-4) var(--ufx-sp-5); font-size: var(--ufx-text-sm); color: var(--ufx-ink-600); }
.ufx-dialog__footer { display: flex; justify-content: flex-end; gap: 10px; padding: 0 var(--ufx-sp-5) var(--ufx-sp-5); }
.ufx-dialog__icon {
  width: 40px; height: 40px; border-radius: 13px; display: grid; place-items: center; flex-shrink: 0;
  color: var(--ufx-red-700); background: var(--ufx-red-50); border: 1px solid rgba(199,68,54,.2);
}
@keyframes ufx-pop { from { opacity: 0; transform: translateY(6px) scale(.985); } to { opacity: 1; transform: none; } }

/* Drawer */
.ufx-drawer {
  position: fixed; top: 0; right: 0; bottom: 0; z-index: 1040;
  width: min(460px, 92vw); display: flex; flex-direction: column;
  border-radius: 0; border-right: 0;
  transform: translateX(102%); transition: transform var(--ufx-t-panel) var(--ufx-ease);
}
.ufx-drawer.is-open { transform: none; }
.ufx-drawer__header { display: flex; align-items: center; gap: 12px; padding: var(--ufx-sp-5); border-bottom: 1px solid rgba(92,120,146,.12); }
.ufx-drawer__body { flex: 1; overflow-y: auto; padding: var(--ufx-sp-5); }
.ufx-drawer__footer { padding: var(--ufx-sp-4) var(--ufx-sp-5); border-top: 1px solid rgba(92,120,146,.12); display: flex; gap: 10px; justify-content: flex-end; }

/* Toast */
.ufx-toast-region { position: fixed; bottom: 22px; right: 22px; z-index: 1080; display: flex; flex-direction: column; gap: 10px; }
.ufx-toast {
  display: flex; align-items: flex-start; gap: 12px; width: 340px;
  padding: 13px 15px; border-radius: var(--ufx-r-md);
  animation: ufx-toast-in 200ms var(--ufx-ease);
}
.ufx-toast__icon { font-size: .95rem; margin-top: 1px; }
.ufx-toast--success .ufx-toast__icon { color: var(--ufx-brand-green); }
.ufx-toast--error .ufx-toast__icon { color: var(--ufx-red-600); }
.ufx-toast--info .ufx-toast__icon { color: var(--ufx-brand-azure); }
.ufx-toast__title { font-size: var(--ufx-text-sm); font-weight: 600; color: var(--ufx-ink-950); }
.ufx-toast__msg { font-size: var(--ufx-text-xs); color: var(--ufx-ink-600); }
.ufx-toast__close { margin-left: auto; }
@keyframes ufx-toast-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* Context menu */
.ufx-context-menu { min-width: 200px; padding: 6px; border-radius: var(--ufx-r-md); }
.ufx-context-menu__item {
  display: flex; align-items: center; gap: 10px; width: 100%;
  padding: 8px 10px; border: 0; background: none; cursor: pointer; text-align: left;
  font-size: var(--ufx-text-sm); color: var(--ufx-ink-800); border-radius: var(--ufx-r-sm);
  transition: background var(--ufx-t-hover);
}
.ufx-context-menu__item i { width: 16px; color: var(--ufx-ink-400); font-size: .8rem; }
.ufx-context-menu__item:hover { background: var(--ufx-blue-50); color: var(--ufx-blue-700); }
.ufx-context-menu__item:hover i { color: var(--ufx-blue-600); }
.ufx-context-menu__item--danger:hover { background: var(--ufx-red-50); color: var(--ufx-red-700); }
.ufx-context-menu__sep { height: 1px; margin: 5px 8px; background: rgba(92,120,146,.14); }

/* Tooltip */
.ufx-tooltip {
  font-size: var(--ufx-text-xs); font-weight: 500; color: #E8F0F8;
  background: rgba(11,28,44,.94); border-radius: var(--ufx-r-sm); padding: 5px 10px;
  box-shadow: var(--ufx-shadow-acrylic);
}

/* --------------------------------------------------------------------------
   17. ALERT / EMPTY STATE
   -------------------------------------------------------------------------- */
.ufx-alert {
  display: flex; gap: 12px; align-items: flex-start;
  padding: 13px 16px; border-radius: var(--ufx-r-md);
  font-size: var(--ufx-text-sm); border: 1px solid;
}
.ufx-alert i { margin-top: 2px; }
.ufx-alert--info    { color: var(--ufx-blue-700); background: var(--ufx-blue-50); border-color: rgba(43,114,188,.22); }
.ufx-alert--success { color: var(--ufx-green-700); background: var(--ufx-green-100); border-color: rgba(34,130,26,.25); }
.ufx-alert--warning { color: var(--ufx-peach-700); background: var(--ufx-peach-50); border-color: rgba(180,101,63,.28); }
.ufx-alert--danger  { color: var(--ufx-red-700); background: var(--ufx-red-50); border-color: rgba(199,68,54,.25); }

.ufx-empty-state {
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  padding: var(--ufx-sp-8) var(--ufx-sp-6); text-align: center; color: var(--ufx-ink-600);
}
.ufx-empty-state__art { display: grid; grid-template-columns: repeat(3, 16px); gap: 5px; margin-bottom: 6px; opacity: .8; }
.ufx-empty-state__art span { height: 16px; border-radius: 5px; background: var(--ufx-frost-300); }
.ufx-empty-state__art span:nth-child(2) { background: var(--ufx-blue-100); }
.ufx-empty-state__art span:nth-child(5) { background: var(--ufx-teal-100); border-radius: 50%; }
.ufx-empty-state__title { font-weight: 600; color: var(--ufx-ink-800); font-size: var(--ufx-text-md); }
.ufx-empty-state__msg { font-size: var(--ufx-text-sm); max-width: 42ch; }

/* --------------------------------------------------------------------------
   18. TIMELINE — ufx-timeline
   -------------------------------------------------------------------------- */
.ufx-timeline { list-style: none; margin: 0; padding: 0; position: relative; }
.ufx-timeline::before { content: ""; position: absolute; left: 15px; top: 8px; bottom: 8px; width: 1.5px; background: linear-gradient(180deg, rgba(92,120,146,.22), rgba(92,120,146,.08)); }
.ufx-timeline__item { position: relative; display: flex; gap: 14px; padding: 9px 0 9px 0; }
.ufx-timeline__marker {
  position: relative; z-index: 1; width: 32px; height: 32px; border-radius: 10px; flex-shrink: 0;
  display: grid; place-items: center; font-size: .72rem;
  color: var(--ufx-blue-700); background: #fff; border: 1px solid rgba(92,120,146,.2);
  box-shadow: var(--ufx-shadow-contact);
}
.ufx-timeline__marker--teal { color: var(--ufx-teal-700); }
.ufx-timeline__marker--peach { color: var(--ufx-peach-700); }
.ufx-timeline__marker--green { color: var(--ufx-green-700); }
.ufx-timeline__body { min-width: 0; padding-top: 2px; }
.ufx-timeline__title { font-size: var(--ufx-text-sm); color: var(--ufx-ink-800); }
.ufx-timeline__title strong { color: var(--ufx-ink-950); font-weight: 600; }
.ufx-timeline__meta { font-size: var(--ufx-text-xs); color: var(--ufx-ink-400); font-variant-numeric: tabular-nums; }

/* --------------------------------------------------------------------------
   19. CHART CONTAINER — ufx-chart
   -------------------------------------------------------------------------- */
.ufx-chart { position: relative; width: 100%; }
.ufx-chart canvas { position: absolute; inset: 0; width: 100% !important; height: 100% !important; }
.ufx-chart--main { height: 300px; }
.ufx-chart--side { height: 240px; }
.ufx-chart--wide { height: 260px; }
.ufx-chart-legend { display: flex; gap: 18px; flex-wrap: wrap; font-size: var(--ufx-text-xs); color: var(--ufx-ink-600); }
.ufx-chart-legend span { display: inline-flex; align-items: center; gap: 7px; }
.ufx-chart-legend i { width: 10px; height: 10px; border-radius: 3px; display: inline-block; }

/* --------------------------------------------------------------------------
   20. SKELETON
   -------------------------------------------------------------------------- */
.ufx-skeleton {
  border-radius: var(--ufx-r-sm);
  background: linear-gradient(90deg, var(--ufx-frost-200) 25%, var(--ufx-frost-100) 45%, var(--ufx-frost-200) 65%);
  background-size: 300% 100%;
  animation: ufx-shimmer 1.6s ease infinite;
  min-height: 12px;
}
@keyframes ufx-shimmer { from { background-position: 100% 0; } to { background-position: -100% 0; } }

/* --------------------------------------------------------------------------
   21. UTILITY + GRIGLIE
   -------------------------------------------------------------------------- */
.ufx-grid { display: grid; gap: var(--ufx-sp-5); }
.ufx-grid--kpi { grid-template-columns: 1.45fr 1fr 1fr 1fr 1fr; }
/* Stesso split su tutte le fasce → la colonna del gap resta allineata verticalmente */
.ufx-grid--analytics { grid-template-columns: var(--ufx-split, 1.6fr 1fr); }
.ufx-grid--split { grid-template-columns: var(--ufx-split, 1.6fr 1fr); }
.ufx-stack { display: flex; flex-direction: column; gap: var(--ufx-sp-5); }
.ufx-row { display: flex; gap: var(--ufx-sp-3); align-items: center; }
.ufx-divider { height: 1px; background: rgba(92,120,146,.12); border: 0; margin: var(--ufx-sp-4) 0; }

/* --------------------------------------------------------------------------
   22. RESPONSIVE
   -------------------------------------------------------------------------- */
@media (max-width: 1440px) {
  .ufx-content { padding: var(--ufx-sp-5) var(--ufx-sp-6) var(--ufx-sp-7); }
}
@media (max-width: 1200px) {
  .ufx-grid--kpi { grid-template-columns: 1fr 1fr; }
  .ufx-grid--analytics, .ufx-grid--split { grid-template-columns: 1fr; }
}
@media (max-width: 992px) {
  .ufx-sidebar {
    position: fixed; left: 0; top: 0; transform: translateX(-102%);
    transition: transform var(--ufx-t-panel) var(--ufx-ease);
    width: var(--ufx-sidebar-w) !important; box-shadow: var(--ufx-shadow-acrylic);
  }
  .ufx-app-shell.is-nav-open .ufx-sidebar { transform: none; }
  .ufx-nav-backdrop { position: fixed; inset: 0; z-index: 95; background: rgba(7,21,34,.4); display: none; }
  .ufx-app-shell.is-nav-open .ufx-nav-backdrop { display: block; }
  .ufx-command-bar { padding: 0 var(--ufx-sp-4); }
  .ufx-content { padding: var(--ufx-sp-4); }
  .ufx-command-bar__search { width: 100%; max-width: none; flex: 1; }
  .ufx-nav-toggle { display: inline-grid !important; }
}
.ufx-nav-toggle { display: none; }
@media (max-width: 640px) {
  .ufx-grid--kpi { grid-template-columns: 1fr; }
  .ufx-page-header__actions { width: 100%; margin-left: 0; }
  .ufx-command-bar__context span { display: none; }
  .ufx-toast-region { left: 12px; right: 12px; }
  .ufx-toast { width: auto; }
  .ufx-data-table thead { display: none; }
}

/* --------------------------------------------------------------------------
   23. ACCESSIBILITÀ / FALLBACK
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .ufx-glass-panel, .ufx-card, .ufx-command-bar { background: rgba(255,255,255,.97); }
  .ufx-acrylic { background: #FAFCFE; }
}
@media (forced-colors: active) {
  .ufx-card, .ufx-glass-panel, .ufx-acrylic, .ufx-button, .ufx-status, .ufx-priority { border: 1px solid CanvasText; }
  .ufx-sidebar-item[aria-current="page"]::before { background: Highlight; }
}

/* --------------------------------------------------------------------------
   24. OVERRIDE BOOTSTRAP MINIMI
   -------------------------------------------------------------------------- */
.ufx-app-shell .btn:focus-visible { box-shadow: var(--ufx-focus-ring); }
/* Modali Bootstrap dentro la shell: superficie piena, coerente con le card */
.ufx-app-shell .modal-content {
  border: 0; border-radius: 14px; overflow: hidden;
  background: #fff;
  box-shadow: 0 24px 60px rgba(7,21,34,.28);
}
.ufx-app-shell .modal-body { background: #fff; }
.ufx-app-shell .modal-footer { background: var(--ufx-frost-50, #F8FAFC); border-top: 1px solid rgba(92,120,146,.12); }

/* ==========================================================================
   PRODUZIONE UniFix — override integrazione (loghi reali PNG, centrati)
   ========================================================================== */
.ufx-sidebar__brand { flex-direction: column; justify-content: center; align-items: center; gap: 10px; text-align: center; padding: 24px 16px 22px; }
.ufx-sidebar__brand img.ufx-logo-unifix {
  height: auto; max-width: 100%; width: 100%;
  display: block; margin: 0 auto;
  filter: drop-shadow(0 1px 2px rgba(0,0,0,.35));
}
.ufx-sidebar__unisan { justify-content: center; }
.ufx-sidebar__unisan img.ufx-logo-unisan {
  height: auto; width: 100%; max-width: 210px;
  display: block; margin: 0 auto; opacity: .92;
}
.ufx-sidebar__unisan .ufx-logo-unisan + .ufx-sidebar__credit { margin-top: 2px; }
.ufx-app-shell.is-collapsed .ufx-sidebar__brand img.ufx-logo-unifix,
.ufx-app-shell.is-collapsed .ufx-sidebar__unisan img.ufx-logo-unisan { display: none; }
a.ufx-priority-item:hover, a.ufx-kpi:hover { text-decoration: none; }
a.ufx-kpi { color: inherit; }
/* Ricerca documenti in archivio (modale lavorazione richieste) */
.search-results { position: absolute; background: #fff; border: 1px solid var(--ufx-frost-300); border-radius: 8px; z-index: 1000; width: 100%; max-height: 160px; overflow-y: auto; list-style: none; padding: 0; margin: 2px 0 0; box-shadow: 0 8px 22px rgba(16,24,32,.12); }
.search-results li { padding: 8px 10px; cursor: pointer; border-bottom: 1px solid var(--ufx-frost-200); font-size: var(--ufx-text-sm); }
.search-results li:hover { background-color: var(--ufx-frost-100); }
.cursor-pointer { cursor: pointer; }

/* Allineamento KPI: contenuto distribuito sull'altezza; il KPI primario
   occupa l'intera riga quando la griglia scende a 2 o 1 colonne */
.ufx-kpi { justify-content: space-between; }
@media (max-width: 1200px) {
  .ufx-grid--kpi .ufx-kpi-primary { grid-column: 1 / -1; }
}

/* Righe di raggruppamento nelle tabelle (es. strutture per regione) */
.ufx-data-table tr.ufx-table-group td {
  background: var(--ufx-frost-100);
  color: var(--ufx-ink-800);
  font-size: var(--ufx-text-xs); font-weight: 700;
  letter-spacing: .07em; text-transform: uppercase;
  padding: 8px var(--ufx-cell-px);
  border-top: 1px solid rgba(92,120,146,.14);
}
.ufx-data-table tr.ufx-table-group td i { color: var(--ufx-brand-institution); margin-right: 6px; }
.ufx-data-table tr.ufx-table-group:hover td { background: var(--ufx-frost-100); }

/* Touch target minimi (WCAG 2.5.8 / linee guida mobile: >=44px) sui dispositivi touch */
@media (pointer: coarse) {
  .ufx-icon-button { width: 42px; height: 42px; }
  .ufx-button { min-height: 44px; }
  .ufx-filter-chip { min-height: 40px; }
}

/* ===== Barra di avanzamento navigazione (feedback caricamento pagine) ===== */
.ufx-loadbar {
  position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 3000;
  background: linear-gradient(90deg, var(--ufx-brand-azure), var(--ufx-brand-teal));
  transform: scaleX(0); transform-origin: left;
  opacity: 0; pointer-events: none;
}
body.is-navigating .ufx-loadbar {
  opacity: 1;
  animation: ufxLoadbar 1.6s var(--ufx-ease) forwards;
}
@keyframes ufxLoadbar {
  0% { transform: scaleX(0); }
  60% { transform: scaleX(.72); }
  100% { transform: scaleX(.92); }
}

/* ===== Dropdown ricerca globale (command bar) ===== */
.ufx-search-dd {
  position: absolute; top: calc(100% + 6px); left: 0; right: 0; z-index: 1500;
  border-radius: 12px; overflow: hidden;
  /* Sfondo pieno: il menu non deve lasciar trasparire il contenuto della pagina sotto */
  background: #ffffff;
  border: 1px solid var(--ufx-frost-300);
  box-shadow: var(--ufx-shadow-acrylic);
  max-height: 60vh; overflow-y: auto;
}
@supports not (backdrop-filter: blur(1px)) { .ufx-search-dd { background: #fff; } }
.ufx-search-dd__group {
  padding: 8px 14px 2px; font-size: var(--ufx-text-xs); font-weight: 700;
  letter-spacing: .07em; text-transform: uppercase; color: var(--ufx-ink-400);
}
.ufx-search-dd__item {
  display: flex; align-items: center; gap: 10px; padding: 8px 14px;
  color: var(--ufx-ink-800); text-decoration: none; font-size: var(--ufx-text-sm);
}
.ufx-search-dd__item i { width: 18px; text-align: center; color: var(--ufx-brand-institution); }
.ufx-search-dd__item .t { font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ufx-search-dd__item .m { margin-left: auto; color: var(--ufx-ink-400); font-size: var(--ufx-text-xs); white-space: nowrap; }
.ufx-search-dd__item:hover, .ufx-search-dd__item.is-hover { background: rgba(60,132,224,.10); text-decoration: none; }
.ufx-search-dd__empty { padding: 14px; color: var(--ufx-ink-600); font-size: var(--ufx-text-sm); }

/* ===== Intestazioni tabella ordinabili (sorter client generico) ===== */
.ufx-data-table th.ufx-sortable { cursor: pointer; user-select: none; white-space: nowrap; }
.ufx-data-table th.ufx-sortable:hover { color: var(--ufx-blue-700); }
.ufx-data-table th.ufx-sortable .ufx-sort-ind { margin-left: 6px; font-size: .65rem; opacity: .45; }
.ufx-data-table th[aria-sort] .ufx-sort-ind { opacity: 1; color: var(--ufx-blue-600); }

/* ===== Resa a card delle tabelle su schermi piccoli ===== */
@media (max-width: 640px) {
  .ufx-data-table, .ufx-data-table tbody, .ufx-data-table tr, .ufx-data-table td { display: block; width: 100%; box-sizing: border-box; }
  .ufx-data-table tr {
    border: 1px solid rgba(92,120,146,.16); border-radius: 12px;
    margin: 10px 12px; width: auto; background: #fff; padding: 4px 0;
    box-shadow: var(--ufx-shadow-contact);
  }
  .ufx-data-table td { border: 0; padding: 6px 14px; height: auto; }
  .ufx-data-table td:empty { display: none; }
  .ufx-data-table tr.ufx-table-group { background: transparent; border: 0; box-shadow: none; margin: 8px 12px 0; padding: 0; }
  .ufx-data-table tr.ufx-table-group td { background: transparent; border: 0; }
  .ufx-row-actions { justify-content: flex-end; }
}
@media (pointer: coarse) {
  .ufx-row-actions { opacity: 1; }
}
.ufx-icon-button.is-active { background: var(--ufx-blue-50); color: var(--ufx-blue-700); border-color: rgba(60,132,224,.3); }

/* Credito sviluppo nel footer della sidebar */
.ufx-sidebar__credit {
  display: block;
  font-size: var(--ufx-text-xs); line-height: 1.45; letter-spacing: .04em;
  color: rgba(216,228,240,.72); font-weight: 600;
}
.ufx-app-shell.is-collapsed .ufx-sidebar__credit { display: none; }

/* Stato ARCHIVIATA — chiusa d'ufficio senza intervento: tono neutro e
   smorzato, si distingue a colpo d'occhio da APERTA e da CHIUSA. */
.ufx-status--archiviata {
  background: var(--ufx-frost-200);
  color: var(--ufx-ink-600);
  border: 1px dashed rgba(92,120,146,.35);
}