/*
 * BEYONDSPOKE UI styles — layer di PRODOTTO
 * ─────────────────────────────────────────
 * Il CORE dei token vive in ui-tokens.css e i COMPONENTI GENERICI in
 * ui-components.css — layer condivisi dell'ecosistema WorldcApp, fonte unica
 * planner.worldcapp.com, copie GENERATE qui (NON editarle: si modifica il canonico
 * e si propaga con ~/Projects/worldcapp-ops/ui-sync.sh push; drift check nel deploy). Caricati
 * PRIMA di questo file (ordine: tokens -> components -> app-ui).
 * Qui restano SOLO i token di prodotto BeyondSpoke (:root + dark, sotto) e i
 * componenti solo-beyondspoke (in coda). Storia: VTO-206 (split), VTO-204 (tokens).
 */

:root {
    /* Token di PRODOTTO (provider/social/strategy/dashboard, logo gradient).
       Il core generico vive in ui-tokens.css (fonte unica: planner.worldcapp.com; copia
       sincronizzata via ~/Projects/worldcapp-ops/ui-sync.sh, caricata PRIMA di questo file). */
    --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%);
    /* 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%);
    /* 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) */
    --dashboard-card-accent-collection: #3b82f6;             /* blu, come Analisi Sito in PLANNER */
    --dashboard-card-accent-virtual-try-on: #8b5cf6;         /* viola, come Piano Mensile in PLANNER */
    --dashboard-card-accent-report: #14b8a6;                 /* teal */
}

/* 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"] {
    --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%);
    /* 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;
    --dashboard-card-accent-collection: #60a5fa;
    --dashboard-card-accent-virtual-try-on: #a78bfa;
    --dashboard-card-accent-report: #2dd4bf;
}


/* ============================================================================
   Componenti SOLO-BEYONDSPOKE. I componenti generici condivisi vivono in
   ui-components.css (caricato prima di questo file).
   ========================================================================== */

/* Logo bitmap (BeyondSpoke.ai): wordmark molto largo (~13.6:1), si scala
   per larghezza con altezza automatica per non distorcere. Due asset
   (tratto nero / tratto bianco) alternati in base al tema risolto. */
.planner-brand__logo {
    display: block;
    height: auto;
}

.planner-brand--app .planner-brand__logo {
    width: min(100%, clamp(300px, 38vw, 480px));
}

.planner-brand--hero .planner-brand__logo {
    width: 100%;
}

.planner-brand__logo--dark {
    display: none;
}

html[data-theme="dark"] .planner-brand__logo--light {
    display: none;
}

html[data-theme="dark"] .planner-brand__logo--dark {
    display: block;
}

/* Override bys del margine brand in app (il condiviso ha solo margin-bottom 14px). */
body:not(.login-page) .planner-brand--app {
    margin-top: 12px !important;
    margin-bottom: 24px !important;
}

/* VTO-163: header app-shell più compatto su smartphone (globale, tutte le pagine).
   Su mobile l'hero-header occupava >mezzo schermo prima dei contenuti. Riduce padding
   della card, gap della colonna header, margine delle pill di contesto, e mette Menu+Logout
   (e qualsiasi azione header) AFFIANCATI invece che impilati a tutta larghezza (override
   mirato del `.btn-ui { width:100% }` mobile). Titolo e descrizione leggermente ridotti.
   Solo <=575.98px: desktop/tablet invariati. */
@media (max-width: 575.98px) {
    .page-hero-card > .card-body {
        padding: 14px !important;
    }
    .page-hero-card .page-header {
        gap: 12px;
    }
    .page-hero-card .app-header-context {
        margin-bottom: 8px !important;
        gap: 6px;
    }
    .page-hero-card .page-title-with-icon,
    .page-hero-card .page-header h1 {
        font-size: 1.3rem;
    }
    .page-hero-card .page-header .section-copy {
        font-size: 0.85rem;
    }
    /* azioni header su una riga, larghezza condivisa (vince su .btn-ui{width:100%}) */
    .page-hero-card .page-header-actions {
        width: 100%;
        gap: 8px;
    }
    .page-hero-card .page-header-actions > .btn-ui {
        width: auto;
        flex: 1 1 auto;
        min-width: 0;
    }
}

/* VTO-195: l'icona del bottone Accedi usa `.button-icon` come tutti i bottoni del design
   system (glifo 1.24rem in box 1.4rem); lo spacing icona↔testo è il gap 12px della famiglia
   .btn-ui — rimosso il vecchio margin custom che vi si sommava. */


/* Stato "sto lavorando" (submit in corso, spinner + label): il bottone viene
   disabilitato dal JS contro il doppio invio, ma lo sbiadito da disabled
   (opacità, grayscale, testo muted) qui rende la label quasi illeggibile.
   Con .is-loading tiene i colori pieni della sua variante. */
.btn-ai-ui.is-loading:disabled {
    border-color: var(--app-ai-fill) !important;
    background: var(--app-ai-fill) !important;
    color: var(--app-ai-fill-text) !important;
    opacity: 1 !important;
    filter: none !important;
    cursor: progress !important;
}

/* Pattern PLANNER (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, area admin,
   preferenze, logout) restano neutre. */
.global-nav__link[href="/collection.php"] i {
    color: var(--dashboard-card-accent-collection);
}

/* Stesso accent di Collezione: la Vetrina è la sua vista di presentazione,
   già colorata di blu sulla card dashboard tramite il selettore
   [href*="collection"] qui sotto — qui il nav globale usa match esatto sull'href,
   quindi va dichiarata a parte per restare coerente. */
.global-nav__link[href="/collection_showcase.php"] i {
    color: var(--dashboard-card-accent-collection);
}

.global-nav__link[href="/virtual-try-on.php"] i {
    color: var(--dashboard-card-accent-virtual-try-on);
}

.global-nav__link[href="/report.php"] i {
    color: var(--dashboard-card-accent-report);
}

.dashboard-nav-card[href*="collection"] {
    --dashboard-card-accent: var(--dashboard-card-accent-collection);
}

.dashboard-nav-card[href*="virtual-try-on"] {
    --dashboard-card-accent: var(--dashboard-card-accent-virtual-try-on);
}

.dashboard-nav-card[href*="report"] {
    --dashboard-card-accent: var(--dashboard-card-accent-report);
}


/* ─────────────────────────────────────────────────────────────────
   Collection wizard (modulo Collezione)
   Wizard a 8 passi: progress, pannelli, card di scelta con immagine
   (modelli/location), card testuali (pose), gruppi opzione outfit.
   Solo token --app-*: nessun override dark necessario.
   ───────────────────────────────────────────────────────────────── */
.colwizard-progress {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    flex-wrap: wrap;
    margin-bottom: 1.5rem;
    padding: 0;
    list-style: none;
}

.colwizard-progress-step {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    border: 1px solid var(--app-border);
    border-radius: var(--app-radius-pill);
    background: var(--app-surface-muted);
    color: var(--app-muted);
    padding: 0.25rem 0.75rem 0.25rem 0.35rem;
    font-size: 0.8rem;
    font-weight: 600;
    cursor: default;
    user-select: none;
}

/* Sotto lg il titolo del passo è nascosto (d-none d-lg-inline): il padding
   destro maggiorato per il testo lascerebbe un vuoto — si pareggia. */
@media (max-width: 991.98px) {
    .colwizard-progress-step {
        padding: 0.25rem 0.35rem;
    }
}

.colwizard-progress-step .colwizard-progress-num {
    width: 1.4rem;
    height: 1.4rem;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--app-surface);
    border: 1px solid var(--app-border);
    font-size: 0.75rem;
}

.colwizard-progress-step.is-current {
    border-color: var(--app-primary);
    color: var(--app-primary);
    background: var(--app-surface);
}

.colwizard-progress-step.is-current .colwizard-progress-num {
    background: var(--app-primary);
    border-color: var(--app-primary);
    color: #ffffff;
}

.colwizard-progress-step.is-done {
    color: var(--app-text-soft);
    cursor: pointer;
}

.colwizard-progress-step.is-done .colwizard-progress-num {
    background: var(--app-success-bg, var(--app-surface));
    color: var(--app-success-text, var(--app-text-soft));
}

.colwizard-panel {
    display: none;
}

.colwizard-panel.is-active {
    display: block;
}

.colwizard-choice-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 1rem;
}

.colwizard-choice {
    position: relative;
    display: block;
    margin: 0;
    cursor: pointer;
    border: 2px solid var(--app-border);
    border-radius: var(--app-radius-lg);
    overflow: hidden;
    background: var(--app-surface);
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.colwizard-choice input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.colwizard-choice:hover {
    border-color: var(--app-border-hover);
}

.colwizard-choice:has(input:checked) {
    border-color: var(--app-primary);
    box-shadow: 0 0 0 0.2rem color-mix(in srgb, var(--app-primary) 18%, transparent);
}

.colwizard-choice:has(input:focus-visible) {
    border-color: var(--app-primary);
}

.colwizard-choice.is-disabled {
    cursor: not-allowed;
    opacity: 0.55;
}

.colwizard-choice img {
    width: 100%;
    display: block;
    aspect-ratio: 4 / 5;
    object-fit: cover;
}

.colwizard-choice-caption {
    padding: 0.5rem 0.75rem;
    text-align: center;
}

/* Card pose (passo 5): gli sketch sono 2:3 e l'inquadratura È il messaggio
   — niente crop 4:5, si mostra il disegno intero su fondo bianco. */
.colwizard-choice--pose img {
    aspect-ratio: 2 / 3;
    object-fit: contain;
    background: #ffffff;
}

/* Card di scelta senza immagine (es. "Nessuna location"): placeholder con
   icona, stesso ingombro 4:5 delle card con foto per allineare la griglia. */
.colwizard-choice-noimg {
    width: 100%;
    aspect-ratio: 4 / 5;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--app-surface-muted);
    color: var(--app-muted);
    font-size: 2.4rem;
}

.colwizard-choice-caption strong {
    display: block;
    color: var(--app-heading);
    font-size: 0.9rem;
}

.colwizard-choice-caption span {
    display: block;
    color: var(--app-muted);
    font-size: 0.78rem;
}

/* Card di scelta solo testo (sesso, pose): niente immagine, padding pieno. */
.colwizard-choice--text {
    padding: 1rem 1.1rem;
}

.colwizard-choice--text .colwizard-choice-caption {
    padding: 0;
    text-align: left;
}

/* Gruppo opzione outfit: tavola esplicativa + varianti a pillola. */
.colwizard-outfit-group {
    border: 1px solid var(--app-border);
    border-radius: var(--app-radius-lg);
    background: var(--app-surface);
    padding: 1rem 1.1rem;
}

.colwizard-outfit-group img {
    width: 100%;
    display: block;
    border-radius: var(--app-radius);
    border: 1px solid var(--app-border);
    margin-bottom: 0.75rem;
    background: #ffffff;
}

.colwizard-outfit-variants {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.colwizard-pill {
    position: relative;
    display: inline-flex;
    align-items: center;
    margin: 0;
    cursor: pointer;
    border: 1.5px solid var(--app-border);
    border-radius: var(--app-radius-pill);
    background: var(--app-surface-muted);
    color: var(--app-text-soft);
    padding: 0.35rem 0.9rem;
    font-size: 0.85rem;
    font-weight: 600;
    transition: border-color 0.15s ease, background-color 0.15s ease, color 0.15s ease;
}

.colwizard-pill input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.colwizard-pill:hover {
    border-color: var(--app-border-hover);
}

.colwizard-pill:has(input:checked) {
    border-color: var(--app-primary);
    background: var(--app-primary);
    color: #ffffff;
}

/* Passo 8: modalità di generazione — pillole impilate a tutta larghezza. */
.colwizard-profile-list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.colwizard-pill--profile {
    width: 100%;
    justify-content: flex-start;
}

.colwizard-pill--profile strong {
    margin-right: 0.3rem;
}

/* Passo 7: card upload tessuto. Stessa geometria delle card immagine
   (placeholder 4:5), bordo tratteggiato per comunicare "drop zone";
   .is-selected replica lo stato :has(input:checked) delle card radio
   (il file input non è un radio), .is-dragover il feedback del drag. */
.colwizard-choice--upload {
    border-style: dashed;
}

.colwizard-choice--upload input[type="file"] {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.colwizard-upload-placeholder {
    width: 100%;
    aspect-ratio: 4 / 5;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--app-surface-muted);
    color: var(--app-muted);
    font-size: 2.4rem;
}

.colwizard-choice--upload img {
    width: 100%;
    display: block;
    aspect-ratio: 4 / 5;
    object-fit: cover;
}

.colwizard-choice--upload.is-selected {
    border-style: solid;
    border-color: var(--app-primary);
    box-shadow: 0 0 0 0.2rem color-mix(in srgb, var(--app-primary) 18%, transparent);
}

.colwizard-choice--upload.is-dragover {
    border-color: var(--app-primary);
    background: color-mix(in srgb, var(--app-primary) 8%, var(--app-surface));
}

.colwizard-summary {
    margin: 0;
}

.colwizard-summary dt {
    color: var(--app-muted);
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.colwizard-summary dd {
    color: var(--app-heading);
    margin-bottom: 0.6rem;
}

/* Rinomina inline: il form ha .d-flex (display:flex !important di Bootstrap),
   che vince contro l'attributo [hidden] (display:none) — stesso scontro di
   specificità di .colwizard-nav [hidden]. Senza questo il form di rinomina
   resterebbe sempre visibile accanto al titolo (cramped su mobile). */
.col-rename-form[hidden] {
    display: none !important;
}

.colwizard-nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    margin-top: 1.75rem;
}

/* I bottoni nav del wizard si nascondono con [hidden]: .d-none di Bootstrap
   perde contro il display:flex !important di .btn-ui (stessa specificità,
   questo file carica dopo). Qui 0,1,1 + posizione in coda: vince sempre. */
.colwizard-nav [hidden] {
    display: none !important;
}

/* Mobile: sotto i 576px .btn-ui prende width:100% ma resta white-space:nowrap;
   al passo finale (Indietro + Genera capo affiancati, testo che si allunga in
   "Generazione in corso…" durante il submit) il bottone sfonda il bordo destro.
   Affiancati e compressi il testo andrebbe a capo in colonnine illeggibili:
   sotto i 576px i bottoni si impilano (azione primaria sopra), ognuno a piena
   riga con il testo su una linea. */
.colwizard-nav .btn-ui {
    min-width: 0;
    white-space: normal;
}

@media (max-width: 575.98px) {
    .colwizard-nav {
        flex-direction: column-reverse;
        align-items: stretch;
    }

    /* Azioni della card capo (Rigenera/Rinomina/Elimina): impilate a piena
       riga. I bottoni distruttivo e rigenera vivono dentro <form> inline, da
       portare a blocco perché il loro .btn-ui (già width:100% su mobile) riempia. */
    .col-card-actions {
        flex-direction: column;
        align-items: stretch;
    }
    .col-card-actions > form {
        display: block;
        width: 100%;
    }
    .col-card-actions > form > .btn-ui,
    .col-card-actions > .btn-ui {
        width: 100%;
    }

    /* Rinomina inline: su mobile l'input va a piena riga, Salva e annulla
       scendono sotto affiancati invece di stringere tutto su una sola linea. */
    .col-rename-form {
        flex-wrap: wrap;
    }
    .col-rename-form > input {
        flex: 1 1 100%;
    }
}

/* Passo 2: scelta sesso — card colorate (azzurro uomo, rosa donna) con
   icona tonda. L'accent vive in --gender-accent così le regole di stato
   (hover/checked) restano uniche per entrambe le card. */
.colwizard-choice--gender {
    --gender-accent: var(--app-primary);
    display: flex;
    align-items: center;
    gap: 0.85rem;
    border-color: color-mix(in srgb, var(--gender-accent) 45%, var(--app-border));
    background: color-mix(in srgb, var(--gender-accent) 8%, var(--app-surface));
}

.colwizard-choice--gender-male {
    --gender-accent: #3d9fdb;
}

.colwizard-choice--gender-female {
    --gender-accent: #e87aa8;
}

.colwizard-gender-icon {
    width: 2.6rem;
    height: 2.6rem;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    background: var(--gender-accent);
    color: #ffffff;
    font-size: 1.3rem;
}

/* Stesse specificità delle regole base più sopra: vincono per posizione. */
.colwizard-choice--gender:hover {
    border-color: var(--gender-accent);
}

.colwizard-choice--gender:has(input:checked) {
    border-color: var(--gender-accent);
    box-shadow: 0 0 0 0.2rem color-mix(in srgb, var(--gender-accent) 22%, transparent);
}

.colwizard-choice--gender:has(input:focus-visible) {
    border-color: var(--gender-accent);
}

/* Passi 3-4: griglie con immagini — card più grandi su desktop, sempre
   due colonne su telefono (con auto-fill un viewport stretto degenererebbe
   in una colonna sola con immagine gigante). */
.colwizard-choice-grid--media {
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
}

/* Passo 2: card sesso più grandi dove lo schermo lo consente; su viewport
   stretti si impilano (sono card testuali, una colonna va benissimo). */
.colwizard-choice-grid--gender {
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
}

.colwizard-choice-grid--gender .colwizard-choice--gender {
    padding: 1.4rem 1.5rem;
}

.colwizard-choice-grid--gender .colwizard-gender-icon {
    width: 3.2rem;
    height: 3.2rem;
    font-size: 1.6rem;
}

.colwizard-choice-grid--gender .colwizard-choice-caption strong {
    font-size: 1.05rem;
}

@media (max-width: 575.98px) {
    .colwizard-choice-grid--media {
        grid-template-columns: repeat(2, 1fr);
        gap: 0.75rem;
    }
}