/*
 * MendAi Design System — token e componenti.
 *
 * FONTE UNICA dei valori: il preset Tailwind (tailwind.mend-ds.preset.js) li legge
 * da qui tramite var(), non li ricopia. Si cambia un valore qui, e basta.
 * Documentazione e regole d'uso: brain/wiki/11-design-system/design-system.md
 *
 * Stile ricostruito misurando i valori calcolati del template B2base (Webflow),
 * senza copiarne i file né gli asset: le texture sono rifatte in CSS.
 *
 * Tutto è opt-in: le classi .ds-* e lo scope .ds non toccano le pagine esistenti.
 */

:root {
    /* ── Colori ─────────────────────────────────────────────── */
    --ds-ink: #061b31;            /* testo e titoli: blu-notte, mai nero puro */
    --ds-white: #ffffff;
    /* ▶ IL COLORE DEL MARCHIO SI CAMBIA QUI, E SOLO QUI. Le tre sfumature sotto
       ne derivano (blocco @supports più in basso); i valori scritti qui accanto sono
       solo il ripiego per i browser senza colori relativi (pre-2024) e vanno
       riallineati a mano se il colore cambia. */
    --ds-accent: #216351;         /* verde bosco: CTA, stati attivi, link-freccia */
    --ds-accent-light: #74c0ab;   /* alone del pallino badge, inizio gradienti */
    --ds-accent-mist: #a8c9c0;    /* tappa intermedia dei gradienti chiari */
    --ds-accent-deep: #0d3026;    /* fondo dei gradienti scuri */

    --ds-50: #fafafa;             /* superficie delle card */
    --ds-100: #f7f7f7;            /* LINEE della griglia, bordi sottili, hover card */
    --ds-200: #f2f2f2;            /* bordo navbar, input, divider tratteggiato, hover bottone secondario */
    --ds-300: #ededed;
    --ds-400: #e6e6e6;
    --ds-500: #dedede;
    --ds-600: #d9d9d9;            /* bordo input in focus */
    --ds-700: #d1d1d1;
    --ds-800: #c2c2c2;
    --ds-900: #a6a6a6;            /* testo secondario */

    --ds-danger-ink: #3b0b0b;
    --ds-danger-bg: #f8e4e4;
    --ds-success-bg: #ededed;
    --ds-success-ink: #000000;
    --ds-warn-ink: #5c4200;       /* avvisi (derivato: il template non ne ha) */
    --ds-warn-bg: #fbf3dc;
    --ds-check: #000d14;          /* checkbox spuntata */

    /* ── Font ───────────────────────────────────────────────── */
    --ds-font-body: "Google Sans", ui-sans-serif, system-ui, sans-serif;
    --ds-font-heading: "Google Sans Flex", "Google Sans", ui-sans-serif, system-ui, sans-serif;
    --ds-font-mono: "Google Sans Code", ui-monospace, SFMono-Regular, Menlo, monospace;

    /* ── Scala tipografica (desktop; sotto 768px vedi media query) ─ */
    --ds-h1: 3.5rem;      --ds-h1-lh: 110%;
    --ds-h2: 2.5rem;      --ds-h2-lh: 115%;
    --ds-h3: 2rem;        --ds-h3-lh: 120%;
    --ds-h4: 1.75rem;     --ds-h4-lh: 120%;
    --ds-h5: 1.5rem;      --ds-h5-lh: 130%;
    --ds-h6: 1.125rem;    --ds-h6-lh: 130%;
    --ds-text-lg: 1.25rem;
    --ds-text-md: 1.1rem;
    --ds-text-base: 1rem;
    --ds-text-sm: 0.9rem;       /* bottoni, input, label */
    --ds-text-nav: 0.875rem;
    --ds-text-badge: 0.85rem;
    --ds-lh-body: 150%;

    /* ── Raggi ──────────────────────────────────────────────── */
    --ds-radius: 6px;           /* bottoni, card, input, immagini, pannelli */
    --ds-radius-icon: 4px;      /* riquadri icona, pulsante +/− delle FAQ */
    --ds-radius-chip: 2px;      /* chip di metadati, checkbox */
    --ds-radius-dot: 50px;

    /* ── Layout ─────────────────────────────────────────────── */
    --ds-container: 1232px;
    --ds-width-xl: 1138px;
    --ds-width-lg: 896px;
    --ds-width-md: 654px;
    --ds-width-sm: 480px;
    --ds-gutter: 16px;          /* padding del container e delle card */
    --ds-grid-gap: 6px;         /* spazio fra card affiancate: stretto, voluto */
    --ds-section-sm: 48px;
    --ds-section-md: 96px;
    --ds-section-lg: 144px;
    --ds-nav-h: 76px;

    /* ── Linee ──────────────────────────────────────────────── */
    --ds-line: 1px solid var(--ds-100);
    --ds-line-strong: 1px solid var(--ds-200);

    /* ── Ombre (quasi tutto è piatto: solo due livelli) ───────── */
    --ds-shadow-lift: 0 16px 36px rgba(0, 0, 0, 0.12), 0 40px 40px rgba(0, 0, 0, 0.06);
    --ds-shadow-pop: 0 6px 20px rgba(0, 0, 0, 0.03);

    /* ── Movimento ──────────────────────────────────────────── */
    --ds-fast: 0.2s;
    --ds-slow: 0.3s;

    /* ── Gradienti ──────────────────────────────────────────── */
    --ds-grad-hero: linear-gradient(180deg, #fff 25%, var(--ds-accent-mist) 59%, var(--ds-accent) 102%);
    --ds-grad-dark: linear-gradient(180deg, var(--ds-accent), var(--ds-accent-deep));
    --ds-grad-banner: linear-gradient(180deg, var(--ds-accent-light), var(--ds-accent) 50%, var(--ds-accent));
    --ds-grad-footer: linear-gradient(180deg, #fff 30%, var(--ds-accent));
}

/* Le sfumature dell'accento, ricavate in OKLCH (chiarezza + saturazione, stessa tinta).
   Scarti misurati sul verde del template, così col #216351 tornano i valori originali:
   light = +0.30 chiarezza, ×1.13 saturazione · mist = +0.357, ×0.51 · deep = −0.172, ×0.61.
   In @supports perché una variabile con un colore che il browser non capisce non
   ricade sul valore di prima: diventa invalida, e il gradiente sparirebbe. */
@supports (color: oklch(from red l c h)) {
    :root {
        --ds-accent-light: oklch(from var(--ds-accent) calc(l + 0.3) calc(c * 1.13) h);
        --ds-accent-mist: oklch(from var(--ds-accent) calc(l + 0.357) calc(c * 0.51) h);
        --ds-accent-deep: oklch(from var(--ds-accent) calc(l - 0.172) calc(c * 0.61) h);
    }
}

@media (max-width: 991px) {
    :root {
        --ds-section-sm: 44px;
        --ds-section-md: 84px;
        --ds-section-lg: 128px;
        --ds-nav-h: 3.9rem;
    }
}

@media (max-width: 767px) {
    :root {
        --ds-h1: 2.625rem;
        --ds-h2: 1.875rem;
        --ds-h3: 1.5rem;
        --ds-h4: 1.3125rem;
        --ds-h5: 1.125rem;
        --ds-h6: 1rem;
        --ds-text-lg: 1.125rem;
        --ds-section-sm: 40px;
        --ds-section-md: 72px;
        --ds-section-lg: 112px;
    }
}

/* ═════════════════════════════════════════════════════════════
 * Scope: metti .ds sul <body> (o su un wrapper) per le basi.
 * ═════════════════════════════════════════════════════════════ */
.ds {
    margin: 0;
    background: var(--ds-white);
    color: var(--ds-ink);
    font-family: var(--ds-font-body);
    font-size: var(--ds-text-base);
    line-height: var(--ds-lh-body);
    font-weight: 400;
    font-feature-settings: "dlig";
    -webkit-font-smoothing: antialiased;
}
.ds *, .ds *::before, .ds *::after { box-sizing: border-box; }
:where(.ds) :where(button, input, select, textarea) { font: inherit; color: inherit; }   /* specificità zero: le classi .ds-* vincono */

/* ── Titoli: peso 400, mai bold. È metà del carattere dello stile. ── */
.ds-h1, .ds-h2, .ds-h3, .ds-h4, .ds-h5, .ds-h6 {
    font-family: var(--ds-font-heading);
    font-weight: 400;
    letter-spacing: normal;
    margin: 0;
}
.ds-h1 { font-size: var(--ds-h1); line-height: var(--ds-h1-lh); }
.ds-h2 { font-size: var(--ds-h2); line-height: var(--ds-h2-lh); }
.ds-h3 { font-size: var(--ds-h3); line-height: var(--ds-h3-lh); }
.ds-h4 { font-size: var(--ds-h4); line-height: var(--ds-h4-lh); }
.ds-h5 { font-size: var(--ds-h5); line-height: var(--ds-h5-lh); font-weight: 500; }
.ds-h6 { font-size: var(--ds-h6); line-height: var(--ds-h6-lh); font-weight: 500; }

.ds-text-lg { font-size: var(--ds-text-lg); line-height: var(--ds-lh-body); }
.ds-text-md { font-size: var(--ds-text-md); line-height: var(--ds-lh-body); }
.ds-text-sm { font-size: var(--ds-text-sm); line-height: var(--ds-lh-body); }
.ds-muted { opacity: 0.8; }
.ds-muted-60 { opacity: 0.6; }
.ds-secondary { color: var(--ds-900); }

/* ── Badge / eyebrow: mono leggero, maiuscolo, pallino con alone ── */
.ds-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: var(--ds-font-mono);
    font-size: var(--ds-text-badge);
    line-height: var(--ds-text-badge);
    font-weight: 300;
    letter-spacing: 0.6px;
    text-transform: uppercase;
    color: inherit;
}
.ds-badge-dot {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 12px;
    height: 12px;
    flex: 0 0 auto;
}
.ds-badge-dot::before {             /* alone */
    content: "";
    position: absolute;
    width: 10px;
    height: 10px;
    border-radius: var(--ds-radius-dot);
    background: var(--ds-accent-light);
}
.ds-badge-dot::after {              /* pallino */
    content: "";
    position: relative;
    width: 6px;
    height: 6px;
    border-radius: var(--ds-radius-dot);
    background: var(--ds-accent);
}

/* ═════════════════════════════════════════════════════════════
 * LA GRIGLIA A LINEE — il dettaglio che fa lo stile.
 *
 *   .ds-band  = fascia a tutta larghezza, linea sopra e sotto
 *   .ds-rails = container 1232px con linea a sinistra e a destra
 *   .ds-section-gap = aria FRA due fasce: lì le rotaie si interrompono
 *
 * Risultato: rotaie verticali che corrono lungo la pagina, tagliate da
 * linee orizzontali a ogni sezione, e un vuoto bianco senza linee fra
 * una sezione e l'altra.
 * ═════════════════════════════════════════════════════════════ */
.ds-band {
    border-top: var(--ds-line);
    border-bottom: var(--ds-line);
    padding-left: 16px;
    padding-right: 16px;
}
.ds-band.no-bottom { border-bottom: 0; }
@media (max-width: 767px) { .ds-band { padding-left: 1.25rem; padding-right: 1.25rem; } }

.ds-rails {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: var(--ds-container);
    margin-left: auto;
    margin-right: auto;
    padding: var(--ds-gutter);
    border-left: var(--ds-line);
    border-right: var(--ds-line);
}
.ds-rails.flush { padding: 0; }

.ds-section-gap { padding-top: var(--ds-section-md); }
.ds-section-gap.sm { padding-top: var(--ds-section-sm); }
.ds-section-gap.lg { padding-top: var(--ds-section-lg); }

/* Linea piena che separa due .ds-rails impilate nella stessa fascia */
.ds-divider {
    width: 100%;
    max-width: var(--ds-container);
    height: 1px;
    margin-left: auto;
    margin-right: auto;
    background: var(--ds-100);
}

/* Intestazione di sezione: «• NOME» a sinistra, «01» a destra */
.ds-section-title {
    display: flex;
    justify-content: space-between;
    align-items: stretch;
    padding-top: 8px;
    padding-bottom: 8px;
}

/* Divider tratteggiato fra voci di un elenco: 6px pieno, 6px vuoto */
.ds-dash {
    width: 100%;
    height: 1px;
    background-image: repeating-linear-gradient(90deg, var(--ds-200) 0 6px, transparent 6px 12px);
}

/* ═════════════════════════════════════════════════════════════
 * Texture (rifatte in CSS, nessun asset del template)
 * ═════════════════════════════════════════════════════════════ */
.ds-textured { position: relative; isolation: isolate; overflow: hidden; }

/* Vetro scanalato: colonne verticali da 44px */
.ds-tile::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background-image: repeating-linear-gradient(90deg,
        rgba(204, 204, 255, 0.04) 0,
        rgba(255, 255, 255, 0.07) 44px);
}
/* Grana: rumore al 5% */
.ds-noise::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    opacity: 0.05;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.ds-bg-hero   { background-image: var(--ds-grad-hero); }
.ds-bg-dark   { background-image: var(--ds-grad-dark); color: var(--ds-white); }
.ds-bg-banner { background-image: radial-gradient(ellipse 60% 50% at 50% 0, rgba(255, 255, 255, 0.25), transparent 70%), var(--ds-grad-banner); color: var(--ds-white); }
.ds-bg-footer { background-image: var(--ds-grad-footer); }

/* ═════════════════════════════════════════════════════════════
 * Navbar
 * ═════════════════════════════════════════════════════════════ */
.ds-navbar {
    position: sticky;
    top: 0;
    z-index: 50;
    height: var(--ds-nav-h);
    border-bottom: var(--ds-line-strong);
    background: transparent;
}
.ds-navbar-inner {                 /* allineata alle rotaie */
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 1.25rem;
    max-width: var(--ds-container);
    height: 100%;
    margin: 0 auto;
    padding: 0 16px;
    background: var(--ds-white);
    border-left: var(--ds-line);
    border-right: var(--ds-line);
    border-bottom: var(--ds-line);
}
.ds-navbar-inner > :last-child { justify-self: end; display: flex; gap: 0.5rem; white-space: nowrap; }
.ds-navbar-menu { display: flex; align-items: center; }
/* Sotto 992px il menu centrale sparisce: la schermata mette il suo hamburger */
@media (max-width: 991px) {
    .ds-navbar-inner { display: flex; justify-content: space-between; }
    .ds-navbar-menu { display: none; }
}
.ds-nav-link {
    padding: 1.75rem 1rem;
    font-size: var(--ds-text-nav);
    line-height: 1.4;
    color: var(--ds-ink);
    text-decoration: none;
    transition: opacity var(--ds-fast);
}
.ds-nav-link:hover { opacity: 0.5; }
button.ds-nav-link { background: none; border: 0; cursor: pointer; display: inline-flex; align-items: center; gap: 4px; }

/* Voce di un menu a tendina (DERIVATO: il pannello ha gruppi di voci, il template
   no). Sta dentro un .ds-panel; attiva = verde, come la tab a celle. */
.ds-menu { display: flex; flex-direction: column; gap: 2px; padding: 0.375rem; min-width: 13rem; }
.ds-menu-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 0.5rem 0.75rem;
    border-radius: var(--ds-radius);
    font-size: var(--ds-text-nav);
    line-height: 1.4;
    color: var(--ds-ink);
    text-decoration: none;
    transition: background-color var(--ds-fast);
}
.ds-menu-item:hover { background: var(--ds-50); }
.ds-menu-item.is-current { color: var(--ds-accent); font-weight: 500; }
.ds-menu-item svg { width: 16px; height: 16px; flex: 0 0 auto; }
.ds-nav-link.is-current { display: inline-flex; align-items: center; gap: 6px; font-weight: 500; }
.ds-nav-link.is-current::before {
    content: "";
    width: 6px; height: 6px;
    border-radius: var(--ds-radius-dot);
    background: var(--ds-accent);
}

/* Logo (componente <x-ds.logo />): SVG in fill="currentColor", quindi il colore
   è quello del testo che lo contiene. Si dimensiona in altezza, mai in larghezza. */
.ds-logo { display: block; height: 28px; width: auto; flex: 0 0 auto; }
.ds-logo.sm { height: 20px; }
.ds-logo.lg { height: 40px; }
.ds-brand { display: inline-flex; align-items: center; color: var(--ds-ink); text-decoration: none; }
.ds-brand.on-dark { color: var(--ds-white); }

/* Footer: linea sopra, gradiente verso il verde, rotaie fino in fondo */
.ds-footer { margin-top: var(--ds-section-md); border-top: var(--ds-line); }
.ds-footer > .ds-rails { display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem; min-height: 220px; color: var(--ds-white); }

/* ═════════════════════════════════════════════════════════════
 * Bottoni
 * ═════════════════════════════════════════════════════════════ */
.ds-btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 12px 20px;
    border: 0;
    border-radius: var(--ds-radius);
    background: var(--ds-accent);
    color: var(--ds-white);
    font-family: var(--ds-font-body);
    font-size: var(--ds-text-sm);
    line-height: var(--ds-lh-body);
    font-weight: 500;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    transition: all var(--ds-fast);
}
.ds-btn:hover { opacity: 0.8; gap: 8px; }      /* la freccia scivola a destra */
.ds-btn svg { width: 16px; height: 16px; flex: 0 0 auto; }

.ds-btn.secondary {
    background: var(--ds-white);
    color: var(--ds-ink);
    border: var(--ds-line);
}
.ds-btn.secondary:hover { background: var(--ds-200); opacity: 1; }

/* `outline` è anche un'utility Tailwind (`outline-style: solid`, 3px di default),
 * generata appena una vista usa la classe: senza `outline: 0` si somma al bordo. */
.ds-btn.outline {                                 /* su fondo scuro */
    background: transparent;
    color: var(--ds-white);
    border: 1px solid var(--ds-white);
    outline: 0;
}
.ds-btn.outline:hover { background: var(--ds-200); color: var(--ds-ink); opacity: 1; }
.ds-btn.outline:focus-visible { outline: 1px solid var(--ds-white); outline-offset: 2px; }

/* Azione distruttiva (DERIVATO, 2026-09-29): secondario col testo rosso scuro.
   Una classe sua e non `text-ds-danger-ink`, che perde contro .ds-btn.secondary
   (due classi contro una). Nessun bottone rosso pieno: il verde resta l'unico accento. */
.ds-btn.secondary.danger, .ds-btn.danger { background: var(--ds-white); color: var(--ds-danger-ink); border: var(--ds-line); }
.ds-btn.danger:hover { background: var(--ds-danger-bg); opacity: 1; }

.ds-btn.sm { padding: 6px 16px; }
.ds-btn.icon { padding: 6px; }                  /* bottone solo icona, nelle righe */
.ds-btn.block { width: 100%; }
.ds-btn:disabled, .ds-btn[aria-disabled="true"] { opacity: 0.4; cursor: default; }

/* Link con freccia: verde, lo spazio cresce all'hover */
.ds-link-arrow {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    color: var(--ds-accent);
    font-weight: 400;
    text-decoration: none;
    transition: gap var(--ds-slow);
}
.ds-link-arrow:hover { gap: 1rem; }

/* ═════════════════════════════════════════════════════════════
 * Superfici
 * ═════════════════════════════════════════════════════════════ */
.ds-card {                         /* nessun bordo, nessuna ombra: solo un grigio appena */
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding: 1rem;
    border-radius: var(--ds-radius);
    background: var(--ds-50);
}
.ds-card.hoverable { transition: background-color var(--ds-slow); }
.ds-card.hoverable:hover { background: var(--ds-100); }
.ds-card.lg { padding: 1.5rem; }
.ds-card.outlined { border: var(--ds-line); }
.ds-card.featured {                /* card in evidenza: gradiente scuro + texture + ombra */
    position: relative;
    isolation: isolate;
    overflow: hidden;
    color: var(--ds-white);
    background-image: var(--ds-grad-dark);
    box-shadow: var(--ds-shadow-lift);
}

.ds-grid { display: grid; gap: var(--ds-grid-gap); }
.ds-grid.cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ds-grid.cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.ds-grid.cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 991px) { .ds-grid.cols-3, .ds-grid.cols-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 767px) { .ds-grid.cols-2, .ds-grid.cols-3, .ds-grid.cols-4 { grid-template-columns: 1fr; } }

.ds-icon-box {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 40px;
    height: 40px;
    border: var(--ds-line);
    border-radius: var(--ds-radius-icon);
    background: var(--ds-white);
}
.ds-icon-box.lg { width: 80px; height: 80px; }
.ds-icon-box svg { width: 24px; height: 24px; }

.ds-chip {                          /* metadati: data, categoria, stato */
    display: inline-block;
    padding: 6px 8px;
    border-radius: var(--ds-radius-chip);
    background: var(--ds-50);
    font-family: var(--ds-font-mono);
    font-size: var(--ds-text-badge);
    line-height: 1;
    font-weight: 300;
    letter-spacing: 0.6px;
    text-transform: uppercase;
}
.ds-chip.on-card { background: var(--ds-white); }

.ds-panel {                         /* dropdown, popover, menu */
    padding: 1.5rem;
    border: var(--ds-line);
    border-radius: var(--ds-radius);
    background: var(--ds-white);
    box-shadow: var(--ds-shadow-pop);
}

.ds-lift { box-shadow: var(--ds-shadow-lift); }

/* ═════════════════════════════════════════════════════════════
 * Form
 * ═════════════════════════════════════════════════════════════ */
.ds-label {
    display: block;
    margin-bottom: 0.375rem;
    font-size: var(--ds-text-sm);
    line-height: var(--ds-lh-body);
    font-weight: 400;
}
.ds-input {
    display: block;
    width: 100%;
    min-height: 3rem;
    padding: 0.875rem 1rem;
    border: var(--ds-line-strong);
    border-radius: var(--ds-radius);
    background: var(--ds-white);
    color: var(--ds-ink);
    font-family: var(--ds-font-body);
    font-size: var(--ds-text-sm);
    line-height: var(--ds-text-sm);
    font-weight: 500;
    outline: none;
    transition: border-color var(--ds-fast);
}
.ds-input::placeholder { color: rgba(0, 0, 0, 0.6); font-weight: 400; }
.ds-input:focus { border-color: var(--ds-600); }
textarea.ds-input { min-height: 14rem; padding-top: 1rem; line-height: var(--ds-lh-body); }
.ds-input[aria-invalid="true"] { border-color: var(--ds-danger-ink); }

.ds-check {
    width: 0.875rem;
    height: 0.875rem;
    margin: 0 0.5rem 0 0;
    border-radius: var(--ds-radius-chip);
    accent-color: var(--ds-check);
}

.ds-alert-error { padding: 0.75rem; background: var(--ds-danger-bg); color: var(--ds-danger-ink); border-radius: var(--ds-radius); }
.ds-alert-success { padding: 1.25rem; background: var(--ds-success-bg); color: var(--ds-success-ink); border-radius: var(--ds-radius); }
.ds-alert-warn { padding: 0.75rem; background: var(--ds-warn-bg); color: var(--ds-warn-ink); border-radius: var(--ds-radius); }
.ds-warn { color: var(--ds-warn-ink); }

/* ═════════════════════════════════════════════════════════════
 * Tab
 * ═════════════════════════════════════════════════════════════ */
/* Tab a pillola (filtri, categorie) */
.ds-tabs { display: flex; flex-wrap: wrap; gap: 6px; }
.ds-tab {
    padding: 0.5rem 1rem;
    border: var(--ds-line);
    border-radius: var(--ds-radius);
    background: transparent;
    color: var(--ds-ink);
    font-size: var(--ds-text-base);
    font-weight: 400;
    letter-spacing: 0.02em;
    cursor: pointer;
    text-decoration: none;
    transition: all var(--ds-fast);
}
.ds-tab.is-active, .ds-tab[aria-selected="true"] {
    border-color: var(--ds-accent);
    background: var(--ds-accent);
    color: var(--ds-white);
}

/* Tab a celle (navigazione principale di una sezione) */
.ds-tabs-cells {
    display: flex;
    margin-left: calc(-1 * var(--ds-gutter));
    margin-right: calc(-1 * var(--ds-gutter));
    border-top: var(--ds-line);
}
.ds-tab-cell {
    flex: 1 1 0%;
    padding: 1rem;
    border-right: var(--ds-line);
    border-bottom: 1px solid var(--ds-100);
    background: transparent;
    color: var(--ds-ink);
    text-align: center;
    text-decoration: none;
    cursor: pointer;
}
.ds-tab-cell:last-child { border-right: 0; }
.ds-tab-cell.is-active, .ds-tab-cell[aria-selected="true"] {
    border-bottom-color: var(--ds-accent);
    color: var(--ds-accent);
}

/* ═════════════════════════════════════════════════════════════
 * Accordion (FAQ)
 * ═════════════════════════════════════════════════════════════ */
.ds-accordion-list { display: flex; flex-direction: column; gap: 6px; }
.ds-accordion {
    padding: 1.5rem;
    border-radius: var(--ds-radius);
    background: var(--ds-50);
    cursor: pointer;
}
.ds-accordion > summary {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    list-style: none;
    font-size: var(--ds-text-md);
    line-height: var(--ds-lh-body);
}
.ds-accordion > summary::-webkit-details-marker { display: none; }
.ds-accordion > summary::after {        /* il + in un riquadro da 32px */
    content: "";
    flex: 0 0 auto;
    width: 32px;
    height: 32px;
    border: var(--ds-line-strong);
    border-radius: var(--ds-radius-icon);
    background:
        linear-gradient(var(--ds-ink), var(--ds-ink)) center / 10px 2px no-repeat,
        linear-gradient(var(--ds-ink), var(--ds-ink)) center / 2px 10px no-repeat;
}
.ds-accordion[open] > summary::after {
    background: linear-gradient(var(--ds-ink), var(--ds-ink)) center / 10px 2px no-repeat;
}
.ds-accordion > :not(summary) { padding-top: 0.5rem; opacity: 0.8; }

/* ═════════════════════════════════════════════════════════════
 * Elenchi e tabelle (DERIVATI: il template non ha tabelle,
 * questi applicano le sue regole alle schermate del pannello)
 * ═════════════════════════════════════════════════════════════ */
.ds-list-row {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem 0;
    border-bottom: var(--ds-line);
    transition: background-color var(--ds-slow), padding-left var(--ds-slow);
}
.ds-list-row:hover { background: var(--ds-50); }
.ds-list-row:not(.still):hover { padding-left: 1rem; }   /* .still = righe con controlli: non si spostano */
.ds-list-row:last-child { border-bottom: 0; }

.ds-table { width: 100%; border-collapse: collapse; font-size: var(--ds-text-sm); }
.ds-table th {
    padding: 0.75rem 1rem;
    border-bottom: var(--ds-line-strong);
    text-align: left;
    font-family: var(--ds-font-mono);
    font-size: var(--ds-text-badge);
    font-weight: 300;
    letter-spacing: 0.6px;
    text-transform: uppercase;
    color: var(--ds-ink);
}
.ds-table td { padding: 0.875rem 1rem; border-bottom: var(--ds-line); }
.ds-table tbody tr { transition: background-color var(--ds-slow); }
.ds-table tbody tr:hover { background: var(--ds-50); }

/* Stato con pallino (derivato dal badge) */
.ds-status { display: inline-flex; align-items: center; gap: 6px; font-size: var(--ds-text-sm); }
.ds-status::before { content: ""; width: 6px; height: 6px; border-radius: var(--ds-radius-dot); background: currentColor; }
.ds-status.ok { color: var(--ds-accent); }
.ds-status.off { color: var(--ds-900); }
.ds-status.err { color: var(--ds-danger-ink); }
.ds-status.warn { color: var(--ds-warn-ink); }   /* in attesa, da guardare (derivato) */

/* Link nel testo: verde, sottolineato solo all'hover */
.ds-link { color: var(--ds-accent); text-decoration: none; }
.ds-link:hover { text-decoration: underline; }

/* ═════════════════════════════════════════════════════════════
 * Utility
 * ═════════════════════════════════════════════════════════════ */
.ds-container-xl { max-width: var(--ds-width-xl); margin-inline: auto; width: 100%; }
.ds-container-lg { max-width: var(--ds-width-lg); margin-inline: auto; width: 100%; }
.ds-container-md { max-width: var(--ds-width-md); margin-inline: auto; width: 100%; }
.ds-container-sm { max-width: var(--ds-width-sm); margin-inline: auto; width: 100%; }

@media (prefers-reduced-motion: reduce) {
    .ds-btn, .ds-link-arrow, .ds-card, .ds-list-row, .ds-nav-link, .ds-tab { transition: none; }
}