/* Pagine gestionali: ticket e amministrazione. */

/* ── Ticket ────────────────────────────────────────── */
.tickets__toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
}
.tickets__filters { display: flex; gap: var(--space-2); flex: 1; justify-content: flex-end; min-width: 260px; }
.tickets__filters .select { width: auto; }
.tickets__filters .input { max-width: 280px; }
.segmented .count { font-size: var(--text-xs); }

.tickets__layout {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
  gap: var(--space-4);
  align-items: start;
}
.ticket-list { display: grid; gap: var(--space-2); margin: 0; padding: 0; list-style: none; }
.ticket-list .skeleton-card { min-height: 92px; }
.ticket-item {
  display: grid;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--surface);
  cursor: pointer;
  transition: border-color var(--duration-fast), box-shadow var(--duration), transform var(--duration) var(--ease-out);
}
.ticket-item:hover { border-color: var(--border-strong); box-shadow: var(--shadow-sm); }
.ticket-item[aria-current="true"] { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
.ticket-item__head { display: flex; align-items: baseline; gap: var(--space-2); }
.ticket-item__id { color: var(--text-subtle); font-family: var(--font-mono); font-size: var(--text-xs); }
.ticket-item__title { flex: 1; min-width: 0; color: var(--text); font-weight: 600; overflow-wrap: anywhere; }
.ticket-item__title:hover { text-decoration: none; }
.ticket-item__meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-1) var(--space-2); color: var(--text-subtle); font-size: var(--text-xs); }

.ticket-detail { position: sticky; top: calc(var(--topbar-height) + var(--space-4)); min-height: 320px; }
.ticket-detail__back { display: none; margin-bottom: var(--space-3); }
.ticket-detail__head { display: grid; gap: var(--space-2); padding-bottom: var(--space-4); border-bottom: 1px solid var(--border); }
.ticket-detail__title { font-family: var(--font-sans); font-size: var(--text-xl); overflow-wrap: anywhere; }
.ticket-detail__desc { padding: var(--space-4) 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.ticket-detail__controls { display: flex; flex-wrap: wrap; gap: var(--space-4); padding: var(--space-3) 0; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.ticket-detail__controls .field { gap: var(--space-2); }
.comments { display: grid; gap: var(--space-3); margin: var(--space-4) 0; padding: 0; list-style: none; }
.comment { display: grid; grid-template-columns: 32px minmax(0, 1fr); gap: var(--space-3); }
.comment__body { padding: var(--space-3) var(--space-4); border-radius: 4px var(--radius-lg) var(--radius-lg) var(--radius-lg); background: var(--surface-2); }
.comment__meta { margin-bottom: var(--space-1); color: var(--text-subtle); font-size: var(--text-xs); }
.comment__meta strong { color: var(--text); font-weight: 600; }
.comment__text { white-space: pre-wrap; overflow-wrap: anywhere; font-size: var(--text-sm); }
.reply { display: grid; gap: var(--space-2); }
.reply .form__actions { align-items: center; justify-content: space-between; }

.badge--status-aperto { background: var(--info-soft); color: var(--info); }
.badge--status-in_lavorazione { background: var(--warning-soft); color: var(--warning); }
.badge--status-chiuso { background: var(--success-soft); color: var(--success); }
.badge--prio-alta { background: var(--danger-soft); color: var(--danger); }

@media (max-width: 900px) {
  .tickets__layout { grid-template-columns: 1fr; }
  .tickets__layout[data-view="list"] .ticket-detail { display: none; }
  .tickets__layout[data-view="detail"] .ticket-list { display: none; }
  .ticket-detail { position: static; }
  .ticket-detail__back { display: inline-flex; }
  .tickets__filters { justify-content: stretch; min-width: 0; width: 100%; }
  .tickets__filters .input { max-width: none; }
  .tickets__toolbar .segmented { width: 100%; overflow-x: auto; flex-wrap: nowrap; }
}

/* ── Guida all'uso (docs/guida/guida-utente.html dentro l'app) ── */
.guide { font-size: calc(var(--text-md) * var(--reader-scale, 1)); line-height: 1.7; }
.guide .g-toc-wrap { display: none; }               /* l'indice è quello laterale del lettore */
.guide .kicker { color: var(--text-subtle); font-size: var(--text-xs); font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; }
.guide h1 { margin: var(--space-1) 0 var(--space-2); font-size: clamp(1.8rem, 3vw, 2.5rem); }
.guide .updated { margin-bottom: var(--space-4); color: var(--text-muted); font-size: var(--text-sm); font-weight: 600; }
.guide h2 {
  margin: var(--space-12) 0 var(--space-3); padding-top: var(--space-6); border-top: 1px solid var(--border);
  font-family: var(--font-sans); font-size: calc(var(--text-xl) * var(--reader-scale, 1));
  scroll-margin-top: calc(var(--topbar-height) + var(--reader-bar, 52px) + var(--space-4));
}
.guide h3 { margin: var(--space-6) 0 var(--space-2); font-family: var(--font-sans); font-size: var(--text-lg); }
.guide p, .guide li { margin-bottom: var(--space-2); }
.guide ol, .guide ul { padding-left: 1.4em; }
.guide figure { margin: var(--space-5) 0 var(--space-4); }
.guide figure img {
  display: block; width: 100%; max-width: 980px; margin: 0 auto; border: 1px solid var(--border);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); cursor: zoom-in;
}
.guide figure.narrow img { max-width: 640px; }
.guide figure.small img { max-width: 380px; }
.guide figcaption { margin-top: var(--space-2); color: var(--text-muted); font-size: var(--text-sm); text-align: center; }
.guide .phones { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-4); margin-top: var(--space-4); }
.guide .phones img { width: min(240px, 30%); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); }
.guide .legend { margin: 0 0 var(--space-5); padding: 0; list-style: none; }
.guide .legend li { position: relative; padding-left: 34px; }
.guide .legend li::before {
  content: attr(data-n); position: absolute; left: 0; top: 2px; width: 22px; height: 22px; border-radius: 50%;
  background: #c62a2f; color: #fff; font-size: 12px; font-weight: 700; line-height: 22px; text-align: center;
}
.guide .box { margin: var(--space-4) 0 var(--space-5); padding: var(--space-3) var(--space-4); border-left: 4px solid; border-radius: var(--radius); }
.guide .box p:last-child { margin-bottom: 0; }
.guide .tip { border-color: var(--info); background: var(--info-soft); }
.guide .warn { border-color: var(--warning); background: var(--warning-soft); }
.guide .box-title { display: block; margin-bottom: var(--space-1); font-size: var(--text-xs); font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; }
.guide table { width: 100%; margin: var(--space-3) 0 var(--space-5); border-collapse: collapse; font-size: var(--text-sm); }
.guide th { padding: var(--space-2) var(--space-3); background: var(--surface-2); text-align: left; }
.guide td { padding: var(--space-2) var(--space-3); border-bottom: 1px solid var(--border); vertical-align: top; }
.guide .g-badge { display: inline-block; padding: 1px 8px; border-radius: var(--radius-full); font-size: var(--text-xs); font-weight: 600; white-space: nowrap; }
.guide .b-ok { background: var(--success-soft); color: var(--success); }
.guide .b-warn { background: var(--warning-soft); color: var(--warning); }
.guide .b-no { background: var(--danger-soft); color: var(--danger); }
.guide .b-acc { background: var(--accent-soft); color: var(--accent); }
.guide .b-off { background: var(--surface-3); color: var(--text-muted); }
.guide kbd { padding: 0 6px; border: 1px solid var(--border-strong); border-radius: 4px; background: var(--surface-2); font-family: var(--font-sans); font-size: 0.85em; }
@media (max-width: 760px) {
  .guide table { display: block; overflow-x: auto; }
  .guide .phones img { width: 46%; }
}