/* ===========================================================================
 * 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);
}