:root,
[data-bs-theme="light"] {
    --brand: #1f6f5c;
    --brand-rgb: 31, 111, 92;
    --brand-soft: #e3f1ec;
    --app-bg: #f4f6f8;
    --card-bg: #ffffff;
    --subtotal-bg: #eef6f3;
    --total-bg: #d6ece4;
    --neg: #c62828;
    --bs-primary: var(--brand);
    --bs-primary-rgb: var(--brand-rgb);
    --bs-link-color: var(--brand);
    --bs-link-color-rgb: var(--brand-rgb);
    --bottom-nav-h: 0px;
}

[data-bs-theme="dark"] {
    --brand: #3fbf9b;
    --brand-rgb: 63, 191, 155;
    --brand-soft: #173a31;
    --app-bg: #0f1419;
    --card-bg: #161d24;
    --subtotal-bg: #19302a;
    --total-bg: #1f4237;
    --neg: #ff6b6b;
    --bs-primary: var(--brand);
    --bs-primary-rgb: var(--brand-rgb);
    --bs-link-color: var(--brand);
    --bs-link-color-rgb: var(--brand-rgb);
    --bs-body-bg: var(--app-bg);
}

body {
    font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    background: var(--app-bg);
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    -webkit-tap-highlight-color: transparent;
}

main { flex: 1 0 auto; }
.min-w-0 { min-width: 0; }
.text-danger { color: var(--neg) !important; }

/* Pulsanti */
.btn-primary {
    --bs-btn-bg: var(--brand);
    --bs-btn-border-color: var(--brand);
    --bs-btn-hover-bg: color-mix(in srgb, var(--brand) 85%, #000);
    --bs-btn-hover-border-color: color-mix(in srgb, var(--brand) 85%, #000);
    --bs-btn-active-bg: color-mix(in srgb, var(--brand) 75%, #000);
    --bs-btn-active-border-color: color-mix(in srgb, var(--brand) 75%, #000);
    --bs-btn-color: #fff;
    --bs-btn-hover-color: #fff;
    --bs-btn-active-color: #fff;
}
[data-bs-theme="dark"] .btn-primary { --bs-btn-color: #062018; --bs-btn-hover-color: #062018; --bs-btn-active-color: #062018; }
.btn-icon { width: 2.375rem; height: 2.375rem; padding: 0; display: inline-grid; place-items: center; }
.nav-pills { --bs-nav-pills-link-active-bg: var(--brand); }
[data-bs-theme="dark"] .nav-pills { --bs-nav-pills-link-active-color: #062018; }

.form-control:focus, .form-select:focus {
    border-color: var(--brand);
    box-shadow: 0 0 0 .2rem rgba(var(--brand-rgb), .2);
}

/* Navbar */
.app-navbar {
    background: color-mix(in srgb, var(--card-bg) 92%, transparent);
    backdrop-filter: saturate(1.4) blur(8px);
    border-bottom: 1px solid var(--bs-border-color);
    padding-top: max(.5rem, env(safe-area-inset-top));
}
.app-navbar .nav-link { border-radius: .5rem; }
.app-navbar .nav-link.active { color: var(--brand); background: var(--brand-soft); font-weight: 600; }

.brand-mark {
    display: inline-grid;
    place-items: center;
    width: 2rem;
    height: 2rem;
    border-radius: .6rem;
    background: var(--brand);
    color: #fff;
    font-size: 1rem;
}
.brand-mark-lg { width: 3.5rem; height: 3.5rem; font-size: 1.6rem; border-radius: 1rem; }

/* Navigazione inferiore (mobile) */
.bottom-nav {
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: 1030;
    display: flex;
    background: color-mix(in srgb, var(--card-bg) 94%, transparent);
    backdrop-filter: saturate(1.4) blur(8px);
    border-top: 1px solid var(--bs-border-color);
    padding-bottom: env(safe-area-inset-bottom);
}
.bottom-nav a {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .1rem;
    padding: .55rem 0 .5rem;
    font-size: .72rem;
    color: var(--bs-secondary-color);
    text-decoration: none;
}
.bottom-nav a i { font-size: 1.3rem; line-height: 1; }
.bottom-nav a.active { color: var(--brand); font-weight: 600; }
@media (max-width: 767.98px) {
    body:has(.bottom-nav) { padding-bottom: calc(64px + env(safe-area-inset-bottom)); }
}

/* Card */
.card {
    background: var(--card-bg);
    border-color: var(--bs-border-color);
    border-radius: .9rem;
}
.card-header { background: transparent; }
.card > .table-responsive:last-child,
.card > .grid-wrap:last-child { border-bottom-left-radius: .9rem; border-bottom-right-radius: .9rem; }
.chip { background: var(--brand-soft); color: var(--brand); font-weight: 500; font-size: .75rem; }

/* Riquadro filtri */
.filter-card { box-shadow: 0 1px 2px rgba(0,0,0,.04); overflow: hidden; }
.filter-toggle {
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: space-between;
    padding: .85rem 1rem;
    background: transparent;
    border: 0;
    font-weight: 600;
    color: var(--bs-body-color);
}
.filter-toggle .toggle-icon { transition: transform .2s; }
.filter-toggle:not(.collapsed) .toggle-icon { transform: rotate(180deg); }
@media (max-width: 767.98px) {
    .filter-toggle:not(.collapsed) { border-bottom: 1px solid var(--bs-border-color); }
    .quick-range .btn { flex: 1; }
}

/* Selettore orizzontale scorrevole (raggruppamenti) */
.pill-scroller {
    display: flex;
    align-items: center;
    gap: .4rem;
    overflow-x: auto;
    scrollbar-width: none;
    padding-bottom: 2px;
    -webkit-overflow-scrolling: touch;
}
.pill-scroller::-webkit-scrollbar { display: none; }
.pill-scroller .btn { white-space: nowrap; flex-shrink: 0; }

.seg-tabs { background: var(--card-bg); border: 1px solid var(--bs-border-color); border-radius: .75rem; padding: .25rem; }
.seg-tabs .nav-link { border-radius: .55rem; color: var(--bs-body-color); font-weight: 500; }

/* KPI */
.kpi .card-body { padding: .85rem 1rem; }
.kpi .kpi-label { font-size: .78rem; color: var(--bs-secondary-color); margin-bottom: .3rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kpi .kpi-label i { color: var(--brand); }
.kpi .kpi-value { font-size: clamp(1.05rem, 4.5vw, 1.6rem); font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
@media (min-width: 992px) { .kpi .kpi-value { font-size: 1.6rem; } }

/* Tabelle report */
.report-table { font-size: .9rem; }
.report-table thead th {
    font-size: .75rem;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--bs-secondary-color);
    background: var(--card-bg);
    white-space: nowrap;
}
.report-table .num, .grid-table .num { font-variant-numeric: tabular-nums; white-space: nowrap; }
.report-table .row-subtotal td { background: var(--subtotal-bg); font-weight: 600; }
.report-table .row-total td { background: var(--total-bg); font-weight: 700; border-bottom: 0; }
.tipo-badge { background: var(--brand-soft); color: var(--brand); font-weight: 500; }
.report-table a.drill { color: inherit; text-decoration: none; font-weight: 500; }
.report-table a.drill:hover { color: var(--brand); }
.report-table a.drill .bi { color: var(--bs-secondary-color); }
.table-search { width: 10rem; }
.table-scroll { max-height: 70vh; }
.table-scroll thead th { position: sticky; top: 0; z-index: 1; }
@media (max-width: 575.98px) { .table-scroll { max-height: none; } }

th[data-sort] { cursor: pointer; user-select: none; }
th[data-sort]::after { content: "\F127"; font-family: "bootstrap-icons"; opacity: .35; margin-left: .25rem; font-size: .7rem; }
th[data-sort].asc::after { content: "\F148"; opacity: 1; }
th[data-sort].desc::after { content: "\F128"; opacity: 1; }

.share { display: inline-block; width: 60px; height: 6px; border-radius: 3px; background: var(--bs-secondary-bg); vertical-align: middle; margin-right: .4rem; overflow: hidden; }
.share span { display: block; height: 100%; background: var(--brand); border-radius: 3px; }

.swatch { display: inline-block; width: .85rem; height: .85rem; border-radius: 50%; border: 1px solid rgba(0,0,0,.15); vertical-align: -1px; margin-right: .35rem; }

/* Tabelle "impilate": su telefono ogni riga diventa una scheda */
@media (max-width: 575.98px) {
    .table-stack thead { display: none; }
    .table-stack, .table-stack tbody, .table-stack tfoot { display: block; }
    .table-stack tr {
        display: flex;
        flex-direction: column;
        padding: .65rem 1rem;
        border-bottom: 1px solid var(--bs-border-color);
    }
    .table-stack td {
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 1rem;
        border: 0 !important;
        padding: .12rem 0 !important;
        background: transparent !important;
        text-align: right !important;
    }
    .table-stack td::before {
        content: attr(data-label);
        color: var(--bs-secondary-color);
        font-size: .8rem;
        font-weight: 400;
        text-align: left;
    }
    .table-stack td.cell-title {
        order: -1;
        display: block;
        text-align: left !important;
        font-weight: 600;
        font-size: .95rem;
        padding-bottom: .25rem !important;
    }
    .table-stack td.cell-title::before, .table-stack td:empty { display: none; }
    .table-stack tr.row-subtotal { background: var(--subtotal-bg); }
    .table-stack tr.row-total { background: var(--total-bg); }
    .table-stack td.d-none { display: none !important; }
    .table-search { width: 100%; }
}

/* Griglie taglie × colori */
.grid-table { font-size: .875rem; }
.grid-table th, .grid-table td { white-space: nowrap; padding: .45rem .6rem; }
.grid-table thead th { font-size: .75rem; color: var(--bs-secondary-color); background: var(--card-bg); }
.grid-table td { background: rgba(var(--brand-rgb), var(--h, 0)); }
.grid-table td.neg { background: rgba(198, 40, 40, calc(var(--h, 0) * .6)); color: var(--neg); font-weight: 600; }
.grid-table td.zero { color: var(--bs-tertiary-color); }
.grid-table .sticky-col {
    position: sticky;
    left: 0;
    z-index: 1;
    background: var(--card-bg);
    max-width: 46vw;
    overflow: hidden;
    text-overflow: ellipsis;
    box-shadow: 1px 0 0 var(--bs-border-color);
}
.grid-table tbody th a { color: inherit; text-decoration: none; }
.grid-table tbody th a:hover { color: var(--brand); }
.grid-table tr.row-active th, .grid-table tr.row-active td { box-shadow: inset 0 2px 0 var(--brand), inset 0 -2px 0 var(--brand); }
.grid-table tr.row-active .sticky-col { color: var(--brand); font-weight: 600; }
.grid-table tfoot th, .grid-table tfoot td { background: var(--total-bg); font-weight: 700; }

/* KPI: riga secondaria e variazioni vs anno precedente */
.kpi .kpi-sub { font-size: .75rem; color: var(--bs-secondary-color); margin-top: .2rem; line-height: 1.3; }
.delta { font-weight: 600; white-space: nowrap; font-variant-numeric: tabular-nums; }
.delta.up { color: #1e8e3e; }
.delta.down { color: var(--neg); }
.delta.flat { color: var(--bs-secondary-color); }
[data-bs-theme="dark"] .delta.up { color: #5fd38a; }


/* Grafico a colonne (andamento) */
.col-chart { position: relative; }
.cc-max { font-size: .72rem; color: var(--bs-secondary-color); margin-bottom: .25rem; }
.cc-bars { display: flex; align-items: flex-end; gap: 2px; height: 150px; border-bottom: 1px solid var(--bs-border-color); }
.cc-bar { flex: 1 1 0; min-width: 0; height: 100%; display: flex; align-items: flex-end; padding: 0; border: 0; background: transparent; cursor: pointer; }
.cc-bar span { display: block; width: 100%; min-height: 1px; background: var(--brand); border-radius: 3px 3px 0 0; transition: opacity .15s; }
.cc-bar.we span { background: color-mix(in srgb, var(--brand) 55%, var(--card-bg)); }
.cc-bar:hover span, .cc-bar.sel span { opacity: .65; }
.cc-bar.sel span { outline: 2px solid var(--brand); outline-offset: 1px; }
.cc-axis { display: flex; justify-content: space-between; font-size: .72rem; color: var(--bs-secondary-color); margin-top: .25rem; }
.cc-info { min-height: 1.4em; margin-top: .35rem; }

/* Classifiche a barre (HTML/CSS, nessuna libreria) */
.bar-legend { display: flex; flex-wrap: wrap; gap: .25rem 1rem; font-size: .8rem; color: var(--bs-secondary-color); margin-bottom: .75rem; }
.bar-dot { display: inline-block; width: .7rem; height: .7rem; border-radius: 3px; margin-right: .35rem; vertical-align: -1px; }
.bar-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: .65rem; }
.bar-list li { min-width: 0; }
.bar-head { display: flex; justify-content: space-between; align-items: baseline; gap: .75rem; font-size: .85rem; margin-bottom: .2rem; }
.bar-label { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bar-value { font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.bar-track { height: .55rem; border-radius: .3rem; background: var(--bs-secondary-bg); overflow: hidden; }
.bar-fill { display: block; height: 100%; min-width: 2px; border-radius: .3rem; }
.bar-fill.g0, .bar-dot.g0 { background: var(--brand); }
.bar-fill.g1, .bar-dot.g1 { background: #e08a3c; }
.bar-fill.g2, .bar-dot.g2 { background: #5b7fd6; }
.bar-fill.g3, .bar-dot.g3 { background: #b65fb3; }
.bar-fill.neg { background: var(--neg); }
.bar-scroll { max-height: 70vh; overflow-y: auto; padding-right: .25rem; }
@media (max-width: 575.98px) { .bar-scroll { max-height: none; } }

.empty-state {
    background: var(--card-bg);
    border: 1px dashed var(--bs-border-color);
    border-radius: .9rem;
}

/* Ricerca articoli con suggerimenti */
.search-hero .search-icon { position: absolute; left: 1rem; top: 50%; transform: translateY(-50%); color: var(--bs-secondary-color); z-index: 3; }
.search-hero .form-control { border-radius: .9rem; background: var(--card-bg); }
.ac-list {
    position: absolute;
    left: 0; right: 0; top: calc(100% + .35rem);
    z-index: 1040;
    max-height: 60vh;
    overflow-y: auto;
    border-radius: .75rem;
}
.ac-list .list-group-item { padding: .65rem 1rem; }
.ac-list .list-group-item.active { background: var(--brand-soft); color: var(--bs-body-color); border-color: var(--bs-border-color); }
.ac-list mark { padding: 0; background: rgba(var(--brand-rgb), .25); color: inherit; }

/* Login */
.login-page {
    background:
        radial-gradient(1200px 600px at 10% -10%, rgba(var(--brand-rgb), .25), transparent 60%),
        radial-gradient(900px 500px at 110% 110%, rgba(var(--brand-rgb), .18), transparent 60%),
        var(--app-bg);
}
.login-wrap {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 1.5rem 1rem;
}
.login-card { width: 100%; max-width: 420px; border-radius: 1.25rem; }

@media print {
    .app-navbar, .bottom-nav, .filter-card, .app-footer, .btn, .btn-group, .pill-scroller, .search-hero, .seg-tabs { display: none !important; }
    body { background: #fff; padding: 0 !important; }
    .tab-pane { display: block !important; opacity: 1 !important; }
}