/* ===========================================================================
 * WhyWine Admin — site.css
 *
 * Regola assoluta: nessun colore hardcoded nei componenti. Usare sempre var(--ww-*).
 * Vedi GUIDA_SVILUPPO_ADMIN.md § 4 per i dettagli del theming.
 * =========================================================================== */


/* ---------- Variabili CSS ----------------------------------------------------
 * I valori in :root sono FALLBACK: vengono sovrascritti a runtime da
 * AppConfigService.GetThemeCssVariables() (iniezione in App.razor PRIMA
 * di questo file). Le variabili --ww-state-* invece sono fisse: rappresentano
 * colori semantici (success / neutral / warning / danger) non legati al brand.
 * --------------------------------------------------------------------------- */

:root {
    /* Tema runtime — fallback. AppConfigService li sovrascrive a runtime. */
    --ww-primary:               #B8143F;
    --ww-primary-hover:         #A51138;
    --ww-primary-text:          #ffffff;
    --ww-secondary:             #F59E0B;
    --ww-accent:                #F9FAFB;
    --ww-sidebar-bg:            #ffffff;
    --ww-sidebar-text:          #374151;
    --ww-sidebar-active-bg:     #B8143F;
    --ww-sidebar-active-text:   #ffffff;
    --ww-app-bg:                #F9FAFB;

    /* Variabili semantiche — fisse, non derivate dal tema. */
    --ww-state-success-bg:      #D1FAE5;
    --ww-state-success-text:    #065F46;
    --ww-state-neutral-bg:      #E5E7EB;
    --ww-state-neutral-text:    #6B7280;
    --ww-state-warning-bg:      #F59E0B;
    --ww-state-warning-text:    #ffffff;
    --ww-state-danger-bg:       #FEE2E2;
    --ww-state-danger-text:     #991B1B;

    --ww-bg:                    #F8F9FA;
    --ww-border:                #E5E7EB;
    --ww-border-light:          #F3F4F6;
    --ww-border-radius:         8px;
    --ww-text-primary:          #111827;
    --ww-text-secondary:        #6B7280;
    --ww-text-disabled:         #9CA3AF;
    --ww-font-weight-bold:      600;
}


/* ---------- Reset / typography di base ------------------------------------- */

html, body {
    margin: 0;
    padding: 0;
    /* Manrope è il font ufficiale del progetto WhyWine. Il fallback resta su system fonts
       per coprire il periodo di download del web font (display=swap) e l'eventuale fallimento
       di rete. */
    font-family: 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    color: var(--ww-text-primary);
    background-color: var(--ww-app-bg);
}

/* Form elements e bottoni nativi non ereditano font-family di default — forzo l'eredità
   per uniformare tutto al body. */
input, button, textarea, select {
    font-family: inherit;
}

/* Componenti DevExpress (DxGrid, DxPager, ecc.) impongono internamente Segoe UI / system fonts.
   Override globale per uniformare al font del progetto. Specificità alta richiede !important. */
.dxbl-grid,
.dxbl-grid *,
.dxbl-pager,
.dxbl-pager * {
    font-family: 'Manrope', -apple-system, BlinkMacSystemFont, sans-serif !important;
}

* {
    box-sizing: border-box;
}

a {
    color: inherit;
    text-decoration: none;
}

ul {
    list-style: none;
    margin: 0;
    padding: 0;
}


/* ---------- Layout principale (MainLayout) --------------------------------- */

.ww-app {
    display: flex;
    min-height: 100vh;
}

.ww-sidebar {
    width: 250px;
    flex-shrink: 0;
    background-color: var(--ww-sidebar-bg);
    border-right: 1px solid var(--ww-border);
    display: flex;
    flex-direction: column;
    position: sticky;
    top: 0;
    height: 100vh;
    overflow-y: auto;
}

.ww-brand {
    padding: 24px 20px 20px 20px;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 12px;
}

.ww-brand-logo {
    /* Dimensione del logo nella sidebar. Il PNG ha proporzioni 195x298 (verticale)
       — con height 40 viene larghezza ~26. Width auto preserva l'aspect ratio. */
    height: 40px;
    width: auto;
    flex-shrink: 0;
    /* La classe .ww-logo--on-light (filter: invert) è in site.css fondo-pagina. */
}

.ww-brand-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.ww-brand-name {
    font-size: 22px;
    font-weight: 700;
    color: var(--ww-primary);
    line-height: 1;
}

.ww-brand-subtitle {
    font-size: 12px;
    color: var(--ww-text-secondary);
}

.ww-main {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-width: 0;
}


/* ---------- Header --------------------------------------------------------- */

.ww-header {
    height: 64px;
    background-color: #ffffff;
    border-bottom: 1px solid var(--ww-border);
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding: 0 24px;
}

/* Le regole .ww-user / .ww-avatar / .ww-user-info / .ww-user-name / .ww-user-role
   non sono più globali: sono nel componente Shared/UserHeader.razor (CSS scoped).
   Tenute qui in passato perché il markup viveva direttamente in MainLayout. */


/* ---------- Area contenuto ------------------------------------------------- */

.ww-content {
    flex: 1;
    padding: 32px;
    background-color: var(--ww-app-bg);
}


/* ---------- NavMenu (in sidebar — globale per parent boundary) ------------- */

.ww-nav {
    flex: 1;
    padding: 8px 12px;
    /* flex column è necessario per consentire al .ww-nav-footer di stare in fondo
       tramite margin-top: auto ("Esci" sempre attaccato al bottom della sidebar). */
    display: flex;
    flex-direction: column;
}

.ww-nav-list {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.ww-nav-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 14px;
    border-radius: 8px;
    color: var(--ww-sidebar-text);
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: background-color 0.15s ease, color 0.15s ease;
}

.ww-nav-item:hover {
    background-color: var(--ww-accent);
}

.ww-nav-item.active {
    background-color: var(--ww-sidebar-active-bg);
    color: var(--ww-sidebar-active-text);
}

.ww-nav-icon {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.ww-nav-icon svg {
    width: 100%;
    height: 100%;
}

.ww-nav-label {
    flex: 1;
}

.ww-nav-badge {
    min-width: 22px;
    height: 22px;
    padding: 0 7px;
    border-radius: 11px;
    background-color: var(--ww-state-warning-bg);
    color: var(--ww-state-warning-text);
    font-size: 12px;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* Sul item attivo, il badge mantiene il proprio colore (warning) per leggibilit\u00e0. */
.ww-nav-item.active .ww-nav-badge {
    background-color: var(--ww-state-warning-bg);
    color: var(--ww-state-warning-text);
}

/* Footer della sidebar — contiene la voce "Esci".
   margin-top: auto la spinge automaticamente in fondo qualunque sia la lunghezza
   della lista voci sopra. Sopra c'è un divisore sottile che la separa visivamente. */
.ww-nav-footer {
    margin-top: auto;
    padding-top: 8px;
    border-top: 1px solid var(--ww-border-light);
}

.ww-logout-form {
    margin: 0;
}

/* Bottone "Esci" — stilizzato come una voce di menu standard.
   Reset del <button> nativo (background, border, font) e re-applicazione delle
   regole .ww-nav-item per uniformità visiva. Il colore on-hover è quello di danger
   per segnalare semanticamente che è un'azione di uscita/logout. */
.ww-nav-item--logout {
    width: 100%;
    background: transparent;
    border: none;
    font-family: inherit;
    font-size: 14px;
    text-align: left;
}

.ww-nav-item--logout:hover {
    background-color: var(--ww-state-danger-bg);
    color: var(--ww-state-danger-text);
}


/* ---------- LISTA TABELLARE BO — stili condivisi --------------------------
 *
 * Stili usati da TUTTE le pagine di lista tabellare del BO (WineLovers, Wineries,
 * future Ambassadors…). Globali perché condivisi tra più pagine — vedi GUIDA § 4.4.
 * Comprendono: search wrapper full-width, grid card wrapper, bottone azione riga,
 * empty state, skeleton search.
 * --------------------------------------------------------------------------- */

/* Search box full-width con icona lente. */
.ww-search-wrapper {
    position: relative;
    margin-bottom: 16px;
    display: flex;
    align-items: center;
}

.ww-search-icon {
    position: absolute;
    left: 14px;
    width: 18px;
    height: 18px;
    color: var(--ww-text-secondary);
    pointer-events: none;
    display: inline-flex;
}

.ww-search-icon svg {
    width: 100%;
    height: 100%;
}

.ww-search-input {
    width: 100%;
    height: 44px;
    padding: 0 16px 0 44px;
    font-size: 14px;
    color: var(--ww-text-primary);
    background-color: #ffffff;
    border: 1px solid var(--ww-border);
    border-radius: 10px;
    outline: none;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.ww-search-input::placeholder {
    color: var(--ww-text-secondary);
}

.ww-search-input:hover {
    border-color: var(--ww-text-disabled);
}

.ww-search-input:focus {
    border-color: var(--ww-primary);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--ww-primary) 12%, transparent);
}

/* Card che wrappa la DxGrid + il pager esterno. */
.ww-grid-card {
    background-color: #ffffff;
    border: 1px solid var(--ww-border);
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03);
}

/* Bottone azione (icona occhio) sulla riga. */
.ww-grid-action-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    padding: 0;
    border: none;
    background: transparent;
    color: var(--ww-primary);
    border-radius: 8px;
    cursor: pointer;
    transition: background-color 0.15s ease, opacity 0.15s ease;
}

.ww-grid-action-btn:hover:not(:disabled) {
    background-color: color-mix(in srgb, var(--ww-primary) 10%, #ffffff);
}

.ww-grid-action-btn:disabled {
    opacity: 0.35;
    cursor: not-allowed;
}

.ww-grid-action-btn svg {
    width: 18px;
    height: 18px;
}

/* Stato vuoto ("Nessuna cantina trovata..."). */
.ww-grid-empty {
    margin: 0;
    padding: 32px 24px;
    text-align: center;
    font-size: 14px;
    color: var(--ww-text-secondary);
}

/* Skeleton del search input (rettangolo full-width). */
.ww-sk--search {
    width: 100%;
    height: 44px;
    border-radius: 10px;
}


/* ---------- DETTAGLIO BO — stili condivisi ------------------------------
 *
 * Stili usati da TUTTE le pagine di dettaglio del BO (WineLoverDetailPage,
 * WineryDetailPage, future Ambassadors…). Globali perché condivisi tra più
 * pagine — vedi GUIDA § 4.4. Promossi da WineLoverDetailPage al primo riuso
 * effettivo (Step 11 dettaglio cantina).
 * --------------------------------------------------------------------------- */

/* Back link */
.ww-detail-back {
    margin-bottom: 8px;
}

.ww-back-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: transparent;
    border: none;
    color: var(--ww-text-secondary);
    font-size: 14px;
    cursor: pointer;
    padding: 4px 0;
    font-family: inherit;
    transition: color 0.15s ease;
}

.ww-back-link:hover {
    color: var(--ww-primary);
}

.ww-back-link svg {
    width: 16px;
    height: 16px;
}

/* Header pagina dettaglio */
.ww-detail-header {
    margin-bottom: 24px;
}

.ww-detail-header h1 {
    margin: 0 0 4px 0;
    font-size: 28px;
    font-weight: 700;
    color: var(--ww-text-primary);
    line-height: 1.2;
}

.ww-detail-subtitle {
    margin: 0;
    font-size: 14px;
    color: var(--ww-text-secondary);
}

/* Card generica (info aziendali, stato account, note, ecc.). */
.ww-card {
    background-color: #ffffff;
    border: 1px solid var(--ww-border);
    border-radius: 12px;
    padding: 24px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03);
}

.ww-card-title {
    margin: 0 0 20px 0;
    font-size: 18px;
    font-weight: 600;
    color: var(--ww-text-primary);
}

/* Griglia campi dentro le card. Default: 2 colonne, override .ww-fields-2col. */
.ww-detail-fields {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px 32px;
}

@media (max-width: 700px) {
    .ww-detail-fields {
        grid-template-columns: 1fr;
    }
}

.ww-detail-field {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

.ww-detail-label {
    font-size: 12px;
    color: var(--ww-text-secondary);
    line-height: 1.4;
}

.ww-detail-value {
    font-size: 15px;
    color: var(--ww-text-primary);
    line-height: 1.4;
    word-break: break-word;
}

/* Textarea editabile (Note, Contenuti Editoriali). */
.ww-detail-textarea {
    width: 100%;
    padding: 12px 14px;
    font-family: inherit;
    font-size: 14px;
    color: var(--ww-text-primary);
    background-color: #ffffff;
    border: 1px solid var(--ww-border);
    border-radius: 10px;
    resize: vertical;
    min-height: 100px;
    outline: none;
    margin-top: 6px;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.ww-detail-textarea:focus {
    border-color: var(--ww-primary);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--ww-primary) 12%, transparent);
}

/* Riga azioni (bottone Salva + feedback) sotto le card editabili. */
.ww-detail-actions {
    margin-top: 16px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 16px;
}

.ww-detail-feedback {
    font-size: 13px;
}

.ww-detail-feedback.is-success {
    color: var(--ww-state-success-text);
}

.ww-detail-feedback.is-error {
    color: var(--ww-state-danger-text);
}

/* Bottone primary (Salva Note, Salva Contenuti). */
.ww-btn-primary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 10px 20px;
    font-size: 14px;
    font-weight: 600;
    color: var(--ww-primary-text);
    background-color: var(--ww-primary);
    border: none;
    border-radius: 8px;
    cursor: pointer;
    font-family: inherit;
    transition: background-color 0.15s ease;
}

.ww-btn-primary:hover:not(:disabled) {
    background-color: var(--ww-primary-hover);
}

.ww-btn-primary:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

/* Empty state generico in card di dettaglio. */
.ww-detail-empty {
    margin: 0;
    padding: 24px;
    text-align: center;
    color: var(--ww-text-secondary);
}

/* Empty state inline (per card senza dato, es. Ambassador assente, Media assenti). */
.ww-detail-empty-inline {
    margin: 0;
    padding: 12px 0;
    color: var(--ww-text-secondary);
    font-size: 14px;
    font-style: italic;
}


/* ---------- DETTAGLIO BO — layout 2 colonne (main + sidebar) ----------
 *
 * Promosse da WineryDetailPage.razor.css a globali al primo riuso effettivo
 * (ProductDetailPage). Il prefisso "winery-" nei nomi resta per non toccare
 * il markup già esistente — ⚠️ rename a `.ww-detail-grid` da fare a un
 * prossimo passaggio di pulizia, includerà anche WineryDetailPage.razor.
 * ----------------------------------------------------------------------- */

.ww-winery-detail-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 320px;
    gap: 24px;
    align-items: start;
}

.ww-winery-detail-main {
    display: flex;
    flex-direction: column;
    gap: 24px;
    min-width: 0;
}

.ww-winery-detail-side {
    display: flex;
    flex-direction: column;
    gap: 24px;
    min-width: 0;
}

@media (max-width: 1100px) {
    .ww-winery-detail-grid {
        grid-template-columns: 1fr;
    }
}

/* Override del numero di colonne nei .ww-detail-fields. Default = 2 colonne (già in .ww-detail-fields
   sopra), .ww-fields-2col è idempotente; .ww-field-full forza un campo a tutta riga. */
.ww-fields-2col {
    grid-template-columns: 1fr 1fr;
}

.ww-field-full {
    grid-column: 1 / -1;
}

@media (max-width: 700px) {
    .ww-fields-2col {
        grid-template-columns: 1fr;
    }
}


/* ---------- DETTAGLIO BO — form controls (input, select compatte, riga cambio stato) ----------
 *
 * Globali perché condivisi tra dettaglio Cantina e dettaglio Vino. Coerenti come
 * dimensioni e bordi con .ww-detail-textarea e con i pattern del progetto.
 * ------------------------------------------------------------------------------------------ */

/* Input singolo testo (es. Nome del vino). Coerente nel look con .ww-status-select. */
.ww-detail-input {
    width: 100%;
    height: 38px;
    padding: 0 12px;
    margin-top: 6px;
    font-family: inherit;
    font-size: 14px;
    color: var(--ww-text-primary);
    background-color: #ffffff;
    border: 1px solid var(--ww-border);
    border-radius: 8px;
    outline: none;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.ww-detail-input:hover:not(:disabled) {
    border-color: var(--ww-text-disabled);
}

.ww-detail-input:focus-visible,
.ww-detail-input:focus {
    border-color: var(--ww-primary);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--ww-primary) 18%, transparent);
}

.ww-detail-input:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

/* Riga visibilità (toggle + label accanto). */
.ww-toggle-row {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 6px;
}

.ww-toggle-label {
    font-size: 14px;
    color: var(--ww-text-primary);
}

/* Riga "Cambia stato": select + bottone Applica affiancati. */
.ww-status-change-row {
    display: flex;
    align-items: stretch;
    gap: 8px;
    margin-top: 6px;
}

/* Select HTML nativa stilizzata (Tipo, Annata, Cambio stato). */
.ww-status-select {
    flex: 1;
    min-width: 0;
    height: 38px;
    padding: 0 12px;
    font-family: inherit;
    font-size: 14px;
    color: var(--ww-text-primary);
    background-color: #ffffff;
    border: 1px solid var(--ww-border);
    border-radius: 8px;
    outline: none;
    cursor: pointer;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.ww-status-select:hover:not(:disabled) {
    border-color: var(--ww-text-disabled);
}

.ww-status-select:focus-visible {
    border-color: var(--ww-primary);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--ww-primary) 18%, transparent);
}

.ww-status-select:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

/* Variante compact del bottone primary (38px) per stare a fianco di una select. */
.ww-status-change-row > .ww-btn-compact {
    padding: 0 16px;
    height: 38px;
    flex-shrink: 0;
}


/* ---------- DETTAGLIO BO — card Media (griglia immagini read-only) ----------
 *
 * Usata sia dal dettaglio cantina (WineryFile) sia dal dettaglio vino (ProductFile).
 * Read-only: mostra le immagini in griglia responsive con caption sotto (Type label
 * o filename in fallback).
 * ------------------------------------------------------------------------------ */

.ww-detail-media-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 12px;
}

.ww-detail-media-item {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.ww-detail-media-item img {
    width: 100%;
    height: 140px;
    object-fit: cover;
    border-radius: 8px;
    border: 1px solid var(--ww-border);
    background: var(--ww-app-bg);
}

.ww-detail-media-caption {
    font-size: 12px;
    color: var(--ww-text-secondary);
    text-align: center;
}


/* ---------- Toggle switch (componente Shared) ----------------------------
 *
 * Globale in site.css perché il componente è usato dentro DxGrid CellDisplayTemplate
 * (lista Cantine → colonna Visibilità) attraversando boundary di RenderFragment
 * dove il CSS scoped non si propaga. Stessa regola dello StatusBadge.
 * Pattern checkbox HTML nascosto + track/thumb CSS.
 * ----------------------------------------------------------------------- */

.ww-toggle {
    display: inline-flex;
    align-items: center;
    cursor: pointer;
    user-select: none;
}

.ww-toggle.is-disabled {
    cursor: not-allowed;
    opacity: 0.45;
}

.ww-toggle-input {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0,0,0,0);
    white-space: nowrap;
    border: 0;
}

/* Track — il binario su cui scorre il pollice. Grigio quando OFF, primary quando ON. */
.ww-toggle-track {
    position: relative;
    width: 40px;
    height: 22px;
    background-color: var(--ww-state-neutral-bg);
    border-radius: 11px;
    transition: background-color 0.18s ease;
    flex-shrink: 0;
}

.ww-toggle-thumb {
    position: absolute;
    top: 3px;
    left: 3px;
    width: 16px;
    height: 16px;
    background-color: #ffffff;
    border-radius: 50%;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
    transition: transform 0.18s ease;
}

/* Stato ON — input:checked attiva i selettori adiacenti. */
.ww-toggle-input:checked + .ww-toggle-track {
    background-color: var(--ww-primary);
}

.ww-toggle-input:checked + .ww-toggle-track .ww-toggle-thumb {
    transform: translateX(18px);
}

/* Focus visibile da tastiera — anello bordeaux sottile attorno al track. */
.ww-toggle-input:focus-visible + .ww-toggle-track {
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--ww-primary) 22%, transparent);
}


/* ---------- Status badge (componente Shared, Step 06+) -------------------- */

.ww-status-badge {
    display: inline-flex;
    align-items: center;
    padding: 4px 10px;
    border-radius: 12px;
    font-size: 12px;
    font-weight: 500;
    line-height: 1;
}

.ww-status-success { background-color: var(--ww-state-success-bg); color: var(--ww-state-success-text); }
.ww-status-neutral { background-color: var(--ww-state-neutral-bg); color: var(--ww-state-neutral-text); }
.ww-status-warning { background-color: var(--ww-state-warning-bg); color: var(--ww-state-warning-text); }
.ww-status-danger  { background-color: var(--ww-state-danger-bg);  color: var(--ww-state-danger-text);  }


/* ---------- LoginLayout (parent boundary — globale obbligatorio) ---------- */

.ww-login-page {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--ww-app-bg);
    padding: 24px;
}

.ww-login-wrapper {
    width: 100%;
    max-width: 420px;
}


/* ---------- Stato "pagina non trovata" (placeholder Step 03) -------------- */

.ww-not-found {
    text-align: center;
    padding: 80px 24px;
    color: var(--ww-text-secondary);
}

.ww-not-found h1 {
    color: var(--ww-text-primary);
    font-size: 24px;
    margin: 0 0 8px 0;
}


/* ---------- Page header (titolo + sottotitolo, comune a tutte le pagine) -- */

.ww-page-header {
    margin-bottom: 24px;
}

.ww-page-header h1 {
    margin: 0 0 4px 0;
    font-size: 24px;
    font-weight: 600;
    color: var(--ww-text-primary);
}

.ww-page-subtitle {
    margin: 0;
    font-size: 14px;
    color: var(--ww-text-secondary);
}


/* ---------- Outline focus su <h1> di pagina (FocusOnNavigate) -------------
 *
 * `Routes.razor` contiene <FocusOnNavigate Selector="h1" />: dopo ogni cambio
 * rotta Blazor imposta programmaticamente tabindex=-1 sul primo <h1> e lo
 * focalizza, in modo che gli screen reader annuncino il titolo della nuova
 * pagina. Il browser però disegna il proprio outline di default — percepito
 * come bug visivo (rettangolo nero attorno al titolo, intermittente perché
 * sparisce al primo click che sposta il focus altrove).
 *
 * Sopprimiamo solo l'outline visivo, mantenendo <FocusOnNavigate> per non
 * degradare l'accessibilità (gli screen reader continuano ad annunciare il
 * nuovo titolo). L'<h1> non è nel tab-order normale (tabindex=-1, focusable
 * ma non in sequenza Tab), quindi nessun utente da tastiera perde indicatori
 * di focus utili.
 *
 * Selettori coperti — censimento di tutti gli <h1> del progetto:
 *   .ww-page-header h1   — Dashboard, WineLoversListPage, WineriesListPage
 *   .ww-detail-header h1 — WineLoverDetailPage, WineryDetailPage
 *   .ww-login-form-title — Login.razor (h1 con classe diretta)
 *   .ww-not-found h1     — Routes.razor <NotFound>
 *
 * Quando si introduce una nuova pagina con <h1>, ricordarsi di aggiungerla
 * qui per non far ricomparire l'outline del browser. Selettore stretto e
 * non globale (`h1:focus`) per non azzerare implicitamente outline su <h1>
 * di terze parti che potrebbero comparire (es. dialog DevExpress, embed). */
.ww-page-header h1:focus,
.ww-page-header h1:focus-visible,
.ww-detail-header h1:focus,
.ww-detail-header h1:focus-visible,
.ww-login-form-title:focus,
.ww-login-form-title:focus-visible,
.ww-not-found h1:focus,
.ww-not-found h1:focus-visible {
    outline: none;
}

/* ---------- DXGRID OVERRIDE (globale per RenderFragment / specificità DX) --
 *
 * I template CellDisplayTemplate attraversano boundary di RenderFragment dove
 * il CSS scoped non si propaga; in più i selettori .dxbl-* hanno alta specificità
 * e richiedono dichiarazioni globali per essere battuti. Pattern allineato a Diane
 * Immobiliare (.dn-grid).
 * ----------------------------------------------------------------------- */

/* Wrapper esterno della grid — rimuove il bordo della grid DX (lo fornisce .ww-grid-card). */
.ww-grid.dxbl-grid {
    width: 100% !important;
    border: none !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

/* Tabella interna — rimuove qualsiasi bordo che DevExpress applica al table/wrapper interno
   e forza la larghezza al 100% del wrapper esterno (altrimenti la grid si dimensiona sul contenuto). */
.ww-grid.dxbl-grid table,
.ww-grid.dxbl-grid .dxbl-grid-table,
.ww-grid.dxbl-grid .dxbl-grid-content {
    width: 100% !important;
    border: none !important;
    border-collapse: separate !important;
    border-spacing: 0 !important;
    background: transparent !important;
}

/* Header colonne — sfondo bianco, capitalize ("Nome" non "NOME"), allineato a sinistra. */
.ww-grid.dxbl-grid .dxbl-grid-header-row th,
.ww-grid.dxbl-grid .dxbl-grid-header-cell {
    background-color: #ffffff !important;
    color: var(--ww-text-secondary) !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
    text-align: left !important;
    border-bottom: 1px solid var(--ww-border) !important;
    border-right: none !important;
    border-left: none !important;
    border-top: none !important;
    padding: 14px 16px !important;
}

/* Contenuto interno della cella header (DevExpress wrappa il caption in span/div). */
.ww-grid.dxbl-grid .dxbl-grid-header-cell-content,
.ww-grid.dxbl-grid .dxbl-grid-header-cell > * {
    text-align: left !important;
    justify-content: flex-start !important;
}

/* Righe dati — DevExpress v25.2 usa tr[data-visible-index]. */
.ww-grid.dxbl-grid tr[data-visible-index] td {
    border-bottom: 1px solid var(--ww-border-light) !important;
    border-right: none !important;
    border-left: none !important;
    border-top: none !important;
    padding: 18px 16px !important;
    vertical-align: middle !important;
    font-size: 14px !important;
    color: var(--ww-text-primary) !important;
    background-color: #ffffff !important;
    transition: background-color 0.15s ease !important;
}

.ww-grid.dxbl-grid tr[data-visible-index]:last-child td {
    border-bottom: none !important;
}

/* Hover riga — sfondo tinta primaria tenue. */
.ww-grid.dxbl-grid tr[data-visible-index]:hover td {
    background-color: color-mix(in srgb, var(--ww-primary) 4%, #ffffff) !important;
}

/* Pager */
.ww-grid .dxbl-pager {
    border-top: 1px solid var(--ww-border-light) !important;
    background-color: transparent !important;
    padding: 12px !important;
}

/*
 * Status-bar / summary di accessibilità — DevExpress aggiunge un'area testuale
 * ("Data grid with N rows and N columns / 0 rows are selected") destinata agli screen
 * reader. Su Fluent Light non sempre è nascosta visivamente, quindi la nascondiamo
 * esplicitamente lasciandola accessibile a tastiera/screen reader via clip.
 * In v25.2 i nomi di classe non sono stabili: copriamo le varianti note.
 */
.ww-grid .dxbl-grid-summary-row,
.ww-grid .dxbl-grid-status-bar,
.ww-grid .dxbl-grid-status-info,
.ww-grid [role="status"],
.ww-grid [aria-live="polite"] {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    margin: -1px !important;
    padding: 0 !important;
    overflow: hidden !important;
    clip: rect(0,0,0,0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}


/* ---------- SKELETON LOADING (globale per evitare FOUC) -------------------
 *
 * Pattern shimmer (gradient animato che scorre da sinistra a destra). Globale in site.css
 * perché il CSS scoped (Admin.styles.css) viene scaricato dal browser DOPO il primo render
 * server-side: se gli skeleton fossero scoped si vedrebbe brevemente un flash di rettangoli
 * non animati prima dell'animazione. Pattern allineato a Diane Immobiliare.
 * ----------------------------------------------------------------------- */

@keyframes ww-shimmer {
    0%   { background-position: -600px 0; }
    100% { background-position:  600px 0; }
}

.ww-sk {
    display: block;
    background: linear-gradient(
        90deg,
        var(--ww-border)        25%,
        var(--ww-border-light)  50%,
        var(--ww-border)        75%
    );
    background-size: 1200px 100%;
    animation: ww-shimmer 1.6s ease-in-out infinite;
    border-radius: 6px;
}

/* Misure standard — ogni elemento ha la sua dimensione coerente con quella reale */
.ww-sk--label    { width: 50%;    height: 13px;  }
.ww-sk--value    { width: 70px;   height: 32px;  margin-top: 4px; }
.ww-sk--icon     { width: 48px;   height: 48px;  border-radius: 10px; flex-shrink: 0; }
.ww-sk--title    { width: 40%;    height: 16px;  margin-bottom: 16px; }
.ww-sk--line-long  { width: 65%;  height: 14px;  }
.ww-sk--line-short { width: 40%;  height: 12px;  }
.ww-sk--time     { width: 60px;   height: 12px;  flex-shrink: 0; }

/* Riga skeleton per la lista attività — stessa struttura della .ww-activity-item reale */
.ww-sk-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 14px 0;
    border-bottom: 1px solid var(--ww-border-light);
}

.ww-sk-row:last-child { border-bottom: none; }

.ww-sk-row-body {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
}


/* ---------- LOGIN — animazioni ed elementi globali (parent boundary) ---- */

@keyframes ww-fadeInUp {
    from { opacity: 0; transform: translateY(24px); }
    to   { opacity: 1; transform: translateY(0); }
}

.ww-login-bg-pattern {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.ww-login-page {
    position: relative;
    min-height: 100dvh;
    display: flex;
    align-items: center;
    justify-content: center;
    /* Sfondo scuro derivato dal primary (color-mix con quasi-nero).
       18% del primary + 82% di #0f1a14 — dà una tinta scura desaturata
       che non compete con la card. */
    background-color: color-mix(in srgb, var(--ww-primary) 18%, #0f1a14);
    padding: 1.5rem;
    overflow: hidden;
}

.ww-login-wrapper {
    position: relative;
    width: 100%;
    max-width: 720px;
    z-index: 1;
}

/* Pulsante submit login — <button> HTML nativo (non DxButton).
   In site.css globale: il <button> dentro un <form> nativo non ha boundary
   di RenderFragment, ma per coerenza con Diana e per evitare flash di
   contenuto non stilizzato lo teniamo qui. */
.ww-login-submit-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.6rem;
    width: 100%;
    height: 2.875rem;
    margin-top: 0.25rem;
    background-color: var(--ww-primary);
    border: none;
    border-radius: var(--ww-border-radius);
    color: var(--ww-primary-text);
    font-size: 0.95rem;
    font-weight: var(--ww-font-weight-bold);
    letter-spacing: 0.01em;
    cursor: pointer;
    transition: background-color 0.2s ease, transform 0.15s ease, box-shadow 0.2s ease;
    box-shadow: 0 2px 8px color-mix(in srgb, var(--ww-primary) 35%, transparent);
}

.ww-login-submit-btn:hover {
    background-color: var(--ww-primary-hover);
    transform: translateY(-1px);
    box-shadow: 0 4px 14px color-mix(in srgb, var(--ww-primary) 40%, transparent);
}

.ww-login-submit-btn:active {
    transform: translateY(0);
    box-shadow: none;
}


/* ---------- LOGO BICROMATICO (PNG bianco-su-nero, gestito via blend) -------
 *
 * Il PNG fornito dal cliente è "Why Wine" bianco su sfondo nero opaco (no alpha).
 * Per farlo funzionare sui due sfondi diversi del BO senza richiedere ritocchi
 * al file usiamo due strategie CSS distinte:
 *
 *  - .ww-logo--on-dark  → mix-blend-mode: screen.
 *    I pixel neri del PNG diventano trasparenti (rivelano il gradient bordeaux
 *    del login), restano visibili solo i pixel bianchi del testo.
 *
 *  - .ww-logo--on-light → filter: invert(1).
 *    Inverte l'intera immagine: nero → bianco, bianco → nero. Il fondo bianco
 *    invertito si fonde con la sidebar bianca, resta visibile solo il testo nero.
 *
 * Globale in site.css perché l'<img> sta dentro componenti diversi (Login,
 * MainLayout) e queste classi devono essere riusabili indipendentemente.
 * --------------------------------------------------------------------------- */

.ww-logo--on-dark {
    mix-blend-mode: screen;
}

.ww-logo--on-light {
    filter: invert(1);
}


/* ---------- DETAIL FOOTER STICKY -------------------------------------------
 *
 * Barra di azioni in fondo alla pagina di dettaglio (Cantina, Vino, e in futuro
 * altre entità). Resta sempre visibile durante lo scroll e contiene il bottone
 * "Salva" globale + il feedback inline.
 *
 * Implementata con `position: fixed` invece di `position: sticky` per essere
 * robusta rispetto al layout: con sticky bastava un antenato con `overflow`
 * diverso da `visible` per romperne il funzionamento. Fixed è ancorata alla
 * viewport e indipendente dal contenitore.
 *
 * È globale in site.css perché condivisa da più pagine ed evita di duplicare
 * gli stessi stili in ogni componente (vedi regola di promozione CSS in
 * GUIDA_SVILUPPO_ADMIN.md).
 * --------------------------------------------------------------------------- */

.ww-detail-footer-sticky {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 100;
    padding: 12px 24px;
    background: var(--ww-sidebar-bg);
    border-top: 1px solid var(--ww-border);
    box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.06);
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 16px;
}

.ww-detail-footer-sticky .ww-detail-feedback {
    flex: 1;
    text-align: right;
}

/* Spazio sotto il contenuto della pagina per non far coprire l'ultimo elemento
   dal footer fisso. Applicato al body in pagine che ospitano il footer.
   Il valore (88px) lascia spazio per padding + bottone + margine respiro. */
body:has(.ww-detail-footer-sticky) {
    padding-bottom: 88px;
}


/* ---------- TABS SYSTEM (detail pages) -------------------------------------
 * Sistema di tab usato dal dettaglio Cantina (WineryDetailPage) e dal dettaglio
 * Vino (ProductDetailPage). Promosso a global al primo reuse, come da pattern
 * del progetto.
 * --------------------------------------------------------------------------- */

.ww-tabs {
    display: flex;
    gap: 4px;
    margin-bottom: 24px;
    border-bottom: 1px solid var(--ww-border);
}

.ww-tab {
    position: relative;
    background: transparent;
    border: none;
    padding: 12px 20px;
    font-family: inherit;
    font-size: 14px;
    font-weight: 500;
    color: var(--ww-text-secondary);
    cursor: pointer;
    transition: color 0.15s ease;
}

.ww-tab:hover:not(:disabled):not(.is-active) {
    color: var(--ww-text-primary);
}

.ww-tab.is-active {
    color: var(--ww-primary);
    font-weight: 600;
}

.ww-tab.is-active::after {
    content: "";
    position: absolute;
    left: 12px;
    right: 12px;
    bottom: -1px;
    height: 2px;
    background-color: var(--ww-primary);
    border-radius: 2px 2px 0 0;
}

.ww-tab.is-disabled,
.ww-tab:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}


/* ---------- HISTORY TAB (Winery + Product) ---------------------------------
 * Tab "Cronologia" del dettaglio cantina (WineryHistoryTab) e dettaglio vino
 * (ProductHistoryTab). Le due tab condividono lo stesso markup e gli stessi
 * marcatori: classi promosse a global al primo reuse, come da pattern del
 * progetto.
 * --------------------------------------------------------------------------- */

.ww-history-user {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.ww-history-user-name {
    font-weight: 500;
    color: var(--ww-text-primary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ww-history-user-email {
    font-size: 12px;
    color: var(--ww-text-secondary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ww-history-system {
    font-style: italic;
    color: var(--ww-text-secondary);
}

.ww-history-field {
    font-weight: 500;
    color: var(--ww-text-primary);
}

.ww-history-diff {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
}

.ww-history-old,
.ww-history-new {
    flex: 1 1 0;
    min-width: 0;
    max-width: 280px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 13px;
}

.ww-history-old {
    background-color: var(--ww-bg);
    color: var(--ww-text-secondary);
    text-decoration: line-through;
}

.ww-history-new {
    background-color: var(--ww-bg);
    color: var(--ww-text-primary);
    font-weight: 500;
}

.ww-history-arrow {
    flex-shrink: 0;
    width: 16px;
    height: 16px;
    color: var(--ww-text-secondary);
}

.ww-history-empty {
    color: var(--ww-text-secondary);
    font-style: italic;
}


/* ---------- PENDING DOT (lista cantine) ------------------------------------
 * Pallino "da rivedere" accanto al nome cantina nella lista, quando ci sono
 * modifiche history non viste (WineryListItemDTO.PendingHistoriesCount > 0).
 * Globale in site.css perché sta dentro CellDisplayTemplate di DxGrid — i
 * template attraversano boundary di RenderFragment dove il CSS scoped non si
 * propaga (vedi sezione DXGRID OVERRIDE sopra).
 * --------------------------------------------------------------------------- */

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

.ww-pending-dot {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 22px;
    height: 22px;
    padding: 0 7px;
    border-radius: 11px;
    background-color: var(--ww-state-warning-bg);
    color: var(--ww-state-warning-text);
    font-size: 12px;
    font-weight: 600;
    flex-shrink: 0;
    line-height: 1;
}