/* ============================================================
   Variabili CSS — Design tokens da CLAUDE.md
   ============================================================ */
:root {
  --accent:      #138a92;
  --accent-dark: #0f6f76;
  --ink:         #1f2a2e;
  --ink-soft:    #5a676b;
  --line:        #d8dee0;
  --line-soft:   #e4e9ea;
  --panel:       #ffffff;
  --bg:          #eef1f2;
  --warn:        #d9831f;
  --warn-bg:     #fdf0e0;
  --bad:         #c43b3b;
  --bad-bg:      #fbe7e7;
}

/* ============================================================
   Base
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; }

body {
  font-family: -apple-system, "Segoe UI", system-ui, Roboto, sans-serif;
  font-size: 0.95rem;
  color: var(--ink);
  background-color: var(--bg);
  margin: 0;
}

a { color: var(--accent); text-decoration: none; }
a:hover { color: var(--accent-dark); text-decoration: underline; }

.mono {
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-variant-numeric: tabular-nums;
}

.hidden { display: none !important; }

/* ============================================================
   Navbar
   ============================================================ */
.pf-navbar {
  background: linear-gradient(180deg, var(--accent), var(--accent-dark));
  box-shadow: 0 2px 10px rgba(15, 111, 118, .25);
  padding-top: 0;
  padding-bottom: 0;
}

.pf-navbar .navbar-brand {
  color: #fff !important;
  font-size: 1.12rem;
  font-weight: 700;
  letter-spacing: -.01em;
}

.pf-navbar .nav-link {
  color: rgba(255, 255, 255, .85) !important;
  padding: .55rem .9rem;
  border-radius: 7px;
  font-size: .9rem;
  transition: background .15s;
}

.pf-navbar .nav-link:hover,
.pf-navbar .nav-link.active {
  color: #fff !important;
  background: rgba(255, 255, 255, .16);
}

.pf-navbar .dropdown-menu {
  border: 1px solid var(--line-soft);
  border-radius: 9px;
  box-shadow: 0 8px 28px rgba(15, 42, 46, .2);
  padding: 4px;
  min-width: 180px;
}

.pf-navbar .dropdown-item {
  border-radius: 6px;
  font-size: .9rem;
  padding: .45rem .85rem;
  color: var(--ink);
}

.pf-navbar .dropdown-item:hover,
.pf-navbar .dropdown-item.active {
  background: var(--bg);
  color: var(--accent);
}

.pf-navbar .navbar-toggler {
  border-color: rgba(255,255,255,.4);
}

.pf-navbar .navbar-toggler-icon {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255,255,255,.85%29' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

/* Submenu annidato (flyout a destra) */
.pf-submenu { position: relative; }

.pf-submenu-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.pf-submenu-arrow {
  font-size: .7rem;
  opacity: .6;
  margin-left: auto;
  padding-left: .5rem;
  flex-shrink: 0;
}

.pf-submenu-menu {
  display: none;
  position: absolute;
  top: 0;
  left: 100%;
  margin-left: 4px;
  min-width: 180px;
}

/* Ponte trasparente che copre il gap tra toggle e submenu,
   impedisce la chiusura accidentale durante lo spostamento diagonale */
.pf-submenu-menu::before {
  content: '';
  position: absolute;
  right: 100%;
  top: 0;
  width: 8px;
  height: 100%;
}

.pf-submenu.open > .pf-submenu-menu {
  display: block;
}

/* Mobile: submenu in colonna singola */
@media (max-width: 991px) {
  .pf-submenu-menu {
    position: static;
    margin-left: 1rem;
    box-shadow: none;
    border: none;
    padding: 0;
  }
  .pf-submenu-arrow { display: none; }
}

/* ============================================================
   Striscia indicazioni di distribuzione
   Full-bleed come navbar/page-bar, alta quanto la navbar: non è una
   card nel contenuto, non deve sottrarre spazio verticale alla pagina.
   ============================================================ */
.pf-notice-banner {
  background: var(--warn-bg);
  border-bottom: 1px solid #f0d4ab;
}

.pf-notice-banner .pf-container {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-top: 10px;
  padding-bottom: 10px;
  color: #8a5a12;
  font-size: .86rem;
  line-height: 1.3;
}

.pf-notice-banner .pf-notice-icon {
  flex-shrink: 0;
  font-size: 1.05rem;
  color: var(--warn);
}

.pf-notice-banner .pf-notice-text {
  flex: 1;
  min-width: 0;
}

.pf-notice-banner .pf-notice-text strong { font-weight: 700; }

.pf-notice-banner .btn-notice {
  flex-shrink: 0;
  border: 1px solid var(--warn);
  background: #fff;
  color: #b3660f;
  font-size: .78rem;
  font-weight: 700;
  padding: 6px 14px;
  border-radius: 7px;
  white-space: nowrap;
}

.pf-notice-banner .btn-notice:hover { background: #fff8ef; }

.pf-notice-item + .pf-notice-item {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--line-soft);
}

.pf-notice-chips {
  display: flex;
  gap: 6px;
  margin-bottom: 7px;
}

.pf-chip {
  font-size: .66rem;
  font-weight: 700;
  letter-spacing: .02em;
  padding: 3px 9px;
  border-radius: 999px;
}

.pf-chip-neutral {
  background: var(--bg);
  color: var(--ink-soft);
}

.pf-notice-item-title {
  font-weight: 700;
  font-size: .92rem;
  color: var(--ink);
  margin-bottom: 4px;
}

.pf-notice-item-body {
  font-size: .86rem;
  color: var(--ink);
  line-height: 1.5;
  white-space: pre-line;
}

/* ============================================================
   Page bar (breadcrumb + titolo pagina)
   ============================================================ */
.pf-page-bar {
  background: var(--panel);
  border-bottom: 1px solid var(--line-soft);
  padding: 10px 0 13px;
}

.pf-page-title {
  font-size: 1.45rem;
  font-weight: 700;
  color: var(--ink);
  margin: 3px 0 0;
  line-height: 1.2;
}

.breadcrumb {
  margin-bottom: 2px;
  font-size: .82rem;
}

.breadcrumb-item + .breadcrumb-item::before { color: var(--ink-soft); }
.breadcrumb-item a { color: var(--accent); }
.breadcrumb-item.active { color: var(--ink-soft); }

/* ============================================================
   Layout principale
   ============================================================ */
.pf-container {
  max-width: 1320px;
  margin: 0 auto;
  padding: 0 24px;
}

.pf-main {
  padding: 20px 0 90px;
}

/* ============================================================
   Card
   ============================================================ */
.pf-card {
  background: var(--panel);
  border: 1px solid var(--line-soft);
  border-radius: 12px;
  overflow: hidden;
}

.pf-card + .pf-card { margin-top: 18px; }

.pf-card-header {
  padding: 16px 22px;
  border-bottom: 1px solid var(--line-soft);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

.pf-card-title {
  font-size: 1.08rem;
  font-weight: 700;
  color: var(--ink);
  margin: 0;
}

.pf-card-body {
  padding: 24px 26px;
}

.pf-card-footer {
  padding: 18px 26px;
  background: #fafbfb;
  border-top: 1px solid var(--line-soft);
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
}

/* ============================================================
   Pulsanti
   ============================================================ */
.btn {
  font-size: .9rem;
  font-weight: 500;
  border-radius: 7px;
  transition: filter .15s, opacity .15s;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.btn:not(:disabled):hover { filter: brightness(1.07); }
.btn:disabled { opacity: .55; cursor: not-allowed; }

.btn-primary {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}

.btn-save {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
  padding: 13px 40px;
  font-size: .95rem;
  font-weight: 600;
  letter-spacing: .04em;
  box-shadow: 0 2px 8px rgba(19, 138, 146, .3);
  min-height: 44px;
  border-radius: 8px;
}

.btn-outline-accent {
  background: transparent;
  border: 1.5px solid var(--accent);
  color: var(--accent);
}

.btn-ghost {
  background: #fff;
  border: 1.5px solid var(--line);
  color: var(--ink);
}

.btn-ghost:hover { border-color: var(--ink-soft); }

.btn-danger {
  background: var(--bad);
  border-color: var(--bad);
  color: #fff;
}

.btn-row {
  background: #fff;
  border: 1px solid var(--line);
  color: var(--ink-soft);
  padding: 4px 9px;
  font-size: .82rem;
  border-radius: 6px;
  line-height: 1.4;
}

.btn-row:hover {
  border-color: var(--accent);
  color: var(--accent);
  background: #fff;
}

.btn-row.text-danger:hover {
  border-color: var(--bad);
  color: var(--bad) !important;
}

/* ── Menu riga "⋯" (azioni oltre le 1-2 icone visibili) ────── */
.pf-row-menu {
  border: 1px solid var(--line-soft);
  border-radius: 9px;
  box-shadow: 0 8px 28px rgba(15, 42, 46, .2);
  padding: 4px;
  min-width: 170px;
}

.pf-row-menu .dropdown-item {
  border-radius: 6px;
  font-size: .86rem;
  padding: .45rem .8rem;
  color: var(--ink);
  display: flex;
  align-items: center;
  gap: 8px;
}

.pf-row-menu .dropdown-item:hover {
  background: var(--bg);
  color: var(--accent);
}

.pf-row-menu .dropdown-item.text-danger:hover {
  background: var(--bad-bg);
  color: var(--bad) !important;
}

/* ============================================================
   Filtri
   ============================================================ */
.pf-filter-bar {
  padding: 14px 22px;
  border-bottom: 1px solid var(--line-soft);
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  background: #fafbfb;
}

.pf-filter-bar .form-control,
.pf-filter-bar .form-select {
  font-size: .88rem;
}

.pf-filter-bar .input-group-text {
  font-size: .88rem;
  color: var(--ink-soft);
  background: #fff;
  border-right: none;
}

.pf-filter-bar .form-control.search-input {
  border-left: none;
  padding-left: 0;
}

/* ============================================================
   Tabelle
   ============================================================ */
.pf-table-wrapper { overflow-x: auto; }

.pf-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  min-width: 560px;
}

.pf-table thead th {
  background: var(--panel);
  color: var(--ink-soft);
  font-size: .76rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .05em;
  padding: 10px 18px;
  border-bottom: 2px solid var(--line-soft);
  position: sticky;
  top: 0;
  white-space: nowrap;
  z-index: 1;
}

th.sortable {
  cursor: pointer;
  user-select: none;
}

th.sortable:hover { color: var(--accent); }
th.sort-asc,
th.sort-desc { color: var(--accent) !important; }

.sort-icon {
  margin-left: 4px;
  opacity: .35;
  font-size: .68rem;
  font-style: normal;
}

th.sort-asc .sort-icon,
th.sort-desc .sort-icon { opacity: 1; }

.pf-table tbody td {
  padding: 10px 18px;
  border-bottom: 1px solid var(--line-soft);
  color: var(--ink);
  font-size: .92rem;
  vertical-align: middle;
}

.pf-table tbody tr:last-child td { border-bottom: none; }
.pf-table tbody tr:hover { background: #f6fafa; }

/* Variante compatta: tabelle con molte colonne che devono restare visibili
   senza scroll orizzontale (es. tipi prodotto). */
.pf-table-compact thead th,
.pf-table-compact tbody td { padding: 8px 12px; }

.pf-table-empty td {
  text-align: center;
  color: var(--ink-soft);
  padding: 28px 18px;
  font-size: .9rem;
}

.pf-table-footer {
  padding: 10px 18px;
  border-top: 1px solid var(--line-soft);
  font-size: .82rem;
  color: var(--ink-soft);
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: #fafbfb;
}

/* ============================================================
   Form
   ============================================================ */
.form-label {
  font-size: .82rem;
  font-weight: 500;
  color: var(--ink);
  margin-bottom: 4px;
}

.required-star {
  color: var(--bad);
  margin-left: 2px;
}

.form-control,
.form-select {
  border: 1.5px solid var(--line);
  border-radius: 7px;
  font-size: .92rem;
  color: var(--ink);
  background: #fff;
  transition: border-color .15s, box-shadow .15s;
  padding: .45rem .75rem;
}

.form-control:focus,
.form-select:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 .2rem rgba(19, 138, 146, .2);
  outline: none;
}

.form-control:disabled,
.form-select:disabled {
  background: var(--bg);
  color: var(--ink-soft);
  border-color: var(--line-soft);
}

.form-control.is-invalid,
.form-select.is-invalid { border-color: var(--bad); }

.form-control.is-invalid:focus,
.form-select.is-invalid:focus {
  box-shadow: 0 0 0 .2rem rgba(196, 59, 59, .2);
}

.form-text {
  font-size: .78rem;
  color: var(--ink-soft);
  margin-top: 3px;
}

.invalid-feedback {
  font-size: .78rem;
  color: var(--bad);
  display: block;
  margin-top: 3px;
}

.form-check-input:checked {
  background-color: var(--accent);
  border-color: var(--accent);
}

.form-check-input:focus {
  box-shadow: 0 0 0 .2rem rgba(19, 138, 146, .2);
  border-color: var(--accent);
}

.form-section-title {
  font-size: 1rem;
  font-weight: 700;
  color: var(--ink);
  margin-bottom: 16px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--line-soft);
}

/* ============================================================
   Badge / Tag
   ============================================================ */
.badge-success {
  display: inline-block;
  background: #e7f5ee;
  color: #1f8a52;
  border: 1px solid #bfe4d1;
  font-size: .68rem;
  font-weight: 800;
  padding: 2px 9px;
  border-radius: 999px;
  letter-spacing: .02em;
}

.badge-info {
  display: inline-block;
  background: #e8eef8;
  color: #2a5fb0;
  border: 1px solid #c5d4ee;
  font-size: .68rem;
  font-weight: 800;
  padding: 2px 9px;
  border-radius: 999px;
  letter-spacing: .02em;
}

.badge-neutral {
  display: inline-block;
  background: var(--bg);
  color: #aab3b5;
  font-size: .68rem;
  font-weight: 800;
  padding: 2px 9px;
  border-radius: 999px;
  letter-spacing: .02em;
}

.group-color-dot {
  display: inline-block;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  border: 1px solid rgba(0,0,0,.15);
  vertical-align: middle;
  margin-right: 6px;
}

.badge-warn {
  display: inline-block;
  background: var(--warn-bg);
  color: var(--warn);
  border: 1px solid #f0cda0;
  font-size: .68rem;
  font-weight: 800;
  padding: 2px 9px;
  border-radius: 999px;
  letter-spacing: .02em;
}

.badge-admin {
  display: inline-block;
  background: #e8eef8;
  color: #2a5fb0;
  border: 1px solid #c5d4ee;
  font-size: .68rem;
  font-weight: 800;
  padding: 2px 9px;
  border-radius: 999px;
}

.badge-bad {
  display: inline-block;
  background: var(--bad-bg);
  color: var(--bad);
  border: 1px solid #e8b8b8;
  font-size: .68rem;
  font-weight: 800;
  padding: 2px 9px;
  border-radius: 999px;
  letter-spacing: .02em;
}

/* ── Detail labels (usati nelle schede dettaglio) ──────────── */
.pf-detail-label {
  font-size: .82rem;
  font-weight: 500;
  color: var(--ink-soft);
  text-transform: uppercase;
  letter-spacing: .04em;
  margin-bottom: 4px;
}

/* ============================================================
   KPI / Metriche
   ============================================================ */
.pf-kpi-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 14px;
}

.pf-kpi-tile {
  background: var(--bg);
  border-radius: 11px;
  padding: 16px 18px;
}

.pf-kpi-tile .value {
  font-size: 1.9rem;
  font-weight: 800;
  color: var(--ink);
  line-height: 1.15;
}

.pf-kpi-tile .label {
  font-size: .74rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--ink-soft);
  margin-top: 4px;
}

/* ── Righe tabella bloccate ──────────────────────────────── */
.pf-table-row-blocked {
  background: var(--bad-bg) !important;
}
.pf-table-row-blocked:hover {
  background: #f5d8d8 !important;
}

/* ============================================================
   Toast
   ============================================================ */
.toast-container { z-index: 1090; }

.pf-toast {
  border-radius: 9px;
  box-shadow: 0 12px 34px rgba(0, 0, 0, .3);
  font-size: .9rem;
  font-weight: 500;
  min-width: 280px;
  border: none;
  border-left: 4px solid;
  padding: 12px 16px;
  opacity: 1;
  transition: opacity .4s;
}

.pf-toast.success { background: #e7f5ee; color: #1f8a52; border-left-color: #1f8a52; }
.pf-toast.error   { background: var(--bad-bg); color: var(--bad); border-left-color: var(--bad); }
.pf-toast.warning { background: var(--warn-bg); color: var(--warn); border-left-color: var(--warn); }
.pf-toast.info    { background: #e8eef8; color: #2a5fb0; border-left-color: #2a5fb0; }

/* ============================================================
   Modali
   ============================================================ */
.modal-content {
  border: none;
  border-radius: 13px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, .35);
}

.pf-modal-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 20px;
  border-bottom: 1px solid var(--line-soft);
}

.pf-modal-warn-icon {
  width: 36px;
  height: 36px;
  flex-shrink: 0;
  border-radius: 50%;
  background: var(--warn-bg);
  color: var(--warn);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.05rem;
}

.pf-modal-warn-icon.danger {
  background: var(--bad-bg);
  color: var(--bad);
}

.pf-modal-title {
  font-size: 1rem;
  font-weight: 700;
  margin: 0;
  color: var(--ink);
}

.pf-modal-body {
  padding: 26px 26px 22px;
  font-size: .92rem;
  color: var(--ink);
}

.pf-modal-body p strong { font-weight: 700; }

.pf-modal-footer {
  padding: 14px 20px;
  border-top: 1px solid var(--line-soft);
  display: flex;
  gap: 8px;
  justify-content: flex-end;
}

/* Bootstrap's .modal-dialog-scrollable targets .modal-body to make it
   scroll while header/footer stay fixed; this markup uses pf-modal-*
   classes instead, so the scroll behavior must be reattached here. */
.modal-dialog-scrollable .pf-modal-header,
.modal-dialog-scrollable .pf-modal-footer {
  flex-shrink: 0;
}

.modal-dialog-scrollable .pf-modal-body {
  overflow-y: auto;
  min-height: 0;
}

/* ============================================================
   Permessi — albero gerarchico
   ============================================================ */
.pf-perm-group {
  border-bottom: 1px solid var(--line-soft);
}
.pf-perm-group:last-child { border-bottom: none; }

.pf-perm-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 0;
}

.pf-perm-subtree {
  border-left: 2px solid var(--line-soft);
  margin-left: 14px;
  padding-left: 14px;
}

.pf-perm-subtree .pf-perm-subtree {
  border-left-color: var(--line);
  margin-left: 10px;
  padding-left: 12px;
}

.pf-perm-level-0 > .pf-perm-label {
  font-weight: 600;
}

.pf-perm-label {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: .92rem;
  color: var(--ink);
}

.pf-perm-label i {
  font-size: 1.05rem;
  color: var(--ink-soft);
  width: 20px;
  text-align: center;
  flex-shrink: 0;
}

.pf-perm-row.pf-perm-disabled .pf-perm-label {
  color: var(--ink-soft);
  opacity: 0.6;
}

.form-switch .form-check-input {
  width: 2.4em;
  height: 1.25em;
  cursor: pointer;
}

.form-switch .form-check-input:disabled {
  cursor: not-allowed;
  opacity: 0.45;
}

/* ============================================================
   Alert inline
   ============================================================ */
.pf-alert {
  border-radius: 8px;
  padding: 12px 16px;
  font-size: .9rem;
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-bottom: 16px;
}

.pf-alert-error {
  background: var(--bad-bg);
  color: var(--bad);
  border: 1px solid #e8b8b8;
}

.pf-alert-warning {
  background: var(--warn-bg);
  color: var(--warn);
  border: 1px solid #f0cda0;
}

.pf-alert-info {
  background: #e8eef8;
  color: #2a5fb0;
  border: 1px solid #c5d4ee;
}

.pf-alert-accent {
  background: rgba(19, 138, 146, .12);
  color: var(--accent-dark);
  border: 1px solid var(--accent);
}

/* ============================================================
   Pagina di errore
   ============================================================ */
.pf-error-page {
  min-height: 60vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 14px;
  padding: 40px 20px;
}

.pf-error-code {
  font-size: 4rem;
  font-weight: 800;
  color: var(--line);
  line-height: 1;
  font-family: ui-monospace, monospace;
}

/* ============================================================
   Login page
   ============================================================ */
.pf-login-wrap {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg);
  padding: 24px;
}

.pf-login-card {
  width: 100%;
  max-width: 400px;
  background: var(--panel);
  border: 1px solid var(--line-soft);
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 8px 28px rgba(15, 42, 46, .12);
}

.pf-login-header {
  background: linear-gradient(180deg, var(--accent), var(--accent-dark));
  padding: 28px 30px 24px;
  text-align: center;
  color: #fff;
}

.pf-login-header h1 {
  font-size: 1.3rem;
  font-weight: 700;
  margin: 8px 0 4px;
}

.pf-login-header p {
  font-size: .85rem;
  opacity: .85;
  margin: 0;
}

.pf-login-body { padding: 28px 30px; }

.pf-password-wrap { position: relative; }
.pf-password-wrap .form-control { padding-right: 42px; }
.pf-password-toggle {
  position: absolute;
  top: 50%;
  right: 4px;
  transform: translateY(-50%);
  width: 34px;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  background: transparent;
  border-radius: 6px;
  padding: 0;
  color: var(--ink-soft);
  cursor: pointer;
}
.pf-password-toggle:hover { color: var(--ink); }
.pf-password-toggle:focus-visible { outline: none; box-shadow: 0 0 0 .2rem rgba(19, 138, 146, .2); }
.pf-password-toggle .bi-eye-slash { display: none; }
.pf-password-toggle.is-visible .bi-eye { display: none; }
.pf-password-toggle.is-visible .bi-eye-slash { display: inline-block; }

.pf-qr-divider {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 18px 0;
  color: var(--ink-soft);
  font-size: .74rem;
  text-transform: uppercase;
  letter-spacing: .05em;
}

.pf-qr-divider::before,
.pf-qr-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--line-soft);
}

.pf-qr-panel {
  margin-top: 16px;
  padding: 18px;
  border: 1px solid var(--line-soft);
  border-radius: 12px;
  background: #fafbfb;
  text-align: center;
}

.pf-qr-hint {
  font-size: .82rem;
  color: var(--ink-soft);
  margin: 0 0 14px;
}

.pf-qr-image {
  display: flex;
  justify-content: center;
  margin-bottom: 10px;
  min-height: 200px;
  align-items: center;
}

.pf-qr-image svg { width: 200px; height: 200px; }

.pf-qr-countdown {
  font-size: .78rem;
  color: var(--ink-soft);
  margin: 0;
}

.pf-qr-countdown .mono { color: var(--accent); font-weight: 700; }

/* ============================================================
   Responsive
   ============================================================ */
@media (max-width: 1100px) {
  .pf-kpi-grid { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 991px) {
  .pf-filter-bar { flex-direction: column; align-items: stretch; }
  .pf-filter-bar .input-group,
  .pf-filter-bar .form-select { max-width: 100% !important; }
}

@media (max-width: 760px) {
  .pf-card-body  { padding: 16px 18px; }
  .pf-card-header { padding: 12px 18px; }
  .pf-card-footer { padding: 14px 18px; }
  .pf-container { padding: 0 16px; }
  .pf-main { padding: 14px 0 70px; }
  .pf-kpi-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ============================================================
   Tab navigation (Bootstrap nav-tabs override)
   ============================================================ */
.pf-tabs-nav.nav-tabs {
  border-bottom: 2px solid var(--line-soft);
  background: var(--panel);
  border-radius: 12px 12px 0 0;
  padding: 8px 12px 0;
  flex-wrap: nowrap;
  overflow-x: auto;
  overflow-y: hidden;
  gap: 2px;
}

.pf-tabs-nav .nav-link {
  font-size: .88rem;
  font-weight: 500;
  color: var(--ink-soft) !important;
  border: none !important;
  border-bottom: 2px solid transparent !important;
  margin-bottom: -2px;
  padding: 9px 18px;
  border-radius: 8px 8px 0 0;
  white-space: nowrap;
  background: transparent;
  transition: color .15s;
  text-decoration: none !important;
}

.pf-tabs-nav .nav-link:hover {
  color: var(--accent) !important;
  background: rgba(19, 138, 146, .06);
}

.pf-tabs-nav .nav-link.active {
  color: var(--accent) !important;
  font-weight: 600;
  border-bottom: 2px solid var(--accent) !important;
  background: transparent;
}

/* Card below tabs: remove top border and top radius */
.pf-tabs-content.pf-card {
  border-top: none;
  border-radius: 0 0 12px 12px;
}

/* Il toggle nativo di Bootstrap richiede che .tab-pane sia figlio diretto di
   .tab-content (selettore ">"); quando un pannello è racchiuso in un <form>
   (es. anagrafica famiglia) quella regola non si applica più, quindi la
   ridefiniamo senza vincolo di figlio diretto. */
.tab-pane {
  display: none;
}
.tab-pane.active {
  display: block;
}

/* ── Family detail header ────────────────────────────────── */
.pf-family-header {
  padding: 16px 22px;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}

.pf-family-name {
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--ink);
}

.pf-family-cf {
  font-size: .88rem;
  color: var(--ink-soft);
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  margin-top: 2px;
}

/* ============================================================
   Welcome screen
   ============================================================ */
.pf-welcome {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: calc(100vh - 60px);
  padding: 0;
  gap: 22px;
}

.pf-welcome-logo {
  width: auto;
  height: 110px;
  opacity: .92;
}

.pf-welcome-name {
  font-size: 1.7rem;
  font-weight: 700;
  color: var(--accent);
  letter-spacing: -.02em;
  margin: 0;
}

/* ============================================================
   Liste — carica lista (barra di lavoro compatta)
   ============================================================ */
.pf-lista-nuova {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.pf-lista-nuova .pf-card + .pf-card { margin-top: 0; }

.pf-toolbar {
  padding: 12px 20px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  position: sticky;
  top: 0;
  z-index: 5;
  background: var(--panel);
  overflow: visible;
}

.pf-toolbar-row {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}

.pf-field-code {
  display: flex;
  align-items: center;
  gap: 8px;
}

.pf-field-code label { white-space: nowrap; }
.pf-field-code .input-group { width: 150px; }

.pf-family-tag {
  font-size: .88rem;
  font-weight: 600;
  color: var(--ink);
}

.pf-toolbar .btn-save { margin-left: auto; }

.pf-kpi-strip {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  font-size: .86rem;
  color: var(--ink-soft);
}

.pf-kpi-strip b {
  font-size: .98rem;
  font-weight: 700;
  color: var(--ink);
}

.pf-kpi-strip .sep {
  color: var(--line);
  margin: 0 8px;
}

.pf-note-field {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1 1 260px;
  min-width: 220px;
}

.pf-note-field label { white-space: nowrap; }
.pf-note-field .form-control { flex: 1; }

.pf-lista-nuova .pf-table tbody td { padding: 5px 16px; }

.pf-lista-nuova .qty-input,
.pf-lista-nuova .nota-input {
  padding: .3rem .55rem;
  font-size: .85rem;
}

.qty-max-badge {
  margin-left: 8px;
  vertical-align: middle;
}

@keyframes pf-qty-rejected {
  0%   { background-color: #fff; border-color: var(--line); }
  10%  { background-color: var(--bad-bg); border-color: var(--bad); }
  100% { background-color: #fff; border-color: var(--line); }
}

.qty-input.qty-rejected {
  animation: pf-qty-rejected 2.6s ease-out;
}

.pf-appuntamento-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 18px;
  align-items: stretch;
}

.pf-appuntamento-grid .pf-card {
  display: flex;
  flex-direction: column;
}

.pf-appuntamento-grid .pf-card + .pf-card { margin-top: 0; }

.pf-appuntamento-grid .pf-card-header {
  padding: 12px 18px;
}

.pf-appuntamento-grid .pf-card-body {
  padding: 16px 18px;
  flex: 1 1 auto;
}

@media (max-width: 960px) {
  .pf-appuntamento-grid { grid-template-columns: 1fr; }
}

/* ── Scontrino punteggio distribuzione ─────────────────────── */
.pf-receipt {
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.pf-receipt-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 4px 0;
}

.pf-receipt-row label {
  font-size: .85rem;
  color: var(--ink-soft);
}

.pf-receipt-row span {
  font-weight: 600;
  color: var(--ink);
}

.pf-receipt-row.muted span { color: var(--ink-soft); font-weight: 500; }

.pf-receipt-row.warn label,
.pf-receipt-row.warn span { color: var(--bad); }

.pf-receipt-row.info label,
.pf-receipt-row.info span { color: #2a5fb0; font-weight: 700; }

.pf-receipt-row.total {
  padding-top: 10px;
}
.pf-receipt-row.total label {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--ink);
}
.pf-receipt-row.total span {
  font-size: 1.15rem;
  font-weight: 800;
  color: #1f8a52;
}

.pf-receipt-divider {
  border-top: 1px solid var(--accent);
  opacity: .35;
  margin: 4px 0;
}
.pf-receipt-divider.thick {
  opacity: .5;
  border-top-width: 2px;
}

.pf-receipt-input {
  width: 100px;
  text-align: right;
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 4px 8px;
}
.pf-receipt-input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 .2rem rgba(19,138,146,.2);
}

.pf-receipt-group + .pf-receipt-group { margin-top: 6px; }

.pf-receipt-sign {
  display: inline-block;
  width: 13px;
  margin-right: 5px;
  text-align: center;
  font-weight: 700;
}
.pf-receipt-sign.plus { color: #1f8a52; }
.pf-receipt-sign.minus { color: var(--bad); }
.pf-receipt-sign.eq { color: #2a5fb0; }

.pf-card-help-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  flex: 0 0 auto;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: #fff;
  color: var(--accent);
  font-size: .95rem;
  line-height: 1;
}
.pf-card-help-btn:hover { border-color: var(--accent); background: #eef7f7; }
.pf-card-help-btn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 .2rem rgba(19,138,146,.2);
}

/* ── Pop-up "Come si calcola il punteggio" ───────────────────── */
.pf-help-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
  font-size: .8rem;
  color: var(--ink-soft);
  margin-bottom: 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--line-soft);
}

.pf-help-block + .pf-help-block { margin-top: 20px; }

.pf-help-block-title {
  font-size: .78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--accent-dark);
  margin: 0 0 8px;
}

.pf-help-list {
  list-style: none;
  margin: 0 0 10px;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.pf-help-list li {
  font-size: .88rem;
  line-height: 1.4;
  color: var(--ink);
}

.pf-help-formula {
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: .82rem;
  background: var(--bg);
  border: 1px solid var(--line-soft);
  border-radius: 8px;
  padding: 9px 12px;
  color: var(--ink);
}

.pf-help-example {
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-variant-numeric: tabular-nums;
  font-size: .82rem;
  font-weight: 600;
  background: #e8eef8;
  border: 1px solid #c5d4ee;
  border-radius: 8px;
  padding: 9px 12px;
  color: #2a5fb0;
  margin-top: 6px;
}

.pf-help-example-label {
  font-size: .72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--ink-soft);
  margin: 6px 0 -2px;
}

.pf-help-note {
  margin-top: 18px;
  padding: 10px 14px;
  background: #e8eef8;
  border: 1px solid #c5d4ee;
  border-radius: 8px;
  color: #2a5fb0;
  font-size: .85rem;
}

/* ── Pagina appuntamento e punteggio (liste/appuntamento.html) ────────── */
.pf-appuntamento-page {
  padding-bottom: 90px;
}

.pf-action-bar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 30;
  background: var(--panel);
  border-top: 1px solid var(--line-soft);
  box-shadow: 0 -8px 24px rgba(15, 42, 46, .15);
}

.pf-action-bar-inner {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 10px;
  padding: 14px 24px;
}

@media (max-width: 620px) {
  .pf-action-bar-inner { padding: 12px 16px; }
  .pf-action-bar-inner .btn-save { flex: 1; justify-content: center; }
}

/* ============================================================
   Calendario distribuzione — vista mensile
   ============================================================ */
.pf-calendar-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 6px;
}

.pf-calendar-grid + .pf-calendar-grid { margin-top: 6px; }

.pf-calendar-grid-header {
  margin-bottom: 4px;
}

.pf-calendar-grid-header div {
  font-size: .72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--ink-soft);
  text-align: center;
  padding-bottom: 4px;
}

.pf-calendar-day {
  min-height: 96px;
  border: 1px solid var(--line-soft);
  border-radius: 8px;
  padding: 6px;
  background: var(--panel);
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.pf-calendar-day-outside {
  background: var(--bg);
  border-style: dashed;
}

.pf-calendar-day-today {
  border-color: var(--accent);
  border-width: 2px;
  padding: 5px;
}

.pf-calendar-day-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.pf-calendar-day-num {
  font-size: .82rem;
  font-weight: 700;
  color: var(--ink);
}

.pf-calendar-day-outside .pf-calendar-day-num {
  color: var(--ink-soft);
}

.pf-cal-day-dots {
  display: flex;
  gap: 3px;
  min-height: 7px;
}

.pf-cal-day-dot {
  width: 7px;
  height: 7px;
  border-radius: 2px;
  flex-shrink: 0;
}

.pf-calendar-day-head .btn-row {
  padding: 1px 6px;
  font-size: .74rem;
  line-height: 1.3;
}

.pf-cal-layout {
  display: flex;
  align-items: flex-start;
  gap: 16px;
}

.pf-cal-main {
  flex: 1;
  min-width: 0;
}

.pf-cal-sidebar {
  width: 168px;
  flex-shrink: 0;
  background: var(--panel);
  border: 1px solid var(--line-soft);
  border-radius: 12px;
  padding: 16px 14px;
  position: sticky;
  top: 76px;
}

.pf-cal-sidebar-title {
  font-size: .72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--ink-soft);
  margin-bottom: 10px;
}

.pf-cal-gruppo-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 12px;
}

.pf-cal-gruppo-box {
  padding: 8px 10px;
  border-radius: 8px;
  font-weight: 600;
  font-size: .82rem;
  text-align: center;
  cursor: grab;
  user-select: none;
}

.pf-cal-gruppo-box:active {
  cursor: grabbing;
}

.pf-cal-sidebar-dropzone.pf-cal-dropzone-active {
  outline: 2px dashed var(--bad);
  outline-offset: 2px;
  background: var(--bad-bg);
}

.pf-cal-bar.pf-cal-dropzone-active {
  outline: 2px dashed var(--accent);
  outline-offset: 1px;
}

textarea.pf-dropzone-active {
  outline: 2px dashed var(--accent);
  outline-offset: 2px;
  background: #eef8f8;
}

.cal-info-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  padding: 0;
  flex-shrink: 0;
  border: none;
  border-radius: 999px;
  background: transparent;
  color: inherit;
  opacity: .35;
  font-size: .68rem;
  transition: opacity .15s, background-color .15s, box-shadow .15s;
}

.cal-info-toggle:hover {
  opacity: .75;
}

.cal-info-toggle-active {
  opacity: 1;
  color: var(--ink);
  background: #fff;
  box-shadow: 0 1px 3px rgba(15,42,46,.45);
}

.cal-info-toggle-active:hover {
  filter: brightness(1.05);
}

.cal-festa-toggles {
  display: flex;
  gap: 2px;
  margin-left: auto;
  margin-right: 2px;
}

.cal-festa-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  padding: 0;
  font-size: .7rem;
  color: #aab3b5;
}

.cal-festa-toggle-active:hover {
  filter: brightness(1.07);
}

.pf-cal-fascia-bars {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.pf-cal-bar {
  display: flex;
  align-items: center;
  gap: 4px;
  width: 100%;
  text-align: left;
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 3px 6px;
  cursor: pointer;
  line-height: 1.3;
  min-height: 22px;
}

.pf-cal-bar:hover {
  filter: brightness(1.03);
}

.pf-cal-bar-empty {
  background: #f6fafa;
  border-style: dashed;
  color: var(--ink-soft);
}

.pf-cal-bar-filled {
  border-color: transparent;
}

.pf-cal-bar-fascia {
  font-size: .64rem;
  font-weight: 800;
  text-transform: uppercase;
  opacity: .85;
  flex-shrink: 0;
}

.pf-cal-bar-numero {
  font-size: .68rem;
  font-weight: 700;
  flex-shrink: 0;
}

.pf-cal-bar-testo {
  font-size: .74rem;
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex: 1;
  min-width: 0;
}

.pf-cal-bar-empty-text {
  font-weight: 400;
}

.pf-cal-bar-icon {
  font-size: .72rem;
  flex-shrink: 0;
}

.pf-cal-bar-pending {
  outline: 2px solid var(--warn);
  outline-offset: 1px;
}

.pf-cal-bar-locked {
  cursor: not-allowed;
}

.pf-cal-bar-locked:hover {
  filter: none;
}

/* Legenda calendario */
.pf-cal-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 16px;
  padding: 10px 4px 16px;
  font-size: .8rem;
  color: var(--ink-soft);
}

.pf-cal-legend-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.pf-cal-legend-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  display: inline-block;
  flex-shrink: 0;
}

/* Vista anno: filtro attività */
.pf-cal-year-filtri {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px 16px;
  padding: 0 4px 14px;
  margin-bottom: 14px;
  border-bottom: 1px solid var(--line-soft);
  font-size: .85rem;
}

.pf-cal-year-filtri-label {
  font-weight: 600;
  color: var(--ink);
}

/* Vista anno: mini-mesi */
.pf-cal-year-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}

.pf-cal-mini-month {
  border: 1px solid var(--line-soft);
  border-radius: 11px;
  padding: 12px 14px;
  background: var(--panel);
}

.pf-cal-mini-month-title {
  font-size: .92rem;
  font-weight: 700;
  color: var(--ink);
  text-align: center;
  margin-bottom: 8px;
  text-decoration: none;
  display: block;
}

.pf-cal-mini-month-title:hover {
  color: var(--accent);
}

.pf-cal-mini-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 2px;
}

.pf-cal-mini-day {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 2px 0;
  border-radius: 4px;
}

.pf-cal-mini-day-today {
  background: var(--bg);
  font-weight: 700;
}

.pf-cal-mini-day-num {
  font-size: .66rem;
  color: var(--ink-soft);
  text-align: center;
}

/* Fasce piene mattino/pomeriggio (colore del gruppo) */
.pf-cal-mini-bars {
  display: flex;
  flex-direction: column;
  gap: 1px;
  width: 100%;
  margin-top: 3px;
}

.pf-cal-mini-bar {
  height: 8px;
  border-radius: 3px;
  background: var(--line-soft);
}

/* Puntini per attività informative (banco alimentare, catechismo, feste) */
.pf-cal-mini-dots {
  display: flex;
  gap: 2px;
  height: 6px;
  align-items: center;
  margin-top: 2px;
}

.pf-cal-mini-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--line);
}

.pf-cal-mini-num {
  font-size: .58rem;
  font-weight: 700;
  color: var(--accent);
  line-height: 1;
  font-variant-numeric: tabular-nums;
  margin-top: 1px;
}

@media (max-width: 991px) {
  .pf-cal-year-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 620px) {
  .pf-cal-year-grid { grid-template-columns: 1fr; }
}

@media (max-width: 760px) {
  .pf-calendar-grid { gap: 4px; }
  .pf-calendar-day { min-height: 88px; padding: 4px; }
  .pf-cal-bar-testo { font-size: .68rem; }
}

@media (max-width: 960px) {
  .pf-cal-layout { flex-direction: column; }
  .pf-cal-sidebar { width: 100%; position: static; }
  .pf-cal-gruppo-list { flex-direction: row; flex-wrap: wrap; }
  .pf-cal-gruppo-box { flex: 1 1 auto; }
}

/* ============================================================
   Liste — gestione carrello
   ============================================================ */
.pf-cart-shell {
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-height: 0;
  overflow: hidden;
}

/* Testata famiglia */
.cart-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  flex-wrap: wrap;
  padding: 14px 20px;
}

.cart-family-name { font-size: 1.1rem; font-weight: 700; color: var(--ink); }

.cart-family-meta {
  font-size: .82rem;
  color: var(--ink-soft);
  margin-top: 3px;
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
.cart-family-meta .sep { color: var(--line); }

.kpi-strip { display: flex; gap: 20px; flex-wrap: wrap; align-items: center; }
.kpi-tile { min-width: 100px; }
.kpi-tile .value {
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-variant-numeric: tabular-nums;
  font-size: 1.3rem;
  font-weight: 800;
  line-height: 1.1;
  color: var(--ink);
}
.kpi-tile .label {
  font-size: .66rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--ink-soft);
  margin-top: 2px;
}
.kpi-tile.info .value { color: #2a5fb0; }
.kpi-tile.warn .value { color: var(--warn); }

.opt-row { display: flex; align-items: center; gap: 7px; font-size: .82rem; color: var(--ink-soft); white-space: nowrap; }
.opt-row input { accent-color: var(--accent); }

/* Colonne / aree scrollabili */
.split { flex: 1 1 auto; min-height: 0; display: grid; grid-template-columns: 1fr 1.25fr; gap: 14px; }
.col { display: flex; flex-direction: column; gap: 14px; min-height: 0; }

.lista-card { flex: 1.3 1 0; min-height: 0; display: flex; flex-direction: column; }
.lista-card .pf-table-wrapper { flex: 1 1 auto; min-height: 230px; }

.advice-card { flex: 1 1 0; min-height: 0; display: flex; flex-direction: column; }
.advice-subtitle { font-size: .76rem; color: var(--ink-soft); font-weight: 500; }
.advice-body { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
.advice-scroll { flex: 1 1 auto; overflow-y: auto; min-height: 90px; }

.cart-card { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
.cart-card .pf-table-wrapper { flex: 1 1 auto; min-height: 360px; }

@media (max-width: 960px) {
  .split { grid-template-columns: 1fr; overflow-y: auto; }
}

/* Righe lista spesa */
.row-complete { display: none; background: #e7f5ee; }
.row-complete.row-visible { display: table-row; }
.row-missing { background: var(--warn-bg); }
.row-error { background: var(--bad-bg); }
.row-note { color: var(--ink-soft); font-size: .73rem; margin-top: 2px; }
.row-note.warn { color: var(--warn); }
.negative { color: var(--bad); font-weight: 700; }

/* Riga completa in sola lettura (Controlla lista > Lista e carrello):
   a differenza di .row-complete resta sempre visibile, senza toggle. */
.row-ok { background: #e7f5ee; }

/* ============================================================
   Controlla lista — dettaglio a tab
   ============================================================ */
.pf-detail-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 18px 26px; }
.pf-detail-value { font-size: .95rem; color: var(--ink); font-weight: 600; }
.pf-detail-value.muted { color: var(--ink-soft); font-weight: 500; }

.current-appt-card { display: flex; gap: 22px; flex-wrap: wrap; }
.current-appt-item .pf-detail-label { margin-bottom: 2px; }

/* Colonne allineate: stessa altezza, tabella elastica, footer a filo in basso */
.split.align-cards { grid-template-columns: 1fr 1fr; align-items: stretch; }
.split.align-cards > .pf-card { display: flex; flex-direction: column; }
.split.align-cards > .pf-card .pf-table-wrapper { flex: 1 1 auto; }

.locked-icon { color: var(--ink-soft); font-size: .72rem; margin-left: 5px; }

/* Selettore mese compatto (Cambio appuntamento) */
.month-nav { display: flex; align-items: center; justify-content: center; gap: 18px; margin-bottom: 16px; }
.month-nav-btn {
  width: 30px; height: 30px; border-radius: 50%; border: 1.5px solid var(--line); background: #fff;
  color: var(--ink); font-size: 1rem; line-height: 1; cursor: pointer; display: flex; align-items: center; justify-content: center;
}
.month-nav-btn:hover:not(:disabled) { border-color: var(--accent); color: var(--accent); }
.month-nav-btn:disabled { opacity: .35; cursor: not-allowed; }
.month-nav .label { font-size: 1rem; font-weight: 700; color: var(--ink); min-width: 150px; text-align: center; }

.date-chip-grid { display: flex; flex-wrap: wrap; gap: 10px; }
.date-chip { border: 1.5px solid var(--line); border-radius: 9px; padding: 8px 10px 9px; min-width: 78px; text-align: center; background: #fff; }
.date-chip.current { border-color: #2a5fb0; background: #e8eef8; }
.date-chip.suggested { border-color: var(--accent); background: #e7f4f4; }
.date-chip .dow { font-size: .66rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--ink-soft); }
.date-chip .num { font-family: ui-monospace, monospace; font-variant-numeric: tabular-nums; font-size: 1.05rem; font-weight: 800; color: var(--ink); margin-top: 1px; }
.date-chip .current-tag { font-size: .58rem; font-weight: 800; color: #2a5fb0; letter-spacing: .04em; margin-top: 2px; }
.date-chip .suggested-tag { font-size: .58rem; font-weight: 800; color: var(--accent); letter-spacing: .04em; margin-top: 2px; }
.date-chip .fasce { display: flex; gap: 4px; justify-content: center; margin-top: 7px; }
.date-chip .single-tag { font-size: .6rem; color: var(--ink-soft); margin-top: 4px; }
.fascia-pill {
  border: 1.5px solid var(--line); border-radius: 6px; padding: 3px 8px; font-size: .74rem; font-weight: 700;
  color: var(--ink-soft); background: #fff; cursor: pointer;
}
.fascia-pill:hover { border-color: var(--accent); color: var(--accent); }
.fascia-pill.chosen { border-color: var(--accent); background: var(--accent); color: #fff; }

/* Riga carrello non valida (prodotto non presente in lista) */
.row-invalid { background: var(--bad-bg) !important; }
.row-invalid .sku-desc,
.row-invalid .sku-code { color: var(--bad); }

/* Barra di scansione */
.scan-bar-inner {
  display: flex;
  align-items: flex-end;
  gap: 10px;
  padding: 10px 20px;
  border-bottom: 1px solid var(--line-soft);
  background: #fafbfb;
  flex-wrap: wrap;
}
.field { display: flex; flex-direction: column; gap: 3px; }
.field label { font-size: .72rem; font-weight: 600; color: var(--ink-soft); text-transform: uppercase; letter-spacing: .04em; }
.field-ean { flex: 1 1 220px; min-width: 180px; }
.field-ean input { font-family: ui-monospace, monospace; }
.field-qty { width: 78px; }

.qty-cell {
  background: #e7f5ee;
  border: 1.5px solid #bfe4d1;
  border-radius: 6px;
  width: 58px;
  padding: 4px 7px;
  text-align: right;
  font-family: ui-monospace, monospace;
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  color: #1f8a52;
  font-size: .85rem;
}
.qty-cell:focus {
  outline: none;
  border-color: #1f8a52;
  box-shadow: 0 0 0 .2rem rgba(31, 138, 82, .2);
}

.sku-desc { font-weight: 600; color: var(--ink); }
.sku-code { color: var(--ink-soft); font-size: .75rem; }

.warn-icon { color: var(--warn); font-size: .9rem; }
.warn-icon.hidden-icon { visibility: hidden; }

.cart-total-row td {
  position: sticky;
  bottom: 0;
  padding: 9px 16px;
  font-weight: 700;
  background: var(--panel);
  border-top: 2px solid var(--line-soft);
}
.cart-total-row .num { color: var(--accent-dark); font-size: .98rem; }

/* ============================================================
   Carico merci
   ============================================================ */
.carico-switch {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 4px;
}
.carico-switch button {
  border: none;
  background: transparent;
  padding: 8px 18px;
  border-radius: 999px;
  font-size: .85rem;
  font-weight: 600;
  color: var(--ink-soft);
  cursor: pointer;
  transition: background .15s, color .15s;
}
.carico-switch button.active {
  background: var(--accent);
  color: #fff;
}

.carico-field-row {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 2fr auto;
  gap: 14px;
  align-items: end;
}
@media (max-width: 1180px) {
  .carico-field-row { grid-template-columns: 1fr 1fr; }
}
.carico-field { display: flex; flex-direction: column; gap: 5px; position: relative; }
.carico-search-field { max-width: 460px; position: relative; }

.carico-autocomplete {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 9px;
  box-shadow: 0 8px 28px rgba(15,42,46,.2);
  max-height: 280px;
  overflow-y: auto;
  z-index: 20;
  display: none;
}
.carico-autocomplete.open { display: block; }
.carico-autocomplete-item {
  padding: 9px 14px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 10px;
  border-bottom: 1px solid var(--line-soft);
}
.carico-autocomplete-item:last-child { border-bottom: none; }
.carico-autocomplete-item:hover,
.carico-autocomplete-item.hi { background: #f6fafa; }
.carico-autocomplete-item .sku { font-family: ui-monospace, monospace; font-size: .78rem; color: var(--ink-soft); min-width: 70px; }
.carico-autocomplete-item .desc { flex: 1; font-size: .87rem; }
.carico-autocomplete-item .pts { font-size: .78rem; color: #2a5fb0; font-weight: 600; }
.carico-autocomplete-empty { padding: 14px; font-size: .85rem; color: var(--ink-soft); text-align: center; }

.carico-product-panel {
  display: flex;
  gap: 22px;
  padding: 14px 18px;
  border-radius: 9px;
  background: var(--bg);
  border: 1px solid var(--line-soft);
  align-items: center;
  flex-wrap: wrap;
}
.carico-product-panel.empty { color: var(--ink-soft); font-size: .87rem; justify-content: center; padding: 18px; }
.carico-product-panel .pp-label {
  font-size: .68rem; font-weight: 600; text-transform: uppercase;
  letter-spacing: .05em; color: var(--ink-soft); margin-bottom: 2px;
}
.carico-product-panel .pp-value { font-size: .95rem; font-weight: 700; }

.carico-qty-cell input, .carico-nota-cell input { padding: 6px 8px; }
.carico-qty-cell input { width: 72px; text-align: right; }

/* ============================================================
   Titolo pagina con azioni (es. pulsante "Torna a…")
   ============================================================ */
.pf-page-title-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

/* ============================================================
   Riga tabella selezionata (generica)
   ============================================================ */
.pf-table-row-selected td {
  background: #e7f4f4 !important;
  box-shadow: inset 3px 0 0 var(--accent);
}

/* ============================================================
   Stock distribuzione AGEA
   ============================================================ */
.pf-stockagea-shell {
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-height: 0;
  overflow: hidden;
}

/* Altezza fissa: garantisce almeno 5 righe visibili nella tabella prodotti
   senza dipendere dall'altezza della finestra. */
.stockagea-top { flex: 0 0 300px; display: flex; flex-direction: column; min-height: 0; }
.stockagea-top .pf-table-wrapper { flex: 1 1 auto; min-height: 0; overflow-y: auto; }

.stockagea-split {
  flex: 1 1 auto;
  min-height: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
.stockagea-split .pf-card { min-height: 0; display: flex; flex-direction: column; }
.stockagea-split .pf-card + .pf-card { margin-top: 0; }
.stockagea-split .pf-table-wrapper { flex: 1 1 auto; min-height: 0; overflow-y: auto; }

@media (max-width: 960px) {
  .stockagea-split { grid-template-columns: 1fr; overflow-y: auto; }
}

.stockagea-prodotto-cell .sku { font-size: .72rem; color: var(--ink-soft); margin-top: 1px; }
.stockagea-val-neg { color: var(--bad); font-weight: 700; }
.stockagea-val-pos { color: #2a5fb0; font-weight: 700; }
.carico-nota-cell input { min-width: 160px; }

/* ── Modale "Gestione banco vari" ───────────────────────────────────────── */
.stockagea-picker-row { display: flex; align-items: flex-start; gap: 10px; margin-bottom: 14px; }
.stockagea-picker-field { flex: 1 1 auto; display: flex; flex-direction: column; gap: 5px; }
.stockagea-picker-field label { font-size: .82rem; font-weight: 500; color: var(--ink-soft); line-height: 1.2; }
.stockagea-picker-field-btn { flex: 0 0 auto; }
.stockagea-picker-field-btn label { visibility: hidden; }
.stockagea-avail-hint { font-size: .78rem; color: var(--ink-soft); }
.stockagea-footer-hint { font-size: .78rem; color: var(--ink-soft); margin-right: auto; max-width: 380px; }
#bancoVariTable .qty-input { width: 64px; padding: 6px 8px; text-align: right; }

/* ============================================================
   Limiti gruppi prodotti — grafica esplicativa per finestra
   ============================================================ */
.plg-demo-chip {
  display: inline-block;
  font-size: .62rem;
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--accent);
  background: var(--panel);
  border: 1px solid var(--accent);
  border-radius: 999px;
  padding: 2px 7px;
  margin-bottom: 7px;
}

.plg-range-block { margin-bottom: 6px; }
.plg-range-block + .plg-range-block { border-top: 1px solid var(--line-soft); padding-top: 18px; margin-top: 18px; }

.plg-range-title { font-size: .94rem; font-weight: 700; color: var(--ink); margin-bottom: 10px; }
.plg-range-title .mono { color: var(--accent); }

.plg-period-row {
  display: grid;
  grid-template-columns: 220px 220px 1fr 1fr;
  gap: 16px;
  align-items: start;
}
.plg-period-row > div { min-width: 0; }

.plg-period-row-header {
  padding-bottom: 8px;
  margin-bottom: 14px;
  border-bottom: 1px solid var(--line-soft);
}
.plg-period-row-header > div {
  font-size: .72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--ink-soft);
}

.plg-case-heading {
  font-size: .78rem;
  font-weight: 700;
  color: var(--ink-soft);
  text-transform: uppercase;
  letter-spacing: .03em;
  margin-bottom: 8px;
}

.plg-example-box {
  margin-top: 8px;
  padding: 9px 11px 10px;
  border: 1px dashed var(--line);
  border-radius: 8px;
  background: var(--bg);
}

.plg-carry-line {
  font-size: .73rem;
  color: var(--ink-soft);
  margin-top: 7px;
  padding-top: 7px;
  border-top: 1px solid var(--line-soft);
  line-height: 1.5;
}
.plg-carry-line b { font-weight: 700; color: var(--ink); }

.plg-chart-card {
  border: 1px solid var(--line-soft);
  border-radius: 9px;
  padding: 10px 12px 11px;
}
.plg-chart-head { display: flex; justify-content: flex-end; align-items: center; margin-bottom: 2px; }
.plg-chart-card svg text { font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; }
.plg-axislabel { font-size: 8.5px; fill: var(--ink-soft); font-family: -apple-system, "Segoe UI", system-ui, sans-serif; }
.plg-sentence { font-size: .82rem; line-height: 1.5; color: var(--ink); margin: 8px 0 0; }
.plg-sentence b { font-weight: 700; }

@media (max-width: 1200px) {
  .plg-period-row { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 700px) {
  .plg-period-row { grid-template-columns: 1fr; }
}

/* ============================================================
   Report — selettore distribuzione (Distribuzioni / Statistiche)
   ============================================================ */
.rpt-picker {
  display: flex; align-items: center; gap: 16px; padding: 16px 26px; flex-wrap: wrap;
}
.rpt-picker-btn {
  width: 38px; height: 38px; border-radius: 8px; border: 1.5px solid var(--line); background: #fff;
  display: flex; align-items: center; justify-content: center; color: var(--ink); font-size: 1rem;
  flex-shrink: 0; text-decoration: none;
}
.rpt-picker-btn:hover { border-color: var(--accent); color: var(--accent); }
.rpt-picker-btn.disabled { opacity: .4; pointer-events: none; }
.rpt-picker-main { flex: 1 1 240px; }
.rpt-picker-num { font-size: 1.25rem; font-weight: 800; color: var(--ink); }
.rpt-picker-num .mono { color: var(--accent); }
.rpt-picker-meta {
  font-size: .85rem; color: var(--ink-soft); margin-top: 3px; display: flex; align-items: center;
  gap: 8px; flex-wrap: wrap;
}
.rpt-picker-jump { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.rpt-picker-jump label { font-size: .78rem; color: var(--ink-soft); }
.rpt-picker-row2 {
  padding: 0 26px 18px; display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  border-bottom: 1px solid var(--line-soft);
}
.rpt-picker-row2-label { font-size: .78rem; color: var(--ink-soft); font-weight: 500; }

.rpt-f-toggle { display: inline-flex; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; }
.rpt-f-toggle a {
  border: none; background: #fff; color: var(--ink-soft); font-size: .82rem; padding: 7px 14px;
  text-decoration: none; display: inline-block;
}
.rpt-f-toggle a + a { border-left: 1px solid var(--line); }
.rpt-f-toggle a.active { background: var(--accent); color: #fff; font-weight: 600; }
.rpt-f-toggle a:not(.active):hover { background: var(--bg); }
.rpt-f-toggle a.disabled { opacity: .4; pointer-events: none; }

.rpt-kpi-section-title {
  font-size: .74rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em;
  color: var(--ink-soft); padding: 16px 26px 0;
}
.rpt-fascia-badge {
  display: inline-block; font-size: .66rem; font-weight: 800; padding: 2px 8px; border-radius: 999px;
  background: var(--bg); color: var(--ink-soft);
}
.rpt-empty { text-align: center; color: var(--ink-soft); padding: 40px 18px; font-size: .92rem; }

/* ============================================================
   Report — Installazione app (QR + istruzioni PWA)
   ============================================================ */
.rpt-pwa-form { padding: 20px 26px 24px; display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.rpt-pwa-target { display: inline-flex; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; }
.rpt-pwa-target label {
  font-size: .85rem; color: var(--ink-soft); padding: 9px 16px; cursor: pointer; user-select: none;
}
.rpt-pwa-target label + label { border-left: 1px solid var(--line); }
.rpt-pwa-target label.active { background: var(--accent); color: #fff; font-weight: 600; }
.rpt-pwa-target label:not(.active):hover { background: var(--bg); }
.rpt-pwa-target input { position: absolute; opacity: 0; pointer-events: none; }

.rpt-pwa-app-icon { width: 40px; height: 40px; border-radius: 9px; flex-shrink: 0; }

.rpt-pwa-qr-block {
  display: flex; align-items: center; gap: 20px; padding: 18px 26px; border-bottom: 1px solid var(--line-soft);
  flex-wrap: wrap;
}
.rpt-pwa-qr { width: 132px; height: 132px; border: 1px solid var(--line); border-radius: 8px; padding: 6px; background: #fff; flex-shrink: 0; }
.rpt-pwa-qr svg { display: block; width: 100%; height: 100%; }
.rpt-pwa-qr-text { flex: 1 1 240px; }
.rpt-pwa-qr-text p { margin: 0 0 8px; font-size: .85rem; color: var(--ink-soft); }
.rpt-pwa-qr-text code { font-size: .85rem; color: var(--accent-dark); word-break: break-all; }

.rpt-pwa-steps { padding: 20px 26px 24px; }
.rpt-pwa-steps h4 { font-size: .95rem; font-weight: 700; color: var(--accent-dark); margin: 0 0 12px; }
.rpt-pwa-steps h4:not(:first-child) { margin-top: 22px; }
.rpt-pwa-step { display: flex; align-items: flex-start; gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--line-soft); }
.rpt-pwa-step:last-of-type { border-bottom: none; }
.rpt-pwa-step-num {
  flex-shrink: 0; width: 24px; height: 24px; border-radius: 50%; background: var(--accent); color: #fff;
  font-size: .78rem; font-weight: 700; display: flex; align-items: center; justify-content: center;
}
.rpt-pwa-step-icon { flex-shrink: 0; width: 20px; text-align: center; color: var(--accent-dark); font-size: 1rem; }
.rpt-pwa-step-text { font-size: .88rem; color: var(--ink); line-height: 1.5; padding-top: 2px; }

.rpt-pwa-note {
  display: flex; gap: 10px; align-items: flex-start; background: #e8eef8; border: 1px solid #c5d4ee;
  color: #2a5fb0; border-radius: 8px; padding: 10px 14px; font-size: .82rem; line-height: 1.5; margin-top: 14px;
}
.rpt-pwa-note i { flex-shrink: 0; margin-top: 1px; }

/* ── Grafico "Prodotti distribuiti": barre orizzontali AGEA/Standard ── */
.rpt-chart-legend { display: flex; gap: 16px; flex-wrap: wrap; padding: 14px 26px 0; }
.rpt-chart-legend span { font-size: .8rem; color: var(--ink-soft); display: flex; align-items: center; gap: 6px; }
.rpt-legend-dot { width: 10px; height: 10px; border-radius: 3px; display: inline-block; }
.rpt-legend-line { width: 16px; height: 2px; display: inline-block; }
.rpt-legend-line.dashed { background: none; border-top: 2px dashed currentColor; height: 0; }

.rpt-bar-row { display: flex; align-items: center; gap: 12px; padding: 7px 26px; }
.rpt-bar-row .rpt-b-label {
  width: 130px; flex-shrink: 0; font-size: .85rem; color: var(--ink);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.rpt-bar-row .rpt-b-track {
  flex: 1; display: flex; height: 20px; border-radius: 4px; overflow: hidden; background: var(--bg);
  max-width: 320px;
}
.rpt-bar-row .rpt-b-agea { background: var(--accent); }
.rpt-bar-row .rpt-b-std { background: var(--info-bg); border-right: 1px solid var(--info-line); }
.rpt-bar-row .rpt-b-total { width: 44px; text-align: right; font-size: .82rem; font-weight: 700; color: var(--ink-soft); flex-shrink: 0; }

.rpt-value-split-wrap { padding: 14px 26px 20px; border-top: 1px solid var(--line-soft); margin-top: 6px; }
.rpt-value-split { display: flex; height: 10px; border-radius: 999px; overflow: hidden; max-width: 400px; }
.rpt-value-split .rpt-vs-agea { background: var(--accent); }
.rpt-value-split .rpt-vs-std { background: var(--info-line); }
.rpt-value-split-label { display: flex; gap: 18px; padding-top: 7px; font-size: .79rem; color: var(--ink-soft); }
.rpt-value-split-label b { color: var(--ink); }

/* ── Gauge (arco semicircolare via conic-gradient) ── */
.rpt-gauges { display: flex; gap: 20px; justify-content: center; padding: 18px 10px 22px; flex-wrap: wrap; }
.rpt-gauge-block { text-align: center; width: 160px; }
.rpt-gauge-arc { width: 160px; height: 80px; border-radius: 80px 80px 0 0; position: relative; margin: 0 auto; }
.rpt-gauge-arc::after {
  content: ''; position: absolute; left: 16px; top: 16px; width: 128px; height: 64px;
  border-radius: 64px 64px 0 0; background: var(--panel);
}
.rpt-gauge-val { font-size: 1.4rem; font-weight: 800; margin-top: 8px; }
.rpt-gauge-cap { font-size: .78rem; color: var(--ink-soft); margin-top: 2px; }
.rpt-gauge-sub { font-size: .74rem; color: var(--neutral, #aab3b5); margin-top: 1px; }

@media (max-width: 760px) {
  .rpt-picker { gap: 10px; }
}

/* ============================================================
   Contabilizzazione carrelli
   ============================================================ */
.contab-check-row {
  display: flex; align-items: center; gap: 14px;
  padding: 14px 22px; border-bottom: 1px solid var(--line-soft);
}
.contab-check-row:last-child { border-bottom: none; }
.contab-check-icon {
  width: 34px; height: 34px; border-radius: 50%; flex: none;
  display: flex; align-items: center; justify-content: center; font-size: 1rem;
}
.contab-check-icon.ok      { background: #e7f5ee; color: #1f8a52; }
.contab-check-icon.bad     { background: var(--bad-bg); color: var(--bad); }
.contab-check-icon.pending { background: var(--bg); color: #aab3b5; }
.contab-check-body { flex: 1; min-width: 0; }
.contab-check-title { font-weight: 600; font-size: .94rem; }
.contab-check-detail { font-size: .82rem; color: var(--ink-soft); margin-top: 2px; }

.contab-chip {
  font-size: .72rem; font-weight: 700; padding: 4px 10px; border-radius: 999px; white-space: nowrap;
}
.contab-chip.ok      { background: #e7f5ee; color: #1f8a52; border: 1px solid #bfe4d1; }
.contab-chip.bad      { background: var(--bad-bg); color: var(--bad); border: 1px solid #e8b8b8; }
.contab-chip.pending  { background: var(--bg); color: #aab3b5; border: 1px solid var(--line); }

.contab-stepper { display: flex; align-items: flex-start; padding: 24px 22px 6px; }
.contab-step { display: flex; flex-direction: column; align-items: center; flex: 1; position: relative; }
.contab-step-dot {
  width: 28px; height: 28px; border-radius: 50%; font-size: .76rem; font-weight: 700; z-index: 1;
  display: flex; align-items: center; justify-content: center;
}
.contab-step.done .contab-step-dot   { background: #1f8a52; color: #fff; }
.contab-step.active .contab-step-dot { background: var(--accent); color: #fff; box-shadow: 0 0 0 5px rgba(19,138,146,.18); }
.contab-step.todo .contab-step-dot   { background: var(--bg); color: var(--ink-soft); border: 1px solid var(--line); }
.contab-step-line { position: absolute; top: 14px; left: -50%; width: 100%; height: 2px; background: var(--line); z-index: 0; }
.contab-step:first-child .contab-step-line { display: none; }
.contab-step.done .contab-step-line, .contab-step.active .contab-step-line { background: #1f8a52; }
.contab-step-label { font-size: .74rem; color: var(--ink-soft); margin-top: 8px; text-align: center; max-width: 110px; font-weight: 600; }
.contab-step.active .contab-step-label { color: var(--ink); }

.contab-progress-wrap { padding: 6px 22px 20px; }
.contab-progress-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 8px; }
.contab-progress-count { font-size: 1.25rem; font-weight: 800; }
.contab-progress-pct { font-size: .85rem; color: var(--ink-soft); }
.contab-progress-track { height: 10px; border-radius: 999px; background: var(--bg); border: 1px solid var(--line-soft); overflow: hidden; }
.contab-progress-fill {
  height: 100%; border-radius: 999px; width: 0%;
  background: linear-gradient(90deg, var(--accent), var(--accent-dark));
  transition: width .35s ease;
}

.contab-current-op {
  display: flex; align-items: center; gap: 12px; margin: 0 22px 18px;
  padding: 12px 16px; background: #e8eef8; border: 1px solid #c5d4ee; border-radius: 9px;
}
.contab-current-op .bi { color: #2a5fb0; animation: contab-spin 1s linear infinite; }
.contab-current-op .txt { font-size: .88rem; color: var(--ink); }

.contab-live-kpis {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin: 0 22px 18px;
}
.contab-live-kpi { background: var(--bg); border: 1px solid var(--line-soft); border-radius: 9px; padding: 12px 14px; }
.contab-live-kpi .n { font-size: 1.3rem; font-weight: 800; color: var(--ink); }
.contab-live-kpi .l { font-size: .66rem; text-transform: uppercase; letter-spacing: .05em; color: var(--ink-soft); font-weight: 700; margin-top: 2px; }
@media (max-width: 900px) { .contab-live-kpis { grid-template-columns: repeat(2, 1fr); } }

.contab-log-feed {
  margin: 0 22px 18px; background: var(--bg); border: 1px solid var(--line-soft); border-radius: 9px;
  padding: 12px 16px; height: 160px; overflow-y: auto; display: flex; flex-direction: column; gap: 5px;
}
.contab-log-line { font-size: .8rem; display: flex; gap: 8px; align-items: flex-start; color: var(--ink-soft); }
.contab-log-line .bi-check-circle-fill { color: #1f8a52; }
.contab-log-line .bi-x-circle-fill { color: var(--bad); }
.contab-log-line .t { color: var(--ink); }

.contab-no-close-hint { margin: 0 22px 22px; font-size: .78rem; color: var(--ink-soft); display: flex; gap: 8px; align-items: center; }

.contab-success-banner { display: flex; align-items: center; gap: 16px; padding: 22px; }
.contab-success-icon {
  width: 50px; height: 50px; border-radius: 50%; background: #e7f5ee; color: #1f8a52; flex: none;
  display: flex; align-items: center; justify-content: center; font-size: 1.3rem;
}
.contab-success-title { font-size: 1.12rem; font-weight: 700; margin: 0; }
.contab-success-sub { font-size: .85rem; color: var(--ink-soft); margin-top: 3px; }

.contab-section-title { font-size: .96rem; font-weight: 700; padding: 20px 22px 4px; }

@keyframes contab-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .contab-progress-fill { transition: none; }
  .contab-current-op .bi { animation: none; }
}
#bancoVariTable .qty-input.is-invalid { border-color: var(--bad); box-shadow: 0 0 0 .15rem rgba(196, 59, 59, .15); }

/* ============================================================
   Riordina menu — liste trascinabili
   ============================================================ */
.menuadm-top-list {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: 10px;
}
.menuadm-top-item {
  display: flex; align-items: center; gap: 8px;
  background: var(--bg); border: 1px solid var(--line-soft); border-radius: 9px;
  padding: 10px 14px; font-weight: 600; font-size: .92rem; color: var(--ink);
}
.menuadm-top-item.sortable-ghost { opacity: .4; }
.menuadm-top-item .bi:not(.menuadm-handle) { color: var(--ink-soft); }

.menuadm-list { list-style: none; margin: 0; padding: 0; }
.menuadm-list .menuadm-list { margin-top: 8px; }

.menuadm-item { border-radius: 8px; }
.menuadm-item + .menuadm-item { margin-top: 4px; }
.menuadm-item.sortable-ghost { opacity: .35; }
.menuadm-item.sortable-chosen > .menuadm-row { background: #e7f4f4; }

.menuadm-row {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 12px; border: 1px solid var(--line-soft); border-radius: 8px;
  background: var(--panel); font-size: .9rem; color: var(--ink);
}
.menuadm-row .bi:not(.menuadm-handle) { color: var(--ink-soft); width: 18px; text-align: center; flex-shrink: 0; }
.menuadm-label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.menuadm-handle { cursor: grab; color: var(--ink-soft) !important; flex-shrink: 0; }
.menuadm-handle:active { cursor: grabbing; }

.menuadm-divider-row { background: transparent; border-style: dashed; }
.menuadm-divider-line {
  flex: 1; height: 0; border-top: 2px dashed var(--line);
}
.menuadm-divider-label {
  font-size: .72rem; text-transform: uppercase; letter-spacing: .05em; font-weight: 700; color: var(--ink-soft);
}
.menuadm-remove-btn {
  border: none; background: transparent; color: var(--ink-soft); padding: 2px 6px; border-radius: 6px; line-height: 1;
}
.menuadm-remove-btn:hover { color: var(--bad); background: var(--bad-bg); }

.menuadm-subwrap { margin: 8px 0 0 30px; padding-left: 14px; border-left: 2px solid var(--line-soft); }
.menuadm-empty-hint {
  font-size: .8rem; color: var(--ink-soft); padding: 10px 12px; border: 1px dashed var(--line); border-radius: 8px;
  text-align: center;
}

.menuadm-add-divider { margin-top: 10px; }

.menuadm-error {
  font-size: .82rem; color: var(--bad); margin-top: 10px; display: none;
}
.menuadm-error.show { display: block; }

/* ============================================================
   Messaggistica
   ============================================================ */
.pf-msg-dot {
  display: inline-block; width: 8px; height: 8px; border-radius: 50%;
  background: var(--line); vertical-align: middle;
}
.pf-msg-dot.new { background: var(--accent); }

.text-accent { color: var(--accent) !important; font-weight: 700; }

.pf-nav-badge {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 16px; height: 16px; padding: 0 4px; margin-left: 4px;
  border-radius: 999px; background: #fff; color: var(--accent-dark);
  font-size: .66rem; font-weight: 800; line-height: 16px; vertical-align: middle;
}

.pf-pager { display: flex; align-items: center; gap: 12px; }
.pf-page-btn {
  border: 1px solid var(--line); background: #fff; color: var(--ink);
  font-size: .8rem; font-weight: 600; padding: 5px 13px; border-radius: 7px;
  text-decoration: none;
}
.pf-page-btn:hover { border-color: var(--accent); color: var(--accent); }
.pf-page-btn.pf-disabled { color: var(--neutral, #aab3b5); border-color: var(--line-soft); pointer-events: none; }
.pf-page-info { font-size: .8rem; color: var(--ink-soft); }

.pf-message-body {
  background: #fafcfc; border: 1px solid var(--line-soft); border-radius: 9px;
  padding: 14px 16px; font-size: .92rem; line-height: 1.55; white-space: pre-line;
}

.pf-thread { padding: 18px 22px; display: flex; flex-direction: column; gap: 12px; }
.pf-thread-msg {
  max-width: 74%; border-radius: 13px; padding: 10px 14px; font-size: .9rem; line-height: 1.5;
}
.pf-thread-who { font-size: .68rem; font-weight: 700; margin-bottom: 3px; opacity: .75; text-transform: uppercase; letter-spacing: .03em; }
.pf-thread-when { font-size: .68rem; opacity: .65; margin-top: 5px; }
.pf-thread-msg.family { align-self: flex-start; background: #f2f5f5; color: var(--ink); border: 1px solid var(--line-soft); border-bottom-left-radius: 4px; }
.pf-thread-msg.staff { align-self: flex-end; background: var(--accent); color: #fff; border-bottom-right-radius: 4px; }
.pf-thread-msg.staff .pf-thread-when { text-align: right; }
.pf-thread-attach { margin-top: 8px; }
.pf-thread-attach img { max-width: 220px; border-radius: 8px; display: block; }
.pf-thread-reply { padding: 14px 22px; border-top: 1px solid var(--line-soft); display: flex; gap: 10px; align-items: flex-end; }
.pf-thread-reply textarea { flex: 1; }

.pf-stat-bar-row { display: flex; align-items: center; gap: 10px; font-size: .85rem; padding: 9px 0; border-bottom: 1px solid var(--line-soft); }
.pf-stat-bar-row:last-child { border-bottom: none; }
.pf-stat-bar-label { width: 150px; flex: none; color: var(--ink); }
.pf-stat-bar-track { flex: 1; height: 8px; background: #e7ecec; border-radius: 999px; overflow: hidden; }
.pf-stat-bar-fill { height: 100%; background: var(--accent); border-radius: 999px; }
.pf-stat-bar-val { width: 55px; text-align: right; color: var(--ink-soft); }

/* ============================================================
   Report Builder — wizard a 4 passi (Dashboard, Fase 4)
   ============================================================ */

/* ── Stepper ─────────────────────────────────────────────── */
.rb-stepper { display: flex; gap: 10px; margin-bottom: 18px; }
.rb-step-btn {
  flex: 1; display: flex; align-items: center; gap: 10px;
  padding: 12px 16px; border: 1px solid var(--line-soft); border-radius: 11px;
  background: var(--panel); cursor: pointer; text-align: left;
}
.rb-step-btn .dot {
  width: 26px; height: 26px; flex: none; border-radius: 50%; background: var(--bg);
  color: var(--ink-soft); display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: .82rem;
}
.rb-step-btn.active { border-color: var(--accent); box-shadow: 0 0 0 .15rem rgba(19,138,146,.12); }
.rb-step-btn.active .dot { background: var(--accent); color: #fff; }
.rb-step-btn.done .dot { background: #1f8a52; color: #fff; }
.rb-step-btn:disabled { cursor: not-allowed; opacity: .5; }
.rb-step-label { font-weight: 600; font-size: .86rem; color: var(--ink-soft); }
.rb-step-btn.active .rb-step-label,
.rb-step-btn.done .rb-step-label { color: var(--ink); }
.rb-step-warn { color: var(--bad); margin-left: 2px; }

.rb-step-panel { display: none; }

/* ============================================================
   Carosello immagini della Guida (fase 5) — riutilizzato anche
   in Area Famiglie/Volontari, vedi guida/_carousel.html
   ============================================================ */
.pf-help-carousel { margin-top: 22px; }
.pf-help-carousel-stage {
  position: relative; height: 320px; background: var(--bg);
  border: 1px solid var(--line-soft); border-radius: 12px; overflow: hidden;
}
.pf-help-carousel-slide {
  position: absolute; inset: 0; margin: 0; display: none;
  flex-direction: column; align-items: center; justify-content: center; gap: 6px;
}
.pf-help-carousel-slide.is-active { display: flex; }
.pf-help-carousel-slide img { max-width: 92%; max-height: calc(100% - 30px); object-fit: contain; }
.pf-help-carousel-slide figcaption {
  padding: 0 14px; font-size: .82rem; color: var(--ink-soft); text-align: center;
  max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.pf-help-carousel-arrow {
  position: absolute; top: 50%; transform: translateY(-50%); width: 34px; height: 34px;
  border-radius: 50%; border: 1px solid var(--line); background: rgba(255,255,255,.92);
  color: var(--ink); display: flex; align-items: center; justify-content: center; padding: 0;
}
.pf-help-carousel-arrow:hover { border-color: var(--accent); color: var(--accent); }
.pf-help-carousel-arrow.prev { left: 10px; }
.pf-help-carousel-arrow.next { right: 10px; }
.pf-help-carousel-counter {
  position: absolute; top: 10px; right: 12px; padding: 2px 9px; border-radius: 999px;
  background: rgba(15,42,46,.55); color: #fff; font-size: .72rem; font-weight: 600;
}
.pf-help-carousel-dots { display: flex; justify-content: center; gap: 8px; margin-top: 12px; }
.pf-help-carousel-dot {
  width: 8px; height: 8px; border-radius: 50%; background: var(--line); border: none; padding: 0;
}
.pf-help-carousel-dot.is-active { background: var(--accent); width: 20px; border-radius: 999px; }
@media (max-width: 620px) {
  .pf-help-carousel-stage { height: 220px; }
}
.rb-step-panel.active { display: block; }

/* ── Passo 1 — Tipo di output ─────────────────────────────── */
.rb-type-layout { display: grid; grid-template-columns: 300px 1fr; gap: 24px; align-items: start; }
.rb-type-preview {
  position: sticky; top: 14px; border: 1px solid var(--line-soft); border-radius: 12px;
  padding: 20px; background: var(--bg); min-height: 260px;
}
.rb-type-preview .rb-preview-label { font-weight: 700; font-size: 1.02rem; margin-bottom: 4px; }
.rb-type-preview .rb-preview-desc { font-size: .84rem; color: var(--ink-soft); line-height: 1.5; margin-bottom: 16px; }
.rb-type-preview .rb-preview-visual { height: 160px; display: flex; align-items: center; justify-content: center; }

.rb-type-group-title {
  text-transform: uppercase; font-size: .74rem; font-weight: 700; letter-spacing: .05em;
  color: var(--ink-soft); margin: 0 0 10px;
}
.rb-type-group { margin-bottom: 20px; }
.rb-type-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 12px; }
.rb-type-card {
  border: 1.5px solid var(--line-soft); border-radius: 12px; padding: 16px 12px;
  background: var(--panel); text-align: center; cursor: pointer;
}
.rb-type-card:hover { border-color: var(--accent); }
.rb-type-card.selected { border-color: var(--accent); background: #e7f4f4; }
.rb-type-card.disabled { cursor: not-allowed; opacity: .5; }
.rb-type-card.disabled:hover { border-color: var(--line-soft); }
.rb-type-card i { font-size: 1.7rem; color: var(--accent); margin-bottom: 8px; display: block; }
.rb-type-card.disabled i { color: var(--ink-soft); }
.rb-type-card .rb-type-card-label { font-weight: 700; font-size: .84rem; }

/* Mini-anteprime CSS del riquadro fisso (Passo 1) */
.rb-mini-bars { display: flex; align-items: flex-end; gap: 10px; height: 100%; }
.rb-mini-bars > span { width: 26px; border-radius: 6px 6px 2px 2px; background: linear-gradient(180deg, var(--accent), var(--accent-dark)); }
.rb-mini-pie {
  width: 130px; height: 130px; border-radius: 50%; margin: auto;
  background: conic-gradient(var(--accent) 0 40%, var(--accent-dark) 40% 65%, #7fb8bc 65% 85%, var(--line) 85% 100%);
}
.rb-mini-gauge {
  width: 200px; height: 100px; border-radius: 200px 200px 0 0; position: relative; margin: auto;
  background: conic-gradient(from 270deg at 50% 100%, var(--accent) 0 65%, var(--line) 65% 100%);
}
.rb-mini-gauge span {
  position: absolute; left: 50%; bottom: 4px; transform: translateX(-50%);
  font-weight: 800; font-size: 1.4rem; color: var(--ink);
}
.rb-mini-kpi { font-size: 2.6rem; font-weight: 800; color: var(--accent-dark); font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; }
.rb-mini-table, .rb-mini-pivot { width: 100%; font-size: .74rem; border-collapse: collapse; }
.rb-mini-table td, .rb-mini-pivot td { border: 1px solid var(--line); padding: 5px 8px; }
.rb-mini-table tr:first-child td, .rb-mini-pivot tr:first-child td { background: var(--bg); font-weight: 700; }
.rb-mini-pivot tr:first-child td:first-child { background: var(--panel); }
.rb-mini-heatmap { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; width: 150px; height: 150px; margin: auto; }
.rb-mini-heatmap span { border-radius: 4px; }

/* ── Passo 2 — Dataset e campi ────────────────────────────── */
.rb-workspace { display: grid; grid-template-columns: 280px 1fr; gap: 18px; align-items: start; }
.rb-catalog {
  border: 1px solid var(--line-soft); border-radius: 12px; padding: 16px;
  background: var(--panel); max-height: 720px; overflow: auto;
}
.rb-catalog-group { margin-bottom: 14px; }
.rb-catalog-group-title {
  font-size: .72rem; text-transform: uppercase; font-weight: 700; color: var(--ink-soft);
  letter-spacing: .04em; margin-bottom: 6px;
}
.rb-field {
  padding: 8px 10px; border: 1px solid transparent; border-radius: 8px; cursor: grab;
  display: flex; justify-content: space-between; align-items: center; gap: 8px;
  font-size: .84rem; margin-bottom: 3px; background: var(--panel);
}
.rb-field:hover { background: #f0f7f7; border-color: var(--line-soft); }
.rb-field.used { opacity: .4; cursor: not-allowed; }
.rb-field .rb-field-hint { color: var(--ink-soft); font-size: .7rem; white-space: nowrap; }
.rb-field .rb-field-risk { color: var(--warn); margin-left: 4px; }

.rb-validation-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-bottom: 16px; }
.rb-validation-box { border: 1px solid var(--line-soft); border-radius: 10px; padding: 11px 13px; }
.rb-validation-box b { display: block; font-size: .84rem; margin-bottom: 2px; }
.rb-validation-box span { font-size: .76rem; color: var(--ink-soft); }
.rb-validation-box.ok b { color: #1f8a52; }
.rb-validation-box.warn b { color: var(--warn); }
.rb-validation-box.err b { color: var(--bad); }

.rb-slot-card { border: 1px solid var(--line-soft); border-radius: 11px; margin-bottom: 12px; overflow: hidden; }
.rb-slot-head {
  padding: 10px 14px; background: #fafbfb; border-bottom: 1px solid var(--line-soft);
  display: flex; justify-content: space-between; align-items: center;
}
.rb-slot-head strong { font-size: .86rem; }
.rb-slot-head span { font-size: .74rem; color: var(--ink-soft); }
.rb-dropzone {
  min-height: 52px; margin: 12px 14px; border: 2px dashed var(--line); border-radius: 9px;
  padding: 8px; display: flex; gap: 8px; flex-wrap: wrap; align-content: flex-start;
}
.rb-dropzone.rb-dragover { border-color: var(--accent); background: #eef7f7; }
.rb-dropzone:empty::before { content: attr(data-placeholder); color: #aab3b5; font-size: .8rem; margin: auto; }
.rb-chip {
  background: #eef4f4; border: 1px solid var(--line-soft); border-radius: 999px;
  padding: 6px 6px 6px 12px; font-size: .78rem; display: inline-flex; align-items: center; gap: 6px;
}
.rb-chip.measure { background: #e7f5ee; border-color: #bfe4d1; }
.rb-chip select { border: none; background: transparent; font-size: .72rem; font-weight: 700; color: inherit; }
.rb-chip .rb-chip-x {
  cursor: pointer; color: var(--ink-soft); font-weight: 800; width: 18px; height: 18px;
  border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
}
.rb-chip .rb-chip-x:hover { background: rgba(0,0,0,.08); }

.rb-error-card ul { margin: 0; padding-left: 18px; font-size: .84rem; color: var(--bad); }
.rb-error-card ul li.rb-warn-item { color: var(--warn); }
.rb-error-card ul li { margin-bottom: 4px; }

/* ── Passo 3 — Filtri ─────────────────────────────────────── */
.rb-filter-row { display: grid; grid-template-columns: 1.1fr 1.3fr 1.5fr auto auto; gap: 10px; align-items: center; padding: 12px 0; border-bottom: 1px solid var(--line-soft); }
.rb-filter-row:last-child { border-bottom: none; }
.rb-filter-mode-pill { border: none; border-radius: 999px; padding: 6px 12px; font-size: .72rem; font-weight: 800; cursor: pointer; white-space: nowrap; }
.rb-filter-mode-pill.fisso { background: var(--warn-bg); color: var(--warn); }
.rb-filter-mode-pill.aperto { background: #e7f5ee; color: #1f8a52; }
.rb-filter-extra { grid-column: 1 / -1; display: flex; gap: 14px; align-items: center; flex-wrap: wrap; padding-top: 4px; }
.rb-filter-extra label { font-size: .78rem; color: var(--ink-soft); display: flex; align-items: center; gap: 6px; }
.rb-filter-op-group { display: flex; gap: 6px; align-items: center; }
.rb-filter-op-group .rb-filter-gran { flex: 0 0 118px; }
.rb-filter-value-group { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.rb-filter-input-mode { flex: 0 0 100px; }

/* Modalità 'guidato' (§7bis): input + suggerimenti filtrati per sottostringa,
   mano a mano che l'utente digita — stessa ombra dei menu a tendina già
   definita per dropdown di riga (§3 CLAUDE.md). */
.rb-filter-guidato-wrap { position: relative; flex: 1 1 160px; min-width: 140px; }
.rb-filter-suggest-list {
  position: absolute; top: 100%; left: 0; right: 0; z-index: 20; margin: 4px 0 0; padding: 4px 0;
  list-style: none; background: var(--panel); border: 1px solid var(--line); border-radius: 8px;
  box-shadow: 0 8px 28px rgba(15, 42, 46, .2); max-height: 220px; overflow-y: auto;
}
.rb-filter-suggest-list.hidden { display: none; }
.rb-filter-suggest-list li { padding: 7px 12px; font-size: .84rem; color: var(--ink); cursor: pointer; }
.rb-filter-suggest-list li:hover { background: #f6fafa; }
.rb-filter-truncated { color: var(--warn); font-size: .74rem; }

/* ── Passo 4 — Anteprima e salvataggio ────────────────────── */
.rb-banner { padding: 13px 18px; border-radius: 10px; margin-bottom: 18px; font-weight: 700; display: flex; align-items: center; gap: 10px; font-size: .9rem; }
.rb-banner.ok { background: #e7f5ee; color: #1f8a52; }
.rb-banner.err { background: var(--bad-bg); color: var(--bad); }
.rb-tabs { display: flex; gap: 6px; padding: 0 20px; border-bottom: 1px solid var(--line-soft); }
.rb-tab { padding: 12px 6px; font-size: .84rem; font-weight: 700; color: var(--ink-soft); cursor: pointer; border-bottom: 2px solid transparent; margin-right: 16px; }
.rb-tab.active { color: var(--accent); border-color: var(--accent); }
.rb-json-view { background: #1f2a2e; color: #e7f0ef; padding: 16px; border-radius: 10px; font-size: .78rem; white-space: pre-wrap; max-height: 460px; overflow: auto; margin: 0; }
.rb-kpi-hero { text-align: center; padding: 46px 0; }
.rb-kpi-hero .value { font-size: 2.9rem; font-weight: 800; color: var(--accent-dark); font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; }
.rb-kpi-hero .label { font-size: .8rem; text-transform: uppercase; letter-spacing: .05em; color: var(--ink-soft); margin-top: 8px; }
.rb-gauge-wrap { display: flex; justify-content: center; padding: 24px 0; }
.rb-preview-note { padding: 11px 14px; border-radius: 9px; background: #e8eef8; border: 1px solid #c5d4ee; color: #1d4ed8; font-size: .82rem; margin-bottom: 14px; }

@media (max-width: 960px) {
  .rb-type-layout { grid-template-columns: 1fr; }
  .rb-type-preview { position: static; }
  .rb-workspace { grid-template-columns: 1fr; }
  .rb-validation-row { grid-template-columns: 1fr; }
  .rb-filter-row { grid-template-columns: 1fr; }
}

@media (max-width: 760px) {
  .rb-stepper { flex-wrap: wrap; }
  .rb-step-btn { flex: 1 1 calc(50% - 5px); }
}

@media (max-width: 620px) {
  .rb-stepper { flex-direction: column; }
  .rb-step-btn { flex: 1 1 auto; }
}

/* ============================================================
   Dashboard Builder — righe/colonne + drag&drop widget (Fase 6)
   ============================================================ */
.db-layout { display: grid; grid-template-columns: 1fr 280px; gap: 18px; align-items: start; }
.db-catalog { position: sticky; top: 14px; }

.db-row-add { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 16px; }

.db-row { border: 1px solid var(--line-soft); border-radius: 11px; margin-bottom: 14px; overflow: hidden; }
.db-row-toolbar {
  padding: 8px 12px; background: #fafbfb; border-bottom: 1px solid var(--line-soft);
  display: flex; justify-content: space-between; align-items: center;
}
.db-row-label { font-size: .78rem; font-weight: 700; color: var(--ink-soft); }
.db-row-actions { display: flex; gap: 4px; }
.db-row-grid { display: grid; gap: 12px; padding: 12px; }

.db-placeholder {
  border: 2px dashed var(--line); border-radius: 10px; min-height: 96px;
  display: flex; align-items: center; justify-content: center; padding: 10px;
  color: #aab3b5; font-size: .82rem; text-align: center;
}
.db-placeholder::before { content: attr(data-ph); }
.db-placeholder.over { border-color: var(--accent); background: #eef7f7; color: var(--accent); }

.db-placed {
  border: 1px solid var(--line-soft); border-radius: 10px; padding: 12px 14px;
  position: relative; background: var(--panel); min-height: 96px;
}
.db-placed-actions { position: absolute; top: 8px; right: 8px; display: flex; gap: 4px; }
.db-placed-icon {
  width: 24px; height: 24px; border-radius: 6px; display: inline-flex; align-items: center; justify-content: center;
  color: var(--ink-soft); cursor: pointer; font-size: .82rem;
}
.db-placed-icon:hover { background: var(--bg); color: var(--ink); text-decoration: none; }
.db-placed-title { font-weight: 700; font-size: .86rem; padding-right: 52px; }
.db-placed-type { font-size: .72rem; color: var(--ink-soft); text-transform: uppercase; letter-spacing: .04em; margin-top: 4px; }

.db-avail-card {
  border: 1px solid var(--line); border-radius: 9px; padding: 10px 12px; margin-bottom: 8px;
  cursor: grab; background: var(--panel);
}
.db-avail-card:hover { border-color: var(--accent); background: #f6fafa; }
.db-avail-title { font-weight: 700; font-size: .84rem; }
.db-avail-type { font-size: .72rem; color: var(--ink-soft); text-transform: uppercase; letter-spacing: .04em; margin-top: 2px; }

@media (max-width: 960px) {
  .db-layout { grid-template-columns: 1fr; }
  .db-catalog { position: static; }
}

/* ── Filtri dashboard (§8, Fase 7) — stessa struttura a riga dei filtri
   del Report Builder (.rb-filter-row), namespace db- per coerenza con il
   resto del Dashboard Builder ────────────────────────────────────────── */
.db-filter-row {
  display: grid; grid-template-columns: auto 1.2fr auto 1.4fr auto; gap: 10px; align-items: center;
  padding: 12px 0; border-bottom: 1px solid var(--line-soft);
}
.db-filter-row:last-child { border-bottom: none; }
.db-filter-row-warn { background: var(--warn-bg); border-radius: 8px; padding-left: 10px; padding-right: 10px; }
.db-filter-move { display: flex; gap: 2px; }
.db-filter-mode-pill { border: none; border-radius: 999px; padding: 6px 12px; font-size: .72rem; font-weight: 800; cursor: pointer; white-space: nowrap; }
.db-filter-mode-pill.chiuso { background: var(--warn-bg); color: var(--warn); }
.db-filter-mode-pill.aperto { background: #e7f5ee; color: #1f8a52; }
.db-filter-value-group { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.db-filter-hint { grid-column: 1 / -1; font-size: .74rem; color: var(--ink-soft); }
.db-filter-row-warn .db-filter-hint { color: var(--warn); }

@media (max-width: 860px) {
  .db-filter-row { grid-template-columns: 1fr; }
}

/* ============================================================
   Dashboard Viewer — rendering finale + filtri sincronizzati (Fase 7)
   ============================================================ */
/* overflow:visible (contro l'.overflow:hidden di .pf-card): la lista
   suggerimenti del filtro 'guidato' deve poter uscire dal bordo del
   pannello invece di essere tagliata. */
.dv-filters-card { overflow: visible; }
.dv-filters-card .pf-card-body { padding: 16px 22px; }
.dv-filters-bar, #dvFiltersBar { display: flex; flex-wrap: wrap; gap: 16px; align-items: flex-end; }
#dvFiltersBar { display: flex; }
.dv-filter-field { display: flex; flex-direction: column; gap: 4px; min-width: 160px; }
/* .rb-filter-guidato-wrap ha 'flex: 1 1 160px' (§ Passo 3 Filtri, per il
   layout a riga del Report Builder) — qui .dv-filter-field è invece una
   colonna, quindi quel flex-basis verrebbe letto come altezza e gonfierebbe
   il campo (e l'intero pannello) a 160px. Si azzera per tornare all'altezza
   naturale dell'input. */
.dv-filter-field .rb-filter-guidato-wrap { flex: 0 0 auto; }
.dv-filter-label { font-size: .78rem; font-weight: 600; color: var(--ink-soft); }
.dv-filter-hint { font-weight: 400; color: #aab3b5; }
.dv-filter-range { display: flex; gap: 6px; align-items: center; }
.dv-filter-chip {
  display: inline-flex; align-items: center; gap: 6px; align-self: center;
  background: var(--warn-bg); color: var(--warn); border-radius: 999px;
  padding: 7px 14px; font-size: .8rem; font-weight: 600;
}
.dv-filter-chip strong { color: var(--ink); font-weight: 700; }

.dv-widget-card { min-height: 140px; }
.dv-widget-type { font-size: .72rem; color: var(--ink-soft); text-transform: uppercase; letter-spacing: .04em; }
.dv-widget-actions { display: flex; align-items: center; gap: 10px; }
.dv-widget-export-btn { display: inline-flex; align-items: center; justify-content: center; padding: 4px 8px; }

@media (max-width: 960px) {
  .db-row-grid { grid-template-columns: 1fr !important; }
  .dv-filter-field { min-width: 0; flex: 1 1 100%; }
}

/* ============================================================
   Condivisione — dashboard/report (Fase 8)
   ============================================================ */
.shr-toggle { display: flex; gap: 8px; margin-bottom: 16px; }
.shr-toggle-btn {
  flex: 1; border: 1px solid var(--line); border-radius: 9px; background: var(--panel);
  padding: 10px 14px; font-size: .86rem; font-weight: 700; color: var(--ink-soft); cursor: pointer;
  display: flex; align-items: center; justify-content: center; gap: 8px;
}
.shr-toggle-btn.active { border-color: var(--accent); background: #e7f4f4; color: var(--accent-dark); }

.shr-groups { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.shr-group-title { font-size: .78rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--ink-soft); margin-bottom: 8px; }
.shr-list { border: 1px solid var(--line-soft); border-radius: 10px; max-height: 240px; overflow-y: auto; }
.shr-item {
  display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-bottom: 1px solid var(--line-soft);
}
.shr-item:last-child { border-bottom: none; }
.shr-item-name { flex: 1; font-size: .86rem; }
.shr-item-level { font-size: .78rem; padding: 4px 8px; border-radius: 6px; border: 1px solid var(--line); }
.shr-empty { padding: 14px; text-align: center; color: #aab3b5; font-size: .82rem; }
.shr-open-note { font-size: .78rem; color: var(--ink-soft); margin-top: 10px; }

.shr-readonly-note {
  display: flex; align-items: center; gap: 8px; padding: 11px 14px; border-radius: 9px;
  background: #e8eef8; border: 1px solid #c5d4ee; color: #1d4ed8; font-size: .84rem;
}

.shr-badge {
  display: inline-flex; align-items: center; gap: 5px; border-radius: 999px;
  padding: 3px 10px; font-size: .7rem; font-weight: 700; white-space: nowrap;
}
.shr-badge-lettura { color: #2a5fb0; background: #e8eef8; border: 1px solid #c5d4ee; }
.shr-badge-modifica { color: var(--accent-dark); background: #e7f4f4; border: 1px solid rgba(19,138,146,.25); }

@media (max-width: 760px) {
  .shr-groups { grid-template-columns: 1fr; }
}

/* ============================================================
   Dataset da query SQL — editor + navigatore tabelle/colonne (§13)
   ============================================================ */
#querySqlEditor + .CodeMirror {
  border: 1px solid var(--line); border-radius: 9px; font-size: .86rem;
}
#querySqlEditor + .CodeMirror.CodeMirror-focused {
  border-color: var(--accent); box-shadow: 0 0 0 .2rem rgba(19,138,146,.2);
}

.sql-nav {
  border: 1px solid var(--line-soft); border-radius: 10px; max-height: 340px; overflow-y: auto;
}
.sql-nav-tabella { border-bottom: 1px solid var(--line-soft); }
.sql-nav-tabella:last-child { border-bottom: none; }
.sql-nav-tabella summary {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 8px 10px; cursor: pointer; list-style: none; font-size: .84rem;
}
.sql-nav-tabella summary::-webkit-details-marker { display: none; }
.sql-nav-tabella[open] summary { background: #f6fafa; }
.sql-nav-insert { padding: 2px 7px; }
.sql-nav-colonne { padding: 2px 0 6px; }
.sql-nav-colonna {
  display: flex; align-items: center; justify-content: space-between; gap: 8px; width: 100%;
  border: 0; background: none; padding: 5px 10px 5px 22px; font-size: .8rem; text-align: left; cursor: pointer;
}
.sql-nav-colonna:hover { background: #f6fafa; }

/* ============================================================
   Player del tour guidato (schermate salvate) — riproduzione
   lato utente finale, stessa logica dell'anteprima nell'editor
   admin: evidenzia gli elementi sulla schermata catturata, non
   sulla pagina live.
   ============================================================ */
.pf-tour-player-scrim {
  position: fixed;
  inset: 0;
  z-index: 1200;
  background: rgba(15, 42, 46, .55);
  display: flex;
  flex-direction: column;
  padding: 18px;
}
.pf-tour-player-bar {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding: 0 4px 12px;
  flex-shrink: 0;
}
.pf-tour-player-close {
  background: rgba(255, 255, 255, .15);
  border: none;
  color: #fff;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 1.1rem;
}
.pf-tour-player-close:hover { background: rgba(255, 255, 255, .28); }
.pf-tour-player-frame-wrap {
  flex: 1;
  min-height: 0;
  background: var(--panel);
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 24px 60px rgba(0, 0, 0, .35);
}
.pf-tour-player-frame-wrap iframe {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}
@media (max-width: 620px) {
  .pf-tour-player-scrim { padding: 8px; }
}