/* ============================================================================
   mm-components.css — CSS di feature condivise del design system MMWeb.
   Mandato: regole CSS dei componenti pagina (page-tanks, italy-map,
   notifications, op-* operations linked-list, supply-grid).
   I selettori restano quelli originali per backward-compat — il rename
   BEM .mm-* + sostituzione hex → var(--mm-*) verrà fatto nelle fasi
   successive (RESTYLING_PLAN.md §7 Fasi 4-7).
   ============================================================================ */

p.lf {
    white-space: pre-line;
}


.quality-box{
    border:solid 1px #ccc;
    border-radius:3px !important;
}

.progress-bar {
    border: solid 1px #ccc;
    height: 15px;
    overflow: hidden;
    text-align: center;
    display: none;
}
.progress-bar > div{
    width:0px;
    background-color:forestgreen;
    color:#000;
}


li label.text-disabled {
    opacity: 0.8;
    cursor: not-allowed;
}

/*SORTABLE*/

/* Stile della riga mentre viene trascinata */
table tbody.sortable tr.dragging {
    background-color: #f0f0f0;
    opacity: 0.8;
}

/* Cursor di default per i tr */
table tbody.sortable tr {
    cursor: move;
}

/* Stile della riga di destinazione durante il drag over */
table tbody.sortable tr.over {
    border-top: 2px solid #ff0000; /* Evidenzia il bordo superiore */
}
/*END OF SORTABLE*/

div.mm-user-menu-block:hover {
    background-color: var(--bs-info-light) !important;
}

div.mm-user-menu-block {
    border:solid 1px #000 !important;
}
div.mm-user-menu-block i {
    color: darkblue !important;
}

/* My Weekly Performance — usermenu */
.mm-um-perf-row { margin-bottom: 16px; }

/* override del width fisso .mm-um .mm-user-menu-element (360px) */
.mm-um .mm-user-menu-element.mm-um-perf-element {
    width: 100%;
    max-width: 100%;
    flex: 0 0 100%;
}

.mm-um-perf-block {
    border: 1px solid var(--mm-gray-200) !important;
    border-radius: 12px;
    padding: 20px 24px;
    background:
        linear-gradient(135deg, rgba(220,38,38,0.04) 0%, rgba(255,255,255,0) 35%),
        linear-gradient(225deg, rgba(5,150,105,0.04) 0%, rgba(255,255,255,0) 35%),
        var(--mm-white, #fff);
}
.mm-um-perf-block:hover { background-color: var(--mm-white, #fff) !important; }

.mm-um-perf-head {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 12px;
}
.mm-um-perf-head .mm-um-icon {
    color: var(--mm-color-primary) !important;
}
.mm-um-perf-head .mm-um-title {
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--mm-gray-800, #1f2937);
}
.mm-um-perf-week-label {
    font-size: 0.8rem;
    font-weight: 500;
    color: var(--mm-gray-500);
    background: var(--mm-gray-100);
    padding: 2px 10px;
    border-radius: 12px;
    margin-left: auto;
}

.mm-um-perf-loading,
.mm-um-perf-empty {
    text-align: center;
    padding: 28px 12px;
    color: var(--mm-gray-500);
    font-size: 0.9rem;
}
.mm-um-perf-empty i { color: var(--mm-gray-400); }

.mm-um-perf-content {
    display: grid;
    grid-template-columns: minmax(320px, 420px) 1fr;
    gap: 24px;
    align-items: stretch;
}
@media (max-width: 992px) {
    .mm-um-perf-content { grid-template-columns: 1fr; }
}

.mm-um-perf-kpis {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    min-width: 0;
}

.mm-um-perf-kpi {
    border-radius: 8px;
    padding: 12px 14px;
    background: var(--mm-gray-50);
    border: 1px solid var(--mm-gray-200);
    display: flex;
    flex-direction: column;
    min-width: 0;
}
.mm-um-perf-kpi.mm-um-perf-buy {
    background: linear-gradient(135deg, rgba(220,38,38,0.08), rgba(220,38,38,0.02));
    border-color: rgba(220,38,38,0.18);
}
.mm-um-perf-kpi.mm-um-perf-sell {
    background: linear-gradient(135deg, rgba(5,150,105,0.08), rgba(5,150,105,0.02));
    border-color: rgba(5,150,105,0.18);
}
.mm-um-perf-kpi-head {
    font-size: 0.78rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    margin-bottom: 6px;
    color: var(--mm-gray-600, #4b5563);
}
.mm-um-perf-kpi.mm-um-perf-buy .mm-um-perf-kpi-head { color: var(--mm-color-buy); }
.mm-um-perf-kpi.mm-um-perf-sell .mm-um-perf-kpi-head { color: var(--mm-color-sell); }

.mm-um-perf-kpi-value {
    font-size: 1.45rem;
    font-weight: 700;
    line-height: 1.15;
    color: var(--mm-gray-900);
    word-break: break-word;
}
.mm-um-perf-kpi-meta {
    margin-top: 2px;
    font-size: 0.78rem;
    color: var(--mm-gray-500);
}

.mm-um-perf-delta {
    margin-top: 8px;
    font-size: 0.82rem;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    align-self: flex-start;
    padding: 3px 8px;
    border-radius: 999px;
}
.mm-um-perf-delta small {
    font-weight: 500;
    color: var(--mm-gray-500);
    margin-left: 2px;
}
.mm-um-perf-delta.up {
    background: rgba(5,150,105,0.12);
    color: var(--mm-color-sell);
}
.mm-um-perf-delta.down {
    background: rgba(220,38,38,0.12);
    color: var(--mm-color-buy);
}
.mm-um-perf-delta.flat {
    background: var(--mm-gray-100);
    color: var(--mm-gray-500);
}

.mm-um-perf-lifetime {
    margin-top: 12px;
    padding-top: 10px;
    border-top: 1px dashed var(--mm-gray-300);
    font-size: 0.78rem;
    color: var(--mm-gray-600, #4b5563);
    line-height: 1.5;
}
.mm-um-perf-lifetime-head {
    font-size: 0.68rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    color: var(--mm-gray-500);
    margin-bottom: 4px;
}
.mm-um-perf-lifetime-row {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 8px;
}
.mm-um-perf-lifetime-row b {
    color: var(--mm-gray-800, #1f2937);
    font-weight: 700;
}

.mm-um-perf-chart {
    min-height: 240px;
    width: 100%;
    min-width: 0;
    background: var(--mm-white, #fff);
    border: 1px solid var(--mm-gray-100);
    border-radius: 10px;
    padding: 8px 10px;
    overflow: hidden;
    box-sizing: border-box;
}
.mm-um-perf-chart .apexcharts-canvas { margin: 0 auto; max-width: 100%; }


div.main-loading-element {
    position: fixed;
    width: calc(100vw);
    height: calc(100vh);
    text-align: center;
    z-index: 100000;
    left: 0;
    top: 0;
}
div.main-loading-element > .overlay{
    position: fixed;
    width: calc(100vw);
    height: calc(100vh);
    background-color: #000;
    text-align: center;
    opacity: 0.4;    
    left: 0;
    top: 0;
}
div.main-loading-element .loading-inner {
    position:absolute;
    top: calc(50vh - 25px);
    z-index: 100001;    
    width: 100%;
    text-align:center;
}

div.main-loading-element .loading-inner i{
    font-size:50px;
    display:inline-block;
    /*color:var(--mm-white);*/
    margin-right:10px;
}
div.main-loading-element .loading-inner p{
    font-size:38px;
    display:inline-block;
    /*color:var(--mm-white);*/
}



ul.simple li{
    list-style-type:none;
}


ul.inline li{
    list-style-type:none;
    display:inline-block;
}

p.explain {
    background-color: #e7f1ff;
    border:solid 1px #ddd;
    border-radius:5px;
}

label.btn-actions a {
    cursor: pointer !important;
    text-decoration: underline !important;
    font-weight: normal;
    margin-left:3px;
}

/*TANK*/
.page-tanks {
    background: #f5f7fb;
    margin: 24px;
    font-family: system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Arial, sans-serif;
    color: #1f2937;
}

    /* CARD */
    .page-tanks .tank-card {
        width: 340px;
        max-width: 100%;
        background: var(--mm-white);
        border-radius: 16px;
        box-shadow: 0 8px 24px rgba(0,0,0,.08);
        padding: 18px 18px 14px;
        border: 1px solid var(--mm-gray-200);
    }

    /* HEADER */
    .page-tanks .tank-head {
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        gap: 12px;
        margin-bottom: 6px;
    }

    .page-tanks .tank-title {
        font-weight: 700;
        font-size: 1.15rem;
    }

    .page-tanks .tank-sub {
        color: var(--mm-gray-500);
        font-size: .9rem;
        margin-top: 2px;
    }

    .page-tanks .pill {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        font-size: .8rem;
        font-weight: 600;
        color: #a16207;
        background: #fff8e1;
        padding: 6px 10px;
        border-radius: 999px;
        border: 1px solid #fde68a;
        white-space: nowrap;
    }

    .page-tanks .dot {
        width: 8px;
        height: 8px;
        border-radius: 999px;
        background: var(--mm-color-warning);
    }

    /* SERBATOIO */
    .page-tanks .tank {
        position: relative;
        height: 150px;
        margin: 10px 0 14px;
        border-radius: 12px;
        border: 2px solid #c9d2e0;
        background: linear-gradient(#eef2f7,#dfe6ee);
        overflow: hidden;
    }

        .page-tanks .tank .fill {
            position: absolute;
            left: 0;
            bottom: 0;
            width: 100%;
            background: linear-gradient(#bae6fd, #7dd3fc);
            /*background: linear-gradient(var(--mm-color-sell-light), #86efac);*/
        }

    .page-tanks .tank::before {
        content: "";
        position: absolute;
        inset: 0;
        background: linear-gradient(to bottom, rgba(255,255,255,.45) 0 2px, transparent 2px 33.33%) 0 0/100% 33.33%;
        pointer-events: none;
    }

    .page-tanks .badge {
        position: absolute;
        right: 5px;
        top: 5px;
        background: linear-gradient(135deg, var(--mm-white) 0%, #f0f9ff 100%);
        border: none;
        border-radius: 4px;
        padding: 8px 14px;
        font-weight: 700;
        font-size: .9rem;
        color: #0369a1;
        box-shadow: 0 4px 12px rgba(14, 165, 233, 0.25);
    }

    /* DATI ANALISI NEL SERBATOIO */
    .page-tanks .tank-analysis-data {
        position: absolute;
        left: 6px;
        top: 5px;
        z-index: 10;
        display: flex;
        flex-direction: column;
        gap: 2px;
    }

    .page-tanks .analysis-row {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 8px;
        font-size: 0.75rem;
        line-height: 1.2;
        background: rgba(255, 255, 255, 0.85);
        padding: 3px 8px;
        border-radius: 4px;
        backdrop-filter: blur(4px);
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
        min-width: 120px;
    }

    .page-tanks .analysis-label {
        display: flex;
        align-items: center;
        gap: 0;
    }

    .page-tanks .analysis-key {
        font-weight: 600;
        color: #4b5563;
        white-space: nowrap;
    }

    .page-tanks .analysis-value {
        font-weight: 700;
        color: #1f2937;
        text-align: right;
    }

    /* OUT OF RANGE STYLING */
    .page-tanks .analysis-value.text-danger {
        color: #dc3545 !important;
    }

    /* STATUS DOT */
    .page-tanks .status-dot {
        display: inline-block;
        width: 6px;
        height: 6px;
        border-radius: 50%;
        margin-right: 5px;
        flex-shrink: 0;
    }

    .page-tanks .status-dot.status-ok {
        background-color: #22c55e;
    }

    .page-tanks .status-dot.status-danger {
        background-color: #dc3545;
    }

    /* META DATI */
    .page-tanks .meta-inline {
        display: flex;
        flex-wrap: wrap;
        margin-top: 5px;
    }

    .page-tanks .meta-inline .label {
	    font-weight: 600;
	    color: var(--mm-gray-500);
	    display: block;
	    width: 100%;
	    line-height: 18px;
    }

    .page-tanks .meta-inline .value {
        font-weight: 700;
        margin-right: 12px;
    }

    /* FOOTER */
    .page-tanks .muted-foot {
        color: #94a3b8;
        font-size: .85rem;
        border-top: 1px solid var(--mm-gray-200);
        padding-top: 5px;
        margin-top: 3px;
        display: flex;
        justify-content: space-between;
    }






/* ITALY MAP — confinato nel contenitore .italy-map */

/* Il wrapper non supererà mai lo spazio disponibile */
.italy-map {
    position: relative;
    inline-size: 100%;
    max-inline-size: 100%;
    background: var(--mm-white);
    border-radius: 16px;
    box-shadow: 0 10px 24px rgba(0,0,0,.06);
    overflow: hidden;
    max-width: calc(100vh - 220px);
    margin: auto;
}
    /* L’immagine scala in modo fluido e determina l’altezza del wrapper */
    .italy-map .map-img {
        display: block;
        width: 100%;
        height: auto;
        max-width: 100%;
        user-select: none;
    }

    /* Hotspots in overlay: percentuali => si adattano automaticamente */
    .italy-map .hotspot {
        position: absolute;
        cursor: pointer;
        padding: 0;
        border: 0;
        outline: 2px dashed transparent;
        transition: filter .12s ease, outline-color .12s ease;
        /*opacity: 0.4;*/
        background-color: transparent !important;
    }

        .italy-map .hotspot:hover {
            filter: brightness(1.03);
        }

        .italy-map .hotspot:focus-visible {
            outline-offset: 2px;
        }

        .italy-map .hotspot .tip {
            position: absolute;
            left: 50%;
            top: 14px;
            transform: translate(-50%, -100%);
            background: rgba(0,0,0,.9);
            color: var(--mm-white);
            padding: 0;
            border-radius: 10px;
            font-size: 13px;
            white-space: nowrap;
            opacity: 0;
            pointer-events: none;
            transition: opacity .2s ease, transform .2s ease;
            box-shadow: 0 6px 20px rgba(0,0,0,.3);
            min-width: 160px;
        }

        .italy-map .hotspot:hover .tip,
        .italy-map .hotspot:focus-visible .tip {
            opacity: 1;
            transform: translate(-50%, -100%) scale(1.02);
        }

        .italy-map .hotspot .tip-header {
            font-weight: 700;
            font-size: 14px;
            padding: 8px 12px 6px;
            border-bottom: 1px solid rgba(255,255,255,.2);
            text-align: center;
            background: rgba(255,255,255,.1);
            border-radius: 10px 10px 0 0;
        }

        .italy-map .hotspot .tip-body {
            padding: 6px 10px 8px;
        }

        .italy-map .hotspot .tip-row {
            display: flex;
            align-items: center;
            gap: 6px;
            padding: 3px 0;
            font-size: 12px;
        }

        .italy-map .hotspot .tip-row i {
            width: 14px;
            font-size: 11px;
        }

        .italy-map .hotspot .tip-row .tip-label {
            font-weight: 600;
            min-width: 32px;
        }

        .italy-map .hotspot .tip-row .tip-value {
            font-weight: 700;
            margin-left: auto;
            font-size: 13px;
        }

        .italy-map .hotspot .tip-buy {
            color: #ff6b6b;
        }

        .italy-map .hotspot .tip-sell {
            color: #51cf66;
        }

        .italy-map .hotspot .tip-net {
            margin-top: 2px;
            padding-top: 5px;
            border-top: 1px solid rgba(255,255,255,.15);
            font-weight: 600;
        }

    /* Badge regionali migliorati */
    .italy-map .region-badges {
        display: flex;
        flex-direction: column;
        gap: 2px;
        align-items: center;
        margin-top: 2px;
    }

    .italy-map .badge-region {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 3px;
        padding: 2px 6px;
        border-radius: 4px;
        font-weight: 700;
        font-size: 12px;
        color: var(--mm-white);
        text-shadow: 0 1px 2px rgba(0,0,0,.4);
        box-shadow: 0 2px 6px rgba(0,0,0,.25);
        min-width: 45px;
        transition: transform .15s ease, box-shadow .15s ease;
    }

    .italy-map .badge-region:hover {
        transform: translateY(-1px);
        box-shadow: 0 4px 12px rgba(0,0,0,.35);
    }

    .italy-map .badge-region i {
        font-size: 11px;
        color: inherit;
    }

    .italy-map .badge-buy {
        background: linear-gradient(135deg, var(--mm-color-buy-bright) 0%, var(--mm-color-buy) 100%);
    }

    .italy-map .badge-sell {
        background: linear-gradient(135deg, #22c55e 0%, #16a34a 100%);
    }

    /* Legenda migliorata */
    .italy-map .map-legend {
        background: rgba(255, 255, 255, 0.98);
        border: 1px solid var(--mm-gray-300);
        border-radius: 8px;
        padding: 0;
        box-shadow: 0 10px 30px rgba(0,0,0,.12);
        min-width: 280px;
        max-width: 310px;
        backdrop-filter: blur(8px);
    }

    .italy-map .legend-header {
        background: linear-gradient(135deg, var(--mm-color-info-light) 0%, var(--mm-color-info) 100%);
        color: white;
        padding: 6px 10px;
        border-radius: 8px 8px 0 0;
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 8px;
    }

    .italy-map .legend-title {
        font-weight: 700;
        font-size: 12px;
        text-transform: uppercase;
        letter-spacing: 0.3px;
        flex: 1;
    }

    .italy-map .btn-simulator {
        background: linear-gradient(135deg, #fbbf24 0%, var(--mm-color-warning) 100%);
        border: 2px solid var(--mm-white);
        color: #1f2937;
        padding: 4px 10px;
        border-radius: 5px;
        font-size: 11px;
        font-weight: 700;
        cursor: pointer;
        display: flex;
        align-items: center;
        gap: 4px;
        transition: all 0.2s ease;
        white-space: nowrap;
        box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
    }

    .italy-map .btn-simulator:hover {
        background: linear-gradient(135deg, var(--mm-color-warning-light) 0%, #fbbf24 100%);
        border-color: var(--mm-white);
        transform: translateY(-1px);
        box-shadow: 0 4px 12px rgba(251, 191, 36, 0.4);
    }

    .italy-map .btn-simulator i {
        font-size: 11px;
        color: inherit;
    }

    /* KPI Grid 2x2 */
    .italy-map .legend-kpi-grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 4px;
        padding: 6px;
        background: var(--mm-gray-50);
    }

    .italy-map .kpi-card {
        background: white;
        border-radius: 5px;
        padding: 5px 8px;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 5px;
        box-shadow: 0 1px 3px rgba(0,0,0,.08);
        transition: transform .15s ease, box-shadow .15s ease;
        border: 2px solid transparent;
    }

    .italy-map .kpi-card:hover {
        transform: translateY(-1px);
        box-shadow: 0 3px 6px rgba(0,0,0,.12);
    }

    .italy-map .kpi-card i {
        font-size: 14px;
    }

    .italy-map .kpi-value {
        font-size: 15px;
        font-weight: 700;
    }

    /* Stili specifici KPI */
    .italy-map .kpi-buy {
        border-color: var(--mm-color-buy-light);
        background: linear-gradient(135deg, var(--mm-white) 0%, var(--mm-color-buy-bg) 100%);
    }
    .italy-map .kpi-buy i { color: var(--mm-color-buy); }
    .italy-map .kpi-buy .kpi-value { color: var(--mm-color-buy); }

    .italy-map .kpi-sell {
        border-color: var(--mm-color-sell-light);
        background: linear-gradient(135deg, var(--mm-white) 0%, var(--mm-color-sell-bg) 100%);
    }
    .italy-map .kpi-sell i { color: #16a34a; }
    .italy-map .kpi-sell .kpi-value { color: #16a34a; }

    .italy-map .kpi-gain i { color: inherit; }
    .italy-map .kpi-gain .kpi-value { color: inherit; }

    .italy-map .kpi-gain.gain-high {
        border-color: var(--mm-color-sell-light);
        background: linear-gradient(135deg, var(--mm-color-sell-bg) 0%, #dcfce7 100%);
        color: #16a34a;
        animation: pulse-gain 2s ease-in-out infinite;
    }

    .italy-map .kpi-gain.gain-medium {
        border-color: #fed7aa;
        background: linear-gradient(135deg, var(--mm-color-warning-bg) 0%, #fef3c7 100%);
        color: #d97706;
    }

    .italy-map .kpi-gain.gain-negative {
        border-color: var(--mm-color-buy-light);
        background: linear-gradient(135deg, var(--mm-color-buy-bg) 0%, #fee2e2 100%);
        color: var(--mm-color-buy);
        animation: pulse-danger 2s ease-in-out infinite;
    }

    .italy-map .kpi-remain {
        border-color: var(--mm-gray-200);
        background: linear-gradient(135deg, var(--mm-white) 0%, var(--mm-gray-100) 100%);
    }
    .italy-map .kpi-remain i { color: var(--mm-gray-700); }
    .italy-map .kpi-remain .kpi-value { color: var(--mm-gray-700); }

    @keyframes pulse-gain {
        0%, 100% { transform: scale(1); }
        50% { transform: scale(1.02); }
    }

    @keyframes pulse-danger {
        0%, 100% { opacity: 1; }
        50% { opacity: 0.85; }
    }

    /* Prezzi unitari */
    .italy-map .legend-prices {
        display: grid;
        grid-template-columns: 1fr 1fr 1fr;
        gap: 3px;
        padding: 4px 6px;
        background: white;
        border-top: 1px solid var(--mm-gray-200);
    }

    .italy-map .price-item {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 2px;
        padding: 3px 4px;
        border-radius: 4px;
        font-size: 11px;
        font-weight: 600;
    }

    .italy-map .price-buy {
        background: var(--mm-color-buy-bg);
        color: var(--mm-color-buy);
        border: 1px solid var(--mm-color-buy-light);
    }

    .italy-map .price-sell {
        background: var(--mm-color-sell-bg);
        color: #16a34a;
        border: 1px solid var(--mm-color-sell-light);
    }

    .italy-map .price-diff {
        font-weight: 700;
    }

    .italy-map .price-diff-positive {
        background: var(--mm-color-sell-bg);
        color: #16a34a;
        border: 1px solid var(--mm-color-sell-light);
    }

    .italy-map .price-diff-negative {
        background: var(--mm-color-buy-bg);
        color: var(--mm-color-buy);
        border: 1px solid var(--mm-color-buy-light);
    }

    .italy-map .price-item i {
        font-size: 11px;
        color: inherit;
    }

    /* Prezzi con trasporto */
    .italy-map .legend-prices-transport {
        padding-top: 1px;
        border-top: none;
    }

    /* Footer */
    .italy-map .legend-footer {
        padding: 6px 8px;
        background: var(--mm-gray-50);
        border-radius: 0 0 8px 8px;
        border-top: 1px solid var(--mm-gray-200);
    }

    .italy-map .week-number {
        font-size: 13px;
        font-weight: 700;
        color: var(--mm-gray-900);
        margin-bottom: 3px;
    }

    .italy-map .legend-text {
        font-size: 11px;
        color: var(--mm-gray-500);
        margin-bottom: 3px;
    }

    .italy-map .legend-notes {
        font-size: 10px;
        font-weight: 700;
        color: var(--mm-color-buy);
        text-transform: uppercase;
        margin-top: 4px;
    }

    /* Box distribuzione a sinistra */
    .italy-map .map-distribution-box {
        display: flex;
        flex-direction: column;
        gap: 6px;
    }

    .italy-map .distribution-item {
        background: rgba(255, 255, 255, 0.98);
        border: 1px solid var(--mm-gray-300);
        border-radius: 6px;
        padding: 5px 8px;
        box-shadow: 0 4px 12px rgba(0,0,0,.08);
        backdrop-filter: blur(8px);
        display: flex;
        align-items: center;
        gap: 6px;
        min-width: 160px;
    }

    .italy-map .distribution-badge {
        display: flex;
        align-items: center;
        gap: 4px;
        padding: 2px 6px;
        border-radius: 4px;
        color: white;
        font-weight: 700;
        flex-shrink: 0;
        font-size: 11px;
    }

    .italy-map .distribution-badge i {
        font-size: 11px;
        color: inherit;
    }

    .italy-map .distribution-value {
        font-size: 12px;
        color: inherit;
    }

    .italy-map .distribution-label {
        font-size: 10px;
        font-weight: 600;
        color: var(--mm-gray-700);
        line-height: 1.2;
    }

    /* Box ESTERO in basso a sinistra */
    .italy-map .map-legend-estero {
        background: rgba(255, 255, 255, 0.98);
        border: 1px solid var(--mm-gray-300);
        border-radius: 8px;
        padding: 0;
        box-shadow: 0 10px 30px rgba(0,0,0,.12);
        min-width: 160px;
        max-width: 200px;
        backdrop-filter: blur(8px);
    }

    .italy-map .estero-content {
        padding: 10px 12px;
        background: var(--mm-gray-50);
        border-radius: 0 0 8px 8px;
    }

    .italy-map .estero-row {
        display: flex;
        align-items: center;
        gap: 6px;
        padding: 4px 0;
    }

    .italy-map .estero-row i {
        font-size: 14px;
        width: 16px;
    }

    .italy-map .estero-label {
        font-size: 12px;
        font-weight: 600;
        color: var(--mm-gray-500);
        min-width: 35px;
    }

    .italy-map .estero-value {
        font-size: 14px;
        font-weight: 700;
        margin-left: auto;
    }

    /* Simulator legend with larger fonts */
    .italy-map.simulator-legend .legend-title {
        font-size: 14px;
    }

    .italy-map.simulator-legend .kpi-card {
        padding: 8px 12px;
    }

    .italy-map.simulator-legend .kpi-card i {
        font-size: 18px;
    }

    .italy-map.simulator-legend .kpi-value {
        font-size: 20px;
    }

    .italy-map.simulator-legend .price-item {
        padding: 5px 8px;
        font-size: 12px;
    }

    .italy-map.simulator-legend .price-item i {
        font-size: 13px;
    }

    .italy-map.simulator-legend .week-number {
        font-size: 15px;
    }

    .italy-map.simulator-legend .legend-text {
        font-size: 12px;
    }

    .italy-map.simulator-legend .legend-notes {
        font-size: 10px;
    }

    /* Simulator delete button hover */
    .simulation-rows .btn-outline-danger:hover i {
        color: white !important;
    }

    /* pannellino al click */
    .italy-map .area-content {
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%,-50%);
        background: white;
        border: 1px solid var(--mm-gray-200);
        border-radius: 10px;
        padding: 8px 10px;
        font-size: 13px;
        box-shadow: 0 4px 14px rgba(0,0,0,.08);
        max-width: 220px;
        max-height: 160px;
        overflow: auto;
    }

/* ========================================
   OPERATIONS LIST MODAL STYLES
   ======================================== */

.operations-list-container {
    padding: 0;
}

.operations-section {
    background: rgba(255, 255, 255, 0.95);
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    height: 100%;
    display: flex;
    flex-direction: column;
}

/* Section Headers */
.section-header {
    padding: 6px 10px;
    font-size: 13px;
    font-weight: 700;
    color: white;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    display: flex;
    align-items: center;
}

.section-header i {
    color: inherit;
    font-size: inherit;
}

.buy-header {
    background: linear-gradient(135deg, var(--mm-color-buy) 0%, var(--mm-color-buy-bright) 100%);
    box-shadow: 0 2px 8px rgba(220, 38, 38, 0.2);
}

.sell-header {
    background: linear-gradient(135deg, var(--mm-color-sell) 0%, var(--mm-color-success) 100%);
    box-shadow: 0 2px 8px rgba(5, 150, 105, 0.2);
}

/* Operations Cards Container */
.operations-cards {
    padding: 6px;
    overflow-y: auto;
    max-height: 500px;
    flex: 1;
}

.operations-cards::-webkit-scrollbar {
    width: 6px;
}

.operations-cards::-webkit-scrollbar-track {
    background: var(--mm-gray-100);
    border-radius: 3px;
}

.operations-cards::-webkit-scrollbar-thumb {
    background: var(--mm-gray-300);
    border-radius: 3px;
}

.operations-cards::-webkit-scrollbar-thumb:hover {
    background: var(--mm-gray-400);
}

/* Operation Card */
.operation-card {
    background: white;
    border-radius: 8px;
    padding: 6px 8px;
    margin-bottom: 4px;
    border: 1px solid var(--mm-gray-200);
}

.operation-card:last-child {
    margin-bottom: 0;
}

/* Date Badge */
.op-date-badge {
    display: inline-flex;
    align-items: center;
    background: linear-gradient(135deg, var(--mm-gray-100) 0%, var(--mm-gray-200) 100%);
    color: var(--mm-gray-700);
    padding: 3px 8px;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 600;
    margin-bottom: 4px;
}

.op-date-badge i {
    font-size: 10px;
}

.time-badge {
    background: var(--mm-color-info);
    color: white;
    padding: 2px 6px;
    border-radius: 3px;
    font-size: 10px;
    font-weight: 600;
}

/* Member Info */
.op-member-info {
    margin-bottom: 4px;
}

.op-member-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 2px;
}

.member-name {
    font-size: 13px;
    font-weight: 700;
    color: var(--mm-gray-900);
    display: flex;
    align-items: center;
    flex: 1 1 auto;
    min-width: 0;
}

.buy-card .member-name {
    color: var(--mm-color-buy);
}

.sell-card .member-name {
    color: var(--mm-color-sell);
}

.member-name i {
    font-size: 13px;
    color: inherit;
    flex-shrink: 0;
}

.member-address {
    font-size: 11px;
    color: var(--mm-gray-500);
    line-height: 1.3;
    display: flex;
    flex-direction: column;
    gap: 0px;
}

.address-name {
    font-weight: 600;
    color: var(--mm-gray-700);
}

.address-detail {
    font-style: italic;
}

/* Values Section */
.op-member-row .op-values {
    display: flex;
    align-items: center;
    flex: 0 0 auto;
    white-space: nowrap;
    font-size: 11px;
    line-height: 1.4;
}

.operation-card .value-label {
    font-size: 9px;
    text-transform: uppercase;
    font-weight: 600;
    color: var(--mm-gray-400);
    letter-spacing: 0.3px;
    margin-right: 3px;
}

.operation-card .value-amount {
    font-size: 12px;
    font-weight: 700;
    color: var(--mm-gray-900);
    margin-right: 6px;
}

.operation-card .value-separator {
    color: var(--mm-gray-300);
    margin: 0 4px;
    font-size: 10px;
}

/* Totals Card */
.totals-card {
    margin: 6px;
    padding: 8px;
    border-radius: 8px;
    border: 2px solid;
}

.buy-totals {
    background: linear-gradient(135deg, rgba(220, 38, 38, 0.05) 0%, rgba(239, 68, 68, 0.1) 100%);
    border-color: var(--mm-color-buy-light);
}

.sell-totals {
    background: linear-gradient(135deg, rgba(5, 150, 105, 0.05) 0%, rgba(16, 185, 129, 0.1) 100%);
    border-color: #a7f3d0;
}

.totals-label {
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    color: var(--mm-gray-700);
    margin-bottom: 4px;
    display: flex;
    align-items: center;
}

.totals-label i {
    font-size: 12px;
}

.totals-values {
    display: flex;
    gap: 10px;
}

.total-item {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.total-label {
    font-size: 10px;
    text-transform: uppercase;
    font-weight: 600;
    color: var(--mm-gray-500);
    letter-spacing: 0.3px;
}

.total-value {
    font-size: 17px;
    font-weight: 700;
}

.buy-totals .total-value {
    color: var(--mm-color-buy);
}

.sell-totals .total-value {
    color: var(--mm-color-sell);
}

/* Operations List Tabs */
.ops-tabs-nav {
    display: flex;
    gap: 4px;
    margin-bottom: 12px;
    padding: 3px;
    background: var(--mm-gray-100);
    border-radius: 8px;
}

.ops-tab {
    padding: 7px 18px;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--mm-gray-500);
    cursor: pointer;
    display: flex;
    align-items: center;
    border-radius: 6px;
    transition: all 0.2s ease;
}

.ops-tab:hover {
    color: var(--mm-gray-700);
    background: rgba(255, 255, 255, 0.6);
}

.ops-tab.active {
    color: var(--mm-gray-900);
    background: white;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.ops-tab i {
    font-size: 11px;
    color: inherit;
}

.ops-tab-content {
    min-height: 200px;
}

/* Supplies Tab - Grid: one row per supply, 3 aligned columns */
.supply-grid-header {
    display: flex;
    gap: 6px;
    margin-bottom: 6px;
}

.supply-grid-h {
    padding: 6px 10px;
    font-size: 13px;
    font-weight: 700;
    color: white;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border-radius: 6px;
    display: flex;
    align-items: center;
}

.supply-grid-h i {
    font-size: 13px;
    color: inherit;
}

.supply-grid-h-buy {
    flex: 4;
    background: linear-gradient(135deg, var(--mm-color-buy) 0%, var(--mm-color-buy-bright) 100%);
}

.supply-grid-h-ship {
    flex: 3;
    background: linear-gradient(135deg, var(--mm-color-info-dark) 0%, var(--mm-color-info) 100%);
}

.supply-grid-h-sell {
    flex: 4;
    background: linear-gradient(135deg, var(--mm-color-sell) 0%, var(--mm-color-success) 100%);
}

.supply-grid-row {
    display: flex;
    gap: 6px;
    margin-bottom: 4px;
    align-items: stretch;
}

.supply-grid-cell {
    padding: 4px;
    border-radius: 6px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.supply-grid-cell-buy {
    flex: 4;
}

.supply-grid-cell-ship {
    flex: 3;
    background: rgba(59, 130, 246, 0.04);
    justify-content: center;
}

.supply-grid-cell-sell {
    flex: 4;
}

/* Shipping block inside cell */
.supply-ship-block {
    display: flex;
    flex-direction: column;
    gap: 3px;
    padding: 4px 6px;
}

.supply-ship-name {
    font-size: 12px;
    font-weight: 700;
    color: var(--mm-color-info-dark);
    display: flex;
    align-items: center;
}

.supply-ship-name i {
    font-size: 12px;
    color: var(--mm-color-info);
}

.supply-protocol {
    font-size: 10px;
    font-weight: 600;
    color: var(--mm-gray-500);
    background: var(--mm-gray-100);
    padding: 1px 6px;
    border-radius: 3px;
    display: inline-block;
    width: fit-content;
}

/* Codice spedizione — pill prominente sopra al nome del vettore.
   Stesso look della badge "In Spedizione: SHP-..." di
   controls/operations/trading/to-pair.html, ma piu' enfatica:
   padding maggiore, border esplicito, font leggermente piu' grande. */
.supply-ship-code {
    align-self: flex-start;
    width: fit-content;
    font-size: 12px !important;
    padding: 4px 10px !important;
    border-radius: var(--mm-radius-pill) !important;
    border: 1px solid var(--mm-color-info-light) !important;
    background: var(--mm-color-sell-bg) !important;
    color: var(--mm-color-info-dark) !important;
    letter-spacing: 0.02em;
}

.supply-ship-costs {
    display: flex;
    flex-direction: column;
    gap: 1px;
    margin-top: 2px;
}

.supply-ship-cost-row {
    display: flex;
    align-items: center;
    gap: 3px;
}

.supply-ship-cost-row .value-label {
    font-size: 9px;
    text-transform: uppercase;
    font-weight: 600;
    color: var(--mm-gray-400);
    letter-spacing: 0.3px;
}

.supply-ship-cost-row .value-amount {
    font-size: 12px;
    font-weight: 700;
}

.supply-shipcost-value {
    color: var(--mm-color-info-dark) !important;
}

.supply-no-data {
    font-size: 11px;
    color: var(--mm-gray-400);
    font-style: italic;
    padding: 4px 6px;
}

/* Status badges in shipping column */
.supply-status-badge {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 10px;
    border-radius: 6px;
    text-align: center;
}

.supply-status-badge i {
    font-size: 20px;
    color: inherit;
}

.supply-status-badge span {
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: inherit;
}

.supply-status-transferred {
    background: linear-gradient(135deg, rgba(5, 150, 105, 0.08) 0%, rgba(16, 185, 129, 0.15) 100%);
    color: var(--mm-color-sell);
}

.supply-status-not-executed {
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.08) 0%, rgba(251, 191, 36, 0.15) 100%);
    color: #d97706;
}

/* Shipping cell: shipcost comparison (sell_shipcost vs unit_shipcost) */
.supply-ship-loss {
    background: linear-gradient(135deg, rgba(220, 38, 38, 0.06) 0%, rgba(239, 68, 68, 0.12) 100%) !important;
}

.supply-ship-gain {
    background: linear-gradient(135deg, rgba(5, 150, 105, 0.06) 0%, rgba(16, 185, 129, 0.12) 100%) !important;
}

.supply-shipcost-loss {
    color: var(--mm-color-buy) !important;
}

.supply-shipcost-gain {
    color: var(--mm-color-sell) !important;
}

/* Riga "Prezzo Totale: prezzo + spedizione" sopra il badge margine.
   Allineata a destra, font discreto. */
.op-price-total-row {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    margin-top: 4px;
    font-size: 13px;
    color: var(--mm-gray-700);
}

.op-price-total-label {
    margin-right: 6px;
}

.op-price-total-value {
    color: var(--mm-gray-900);
}

/* Badge margine /kg nella card cliente.
   Bottom-right, font leggermente piu' grande del solito badge bootstrap.
   Quando ci sono entrambe le parti (per-kg + totale), la prima va a sx
   e la seconda a dx via space-between. */
.op-margin-row {
    display: flex;
    margin-top: 6px;
}

.op-margin-badge {
    flex: 1;
    display: flex !important;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    font-size: 14px !important;
    padding: 6px 12px !important;
    border-radius: 3px !important;
    letter-spacing: 0.02em;
}

.op-margin-side {
    display: inline-flex;
    align-items: center;
    white-space: nowrap;
}

.op-margin-right {
    margin-left: auto;
}

/* Toolbar in cima a ogni tab "Per Destinazione" / "Per Origine":
   contiene il bottone "Stampa PDF". */
.ops-tab-toolbar {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 8px;
}

/* Loader inline per modale map-operations-list mentre arriva la response. */
.ops-loader {
    display: flex;
    justify-content: center;
    align-items: center;
}

.ops-loader-text {
    font-size: 28px;
}

/* Loader fullscreen per la pagina /widgets (widgets-body.html) durante il
   primo caricamento, prima che wdata.widget sia valorizzato. Sostituisce il
   fallback "dashboards-multipurpose" che mostrava un demo board Metronic
   non pertinente al gestionale. */
.mm-widget-loader {
    min-height: 60vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
}


/* ========================================
   NOTIFICATIONS LISTING STYLES
   Following Design System v1.0 - Compact Version
   ======================================== */

/* Notifications List Container */
.notifications-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

/* Day Header */
.day-header {
    background: linear-gradient(135deg, var(--mm-color-info) 0%, var(--mm-color-info-light) 100%);
    color: white;
    padding: 4px 10px;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    display: flex;
    align-items: center;
    box-shadow: 0 2px 8px rgba(59, 130, 246, 0.2);
    margin-top: 4px;
}

.day-header i {
    color: inherit;
    font-size: 11px;
}

/* Day Notifications Container */
.day-notifications {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

/* Notification Card */
.notification-card {
    background: white;
    border: 1px solid var(--mm-gray-200);
    border-radius: 6px;
    padding: 5px 8px;
    transition: box-shadow 0.2s ease;
}

/* Notification Header */
.notification-header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding-bottom: 3px;
    border-bottom: 1px dashed var(--mm-gray-200);
    margin-bottom: 3px;
}

.notification-code {
    font-size: 14px;
    font-weight: 700;
    color: var(--mm-color-warning);
}

.notification-type {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    color: var(--mm-color-info);
    background: rgba(59, 130, 246, 0.1);
    padding: 2px 7px;
    border-radius: 3px;
    letter-spacing: 0.3px;
}

.pdf-link-header {
    font-size: 11px;
    color: var(--mm-color-buy);
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 3px;
    padding: 2px 7px;
    border-radius: 3px;
    transition: background 0.2s ease;
    font-weight: 600;
}

.pdf-link-header:hover {
    background: rgba(220, 38, 38, 0.1);
}

.pdf-link-header i {
    color: inherit;
    font-size: 11px;
}

/* Notification Body */
.notification-body {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

/* Operator Info */
.notification-operator {
    font-size: 11px;
    color: var(--mm-gray-900);
    display: flex;
    align-items: center;
    margin-bottom: 0px;
}

.notification-operator i {
    color: inherit;
    font-size: 10px;
}

.notification-operator .text-success {
    color: var(--mm-color-sell) !important;
    font-weight: 600;
}

/* Main Content Grid - 4 Columns */
.notification-content {
    display: grid;
    grid-template-columns: 2fr 3fr 2fr 1.5fr;
    gap: 12px;
    padding-top: 2px;
    align-items: start;
}

/* Receiver Section */
.content-receiver {
    display: flex;
    flex-direction: column;
    gap: 3px;
    max-width: 100%;
}

.receiver-info {
    display: flex;
    align-items: center;
    gap: 4px;
    max-width: 100%;
}

.receiver-info i {
    font-size: 14px;
    flex-shrink: 0;
}

.receiver-info .fa-industry-windows {
    color: var(--mm-color-buy);
}

.receiver-info .fa-cheese-swiss {
    color: var(--mm-color-sell);
}

.receiver-info .fa-warehouse {
    color: var(--mm-color-warning);
}

.receiver-info .fa-truck-droplet {
    color: var(--mm-color-buy);
}

.receiver-name {
    font-size: 13px;
    font-weight: 700;
    color: var(--mm-gray-900);
    line-height: 1.3;
    max-width: 100%;
}

.receiver-address {
    font-size: 11px;
    color: var(--mm-gray-500);
    line-height: 1.3;
    margin-left: 18px;
    word-break: break-word;
    overflow-wrap: break-word;
    max-width: 100%;
}

/* Details Section */
.content-details {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}

.detail-item {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.detail-label {
    font-size: 9px;
    text-transform: uppercase;
    font-weight: 600;
    color: var(--mm-gray-400);
    letter-spacing: 0.3px;
    white-space: nowrap;
}

.detail-value {
    font-size: 13px;
    font-weight: 600;
    color: var(--mm-gray-900);
}

.detail-value.payment-terms {
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.05) 0%, rgba(245, 158, 11, 0.1) 100%);
    padding: 3px 6px;
    border-radius: 4px;
    display: inline-block;
    border: 1px solid var(--mm-color-warning-light);
    font-size: 12px;
}

/* Status Column */
.content-status-col {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

/* Actions Column */
.content-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: flex-end;
    gap: 8px;
}

/* Status Badges */
.status-badge {
    padding: 4px 7px;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 3px;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.status-badge i {
    color: inherit;
    font-size: 10px;
}

.status-sent {
    background: linear-gradient(135deg, rgba(5, 150, 105, 0.1) 0%, rgba(16, 185, 129, 0.15) 100%);
    color: var(--mm-color-sell);
    border: 1px solid #a7f3d0;
}

.status-pending {
    background: linear-gradient(135deg, rgba(107, 114, 128, 0.1) 0%, rgba(156, 163, 175, 0.15) 100%);
    color: var(--mm-gray-500);
    border: 1px solid var(--mm-gray-300);
}

.status-changed {
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.1) 0%, rgba(251, 191, 36, 0.15) 100%);
    color: #d97706;
    border: 1px solid var(--mm-color-warning-light);
}

.status-deleted {
    background: linear-gradient(135deg, rgba(220, 38, 38, 0.1) 0%, rgba(239, 68, 68, 0.15) 100%);
    color: var(--mm-color-buy);
    border: 1px solid var(--mm-color-buy-light);
}

.status-operator {
    font-size: 10px;
    color: var(--mm-gray-900);
    display: flex;
    align-items: center;
    gap: 3px;
}

.status-operator i {
    color: inherit;
    font-size: 10px;
}

/* Notification Actions */
.notification-actions {
    display: flex;
    gap: 4px;
}

.action-btn {
    padding: 6px 11px;
    border-radius: 5px;
    font-size: 12px;
    font-weight: 600;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    cursor: pointer;
    transition: all 0.2s ease;
    border: 1px solid transparent;
}

.action-btn i {
    color: inherit;
    font-size: 11px;
}

.action-send {
    background: linear-gradient(135deg, var(--mm-color-info) 0%, var(--mm-color-info-light) 100%);
    color: white;
    box-shadow: 0 1px 4px rgba(59, 130, 246, 0.2);
}

.action-send:hover {
    background: linear-gradient(135deg, #2563eb 0%, var(--mm-color-info) 100%);
    box-shadow: 0 2px 8px rgba(59, 130, 246, 0.3);
    transform: translateY(-1px);
}

.action-update {
    background: linear-gradient(135deg, var(--mm-color-warning) 0%, #fbbf24 100%);
    color: white;
    box-shadow: 0 1px 4px rgba(245, 158, 11, 0.2);
}

.action-update:hover {
    background: linear-gradient(135deg, #d97706 0%, var(--mm-color-warning) 100%);
    box-shadow: 0 2px 8px rgba(245, 158, 11, 0.3);
    transform: translateY(-1px);
}

.action-export-request {
    background: linear-gradient(135deg, #b91c1c 0%, var(--mm-color-buy) 100%);
    color: #fff;
    box-shadow: 0 1px 4px rgba(185, 28, 28, 0.22);
}

.action-export-request:hover {
    background: linear-gradient(135deg, #991b1b 0%, #b91c1c 100%);
    box-shadow: 0 2px 8px rgba(185, 28, 28, 0.3);
    transform: translateY(-1px);
    color: #fff;
}

.status-export-sent {
    background: linear-gradient(135deg, rgba(5, 150, 105, 0.1) 0%, rgba(16, 185, 129, 0.15) 100%);
    color: #047857;
    border: 1px solid #a7f3d0;
}

/* Responsive Adjustments */
@media (max-width: 1024px) {
    .notification-content {
        grid-template-columns: 1fr;
        gap: 8px;
    }

    .content-actions {
        align-items: flex-start;
    }

    .status-info {
        align-items: flex-start;
    }
}

/* ========================================
   OPERATIONS LINKED LIST - TAG STYLES
   ======================================== */

.op-tag {
    display: inline-block;
    background: var(--mm-color-warning-bg);
    color: var(--mm-color-warning);
    border: 1px solid var(--mm-color-warning-light);
    padding: 2px 6px;
    border-radius: 3px;
    font-size: 11px;
    font-weight: var(--mm-fw-medium);
    margin-right: 4px;
    letter-spacing: 0.01em;
}

/* ========================================
   OPERATIONS LINKED LIST - HORIZONTAL LAYOUT
   ======================================== */

/* Day Header (compact) */
.op-day-header-row {
    background: var(--mm-gray-100);
}

.op-day-header {
    padding: 6px 12px !important;
    background: var(--mm-gray-50);
    border-bottom: 1px solid var(--mm-gray-200);
}

.op-day-header-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.op-day-title {
    font-size: 13px;
    font-weight: var(--mm-fw-semibold);
    color: var(--mm-gray-900);
    letter-spacing: 0.01em;
}

.op-day-actions {
    display: flex;
    align-items: center;
    gap: 8px;
}

/* Main Row - Contains horizontal layout */
.op-row-main td {
    padding: 0 !important;
}

.op-horizontal-layout {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1px;
    background: var(--mm-gray-200);
    border: 1px solid var(--mm-gray-200);
    border-radius: 6px;
    overflow: hidden;
}

/* BUY SECTION (Left 50%) */
.op-buy-section {
    background: white;
    padding: 10px 12px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

/* ITEM CARD (used for both buy and sell) */
.op-item-card {
    background: white;
    border: 1px solid var(--mm-gray-200);
    border-radius: 4px;
    padding: 4px 6px;
    margin-bottom: 3px;
}

.op-buy-section .op-item-card {
    border-left: 2px solid var(--mm-color-buy);
}

.op-sells-section .op-item-card {
    border-left: 2px solid var(--mm-color-sell);
}

/* Header Row (book icon + name | status + actions) */
.op-item-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-bottom: 3px;
    border-bottom: 1px dashed var(--mm-gray-200);
    margin-bottom: 4px;
}

.op-item-header-left {
    display: flex;
    align-items: center;
    gap: 4px;
}

.op-book-icon {
    width: 20px;
    display: inline-block;
    text-align: center;
    margin-right: 4px;
}

.op-item-header-right {
    display: flex;
    align-items: center;
    gap: 12px;
}

.op-item-header-right c-notifications {
    font-size: 11px;
    display: flex;
    align-items: center;
}

.op-item-header-right .btn {
    padding: 2px 8px !important;
    border: 1px solid var(--mm-gray-300) !important;
    background: white !important;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

.op-item-header-right .btn:hover {
    background: var(--mm-gray-50) !important;
    border-color: var(--mm-gray-400) !important;
}

.op-actions-spacer {
    display: inline-block;
    width: 34px;
    height: 1px;
}

.op-date-text {
    font-size: 13px;
    font-weight: 700;
    color: var(--mm-gray-900);
}

/* Data Row (2 columns grid for buys) */
.op-item-data {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 6px;
    align-items: start;
}

/* Data Row (5 columns grid for sells) */
.op-item-data-sells {
    grid-template-columns: 2fr 1.5fr 1.2fr 1.2fr 0.8fr;
}

.op-data-cell {
    font-size: 12px;
    font-weight: 600;
    color: var(--mm-gray-900);
}

.op-col-value {
    font-size: 12px;
    font-weight: 600;
    color: var(--mm-gray-900);
    display: block;
}

/* Status badge per singole vendite */
.op-sell-status {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}

.op-sell-status .badge i {
    color: inherit !important;
}

/* SELL SECTION (Right 50%) */
.op-sells-section {
    background: var(--mm-gray-50);
    padding: 10px 12px;
    border-left: 3px solid var(--mm-color-sell);
    display: flex;
    flex-direction: column;
    gap: 6px;
}

/* INDICATORS BAR (Top of operation box) */
.op-indicators-bar {
    grid-column: 1 / -1;
    background: var(--mm-gray-50);
    border-bottom: 1px solid var(--mm-gray-200);
    padding: 6px 12px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1px;
    order: -1;
}

.op-indicators-left {
    display: flex;
    gap: 20px;
    align-items: center;
}

.op-indicators-right {
    display: flex;
    gap: 20px;
    align-items: center;
    justify-content: flex-end;
}

.op-indicator-item {
    display: flex;
    align-items: center;
    gap: 6px;
}

.op-indicator-date {
    margin-right: auto;
}

.op-indicator-date-text {
    font-size: 12px;
    font-weight: var(--mm-fw-semibold);
    color: var(--mm-gray-900);
    letter-spacing: 0.01em;
}

.op-indicator-label {
    font-size: 11px;
    font-weight: var(--mm-fw-medium);
    color: var(--mm-gray-500);
    letter-spacing: 0.01em;
}

.op-indicator-value {
    font-size: 12px;
    font-weight: 600;
    color: var(--mm-gray-900);
}

.op-indicator-value .text-danger {
    font-size: 15px;
    font-weight: 800;
    color: var(--mm-color-buy) !important;
}

.op-remaining-bar {
    min-width: 100px;
}

/* SPACER ROW */
.op-row-spacer td {
    padding: 6px 0 !important;
    border: none !important;
}

/* Responsive */
@media (max-width: 1400px) {
    .op-horizontal-layout {
        grid-template-columns: 1fr;
    }

    .op-sells-section {
        border-left: none;
        border-top: 3px solid var(--mm-color-sell);
    }

    .op-indicators-bar {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }

    .op-item-data {
        grid-template-columns: 1fr;
        gap: 4px;
    }

    .op-data-cell,
    .op-col-value {
        font-size: 11px;
    }
}

/* ============================================================================
   Settings page (controls/admin/security-settings.html) — riorganizzata
   in tabs + sections. Save button in toolbar (sempre accessibile).
   ============================================================================ */

/* Tab nav header */
.mm-settings-card { overflow: hidden; }
.mm-settings-tabs {
    border-bottom: 1px solid var(--mm-gray-200);
    padding: 0;
    margin: 0 0 4px;
    flex-wrap: nowrap;
    overflow-x: auto;
    gap: 2px;
}
.mm-settings-tabs .nav-item { margin-bottom: -1px; }
.mm-settings-tabs .nav-link {
    display: inline-flex;
    align-items: center;
    padding: 12px 18px;
    font-size: 13px;
    font-weight: var(--mm-fw-medium);
    color: var(--mm-gray-600);
    background: transparent;
    border: 0;
    border-bottom: 3px solid transparent;
    border-radius: 6px 6px 0 0;
    white-space: nowrap;
    transition: color var(--mm-tr-fast), background-color var(--mm-tr-fast), border-color var(--mm-tr-fast);
}
.mm-settings-tabs .nav-link i {
    color: var(--mm-gray-400);
    font-size: 14px;
    transition: color var(--mm-tr-fast);
}
.mm-settings-tabs .nav-link:hover {
    color: var(--mm-gray-900);
    background: var(--mm-gray-50);
    border-bottom-color: var(--mm-gray-300);
}
.mm-settings-tabs .nav-link:hover i {
    color: var(--mm-gray-600);
}
.mm-settings-tabs .nav-link.active {
    color: var(--mm-color-primary) !important;
    border-bottom-color: var(--mm-color-primary) !important;
    font-weight: var(--mm-fw-semibold);
    background: rgba(0, 163, 255, 0.05) !important;
}
.mm-settings-tabs .nav-link.active i {
    color: var(--mm-color-primary);
}

/* Counter pill dentro al tab (es. "Addresses (3)", "Specifications (12)").
   Usare con: <span class="mm-tab-counter">{{n}}</span> */
.mm-settings-tabs .nav-link .mm-tab-counter {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    margin-left: 8px;
    background: var(--mm-gray-200);
    color: var(--mm-gray-700);
    border-radius: var(--mm-radius-pill);
    font-size: 11px;
    font-weight: var(--mm-fw-semibold);
    line-height: 1;
    transition: background-color var(--mm-tr-fast), color var(--mm-tr-fast);
}
.mm-settings-tabs .nav-link:hover .mm-tab-counter {
    background: var(--mm-gray-300);
    color: var(--mm-gray-900);
}
.mm-settings-tabs .nav-link.active .mm-tab-counter {
    background: rgba(0, 163, 255, 0.15);
    color: var(--mm-color-primary);
}

/* Tab body bg: gray-50 così le section-card spiccano (white) */
.mm-settings-card > .card-body {
    background-color: var(--mm-gray-50);
    padding: 16px;
}

/* Sezioni dentro ogni tab — ora card vere e proprie */
.mm-settings .mm-section {
    background-color: var(--mm-white);
    border: 1px solid var(--mm-gray-200);
    border-radius: var(--mm-radius-card);
    box-shadow: var(--mm-shadow-card);
    padding: 16px 20px;
    margin-bottom: 16px;
}
.mm-settings .mm-section:last-child {
    margin-bottom: 0;
}
.mm-settings .mm-section-title {
    font-size: 12px;
    font-weight: var(--mm-fw-bold);
    color: var(--mm-gray-700);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-bottom: 14px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--mm-gray-100);
}
/* In sezioni con header inline (titolo + bottone "+ add"), il margin
   bottom va sul wrapper d-flex, non sul title. */
.mm-settings .mm-section .d-flex > .mm-section-title.m-0 {
    border-bottom: 0;
    padding-bottom: 0;
    margin-bottom: 0;
}
.mm-settings .mm-section > .d-flex.justify-content-between {
    padding-bottom: 10px;
    margin-bottom: 14px;
    border-bottom: 1px solid var(--mm-gray-100);
}
.mm-settings .mm-section label {
    font-size: 12px;
    font-weight: var(--mm-fw-medium);
    color: var(--mm-gray-700);
    margin-bottom: 4px;
}
.mm-settings .mm-section .form-control,
.mm-settings .mm-section .form-select {
    font-size: 13px;
}

/* Logo preview */
.mm-settings .mm-section-logo {
    border: 1px solid var(--mm-gray-200);
    border-radius: 6px;
    padding: 8px;
    background-color: var(--mm-gray-50);
}

/* Members/Suppliers area list — header tabellare */
.mm-settings .mm-areas-header {
    padding: 8px 0;
    border-bottom: 1px solid var(--mm-gray-200);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.mm-settings .mm-areas-row {
    align-items: center;
}

/* Suppliers data table */
.mm-settings .mm-suppliers-data-table thead th {
    text-transform: uppercase;
    letter-spacing: 0.04em;
    border-bottom: 1px solid var(--mm-gray-200);
    padding-bottom: 8px;
}

/* Toolbar save button: rilevante (in alto a destra, sempre visibile) */
.mm-settings #kt_toolbar .btn-primary {
    padding: 8px 16px;
    font-size: 13px;
    font-weight: var(--mm-fw-semibold);
}

/* ============================================================================
   EXPORT REQUEST BADGE — usato in linked-list (buy + sell items) per
   evidenziare 'Export richiesto' / 'Export pronto'.
   Colore forzato (icona = testo) e style raffinato pill.
   ============================================================================ */
.mm-export-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    border-radius: 999px;
    font-size: 10px !important;
    font-weight: 700 !important;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    line-height: 1.2;
    cursor: pointer;
    transition: background-color 0.15s ease, border-color 0.15s ease;
    border: 1px solid transparent;
    text-decoration: none;
    white-space: nowrap;
}
.mm-export-badge.is-pending {
    background-color: var(--mm-color-buy-bg);
    color: #b91c1c;
    border-color: var(--mm-color-buy-light);
}
.mm-export-badge.is-pending:hover {
    background-color: #fee2e2;
    border-color: #fca5a5;
    color: #991b1b;
}
.mm-export-badge.is-ready {
    background-color: #ecfdf5;
    color: #047857;
    border-color: #a7f3d0;
}
.mm-export-badge.is-ready:hover {
    background-color: #d1fae5;
    border-color: #6ee7b7;
    color: #065f46;
}
/* Forza colore icona = testo, qualunque sia lo stile FA */
.mm-export-badge i {
    color: inherit !important;
    --fa-primary-color: currentColor !important;
    --fa-secondary-color: currentColor !important;
    --fa-primary-opacity: 1 !important;
    --fa-secondary-opacity: 1 !important;
    font-size: 11px;
    line-height: 1;
}

/* ============================================================================
   COMPACT MODAL FORM — densita' ridotta per modali "sprecone"
   Wrapper class riusabile (mm-modal-compact) — applicare al div esterno
   del template della modale per ridurre altezza input, label, margini.
   Pensata per modali con molti campi (operation.html, ecc.).
   ============================================================================ */
.mm-modal-compact label,
.mm-modal-compact .form-group > label {
    font-size: 12px;
    font-weight: var(--mm-fw-medium, 500);
    color: var(--mm-gray-700);
    margin-bottom: 4px;
    line-height: 1.3;
}

/* Input / select / textarea: height ridotta, padding compatto, font 13px */
.mm-modal-compact .form-control,
.mm-modal-compact .form-select {
    min-height: 32px;
    height: 32px;
    padding: 4px 10px;
    font-size: 13px;
    line-height: 1.4;
    border-radius: 6px;
}
.mm-modal-compact textarea.form-control {
    height: auto;
    min-height: 56px;
    padding-top: 6px;
    padding-bottom: 6px;
}
.mm-modal-compact .form-check:not(.form-switch) > .form-check-input,
.mm-modal-compact > .form-check-input,
.mm-modal-compact label.form-check:not(.form-switch) > .form-check-input {
    width: 16px;
    height: 16px;
}
/* form-switch deve mantenere le proporzioni pill di Bootstrap (width ~2em, height ~1em);
   l'override generico le schiacciava in un quadrato 16x16. */
.mm-modal-compact .form-check.form-switch .form-check-input {
    width: 2.25rem;
    height: 1.25rem;
    flex: 0 0 auto;
}

/* Datepicker / hh:mm rendering: rimuovi fs-18 fuori scala */
.mm-modal-compact .form-control.fs-18 {
    font-size: 13px !important;
}
/* Mini-input numerici hh/mm: usa esattamente l'altezza degli altri input */
.mm-modal-compact input[maxlength="2"].form-control {
    min-height: 32px;
    height: 32px;
    padding-left: 4px;
    padding-right: 4px;
}

/* Label fs-8 muted (es. From / To) */
.mm-modal-compact .fs-8 {
    font-size: 10px !important;
}

/* Form-group: margine inferiore ridotto */
.mm-modal-compact .form-group {
    margin-bottom: 8px;
}

/* Row gap ridotto — utile quando i form-group si impilano */
.mm-modal-compact > form > .row,
.mm-modal-compact .row.mb-3 {
    --bs-gutter-y: 0.4rem;
}

/* Override delle utility verticali troppo larghe usate nel template */
.mm-modal-compact .mt-10 { margin-top: 0.75rem !important; }   /* 40 -> 12 */
.mm-modal-compact .mb-10 { margin-bottom: 0.75rem !important; }
.mm-modal-compact .my-10 { margin-top: 0.75rem !important; margin-bottom: 0.75rem !important; }
.mm-modal-compact .mt-6  { margin-top: 0.5rem !important; }    /* 24 -> 8 */
.mm-modal-compact .mt-5  { margin-top: 0.4rem !important; }    /* 20 -> 6 */
.mm-modal-compact .pb-5  { padding-bottom: 0.5rem !important; }
.mm-modal-compact .mb-3  { margin-bottom: 0.5rem !important; } /* 16 -> 8 */

/* Fieldset (es. "Picking Points", "Product Availability") */
.mm-modal-compact fieldset.fs-classic {
    margin-top: 0.75rem !important;
    padding: 0.5rem 0.75rem 0.5rem;
}
.mm-modal-compact fieldset.fs-classic legend.fs-16 {
    font-size: 13px !important;
    margin-bottom: 0.4rem !important;
}

/* Tabelle interne: righe meno alte */
.mm-modal-compact table.table {
    --bs-gutter-y: 0;
}
.mm-modal-compact table.table > thead > tr > th {
    padding-top: 0.4rem;
    padding-bottom: 0.4rem;
    font-size: 11px !important;
}
.mm-modal-compact table.table > tbody > tr > td {
    padding-top: 0.3rem;
    padding-bottom: 0.3rem;
    vertical-align: middle;
}
/* Le icone "history" dentro le celle hanno mt-4 troppo grande in versione compact */
.mm-modal-compact table.table .pointer.d-block.mt-4 {
    margin-top: 0.25rem !important;
}

/* Select2 (search-select) deve allinearsi all'altezza ridotta.
   Regole con specificita' alta perche' il theme Metronic personalizza
   il rendering di select2 e altrimenti vince */
.mm-modal-compact .select2-container,
.mm-modal-compact .select2-container--default,
.mm-modal-compact .select2-container .select2-selection,
.mm-modal-compact .select2-container .select2-selection--single,
.mm-modal-compact .select2-container--default .select2-selection--single {
    height: 32px !important;
    min-height: 32px !important;
}
.mm-modal-compact .select2-container .select2-selection--single .select2-selection__rendered,
.mm-modal-compact .select2-container--default .select2-selection--single .select2-selection__rendered {
    line-height: 30px !important;
    font-size: 13px !important;
    padding: 0 24px 0 10px !important;
}
.mm-modal-compact .select2-container .select2-selection--single .select2-selection__arrow,
.mm-modal-compact .select2-container--default .select2-selection--single .select2-selection__arrow {
    height: 30px !important;
    top: 1px !important;
}

/* Tagsinput: altezza coerente */
.mm-modal-compact .bootstrap-tagsinput {
    min-height: 32px;
    padding: 2px 6px;
    font-size: 13px;
}
.mm-modal-compact .bootstrap-tagsinput input {
    min-height: 26px;
    font-size: 13px;
}

/* Note grandi tipo "out of risk" / valori totali in fieldset */
.mm-modal-compact .fs-16 { font-size: 13px !important; }
.mm-modal-compact .fs-18 { font-size: 14px !important; }
.mm-modal-compact .fs-24 { font-size: 16px !important; }

/* ============================================================
   AVAILABILITY TABLE (Trading Sell — Disponibilita')
   Lista compatta e leggibile delle opzioni di acquisto fornitore
   ============================================================ */

/* Header colonna piu' contenuto */
.mm-modal-compact .mm-availability-table > thead > tr > th {
    font-size: 10px !important;
    padding: 6px 8px !important;
    color: var(--mm-gray-600) !important;
    border-bottom: 1px solid var(--mm-gray-200) !important;
    letter-spacing: 0.05em;
    background-color: var(--mm-gray-50);
}

/* Riga "data": bar full-width che separa i gruppi */
.mm-modal-compact .mm-availability-table tr.mm-availability-day > th {
    background-color: var(--mm-area-distribution-bg, rgba(14, 159, 110, 0.08)) !important;
    color: var(--mm-area-distribution-dark, #047857) !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    padding: 6px 10px !important;
    border-radius: 4px;
    border: none !important;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}
.mm-modal-compact .mm-availability-table tr.mm-availability-day {
    background-color: transparent !important;
}

/* Righe opzioni: padding compatto, bordo dashed sottile */
.mm-modal-compact .mm-availability-table > tbody > tr > td {
    padding: 5px 8px !important;
    vertical-align: middle !important;
    font-size: 12px;
}
.mm-modal-compact .mm-availability-table > tbody > tr {
    border-bottom: 1px dashed var(--mm-gray-200);
}
.mm-modal-compact .mm-availability-table > tbody > tr.mm-availability-day {
    border-bottom: none;
}

/* Lista fornitori multi-riga: line-height stretto + font 11.5,
   cosi' una riga con 6 fornitori e' un blocchetto compatto leggibile */
.mm-modal-compact .mm-availability-table ul.simple {
    line-height: 1.25 !important;
    font-size: 11.5px;
    margin: 0 !important;
    padding: 0 !important;
}
.mm-modal-compact .mm-availability-table ul.simple li {
    list-style: none;
    padding: 0;
    margin: 0;
}
/* Quando i fornitori sono > 1 li separiamo con pallini grigi inline */
.mm-modal-compact .mm-availability-table td label > ul.simple {
    display: inline-block !important;
}
.mm-modal-compact .mm-availability-table td label > ul.simple > li:not(:last-child)::after {
    content: " ";
    display: block;
    height: 0;
}

/* Distance column: se ci sono piu' distanze le impiliamo con line-height
   stretto, ma se e' una sola appare normalmente */
.mm-modal-compact .mm-availability-table td > ul.simple {
    line-height: 1.3;
    font-size: 11px;
}

/* Checkbox in label: allineato in modo che non spunti sopra */
.mm-modal-compact .mm-availability-table td label.pointer {
    display: inline-flex;
    align-items: flex-start;
    gap: 6px;
}
.mm-modal-compact .mm-availability-table td label.pointer > input[type="checkbox"] {
    margin-top: 1px !important;
    flex-shrink: 0;
}

/* Quantita' (kg 30.000): pill grigia compatta */
.mm-modal-compact .mm-availability-table td.text-end > .text-black {
    display: inline-block;
    font-size: 11.5px;
    color: var(--mm-gray-800) !important;
    font-weight: 600;
}

/* Input quantita' venduta: gia' 80px da regola generale, ok */

/* Footer total: pill prominente */
.mm-modal-compact .mm-availability-table > tfoot > tr > td {
    padding: 8px !important;
    border-top: 2px solid var(--mm-gray-300);
}
.mm-modal-compact .mm-availability-table > tfoot .fs-16.fw-bold {
    font-size: 14px !important;
    color: var(--mm-color-primary, #1d4ed8) !important;
}

/* Pre-Sell badge piu' contenuto */
.mm-modal-compact .mm-availability-table .badge.badge-light-info {
    font-size: 10px !important;
    padding: 3px 8px !important;
    font-weight: 600;
    letter-spacing: 0.04em;
}

/* Active shipping label: piu' compatta */
.mm-modal-compact .mm-availability-table td label.pointer:has(input[type="checkbox"]) {
    font-size: 11.5px;
    color: var(--mm-gray-700);
}

/* ---- Flag "Richiesta export" sotto la select fornitore (TRADING BUY)
   Stile minimale: solo checkbox + label grigia, niente pill colorato */
.mm-modal-compact .mm-export-flag {
    display: inline-flex;
    align-items: center;
    background: transparent;
    border: none;
    padding: 0;
    margin-top: 6px !important;
    line-height: 1.2;
    cursor: pointer;
}
.mm-modal-compact .mm-export-flag .form-check-input {
    width: 18px !important;
    height: 18px !important;
    margin-top: 0 !important;
    margin-right: 8px !important;
}
.mm-modal-compact .mm-export-flag .form-check-label {
    color: var(--mm-gray-700) !important;
    letter-spacing: 0;
    text-transform: none;
    font-size: 13px !important;
    font-weight: 500 !important;
}
.mm-modal-compact .mm-export-flag .form-check-input:checked ~ .form-check-label {
    color: var(--mm-gray-900) !important;
    font-weight: 600 !important;
}

/* ---- Larghezze esplicite delle colonne nella Picking Points table.
   FROM/TO=100, FORNITORE=350 (w-350px), INDIRIZZO=400 (w-400px),
   PRODOTTO=250 (w-250px), input numerici=80, action=50. */
.mm-modal-compact table td.w-400px,
.mm-modal-compact table th.w-400px {
    width: 400px !important;
    min-width: 360px !important;
    max-width: 420px !important;
}
.mm-modal-compact table td.w-350px,
.mm-modal-compact table th.w-350px {
    width: 350px !important;
    min-width: 320px !important;
    max-width: 360px !important;
}
.mm-modal-compact table td.w-250px,
.mm-modal-compact table th.w-250px {
    width: 250px !important;
    min-width: 220px !important;
    max-width: 260px !important;
}
.mm-modal-compact table td.w-100px,
.mm-modal-compact table th.w-100px {
    width: 100px !important;
    min-width: 100px !important;
    max-width: 100px !important;
}
.mm-modal-compact table td.min-w-100px,
.mm-modal-compact table th.min-w-100px {
    min-width: 50px !important;
    width: 50px !important;
}

/* Cap del select dentro qualsiasi td: testo lungo troncato dal browser
   anziche' dilatare la colonna */
.mm-modal-compact table td > select.form-control,
.mm-modal-compact table td > select.form-select {
    width: 100% !important;
    max-width: 100% !important;
}

/* ---- Input numerici (QUANTITA / COSTO / PREZZO): mw-100px -> 80px */
.mm-modal-compact input.form-control.mw-100px,
.mm-modal-compact input.form-control.mw-100px.text-end {
    max-width: 80px !important;
    width: 80px !important;
}

/* td.text-end con .row interna (input numerico + icona history): allinea
   tutto a destra e fai larghezza = contenuto */
.mm-modal-compact table td.text-end {
    max-width: 130px;
}
.mm-modal-compact table td.text-end > .row {
    flex-wrap: nowrap;
    align-items: center;
    justify-content: flex-end;
    --bs-gutter-x: 0.25rem;
    margin-right: 0;
    margin-left: auto;
}
.mm-modal-compact table td.text-end > .row > .col-md-9,
.mm-modal-compact table td.text-end > .row > .col-md-3 {
    flex: 0 0 auto;
    width: auto;
    padding-left: 2px;
    padding-right: 2px;
}
.mm-modal-compact table td.text-end > .row > .col-md-3 .pointer.d-block {
    margin-top: 0 !important;
}

/* ---- Quality-box (icone certificati) e badge stato fornitore:
   pill unificato neutro. Niente piu' verde acceso bg-light-success +
   badge separato — un solo blocco lineare elegante. */
.mm-modal-compact .quality-box {
    background-color: #ffffff !important;
    border: 1px solid var(--mm-gray-200);
    padding: 3px 8px !important;
    margin-top: 4px !important;
    margin-right: 4px;
    line-height: 1;
    border-radius: 999px;
    display: inline-flex !important;
    align-items: center;
    vertical-align: middle;
    box-shadow: 0 1px 1px rgba(0,0,0,0.02);
}
.mm-modal-compact .quality-box ul {
    line-height: 1;
    display: inline-flex !important;
    align-items: center;
    padding: 0 !important;
    margin: 0 !important;
}
.mm-modal-compact .quality-box li {
    margin-right: 8px !important;
    vertical-align: middle;
    list-style: none;
}
.mm-modal-compact .quality-box li:last-child {
    margin-right: 0 !important;
}
.mm-modal-compact .quality-box .fs-18,
.mm-modal-compact .quality-box i.fs-18 {
    font-size: 12px !important;
}
/* Toni piu' soft per le icone di stato (stato 1=ok, 0=warn, -1=ko).
   FIX: prima text-success usava --mm-area-distribution (#f43f5e, rosa-distribuzione) per errore
   — risultato icone valide colorate di rosa. Ora usa il token success corretto. */
.mm-modal-compact .quality-box i.text-success { color: var(--mm-color-success, #10b981) !important; opacity: 0.85; }
.mm-modal-compact .quality-box i.text-warning { color: var(--mm-color-warning, #f59e0b) !important; opacity: 0.9; }
.mm-modal-compact .quality-box i.text-danger  { color: var(--mm-color-buy, #dc2626) !important; opacity: 0.9; }

/* DEC-018: c-attach-files con paste sempre-attivo. La fieldset evidenzia leggermente
   l'istanza "active" (ultima cliccata), che riceve i CTRL+V. */
.mm-attach-files-fs {
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
    border-radius: 4px;
}
.mm-attach-files-fs.is-active {
    border-color: var(--mm-color-info, #3b82f6) !important;
    box-shadow: inset 3px 0 0 0 var(--mm-color-info, #3b82f6);
}

/* DEC-016: variante "flat" della quality-box, senza sfondo/padding, usata nelle liste
   inline (es. operation.html availability per ciascun fornitore). Si applica via
   classe modificatrice sul root della c-quality-box: <c-quality-box class="mm-avail-quality-flat" />. */
.mm-avail-quality-flat .quality-box,
.mm-avail-quality-flat.quality-box {
    background: transparent !important;
    padding: 0 !important;
    margin: 0 !important;
    border: 0 !important;
}
.mm-avail-quality-flat .quality-box ul,
.mm-avail-quality-flat.quality-box ul {
    margin: 0 !important;
    padding: 0 !important;
}
.mm-avail-quality-flat .quality-box li,
.mm-avail-quality-flat.quality-box li {
    margin-right: 6px !important;
}
.mm-avail-quality-flat .quality-box li:last-child,
.mm-avail-quality-flat.quality-box li:last-child {
    margin-right: 0 !important;
}
/* DEC-016: highlight compatibility opt (availability table) rispetto alle richieste
   documenti selezionate sulla SELL in editing.
   - compatible: almeno 1 fornitore con TUTTE le richieste valide -> bordo verde,
     sfondo verdolino, badge "OK" inline a sinistra
   - incompatible: nessun fornitore soddisfa -> sfondo rosato, badge "KO" inline
   - loading: quality non ancora tutta caricata async -> stile neutro
   Quando non ci sono richieste tipizzate la classe non viene applicata. */
.mm-availability-table tr.mm-opt-compatible > td {
    background-color: rgba(16, 185, 129, 0.08) !important;
    box-shadow: inset 3px 0 0 0 var(--mm-color-success, #10b981);
}
.mm-availability-table tr.mm-opt-incompatible > td {
    background-color: rgba(220, 38, 38, 0.06) !important;
    box-shadow: inset 3px 0 0 0 var(--mm-color-buy, #dc2626);
    opacity: 0.85;
}
.mm-availability-table tr.mm-opt-loading > td {
    /* niente — placeholder per future varianti */
}
.mm-opt-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 28px;
    height: 22px;
    margin-top: 1px;
    padding: 0 6px;
    border-radius: 3px;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.5px;
    color: #fff;
}
.mm-opt-badge-ok {
    background: var(--mm-color-success, #10b981);
}
.mm-opt-badge-ko {
    background: var(--mm-color-buy, #dc2626);
}

/* DEC-015 / DEC-016: alert compliance sticky riusabile (logistic_assignment + operation).
   Forte presenza visiva (rosso, bordo spesso, ombra, pulse) per essere notato subito
   quando l'operatore seleziona qualcosa di non compatibile. */
.mm-compliance-alert {
    position: sticky;
    top: 0;
    z-index: 5;
    margin: 0 0 16px 0;
    padding: 0;
    background: #fff5f5;
    border: 2px solid var(--mm-color-danger, #dc2626);
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(220, 38, 38, 0.18);
    animation: mm-compliance-pulse 1.2s ease-in-out 2;
}
.mm-compliance-alert-inner {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 12px 16px;
}
.mm-compliance-alert-inner > i {
    font-size: 1.75rem;
    margin-top: 2px;
}
.mm-compliance-alert-title {
    font-weight: 700;
    font-size: 0.95rem;
    color: var(--mm-color-danger, #dc2626);
    margin-bottom: 4px;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}
.mm-compliance-alert-list {
    margin: 0;
    padding-left: 18px;
    font-size: 0.85rem;
    color: var(--mm-gray-800, #1f2937);
}
.mm-compliance-alert-list li {
    padding: 2px 0;
}
@keyframes mm-compliance-pulse {
    0%, 100% { box-shadow: 0 4px 12px rgba(220, 38, 38, 0.18); }
    50% { box-shadow: 0 4px 24px rgba(220, 38, 38, 0.45); }
}
.mm-fade-enter-active, .mm-fade-leave-active {
    transition: opacity 0.2s ease, transform 0.2s ease;
}
.mm-fade-enter, .mm-fade-leave-to {
    opacity: 0;
    transform: translateY(-8px);
}

/* DEC-016: lista fornitori in availability — layout a griglia per allineare nome,
   icone qualita' e badge stato in colonne nette across rows. */
.mm-avail-supplier-list { list-style: none; }
.mm-avail-supplier-list li {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 16px;
    align-items: center;
    padding: 4px 0;
}
.mm-avail-supplier-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
/* La colonna destra (.mm-avail-supplier-meta) e' a larghezza minima fissa per
   garantire che i badge "Active/InActive" si allineino verticalmente fra le righe
   anche quando il numero di icone qualita' varia. */
.mm-avail-supplier-meta {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    min-width: 240px;
}
.mm-avail-supplier-meta .quality-box {
    flex: 0 0 auto;
}

/* Badge ATTIVO / INATTIVO: piccolo pill coordinato, non urlato */
.mm-modal-compact td .badge,
.mm-modal-compact td .badge-success,
.mm-modal-compact td .badge-danger {
    font-size: 9px !important;
    padding: 3px 9px !important;
    line-height: 1.4 !important;
    vertical-align: middle;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    font-weight: 600 !important;
    margin-left: 0;
    margin-top: 4px;
    border-radius: 999px;
    display: inline-block;
    box-shadow: 0 1px 1px rgba(0,0,0,0.02);
}
/* Toni piu' soft anche per i badge */
.mm-modal-compact td .badge-success {
    background-color: #ecfdf5 !important;
    color: #047857 !important;
    border: 1px solid #a7f3d0;
}
.mm-modal-compact td .badge-danger {
    background-color: var(--mm-color-buy-bg) !important;
    color: #b91c1c !important;
    border: 1px solid var(--mm-color-buy-light);
}

/* "Member disabled" warning: piu' contenuto */
.mm-modal-compact td span.fs-18.text-danger,
.mm-modal-compact td span.fs-18.text-danger i.fs-18 {
    font-size: 11px !important;
}

/* "Supplier is disabled" full-row warning */
.mm-modal-compact td .fs-24.text-danger,
.mm-modal-compact td .fs-24.text-danger i.fs-24 {
    font-size: 13px !important;
}

/* Allinea verticalmente le celle: top, cosi' input/select restano allineati
   anche quando sotto l'indirizzo compaiono le icone qualita' */
.mm-modal-compact table.table > tbody > tr > td {
    vertical-align: top !important;
}

/* Note "Aggiungi/Edit" link nel td note: centra verticalmente con gli input */
.mm-modal-compact table.table > tbody > tr > td.text-center > a.pointer {
    display: inline-block;
    margin-top: 7px;
}

/* Trash icon in fondo riga: stesso allineamento degli input */
.mm-modal-compact table.table > tbody > tr > td.text-end > a.pointer i.fa-trash {
    margin-top: 7px;
}

/* ==============================================================
   WEEK STATISTICS PANEL (controls/operations/linked-list)
   ============================================================== */

.mm-week-stats-header {
    background: linear-gradient(135deg, var(--mm-gray-50) 0%, #fff 100%);
    border-bottom: 1px solid var(--mm-gray-200);
}

/* KPI cards */
.mm-week-stats-kpi-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

.mm-week-stats-kpi {
    border-radius: 8px;
    padding: 12px 14px;
    border: 1px solid transparent;
    background: #fff;
}

.mm-week-stats-kpi--buy {
    background: linear-gradient(135deg, var(--mm-color-buy-bg) 0%, #fff 100%);
    border-color: var(--mm-color-buy-light);
}

.mm-week-stats-kpi--sell {
    background: linear-gradient(135deg, var(--mm-color-sell-bg) 0%, #fff 100%);
    border-color: var(--mm-color-sell-light);
}

.mm-week-stats-kpi__label {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--mm-gray-600, #4b5563);
    margin-bottom: 4px;
}

.mm-week-stats-kpi--buy .mm-week-stats-kpi__label { color: var(--mm-color-buy); }
.mm-week-stats-kpi--sell .mm-week-stats-kpi__label { color: var(--mm-color-sell); }

.mm-week-stats-kpi__value {
    font-size: 20px;
    font-weight: 700;
    color: var(--mm-gray-900);
    line-height: 1.15;
}

.mm-week-stats-kpi__sub {
    font-size: 12px;
    color: var(--mm-gray-600, #4b5563);
    margin-top: 4px;
}

.mm-week-stats-kpi__sub b {
    color: var(--mm-gray-800, #1f2937);
    font-weight: 600;
}

/* Sezioni */
.mm-week-stats-section {
    margin-top: 18px;
}

.mm-week-stats-section__title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--mm-gray-800, #1f2937);
    padding: 8px 0;
    border-bottom: 1px solid var(--mm-gray-200);
    margin-bottom: 10px;
}

.mm-week-stats-section__title--alt {
    color: var(--mm-color-info);
}

.mm-week-stats-section__bullet {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--mm-color-info);
}

.mm-week-stats-section__title--alt .mm-week-stats-section__bullet {
    background: var(--mm-color-info);
}

/* Product cards */
.mm-week-stats-product-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 8px;
}

.mm-week-stats-product {
    background: #fff;
    border: 1px solid var(--mm-gray-200);
    border-radius: 8px;
    padding: 10px 12px;
}

.mm-week-stats-product__name {
    font-size: 13px;
    font-weight: 700;
    color: var(--mm-gray-900);
    text-transform: uppercase;
    letter-spacing: 0.03em;
    margin-bottom: 8px;
}

.mm-week-stats-product__cols {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

.mm-week-stats-product__col {
    padding: 8px 10px;
    border-radius: 6px;
    border: 1px solid;
}

.mm-week-stats-product__col--buy {
    background: var(--mm-color-buy-bg);
    border-color: var(--mm-color-buy-light);
}

.mm-week-stats-product__col--sell {
    background: var(--mm-color-sell-bg);
    border-color: var(--mm-color-sell-light);
}

.mm-week-stats-product__col-label {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-bottom: 2px;
}

.mm-week-stats-product__col--buy .mm-week-stats-product__col-label { color: var(--mm-color-buy); }
.mm-week-stats-product__col--sell .mm-week-stats-product__col-label { color: var(--mm-color-sell); }

.mm-week-stats-product__col-value {
    font-size: 15px;
    font-weight: 700;
    color: var(--mm-gray-900);
    line-height: 1.2;
}

.mm-week-stats-product__col-amount {
    font-size: 11px;
    color: var(--mm-gray-700);
    margin-top: 2px;
}

.mm-week-stats-product__col-amount b {
    font-weight: 600;
    color: var(--mm-gray-900);
}

/* Chart container */
.mm-week-stats-chart {
    background: #fff;
    border: 1px solid var(--mm-gray-200);
    border-radius: 8px;
    padding: 6px 8px 0;
    margin-bottom: 8px;
}

.mm-week-stats-chart-legend {
    display: flex;
    align-items: center;
    gap: 16px;
    font-size: 12px;
    color: var(--mm-gray-600, #4b5563);
    padding: 6px 0 12px;
}

.mm-week-stats-chart-legend__item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.mm-week-stats-chart-legend__dot {
    width: 10px;
    height: 10px;
    border-radius: 2px;
}

.mm-week-stats-chart-legend__dot--buy { background: var(--mm-color-buy); }
.mm-week-stats-chart-legend__dot--sell { background: var(--mm-color-sell); }

/* Regions table compatta */
.mm-week-stats-regions-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    font-size: 12px;
}

.mm-week-stats-regions-table thead th {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--mm-gray-600, #4b5563);
    padding: 8px 10px;
    border-bottom: 1px solid var(--mm-gray-200);
    background: var(--mm-gray-50);
}

.mm-week-stats-regions-table thead th:first-child { border-top-left-radius: 6px; }
.mm-week-stats-regions-table thead th:last-child  { border-top-right-radius: 6px; }

.mm-week-stats-regions-table tbody td {
    padding: 8px 10px;
    border-bottom: 1px solid var(--mm-gray-100);
    vertical-align: middle;
}

.mm-week-stats-regions-table tbody tr:hover td {
    background: var(--mm-gray-50);
}

.mm-week-stats-regions-table__buy { color: var(--mm-color-buy); font-weight: 600; }
.mm-week-stats-regions-table__sell { color: var(--mm-color-sell); font-weight: 600; }

.mm-week-stats-suggest {
    display: inline-flex;
    align-items: center;
    padding: 3px 8px;
    border-radius: 999px;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    border: 1px solid;
}

.mm-week-stats-suggest--buy {
    background: var(--mm-color-sell-bg);
    color: var(--mm-color-sell);
    border-color: var(--mm-color-sell-light);
}

.mm-week-stats-suggest--sell {
    background: var(--mm-color-buy-bg);
    color: var(--mm-color-buy);
    border-color: var(--mm-color-buy-light);
}

.mm-week-stats-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 40px 20px;
    text-align: center;
}

/* ===========================
   Supervisor Dashboard
   =========================== */

.mm-supdash-week-card {
    border-left: 4px solid var(--mm-color-primary);
}
.mm-supdash-week-text {
    display: flex;
    flex-direction: column;
    line-height: 1.15;
    min-width: 200px;
    text-align: center;
}
.mm-supdash-week-num {
    font-weight: 700;
    font-size: 1rem;
    color: var(--mm-gray-900);
}
.mm-supdash-week-range {
    font-size: 0.78rem;
    color: var(--mm-gray-500);
}
.mm-supdash-legend {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.78rem;
    font-weight: 600;
    padding: 0.3rem 0.7rem;
    border-radius: 0.5rem;
    cursor: help;
}
.mm-supdash-legend-realized {
    background: #d1fae5;
    color: #047857;
}
.mm-supdash-legend-booking {
    background: #dbeafe;
    color: #1d4ed8;
}
.mm-supdash-legend-mixed {
    background: #fef3c7;
    color: #b45309;
}

.mm-supdash-kpi-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 1rem;
}
.mm-supdash-kpi {
    border-top: 4px solid var(--mm-gray-300);
}
.mm-supdash-kpi-buy {
    border-top-color: var(--mm-color-buy);
}
.mm-supdash-kpi-sell {
    border-top-color: var(--mm-color-sell);
}
.mm-supdash-kpi-margin {
    border-top-color: var(--mm-color-primary);
}
.mm-supdash-kpi-margin.is-negative {
    border-top-color: var(--mm-color-buy);
}
.mm-supdash-kpi-partners {
    border-top-color: #8b5cf6;
}
.mm-supdash-kpi-customers {
    border-top-color: #06b6d4;
}
.mm-supdash-kpi-suppliers {
    border-top-color: #8b5cf6;
}
.mm-supdash-kpi-warehouse {
    border-top-color: var(--mm-gray-400, #9ca3af);
}
.mm-supdash-kpi-warehouse.is-positive {
    border-top-color: var(--mm-color-success, #10b981);
}
.mm-supdash-kpi-warehouse.is-negative {
    border-top-color: var(--mm-color-danger, #ef4444);
}
.mm-supdash-kpi-transport {
    border-top-color: var(--mm-gray-400, #9ca3af);
}
.mm-supdash-kpi-transport.is-positive {
    border-top-color: var(--mm-color-success, #10b981);
}
.mm-supdash-kpi-transport.is-negative {
    border-top-color: var(--mm-color-danger, #ef4444);
}
.mm-supdash-kpi .card-body {
    padding: 1rem 1.25rem;
}
.mm-supdash-kpi-head {
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--mm-gray-600, #4b5563);
    font-weight: 600;
    margin-bottom: 0.4rem;
}
/* Etichetta secondaria in parentesi sui card title (es. "(con trasporto)"):
   font piu' piccolo, peso normale, colore tenue per non competere col titolo. */
.mm-supdash-tag-muted {
    font-size: 0.78rem;
    font-weight: 500;
    color: var(--mm-gray-500, #6b7280);
    margin-left: 0.4rem;
    letter-spacing: 0;
}
.mm-supdash-kpi-pct {
    display: inline-block;
    margin-left: 0.5rem;
    padding: 0.15rem 0.5rem;
    border-radius: 0.4rem;
    background: var(--mm-gray-100, #f3f4f6);
    color: var(--mm-gray-700, #374151);
    font-size: 0.85rem;
    font-weight: 700;
    vertical-align: middle;
}
/* Riga valore + indicatore percentuale a destra. Il valore resta grosso a
   sinistra, la percentuale e' un secondo indicatore visivo dimensionato
   come una pill prominente, anchored al lato destro della card. */
.mm-supdash-kpi-value-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.75rem;
    flex-wrap: wrap;
}
.mm-supdash-kpi-pct-side {
    font-size: 1.1rem;
    font-weight: 800;
    padding: 0.25rem 0.65rem;
    border-radius: 0.45rem;
    line-height: 1.1;
    white-space: nowrap;
}
.mm-supdash-kpi-pct-side.is-positive {
    background: var(--mm-color-success-bg, #d1fae5);
    color: var(--mm-color-success-dark, #047857);
}
.mm-supdash-kpi-pct-side.is-negative {
    background: var(--mm-color-danger-bg, #fee2e2);
    color: var(--mm-color-danger-dark, #b91c1c);
}
.mm-supdash-kpi-value {
    font-size: 1.6rem;
    font-weight: 800;
    color: var(--mm-gray-900);
    line-height: 1.1;
}
.mm-supdash-kpi-meta {
    font-size: 0.82rem;
    color: var(--mm-gray-500);
    margin-top: 0.25rem;
}
.mm-supdash-delta {
    margin-top: 0.6rem;
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    font-size: 0.82rem;
    font-weight: 600;
    padding: 0.2rem 0.5rem;
    border-radius: 0.5rem;
}
.mm-supdash-delta.up {
    color: #047857;
    background: #d1fae5;
}
.mm-supdash-delta.down {
    color: #b91c1c;
    background: #fee2e2;
}
.mm-supdash-delta.flat {
    color: var(--mm-gray-600, #4b5563);
    background: var(--mm-gray-100);
}

.mm-supdash-grid-2 {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(380px, 1fr));
    gap: 1rem;
}
/* 3 colonne con auto-fit: scala a 2 o 1 su schermi piu' stretti.
   minmax piu' basso (300px) per stare comodi su 3 colonne >= ~1100px. */
.mm-supdash-grid-3 {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 1rem;
}
/* Colonna evidenziata = quella su cui la tabella e' ordinata. Fondo tenue
   per dare riferimento visivo senza disturbare la lettura delle altre. */
.mm-supdash-col-highlight {
    background: var(--mm-gray-50, #f9fafb);
}

/* Heatmap */
.mm-supdash-heatmap {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.mm-supdash-heatmap-row {
    display: grid;
    grid-template-columns: 110px repeat(7, 1fr);
    gap: 4px;
    align-items: stretch;
}
.mm-supdash-heatmap-label {
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--mm-gray-700);
    display: flex;
    align-items: center;
    padding: 0 0.4rem;
}
.mm-supdash-heatmap-cell {
    min-height: 56px;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    transition: transform 0.1s ease;
    cursor: default;
}
.mm-supdash-heatmap-cell:hover {
    transform: scale(1.04);
}
.mm-supdash-heatmap-day-head {
    background: transparent;
    min-height: 0;
    flex-direction: column;
    padding: 0.2rem 0;
}
.mm-supdash-day-name {
    font-size: 0.72rem;
    font-weight: 700;
    color: var(--mm-gray-500);
    text-transform: uppercase;
}
.mm-supdash-day-num {
    font-size: 0.78rem;
    color: var(--mm-gray-700);
}
.mm-supdash-heatmap-buy {
    --mm-cell-intensity: 0;
    background: rgba(217, 119, 6, calc(0.40 + var(--mm-cell-intensity) * 0.55));
}
.mm-supdash-heatmap-sell {
    --mm-cell-intensity: 0;
    background: rgba(5, 150, 105, calc(0.40 + var(--mm-cell-intensity) * 0.55));
}
/* Magazzino signed: verde se positivo (stock accumulato), rosso se negativo
   (stock consumato dai periodi precedenti), neutro se zero.
   Saturazione min alzata a 0.55 e tinte spostate a emerald-600/red-600 per dare
   contrasto sufficiente al testo bianco anche su celle a bassa intensita'. */
.mm-supdash-heatmap-warehouse-pos {
    --mm-cell-intensity: 0;
    background: rgba(5, 150, 105, calc(0.55 + var(--mm-cell-intensity) * 0.40));
}
.mm-supdash-heatmap-warehouse-neg {
    --mm-cell-intensity: 0;
    background: rgba(220, 38, 38, calc(0.55 + var(--mm-cell-intensity) * 0.40));
}
.mm-supdash-heatmap-warehouse-zero {
    background: var(--mm-gray-200, #e5e7eb);
}
.mm-supdash-heatmap-warehouse-zero .mm-supdash-cell-value {
    color: var(--mm-gray-500, #6b7280);
    text-shadow: none;
}
/* Trasporto: stesso pattern signed di Magazzino. */
.mm-supdash-heatmap-transport-pos {
    --mm-cell-intensity: 0;
    background: rgba(5, 150, 105, calc(0.55 + var(--mm-cell-intensity) * 0.40));
}
.mm-supdash-heatmap-transport-neg {
    --mm-cell-intensity: 0;
    background: rgba(220, 38, 38, calc(0.55 + var(--mm-cell-intensity) * 0.40));
}
.mm-supdash-heatmap-transport-zero {
    background: var(--mm-gray-200, #e5e7eb);
}
.mm-supdash-heatmap-transport-zero .mm-supdash-cell-value {
    color: var(--mm-gray-500, #6b7280);
    text-shadow: none;
}
.mm-supdash-cell-value {
    font-size: 0.95rem;
    font-weight: 800;
    color: #ffffff;
    text-shadow: 0 1px 2px rgba(0,0,0,0.55), 0 0 3px rgba(0,0,0,0.25);
    letter-spacing: 0.01em;
}

.mm-supdash-trend-chart {
    width: 100%;
    min-height: 220px;
}

/* Leaderboard */
.mm-supdash-leaderboard tr td {
    padding-top: 0.6rem;
    padding-bottom: 0.6rem;
}
.mm-supdash-rank {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--mm-gray-100);
    color: var(--mm-gray-700);
    font-weight: 700;
    font-size: 0.85rem;
}
.mm-supdash-leaderboard tr:nth-child(1) .mm-supdash-rank {
    background: #fef3c7;
    color: #b45309;
}
.mm-supdash-leaderboard tr:nth-child(2) .mm-supdash-rank {
    background: var(--mm-gray-200);
    color: #4b5563;
}
.mm-supdash-leaderboard tr:nth-child(3) .mm-supdash-rank {
    background: #fed7aa;
    color: #9a3412;
}
.mm-supdash-buy-text {
    color: var(--mm-color-buy, #b45309);
}
.mm-supdash-sell-text {
    color: var(--mm-color-sell, #047857);
}

/* Top ops */
.mm-supdash-topop {
    padding: 0.75rem 0;
    border-bottom: 1px dashed var(--mm-gray-200);
}
.mm-supdash-topop:last-child {
    border-bottom: 0;
}
.mm-supdash-topop-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.25rem;
}
.mm-supdash-topop-type {
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    padding: 0.2rem 0.5rem;
    border-radius: 0.4rem;
    letter-spacing: 0.04em;
}
.mm-supdash-topop-buy {
    background: #fef3c7;
    color: #b45309;
}
.mm-supdash-topop-sell {
    background: #d1fae5;
    color: #047857;
}
.mm-supdash-topop-amount {
    font-weight: 800;
    font-size: 1rem;
    color: var(--mm-gray-900);
}
.mm-supdash-topop-meta {
    font-size: 0.82rem;
    color: var(--mm-gray-700);
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
}

/* Pending */
.mm-supdash-pending-row {
    display: flex;
    align-items: center;
    gap: 1rem;
}
.mm-supdash-pending-num {
    font-size: 2.4rem;
    font-weight: 800;
    line-height: 1;
    color: #d97706;
}
.mm-supdash-pending-label {
    font-weight: 600;
    color: var(--mm-gray-800, #1f2937);
}

@media (max-width: 768px) {
    .mm-supdash-heatmap-row {
        grid-template-columns: 80px repeat(7, 1fr);
    }
    .mm-supdash-heatmap-label {
        font-size: 0.7rem;
    }
    .mm-supdash-cell-value {
        font-size: 0.78rem;
    }
}

/* ============================================================================
   Indirizzi disabilitati — badge + select highlight (operation modal & co.)
   Indica visivamente quando l'indirizzo selezionato è in member.disabled o
   member.data.disabled_addresses, in coerenza con il flag posto nel
   quality_editor (tab Indirizzi).
   ============================================================================ */
.mm-address-select-disabled {
    border-color: var(--mm-color-buy) !important;
    background-color: var(--mm-color-buy-bg) !important;
    color: var(--mm-color-buy) !important;
    font-weight: var(--mm-fw-semibold);
}

.mm-address-disabled-badge {
    background: var(--mm-color-buy-bg);
    color: var(--mm-color-buy);
    border: 1px solid var(--mm-color-buy-light);
    padding: 3px 8px;
    border-radius: 3px;
    font-size: var(--mm-fs-caption);
    font-weight: var(--mm-fw-semibold);
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.mm-address-disabled-badge i {
    color: var(--mm-color-buy);
}


/* ============================================================================
   mm-truck-info — Box informativo trasporto (tractor/trailer/driver/extra).
   Pattern leggero ma visivamente evidente: bg gray-50 + bordo gray-200 +
   strip sinistro tinto (info, accent della "logistica"), padding compatto.
   Riusato da:
   - c-shipping/head-block.html
   - operations/toaccept.html, to-lab.html, to-unloads.html (cella shipping)
   - ovunque serva un blocco "info trasporto" nelle tabelle.
   API: wrapper `<div class="mm-truck-info">` + righe `mm-truck-info-row`
   con label `mm-truck-info-label`.
   ============================================================================ */
.mm-truck-info {
    margin-left: 26px;
    margin-top: 6px;
    padding: 6px 10px;
    background: var(--mm-gray-50);
    border: 1px solid var(--mm-gray-200);
    border-left: 3px solid var(--mm-color-info);
    border-radius: 4px;
    font-size: var(--mm-fs-caption);
    color: var(--mm-gray-700);
    line-height: 1.6;
    display: inline-block;
    min-width: 200px;
}

.mm-truck-info-row {
    display: block;
}

.mm-truck-info-row > i {
    color: var(--mm-gray-500);
}

.mm-truck-info-label {
    font-weight: var(--mm-fw-semibold);
    color: var(--mm-gray-500);
    margin-right: 4px;
}

/* Debug banner: barra orizzontale in cima quando Web.config debug=true.
   Avvisa l'utente che sta operando in un ambiente non-produzione.
   Fixed top:0 con z-index altissimo per stare sopra header/aside; il body
   riceve la classe .mm-debug-on (gestita da vueapp.js) che spinge gli
   elementi sticky/fixed di --mm-debug-banner-h px in basso. */
:root {
    --mm-debug-banner-h: 30px;
}
.mm-debug-banner {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: var(--mm-debug-banner-h);
    line-height: calc(var(--mm-debug-banner-h) - 12px);
    background-color: #fef7e6;
    border-bottom: 1px solid #fcd34d;
    color: var(--mm-gray-900);
    font-size: var(--mm-fs-label);
    padding: 6px 12px;
    text-align: center;
    z-index: 1100;
}
.mm-debug-banner > i {
    color: #92400e;
}
.mm-debug-banner .badge {
    font-size: 11px;
    padding: 2px 8px;
    letter-spacing: 0.04em;
    vertical-align: middle;
}

/* Spinge gli elementi sticky/fixed del chrome Metronic sotto il banner. */
body.mm-debug-on {
    padding-top: var(--mm-debug-banner-h);
}
body.mm-debug-on #kt_header {
    top: var(--mm-debug-banner-h) !important;
}
body.mm-debug-on #kt_aside,
body.mm-debug-on #kt_aside_logo,
body.mm-debug-on .aside {
    top: var(--mm-debug-banner-h) !important;
}