/* ============================================================================
   mm-overrides.css — Override puri di Bootstrap/Metronic e patches plugin.
   Mandato: form controls, modal, menu links, select2, datepicker, tagsinput,
   tooltip, container/layout responsive. Solo override, niente CSS di feature.
   I selettori restano quelli originali (target Bootstrap/Metronic/plugin).
   ============================================================================ */

/* === Select2 (z-index per modal stacking) === */
.select2-container {
    z-index: 2147483647;
}

/* ============================================================================
   Fase 2 B — Override delle --bs-text-* Metronic per propagare i token mm-*.
   Lo style.bundle.css di Metronic definisce --bs-text-info/success/danger/...
   con valori hardcoded (es. --bs-text-info: #7239EA) in :root, e le classi
   .text-info/.text-success/.text-danger usano queste var con !important.
   Sovrascriviamo qui per allineare al design system mm-tokens.css.
   ============================================================================ */
:root, [data-bs-theme=light] {
    /* Testo: --bs-text-X usato da .text-X !important nei template */
    --bs-text-primary: var(--mm-color-primary);   /* era #00A3FF (uguale, link al token) */
    --bs-text-success: var(--mm-color-success);   /* era #50CD89 verde Metronic → #10b981 verde MMWeb */
    --bs-text-danger:  var(--mm-color-danger);    /* era #F1416C rosa-rosso → #dc2626 rosso */
    --bs-text-warning: var(--mm-color-warning);   /* era #ff4804 arancio → #f59e0b amber */
    --bs-text-info:    var(--mm-color-info);      /* era #7239EA viola → #3b82f6 blu */

    /* Bg light: --bs-X-light usato da .bg-light-X (badge/callout) — sfondi tenui MMWeb */
    --bs-success-light: var(--mm-color-sell-bg);  /* era #E8FFF3 → #f0fdf4 */
    --bs-danger-light:  var(--mm-color-buy-bg);   /* era #FFF5F8 → #fef2f2 */
    --bs-warning-light: var(--mm-color-warning-bg); /* era #FFF8DD → #fffbeb */
    /* --bs-info-light, --bs-primary-light non hanno equivalenti diretti in mm-tokens
       (info-bg / primary-bg sarebbero da definire). Lasciati invariati per ora. */
}

/* === Form controls (Metronic) === */
.form-control.form-control-solid {
    border: solid 1px #999 !important;
    border-radius: 5px;
    appearance: button !important;
}

.form-control.form-control-solid.search {
    height: 44px;
}

/* === Modal body === */
.modal-body {
    font-size: 14px;
    word-wrap: break-word;
}

/* === Menu link (Metronic) === */
.menu-item .menu-link {
    padding: .15rem .5rem !important;
    margin-bottom: .5rem !important;
}

/* === Datepicker (bootstrap-datepicker plugin) — compact restyle === */
input.datepicker {
    width: 114px;
}
.datepicker.datepicker-dropdown.dropdown-menu {
    padding: 6px;
    border: 1px solid var(--mm-gray-300);
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(17, 24, 39, 0.08);
    font-size: 13px;
}
.datepicker.datepicker-dropdown.dropdown-menu .datepicker-days,
.datepicker.datepicker-dropdown.dropdown-menu .datepicker-months,
.datepicker.datepicker-dropdown.dropdown-menu .datepicker-years {
    font-size: 13px;
}
.datepicker.datepicker-dropdown.dropdown-menu .datepicker-days td,
.datepicker.datepicker-dropdown.dropdown-menu .datepicker-days th {
    padding: 4px 8px;
    font-size: 13px;
    font-weight: 500;
    border-radius: 4px;
    transition: background-color 0.12s ease;
}
.datepicker.datepicker-dropdown.dropdown-menu .datepicker-days th.dow {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    color: var(--mm-gray-500);
    letter-spacing: 0.3px;
}
.datepicker.datepicker-dropdown.dropdown-menu .datepicker-days td.day:hover,
.datepicker.datepicker-dropdown.dropdown-menu .datepicker-days td.month:hover,
.datepicker.datepicker-dropdown.dropdown-menu .datepicker-days td.year:hover {
    background: var(--mm-gray-100);
}
.datepicker.datepicker-dropdown.dropdown-menu .datepicker-days td.today,
.datepicker.datepicker-dropdown.dropdown-menu .datepicker-days td.today:hover {
    background: transparent;
    color: var(--mm-color-primary);
    border: 1px solid var(--mm-color-primary);
    font-weight: 700;
}
.datepicker.datepicker-dropdown.dropdown-menu .datepicker-days td.active,
.datepicker.datepicker-dropdown.dropdown-menu .datepicker-days td.active:hover,
.datepicker.datepicker-dropdown.dropdown-menu .datepicker-days td.active.day,
.datepicker.datepicker-dropdown.dropdown-menu .datepicker-days td.active.day:hover {
    background: var(--mm-color-primary);
    color: #fff;
    border: none;
}
.datepicker.datepicker-dropdown.dropdown-menu .datepicker-days td.old,
.datepicker.datepicker-dropdown.dropdown-menu .datepicker-days td.new {
    color: var(--mm-gray-400);
}
.datepicker.datepicker-dropdown.dropdown-menu .datepicker-days th.today,
.datepicker.datepicker-dropdown.dropdown-menu .datepicker-days th.clear {
    padding: 6px 0;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    color: var(--mm-color-primary);
    border-radius: 4px;
    cursor: pointer;
}
.datepicker.datepicker-dropdown.dropdown-menu .datepicker-days th.today:hover,
.datepicker.datepicker-dropdown.dropdown-menu .datepicker-days th.clear:hover {
    background: var(--mm-gray-100);
}
.datepicker.datepicker-dropdown.dropdown-menu .datepicker-switch {
    font-size: 14px;
    font-weight: 700;
    color: var(--mm-gray-900);
    text-transform: capitalize;
    padding: 6px 0;
}
.datepicker.datepicker-dropdown.dropdown-menu .datepicker-switch:hover,
.datepicker.datepicker-dropdown.dropdown-menu .prev:hover,
.datepicker.datepicker-dropdown.dropdown-menu .next:hover {
    background: var(--mm-gray-100);
    border-radius: 4px;
}
.datepicker.datepicker-dropdown.dropdown-menu .prev,
.datepicker.datepicker-dropdown.dropdown-menu .next {
    font-size: 16px;
    font-weight: 700;
    color: var(--mm-gray-700);
    padding: 6px 8px;
    cursor: pointer;
}

/* === Form group label === */
.form-group > label:first-child {
    font-weight: 500;
    display: block;
}

/* === Form validation states === */
.form-control.required {
    background-color: var(--bs-danger-light) !important;
}
.form-control.error {
    background-color: var(--bs-danger-border-subtle) !important;
}

/* === Form control width auto === */
.form-control.w-auto,
.form-select.w-auto {
    width: auto !important;
    max-width: 100% !important;
}

/* === Tooltip === */
.tooltip-inner {
    text-align: left;
}

/* === Select2 (Bootstrap 5 theme) === */
.select2-container--bootstrap5 .select2-dropdown .select2-results__option {
    padding: .25rem 1.25rem;
}
.select2-container--bootstrap5 .select2-dropdown {
    width: 600px !important;
}

/* === Bootstrap-tagsinput === */
div.bootstrap-tagsinput {
    border: solid 1px #ccc;
    border-radius: 1px;
    min-height: 50px;
    padding: 12px;
}
.bootstrap-tagsinput .tag {
    margin-right: 2px;
    color: white;
    background-color: var(--bs-primary) !important;
    padding: 2px 10px 4px 10px;
    border-radius: 3px;
}

/* === Layout responsive overrides === */
@media (min-width: 992px) {
    .content {
        padding: 10px 0;
        border-radius: 1.5rem;
    }
    .toolbar-enabled .content .toolbar {
        padding-bottom: 10px;
    }
}

@media (min-width: 1400px) {
    .container, .container-lg, .container-md, .container-sm, .container-xl, .container-xxl {
        max-width: 100%;
    }
}

/* ============================================================================
   Fase 2 C — Restyle minimal Linear-like (sperimentale, sotto valutazione).
   Pagina di riferimento: controls/operations/listing.html.
   Direzione: tipografia calma, gerarchia chiara, accenti colore solo dove
   servono. Niente cambio comportamento, solo cosmetica del contenuto
   (chrome sidebar/header invariato in questo step).
   ============================================================================ */

/* === Card: piatta, border subtle invece di shadow forte === */
.card {
    box-shadow: var(--mm-shadow-card);
    border: 1px solid var(--mm-gray-200);
}

/* === Card header: separatore subtle al posto del padding-top forzato === */
.card > .card-header {
    border-bottom: 1px solid var(--mm-gray-100);
    min-height: auto;
}

/* === Table head: gerarchia tipografica calma (Linear/Notion-like) ===
   Compete con .text-uppercase !important e .fw-bold !important del bundle
   Bootstrap → uso !important mirato. fs-16 (14px) → 12px, gray-500. */
.card .table > thead > tr > th {
    text-transform: none !important;
    font-weight: var(--mm-fw-semibold) !important;
    color: var(--mm-gray-700) !important;
    font-size: 12px !important;
    letter-spacing: 0.02em;
    padding-top: 0.75rem;
    padding-bottom: 0.75rem;
}

/* === Table row hover: feedback discreto === */
.card .table > tbody > tr:hover > td {
    background-color: var(--mm-gray-50);
}

/* === Toolbar h1: peso meno enfatico (700 → 600) + più compatto === */
#kt_toolbar h1 {
    font-weight: var(--mm-fw-semibold) !important;
    font-size: 1.125rem !important;   /* 18px invece di fs-2 = ~24-26px responsive */
}

/* ============================================================================
   Fase 2 C — Set 2: densità (gli elementi prendevano troppo spazio).
   Approccio: scope a .card per non toccare modali/form/widget.
   ============================================================================ */

/* === Toolbar più snella === */
#kt_toolbar {
    padding-top: 0.4rem !important;
    padding-bottom: 0.4rem !important;
}
#kt_toolbar h1.my-1 {
    margin-top: 0.1rem !important;
    margin-bottom: 0.1rem !important;
}

/* === Card body: padding ridotto === */
.card > .card-header.pt-6 {
    padding-top: 0.75rem !important;
    padding-bottom: 0.75rem !important;
}
.card > .card-body.py-4 {
    padding-top: 0.5rem !important;
    padding-bottom: 0.5rem !important;
}
.card > .card-body.px-2 {
    padding-left: 0.5rem !important;
    padding-right: 0.5rem !important;
}

/* === Table: cell più compatte === */
.card .table > tbody > tr > td {
    padding-top: 0.35rem !important;
    padding-bottom: 0.35rem !important;
    line-height: 1.35;
}
.card .table > thead > tr > th {
    padding-top: 0.6rem !important;
    padding-bottom: 0.6rem !important;
}

/* === Scala tipografica ridotta dentro tabelle (Linear-like dense) ===
   Override delle .fs-N MMWeb (sono !important in mm-utilities.css). */
.card .table .fs-32 { font-size: 22px !important; }   /* 32 → 22 (face/satisfaction icons) */
.card .table .fs-24 { font-size: 17px !important; }   /* 24 → 17 (member icons) */
.card .table .fs-22 { font-size: 16px !important; }   /* 22 → 16 (book icon) */
.card .table .fs-20 { font-size: 14px !important; }   /* 20 → 14 (price arrow icons) */
.card .table .fs-18 { font-size: 13px !important; }   /* 18 → 13 (WUL code, status, day) */
.card .table .fs-16 { font-size: 12px !important; }   /* 16 → 12 (price) */
.card .table .fs-14 { font-size: 11px !important; }   /* 14 → 11 (caption / address) */
.card .table .fs-13 { font-size: 11px !important; }   /* 13 → 11 (subtitle address) */

/* === Spacer rows tra operazioni: pt-3 → pt-1 (ridotto) ===
   Lo spacer row nel template ha pt-3 + style inline border-bottom
   :solid 1px #000 — non possiamo cambiare la linea nera (inline !important)
   ma possiamo ridurre il padding. */
.card .table > tbody > tr.border-bottom-dashed > td.pt-3 {
    padding-top: 0.25rem !important;
}

/* ============================================================================
   Fase 2 C — Set 3: ammorbidire elementi rimasti vivaci.
   ============================================================================ */

/* === Badge inline (es. "ORDINARIE") nel contesto listing operazioni ===
   <span class="bg-warning text-white p-2 me-3 rounded-1 fs-14">
   Da pieno arancio a bordato amber-light (Linear-like soft tag). */
.card .table ul.inline > li > span.bg-warning {
    background-color: var(--mm-color-warning-bg) !important;
    color: var(--mm-color-warning) !important;
    border: 1px solid var(--mm-color-warning-light);
    padding: 1px 8px !important;
    font-weight: var(--mm-fw-medium) !important;
}
.card .table ul.inline > li > span.bg-warning > i.bg-warning {
    background-color: transparent !important;
    color: var(--mm-color-warning) !important;
}

/* === Codici operazione (.fs-18.text-warning b) — peso meno enfatico ===
   Il <b> di default è 700, lo abbassiamo a 500 dentro la tabella. */
.card .table b.text-warning,
.card .table .text-warning > b {
    font-weight: var(--mm-fw-medium) !important;
}

/* === Bottoni toolbar: border-radius più piccolo, shadow leggera ===
   "Ordine di Carico", "Vendita", "Buy", "Sell" — meno saturazione visiva
   senza cambiare il colore di brand. */
#kt_toolbar .btn {
    border-radius: 6px !important;
    box-shadow: var(--mm-shadow-card);
    font-weight: var(--mm-fw-medium) !important;
}

/* ============================================================================
   Fase 2 C — Set 5: card-header e fascia badge-stats compatti.
   Comuni a molte listing (settimana select, filtri, search, repost btn,
   contatori operazioni). Scope: tutto dentro .card per non toccare modali.
   ============================================================================ */

/* === Form controls in card-header: altezza ridotta, font ridotto === */
.card .card-header .form-control,
.card .card-header .form-select {
    height: 36px !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    font-size: 13px !important;
    line-height: 36px !important;
}

/* L'icona search (ki-magnifier fs-3 + fa-magnifying-glass fs-18 inline) è
   posizionata absolute dentro il container input — riallineo verticalmente
   per la nuova altezza 36px. */
.card .card-header .ki-magnifier.fs-3 {
    font-size: 14px !important;
    line-height: 36px;
}
.card .card-header i.fa-magnifying-glass.fs-18 {
    font-size: 13px !important;
}
.card .card-header i.fa-xmark.fs-18 {
    font-size: 12px !important;
}

/* fs-18 dentro card-header (label compatte) */
.card .card-header .fs-18 {
    font-size: 13px !important;
}

/* Bottoni nel card-header più snelli (es. "Repost Settimana", search btn) */
.card .card-header .btn {
    padding-top: 0.4rem !important;
    padding-bottom: 0.4rem !important;
    font-size: 13px;
    line-height: 1.4;
    white-space: nowrap;
}
.card .card-header .btn i.fs-22 {
    font-size: 14px !important;
}

/* === Fascia badge stats subito dentro card-body (es. "38 completati",
   "40 in attesa", "X requests from logistic"). Pattern ricorrente:
   <div class="d-block mb-3"><span class="badge fs-18 ...">…</span></div>. */
.card .card-body > .d-block.mb-3 {
    margin-bottom: 0.5rem !important;
}
.card .card-body .badge.fs-18,
.card .card-body .btn.fs-18 {
    font-size: 12px !important;
    padding: 4px 8px !important;
}

/* ============================================================================
   Fase 2 C — Set 6: badge solidi → bordati soft + codici warning extended.
   Pattern globale: badge-success/danger/info/primary pieni saturi
   ("ATTIVO", "INATTIVO", "EXPORT PRONTO", "RITARDO SUL PAGAMENTO", "NON PAGATO",
   "TRADER", "Account Attivo") → versione Linear-like bordata.
   Scope: .card per non toccare modali (i loro badge sono già più calmi).
   I btn .btn-success/.btn-danger NON toccati: sono call-to-action solidi
   per design (es. "Avvia una telefonata", "Buy", "Sell").
   ============================================================================ */

/* === Badge solidi → soft (token mm-* per coerenza con palette) === */
.card .badge.badge-success {
    background-color: var(--mm-color-sell-bg) !important;
    color: var(--mm-color-success) !important;
    border: 1px solid var(--mm-color-sell-light);
    font-weight: var(--mm-fw-medium) !important;
}
.card .badge.badge-danger {
    background-color: var(--mm-color-buy-bg) !important;
    color: var(--mm-color-danger) !important;
    border: 1px solid var(--mm-color-buy-light);
    font-weight: var(--mm-fw-medium) !important;
}
.card .badge.badge-warning {
    background-color: var(--mm-color-warning-bg) !important;
    color: var(--mm-color-warning) !important;
    border: 1px solid var(--mm-color-warning-light);
    font-weight: var(--mm-fw-medium) !important;
}
.card .badge.badge-info {
    background-color: rgba(59, 130, 246, 0.08) !important;
    color: var(--mm-color-info) !important;
    border: 1px solid rgba(59, 130, 246, 0.3);
    font-weight: var(--mm-fw-medium) !important;
}
.card .badge.badge-primary {
    background-color: rgba(0, 163, 255, 0.08) !important;
    color: var(--mm-color-primary) !important;
    border: 1px solid rgba(0, 163, 255, 0.3);
    font-weight: var(--mm-fw-medium) !important;
}

/* === Codici operazione (.text-warning b) — extended fuori dalle table ===
   Es. "SUP-24-0045", "OUT-26-XXXX", "MOP-26-2507" in lab-members,
   bank-deadlines, listing CRUD, ovunque dentro .card. Set 3 li copriva
   solo dentro .table; estendo a tutto il contesto .card. */
.card b.text-warning,
.card .text-warning > b {
    font-weight: var(--mm-fw-medium) !important;
}

/* ============================================================================
   Fase 2 C — Set 7: status text in colonna stato (listing operazioni).
   Pattern ricorrente nelle listing operations:
   <span class="text-{color} text-uppercase fs-18 fw-bold">{{status}}</span>
   ("UNLOADED", "DELIVERED", "SHIPPED", "PLANNED", "WAITING", "DELETED",
    "IN ATTESA", "ALLINEATO", "TRASFERIRE", ...).
   Era molto enfatico. Versione Linear-like calmer ma riconoscibile.
   ============================================================================ */
.card .table .text-uppercase {
    text-transform: none !important;
    letter-spacing: 0.01em;
}
.card .table .fw-bold.fs-18,
.card .table .fw-bold.fs-16 {
    font-weight: var(--mm-fw-semibold) !important;
}

/* ============================================================================
   Fase 2 C — Set 8: row spacer line, da nera solid 1px → grigia subtle.
   Pattern in 19 file html (operations + admin + lab + 1 modal):
   <tr class="border-bottom-dashed"><td colspan="N" ...></td></tr>
   Storicamente con style="border-bottom:solid 1px #000 !important;" inline.
   Lo style inline è stato rimosso (commit dedicato); la border-bottom è
   ora fornita qui in via uniforme.
   ============================================================================ */
.card .table > tbody > tr.border-bottom-dashed > td,
.modal-body .table > tbody > tr.border-bottom-dashed > td {
    border-bottom: 1px solid var(--mm-gray-200) !important;
}

/* ============================================================================
   Fase 2 C — Usermenu (commons/menu/usermenu.html).
   Box stats più piccoli, denser. La lista pagamenti diventa tabellare con
   prime 10 righe + tasto "Mostra altro" (toggle gestito nel template via
   expandedPayments / visiblePaymentItems).
   Le classi mm-um-* sono BEM scope-only di usermenu (no bleed altrove).
   ============================================================================ */
.mm-um .row {
    margin-bottom: 4px;
}
.mm-um .mm-user-menu-element {
    width: 360px;
    padding: 4px;
}
.mm-um .mm-user-menu-block {
    padding: 10px 12px;
    border-radius: var(--mm-radius-card);
    border: 1px solid var(--mm-gray-200);
    box-shadow: var(--mm-shadow-card);
}
.mm-um .mm-um-head {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--mm-gray-900);
    padding-bottom: 6px;
    margin-bottom: 6px;
    border-bottom: 1px solid var(--mm-gray-100);
}
.mm-um .mm-um-icon {
    font-size: 16px;
    color: var(--mm-color-primary);
}
.mm-um .mm-um-title {
    font-size: 13px;
    font-weight: var(--mm-fw-semibold);
    color: var(--mm-gray-900);
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

/* Lista standard (key/value) compacted */
.mm-um .mm-um-list {
    margin: 0;
    padding: 0;
}
.mm-um .mm-um-list > li {
    list-style: none;
    padding: 2px 0;
    font-size: 12px;
    line-height: 1.35;
    border-bottom: 1px dashed var(--mm-gray-100);
    display: flex;
    align-items: baseline;
    justify-content: space-between;
}
.mm-um .mm-um-list > li:last-child { border-bottom: none; }
.mm-um .mm-um-label {
    color: var(--mm-gray-500);
    font-weight: var(--mm-fw-regular);
    flex: 1 1 auto;
    margin-right: 8px;
}
.mm-um .mm-um-value {
    color: var(--mm-gray-900);
    font-weight: var(--mm-fw-semibold);
    font-size: 13px;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

/* Tabella tabellare per pagamenti (data | importo) */
.mm-um .mm-um-table {
    width: 100%;
    margin: 0;
    border-collapse: collapse;
    font-size: 12px;
}
.mm-um .mm-um-table > tbody > tr > td {
    padding: 3px 6px;
    border-bottom: 1px solid var(--mm-gray-100);
    line-height: 1.3;
}
.mm-um .mm-um-table > tbody > tr:last-child > td {
    border-bottom: none;
}
.mm-um .mm-um-table > tbody > tr:hover > td {
    background-color: var(--mm-gray-50);
}
.mm-um .mm-um-table-label {
    color: var(--mm-gray-700);
    font-weight: var(--mm-fw-regular);
}
.mm-um .mm-um-table-value {
    font-weight: var(--mm-fw-semibold);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

/* Tasto espandi/comprimi */
.mm-um .mm-um-expand {
    display: inline-flex;
    align-items: center;
    margin-top: 6px;
    padding: 3px 6px;
    font-size: 11px;
    font-weight: var(--mm-fw-medium);
    color: var(--mm-color-primary);
    cursor: pointer;
    border-radius: 4px;
    transition: background-color var(--mm-tr-fast);
}
.mm-um .mm-um-expand:hover {
    background-color: var(--mm-gray-50);
    text-decoration: none;
}

/* Footer azioni (link veloci sotto la lista) */
.mm-um .mm-um-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 12px;
    margin-top: 6px;
    padding-top: 6px;
    border-top: 1px solid var(--mm-gray-100);
}
.mm-um .mm-um-actions > a {
    font-size: 12px;
    color: var(--mm-color-primary);
    font-weight: var(--mm-fw-medium);
}
.mm-um .mm-um-actions > a:hover { text-decoration: underline; }

/* ============================================================================
   Fase 2 C — Sidebar (chrome) — Set 1+2: Linear-like minimal + density + colore.
   Scope: #kt_aside_logo (logo area) + #kt_aside_menu (.menu Metronic).
   Obiettivo: ridurre il peso visivo del menu laterale (padding/font/icon
   ridotti), gerarchia più calma, hover subtle, active con bordo sinistro
   2px primary invece del bg blu, bullet sotto-menu minimali, icone con
   tint primary (duotone), section header in primary (un pò di colore).
   Template invariato — sola override CSS.
   ============================================================================ */

/* --- Logo area: bg coerente col sidebar (no gradient blu — solo header). --- */
#kt_aside_logo {
    background-color: var(--mm-gray-50) !important;
    height: 50px !important;
    min-height: 50px !important;
    padding: 0 18px !important;
    display: flex !important;
    align-items: center !important;
    border-bottom: 1px solid var(--mm-gray-200) !important;
}
#kt_aside_logo img.max-h-50px {
    max-height: 32px !important;
}

/* --- Menu container: meno gap fra sezioni --- */
#kt_aside_menu {
    font-size: 13px !important;
    margin-top: 2px !important;
    margin-bottom: 0 !important;
}
#kt_aside_menu .menu-content {
    padding: 0 !important;
}

/* --- Section header (es. "Warehouses", "Screen Widgets", "Ufficio Amministr.") --- */
#kt_aside_menu .menu-item.pt-3 {
    padding-top: 0 !important;
}
#kt_aside_menu .menu-item.pt-3 > .menu-content {
    padding: 10px 14px 2px !important;
}
#kt_aside_menu .menu-item.pt-3 > .menu-content > span.text-uppercase.fw-bold {
    color: var(--mm-gray-500) !important;
    font-size: 10px !important;
    font-weight: var(--mm-fw-semibold) !important;
    letter-spacing: 0.08em !important;
}

/* --- Top-level menu link: padding compatto, icon piccola, testo dark --- */
#kt_aside_menu .menu-item > .menu-link {
    padding: 2px 12px !important;
    border-radius: 6px !important;
    color: var(--mm-gray-900) !important;
    font-weight: var(--mm-fw-semibold) !important;
    font-size: 13px !important;
    line-height: 1.4 !important;
    transition: background-color var(--mm-tr-fast), color var(--mm-tr-fast);
}
#kt_aside_menu .menu-item > .menu-link > .menu-icon {
    width: 22px !important;
    margin-right: 8px !important;
}
#kt_aside_menu .menu-item > .menu-link > .menu-icon i {
    /* Icon color via CSS variable --mm-icon-color (set per-area sotto via
       .mm-area-X). Fallback a primary per top group. Forza --fa-primary-color
       (duotone), --fa-secondary-color (duotone path2) E color (icone solid /
       sharp / classic / regular non-duotone). Robusto su QUALSIASI stile FA. */
    --fa-primary-color: var(--mm-icon-color, var(--mm-color-primary)) !important;
    --fa-primary-opacity: 1;
    --fa-secondary-color: var(--mm-icon-color, var(--mm-color-primary)) !important;
    --fa-secondary-opacity: 0.4;
    color: var(--mm-icon-color, var(--mm-color-primary)) !important;
}
#kt_aside_menu .menu-item > .menu-link > .menu-icon i.fs-2 {
    font-size: 18px !important;
}
#kt_aside_menu .menu-item > .menu-link > .menu-title {
    font-size: 13px !important;
    color: inherit !important;
}
#kt_aside_menu .menu-item > .menu-link > .menu-arrow {
    width: 9px !important;
    height: 9px !important;
    opacity: 0.6;
}
#kt_aside_menu .menu-item > .menu-link > .menu-arrow:after {
    font-size: 9px !important;
    color: var(--mm-gray-400) !important;
}

/* --- Sidebar bg: off-white per contrasto con header gradient + cards bianche --- */
.aside {
    background-color: var(--mm-gray-50) !important;
    border-right: 1px solid var(--mm-gray-200);
}

/* --- Hover: bg gray-100 (più visibile su sidebar gray-50) --- */
#kt_aside_menu .menu-item > .menu-link:hover {
    background-color: var(--mm-gray-100) !important;
    color: var(--mm-gray-900) !important;
}

/* --- Active state: bg subtle + left border 2px primary (no blu pieno) --- */
#kt_aside_menu .menu-item.hover.show > .menu-link,
#kt_aside_menu .menu-item > .menu-link.active {
    background-color: var(--mm-gray-100) !important;
    color: var(--mm-color-primary) !important;
    box-shadow: inset 2px 0 0 var(--mm-color-primary);
    border-radius: 0 6px 6px 0 !important;
}
#kt_aside_menu .menu-item > .menu-link.active .menu-icon i,
#kt_aside_menu .menu-item.hover.show > .menu-link .menu-icon i {
    color: var(--mm-color-primary) !important;
}

/* --- Sub-menu (figli di un accordion espanso) --- */
#kt_aside_menu .menu-sub.menu-sub-accordion {
    padding: 0 0 2px 28px !important;
    margin: 0 !important;
    position: relative;
}
#kt_aside_menu .menu-sub.menu-sub-accordion::before {
    content: '';
    position: absolute;
    left: 22px; top: 1px; bottom: 2px;
    width: 1px;
    background-color: var(--mm-gray-200);
}
#kt_aside_menu .menu-sub .menu-item > .menu-link {
    padding: 2px 10px !important;
    font-size: 12.5px !important;
    color: var(--mm-gray-800, var(--mm-gray-900)) !important;
    font-weight: var(--mm-fw-medium) !important;
    border-radius: 4px !important;
    margin-left: -2px;
}
#kt_aside_menu .menu-sub .menu-item > .menu-link > .menu-bullet {
    width: 10px !important;
    margin-right: 6px !important;
}
#kt_aside_menu .menu-sub .menu-item > .menu-link > .menu-bullet > .bullet-dot {
    width: 4px !important; height: 4px !important;
    background-color: var(--mm-gray-300) !important;
}
#kt_aside_menu .menu-sub .menu-item > .menu-link:hover {
    background-color: var(--mm-gray-100) !important;
    color: var(--mm-gray-900) !important;
}
#kt_aside_menu .menu-sub .menu-item > .menu-link:hover > .menu-bullet > .bullet-dot {
    background-color: var(--mm-color-primary) !important;
}

/* Active sub-item: testo primary + bullet primary (no left-border qui per
   non duplicare con la guide-line ::before) */
#kt_aside_menu .menu-sub .menu-item > .menu-link.active {
    background-color: var(--mm-gray-100) !important;
    color: var(--mm-color-primary) !important;
    font-weight: var(--mm-fw-semibold) !important;
    box-shadow: none !important;
}
#kt_aside_menu .menu-sub .menu-item > .menu-link.active > .menu-bullet > .bullet-dot {
    background-color: var(--mm-color-primary) !important;
    width: 5px !important; height: 5px !important;
}

/* ============================================================================
   Fase 2 C — Sidebar — Set 3: Colori per AREA funzionale (wayfinding).
   Ogni gruppo del menu è marcato con classe #kt_aside_menu .mm-area-* (sui wrapper
   .d-contents dei c-menu-* o sui menu-item inline in aside.html).
   La tinta colora SOLO l'icona (duotone primary+secondary) e l'opzionale
   accent del section header. Lo stato active rimane in primary blu MMWeb
   per coerenza col resto del design system.
   ============================================================================ */

/* Per ogni area, imposta --mm-icon-color: la regola icon-i comune (sopra)
   legge questa var via fallback. Inheritance CSS: la var si propaga ai
   discendenti dell'elemento .mm-area-X (compresi span.path1::before via
   --fa-primary-color). Robusta su qualsiasi stile FA (duotone, sharp-
   duotone, classic-solid, regular). */
#kt_aside_menu .mm-area-admin        { --mm-icon-color: var(--mm-area-admin); }
#kt_aside_menu .mm-area-trading      { --mm-icon-color: var(--mm-area-trading); }
#kt_aside_menu .mm-area-distribution { --mm-icon-color: var(--mm-area-distribution); }
#kt_aside_menu .mm-area-lab          { --mm-icon-color: var(--mm-area-lab); }
#kt_aside_menu .mm-area-logistics    { --mm-icon-color: var(--mm-area-logistics); }
#kt_aside_menu .mm-area-shipping     { --mm-icon-color: var(--mm-area-shipping); }
#kt_aside_menu .mm-area-warehouse    { --mm-icon-color: var(--mm-area-warehouse); }
#kt_aside_menu .mm-area-widgets      { --mm-icon-color: var(--mm-area-widgets); }

/* ============================================================================
   Active state PER AREA — Set 4: stato visivamente forte con bg tinto.
   La voce attiva prende bg light dell'area + bordo sinistro 3px in tinta
   area + testo bold. Selettori robusti che gestiscono entrambi i pattern:
   - #kt_aside_menu .mm-area-X su <div class="d-contents"> (c-menu-*) → menu-link è
     descendant via .menu-item
   - #kt_aside_menu .mm-area-X direttamente su <div class="menu-item"> (aside.html inline) →
     menu-link è child diretto
   ============================================================================ */

/* Hover top-level: bg light area */
#kt_aside_menu .mm-area-admin > .menu-item > .menu-link:hover,
#kt_aside_menu .mm-area-admin.menu-item > .menu-link:hover { background-color: var(--mm-area-admin-bg) !important; }
#kt_aside_menu .mm-area-trading > .menu-item > .menu-link:hover,
#kt_aside_menu .mm-area-trading.menu-item > .menu-link:hover { background-color: var(--mm-area-trading-bg) !important; }
#kt_aside_menu .mm-area-distribution > .menu-item > .menu-link:hover,
#kt_aside_menu .mm-area-distribution.menu-item > .menu-link:hover { background-color: var(--mm-area-distribution-bg) !important; }
#kt_aside_menu .mm-area-lab > .menu-item > .menu-link:hover,
#kt_aside_menu .mm-area-lab.menu-item > .menu-link:hover { background-color: var(--mm-area-lab-bg) !important; }
#kt_aside_menu .mm-area-logistics > .menu-item > .menu-link:hover,
#kt_aside_menu .mm-area-logistics.menu-item > .menu-link:hover { background-color: var(--mm-area-logistics-bg) !important; }
#kt_aside_menu .mm-area-shipping > .menu-item > .menu-link:hover,
#kt_aside_menu .mm-area-shipping.menu-item > .menu-link:hover { background-color: var(--mm-area-shipping-bg) !important; }
#kt_aside_menu .mm-area-warehouse > .menu-item > .menu-link:hover,
#kt_aside_menu .mm-area-warehouse.menu-item > .menu-link:hover { background-color: var(--mm-area-warehouse-bg) !important; }
#kt_aside_menu .mm-area-widgets > .menu-item > .menu-link:hover,
#kt_aside_menu .mm-area-widgets.menu-item > .menu-link:hover { background-color: var(--mm-area-widgets-bg) !important; }

/* Hover sub-menu: bg light area */
#kt_aside_menu .mm-area-admin .menu-sub .menu-item > .menu-link:hover { background-color: var(--mm-area-admin-bg) !important; }
#kt_aside_menu .mm-area-trading .menu-sub .menu-item > .menu-link:hover { background-color: var(--mm-area-trading-bg) !important; }
#kt_aside_menu .mm-area-distribution .menu-sub .menu-item > .menu-link:hover { background-color: var(--mm-area-distribution-bg) !important; }
#kt_aside_menu .mm-area-lab .menu-sub .menu-item > .menu-link:hover { background-color: var(--mm-area-lab-bg) !important; }
#kt_aside_menu .mm-area-logistics .menu-sub .menu-item > .menu-link:hover { background-color: var(--mm-area-logistics-bg) !important; }
#kt_aside_menu .mm-area-shipping .menu-sub .menu-item > .menu-link:hover { background-color: var(--mm-area-shipping-bg) !important; }
#kt_aside_menu .mm-area-warehouse .menu-sub .menu-item > .menu-link:hover { background-color: var(--mm-area-warehouse-bg) !important; }
#kt_aside_menu .mm-area-widgets .menu-sub .menu-item > .menu-link:hover { background-color: var(--mm-area-widgets-bg) !important; }

/* Active state TOP-LEVEL — bg + bordo 3px + testo bold */
#kt_aside_menu .mm-area-admin > .menu-item > .menu-link.active,
#kt_aside_menu .mm-area-admin > .menu-item.hover.show > .menu-link,
#kt_aside_menu .mm-area-admin.menu-item > .menu-link.active,
#kt_aside_menu .mm-area-admin.menu-item.hover.show > .menu-link {
    background-color: var(--mm-area-admin-bg) !important;
    box-shadow: inset 3px 0 0 var(--mm-area-admin) !important;
    color: var(--mm-area-admin-dark) !important;
    --mm-icon-color: var(--mm-area-admin-dark);
    font-weight: var(--mm-fw-bold) !important;
}
#kt_aside_menu .mm-area-trading > .menu-item > .menu-link.active,
#kt_aside_menu .mm-area-trading > .menu-item.hover.show > .menu-link,
#kt_aside_menu .mm-area-trading.menu-item > .menu-link.active,
#kt_aside_menu .mm-area-trading.menu-item.hover.show > .menu-link {
    background-color: var(--mm-area-trading-bg) !important;
    box-shadow: inset 3px 0 0 var(--mm-area-trading) !important;
    color: var(--mm-area-trading-dark) !important;
    --mm-icon-color: var(--mm-area-trading-dark);
    font-weight: var(--mm-fw-bold) !important;
}
#kt_aside_menu .mm-area-distribution > .menu-item > .menu-link.active,
#kt_aside_menu .mm-area-distribution > .menu-item.hover.show > .menu-link,
#kt_aside_menu .mm-area-distribution.menu-item > .menu-link.active,
#kt_aside_menu .mm-area-distribution.menu-item.hover.show > .menu-link {
    background-color: var(--mm-area-distribution-bg) !important;
    box-shadow: inset 3px 0 0 var(--mm-area-distribution) !important;
    color: var(--mm-area-distribution-dark) !important;
    --mm-icon-color: var(--mm-area-distribution-dark);
    font-weight: var(--mm-fw-bold) !important;
}
#kt_aside_menu .mm-area-lab > .menu-item > .menu-link.active,
#kt_aside_menu .mm-area-lab > .menu-item.hover.show > .menu-link,
#kt_aside_menu .mm-area-lab.menu-item > .menu-link.active,
#kt_aside_menu .mm-area-lab.menu-item.hover.show > .menu-link {
    background-color: var(--mm-area-lab-bg) !important;
    box-shadow: inset 3px 0 0 var(--mm-area-lab) !important;
    color: var(--mm-area-lab-dark) !important;
    --mm-icon-color: var(--mm-area-lab-dark);
    font-weight: var(--mm-fw-bold) !important;
}
#kt_aside_menu .mm-area-logistics > .menu-item > .menu-link.active,
#kt_aside_menu .mm-area-logistics > .menu-item.hover.show > .menu-link,
#kt_aside_menu .mm-area-logistics.menu-item > .menu-link.active,
#kt_aside_menu .mm-area-logistics.menu-item.hover.show > .menu-link {
    background-color: var(--mm-area-logistics-bg) !important;
    box-shadow: inset 3px 0 0 var(--mm-area-logistics) !important;
    color: var(--mm-area-logistics-dark) !important;
    --mm-icon-color: var(--mm-area-logistics-dark);
    font-weight: var(--mm-fw-bold) !important;
}
#kt_aside_menu .mm-area-shipping > .menu-item > .menu-link.active,
#kt_aside_menu .mm-area-shipping > .menu-item.hover.show > .menu-link,
#kt_aside_menu .mm-area-shipping.menu-item > .menu-link.active,
#kt_aside_menu .mm-area-shipping.menu-item.hover.show > .menu-link {
    background-color: var(--mm-area-shipping-bg) !important;
    box-shadow: inset 3px 0 0 var(--mm-area-shipping) !important;
    color: var(--mm-area-shipping-dark) !important;
    --mm-icon-color: var(--mm-area-shipping-dark);
    font-weight: var(--mm-fw-bold) !important;
}
#kt_aside_menu .mm-area-warehouse > .menu-item > .menu-link.active,
#kt_aside_menu .mm-area-warehouse > .menu-item.hover.show > .menu-link,
#kt_aside_menu .mm-area-warehouse.menu-item > .menu-link.active,
#kt_aside_menu .mm-area-warehouse.menu-item.hover.show > .menu-link {
    background-color: var(--mm-area-warehouse-bg) !important;
    box-shadow: inset 3px 0 0 var(--mm-area-warehouse) !important;
    color: var(--mm-area-warehouse-dark) !important;
    --mm-icon-color: var(--mm-area-warehouse-dark);
    font-weight: var(--mm-fw-bold) !important;
}
#kt_aside_menu .mm-area-widgets > .menu-item > .menu-link.active,
#kt_aside_menu .mm-area-widgets > .menu-item.hover.show > .menu-link,
#kt_aside_menu .mm-area-widgets.menu-item > .menu-link.active,
#kt_aside_menu .mm-area-widgets.menu-item.hover.show > .menu-link {
    background-color: var(--mm-area-widgets-bg) !important;
    box-shadow: inset 3px 0 0 var(--mm-area-widgets) !important;
    color: var(--mm-area-widgets-dark) !important;
    --mm-icon-color: var(--mm-area-widgets-dark);
    font-weight: var(--mm-fw-bold) !important;
}

/* Active state SUB-MENU — bg area-bg + bullet pieno area + testo bold */
#kt_aside_menu .mm-area-admin .menu-sub .menu-item > .menu-link.active {
    background-color: var(--mm-area-admin-bg) !important;
    color: var(--mm-area-admin-dark) !important;
    font-weight: var(--mm-fw-bold) !important;
}
#kt_aside_menu .mm-area-admin .menu-sub .menu-item > .menu-link.active > .menu-bullet > .bullet-dot {
    background-color: var(--mm-area-admin) !important;
    width: 6px !important; height: 6px !important;
}
#kt_aside_menu .mm-area-trading .menu-sub .menu-item > .menu-link.active {
    background-color: var(--mm-area-trading-bg) !important;
    color: var(--mm-area-trading-dark) !important;
    font-weight: var(--mm-fw-bold) !important;
}
#kt_aside_menu .mm-area-trading .menu-sub .menu-item > .menu-link.active > .menu-bullet > .bullet-dot {
    background-color: var(--mm-area-trading) !important;
    width: 6px !important; height: 6px !important;
}
#kt_aside_menu .mm-area-distribution .menu-sub .menu-item > .menu-link.active {
    background-color: var(--mm-area-distribution-bg) !important;
    color: var(--mm-area-distribution-dark) !important;
    font-weight: var(--mm-fw-bold) !important;
}
#kt_aside_menu .mm-area-distribution .menu-sub .menu-item > .menu-link.active > .menu-bullet > .bullet-dot {
    background-color: var(--mm-area-distribution) !important;
    width: 6px !important; height: 6px !important;
}
#kt_aside_menu .mm-area-lab .menu-sub .menu-item > .menu-link.active {
    background-color: var(--mm-area-lab-bg) !important;
    color: var(--mm-area-lab-dark) !important;
    font-weight: var(--mm-fw-bold) !important;
}
#kt_aside_menu .mm-area-lab .menu-sub .menu-item > .menu-link.active > .menu-bullet > .bullet-dot {
    background-color: var(--mm-area-lab) !important;
    width: 6px !important; height: 6px !important;
}
#kt_aside_menu .mm-area-logistics .menu-sub .menu-item > .menu-link.active {
    background-color: var(--mm-area-logistics-bg) !important;
    color: var(--mm-area-logistics-dark) !important;
    font-weight: var(--mm-fw-bold) !important;
}
#kt_aside_menu .mm-area-logistics .menu-sub .menu-item > .menu-link.active > .menu-bullet > .bullet-dot {
    background-color: var(--mm-area-logistics) !important;
    width: 6px !important; height: 6px !important;
}
#kt_aside_menu .mm-area-shipping .menu-sub .menu-item > .menu-link.active {
    background-color: var(--mm-area-shipping-bg) !important;
    color: var(--mm-area-shipping-dark) !important;
    font-weight: var(--mm-fw-bold) !important;
}
#kt_aside_menu .mm-area-shipping .menu-sub .menu-item > .menu-link.active > .menu-bullet > .bullet-dot {
    background-color: var(--mm-area-shipping) !important;
    width: 6px !important; height: 6px !important;
}
#kt_aside_menu .mm-area-warehouse .menu-sub .menu-item > .menu-link.active {
    background-color: var(--mm-area-warehouse-bg) !important;
    color: var(--mm-area-warehouse-dark) !important;
    font-weight: var(--mm-fw-bold) !important;
}
#kt_aside_menu .mm-area-warehouse .menu-sub .menu-item > .menu-link.active > .menu-bullet > .bullet-dot {
    background-color: var(--mm-area-warehouse) !important;
    width: 6px !important; height: 6px !important;
}
#kt_aside_menu .mm-area-widgets .menu-sub .menu-item > .menu-link.active {
    background-color: var(--mm-area-widgets-bg) !important;
    color: var(--mm-area-widgets-dark) !important;
    font-weight: var(--mm-fw-bold) !important;
}
#kt_aside_menu .mm-area-widgets .menu-sub .menu-item > .menu-link.active > .menu-bullet > .bullet-dot {
    background-color: var(--mm-area-widgets) !important;
    width: 6px !important; height: 6px !important;
}

/* ============================================================================
   Active icon color — match testo (regole esplicite ad alta specificità).
   La var --mm-icon-color via inheritance non sempre vince consistentemente
   contro le rules generic dell'icona quando ci sono FA classes miste.
   Queste regole forzano direttamente --fa-primary-color + color sull'i
   quando il menu-link è active/hover.show, garantendo icon == testo.
   ============================================================================ */
#kt_aside_menu .mm-area-admin > .menu-item > .menu-link.active > .menu-icon i,
#kt_aside_menu .mm-area-admin > .menu-item.hover.show > .menu-link > .menu-icon i,
#kt_aside_menu .mm-area-admin.menu-item > .menu-link.active > .menu-icon i,
#kt_aside_menu .mm-area-admin.menu-item.hover.show > .menu-link > .menu-icon i {
    --fa-primary-color: var(--mm-area-admin-dark) !important;
    --fa-secondary-color: var(--mm-area-admin-dark) !important;
    color: var(--mm-area-admin-dark) !important;
}
#kt_aside_menu .mm-area-trading > .menu-item > .menu-link.active > .menu-icon i,
#kt_aside_menu .mm-area-trading > .menu-item.hover.show > .menu-link > .menu-icon i,
#kt_aside_menu .mm-area-trading.menu-item > .menu-link.active > .menu-icon i,
#kt_aside_menu .mm-area-trading.menu-item.hover.show > .menu-link > .menu-icon i {
    --fa-primary-color: var(--mm-area-trading-dark) !important;
    --fa-secondary-color: var(--mm-area-trading-dark) !important;
    color: var(--mm-area-trading-dark) !important;
}
#kt_aside_menu .mm-area-distribution > .menu-item > .menu-link.active > .menu-icon i,
#kt_aside_menu .mm-area-distribution > .menu-item.hover.show > .menu-link > .menu-icon i,
#kt_aside_menu .mm-area-distribution.menu-item > .menu-link.active > .menu-icon i,
#kt_aside_menu .mm-area-distribution.menu-item.hover.show > .menu-link > .menu-icon i {
    --fa-primary-color: var(--mm-area-distribution-dark) !important;
    --fa-secondary-color: var(--mm-area-distribution-dark) !important;
    color: var(--mm-area-distribution-dark) !important;
}
#kt_aside_menu .mm-area-lab > .menu-item > .menu-link.active > .menu-icon i,
#kt_aside_menu .mm-area-lab > .menu-item.hover.show > .menu-link > .menu-icon i,
#kt_aside_menu .mm-area-lab.menu-item > .menu-link.active > .menu-icon i,
#kt_aside_menu .mm-area-lab.menu-item.hover.show > .menu-link > .menu-icon i {
    --fa-primary-color: var(--mm-area-lab-dark) !important;
    --fa-secondary-color: var(--mm-area-lab-dark) !important;
    color: var(--mm-area-lab-dark) !important;
}
#kt_aside_menu .mm-area-logistics > .menu-item > .menu-link.active > .menu-icon i,
#kt_aside_menu .mm-area-logistics > .menu-item.hover.show > .menu-link > .menu-icon i,
#kt_aside_menu .mm-area-logistics.menu-item > .menu-link.active > .menu-icon i,
#kt_aside_menu .mm-area-logistics.menu-item.hover.show > .menu-link > .menu-icon i {
    --fa-primary-color: var(--mm-area-logistics-dark) !important;
    --fa-secondary-color: var(--mm-area-logistics-dark) !important;
    color: var(--mm-area-logistics-dark) !important;
}
#kt_aside_menu .mm-area-shipping > .menu-item > .menu-link.active > .menu-icon i,
#kt_aside_menu .mm-area-shipping > .menu-item.hover.show > .menu-link > .menu-icon i,
#kt_aside_menu .mm-area-shipping.menu-item > .menu-link.active > .menu-icon i,
#kt_aside_menu .mm-area-shipping.menu-item.hover.show > .menu-link > .menu-icon i {
    --fa-primary-color: var(--mm-area-shipping-dark) !important;
    --fa-secondary-color: var(--mm-area-shipping-dark) !important;
    color: var(--mm-area-shipping-dark) !important;
}
#kt_aside_menu .mm-area-warehouse > .menu-item > .menu-link.active > .menu-icon i,
#kt_aside_menu .mm-area-warehouse > .menu-item.hover.show > .menu-link > .menu-icon i,
#kt_aside_menu .mm-area-warehouse.menu-item > .menu-link.active > .menu-icon i,
#kt_aside_menu .mm-area-warehouse.menu-item.hover.show > .menu-link > .menu-icon i {
    --fa-primary-color: var(--mm-area-warehouse-dark) !important;
    --fa-secondary-color: var(--mm-area-warehouse-dark) !important;
    color: var(--mm-area-warehouse-dark) !important;
}
#kt_aside_menu .mm-area-widgets > .menu-item > .menu-link.active > .menu-icon i,
#kt_aside_menu .mm-area-widgets > .menu-item.hover.show > .menu-link > .menu-icon i,
#kt_aside_menu .mm-area-widgets.menu-item > .menu-link.active > .menu-icon i,
#kt_aside_menu .mm-area-widgets.menu-item.hover.show > .menu-link > .menu-icon i {
    --fa-primary-color: var(--mm-area-widgets-dark) !important;
    --fa-secondary-color: var(--mm-area-widgets-dark) !important;
    color: var(--mm-area-widgets-dark) !important;
}

/* Sub-menu bullet active: anche il bullet matcha il testo dark (era base) */
#kt_aside_menu .mm-area-admin .menu-sub .menu-item > .menu-link.active > .menu-bullet > .bullet-dot { background-color: var(--mm-area-admin-dark) !important; }
#kt_aside_menu .mm-area-trading .menu-sub .menu-item > .menu-link.active > .menu-bullet > .bullet-dot { background-color: var(--mm-area-trading-dark) !important; }
#kt_aside_menu .mm-area-distribution .menu-sub .menu-item > .menu-link.active > .menu-bullet > .bullet-dot { background-color: var(--mm-area-distribution-dark) !important; }
#kt_aside_menu .mm-area-lab .menu-sub .menu-item > .menu-link.active > .menu-bullet > .bullet-dot { background-color: var(--mm-area-lab-dark) !important; }
#kt_aside_menu .mm-area-logistics .menu-sub .menu-item > .menu-link.active > .menu-bullet > .bullet-dot { background-color: var(--mm-area-logistics-dark) !important; }
#kt_aside_menu .mm-area-shipping .menu-sub .menu-item > .menu-link.active > .menu-bullet > .bullet-dot { background-color: var(--mm-area-shipping-dark) !important; }
#kt_aside_menu .mm-area-warehouse .menu-sub .menu-item > .menu-link.active > .menu-bullet > .bullet-dot { background-color: var(--mm-area-warehouse-dark) !important; }
#kt_aside_menu .mm-area-widgets .menu-sub .menu-item > .menu-link.active > .menu-bullet > .bullet-dot { background-color: var(--mm-area-widgets-dark) !important; }

/* ============================================================================
   Fase 2 C — Header + Aside-logo (chrome) — Set 2: blu gradient elegante.
   Scope: #kt_header + #kt_aside_logo. Stesso gradient su entrambi così la
   banda orizzontale alta è continua (anche sotto il logo). Altezza fissa
   50px, border-bottom 2px primary come accent brand, logo monocromatico
   bianco (filter brightness 0 + invert) per leggibilità su blu.
   ============================================================================ */

#kt_header {
    background: var(--mm-grad-chrome) !important;
    height: 50px !important;
    min-height: 50px !important;
    border-bottom: 0 !important;
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.4) inset, 0 3px 8px -3px rgba(15, 23, 42, 0.2);
    /* Topbar sempre visibile durante lo scroll. Sticky non richiede
       padding-top sul content; richiede solo che gli antenati non abbiano
       overflow: hidden o scroll. Z-index alto per stare sopra ai dropdown. */
    position: sticky !important;
    top: 0 !important;
    z-index: 100 !important;
}

/* Topbar variant per tipologia azienda (classe sul <body> impostata da
   header.html mounted() leggendo data.profile.enable_trading /
   enable_distribution). Aziende miste → default blu. */
body.mm-company-trading #kt_header {
    background: var(--mm-grad-chrome-trading) !important;
}
body.mm-company-distribution #kt_header {
    background: var(--mm-grad-chrome-distribution) !important;
}

#kt_header .container-fluid {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

/* Toggler aside (← arrow): bianco al 80%, hover 100% */
#kt_header [data-kt-toggle="true"] i,
#kt_header #kt_aside_toggle i {
    color: rgba(255, 255, 255, 0.8) !important;
}
#kt_header [data-kt-toggle="true"]:hover i,
#kt_header #kt_aside_toggle:hover i {
    color: var(--mm-white) !important;
}

/* Nome azienda (Diano Latte S.r.l.): font ridotto, testo bianco */
#kt_header .mm-header-search {
    height: auto !important;
}
#kt_header .mm-header-search .fw-bold.fs-22 {
    color: var(--mm-white) !important;
    font-size: 14px !important;
    font-weight: var(--mm-fw-semibold) !important;
    letter-spacing: 0.01em;
}

/* Reminders alert (campanella) — visibile su sfondo dark */
#kt_header .text-danger,
#kt_header .text-danger i.fa-bell {
    color: var(--mm-color-warning) !important; /* amber su dark = più leggibile del rosso */
}
#kt_header .text-danger b {
    color: var(--mm-white) !important;
}

/* Activities button "New Board Updates": adatta al dark */
#kt_header #platform_upadates_button.btn-light-warning {
    background-color: var(--mm-color-warning-bg) !important;
    color: var(--mm-gray-900) !important;
    font-size: 12px !important;
    padding: 4px 10px !important;
}

/* User menu (nome utente in alto a destra): bianco */
#kt_header #kt_header_user_menu_toggle .fw-bold.fs-16 {
    color: var(--mm-white) !important;
    font-size: 13px !important;
    font-weight: var(--mm-fw-medium) !important;
}

/* Dropdown del user-menu (su scuro deve riaprirsi su white card) */
#kt_header .menu.menu-sub-dropdown {
    background-color: var(--mm-white) !important;
    color: var(--mm-gray-900) !important;
}

/* Toolbar wrapper: gap compatto */
#kt_header .d-flex.align-items-stretch.flex-shrink-0 > .d-flex {
    margin-left: 8px !important;
}