/*
 * I colori di xOS dentro AppFlowy, nei due temi.
 *
 * ## Perché è un foglio di stile e non un fork del client
 *
 * AppFlowy Web è **interamente guidato da variabili CSS**: verificato leggendo
 * il pacchetto servito da `appflowyinc/appflowy_web:0.1.19`, dove `:root` e
 * `:root[data-dark-mode=true]` dichiarano l'intera tavolozza e il resto del
 * foglio la consuma con `hsl(var(--nome))`. Un fork del sorgente per cambiare
 * dei colori vorrebbe dire costruire e mantenere una versione nostra del
 * client — e rifarla a ogni aggiornamento di monte — per ottenere esattamente
 * questo file. Questo si legge in cinque minuti e si butta in uno.
 *
 * ## Il formato, che è la parte in cui si sbaglia
 *
 * AppFlowy usa **terne HSL senza funzione** — `220 26% 14%` — perché le
 * consuma dentro `hsl(...)`. Scrivere qui un `#0B0D11` non darebbe un colore
 * sbagliato: darebbe `hsl(#0B0D11)`, che non è un colore, e l'elemento
 * resterebbe trasparente. Le poche variabili che di monte sono esadecimali o
 * terne con la virgola e l'alfa restano nel formato loro, una per una.
 *
 * ## Da dove vengono i numeri
 *
 * Dai token di xOS in `xos-web/src/index.css`, che sono già terne HSL: è la
 * stessa tavolozza, non una imitazione. **La mappa definitiva la passa
 * Design**: quando arriva si cambiano i valori qui dentro e nient'altro —
 * questo file è il posto dove la mappa va a vivere, e la sua unica copia.
 *
 * Fra i due temi cambia solo il **valore**: i nomi a sinistra sono quelli di
 * AppFlowy e non si toccano.
 */

/*
 * ## La specificità, che è la ragione per cui questo foglio sembrava ignorato
 *
 * **Misurato il 24/09/2026**: `--background` dentro AppFlowy risolveva a
 * `220 26% 14%`, cioè il valore **loro**, non il nostro. Non è un errore di
 * valore: è la cascata. Il loro foglio arriva **dopo** il nostro — lo inietta
 * il pacchetto JavaScript a pagina già partita — e a parità di specificità
 * vince chi arriva dopo.
 *
 * `:root:root` ripete il selettore e alza la specificità di un grado: vince
 * sempre, qualunque sia l'ordine di caricamento, e non costringe a mettere
 * `!important` su sessanta righe. È lo stesso trucco che Element usa nel
 * proprio pacchetto (`.cpd-theme-light.cpd-theme-light`) e che il nostro
 * foglio per Element già copia.
 */

/* ────────────────────────────────────────────────── chiaro (predefinito) */
:root:root {
  --background: 40 31% 94.3%;           /* paper */
  --foreground: 220 12% 9.8%;           /* graphite */
  --card: 0 0% 100%;                    /* surface-data */
  --card-foreground: 220 12% 9.8%;
  --popover: 40 27.3% 91.4%;            /* paper-tint */
  --popover-foreground: 220 12% 9.8%;
  --tooltip: 220 12% 9.8%;              /* il rovescio: scuro sul chiaro */
  --tooltip-foreground: 40 31% 94.3%;

  --primary: 348.3 66.7% 21.2%;         /* burgundy */
  --primary-foreground: 40 31% 94.3%;
  --ring: 348.3 66.7% 21.2%;

  --secondary: 40 27.3% 91.4%;
  --secondary-foreground: 222 6% 38%;   /* graphite-500 */
  --muted: 40 27.3% 91.4%;
  --muted-foreground: 222 6% 38%;
  --placeholder: 222 6% 38%;
  --icon: 222 6% 38%;

  --border: 42, 12.8%, 84.7%, 1;        /* hairline — terna con virgola e alfa, come di monte */
  --input: 42, 12.8%, 84.7%, 1;

  --destructive: 354.8 100% 40%;        /* critical, versione chiara */
  --destructive-foreground: 40 31% 94.3%;
  --success: 149.5 49.6% 24.1%;
  --accent: 348.3, 66.7%, 21.2%, 0.06;  /* la velatura d'accento: alfa bassa, come di monte */
  --accent-foreground: 220 12% 9.8%;

  --secondary-background: #F0EDE6;      /* esadecimali di monte: restano esadecimali */
  --input-background: #FFFFFF;
  --selection: #E7DCDF;

  /* ── Un fondo solo ──────────────────────────────────────────────────────
   *
   * AppFlowy ha **tre famiglie** di variabili per lo sfondo, e le usa tutte
   * nella stessa finestra: `--background-primary` sul corpo,
   * `--surface-primary`/`--fill-primary` sui pannelli, `--surface-layer-01`
   * sui contenitori. Il nostro foglio ne vestiva una sola, e il risultato
   * erano **due neri diversi** a due centimetri di distanza — `#21232A` sul
   * corpo e `#272930` sul pannello. Design li ha visti, io li ho misurati.
   *
   * Qui prendono tutte il fondo del tema. Se un giorno servirà una superficie
   * rialzata, sarà un token di Design e non un nero in più trovato per caso.
   */
  /* L'accento, per il pulsante «Share»: il suo ciano è scritto nel
   * pacchetto JavaScript e il proxy lo sostituisce con questa variabile. */
  --xos-accento: #900D2A;

  --background-primary: #EDEAE3;
  --surface-primary: #EDEAE3;
  --fill-primary: #EDEAE3;
  --surface-layer-01: #EDEAE3;
  --surface-container-layer-00: #EDEAE3;
}

/* ──────────────────────────────────────────────────────────────── scuro */
:root:root[data-dark-mode=true] {
  --background: 222 21% 6%;             /* paper */
  --foreground: 40 31% 94.3%;           /* graphite */
  --card: 220 12% 9%;                   /* surface-data */
  --card-foreground: 40 31% 94.3%;
  --popover: 220 12% 13%;               /* paper-tint */
  --popover-foreground: 40 31% 94.3%;
  --tooltip: 40 31% 94.3%;
  --tooltip-foreground: 222 21% 6%;

  --primary: 354.8 100% 70.6%;          /* burgundy */
  --primary-foreground: 222 21% 6%;
  --ring: 354.8 100% 70.6%;

  --secondary: 220 12% 13%;
  --secondary-foreground: 40 8% 72%;    /* graphite-500 */
  --muted: 220 12% 13%;
  --muted-foreground: 40 8% 72%;
  --placeholder: 220 8% 34%;            /* graphite-200 */
  --icon: 40 8% 72%;

  --border: 220, 10%, 26%, 1;           /* hairline */
  --input: 220, 10%, 26%, 1;

  --destructive: 354.8 100% 70.6%;      /* critical */
  --destructive-foreground: 222 21% 6%;
  --success: 150 45% 58%;
  --accent: 354.8, 100%, 70.6%, 0.12;   /* burgundy-wash */
  --accent-foreground: 40 31% 94.3%;

  --secondary-background: #14161B;
  --input-background: #0F1115;
  --selection: #3A2228;
  --scrollbar-thumb: #3A3E46;

  /* Un fondo solo, come nel tema chiaro: qui erano #21232A sul corpo e
   * #272930 sul pannello. Il nero è quello del token, `bg-base`. */
  --xos-accento: #E45361;

  --background-primary: #0B0D11;
  --surface-primary: #0B0D11;
  --fill-primary: #0B0D11;
  --surface-layer-01: #0B0D11;
  --surface-container-layer-00: #0B0D11;
}

/*
 * ── Il marchio di AppFlowy ────────────────────────────────────────────────
 *
 * Trovati **aprendo la pagina con un browser automatico** ed entrando come un
 * utente vero, non indovinati dal pacchetto: ogni riga qui sotto è un
 * elemento che è stato visto sullo schermo, con il suo attributo.
 *
 * Attributi e non classi generate: `aria-label` è scritto dagli autori, una
 * classe `css-zt2pcm` è scritta dal compilatore. La versione è congelata, ma
 * la prima resta vera anche il giorno in cui la si aggiorna.
 *
 * **Quello che non si tocca, e perché.** Il bottone in basso a sinistra
 * accanto al cestino non è un «?»: passandoci sopra dice «Quick Note», ed è
 * una funzione. Il menu «⋯» in alto a destra contiene Duplicate, Move to,
 * Delete. Nessuno dei due nomina AppFlowy, e nasconderli toglierebbe roba
 * utile.
 */

/*
 * Il pulsante «scarica» col logo in alto a destra e il «?» dell'assistenza in
 * basso a destra qui NON si nascondono più: dal 10/10/2026 sono tolti dal
 * sorgente (`web/nostro/src/components/app/header/RightMenu.tsx` e
 * `web/nostro/src/components/_shared/help/Help.tsx`). Un nome nascosto
 * all'occhio e non alla voce era nascosto a metà — un lettore di schermo
 * leggeva «Download AppFlowy» sotto `display: none` — e una regola che
 * nasconde quel che non c'è più confonde chi legge.
 */

/*
 * La linguetta «Publish» dentro Share: pubblicare una pagina la rende
 * leggibile fuori dall'azienda.
 *
 * **La funzione è già spenta in nginx** (403); questa riga toglie la linguetta
 * che non porta più da nessuna parte. Ristretta al popover di Share con la
 * classe stabile di MUI — `MuiPopover-root` è scritta dalla libreria, non
 * generata — perché `[role=tab]:nth-child(2)` da solo colpirebbe la seconda
 * linguetta di qualunque altro gruppo.
 */
.MuiPopover-root [role="tablist"] > [role="tab"]:nth-child(2) {
  display: none !important;
}
img[src*="appflowy"],
img[alt*="AppFlowy" i],
a[href*="appflowy.io"],
a[href*="forum.appflowy"],
a[href*="docs.appflowy"] {
  display: none !important;
}

/*
 * ── Inviti commerciali e intelligenza artificiale ─────────────────────────
 *
 * Trovati aprendo **ogni menu** con il browser automatico, entrati come
 * proprietario dello spazio: quelle voci non esistono sulla pagina chiusa, e
 * una ricerca nel documento non le avrebbe trovate mai.
 *
 * ## Il gruppo commerciale del menu dello spazio
 *
 * «Upgrade to Pro Plan» e «Get AI Max» stanno insieme nell'ultimo gruppo del
 * menu, con il loro separatore. Il gruppo **non ha un attributo suo** — è un
 * `[data-slot=dropdown-menu-group]` come gli altri tre — quindi si prende
 * dall'icona del primo dei due, che è un attributo e non una classe generata.
 *
 * `:last-child` sarebbe stato più corto e sbagliato: l'ultimo gruppo di *ogni*
 * menu a tendina di AppFlowy sparirebbe, e in altri menu l'ultimo gruppo è
 * «Elimina».
 *
 * Si nasconde il **gruppo** e non le due voci, così se ne va anche il
 * separatore: due voci nascoste lasciano una riga grigia che non separa niente.
 */
[data-slot="dropdown-menu-group"]:has(path[d^="M10 12.625V8.25"]) {
  display: none !important;
}

/*
 * ## L'intelligenza artificiale, che qui non è spenta: **non c'è**
 *
 * Il servizio AI di AppFlowy non è configurato in questo stack. I pulsanti
 * però ci sono, e premerli porta a un errore — che è peggio di non averli:
 * chi ci prova crede che il prodotto sia rotto.
 *
 * Nel menu «/» le voci hanno `data-option-key`, scritto dagli autori: due su
 * sedici sono AI e le altre quattordici restano tutte.
 */
button[data-option-key="askAIAnything"],
button[data-option-key="continueWriting"] {
  display: none !important;
}

/* La barra che compare selezionando del testo: le due voci AI, per etichetta. */
button[aria-label="Ask AI Anything"],
button[aria-label="Improve writing"] {
  display: none !important;
}

/*
 * Il «?» accanto a «Import from Notion»: apre la documentazione su
 * appflowy.io. **Si toglie il punto interrogativo, non la voce**: importare da
 * Notion è una funzione vera, la sua guida è un collegamento all'esterno.
 *
 * Ristretto alla voce, riconosciuta dalla sua icona: `[data-slot=tooltip-trigger]`
 * da solo colpirebbe ogni suggerimento dell'applicazione.
 */
[role="menuitem"]:has(path[d^="M3 12c0 2.245"]) [data-slot="tooltip-trigger"] {
  display: none !important;
}

/*
 * ── Lo spazio in fondo, alto quanto il Dock ───────────────────────────────
 *
 * **24 px**, il valore passato da Design. Dentro xOS il riquadro arriva fino
 * in fondo alla finestra e il Dock ci galleggia sopra: senza questo spazio le
 * ultime righe — il cestino di AppFlowy, il campo per scrivere di Element —
 * finiscono sotto il Dock, e si vedono a metà.
 *
 * `padding-bottom` sul corpo e non un margine sul contenitore: un margine
 * sposterebbe anche lo sfondo, e sotto il Dock comparirebbe una striscia di
 * un altro colore.
 *
 * Un valore solo, qui: quando il Dock cambia altezza si cambia questa riga.
 */
body {
  padding-bottom: 24px !important;
  box-sizing: border-box;
}

/*
 * ── Nessun riquadro, nessun margine: tutta la larghezza e tutta l'altezza ──
 *
 * La regola è una sola per tutti i moduli incorniciati (Frappe, AppFlowy,
 * Element): dentro xOS **la cornice è xOS**, e l'applicazione riempie lo
 * spazio fra la banda e la linea del Dock. Un secondo riquadro dentro il
 * primo — un margine, un'ombra, un angolo arrotondato — racconta che sotto
 * c'è un altro prodotto, che è esattamente ciò che si sta togliendo.
 *
 * `padding-bottom` **non si tocca qui**: quello è lo spazio del Dock, e sta
 * nel blocco sopra. Azzerarlo insieme agli altri lati rimetterebbe le ultime
 * righe sotto la linea.
 */
html {
  margin: 0 !important;
  padding: 0 !important;
  width: 100% !important;
  height: 100% !important;
}

body {
  margin: 0 !important;
  padding-top: 0 !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: none !important;
  height: 100% !important;
  /* Una barra orizzontale dentro un riquadro senza margini è quasi sempre un
   * elemento che sborda di pochi pixel, non contenuto da leggere. */
  overflow-x: hidden;
}

#root, body > div:first-of-type {
  width: 100% !important;
  max-width: none !important;
  height: 100% !important;
  margin: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}