/* ==========================================================================
   TEXORY ZAZUNA · Design system condiviso (v2)
   Usato da sito pubblico, area riservata e pannello amministratore.
   Palette: verde bosco (primario), arancione (azioni importanti),
   verde acceso (solo micro-indicatori), grafite chiara, nero, bianco.
   ========================================================================== */

/* ---------- Font locale ---------- */
@font-face { font-family: "Inter"; src: url("../fonts/inter-regular.woff") format("woff"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Inter"; src: url("../fonts/inter-medium.woff") format("woff"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "Inter"; src: url("../fonts/inter-semibold.woff") format("woff"); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: "Inter"; src: url("../fonts/inter-bold.woff") format("woff"); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Space Grotesk"; src: url("../fonts/space-grotesk.woff") format("woff"); font-weight: 300 700; font-style: normal; font-display: swap; }
@font-face { font-family: "JetBrains Mono"; src: url("../fonts/jetbrains-mono-regular.woff") format("woff"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "JetBrains Mono"; src: url("../fonts/jetbrains-mono-medium.woff") format("woff"); font-weight: 500 700; font-style: normal; font-display: swap; }

/* ---------- Token ---------- */
:root {
  /* Palette ufficiale */
  --zz-green: #166534;        /* verde bosco: identità, navigazione, struttura */
  --zz-green-700: #14532D;
  --zz-green-800: #0F3D22;
  --zz-green-100: #D3EBDC;
  --zz-green-50: #EEF7F1;
  --zz-lime: #22C55E;         /* verde acceso: SOLO micro-indicatori positivi e stati attivi */
  --zz-orange: #F97316;       /* arancione: CTA e azioni importanti (testo nero sopra) */
  --zz-orange-600: #EA6A0C;
  --zz-orange-50: #FFF4EC;
  --zz-orange-text: #9A3412;  /* arancione leggibile come testo su bianco */
  --zz-line: #D5D9D6;         /* grafite chiara */
  --zz-line-soft: #E7EAE8;
  --zz-surface: #F6F7F6;
  --zz-ink: #111111;          /* nero */
  --zz-ink-2: #3B433F;
  --zz-ink-3: #5A635E;
  --zz-white: #FFFFFF;

  /* Stati funzionali: sempre con etichetta e forma del segno, mai solo colore */
  --zz-ok-text: #1B6631;     --zz-ok-bg: #E9F6EC;     --zz-ok-dot: #22C55E;
  --zz-warn-text: #8A4700;   --zz-warn-bg: #FFF1DC;   --zz-warn-dot: #E48A0E;
  --zz-danger-text: #B42318; --zz-danger-bg: #FDECEA; --zz-danger-dot: #D92D20;
  --zz-info-text: #14532D;   --zz-info-bg: #E3F1E8;   --zz-info-dot: #166534;
  --zz-neutral-text: #4A524D; --zz-neutral-bg: #EFF1F0; --zz-neutral-dot: #8A938E;

  /* Tipografia */
  --zz-font: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --zz-display: "Space Grotesk", "Inter", system-ui, sans-serif;
  --zz-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --zz-text-xs: 0.8125rem;
  --zz-text-sm: 0.9375rem;
  --zz-text-md: 1rem;
  --zz-text-lg: 1.125rem;

  /* Spaziature */
  --zz-s1: 4px; --zz-s2: 8px; --zz-s3: 12px; --zz-s4: 16px; --zz-s5: 20px;
  --zz-s6: 24px; --zz-s8: 32px; --zz-s10: 40px; --zz-s12: 48px;

  /* Forme */
  --zz-r-sm: 8px; --zz-r-md: 10px; --zz-r-lg: 14px; --zz-r-xl: 18px; --zz-r-full: 999px;
  --zz-shadow-sm: 0 1px 2px rgba(17, 17, 17, .05);
  --zz-shadow-md: 0 4px 14px -6px rgba(17, 17, 17, .12), 0 1px 3px rgba(17, 17, 17, .05);
  --zz-shadow-lg: 0 16px 36px -18px rgba(17, 17, 17, .22), 0 2px 6px rgba(17, 17, 17, .05);
  --zz-ring: 0 0 0 3px rgba(22, 101, 52, .32);

  --zz-ease: cubic-bezier(.2, .7, .2, 1);
  --zz-fast: 150ms;
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--zz-font);
  font-size: var(--zz-text-md);
  line-height: 1.55;
  color: var(--zz-ink);
  background: var(--zz-white);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: "cv11" 1;
}
img, svg { display: block; max-width: 100%; }
button, input, select, textarea { font: inherit; color: inherit; }
a { color: var(--zz-green); text-underline-offset: 2px; }
a:hover { color: var(--zz-green-700); }
:focus-visible { outline: none; box-shadow: var(--zz-ring); border-radius: 6px; }
.zz-num { font-variant-numeric: tabular-nums; }
.zz-sr { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* ---------- Composizione testuale provvisoria del marchio ----------
   Da sostituire con il logo ufficiale (punti con data-asset="logo-zazuna"). */
.zz-wordmark { display: inline-flex; align-items: baseline; gap: .38em; text-decoration: none; color: var(--zz-ink); white-space: nowrap; line-height: 1; }
.zz-wordmark:hover { color: inherit; }
.zz-wordmark__texory { font-weight: 600; font-size: .62em; letter-spacing: .18em; color: currentColor; opacity: .62; }
.zz-wordmark__name { font-weight: 700; letter-spacing: .06em; }
.zz-wordmark__name::after { content: ""; display: inline-block; width: .26em; height: .26em; margin-left: .12em; border-radius: 2px; background: var(--zz-orange); }

/* ---------- Pulsanti ---------- */
.zz-btn {
  --_bg: var(--zz-green); --_fg: #fff; --_bd: transparent; --_hover: var(--zz-green-700);
  display: inline-flex; align-items: center; justify-content: center; gap: var(--zz-s2);
  min-height: 44px; padding: 0 var(--zz-s5);
  border-radius: var(--zz-r-md); border: 1px solid var(--_bd);
  background: var(--_bg); color: var(--_fg);
  font-weight: 600; font-size: var(--zz-text-sm); line-height: 1.2;
  text-decoration: none; cursor: pointer; white-space: nowrap;
  transition: background-color var(--zz-fast) var(--zz-ease), border-color var(--zz-fast), transform var(--zz-fast);
}
.zz-btn:hover { background: var(--_hover); color: var(--_fg); }
.zz-btn:active { transform: translateY(1px); }
.zz-btn[disabled], .zz-btn[aria-disabled="true"] { opacity: .45; pointer-events: none; }
.zz-btn--lg { min-height: 52px; padding: 0 var(--zz-s6); font-size: var(--zz-text-md); }
.zz-btn--sm { min-height: 36px; padding: 0 var(--zz-s3); font-size: var(--zz-text-xs); border-radius: var(--zz-r-sm); }
.zz-btn--block { width: 100%; }
.zz-btn--cta { --_bg: var(--zz-orange); --_fg: var(--zz-ink); --_hover: var(--zz-orange-600); }
.zz-btn--secondary { --_bg: var(--zz-white); --_fg: var(--zz-ink); --_bd: var(--zz-line); --_hover: var(--zz-surface); }
.zz-btn--secondary:hover { border-color: #B9BFBB; }
.zz-btn--ghost { --_bg: transparent; --_fg: var(--zz-green); --_hover: var(--zz-green-50); }
.zz-btn--danger { --_bg: #C4321F; --_fg: #fff; --_hover: #A82818; }
.zz-btn--danger-outline { --_bg: var(--zz-white); --_fg: var(--zz-danger-text); --_bd: #F1B8B1; --_hover: var(--zz-danger-bg); }
.zz-btn--on-dark { --_bg: transparent; --_fg: #fff; --_bd: rgba(255,255,255,.4); --_hover: rgba(255,255,255,.1); }
.zz-btn svg { width: 18px; height: 18px; flex: none; }

/* ---------- Badge di stato ---------- */
.zz-status {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 3px 10px 3px 8px; border-radius: var(--zz-r-full);
  font-size: var(--zz-text-xs); font-weight: 600; line-height: 1.4; white-space: nowrap;
  background: var(--zz-neutral-bg); color: var(--zz-neutral-text);
}
.zz-status::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--zz-neutral-dot); flex: none; }
.zz-status--ok { background: var(--zz-ok-bg); color: var(--zz-ok-text); }
.zz-status--ok::before { background: var(--zz-ok-dot); }
.zz-status--warn { background: var(--zz-warn-bg); color: var(--zz-warn-text); }
.zz-status--warn::before { background: var(--zz-warn-dot); border-radius: 1px; transform: rotate(45deg) scale(.86); }
.zz-status--danger { background: var(--zz-danger-bg); color: var(--zz-danger-text); }
.zz-status--danger::before { background: var(--zz-danger-dot); border-radius: 1px; }
.zz-status--info { background: var(--zz-info-bg); color: var(--zz-info-text); }
.zz-status--info::before { background: var(--zz-info-dot); border-radius: 50%; box-shadow: 0 0 0 2px var(--zz-info-bg), 0 0 0 3px var(--zz-info-dot); width: 5px; height: 5px; }
.zz-status--neutral { background: var(--zz-neutral-bg); color: var(--zz-neutral-text); }

.zz-tag { display: inline-flex; align-items: center; gap: 6px; padding: 2px 9px; border-radius: var(--zz-r-full); font-size: 12px; font-weight: 600; background: var(--zz-green-50); color: var(--zz-green-700); white-space: nowrap; border: 1px solid var(--zz-green-100); }
.zz-tag--orange { background: var(--zz-orange-50); color: var(--zz-orange-text); border-color: #FBD3B5; }
.zz-tag--neutral { background: var(--zz-surface); color: var(--zz-ink-3); border-color: var(--zz-line-soft); }

/* ---------- Superfici ---------- */
.zz-card { background: var(--zz-white); border: 1px solid var(--zz-line); border-radius: var(--zz-r-lg); box-shadow: var(--zz-shadow-sm); }
.zz-card--pad { padding: var(--zz-s5); }
.zz-card__title { margin: 0; font-size: var(--zz-text-md); font-weight: 600; color: var(--zz-ink); }
.zz-card__meta { font-size: var(--zz-text-xs); color: var(--zz-ink-3); }

/* ---------- Indicatori ---------- */
.zz-kpi { display: flex; flex-direction: column; gap: 2px; }
.zz-kpi__value { font-size: 1.75rem; font-weight: 700; letter-spacing: -.02em; line-height: 1.1; font-variant-numeric: tabular-nums; color: var(--zz-ink); }
.zz-kpi__label { font-size: var(--zz-text-xs); color: var(--zz-ink-3); font-weight: 500; }

.zz-meter { display: grid; gap: 6px; }
.zz-meter__head { display: flex; justify-content: space-between; gap: 8px; font-size: var(--zz-text-xs); color: var(--zz-ink-2); font-weight: 500; }
.zz-meter__head b { color: var(--zz-ink); font-variant-numeric: tabular-nums; }
.zz-meter__bar { height: 8px; border-radius: var(--zz-r-full); background: var(--zz-surface); border: 1px solid var(--zz-line-soft); overflow: hidden; }
.zz-meter__bar > span { display: block; height: 100%; border-radius: inherit; background: var(--zz-green); }
.zz-meter--warn .zz-meter__bar > span { background: var(--zz-warn-dot); }
.zz-meter--over .zz-meter__bar > span { background: var(--zz-danger-dot); }

.zz-avatar { width: 30px; height: 30px; border-radius: 50%; display: inline-grid; place-items: center; font-size: 11px; font-weight: 700; color: #fff; background: var(--zz-green); flex: none; }
.zz-avatar--light { background: var(--zz-green-50); color: var(--zz-green-700); border: 1px solid var(--zz-green-100); }

/* ---------- Elenchi ---------- */
.zz-list { list-style: none; margin: 0; padding: 0; }
.zz-row { display: flex; align-items: center; gap: var(--zz-s3); padding: 10px 0; border-top: 1px solid var(--zz-line-soft); min-width: 0; }
.zz-row:first-child { border-top: 0; }
.zz-row__main { flex: 1; min-width: 0; }
.zz-row__title { display: block; font-size: var(--zz-text-sm); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.zz-row__sub { display: block; font-size: var(--zz-text-xs); color: var(--zz-ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ---------- Campi ---------- */
.zz-field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.zz-label { font-size: var(--zz-text-sm); font-weight: 600; color: var(--zz-ink); display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.zz-label small { font-weight: 500; color: var(--zz-ink-3); }
.zz-input, .zz-select, .zz-textarea {
  width: 100%; min-height: 46px; padding: 10px 14px;
  border: 1px solid var(--zz-line); border-radius: var(--zz-r-md);
  background: var(--zz-white); color: var(--zz-ink); font-size: 16px;
  transition: border-color var(--zz-fast), box-shadow var(--zz-fast);
}
.zz-select { appearance: none; -webkit-appearance: none; padding-right: 40px; background: var(--zz-white) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%233B433F' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") right 12px center / 18px no-repeat; }
.zz-textarea { min-height: 110px; resize: vertical; line-height: 1.5; }
.zz-input::placeholder, .zz-textarea::placeholder { color: #8A928D; }
.zz-input:hover, .zz-select:hover, .zz-textarea:hover { border-color: #AEB5B1; }
.zz-input:focus, .zz-select:focus, .zz-textarea:focus { outline: none; border-color: var(--zz-green); box-shadow: var(--zz-ring); }
.zz-input[readonly] { background: var(--zz-surface); }
.zz-field--error .zz-input, .zz-field--error .zz-textarea, .zz-field--error .zz-select { border-color: var(--zz-danger-dot); }
.zz-hint { font-size: var(--zz-text-xs); color: var(--zz-ink-3); }
.zz-error { font-size: var(--zz-text-xs); color: var(--zz-danger-text); font-weight: 600; }
.zz-check { display: flex; gap: 10px; align-items: flex-start; font-size: var(--zz-text-sm); color: var(--zz-ink-2); cursor: pointer; line-height: 1.4; }
.zz-check input { width: 20px; height: 20px; margin: 0; accent-color: var(--zz-green); flex: none; }

.zz-alert { display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; border-radius: var(--zz-r-md); font-size: var(--zz-text-sm); line-height: 1.45; border: 1px solid transparent; }
.zz-alert--ok { background: var(--zz-ok-bg); color: var(--zz-ok-text); border-color: #C6E7CF; }
.zz-alert--warn { background: var(--zz-warn-bg); color: var(--zz-warn-text); border-color: #F6D9AC; }
.zz-alert--danger { background: var(--zz-danger-bg); color: var(--zz-danger-text); border-color: #F5C2BC; }
.zz-alert--info { background: var(--zz-green-50); color: var(--zz-green-700); border-color: var(--zz-green-100); }
.zz-alert > div > :first-child { margin-top: 0; }
.zz-alert > div > :last-child { margin-bottom: 0; }

/* ---------- Selettore a segmenti ---------- */
.zz-segment { display: inline-flex; padding: 3px; gap: 2px; border-radius: var(--zz-r-md); background: var(--zz-surface); border: 1px solid var(--zz-line); }
.zz-segment button, .zz-segment a { border: 0; background: transparent; min-height: 38px; padding: 0 14px; border-radius: 8px; font-size: var(--zz-text-sm); font-weight: 600; color: var(--zz-ink-2); cursor: pointer; display: inline-flex; align-items: center; gap: 6px; text-decoration: none; white-space: nowrap; }
.zz-segment [aria-pressed="true"], .zz-segment [aria-current="true"] { background: var(--zz-white); color: var(--zz-green-700); box-shadow: var(--zz-shadow-sm), inset 0 0 0 1px var(--zz-line); }

/* ---------- Calendario compatto ---------- */
.zz-cal { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; font-size: 11px; text-align: center; font-variant-numeric: tabular-nums; }
.zz-cal__dow { font-weight: 600; color: var(--zz-ink-3); padding: 4px 0; font-size: 10px; letter-spacing: .04em; }
.zz-cal__day { position: relative; padding: 6px 0 10px; border-radius: 6px; color: var(--zz-ink-2); font-weight: 500; }
.zz-cal__day--muted { color: #B3BAB6; }
.zz-cal__day--today { background: var(--zz-green); color: #fff; font-weight: 700; }
.zz-cal__day i { position: absolute; left: 50%; bottom: 3px; width: 5px; height: 5px; border-radius: 50%; transform: translateX(-50%); }
.zz-cal__day i.is-orange { background: var(--zz-orange); }
.zz-cal__day i.is-green { background: var(--zz-green); }
.zz-cal__day i.is-ink { background: var(--zz-ink-3); }
.zz-cal__day i.is-danger { background: var(--zz-danger-dot); border-radius: 1px; }
.zz-cal__day--today i { background: #fff !important; }

.zz-bars { display: flex; align-items: flex-end; gap: 6px; height: 64px; }
.zz-bars > span { flex: 1; border-radius: 3px 3px 1px 1px; background: var(--zz-green-100); }
.zz-bars > span.is-green { background: var(--zz-green); }
.zz-bars > span.is-orange { background: var(--zz-orange); }

.zz-icon { width: 20px; height: 20px; stroke: currentColor; fill: none; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; flex: none; }

/* ---------- Aiuto contestuale ---------- */
.zz-help { position: relative; display: inline-flex; }
.zz-help__btn { width: 20px; height: 20px; border-radius: 50%; border: 1px solid var(--zz-line); display: inline-grid; place-items: center; font-size: 11px; font-weight: 700; background: var(--zz-white); color: var(--zz-green-700); cursor: help; padding: 0; }
.zz-help__tip {
  position: absolute; left: 50%; bottom: calc(100% + 8px); transform: translateX(-50%);
  width: max-content; max-width: 240px; padding: 10px 12px; border-radius: var(--zz-r-md);
  background: var(--zz-ink); color: #fff; font-size: var(--zz-text-xs); font-weight: 500; line-height: 1.45;
  opacity: 0; pointer-events: none; transition: opacity var(--zz-fast); z-index: 5;
}
.zz-help:hover .zz-help__tip, .zz-help:focus-within .zz-help__tip, .zz-help.is-open .zz-help__tip { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}

/* ---------- Logo ufficiale (SVG fornito da TEXORY, non modificato) ---------- */
.logo { display: inline-flex; align-items: center; line-height: 0; text-decoration: none; flex: none; }
.logo img { display: block; width: auto; height: 22px; }


/* ==========================================================================
   ZAZY · personaggio ufficiale (immagini fornite da TEXORY, una per stato)
   Verde con il pollice in su, arancione e rosso con il triangolo di pericolo,
   viola durante un'elaborazione. ZAZY resta fermo: solo la pedana luminosa
   sotto le ruote respira nel colore dello stato.
   Immagini con fondo trasparente: ZAZY si appoggia su qualsiasi superficie.
   ========================================================================== */
.zazy-bot { position: relative; display: block; width: 100%; line-height: 0; isolation: isolate; transition: color .5s ease; user-select: none; }
.zazy-bot__fig { position: relative; display: block; width: 100%; aspect-ratio: 2 / 3; }
.zazy-bot--testa .zazy-bot__fig { aspect-ratio: 7 / 5; }
.zazy-bot__img { position: absolute; inset: 0; background: url("../img/zazy/zazy-ok.webp") center / 100% 100% no-repeat; filter: drop-shadow(0 6px 10px rgba(16, 40, 28, .16)); }
.zazy-bot--testa .zazy-bot__img { filter: none; }
.zazy-bot[data-umore="neutro"] .zazy-bot__img { background-image: url("../img/zazy/zazy-neutro.webp"); }
.zazy-bot[data-umore="warn"] .zazy-bot__img { background-image: url("../img/zazy/zazy-warn.webp"); }
.zazy-bot[data-umore="alert"] .zazy-bot__img { background-image: url("../img/zazy/zazy-alert.webp"); }
.zazy-bot[data-umore="viola"] .zazy-bot__img { background-image: url("../img/zazy/zazy-viola.webp"); }
.zazy-bot--testa .zazy-bot__img { background-image: url("../img/zazy/zazy-testa-ok.webp"); }
.zazy-bot--testa[data-umore="neutro"] .zazy-bot__img { background-image: url("../img/zazy/zazy-testa-neutro.webp"); }
.zazy-bot--testa[data-umore="warn"] .zazy-bot__img { background-image: url("../img/zazy/zazy-testa-warn.webp"); }
.zazy-bot--testa[data-umore="alert"] .zazy-bot__img { background-image: url("../img/zazy/zazy-testa-alert.webp"); }
.zazy-bot--testa[data-umore="viola"] .zazy-bot__img { background-image: url("../img/zazy/zazy-testa-viola.webp"); }

/* Pedana luminosa sotto le ruote */
.zazy-bot__pad { position: absolute; left: 12%; right: 12%; bottom: 0; height: 9%; border-radius: 50%;
  background: radial-gradient(closest-side, color-mix(in srgb, currentColor 55%, transparent), color-mix(in srgb, currentColor 18%, transparent) 60%, transparent);
  animation: zzPedana 3.2s ease-in-out infinite; }
.zazy-bot__pad::after { content: ""; position: absolute; inset: 18% 10%; border-radius: 50%; border: 1.5px solid color-mix(in srgb, currentColor 70%, transparent); animation: zzOnda 3.2s ease-out infinite; }
.zazy-bot[data-umore="alert"] .zazy-bot__pad, .zazy-bot[data-umore="viola"] .zazy-bot__pad, .zazy-bot[data-umore="alert"] .zazy-bot__pad::after, .zazy-bot[data-umore="viola"] .zazy-bot__pad::after { animation-duration: 1.4s; }

@keyframes zzPedana { 0%, 100% { opacity: .75; transform: scaleX(1); } 50% { opacity: 1; transform: scaleX(1.06); } }
@keyframes zzOnda { 0% { transform: scale(.6); opacity: .9; } 100% { transform: scale(1.35); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .zazy-bot__pad, .zazy-bot__pad::after { animation: none !important; } }