/* ═══════════════════════════════════════════════════════════════════════════
   FONT SELF-HOSTED — DM Sans / DM Mono (22/07/2026)

   Il tema referenzia 'DM Sans' e 'DM Mono' ma nulla li caricava: senza questi
   @font-face il browser cadeva su Segoe UI/system-ui. I woff2 (subset latin,
   copre italiano + simbolo €) stanno in wwwroot/fonts, serviti come
   /_content/072.C2P.Styles.Core/fonts/. Niente piu' dipendenza dal CDN Google.
   DM Sans e' un font variabile: un solo file copre i pesi 100..900.
   ═══════════════════════════════════════════════════════════════════════════ */
@font-face {
    font-family: 'DM Sans';
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url('../fonts/dmsans.woff2') format('woff2');
}
@font-face {
    font-family: 'DM Mono';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('../fonts/dmmono-400.woff2') format('woff2');
}
@font-face {
    font-family: 'DM Mono';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url('../fonts/dmmono-500.woff2') format('woff2');
}

/* ═══════════════════════════════════════════════════════════════════════════
   COST2PLAN — tema applicativo

   Riproduce l'identita' visiva del sistema legacy (cost2plan.html) sopra il
   template Mimir, senza toccare app.less.

   PERCHE' UN FILE A PARTE E NON UNA MODIFICA A app.less
   - app.less e' condiviso e si compila con BuildWebCompiler2022, un plugin di
     Visual Studio: chi non ce l'ha non puo' rigenerare il CSS. Questo file e'
     CSS semplice, si modifica e si vede subito.
   - E' additivo: togliere la <link> dal layout riporta l'applicazione
     all'aspetto del template, senza rimuovere niente.
   Caricato DOPO app.css, quindi vince a parita' di specificita'.

   ═══════════════════════════════════════════════════════════════════════════
   IL LINGUAGGIO VISIVO, IN BREVE
   Coral #f03a2e come unico accento, su fondi grigio chiarissimi. Testo piccolo
   (13px di base) e denso: e' un'applicazione da reparto, chi la usa ci passa la
   giornata e vuole vedere molte righe insieme.
   I NUMERI VANNO IN DM MONO. Non e' un vezzo: diametri, volumi, ore e costi si
   leggono in colonna e vanno confrontati a colpo d'occhio, e con un font a
   larghezza variabile le cifre non si allineano.
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
    /* Accento */
    --c2p-coral: #f03a2e;
    --c2p-coral-l: #f5584e;
    --c2p-coral-d: #c42d23;
    --c2p-coral-bg: #fff5f4;
    --c2p-coral-b: #ffb3ae;

    /* Fondi, dal chiaro allo scuro */
    --c2p-bg: #ffffff;
    --c2p-bg2: #f8fafc;
    --c2p-bg3: #f1f4f8;
    --c2p-bg4: #e8ecf2;

    /* Bordi */
    --c2p-border: #eaecf2;
    --c2p-border2: #d8dce6;

    /* Testo */
    --c2p-ink: #141824;
    --c2p-ink2: #4a5265;
    --c2p-ink3: #8892a4;

    /* Semantici */
    --c2p-green: #15803d;
    --c2p-green-bg: #f0fdf4;
    --c2p-green-b: #86efac;
    --c2p-amber: #b45309;
    --c2p-amber-bg: #fffbeb;
    --c2p-amber-b: #fcd34d;
    --c2p-blue: #1d4ed8;
    --c2p-blue-bg: #eff6ff;
    --c2p-blue-b: #93c5fd;
    --c2p-violet: #6d28d9;
    --c2p-violet-bg: #f5f3ff;
    --c2p-violet-b: #c4b5fd;

    /* Raggi */
    --c2p-r: 8px;
    --c2p-r2: 12px;
    --c2p-r3: 16px;

    /* Ombre */
    --c2p-sh: 0 1px 2px rgba(0, 0, 0, .05), 0 3px 10px rgba(0, 0, 0, .06);
    --c2p-sh-md: 0 4px 16px rgba(0, 0, 0, .08), 0 1px 3px rgba(0, 0, 0, .05);
    --c2p-sh-lg: 0 10px 40px rgba(0, 0, 0, .12), 0 2px 8px rgba(0, 0, 0, .06);
    --c2p-sh-coral: 0 4px 16px rgba(240, 58, 46, .22);

    /* Tipografia. Le famiglie locali in coda reggono se il CDN dei font non e'
       raggiungibile: su un server di reparto senza internet il layout non deve
       cambiare, solo il carattere. */
    --c2p-font: 'DM Sans', 'Segoe UI', system-ui, sans-serif;
    --c2p-font-mono: 'DM Mono', 'Cascadia Mono', Consolas, monospace;
}

/* ═══ BASE ══════════════════════════════════════════════════════════════ */

body {
    font-family: var(--c2p-font);
    font-size: 13px;
    color: var(--c2p-ink);
    background: var(--c2p-bg3);
}

#main-content {
    background: var(--c2p-bg3);
}

/* Il template mette il maiuscolo largo sui titoli di sezione: e' la cifra
   stilistica del vecchio, si tiene. */
.c2p-eyebrow {
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--c2p-ink3);
}

/* Ovunque compaia un numero da confrontare in colonna. */
.c2p-mono,
.c2p-num {
    font-family: var(--c2p-font-mono);
    font-variant-numeric: tabular-nums;
}

.c2p-muted {
    color: var(--c2p-ink3);
}

/* ═══ INTESTAZIONE DI PAGINA ════════════════════════════════════════════ */

.mm-page-heading {
    background: var(--c2p-bg);
    border-bottom: 1px solid var(--c2p-border);
    box-shadow: none;
}

    .mm-page-heading h3 {
        font-size: 17px;
        font-weight: 700;
        color: var(--c2p-ink);
        letter-spacing: -.2px;
    }

    .mm-page-heading .breadcrumb-item,
    .mm-page-heading .breadcrumb-item a {
        font-size: 11px;
        color: var(--c2p-ink3);
        text-decoration: none;
    }

        .mm-page-heading .breadcrumb-item.active {
            color: var(--c2p-coral);
            font-weight: 600;
        }

        .mm-page-heading .breadcrumb-item a:hover {
            color: var(--c2p-ink);
        }

.mm-page-content {
    background: var(--c2p-bg3);
}

/* ═══ MARCHIO ═══════════════════════════════════════════════════════════ */

.c2p-brand {
    display: flex;
    flex-direction: column;
    align-items: center;
    cursor: pointer;
    text-decoration: none;
    padding: 4px 0;
}

.c2p-brand-name {
    font-size: 22px;
    font-weight: 700;
    letter-spacing: -.6px;
    color: var(--c2p-coral);
    line-height: 1.1;
}

.c2p-brand-sub {
    font-size: 8px;
    font-weight: 700;
    letter-spacing: 1.6px;
    text-transform: uppercase;
    color: var(--c2p-ink3);
    margin-top: 2px;
}

/* Sul login il marchio e' l'unico elemento di identita' della pagina, quindi
   respira piu' che in sidebar, dove deve stare in una barra di 60 px. */
.c2p-brand--login {
    cursor: default;
}

    .c2p-brand--login .c2p-brand-name {
        font-size: 34px;
    }

    .c2p-brand--login .c2p-brand-sub {
        font-size: 9px;
        letter-spacing: 1.8px;
        margin-top: 6px;
        /* Su una scheda stretta andrebbe a capo spezzando la dicitura in due
           righe sghembe: meglio tenerla su una riga sola. */
        white-space: nowrap;
    }

/* ═══ LOGIN ═════════════════════════════════════════════════════════════
   Il template dipinge lo sfondo con la trama del progetto di origine
   (images/bg/login-bg.png). Qui diventa una superficie neutra: l'attenzione
   sta sulla scheda, non dietro.                                            */

.mm-bg-container {
    background-image: none;
    background-color: var(--c2p-bg3);
}

.mm-login-container {
    background: var(--c2p-bg);
    border: 1px solid var(--c2p-border);
    border-radius: 12px;
    box-shadow: 0 1px 2px rgba(20, 24, 36, .04), 0 8px 24px rgba(20, 24, 36, .06);
    padding: 36px 24px 40px;
}

/* ═══ NAVIGAZIONE ═══════════════════════════════════════════════════════ */

.sidebar-wrapper {
    background: var(--c2p-bg);
    border-right: 1px solid var(--c2p-border);
}

.sidebar-item .sidebar-link {
    font-size: 12px;
    font-weight: 500;
    color: var(--c2p-ink2);
    border-radius: 6px;
}

    .sidebar-item .sidebar-link:hover {
        background: var(--c2p-bg3);
        color: var(--c2p-ink);
    }

.sidebar-item.active > .sidebar-link {
    background: var(--c2p-coral-bg);
    color: var(--c2p-coral);
    font-weight: 600;
    /* La barretta a sinistra sostituisce il riempimento pieno del template:
       segnala la posizione senza rubare attenzione ai dati. */
    box-shadow: inset 3px 0 0 var(--c2p-coral);
}

    .sidebar-item.active > .sidebar-link i {
        color: var(--c2p-coral);
    }

/* Il template colora la sidebar con --assoartigiani-green su selettori a quattro
   classi, che battono quelli qui sopra. Vanno ripetuti con la stessa specificita':
   cost2plan.css viene caricato dopo app.css, quindi a parita' di peso vince questo.
   Si agisce sui selettori e non sulla variabile perche' quella regge due ruoli
   opposti — testo delle voci inattive e sfondo di quella attiva. */
.sidebar-wrapper .menu .sidebar-item:not(.active) > .sidebar-link span,
.sidebar-wrapper .menu .sidebar-item:not(.active) > .sidebar-link svg,
.sidebar-wrapper .menu .sidebar-item:not(.active) > .sidebar-link i {
    color: var(--c2p-ink2);
}

.sidebar-wrapper .menu .sidebar-item:not(.active) > .sidebar-link:hover {
    background-color: var(--c2p-bg3);
}

    .sidebar-wrapper .menu .sidebar-item:not(.active) > .sidebar-link:hover span,
    .sidebar-wrapper .menu .sidebar-item:not(.active) > .sidebar-link:hover i {
        color: var(--c2p-ink);
    }

.sidebar-wrapper .menu .sidebar-item.active > .sidebar-link {
    background-color: var(--c2p-coral-bg);
    box-shadow: inset 3px 0 0 var(--c2p-coral);
}

    .sidebar-wrapper .menu .sidebar-item.active > .sidebar-link span,
    .sidebar-wrapper .menu .sidebar-item.active > .sidebar-link svg,
    .sidebar-wrapper .menu .sidebar-item.active > .sidebar-link i {
        color: var(--c2p-coral);
    }

/* Iniziali dell'utente in navbar, al posto del logo del progetto di origine. */
.c2p-avatar {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: var(--c2p-coral-bg);
    border: 1px solid var(--c2p-coral-b);
    color: var(--c2p-coral);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .02em;
    display: flex;
    align-items: center;
    justify-content: center;
    user-select: none;
}

/* ═══ BOTTONI ═══════════════════════════════════════════════════════════
   Il template ha una famiglia .mm-btn-{colore}. Qui il verde — che nel
   template e' l'azione primaria — diventa coral, cosi' le viste esistenti
   ereditano l'accento giusto senza cambiare una classe.                    */

.mm-btn-green,
.mm-btn-green-icon,
/* app.css:673 usa "div:not(.mm-actions-panel) > .mm-btn-green": due classi piu'
   un elemento, quindi batte il selettore a classe singola qui sopra. Con
   !important da entrambe le parti l'ordine dei file non conta, conta il peso:
   va ripetuto lo stesso selettore, altrimenti il bottone resta verde. */
div:not(.mm-actions-panel) > .mm-btn-green {
    background: var(--c2p-coral) !important;
    border-color: var(--c2p-coral) !important;
    color: #fff !important;
    box-shadow: var(--c2p-sh-coral);
}

    .mm-btn-green:hover,
    .mm-btn-green-icon:hover,
    div:not(.mm-actions-panel) > .mm-btn-green:hover {
        background: var(--c2p-coral-d) !important;
        border-color: var(--c2p-coral-d) !important;
    }

    div:not(.mm-actions-panel) > .mm-btn-green svg,
    div:not(.mm-actions-panel) > .mm-btn-green:hover svg {
        color: #fff !important;
    }

.mm-btn-green,
.mm-btn-blue,
.mm-btn-gray,
.mm-btn-red,
.mm-btn-azure {
    font-size: 12px;
    font-weight: 600;
    border-radius: 6px;
    padding: 7px 16px;
}

.mm-btn-green-icon,
.mm-btn-blue-icon,
.mm-btn-gray-icon,
.mm-btn-red-icon,
.mm-btn-azure-icon,
.mm-btn-orange-icon {
    border-radius: 6px;
}

.mm-actions-panel {
    background: transparent;
    border: none;
    padding-left: 0;
    padding-right: 0;
    gap: 8px;
}

/* ═══ CAMPI ═════════════════════════════════════════════════════════════ */

.form-control,
.form-select {
    background: var(--c2p-bg2);
    border: 1.5px solid var(--c2p-border2);
    color: var(--c2p-ink);
    font-size: 12px;
    border-radius: 6px;
    padding: 7px 10px;
}

    .form-control:focus,
    .form-select:focus {
        outline: none;
        border-color: var(--c2p-coral);
        background: #fff;
        box-shadow: none;
    }

    /* I campi numerici sono quasi sempre grandezze da confrontare. */
    .form-control[type=number],
    .form-control[type=date] {
        font-family: var(--c2p-font-mono);
    }

    .form-control[readonly] {
        background: var(--c2p-bg3);
        color: var(--c2p-ink2);
    }

.mm-label,
label.mm-label {
    font-size: 11px;
    font-weight: 600;
    color: var(--c2p-ink2);
    margin-bottom: 3px;
}

/* ═══ SCHEDE ════════════════════════════════════════════════════════════ */

.nav-tabs {
    border-bottom: 1px solid var(--c2p-border);
}

    .nav-tabs .nav-link {
        font-size: 12px;
        font-weight: 500;
        color: var(--c2p-ink3);
        border: none;
        border-bottom: 2.5px solid transparent;
        background: transparent;
        padding: 8px 14px;
    }

        .nav-tabs .nav-link:hover {
            color: var(--c2p-ink);
            border-color: transparent;
        }

        .nav-tabs .nav-link.active {
            color: var(--c2p-coral);
            background: transparent;
            border-bottom-color: var(--c2p-coral);
        }

/* ═══ MODALI ════════════════════════════════════════════════════════════ */

.modal-content {
    border: none;
    border-radius: var(--c2p-r3);
    box-shadow: var(--c2p-sh-lg);
}

.modal-header {
    border-bottom: 1px solid var(--c2p-border);
    padding: 16px 20px;
}

.modal-title {
    font-size: 15px;
    font-weight: 700;
    color: var(--c2p-ink);
}

.modal-footer {
    border-top: 1px solid var(--c2p-border);
    padding: 12px 20px;
}

/* ═══ CARD DI COPERTURA (strip sopra la griglia) ════════════════════════ */

.c2p-coverage {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.c2p-coverage-card {
    display: flex;
    align-items: center;
    gap: 8px;
    background: var(--c2p-bg);
    border: 1px solid var(--c2p-border);
    border-radius: var(--c2p-r);
    padding: 8px 12px;
    box-shadow: var(--c2p-sh);
    /* Il livello di copertura si legge dal filo colorato a sinistra, non da un
       fondo colorato: cosi' cinque card affiancate non diventano un semaforo. */
    border-left: 3px solid var(--c2p-border2);
}

    .c2p-coverage-card.is-high {
        border-left-color: var(--c2p-green);
    }

    .c2p-coverage-card.is-med {
        border-left-color: var(--c2p-amber);
    }

    .c2p-coverage-card.is-low {
        border-left-color: var(--c2p-coral);
    }

.c2p-coverage-icon {
    font-size: 16px;
    line-height: 1;
}

.c2p-coverage-name {
    font-size: 12px;
    font-weight: 600;
    color: var(--c2p-ink);
}

.c2p-coverage-count {
    font-family: var(--c2p-font-mono);
    font-size: 10px;
    color: var(--c2p-ink3);
    background: var(--c2p-bg3);
    border-radius: 10px;
    padding: 1px 7px;
}

.c2p-coverage-card.is-high .c2p-coverage-state {
    color: var(--c2p-green);
}

.c2p-coverage-card.is-med .c2p-coverage-state {
    color: var(--c2p-amber);
}

.c2p-coverage-card.is-low .c2p-coverage-state {
    color: var(--c2p-coral);
}

.c2p-empty {
    font-size: 12px;
    color: var(--c2p-ink3);
    background: var(--c2p-bg);
    border: 1px dashed var(--c2p-border2);
    border-radius: var(--c2p-r);
    padding: 12px 14px;
}

/* ═══ PANNELLI E TESTI DI SERVIZIO ══════════════════════════════════════ */

.c2p-panel {
    background: var(--c2p-bg);
    border: 1px solid var(--c2p-border);
    border-radius: var(--c2p-r);
    padding: 16px;
    box-shadow: var(--c2p-sh);
    height: 100%;
}

/* Le spiegazioni brevi sopra una griglia: dicono perche' quel dato conta.
   Vanno lette una volta, quindi restano in secondo piano. */
.c2p-hint {
    font-size: 11px;
    line-height: 1.5;
    color: var(--c2p-ink3);
    margin-bottom: 10px;
}

/* Per gli avvisi che hanno conseguenze sui numeri, non per gli errori. */
.c2p-warning {
    font-size: 12px;
    line-height: 1.5;
    color: var(--c2p-amber);
    background: var(--c2p-amber-bg);
    border: 1px solid var(--c2p-amber-b);
    border-radius: var(--c2p-r);
    padding: 10px 14px;
}

.c2p-swatch {
    display: inline-block;
    width: 14px;
    height: 14px;
    border-radius: 3px;
    border: 1px solid var(--c2p-border2);
    flex-shrink: 0;
}

.c2p-field-ok {
    border-color: var(--c2p-green-b) !important;
    color: var(--c2p-green) !important;
    font-weight: 700;
}

.c2p-field-bad {
    border-color: var(--c2p-coral-b) !important;
    color: var(--c2p-coral) !important;
    font-weight: 700;
}

/* ═══ NUMERI DI TESTA (KPI) ═════════════════════════════════════════════ */

.c2p-kpi {
    display: flex;
    flex-direction: column;
    background: var(--c2p-bg);
    border: 1px solid var(--c2p-border);
    border-left: 3px solid var(--c2p-coral);
    border-radius: var(--c2p-r);
    padding: 12px 16px;
    box-shadow: var(--c2p-sh);
    height: 100%;
}

    /* Il filo diventa ambra quando il numero segnala un problema, non quando e'
       semplicemente basso: l'allerta si usa con parsimonia o smette di funzionare. */
    .c2p-kpi.is-warn {
        border-left-color: var(--c2p-amber);
    }

.c2p-kpi-label {
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--c2p-ink3);
}

.c2p-kpi-value {
    font-family: var(--c2p-font-mono);
    font-size: 26px;
    font-weight: 500;
    color: var(--c2p-ink);
    line-height: 1.2;
    margin-top: 2px;
}

.c2p-kpi-unit {
    font-size: 14px;
    color: var(--c2p-ink3);
}

.c2p-kpi-note {
    font-size: 10px;
    color: var(--c2p-ink3);
    margin-top: 2px;
}

/* ═══ SCHEDE DI DETTAGLIO ═══════════════════════════════════════════════ */

/* Coppie etichetta/valore. Griglia a due colonne invece che righe: le etichette
   restano incolonnate e i valori si leggono a scansione verticale. */
.c2p-dl {
    display: grid;
    grid-template-columns: minmax(90px, auto) 1fr;
    gap: 5px 12px;
    margin: 0;
    font-size: 12px;
}

    .c2p-dl dt {
        color: var(--c2p-ink3);
        font-weight: 500;
    }

    .c2p-dl dd {
        margin: 0;
        color: var(--c2p-ink);
        font-weight: 600;
    }

/* Il numero del preventivo: e' il dato per cui si apre la scheda. */
.c2p-estimate {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.c2p-estimate-value {
    font-family: var(--c2p-font-mono);
    font-size: 28px;
    font-weight: 500;
    color: var(--c2p-coral);
    line-height: 1.1;
}

.c2p-estimate-range {
    font-size: 12px;
    color: var(--c2p-ink3);
    margin-top: 3px;
}

.c2p-stat {
    padding: 6px 0;
}

.c2p-stat-label {
    display: block;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--c2p-ink3);
}

.c2p-stat-value {
    display: block;
    font-family: var(--c2p-font-mono);
    font-size: 13px;
    font-weight: 500;
    color: var(--c2p-ink);
    margin-top: 1px;
}

/* ═══ BADGE DI STATO IN GRIGLIA ═════════════════════════════════════════ */

.c2p-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 10px;
    font-weight: 700;
    border-radius: 5px;
    padding: 2px 8px;
    border: 1px solid transparent;
    white-space: nowrap;
}

    .c2p-badge.is-ok {
        color: var(--c2p-green);
        background: var(--c2p-green-bg);
        border-color: var(--c2p-green-b);
    }

    .c2p-badge.is-warn {
        color: var(--c2p-amber);
        background: var(--c2p-amber-bg);
        border-color: var(--c2p-amber-b);
    }

    .c2p-badge.is-info {
        color: var(--c2p-blue);
        background: var(--c2p-blue-bg);
        border-color: var(--c2p-blue-b);
    }

    .c2p-badge.is-alert {
        color: var(--c2p-coral);
        background: var(--c2p-coral-bg);
        border-color: var(--c2p-coral-b);
    }

/* ═══ DEVEXTREME ════════════════════════════════════════════════════════
   La griglia e' la superficie piu' vista dell'applicazione: se resta con
   l'aspetto di serie, il resto del tema non si nota nemmeno.               */

.dx-widget,
.dx-datagrid {
    font-family: var(--c2p-font);
    font-size: 12px;
    color: var(--c2p-ink);
}

.dx-datagrid {
    background: var(--c2p-bg);
    border-radius: var(--c2p-r);
}

.dx-datagrid-headers {
    background: var(--c2p-bg2);
    border-bottom: 1px solid var(--c2p-border2);
    color: var(--c2p-ink3);
}

    .dx-datagrid-headers .dx-datagrid-table .dx-row > td {
        font-size: 10px;
        font-weight: 700;
        letter-spacing: .6px;
        text-transform: uppercase;
        color: var(--c2p-ink3);
    }

.dx-datagrid-rowsview .dx-row > td {
    border-bottom: 1px solid var(--c2p-border);
    padding: 7px 8px;
}

.dx-datagrid-rowsview .dx-row-alt > td {
    background: var(--c2p-bg2);
}

.dx-datagrid-rowsview .dx-data-row:hover > td {
    background: var(--c2p-coral-bg) !important;
}

/* Le colonne allineate a destra sono numeri per convenzione: font tabellare,
   cosi' le cifre si incolonnano davvero. */
.dx-datagrid-rowsview .dx-row > td[style*="text-align: right"],
.dx-datagrid .dx-text-content-alignment-right {
    font-family: var(--c2p-font-mono);
    font-variant-numeric: tabular-nums;
}

.dx-datagrid-group-panel {
    background: var(--c2p-bg2);
    border-bottom: 1px solid var(--c2p-border);
}

.dx-datagrid-rowsview .dx-group-row {
    background: var(--c2p-bg3);
    font-weight: 700;
    color: var(--c2p-ink);
}

    .dx-datagrid-rowsview .dx-group-row > td {
        border-bottom: 1px solid var(--c2p-border2);
    }

.dx-datagrid-total-footer {
    background: var(--c2p-bg2);
    border-top: 1px solid var(--c2p-border2);
    font-family: var(--c2p-font-mono);
    font-weight: 700;
}

.dx-datagrid-filter-row .dx-editor-cell .dx-texteditor {
    font-size: 11px;
}

.dx-checkbox-checked .dx-checkbox-icon,
.dx-checkbox-indeterminate .dx-checkbox-icon {
    background: var(--c2p-coral);
    border-color: var(--c2p-coral);
}

.dx-pager .dx-page.dx-selection,
.dx-pager .dx-page-size.dx-selection {
    background: var(--c2p-coral);
    color: #fff;
}

.dx-datagrid .dx-link {
    color: var(--c2p-coral);
}

/* ═══ SWEETALERT ════════════════════════════════════════════════════════ */

.swal2-popup {
    font-family: var(--c2p-font);
    border-radius: var(--c2p-r3);
}

.swal2-title {
    font-size: 17px;
    font-weight: 700;
    color: var(--c2p-ink);
}

.swal2-html-container {
    font-size: 13px;
    color: var(--c2p-ink2);
}

.swal2-confirm.swal2-styled {
    background: var(--c2p-coral) !important;
    border-radius: 6px;
    font-weight: 600;
    font-size: 12px;
}

.swal2-cancel.swal2-styled {
    background: var(--c2p-bg2) !important;
    color: var(--c2p-ink2) !important;
    border: 1px solid var(--c2p-border2) !important;
    border-radius: 6px;
    font-weight: 500;
    font-size: 12px;
}

/* ═══ PIE' DI PAGINA ════════════════════════════════════════════════════ */

.mm-footer {
    background: var(--c2p-bg);
    border-top: 1px solid var(--c2p-border);
    font-size: 11px;
    color: var(--c2p-ink3);
}

.c2p-link {
    color: var(--c2p-coral);
    font-weight: 600;
    text-decoration: none;
}

    .c2p-link:hover {
        color: var(--c2p-coral-d);
        text-decoration: underline;
    }

/* ═══════════════════════════════════════════════════════════════════════════
   AREA ANALISI

   Riproduce il layout del sistema legacy: tre colonne 252px | 1fr | 310px.
   La disposizione non e' arbitraria — si guarda il modello al centro e si
   confrontano i numeri a sinistra con i candidati a destra senza cambiare
   schermata. E' l'unica pagina dove serve tutto lo spazio verticale, quindi
   scrolla per colonna e non nel suo insieme.
   ═══════════════════════════════════════════════════════════════════════════ */

.c2p-workspace {
    display: grid;
    grid-template-columns: 252px 1fr 310px;
    height: calc(100vh - 190px);
    min-height: 480px;
    overflow: hidden;
    background: var(--c2p-bg);
    border-radius: var(--c2p-r);
    border: 1px solid var(--c2p-border);
}

@media (max-width: 1200px) {
    /* Sotto i 1200px le tre colonne diventano illeggibili: si impila, e il
       viewer resta comunque il blocco piu' alto. */
    .c2p-workspace {
        grid-template-columns: 1fr;
        height: auto;
    }
}

.c2p-col {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border-right: 1px solid var(--c2p-border);
}

.c2p-col-right {
    border-right: none;
}

.c2p-col-head {
    padding: 9px 14px;
    border-bottom: 1px solid var(--c2p-border);
    background: var(--c2p-bg2);
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 1.6px;
    text-transform: uppercase;
    color: var(--c2p-ink3);
    display: flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
}

.c2p-col-body {
    padding: 12px 14px;
    overflow-y: auto;
    border-bottom: 1px solid var(--c2p-border);
}

.c2p-col-body--grow {
    flex: 1;
}

.c2p-col-foot {
    padding: 12px 14px;
    border-top: 1px solid var(--c2p-border);
    flex-shrink: 0;
}

/* ── Viewer 3D ────────────────────────────────────────────────────────── */

.c2p-col-center {
    position: relative;
}

.c2p-viewer {
    position: relative;
    flex: 1;
    min-height: 380px;
    /* Blu notte come nel legacy: un fondo scuro fa risaltare il pezzo e riduce
       l'affaticamento su una schermata che si tiene aperta a lungo. */
    background: #0e1420;
}

    .c2p-viewer canvas {
        display: block;
    }

/* ── Annotazioni dei fori ─────────────────────────────────────────────────
   In alto a sinistra: l'angolo opposto ai comandi di sezione, che stanno in
   basso, e libero dalla terna degli assi, che sta in basso a destra.        */

.c2p-holes-panel {
    position: absolute;
    top: 12px;
    left: 12px;
    z-index: 3;
    background: rgba(0, 0, 0, .65);
    border: 1px solid rgba(255, 255, 255, .12);
    border-radius: var(--c2p-r);
    padding: 6px 8px;
}

.c2p-holes-toggle {
    display: flex;
    align-items: center;
    gap: 7px;
    background: none;
    border: none;
    color: #8892a4;
    font-family: var(--c2p-font-mono);
    font-size: 10px;
    letter-spacing: 1.4px;
    line-height: 1;
    padding: 2px 2px;
    cursor: pointer;
}

    .c2p-holes-toggle:hover:not(:disabled) {
        color: #fff;
    }

    .c2p-holes-toggle:disabled {
        opacity: .45;
        cursor: default;
    }

    .c2p-holes-toggle.attivo {
        color: var(--c2p-coral);
    }

.c2p-holes-count {
    font-family: var(--c2p-font-mono);
    font-size: 10px;
    letter-spacing: 0;
    color: #d5dae5;
    background: rgba(255, 255, 255, .1);
    border-radius: 3px;
    padding: 2px 5px;
    margin-left: auto;
}

/* Una riga per lavorazione. Il filtro sta qui e non nella colonna di sinistra
   perché si usa guardando il pezzo: spegnere le maschiature per vedere le
   forature sotto è un gesto che si fa a occhi sul modello, non sulla tabella. */

.c2p-holes-types {
    display: flex;
    flex-direction: column;
    gap: 1px;
    margin-top: 6px;
    padding-top: 6px;
    border-top: 1px solid rgba(255, 255, 255, .12);
}

.c2p-holes-type {
    display: flex;
    align-items: center;
    gap: 7px;
    min-width: 168px;
    background: none;
    border: none;
    border-radius: 3px;
    padding: 3px 4px;
    cursor: pointer;
    /* Spento di default: l'aspetto acceso lo dà .attivo, così una riga che il JS
       non ha ancora inizializzato non mente dicendo di essere visibile. */
    opacity: .4;
}

    .c2p-holes-type:hover {
        background: rgba(255, 255, 255, .08);
    }

    .c2p-holes-type.attivo {
        opacity: 1;
    }

.c2p-holes-dot {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    flex-shrink: 0;
}

.c2p-holes-type-label {
    font-size: 11px;
    color: #d5dae5;
    white-space: nowrap;
}

/* ── Misura punto-punto ───────────────────────────────────────────────────
   In alto a destra: gli altri tre angoli del viewer sono già occupati da
   fori, sezione e terna degli assi.                                        */

.c2p-measure-panel {
    position: absolute;
    top: 12px;
    right: 12px;
    z-index: 3;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 6px;
    background: rgba(0, 0, 0, .65);
    border: 1px solid rgba(255, 255, 255, .12);
    border-radius: var(--c2p-r);
    padding: 6px 8px;
}

.c2p-measure-toggle,
.c2p-measure-clear {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    background: none;
    border: none;
    color: #8892a4;
    font-family: var(--c2p-font-mono);
    font-size: 10px;
    letter-spacing: 1.4px;
    line-height: 1;
    padding: 2px;
    cursor: pointer;
}

    .c2p-measure-toggle:hover,
    .c2p-measure-clear:hover {
        color: #fff;
    }

    .c2p-measure-toggle.attivo {
        color: var(--c2p-coral);
    }

.c2p-measure-clear {
    letter-spacing: .6px;
    border-top: 1px solid rgba(255, 255, 255, .12);
    padding-top: 6px;
}

/* Riga di stato: dice che cosa si sta agganciando e, a misura aperta, quanto
   misura in questo istante. È l'unico feedback che distingue un aggancio su un
   centro foro — esatto — da uno sulla superficie, che esatto non è. */
.c2p-measure-info {
    font-family: var(--c2p-font-mono);
    font-size: 10px;
    color: #d5dae5;
    background: rgba(255, 255, 255, .08);
    border-radius: 3px;
    padding: 4px 6px;
    text-align: center;
    white-space: nowrap;
}

/* Le quote sono HTML sopra la tela, non oggetti 3D: restano leggibili a
   qualsiasi distanza e non finiscono dentro il pezzo. Il transform le centra
   sul punto medio del segmento, che è dove il render loop le posiziona. */
.c2p-measure-label {
    position: absolute;
    z-index: 4;
    pointer-events: none;
    transform: translate(-50%, -50%);
    background: #ffd23f;
    color: #1a1a1a;
    border-radius: 3px;
    padding: 2px 6px;
    font-family: var(--c2p-font-mono);
    font-size: 11px;
    font-weight: 500;
    line-height: 1.3;
    white-space: nowrap;
}

/* L'etichetta segue il puntatore, quindi non deve mai intercettarlo: senza
   pointer-events none si metterebbe fra il mouse e il foro che sta descrivendo. */
.c2p-hole-tooltip {
    position: absolute;
    z-index: 4;
    pointer-events: none;
    background: rgba(0, 0, 0, .85);
    border: 1px solid rgba(255, 255, 255, .18);
    border-radius: 4px;
    padding: 5px 8px;
    font-family: var(--c2p-font-mono);
    font-size: 11px;
    line-height: 1;
    color: #fff;
    white-space: nowrap;
}

/* ── Comandi di sezione, in sovrimpressione sul viewer ────────────────────
   Stanno in basso a sinistra e non nella barra sotto: guardando il taglio si
   muove lo slider di continuo, e averlo lontano dal pezzo costringerebbe a
   spostare lo sguardo a ogni piccolo aggiustamento.                        */

.c2p-section-panel {
    position: absolute;
    left: 12px;
    bottom: 12px;
    z-index: 3;
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 8px 10px;
    background: rgba(0, 0, 0, .65);
    border: 1px solid rgba(255, 255, 255, .12);
    border-radius: var(--c2p-r);
}

.c2p-section-row {
    display: flex;
    align-items: center;
    gap: 4px;
}

.c2p-section-title {
    font-family: var(--c2p-font-mono);
    font-size: 9px;
    letter-spacing: 1.4px;
    color: #8892a4;
    margin-right: auto;
}

.c2p-section-axis,
.c2p-section-btn {
    background: rgba(255, 255, 255, .08);
    border: 1px solid rgba(255, 255, 255, .14);
    color: #d5dae5;
    border-radius: 4px;
    font-family: var(--c2p-font-mono);
    font-size: 11px;
    line-height: 1;
    padding: 5px 8px;
    cursor: pointer;
}

    .c2p-section-axis:hover,
    .c2p-section-btn:hover {
        background: rgba(255, 255, 255, .16);
        color: #fff;
    }

    .c2p-section-axis.attivo {
        background: var(--c2p-coral);
        border-color: var(--c2p-coral);
        color: #fff;
    }

.c2p-section-slider {
    width: 150px;
    accent-color: var(--c2p-coral);
    cursor: pointer;
}

    .c2p-section-slider:disabled {
        opacity: .4;
        cursor: default;
    }

.c2p-viewer-empty {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    color: #55607a;
    font-size: 12px;
}

    .c2p-viewer-empty i {
        font-size: 40px;
    }

.c2p-viewer-bar {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 14px;
    border-top: 1px solid var(--c2p-border);
    background: var(--c2p-bg2);
    flex-shrink: 0;
}

.c2p-file-name {
    font-size: 11px;
    font-weight: 600;
    color: var(--c2p-ink2);
}

/* ── Caricamento del file ─────────────────────────────────────────────── */

.c2p-dropzone {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 420px;
    padding: 30px;
}

.c2p-dropzone-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 48px 64px;
    border: 2px dashed var(--c2p-border2);
    border-radius: var(--c2p-r3);
    background: var(--c2p-bg);
    transition: border-color .15s, background .15s;
}

.c2p-dropzone.is-over .c2p-dropzone-inner {
    border-color: var(--c2p-coral);
    background: var(--c2p-coral-bg);
}

.c2p-dropzone-icon {
    font-size: 46px;
    color: var(--c2p-ink3);
}

.c2p-dropzone-title {
    font-size: 15px;
    font-weight: 700;
    color: var(--c2p-ink);
}

.c2p-dropzone-sub,
.c2p-dropzone-note {
    font-size: 11px;
    color: var(--c2p-ink3);
}

.c2p-dropzone-btn {
    cursor: pointer;
    margin: 4px 0;
}

/* ── Scelta del componente ────────────────────────────────────────────── */

.c2p-components {
    padding: 20px;
}

.c2p-components-head,
.c2p-components-foot {
    margin-bottom: 14px;
}

.c2p-component-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 10px;
    margin-bottom: 16px;
}

.c2p-component-card {
    display: flex;
    flex-direction: column;
    gap: 4px;
    align-items: flex-start;
    background: var(--c2p-bg);
    border: 1px solid var(--c2p-border);
    border-radius: var(--c2p-r);
    padding: 12px 14px;
    cursor: pointer;
    box-shadow: var(--c2p-sh);
    transition: border-color .15s, transform .1s;
}

    .c2p-component-card:hover {
        border-color: var(--c2p-coral);
        transform: translateY(-1px);
    }

.c2p-component-name {
    font-size: 12px;
    font-weight: 600;
    color: var(--c2p-ink);
}

.c2p-component-meta {
    font-size: 10px;
    color: var(--c2p-ink3);
}

/* ── Righe di statistica nella colonna sinistra ───────────────────────── */

.c2p-stat-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 8px;
    padding: 3px 0;
    font-size: 11px;
    border-bottom: 1px dotted var(--c2p-border);
}

.c2p-stat-row-label {
    color: var(--c2p-ink3);
}

.c2p-stat-row-value {
    font-weight: 600;
    color: var(--c2p-ink);
    text-align: right;
}

/* ── Volume: misurato o stimato ───────────────────────────────────────────
   Il volume di OpenCascade e la stima del parser sono grandezze diverse, e il
   volume scala il costo del pezzo simile: l'etichetta non è decorativa, dice a
   chi preventiva se sta guardando una misura o un'ipotesi.                  */

.c2p-badge {
    display: inline-block;
    margin-left: 6px;
    padding: 0 5px;
    border-radius: 8px;
    font-size: 9px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    vertical-align: middle;
}

.c2p-badge-misurato {
    color: #15803d;
    background: #dcfce7;
}

.c2p-badge-stimato {
    color: #b45309;
    background: #fef3c7;
}

.c2p-volume-note {
    margin-top: 6px;
    font-size: 10px;
    line-height: 1.4;
    color: var(--c2p-ink3);
}

/* ── Barre delle superfici e dei fattori di confidenza ────────────────── */

.c2p-surf-row,
.c2p-factor {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 3px;
}

.c2p-surf-label,
.c2p-factor-label {
    font-size: 10px;
    color: var(--c2p-ink3);
    width: 76px;
    flex-shrink: 0;
}

.c2p-surf-bar,
.c2p-factor-bar {
    flex: 1;
    height: 6px;
    background: var(--c2p-bg3);
    border-radius: 3px;
    overflow: hidden;
}

    .c2p-surf-bar > span,
    .c2p-factor-bar > span {
        display: block;
        height: 100%;
        border-radius: 3px;
    }

.c2p-factor-bar > span {
    background: var(--c2p-coral);
}

.c2p-surf-pct,
.c2p-factor-pct {
    font-size: 9px;
    color: var(--c2p-ink3);
    width: 32px;
    text-align: right;
    flex-shrink: 0;
}

/* ── Fori ─────────────────────────────────────────────────────────────── */

.c2p-hole-row {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 3px 0;
    font-size: 11px;
}

.c2p-hole-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}

.c2p-hole-label {
    flex: 1;
    color: var(--c2p-ink2);
}

.c2p-hole-count {
    font-weight: 700;
    color: var(--c2p-ink);
}

.c2p-hole-diameters {
    font-size: 9px;
    color: var(--c2p-ink3);
    padding-left: 14px;
    margin-bottom: 4px;
}

/* ── Card dei pezzi simili ────────────────────────────────────────────── */

.c2p-match-card {
    position: relative;
    background: var(--c2p-bg);
    border: 1px solid var(--c2p-border);
    border-radius: var(--c2p-r);
    padding: 9px 11px;
    margin-bottom: 7px;
    transition: border-color .15s;
}

    .c2p-match-card:hover {
        border-color: var(--c2p-coral-b);
    }

.c2p-match-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.c2p-match-name {
    font-size: 12px;
    font-weight: 600;
    color: var(--c2p-ink);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.c2p-match-meta {
    font-size: 10px;
    color: var(--c2p-ink3);
    margin-top: 2px;
}

.c2p-match-actions {
    position: absolute;
    right: 9px;
    bottom: 7px;
}

/* ── Tabella della proiezione ─────────────────────────────────────────── */

.c2p-proj-table {
    font-size: 12px;
}

    .c2p-proj-table thead th {
        font-size: 9px;
        font-weight: 700;
        letter-spacing: .6px;
        text-transform: uppercase;
        color: var(--c2p-ink3);
        border-bottom: 1px solid var(--c2p-border2);
    }

.c2p-proj-total td {
    border-top: 2px solid var(--c2p-border2);
    font-weight: 700;
    color: var(--c2p-coral);
}