/* ============================================================================
   Art Stone Dashboard — palette neutra
   Override di style-as-new.css + artstone-restore.css.
   Niente blu, niente oro: solo grigi/bianco. Caricato per ULTIMO.
   ============================================================================ */

/* === Variabili accent root scope === */
body.as-scope {
    --accent:           #e7e8ea;
    --accent-hover:     #ffffff;
    --accent-active:    #cfd1d4;
    --accent-bg:        rgba(255, 255, 255, 0.06);
    --accent-bg-hover:  rgba(255, 255, 255, 0.10);
    --accent-border:    rgba(255, 255, 255, 0.18);
    --accent-text:      #f2f2f3;
    --accent-shadow:    rgba(255, 255, 255, 0.20);
    --border-focus:     rgba(255, 255, 255, 0.45);
}

/* === Variabili Art Stone su shell/panel/overlay (specificità più alta) === */
body.as-scope .artstone-only-shell,
body.as-scope .as-panel,
body.as-scope .as-editor-fullpanel,
body.as-scope .as-overlay,
body.as-scope .as-modal,
body.as-scope .as-editor-overlay,
body.as-scope .as-welcome-overlay {
    --as-ac:        #e7e8ea;
    --as-ac-hi:     #ffffff;
    --as-ac-lo:     #cfd1d4;
    --as-ac-ink:    #14161a;
    --as-ac-t06:    rgba(255, 255, 255, 0.06);
    --as-ac-t10:    rgba(255, 255, 255, 0.10);
    --as-ac-t16:    rgba(255, 255, 255, 0.16);
    --as-ac-t24:    rgba(255, 255, 255, 0.24);
    --as-ac-t40:    rgba(255, 255, 255, 0.40);
    --as-info:      #c8cacd;
}

/* === Sfondi piatti, niente glow né gradient === */
body.as-scope { background-image: none !important; }
body.as-scope .as-tab.as-tab-active,
body.as-scope .artstone-only-cta,
body.as-scope .as-btn-primary,
body.as-scope .as-cta { box-shadow: none !important; }

/* CTA principale: testo scuro su sfondo chiaro */
body.as-scope .artstone-only-cta { color: #14161a !important; }
body.as-scope .artstone-only-logo { color: #14161a !important; }

/* === Badge stato ordini: neutralizza blu/azzurro/viola; verde/giallo/arancio restano per leggibilità === */
body.as-scope .as-stato-sel.as-stato-no,
body.as-scope .as-stato.as-stato-no,
body.as-scope .as-stato-sel.as-stato-sok,
body.as-scope .as-stato.as-stato-sok,
body.as-scope .as-stato-sel.as-stato-pc,
body.as-scope .as-stato.as-stato-pc,
body.as-scope .as-stato-sel.as-stato-cons,
body.as-scope .as-stato.as-stato-cons {
    background-color: rgba(255, 255, 255, 0.08) !important;
    color: #c8cacd !important;
    border-color: rgba(255, 255, 255, 0.18) !important;
}

/* === Bordi card ordini neutri === */
body.as-scope .as-row,
body.as-scope .as-order-row,
body.as-scope [class*="as-card"],
body.as-scope [class*="row-clickable"] {
    border-left-color: rgba(255, 255, 255, 0.18) !important;
}

/* ============================================================================
   ROW TABELLA — pulizia totale: nessun separator verticale, niente shadow inset,
   solo una sottile linea orizzontale tra row. Header sobrio uppercase.
   ============================================================================ */

body.as-scope .as-table,
body.as-scope .as-table thead,
body.as-scope .as-table tbody,
body.as-scope .as-table tr,
body.as-scope .as-table th,
body.as-scope .as-table td {
    box-shadow: none !important;
    border-left: none !important;
    border-right: none !important;
}

body.as-scope .as-table tbody tr {
    border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important;
}
body.as-scope .as-table tbody tr:last-child {
    border-bottom: none !important;
}

body.as-scope .as-table thead tr {
    border-bottom: 1px solid rgba(255, 255, 255, 0.10) !important;
}
body.as-scope .as-table thead th {
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-size: 11px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.55);
    padding: 12px 16px !important;
}

body.as-scope .as-table tbody td {
    padding: 14px 16px !important;
    border: none !important;
}

/* (hover row neutralizzato sopra) */

/* Row "edited" (manuale): nessuna evidenziazione visiva, l'asterisco accanto al N. basta */
body.as-scope .as-table tbody tr.as-row-edited {
    background: transparent !important;
    box-shadow: none !important;
}
/* "Selected" (selezione tramite checkbox): solo lieve background, niente bordo sx */
body.as-scope .as-table tbody tr.as-row-selected,
body.as-scope .as-row-sel {
    background: rgba(255, 255, 255, 0.04) !important;
    box-shadow: none !important;
}
body.as-scope.as-light .as-table tbody tr.as-row-selected,
body.as-scope.as-light .as-row-sel {
    background: rgba(0, 0, 0, 0.04) !important;
    box-shadow: none !important;
}

/* Cella Danea: trasparente per fondersi con hover row (era #1c1f24 fisso) */
body.as-scope .as-danea-cell,
body.as-scope td.as-danea-cell {
    background: transparent !important;
    background-color: transparent !important;
}

/* Mail row: badge "ordine" e "N allegati" come pillole cliccabili coerenti dark+light */
body.as-scope .as-mail-action {
    appearance: none !important;
    -webkit-appearance: none !important;
    background: transparent !important;
    cursor: pointer !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 4px !important;
    padding: 2px 8px !important;
    border-radius: 4px !important;
    font: inherit !important;
    font-size: 11px !important;
    line-height: 1.4 !important;
    text-decoration: none !important;
    text-transform: uppercase !important;
    letter-spacing: 0.04em !important;
    transition: background-color 0.12s ease, border-color 0.12s ease, color 0.12s ease !important;
}
body.as-scope:not(.as-light) .as-mail-action {
    border: 1px solid rgba(255,255,255,0.22) !important;
    color: rgba(255,255,255,0.78) !important;
}
body.as-scope.as-light .as-mail-action {
    border: 1px solid rgba(0,0,0,0.22) !important;
    color: rgba(0,0,0,0.66) !important;
}
body.as-scope:not(.as-light) .as-mail-action:hover {
    background: rgba(255,255,255,0.10) !important;
    border-color: rgba(255,255,255,0.45) !important;
    color: #ffffff !important;
}
body.as-scope.as-light .as-mail-action:hover {
    background: rgba(0,0,0,0.06) !important;
    border-color: rgba(0,0,0,0.45) !important;
    color: #14161a !important;
}
body.as-scope .as-mail-action:focus-visible {
    outline: 2px solid currentColor !important;
    outline-offset: 2px !important;
}
body.as-scope .as-mail-action .as-tool-ico {
    display: inline-flex !important;
    align-items: center !important;
}

/* CTA Danea "Scarica per Danea" — è un <a download> stilizzato come pillola */
body.as-scope .as-danea-btn,
body.as-scope a.as-danea-btn {
    appearance: none !important;
    -webkit-appearance: none !important;
    background: transparent !important;
    background-color: transparent !important;
    cursor: pointer !important;
    font-family: inherit !important;
    font-size: inherit !important;
    text-decoration: none !important;
    transition: background-color 0.12s ease, border-color 0.12s ease !important;
}
body.as-scope:not(.as-light) .as-danea-btn:hover {
    background: rgba(255, 255, 255, 0.10) !important;
    border-color: rgba(255, 255, 255, 0.40) !important;
    color: #ffffff !important;
}
body.as-scope.as-light .as-danea-btn:hover {
    background: rgba(0, 0, 0, 0.08) !important;
    border-color: rgba(0, 0, 0, 0.40) !important;
    color: #14161a !important;
}
body.as-scope .as-danea-btn:focus-visible {
    outline: 2px solid currentColor !important;
    outline-offset: 2px !important;
}

/* ============================================================================
   BADGE: piatti, no glow. Danea: due stati semplici (neutro / verde sobrio).
   ============================================================================ */

body.as-scope .as-stato-sel,
body.as-scope .as-stato {
    box-shadow: none !important;
    text-shadow: none !important;
    font-weight: 500 !important;
    border-radius: 4px !important;
}

/* === DANEA flag: pillola pulita con icona stroke (no fill solido) === */
body.as-scope .as-danea-flag {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    padding: 4px 10px !important;
    border-radius: 4px !important;
    box-shadow: none !important;
    text-shadow: none !important;
    font-weight: 500 !important;
    line-height: 1.2 !important;
    white-space: nowrap !important;
}
body.as-scope .as-danea-flag.as-danea-off {
    background: transparent !important;
    color: rgba(255, 255, 255, 0.55) !important;
    border: 1px solid rgba(255, 255, 255, 0.18) !important;
}
body.as-scope .as-danea-flag.as-danea-ok {
    background: rgba(46, 168, 99, 0.14) !important;
    color: #6dc88a !important;
    border: 1px solid rgba(46, 168, 99, 0.30) !important;
}
body.as-scope .as-danea-flag .as-danea-ico {
    display: inline-flex !important;
    align-items: center !important;
    flex: 0 0 auto !important;
}
body.as-scope .as-danea-flag .as-danea-ico svg {
    width: 14px !important;
    height: 14px !important;
    min-width: 14px !important;
    flex: 0 0 14px !important;
    color: inherit !important;
    stroke: currentColor !important;
}
/* L'icona è stroke-only: forziamo fill=none su tutti i path/polyline/line/circle */
body.as-scope .as-danea-flag .as-danea-ico svg,
body.as-scope .as-danea-flag .as-danea-ico svg path,
body.as-scope .as-danea-flag .as-danea-ico svg polyline,
body.as-scope .as-danea-flag .as-danea-ico svg line,
body.as-scope .as-danea-flag .as-danea-ico svg circle {
    fill: none !important;
}
body.as-scope .as-danea-flag .as-danea-txt {
    color: inherit !important;
    border: none !important;
    background: transparent !important;
    padding: 0 !important;
}

/* ============================================================================
   ELEMENTI ELIMINATI (V. 26-27/04/2026: "inutile / non serve")
   ============================================================================ */
body.as-scope .as-header-stats { display: none !important; }
body.as-scope .as-analytics { display: none !important; }
body.as-scope label.as-toolbar-check[title*="Raggruppa"] { display: none !important; }

/* === FIX DOPPIA RIGA TAB ATTIVA: tolgo border-bottom, lascio solo ::after === */
body.as-scope .as-tab.as-tab-active,
body.as-scope .as-nav-group.as-nav-group-on {
    border-bottom: 0 !important;
}

/* === TEMA CHIARO (toggle via .as-light su body, persistito in localStorage) === */
body.as-scope.as-light {
    --bg:           #ffffff;
    --bg-elevated:  #f7f7f8;
    --surface:      #ffffff;
    --surface-2:    #f3f4f6;
    --surface-3:    #e9ebee;
    --border:       rgba(0, 0, 0, 0.10);
    --border-strong: rgba(0, 0, 0, 0.18);
    --text:         #14161a;
    --text-2:       #4a4d52;
    --text-3:       #6a6e74;
    --accent:       #14161a;
    --accent-hover: #000000;
    --accent-active:#2a2d33;
    --accent-bg:    rgba(0, 0, 0, 0.04);
    --accent-bg-hover: rgba(0, 0, 0, 0.08);
    --accent-border: rgba(0, 0, 0, 0.16);
    --accent-text:  #14161a;
    --border-focus: rgba(0, 0, 0, 0.40);
}
body.as-scope.as-light .artstone-only-shell,
body.as-scope.as-light .as-panel,
body.as-scope.as-light .as-editor-fullpanel,
body.as-scope.as-light .as-overlay,
body.as-scope.as-light .as-modal,
body.as-scope.as-light .as-editor-overlay,
body.as-scope.as-light .as-welcome-overlay {
    --as-bg-0:  #ffffff;
    --as-bg-1:  #f7f7f8;
    --as-bg-2:  #f0f1f3;
    --as-bg-3:  #e6e7e9;
    --as-tx-1:  #14161a;
    --as-tx-2:  #4a4d52;
    --as-tx-3:  #6a6e74;
    --as-bd-1:  rgba(0, 0, 0, 0.08);
    --as-bd-2:  rgba(0, 0, 0, 0.14);
    --as-ac:    #14161a;
    --as-ac-hi: #000000;
    --as-ac-lo: #4a4d52;
    --as-ac-ink:#ffffff;
    --as-ac-t06: rgba(0, 0, 0, 0.04);
    --as-ac-t10: rgba(0, 0, 0, 0.06);
    --as-ac-t16: rgba(0, 0, 0, 0.10);
    --as-ac-t24: rgba(0, 0, 0, 0.14);
    --as-ac-t40: rgba(0, 0, 0, 0.20);
    --as-info:  #4a4d52;
    background: #ffffff !important;
    color: #14161a !important;
}
body.as-scope.as-light .as-table tbody tr {
    border-bottom-color: rgba(0, 0, 0, 0.06) !important;
}
body.as-scope.as-light .as-table thead tr {
    border-bottom-color: rgba(0, 0, 0, 0.10) !important;
}
body.as-scope.as-light .as-table thead th {
    color: rgba(0, 0, 0, 0.55) !important;
}
/* (sostituito da hover su TD coerente più sotto, era source di buco su as-danea-cell) */
/* Light mode — row edited senza evidenziazione (asterisco basta), selected discreto */
body.as-scope.as-light .as-table tbody tr.as-row-edited {
    background: transparent !important;
    box-shadow: none !important;
}
body.as-scope.as-light .as-stato-sel.as-stato-no,
body.as-scope.as-light .as-stato.as-stato-no,
body.as-scope.as-light .as-stato-sel.as-stato-sok,
body.as-scope.as-light .as-stato.as-stato-sok,
body.as-scope.as-light .as-stato-sel.as-stato-pc,
body.as-scope.as-light .as-stato.as-stato-pc,
body.as-scope.as-light .as-stato-sel.as-stato-cons,
body.as-scope.as-light .as-stato.as-stato-cons {
    background-color: rgba(0, 0, 0, 0.06) !important;
    color: #4a4d52 !important;
    border-color: rgba(0, 0, 0, 0.18) !important;
}
/* Pillola "Scarica per Danea": bg TRASPARENTE per fondersi con row hover, solo bordo */
body.as-scope.as-light .as-danea-flag.as-danea-off {
    background: transparent !important;
    color: rgba(0, 0, 0, 0.62) !important;
    border: 1px solid rgba(0, 0, 0, 0.22) !important;
}
body.as-scope:not(.as-light) .as-danea-flag.as-danea-off {
    background: transparent !important;
    color: rgba(255, 255, 255, 0.72) !important;
    border: 1px solid rgba(255, 255, 255, 0.22) !important;
}
/* Hover row: la pillola resta trasparente (eredita bg row) */
body.as-scope .as-table tbody tr:hover .as-danea-flag.as-danea-off {
    background: transparent !important;
}
/* Hover row: bg uniforme su TUTTI i TD (la regola legacy `tr:hover td` da artstone-restore
   e l'override su as-danea-cell creavano effetto-buco). Qui forzo coerenza completa. */
body.as-scope .as-table tbody tr:hover,
body.as-scope .as-table tbody tr.as-row-clickable:hover {
    background: transparent !important;
    box-shadow: none !important;
}
body.as-scope:not(.as-light) .as-table tbody tr:hover > td,
body.as-scope:not(.as-light) .as-table tbody tr.as-row-clickable:hover > td {
    background-color: rgba(255, 255, 255, 0.045) !important;
}
body.as-scope.as-light .as-table tbody tr:hover > td,
body.as-scope.as-light .as-table tbody tr.as-row-clickable:hover > td {
    background-color: rgba(0, 0, 0, 0.035) !important;
}
body.as-scope .as-table tbody tr.as-row-clickable {
    cursor: pointer !important;
}
/* Checkbox: bordo visibile, custom appearance per coerenza */
body.as-scope.as-light input[type="checkbox"]:not(:checked) {
    appearance: none !important;
    -webkit-appearance: none !important;
    width: 16px !important;
    height: 16px !important;
    background: #ffffff !important;
    border: 1.5px solid rgba(0, 0, 0, 0.32) !important;
    border-radius: 3px !important;
    cursor: pointer !important;
    accent-color: #14161a !important;
    vertical-align: middle !important;
}
body.as-scope.as-light input[type="checkbox"]:checked {
    accent-color: #14161a !important;
}
body.as-scope:not(.as-light) input[type="checkbox"]:not(:checked) {
    appearance: none !important;
    -webkit-appearance: none !important;
    width: 16px !important;
    height: 16px !important;
    background: rgba(0, 0, 0, 0.30) !important;
    border: 1.5px solid rgba(255, 255, 255, 0.32) !important;
    border-radius: 3px !important;
    cursor: pointer !important;
    accent-color: #ffffff !important;
    vertical-align: middle !important;
}
body.as-scope.as-light .as-danea-flag.as-danea-ok {
    background: rgba(46, 130, 80, 0.12) !important;
    color: #2a7a4d !important;
    border-color: rgba(46, 130, 80, 0.30) !important;
}
/* Logo: dimensione + niente ombra (entrambi i temi) */
body.as-scope .as-logo-img {
    width: 80px !important;
    height: 80px !important;
    filter: none !important;
    box-shadow: none !important;
}
/* Logo: in light mode usa la variante per fondo chiaro */
body.as-scope.as-light .as-logo-img {
    content: url('/static/artstone-logo-light.png?v=1');
}

/* === LIGHT MODE — fix elementi ereditati dal dark === */

/* Placeholder leggibile su fondo chiaro */
body.as-scope.as-light input::placeholder,
body.as-scope.as-light textarea::placeholder {
    color: rgba(0, 0, 0, 0.42) !important;
    opacity: 1 !important;
}

/* Search input: bg bianco, lente scura */
body.as-scope.as-light input.as-search {
    background-color: #ffffff !important;
    color: #14161a !important;
    border: 1px solid rgba(0, 0, 0, 0.16) !important;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='rgba(0,0,0,0.45)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='11' cy='11' r='8'/><line x1='21' y1='21' x2='16.65' y2='16.65'/></svg>") !important;
}

/* Select e input testo: fondo bianco */
body.as-scope.as-light select.as-select,
body.as-scope.as-light select,
body.as-scope.as-light textarea,
body.as-scope.as-light input[type="text"],
body.as-scope.as-light input[type="email"],
body.as-scope.as-light input[type="number"],
body.as-scope.as-light input[type="tel"],
body.as-scope.as-light input[type="url"] {
    background-color: #ffffff !important;
    color: #14161a !important;
    border: 1px solid rgba(0, 0, 0, 0.16) !important;
}

/* Bottone PRIMARY: nero + testo bianco */
body.as-scope.as-light .as-btn-primary,
body.as-scope.as-light button.as-btn-primary {
    background: #14161a !important;
    color: #ffffff !important;
    border: 1px solid #14161a !important;
}
body.as-scope.as-light .as-btn-primary:hover {
    background: #000000 !important;
}

/* Bottone disabled: grigio su grigio chiaro */
body.as-scope.as-light .as-btn:disabled,
body.as-scope.as-light .as-btn-primary:disabled,
body.as-scope.as-light button:disabled {
    background: rgba(0, 0, 0, 0.06) !important;
    color: rgba(0, 0, 0, 0.32) !important;
    border-color: rgba(0, 0, 0, 0.12) !important;
    cursor: not-allowed !important;
}

/* Bottone ghost / generico: testo scuro su trasparente */
body.as-scope.as-light .as-btn-ghost,
body.as-scope.as-light .as-btn:not(.as-btn-primary) {
    background: transparent !important;
    color: #14161a !important;
    border: 1px solid rgba(0, 0, 0, 0.18) !important;
}
body.as-scope.as-light .as-btn-ghost:hover,
body.as-scope.as-light .as-btn:not(.as-btn-primary):hover {
    background: rgba(0, 0, 0, 0.04) !important;
}

/* Mail view buttons */
body.as-scope.as-light .as-mail-view-btn-on {
    background: #14161a !important;
    color: #ffffff !important;
    border-color: #14161a !important;
}
body.as-scope.as-light .as-mail-view-btn:not(.as-mail-view-btn-on) {
    color: #14161a !important;
    border-color: rgba(0, 0, 0, 0.18) !important;
}

/* Checkbox accent */
body.as-scope.as-light input[type="checkbox"] {
    accent-color: #14161a !important;
}

/* Header buttons (theme/help) */
body.as-scope.as-light .as-theme-btn,
body.as-scope.as-light .as-help-btn {
    background: transparent !important;
    color: #14161a !important;
    border: 1px solid rgba(0, 0, 0, 0.18) !important;
}
body.as-scope.as-light .as-theme-btn:hover,
body.as-scope.as-light .as-help-btn:hover {
    background: rgba(0, 0, 0, 0.04) !important;
}

/* Composer manuale ordine */
body.as-scope.as-light .as-manual-composer,
body.as-scope.as-light .as-manual-head,
body.as-scope.as-light .as-manual-actions {
    background: #ffffff !important;
    color: #14161a !important;
}
body.as-scope.as-light .as-manual-text {
    background: #ffffff !important;
    color: #14161a !important;
    border: 1px solid rgba(0, 0, 0, 0.16) !important;
}

/* Testo secondario "as-dim" più visibile */
body.as-scope.as-light .as-dim {
    color: rgba(0, 0, 0, 0.55) !important;
}

/* Card / row generici: trasparenti su sfondo chiaro */
body.as-scope.as-light .as-card,
body.as-scope.as-light .as-mail-row,
body.as-scope.as-light .as-row,
body.as-scope.as-light .as-toolbar {
    background: transparent !important;
    color: #14161a !important;
}

/* Tab attivo Mail/Ordini: linea + testo neri */
body.as-scope.as-light .as-tab.as-tab-active,
body.as-scope.as-light .as-nav-group.as-nav-group-on {
    color: #14161a !important;
}
body.as-scope.as-light .as-tab.as-tab-active::after,
body.as-scope.as-light .as-nav-group.as-nav-group-on::after {
    background: #14161a !important;
}

/* === Input ricerca: padding-left per liberare l'icona lente, altezza decente === */
body.as-scope input.as-search {
    padding: 10px 14px 10px 38px !important;
    min-height: 40px !important;
    height: auto !important;
    line-height: 1.3 !important;
    background-position: 14px 50% !important;
    font-size: 14px !important;
}

/* === Toolbar: tutti gli elementi su una riga, ordinati === */
body.as-scope .as-toolbar {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    gap: 12px !important;
}
body.as-scope .as-toolbar > input.as-search {
    flex: 1 1 280px !important;
    max-width: 360px !important;
    min-width: 200px !important;
    width: auto !important;
}
body.as-scope .as-toolbar > select.as-select {
    flex: 0 0 auto !important;
    width: 220px !important;
    min-height: 40px !important;
    height: 40px !important;
}
body.as-scope .as-toolbar > label.as-toolbar-check {
    flex: 0 0 auto !important;
    white-space: nowrap;
}
body.as-scope .as-toolbar > .as-toolbar-spacer {
    flex: 1 1 auto !important;
    min-width: 8px;
}
body.as-scope .as-toolbar > .as-col-picker-wrap,
body.as-scope .as-toolbar > .as-toolbar-info {
    flex: 0 0 auto !important;
    white-space: nowrap;
}