/* Font self-hosted (Fontsource 5.3.0, licenza OFL in assets/fonts/OFL.txt): la CSP ha font-src 'self'.
   AssetMapper riscrive gli url() relativi in percorsi versionati. */
@font-face {
    font-family: 'IBM Plex Sans';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url("../fonts/ibm-plex-sans-latin-400-normal-dCzU-sz.woff2") format('woff2');
    unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

@font-face {
    font-family: 'IBM Plex Sans';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url("../fonts/ibm-plex-sans-latin-500-normal-mSIWrNY.woff2") format('woff2');
    unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

@font-face {
    font-family: 'IBM Plex Sans';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url("../fonts/ibm-plex-sans-latin-600-normal-pA5FLX3.woff2") format('woff2');
    unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

@font-face {
    font-family: 'IBM Plex Sans';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url("../fonts/ibm-plex-sans-latin-700-normal-zdWo2v5.woff2") format('woff2');
    unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

@font-face {
    font-family: 'IBM Plex Sans';
    font-style: italic;
    font-weight: 400;
    font-display: swap;
    src: url("../fonts/ibm-plex-sans-latin-400-italic-eMjXh-T.woff2") format('woff2');
    unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

@font-face {
    font-family: 'IBM Plex Sans';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url("../fonts/ibm-plex-sans-latin-ext-400-normal-sJxWBUz.woff2") format('woff2');
    unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

@font-face {
    font-family: 'IBM Plex Sans';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url("../fonts/ibm-plex-sans-latin-ext-500-normal-WZ6O2PS.woff2") format('woff2');
    unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

@font-face {
    font-family: 'IBM Plex Sans';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url("../fonts/ibm-plex-sans-latin-ext-600-normal-EIcGoea.woff2") format('woff2');
    unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

@font-face {
    font-family: 'IBM Plex Sans';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url("../fonts/ibm-plex-sans-latin-ext-700-normal-RYRhNJe.woff2") format('woff2');
    unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

@font-face {
    font-family: 'IBM Plex Sans';
    font-style: italic;
    font-weight: 400;
    font-display: swap;
    src: url("../fonts/ibm-plex-sans-latin-ext-400-italic-LxG68H2.woff2") format('woff2');
    unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

@font-face {
    font-family: 'IBM Plex Mono';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url("../fonts/ibm-plex-mono-latin-400-normal-78NWkmx.woff2") format('woff2');
    unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

@font-face {
    font-family: 'IBM Plex Mono';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url("../fonts/ibm-plex-mono-latin-500-normal-QJNNIVc.woff2") format('woff2');
    unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

@font-face {
    font-family: 'IBM Plex Mono';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url("../fonts/ibm-plex-mono-latin-ext-400-normal-WlFXyXd.woff2") format('woff2');
    unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

@font-face {
    font-family: 'IBM Plex Mono';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url("../fonts/ibm-plex-mono-latin-ext-500-normal-Uqu9TNw.woff2") format('woff2');
    unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

/* Design token «Operativo»: tutti i token stanno in questi due blocchi (tema chiaro e scuro).
   Nessun colore esadecimale fuori da qui. Il tema scuro si attiva con [data-bs-theme='dark']
   sull'<html> (tema_iniziale.js) e sovrascrive tutti i token Bootstrap del tema chiaro. */
:root {
    /* Superfici */
    --ergo-bg-soft: #eef1f0;
    --ergo-bg-soft-alt: #e3f2ee;
    --ergo-surface: #ffffff;
    --bs-body-bg: #ffffff;
    --bs-body-bg-rgb: 255, 255, 255;
    --bs-secondary-bg: #edf0ef;
    --bs-secondary-bg-rgb: 237, 240, 239;
    --bs-tertiary-bg: #f8faf9;
    --bs-tertiary-bg-rgb: 248, 250, 249;

    /* Testo */
    --bs-body-color: #17201d;
    --bs-body-color-rgb: 23, 32, 29;
    --bs-emphasis-color: #17201d;
    --bs-emphasis-color-rgb: 23, 32, 29;
    --bs-heading-color: #17201d;
    --bs-secondary-color: #4f5d58;
    --bs-secondary-color-rgb: 79, 93, 88;
    --ergo-text-muted: #4f5d58;
    --ergo-text-disabled: #8f9a96;

    /* Bordi e raggi */
    --bs-border-color: #d9dfdc;
    --bs-border-color-translucent: #d9dfdc;
    --ergo-border: #d9dfdc;
    --ergo-border-campo: #cfd7d3;
    --bs-border-radius: 6px;
    --bs-border-radius-sm: 4px;
    --bs-border-radius-lg: 8px;
    --bs-border-radius-xl: 8px;

    /* Primario */
    --bs-primary: #00725a;
    --bs-primary-rgb: 0, 114, 90;
    --bs-link-color: #00725a;
    --bs-link-color-rgb: 0, 114, 90;
    --bs-link-hover-color: #00543f;
    --bs-link-hover-color-rgb: 0, 84, 63;
    --bs-primary-text-emphasis: #00543f;
    --bs-primary-bg-subtle: #e3f2ee;
    --bs-primary-border-subtle: #a6d3c9;
    --bs-focus-ring-color: rgba(0, 114, 90, 0.25);
    --ergo-primario-hover: #00543f;
    --ergo-su-primario: #ffffff;
    --ergo-secondary: #0c4f7d;

    /* Stati */
    /* Colori di stato: pieno, subtle (fondo), bordo, testo su subtle, testo su pieno (-su), hover. */
    --ergo-stato-in-corso: #00725a;
    --ergo-stato-in-corso-subtle: #e3f2ee;
    --ergo-stato-in-corso-bordo: #a6d3c9;
    --ergo-stato-in-corso-testo: #00543f;
    --ergo-stato-in-corso-su: #ffffff;
    --ergo-stato-in-corso-hover: #00543f;
    --ergo-stato-a-rischio: #e67e22;
    --ergo-stato-a-rischio-subtle: #fdeedd;
    --ergo-stato-a-rischio-bordo: #f3c79a;
    --ergo-stato-a-rischio-testo: #a34a00;
    --ergo-stato-a-rischio-su: #17201d;
    --ergo-stato-a-rischio-hover: #cf6d14;
    --ergo-stato-bloccante: #c0392b;
    --ergo-stato-bloccante-subtle: #fbe3e0;
    --ergo-stato-bloccante-bordo: #f0b8b1;
    --ergo-stato-bloccante-testo: #b03024;
    --ergo-stato-bloccante-su: #ffffff;
    --ergo-stato-bloccante-hover: #a93226;
    --ergo-stato-in-pausa: #6c757d;
    --ergo-stato-in-pausa-subtle: #e1e6e4;
    --ergo-stato-in-pausa-bordo: #b6c1bc;
    --ergo-stato-in-pausa-testo: #3d4442;
    --ergo-stato-in-pausa-su: #ffffff;
    --ergo-stato-in-pausa-hover: #5a636a;
    --ergo-stato-completato: #0c4f7d;
    --ergo-stato-completato-subtle: #dbe9f3;
    --ergo-stato-completato-bordo: #b7d8ec;
    --ergo-stato-completato-testo: #0c4f7d;
    --ergo-stato-completato-su: #ffffff;
    --ergo-stato-completato-hover: #0a3f64;

    /* Colori semantici Bootstrap rimappati sugli stati. */
    --bs-form-valid-color: var(--ergo-stato-in-corso-testo);
    --bs-form-valid-border-color: var(--ergo-stato-in-corso);
    --bs-form-invalid-color: var(--ergo-stato-bloccante-testo);
    --bs-form-invalid-border-color: var(--ergo-stato-bloccante);
    --bs-success: var(--ergo-stato-in-corso);
    --bs-success-rgb: 0, 114, 90;
    --bs-success-text-emphasis: var(--ergo-stato-in-corso-testo);
    --bs-success-bg-subtle: var(--ergo-stato-in-corso-subtle);
    --bs-success-border-subtle: var(--ergo-stato-in-corso-bordo);
    --bs-warning: var(--ergo-stato-a-rischio);
    --bs-warning-rgb: 230, 126, 34;
    --bs-warning-text-emphasis: var(--ergo-stato-a-rischio-testo);
    --bs-warning-bg-subtle: var(--ergo-stato-a-rischio-subtle);
    --bs-warning-border-subtle: var(--ergo-stato-a-rischio-bordo);
    --bs-danger: var(--ergo-stato-bloccante);
    --bs-danger-rgb: 192, 57, 43;
    --bs-danger-text-emphasis: var(--ergo-stato-bloccante-testo);
    --bs-danger-bg-subtle: var(--ergo-stato-bloccante-subtle);
    --bs-danger-border-subtle: var(--ergo-stato-bloccante-bordo);
    --bs-secondary: var(--ergo-stato-in-pausa);
    --bs-secondary-rgb: 108, 117, 125;
    --bs-secondary-text-emphasis: var(--ergo-stato-in-pausa-testo);
    --bs-secondary-bg-subtle: var(--ergo-stato-in-pausa-subtle);
    --bs-secondary-border-subtle: var(--ergo-stato-in-pausa-bordo);
    --bs-info: var(--ergo-stato-completato);
    --bs-info-rgb: 12, 79, 125;
    --bs-info-text-emphasis: var(--ergo-stato-completato-testo);
    --bs-info-bg-subtle: var(--ergo-stato-completato-subtle);
    --bs-info-border-subtle: var(--ergo-stato-completato-bordo);

    /* Ombre */
    --bs-box-shadow: none;
    --bs-box-shadow-sm: none;
    --bs-box-shadow-inset: none;
    --bs-box-shadow-lg: 0 8px 24px rgba(16, 32, 27, 0.12);

    /* Tipografia */
    --ergo-font-sans: 'IBM Plex Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    --ergo-font-mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    --bs-body-font-family: var(--ergo-font-sans);
    --bs-font-sans-serif: var(--ergo-font-sans);
    --bs-font-monospace: var(--ergo-font-mono);
    --bs-body-font-size: 0.875rem;
    --bs-body-line-height: 1.5;

    /* Sidebar: scura in entrambi i temi, definita una sola volta e non ridefinita in [data-bs-theme='dark']. */
    --ergo-sidebar-bg: #10201b;
    --ergo-sidebar-testo: #c9d6d1;
    --ergo-sidebar-testo-attivo: #ffffff;
    --ergo-sidebar-testo-secondario: #8ea69d;
    --ergo-sidebar-attivo: #1d3a32;
    --ergo-sidebar-hover: #17302a;
    --ergo-sidebar-filetto: #2bb894;
    --ergo-sidebar-separatore: #22352f;
    --ergo-sidebar-avatar: #2a4a6b;
    --ergo-sidebar-monogramma: #0b1f1a;
    --ergo-sidebar-allerta: #c0392b;
    --ergo-sidebar-allerta-testo: #ffffff;

    /* Gravità delle rilevazioni (griglia violazioni): palette propria, non coincide con gli stati. */
    --ergo-impatto-bloccante: #c0392b;
    --ergo-impatto-alto: #e67e22;
    --ergo-impatto-medio: #f1c40f;
    --ergo-impatto-basso: #6c757d;
    --ergo-impatto-testo-chiaro: #ffffff;
    --ergo-impatto-testo-alto: #3a1c00;
    --ergo-impatto-testo-medio: #4d3b00;
}

[data-bs-theme='dark'] {
    /* Superfici */
    --ergo-bg-soft: #0b1f1a;
    --ergo-bg-soft-alt: #1d3a32;
    --ergo-surface: #10201b;
    --bs-body-bg: #10201b;
    --bs-body-bg-rgb: 16, 32, 27;
    --bs-secondary-bg: #162a24;
    --bs-secondary-bg-rgb: 22, 42, 36;
    --bs-tertiary-bg: #132620;
    --bs-tertiary-bg-rgb: 19, 38, 32;

    /* Testo */
    --bs-body-color: #e3ebe8;
    --bs-body-color-rgb: 227, 235, 232;
    --bs-emphasis-color: #e3ebe8;
    --bs-emphasis-color-rgb: 227, 235, 232;
    --bs-heading-color: #e3ebe8;
    --bs-secondary-color: #a6b8b1;
    --bs-secondary-color-rgb: 166, 184, 177;
    --ergo-text-muted: #a6b8b1;
    --ergo-text-disabled: #6c7f78;

    /* Bordi e raggi */
    --bs-border-color: #22352f;
    --bs-border-color-translucent: #22352f;
    --ergo-border: #22352f;
    --ergo-border-campo: #2c443c;

    /* Primario */
    --bs-primary: #2bb894;
    --bs-primary-rgb: 43, 184, 148;
    --bs-link-color: #2bb894;
    --bs-link-color-rgb: 43, 184, 148;
    --bs-link-hover-color: #58c9ab;
    --bs-link-hover-color-rgb: 88, 201, 171;
    --bs-primary-text-emphasis: #7fd6bf;
    --bs-primary-bg-subtle: #0d2e26;
    --bs-primary-border-subtle: #14614d;
    --bs-focus-ring-color: rgba(43, 184, 148, 0.3);
    --ergo-primario-hover: #58c9ab;
    --ergo-su-primario: #0b1f1a;
    --ergo-secondary: #4d9fd6;

    /* Stati */
    /* Colori di stato: pieno, subtle (fondo), bordo, testo su subtle, testo su pieno (-su), hover. */
    --ergo-stato-in-corso: #2bb894;
    --ergo-stato-in-corso-subtle: #0d2e26;
    --ergo-stato-in-corso-bordo: #14614d;
    --ergo-stato-in-corso-testo: #7fd6bf;
    --ergo-stato-in-corso-su: #0b1f1a;
    --ergo-stato-in-corso-hover: #58c9ab;
    --ergo-stato-a-rischio: #f0a35e;
    --ergo-stato-a-rischio-subtle: #3a2510;
    --ergo-stato-a-rischio-bordo: #7a4a1c;
    --ergo-stato-a-rischio-testo: #f6c08f;
    --ergo-stato-a-rischio-su: #0b1f1a;
    --ergo-stato-a-rischio-hover: #f4b57f;
    --ergo-stato-bloccante: #ef7f73;
    --ergo-stato-bloccante-subtle: #3d1a17;
    --ergo-stato-bloccante-bordo: #7d3029;
    --ergo-stato-bloccante-testo: #f5aaa2;
    --ergo-stato-bloccante-su: #0b1f1a;
    --ergo-stato-bloccante-hover: #f39a90;
    --ergo-stato-in-pausa: #a9b4b0;
    --ergo-stato-in-pausa-subtle: #22302b;
    --ergo-stato-in-pausa-bordo: #3d4f48;
    --ergo-stato-in-pausa-testo: #c9d2cf;
    --ergo-stato-in-pausa-su: #0b1f1a;
    --ergo-stato-in-pausa-hover: #c1cac6;
    --ergo-stato-completato: #6db3e0;
    --ergo-stato-completato-subtle: #102a3d;
    --ergo-stato-completato-bordo: #24506f;
    --ergo-stato-completato-testo: #a6d0ec;
    --ergo-stato-completato-su: #0b1f1a;
    --ergo-stato-completato-hover: #8cc4e8;

    /* Colori semantici Bootstrap rimappati sugli stati. */
    --bs-form-valid-color: var(--ergo-stato-in-corso-testo);
    --bs-form-valid-border-color: var(--ergo-stato-in-corso);
    --bs-form-invalid-color: var(--ergo-stato-bloccante-testo);
    --bs-form-invalid-border-color: var(--ergo-stato-bloccante);
    --bs-success: var(--ergo-stato-in-corso);
    --bs-success-rgb: 43, 184, 148;
    --bs-success-text-emphasis: var(--ergo-stato-in-corso-testo);
    --bs-success-bg-subtle: var(--ergo-stato-in-corso-subtle);
    --bs-success-border-subtle: var(--ergo-stato-in-corso-bordo);
    --bs-warning: var(--ergo-stato-a-rischio);
    --bs-warning-rgb: 240, 163, 94;
    --bs-warning-text-emphasis: var(--ergo-stato-a-rischio-testo);
    --bs-warning-bg-subtle: var(--ergo-stato-a-rischio-subtle);
    --bs-warning-border-subtle: var(--ergo-stato-a-rischio-bordo);
    --bs-danger: var(--ergo-stato-bloccante);
    --bs-danger-rgb: 239, 127, 115;
    --bs-danger-text-emphasis: var(--ergo-stato-bloccante-testo);
    --bs-danger-bg-subtle: var(--ergo-stato-bloccante-subtle);
    --bs-danger-border-subtle: var(--ergo-stato-bloccante-bordo);
    --bs-secondary: var(--ergo-stato-in-pausa);
    --bs-secondary-rgb: 169, 180, 176;
    --bs-secondary-text-emphasis: var(--ergo-stato-in-pausa-testo);
    --bs-secondary-bg-subtle: var(--ergo-stato-in-pausa-subtle);
    --bs-secondary-border-subtle: var(--ergo-stato-in-pausa-bordo);
    --bs-info: var(--ergo-stato-completato);
    --bs-info-rgb: 109, 179, 224;
    --bs-info-text-emphasis: var(--ergo-stato-completato-testo);
    --bs-info-bg-subtle: var(--ergo-stato-completato-subtle);
    --bs-info-border-subtle: var(--ergo-stato-completato-bordo);

    /* Ombre */
    --bs-box-shadow: none;
    --bs-box-shadow-sm: none;
    --bs-box-shadow-inset: none;
    --bs-box-shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.5);

    /* Outline dei bottoni nel tema scuro: gli stati scuri, non i colori Bootstrap. */
}

/* Bottoni: il CSS compilato di Bootstrap scrive colori letterali nelle variabili di classe, quindi
   rimappare --bs-success & co. non basta. Pieno, hover e testo-su-pieno vengono dai token di stato. */
.btn-success {
    --bs-btn-color: var(--ergo-stato-in-corso-su);
    --bs-btn-bg: var(--ergo-stato-in-corso);
    --bs-btn-border-color: var(--ergo-stato-in-corso);
    --bs-btn-hover-color: var(--ergo-stato-in-corso-su);
    --bs-btn-hover-bg: var(--ergo-stato-in-corso-hover);
    --bs-btn-hover-border-color: var(--ergo-stato-in-corso-hover);
    --bs-btn-focus-shadow-rgb: var(--bs-success-rgb);
    --bs-btn-active-color: var(--ergo-stato-in-corso-su);
    --bs-btn-active-bg: var(--ergo-stato-in-corso-hover);
    --bs-btn-active-border-color: var(--ergo-stato-in-corso-hover);
    --bs-btn-disabled-color: var(--ergo-stato-in-corso-su);
    --bs-btn-disabled-bg: var(--ergo-stato-in-corso);
    --bs-btn-disabled-border-color: var(--ergo-stato-in-corso);
}

.btn-outline-success {
    --bs-btn-color: var(--ergo-stato-in-corso-testo);
    --bs-btn-border-color: var(--ergo-stato-in-corso);
    --bs-btn-hover-color: var(--ergo-stato-in-corso-su);
    --bs-btn-hover-bg: var(--ergo-stato-in-corso);
    --bs-btn-hover-border-color: var(--ergo-stato-in-corso);
    --bs-btn-focus-shadow-rgb: var(--bs-success-rgb);
    --bs-btn-active-color: var(--ergo-stato-in-corso-su);
    --bs-btn-active-bg: var(--ergo-stato-in-corso);
    --bs-btn-active-border-color: var(--ergo-stato-in-corso);
    --bs-btn-disabled-color: var(--ergo-stato-in-corso);
    --bs-btn-disabled-border-color: var(--ergo-stato-in-corso);
}

.text-bg-success {
    color: var(--ergo-stato-in-corso-su) !important;
}

.btn-warning {
    --bs-btn-color: var(--ergo-stato-a-rischio-su);
    --bs-btn-bg: var(--ergo-stato-a-rischio);
    --bs-btn-border-color: var(--ergo-stato-a-rischio);
    --bs-btn-hover-color: var(--ergo-stato-a-rischio-su);
    --bs-btn-hover-bg: var(--ergo-stato-a-rischio-hover);
    --bs-btn-hover-border-color: var(--ergo-stato-a-rischio-hover);
    --bs-btn-focus-shadow-rgb: var(--bs-warning-rgb);
    --bs-btn-active-color: var(--ergo-stato-a-rischio-su);
    --bs-btn-active-bg: var(--ergo-stato-a-rischio-hover);
    --bs-btn-active-border-color: var(--ergo-stato-a-rischio-hover);
    --bs-btn-disabled-color: var(--ergo-stato-a-rischio-su);
    --bs-btn-disabled-bg: var(--ergo-stato-a-rischio);
    --bs-btn-disabled-border-color: var(--ergo-stato-a-rischio);
}

.btn-outline-warning {
    --bs-btn-color: var(--ergo-stato-a-rischio-testo);
    --bs-btn-border-color: var(--ergo-stato-a-rischio);
    --bs-btn-hover-color: var(--ergo-stato-a-rischio-su);
    --bs-btn-hover-bg: var(--ergo-stato-a-rischio);
    --bs-btn-hover-border-color: var(--ergo-stato-a-rischio);
    --bs-btn-focus-shadow-rgb: var(--bs-warning-rgb);
    --bs-btn-active-color: var(--ergo-stato-a-rischio-su);
    --bs-btn-active-bg: var(--ergo-stato-a-rischio);
    --bs-btn-active-border-color: var(--ergo-stato-a-rischio);
    --bs-btn-disabled-color: var(--ergo-stato-a-rischio);
    --bs-btn-disabled-border-color: var(--ergo-stato-a-rischio);
}

.text-bg-warning {
    color: var(--ergo-stato-a-rischio-su) !important;
}

.btn-danger {
    --bs-btn-color: var(--ergo-stato-bloccante-su);
    --bs-btn-bg: var(--ergo-stato-bloccante);
    --bs-btn-border-color: var(--ergo-stato-bloccante);
    --bs-btn-hover-color: var(--ergo-stato-bloccante-su);
    --bs-btn-hover-bg: var(--ergo-stato-bloccante-hover);
    --bs-btn-hover-border-color: var(--ergo-stato-bloccante-hover);
    --bs-btn-focus-shadow-rgb: var(--bs-danger-rgb);
    --bs-btn-active-color: var(--ergo-stato-bloccante-su);
    --bs-btn-active-bg: var(--ergo-stato-bloccante-hover);
    --bs-btn-active-border-color: var(--ergo-stato-bloccante-hover);
    --bs-btn-disabled-color: var(--ergo-stato-bloccante-su);
    --bs-btn-disabled-bg: var(--ergo-stato-bloccante);
    --bs-btn-disabled-border-color: var(--ergo-stato-bloccante);
}

.btn-outline-danger {
    --bs-btn-color: var(--ergo-stato-bloccante-testo);
    --bs-btn-border-color: var(--ergo-stato-bloccante);
    --bs-btn-hover-color: var(--ergo-stato-bloccante-su);
    --bs-btn-hover-bg: var(--ergo-stato-bloccante);
    --bs-btn-hover-border-color: var(--ergo-stato-bloccante);
    --bs-btn-focus-shadow-rgb: var(--bs-danger-rgb);
    --bs-btn-active-color: var(--ergo-stato-bloccante-su);
    --bs-btn-active-bg: var(--ergo-stato-bloccante);
    --bs-btn-active-border-color: var(--ergo-stato-bloccante);
    --bs-btn-disabled-color: var(--ergo-stato-bloccante);
    --bs-btn-disabled-border-color: var(--ergo-stato-bloccante);
}

.text-bg-danger {
    color: var(--ergo-stato-bloccante-su) !important;
}

.btn-secondary {
    --bs-btn-color: var(--ergo-stato-in-pausa-su);
    --bs-btn-bg: var(--ergo-stato-in-pausa);
    --bs-btn-border-color: var(--ergo-stato-in-pausa);
    --bs-btn-hover-color: var(--ergo-stato-in-pausa-su);
    --bs-btn-hover-bg: var(--ergo-stato-in-pausa-hover);
    --bs-btn-hover-border-color: var(--ergo-stato-in-pausa-hover);
    --bs-btn-focus-shadow-rgb: var(--bs-secondary-rgb);
    --bs-btn-active-color: var(--ergo-stato-in-pausa-su);
    --bs-btn-active-bg: var(--ergo-stato-in-pausa-hover);
    --bs-btn-active-border-color: var(--ergo-stato-in-pausa-hover);
    --bs-btn-disabled-color: var(--ergo-stato-in-pausa-su);
    --bs-btn-disabled-bg: var(--ergo-stato-in-pausa);
    --bs-btn-disabled-border-color: var(--ergo-stato-in-pausa);
}

.btn-outline-secondary {
    --bs-btn-color: var(--ergo-stato-in-pausa-testo);
    --bs-btn-border-color: var(--ergo-stato-in-pausa);
    --bs-btn-hover-color: var(--ergo-stato-in-pausa-su);
    --bs-btn-hover-bg: var(--ergo-stato-in-pausa);
    --bs-btn-hover-border-color: var(--ergo-stato-in-pausa);
    --bs-btn-focus-shadow-rgb: var(--bs-secondary-rgb);
    --bs-btn-active-color: var(--ergo-stato-in-pausa-su);
    --bs-btn-active-bg: var(--ergo-stato-in-pausa);
    --bs-btn-active-border-color: var(--ergo-stato-in-pausa);
    --bs-btn-disabled-color: var(--ergo-stato-in-pausa);
    --bs-btn-disabled-border-color: var(--ergo-stato-in-pausa);
}

.text-bg-secondary {
    color: var(--ergo-stato-in-pausa-su) !important;
}

.btn-info {
    --bs-btn-color: var(--ergo-stato-completato-su);
    --bs-btn-bg: var(--ergo-stato-completato);
    --bs-btn-border-color: var(--ergo-stato-completato);
    --bs-btn-hover-color: var(--ergo-stato-completato-su);
    --bs-btn-hover-bg: var(--ergo-stato-completato-hover);
    --bs-btn-hover-border-color: var(--ergo-stato-completato-hover);
    --bs-btn-focus-shadow-rgb: var(--bs-info-rgb);
    --bs-btn-active-color: var(--ergo-stato-completato-su);
    --bs-btn-active-bg: var(--ergo-stato-completato-hover);
    --bs-btn-active-border-color: var(--ergo-stato-completato-hover);
    --bs-btn-disabled-color: var(--ergo-stato-completato-su);
    --bs-btn-disabled-bg: var(--ergo-stato-completato);
    --bs-btn-disabled-border-color: var(--ergo-stato-completato);
}

.btn-outline-info {
    --bs-btn-color: var(--ergo-stato-completato-testo);
    --bs-btn-border-color: var(--ergo-stato-completato);
    --bs-btn-hover-color: var(--ergo-stato-completato-su);
    --bs-btn-hover-bg: var(--ergo-stato-completato);
    --bs-btn-hover-border-color: var(--ergo-stato-completato);
    --bs-btn-focus-shadow-rgb: var(--bs-info-rgb);
    --bs-btn-active-color: var(--ergo-stato-completato-su);
    --bs-btn-active-bg: var(--ergo-stato-completato);
    --bs-btn-active-border-color: var(--ergo-stato-completato);
    --bs-btn-disabled-color: var(--ergo-stato-completato);
    --bs-btn-disabled-border-color: var(--ergo-stato-completato);
}

.text-bg-info {
    color: var(--ergo-stato-completato-su) !important;
}

.btn-primary {
    --bs-btn-bg: var(--bs-primary);
    --bs-btn-border-color: var(--bs-primary);
    --bs-btn-hover-bg: var(--ergo-primario-hover);
    --bs-btn-hover-border-color: var(--ergo-primario-hover);
    --bs-btn-active-bg: var(--ergo-primario-hover);
    --bs-btn-active-border-color: var(--ergo-primario-hover);
    --bs-btn-focus-shadow-rgb: var(--bs-primary-rgb);
    --bs-btn-color: var(--ergo-su-primario);
    --bs-btn-hover-color: var(--ergo-su-primario);
    --bs-btn-active-color: var(--ergo-su-primario);
    --bs-btn-disabled-color: var(--ergo-su-primario);
    --bs-btn-disabled-bg: var(--bs-primary);
    --bs-btn-disabled-border-color: var(--bs-primary);
}

/* Outline primario sul verde del brand (Bootstrap userebbe il suo blu). */
.btn-outline-primary {
    --bs-btn-color: var(--bs-primary);
    --bs-btn-border-color: var(--bs-primary);
    --bs-btn-hover-color: var(--ergo-su-primario);
    --bs-btn-hover-bg: var(--bs-primary);
    --bs-btn-hover-border-color: var(--bs-primary);
    --bs-btn-active-color: var(--ergo-su-primario);
    --bs-btn-active-bg: var(--bs-primary);
    --bs-btn-active-border-color: var(--bs-primary);
    --bs-btn-focus-shadow-rgb: var(--bs-primary-rgb);
    --bs-btn-disabled-color: var(--bs-primary);
    --bs-btn-disabled-border-color: var(--bs-primary);
}

.text-bg-primary {
    color: var(--ergo-su-primario) !important;
}

/* Tipografia: corpo 14px globale (html resta a 16px, così rem e spaziature non cambiano). */
h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5, h6, .h6 {
    font-weight: 600;
}

h1, .h1 { font-size: 1.375rem; }
h2, .h2 { font-size: 1.125rem; }
h3, .h3 { font-size: 1rem; }
h4, .h4 { font-size: 0.875rem; }
h5, .h5 { font-size: 0.875rem; }
h6, .h6 { font-size: 0.75rem; }

/* Mono tabellare per codici, ore, date e numeri. */
.ergo-mono {
    font-family: var(--ergo-font-mono);
    font-variant-numeric: tabular-nums;
    letter-spacing: 0;
}

.ergo-num {
    font-family: var(--ergo-font-mono);
    font-variant-numeric: tabular-nums;
    letter-spacing: 0;
    text-align: end;
    white-space: nowrap;
}

/* Componenti Bootstrap con 1rem letterale: seguono il corpo; -sm 0.75rem, -lg 1rem. */
.form-control,
.form-select,
.input-group-text {
    font-size: var(--bs-body-font-size);
}

.form-control-sm,
.form-select-sm,
.input-group-sm > .form-control,
.input-group-sm > .form-select,
.input-group-sm > .input-group-text,
.input-group-sm > .btn {
    font-size: 0.75rem;
}

.form-control-lg,
.form-select-lg,
.input-group-lg > .form-control,
.input-group-lg > .form-select,
.input-group-lg > .input-group-text,
.input-group-lg > .btn {
    font-size: 1rem;
}

.btn {
    --bs-btn-font-size: var(--bs-body-font-size);
}

.btn-sm,
.btn-group-sm > .btn {
    --bs-btn-font-size: 0.75rem;
}

.btn-lg,
.btn-group-lg > .btn {
    --bs-btn-font-size: 1rem;
}

.dropdown-menu {
    --bs-dropdown-font-size: var(--bs-body-font-size);
}

.pagination {
    --bs-pagination-font-size: var(--bs-body-font-size);
}

.pagination-sm {
    --bs-pagination-font-size: 0.75rem;
}

.pagination-lg {
    --bs-pagination-font-size: 1rem;
}

.ts-control,
.ts-control input,
.ts-dropdown {
    font-size: var(--bs-body-font-size);
}

.ts-wrapper.form-select-sm .ts-control,
.ts-wrapper.form-select-sm .ts-control input {
    font-size: 0.75rem;
}

/* Sotto 576px i campi tornano a 1rem: con meno iOS Safari zooma al focus. */
@media (max-width: 575.98px) {
    .form-control,
    .form-select,
    .input-group-sm > .form-control,
    .input-group-sm > .form-select,
    .ts-control,
    .ts-control input,
    .ts-wrapper.form-select-sm .ts-control,
    .ts-wrapper.form-select-sm .ts-control input {
        font-size: 1rem;
    }
}

/* Bordo dei campi. */
.form-control,
.form-select,
.input-group-text,
.ts-control {
    border-color: var(--ergo-border-campo);
}

/* Focus sul verde del brand (Bootstrap userebbe il suo blu); include l'editor Trix. */
.form-control:focus,
.form-select:focus,
.form-check-input:focus,
.testo-ricco__trix:focus,
.focus .ts-control,
.ts-dropdown .dropdown-input:focus {
    border-color: var(--bs-primary-border-subtle);
    box-shadow: 0 0 0 0.25rem var(--bs-focus-ring-color);
}

.form-check-input:checked,
.form-check-input[type='checkbox']:indeterminate {
    background-color: var(--bs-primary);
    border-color: var(--bs-primary);
}

/* Ombre: le superfici hanno il solo bordo 1px; modali, dropdown e simili tengono un'ombra
   minima per staccarsi dall'overlay. */
.card {
    --bs-card-border-radius: 8px;
    --bs-card-border-color: var(--ergo-border);
    --bs-card-bg: var(--bs-body-bg);
    --bs-card-cap-bg: transparent;
    --bs-card-cap-padding-x: 16px;
    --bs-card-cap-padding-y: 12px;
    border: 1px solid var(--ergo-border);
    box-shadow: none;
}

.card-header {
    padding: 12px 16px;
    background-color: transparent;
    border-bottom: 1px solid var(--ergo-border);
    font-size: 0.875rem;
    font-weight: 600;
}

.card-header > :is(h1, h2, h3, h4, h5, h6) {
    font-size: 0.875rem;
}

/* Intestazione di pagina */
.page-header__titolo {
    font-size: 1.25rem;
    font-weight: 600;
}

@media (min-width: 992px) {
    .page-header__titolo {
        font-size: 1.375rem;
    }
}

.page-header__sottotitolo {
    font-size: 0.875rem;
}

.page-header__azioni {
    margin-left: auto;
}

/* Badge: pill subtle (.ergo-badge) e forma stato (.ergo-stato). Le varianti text-bg-* scritte a mano
   nei template diventano subtle; restano piene nella sidebar e dentro i pulsanti. */
.badge.ergo-badge {
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 0.75rem;
    font-weight: 600;
    line-height: 1.5;
}

.ergo-badge--primary { background-color: var(--bs-primary-bg-subtle); color: var(--bs-primary-text-emphasis); }
.ergo-badge--success { background-color: var(--bs-success-bg-subtle); color: var(--bs-success-text-emphasis); }
.ergo-badge--warning { background-color: var(--bs-warning-bg-subtle); color: var(--bs-warning-text-emphasis); }
.ergo-badge--danger { background-color: var(--bs-danger-bg-subtle); color: var(--bs-danger-text-emphasis); }
.ergo-badge--secondary { background-color: var(--bs-secondary-bg-subtle); color: var(--bs-secondary-text-emphasis); }
.ergo-badge--info { background-color: var(--bs-info-bg-subtle); color: var(--bs-info-text-emphasis); }
.ergo-badge--light { background-color: var(--bs-tertiary-bg); color: var(--bs-body-color); }
.ergo-badge--dark { background-color: var(--bs-secondary-bg-subtle); color: var(--bs-body-color); }

.badge.text-bg-primary:not(.app-sidebar .badge, .btn .badge) { background-color: var(--bs-primary-bg-subtle) !important; color: var(--bs-primary-text-emphasis) !important; }
.badge.text-bg-success:not(.app-sidebar .badge, .btn .badge) { background-color: var(--bs-success-bg-subtle) !important; color: var(--bs-success-text-emphasis) !important; }
.badge.text-bg-warning:not(.app-sidebar .badge, .btn .badge) { background-color: var(--bs-warning-bg-subtle) !important; color: var(--bs-warning-text-emphasis) !important; }
.badge.text-bg-danger:not(.app-sidebar .badge, .btn .badge) { background-color: var(--bs-danger-bg-subtle) !important; color: var(--bs-danger-text-emphasis) !important; }
.badge.text-bg-secondary:not(.app-sidebar .badge, .btn .badge) { background-color: var(--bs-secondary-bg-subtle) !important; color: var(--bs-secondary-text-emphasis) !important; }
.badge.text-bg-info:not(.app-sidebar .badge, .btn .badge) { background-color: var(--bs-info-bg-subtle) !important; color: var(--bs-info-text-emphasis) !important; }

.ergo-stato {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
}

.ergo-stato__quadratino {
    flex-shrink: 0;
    width: 8px;
    height: 8px;
    border-radius: 2px;
    background-color: var(--ergo-stato-colore, var(--ergo-stato-in-pausa));
}

.ergo-stato--primary { --ergo-stato-colore: var(--ergo-stato-in-corso); }
.ergo-stato--success { --ergo-stato-colore: var(--ergo-stato-completato); }
.ergo-stato--warning { --ergo-stato-colore: var(--ergo-stato-a-rischio); }
.ergo-stato--danger { --ergo-stato-colore: var(--ergo-stato-bloccante); }
.ergo-stato--secondary { --ergo-stato-colore: var(--ergo-stato-in-pausa); }
.ergo-stato--info { --ergo-stato-colore: color-mix(in srgb, var(--ergo-stato-completato) 70%, var(--bs-body-bg)); }

/* Tabelle dense (~36px); «Comoda» porta le righe a ~44px. */
.tabella-elenco,
.card .table {
    --bs-table-bg: transparent;
    --bs-table-hover-bg: var(--ergo-bg-soft);
    --bs-table-hover-color: var(--bs-body-color);
    --bs-table-border-color: var(--ergo-border);
    margin-bottom: 0;
}

.tabella-elenco > :not(caption) > * > *,
.card .table > :not(caption) > * > * {
    padding: 8px 12px;
    border-width: 0 0 1px;
    border-color: var(--ergo-border);
}

.tabella-elenco > :not(caption) > * > :first-child,
.card .table > :not(caption) > * > :first-child {
    padding-left: 20px;
}

.tabella-elenco thead th,
.card .table thead th {
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--bs-secondary-color);
    background-color: transparent;
    border-bottom: 1px solid var(--ergo-border);
}

.tabella-elenco tbody tr:last-child > *,
.card .table tbody tr:last-child > * {
    border-bottom-width: 0;
}

.tabella-elenco td:first-child a:not(.btn):not(.badge) {
    color: var(--bs-body-color);
    font-weight: 500;
    text-decoration: none;
}

.table-responsive:not(.card .table-responsive) {
    overflow-x: auto;
    background-color: var(--bs-body-bg);
    border: 1px solid var(--ergo-border);
    border-radius: 8px;
}

/* Schede: .nav-tabs (Tabs) e .schede-sezione (SchedeSezione) senza box, filetto verde sulla voce attiva. */
.nav-tabs,
.schede-sezione__elenco {
    gap: 0;
    border-bottom: 1px solid var(--ergo-border);
}

.nav-tabs .nav-link,
.schede-sezione__link {
    display: inline-block;
    padding: 10px 12px;
    border: 0;
    border-bottom: 2px solid transparent;
    border-radius: 0;
    background-color: transparent;
    color: var(--bs-secondary-color);
    white-space: nowrap;
    text-decoration: none;
}

.nav-tabs .nav-link:hover,
.schede-sezione__link:hover {
    border-color: transparent;
    border-bottom-color: var(--ergo-border);
    color: var(--bs-body-color);
}

.nav-tabs .nav-link.active,
.nav-tabs .nav-item.show .nav-link,
.schede-sezione__link[aria-current='page'] {
    background-color: transparent;
    border-color: transparent;
    border-bottom-color: var(--bs-primary);
    color: var(--bs-body-color);
    font-weight: 600;
}

.schede-sezione__elenco {
    display: flex;
    margin: 0 0 1rem;
    padding: 0;
    list-style: none;
}

.schede-sezione__voce {
    flex-shrink: 0;
}

@media (max-width: 767.98px) {
    .nav-tabs,
    .schede-sezione__elenco {
        flex-wrap: nowrap;
        overflow-x: auto;
    }
}

/* Barra dei filtri con pillole generate da filtri_pillole_controller.js. */
.filtri {
    background-color: var(--bs-body-bg);
    border: 1px solid var(--ergo-border);
    border-radius: 8px;
}

.filtri__barra {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 12px;
    padding: 8px 16px;
}

.filtri__titolo {
    font-size: 0.75rem;
    color: var(--bs-secondary-color);
}

.filtri__attivi {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

.filtri__pillola,
.filtri__aggiungi {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 28px;
    padding: 0 12px;
    border-radius: 999px;
    font-size: 0.8125rem;
    line-height: 1;
}

.filtri__pillola {
    background-color: var(--bs-primary-bg-subtle);
    border: 1px solid var(--bs-primary-border-subtle);
    color: var(--bs-primary-text-emphasis);
}

.filtri__pillola:hover {
    border-color: var(--bs-primary);
}

.filtri__aggiungi {
    background-color: transparent;
    border: 1px dashed var(--ergo-border-campo);
    color: var(--bs-secondary-color);
}

.filtri__aggiungi:hover {
    border-color: var(--bs-primary);
    color: var(--bs-primary-text-emphasis);
}

.filtri__corpo {
    padding: 12px 16px 16px;
    border-top: 1px solid var(--ergo-border);
}

/* Paginazione, riepilogo e stato vuoto */
.pagination {
    --bs-pagination-border-radius: 6px;
    --bs-pagination-border-color: var(--ergo-border);
    --bs-pagination-active-bg: var(--bs-primary);
    --bs-pagination-active-border-color: var(--bs-primary);
    --bs-pagination-active-color: var(--ergo-su-primario);
    gap: 4px;
}

.pagination .page-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 32px;
    height: 32px;
    padding: 0 8px;
    border: 1px solid var(--ergo-border);
    border-radius: 6px;
}

.paginazione__riepilogo,
.riepilogo-elenco__testo {
    font-size: 0.75rem;
    color: var(--bs-secondary-color);
}

.empty-state__testo {
    font-size: 0.8125rem;
    color: var(--bs-secondary-color);
}

.widget-dashboard__lista .list-group-item {
    padding: 8px 16px;
    border-color: var(--ergo-border);
}

/* Campi dei form */
.form-control:not(.form-control-sm):not(textarea),
.form-select:not(.form-select-sm),
.ts-wrapper:not(.form-select-sm):not(.form-control-sm) .ts-control {
    min-height: 40px;
}

.form-control,
.form-select,
.ts-control {
    border-width: 1px;
    border-radius: 6px;
}

.form-label,
label.required {
    font-weight: 500;
}

.form-control.is-invalid,
.form-select.is-invalid,
.ts-wrapper.is-invalid .ts-control {
    border-width: 1.5px;
    border-color: var(--bs-danger);
}

.form-control.is-invalid {
    padding-right: 0.75rem;
    background-image: none;
}

.form-select.is-invalid {
    padding-right: 2.25rem;
    background-image: var(--bs-form-select-bg-img);
    background-position: right 0.75rem center;
    background-size: 16px 12px;
}

.invalid-feedback {
    font-size: 0.8125rem;
}

[data-errori-form] {
    --bs-alert-bg: var(--bs-danger-bg-subtle);
    --bs-alert-border-color: var(--bs-danger-border-subtle);
    --bs-alert-color: var(--bs-danger-text-emphasis);
    border-radius: 8px;
}

[data-errori-form] a {
    color: inherit;
    font-weight: 500;
    text-decoration: underline;
}

.modal-content,
.dropdown-menu,
.ts-dropdown,
.popover,
.toast {
    box-shadow: var(--bs-box-shadow-lg);
}

body {
    background-color: var(--ergo-bg-soft);
    color: var(--bs-body-color);
}

/* Layout dashboard: sidebar fissa a sinistra + contenuto centrale */
.app-layout {
    display: flex;
    min-height: 100vh;
}

.app-sidebar {
    --bs-offcanvas-width: 260px;
    width: 220px;
    flex-shrink: 0;
    /* offcanvas-lg imposta background-color: transparent !important da lg in su */
    background-color: var(--ergo-sidebar-bg) !important;
    color: var(--ergo-sidebar-testo);
    border-right: 1px solid var(--ergo-sidebar-separatore);
    display: flex;
    flex-direction: column;
}

.app-sidebar__brand {
    padding: 18px 16px;
    border-bottom: 1px solid var(--ergo-sidebar-separatore);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.app-sidebar__brand-link {
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: center;
}

.app-sidebar__logo {
    height: 24px;
    width: auto;
    max-width: 100%;
}

.app-sidebar__monogramma {
    display: none;
    width: 28px;
    height: 28px;
    border-radius: 6px;
    background-color: var(--ergo-sidebar-filetto);
    color: var(--ergo-sidebar-monogramma);
    align-items: center;
    justify-content: center;
    font-weight: 700;
}

.app-sidebar__nav {
    flex: 1;
    padding: 12px 8px;
    overflow-y: auto;
}

.app-sidebar__dashboard {
    margin-bottom: 0.25rem;
}

.app-sidebar__section + .app-sidebar__section {
    margin-top: 0.25rem;
}

.app-sidebar__section-toggle {
    position: relative;
    width: 100%;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    border: 0;
    border-radius: 6px;
    background-color: transparent;
    color: var(--ergo-sidebar-testo-secondario);
    font-size: 0.6875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.app-sidebar__section-toggle:hover,
.app-sidebar__section-toggle:focus-visible {
    background-color: var(--ergo-sidebar-hover);
    color: var(--ergo-sidebar-testo-attivo);
}

.app-sidebar__section-label {
    flex: 1;
    text-align: left;
}

.app-sidebar__section-chevron {
    font-size: 0.75rem;
    transition: transform 0.2s ease-in-out;
}

.app-sidebar__section-toggle.collapsed .app-sidebar__section-chevron,
.app-sidebar__group-toggle.collapsed .app-sidebar__section-chevron {
    transform: rotate(-90deg);
}

.app-sidebar__section-items {
    padding-left: 0.5rem;
}

.app-sidebar__group-toggle {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    margin-bottom: 2px;
    border: 0;
    border-radius: 6px;
    background-color: transparent;
    color: var(--ergo-sidebar-testo);
}

.app-sidebar__group-toggle:hover,
.app-sidebar__group-toggle:focus-visible {
    background-color: var(--ergo-sidebar-hover);
    color: var(--ergo-sidebar-testo-attivo);
}

.app-sidebar__group-label {
    flex: 1;
    text-align: left;
}

.app-sidebar__group-items {
    padding-left: 0.5rem;
}

.app-sidebar__nav .nav-link {
    color: var(--ergo-sidebar-testo);
    border-radius: 6px;
    padding: 8px 10px;
    margin-bottom: 2px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.app-sidebar__nav .nav-link i {
    font-size: 1rem;
    width: 1rem;
    text-align: center;
}

.app-sidebar__nav .nav-link.active {
    background-color: var(--ergo-sidebar-attivo);
    color: var(--ergo-sidebar-testo-attivo);
    font-weight: 600;
    box-shadow: inset 2px 0 0 var(--ergo-sidebar-filetto);
}

.app-sidebar__nav .nav-link:not(.active):hover {
    background-color: var(--ergo-sidebar-hover);
    color: var(--ergo-sidebar-testo-attivo);
}

.app-sidebar__nav .nav-link.disabled {
    color: var(--ergo-sidebar-testo-secondario);
    pointer-events: none;
}

.app-sidebar__voce-label {
    flex: 1;
    min-width: 0;
}

.app-sidebar__contatore {
    margin-left: auto;
    font-size: 0.75rem;
    font-weight: 400;
    color: var(--ergo-sidebar-testo-secondario);
}

.app-sidebar__contatore--allerta {
    padding: 0 6px;
    border-radius: 4px;
    background-color: var(--ergo-sidebar-allerta);
    color: var(--ergo-sidebar-allerta-testo);
    font-size: 0.6875rem;
    font-weight: 600;
}

.app-sidebar__contatore--sezione {
    display: none;
}

.app-sidebar__section-toggle.collapsed .app-sidebar__contatore--sezione {
    display: inline-block;
}

.app-sidebar__footer {
    padding: 14px 16px;
    border-top: 1px solid var(--ergo-sidebar-separatore);
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0.75rem;
}

.app-sidebar__comprimi {
    align-items: center;
    gap: 0.5rem;
    padding: 0;
    border: 0;
    background: none;
    color: var(--ergo-sidebar-testo-secondario);
    font-size: 0.8125rem;
}

.app-sidebar__comprimi:hover,
.app-sidebar__comprimi:focus-visible {
    color: var(--ergo-sidebar-testo-attivo);
}

.app-sidebar__utente-toggle {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 0;
    border: 0;
    background: none;
    color: var(--ergo-sidebar-testo-attivo);
    text-align: left;
}

.app-sidebar__avatar {
    flex-shrink: 0;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background-color: var(--ergo-sidebar-avatar);
    color: var(--ergo-sidebar-testo-attivo);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    font-weight: 600;
}

.app-sidebar__utente-nome {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 0.8125rem;
}

.app-sidebar__utente .dropdown-menu {
    min-width: 180px;
}

.app-sidebar__utente .dropdown-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    width: 100%;
}

@media (min-width: 992px) {
    :is(.app-layout--compatto, [data-sidebar='compatta']) .app-sidebar {
        width: 72px;
    }

    :is(.app-layout--compatto, [data-sidebar='compatta']) .app-sidebar__brand {
        padding: 18px 8px;
        justify-content: center;
    }

    :is(.app-layout--compatto, [data-sidebar='compatta']) .app-sidebar__brand-link {
        flex: 0 0 auto;
    }

    :is(.app-layout--compatto, [data-sidebar='compatta']) .app-sidebar__logo {
        display: none;
    }

    :is(.app-layout--compatto, [data-sidebar='compatta']) .app-sidebar__monogramma {
        display: flex;
    }

    :is(.app-layout--compatto, [data-sidebar='compatta']) :is(.app-sidebar__section-label, .app-sidebar__group-label, .app-sidebar__voce-label, .app-sidebar__comprimi-label, .app-sidebar__utente-nome) {
        position: absolute;
        width: 1px;
        height: 1px;
        margin: -1px;
        padding: 0;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
        white-space: nowrap;
        border: 0;
    }

    :is(.app-layout--compatto, [data-sidebar='compatta']) .app-sidebar__section-chevron {
        display: none;
    }

    :is(.app-layout--compatto, [data-sidebar='compatta']) :is(.app-sidebar__section-toggle, .app-sidebar__group-toggle, .app-sidebar__nav .nav-link) {
        position: relative;
        justify-content: center;
        padding-left: 0;
        padding-right: 0;
    }

    :is(.app-layout--compatto, [data-sidebar='compatta']) :is(.app-sidebar__section-items, .app-sidebar__group-items) {
        padding-left: 0;
    }

    :is(.app-layout--compatto, [data-sidebar='compatta']) :is(.app-sidebar__contatore, .app-sidebar__section-toggle.collapsed .app-sidebar__contatore--sezione) {
        position: absolute;
        top: 2px;
        right: 10px;
        display: inline-block;
        margin-left: 0;
        font-size: 0.625rem;
        line-height: 1.2;
    }

    :is(.app-layout--compatto, [data-sidebar='compatta']) .app-sidebar__section-toggle:not(.collapsed) .app-sidebar__contatore--sezione {
        display: none;
    }

    :is(.app-layout--compatto, [data-sidebar='compatta']) .app-sidebar__contatore--allerta {
        padding: 0 4px;
        border-radius: 8px;
    }

    :is(.app-layout--compatto, [data-sidebar='compatta']) .app-sidebar__footer {
        align-items: center;
        padding: 14px 8px;
    }

    :is(.app-layout--compatto, [data-sidebar='compatta']) .app-sidebar__utente-toggle {
        justify-content: center;
    }
}

.app-content {
    flex: 1;
    min-width: 0;
}

.app-content__topbar {
    position: sticky;
    top: 0;
    z-index: 1020;
    min-height: 56px;
    background-color: var(--ergo-surface);
    border-bottom: 1px solid var(--ergo-border);
    padding: 10px 20px;
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: 12px;
}

.app-content__topbar-azioni {
    display: flex;
    flex-shrink: 0;
    align-items: center;
    gap: 8px;
    margin-left: auto;
}

.app-briciole {
    min-width: 0;
    font-size: 0.8125rem;
}

.app-briciole .breadcrumb {
    flex-wrap: nowrap;
    white-space: nowrap;
}

.app-briciole .breadcrumb-item {
    flex-shrink: 0;
}

.app-briciole .breadcrumb-item.active {
    flex-shrink: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}

.app-briciole__indietro {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--ergo-text-muted);
    text-decoration: none;
}

.app-briciole__indietro:hover {
    color: var(--bs-primary);
}

.app-topbar__icona {
    position: relative;
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--ergo-border-campo);
    border-radius: 6px;
    background-color: var(--ergo-surface);
    color: var(--bs-body-color);
    text-decoration: none;
}

.app-topbar__icona:hover {
    background-color: var(--ergo-bg-soft);
    color: var(--bs-primary);
}

.app-topbar__ricerca {
    flex-shrink: 0;
    width: 36px;
    min-height: 36px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border: 1px solid var(--ergo-border-campo);
    border-radius: 6px;
    background-color: var(--ergo-surface);
    color: var(--ergo-text-muted);
}

.app-topbar__ricerca:hover {
    border-color: var(--bs-primary);
}

.app-topbar__ricerca-testo {
    flex: 1;
    text-align: left;
}

.app-topbar__ricerca-tasti {
    padding: 0 6px;
    background-color: var(--ergo-bg-soft);
    color: var(--ergo-text-muted);
    font-family: var(--ergo-font-mono);
    font-size: 0.6875rem;
}

@media (min-width: 768px) {
    .app-topbar__ricerca {
        width: auto;
        min-width: 220px;
        padding: 0 10px;
    }
}

.app-content__body {
    padding: 2rem;
}

@media (max-width: 767.98px) {
    .app-content__topbar {
        padding: 10px 12px;
    }

    .app-content__body {
        padding: 1rem;
    }
}

/* Layout a tutto schermo (pagine con griglie larghe, senza sidebar) */
.app-fullscreen {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

.app-fullscreen__topbar {
    background-color: var(--ergo-surface);
    border-bottom: 1px solid var(--ergo-border);
    padding: 0.85rem 1.5rem;
}

.app-fullscreen__topbar-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.app-fullscreen__back {
    color: var(--ergo-text-muted);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

.app-fullscreen__back:hover {
    color: var(--bs-primary);
}

.app-fullscreen__save-status {
    color: var(--ergo-text-muted);
    font-size: 0.9rem;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
}

.app-fullscreen__save-status--errore {
    color: var(--bs-danger);
}

.app-fullscreen__save-status--salvato {
    color: var(--bs-primary);
}

.app-fullscreen__body {
    flex: 1;
    padding: 2rem;
}

/* Pagina di login */
.login-page {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--ergo-bg-soft);
}

.login-card {
    width: 100%;
    max-width: 380px;
    background-color: var(--ergo-surface);
    border: 1px solid var(--ergo-border);
    border-radius: 0.75rem;
    padding: 2rem;
    position: relative;
}

.login-page .selettore-tema {
    position: absolute;
    top: 1rem;
    right: 1rem;
}

.login-card__logo {
    text-align: center;
    margin-bottom: 1.5rem;
}

.login-card__logo img {
    max-width: 160px;
    height: auto;
}

/* Griglia editabile delle violazioni (Assessment) */
.griglia-violazioni__table {
    min-width: 960px;
}

.griglia-violazioni__numero {
    font-weight: 600;
    white-space: nowrap;
}

/* Icona di stato e numero progressivo condividono la prima colonna, sotto l'intestazione "#".
   Il flex va su un wrapper interno: `display: flex` su un <td> lo toglie dal layout tabellare
   e disallinea tutte le colonne. */
.griglia-violazioni__riga-testata {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    white-space: nowrap;
}

/* Rilevazione e Suggerimenti sono le colonne in cui si scrive davvero: table-layout fisso più
   una larghezza esplicita per OGNI colonna (senza, il layout fisso ridistribuisce lo spazio
   residuo in parti uguali e schiaccia SO/Area/Impatto) impedisce al Criterio EN, che ha
   etichette lunghissime, di mangiarsi il testo libero. */
.griglia-violazioni__table {
    table-layout: fixed;
}

/* Larghezze per classe e non per nth-child: la colonna di selezione esiste solo a verifica in
   bozza, e una numerazione posizionale si disallineerebbe sulla griglia in sola lettura. */
.griglia-violazioni__cella-selezione { width: 2.75rem; }
.griglia-violazioni__col--numero { width: 5rem; }
.griglia-violazioni__col--evidenza { width: 3rem; }
.griglia-violazioni__col--so { width: 8.5rem; }
.griglia-violazioni__col--area { width: 8.5rem; }
.griglia-violazioni__col--testo { width: 24%; }
.griglia-violazioni__col--impatto { width: 9rem; }
.griglia-violazioni__col--criterio { width: 22%; }
.griglia-violazioni__col--azioni { width: 8.5rem; }

/* Riduce l'evidenziazione del testo sotto la checkbox; l'intervallo di selezione che lo
   shift+click estende sulle celle attraversate lo azzera clickSelezione(). */
.griglia-violazioni__cella-selezione {
    user-select: none;
    text-align: center;
}

.griglia-violazioni__riga--selezionata > td {
    background-color: var(--ergo-bg-soft);
}

/* La barra resta agganciata al fondo mentre si scorre una griglia lunga. */
.griglia-violazioni__barra-massa {
    position: sticky;
    bottom: 0;
    z-index: 3;
    margin-top: 1rem;
    padding: 0.75rem 1rem;
    border: 1px solid var(--ergo-border);
    border-radius: 0.5rem;
    background-color: var(--ergo-bg-soft);
    box-shadow: var(--bs-box-shadow);
}

.griglia-violazioni__barra-massa-campo {
    min-width: 11rem;
}

/* Griglia della conformità dei criteri (Assessment) */
.griglia-conformita__table {
    table-layout: fixed;
    min-width: 860px;
}

.griglia-conformita__cella-selezione {
    width: 2.75rem;
    user-select: none;
    text-align: center;
}

.griglia-conformita__col--stato { width: 2.5rem; }
.griglia-conformita__col--codice { width: 10rem; }
.griglia-conformita__col--titolo { width: auto; }
.griglia-conformita__col--livello { width: 5rem; }
.griglia-conformita__col--conformita { width: 13rem; }

.griglia-conformita__table td {
    overflow-wrap: anywhere;
}

.griglia-conformita__codice {
    font-weight: 600;
    white-space: nowrap;
}

.griglia-conformita__riga--selezionata > td {
    background-color: var(--ergo-bg-soft);
}

.griglia-conformita__barra-massa {
    position: sticky;
    bottom: 0;
    z-index: 3;
    margin-top: 1rem;
    padding: 0.75rem 1rem;
    border: 1px solid var(--ergo-border);
    border-radius: 0.5rem;
    background-color: var(--ergo-bg-soft);
    box-shadow: var(--bs-box-shadow);
}

.griglia-conformita__barra-massa-campo {
    min-width: 11rem;
}

/* Note, riprova ed elimina condividono l'ultima colonna, senza intestazione. */
.griglia-violazioni__azioni {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    white-space: nowrap;
}

.griglia-violazioni__table td {
    overflow-wrap: anywhere;
}

/* Tom Select porta con sé una min-width propria: senza azzerarla il controllo del criterio
   sfonda la cella invece di andare a capo dentro. */
.griglia-violazioni__select-criterio.ts-wrapper {
    min-width: 0;
    max-width: 100%;
}

/* L'etichetta del criterio (codice · titolo · paragrafi) è lunga decine di parole: nella cella
   sta su una riga sola troncata, il testo completo resta nel menu a tendina e nella modale di
   dettaglio. Senza questo la riga della griglia diventa alta sette righe di testo. */
.griglia-violazioni__select-criterio .ts-control > .item {
    display: block;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.griglia-violazioni__riga--nuova {
    background-color: var(--ergo-bg-soft);
}

/* Tom Select è agganciato al <body> (dropdownParent) per non essere tagliato dallo scroll
   orizzontale di .table-responsive: serve uno z-index esplicito sopra al resto della pagina. */
.ts-dropdown {
    z-index: 1060;
}

/* Una scelta disabilitata (choice_attr con 'disabled') è un valore valido lato form ma non
   selezionabile dall'interfaccia: Tom Select la renderizza comunque, grigia, nel menu — qui la
   si nasconde del tutto, coerente con l'uso che se ne fa (es. il valore sentinella "nuova
   anagrafica"/"nuova azienda", impostato solo via pulsante dedicato). */
.ts-dropdown .option[aria-disabled='true'] {
    display: none;
}

/* Cella di testo formattato: la cella mostra solo il testo renderizzato, l'editor Trix vive
   nella modale condivisa (_testo_ricco_modale.html.twig). Vedi testo_ricco_controller.js. */
.testo-ricco__vista {
    min-height: calc(1.5em + 0.5rem + 2px);
    padding: 0.25rem 0.5rem;
    border: 1px dashed transparent;
    border-radius: var(--bs-border-radius, 0.375rem);
    overflow-wrap: anywhere;
}

.testo-ricco__vista > :last-child {
    margin-bottom: 0;
}

.testo-ricco__vista--modificabile {
    cursor: pointer;
}

.testo-ricco__vista--modificabile:hover {
    border-color: var(--ergo-border);
    background-color: var(--ergo-bg-soft);
}

.testo-ricco__vista--modificabile:focus-visible {
    border-color: var(--bs-primary);
    outline: 2px solid var(--bs-primary);
    outline-offset: 1px;
}

.testo-ricco__vista--modificabile:empty::after {
    content: attr(data-segnaposto);
    color: var(--bs-secondary-color);
}

/* `.trix-content` (da trix.min.css) è pensato per il titolo h1 di default e azzera i margini di
   ogni discendente: qui si rimettono la spaziatura fra blocchi e la scala del titolo h4, che è il
   livello scelto in trix_bootstrap.js. */
.trix-content h4 {
    font-size: 1.1em;
    line-height: 1.25;
}

.trix-content > * + * {
    margin-top: 0.35em;
}

/* Menzioni @utente (assets/menzioni_trix.js): chip nel testo reso e nell'editor, menu di scelta. */
[data-menzione],
.attachment--content {
    display: inline;
    padding: 0.05em 0.4em;
    border-radius: var(--bs-border-radius, 0.375rem);
    background-color: var(--bs-primary-bg-subtle);
    color: var(--bs-primary-text-emphasis);
    font-weight: 500;
    white-space: nowrap;
}

.attachment--content figcaption {
    display: none;
}

.menzioni-menu {
    position: fixed;
    z-index: 1090;
    min-width: 14rem;
    max-width: min(24rem, 90vw);
    max-height: 16rem;
    overflow-y: auto;
}

.menzioni-menu [role='option'] {
    cursor: pointer;
}

/* Trix con la toolbar in markup Bootstrap (assets/trix_bootstrap.js): qui si neutralizza il
   cromo di trix.min.css e l'editor prende l'aspetto di un .form-control. */
.testo-ricco__trix {
    display: block;
    min-height: calc(3em + 0.5rem + 2px);
    border: 1px solid var(--ergo-border);
    border-top: none;
    border-radius: 0 0 var(--bs-border-radius, 0.375rem) var(--bs-border-radius, 0.375rem);
    padding: 0.5rem 0.75rem;
    font-size: var(--bs-body-font-size);
    background-color: var(--bs-body-bg);
}

.testo-ricco__trix.is-invalid {
    border-color: var(--bs-danger);
}

.testo-ricco__trix.is-invalid:focus {
    border-color: var(--bs-danger);
    box-shadow: 0 0 0 0.25rem rgba(var(--bs-danger-rgb), 0.25);
}

.testo-ricco__trix--modale {
    min-height: 14rem;
    font-size: var(--bs-body-font-size);
    resize: vertical;
    overflow-y: auto;
    max-height: 60vh;
}

trix-toolbar {
    display: block;
    background-color: var(--ergo-bg-soft);
    border: 1px solid var(--ergo-border);
    border-radius: var(--bs-border-radius, 0.375rem) var(--bs-border-radius, 0.375rem) 0 0;
    padding: 0.375rem 0.5rem;
}

/* trix.min.css disegna i propri pulsanti (float, bordi, icone SVG di sfondo): con il markup
   Bootstrap quelle regole vanno annullate, non sovrascritte a metà. */
trix-toolbar .trix-button-row {
    overflow-x: visible;
    justify-content: flex-start;
}

trix-toolbar .btn {
    float: none;
    border-bottom-width: var(--bs-border-width, 1px);
}

trix-toolbar .btn[data-trix-active],
trix-toolbar .btn.trix-active {
    color: var(--bs-primary);
    background-color: var(--bs-body-bg);
    border-color: var(--bs-primary);
    z-index: 2;
}

trix-toolbar .trix-dialog {
    position: absolute;
    display: none;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 5;
    margin-top: 0.25rem;
    padding: 0.5rem;
    font-size: var(--bs-body-font-size);
    background-color: var(--bs-body-bg);
    border: 1px solid var(--ergo-border);
    border-radius: var(--bs-border-radius, 0.375rem);
    box-shadow: var(--bs-box-shadow);
}

trix-toolbar .trix-dialog[data-trix-active] {
    display: block;
}

.griglia-violazioni__impatto--bloccante {
    background-color: var(--ergo-impatto-bloccante);
    color: var(--ergo-impatto-testo-chiaro);
}

.griglia-violazioni__impatto--alto {
    background-color: var(--ergo-impatto-alto);
    color: var(--ergo-impatto-testo-alto);
}

.griglia-violazioni__impatto--medio {
    background-color: var(--ergo-impatto-medio);
    color: var(--ergo-impatto-testo-medio);
}

.griglia-violazioni__impatto--basso {
    background-color: var(--ergo-impatto-basso);
    color: var(--ergo-impatto-testo-chiaro);
}

/* L'impatto è una Tom Select: il badge vive dentro .ts-control, che va dimensionato a mano
   perché non eredita più le misure della .form-select nativa. */
.griglia-violazioni__select-impatto.ts-wrapper {
    min-width: 8.5rem;
}

.griglia-violazioni__select-impatto .ts-control,
.griglia-violazioni__select-impatto .ts-dropdown .option {
    padding-top: 0.25rem;
    padding-bottom: 0.25rem;
}

.allegati-modale__lista {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    margin-bottom: 1rem;
}

.allegati-modale__riga {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.5rem;
    border: 1px solid var(--ergo-border);
    border-radius: var(--bs-border-radius, 0.375rem);
    background-color: var(--ergo-bg-soft);
}

.allegati-modale__anteprima {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 3.5rem;
    height: 3.5rem;
}

.allegati-modale__thumbnail {
    max-width: 3.5rem;
    max-height: 3.5rem;
    border-radius: var(--bs-border-radius-sm, 0.25rem);
    object-fit: cover;
}

.allegati-modale__icona {
    font-size: 1.75rem;
    color: var(--ergo-text-muted);
}

.allegati-modale__info {
    flex: 1 1 auto;
    min-width: 0;
}

.allegati-modale__nome {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.allegati-modale__upload {
    border-top: 1px solid var(--ergo-border);
    padding-top: 1rem;
}

.evidenza-tecnica__snippet {
    overflow-x: auto;
    max-height: 12rem;
    white-space: pre;
    background-color: var(--ergo-bg-soft);
    border: 1px solid var(--ergo-border);
    border-radius: var(--bs-border-radius-sm, 0.25rem);
    padding: 0.5rem;
    margin: 0;
}

.evidenze-modale__lista {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    margin-bottom: 1rem;
}

.evidenze-modale__riga {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 0.5rem;
    border: 1px solid var(--ergo-border);
    border-radius: var(--bs-border-radius, 0.375rem);
    background-color: var(--ergo-bg-soft);
}

.evidenze-modale__anteprima {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.evidenze-modale__anteprima:empty {
    display: none;
}

.evidenze-modale__thumbnail {
    max-width: 3.5rem;
    max-height: 3.5rem;
    border-radius: var(--bs-border-radius-sm, 0.25rem);
    object-fit: cover;
}

.evidenze-modale__info {
    flex: 1 1 auto;
    min-width: 0;
}

.evidenze-modale__form {
    border-top: 1px solid var(--ergo-border);
    padding-top: 1rem;
}

/* Pagine della deliverable: navigazione laterale delle sei sezioni + contenuto. */
.deliverable-layout {
    display: flex;
    flex-wrap: wrap;
    gap: 2rem;
}

.deliverable-layout__nav {
    flex: 0 0 240px;
}

.deliverable-layout__content {
    flex: 1 1 480px;
    min-width: 0;
}

.deliverable-nav .nav-link {
    color: var(--ergo-text-muted);
    border-radius: 0.5rem;
    padding: 0.6rem 0.9rem;
    margin-bottom: 0.25rem;
    display: flex;
    align-items: center;
}

.deliverable-nav .nav-link.active {
    background-color: var(--ergo-bg-soft-alt);
    color: var(--bs-primary);
    font-weight: 600;
}

.deliverable-nav .nav-link:not(.active):hover {
    background-color: var(--ergo-bg-soft);
    color: var(--bs-primary);
}

.grafico-barre__svg {
    width: 100%;
    height: auto;
    max-height: 320px;
}

.grafico-andamento__svg {
    width: 100%;
    height: auto;
    max-height: 320px;
}

.grafico-andamento__scorrimento {
    overflow-x: auto;
}

.grafico-andamento__swatch {
    display: inline-block;
    width: 0.75rem;
    height: 0.75rem;
    border-radius: 0.15rem;
}

.kanban-board {
    display: grid;
    grid-template-columns: repeat(4, minmax(220px, 1fr));
    gap: 1rem;
    overflow-x: auto;
}

.kanban-board--cinque {
    grid-template-columns: repeat(5, minmax(200px, 1fr));
}

.kanban-board__colonna {
    background-color: var(--ergo-bg-soft);
    border: 1px solid var(--ergo-border);
    border-radius: 0.5rem;
    padding: 0.75rem;
}

.kanban-board__lista {
    min-height: 6rem;
}

.kanban-card {
    cursor: grab;
}

.kanban-card--trascinata {
    opacity: 0.5;
}

/* outline, non border: la Card porta border-0 di Bootstrap, che è !important. */
.pianificazione-zona {
    outline: 2px dashed transparent;
    outline-offset: -2px;
    transition: outline-color 0.15s ease-in-out, background-color 0.15s ease-in-out;
}

.pianificazione-zona--attiva {
    outline-color: var(--bs-primary);
    background-color: var(--ergo-bg-soft);
}

.pianificazione-settimana > .card-body {
    padding: 0;
}

.pianificazione-settimana__interruttore .fa-chevron-down {
    transition: transform 0.15s ease-in-out;
}

.pianificazione-settimana__interruttore[aria-expanded='false'] .fa-chevron-down {
    transform: rotate(-90deg);
}

/* Altezza minima e poi automatica: la tabella si mostra sempre per intero. Resta solo lo scroll
   orizzontale di .table-responsive sugli schermi stretti; quello verticale (overflow-x: auto
   forza overflow-y: auto) scatterebbe per l'ultimo pixel di bordo della tabella. */
.pianificazione-tabella-contenitore {
    min-height: 12rem;
    overflow-y: hidden;
}

.pianificazione-tabella tr[draggable] {
    cursor: grab;
}

.pianificazione-tabella tbody:has(> tr[data-task-id]) > .pianificazione-tabella__vuota {
    display: none;
}

@media (max-width: 991.98px) {
    .kanban-board,
    .kanban-board--cinque {
        grid-template-columns: repeat(2, minmax(220px, 1fr));
    }
}

[data-densita='comoda'] .tabella-elenco > :not(caption) > * > *,
[data-densita='comoda'] .card .table > :not(caption) > * > * {
    padding-block: 12px;
}

.tabella-elenco tbody tr:has(.stretched-link) {
    position: relative;
    cursor: pointer;
}

/* La cella sticky diventerebbe il contenitore posizionato dello stretched-link, limitando il click
   alla prima colonna: dove la riga è cliccabile la colonna non resta fissa. */
@media (max-width: 767.98px) {
    .tabella-elenco:not(:has(.stretched-link)) th:first-child,
    .tabella-elenco:not(:has(.stretched-link)) td:first-child {
        position: sticky;
        left: 0;
        z-index: 1;
        background-color: var(--bs-body-bg);
    }
}

@media (max-width: 575.98px) {
    .kanban-board,
    .kanban-board--cinque {
        display: flex;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
    }

    .kanban-board__colonna {
        flex: 0 0 85vw;
        scroll-snap-align: start;
    }
}

.area-utente {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    background-color: var(--ergo-bg-soft);
}

.area-utente__topbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1.5rem;
    padding: 0.75rem 1.5rem;
    background-color: var(--bs-body-bg);
    border-bottom: 1px solid var(--ergo-border);
}

.area-utente__topbar-toggler {
    margin-left: auto;
}

.area-utente__topbar-menu {
    display: flex;
    flex: 1 0 100%;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.75rem;
}

@media (min-width: 768px) {
    .area-utente__topbar-menu {
        flex: 1;
        flex-direction: row;
        align-items: center;
        gap: 1.5rem;
    }
}

.area-utente__topbar-brand img {
    height: 2rem;
}

.area-utente__topbar-nav {
    display: flex;
    gap: 1rem;
}

.area-utente__topbar-link {
    color: var(--ergo-text-muted);
    text-decoration: none;
}

.area-utente__topbar-link:hover {
    color: var(--bs-primary);
}

.area-utente__topbar-cliente {
    margin-left: 0;
}

@media (min-width: 768px) {
    .area-utente__topbar-cliente {
        margin-left: auto;
    }
}

.area-utente__topbar-logout {
    color: var(--ergo-text-muted);
    text-decoration: none;
    background: none;
    border: 0;
    padding: 0;
    font: inherit;
    cursor: pointer;
}

.area-utente__body {
    flex: 1;
    padding: 1.5rem;
    max-width: 1200px;
    width: 100%;
    margin: 0 auto;
}

.roadmap__grid {
    display: grid;
    grid-template-columns: minmax(180px, 260px) 1fr;
    align-items: center;
    row-gap: 0.75rem;
    column-gap: 1rem;
    position: relative;
}

.roadmap__grid-label {
    font-size: 0.875rem;
}

.roadmap__grid-track {
    position: relative;
    min-height: 1.5rem;
}

.roadmap__grid-track--mesi {
    min-height: 1.25rem;
    border-bottom: 1px solid var(--ergo-border);
}

.roadmap__mese {
    position: absolute;
    top: 0;
    font-size: 0.75rem;
    color: var(--ergo-text-muted);
    white-space: nowrap;
    transform: translateX(-50%);
}

.roadmap__barra {
    position: absolute;
    top: 0;
    bottom: 0;
    border-radius: 0.25rem;
    display: flex;
    align-items: center;
    min-width: 0.5rem;
}

.roadmap__barra-etichetta {
    margin-left: 0.5rem;
    font-size: 0.75rem;
    font-weight: 600;
    /* Pillola con fondo proprio: resta leggibile sulla barra di qualunque colore e anche quando
       sborda da una barra corta sul fondo della traccia. */
    color: var(--bs-body-color);
    background-color: var(--bs-body-bg);
    padding: 0 0.3rem;
    border-radius: 0.2rem;
    white-space: nowrap;
}

.roadmap__oggi-colonna {
    grid-column: 2;
    grid-row: 1 / -1;
    position: relative;
    pointer-events: none;
}

.roadmap__oggi {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 1px;
}

/* Pulsante del tema a tre stati: le tre icone sono nel markup, tema_iniziale.js scrive
   data-ergo-tema-modo (auto / light / dark) sull'<html> e il CSS sceglie quale mostrare. */
.selettore-tema__icona-auto,
.selettore-tema__icona-chiaro,
.selettore-tema__icona-scuro {
    display: none;
}

:root:not([data-ergo-tema-modo]) .selettore-tema__icona-auto,
[data-ergo-tema-modo='auto'] .selettore-tema__icona-auto,
[data-ergo-tema-modo='light'] .selettore-tema__icona-chiaro,
[data-ergo-tema-modo='dark'] .selettore-tema__icona-scuro {
    display: inline-block;
}

/* Doppio logo: la versione con la scritta chiara è per il tema scuro. */
.logo--scuro {
    display: none;
}

[data-bs-theme='dark'] .logo--chiaro {
    display: none;
}

[data-bs-theme='dark'] .logo--scuro {
    display: inline-block;
}

.campanella-notifiche__badge {
    position: absolute;
    top: -5px;
    right: -5px;
    min-width: 18px;
    height: 18px;
    padding: 0 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 9px;
    background-color: var(--ergo-stato-bloccante);
    color: var(--ergo-stato-bloccante-su);
    font-size: 0.6875rem;
    font-weight: 600;
}

label.required::after,
legend.required::after {
    content: ' *';
    color: var(--bs-danger);
}

.barra-azioni-form {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin-top: 1.5rem;
}

.barra-azioni-form__azioni {
    display: flex;
    gap: 0.5rem;
    margin-left: auto;
}

.barra-azioni-form__asterisco {
    color: var(--bs-danger);
}

.barra-azioni-form--sticky {
    position: sticky;
    bottom: 0;
    z-index: 1020;
    padding: 12px 16px;
    background-color: var(--bs-body-bg);
    border: 1px solid var(--ergo-border);
    border-radius: 8px;
}

.barra-azioni-form__annulla {
    color: var(--bs-primary-text-emphasis);
}

.barra-azioni-form .btn-primary {
    min-height: 40px;
}

@media (max-width: 575.98px) {
    .barra-azioni-form__azioni {
        flex-direction: column-reverse;
        width: 100%;
    }

    .barra-azioni-form__azioni .btn {
        width: 100%;
    }
}

.toast-container {
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
}

@media (min-width: 768px) {
    .toast-container {
        top: 0;
        right: 0;
        bottom: auto;
        left: auto;
        transform: none;
    }
}

.btn:focus-visible,
.form-control:focus-visible,
.form-select:focus-visible,
.app-sidebar a:focus-visible {
    outline: 2px solid var(--bs-primary);
    outline-offset: 2px;
}

.app-sidebar :is(a, button):focus-visible {
    outline: 2px solid var(--ergo-sidebar-filetto);
    outline-offset: 2px;
}

.calendario-assenze th,
.calendario-assenze td {
    min-width: 2rem;
    padding: 0.25rem;
    text-align: center;
    vertical-align: middle;
}

.calendario-assenze__staff {
    position: sticky;
    left: 0;
    z-index: 1;
    min-width: 10rem;
    background-color: var(--bs-body-bg);
    text-align: left;
    white-space: nowrap;
}

.calendario-assenze__attenuato {
    background-color: var(--ergo-bg-soft);
}

.calendario-assenze__oggi {
    border-left: 2px solid var(--bs-primary);
    border-right: 2px solid var(--bs-primary);
}

[data-errori-form][hidden] {
    display: none !important;
}

/* Dashboard: griglia di widget e striscia contatori. */
.dashboard-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(340px, 100%), 1fr));
    gap: 16px;
    align-items: start;
}

.dashboard-grid__intera {
    grid-column: 1 / -1;
}

@media (min-width: 992px) {
    .dashboard-grid__evidenza {
        grid-row: span 2;
    }
}

.dashboard-grid > * {
    min-width: 0;
}

.contatori {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 1px;
    overflow: hidden;
    border: 1px solid var(--ergo-border);
    border-radius: 8px;
    background-color: var(--ergo-border);
}

.contatore {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 12px 16px;
    background-color: var(--ergo-surface);
    color: inherit;
    text-decoration: none;
}

a.contatore:hover {
    background-color: var(--ergo-bg-soft);
}

.contatore--attivo {
    box-shadow: inset 0 -3px 0 var(--bs-primary);
}

.coda-riga--completa > td {
    background-color: var(--ergo-bg-soft);
}

.contatore__etichetta {
    font-size: 0.75rem;
    color: var(--bs-secondary-color);
}

.contatore__valore {
    font-size: 1.375rem;
    font-weight: 600;
    line-height: 1.2;
}

.contatore__nota {
    line-height: 1.2;
}

.assenze-settimana__cella {
    display: block;
    width: 18px;
    height: 18px;
    margin: 0 auto;
    border-radius: 3px;
    background-color: var(--ergo-bg-soft);
}

.assenze-settimana__oggi {
    background-color: var(--ergo-bg-soft);
    font-weight: 600;
}

.widget-dashboard__titolo {
    font-size: 0.875rem;
}

.dashboard-saluto {
    font-size: 1.125rem;
}

.min-w-0 {
    min-width: 0;
}

/* Scheda progetto «Operativo» */
.ergo-testo-a-rischio {
    color: var(--ergo-stato-a-rischio-testo);
}

.ergo-tabella-wp__testata > td {
    background-color: var(--ergo-bg-soft);
    border-bottom: 1px solid var(--ergo-border);
}

.ergo-card-compatta {
    box-shadow: none;
}

.ergo-card-compatta__titolo,
.ergo-card-compatta__sottotitolo {
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--bs-secondary-color);
}

.ergo-card-compatta__sottotitolo {
    margin-bottom: 2px;
}

.ergo-dati {
    display: grid;
    grid-template-columns: max-content 1fr;
    gap: 6px 16px;
}

.ergo-dati dt {
    font-weight: 400;
    color: var(--bs-secondary-color);
}

.ergo-dati dd {
    margin: 0;
    min-width: 0;
    text-align: end;
}

.ergo-elenco-compatto {
    padding: 0;
    margin-left: 0;
    list-style: none;
}

.ergo-elenco-compatto__voce {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 6px 0;
    border-bottom: 1px solid var(--ergo-border);
}

.ergo-elenco-compatto__voce:last-child {
    border-bottom: 0;
}

.ergo-avatar {
    display: inline-flex;
    flex: none;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background-color: var(--ergo-bg-soft);
    color: var(--bs-body-color);
    font-size: 0.6875rem;
    font-weight: 600;
}

.ergo-sistemi-griglia {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 12px;
}

.ergo-sistema-box {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
    padding: 12px;
    border: 1px solid var(--ergo-border);
    border-radius: 8px;
}

/* Split view della lista progetti */
.split-elenco {
    display: flex;
    gap: 1rem;
    align-items: flex-start;
}

.split-elenco__elenco {
    flex: 1 1 auto;
    min-width: 0;
}

.riga-selezionata > * {
    background-color: var(--ergo-bg-soft-alt) !important;
}

.riga-selezionata > :first-child {
    box-shadow: inset 3px 0 0 var(--bs-primary);
}

.pannello-dettaglio {
    --bs-offcanvas-width: 100%;
}

.pannello-dettaglio__contenuto {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    min-height: 100%;
    padding: 1rem;
}

.pannello-dettaglio__titolo {
    margin: 0.125rem 0 0.5rem;
    font-size: 1.0625rem;
    font-weight: 600;
}

.pannello-dettaglio__griglia {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.75rem;
    margin: 0;
    font-size: 0.8125rem;
}

.pannello-dettaglio__griglia dt {
    font-weight: 400;
    color: var(--bs-secondary-color);
}

.pannello-dettaglio__griglia dd {
    margin: 0;
}

.pannello-dettaglio__intera {
    grid-column: 1 / -1;
}

.pannello-dettaglio__sezione {
    margin: 0;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--bs-secondary-color);
}

.pannello-dettaglio__attivita {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    padding: 0.5rem 0.75rem;
    border: 1px solid var(--ergo-border);
    border-radius: 6px;
    font-size: 0.8125rem;
}

.pannello-dettaglio__persona {
    display: flex;
    align-items: flex-start;
    gap: 0.625rem;
    font-size: 0.8125rem;
}

.pannello-dettaglio__persona-sigla {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    width: 1.75rem;
    height: 1.75rem;
    border-radius: 999px;
    background-color: var(--bs-primary-bg-subtle);
    color: var(--bs-primary-text-emphasis);
    font-size: 0.6875rem;
    font-weight: 600;
}

.rapporto-persona {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    padding: 0.5rem 0.75rem;
    border: 1px solid var(--ergo-border);
    border-radius: 6px;
    font-size: 0.8125rem;
}

.pannello-dettaglio__azioni {
    display: flex;
    gap: 0.5rem;
    margin-top: auto;
}

@media (min-width: 992px) {
    .pannello-dettaglio {
        position: sticky;
        top: 1rem;
        flex: 0 0 360px;
        max-width: 380px;
        background-color: var(--ergo-bg-soft);
        border-left: 1px solid var(--ergo-border);
    }

    .pannello-dettaglio--vuoto {
        display: none;
    }
}

/* Questionario compilativo: domande con errori evidenziate, sezioni che le contengono bordate. */
.questionario-domanda {
    margin-bottom: 1rem;
    padding: 0.75rem 1rem;
    border-left: 3px solid transparent;
    border-radius: 6px;
}

.questionario-domanda--errore {
    border-left-color: var(--bs-danger);
    background-color: var(--bs-danger-bg-subtle);
}

.questionario-domanda .form-check-label.required::after {
    content: none;
}

.questionario-sezione:has(.questionario-domanda--errore) {
    --bs-card-border-color: var(--bs-danger-border-subtle);
}

/* Mockup review: immagine della schermata con i riquadri dei rilievi (coordinate in percentuale). */
.schermata-scorrevole {
    max-height: 80vh;
    overflow: auto;
    border: 1px solid var(--ergo-border);
    border-radius: 6px;
    background-color: var(--ergo-bg-soft);
}

.immagine-riquadri {
    display: inline-block;
    min-width: 100%;
}

.immagine-riquadri__area {
    position: relative;
    display: inline-block;
    line-height: 0;
}

.immagine-riquadri__area[data-modificabile='true'] {
    cursor: crosshair;
    touch-action: none;
}

.immagine-riquadri__img {
    display: block;
    max-width: none;
    user-select: none;
}

.immagine-riquadri--adatta .immagine-riquadri__img {
    max-width: 100%;
    height: auto;
}

.immagine-riquadri--adatta,
.immagine-riquadri--adatta .immagine-riquadri__area {
    display: block;
}

.immagine-riquadri__riquadro {
    position: absolute;
    border: 2px solid var(--bs-danger);
    background-color: var(--bs-danger-bg-subtle);
    opacity: 0.85;
    pointer-events: none;
}

.immagine-riquadri__riquadro--attivo {
    border-color: var(--bs-primary);
    background-color: var(--bs-primary-bg-subtle);
    opacity: 1;
}

.immagine-riquadri__riquadro--bozza {
    border-style: dashed;
    border-color: var(--bs-primary);
    background-color: var(--bs-primary-bg-subtle);
}

.immagine-riquadri__numero {
    position: absolute;
    top: -2px;
    left: -2px;
    padding: 0 0.35rem;
    font-size: 0.75rem;
    font-weight: 600;
    line-height: 1.4;
    color: var(--bs-white);
    background-color: var(--bs-danger);
}

.immagine-riquadri__riquadro--attivo .immagine-riquadri__numero {
    background-color: var(--bs-primary);
}

.rilievo-elenco__voce--evidenziata {
    border-color: var(--bs-primary);
    box-shadow: 0 0 0 2px var(--bs-primary-border-subtle);
}

/* Scheda azienda: griglia della Panoramica (sotto xl la persona selezionata sta subito sotto la mappa). */
.scheda-panoramica {
    display: grid;
    gap: 1rem;
    align-items: start;
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
        'mappa'
        'persona'
        'progetti'
        'laterale';
}

.scheda-panoramica__mappa { grid-area: mappa; }
.scheda-panoramica__persona { grid-area: persona; }
.scheda-panoramica__progetti { grid-area: progetti; }
.scheda-panoramica__laterale { grid-area: laterale; }

@media (min-width: 1200px) {
    .scheda-panoramica {
        grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
        grid-template-areas:
            'mappa persona'
            'progetti laterale';
    }

    .scheda-panoramica--azienda {
        grid-template-areas: 'mappa laterale';
    }
}

/* Potere decisionale: scala neutra a tre tacche, mai un colore di stato. */
.scala-potere {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    white-space: nowrap;
}

.scala-potere__tacche {
    display: inline-flex;
    gap: 2px;
}

.scala-potere__tacca {
    width: 6px;
    height: 12px;
    border-radius: 1px;
    background-color: var(--ergo-border);
}

.scala-potere__tacca--piena {
    background-color: var(--bs-body-color);
}

/* Mappa degli stakeholder: potere x relazione. */
.mappa-stakeholder__scorrevole {
    overflow-x: auto;
}

.mappa-stakeholder__tabella {
    width: 100%;
    min-width: 640px;
    border-collapse: separate;
    border-spacing: 4px;
}

.mappa-stakeholder__tabella th {
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--bs-secondary-color);
    text-align: left;
    vertical-align: middle;
}

.mappa-cella {
    position: relative;
    min-width: 130px;
    height: 84px;
    padding: 0.5rem;
    vertical-align: top;
    background-color: var(--bs-tertiary-bg);
    border: 1px solid var(--ergo-border);
    border-radius: 6px;
}

.mappa-cella--attenzione {
    background-color: var(--ergo-stato-a-rischio-subtle);
    border-color: var(--ergo-stato-a-rischio-bordo);
}

.mappa-cella--positiva {
    background-color: var(--ergo-stato-in-corso-subtle);
    border-color: var(--ergo-stato-in-corso-bordo);
}

.mappa-cella__icona {
    position: absolute;
    top: 0.35rem;
    right: 0.4rem;
    font-size: 0.75rem;
}

.mappa-cella--attenzione .mappa-cella__icona,
.mappa-cella__icona--attenzione {
    color: var(--ergo-stato-a-rischio-testo);
}

.mappa-cella--positiva .mappa-cella__icona,
.mappa-cella__icona--positiva {
    color: var(--ergo-stato-in-corso-testo);
}

.mappa-cella__persone {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
}

.mappa-persona {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.125rem 0.5rem 0.125rem 0.125rem;
    font-size: 0.8125rem;
    color: var(--bs-body-color);
    text-decoration: none;
    background-color: var(--bs-body-bg);
    border: 1px solid var(--ergo-border);
    border-radius: 999px;
}

.mappa-persona:hover {
    border-color: var(--bs-body-color);
}

.mappa-persona[aria-current='true'] {
    border-color: var(--bs-primary);
    box-shadow: 0 0 0 2px var(--bs-primary-border-subtle);
}

.mappa-persona--da-valutare {
    border-style: dashed;
}

.mappa-persona__sigla {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.5rem;
    height: 1.5rem;
    padding: 0 0.25rem;
    font-size: 0.6875rem;
    font-weight: 600;
    color: var(--bs-body-color);
    background-color: var(--bs-secondary-bg);
    border-radius: 999px;
}

.mappa-persona--esterna .mappa-persona__sigla,
.mappa-persona__sigla--esterna {
    color: var(--ergo-stato-completato-testo);
    background-color: var(--ergo-stato-completato-subtle);
}

.mappa-persona__sigla--grande {
    min-width: 2.5rem;
    height: 2.5rem;
    font-size: 0.875rem;
}

.mappa-persona__mancante {
    color: var(--ergo-stato-a-rischio-testo);
}

.mappa-stakeholder__avviso {
    margin-left: auto;
    font-size: 0.875rem;
    color: var(--ergo-stato-a-rischio-testo);
}

.mappa-vista {
    padding: 0.25rem 0.75rem;
    font-size: 0.8125rem;
    color: var(--bs-body-color);
    text-decoration: none;
    background-color: transparent;
    border: 1px solid var(--ergo-border);
    border-radius: 999px;
}

.mappa-vista:hover {
    border-color: var(--bs-body-color);
}

.mappa-vista--attiva {
    color: var(--bs-body-bg);
    background-color: var(--bs-body-color);
    border-color: var(--bs-body-color);
}

tr:target > td {
    background-color: var(--bs-warning-bg-subtle);
}