/*
 * Design system condiviso — Registro Botanico
 * Token + componenti riusati da tutte le pagine. Palette monocromatica,
 * angoli retti, identità tecnica/scura invariata: qui si consolidano
 * solo leggibilità, contrasto, spaziatura e accessibilità.
 */

/*
 * TEMI — tre aree, tre palette, stessi componenti:
 *   :root          → public-theme (landing/tag): nero + panna, INVARIATO.
 *   .admin-theme   → scuro tecnico (ribadisce i valori del tema pubblico,
 *                    così l'area admin resta indipendente da modifiche future).
 *   .client-theme  → chiaro, caldo, botanico ("quaderno botanico digitale").
 * Le triplette --rgb-* alimentano le utility Tailwind (con opacità);
 * gli alias --color-… e --text-… alimentano i componenti condivisi qui sotto.
 */
:root {
  /* public-theme — triplette per le utility Tailwind */
  --rgb-ink: 13 13 13;
  --rgb-surface: 20 20 20;
  --rgb-surface-hover: 26 26 26;
  --rgb-cream: 253 251 247;
  --rgb-line: 30 30 30;       /* griglia decorativa: sempre la meno visibile */
  --rgb-border: 58 58 58;     /* bordo componenti interattivi */
  --rgb-error: 201 143 143;
  --rgb-success: 147 173 147;

  /* Spaziature */
  --space-1: 4px;  --space-2: 8px;  --space-3: 12px; --space-4: 16px;
  --space-5: 20px; --space-6: 24px; --space-8: 32px; --space-10: 40px;
  --space-12: 48px; --space-16: 64px; --space-20: 80px;

  /* Tipografia funzionale (mai sotto i 14px per contenuti non decorativi) */
  --text-meta: 11px;   /* label, badge, timestamp, numerazione § — mai testo lungo */
  --text-sm: 14px;
  --text-base: 16px;

  /* Controlli */
  --control-h: 48px;
  --control-h-sm: 40px;

  /* Container */
  --container-max: 1120px;
  --container-max-narrow: 480px;
}

/* Derivazioni per-tema: dichiarate anche sui selettori tema, così si
   ricalcolano con le triplette del tema attivo (le custom property
   ereditate arrivano già risolte: ridefinirle qui è indispensabile). */
:root, .admin-theme, .client-theme {
  --color-ink: rgb(var(--rgb-ink));
  --color-surface: rgb(var(--rgb-surface));
  --color-surface-hover: rgb(var(--rgb-surface-hover));
  --color-cream: rgb(var(--rgb-cream));
  --color-line: rgb(var(--rgb-line));
  --grid-line: var(--color-line);   /* griglia di sfondo: nei temi chiari resa più tenue del bordo */
  --color-border: rgb(var(--rgb-border));
  --color-border-hover: rgb(var(--rgb-cream) / 0.5);
  --color-error: rgb(var(--rgb-error));
  --color-success: rgb(var(--rgb-success));

  /* Testo — 4 livelli fissi, non più opacità scelte a caso per istanza */
  --text-primary: rgb(var(--rgb-cream));
  --text-secondary: rgb(var(--rgb-cream) / 0.72);
  --text-muted: rgb(var(--rgb-cream) / 0.46);
  --text-disabled: rgb(var(--rgb-cream) / 0.26);

  /* Accento azioni primarie/selezioni (nel tema pubblico coincide col panna) */
  --accent: rgb(var(--rgb-cream));
  --accent-hover: rgb(var(--rgb-cream) / 0.85);
  --accent-active: rgb(var(--rgb-cream) / 0.75);
  --accent-contrast: rgb(var(--rgb-ink));

  /* Lavaggi/hover dipendenti dal tema */
  --wash-hover: rgb(var(--rgb-cream) / 0.06);
  --wash-row: rgb(var(--rgb-cream) / 0.03);
  --wash-watered: rgb(var(--rgb-cream) / 0.1);
  --wash-danger: rgb(var(--rgb-error) / 0.1);

  /* Freccia dei select (colore coerente col testo del tema) */
  --select-arrow: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%23FDFBF7' stroke-opacity='0.6' stroke-width='1.5'><path d='M5 7.5 10 12.5 15 7.5'/></svg>");
}

/* ============ ADMIN THEME — chiaro, tecnico, verde militare ============
   Sala controllo su carta chiara: sfondo grigio neutro, lettere e dettagli
   (testi, bordi, griglia, accenti) in tonalità oliva/verde militare. */
.admin-theme {
  color-scheme: light;

  --rgb-ink: 232 235 237;         /* #E8EBED — sfondo pagina (invariato) */
  --rgb-surface: 247 249 250;     /* #F7F9FA — card/superfici */
  --rgb-surface-hover: 223 228 219; /* #DFE4DB — hover con velo oliva */
  --rgb-cream: 46 54 38;          /* #2E3626 — testo oliva scurissimo */
  --rgb-line: 200 205 191;        /* #C8CDBF — separatori oliva chiaro */
  --rgb-border: 159 168 148;      /* #9FA894 — bordi componenti oliva */
  --rgb-error: 176 76 68;         /* #B04C44 */
  --rgb-success: 74 116 88;       /* #4A7458 */

  --grid-line: #DEE1DA;           /* griglia molto tenue, non compete col testo */
  --color-border-hover: rgb(var(--rgb-cream) / 0.5);

  --text-primary: #2E3626;
  --text-secondary: #3F4A34;      /* più scuro: leggibile sul fondo chiaro */
  --text-muted: #5C6650;
  --text-disabled: #8B927E;

  --accent: #4B5D33;              /* verde militare */
  --accent-hover: #3D4C29;
  --accent-active: #333F21;
  --accent-contrast: #FFFFFF;

  --wash-hover: rgb(46 54 38 / 0.05);
  --wash-row: rgb(46 54 38 / 0.04);
  --wash-watered: #DDE3D2;
  --wash-danger: #F0DDDB;

  --select-arrow: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%232E3626' stroke-opacity='0.6' stroke-width='1.5'><path d='M5 7.5 10 12.5 15 7.5'/></svg>");
}
.admin-theme select.field { color-scheme: light; }
.admin-theme .badge-success { background: #DCE7DF; }
.admin-theme .badge-error { background: #F0DDDB; }
.admin-theme .btn-primary:active { background: var(--accent-active); border-color: var(--accent-active); opacity: 1; }

/* ============ CLIENT THEME — chiaro, caldo, botanico ============
   "Quaderno botanico digitale": fondo carta, testo inchiostro caldo,
   accento verde salvia per azioni e selezioni. Stessi componenti condivisi. */
.client-theme {
  color-scheme: light;

  --rgb-ink: 243 239 230;         /* #F3EFE6 — sfondo pagina */
  --rgb-surface: 252 250 245;     /* #FCFAF5 — card/superfici */
  --rgb-surface-hover: 234 228 216; /* #EAE4D8 */
  --rgb-cream: 28 29 25;          /* #1C1D19 — testo primario */
  --rgb-line: 216 210 199;        /* #D8D2C7 — separatori */
  --rgb-border: 191 184 170;      /* #BFB8AA — bordi componenti */
  --rgb-error: 169 86 79;         /* #A9564F */
  --rgb-success: 82 112 90;       /* #52705A */

  --grid-line: #EAE5DA;           /* griglia molto tenue, non compete col testo */
  --color-border-hover: rgb(var(--rgb-cream) / 0.45);

  --text-primary: #1C1D19;
  --text-secondary: #55564E;      /* più scuro: leggibile sul fondo carta */
  --text-muted: #757469;
  --text-disabled: #9B9A8F;

  --accent: #647A5B;
  --accent-hover: #526749;
  --accent-active: #465A3F;
  --accent-contrast: #FFFFFF;

  --wash-hover: rgb(28 29 25 / 0.05);
  --wash-row: rgb(28 29 25 / 0.04);
  --wash-watered: #DDE5E8;        /* azzurro pastello — cella annaffiata */
  --water-line: #647985;          /* azzurro più marcato — prossima annaffiatura (tratteggio) */
  --wash-danger: #F0DDDA;         /* danger-soft */

  /* Palette estesa cliente (stati semantici, disponibili per usi futuri) */
  --client-accent-soft: #DDE5D7;
  --client-success-soft: #DDE8DF;
  --client-warning: #B7803E;
  --client-warning-soft: #F2E3CD;
  --client-danger-soft: #F0DDDA;
  --client-info: #647985;
  --client-info-soft: #DDE5E8;

  --select-arrow: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%231C1D19' stroke-opacity='0.6' stroke-width='1.5'><path d='M5 7.5 10 12.5 15 7.5'/></svg>");
}

/* Rifiniture client: badge di stato con fondo tenue, select chiari */
.client-theme select.field { color-scheme: light; }
.client-theme .badge-success { background: var(--client-success-soft); }
.client-theme .badge-error { background: var(--client-danger-soft); }
.client-theme .btn-primary:active { background: var(--accent-active); border-color: var(--accent-active); opacity: 1; }

/* Celle calendario client: sfondo pieno e chiaro, la griglia decorativa
   del body non filtra più attraverso le celle (vale per il mini calendario
   della scheda pianta e per la vista mensile — stesso componente condiviso). */
.client-theme .cal-day { background: var(--color-surface); }
.client-theme .cal-day.watered { background: var(--wash-watered); }
.client-theme .cal-day-month.selected { background: var(--color-surface-hover); }

/* ============ LEGGIBILITÀ SUI TEMI CHIARI ============
   Su fondo chiaro le utility a bassa opacità (text-cream/45, /25, /70) e i testi
   meta piccolissimi diventano poco leggibili e si confondono con la griglia.
   Qui — solo per client e admin — si alza l'opacità effettiva e si porta il
   testo meta a 12px. La landing (tema pubblico) non è toccata. */
.client-theme .text-cream\/70, .admin-theme .text-cream\/70 { color: rgb(var(--rgb-cream) / 0.82); }
.client-theme .text-cream\/45, .admin-theme .text-cream\/45 { color: rgb(var(--rgb-cream) / 0.62); }
.client-theme .text-cream\/25, .admin-theme .text-cream\/25 { color: rgb(var(--rgb-cream) / 0.45); }
.client-theme .text-meta, .admin-theme .text-meta { font-size: 12px; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
}

html { scroll-behavior: smooth; }
body {
  background-color: var(--color-ink);
  color: var(--text-primary);
  font-family: 'Space Grotesk', sans-serif;
}

/* ============ GRIGLIA DI SFONDO — decorativa, sempre più tenue dei bordi ============ */
.grid-bg {
  background-image:
    linear-gradient(to right, var(--grid-line) 1px, transparent 1px),
    linear-gradient(to bottom, var(--grid-line) 1px, transparent 1px);
  background-size: 32px 32px;
}

/* ============ TIPOGRAFIA ============ */
.tracked { letter-spacing: 0.25em; }
.tracked-sm { letter-spacing: 0.15em; }

/* ============ FOCUS GLOBALE — visibile su qualunque elemento interattivo ============ */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px var(--color-ink), 0 0 0 4px var(--color-cream);
}

/* ============ BOTTONI ============ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  font-family: 'IBM Plex Mono', monospace;
  font-size: var(--text-meta);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  min-height: var(--control-h-sm);
  padding: 0 var(--space-5);
  border: 1px solid var(--color-border);
  background: transparent;
  color: var(--text-primary);
  cursor: pointer;
  transition: background-color 0.15s, border-color 0.15s, color 0.15s, opacity 0.15s;
  white-space: nowrap;
}
.btn-lg { min-height: var(--control-h); padding: 0 var(--space-6); }
.btn:hover { background: var(--wash-hover); border-color: var(--color-border-hover); }
.btn:active { opacity: 0.8; }
.btn[disabled], .btn:disabled {
  color: var(--text-disabled);
  border-color: var(--color-line);
  cursor: not-allowed;
  background: none;
}

.btn-primary {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--accent-contrast);
}
.btn-primary:hover { background: var(--accent-hover); border-color: var(--accent-hover); }
.btn-primary[disabled], .btn-primary:disabled { background: var(--color-line); border-color: var(--color-line); color: var(--text-disabled); }

.btn-secondary { color: var(--text-primary); border-color: var(--color-border); }

.btn-ghost {
  border-color: transparent;
  color: var(--text-secondary);
}
.btn-ghost:hover { color: var(--text-primary); background: var(--wash-hover); border-color: transparent; }

.btn-destructive { color: var(--color-error); border-color: var(--color-error); }
.btn-destructive:hover { background: var(--wash-danger); }

.btn-icon { min-width: var(--control-h-sm); min-height: var(--control-h-sm); padding: 0; }

.btn.is-loading { color: transparent; position: relative; pointer-events: none; }
.btn.is-loading::after {
  content: '';
  position: absolute;
  width: 14px; height: 14px;
  border: 2px solid currentColor;
  border-top-color: transparent;
  border-radius: 50%;
  color: var(--text-primary);
  animation: btn-spin 0.7s linear infinite;
}
@media (prefers-reduced-motion: reduce) { .btn.is-loading::after { animation: none; } }
@keyframes btn-spin { to { transform: rotate(360deg); } }

/* ============ CAMPI FORM (input / select / textarea) ============ */
.field-label {
  display: block;
  font-family: 'IBM Plex Mono', monospace;
  font-size: var(--text-meta);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-secondary);
  margin-bottom: var(--space-2);
}

.field {
  display: block;
  width: 100%;
  min-height: var(--control-h);
  /* padding verticale simmetrico: senza, il testo poggiava in cima al campo.
     Così il valore resta centrato in altezza (min-height fa da pavimento) */
  padding: var(--space-3) var(--space-4);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  color: var(--text-primary);
  font-family: 'Space Grotesk', sans-serif;
  font-size: 16px; /* evita zoom automatico su mobile e resta leggibile */
  letter-spacing: 0.01em;
  text-align: center;
  transition: border-color 0.15s, background-color 0.15s;
}
textarea.field { min-height: var(--control-h); padding: var(--space-3) var(--space-4); resize: vertical; line-height: 1.5; }
.field::placeholder { color: var(--text-muted); }
.field:hover { border-color: var(--color-border-hover); }
.field:focus { outline: none; border-color: var(--accent); }
.field[disabled], .field:disabled {
  color: var(--text-disabled);
  border-color: var(--color-line);
  background: transparent;
  cursor: not-allowed;
}
.field-error { border-color: var(--color-error); }
.field-help {
  font-size: var(--text-meta);
  color: var(--text-muted);
  margin-top: var(--space-2);
}
.field-error-text {
  font-size: var(--text-meta);
  letter-spacing: 0.04em;
  color: var(--color-error);
  margin-top: var(--space-2);
}

select.field {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  color-scheme: dark;
  background-image: var(--select-arrow);
  background-repeat: no-repeat;
  /* dimensione esplicita: senza, l'SVG senza width/height viene scalato
     all'altezza del campo e la freccia copre il testo */
  background-size: 12px 12px;
  background-position: right var(--space-4) center;
  /* padding simmetrico così il testo centrato resta davvero al centro
     nonostante lo spazio riservato alla freccia a destra */
  padding-left: var(--space-10);
  padding-right: var(--space-10);
  text-align-last: center; /* centra il testo dell'opzione selezionata (Firefox/Chrome) */
}

input[type=color].field { min-height: 44px; padding: 2px; cursor: pointer; }

/* Date/ora/numero: su iOS Safari il valore viene CENTRATO e ingrandito, rendendo
   questi campi visivamente diversi dagli altri. Qui li normalizziamo: valore
   allineato a sinistra, stessa dimensione testo, nessuna freccia spinner. */
input[type=date].field,
input[type=time].field,
input[type=number].field {
  -webkit-appearance: none;
  appearance: none;
  text-align: center;
  /* iOS dà ai date/time una larghezza intrinseca che sbordava dal contenitore:
     forziamo la larghezza del campo come tutti gli altri */
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  max-width: 100%;
}
/* data/ora: su iOS il valore si allinea in alto/sinistra. Con flex sul campo
   lo centriamo sia in verticale sia in orizzontale in modo affidabile */
input[type=date].field,
input[type=time].field {
  display: flex;
  align-items: center;
  justify-content: center;
}
input[type=date].field::-webkit-date-and-time-value,
input[type=time].field::-webkit-date-and-time-value {
  text-align: center;
  margin: 0;
  font-size: 16px;
}
/* niente frecce su/giù nei campi numerici */
input[type=number].field::-webkit-outer-spin-button,
input[type=number].field::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
input[type=number].field { -moz-appearance: textfield; }
/* icona nativa (calendario/orologio): con il valore centrato la teniamo accanto
   al testo (non spinta al bordo) per non rompere la centratura */
input[type=date].field::-webkit-calendar-picker-indicator,
input[type=time].field::-webkit-calendar-picker-indicator { margin-left: var(--space-2); opacity: 0.55; }

/* ============ SUPERFICI / CARD ============ */
.card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  padding: var(--space-6) var(--space-6) var(--space-8);
}
.card-flush { padding: 0; overflow: hidden; }
.card-interactive { transition: background-color 0.2s, border-color 0.15s; cursor: pointer; }
.card-interactive:hover { background: var(--color-surface-hover); border-color: var(--color-border-hover); }
.card-selected { border-color: var(--accent); background: var(--color-surface-hover); }

/* Griglia di elementi "pick" selezionabili (es. scelta pianta dal catalogo) */
.pick-item {
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  text-align: left;
  cursor: pointer;
  transition: border-color 0.15s;
}
.pick-item:hover { border-color: var(--color-border-hover); }
.pick-item img { filter: grayscale(35%); transition: filter 0.25s; }
.pick-item:hover img { filter: grayscale(0%); }
.pick-item.selected { border-color: var(--accent); }
.pick-item.selected img { filter: grayscale(0%); }

/* ============ BADGE ============ */
.badge {
  display: inline-flex;
  align-items: center;
  font-family: 'IBM Plex Mono', monospace;
  font-size: var(--text-meta);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-secondary);
  border: 1px solid var(--color-border);
  padding: var(--space-1) var(--space-3);
}
.badge-muted { color: var(--text-muted); }
.badge-success { color: var(--color-success); border-color: var(--color-success); }
.badge-error { color: var(--color-error); border-color: var(--color-error); }
.badge-solid { background: var(--accent); color: var(--accent-contrast); border-color: var(--accent); }

/* ============ TAB / SEGMENTED CONTROL ============ */
.tab {
  font-family: 'IBM Plex Mono', monospace;
  font-size: var(--text-meta);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: var(--space-3) 0;
  border-bottom: 2px solid transparent;
  color: var(--text-muted);
  background: none;
  cursor: pointer;
}
.tab:hover { color: var(--text-secondary); }
.tab-active { color: var(--text-primary); border-color: var(--text-primary); }

/* ============ NAVIGAZIONE ============ */
.nav-link {
  font-family: 'IBM Plex Mono', monospace;
  font-size: var(--text-meta);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-secondary);
  transition: color 0.15s;
  white-space: nowrap;
}
.nav-link:hover { color: var(--text-primary); }
.nav-link-active { color: var(--text-primary); }

/* ============ LISTE / TABELLE ============ */
.list-row {
  border-bottom: 1px solid var(--color-border);
  transition: background-color 0.15s;
}
.list-row:hover { background: var(--wash-row); }
.list-row-selected { background: var(--color-surface-hover); }
.list-header {
  font-family: 'IBM Plex Mono', monospace;
  font-size: var(--text-meta);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
  border-bottom: 1px solid var(--color-border);
}

/* ============ EMPTY STATE ============ */
.empty-state {
  border-top: 1px solid var(--color-border);
  padding: var(--space-16) var(--space-6);
  text-align: center;
}
.empty-state-title {
  font-family: 'IBM Plex Mono', monospace;
  font-size: var(--text-meta);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: var(--space-2);
}
.empty-state-desc { font-size: var(--text-sm); color: var(--text-secondary); max-width: 40ch; margin: 0 auto; }
.empty-state .btn { margin-top: var(--space-6); }

/* ============ SKELETON / LOADING (predisposto, per future viste asincrone) ============ */
.skeleton {
  background: linear-gradient(90deg, var(--color-surface) 25%, var(--color-surface-hover) 37%, var(--color-surface) 63%);
  background-size: 400% 100%;
  animation: skeleton-loading 1.4s ease infinite;
}
@media (prefers-reduced-motion: reduce) { .skeleton { animation: none; } }
@keyframes skeleton-loading { 0% { background-position: 100% 50%; } 100% { background-position: 0 50%; } }

/* ============ CALENDARIO — condiviso tra scheda pianta (mini) e vista calendario (mensile) ============ */
.cal-day {
  aspect-ratio: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  background: transparent;
  font: inherit;
  font-family: 'IBM Plex Mono', monospace;
  font-size: var(--text-meta);
  border: 1px solid var(--color-border);
  color: var(--text-muted);
  cursor: pointer;
  user-select: none;
  transition: border-color 0.15s;
}
.cal-day:hover { border-color: var(--color-border-hover); }
.cal-day.empty { visibility: hidden; cursor: default; }
.cal-day.watered { background: var(--wash-watered); color: var(--text-primary); border-color: var(--water-line, var(--color-border-hover)); }
.cal-day.today { border-color: var(--accent); color: var(--text-primary); font-weight: 700; }
.cal-day.next-water { border-style: dashed; border-width: 2px; border-color: var(--water-line, var(--color-border-hover)); color: var(--text-secondary); }
/* Futuro: non annaffiabile → cursore "non cliccabile" per TUTTE le celle future
   (inclusa la "prossima prevista", che però resta ben visibile e non spenta). */
.cal-day.future { cursor: default; }
.cal-day.future:not(.next-water) { color: var(--text-disabled); }

/* Variante mensile (più celle, contenuto multiplo per giorno) */
.cal-day-month {
  aspect-ratio: auto;
  min-height: 76px;
  align-items: flex-start;
  justify-content: flex-start;
  flex-direction: column;
  padding: var(--space-2);
  font-size: inherit;
}
.cal-day-month.selected { background: var(--color-surface-hover); }
.cal-tag {
  font-size: var(--text-meta);
  line-height: 1.3;
  padding: 0 var(--space-1);
  border: 1px solid var(--color-border);
  margin-bottom: 1px;
  display: block;
  width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.cal-tag.completed { color: var(--text-disabled); text-decoration: line-through; }
.cal-tag.overdue { border-color: var(--color-border-hover); color: var(--text-primary); }

/* Icone lineari affiancate alle etichette (schede pianta). Dimensionate sul testo. */
.rb-ico { width: 1em; height: 1em; display: inline-block; vertical-align: -0.14em; margin-right: 0.45em; stroke-width: 1.6; flex: 0 0 auto; }

/* Logo Hydro Start: marchio (rombo+radice) ricolorato per tema + wordmark testuale.
   Su tema chiaro (client-theme) si mostra il marchio inchiostro; altrimenti (landing
   e admin, scuri) quello crema. */
.brand-lockup { display: inline-flex; align-items: center; gap: 0.55rem; text-decoration: none; color: inherit; line-height: 1; }
.brand-mark { width: 1.85rem; height: 1.85rem; display: block; flex: 0 0 auto; }
.brand-mark-ink { display: none; }
.client-theme .brand-mark-ink { display: block; }
.client-theme .brand-mark-cream { display: none; }
.brand-word { font-family: 'Space Grotesk', sans-serif; font-weight: 700; letter-spacing: 0.07em; font-size: 0.95rem; white-space: nowrap; }

/* Pallini attività: leggibili nelle celle strette dello smartphone, dove il testo
   verrebbe troncato. Nascosti su desktop (lì c'è spazio per le etichette testuali). */
.cal-dots { display: none; align-items: center; flex-wrap: wrap; gap: 3px; }
.cal-dot { width: 7px; height: 7px; border-radius: 50%; box-sizing: border-box; background: var(--accent); flex: 0 0 auto; }
.cal-dot.upcoming { background: transparent; border: 1.5px solid var(--accent); }
.cal-dot.overdue { background: var(--color-error); border: none; }
.cal-dot.completed { background: var(--water-line, var(--text-muted)); border: none; }
.cal-dot-more { font-family: 'IBM Plex Mono', monospace; font-size: 9px; color: var(--text-muted); line-height: 1; margin-left: 1px; }

@media (max-width: 767px) {
  .cal-day-month { min-height: 58px; align-items: center; justify-content: flex-start; padding: 6px 2px; }
  .cal-day-month .cal-daynum { margin-bottom: 4px; text-align: center; }
  .cal-day-month .cal-tag, .cal-day-month .cal-extra { display: none; } /* testo illeggibile in celle così strette */
  .cal-day-month .cal-dots { display: flex; justify-content: center; }
}