/*
 * PLANNER UI styles
 * ─────────────────
 * Conventions in this file:
 *
 * 1. Themes are toggled via html[data-theme="dark"] (set together with
 *    data-bs-theme so Bootstrap also adapts). All tokens that need to
 *    change between light and dark live in :root + the dark block at
 *    the top of the file. Cromatic tokens are duplicated; dimensional
 *    ones (--app-space-*, --app-text-*, fields padding) only live in
 *    :root.
 *
 * 2. Token families:
 *      - Surfaces / text: --app-surface, --app-heading, --app-text, …
 *      - Field stack:     --app-field-{border,background,text,…}
 *      - Gradients:       --app-gradient-{primary,surface,field,…}
 *      - Semantic:        --app-{success,warning,error,info}-{text,bg,border}
 *      - Spacing:         --app-space-{2xs..3xl} (4px base)
 *      - Typography:      --app-text-{2xs..3xl}
 *
 * 3. Bootstrap radius tokens stay aligned with Bootstrap defaults.
 *    Custom components should prefer those tokens instead of local
 *    hardcoded radius values.
 *
 * 4. !important is used heavily (~260 times) for two legitimate reasons:
 *      a. Beating Bootstrap defaults on shared primitives (.btn,
 *         .form-control, .alert, .accordion-button, .modal-*).
 *      b. As a stylistic convention when a rule is a deliberate "strong
 *         override" — every property in such a block carries it, for
 *         readability. New code should follow the same pattern: either
 *         no !important at all, or all properties of the override
 *         block carry it.
 *
 * 5. Dark theme rules cluster near the bottom of the file inside one
 *    big "Global dark theme overrides" comment. Component-specific
 *    dark refinements live next to it. Keep it that way: the cascade
 *    relies on dark rules appearing after their light counterparts.
 *
 * 6. New components: prefer var(--app-…) over hex literals. The audit
 *    that produced these tokens pruned ~150 hardcoded #ffffff/#0f172a
 *    in one pass — every new literal is a future debt.
 */

:root {
    /* Theme tokens: semantic colors, surfaces and shadows shared across the UI. */
    --bs-border-radius: 0.375rem;
    --bs-border-radius-sm: 0.25rem;
    --bs-border-radius-lg: 0.5rem;
    --bs-border-radius-xl: 1rem;
    --bs-border-radius-xxl: 2rem;
    --bs-border-radius-pill: 50rem;
    --app-radius: var(--bs-border-radius);
    --app-radius-sm: var(--bs-border-radius-sm);
    --app-radius-lg: var(--bs-border-radius-lg);
    --app-radius-pill: var(--bs-border-radius-pill);
    --bs-btn-border-radius: var(--app-radius);
    --bs-btn-border-radius-sm: var(--app-radius-sm);
    --bs-btn-border-radius-lg: var(--app-radius-lg);
    --bs-card-border-radius: var(--app-radius);
    --bs-modal-border-radius: var(--app-radius-lg);
    --bs-dropdown-border-radius: var(--app-radius);
    --bs-input-border-radius: var(--app-radius);
    --bs-input-border-radius-sm: var(--app-radius-sm);
    --bs-input-border-radius-lg: var(--app-radius-lg);
    --app-text: #334155;
    --app-heading: #0f172a;
    --app-muted: #64748b;
    --app-border: #e2e8f0;
    --app-border-strong: #374151;
    --app-border-hover: #cbd5e1;
    --app-text-soft: #475569;
    --app-link-text: #1d4ed8;
    --app-btn-close-filter: none;
    --app-surface: #ffffff;
    --app-surface-muted: #f5f6f7;
    --app-surface-raised: #ffffff;
    --app-surface-deep: #f8fafc;
    --app-table-stripe: #f1f3f6;
    --app-table-hover: #e7ebef;
    --app-primary: #2563eb;
    --app-primary-hover: #1e3a8a;
    /* Accent = color of strips, tinted borders and callouts.
       Same value as primary today, kept as a separate token so the
       two can diverge later (e.g. per-brand strip color) without a
       product-wide refactor. */
    --app-accent: #2563eb;
    --app-accent-strong: #1e3a8a;
    --app-brand-blue: #1e3a8a;
    --app-ui-blue: #2563eb;
    --app-ui-sky: #38bdf8;
    --app-gradient-primary: linear-gradient(90deg, #1e3a8a 0%, #2563eb 52%, #38bdf8 100%);
    --app-logo-gradient: linear-gradient(90deg, #1e3a8a 0%, #2563eb 12.5%, #2aa7df 25%, #2563eb 37.5%, #1e3a8a 50%, #2563eb 62.5%, #2aa7df 75%, #2563eb 87.5%, #1e3a8a 100%);
    --app-gradient-surface: var(--app-surface);
    --app-gradient-surface-raised: var(--app-surface);
    --app-gradient-surface-muted: var(--app-surface-muted);
    --app-field-padding-y: 7px;
    --app-field-padding-x: 9px;
    --app-field-border: var(--app-border);
    --app-field-background: #f1f5f9;
    --app-field-text: var(--app-text);
    --app-field-placeholder: #7b8aa0;
    --app-field-shadow: none;
    --app-field-hover-border: #cfd8e2;
    --app-field-hover-background: #ffffff;
    --app-field-hover-shadow: none;
    --app-field-focus-border: #2563eb;
    --app-field-focus-background: #ffffff;
    --app-field-focus-shadow:
        0 0 0 1px rgba(15, 23, 42, 0.12),
        0 0 0 4px rgba(15, 23, 42, 0.06);
    --app-strip-height-xs: 4px;
    --app-strip-height-sm: 5px;
    --app-strip-height-lg: 10px;
    --app-strip-opacity-strong: 1;
    --app-accent-strip-height: var(--app-strip-height-sm);
    --app-accent-strip-opacity: var(--app-strip-opacity-strong);
    --app-accent-strip-offset: 0;
    --app-shadow-soft: 0 8px 18px rgba(15, 23, 42, 0.05);
    --app-focus-ring: rgba(59, 130, 246, 0.16);
    /* Selected-state tokens: shared vocabulary for the "this is the active
       card / the active row / the selected day" highlight. Two intensities:
       - STRONG (wash + ring + strip): for selected cards (provider, help nav).
       - SOFT (wash-soft + strip on first cell): for rows and calendar days.
       Dark mirrors the same shape so the highlight reads consistently in
       both themes. */
    --app-selected-strip: #2563eb;
    --app-selected-border: #93c5fd;
    --tint-strip-width: var(--app-strip-height-sm);
    --app-selected-wash: color-mix(in srgb, #2563eb 13%, #ffffff);
    --app-selected-wash-soft: color-mix(in srgb, #2563eb 9%, #ffffff);
    --app-header-actions-gap: 12px;
    --app-icon-action-size: 34px;
    --app-success-text: #15803d;
    --app-success-bg: #ecfdf3;
    --app-success-border: #bbf7d0;
    --app-success-fill: #15803d;
    --app-success-fill-hover: #14532d;
    --app-success-fill-text: #ffffff;
    --app-warning-text: #b45309;
    --app-warning-bg: #fff7ed;
    --app-warning-border: #fed7aa;
    --app-warning-fill: #f59e0b;
    /* CDX-559: amber-600 → amber-700 per step hover -15 L, coerente con success (-9),
       error (-13), ai (-15). Era -6, percettivamente meno responsivo. Simmetrico al fix
       analogo dark di CDX-557. */
    --app-warning-fill-hover: #b45309;
    --app-warning-fill-text: #451a03;
    --app-error-text: #dc2626;
    --app-error-bg: #fef3f2;
    --app-error-border: #fecaca;
    --app-error-fill: #dc2626;
    --app-error-fill-hover: #991b1b;
    --app-error-fill-text: #ffffff;
    --app-info-text: #1d4ed8;
    --app-info-bg: #eff6ff;
    --app-info-border: #bfdbfe;
    /* CDX-560: primary diventa famiglia token-based (era hex hardcoded #2563eb/#1e3a8a in
       .btn-primary-ui). Light: Blue-600 → Blue-800 step -9 L, coerente con success (-9). */
    --app-primary-fill: #2563eb;
    --app-primary-fill-hover: #1e40af;
    --app-primary-fill-text: #ffffff;
    --app-ai-text: #6d28d9;
    --app-ai-bg: #f5f3ff;
    --app-ai-border: #ddd6fe;
    --app-ai-fill: #6d28d9;
    --app-ai-fill-hover: #4c1d95;
    --app-ai-fill-text: #ffffff;
    /* Bootstrap tooltip override — look "card flottante" coerente cross-tema.
       Light: bg scuro (heading slate) + text bianco; Dark: bg slate medio
       (surface-raised, più chiaro del bg pagina) + text quasi-bianco. */
    --bs-tooltip-bg: var(--app-heading);
    --bs-tooltip-color: var(--app-surface-raised);
    /* AI provider brand accents — colori identità del provider AI applicati
       come tinted accent sulle card in /ai-configs.php. Sono brand piattaforma
       (Google blue, Anthropic rust, OpenAI green, ecc.), non token semantici
       del progetto: non riusarli fuori dalle config-provider-card.
       Light = dark (luminance > 70 per tutti, niente mutazione automatica). */
    --provider-gemini-accent: #1a73e8;
    --provider-anthropic-accent: #cc785c;
    --provider-openai-accent: #10a37f;
    --provider-runway-accent: #8b5cf6;
    --provider-replicate-accent: #ef4444;
    --provider-default-accent: #64748b;
    /* CDX-472: token derivati provider AI (formula identica ai social). */
    --provider-gemini-strong-light: color-mix(in srgb, var(--provider-gemini-accent) 72%, var(--app-heading) 28%);
    --provider-gemini-strong-dark: color-mix(in srgb, var(--provider-gemini-accent) 58%, #f8fafc 42%);
    --provider-gemini-bg-dark: color-mix(in srgb, var(--provider-gemini-accent) 8%, var(--app-surface) 92%);
    --provider-anthropic-strong-light: color-mix(in srgb, var(--provider-anthropic-accent) 72%, var(--app-heading) 28%);
    --provider-anthropic-strong-dark: color-mix(in srgb, var(--provider-anthropic-accent) 58%, #f8fafc 42%);
    --provider-anthropic-bg-dark: color-mix(in srgb, var(--provider-anthropic-accent) 8%, var(--app-surface) 92%);
    --provider-openai-strong-light: color-mix(in srgb, var(--provider-openai-accent) 72%, var(--app-heading) 28%);
    --provider-openai-strong-dark: color-mix(in srgb, var(--provider-openai-accent) 58%, #f8fafc 42%);
    --provider-openai-bg-dark: color-mix(in srgb, var(--provider-openai-accent) 8%, var(--app-surface) 92%);
    --provider-runway-strong-light: color-mix(in srgb, var(--provider-runway-accent) 72%, var(--app-heading) 28%);
    --provider-runway-strong-dark: color-mix(in srgb, var(--provider-runway-accent) 58%, #f8fafc 42%);
    --provider-runway-bg-dark: color-mix(in srgb, var(--provider-runway-accent) 8%, var(--app-surface) 92%);
    --provider-replicate-strong-light: color-mix(in srgb, var(--provider-replicate-accent) 72%, var(--app-heading) 28%);
    --provider-replicate-strong-dark: color-mix(in srgb, var(--provider-replicate-accent) 58%, #f8fafc 42%);
    --provider-replicate-bg-dark: color-mix(in srgb, var(--provider-replicate-accent) 8%, var(--app-surface) 92%);
    --provider-default-strong-light: color-mix(in srgb, var(--provider-default-accent) 72%, var(--app-heading) 28%);
    --provider-default-strong-dark: color-mix(in srgb, var(--provider-default-accent) 58%, #f8fafc 42%);
    --provider-default-bg-dark: color-mix(in srgb, var(--provider-default-accent) 8%, var(--app-surface) 92%);
    /* Social network brand accents — colori identità della piattaforma social
       applicati come tinted accent su card config sociale, planner-day-item,
       calendari e card draft. Brand piattaforma, non token semantici.
       I 3 social con luminance < 70 e chroma < 30 (tiktok, x, threads) hanno
       un *-accent-dark a #94a3b8 per leggibilità in dark mode. Gli altri 5
       hanno light = dark. */
    --social-instagram-accent: #c13584;
    --social-instagram-surface: #fdf2f8;
    --social-facebook-accent: #1877f2;
    --social-facebook-surface: #eff6ff;
    --social-tiktok-accent: #111111;
    --social-tiktok-accent-dark: #94a3b8;
    --social-tiktok-surface: #eef1f4;
    --social-pinterest-accent: #bd081c;
    --social-pinterest-surface: #fff1f2;
    --social-linkedin-accent: #0a66c2;
    --social-linkedin-surface: #eff6ff;
    --social-youtube-accent: #ff0000;
    --social-youtube-surface: #fef2f2;
    --social-x-accent: #1f2937;
    --social-x-accent-dark: #94a3b8;
    --social-x-surface: #f4f6f8;
    --social-threads-accent: #111111;
    --social-threads-accent-dark: #94a3b8;
    --social-threads-surface: #f5f6f7;
    --social-default-accent: #475569;
    --social-default-surface: #f5f6f7;
    /* CDX-472: token derivati pre-named per ogni brand. Le 3 formule canoniche:
       - strong-light = 72% accent + 28% --app-heading → testo/border su bg chiaro
       - strong-dark  = 58% accent (o accent-dark) + 42% #f8fafc → testo/border su bg scuro
       - bg-dark      = 8% accent (o accent-dark) + 92% --app-surface → bg card in dark
       I consumatori (.planner-day-item, .config-provider-card, ecc.) NON eseguono più
       color-mix inline. Cambiare le percentuali = cambiare solo questi token. */
    --social-instagram-strong-light: color-mix(in srgb, var(--social-instagram-accent) 72%, var(--app-heading) 28%);
    --social-instagram-strong-dark: color-mix(in srgb, var(--social-instagram-accent) 58%, #f8fafc 42%);
    --social-instagram-bg-dark: color-mix(in srgb, var(--social-instagram-accent) 8%, var(--app-surface) 92%);
    --social-facebook-strong-light: color-mix(in srgb, var(--social-facebook-accent) 72%, var(--app-heading) 28%);
    --social-facebook-strong-dark: color-mix(in srgb, var(--social-facebook-accent) 58%, #f8fafc 42%);
    --social-facebook-bg-dark: color-mix(in srgb, var(--social-facebook-accent) 8%, var(--app-surface) 92%);
    --social-tiktok-strong-light: color-mix(in srgb, var(--social-tiktok-accent) 72%, var(--app-heading) 28%);
    --social-tiktok-strong-dark: color-mix(in srgb, var(--social-tiktok-accent-dark) 58%, #f8fafc 42%);
    --social-tiktok-bg-dark: color-mix(in srgb, var(--social-tiktok-accent-dark) 8%, var(--app-surface) 92%);
    --social-pinterest-strong-light: color-mix(in srgb, var(--social-pinterest-accent) 72%, var(--app-heading) 28%);
    --social-pinterest-strong-dark: color-mix(in srgb, var(--social-pinterest-accent) 58%, #f8fafc 42%);
    --social-pinterest-bg-dark: color-mix(in srgb, var(--social-pinterest-accent) 8%, var(--app-surface) 92%);
    --social-linkedin-strong-light: color-mix(in srgb, var(--social-linkedin-accent) 72%, var(--app-heading) 28%);
    --social-linkedin-strong-dark: color-mix(in srgb, var(--social-linkedin-accent) 58%, #f8fafc 42%);
    --social-linkedin-bg-dark: color-mix(in srgb, var(--social-linkedin-accent) 8%, var(--app-surface) 92%);
    --social-youtube-strong-light: color-mix(in srgb, var(--social-youtube-accent) 72%, var(--app-heading) 28%);
    --social-youtube-strong-dark: color-mix(in srgb, var(--social-youtube-accent) 58%, #f8fafc 42%);
    --social-youtube-bg-dark: color-mix(in srgb, var(--social-youtube-accent) 8%, var(--app-surface) 92%);
    --social-x-strong-light: color-mix(in srgb, var(--social-x-accent) 72%, var(--app-heading) 28%);
    --social-x-strong-dark: color-mix(in srgb, var(--social-x-accent-dark) 58%, #f8fafc 42%);
    --social-x-bg-dark: color-mix(in srgb, var(--social-x-accent-dark) 8%, var(--app-surface) 92%);
    --social-threads-strong-light: color-mix(in srgb, var(--social-threads-accent) 72%, var(--app-heading) 28%);
    --social-threads-strong-dark: color-mix(in srgb, var(--social-threads-accent-dark) 58%, #f8fafc 42%);
    --social-threads-bg-dark: color-mix(in srgb, var(--social-threads-accent-dark) 8%, var(--app-surface) 92%);
    --social-default-strong-light: color-mix(in srgb, var(--social-default-accent) 72%, var(--app-heading) 28%);
    --social-default-strong-dark: color-mix(in srgb, var(--social-default-accent) 58%, #f8fafc 42%);
    --social-default-bg-dark: color-mix(in srgb, var(--social-default-accent) 8%, var(--app-surface) 92%);
    /* Strategy / content rule accents — colori identità della strategia
       editoriale (bucket_key) applicati come tinted accent su content-rule-card,
       chip strategy nel calendario e card draft. Sono token semantici interni
       (b2b/editorial/general/promo/value/visual), non brand piattaforma.
       Light = dark per tutti (luminance > 70 e/o chroma > 30, niente mutazione). */
    --strategy-b2b-accent: #4338ca;
    --strategy-b2b-surface: #eef2ff;
    --strategy-editorial-accent: #0f766e;
    --strategy-editorial-surface: #f0fdfa;
    --strategy-general-accent: #1e3a8a;
    --strategy-general-surface: #eff6ff;
    --strategy-promo-accent: #15803d;
    --strategy-promo-surface: #f0fdf4;
    --strategy-value-accent: #9f1239;
    --strategy-value-surface: #fff1f2;
    --strategy-visual-accent: #7c3aed;
    --strategy-visual-surface: #f5f3ff;
    --strategy-default-accent: #475569;
    --strategy-default-surface: #f5f6f7;
    /* CDX-472: token derivati strategy (formula identica ai social). */
    --strategy-b2b-strong-light: color-mix(in srgb, var(--strategy-b2b-accent) 72%, var(--app-heading) 28%);
    --strategy-b2b-strong-dark: color-mix(in srgb, var(--strategy-b2b-accent) 58%, #f8fafc 42%);
    --strategy-b2b-bg-dark: color-mix(in srgb, var(--strategy-b2b-accent) 8%, var(--app-surface) 92%);
    --strategy-editorial-strong-light: color-mix(in srgb, var(--strategy-editorial-accent) 72%, var(--app-heading) 28%);
    --strategy-editorial-strong-dark: color-mix(in srgb, var(--strategy-editorial-accent) 58%, #f8fafc 42%);
    --strategy-editorial-bg-dark: color-mix(in srgb, var(--strategy-editorial-accent) 8%, var(--app-surface) 92%);
    --strategy-general-strong-light: color-mix(in srgb, var(--strategy-general-accent) 72%, var(--app-heading) 28%);
    --strategy-general-strong-dark: color-mix(in srgb, var(--strategy-general-accent) 58%, #f8fafc 42%);
    --strategy-general-bg-dark: color-mix(in srgb, var(--strategy-general-accent) 8%, var(--app-surface) 92%);
    --strategy-promo-strong-light: color-mix(in srgb, var(--strategy-promo-accent) 72%, var(--app-heading) 28%);
    --strategy-promo-strong-dark: color-mix(in srgb, var(--strategy-promo-accent) 58%, #f8fafc 42%);
    --strategy-promo-bg-dark: color-mix(in srgb, var(--strategy-promo-accent) 8%, var(--app-surface) 92%);
    --strategy-value-strong-light: color-mix(in srgb, var(--strategy-value-accent) 72%, var(--app-heading) 28%);
    --strategy-value-strong-dark: color-mix(in srgb, var(--strategy-value-accent) 58%, #f8fafc 42%);
    --strategy-value-bg-dark: color-mix(in srgb, var(--strategy-value-accent) 8%, var(--app-surface) 92%);
    --strategy-visual-strong-light: color-mix(in srgb, var(--strategy-visual-accent) 72%, var(--app-heading) 28%);
    --strategy-visual-strong-dark: color-mix(in srgb, var(--strategy-visual-accent) 58%, #f8fafc 42%);
    --strategy-visual-bg-dark: color-mix(in srgb, var(--strategy-visual-accent) 8%, var(--app-surface) 92%);
    --strategy-default-strong-light: color-mix(in srgb, var(--strategy-default-accent) 72%, var(--app-heading) 28%);
    --strategy-default-strong-dark: color-mix(in srgb, var(--strategy-default-accent) 58%, #f8fafc 42%);
    --strategy-default-bg-dark: color-mix(in srgb, var(--strategy-default-accent) 8%, var(--app-surface) 92%);
    /* Spacing scale — value = name, 2 px grid up to 24 px then 32 / 48.
       Prefer these tokens over raw pixel values in new components;
       existing rules migrate opportunistically when touched. */
    --app-space-2: 2px;
    --app-space-4: 4px;
    --app-space-6: 6px;
    --app-space-8: 8px;
    --app-space-10: 10px;
    --app-space-12: 12px;
    --app-space-14: 14px;
    --app-space-16: 16px;
    --app-space-18: 18px;
    --app-space-20: 20px;
    --app-space-22: 22px;
    --app-space-24: 24px;
    --app-space-32: 32px;
    --app-space-48: 48px;
    --app-text-2xs: 0.66rem;
    --app-text-xs: 0.72rem;
    --app-text-sm: 0.84rem;
    --app-text-md: 0.96rem;
    --app-text-lg: 1.08rem;
    --app-text-xl: 1.35rem;
    --app-text-2xl: 1.72rem;
    --app-text-3xl: 2.25rem;

    /* Dashboard card accent palette (CDX-661): 10 hue distinti per identificare
       univocamente i moduli sulla dashboard e nel nav globale. Tailwind-500 in
       light (più saturi, "pop" su sfondo chiaro), Tailwind-400 in dark per
       contrast su navy. Inizialmente provati Tailwind-600 in light ma percepiti
       troppo "spenti" rispetto ai chiari dark (follow-up 2026-05-18 f). */
    --dashboard-card-accent-topic-discovery: #3b82f6;        /* blu */
    --dashboard-card-accent-topics: #14b8a6;                 /* teal */
    --dashboard-card-accent-monthly-social-plan: #8b5cf6;    /* viola */
    --dashboard-card-accent-post-drafts: #f59e0b;            /* oro */
    --dashboard-card-accent-publishing-calendar: #22c55e;    /* verde */
    --dashboard-card-accent-inbox-ai: #6366f1;               /* indigo */
    --dashboard-card-accent-blog-planner: #ef4444;           /* rosso */
    --dashboard-card-accent-blog-articles: #ec4899;          /* rosa */
    --dashboard-card-accent-verticals: #d946ef;              /* fucsia */
    --dashboard-card-accent-help: #64748b;                   /* grigio (slate-500) */
}

html[data-theme="light"] {
    color-scheme: light;
}

/* Allinea le superfici dei modal Bootstrap ai token app.
 * BS dichiara --bs-modal-bg direttamente su .modal, quindi un override su :root non vince.
 * Ridefinire la variabile su .modal stesso (stessa specificità di BS, ma file caricato dopo). */
.modal {
    --bs-modal-bg: var(--app-surface);
    --bs-modal-color: var(--app-text);
    --bs-modal-border-color: var(--app-border);
    --bs-modal-header-border-color: var(--app-border);
    --bs-modal-footer-border-color: var(--app-border);
}

/* Tinta contestuale del modal-header: se --tint-color è impostato sul .modal-content
 * (lo fa il refine modal con il colore del social), compare una strip e un tono di fondo.
 * Senza --tint-color l'effetto è invisibile: compatibile con tutti gli altri modal. */
.modal-header {
    position: relative;
    padding: 10px 16px;
    background: color-mix(in srgb, var(--tint-color, transparent) 9%, transparent);
}

.modal-header::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -1px;
    height: 3px;
    background: var(--tint-color, transparent);
    pointer-events: none;
}

.modal-title {
    font-size: 1rem;
    line-height: 1.3;
}

.modal-footer {
    padding: 8px 12px;
    gap: 6px;
}

.modal-footer .btn-ui,
.modal-footer .btn-login,
.modal-footer .btn-subtle-ui,
.modal-footer .btn-danger-ui,
.modal-footer .btn-danger-subtle-ui,
.modal-footer .btn-primary-ui,
.modal-footer .btn-secondary-ui,
.modal-footer .btn-ai-ui,
.modal-footer .btn-ai-subtle-ui,
.modal-footer .btn-warning-subtle-ui,
.modal-footer .btn-success-subtle-ui {
    min-height: 32px !important;
    padding: 4px 10px !important;
    gap: 6px !important;
    font-size: 0.78rem !important;
    border-radius: var(--bs-btn-border-radius-sm) !important;
}

@media (max-width: 575.98px) {
    .modal-footer {
        flex-direction: column;
        align-items: stretch;
        gap: 8px;
    }

    .modal-footer > * {
        width: 100%;
        margin: 0 !important;
    }
}

html[data-theme="dark"] {
    color-scheme: dark;
    --app-text: #d2dae6;
    --app-heading: #f8fafc;
    --app-muted: #94a3b8;
    --app-border: #334155;
    --app-border-strong: #cbd5e1;
    --app-border-hover: #475569;
    --app-text-soft: #cbd5e1;
    --app-link-text: #dbeafe;
    --app-btn-close-filter: invert(1) grayscale(100%) brightness(200%);
    --app-surface: #111827;
    --app-surface-muted: #182131;
    --app-surface-raised: #1e293b;
    --app-surface-deep: #0f172a;
    --app-table-stripe: #172234;
    --app-table-hover: #1f2c40;
    --app-primary: #60a5fa;
    --app-primary-hover: #93c5fd;
    --app-accent: #60a5fa;
    --app-accent-strong: #93c5fd;
    --app-brand-blue: #93c5fd;
    --app-ui-blue: #60a5fa;
    --app-ui-sky: #38bdf8;
    --app-gradient-primary: linear-gradient(90deg, #60a5fa 0%, #38bdf8 52%, #22d3ee 100%);
    --app-logo-gradient: linear-gradient(90deg, #93c5fd 0%, #38bdf8 12.5%, #2563eb 25%, #38bdf8 37.5%, #93c5fd 50%, #38bdf8 62.5%, #2563eb 75%, #38bdf8 87.5%, #93c5fd 100%);
    --app-gradient-surface: var(--app-surface);
    --app-gradient-surface-raised: var(--app-surface);
    --app-gradient-surface-muted: var(--app-surface-muted);
    --app-field-border: #334155;
    --app-field-background: #0a0f1c;
    --app-field-text: #f8fafc;
    --app-field-placeholder: #64748b;
    --app-field-shadow: none;
    --app-field-hover-border: #475569;
    --app-field-hover-background: #132032;
    --app-field-hover-shadow: none;
    --app-field-focus-border: #60a5fa;
    --app-field-focus-background: #0a0f1c;
    --app-field-focus-shadow: 0 0 0 1px rgba(96, 165, 250, 0.28), 0 0 0 4px rgba(30, 64, 175, 0.16);
    --app-shadow-soft: 0 10px 22px rgba(2, 6, 23, 0.22);
    --app-focus-ring: rgba(96, 165, 250, 0.28);
    --app-selected-strip: #60a5fa;
    --app-selected-border: #3b82f6;
    --app-selected-wash: color-mix(in srgb, #60a5fa 18%, #111827);
    --app-selected-wash-soft: color-mix(in srgb, #60a5fa 12%, #111827);
    --app-success-text: #86efac;
    --app-success-bg: #153226;
    /* CDX-556: allineamento border dark mode in fascia L 37-48% per coerenza visiva.
       Tutti i border accent (success/warning/error/ai/info) ora percepiti come stessa
       famiglia, range ridotto da 23 a 11 punti di lightness. */
    --app-success-border: #3f8a62;
    --app-success-fill: #16a34a;
    --app-success-fill-hover: #22c55e;
    --app-success-fill-text: #ffffff;
    --app-warning-text: #fbbf24;
    /* CDX-557: bg alzato da L 10 a L 13 per allinearsi al resto dei bg accent dark (fascia 12-14). */
    --app-warning-bg: #2f1f0a;
    --app-warning-border: #b45309;
    --app-warning-fill: #f59e0b;
    /* CDX-557: amber-400 → amber-300 per dare step hover percettibile (+14 L) coerente con
       success/error/ai che già seguono +9/+13 L. Precedente +4 L risultava "fiacco". */
    --app-warning-fill-hover: #fcd34d;
    --app-warning-fill-text: #451a03;
    --app-error-text: #fecaca;
    --app-error-bg: #2b1016;
    --app-error-border: #b91c1c;
    --app-error-fill: #dc2626;
    --app-error-fill-hover: #ef4444;
    --app-error-fill-text: #ffffff;
    --app-info-text: #93c5fd;
    --app-info-bg: #0c2138;
    --app-info-border: #1d4ed8;
    /* CDX-560: primary dark — Blue-600 → Blue-500 step +7 L (leggermente sotto fascia +9/+13
       degli altri primary fill dark, ma coerente con percezione blu più "luminoso"). */
    --app-primary-fill: #2563eb;
    --app-primary-fill-hover: #3b82f6;
    --app-primary-fill-text: #ffffff;
    --app-ai-text: #a78bfa;
    /* CDX-557: bg scurito da L 20 a L 14 per allinearsi alla fascia bg accent dark (12-14).
       Era outlier sopra. Hue Indigo/Violet preservato. */
    --app-ai-bg: #16133b;
    /* CDX-555: schiarito un passo (Violet-900 → Violet-800) per dare leggibilità al bordo
       in dark mode, dove #4c1d95 su bg #1e1b4b aveva contrasto insufficiente. */
    --app-ai-border: #5b21b6;
    --app-ai-fill: #7c3aed;
    --app-ai-fill-hover: #8b5cf6;
    --app-ai-fill-text: #ffffff;
    /* Bootstrap tooltip override per dark theme. */
    --bs-tooltip-bg: var(--app-surface-raised);
    --bs-tooltip-color: var(--app-heading);

    /* Dashboard card accent (CDX-661): Tailwind-400 più chiari per contrast su navy. */
    --dashboard-card-accent-topic-discovery: #60a5fa;
    --dashboard-card-accent-topics: #2dd4bf;
    --dashboard-card-accent-monthly-social-plan: #a78bfa;
    --dashboard-card-accent-post-drafts: #fbbf24;
    --dashboard-card-accent-publishing-calendar: #4ade80;
    --dashboard-card-accent-inbox-ai: #818cf8;
    --dashboard-card-accent-blog-planner: #f87171;
    --dashboard-card-accent-blog-articles: #f472b6;
    --dashboard-card-accent-verticals: #e879f9;
    --dashboard-card-accent-help: #94a3b8;
}

/* Base document styles used by both auth and app pages. */
body {
    font-family: "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    background: #eef2f7;
    color: var(--app-text);
    line-height: 1.55;
}

html[data-theme="dark"] body {
    background: var(--app-surface-deep);
}

body.app-shell {
    margin: 0;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

.wrap {
    max-width: min(1980px, calc(100vw - 24px)) !important;
}

.app-shell .wrap {
    margin: 0 auto;
    padding: 20px 12px 40px;
    width: 100%;
    flex: 1 0 auto;
}

@media (min-width: 1800px) {
    .wrap {
        max-width: min(2040px, calc(100vw - 32px)) !important;
    }
}

/* Global semantic alerts and flash messages. */
.app-alert {
    --bs-alert-border-color: var(--app-border);
    --bs-alert-bg: var(--app-surface);
    --bs-alert-color: var(--app-text);
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 14px 16px;
    /* CDX-554: margin sotto di default per evitare alert appiccicati a dl/form/grid quando
       embeddati dentro card-body (caso comune nel modulo blog). Annullato da :last-child
       per non doppiare spazio col padding del contenitore quando l'alert è l'ultimo. */
    margin-bottom: var(--app-space-16);
    border: 1px solid var(--bs-alert-border-color);
    border-left: 4px solid var(--bs-alert-border-color);
    border-radius: var(--app-radius);
    background: var(--bs-alert-bg);
    color: var(--bs-alert-color);
}

.app-alert:last-child {
    margin-bottom: 0;
}

.app-alert a {
    color: inherit;
    font-weight: 600;
    text-decoration: underline;
}

.app-alert__icon {
    flex-shrink: 0;
    margin-top: 2px;
    font-size: 20px;
    line-height: 1;
}

.app-alert.is-success {
    --bs-alert-color: var(--app-success-text);
    --bs-alert-bg: var(--app-success-bg);
    --bs-alert-border-color: var(--app-success-border);
}

.app-alert.is-warning {
    --bs-alert-color: var(--app-warning-text);
    --bs-alert-bg: var(--app-warning-bg);
    --bs-alert-border-color: var(--app-warning-border);
}

.app-alert.is-danger {
    --bs-alert-color: var(--app-error-text);
    --bs-alert-bg: var(--app-error-bg);
    --bs-alert-border-color: var(--app-error-border);
}

.app-alert.is-info {
    --bs-alert-color: var(--app-info-text);
    --bs-alert-bg: var(--app-info-bg);
    --bs-alert-border-color: var(--app-info-border);
}

.app-alert.is-secondary {
    --bs-alert-color: var(--app-text);
    --bs-alert-bg: var(--app-surface-muted);
    --bs-alert-border-color: var(--app-border);
}

.page-shell > .app-alert {
    margin-bottom: var(--app-space-16);
}

/* CDX-630 follow-up: barra "filtri attivi" — feedback visivo quando l'utente
   ha applicato filtri non-default. Pattern globale (info palette + chip pill)
   per qualunque pagina con tabella filtrata. */
.app-active-filters {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--app-space-12);
    margin-bottom: var(--app-space-16);
    padding: 12px 16px;
    border: 1px solid var(--app-info-border);
    border-left: 4px solid var(--app-info-border);
    border-radius: var(--app-radius);
    background: var(--app-info-bg);
    color: var(--app-info-text);
}

.app-active-filters__header {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-weight: 600;
    line-height: 1.2;
}

.app-active-filters__header i {
    font-size: 18px;
    line-height: 1;
}

.app-active-filters__count {
    display: inline-flex;
    align-items: center;
    padding: 2px 10px;
    border-radius: var(--app-radius-pill);
    background: var(--app-info-text);
    color: var(--app-info-bg);
    font-size: 12px;
    font-weight: 700;
    line-height: 1.4;
}

.app-active-filters__chips {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 6px;
    flex: 1 1 auto;
    min-width: 0;
}

.app-active-filters__actions {
    margin-left: auto;
}

.app-filter-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 12px;
    border: 1px solid var(--app-info-border);
    border-radius: var(--app-radius-pill);
    background: var(--app-surface);
    color: var(--app-info-text);
    font-size: 12px;
    line-height: 1.4;
    max-width: 100%;
}

.app-filter-chip__label {
    font-weight: 600;
    flex-shrink: 0;
}

.app-filter-chip__value {
    font-weight: 500;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 220px;
}

/* Empty states that point to the next required setup step. */
/* CDX-468: default = info blu + icona lampadina (tip/guidance per "fai X per procedere").
   Variant --warning = arancione + icona triangolo per cautela/blocco vero.
   Risolve mismatch precedente (palette warning + icona lampadina = segnali contrastanti).
   Coerenza cross-pattern: triangolo+arancione sempre = warning, lampadina+blu sempre = tip. */
.app-alert-next-step {
    --bs-alert-color: var(--app-info-text);
    --bs-alert-bg: var(--app-info-bg);
    --bs-alert-border-color: var(--app-info-border);
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 14px 16px;
    /* CDX-564: allineamento spacing a .app-alert (CDX-554). Default 16px sotto, annullato
       se l'alert è ultimo elemento del contenitore. Permette di rimuovere `mb-0` dai
       call site preesistenti. */
    margin-bottom: var(--app-space-16);
    border: 1px solid var(--bs-alert-border-color);
    border-left: 4px solid var(--bs-alert-border-color);
    border-radius: var(--app-radius);
    background: var(--bs-alert-bg);
    color: var(--bs-alert-color);
}

.app-alert-next-step:last-child {
    margin-bottom: 0;
}

.app-alert-next-step--info {
    /* alias del default — mantenuto per compat call site esistenti.
       Stessa palette del base. */
    --bs-alert-color: var(--app-info-text);
    --bs-alert-bg: var(--app-info-bg);
    --bs-alert-border-color: var(--app-info-border);
}

.app-alert-next-step--warning {
    --bs-alert-color: var(--app-warning-text);
    --bs-alert-bg: var(--app-warning-bg);
    --bs-alert-border-color: var(--app-warning-border);
}

.app-alert-next-step a {
    color: inherit;
    font-weight: 600;
    text-decoration: underline;
}

.app-alert-next-step__icon {
    flex-shrink: 0;
    margin-top: 2px;
    font-size: 20px;
    line-height: 1;
}

/* Product branding used in headers and login surfaces. */
.planner-brand {
    display: inline-flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
}

.planner-brand__title {
    margin: 0;
    font-family: "Bruno Ace SC", "Space Grotesk", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    font-weight: 700;
    line-height: 0.98;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--app-brand-blue);
}

::selection {
    background: rgba(37, 99, 235, 0.22);
    color: var(--app-heading);
}

::-moz-selection {
    background: rgba(37, 99, 235, 0.22);
    color: var(--app-heading);
}

.planner-brand--hero .planner-brand__title {
    font-size: clamp(2.55rem, 5.2vw, 3.7rem);
}

.planner-brand--app {
    /* Block-level: senza questo il successivo h1.page-title-with-icon
       (inline-flex) finisce sulla stessa riga del logo quando manca il
       div .app-header-context tra i due (accade nell'area admin, che
       non ha contesto progetto). */
    display: flex;
    text-decoration: none;
}

.planner-brand--app .planner-brand__title {
    font-size: clamp(2.1rem, 4.2vw, 2.95rem);
    line-height: 0.9;
}

.planner-brand--hero .planner-brand__title,
.planner-brand--app .planner-brand__title {
    background: var(--app-logo-gradient);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

body:not(.login-page) .planner-brand--app {
    margin-bottom: 14px !important;
}

body:not(.login-page) .app-header-context {
    margin-top: 0;
    margin-bottom: 18px !important;
}

/* Shared cards and metadata panels used across planner and config pages. */
.planner-hero-card .card-body {
    padding-top: 24px !important;
    padding-bottom: 24px !important;
}

.planner-hero-card .page-header {
    margin-bottom: 2px;
}

.planner-hero-card .planner-meta {
    margin-top: 12px;
}
.surface-accent-top::before {
    content: "";
    position: absolute;
    top: calc(var(--app-accent-strip-offset) * -1);
    left: 0;
    right: 0;
    width: 100%;
    height: var(--app-accent-strip-height);
    border-top-left-radius: inherit;
    border-top-right-radius: inherit;
    background: var(--app-gradient-primary);
    opacity: var(--app-accent-strip-opacity);
}

.config-page-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px;
    width: 100%;
    max-width: 1440px;
    margin: 0 auto;
    align-items: start;
}

.config-card {
    --config-tint-strong: var(--tint-strong-light, var(--tint-color, #2563eb));
    position: relative;
    overflow: hidden;
    border: 1px solid var(--app-border);
    border-radius: var(--bs-card-border-radius);
    background: var(--app-gradient-surface);
    padding: 24px 22px 22px;
}

.config-card::before {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: var(--tint-strip-width);
    border-top-left-radius: inherit;
    border-top-right-radius: inherit;
    background: var(--config-tint-strong);
}

.config-card__header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
    margin-bottom: 18px;
}

.config-card__title {
    margin: 0;
    font-size: 1.24rem;
    line-height: 1.12;
    font-weight: 800;
    color: var(--app-heading);
}

.config-chip-row {
    display: flex;
    flex-wrap: wrap;
    gap: 9px;
    margin-top: 12px;
}

/* Padding 7px 11px volutamente più ampio del .planner-status-badge (3px 7px):
   il chip ospita label + valore + dot/X e ha font 0.8rem, lo status-badge è
   un pill compatto a 0.72rem. Non uniformare. */
.config-chip {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    max-width: 100%;
    min-width: 0;
    padding: 7px 11px;
    border: 1px solid var(--app-border);
    border-radius: var(--app-radius);
    background: var(--app-surface);
    color: var(--app-heading);
    font-size: 0.8rem;
    font-weight: 700;
    line-height: 1.25;
    white-space: normal;
    overflow-wrap: anywhere;
    word-break: break-word;
}

.config-chip-row--removable {
    margin-top: 8px;
}

.config-chip--removable {
    padding-right: 5px;
}

.config-chip__remove {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    padding: 0;
    border: 1px solid transparent;
    border-radius: var(--app-radius-sm);
    background: transparent;
    color: var(--app-muted);
    line-height: 1;
}

.config-chip__remove:hover,
.config-chip__remove:focus {
    border-color: var(--app-border);
    background: var(--app-surface-muted);
    color: var(--app-heading);
}

.config-chip__dot {
    width: 14px;
    height: 14px;
    border: 1px solid var(--app-border);
    border-radius: var(--app-radius-pill);
    background: var(--chip-color, var(--app-border-strong));
}

.config-chip--state-active {
    --chip-color: var(--app-primary);
}

.config-chip--state-inactive {
    --chip-color: var(--app-border-strong);
}

.config-chip--state-configured {
    --chip-color: var(--app-success-text);
}

.config-chip--state-missing {
    --chip-color: var(--app-warning-text);
}

.config-card .form-label {
    margin-bottom: 7px;
    font-size: 0.84rem;
    font-weight: 700;
}

.config-card .form-control,
.config-card .form-select {
    min-height: 46px;
}

.config-card textarea.form-control {
    min-height: 136px;
    padding-top: 12px;
    line-height: 1.48;
    resize: vertical;
}

/* Multiselect custom highlight per option:checked: pattern globale del DS
   (originariamente scoped a `.config-card` in CDX-???, promosso globale
   per coerenza cross-page — anche i filtri di /inbox-ai.php usano
   <select multiple> e devono avere lo stesso highlight). Il default
   browser sarebbe un blu di sistema variabile per OS. */
.form-select[multiple] option {
    padding: 2px 8px;
    border-radius: var(--app-radius-sm);
}

.form-select[multiple] option:checked {
    background: color-mix(in srgb, var(--app-primary) 13%, var(--app-surface-muted) 87%);
    box-shadow: inset 0 0 0 9999px color-mix(in srgb, var(--app-primary) 13%, var(--app-surface-muted) 87%);
    color: var(--app-heading) !important;
    -webkit-text-fill-color: var(--app-heading);
}

.form-select[multiple] option:checked:hover,
.form-select[multiple] option:checked:focus {
    background: color-mix(in srgb, var(--app-primary) 18%, var(--app-surface-muted) 82%);
    box-shadow: inset 0 0 0 9999px color-mix(in srgb, var(--app-primary) 18%, var(--app-surface-muted) 82%);
    color: var(--app-heading) !important;
    -webkit-text-fill-color: var(--app-heading);
}

.content-rule-card .config-chip {
    gap: 8px;
}

.content-rule-card {
    background: var(--tint-surface, var(--app-surface));
}

.content-rule-card .config-chip strong {
    font-size: 0.82rem;
    color: var(--app-heading);
}

.content-rules-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    max-width: none;
    gap: 18px;
}

@media (max-width: 1199.98px) {
    .content-rules-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 767.98px) {
    .content-rules-grid {
        grid-template-columns: 1fr;
    }

    .config-card__header {
        flex-direction: column;
        align-items: stretch;
        gap: 12px;
    }

}

.content-rule-card .config-card__title {
    color: var(--config-tint-strong);
}

html[data-theme="dark"] .content-rule-card .config-card__brand-icon,
html[data-theme="dark"] .content-rule-card .config-card__title {
    color: var(--config-tint-strong) !important;
}

.config-help-note {
    margin-top: 10px;
    margin-bottom: var(--app-space-14);
    font-size: 0.84rem;
    color: var(--app-muted);
    line-height: 1.45;
}

.config-capability-card {
    border-radius: var(--bs-card-border-radius);
    background: var(--app-gradient-surface-muted);
}

.config-capability-card__header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 18px;
    flex-wrap: wrap;
    padding-bottom: 18px;
    border-bottom: 1px solid #e7edf3;
}

.config-provider-card {
    position: relative;
    border-color: color-mix(in srgb, var(--tint-color, #cbd5e1) 22%, #e6ebf1 78%);
    border-radius: var(--bs-card-border-radius);
    background: var(--app-gradient-surface-muted);
    box-shadow: none;
    overflow: hidden;
}

.config-provider-card::before {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: var(--tint-strip-width);
    border-top-left-radius: inherit;
    border-top-right-radius: inherit;
    background: var(--tint-color, #cbd5e1);
}

/* IMPORTANTE: ogni classe modifier setta SEMPRE --tint-color, --tint-color-dark
   e --tint-surface (anche quando light=dark). Le CSS variables ereditano dal
   genitore: senza override esplicito di --tint-color-dark, un badge figlio
   (es. .tint-strategy--promo dentro un tile .tint-social--tiktok) ereditava
   il #94a3b8 del genitore in dark mode. La regola è: classi modifier sono
   self-contained, non lasciano nulla all'eredità. */

/* Provider modifiers: ogni provider AI conosciuto si aggancia al proprio
   token brand. Aggiungerne di nuovi richiede (1) un --provider-<key>-accent
   in :root e (2) una riga qui. Niente style="--tint-color: ..." inline. */
.config-provider-card--gemini {
    --tint-color: var(--provider-gemini-accent);
    --tint-color-dark: var(--provider-gemini-accent);
    --tint-strong-light: var(--provider-gemini-strong-light);
    --tint-strong-dark: var(--provider-gemini-strong-dark);
    --tint-bg-dark: var(--provider-gemini-bg-dark);
}
.config-provider-card--anthropic {
    --tint-color: var(--provider-anthropic-accent);
    --tint-color-dark: var(--provider-anthropic-accent);
    --tint-strong-light: var(--provider-anthropic-strong-light);
    --tint-strong-dark: var(--provider-anthropic-strong-dark);
    --tint-bg-dark: var(--provider-anthropic-bg-dark);
}
.config-provider-card--openai {
    --tint-color: var(--provider-openai-accent);
    --tint-color-dark: var(--provider-openai-accent);
    --tint-strong-light: var(--provider-openai-strong-light);
    --tint-strong-dark: var(--provider-openai-strong-dark);
    --tint-bg-dark: var(--provider-openai-bg-dark);
}
.config-provider-card--runway {
    --tint-color: var(--provider-runway-accent);
    --tint-color-dark: var(--provider-runway-accent);
    --tint-strong-light: var(--provider-runway-strong-light);
    --tint-strong-dark: var(--provider-runway-strong-dark);
    --tint-bg-dark: var(--provider-runway-bg-dark);
}
.config-provider-card--replicate {
    --tint-color: var(--provider-replicate-accent);
    --tint-color-dark: var(--provider-replicate-accent);
    --tint-strong-light: var(--provider-replicate-strong-light);
    --tint-strong-dark: var(--provider-replicate-strong-dark);
    --tint-bg-dark: var(--provider-replicate-bg-dark);
}
.config-provider-card--default {
    --tint-color: var(--provider-default-accent);
    --tint-color-dark: var(--provider-default-accent);
    --tint-strong-light: var(--provider-default-strong-light);
    --tint-strong-dark: var(--provider-default-strong-dark);
    --tint-bg-dark: var(--provider-default-bg-dark);
}

/* Social network tint utilities: applicabili a qualunque elemento che
   consuma --tint-color/--tint-surface/--tint-color-dark (config-card sociale,
   planner-day-item, ai-text-draft-card, ecc.). Setta i token brand del social;
   il componente li consuma via la catena --social-accent/--social-surface/
   --social-strong già definita (vedi `.social-tinted` ~riga 2868). */
.tint-social--instagram {
    --tint-color: var(--social-instagram-accent);
    --tint-color-dark: var(--social-instagram-accent);
    --tint-surface: var(--social-instagram-surface);
    --tint-strong-light: var(--social-instagram-strong-light);
    --tint-strong-dark: var(--social-instagram-strong-dark);
    --tint-bg-dark: var(--social-instagram-bg-dark);
}
.tint-social--facebook {
    --tint-color: var(--social-facebook-accent);
    --tint-color-dark: var(--social-facebook-accent);
    --tint-surface: var(--social-facebook-surface);
    --tint-strong-light: var(--social-facebook-strong-light);
    --tint-strong-dark: var(--social-facebook-strong-dark);
    --tint-bg-dark: var(--social-facebook-bg-dark);
}
.tint-social--tiktok {
    --tint-color: var(--social-tiktok-accent);
    --tint-color-dark: var(--social-tiktok-accent-dark);
    --tint-surface: var(--social-tiktok-surface);
    --tint-strong-light: var(--social-tiktok-strong-light);
    --tint-strong-dark: var(--social-tiktok-strong-dark);
    --tint-bg-dark: var(--social-tiktok-bg-dark);
}
.tint-social--pinterest {
    --tint-color: var(--social-pinterest-accent);
    --tint-color-dark: var(--social-pinterest-accent);
    --tint-surface: var(--social-pinterest-surface);
    --tint-strong-light: var(--social-pinterest-strong-light);
    --tint-strong-dark: var(--social-pinterest-strong-dark);
    --tint-bg-dark: var(--social-pinterest-bg-dark);
}
.tint-social--linkedin {
    --tint-color: var(--social-linkedin-accent);
    --tint-color-dark: var(--social-linkedin-accent);
    --tint-surface: var(--social-linkedin-surface);
    --tint-strong-light: var(--social-linkedin-strong-light);
    --tint-strong-dark: var(--social-linkedin-strong-dark);
    --tint-bg-dark: var(--social-linkedin-bg-dark);
}
.tint-social--youtube {
    --tint-color: var(--social-youtube-accent);
    --tint-color-dark: var(--social-youtube-accent);
    --tint-surface: var(--social-youtube-surface);
    --tint-strong-light: var(--social-youtube-strong-light);
    --tint-strong-dark: var(--social-youtube-strong-dark);
    --tint-bg-dark: var(--social-youtube-bg-dark);
}
.tint-social--x {
    --tint-color: var(--social-x-accent);
    --tint-color-dark: var(--social-x-accent-dark);
    --tint-surface: var(--social-x-surface);
    --tint-strong-light: var(--social-x-strong-light);
    --tint-strong-dark: var(--social-x-strong-dark);
    --tint-bg-dark: var(--social-x-bg-dark);
}
.tint-social--threads {
    --tint-color: var(--social-threads-accent);
    --tint-color-dark: var(--social-threads-accent-dark);
    --tint-surface: var(--social-threads-surface);
    --tint-strong-light: var(--social-threads-strong-light);
    --tint-strong-dark: var(--social-threads-strong-dark);
    --tint-bg-dark: var(--social-threads-bg-dark);
}
.tint-social--default {
    --tint-color: var(--social-default-accent);
    --tint-color-dark: var(--social-default-accent);
    --tint-surface: var(--social-default-surface);
    --tint-strong-light: var(--social-default-strong-light);
    --tint-strong-dark: var(--social-default-strong-dark);
    --tint-bg-dark: var(--social-default-bg-dark);
}

/* Strategy / content rule tint utilities: stesso pattern di tint-social--*
   ma scoped sulla strategia editoriale (bucket_key). Applicabile a
   content-rule-card e .planner-day-item-strategy. Light = dark per tutte. */
.tint-strategy--b2b {
    --tint-color: var(--strategy-b2b-accent);
    --tint-color-dark: var(--strategy-b2b-accent);
    --tint-surface: var(--strategy-b2b-surface);
    --tint-strong-light: var(--strategy-b2b-strong-light);
    --tint-strong-dark: var(--strategy-b2b-strong-dark);
    --tint-bg-dark: var(--strategy-b2b-bg-dark);
}
.tint-strategy--editorial {
    --tint-color: var(--strategy-editorial-accent);
    --tint-color-dark: var(--strategy-editorial-accent);
    --tint-surface: var(--strategy-editorial-surface);
    --tint-strong-light: var(--strategy-editorial-strong-light);
    --tint-strong-dark: var(--strategy-editorial-strong-dark);
    --tint-bg-dark: var(--strategy-editorial-bg-dark);
}
.tint-strategy--general {
    --tint-color: var(--strategy-general-accent);
    --tint-color-dark: var(--strategy-general-accent);
    --tint-surface: var(--strategy-general-surface);
    --tint-strong-light: var(--strategy-general-strong-light);
    --tint-strong-dark: var(--strategy-general-strong-dark);
    --tint-bg-dark: var(--strategy-general-bg-dark);
}
.tint-strategy--promo {
    --tint-color: var(--strategy-promo-accent);
    --tint-color-dark: var(--strategy-promo-accent);
    --tint-surface: var(--strategy-promo-surface);
    --tint-strong-light: var(--strategy-promo-strong-light);
    --tint-strong-dark: var(--strategy-promo-strong-dark);
    --tint-bg-dark: var(--strategy-promo-bg-dark);
}
.tint-strategy--value {
    --tint-color: var(--strategy-value-accent);
    --tint-color-dark: var(--strategy-value-accent);
    --tint-surface: var(--strategy-value-surface);
    --tint-strong-light: var(--strategy-value-strong-light);
    --tint-strong-dark: var(--strategy-value-strong-dark);
    --tint-bg-dark: var(--strategy-value-bg-dark);
}
.tint-strategy--visual {
    --tint-color: var(--strategy-visual-accent);
    --tint-color-dark: var(--strategy-visual-accent);
    --tint-surface: var(--strategy-visual-surface);
    --tint-strong-light: var(--strategy-visual-strong-light);
    --tint-strong-dark: var(--strategy-visual-strong-dark);
    --tint-bg-dark: var(--strategy-visual-bg-dark);
}
.tint-strategy--default {
    --tint-color: var(--strategy-default-accent);
    --tint-color-dark: var(--strategy-default-accent);
    --tint-surface: var(--strategy-default-surface);
    --tint-strong-light: var(--strategy-default-strong-light);
    --tint-strong-dark: var(--strategy-default-strong-dark);
    --tint-bg-dark: var(--strategy-default-bg-dark);
}

.config-provider-card.is-active {
    border-color: var(--app-selected-border) !important;
    background: var(--app-selected-wash) !important;
    box-shadow: none !important;
}

/* Card attiva: sfondo + bordo "selected", ma la striscia superiore mantiene il
   colore brand del provider (--tint-color dalla regola base ::before), non il
   gradiente primary generico. Identità del provider sempre leggibile. */

.config-provider-card .card-body {
    padding: 22px !important;
    min-width: 0;
}

.config-provider-card h3 {
    color: var(--app-heading);
}

.config-provider-card .d-flex,
.config-provider-card label,
.config-provider-card .badge,
.config-card__brand,
.config-card__title {
    min-width: 0;
}

.config-provider-card .badge,
.config-card__title {
    overflow-wrap: anywhere;
}

.config-provider-card__secret-badge {
    display: inline-flex;
    align-items: flex-start;
    gap: 4px;
    max-width: 100%;
    min-width: 0;
    white-space: normal;
    text-align: left;
    line-height: 1.25;
}

.config-provider-card__secret-badge .bi {
    flex: 0 0 auto;
    margin-top: 1px;
}

.config-provider-card__secret-badge span {
    min-width: 0;
    overflow-wrap: anywhere;
}

.config-provider-card .config-chip-row {
    gap: 7px;
}

.config-provider-card .config-chip {
    padding: 6px 10px;
    font-size: 0.76rem;
}
.config-chip-row--summary {
    margin-top: 0;
    justify-content: flex-end;
}

.config-chip--summary {
    font-size: 0.77rem;
    font-weight: 700;
    color: var(--app-text);
    background: var(--app-surface);
}

.config-chip--active {
    background: var(--app-info-bg);
}

.config-active-provider-panel {
    padding: 16px 18px;
    border: 1px solid var(--app-border);
    border-radius: var(--bs-card-border-radius);
    background: var(--app-gradient-surface-raised);
}

.config-active-provider-panel .form-label {
    margin-bottom: 8px;
}

.config-active-provider-panel__meta {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    min-height: 46px;
    padding: 0 2px;
    font-size: 0.88rem;
    color: var(--app-muted);
}

.config-active-provider-panel__meta strong {
    color: var(--app-heading);
}
.config-provider-grid {
    --bs-gutter-x: 1.5rem;
    --bs-gutter-y: 1.5rem;
}

.config-provider-grid__col {
    position: relative;
}

.config-card__token-input {
    min-width: 0;
}

.config-card__header {
    min-width: 0;
}

/* Social Network configs use a denser variant of config cards to keep many channels scannable. */
.social-configs-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    max-width: none;
    gap: 18px;
}

@media (max-width: 1199.98px) {
    .social-configs-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 767.98px) {
    .social-configs-grid {
        grid-template-columns: 1fr;
    }
}

.config-card__brand {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

.config-card__brand-icon {
    font-size: 1.6rem;
    line-height: 1;
    flex-shrink: 0;
    color: var(--config-tint-strong);
}

.social-configs-card .config-card__title {
    color: var(--config-tint-strong);
}

html[data-theme="dark"] .social-configs-card .config-card__brand-icon,
html[data-theme="dark"] .social-configs-card .config-card__title {
    color: var(--config-tint-strong) !important;
}

.config-card__drag-handle {
    cursor: grab;
    color: var(--app-muted);
    font-size: 1.1rem;
    line-height: 1;
    padding: 2px 4px;
    margin-left: -4px;
    user-select: none;
    flex-shrink: 0;
    transition: color 0.15s ease;
}

.config-card__drag-handle:hover {
    color: var(--config-tint-strong);
}

.config-card__drag-handle:active {
    cursor: grabbing;
}

.config-card--ghost {
    opacity: 0.4;
}

.config-card--chosen {
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.18);
}

.config-card--drag {
    transform: rotate(1deg);
}

.config-card__token-input {
    min-width: 220px;
}

.social-configs-card .config-card {
    background: var(--tint-surface, var(--app-surface));
    padding: 18px 18px 16px;
}

.social-configs-card .config-card__header {
    margin-bottom: 12px;
    gap: 12px;
}

.social-configs-card .config-card__title {
    font-size: 1.08rem;
    line-height: 1.08;
}

.social-configs-card .config-chip-row {
    gap: 7px;
    margin-top: 8px;
}

.social-configs-card .config-chip {
    gap: 7px;
    padding: 5px 8px;
    font-size: 0.72rem;
}

.social-configs-card .config-chip__dot {
    width: 11px;
    height: 11px;
}

.social-configs-card .config-card .form-label {
    margin-bottom: 5px;
    font-size: 0.78rem;
}

.social-configs-card .config-card .form-control,
.social-configs-card .config-card .form-select {
    min-height: 40px;
}

.social-config-card__fields {
    --bs-gutter-x: 0.8rem;
    --bs-gutter-y: 0.8rem;
}

.social-config-card.is-disabled,
.content-rule-card.is-disabled {
    opacity: 0.55;
    border-color: color-mix(in srgb, var(--app-muted, #94a3b8) 35%, transparent);
    transition: opacity 0.2s ease;
}

.social-config-card.is-disabled::before,
.content-rule-card.is-disabled::before {
    opacity: 0.18;
}

.social-config-card.is-disabled:hover,
.social-config-card.is-disabled:focus-within,
.content-rule-card.is-disabled:hover,
.content-rule-card.is-disabled:focus-within {
    opacity: 0.95;
}

.social-configs-card .social-config-card.is-disabled .config-card__brand-icon,
.social-configs-card .social-config-card.is-disabled .config-card__title,
.content-rule-card.is-disabled .config-card__brand-icon,
.content-rule-card.is-disabled .config-card__title {
    color: var(--app-muted, #94a3b8) !important;
    filter: grayscale(1);
}

/* Configuration pages share these cards across Social Network, Regole Editoriali and Configurazione AI. */
.config-card code,
.config-help-note code {
    padding: 2px 6px;
    border: 1px solid var(--app-border);
    border-radius: var(--app-radius-sm);
    background: var(--app-surface-muted);
    color: var(--app-heading);
}

/* Shared page shell and hero blocks for the main application pages. */
.page-shell {
    margin: 0 auto;
    padding: 24px 12px 44px;
    width: 100%;
    flex: 1 0 auto;
}
.page-hero-card {
    margin-bottom: 20px;
}

.page-hero-title {
    margin: 0 0 8px;
    font-size: 1.42rem;
    font-weight: 800;
    color: var(--app-heading);
}

.page-actions {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    margin-top: 20px;
}

.page-actions--compact {
    margin-top: 14px;
    gap: 10px;
}

.page-actions__separator {
    align-self: stretch;
    width: 1px;
    min-height: 30px;
    background: var(--app-border);
}

.page-section-divider {
    margin: var(--app-space-24) 0;
    border-top: 1px solid var(--app-border);
}
.page-section-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
    margin-top: 20px;
}

.page-section-grid--compact {
    gap: 12px;
    margin-top: 16px;
}

.page-section-box {
    padding: 22px;
}

.page-section-box--compact {
    padding: 18px;
}

.page-section-box:not(.section-box--feature) h3 {
    margin: 0 0 10px;
    font-size: 1.05rem;
}

.page-section-box p {
    margin: 0 0 16px;
}

.page-nav-card {
    display: flex;
    flex-direction: column;
    min-height: 0;
    color: inherit;
    text-decoration: none;
    transition: border-color 160ms ease, box-shadow 160ms ease, transform 160ms ease, background-color 160ms ease;
    cursor: pointer;
    border-color: var(--app-border);
    border-radius: var(--bs-card-border-radius);
    background: var(--app-surface);
    box-shadow: inset 3px 0 0 var(--app-accent, #2563eb);
}

.page-nav-card:hover,
.page-nav-card:focus-visible {
    text-decoration: none;
    border-color: color-mix(in srgb, var(--app-accent, #2563eb) 52%, #dce2e8 48%);
    background: color-mix(in srgb, var(--app-primary) 7%, var(--app-surface) 93%);
    box-shadow:
        inset var(--tint-strip-width) 0 0 var(--app-accent, #2563eb),
        0 1px 2px rgba(15, 23, 42, 0.06);
}

.page-nav-card:focus-visible {
    outline: 0;
    box-shadow:
        0 0 0 3px var(--app-focus-ring),
        inset var(--tint-strip-width) 0 0 var(--app-accent, #2563eb),
        0 1px 2px rgba(15, 23, 42, 0.06);
}

.page-nav-card__title {
    margin: 0 0 10px;
    color: var(--app-heading);
    transition: color 0.18s ease;
}

.page-nav-card .page-title-with-icon__icon {
    transition: color 0.18s ease;
}

.page-nav-card:hover .page-nav-card__title,
.page-nav-card:focus-visible .page-nav-card__title,
.page-nav-card:hover .page-title-with-icon__icon,
.page-nav-card:focus-visible .page-title-with-icon__icon {
    color: var(--app-primary-hover);
}

.page-nav-card p:last-child {
    margin-bottom: 0;
}

.dashboard-page .dashboard-group .page-hero-title {
    margin-bottom: 10px;
}

.page-summary-grid.dashboard-status-grid {
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 10px;
    margin-bottom: 18px;
}

.dashboard-status-kpi {
    display: flex;
    flex-direction: column;
    row-gap: 8px;
    min-height: 116px;
}

.dashboard-status-kpi::before {
    height: 3px;
}

.dashboard-status-kpi .page-summary-label {
    margin-bottom: 7px;
    font-size: 0.72rem;
}

.dashboard-status-kpi .page-summary-value,
.dashboard-status-kpi .page-summary-value--list {
    font-size: 0.98rem;
    line-height: 1.25;
}

.dashboard-status-kpi .page-summary-copy {
    margin-top: 0;
    margin-bottom: 0 !important;
    font-size: 0.84rem;
    line-height: 1.35;
}

.dashboard-action-card {
    display: flex;
    flex-direction: column;
    min-height: 0;
}

.dashboard-action-card__button {
    align-self: flex-start;
    margin-top: auto;
    font-weight: 700 !important;
}

@media (max-width: 1199.98px) {
    .page-summary-grid.dashboard-status-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 767.98px) {
    .page-summary-grid.dashboard-status-grid {
        grid-template-columns: 1fr;
    }
}

.page-section-box--compact h3 {
    margin: 0 0 8px;
}

.page-section-box--compact p {
    margin: 0 0 12px;
}
.help-layout {
    display: grid;
    grid-template-columns: minmax(260px, 320px) minmax(0, 1fr);
    gap: 18px;
    align-items: start;
}

.help-sidebar {
    position: sticky;
    top: 20px;
}

.help-nav-list {
    display: grid;
    gap: 12px;
    margin-top: 18px;
}

.help-nav-card {
    min-height: 0;
    padding: 18px;
}

.help-nav-list .help-nav-card {
    margin-bottom: 0;
}

html:not([data-theme="dark"]) .help-page .help-nav-card.is-active,
html[data-theme="dark"] .help-page .help-nav-card.is-active {
    border-color: var(--app-selected-border) !important;
    background: var(--app-selected-wash) !important;
    box-shadow: inset var(--tint-strip-width) 0 0 var(--app-selected-strip) !important;
}

.help-content-card {
    min-width: 0;
}

.help-doc-content {
    margin-top: 24px;
    color: var(--app-text);
}

.help-context-modal__content {
    margin-top: 0;
}

.help-doc-content h2,
.help-doc-content h3 {
    color: var(--app-heading);
    margin-top: 28px;
    margin-bottom: 12px;
}

.help-doc-content h2:first-child {
    margin-top: 0;
}

.help-doc-content p {
    margin: 0 0 16px;
    color: var(--app-text);
}

.help-doc-content ul,
.help-doc-content ol {
    margin: 0 0 18px;
    padding-left: 22px;
}

.help-doc-content li {
    margin-bottom: 8px;
}

.help-doc-content code {
    padding: 1px 6px;
    border-radius: var(--app-radius);
    background: rgba(148, 163, 184, 0.12);
    color: var(--app-heading);
}

.help-doc-pre {
    margin: 0 0 18px;
    padding: 16px;
    border: 1px solid var(--app-border);
    border-radius: var(--app-radius);
    background: var(--app-surface-muted);
    overflow-x: auto;
}

.help-doc-pre code {
    padding: 0;
    border-radius: var(--app-radius);
    background: transparent;
}

.help-doc-table-wrap {
    margin: 16px 0 22px;
    overflow-x: auto;
    border: 1px solid var(--app-border);
    border-radius: var(--app-radius);
}

.help-doc-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.94rem;
}

.help-doc-table th,
.help-doc-table td {
    padding: 8px 14px;
    border-bottom: 1px solid var(--app-border);
    text-align: left;
    vertical-align: top;
}

.help-doc-table thead th {
    background: var(--app-surface-muted);
    font-weight: 600;
    color: var(--app-heading);
    border-bottom-width: 2px;
}

.help-doc-table tbody tr:last-child td {
    border-bottom: none;
}

/* CDX-567: rimossi fallback hex da var() (memoria "no hex hardcoded"). --app-accent e
   --app-surface sono sempre definiti in :root light + dark, fallback era dead code. */
.help-doc-callout {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin: 20px 0;
    padding: 16px 20px;
    border: 1px solid var(--app-border);
    border-left: var(--tint-strip-width) solid var(--app-accent);
    border-radius: var(--app-radius);
    background: color-mix(in srgb, var(--app-accent) 6%, var(--app-surface) 94%);
    color: var(--app-text);
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}

.help-doc-callout__icon {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 32px;
    border-radius: var(--app-radius);
    background: transparent;
    color: var(--app-accent);
    font-size: 22px;
    line-height: 1;
    margin-top: 0;
}

.help-doc-callout__icon i {
    display: block;
    line-height: 1;
}

.help-doc-callout__body {
    flex: 1 1 auto;
    min-width: 0;
    color: var(--app-text);
}

.help-doc-callout__body > :last-child {
    margin-bottom: 0;
}

.help-doc-callout p {
    margin: 0;
    color: var(--app-text);
}

html[data-theme="dark"] .help-doc-callout {
    background: color-mix(in srgb, var(--app-accent) 12%, var(--app-surface) 88%);
    border-color: var(--app-border);
    border-left-color: var(--app-accent);
    box-shadow: none;
}

html[data-theme="dark"] .help-doc-callout__icon {
    background: transparent;
    color: var(--app-accent);
}

.help-doc-callout--warning {
    background: var(--app-warning-bg);
    border-color: var(--app-warning-border);
    border-left-color: var(--app-warning-text);
}

.help-doc-callout--warning .help-doc-callout__icon {
    background: transparent;
    color: var(--app-warning-text);
}

.help-doc-callout--danger {
    background: var(--app-error-bg);
    border-color: var(--app-error-border);
    border-left-color: var(--app-error-text);
}

.help-doc-callout--danger .help-doc-callout__icon {
    background: transparent;
    color: var(--app-error-text);
}

.help-doc-callout--success {
    background: var(--app-success-bg);
    border-color: var(--app-success-border);
    border-left-color: var(--app-success-text);
}

.help-doc-callout--success .help-doc-callout__icon {
    background: transparent;
    color: var(--app-success-text);
}

/* Dark mode: ripristina semantica per-variant.
   Senza questi override il selettore generico `html[data-theme="dark"] .help-doc-callout`
   (specificità 0,1,1) batte `.help-doc-callout--<variant>` (0,2,0) e tutti i callout
   collassano sul tono accent blu. I token --app-<severity>-* sono già light/dark aware. */
html[data-theme="dark"] .help-doc-callout--warning {
    background: var(--app-warning-bg);
    border-color: var(--app-warning-border);
    border-left-color: var(--app-warning-text);
}

html[data-theme="dark"] .help-doc-callout--warning .help-doc-callout__icon {
    color: var(--app-warning-text);
}

html[data-theme="dark"] .help-doc-callout--danger {
    background: var(--app-error-bg);
    border-color: var(--app-error-border);
    border-left-color: var(--app-error-text);
}

html[data-theme="dark"] .help-doc-callout--danger .help-doc-callout__icon {
    color: var(--app-error-text);
}

html[data-theme="dark"] .help-doc-callout--success {
    background: var(--app-success-bg);
    border-color: var(--app-success-border);
    border-left-color: var(--app-success-text);
}

html[data-theme="dark"] .help-doc-callout--success .help-doc-callout__icon {
    color: var(--app-success-text);
}

/* Project selection components reused by the active-project screen. */
.project-switcher-brand {
    display: flex;
    align-items: center;
    margin-bottom: 16px;
}

.project-switcher-list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(420px, 1fr));
    gap: 16px;
}

.project-switcher-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    padding: 16px 18px;
    border: 1px solid var(--app-border);
    border-left: var(--tint-strip-width) solid var(--app-primary);
    border-radius: var(--bs-card-border-radius);
    background: var(--app-surface);
}

.project-switcher-item.has-project-accent {
    border-left-color: var(--project-accent-light);
}

.project-switcher-item.has-project-accent .project-switcher-name {
    color: var(--project-accent-light);
}

.project-switcher-name {
    font-weight: 700;
    color: var(--app-heading);
}

.project-switcher-meta {
    margin-top: 4px;
    font-size: 0.88rem;
    color: var(--app-muted);
}

.admin-project-name {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

.admin-project-color-swatch {
    display: inline-block;
    width: 0.72rem;
    height: 0.72rem;
    flex: 0 0 auto;
    border-radius: 999px;
}

.admin-project-color-swatch.has-project-accent {
    background: var(--project-accent-light);
    border: 1px solid color-mix(in srgb, var(--project-accent-light) 62%, var(--app-border) 38%);
}

.admin-project-color-swatch.is-default {
    background: transparent;
    border: 1px solid var(--app-border);
}

.version-switcher-status {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
    padding: 6px 10px;
    border: 1px solid #d9dee5;
    border-radius: var(--app-radius-sm);
    background: var(--app-gradient-surface);
    color: var(--app-heading);
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    line-height: 1;
}

.version-switcher-status--opened {
    border-color: color-mix(in srgb, var(--app-accent, #2563eb) 28%, #cbd5e1 72%);
    background: color-mix(in srgb, var(--app-accent, #2563eb) 8%, #ffffff 92%);
    color: color-mix(in srgb, var(--app-accent, #2563eb) 88%, #0f172a 12%);
}

.version-switcher-status--current {
    border-color: color-mix(in srgb, #2563eb 24%, #d9dee5 76%);
    background: color-mix(in srgb, #2563eb 7%, #ffffff 93%);
    color: color-mix(in srgb, #2563eb 82%, #0f172a 18%);
}

.version-switcher-status--historical {
    border-color: color-mix(in srgb, #64748b 18%, #d9dee5 82%);
    background: color-mix(in srgb, #64748b 4%, #ffffff 96%);
    color: color-mix(in srgb, #475569 84%, #0f172a 16%);
}

.planner-saved-versions-card {
    border-color: color-mix(in srgb, var(--app-accent, #2563eb) 18%, #dfe5ec 82%) !important;
}

.planner-saved-versions-card .page-section-header {
    margin-bottom: 20px;
}

.version-switcher-status--inline {
    margin-bottom: 0;
}

.saved-versions-table__actions {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    justify-content: flex-end;
}.icon-action-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--app-icon-action-size);
    height: var(--app-icon-action-size);
    border: 1px solid var(--app-border-hover);
    background: var(--app-surface);
    color: var(--app-text);
    text-decoration: none;
    border-radius: var(--app-radius-sm);
    transition: border-color 0.18s ease, color 0.18s ease, background 0.18s ease;
}

.icon-action-link:hover,
.icon-action-link:focus-visible {
    border-color: var(--app-border-hover);
    background: var(--app-surface-muted);
    color: var(--app-text);
}

.icon-action-link--danger {
    color: var(--app-error-text);
    border-color: var(--app-error-border);
    background: var(--app-error-bg);
}

.icon-action-link--danger:hover,
.icon-action-link--danger:focus-visible {
    color: var(--app-error-text);
    border-color: color-mix(in srgb, var(--app-error-text) 28%, var(--app-error-border) 72%);
    background: color-mix(in srgb, var(--app-error-text) 10%, var(--app-error-bg) 90%);
}

.icon-action-link--active {
    color: var(--app-muted);
    border-color: var(--app-border);
    background: var(--app-border);
    box-shadow: none;
}

.icon-action-link--with-label {
    width: auto;
    height: auto;
    min-height: var(--app-icon-action-size);
    padding: 4px 12px;
    gap: 8px;
    font-size: 0.82rem;
    font-weight: 500;
    line-height: 1.2;
    white-space: nowrap;
}

.icon-action-link--with-label > i {
    flex: 0 0 auto;
}

/* CDX-502: blocco utility per visualizzazione code/data (password generate,
   error messages, JSON snapshot, ecc.). Sostituisce `<pre style="..."` inline
   sparsi (admin-users password, admin-ai-usage error+snapshot). Token-driven,
   white-space pre-wrap di default per testi/JSON con line wrapping.
   Modifier --selectable per user-select all (tipico per password copy).
   Modifier --scroll per JSON lunghi: max-height + overflow + white-space pre. */
.app-code-block {
    background: var(--app-surface-muted);
    border: 1px solid var(--app-border);
    border-radius: var(--app-radius);
    padding: 12px;
    color: var(--app-text);
    white-space: pre-wrap;
    word-break: break-word;
    margin-bottom: 0;
}

.app-code-block--selectable {
    user-select: all;
}

.app-code-block--scroll {
    max-height: 320px;
    overflow: auto;
    white-space: pre;
    word-break: normal;
}

.text-prewrap {
    white-space: pre-wrap;
    word-break: break-word;
}

.table-guided tbody tr.table-row-selected td {
    background: var(--app-selected-wash-soft) !important;
}

/* Topic table helpers shared by catalog and future data-entry pages. */
.table-wrap {
    overflow-x: auto;
}

.table-export-bar {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
}

/* CDX-630 follow-up: gap superiore quando il blocco tabella ha contenuto
   sopra (es. button "Svuota cestino", filtri esterni, batch progress bar).
   Risolve la collisione visiva del .table-export-bar auto-iniettato come
   first-child del wrapper tabella, senza richiedere margin per-pagina ad
   ogni elemento precedente. Quando il wrapper tabella è il primo figlio
   del suo container (es. card-body con solo la tabella), nessun margin
   viene applicato — il padding del container fa già il suo lavoro. */
* + .table-responsive,
* + .table-responsive-sm,
* + .table-responsive-md,
* + .table-responsive-lg,
* + .table-responsive-xl,
* + .table-wrap,
* + .review-table-wrap {
    margin-top: var(--app-space-16);
}

.table-row-actions {
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    flex-wrap: nowrap;
    white-space: nowrap;
}

.table-row-actions > *,
.table-row-actions .icon-action-link {
    flex: 0 0 auto;
}

.table-row-actions form {
    display: inline-flex;
    margin: 0;
}

.table-section-actions {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    margin-top: 16px;
}

.section-actions-center {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    margin-top: 16px;
}

.form-grid-compact {
    --bs-gutter-x: 1rem;
    --bs-gutter-y: 0.85rem;
}

.form-grid-compact .form-label {
    margin-bottom: 6px;
}

.form-grid-toggle {
    display: flex;
    align-items: center;
    padding-bottom: 9px;
}
.topics-url-pref-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    max-width: 100%;
    padding: 5px 8px;
    border: 1px solid var(--app-border);
    border-radius: var(--app-radius-sm);
    background: var(--app-surface-muted);
    color: var(--app-heading);
    font-size: 0.86rem;
    line-height: 1.2;
}

.topics-url-pref-chip span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.topics-url-pref-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.topics-url-pref-options {
    display: grid;
    gap: 8px;
}

.topics-url-pref-option {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 10px;
    align-items: flex-start;
    padding: 10px;
    border: 1px solid var(--app-border);
    border-radius: var(--bs-card-border-radius);
    background: var(--app-surface);
    cursor: pointer;
}

.topics-url-pref-option:hover {
    border-color: var(--app-border-strong);
    background: var(--app-surface-muted);
}

.topics-url-pref-option__body {
    min-width: 0;
}

.topics-url-pref-option__title,
.topics-url-pref-option__url {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.topics-url-pref-option__title {
    color: var(--app-heading);
    font-weight: 700;
}

.topics-url-pref-option__url {
    color: var(--app-muted);
    font-size: 0.86rem;
}

.topics-url-pref-option__type {
    display: inline-flex;
    margin-top: 6px;
    padding: 2px 6px;
    border: 1px solid var(--app-border);
    border-radius: var(--app-radius-sm);
    color: var(--app-muted);
    font-size: 0.75rem;
    line-height: 1.1;
}

.ai-usage-daily-chart {
    display: grid;
    grid-template-columns: repeat(30, 1fr);
    align-items: end;
    gap: 3px;
    height: 140px;
    padding: 8px;
    background: var(--app-surface-muted);
    border: 1px solid var(--app-border);
    border-radius: var(--bs-card-border-radius);
}

.ai-usage-daily-chart__bar {
    display: block;
    min-height: 2px;
    background: var(--app-accent, #3563ff);
    transition: opacity 0.15s ease;
}

.ai-usage-daily-chart__bar:hover {
    opacity: 0.78;
}

.ai-usage-daily-chart__bar--empty {
    background: var(--app-border);
}

.ai-usage-daily-chart__axis {
    display: flex;
    justify-content: space-between;
    margin-top: 6px;
}

.table-cell-note-preview {
    max-width: 280px;
}

/* Shared review surfaces used by topic review and planner debug tables. */
.review-table-shell {
    border: 0;
    background: var(--app-gradient-surface-raised);
    overflow: hidden;
}

.review-table-wrap {
    overflow-x: auto;
}

/* Planner metadata grids. */
.planner-meta {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 12px;
    margin-top: 16px;
}
/* Planner controls and calendar framing. */
.planner-toolbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
    padding: 4px 0;
}

.planner-toolbar-note {
    max-width: 62ch;
    font-size: 0.89rem;
    line-height: 1.52;
    color: var(--app-muted);
}

.planner-controls-form {
    display: flex;
    flex-wrap: wrap;
    align-items: end;
    gap: 8px;
}

.planner-controls-field {
    min-width: 240px;
}

.planner-calendar-heading {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 16px;
}

.planner-calendar-title {
    margin: 0;
    font-size: 1.6rem;
    font-weight: 800;
    color: var(--app-heading);
    line-height: 1.1;
}

.planner-calendar-subtitle {
    margin-top: 4px;
    font-size: 0.92rem;
    color: var(--app-muted);
}

.planner-calendar-shell {
    border: 1px solid var(--app-border);
    background: var(--app-surface);
    overflow: hidden;
    border-radius: var(--app-radius);
    box-shadow: none;
}

.post-calendar-shell {
    border: 1px solid var(--app-border);
    background: var(--app-surface);
    overflow: hidden;
    border-radius: var(--app-radius);
}

.post-calendar-kpis {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
    margin: 18px 0 14px;
}

.post-calendar-kpi {
    border: 1px solid var(--app-border);
    border-left: var(--tint-strip-width) solid var(--app-selected-strip);
    border-radius: var(--app-radius);
    background: var(--app-surface);
    padding: 10px 12px;
}

.post-calendar-kpi.is-success {
    border-left-color: var(--app-success-text);
}

.post-calendar-kpi.is-warning {
    border-left-color: var(--app-warning-text);
}

.post-calendar-kpi.is-error {
    border-left-color: var(--app-error-text);
}

.post-calendar-kpi__label {
    color: var(--app-muted);
    font-size: var(--app-text-xs);
    font-weight: 800;
    text-transform: uppercase;
}

.post-calendar-kpi__value {
    margin-top: 4px;
    color: var(--app-heading);
    font-size: 1.35rem;
    font-weight: 800;
    line-height: 1;
}

.post-calendar-filter {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px 12px;
    margin: 16px 0 12px;
}

.post-calendar-filter__title {
    color: var(--app-heading);
    font-size: var(--app-text-xs);
    font-weight: 800;
}

.post-calendar-filter__controls {
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
}

.post-calendar-filter__button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 30px;
    padding: 5px 10px;
    border: 1px solid var(--app-border);
    border-radius: var(--bs-btn-border-radius-sm);
    background: var(--app-surface);
    color: var(--app-muted);
    font-size: var(--app-text-xs);
    font-weight: 800;
    line-height: 1;
}

.post-calendar-filter__button:hover,
.post-calendar-filter__button:focus-visible {
    border-color: var(--app-info-border);
    background: var(--app-info-bg);
    color: var(--app-info-text);
}

.post-calendar-filter__button.is-active {
    border-color: var(--app-selected-border);
    background: var(--app-selected-wash-soft);
    color: var(--app-heading);
}

@media (max-width: 767.98px) {
    .post-calendar-kpis {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

.post-calendar-legend-wrap {
    display: grid;
    gap: 7px;
    margin: 0 0 12px;
}

.post-calendar-legend {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px 12px;
    color: var(--app-muted);
    font-size: var(--app-text-xs);
    font-weight: 700;
}

.post-calendar-legend__title {
    color: var(--app-heading);
    font-weight: 800;
}

.post-calendar-legend__hint {
    color: var(--app-muted);
    font-weight: 600;
}

.post-calendar-legend__item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.post-calendar-legend .post-calendar-day-badge {
    min-height: 16px;
    padding: 0;
    border: 0;
    background: transparent;
}

.post-calendar-legend .post-calendar-day-badge__dot {
    width: 8px;
    height: 8px;
}

.post-calendar-legend .post-calendar-pill__status {
    margin-left: 0;
}

.post-calendar-weekdays,
.post-calendar-grid {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
}

.post-calendar-weekdays {
    background: var(--app-surface-muted);
    border-bottom: 1px solid var(--app-border);
}

.post-calendar-weekday {
    padding: 15px 16px;
    font-size: var(--app-text-sm);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--app-muted);
    border-right: 1px solid var(--app-border);
}

.post-calendar-weekday:last-child {
    border-right: 0;
}

.post-calendar-cell {
    min-height: 200px;
    padding: 12px;
    background: var(--app-surface);
    border-right: 1px solid var(--app-border);
    border-bottom: 1px solid var(--app-border);
    display: flex;
    flex-direction: column;
    gap: 10px;
    min-width: 0;
    transition: background-color 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}

.post-calendar-cell:nth-child(7n) {
    border-right: 0;
}

.post-calendar-cell.is-outside {
    opacity: 0.45;
    background: transparent;
}

.post-calendar-cell:not(.is-outside):hover {
    background: var(--app-surface-muted);
}

.post-calendar-cell.is-filter-empty {
    background: color-mix(in srgb, var(--app-surface-muted) 72%, transparent);
}

.post-calendar-cell.is-filter-empty .post-calendar-cell__items {
    opacity: 0.45;
}

.post-calendar-cell__topline {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    min-width: 0;
}

.post-calendar-cell__day {
    font-size: 1.35rem;
    font-weight: 700;
    color: var(--app-heading);
    line-height: 1;
}

.post-calendar-day-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex: 0 0 auto;
    min-height: 22px;
    padding: 3px 7px;
    border: 1px solid var(--app-error-border);
    border-radius: var(--app-radius-sm);
    background: var(--app-error-bg);
    color: var(--app-error-text);
    font-size: 0.76rem;
    font-weight: 800;
    line-height: 1;
    white-space: nowrap;
}

.post-calendar-day-badge__dot {
    width: 8px;
    height: 8px;
    border-radius: var(--app-radius-pill);
    background: var(--app-error-text);
    box-shadow: 0 0 0 3px var(--app-error-bg);
}

.post-calendar-day-badge.is-complete {
    border-color: var(--app-success-border);
    background: var(--app-success-bg);
    color: var(--app-success-text);
}

.post-calendar-day-badge.is-complete .post-calendar-day-badge__dot {
    background: var(--app-success-text);
    box-shadow: 0 0 0 3px var(--app-success-bg);
}

.post-calendar-day-badge.is-partial {
    border-color: var(--app-warning-border);
    background: var(--app-warning-bg);
    color: var(--app-warning-text);
}

.post-calendar-day-badge.is-partial .post-calendar-day-badge__dot {
    background: var(--app-warning-text);
    box-shadow: 0 0 0 3px var(--app-warning-bg);
}

/* CDX-471: is-empty (giorno senza post) = muted (non urgente, non un errore).
   Pattern coerente con .ai-texts-approval-summary.is-empty (CDX-465). */
.post-calendar-day-badge.is-empty {
    border-color: var(--app-border);
    background: var(--app-surface-muted);
    color: var(--app-muted);
}

.post-calendar-day-badge.is-empty .post-calendar-day-badge__dot {
    background: var(--app-muted);
    box-shadow: 0 0 0 3px var(--app-surface-muted);
}

.post-calendar-day-badge.is-error {
    border-color: var(--app-error-border);
    background: var(--app-error-bg);
    color: var(--app-error-text);
}

.post-calendar-cell__items {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.post-calendar-pill {
    --calendar-chip-accent: var(--tint-color, var(--app-border));
    --calendar-chip-accent-dark: var(--tint-color-dark, var(--calendar-chip-accent));
    --calendar-chip-surface: var(--tint-surface, var(--app-surface-muted));
    --calendar-chip-border: var(--app-border);
    --calendar-chip-strong: var(--tint-strong-light, var(--calendar-chip-accent));
    display: flex;
    align-items: center;
    gap: 9px;
    min-height: 30px;
    padding: 3px 9px 3px 6px;
    background: var(--calendar-chip-surface);
    font-size: var(--app-text-xs);
    text-decoration: none;
    color: var(--calendar-chip-strong);
    border: 1px solid var(--calendar-chip-border);
    border-left: var(--tint-strip-width) solid var(--calendar-chip-strong);
    border-radius: var(--app-radius);
    transition: background 0.1s ease, border-color 0.1s ease, transform 0.1s ease;
}

.post-calendar-pill:hover {
    background: var(--calendar-chip-surface);
    border-color: var(--calendar-chip-strong);
    border-left-color: var(--calendar-chip-strong);
    color: var(--calendar-chip-strong);
    transform: translateX(1px);
}

/* CDX-494: pillola da versione storica (committed item che il cron pubblicherà
   ma proviene da un piano non più current). Opacity ridotta + bordo dashed
   per distinguere a colpo d'occhio dagli item della versione live. Tooltip
   completa con "Da versione storica vN". */
.post-calendar-pill--from-historical,
.post-calendar-mobile-item--from-historical {
    opacity: 0.65;
    border-style: dashed;
}

.post-calendar-pill--from-historical:hover,
.post-calendar-mobile-item--from-historical:hover {
    opacity: 0.9;
}

.post-calendar-pill__social-icon {
    font-size: 1.15em;
    color: currentColor;
    flex-shrink: 0;
}

.post-calendar-pill__thumb {
    width: 38px;
    height: 38px;
    object-fit: cover;
    flex-shrink: 0;
}

.post-calendar-pill__thumb-wrap,
.post-calendar-mobile-item__thumb-wrap {
    position: relative;
    display: inline-flex;
    flex: 0 0 auto;
}

.post-calendar-pill__play {
    position: absolute;
    top: 50%;
    left: 50%;
    color: color-mix(in srgb, #ffffff 90%, transparent);
    font-size: 1.25rem;
    line-height: 1;
    transform: translate(-50%, -50%);
    text-shadow: 0 1px 6px color-mix(in srgb, #000000 80%, transparent);
    pointer-events: none;
}

.post-calendar-pill__title {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    align-items: flex-start;
    gap: 4px;
    font-size: 0.78rem;
    line-height: 1.32;
    color: currentColor;
}

.post-calendar-pill__title-icon {
    flex: 0 0 auto;
    font-size: 0.85em;
    line-height: 1.4;
    margin-top: 1px;
    opacity: 0.85;
}

.post-calendar-pill__title-text {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    overflow-wrap: anywhere;
}

.post-calendar-pill__title.is-topic,
.post-calendar-mobile-item__title.is-topic {
    font-style: italic;
    color: var(--app-muted);
}

.post-calendar-pill__time {
    font-variant-numeric: tabular-nums;
    font-size: var(--app-text-xs);
    color: var(--app-muted);
    flex-shrink: 0;
}

.post-calendar-pill__title ~ .post-calendar-pill__time {
    margin-left: 6px;
}

.post-calendar-pill:not(:has(.post-calendar-pill__title)) .post-calendar-pill__time {
    margin-left: auto;
}

.post-calendar-pill__status {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1rem;
    min-width: 1rem;
    height: 1rem;
    margin-left: auto;
    flex-shrink: 0;
    border-radius: var(--app-radius-pill);
    font-size: 0.88rem;
    line-height: 1;
}

.post-calendar-pill__time + .post-calendar-pill__status {
    margin-left: 6px;
}

.publish-event-post-link {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    color: var(--tint-color, var(--app-primary));
    text-decoration-color: color-mix(in srgb, currentColor 38%, transparent);
}

.publish-event-post-link:hover,
.publish-event-post-link:focus-visible {
    color: var(--tint-color, var(--app-primary));
    text-decoration-color: currentColor;
}

.publish-event-external-link {
    color: var(--tint-color, var(--app-primary));
    text-decoration-color: color-mix(in srgb, currentColor 38%, transparent);
}

.publish-event-external-link:hover,
.publish-event-external-link:focus-visible {
    color: var(--tint-color, var(--app-primary));
    text-decoration-color: currentColor;
}

.publish-event-social-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.15rem;
    min-width: 1.15rem;
    line-height: 1;
    color: var(--tint-color, currentColor);
    font-size: 1.05rem;
}
html[data-theme="dark"] .publish-event-social-icon {
    color: var(--tint-color-dark, var(--tint-color, currentColor));
}

html[data-theme="dark"] .publish-event-post-link,
html[data-theme="dark"] .publish-event-post-link:hover,
html[data-theme="dark"] .publish-event-post-link:focus-visible,
html[data-theme="dark"] .publish-event-external-link,
html[data-theme="dark"] .publish-event-external-link:hover,
html[data-theme="dark"] .publish-event-external-link:focus-visible {
    color: var(--tint-color-dark, var(--tint-color, var(--app-primary)));
}
.table-row--error > *,
.telegram-notification-event-row--failed > *,
.admin-publish-event-row--failed > *,
.admin-ai-usage-row--error > * {
    --bs-table-bg: var(--app-error-bg);
    background-color: var(--bs-table-bg) !important;
    border-color: var(--app-error-border) !important;
}

.table-row--success > *,
.admin-publish-event-row--published > * {
    --bs-table-bg: var(--app-success-bg);
    background-color: var(--bs-table-bg) !important;
    border-color: var(--app-success-border) !important;
}

.post-calendar-pill__status.status-info {
    color: var(--app-info-text);
}

.post-calendar-pill__status.status-secondary {
    color: var(--app-muted);
}

.post-calendar-pill__status.status-generato {
    color: var(--app-success-text);
}

.post-calendar-pill__status.status-errore {
    color: var(--app-error-text);
}

.post-calendar-pill__status.status-muted {
    color: var(--app-muted);
}

.post-calendar-pill__status.status-unset {
    color: var(--app-muted);
}

.post-calendar-mobile-list {
    display: none;
}

.post-calendar-mobile-day {
    border: 1px solid var(--app-border);
    border-radius: var(--bs-card-border-radius);
    background: var(--app-surface);
    overflow: hidden;
}

.post-calendar-mobile-day + .post-calendar-mobile-day {
    margin-top: 12px;
}

.post-calendar-mobile-day__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 10px 12px;
    border-bottom: 1px solid var(--app-border);
    background: var(--app-surface-muted);
}

.calendar-mobile-day-title {
    margin: 0;
    color: var(--app-heading);
    font-size: 1rem;
    font-weight: 800;
    line-height: 1.2;
}

.post-calendar-mobile-day__count {
    flex: 0 0 auto;
    color: var(--app-muted);
    font-size: var(--app-text-xs);
    font-weight: 800;
    text-transform: uppercase;
}

.post-calendar-mobile-day__meta {
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    flex: 0 0 auto;
}

.post-calendar-mobile-day__items {
    display: grid;
    gap: 0;
}

.post-calendar-mobile-item {
    --calendar-chip-accent: var(--tint-color, var(--app-border));
    --calendar-chip-accent-dark: var(--tint-color-dark, var(--calendar-chip-accent));
    --calendar-chip-surface: var(--tint-surface, var(--app-surface));
    --calendar-chip-border: var(--app-border);
    --calendar-chip-strong: var(--tint-strong-light, var(--calendar-chip-accent));
    display: flex;
    gap: 8px;
    min-width: 0;
    padding: 8px 10px;
    border-left: var(--tint-strip-width) solid var(--calendar-chip-strong);
    background: var(--calendar-chip-surface);
    color: var(--calendar-chip-strong);
    text-decoration: none;
}

.post-calendar-mobile-item + .post-calendar-mobile-item {
    border-top: 1px solid var(--calendar-chip-border);
}

.post-calendar-mobile-item:hover,
.post-calendar-mobile-item:focus-visible {
    color: var(--calendar-chip-strong);
    background: var(--calendar-chip-surface);
}

.post-calendar-mobile-item__thumb {
    width: 58px;
    height: 58px;
    object-fit: cover;
    flex: 0 0 auto;
    border: 1px solid var(--app-border);
    border-radius: var(--app-radius-sm);
}

.post-calendar-mobile-item__body {
    display: grid;
    gap: 3px;
    min-width: 0;
    flex: 1 1 auto;
}

.post-calendar-mobile-item__meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 5px;
    color: var(--app-muted);
    font-size: var(--app-text-xs);
    font-weight: 700;
}

.post-calendar-mobile-item__social {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    color: currentColor;
}

.post-calendar-mobile-item__time {
    font-variant-numeric: tabular-nums;
}

.post-calendar-mobile-item__status {
    padding: 2px 6px;
    border: 1px solid var(--app-border);
    border-radius: var(--app-radius-sm);
    color: var(--app-muted);
    background: var(--app-surface);
    font-size: 0.68rem;
    font-weight: 800;
    line-height: 1.2;
    text-transform: uppercase;
}

.post-calendar-mobile-item__status.status-info {
    border-color: var(--app-info-border);
    color: var(--app-info-text);
    background: var(--app-info-bg);
}

.post-calendar-mobile-item__status.status-generato {
    border-color: var(--app-success-border);
    color: var(--app-success-text);
    background: var(--app-success-bg);
}

.post-calendar-mobile-item__status.status-errore {
    border-color: var(--app-error-border);
    color: var(--app-error-text);
    background: var(--app-error-bg);
}

.calendar-mobile-item-title {
    color: currentColor;
    font-size: 0.82rem;
    font-weight: 700;
    line-height: 1.32;
    overflow-wrap: anywhere;
}

.post-calendar-mobile-item__title {
    display: flex;
    align-items: flex-start;
    gap: 5px;
    min-width: 0;
}

.post-calendar-mobile-item__title-icon {
    flex: 0 0 auto;
    font-size: 0.85em;
    line-height: 1.4;
    margin-top: 1px;
    opacity: 0.85;
}

.post-calendar-mobile-item__title-text {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    overflow-wrap: anywhere;
}

.planner-calendar-card .card-body {
    padding-left: 20px !important;
    padding-right: 20px !important;
}

/* Planner-specific components reused across monthly analysis, calendar and debug. */
.planner-analysis-card {
    background: var(--app-surface);
    border: 1px solid var(--app-border);
    padding: 22px;
    border-radius: var(--app-radius);
    box-shadow: none;
    overflow: hidden;
}

.planner-analysis-card.is-positive {
    border-color: var(--app-success-border);
    background: var(--app-success-bg);
}

.planner-analysis-card.is-improvement {
    border-color: var(--app-warning-border);
    background: var(--app-warning-bg);
}

.planner-analysis-card.is-critical {
    border-color: var(--app-error-border);
    background: var(--app-error-bg);
}

.planner-analysis-accent {
    height: 6px;
    margin: -22px -22px 18px;
    border-radius: var(--app-radius) var(--app-radius) 0 0;
    background: var(--app-border-strong);
}

.planner-analysis-accent.is-positive {
    background: var(--app-success-text);
}

.planner-analysis-accent.is-improvement {
    background: var(--app-warning-text);
}

.planner-analysis-accent.is-critical {
    background: var(--app-error-text);
}

.planner-analysis-title {
    font-size: 0.82rem;
    color: var(--app-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-bottom: 8px;
}
.planner-analysis-copy {
    margin: 0 0 16px;
    display: grid;
    gap: 6px;
}

.planner-analysis-copy-primary {
    color: var(--app-heading);
    font-weight: 600;
    line-height: 1.35;
}

.planner-analysis-copy-secondary {
    color: var(--app-muted);
    font-size: 0.92rem;
    line-height: 1.4;
}
.planner-analysis-list {
    display: grid;
    gap: 10px;
}

.planner-analysis-list-item {
    display: grid;
    gap: 6px;
}

.planner-analysis-list-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 12px;
}

.planner-analysis-list-label {
    color: var(--app-heading);
    font-weight: 600;
}

.planner-analysis-list-value {
    color: var(--app-muted);
    font-size: 0.88rem;
    white-space: nowrap;
}

.planner-analysis-bar {
    width: 100%;
    height: 8px;
    background: var(--app-border);
    box-shadow: inset 0 0 0 1px var(--app-border);
    overflow: hidden;
}

.planner-analysis-bar-fill {
    height: 100%;
    background: var(--app-border-strong);
}

.planner-analysis-bar-fill.is-neutral {
    background: var(--app-muted);
}

.planner-analysis-bar-fill.is-good {
    background: var(--app-success-text);
}

.planner-analysis-bar-fill.is-medium {
    background: var(--app-warning-text);
}

.planner-analysis-bar-fill.is-low {
    background: var(--app-error-text);
}

.planner-analysis-consistency {
    display: grid;
    align-content: center;
    gap: 8px;
    min-height: 100%;
    padding: 4px 2px 2px;
}

.planner-analysis-consistency-title {
    color: var(--app-heading);
    font-size: 1.15rem;
    font-weight: 700;
    line-height: 1.3;
}

.planner-analysis-consistency-text {
    color: var(--app-muted);
    font-size: 0.94rem;
    line-height: 1.6;
}
/* Padding 3px 7px volutamente più stretto di .config-chip (7px 11px):
   pill compatto a 0.72rem per stato/formato in tabelle e meta-info. */
.planner-format-badge,
.planner-status-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 3px 7px;
    font-size: 0.72rem;
    font-weight: 700;
    line-height: 1;
    border: 1px solid var(--app-border);
    border-radius: var(--app-radius-sm);
    background: var(--app-surface);
    color: var(--app-border-strong);
}
.planner-status-badge.status-bozza,
.planner-status-badge.status-secondary,
.planner-status-badge.status-muted,
.planner-status-badge.status-rifiutato {
    /* CDX-458: muted = non urgente. Bozza (non iniziato) e Rifiutato (post-decisione
       terminale negativa) condividono la palette: l'operatore non deve agire.
       Distinto da status-da-approvare (warning, pre-decisione che richiede azione). */
    border-color: var(--app-border);
    background: var(--app-surface-muted);
    color: var(--app-text);
}

.planner-status-badge.status-da-approvare {
    /* warning = richiede decisione umana (pre-decisione). */
    border-color: var(--app-warning-border);
    background: var(--app-warning-bg);
    color: var(--app-warning-text);
}

.planner-status-badge.status-approvato {
    /* Stato finale positivo del pipeline editoriale (e mappato anche da publish_status
       'published' tramite tone 'approvato' in post_publishing.php). */
    border-color: var(--app-success-border);
    background: var(--app-success-bg);
    color: var(--app-success-text);
}

.planner-status-badge.status-errore {
    border-color: var(--app-error-border);
    background: var(--app-error-bg);
    color: var(--app-error-text);
}

.planner-status-badge.status-generato,
.planner-status-badge.status-info {
    /* status-generato = AI ha completato, in attesa di revisione (intermedio
       editoriale). Info pieno blu. */
    border-color: var(--app-info-border);
    background: var(--app-info-bg);
    color: var(--app-info-text);
}

.planner-status-badge.status-pending {
    /* CDX-458: status-pending = Schedulato/in coda al publishing. Stessa hue di
       status-generato (entrambi "intermedio") ma intensità ridotta: bg muted +
       border+text info. Differenziato visivamente per evitare collisione tra
       dimensioni diverse (editorial vs publish). */
    border-color: var(--app-info-border);
    background: var(--app-surface-muted);
    color: var(--app-info-text);
}

/* Planner calendar items and day-detail cards share the same accent language. */
.planner-day-items {
    display: grid;
    gap: 6px;
    min-width: 0;
}

.planner-day-item {
    --calendar-chip-accent: var(--tint-color, var(--app-border));
    --calendar-chip-accent-dark: var(--tint-color-dark, var(--calendar-chip-accent));
    --calendar-chip-surface: var(--tint-surface, var(--app-surface));
    --calendar-chip-border: var(--app-border);
    --calendar-chip-strong: var(--tint-strong-light, var(--calendar-chip-accent));
    display: grid;
    grid-template-rows: auto auto;
    gap: 3px;
    padding: 4px 8px 5px 6px;
    background: var(--calendar-chip-surface);
    color: var(--calendar-chip-strong);
    border: 1px solid var(--calendar-chip-border);
    border-left: var(--tint-strip-width) solid var(--calendar-chip-strong);
    min-width: 0;
    overflow: hidden;
    border-radius: var(--app-radius);
}

.planner-day-item-row--meta {
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
    flex-wrap: nowrap;
    overflow: hidden;
}

.planner-day-item-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 0.92rem;
    min-width: 0.92rem;
    color: currentColor;
    font-size: 0.84rem;
    line-height: 1;
    flex: 0 0 auto;
}

.planner-day-item-text {
    font-size: 0.78rem;
    color: currentColor;
    line-height: 1.22;
    letter-spacing: -0.01em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
}

.planner-day-item-strategy {
    --strategy-accent: var(--tint-color, var(--app-muted));
    --strategy-accent-dark: var(--tint-color-dark, var(--strategy-accent));
    --strategy-surface: var(--tint-surface, var(--app-surface));
    display: inline-flex;
    align-items: center;
    gap: 3px;
    margin-left: 0;
    padding: 2px 6px;
    font-size: 0.72rem;
    font-weight: inherit;
    line-height: 1.05;
    letter-spacing: 0.02em;
    background: var(--strategy-surface);
    border: 1px solid var(--app-border);
    border-radius: var(--app-radius-sm);
    color: var(--strategy-accent);
    white-space: nowrap;
    flex: 0 0 auto;
    max-width: 120px;
    overflow: hidden;
}

.planner-day-item-strategy span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.planner-day-detail-meta .planner-day-item-strategy {
    max-width: 140px;
    font-size: 0.72rem;
    padding: 3px 7px;
    box-shadow: none;
}

.planner-day-item-strategy i {
    color: inherit;
    font-size: 0.8em;
}

.planner-day-detail-card {
    --social-accent: var(--tint-color, var(--app-border));
    --social-accent-dark: var(--tint-color-dark, var(--social-accent));
    --social-surface: var(--tint-surface, var(--app-surface));
    --social-strong: var(--tint-strong-light, var(--social-accent));
    border: 1px solid var(--app-border);
    border-radius: var(--app-radius);
    background: var(--social-surface);
    border-left: var(--tint-strip-width) solid var(--social-strong);
    color: var(--social-strong);
    padding: 14px;
    box-shadow: none;
}

.ai-text-draft-card {
    scroll-margin-top: 18px;
}

.ai-text-draft-card.ai-text-draft-card--hash-focus {
    border-color: var(--social-strong, var(--app-ui-blue));
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--social-strong, var(--app-ui-blue)) 30%, transparent);
}

.planner-detail-block {
    background: var(--app-surface);
    border: 1px solid #e5e7eb;
    border-radius: var(--app-radius);
    padding: 12px;
}

.planner-detail-block--caption {
    padding: 10px 12px;
    border-color: var(--app-border);
    background: var(--app-surface);
}

.planner-day-detail-card > .planner-detail-block--caption {
    margin-top: 10px;
}

.planner-day-detail-section.is-compact .planner-day-detail-card {
    padding: 10px 12px;
}

.planner-day-detail-section.is-compact .planner-day-detail-topline {
    align-items: center;
    margin-bottom: 0;
}

.planner-day-detail-section.is-compact .planner-day-detail-title {
    margin-bottom: 0;
    font-size: 1rem;
}

.planner-day-detail-section.is-compact .planner-day-detail-social-icon {
    width: 1.1rem;
    min-width: 1.1rem;
    font-size: 1.1rem;
}

.planner-day-detail-section.is-compact .planner-day-detail-strategy-line,
.planner-day-detail-section.is-compact .planner-day-detail-card > .planner-detail-block--caption {
    display: none;
}

.planner-day-detail-section.is-compact .planner-day-detail-compact-line {
    display: flex;
}

.planner-day-detail-section.is-compact .planner-day-detail-meta .planner-format-badge,
.planner-day-detail-section.is-compact .planner-day-detail-meta .planner-status-badge,
.planner-day-detail-section.is-compact .planner-day-detail-meta .planner-day-item-strategy {
    padding: 4px 7px;
    font-size: 0.76rem;
}

.planner-detail-block--full {
    grid-column: 1 / -1;
}

.planner-detail-label {
    font-size: 0.78rem;
    color: var(--app-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-bottom: 4px;
}

.planner-detail-value {
    color: var(--app-heading);
    font-size: 0.92rem;
    line-height: 1.38;
    word-break: break-word;
}

.planner-detail-block--caption .planner-detail-value {
    font-size: 0.96rem;
    line-height: 1.44;
    font-weight: 500;
}

.planner-detail-block--caption .planner-detail-label {
    color: var(--social-strong, var(--app-muted));
}

.ai-text-image-section-title .planner-detail-label {
    color: var(--social-strong, var(--app-muted));
}

/* AI Texts reuses the planner day-detail component with a tiny integration layer. */
.ai-text-draft-card .planner-day-detail-topline > div:first-child {
    flex: 0 1 auto;
}

.ai-text-draft-card__meta {
    align-items: flex-start;
    justify-content: center;
    flex: 1 1 auto;
}

.planner-day-detail-meta .planner-format-badge,
.planner-day-detail-meta .planner-status-badge,
.planner-day-detail-meta .planner-day-item-strategy,
.ai-text-draft-card__meta .planner-format-badge,
.ai-text-draft-card__meta .planner-status-badge,
.ai-text-draft-card__meta .planner-day-item-strategy {
    padding: 5px 9px;
    font-size: 0.84rem;
    line-height: 1.15;
}

.planner-day-detail-meta .planner-format-badge,
.ai-text-draft-card__meta .planner-format-badge {
    border-color: color-mix(in srgb, var(--app-heading) 32%, var(--app-border) 68%);
    border-left: var(--app-strip-height-xs) solid var(--social-strong, var(--app-heading));
    background: var(--app-surface);
    color: var(--app-heading);
    font-weight: 800;
}

.planner-format-badge--neutral-strip {
    border-left: var(--app-strip-height-xs) solid var(--app-border-strong);
}

.planner-format-badge--mini,
.planner-status-badge--mini {
    padding: 1px 5px;
    font-size: 0.66rem;
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: 0.01em;
    flex: 0 1 auto;
    min-width: 0;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.planner-format-badge--mini {
    border-color: color-mix(in srgb, var(--app-heading) 32%, var(--app-border) 68%);
    border-left: var(--app-strip-height-xs) solid var(--calendar-chip-strong, var(--social-strong, var(--app-heading)));
    background: var(--app-surface);
    color: var(--app-heading);
}

.planner-format-picker {
    display: inline-flex;
    flex: 0 0 auto;
}

button.planner-format-badge--editable {
    appearance: none;
    background-image: none;
    box-shadow: none;
    margin: 0;
    cursor: pointer;
    transition: background 0.12s ease, border-color 0.12s ease, transform 0.12s ease;
    gap: 6px;
}

button.planner-format-badge--editable:hover,
button.planner-format-badge--editable:focus-visible {
    background: color-mix(in srgb, var(--social-strong, var(--app-heading)) 8%, var(--app-surface) 92%);
    border-color: var(--social-strong, var(--app-heading));
    outline: none;
}

button.planner-format-badge--editable[aria-expanded="true"] {
    background: color-mix(in srgb, var(--social-strong, var(--app-heading)) 12%, var(--app-surface) 88%);
    border-color: var(--social-strong, var(--app-heading));
}

.planner-format-badge__text {
    line-height: inherit;
}

.planner-format-badge__chevron {
    font-size: 0.7em;
    line-height: 1;
    opacity: 0.7;
}

.planner-format-picker__menu {
    min-width: 160px;
    padding: 4px 0;
    border-color: var(--app-border);
    box-shadow: 0 6px 18px rgba(15, 23, 42, 0.12);
}

.planner-format-picker__item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 12px;
    font-size: 0.86rem;
    color: var(--app-text);
    background: transparent;
    border: 0;
    width: 100%;
    text-align: left;
}

.planner-format-picker__item:hover,
.planner-format-picker__item:focus-visible {
    background: var(--app-surface-muted);
    color: var(--app-heading);
    outline: none;
}

.planner-format-picker__item.active,
.planner-format-picker__item[aria-current="true"] {
    color: var(--app-success-text);
    font-weight: 700;
    background: transparent;
}

.planner-format-picker__item-icon {
    flex: 0 0 auto;
    font-size: 0.95em;
    opacity: 0.7;
}

.planner-format-picker__item.active .planner-format-picker__item-icon {
    opacity: 1;
    color: var(--app-success-text);
}

.planner-day-item-social-label {
    display: none;
    align-items: center;
    color: currentColor;
    font-size: var(--app-text-xs);
    font-weight: 800;
    flex: 0 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ai-text-draft-card__actions-bar {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items: flex-start;
    justify-content: flex-end;
    flex: 0 0 auto;
}

.ai-text-draft-card__debug-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    padding: 0;
    border: 1px solid #d7dee8;
    border-radius: var(--app-radius-sm);
    background: var(--app-surface);
    color: var(--app-muted);
    font-size: 0.8rem;
    line-height: 1;
}

.ai-text-draft-card__debug-link:hover,
.ai-text-draft-card__debug-link:focus-visible {
    color: var(--social-strong, var(--app-heading));
    border-color: var(--social-strong, var(--app-border-strong));
}

.ai-text-draft-card__generation-meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    margin: -2px 0 12px;
    color: var(--app-muted);
    font-size: 0.78rem;
    font-weight: 700;
    line-height: 1.35;
}

.ai-text-draft-card__generation-meta .bi {
    color: var(--social-strong, var(--app-primary));
    font-size: 0.92rem;
}

.ai-text-draft-card__generation-meta-label {
    color: var(--app-heading);
}

.ai-text-next-action-meta {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin: 0 0 14px;
}

.ai-text-next-action-meta .bi {
    color: var(--app-accent-strong);
    font-size: 1rem;
}

.ai-text-provider-note {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin: 0 0 16px;
}

.ai-text-provider-note .bi {
    color: var(--app-accent-strong);
    font-size: 1rem;
}

.ai-action-legend {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px 12px;
    margin: 12px 0 16px;
    color: var(--app-muted);
    font-size: 0.78rem;
    line-height: 1.35;
}

.ai-action-legend__title {
    color: var(--app-heading);
    font-weight: 800;
}

.ai-action-legend__item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-weight: 700;
}

.ai-action-legend__swatch {
    width: 10px;
    height: 10px;
    border-radius: var(--app-radius-pill);
    border: 1px solid var(--app-border);
    background: var(--app-surface-muted);
    flex: 0 0 auto;
}

.ai-action-legend__swatch.is-ai {
    background: var(--app-ai-text);
    border-color: var(--app-ai-border);
}

.ai-action-legend__swatch.is-local {
    background: var(--app-surface);
    border-color: var(--app-border-strong);
}

.ai-action-legend__swatch.is-success {
    background: var(--app-success-text);
    border-color: var(--app-success-border);
}

.ai-action-legend__swatch.is-status {
    background: var(--app-info-text);
    border-color: var(--app-info-border);
}

.ai-text-draft-card__grid {
    align-items: start;
    grid-template-columns: 1fr;
}

.ai-text-draft-card__images,
.ai-text-draft-card__videos {
    display: grid;
    gap: 12px;
    min-width: 0;
}

.ai-text-draft-card__caption-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 6px;
}

.ai-text-draft-card__caption-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 8px;
}

.ai-text-draft-card__empty-warning {
    display: inline-flex;
    align-items: center;
    align-self: center;
    gap: 8px;
    max-width: 100%;
    padding: 8px 12px;
    border: 1px solid var(--app-warning-border);
    border-left: 3px solid var(--app-warning-border);
    border-radius: var(--app-radius);
    background: var(--app-warning-bg);
    color: var(--app-warning-text);
    font-size: 0.84rem;
    line-height: 1.35;
}

.ai-text-draft-card__empty-warning i {
    font-size: 0.96rem;
    line-height: 1;
}
.ai-text-social-preview-action {
    display: flex;
    justify-content: flex-end;
    grid-column: 1 / -1;
}

.ai-text-social-preview-action__count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border: 1px solid var(--app-warning-border);
    border-radius: var(--app-radius-pill);
    background: var(--app-warning-bg);
    color: var(--app-warning-text);
    font-size: 0.68rem;
    font-weight: 900;
    line-height: 1;
}

.ai-text-social-preview__warnings {
    display: flex;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 6px;
    max-width: 520px;
}

.ai-text-social-preview__warning {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 7px;
    border: 1px solid var(--app-warning-border);
    border-radius: var(--app-radius-pill);
    background: var(--app-warning-bg);
    color: var(--app-warning-text);
    font-size: 0.72rem;
    font-weight: 800;
    line-height: 1.15;
}

.ai-text-social-preview__card {
    --preview-brand: #64748b;
    --preview-brand-soft: #f1f5f9;
    display: flex;
    flex-direction: column;
    width: min(100%, 620px);
    border: 1px solid var(--app-border);
    border-radius: var(--app-radius);
    background: var(--app-surface);
    color: var(--app-heading);
    overflow: hidden;
}

.ai-text-social-preview-modal .ai-text-social-preview__card {
    margin-inline: auto;
    box-shadow: 0 18px 48px rgba(15, 23, 42, 0.12);
}

.ai-text-social-preview-modal .modal-body {
    display: grid;
    gap: 14px;
    justify-items: center;
    padding: 28px;
    background:
        linear-gradient(180deg, color-mix(in srgb, var(--app-surface-muted) 46%, transparent), transparent 42%),
        color-mix(in srgb, var(--app-surface-muted) 62%, var(--app-surface) 38%);
}

html[data-theme="dark"] .ai-text-social-preview-modal .ai-text-social-preview__card {
    box-shadow: 0 18px 48px rgba(0, 0, 0, 0.34);
}

html[data-theme="dark"] .ai-text-social-preview-modal .modal-body {
    background:
        linear-gradient(180deg, color-mix(in srgb, var(--app-surface-muted) 34%, transparent), transparent 42%),
        color-mix(in srgb, var(--app-surface-muted) 44%, var(--app-surface) 56%);
}

html[data-theme="dark"] .ai-text-social-preview__avatar {
    border-color: color-mix(in srgb, var(--preview-brand) 42%, var(--app-border) 58%);
    background: color-mix(in srgb, var(--preview-brand) 28%, var(--app-surface) 72%);
    color: color-mix(in srgb, var(--preview-brand) 38%, #ffffff 62%);
}

html[data-theme="dark"] .social-preview-template--youtube .ai-text-social-preview__avatar,
html[data-theme="dark"] .social-preview-template--linkedin .ai-text-social-preview__avatar,
html[data-theme="dark"] .social-preview-template--pinterest .ai-text-social-preview__avatar {
    background: color-mix(in srgb, var(--preview-brand) 22%, #ffffff 78%);
    color: color-mix(in srgb, var(--preview-brand) 78%, #111827 22%);
}

@media (max-width: 575.98px) {
    .ai-text-social-preview-modal .modal-body {
        padding: 16px;
    }
}

.ai-text-social-preview__card.social-preview-template--facebook {
    --preview-brand: #1877f2;
    --preview-brand-soft: #eaf3ff;
    width: min(100%, 680px);
}

.ai-text-social-preview__card.social-preview-template--facebook.social-preview-format--video {
    width: min(100%, 560px);
}

.ai-text-social-preview__card.social-preview-template--instagram {
    --preview-brand: #111827;
    --preview-brand-soft: #f3f4f6;
    width: min(100%, 470px);
    border: 1px solid var(--app-border);
    border-radius: 0;
    background: var(--app-surface);
}

.ai-text-social-preview__card.social-preview-template--instagram.social-preview-format--story {
    position: relative;
    width: min(100%, 390px);
    min-height: 690px;
    border: 0;
    border-radius: 18px;
    background: #08090d;
    color: #ffffff;
}

.ai-text-social-preview__card.social-preview-template--instagram.social-preview-format--reel {
    position: relative;
    width: min(100%, 390px);
    min-height: 690px;
    border: 0;
    border-radius: 18px;
    background: #08090d;
    color: #ffffff;
}

.ai-text-social-preview__card.social-preview-template--x {
    --preview-brand: #0f1419;
    --preview-brand-soft: #f1f5f9;
    width: min(100%, 430px);
    border: 1px solid var(--app-border);
    border-radius: 18px;
    background: var(--app-surface);
}

.ai-text-social-preview__card.social-preview-template--youtube {
    --preview-brand: #ff0000;
    --preview-brand-soft: #fff1f1;
    width: min(100%, 560px);
    border: 0;
    border-radius: 0;
    background: var(--app-surface);
    padding-bottom: 14px;
}

.ai-text-social-preview__card.social-preview-template--youtube.social-preview-format--short {
    position: relative;
    width: min(100%, 390px);
    min-height: 690px;
    border: 0;
    border-radius: 18px;
    background: #08090d;
    color: #ffffff;
}

.ai-text-social-preview__card.social-preview-template--youtube.social-preview-format--community-post {
    width: min(100%, 520px);
    border: 1px solid var(--app-border);
    border-radius: 12px;
    padding-bottom: 14px;
}

.ai-text-social-preview__card.social-preview-template--linkedin {
    --preview-brand: #0a66c2;
    --preview-brand-soft: #edf5fc;
    width: min(100%, 560px);
    border-radius: 10px;
    background: var(--app-surface);
}

.ai-text-social-preview__card.social-preview-template--pinterest {
    --preview-brand: #e60023;
    --preview-brand-soft: #fff1f3;
    width: min(100%, 660px);
    border-radius: 18px;
    background: var(--app-surface);
    padding-bottom: 16px;
}

.ai-text-social-preview__card.social-preview-template--tiktok {
    --preview-brand: #111827;
    --preview-brand-soft: #f3f4f6;
    position: relative;
    width: min(100%, 420px);
    min-height: 720px;
    border: 0;
    border-radius: 18px;
    background: #0b0b0f;
    color: #ffffff;
}

.ai-text-social-preview__header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 16px 10px;
}

.ai-text-social-preview__avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    flex: 0 0 auto;
    border: 1px solid color-mix(in srgb, var(--preview-brand) 32%, var(--app-border) 68%);
    border-radius: var(--app-radius-pill);
    background: color-mix(in srgb, var(--preview-brand) 10%, var(--app-surface) 90%);
    color: var(--preview-brand);
    font-size: 1rem;
}

.ai-text-social-preview__identity {
    display: grid;
    min-width: 0;
    color: var(--app-muted);
    font-size: 0.76rem;
    line-height: 1.25;
}

.ai-text-social-preview__identity strong {
    color: var(--app-heading);
    font-size: 0.9rem;
}

.ai-text-social-preview__body {
    padding: 0 16px 14px;
    color: var(--app-text);
    font-size: 0.92rem;
    line-height: 1.42;
    white-space: pre-wrap;
    word-break: break-word;
}

.social-preview-template--facebook:not(.social-preview-format--reel):not(.social-preview-format--story) .ai-text-social-preview__body {
    display: -webkit-box;
    overflow: hidden;
    margin: 0 16px 14px;
    padding: 0;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    white-space: normal;
}

.social-preview-template--facebook.social-preview-format--video .ai-text-social-preview__body {
    order: 3;
    margin-top: 4px;
}

.social-preview-template--instagram .ai-text-social-preview__body {
    order: 4;
    padding: 10px 14px 14px;
    font-size: 0.95rem;
    line-height: 1.36;
}

.social-preview-template--instagram:not(.social-preview-format--story):not(.social-preview-format--reel) .ai-text-social-preview__body {
    display: -webkit-box;
    overflow: hidden;
    max-height: 5.2rem;
    margin: 10px 14px 14px;
    padding: 0;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 4;
    line-clamp: 4;
    white-space: normal;
}

.social-preview-template--instagram.social-preview-format--story .ai-text-social-preview__body {
    position: absolute;
    right: 18px;
    bottom: 42px;
    left: 18px;
    z-index: 3;
    display: -webkit-box;
    overflow: hidden;
    padding: 0;
    color: #ffffff;
    font-size: 0.96rem;
    line-height: 1.28;
    text-shadow: 0 1px 10px rgba(0, 0, 0, 0.45);
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    white-space: normal;
}

.social-preview-template--instagram.social-preview-format--reel .ai-text-social-preview__body {
    position: absolute;
    right: 74px;
    bottom: 42px;
    left: 18px;
    z-index: 3;
    display: -webkit-box;
    overflow: hidden;
    padding: 0;
    color: #ffffff;
    font-size: 0.96rem;
    line-height: 1.28;
    text-shadow: 0 1px 10px rgba(0, 0, 0, 0.45);
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    white-space: normal;
}

.social-preview-template--x .ai-text-social-preview__body {
    padding: 0 14px 10px;
    font-size: 0.94rem;
    line-height: 1.34;
}

.social-preview-template--youtube .ai-text-social-preview__body {
    order: 3;
    padding: 2px 16px 0 58px;
    color: var(--app-heading);
    font-size: 0.9rem;
    font-weight: 850;
    line-height: 1.26;
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    white-space: normal;
}

.social-preview-template--youtube.social-preview-format--community-post .ai-text-social-preview__body {
    order: 2;
    margin: 6px 16px 12px;
    padding: 0;
    color: var(--app-text);
    font-size: 0.95rem;
    font-weight: 500;
    line-height: 1.36;
    -webkit-line-clamp: 3;
    line-clamp: 3;
}

.social-preview-template--linkedin .ai-text-social-preview__body {
    display: -webkit-box;
    overflow: hidden;
    margin: 10px 18px 14px;
    padding: 0;
    color: var(--app-heading);
    font-size: 1.02rem;
    line-height: 1.32;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 4;
    line-clamp: 4;
    white-space: normal;
}

.social-preview-template--pinterest .ai-text-social-preview__body {
    order: 3;
    display: -webkit-box;
    overflow: hidden;
    max-height: calc(1.12rem * 1.25 * 2);
    margin: 18px 18px 10px;
    padding: 0;
    color: var(--app-heading);
    font-size: 1.12rem;
    font-weight: 850;
    line-height: 1.25;
    overflow-wrap: anywhere;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    white-space: normal;
}

.social-preview-template--tiktok .ai-text-social-preview__body {
    position: absolute;
    right: 76px;
    bottom: 82px;
    left: 18px;
    z-index: 3;
    display: -webkit-box;
    overflow: hidden;
    padding: 0;
    color: #ffffff;
    font-size: 0.98rem;
    line-height: 1.28;
    text-shadow: 0 1px 10px rgba(0, 0, 0, 0.45);
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    white-space: normal;
}

.ai-text-social-preview__empty {
    color: var(--app-muted);
    font-style: italic;
}

.ai-text-social-preview__media {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 220px;
    border-top: 1px solid var(--app-border);
    border-bottom: 1px solid var(--app-border);
    background: var(--app-surface-muted);
    color: var(--app-muted);
    overflow: hidden;
}

.ai-text-social-preview__media img {
    display: block;
    width: 100%;
    max-height: 360px;
    object-fit: cover;
}

.ai-text-social-preview__media video,
.ai-text-social-preview__media iframe {
    display: block;
    width: 100%;
    max-height: 520px;
    border: 0;
    aspect-ratio: 16 / 9;
    background: #000000;
}

.social-preview-template--instagram .ai-text-social-preview__media {
    aspect-ratio: 1 / 1;
    min-height: 0;
    border: 0;
    border-top: 1px solid var(--app-border);
    border-bottom: 1px solid var(--app-border);
    border-radius: 0;
    background: var(--app-surface);
}

.social-preview-template--instagram.social-preview-format--story .ai-text-social-preview__media {
    position: absolute;
    inset: 0;
    aspect-ratio: auto;
    min-height: 100%;
    border: 0;
    border-radius: 18px;
    background: #08090d;
}

.social-preview-template--instagram.social-preview-format--reel .ai-text-social-preview__media {
    position: absolute;
    inset: 0;
    aspect-ratio: auto;
    min-height: 100%;
    border: 0;
    border-radius: 18px;
    background: #08090d;
}

.social-preview-template--instagram.social-preview-format--story .ai-text-social-preview__media::after {
    position: absolute;
    inset: 0;
    content: "";
    background:
        linear-gradient(to bottom, rgba(0, 0, 0, 0.42), transparent 34%),
        linear-gradient(to top, rgba(0, 0, 0, 0.58), transparent 42%);
    pointer-events: none;
}

.social-preview-template--instagram.social-preview-format--reel .ai-text-social-preview__media::after {
    position: absolute;
    inset: 0;
    content: "";
    background: linear-gradient(to top, rgba(0, 0, 0, 0.58), transparent 44%);
    pointer-events: none;
}

.social-preview-template--instagram .ai-text-social-preview__media img {
    aspect-ratio: 1 / 1;
    max-height: none;
}

.social-preview-template--instagram .ai-text-social-preview__media video,
.social-preview-template--instagram .ai-text-social-preview__media iframe {
    aspect-ratio: 1 / 1;
    max-height: none;
}

.social-preview-template--instagram.social-preview-format--story .ai-text-social-preview__media img,
.social-preview-template--instagram.social-preview-format--story .ai-text-social-preview__media video,
.social-preview-template--instagram.social-preview-format--story .ai-text-social-preview__media iframe,
.social-preview-template--instagram.social-preview-format--reel .ai-text-social-preview__media img,
.social-preview-template--instagram.social-preview-format--reel .ai-text-social-preview__media video,
.social-preview-template--instagram.social-preview-format--reel .ai-text-social-preview__media iframe {
    aspect-ratio: auto;
    height: 100%;
    max-height: none;
    object-fit: cover;
}

.social-preview-template--instagram.social-preview-format--story .ai-text-social-preview__media > .bi,
.social-preview-template--instagram.social-preview-format--reel .ai-text-social-preview__media > .bi {
    z-index: 2;
    color: rgba(255, 255, 255, 0.72);
}

.social-preview-template--x .ai-text-social-preview__media {
    margin: 0 14px;
    min-height: 0;
    border: 1px solid var(--app-border);
    border-radius: 14px;
}

.social-preview-template--x .ai-text-social-preview__media.is-missing {
    aspect-ratio: 16 / 9;
}

.social-preview-template--x .ai-text-social-preview__media img {
    height: auto;
    max-height: 420px;
    object-fit: contain;
}

.social-preview-template--x .ai-text-social-preview__media.has-blurred-backdrop {
    background: var(--app-surface-muted);
}

.social-preview-template--x .ai-text-social-preview__media.has-blurred-backdrop::before {
    position: absolute;
    inset: -22px;
    content: "";
    background-image: var(--social-preview-media-backdrop);
    background-position: center;
    background-size: cover;
    filter: blur(18px);
    opacity: 0.72;
    transform: scale(1.04);
}

.social-preview-template--x .ai-text-social-preview__media.has-blurred-backdrop::after {
    position: absolute;
    inset: 0;
    content: "";
    background: color-mix(in srgb, var(--app-surface) 20%, transparent);
    pointer-events: none;
}

.social-preview-template--x .ai-text-social-preview__media.has-blurred-backdrop img {
    position: relative;
    z-index: 1;
}

.social-preview-template--x .ai-text-social-preview__media video,
.social-preview-template--x .ai-text-social-preview__media iframe {
    aspect-ratio: 16 / 9;
    height: 100%;
    max-height: none;
    object-fit: cover;
}

.social-preview-template--youtube .ai-text-social-preview__media {
    order: 1;
    aspect-ratio: 16 / 9;
    min-height: 0;
    border: 0;
    border-radius: 0;
    background: var(--app-surface-muted);
}

.social-preview-template--youtube.social-preview-format--community-post .ai-text-social-preview__media {
    order: 3;
    aspect-ratio: auto;
    margin: 0 16px;
    border: 1px solid var(--app-border);
    border-radius: 12px;
}

.social-preview-template--youtube.social-preview-format--short .ai-text-social-preview__media {
    position: absolute;
    inset: 0;
    aspect-ratio: auto;
    min-height: 100%;
    border: 0;
    border-radius: 18px;
    background: #08090d;
}

.social-preview-template--youtube.social-preview-format--short .ai-text-social-preview__media::after {
    position: absolute;
    inset: 0;
    content: "";
    background:
        linear-gradient(to bottom, rgba(0, 0, 0, 0.24), transparent 30%),
        linear-gradient(to top, rgba(0, 0, 0, 0.62), transparent 44%);
    pointer-events: none;
}

.social-preview-template--linkedin .ai-text-social-preview__media {
    min-height: 0;
    margin: 0 18px;
    border: 0;
    background: var(--app-surface-muted);
}

.social-preview-template--pinterest .ai-text-social-preview__media {
    order: 2;
    min-height: 500px;
    margin: 0 18px;
    border: 0;
    border-radius: 18px;
    background: var(--app-surface-muted);
}

.social-preview-template--tiktok .ai-text-social-preview__media {
    position: absolute;
    inset: 0;
    min-height: 100%;
    border: 0;
    border-radius: 18px;
    background: #0b0b0f;
}

.social-preview-template--youtube .ai-text-social-preview__media img {
    aspect-ratio: 16 / 9;
    height: 100%;
    max-height: none;
}

.social-preview-template--youtube.social-preview-format--community-post .ai-text-social-preview__media img {
    aspect-ratio: auto;
    height: auto;
    max-height: 520px;
    object-fit: contain;
}

.social-preview-template--youtube .ai-text-social-preview__media video,
.social-preview-template--youtube .ai-text-social-preview__media iframe {
    aspect-ratio: 16 / 9;
    height: 100%;
    max-height: none;
}

.social-preview-template--youtube.social-preview-format--short .ai-text-social-preview__media img,
.social-preview-template--youtube.social-preview-format--short .ai-text-social-preview__media video,
.social-preview-template--youtube.social-preview-format--short .ai-text-social-preview__media iframe {
    aspect-ratio: auto;
    height: 100%;
    max-height: none;
    object-fit: cover;
}

.social-preview-template--youtube.social-preview-format--short .ai-text-social-preview__media > .bi {
    z-index: 2;
    color: rgba(255, 255, 255, 0.72);
}

.social-preview-template--linkedin .ai-text-social-preview__media img {
    height: auto;
    max-height: 560px;
    object-fit: contain;
}

.social-preview-template--linkedin .ai-text-social-preview__media video,
.social-preview-template--linkedin .ai-text-social-preview__media iframe {
    aspect-ratio: 16 / 9;
    height: 100%;
    max-height: none;
}

.social-preview-template--pinterest .ai-text-social-preview__media img {
    max-height: 680px;
}

.social-preview-template--tiktok .ai-text-social-preview__media img {
    height: 100%;
    max-height: none;
    object-fit: cover;
}

.social-preview-template--tiktok .ai-text-social-preview__media video,
.social-preview-template--tiktok .ai-text-social-preview__media iframe {
    height: 100%;
    max-height: none;
    aspect-ratio: auto;
    object-fit: cover;
}

.social-preview-template--tiktok .ai-text-social-preview__media::after {
    position: absolute;
    inset: 0;
    content: "";
    background: linear-gradient(to top, rgba(0, 0, 0, 0.58), transparent 44%);
    pointer-events: none;
}

.ai-text-social-preview__media > .bi {
    font-size: 2rem;
}

.ai-text-social-preview__media > span {
    position: absolute;
    left: 12px;
    bottom: 12px;
    max-width: calc(100% - 20px);
    padding: 4px 7px;
    border: 1px solid var(--app-border);
    border-radius: var(--app-radius-pill);
    background: color-mix(in srgb, var(--app-surface) 92%, transparent);
    color: var(--app-muted);
    font-size: 0.72rem;
    font-weight: 800;
    line-height: 1.1;
}

.social-preview-template--instagram .ai-text-social-preview__media > span {
    left: 14px;
    bottom: 14px;
}

.social-preview-template--youtube .ai-text-social-preview__media > span {
    right: 10px;
    bottom: 10px;
    left: auto;
    max-width: calc(100% - 20px);
    border: 0;
    border-radius: 7px;
    background: color-mix(in srgb, #111827 88%, transparent);
    color: #ffffff;
    font-size: 0.78rem;
}

.social-preview-template--linkedin .ai-text-social-preview__media > span {
    left: 12px;
    bottom: 12px;
}

.social-preview-template--pinterest .ai-text-social-preview__media > span {
    right: 14px;
    bottom: 14px;
    left: auto;
    border: 0;
    background: color-mix(in srgb, var(--app-surface) 82%, transparent);
}

.social-preview-template--tiktok .ai-text-social-preview__media > span {
    right: auto;
    top: 14px;
    bottom: auto;
    left: 18px;
    z-index: 2;
    border: 0;
    background: rgba(0, 0, 0, 0.46);
    color: #ffffff;
}

.ai-text-social-preview__media.is-link {
    min-height: 96px;
}

.ai-text-social-preview__media.is-missing {
    min-height: 132px;
    border-style: dashed;
}

.social-preview-template--facebook .ai-text-social-preview__media {
    min-height: 0;
    border-right: 0;
    border-left: 0;
    border-style: solid;
}

.social-preview-template--facebook.social-preview-format--video .ai-text-social-preview__media {
    order: 1;
    aspect-ratio: 16 / 9;
}

.social-preview-template--facebook .ai-text-social-preview__media.is-missing {
    aspect-ratio: 1.91 / 1;
    border-style: solid;
}

.social-preview-template--facebook.social-preview-format--video .ai-text-social-preview__media.is-missing {
    aspect-ratio: 16 / 9;
}

.social-preview-template--facebook .ai-text-social-preview__media img {
    height: auto;
    max-height: 520px;
    object-fit: contain;
}

.social-preview-template--facebook:not(.social-preview-format--reel):not(.social-preview-format--story) .ai-text-social-preview__media.has-blurred-backdrop {
    background: var(--app-surface-muted);
}

.social-preview-template--facebook:not(.social-preview-format--reel):not(.social-preview-format--story) .ai-text-social-preview__media.has-blurred-backdrop::before {
    position: absolute;
    inset: -22px;
    content: "";
    background-image: var(--social-preview-media-backdrop);
    background-position: center;
    background-size: cover;
    filter: blur(18px);
    opacity: 0.72;
    transform: scale(1.04);
}

.social-preview-template--facebook:not(.social-preview-format--reel):not(.social-preview-format--story) .ai-text-social-preview__media.has-blurred-backdrop::after {
    position: absolute;
    inset: 0;
    content: "";
    background: color-mix(in srgb, var(--app-surface) 20%, transparent);
    pointer-events: none;
}

.social-preview-template--facebook:not(.social-preview-format--reel):not(.social-preview-format--story) .ai-text-social-preview__media.has-blurred-backdrop img {
    position: relative;
    z-index: 1;
}

.social-preview-template--facebook .ai-text-social-preview__media video,
.social-preview-template--facebook .ai-text-social-preview__media iframe {
    aspect-ratio: 16 / 9;
    height: 100%;
    max-height: none;
}

.social-preview-template--facebook.social-preview-format--video .ai-text-social-preview__media video,
.social-preview-template--facebook.social-preview-format--video .ai-text-social-preview__media iframe {
    height: 100%;
}

.social-preview-template--facebook.social-preview-format--video .ai-text-social-preview__header {
    order: 2;
    padding: 12px 16px 0;
}

.social-preview-template--facebook.social-preview-format--video .ai-text-social-preview__mock-actions {
    order: 4;
}

.ai-text-social-preview__card.social-preview-template--facebook.social-preview-format--reel,
.ai-text-social-preview__card.social-preview-template--facebook.social-preview-format--story {
    position: relative;
    width: min(100%, 420px);
    min-height: 720px;
    border: 0;
    border-radius: 18px;
    background: #08090d;
    color: #ffffff;
}

.social-preview-template--facebook.social-preview-format--reel .ai-text-social-preview__media,
.social-preview-template--facebook.social-preview-format--story .ai-text-social-preview__media {
    position: absolute;
    inset: 0;
    aspect-ratio: auto;
    min-height: 100%;
    border: 0;
    border-radius: 18px;
    background: #08090d;
}

.social-preview-template--facebook.social-preview-format--reel .ai-text-social-preview__media::after,
.social-preview-template--facebook.social-preview-format--story .ai-text-social-preview__media::after {
    position: absolute;
    inset: 0;
    content: "";
    background: linear-gradient(to top, rgba(0, 0, 0, 0.62), transparent 44%);
    pointer-events: none;
}

.social-preview-template--facebook.social-preview-format--reel .ai-text-social-preview__media img,
.social-preview-template--facebook.social-preview-format--reel .ai-text-social-preview__media video,
.social-preview-template--facebook.social-preview-format--reel .ai-text-social-preview__media iframe,
.social-preview-template--facebook.social-preview-format--story .ai-text-social-preview__media img,
.social-preview-template--facebook.social-preview-format--story .ai-text-social-preview__media video,
.social-preview-template--facebook.social-preview-format--story .ai-text-social-preview__media iframe {
    height: 100%;
    max-height: none;
    aspect-ratio: auto;
    object-fit: cover;
}

.social-preview-template--facebook.social-preview-format--reel .ai-text-social-preview__media > .bi,
.social-preview-template--facebook.social-preview-format--story .ai-text-social-preview__media > .bi {
    z-index: 2;
    color: rgba(255, 255, 255, 0.72);
}

.social-preview-template--facebook.social-preview-format--reel .ai-text-social-preview__header {
    position: absolute;
    right: 76px;
    bottom: 126px;
    left: 18px;
    z-index: 3;
    padding: 0;
}

.social-preview-template--facebook.social-preview-format--story .ai-text-social-preview__header {
    position: absolute;
    top: 18px;
    right: 18px;
    left: 18px;
    z-index: 3;
    padding: 0;
}

.social-preview-template--facebook.social-preview-format--reel .ai-text-social-preview__avatar,
.social-preview-template--facebook.social-preview-format--story .ai-text-social-preview__avatar {
    border-color: rgba(255, 255, 255, 0.34);
    background: rgba(255, 255, 255, 0.92);
    color: var(--preview-brand);
}

.social-preview-template--facebook.social-preview-format--reel .ai-text-social-preview__identity,
.social-preview-template--facebook.social-preview-format--story .ai-text-social-preview__identity {
    color: rgba(255, 255, 255, 0.78);
}

.social-preview-template--facebook.social-preview-format--reel .ai-text-social-preview__identity strong,
.social-preview-template--facebook.social-preview-format--story .ai-text-social-preview__identity strong {
    color: #ffffff;
}

.social-preview-template--facebook.social-preview-format--reel .ai-text-social-preview__body,
.social-preview-template--facebook.social-preview-format--story .ai-text-social-preview__body {
    position: absolute;
    right: 18px;
    bottom: 42px;
    left: 18px;
    z-index: 3;
    display: -webkit-box;
    overflow: hidden;
    padding: 0;
    color: #ffffff;
    font-size: 0.96rem;
    line-height: 1.28;
    text-shadow: 0 1px 10px rgba(0, 0, 0, 0.45);
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    white-space: normal;
}

.social-preview-template--facebook.social-preview-format--reel .ai-text-social-preview__body {
    right: 76px;
    font-size: 0.98rem;
}

.ai-text-social-preview__mock-actions {
    display: none;
}

.social-preview-template--instagram .ai-text-social-preview__mock-actions {
    display: flex;
    order: 3;
    gap: 18px;
    padding: 14px 14px 0;
    color: var(--app-heading);
    font-size: 1.35rem;
}

.social-preview-template--instagram .ai-text-social-preview__mock-actions span:last-child {
    margin-left: auto;
}

.social-preview-template--instagram.social-preview-format--story .ai-text-social-preview__header {
    position: absolute;
    top: 18px;
    right: 18px;
    left: 18px;
    z-index: 3;
    padding: 0;
}

.social-preview-template--instagram.social-preview-format--reel .ai-text-social-preview__header {
    position: absolute;
    right: 74px;
    bottom: 112px;
    left: 18px;
    z-index: 3;
    padding: 0;
}

.social-preview-template--instagram.social-preview-format--story .ai-text-social-preview__avatar,
.social-preview-template--instagram.social-preview-format--reel .ai-text-social-preview__avatar {
    border-color: rgba(255, 255, 255, 0.34);
    background: rgba(255, 255, 255, 0.92);
    color: var(--preview-brand);
}

.social-preview-template--instagram.social-preview-format--story .ai-text-social-preview__identity,
.social-preview-template--instagram.social-preview-format--reel .ai-text-social-preview__identity {
    color: rgba(255, 255, 255, 0.82);
}

.social-preview-template--instagram.social-preview-format--story .ai-text-social-preview__identity strong,
.social-preview-template--instagram.social-preview-format--reel .ai-text-social-preview__identity strong {
    color: #ffffff;
}

.social-preview-template--instagram.social-preview-format--story .ai-text-social-preview__mock-actions {
    display: none;
}

.social-preview-template--instagram.social-preview-format--reel .ai-text-social-preview__mock-actions {
    position: absolute;
    right: 14px;
    bottom: 58px;
    z-index: 3;
    display: grid;
    gap: 14px;
    padding: 0;
    color: #ffffff;
    font-size: 0;
}

.social-preview-template--instagram.social-preview-format--reel .ai-text-social-preview__mock-actions span {
    display: grid;
    justify-items: center;
    gap: 4px;
    min-width: 44px;
    color: #ffffff;
    font-size: 0;
    font-weight: 850;
    text-shadow: 0 1px 8px rgba(0, 0, 0, 0.35);
}

.social-preview-template--instagram.social-preview-format--reel .ai-text-social-preview__mock-actions .bi {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: var(--app-radius-pill);
    background: rgba(255, 255, 255, 0.92);
    color: #111827;
    font-size: 1.25rem;
    text-shadow: none;
}

.social-preview-template--facebook .ai-text-social-preview__mock-actions {
    display: flex;
    justify-content: space-around;
    gap: 12px;
    padding: 12px 16px;
    border-top: 1px solid var(--app-border);
    color: var(--app-muted);
    font-size: 0.85rem;
    font-weight: 800;
}

.social-preview-template--facebook.social-preview-format--reel .ai-text-social-preview__mock-actions,
.social-preview-template--facebook.social-preview-format--story .ai-text-social-preview__mock-actions {
    position: absolute;
    right: 14px;
    bottom: 58px;
    z-index: 3;
    display: grid;
    gap: 14px;
    padding: 0;
    border-top: 0;
    color: #ffffff;
    font-size: 0;
}

.social-preview-template--facebook.social-preview-format--story .ai-text-social-preview__mock-actions {
    display: none;
}

.social-preview-template--facebook.social-preview-format--reel .ai-text-social-preview__mock-actions span,
.social-preview-template--facebook.social-preview-format--story .ai-text-social-preview__mock-actions span {
    display: grid;
    justify-items: center;
    gap: 4px;
    min-width: 44px;
    color: #ffffff;
    font-size: 0;
    font-weight: 850;
    text-shadow: 0 1px 8px rgba(0, 0, 0, 0.35);
}

.social-preview-template--facebook.social-preview-format--reel .ai-text-social-preview__mock-actions .bi,
.social-preview-template--facebook.social-preview-format--story .ai-text-social-preview__mock-actions .bi {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: var(--app-radius-pill);
    background: rgba(255, 255, 255, 0.92);
    color: #111827;
    font-size: 1.25rem;
    text-shadow: none;
}

.social-preview-template--x .ai-text-social-preview__mock-actions {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    margin: 0 14px;
    padding: 10px 0 12px;
    border-top: 0;
    color: var(--app-muted);
    font-size: 1rem;
}

.social-preview-template--youtube .ai-text-social-preview__mock-actions {
    display: none;
}

.social-preview-template--linkedin .ai-text-social-preview__mock-actions {
    display: flex;
    justify-content: space-around;
    gap: 12px;
    padding: 11px 16px 13px;
    border-top: 0;
    color: var(--app-muted);
    font-size: 0.86rem;
    font-weight: 800;
}

.social-preview-template--pinterest .ai-text-social-preview__mock-actions {
    display: flex;
    order: 1;
    align-items: center;
    gap: 22px;
    padding: 16px 18px 12px;
    color: var(--app-heading);
    font-size: 1.35rem;
}

.social-preview-template--tiktok .ai-text-social-preview__mock-actions {
    position: absolute;
    right: 14px;
    bottom: 58px;
    z-index: 3;
    display: grid;
    gap: 14px;
    padding: 0;
    color: #ffffff;
    font-size: 1.18rem;
}

.social-preview-template--tiktok .ai-text-social-preview__mock-actions span {
    display: grid;
    justify-items: center;
    gap: 4px;
    min-width: 44px;
    color: #ffffff;
    font-size: 0.78rem;
    font-weight: 850;
    text-shadow: 0 1px 8px rgba(0, 0, 0, 0.35);
}

.social-preview-template--tiktok .ai-text-social-preview__mock-actions .bi {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: var(--app-radius-pill);
    background: rgba(255, 255, 255, 0.92);
    color: #111827;
    font-size: 1.25rem;
    text-shadow: none;
}

.social-preview-template--tiktok .ai-text-social-preview__mock-actions span:first-child .bi,
.social-preview-template--tiktok .ai-text-social-preview__mock-actions span:last-child .bi {
    background: #4b5563;
    color: #ffffff;
}

.social-preview-template--pinterest .ai-text-social-preview__mock-actions span {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

.social-preview-template--pinterest .ai-text-social-preview__mock-actions span:last-child {
    margin-left: auto;
    padding: 10px 18px;
    border-radius: var(--app-radius-pill);
    background: var(--preview-brand);
    color: #ffffff;
    font-size: 0.95rem;
    font-weight: 850;
}

.social-preview-template--linkedin .ai-text-social-preview__mock-actions span {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    min-width: 0;
}

.social-preview-template--linkedin .ai-text-social-preview__mock-actions .bi {
    font-size: 1.15rem;
}

.social-preview-template--youtube .ai-text-social-preview__header {
    order: 2;
    align-items: flex-start;
    gap: 10px;
    padding: 12px 16px 0;
}

.social-preview-template--youtube.social-preview-format--community-post .ai-text-social-preview__header {
    order: 1;
    padding: 14px 16px 0;
}

.social-preview-template--youtube.social-preview-format--short .ai-text-social-preview__header {
    position: absolute;
    top: 18px;
    right: 18px;
    left: 18px;
    z-index: 3;
    padding: 0;
}

.social-preview-template--youtube .ai-text-social-preview__avatar {
    width: 38px;
    height: 38px;
    border: 0;
    background: var(--preview-brand-soft);
    color: var(--preview-brand);
    font-size: 1rem;
}

.social-preview-template--youtube .ai-text-social-preview__identity {
    padding-top: 1px;
    font-size: 0.82rem;
}

.social-preview-template--youtube .ai-text-social-preview__identity strong {
    color: var(--app-muted);
    font-size: 0.82rem;
    font-weight: 750;
}

.social-preview-template--youtube.social-preview-format--short .ai-text-social-preview__avatar {
    width: 38px;
    height: 38px;
    background: rgba(255, 255, 255, 0.92);
    color: var(--preview-brand);
    font-size: 1rem;
}

.social-preview-template--youtube.social-preview-format--short .ai-text-social-preview__identity {
    color: rgba(255, 255, 255, 0.82);
    font-size: 0.78rem;
}

.social-preview-template--youtube.social-preview-format--short .ai-text-social-preview__identity strong {
    color: #ffffff;
    font-size: 1rem;
    font-weight: 850;
}

.social-preview-template--youtube.social-preview-format--short .ai-text-social-preview__body {
    position: absolute;
    right: 18px;
    bottom: 42px;
    left: 18px;
    z-index: 3;
    display: -webkit-box;
    overflow: hidden;
    padding: 0;
    color: #ffffff;
    font-size: 0.96rem;
    line-height: 1.28;
    text-shadow: 0 1px 10px rgba(0, 0, 0, 0.45);
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    white-space: normal;
}

.social-preview-template--linkedin .ai-text-social-preview__header {
    align-items: flex-start;
    padding: 16px 18px 4px;
}

.social-preview-template--linkedin .ai-text-social-preview__avatar {
    width: 48px;
    height: 48px;
    border: 0;
    background: var(--preview-brand-soft);
    color: var(--preview-brand);
    font-size: 1.25rem;
}

.social-preview-template--linkedin .ai-text-social-preview__identity {
    padding-top: 2px;
    font-size: 0.82rem;
}

.social-preview-template--linkedin .ai-text-social-preview__identity strong {
    font-size: 1rem;
    font-weight: 850;
}

.social-preview-template--pinterest .ai-text-social-preview__header {
    order: 4;
    padding: 8px 18px 0;
}

.social-preview-template--tiktok .ai-text-social-preview__header {
    position: absolute;
    right: 76px;
    bottom: 178px;
    left: 18px;
    z-index: 3;
    padding: 0;
}

.social-preview-template--tiktok .ai-text-social-preview__avatar {
    display: none;
}

.social-preview-template--tiktok .ai-text-social-preview__identity {
    color: rgba(255, 255, 255, 0.82);
    font-size: 0.78rem;
}

.social-preview-template--tiktok .ai-text-social-preview__identity strong {
    color: #ffffff;
    font-size: 1rem;
    font-weight: 850;
}

.social-preview-template--pinterest .ai-text-social-preview__avatar {
    width: 30px;
    height: 30px;
    border: 0;
    background: var(--preview-brand-soft);
    color: var(--preview-brand);
    font-size: 0.9rem;
}

.social-preview-template--pinterest .ai-text-social-preview__identity strong {
    font-size: 0.9rem;
}

.social-preview-template--facebook:not(.social-preview-format--reel) .ai-text-social-preview__mock-actions span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    min-width: 0;
}

.ai-text-draft-card__strategy-line {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

.ai-text-draft-card__strategy-goal {
    flex: 0 0 auto;
}

.ai-text-draft-card__strategy-info {
    margin-inline-start: auto;
}

.ai-text-draft-card__reference-button--missing {
    opacity: 0.55;
    cursor: not-allowed;
    pointer-events: none;
}

.ai-text-draft-card__metadata-popover {
    display: grid;
    grid-template-columns: max-content 1fr;
    gap: 4px 12px;
    margin: 0;
    font-size: 0.85rem;
}

.ai-text-draft-card__metadata-popover dt {
    color: var(--app-heading);
    font-weight: 600;
}

.ai-text-draft-card__metadata-popover dd {
    margin: 0;
    color: var(--app-muted);
}

.modal-social-icon {
    /* line-height: 1 + display: inline-flex centra il glifo dell'icona Bootstrap
       sulla cross-axis del flex parent (h2.modal-title.d-flex). Senza, l'altezza
       intrinseca del glifo era maggiore del testo a fs-5 e align-items:center
       allineava box di altezze diverse. */
    display: inline-flex;
    align-items: center;
    line-height: 1;
    font-size: 1.2em;
    color: var(--tint-color);
}

html[data-theme="dark"] .modal-social-icon {
    color: var(--tint-color-dark, var(--tint-color));
}

.modal-social-label {
    font-size: 0.85em;
    font-weight: 500;
}

.modal-context-box {
    background: var(--app-surface-muted);
    border: 1px solid var(--app-border);
    border-radius: var(--app-radius);
    padding: 14px 16px;
}

.text-prewrap {
    white-space: pre-wrap;
}

.ai-text-draft-card__compact-preview {
    display: none;
}

.ai-text-draft-card__compact-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 30px;
    height: 30px;
    padding: 4px;
    border: 0;
    background: transparent;
    color: var(--app-muted);
    cursor: pointer;
    line-height: 1;
}

.ai-text-draft-card__compact-toggle:hover,
.ai-text-draft-card__compact-toggle:focus-visible {
    color: var(--app-heading);
}

.ai-text-draft-card__compact-toggle--collapse {
    display: none;
}

.ai-text-draft-card__compact-thumb {
    width: 56px;
    height: 56px;
    flex: 0 0 auto;
    object-fit: cover;
    border: 1px solid var(--app-border);
    border-radius: var(--app-radius);
}

.ai-text-draft-card__compact-thumb--missing,
.ai-text-draft-card__compact-thumb--no-media {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--app-surface-muted);
    color: var(--app-muted);
    font-size: 1.25rem;
}

.ai-text-draft-card__compact-snippet {
    flex: 1 1 auto;
    min-width: 0;
    overflow: visible;
    color: var(--app-muted);
    font-size: 0.88rem;
    line-height: 1.35;
    text-overflow: clip;
    white-space: normal;
}

.ai-text-draft-card.ai-text-draft-card--compact .planner-day-detail-grid,
.ai-text-draft-card.ai-text-draft-card--compact .ai-text-draft-card__generation-meta,
.ai-text-draft-card.ai-text-draft-card--compact .ai-text-draft-card__caption-header,
.ai-text-draft-card.ai-text-draft-card--compact .ai-text-draft-card__images,
.ai-text-draft-card.ai-text-draft-card--compact .ai-text-draft-card__videos,
.ai-text-draft-card.ai-text-draft-card--compact .ai-text-draft-card__actions-bar,
.ai-text-draft-card.ai-text-draft-card--compact .planner-day-detail-strategy-line {
    display: none !important;
}

.ai-text-draft-card.ai-text-draft-card--compact .ai-text-draft-card__compact-preview {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 14px;
    border-top: 1px solid var(--app-border);
}

.ai-text-draft-card.ai-text-draft-card--compact .planner-day-detail-topline {
    gap: 8px;
}

.ai-text-draft-card.ai-text-draft-card--compact {
    max-width: 100%;
    overflow: hidden;
}

.ai-text-draft-card.ai-text-draft-card--compact .planner-day-detail-title {
    font-size: 1rem;
}

.ai-text-draft-card.ai-text-draft-card--compact .planner-day-detail-title > span:last-child {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* CDX-459: badge ridotti nella card compatta (desktop + mobile) per coerenza
   con la modalità compatta del Piano Mensile. La compatta è progettata per
   densità/scrolling rapido — badge grandi tradiscono lo scopo. */
.ai-text-draft-card.ai-text-draft-card--compact .ai-text-draft-card__meta .planner-format-badge,
.ai-text-draft-card.ai-text-draft-card--compact .ai-text-draft-card__meta .planner-status-badge,
.ai-text-draft-card.ai-text-draft-card--compact .ai-text-draft-card__meta .planner-day-item-strategy {
    padding: 4px 7px;
    font-size: 0.76rem;
}

.ai-text-draft-card.ai-text-draft-card--compact .ai-text-draft-card__meta {
    flex: 1 1 100%;
    justify-content: flex-start;
    min-width: 0;
}

.ai-text-draft.ai-text-draft--compact-mode .ai-text-draft-card.ai-text-draft-card--expanded-override .ai-text-draft-card__compact-toggle--collapse {
    display: inline-flex;
}

.ai-text-image-section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 10px;
}

.ai-text-image-section-title {
    flex: 1 1 auto;
    min-width: 0;
}

.ai-text-image-count-inline {
    margin-left: 6px;
    color: var(--app-muted);
    font-weight: 500;
    font-variant-numeric: tabular-nums;
}

.ai-text-image-section-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 8px;
}

.ai-text-image-section-actions .ai-text-image-upload-form,
.ai-text-image-section-actions .ai-text-image-generate-form {
    margin: 0;
}

.ai-text-image-generate-group .ai-text-image-generate-form,
.ai-text-video-generate-group .ai-text-video-generate-form {
    display: contents;
}

.ai-text-image-generate-group .dropdown-menu,
.ai-text-video-generate-group .dropdown-menu {
    border-color: var(--app-ai-border);
}

.ai-text-image-generate-group .dropdown-menu .dropdown-item,
.ai-text-video-generate-group .dropdown-menu .dropdown-item {
    padding-block: 0.5rem;
    color: var(--app-ai-text);
}

.ai-text-image-generate-group .dropdown-menu .dropdown-item:hover,
.ai-text-image-generate-group .dropdown-menu .dropdown-item:focus,
.ai-text-image-generate-group .dropdown-menu .dropdown-item:active,
.ai-text-video-generate-group .dropdown-menu .dropdown-item:hover,
.ai-text-video-generate-group .dropdown-menu .dropdown-item:focus,
.ai-text-video-generate-group .dropdown-menu .dropdown-item:active {
    background: var(--app-ai-bg);
    color: var(--app-ai-text);
}

.ai-text-image-generate-group .dropdown-menu .dropdown-item.disabled,
.ai-text-image-generate-group .dropdown-menu .dropdown-item:disabled,
.ai-text-video-generate-group .dropdown-menu .dropdown-item.disabled,
.ai-text-video-generate-group .dropdown-menu .dropdown-item:disabled {
    color: color-mix(in srgb, var(--app-ai-text) 55%, transparent);
    background: transparent;
}

.ai-text-image-gallery,
.ai-text-video-gallery {
    display: flex;
    gap: 8px;
    max-width: 100%;
    overflow-x: auto;
    padding: 2px 2px 8px;
    scrollbar-width: thin;
}
.ai-text-image-thumb,
.ai-text-video-thumb {
    position: relative;
    flex: 0 0 auto;
    height: 136px;
    overflow: hidden;
    border: 1px solid var(--app-border);
    border-radius: var(--app-radius);
    background: var(--app-surface);
    color: var(--app-heading);
    padding: 0;
}

.ai-text-image-thumb {
    width: 136px;
    box-shadow: none;
    cursor: pointer;
}

.ai-text-image-thumb img {
    transition: transform 250ms ease-out;
}

.ai-text-image-thumb:hover img,
.ai-text-image-thumb:focus-visible img {
    transform: scale(1.05);
}

@media (prefers-reduced-motion: reduce) {
    .ai-text-image-thumb img {
        transition: none;
    }
    .ai-text-image-thumb:hover img,
    .ai-text-image-thumb:focus-visible img {
        transform: none;
    }
}

.ai-text-video-thumb {
    width: 136px;
    cursor: pointer;
}

.ai-text-video-thumb.is-selected {
    border: 3px solid var(--social-strong, var(--app-accent));
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--social-strong, var(--app-accent)) 40%, transparent);
}

.ai-text-video-thumb__img,
.ai-text-video-thumb__placeholder {
    display: block;
    width: 100%;
    height: 100%;
}

.ai-text-video-thumb__img {
    object-fit: cover;
}

.ai-text-video-thumb__placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--app-surface-muted);
    color: var(--app-muted);
    font-size: 2rem;
}

.ai-text-video-thumb__pending {
    display: flex;
    width: 100%;
    height: 100%;
    align-items: center;
    justify-content: center;
    background: color-mix(in srgb, var(--app-ai-bg) 90%, var(--app-surface-muted) 10%);
    color: var(--app-ai-text);
    font-size: 2rem;
    animation: aiTextVideoPendingPulse 1.6s ease-in-out infinite;
}

.ai-text-video-thumb__pending i {
    display: inline-block;
    animation: aiTextVideoPendingSpin 1.4s linear infinite;
}

@keyframes aiTextVideoPendingSpin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

@keyframes aiTextVideoPendingPulse {
    0%, 100% { opacity: 0.65; }
    50% { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
    .ai-text-video-thumb__pending,
    .ai-text-video-thumb__pending i {
        animation: none;
    }
}

.ai-text-video-thumb__play {
    position: absolute;
    top: 50%;
    left: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transform: translate(-50%, -50%);
    color: color-mix(in srgb, #ffffff 88%, transparent);
    font-size: 2.2rem;
    line-height: 1;
    pointer-events: none;
    text-shadow: 0 1px 8px color-mix(in srgb, #000000 72%, transparent);
}

.ai-text-image-upload-form,
.ai-text-image-generate-form {
    display: inline-flex;
    flex: 0 0 auto;
    margin: 0;
}

.ai-text-image-thumb:disabled {
    cursor: default;
}

.ai-text-image-thumb img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.ai-text-image-thumb.is-selected {
    border: 3px solid var(--social-strong, var(--app-accent));
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--social-strong, var(--app-accent)) 40%, transparent);
}

.ai-text-image-thumb--no-image {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 6px;
    border: 1px dashed var(--app-border);
    background: var(--app-surface-muted);
    color: var(--app-muted);
    text-align: center;
}

.ai-text-image-thumb--no-image .ai-text-image-thumb__no-image-icon {
    font-size: 1.6rem;
    line-height: 1;
}

.ai-text-image-thumb--no-image .ai-text-image-thumb__no-image-label {
    font-size: 0.7rem;
    font-weight: 600;
    line-height: 1.1;
}

.ai-text-image-thumb--no-image.is-selected {
    border-color: var(--social-strong, var(--app-ai-border));
    border-style: solid;
    background: var(--social-surface, var(--app-ai-bg));
    color: var(--social-strong, var(--app-ai-text));
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--social-strong, var(--app-ai-text)) 26%, transparent);
}

.ai-text-image-thumb__meta,
.ai-text-video-thumb__badge {
    position: absolute;
    right: 4px;
    bottom: 4px;
    left: 4px;
    overflow: hidden;
    padding: 2px 4px;
    border-radius: var(--app-radius);
    background: rgba(15, 23, 42, 0.72);
    color: #ffffff;
    font-size: 0.58rem;
    font-weight: 700;
    line-height: 1.1;
    text-align: center;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ai-text-image-thumb__meta--ai,
.ai-text-video-thumb__badge--ai {
    background: color-mix(in srgb, var(--app-ai-text) 88%, transparent);
    color: #ffffff;
}

.ai-text-image-thumb__check,
.ai-text-image-thumb__select,
.ai-text-image-thumb__delete {
    position: absolute;
    top: 4px;
    z-index: 3;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: var(--app-radius);
    line-height: 1;
}

.ai-text-image-thumb__check {
    border: 0;
    left: 4px;
    background: var(--social-strong, var(--app-accent));
    color: #ffffff;
    font-size: 1rem;
}

button.ai-text-image-thumb__check {
    cursor: pointer;
}

button.ai-text-image-thumb__check:disabled {
    cursor: wait;
    opacity: 0.82;
}

.ai-text-image-thumb__select {
    left: 4px;
    border: 1px solid rgba(255, 255, 255, 0.78);
    background: rgba(15, 23, 42, 0.72);
    color: #ffffff;
    font-size: 0.95rem;
    opacity: 0;
    transition: opacity 0.16s ease, background 0.16s ease;
}

.ai-text-image-thumb__select:hover,
.ai-text-image-thumb__select:focus-visible {
    background: var(--social-strong, var(--app-accent));
}

.ai-text-image-thumb__select:disabled {
    cursor: wait;
    opacity: 0.8;
}

.ai-text-image-thumb__delete {
    right: 4px;
    border: 1px solid rgba(255, 255, 255, 0.78);
    background: rgba(15, 23, 42, 0.72);
    color: #ffffff;
    font-size: 0.9rem;
    opacity: 0;
    transition: opacity 0.16s ease;
}

.ai-text-image-thumb--skeleton {
    border: 0;
    background: linear-gradient(
        90deg,
        var(--app-surface-muted) 0%,
        color-mix(in srgb, var(--app-surface-muted) 66%, #ffffff 34%) 45%,
        var(--app-surface-muted) 100%
    );
    background-size: 180% 100%;
    animation: app-shimmer 1.1s ease-in-out infinite;
}

.ai-text-image-thumb:hover .ai-text-image-thumb__delete,
.ai-text-image-thumb:focus-visible .ai-text-image-thumb__delete,
.ai-text-image-thumb:hover .ai-text-image-thumb__select,
.ai-text-image-thumb:focus-visible .ai-text-image-thumb__select,
.ai-text-video-thumb:hover .ai-text-image-thumb__select,
.ai-text-video-thumb:focus-visible .ai-text-image-thumb__select,
.ai-text-video-thumb:hover .ai-text-image-thumb__delete,
.ai-text-video-thumb:focus-visible .ai-text-image-thumb__delete {
    opacity: 1;
}

.ai-text-video-thumb .ai-text-image-thumb__select,
.ai-text-video-thumb .ai-text-image-thumb__delete {
    opacity: 1;
}

.ai-text-image-thumb .ai-text-image-thumb__select,
.ai-text-image-thumb .ai-text-image-thumb__delete {
    opacity: 1;
}

.ai-text-image-upload-input {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
}

.ai-text-image-loading {
    display: flex;
    align-items: center;
    min-height: 120px;
    color: var(--app-muted);
    font-size: 0.85rem;
}

.ai-text-image-inline-flash {
    width: fit-content;
    max-width: 100%;
    margin: -4px 0 0;
    padding: 6px 10px;
    font-size: 0.78rem;
    line-height: 1.25;
    transition: opacity 0.22s ease;
}

.ai-text-image-inline-flash .app-alert__icon {
    font-size: 0.9rem;
}

.ai-text-image-inline-flash.is-fading {
    opacity: 0;
}

.app-action-toast-stack {
    position: fixed;
    right: 18px;
    bottom: 80px;
    z-index: 1045;
    display: flex;
    flex-direction: column;
    gap: 10px;
    max-width: min(360px, calc(100vw - 36px));
    pointer-events: none;
}

@media (max-width: 767.98px) {
    .app-action-toast-stack {
        right: 10px;
        bottom: 64px;
    }
}

.app-action-toast {
    padding: 12px 14px;
    border: 1px solid var(--app-border);
    border-radius: var(--app-radius);
    background: var(--app-surface);
    color: var(--app-text);
    box-shadow: var(--app-shadow-soft);
    opacity: 1;
    transform: translateY(0);
    transition: opacity 0.2s ease, transform 0.2s ease;
}

.app-action-toast.is-success {
    border-color: var(--app-success-border);
    background: var(--app-success-bg);
    color: var(--app-success-text);
}

.app-action-toast.is-error {
    border-color: var(--app-error-border);
    background: var(--app-error-bg);
    color: var(--app-error-text);
}

.app-action-toast.is-info {
    border-color: var(--app-info-border);
    background: var(--app-info-bg);
    color: var(--app-info-text);
}

.app-action-toast.is-hiding {
    opacity: 0;
    transform: translateY(8px);
}

.ai-text-image-preview-figure {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0;
    min-height: 220px;
    background: var(--app-surface-muted);
    border: 1px solid var(--app-border);
    border-radius: var(--app-radius);
    padding: 12px;
}

.ai-text-image-variant-reference {
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--app-surface-muted);
    border: 1px solid var(--app-border);
    border-radius: var(--app-radius);
    padding: 12px;
    min-height: 180px;
}

.ai-text-image-variant-reference__img {
    display: block;
    max-width: 100%;
    max-height: 320px;
    object-fit: contain;
    border-radius: calc(var(--app-radius) / 2);
}

.ai-text-media-preview-dialog {
    --bs-modal-width: min(1760px, calc(100vw - 20px));
    max-width: min(1760px, calc(100vw - 20px));
}

.ai-text-image-preview-figure img {
    display: block;
    max-width: 100%;
    max-height: 82vh;
    object-fit: contain;
}

.ai-text-video-preview-frame {
    width: 100%;
    aspect-ratio: 16 / 9;
    background: #000;
}

.ai-text-video-preview-frame iframe,
.ai-text-video-preview-frame video {
    display: block;
    width: 100%;
    height: 100%;
    border: 0;
}

@media (max-width: 575.98px) {
    .ai-text-media-preview-dialog {
        --bs-modal-width: calc(100vw - 16px);
        max-width: calc(100vw - 16px);
        margin-right: auto;
        margin-left: auto;
    }

    .ai-text-image-preview-figure img {
        max-height: 72vh;
    }
}

@keyframes app-shimmer {
    0% {
        background-position: 100% 0;
    }

    100% {
        background-position: -100% 0;
    }
}

.planner-month-analysis {
    display: grid;
    gap: 16px;
}

.planner-month-analysis--compact {
    gap: 12px;
}

.planner-month-analysis--compact .planner-analysis-card {
    padding: 16px;
}

.planner-month-analysis--compact .planner-analysis-accent {
    height: 4px;
    margin: -16px -16px 12px;
}

.planner-month-analysis--compact .planner-analysis-title {
    margin-bottom: 6px;
}
.planner-month-analysis--compact .planner-analysis-copy {
    margin-bottom: 10px;
    gap: 4px;
}

.planner-month-analysis--compact .planner-analysis-copy-primary {
    line-height: 1.3;
}

.planner-month-analysis--compact .planner-analysis-copy-secondary {
    font-size: 0.86rem;
    line-height: 1.35;
}

.planner-month-analysis--compact .planner-analysis-list {
    gap: 8px;
}

.planner-month-analysis--compact .planner-analysis-list-item {
    gap: 4px;
}

.planner-month-analysis--compact .planner-analysis-list-row {
    gap: 10px;
}

.planner-month-analysis--compact .planner-analysis-list-label {
    line-height: 1.25;
}

.planner-month-analysis--compact .planner-analysis-list-value {
    font-size: 0.82rem;
}

.planner-month-analysis--compact .planner-analysis-bar {
    height: 6px;
}

.planner-month-analysis--compact .planner-analysis-consistency {
    gap: 6px;
    padding: 2px 0 0;
}

.planner-month-analysis--compact .planner-analysis-consistency-title {
    font-size: 1rem;
    line-height: 1.25;
}

.planner-month-analysis--compact .planner-analysis-consistency-text {
    font-size: 0.88rem;
    line-height: 1.45;
}
.planner-analysis-grid-2 {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.planner-weekdays,
.planner-week {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
}

.planner-weekdays {
    background: var(--app-surface-muted);
    border-bottom: 1px solid var(--app-border);
}

.planner-weekday {
    padding: 15px 16px;
    font-size: var(--app-text-sm);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--app-muted);
    border-right: 1px solid var(--app-border);
}

.planner-weekday:last-child {
    border-right: 0;
}

.planner-day {
    min-height: 200px;
    padding: 12px;
    border-right: 1px solid var(--app-border);
    border-bottom: 1px solid var(--app-border);
    background: var(--app-surface);
    display: flex;
    flex-direction: column;
    gap: 10px;
    transition: background-color 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
    min-width: 0;
}

.planner-week .planner-day:last-child {
    border-right: 0;
}

.planner-week:last-child .planner-day {
    border-bottom: 0;
}

.planner-day.is-empty {
    background: var(--app-surface);
}

.planner-day:not(.is-empty):hover {
    background: var(--app-surface-muted);
}

.planner-day.is-selected {
    background: var(--app-selected-wash-soft) !important;
    box-shadow: inset var(--tint-strip-width) 0 0 var(--app-selected-strip);
}

.planner-day.is-selected .planner-day-number {
    color: var(--app-heading);
}

.planner-day.is-selected .planner-day-count {
    color: var(--app-text-soft);
}

.planner-day-topline {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 8px;
    min-width: 0;
}

.planner-day-number {
    font-size: 1.35rem;
    font-weight: 700;
    color: var(--app-heading);
    line-height: 1;
}

.planner-day-count {
    font-size: 0.74rem;
    color: var(--app-muted);
    padding-top: 2px;
}

.planner-day-link {
    margin-top: auto;
    font-size: 0.86rem;
    font-weight: 600;
    letter-spacing: 0.025em;
    text-decoration: none;
    color: #1e3a8a;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: transparent;
    border: 0;
    box-shadow: none;
    padding: 0;
}

.planner-day-link:hover,
.planner-day-link:focus {
    text-decoration: none;
    color: var(--app-heading);
    background: transparent;
    box-shadow: none;
}

.planner-calendar-mobile-list {
    display: none;
}

.planner-calendar-mobile-day {
    border: 1px solid var(--app-border);
    border-radius: var(--app-radius);
    background: var(--app-surface);
}

.planner-calendar-mobile-day + .planner-calendar-mobile-day {
    margin-top: 12px;
}

.planner-calendar-mobile-day.is-selected {
    border-color: var(--app-selected-border);
    background: var(--app-selected-wash-soft);
}

.planner-calendar-mobile-day__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 10px 12px;
    border-bottom: 1px solid var(--app-border);
    background: var(--app-surface-muted);
}

.planner-calendar-mobile-day__count {
    flex: 0 0 auto;
    color: var(--app-muted);
    font-size: var(--app-text-xs);
    font-weight: 800;
    text-transform: uppercase;
}

.planner-calendar-mobile-day__items {
    display: grid;
    gap: 0;
}

.planner-calendar-mobile-day__items .planner-day-item {
    border-radius: 0;
    border: 0;
    border-left: var(--tint-strip-width) solid var(--calendar-chip-strong);
    padding: 8px 10px;
    gap: 4px;
}

.planner-calendar-mobile-day__items .planner-day-item + .planner-day-item {
    border-top: 1px solid var(--app-border);
}

.planner-calendar-mobile-day__items .planner-day-item-row--meta {
    flex-wrap: wrap;
    gap: 6px;
}

.planner-calendar-mobile-day__items .planner-day-item-social-label {
    display: inline-flex;
}

.planner-calendar-mobile-day__link {
    width: 100%;
    padding: 10px 12px;
    border-top: 1px solid var(--app-border);
    justify-content: center;
}

.app-inline-link {
    font-size: inherit;
    font-weight: inherit;
    line-height: inherit;
    color: var(--app-primary);
    text-decoration: none;
    background: transparent;
    border: 0;
    box-shadow: none;
}

.app-inline-link:hover,
.app-inline-link:focus {
    color: var(--app-primary-hover);
    text-decoration: none;
}

.planner-day-detail-list {
    display: grid;
    gap: 16px;
}

.planner-day-detail-section,
.planner-calendar-card {
    scroll-margin-top: 20px;
}

.planner-day-detail-section.is-open {
    box-shadow: none;
    border: 1px solid var(--app-border);
    border-radius: var(--app-radius);
}

.planner-day-detail-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 18px;
}

.planner-day-detail-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 8px;
}

.planner-day-detail-legend {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    margin: -8px 0 18px;
}

.planner-day-detail-legend__label {
    color: var(--app-muted);
    font-size: 0.76rem;
    font-weight: 800;
    letter-spacing: 0.05em;
    line-height: 1;
    text-transform: uppercase;
}
.planner-day-detail-topline {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 8px;
}

.planner-day-detail-topline > div:first-child {
    flex: 1 1 0;
    min-width: 0;
}

.planner-day-detail-title {
    display: flex;
    align-items: baseline;
    gap: 10px;
    font-weight: 800;
    font-size: 1.12rem;
    color: currentColor;
    margin-bottom: 4px;
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
    word-break: normal;
    overflow-wrap: anywhere;
    line-height: 1.28;
}
.planner-day-detail-social-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.35rem;
    min-width: 1.35rem;
    line-height: 1;
    font-size: 1.35rem;
    color: currentColor;
}

.planner-day-detail-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.planner-day-detail-strategy-line {
    margin-top: 8px;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
    font-size: 0.9rem;
    line-height: 1.4;
    color: var(--app-text-soft);
}

.planner-day-detail-compact-line {
    display: none;
    margin-top: 6px;
    flex-wrap: wrap;
    gap: 6px;
    align-items: center;
    color: var(--app-muted);
    font-size: 0.82rem;
    line-height: 1.35;
}

.planner-day-detail-compact-line strong {
    color: var(--app-heading);
    font-weight: 800;
}

.planner-day-detail-strategy-line strong {
    color: var(--app-heading);
    font-weight: 800;
}

.planner-day-detail-strategy-separator {
    color: var(--app-muted);
}

.planner-day-detail-strategy-line a {
    color: var(--social-strong, var(--app-heading));
    overflow-wrap: anywhere;
}

.planner-day-detail-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.planner-debug-summary {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    margin-bottom: 16px;
}

.planner-debug-summary-card {
    border: 1px solid #e5e7eb;
    border-radius: var(--app-radius);
    padding: 14px;
}

.ai-text-draft-list {
    display: grid;
    gap: 12px;
}

/* CDX-630 follow-up: in dark mode i Bootstrap utility .text-success/warning/danger
   usano i token brand (#198754, ecc) con basso contrasto su sfondo scuro.
   Override globale: usa i token --app-X-text che sono ridefiniti nel blocco
   dark con shade più chiare ad alta leggibilità. Vale per ogni uso del prodotto.
   Selettori extra per battere la specificità di "html[data-theme=dark]
   .table-guided tbody td" (0,2,3) che forza color:var(--app-text) sui td. */
html[data-theme="dark"] .text-success,
html[data-theme="dark"] .table tbody td.text-success,
html[data-theme="dark"] .table-guided tbody td.text-success,
html[data-theme="dark"] .review-table tbody td.text-success {
    color: var(--app-success-text) !important;
}
html[data-theme="dark"] .text-warning,
html[data-theme="dark"] .table tbody td.text-warning,
html[data-theme="dark"] .table-guided tbody td.text-warning,
html[data-theme="dark"] .review-table tbody td.text-warning {
    color: var(--app-warning-text) !important;
}
html[data-theme="dark"] .text-danger,
html[data-theme="dark"] .table tbody td.text-danger,
html[data-theme="dark"] .table-guided tbody td.text-danger,
html[data-theme="dark"] .review-table tbody td.text-danger {
    color: var(--app-error-text) !important;
}

/* CDX-627: progress bar componente globale del design system. Riusabile per
   qualsiasi flusso async batch (classify AI, scan, upload, import, generate).
   Token-driven (height, radius, surface, colore fill) con varianti semantiche
   --ai/--info/--success/--warning. Sostituisce l'uso diretto di Bootstrap
   .progress/.progress-bar che non aveva semantica progetto. Variante --ai
   per loop classify; --info default per progress neutri; --success per fasi
   completate; --warning per progressi con retry/degrade. */
.app-progress {
    height: var(--app-progress-height, 10px);
    border-radius: var(--app-progress-radius, var(--app-radius));
    background: var(--app-surface-muted);
    border: 1px solid var(--app-border);
    overflow: hidden;
    position: relative;
}

.app-progress__bar {
    height: 100%;
    background: var(--app-progress-bar-color, var(--app-primary));
    transition: width 220ms ease;
    border-radius: inherit;
}

/* Striscia animata "in corso" per .app-progress (operazioni NON-AI: il colore
   resta quello del modifier, es. --info blu). Overlay translucido sopra il
   bar-color, tecnica stripe canonica (come Bootstrap). Per le operazioni AI usare
   invece .ai-progress-card (viola) — semantica colore: viola = AI. */
.app-progress__bar--animated {
    background-image: linear-gradient(
        45deg,
        rgba(255, 255, 255, 0.22) 25%,
        transparent 25%,
        transparent 50%,
        rgba(255, 255, 255, 0.22) 50%,
        rgba(255, 255, 255, 0.22) 75%,
        transparent 75%,
        transparent
    );
    background-size: 1rem 1rem;
    animation: app-progress-stripes 1s linear infinite;
}

@keyframes app-progress-stripes {
    from { background-position: 1rem 0; }
    to { background-position: 0 0; }
}

.app-progress--ai {
    --app-progress-bar-color: var(--app-ai-fill);
}

.app-progress--info {
    --app-progress-bar-color: var(--app-info-fill, var(--app-primary-fill));
}

.app-progress--success {
    --app-progress-bar-color: var(--app-success-fill);
}

.app-progress--warning {
    --app-progress-bar-color: var(--app-warning-fill);
}

.app-progress--lg {
    --app-progress-height: 14px;
}

.ai-progress-card {
    margin-bottom: 1.5rem;
}

.ai-progress-card__header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
}

.ai-progress-card__counts {
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--app-heading);
    white-space: nowrap;
}

.ai-progress-card__bar {
    height: 1rem;
    margin-top: 1rem;
    border: 1px solid var(--app-border);
    border-radius: var(--app-radius);
    background: var(--app-surface-muted);
}

.ai-progress-card__bar-fill {
    height: 100%;
    border-radius: var(--app-radius);
    background-color: var(--app-ai-fill);
    box-shadow: inset 0 -1px 0 rgba(15, 23, 42, 0.12);
    transition: width 180ms ease;
}

@media (max-width: 767.98px) {
    .ai-progress-card__header {
        flex-direction: column;
    }
}

.planner-debug-summary-title {
    font-size: 0.74rem;
    color: var(--app-muted);
    margin-bottom: 6px;
    font-weight: 500;
}

.planner-debug-summary-value {
    color: var(--app-heading);
    font-weight: 400;
    font-size: 0.82rem;
    line-height: 1.5;
}

@media (max-width: 991.98px) {
    .post-calendar-cell {
        min-height: 80px;
    }

    .post-calendar-pill__thumb {
        display: none;
    }

    .post-calendar-pill__thumb-wrap {
        display: none;
    }

    .config-page-grid {
        grid-template-columns: 1fr;
        max-width: none;
    }.page-section-grid {
        grid-template-columns: 1fr;
    }

    .planner-meta {
        grid-template-columns: 1fr;
    }.planner-day-detail-grid,
.planner-debug-summary,
.planner-analysis-grid-2 {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 767.98px) {
    .project-switcher-list {
        grid-template-columns: 1fr;
    }

    .page-header,
    .project-switcher-item {
        flex-direction: column;
        align-items: flex-start;
    }

    .project-switcher-item form,
    .project-switcher-item button,
    .page-header a {
        width: 100%;
        align-self: stretch;
    }

    .planner-toolbar,
    .planner-calendar-heading {
        flex-direction: column;
        align-items: flex-start;
    }

    .planner-controls-form {
        flex-direction: column;
        align-items: stretch;
        width: 100%;
    }

    .planner-controls-field {
        width: 100%;
        min-width: 0;
    }

    .planner-month-input {
        width: 100%;
    }

    .planner-day-detail-header,
    .planner-day-detail-topline {
        flex-direction: column;
        align-items: flex-start;
    }

    .planner-day-detail-topline > div:first-child {
        width: 100%;
    }

    .planner-day-detail-meta {
        width: 100%;
        justify-content: flex-start;
    }

    .planner-day-detail-title {
        font-size: 1.18rem;
    }

    .planner-day-detail-strategy-line {
        font-size: 0.84rem;
    }

    .planner-calendar-shell {
        overflow-x: auto;
    }

    .planner-weekdays,
    .planner-week {
        min-width: 920px;
    }

    .debug-signal-row {
        grid-template-columns: 1fr;
        gap: 4px;
    }

    .debug-score-topline {
        flex-direction: column;
        align-items: flex-start;
    }
}

@media (max-width: 575.98px) {
    .planner-calendar-shell {
        display: none;
    }

    .planner-calendar-mobile-list {
        display: block;
    }

    .post-calendar-shell {
        display: none;
    }

    .post-calendar-mobile-list {
        display: block;
    }

    .page-shell {
        padding: 14px 10px 28px;
    }
    .page-actions {
        flex-direction: column;
    }

    .btn-ui {
        width: 100%;
    }

    .page-actions__separator {
        display: none;
    }

    .table-section-actions {
        align-items: stretch;
    }
}

@media (min-width: 768px) {
    .page-card > .card-body,
    .card-soft > .card-body {
        padding: 32px !important;
    }
}.page-card h1,
.page-card h2,
.page-card h3,
.page-card h4,
.page-card h5,
.card-soft h1,
.card-soft h2,
.card-soft h3,
.card-soft h4,
.card-soft h5,
.section-title,
.planner-calendar-title,
.title,
.page-header h1 {
    font-family: "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    font-weight: 700;
    letter-spacing: -0.03em;
    color: var(--app-heading);
}

.section-title,
.page-section-header > h2 {
    font-size: var(--app-text-xl);
    line-height: 1.2;
}

.section-title {
    margin: 0 0 16px;
}

.page-section-header > h2 {
    margin-bottom: 0;
}

.card-soft .section-title,
.section-box .section-title {
    font-size: var(--app-text-lg);
    line-height: 1.25;
}
.app-header-context {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    margin-top: 0;
    font-size: 1rem;
    color: var(--app-heading);
}

.app-header-context > span,
.app-project-badge,
.app-user-badge {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    min-height: 40px;
    padding: 9px 14px;
    background: var(--app-surface);
    border: 1px solid var(--app-border);
    border-left: var(--tint-strip-width) solid var(--app-primary);
    border-radius: var(--app-radius-sm);
    color: var(--app-heading);
    font-weight: 700;
    font-size: 0.88rem;
    line-height: 1.1;
    white-space: nowrap;
    max-width: 100%;
    box-shadow: none;
    text-decoration: none;
}

.app-header-context__icon,
.app-user-badge__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.2rem;
    min-width: 1.2rem;
    height: 1.2rem;
    font-size: 1.1rem;
    line-height: 1;
    flex: 0 0 auto;
    color: currentColor;
}

.app-header-context > .has-project-accent,
.app-project-badge.has-project-accent {
    border-left-color: var(--project-accent-light);
}

.app-header-context > .has-project-accent .app-header-context__icon,
.app-header-context > .has-project-accent .app-header-context__label,
.app-project-badge.has-project-accent .app-header-context__icon,
.app-project-badge.has-project-accent .app-header-context__label {
    color: var(--project-accent-light);
}

.app-header-context > .has-project-accent .app-header-context__label--account,
.app-project-badge.has-project-accent .app-header-context__label--account {
    color: var(--app-muted);
}

.app-header-context__label {
    overflow: hidden;
    text-overflow: ellipsis;
}

/* CDX-652: subscription tier descriptor (Suite Completa / Solo Inbox AI /
   custom). Ereditato lo stile base da `.app-header-context > span` ma
   reso più discreto rispetto a project/user badge: weight più leggero,
   font-size più piccolo, niente border-left colorato (è meta-info, non
   azione cliccabile). */
.app-subscription-tier {
    font-weight: 500 !important;
    font-size: 0.78rem !important;
    color: var(--app-muted) !important;
    border-left-color: var(--app-border-strong, var(--app-border)) !important;
}

.app-subscription-tier__icon {
    font-size: 0.95rem;
    color: var(--app-muted);
}

.app-subscription-tier__label {
    letter-spacing: 0.02em;
}

/* Variante compatta per uso tabellare (report permessi) */
.app-subscription-tier--compact {
    font-size: 0.72rem !important;
}

/* Variante "suite_full" = brand strong, info color */
.app-subscription-tier--suite_full {
    color: var(--app-info-text) !important;
    border-left-color: var(--app-info-border) !important;
}

.app-subscription-tier--suite_full .app-subscription-tier__icon {
    color: var(--app-info-text);
}

/* Variante "inbox_only" = AI viola (Inbox AI è il modulo personale top) */
.app-subscription-tier--inbox_only {
    color: var(--app-ai-text) !important;
    border-left-color: var(--app-ai-border) !important;
}

.app-subscription-tier--inbox_only .app-subscription-tier__icon {
    color: var(--app-ai-text);
}

.app-header-context__label--user-name {
    font-weight: 700;
}

.app-header-context__label--role {
    color: var(--app-muted);
    font-size: 0.76rem;
    font-weight: 600;
}

.app-header-context__stack {
    display: inline-flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
    max-width: 260px;
}

.app-header-context__label {
    display: block;
    min-width: 0;
}

.app-header-context__label--project {
    font-weight: 700;
}

.app-header-context__label--account {
    color: var(--app-muted);
    font-size: 0.76rem;
    font-weight: 600;
}

.app-context-pill-action {
    cursor: pointer;
    transition: border-color 0.18s ease, background-color 0.18s ease, color 0.18s ease, box-shadow 0.18s ease;
}

.app-context-pill-action:hover,
.app-context-pill-action:focus-visible {
    border-color: color-mix(in srgb, var(--app-primary) 38%, var(--app-border) 62%);
    border-left-color: var(--app-primary);
    background: color-mix(in srgb, var(--app-primary) 7%, var(--app-surface) 93%);
    color: var(--app-primary-hover);
    text-decoration: none;
}

.app-project-badge.has-project-accent:hover,
.app-project-badge.has-project-accent:focus-visible {
    border-color: color-mix(in srgb, var(--project-accent-light) 34%, var(--app-border) 66%);
    border-left-color: var(--project-accent-light);
    background: color-mix(in srgb, var(--project-accent-light) 7%, var(--app-surface) 93%);
}

.app-context-pill-action:focus-visible {
    box-shadow: 0 0 0 3px var(--app-focus-ring);
}

.page-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 28px;
}

.page-header > :first-child {
    min-width: 0;
    max-width: min(760px, 100%);
}

.page-title-with-icon {
    display: inline-flex;
    align-items: center;
    gap: 12px;
}

.page-title-with-icon__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1em;
    min-width: 1em;
    height: 1em;
    font-size: 1em;
    font-weight: inherit;
    line-height: 1;
    color: currentColor;
    flex: 0 0 auto;
    transform: translateY(0.02em);
}.page-header-actions {
    display: flex;
    gap: var(--app-header-actions-gap);
    flex-wrap: wrap;
    justify-content: flex-end;
    align-items: center;
    margin-left: auto;
}

.page-header-actions {
    padding-top: 6px;
    align-self: flex-start;
}

/* CDX-639 follow-up: header collapsible per card filtri. Pattern button
   trasparente con titolo + icona + chevron rotante (Bootstrap collapse). */
.filters-card-toggle {
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: space-between;
    gap: var(--app-space-12);
    padding: 0;
    background: transparent;
    border: none;
    color: var(--app-text);
    cursor: pointer;
}

.filters-card-toggle:focus-visible {
    outline: 2px solid var(--app-info-text);
    outline-offset: 2px;
    border-radius: var(--app-radius);
}

.filters-card-toggle__title {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    font-size: 1.42rem;
    font-weight: 800;
    color: var(--app-heading);
}

.filters-card-toggle__title i {
    color: currentColor;
    font-size: 1em;
    line-height: 1;
}

.filters-card-toggle__chevron {
    color: var(--app-muted);
    font-size: 16px;
    transition: transform 0.2s ease;
}

.filters-card-toggle[aria-expanded="true"] .filters-card-toggle__chevron {
    transform: rotate(180deg);
}

/* CDX-633 follow-up: cluster generico per gruppi di bottoni in celle tabella
   (azioni per riga). Wrappa N form/button inline con gap consistente e wrap
   responsivo. Riusabile in qualunque tabella; senza justify-end. */
.app-row-actions {
    display: inline-flex;
    gap: 6px;
    flex-wrap: wrap;
    align-items: center;
}

/* CDX-637: digest "ultimi 7 giorni" per Inbox AI. Compact strip con header
   + chip orizzontali. Riusa palette info/danger. */
.inbox-ai-digest {
    padding: 12px 14px;
    margin-bottom: var(--app-space-16);
    border: 1px solid var(--app-border);
    border-radius: var(--app-radius);
    background: var(--app-surface-muted);
}

.inbox-ai-digest__header {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 8px;
    color: var(--app-text);
    font-size: 14px;
}

.inbox-ai-digest__header i {
    font-size: 16px;
    color: var(--app-info-text);
}

.inbox-ai-digest__period {
    display: inline-flex;
    gap: 0;
    margin-left: auto;
    border: 1px solid var(--app-border);
    border-radius: var(--app-radius-pill);
    overflow: hidden;
    background: var(--app-surface);
}

.inbox-ai-digest__period-link {
    padding: 3px 12px;
    font-size: 12px;
    color: var(--app-muted);
    text-decoration: none;
    border-right: 1px solid var(--app-border);
    transition: background-color 0.15s ease, color 0.15s ease;
}

.inbox-ai-digest__period-link:last-child {
    border-right: none;
}

.inbox-ai-digest__period-link:hover {
    background: var(--app-surface-muted);
    color: var(--app-text);
}

.inbox-ai-digest__period-link.is-active {
    background: var(--app-info-text);
    color: var(--app-info-bg);
    font-weight: 600;
}

.inbox-ai-digest__chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.inbox-ai-digest__chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    border: 1px solid var(--app-border);
    border-radius: var(--app-radius-pill);
    background: var(--app-surface);
    color: var(--app-text);
    font-size: 12px;
    line-height: 1.4;
}

.inbox-ai-digest__chip i {
    font-size: 13px;
    color: var(--app-muted);
}

.inbox-ai-digest__chip-value {
    font-weight: 700;
    color: var(--app-text);
}

.inbox-ai-digest__chip-label {
    color: var(--app-muted);
}

.inbox-ai-digest__chip--danger {
    border-color: var(--app-error-border);
    background: var(--app-error-bg);
    color: var(--app-error-text);
}

.inbox-ai-digest__chip--danger i,
.inbox-ai-digest__chip--danger .inbox-ai-digest__chip-value,
.inbox-ai-digest__chip--danger .inbox-ai-digest__chip-label {
    color: var(--app-error-text);
}

.inbox-ai-digest__chip--ai {
    border-color: var(--app-ai-border);
    background: var(--app-ai-bg);
    color: var(--app-ai-text);
}

.inbox-ai-digest__chip--ai i,
.inbox-ai-digest__chip--ai .inbox-ai-digest__chip-value,
.inbox-ai-digest__chip--ai .inbox-ai-digest__chip-label {
    color: var(--app-ai-text);
}

.inbox-ai-digest__chip--info {
    border-color: var(--app-info-border);
    background: var(--app-info-bg);
    color: var(--app-info-text);
}

.inbox-ai-digest__chip--info i,
.inbox-ai-digest__chip--info .inbox-ai-digest__chip-value,
.inbox-ai-digest__chip--info .inbox-ai-digest__chip-label {
    color: var(--app-info-text);
}

.inbox-ai-digest__chip--warning {
    border-color: var(--app-warning-border);
    background: var(--app-warning-bg);
    color: var(--app-warning-text);
}

.inbox-ai-digest__chip--warning i,
.inbox-ai-digest__chip--warning .inbox-ai-digest__chip-value,
.inbox-ai-digest__chip--warning .inbox-ai-digest__chip-label {
    color: var(--app-warning-text);
}

/* CDX-637 follow-up: variant link per chip drill-down (cliccabili).
   Cursor pointer + hover accent. <a> mantiene il pattern visivo del chip. */
a.inbox-ai-digest__chip--link {
    text-decoration: none;
    cursor: pointer;
    transition: border-color 0.15s ease, background-color 0.15s ease;
}

/* Hover base (neutro): chip senza variant → accent info */
a.inbox-ai-digest__chip--link:hover,
a.inbox-ai-digest__chip--link:focus-visible {
    border-color: var(--app-info-border);
    background: var(--app-info-bg);
}

a.inbox-ai-digest__chip--link:hover .inbox-ai-digest__chip-value,
a.inbox-ai-digest__chip--link:focus-visible .inbox-ai-digest__chip-value,
a.inbox-ai-digest__chip--link:hover .inbox-ai-digest__chip-label,
a.inbox-ai-digest__chip--link:focus-visible .inbox-ai-digest__chip-label {
    color: var(--app-info-text);
}

/* Hover per variant: ogni colore semantico mantiene il suo spazio cromatico,
   il border diventa più carico (-text invece di -border). */
a.inbox-ai-digest__chip--link.inbox-ai-digest__chip--danger:hover,
a.inbox-ai-digest__chip--link.inbox-ai-digest__chip--danger:focus-visible {
    border-color: var(--app-error-text);
    background: var(--app-error-bg);
}

a.inbox-ai-digest__chip--link.inbox-ai-digest__chip--ai:hover,
a.inbox-ai-digest__chip--link.inbox-ai-digest__chip--ai:focus-visible {
    border-color: var(--app-ai-text);
    background: var(--app-ai-bg);
}

a.inbox-ai-digest__chip--link.inbox-ai-digest__chip--info:hover,
a.inbox-ai-digest__chip--link.inbox-ai-digest__chip--info:focus-visible {
    border-color: var(--app-info-text);
    background: var(--app-info-bg);
}

a.inbox-ai-digest__chip--link.inbox-ai-digest__chip--warning:hover,
a.inbox-ai-digest__chip--link.inbox-ai-digest__chip--warning:focus-visible {
    border-color: var(--app-warning-text);
    background: var(--app-warning-bg);
}

@media (max-width: 991.98px) {
    .config-active-provider-panel__meta {
        justify-content: flex-start;
        min-height: 0;
    }
}

.inbox-ai-account-swatch {
    display: inline-block;
    width: 0.72rem;
    height: 0.72rem;
    flex: 0 0 auto;
    border-radius: 999px;
}

.inbox-ai-account-swatch.has-color {
    background: var(--inbox-ai-row-accent-light);
    border: 1px solid color-mix(in srgb, var(--inbox-ai-row-accent-light) 62%, var(--app-border) 38%);
}

.inbox-ai-account-swatch.is-none {
    background: transparent;
    border: 1px solid var(--app-border);
}

/* Uso box-shadow inset invece di border-left perché in dark mode esiste
   `html[data-theme="dark"] .table-guided tbody td { border-color: ... !important }`
   che riscrive il colore del border. Box-shadow non collide con border-color
   e segue lo stesso pattern dell'highlight hover su td:first-child esistente. */
.inbox-ai-message-row.has-account-color > td:first-child,
.inbox-ai-message-row.has-account-color:hover > td:first-child {
    box-shadow: inset 4px 0 0 var(--inbox-ai-row-accent-light);
}

html[data-theme="dark"] .inbox-ai-account-swatch.has-color {
    background: var(--inbox-ai-row-accent-dark);
    border-color: color-mix(in srgb, var(--inbox-ai-row-accent-dark) 62%, var(--app-border) 38%);
}

html[data-theme="dark"] .inbox-ai-message-row.has-account-color > td:first-child,
html[data-theme="dark"] .inbox-ai-message-row.has-account-color:hover > td:first-child {
    box-shadow: inset 4px 0 0 var(--inbox-ai-row-accent-dark);
}
.small-note {
    font-size: 0.88rem;
}

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

.section-copy-button {
    white-space: nowrap;
}

.page-card,
.card-soft,
.section-box {
    background: var(--app-surface) !important;
    border: 1px solid var(--app-border) !important;
    border-radius: var(--bs-card-border-radius) !important;
    box-shadow: none !important;
}

.page-card,
.card-soft,
.section-box {
    margin-bottom: 30px;
}

.page-card > .card-body,
.card-soft > .card-body {
    padding: 28px !important;
}

.page-hero-card {
    border-color: var(--app-border) !important;
    background: var(--app-gradient-surface-raised) !important;
    box-shadow: none !important;
}

.page-hero-card::before {
    opacity: 1 !important;
}

.page-hero-card .page-header {
    gap: 30px;
    align-items: flex-start;
}

.page-hero-card .app-header-context {
    margin-top: 0;
    margin-bottom: 18px !important;
}.project-item {
    background: var(--app-gradient-surface) !important;
    border: 1px solid var(--app-border) !important;
    box-shadow: none !important;
}

.section-box {
    background: var(--app-gradient-surface) !important;
}

.section-box--feature {
    position: relative;
    overflow: hidden;
    padding-left: 24px !important;
}

.section-box--feature h3 {
    font-size: var(--app-text-xl);
    line-height: 1.2;
    font-weight: 700;
    margin-bottom: 12px;
}

.section-box--feature::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 5px;
    height: 100%;
    background: var(--app-accent);
}

.ai-texts-page .section-box--feature::before {
    content: none;
}

.ai-texts-page .section-box--feature {
    padding-left: 18px !important;
}

.section-box.page-nav-card {
    border-color: var(--app-border) !important;
    background: var(--app-surface) !important;
    box-shadow: inset 3px 0 0 var(--app-accent) !important;
}

.section-box.page-nav-card:hover,
.section-box.page-nav-card:focus-visible {
    border-color: color-mix(in srgb, var(--app-accent) 58%, var(--app-border) 42%) !important;
    background: color-mix(in srgb, var(--app-primary) 7%, var(--app-surface) 93%) !important;
    box-shadow:
        inset var(--tint-strip-width) 0 0 var(--app-accent),
        0 1px 2px rgba(15, 23, 42, 0.06) !important;
}

.section-box.page-nav-card:focus-visible {
    box-shadow:
        0 0 0 3px var(--app-focus-ring),
        inset var(--tint-strip-width) 0 0 var(--app-accent),
        0 1px 2px rgba(15, 23, 42, 0.06) !important;
}.page-card--primary {
    background: var(--app-gradient-surface) !important;
    border-color: var(--app-border) !important;
    box-shadow: none !important;
}.page-card--secondary {
    background: var(--app-surface) !important;
    border-color: var(--app-border) !important;
    box-shadow: none !important;
}

.section-level-core {
    border-color: var(--app-border) !important;
    box-shadow: none !important;
}

.section-level-support {
    border-color: var(--app-border) !important;
    box-shadow: none !important;
}

.section-level-accessory {
    border-color: var(--app-border) !important;
    background: var(--app-surface) !important;
    box-shadow: none !important;
}
.section-heading {
    margin: 0 0 8px;
    font-size: 1.42rem;
    line-height: 1.18;
    font-weight: 700;
    color: var(--app-heading);
}

.section-copy {
    margin: 0;
    color: var(--app-text);
    line-height: 1.62;
    max-width: 72ch;
}

.section-copy--small {
    font-size: 0.93rem;
}

.page-summary-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
    margin-bottom: 22px;
}

.page-summary-grid--cols-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.page-summary-grid--cols-4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.page-summary-grid--section-separated {
    margin-top: 14px;
}

@media (max-width: 991.98px) {.page-summary-grid {
        grid-template-columns: 1fr;
    }
}

/* Summary cards and eyebrow labels use the same brand-accent metadata treatment. */
.page-summary-card {
    position: relative;
    overflow: hidden;
    padding: 18px 18px 16px;
    border: 1px solid var(--app-border);
    border-radius: var(--bs-card-border-radius);
    background: var(--app-surface);
}

.page-summary-card--compact {
    padding: 16px 18px 14px;
}

.page-summary-card::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: var(--app-strip-height-sm);
    border-top-left-radius: inherit;
    border-top-right-radius: inherit;
    background: var(--app-gradient-primary);
    opacity: var(--app-strip-opacity-strong);
}

.page-summary-label {
    margin-bottom: 8px;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--app-brand-blue);
}

.page-summary-value {
    color: var(--app-heading);
    font-size: 1.16rem;
    font-weight: 800;
    line-height: 1.2;
    overflow-wrap: anywhere;
}

.page-summary-value--compact {
    font-size: 0.98rem;
    line-height: 1.25;
}

.page-summary-card--compact .page-summary-label {
    margin-bottom: 6px;
}

.page-summary-card--compact .page-summary-value {
    font-size: 1.08rem;
    line-height: 1.15;
}

.page-summary-value--list {
    font-size: 1rem;
    line-height: 1.35;
    overflow-wrap: anywhere;
}

/* Compact scrollbar treatment shared across app pages. */
::-webkit-scrollbar {
    width: 5px;
    height: 5px;
}

::-webkit-scrollbar-track {
    background: transparent;
}

::-webkit-scrollbar-thumb {
    background: rgba(100, 116, 139, 0.32);
}

::-webkit-scrollbar-thumb:hover {
    background: rgba(100, 116, 139, 0.54);
}

.page-summary-copy {
    margin-top: 8px;
    color: var(--app-muted);
    font-size: 0.92rem;
    line-height: 1.5;
}
.page-section-header {
    margin-bottom: 18px;
}

.page-section-header > p {
    margin: var(--app-space-6) 0 0;
}

.page-section-header .section-copy,
.page-section-header .small-note {
    max-width: 60ch;
}

.table,
.table-guided,
.review-table {
    --bs-table-bg: transparent;
    --bs-table-striped-bg: var(--app-surface-muted);
    --bs-table-hover-bg: var(--app-surface-muted);
    --bs-table-border-color: var(--bs-border-color);
    --app-table-header-bg: color-mix(in srgb, var(--app-primary) 7%, var(--app-surface-muted) 93%);
    --app-table-header-border: color-mix(in srgb, var(--app-primary) 24%, var(--bs-table-border-color) 76%);
    --app-table-header-text: var(--app-heading);
    margin-bottom: 0;
}

.table thead th,
.table-guided thead th,
.review-table thead th {
    background: var(--app-table-header-bg);
    color: var(--app-table-header-text);
    font-size: var(--app-text-sm);
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    border-color: var(--app-table-header-border);
    padding: 13px 16px;
    vertical-align: middle;
}

/* Header ordinabili (click-to-sort, JS in /assets/table-sort.js). Il padding
   dell'header passa al button interno così l'intera cella è cliccabile. */
.table thead th.th-sortable,
.table-guided thead th.th-sortable,
.review-table thead th.th-sortable {
    padding: 0;
}

.table-sort {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    width: 100%;
    padding: 13px 16px;
    background: none;
    border: 0;
    font: inherit;
    color: inherit;
    text-transform: inherit;
    letter-spacing: inherit;
    cursor: pointer;
}

.table-col-compact.th-sortable .table-sort {
    white-space: nowrap;
}

.table-sort__icon {
    font-size: 0.85em;
    opacity: 0.4;
    transition: opacity 0.15s ease, color 0.15s ease;
}

.table-sort:hover .table-sort__icon {
    opacity: 0.7;
}

.th-sortable[aria-sort="ascending"] .table-sort__icon,
.th-sortable[aria-sort="descending"] .table-sort__icon {
    opacity: 1;
    color: var(--app-primary);
}

.table tbody tr,
.table-guided tbody tr {
    transition: background-color 0.18s ease;
}

.table tbody tr:hover td:first-child,
.table-guided tbody tr:hover td:first-child {
    box-shadow: inset 3px 0 0 var(--app-primary);
}

.review-table {
    width: 100%;
    min-width: 1120px;
    margin: 0;
}

.review-table thead th {
    padding: 11px 12px;
}

.review-table tbody td {
    padding: 12px 12px;
    vertical-align: middle;
    background: var(--app-surface);
}

.review-table .col-check {
    text-align: center;
    white-space: nowrap;
}

.table-col-compact {
    width: 1%;
    white-space: nowrap;
}

/* CDX-627: utility per troncare con ellipsis celle tabella con contenuto
   variabile (es. Subject, From in Inbox AI). Due slot opzionali per layout
   a due righe (titolo + sub-linea). Max-width token-driven, override per cella
   via `style="--app-table-col-truncate-max-width: <Xrem>"` (eccezione CSS variables
   dinamiche da PHP). Su mobile (<768px) dentro .app-responsive-table le
   colonne diventano card verticali a full-width: niente max-width, niente
   ellipsis (testo va a capo naturale). */
.table-col-truncate {
    max-width: var(--app-table-col-truncate-max-width, 18rem);
    overflow: hidden;
}

.table-col-truncate__main,
.table-col-truncate__sub {
    display: block;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

@media (max-width: 767.98px) {
    .app-responsive-table .table-col-truncate,
    .admin-responsive-table .table-col-truncate {
        max-width: none !important;
        overflow: visible;
    }
    .app-responsive-table .table-col-truncate__main,
    .app-responsive-table .table-col-truncate__sub,
    .admin-responsive-table .table-col-truncate__main,
    .admin-responsive-table .table-col-truncate__sub {
        white-space: normal;
        overflow: visible;
        text-overflow: clip;
        overflow-wrap: anywhere;
    }
}

.table-drag-col {
    text-align: center;
    white-space: nowrap;
}

/* CDX-488: zebra striping globale su tutte le `.table`. Token-driven via
   --app-table-stripe (light/dark). Esclude le righe selected (CDX-431/432)
   che hanno il loro wash specifico. Hover vince sullo stripe via !important
   nelle regole successive. Il pattern :nth-of-type(odd) è quello canonico
   Bootstrap per `.table-striped` — applicato globalmente senza richiedere
   la classe in HTML. */
.table tbody tr:nth-of-type(odd):not(.table-row-selected) > td,
.table-guided tbody tr:nth-of-type(odd):not(.table-row-selected) > td {
    background-color: var(--app-table-stripe);
}

.table tbody tr:hover,
.table-guided tbody tr:hover {
    background: var(--app-table-hover);
}

.table tbody tr:hover td,
.table-guided tbody tr:hover td {
    background: var(--app-table-hover) !important;
}

.table tbody td,
.table-guided tbody td {
    border-color: var(--bs-table-border-color);
    padding: 13px 16px;
    color: var(--app-text);
    vertical-align: middle;
}
.table-guided .cell-secondary {
    font-size: 0.92rem;
    color: var(--app-muted);
    line-height: 1.42;
}

.table-wrap,
.review-table-wrap,
.table-responsive {
    border: 0;
    border-radius: 0;
    background: transparent;
    overflow-x: auto;
    overflow-y: hidden;
}

.table input.form-control,
.table select.form-select,
.table-guided input.form-control,
.table-guided select.form-select,
.table textarea.form-control,
.table-guided textarea.form-control {
    font-size: 0.92rem;
}

.table input.form-control,
.table select.form-select,
.table-guided input.form-control,
.table-guided select.form-select {
    min-width: 120px;
    min-height: 42px;
    padding: 9px 10px;
}

.table td.text-center input.form-control,
.table td.text-center select.form-select,
.table-guided td.text-center input.form-control,
.table-guided td.text-center select.form-select {
    text-align: center;
}

.table td.text-center select.form-select,
.table-guided td.text-center select.form-select {
    text-align-last: center;
}

.table td.text-end input.form-control,
.table td.text-end select.form-select,
.table-guided td.text-end input.form-control,
.table-guided td.text-end select.form-select {
    text-align: right;
}

.table td.text-end select.form-select,
.table-guided td.text-end select.form-select {
    text-align-last: right;
}

.table textarea.form-control,
.table-guided textarea.form-control {
    width: 100%;
    min-width: 240px;
    height: 102px;
    min-height: 102px;
    padding: 11px 12px;
    line-height: 1.45;
    resize: vertical;
}

.review-table-drag-handle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    min-width: 34px;
    height: 34px;
    border: 1px solid transparent;
    border-radius: var(--app-radius);
    background: transparent;
    color: var(--app-muted);
    cursor: grab;
}

.review-table-drag-handle:hover,
.review-table-drag-handle:focus {
    border-color: var(--app-border);
    background: var(--app-surface-muted);
    color: var(--app-heading);
}

.review-table-drag-handle:active {
    cursor: grabbing;
}

.review-table-drag-handle .bi {
    font-size: 1.08rem;
    line-height: 1;
}

.table tr.is-dragging > td,
.table-guided tr.is-dragging > td,
.review-table tr.is-dragging > td {
    background: var(--app-surface-muted) !important;
}

.review-table-check {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 42px;
}

.review-table-master {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    color: var(--app-heading);
    font-size: 0.72rem;
    font-weight: 700;
    line-height: 1;
}
.muted,
.small-note {
    color: var(--app-muted) !important;
}

/* CDX-560: famiglia primary ora token-based (prima hex hardcoded). Aggiunti focus-visible
   e active per parità accessibility con tutti gli altri bottoni. */
.btn-primary-ui,
.btn-login {
    background: var(--app-primary-fill) !important;
    color: var(--app-primary-fill-text) !important;
    border: 1px solid var(--app-primary-fill) !important;
    box-shadow: none !important;
}

.btn-primary-ui:hover,
.btn-primary-ui:focus-visible,
.btn-primary-ui:active,
.btn-login:hover,
.btn-login:focus-visible,
.btn-login:active {
    background: var(--app-primary-fill-hover) !important;
    border-color: var(--app-primary-fill-hover) !important;
    color: var(--app-primary-fill-text) !important;
    box-shadow: none !important;
}

.btn-secondary-ui {
    background: var(--app-info-bg) !important;
    color: var(--app-info-text) !important;
    border: 1px solid var(--app-info-border) !important;
    box-shadow: 0 1px 2px rgba(29, 78, 216, 0.06) !important;
}

/* CDX-560: hover allineato al pattern subtle standard (10% text bg + 28% text border,
   identico a success-subtle/warning-subtle/danger-subtle/ai-subtle). Sostituisce il
   pattern custom 14% + mix-40/60 di CDX-558 per piena coerenza famiglia subtle. */
.btn-secondary-ui:hover,
.btn-secondary-ui:focus-visible,
.btn-secondary-ui:active {
    background: color-mix(in srgb, var(--app-info-text) 10%, var(--app-info-bg) 90%) !important;
    color: var(--app-info-text) !important;
    border-color: color-mix(in srgb, var(--app-info-text) 28%, var(--app-info-border) 72%) !important;
    box-shadow: 0 2px 4px rgba(29, 78, 216, 0.10) !important;
}

.btn-subtle-ui {
    background: var(--app-surface) !important;
    color: var(--app-text) !important;
    border: 1px solid color-mix(in srgb, var(--app-border-hover) 65%, var(--app-border-strong) 35%) !important;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04) !important;
}

/* CDX-563: aggiunti :focus-visible e :active per parità accessibility con tutte le
   altre famiglie (chiude audit 11/11 coerenza completa). */
.btn-subtle-ui:hover,
.btn-subtle-ui:focus-visible,
.btn-subtle-ui:active {
    background: color-mix(in srgb, var(--app-surface-muted) 97%, var(--app-text) 3%) !important;
    color: var(--app-heading) !important;
    border-color: color-mix(in srgb, var(--app-border-hover) 30%, var(--app-border-strong) 70%) !important;
    box-shadow: 0 2px 4px rgba(15, 23, 42, 0.08) !important;
}
.btn-success-ui {
    background: var(--app-success-fill) !important;
    color: var(--app-success-fill-text) !important;
    border: 1px solid var(--app-success-fill) !important;
    box-shadow: none !important;
}

.btn-success-ui:hover,
.btn-success-ui:focus-visible,
.btn-success-ui:active {
    background: var(--app-success-fill-hover) !important;
    color: var(--app-success-fill-text) !important;
    border-color: var(--app-success-fill-hover) !important;
    box-shadow: none !important;
}

.btn-success-subtle-ui {
    background: var(--app-success-bg) !important;
    color: var(--app-success-text) !important;
    border: 1px solid var(--app-success-border) !important;
    box-shadow: 0 1px 2px rgba(21, 128, 61, 0.06) !important;
}

.btn-success-subtle-ui:hover,
.btn-success-subtle-ui:focus-visible,
.btn-success-subtle-ui:active {
    background: color-mix(in srgb, var(--app-success-text) 10%, var(--app-success-bg) 90%) !important;
    color: var(--app-success-text) !important;
    border-color: color-mix(in srgb, var(--app-success-text) 28%, var(--app-success-border) 72%) !important;
    box-shadow: 0 2px 4px rgba(21, 128, 61, 0.10) !important;
}
.btn-warning-subtle-ui {
    background: var(--app-warning-bg) !important;
    color: var(--app-warning-text) !important;
    border: 1px solid var(--app-warning-border) !important;
    box-shadow: 0 1px 2px rgba(180, 83, 9, 0.06) !important;
}

.btn-warning-subtle-ui:hover,
.btn-warning-subtle-ui:focus-visible,
.btn-warning-subtle-ui:active {
    background: color-mix(in srgb, var(--app-warning-text) 10%, var(--app-warning-bg) 90%) !important;
    color: var(--app-warning-text) !important;
    border-color: color-mix(in srgb, var(--app-warning-text) 28%, var(--app-warning-border) 72%) !important;
    box-shadow: 0 2px 4px rgba(180, 83, 9, 0.10) !important;
}

.btn-ai-ui {
    background: var(--app-ai-fill) !important;
    color: var(--app-ai-fill-text) !important;
    border: 1px solid var(--app-ai-fill) !important;
    box-shadow: none !important;
}

.btn-ai-ui:hover,
.btn-ai-ui:focus-visible,
.btn-ai-ui:active {
    background: var(--app-ai-fill-hover) !important;
    border-color: var(--app-ai-fill-hover) !important;
    color: var(--app-ai-fill-text) !important;
    box-shadow: none !important;
}

.btn-ai-subtle-ui {
    background: var(--app-ai-bg) !important;
    color: var(--app-ai-text) !important;
    border: 1px solid var(--app-ai-border) !important;
    box-shadow: 0 1px 2px rgba(109, 40, 217, 0.06) !important;
}

/* CDX-630 follow-up: .btn-icon-soft-ui — variante icon-only mini per pulsantiere
   inline (tabelle azioni, toolbar tag, controllo riga). Pattern "subtle":
   background pale del colore semantico, border attenuato, corner radius
   morbido (10px). Meno aggressiva di .btn-outline-* di Bootstrap, più mini
   delle subtle-ui (che sono per primary action). Riusabile per qualunque
   contesto di icon-action-list con palette semantica.

   Modifier: --success / --warning / --info / --ai / --danger / --secondary
   (default = neutro). Token-driven, dark variant automatica via :root override. */
.btn-icon-soft-ui {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 6px 9px;
    border-radius: 10px;
    background: var(--app-surface-muted);
    color: var(--app-text);
    border: 1px solid var(--app-border);
    font-size: 0.92rem;
    line-height: 1;
    text-decoration: none;
    transition: background 140ms ease, border-color 140ms ease, color 140ms ease;
}

.btn-icon-soft-ui:hover,
.btn-icon-soft-ui:focus-visible {
    background: color-mix(in srgb, var(--app-text) 6%, var(--app-surface-muted));
    border-color: color-mix(in srgb, var(--app-text) 18%, var(--app-border));
    color: var(--app-text);
}

.btn-icon-soft-ui:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.btn-icon-soft-ui--success {
    background: var(--app-success-bg);
    color: var(--app-success-text);
    border-color: var(--app-success-border);
}
.btn-icon-soft-ui--success:hover,
.btn-icon-soft-ui--success:focus-visible {
    background: color-mix(in srgb, var(--app-success-text) 10%, var(--app-success-bg) 90%);
    border-color: color-mix(in srgb, var(--app-success-text) 28%, var(--app-success-border) 72%);
    color: var(--app-success-text);
}

.btn-icon-soft-ui--warning {
    background: var(--app-warning-bg);
    color: var(--app-warning-text);
    border-color: var(--app-warning-border);
}
.btn-icon-soft-ui--warning:hover,
.btn-icon-soft-ui--warning:focus-visible {
    background: color-mix(in srgb, var(--app-warning-text) 10%, var(--app-warning-bg) 90%);
    border-color: color-mix(in srgb, var(--app-warning-text) 28%, var(--app-warning-border) 72%);
    color: var(--app-warning-text);
}

.btn-icon-soft-ui--info {
    background: var(--app-info-bg);
    color: var(--app-info-text);
    border-color: var(--app-info-border);
}
.btn-icon-soft-ui--info:hover,
.btn-icon-soft-ui--info:focus-visible {
    background: color-mix(in srgb, var(--app-info-text) 10%, var(--app-info-bg) 90%);
    border-color: color-mix(in srgb, var(--app-info-text) 28%, var(--app-info-border) 72%);
    color: var(--app-info-text);
}

.btn-icon-soft-ui--ai {
    background: var(--app-ai-bg);
    color: var(--app-ai-text);
    border-color: var(--app-ai-border);
}
.btn-icon-soft-ui--ai:hover,
.btn-icon-soft-ui--ai:focus-visible {
    background: color-mix(in srgb, var(--app-ai-text) 10%, var(--app-ai-bg) 90%);
    border-color: color-mix(in srgb, var(--app-ai-text) 28%, var(--app-ai-border) 72%);
    color: var(--app-ai-text);
}

.btn-icon-soft-ui--danger {
    background: var(--app-error-bg);
    color: var(--app-error-text);
    border-color: var(--app-error-border);
}
.btn-icon-soft-ui--danger:hover,
.btn-icon-soft-ui--danger:focus-visible {
    background: color-mix(in srgb, var(--app-error-text) 10%, var(--app-error-bg) 90%);
    border-color: color-mix(in srgb, var(--app-error-text) 28%, var(--app-error-border) 72%);
    color: var(--app-error-text);
}

/* Quando le btn-icon-soft-ui sono dentro un .btn-group, lascia i corners arrotondati
   solo agli estremi del gruppo (effetto pillola). */
.btn-group .btn-icon-soft-ui {
    border-radius: 0;
}
.btn-group .btn-icon-soft-ui:first-child {
    border-top-left-radius: 10px;
    border-bottom-left-radius: 10px;
}
.btn-group .btn-icon-soft-ui:last-child {
    border-top-right-radius: 10px;
    border-bottom-right-radius: 10px;
}
.btn-group .btn-icon-soft-ui + .btn-icon-soft-ui {
    border-left-width: 0;
}

/* CDX-627: variante .btn-outline-ai allineata al pattern Bootstrap .btn-outline-*
   (usa --bs-btn-* override) per restare compatibile con .btn / .btn-sm e poter
   essere usata inline come gli altri outline (success/warning/info) senza
   overrides di padding/min-height tipici di .btn-ai-ui / .btn-ai-subtle-ui
   (che sono pensati per primary action buttons, non per icon-only mini). */
.btn-outline-ai {
    --bs-btn-color: var(--app-ai-text);
    --bs-btn-border-color: var(--app-ai-text);
    --bs-btn-hover-color: var(--app-ai-fill-text);
    --bs-btn-hover-bg: var(--app-ai-fill);
    --bs-btn-hover-border-color: var(--app-ai-fill);
    --bs-btn-focus-shadow-rgb: 124, 58, 237;
    --bs-btn-active-color: var(--app-ai-fill-text);
    --bs-btn-active-bg: var(--app-ai-fill-hover);
    --bs-btn-active-border-color: var(--app-ai-fill-hover);
    --bs-btn-disabled-color: var(--app-ai-text);
    --bs-btn-disabled-bg: transparent;
    --bs-btn-disabled-border-color: var(--app-ai-text);
}

.btn-ai-subtle-ui:hover,
.btn-ai-subtle-ui:focus-visible,
.btn-ai-subtle-ui:active {
    background: color-mix(in srgb, var(--app-ai-text) 10%, var(--app-ai-bg) 90%) !important;
    color: var(--app-ai-text) !important;
    border-color: color-mix(in srgb, var(--app-ai-text) 28%, var(--app-ai-border) 72%) !important;
    box-shadow: 0 2px 4px rgba(109, 40, 217, 0.10) !important;
}

.btn-danger-ui {
    background: var(--app-error-fill) !important;
    color: var(--app-error-fill-text) !important;
    border: 1px solid var(--app-error-fill) !important;
    box-shadow: none !important;
}

.btn-danger-ui:hover,
.btn-danger-ui:focus-visible,
.btn-danger-ui:active {
    background: var(--app-error-fill-hover) !important;
    color: var(--app-error-fill-text) !important;
    border-color: var(--app-error-fill-hover) !important;
    box-shadow: none !important;
}

.btn-warning-ui {
    background: var(--app-warning-fill) !important;
    color: var(--app-warning-fill-text) !important;
    border: 1px solid var(--app-warning-fill) !important;
    box-shadow: none !important;
}

.btn-warning-ui:hover,
.btn-warning-ui:focus-visible,
.btn-warning-ui:active {
    background: var(--app-warning-fill-hover) !important;
    color: var(--app-warning-fill-text) !important;
    border-color: var(--app-warning-fill-hover) !important;
    box-shadow: none !important;
}

.btn-danger-subtle-ui {
    background: var(--app-error-bg) !important;
    color: var(--app-error-text) !important;
    border: 1px solid var(--app-error-border) !important;
    box-shadow: 0 1px 2px rgba(220, 38, 38, 0.06) !important;
}

.btn-danger-subtle-ui:hover,
.btn-danger-subtle-ui:focus-visible,
.btn-danger-subtle-ui:active {
    background: color-mix(in srgb, var(--app-error-text) 10%, var(--app-error-bg) 90%) !important;
    color: var(--app-error-text) !important;
    border-color: color-mix(in srgb, var(--app-error-text) 28%, var(--app-error-border) 72%) !important;
    box-shadow: 0 2px 4px rgba(220, 38, 38, 0.10) !important;
}.btn-ui,
.btn-login,
.btn-subtle-ui,
.btn-danger-ui,
.btn-danger-subtle-ui,
.btn-primary-ui,
.btn-secondary-ui,
.btn-ai-ui,
.btn-ai-subtle-ui,
.btn-warning-subtle-ui,
.btn-success-subtle-ui {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 12px !important;
    min-height: 46px !important;
    padding: 12px 18px !important;
    line-height: 1.2;
    font-weight: 500 !important;
    vertical-align: middle;
    text-decoration: none !important;
    white-space: nowrap;
    border-radius: var(--bs-btn-border-radius) !important;
    transition: box-shadow 0.18s ease, background-color 0.18s ease, border-color 0.18s ease !important;
}.btn-ui:hover,
.btn-ui:focus-visible,
.btn-ui:active,
.btn-login:hover,
.btn-login:focus-visible,
.btn-login:active,
.btn-subtle-ui:hover,
.btn-subtle-ui:focus-visible,
.btn-subtle-ui:active,
.btn-danger-subtle-ui:hover,
.btn-danger-subtle-ui:focus-visible,
.btn-danger-subtle-ui:active,
.btn-secondary-ui:hover,
.btn-secondary-ui:focus-visible,
.btn-secondary-ui:active,
.btn-primary-ui:hover,
.btn-primary-ui:focus-visible,
.btn-primary-ui:active,
.btn-secondary-ui:hover,
.btn-secondary-ui:focus-visible,
.btn-secondary-ui:active,
.btn-ai-ui:hover,
.btn-ai-ui:focus-visible,
.btn-ai-ui:active,
.btn-ai-subtle-ui:hover,
.btn-ai-subtle-ui:focus-visible,
.btn-ai-subtle-ui:active,
.btn-warning-subtle-ui:hover,
.btn-warning-subtle-ui:focus-visible,
.btn-warning-subtle-ui:active,
.btn-success-subtle-ui:hover,
.btn-success-subtle-ui:focus-visible,
.btn-success-subtle-ui:active {
    text-decoration: none !important;
}.btn-ui,
.btn-login,
.btn-subtle-ui,
.btn-danger-ui,
.btn-danger-subtle-ui,
.btn-primary-ui,
.btn-secondary-ui,
.btn-ai-ui,
.btn-ai-subtle-ui,
.btn-warning-subtle-ui,
.btn-success-subtle-ui {
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06);
}.btn-ui:hover,
.btn-ui:focus-visible,
.btn-ui:active,
.btn-login:hover,
.btn-login:focus-visible,
.btn-login:active,
.btn-subtle-ui:hover,
.btn-subtle-ui:focus-visible,
.btn-subtle-ui:active,
.btn-danger-subtle-ui:hover,
.btn-danger-subtle-ui:focus-visible,
.btn-danger-subtle-ui:active,
.btn-secondary-ui:hover,
.btn-secondary-ui:focus-visible,
.btn-secondary-ui:active,
.btn-primary-ui:hover,
.btn-primary-ui:focus-visible,
.btn-primary-ui:active,
.btn-secondary-ui:hover,
.btn-secondary-ui:focus-visible,
.btn-secondary-ui:active,
.btn-ai-ui:hover,
.btn-ai-ui:focus-visible,
.btn-ai-ui:active,
.btn-ai-subtle-ui:hover,
.btn-ai-subtle-ui:focus-visible,
.btn-ai-subtle-ui:active,
.btn-warning-subtle-ui:hover,
.btn-warning-subtle-ui:focus-visible,
.btn-warning-subtle-ui:active,
.btn-success-subtle-ui:hover,
.btn-success-subtle-ui:focus-visible,
.btn-success-subtle-ui:active {
    box-shadow: 0 2px 4px rgba(15, 23, 42, 0.10);
}.btn-ui span,
.btn-login span,
.btn-subtle-ui span,
.btn-danger-ui span,
.btn-danger-subtle-ui span,
.btn-secondary-ui span,
.btn-primary-ui span,
.btn-secondary-ui span,
.btn-ai-ui span,
.btn-ai-subtle-ui span,
.btn-warning-subtle-ui span,
.btn-success-subtle-ui span {
    display: inline-flex;
    align-items: center;
    line-height: 1;
    align-self: center;
}

.button-icon,
.btn-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.4rem;
    min-width: 1.4rem;
    height: 1.4rem;
    font-size: 1.24rem;
    line-height: 1;
    flex: 0 0 auto;
    align-self: center;
}

.button-icon::before,
.btn-icon::before {
    line-height: 1;
}

.spinner-border.button-icon,
.spinner-border.btn-icon {
    border-width: 0.16em;
}

.btn-compact-ui {
    min-height: 32px !important;
    padding: 4px 10px !important;
    gap: 6px !important;
    font-size: 0.74rem !important;
    letter-spacing: 0;
    border-radius: var(--bs-btn-border-radius-sm) !important;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.05) !important;
}

.btn-compact-ui:hover,
.btn-compact-ui:focus-visible,
.btn-compact-ui:active {
    box-shadow: 0 2px 4px rgba(15, 23, 42, 0.08) !important;
}

.btn-compact-ui .button-icon,
.btn-compact-ui .btn-icon {
    width: 1rem;
    min-width: 1rem;
    height: 1rem;
    font-size: 0.92rem;
}

.page-header-actions .btn-ui {
    min-height: 38px !important;
    padding: 8px 14px !important;
    font-size: 0.88rem !important;
    gap: 8px !important;
}

.form-control,
.form-select {
    border-color: var(--app-field-border);
    padding: var(--app-field-padding-y) var(--app-field-padding-x);
    color: var(--app-field-text);
    background: var(--app-field-background);
    box-shadow: var(--app-field-shadow);
    transition: border-color 0.18s ease, box-shadow 0.18s ease, background-color 0.18s ease, color 0.18s ease;
}

.form-control:hover,
.form-select:hover {
    background: var(--app-field-hover-background);
    border-color: var(--app-field-hover-border);
    box-shadow: var(--app-field-hover-shadow);
}

.form-control::placeholder,
.table textarea.form-control::placeholder,
.table-guided textarea.form-control::placeholder {
    color: var(--app-field-placeholder);
}

.planner-month-input {
    min-height: 46px;
    height: 46px;
    padding: 12px 16px;
    border: 1px solid var(--app-field-border);
    background: var(--app-field-background);
    color: var(--app-primary-hover);
    font-weight: 700;
    letter-spacing: 0.01em;
    text-transform: capitalize;
    box-shadow: var(--app-field-shadow);
}

.planner-month-input:hover {
    border-color: var(--app-field-hover-border);
    background: var(--app-field-hover-background);
    box-shadow: var(--app-field-hover-shadow);
}

.form-control[type="date"]::-webkit-calendar-picker-indicator,
.form-control[type="month"]::-webkit-calendar-picker-indicator,
.form-control[type="datetime-local"]::-webkit-calendar-picker-indicator,
.form-control[type="time"]::-webkit-calendar-picker-indicator {
    cursor: pointer;
    opacity: 0.8;
    width: 1.4rem;
    height: 1.4rem;
    padding: 0;
    margin-right: 0;
    background-size: 1.4rem 1.4rem;
}

.form-control[type="date"]:hover::-webkit-calendar-picker-indicator,
.form-control[type="month"]:hover::-webkit-calendar-picker-indicator,
.form-control[type="datetime-local"]:hover::-webkit-calendar-picker-indicator,
.form-control[type="time"]:hover::-webkit-calendar-picker-indicator {
    opacity: 1;
}

.form-control:focus,
.form-select:focus {
    color: var(--app-field-text);
    border-color: var(--app-field-focus-border);
    background: var(--app-field-focus-background);
    box-shadow: var(--app-field-focus-shadow);
}

/* CDX-480: stato non-editabile coerente per input/textarea/select. Token-driven
   (--app-surface-muted + --app-muted), gestisce light/dark via override blocco
   dark mode già in :root. Override hover/focus per disattivare l'effetto
   interattivo che il blocco .form-control:hover applica di default. Copre sia
   disabled (non inviato nel form) che readonly (inviato ma non editabile). */
.form-control:disabled,
.form-control[readonly],
.form-select:disabled {
    background: var(--app-surface-muted);
    border-color: var(--app-field-border);
    color: var(--app-muted);
    box-shadow: none;
    opacity: 1;
    cursor: not-allowed;
}

.form-control:disabled:hover,
.form-control[readonly]:hover,
.form-select:disabled:hover,
.form-control:disabled:focus,
.form-control[readonly]:focus,
.form-select:disabled:focus {
    background: var(--app-surface-muted);
    border-color: var(--app-field-border);
    color: var(--app-muted);
    box-shadow: none;
}

/* CDX-669 — Eccezione documentata: riquadro filtri Inbox AI compatto.
   Form denso con 9 select + 1 input + 1 range, gli unici nel prodotto.
   I token globali --app-field-padding-y/x (7px/9px) vincono per ordine
   di caricamento sulle classi Bootstrap form-control-sm / form-select-sm,
   quindi qui ribadiamo i valori sm scoped al wrapper. Niente min-height
   sui select multipli: l'altezza dipende dall'attributo size + font sm.
   Documentato in DESIGN_SYSTEM_BRIEF.md §Eccezioni form compatti. */
.inbox-ai-filters-form .form-control-sm,
.inbox-ai-filters-form .form-select-sm {
    padding: 0.25rem 0.5rem;
    font-size: var(--app-text-sm);
    border-radius: var(--bs-border-radius-sm, 0.25rem);
}

.inbox-ai-filters-form .form-control-sm {
    min-height: calc(1.5em + 0.5rem + 2px);
}

.inbox-ai-filters-form .form-select-sm {
    padding-right: 1.75rem;
    background-position: right 0.5rem center;
}

.inbox-ai-filters-form .form-label {
    font-size: var(--app-text-xs);
    margin-bottom: 4px;
}

.inbox-ai-filters-form .form-text {
    font-size: var(--app-text-2xs);
    margin-top: 2px;
}

.inbox-ai-filters-form .form-range {
    height: 1rem;
}

.app-accordion {
    border: 1px solid var(--app-border);
    border-radius: var(--bs-accordion-border-radius, var(--app-radius));
    background: var(--app-surface);
    overflow: hidden;
}

.app-accordion .accordion-item + .accordion-item {
    margin-top: 0;
}

.app-accordion .accordion-item {
    border-left: 0;
    border-right: 0;
    border-bottom: 0;
    border-top: 1px solid var(--app-border);
}

.app-accordion .accordion-item:first-child {
    border-top: 0;
}

.app-accordion .accordion-button {
    min-height: 60px;
    padding: 16px 20px;
    font-weight: 600;
    color: var(--app-text);
    background: var(--app-surface);
    box-shadow: none;
}

.app-accordion .accordion-button:not(.collapsed) {
    color: var(--app-text);
    background: var(--app-surface-muted);
    box-shadow: none;
}

.app-accordion .accordion-body {
    border-top: 1px solid var(--app-border);
    background: var(--app-surface);
}

.app-accordion .accordion-button:focus {
    box-shadow: 0 0 0 3px var(--app-focus-ring);
    border-color: var(--app-border);
}

.ai-texts-timeline-accordion--weeks .accordion-button {
    min-height: 50px;
    padding: 12px 16px;
}

.ai-texts-timeline-accordion--weeks {
    border: 1px solid var(--app-border);
    border-left: var(--tint-strip-width) solid var(--app-selected-strip);
    border-radius: var(--bs-accordion-border-radius, var(--app-radius));
    background: var(--app-surface-muted);
    box-shadow: none;
}

.ai-texts-timeline-accordion--weeks .accordion-item {
    border-top-color: var(--app-border);
}

.ai-texts-timeline-accordion--weeks .accordion-button.collapsed {
    min-height: 44px;
    padding-top: 9px;
    padding-bottom: 9px;
    background: var(--app-surface);
    box-shadow: none;
}

.ai-texts-timeline-accordion--weeks .accordion-heading-label {
    line-height: 1.2;
    color: var(--app-heading);
}

.ai-texts-timeline-accordion--weeks .accordion-heading-icon {
    color: var(--app-heading);
}

.ai-texts-timeline-accordion--weeks .accordion-button:not(.collapsed) .accordion-heading-label,
.ai-texts-timeline-accordion--weeks .accordion-button:not(.collapsed) .accordion-heading-icon {
    color: var(--app-selected-strip);
}

.ai-texts-timeline-accordion--weeks .accordion-body {
    padding: 14px 14px 16px;
    background: var(--app-surface-muted);
}

.ai-texts-timeline-accordion--days .accordion-button {
    min-height: 42px;
    padding: 9px 14px;
}

.ai-texts-timeline-accordion--days .accordion-heading-label {
    font-size: 0.94rem;
    font-weight: 700;
    line-height: 1.15;
}

.ai-texts-timeline-accordion--days .accordion-heading-icon {
    font-size: 0.92rem;
    color: var(--app-text);
}

.ai-texts-timeline-accordion--days .accordion-body {
    padding: 12px 12px 14px;
}

.ai-texts-timeline-accordion .accordion-button::after {
    margin-left: 0;
}

.accordion-heading-content {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
}

.accordion-heading-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.4rem;
    min-width: 1.4rem;
    font-size: 1.24rem;
    color: var(--app-muted);
    line-height: 1;
    flex: 0 0 auto;
}

.accordion-heading-label {
    line-height: 1.2;
}

/* CDX-465: progress chip metrico (non status badge). Mappatura semantica
   coerente con la policy color coding (CDX-457/458):
   - is-empty (0/N approvati)    → muted grigio: non iniziato, non urgente
   - is-partial (1..N-1/N)       → warning arancione: in attesa, decisione attiva
   - is-complete (N/N)           → success verde: finale positivo
   Niente error rosso — quello è riservato a failure tecnici. */
.ai-texts-approval-summary {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    flex: 0 0 auto;
    padding: 4px 8px;
    border: 1px solid var(--app-border);
    border-radius: var(--app-radius-sm);
    background: var(--app-surface-muted);
    color: var(--app-muted);
    font-size: 0.8rem;
    font-weight: 700;
    line-height: 1;
    white-space: nowrap;
}

/* Posizionamento context-specific: il chip si allinea a destra dell'accordion-button
   tramite margin-left:auto. Pattern di "push to end" del flex parent. Tenuto fuori
   dal selettore base perché il chip è riusabile in altri contesti (es. showcase). */
.accordion-button > .ai-texts-approval-summary {
    margin-left: auto;
    margin-right: 12px;
}

.ai-texts-approval-summary__dot {
    width: 9px;
    height: 9px;
    border-radius: var(--app-radius-pill);
    background: var(--app-muted);
    box-shadow: 0 0 0 3px var(--app-surface-muted);
}

.ai-texts-approval-summary.is-complete {
    border-color: var(--app-success-border);
    background: var(--app-success-bg);
    color: var(--app-success-text);
}

.ai-texts-approval-summary.is-complete .ai-texts-approval-summary__dot {
    background: var(--app-success-text);
    box-shadow: 0 0 0 3px var(--app-success-bg);
}

.ai-texts-approval-summary.is-partial {
    border-color: var(--app-warning-border);
    background: var(--app-warning-bg);
    color: var(--app-warning-text);
}

.ai-texts-approval-summary.is-partial .ai-texts-approval-summary__dot {
    background: var(--app-warning-text);
    box-shadow: 0 0 0 3px var(--app-warning-bg);
}

.ai-texts-approval-summary.is-empty {
    /* Default base: muted (border --app-border, bg --app-surface-muted, color --app-muted)
       già applicato dal selettore principale. Mantenuto solo per chiarezza semantica
       della classe is-empty (no override visivo necessario). */
    border-color: var(--app-border);
    background: var(--app-surface-muted);
    color: var(--app-muted);
}

@media (max-width: 575.98px) {
    .ai-texts-approval-summary {
        gap: 6px;
        padding: 4px 6px;
        font-size: 0.74rem;
    }
    .accordion-button > .ai-texts-approval-summary {
        margin-right: 8px;
    }
}

.planner-month-analysis-score {
    margin-left: 6px;
    font-weight: 800;
    color: var(--app-heading);
    line-height: 1.2;
}

.planner-month-analysis-count {
    color: var(--app-muted);
    font-size: 0.86rem;
    line-height: 1.2;
}.technical-accordion .accordion-button {
    background: var(--app-surface-muted);
}

.technical-accordion--compact .accordion-button {
    align-items: flex-start;
    gap: 10px;
    min-height: 46px;
    padding: 10px 16px;
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.84) inset;
}

.technical-accordion--compact .accordion-button code {
    min-width: 0;
    white-space: normal;
    overflow-wrap: anywhere;
    word-break: break-word;
}

.technical-accordion--compact .accordion-button::after {
    flex: 0 0 auto;
    margin-top: 0.2rem;
    margin-left: auto;
}

.technical-accordion--compact .accordion-button.collapsed {
    min-height: 42px;
    padding-top: 9px;
    padding-bottom: 9px;
    background: var(--app-surface);
}

.technical-accordion--compact .accordion-heading-label {
    font-size: 0.96rem;
    font-weight: 700;
    line-height: 1.15;
}

.technical-accordion--compact .accordion-heading-icon {
    width: 1.1rem;
    min-width: 1.1rem;
    font-size: 1rem;
}

.technical-accordion--compact .accordion-body {
    padding: 12px 14px 14px;
}

.technical-accordion--compact .debug-toolbar {
    gap: 8px;
    margin-bottom: 8px;
}

.technical-accordion--compact .small-note {
    font-size: 0.82rem;
}

.technical-accordion--compact h3.h6 {
    font-size: 0.9rem;
    margin-bottom: 6px !important;
}

.technical-accordion--compact pre.small {
    padding: 12px;
    border: 1px solid var(--app-border);
    border-radius: var(--app-radius);
    background: var(--app-surface-muted);
    font-size: 0.78rem;
    line-height: 1.45;
}

.planner-debug-summary-card {
    background: var(--app-surface) !important;
}
.planner-detail-block,
.planner-debug-summary-card {
    box-shadow: none;
}

.planner-debug-summary-card {
    border-left: var(--tint-strip-width) solid var(--app-border);
}

.surface-accent-top {
    position: relative;
    overflow: visible;
    --app-accent-strip-height: var(--app-strip-height-lg);
    --app-accent-strip-opacity: var(--app-strip-opacity-strong);
    --app-accent-strip-offset: var(--app-strip-height-lg);
}

.surface-accent-top.page-card,
.surface-accent-top.privacy-page__card {
    --app-accent-strip-offset: 0;
    overflow: hidden;
}

html.planner-page--positioning body {
    visibility: hidden;
}

html.planner-page--positioning.planner-page--ready body {
    visibility: visible;
}.page-card--primary .section-heading,
.topbar .section-heading,
.card-soft .section-heading {
    color: var(--app-heading);
}

.ui-insight-list {
    display: grid;
    gap: 12px;
}

.ui-insight-card {
    position: relative;
    border: 1px solid var(--app-border);
    border-radius: var(--bs-card-border-radius);
    background: var(--app-surface);
    padding: 14px;
    box-shadow: none;
    overflow: hidden;
}

.ui-insight-card--accent::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 4px;
    height: 100%;
    border-radius: var(--bs-card-border-radius) 0 0 var(--bs-card-border-radius);
    background: var(--app-accent);
}.technical-accordion .ui-insight-card--accent::before {
    background: var(--app-border);
}html[data-theme="dark"] .technical-accordion .ui-insight-card--accent::before {
    background: var(--app-muted);
}

/* Topic discovery debug cards and scoring helpers. */
.debug-signal-list,
.debug-score-list {
    gap: 12px;
}

.debug-signal-url {
    font-weight: 700;
    word-break: break-all;
    margin-bottom: 10px;
    padding-left: 2px;
}

.debug-signal-meta {
    display: grid;
    gap: 8px;
    padding-top: 0;
}

.debug-signal-row {
    display: grid;
    grid-template-columns: 140px 1fr;
    gap: 8px;
    align-items: start;
    font-size: 0.92rem;
}

.debug-signal-label {
    font-weight: 700;
    color: var(--app-text);
}

.debug-signal-value {
    color: var(--app-heading);
}

.debug-signal-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.debug-signal-tag {
    display: inline-flex;
    align-items: center;
    padding: 4px 8px;
    border: 1px solid var(--app-border);
    border-radius: var(--app-radius-sm);
    background: var(--app-surface);
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--app-text);
    line-height: 1.1;
}

.debug-score-topic-title {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--app-heading);
    margin-bottom: 2px;
    padding-left: 2px;
}

.debug-score-candidates {
    display: grid;
    gap: 10px;
}

.debug-score-candidate {
    border: 1px solid var(--app-border);
    border-radius: var(--app-radius);
    background: var(--app-surface);
    padding: 12px;
    box-shadow: 0 8px 18px rgba(15, 23, 42, 0.035);
}

.debug-score-candidate.is-best {
    border-color: var(--app-border);
    background: var(--app-surface);
    box-shadow:
        inset 0 0 0 1px rgba(15, 23, 42, 0.04),
        0 10px 20px rgba(15, 23, 42, 0.05);
}

.debug-score-topline {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    margin-bottom: 6px;
}

.debug-score-page-title {
    font-size: 1rem;
    font-weight: 700;
    color: var(--app-heading);
    margin-bottom: 6px;
    line-height: 1.35;
}

.debug-score-link {
    font-size: 0.84rem;
    color: var(--app-muted);
    word-break: break-all;
}

.debug-score-link a {
    color: inherit;
    text-decoration: none;
}

.debug-score-link a:hover {
    text-decoration: underline;
}

.debug-score-badges {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.debug-score-value,
.debug-score-label,
.debug-score-best {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 4px 8px;
    border-radius: var(--app-radius-sm);
    font-size: 0.78rem;
    font-weight: 700;
    line-height: 1;
}

.debug-score-value {
    background: var(--app-heading);
    color: #fff;
}

.debug-score-label {
    background: var(--app-surface-muted);
    color: var(--app-heading);
}

.debug-score-best {
    background: var(--app-success-bg);
    color: var(--app-success-text);
    border: 1px solid var(--app-success-border);
}

.debug-score-supporting {
    font-size: 0.82rem;
}

.ui-insight-supporting {
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid var(--app-border);
    color: var(--app-muted);
}

@media (max-width: 767.98px) {
    .page-header,
    .debug-toolbar {
        flex-direction: column;
        align-items: flex-start;
    }.page-header-actions {
        width: 100%;
        justify-content: flex-start;
        margin-left: 0;
        padding-top: 0;
    }

    .app-header-context {
        width: 100%;
    }

.app-header-context > span,
.app-project-badge,
.app-user-badge {
        width: 100%;
        justify-content: flex-start;
    }

    .app-header-context__stack {
        max-width: none;
    }
    .admin-responsive-table,
    .app-responsive-table {
        margin-right: -12px;
        margin-left: -12px;
        border: 0;
        border-radius: 0;
        background: transparent;
        overflow: visible;
    }

    .admin-responsive-table .table,
    .app-responsive-table .table {
        border-collapse: separate;
        border-spacing: 0 10px;
        width: 100%;
        max-width: 100%;
        margin: 0;
        margin-bottom: 0;
    }

    .admin-responsive-table thead,
    .app-responsive-table thead,
    .app-responsive-table colgroup {
        display: none;
    }

    .admin-responsive-table tbody,
    .admin-responsive-table tr,
    .admin-responsive-table td,
    .app-responsive-table tbody,
    .app-responsive-table tr,
    .app-responsive-table td {
        display: block;
        width: 100%;
    }

    .admin-responsive-table tr,
    .app-responsive-table tr {
        border: 0;
        background: var(--app-surface-muted);
    }

    /* Zebra striping mobile (CDX-627): desktop usa stripe su <td>, ma su mobile
       <tr> diventa block (card stack) e il blanket bg sul <tr> sopra annulla
       l'effetto td-level. Override esplicito sul <tr> odd con --app-table-stripe
       (lo stesso token del desktop) per coerenza visiva cross-breakpoint.
       Differenziale aumentato vs precedente --app-table-hover (era troppo basso). */
    .admin-responsive-table tbody tr:nth-of-type(odd):not(.table-row-selected),
    .app-responsive-table tbody tr:nth-of-type(odd):not(.table-row-selected) {
        background: var(--app-table-stripe) !important;
    }
    .admin-responsive-table tbody tr:nth-of-type(even):not(.table-row-selected),
    .app-responsive-table tbody tr:nth-of-type(even):not(.table-row-selected) {
        background: var(--app-surface) !important;
    }

    .admin-responsive-table td,
    .app-responsive-table td {
        padding: 11px 18px !important;
        border: 0;
        text-align: left !important;
        overflow-wrap: anywhere;
    }

    .admin-responsive-table td + td,
    .app-responsive-table td + td {
        border-top: 1px solid var(--app-border);
    }

    .admin-responsive-table td::before,
    .app-responsive-table td::before {
        content: attr(data-label);
        display: block;
        margin-bottom: 4px;
        color: var(--app-muted);
        font-size: var(--app-text-xs);
        font-weight: 800;
        letter-spacing: 0.04em;
        text-transform: uppercase;
    }

    .admin-responsive-table td[data-label=""]::before,
    .app-responsive-table td[data-label=""]::before {
        display: none;
    }

    .admin-responsive-table td .btn-ui,
    .admin-responsive-table td form,
    .admin-responsive-table td .icon-action-link,
    .app-responsive-table td .btn-ui,
    .app-responsive-table td form,
    .app-responsive-table td .icon-action-link {
        width: 100%;
    }

    .admin-responsive-table td form.d-inline,
    .app-responsive-table td form.d-inline {
        display: block !important;
    }

    .admin-responsive-table td form + form,
    .admin-responsive-table td .btn-ui + form,
    .admin-responsive-table td form + .btn-ui,
    .admin-responsive-table td .btn-ui + .btn-ui,
    .app-responsive-table td form + form,
    .app-responsive-table td .btn-ui + form,
    .app-responsive-table td form + .btn-ui,
    .app-responsive-table td .btn-ui + .btn-ui {
        margin-top: 8px;
    }

    /* CDX-692: .table-row-actions impila i bottoni con flex `gap`. Il margin-top
       legacy qui sopra (form+form / btn+btn, pensato per tabelle che impilano via
       block+margin) si SOMMEREBBE al gap, raddoppiando lo spazio tra bottoni
       azione consecutivi dello stesso tipo (es. Spam dopo Archivia, Cestino dopo
       Spam). Dentro un contenitore flex-gap il margine va azzerato. */
    .admin-responsive-table td .table-row-actions > *,
    .app-responsive-table td .table-row-actions > * {
        margin-top: 0;
    }

    .admin-responsive-table td form .btn-ui,
    .app-responsive-table td form .btn-ui {
        width: 100%;
    }

    .app-responsive-table td .btn-icon-soft-ui {
        width: 100%;
        justify-content: flex-start;
    }

    .admin-responsive-table td .table-row-actions,
    .app-responsive-table td .table-row-actions {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        justify-content: flex-start;
        gap: 8px;
        width: 100%;
        white-space: normal;
    }

    .admin-responsive-table input:not([type="checkbox"]):not([type="radio"]),
    .admin-responsive-table select,
    .admin-responsive-table textarea,
    .app-responsive-table input:not([type="checkbox"]):not([type="radio"]),
    .app-responsive-table select,
    .app-responsive-table textarea {
        min-width: 0;
        width: 100%;
    }

    .admin-responsive-table textarea.form-control,
    .app-responsive-table textarea.form-control {
        min-height: 116px;
    }

    .app-responsive-table .review-table {
        min-width: 0;
    }

    .ai-text-draft-card__strategy-line,
    .ai-text-draft-card__caption-header,
    .ai-text-draft-card__caption-actions {
        align-items: stretch;
    }

    .ai-text-draft-card__strategy-goal,
    .ai-text-draft-card__strategy-info,
    .ai-text-draft-card__caption-actions,
    .ai-text-draft-card__caption-actions .btn-ui {
        width: 100%;
    }

    .ai-text-draft-card__meta {
        justify-content: flex-start;
    }

    .ai-text-draft-card__actions-bar,
    .ai-text-draft-card__actions,
    .ai-text-draft-card__actions .btn-ui {
        width: 100%;
    }

    .ai-text-draft-card.ai-text-draft-card--compact {
        padding: 10px;
    }

    .ai-text-draft-card.ai-text-draft-card--compact .planner-day-detail-title {
        align-items: center;
        flex-wrap: nowrap;
        gap: 7px;
        font-size: 0.92rem;
    }

    .ai-text-draft-card.ai-text-draft-card--compact .planner-day-detail-social-icon {
        width: 1rem;
        min-width: 1rem;
        font-size: 1rem;
    }

    .ai-text-draft-card.ai-text-draft-card--compact .ai-text-draft-card__compact-preview {
        gap: 8px;
        padding: 8px 0 0;
    }

    .ai-text-draft-card.ai-text-draft-card--compact .ai-text-draft-card__compact-snippet {
        display: -webkit-box;
        overflow: hidden;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 3;
        line-clamp: 3;
    }

    .ai-text-draft-card.ai-text-draft-card--compact .ai-text-draft-card__compact-thumb {
        width: 42px;
        height: 42px;
    }

    .planner-day-detail-actions {
        flex-direction: column;
        align-items: stretch;
        width: 100%;
        gap: 8px;
    }

    .planner-day-detail-actions > a,
    .planner-day-detail-actions > button,
    .planner-day-detail-actions > form,
    .planner-day-detail-actions > form > button {
        width: 100%;
    }

    /* Touch device: no hover → overlay buttons sempre visibili + 36px tap area */
    .ai-text-image-thumb__check,
    .ai-text-image-thumb__select,
    .ai-text-image-thumb__delete {
        width: 36px;
        height: 36px;
    }

    .ai-text-image-thumb__select,
    .ai-text-image-thumb__delete {
        opacity: 1;
    }
}

.theme-switcher {
    position: fixed;
    right: 18px;
    bottom: 18px;
    left: auto;
    width: fit-content;
    z-index: 1040;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 8px;
    max-width: calc(100vw - 20px);
}

.theme-switcher__panel {
    display: grid;
    gap: 0;
    min-width: 240px;
    padding: 12px;
    border: 1px solid var(--app-border);
    border-radius: var(--bs-card-border-radius);
    background: var(--app-surface);
    box-shadow: 0 18px 36px rgba(15, 23, 42, 0.14);
    backdrop-filter: blur(14px);
}

.theme-switcher__toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--app-border);
    background: var(--app-surface);
    color: var(--app-text);
    font-weight: 700;
    line-height: 1;
    box-shadow: 0 12px 24px rgba(15, 23, 42, 0.12);
    transition: border-color 0.18s ease, background-color 0.18s ease, color 0.18s ease, transform 0.18s ease, opacity 0.18s ease;
}

.theme-switcher__toggle:hover,
.theme-switcher__toggle:focus {
    border-color: var(--app-border-strong);
    background: var(--app-surface-muted);
    color: var(--app-heading);
    transform: translateY(-1px);
}

.theme-switcher:not(.is-collapsed) .theme-switcher__toggle {
    opacity: 0.84;
}

.theme-switcher:not(.is-collapsed) .theme-switcher__toggle:hover,
.theme-switcher:not(.is-collapsed) .theme-switcher__toggle:focus {
    opacity: 1;
}

.theme-switcher.is-collapsed .theme-switcher__panel {
    display: none;
}

/* Mobile: quando collapsed, il toggle si riduce a **sola icona** (niente pill, niente
 * bordo, niente ombra, niente label) per occupare lo spazio minimo indispensabile.
 * Il JS setta `collapsed` come default quando manca la preferenza salvata. */
@media (max-width: 767.98px) {
    .theme-switcher {
        right: 10px;
        bottom: 10px;
        gap: 6px;
    }

    .theme-switcher.is-collapsed .theme-switcher__toggle {
        padding: 10px !important;
        min-width: 0 !important;
        min-height: 0 !important;
        border: none !important;
        background: transparent !important;
        box-shadow: none !important;
        color: var(--app-muted);
        opacity: 0.8;
        filter: drop-shadow(0 1px 2px rgba(15, 23, 42, 0.35));
    }

    .theme-switcher.is-collapsed .theme-switcher__toggle > i {
        font-size: 1.45rem;
    }

    .theme-switcher.is-collapsed .theme-switcher__toggle > span {
        display: none;
    }

    .theme-switcher.is-collapsed .theme-switcher__toggle:hover,
    .theme-switcher.is-collapsed .theme-switcher__toggle:focus {
        background: transparent !important;
        border: none !important;
        box-shadow: none !important;
        transform: none;
        color: var(--app-heading);
        opacity: 1;
    }

    .theme-switcher__panel {
        min-width: 0;
        width: 200px;
        padding: 8px;
    }

    .theme-switcher__options {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 4px;
    }

    .theme-switcher:not(.is-collapsed) .theme-switcher__toggle {
        font-size: 0.78rem;
    }
}

.theme-switcher__options {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 6px;
}

.theme-switcher__button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--app-border);
    background: var(--app-surface);
    color: var(--app-text);
    font-weight: 700;
    line-height: 1;
    box-shadow: none;
    transition: border-color 0.18s ease, background-color 0.18s ease, color 0.18s ease, transform 0.18s ease;
}

.theme-switcher__button:hover,
.theme-switcher__button:focus {
    border-color: var(--app-border-strong);
    background: var(--app-surface-muted);
    color: var(--app-heading);
    transform: translateY(-1px);
}

.theme-switcher__button.is-active {
    border-color: color-mix(in srgb, var(--app-primary) 58%, var(--app-border) 42%);
    background: var(--app-selected-wash);
    color: var(--app-accent-strong);
}

.site-footer {
    background: transparent !important;
    border-top: 1px solid rgba(148, 163, 184, 0.18);
}

.site-footer__inner {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    color: var(--app-muted);
}

.site-footer__copyright,
.site-footer__project {
    min-width: 0;
}

.site-footer__project {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--app-muted);
    max-width: min(100%, 520px);
}

.site-footer__project::before {
    content: "";
    display: block;
    width: 1px;
    height: 14px;
    background: var(--app-border);
    margin-right: 2px;
}

.site-footer__project-dot {
    width: 0.62rem;
    height: 0.62rem;
    border-radius: 999px;
    flex: 0 0 auto;
    background: var(--app-border);
}

.site-footer__project.has-project-accent .site-footer__project-dot {
    background: var(--project-accent-light);
}

.site-footer__project-label {
    flex: 0 0 auto;
}

.site-footer__project-name {
    color: var(--app-text);
    font-weight: 700;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

@media (max-width: 767.98px) {
    .site-footer__inner {
        flex-direction: column;
        gap: 4px;
        text-align: center;
    }

    .site-footer__project::before {
        display: none;
    }
}

.site-footer__legal {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}

.site-footer__legal a {
    color: inherit;
    text-decoration: none;
}

.site-footer__legal a:hover,
.site-footer__legal a:focus {
    text-decoration: underline;
}

.cookie-banner {
    position: fixed;
    bottom: 16px;
    left: 50%;
    transform: translateX(-50%);
    max-width: 640px;
    width: calc(100% - 32px);
    background: var(--app-surface, #fff);
    color: var(--app-text, #1f2937);
    border: 1px solid var(--app-border, #e5e7eb);
    border-radius: 12px;
    padding: 14px 18px;
    box-shadow: 0 12px 32px rgba(15, 23, 42, 0.18);
    z-index: 1080;
}

.cookie-banner__inner {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
}

.cookie-banner__message {
    flex: 1 1 240px;
    font-size: 0.875rem;
    line-height: 1.4;
}

.cookie-banner__actions {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-shrink: 0;
}

.cookie-banner__more {
    font-size: 0.8125rem;
    color: inherit;
}

@media (max-width: 575.98px) {
    .cookie-banner {
        bottom: 8px;
        width: calc(100% - 16px);
        padding: 10px 12px;
        border-radius: 10px;
        box-shadow: 0 8px 20px rgba(15, 23, 42, 0.16);
    }

    .cookie-banner__inner {
        flex-direction: column;
        align-items: stretch;
        gap: 8px;
    }

    .cookie-banner__message {
        flex: 0 0 auto;
        font-size: 0.78125rem;
        line-height: 1.35;
    }

    .cookie-banner__actions {
        justify-content: space-between;
        gap: 8px;
    }

    .cookie-banner__more {
        font-size: 0.75rem;
    }
}

.site-footer .text-muted,
.site-footer .small {
    color: var(--app-muted) !important;
}

html[data-theme="dark"] .theme-switcher {
    color: var(--app-text);
}

html[data-theme="dark"] .theme-switcher__panel {
    border-color: var(--app-border);
    background: var(--app-surface);
    box-shadow: 0 18px 42px rgba(2, 6, 23, 0.48);
}

html[data-theme="dark"] .theme-switcher__toggle {
    border-color: var(--app-border);
    background: var(--app-surface);
    color: var(--app-text);
}

html[data-theme="dark"] .theme-switcher__button {
    border-color: var(--app-border);
    background: var(--app-surface-muted);
    color: var(--app-text);
}

html[data-theme="dark"] .theme-switcher__button:hover,
html[data-theme="dark"] .theme-switcher__button:focus {
    border-color: var(--app-border-strong);
    background: var(--app-surface-muted);
    color: var(--app-heading);
}

html[data-theme="dark"] .theme-switcher__toggle:hover,
html[data-theme="dark"] .theme-switcher__toggle:focus {
    border-color: var(--app-border-strong);
    background: var(--app-surface-muted);
    color: var(--app-heading);
}

html[data-theme="dark"] .theme-switcher__button.is-active {
    border-color: color-mix(in srgb, var(--app-primary) 58%, var(--app-border) 42%);
    background: color-mix(in srgb, var(--app-primary) 24%, var(--app-surface));
    color: var(--app-accent-strong);
}

html[data-theme="dark"] .site-footer {
    border-top-color: var(--app-border);
}

html[data-theme="dark"] .site-footer__project.has-project-accent .site-footer__project-dot {
    background: var(--project-accent-dark);
}

html[data-theme="dark"] .site-footer .text-muted,
html[data-theme="dark"] .site-footer .small {
    color: var(--app-muted) !important;
}/* Global dark theme overrides for shared application surfaces. */
html[data-theme="dark"] .page-card,
html[data-theme="dark"] .card-soft,
html[data-theme="dark"] .section-box,
html[data-theme="dark"] .project-switcher-item,
html[data-theme="dark"] .planner-analysis-card,
html[data-theme="dark"] .review-table-shell,
html[data-theme="dark"] .planner-calendar-shell,
html[data-theme="dark"] .post-calendar-shell,
html[data-theme="dark"] .post-calendar-mobile-day,
html[data-theme="dark"] .planner-detail-block,
html[data-theme="dark"] .planner-debug-summary-card,
html[data-theme="dark"] .debug-score-candidate,
html[data-theme="dark"] .ui-insight-card {
    background: var(--app-surface) !important;
    border-color: var(--app-border) !important;
    box-shadow: none !important;
}

html[data-theme="dark"] .project-switcher-item {
    border-left-color: var(--app-ui-blue) !important;
}

html[data-theme="dark"] .project-switcher-item.has-project-accent {
    border-left-color: var(--project-accent-dark) !important;
}

html[data-theme="dark"] .project-switcher-item.has-project-accent .project-switcher-name {
    color: var(--project-accent-dark) !important;
}

html[data-theme="dark"] .project-switcher-meta {
    color: var(--app-muted) !important;
}

html[data-theme="dark"] .admin-project-color-swatch.has-project-accent {
    background: var(--project-accent-dark);
    border-color: color-mix(in srgb, var(--project-accent-dark) 68%, var(--app-border) 32%);
}

html[data-theme="dark"] .config-card {
    --config-tint-strong: var(--tint-strong-dark, var(--tint-color-dark, var(--tint-color, #60a5fa)));
    background: var(--app-surface) !important;
    border-color: var(--app-border) !important;
    box-shadow: none !important;
}

html[data-theme="dark"] .config-card::before {
    background: var(--config-tint-strong);
}html[data-theme="dark"] .social-configs-card .config-card,
html[data-theme="dark"] .content-rule-card {
    background: var(--tint-bg-dark, var(--app-surface)) !important;
}

html[data-theme="dark"] .page-hero-card,
html[data-theme="dark"] .debug-score-candidate.is-best {
    background: var(--app-surface) !important;
    border-color: var(--app-border-hover) !important;
}html[data-theme="dark"] .page-card--secondary,
html[data-theme="dark"] .section-level-accessory {
    background: var(--app-surface) !important;
    border-color: var(--app-border) !important;
}

html[data-theme="dark"] .page-summary-card {
    background: var(--app-surface) !important;
    border-color: var(--app-border) !important;
}

html[data-theme="dark"] .page-summary-card::before {
    opacity: var(--app-strip-opacity-strong);
}html[data-theme="dark"] .page-summary-label {
    color: var(--app-ui-sky);
}

html[data-theme="dark"] ::-webkit-scrollbar-thumb {
    background: rgba(71, 85, 105, 0.55);
}

html[data-theme="dark"] ::-webkit-scrollbar-thumb:hover {
    background: rgba(71, 85, 105, 0.8);
}

html[data-theme="dark"] .section-box.page-nav-card {
    border-color: var(--app-border) !important;
    background: var(--app-surface) !important;
    box-shadow: inset 3px 0 0 var(--app-accent) !important;
}

html[data-theme="dark"] .section-box.page-nav-card:hover,
html[data-theme="dark"] .section-box.page-nav-card:focus-visible {
    border-color: rgba(96, 165, 250, 0.66) !important;
    background: color-mix(in srgb, var(--app-primary) 14%, var(--app-surface-muted) 86%) !important;
    box-shadow:
        inset var(--tint-strip-width) 0 0 var(--app-accent),
        0 1px 2px rgba(2, 6, 23, 0.32) !important;
}

html[data-theme="dark"] .page-nav-card:hover,
html[data-theme="dark"] .page-nav-card:focus-visible {
    border-color: rgba(96, 165, 250, 0.58) !important;
    background: color-mix(in srgb, var(--app-primary) 14%, var(--app-surface-muted) 86%) !important;
    box-shadow: inset var(--tint-strip-width) 0 0 var(--app-accent), 0 1px 2px rgba(2, 6, 23, 0.32);
}

html[data-theme="dark"] .page-nav-card {
    border-color: var(--app-border) !important;
    background: var(--app-surface) !important;
    box-shadow: inset 3px 0 0 var(--app-accent);
}

html[data-theme="dark"] ::selection {
    background: rgba(56, 189, 248, 0.28);
    color: var(--app-heading);
}

html[data-theme="dark"] ::-moz-selection {
    background: rgba(56, 189, 248, 0.28);
    color: var(--app-heading);
}

html[data-theme="dark"] .page-nav-card__title {
    color: var(--app-link-text);
}

html[data-theme="dark"] .page-nav-card:hover .page-nav-card__title,
html[data-theme="dark"] .page-nav-card:focus-visible .page-nav-card__title,
html[data-theme="dark"] .page-nav-card:hover .page-title-with-icon__icon,
html[data-theme="dark"] .page-nav-card:focus-visible .page-title-with-icon__icon {
    color: var(--app-primary-hover);
}

html[data-theme="dark"] .help-doc-content h2,
html[data-theme="dark"] .help-doc-content h3,
html[data-theme="dark"] .help-doc-content p,
html[data-theme="dark"] .help-doc-content li,
html[data-theme="dark"] .help-doc-content code {
    color: var(--app-link-text);
}

html[data-theme="dark"] .help-doc-content code {
    background: rgba(148, 163, 184, 0.14);
}

html[data-theme="dark"] .help-doc-pre {
    background: var(--app-surface-deep);
    border-color: var(--app-border);
}

html[data-theme="dark"] .version-switcher-status--opened {
    color: #bfdbfe;
    border-color: rgba(96, 165, 250, 0.34);
    background: rgba(59, 130, 246, 0.12);
}

html[data-theme="dark"] .version-switcher-status--current {
    color: #bfdbfe;
    border-color: rgba(96, 165, 250, 0.34);
    background: rgba(59, 130, 246, 0.12);
}

html[data-theme="dark"] .version-switcher-status--historical {
    color: var(--app-text-soft);
    border-color: rgba(148, 163, 184, 0.22);
    background: rgba(148, 163, 184, 0.08);
}

html[data-theme="dark"] .technical-accordion .accordion-button {
    background: var(--app-surface-muted) !important;
}

html[data-theme="dark"] .technical-accordion--compact .accordion-button,
html[data-theme="dark"] .technical-accordion--compact .accordion-button.collapsed {
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.03) inset;
}html[data-theme="dark"] .config-active-provider-panel {
    border-color: var(--app-border) !important;
    background: var(--app-surface) !important;
    color: var(--app-text) !important;
}

html[data-theme="dark"] .social-config-card.is-disabled {
    border-color: color-mix(in srgb, var(--app-muted, #64748b) 40%, transparent) !important;
}

html[data-theme="dark"] .config-provider-card::before {
    background: var(--tint-color-dark, var(--tint-color, var(--config-tint-strong)));
}

html[data-theme="dark"] .config-provider-card:not(.is-active) {
    border-color: var(--app-border) !important;
}

html[data-theme="dark"] .config-capability-card__header {
    border-color: var(--app-border) !important;
}

html[data-theme="dark"] .config-provider-card.is-active {
    border-color: var(--app-selected-border) !important;
    background: var(--app-selected-wash) !important;
    box-shadow: none !important;
}

/* Card attiva in dark: la striscia resta sul --tint-color-dark del provider
   (regola base dark ::before), non sul gradiente primary. */
/* Generic dark wrapper per chip/badge neutri. NON include .planner-status-badge:
   gli status badge usano i token semantici --app-success/warning/error/info-*
   che sono già light/dark aware in :root, override dedicato qui sarebbe
   ridondante e (con !important) bloccherebbe il sistema cascading. */
html[data-theme="dark"] .app-header-context > span,
html[data-theme="dark"] .app-project-badge,
html[data-theme="dark"] .app-user-badge,
html[data-theme="dark"] .config-chip,
html[data-theme="dark"] .config-chip--summary,
html[data-theme="dark"] .planner-format-badge,
html[data-theme="dark"] .debug-signal-tag,
html[data-theme="dark"] .debug-score-label {
    background: var(--app-surface-muted) !important;
    border-color: var(--app-border) !important;
    color: var(--app-text) !important;
}

html[data-theme="dark"] .app-header-context > span,
html[data-theme="dark"] .app-project-badge,
html[data-theme="dark"] .app-user-badge {
    border-left-color: var(--app-ui-blue) !important;
}

html[data-theme="dark"] .app-header-context > .has-project-accent,
html[data-theme="dark"] .app-project-badge.has-project-accent {
    border-left-color: var(--project-accent-dark) !important;
}

html[data-theme="dark"] .app-header-context > .has-project-accent .app-header-context__icon,
html[data-theme="dark"] .app-header-context > .has-project-accent .app-header-context__label,
html[data-theme="dark"] .app-project-badge.has-project-accent .app-header-context__icon,
html[data-theme="dark"] .app-project-badge.has-project-accent .app-header-context__label {
    color: var(--project-accent-dark) !important;
}

html[data-theme="dark"] .app-header-context > .has-project-accent .app-header-context__label--account,
html[data-theme="dark"] .app-project-badge.has-project-accent .app-header-context__label--account {
    color: var(--app-muted) !important;
}

html[data-theme="dark"] .app-context-pill-action:hover,
html[data-theme="dark"] .app-context-pill-action:focus-visible {
    background: color-mix(in srgb, var(--app-primary) 14%, var(--app-surface-muted) 86%) !important;
    border-color: color-mix(in srgb, var(--app-primary) 42%, var(--app-border) 58%) !important;
    border-left-color: var(--app-primary) !important;
    color: var(--app-heading) !important;
}

html[data-theme="dark"] .app-project-badge.has-project-accent:hover,
html[data-theme="dark"] .app-project-badge.has-project-accent:focus-visible {
    background: color-mix(in srgb, var(--project-accent-dark) 12%, var(--app-surface-muted) 88%) !important;
    border-color: color-mix(in srgb, var(--project-accent-dark) 38%, var(--app-border) 62%) !important;
    border-left-color: var(--project-accent-dark) !important;
}

html[data-theme="dark"] .planner-day-detail-meta .planner-format-badge,
html[data-theme="dark"] .ai-text-draft-card__meta .planner-format-badge {
    border-left-color: var(--social-strong, var(--app-heading)) !important;
}html[data-theme="dark"] .config-chip strong,
html[data-theme="dark"] .config-card__title,
html[data-theme="dark"] .config-provider-card h3,
html[data-theme="dark"] .config-active-provider-panel__meta strong {
    color: var(--app-heading) !important;
}html[data-theme="dark"] .config-help-note,
html[data-theme="dark"] .config-active-provider-panel__meta,
html[data-theme="dark"] .section-copy.section-copy--small,
html[data-theme="dark"] .planner-toolbar-note {
    color: var(--app-muted) !important;
}

html[data-theme="dark"] .planner-saved-versions-card {
    border-color: rgba(96, 165, 250, 0.22) !important;
}

html[data-theme="dark"] .table-guided tbody tr.table-row-selected td {
    background: var(--app-selected-wash-soft) !important;
}html[data-theme="dark"] .icon-action-link {
    border-color: var(--app-border);
    background: var(--app-surface);
}

html[data-theme="dark"] .icon-action-link {
    color: var(--app-text);
}

html[data-theme="dark"] .icon-action-link:hover,
html[data-theme="dark"] .icon-action-link:focus-visible {
    border-color: rgba(148, 163, 184, 0.45);
    background: var(--app-surface-muted);
    color: var(--app-text);
}

html[data-theme="dark"] .icon-action-link--danger {
    color: var(--app-error-text);
    border-color: var(--app-error-border);
    background: var(--app-error-bg);
}

html[data-theme="dark"] .icon-action-link--danger:hover,
html[data-theme="dark"] .icon-action-link--danger:focus-visible {
    color: var(--app-error-text);
    border-color: color-mix(in srgb, var(--app-error-text) 28%, var(--app-error-border) 72%);
    background: color-mix(in srgb, var(--app-error-text) 10%, var(--app-error-bg) 90%);
}

html[data-theme="dark"] .icon-action-link--active {
    color: var(--app-muted);
    border-color: var(--app-border);
    background: var(--app-border);
    box-shadow: none;
}
html[data-theme="dark"] .config-chip__dot {
    border-color: rgba(148, 163, 184, 0.38);
}

html[data-theme="dark"] .table,
html[data-theme="dark"] .table-guided,
html[data-theme="dark"] .review-table {
    --bs-table-striped-bg: rgba(30, 41, 59, 0.72);
    --bs-table-hover-bg: rgba(51, 65, 85, 0.55);
    --bs-table-border-color: var(--bs-border-color);
    --app-table-header-bg: color-mix(in srgb, var(--app-primary) 14%, var(--app-surface-muted) 86%);
    --app-table-header-border: color-mix(in srgb, var(--app-primary) 38%, var(--bs-table-border-color) 62%);
    --app-table-header-text: var(--app-heading);
    border-color: var(--bs-table-border-color);
}

html[data-theme="dark"] .table thead th,
html[data-theme="dark"] .table-guided thead th,
html[data-theme="dark"] .review-table thead th {
    background: var(--app-table-header-bg);
    color: var(--app-table-header-text);
    border-color: var(--app-table-header-border);
}

html[data-theme="dark"] .planner-weekdays,
html[data-theme="dark"] .post-calendar-weekdays {
    background: var(--app-surface-muted) !important;
    border-color: var(--app-border) !important;
    color: var(--app-ui-sky) !important;
}

html[data-theme="dark"] .table tbody td,
html[data-theme="dark"] .table-guided tbody td,
html[data-theme="dark"] .review-table tbody td {
    border-color: var(--bs-table-border-color) !important;
    color: var(--app-text) !important;
}

html[data-theme="dark"] .table tbody tr:hover td:first-child,
html[data-theme="dark"] .table-guided tbody tr:hover td:first-child {
    box-shadow: inset 3px 0 0 var(--app-ui-blue);
}

html[data-theme="dark"] .planner-weekday,
html[data-theme="dark"] .post-calendar-weekday {
    color: var(--app-ui-sky) !important;
}

html[data-theme="dark"] .planner-weekday,
html[data-theme="dark"] .planner-day,
html[data-theme="dark"] .post-calendar-weekday,
html[data-theme="dark"] .post-calendar-cell {
    border-color: var(--app-border);
}

html[data-theme="dark"] .planner-day,
html[data-theme="dark"] .planner-day.is-empty,
html[data-theme="dark"] .post-calendar-cell:not(.is-outside) {
    background: var(--app-surface);
}

html[data-theme="dark"] .planner-day:not(.is-empty):hover,
html[data-theme="dark"] .post-calendar-cell:not(.is-outside):hover {
    background: var(--app-surface-raised) !important;
}

html[data-theme="dark"] .planner-day.is-selected {
    background: var(--app-selected-wash-soft) !important;
    box-shadow: inset var(--tint-strip-width) 0 0 var(--app-selected-strip);
}

html[data-theme="dark"] .planner-day-number,
html[data-theme="dark"] .planner-day.is-selected .planner-day-number,
html[data-theme="dark"] .post-calendar-cell__day {
    color: #b6c2d0;
}

html[data-theme="dark"] .planner-day.is-selected .planner-day-count {
    color: #64748b;
}

html[data-theme="dark"] .planner-day-item-text {
    color: currentColor;
}

html[data-theme="dark"] .planner-day-item:hover .planner-day-item-text {
    color: currentColor;
}

html[data-theme="dark"] .planner-day-item,
html[data-theme="dark"] .planner-day-detail-card,
html[data-theme="dark"] .planner-calendar-mobile-day {
    background: var(--app-surface-muted);
    border-color: var(--app-border);
}

html[data-theme="dark"] .app-inline-link {
    color: var(--app-info-text);
}

html[data-theme="dark"] .app-inline-link:hover,
html[data-theme="dark"] .app-inline-link:focus {
    color: var(--app-link-text);
}

html[data-theme="dark"] .ai-progress-card__counts {
    color: var(--app-heading);
}

html[data-theme="dark"] .ai-progress-card__bar {
    border-color: var(--app-border);
    background: var(--app-surface-muted);
}

html[data-theme="dark"] .planner-day-detail-card {
    --social-strong: var(--tint-strong-dark, var(--social-accent-dark));
    background: color-mix(in srgb, var(--social-accent-dark) 7%, var(--app-surface) 93%);
    border-color: color-mix(in srgb, var(--app-border) 88%, var(--social-accent-dark) 12%);
    border-left-color: var(--social-strong);
    color: var(--social-strong);
}

html[data-theme="dark"] .ai-text-draft-card__debug-link {
    background: color-mix(in srgb, var(--app-surface-muted) 86%, var(--app-surface-deep) 14%);
    border-color: var(--app-border);
    color: var(--app-text-soft);
}

html[data-theme="dark"] .ai-text-image-thumb {
    background: color-mix(in srgb, var(--app-surface-muted) 88%, var(--app-surface-deep) 12%);
    border-color: var(--app-border);
}

html[data-theme="dark"] .ai-text-image-thumb.is-selected,
html[data-theme="dark"] .ai-text-video-thumb.is-selected {
    border: 3px solid var(--social-strong, var(--app-heading));
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--social-strong, var(--app-heading)) 45%, transparent);
}

html[data-theme="dark"] .ai-text-image-thumb--skeleton {
    background: linear-gradient(
        90deg,
        color-mix(in srgb, var(--app-surface-muted) 84%, var(--app-surface-deep) 16%) 0%,
        color-mix(in srgb, var(--app-surface-muted) 66%, var(--app-border) 34%) 45%,
        color-mix(in srgb, var(--app-surface-muted) 84%, var(--app-surface-deep) 16%) 100%
    );
    background-size: 180% 100%;
}

html[data-theme="dark"] .ai-text-image-thumb__check {
    background: var(--social-strong, var(--app-heading));
}

html[data-theme="dark"] .ai-text-image-thumb__select {
    background: rgba(15, 23, 42, 0.82);
}

html[data-theme="dark"] .ai-text-image-thumb__select:hover,
html[data-theme="dark"] .ai-text-image-thumb__select:focus-visible {
    background: var(--social-strong, var(--app-heading));
}

html[data-theme="dark"] .ai-text-image-preview-figure {
    background: color-mix(in srgb, var(--app-surface-muted) 86%, var(--app-surface-deep) 14%);
    border-color: var(--app-border);
}

html[data-theme="dark"] .planner-day-item {
    --calendar-chip-strong: var(--tint-strong-dark, var(--calendar-chip-accent-dark));
    background: var(--tint-bg-dark, var(--app-surface));
    border-color: var(--app-border);
    border-left-color: var(--calendar-chip-strong);
    color: var(--calendar-chip-strong);
}

html[data-theme="dark"] .planner-calendar-mobile-day__header {
    background: var(--app-surface);
    border-color: var(--app-border);
}

html[data-theme="dark"] .calendar-mobile-day-title {
    color: var(--app-heading);
}

html[data-theme="dark"] .calendar-mobile-item-title {
    color: currentColor;
}

html[data-theme="dark"] .planner-calendar-mobile-day__items .planner-day-item {
    --calendar-chip-strong: var(--tint-strong-dark, var(--calendar-chip-accent-dark));
    background: var(--tint-bg-dark, var(--app-surface));
    border-left-color: var(--calendar-chip-strong);
    color: var(--calendar-chip-strong);
}

html[data-theme="dark"] .planner-day-item-social-label {
    color: currentColor;
}

html[data-theme="dark"] .post-calendar-pill {
    --calendar-chip-strong: var(--tint-strong-dark, var(--calendar-chip-accent-dark));
    background: var(--tint-bg-dark, var(--app-surface));
    border-color: var(--app-border);
    border-left-color: var(--calendar-chip-strong);
    color: var(--calendar-chip-strong);
}

html[data-theme="dark"] .post-calendar-pill:hover {
    background: color-mix(in srgb, var(--calendar-chip-accent-dark) 12%, var(--app-surface) 88%);
    border-color: var(--calendar-chip-strong);
    border-left-color: var(--calendar-chip-strong);
}

html[data-theme="dark"] .post-calendar-pill__title {
    color: currentColor;
}

html[data-theme="dark"] .post-calendar-pill:hover .post-calendar-pill__title {
    color: currentColor;
}

html[data-theme="dark"] .post-calendar-pill__time {
    color: #b8c4d6;
}

html[data-theme="dark"] .post-calendar-mobile-day__header {
    background: var(--app-surface);
    border-color: var(--app-border);
}

html[data-theme="dark"] .post-calendar-mobile-item {
    --calendar-chip-strong: var(--tint-strong-dark, var(--calendar-chip-accent-dark));
    background: var(--tint-bg-dark, var(--app-surface));
    border-color: var(--app-border);
    border-left-color: var(--calendar-chip-strong);
    color: var(--calendar-chip-strong);
}

html[data-theme="dark"] .post-calendar-mobile-item:hover,
html[data-theme="dark"] .post-calendar-mobile-item:focus-visible {
    background: color-mix(in srgb, var(--calendar-chip-accent-dark) 12%, var(--app-surface) 88%);
    color: var(--calendar-chip-strong);
}

html[data-theme="dark"] .post-calendar-mobile-item__social {
    color: currentColor;
}

html[data-theme="dark"] .planner-day-item-icon {
    color: currentColor;
}

html[data-theme="dark"] .planner-day-detail-title {
    color: currentColor;
}
html[data-theme="dark"] .planner-day-detail-strategy-line {
    color: #a7b6ca;
}

html[data-theme="dark"] .planner-day-detail-strategy-line strong {
    color: var(--app-heading);
}

html[data-theme="dark"] .planner-day-detail-strategy-separator {
    color: #64748b;
}

html[data-theme="dark"] .planner-day-detail-strategy-line a {
    color: var(--social-strong, var(--app-heading));
}
html[data-theme="dark"] .planner-day-item-strategy {
    background: color-mix(in srgb, var(--strategy-accent-dark) 10%, var(--app-surface) 90%);
    color: var(--strategy-accent-dark);
    border-color: var(--app-border);
    box-shadow: none;
}

html[data-theme="dark"] .planner-day-item-strategy:hover,
html[data-theme="dark"] .planner-day-item-strategy:focus {
    background: color-mix(in srgb, var(--strategy-accent-dark) 14%, var(--app-surface) 86%);
    border-color: var(--app-border);
}

html[data-theme="dark"] .planner-day-link {
    color: var(--app-info-text);
}

html[data-theme="dark"] .planner-day-link:hover,
html[data-theme="dark"] .planner-day-link:focus {
    color: var(--app-link-text);
}

html[data-theme="dark"] .planner-month-input {
    background: var(--app-field-background) !important;
    border-color: var(--app-field-border) !important;
    color: var(--app-field-text) !important;
    box-shadow: none !important;
}

html[data-theme="dark"] .form-control:focus,
html[data-theme="dark"] .form-select:focus {
    border-color: var(--app-field-focus-border);
    box-shadow: var(--app-field-focus-shadow);
}

html[data-theme="dark"] .btn-primary-ui,
html[data-theme="dark"] .btn-login {
    background: #2563eb !important;
    border-color: #2563eb !important;
    color: #ffffff !important;
    box-shadow: none !important;
}

html[data-theme="dark"] .btn-primary-ui:hover,
html[data-theme="dark"] .btn-login:hover {
    background: #3b82f6 !important;
    border-color: #3b82f6 !important;
    color: #ffffff !important;
    box-shadow: none !important;
}

html[data-theme="dark"] .btn-secondary-ui {
    background: var(--app-info-bg) !important;
    border-color: var(--app-info-border) !important;
    color: var(--app-info-text) !important;
    box-shadow: 0 1px 2px rgba(2, 6, 23, 0.32) !important;
}

html[data-theme="dark"] .btn-secondary-ui:hover {
    background: color-mix(in srgb, var(--app-info-bg) 80%, var(--app-info-text) 20%) !important;
    border-color: var(--app-info-text) !important;
    color: var(--app-info-text) !important;
    box-shadow: 0 2px 4px rgba(2, 6, 23, 0.40) !important;
}

html[data-theme="dark"] .btn-subtle-ui {
    background: var(--app-surface-raised) !important;
    border-color: color-mix(in srgb, var(--app-border-hover) 65%, var(--app-border-strong) 35%) !important;
    color: var(--app-text) !important;
    box-shadow: 0 1px 2px rgba(2, 6, 23, 0.32) !important;
}

html[data-theme="dark"] .btn-subtle-ui:hover {
    background: color-mix(in srgb, var(--app-surface-raised) 96%, var(--app-text) 4%) !important;
    border-color: color-mix(in srgb, var(--app-border-hover) 30%, var(--app-border-strong) 70%) !important;
    color: var(--app-heading) !important;
    box-shadow: 0 2px 4px rgba(2, 6, 23, 0.40) !important;
}
html[data-theme="dark"] .btn-ai-ui {
    background: var(--app-ai-fill) !important;
    border-color: var(--app-ai-fill) !important;
    color: var(--app-ai-fill-text) !important;
    box-shadow: none !important;
}

html[data-theme="dark"] .btn-ai-ui:hover,
html[data-theme="dark"] .btn-ai-ui:focus-visible,
html[data-theme="dark"] .btn-ai-ui:active {
    background: var(--app-ai-fill-hover) !important;
    border-color: var(--app-ai-fill-hover) !important;
    color: var(--app-ai-fill-text) !important;
    box-shadow: none !important;
}
html[data-theme="dark"] .btn-warning-subtle-ui {
    background: var(--app-warning-bg) !important;
    border-color: var(--app-warning-border) !important;
    color: var(--app-warning-text) !important;
    box-shadow: 0 1px 2px rgba(2, 6, 23, 0.32) !important;
}

html[data-theme="dark"] .btn-warning-subtle-ui:hover,
html[data-theme="dark"] .btn-warning-subtle-ui:focus-visible,
html[data-theme="dark"] .btn-warning-subtle-ui:active {
    background: color-mix(in srgb, var(--app-warning-text) 10%, var(--app-warning-bg) 90%) !important;
    border-color: color-mix(in srgb, var(--app-warning-text) 28%, var(--app-warning-border) 72%) !important;
    color: var(--app-warning-text) !important;
    box-shadow: 0 2px 4px rgba(2, 6, 23, 0.40) !important;
}

html[data-theme="dark"] .btn-danger-ui {
    background: var(--app-error-fill) !important;
    border-color: var(--app-error-fill) !important;
    color: var(--app-error-fill-text) !important;
    box-shadow: none !important;
}

html[data-theme="dark"] .btn-danger-ui:hover,
html[data-theme="dark"] .btn-danger-ui:focus-visible,
html[data-theme="dark"] .btn-danger-ui:active {
    background: var(--app-error-fill-hover) !important;
    border-color: var(--app-error-fill-hover) !important;
    color: var(--app-error-fill-text) !important;
    box-shadow: none !important;
}

html[data-theme="dark"] .btn-danger-subtle-ui {
    background: var(--app-error-bg) !important;
    border-color: var(--app-error-border) !important;
    color: var(--app-error-text) !important;
    box-shadow: 0 1px 2px rgba(2, 6, 23, 0.32) !important;
}

html[data-theme="dark"] .btn-danger-subtle-ui:hover,
html[data-theme="dark"] .btn-danger-subtle-ui:focus-visible,
html[data-theme="dark"] .btn-danger-subtle-ui:active {
    background: color-mix(in srgb, var(--app-error-text) 10%, var(--app-error-bg) 90%) !important;
    border-color: color-mix(in srgb, var(--app-error-text) 28%, var(--app-error-border) 72%) !important;
    color: var(--app-error-text) !important;
    box-shadow: 0 2px 4px rgba(2, 6, 23, 0.40) !important;
}

html[data-theme="dark"] .btn-success-ui {
    background: var(--app-success-fill) !important;
    border-color: var(--app-success-fill) !important;
    color: var(--app-success-fill-text) !important;
    box-shadow: none !important;
}

html[data-theme="dark"] .btn-success-ui:hover,
html[data-theme="dark"] .btn-success-ui:focus-visible,
html[data-theme="dark"] .btn-success-ui:active {
    background: var(--app-success-fill-hover) !important;
    border-color: var(--app-success-fill-hover) !important;
    color: var(--app-success-fill-text) !important;
    box-shadow: none !important;
}

html[data-theme="dark"] .btn-warning-ui {
    background: var(--app-warning-fill) !important;
    border-color: var(--app-warning-fill) !important;
    color: var(--app-warning-fill-text) !important;
    box-shadow: none !important;
}

html[data-theme="dark"] .btn-warning-ui:hover,
html[data-theme="dark"] .btn-warning-ui:focus-visible,
html[data-theme="dark"] .btn-warning-ui:active {
    background: var(--app-warning-fill-hover) !important;
    border-color: var(--app-warning-fill-hover) !important;
    color: var(--app-warning-fill-text) !important;
    box-shadow: none !important;
}

/* CDX-561: rimossi 3 duplicati `btn-secondary-ui` da selector list (errore copy-paste preesistente). */
.btn-ui:disabled,
.btn-login:disabled,
.btn-subtle-ui:disabled,
.btn-primary-ui:disabled,
.btn-secondary-ui:disabled,
.btn-danger-ui:disabled,
.btn-danger-subtle-ui:disabled,
.btn-ai-ui:disabled,
.btn-ai-subtle-ui:disabled,
.btn-warning-ui:disabled,
.btn-warning-subtle-ui:disabled,
.btn-success-ui:disabled,
.btn-success-subtle-ui:disabled,
.btn-ui.disabled,
.btn-login.disabled,
.btn-subtle-ui.disabled,
.btn-primary-ui.disabled,
.btn-secondary-ui.disabled,
.btn-danger-ui.disabled,
.btn-danger-subtle-ui.disabled,
.btn-ai-ui.disabled,
.btn-ai-subtle-ui.disabled,
.btn-warning-ui.disabled,
.btn-warning-subtle-ui.disabled,
.btn-success-ui.disabled,
.btn-success-subtle-ui.disabled,
.btn-ui[aria-disabled="true"],
.btn-login[aria-disabled="true"],
.btn-subtle-ui[aria-disabled="true"],
.btn-primary-ui[aria-disabled="true"],
.btn-secondary-ui[aria-disabled="true"],
.btn-danger-ui[aria-disabled="true"],
.btn-danger-subtle-ui[aria-disabled="true"],
.btn-ai-ui[aria-disabled="true"],
.btn-ai-subtle-ui[aria-disabled="true"],
.btn-warning-ui[aria-disabled="true"],
.btn-warning-subtle-ui[aria-disabled="true"],
.btn-success-ui[aria-disabled="true"],
.btn-success-subtle-ui[aria-disabled="true"] {
    border-color: var(--app-border) !important;
    background: var(--app-surface-muted) !important;
    color: var(--app-muted) !important;
    box-shadow: none !important;
    opacity: 0.58 !important;
    filter: grayscale(0.35) !important;
    cursor: not-allowed !important;
    transform: none !important;
}a.btn-ui.disabled,
a.btn-login.disabled,
a.btn-subtle-ui.disabled,
a.btn-danger-ui.disabled,
a.btn-danger-subtle-ui.disabled,
a.btn-secondary-ui.disabled,
a.btn-primary-ui.disabled,
a.btn-secondary-ui.disabled,
a.btn-ai-ui.disabled,
a.btn-ai-subtle-ui.disabled,
a.btn-warning-ui.disabled,
a.btn-warning-subtle-ui.disabled,
a.btn-success-ui.disabled,
a.btn-success-subtle-ui.disabled,
a.btn-ui[aria-disabled="true"],
a.btn-login[aria-disabled="true"],
a.btn-subtle-ui[aria-disabled="true"],
a.btn-danger-ui[aria-disabled="true"],
a.btn-danger-subtle-ui[aria-disabled="true"],
a.btn-secondary-ui[aria-disabled="true"],
a.btn-primary-ui[aria-disabled="true"],
a.btn-secondary-ui[aria-disabled="true"],
a.btn-ai-ui[aria-disabled="true"],
a.btn-ai-subtle-ui[aria-disabled="true"],
a.btn-warning-ui[aria-disabled="true"],
a.btn-warning-subtle-ui[aria-disabled="true"],
a.btn-success-ui[aria-disabled="true"],
a.btn-success-subtle-ui[aria-disabled="true"] {
    pointer-events: none;
}

/* CDX-561: hex hardcoded #2563eb → var(--app-primary-fill) per coerenza con CDX-560
   (famiglia primary ora token-based). Cross-theme automatico. */
.btn-primary-ui:disabled,
.btn-login:disabled,
.btn-primary-ui.disabled,
.btn-login.disabled,
.btn-primary-ui[aria-disabled="true"],
.btn-login[aria-disabled="true"] {
    border-color: color-mix(in srgb, var(--app-primary-fill) 48%, var(--app-border)) !important;
    background: color-mix(in srgb, var(--app-primary-fill) 16%, var(--app-surface-muted)) !important;
    color: color-mix(in srgb, var(--app-primary-fill) 72%, var(--app-text)) !important;
}

.btn-ai-ui:disabled,
.btn-ai-ui.disabled,
.btn-ai-ui[aria-disabled="true"] {
    border-color: color-mix(in srgb, var(--app-ai-text) 48%, var(--app-border)) !important;
    background: color-mix(in srgb, var(--app-ai-text) 16%, var(--app-surface-muted)) !important;
    color: color-mix(in srgb, var(--app-ai-text) 72%, var(--app-text)) !important;
}
.btn-danger-ui:disabled,
.btn-danger-ui.disabled,
.btn-danger-ui[aria-disabled="true"] {
    border-color: color-mix(in srgb, var(--app-error-text) 48%, var(--app-border)) !important;
    background: color-mix(in srgb, var(--app-error-text) 16%, var(--app-surface-muted)) !important;
    color: color-mix(in srgb, var(--app-error-text) 72%, var(--app-text)) !important;
}

.btn-success-ui:disabled,
.btn-success-ui.disabled,
.btn-success-ui[aria-disabled="true"] {
    border-color: color-mix(in srgb, var(--app-success-text) 48%, var(--app-border)) !important;
    background: color-mix(in srgb, var(--app-success-text) 16%, var(--app-surface-muted)) !important;
    color: color-mix(in srgb, var(--app-success-text) 72%, var(--app-text)) !important;
}

.btn-warning-ui:disabled,
.btn-warning-ui.disabled,
.btn-warning-ui[aria-disabled="true"] {
    border-color: color-mix(in srgb, var(--app-warning-text) 48%, var(--app-border)) !important;
    background: color-mix(in srgb, var(--app-warning-text) 16%, var(--app-surface-muted)) !important;
    color: color-mix(in srgb, var(--app-warning-text) 72%, var(--app-text)) !important;
}

/* CDX-561: hex hardcoded #2563eb/#ffffff → token per coerenza con design system.
   Aggiunti dark override per Success e Warning per parità con Primary/AI/Danger. */
html[data-theme="dark"] .btn-primary-ui:disabled,
html[data-theme="dark"] .btn-login:disabled,
html[data-theme="dark"] .btn-primary-ui.disabled,
html[data-theme="dark"] .btn-login.disabled,
html[data-theme="dark"] .btn-primary-ui[aria-disabled="true"],
html[data-theme="dark"] .btn-login[aria-disabled="true"] {
    background: color-mix(in srgb, var(--app-primary-fill) 30%, var(--app-surface-muted)) !important;
    color: color-mix(in srgb, var(--app-primary-fill-text) 82%, var(--app-muted)) !important;
}

html[data-theme="dark"] .btn-ai-ui:disabled,
html[data-theme="dark"] .btn-ai-ui.disabled,
html[data-theme="dark"] .btn-ai-ui[aria-disabled="true"] {
    background: color-mix(in srgb, var(--app-ai-text) 30%, var(--app-surface-muted)) !important;
    color: color-mix(in srgb, var(--app-ai-fill-text) 82%, var(--app-muted)) !important;
}

html[data-theme="dark"] .btn-danger-ui:disabled,
html[data-theme="dark"] .btn-danger-ui.disabled,
html[data-theme="dark"] .btn-danger-ui[aria-disabled="true"] {
    background: color-mix(in srgb, var(--app-error-text) 30%, var(--app-surface-muted)) !important;
    color: color-mix(in srgb, var(--app-error-fill-text) 82%, var(--app-muted)) !important;
}

html[data-theme="dark"] .btn-success-ui:disabled,
html[data-theme="dark"] .btn-success-ui.disabled,
html[data-theme="dark"] .btn-success-ui[aria-disabled="true"] {
    background: color-mix(in srgb, var(--app-success-text) 30%, var(--app-surface-muted)) !important;
    color: color-mix(in srgb, var(--app-success-fill-text) 82%, var(--app-muted)) !important;
}

html[data-theme="dark"] .btn-warning-ui:disabled,
html[data-theme="dark"] .btn-warning-ui.disabled,
html[data-theme="dark"] .btn-warning-ui[aria-disabled="true"] {
    background: color-mix(in srgb, var(--app-warning-text) 30%, var(--app-surface-muted)) !important;
    color: color-mix(in srgb, var(--app-warning-fill-text) 82%, var(--app-muted)) !important;
}

html[data-theme="dark"] .app-accordion,
html[data-theme="dark"] .app-accordion .accordion-button,
html[data-theme="dark"] .app-accordion .accordion-body {
    background: var(--app-surface) !important;
    border-color: var(--app-border) !important;
    color: var(--app-text) !important;
}

html[data-theme="dark"] .app-accordion .accordion-button:not(.collapsed) {
    background: var(--app-surface-muted) !important;
    color: var(--app-heading) !important;
}

html[data-theme="dark"] .ai-texts-timeline-accordion--weeks .accordion-button.collapsed {
    background: var(--app-surface) !important;
}

html[data-theme="dark"] .ai-texts-timeline-accordion--weeks .accordion-body {
    background: var(--app-surface-muted) !important;
}html[data-theme="dark"] .muted,
html[data-theme="dark"] .small-note,
html[data-theme="dark"] .planner-analysis-copy-secondary,
html[data-theme="dark"] .planner-analysis-consistency-text,
html[data-theme="dark"] .debug-score-link,
html[data-theme="dark"] .ui-insight-supporting {
    color: #94a3b8 !important;
}

html[data-theme="dark"] .config-card code,
html[data-theme="dark"] .config-help-note code {
    border-color: #475569;
    background: #0f172a;
    color: #dbeafe;
}html[data-theme="dark"] .debug-score-value {
    background: #e2e8f0;
    color: #0f172a;
}
html[data-theme="dark"] .debug-score-best {
    background: rgba(22, 101, 52, 0.22) !important;
    border-color: rgba(34, 197, 94, 0.4) !important;
    color: #bbf7d0 !important;
}
/* Status badge dark mode: nessun override dedicato. Le regole light sopra
   (.planner-status-badge.status-X) usano già i token --app-success/warning/
   error/info-* che sono light/dark aware in :root. Pattern coerente con
   .app-alert.is-X. Vedi CDX-456 per la pulizia degli override rgba hardcoded
   precedentemente presenti qui. */
@media (max-width: 575.98px) {
    .theme-switcher {
        max-width: calc(100vw - 20px);
    }

    .theme-switcher__panel {
        width: min(360px, calc(100vw - 20px));
        padding: 8px;
    }

    .theme-switcher__options {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 4px;
    }

    .theme-switcher__button {
        min-width: 0;
        line-height: 1;
    }

    .theme-switcher__button > span {
        min-width: 0;
        white-space: nowrap;
    }
}

body.login-page {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    position: relative;
}

.login-page,
.login-page .auth-card,
.login-page .login-card,
.login-page .auth-alert,
.login-page .btn,
.login-page .btn-login,
.login-page .site-footer {
    border-radius: var(--app-radius) !important;
}

.auth-card {
    width: 100%;
    position: relative;
}

.auth-alert {
    --bs-alert-border-color: var(--app-border);
    --bs-alert-bg: var(--app-surface);
    --bs-alert-color: var(--app-text);
    padding: 14px 16px;
    margin-bottom: 24px;
    font-size: 0.92rem;
    border: 1px solid var(--bs-alert-border-color);
    border-radius: var(--app-radius);
    background: var(--bs-alert-bg);
    color: var(--bs-alert-color);
}

.auth-alert--error {
    --bs-alert-color: var(--app-error-text);
    --bs-alert-bg: var(--app-error-bg);
    --bs-alert-border-color: var(--app-error-border);
}

.auth-title {
    margin: 0 0 24px;
    text-align: center;
    font-size: 1.35rem;
    line-height: 1.08;
    font-family: "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    font-weight: 650;
    letter-spacing: -0.02em;
    color: var(--app-heading);
}

.auth-form {
    position: relative;
    z-index: 1;
}

.auth-label {
    margin-bottom: 8px;
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 1px;
    color: var(--app-muted);
    text-transform: uppercase;
}

.auth-form-field {
    margin-bottom: 20px !important;
}

.auth-form-field--last {
    margin-bottom: 28px !important;
}

.auth-control {
    height: 48px;
    min-height: 48px;
    line-height: 1.2;
    font-size: 0.98rem;
}

.auth-actions {
    margin-top: 0;
}

.btn-auth-ui {
    width: 100%;
    height: 56px;
    min-height: 56px;
}

.login-page .page {
    flex: 1 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 88px 24px;
    position: relative;
    z-index: 1;
}

.login-page .login-card {
    max-width: 596px;
    margin-top: -40px;
    background: var(--app-gradient-surface);
    border: 1px solid var(--app-border);
    border-top-left-radius: 0 !important;
    border-top-right-radius: 0 !important;
    padding: 40px 56px 48px;
    box-shadow: none;
    position: relative;
    overflow: visible;
}

.login-page .login-card.surface-accent-top::before {
    border-top-left-radius: var(--app-radius);
    border-top-right-radius: var(--app-radius);
}

.login-page .brand {
    margin-bottom: 28px;
    text-align: center;
    position: relative;
    z-index: 1;
}

.login-page .planner-brand--hero {
    gap: 0;
    align-items: center;
}

.privacy-page {
    min-height: 100vh;
    color: var(--app-text);
}

.privacy-page__main {
    min-height: 100vh;
    padding: 72px 24px;
}

.privacy-page__shell {
    width: 100%;
    max-width: 920px;
    margin: 0 auto;
}

.privacy-page__card {
    position: relative;
    overflow: visible;
    background: var(--app-gradient-surface);
    border: 1px solid var(--app-border);
    border-radius: var(--app-radius, 16px);
    padding: 40px;
    box-shadow: none;
}

.privacy-page__brand {
    margin-bottom: 28px;
}

.privacy-page__card section {
    border-top: 1px solid var(--app-border);
    padding-top: 22px;
}

@media (max-width: 767.98px) {
    .privacy-page__main {
        padding: 48px 16px;
    }

    .privacy-page__card {
        padding: 28px 20px;
    }
}

@media (max-width: 575.98px) {
    .help-layout {
        grid-template-columns: 1fr;
    }

    .help-sidebar {
        position: static;
    }

    .help-nav-list {
        gap: 8px;
        margin-top: 12px;
    }

    .help-page .help-nav-card {
        padding: 12px 14px;
    }

    .help-page .help-nav-card .page-nav-card__title {
        margin-bottom: 0;
        font-size: 0.94rem;
    }

    .help-page .help-nav-card .muted {
        display: none;
    }

    .login-page .page {
        padding: 64px 18px 24px;
    }

    .login-page .login-card {
        margin-top: 0;
        padding: 40px 24px 28px;
    }

    .login-page .auth-title {
        font-size: 1.18rem;
    }

    .dashboard-page .page-card,
    .dashboard-page .card-soft,
    .dashboard-page .section-box {
        margin-bottom: 18px;
    }

    .dashboard-page .page-card > .card-body,
    .dashboard-page .card-soft > .card-body {
        padding: 18px !important;
    }

    .dashboard-page .page-section-grid {
        gap: 12px;
        margin-top: 14px;
    }

    .dashboard-page .page-section-box {
        padding: 14px;
    }
}
.publish-event-details-row > td {
    border-top: 0;
    padding-top: 0;
    padding-bottom: 0.35rem;
}

.publish-event-details {
    border: 1px solid var(--app-border);
    border-radius: var(--app-radius);
    background: var(--app-surface-muted);
    padding: 0.28rem 0.55rem;
    font-size: 0.82rem;
    line-height: 1.25;
}

.publish-event-details > summary {
    cursor: pointer;
    color: var(--app-muted);
    font-weight: 650;
    line-height: 1.2;
}

.publish-event-details__block {
    margin-top: 0.45rem;
}

.publish-event-details__pre {
    max-height: 16rem;
    overflow: auto;
    margin: 0;
    padding: 0.5rem;
    border: 1px solid var(--app-border);
    border-radius: var(--app-radius);
    background: var(--app-surface);
    color: var(--app-text);
    font-size: 0.78rem;
    line-height: 1.35;
    white-space: pre-wrap;
    word-break: break-word;
}

.prompt-source-pre {
    max-height: 28rem;
    overflow: auto;
    margin: 0;
    padding: 0.75rem;
    border: 1px solid var(--app-border);
    border-radius: var(--app-radius);
    background: var(--app-surface);
    color: var(--app-text);
    font-size: 0.78rem;
    line-height: 1.42;
    white-space: pre-wrap;
    word-break: break-word;
}

.vertical-triplet-uploader {
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
}

.vertical-triplet-dropzone {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.55rem;
    min-height: 14rem;
    padding: 1.5rem;
    border: 1px dashed var(--app-border-strong);
    border-radius: var(--app-radius-lg);
    background: var(--app-surface-muted);
    color: var(--app-text);
    text-align: center;
    cursor: pointer;
    transition: border-color 0.16s ease, background-color 0.16s ease, transform 0.16s ease;
}

.vertical-triplet-dropzone:hover,
.vertical-triplet-dropzone.is-dragover {
    border-color: var(--app-info-text);
    background: var(--app-info-bg);
    transform: translateY(-1px);
}

.vertical-triplet-file-input {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.vertical-triplet-dropzone__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 3rem;
    height: 3rem;
    border-radius: 999px;
    background: var(--app-surface);
    color: var(--app-info-text);
    font-size: 1.45rem;
}

.vertical-triplet-dropzone__title {
    color: var(--app-heading);
    font-weight: 800;
}

.vertical-triplet-dropzone__copy {
    max-width: 30rem;
    color: var(--app-muted);
    font-size: 0.92rem;
}

.vertical-triplet-dropzone__button {
    margin-top: 0.25rem;
}

.vertical-triplet-order {
    border: 1px solid var(--app-border);
    border-radius: var(--app-radius);
    background: var(--app-surface);
    padding: 1rem;
}

.vertical-triplet-sort-strip {
    display: flex;
    align-items: stretch;
    gap: 1rem;
    min-height: 19rem;
    overflow-x: auto;
    padding: 0.15rem 0.1rem 0.35rem;
    scroll-snap-type: x proximity;
}

.vertical-triplet-sort-empty {
    display: grid;
    place-items: center;
    width: 100%;
    min-height: 8rem;
    border: 1px dashed var(--app-border);
    border-radius: var(--app-radius);
    color: var(--app-muted);
    font-size: 0.9rem;
    text-align: center;
}

.vertical-triplet-sort-card {
    position: relative;
    display: grid;
    grid-template-rows: 13rem auto auto;
    flex: 0 0 clamp(16rem, 22vw, 20rem);
    overflow: hidden;
    border: 1px solid var(--app-border);
    border-radius: var(--app-radius);
    background: var(--app-surface-muted);
    cursor: grab;
    scroll-snap-align: start;
}

.vertical-triplet-sort-card.is-dragging {
    opacity: 0.58;
}

.vertical-triplet-sort-card__image {
    width: 100%;
    height: 100%;
    object-fit: contain;
    background: var(--app-surface);
}

.vertical-triplet-sort-card__meta {
    display: flex;
    align-items: flex-start;
    gap: 0.45rem;
    min-width: 0;
    padding: 0.6rem 0.7rem 0.45rem;
}

.vertical-triplet-sort-card__order {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.35rem;
    height: 1.35rem;
    border-radius: 999px;
    background: var(--app-info-bg);
    color: var(--app-info-text);
    font-size: 0.76rem;
    font-weight: 800;
    flex: 0 0 auto;
}

.vertical-triplet-sort-card__name {
    min-width: 0;
    overflow-wrap: anywhere;
    color: var(--app-text);
    font-size: 0.82rem;
    font-weight: 650;
    line-height: 1.25;
    white-space: normal;
}

.vertical-triplet-sort-card__time {
    display: grid;
    gap: 0.25rem;
    padding: 0 0.6rem 0.6rem;
    color: var(--app-muted);
    font-size: 0.76rem;
    font-weight: 700;
}

.vertical-triplet-sort-card__remove {
    position: absolute;
    top: 0.35rem;
    right: 0.35rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.8rem;
    height: 1.8rem;
    border: 1px solid var(--app-border);
    border-radius: 999px;
    background: var(--app-surface);
    color: var(--app-muted);
}

.vertical-triplet-sort-card__remove:hover,
.vertical-triplet-sort-card__remove:focus-visible {
    color: var(--app-error-text);
    border-color: var(--app-error-border);
}
.vertical-triplet-job-actions__main,
.vertical-triplet-job-actions__danger {
    align-items: center;
}

.vertical-triplet-job-actions__main.page-actions {
    margin-top: 0.75rem;
}

.vertical-triplet-job-context {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem 0.55rem;
    align-items: baseline;
    padding: 0.65rem 0;
    border-top: 1px solid var(--app-border);
    border-bottom: 1px solid var(--app-border);
}

.vertical-triplet-job-context__label {
    color: var(--app-muted);
    font-size: 0.78rem;
    font-weight: 800;
    text-transform: uppercase;
}

.vertical-triplet-job-context__value {
    color: var(--app-text);
    font-size: 0.92rem;
    overflow-wrap: anywhere;
}

.vertical-triplet-result-card {
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
    padding: 1rem;
}

.vertical-triplet-result-card__image-button {
    display: block;
    width: 100%;
    padding: 0;
    border: 0;
    background: transparent;
    cursor: zoom-in;
}

.vertical-triplet-result-card__image-button:focus-visible {
    outline: 2px solid var(--app-focus-ring);
    outline-offset: 3px;
}

.vertical-triplet-result-card__image {
    display: block;
    width: 100%;
    height: clamp(18rem, 30vw, 26rem);
    object-fit: contain;
    border: 1px solid var(--app-border);
    border-radius: var(--app-radius);
    background: var(--app-surface);
}

.vertical-triplet-result-card__filename {
    min-width: 0;
    overflow-wrap: anywhere;
    color: var(--app-text) !important;
    font-size: 0.86rem !important;
    font-weight: 400 !important;
    letter-spacing: 0 !important;
    line-height: 1.25 !important;
}

.vertical-triplet-caption-textarea {
    min-height: 18rem;
    font-size: 0.9rem;
    line-height: 1.42;
}

.vertical-triplet-image-preview-modal__body {
    display: grid;
    place-items: center;
    padding: 1rem;
    overflow: hidden;
    background: var(--app-surface);
}

.vertical-triplet-image-preview-modal__image {
    display: block;
    max-width: 100%;
    max-height: calc(100dvh - 7.5rem);
    object-fit: contain;
    border: 1px solid var(--app-border);
    border-radius: var(--app-radius);
    background: var(--app-surface);
}

@media (max-width: 991.98px) {
    .vertical-triplet-sort-strip {
        min-height: 20rem;
    }

    .vertical-triplet-sort-card {
        grid-template-rows: 14rem auto auto;
        flex-basis: 16rem;
    }

    .vertical-triplet-result-card__image {
        height: clamp(18rem, 52vw, 28rem);
    }

    .vertical-triplet-caption-textarea {
        min-height: 15rem;
        font-size: 0.95rem;
    }
}

@media (max-width: 575.98px) {
    .vertical-triplet-sort-strip {
        min-height: 20rem;
    }

    .vertical-triplet-sort-card {
        grid-template-rows: minmax(13rem, 1fr) auto auto;
        flex-basis: min(82vw, 17rem);
    }
    .vertical-triplet-job-actions__danger {
        margin-top: 0.75rem;
    }

    .vertical-triplet-result-card__image {
        height: min(92vw, 28rem);
    }
}

@media (max-width: 575.98px) {
    .app-table--label-inventory {
        min-width: 0;
    }

    .app-table--label-inventory thead {
        display: none;
    }

    .app-table--label-inventory tbody,
    .app-table--label-inventory tr,
    .app-table--label-inventory td {
        display: block;
        width: 100%;
    }

    .app-table--label-inventory tr {
        padding: 0.72rem 0;
        border-bottom: 1px solid var(--app-border);
    }

    .app-table--label-inventory tr:last-child {
        border-bottom: 0;
    }

    .app-table--label-inventory td {
        padding: 0.34rem 0;
        border: 0;
    }

    .app-table--label-inventory td::before {
        content: attr(data-label);
        display: block;
        margin-bottom: 0.24rem;
        color: var(--app-muted);
        font-size: 0.72rem;
        font-weight: 800;
    }

    .app-table--label-inventory code,
    .app-table--label-inventory .config-chip {
        max-width: 100%;
    }
}

.global-nav.offcanvas {
    background: var(--app-surface);
    color: var(--app-text);
    border-left: 1px solid var(--app-border);
}

.global-nav .offcanvas-header {
    border-bottom: 1px solid var(--app-border);
}

.global-nav .offcanvas-title {
    color: var(--app-heading);
}

.global-nav .btn-close {
    filter: var(--app-btn-close-filter);
}

.global-nav__section + .global-nav__section {
    margin-top: 24px;
    padding-top: 20px;
    border-top: 1px solid var(--app-border);
}

.global-nav__section-title {
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--app-muted);
    margin: 0 0 10px;
}

.global-nav__subsection-title {
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-size: 0.65rem;
    font-weight: 600;
    color: var(--app-muted);
    opacity: 0.75;
    margin: 0 0 6px;
    padding-left: 10px;
}

.global-nav__list + .global-nav__subsection-title {
    margin-top: 14px;
}

.global-nav__list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.global-nav__link {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 10px;
    border-radius: 8px;
    color: var(--app-text);
    text-decoration: none;
    transition: background 120ms ease, color 120ms ease;
}

.global-nav__link:hover,
.global-nav__link:focus-visible {
    background: color-mix(in srgb, var(--app-primary) 10%, transparent);
    color: var(--app-text);
    text-decoration: none;
}

.global-nav__link.is-active {
    background: color-mix(in srgb, var(--app-primary) 15%, transparent);
    color: var(--app-primary);
    font-weight: 600;
}

.global-nav__link i {
    flex-shrink: 0;
    font-size: 1.24rem;
    width: 1.4rem;
    text-align: center;
}

.global-nav__link--logout {
    color: var(--app-error-text);
}

.global-nav__link--logout:hover,
.global-nav__link--logout:focus-visible {
    background: color-mix(in srgb, var(--app-error-fill) 10%, transparent);
    color: var(--app-error-text);
}

/* CDX-661 follow-up: nav globale — icone dei moduli ereditano lo stesso accent
   delle card di lancio sulla dashboard. Testo neutro (no rainbow effect);
   il colore vive solo sull'icona come ancora visiva tra dashboard e menu.
   Voci di utility (Dashboard, Super Admin, preferenze, logout) restano neutre. */
.global-nav__link[href="/topic-discovery.php"] i {
    color: var(--dashboard-card-accent-topic-discovery);
}

.global-nav__link[href="/topics.php"] i {
    color: var(--dashboard-card-accent-topics);
}

.global-nav__link[href="/monthly-social-plan.php"] i {
    color: var(--dashboard-card-accent-monthly-social-plan);
}

.global-nav__link[href="/post-drafts.php"] i {
    color: var(--dashboard-card-accent-post-drafts);
}

.global-nav__link[href="/publishing-calendar.php"] i {
    color: var(--dashboard-card-accent-publishing-calendar);
}

.global-nav__link[href="/blog-article-from-source.php"] i {
    color: var(--dashboard-card-accent-blog-planner);
}

.global-nav__link[href="/blog-articles.php"] i {
    color: var(--dashboard-card-accent-blog-articles);
}

.global-nav__link[href^="/inbox-ai"] i {
    color: var(--dashboard-card-accent-inbox-ai);
}

.global-nav__link[href^="/verticals/"] i {
    color: var(--dashboard-card-accent-verticals);
}

.global-nav__link[href="/help.php"] i {
    color: var(--dashboard-card-accent-help);
}

/* Active state: "tu sei qui" si esprime con primary, sovrascrive l'accent
   anche sull'icona per non confondere "categoria" con "voce corrente". */
.global-nav__link.is-active i {
    color: var(--app-primary);
}

/* Admin Design System (admin-design-system.php) — classi page-specific
   per swatch colore, barre spacing e badge AI demo. Tre selettori isolati,
   non riusati altrove. */
.design-system-swatch {
    display: inline-block;
    width: 32px;
    height: 32px;
    border-radius: 6px;
    border: 1px solid var(--app-border);
    flex-shrink: 0;
}

.design-system-spacing-bar {
    display: inline-block;
    height: 16px;
    background: var(--app-primary);
    border-radius: 3px;
    min-width: 2px;
}


/* CDX-602: image crop stage per featured image blog 16:9. Pan + zoom client-side.
   Frame fisso aspect-ratio 16:9, overflow hidden, immagine sotto via transform.
   `cursor: grab` per affordance drag. */
.image-crop-stage {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    background: var(--app-surface-deep);
    border: 1px solid var(--app-border);
    border-radius: 8px;
    cursor: grab;
    touch-action: none;
    user-select: none;
}

.image-crop-stage:active {
    cursor: grabbing;
}

.image-crop-source {
    position: absolute;
    top: 0;
    left: 0;
    transform-origin: 0 0;
    pointer-events: none;
    max-width: none;
    max-height: none;
}

.image-crop-grid {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background-image:
        linear-gradient(to right, rgba(255, 255, 255, 0.3) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(255, 255, 255, 0.3) 1px, transparent 1px);
    background-size: 33.33% 33.33%;
}

/* CDX-661: Dashboard card di lancio (`.dashboard-nav-card`).
   Pittogramma grande in cima + titolo + sottotitolo clamp 2 righe.
   Accent color via token `--dashboard-card-accent-*` mappato per-card su href.
   10 hue distinti per migliorare scannability (l'occhio identifica la card
   dal colore prima ancora di leggere il titolo). Token in `:root` (light) e
   `html[data-theme="dark"]` (varianti chiare per contrast su navy). */
.dashboard-nav-card {
    text-align: center;
    padding: 24px 16px;
    min-height: 180px;
}

.dashboard-nav-card .page-nav-card__title.page-title-with-icon {
    flex-direction: column;
    align-items: center;
    gap: 14px;
    margin-bottom: 12px;
    font-size: 1rem;
    font-weight: 600;
}

.dashboard-nav-card .page-title-with-icon__icon {
    font-size: 2.75rem;
    line-height: 1;
    margin: 0;
    /* Override l'inherit dal titolo bold (font-weight: 600) per evitare che
       il browser sintetizzi un finto bold sul glyph delle Bootstrap Icons,
       ingrossando lo stroke rispetto al nav globale (link a 400). */
    font-weight: 400;
}

.dashboard-nav-card .muted {
    font-size: 0.85rem;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Variable per-card: ogni <a> .dashboard-nav-card setta la sua variable scoped */
.dashboard-nav-card[href*="topic-discovery"] {
    --dashboard-card-accent: var(--dashboard-card-accent-topic-discovery);
}

.dashboard-nav-card[href="/topics.php"] {
    --dashboard-card-accent: var(--dashboard-card-accent-topics);
}

.dashboard-nav-card[href*="monthly-social-plan"] {
    --dashboard-card-accent: var(--dashboard-card-accent-monthly-social-plan);
}

.dashboard-nav-card[href*="post-drafts"] {
    --dashboard-card-accent: var(--dashboard-card-accent-post-drafts);
}

.dashboard-nav-card[href*="publishing-calendar"] {
    --dashboard-card-accent: var(--dashboard-card-accent-publishing-calendar);
}

.dashboard-nav-card[href*="inbox-ai"] {
    --dashboard-card-accent: var(--dashboard-card-accent-inbox-ai);
}

.dashboard-nav-card[href*="blog-article-from-source"] {
    --dashboard-card-accent: var(--dashboard-card-accent-blog-planner);
}

.dashboard-nav-card[href*="blog-articles"] {
    --dashboard-card-accent: var(--dashboard-card-accent-blog-articles);
}

.dashboard-nav-card[href*="vertical"] {
    --dashboard-card-accent: var(--dashboard-card-accent-verticals);
}

.dashboard-nav-card[href*="help"] {
    --dashboard-card-accent: var(--dashboard-card-accent-help);
}

/* Apply: solo l'icona pittogramma porta l'accent per-card. Titolo, bordo, stripe
   e bg hover restano sui token standard `.page-nav-card`, per coerenza col
   pattern del nav globale (icona colorata + testo neutro). Stati default +
   hover + focus tutti coperti per evitare che la regola globale
   `.page-nav-card:hover .page-title-with-icon__icon { color: var(--app-primary-hover) }`
   riporti l'icona al blu su mouseover. */
.dashboard-nav-card[href] .page-title-with-icon__icon,
.dashboard-nav-card[href]:hover .page-title-with-icon__icon,
.dashboard-nav-card[href]:focus-visible .page-title-with-icon__icon {
    color: var(--dashboard-card-accent, var(--app-heading));
}

/* Dark mode: override esplicito dell'icona per battere la regola globale
   `html[data-theme="dark"] .page-nav-card:hover .page-title-with-icon__icon`
   (specificità 0,4,1) che altrimenti vincerebbe sulla regola sopra (0,2,1). */
html[data-theme="dark"] .dashboard-nav-card[href] .page-title-with-icon__icon,
html[data-theme="dark"] .dashboard-nav-card[href]:hover .page-title-with-icon__icon,
html[data-theme="dark"] .dashboard-nav-card[href]:focus-visible .page-title-with-icon__icon {
    color: var(--dashboard-card-accent, var(--app-heading));
}