/* =========================================================================
   Prezzly — overlay di rebrand sul design system telaio (telaio-theme.css).
   Caricato DOPO telaio-theme.css: conserva struttura ed eleganza del sistema,
   allinea il colore primario all'indaco Prezzly (#4f46e5) e aggiunge alcuni
   helper locali (wrapper pagina, flash, card cliccabili).
   ========================================================================= */

:root {
    /* Ramp indaco Prezzly (scala Tailwind indigo; 600 = brand #4f46e5) */
    --t-color-indigo-50:  #EEF2FF;
    --t-color-indigo-100: #E0E7FF;
    --t-color-indigo-200: #C7D2FE;
    --t-color-indigo-300: #A5B4FC;
    --t-color-indigo-400: #818CF8;
    --t-color-indigo-500: #6366F1;
    --t-color-indigo-600: #4F46E5;
    --t-color-indigo-700: #4338CA;
    --t-color-indigo-800: #3730A3;
    --t-color-indigo-900: #312E81;
}

/* Brand nella topbar area riservata */
.t-account-shell__brand-dot  { background: var(--t-color-indigo-500) !important; }
.t-account-shell__brand-text { font-weight: 800; letter-spacing: -0.02em; }
.t-account-shell__brand-tld  { color: var(--t-color-indigo-300); }

/* Wrapper contenuto delle pagine area riservata */
.pz-page { padding: 1.5rem clamp(1rem, 3vw, 2rem) 3rem; }
.pz-page__head {
    display: flex; flex-wrap: wrap; gap: 0.75rem;
    align-items: center; justify-content: space-between;
    margin-bottom: 1.25rem;
}
.pz-page__actions { display: flex; gap: 0.5rem; flex-wrap: wrap; align-items: center; }

/* Flash messages */
.pz-flash {
    padding: 0.75rem 1rem; margin-bottom: 1rem;
    border-radius: var(--t-radius-md);
    border-left: 3px solid var(--t-color-gray-400);
    background: var(--t-bg-subtle); color: var(--t-text-primary);
    font-size: 0.9rem;
}
.pz-flash--success { border-left-color: #16a34a; background: #f0fdf4; color: #14532d; }
.pz-flash--error   { border-left-color: #dc2626; background: #fef2f2; color: #7f1d1d; }
.pz-flash--warning { border-left-color: #d97706; background: #fffbeb; color: #78350f; }
.pz-flash--info    { border-left-color: #2563eb; background: #eff6ff; color: #1e3a8a; }

/* Card cliccabile (link che avvolge una card) */
.t-card--clickable { text-decoration: none; color: inherit; display: block; }

/* ============================================================
   Dashboard merchant — statistiche (KPI, grafici SVG, tabelle)
   Grafici SVG server-rendered in Twig (zero JS: CSP-safe).
   ============================================================ */

/* Griglia a due colonne responsive (grafici e tabelle affiancate) */
.pz-dash-cols {
    display: grid;
    gap: 1rem;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
}

/* Mini bar-chart "Andamento 30 giorni" */
.pz-trend { min-width: 0; }
.pz-trend__label {
    display: flex; align-items: center; gap: 0.4rem;
    font-size: 0.85rem; font-weight: 600;
    color: var(--t-text-primary, #0f172a);
    margin: 0 0 0.5rem;
}
.pz-trend__dot {
    width: 0.6rem; height: 0.6rem; border-radius: 999px; display: inline-block;
}
.pz-trend__dot--views       { background: var(--t-color-indigo-600, #4f46e5); }
.pz-trend__dot--redemptions { background: var(--t-color-emerald-500, #10b981); }
.pz-trend__dot--clickouts   { background: #c5552d; }
.pz-trend__svg {
    display: block; width: 100%; height: 120px;
    background: var(--t-bg-subtle, #f8fafc);
    border-radius: var(--t-radius-md, 8px);
}
.pz-trend__bar--views       { fill: var(--t-color-indigo-600, #4f46e5); }
.pz-trend__bar--redemptions { fill: var(--t-color-emerald-500, #10b981); }
.pz-trend__bar--clickouts   { fill: #c5552d; }
.pz-trend__axis {
    display: flex; justify-content: space-between;
    font-size: 0.75rem; color: var(--t-text-secondary, #64748b);
    margin-top: 0.25rem;
}
.pz-trend__empty {
    font-size: 0.8rem; font-style: italic;
    color: var(--t-text-secondary, #64748b);
    margin: 0.35rem 0 0;
}

/* Stelle rating nelle tabelle recensioni */
.pz-stars { color: #f59e0b; letter-spacing: 0.1em; white-space: nowrap; }

/* ------------------------------------------------------------------
   Rifinitura form area merchant (2026-06-11).
   Telaio presuppone un reset border-box globale che nell'app non c'e':
   senza, height 44px + padding 24px + bordi = input da 70px.
   ------------------------------------------------------------------ */
.t-form-control,
.t-form select,
.t-form textarea {
    box-sizing: border-box;
}
.t-form textarea.t-form-control {
    /* Le textarea non devono essere schiacciate al min-height degli input. */
    height: auto;
    min-height: 7rem;
}

/* Respiro verticale: card del form separate, campi con gap coerente. */
.t-form {
    display: grid;
    gap: 1.25rem;
}
.t-form .t-card__body {
    display: grid;
    gap: 1rem;
}
.t-form .t-section-heading {
    margin-bottom: 0;
}
.t-form .t-section-heading + .t-form-help {
    margin-top: -0.5rem;
}

/* Riga indirizzo a 3 colonne (CAP stretto, citta' ampia, provincia stretta). */
.pz-form-row-3 {
    display: grid;
    grid-template-columns: 9rem 1fr 7rem;
    gap: 1rem;
}

/* Orari: editor a fasce per giorno, con etichette Mattina/Pomeriggio.
   Ogni giorno e' una colonna verticale: nome giorno, toggle rapidi, fasce. */
.pz-hours-editor {
    display: grid;
    gap: 0.25rem;
    margin-bottom: 1rem;
}
.pz-hours-editor__day {
    border: 0;
    margin: 0;
    padding: 0.6rem 0;
    border-top: 1px solid var(--t-border-subtle, #e2e8f0);
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}
.pz-hours-editor__day legend {
    margin: 0;
    padding: 0;
    font-weight: 600;
}
/* Toggle rapidi per giorno (Continuato / Spezzato / 24h / Chiuso). */
.pz-hours-editor__quick {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
}
/* Le due fasce affiancate; vanno a capo su schermi stretti. */
.pz-hours-editor__slots {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 1.5rem;
}
.pz-hours-editor__range {
    display: flex;
    align-items: center;
    gap: 0.4rem;
}
.pz-hours-editor__range-name {
    min-width: 5.5rem;
    font-size: 0.85rem;
    color: var(--t-text-muted, #64748b);
}
.pz-hours-editor__range input[type='time'] {
    max-width: 8.5rem;
}
.pz-hours-editor__legacy {
    margin: 0;
}

/* Editor FAQ del profilo merchant: righe ripetibili. */
.pz-faq-editor {
    display: grid;
    gap: 0.75rem;
    margin-bottom: 0.75rem;
}
.pz-faq-editor__item {
    border: 1px solid var(--t-border-subtle, #e2e8f0);
    border-radius: 8px;
    margin: 0;
    padding: 0.75rem;
}

/* FAQ pubbliche sulla scheda merchant: accordion nativo <details>. */
.pz-faq {
    display: grid;
    gap: 0.5rem;
}
.pz-faq__item {
    border-bottom: 1px solid var(--t-border-subtle, #e2e8f0);
    padding-bottom: 0.5rem;
}
.pz-faq__question {
    cursor: pointer;
    font-weight: 600;
}
.pz-faq__answer {
    margin-top: 0.4rem;
    color: var(--t-text-muted, #475569);
}

/* Thread risposte nell'inbox messaggi merchant. */
.pz-thread {
    display: grid;
    gap: 0.5rem;
    margin: 0.5rem 0;
    padding-left: 0.75rem;
    border-left: 3px solid var(--t-border-subtle, #e2e8f0);
}
.pz-thread__reply {
    background: var(--t-surface-subtle, #f8fafc);
    border-radius: 8px;
    padding: 0.5rem 0.75rem;
}

@media (max-width: 700px) {
    .pz-form-row-3 {
        grid-template-columns: 1fr;
    }
}

/* Barra ricerca + filtri della lista prodotti: toolbar su UNA riga.
   Il tema dà width:100% ai form control: qui li riportiamo a larghezza
   automatica così non si impilano a tutta larghezza. */
.pz-products-filters {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    align-items: center;
    margin: 1rem 0 .5rem;
}
.pz-products-filters .t-form-control,
.pz-products-filters .t-form-select {
    width: auto;
    margin: 0;
}
.pz-products-filters input[type='search'] { flex: 1 1 18rem; min-width: 12rem; }
.pz-products-filters .t-form-select { flex: 0 0 auto; min-width: 11rem; }

/* ============================================================
   DASHBOARD — DENSITÀ DESKTOP (gestionale, non landing page)
   Tutto scoped a .t-account-main: il sito pubblico resta invariato.
   I target restano ≥44px su touch via @media (pointer: coarse).
   ============================================================ */

/* Area contenuti più compatta su desktop ampi. */
@media (min-width: 1024px) {
    .t-account-main { padding: 1.25rem 1.75rem 2.5rem; }
}

/* Intestazione pagina e alert più compatti. */
.t-account-main .pz-page__head { margin-bottom: 1rem; }
.t-account-main .t-section-heading { margin-bottom: .15rem; }

/* Tabelle dati: righe compatte. La tabella scorre con la PAGINA (nessuno
   scroll verticale interno); il wrapper mantiene solo lo scroll orizzontale
   del tema per gli schermi stretti. */
.t-account-main .t-table tbody td { padding: .45rem .6rem; }
.t-account-main .t-table thead th { padding: .5rem .6rem; }

/* Azioni di riga: compatte e su una sola linea (niente wrap = niente righe alte). */
.pz-row-actions { display: flex; gap: .35rem; flex-wrap: nowrap; align-items: center; }
.pz-row-actions .t-btn { white-space: nowrap; }

/* Bottoni compatti SOLO su puntatore fine (desktop): WCAG 2.2 AA (≥24px).
   Su touch (pointer: coarse) restano i 44px del tema. */
@media (pointer: fine) {
    .t-account-main .t-table .t-btn--sm,
    .pz-bulk-bar .t-btn--sm {
        min-height: 30px;
        min-width: auto;
        width: auto;
        padding: .3rem .65rem;
        font-size: .8rem;
    }
    .pz-products-filters .t-btn,
    .pz-products-filters .t-form-select,
    .pz-products-filters input[type='search'] {
        min-height: 34px;
        padding-top: .35rem;
        padding-bottom: .35rem;
    }
}

/* Cella prodotto: thumbnail + nome + brand (scansione visiva del catalogo). */
.pz-prod-cell { display: flex; align-items: center; gap: .6rem; min-width: 0; }
.pz-prod-thumb {
    flex: 0 0 auto;
    width: 40px;
    height: 40px;
    border-radius: 6px;
    overflow: hidden;
    background: var(--t-bg-elevated, #f3f4f6);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
}
.pz-prod-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pz-prod-cell__text { min-width: 0; display: flex; flex-direction: column; line-height: 1.25; }
.pz-prod-cell__name {
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 26ch;
}
.pz-prod-cell__brand { font-size: .72rem; color: var(--t-text-muted, #64748b); }

/* Barra azioni in blocco (cambio canale) sopra la tabella prodotti. */
.pz-bulk-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .6rem;
    padding: .75rem 1rem;
    margin-bottom: .75rem;
    border: 1px solid var(--t-border-subtle, #e2e8f0);
    border-radius: 10px;
    background: var(--t-color-indigo-50, #eef2ff);
}
.pz-bulk-bar__label { font-weight: 600; font-size: .9rem; }
.pz-bulk-bar .t-form-select { width: auto; flex: 0 0 auto; min-width: 13rem; margin: 0; }

/* Selettore categorie del negozio: gruppi scorrevoli a colonne. */
.pz-cat-picker {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
    gap: 1rem;
    max-height: 22rem;
    overflow-y: auto;
    padding: .5rem;
    border: 1px solid var(--t-border-subtle, #e2e8f0);
    border-radius: 10px;
}
.pz-cat-picker__group { border: 0; margin: 0; padding: 0; min-width: 0; }
.pz-cat-picker__group legend {
    font-weight: 700;
    font-size: .85rem;
    padding: 0 0 .25rem;
    color: var(--t-color-indigo-700, #4338ca);
}
.pz-cat-picker__item {
    display: flex;
    align-items: center;
    gap: .45rem;
    padding: .2rem 0;
    font-size: .88rem;
    cursor: pointer;
}

/* Inbox messaggi merchant: i non letti hanno il bordo evidenziato. */
.pz-message--unread {
    border-left: 4px solid var(--t-color-indigo-500, #6366f1);
}

/* Editor caratteristiche (attributi di categoria) nel profilo merchant. */
.pz-attr-editor {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr));
    gap: 1rem 1.25rem;
    align-items: start;
}
.pz-attr-field { margin: 0; min-width: 0; }
.pz-attr-multi {
    border: 1px solid var(--t-border-subtle, #e2e8f0);
    border-radius: 10px;
    padding: .6rem .75rem;
    min-width: 0;
}
.pz-attr-multi > legend {
    font-weight: 700;
    font-size: .85rem;
    padding: 0 .25rem;
    color: var(--t-color-indigo-700, #4338ca);
}
.pz-attr-options {
    display: flex;
    flex-wrap: wrap;
    gap: .35rem .9rem;
}
.pz-attr-check {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    font-size: .88rem;
    cursor: pointer;
}
.pz-attr-cat-group + .pz-attr-cat-group { margin-top: 1rem; }
.pz-attr-cat-group__title {
    font-size: .8rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--t-color-indigo-700, #4338ca);
    margin: 0 0 .5rem;
}

/* Scelta canale coupon (online / negozio / entrambi): radio card compatte. */
.pz-channel-options {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
    gap: 0.75rem;
}
.pz-channel-option {
    display: flex;
    gap: 0.6rem;
    align-items: flex-start;
    padding: 0.75rem;
    border: 1px solid var(--t-border-subtle, #e2e8f0);
    border-radius: 10px;
    cursor: pointer;
}
.pz-channel-option:has(input:checked) {
    border-color: var(--t-color-indigo-600, #4f46e5);
    background: var(--t-color-indigo-50, #eef2ff);
}
.pz-channel-option input {
    margin-top: 0.2rem;
}
.pz-channel-option span {
    display: grid;
    gap: 0.15rem;
}
.pz-channel-option small {
    color: var(--t-text-secondary, #64748b);
}

/* Dettagli esito validazione coupon al banco (dl a griglia compatta). */
.pz-validate-details {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
    gap: 0.75rem 1.5rem;
    margin: 1rem 0;
}
.pz-validate-details dt {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--t-text-secondary, #64748b);
    margin: 0 0 0.15rem;
}
.pz-validate-details dd {
    margin: 0;
    font-weight: 600;
}
.pz-validate-details code {
    font-size: 1.05em;
    letter-spacing: 0.06em;
}