/* artstone-tweaks.css — Ritocchi mirati 27/04/2026
   1. Stato ordini (.as-stato-sel) → info-only, stesso colore per tutti gli stati
   2. Righe tabella ordini → stesso sfondo per tutte (no highlight per edited/worked/trashed)
   3. Topbar minimale (sostituisce as-header) → logo + titolo + theme + help
   Caricato per ULTIMO. Specificity battuta con html body.as-scope ... !important. */


/* === 3. TOPBAR (logo + titolo + theme + help, dentro la search-box di Ordini) === */

html body.as-scope .as-search-box .as-topbar {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 12px !important;
    padding: 0 !important;
    margin-bottom: 10px !important;
    background: transparent !important;
    border: none !important;
    flex-shrink: 0 !important;
    box-sizing: border-box !important;
}
html body.as-scope.as-light .as-search-box .as-topbar {
    background: transparent !important;
    border: none !important;
}

html body.as-scope .as-topbar-brand {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    min-width: 0 !important;
    flex: 1 !important;
}
html body.as-scope .as-topbar-brand .as-logo-frame {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 168px !important;
    height: 56px !important;
    overflow: hidden !important;
    flex-shrink: 0 !important;
}
html body.as-scope .as-topbar-brand .as-logo-frame .as-logo-img {
    width: 100% !important;
    height: auto !important;
    display: block !important;
    max-height: none !important;
    flex-shrink: 0 !important;
    object-fit: contain !important;
}
html body.as-scope .as-topbar-title {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    justify-content: center !important;
    gap: 2px !important;
    line-height: 1.15 !important;
    color: rgba(255,255,255,0.92) !important;
    letter-spacing: 0 !important;
    overflow: hidden !important;
    min-width: 0 !important;
    flex: 1 1 auto !important;
}
html body.as-scope .as-topbar-title .as-topbar-section {
    font-size: 11px !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.08em !important;
    opacity: 0.55 !important;
    line-height: 1.1 !important;
}
html body.as-scope .as-topbar-title .as-topbar-page {
    font-size: 22px !important;
    font-weight: 700 !important;
    line-height: 1.15 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    min-width: 0 !important;
    max-width: 100% !important;
}
html body.as-scope.as-light .as-topbar-title {
    color: #14161a !important;
}

html body.as-scope .as-topbar-right {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    flex-shrink: 0 !important;
}

/* hide old header if it ever re-appears in DOM (defensive) */
html body.as-scope header.as-header { display: none !important; }


/* === col-picker popup: apri verso sinistra (il trigger sta nell'ultima colonna a destra) === */

html body.as-scope thead .as-col-picker,
html body.as-scope.as-light thead .as-col-picker,
html body.as-scope:not(.as-light) thead .as-col-picker {
    left: auto !important;
    right: 0 !important;
}


/* === 3b. SEARCH INPUT + bottone "+" (nuovo ordine manuale) === */

html body.as-scope .as-search-box .as-search-input-wrap {
    position: relative !important;
    display: block !important;
    width: 100% !important;
}
html body.as-scope .as-search-box .as-search-input-wrap .as-search {
    width: 100% !important;
    padding-right: 12px !important;
}
/* padding dinamico: 1 controllo dentro = 44px, 2 controlli dentro = 76px */
html body.as-scope .as-search-box .as-search-input-wrap:has(.as-search-trashed) .as-search,
html body.as-scope .as-search-box .as-search-input-wrap:has(.as-search-import) .as-search,
html body.as-scope .as-search-box .as-search-input-wrap:has(.as-search-add) .as-search {
    padding-right: 44px !important;
}
html body.as-scope .as-search-box .as-search-input-wrap:has(.as-search-trashed):has(.as-search-add) .as-search,
html body.as-scope .as-search-box .as-search-input-wrap:has(.as-search-import):has(.as-search-add) .as-search {
    padding-right: 76px !important;
}

/* Bottone trash toggle: tondo, dentro l'input, simile al + */
html body.as-scope .as-search-box .as-search-input-wrap .as-search-trashed {
    position: absolute !important;
    top: 50% !important;
    right: 6px !important;
    transform: translateY(-50%) !important;
    appearance: none !important;
    -webkit-appearance: none !important;
    border: none !important;
    background: transparent !important;
    color: rgba(255,255,255,0.55) !important;
    width: 26px !important;
    height: 26px !important;
    border-radius: 50% !important;
    cursor: pointer !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 !important;
    margin: 0 !important;
    transition: background 120ms ease, color 120ms ease, transform 120ms ease !important;
}
html body.as-scope .as-search-box .as-search-input-wrap .as-search-trashed svg {
    width: 14px !important;
    height: 14px !important;
}
html body.as-scope .as-search-box .as-search-input-wrap .as-search-trashed:hover {
    background: rgba(255,255,255,0.10) !important;
    color: rgba(255,255,255,0.85) !important;
}
html body.as-scope .as-search-box .as-search-input-wrap .as-search-trashed.as-search-trashed-on {
    background: rgba(232,156,60,0.20) !important;
    color: #e89c3c !important;
}
html body.as-scope .as-search-box .as-search-input-wrap .as-search-trashed.as-search-trashed-on:hover {
    background: rgba(232,156,60,0.30) !important;
    color: #f0b56b !important;
}
/* se c'è anche il + dopo, il trash slitta a sinistra di esso */
html body.as-scope .as-search-box .as-search-input-wrap:has(.as-search-add) .as-search-trashed {
    right: 36px !important;
}

/* Bottone Importa (Clienti/Prodotti): tondo, dentro l'input, stesso slot del trash */
html body.as-scope .as-search-box .as-search-input-wrap .as-search-import {
    position: absolute !important;
    top: 50% !important;
    right: 6px !important;
    transform: translateY(-50%) !important;
    width: 26px !important;
    height: 26px !important;
    border-radius: 50% !important;
    background: transparent !important;
    color: rgba(255,255,255,0.55) !important;
    cursor: pointer !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin: 0 !important;
    padding: 0 !important;
    transition: background 120ms ease, color 120ms ease, transform 120ms ease !important;
}
html body.as-scope .as-search-box .as-search-input-wrap .as-search-import svg {
    width: 14px !important;
    height: 14px !important;
}
html body.as-scope .as-search-box .as-search-input-wrap .as-search-import:hover {
    background: rgba(255,255,255,0.10) !important;
    color: rgba(255,255,255,0.90) !important;
    transform: translateY(-50%) scale(1.06) !important;
}
html body.as-scope.as-light .as-search-box .as-search-input-wrap .as-search-import {
    color: rgba(20,22,26,0.55) !important;
}
html body.as-scope.as-light .as-search-box .as-search-input-wrap .as-search-import:hover {
    background: rgba(0,0,0,0.06) !important;
    color: rgba(20,22,26,0.90) !important;
}
/* se c'è anche il + dopo, l'importa slitta a sinistra di esso */
html body.as-scope .as-search-box .as-search-input-wrap:has(.as-search-add) .as-search-import {
    right: 36px !important;
}
html body.as-scope.as-light .as-search-box .as-search-input-wrap .as-search-trashed {
    color: rgba(20,22,26,0.55) !important;
}
html body.as-scope.as-light .as-search-box .as-search-input-wrap .as-search-trashed:hover {
    background: rgba(0,0,0,0.06) !important;
    color: rgba(20,22,26,0.85) !important;
}
html body.as-scope.as-light .as-search-box .as-search-input-wrap .as-search-trashed.as-search-trashed-on {
    background: rgba(232,156,60,0.18) !important;
    color: #b06a1a !important;
}
html body.as-scope.as-light .as-search-box .as-search-input-wrap .as-search-trashed.as-search-trashed-on:hover {
    background: rgba(232,156,60,0.28) !important;
    color: #8a4f10 !important;
}
html body.as-scope .as-search-box .as-search-add {
    position: absolute !important;
    top: 50% !important;
    right: 6px !important;
    transform: translateY(-50%) !important;
    appearance: none !important;
    -webkit-appearance: none !important;
    border: none !important;
    background: rgba(255,255,255,0.10) !important;
    color: rgba(255,255,255,0.9) !important;
    width: 26px !important;
    height: 26px !important;
    border-radius: 50% !important;
    font-size: 16px !important;
    font-weight: 500 !important;
    line-height: 1 !important;
    cursor: pointer !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 !important;
    margin: 0 !important;
    transition: background 120ms ease, transform 120ms ease !important;
}
html body.as-scope .as-search-box .as-search-add:hover {
    background: rgba(255,255,255,0.18) !important;
    transform: translateY(-50%) scale(1.06) !important;
}
html body.as-scope.as-light .as-search-box .as-search-add {
    background: rgba(0,0,0,0.08) !important;
    color: rgba(20,22,26,0.85) !important;
}
html body.as-scope.as-light .as-search-box .as-search-add:hover {
    background: rgba(0,0,0,0.16) !important;
}


/* === 4. NAV INLINE (gruppi + tabs dentro search-box) === */

html body.as-scope .as-search-box .as-nav-inline {
    margin-top: 10px !important;
    padding: 0 !important;
    border: none !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 6px !important;
    background: transparent !important;
}
html body.as-scope.as-light .as-search-box .as-nav-inline {
    border: none !important;
}

/* gruppi: una sola riga, scrollabile se serve, niente wrap */
html body.as-scope .as-search-box .as-nav-inline .as-nav-groups {
    display: flex !important;
    flex-wrap: nowrap !important;
    gap: 2px !important;
    padding: 0 !important;
    margin: 0 !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    scrollbar-width: none !important;
    -ms-overflow-style: none !important;
    background: transparent !important;
    border: none !important;
}
html body.as-scope .as-search-box .as-nav-inline .as-nav-groups::-webkit-scrollbar { display: none !important; }
html body.as-scope .as-search-box .as-nav-inline .as-nav-group {
    flex-shrink: 0 !important;
    padding: 5px 9px !important;
    font-size: 10px !important;
    letter-spacing: 0.04em !important;
    line-height: 1.3 !important;
    text-transform: uppercase !important;
    white-space: nowrap !important;
    background: transparent !important;
    border: none !important;
    border-radius: 4px !important;
    color: rgba(255,255,255,0.55) !important;
    cursor: pointer !important;
    font-weight: 500 !important;
    transition: color 120ms ease, background 120ms ease !important;
    position: relative !important;
}
/* nessun underline / pseudo-element legacy: il gruppo attivo si distingue solo con la pillola */
html body.as-scope .as-search-box .as-nav-inline .as-nav-group::before,
html body.as-scope .as-search-box .as-nav-inline .as-nav-group::after {
    content: none !important;
    display: none !important;
    background: transparent !important;
    border: none !important;
}
html body.as-scope.as-light .as-search-box .as-nav-inline .as-nav-group {
    color: rgba(20,22,26,0.58) !important;
}
html body.as-scope .as-search-box .as-nav-inline .as-nav-group:hover {
    background: rgba(255,255,255,0.06) !important;
    color: rgba(255,255,255,0.9) !important;
}
html body.as-scope.as-light .as-search-box .as-nav-inline .as-nav-group:hover {
    background: rgba(0,0,0,0.05) !important;
    color: rgba(20,22,26,0.9) !important;
}
html body.as-scope .as-search-box .as-nav-inline .as-nav-group.as-nav-group-on {
    color: rgba(255,255,255,1) !important;
    background: rgba(255,255,255,0.10) !important;
    font-weight: 600 !important;
}
html body.as-scope.as-light .as-search-box .as-nav-inline .as-nav-group.as-nav-group-on {
    color: #14161a !important;
    background: rgba(0,0,0,0.08) !important;
    font-weight: 600 !important;
}

/* tabs: una sola riga, scrollabile, compatti */
html body.as-scope .as-search-box .as-nav-inline .as-tabs {
    display: flex !important;
    flex-wrap: nowrap !important;
    gap: 4px !important;
    padding: 0 !important;
    margin: 0 !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    scrollbar-width: none !important;
    -ms-overflow-style: none !important;
    background: transparent !important;
    border: none !important;
}
html body.as-scope .as-search-box .as-nav-inline .as-tabs::-webkit-scrollbar { display: none !important; }
html body.as-scope .as-search-box .as-nav-inline .as-tab {
    flex-shrink: 0 !important;
    padding: 5px 9px !important;
    font-size: 12px !important;
    line-height: 1.3 !important;
    white-space: nowrap !important;
    background: transparent !important;
    border: none !important;
    border-radius: 4px !important;
    color: rgba(255,255,255,0.62) !important;
    cursor: pointer !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 5px !important;
    transition: color 120ms ease, background 120ms ease !important;
    position: relative !important;
}
/* nessun underline / pseudo-element: il tab attivo si distingue solo con la pillola */
html body.as-scope .as-search-box .as-nav-inline .as-tab::before,
html body.as-scope .as-search-box .as-nav-inline .as-tab::after {
    content: none !important;
    display: none !important;
    background: transparent !important;
    border: none !important;
}
html body.as-scope.as-light .as-search-box .as-nav-inline .as-tab {
    color: rgba(20,22,26,0.62) !important;
}
html body.as-scope .as-search-box .as-nav-inline .as-tab .as-tab-icon svg {
    width: 14px !important;
    height: 14px !important;
}
html body.as-scope .as-search-box .as-nav-inline .as-tab:hover {
    background: rgba(255,255,255,0.06) !important;
    color: rgba(255,255,255,0.95) !important;
}
html body.as-scope.as-light .as-search-box .as-nav-inline .as-tab:hover {
    background: rgba(0,0,0,0.05) !important;
    color: rgba(20,22,26,0.95) !important;
}
html body.as-scope .as-search-box .as-nav-inline .as-tab.as-tab-active {
    color: rgba(255,255,255,1) !important;
    background: rgba(255,255,255,0.10) !important;
    font-weight: 600 !important;
}
html body.as-scope.as-light .as-search-box .as-nav-inline .as-tab.as-tab-active {
    color: #14161a !important;
    background: rgba(0,0,0,0.08) !important;
    font-weight: 600 !important;
}

/* mobile */
@media (max-width: 600px) {
    html body.as-scope .as-topbar {
        padding: 8px 12px !important;
        gap: 10px !important;
        min-height: 48px !important;
    }
    html body.as-scope .as-topbar-brand .as-logo-img {
        height: 44px !important;
        width: auto !important;
    }
    html body.as-scope .as-topbar-title { font-size: 14px !important; gap: 6px !important; }
    html body.as-scope .as-topbar-title .as-topbar-section { font-size: 11px !important; }
    html body.as-scope .as-topbar-title .as-topbar-page { font-size: 14px !important; }
}


/* === 1. STATO ORDINI: uniforme + non cliccabile (info-only) === */

html body.as-scope .as-stato-sel.as-stato-sel,
html body.as-scope .as-stato {
    /* uniforme su tutti gli stati */
    background: rgba(255,255,255,0.06) !important;
    background-image: none !important;
    color: rgba(255,255,255,0.78) !important;
    border: 1px solid rgba(255,255,255,0.16) !important;
    border-radius: 999px !important;
    padding: 3px 10px !important;
    font-size: 11px !important;
    font-weight: 500 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.04em !important;
    /* info-only: niente cursore, niente click, niente chevron */
    appearance: none !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    pointer-events: none !important;
    cursor: default !important;
    background-position: 0 0 !important;
    /* hover/focus reset */
    box-shadow: none !important;
    outline: none !important;
}
html body.as-scope .as-stato-sel.as-stato-sel:hover,
html body.as-scope .as-stato-sel.as-stato-sel:focus,
html body.as-scope .as-stato:hover,
html body.as-scope .as-stato:focus {
    background: rgba(255,255,255,0.06) !important;
    color: rgba(255,255,255,0.78) !important;
    border-color: rgba(255,255,255,0.16) !important;
}

/* light mode */
html body.as-scope.as-light .as-stato-sel,
html body.as-scope.as-light .as-stato,
html body.as-scope.as-light .as-stato-sel:hover,
html body.as-scope.as-light .as-stato-sel:focus,
html body.as-scope.as-light .as-stato:hover,
html body.as-scope.as-light .as-stato:focus {
    background: rgba(0,0,0,0.05) !important;
    color: rgba(20,22,26,0.74) !important;
    border-color: rgba(0,0,0,0.16) !important;
}

/* nasconde la freccia del select se applicata da regola browser */
html body.as-scope .as-stato-sel.as-stato-sel::-ms-expand { display: none !important; }


/* === 2. RIGHE TABELLA ORDINI: stesso sfondo per tutte === */

html body.as-scope .as-table tbody tr.as-row-edited,
html body.as-scope .as-table tbody tr.as-row-worked,
html body.as-scope .as-table tbody tr.as-row-trashed {
    background: transparent !important;
    background-color: transparent !important;
    box-shadow: none !important;
    border-left: none !important;
    opacity: 1 !important;
}
html body.as-scope .as-table tbody tr.as-row-edited > td,
html body.as-scope .as-table tbody tr.as-row-worked > td,
html body.as-scope .as-table tbody tr.as-row-trashed > td {
    background: transparent !important;
    background-color: transparent !important;
    color: inherit !important;
}

/* selezione utente (checkbox) — UNICA differenziazione visibile */
html body.as-scope .as-table tbody tr.as-row-sel,
html body.as-scope .as-table tbody tr.as-row-sel > td {
    background: rgba(255,255,255,0.04) !important;
}
html body.as-scope.as-light .as-table tbody tr.as-row-sel,
html body.as-scope.as-light .as-table tbody tr.as-row-sel > td {
    background: rgba(0,0,0,0.04) !important;
}


/* === 5. MAIL: filter chips + lista card moderne === */

html body.as-scope .as-mail-tab {
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
    padding: 4px 0 !important;
}

html body.as-scope .as-mail-tab .as-mail-viewbar {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 12px !important;
    padding: 4px 4px 0 !important;
    flex-wrap: wrap !important;
}
html body.as-scope .as-mail-tab .as-mail-views {
    display: inline-flex !important;
    align-items: center !important;
    gap: 4px !important;
    padding: 3px !important;
    background: rgba(0,0,0,0.04) !important;
    border-radius: 999px !important;
}
html body.as-scope:not(.as-light) .as-mail-tab .as-mail-views {
    background: rgba(255,255,255,0.06) !important;
}
html body.as-scope .as-mail-tab .as-mail-view-btn {
    appearance: none !important;
    -webkit-appearance: none !important;
    border: none !important;
    background: transparent !important;
    color: rgba(20,22,26,0.6) !important;
    padding: 5px 12px !important;
    font-size: 12px !important;
    font-weight: 500 !important;
    line-height: 1.2 !important;
    border-radius: 999px !important;
    cursor: pointer !important;
    transition: background 120ms ease, color 120ms ease !important;
    white-space: nowrap !important;
}
html body.as-scope:not(.as-light) .as-mail-tab .as-mail-view-btn {
    color: rgba(255,255,255,0.62) !important;
}
html body.as-scope .as-mail-tab .as-mail-view-btn:hover {
    color: rgba(20,22,26,0.9) !important;
}
html body.as-scope:not(.as-light) .as-mail-tab .as-mail-view-btn:hover {
    color: rgba(255,255,255,0.92) !important;
}
html body.as-scope .as-mail-tab .as-mail-view-btn.as-mail-view-btn-on {
    background: #fff !important;
    color: #14161a !important;
    font-weight: 600 !important;
    box-shadow: 0 1px 3px rgba(0,0,0,0.10), 0 0 0 1px rgba(0,0,0,0.05) !important;
}
html body.as-scope:not(.as-light) .as-mail-tab .as-mail-view-btn.as-mail-view-btn-on {
    background: rgba(255,255,255,0.16) !important;
    color: #fff !important;
    box-shadow: 0 1px 2px rgba(0,0,0,0.4) !important;
}
html body.as-scope .as-mail-tab .as-mail-count {
    font-size: 11.5px !important;
    color: rgba(20,22,26,0.55) !important;
    font-variant-numeric: tabular-nums !important;
    white-space: nowrap !important;
}
html body.as-scope:not(.as-light) .as-mail-tab .as-mail-count {
    color: rgba(255,255,255,0.55) !important;
}
html body.as-scope .as-mail-tab .as-mail-count .as-dim {
    opacity: 0.7 !important;
}


/* === 5b. MAIL LIST: card moderne, subject prominente, body leggibile === */

html body.as-scope .as-mail-list {
    display: flex !important;
    flex-direction: column !important;
    gap: 6px !important;
    padding: 4px 0 !important;
}

html body.as-scope .as-mail-row {
    display: block !important;
    padding: 0 !important;
    border: 1px solid rgba(0,0,0,0.08) !important;
    border-radius: 12px !important;
    background: #fff !important;
    overflow: hidden !important;
    transition: border-color 120ms ease, box-shadow 120ms ease !important;
}
html body.as-scope:not(.as-light) .as-mail-row {
    border: 1px solid rgba(255,255,255,0.10) !important;
    background: rgba(255,255,255,0.03) !important;
}
html body.as-scope .as-mail-row:hover {
    border-color: rgba(0,0,0,0.18) !important;
}
html body.as-scope:not(.as-light) .as-mail-row:hover {
    border-color: rgba(255,255,255,0.20) !important;
}
html body.as-scope .as-mail-row.as-mail-row-open {
    border-color: rgba(232,156,60,0.55) !important;
    box-shadow: 0 6px 28px -14px rgba(232,156,60,0.45) !important;
}

/* head: una sola riga clickable, subject in evidenza */
html body.as-scope .as-mail-row .as-mail-head {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    grid-template-rows: auto auto !important;
    grid-template-areas:
        "subj meta"
        "from meta" !important;
    column-gap: 16px !important;
    row-gap: 2px !important;
    align-items: center !important;
    padding: 12px 16px !important;
    cursor: pointer !important;
    min-height: 0 !important;
}
html body.as-scope .as-mail-row .as-mail-subj {
    grid-area: subj !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    line-height: 1.25 !important;
    color: #14161a !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    min-width: 0 !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
}
html body.as-scope:not(.as-light) .as-mail-row .as-mail-subj {
    color: rgba(255,255,255,0.96) !important;
}
html body.as-scope .as-mail-row .as-mail-from {
    grid-area: from !important;
    font-size: 12px !important;
    font-weight: 400 !important;
    color: rgba(20,22,26,0.55) !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    min-width: 0 !important;
}
html body.as-scope:not(.as-light) .as-mail-row .as-mail-from {
    color: rgba(255,255,255,0.55) !important;
}
html body.as-scope .as-mail-row .as-mail-meta {
    grid-area: meta !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    flex-wrap: nowrap !important;
}
html body.as-scope .as-mail-row .as-mail-date {
    font-size: 11px !important;
    color: rgba(20,22,26,0.5) !important;
    font-variant-numeric: tabular-nums !important;
    white-space: nowrap !important;
}
html body.as-scope:not(.as-light) .as-mail-row .as-mail-date {
    color: rgba(255,255,255,0.5) !important;
}

/* badge "Re" — pillola sottile invece di blocco grosso */
html body.as-scope .as-mail-row .as-mail-reply {
    display: inline-flex !important;
    align-items: center !important;
    padding: 1px 6px !important;
    font-size: 9.5px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.06em !important;
    border-radius: 4px !important;
    background: rgba(232,156,60,0.18) !important;
    color: #b06a1a !important;
    flex-shrink: 0 !important;
}
html body.as-scope:not(.as-light) .as-mail-row .as-mail-reply {
    background: rgba(232,156,60,0.22) !important;
    color: #f0b56b !important;
}

/* azioni inline (ordine, foto): chip outline pulito */
html body.as-scope .as-mail-row .as-mail-action {
    display: inline-flex !important;
    align-items: center !important;
    gap: 4px !important;
    padding: 3px 8px !important;
    font-size: 11px !important;
    font-weight: 500 !important;
    border: 1px solid rgba(0,0,0,0.14) !important;
    border-radius: 6px !important;
    background: transparent !important;
    color: rgba(20,22,26,0.78) !important;
    cursor: pointer !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
    line-height: 1.2 !important;
    transition: background 120ms ease, border-color 120ms ease !important;
}
html body.as-scope:not(.as-light) .as-mail-row .as-mail-action {
    border-color: rgba(255,255,255,0.18) !important;
    color: rgba(255,255,255,0.82) !important;
}
html body.as-scope .as-mail-row .as-mail-action:hover {
    background: rgba(0,0,0,0.04) !important;
    border-color: rgba(0,0,0,0.28) !important;
}
html body.as-scope:not(.as-light) .as-mail-row .as-mail-action:hover {
    background: rgba(255,255,255,0.06) !important;
    border-color: rgba(255,255,255,0.32) !important;
}
html body.as-scope .as-mail-row .as-mail-action .as-tool-ico svg {
    width: 11px !important;
    height: 11px !important;
}

/* status pillole inline (todo / spam) */
html body.as-scope .as-mail-row .as-mail-todo,
html body.as-scope .as-mail-row .as-mail-spam {
    display: inline-flex !important;
    align-items: center !important;
    padding: 2px 8px !important;
    font-size: 10px !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.04em !important;
    border-radius: 999px !important;
}
html body.as-scope .as-mail-row .as-mail-todo {
    background: rgba(214,69,65,0.12) !important;
    color: #b6322f !important;
}
html body.as-scope:not(.as-light) .as-mail-row .as-mail-todo {
    background: rgba(214,69,65,0.18) !important;
    color: #f08885 !important;
}
html body.as-scope .as-mail-row .as-mail-spam {
    background: rgba(0,0,0,0.06) !important;
    color: rgba(20,22,26,0.5) !important;
}
html body.as-scope:not(.as-light) .as-mail-row .as-mail-spam {
    background: rgba(255,255,255,0.06) !important;
    color: rgba(255,255,255,0.45) !important;
}

/* body aperta */
html body.as-scope .as-mail-row .as-mail-body {
    display: block !important;
    padding: 0 !important;
    border-top: 1px solid rgba(0,0,0,0.08) !important;
    background: rgba(0,0,0,0.015) !important;
}
html body.as-scope:not(.as-light) .as-mail-row .as-mail-body {
    border-top-color: rgba(255,255,255,0.08) !important;
    background: rgba(0,0,0,0.18) !important;
}

/* meta detail: una riga compatta orizzontale con separatori */
html body.as-scope .as-mail-row .as-mail-meta-detail {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    gap: 14px !important;
    padding: 10px 16px !important;
    font-size: 11.5px !important;
    color: rgba(20,22,26,0.65) !important;
    border-bottom: 1px solid rgba(0,0,0,0.06) !important;
    line-height: 1.4 !important;
}
html body.as-scope:not(.as-light) .as-mail-row .as-mail-meta-detail {
    color: rgba(255,255,255,0.62) !important;
    border-bottom-color: rgba(255,255,255,0.06) !important;
}
html body.as-scope .as-mail-row .as-mail-meta-item {
    display: inline-flex !important;
    align-items: baseline !important;
    gap: 5px !important;
    min-width: 0 !important;
    max-width: 100% !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}
html body.as-scope .as-mail-row .as-mail-meta-item b {
    font-size: 9.5px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.08em !important;
    opacity: 0.55 !important;
    flex-shrink: 0 !important;
}
html body.as-scope .as-mail-row .as-mail-meta-item code {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace !important;
    font-size: 11px !important;
    background: rgba(0,0,0,0.04) !important;
    padding: 1px 6px !important;
    border-radius: 4px !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}
html body.as-scope:not(.as-light) .as-mail-row .as-mail-meta-item code {
    background: rgba(255,255,255,0.06) !important;
}
html body.as-scope .as-mail-row .as-mail-meta-item a {
    color: #b06a1a !important;
    text-decoration: none !important;
    font-weight: 500 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}
html body.as-scope:not(.as-light) .as-mail-row .as-mail-meta-item a {
    color: #f0b56b !important;
}
html body.as-scope .as-mail-row .as-mail-meta-item a:hover {
    text-decoration: underline !important;
}
html body.as-scope .as-mail-row .as-mail-meta-msgid {
    font-size: 10.5px !important;
    color: rgba(20,22,26,0.45) !important;
    cursor: pointer !important;
}
html body.as-scope:not(.as-light) .as-mail-row .as-mail-meta-msgid {
    color: rgba(255,255,255,0.4) !important;
}
html body.as-scope .as-mail-row .as-mail-meta-msgid summary {
    font-size: 9.5px !important;
    text-transform: uppercase !important;
    letter-spacing: 0.08em !important;
    font-weight: 700 !important;
    opacity: 0.55 !important;
    cursor: pointer !important;
    list-style: none !important;
}
html body.as-scope .as-mail-row .as-mail-meta-msgid summary::-webkit-details-marker { display: none !important; }
html body.as-scope .as-mail-row .as-mail-meta-msgid[open] summary { margin-bottom: 4px !important; }
html body.as-scope .as-mail-row .as-mail-meta-msgid code {
    display: inline-block !important;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace !important;
    font-size: 10.5px !important;
    background: rgba(0,0,0,0.04) !important;
    padding: 2px 6px !important;
    border-radius: 4px !important;
    word-break: break-all !important;
    max-width: 100% !important;
}
html body.as-scope:not(.as-light) .as-mail-row .as-mail-meta-msgid code {
    background: rgba(255,255,255,0.05) !important;
}

/* corpo testo: leggibile, paragrafi spaziati, no overflow orizzontale */
html body.as-scope .as-mail-row .as-mail-text {
    display: block !important;
    margin: 0 !important;
    padding: 16px 20px 18px !important;
    font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, sans-serif !important;
    font-size: 13.5px !important;
    line-height: 1.55 !important;
    color: rgba(20,22,26,0.86) !important;
    background: transparent !important;
    border: none !important;
    white-space: pre-wrap !important;
    word-wrap: break-word !important;
    overflow-wrap: anywhere !important;
    max-height: 480px !important;
    overflow-y: auto !important;
    tab-size: 2 !important;
}
html body.as-scope:not(.as-light) .as-mail-row .as-mail-text {
    color: rgba(255,255,255,0.86) !important;
}


/* === 6. EDITOR ORDINE: header pulito, una sola X di chiusura === */

html body.as-scope .as-editor-fullpanel .as-editor-topbar {
    display: flex !important;
    align-items: flex-start !important;
    justify-content: space-between !important;
    gap: 16px !important;
    padding: 18px 20px 14px !important;
    border-bottom: 1px solid rgba(0,0,0,0.06) !important;
    background: transparent !important;
}
html body.as-scope:not(.as-light) .as-editor-fullpanel .as-editor-topbar {
    border-bottom-color: rgba(255,255,255,0.06) !important;
}

html body.as-scope .as-editor-topbar .as-editor-title {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 4px !important;
    min-width: 0 !important;
    flex: 1 1 auto !important;
}
html body.as-scope .as-editor-topbar .as-editor-title-meta {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    line-height: 1 !important;
}
html body.as-scope .as-editor-topbar .as-editor-title-lbl {
    font-size: 10.5px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.10em !important;
    color: rgba(20,22,26,0.45) !important;
}
html body.as-scope:not(.as-light) .as-editor-topbar .as-editor-title-lbl {
    color: rgba(255,255,255,0.45) !important;
}
html body.as-scope .as-editor-topbar .as-editor-title-num {
    font-size: 13px !important;
    font-weight: 700 !important;
    color: rgba(20,22,26,0.85) !important;
    font-variant-numeric: tabular-nums !important;
    background: none !important;
    padding: 0 !important;
}
html body.as-scope:not(.as-light) .as-editor-topbar .as-editor-title-num {
    color: rgba(255,255,255,0.92) !important;
}
html body.as-scope .as-editor-topbar .as-editor-title-sub {
    font-size: 10.5px !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.06em !important;
    padding: 2px 7px !important;
    border-radius: 4px !important;
    background: rgba(232,156,60,0.14) !important;
    color: #b06a1a !important;
}
html body.as-scope:not(.as-light) .as-editor-topbar .as-editor-title-sub {
    background: rgba(232,156,60,0.20) !important;
    color: #f0b56b !important;
}
html body.as-scope .as-editor-topbar .as-editor-title-cli {
    font-size: 19px !important;
    font-weight: 700 !important;
    line-height: 1.2 !important;
    color: #14161a !important;
    letter-spacing: -0.005em !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    max-width: 100% !important;
}
html body.as-scope:not(.as-light) .as-editor-topbar .as-editor-title-cli {
    color: rgba(255,255,255,0.96) !important;
}
html body.as-scope .as-editor-topbar .as-editor-dirty {
    font-size: 14px !important;
    color: #e89c3c !important;
    line-height: 1 !important;
}
html body.as-scope .as-editor-topbar .as-editor-edited {
    display: inline-flex !important;
    align-items: center !important;
    gap: 4px !important;
    font-size: 10.5px !important;
    font-weight: 600 !important;
    color: rgba(20,22,26,0.55) !important;
    padding: 2px 7px !important;
    border-radius: 999px !important;
    background: rgba(0,0,0,0.05) !important;
}
html body.as-scope:not(.as-light) .as-editor-topbar .as-editor-edited {
    color: rgba(255,255,255,0.62) !important;
    background: rgba(255,255,255,0.06) !important;
}
html body.as-scope .as-editor-topbar .as-editor-edited svg {
    width: 11px !important;
    height: 11px !important;
}

html body.as-scope .as-editor-topbar .as-editor-actions {
    display: inline-flex !important;
    align-items: center !important;
    gap: 10px !important;
    flex-shrink: 0 !important;
}

/* X tonda, sobria, sempre disponibile */
html body.as-scope .as-editor-topbar .as-editor-close {
    appearance: none !important;
    -webkit-appearance: none !important;
    border: 1px solid rgba(0,0,0,0.12) !important;
    background: transparent !important;
    color: rgba(20,22,26,0.65) !important;
    width: 32px !important;
    height: 32px !important;
    border-radius: 999px !important;
    font-size: 18px !important;
    line-height: 1 !important;
    font-weight: 400 !important;
    cursor: pointer !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 !important;
    transition: background 120ms ease, border-color 120ms ease, color 120ms ease !important;
}
html body.as-scope .as-editor-topbar .as-editor-close:hover {
    background: rgba(214,69,65,0.10) !important;
    border-color: rgba(214,69,65,0.45) !important;
    color: #b6322f !important;
}
html body.as-scope:not(.as-light) .as-editor-topbar .as-editor-close {
    border-color: rgba(255,255,255,0.18) !important;
    color: rgba(255,255,255,0.7) !important;
}
html body.as-scope:not(.as-light) .as-editor-topbar .as-editor-close:hover {
    background: rgba(214,69,65,0.16) !important;
    border-color: rgba(214,69,65,0.55) !important;
    color: #f08885 !important;
}


/* === 7e. EDITOR — TUTTE LE SEZIONI: form pulito, label uppercase mini, input coerente === */

/* griglia campi (Cliente, Classificazione, Documento, Costi, Ritenute) */
html body.as-scope .as-ed-sec .as-ed-grid {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 14px 16px !important;
    padding: 18px 20px !important;
}
@media (max-width: 900px) {
    html body.as-scope .as-ed-sec .as-ed-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        padding: 16px !important;
    }
}
@media (max-width: 540px) {
    html body.as-scope .as-ed-sec .as-ed-grid {
        grid-template-columns: 1fr !important;
    }
}

/* singolo campo: label + input verticale */
html body.as-scope .as-ed-sec .as-ed-field {
    display: flex !important;
    flex-direction: column !important;
    gap: 5px !important;
    min-width: 0 !important;
}
html body.as-scope .as-ed-sec .as-ed-field-wide {
    grid-column: span 2 !important;
}
@media (min-width: 1100px) {
    html body.as-scope .as-ed-sec .as-ed-field-wide {
        grid-column: span 4 !important;
    }
}
html body.as-scope .as-ed-sec .as-ed-field > span {
    font-size: 10px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.08em !important;
    color: rgba(20,22,26,0.50) !important;
    line-height: 1.2 !important;
}
html body.as-scope:not(.as-light) .as-ed-sec .as-ed-field > span {
    color: rgba(255,255,255,0.50) !important;
}
html body.as-scope .as-ed-sec .as-ed-field input[type="text"],
html body.as-scope .as-ed-sec .as-ed-field input[type="date"],
html body.as-scope .as-ed-sec .as-ed-field input:not([type="checkbox"]),
html body.as-scope .as-ed-sec .as-ed-field textarea,
html body.as-scope .as-ed-sec .as-ed-field select {
    width: 100% !important;
    box-sizing: border-box !important;
    padding: 8px 10px !important;
    font-size: 13px !important;
    line-height: 1.4 !important;
    border: 1px solid rgba(0,0,0,0.10) !important;
    border-radius: 6px !important;
    background: #fff !important;
    color: #14161a !important;
    font-family: inherit !important;
    transition: border-color 120ms ease, box-shadow 120ms ease !important;
}
html body.as-scope:not(.as-light) .as-ed-sec .as-ed-field input,
html body.as-scope:not(.as-light) .as-ed-sec .as-ed-field textarea,
html body.as-scope:not(.as-light) .as-ed-sec .as-ed-field select {
    background: rgba(255,255,255,0.04) !important;
    border-color: rgba(255,255,255,0.12) !important;
    color: rgba(255,255,255,0.95) !important;
}
html body.as-scope .as-ed-sec .as-ed-field input:focus,
html body.as-scope .as-ed-sec .as-ed-field textarea:focus,
html body.as-scope .as-ed-sec .as-ed-field select:focus {
    outline: none !important;
    border-color: #e89c3c !important;
    box-shadow: 0 0 0 2px rgba(232,156,60,0.22) !important;
}
html body.as-scope .as-ed-sec .as-ed-field textarea {
    resize: vertical !important;
    min-height: 60px !important;
}

/* checkbox-field (es. "Prezzi IVA inclusa") */
html body.as-scope .as-ed-sec .as-ed-field-check {
    flex-direction: row !important;
    align-items: center !important;
    gap: 8px !important;
    padding-top: 18px !important;
    cursor: pointer !important;
    user-select: none !important;
}
html body.as-scope .as-ed-sec .as-ed-field-check > span {
    text-transform: none !important;
    letter-spacing: 0 !important;
    font-size: 12.5px !important;
    font-weight: 500 !important;
    color: rgba(20,22,26,0.85) !important;
}
html body.as-scope:not(.as-light) .as-ed-sec .as-ed-field-check > span {
    color: rgba(255,255,255,0.88) !important;
}
html body.as-scope .as-ed-sec .as-ed-field-check input[type="checkbox"] {
    appearance: none !important;
    -webkit-appearance: none !important;
    width: 18px !important;
    height: 18px !important;
    border-radius: 4px !important;
    border: 1.5px solid rgba(0,0,0,0.30) !important;
    background: #fff !important;
    cursor: pointer !important;
    position: relative !important;
    flex-shrink: 0 !important;
    margin: 0 !important;
}
html body.as-scope .as-ed-sec .as-ed-field-check input[type="checkbox"]:checked {
    background: #14161a !important;
    border-color: #14161a !important;
}
html body.as-scope .as-ed-sec .as-ed-field-check input[type="checkbox"]:checked::after {
    content: '' !important;
    position: absolute !important;
    top: 1px !important;
    left: 5px !important;
    width: 4px !important;
    height: 9px !important;
    border: solid #fff !important;
    border-width: 0 2px 2px 0 !important;
    transform: rotate(45deg) !important;
}

/* autocomplete cliente: input prominente, sfondo bianco */
html body.as-scope .as-ed-sec .as-ed-autocomplete-wrap {
    padding: 0 20px !important;
    margin-top: 8px !important;
}
html body.as-scope .as-ed-sec .as-ed-autocomplete-input {
    width: 100% !important;
    box-sizing: border-box !important;
    padding: 10px 14px !important;
    font-size: 13px !important;
    border: 1px solid rgba(0,0,0,0.12) !important;
    border-radius: 8px !important;
    background: #fff !important;
    color: #14161a !important;
    transition: border-color 120ms ease, box-shadow 120ms ease !important;
}
html body.as-scope:not(.as-light) .as-ed-sec .as-ed-autocomplete-input {
    background: rgba(255,255,255,0.05) !important;
    border-color: rgba(255,255,255,0.14) !important;
    color: rgba(255,255,255,0.95) !important;
}
html body.as-scope .as-ed-sec .as-ed-autocomplete-input:focus {
    outline: none !important;
    border-color: #e89c3c !important;
    box-shadow: 0 0 0 2px rgba(232,156,60,0.22) !important;
}

/* sezione TOTALI: card colorata sobria */
html body.as-scope .as-ed-totals-sec .as-ed-sec-head {
    background: transparent !important;
}
html body.as-scope .as-ed-totals {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 12px !important;
    padding: 16px 20px 8px !important;
}
@media (max-width: 600px) {
    html body.as-scope .as-ed-totals {
        grid-template-columns: 1fr !important;
    }
}
html body.as-scope .as-ed-totals .as-ed-tot-box {
    display: flex !important;
    flex-direction: column !important;
    gap: 6px !important;
    padding: 14px 16px !important;
    background: rgba(0,0,0,0.025) !important;
    border: 1px solid rgba(0,0,0,0.05) !important;
    border-radius: 10px !important;
}
html body.as-scope:not(.as-light) .as-ed-totals .as-ed-tot-box {
    background: rgba(255,255,255,0.03) !important;
    border-color: rgba(255,255,255,0.06) !important;
}
html body.as-scope .as-ed-totals .as-ed-tot-box > span {
    font-size: 10.5px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.08em !important;
    color: rgba(20,22,26,0.50) !important;
}
html body.as-scope:not(.as-light) .as-ed-totals .as-ed-tot-box > span {
    color: rgba(255,255,255,0.50) !important;
}
html body.as-scope .as-ed-totals .as-ed-tot-box > b {
    font-size: 19px !important;
    font-weight: 700 !important;
    font-variant-numeric: tabular-nums !important;
    color: #14161a !important;
}
html body.as-scope:not(.as-light) .as-ed-totals .as-ed-tot-box > b {
    color: rgba(255,255,255,0.96) !important;
}
html body.as-scope .as-ed-totals .as-ed-tot-grand {
    background: rgba(232,156,60,0.10) !important;
    border-color: rgba(232,156,60,0.30) !important;
}
html body.as-scope:not(.as-light) .as-ed-totals .as-ed-tot-grand {
    background: rgba(232,156,60,0.16) !important;
    border-color: rgba(232,156,60,0.40) !important;
}
html body.as-scope .as-ed-totals .as-ed-tot-grand > b {
    color: #b06a1a !important;
}
html body.as-scope:not(.as-light) .as-ed-totals .as-ed-tot-grand > b {
    color: #f0b56b !important;
}
html body.as-scope .as-ed-tot-hint {
    padding: 6px 20px 16px !important;
    font-size: 11.5px !important;
    color: rgba(20,22,26,0.55) !important;
    line-height: 1.5 !important;
}
html body.as-scope:not(.as-light) .as-ed-tot-hint {
    color: rgba(255,255,255,0.55) !important;
}

/* email origine: details accordion pulito */
html body.as-scope .as-ed-emails {
    padding: 12px 20px 16px !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
}
html body.as-scope .as-ed-email {
    border: 1px solid rgba(0,0,0,0.08) !important;
    border-radius: 8px !important;
    background: rgba(0,0,0,0.02) !important;
    overflow: hidden !important;
}
html body.as-scope:not(.as-light) .as-ed-email {
    border-color: rgba(255,255,255,0.08) !important;
    background: rgba(255,255,255,0.02) !important;
}
html body.as-scope .as-ed-email-sum {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    padding: 10px 14px !important;
    cursor: pointer !important;
    list-style: none !important;
    user-select: none !important;
}
html body.as-scope .as-ed-email-sum::-webkit-details-marker { display: none !important; }
html body.as-scope .as-ed-email-from {
    font-size: 12px !important;
    font-weight: 600 !important;
    color: rgba(20,22,26,0.85) !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    max-width: 280px !important;
}
html body.as-scope:not(.as-light) .as-ed-email-from {
    color: rgba(255,255,255,0.88) !important;
}
html body.as-scope .as-ed-email-subj {
    font-size: 12.5px !important;
    font-weight: 700 !important;
    color: #14161a !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    flex: 1 1 auto !important;
    min-width: 0 !important;
}
html body.as-scope:not(.as-light) .as-ed-email-subj {
    color: rgba(255,255,255,0.96) !important;
}
html body.as-scope .as-ed-email-date {
    font-size: 11px !important;
    color: rgba(20,22,26,0.55) !important;
    font-variant-numeric: tabular-nums !important;
    white-space: nowrap !important;
    flex-shrink: 0 !important;
}
html body.as-scope:not(.as-light) .as-ed-email-date {
    color: rgba(255,255,255,0.55) !important;
}
html body.as-scope .as-ed-email-body {
    padding: 12px 14px !important;
    border-top: 1px solid rgba(0,0,0,0.06) !important;
    background: rgba(0,0,0,0.015) !important;
}
html body.as-scope:not(.as-light) .as-ed-email-body {
    border-top-color: rgba(255,255,255,0.06) !important;
    background: rgba(255,255,255,0.02) !important;
}
html body.as-scope .as-ed-email-meta {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 14px !important;
    font-size: 11.5px !important;
    color: rgba(20,22,26,0.65) !important;
    padding-bottom: 10px !important;
    border-bottom: 1px solid rgba(0,0,0,0.05) !important;
    margin-bottom: 10px !important;
}
html body.as-scope:not(.as-light) .as-ed-email-meta {
    color: rgba(255,255,255,0.65) !important;
    border-bottom-color: rgba(255,255,255,0.05) !important;
}
html body.as-scope .as-ed-email-meta b {
    font-size: 9.5px !important;
    text-transform: uppercase !important;
    letter-spacing: 0.08em !important;
    color: rgba(20,22,26,0.45) !important;
    margin-right: 4px !important;
}
html body.as-scope:not(.as-light) .as-ed-email-meta b {
    color: rgba(255,255,255,0.45) !important;
}
html body.as-scope .as-ed-email-meta code {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace !important;
    font-size: 11px !important;
    background: rgba(0,0,0,0.05) !important;
    padding: 1px 6px !important;
    border-radius: 4px !important;
}
html body.as-scope:not(.as-light) .as-ed-email-meta code {
    background: rgba(255,255,255,0.06) !important;
}
html body.as-scope .as-ed-email-text {
    font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, sans-serif !important;
    font-size: 13px !important;
    line-height: 1.55 !important;
    color: rgba(20,22,26,0.86) !important;
    background: transparent !important;
    border: none !important;
    margin: 0 !important;
    padding: 0 !important;
    white-space: pre-wrap !important;
    word-wrap: break-word !important;
    overflow-wrap: anywhere !important;
    max-height: 360px !important;
    overflow-y: auto !important;
}
html body.as-scope:not(.as-light) .as-ed-email-text {
    color: rgba(255,255,255,0.86) !important;
}

/* footer info ordine (file XML, backup info) */
html body.as-scope .as-editor-foot-info {
    padding: 12px 20px 18px !important;
    font-size: 11.5px !important;
    color: rgba(20,22,26,0.55) !important;
    line-height: 1.5 !important;
    border-top: 1px solid rgba(0,0,0,0.05) !important;
    margin-top: 14px !important;
}
html body.as-scope:not(.as-light) .as-editor-foot-info {
    color: rgba(255,255,255,0.55) !important;
    border-top-color: rgba(255,255,255,0.05) !important;
}
html body.as-scope .as-editor-foot-info code {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace !important;
    font-size: 11px !important;
    background: rgba(0,0,0,0.05) !important;
    padding: 1px 6px !important;
    border-radius: 4px !important;
}
html body.as-scope:not(.as-light) .as-editor-foot-info code {
    background: rgba(255,255,255,0.06) !important;
}


/* === 7d. EDITOR RIGHE COMMESSA: tabella riga prodotti, layout pulito === */

html body.as-scope .as-ed-sec {
    background: rgba(0,0,0,0.02) !important;
    border: 1px solid rgba(0,0,0,0.06) !important;
    border-radius: 12px !important;
    padding: 0 !important;
    margin: 14px 0 !important;
    overflow: hidden !important;
}
html body.as-scope:not(.as-light) .as-ed-sec {
    background: rgba(255,255,255,0.025) !important;
    border-color: rgba(255,255,255,0.08) !important;
}

html body.as-scope .as-ed-sec .as-ed-sec-head {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 12px !important;
    padding: 14px 16px 10px !important;
    border-bottom: 1px solid rgba(0,0,0,0.05) !important;
    background: transparent !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
}
html body.as-scope:not(.as-light) .as-ed-sec .as-ed-sec-head {
    border-bottom-color: rgba(255,255,255,0.05) !important;
}
html body.as-scope .as-ed-sec .as-ed-sec-head > span:first-child {
    font-size: 13px !important;
    font-weight: 700 !important;
    color: #14161a !important;
    letter-spacing: -0.005em !important;
}
html body.as-scope:not(.as-light) .as-ed-sec .as-ed-sec-head > span:first-child {
    color: rgba(255,255,255,0.95) !important;
}
html body.as-scope .as-ed-sec .as-ed-sec-head .as-btn-sm {
    padding: 5px 11px !important;
    font-size: 11.5px !important;
    font-weight: 500 !important;
    border: 1px solid rgba(0,0,0,0.14) !important;
    background: transparent !important;
    color: rgba(20,22,26,0.78) !important;
    border-radius: 6px !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
    cursor: pointer !important;
    transition: background 120ms ease, border-color 120ms ease !important;
}
html body.as-scope .as-ed-sec .as-ed-sec-head .as-btn-sm:hover {
    background: rgba(0,0,0,0.04) !important;
    border-color: rgba(0,0,0,0.28) !important;
}
html body.as-scope:not(.as-light) .as-ed-sec .as-ed-sec-head .as-btn-sm {
    border-color: rgba(255,255,255,0.18) !important;
    color: rgba(255,255,255,0.82) !important;
}
html body.as-scope:not(.as-light) .as-ed-sec .as-ed-sec-head .as-btn-sm:hover {
    background: rgba(255,255,255,0.06) !important;
    border-color: rgba(255,255,255,0.32) !important;
}

/* hint compatto, non più "evidenziato" */
html body.as-scope .as-ed-sec .as-ed-sec-hint {
    padding: 8px 16px !important;
    font-size: 11.5px !important;
    color: rgba(20,22,26,0.55) !important;
    line-height: 1.5 !important;
    background: transparent !important;
    border: none !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
    font-weight: 400 !important;
    font-style: normal !important;
}
html body.as-scope:not(.as-light) .as-ed-sec .as-ed-sec-hint {
    color: rgba(255,255,255,0.55) !important;
}

/* tabella righe */
html body.as-scope .as-ed-rows-wrap {
    padding: 0 !important;
    overflow-x: auto !important;
    background: transparent !important;
}
html body.as-scope .as-ed-rows {
    width: 100% !important;
    border-collapse: separate !important;
    border-spacing: 0 !important;
    font-size: 13px !important;
}
html body.as-scope .as-ed-rows thead th {
    padding: 10px 10px !important;
    font-size: 10px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.08em !important;
    color: rgba(20,22,26,0.50) !important;
    border-bottom: 1px solid rgba(0,0,0,0.08) !important;
    text-align: left !important;
    background: rgba(0,0,0,0.02) !important;
    white-space: nowrap !important;
}
html body.as-scope:not(.as-light) .as-ed-rows thead th {
    color: rgba(255,255,255,0.50) !important;
    border-bottom-color: rgba(255,255,255,0.08) !important;
    background: rgba(255,255,255,0.02) !important;
}
html body.as-scope .as-ed-rows tbody td {
    padding: 8px 8px !important;
    border: none !important;
    vertical-align: middle !important;
    background: transparent !important;
}
/* separator tra righe (gruppo main+notes) */
html body.as-scope .as-ed-rows tbody tr + tr:not(.as-ed-row-notes-r) td {
    border-top: 1px solid rgba(0,0,0,0.06) !important;
    padding-top: 12px !important;
}
html body.as-scope:not(.as-light) .as-ed-rows tbody tr + tr:not(.as-ed-row-notes-r) td {
    border-top-color: rgba(255,255,255,0.06) !important;
}

/* numero riga: badge sottile */
html body.as-scope .as-ed-rows tbody td.as-ed-row-n {
    font-size: 11px !important;
    font-weight: 600 !important;
    color: rgba(20,22,26,0.45) !important;
    width: 32px !important;
    text-align: center !important;
    font-variant-numeric: tabular-nums !important;
}
html body.as-scope:not(.as-light) .as-ed-rows tbody td.as-ed-row-n {
    color: rgba(255,255,255,0.45) !important;
}

/* input riga: bordo sottile pulito + focus arancione */
html body.as-scope .as-ed-rows input[type="text"],
html body.as-scope .as-ed-rows input:not([type="checkbox"]) {
    width: 100% !important;
    box-sizing: border-box !important;
    padding: 6px 9px !important;
    font-size: 12.5px !important;
    line-height: 1.3 !important;
    border: 1px solid rgba(0,0,0,0.10) !important;
    border-radius: 6px !important;
    background: #fff !important;
    color: #14161a !important;
    transition: border-color 120ms ease, box-shadow 120ms ease !important;
    font-style: normal !important;
}
html body.as-scope:not(.as-light) .as-ed-rows input[type="text"],
html body.as-scope:not(.as-light) .as-ed-rows input:not([type="checkbox"]) {
    background: rgba(255,255,255,0.06) !important;
    border-color: rgba(255,255,255,0.12) !important;
    color: rgba(255,255,255,0.95) !important;
}
html body.as-scope .as-ed-rows input:focus {
    outline: none !important;
    border-color: #e89c3c !important;
    box-shadow: 0 0 0 2px rgba(232,156,60,0.25) !important;
}
html body.as-scope .as-ed-rows input::placeholder {
    color: rgba(20,22,26,0.35) !important;
    font-style: normal !important;
}
html body.as-scope:not(.as-light) .as-ed-rows input::placeholder {
    color: rgba(255,255,255,0.35) !important;
}

/* totale riga: tabular bold */
html body.as-scope .as-ed-rows tbody td.as-ed-row-tot {
    font-weight: 700 !important;
    font-variant-numeric: tabular-nums !important;
    color: #14161a !important;
    text-align: right !important;
    padding-right: 12px !important;
    font-size: 13px !important;
}
html body.as-scope:not(.as-light) .as-ed-rows tbody td.as-ed-row-tot {
    color: rgba(255,255,255,0.95) !important;
}

/* riga note (secondaria): no separator top, padding ridotto */
html body.as-scope .as-ed-rows tr.as-ed-row-notes-r td {
    padding-top: 4px !important;
    padding-bottom: 10px !important;
    border-top: none !important;
}
html body.as-scope .as-ed-rows .as-ed-row-notes {
    font-size: 11.5px !important;
    font-style: normal !important;
    color: rgba(20,22,26,0.75) !important;
    background: transparent !important;
    border: 1px dashed rgba(0,0,0,0.12) !important;
}
html body.as-scope:not(.as-light) .as-ed-rows .as-ed-row-notes {
    color: rgba(255,255,255,0.78) !important;
    border-color: rgba(255,255,255,0.16) !important;
}
html body.as-scope .as-ed-rows .as-ed-row-stock {
    display: inline-flex !important;
    align-items: center !important;
    gap: 4px !important;
    font-size: 10.5px !important;
    color: rgba(20,22,26,0.62) !important;
    cursor: pointer !important;
    user-select: none !important;
    text-transform: uppercase !important;
    letter-spacing: 0.04em !important;
    font-weight: 600 !important;
    margin-right: 6px !important;
}
html body.as-scope:not(.as-light) .as-ed-rows .as-ed-row-stock {
    color: rgba(255,255,255,0.65) !important;
}
html body.as-scope .as-ed-rows .as-ed-row-stock input[type="checkbox"] {
    width: 14px !important;
    height: 14px !important;
    accent-color: #e89c3c !important;
}
html body.as-scope .as-ed-rows .as-ed-row-disc,
html body.as-scope .as-ed-rows .as-ed-row-commission {
    font-size: 11px !important;
}

/* bottone X (rimuovi riga): tondo discreto */
html body.as-scope .as-ed-rows tbody td .as-mini.as-mini-red {
    width: 26px !important;
    height: 26px !important;
    border-radius: 50% !important;
    border: 1px solid transparent !important;
    background: transparent !important;
    color: rgba(20,22,26,0.4) !important;
    cursor: pointer !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 !important;
    transition: background 120ms ease, color 120ms ease, border-color 120ms ease !important;
}
html body.as-scope:not(.as-light) .as-ed-rows tbody td .as-mini.as-mini-red {
    color: rgba(255,255,255,0.4) !important;
}
html body.as-scope .as-ed-rows tbody td .as-mini.as-mini-red:hover {
    background: rgba(214,69,65,0.10) !important;
    border-color: rgba(214,69,65,0.40) !important;
    color: #b6322f !important;
}


/* === 7f. OVERVIEW (tab Riepilogo): step cards pulite, tipografia coerente === */

html body.as-scope .as-overview {
    display: flex !important;
    flex-direction: column !important;
    gap: 14px !important;
    padding: 4px 0 !important;
}

/* singolo step (Email origine, Riepilogo commessa, Foto, Istruzioni, AI) */
html body.as-scope .as-ov-step {
    background: rgba(0,0,0,0.02) !important;
    border: 1px solid rgba(0,0,0,0.06) !important;
    border-radius: 12px !important;
    overflow: hidden !important;
}
html body.as-scope:not(.as-light) .as-ov-step {
    background: rgba(255,255,255,0.025) !important;
    border-color: rgba(255,255,255,0.08) !important;
}

html body.as-scope .as-ov-step .as-ov-step-head {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    padding: 14px 18px !important;
    border-bottom: 1px solid rgba(0,0,0,0.05) !important;
    background: transparent !important;
}
html body.as-scope:not(.as-light) .as-ov-step .as-ov-step-head {
    border-bottom-color: rgba(255,255,255,0.05) !important;
}
html body.as-scope .as-ov-step .as-ov-step-n {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 24px !important;
    height: 24px !important;
    border-radius: 50% !important;
    background: rgba(0,0,0,0.06) !important;
    color: rgba(20,22,26,0.65) !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    flex-shrink: 0 !important;
    font-variant-numeric: tabular-nums !important;
}
html body.as-scope:not(.as-light) .as-ov-step .as-ov-step-n {
    background: rgba(255,255,255,0.10) !important;
    color: rgba(255,255,255,0.75) !important;
}
html body.as-scope .as-ov-step .as-ov-step-title {
    font-size: 13.5px !important;
    font-weight: 700 !important;
    color: #14161a !important;
    flex: 1 1 auto !important;
}
html body.as-scope:not(.as-light) .as-ov-step .as-ov-step-title {
    color: rgba(255,255,255,0.95) !important;
}
html body.as-scope .as-ov-step .as-ov-step-badge {
    display: inline-flex !important;
    align-items: center !important;
    padding: 2px 8px !important;
    font-size: 10.5px !important;
    font-weight: 700 !important;
    color: rgba(20,22,26,0.55) !important;
    background: rgba(0,0,0,0.06) !important;
    border-radius: 999px !important;
    font-variant-numeric: tabular-nums !important;
}
html body.as-scope:not(.as-light) .as-ov-step .as-ov-step-badge {
    color: rgba(255,255,255,0.65) !important;
    background: rgba(255,255,255,0.08) !important;
}

html body.as-scope .as-ov-step .as-ov-step-body {
    padding: 14px 18px 16px !important;
}

/* Email origine (step 1) */
html body.as-scope .as-ov-email {
    display: flex !important;
    flex-direction: column !important;
    gap: 4px !important;
}
html body.as-scope .as-ov-email-head {
    display: flex !important;
    align-items: baseline !important;
    justify-content: space-between !important;
    gap: 12px !important;
    flex-wrap: wrap !important;
}
html body.as-scope .as-ov-email-from {
    font-size: 12px !important;
    font-weight: 600 !important;
    color: rgba(20,22,26,0.78) !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    min-width: 0 !important;
    flex: 1 1 auto !important;
}
html body.as-scope:not(.as-light) .as-ov-email-from {
    color: rgba(255,255,255,0.82) !important;
}
html body.as-scope .as-ov-email-date {
    font-size: 11px !important;
    color: rgba(20,22,26,0.55) !important;
    font-variant-numeric: tabular-nums !important;
    white-space: nowrap !important;
    flex-shrink: 0 !important;
}
html body.as-scope:not(.as-light) .as-ov-email-date {
    color: rgba(255,255,255,0.55) !important;
}
html body.as-scope .as-ov-email-subj {
    font-size: 15px !important;
    font-weight: 700 !important;
    color: #14161a !important;
    line-height: 1.3 !important;
    margin-bottom: 8px !important;
}
html body.as-scope:not(.as-light) .as-ov-email-subj {
    color: rgba(255,255,255,0.96) !important;
}
html body.as-scope .as-ov-email-body {
    font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, sans-serif !important;
    font-size: 13px !important;
    line-height: 1.55 !important;
    color: rgba(20,22,26,0.86) !important;
    background: rgba(0,0,0,0.02) !important;
    border: 1px solid rgba(0,0,0,0.05) !important;
    border-radius: 8px !important;
    padding: 12px 14px !important;
    margin: 0 !important;
    white-space: pre-wrap !important;
    word-wrap: break-word !important;
    overflow-wrap: anywhere !important;
    max-height: 320px !important;
    overflow-y: auto !important;
}
html body.as-scope:not(.as-light) .as-ov-email-body {
    color: rgba(255,255,255,0.86) !important;
    background: rgba(255,255,255,0.03) !important;
    border-color: rgba(255,255,255,0.05) !important;
}

/* Riepilogo commessa (step 2): cols con label + value */
html body.as-scope .as-ov-summary {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)) !important;
    gap: 14px 20px !important;
}
html body.as-scope .as-ov-sum-col {
    display: flex !important;
    flex-direction: column !important;
    gap: 4px !important;
    min-width: 0 !important;
}
html body.as-scope .as-ov-sum-lbl {
    font-size: 10px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.08em !important;
    color: rgba(20,22,26,0.50) !important;
    line-height: 1.2 !important;
}
html body.as-scope:not(.as-light) .as-ov-sum-lbl {
    color: rgba(255,255,255,0.50) !important;
}
html body.as-scope .as-ov-sum-big {
    font-size: 16px !important;
    font-weight: 700 !important;
    color: #14161a !important;
    line-height: 1.25 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}
html body.as-scope:not(.as-light) .as-ov-sum-big {
    color: rgba(255,255,255,0.96) !important;
}
html body.as-scope .as-ov-sum-num {
    margin-right: 4px !important;
}
html body.as-scope .as-ov-sum-sez {
    font-size: 12px !important;
    font-weight: 600 !important;
    color: #b06a1a !important;
    background: rgba(232,156,60,0.14) !important;
    padding: 2px 6px !important;
    border-radius: 4px !important;
    text-transform: uppercase !important;
    letter-spacing: 0.04em !important;
    white-space: nowrap !important;
}
html body.as-scope:not(.as-light) .as-ov-sum-sez {
    color: #f0b56b !important;
    background: rgba(232,156,60,0.20) !important;
}
html body.as-scope .as-ov-sum-col > div:not(.as-ov-sum-lbl):not(.as-ov-sum-big) {
    font-size: 13px !important;
    color: rgba(20,22,26,0.86) !important;
    line-height: 1.4 !important;
    word-wrap: break-word !important;
}
html body.as-scope:not(.as-light) .as-ov-sum-col > div:not(.as-ov-sum-lbl):not(.as-ov-sum-big) {
    color: rgba(255,255,255,0.86) !important;
}

/* Empty state nelle step (es. nessuna email) */
html body.as-scope .as-ov-empty {
    padding: 14px 16px !important;
    font-size: 12.5px !important;
    color: rgba(20,22,26,0.55) !important;
    background: rgba(0,0,0,0.02) !important;
    border: 1px dashed rgba(0,0,0,0.10) !important;
    border-radius: 8px !important;
    text-align: center !important;
}
html body.as-scope:not(.as-light) .as-ov-empty {
    color: rgba(255,255,255,0.55) !important;
    background: rgba(255,255,255,0.02) !important;
    border-color: rgba(255,255,255,0.10) !important;
}


/* === 7c. ISTRUZIONI LAVORAZIONE: lista key-value pulita nell'overview === */
html body.as-scope .as-ov-instr {
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 6px !important;
}
html body.as-scope .as-ov-instr li {
    display: grid !important;
    grid-template-columns: minmax(110px, 140px) 1fr !important;
    column-gap: 16px !important;
    align-items: baseline !important;
    padding: 10px 14px !important;
    background: rgba(0,0,0,0.025) !important;
    border: 1px solid rgba(0,0,0,0.05) !important;
    border-radius: 8px !important;
    list-style: none !important;
}
html body.as-scope:not(.as-light) .as-ov-instr li {
    background: rgba(255,255,255,0.04) !important;
    border-color: rgba(255,255,255,0.06) !important;
}
html body.as-scope .as-ov-instr .as-ov-instr-src {
    font-size: 10.5px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.06em !important;
    color: rgba(20,22,26,0.55) !important;
    line-height: 1.3 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}
html body.as-scope:not(.as-light) .as-ov-instr .as-ov-instr-src {
    color: rgba(255,255,255,0.55) !important;
}
html body.as-scope .as-ov-instr .as-ov-instr-val {
    font-size: 13.5px !important;
    font-weight: 500 !important;
    line-height: 1.45 !important;
    color: rgba(20,22,26,0.92) !important;
    word-wrap: break-word !important;
    overflow-wrap: anywhere !important;
}
html body.as-scope:not(.as-light) .as-ov-instr .as-ov-instr-val {
    color: rgba(255,255,255,0.92) !important;
}
@media (max-width: 600px) {
    html body.as-scope .as-ov-instr li {
        grid-template-columns: 1fr !important;
        row-gap: 4px !important;
        padding: 9px 12px !important;
    }
}


/* === 7b. MODAL "Nuova segnalazione personalizzata" === */
html body.as-scope .as-report-modal-backdrop {
    position: fixed !important;
    inset: 0 !important;
    background: rgba(0,0,0,0.45) !important;
    z-index: 1000 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 24px !important;
    animation: as-report-modal-in 160ms ease-out !important;
}
@keyframes as-report-modal-in {
    from { opacity: 0; }
    to { opacity: 1; }
}
html body.as-scope .as-report-modal {
    background: #fff !important;
    border-radius: 14px !important;
    box-shadow: 0 24px 60px -20px rgba(0,0,0,0.35) !important;
    width: 100% !important;
    max-width: 520px !important;
    display: flex !important;
    flex-direction: column !important;
}
html body.as-scope:not(.as-light) .as-report-modal {
    background: #1a1c20 !important;
    color: rgba(255,255,255,0.95) !important;
}
html body.as-scope .as-report-modal-head {
    display: flex !important;
    align-items: flex-start !important;
    justify-content: space-between !important;
    gap: 12px !important;
    padding: 18px 20px 12px !important;
    border-bottom: 1px solid rgba(0,0,0,0.06) !important;
}
html body.as-scope:not(.as-light) .as-report-modal-head {
    border-bottom-color: rgba(255,255,255,0.08) !important;
}
html body.as-scope .as-report-modal-eyebrow {
    font-size: 10.5px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.10em !important;
    color: rgba(20,22,26,0.45) !important;
    line-height: 1 !important;
}
html body.as-scope:not(.as-light) .as-report-modal-eyebrow {
    color: rgba(255,255,255,0.45) !important;
}
html body.as-scope .as-report-modal-title {
    font-size: 19px !important;
    font-weight: 700 !important;
    line-height: 1.2 !important;
    margin-top: 4px !important;
    color: #14161a !important;
}
html body.as-scope:not(.as-light) .as-report-modal-title {
    color: rgba(255,255,255,0.96) !important;
}
html body.as-scope .as-report-modal-x {
    appearance: none !important;
    border: 1px solid rgba(0,0,0,0.12) !important;
    background: transparent !important;
    color: rgba(20,22,26,0.6) !important;
    width: 30px !important;
    height: 30px !important;
    border-radius: 999px !important;
    font-size: 18px !important;
    line-height: 1 !important;
    cursor: pointer !important;
    transition: background 120ms ease, color 120ms ease, border-color 120ms ease !important;
    padding: 0 !important;
    flex-shrink: 0 !important;
}
html body.as-scope .as-report-modal-x:hover {
    background: rgba(214,69,65,0.10) !important;
    color: #b6322f !important;
    border-color: rgba(214,69,65,0.4) !important;
}
html body.as-scope .as-report-modal-body {
    padding: 14px 20px !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 6px !important;
}
html body.as-scope .as-report-modal-lbl {
    font-size: 12px !important;
    font-weight: 600 !important;
    color: rgba(20,22,26,0.72) !important;
}
html body.as-scope:not(.as-light) .as-report-modal-lbl {
    color: rgba(255,255,255,0.72) !important;
}
html body.as-scope .as-report-modal-area {
    width: 100% !important;
    box-sizing: border-box !important;
    padding: 10px 12px !important;
    font-size: 13.5px !important;
    line-height: 1.5 !important;
    border: 1px solid rgba(0,0,0,0.14) !important;
    border-radius: 8px !important;
    background: #fff !important;
    color: #14161a !important;
    resize: vertical !important;
    min-height: 120px !important;
    font-family: inherit !important;
    transition: border-color 120ms ease, box-shadow 120ms ease !important;
}
html body.as-scope:not(.as-light) .as-report-modal-area {
    background: rgba(255,255,255,0.04) !important;
    border-color: rgba(255,255,255,0.16) !important;
    color: rgba(255,255,255,0.95) !important;
}
html body.as-scope .as-report-modal-area:focus {
    outline: none !important;
    border-color: #e89c3c !important;
    box-shadow: 0 0 0 3px rgba(232,156,60,0.20) !important;
}
html body.as-scope .as-report-modal-hint {
    font-size: 11.5px !important;
    color: rgba(20,22,26,0.50) !important;
    line-height: 1.4 !important;
    margin-top: 2px !important;
}
html body.as-scope:not(.as-light) .as-report-modal-hint {
    color: rgba(255,255,255,0.50) !important;
}
html body.as-scope .as-report-modal-foot {
    display: flex !important;
    justify-content: flex-end !important;
    gap: 8px !important;
    padding: 12px 20px 18px !important;
    border-top: 1px solid rgba(0,0,0,0.06) !important;
}
html body.as-scope:not(.as-light) .as-report-modal-foot {
    border-top-color: rgba(255,255,255,0.08) !important;
}


/* === 7. ANAGRAFICA (Clienti / Prodotti / Fornitori): bar compatta + tabella allineata a Ordini === */

html body.as-scope .as-db-tab .as-db-bar {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 12px !important;
    padding: 6px 4px 8px !important;
    flex-wrap: wrap !important;
}
html body.as-scope .as-db-tab .as-db-count {
    font-size: 11.5px !important;
    color: rgba(20,22,26,0.6) !important;
    font-variant-numeric: tabular-nums !important;
    white-space: nowrap !important;
}
html body.as-scope:not(.as-light) .as-db-tab .as-db-count {
    color: rgba(255,255,255,0.6) !important;
}
html body.as-scope .as-db-tab .as-db-count .as-dim {
    opacity: 0.7 !important;
}

html body.as-scope .as-db-tab .as-db-tools {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
}
html body.as-scope .as-db-tab .as-db-tool {
    appearance: none !important;
    -webkit-appearance: none !important;
    border: 1px solid rgba(0,0,0,0.14) !important;
    background: transparent !important;
    color: rgba(20,22,26,0.78) !important;
    padding: 5px 10px !important;
    font-size: 12px !important;
    font-weight: 500 !important;
    line-height: 1.2 !important;
    border-radius: 6px !important;
    cursor: pointer !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    transition: background 120ms ease, border-color 120ms ease !important;
    white-space: nowrap !important;
    margin: 0 !important;
}
html body.as-scope:not(.as-light) .as-db-tab .as-db-tool {
    border-color: rgba(255,255,255,0.18) !important;
    color: rgba(255,255,255,0.82) !important;
}
html body.as-scope .as-db-tab .as-db-tool:hover {
    background: rgba(0,0,0,0.04) !important;
    border-color: rgba(0,0,0,0.28) !important;
}
html body.as-scope:not(.as-light) .as-db-tab .as-db-tool:hover {
    background: rgba(255,255,255,0.06) !important;
    border-color: rgba(255,255,255,0.32) !important;
}
html body.as-scope .as-db-tab .as-db-tool svg {
    width: 13px !important;
    height: 13px !important;
}

/* tabella Clienti/Prodotti — uniforme a quella Ordini */
html body.as-scope .as-db-tab .as-table {
    width: 100% !important;
    border-collapse: separate !important;
    border-spacing: 0 !important;
    table-layout: auto !important;
}
html body.as-scope .as-db-tab .as-table-wrap {
    max-width: 100% !important;
}
html body.as-scope .as-db-tab .as-table thead th {
    font-size: 10.5px !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.06em !important;
    color: rgba(20,22,26,0.55) !important;
    padding: 10px 12px !important;
    background: transparent !important;
    border-bottom: 1px solid rgba(0,0,0,0.10) !important;
    text-align: left !important;
    white-space: nowrap !important;
}
html body.as-scope:not(.as-light) .as-db-tab .as-table thead th {
    color: rgba(255,255,255,0.55) !important;
    border-bottom-color: rgba(255,255,255,0.10) !important;
}
html body.as-scope .as-db-tab .as-table tbody td {
    padding: 9px 10px !important;
    font-size: 13px !important;
    color: rgba(20,22,26,0.86) !important;
    border-bottom: 1px solid rgba(0,0,0,0.05) !important;
    vertical-align: middle !important;
    background: transparent !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    max-width: 180px !important;
}
html body.as-scope:not(.as-light) .as-db-tab .as-table tbody td {
    color: rgba(255,255,255,0.88) !important;
    border-bottom-color: rgba(255,255,255,0.05) !important;
}
html body.as-scope .as-db-tab .as-table tbody tr:hover td {
    background: rgba(0,0,0,0.025) !important;
}
html body.as-scope:not(.as-light) .as-db-tab .as-table tbody tr:hover td {
    background: rgba(255,255,255,0.03) !important;
}

/* chiave primaria (cod) — bold tabular */
html body.as-scope .as-db-tab .as-table tbody td.as-cell-key {
    font-weight: 700 !important;
    font-variant-numeric: tabular-nums !important;
    color: rgba(20,22,26,0.95) !important;
    width: 90px !important;
}
html body.as-scope:not(.as-light) .as-db-tab .as-table tbody td.as-cell-key {
    color: rgba(255,255,255,0.95) !important;
}

/* azioni colonna: bottoni mini coerenti */
html body.as-scope .as-db-tab .as-table tbody td.as-actions {
    text-align: right !important;
    white-space: nowrap !important;
}
html body.as-scope .as-db-tab .as-table tbody td.as-actions .as-mini {
    width: 28px !important;
    height: 28px !important;
    border-radius: 6px !important;
    border: 1px solid rgba(0,0,0,0.10) !important;
    background: transparent !important;
    color: rgba(20,22,26,0.7) !important;
    cursor: pointer !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin-left: 4px !important;
    padding: 0 !important;
    transition: background 120ms ease, border-color 120ms ease, color 120ms ease !important;
}
html body.as-scope:not(.as-light) .as-db-tab .as-table tbody td.as-actions .as-mini {
    border-color: rgba(255,255,255,0.14) !important;
    color: rgba(255,255,255,0.75) !important;
}
html body.as-scope .as-db-tab .as-table tbody td.as-actions .as-mini:hover {
    background: rgba(0,0,0,0.04) !important;
    border-color: rgba(0,0,0,0.20) !important;
    color: #14161a !important;
}
html body.as-scope .as-db-tab .as-table tbody td.as-actions .as-mini.as-mini-red:hover {
    background: rgba(214,69,65,0.10) !important;
    border-color: rgba(214,69,65,0.40) !important;
    color: #b6322f !important;
}

/* colonna select FINALE (gear + master + checkbox riga) — coerente con tabella Ordini
   STICKY a destra: sempre visibile anche con scroll H, con bg matched al body così non sembra una colonna staccata */
/* table-wrap: bg trasparente per non creare contrasto con sticky cells */
html body.as-scope .as-db-tab .as-table-wrap {
    background: transparent !important;
}
html body.as-scope .as-db-tab .as-table thead th.as-th-sel {
    width: 64px !important;
    overflow: visible !important;
    position: sticky !important;
    right: 0 !important;
    z-index: 2 !important;
    background: transparent !important;
    text-align: left !important;
}
html body.as-scope .as-db-tab .as-table tbody td.as-cell-sel {
    width: 64px !important;
    text-align: right !important;
    padding-right: 16px !important;
    position: sticky !important;
    right: 0 !important;
    z-index: 1 !important;
    background: transparent !important;
}
/* sticky bg attivo SOLO quando wrap ha effettivamente scroll H, gestito via classe dinamica;
   per ora bg trasparente: sembra parte della tabella */
html body.as-scope .as-db-tab .as-table tbody tr.as-row-sel td.as-cell-sel {
    background: rgba(232,156,60,0.08) !important;
}
html body.as-scope:not(.as-light) .as-db-tab .as-table tbody tr.as-row-sel td.as-cell-sel {
    background: rgba(232,156,60,0.14) !important;
}
/* checkbox stile Ordini: 20x20, custom, centrate */
html body.as-scope .as-db-tab .as-table thead th.as-th-sel input[type="checkbox"],
html body.as-scope .as-db-tab .as-table tbody td.as-cell-sel input[type="checkbox"] {
    appearance: none !important;
    -webkit-appearance: none !important;
    width: 20px !important;
    height: 20px !important;
    border-radius: 4px !important;
    border: 1.5px solid rgba(0,0,0,0.32) !important;
    background: #ffffff !important;
    cursor: pointer !important;
    position: relative !important;
    margin: 0 !important;
    flex-shrink: 0 !important;
    transition: background 120ms ease, border-color 120ms ease !important;
}
html body.as-scope:not(.as-light) .as-db-tab .as-table thead th.as-th-sel input[type="checkbox"],
html body.as-scope:not(.as-light) .as-db-tab .as-table tbody td.as-cell-sel input[type="checkbox"] {
    border-color: rgba(255,255,255,0.32) !important;
    background: rgba(255,255,255,0.05) !important;
}
html body.as-scope .as-db-tab .as-table thead th.as-th-sel input[type="checkbox"]:checked,
html body.as-scope .as-db-tab .as-table tbody td.as-cell-sel input[type="checkbox"]:checked {
    background: #14161a !important;
    border-color: #14161a !important;
}
html body.as-scope:not(.as-light) .as-db-tab .as-table thead th.as-th-sel input[type="checkbox"]:checked,
html body.as-scope:not(.as-light) .as-db-tab .as-table tbody td.as-cell-sel input[type="checkbox"]:checked {
    background: #f0f0f0 !important;
    border-color: #f0f0f0 !important;
}
html body.as-scope .as-db-tab .as-table thead th.as-th-sel input[type="checkbox"]:checked::after,
html body.as-scope .as-db-tab .as-table tbody td.as-cell-sel input[type="checkbox"]:checked::after {
    content: '' !important;
    position: absolute !important;
    top: 2px !important;
    left: 6px !important;
    width: 5px !important;
    height: 10px !important;
    border: solid #ffffff !important;
    border-width: 0 2px 2px 0 !important;
    transform: rotate(45deg) !important;
}
html body.as-scope:not(.as-light) .as-db-tab .as-table thead th.as-th-sel input[type="checkbox"]:checked::after,
html body.as-scope:not(.as-light) .as-db-tab .as-table tbody td.as-cell-sel input[type="checkbox"]:checked::after {
    border-color: #14161a !important;
}
/* centratura checkbox nella cell sticky */
html body.as-scope .as-db-tab .as-table tbody td.as-cell-sel {
    text-align: center !important;
    padding-right: 12px !important;
    padding-left: 12px !important;
}
html body.as-scope .as-db-tab .as-table thead th.as-th-sel > div {
    justify-content: center !important;
}
/* gear trigger nel header della tabella Clienti/Prodotti */
html body.as-scope .as-db-tab .as-col-picker-trigger {
    appearance: none !important;
    -webkit-appearance: none !important;
    border: none !important;
    background: transparent !important;
    color: rgba(20,22,26,0.6) !important;
    width: 24px !important;
    height: 24px !important;
    border-radius: 6px !important;
    cursor: pointer !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 !important;
    transition: background 120ms ease, color 120ms ease !important;
}
html body.as-scope:not(.as-light) .as-db-tab .as-col-picker-trigger {
    color: rgba(255,255,255,0.6) !important;
}
html body.as-scope .as-db-tab .as-col-picker-trigger:hover {
    background: rgba(0,0,0,0.06) !important;
    color: rgba(20,22,26,0.9) !important;
}
html body.as-scope:not(.as-light) .as-db-tab .as-col-picker-trigger:hover {
    background: rgba(255,255,255,0.08) !important;
    color: rgba(255,255,255,0.95) !important;
}
/* dropdown col-picker */
html body.as-scope .as-db-tab .as-col-picker {
    position: absolute !important;
    top: calc(100% + 8px) !important;
    right: 0 !important;
    z-index: 1000 !important;
    min-width: 220px !important;
    max-height: 360px !important;
    overflow-y: auto !important;
    background: #fff !important;
    border: 1px solid rgba(0,0,0,0.10) !important;
    border-radius: 10px !important;
    box-shadow: 0 12px 32px -10px rgba(0,0,0,0.20) !important;
    padding: 8px !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
}
html body.as-scope:not(.as-light) .as-db-tab .as-col-picker {
    background: #1c1e23 !important;
    border-color: rgba(255,255,255,0.12) !important;
    box-shadow: 0 12px 32px -10px rgba(0,0,0,0.55) !important;
}
html body.as-scope .as-db-tab .as-col-picker-head {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 4px 8px 8px !important;
    border-bottom: 1px solid rgba(0,0,0,0.06) !important;
    margin-bottom: 4px !important;
}
html body.as-scope:not(.as-light) .as-db-tab .as-col-picker-head {
    border-bottom-color: rgba(255,255,255,0.08) !important;
}
html body.as-scope .as-db-tab .as-col-picker-title {
    font-size: 11px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.06em !important;
    color: rgba(20,22,26,0.55) !important;
}
html body.as-scope:not(.as-light) .as-db-tab .as-col-picker-title {
    color: rgba(255,255,255,0.55) !important;
}
html body.as-scope .as-db-tab .as-col-picker-reset {
    appearance: none !important;
    border: 1px solid rgba(0,0,0,0.12) !important;
    background: transparent !important;
    font-size: 10.5px !important;
    padding: 2px 8px !important;
    border-radius: 4px !important;
    cursor: pointer !important;
    color: rgba(20,22,26,0.7) !important;
    text-transform: none !important;
}
html body.as-scope:not(.as-light) .as-db-tab .as-col-picker-reset {
    border-color: rgba(255,255,255,0.16) !important;
    color: rgba(255,255,255,0.7) !important;
}
html body.as-scope .as-db-tab .as-col-picker-list {
    display: flex !important;
    flex-direction: column !important;
    gap: 2px !important;
}
html body.as-scope .as-db-tab .as-col-picker-item {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 6px 8px !important;
    border-radius: 6px !important;
    cursor: pointer !important;
    font-size: 12px !important;
    color: rgba(20,22,26,0.85) !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
}
html body.as-scope:not(.as-light) .as-db-tab .as-col-picker-item {
    color: rgba(255,255,255,0.85) !important;
}
html body.as-scope .as-db-tab .as-col-picker-item:hover {
    background: rgba(0,0,0,0.04) !important;
}
html body.as-scope:not(.as-light) .as-db-tab .as-col-picker-item:hover {
    background: rgba(255,255,255,0.05) !important;
}
html body.as-scope .as-db-tab .as-col-picker-item input[type="checkbox"] {
    accent-color: #e89c3c !important;
    cursor: pointer !important;
}

/* riga selezionata */
html body.as-scope .as-db-tab .as-table tbody tr.as-row-sel td {
    background: rgba(232,156,60,0.08) !important;
}
html body.as-scope:not(.as-light) .as-db-tab .as-table tbody tr.as-row-sel td {
    background: rgba(232,156,60,0.14) !important;
}
html body.as-scope .as-db-tab .as-table tbody tr.as-row-sel:hover td {
    background: rgba(232,156,60,0.12) !important;
}
html body.as-scope:not(.as-light) .as-db-tab .as-table tbody tr.as-row-sel:hover td {
    background: rgba(232,156,60,0.18) !important;
}


/* ═══════════════════════════════════════════════════════════════════════
   MOBILE FIXES — 2026-05-04 (V request: pulizia smartphone)
   Su <=720px tutto il main content sforava di 32px (left=62, w=360)
   perché i container top-level non rispettavano la viewport.
   ═══════════════════════════════════════════════════════════════════════ */
@media (max-width: 720px) {
    /* Forza ogni container top-level Art Stone dentro la viewport */
    html body.as-scope .as-search-box,
    html body.as-scope .as-search-box .as-topbar,
    html body.as-scope .as-search-box .as-search-input-wrap,
    html body.as-scope .as-search-row,
    html body.as-scope .as-nav.as-nav-inline,
    html body.as-scope .as-nav-groups,
    html body.as-scope .as-tabs,
    html body.as-scope .as-toolbar,
    html body.as-scope .as-xml-tab,
    html body.as-scope .as-db-tab,
    html body.as-scope .as-anag-tab,
    html body.as-scope .as-stats-tab,
    html body.as-scope .as-ops-tab {
        max-width: 100% !important;
        width: 100% !important;
        box-sizing: border-box !important;
        min-width: 0 !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    /* Topbar: logo più piccolo, gap ridotto, layout compatto */
    html body.as-scope .as-search-box .as-topbar { gap: 8px !important; }
    html body.as-scope .as-topbar-brand { gap: 8px !important; }
    html body.as-scope .as-topbar-brand .as-logo-frame {
        width: 96px !important;
        height: 32px !important;
    }
    html body.as-scope .as-topbar-title .as-topbar-page {
        font-size: 16px !important;
    }
    html body.as-scope .as-topbar-title .as-topbar-section {
        font-size: 10px !important;
    }
    html body.as-scope .as-topbar-right { gap: 4px !important; }
    html body.as-scope .as-topbar-right button,
    html body.as-scope .as-help-btn {
        width: 36px !important;
        height: 36px !important;
        padding: 0 !important;
        flex-shrink: 0 !important;
    }

    /* Cliente: line-clamp 2 invece di nowrap+ellipsis (era cw=92, sw=216 → "F…") */
    html body.as-scope .as-table tbody tr.as-row-clickable > td.as-cli .as-cli-name,
    html body.as-scope .as-table tbody tr.as-row-clickable > td.as-cli {
        white-space: normal !important;
        display: -webkit-box !important;
        -webkit-line-clamp: 2 !important;
        -webkit-box-orient: vertical !important;
        overflow: hidden !important;
        word-break: break-word !important;
        text-overflow: clip !important;
        line-height: 1.2 !important;
    }

    /* RIF/defunto: line-clamp 2 (era cw=124, sw=590) */
    html body.as-scope .as-table tbody tr.as-row-clickable > td.as-rif {
        white-space: normal !important;
        display: -webkit-box !important;
        -webkit-line-clamp: 2 !important;
        -webkit-box-orient: vertical !important;
        overflow: hidden !important;
        word-break: break-word !important;
        text-overflow: clip !important;
        line-height: 1.25 !important;
    }

    /* Riga ordine: padding più stretto + righe auto */
    html body.as-scope .as-table tbody tr.as-row-clickable {
        padding: 10px 10px !important;
        column-gap: 8px !important;
        grid-template-columns: 18px minmax(28px, auto) 1fr minmax(56px, auto) !important;
    }

    /* Sidebar laterale .as-tool-bar (flex sibling 38px): rimossa su mobile.
       Selettore senza body.as-scope per evitare match-miss visto in audit. */
    .as-tool-bar,
    .as-tool-bar.as-tool-bar-empty { display: none !important; }

    /* .as-toolbar diventa wrappable e .as-search-box prende 100% del flex parent
       (default era flex:0 1 auto → non shrinkava sotto 360px) */
    html body.as-scope .as-toolbar {
        flex-wrap: wrap !important;
        gap: 6px !important;
    }
    html body.as-scope .as-toolbar > .as-search-box {
        flex: 1 1 100% !important;
        max-width: 100% !important;
        width: 100% !important;
        order: 1 !important;
        min-width: 0 !important;
    }

    /* Topbar interno: nowrap per logo/title/buttons inline */
    html body.as-scope .as-topbar { flex-wrap: nowrap !important; min-width: 0 !important; }

    /* Search input: ha i bottoni dentro (right: 6px), padding dx già gestito da regola esistente.
       Solo blocco di larghezza max */
    html body.as-scope .as-search-box .as-search {
        max-width: 100% !important;
        box-sizing: border-box !important;
    }

    /* Nav tabs (Lavorazione/Anagrafica/...) compatti */
    html body.as-scope .as-tabs { font-size: 13px !important; }

    /* Body padding ridotto per recuperare 8px */
    html body.as-scope .as-body { padding-left: 10px !important; padding-right: 10px !important; }

    /* Tab Ingresso: lista email (from/subject) wrappabile (era cw=71!).
       Specificity battuta a 3 classi per beat .as-mail-row .as-mail-from */
    html body.as-scope .as-mail-row .as-mail-from,
    html body.as-scope .as-mail-row .as-mail-subj,
    html body.as-scope .as-mail-head .as-mail-from,
    html body.as-scope .as-mail-head .as-mail-subj,
    html body.as-scope .as-ingresso-tab .as-mail-from,
    html body.as-scope .as-ingresso-tab .as-mail-subj {
        white-space: normal !important;
        word-break: break-word !important;
        overflow-wrap: anywhere !important;
        display: -webkit-box !important;
        -webkit-line-clamp: 2 !important;
        -webkit-box-orient: vertical !important;
        overflow: hidden !important;
        line-height: 1.25 !important;
        text-overflow: clip !important;
    }

    /* Tab Anagrafica/DB: celle editabili wrappabili (era cw=110, sw fino a 443).
       Specificity battuta a 5 classi per beat style-as-new.css:1005
       (html body.as-dash-open .as-overlay .as-table td white-space:nowrap) */
    html body.as-dash-open.as-scope .as-overlay .as-table tbody td.as-cell-editable,
    html body.as-dash-open.as-scope .as-overlay .as-table tbody td.as-dim-cell,
    html body.as-dash-open.as-scope .as-overlay .as-table tbody td.as-cell-key,
    html body.as-dash-open.as-scope .as-overlay .as-db-tab td.as-cell-editable,
    html body.as-dash-open.as-scope .as-overlay .as-db-tab td.as-dim-cell {
        white-space: normal !important;
        word-break: break-word !important;
        overflow-wrap: anywhere !important;
        line-height: 1.3 !important;
        text-overflow: clip !important;
    }

    /* Editor ordine: email mittente in overlay (cw=270 sw=311) */
    html body.as-scope .as-ov-email-from {
        white-space: normal !important;
        word-break: break-all !important;
        line-height: 1.3 !important;
    }
}

/* iPhone SE-class (≤380): ulteriore compressione */
@media (max-width: 380px) {
    html body.as-scope .as-topbar-brand .as-logo-frame { width: 84px !important; height: 28px !important; }
    html body.as-scope .as-topbar-title .as-topbar-page { font-size: 15px !important; }
    html body.as-scope .as-topbar-right button,
    html body.as-scope .as-help-btn { width: 32px !important; height: 32px !important; }
    html body.as-scope .as-body { padding-left: 8px !important; padding-right: 8px !important; }
    html body.as-scope .as-table tbody tr.as-row-clickable {
        padding: 9px 8px !important;
        column-gap: 6px !important;
    }
}