/* ============================================================================
 * workspace.css
 * Atlas ER — UX-DIR-2 (#188) — 2026-04-23
 *
 * Shell "Atlas Workspace" condiviso da TUTTE le pagine ruolo:
 *   delegato, fiduciario, srs, commissione_impianti, ente,
 *   coordinatore, assessore (+ admin nella fase finale ADM-TAB-1).
 *
 * Direzione normativa: docs/reference/ux_workspace.md §10.
 * Design language sorgente: §9 (pattern pill/hair/kicker/stat dalla landing v2).
 *
 * STRUTTURA:
 *   1. Token extra workspace (:root)
 *   2. Layout shell (.ws-layout / .admin-layout alias)
 *   3. Header (.ws-header / .admin-header alias override)
 *   4. Sidebar (.ws-sidebar / .admin-sidebar alias override)
 *   5. Content (.ws-content / .admin-content alias)
 *   6. Footer (.ws-footer)
 *   7. Pattern page-header + section-kicker
 *   8. Pattern card
 *   9. Pattern stat-grid + stat
 *  10. Pattern empty-state + loading
 *  11. Pattern toast in-page
 *  12. Pattern link-arrow
 *  13. Dark mode ([data-theme="dark"])
 *  14. Responsive (<768px drawer)
 *
 * DIPENDENZE:
 *   - design-tokens.css (caricato PRIMA)
 *   - components.css (caricato PRIMA, fornisce .btn + .btn--pill)
 *
 * MIGRAZIONE (§10.8):
 *   Alias .admin-* per backward-compat delle 3 pagine ruolo esistenti
 *   (delegato.html, fiduciario.html, srs.html). Rimuovere alias dopo
 *   il rename HTML in fase DEL-3/FID-3/MSR-3.
 *
 * VINCOLI:
 *   - ≤700 righe totali (limite check_sizes.sh standard)
 *   - Zero !important (tranne override MapLibre, qui non presenti)
 *   - Zero dipendenze esterne
 *   - Solo var(--token), nessun hex hardcoded
 * ============================================================================ */


/* ============================================================================
 * 1. TOKEN EXTRA WORKSPACE
 * ============================================================================ */

:root {
  /* Tipografia serif (Georgia system fallback — §10.0 D1) */
  --ws-font-serif: Georgia, 'Times New Roman', serif;

  /* Easing ease-out-expo dalla landing v2 (§9.6) */
  --ws-easing: cubic-bezier(.16, 1, .3, 1);

  /* Dimensioni shell */
  --ws-header-h: 4rem;        /* 64px — più alto di --header-height (56px) */
  --ws-sidebar-w: 16.25rem;   /* 260px — più largo di --sidebar-width (256px) */
  --ws-footer-h: 3rem;        /* 48px */

  /* Bordi hair (hairline borders dalla landing §9.5) */
  --color-border-hair:        rgba(14, 17, 23, 0.08);
  --color-border-hair-strong: rgba(14, 17, 23, 0.16);

  /* Shadow CTA pill primary (dalla landing §9.5) */
  --ws-shadow-cta: 0 10px 24px -8px rgba(0, 51, 160, 0.45);

  /* Hover primary derivato (componente .btn-primary non aveva --color-primary-hover) */
  --color-primary-hover: var(--color-primary-dark);
}


/* ============================================================================
 * 2. LAYOUT SHELL
 *
 * Grid a 2 colonne: sidebar fissa + content scrollabile.
 * Header è position:fixed full-width sopra il layout.
 * Alias .admin-layout attivo per compat con HTML esistenti (delegato/fiduciario/srs).
 * ============================================================================ */

/* #41: body diventa flex column con altezza viewport e overflow hidden.
 * Questo evita che footer-legal (FUORI da .admin-layout) faccia scrollare
 * tutto il body trascinando con sé la sidebar. Header + admin-layout + footer
 * vivono dentro 100vh; lo scroll avviene SOLO dentro .admin-content. */
body {
  display: flex;
  flex-direction: column;
  height: 100vh;
  margin: 0;
  overflow: hidden;
}

/* Wrapper x-data="workspacePage" è il contenitore di header + admin-layout.
 * Deve essere a sua volta flex column per far prendere ad admin-layout lo
 * spazio residuo (header altezza fissa, admin-layout flex:1). */
body > [x-data="workspacePage"] {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
}

.ws-layout,
.admin-layout {
  display: grid;
  grid-template-columns: var(--ws-sidebar-w) 1fr;
  grid-template-areas: "sidebar content";
  /* #41: flex:1 dentro body-flex-column → riempie lo spazio sotto l'header
   * senza far scrollare il body. min-height:0 permette al grid di accettare
   * lo shrink dentro flex parent. Scroll interno gestito da .admin-content. */
  flex: 1;
  min-height: 0;
  overflow: hidden;
  background: var(--color-bg-page);
  transition: grid-template-columns var(--transition-base);
}

/* Override del margin-top admin-layout legacy — ora gestito da grid row */
.admin-layout {
  display: grid;  /* sovrascrive flex di admin.css */
  margin-top: 0;
}

/* Collasso sidebar: quando l'aside ha .admin-sidebar--chiusa, restringi la
 * grid-column a --sidebar-width-collapsed (64px). Usa :has() per pilotare il
 * grid parent senza modificare HTML/Alpine. Supporto: Safari 15.4+, Chrome 105+,
 * Firefox 121+ (target moderni Atlas). */
.ws-layout:has(.admin-sidebar--chiusa),
.admin-layout:has(.admin-sidebar--chiusa) {
  grid-template-columns: var(--sidebar-width-collapsed) 1fr;
}


/* ============================================================================
 * 3. HEADER
 *
 * Light background, hair border bottom, altezza 64px.
 * Sovrascrive .admin-header di admin.css (che era blu pieno con shadow).
 * ============================================================================ */

.ws-header,
.admin-header {
  grid-area: header;
  position: sticky;
  top: 0;
  z-index: var(--z-header);
  height: var(--ws-header-h);
  background: var(--color-bg-surface);
  border-bottom: 1px solid var(--color-border-hair-strong);
  box-shadow: none;
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding: 0 var(--space-6);
  color: var(--color-text-primary);
}

/* Override colori header-* legacy (admin.css li faceva bianchi su blu) */
.admin-header .header-logo,
.admin-header .header-user {
  color: var(--color-text-primary);
}

.admin-header .header-toggle-btn {
  color: var(--color-text-secondary);
}

.admin-header .header-toggle-btn:hover {
  background: var(--color-bg-hover);
}

.admin-header .header-user-name {
  opacity: 1;
  color: var(--color-text-primary);
}

.admin-header .header-logo-badge {
  background: var(--color-primary-50);
  color: var(--color-primary);
}

/* Override .btn-header per workspace (admin.css li definiva bianchi su blu) —
 * sui workspace (DEL/FID/SRS) lo sfondo header è chiaro, quindi border+text
 * bianchi diventano invisibili. Fix: text/border sul colore di testo secondario,
 * hover su bg-hover. Coerente con gli altri bottoni header workspace. */
.admin-header .btn-header {
  color: var(--color-text-secondary);
  border-color: var(--color-border-default);
}
.admin-header .btn-header:hover {
  background: var(--color-bg-hover);
  color: var(--color-text-primary);
}


/* ============================================================================
 * 4. SIDEBAR
 *
 * Light background, hair border right, larghezza 260px.
 * Sovrascrive .admin-sidebar (che era blu scuro pieno).
 * Le classi figlie (.sidebar-nav, .sidebar-nav-item) ricevono override colori
 * per passare da dark-on-blue a neutral-on-light.
 * ============================================================================ */

.ws-sidebar,
.admin-sidebar {
  grid-area: sidebar;
  width: auto;  /* override admin.css width fisso */
  background: var(--color-bg-surface);
  border-right: 1px solid var(--color-border-hair);
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  /* #41: sidebar resta ferma perché .admin-layout ha height fissa + overflow:hidden,
   * lo scroll avviene SOLO dentro .admin-content. Sidebar grid-item è alta come
   * la grid row (= 100vh - header). overflow-y:auto interno se la nav è più alta. */
  overflow-y: auto;
  overflow-x: hidden;
}

.admin-sidebar--chiusa {
  width: auto;  /* su desktop non collassa in grid layout */
}

/* Override colori nav items (admin.css usava bianco opacizzato su blu) */
.admin-sidebar .sidebar-nav-item,
.ws-sidebar .ws-nav-item {
  color: var(--color-text-secondary);
  border-left-color: transparent;
}

.admin-sidebar .sidebar-nav-item:hover,
.ws-sidebar .ws-nav-item:hover {
  background: var(--color-bg-hover);
  color: var(--color-text-primary);
}

.admin-sidebar .sidebar-nav-item--attivo,
.ws-sidebar .ws-nav-item--attivo {
  color: var(--color-primary);
  background: var(--color-primary-50);
  border-left-color: var(--color-primary);
  font-weight: var(--font-weight-semibold);
}

.admin-sidebar .sidebar-section-label {
  color: var(--color-text-muted);
}

.admin-sidebar .sidebar-footer {
  border-top-color: var(--color-border-hair);
}

.admin-sidebar .sidebar-footer-label {
  color: var(--color-text-muted);
}


/* ============================================================================
 * 5. CONTENT
 *
 * Area principale scrollabile, max-width opzionale per leggibilità.
 * ============================================================================ */

.ws-content,
.admin-content {
  grid-area: content;
  padding: var(--space-8);
  overflow-y: auto;
  min-width: 0;
  background: var(--color-bg-page);
}

.ws-content__inner {
  max-width: var(--max-width-content);
  margin: 0 auto;
}


/* ============================================================================
 * 6. FOOTER
 *
 * Altezza minimale, info legali + versione.
 * Non usato ancora dalle 3 pagine esistenti — disponibile per nuove pagine.
 * ============================================================================ */

.ws-footer {
  grid-column: 1 / -1;
  height: var(--ws-footer-h);
  padding: 0 var(--space-6);
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-top: 1px solid var(--color-border-hair);
  background: var(--color-bg-surface);
  color: var(--color-text-muted);
  font-size: var(--font-size-xs);
}

.ws-footer a {
  color: var(--color-text-secondary);
  text-decoration: none;
}

.ws-footer a:hover {
  color: var(--color-text-primary);
}


/* ============================================================================
 * 7. PATTERN — PAGE HEADER + SECTION KICKER
 *
 * .ws-page-header: titolo H1 + kicker opzionale + CTA a destra.
 * .ws-section-kicker: label uppercase blu CONI con linea ::before
 * (pattern §9.4 dalla landing .section-kicker).
 * ============================================================================ */

.ws-page-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-6);
  margin-bottom: var(--space-8);
  padding-bottom: var(--space-6);
  border-bottom: 1px solid var(--color-border-hair);
  flex-wrap: wrap;
}

.ws-page-header__title {
  font-size: 1.75rem;      /* 28px — §10.5 H1 */
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-tight);
  letter-spacing: -0.01em;
  color: var(--color-text-primary);
  margin: 0;
}

.ws-page-header__kicker {
  display: block;
  margin-bottom: var(--space-2);
}

.ws-page-header__actions {
  display: flex;
  gap: var(--space-3);
  flex-shrink: 0;
}

.ws-section-kicker {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  font-size: 0.75rem;           /* 12px — §10.5 kicker */
  font-weight: var(--font-weight-medium);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-primary);
}

.ws-section-kicker::before {
  content: "";
  width: 1.5rem;
  height: 1px;
  background: var(--color-primary);
  opacity: 0.6;
}


/* ============================================================================
 * 8. PATTERN — CARD
 *
 * Card con hair border + padding generoso + hover subtle.
 * Pattern §9.5 — no shadow a riposo, shadow soft on hover.
 * ============================================================================ */

.ws-card {
  background: var(--color-bg-surface);
  border: 1px solid var(--color-border-hair);
  border-radius: var(--border-radius-lg);
  padding: var(--space-6);
  transition: border-color var(--transition-fast) var(--ws-easing),
              box-shadow var(--transition-fast) var(--ws-easing);
}

.ws-card--interactive {
  cursor: pointer;
}

.ws-card--interactive:hover {
  border-color: var(--color-border-hair-strong);
  box-shadow: var(--shadow-sm);
}

.ws-card__header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-4);
  margin-bottom: var(--space-4);
}

.ws-card__title {
  font-size: 1.25rem;         /* 20px — §10.5 H2 */
  font-weight: var(--font-weight-semibold);
  letter-spacing: -0.005em;
  color: var(--color-text-primary);
  margin: 0;
}

.ws-card__body {
  color: var(--color-text-secondary);
  font-size: var(--font-size-base);
  line-height: var(--line-height-relaxed);
}

.ws-card__body > * + * {
  margin-top: var(--space-3);
}


/* ============================================================================
 * 9. PATTERN — STAT GRID + STAT
 *
 * Grid responsive di KPI. Numeri in serif Georgia blu CONI.
 * Pattern §9.3 — dalla landing .panel-stats.
 * ============================================================================ */

.ws-stat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
  gap: 0;
  border: 1px solid var(--color-border-hair);
  border-radius: var(--border-radius-lg);
  overflow: hidden;
  background: var(--color-bg-surface);
}

.ws-stat {
  padding: var(--space-5) var(--space-6);
  border-right: 1px solid var(--color-border-hair);
  border-bottom: 1px solid var(--color-border-hair);
}

/* Rimuovi bordo destro sull'ultimo di ogni riga e bordo inferiore sull'ultima riga.
 * Approssimazione: -webkit-flex non supporta nth. Con auto-fit il conteggio varia,
 * quindi usiamo :last-child per il caso singolo e accettiamo che con grid
 * responsive i bordi residui si nascondano grazie a overflow:hidden del parent. */
.ws-stat:last-child {
  border-right: none;
}

.ws-stat__num {
  display: block;
  font-family: var(--ws-font-serif);
  font-size: 1.75rem;         /* 28px */
  font-weight: 400;
  line-height: 1.1;
  letter-spacing: -0.01em;
  color: var(--color-primary);
}

.ws-stat__lbl {
  display: block;
  margin-top: var(--space-2);
  font-size: 0.75rem;         /* 12px */
  font-weight: var(--font-weight-medium);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}

.ws-stat__delta {
  display: inline-block;
  margin-top: var(--space-1);
  font-size: var(--font-size-xs);
  color: var(--color-text-secondary);
}

.ws-stat__delta--up    { color: var(--color-success); }
.ws-stat__delta--down  { color: var(--color-error); }


/* ============================================================================
 * 10. PATTERN — EMPTY STATE + LOADING
 *
 * Stato vuoto centrato con icona + testo + CTA opzionale.
 * Loading: spinner neutrale minimale (base, varianti future per skeleton).
 * ============================================================================ */

.ws-empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: var(--space-12) var(--space-6);
  color: var(--color-text-secondary);
}

.ws-empty-state__icon {
  width: 3rem;
  height: 3rem;
  margin-bottom: var(--space-4);
  color: var(--color-text-muted);
}

.ws-empty-state__title {
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-primary);
  margin: 0 0 var(--space-2);
}

.ws-empty-state__body {
  font-size: var(--font-size-sm);
  max-width: 24rem;
  margin: 0 0 var(--space-6);
  line-height: var(--line-height-relaxed);
}

.ws-loading {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-4);
  color: var(--color-text-muted);
  font-size: var(--font-size-sm);
}

.ws-loading__spinner {
  width: 1rem;
  height: 1rem;
  border: 2px solid var(--color-border);
  border-top-color: var(--color-primary);
  border-radius: 50%;
  animation: ws-spin 0.8s linear infinite;
}

@keyframes ws-spin {
  to { transform: rotate(360deg); }
}


/* ============================================================================
 * 11. PATTERN — TOAST IN-PAGE
 *
 * Notifica floating bottom-right. 3 varianti: success/error/info.
 * Alpine gestisce show/hide + auto-dismiss (3s).
 * NB: esiste anche .toast in components.css (toast-container globale);
 * qui è un pattern locale in-page per azioni scoped alla pagina ruolo.
 * ============================================================================ */

.ws-toast {
  position: fixed;
  bottom: var(--space-6);
  right: var(--space-6);
  z-index: var(--z-toast);
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  min-width: 16rem;
  max-width: 24rem;
  padding: var(--space-4) var(--space-5);
  background: var(--color-bg-surface);
  border: 1px solid var(--color-border-hair-strong);
  border-left: 3px solid var(--color-primary);
  border-radius: var(--border-radius-md);
  box-shadow: var(--shadow-lg);
  color: var(--color-text-primary);
  font-size: var(--font-size-sm);
}

.ws-toast--success { border-left-color: var(--color-success); }
.ws-toast--error   { border-left-color: var(--color-error); }
.ws-toast--info    { border-left-color: var(--color-info); }

.ws-toast__icon {
  width: 1.25rem;
  height: 1.25rem;
  flex-shrink: 0;
  margin-top: 0.1rem;
}

.ws-toast--success .ws-toast__icon { color: var(--color-success); }
.ws-toast--error   .ws-toast__icon { color: var(--color-error); }
.ws-toast--info    .ws-toast__icon { color: var(--color-info); }


/* ============================================================================
 * 12. PATTERN — LINK ARROW
 *
 * Link con freccia che slitta verso destra on hover (pattern §9.7).
 * Dalla landing .panel-micro-cta (gap 6px → 10px hover).
 * ============================================================================ */

.ws-link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;      /* 6px a riposo */
  color: var(--color-primary);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  text-decoration: none;
  transition: gap var(--transition-fast) var(--ws-easing),
              color var(--transition-fast) var(--ws-easing);
}

.ws-link-arrow::after {
  content: "→";
  font-size: 1em;
  line-height: 1;
  transition: transform var(--transition-fast) var(--ws-easing);
}

.ws-link-arrow:hover {
  gap: 0.625rem;      /* 10px hover */
  color: var(--color-primary-dark);
}

.ws-link-arrow:hover::after {
  transform: translateX(2px);
}


/* ============================================================================
 * 12b. PATTERN — ACTION ROW + ACTIVITY LIST (DEL-4a)
 *
 * Utility per panoramiche ruolo: riga di CTA pill + lista "attività recente".
 * Usati dalla panoramica delegato; riusabili per fiduciario/srs/ente.
 * ============================================================================ */

.ws-action-row {
  display: flex;
  gap: var(--space-3);
  flex-wrap: wrap;
}

.ws-activity-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.ws-activity-item {
  display: flex;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-3) 0;
  border-bottom: 1px solid var(--color-border-hair);
}

.ws-activity-item__meta {
  color: var(--color-text-muted);
  font-size: var(--font-size-sm);
}

.ws-activity-item__sub {
  color: var(--color-text-muted);
}


/* ============================================================================
 * 13. DARK MODE
 *
 * Le variabili semantiche (bg-surface/bg-page/text-*/border) sono già
 * gestite da design-tokens.css §7. Qui aggiungiamo solo:
 *   - hair borders invertiti (rgba chiaro su scuro)
 *   - shadow CTA mantiene blu (contrasto ok su surface elevata)
 * ============================================================================ */

[data-theme="dark"] {
  --color-border-hair:        rgba(255, 255, 255, 0.08);
  --color-border-hair-strong: rgba(255, 255, 255, 0.16);
}


/* ============================================================================
 * 14. RESPONSIVE
 *
 * <768px: sidebar diventa drawer overlay, toggle via store Alpine
 * (sidebar_aperta). Content full-width. Header resta sticky.
 *
 * Breakpoint coerenti con landing (768px = mobile / desktop split).
 * ============================================================================ */

@media (max-width: 768px) {
  .ws-layout,
  .admin-layout {
    grid-template-columns: 1fr;
    grid-template-areas:
      "header"
      "content";
  }

  .ws-sidebar,
  .admin-sidebar {
    position: fixed;
    top: var(--ws-header-h);
    left: 0;
    bottom: 0;
    width: min(18rem, 85vw);
    z-index: calc(var(--z-header) - 1);
    transform: translateX(-100%);
    transition: transform var(--transition-base) var(--ws-easing);
    box-shadow: var(--shadow-lg);
  }

  .ws-layout--sidebar-open .ws-sidebar,
  .ws-layout--sidebar-open .admin-sidebar,
  .admin-sidebar:not(.admin-sidebar--chiusa) {
    transform: translateX(0);
  }

  .ws-content,
  .admin-content {
    padding: var(--space-5);
  }

  .ws-page-header {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-4);
  }

  .ws-page-header__actions {
    width: 100%;
  }

  .ws-stat-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .ws-toast {
    left: var(--space-4);
    right: var(--space-4);
    bottom: var(--space-4);
    min-width: 0;
    max-width: none;
  }
}

/* ============================================================================
   WS-TABLE — tabella densa riusabile (DEL-4d, FID-4b/c, MSR-4b, ENT-4a..d)
   Pattern: grid semantica per lista con 200-400 righe, header sticky opzionale.
   ============================================================================ */

.ws-table-wrap {
  position: relative;
  border: 1px solid var(--ws-border, #e5e5e5);
  border-radius: var(--radius-lg, 12px);
  background: #fff;
  overflow: hidden;
}

.ws-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.92em;
}

.ws-table thead th {
  position: sticky;
  top: 0;
  z-index: 1;
  background: #fafafa;
  color: var(--ws-text-muted, #5a5a5a);
  font-weight: 600;
  font-size: 0.82em;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  text-align: left;
  padding: var(--space-3) var(--space-3);
  border-bottom: 1px solid var(--ws-border, #e5e5e5);
  white-space: nowrap;
}

.ws-table tbody td {
  padding: var(--space-3) var(--space-3);
  border-bottom: 1px solid #f0f0f0;
  vertical-align: middle;
}

.ws-table tbody tr:last-child td {
  border-bottom: none;
}

.ws-table tbody tr:hover {
  background: #fafafa;
}

.ws-table__nome {
  font-weight: 600;
  color: var(--ws-text, #1a1a1a);
}

.ws-table__sub {
  display: block;
  font-size: 0.82em;
  color: var(--ws-text-muted, #5a5a5a);
  font-weight: 400;
  margin-top: 2px;
}

.ws-table__actions {
  text-align: right;
  white-space: nowrap;
}

/* Badge "in coda" accanto al nome impianto/società */
.ws-badge-coda {
  display: inline-block;
  margin-left: var(--space-2);
  padding: 2px 8px;
  border-radius: 999px;
  background: #fff4d6;
  color: #8a5a00;
  font-size: 0.72em;
  font-weight: 600;
  letter-spacing: 0.02em;
  vertical-align: middle;
  cursor: help;
}

/* Modifier — pending creata dall'utente corrente (tracciabilità diretta in Panoramica). */
.ws-badge-coda--mia {
  background: #dde7ff;
  color: #1a3a8a;
}

/* Chip stato record (attivo/inattivo/bozza_rinnovo/eliminato) */
.ws-chip {
  display: inline-block;
  padding: 2px 10px;
  border-radius: 999px;
  font-size: 0.78em;
  font-weight: 600;
  letter-spacing: 0.02em;
  background: #f0f0f0;
  color: #4a4a4a;
}
.ws-chip--attivo       { background: #e0f4e8; color: #1e6b3a; }
.ws-chip--inattivo     { background: #f5e0e0; color: #7a2020; }
.ws-chip--bozza        { background: #e6edf7; color: #2a4a7a; }
.ws-chip--eliminato    { background: #ebebeb; color: #707070; text-decoration: line-through; }

/* Priorità avvisi (FID-4d) — palette ENUM priorita_avviso (mig 001) */
.ws-chip--prio-urgente { background: #fce0e0; color: #8a1a1a; }
.ws-chip--prio-alta    { background: #fff0d4; color: #7a4a10; }
.ws-chip--prio-normale { background: #e6edf7; color: #2a4a7a; }
.ws-chip--prio-bassa   { background: #ebebeb; color: #707070; }

/* Filter bar sopra la tabella */
.ws-filter-bar {
  display: grid;
  grid-template-columns: 1fr 1fr 2fr auto;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
  align-items: end;
}

.ws-filter-bar label {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 0.82em;
  color: var(--ws-text-muted, #5a5a5a);
  font-weight: 500;
}

.ws-filter-bar select,
.ws-filter-bar input[type="text"],
.ws-filter-bar input[type="search"] {
  padding: 8px 10px;
  border: 1px solid var(--ws-border, #e5e5e5);
  border-radius: var(--radius-md, 8px);
  font-size: 0.92em;
  background: #fff;
  width: 100%;
}

.ws-filter-bar__toggle {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.88em;
  white-space: nowrap;
  padding-bottom: 8px;
}

/* Mobile: ws-table diventa lista di card stacked */
@media (max-width: 720px) {
  .ws-filter-bar {
    grid-template-columns: 1fr 1fr;
  }

  .ws-filter-bar__toggle {
    grid-column: 1 / -1;
  }

  .ws-table thead {
    display: none;
  }

  .ws-table,
  .ws-table tbody,
  .ws-table tr,
  .ws-table td {
    display: block;
    width: 100%;
  }

  .ws-table tbody tr {
    padding: var(--space-3);
    border-bottom: 1px solid #f0f0f0;
  }

  .ws-table tbody td {
    padding: 4px 0;
    border: none;
  }

  .ws-table tbody td::before {
    content: attr(data-label) ": ";
    font-weight: 600;
    color: var(--ws-text-muted, #5a5a5a);
    font-size: 0.82em;
    margin-right: 6px;
  }

  .ws-table__actions {
    text-align: left;
    padding-top: var(--space-2) !important;
  }
}