/* ═══════════════════════════════════════════════════════════════════════════
   Monitor SMM — design system
   ───────────────────────────────────────────────────────────────────────────
   Ispirato alla dashboard "Blanca Studio" di una collega: cornice colorata,
   sidebar scura a riquadro, area crema, titoli in Space Grotesk, etichette
   maiuscole spaziate, riquadri colorati con disegni a tratto, pulsante
   principale con ombra gialla netta.

   Caricato DOPO styles.css. Due intensità:
   - stile pieno (.ds-scope): Dashboard, Piano editoriale (Agenda e Piano di
     pubblicazione) e finestra di scrittura del post;
   - solo contorno: Analytics e Impostazioni ricevono
     cornice, navigazione, intestazione e l'aspetto dei riquadri contenitori
     (.panel, .summary-grid, details.site-manager). Tabelle, grafici, KPI,
     form e pulsanti interni NON sono ridefiniti qui.

   Regola: i nomi esistenti non si ridefiniscono, salvo i contenitori elencati
   sopra; tutto il resto usa classi ds-* o sta sotto .ds-scope. I token hanno
   prefisso --ds-: le variabili di styles.css (--ink, --line…) restano quelle.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ─── Font (in locale, @fontsource 5.3.0, SIL Open Font License) ────────── */

@font-face {
  font-family: "Space Grotesk";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("fonts/space-grotesk-latin-500-normal.woff2") format("woff2");
}

@font-face {
  font-family: "Space Grotesk";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("fonts/space-grotesk-latin-700-normal.woff2") format("woff2");
}

@font-face {
  font-family: "DM Sans";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/dm-sans-latin-400-normal.woff2") format("woff2");
}

@font-face {
  font-family: "DM Sans";
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/dm-sans-latin-400-italic.woff2") format("woff2");
}

@font-face {
  font-family: "DM Sans";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("fonts/dm-sans-latin-500-normal.woff2") format("woff2");
}

@font-face {
  font-family: "DM Sans";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("fonts/dm-sans-latin-700-normal.woff2") format("woff2");
}

/* ─── Token ─────────────────────────────────────────────────────────────── */

:root {
  /* Colori base */
  --ds-frame: #44b8ad;      /* cornice di pagina, avatar */
  --ds-accent: #1f7a72;     /* etichette maiuscole: 4.9:1 sul crema */
  --ds-plum: #2a1b4e;       /* sidebar, pulsante principale */
  --ds-ink: #211a3d;        /* titoli e testo delle parti nuove */
  --ds-muted: #6e6883;      /* sottotitoli, meta */
  --ds-cream: #fbf9f5;      /* area principale */
  --ds-surface: #ffffff;    /* card */
  --ds-line: #ece6f1;       /* bordi */
  --ds-yellow: #f7e15a;     /* voce attiva, ombra del pulsante principale */
  --ds-purple: #5b3cc4;     /* link, pulsanti secondari */
  --ds-lavender: #eee6fb;   /* riquadri icona, select a pillola */

  /* Riquadri colorati: fondo e tratto del disegno */
  --ds-coral: #ff7b59;
  --ds-coral-art: #d9502e;
  --ds-sun: #fde36b;
  --ds-sun-art: #c9a616;
  --ds-sky: #86d5ee;
  --ds-sky-art: #3a9cbe;

  /* Tinte tenui per i riquadri icona */
  --ds-coral-soft: #ffe3da;
  --ds-sun-soft: #fff4c2;
  --ds-mint-soft: #ddf5ee;
  --ds-sky-soft: #dff3fb;

  /* Forma */
  --ds-r-frame: 24px;
  --ds-r-card: 18px;
  --ds-r-control: 12px;
  --ds-r-pill: 999px;
  --ds-shadow-card: 0 1px 0 rgba(33, 26, 61, 0.03), 0 10px 28px rgba(33, 26, 61, 0.05);
  --ds-shadow-hard: 4px 4px 0 var(--ds-yellow);

  /* Tipografia */
  --ds-font-display: "Space Grotesk", Arial, sans-serif;
  --ds-font-body: "DM Sans", Arial, sans-serif;
}

/* ─── Base ──────────────────────────────────────────────────────────────── */

body {
  background: var(--ds-frame);
  font-family: var(--ds-font-body);
}

/* Lo sprite delle icone sta nel DOM ma non occupa spazio. */
.ds-sprite {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

.ds-icon {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  vertical-align: middle;
}

/* ─── Guscio: cornice e sidebar ─────────────────────────────────────────── */

.app-shell {
  grid-template-columns: 264px minmax(0, 1fr);
  gap: 16px;
  padding: 16px;
}

.sidebar {
  top: 16px;
  height: calc(100vh - 32px);
  gap: 22px;
  padding: 26px 18px 20px;
  border-radius: var(--ds-r-frame);
  background: var(--ds-plum);
}

.brand img { border-radius: 12px; }
.brand strong { font-family: var(--ds-font-display); font-size: 1.08rem; color: #fff; letter-spacing: 0.01em; }
.brand span:last-child { color: #a79fca; font-size: 0.8rem; }

.ds-side-label,
.user-filter-panel > strong {
  margin: 0 0 -12px;
  padding: 0 12px;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #9d93c4;
}

.user-filter-panel > strong { margin: 0; padding: 0 4px; }

.nav-list { gap: 4px; }

.nav-list a {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border-radius: var(--ds-r-control);
  color: #e4def7;
  font-size: 0.95rem;
  font-weight: 600;
}

.nav-list a:hover { background: rgba(255, 255, 255, 0.07); color: #fff; }

/* Voce attiva: pillola gialla, come nel mockup. */
.nav-list a.active:not(.nav-sub) { background: var(--ds-yellow); color: var(--ds-plum); }

/* Voce che apre una pagina fuori dall'app (Guida Social ADS): freccia piccola
   in fondo alla riga. */
.nav-list a .nav-external { width: 14px; height: 14px; margin-left: auto; opacity: 0.6; }

/* Sotto-voci: niente icona e mai gialle, per non impilare due pillole gialle
   quando sono accese sia la voce madre sia la sotto-voce. */
.nav-list a.nav-sub {
  position: relative;
  padding: 7px 12px 7px 46px;
  color: #b9b0dc;
  font-size: 0.86rem;
  font-weight: 500;
}

.nav-list a.nav-sub.active { background: rgba(255, 255, 255, 0.08); color: #fff; }

/* Sezione con sottopagine: voce madre + freccia della tendina (la freccia
   esiste solo su telefono, vedi il blocco max-width 760px). */
.nav-group { position: relative; }
.nav-subs { display: grid; gap: 4px; }
.nav-list .nav-expand { display: none; }

.nav-list a.nav-sub.active::before {
  content: "";
  position: absolute;
  left: 30px;
  top: 50%;
  width: 6px;
  height: 6px;
  margin-top: -3px;
  border-radius: 50%;
  background: var(--ds-yellow);
}

.user-filter-btn {
  border-color: rgba(255, 255, 255, 0.12);
  border-radius: 10px;
  color: #e4def7;
  font-weight: 500;
}

.user-filter-btn.active {
  border-color: rgba(247, 225, 90, 0.55);
  background: rgba(247, 225, 90, 0.14);
  color: var(--ds-yellow);
}

/* Barra arcobaleno del mockup, sopra "Ultimo sync". */
.ds-rainbow {
  flex-shrink: 0;
  width: 96px;
  height: 6px;
  margin: auto 0 -8px 4px;
  border-radius: var(--ds-r-pill);
  background: linear-gradient(90deg, #ff7b59, #fde36b, #9ee6d2, #44b8ad, #86d5ee, #c3c8f5, #f9c6da);
}

.sync-panel {
  margin-top: 0;
  border-color: rgba(255, 255, 255, 0.12);
  border-radius: 14px;
}

.logout-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 0;
  padding: 10px 14px;
  border-color: rgba(255, 255, 255, 0.18);
  border-radius: var(--ds-r-control);
  color: #d6cff0;
  font-size: 0.88rem;
  font-weight: 600;
}

.logout-btn:hover { border-color: rgba(255, 255, 255, 0.4); background: rgba(255, 255, 255, 0.06); color: #fff; }
.logout-btn .ds-icon { width: 17px; height: 17px; }

/* ─── Guscio: area principale, barra, intestazione, filtri ──────────────── */

.main {
  min-width: 0;
  min-height: calc(100vh - 32px);
  padding: 0;
  border-radius: var(--ds-r-frame);
  background: var(--ds-cream);
}

.ds-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 22px 44px;
  border-bottom: 1px solid var(--ds-line);
}

.ds-crumbs {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  color: var(--ds-ink);
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.ds-crumbs-sep { color: var(--ds-muted); font-weight: 500; }

.ds-topbar-right {
  display: flex;
  align-items: center;
  gap: 14px;
  color: var(--ds-muted);
  font-size: 0.88rem;
}

/* Iniziale in prugna: il bianco sul verde acqua avrebbe contrasto 2.4:1. */
.ds-user {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--ds-frame);
  color: var(--ds-plum);
  font-family: var(--ds-font-display);
  font-weight: 700;
}

.ds-user:empty { display: none; }

/* ⓘ dei riquadri di Analytics; la spiegazione e .metric-info-pop. */
.metric-info {
  display: inline-grid;
  place-items: center;
  width: 16px;
  height: 16px;
  margin-left: 3px;
  padding: 0;
  border: 1px solid currentColor;
  border-radius: 50%;
  background: none;
  color: var(--ds-muted);
  font: italic 700 10px/1 Georgia, serif;
  vertical-align: 1px;
  cursor: help;
}

.metric-info:hover,
.metric-info:focus-visible,
.metric-info.is-open { color: var(--ds-plum); }

.metric-info:focus-visible { outline: 2px solid var(--ds-purple); outline-offset: 2px; }

/* Fissa sullo schermo accanto alla ⓘ (showMetricInfo la tiene dentro i
   bordi): larga anche sui riquadri stretti e sopra quelli sotto. */
.metric-info-pop {
  position: fixed;
  z-index: 60;
  width: min(280px, calc(100vw - 32px));
  padding: 10px 12px;
  border-radius: 10px;
  background: var(--ds-ink);
  box-shadow: 0 10px 24px rgba(33, 26, 61, 0.22);
  color: #fff;
  font: 500 0.8rem/1.45 var(--ds-font-body);
  pointer-events: none;
}

.metric-info-pop[hidden] { display: none; }

/* Sotto le Persone raggiunte: che dato e (persone uniche come Meta, stima o somma dei giorni). */
.metric-tile .metric-note { display: block; margin-top: 4px; color: var(--ds-muted); font-size: 0.74rem; font-weight: 500; line-height: 1.3; }

/* Campanella dei feedback dei clienti, accanto all'avatar. */
.ds-bell-wrap { position: relative; }

.ds-bell {
  position: relative;
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  padding: 0;
  border: 1px solid var(--ds-line);
  border-radius: 50%;
  background: var(--ds-surface);
  color: var(--ds-ink);
  cursor: pointer;
}

.ds-bell:hover { border-color: #cfc6dd; }
.ds-bell:focus-visible { outline: 2px solid var(--ds-purple); outline-offset: 2px; }
.ds-bell .ds-icon { width: 18px; height: 18px; }

.ds-bell-count {
  position: absolute;
  top: -5px;
  right: -6px;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: var(--ds-r-pill);
  background: #d9502e;
  color: #fff;
  font-size: 0.68rem;
  font-weight: 700;
  line-height: 18px;
  text-align: center;
}

.ds-bell-panel {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  z-index: 400;
  width: min(380px, calc(100vw - 32px));
  max-height: min(520px, 70vh);
  overflow-y: auto;
  padding: 14px;
  border: 1px solid var(--ds-line);
  border-radius: var(--ds-r-card);
  background: var(--ds-surface);
  box-shadow: 0 18px 48px rgba(33, 26, 61, 0.18);
  color: var(--ds-ink);
  text-align: left;
}

.ds-bell-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 10px; }
.ds-bell-head strong { font-family: var(--ds-font-display); font-size: 1rem; }
.ds-bell-head .ds-link { font-size: 0.8rem; }
.ds-bell-list { display: flex; flex-direction: column; gap: 6px; }
.ds-bell-empty { margin: 0; padding: 14px 4px; color: var(--ds-muted); font-size: 0.86rem; }

/* Un feedback (campanella e Dashboard): cliente, canali, giorno del post e
   testo. Il clic apre il PED del mese sul cliente. */
.fb-note {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--ds-line);
  border-radius: 14px;
  background: var(--ds-surface);
  color: var(--ds-ink);
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.fb-note + .fb-note { margin-top: 8px; }
.ds-bell-list .fb-note + .fb-note { margin-top: 0; }
.fb-note:hover { border-color: #cfc6dd; }
.fb-note.is-new { border-color: #f3c9bb; background: #fff8f5; }
.fb-note-body { display: flex; flex: 1; flex-direction: column; gap: 3px; min-width: 0; }
.fb-note-head { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; }
.fb-note-head strong { font-size: 0.9rem; }
.fb-note-post { color: var(--ds-muted); font-size: 0.78rem; }
.fb-note-text { color: var(--ds-ink); font-size: 0.86rem; line-height: 1.45; overflow-wrap: anywhere; }
.fb-note-when { color: var(--ds-muted); font-size: 0.76rem; }
.fb-note.is-new .fb-note-when { color: #b23a1e; font-weight: 600; }
.fb-note.is-compact { padding: 8px 10px; }
.fb-note.is-compact .fb-note-text { font-size: 0.82rem; }

/* Pulsante ☰, chiusura del pannello e sfondo scuro: esistono solo su
   telefono (vedi il blocco max-width 760px). Il selettore doppio serve a
   battere .ds-icon-btn, definito piu avanti con display: inline-grid. */
.ds-topbar .ds-menu-btn,
.sidebar .ds-drawer-close,
.ds-nav-backdrop { display: none; }

.ds-page { padding: 34px 44px 52px; }

.ds-hero {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px 28px;
  margin-bottom: 26px;
}

.ds-hero-text { min-width: 0; }

.ds-eyebrow,
.ds-kicker {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 10px;
  color: var(--ds-accent);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.ds-eyebrow .ds-icon { width: 17px; height: 17px; color: var(--ds-purple); stroke-width: 2.4; }

.ds-title {
  margin: 0;
  color: var(--ds-ink);
  font-family: var(--ds-font-display);
  font-size: clamp(2rem, 3.4vw, 3rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.05;
}

.ds-subtitle { max-width: 720px; margin: 10px 0 0; color: var(--ds-muted); font-size: 0.98rem; }

.ds-hero-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  margin-top: 18px;
}

/* Saluto della Dashboard (renderGreeting): nome, momento della giornata e
   frase del giorno. Solo da 901px in su: su telefono e tablet stretti la
   testata resta compatta. */
.ds-greeting { display: none; }

@media (min-width: 901px) {
  body.view-dashboard .ds-greeting {
    display: flex;
    align-items: center;
    gap: 14px;
    max-width: 380px;
    padding: 14px 18px 14px 14px;
    border: 1px solid var(--ds-line);
    border-radius: 16px;
    background: var(--ds-surface);
    box-shadow: var(--ds-shadow-card);
  }
}

.ds-greeting-icon {
  display: grid;
  flex-shrink: 0;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--ds-sun-soft);
  color: #957600;
}

.ds-greeting-icon .ds-icon { width: 22px; height: 22px; }
.ds-greeting[data-moment="afternoon"] .ds-greeting-icon { background: var(--ds-sky-soft); color: #2a7fa0; }
.ds-greeting[data-moment="evening"] .ds-greeting-icon { background: var(--ds-coral-soft); color: var(--ds-coral-art); }
.ds-greeting[data-moment="night"] .ds-greeting-icon { background: var(--ds-lavender); color: var(--ds-purple); }

.ds-greeting-text { min-width: 0; }

.ds-greeting-hello {
  margin: 0;
  color: var(--ds-ink);
  font-family: var(--ds-font-display);
  font-size: 1.05rem;
  font-weight: 700;
}

.ds-greeting-quote { margin: 3px 0 0; color: var(--ds-muted); font-size: 0.86rem; line-height: 1.4; }

.ds-filters {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 22px;
  margin: 0 0 22px;
}

.ds-filter { display: flex; align-items: center; gap: 10px; }
.ds-filter-label { color: var(--ds-muted); font-size: 0.85rem; font-weight: 600; }
.ds-filter-refresh { margin-left: auto; }

.ds-filters select,
.ds-filters .searchable-select-trigger,
.ds-filters .custom-date-range input[type="date"] {
  min-height: 42px;
  border-color: var(--ds-line);
  border-radius: var(--ds-r-control);
  background-color: var(--ds-surface);
  color: var(--ds-ink);
  font-weight: 600;
}

.ds-filters .clear-filter-btn { min-height: 38px; border-radius: var(--ds-r-pill); border-width: 1px; }

/* Righe filtri e azioni dell'intestazione: visibili solo dove servono. In
   Dashboard il filtro Periodo non serve (segnalazioni e opportunita sempre
   sugli ultimi 30 giorni): sparisce la riga, e con lei Aggiorna. */
body.view-dashboard .ds-filters,
body.view-calendar-test .ds-filters,
body.view-calendar-plan .ds-filters,
body.view-settings .ds-filters { display: none; }
body:not(.view-analytics) .ds-filter--account { display: none; }
/* Azioni dell'intestazione solo dove servono: Crea report in Analytics,
   Nuovo post nel PED del mese, saluto in Dashboard (solo su desktop, vedi
   .ds-greeting). */
body:not(.view-analytics) #printButton { display: none; }
body:not(.view-calendar-test) #heroNewPost { display: none; }
/* Dove nessuna azione e visibile, via anche il contenitore: altrimenti il suo
   spazio resta fra il sottotitolo e il contenuto. */
body.view-calendar-plan .ds-hero-actions,
body.view-settings .ds-hero-actions { display: none; }

@media (max-width: 900px) {
  body.view-dashboard .ds-hero-actions { display: none; }
}

/* ─── Pulsanti ──────────────────────────────────────────────────────────── */

.ds-btn-primary,
.ds-btn-secondary,
.ds-btn-ghost,
.ds-btn-danger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 20px;
  border: 1px solid transparent;
  border-radius: var(--ds-r-control);
  font-family: var(--ds-font-body);
  font-size: 0.95rem;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: transform 0.12s, box-shadow 0.12s, background 0.12s, border-color 0.12s;
}

.ds-btn-primary { background: var(--ds-plum); color: #fff; box-shadow: var(--ds-shadow-hard); }
.ds-btn-primary:hover { opacity: 1; transform: translate(-1px, -1px); box-shadow: 5px 5px 0 var(--ds-yellow); }
.ds-btn-primary:active { transform: translate(2px, 2px); box-shadow: 2px 2px 0 var(--ds-yellow); }
.ds-btn-secondary { background: var(--ds-purple); color: #fff; }
.ds-btn-ghost { border-color: var(--ds-line); background: var(--ds-surface); color: var(--ds-ink); }
.ds-btn-ghost:hover { border-color: #cfc6dd; background: var(--ds-surface); }
.ds-btn-danger { border-color: #f2c9c4; background: var(--ds-surface); color: #c23a2e; }
.ds-btn-danger:hover { border-color: #c23a2e; opacity: 1; }
.ds-btn-sm { min-height: 38px; padding: 0 14px; font-size: 0.88rem; }

.ds-btn-primary .ds-icon,
.ds-btn-secondary .ds-icon,
.ds-btn-ghost .ds-icon,
.ds-btn-danger .ds-icon { width: 18px; height: 18px; }

.ds-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--ds-purple);
  font: inherit;
  font-size: 0.92rem;
  font-weight: 700;
  cursor: pointer;
}

.ds-link:hover { text-decoration: underline; }
.ds-link .ds-icon { width: 16px; height: 16px; }

.ds-icon-btn {
  display: inline-grid;
  place-items: center;
  width: 40px;
  min-height: 40px;
  padding: 0;
  border: 1px solid var(--ds-line);
  border-radius: var(--ds-r-control);
  background: var(--ds-surface);
  color: var(--ds-ink);
  cursor: pointer;
}

.ds-icon-btn:hover { border-color: #cfc6dd; }
.ds-icon-btn .ds-icon { width: 18px; height: 18px; }

/* ─── Contenitori delle viste interne (solo il riquadro, non il contenuto) ─ */

/* Solo .panel: in styles.css condivide la regola con .metric-tile, che deve
   restare identica. */
.panel {
  border-color: var(--ds-line);
  border-radius: var(--ds-r-card);
  box-shadow: var(--ds-shadow-card);
}

.summary-grid {
  border-color: var(--ds-line);
  border-radius: var(--ds-r-card);
  box-shadow: var(--ds-shadow-card);
}

.site-manager { border-color: var(--ds-line); border-radius: 14px; }

.panel-header h2 { font-family: var(--ds-font-display); letter-spacing: -0.01em; }

/* Le viste sono dentro .ds-page, che ha gia il suo margine. */
.cal-view { padding: 0; }

/* Per una collega l'intestazione interna di Impostazioni ripeteva il titolo:
   il suo testo ora e il sottotitolo dell'intestazione di pagina. */
#settings .panel-header.smm-only { display: none !important; }

/* ─── Componenti ────────────────────────────────────────────────────────── */

.ds-card {
  min-width: 0;
  padding: 22px 24px;
  border: 1px solid var(--ds-line);
  border-radius: var(--ds-r-card);
  background: var(--ds-surface);
  box-shadow: var(--ds-shadow-card);
}

.ds-card-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--ds-line);
}

.ds-card-head .ds-kicker { margin-bottom: 6px; }

.ds-card-title {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  color: var(--ds-ink);
  font-family: var(--ds-font-display);
  font-size: 1.35rem;
  font-weight: 700;
  letter-spacing: -0.01em;
}

.ds-card-sub { margin: 6px 0 0; color: var(--ds-muted); font-size: 0.88rem; }

.ds-count {
  display: inline-grid;
  place-items: center;
  min-width: 26px;
  height: 26px;
  padding: 0 9px;
  border-radius: var(--ds-r-pill);
  background: var(--ds-coral-soft);
  color: #b23a1e;
  font-family: var(--ds-font-body);
  font-size: 0.8rem;
  font-weight: 700;
}

.ds-count.is-muted { background: var(--ds-lavender); color: var(--ds-plum); }

.ds-list { display: flex; flex-direction: column; }

.ds-row {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
  padding: 12px 0;
  border-bottom: 1px solid var(--ds-line);
}

.ds-row:last-child { border-bottom: 0; }

.ds-row-icon {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: var(--ds-r-control);
  background: var(--ds-lavender);
  color: var(--ds-purple);
}

.ds-row-icon .ds-icon { width: 19px; height: 19px; }
.ds-row-icon.is-coral { background: var(--ds-coral-soft); color: var(--ds-coral-art); }
.ds-row-icon.is-sun { background: var(--ds-sun-soft); color: #957600; }
.ds-row-icon.is-mint { background: var(--ds-mint-soft); color: var(--ds-accent); }
.ds-row-icon.is-sky { background: var(--ds-sky-soft); color: #2a7fa0; }

.ds-row-title { margin: 0; color: var(--ds-ink); font-size: 0.95rem; font-weight: 700; }

/* Segnalazioni e opportunita raggruppate per cliente: nome come titolo, poi
   una voce per riga con tipo in grassetto, canale e dettaglio. */
.ds-row.ds-notice { align-items: start; }

.ds-notice-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin: 4px 0 0;
  padding: 0;
  list-style: none;
}

.ds-notice-list li {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 8px;
  color: var(--ds-muted);
  font-size: 0.85rem;
}

.ds-notice-list strong { color: var(--ds-ink); font-weight: 700; }
.ds-notice-list .platform-pill { font-size: 0.66rem; }
.ds-row-meta { margin: 2px 0 0; color: var(--ds-muted); font-size: 0.84rem; }

.ds-empty {
  margin: 0;
  padding: 18px;
  border: 1px dashed var(--ds-line);
  border-radius: 14px;
  background: #fdfcfa;
  color: var(--ds-muted);
  font-size: 0.9rem;
  text-align: center;
}

/* Iniziale del cliente: il carattere sta in data-initial, cosi non entra nel
   testo della riga (lettori di schermo, ricerche per nome). */
.ds-avatar {
  display: grid;
  flex-shrink: 0;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: var(--ds-r-control);
  background: var(--ds-av, #fcd86b);
  color: var(--ds-ink);
  font-family: var(--ds-font-display);
  font-size: 1rem;
  font-weight: 700;
}

.ds-avatar::before { content: attr(data-initial); }
.ds-avatar.is-sm { width: 28px; height: 28px; border-radius: 9px; font-size: 0.82rem; }

.ds-status-pill {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 5px 12px;
  border-radius: var(--ds-r-pill);
  background: var(--ds-lavender);
  color: var(--ds-plum);
  font-size: 0.8rem;
  font-weight: 700;
  white-space: nowrap;
}

.ds-status-pill::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--sc, #9ca3af);
}

/* Riquadri numerici colorati con disegno a tratto. */
.ds-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
  margin-bottom: 22px;
}

.ds-stat {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  min-height: 168px;
  padding: 24px 26px;
  overflow: hidden;
  border: 0;
  border-radius: var(--ds-r-card);
  box-shadow: 0 6px 0 rgba(33, 26, 61, 0.1);
  color: var(--ds-ink);
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: transform 0.12s, box-shadow 0.12s;
}

.ds-stat:hover { transform: translateY(-2px); box-shadow: 0 8px 0 rgba(33, 26, 61, 0.12); }
.ds-stat--coral { --art: var(--ds-coral-art); background: var(--ds-coral); }
.ds-stat--sun { --art: var(--ds-sun-art); background: var(--ds-sun); }
.ds-stat--sky { --art: var(--ds-sky-art); background: var(--ds-sky); }

.ds-stat-label { font-size: 0.74rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; }

.ds-stat-value {
  margin-top: 6px;
  font-family: var(--ds-font-display);
  font-size: 3.4rem;
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1;
}

.ds-stat-sub { position: relative; z-index: 1; max-width: 75%; font-size: 0.92rem; font-weight: 700; }

.ds-stat-art {
  position: absolute;
  right: 18px;
  bottom: 14px;
  width: 86px;
  height: 86px;
  fill: none;
  stroke: var(--art);
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
  pointer-events: none;
}

/* ─── Dashboard ─────────────────────────────────────────────────────────── */

.ds-dash-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
  align-items: start;
}

.ds-dash-grid .ds-span { grid-column: 1 / -1; }

#dashboardView #dashUserPrompt { margin-bottom: 18px; }

/* Segnalazioni e opportunita possono essere tante: scorrono dentro la card. */
#dashAlertList,
#dashOpportunityList { max-height: 380px; overflow-y: auto; }

.dash-up-date {
  display: grid;
  place-items: center;
  width: 40px;
  height: 44px;
  border-radius: var(--ds-r-control);
  background: var(--ds-lavender);
  color: var(--ds-plum);
  line-height: 1;
}

.dash-up-date strong { font-family: var(--ds-font-display); font-size: 1.1rem; }
.dash-up-date span { font-size: 0.66rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; }

/* Post di Programmazione: pulsanti che portano all'Agenda col post aperto. */
.dash-link {
  width: 100%;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.dash-link .ds-row-title,
.dash-link .ds-row-meta { display: block; }
.dash-post.dash-link:hover .ds-row-title { color: var(--ds-purple); }

/* ── Programmazione: stato del mese in una riga, post in griglia ── */
.dash-sched-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 12px 16px; }
.dash-month-switch { display: flex; gap: 6px; }

.dash-month-status {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 12px 28px;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--ds-line);
}

.dash-month-total { display: flex; align-items: baseline; gap: 8px; margin: 0; color: var(--ds-muted); font-size: 0.86rem; }
.dash-month-total strong { color: var(--ds-ink); font-family: var(--ds-font-display); font-size: 2rem; line-height: 1; }
.dash-month-progress .cal-summary-pct { margin: 6px 0 0; }

/* Gli stati su una riga propria: la barra ha sempre tutta la larghezza. */
.dash-month-statuses {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.dash-month-statuses li {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 11px;
  border-radius: var(--ds-r-pill);
  background: #f6f3fa;
  color: var(--ds-ink);
  font-size: 0.82rem;
}

.dash-month-statuses b { font-weight: 700; }

.dash-posts-title {
  margin: 18px 0 10px;
  color: var(--ds-accent);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.dash-posts-title span { color: var(--ds-muted); letter-spacing: 0.04em; }

.dash-posts {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 10px;
}

.dash-post {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  min-width: 0;
  padding: 10px 12px;
  border: 1px solid var(--ds-line);
  border-radius: 14px;
  background: #fcfbf8;
  transition: border-color 0.15s ease;
}

.dash-post:hover { border-color: var(--ds-frame); }
.dash-post-text { min-width: 0; }
.dash-post .ds-row-title { overflow: hidden; font-size: 0.92rem; text-overflow: ellipsis; white-space: nowrap; }

.dash-post-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 4px;
  overflow: hidden;
  color: var(--ds-muted);
  font-size: 0.8rem;
  white-space: nowrap;
}

.dash-post-meta .platform-pill { flex-shrink: 0; }

.dash-post-status { display: inline-flex; align-items: center; gap: 5px; color: var(--ds-ink); font-weight: 600; }

.dash-post-status::before {
  content: "";
  flex-shrink: 0;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--sc);
}

.dash-posts-more { margin-top: 12px; }

/* ─── PED per cliente: le bolle ─────────────────────────────────────────────
   Vista Clienti del PED del mese e I tuoi clienti in Dashboard. L'anello
   intorno all'iniziale e diviso nei 5 stadi (--ped-ring, da pedRing in app.js). */

.ped-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 16px;
  margin-bottom: 14px;
  color: var(--ds-muted);
  font-size: 0.8rem;
}

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

/* Al massimo 5 bolle per riga (un quinto della riga, tolti i 4 spazi), e mai
   sotto i 196px: l'etichetta piu lunga, "3 post inviati al cliente", sta su
   una riga sola. Su schermi piu stretti le bolle per riga calano da sole. */
.ped-bubbles {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(max(196px, calc((100% - 4 * 12px) / 5)), 1fr));
  gap: 12px;
}

.ped-bubble {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  min-width: 0;
  padding: 16px 12px 14px;
  border: 1px solid var(--ds-line);
  border-radius: 22px;
  background: var(--ds-surface);
  color: var(--ds-ink);
  font: inherit;
  text-align: center;
  cursor: pointer;
  transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}

.ped-bubble:hover { border-color: #cfc6dd; box-shadow: var(--ds-shadow-card); transform: translateY(-1px); }
.ped-bubble:focus-visible { outline: 2px solid var(--ds-purple); outline-offset: 2px; }
.ped-bubble.is-open { border-color: var(--ds-plum); box-shadow: inset 0 0 0 1px var(--ds-plum), var(--ds-shadow-card); }
.ped-bubble.is-empty { background: #fdfcfa; color: var(--ds-muted); }

/* Bolla con i pulsanti del PED (vista Clienti): il riquadro contiene l'area
   che apre il cliente e, sotto, "Genera PED" oppure "Copia link" e "Apri".
   I pulsanti stanno sul fondo del riquadro, allineati in tutta la riga anche
   quando le bolle hanno un numero diverso di stadi. */
.ped-bubble.has-actions { justify-content: space-between; gap: 10px; padding: 0 0 12px; cursor: default; }
.ped-bubble.has-actions:hover { transform: none; }

.ped-bubble-main {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  width: 100%;
  min-width: 0;
  padding: 16px 12px 0;
  border: 0;
  border-radius: 22px 22px 0 0;
  background: none;
  color: inherit;
  font: inherit;
  text-align: center;
  cursor: pointer;
}

.ped-bubble-main:focus-visible { outline: 2px solid var(--ds-purple); outline-offset: -2px; }

.ped-bubble-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; padding: 0 10px; }

.ped-mini-btn {
  padding: 5px 12px;
  border: 1px solid var(--ds-line);
  border-radius: var(--ds-r-pill);
  background: var(--ds-surface);
  color: var(--ds-ink);
  font: inherit;
  font-size: 0.76rem;
  font-weight: 700;
  cursor: pointer;
}

.ped-mini-btn:hover { border-color: #cfc6dd; }
.ped-mini-btn:focus-visible { outline: 2px solid var(--ds-purple); outline-offset: 2px; }
.ped-mini-btn:disabled { opacity: 0.6; cursor: default; }
.ped-mini-btn.is-gen { border-color: transparent; background: var(--ds-plum); color: #fff; }
.ped-mini-btn.is-gen:hover { background: #3a2a66; }
.ped-mini-btn.is-open-link { background: var(--ds-lavender); color: var(--ds-plum); border-color: transparent; }

.ped-ring {
  display: grid;
  place-items: center;
  width: 68px;
  height: 68px;
  margin-bottom: 4px;
  border-radius: 50%;
  background: var(--ped-ring, var(--ds-line));
}

/* L'iniziale e un cerchio dentro l'anello, senza pastello (Home e PED del
   mese): il colore resta solo all'anello. Il bordo bianco stacca i colori. */
.ped-ring .ds-avatar {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: var(--ds-surface);
  box-shadow: 0 0 0 3px var(--ds-surface);
  font-size: 1.2rem;
}

.ped-bubble.is-empty .ped-ring .ds-avatar { opacity: 0.6; }

.ped-bubble-name {
  display: -webkit-box;
  max-width: 100%;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  font-size: 0.92rem;
  font-weight: 700;
  line-height: 1.25;
  overflow-wrap: anywhere;
}

.ped-bubble-count { color: var(--ds-muted); font-size: 0.82rem; }
.ped-bubble-count strong { color: #b23a1e; font-family: var(--ds-font-display); font-size: 1.05rem; }
.ped-bubble.is-done .ped-bubble-count { color: var(--ds-accent); font-weight: 700; }

/* Stadi del cliente in colonna, solo quelli con post: "4 post pianificati". */
.ped-stages { display: flex; flex-direction: column; align-items: stretch; gap: 4px; width: 100%; max-width: 200px; margin-top: 4px; }

.ped-stage {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 3px 10px;
  border-radius: var(--ds-r-pill);
  background: #f6f3fa;
  color: var(--ds-ink);
  font-size: 0.76rem;
  font-weight: 600;
  text-align: left;
}

.ped-stage::before { content: ""; flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--sc); }
.ped-stage b { font-weight: 800; }

/* Barra del mese in Programmazione post (cal-summary-*): stile del design system. */
.ds-scope .cal-summary-bar-wrap { height: 10px; border-radius: var(--ds-r-pill); background: #f0ecf6; }
.ds-scope .cal-summary-bar { border-radius: var(--ds-r-pill); background: var(--ds-frame); }

.ds-scope .cal-user-prompt {
  padding: 22px;
  border: 1px dashed var(--ds-line);
  border-radius: var(--ds-r-card);
  background: var(--ds-surface);
}

.ds-scope .cal-user-pick-btn {
  border-radius: var(--ds-r-pill);
  font-family: var(--ds-font-body);
  font-weight: 700;
}

/* ─── Piano editoriale: agenda ──────────────────────────────────────────────
   Vista Clienti (bolle) o Agenda (solo i giorni con post); legenda e link
   PED in una colonna laterale, cosi la pagina cresce in larghezza e non in
   altezza. */

#calendarTestView,
#calendarPlanView { gap: 18px; }

.agenda-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.agenda-owner { margin: 0; color: var(--ds-muted); font-size: 0.95rem; font-weight: 600; }

.agenda-toolbar-start { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; }

/* Interruttore Clienti / Agenda. */
.ped-mode {
  display: inline-flex;
  gap: 2px;
  padding: 3px;
  border: 1px solid var(--ds-line);
  border-radius: var(--ds-r-pill);
  background: var(--ds-surface);
}

.ped-mode button {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 16px;
  border: 0;
  border-radius: var(--ds-r-pill);
  background: transparent;
  color: var(--ds-ink);
  font: inherit;
  font-size: 0.88rem;
  font-weight: 700;
  cursor: pointer;
}

.ped-mode button:hover { background: var(--ds-cream); }
.ped-mode button.is-active { background: var(--ds-plum); color: #fff; }
.ped-mode .ds-icon { width: 16px; height: 16px; }

/* Vista Clienti: bolle, poi i post del cliente aperto. */
.ped-clients {
  padding: 18px 20px 20px;
  border: 1px solid var(--ds-line);
  border-radius: var(--ds-r-card);
  background: var(--ds-surface);
  box-shadow: var(--ds-shadow-card);
}

.ped-clients .ped-bubble { background: #fcfbf8; }
.ped-clients .ped-bubble.is-open { background: var(--ds-surface); }

/* scroll-margin: su telefono la barra in alto resta sopra la pagina. */
.ped-client {
  scroll-margin-top: 84px;
  padding: 18px 20px 20px;
  border: 1px solid var(--ds-plum);
  border-radius: var(--ds-r-card);
  background: var(--ds-surface);
  box-shadow: var(--ds-shadow-card);
}

/* Con stato a tutti, PED e "Aggiungi post" i pulsanti vanno a capo sotto il
   nome quando non ci stanno accanto. */
.ped-client-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 14px;
  margin-bottom: 14px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--ds-line);
}

.ped-client-title { flex: 1 1 200px; min-width: 0; }
.ped-client-title h3 { margin: 0; color: var(--ds-ink); font-family: var(--ds-font-display); font-size: 1.2rem; }
.ped-client-title p { margin: 2px 0 0; color: var(--ds-muted); font-size: 0.86rem; }
.ped-client-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: center; gap: 8px; margin-left: auto; }

/* "Imposta stato a tutti…": una tendina con l'aspetto dei pulsanti accanto. */
.ped-bulk {
  min-height: 38px;
  padding: 0 32px 0 14px;
  border: 1px solid var(--ds-line);
  border-radius: var(--ds-r-control);
  background-color: var(--ds-surface);
  color: var(--ds-ink);
  font: inherit;
  font-size: 0.88rem;
  font-weight: 700;
  cursor: pointer;
}

.ped-bulk:hover { border-color: #cfc6dd; }
.ped-bulk:focus-visible { outline: 2px solid var(--ds-purple); outline-offset: 2px; }

/* Una sezione per PED nel dettaglio del cliente. */
.ped-section + .ped-section { margin-top: 18px; }

.ped-section-title {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin: 0 0 10px;
  color: var(--ds-accent);
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.ped-section-title span { color: var(--ds-muted); letter-spacing: 0.04em; text-transform: none; }
.ped-section-empty { margin: 0; color: var(--ds-muted); font-size: 0.86rem; }

/* Il cliente aperto sta sotto bolle e colonna laterale, a tutta larghezza. */
.ped-detail:empty { display: none; }

/* Il PED come un foglio di calcolo: una riga per post. Su schermi stretti la
   tabella scorre in orizzontale e la colonna "Post" resta ferma. */
.ped-table-wrap {
  overflow-x: auto;
  border: 1px solid var(--ds-line);
  border-radius: 14px;
  background: var(--ds-surface);
}

.ped-table {
  width: 100%;
  min-width: 900px;
  table-layout: fixed;
  border-collapse: separate;
  border-spacing: 0;
  color: var(--ds-ink);
  font-size: 0.84rem;
  line-height: 1.4;
}

/* white-space: normal perche styles.css tiene su una riga le celle delle
   tabelle di Analytics; qui i testi vanno a capo (le intestazioni no). */
.ped-table th,
.ped-table td {
  padding: 10px 12px;
  border-bottom: 1px solid var(--ds-line);
  text-align: left;
  vertical-align: top;
  white-space: normal;
}

.ped-table thead th {
  background: #f6f3fa;
  color: var(--ds-accent);
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  white-space: nowrap;
}

.ped-table tbody tr:last-child > * { border-bottom: 0; }
.ped-table tbody tr { cursor: pointer; }
.ped-table tbody tr > * { background: var(--ds-surface); transition: background 0.12s ease; }
.ped-table tbody tr:hover > * { background: #fbf9f5; }
.ped-table tbody tr.is-slot > * { background: #fdfcfa; }
.ped-table tbody tr.is-today > .ped-col-post { box-shadow: inset 3px 0 0 var(--ds-frame); }

.ped-table .ped-col-post {
  position: sticky;
  left: 0;
  z-index: 1;
  border-right: 1px solid var(--ds-line);
}

.ped-table thead .ped-col-post { z-index: 2; }

/* Larghezze fisse; il Testo prende il resto. */
.ped-w-post { width: 118px; }
.ped-w-canali { width: 82px; }
.ped-w-stato { width: 136px; }
.ped-w-media { width: 84px; }
.ped-w-tema { width: 140px; }
.ped-w-note { width: 118px; }
.ped-w-azioni { width: 42px; }

.ped-row-open {
  display: block;
  padding: 0;
  border: 0;
  background: none;
  color: var(--ds-ink);
  font: inherit;
  font-family: var(--ds-font-display);
  font-size: 0.95rem;
  font-weight: 700;
  cursor: pointer;
}

.ped-row-open:hover { color: var(--ds-purple); }
.ped-row-open:focus-visible { outline: 2px solid var(--ds-purple); outline-offset: 2px; border-radius: 4px; }
.ped-when { display: block; margin-top: 2px; color: var(--ds-muted); font-size: 0.76rem; font-weight: 500; text-transform: capitalize; }
.ped-row.is-past .ped-when { color: #b3adc2; }

/* Stato col pallino davanti; su due righe se non ci sta ("Programmato /
   Pubblicato"). */
.ped-status { position: relative; display: block; padding-left: 14px; font-weight: 600; }
.ped-status::before { content: ""; position: absolute; top: 0.42em; left: 0; width: 8px; height: 8px; border-radius: 50%; background: var(--sc); }

.ped-clamp {
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow-wrap: anywhere;
}

.ped-cell-empty { color: #c4bfd0; }
.ped-clamp + .ped-clamp { margin-top: 4px; }
.ped-clamp.is-strong { font-weight: 600; }
.ped-sub { display: block; margin-top: 3px; color: var(--ds-muted); font-size: 0.78rem; }
.ped-tags { color: var(--ds-purple); font-size: 0.8rem; -webkit-line-clamp: 1; }
.ped-col-note .ped-clamp { color: var(--ds-muted); }
.ped-cell-empty.is-todo { color: var(--ds-muted); font-style: italic; }

.ped-media { position: relative; display: inline-block; }
.ped-thumb { display: block; width: 44px; height: 44px; border-radius: 8px; background: var(--ds-cream); object-fit: cover; }

.ped-media small {
  position: absolute;
  right: -6px;
  bottom: -6px;
  padding: 1px 5px;
  border-radius: var(--ds-r-pill);
  background: var(--ds-plum);
  color: #fff;
  font-size: 0.66rem;
  font-weight: 700;
}

.ped-media-label { color: var(--ds-muted); font-size: 0.78rem; white-space: nowrap; }
.ped-table .agenda-del { padding: 2px; }

/* Feedback del cliente, sotto la riga del suo post. */
.ped-table tbody tr.ped-feedback-row { cursor: default; }
.ped-table tbody tr.ped-feedback-row > td { padding-top: 0; background: var(--ds-surface); }
.ped-table tbody tr.ped-feedback-row:hover > td { background: var(--ds-surface); }
.ped-table tbody tr:has(+ .ped-feedback-row) > * { border-bottom-color: transparent; }

.ped-feedback {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-left: 106px;
  padding: 10px 12px;
  border: 1px solid #e3dbf6;
  border-radius: 12px;
  background: #f7f3fe;
}

.ped-feedback-title { display: inline-flex; align-items: center; gap: 6px; color: var(--ds-purple); font-size: 0.72rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; }
.ped-feedback-title .ds-icon { width: 14px; height: 14px; }
.ped-feedback-item p { margin: 2px 0 0; color: var(--ds-ink); font-size: 0.84rem; line-height: 1.45; white-space: pre-line; overflow-wrap: anywhere; }
.ped-feedback-when { color: var(--ds-muted); font-size: 0.74rem; }
.ped-feedback-when b { margin-left: 4px; padding: 1px 6px; border-radius: var(--ds-r-pill); background: #d9502e; color: #fff; font-size: 0.66rem; }

/* Risposte delle colleghe sotto il commento del cliente, e i pulsanti. */
.ped-feedback-reply { margin: 8px 0 0 14px; padding: 6px 10px; border-left: 3px solid var(--ds-purple); border-radius: 6px; background: #f4f1fb; }
.ped-feedback-tools { display: flex; align-items: center; gap: 14px; margin-top: 4px; }
.ped-fb-link { padding: 0; border: 0; background: none; color: var(--ds-purple); font: inherit; font-size: 0.76rem; font-weight: 700; cursor: pointer; }
.ped-fb-link:hover { text-decoration: underline; }
.ped-fb-link:focus-visible { outline: 2px solid var(--ds-purple); outline-offset: 2px; }
.ped-fb-link.is-danger { color: #c23a2e; }
.ped-feedback-form { margin-top: 8px; }
.ped-feedback-form textarea { width: 100%; min-height: 64px; padding: 8px 10px; border: 1px solid var(--ds-line); border-radius: 10px; background: var(--ds-surface); color: var(--ds-ink); font: inherit; font-size: 0.84rem; resize: vertical; }
.ped-feedback-form textarea:focus { border-color: var(--ds-purple); outline: none; }
.ped-feedback-form .ped-feedback-tools { justify-content: flex-end; margin-top: 6px; }

/* Testo solo per i lettori di schermo. */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.agenda-nav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}

.agenda-nav strong {
  min-width: 170px;
  color: var(--ds-ink);
  font-family: var(--ds-font-display);
  font-size: 1.15rem;
  text-align: center;
}

.agenda-months {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin-top: -6px;
}

.agenda-year { margin-right: 4px; color: var(--ds-accent); font-size: 0.76rem; font-weight: 700; letter-spacing: 0.1em; }

.agenda-month,
.dash-month {
  padding: 6px 13px;
  border: 1px solid var(--ds-line);
  border-radius: var(--ds-r-pill);
  background: var(--ds-surface);
  color: var(--ds-ink);
  font: inherit;
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
}

.agenda-month:hover,
.dash-month:hover { border-color: #cfc6dd; }
.agenda-month.is-active,
.dash-month.is-active { border-color: var(--ds-plum); background: var(--ds-plum); color: #fff; }

.agenda-main { display: flex; flex-direction: column; gap: 12px; min-width: 0; }

.agenda-day {
  display: grid;
  grid-template-columns: 76px minmax(0, 1fr);
  gap: 14px;
  padding: 16px;
  border: 1px solid var(--ds-line);
  border-radius: var(--ds-r-card);
  background: var(--ds-surface);
  box-shadow: var(--ds-shadow-card);
}

.agenda-day.is-today { border-color: var(--ds-frame); box-shadow: inset 0 0 0 1px var(--ds-frame), var(--ds-shadow-card); }

.agenda-date {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding-top: 2px;
}

.agenda-date-name {
  color: var(--ds-accent);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.agenda-date-num { color: var(--ds-ink); font-family: var(--ds-font-display); font-size: 2.1rem; font-weight: 700; line-height: 1; }
.agenda-day.is-today .agenda-date-num { color: var(--ds-accent); }
.agenda-day.is-past .agenda-date-num { color: #b3adc2; }

.agenda-add {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  margin-top: 8px;
  padding: 0;
  border: 1px dashed #d8d0e3;
  border-radius: 50%;
  background: transparent;
  color: var(--ds-muted);
  cursor: pointer;
}

.agenda-add:hover { border-style: solid; border-color: var(--ds-plum); color: var(--ds-plum); }
.agenda-add .ds-icon { width: 15px; height: 15px; }

.agenda-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 10px;
  min-width: 0;
}

.agenda-card {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
  padding: 12px 14px;
  border: 1px solid var(--ds-line);
  border-radius: 14px;
  background: #fcfbf8;
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

/* Nome del cliente staccato dalle etichette dei post da una riga sottile, al
   posto dell'iniziale colorata: in Agenda i colori restano solo agli stati. */
.agenda-card-hdr {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  padding-bottom: 9px;
  border-bottom: 1px solid var(--ds-line);
}
.agenda-card-hdr strong { overflow: hidden; color: var(--ds-ink); font-size: 0.92rem; text-overflow: ellipsis; white-space: nowrap; }

.agenda-row {
  display: flex;
  flex-direction: column;
  gap: 7px;
  padding-top: 10px;
  border-top: 1px solid var(--ds-line);
}

.agenda-card-hdr + .agenda-row { padding-top: 0; border-top: 0; }

.agenda-pills { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }

/* Canali di un post del PED, affiancati nell'etichetta. */
.agenda-channels { display: inline-flex; flex-shrink: 0; align-items: center; gap: 3px; }

.agenda-pill-wrap {
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--ds-line);
  border-radius: var(--ds-r-pill);
  background: var(--ds-surface);
}

.agenda-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 4px;
  border: 0;
  border-radius: var(--ds-r-pill);
  background: transparent;
  color: var(--ds-ink);
  font: inherit;
  font-size: 0.78rem;
  font-weight: 500;
  cursor: pointer;
}

.agenda-pill:hover { background: var(--ds-cream); }
.agenda-pill .platform-pill { font-size: 0.68rem; }

.agenda-dot { flex-shrink: 0; width: 9px; height: 9px; border-radius: 50%; background: var(--sc); }

.agenda-del {
  display: grid;
  place-items: center;
  padding: 0 8px 0 2px;
  border: 0;
  background: transparent;
  color: var(--ds-muted);
  cursor: pointer;
}

.agenda-del:hover { color: #c23a2e; }
.agenda-del .ds-icon { width: 13px; height: 13px; }

.agenda-content { display: flex; align-items: flex-start; gap: 10px; min-width: 0; }

.agenda-caption {
  display: -webkit-box;
  flex: 1;
  min-width: 0;
  margin: 0;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  color: var(--ds-ink);
  font-size: 0.83rem;
  line-height: 1.45;
  overflow-wrap: anywhere;
}

.agenda-caption.is-empty { color: var(--ds-muted); font-style: italic; }

.agenda-thumb {
  flex-shrink: 0;
  width: 48px;
  height: 48px;
  border-radius: 10px;
  background: var(--ds-cream);
  object-fit: cover;
}

.agenda-empty {
  padding: 36px;
  border: 1px dashed var(--ds-line);
  border-radius: var(--ds-r-card);
  background: var(--ds-surface);
  color: var(--ds-muted);
  text-align: center;
}

.agenda-empty-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 14px; }

/* ─── Piano editoriale: piano di pubblicazione ──────────────────────────────
   Intestazione e righe condividono le stesse colonne, con larghezza fissa per
   canali e frequenza: ogni riga e una griglia a se, e con colonne "auto" un
   cliente con un solo canale spostava frequenza e giorni rispetto agli altri. */

.plan-hint { max-width: 900px; margin: 0; color: var(--ds-muted); font-size: 0.86rem; }

.plan-list {
  --plan-cols: minmax(180px, 1fr) 226px 268px minmax(300px, 1.5fr) 90px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.plan-head,
.plan-row {
  display: grid;
  grid-template-columns: var(--plan-cols);
  align-items: center;
  gap: 14px;
}

/* 19px = padding (18) + bordo (1) delle righe: le etichette cadono sopra le colonne. */
.plan-head {
  padding: 0 19px;
  color: var(--ds-accent);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

/* Un riquadro per cliente, con una riga per ogni suo PED. */
.plan-group {
  overflow: hidden;
  border: 1px solid var(--ds-line);
  border-radius: var(--ds-r-card);
  background: var(--ds-surface);
  box-shadow: var(--ds-shadow-card);
}

.plan-row { padding: 14px 18px; }
.plan-row + .plan-row { border-top: 1px dashed var(--ds-line); }
.plan-row.is-custom { background: #fffbf3; }
.plan-client { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; min-width: 0; }
.plan-client strong { color: var(--ds-ink); font-size: 0.95rem; }

.plan-ped-label {
  padding: 2px 9px;
  border-radius: var(--ds-r-pill);
  background: var(--ds-lavender);
  color: var(--ds-plum);
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.04em;
}

/* Un posto per piattaforma: FB, IG e LI restano in colonna fra le righe. */
.plan-channels { display: grid; grid-template-columns: repeat(3, 70px); gap: 8px; }
.plan-slot { display: flex; flex-direction: column; gap: 4px; }

.plan-channel {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 3px 6px;
  border: 1px solid var(--ds-line);
  border-radius: var(--ds-r-pill);
  background: var(--ds-surface);
  cursor: pointer;
}

.plan-channel.is-off { opacity: 0.5; }

/* Con un solo canale la spunta non e una scelta e si toglie: il riquadro e
   largo quanto il suo posto (70px), quindi il badge resta centrato e
   allineato con le altre righe. */
.plan-channel.is-solo input { display: none; }
.plan-channel.is-solo { cursor: default; }

/* Select a pillola lavanda, come lo stato nel mockup. */
.plan-row select {
  min-height: 38px;
  padding: 0 34px 0 14px;
  border: 1px solid transparent;
  border-radius: var(--ds-r-pill);
  background-color: var(--ds-lavender);
  color: var(--ds-plum);
  font: inherit;
  font-size: 0.87rem;
  font-weight: 600;
}

.plan-row select:focus { border-color: var(--ds-purple); outline: none; }
.plan-freq select { width: 100%; }
.plan-days { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
/* Giorni della settimana con i nomi brevi: fino a 4 in una riga. */
.plan-row select.plan-day { padding: 0 2px 0 10px; }
.plan-days:has(.plan-day) { gap: 5px; }
/* Spiegazione sotto i menu (24 all'anno: "una si e una no"). */
.plan-days-note { flex-basis: 100%; }
.plan-muted { color: var(--ds-muted); font-size: 0.85rem; }
.plan-custom { display: flex; flex-direction: column; gap: 2px; color: #8a5a12; font-size: 0.83rem; }
.plan-state { color: var(--ds-accent); font-size: 0.8rem; font-weight: 600; text-align: right; }
.plan-state.is-error { color: #c23a2e; }

/* ─── Finestra di scrittura del post ─────────────────────────────────────── */

.cal-modal { border-radius: 20px; }
.cal-modal-header { padding: 20px 22px 16px; border-bottom-color: var(--ds-line); }
.cal-modal-title-group strong { color: var(--ds-ink); font-family: var(--ds-font-display); font-size: 1.12rem; }
.cal-modal-footer { border-top-color: var(--ds-line); }

.cal-form-group textarea,
.cal-form-group input[type="url"],
.cal-form-group input[type="text"],
.cal-form-group input[type="time"],
.cal-form-group input[type="date"],
.cal-form-group select { border-color: var(--ds-line); border-radius: var(--ds-r-control); }

.cal-form-group textarea:focus,
.cal-form-group input:focus,
.cal-form-group select:focus { border-color: var(--ds-purple); }

.cal-form-group label { color: var(--ds-accent); letter-spacing: 0.1em; }
.cal-field-hint { margin: 6px 0 0; color: var(--ds-muted); font-size: 0.8rem; }

/* Canali su cui esce il post (quelli del suo PED). Le label non sono
   intestazioni di campo: niente maiuscolo ereditato da .cal-form-group label. */
.cal-channels { display: flex; flex-wrap: wrap; gap: 8px; }

.cal-form-group .cal-channel {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border: 1px solid var(--ds-line);
  border-radius: var(--ds-r-pill);
  background: var(--ds-surface);
  color: var(--ds-ink);
  font-size: 0.82rem;
  font-weight: 500;
  letter-spacing: normal;
  text-transform: none;
  cursor: pointer;
}

.cal-modal-title-group .agenda-channels .platform-pill { font-size: 0.72rem; }

/* Selettore "Nuovo post". */
.cal-account-picker { border-radius: var(--ds-r-card); }
.cal-account-picker > strong { color: var(--ds-ink); font-family: var(--ds-font-display); font-size: 1.05rem; }
.agenda-picker { width: min(440px, calc(100vw - 32px)); overflow: auto; }
.agenda-picker-date { display: flex; align-items: center; gap: 8px; color: var(--ds-muted); font-size: 0.86rem; }

.agenda-picker-date input {
  padding: 7px 10px;
  border: 1px solid var(--ds-line);
  border-radius: var(--ds-r-control);
  font: inherit;
}

.agenda-picker-list { display: flex; flex-direction: column; gap: 2px; }

.agenda-picker-client {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 8px 0;
  border-bottom: 1px solid var(--ds-line);
}

.agenda-picker-client > span { display: flex; align-items: center; gap: 10px; min-width: 0; font-size: 0.9rem; font-weight: 600; }
.agenda-picker-channels { display: flex; gap: 6px; }
.agenda-picker .cal-picker-btn { width: auto; padding: 6px 8px; border-color: var(--ds-line); border-radius: var(--ds-r-pill); }

/* ─── Schermi medi ──────────────────────────────────────────────────────── */

@media (max-width: 1100px) {

  .plan-list { --plan-cols: minmax(0, 1fr) 226px; }
  .plan-head { display: none; }
  .plan-freq,
  .plan-days,
  .plan-state { grid-column: 1 / -1; }
  .plan-state { text-align: left; }
}

@media (max-width: 900px) {
  .ds-dash-grid { grid-template-columns: 1fr; }
  .ds-stats { grid-template-columns: 1fr 1fr; }
  .ds-stats .ds-stat:last-child { grid-column: 1 / -1; }
}

/* ─── Telefono ──────────────────────────────────────────────────────────── */

@media (max-width: 760px) {
  /* Va ripetuta qui: la colonna fissa della sidebar definita sopra batte la
     regola mobile di styles.css, che e caricato prima. */
  /* overflow-x: clip e non hidden (quello di styles.css): hidden rende
     .app-shell un contenitore di scorrimento, e la barra sticky si
     aggancerebbe a lui invece che allo schermo, sparendo mentre si scorre. */
  .app-shell { grid-template-columns: 1fr; gap: 8px; padding: 8px; overflow-x: clip; }

  /* Menu a scomparsa: la sidebar esce dal flusso e scorre da sinistra quando
     body ha .nav-open (pulsante ☰ nella barra in alto). Da chiusa e anche
     visibility: hidden, cosi non si raggiunge con la tastiera ne coi lettori
     di schermo; il ritardo sulla visibility lascia finire l'animazione. */
  .sidebar {
    position: fixed;
    top: 8px;
    bottom: 8px;
    left: 8px;
    z-index: 300;
    width: min(300px, calc(100vw - 48px));
    max-width: none;
    height: auto;
    gap: 20px;
    padding: 22px 16px 18px;
    border-radius: var(--ds-r-card);
    box-shadow: 0 24px 60px rgba(20, 14, 40, 0.35);
    visibility: hidden;
    transform: translateX(calc(-100% - 16px));
    transition: transform 0.25s ease, visibility 0s linear 0.25s;
  }

  body.nav-open .sidebar {
    visibility: visible;
    transform: none;
    transition: transform 0.25s ease, visibility 0s;
  }

  body.nav-open { overflow: hidden; }

  .ds-nav-backdrop {
    position: fixed;
    inset: 0;
    z-index: 290;
    display: block;
    background: rgba(33, 26, 61, 0.45);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.25s ease;
  }

  body.nav-open .ds-nav-backdrop { opacity: 1; pointer-events: auto; }

  /* Nel pannello la navigazione torna verticale: styles.css su telefono la
     trasformava in una fila scorrevole in orizzontale. */
  .nav-list { display: grid; gap: 4px; margin-inline: 0; padding-bottom: 0; overflow: visible; }

  .nav-list a {
    flex: none;
    justify-content: flex-start;
    min-width: 0;
    padding: 12px 14px;
    text-align: left;
    white-space: normal;
  }

  .nav-list a.nav-sub { padding: 7px 12px 7px 46px; }

  /* Tendine: la freccia apre e chiude le sottopagine senza cambiare pagina.
     Lo stato lo decide app.js (is-open); !important perche deve vincere anche
     sulla regola di styles.css che nasconde le sottopagine fuori sezione. */
  .nav-group > a { padding-right: 56px; }

  .nav-list .nav-expand {
    position: absolute;
    top: 50%;
    right: 4px;
    display: inline-grid;
    place-items: center;
    width: 40px;
    height: 40px;
    margin-top: -20px;
    padding: 0;
    border: 0;
    border-radius: 10px;
    background: transparent;
    color: #e4def7;
    cursor: pointer;
  }

  .nav-list .nav-expand:hover { background: rgba(255, 255, 255, 0.1); color: #fff; }
  .nav-group:has(> a.active) .nav-expand { color: var(--ds-plum); }
  .nav-group:has(> a.active) .nav-expand:hover { background: rgba(42, 27, 78, 0.1); }
  .nav-list .nav-expand .ds-icon { transition: transform 0.2s ease; }
  .nav-list .nav-expand[aria-expanded="true"] .ds-icon { transform: rotate(180deg); }

  .nav-list .nav-subs:not(.is-open) { display: none; }
  .nav-list .nav-subs.is-open { display: grid !important; }

  .brand { padding-right: 44px; }

  .sidebar .ds-drawer-close {
    position: absolute;
    top: 16px;
    right: 14px;
    display: inline-grid;
    border-color: rgba(255, 255, 255, 0.16);
    background: rgba(255, 255, 255, 0.08);
    color: #fff;
  }

  .main { min-height: calc(100vh - 16px); padding: 0; border-radius: var(--ds-r-card); }
  /* Barra sospesa e sempre visibile: prugna come la sidebar, cosi stacca dal
     crema e il ☰ resta a portata mentre si scorre. Sta sotto il pannello del
     menu (300), lo sfondo (290), il caricamento (200) e la finestra dei post. */
  .ds-topbar {
    position: sticky;
    top: 8px;
    z-index: 150;
    justify-content: flex-start;
    gap: 12px;
    margin: 8px 8px 0;
    padding: 10px 12px;
    border-bottom: 0;
    border-radius: 14px;
    background: var(--ds-plum);
    box-shadow: 0 8px 22px rgba(33, 26, 61, 0.22);
  }

  .ds-topbar .ds-menu-btn {
    display: inline-grid;
    flex-shrink: 0;
    border-color: rgba(255, 255, 255, 0.18);
    background: rgba(255, 255, 255, 0.1);
    color: #fff;
  }

  .ds-topbar-right { margin-left: auto; }
  .ds-today { display: none; }
  .ds-bell { border-color: rgba(255, 255, 255, 0.18); background: rgba(255, 255, 255, 0.1); color: #fff; }
  .ds-bell-panel { position: fixed; top: 72px; right: 16px; left: 16px; width: auto; }
  .ped-feedback { margin-left: 0; }
  /* "Workspace /" occupa spazio e su telefono non dice niente. */
  .ds-crumbs > span:nth-child(-n + 2) { display: none; }
  .ds-crumbs { gap: 8px; color: #fff; font-size: 0.7rem; }
  .ds-crumbs-sep { color: #9d93c4; }
  .ds-page { padding: 22px 16px 32px; }
  .ds-title { font-size: 2rem; }
  .ds-hero-actions { width: 100%; margin-top: 0; }
  .ds-hero-actions > * { flex: 1 1 auto; }

  .ds-filters { gap: 10px; }
  .ds-filter { flex: 1 1 100%; }
  .ds-filter select,
  .ds-filter .searchable-select { flex: 1; min-width: 0; }
  .ds-filter .searchable-select-trigger { width: 100%; min-width: 0; }
  .ds-filter-refresh { margin-left: 0; }

  .ds-stats { grid-template-columns: 1fr; gap: 12px; }
  #dashSchedule .ds-card-head,
  #dashByClient .ds-card-head { flex-wrap: wrap; }
  .dash-sched-actions { justify-content: flex-start; }
  .dash-month-status { grid-template-columns: 1fr; gap: 12px; }
  .ds-stats .ds-stat:last-child { grid-column: auto; }
  .ds-stat { min-height: 140px; }
  .ds-card { padding: 18px; }
}

@media (max-width: 640px) {
  /* I mesi su una riga scorrevole invece di tre righe impilate. */
  .agenda-months { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 2px; scrollbar-width: thin; }
  .agenda-month { flex: 0 0 auto; }
  .agenda-day { grid-template-columns: 1fr; }
  .agenda-date { flex-direction: row; align-items: baseline; gap: 8px; }
  .agenda-add { margin: 0 0 0 auto; }
  .agenda-cards { grid-template-columns: 1fr; }
  .plan-list { --plan-cols: minmax(0, 1fr); }

  .ped-mode { width: 100%; }
  .ped-mode button { flex: 1; justify-content: center; }
  .ped-bubbles { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .ped-bubble-actions { gap: 4px; padding: 0 6px; }
  .ped-mini-btn { padding: 5px 9px; }
  .ped-clients,
  .ped-client { padding: 14px; }
  .ped-client-actions { width: 100%; justify-content: stretch; }
  .ped-client-actions .ds-btn-ghost { flex: 1; }
  .ped-client-actions .ped-bulk { flex: 1 1 100%; }
  /* La ✕ resta in alto a destra, accanto al nome, invece di finire da sola
     su una riga sotto i pulsanti. */
  .ped-client-head { position: relative; }
  .ped-client-title { padding-right: 48px; }
  .ped-client-actions [data-ped-close] { position: absolute; top: 0; right: 0; }
}

/* ─── Stampa: il report resta quello di Analytics, senza guscio ─────────── */

@media print {
  body { background: #fff !important; }
  .app-shell { display: block; padding: 0; }
  .main { min-height: 0; border-radius: 0; background: none; }
  .ds-page { padding: 0; }

  .ds-topbar,
  .ds-hero,
  .ds-filters,
  .ds-nav-backdrop { display: none !important; }
}

@media (prefers-reduced-motion: reduce) {
  .sidebar,
  .ds-nav-backdrop { transition: none !important; }
}