:root {
    --color-primary: #0b66dd;
    --color-primary-hover: #0955b8;
    --color-text-primary: #333333;
    --color-text-dark: #1f2937;
    --color-text-darker: #111827;
    --color-text-darkest: #000000;
    --color-bg-light: #f3f4f6;
    --color-bg-white: #ffffff;
    --color-bg-gray: #e5e7eb;
    --color-border: #d1d5db;
    --color-border-light: #e5e7eb;
    --color-border-table: #e5e7eb;
    --color-success: #10b981;
    --color-error: red;
    --color-text-muted: #666;

    --spacing-xs: 5px;
    --spacing-sm: 10px;
    --spacing-md: 20px;
    --spacing-lg: 50px;

    --radius-sm: 5px;
    --radius-md: 10px;
    --radius-lg: 15px;
    --radius-xl: 20px;
    --radius-full: 999px;

    --header-height: 60px;
    --row-height: 50px;
    --sidebar-width: 300px;
}

@media (max-width: 768px) {
    :root {
        --header-height: 60px;
        --spacing-md: 10px;
    }
}

/* ========================================= */
/* === Utility Classes === */
/* ========================================= */

.hidden {
    display: none !important;
}

.visible {
    display: block !important;
}

.flex {
    display: flex !important;
}

.no-max-height {
    max-height: none !important;
}

.overflow-visible {
    overflow-y: visible !important;
}

.full-width {
    width: 100% !important;
}

.mobile-only {
    display: none !important;
}

@media (max-width: 768px) {
    .mobile-only {
        display: flex !important;
    }

    .desktop-only {
        display: none !important;
    }
}

.message {
    padding: var(--spacing-md);
    text-align: center;
    color: var(--color-text-muted);
}

.message.error {
    color: var(--color-error);
}

.message.success {
    color: var(--color-success);
}

.text-error {
    color: var(--color-error) !important;
}

/* ========================================= */
/* === Settings Form & Modal === */
/* ========================================= */

.settings_form {
    display: flex;
    flex-direction: column;
    gap: 15px;
    padding: 10px;
}

.form_group {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.form_group label {
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--color-text-muted);
    text-transform: uppercase;
}

.form_group input,
.form_group select,
.form_group textarea {
    padding: 12px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    font-size: 0.95rem;
    width: 100%;
    background-color: #fff;
}

.modal_footer_actions {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    padding: 15px 20px;
    border-top: 1px solid var(--color-border-light);
    background: white;
}

.modal_counter_badge {
    background: #e0e7ef;
    color: #374151;
    padding: 3px 12px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
    margin-left: auto;
    margin-right: 8px;
}

/* Full Modal & Tree Selection */
.modal_overlay.active .modal_content.modal_large {
    width: 95% !important;
    max-width: 1400px;
    height: 90vh;
    display: flex;
    flex-direction: column;
}

/* Modale assegnazione obiettivi: larga ma isolata dalle altre modali */
.modal_overlay.active .modal_content.modal_obiettivi_assign {
    width: min(980px, 92vw) !important;
    max-width: 980px !important;
}

.modal_overlay.active .modal_content.modal_large .modal_header {
    height: auto;
    padding: 16px 20px;
}

.modal_body_scroll {
    flex: 1;
    overflow: hidden;
    padding: 20px;
    display: flex;
    flex-direction: column;
}

/* Selettore entità in modale di assegnazione (layout 'grid'): barra di ricerca
   + griglia di box. Le classi .assignment_box / .assignment_grid sono definite
   più sotto e condivise con l'aspetto storico. */
#assign_entity_grid_container { display: flex; flex-direction: column; min-height: 0; flex: 1; }
.assignment_search_bar {
    display: flex; gap: 10px; align-items: center; margin-bottom: 16px;
    position: relative;
}
.assignment_search_icon {
    position: absolute; left: 12px; top: 50%; transform: translateY(-50%);
    color: #9ca3af; font-size: 13px; pointer-events: none;
}
.assignment_search_input {
    flex: 1; padding: 10px 12px 10px 36px; border: 1px solid #e5e7eb;
    border-radius: 8px; font-size: 13px; outline: none; transition: border-color 0.2s;
}
.assignment_search_input:focus { border-color: var(--color-primary); }
#assign_entity_grid_list { overflow-y: auto; flex: 1; }

.modal_body_scroll form {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

/* Modal Classifica 4-Column Layout */
.modal_classifica_4col_layout {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    gap: 15px;
    flex: 1;
    overflow: hidden;
}

.modal_classifica_col {
    display: flex;
    flex-direction: column;
    border: 1px solid var(--color-border-light);
    border-radius: 8px;
    overflow: hidden;
    background: white;
}

.modal_classifica_form {
    padding: 15px;
    gap: 12px;
    overflow-y: auto;
}

/* Enhanced button styling for add configuration */
.btn_add_config {
    padding: 10px 20px !important;
    font-size: 0.95rem !important;
    font-weight: 600 !important;
    box-shadow: 0 2px 8px rgba(14, 165, 233, 0.25) !important;
    transition: all 0.3s ease !important;
}

.btn_add_config:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(14, 165, 233, 0.35) !important;
}

.btn_add_config i {
    margin-right: 6px;
}

.modal_classifica_list {
    background: #fafafa;
}

.modal_classifica_col_header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 15px;
    background: #f8fafc;
    border-bottom: 1px solid var(--color-border-light);
    font-size: 0.75rem;
    font-weight: 800;
    color: var(--color-text-muted);
}

.modal_classifica_col_header .counter {
    background: var(--color-primary);
    color: white;
    padding: 2px 8px;
    border-radius: 12px;
    font-size: 0.7rem;
    min-width: 24px;
    text-align: center;
}

/* Bottone "Seleziona/Deseleziona tutto" nelle colonne Gruppi/Piste/Servizi */
.mm_bulk_btn {
    margin-left: auto;
    margin-right: 8px;
    padding: 3px 9px;
    border: 1px solid var(--color-border-light, #e5e7eb);
    border-radius: 6px;
    background: #fff;
    color: var(--color-primary, #0066cc);
    font-size: 0.65rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    white-space: nowrap;
    cursor: pointer;
    transition: background-color 0.15s ease, border-color 0.15s ease;
}

.mm_bulk_btn:hover:not(:disabled) {
    background: var(--color-primary, #0066cc);
    border-color: var(--color-primary, #0066cc);
    color: #fff;
}

.mm_bulk_btn:disabled {
    opacity: 0.45;
    cursor: default;
}

.tm_col_search {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 10px;
    background: #fafafa;
    border-bottom: 1px solid var(--color-border-light);
    color: var(--color-text-muted);
    font-size: 0.75rem;
}

.tm_col_search input {
    flex: 1;
    border: none;
    background: transparent;
    outline: none;
    font-size: 0.8rem;
    color: inherit;
}

.tm_col_search_clear {
    cursor: pointer;
    color: var(--color-text-muted);
    visibility: hidden;
    padding: 2px;
}

.tm_col_search input:not(:placeholder-shown) ~ .tm_col_search_clear {
    visibility: visible;
}

.tm_col_search_clear:hover {
    color: var(--color-text-primary, #333);
}

.modal_classifica_col_body {
    flex: 1;
    overflow-y: auto;
    padding: 5px;
}

.modal_list_item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    margin: 2px 0;
    border-radius: 4px;
    cursor: pointer;
    transition: background 0.2s;
    font-size: 0.85rem;
}

.modal_list_item:hover {
    background: #e0f2fe;
}

.modal_list_item.active {
    background: #bae6fd;
    font-weight: 600;
}

.modal_list_item_with_inputs {
    display: flex;
    flex-direction: column;
    padding: 8px 10px;
    margin: 2px 0;
    border-radius: 4px;
    cursor: pointer;
    transition: background 0.2s;
    font-size: 0.85rem;
    border-left: 3px solid transparent;
}

.modal_list_item_with_inputs:hover {
    background: #f0f9ff;
}

.modal_list_item_with_inputs.viewing {
    background: #e0f2fe;
    border-left-color: #0066cc;
}

.modal_list_item_with_inputs.active {
    background: #bae6fd;
    font-weight: 600;
}

.modal_item_main {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
}

.modal_item_main span {
    flex: 1;
}

.modal_item_inputs {
    display: flex;
    gap: 5px;
    margin-top: 5px;
    padding-left: 24px;
}

.ts_inline_input {
    width: 60px;
    padding: 2px 5px;
    border: 1px solid #ccc;
    border-radius: 4px;
    font-size: 0.8rem;
}

.modal_list_item input[type="checkbox"] {
    cursor: pointer;
}

.modal_list_item span {
    flex: 1;
    cursor: pointer;
}

.modal_list_item .item_count {
    font-size: 0.75rem;
    color: var(--color-text-muted);
    font-weight: 600;
    margin-left: 6px;
}

.tree_container {
    border: 1px solid var(--color-border-light);
    border-radius: var(--radius-md);
    background: #fdfdfd;
    margin-top: 10px;
}

.tree_macro_item {
    border-bottom: 1px solid var(--color-border-light);
}

.tree_macro_header {
    display: flex;
    align-items: center;
    padding: 12px 15px;
    background: #f8fafc;
    cursor: pointer;
    gap: 10px;
}

.tree_macro_header:hover {
    background: #f1f5f9;
}

.tree_macro_header span.counter {
    background: var(--color-primary);
    color: white;
    padding: 2px 8px;
    border-radius: 10px;
    font-size: 0.7rem;
    font-weight: 700;
}

.tree_micro_list {
    padding: 10px 40px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    background: white;
}

.tree_micro_item {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 0.85rem;
}

.tree_micro_list.hidden {
    display: none;
}

.tree_toggle_icon {
    width: 20px;
    text-align: center;
    transition: transform 0.2s;
}

.tree_macro_item.expanded .tree_toggle_icon {
    transform: rotate(90deg);
}

.modal_body_flex_grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 30px;
    height: 100%;
}

.settings_header_flex {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    margin-bottom: 25px;
}

.settings_title_section h4 {
    font-size: 1.5rem;
    color: var(--color-text-darker);
    margin: 0 0 5px 0;
}

.settings_title_section p {
    color: var(--color-text-muted);
    font-size: 0.9rem;
    margin: 0;
}

.all-badge {
    background: #f1f5f9;
    color: #475569;
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 0.7rem;
    font-weight: 700;
}

.metric-badge {
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    text-align: center;
    display: inline-block;
    min-width: 30px;
}

.metric-badge.PT {
    background-color: #fff3cd;
    color: #856404;
}

.metric-badge.PZ {
    background-color: #d4edda;
    color: #155724;
}

.premium_table_container {
    background: white;
    border: 1px solid var(--color-border-light);
    border-radius: var(--radius-lg);
    overflow: hidden;
}

.classifica_config_list .table_header_row {
    background: #f8fafc;
    border-bottom: 2px solid var(--color-border-light);
}

.classifica_config_list .table_data_row:hover {
    background: #fdfdfd;
}


.text-success {
    color: var(--color-success) !important;
}

.message-container {
    margin-top: 15px;
    text-align: center;
    font-weight: bold;
}

.full-width-cell {
    grid-column: 1 / -1;
    text-align: center;
}

.body {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    height: 100vh;
    width: 100vw;
    background-color: var(--color-bg-light);
    font-family: 'Exo 2', sans-serif;
    font-weight: 300;
    box-sizing: border-box;
    overflow: hidden;
}

.main_header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: var(--color-bg-white);
    height: var(--header-height);
    width: 100%;
    padding: 10px 0;
    box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.1);
    /* position + z-index alti: l'header (e il dropdown utente al suo interno)
       deve stare SOPRA la barra filtri in overlay (.filter_area z-index 1200). */
    position: relative;
    z-index: 1300;
}

.header_left {
    display: none;
    /* Nascosto su desktop */
    justify-content: center;
    align-items: center;
    width: 45px;
    height: 45px;
    border-radius: var(--radius-md);
    background-color: var(--color-primary);
    color: white;
    cursor: pointer;
}

.header_center {
    display: flex;
    flex: 1;
    justify-content: center;
    align-items: center;
    height: 100%;
    gap: 5px;
}

.header_right {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 10px;
    padding: 0 10px
}

.header_user_desktop {
    display: flex;
    align-items: center;
    position: relative;
    /* Sopra la barra filtri (z-index fino a 2000) cosi' il dropdown utente
       non finisce dietro la sidebar dei filtri. */
    z-index: 2100;
}

/* Pill trigger */
.user_pill {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 5px 10px 5px 5px;
    border-radius: 999px;
    border: 1px solid var(--color-border);
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s;
    user-select: none;
    background: #fff;
}
.user_pill:hover { background: var(--color-bg-light); border-color: #b0bec5; }

.user_pill_avatar {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--color-primary);
    color: #fff;
    font-size: 0.75rem;
    font-weight: 800;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.user_pill_name {
    font-size: 0.83rem;
    font-weight: 700;
    color: var(--color-text-darker);
}

.user_pill_chevron {
    font-size: 0.65rem;
    color: #9ca3af;
    transition: transform 0.2s;
}
.user_pill_chevron_open { transform: rotate(180deg); }

/* Dropdown */
#header_user_menu_wrap { position: relative; }

.header_user_dropdown {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    background: #fff;
    border: 1px solid var(--color-border);
    border-radius: 12px;
    box-shadow: 0 8px 28px rgba(0,0,0,0.13);
    min-width: 190px;
    z-index: 2100;
    overflow: hidden;
}

.header_user_dropdown_header {
    padding: 14px 16px 12px;
}
.header_user_dropdown_name {
    font-size: 0.88rem;
    font-weight: 800;
    color: var(--color-text-darker);
}
.header_user_dropdown_level {
    font-size: 0.7rem;
    color: #9ca3af;
    font-weight: 600;
    margin-top: 2px;
}
.header_user_dropdown_divider {
    height: 1px;
    background: var(--color-border-light);
}
.header_user_dropdown_item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 11px 16px;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--color-text-primary);
    cursor: pointer;
    transition: background 0.15s;
}
.header_user_dropdown_item i { font-size: 0.9rem; width: 16px; text-align: center; }
.header_user_dropdown_item:hover { background: var(--color-bg-light); }
.header_user_dropdown_logout { color: #f43f5e; }
.header_user_dropdown_logout:hover { background: #fff1f2; }

.settings_btn_desktop {
    background: #ecfdf3;
    color: #16a34a;
    height: 32px;
    padding: 0 10px;
    border-radius: 8px;
    display: flex;
    gap: 6px;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s;
    border: 1px solid #bbf7d0;
}

.settings_btn_desktop:hover {
    background: #16a34a;
    color: white;
}

.settings_btn_desktop .nav_icon svg {
    width: 1.1rem;
    height: 1.1rem;
}

.settings_btn_label {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.5px;
    white-space: nowrap;
}

.header_left .nav_icon svg {
    width: 1.25rem;
    height: 1.25rem;
}

.mobile_menu_trigger {
    display: none;
    font-size: 24px;
    cursor: pointer;
    color: var(--color-text-dark);
}

@media (max-width: 768px) {
    .mobile_menu_trigger {
        display: none !important;
    }

    .header_center {
        position: fixed;
        top: 0;
        /* Sidebar parte da sopra */
        left: -100%;
        width: 100%;
        max-width: none;
        height: 100vh;
        /* Occupa tutta l'altezza */
        background-color: white;
        flex-direction: column;
        justify-content: flex-start;
        align-items: flex-start;
        padding: 20px 0;
        transition: left 0.3s ease;
        box-shadow: 4px 0 10px rgba(0, 0, 0, 0.1);
        z-index: 1001;
        overflow-y: auto;
    }

    .header_center.mobile-active {
        left: 0;
    }

    /* Pulsante chiusura sidebar mobile */
    .mobile_sidebar_close {
        width: 100%;
        padding: 15px 25px;
        border-bottom: 1px solid var(--color-bg-light);
        display: flex;
        align-items: center;
        justify-content: space-between;
        background-color: white;
        cursor: pointer;
        transition: background-color 0.2s;
    }

    .mobile_sidebar_close:hover {
        background-color: var(--color-bg-light);
    }

    .mobile_sidebar_close_text {
        font-weight: 700;
        font-size: 1.1rem;
        color: var(--color-text-darkest);
    }

    .mobile_sidebar_close_icon svg {
        width: 1.3rem;
        height: 1.3rem;
    }

    .mobile_sidebar_close_icon {
        color: var(--color-text-dark);
    }

    .header_center .section_item {
        width: 100%;
        height: auto !important;
        padding: 15px 25px !important;
        border-bottom: 1px solid var(--color-bg-light);
        font-size: 1.1rem;
    }

    .header_center .section_item.active {
        border-bottom: none !important;
        border-left: 4px solid var(--color-primary);
    }

    /* Mobile Sidebar Footer */
    .mobile_user_footer {
        width: 100%;
        margin-top: auto;
        border-top: 2px solid #f3f4f6;
        padding: 20px 25px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        background: #f9fafb;
    }

    .footer_box_user {
        display: flex;
        align-items: center;
        gap: 10px;
        font-weight: 800;
        color: var(--color-text-darker);
        font-size: 1rem;
    }

    .footer_box_logout {
        display: flex;
        align-items: center;
        gap: 8px;
        color: #ef4444;
        font-weight: 800;
        font-size: 1rem;
        cursor: pointer;
    }

    /* Bottom nav mobile: Attivazioni, Report, Classifica, Report Operatori */
    .mobile_bottom_nav {
        display: flex !important;
        flex-direction: row;
        justify-content: space-around;
        align-items: center;
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        height: 64px;
        min-height: 64px;
        background: var(--color-bg-white);
        box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.08);
        z-index: 100;
        padding: 6px 12px;
        padding-bottom: calc(6px + env(safe-area-inset-bottom, 0));
    }

    .mobile_bottom_nav_item {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 3px;
        flex: 1;
        min-width: 0;
        min-height: 48px;
        padding: 10px 10px 6px;
        color: #6b7280;
        font-size: 0.72rem;
        font-weight: 600;
        line-height: 1.2;
        cursor: pointer;
        transition: color 0.2s, background 0.2s;
        border: none;
        background: transparent;
    }

    .mobile_bottom_nav_item .nav_icon svg {
        width: 1.35rem;
        height: 1.35rem;
    }

    .mobile_bottom_nav_item.active {
        color: var(--color-primary);
        background-color: var(--color-bg-light);
        border-radius: 10px;
        border: none;
        box-shadow: none;
    }

    .mobile_bottom_nav_item.active .nav_icon {
        color: var(--color-primary);
    }

    /* Spazio sotto il contenuto per non restare coperto dalla bottom nav
       Usa env(safe-area-inset-bottom) per iPhone con home indicator */
    .body {
        padding-bottom: calc(80px + env(safe-area-inset-bottom, 0px));
    }
}


.main_content {
    display: flex;
    height: 100%;
    width: 100%;
    flex: 30;
    padding: 10px;
    min-height: 0;
    overflow: hidden;
    align-items: stretch;
}

.global_stale_filter_banner {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 16px;
    background: #fff4e5;
    border-bottom: 1px solid #f0b429;
    color: #7a4a00;
    font-size: 0.9rem;
    flex-shrink: 0;
    width: 100%;
    box-sizing: border-box;
}

.global_stale_filter_banner.hidden {
    display: none;
}

.global_stale_filter_banner button {
    margin-left: auto;
    padding: 4px 12px;
    border: 1px solid #f0b429;
    background: #fff;
    color: #7a4a00;
    border-radius: 6px;
    cursor: pointer;
    font-size: 0.85rem;
    white-space: nowrap;
}

.global_stale_filter_banner button:hover {
    background: #f0b429;
    color: #fff;
}

/* Icone navigazione (FA solid <i>) */
.nav_icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: inherit;
    font-size: 1.1em;
    width: 1.25em;
    text-align: center;
}

.nav_icon svg {
    width: 1.25em;
    height: 1.25em;
    color: currentColor;
}

.section_item {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 6px;
    border-radius: 6px;
    padding: 5px 10px;
    font-size: 0.78rem;
    font-weight: 500;
    color: var(--color-text-darker);
}

.section_item .nav_icon {
    font-size: 1em;
    width: 1em;
}

.section_item .nav_icon svg {
    width: 1em;
    height: 1em;
}

.section_item:hover {
    background-color: var(--color-bg-light);
    cursor: pointer;
}

.section_item.active {
    background-color: #e8f0fe;
    color: var(--color-primary);
}

.main_table {
    display: flex;
    flex: 3;
    justify-content: space-between;
    align-items: flex-start;
    min-width: 0;
    height: 100%;
    min-height: 0;
    padding: var(--spacing-sm);
    overflow: hidden;
}

.table {
    width: 100%;
    height: 100%;
    padding: var(--spacing-md);
    background-color: var(--color-bg-white);
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    gap: var(--spacing-md);
}

.table.noheaders {
    gap: 0;
}

.table.noheaders .table_filters {
    height: 0;
    display: none;
}

.body_area {
    width: 100%;
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

/* Wrapper unico header+body per il Report */
.report_table_card {
    display: flex;
    flex-direction: column;
    width: 100%;
    border-radius: 10px;
    overflow: hidden;
    background: var(--color-bg-white);
    flex: 1;
    min-height: 0;
}

.report_table_card .table_header {
    border-radius: 0;
    flex-shrink: 0;
}

.report_table_card .table_body {
    border-radius: 0;
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
}

.toggle_switch {
    position: relative;
    display: inline-block;
    width: 50px;
    height: 24px;
}

.toggle_switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

.toggle_slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #ccc;
    transition: .4s;
    border-radius: 24px;
}

.toggle_slider:before {
    position: absolute;
    content: "";
    height: 18px;
    width: 18px;
    left: 3px;
    bottom: 3px;
    background-color: white;
    transition: .4s;
    border-radius: 50%;
}

.toggle_switch input:checked+.toggle_slider {
    background-color: var(--color-success);
}

.toggle_switch input:checked+.toggle_slider:before {
    transform: translateX(26px);
}

.toggle_switch input:disabled+.toggle_slider {
    opacity: 0.5;
    cursor: not-allowed;
}

.table_header,
.table_body {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    width: 100%;
    background-color: var(--color-bg-white);
    font-size: 14px;
    text-transform: uppercase;
}

.table_header {
    justify-content: space-between;
    align-items: center;
    width: 100%;
    height: auto;
    font-weight: 600;
    background-color: var(--color-bg-light);
    border-radius: var(--radius-md);
}

/* ========================================= */
/* === Settings Section & Tabs === */
/* ========================================= */

.settings_tabs_container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    background: #fff;
    padding: 6px 10px;
    border-bottom: 1px solid var(--color-border);
}

.settings_tab_actions {
    display: flex;
    align-items: center;
}

.classifica_layout {
    margin-top: 15px;
    height: calc(100vh - 350px);
    min-height: 500px;
}


.classifica_layout .mm_col_large {
    flex: 2;
    /* Più spazio per config e azioni */
}

.classifica_config_mini_table {
    display: flex;
    flex-direction: column;
    width: 100%;
    background: white;
    border-radius: 4px;
    overflow: hidden;
    border: 1px solid var(--color-border-light);
}

.mini_header {
    display: flex;
    background: #f8fafc;
    padding: 8px 12px;
    font-size: 0.7rem;
    font-weight: 800;
    color: var(--color-text-muted);
    border-bottom: 1px solid var(--color-border-light);
    text-transform: uppercase;
}

.mini_header span {
    flex: 1;
    text-align: center;
}

.mini_header span:first-child {
    flex: 2;
    text-align: left;
}

.mini_row {
    display: flex;
    padding: 10px 12px;
    font-size: 0.85rem;
    border-bottom: 1px solid #f1f5f9;
    align-items: center;
    transition: background 0.2s;
}

.mini_row:hover {
    background-color: #f1f5f9;
}

.mini_row span {
    flex: 1;
    text-align: center;
}

.mini_row span:first-child {
    flex: 2;
    text-align: left;
    font-weight: 600;
}

.mini_row .flex-gap {
    flex: 1;
    justify-content: center;
}

.servizio_name {
    font-size: 0.8rem;
    color: var(--color-text-dark);
}

/* Tree Multilivello (Macro > Micro > Servizio) */
.tree_container {
    border: 1px solid var(--color-border-light);
    border-radius: 8px;
    padding: 10px;
    max-height: 400px;
    overflow-y: auto;
    background: #fafafa;
}

.tree_macro_item {
    margin-bottom: 5px;
}

.tree_macro_header,
.tree_micro_header_row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 10px;
    background: white;
    border: 1px solid #eee;
    border-radius: 4px;
    cursor: pointer;
    font-size: 0.85rem;
    font-weight: 600;
}

.tree_macro_header:hover,
.tree_micro_header_row:hover {
    background: #f0f7ff;
}

.tree_micro_list {
    padding-left: 20px;
    margin: 5px 0;
}

.tree_micro_wrapper {
    margin-bottom: 4px;
}

.tree_servizio_list {
    padding-left: 25px;
    margin: 4px 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.tree_servizio_item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 4px 10px;
    font-size: 0.8rem;
    color: #444;
}

.tree_toggle_icon {
    font-size: 0.7rem;
    width: 12px;
    transition: transform 0.2s;
}

.expanded>.tree_macro_header .tree_toggle_icon,
.expanded>.tree_micro_header_row .tree_toggle_icon {
    transform: rotate(90deg);
}

.table_header_row {
    display: flex;
    background-color: var(--color-bg-gray);
    font-weight: 700;
    padding: 12px;
    font-size: 0.8rem;
    color: var(--color-text-darker);
}

.table_data_row {
    display: flex;
    padding: 12px;
    border-bottom: 1px solid var(--color-border-light);
    font-size: 0.9rem;
    align-items: center;
    transition: background 0.2s;
    text-transform: none;
    /* Rimuoviamo uppercase per leggibilità */
}

.table_data_row:hover {
    background-color: #f9fafb;
}

.table_data_row .td,
.table_header_row .th {
    flex: 1;
    display: flex;
    justify-content: flex-start;
}

.flex-gap {
    gap: 15px;
    display: flex;
}

.btn-edit {
    color: var(--color-primary);
    cursor: pointer;
}

.btn-delete {
    color: #ef4444;
    cursor: pointer;
}

.badge {
    padding: 4px 8px;
    border-radius: 6px;
    font-size: 0.75rem;
    font-weight: 600;
}

.badge-private {
    background-color: #fef2f2;
    color: #ef4444;
    border: 1px solid #fee2e2;
}

.badge-public {
    background-color: #f0fdf4;
    color: #16a34a;
    border: 1px solid #dcfce7;
}


.table_body {
    height: 100%;
    max-height: 100%;
    overflow: auto;
    vertical-align: top;
}

.header_row,
.body_row {
    width: 100%;
    height: 50px;
    min-height: 50px;
    max-height: 50px;
    border-radius: 5px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: var(--color-text-dark);
    padding: 0 10px;
}

.body_row {
    border: 1px solid white;
    border-bottom: 1px solid var(--color-border-table);
    background-color: #fff;
    cursor: pointer;
    font-size: 14px;
    font-weight: 500;
    transition: 0.2s all ease-in-out;
}

/* Righe più sottili per attivazioni e vendite */
.body_row.attivazioni_card {
    height: 36px;
    min-height: 36px;
    max-height: 36px;
    font-size: 12px;
    padding: 0 8px;
}

/* Header compatto (stessa altezza e font delle righe attivazioni/vendite) */
.compact_header_row {
    height: 36px;
    min-height: 36px;
    max-height: 36px;
    font-size: 12px;
    padding: 0 8px;
}

.body_row.active {

    border-radius: 15px;
    border: 1px solid var(--color-primary);
    transition: 0.2s all ease-in-out;
}

.td,
.th {
    flex: 1;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/*.header_row > th:first-child{
    border-radius: 10px  0 0 10px;
}
.header_row > th:last-child{
    border-radius: 0 10px 10px 0;
}*/

.fa-square-plus {
    color: var(--color-primary);
    font-size: 20px;
}

.modal_overlay.hidden {
    display: flex;
    width: 0;
    height: 0;
    overflow: hidden;
    visibility: hidden;
    pointer-events: none;
    transition: all 0.3s ease;
}

.modal_overlay.hidden * {
    width: 0;
    height: 0;
    padding: 0;
    margin: 0;
    border: 0;
    overflow: hidden;
    opacity: 0;
    pointer-events: none;
    transition: all 0.3s ease;
}

.modal_overlay.active {
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    z-index: 1000;
    width: 100vw;
    height: 100vh;
    transition: all 0.3s ease;
    background-color: #242529b4;
    box-sizing: border-box;
    padding: 50px;
}

.modal_overlay.hidden .modal_content {
    display: flex;
    flex: 1;
    min-height: 0;
    width: 0;
    height: 0;
}

.modal_overlay.active .modal_content {
    width: auto;
    height: auto;
    background-color: white;
    border-radius: 12px;
    padding: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

/* ========================================= */
/* === Form Versamenti Styles === */
/* ========================================= */

.fv_main {
    display: flex;
    flex: 1;
    min-height: 0;
    justify-content: space-between;
    gap: 10px;

}

.modal_body {
    display: flex;
    flex: 1;
    min-height: 0;
    width: auto;
    height: 100%;
    gap: 10px;
}

/* === Stile in comune tra le colonne === */
.fv_col1,
.fv_col2,
.fv_col3 {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    flex: 1;
    border-radius: var(--border-radius);
    height: 800px;
    padding: 10px;
    border: 1px solid var(--color-border);
    width: 100%;
}

.fv_col1 {
    background-color: #eceff1;
    flex: 3;
    min-width: 800px;
    max-width: 800px;

    * {
        border: none !important;
    }

    cursor: pointer;
}

.fv_col2 {

    min-width: 450px;
    max-width: 450px;
}

.fv_col3 {
    background-color: var(--color-bg-white);
    min-width: 450px;
    max-width: 450px;

}

.modal_header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 16px 20px;
    border-bottom: 1px solid var(--color-border-light);
    background: white;
    border-radius: 12px 12px 0 0;
    flex-shrink: 0;
    justify-content: space-between;
}

.modal_header h4 {
    margin: 0;
    font-size: 15px;
    font-weight: 700;
    color: var(--color-text-primary);
    display: flex;
    align-items: center;
    gap: 8px;
}

/* ========================================= */
.col_header {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 10px;
    padding: 10px;
    flex: 1;
    width: 100%;
    border-radius: var(--border-radius);
    background-color: #eceff1;
}

.step {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 10px;
    border-radius: var(--border-radius);
    background-color: var(--color-primary-hover);
    color: white;
    height: 30px;
    max-height: 30px;
    width: 30px;
    max-width: 30px;
    font-size: 14px;
    font-weight: 600;
}

h4 {
    font-size: 16px;
    font-weight: 600;
    color: #000000;
}

.container_parent {
    display: flex;
    gap: 20px;
    width: 100%;
}

.expanded {
    flex: 1;
}

.equal {
    flex: 1;
}

.container_child {
    display: flex;
    flex-direction: column;
    gap: 5px;
    width: 100%;
}

.container_child.row {
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius);
    display: flex;
    flex-direction: row;
    gap: 10px;
    padding: 10px;
    width: 100%;
    align-items: center;
    justify-content: center;

    i {
        font-size: 20px;
        color: #666;
    }
}

.range_value {
    font-size: 12px;
    font-weight: 600;
    color: #333;
    min-width: 40px;
    text-align: center;
}

.range_btn {
    background: #f8f9fa;
    border: 1px solid var(--color-border);
    border-radius: 8px;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
    font-size: 14px;
    color: #666;
}

.range_btn:hover {
    background: #e9ecef;
    border-color: #ccc;
    color: #333;
}

.range_btn:active {
    background: #dee2e6;
    transform: scale(0.95);
}

.container_child>label {
    margin-left: 10px;
    font-size: 14px;
    font-weight: 600;
    color: #000000;
}

.container_child>input {
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius);
    padding: 10px 15px;
    width: 100%;
    outline: none;
}

.anteprima {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 10px;
    width: 100%;
    height: 100%;
    border: 1px solid var(--color-border);
    border-radius: 15px;
    padding: 10px;

    i {
        font-size: 60px;
    }

    span {
        font-size: 12px;
        text-wrap: wrap;
        font-weight: 400;
    }
}

.btn_edit {
    width: 100%;
    height: 40px;
    border-radius: var(--border-radius);
    border: 1px solid var(--color-border);
    background-color: var(--color-bg-white);
    color: rgb(0, 0, 0);
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;

    &:hover {
        transition: all 0.2s ease;
        background-color: var(--color-primary-hover);
        color: white;
    }

    &:active {
        transition: all 0.2s ease;
        background-color: rgb(5, 104, 218);
        color: white;
    }
}

.btn_file {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    width: fit-content;
    padding: 10px 16px;
    border-radius: 12px;
    border: none;
    background-color: var(--color-primary-hover);
    color: #fff;
    font-weight: 700;
    cursor: pointer;
}

.btn_file:hover {
    background-color: rgb(5, 104, 218);
}

.file_result {
    font-size: 12px;
    color: #555;
    margin-left: 6px;
}

.preview_container {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: var(--border-radius);
    background: #fff;
    overflow: hidden;
}

.preview_image {
    object-fit: contain;
    transition: transform 0.1s ease-out;
    transform-origin: center center;
}

.preview_controls {
    display: flex;
    gap: 10px;
    justify-content: center;
    margin-top: 15px;
}

.preview_controls .btn_edit {
    width: auto;
    padding: 8px 12px;
}

.instructions {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 10px;
    width: 100%;
    height: 100%;
}

.zelig {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 10px;
    background-color: #eceff1;
    border-radius: var(--border-radius);
}

text {
    font-family: 'Exo 2', sans-serif;
    font-weight: 500;
    font-size: 12px;
}

.btn_plus {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 10px;
    height: 40px;
    width: auto;
    border-radius: var(--border-radius);
    padding: 10px;
    background-color: var(--color-primary);
    color: white;

    i {
        color: white;
    }

}

/* ----------------------- USERS - Stores Picker ----------------------- */
.stores_clickable_list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 8px;
    flex: 1;
    min-height: 0;
    max-height: 260px;
    overflow-y: auto;
    padding: 8px 6px;
    border-radius: 12px;
    background-color: #f9fafb;
    border: 1px solid var(--color-border-light);
    align-items: flex-start;
    align-content: flex-start;
}

.store_option {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 4px 12px;
    border-radius: 999px;
    font-size: 12px;
    border: 1px solid var(--color-border-light);
    background-color: #f3f4f6;
    color: #111827;
    cursor: pointer;
    user-select: none;
    transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.store_option:hover {
    background-color: var(--color-border-light);
}

.store_option.selected {
    background-color: #2563eb;
    border-color: #2563eb;
    color: #ffffff;
}

/* ----------------------- USERS - User Form ----------------------- */
.user_form {
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding: 20px;
    max-width: 1100px;
    margin: 0 auto;
}

.user_form_header h3 {
    margin: 0;
    font-size: 18px;
    font-weight: 600;
    color: #111827;
}

.user_form_header p {
    margin: 4px 0 0;
    font-size: 12px;
    color: #6b7280;
}

.user_form_body {
    display: flex;
    flex-direction: row;
    align-items: stretch;
    gap: 24px;
}

.user_form_main {
    flex: 1;
}

.user_form_stores {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.user_form_grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px 16px;
}

.user_form_field {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.user_form_field label {
    font-size: 12px;
    font-weight: 600;
    color: #374151;
}

.user_form_field input,
.user_form_field select {
    height: 36px;
    border-radius: 8px;
    border: 1px solid #d1d5db;
    padding: 4px 10px;
    font-size: 13px;
    outline: none;
}

.user_form_field input:focus,
.user_form_field select:focus {
    border-color: #2563eb;
    box-shadow: 0 0 0 1px rgba(37, 99, 235, 0.2);
}

.field_readonly {
    background-color: #f9fafb;
    color: #6b7280;
    cursor: not-allowed;
}

.user_form_section {
    display: flex;
    flex-direction: column;
    gap: 6px;
    flex: 1;
}

.user_form_section>label {
    font-size: 12px;
    font-weight: 600;
    color: #374151;
}

.user_form_hint {
    font-size: 11px;
    color: #9ca3af;
}

.user_form_footer {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    margin-top: 16px;
}

.user_form_footer button {
    height: 40px;
    min-width: 110px;
    border-radius: var(--border-radius);
    border: 1px solid var(--color-border);
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}


@media (max-width: 992px) {
    .user_form_body {
        flex-direction: column;
    }

    .user_form_main,
    .user_form_stores {
        flex: 1 1 auto;
    }
}

.user_container {
    position: relative;
}

.user_info {
    position: absolute;
    top: 40px;
    right: 0;
    background-color: #fff;
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    padding: 15px;
    width: 250px;
    display: none;
    flex-direction: column;
    gap: 15px;
    z-index: 1000;
}

.user_info_header {
    font-weight: 700;
    font-size: 14px;
    color: #333;
}

.user_info_body {
    font-size: 16px;
    color: #555;
    padding: 5px 0;
}

.user_info_separator {
    height: 1px;
    background-color: #eee;
    width: 100%;
}

.user_info_footer {
    display: flex;
    justify-content: flex-start;
}

.btn_logout {
    background-color: transparent;
    border: 1px solid #ccc;
    border-radius: 5px;
    padding: 8px 15px;
    font-size: 16px;
    color: #333;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn_logout:hover {
    background-color: #f5f5f5;
    border-color: #999;
}

.user_info.active {
    display: flex;
}

.inline_actions {
    display: flex;
    gap: 10px;
    justify-content: flex-end;
    align-items: center;
}

.inline_action {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 30px;
    height: 30px;
    background-color: #f3f3f3;
    cursor: pointer;
    transition: all 0.2s ease;
    font-size: 13px;
    border-radius: var(--border-radius);
}

.inline_action_text {
    display: none;
    position: absolute;
    left: -100px;
    padding: 5px 15px;
    border-radius: var(--border-radius);
    z-index: 100;
    background-color: #06d6a0;
    color: rgb(0, 10, 3);
    font-size: 10px;
    transition: all 0.2s ease;
    width: fit-content;
    white-space: nowrap;
}

.inline_action:hover .inline_action_text {
    display: block;
    transition: all 0.2s ease;

}

.row_detail {
    display: none;
    flex-direction: column;
    flex: 1;
    justify-content: flex-start;
    align-items: center;
    height: 100%;
    width: 400px;
    min-width: 400px;
    max-width: 400px;
    background-color: #f7f9fb;
    line-height: 40px;
    padding: 10px;

    * {
        width: 100%;
    }
}

.row_detail.active {
    display: flex;
}

.detail_header {
    width: 100%;
    height: 40px;
    background-color: var(--color-primary);
    border: 1px solid var(--color-primary);
    ;
    display: flex;
    justify-content: center;
    align-items: center;
    color: var(--color-bg-white);
    font-weight: 500;
}

.detail_body {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 10px;
}

.container_messaggio {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    background-color: #f1f2f5;
    border-radius: var(--border-radius);
    padding: 10px;
}

.table_filters {
    display: none;
}

.div_table {
    width: 100%;
    height: 100%;
}

.esito_span {
    background-color: rgb(239, 243, 242);
    border-radius: 20px;
    padding: 5px 10px;
    color: rgb(42, 44, 44);
    font-size: 12px;
    text-transform: uppercase;
    font-weight: 700;
}

.esito_span.esitato {
    background-color: rgb(209, 245, 225);
    color: rgb(6, 182, 85);
}

.esito_span.richiesta_assistenza {
    background-color: rgb(235, 234, 230);
    color: rgb(43, 42, 38);
}

.fa-trash-can {
    color: rgb(158, 7, 7);
}

.msg_giallo {
    background-color: #fdea93;
    color: #352503;
}

.msg_verde {
    background-color: #57f38e;
    color: #01180d;
}

select {
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius);
    padding: 10px 15px;
    width: 100%;
    outline: none;
}

.clearInput {
    background-color: rgb(248, 248, 248);
    padding: 5px;
    position: relative;
    right: 35px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 20px;
    height: 20px;
    cursor: pointer;
}

.fv_col3.edit {
    gap: 10px;
}

.dataHeaders {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    background-color: #f0f0f0;
    padding: 5px;
    height: 50px;

    .th {
        display: flex;
        justify-content: center;
        align-items: center;
    }

}

.dataBody {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    overflow: auto;

    .td {
        display: flex;
        justify-content: center;
        align-items: center;
    }
}

.somma {
    background-color: #f0f0f0;
    width: 100%;
    height: 60px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: var(--border-radius);
    padding: 5px;

}

.btn_reset_somma_date {
    border: none;
    height: 100%;
    width: auto;
    font-size: 12px;
    font-weight: 700;
    color: #ffffff;
    background-color: #ff3333;
    position: relative;
    right: -170px;
    padding: 0 10px;
    border-radius: 10px;
}

.btn_reset_somma_date:hover {
    color: #ffffff;
    background-color: #f33131;
}

.raggruppamenti {
    width: 100%;
    height: auto;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 15px;
    padding: 0 10px;
}

.raggruppamento {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: auto;
    height: 100%;
    gap: 10px;
    background-color: var(--color-bg-light);
    padding: 3px 3px 3px 15px;
    border-radius: 20px;
    cursor: pointer;
}

.raggruppamento:hover {
    background-color: rgb(229, 237, 243);

    .conteggio {
        background-color: rgb(198, 214, 230);
    }
}

.raggruppamento.active {

    .conteggio {
        background-color: var(--color-primary);
        color: white;
    }

    .raggruppamento_title {
        font-weight: 500;
    }
}

.raggruppamento_title {
    font-size: 13px;
    text-transform: uppercase;
}

.conteggio {
    background-color: rgb(216, 228, 240);
    border-radius: 50%;
    width: 25px;
    height: 25px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 13px;
}

.chiusure_coppia {
    flex: 2;
    display: flex;
    justify-content: center;
    align-items: center;
    max-width: 250px !important;
    height: auto;
    gap: 10px;
    border-radius: 20px;
    padding: 5px 10px;
    font-size: 14px;
    text-transform: uppercase;
    font-weight: 500;
}

.body_row:has(.esito_giornata.congruente) .check.congruente {
    background-color: rgb(209, 245, 225);
    color: rgb(6, 182, 85);
}

.body_row:has(.esito_giornata.congruente) .check.incongruente {
    background-color: rgb(209, 216, 245);
    color: rgb(6, 88, 182);
}

.body_row:has(.esito_giornata.incongruente) .check.incongruente {
    background-color: rgb(252, 214, 214);
    color: rgb(240, 26, 44);
}

.body_row:has(.esito_giornata.incongruente) .check.congruente {
    background-color: rgb(209, 245, 225);
    color: rgb(6, 182, 85);
}

.day_info_row.congruente {
    background-color: rgb(209, 245, 225);
    color: rgb(6, 182, 85);
    padding: 0px 2px;
    border-radius: 5px;
}

.day_info_row.incongruente {
    background-color: rgb(252, 214, 214);
    color: rgb(240, 26, 44);
    padding: 0px 2px;
    border-radius: 5px;
}

.day_info_row.da_fare {
    background-color: rgb(209, 216, 245);
    color: rgb(6, 88, 182);
    padding: 0px 2px;
    border-radius: 5px;
}

.storesContainer {
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    border: 1px solid var(--color-border);
    border-radius: 10px;
    padding: 5px;
    gap: 5px;
    height: auto;
    width: 100%;
    overflow-y: auto;
    flex-wrap: wrap;
}

.storeElement {
    background-color: #eceff1;
    padding: 5px 10px;
    text-transform: uppercase;
    font-size: 13px;
    font-weight: 400;
    border-radius: 10px;
    cursor: pointer;
}

.storeElement.active {
    background-color: var(--color-primary-hover);
    color: var(--color-bg-white);

}

/* --------------- Dettaglio Riga ------------------*/
.main_dettaglio {
    height: 100%;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    gap: 10px;
}

.header_dettaglio {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: var(--color-bg-light);
    width: 100%;

    span {
        font-size: 12px;
    }

    p {
        font-size: 12px;
    }
}

.sezioneDettaglio {
    text-align: center;
    vertical-align: middle;
    text-transform: uppercase;
    font-size: 14px;

}

.sezioneDettaglio:hover {
    background-color: rgb(223, 231, 236);
    cursor: pointer;
}

.sezioneDettaglio.active {
    background-color: rgb(255 221 0);
    cursor: pointer;
}

.body_dettaglio {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    box-sizing: border-box;
    height: 100%;
    width: 100%;
    overflow-y: hidden;
}

.layout_dettaglio_riga {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 25px;
    border-bottom: 1px solid rgb(216, 225, 233);

    span {
        flex: 3;
        font-size: 12px;
        text-transform: uppercase;
        font-weight: 600;
    }

    p {
        flex: 3;
        font-size: 14px;
        border-radius: 5px;
        padding: 0px 15px;
        text-align: left;
    }

}

.sezione_dettaglio {
    border-radius: 5px;
    transition: all 0.3sec ease-in-out;
    padding: 10px;

}

.container.note {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    height: 100%;
    width: 100%;
    gap: 10px;
}

.container.note.hidden {
    display: none;
    height: 0;
    width: 0;
}

.container.note.hidden * {
    display: none;
    height: 0;
    width: 0;
    border: none;
    outline: none;
}

.container.files {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    height: 100%;
    width: 100%;
    gap: 10px;
}

.container.files.hidden {
    display: none;
    height: 0;
    width: 0;
}

.container.files.hidden * {
    display: none;
    height: 0;
    width: 0;
    border: none;
    outline: none;
}

.body_notes,
.body_files {
    background-color: var(--color-bg-light);
    height: 100%;
    border-radius: 10px;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    padding: 10px 10px 0 10px;
    overflow-y: auto;
    scrollbar-width: thin;
    border: 2px solid var(--color-bg-light);

}

.body_files {
    gap: 10px;
}

.body_notes {
    flex-direction: column-reverse;
}

.footer_note {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    height: auto;
}

.footer_messaggio {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
}

#nota_messaggio {
    font-size: 14px;
    height: 100px;
    resize: vertical;
    overflow-y: auto;
    overflow-x: hidden;
    border: 1px solid var(--color-primary);
    outline: none;
    border-radius: 10px;
    white-space: pre-wrap;
    word-wrap: break-word;
    padding: 10px;
    text-align: left;
    vertical-align: top;
    line-height: 1.5;

}

.footer_pulsanti {
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
}

.btn_new_note {
    height: 40px;
    border: none;
    border-radius: 10px;
    background-color: var(--color-primary);
    color: white;
    cursor: pointer;
}

.btn_new_note:hover {
    background-color: rgb(0, 110, 255);
}

.container.dettaglio {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    height: 100%;
    width: 100%;
}

.container.dettaglio.hidden {
    height: 0;
    width: 0;
}

.card {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    border-radius: 10px;

}

.messaggio {
    background-color: white;
    word-wrap: break-word;
    border-radius: 10px;
    height: auto;
    font-size: 13px;
    font-weight: 500;
    line-height: 1.8;
    padding: 10px;
}

.messaggio.mio {
    background-color: var(--color-bg-white);
    color: rgb(29, 28, 28);
    text-align: right;
}

.messaggio.altro {
    background-color: rgb(255 221 0);
    color: rgb(39 37 37);
    text-align: left;
}

.metadata {
    position: relative;
    top: -7px;
    right: 10px;
    font-size: 12px;
    font-weight: 400;
    font-family: monospace;
    text-align: right;
}

.calendar_day {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: auto;
    height: 100%;
    max-height: 100%;
    font-size: 12px;
    gap: 5px;
    border-radius: 5px;
    padding: 10px;
    cursor: pointer;
    transition: all 0.3s ease;
    border: 1px solid rgb(196, 202, 207);
    font-size: 0.7rem;
    overflow-y: hidden;
    overflow-x: hidden;
}

.span_descrizione {
    display: none;
    visibility: hidden;
    width: auto;
    transition: all 0.3s ease;
}

.calendar_day:hover {
    background-color: #e8f4f8;
    border-color: #4a90e2;
    box-shadow: 0 4px 12px rgba(74, 144, 226, 0.2);
    transition: all 0.3s ease;
    max-height: 100%;
    z-index: 1000;
    box-sizing: border-box;
}

.calendar_day:hover .span_descrizione {
    display: block;
    visibility: visible;
    border-radius: 5px;
    z-index: 1001;
    white-space: nowrap;
    width: auto;
}

.day_info_row {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 5px;
    width: 100%;
    border-bottom: 1px solid rgb(232, 233, 235);
}

.item2span {
    width: auto;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 5px;
    text-overflow: ellipsis;
}

.calendar_day.active {
    cursor: pointer;
    border-color: #4a90e2;
    box-shadow: 0 4px 12px rgba(74, 144, 226, 0.2);
}

.calendar_day_info {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    height: auto;
}

.versato {
    padding: 5px 10px;
    background-color: rgb(60, 255, 0);
    border-radius: 10px;
}

.non_versato {
    padding: 5px 10px;
    background-color: rgb(236, 237, 238);
    border-radius: 10px;
}

.calendar {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    padding: 20px;
    box-sizing: border-box;
}

.calendar_header {
    width: 100%;
    height: auto;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: flex-start;
    box-sizing: border-box;
}

.calendar_header_left,
.calendar_header_right {
    cursor: pointer;
    padding: 10px 15px;
    border-radius: 8px;
    transition: all 0.3s ease;
    background-color: #f0f0f0;
}

.calendar_header_left:hover,
.calendar_header_right:hover {
    background-color: var(--color-border);
}

.calendar_header_center h5 {
    margin: 0;
    font-size: 24px;
    font-weight: 600;
    color: #333;
}

.calendar_body {
    width: 100%;
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow-y: hidden;
    overflow-x: hidden;
    z-index: 2;
}

.calendar_body_header {
    width: 100%;
    height: 50px;
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 10px;
    margin-bottom: 10px;
}

.calendar_body_header_item {
    display: flex;
    justify-content: center;
    align-items: center;
    font-weight: 600;
    font-size: 14px;
    color: #666;
    text-transform: uppercase;
}

.calendar_body_content {
    width: 100%;
    flex: 1;
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    grid-auto-rows: 1fr;
    gap: 10px;
}

.calendar_day_number {
    /* position: absolute;
        top: 8px;
        left: 10px; */
    width: 100%;
    font-size: 16px;
    font-weight: 600;
    color: #333;
    text-align: left;
}

.calendar_day.other_month {
    background-color: #fafafa;
    border: 1px solid rgb(233 233 233);
}

.calendar_day.current_month {
    background-color: #ffffff;
}

.calendar_day.current_month .calendar_day_number {
    font-weight: 700;
}

.calendar_day.today .calendar_day_number {
    font-weight: 800;
}

.calendar_day_info {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: flex-start;
    width: 100%;
    height: auto;
    font-size: 12px;
    font-weight: 400;
}

.item1 {
    width: 35px;
}

.files_section {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    width: 100%;
    height: auto;
}

.files_section_header {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    height: 35px;
    color: rgb(0, 26, 138);
    padding: 0 5px 0 10px;
    text-transform: uppercase;
}

.files_actions {
    display: flex;
    justify-content: center;
    align-items: center;
    width: auto;
    height: 25px;
    background-color: #ffffff;
    color: rgb(0, 26, 138);
    cursor: pointer;
    gap: 10px;
    padding: 0 10px 0 5px;
    border-radius: 10px;

    i {
        text-align: center;
        color: rgb(0, 26, 138);
    }
}

.files_section_body {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    width: 100%;
    height: auto;
    gap: 5px;
}

.files_section_body.not_empty {
    padding: 10px;
}

.files_inline {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    height: auto;
    gap: 5px;
    border-bottom: 1px solid var(--color-border);
}

.files_input {
    flex: 8;
    border: none;
    outline: none;
    padding: 5px;
    height: 30px;
    font-size: 12px;
    background-color: transparent;
    color: rgb(0, 26, 138);
}

.files_input.editing {
    border: 1px solid #01031f;
    outline: none;
    box-shadow: none;
    background-color: #f7f9fb;
}

.files_inline_actions {
    display: flex;
    flex: 3;
    justify-content: flex-end;
    align-items: center;
    width: auto;
    height: 100%;
    border-radius: 7px;
    gap: 5px;
}

.files_inline_actions i {
    cursor: pointer;
    text-align: center;
    width: 100%;
    background-color: var(--color-bg-light);
    border-radius: 7px;
}

.calendar_day_header {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    width: 100%;
    height: auto;
    gap: 10px;
}

.main_congruente {
    background-color: #06d6a0;
    height: 20px;
    width: 20px;
    min-width: 20px;
    border-radius: 50%;
}

.main_incongruente {
    background-color: #e63946;
    height: 20px;
    width: 20px;
    min-width: 20px;
    border-radius: 50%;
}

.main_nulla {
    background-color: #e5e5e5;
    height: 20px;
    width: 20px;
    min-width: 20px;
    border-radius: 50%;
}

.user_container {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

.user_info {
    display: none;
    position: absolute;
    right: 0;
    top: 120%;
    width: 250px;
    background-color: #ffffff;
    border-radius: 12px;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
    flex-direction: column;
    padding: 15px;
    z-index: 1001;
    border: 1px solid rgba(0, 0, 0, 0.05);
}

.user_info.show {
    display: flex;
}

.user_info_header {
    font-size: 14px;
    font-weight: 600;
    color: #333;
    padding-bottom: 10px;
    border-bottom: 1px solid #eee;
    margin-bottom: 10px;
    width: 100%;
}

.user_info_body {
    padding: 10px 0;
    width: 100%;
    color: #666;
}

.user_info_footer {
    display: flex;
    align-items: center;
    gap: 10px;
    padding-top: 10px;
    border-top: 1px solid #eee;
    margin-top: 10px;
    width: 100%;
    cursor: pointer;
    color: #d9534f;
    transition: color 0.2s;
}

.user_info_footer:hover {
    color: #c9302c;
}

#in_id_comp {
    width: auto;
    height: 100%;
    border: none;
    outline: none;
    font-size: 12px;
    background-color: white;
    color: rgb(0, 26, 138);
}

.row_id {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    position: relative;
    gap: 5px;
}

.copy_btn {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 30px;
    height: 30px;
    background-color: #f3f3f3;
    cursor: pointer;
    transition: all 0.2s ease;
    border-radius: var(--border-radius);
}

.copy_btn:hover {
    background-color: var(--color-border);
}

.copy_btn i {
    font-size: 13px !important;
    color: var(--color-text-dark);
    margin: 0 !important;
}

.toast_container {
    position: fixed;
    bottom: 30px;
    left: 50%;
    transform: translateX(-50%);
    background-color: #333;
    color: #fff;
    padding: 10px 25px;
    border-radius: 30px;
    font-size: 14px;
    z-index: 9999;
    opacity: 0;
    transition: opacity 0.3s ease, transform 0.3s ease;
    pointer-events: none;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

.toast_container.show {
    opacity: 1;
    transform: translateX(-50%) translateY(-10px);
}

.popup_esito {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 300px;
    height: 100%;
    gap: 10px;
}

/* ========================================= */
/* === Filter Sidebar (desktop) / Bottom Sheet (mobile) === */
/* ========================================= */

/* --- Desktop: right sidebar --- */
.filter_area {
    flex: 0 0 0;
    width: 0;
    min-width: 0;
    overflow: hidden;
    transition: flex-basis 0.28s ease, width 0.28s ease;
    background: var(--color-bg-white);
    border-left: 1px solid var(--color-border);
    display: flex;
    flex-direction: column;
    height: 100%;
    position: relative;
}

.filter_area.sidebar-open {
    flex: 0 0 280px;
    width: 280px;
}

/* Desktop: sidebar filtri in overlay (non riduce la larghezza di main_table) */
@media (min-width: 769px) {
    .filter_area:not(.hidden) {
        position: fixed;
        top: var(--header-height);
        right: 0;
        bottom: 0;
        width: 340px;
        flex: none !important;
        min-width: 0 !important;
        height: auto;
        max-height: none;
        overflow: hidden;
        z-index: 1200;
        transition: transform 0.28s ease, visibility 0.28s ease, box-shadow 0.28s ease;
        box-shadow: -4px 0 24px rgba(15, 23, 42, 0.1);
        transform: translateX(100%);
        visibility: hidden;
        pointer-events: none;
    }

    .filter_area:not(.hidden).sidebar-open {
        transform: translateX(0);
        visibility: visible;
        pointer-events: auto;
    }
}

.filter_area.hidden {
    display: none;
}

/* Sidebar header (desktop only) */
.filter_sidebar_header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 13px 16px;
    border-bottom: 1px solid var(--color-border);
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    color: var(--color-text-dark);
    flex-shrink: 0;
    background: #f9fafb;
}

.filter_sidebar_header i {
    color: var(--color-primary);
    margin-right: 6px;
}

.filter_sidebar_close_btn {
    background: none;
    border: none;
    cursor: pointer;
    color: #9ca3af;
    font-size: 15px;
    padding: 4px 6px;
    border-radius: 6px;
    line-height: 1;
    transition: background 0.15s, color 0.15s;
}

.filter_sidebar_close_btn:hover {
    background: #e5e7eb;
    color: var(--color-text-dark);
}

/* filter_sheet: scrollable area inside sidebar */
.filter_sheet {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
    overflow: hidden;
}

/* Filter content area: vertical list */
.filtri_container {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 16px;
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    background: var(--color-bg-white);
    scrollbar-width: thin;
    scrollbar-color: #d1d5db transparent;
}

.filtri_container::-webkit-scrollbar {
    width: 4px;
}

.filtri_container::-webkit-scrollbar-thumb {
    background: #d1d5db;
    border-radius: 2px;
}

.filtro_gruppo {
    display: flex;
    flex-direction: column;
    gap: 5px;
    width: 100%;
}

/* Contenitore filtri dinamici autodichiarato: impila i sotto-filtri generati a runtime */
#group_ad_dynamic {
    gap: 12px;
}
#group_ad_dynamic .ad_dyn_filter {
    width: 100%;
}

.filtro_gruppo.filtro_ricerca {
    margin-left: 0;
}

.filtro_gruppo label {
    font-size: 11px;
    font-weight: 700;
    color: #6b7280;
    text-transform: uppercase;
    letter-spacing: 0.4px;
}

.filtro_input,
.filtro_select {
    height: 38px;
    padding: 7px 10px;
    border: 1px solid #d1d5db;
    border-radius: 8px;
    font-size: 13px;
    background-color: #fff;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
}

.filtro_input:focus,
.filtro_select:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px rgba(11, 102, 221, 0.1);
}

.filtro_select {
    cursor: pointer;
}

/* Dates: side by side even in sidebar */
.filtri_date_group {
    display: flex;
    gap: 8px;
}

.filtri_date_group .filtro_gruppo {
    flex: 1;
    min-width: 0;
}

.filtri_date_group .filtro_input {
    padding: 7px 5px;
    font-size: 12px;
}

/* Buttons: stacked at bottom of sidebar */
.filtro_buttons_right {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 14px 16px;
    border-top: 1px solid var(--color-border);
    flex-shrink: 0;
    background: var(--color-bg-white);
}

.btn_filtro {
    height: 40px;
    padding: 8px 16px;
    border: none;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.2s ease;
    background-color: var(--color-primary);
    color: #fff;
    width: 100%;
}

.btn_filtro:hover {
    background-color: rgb(9, 85, 184);
}

#btn_global_apply:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

.btn_filtro.btn_reset {
    background-color: #6c757d;
}

.btn_filtro.btn_reset:hover {
    background-color: #5a6268;
}

/* btn_secondary: used for Reset */
.btn_filtro.btn_secondary {
    background-color: #f1f5f9;
    color: #374151;
    border: 1px solid #e2e8f0;
}

.btn_filtro.btn_secondary:hover {
    background-color: #e2e8f0;
}

/* Hide "Nuovo Utente" btn by default (shown only for users section) */
#btn_users_nuovo {
    display: none;
}

.contatore_risultati {
    display: inline-block;
    padding: 8px 15px;
    background-color: var(--color-primary);
    color: #fff;
    border-radius: 20px;
    font-size: 13px;
    font-weight: 600;
}

/* Desktop filter toggle button in header */
.filter_btn_desktop {
    cursor: pointer;
    padding: 8px 10px;
    border-radius: var(--radius-md);
    color: var(--color-text-dark);
    transition: background 0.2s, color 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
}

.filter_btn_desktop:hover {
    background: var(--color-bg-light);
}

.filter_btn_desktop.active {
    color: var(--color-primary);
    background: #eff6ff;
}

.filter_btn_desktop.hidden {
    display: none;
}

/* ========================================= */
/* === Stili Report Inserito/Acquisito === */
/* ========================================= */


.tipo_toggle_pill {
    display: flex;
    background: var(--color-primary);
    border-radius: 999px;
    padding: 4px;
    gap: 0;
}

.tipo_toggle_btn {
    flex: 1;
    border: none !important;
    outline: none;
    background: transparent !important;
    border-radius: 999px !important;
    padding: 6px 16px;
    font-size: 0.8rem;
    font-weight: 500;
    color: rgba(255,255,255,0.75) !important;
    cursor: pointer;
    transition: background 0.18s, color 0.18s, box-shadow 0.18s;
    white-space: nowrap;
}

.tipo_toggle_btn.active {
    background: #fff !important;
    color: var(--color-primary) !important;
    font-weight: 600;
    box-shadow: 0 2px 6px rgba(0,0,0,0.15);
}

.tipo_toggle_btn:not(.active):hover {
    color: #fff;
}

#report_filtro_target {
    min-width: 450px !important;
    width: 450px;
}

.report_filtri .filtro_gruppo label {
    color: #333;
    font-weight: 600;
}

.report_filtri .filtro_input,
.report_filtri .filtro_select {
    border: 1px solid #ddd;
    background: #fff;
    min-width: 160px;
}

.report_filtri .btn_filtro.btn_report,
.report_filtri .btn_filtro:not(.btn_reset),
.users_filtri .btn_filtro.btn_report,
.users_filtri .btn_filtro:not(.btn_reset),
.macro_micro_filtri .btn_filtro.btn_report,
.macro_micro_filtri .btn_filtro:not(.btn_reset) {
    background-color: #10b981;
    color: #fff;
    font-weight: 700;
    border: none;
}

.report_filtri .btn_filtro.btn_report:hover,
.report_filtri .btn_filtro:not(.btn_reset):hover,
.users_filtri .btn_filtro.btn_report:hover,
.users_filtri .btn_filtro:not(.btn_reset):hover,
.macro_micro_filtri .btn_filtro.btn_report:hover,
.macro_micro_filtri .btn_filtro:not(.btn_reset):hover {
    background-color: #059669;
}

.report_filtri .btn_reset,
.users_filtri .btn_reset,
.macro_micro_filtri .btn_reset {
    background-color: #6b7280;
    color: #fff;
}

.report_filtri .btn_reset:hover,
.users_filtri .btn_reset:hover,
.macro_micro_filtri .btn_reset:hover {
    background-color: #4b5563;
}

/* Pulsante Nuovo utente nella barra filtri globali */
.global_filtri #btn_users_nuovo {
    background: #0066cc;
    color: white;
    border: none;
    padding: 0 24px;
    height: 40px;
    border-radius: 12px;
    cursor: pointer;
    font-weight: 600;
    font-size: 14px;
    display: none;
    /* Gestito da JS */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    transition: all 0.2s ease;
}

.global_filtri #btn_users_nuovo:hover {
    background-color: #0052a3;
    transform: translateY(-1px);
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.15);
}

/* -----------------------------
   SEZIONE BOTTONE - GRIGLIA EXCEL
------------------------------*/

.bottone_grid_wrapper {
    display: grid;
    grid-auto-flow: row;
    overflow-x: auto;
}

.bottone_header_row {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(80px, 1fr);
    background-color: var(--color-primary);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    border-radius: 6px 6px 0 0;
}

.bottone_row {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(80px, 1fr);
}

.bottone_cell {
    padding: 4px 6px;
    border: 1px solid var(--color-border-light);
    font-size: 11px;
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.bottone_header_cell {
    border-color: var(--color-primary);
}

.bottone_body_grid .bottone_row:nth-child(odd) .bottone_body_cell {
    background-color: #f9fafb;
}

.bottone_body_grid .bottone_row:nth-child(even) .bottone_body_cell {
    background-color: #ffffff;
}

.bottone_loading,
.bottone_empty,
.bottone_error {
    padding: 20px;
    text-align: center;
    font-size: 14px;
    color: #4b5563;
}

.bottone_error {
    color: #b91c1c;
}

/* ========================================= */
/* === SEZIONE BOTTONE - GRIGLIA STRUTTURATA === */
/* ========================================= */
:root {
    --bottone-green: var(--color-primary);
    --bottone-green-dark: var(--color-primary-hover);
    --bottone-green-light: #e8f0fe;
    --bottone-border: var(--color-border-light);
    --bottone-bg-alt: #f8fafc;
    --bottone-label-bg: var(--color-bg-light);
    --bottone-text: var(--color-text-dark);
    --bottone-text-muted: var(--color-text-muted);
    --bottone-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
    --bottone-shadow-card: 0 4px 6px -1px rgba(0, 0, 0, 0.07), 0 2px 4px -2px rgba(0, 0, 0, 0.05);
}

.bottone_grid_container {
    display: flex;
    flex-direction: column;
    gap: 24px;
    overflow-x: auto;
    max-width: 100%;
}

.bottone_warning_banner {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 16px;
    background: #fff4e5;
    border: 1px solid #f0b429;
    color: #7a4a00;
    border-radius: 8px;
    font-size: 0.9rem;
}

.bottone_warning_banner.hidden {
    display: none;
}

.bottone_main_row {
    display: grid !important;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
    align-items: start;
    width: 100%;
}

/* Forza layout in riga: tabella bottone e trimestri al 50% ciascuna */
.table_body .bottone_main_row {
    display: grid !important;
    grid-template-columns: 1fr 1fr;
}

/* Modalità tab: mostra una sola colonna a tutta larghezza.
   Il template contiene entrambe le colonne (così il JES esistente continua a
   funzionare); la classe sul contenitore decide quale mostrare. */
.bottone_main_row.mode_bottone,
.table_body .bottone_main_row.mode_bottone,
.bottone_main_row.mode_fuori_regione,
.table_body .bottone_main_row.mode_fuori_regione {
    grid-template-columns: 1fr;
}

.bottone_main_row.mode_bottone .bottone_trimestri_card {
    display: none;
}

.bottone_main_row.mode_fuori_regione .bottone_sezioni_wrapper {
    display: none;
}

.bottone_sezioni_wrapper {
    min-width: 0;
}

.bottone_trimestri_card {
    min-width: 0;
    border: 1px solid var(--bottone-border);
    border-radius: 10px;
    background: #fff;
    padding: 14px;
    box-shadow: var(--bottone-shadow-card);
}

.bottone_mesi_header {
    display: flex;
    align-items: stretch;
    gap: 6px;
    margin-bottom: 10px;
}

.bottone_trimestre_select {
    width: 65%;
    box-sizing: border-box;
    padding: 0 10px;
    font-size: 12px;
    font-weight: 600;
    border: 1px solid var(--bottone-border);
    border-radius: 6px;
    background: var(--bottone-green-light);
    color: var(--bottone-green-dark);
    cursor: pointer;
    outline: none;
}

.bottone_trimestre_select:focus {
    border-color: var(--bottone-green);
}

.bottone_mesi_tabs {
    width: 35%;
    box-sizing: border-box;
    display: flex;
    background: var(--color-primary);
    border-radius: 999px;
    padding: 3px;
    gap: 0;
}

.bottone_mese_tab {
    border: none;
    outline: none;
    background: transparent;
    border-radius: 999px;
    padding: 5px 0;
    font-size: 0.78rem;
    font-weight: 500;
    color: rgba(255,255,255,0.75);
    cursor: pointer;
    transition: background 0.18s, color 0.18s, box-shadow 0.18s;
    white-space: nowrap;
    flex: 1;
    text-align: center;
}

.bottone_mese_tab:not(.active):hover {
    color: #fff;
}

.bottone_mese_tab.active {
    background: #fff;
    color: var(--color-primary);
    font-weight: 600;
    box-shadow: 0 2px 6px rgba(0,0,0,0.15);
}

.bottone_trimestri_titolo {
    margin: 0 0 12px 0;
    font-size: 1rem;
    font-weight: 700;
    color: var(--bottone-green-dark);
}

/* Dentro l'header flex la spaziatura la dà il contenitore, non il titolo */
.bottone_trimestri_head .bottone_trimestri_titolo {
    margin: 0;
}

.bottone_trimestri_head {
    margin-bottom: 12px;
}

.bottone_trimestri_content {
    font-size: 12px;
    overflow-x: auto;
    max-height: 70vh;
    overflow-y: auto;
}

.bottone_trimestri_placeholder {
    color: var(--bottone-text-muted);
    margin: 0;
    font-style: italic;
}

.bottone_trimestri_table {
    width: 100%;
    border-collapse: collapse;
    font-size: 12px;
}

.bottone_trimestri_table th,
.bottone_trimestri_table td {
    padding: 6px 8px;
    text-align: left;
    border: 1px solid var(--bottone-border);
}

.bottone_trimestri_table th {
    font-weight: 600;
    color: var(--bottone-green-dark);
    background: var(--bottone-green-light);
}

.bottone_trimestri_table thead tr:first-child th {
    text-align: center;
}

.bottone_trimestri_table .bottone_trimestri_th_pv {
    text-align: left;
    vertical-align: middle;
}

/* Desktop: nascondi colonne mobile-only */
.bottone_trimestri_table .td_mobile_only,
.bottone_trimestri_table .th_mobile_only {
    display: none;
}

.trimestri_pct {
    font-size: 10px;
    color: #64748b;
    font-weight: 400;
}

.bottone_trimestri_table .bottone_trimestri_th_sub {
    font-weight: 500;
    font-size: 11px;
    text-align: center;
}

.bottone_trimestri_table td:nth-child(1) {
    text-align: left;
}

.bottone_trimestri_table td:nth-child(2) {
    text-align: right;
}

.bottone_trimestri_table td:nth-child(3),
.bottone_trimestri_table td:nth-child(5) {
    text-align: right;
}

.bottone_trimestri_table td:nth-child(4),
.bottone_trimestri_table td:nth-child(6) {
    text-align: right;
}

.bottone_trimestri_table tr:hover td {
    background: #f8fafc;
}

.bottone_trimestri_table tr.bottone_trimestri_row_alert td {
    background: var(--color-primary);
    color: #fff;
    font-weight: 600;
}

.bottone_trimestri_table tr.bottone_trimestri_row_alert:hover td {
    background: var(--color-primary);
    opacity: 0.9;
}

.bottone_trimestri_trimestre_header {
    font-weight: 700;
    font-size: 11px;
    color: var(--bottone-text);
}

.bottone_trimestri_sub {
    font-weight: 400;
    color: var(--bottone-text-muted);
    font-size: 11px;
}

.bottone_trimestri_block {
    margin-bottom: 16px;
}

.bottone_trimestri_block:last-child {
    margin-bottom: 0;
}

.bottone_trimestri_block .bottone_trimestri_table {
    margin-top: 0;
}

/* ===== Vista annuale: 4 colonne (T1..T4), Totale + 3 mesi impilati ===== */
/* Intestazione card: titolo a sinistra, selettore semestre a destra */
.bottone_trimestri_head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
}

.bottone_semestre_filter {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    font-weight: 600;
    color: var(--bottone-green-dark);
    white-space: nowrap;
}

.bottone_semestre_filter select {
    padding: 5px 10px;
    border: 1px solid var(--bottone-border);
    border-radius: 6px;
    background: #fff;
    font-size: 12px;
    color: var(--color-text-dark, #1f2937);
    cursor: pointer;
}

/* Due trimestri affiancati (il semestre si sceglie dal menu in alto a destra) */
.bottone_trimestri_grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(320px, 1fr));
    gap: 16px;
    align-items: start;
}

.bottone_trimestre_col {
    display: flex;
    flex-direction: column;
    gap: 14px;
    min-width: 0;
}

.bottone_trimestre_col_head {
    font-weight: 700;
    font-size: 13px;
    color: var(--bottone-green-dark);
    text-align: center;
    padding: 6px 8px;
    background: var(--bottone-green-light);
    border-radius: 6px;
}

.bottone_trimestre_col_head .trim_periodo {
    font-weight: 400;
    font-size: 11px;
    opacity: 0.85;
}

/* Tabella per periodo (Totale trimestre / singolo mese) */
.bottone_regione_table {
    width: 100%;
    border-collapse: collapse;
    font-size: 11px;
    table-layout: fixed;
}

.bottone_regione_table th,
.bottone_regione_table td {
    border: 1px solid var(--bottone-border);
    padding: 4px 6px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.bottone_regione_table thead th {
    background: var(--bottone-green-light);
    color: var(--bottone-green-dark);
    font-weight: 700;
    text-align: center;
    font-size: 10px;
}

.bottone_regione_table .bottone_regione_th_titolo {
    text-align: left;
    width: 42%;
}

.bottone_regione_table .bottone_regione_td_pv {
    text-align: left;
    font-weight: 500;
}

.bottone_regione_table td.trim_num {
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.bottone_regione_table td.trim_pct {
    text-align: right;
    font-variant-numeric: tabular-nums;
    color: #64748b;
}

.bottone_regione_table tbody tr:hover td {
    background: #f8fafc;
}

/* Riga con Fisso FUORI Regione oltre soglia (>= 8%) */
.bottone_regione_table tbody tr.bottone_regione_alert td {
    background: var(--color-primary);
    color: #fff;
    font-weight: 600;
}

.bottone_regione_table tbody tr.bottone_regione_alert:hover td {
    background: var(--color-primary);
    opacity: 0.92;
}

/* Tabella del TOTALE trimestre: leggermente evidenziata */
.bottone_regione_table_totale thead th {
    background: var(--bottone-green-dark);
    color: #fff;
}

/* Responsive: sotto una certa larghezza i 2 trimestri si impilano */
@media (max-width: 900px) {
    .bottone_trimestri_grid {
        grid-template-columns: 1fr;
    }

    .bottone_trimestri_head {
        align-items: flex-start;
    }
}

.bottone_soglie_bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    background: var(--bottone-bg-alt);
    border-radius: 10px;
    border: 1px solid var(--bottone-border);
}

.bottone_soglie_label {
    font-weight: 600;
    font-size: 12px;
    color: var(--bottone-text);
}

.bottone_soglie_input,
.bottone_soglie_select {
    padding: 8px 12px;
    border: 1px solid var(--bottone-border);
    border-radius: 6px;
    font-size: 12px;
    background: #fff;
}

.bottone_soglie_riepilogo {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 16px;
    padding: 10px 14px;
    background: var(--bottone-green-light);
    border-radius: 8px;
    font-size: 12px;
    border: 1px solid rgba(11, 102, 221, 0.2);
}

.bottone_soglie_riepilogo .bottone_soglie_label {
    margin-right: 4px;
}

.bottone_sezioni_wrapper {
    display: flex;
    flex-direction: column;
    gap: 24px;
    width: 100%;
}

/* Card container per la colonna sinistra */
.bottone_card {
    border: 1px solid var(--bottone-border);
    border-radius: 10px;
    background: #fff;
    padding: 14px;
    box-shadow: var(--bottone-shadow-card);
}

.bottone_vista_tabs {
    display: flex;
    background: var(--color-primary);
    border-radius: 999px;
    padding: 3px;
    gap: 0;
}

.bottone_vista_tab {
    border: none;
    outline: none;
    background: transparent;
    border-radius: 999px;
    padding: 6px 16px;
    font-size: 0.82rem;
    font-weight: 500;
    color: rgba(255,255,255,0.75);
    cursor: pointer;
    transition: background 0.18s, color 0.18s, box-shadow 0.18s;
    white-space: nowrap;
}

.bottone_vista_tab:not(.active):hover {
    color: #fff;
}

.bottone_vista_tab.active {
    background: #fff;
    color: var(--color-primary);
    font-weight: 600;
    box-shadow: 0 2px 6px rgba(0,0,0,0.15);
}

/* Tabs vista dentro il titolo del blocco: dimensioni compatte */
.bottone_blocco_titolo .bottone_vista_tabs {
    padding: 2px;
}

.bottone_blocco_titolo .bottone_vista_tab {
    padding: 4px 12px;
    font-size: 0.72rem;
}

.bottone_sezione_titolo {
    margin: 0 0 6px 0;
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--bottone-green-dark);
    letter-spacing: 0.02em;
}

.bottone_sezione {
    display: none;
    flex-direction: column;
    gap: 18px;
    min-width: 0;
}

.bottone_sezione.bottone_sezione_visible {
    display: flex;
}

.bottone_blocco {
    border: 1px solid var(--bottone-border);
    border-radius: 10px;
    background: #fff;
    overflow: hidden;
    box-shadow: var(--bottone-shadow-card);
}

/* Titolo del blocco (Mobile, Fisso, Vodafone Club) — flex per tabs vista a dx */
.bottone_blocco_titolo {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    font-size: 12px;
    font-weight: 700;
    color: var(--bottone-green-dark);
    background: var(--bottone-green-light);
    border-bottom: 1px solid rgba(11, 102, 221, 0.2);
}

.bottone_blocco_titolo > span:first-child {
    margin-right: auto;
}

/* Riga di riepilogo: valori aggregati separati dalla griglia S1-S7 */
.bottone_blocco_summary {
    display: flex;
    flex-wrap: wrap;
    gap: 0 24px;
    padding: 12px 14px;
    background: linear-gradient(135deg, var(--bottone-green) 0%, var(--bottone-green-dark) 100%);
    color: #fff;
}

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

.bottone_summary_group_label {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    opacity: 0.7;
    letter-spacing: 0.04em;
    min-width: 40px;
}

.bottone_summary_stack {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.bottone_summary_row {
    display: flex;
    align-items: baseline;
    gap: 4px;
    line-height: 1.3;
}

.bottone_summary_label {
    font-size: 9px;
    font-weight: 600;
    opacity: 0.7;
    text-transform: uppercase;
}

.bottone_summary_value {
    font-size: 12px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.bottone_summary_item {
    display: flex;
    align-items: baseline;
    gap: 6px;
}

/* Wrapper della sola tabella (colonne Riga | Tot. Punti | S1..S7) */
.bottone_tabella_wrapper {
    border-top: 2px solid var(--bottone-border);
}

.bottone_blocco_header {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    background: linear-gradient(135deg, var(--bottone-green) 0%, var(--bottone-green-dark) 100%);
    color: #fff;
    font-weight: 600;
    font-size: 12px;
    text-align: center;
}

/* Blocco Mobile: stessa griglia di col_header/data_row (120px label + Tot. Punti + S1..S7) */
.bottone_blocco_header.bottone_header_9col {
    grid-template-columns: 120px repeat(7, 1fr);
}

.bottone_header_label {
    background: transparent;
}

.bottone_blocco_header.bottone_header_grid_align {
    grid-template-columns: 120px repeat(7, 1fr);
}

.bottone_header_cell {
    padding: 10px 8px;
    border-right: 1px solid rgba(255, 255, 255, 0.25);
}

.bottone_header_cell:last-child {
    border-right: none;
}

.bottone_header_green {
    background: rgba(0, 0, 0, 0.15);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.bottone_col_header {
    display: grid;
    grid-template-columns: 120px repeat(7, 1fr);
    background: var(--bottone-label-bg);
    border-bottom: 2px solid var(--bottone-border);
    font-weight: 600;
    font-size: 11px;
    color: var(--bottone-text);
}

.bottone_col_label {
    padding: 8px 10px;
    border-right: 1px solid var(--bottone-border);
}

.bottone_col_name {
    padding: 8px 6px;
    text-align: center;
    border-right: 1px solid var(--bottone-border);
}

.bottone_col_name:last-child {
    border-right: none;
}

.bottone_data_row {
    display: grid;
    grid-template-columns: 120px repeat(7, 1fr);
    border-bottom: 1px solid var(--bottone-border);
    font-size: 12px;
    min-height: 40px;
    transition: background-color 0.15s ease;
}

.bottone_data_row:hover {
    background-color: rgba(11, 102, 221, 0.04);
}

.bottone_data_row:nth-child(even) {
    background: var(--bottone-bg-alt);
}

.bottone_data_row:nth-child(even):hover {
    background-color: rgba(11, 102, 221, 0.06);
}

/* Raggruppamento: separazione tra righe soglie (numeri) e righe con checkbox */
.bottone_data_row[data-row="mnp_per_soglia"] {
    border-bottom: 2px solid var(--bottone-border);
}

.bottone_data_row[data-row="mobile_tnp"],
.bottone_data_row[data-row="mnp"],
.bottone_data_row[data-row="fisso"],
.bottone_data_row[data-row="cb"] {
    border-bottom: 1px solid var(--bottone-border);
}

.bottone_data_row[data-row="soglie_raggiunte"] {
    background: var(--bottone-label-bg);
    font-weight: 600;
}

.bottone_data_row[data-row="soglie_raggiunte"]:hover {
    background-color: #e2e8f0;
}

.bottone_row_label {
    padding: 8px 10px;
    border-right: 1px solid var(--bottone-border);
    font-weight: 600;
    background: var(--bottone-label-bg);
    color: var(--bottone-text);
}

.bottone_cell {
    padding: 8px 6px;
    text-align: center;
    border-right: 1px solid var(--bottone-border);
    font-size: 12px;
    min-height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--bottone-text);
}

.bottone_cell:last-child {
    border-right: none;
}

.bottone_cell_span {
    grid-column: 2 / -1;
    text-align: left;
    padding-left: 14px;
}

.bottone_checkbox {
    width: 18px;
    height: 18px;
    cursor: pointer;
    accent-color: var(--bottone-green);
}

.bottone_soglia_status {
    display: inline-block;
}

.bottone_soglia_ok {
    color: var(--bottone-green);
    font-weight: 600;
}

.bottone_loading_inline {
    padding: 8px 12px;
    font-size: 13px;
    color: var(--bottone-text-muted, #64748b);
}

/* Celle editabili (Pezzi Da Soglia, Mnp Per Soglia) per utenti lv > 1 */
.bottone_cell_editable {
    padding: 4px;
}

.bottone_cell_input {
    width: 100%;
    max-width: 72px;
    padding: 6px 8px;
    text-align: center;
    border: 1px solid var(--bottone-border);
    border-radius: 6px;
    font-size: 12px;
    background: #fff;
    box-sizing: border-box;
    -moz-appearance: textfield;
    appearance: textfield;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.bottone_cell_input::-webkit-outer-spin-button,
.bottone_cell_input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.bottone_cell_input:focus {
    outline: none;
    border-color: var(--bottone-green);
    box-shadow: 0 0 0 2px rgba(11, 102, 221, 0.2);
}

.bottone_cell_input:hover:not(:disabled) {
    border-color: #94a3b8;
}

/* Input bloccato (default) */
.bottone_cell_input:disabled {
    background: #f8fafc;
    border-color: transparent;
    color: #1e293b;
    cursor: default;
    font-weight: 600;
}

/* Bottone penna per edit soglie */
.bottone_edit_soglie_btn {
    background: none;
    border: 1px solid rgba(11, 102, 221, 0.25);
    border-radius: 6px;
    cursor: pointer;
    color: var(--bottone-green-dark);
    font-size: 13px;
    padding: 4px 8px;
    transition: background 0.15s, border-color 0.15s, color 0.15s;
    flex-shrink: 0;
}

.bottone_edit_soglie_btn:hover {
    background: rgba(11, 102, 221, 0.08);
    border-color: var(--bottone-green);
    color: var(--bottone-green);
}

/* In edit mode: evidenzia il blocco */
.bottone_blocco.bottone_editing .bottone_cell_input {
    background: #fff;
    border-color: var(--bottone-green);
    box-shadow: 0 0 0 1px rgba(11, 102, 221, 0.1);
}

.bottone_blocco.bottone_editing .bottone_edit_soglie_btn {
    background: rgba(255,255,255,0.2);
    border-color: #fff;
}

.report_header_row {
    display: flex;
    width: 100%;
    background: linear-gradient(135deg, #047857 0%, #10b981 100%);
    border-radius: 10px 10px 0 0;
    /* Allinea la banda verde sinistra con quella delle righe gruppo/pista */
    border-left: 4px solid #10b981;
    overflow: hidden;
}

.report_th {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 12px 8px;
    color: #fff;
    font-weight: 600;
    border-right: 1px solid rgba(255, 255, 255, 0.15);
    min-width: 0;
}

.report_th:last-child {
    border-right: none;
}

.report_th_pista {
    flex: 0 0 320px;
    min-width: 320px;
    background: rgba(0, 0, 0, 0.15);
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.report_th_totale {
    flex: 0 0 120px;
    min-width: 120px;
    background: rgba(5, 150, 105, 0.4);
}

.report_th_negozio {
    flex: 1;
    min-width: 130px;
}

.report_th_label {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 5px;
    max-width: 100%;
    text-align: center;
    line-height: 1.2;
    white-space: normal;
    word-break: break-word;
}

.report_th_sub {
    display: flex;
    gap: 15px;
    font-size: 10px;
    font-weight: 400;
    opacity: 0.85;
}

.report_th_sub span {
    min-width: 40px;
    text-align: center;
}

.report_body_row {
    display: flex;
    width: 100%;
    border-bottom: 1px solid var(--color-border-light);
    transition: background-color 0.15s ease;
}

.report_body_row:hover {
    background-color: #ecfdf5;
}

.report_body_row:nth-child(even) {
    background-color: #f9fafb;
}

.report_body_row:nth-child(even):hover {
    background-color: #ecfdf5;
}

.report_td {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px 8px;
    border-right: 1px solid var(--color-border-light);
    min-width: 0;
}

.report_td:last-child {
    border-right: none;
}

.report_td_pista {
    flex: 0 0 320px;
    min-width: 320px;
    justify-content: flex-start;
    font-size: 12px;
    font-weight: 500;
    color: #1f2937;
    padding-left: 15px;
    text-transform: uppercase;
}

.report_td_totale {
    flex: 0 0 120px;
    min-width: 120px;
    background: rgba(16, 185, 129, 0.08);
    gap: 15px;
}

.report_td_negozio {
    flex: 1;
    min-width: 130px;
    gap: 15px;
}

.report_td .punti {
    font-weight: 600;
    color: #059669;
    min-width: 40px;
    text-align: center;
    font-size: 13px;
}

.report_td .pezzi {
    font-weight: 400;
    color: #6b7280;
    min-width: 40px;
    text-align: center;
    font-size: 12px;
}

.report_totali_row {
    background: linear-gradient(135deg, #047857 0%, #10b981 100%) !important;
    border-radius: 0 0 10px 10px;
    margin-top: 5px;
}

.report_totali_row:hover {
    background: linear-gradient(135deg, #065f46 0%, #059669 100%) !important;
}

.report_td_totale_label {
    color: #fff !important;
    font-weight: 700 !important;
    font-size: 14px !important;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.report_td_totale_cell {
    background: rgba(255, 255, 255, 0.1) !important;
}

.report_td_totale_cell .punti {
    color: #fff;
    font-weight: 700;
    font-size: 14px;
}

.report_td_totale_cell .pezzi {
    color: rgba(255, 255, 255, 0.85);
    font-weight: 500;
}

.report_totali_row .report_td {
    border-color: rgba(255, 255, 255, 0.15);
}

.report_empty_state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 80px 20px;
    color: #6b7280;
    text-align: center;
    width: 100%;
}

.report_empty_state i {
    font-size: 64px;
    color: #10b981;
    margin-bottom: 20px;
    opacity: 0.5;
}

.report_empty_state h3 {
    font-size: 18px;
    font-weight: 600;
    color: #374151;
    margin-bottom: 8px;
}

.report_empty_state p {
    font-size: 14px;
    color: #9ca3af;
}

.report_loading,
.report_empty,
.report_error {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 60px 20px;
    font-size: 16px;
    color: #6b7280;
    text-align: center;
    width: 100%;
}

.report_loading {
    color: #10b981;
}

.report_loading::before {
    content: '';
    display: inline-block;
    width: 20px;
    height: 20px;
    border: 3px solid #10b981;
    border-radius: 50%;
    border-top-color: transparent;
    animation: spin 0.8s linear infinite;
    margin-right: 12px;
}

@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}

.report_error {
    color: #dc2626;
    background: #fef2f2;
    border-radius: 10px;
}

.report_empty {
    color: #9ca3af;
    font-style: italic;
}

/* Report: scroll orizzontale unico (header + body scrollano insieme) */
.body_area.report_table_scroll {
    overflow-x: auto;
    overflow-y: visible;
}

.body_area.report_table_scroll .table_header {
    width: 100%;
    min-width: max-content;
}

.body_area.report_table_scroll .table_body {
    overflow-x: visible;
    overflow-y: auto;
    width: max-content;
    min-width: 100%;
}

.body_area.report_table_scroll .report_header_row,
.body_area.report_table_scroll .report_body_row {
    min-width: max-content;
    flex-shrink: 0;
}

.body_area.report_table_scroll .report_header_row {
    width: 100%;
}

.table_body:has(.report_body_row) {
    /* Mantieni lo scroll ma nascondi la barra */
    scrollbar-width: none;
    /* Firefox */
}

.table_body:has(.report_body_row)::-webkit-scrollbar {
    width: 0;
    height: 0;
}

.table_body:has(.report_body_row)::-webkit-scrollbar-track {
    background: transparent;
}

.table_body:has(.report_body_row)::-webkit-scrollbar-thumb {
    background: transparent;
}

/* ========================================= */
/* === Gruppi Espandibili === */
/* ========================================= */

.report_gruppo_row {
    background: linear-gradient(135deg, #f0fdf4 0%, #dcfce7 100%) !important;
    cursor: pointer;
    border-left: 4px solid #10b981;
    transition: all 0.2s ease;
}

.report_gruppo_row:hover {
    background: linear-gradient(135deg, #dcfce7 0%, #bbf7d0 100%) !important;
}

.report_gruppo_row.espanso {
    background: linear-gradient(135deg, #d1fae5 0%, #a7f3d0 100%) !important;
    border-left-color: #059669;
}

.report_td_gruppo {
    font-weight: 700 !important;
    color: #047857 !important;
    gap: 10px;
    display: flex;
    align-items: center;
}

.report_td_gruppo span {
    overflow: hidden;
    text-overflow: ellipsis;
}

.gruppo_icon {
    font-size: 10px;
    color: #059669;
    transition: transform 0.2s ease;
    min-width: 14px;
}

.report_gruppo_row.espanso .gruppo_icon {
    transform: rotate(0deg);
}

.report_td_gruppo_totale {
    background: rgba(16, 185, 129, 0.15) !important;
}

.report_td_gruppo_cell {
    background: rgba(16, 185, 129, 0.05);
}

.report_td_gruppo_totale .punti,
.report_td_gruppo_cell .punti {
    color: #047857;
    font-weight: 700;
}

.report_pista_row {
    background: #ffffff !important;
    border-left: 4px solid transparent;
    animation: slideDown 0.2s ease;
}

@keyframes slideDown {
    from {
        opacity: 0;
        transform: translateY(-5px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.report_pista_row:hover {
    background: #f9fafb !important;
}

.report_td_pista_child {
    /* Allinea le piste con il gruppo, rimuovendo l'ulteriore indentazione */
    padding-left: 15px !important;
    font-weight: 400 !important;
    color: #4b5563 !important;
    font-size: 11px !important;
}

.macro_micro_checkbox {
    margin-right: 8px;
    cursor: pointer;
    vertical-align: middle;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    width: 16px;
    height: 16px;
    margin-top: 1px;
    border-radius: 3px;
    border: 1px solid #10b981;
    background-color: #ecfdf5;
    display: inline-block;
    position: relative;
    box-sizing: border-box;
}

.macro_micro_checkbox:checked {
    background-color: #10b981;
    border-color: #10b981;
}

.macro_micro_checkbox:checked::after {
    content: '';
    position: absolute;
    left: 3px;
    top: 1px;
    width: 9px;
    height: 11px;
    border: solid #ffffff;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

.pista_indent {
    display: none;
}

/* Icona espansione pista */
.report_expand_icon {
    margin-right: 5px;
    font-size: 10px;
    color: #9ca3af;
    flex-shrink: 0;
}

.report_pista_expandable {
    cursor: pointer;
}

/* Righe servizio */
.report_servizio_row {
    background: #f8fafc !important;
    border-left: 4px solid #bfdbfe;
    cursor: pointer;
    animation: slideDown 0.15s ease;
}

.report_servizio_row:hover {
    background: #eff6ff !important;
}

.report_td_servizio_child {
    padding-left: 36px !important;
    font-weight: 400 !important;
    color: #6b7280 !important;
    font-size: 10px !important;
    display: flex !important;
    align-items: center;
    gap: 6px;
}

.servizio_indent {
    display: none;
}

.servizio_nome {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Badge flag PT/PZ accanto al servizio */
.servizio_flag_badge {
    flex-shrink: 0;
    font-size: 9px;
    font-weight: 700;
    padding: 1px 5px;
    border-radius: 3px;
    letter-spacing: 0.03em;
}

.sflag_pt {
    background: #dbeafe;
    color: #1d4ed8;
    border: 1px solid #93c5fd;
}

.sflag_pz {
    background: #d1fae5;
    color: #065f46;
    border: 1px solid #6ee7b7;
}

.sflag_none {
    background: #f3f4f6;
    color: #9ca3af;
    border: 1px solid #e5e7eb;
}

.pista_nome_professional {
    font-weight: 600;
    font-style: italic;
}

.pista_sottotitolo {
    font-size: 9px;
    font-weight: 400;
    color: #6b7280;
}

/* ========================================= */
/* === Tooltip per Negozi === */
/* ========================================= */

.report_th_negozio {
    flex: 1;
    min-width: 130px;
    position: relative;
}

.report_th_negozio .report_th_label {
    cursor: help;
}

.report_tooltip {
    display: none;
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    background: #1f2937;
    color: #fff;
    padding: 8px 12px;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 500;
    white-space: nowrap;
    z-index: 1000;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
    margin-top: 5px;
}

.report_tooltip::before {
    content: '';
    position: absolute;
    top: -6px;
    left: 50%;
    transform: translateX(-50%);
    border-width: 0 6px 6px 6px;
    border-style: solid;
    border-color: transparent transparent #1f2937 transparent;
}

.report_th_negozio:hover .report_tooltip {
    display: block;
}

.hidden_by_permission {
    display: none !important;
}

.macro_micro_layout {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1.5fr;
    gap: 16px;
    width: 100%;
    margin-top: 20px;
    font-size: 0.8rem;
}

.mm_col {
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
    padding: 15px;
    height: 100%;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border: 1px solid var(--color-border-light);
}

.mm_col_header {
    font-weight: 700;
    text-transform: uppercase;
    color: var(--color-text-muted);
    font-size: 0.75rem;
    padding: 0 10px 10px 10px;
    border-bottom: 1px solid var(--color-border-light);
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.mm_item {
    padding: 10px;
    border-bottom: 1px solid var(--color-border-light);
    cursor: pointer;
    transition: all 0.2s;
    font-size: 0.9rem;
    color: #111827;
}

.mm_item:hover {
    background-color: #e5f3ff;
}

.mm_item.active {
    background-color: #1d4ed8;
    color: #ffffff;
}

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

.mm_item_with_action .mm_item_label {
    flex: 1;
    min-width: 0;
}

.ti_target_delete_btn {
    color: #dc2626;
    opacity: 0;
    transition: opacity 0.15s;
    padding: 4px;
    cursor: pointer;
}

.mm_item_with_action:hover .ti_target_delete_btn {
    opacity: 1;
}

.mm_item_with_action.active .ti_target_delete_btn {
    color: #fecaca;
}

.ti_target_delete_btn:hover {
    color: #b91c1c;
}

.mm_item_with_action.active .ti_target_delete_btn:hover {
    color: #ffffff;
}

.mm_empty {
    padding: 12px 16px;
    font-size: 12px;
    color: #6b7280;
}

.mm_col_micro {
    background: #ffffff;
}

.mm_micro_table_header,
.mm_micro_row {
    display: grid;
    grid-template-columns: 2.5fr 1.2fr;
    align-items: center;
    padding: 8px 10px;
    font-size: 0.9rem;
}

.mm_micro_table_header {
    font-weight: 700;
    border-bottom: 1px solid var(--color-border-light);
    text-transform: uppercase;
    color: #111827;
}

.mm_micro_row:nth-child(odd) {
    background-color: #f9fafb;
}

.mm_cell_micro {
    padding-right: 8px;
    font-weight: 400;
}

/* Configuratore prezzi economici */
.pe_intro{display:flex;align-items:center;justify-content:space-between;gap:20px;margin:0 0 18px;padding:16px 18px;background:#f8fbff;border:1px solid #dbe8f8;border-radius:12px}.pe_intro h3{margin:0 0 4px;color:#17243b}.pe_intro p{margin:0;color:#64748b;font-size:13px}.pe_summary{display:flex;gap:8px;white-space:nowrap}.pe_summary span,.pe_source{padding:4px 8px;border-radius:999px;font-size:11px;font-weight:700}.pe_summary .ok{background:#dcfce7;color:#15803d}.pe_summary .missing{background:#fee2e2;color:#b91c1c}.pe_layout{display:grid;grid-template-columns:minmax(190px,.9fr) minmax(220px,1fr) minmax(220px,1fr) minmax(360px,1.65fr);gap:14px;min-height:570px}.pe_column{min-width:0;border:1px solid #dce3ec;border-radius:12px;background:#fff;overflow:hidden;box-shadow:0 3px 12px rgba(15,23,42,.04)}.pe_column>header{min-height:62px;padding:14px 16px;border-bottom:1px solid #e5eaf0;display:flex;flex-direction:column;justify-content:center;gap:3px}.pe_column>header strong{font-size:13px;color:#334155}.pe_column>header small{font-size:11px;color:#94a3b8}.pe_column_body{height:505px;overflow:auto;padding:10px}.pe_nav_item{display:block;width:100%;border:0;border-bottom:1px solid #edf1f5;background:#fff;color:#24324a;padding:12px;text-align:left;font:inherit;font-size:13px;cursor:pointer;border-radius:8px}.pe_nav_item:hover{background:#f1f6ff}.pe_nav_item.active{background:#1167db;color:#fff;font-weight:700}.pe_empty{padding:30px 14px;text-align:center;color:#94a3b8;font-style:italic}.pe_price_row{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:13px 10px;border-bottom:1px solid #edf1f5}.pe_price_identity{min-width:0;display:flex;flex-direction:column;align-items:flex-start;gap:4px}.pe_price_identity strong{font-size:13px;color:#18243a;overflow-wrap:anywhere}.pe_price_identity small{font-size:11px;color:#7b879a}.pe_source{background:#eaf2ff;color:#1760be}.pe_source.mancante{background:#fee2e2;color:#b91c1c}.pe_source.regola_concordata,.pe_source.scaglioni{background:#fff3cd;color:#8a5a00}.pe_price_editor{display:flex;align-items:center;justify-content:flex-end;gap:8px;min-width:180px}.pe_price_editor label{display:flex;align-items:center;gap:5px;color:#1167db;font-weight:700}.pe_price_editor input{width:92px;border:1px solid #bfd0e5;border-radius:7px;padding:8px;text-align:right;font:inherit}.pe_price_editor button{border:0;border-radius:7px;background:#1167db;color:#fff;padding:9px 12px;font-weight:700;cursor:pointer}.pe_price_editor>strong{color:#0d7b50}.pe_price_editor>small{max-width:145px;color:#8a6a16;font-size:10px}.pe_price_row.locked{background:#fffcf2}

@media(max-width:1200px){.pe_layout{grid-template-columns:repeat(2,minmax(0,1fr))}.pe_column_body{height:340px}.pe_prices{grid-column:1/-1}.pe_prices .pe_column_body{height:420px}}
@media(max-width:700px){.pe_intro{align-items:flex-start;flex-direction:column}.pe_summary{flex-wrap:wrap}.pe_layout{grid-template-columns:1fr}.pe_prices{grid-column:auto}.pe_column_body{height:280px}.pe_price_row{align-items:flex-start;flex-direction:column}.pe_price_editor{width:100%;justify-content:flex-start}}
.pe_copy_modal{width:min(720px,94vw)}.pe_copy_body{padding:22px}.pe_copy_body>p{margin:0 0 18px;color:#5f6f85;line-height:1.5}.pe_copy_body select{width:100%;margin-top:7px;padding:10px;border:1px solid #cdd8e6;border-radius:8px;background:#fff}.pe_copy_targets{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin-top:7px;max-height:270px;overflow:auto}.pe_copy_targets label{display:flex;align-items:center;gap:9px;padding:10px;border:1px solid #e0e7f0;border-radius:8px;cursor:pointer}.pe_copy_targets input{width:17px;height:17px;accent-color:#1167db}.pe_copy_note{display:flex;gap:9px;margin-top:18px;padding:12px;background:#eef6ff;border-radius:9px;color:#3c638f;font-size:12px;line-height:1.45}@media(max-width:600px){.pe_copy_targets{grid-template-columns:1fr}}

/* Navigazione Impostazioni compatta con sezioni amministrative raggruppate. */
.settings_tabs_container{
    flex-direction:row;
    align-items:center;
    gap:10px;
}
.settings_tabs_container .ed_tab_bar{
    width:auto;
    min-width:0;
    flex:1 1 auto;
    overflow-x:auto;
    overflow-y:hidden;
    flex-wrap:nowrap;
    scrollbar-width:thin;
    scrollbar-color:#b8c5d6 transparent;
}
.settings_tabs_container .ed_tab_bar::-webkit-scrollbar{height:5px}
.settings_tabs_container .ed_tab_bar::-webkit-scrollbar-thumb{background:#b8c5d6;border-radius:999px}
.settings_tabs_container .ed_tab{flex:0 0 auto}
.settings_tabs_container .settings_tab_actions{
    width:auto;
    flex:0 0 auto;
    justify-content:flex-end;
    flex-wrap:wrap;
    gap:8px;
}
.settings_tabs_container .settings_tab_actions:empty{display:none}
.settings_more_wrap{position:relative;display:flex;align-items:center;gap:7px;flex:0 0 auto;padding:7px 10px;border:1px solid transparent;border-radius:8px;color:#1f2937;background:transparent}.settings_more_wrap:hover{background:#cdd7e9}.settings_more_wrap.active{background:var(--color-primary);color:#fff;border-color:#7c3aed}.settings_more_wrap select{appearance:none;-webkit-appearance:none;border:0;outline:0;background:transparent;color:inherit;font:inherit;font-size:.8rem;font-weight:600;padding:0 15px 0 0;cursor:pointer}.settings_more_wrap:after{content:'▾';position:absolute;right:9px;top:50%;transform:translateY(-52%);font-size:10px;pointer-events:none}.settings_more_wrap option{color:#1f2937;background:#fff}
@media(max-width:900px){.settings_tabs_container{align-items:stretch;flex-direction:column}.settings_tabs_container .ed_tab_bar{width:100%}.settings_tabs_container .settings_tab_actions{width:100%;justify-content:flex-end}}

.macro_micro_layout .mm_item:has(.ti_new_dot),
.macro_micro_layout .mm_cell_micro:has(.ti_new_dot) {
    display: flex;
    align-items: center;
    gap: 8px;
}

.macro_micro_layout .mm_item:has(.ti_new_dot) .mm_item_label,
.macro_micro_layout .mm_cell_micro:has(.ti_new_dot) > span:first-child {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ti_new_dot {
    display: inline-block;
    width: 9px;
    height: 9px;
    min-width: 9px;
    border-radius: 50%;
    background: #dc2626;
    border: 2px solid #fee2e2;
    box-shadow: 0 0 0 1px rgba(220, 38, 38, 0.25);
    cursor: pointer;
}

.mm_item.active .ti_new_dot {
    background: #ffffff;
    border-color: #fecaca;
    box-shadow: 0 0 0 1px rgba(255,255,255,.45);
}

.mm_flag_readonly {
    display: inline-block;
    font-size: 0.7rem;
    font-weight: 700;
    color: #d1d5db;
}

.mm_flag_readonly.active {
    color: #16a34a;
}

.ti_bulk_btns {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-left: auto;
}

.ti_bulk_label {
    font-size: 0.7rem;
    font-weight: 400;
    color: var(--color-text-muted);
    white-space: nowrap;
}

.ti_flag_btn {
    background: #f3f4f6;
    color: #9ca3af;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    padding: 3px 8px;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.5px;
    cursor: pointer;
    transition: all 0.15s;
}

.ti_flag_btn.active {
    background: #eff6ff;
    color: #0066cc;
    border-color: #bfdbfe;
}

button.ti_flag_btn:hover {
    opacity: 0.8;
}

.mm_cell_toggle {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
}

.toggle_switch_small {
    width: 40px;
    height: 20px;
}

.toggle_switch_small .toggle_slider:before {
    width: 16px;
    height: 16px;
}

.mm_toggle_label {
    font-size: 11px;
    font-weight: 600;
    margin: 0 4px;
}

@media (max-width: 1400px) {

    .report_th_pista,
    .report_td_pista {
        flex: 0 0 250px;
        min-width: 250px;
    }

    .report_th_negozio,
    .report_td_negozio {
        min-width: 110px;
    }
}

/* ========================================= */
/* === Stili CLASSIFICA (Verde Smeraldo) === */
/* ========================================= */

.classifica_filtri {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: flex-end;
    gap: 20px;
    background: #f8f9fa;
    border: 1px solid var(--color-border);
}

.classifica_filtri .filtro_gruppo label {
    color: #333;
    font-weight: 600;
}

.suite_suggestions_btn {
    position: relative;
    width: 36px;
    height: 36px;
    padding: 0;
    border: 1px solid var(--color-border);
    border-radius: 50%;
    background: #fff;
    color: var(--color-text-darker);
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background .15s, border-color .15s, color .15s;
}

.suite_data_stamp {
    position: fixed;
    right: 16px;
    bottom: 6px;
    z-index: 900;
    padding: 3px 7px;
    border-radius: 4px;
    background: rgba(255, 255, 255, .88);
    color: #64748b;
    font-size: 10px;
    font-weight: 650;
    line-height: 1.25;
    white-space: nowrap;
    pointer-events: none;
}

.suite_data_stamp.is_error { color: #b91c1c; }

.suite_suggestions_btn:not(.hidden) { display: flex; }
.suite_suggestions_btn:hover { background: #eff6ff; border-color: #93c5fd; color: var(--color-primary); }
.suite_suggestions_btn i { font-size: 1rem; }
.suite_suggestions_btn.has_items { color: #d97706; border-color: #fcd34d; background: #fffbeb; }

.suite_suggestions_badge {
    position: absolute;
    top: -5px;
    right: -6px;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border: 2px solid #fff;
    border-radius: 999px;
    background: #ef4444;
    color: #fff;
    font-size: 10px;
    line-height: 14px;
    font-weight: 800;
    text-align: center;
}

.modal_overlay.active:has(.suite_suggestions_modal) {
    position: fixed;
    inset: 0;
    width: 100vw;
    height: 100vh;
    padding: 24px;
    z-index: 2400;
}

.modal_overlay.active .modal_content.suite_suggestions_modal {
    width: min(980px, calc(100vw - 48px));
    height: min(720px, calc(100vh - 48px));
    max-width: 980px;
    max-height: 720px;
}

.suite_suggestions_modal .modal_body_scroll { min-height: 0; overflow: hidden; }
.suite_suggestions_intro { margin-bottom: 14px; color: #64748b; font-size: 13px; line-height: 1.45; flex: 0 0 auto; }
.suite_suggestions_filters { display: grid; grid-template-columns: 1.15fr .85fr; gap: 12px; flex: 0 0 auto; }
.suite_suggestions_filters label { display: flex; flex-direction: column; gap: 5px; color: #64748b; font-size: 11px; font-weight: 800; text-transform: uppercase; }
.suite_suggestions_filters select,
.suite_suggestions_search { height: 40px; border: 1px solid var(--color-border); border-radius: 8px; background: #fff; }
.suite_suggestions_filters select { width: 100%; padding: 0 10px; color: var(--color-text-darker); font-size: 13px; font-weight: 650; }
.suite_suggestions_search { display: flex; align-items: center; padding: 0 11px; gap: 8px; color: #94a3b8; }
.suite_suggestions_search input { width: 100%; min-width: 0; border: 0; outline: 0; background: transparent; color: var(--color-text-darker); font-size: 13px; }
.suite_suggestions_status { display: grid; grid-template-columns: auto 1fr auto auto; align-items: center; gap: 10px; margin-top: 14px; padding-bottom: 9px; flex: 0 0 auto; color: #475569; font-size: 12px; font-weight: 700; }
.suite_suggestions_source { color: #64748b; font-size: 11px; font-weight: 600; }
.suite_suggestions_list { min-height: 0; flex: 1; overflow: auto; border: 1px solid var(--color-border); border-radius: 9px; background: #fff; }
.suite_suggestions_columns,
.suite_suggestions_row { display: grid; grid-template-columns: 32px minmax(150px, .9fr) minmax(180px, 1fr) minmax(210px, 1.25fr); gap: 10px; align-items: center; }
.suite_suggestions_columns { position: sticky; top: 0; z-index: 2; padding: 8px 12px; border-bottom: 1px solid var(--color-border); background: #f8fafc; color: #64748b; font-size: 11px; font-weight: 800; text-transform: uppercase; }
.suite_suggestions_row { min-height: 44px; padding: 7px 12px; border-top: 1px solid #eef2f7; font-size: 12px; }
.suite_suggestions_columns + .suite_suggestions_row { border-top: 0; }
.suite_suggestions_row:hover { background: #f8fbff; }
.suite_suggestions_row input { accent-color: var(--color-primary); }
.suite_suggestions_row span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.suite_suggestions_empty { padding: 32px; text-align: center; color: #16a34a; font-weight: 700; }

@media (max-width: 900px) {
    .modal_overlay.active:has(.suite_suggestions_modal) { padding: 8px; }
    .modal_overlay.active .modal_content.suite_suggestions_modal { width: calc(100vw - 16px); height: calc(100vh - 16px); }
    .suite_suggestions_filters { grid-template-columns: 1fr; }
    .suite_suggestions_status { grid-template-columns: 1fr auto; }
    .suite_suggestions_status .suite_suggestions_source { grid-column: 1 / -1; }
    .suite_suggestions_columns { display: none; }
    .suite_suggestions_row { grid-template-columns: 24px 1fr; }
    .suite_suggestions_row span { grid-column: 2; white-space: normal; }
}

/* Barra mensile del tab Economico TIM: mantiene gli stessi componenti della
   Classifica, adattandone soltanto l'ingombro ai display piccoli. */
.classifica_filtri.tc_filtri {
    padding: 12px;
    border-radius: var(--radius-md);
}

.tc_filtri .filtro_gruppo {
    flex: 0 1 220px;
    width: 220px;
}

.tc_filtri .btn_filtro {
    flex: 0 0 auto;
    width: auto;
    white-space: nowrap;
}

#tc_modal_overlay.modal_overlay.active {
    position: fixed;
    inset: 0;
    z-index: 10000;
    padding: 16px;
}

.tc_detail_modal .modal_header .btn_filtro {
    flex: 0 0 36px;
    width: 36px;
    height: 36px;
    padding: 0;
}

@media (max-width: 768px) {
    .classifica_filtri.tc_filtri {
        flex-wrap: wrap;
        gap: 8px;
    }

    .tc_filtri .filtro_gruppo {
        flex: 1 1 100%;
        width: 100%;
    }

    .tc_filtri .btn_filtro {
        flex: 1 1 0;
        min-width: 0;
        padding-left: 10px;
        padding-right: 10px;
    }
}

.classifica_target_select {
    min-width: 450px !important;
    width: 450px;
}

.btn_classifica {
    background-color: #10b981;
    color: #fff;
    font-weight: 700;
}

.btn_classifica:hover {
    background-color: #059669;
}

.classifica_empty_state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 80px 20px;
    color: #047857;
    text-align: center;
    width: 100%;
}

.classifica_empty_state i {
    font-size: 64px;
    color: #10b981;
    margin-bottom: 20px;
    opacity: 0.5;
}

.classifica_empty_state h3 {
    font-size: 18px;
    font-weight: 600;
    color: #374151;
    margin-bottom: 8px;
}

.classifica_empty_state p {
    font-size: 14px;
    color: #9ca3af;
}

.classifica_loading,
.classifica_empty,
.classifica_error {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 60px 20px;
    font-size: 16px;
    color: #6b7280;
    text-align: center;
    width: 100%;
}

.classifica_loading {
    color: #10b981;
}

.classifica_loading::before {
    content: '';
    display: inline-block;
    width: 20px;
    height: 20px;
    border: 3px solid #10b981;
    border-radius: 50%;
    border-top-color: transparent;
    animation: spin 0.8s linear infinite;
    margin-right: 12px;
}

.classifica_error {
    color: #dc2626;
    background: #fef2f2;
    border-radius: 10px;
}

.classifica_grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 20px;
    width: 100%;
}

.classifica_card {
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    overflow: hidden;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.classifica_card:hover {
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
}

.classifica_card_header {
    background: #10b981;
    color: #fff;
    padding: 15px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    font-weight: 700;
    font-size: 14px;
    text-transform: uppercase;
    cursor: default;
}

.classifica_header_box {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.18);
    border-radius: 8px;
    padding: 4px 12px;
    gap: 6px;
    flex-shrink: 0;
}

.classifica_header_box .cl-info-icon {
    font-size: 13px;
    opacity: 0.85;
    position: static;
}

.classifica_header_totale {
    font-size: 14px;
    font-weight: 800;
    white-space: nowrap;
    letter-spacing: 0.5px;
    line-height: 1.2;
}

.classifica_header_box_economica {
    padding: 4px 9px;
    gap: 8px;
}

.ce_official_pilot_banner {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0 0 14px;
    padding: 12px 15px;
    border: 1px solid #bfdbfe;
    border-left: 4px solid #146be3;
    border-radius: 10px;
    background: #eff6ff;
    color: #17345f;
}

.ce_official_pilot_banner > i {
    color: #146be3;
    font-size: 1.15rem;
}

.ce_official_pilot_banner div {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.ce_official_pilot_banner span {
    color: #52657f;
    font-size: .84rem;
}

.ce_official_calc {
    margin: 0 0 14px;
    border: 1px solid #d9e2ef;
    border-radius: 10px;
    overflow: hidden;
    background: #fff;
}

.ce_official_calc_title {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
    background: #f5f8fc;
    color: #253858;
}

.ce_official_calc_title i { color: #146be3; }
.ce_official_calc_title span {
    margin-left: auto;
    color: #687a94;
    font-size: .78rem;
}

.ce_official_calc_row {
    display: grid;
    grid-template-columns: minmax(110px, 180px) minmax(0, 1fr);
    gap: 12px;
    padding: 9px 12px;
    border-top: 1px solid #edf1f6;
    font-size: .82rem;
    line-height: 1.4;
}

.ce_official_calc_row strong { color: #0f5fc7; }
.ce_official_calc_row span { color: #4f6078; }

.ce_pilot_card .classifica_card_header {
    background: linear-gradient(135deg, #0e72df, #0857b8);
}

.ce_pilot_tag {
    flex: 0 0 auto;
    padding: 2px 6px;
    border: 1px solid rgba(255,255,255,.65);
    border-radius: 999px;
    color: #fff;
    font-size: .58rem;
    font-weight: 800;
    letter-spacing: .5px;
}

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

.ce_official_calc_identity span { font-size: .76rem; }
.ce_official_calc_identity em {
    color: #b45309;
    font-size: .68rem;
    font-style: normal;
    font-weight: 800;
}

.ce_official_steps {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(125px, 1fr));
    gap: 7px;
}

.ce_official_steps > span {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 7px 9px;
    border: 1px solid #e5eaf1;
    border-radius: 7px;
    background: #f9fbfd;
}

.ce_official_steps small {
    color: #77869b;
    font-size: .66rem;
    font-weight: 700;
    text-transform: uppercase;
}

.ce_official_steps strong { font-size: .83rem; }
.ce_official_steps .ce_threshold_status {
    grid-column: span 2;
    justify-content: center;
}
.ce_official_steps .ce_threshold_status.reached {
    border-color: #86efac;
    background: #f0fdf4;
}
.ce_official_steps .ce_threshold_status.reached strong { color: #15803d; }
.ce_official_steps .ce_threshold_status.missing {
    border-color: #fdba74;
    background: #fff7ed;
}
.ce_official_steps .ce_threshold_status.missing strong { color: #c2410c; }
.ce_official_steps .ce_formula_result {
    grid-column: 1 / -1;
    border-color: #b9d8ff;
    background: #eef6ff;
}
.ce_official_steps .ce_formula_result strong {
    color: #064fa8;
    font-size: 1rem;
}
.ce_official_steps .ce_formula_result em {
    margin-top: 4px;
    color: #526987;
    font-size: .72rem;
    font-style: normal;
    line-height: 1.35;
}
.ce_official_steps .ce_formula_result em b { color: #264a78; }

.ce_division_switch {
    display: flex;
    flex: 0 0 auto;
    flex-wrap: wrap;
    width: 100%;
    box-sizing: border-box;
    gap: 7px;
    margin: 12px 0;
    padding: 6px;
    overflow: visible;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    background: #f8fafc;
}
.ce_division_switch button {
    flex: 0 0 auto;
    padding: 8px 13px;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: #40516a;
    font-weight: 800;
    cursor: pointer;
}
.ce_division_switch button.active { background: #146be3; color: #fff; }
.ce_division_switch button:disabled { color: #94a3b8; cursor: not-allowed; }
.ce_division_summary_grid {
    display: grid;
    flex: 0 0 auto;
    width: 100%;
    box-sizing: border-box;
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
    gap: 12px;
}
.ce_division_summary_card {
    padding: 16px;
    border: 1px solid #dbe4ef;
    border-radius: 13px;
    background: #fff;
    text-align: left;
    box-shadow: 0 5px 16px rgba(15, 23, 42, .06);
    cursor: pointer;
}
.ce_division_summary_card.disabled { background: #f8fafc; color: #94a3b8; cursor: default; }
.ce_division_summary_head { display: flex; justify-content: space-between; gap: 10px; }
.ce_division_summary_head strong { color: #17243a; font-size: 1rem; }
.ce_division_summary_head span { color: #6b7d95; font-size: .75rem; }
.ce_division_summary_value { margin-top: 16px; color: #087f5b; font-size: 1.45rem; font-weight: 900; }
.ce_division_summary_units { margin-top: 2px; color: #64748b; font-size: .78rem; }
.ce_division_summary_status { margin-top: 12px; padding: 7px 9px; border-radius: 7px; font-size: .72rem; font-weight: 800; }
.ce_division_summary_status.reached { background: #dcfce7; color: #15803d; }
.ce_division_summary_status.missing { background: #fff7ed; color: #c2410c; }
.ce_division_summary_card.disabled .ce_division_summary_status { background: #eef2f7; color: #64748b; }
.ce_division_context {
    display: flex;
    flex: 0 0 auto;
    width: 100%;
    box-sizing: border-box;
    align-items: center;
    gap: 8px;
    margin: 12px 2px;
    color: #64748b;
    font-size: .8rem;
}
.ce_division_context strong { color: #0f5fc7; font-size: .95rem; }
.table_body > .ce_official_pilot_banner,
.table_body > .classifica_grid {
    flex: 0 0 auto;
    width: 100%;
    box-sizing: border-box;
}

@media (max-width: 768px) {
    .ce_official_calc_row { grid-template-columns: 1fr; gap: 3px; }
    .ce_official_calc_title { align-items: flex-start; flex-wrap: wrap; }
    .ce_official_calc_title span { width: 100%; margin-left: 24px; }
    .ce_official_steps { grid-template-columns: repeat(2, minmax(110px, 1fr)); }
}

.classifica_header_metrics {
    display: flex;
    min-width: 0;
    flex-direction: column;
    align-items: flex-end;
    line-height: 1.05;
}

.classifica_header_unita {
    margin-top: 2px;
    color: rgba(255, 255, 255, 0.86);
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 0.35px;
    white-space: nowrap;
}

@media (max-width: 768px) {
    .classifica_card_header {
        cursor: pointer;
    }
}

.header_left_info {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 1;
    overflow: hidden;
}

.header_left_info span {
    font-weight: 400;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: normal;
    line-height: 1.3;
}

.header_end_icon {
    font-size: 16px;
    opacity: 0.9;
    margin-right: 5px;
}

.toggle_chevron {
    display: none;
    font-size: 14px;
    transition: transform 0.3s ease;
}

@media (max-width: 768px) {
    .toggle_chevron {
        display: block;
    }
}

.classifica_card.collapsed .toggle_chevron {
    transform: rotate(-180deg);
}

.classifica_card_header i {
    font-size: 18px;
}

.classifica_card_body {
    padding: 10px;
    max-height: 400px;
    overflow-y: auto;
    /* Nascondi barre di scorrimento laterali */
    scrollbar-width: none;
    /* Firefox */
    -ms-overflow-style: none;
    /* IE/Edge */
}

.classifica_card_body::-webkit-scrollbar {
    display: none;
    /* Chrome/Safari */
}

@media (max-width: 768px) {
    .classifica_card.collapsed .classifica_card_body {
        display: none;
    }
}

.classifica_item {
    display: flex;
    align-items: center;
    padding: 10px 12px;
    border-radius: 8px;
    margin-bottom: 5px;
    transition: background-color 0.2s ease;
}

.classifica_item:hover {
    background-color: #ecfdf5;
}

.classifica_item.gold {
    background: #d1fae5;
    border: 1px solid #10b981;
}

.classifica_item.silver {
    background: var(--color-border-light);
    border: 1px solid #9ca3af;
}

.classifica_item.bronze {
    background: #fef3c7;
    border: 1px solid #d97706;
}

.classifica_pos {
    min-width: 30px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.classifica_pos .fa-medal {
    font-size: 20px;
}

.classifica_pos .fa-medal.gold {
    color: #10b981;
}

.classifica_pos .fa-medal.silver {
    color: #6b7280;
}

.classifica_pos .fa-medal.bronze {
    color: #f59e0b;
}

.classifica_pos .pos_num {
    font-size: 14px;
    font-weight: 600;
    color: #6b7280;
}

.classifica_operatore {
    flex: 1;
    font-size: 13px;
    font-weight: 500;
    color: #1f2937;
    padding: 0 5px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
    margin-right: 5px;
}

.classifica_punti {
    font-size: 14px;
    font-weight: 700;
    color: #059669;
    min-width: 75px;
    text-align: right;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    line-height: 1.1;
}

.punti_unit {
    font-size: 9px;
    font-weight: 600;
    color: #10b981;
    opacity: 0.8;
}

.classifica_no_data {
    text-align: center;
    padding: 20px;
    color: #9ca3af;
    font-style: italic;
}

/* Stato vuoto dentro un dropdown multiselect (es. ricerca senza risultati) */
.multiselect-empty {
    padding: 10px 12px;
    font-size: 13px;
    color: #9ca3af;
    font-style: italic;
    text-align: center;
}

/* ========================================= */
/* === MEDIA CLASSIFICHE (ranking generale addetti) === */
/* ========================================= */

.mc_table {
    width: 100%;
    border: 1px solid var(--color-border-light, #e5e7eb);
    border-radius: 10px;
    background: #fff;
    /* niente overflow:hidden: impedirebbe lo sticky dell'header */
}

.mc_thead,
.mc_row {
    display: grid;
    grid-template-columns: 56px minmax(140px, 1fr) 90px 80px 90px 90px 80px;
    align-items: center;
}

/* Header fisso: resta in cima mentre le righe scorrono nel .table_body */
.mc_thead {
    background: #065f46;
    color: #fff;
    position: sticky;
    top: 0;
    z-index: 2;
    border-radius: 10px 10px 0 0;
}

/* Angoli arrotondati sull'ultima riga, ora che il clip e' stato rimosso */
.mc_row:last-child {
    border-radius: 0 0 10px 10px;
}

.mc_th {
    padding: 10px 8px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.mc_th_num {
    text-align: right;
}

.mc_th_pos {
    text-align: center;
}

.mc_row {
    border-top: 1px solid var(--color-border-light, #e5e7eb);
    cursor: pointer;
    transition: background-color 0.15s ease;
}

.mc_row:hover {
    background: #ecfdf5;
}

.mc_row.gold {
    background: #d1fae5;
}

.mc_row.silver {
    background: var(--color-border-light, #f3f4f6);
}

.mc_row.bronze {
    background: #fef3c7;
}

.mc_td {
    padding: 10px 8px;
    font-size: 13px;
    color: #1f2937;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.mc_td_pos {
    text-align: center;
}

.mc_td_pos .fa-medal {
    font-size: 18px;
}

.mc_td_pos .fa-medal.gold   { color: #10b981; }
.mc_td_pos .fa-medal.silver { color: #6b7280; }
.mc_td_pos .fa-medal.bronze { color: #f59e0b; }

.mc_td_pos .pos_num {
    font-weight: 600;
    color: #6b7280;
}

.mc_td_nome {
    font-weight: 500;
}

.mc_td_num {
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.mc_td_media {
    font-weight: 700;
    color: #059669;
    font-size: 14px;
}

/* --- Modal dettaglio posizioni per operatore --- */

.mc_det_table {
    width: 100%;
}

.mc_det_row {
    display: grid;
    grid-template-columns: minmax(160px, 1fr) 110px 90px;
    align-items: center;
    padding: 9px 10px;
    border-bottom: 1px solid var(--color-border-light, #e5e7eb);
    font-size: 13px;
}

.mc_det_head {
    background: #f9fafb;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #6b7280;
}

.mc_det_nome {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.mc_det_score {
    text-align: right;
    font-variant-numeric: tabular-nums;
    color: #374151;
}

.mc_det_pos {
    text-align: right;
    font-weight: 700;
    color: #1f2937;
    font-variant-numeric: tabular-nums;
}

.mc_det_pos.gold   { color: #10b981; }
.mc_det_pos.silver { color: #6b7280; }
.mc_det_pos.bronze { color: #f59e0b; }

/* Classifica senza produzione: conta come ultimo posto, va distinta */
.mc_det_row_zero {
    background: #fafafa;
}

.mc_det_row_zero .mc_det_nome,
.mc_det_row_zero .mc_det_score {
    color: #9ca3af;
}

.mc_det_pos_zero {
    color: #9ca3af;
    font-weight: 600;
}

.mc_det_pos_zero .mc_det_tot {
    font-style: italic;
}

.mc_det_tot {
    font-size: 11px;
    font-weight: 500;
    color: #9ca3af;
    margin-left: 3px;
}

@media (max-width: 768px) {
    .mc_thead,
    .mc_row {
        grid-template-columns: 44px minmax(100px, 1fr) 70px 60px;
    }

    /* Su mobile mostriamo solo posizione, nome, media e n. classifiche */
    .mc_th:nth-child(n + 5),
    .mc_td:nth-child(n + 5) {
        display: none;
    }
}

/* ========================================= */
/* === OVERVIEW DASHBOARD === */

.ov_dashboard {
    display: flex;
    flex-direction: column;
    gap: 18px;
    padding: 4px 16px 20px;
    width: 100%;
    box-sizing: border-box;
}

/* KPI row */
.ov_kpi_row {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.ov_kpi_card {
    display: flex;
    align-items: center;
    gap: 14px;
    background: #fff;
    border-radius: 12px;
    padding: 14px 20px;
    flex: 1 1 150px;
    min-width: 140px;
    box-shadow: 0 1px 4px rgba(0,0,0,0.07);
    border-left: 4px solid transparent;
}
.ov_kpi_primary { border-left-color: #6366f1; }
.ov_kpi_cyan    { border-left-color: #06b6d4; }
.ov_kpi_green   { border-left-color: #10b981; }
.ov_kpi_amber   { border-left-color: #f59e0b; }
.ov_kpi_purple  { border-left-color: #8b5cf6; }
.ov_kpi_rose    { border-left-color: #f43f5e; }

.ov_kpi_icon {
    font-size: 1.5rem;
    opacity: 0.75;
    flex-shrink: 0;
}
.ov_kpi_primary .ov_kpi_icon { color: #6366f1; }
.ov_kpi_cyan    .ov_kpi_icon { color: #06b6d4; }
.ov_kpi_green   .ov_kpi_icon { color: #10b981; }
.ov_kpi_amber   .ov_kpi_icon { color: #f59e0b; }
.ov_kpi_purple  .ov_kpi_icon { color: #8b5cf6; }
.ov_kpi_rose    .ov_kpi_icon { color: #f43f5e; }

.ov_kpi_val {
    font-size: 1.45rem;
    font-weight: 700;
    color: #111827;
    line-height: 1.1;
}
.ov_kpi_label {
    font-size: 0.72rem;
    color: #6b7280;
    margin-top: 2px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

/* Charts grid */
.ov_charts_row {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
    width: 100%;
    box-sizing: border-box;
}
.ov_charts_row_2 > .ov_card { flex: 1 1 340px; }

/* Trend (sinistra larga) + Donut (destra compatta) */
.ov_charts_row_trend_donut { display: flex; gap: 16px; flex-wrap: wrap; }
.ov_charts_row_trend_donut > .ov_card:first-child { flex: 3 1 480px; }
.ov_charts_row_trend_donut > .ov_card:last-child  { flex: 1 1 260px; }

.ov_card {
    background: #fff;
    border-radius: 12px;
    padding: 16px 18px 14px;
    box-shadow: 0 1px 4px rgba(0,0,0,0.07);
    flex: 1 1 0;
    min-width: 0;
    box-sizing: border-box;
}
.ov_card_wide {
    width: 100%;
    flex: 1 1 100%;
}
.ov_card_title {
    font-size: 0.82rem;
    font-weight: 600;
    color: #374151;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    gap: 6px;
}
.ov_card_title i { color: #6366f1; }

.ov_chart_wrap {
    position: relative;
}
.ov_chart_wrap canvas {
    display: block;
    width: 100% !important;
}
/* Altezze fisse per tipo grafico — maintainAspectRatio: false richiede altezza esplicita */
.ov_chart_wrap_line  { height: 320px; }
.ov_chart_wrap_bar   { height: 240px; }
.ov_chart_wrap_donut { height: 280px; }
.ov_no_data {
    color: #9ca3af;
    font-size: 0.85rem;
    padding: 12px 0;
}

/* Vendite card */
.ov_vnd_pills {
    display: flex;
    gap: 14px;
    flex-wrap: wrap;
}
.ov_vnd_pill {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    background: var(--color-bg-light, #f3f4f6);
    border-radius: 10px;
    padding: 12px 20px;
    min-width: 110px;
}
.ov_vnd_pill i { font-size: 1.3rem; opacity: 0.7; }
.ov_vnd_disp i { color: #6366f1; }
.ov_vnd_acc  i { color: #06b6d4; }
.ov_vnd_eur  i { color: #10b981; }
.ov_vnd_num {
    font-size: 1.3rem;
    font-weight: 700;
    color: #111827;
}
.ov_vnd_lbl {
    font-size: 0.7rem;
    color: #6b7280;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

/* Soglie tab container */
.ov_soglie_tab {
    padding: 4px 16px 20px;
    width: 100%;
    box-sizing: border-box;
}
.ov_empty {
    padding: 40px 20px;
    text-align: center;
    color: #6b7280;
    font-size: 0.95rem;
}

/* Layout complessivo: due tabelle soglie affiancate */
.ov_soglie_split {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 14px;
    margin-bottom: 4px;
}
@media (max-width: 1100px) {
    .ov_soglie_split { grid-template-columns: 1fr; }
}
/* Quando una sola tabella è presente, occupa tutto lo spazio */
.ov_soglie_split.ov_soglie_single { grid-template-columns: 1fr; }
.ov_soglie_col {
    min-width: 0;
}

/* Layout N card azienda (usato quando esistono solo soglie_azienda, no tabella store) */
.ov_az_cards {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
    margin-bottom: 4px;
}
@media (max-width: 900px) { .ov_az_cards { grid-template-columns: 1fr; } }

/* Tabella per-store (sinistra): lista stores + dettaglio piste */
.ov_st_wrap {
    background: #fff;
    border-radius: 12px;
    border: 1px solid #e5e7eb;
    box-shadow: 0 1px 4px rgba(0,0,0,0.05);
    overflow: hidden;
}
.ov_st_body {
    display: grid;
    grid-template-columns: max-content 1fr;
    min-height: 200px;
}
.ov_st_list {
    border-right: 1px solid #e5e7eb;
    background: #f9fafb;
    max-height: 420px;
    overflow-y: auto;
}
.ov_store_item {
    padding: 8px 14px;
    font-size: 0.82rem;
    color: #374151;
    cursor: pointer;
    border-bottom: 1px solid #f1f5f9;
    transition: background 0.1s, color 0.1s;
    white-space: nowrap;
}
.ov_store_item:hover { background: #dbeafe; }
.ov_store_item.active {
    background: #0b66dd;
    color: #fff;
    font-weight: 600;
}
.ov_st_detail { padding: 4px 8px; overflow-x: auto; }
/* Soglia / Att nella tabella sinistra: larghezza compatta uguale */
.ov_st_table .ov_az_th_chip_narrow,
.ov_st_table td.ov_az_td_chip {
    width: 64px;
    min-width: 64px;
    max-width: 64px;
    text-align: center;
    padding: 5px 4px;
    color: #9ca3af;
    font-weight: 600;
    font-size: 0.72rem;
    text-transform: uppercase;
}
.ov_st_table td.ov_az_td_chip { padding: 5px 4px; }

/* Tabella per-azienda (destra): layout verticale con colonne per azienda */
.ov_az_vwrap {
    background: #fff;
    border-radius: 12px;
    border: 1px solid #e5e7eb;
    box-shadow: 0 1px 4px rgba(0,0,0,0.05);
    overflow: auto;
}
/* Titolo card destra: "Soglie per Azienda" + checkbox aziende inline */
.ov_az_title_row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}
.ov_az_title_txt { flex-shrink: 0; }
.ov_az_title_cbs {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
}
.ov_az_title_cb_label {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    font-size: 0.76rem;
    font-weight: 700;
    color: #1f2937;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}
.ov_az_title_cb_label input[type="checkbox"] {
    appearance: none;
    -webkit-appearance: none;
    width: 16px;
    height: 16px;
    border-radius: 4px;
    border: 2px solid #d1d5db;
    background: #fff;
    cursor: pointer;
    position: relative;
    flex-shrink: 0;
}
.ov_az_title_cb_label input[type="checkbox"]:checked {
    background: #0b66dd;
    border-color: #0b66dd;
}
.ov_az_title_cb_label input[type="checkbox"]:checked::after {
    content: '';
    position: absolute;
    left: 3px;
    top: 0;
    width: 4px;
    height: 8px;
    border: 2px solid #fff;
    border-top: none;
    border-left: none;
    transform: rotate(45deg);
}
.ov_col_hidden { display: none !important; }
.ov_az_card {
    background: #fff;
    border-radius: 12px;
    border: 1px solid #e5e7eb;
    box-shadow: 0 1px 4px rgba(0,0,0,0.05);
    overflow: hidden;
    min-width: 0;
}
.ov_az_card_header {
    padding: 8px 12px;
    background: #f3f4f6;
    font-size: 0.8rem;
    font-weight: 700;
    color: #1f2937;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    border-bottom: 1px solid #e5e7eb;
}
.ov_az_table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.82rem;
}
.ov_az_table thead th {
    padding: 5px 6px;
    color: #9ca3af;
    font-weight: 600;
    font-size: 0.72rem;
    text-transform: uppercase;
    border-bottom: 1px solid #f1f5f9;
    text-align: left;
}
.ov_az_th_chip, .ov_az_td_chip { text-align: center; }
.ov_az_th_perc, .ov_az_td_perc { text-align: right; min-width: 36px; }
.ov_az_th_cb, .ov_az_td_cb { width: 28px; text-align: center; }
.ov_az_table tbody tr.ov_az_pista_row { border-bottom: 1px solid #f1f5f9; cursor: pointer; transition: background 0.1s; }
.ov_az_table tbody tr.ov_az_pista_row:last-of-type { border-bottom: none; }
.ov_az_table tbody tr.ov_az_pista_row:hover { background: #f5f7ff; }
/* Tabella sinistra: righe dettaglio store (tr dentro #ov_st_detail_body) */
#ov_st_detail_body tr { cursor: pointer; transition: background 0.1s; }
#ov_st_detail_body tr:hover { background: #f5f7ff; }
.ov_az_td_cb { padding: 5px 2px 5px 8px; }
.ov_az_td_pista {
    padding: 5px 6px;
    color: #374151;
    font-weight: 500;
}
.ov_az_td_chip { padding: 5px 4px; }
.ov_az_td_perc {
    padding: 5px 8px 5px 4px;
    font-weight: 700;
    font-size: 0.78rem;
}
.ov_perc_ok  { color: #16a34a; }
.ov_perc_warn { color: #d97706; }
.ov_perc_ko  { color: #dc2626; }
.ov_az_cb_label {
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}
.ov_az_cb_label input[type="checkbox"] {
    appearance: none;
    -webkit-appearance: none;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    border: 2px solid #d1d5db;
    background: #fff;
    cursor: pointer;
    transition: border-color 0.15s, background 0.15s;
    flex-shrink: 0;
    position: relative;
}
.ov_az_cb_label input[type="checkbox"]:checked {
    background: #0b66dd;
    border-color: #0b66dd;
}
.ov_az_cb_label input[type="checkbox"]:checked::after {
    content: '';
    position: absolute;
    left: 5px;
    top: 2px;
    width: 5px;
    height: 9px;
    border: 2px solid #fff;
    border-top: none;
    border-left: none;
    transform: rotate(45deg);
}
.ov_az_chart_row.hidden { display: none; }
.ov_az_chart_td {
    padding: 6px 10px 8px;
    background: #fafafa;
}

/* Soglie target — box per pista (vecchio layout, mantenuto per compatibilità) */
.ov_soglie_boxes {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    width: 100%;
    box-sizing: border-box;
}
.ov_soglia_box {
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 1px 4px rgba(0,0,0,0.07);
    padding: 14px 16px;
    flex: 1 1 260px;
    min-width: 0;
    box-sizing: border-box;
}
.ov_soglia_box_title {
    font-size: 0.78rem;
    font-weight: 700;
    color: #374151;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    gap: 6px;
    border-bottom: 2px solid #e5e7eb;
    padding-bottom: 8px;
}
.ov_soglia_box_title i { color: #6366f1; }
.ov_soglia_table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.82rem;
}
.ov_soglia_table tbody tr { border-bottom: 1px solid #f1f5f9; }
.ov_soglia_table tbody tr:last-child { border-bottom: none; }
.ov_soglia_col_azienda { width: auto; }
.ov_soglia_col_soglia  { width: 72px; }
.ov_soglia_col_att     { width: 56px; }
.ov_soglia_td_azienda {
    padding: 5px 6px 5px 0;
    color: #374151;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 0;
}
.ov_soglia_td_chip {
    padding: 5px 0;
    text-align: center;
}
.ov_soglia_chip {
    display: inline-block;
    font-size: 0.75rem;
    font-weight: 700;
    padding: 2px 10px;
    border-radius: 20px;
    white-space: nowrap;
}
.ov_soglia_chip_soglia {
    background: #dbeafe;
    color: #0b66dd;
}
.ov_soglia_chip_att {
    background: #f0fdf4;
    color: #16a34a;
}

/* Empty / loading / error */
.ov_empty_state {
    text-align: center;
    padding: 60px 20px;
    color: #9ca3af;
}
.ov_empty_state i { font-size: 2.8rem; margin-bottom: 14px; display: block; color: #d1d5db; }
.ov_empty_state h3 { font-size: 1rem; color: #6b7280; margin-bottom: 6px; }
.rep_tab_loading {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 60px 20px;
    color: #9ca3af;
    font-size: 1.6rem;
}

.ov_loading, .ov_error {
    text-align: center;
    padding: 40px 20px;
    color: #6b7280;
    font-size: 0.95rem;
}
.ov_error { color: #ef4444; }

@media (max-width: 768px) {
    .ov_kpi_card { flex: 1 1 calc(50% - 6px); min-width: 120px; padding: 12px 14px; }
    .ov_kpi_val { font-size: 1.2rem; }
    .ov_charts_row_2 > .ov_card { flex: 1 1 100%; }
}

/* ========================================= */
/* === RIEPILOGO OPERATORE === */
/* ========================================= */

.riepilogo_empty_state,
.riepilogo_loading,
.riepilogo_error {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 60px 20px;
    color: #9ca3af;
    gap: 12px;
    text-align: center;
}

.riepilogo_empty_state i,
.riepilogo_loading i {
    font-size: 56px;
    color: #d1d5db;
}

.riepilogo_empty_state h3 {
    font-size: 1.1rem;
    font-weight: 700;
    color: #6b7280;
}

.riepilogo_error {
    color: #ef4444;
}

.riepilogo_open_filters_btn {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 2px 7px;
    background: var(--color-primary, #e60000);
    color: white;
    border: none;
    border-radius: 4px;
    font-size: 12px;
    cursor: pointer;
    vertical-align: middle;
    line-height: 1.6;
}

.riepilogo_open_filters_btn:hover {
    opacity: 0.85;
}

/* Dashboard container */
/* ---- Combobox operatore ricercabile ---- */
.riepilogo_op_native_hidden { display: none !important; }

.riepilogo_op_combo {
    position: relative;
    width: 100%;
    min-width: 0;
}
.riepilogo_op_input {
    width: 100%;
    padding-right: 52px; /* spazio per X + caret */
    box-sizing: border-box;
    cursor: text;
}
.riepilogo_op_caret {
    position: absolute;
    right: 11px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 11px;
    color: var(--color-text-muted, #9ca3af);
    pointer-events: auto;
    cursor: pointer;
    transition: transform 0.18s ease;
}
.riepilogo_op_clear {
    position: absolute;
    right: 28px;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    padding: 0;
    border: none;
    background: none;
    border-radius: 50%;
    cursor: pointer;
    color: var(--color-text-muted, #9ca3af);
    font-size: 12px;
    transition: color 0.15s, background 0.15s;
}
.riepilogo_op_clear:hover { color: #be123c; background: #fff1f2; }
.riepilogo_op_clear.hidden { display: none; }
.riepilogo_op_combo.open .riepilogo_op_caret {
    transform: translateY(-50%) rotate(180deg);
}
.riepilogo_op_list {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    background: #fff;
    border: 1px solid var(--color-border, #d1d5db);
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    z-index: 1000;
    max-height: 320px;
    overflow-y: auto;
    padding: 4px;
}
.riepilogo_op_list.hidden { display: none; }
.riepilogo_op_item {
    padding: 8px 12px;
    border-radius: 6px;
    font-size: 13px;
    color: var(--color-text-primary, #111827);
    cursor: pointer;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: background-color 0.12s ease;
}
.riepilogo_op_item:hover { background-color: var(--color-bg-light, #f1f5f9); }
.riepilogo_op_item.selected {
    background-color: #eff6ff;
    color: var(--color-primary, #0b66dd);
    font-weight: 600;
}
.riepilogo_op_empty {
    padding: 10px 12px;
    font-size: 13px;
    color: #9ca3af;
    text-align: center;
}

.riepilogo_dashboard {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 16px;
    width: 100%;
    box-sizing: border-box;
    height: 100%;
    min-height: 0;
    overflow: hidden;
}

/* 3-column layout */
.riepilogo_columns_3 {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    /* Riga a altezza definita: le colonne non crescono oltre il contenitore,
       così lo scroll avviene dentro le singole tabelle e non nella pagina */
    grid-template-rows: minmax(0, 1fr);
    gap: 16px;
    align-items: stretch;
    width: 100%;
    box-sizing: border-box;
    flex: 1;
    min-height: 0;
}

.riepilogo_col {
    display: flex;
    flex-direction: column;
    gap: 16px;
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
    min-height: 0;
}

/* Ogni card dentro una colonna non deve sforare l'altezza disponibile:
   la card si limita all'altezza della colonna e il contenuto scrolla dentro */
.riepilogo_col > .riepilogo_section_card {
    display: flex;
    flex-direction: column;
    min-height: 0;
    max-height: 100%;
    overflow: hidden;
}
/* Il titolo resta fisso, l'elenco sottostante scrolla */
.riepilogo_col > .riepilogo_section_card > .riepilogo_section_title { flex: 0 0 auto; }
.riepilogo_col > .riepilogo_section_card > .riepilogo_vnd_filter_row { flex: 0 0 auto; }
.riepilogo_col > .riepilogo_section_card > .riepilogo_cl_items,
.riepilogo_col > .riepilogo_section_card > .riepilogo_macro_cards {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
}
/* La colonna aziende: il contenitore card a sua volta scrolla */
.riepilogo_col > .riepilogo_az_cards {
    flex: 1;
    min-height: 0;
}

/* Scroll interno alle 3 tabelle SENZA mostrare la barra di scorrimento */
.riepilogo_vnd_list,
.riepilogo_col > .riepilogo_section_card > .riepilogo_cl_items,
.riepilogo_col > .riepilogo_section_card > .riepilogo_macro_cards,
.riepilogo_col > .riepilogo_az_cards {
    scrollbar-width: none;        /* Firefox */
    -ms-overflow-style: none;     /* IE/Edge */
}
.riepilogo_vnd_list::-webkit-scrollbar,
.riepilogo_col > .riepilogo_section_card > .riepilogo_cl_items::-webkit-scrollbar,
.riepilogo_col > .riepilogo_section_card > .riepilogo_macro_cards::-webkit-scrollbar,
.riepilogo_col > .riepilogo_az_cards::-webkit-scrollbar {
    display: none;                /* Chrome/Safari */
}

/* Caso azienda singola (es. WE ON IT - GROSSETO): header fisso, righe scrollabili */
.riepilogo_az_cards > .riepilogo_az_card:only-child {
    display: flex;
    flex-direction: column;
    min-height: 0;
    max-height: 100%;
}
.riepilogo_az_cards > .riepilogo_az_card:only-child > .riepilogo_az_header {
    flex: 0 0 auto;
}
.riepilogo_az_cards > .riepilogo_az_card:only-child > .riepilogo_az_piste_list {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
}
.riepilogo_az_cards > .riepilogo_az_card:only-child > .riepilogo_az_piste_list::-webkit-scrollbar {
    display: none;
}

/* Classifiche: item cliccabile */
.riepilogo_cl_item_btn {
    cursor: pointer;
    border-radius: 8px;
    transition: background 0.15s;
}

.riepilogo_cl_item_btn:hover {
    background: #f3f4f6;
}

.riepilogo_cl_item_btn.active {
    background: #eff6ff;
    outline: 2px solid #3b82f6;
}

/* Ranking list nel trend panel */
.riepilogo_cl_ranking_list {
    display: flex;
    flex-direction: column;
    gap: 5px;
    max-height: 320px;
    overflow-y: auto;
}

.riepilogo_cl_ranking_row {
    display: grid;
    grid-template-columns: 28px 1fr 80px 56px;
    align-items: center;
    gap: 8px;
    padding: 4px 6px;
    border-radius: 6px;
    font-size: 0.78rem;
}

.riepilogo_cl_ranking_row.riepilogo_cl_self {
    background: #fef9c3;
    font-weight: 700;
}

.riepilogo_cl_rank {
    font-size: 0.72rem;
    font-weight: 700;
    color: #6b7280;
    text-align: center;
}

.riepilogo_cl_rank.gold   { color: #b45309; }
.riepilogo_cl_rank.silver { color: #6b7280; }
.riepilogo_cl_rank.bronze { color: #92400e; }

.riepilogo_cl_op_name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: #374151;
}

.riepilogo_cl_score_bar_wrap {
    height: 5px;
    background: #e5e7eb;
    border-radius: 3px;
    overflow: hidden;
}

.riepilogo_cl_score_bar {
    height: 100%;
    background: var(--color-primary, #e60000);
    border-radius: 3px;
}

.riepilogo_cl_score {
    font-size: 0.72rem;
    font-weight: 600;
    color: #374151;
    text-align: right;
    white-space: nowrap;
}

/* Header card: nome operatore + posizione */
.riepilogo_header_card {
    background: linear-gradient(135deg, #0f172a 0%, #1e3a5f 100%);
    border-radius: 14px;
    padding: 14px 20px;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    color: #fff;
    width: 100%;
    box-sizing: border-box;
    flex-wrap: wrap;
}

.riepilogo_header_left {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-shrink: 0;
}

.riepilogo_header_info {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
}

.riepilogo_avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: rgba(255,255,255,0.15);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    flex-shrink: 0;
}

.riepilogo_nome {
    font-size: 1rem;
    font-weight: 800;
    letter-spacing: 0.5px;
}

.riepilogo_periodo_label {
    font-size: 0.75rem;
    color: rgba(255,255,255,0.65);
}

.riepilogo_header_kpi {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items: center;
    justify-content: flex-end;
}

.riepilogo_header_kpi .riepilogo_vnd_tip {
    font-size: 0.7rem;
}

.riepilogo_header_kpi .riepilogo_vnd_totale {
    font-size: 0.78rem;
    font-weight: 700;
    color: #fff;
    background: rgba(255,255,255,0.15);
    padding: 3px 10px;
    border-radius: 20px;
    white-space: nowrap;
}

.riepilogo_mese_perc_label {
    font-size: 0.7rem;
    color: rgba(255,255,255,0.6);
    white-space: nowrap;
}

/* KPI row */
.riepilogo_kpi_row {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
}

.riepilogo_kpi_card {
    background: #fff;
    border-radius: 12px;
    padding: 16px 14px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.07);
    border: 1px solid #e5e7eb;
    text-align: center;
}

.riepilogo_kpi_card.gold { border-color: #fbbf24; background: #fffbeb; }
.riepilogo_kpi_card.silver { border-color: #9ca3af; background: #f9fafb; }
.riepilogo_kpi_card.bronze { border-color: #d97706; background: #fffbeb; }

.riepilogo_kpi_icon {
    font-size: 22px;
    color: #10b981;
}

.riepilogo_kpi_card.gold .riepilogo_kpi_icon { color: #f59e0b; }
.riepilogo_kpi_card.silver .riepilogo_kpi_icon { color: #6b7280; }
.riepilogo_kpi_card.bronze .riepilogo_kpi_icon { color: #d97706; }

.riepilogo_kpi_value {
    font-size: 1.5rem;
    font-weight: 800;
    color: #111827;
    line-height: 1;
}

.riepilogo_kpi_label {
    font-size: 0.7rem;
    font-weight: 600;
    color: #9ca3af;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.riepilogo_vs_media {
    font-size: 0.72rem;
    font-weight: 700;
    margin-top: 2px;
}

.riepilogo_vs_media.positivo { color: #10b981; }
.riepilogo_vs_media.negativo { color: #ef4444; }

/* Proiezione row */
.riepilogo_proiezione_row {
    background: #f0fdf4;
    border: 1px solid #bbf7d0;
    border-radius: 10px;
    padding: 10px 16px;
    font-size: 0.88rem;
    color: #065f46;
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.riepilogo_proiezione_row i {
    color: #10b981;
}

/* Generic section card */
.riepilogo_section_card {
    background: #fff;
    border-radius: 12px;
    padding: 16px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.06);
    border: 1px solid #e5e7eb;
    width: 100%;
    box-sizing: border-box;
}

.riepilogo_section_title {
    font-size: 0.82rem;
    font-weight: 800;
    color: #374151;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    margin-bottom: 14px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.riepilogo_section_title i {
    color: #10b981;
    font-size: 14px;
}

/* Obiettivi progress bars */
.riepilogo_obiettivi_list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.riepilogo_obiettivo_row {
    display: grid;
    grid-template-columns: 130px 1fr 140px;
    align-items: center;
    gap: 10px;
}

.riepilogo_obiettivo_nome {
    font-size: 0.82rem;
    font-weight: 700;
    color: #374151;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.riepilogo_obiettivo_bar_wrap {
    min-width: 0;
}

.riepilogo_obiettivo_bar {
    height: 10px;
    background: #e5e7eb;
    border-radius: 5px;
    overflow: hidden;
    position: relative;
}

.riepilogo_obiettivo_fill {
    height: 100%;
    background: #10b981;
    border-radius: 5px;
    transition: width 0.7s ease;
}

.riepilogo_obiettivo_bar.obiettivo-raggiunto .riepilogo_obiettivo_fill { background: #10b981; }
.riepilogo_obiettivo_bar.obiettivo-buono .riepilogo_obiettivo_fill { background: #f59e0b; }
.riepilogo_obiettivo_bar.obiettivo-basso .riepilogo_obiettivo_fill { background: #ef4444; }

.riepilogo_obiettivo_numeri {
    display: flex;
    align-items: baseline;
    gap: 4px;
    font-size: 0.8rem;
    justify-content: flex-end;
}

.riepilogo_ob_prod {
    font-weight: 700;
    color: #111827;
}

.riepilogo_ob_sep {
    color: #9ca3af;
    font-size: 0.75rem;
}

.riepilogo_ob_perc {
    font-weight: 800;
    min-width: 36px;
    text-align: right;
}

.riepilogo_ob_perc.obiettivo-raggiunto { color: #10b981; }
.riepilogo_ob_perc.obiettivo-buono { color: #f59e0b; }
.riepilogo_ob_perc.obiettivo-basso { color: #ef4444; }

/* Trend SVG chart */
.riepilogo_chart_wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}

.riepilogo_chart_wrap::-webkit-scrollbar {
    display: none;
}

.riepilogo_chart_svg {
    display: block;
    min-width: 100%;
    height: 100px;
}

.riepilogo_bar_rect {
    fill: #10b981;
    opacity: 0.85;
    cursor: pointer;
    transition: opacity 0.15s;
}

.riepilogo_bar_rect:hover {
    opacity: 1;
    fill: #059669;
}

.riepilogo_bar_label {
    font-size: 9px;
    fill: #9ca3af;
    font-family: inherit;
}

.riepilogo_bar_value {
    font-size: 9px;
    fill: #374151;
    font-family: inherit;
    font-weight: 600;
}

/* Top servizi */
.riepilogo_servizi_list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.riepilogo_servizio_row {
    display: grid;
    grid-template-columns: 28px 1fr 90px;
    align-items: center;
    gap: 10px;
}

.riepilogo_servizio_rank {
    font-size: 0.78rem;
    font-weight: 800;
    color: #9ca3af;
    text-align: center;
}

.riepilogo_servizio_info {
    min-width: 0;
}

.riepilogo_servizio_nome {
    font-size: 0.82rem;
    font-weight: 600;
    color: #374151;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-bottom: 4px;
}

.riepilogo_servizio_bar {
    height: 6px;
    background: #e5e7eb;
    border-radius: 3px;
    overflow: hidden;
}

.riepilogo_servizio_fill {
    height: 100%;
    background: #6366f1;
    border-radius: 3px;
}

.riepilogo_servizio_numeri {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 1px;
}

.riepilogo_srv_pt {
    font-size: 0.8rem;
    font-weight: 700;
    color: #111827;
}

.riepilogo_srv_pz {
    font-size: 0.7rem;
    color: #9ca3af;
}

/* Classifica config: lista compatta nome + posizione */
.riepilogo_cl_items {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.riepilogo_cl_item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 10px;
    border-radius: 8px;
    background: #f9fafb;
    border: 1px solid #f3f4f6;
    gap: 10px;
}

.riepilogo_cl_item_name {
    font-size: 0.8rem;
    font-weight: 600;
    color: #374151;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    display: flex;
    align-items: center;
    gap: 6px;
}
.riepilogo_cl_media_header {
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--color-primary, #1d6fe8);
    background: #eff6ff;
    border-radius: 6px;
    padding: 2px 8px;
    margin-left: 8px;
}
.riepilogo_cl_media {
    font-size: 0.7rem;
    font-weight: 500;
    color: #9ca3af;
    background: transparent;
    border-radius: 4px;
    padding: 0;
    white-space: nowrap;
    flex-shrink: 0;
    font-variant-numeric: tabular-nums;
}

/* Badge posizione: stile minimal. Numero in evidenza, totale defilato,
   icona piccola e discreta; niente grassetto estremo ne' colori pieni. */
.riepilogo_cl_item_pos {
    font-size: 0.8rem;
    font-weight: 600;
    color: #6b7280;
    display: inline-flex;
    align-items: baseline;
    gap: 4px;
    white-space: nowrap;
    flex-shrink: 0;
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.01em;
}

/* Il "/ totale" e' contesto: piu' piccolo e piu' chiaro del numero. */
.riepilogo_cl_item_pos .cl_pos_tot {
    font-size: 0.72rem;
    font-weight: 500;
    color: #9ca3af;
}

.riepilogo_cl_item_pos i {
    font-size: 0.7rem;
    color: #d1d5db;
    align-self: center;
}

/* Podio: solo il colore del testo cambia, nessun riempimento. */
.riepilogo_cl_item_pos.gold   { color: #b45309; }
.riepilogo_cl_item_pos.gold i { color: #f59e0b; }
.riepilogo_cl_item_pos.silver   { color: #6b7280; }
.riepilogo_cl_item_pos.silver i { color: #9ca3af; }
.riepilogo_cl_item_pos.bronze   { color: #a16207; }
.riepilogo_cl_item_pos.bronze i { color: #ca8a04; }

/* Card macro nel riepilogo (riusa stili gare personali) */
.riepilogo_macro_cards {
    display: flex;
    flex-direction: column;
    gap: 2px;
    max-height: calc(100vh - 280px);
    overflow-y: auto;
    overflow-x: hidden;
}

/* Header macro inline: nome + valore sulla stessa riga */
.riepilogo_macro_header_row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 4px;
    flex-wrap: wrap;
}

.riepilogo_macro_nome {
    font-size: 12px;
    font-weight: 700;
    color: #374151;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    white-space: nowrap;
}

.riepilogo_macro_valore {
    font-size: 12px;
    font-weight: 600;
    color: #1f2937;
    text-align: right;
    min-width: 0;
}

/* ---- Produzione per Azienda ---- */
.riepilogo_az_cards {
    display: flex;
    flex-direction: column;
    gap: 10px;
    overflow-y: auto;
    overflow-x: hidden;
}

.riepilogo_az_card {
    padding: 0;
    overflow: hidden;
}

.riepilogo_az_header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 12px;
    background: #f3f4f6;
    border-bottom: 1px solid #e5e7eb;
}

.riepilogo_az_nome {
    font-size: 13px;
    font-weight: 700;
    color: #1f2937;
    text-transform: uppercase;
    letter-spacing: 0.4px;
}

.riepilogo_az_totals {
    font-size: 12px;
    font-weight: 600;
    color: #6b7280;
    white-space: nowrap;
}

/* Lista piste per azienda: scrollabile ma senza barra visibile. */
.riepilogo_az_piste_list {
    padding: 4px 0;
    max-height: 320px;
    overflow-y: auto;
    scrollbar-width: none;        /* Firefox */
    -ms-overflow-style: none;     /* IE/Edge */
}

.riepilogo_az_piste_list::-webkit-scrollbar {
    display: none;                /* Chrome/Safari */
}

.riepilogo_az_pista_row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 6px 12px;
    border-bottom: 1px solid #f3f4f6;
    gap: 8px;
}

.riepilogo_az_pista_row:last-of-type {
    border-bottom: none;
}

.riepilogo_az_cb_label {
    display: flex;
    align-items: center;
    gap: 7px;
    cursor: pointer;
    flex: 1;
    min-width: 0;
}

.riepilogo_az_cb_label input[type="checkbox"] {
    accent-color: #6d28d9;
    width: 14px;
    height: 14px;
    flex-shrink: 0;
    cursor: pointer;
}

.riepilogo_az_pista_nome {
    font-size: 12px;
    font-weight: 500;
    color: #374151;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.riepilogo_az_pista_vals {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
}

.riepilogo_az_pz {
    font-size: 13px;
    font-weight: 700;
    color: #374151;
}

.riepilogo_az_pt {
    font-size: 13px;
    font-weight: 700;
    color: #6d28d9;
    min-width: 64px;
    text-align: right;
}

.riepilogo_az_pz small,
.riepilogo_az_pt small {
    font-size: 10px;
    font-weight: 400;
    color: #9ca3af;
}

.riepilogo_pista_chart_wrap {
    padding: 4px 12px 8px;
    background: #fafafa;
    border-bottom: 1px solid #e5e7eb;
}

.riepilogo_pista_chart_wrap .riepilogo_macro_chart_svg {
    width: 100%;
    height: auto;
}

/* Top Servizi */
.riepilogo_ts_list {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.riepilogo_ts_row {
    display: grid;
    grid-template-columns: 1fr 2fr auto;
    align-items: center;
    gap: 8px;
}

.riepilogo_ts_name {
    font-size: 0.78rem;
    font-weight: 600;
    color: #374151;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.riepilogo_ts_bar_wrap {
    height: 6px;
    background: #f3f4f6;
    border-radius: 3px;
    overflow: hidden;
}

.riepilogo_ts_bar {
    height: 100%;
    background: var(--color-primary, #e60000);
    border-radius: 3px;
    transition: width 0.3s ease;
}

.riepilogo_ts_vals {
    font-size: 0.72rem;
    color: #6b7280;
    white-space: nowrap;
}

/* La card vendite occupa tutta l'altezza disponibile e scrolla internamente */
.riepilogo_vnd_card {
    display: flex;
    flex-direction: column;
    flex: 1;
    overflow: hidden;
    min-height: 0;
}

/* Widget lista vendite */
.riepilogo_vnd_card .riepilogo_section_title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 4px;
}

.riepilogo_vnd_totale {
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--color-primary, #e60000);
    margin-left: auto;
}

.riepilogo_vnd_list {
    display: flex;
    flex-direction: column;
    gap: 4px;
    overflow-x: hidden;
    overflow-y: auto;
    flex: 1;
    min-height: 0;
}

.riepilogo_vnd_empty {
    font-size: 0.8rem;
    color: #9ca3af;
    padding: 12px 0;
    text-align: center;
}

/* KPI tipologie */
.riepilogo_vnd_tip_row,
.riepilogo_vnd_filter_row {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 8px;
}

/* Filter badge: stessa grafica dei tip ma cliccabili */
.riepilogo_vnd_filter_badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 0.72rem;
    font-weight: 600;
    padding: 3px 8px;
    border-radius: 20px;
    white-space: nowrap;
    cursor: pointer;
    user-select: none;
    transition: opacity 0.15s, transform 0.1s;
}

.riepilogo_vnd_filter_badge:not(.active) {
    opacity: 0.35;
    text-decoration: line-through;
}

.riepilogo_vnd_filter_badge:hover {
    transform: scale(1.05);
}

.riepilogo_vnd_tip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 0.72rem;
    font-weight: 600;
    padding: 3px 8px;
    border-radius: 20px;
    white-space: nowrap;
}

.tip_dispositivo { background: #dbeafe; color: #1d4ed8; }
.tip_accessorio  { background: #d1fae5; color: #065f46; }
.tip_altro       { background: #f3f4f6; color: #374151; }

/* Documento raggruppato */
.riepilogo_vnd_doc {
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    overflow: hidden;
    background: #fff;
    width: 100%;
    box-sizing: border-box;
}

.riepilogo_vnd_row {
    width: 100%;
    box-sizing: border-box;
}

.riepilogo_vnd_row {
    display: grid;
    grid-template-columns: 76px 1fr auto auto;
    align-items: center;
    gap: 6px;
    padding: 6px 8px;
    cursor: pointer;
    background: #f9fafb;
}

.riepilogo_vnd_row:hover {
    background: #f3f4f6;
}

.riepilogo_vnd_data {
    font-size: 0.7rem;
    color: #6b7280;
    white-space: nowrap;
}

.riepilogo_vnd_desc {
    font-size: 0.78rem;
    color: #374151;
    font-weight: 500;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    display: flex;
    align-items: center;
    gap: 4px;
}

.riepilogo_vnd_badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #e0e7ff;
    color: #3730a3;
    font-size: 0.65rem;
    font-weight: 700;
    border-radius: 10px;
    padding: 1px 6px;
    flex-shrink: 0;
}

.riepilogo_vnd_tot {
    font-size: 0.75rem;
    font-weight: 600;
    color: #111827;
    white-space: nowrap;
}

.riepilogo_vnd_chevron {
    width: 16px;
    color: #9ca3af;
    font-size: 0.7rem;
    text-align: center;
    flex-shrink: 0;
    transition: transform 0.2s;
}

.riepilogo_vnd_chevron i {
    transition: transform 0.2s;
}

/* Righe figlie */
.riepilogo_vnd_figlie {
    border-top: 1px solid #e5e7eb;
    background: #fff;
    display: flex;
    flex-direction: column;
    max-height: 240px;
    overflow-y: auto;
    overflow-x: hidden;
}

.riepilogo_vnd_figlia {
    display: grid;
    grid-template-columns: 20px 1fr auto;
    align-items: center;
    gap: 6px;
    padding: 5px 12px 5px 24px;
    font-size: 0.76rem;
    cursor: pointer;
    border-bottom: 1px solid #f3f4f6;
    color: #374151;
}

.riepilogo_vnd_figlia:last-child { border-bottom: none; }
.riepilogo_vnd_figlia:hover { background: #f9fafb; }

.riepilogo_vnd_figlia_tip {
    color: #9ca3af;
    font-size: 0.7rem;
    text-align: center;
}

.riepilogo_vnd_figlia_desc {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.riepilogo_vnd_prezzo {
    font-size: 0.72rem;
    font-weight: 600;
    color: #374151;
    white-space: nowrap;
}

.riepilogo_vnd_qta {
    font-size: 0.72rem;
    color: #9ca3af;
    font-weight: 400;
}

/* Popup dettaglio vendita */
.riepilogo_popup_overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.45);
    z-index: 9000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
}

.riepilogo_popup_box {
    background: #fff;
    border-radius: 14px;
    box-shadow: 0 8px 40px rgba(0,0,0,0.22);
    width: 100%;
    max-width: 440px;
    max-height: 80vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.riepilogo_popup_header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 18px;
    background: linear-gradient(135deg, #0f172a 0%, #1e3a5f 100%);
    color: #fff;
    font-weight: 700;
    font-size: 0.9rem;
    gap: 10px;
    flex-shrink: 0;
}

.riepilogo_popup_close {
    background: rgba(255,255,255,0.15);
    border: none;
    color: #fff;
    border-radius: 50%;
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 14px;
    flex-shrink: 0;
}

.riepilogo_popup_close:hover {
    background: rgba(255,255,255,0.3);
}

.riepilogo_popup_body {
    overflow-y: auto;
    padding: 12px 18px;
    display: flex;
    flex-direction: column;
    gap: 0;
}

.riepilogo_popup_row {
    display: grid;
    grid-template-columns: 130px 1fr;
    gap: 8px;
    padding: 7px 0;
    border-bottom: 1px solid #f3f4f6;
    align-items: start;
}

.riepilogo_popup_row:last-child {
    border-bottom: none;
}

.riepilogo_popup_label {
    font-size: 0.72rem;
    font-weight: 600;
    color: #6b7280;
    text-transform: uppercase;
    letter-spacing: 0.4px;
}

.riepilogo_popup_val {
    font-size: 0.82rem;
    color: #111827;
    word-break: break-word;
}

/* Classifica row */
.riepilogo_cl_row {
    display: grid;
    grid-template-columns: 28px 1fr 80px;
    align-items: center;
    gap: 8px;
    padding: 6px 8px;
    border-radius: 8px;
    transition: background 0.12s;
}

.riepilogo_cl_row:hover {
    background: #f9fafb;
}

.riepilogo_cl_row.self {
    background: #ecfdf5;
    border: 1px solid #a7f3d0;
}

.riepilogo_cl_pos {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: #f3f4f6;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.72rem;
    font-weight: 800;
    color: #6b7280;
    flex-shrink: 0;
}

.riepilogo_cl_pos.gold { background: #fef3c7; color: #d97706; }
.riepilogo_cl_pos.silver { background: #f3f4f6; color: #4b5563; }
.riepilogo_cl_pos.bronze { background: #fef3c7; color: #b45309; }

.riepilogo_cl_info {
    min-width: 0;
}

.riepilogo_cl_name {
    font-size: 0.8rem;
    font-weight: 600;
    color: #374151;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-bottom: 3px;
}

.riepilogo_cl_row.self .riepilogo_cl_name {
    color: #065f46;
    font-weight: 800;
}

.riepilogo_cl_bar_wrap {
    height: 4px;
    background: #e5e7eb;
    border-radius: 2px;
    overflow: hidden;
}

.riepilogo_cl_bar_fill {
    height: 100%;
    background: #d1d5db;
    border-radius: 2px;
    transition: width 0.5s ease;
}

.riepilogo_cl_bar_fill.self {
    background: #10b981;
}

.riepilogo_cl_score {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 1px;
}

.riepilogo_cl_pt {
    font-size: 0.8rem;
    font-weight: 700;
    color: #111827;
}

.riepilogo_cl_pz {
    font-size: 0.68rem;
    color: #9ca3af;
}

/* Mobile adjustments */
@media (max-width: 768px) {
    .riepilogo_dashboard {
        padding: 10px;
        padding-top: 60px;
        padding-bottom: calc(80px + env(safe-area-inset-bottom, 0px));
        gap: 12px;
        /* Su mobile le colonne sono impilate: scroll di pagina, non per-card */
        height: auto;
        overflow: visible;
    }

    .riepilogo_columns_3 {
        grid-template-columns: 1fr;
        flex: 0 0 auto;
        min-height: 0;
    }

    /* Annulla i vincoli di altezza per-card su mobile */
    .riepilogo_col > .riepilogo_section_card {
        max-height: none;
        overflow: visible;
    }
    .riepilogo_col > .riepilogo_section_card > .riepilogo_cl_items,
    .riepilogo_col > .riepilogo_section_card > .riepilogo_macro_cards,
    .riepilogo_col > .riepilogo_az_cards {
        overflow: visible;
    }

    .riepilogo_kpi_row {
        gap: 8px;
    }

    .riepilogo_kpi_card {
        padding: 12px 8px;
    }

    .riepilogo_kpi_value {
        font-size: 1.25rem;
    }

    .riepilogo_obiettivo_row {
        grid-template-columns: 90px 1fr 110px;
        gap: 7px;
    }

    .riepilogo_obiettivo_numeri {
        flex-direction: column;
        align-items: flex-end;
        gap: 1px;
    }

    .riepilogo_servizio_row {
        grid-template-columns: 22px 1fr 80px;
    }

    .riepilogo_cl_tab {
        padding: 4px 10px;
        font-size: 0.7rem;
    }
}

/* ========================================= */
/* === GARE PERSONALI ADDETTI === */
/* ========================================= */

.gare_personali_container {
    display: flex;
    flex-direction: column;
    gap: 15px;
    width: 100%;
}

/* Pulsante mostra/nascondi dettaglio dentro la card operatore/store */
.card_espandi_btn {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    height: 32px;
    padding: 0 14px;
    font-size: 0.8rem;
    font-weight: 600;
    white-space: nowrap;
    color: var(--color-primary);
    background: rgba(11, 102, 221, 0.08);
    border: 1px solid rgba(11, 102, 221, 0.25);
    border-radius: var(--radius-full, 999px);
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s, color 0.15s;
}

.card_espandi_btn:hover {
    background: rgba(11, 102, 221, 0.16);
    border-color: var(--color-primary);
}

.card_espandi_btn.attivo {
    background: var(--color-primary);
    border-color: var(--color-primary);
    color: #fff;
}

.card_espandi_btn i {
    font-size: 0.9em;
}

.gare_personali_header {
    display: flex;
    flex-wrap: nowrap;
    /* tutti i blocchi su una sola riga */
    align-items: center;
    gap: 12px;
    font-size: 22px;
    font-weight: 700;
    color: #1f2937;
    padding: 10px 0;
    border-bottom: 3px solid #10b981;
    margin-bottom: 10px;
    white-space: nowrap;
    /* evita il ritorno a capo del testo */
    overflow-x: auto;
    /* se lo spazio non basta, scroll orizzontale */
}

.gare_personali_header i {
    color: #f59e0b;
    font-size: 26px;
}

.operatore_card {
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
    overflow: hidden;
    border: 1px solid var(--color-border-light);
    transition: box-shadow 0.2s ease, transform 0.2s ease, border-color 0.2s ease;
    cursor: pointer;
}

.operatore_card:hover {
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.12);
}

.operatore_card.operatore_card_expanded {
    border-color: #0ea5e9;
}

/*.operatore_card.gold {
    border-left: 5px solid #10b981;
}

.operatore_card.silver {
    border-left: 5px solid #6b7280;
}

.operatore_card.bronze {
    border-left: 5px solid #f59e0b;
}   */

.operatore_card_content {
    /* Layout a due righe: riga 1 nome, riga 2 blocchi macro, riga 3 eventuale dettaglio wide */
    display: grid;
    grid-template-columns: 1fr;
    row-gap: 8px;
    padding: 15px 20px;
}


.macro_categoria {
    background: white;
    border: 1px solid var(--color-border-light);
    border-radius: var(--radius-md);
    padding: 12px 16px;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

.macro_categoria:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.macro_categoria.macro_expanded {
    border-color: var(--color-primary);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}

.riepilogo_macro_clickable {
    cursor: pointer;
    transition: border-color 0.15s, box-shadow 0.15s;
}

.riepilogo_macro_clickable.macro_selected {
    border-color: var(--color-primary);
    box-shadow: 0 0 0 2px rgba(230, 0, 0, 0.15);
}

.riepilogo_macro_inline_chart {
    margin-top: 6px;
    overflow-x: auto;
}

.riepilogo_macro_chart_svg {
    width: 100%;
    height: auto;
    display: block;
}

/* Rimosso simbolo freccia ::after */

.macro_categoria_dettaglio {
    margin-top: 15px;
    border-top: 1px solid #f1f5f9;
    padding-top: 15px;
    animation: accordionSlideDown 0.3s ease-out;
}

@keyframes accordionSlideDown {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.operatore_info {
    display: flex;
    align-items: center;
    gap: 15px;
    flex-shrink: 0;
    grid-column: 1 / -1;
    /* nome operatore su tutta la riga */
}

.operatore_posizione {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 16px;
    color: #fff;
    background: #6b7280;
}

.operatore_posizione.gold {
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
}

.operatore_posizione.silver {
    background: linear-gradient(135deg, #6b7280 0%, #4b5563 100%);
}

.operatore_posizione.bronze {
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
}

/* Report Stores: icona negozio al posto del numero posizione (stesso ingombro) */
.operatore_store_icon {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    color: var(--color-primary, #0ea5e9);
    background: #f0f9ff;
    flex-shrink: 0;
}

.operatore_nome_wrap {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
    flex: 1;
}

.operatore_nome {
    font-size: 18px;
    font-weight: 700;
    color: #1f2937;
    text-transform: capitalize;
    min-width: 0;
    max-width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: flex;
    align-items: center;
    /* centra verticalmente rispetto al cerchio */
}

.operatore_categorie {
    display: grid;
    /* 7 colonne: MOBILE, FISSO, ASSICURAZIONI, CB, ENERGY, P.IVA, TELEFONI VENDUTI - tutte su una riga */
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 14px;
    grid-column: 1 / -1;
    /* blocchi macro occupano la riga sotto il nome */
}

.macro_categoria {
    min-width: 0;
}

.macro_header {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    margin-bottom: 4px;
}

.macro_valore_container {
    width: 100%;
    display: flex;
    justify-content: flex-start;
}

.macro_nome {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    font-weight: 700;
    color: #374151;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.macro_nome_icon_wrapper {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.macro_nome_icon_wrapper .macro_nome_icon {
    font-size: 1em;
    /* grande quanto il testo */
}

.macro_valore {
    font-size: 15px;
    font-weight: 700;
    color: #1f2937;
}

.macro_target_label {
    display: block;
    font-size: 11px;
    color: #6b7280;
    margin-top: 2px;
}

.macro_progress_bar {
    height: 6px;
    background: var(--color-border-light);
    border-radius: 3px;
    overflow: hidden;
    margin-bottom: 6px;
}

.macro_progress_fill {
    height: 100%;
    background: linear-gradient(90deg, #10b981 0%, #34d399 100%);
    border-radius: 3px;
    transition: width 0.5s ease;
}

.macro_progress_fill.ok {
    background: linear-gradient(90deg, #10b981 0%, #34d399 100%);
}

.macro_progress_fill.warn {
    background: linear-gradient(90deg, #f59e0b 0%, #fbbf24 100%);
}

.macro_progress_fill.ko {
    background: linear-gradient(90deg, #dc2626 0%, #f87171 100%);
}

.macro_proiezione {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 5px;
    gap: 10px;
    width: 100%;
}

.proiezione_testo {
    color: #6b7280;
    font-size: 10px;
}

.macro_perc {
    font-size: 13px;
    font-weight: 800;
    color: var(--color-primary);
    white-space: nowrap;
    text-align: right;
}

/* Seconda barra: avanzamento REALE ad oggi (prodotto / target), da non
   confondere con la prima che e' basata sulla proiezione a fine mese.
   Colore blu neutro e barra piu' sottile per distinguerla a colpo d'occhio. */
.macro_progress_bar_reale {
    height: 4px;
    margin-top: 2px;
    margin-bottom: 0;
}

.macro_progress_fill_reale {
    background: linear-gradient(90deg, #2563eb 0%, #60a5fa 100%);
}

.macro_perc_reale {
    font-size: 11px;
    font-weight: 700;
    color: #2563eb;
}



/* Dettaglio piste per operatore (sotto la card) */
.operatore_dettaglio {
    margin: 0 0 12px;
    padding: 8px 0px 0;
    border-top: 1px dashed #e5e7eb;
    display: none;
    /* Inizio nascosto */
    /* stesse 5 colonne delle macro sopra */
    grid-template-columns: repeat(5, minmax(0, 1fr));
}

.operatore_dettaglio_inner {
    /* Il dettaglio occupa tutta la larghezza sotto le macro */
    grid-column: 1 / -1;
    display: grid;
    /* 2 righe da 4 colonne (max 8 blocchi: 4 sopra, 4 sotto) */
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px 14px;
}

.operatore_dettaglio_macro {
    background: #f9fafb;
    border-radius: 10px;
    border: 1px solid #e5e7eb;
    padding: 8px 10px 10px;
    width: 100%;
}

.operatore_dettaglio_macro_header {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
    align-items: center;
    column-gap: 6px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    color: #047857;
    margin-bottom: 4px;
}

.operatore_dettaglio_macro_header .macro_nome {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.operatore_dettaglio_macro_header .macro_pz,
.operatore_dettaglio_macro_header .macro_pt {
    font-size: 10px;
    font-weight: 700;
    color: #6b7280;
    text-align: left;
    min-width: 32px;
}

.operatore_dettaglio_lista {
    list-style: none;
    margin: 0;
    padding: 0;
    max-height: 320px;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: #cbd5e1 transparent;
}

.operatore_dettaglio_lista::-webkit-scrollbar {
    width: 4px;
}

.operatore_dettaglio_lista::-webkit-scrollbar-thumb {
    background: #cbd5e1;
    border-radius: 4px;
}

.operatore_dettaglio_lista::-webkit-scrollbar-track {
    background: transparent;
}

.operatore_dettaglio_riga {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
    align-items: center;
    padding: 4px 0px;
    font-size: 11px;
    border-radius: 6px;
    column-gap: 6px;
}

.operatore_dettaglio_riga .pista_nome {
    font-weight: 600;
    color: #111827;
    margin-right: 8px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.operatore_dettaglio_riga .pista_pz,
.operatore_dettaglio_riga .pista_pt {
    font-variant-numeric: tabular-nums;
    color: #4b5563;
    font-weight: 700;
    text-align: left;
    min-width: 32px;
}


.operatore_dettaglio_piste {
    list-style: none;
    margin: 0 0 4px 0;
    padding: 0;
}

.operatore_dettaglio_riga.pista {
    background: #f9fafb;
}

/* Evidenzia maggiormente il gruppo rispetto alle piste con un blu deciso */
.operatore_dettaglio_riga:not(.pista),
.operatore_dettaglio_riga.gruppo {
    background: #dbeafe;
    /* blu molto chiaro per il gruppo */
    color: #1e3a8a;
    /* testo blu più scuro */
    font-weight: 700;
}

.operatore_dettaglio_riga:not(.pista) .pista_nome,
.operatore_dettaglio_riga.gruppo .pista_nome {
    color: #1e3a8a;
    font-weight: 700;
}

/* Piste in corsivo (nome + PZ + PT) */
.operatore_dettaglio_riga.pista {
    font-style: italic;
}

.operatore_dettaglio_riga.pista .pista_nome,
.operatore_dettaglio_riga.pista .pista_pz,
.operatore_dettaglio_riga.pista .pista_pt {
    font-style: italic;
    color: #111827;
}

/* Pista espandibile con servizi (Report Stores) */
.operatore_dettaglio_pista_con_servizi {
    list-style: none;
    margin: 0;
    padding: 0;
}

.operatore_dettaglio_riga.pista_espandibile {
    cursor: pointer;
    user-select: none;
}

.operatore_dettaglio_riga.pista_espandibile:hover {
    background: #f3f4f6 !important;
}

.operatore_dettaglio_riga.pista_espandibile {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto auto;
}

.operatore_dettaglio_servizi {
    list-style: none;
    margin: 0;
    padding: 0;
}

.operatore_dettaglio_riga.servizio {
    background: #f9fafb;
    font-style: italic;
}

.operatore_dettaglio_riga.servizio .pista_nome {
    font-style: italic;
    color: #111827;
    font-weight: normal;
}

.operatore_dettaglio_riga.servizio .pista_nome::before {
    content: '';
    display: inline-block;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #111827;
    margin-right: 6px;
    flex-shrink: 0;
    vertical-align: middle;
    position: relative;
    top: -1px;
}

.operatore_dettaglio_completo_btn {
    margin-left: auto;
    flex-shrink: 0;
    width: 34px;
    height: 34px;
    border-radius: 8px;
    border: 1px solid var(--color-border-light);
    background: #fff;
    color: var(--color-text-muted);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    transition: background 0.15s, color 0.15s;
}

.operatore_dettaglio_completo_btn:hover {
    background: var(--color-primary, #2563eb);
    color: #fff;
    border-color: var(--color-primary, #2563eb);
}

.operatore_dettaglio_riga.riga_cliccabile {
    cursor: pointer;
}

.operatore_dettaglio_riga.riga_cliccabile:hover {
    background: #eef2ff;
}

/* ========================================= */
/* === TARGET OPERATORI (UI Config) ======= */
/* ========================================= */

.target_op_container {
    display: grid;
    grid-template-columns: 260px minmax(0, 1fr);
    gap: 20px;
    width: 100%;
    margin-top: 20px;
}

.target_op_sidebar {
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
    padding: 15px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border: 1px solid var(--color-border-light);
}

.target_op_sidebar_title {
    font-weight: 700;
    text-transform: uppercase;
    color: var(--color-text-muted);
    font-size: 0.75rem;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--color-border-light);
    margin-bottom: 10px;
}

.target_op_sidebar_list {
    max-height: 520px;
    overflow-y: auto;
}

.target_op_sidebar_item {
    padding: 10px;
    border-bottom: 1px solid var(--color-border-light);
    cursor: pointer;
    transition: all 0.2s;
    font-size: 0.9rem;
    color: #111827;
    display: flex;
    align-items: center;
}

.target_op_sidebar_item:hover {
    background: #e5f9f4;
}

.target_op_sidebar_item.active {
    background: var(--color-primary);
    color: white;
    font-weight: 600;
}

.target_op_sidebar_name {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.target_op_editor {
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
    border: 1px solid var(--color-border-light);
    padding: 15px;
    display: flex;
    flex-direction: column;
    gap: 14px;
    /* Lascia gestire l'altezza al contenuto per evitare scroll eccessivo */
}

.target_op_editor_placeholder {
    font-size: 14px;
    color: #6b7280;
}

.target_op_header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 12px;
    border-bottom: 1px solid #e5e7eb;
    padding-bottom: 8px;
}

.target_op_header_title {
    font-size: 18px;
    font-weight: 700;
    color: #1f2937;
}

.target_op_header_sub {
    font-size: 11px;
    color: #4b5563;
    margin-bottom: 2px;
}

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

.target_op_header_actions .btn_small,
.target_op_header_actions .btn_secondary.btn_small,
#target_op_save {
    padding: 6px 16px;
    font-size: 13px;
    border: none;
    border-radius: 8px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    background-color: #2563eb !important;
    color: #fff !important;
}

.target_op_header_actions .btn_small:hover,
.target_op_header_actions .btn_secondary.btn_small:hover,
#target_op_save:hover {
    background-color: #1d4ed8 !important;
    color: #fff !important;
}

/* Bottone giallo per sincronizza su tutti */
#target_op_sync_all {
    background-color: #fbbf24 !important;
    /* giallo */
    color: #1f2937 !important;
}

#target_op_sync_all:hover {
    background-color: #f59e0b !important;
    color: #111827 !important;
}

.target_op_macro_grid {
    display: grid;
    /* Righe da massimo 4 blocchi: 4 colonne fisse */
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
}

.target_op_macro_box {
    background: #f9fafb;
    border-radius: 10px;
    border: 1px solid #e5e7eb;
    padding: 8px 10px 10px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-width: 0;
    /* altezza moderata per evitare overflow verticale */
    min-height: 180px;
}

.target_op_macro_header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 8px;
}

.target_op_macro_name {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    color: #047857;
}

.target_op_macro_inputs {
    display: flex;
    gap: 10px;
    align-items: center;
    /* centra verticalmente switch e valori */
}

.target_op_macro_inputs label {
    display: flex;
    flex-direction: column;
    font-size: 10px;
    font-weight: 600;
    color: #6b7280;
}

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

.target_op_macro_value_block {
    display: flex;
    align-items: baseline;
    gap: 4px;
    font-size: 11px;
    color: #374151;
}

.target_op_macro_values label {
    display: flex;
    flex-direction: column;
}

.target_op_mode_wrapper {
    display: flex;
    align-items: center;
    gap: 6px;
}

.target_op_mode_label {
    font-size: 10px;
    font-weight: 600;
    color: #6b7280;
    margin-bottom: 2px;
}

.target_op_mode_switch {
    display: inline-flex;
    border-radius: 9999px;
    background: #e5f3ff;
    padding: 2px;
}

.target_op_mode_btn {
    border: none;
    background: transparent;
    font-size: 10px;
    padding: 2px 8px;
    border-radius: 9999px;
    cursor: pointer;
    color: #4b5563;
}

.target_op_mode_btn.active {
    background: #0ea5e9;
    color: #fff;
}

.target_op_input {
    margin-top: 2px;
    padding: 4px 6px;
    font-size: 11px;
    border-radius: 6px;
    border: 1px solid #e5e7eb;
    width: 70px;
    text-align: right;
}

.target_op_macro_info {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 10px;
    color: #6b7280;
    gap: 6px;
}

.target_op_macro_sum {
    font-style: italic;
}

.target_op_macro_info_error {
    color: #b91c1c;
    font-size: 10px;
}

.target_op_micro_list {
    margin-top: 4px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    max-height: 220px;
    overflow-y: auto;
}

.target_op_micro_group {
    border-radius: 8px;
    background: #f3f4f6;
    padding: 4px 6px 6px;
}

.target_op_micro_hint {
    font-size: 10px;
    color: #6b7280;
    margin-top: 2px;
    margin-bottom: 2px;
}

.target_op_micro_group_header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
    margin-bottom: 3px;
}

.target_op_micro_group_name {
    font-size: 11px;
    font-weight: 600;
    color: #111827;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.target_op_group_pt {
    width: 80px;
    text-align: right;
}

.target_op_micro_row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    padding: 2px 0;
}

.target_op_micro_name {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.target_op_micro_inputs {
    display: flex;
    gap: 4px;
}

.target_op_micro_pz,
.target_op_micro_pt {
    width: 64px;
    text-align: right;
}

.target_op_group_inputs {
    display: flex;
    gap: 4px;
}

.target_op_input.disabled {
    background: #e5e7eb;
    color: #9ca3af;
}

.target_op_macro_value_label {
    font-weight: 700;
    text-transform: uppercase;
}

.target_op_macro_pz_value,
.target_op_macro_pt_value {
    font-weight: 700;
}

.target_op_macro_sum {
    font-size: 11px;
    color: #6b7280;
}

.target_op_sum_value {
    font-weight: 700;
}

/* Rimuovi freccette dagli input numerici dei target (come per Bottone) */
.target_op_input {
    -moz-appearance: textfield;
    appearance: textfield;
}

.target_op_input::-webkit-outer-spin-button,
.target_op_input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}


/* ========================================= */
/* === MODAL DETTAGLIO PISTA === */
/* ========================================= */

.report_pista_clickable {
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.report_pista_clickable:hover {
    background-color: #d1fae5 !important;
}

/* Attivazioni: raggruppamento per NUMERODOC */
.att_doc_group {
    display: flex;
    flex-direction: column;
    width: 100%;
}

.att_doc_header {
    cursor: pointer;
    width: 100%;
    box-sizing: border-box;
}

/* Colonne vendite: header e body allineate */
.vnd_col_data        { flex: 0 0 100px; }
.vnd_col_magazzino   { flex: 1.2; min-width: 80px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vnd_col_operatore   { flex: 1.2; min-width: 80px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vnd_col_cliente     { flex: 1.3; min-width: 80px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vnd_col_descrizione { flex: 2; min-width: 80px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vnd_col_totale      { flex: 0 0 120px; text-align: right; justify-content: flex-end; font-weight: 700; }
.vnd_col_idcentro    { flex: 0 0 80px; }

/* Colonne attivazioni: header e body allineate */
.att_col_data    { flex: 0 0 90px; }
.att_col_operatore { flex: 1.2; min-width: 0; }
.att_col_cliente { flex: 1.5; min-width: 0; }
.att_col_servizio { flex: 1.5; min-width: 0; }
.att_col_valenza { flex: 0 0 80px; }
.att_col_store   { flex: 1; min-width: 0; }
.att_col_stato   { flex: 1; min-width: 0; }

.att_store_wrap { display: inline-flex; align-items: center; gap: 5px; }
.att_store_redirect_icon { cursor: pointer; color: #6366f1; font-size: 11px; padding: 1px 4px; border-radius: 4px; background: #eef2ff; transition: background .15s; position: relative; }
.att_store_redirect_icon:hover { background: #c7d2fe; }

.att_store_popover {
    position: fixed; z-index: 9999; background: #fff; border: 1px solid #e2e8f0;
    border-radius: 8px; box-shadow: 0 4px 16px rgba(0,0,0,.12); padding: 10px 14px;
    min-width: 220px; white-space: nowrap;
}
.att_store_popover_row { display: flex; justify-content: space-between; gap: 16px; padding: 3px 0; font-size: 12px; }
.att_store_popover_label { color: #64748b; font-weight: 600; text-transform: uppercase; font-size: 10px; }
.att_store_popover_val { color: #1e293b; font-weight: 500; }

/* Allineamento a sinistra + padding per tutte le celle delle attivazioni */
.compact_header_row .th,
.body_row.attivazioni_card .td,
.att_figlia_row .td {
    justify-content: flex-start;
    text-align: left;
    padding-left: 5px;
    padding-right: 5px;
}

/* Badge stato attivazioni */
.att_stato_badge {
    display: inline-block;
    padding: 2px 7px;
    border-radius: 6px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.3px;
    white-space: nowrap;
    border: 1px solid transparent;
}
.att_stato_badge.stato_yellow {
    background: #fefce8;
    color: #92400e;
    border-color: #fde68a;
}
.att_stato_badge.stato_green {
    background: #ecfdf3;
    color: #16a34a;
    border-color: #bbf7d0;
}
.att_stato_badge.stato_red {
    background: #fff1f2;
    color: #be123c;
    border-color: #fecdd3;
}
.att_stato_badge.stato_gray {
    background: #f3f4f6;
    color: #6b7280;
    border-color: #e5e7eb;
}

.att_doc_header.att_has_more {
    border-left: 9px solid var(--color-primary, #e60000);
}

/* Vendite: bordo viola per documenti ART 36 */
.vnd_art36 > .att_doc_header {
    border-left: 9px solid #7c3aed;
}
.vnd_art36 .att_figlia_row {
    border-left: 9px solid #7c3aed;
}

.att_doc_header:hover {
    background: var(--color-hover, #f5f5f5);
}

.att_gruppo_badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #e0e7ff;
    color: #3730a3;
    font-size: 0.65rem;
    font-weight: 700;
    border-radius: 10px;
    padding: 1px 6px;
    margin-left: 4px;
    vertical-align: middle;
}

.att_chevron {
    margin-left: 6px;
    font-size: 0.7rem;
    color: #9ca3af;
    transition: transform 0.2s;
    vertical-align: middle;
}

.att_doc_figlie {
    display: flex;
    flex-direction: column;
    border-left: 3px solid #e5e7eb;
    margin-left: 2px;
}

.att_figlia_row {
    cursor: pointer;
    background: #fafafa;
    opacity: 0.92;
    height: 36px;
    min-height: 36px;
    max-height: 36px;
    font-size: 12px;
    padding: 0 8px;
}

.att_figlia_row:hover {
    background: #f3f4f6;
    opacity: 1;
}

.modal_dettaglio_pista {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    z-index: 9999;
    justify-content: center;
    align-items: center;
    backdrop-filter: blur(3px);
}

.modal_dettaglio_pista.active {
    display: flex;
}

.modal_dettaglio_content {
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.3);
    max-width: 98%;
    max-height: 90vh;
    width: 1600px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    animation: modalSlideIn 0.2s ease;
}

@keyframes modalSlideIn {
    from {
        opacity: 0;
        transform: translateY(-20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* --- Hierarchical Template Column (Gestione Template) --- */
.mm_group_header, .mm-group-header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 15px;
    background: #0066cc;
    /* Blu come da screenshot */
    color: white;
    border-bottom: none;
    cursor: default;
    /* Rimosso pointer perché non cliccabile per toggle */
    transition: all 0.2s ease;
    user-select: none;
    margin-bottom: 5px;
    border-radius: 8px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.mm_group_header.no_toggle, .mm-group-header.no-toggle {
    cursor: default;
}

.mm_group_header .group_title {
    font-weight: 800;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.mm_group_header .metric-badge {
    background: rgba(255, 255, 255, 0.2) !important;
    color: white !important;
    border: none !important;
    font-weight: 700;
}

.mm_group_header .btn_add_to_group,
.mm_group_header_actions {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 4px;
}

.mm_group_header_actions i {
    padding: 5px 6px;
    border-radius: 5px;
    cursor: pointer;
    color: white;
    opacity: 0.85;
    transition: opacity 0.15s, background 0.15s;
}

.mm_group_header_actions i:hover {
    opacity: 1;
    background: rgba(255, 255, 255, 0.15);
}

.mm_group_header_actions .icon-btn-delete {
    color: white !important;
}

.btn_quick_assign_label {
    background: rgba(255, 255, 255, 0.15);
    border: 1px solid rgba(255, 255, 255, 0.3);
    color: white;
    padding: 4px 10px;
    border-radius: 6px;
    font-size: 11px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    gap: 6px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.btn_quick_assign_label:hover {
    background: white;
    color: #0066cc;
    border-color: white;
}

.btn_quick_assign_label i {
    font-size: 9px;
}

.btn_clone_group {
    padding: 4px 8px;
}
.btn_clone_group i {
    font-size: 11px;
}

/* Modale Assegnazione Obiettivi - Box selection */
.assignment_box {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    padding: 12px 14px;
    border: 1px solid #eee;
    border-radius: 6px;
    cursor: pointer;
    background: #fff;
    transition: all 0.2s;
    user-select: none;
    height: 100%;
}

.assignment_box:hover {
    border-color: #0066cc;
    background: #f8fbff;
}

.assignment_box.selected {
    background: #eef6ff !important;
    border-color: #0066cc !important;
    box-shadow: inset 0 0 0 1px #0066cc;
}

.assignment_box.selected span {
    color: #0066cc;
    font-weight: 700;
}

.assignment_grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
}

.btn_select_all_assign {
    background: #f3f4f6;
    border: 1px solid #e5e7eb;
    color: #4b5563;
    padding: 8px 16px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
    transition: all 0.2s;
    white-space: nowrap;
}

.btn_select_all_assign:hover {
    background: #e5e7eb;
    color: #1f2937;
}

.btn_select_all_assign.deselect {
    color: #dc2626;
    background: #fef2f2;
    border-color: #fee2e2;
}

.btn_select_all_assign.deselect:hover {
    background: #fee2e2;
}

.assignment_box span {
    font-size: 13px;
    width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}


.mm_item_nested {
    margin-left: 0 !important;
    padding-left: 10px !important;
    border-left: none !important;
    border-radius: 8px !important;
    background: #fff;
    width: 100% !important;
    display: flex;
    align-items: center;
}

.mm_item_nested span {
    color: #0066cc !important;
}

.mm_item_nested .metric-badge {
    color: #0066cc !important;
    opacity: 0.8;
}

.mm_item_nested .hierarchy-actions i {
    color: #1d4ed8 !important;
    opacity: 0.7;
}

.mm_item_nested .hierarchy-actions i:hover {
    opacity: 1;
}

.mm_item_row {
    display: flex;
    align-items: center;
    width: 100%;
    gap: 8px;
}

.mm_item_row .metric-badge {
    margin-left: auto;
    flex-shrink: 0;
}

.mm_item_nested .obiettivi_edit_icon {
    color: #0066cc;
    cursor: pointer;
    font-size: 14px;
    opacity: 0.8;
    flex-shrink: 0;
}
.mm_item_nested .obiettivi_edit_icon:hover {
    opacity: 1;
}

.mm_item_nested.active {
    background: #f0f7ff !important;
}

.btn_add_to_group {
    cursor: pointer;
    padding: 5px;
    border-radius: 4px;
    transition: background 0.2s;
    font-size: 14px;
}

.btn_add_to_group:hover {
    background: rgba(255, 255, 255, 0.3);
}



.modal_dettaglio_header {
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 18px 25px;
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
    color: #fff;
}

.modal_dettaglio_header h3 {
    flex: 1;
    font-size: 18px;
    font-weight: 700;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 10px;
}

.modal_dettaglio_header h3 i {
    font-size: 20px;
}

.modal_dettaglio_count {
    font-size: 13px;
    background: rgba(255, 255, 255, 0.2);
    padding: 5px 12px;
    border-radius: 20px;
}

.modal_close_btn {
    background: rgba(255, 255, 255, 0.2);
    border: none;
    color: #fff;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    transition: background 0.2s ease;
}

.modal_close_btn:hover {
    background: rgba(255, 255, 255, 0.3);
}

.modal_dettaglio_body {
    padding: 0;
    overflow-y: auto;
    overflow-x: auto;
    max-height: calc(85vh - 70px);
}

/* Variante "full visibility" per dettagli Attivazioni/Vendite:
   niente listone interno scrollabile, il contenuto resta tutto visibile nel modal. */
.modal_dettaglio_pista.modal_dettaglio_full {
    align-items: center;
    justify-content: center;
    overflow-y: auto;
    padding: 16px 0;
}

.modal_dettaglio_pista.modal_dettaglio_full .modal_dettaglio_content {
    max-height: 90vh;
    overflow-y: auto;
    margin: 0 auto;
    border-radius: 12px;
}

.modal_dettaglio_pista.modal_dettaglio_full .modal_dettaglio_body {
    max-height: none;
    overflow: visible;
}

.modal_dettaglio_loading,
.modal_dettaglio_empty,
.modal_dettaglio_error {
    padding: 60px 20px;
    text-align: center;
    font-size: 16px;
    color: #6b7280;
}

.modal_dettaglio_loading i {
    color: #10b981;
    font-size: 24px;
    margin-right: 10px;
}

.modal_dettaglio_error {
    color: #dc2626;
}

.modal_dettaglio_table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}

.modal_dettaglio_table thead tr {
    background: #f3f4f6;
    border-bottom: 2px solid #e5e7eb;
}

.modal_dettaglio_table th {
    padding: 9px 12px;
    text-align: left;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    color: #6b7280;
    white-space: nowrap;
}

.modal_dettaglio_table td {
    padding: 8px 12px;
    color: #111827;
    border-bottom: 1px solid #f1f5f9;
    white-space: nowrap;
}

.modal_dettaglio_table tbody tr:nth-child(even) { background: #f9fafb; }
.modal_dettaglio_table tbody tr:hover { background: #ecfdf5; }
.modal_dettaglio_table td.td_punti { font-weight: 600; text-align: right; }

/* ========================================= */
/* === REPORT OPERATORI === */
/* ========================================= */

.report_operatori_filtri {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: flex-end;
    gap: 20px;
    background: #f8f9fa;
    border: 1px solid var(--color-border);
}

.report_operatori_filtri .filtro_gruppo label {
    color: #333;
    font-weight: 600;
}

.report_operatori_target_select {
    min-width: 450px !important;
    width: 450px;
}

.btn_report_operatori {
    background-color: #f59e0b;
    color: #fff;
    font-weight: 700;
}

.btn_report_operatori:hover {
    background-color: #d97706;
}

.report_operatori_empty_state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 80px 20px;
    color: #92400e;
    text-align: center;
    width: 100%;
}

.report_operatori_empty_state i {
    font-size: 64px;
    color: #f59e0b;
    margin-bottom: 20px;
    opacity: 0.5;
}

.report_operatori_empty_state h3 {
    font-size: 18px;
    font-weight: 600;
    color: #374151;
    margin-bottom: 8px;
}

.report_operatori_empty_state p {
    font-size: 14px;
    color: #9ca3af;
}

.report_operatori_loading,
.report_operatori_empty,
.report_operatori_error {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 60px 20px;
    font-size: 16px;
    color: #6b7280;
    text-align: center;
    width: 100%;
}

.report_operatori_loading {
    color: #f59e0b;
}

.report_operatori_error {
    color: #dc2626;
    background: #fef2f2;
    border-radius: 10px;
}

/* --- Operatore dettaglio: nascosto di default --- */
.operatore_dettaglio {
    display: none;
}

/* --- Reset Password: override login_container --- */
.reset_password_page .login_container {
    height: auto;
    padding: 40px;
}

/* ========================================= */
/* === Mobile Responsive Overrides === */
/* ========================================= */

@media (max-width: 768px) {
    .no-scroll {
        overflow: hidden !important;
    }

    /* Header sezione nel flusso della pagina */
    .mobile_page_header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 10px 6px 10px 14px;
        background: #fff;
        border-bottom: 1px solid var(--color-border-light);
        gap: 8px;
    }

    #mobile_page_header_title {
        font-size: 13px;
        font-weight: 700;
        letter-spacing: 0.8px;
        text-transform: uppercase;
        color: var(--color-text-dark);
        flex-shrink: 0;
    }

    .mobile_page_header.search_open #mobile_page_header_title {
        display: none;
    }

    .mobile_page_header_actions {
        display: flex;
        align-items: center;
        gap: 8px;
        flex: 1;
        justify-content: flex-end;
    }

    /* Quando search è aperto, le actions occupano tutto */
    .mobile_page_header.search_open .mobile_page_header_actions {
        flex: 1;
    }

    /* Input search dentro l'header — reset overlay, inline nel flusso */
    .mobile_page_header .mobile_search_input_wrapper {
        position: relative !important;
        box-shadow: none !important;
        background: #f3f4f6 !important;
        border-radius: 20px !important;
        padding: 5px 32px 5px 12px !important;
        margin: 0 !important;
        max-width: none !important;
        flex: 1 !important;
        z-index: auto !important;
        display: flex !important;
        align-items: center;
    }

    .mobile_page_header .mobile_search_input {
        border: none !important;
        background: transparent !important;
        outline: none !important;
        font-size: 13px !important;
        flex: 1 !important;
        width: 0 !important;
        min-width: 0 !important;
        padding: 0 !important;
        color: var(--color-text-dark);
    }

    /* X assoluta dentro il wrapper, incollata a destra */
    .mobile_page_header .mobile_search_close {
        position: absolute;
        right: 10px;
        top: 50%;
        transform: translateY(-50%);
        color: #9ca3af;
        display: flex;
        align-items: center;
        cursor: pointer;
    }

    .mobile_page_header .mobile_search_close svg {
        width: 15px;
        height: 15px;
    }

    .mobile_page_header .mobile_header_icon svg {
        width: 1.5rem;
        height: 1.5rem;
    }

    /* Header adjustments: sovrapposto al contenuto */
    .main_header {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        z-index: 1000;
        background-color: transparent;
        box-shadow: none;
        /*padding: 10px 15px;*/
        height: auto;
    }

    .header_left {
        display: none !important;
        /* Nascosto su mobile: il menu è nella bottom nav */
    }

    .header_right {
        display: flex;
        align-items: center;
        gap: 0;
        flex: 1;
        justify-content: flex-end;
        min-width: 0;
        /* Permette al flex di restringersi */
    }

    .mobile_header_icons {
        display: flex;
        align-items: center;
        gap: 0;
        /* Nessuno spazio tra le icone */
        flex: 0 0 auto;
        justify-content: flex-end;
        margin-right: 0;
        /* attaccate al bordo destro del contenitore */
    }

    .mobile_header_icon {
        cursor: pointer;
        color: var(--color-text-dark);
    }

    .mobile_header_icon svg {
        width: 1.2rem;
        height: 1.2rem;
    }

    /* Icone con sfondo bianco e padding di 10px */
    .mobile_header_icons>.nav_icon {
        background-color: white;
        padding: 10px;
        border-radius: 0;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
        cursor: pointer;
        transition: background-color 0.2s;
        font-size: 1.2rem;
        color: var(--color-text-dark);
    }

    /* Prima icona: border-radius solo a sinistra */
    .mobile_header_icons>.nav_icon:first-child {
        border-radius: 8px 0 0 8px;
    }

    .mobile_header_icons>.nav_icon:last-child {
        border-radius: 0 8px 8px 0;
    }

    .mobile_header_icons>.nav_icon:hover {
        background-color: #f9fafb;
    }

    #mobile_search_toggle.active {
        color: var(--color-primary) !important;
        background-color: #e0f2fe;
    }

    .header_right .nav_icon.desktop-only {
        display: none;
    }

    /* Input ricerca mobile nell'header */
    .mobile_search_input_wrapper {
        display: flex;
        align-items: center;
        justify-content: center;
        flex: 1;
        max-width: 90vw;
        position: relative;
        margin: 6px auto 0;
        background-color: rgba(255, 255, 255, 0.96);
        padding: 4px 10px;
        border-radius: 999px;
        box-shadow: 0 8px 18px rgba(15, 23, 42, 0.16);
        z-index: 20;
    }

    .mobile_search_input_wrapper.hidden {
        display: none !important;
    }

    .mobile_search_input {
        width: 100%;
        padding: 8px 32px 8px 14px;
        border-radius: 999px;
        border: none;
        font-size: 14px;
        background-color: transparent;
        outline: none;
    }

    .mobile_search_input:focus {
        border-color: transparent;
        box-shadow: none;
    }

    .mobile_search_close {
        position: absolute;
        right: 12px;
        cursor: pointer;
        color: #6b7280;
        padding: 4px;
    }

    .mobile_search_close svg {
        width: 1rem;
        height: 1rem;
    }

    .mobile_search_close:hover {
        color: var(--color-text-darkest);
    }

    /* Filter Area Mobile styles */
    /* mobile_filter_bar rimosso: le icone sono ora nell'header_right */
    .mobile_filter_bar {
        display: none !important;
    }

    .mobile_filter_row_top {
        display: flex;
        align-items: center;
        gap: 10px;
        width: 100%;
    }

    .btn_other_filters {
        width: 100%;
        height: 48px;
        border-radius: var(--radius-md);
        background: white;
        border: 2px solid var(--color-primary);
        color: var(--color-primary);
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 14px;
        font-weight: 800;
        gap: 10px;
    }

    .mobile_filter_row_bottom {
        display: flex;
        gap: 10px;
        width: 100%;
        padding: 10px 15px;
        /* Added padding here */
        transition: all 0.3s ease;
    }

    .mobile_filter_row_bottom.hidden {
        display: none !important;
    }

    .btn_mobile_quick_apply {
        flex: 2;
        height: 48px;
        background: var(--color-primary);
        color: white;
        border: none;
        border-radius: var(--radius-md);
        font-weight: 800;
        font-size: 14px;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
    }

    .btn_mobile_quick_reset {
        flex: 1;
        height: 48px;
        background: #f1f5f9;
        color: #64748b;
        border: 1px solid var(--color-border);
        border-radius: var(--radius-md);
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 14px;
        font-weight: 800;
        gap: 8px;
    }

    /* Report Operatori: 1 per riga per le macro categorie */
    .operatore_categorie {
        grid-template-columns: 1fr !important;
        gap: 12px;
    }



    /* --- Mobile: full-screen bottom sheet overlay --- */
    .filter_area {
        /* Override sidebar positioning: become a fixed overlay */
        position: fixed !important;
        top: 0;
        left: 0;
        width: 100% !important;
        height: 100% !important;
        flex: none !important;
        background: rgba(0, 0, 0, 0);
        z-index: 2000;
        visibility: hidden;
        transition: background 0.3s ease, visibility 0.3s;
        flex-direction: column !important;
        justify-content: flex-end;
        padding: 0;
        border-left: none;
        overflow: visible !important;
        display: flex !important;
    }

    .filter_area.active {
        visibility: visible;
        background: rgba(0, 0, 0, 0.4);
    }

    /* sidebar-open has no effect on mobile */
    .filter_area.sidebar-open {
        flex: none !important;
        width: 100% !important;
    }

    .filter_sidebar_header {
        display: none !important;
    }

    .filter_sheet {
        background: white;
        width: 100%;
        border-top-left-radius: 25px;
        border-top-right-radius: 25px;
        transform: translateY(100%);
        transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
        max-height: 90vh;
        display: flex;
        flex-direction: column;
        box-shadow: 0 -10px 40px rgba(0, 0, 0, 0.2);
        overflow: hidden;
        flex: none;
    }

    .filter_drag_handle {
        width: 40px;
        height: 5px;
        background: #e2e8f0;
        border-radius: 10px;
        margin: 12px auto 4px;
        flex-shrink: 0;
    }

    .filter_area.active .filter_sheet {
        transform: translateY(0);
    }

    .filter_header_mobile {
        display: flex;
        justify-content: center;
        align-items: center;
        padding: 5px 20px 15px;
        border-bottom: none;
        background: transparent;
    }

    .filter_header_mobile h3 {
        margin: 0;
        font-size: 14px;
        font-weight: 700;
        color: var(--color-text-muted);
        letter-spacing: 1px;
        text-transform: uppercase;
    }

    .filtri_container {
        gap: 20px;
        padding: 20px;
    }

    .filtro_ricerca {
        display: none !important;
    }

    .filtro_input,
    .filtro_select {
        height: 48px;
        font-size: 14px;
    }

    .filtro_buttons_right {
        flex-direction: row;
        padding-top: 0;
        border-top: none;
        margin: 10px 0 0;
    }

    .btn_filtro {
        flex: 1;
        height: 48px;
        font-size: 15px;
        font-weight: 700;
    }

    /* Content adjustments: il contenuto parte dall'alto senza padding-top */
    .main_content {
        padding: 0;
        /* Spazio per la bottom nav */
    }

    .main_table {
        padding: 0;
    }

    .table {
        padding: 10px;
    }

    /* Report Operatori Mobile */
    .gare_personali_container {
        display: flex;
        flex-direction: row;
        overflow-x: auto;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
        scroll-snap-type: x mandatory;
        padding: 5px;
        gap: 15px;
        width: 100%;
    }

    .operatore_card {
        flex: 0 0 auto;
        min-width: 85vw;
        max-width: 85vw;
        scroll-snap-align: start;
        max-height: calc(100vh - 140px - env(safe-area-inset-bottom, 0px));
        /* lascia spazio a icone top + bottom nav + safe area iOS */
        display: flex;
        flex-direction: column;
        overflow: hidden;
    }

    .operatore_card_content {
        padding: 12px;
        gap: 15px;
        flex: 1 1 auto;
        min-height: 0;
        overflow-y: auto;
        overflow-x: hidden;
        width: 100%;
        box-sizing: border-box;
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        /* se il contenuto è più alto della card, abilita scroll interno */
    }

    /* Nascondi le barre di scorrimento ma mantieni lo scroll (Report Operatori mobile) */
    .gare_personali_container,
    .operatore_card_content {
        scrollbar-width: none;
        /* Firefox */
    }

    .gare_personali_container::-webkit-scrollbar,
    .operatore_card_content::-webkit_scrollbar,
    .operatore_card_content::-webkit-scrollbar {
        width: 0;
        height: 0;
        display: none;
    }

    .operatore_info {
        gap: 10px;
        min-width: 0;
        width: 100%;
        max-width: 100%;
    }

    .operatore_posizione {
        width: 32px;
        height: 32px;
        font-size: 14px;
    }

    .operatore_nome_wrap {
        flex-direction: column;
        align-items: flex-start;
        gap: 4px;
    }

    .operatore_nome {
        font-size: 16px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        min-width: 0;
        max-width: 100%;
    }

    .operatore_vendite_bar {
        gap: 8px;
    }

    .operatore_categorie {
        grid-template-columns: minmax(0, 1fr) !important;
        gap: 12px;
        width: 100% !important;
        max-width: 100%;
        min-width: 0;
    }

    .macro_categoria {
        background: white;
        padding: 8px;
        border-radius: var(--radius-sm);
        width: 100% !important;
        box-sizing: border-box;
        overflow: hidden;
    }

    .macro_nome {
        font-size: 11px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .macro_valore {
        font-size: 10px;
        font-weight: 700;
    }

    .macro_proiezione {
        font-size: 11px;
        flex-direction: row;
        justify-content: space-between;
        align-items: center !important;
        gap: 10px;
        width: 100%;
    }

    /* .operatore_dettaglio_inner {

/* ========================================= */
/* === Utility Classes for Inline CSS Refactoring === */
/* ========================================= */

/* Flex container styles */
.flex-container {
    display: flex;
    align-items: center;
    gap: 8px;
}

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

.flex-grow {
    flex-grow: 1;
}

/* Modal and container styles */
.modal-scroll {
    max-height: 450px;
    padding: 20px;
}

.modal-scroll-sm {
    max-height: 150px;
    overflow-y: auto;
}

.modal-footer-actions {
    padding: 15px 20px;
    border-top: 1px solid #edf2f7;
    background: #f8fafc;
    border-bottom-left-radius: 16px;
    border-bottom-right-radius: 16px;
}

/* Metric selector styles */
.metric-selector {
    display: flex;
    background: var(--color-primary);
    border-radius: 999px;
    padding: 4px;
    gap: 0;
}

.metric-option {
    flex: 1;
    border: none !important;
    outline: none;
    background: transparent !important;
    border-radius: 999px !important;
    padding: 6px 16px;
    font-size: 0.8rem;
    font-weight: 500;
    color: rgba(255,255,255,0.75) !important;
    cursor: pointer;
    transition: background 0.18s, color 0.18s, box-shadow 0.18s;
    white-space: nowrap;
    text-align: center;
}

.metric-option.active {
    background: #fff !important;
    color: var(--color-primary) !important;
    font-weight: 600;
    box-shadow: 0 2px 6px rgba(0,0,0,0.15);
}

.metric-option:not(.active):hover {
    color: #fff;
}

/* List and item styles */
.import-target-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.import-target-item {
    padding: 14px 18px;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.2s ease;
    font-weight: 500;
    font-size: 14px;
    background: white;
    box-shadow: 0 1px 2px rgba(0,0,0,0.05);
    display: flex;
    align-items: center;
    gap: 12px;
}

.import-target-item:hover {
    border-color: var(--color-primary);
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

/* Group header styles */

/* Icon button styles */
.icon-btn {
    font-size: 14px;
    cursor: pointer;
    opacity: 0.8;
}

.icon-btn:hover {
    opacity: 1;
}

.icon-btn-add {
    color: var(--color-primary);
}

.icon-btn-delete {
    color: #e53e3e;
}

.icon-btn-edit {
    color: #0066cc;
}

.icon-btn-sync {
    color: #28a745;
}

/* Form styles */
.form-row-inputs {
    display: flex;
    gap: 10px;
    margin-top: 15px;
}

.form-group {
    flex: 1;
}

/* Search input styles */
.search-input-container {
    flex: 1;
    position: relative;
}

.search-icon {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: #9ca3af;
    font-size: 13px;
}

.search-input {
    width: 100%;
    padding: 10px 12px 10px 36px;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    font-size: 13px;
    outline: none;
    transition: border-color 0.2s;
}

.search-input:focus {
    border-color: var(--color-primary);
}

/* Counter badge */
.counter-badge {
    background: rgba(255,255,255,0.2);
    color: #fff;
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
}

/* Message styles */
.message-center {
    text-align: center;
    padding: 20px;
    color: #718096;
}

/* Readonly input style */
.input-readonly {
    background: #f0f0f0;
    cursor: not-allowed;
}

/* Obiettivi specific styles - moved to end of file, outside media queries */

    .operatore_dettaglio_macro_header {
        font-size: 11px;
    }

    .operatore_dettaglio_riga {
        font-size: 10px;
    }

    /* Target Operatori Mobile */
    .target_op_container {
        grid-template-columns: 1fr;
        gap: 10px;
    }

    .target_op_sidebar {
        flex-direction: row;
        overflow-x: auto;
        padding: 10px;
        background: white;
        border-radius: 0;
        border: none;
        border-bottom: 1px solid var(--color-border-light);
        -webkit-overflow-scrolling: touch;
    }

    .target_op_sidebar_title {
        display: none;
    }

    .target_op_sidebar_list {
        display: flex;
        flex-direction: row;
        gap: 8px;
        max-height: none;
    }

    .target_op_sidebar_item {
        flex: 0 0 auto;
        padding: 8px 16px;
        border: 1px solid var(--color-border);
        border-radius: 20px;
        font-size: 12px;
        background: var(--color-bg-light);
    }

    .target_op_sidebar_item.active {
        background: var(--color-primary);
        color: white;
        border-color: var(--color-primary);
    }

    .target_op_editor {
        padding: 12px;
    }

    .target_op_header {
        flex-direction: column;
        align-items: stretch;
        gap: 15px;
    }

    .target_op_header_actions {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 8px;
    }

    .target_op_header_actions button {
        width: 100%;
        padding: 10px !important;
    }

    .target_op_macro_grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .target_op_macro_box {
        width: 100%;
        padding: 12px;
        border: 1px solid var(--color-border-light);
    }

    .target_op_macro_header {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
    }

    .target_op_macro_inputs {
        width: 100%;
        flex-direction: column;
        gap: 10px;
    }

    .target_op_mode_wrapper {
        width: 100%;
        justify-content: space-between;
    }

    .target_op_macro_values {
        width: 100%;
        justify-content: space-between;
    }

    .target_op_input {
        height: 44px;
        font-size: 16px;
        /* Prevents iOS zoom */
    }

    /* Table to Card conversion - default mobile */
    .table_header {
        display: none !important;
    }

    .table_body {
        padding: 5px;
    }

    .body_row {
        flex-direction: column !important;
        height: auto !important;
        max-height: none !important;
        padding: 15px !important;
        margin-bottom: 15px !important;
        background: white !important;
        border: 1px solid var(--color-border-light) !important;
        border-radius: var(--radius-md) !important;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05) !important;
        align-items: stretch !important;
        gap: 10px !important;
    }

    .td {
        width: 100% !important;
        display: flex !important;
        justify-content: space-between !important;
        align-items: center !important;
        border: none !important;
        padding: 5px 0 !important;
        font-size: 14px !important;
        text-align: right !important;
        min-height: 24px;
    }

    .td::before {
        content: attr(data-label);
        font-weight: 700;
        color: var(--color-text-muted);
        font-size: 10px;
        text-transform: uppercase;
        text-align: left;
        flex: 1;
    }

    .td.full-width-cell {
        justify-content: center !important;
        text-align: center !important;
    }

    .td.full-width-cell::before {
        display: none;
    }

    /* Modals adjustment */
    .modal_dettaglio_content {
        width: 95% !important;
        margin: 10px auto !important;
        max-height: 90vh;
    }

    .modal_dettaglio_table th,
    .modal_dettaglio_table td {
        padding: 8px !important;
        font-size: 13px;
    }

    /* Classifica grid adjustment */
    .classifica_grid {
        grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
        padding: 10px;
        padding-top: 60px; /* clearance for fixed transparent header (z-index 1000) */
        gap: 15px;
    }

    /* Macro-Micro Mobile */
    .macro_micro_layout {
        grid-template-columns: 1fr;
        height: auto;
    }

    .mm_col {
        height: 300px;
        /* Fixed height for scrollable lists on mobile */
        margin-bottom: 20px;
    }

    .mm_col_micro {
        height: auto;
        /* Micro can be taller */
        min-height: 300px;
    }

    .mm_item {
        padding: 12px 16px;
        /* Larger touch area */
        font-size: 13px;
    }

    .mm_micro_table_header,
    .mm_micro_row {
        grid-template-columns: 1fr;
        gap: 10px;
    }

    .mm_cell_toggle {
        justify-content: flex-start;
        gap: 20px;
        background: #f1f5f9;
        padding: 5px 10px;
        border-radius: 5px;
    }

    /* Bottone Section Mobile */
    .bottone_main_row {
        display: flex !important;
        flex-direction: column !important;
        gap: 16px;
        height: auto !important;
    }

    .table_body .bottone_main_row {
        display: flex !important;
        grid-template-columns: unset;
    }

    .bottone_sezioni_wrapper {
        width: 100% !important;
    }

    .bottone_card {
        padding: 10px;
    }

    .bottone_trimestri_card {
        width: 100% !important;
        padding: 10px;
    }

    /* Titolo blocco: stack verticale su mobile */
    .bottone_blocco_titolo {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
        padding: 8px 10px;
    }

    .bottone_blocco_titolo .bottone_vista_tabs {
        width: 100%;
        justify-content: center;
    }

    .bottone_blocco_titolo .bottone_vista_tab {
        flex: 1;
        text-align: center;
        padding: 5px 8px;
        font-size: 0.7rem;
    }

    /* Summary compatto */
    .bottone_blocco_summary {
        padding: 8px 10px;
        gap: 4px 10px;
    }

    .bottone_summary_group_label {
        font-size: 9px;
        min-width: 32px;
    }

    .bottone_summary_label {
        font-size: 8px;
    }

    .bottone_summary_value {
        font-size: 11px;
    }

    /* Tabelle S1-S7: card layout verticale su mobile */
    .bottone_tabella_wrapper {
        overflow-x: hidden;
        width: 100%;
    }

    .bottone_col_header {
        display: none !important;
    }

    .bottone_data_row {
        display: flex;
        flex-direction: column;
        gap: 0;
        border: 1px solid var(--bottone-border);
        border-radius: 8px;
        margin-bottom: 8px;
        overflow: hidden;
        min-width: unset;
    }

    .bottone_blocco_header {
        min-width: unset;
    }

    .bottone_row_label {
        font-size: 11px;
        font-weight: 700;
        padding: 8px 10px;
        background: var(--bottone-label-bg, #f1f5f9);
        border-bottom: 1px solid var(--bottone-border);
        text-align: left;
    }

    .bottone_data_row .bottone_cell {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 6px 10px;
        font-size: 12px;
        border-right: none;
        border-bottom: 1px solid #f1f5f9;
    }

    .bottone_data_row .bottone_cell:last-child {
        border-bottom: none;
    }

    .bottone_data_row .bottone_cell::before {
        content: attr(data-col);
        font-size: 10px;
        font-weight: 600;
        color: #94a3b8;
        text-transform: uppercase;
    }

    .bottone_blocco {
        margin-bottom: 14px;
    }

    .bottone_blocco:last-child {
        margin-bottom: 0;
    }

    /* Trimestri: header compatto */
    .bottone_mesi_header {
        flex-direction: column;
        gap: 8px;
    }

    .bottone_trimestre_select {
        width: 100%;
        font-size: 11px;
        padding: 6px 8px;
    }

    .bottone_mesi_tabs {
        width: 100%;
    }

    .bottone_mese_tab {
        padding: 5px 8px;
        font-size: 0.7rem;
    }

    .bottone_trimestri_titolo {
        font-size: 0.9rem;
        margin-bottom: 8px;
    }

    /* Tabella trimestri: N e % unite su mobile */
    .bottone_trimestri_block {
        overflow-x: hidden;
    }

    .bottone_trimestri_table {
        min-width: unset;
        width: 100%;
    }

    .bottone_trimestri_table th,
    .bottone_trimestri_table td {
        padding: 5px 6px;
        font-size: 11px;
    }

    .bottone_trimestri_table .tr_sub_header {
        display: none;
    }

    .bottone_trimestri_table .td_desktop_only,
    .bottone_trimestri_table .th_desktop_only {
        display: none;
    }

    .bottone_trimestri_table .td_mobile_only,
    .bottone_trimestri_table .th_mobile_only {
        display: table-cell;
    }
}

/* Addetti Report Mobile Detail */
@media (max-width: 1024px) {
    .operatore_dettaglio_inner {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
}

@media (max-width: 640px) {
    .operatore_dettaglio_inner {
        grid-template-columns: 1fr !important;
    }
}

/* Mobile Search Wrapper and Clear Button */
.mobile_search_wrapper {
    position: relative;
    width: 100%;
}

.mobile_global_search_clear {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--color-text-muted);
    font-size: 1.1rem;
    cursor: pointer;
    display: none;
    /* Hidden by default */
    z-index: 10;
    transition: color 0.2s;
}

.mobile_global_search_clear:hover {
    color: var(--color-primary);
}

.mobile_global_search_clear.active {
    display: block;
}

/* --- Nuovi Stili Dettaglio Attivazioni (Mobile-first List) --- */
.modal_detail_container {
    padding: 20px;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
}

@media (max-width: 768px) {
    .modal_detail_container {
        padding: 12px;
        gap: 12px;
        grid-template-columns: 1fr;
    }
}

.modal_detail_section {
    display: flex;
    flex-direction: column;
    gap: 0;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    padding: 14px 16px;
}

.modal_section_title {
    font-size: 11px;
    font-weight: 800;
    color: var(--color-primary);
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 8px;
    padding-bottom: 4px;
    border-bottom: 2px solid #eef2ff;
}

.modal_detail_item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 0;
    border-bottom: 1px solid #e9edf2;
    gap: 15px;
}

.modal_detail_item:last-child {
    border-bottom: none;
}

.modal_detail_label {
    font-size: 11px;
    font-weight: 700;
    color: #94a3b8;
    text-transform: uppercase;
    flex-shrink: 0;
}

.modal_detail_value {
    font-size: 14px;
    font-weight: 600;
    color: #1e293b;
    text-align: right;
    word-break: break-word;
}

/* Sezione "Altro" — espansa su tutta la larghezza con griglia interna */
.modal_detail_section_wide {
    grid-column: 1 / -1;
}

.modal_section_list_grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0;
}

.modal_section_list_grid .modal_detail_item {
    padding: 6px 12px;
    border-bottom: 1px solid #e9edf2;
    border-right: 1px solid #e9edf2;
}

.modal_section_list_grid .modal_detail_item:nth-child(4n) {
    border-right: none;
}

@media (max-width: 768px) {
    .modal_section_list_grid {
        grid-template-columns: 1fr;
    }
    .modal_section_list_grid .modal_detail_item {
        border-right: none;
    }
}

/* R-ONE Dettaglio Vendita — layout a due colonne */
.rone_det_wide {
    max-width: 720px !important;
    width: 95%;
}

.rone_det_two_col {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0;
    padding: 0;
}

.rone_det_col_left {
    padding: 20px;
    border-right: 1px solid #e2e8f0;
}

.rone_det_col_right {
    padding: 20px;
}

.rone_det_device_name {
    font-size: 15px;
    font-weight: 700;
    color: #1e293b;
    margin-bottom: 4px;
    line-height: 1.3;
}

.rone_det_device_imei {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    color: #64748b;
    margin-bottom: 12px;
    padding-bottom: 12px;
    border-bottom: 1px solid #f1f5f9;
}

.rone_det_device_imei .modal_detail_label {
    font-size: 10px;
}

.rone_det_prezzi_grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin: 12px 0;
}

.rone_det_prezzo_card {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 10px 12px;
    border-radius: 8px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
}

.rone_det_prezzo_label {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    color: #94a3b8;
}

.rone_det_prezzo_val {
    font-size: 16px;
    font-weight: 700;
    color: #1e293b;
}

.rone_det_margine_card {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 14px;
    border-radius: 8px;
    margin-bottom: 12px;
}

.rone_det_margine_label {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
}

.rone_det_margine_val {
    font-size: 18px;
    font-weight: 800;
}

.rone_det_margine_pos {
    background: #f0fdf4;
    border: 1px solid #bbf7d0;
    color: #16a34a;
}

.rone_det_margine_neg {
    background: #fef2f2;
    border: 1px solid #fecaca;
    color: #dc2626;
}

.rone_det_perm {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 0;
    border-bottom: 1px solid #f1f5f9;
}

@media (max-width: 640px) {
    .rone_det_wide {
        max-width: 100% !important;
    }

    .rone_det_two_col {
        grid-template-columns: 1fr;
    }

    .rone_det_col_left {
        border-right: none;
        border-bottom: 1px solid #e2e8f0;
        padding: 15px;
    }

    .rone_det_col_right {
        padding: 15px;
    }
}

/* ========================================= */
/* === Layout Browser Classifiche (Main) === */
/* ========================================= */

.macro_micro_layout.classifica_layout {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
    gap: 20px;
    width: 100%;
    margin-top: 20px;
}

.mm_col {
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
    padding: 15px;
    height: 600px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.mm_col_header {
    font-weight: 700;
    text-transform: uppercase;
    color: var(--color-text-muted);
    font-size: 0.75rem;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--color-border-light);
    margin-bottom: 10px;
}

.mm_col_list {
    flex: 1;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: #d1d5db transparent;
    display: flex;
    flex-direction: column;
    gap: 3px;
    padding: 2px;
}

.mm_col_list::-webkit-scrollbar {
    width: 4px;
}

.mm_col_list::-webkit-scrollbar-track {
    background: transparent;
}

.mm_col_list::-webkit-scrollbar-thumb {
    background: #d1d5db;
    border-radius: 4px;
}

/* Templates (layout 6 colonne): scroll interno senza barra visibile */
.ts_6col .mm_col_list {
    scrollbar-width: none;        /* Firefox */
    -ms-overflow-style: none;     /* IE/Edge */
}

/* DB Explorer (tab LV6): 2 colonne, 1/5 - 4/5, scroll orizzontale indipendente a destra */
.db_explorer_layout {
    grid-template-columns: 1fr 4fr;
}

.db_explorer_table_item {
    white-space: normal;
    word-break: break-word;
}

.db_explorer_content_col .mm_col_list {
    overflow-x: auto;
    display: block;
}

.db_explorer_table {
    border-collapse: collapse;
    font-size: 0.8rem;
    white-space: nowrap;
    width: auto;
    table-layout: auto;
}

.db_explorer_table th {
    position: sticky;
    top: 0;
    background: #f8fafc;
    text-align: left;
    padding: 6px 10px;
    border-bottom: 1px solid var(--color-border-light);
}

.db_explorer_table td {
    padding: 6px 10px;
    border-bottom: 1px solid var(--color-border-light);
}

.db_explorer_null {
    color: #cbd5e1;
}

.db_explorer_db_group + .db_explorer_db_group {
    margin-top: 6px;
}

.db_explorer_db_header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    cursor: pointer;
    font-weight: 700;
    font-size: 0.8rem;
    text-transform: uppercase;
    color: var(--color-text);
    border-radius: 6px;
}

.db_explorer_db_header:hover {
    background: var(--color-bg-hover, #f3f4f6);
}

.db_explorer_db_header i.fa-chevron-down,
.db_explorer_db_header i.fa-chevron-right {
    font-size: 0.7rem;
    color: var(--color-text-muted);
    width: 10px;
}

.db_explorer_db_count {
    margin-left: auto;
    font-size: 0.7rem;
    font-weight: 400;
    color: var(--color-text-muted);
}

.db_explorer_db_tables {
    padding-left: 10px;
}

.db_explorer_db_tables.hidden {
    display: none;
}
.ts_6col .mm_col_list::-webkit-scrollbar {
    display: none;                /* Chrome/Safari */
}

.mm_item {
    padding: 10px;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s;
    font-size: 0.9rem;
}

.mm_item:hover {
    background-color: var(--color-bg-light);
}

.mm_item.active {
    background-color: var(--color-primary);
    color: white;
    font-weight: 600;
}

.mm_empty {
    padding: 20px;
    text-align: center;
    color: var(--color-text-muted);
    font-size: 0.9rem;
    font-style: italic;
}


.flex-gap {
    display: flex;
    gap: 8px;
    justify-content: flex-end;
}

/* Hierarchy Actions CSS */
.mm_item {
    display: flex !important;
    justify-content: flex-start !important;
    align-items: center !important;
    gap: 6px;
}

.mm_item .hierarchy-actions {
    margin-left: auto;
}

/* Classifica info icon */
.cl-info-icon {
    font-size: 0.8rem;
    color: var(--color-primary);
    opacity: 0.4;
    padding: 4px 5px;
    cursor: pointer;
    transition: opacity 0.15s;
    flex-shrink: 0;
}
.mm_item:hover .cl-info-icon,
.mm_item.active .cl-info-icon {
    opacity: 0.9;
}
.cl-info-icon-white {
    color: #fff;
    opacity: 0.6;
}
.classifica_card_header:hover .cl-info-icon-white {
    opacity: 1;
}

/* Classifica info popover */
.cl_info_popover {
    position: absolute;
    z-index: 9999;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    box-shadow: 0 4px 16px rgba(0,0,0,0.13);
    padding: 10px 14px;
    min-width: 200px;
    max-width: 320px;
    font-size: 12px;
    line-height: 1.6;
}
.cl_pop_gruppo {
    font-size: 12px;
    font-weight: 600;
    color: #1f2937;
    margin-top: 6px;
    border-bottom: 1px solid #f3f4f6;
    padding-bottom: 2px;
}
.cl_pop_gruppo:first-child { margin-top: 0; }
.cl_pop_pista {
    padding-left: 10px;
    color: #374151;
    font-size: 11.5px;
}
.cl_pop_pista i { margin-right: 4px; color: #9ca3af; }
.cl_pop_servizio {
    padding-left: 22px;
    color: #6b7280;
    font-size: 11px;
}
.cl_pop_servizio i { margin-right: 5px; }

.hierarchy-actions {
    display: flex;
    gap: 8px;
    opacity: 0.2;
    transition: opacity 0.2s;
}

.mm_item:hover .hierarchy-actions {
    opacity: 1;
}

.hierarchy-actions i {
    font-size: 0.85rem;
    padding: 4px;
    color: var(--color-text-muted);
}

.hierarchy-actions .btn-edit:hover {
    color: var(--color-primary);
    transform: scale(1.1);
}

.hierarchy-actions .btn-delete:hover {
    color: var(--color-error);
    transform: scale(1.1);
}

.hierarchy-actions .btn-drag-handle {
    cursor: grab;
    color: var(--color-text-muted);
    opacity: 0.5;
}

.hierarchy-actions .btn-drag-handle:hover {
    opacity: 1;
    color: var(--color-primary);
}

/* Icona "tre puntini" sui template (apre il menu azioni) */
.tm_kebab_btn {
    cursor: pointer;
    padding: 4px 6px !important;
    border-radius: 5px;
    transition: background 0.15s;
}
.tm_tpl_child .tm_kebab_btn { color: #fff; }       /* su sfondo blu */
.tm_kebab_btn:hover { background: rgba(0,0,0,0.18); }

/* Menu popup azioni template */
.tm_actions_menu {
    position: absolute;
    z-index: 3000;
    background: #fff;
    border: 1px solid var(--color-border, #d1d5db);
    border-radius: 8px;
    box-shadow: 0 6px 18px rgba(0,0,0,0.16);
    padding: 4px;
    min-width: 140px;
}
.tm_action_item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    border-radius: 6px;
    font-size: 0.85rem;
    color: var(--color-text-dark, #1f2937);
    cursor: pointer;
    transition: background 0.12s;
}
.tm_action_item i { width: 16px; text-align: center; color: var(--color-text-muted, #6b7280); }
.tm_action_item:hover { background: #f1f5f9; }
.tm_action_danger { color: #dc2626; }
.tm_action_danger i { color: #dc2626; }
.tm_action_danger:hover { background: #fef2f2; }
.tm_action_disabled { opacity: 0.4; cursor: not-allowed; pointer-events: none; }

.tm_st_item {
    display: flex;
    flex-direction: column;
    gap: 6px;
    border-radius: 8px !important;
    padding: 10px !important;
    align-items: flex-start !important;
    width: 100%;
    box-sizing: border-box;
    background-color: var(--color-bg-light);
    transition: background-color 0.2s;
}

.tm_st_item:not(.tm_tpl_group):not(.active):hover {
    background-color: #dbeafe;
}

.tm_st_item:not(.tm_tpl_group).active .tm_st_badge {
    background: rgba(255,255,255,0.25);
    color: #fff;
}

.tm_st_item:not(.tm_tpl_group).active .tm_st_child {
    color: rgba(255,255,255,0.85);
}

.tm_st_item:not(.tm_tpl_group).active .tm_origin_dot {
    background: rgba(255,255,255,0.7) !important;
}

/* Solo nei gruppi template il testo è bianco (sfondo colorato) */
.tm_tpl_group {
    color: #fff !important;
}

.tm_tpl_group .tm_st_header {
    color: #fff;
}

.tm_tpl_group .icon-btn {
    color: rgba(255,255,255,0.85) !important;
}

.tm_tpl_group .icon-btn:hover {
    color: #fff !important;
}

/* Sui template (sfondo blu) le azioni restano leggibili e piene all'hover */
.tm_tpl_child .hierarchy-actions { opacity: 0.85; }
.tm_tpl_child:hover .hierarchy-actions { opacity: 1; }

.tm_tpl_child .hierarchy-actions i {
    color: rgba(255,255,255,0.7);
}

.tm_tpl_child .hierarchy-actions i:hover {
    color: #fff;
    transform: scale(1.1);
}

.tm_tpl_child .hierarchy-actions .btn-drag-handle {
    color: rgba(255,255,255,0.5);
}

.tm_tpl_child .hierarchy-actions .btn-drag-handle:hover {
    color: #fff;
    opacity: 1;
}


.tm_st_header {
    display: flex;
    align-items: center;
    gap: 5px;
    font-weight: 600;
    width: 100%;
}

.tm_tpl_group .tm_st_header {
    justify-content: space-between;
}

.tm_st_children {
    display: flex;
    flex-direction: column;
    gap: 3px;
    background: rgba(0,0,0,0.18);
    border-radius: 6px;
    padding: 0 8px;
    margin-top: 0;
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    transition: max-height 0.3s ease, opacity 0.25s ease, padding 0.25s ease, margin-top 0.25s ease;
}

.tm_st_children.tm_st_expanded {
    max-height: 1000px;
    opacity: 1;
    padding: 5px 8px;
    margin-top: 2px;
}

.tm_tpl_children.tm_st_expanded {
    /* Abbastanza alto da contenere tutti i template del gruppo senza tagliarli,
       mantenendo comunque la transizione di apertura/chiusura */
    max-height: 2000px;
    opacity: 1;
    padding: 4px 0 0 0;
    margin-top: 2px;
}

.tm_tpl_children {
    display: flex;
    flex-direction: column;
    gap: 2px;
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    transition: max-height 0.3s ease, opacity 0.25s ease, padding 0.25s ease, margin-top 0.25s ease;
    width: 100%;
}

.tm_st_child {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.76rem;
    color: rgba(255,255,255,0.75);
    line-height: 1.4;
    text-align: left;
}

.mm_item:not(.active) .tm_st_children {
    background: rgba(0,0,0,0.06);
}

.mm_item:not(.active) .tm_st_child {
    color: #4b5563;
}

.tm_tpl_child {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.82rem;
    color: #fff;
    padding: 5px 10px;          /* altezza riga ridotta ~15% (era 7px) */
    border-radius: 6px;
    cursor: pointer;
    transition: filter 0.15s;
    width: 100%;
    box-sizing: border-box;
}

.tm_tpl_child:hover {
    filter: brightness(0.9);
}

.tm_tpl_child_active {
    filter: brightness(0.75);
    color: #fff;
    font-weight: 600;
}

.tm_tpl_child_name {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.tm_st_badge {
    display: inline-block;
    font-size: 10px;
    font-weight: 700;
    color: #fff;
    background: #7c3aed;
    border-radius: 3px;
    padding: 1px 4px;
    margin-right: 5px;
    vertical-align: middle;
    line-height: 1.4;
}

.tm_origin_dot {
    display: inline-block;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    flex-shrink: 0;
}

.tm_dots {
    display: inline-flex;
    gap: 2px;
    align-items: center;
    margin-right: 5px;
    vertical-align: middle;
}

.tm-drag-dragging {
    opacity: 0.4;
}

.tm-drag-over {
    outline: 2px dashed var(--color-primary);
    outline-offset: -2px;
    background: rgba(0, 102, 204, 0.07);
}

.mm_item.active .hierarchy-actions i {
    color: rgba(255,255,255,0.8) !important;
    opacity: 1;
}

.mm_item.active .hierarchy-actions i:hover {
    color: #fff !important;
    transform: scale(1.2);
}

.classifica_config_mini_table .mini_header.no-actions {
    grid-template-columns: 1fr 60px !important;
}

/* ============================================================
   IMPOSTAZIONI — stile uniforme per tutte le colonne/liste
   Riferimento: .mm_item (Gestione Template / Gruppi e Piste)
   ============================================================ */

/* Font size uniforme */
.macro_micro_layout .mm_item,
.macro_micro_layout .mm_item span,
.macro_micro_layout .mm_col_header,
.macro_micro_layout .mm_group_header .group_title,
.macro_micro_layout .mini_row,
.macro_micro_layout .mini_row span,
.macro_micro_layout .mini_header span,
.macro_micro_layout .entity_item span,
.macro_micro_layout .mm_micro_row,
.macro_micro_layout .mm_micro_row span,
.macro_micro_layout .mm_cell_micro,
.macro_micro_layout .mm_item_nested span,
.macro_micro_layout .mm_item_nested .metric-badge {
    font-size: 0.75rem !important;
}

/* mini_row (classifica config, targets inner) → uguale a mm_item */
.macro_micro_layout .mini_row,
.macro_micro_layout .classifica_config_mini_table .mini_row {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 10px !important;
    border-bottom: 1px solid var(--color-border-light) !important;
    background: none !important;
    cursor: default;
}

.macro_micro_layout .mini_row:last-child {
    border-bottom: none !important;
}

.macro_micro_layout .mini_row:hover {
    background-color: var(--color-bg-light) !important;
}

/* Rimuovi header mini_header (già rimosso dal JS, ma pulizia CSS) */
.macro_micro_layout .classifica_config_mini_table .mini_header {
    display: none !important;
}

/* mm_micro_row (servizi in Gruppi/Piste) → stesso look mm_item, no zebra */
.macro_micro_layout .mm_micro_row {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 10px !important;
    border-bottom: 1px solid var(--color-border-light) !important;
    background: none !important;
}

.macro_micro_layout .mm_micro_row:nth-child(odd) {
    background-color: transparent !important;
}

.macro_micro_layout .mm_micro_row:hover {
    background-color: var(--color-bg-light) !important;
}

/* entity_item (operatori/stores in Obiettivi e Template) → stesso look mm_item */
.macro_micro_layout .entity_item {
    padding: 10px !important;
    border-bottom: 1px solid var(--color-border-light) !important;
    background: none !important;
    cursor: default !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
}

.macro_micro_layout .entity_item:hover {
    background-color: var(--color-bg-light) !important;
}

.macro_micro_layout .entity_item .btn-delete {
    color: var(--color-primary) !important;
    opacity: 0.4;
    cursor: pointer;
    flex-shrink: 0;
    transition: opacity 0.15s;
}

.macro_micro_layout .entity_item:hover .btn-delete {
    opacity: 1;
}

/* mm_item_nested dentro macro_micro_layout → stesso look mm_item, no blue span */
.macro_micro_layout .mm_item_nested {
    border-radius: 0 !important;
    background: none !important;
    padding-left: 10px !important;
}

.macro_micro_layout .mm_item_nested span {
    color: inherit !important;
}

.macro_micro_layout .mm_item_nested .metric-badge {
    color: inherit !important;
    opacity: 1;
}

.macro_micro_layout .mm_item_nested.active {
    background-color: #1d4ed8 !important;
    color: #ffffff !important;
}

.macro_micro_layout .mm_item_nested.active span {
    color: #ffffff !important;
}

.macro_micro_layout .mm_item_nested.active .metric-badge {
    color: #ffffff !important;
}

/* --- Responsive Helpers --- */
@media (max-width: 768px) {
    .hidden-mobile {
        display: none !important;
    }

    /* Header riepilogo attivazioni mobile */
    .att_mobile_header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 6px 10px;
        margin-bottom: 8px;
        background: #f1f5f9;
        border-radius: 8px;
        font-size: 11px;
        font-weight: 600;
        color: #374151;
        position: sticky;
        top: 0;
        z-index: 10;
    }

    .att_mobile_header_val {
        color: var(--color-primary, #e60000);
        font-weight: 700;
    }

    /* Attivazioni card mobile: layout grid 2 colonne compatto */
    .body_row.attivazioni_card,
    .att_figlia_row {
        display: grid !important;
        grid-template-columns: 1fr auto !important;
        grid-template-rows: auto auto auto !important;
        flex-direction: unset !important;
        padding: 7px 10px !important;
        margin-bottom: 6px !important;
        gap: 1px 8px !important;
        min-height: auto !important;
        align-items: center !important;
    }

    /* Nascondi label ::before sulle attivazioni card — il layout parla da solo */
    .body_row.attivazioni_card .td::before,
    .att_figlia_row .td::before {
        display: none !important;
    }

    /* Reset td generico per attivazioni */
    .body_row.attivazioni_card .td,
    .att_figlia_row .td {
        width: auto !important;
        padding: 0 !important;
        min-height: 0 !important;
        font-size: 12px !important;
        justify-content: flex-start !important;
        text-align: left !important;
    }

    /* Riga 1 col 1: CLIENTE (bold, grande) */
    .body_row.attivazioni_card .att_col_cliente,
    .att_figlia_row .att_col_cliente {
        grid-column: 1;
        grid-row: 1;
        font-size: 13px !important;
        font-weight: 600;
        color: #111827;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    /* DATA: riga 3 col 2, accanto all'operatore */
    .body_row.attivazioni_card .att_col_data,
    .att_figlia_row .att_col_data {
        grid-column: 2;
        grid-row: 3;
        font-size: 10px !important;
        color: #9ca3af;
        justify-content: flex-end !important;
        text-align: right !important;
        white-space: nowrap;
    }

    /* Riga 2 col 1: SERVIZIO */
    .body_row.attivazioni_card .att_col_servizio,
    .att_figlia_row .att_col_servizio {
        grid-column: 1;
        grid-row: 2;
        font-size: 11px !important;
        color: #374151;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    /* Riga 2 col 2: VALENZA (bold, primario) — span 2 righe, allineato a destra sul bordo */
    .body_row.attivazioni_card .att_col_valenza,
    .att_figlia_row .att_col_valenza {
        grid-column: 2;
        grid-row: 1 / span 2;
        font-size: 13px !important;
        font-weight: 700;
        color: var(--color-primary, #e60000);
        justify-content: flex-end !important;
        align-self: center !important;
        text-align: right !important;
        padding-left: 8px !important;
        white-space: nowrap;
    }

    /* OPERATORE: sotto la riga 2, solo se c'è spazio — riga 3 col 1 */
    .body_row.attivazioni_card .att_col_operatore,
    .att_figlia_row .att_col_operatore {
        grid-column: 1;
        grid-row: 3;
        font-size: 10px !important;
        color: #9ca3af;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    /* === Vendite card mobile layout === */
    .body_row.attivazioni_card.att_doc_header .vnd_col_operatore,
    .body_row.att_figlia_row .vnd_col_operatore {
        display: none !important;
    }

    .body_row.attivazioni_card.att_doc_header .vnd_col_cliente,
    .body_row.att_figlia_row .vnd_col_cliente {
        grid-column: 1;
        grid-row: 1;
        font-size: 13px !important;
        font-weight: 600;
        color: #111827;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .body_row.attivazioni_card.att_doc_header .vnd_col_descrizione,
    .body_row.att_figlia_row .vnd_col_descrizione {
        grid-column: 1;
        grid-row: 2;
        font-size: 11px !important;
        color: #374151;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .body_row.attivazioni_card.att_doc_header .vnd_col_totale,
    .body_row.att_figlia_row .vnd_col_totale {
        grid-column: 2;
        grid-row: 1 / span 2;
        font-size: 13px !important;
        font-weight: 700;
        color: var(--color-primary, #0b66dd);
        justify-content: flex-end !important;
        align-self: center !important;
        text-align: right !important;
        padding-left: 8px !important;
        white-space: nowrap;
    }

    .body_row.attivazioni_card.att_doc_header .vnd_col_magazzino,
    .body_row.att_figlia_row .vnd_col_magazzino {
        grid-column: 1;
        grid-row: 3;
        font-size: 10px !important;
        color: #9ca3af;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .body_row.attivazioni_card.att_doc_header .vnd_col_data,
    .body_row.att_figlia_row .vnd_col_data {
        grid-column: 2;
        grid-row: 3;
        font-size: 10px !important;
        color: #9ca3af;
        justify-content: flex-end !important;
        text-align: right !important;
        white-space: nowrap;
    }

    /* --- Settings & Classifica Config Mobile --- */
    .settings_tabs_container {
        flex-direction: column;
        height: auto;
        padding: 8px 10px;
        gap: 8px;
        align-items: flex-start;
    }

    .settings_tabs_container .ed_tab_bar {
        width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        flex-wrap: nowrap;
    }

    .settings_tab_actions {
        width: 100%;
        justify-content: center;
    }

    .settings_tab_actions button {
        width: 100% !important;
        justify-content: center;
    }

    .macro_micro_layout.classifica_layout {
        grid-template-columns: 1fr !important;
        height: auto !important;
        min-height: 0 !important;
        gap: 15px;
        margin-top: 10px;
        overflow-y: visible !important;
    }

    .classifica_layout .mm_col {
        height: 250px !important;
        padding: 10px;
        flex: none !important;
    }

    .classifica_layout .mm_col_large {
        height: auto !important;
        min-height: 300px;
    }

    /* Modal Classifica Config Mobile */
    .modal_content.modal_large {
        width: 100% !important;
        height: 100% !important;
        max-height: 100vh !important;
        border-radius: 0 !important;
        margin: 0 !important;
    }

    .modal_classifica_4col_layout {
        grid-template-columns: 1fr !important;
        display: flex !important;
        flex-direction: column !important;
        gap: 20px !important;
        overflow-y: visible !important;
    }

    .modal_body_scroll {
        overflow-y: auto !important;
    }

    .modal_classifica_col {
        height: 250px !important;
        flex-shrink: 0;
    }

    .modal_classifica_form {
        height: auto !important;
        flex-shrink: 0;
    }
}

/* Center Nav Items on Desktop */
@media (min-width: 769px) {
    .header_center {
        justify-content: center !important;
    }
}

/* --- Inline Inputs (usati da target_templates) --- */
.modal_list_item_with_inputs {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    padding: 8px;
    border-bottom: 1px solid #f0f0f0;
    gap: 8px;
    transition: background-color 0.2s;
}

.modal_list_item_with_inputs:hover {
    background-color: #f8f9fa;
}

.modal_list_item_with_inputs.active {
    background-color: #e3f2fd;
}

.modal_item_main {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 1;
    min-width: 150px;
    cursor: pointer;
}

.modal_item_inputs {
    display: flex;
    gap: 5px;
    align-items: center;
    margin-left: auto;
}

.ts_inline_input {
    width: 60px;
    padding: 4px;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-size: 0.8rem;
    height: 28px;
}

.ts_inline_input:focus {
    border-color: #0d6efd;
    outline: none;
}

.mc_det_row_clickable {
    cursor: pointer;
    transition: background-color 0.15s ease;
}

.mc_det_row_clickable:hover {
    background: #ecfdf5;
}

.mc_det_row_clickable .mc_det_nome::after {
    content: "  · dettagli attivazioni";
    color: #059669;
    font-size: 11px;
    font-weight: 600;
}

.mc_det_total_row {
    position: sticky;
    bottom: 0;
    background: #ecfdf5;
    border-top: 2px solid #10b981;
    border-bottom: 0;
    font-weight: 700;
}

.ce_config_tag {
    display: inline-flex;
    align-items: center;
    padding: 3px 7px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .2);
    color: #fff;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: .04em;
    white-space: nowrap;
}

.ce_unconfigured_card .classifica_card_header {
    background: #64748b;
}

.ce_card_unconfigured {
    min-height: 116px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 22px;
    color: #64748b;
    text-align: left;
}

.ce_card_unconfigured > i {
    color: #94a3b8;
    font-size: 24px;
}

.ce_card_unconfigured strong,
.ce_card_unconfigured span {
    display: block;
}

.ce_card_unconfigured strong {
    color: #334155;
    margin-bottom: 5px;
}

.ce_card_unconfigured span {
    max-width: 310px;
    font-size: 12px;
    line-height: 1.45;
}

.classifica_pista_price {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-left: auto;
    font-weight: 700;
    color: var(--color-primary);
}

.classifica_pista_price .ts_inline_input {
    width: 78px;
    background: #fff;
}

.modal_item_main .classifica_pista_price span {
    flex: 0 0 auto;
}

.classifica_bulk_price {
    display: grid;
    grid-template-columns: auto minmax(72px, 1fr);
    gap: 6px;
    align-items: center;
    padding: 7px 9px;
    border-bottom: 1px solid var(--color-border-light);
    background: var(--color-bg-gray);
    color: var(--color-primary);
    font-weight: 700;
}

.classifica_bulk_price input {
    min-width: 0;
    height: 30px;
    padding: 4px 7px;
    border: 1px solid var(--color-border-light);
    border-radius: 5px;
    background: #fff;
}

.classifica_bulk_price button {
    grid-column: 1 / -1;
    min-height: 30px;
    border: 1px solid var(--color-primary);
    border-radius: 5px;
    background: #fff;
    color: var(--color-primary);
    font-size: 11px;
    font-weight: 700;
    cursor: pointer;
}

.classifica_bulk_price button:hover {
    background: var(--color-primary);
    color: #fff;
}

/* --- Target Store Modal Checkboxes --- */
.multi_select_container {
    max-height: 200px;
    overflow-y: auto;
    border: 1px solid var(--color-border-light);
    border-radius: 4px;
    padding: 5px;
    background: #fdfdfd;
}

.multi_select_container label,
.modal_list_item_with_inputs .modal_item_main {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    padding: 2px 5px;
    transition: background-color 0.2s;
}

.multi_select_container input[type="checkbox"],
.modal_list_item_with_inputs input[type="checkbox"] {
    width: 14px;
    height: 14px;
    cursor: pointer;
    accent-color: var(--color-primary);
}

.multi_select_container label:hover,
.modal_list_item_with_inputs .modal_item_main:hover {
    background-color: var(--color-bg-gray);
    border-radius: 4px;
}

.multi_select_container span,
.modal_list_item_with_inputs .modal_item_main span {
    font-size: 13px;
    color: var(--color-text-primary);
}

/* Colonne layout a 6 col (target_templates, classifica): riempiono l'altezza fino al padding */
.macro_micro_layout.classifica_layout.ts_6col {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)) !important;
    grid-template-rows: minmax(0, 1fr) !important;
    gap: 10px !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    flex: 1 !important;
}

.table_body>.macro_micro_layout.classifica_layout.ts_6col {
    flex: 1 !important;
    min-height: 0 !important;
}

.macro_micro_layout.classifica_layout.ts_6col .mm_col {
    min-width: 0 !important;
    min-height: 0 !important;
    height: 100% !important;
    flex: 1 !important;
}

.macro_micro_layout.classifica_layout.ts_6col .mm_col_list {
    min-height: 0 !important;
}

/* Composizione template (dettagli macro/pista/servizio) */
.tm_detail_gruppo {
    padding: 4px 0 8px;
    border-bottom: 1px solid var(--color-border-light);
}
.tm_detail_gruppo:last-child { border-bottom: none; }
.tm_detail_macro {
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    color: var(--color-primary);
    padding: 4px 12px 2px;
    letter-spacing: 0.04em;
}
.tm_detail_pista {
    padding: 2px 12px 2px 20px;
    font-size: 0.78rem;
    color: var(--color-text);
}
.tm_detail_pista > span { font-weight: 500; }
.tm_detail_servizio {
    padding: 1px 12px 1px 28px;
    font-size: 0.72rem;
    color: var(--color-text-light);
}

/* Gruppi e Piste (3 colonne) e Config. Classifica (5 colonne): box che riempiono l'altezza */
.table_body:has(>.macro_micro_layout) {
    flex: 1 !important;
    min-height: 0 !important;
    overflow: hidden !important;
    display: flex !important;
    flex-direction: column !important;
}

.table_body>.macro_micro_layout {
    flex: 1 !important;
    min-height: 0 !important;
    height: 100% !important;
}

/* Layout 3 colonne (Gruppi e Piste) */
.table_body>.macro_micro_layout:not(.classifica_layout) {
    grid-template-rows: minmax(0, 1fr) !important;
    height: 100% !important;
    min-height: 0 !important;
}

.table_body>.macro_micro_layout:not(.classifica_layout) .mm_col {
    min-height: 0 !important;
    height: 100% !important;
}

.table_body>.macro_micro_layout:not(.classifica_layout) .mm_col_list {
    min-height: 0 !important;
}

/* Layout 5 colonne (Config. Classifica) */
.table_body>.macro_micro_layout.classifica_layout:not(.ts_6col) {
    grid-template-rows: minmax(0, 1fr) !important;
    height: 100% !important;
    min-height: 0 !important;
}

.table_body>.macro_micro_layout.classifica_layout:not(.ts_6col) .mm_col {
    min-height: 0 !important;
    height: 100% !important;
}

.table_body>.macro_micro_layout.classifica_layout:not(.ts_6col) .mm_col_list {
    min-height: 0 !important;
}

/* Re-enable table header for Report mobile view + layout senza scroll orizzontale */
@media (max-width: 768px) {
    .body_area.report_table_scroll {
        overflow-x: hidden;
    }

    .body_area.report_table_scroll .table_header {
        display: flex !important;
        width: 100% !important;
        min-width: 100% !important;
    }

    .body_area.report_table_scroll .table_body {
        width: 100% !important;
        min-width: 100% !important;
    }

    /* Header e righe allargati a tutta la viewport */
    .body_area.report_table_scroll .report_header_row,
    .body_area.report_table_scroll .report_body_row {
        width: 100% !important;
        min-width: 100% !important;
    }

    /* Colonne pista + unica colonna numerica in percentuale, così non vanno oltre lo schermo */
    .report_th_pista,
    .report_td_pista {
        flex: 0 0 55%;
        min-width: 0;
    }

    .report_th_totale,
    .report_td_totale,
    .report_th_negozio,
    .report_td_negozio {
        flex: 0 0 45%;
        min-width: 0;
    }

    /* In mobile rimuovi la banda verde verticale a sinistra */
    .report_header_row,
    .report_gruppo_row,
    .report_pista_row {
        border-left: none !important;
    }
}

/* ===== Utility classi per stili dinamici JS ===== */

/* Bottone "Importa da altro mese" nella sezione macro_micro */

/* Stato disabilitato per bottoni (opacity) */
.btn-disabled-opacity {
    opacity: 0.5;
}
.btn-not-allowed {
    opacity: 0.5;
    cursor: not-allowed !important;
}

/* Label checkbox modal target */
.modal-target-label {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 4px 8px;
    cursor: pointer;
}

.modal-target-label .cl_suite_new_dot {
    margin-left: auto;
}

.cl_suite_new_dot {
    flex: 0 0 9px;
}

.cl_suite_new_label {
    cursor: pointer;
}

.cl_suite_new_label:hover {
    color: var(--color-primary) !important;
    text-decoration: underline;
}

.cl_path_new_dot {
    margin-left: auto;
    flex: 0 0 9px;
}

.cl_suite_candidate {
    background: #fff7f7;
}

.cl_suite_candidate:hover {
    background: #fee2e2;
}

/* btn-metric active states */
.btn-metric {
    background: #f9f9f9;
    color: #333;
}
.btn-metric.active-pz {
    background: #ff9800;
    color: white;
}
.btn-metric.active-pt {
    background: #4caf50;
    color: white;
}

/* Input disabilitato per esclusività PT/PZ */
input.input-exclusive-disabled {
    background: #e9ecef;
    color: #adb5bd;
}

/* Modal "Seleziona Sorgente Import" */
.modal-close-icon {
    cursor: pointer;
}
.import-modal-body {
    max-height: 450px;
    overflow-y: auto;
    padding: 20px;
}
.import-modal-desc {
    margin-bottom: 20px;
    font-size: 14px;
    color: #4a5568;
    line-height: 1.5;
}
.import_target_list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.import_target_item {
    padding: 14px 18px;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    cursor: pointer;
    transition: border-color 0.2s ease, background 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
    font-weight: 500;
    font-size: 14px;
    background: white;
    box-shadow: 0 1px 2px rgba(0,0,0,0.05);
    display: flex;
    align-items: center;
    gap: 12px;
}
.import_target_item:hover {
    border-color: #0066cc;
    background: #f0f7ff;
    transform: translateY(-1px);
    box-shadow: 0 4px 6px rgba(0,0,0,0.05);
}
.import-target-icon {
    color: #0066cc;
    opacity: 0.7;
}
.import-target-chevron {
    margin-left: auto;
    font-size: 12px;
    opacity: 0.3;
}
.import-target-empty {
    text-align: center;
    padding: 20px;
    color: #718096;
}
.import-modal-footer {
    padding: 15px 20px;
    border-top: 1px solid #edf2f7;
    background: #f8fafc;
    border-bottom-left-radius: 16px;
    border-bottom-right-radius: 16px;
}
.import-modal-cancel {
    width: 100%;
}

/* Stato disabled per obiettivi/bottoni add */
.btn-readonly {
    cursor: not-allowed;
    opacity: 0.3;
}

/* Obiettivi: 4 colonne senza wrap */
.obiettivi-grid-cols {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    grid-template-rows: unset !important;
}


/* ======================================== */
/* === Vendite Bar (Telefoni/Accessori) === */
/* ======================================== */

.operatore_vendite_bar {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
}

.vendite_item {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    font-weight: 600;
    color: var(--color-text-muted);
    white-space: nowrap;
}

.vendite_item i {
    font-size: 13px;
}

.vendite_item.telefoni {
    color: #1a73e8;
}

.vendite_item.accessori {
    color: #e67e22;
}

.vendite_item_clickable {
    cursor: pointer;
    border-radius: 12px;
    padding: 2px 8px;
    transition: background 0.15s, transform 0.1s;
    text-decoration: underline dotted;
    text-underline-offset: 3px;
}

.vendite_item_clickable:hover {
    background: rgba(0,0,0,0.06);
    transform: scale(1.05);
}

.vendite_item_clickable:active {
    transform: scale(0.97);
}

/* === Popup Vendite Store === */

.vendite_store_popup_overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.45);
    z-index: 9000;
    align-items: center;
    justify-content: center;
    padding: 16px;
}

.vendite_store_popup_overlay.active {
    display: flex;
}

.vendite_store_popup {
    background: var(--color-surface, #fff);
    border-radius: 12px;
    box-shadow: 0 8px 40px rgba(0,0,0,0.22);
    width: min(900px, 96vw);
    max-height: 80vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.vendite_store_popup_header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 20px;
    border-bottom: 1px solid var(--color-border, #e0e0e0);
    background: var(--color-surface-alt, #f8f8f8);
    flex-shrink: 0;
}

.vendite_store_popup_title {
    font-size: 15px;
    font-weight: 700;
    color: var(--color-text, #222);
    display: flex;
    align-items: center;
    gap: 8px;
}

.vendite_store_popup_close {
    background: none;
    border: none;
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
    color: var(--color-text-muted, #666);
    padding: 0 4px;
    border-radius: 4px;
    transition: background 0.15s;
}

.vendite_store_popup_close:hover {
    background: rgba(0,0,0,0.08);
}

.vendite_store_popup_body {
    overflow-y: auto;
    padding: 0;
    flex: 1;
}

.vendite_store_popup_loading,
.vendite_store_popup_empty,
.vendite_store_popup_error {
    padding: 32px;
    text-align: center;
    color: var(--color-text-muted, #888);
    font-size: 14px;
}

.vendite_store_popup_error {
    color: #c0392b;
}

.vendite_store_popup_list {
    padding: 8px;
}

/* Colori r-one: data blu scuro, descrizione scura */
.vsp_doc .riepilogo_vnd_data.vsp_data {
    color: #1e3a8a;
    font-weight: 600;
}

/* Griglia tabellare popup vendite store:
   data(80px) | operatore(140px) | dispositivo(1fr) | imei(130px) | codiva(80px) | prezzo(80px) | chevron(20px) */
.vsp_row {
    display: grid;
    grid-template-columns: 80px 140px 1fr 130px 80px 80px 20px;
    align-items: center;
    gap: 0 10px;
    padding: 7px 12px;
    border-bottom: 1px solid #f0f0f0;
    cursor: pointer;
    background: #f9fafb;
    font-size: 0.78rem;
}

.vsp_row:hover { background: #f3f4f6; }

.vsp_figlia {
    background: #fff;
    padding-left: 20px;
}
.vsp_figlia:hover { background: #f9fafb; }

.vsp_col_data {
    color: #1e3a8a;
    font-weight: 600;
    font-size: 0.78rem;
    white-space: nowrap;
}

.vsp_col_op {
    color: #111827;
    font-size: 0.78rem;
    font-weight: 400;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.vsp_col_desc {
    color: #111827;
    font-size: 0.78rem;
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    display: flex;
    align-items: center;
    gap: 4px;
}

.vsp_col_imei {
    font-family: monospace;
    font-size: 0.78rem;
    color: #3730a3;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.vsp_col_codiva {
    font-size: 0.78rem;
    color: #111827;
    white-space: nowrap;
}

.vsp_col_tot {
    text-align: right;
    font-size: 0.78rem;
    font-weight: 600;
    color: #111827;
    white-space: nowrap;
}

.vsp_col_chevron {
    width: 20px;
    color: #9ca3af;
    font-size: 0.7rem;
    text-align: center;
}

.vsp_col_chevron i { transition: transform 0.2s; }

.vsp_header_labels {
    background: #f4f4f5 !important;
    cursor: default !important;
    border-bottom: 2px solid #e5e7eb !important;
    position: sticky;
    top: 0;
    z-index: 1;
}

.vsp_header_labels:hover { background: #f4f4f5 !important; }

.vsp_header_labels > div {
    font-size: 0.7rem;
    font-weight: 700;
    color: #6b7280;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

@media (max-width: 600px) {
    .vendite_store_popup {
        max-height: 90vh;
        border-radius: 8px;
    }
}

/* Popup pratiche reali (drill-down da Report Operatori/Stores), stile DB Explorer */
.pratiche_popup_overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.55);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
    z-index: 9000;
    align-items: center;
    justify-content: center;
    padding: 16px;
}

.pratiche_popup_overlay.active {
    display: flex;
    animation: pp_overlay_in 0.18s ease;
}

@keyframes pp_overlay_in {
    from { opacity: 0; }
    to   { opacity: 1; }
}

.pratiche_popup {
    background: #fff;
    border-radius: var(--radius-md, 14px);
    border: 2px solid var(--color-primary);
    box-shadow: 0 24px 60px -12px rgba(11, 102, 221, 0.35), 0 0 0 4px rgba(11, 102, 221, 0.08);
    width: min(1600px, 96vw);
    max-height: 92vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    animation: pp_popup_in 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes pp_popup_in {
    from { opacity: 0; transform: translateY(12px) scale(0.98); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}

.pratiche_popup_header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 15px 20px;
    background: linear-gradient(180deg, #f8fafc 0%, #ffffff 100%);
    border-bottom: 1px solid var(--color-border-light);
    flex-shrink: 0;
    position: relative;
}

.pratiche_popup_title {
    font-size: 0.9rem;
    font-weight: 700;
    text-transform: uppercase;
    color: var(--color-text-darker, #111827);
    letter-spacing: 0.04em;
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

.pratiche_popup_title .pratiche_popup_count {
    flex-shrink: 0;
    font-weight: 700;
    font-size: 0.72rem;
    text-transform: none;
    color: var(--color-primary);
    background: rgba(11, 102, 221, 0.1);
    letter-spacing: normal;
    padding: 2px 9px;
    border-radius: var(--radius-full, 999px);
    line-height: 1.4;
}

.pratiche_popup_close {
    background: none;
    border: none;
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
    color: var(--color-text-muted);
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-full, 999px);
    transition: background 0.15s, color 0.15s;
    flex-shrink: 0;
}

.pratiche_popup_close:hover {
    background: rgba(15, 23, 42, 0.08);
    color: var(--color-text-darker, #111827);
}

.pratiche_popup_body {
    overflow: auto;
    flex: 1;
    padding: 0;
}

/* ---- Tabella pratiche del popup ---- */
.pratiche_popup_table {
    border-collapse: separate;
    border-spacing: 0;
    width: 100%;
    font-size: 0.82rem;
    color: var(--color-text-dark, #1f2937);
}

.pratiche_popup_table th {
    position: sticky;
    top: 0;
    z-index: 1;
    background: #f8fafc;
    text-align: left;
    font-weight: 600;
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--color-text-muted);
    padding: 11px 16px;
    border-bottom: 1px solid var(--color-border-light);
    white-space: nowrap;
}

.pratiche_popup_table td {
    padding: 11px 16px;
    border-bottom: 1px solid #f1f5f9;
    white-space: nowrap;
    vertical-align: middle;
}

.pratiche_popup_table tbody tr {
    transition: background 0.12s;
}

.pratiche_popup_table tbody tr:nth-child(even) {
    background: #fbfcfe;
}

.pratiche_popup_table tbody tr:hover {
    background: rgba(11, 102, 221, 0.06);
}

.pratiche_popup_table tbody tr:last-child td {
    border-bottom: none;
}

/* Colonna numerica (Valenza) */
.pratiche_popup_table td.pp_cell_num,
.pratiche_popup_table th.pp_cell_num {
    text-align: right;
    font-variant-numeric: tabular-nums;
    font-weight: 600;
    color: var(--color-text-darker, #111827);
}

/* Badge di stato */
.pp_badge {
    display: inline-block;
    padding: 3px 10px;
    border-radius: var(--radius-full, 999px);
    font-size: 0.68rem;
    font-weight: 600;
    line-height: 1.5;
    white-space: nowrap;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    border: 1px solid transparent;
}

.pp_badge.is-warn {
    background: #fef3c7;
    color: #92400e;
    border-color: #fde68a;
}

.pp_badge.is-danger {
    background: #fee2e2;
    color: #991b1b;
    border-color: #fecaca;
}

.pp_badge.is-ok {
    background: #d1fae5;
    color: #065f46;
    border-color: #a7f3d0;
}

.pp_badge.is-neutral {
    background: #f1f5f9;
    color: #475569;
    border-color: #e2e8f0;
}

/* ---- Colonna azione (occhietto dettaglio riga) ---- */
.pratiche_popup_table th.pp_cell_action,
.pratiche_popup_table td.pp_cell_action {
    width: 44px;
    text-align: center;
    padding-left: 6px;
    padding-right: 12px;
}

.pp_row_detail_btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border: 1px solid var(--color-border-light);
    border-radius: var(--radius-sm, 6px);
    background: #fff;
    color: var(--color-primary);
    cursor: pointer;
    font-size: 0.82rem;
    transition: background 0.15s, border-color 0.15s, color 0.15s;
}

.pp_row_detail_btn:hover {
    background: var(--color-primary);
    border-color: var(--color-primary);
    color: #fff;
}

/* ---- Popup di dettaglio riga (key/value) ---- */
.pratiche_detail_overlay {
    z-index: 9100; /* sopra il popup elenco */
}

.pratiche_detail_popup {
    width: min(560px, 94vw);
}

.pratiche_detail_popup .pratiche_popup_title {
    text-transform: none;
    letter-spacing: normal;
}

.pp_detail_grid {
    padding: 8px 0;
}

.pp_detail_row {
    display: grid;
    grid-template-columns: 40% 60%;
    gap: 12px;
    padding: 9px 20px;
    border-bottom: 1px solid #f1f5f9;
}

.pp_detail_row:last-child {
    border-bottom: none;
}

.pp_detail_row:nth-child(even) {
    background: #fbfcfe;
}

.pp_detail_key {
    font-size: 0.72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--color-text-muted);
    align-self: center;
}

.pp_detail_val {
    font-size: 0.85rem;
    color: var(--color-text-dark, #1f2937);
    word-break: break-word;
}

.pp_detail_val.is-empty {
    color: #cbd5e1;
}

@media (max-width: 640px) {
    .pratiche_popup_table th,
    .pratiche_popup_table td {
        padding: 9px 12px;
    }
    .pratiche_popup_title {
        font-size: 0.8rem;
    }
    .pp_detail_row {
        grid-template-columns: 1fr;
        gap: 2px;
    }
}


/* ======================================== */
/* TARGETS INNER STYLES                     */
/* ======================================== */

.ti_layout {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 0;
}

.ti_main_area {
    display: flex;
    flex: 1;
    min-height: 0;
    gap: 0;
    overflow: hidden;
}

.ti_table_col {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-width: 0;
    gap: 12px;
    padding: 4px;
    overflow-y: auto;
}

.ti_side_panel {
    width: 320px;
    flex-shrink: 0;
    border-left: 1px solid var(--color-border);
    background: var(--color-bg-white, #fff);
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    transition: width 0.2s ease;
}

.ti_side_panel.hidden {
    width: 0;
    overflow: hidden;
    border-left: none;
}

.ti_panel_header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 16px;
    border-bottom: 1px solid var(--color-border);
    position: sticky;
    top: 0;
    background: var(--color-bg-white, #fff);
    z-index: 1;
}

.ti_panel_title {
    font-weight: 600;
    font-size: 14px;
}

.ti_panel_close {
    background: none;
    border: none;
    cursor: pointer;
    font-size: 15px;
    color: var(--color-text-muted);
    padding: 4px;
    border-radius: 4px;
    line-height: 1;
}

.ti_panel_close:hover { color: var(--color-danger); }

.ti_panel_body {
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 14px;
    flex: 1;
}

.ti_panel_footer {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    padding-top: 16px;
    border-top: 1px solid var(--color-border);
    margin-top: auto;
}

.ti_toolbar {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

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

.ti_actions {
    display: flex;
    gap: 8px;
}

.ti_input {
    padding: 6px 10px;
    border: 1px solid var(--color-border);
    border-radius: 6px;
    background: var(--color-bg-input);
    color: var(--color-text);
    font-size: 13px;
    min-width: 140px;
}

.ti_input:focus {
    outline: none;
    border-color: var(--color-accent);
}

.ti_table_wrap {
    overflow-x: auto;
    border-radius: 8px;
    border: 1px solid var(--color-border);
}

.ti_table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}

.ti_table thead tr {
    background: var(--color-bg-table-header);
}

.ti_table th {
    padding: 10px 12px;
    text-align: left;
    font-weight: 600;
    color: var(--color-text-muted);
    white-space: nowrap;
    border-bottom: 1px solid var(--color-border);
}

.ti_th_actions {
    text-align: center !important;
    width: 80px;
}

.ti_table tbody tr:hover {
    background: var(--color-bg-hover);
}

.ti_table td {
    padding: 8px 12px;
    border-bottom: 1px solid var(--color-border-light);
    vertical-align: middle;
}

.ti_td_actions {
    text-align: center;
    white-space: nowrap;
}

.ti_btn_edit,
.ti_btn_delete {
    background: none;
    border: none;
    cursor: pointer;
    padding: 4px 6px;
    border-radius: 4px;
    font-size: 13px;
    transition: background 0.15s;
}

.ti_btn_edit { color: var(--color-accent); }
.ti_btn_edit:hover { background: var(--color-accent-alpha); }
.ti_btn_delete { color: var(--color-danger); }
.ti_btn_delete:hover { background: var(--color-danger-alpha); }

.ti_loading,
.ti_empty { text-align: center; padding: 32px; color: var(--color-text-muted); }
.ti_error  { text-align: center; padding: 32px; color: var(--color-danger); }

.ti_pagination {
    display: flex;
    align-items: center;
    gap: 8px;
    justify-content: flex-end;
    padding: 4px 0;
}

.ti_page_info { font-size: 13px; color: var(--color-text-muted); }

.ti_page_btn {
    background: var(--color-bg-input);
    border: 1px solid var(--color-border);
    border-radius: 6px;
    padding: 4px 10px;
    cursor: pointer;
    color: var(--color-text);
    font-size: 13px;
}

.ti_page_btn:disabled { opacity: 0.4; cursor: default; }

/* Form grid inside panel */
.ti_form_grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
}

.ti_form_grid label {
    display: flex;
    flex-direction: column;
    gap: 5px;
    font-size: 13px;
    color: var(--color-text-muted);
    font-weight: 500;
}

.ti_form_grid label .ti_input {
    width: 100%;
    box-sizing: border-box;
    min-width: unset;
}

/* CSV import */
.ti_csv_info {
    font-size: 13px;
    color: var(--color-text-muted);
    line-height: 1.6;
    margin: 0;
}

.ti_csv_info code {
    background: var(--color-bg-code, #f0f0f0);
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 12px;
    color: var(--color-accent);
}

.ti_csv_upload_area {
    border: 2px dashed var(--color-border);
    border-radius: 10px;
    padding: 28px 16px;
    text-align: center;
    transition: border-color 0.2s, background 0.2s;
    color: var(--color-text-muted);
    font-size: 14px;
}

.ti_csv_upload_area p { margin: 8px 0; }

.ti_csv_upload_area.drag_over {
    border-color: var(--color-accent);
    background: var(--color-accent-alpha, rgba(0,100,255,0.05));
}

.ti_csv_icon {
    font-size: 32px;
    display: block;
    margin-bottom: 6px;
    color: var(--color-accent);
}

.ti_csv_stats {
    padding: 8px 12px;
    background: #e8f5e9;
    border-radius: 6px;
    color: #2e7d32;
    font-size: 13px;
    font-weight: 600;
}

.ti_csv_errors {
    font-size: 12px;
    color: #f57c00;
}

.ti_csv_errors ul { margin: 4px 0 0 16px; padding: 0; }

/* =============================================
   ELABORAZIONE PRODUZIONE
   ============================================= */
.ep_tipo_toggle { position: relative; display: flex; align-items: center; background: #e9ecef; border-radius: 999px; padding: 3px; cursor: pointer; width: 150px; user-select: none; }
.ep_tipo_pill { position: absolute; top: 3px; bottom: 3px; width: calc(50% - 3px); border-radius: 999px; background: #1a1a1a; transition: transform .25s cubic-bezier(.4,0,.2,1); transform: translateX(0); pointer-events: none; }
.ep_tipo_toggle[data-active="0"] .ep_tipo_pill { transform: translateX(calc(100% + 0px)); }
.ep_tipo_label { position: relative; flex: 1; text-align: center; font-size: 12px; font-weight: 600; padding: 5px 0; border-radius: 999px; transition: color .2s; color: #888; z-index: 1; }
.ep_tipo_toggle[data-active="1"] .ep_tipo_label[data-val="1"],
.ep_tipo_toggle[data-active="0"] .ep_tipo_label[data-val="0"] { color: #fff; }

.ep_table_header { background: var(--color-primary); color: #fff; font-weight: 600; font-size: 12px; position: sticky; top: 0; z-index: 1; }
.ep_td { flex: 1; min-width: 90px; padding: 6px 8px; font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ep_td_narrow { flex: 0 0 80px; min-width: 60px; }
.ep_td_num { flex: 0 0 100px; min-width: 80px; text-align: right; font-variant-numeric: tabular-nums; }
.ep_row:nth-child(even) { background: var(--color-row-alt, #f8f9fa); }
.ep_row:hover { background: var(--color-row-hover, #e8f0fb); }
.ep_badge { display: inline-block; padding: 1px 7px; border-radius: 10px; font-size: 11px; font-weight: 600; }
.ep_badge_gruppo { background: #e3f2fd; color: #1565c0; }
.ep_badge_singolo { background: #f3e5f5; color: #6a1b9a; }
.ep_footer { padding: 8px 12px; font-size: 13px; color: #555; border-top: 1px solid var(--color-border); text-align: right; }

@media (max-width: 768px) {
    .ti_main_area { flex-direction: column; }
    .ti_side_panel {
        width: 100% !important;
        border-left: none;
        border-top: 1px solid var(--color-border);
    }
    .ti_side_panel.hidden { width: 0 !important; height: 0; border-top: none; }
    .ti_toolbar { flex-direction: column; align-items: stretch; }
    .ti_filters { flex-direction: column; }
    .ti_input { width: 100%; min-width: unset; }
    .ti_actions { justify-content: flex-end; }
    .ti_form_grid { grid-template-columns: 1fr; }
}

/* ===== ELABORAZIONE PRODUZIONE - layout 3 colonne ===== */
.ep_piste_header,
.ep_piste_row,
.ep_drill_header,
.ep_drill_row {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1fr 1fr;
    align-items: center;
    padding: 7px 10px;
    font-size: 0.82rem;
    gap: 4px;
}

.ep_piste_header {
    font-weight: 600;
    text-transform: uppercase;
    background-color: #1d4ed8;
    color: #fff;
    font-size: 0.72rem;
    border-radius: 4px 4px 0 0;
}

.ep_piste_header span:not(:first-child),
.ep_drill_header span:not(:first-child) {
    text-align: right;
}

.ep_piste_row:nth-child(odd) {
    background-color: #f9fafb;
}

.ep_piste_row span,
.ep_drill_row span {
    font-weight: 400;
}

.ep_piste_row span:not(:first-child),
.ep_drill_row span:not(:first-child) {
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.ep_piste_clickable {
    cursor: pointer;
    transition: background 0.15s;
}

.ep_piste_clickable:hover {
    background-color: #e5f3ff !important;
}

.ep_piste_clickable.active {
    background-color: #dbeafe !important;
    font-weight: 600;
}

.ep_piste_total {
    border-top: 2px solid var(--color-border-light);
    background-color: #f0f4ff;
}

.ep_piste_total span {
    font-weight: 700;
}

/* Drill-down singolo */
.ep_drill_block {
    border-left: 3px solid #1d4ed8;
    margin: 0 0 4px 12px;
    background: #f8faff;
}

.ep_drill_header {
    font-weight: 600;
    text-transform: uppercase;
    color: #1d4ed8;
    font-size: 0.7rem;
    border-bottom: 1px solid #dbeafe;
    background: #eff6ff;
}

.ep_drill_row:nth-child(odd) {
    background-color: #f0f6ff;
}

.ep_drill_row:hover {
    background-color: #dbeafe;
}

.ep_layout.macro_micro_layout {
    grid-template-columns: 1fr 1fr 2fr;
}

@media (max-width: 768px) {
    .ep_layout.macro_micro_layout {
        grid-template-columns: 1fr;
    }
}

.ep_gruppo_row {
    cursor: pointer;
}

.ep_gruppo_row .ep_expand_icon {
    display: inline-block;
    margin-right: 6px;
    transition: transform 0.2s;
    color: #6b7280;
    font-size: 0.7rem;
}

.ep_gruppo_row.expanded .ep_expand_icon {
    transform: rotate(90deg);
}

.ep_singoli_block {
    border-left: 3px solid #93c5fd;
    margin: 0 0 2px 8px;
    background: #f0f6ff;
}

.ep_singoli_header {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1fr 1fr;
    align-items: center;
    padding: 5px 10px;
    font-size: 0.68rem;
    font-weight: 600;
    text-transform: uppercase;
    color: #1d4ed8;
    background: #eff6ff;
    border-bottom: 1px solid #bfdbfe;
    gap: 4px;
}

.ep_singoli_header span:not(:first-child) {
    text-align: right;
}

.ep_singolo_row {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1fr 1fr;
    align-items: center;
    padding: 6px 10px;
    font-size: 0.8rem;
    gap: 4px;
}

.ep_singolo_row:nth-child(odd) {
    background: #f8faff;
}

.ep_singolo_row span:not(:first-child) {
    text-align: right;
    font-variant-numeric: tabular-nums;
}

/* =========================================
   SISTEMA BOTTONI UNIFICATO
   ========================================= */

.btn {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    border: none;
    border-radius: 10px;
    cursor: pointer;
    font-weight: 600;
    font-size: 13px;
    padding: 8px 18px;
    line-height: 1;
    transition: background 0.18s, box-shadow 0.18s, opacity 0.18s, transform 0.12s;
    white-space: nowrap;
    text-decoration: none;
    box-sizing: border-box;
}

.btn:disabled,
.btn.disabled {
    opacity: 0.45;
    cursor: not-allowed;
    pointer-events: none;
}

.btn-primary {
    background: var(--color-primary);
    color: #fff;
}
.btn-primary:hover {
    background: var(--color-primary-hover);
}

.btn-success {
    background: #16a34a;
    color: #fff;
}
.btn-success:hover {
    background: #15803d;
}

.btn-danger {
    background: #dc2626;
    color: #fff;
    box-shadow: 0 2px 6px rgba(220, 38, 38, 0.25);
}
.btn-danger:hover {
    background: #b91c1c;
    box-shadow: 0 4px 10px rgba(220, 38, 38, 0.35);
}

.btn-ghost {
    background: transparent;
    color: var(--color-primary);
    border: 1.5px solid var(--color-primary);
}
.btn-ghost:hover {
    background: rgba(0, 102, 204, 0.06);
}

.btn-neutral {
    background: #f1f5f9;
    color: #374151;
    border: 1px solid #e2e8f0;
}
.btn-neutral:hover {
    background: #e2e8f0;
}

.btn-sm {
    font-size: 11px;
    padding: 5px 12px;
}

.btn-xs {
    font-size: 10px;
    padding: 3px 9px;
}

.btn-mr-8 {
    margin-right: 8px;
}
.btn-ml-auto {
    margin-left: auto;
}
.btn-full {
    width: 100%;
    justify-content: center;
}
.btn-flex1 {
    flex: 1;
    justify-content: center;
}

/* Bottoni icona inline (edit/delete/clone nelle liste) */
.btn-inline {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 13px;
    padding: 4px;
    border-radius: 5px;
    color: #9ca3af;
    background: transparent;
    border: none;
    transition: color 0.15s, background 0.15s;
    line-height: 1;
}
.btn-inline:hover {
    background: rgba(0, 0, 0, 0.05);
}
.btn-inline-edit:hover {
    color: var(--color-primary);
}
.btn-inline-delete:hover {
    color: #dc2626;
}
.btn-inline-clone:hover {
    color: #7c3aed;
}
.btn-inline-add:hover {
    color: #16a34a;
}

/* Bottone + colonna (add new item in column header) */
.btn-add-col {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--color-primary);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    cursor: pointer;
    opacity: 0.6;
    border: none;
    transition: opacity 0.15s;
}
.btn-add-col:hover {
    opacity: 1;
}

/* Badge counter nel modal header */
.modal_counter_badge {
    background: #e0e7ef;
    color: #374151;
    padding: 3px 12px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
    margin-left: auto;
    margin-right: 8px;
}

/* Bottone + piccolo nelle colonne assegnazione */
.btn_add_small {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--color-primary);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    cursor: pointer;
    opacity: 0.6;
    transition: opacity 0.15s;
}
.btn_add_small:hover {
    opacity: 1;
}

/* ========================================= */
/* === R-ONE LAYOUT                      === */
/* ========================================= */

.rone_wrapper {
    display: grid;
    grid-template-columns: 2fr 3fr;
    gap: 12px;
    width: 100%;
    height: 100%;
    min-height: 400px;
}

.rone_half {
    display: flex;
    flex-direction: column;
    gap: 10px;
    overflow: hidden;
    min-height: 0;
}

.rone_half:first-child {
    flex-direction: row;
}

.rone_rank_panel {
    flex: 1;
    min-width: 0;
    min-height: 0;
    background: #fff;
    border: 1px solid var(--bottone-border);
    border-radius: 10px;
    box-shadow: var(--bottone-shadow-card);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.rone_rank_title {
    padding: 10px 14px;
    font-size: 1rem;
    font-weight: 700;
    color: var(--bottone-green-dark);
    background: #fff;
    border-bottom: 1px solid var(--bottone-border);
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.rone_rank_title > span {
    display: flex;
    align-items: center;
    gap: 8px;
}

.rone_rank_title i {
    color: var(--bottone-green);
}

.rone_toggle_small {
    transform: scale(0.8);
    transform-origin: right center;
}


.rone_rank_body {
    flex: 1;
    overflow: hidden;
    padding: 4px 0;
    min-height: 0;
    display: flex;
    flex-direction: column;
}

.rone_rank_body > .rone_table_scroll {
    flex: 1;
    min-height: 0;
    min-width: 0;
}

/* Tabella classifica: stesso pattern della tabella pratiche (solo tbody scrollabile) */
.rone_rank_table {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    border-collapse: collapse;
    font-size: 11px;
    table-layout: fixed;
}

/* Padding incluso nelle % colonne: evita overflow oltre il 100% della tabella */
.rone_rank_table th,
.rone_rank_table td {
    box-sizing: border-box;
}

.rone_rank_table thead th {
    padding: 6px 10px;
    background: var(--bottone-green-light);
    border: 1px solid var(--bottone-border);
    font-size: 12px;
    font-weight: 600;
    color: var(--bottone-green-dark);
    text-align: left;
    position: static;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    vertical-align: middle;
    min-width: 0;
}

/* Stesse proporzioni e padding orizzontale delle celle sotto (58/42) */
.rone_rank_table thead th:nth-child(2) {
    font-size: 10px;
}

/* 58% / 42%: colonna PZ+€ ~+30% rispetto al precedente 32% (somma 100%) */
.rone_rank_table col:nth-child(1) { width: 58%; }
.rone_rank_table col:nth-child(2) { width: 42%; }

.rone_rank_table thead th:nth-child(1),
.rone_rank_table tbody td:nth-child(1) {
    width: 58%;
    padding: 6px 10px;
}
.rone_rank_table thead th:nth-child(2),
.rone_rank_table tbody td:nth-child(2) {
    width: 42%;
    min-width: 0;
    text-align: left;
    padding: 6px 10px;
}

.rone_rank_table tbody td { border: 1px solid var(--bottone-border); }
.rone_rank_table tbody tr { cursor: pointer; transition: background 0.15s; }
.rone_rank_table tbody tr:hover td { background: #f8fafc; }
.rone_rank_table tbody tr:active td { background: var(--color-border-light, #e8e8e8); }
.rone_rank_table tbody tr.rone_rank_active td { background: #e0edff; }
.rone_rank_table tbody tr.rone_rank_active:hover td { background: #d0e0f8; }

.rone_rank_td_name {
    font-weight: 500;
    color: var(--color-text-primary, #111827);
    white-space: normal;
    word-break: break-word;
    overflow-wrap: anywhere;
    vertical-align: top;
    overflow: visible;
}

.rone_rank_td_stats {
    text-align: left;
    font-weight: 600;
    color: var(--color-text-primary, #111827);
    vertical-align: middle;
}

/* Stesso verde / bordo / raggio del pulsante Impostazioni (.settings_btn_desktop) */
.rone_rank_badge_combo {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    flex-wrap: wrap;
    gap: 4px 6px;
    width: 100%;
    min-width: 0;
    max-width: 100%;
    box-sizing: border-box;
    padding: 4px 10px;
    border-radius: 8px;
    border: 1px solid #bbf7d0;
    background: #ecfdf3;
    line-height: 1.25;
}

.rone_rank_badge_pz {
    font-weight: 700;
    color: var(--color-text-primary, #111827);
    white-space: nowrap;
}

.rone_rank_badge_sep {
    color: var(--color-text-muted, #6b7280);
    font-weight: 600;
    user-select: none;
}

.rone_rank_badge_val {
    font-weight: 700;
    color: #16a34a;
    white-space: nowrap;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
}

.rone_rank_pos {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--color-bg-light, #f3f4f6);
    font-size: 10px;
    font-weight: 700;
    color: var(--color-text-secondary, #6b7280);
    margin-right: 6px;
    flex-shrink: 0;
}

.rone_rank_table tbody tr:nth-child(1) .rone_rank_pos { background: #fef3c7; color: #a16207; }
.rone_rank_table tbody tr:nth-child(2) .rone_rank_pos { background: #e5e7eb; color: #374151; }
.rone_rank_table tbody tr:nth-child(3) .rone_rank_pos { background: #fed7aa; color: #9a3412; }

/* Main area (tabella) */
.rone_main {
    flex: 1;
    display: flex;
    flex-direction: column;
    background: #fff;
    border: 1px solid var(--bottone-border);
    border-radius: 10px;
    box-shadow: var(--bottone-shadow-card);
    overflow: hidden;
}

.rone_tabs_bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 16px;
    background: #fff;
    border-bottom: 1px solid var(--bottone-border);
    gap: 12px;
}

.rone_table_title {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    min-width: 0;
    font-size: 1rem;
    font-weight: 700;
    color: var(--bottone-green-dark);
}

.rone_title_summary {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    min-width: 0;
    font-weight: 500;
}

.rone_count {
    font-size: 12px;
    color: var(--color-text-muted, #6b7280);
    font-weight: 500;
}

/* Badge riepilogo tab Liberi/Venduti (stesso stile di .settings_btn_desktop) */
.rone_header_badges_wrap {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

.rone_header_badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    box-sizing: border-box;
    padding: 4px 10px;
    border-radius: 8px;
    border: 1px solid #bbf7d0;
    background: #ecfdf3;
    font-size: 12px;
    line-height: 1.25;
}

.rone_header_badge_label {
    font-weight: 600;
    color: var(--color-text-muted, #6b7280);
    white-space: nowrap;
}

.rone_header_badge_val {
    font-weight: 700;
    color: #16a34a;
    white-space: nowrap;
}

.rone_header_badge_costo {
    border-color: #fecaca;
    background: #fef2f2;
}

.rone_header_badge_costo .rone_header_badge_val {
    color: #dc2626;
}

.rone_panel_body {
    flex: 1;
    overflow: hidden;
    min-height: 0;
}

.rone_table_scroll {
    height: 100%;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    overflow: hidden;
    overflow-x: hidden;
}


/* Table */
.rone_table {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    border-collapse: collapse;
    font-size: 12px;
    table-layout: fixed;
    display: flex;
    flex-direction: column;
    height: 100%;
}

.rone_table thead {
    display: table;
    width: 100%;
    table-layout: fixed;
    flex-shrink: 0;
    padding-right: 0;
    box-sizing: border-box;
    background: var(--bottone-green-light);
}

/* Solo quando il tbody ha scrollbar verticale: JS imposta --rone-scrollbar-w = offsetWidth - clientWidth */
.rone_table.rone_has_scrollbar thead {
    padding-right: var(--rone-scrollbar-w, 0px);
}

.rone_table tbody {
    display: block;
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    scrollbar-width: thin;
}

.rone_table tbody::-webkit-scrollbar { width: 8px; }
.rone_table tbody::-webkit-scrollbar-track { background: transparent; }
.rone_table tbody::-webkit-scrollbar-thumb { background: #d1d5db; border-radius: 4px; }
.rone_table tbody::-webkit-scrollbar-thumb:hover { background: #9ca3af; }

.rone_table tbody tr {
    display: table;
    width: 100%;
    table-layout: fixed;
}

/* Colonne R-One: larghezze anche in colgroup (_rone.js); qui solo min per GG */
.rone_c_data { width: 11%; }
.rone_c_magop { width: 25%; }
.rone_c_desc { width: 34%; }
.rone_c_gg { width: 10%; min-width: 3rem; }
.rone_c_prezzi { width: 20%; }

.rone_table th {
    padding: 8px 10px;
    background: var(--bottone-green-light);
    border: 1px solid var(--bottone-border);
    text-align: left;
    font-weight: 600;
    font-size: 12px;
    color: var(--bottone-green-dark);
    white-space: nowrap;
}

/* Colonna GG: allineamento a sinistra come le altre */
.rone_table thead th.rone_c_gg {
    text-align: left;
}

.rone_table td {
    padding: 6px 10px;
    border: 1px solid var(--bottone-border);
    color: var(--color-text-primary, #111827);
    overflow: hidden;
}

.rone_table td.rone_td_permanenza {
    overflow: visible;
}


.rone_table tbody tr { cursor: pointer; }
.rone_table tbody tr:hover td { background: #f8fafc; }

/* Cell stacks */
.rone_cell_stack { display: flex; flex-direction: column; gap: 1px; line-height: 1.3; }
.rone_cell_stack .rone_desc { font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rone_cell_stack .rone_operatore { font-size: 12px; color: var(--color-text-secondary, #4b5563); font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rone_cell_stack .rone_imei_row { font-size: 12px; color: var(--color-text-secondary, #4b5563); font-family: monospace; font-weight: 500; display: flex; align-items: center; gap: 6px; overflow: hidden; white-space: nowrap; }
.rone_imei_text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }

.rone_copy_btn { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border: 1px solid var(--color-border, #e5e7eb); border-radius: 4px; background: white; cursor: pointer; color: var(--color-text-muted, #6b7280); font-size: 11px; flex-shrink: 0; transition: all 0.15s; padding: 0; }
.rone_copy_btn:hover { background: #ecfdf3; border-color: #bbf7d0; color: #16a34a; }

/* Permanenza (GG): non usare width: 1% — collassava la colonna rispetto a .rone_c_gg */
.rone_td_permanenza {
    text-align: left;
    font-weight: 600;
    font-size: 12px;
    color: var(--color-text-secondary, #4b5563);
    white-space: nowrap;
}

/* Prezzi liberi */
.rone_prezzi_stack { display: flex; flex-direction: column; align-items: flex-start; gap: 3px; }
.rone_badge_costo { font-weight: 700; font-size: 12px; color: #a16207; white-space: nowrap; }
.rone_badge_prezzo { font-weight: 700; font-size: 12px; color: #16a34a; white-space: nowrap; }

/* Prezzi venduti */
.rone_prezzi_venduti { display: flex; align-items: center; justify-content: flex-start; gap: 10px; }
.rone_prezzi_col { display: flex; flex-direction: column; align-items: flex-start; gap: 1px; line-height: 1.3; }
.rone_prezzo_label { font-size: 11px; color: var(--color-text-muted, #6b7280); white-space: nowrap; }
.rone_prezzo_label b { color: var(--color-text-primary, #111827); }

/* Margine badge */
.rone_margine { display: inline-block; padding: 2px 8px; border-radius: 6px; font-weight: 700; font-size: 12px; white-space: nowrap; letter-spacing: 0.3px; }
.rone_margine_pos { background: #ecfdf3; border: 1px solid #bbf7d0; color: #16a34a; }
.rone_margine_neg { background: #fef2f2; border: 1px solid #fecaca; color: #dc2626; }

/* Toast */
.rone_toast { position: fixed; bottom: 30px; left: 50%; transform: translateX(-50%) translateY(20px); background: #16a34a; color: white; padding: 10px 24px; border-radius: 8px; font-size: 13px; font-weight: 600; box-shadow: 0 4px 12px rgba(0,0,0,0.15); opacity: 0; pointer-events: none; transition: opacity 0.25s, transform 0.25s; z-index: 9999; }
.rone_toast.visible { opacity: 1; transform: translateX(-50%) translateY(0); }

/* Toast notifiche globale (showToast/showError/showSuccess/showInfo) */
.app_toast {
    position: fixed; bottom: 30px; left: 50%;
    transform: translateX(-50%) translateY(20px);
    color: #fff; padding: 12px 26px; border-radius: 8px;
    font-size: 13px; font-weight: 600; max-width: min(90vw, 480px);
    box-shadow: 0 4px 14px rgba(0,0,0,0.18);
    opacity: 0; pointer-events: none;
    transition: opacity 0.25s, transform 0.25s; z-index: 10000;
    text-align: center;
}
.app_toast.visible { opacity: 1; transform: translateX(-50%) translateY(0); }
.app_toast_success { background: #16a34a; }
.app_toast_error   { background: #dc2626; }
.app_toast_info    { background: #2563eb; }

/* Input con X */
.rone_input_wrap { position: relative; display: flex; align-items: center; }
.rone_input_wrap .filtro_input { padding-right: 28px; width: 100%; }
.rone_input_clear { position: absolute; right: 6px; display: flex; align-items: center; justify-content: center; width: 20px; height: 20px; border: none; background: none; cursor: pointer; color: var(--color-text-muted, #6b7280); font-size: 13px; border-radius: 50%; padding: 0; }
.rone_input_clear:hover { color: #be123c; background: #fff1f2; }
#filter_rone_descrizione::-webkit-calendar-picker-indicator { display: none !important; }

/* Range permanenza */
.rone_range_row { display: flex; align-items: center; gap: 6px; }
.rone_range_row .rone_input_wrap { flex: 1; min-width: 0; }
.rone_range_row input[type="number"]::-webkit-inner-spin-button,
.rone_range_row input[type="number"]::-webkit-outer-spin-button { -webkit-appearance: none; appearance: none; margin: 0; }
.rone_range_row input[type="number"] { -moz-appearance: textfield; appearance: textfield; }
.rone_range_sep { font-weight: 600; color: var(--color-text-muted, #6b7280); }

/* Mobile */
@media (max-width: 768px) {
    .rone_wrapper { grid-template-columns: 1fr; height: auto; }
    .rone_half { min-height: 40vh; }
    .rone_tabs_bar { flex-wrap: wrap; }
    .rone_table_title { width: 100%; font-size: 13px; }
}

/* =========================================================================
   EASYDOC - Tab bar
   ========================================================================= */
#ed_tab_bar_container,
#section_tab_bar_container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: #fff;
}
.ed_tab_bar { 
    display: flex; 
    justify-content: flex-start;
    width: auto;
    align-items: center;
    gap: 5px; 
    padding: 5px;
    background-color: var(--color-bg-light);
    border-radius: 13px;
    margin-bottom:5px
}

.ed_tab_bar_right { display: flex; align-items: center; }
.ed_tab {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 7px 16px;
    border-radius: var(--radius-md, 6px);
    border: 0px solid #7c3aed;
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 0.2px;
    cursor: pointer;
    transition: all 0.18s;
    color: #2e2d31;
    white-space: nowrap;
    background-color: transparent;
}
.ed_tab.active             { background: var(--color-primary); color: #fff; border-color: #7c3aed; }
.ed_tab:not(.active):hover { background: #cdd7e9; }

@media (max-width: 768px) {
    #ed_tab_bar_container,
    #section_tab_bar_container {
        overflow-x: auto;
        overflow-y: visible;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }
    #ed_tab_bar_container::-webkit-scrollbar,
    #section_tab_bar_container::-webkit-scrollbar { display: none; }
    .ed_tab_bar {
        flex-wrap: nowrap;
        width: max-content;
        min-width: 100%;
    }
}

/* Righe inline condivisioni */
.ed_share_row_inline { align-items: center; font-size: 13px; }
.ed_share_col_pratica { flex: 0 0 168px; min-width: 0; text-align: left; justify-content: flex-start; }
.ed_share_col_doc   { flex: 2; min-width: 0; text-align: left; justify-content: flex-start; }
.ed_share_col_dest  { flex: 1; font-size: 13px; color: #374151; text-align: left; justify-content: flex-start; }
.ed_share_col_scad  { flex: 1; font-size: 13px; color: #374151; text-align: left; justify-content: flex-start; }
.ed_share_col_stato { flex: 0 0 90px; text-align: center; justify-content: center; }
.ed_share_nom       { font-size: 13px; color: #374151; }
.ed_share_tag { display: inline-block; padding: 2px 10px; border-radius: 20px; font-size: 11px; font-weight: 700; }
.ed_share_tag_attiva   { background: #dcfce7; color: #16a34a; }
.ed_share_tag_scaduta  { background: #f3f4f6; color: #9ca3af; }
.ed_share_tag_revocata { background: #fef2f2; color: #dc2626; }

/* EASYDOC - Dettaglio condivisione popup */
.ed_share_detail_modal {
    padding: 0;
    min-width: 320px;
    max-width: 820px;
    width: 90vw;
}
.ed_sd_header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px 12px;
    border-bottom: 1px solid #e5e7eb;
}
.ed_sd_header h3 { margin: 0; font-size: 1rem; color: #1e293b; }
.ed_sd_body {
    display: flex;
    gap: 0;
    padding: 20px;
    min-height: 200px;
}
.ed_sd_col {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 10px;
    min-width: 0;
}
.ed_sd_col_title {
    margin: 0 0 6px;
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: #7c3aed;
    font-weight: 600;
}
.ed_sd_divider {
    width: 1px;
    background: #e5e7eb;
    margin: 0 20px;
    flex-shrink: 0;
}
.ed_sd_field {
    display: flex;
    flex-direction: column;
    gap: 2px;
    font-size: 0.85rem;
    color: #1e293b;
}
.ed_sd_label {
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: #94a3b8;
    font-weight: 500;
}
.ed_sd_mono { font-family: monospace; font-size: 0.82rem; }
.ed_sd_photos {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-top: 6px;
}
.ed_sd_photo_item {
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-size: 0.82rem;
}
.ed_sd_loading { padding: 32px; text-align: center; color: #64748b; }
@media (max-width: 600px) {
    .ed_sd_body { flex-direction: column; }
    .ed_sd_divider { width: 100%; height: 1px; margin: 12px 0; }
}

/* =========================================================================
   EASYDOC - Colonne e stili
   ========================================================================= */
.ed_col_pratica     { flex: 0 0 156px; min-width: 0; text-align: left; justify-content: flex-start; }
.ed_col_equal       { flex: 1; min-width: 0; text-align: left; justify-content: flex-start; }
.ed_col_small       { flex: 0 0 80px; text-align: center; justify-content: center; }
.ed_col_scad        { flex: 0 0 140px; text-align: center; justify-content: center; }
.ed_col_actions     { flex: 0 0 140px; text-align: center; justify-content: center; gap: 6px; }
.ed_pratica_mono    { color: #475569; }
.ed_scad_badge      { display: inline-block; padding: 2px 8px; border-radius: 12px; font-size: 11px; background: #eff6ff; color: #2563eb; border: 1px solid #bfdbfe; white-space: nowrap; }
.ed_scad_oggi       { display: inline-block; padding: 2px 8px; border-radius: 12px; font-size: 11px; background: #fefce8; color: #ca8a04; border: 1px solid #fde68a; }

.ed_img_thumb {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    background: #eff6ff;
    color: #2563eb;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.5px;
    padding: 0 10px;
    height: 32px;
    border-radius: 8px;
    border: 1px solid #bfdbfe;
    transition: all 0.2s;
    white-space: nowrap;
}
.ed_img_thumb:hover { background: #2563eb; color: #fff; }
.ed_no_img { color: var(--color-text-muted, #9ca3af); }

.ed_edit_btn, .ed_delete_btn, .ed_share_btn, .ed_history_btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    height: 32px;
    width: 32px;
    border-radius: 8px;
    font-size: 13px;
    transition: all 0.2s;
}
.ed_edit_btn   { background: #eff6ff; color: #2563eb; border: 1px solid #bfdbfe; }
.ed_edit_btn:hover  { background: #2563eb; color: #fff; }
.ed_delete_btn      { background: #fef2f2; color: #dc2626; border: 1px solid #fecaca; }
.ed_delete_btn:hover { background: #dc2626; color: #fff; }
.ed_revoke_badge    { display: inline-block; cursor: pointer; background: #fef2f2; color: #dc2626; border: 1px solid #fecaca; padding: 2px 10px; font-size: 11px; font-weight: 700; border-radius: 20px; transition: background 0.15s, color 0.15s, border-color 0.15s; user-select: none; }
.ed_revoke_badge:hover { background: #dc2626; color: #fff; border-color: #dc2626; }
.ed_share_btn       { background: #f0fdf4; color: #16a34a; border: 1px solid #bbf7d0; font-size: 13px; transition: all 0.2s; }
.ed_share_btn:hover { background: #16a34a; color: #fff; }
.ed_history_btn       { background: #fefce8; color: #ca8a04; border: 1px solid #fde68a; }
.ed_history_btn:hover { background: #ca8a04; color: #fff; border-color: #ca8a04; }

/* Storico condivisioni modal */
.ed_history_modal   { min-width: 320px; max-width: 600px; width: 90vw; }
.ed_history_list    { padding: 8px 0; max-height: 60vh; overflow-y: auto; }
.ed_history_row     { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 10px 20px; border-bottom: 1px solid #f1f5f9; }
.ed_history_row:last-child { border-bottom: none; }
.ed_history_dest    { font-weight: 600; font-size: 13px; color: #1e293b; flex: 0 0 auto; min-width: 120px; }
.ed_history_date    { font-size: 12px; color: #64748b; flex: 1; }
.ed_history_scad    { font-size: 12px; color: #94a3b8; }
.ed_history_stato   { flex: 0 0 auto; }
.ed_history_note    { width: 100%; font-size: 12px; color: #64748b; font-style: italic; padding-top: 2px; }

/* Toolbar condivisioni */
.ed_btn_shares {
    display: inline-flex; align-items: center; gap: 6px;
    height: 32px; padding: 0 10px; border-radius: 8px;
    border: 1px solid #bbf7d0; background: #f0fdf4; color: #16a34a;
    font-size: 11px; font-weight: 700; letter-spacing: 0.5px;
    cursor: pointer; transition: all 0.2s;
}
.ed_btn_shares:hover { background: #16a34a; color: #fff; }

/* Modal condivisione */
.ed_share_sub { color: #6b7280; font-size: 13px; margin: -8px 0 8px; }
.ed_share_ore_row { display: flex; gap: 6px; flex-wrap: wrap; }
.ed_ore_btn {
    padding: 5px 12px; border-radius: 6px; border: 1px solid #d1d5db;
    background: #f9fafb; color: #374151; font-size: 13px; font-weight: 600;
    cursor: pointer; transition: all 0.2s;
}
.ed_ore_btn.active { background: #2563eb; color: #fff; border-color: #2563eb; }
.ed_ore_btn:hover:not(.active) { border-color: #2563eb; color: #2563eb; }

/* Panel lista condivisioni */
.ed_shares_panel { min-width: 480px; max-width: 600px; }
.ed_shares_list { display: flex; flex-direction: column; gap: 8px; max-height: 60vh; overflow-y: auto; }
.ed_share_row {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    padding: 10px 12px; border-radius: 8px; background: #f9fafb; border: 1px solid #e5e7eb;
}
.ed_share_info { display: flex; flex-direction: column; gap: 2px; font-size: 13px; }
.ed_share_pratica { font-size: 13px; color: #475569; font-family: monospace; font-weight: 600; }
.ed_share_meta { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.ed_share_attiva { font-size: 12px; color: #16a34a; font-weight: 600; }
.ed_share_scad   { font-size: 12px; color: #9ca3af; }
.ed_share_empty  { color: #9ca3af; font-size: 14px; text-align: center; padding: 20px 0; }

/* Select nel form */
.ed_form select {
    padding: 8px 10px; border: 1px solid var(--color-border, #d1d5db);
    border-radius: var(--radius-md, 6px); font-size: 14px; background: #fff;
}

/* Image viewer modal */
.ed_image_viewer {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    padding: 16px;
    max-width: 90vw;
    max-height: 90vh;
    overflow: auto;
}
.ed_img_wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    transition: width 0.3s ease, height 0.3s ease;
}
.ed_image_viewer img {
    max-width: 100%;
    max-height: calc(90vh - 80px);
    object-fit: contain;
    border-radius: 6px;
    display: block;
    transition: transform 0.3s ease;
}
.ed_img_toolbar {
    display: flex;
    gap: 8px;
    align-self: flex-end;
}
.ed_img_tool_btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 8px;
    border: 1px solid #bfdbfe;
    background: #eff6ff;
    color: #2563eb;
    font-size: 15px;
    cursor: pointer;
    transition: all 0.2s;
}
.ed_img_tool_btn:hover { background: #2563eb; color: #fff; }
.ed_img_tool_close { border-color: #fecaca; background: #fef2f2; color: #dc2626; }
.ed_img_tool_close:hover { background: #dc2626; color: #fff; }

/* Upload form */
.ed_upload_modal { padding: 16px 24px; min-width: 480px; max-width: 560px; }
.ed_form { display: flex; flex-direction: column; gap: 12px; }
.ed_form_row { display: flex; flex-direction: column; gap: 4px; }
.ed_id_row {
    display: flex;
    align-items: center;
    gap: 6px;
}
.ed_id_input {
    flex: 1;
    padding: 8px 10px;
    border: 1px solid var(--color-border, #d1d5db);
    border-radius: var(--radius-md, 6px);
    font-size: 14px;
    font-family: monospace;
    letter-spacing: 1px;
    background: #f9fafb;
    color: var(--color-text-dark);
}
.ed_id_regen {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 8px;
    border: 1px solid #bfdbfe;
    background: #eff6ff;
    color: #2563eb;
    font-size: 15px;
    cursor: pointer;
    transition: all 0.2s;
    flex-shrink: 0;
}
.ed_id_regen:hover { background: #2563eb; color: #fff; }
.ed_form_row label { font-weight: 600; font-size: 13px; color: var(--color-text-dark); }
.ed_form_row input[type="text"] {
    padding: 8px 10px;
    border: 1px solid var(--color-border, #d1d5db);
    border-radius: var(--radius-md, 6px);
    font-size: 14px;
}
/* File picker: scatta foto / carica file */
.ed_hidden_input { display: none !important; }
.ed_file_picker {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
}
.ed_pick_btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    border: 1.5px solid var(--color-border, #d1d5db);
    border-radius: var(--radius-md, 6px);
    background: var(--color-bg-light, #f8fafc);
    font-size: 13px;
    cursor: pointer;
    color: var(--color-text-dark);
    transition: border-color 0.2s, background 0.2s;
}
.ed_pick_btn:hover { border-color: var(--color-primary); background: #eff6ff; }
.ed_pick_btn i { color: var(--color-primary); }
.ed_edit_photo_row {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}
.ed_edit_has_photo { color: #16a34a; font-size: 13px; font-weight: 600; }
.ed_edit_no_photo  { color: #9ca3af; font-size: 13px; }
.ed_edit_photo_btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 10px;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
    border: 1px solid;
}
.ed_edit_del    { background: #fef2f2; color: #dc2626; border-color: #fecaca; }
.ed_edit_del:hover { background: #dc2626; color: #fff; }
.ed_edit_upload { background: #eff6ff; color: #2563eb; border-color: #bfdbfe; }
.ed_edit_upload:hover { background: #2563eb; color: #fff; }
.ed_edit_new_name { font-size: 11px; color: #6b7280; font-style: italic; }
.ed_file_preview {
    display: flex;
    align-items: center;
    gap: 8px;
}
.ed_file_preview img {
    width: 40px;
    height: 40px;
    border-radius: 6px;
    object-fit: cover;
}
.ed_file_name { font-size: 12px; color: var(--color-text-muted, #6b7280); }
.ed_file_remove {
    cursor: pointer;
    color: #ef4444;
    font-size: 14px;
    transition: color 0.2s;
}
.ed_file_remove:hover { color: #dc2626; }
.ed_form_actions {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    margin-top: 8px;
}

/* Toolbar sopra la tabella */
.ed_toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 10px 6px;
    min-height: 42px;
    width: 100%;
}
.ed_toolbar_title {
    font-weight: 700;
    font-size: 15px;
    color: var(--color-text-dark);
    white-space: nowrap;
}
.ed_toolbar_right {
}
.ed_btn_nuovo {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    font-size: 13px;
    font-weight: 600;
    border-radius: var(--radius-md, 6px);
    cursor: pointer;
    border: none;
    color: #fff;
    background: var(--color-primary);
    transition: background 0.2s;
}
.ed_btn_nuovo:hover { background: var(--color-primary-hover); }

/* Popup scelta QR / Diretto */
.ed_scelta_modal {
    padding: 24px;
    text-align: center;
}
.ed_scelta_modal h3 {
    font-size: 20px;
    font-weight: 700;
    margin-bottom: 8px;
    color: var(--color-text-dark);
}
.ed_scelta_modal p {
    font-size: 14px;
    color: var(--color-text-muted, #6b7280);
    margin-bottom: 24px;
}
.ed_scelta_buttons {
    display: flex;
    gap: 16px;
    justify-content: center;
}
.ed_scelta_btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 24px 32px;
    border: 2px solid var(--color-border, #d1d5db);
    border-radius: 16px;
    background: #fff;
    cursor: pointer;
    transition: border-color 0.2s, box-shadow 0.2s, transform 0.15s;
    min-width: 160px;
}
.ed_scelta_btn:hover {
    border-color: var(--color-primary);
    box-shadow: 0 4px 16px rgba(11, 102, 221, 0.12);
    transform: translateY(-2px);
}
.ed_scelta_btn i {
    font-size: 36px;
    color: var(--color-primary);
}
.ed_scelta_label {
    font-size: 16px;
    font-weight: 700;
    color: var(--color-text-dark);
}
.ed_scelta_desc {
    font-size: 12px;
    color: var(--color-text-muted, #6b7280);
}

/* QR code modal */
.ed_qr_modal {
    padding: 24px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
}
.ed_qr_modal h3 {
    font-size: 18px;
    font-weight: 700;
}
.ed_qr_modal p {
    font-size: 14px;
    color: var(--color-text-muted, #6b7280);
}
.ed_qr_container {
    padding: 16px;
    background: #fff;
    border-radius: 12px;
    border: 1px solid var(--color-border, #e5e7eb);
    display: inline-block;
}
.ed_qr_hint {
    font-size: 12px;
    color: var(--color-text-muted, #9ca3af);
    font-style: italic;
}

/* Mobile responsive */
@media (max-width: 768px) {
    .ed_col_equal   { font-size: 12px; }
    .ed_col_small   { flex: 0 0 60px; font-size: 11px; }
    .ed_col_actions { flex: 0 0 55px; gap: 6px; }
    .ed_scelta_buttons { flex-direction: column; align-items: center; }
    .ed_scelta_btn { min-width: 200px; padding: 20px 24px; }
    .ed_toolbar { flex-direction: column; gap: 8px; }
    .ed_toolbar_right { position: static; transform: none; }
    .ed_upload_modal { min-width: unset; max-width: 100%; padding: 12px 16px; }
    .ed_pick_btn { padding: 6px 10px; font-size: 12px; }
}

/* ========================================= */
/* === Profilo modale (account, 2FA, dispositivi) === */
/* ========================================= */

.profilo_overlay {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.55);
    z-index: 9999;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 5vh 16px;
    overflow: hidden;
}

.profilo_overlay.hidden { display: none; }

.profilo_modal {
    width: 100%;
    max-width: 720px;
    max-height: 90vh;
    background: #fff;
    border-radius: 14px;
    box-shadow: 0 20px 60px rgba(15, 23, 42, 0.3);
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.profilo_modal_header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 24px;
    background: linear-gradient(135deg, #0b66dd, #07e965);
    color: #fff;
    flex-shrink: 0;
}

.profilo_modal_header h3 {
    margin: 0;
    font-size: 1.2rem;
    font-weight: 700;
    letter-spacing: 0.5px;
}

.profilo_modal_close {
    background: rgba(255, 255, 255, 0.18);
    border: none;
    color: #fff;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    cursor: pointer;
    font-size: 1rem;
    transition: background 0.15s ease;
}

.profilo_modal_close:hover { background: rgba(255, 255, 255, 0.32); }

.profilo_modal_body {
    padding: 20px 24px 24px;
    display: flex;
    flex-direction: column;
    gap: 18px;
    overflow-y: auto;
}

.profilo_password_section {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    padding: 16px 18px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.profilo_section_title {
    font-size: 0.95rem;
    font-weight: 700;
    color: #0f172a;
    letter-spacing: 0.3px;
}

.profilo_account_grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px 16px;
}

.profilo_account_grid .form_group { display: flex; flex-direction: column; gap: 4px; }
.profilo_account_grid .form_group label {
    font-size: 11px; font-weight: 700; color: #64748b; text-transform: uppercase;
}

.profilo_field {
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    padding: 8px 12px;
    font-size: 0.9rem;
    color: #0f172a;
}

.profilo_2fa_status_row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.profilo_2fa_status { font-size: 0.9rem; color: #334155; }
.profilo_2fa_on  { color: #16a34a; font-weight: 700; }
.profilo_2fa_off { color: #b45309; font-weight: 700; }

.profilo_btn {
    border: none;
    border-radius: 8px;
    padding: 8px 16px;
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    transition: transform 0.15s ease, background 0.15s ease;
}

.profilo_btn_2fa_on  { background: #2563eb; color: #fff; }
.profilo_btn_2fa_on:hover  { background: #1d4ed8; }
.profilo_btn_2fa_off { background: #b45309; color: #fff; }
.profilo_btn_2fa_off:hover { background: #92400e; }

.profilo_btn_save   { background: #16a34a; color: #fff; }
.profilo_btn_save:hover   { background: #15803d; }
.profilo_btn_cancel { background: #dc2626; color: #fff; }
.profilo_btn_cancel:hover { background: #b91c1c; }

.profilo_2fa_setup,
.profilo_2fa_disable {
    display: flex;
    flex-direction: column;
    gap: 12px;
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    padding: 14px;
}

.profilo_2fa_instructions {
    font-size: 0.85rem;
    color: #334155;
    line-height: 1.6;
}

.profilo_2fa_instructions span {
    display: inline-block;
    width: 18px;
    font-weight: 700;
    color: #2563eb;
}

.profilo_qr_wrapper {
    display: flex;
    justify-content: center;
    padding: 8px 0;
}

.profilo_qr_wrapper img {
    width: 200px;
    height: 200px;
    image-rendering: pixelated;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    background: #fff;
    padding: 6px;
}

.profilo_2fa_confirm_row {
    display: flex;
    align-items: flex-end;
    gap: 12px;
    flex-wrap: wrap;
}

.profilo_2fa_confirm_row .form_group {
    display: flex;
    flex-direction: column;
    gap: 4px;
    flex: 1 1 200px;
}

.profilo_2fa_confirm_row .form_group label {
    font-size: 11px; font-weight: 700; color: #64748b; text-transform: uppercase;
}

.profilo_2fa_confirm_row input[type="text"] {
    border: 1px solid #cbd5e1;
    border-radius: 6px;
    padding: 8px 12px;
    font-size: 1rem;
    outline: none;
}

.profilo_2fa_confirm_row input[type="text"]:focus { border-color: #2563eb; }

/* Lista dispositivi 2FA */
.profilo_devices_list {
    display: flex;
    flex-direction: column;
    gap: 10px;
    max-height: 260px;
    overflow-y: auto;
}

.profilo_devices_loading,
.profilo_devices_empty {
    text-align: center;
    color: #64748b;
    font-size: 0.85rem;
    padding: 12px;
}

.profilo_device_row {
    display: flex;
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    padding: 12px 14px;
    transition: box-shadow 0.15s ease;
}

.profilo_device_row.is_enrollment {
    background: #f0fdf4;
    border-color: #86efac;
}

.profilo_device_main { flex: 1; display: flex; flex-direction: column; gap: 4px; }

.profilo_device_label {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    font-weight: 600;
    color: #0f172a;
    font-size: 0.95rem;
}

.profilo_device_label i { color: #475569; }

.profilo_device_meta {
    font-size: 0.8rem;
    color: #64748b;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.profilo_device_badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 0.72rem;
    font-weight: 700;
    padding: 3px 8px;
    border-radius: 999px;
    text-transform: uppercase;
    letter-spacing: 0.4px;
}

.profilo_device_badge_enroll  { background: #dcfce7; color: #166534; }
.profilo_device_badge_current { background: #dbeafe; color: #1e40af; }

/* ===== TABELLA UTENTI (stile Irenstorm) ===== */
.header_row.persone_row {
    display: grid !important;
    grid-template-columns: minmax(120px,180px) minmax(160px,260px) 90px minmax(100px,160px) minmax(100px,160px) minmax(120px,180px) 100px 110px 1fr;
    justify-content: unset;
    background: #0066cc;
    color: #fff;
    border-radius: 8px;
    /* Intestazione fissa: resta in cima mentre le righe scorrono nel .table_body */
    position: sticky;
    top: 0;
    z-index: 5;
    align-self: stretch; /* occupa tutta la larghezza nel .table_body (flex column, align-items:center) */
    flex-shrink: 0;
}

.header_row.persone_row .th {
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.5px;
}

.body_row.persone_row {
    display: grid !important;
    grid-template-columns: minmax(120px,180px) minmax(160px,260px) 90px minmax(100px,160px) minmax(100px,160px) minmax(120px,180px) 100px 110px 1fr;
    justify-content: unset;
    align-self: stretch; /* stessa larghezza dell'header sticky → colonne allineate */
    flex-shrink: 0;
}

.body_row.persone_row .td,
.header_row.persone_row .th {
    flex: unset;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
}

.body_row.persone_row .persone_td_azioni,
.header_row.persone_row .persone_th_azioni {
    overflow: visible;
    white-space: normal;
    justify-self: end;
}

.body_row.persone_row .persone_td_azioni .inline_actions {
    justify-content: flex-end;
}

/* Badge stile Irenstorm */
.persone_badge {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    border-radius: 5px;
    font-size: 11px;
    font-weight: 600;
    white-space: nowrap;
}

.persone_badge_attivo    { background: #dcfce7; color: #166534; }
.persone_badge_disattivo { background: #fee2e2; color: #991b1b; }
.persone_badge_2fa_on    { background: #dcfce7; color: #166534; gap: 4px; }
.persone_badge_2fa_off   { background: #fef3c7; color: #92400e; gap: 4px; }
.persone_badge_2fa_na    { background: #f1f5f9; color: #64748b; }

/* Inline actions stile Irenstorm */
.inline_actions {
    display: flex;
    gap: 10px;
    justify-content: flex-end;
    align-items: center;
}

.inline_action {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 30px;
    height: 30px;
    flex-shrink: 0;
    background-color: transparent;
    cursor: pointer;
    transition: background-color 0.15s ease, color 0.15s ease;
    font-size: 13px;
    border-radius: var(--border-radius);
    color: #94a3b8;
}

.inline_action.edit          { color: #2563eb; }
.inline_action.edit:hover    { background-color: #eff6ff; }
.inline_action.delete        { color: #ef4444; }
.inline_action.delete:hover  { background-color: #fef2f2; }
.inline_action.suspend       { color: #f59e0b; }
.inline_action.suspend:hover { background-color: #fffbeb; }
.inline_action.restore       { color: #22c55e; }
.inline_action.restore:hover { background-color: #f0fdf4; }
.inline_action:not(.edit):not(.delete):not(.suspend):not(.restore):hover { background-color: #f1f5f9; }

@media (max-width: 768px) {
    .profilo_account_grid { grid-template-columns: 1fr; }
    .profilo_modal { border-radius: 10px; }
    .profilo_qr_wrapper img { width: 170px; height: 170px; }
}

/* ============================================================
   AUTODICHIARATO
   ============================================================ */

.ad_shell {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    /* Riempi l'altezza disponibile: lo scroll avviene nelle tabelle, non nella pagina */
    flex: 1;
    min-height: 0;
}

.ad_content {
    padding: 12px;
    /* Contenitore a colonna che non sfora la pagina: il contenuto del tab
       (tabella o layout split) scrolla internamente */
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

/* ---- Layout produzione 2 colonne: stores | tabelle ---- */
.ad_prod_layout {
    display: flex;
    gap: 14px;
    align-items: stretch;
    /* Riempi l'altezza del contenitore senza sforare: le colonne scrollano dentro */
    flex: 1;
    min-height: 0;
}

.ad_store_col {
    flex: 0 0 200px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    align-self: stretch;
    min-height: 0;
}

.ad_store_col_card {
    background: #fff;
    border: 1px solid var(--color-border);
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(0,0,0,0.04);
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
}

/* Switch Totale / Dettaglio */
.ad_view_switch {
    display: flex;
    background: var(--color-primary);
    padding: 4px;
    border-radius: 999px;
    gap: 2px;
    box-shadow: 0 2px 6px rgba(11, 102, 221, 0.25);
}
.ad_view_opt {
    flex: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 7px 10px;
    border: none;
    background: transparent;
    color: rgba(255, 255, 255, 0.85);
    font-size: 0.78rem;
    font-weight: 600;
    border-radius: 999px;
    cursor: pointer;
    transition: background 0.18s, color 0.18s;
    white-space: nowrap;
}
.ad_view_opt:hover { color: #fff; }
.ad_view_opt.active {
    background: #fff;
    color: var(--color-primary);
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}
.ad_view_opt i { font-size: 0.74rem; }

.ad_store_col_header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
    background: linear-gradient(180deg, #f8fafc, #f1f5f9);
    border-bottom: 1px solid var(--color-border);
    font-size: 0.78rem;
    font-weight: 700;
    text-transform: uppercase;
    color: var(--color-text-muted);
    letter-spacing: 0.04em;
}
.ad_store_col_header i { color: var(--color-primary); }
.ad_store_col_badge {
    margin-left: auto;
    background: var(--color-primary);
    color: #fff;
    font-size: 0.7rem;
    padding: 1px 8px;
    border-radius: 10px;
    font-weight: 700;
}

.ad_store_col_list {
    padding: 6px;
    flex: 1;
    overflow-y: auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.ad_store_item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    border-radius: 6px;
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
    font-size: 0.82rem;
    color: var(--color-text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.ad_store_item i { color: #9ca3af; font-size: 0.78rem; flex-shrink: 0; }
.ad_store_item span { overflow: hidden; text-overflow: ellipsis; }
.ad_store_item:hover { background: #f1f5f9; }
.ad_store_item.active {
    background: var(--color-primary);
    color: #fff;
    font-weight: 600;
}
.ad_store_item.active i { color: #fff; }

.ad_prod_tables {
    flex: 1;
    min-width: 0;
    min-height: 0;
    display: flex;
    flex-direction: column;
    gap: 0;
}

@media (max-width: 900px) {
    .ad_prod_layout { flex-direction: column; }
    .ad_store_col {
        flex: 0 0 auto;
        width: 100%;
        position: static;
    }
    .ad_view_switch { max-width: 320px; }

    /* Il card diventa una tab bar orizzontale scrollabile */
    .ad_store_col_card {
        border: none;
        border-radius: 13px;
        background: var(--color-bg-light);
        box-shadow: none;
        overflow: hidden;
    }
    .ad_store_col_header { display: none; }
    .ad_store_col_list {
        flex-direction: row;
        flex-wrap: nowrap;
        max-height: none;
        overflow-x: auto;
        overflow-y: visible;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        padding: 5px;
        gap: 5px;
    }
    .ad_store_col_list::-webkit-scrollbar { display: none; }

    .ad_store_item {
        flex: 0 0 auto;
        padding: 7px 16px;
        border-radius: var(--radius-md, 6px);
        font-size: 13px;
        font-weight: 500;
        gap: 7px;
        overflow: visible;
        text-overflow: unset;
        background: transparent;
        color: #2e2d31;
    }
    .ad_store_item i { color: #9ca3af; }
    .ad_store_item.active {
        background: var(--color-primary);
        color: #fff;
    }
    .ad_store_item.active i { color: #fff; }
    .ad_store_item:hover { background: #cdd7e9; }
}

.ad_negozio_bar {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-bottom: 12px;
}

.ad_negozio_bar .ed_tab {
    font-size: 0.78rem;
    padding: 4px 10px;
}

/* Tabelle autodichiarato — stessa estetica delle altre sezioni (mini_table pattern) */
.ad_table_wrap {
    overflow: auto;
    border-radius: 10px;
    border: 1px solid var(--color-border-light);
    background: #fff;
    flex: 1;
    min-height: 0;
}

/* Nasconde la barra di scorrimento (verticale e orizzontale) mantenendo lo scroll */
.ad_table_wrap,
.ad_store_col_list,
.ad_content {
    scrollbar-width: none;        /* Firefox */
    -ms-overflow-style: none;     /* IE/Edge */
}
.ad_table_wrap::-webkit-scrollbar,
.ad_store_col_list::-webkit-scrollbar,
.ad_content::-webkit-scrollbar {
    display: none;                /* Chrome/Safari */
}

.ad_table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.85rem;
}

.ad_table thead th {
    background: var(--color-primary);
    padding: 0 10px;
    height: 48px;
    text-align: left;
    border-bottom: none;
    white-space: nowrap;
    font-size: 0.7rem;
    font-weight: 800;
    text-transform: uppercase;
    color: #fff;
    /* Resta visibile durante lo scroll interno della tabella */
    position: sticky;
    top: 0;
    z-index: 2;
    vertical-align: middle;
    line-height: 1.25;
    letter-spacing: 0.03em;
    box-sizing: border-box;
}
.ad_table thead th:first-child { border-top-left-radius: 10px; }
.ad_table thead th:last-child  { border-top-right-radius: 10px; }

/* Produzione: header numerici allineati a destra come i valori sotto */
.ad_table th.ad_th_num { text-align: right; }

.ad_table th.ad_th_pista { text-align: left; }
.ad_table th.ad_th_day {
    min-width: 32px;
    padding: 0 4px;
    height: 48px;
    text-align: center;
    font-size: 0.7rem;
    vertical-align: middle;
}

/* Header che contiene anche il titolo della tabella (sostituisce "PISTE"/"PISTA") */
.ad_table th.ad_th_title {
    background: var(--color-primary);
    text-align: left;
}
.ad_th_title_label {
    font-size: 0.78rem;
    font-weight: 800;
    line-height: 1.15;
    text-transform: none;
    letter-spacing: 0;
    color: #fff;
}

.ad_table td {
    padding: 2px 10px;
    border-bottom: 1px solid #f1f5f9;
    white-space: nowrap;
    font-size: 0.8rem;
    color: var(--color-text-dark);
    box-sizing: border-box;
    vertical-align: middle;
}
.ad_table tbody tr:last-child td { border-bottom: none; }

/* Cella con due valori impilati verticalmente (es. NOME / CF, CELLULARE / FISSO) */
.ad_cell_stack {
    display: flex;
    flex-direction: column;
    line-height: 1.2;
    gap: 1px;
    white-space: nowrap;
}
.ad_cell_top { font-weight: 600; color: var(--color-text-dark); }
.ad_cell_sub { font-size: 0.72rem; color: var(--color-text-muted, #9ca3af); }

/* Cella di testo lungo: va a capo su max 2 righe, altezza riga stabile,
   hover (title) mostra il contenuto completo */
.ad_cell_clamp {
    white-space: normal;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    line-height: 1.25;
    max-width: 220px;
    word-break: break-word;
}
/* Variante più larga: usata dove lo spazio è stato liberato (es. Esci e Rientra) */
.ad_cell_clamp_wide { max-width: 360px; }

/* Produzione: le righe si espandono per riempire lo spazio verticale disponibile.
   Limitato alle tabelle produzione: i tab tabellari mantengono l'altezza naturale. */
.ad_table_wrap { display: flex; flex-direction: column; }
.ad_table.ad_table_main,
.ad_table.ad_table_giorni { flex: 1; height: 100%; }
.ad_table.ad_table_main tbody,
.ad_table.ad_table_giorni tbody { height: 100%; }

.ad_num_cell {
    text-align: right;
    font-variant-numeric: tabular-nums;
}
.ad_pista_cell {
    text-align: left;
    font-weight: 600;
    white-space: nowrap;
    position: relative;
    padding-right: 28px !important;
}
.ad_pista_cell .ad_pista_menu_wrap {
    position: absolute;
    right: 4px;
    top: 50%;
    transform: translateY(-50%);
}

/* Valori zero più discreti */
.ad_table tbody td.ad_zero { color: #cbd5e1; }

.ad_table tbody tr { transition: background 0.2s; }
.ad_table tbody tr:hover { background: #f1f5f9; }
.ad_table td.ad_col_hover,
.ad_table th.ad_col_hover { background: #f1f5f9 !important; }

.ad_pos { color: #16a34a; font-weight: 600; }
.ad_neg { color: #dc2626; font-weight: 600; }

/* Celle colorate produzione */
.ad_cell_green  { background: #c6efce !important; color: #276221; }
.ad_cell_orange { background: #ffeb9c !important; color: #9c6500; }
.ad_cell_red    { background: #ffc7ce !important; color: #9c0006; }

.ad_section_label {
    font-size: 0.74rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--color-text-muted);
    margin: 4px 0 10px;
    padding: 0 4px;
    display: flex;
    align-items: center;
    gap: 6px;
}
.ad_prod_tables > .ad_section_label:first-child { margin-top: 0; }

/* Tab combinato MNP / PIN Telepass: due tabelle affiancate */
.ad_split_layout {
    display: flex;
    gap: 14px;
    align-items: stretch;
    /* Riempi l'altezza disponibile: ogni pannello scrolla la propria tabella */
    flex: 1;
    min-height: 0;
}
.ad_split_panel {
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-height: 0;
}
.ad_split_panel > .ad_table_wrap {
    flex: 1;
    min-height: 0;
}
/* Larghezze relative dei pannelli: MNP 5/7, PIN 2/7 */
.ad_split_panel.ad_split_5 { flex-grow: 5; }
.ad_split_panel.ad_split_2 { flex-grow: 2; }
.ad_split_header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    flex: 0 0 auto;
}
.ad_split_title {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.8rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--color-text-muted);
}
.ad_split_title i { color: var(--color-primary); }

@media (max-width: 1100px) {
    .ad_split_layout { flex-direction: column; }
    .ad_split_panel { width: 100%; }
}


.ad_table_giorni td { text-align: center; padding: 0 4px; }
.ad_table_giorni th { padding: 0 4px; }
.ad_table_giorni td.ad_pista_cell {
    text-align: left;
    padding: 0 10px;
}
.ad_th_weekend {
    background: var(--color-primary-hover) !important;
    color: rgba(255, 255, 255, 0.75) !important;
}
.ad_cell_weekend { background: #f8fafc; }

.ad_table code {
    font-family: monospace;
    background: #f1f5f9;
    padding: 2px 5px;
    border-radius: 3px;
    font-size: 0.8rem;
}

/* Azioni riga (edit/delete) */
.ad_actions_cell { white-space: nowrap; text-align: center; padding: 4px 6px !important; }
.ad_actions_cell .btn-edit,
.ad_actions_cell .btn-delete {
    font-size: 0.95rem;
    padding: 4px;
    cursor: pointer;
    transition: transform 0.12s, color 0.12s;
}
.ad_actions_cell .btn-edit { color: var(--color-primary); }
.ad_actions_cell .btn-delete { color: #ef4444; margin-left: 8px; }
.ad_actions_cell .btn-edit:hover,
.ad_actions_cell .btn-delete:hover { transform: scale(1.15); }

.icon_btn {
    background: none;
    border: none;
    cursor: pointer;
    padding: 4px 6px;
    border-radius: 4px;
    color: var(--color-text-muted);
    font-size: 0.85rem;
    transition: background 0.15s, color 0.15s;
}
.icon_btn:hover { background: #e2e8f0; color: var(--color-primary); }
.icon_btn_danger:hover { background: #fee2e2; color: #dc2626; }

/* Area azioni nella tab bar (es. pulsante "Nuovo") */
.ad_tab_actions_area {
    display: flex;
    align-items: center;
    gap: 8px;
    padding-right: 6px;
}
.ad_tab_actions_area:empty { display: none; }


.modal_close {
    background: none;
    border: none;
    cursor: pointer;
    font-size: 1.1rem;
    color: var(--color-text-muted);
    padding: 4px 6px;
    border-radius: 4px;
    line-height: 1;
}
.modal_close:hover { color: var(--color-text-primary); background: #f1f5f9; }

/* Modale autodichiarato */
.ad_modal_content {
    width: min(96vw, 920px);
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border-radius: 14px;
}
.ad_modal_content .modal_header { padding: 14px 20px; gap: 10px; flex-shrink: 0; }
.ad_modal_content .modal_header h4 { flex: 1; font-size: 0.95rem; display: flex; align-items: center; gap: 8px; margin: 0; }
.ad_modal_content .modal_header .modal_close { margin-left: auto; flex-shrink: 0; }

/* Il form occupa lo spazio rimanente ed espone scroll solo sul corpo */
.ad_modal_content #ad_form {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
    overflow: hidden;
}

.ad_modal_body {
    padding: 20px 22px 12px;
    overflow-y: auto;
    flex: 1;
    min-height: 0;
}

/* Footer fisso sotto la modale */
.ad_modal_content .modal_footer_actions {
    flex-shrink: 0;
    border-top: 1px solid var(--color-border-light);
    background: #fff;
    box-shadow: 0 -2px 6px rgba(0,0,0,0.04);
}

/* Form fields — 4 colonne con riempimento verticale (i campi scendono dentro
   ciascuna colonna), ogni campo impilato (label sopra / valore sotto). */
.adf_grid {
    columns: 4;
    column-gap: 18px;
}
.adf_group {
    display: flex;
    flex-direction: column;
    gap: 5px;
    min-width: 0;
    break-inside: avoid;       /* il campo non si spezza tra le colonne */
    margin-bottom: 12px;
}
/* Nota: nel layout a colonne le classi adf_span_* non hanno più effetto:
   ogni campo occupa l'intera larghezza della propria colonna. */

/* Popup dettaglio riga (sola lettura) — stesso layout a 4 colonne verticali */
.add_grid {
    columns: 4;
    column-gap: 18px;
}
.add_field {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
    break-inside: avoid;
    margin-bottom: 10px;
}
.add_field_label {
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--color-text-muted, #9ca3af);
    display: flex;
    align-items: center;
    gap: 5px;
}
.add_field_label .add_icon { color: var(--color-primary); font-size: 0.72rem; }
.add_field_val {
    font-size: 0.88rem;
    color: var(--color-text-dark);
    word-break: break-word;
    white-space: pre-wrap;
}

/* Righe cliccabili (apertura popup dettaglio) */
.ad_clickable_row { cursor: pointer; }
.ad_clickable_row:hover { background: #f1f5f9; }

/* Celle Sì/No editabili (MNP fittizie, PIN Telepass) */
.ad_yn_cell {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 38px;
    padding: 2px 6px;
    border-radius: 6px;
    cursor: pointer;
    transition: background 0.12s, box-shadow 0.12s;
}
.ad_yn_cell:hover { background: #eef2ff; box-shadow: inset 0 0 0 1px #c7d2fe; }
.ad_yn_empty { color: #cbd5e1; }

/* Cella select editabile (stati DSM/CCC/SUITE) */
.ad_sel_cell {
    display: inline-flex;
    align-items: center;
    padding: 2px 6px;
    border-radius: 6px;
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.12s, box-shadow 0.12s;
}
.ad_sel_cell:hover { background: #eef2ff; box-shadow: inset 0 0 0 1px #c7d2fe; }
/* Popup select: lascia spazio per etichette più lunghe */
.ad_sel_popup { min-width: 130px; }
.ad_sel_popup .ad_yn_opt { text-align: left; }

/* Mini popup di selezione Sì/No */
.ad_yn_popup {
    position: absolute;
    z-index: 3000;
    background: #fff;
    border: 1px solid var(--color-border, #d1d5db);
    border-radius: 8px;
    box-shadow: 0 6px 18px rgba(0,0,0,0.14);
    padding: 4px;
    display: flex;
    flex-direction: column;
    min-width: 64px;
}
.ad_yn_opt {
    padding: 7px 12px;
    border-radius: 6px;
    font-size: 0.82rem;
    font-weight: 600;
    cursor: pointer;
    text-align: center;
    transition: background 0.12s;
}
.ad_yn_opt:hover { background: #f1f5f9; }
.ad_yn_opt.yes  { color: #16a34a; }
.ad_yn_opt.no   { color: #dc2626; }
.ad_yn_opt.none { color: #9ca3af; }
.ad_yn_opt.active { background: #eff6ff; box-shadow: inset 0 0 0 1px #bfdbfe; }

/* Sezioni form raggruppate */
.adf_section {
    border: 1px solid var(--color-border);
    border-radius: 10px;
    padding: 14px 16px 16px;
    margin: 0 0 14px 0;
    background: #fcfcfd;
}
.adf_section:last-child { margin-bottom: 4px; }
.adf_section_title {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 0 8px;
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--color-primary);
    background: #fff;
    border-radius: 6px;
    margin-left: -4px;
}
.adf_section_title i { font-size: 0.78rem; }

.adf_label {
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--color-text-muted);
}

.adf_input_wrap {
    position: relative;
    display: flex;
    align-items: center;
}
.adf_icon {
    position: absolute;
    left: 10px;
    color: #9ca3af;
    font-size: 0.8rem;
    pointer-events: none;
}

.adf_input,
.adf_select {
    width: 100%;
    padding: 9px 11px 9px 30px;
    border: 1.5px solid var(--color-border);
    border-radius: 8px;
    font-size: 0.88rem;
    background: #fafbfd;
    color: var(--color-text-primary);
    transition: border-color 0.15s, box-shadow 0.15s;
    appearance: none;
    -webkit-appearance: none;
}
.adf_input:not(:placeholder-shown),
.adf_input:focus,
.adf_select:focus {
    border-color: var(--color-primary);
    background: #fff;
    box-shadow: 0 0 0 3px rgba(11, 102, 221, 0.08);
    outline: none;
}
/* Select: mantieni freccia nativa ma pulita */
.adf_select { padding-right: 28px; background-image: none; }
/* Input senza icona */
.adf_no_icon .adf_input,
.adf_no_icon .adf_select { padding-left: 11px; }

.adf_textarea {
    width: 100%;
    padding: 10px 12px;
    border: 1.5px solid var(--color-border);
    border-radius: 8px;
    font-size: 0.88rem;
    background: #fafbfd;
    resize: vertical;
    font-family: inherit;
    transition: border-color 0.15s, box-shadow 0.15s;
}
.adf_textarea:focus {
    border-color: var(--color-primary);
    background: #fff;
    box-shadow: 0 0 0 3px rgba(11, 102, 221, 0.08);
    outline: none;
}

/* Date input: rimuovi padding sinistro extra su browser webkit */
input[type="date"].adf_input { padding-left: 30px; }

/* Celle giornaliere editabili */
.ad_day_cell {
    cursor: text;
    outline: none;
    min-width: 28px;
    color: var(--color-primary) !important;
    font-weight: 600;
    transition: background 0.12s;
}
.ad_day_cell.ad_zero { color: #cbd5e1 !important; font-weight: 400; }
.ad_day_cell:focus {
    background: #fffbeb !important;
    box-shadow: inset 0 0 0 2px var(--color-primary);
    border-radius: 3px;
    color: var(--color-primary) !important;
}
.ad_day_cell:hover:not(:focus):not(.ad_day_readonly) { background: #f0fdf4 !important; }
.ad_day_cell.ad_day_readonly { cursor: default; }
.ad_day_tot {
    font-weight: 700;
    background: #f8fafc;
    color: var(--color-primary) !important;
}

.ad_cell_saving { opacity: 0.5; }
.ad_cell_saved  { background: #d1fae5 !important; transition: background 0.6s; }
.ad_cell_err    { background: #fee2e2 !important; }

/* TGT MENSILE editabile (vista Totale, solo lv >= 3) */
.ad_target_editable {
    cursor: text;
    outline: none;
    color: var(--color-primary) !important;
    font-weight: 600;
}
.ad_target_editable:hover:not(:focus) { background: #f0fdf4 !important; }
.ad_target_editable:focus {
    background: #fffbeb !important;
    box-shadow: inset 0 0 0 2px var(--color-primary);
    border-radius: 3px;
}

.ad_hint {
    font-weight: 400;
    font-size: 0.7rem;
    color: var(--color-text-muted);
    text-transform: none;
    letter-spacing: 0;
    margin-left: 6px;
    font-style: italic;
}

/* btn_secondary quando usato standalone (es. nel modal footer) */

@media (max-width: 768px) {
    .ad_content {
        padding: 8px 6px;
        /* Su mobile: scroll di pagina, non scroll interno per-tabella */
        overflow: visible;
        min-height: auto;
        flex: 0 0 auto;
        display: block;
    }
    .ad_shell { min-height: auto; flex: 0 0 auto; }
    .ad_table_wrap { flex: 0 0 auto; min-height: auto; }
    .ad_table th, .ad_table td { padding: 5px 7px; font-size: 0.77rem; }
    .ad_modal_body { padding: 14px 14px 8px; }
    .adf_section { padding: 10px 12px 12px; }
    /* Su tablet: scendi a 2 colonne */
    .adf_grid, .add_grid { columns: 2; }

    /* Prima colonna (piste) fissa durante lo scroll orizzontale */
    .ad_table th.ad_th_pista {
        position: sticky;
        left: 0;
        z-index: 3;
        background: var(--color-primary);
    }
    .ad_table td.ad_pista_cell {
        position: sticky;
        left: 0;
        z-index: 1;
        background: #fff;
    }
    .ad_table tbody tr:hover td.ad_pista_cell { background: #f1f5f9; }
}
/* ===== NOTE LIBERE AUTODICHIARATO ===== */
.ad_note_libere_wrap { padding: 16px; }
.ad_nota_textarea { width: 100%; min-height: 100px; max-height: 320px; border: 1px solid var(--color-border, #e5e7eb); border-radius: 8px; padding: 10px 12px; font-size: 0.9rem; resize: vertical; overflow-y: auto; outline: none; font-family: inherit; transition: border-color 0.2s; box-sizing: border-box; }
.ad_nota_textarea:focus { border-color: var(--color-primary, #1d6fe8); }
.ad_nota_card { background: #fff; border: 1px solid var(--color-border, #e5e7eb); border-radius: 12px; padding: 14px 16px; display: flex; flex-direction: column; gap: 6px; break-inside: avoid; margin-bottom: 12px; }
.ad_nota_store_row { display: flex; align-items: center; justify-content: space-between; }
.ad_nota_store { font-weight: 700; font-size: 0.9rem; color: var(--color-primary, #1d6fe8); }
.ad_nota_actions { display: flex; align-items: center; gap: 10px; }
.ad_nota_edit { color: var(--color-text-muted, #6b7280); cursor: pointer; opacity: 0.7; transition: opacity 0.15s; }
.ad_nota_edit:hover { opacity: 1; color: var(--color-primary, #1d6fe8); }
.ad_nota_delete { color: #dc2626; cursor: pointer; opacity: 0.6; transition: opacity 0.15s; }
.ad_nota_delete:hover { opacity: 1; }
.ad_nota_meta { display: flex; align-items: center; gap: 10px; font-size: 0.78rem; color: var(--color-text-muted, #6b7280); }
.ad_nota_ora { background: #f3f4f6; border-radius: 4px; padding: 1px 6px; font-size: 0.74rem; }
.ad_nota_testo { font-size: 0.88rem; color: var(--color-text, #1f2937); line-height: 1.55; white-space: pre-wrap; padding-top: 4px; border-top: 1px solid #f3f4f6; }
.ad_note_day_group { margin-bottom: 24px; }
.ad_note_day_header { font-size: 0.82rem; font-weight: 700; color: var(--color-text-muted, #6b7280); text-transform: uppercase; letter-spacing: 0.06em; padding: 6px 4px 8px; border-bottom: 2px solid var(--color-border, #e5e7eb); margin-bottom: 14px; }
.ad_note_day_header i { margin-right: 6px; }
.ad_note_day_cards { columns: 280px auto; column-gap: 12px; }

/* ===== STORES SETTINGS ===== */

/* ===== STORES SETTINGS — layout espanso ===== */

.table_body:has(>.st_layout) {
    flex: 1 !important;
    min-height: 0 !important;
    overflow: hidden !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    width: 100% !important;
}

.st_layout {
    display: flex;
    gap: 12px;
    width: 100%;
    flex: 1;
    min-height: 0;
    align-items: stretch;
    overflow: hidden;
    padding: 12px;
    box-sizing: border-box;
}

/* Colonna sinistra brand_type */
.st_col_left {
    flex: 0 0 25%;
    min-width: 0;
    height: auto !important;
    border: 1px solid var(--color-border-light);
    border-radius: 10px;
    box-shadow: none;
    padding: 14px 10px;
    background: #fff;
    display: flex;
    flex-direction: column;
    gap: 0;
}
.st_col_left .mm_col_header { padding-bottom: 10px; margin-bottom: 8px; }
.st_col_left .mm_col_list { gap: 2px; padding: 0; }
.st_col_left .mm_item { font-size: 0.82rem; padding: 8px 10px; border-radius: 6px; display: flex; align-items: center; gap: 6px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.st_bt_count {
    margin-left: auto;
    background: var(--color-bg-light);
    color: var(--color-text-muted);
    font-size: 0.68rem;
    font-weight: 700;
    border-radius: 10px;
    padding: 1px 7px;
    flex-shrink: 0;
}
.mm_item.active .st_bt_count { background: rgba(255,255,255,0.25); color: #fff; }

/* Colonna destra */
.st_col_right {
    flex: 0 0 75%;
    min-width: 0;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    padding: 0;
    background: transparent;
}

.st_right_header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--color-border-light);
    margin-bottom: 12px;
    flex-shrink: 0;
}
.st_right_title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--color-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.06em;
}
.st_right_title i { color: var(--color-primary); }
.st_group_count { background: var(--color-primary); color: #fff; font-size: 0.68rem; font-weight: 700; border-radius: 10px; padding: 1px 8px; }

/* Tabella store */
.st_table_wrap {
    flex: 1;
    min-height: 0;
    overflow: auto;
    border-radius: 10px;
    border: 1px solid var(--color-border-light);
    background: #fff;
    scrollbar-width: thin;
    scrollbar-color: #d1d5db transparent;
}
.st_table_wrap::-webkit-scrollbar { width: 5px; height: 5px; }
.st_table_wrap::-webkit-scrollbar-thumb { background: #d1d5db; border-radius: 4px; }

.st_table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.85rem;
    text-transform: none;
}
.st_table thead { position: sticky; top: 0; z-index: 1; }
.st_table thead th {
    background: var(--color-primary);
    color: #fff;
    font-weight: 700;
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 10px 14px;
    text-align: left;
    white-space: nowrap;
}
.st_table thead th:first-child { border-top-left-radius: 10px; }
.st_table thead th:last-child  { border-top-right-radius: 10px; text-align: right; }
.st_table tbody td { padding: 9px 14px; border-bottom: 1px solid #f1f5f9; vertical-align: middle; }
.st_table tbody tr:last-child td { border-bottom: none; }
.st_table tbody tr:hover { background: #f8fafc; }
.st_td_name { font-weight: 600; color: var(--color-primary); white-space: nowrap; }
.st_td_name i { margin-right: 6px; font-size: 0.8rem; }
.st_td_bt { color: var(--color-text-muted); font-size: 0.8rem; white-space: nowrap; }
.st_td_addr { color: var(--color-text-muted); font-size: 0.8rem; }
.st_td_actions { text-align: right; white-space: nowrap; width: 72px; }

/* Form store */
.st_form { padding: 24px; display: flex; flex-direction: column; gap: 18px; }
.st_form_field { display: flex; flex-direction: column; gap: 6px; flex: 1; }
.st_form_row { display: flex; gap: 14px; }
.st_form_label { font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--color-text-muted); }
.st_form_required { color: #ef4444; }
.st_form_input {
    width: 100%;
    padding: 10px 12px;
    border: 1.5px solid var(--color-border, #e5e7eb);
    border-radius: 8px;
    font-size: 0.9rem;
    font-family: inherit;
    background: #fff;
    color: var(--color-text-primary);
    outline: none;
    transition: border-color 0.18s, box-shadow 0.18s;
    box-sizing: border-box;
}
.st_form_input:focus { border-color: var(--color-primary); box-shadow: 0 0 0 3px rgba(29,111,232,0.1); }
.st_form_select { cursor: pointer; }
.st_form_field_narrow { flex: 0 0 110px; }
.st_form_field_grow { flex: 1 1 auto; }

/* Toggle stato aperto/chiuso */
.st_toggle {
    display: inline-flex;
    border: 1.5px solid var(--color-border, #e5e7eb);
    border-radius: 8px;
    overflow: hidden;
    width: fit-content;
}
.st_toggle_opt {
    padding: 8px 20px;
    border: none;
    background: #fff;
    color: var(--color-text-muted);
    font-size: 0.85rem;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    transition: background 0.16s, color 0.16s;
}
.st_toggle_opt + .st_toggle_opt { border-left: 1.5px solid var(--color-border, #e5e7eb); }
.st_toggle_opt.active[data-stato="aperto"] { background: #16a34a; color: #fff; }
.st_toggle_opt.active[data-stato="chiuso"] { background: #ef4444; color: #fff; }

@media (max-width: 768px) {
    .st_layout { flex-direction: column; overflow: auto; }
    .st_col_left { flex: 0 0 auto; border-right: none; border-bottom: 1px solid var(--color-border-light); }
    .st_col_left .mm_col_list { flex-direction: row; flex-wrap: nowrap; overflow-x: auto; }
    .st_form_row { flex-direction: column; }
}

/* ===== LOGIN LOGS ===== */
.login_logs_layout {
    display: flex;
    flex-direction: row;
    height: 100%;
    width: 100%;
    gap: 0;
    overflow: hidden;
}
.login_logs_main {
    flex: 1 1 0;
    min-width: 0;
    overflow-y: auto;
    overflow-x: auto;
    padding: 0 12px 12px 0;
}
.login_logs_sidebar {
    flex: 0 0 220px;
    width: 220px;
    min-width: 220px;
    border-left: 1px solid var(--color-border, #d1d5db);
    padding: 16px 14px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    overflow-y: auto;
}
.ll_sidebar_title {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--color-text-muted, #666);
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    gap: 6px;
}
.ll_label {
    font-size: 11px;
    color: var(--color-text-muted, #666);
    text-transform: uppercase;
    letter-spacing: .05em;
    margin-top: 6px;
}
.ll_filter {
    background: var(--color-bg-white, #fff);
    border: 1px solid var(--color-border, #d1d5db);
    border-radius: 6px;
    color: var(--color-text-primary, #333);
    font-size: 12px;
    padding: 5px 10px;
    height: 32px;
    width: 100%;
}
.ll_filter:focus { outline: none; border-color: var(--color-primary, #0b66dd); }
.ll_sidebar_actions { display: flex; margin-top: 10px; }
.ll_btn_cerca { width: 100%; justify-content: center; }
.ll_sidebar_count {
    margin-top: auto;
    padding-top: 12px;
    font-size: 11px;
    color: var(--color-text-muted, #666);
    text-align: center;
}
.login_logs_row { display: flex; align-items: center; }
.login_logs_td_date  { flex: 0 0 135px; color: var(--color-text-muted, #666); }
.login_logs_td_user  { flex: 1 1 110px; font-weight: 500; }
.login_logs_td_app   { flex: 0 0 100px; }
.login_logs_td_mod   { flex: 0 0 105px; font-size: 12px; }
.login_logs_td_esito { flex: 0 0 72px; }
.login_logs_td_ip    { flex: 0 0 115px; color: var(--color-text-muted, #666); }
.login_logs_td_ua    { flex: 2 1 150px; color: var(--color-text-muted, #666); overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.login_logs_app_badge {
    background: var(--color-bg-gray, #e5e7eb);
    border: 1px solid var(--color-border, #d1d5db);
    border-radius: 4px;
    padding: 2px 7px;
    font-size: 11px;
    font-family: monospace;
    color: var(--color-text-dark, #1f2937);
}
.login_logs_table { min-width: 780px; }
.login_logs_table .header_row,
.login_logs_table .body_row {
    display: grid !important;
    grid-template-columns: 135px 1fr 100px 105px 72px 115px 1fr;
    justify-content: unset;
}
.login_logs_table .th,
.login_logs_table .td {
    flex: unset;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
    justify-content: flex-start;
    text-align: left;
    font-size: 12px;
    font-weight: 500;
    font-family: 'Exo 2', sans-serif;
}

/* ===== AUDIT LOGS ===== */
.audit_logs_layout { display: flex; flex-direction: row; height: 100%; width: 100%; overflow: hidden; }
.audit_logs_main   { flex: 1 1 0; min-width: 0; overflow-y: auto; overflow-x: auto; padding: 0 12px 12px 0; }
.audit_logs_sidebar { flex: 0 0 220px; width: 220px; min-width: 220px; border-left: 1px solid var(--color-border, #d1d5db); padding: 16px 14px; display: flex; flex-direction: column; gap: 6px; overflow-y: auto; }
.audit_logs_table { min-width: 760px; }
.audit_logs_table .header_row,
.audit_logs_table .body_row {
    display: grid !important;
    grid-template-columns: 135px 1fr 90px 120px 1fr 120px 110px;
    justify-content: unset;
}
.audit_logs_table .th,
.audit_logs_table .td {
    flex: unset; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    min-width: 0; justify-content: flex-start; text-align: left;
    font-size: 12px; font-weight: 500; font-family: 'Exo 2', sans-serif;
}
.audit_logs_table .header_row { justify-content: flex-start; }
.audit_td_date     { color: var(--color-text-muted, #666); }
.audit_td_ip       { color: var(--color-text-muted, #666); font-family: monospace; }
.audit_td_dettagli { color: var(--color-text-muted, #666); }
.audit_badge {
    display: inline-block; padding: 1px 7px; border-radius: 4px;
    font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em;
}
.audit_badge_create  { background: #dcfce7; color: #15803d; }
.audit_badge_edit    { background: #dbeafe; color: #1d4ed8; }
.audit_badge_delete  { background: #fee2e2; color: #b91c1c; }
.audit_badge_reset   { background: #fef9c3; color: #92400e; }
.audit_badge_stato   { background: #f3e8ff; color: #7e22ce; }
.audit_entity_badge {
    display: inline-block; padding: 1px 7px; border-radius: 4px;
    font-size: 11px; font-family: monospace; border: 1px solid var(--color-border, #d1d5db);
    background: var(--color-bg-gray, #e5e7eb); color: var(--color-text-dark, #1f2937);
}
.audit_entity_user      { background: #eff6ff; border-color: #bfdbfe; color: #1d4ed8; }
.audit_entity_operatore { background: #f0fdf4; border-color: #bbf7d0; color: #15803d; }
.audit_row_clickable { cursor: pointer; transition: background .15s; }
.audit_row_clickable:hover { background: var(--color-bg-light, #f3f4f6) !important; }
.modal_audit_detail {
    max-width: 680px; width: 100%;
    border-radius: 16px; overflow: hidden;
    padding: 0;
}
.audit_modal_header {
    display: flex; align-items: center; justify-content: space-between;
    padding: 16px 20px;
    border-bottom: 1px solid var(--color-border, #d1d5db);
}
.audit_modal_title { font-size: 14px; font-weight: 700; display: flex; align-items: center; gap: 8px; }
.audit_modal_close {
    cursor: pointer; font-size: 16px; color: var(--color-text-muted, #666);
    padding: 4px; border-radius: 6px; transition: background .15s;
}
.audit_modal_close:hover { background: var(--color-bg-gray, #e5e7eb); color: var(--color-text-dark, #1f2937); }
.audit_modal_body { display: flex; flex-direction: row; min-height: 260px; }
.audit_modal_left {
    flex: 1 1 0; min-width: 0;
    padding: 20px;
    border-right: 1px solid var(--color-border, #d1d5db);
    overflow-y: auto;
}
.audit_modal_right {
    flex: 0 0 200px; width: 200px;
    padding: 20px 16px;
    background: var(--color-bg-light, #f3f4f6);
    display: flex; flex-direction: column; gap: 16px;
}
.audit_detail_entity_card {
    display: flex; flex-direction: column; align-items: flex-start; gap: 6px;
    padding-bottom: 14px; border-bottom: 1px solid var(--color-border, #d1d5db);
}
.audit_detail_icon { font-size: 24px; color: var(--color-primary, #0b66dd); }
.audit_detail_name { font-size: 14px; font-weight: 700; color: var(--color-text-dark, #1f2937); word-break: break-word; }
.audit_badge_lg { font-size: 12px; padding: 3px 10px; margin-top: 2px; }
.audit_detail_meta { display: flex; flex-direction: column; gap: 12px; }
.audit_detail_block { display: flex; flex-direction: column; gap: 2px; }
.audit_detail_label { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--color-text-muted, #666); }
.audit_detail_value { font-size: 12px; font-weight: 500; color: var(--color-text-dark, #1f2937); word-break: break-all; }
.audit_detail_value.mono { font-family: monospace; }
.audit_detail_changes { display: flex; flex-direction: column; gap: 6px; }
.audit_detail_row {
    display: flex; flex-direction: column; gap: 2px;
    padding: 8px 12px; border-radius: 8px;
    background: var(--color-bg-white, #fff);
    border: 1px solid var(--color-border-light, #e5e7eb);
}
.audit_detail_key {
    font-size: 10px; font-weight: 700; text-transform: uppercase;
    letter-spacing: .05em; color: var(--color-text-muted, #666);
}
.audit_detail_val { font-size: 13px; color: var(--color-text-dark, #1f2937); word-break: break-all; }
.audit_detail_empty { font-size: 13px; color: var(--color-text-muted, #666); font-style: italic; }
.audit_detail_diff { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 2px; }
.audit_diff_before { font-size: 13px; color: #b91c1c; text-decoration: line-through; word-break: break-all; }
.audit_diff_arrow  { font-size: 10px; color: var(--color-text-muted, #666); flex-shrink: 0; }
.audit_diff_after  { font-size: 13px; color: #15803d; word-break: break-all; }

@media (max-width: 480px) {
    /* Su schermi piccoli: una sola colonna */
    .adf_grid, .add_grid { columns: 1; }
}

/* ---- Confronto giornaliero autodichiarato vs suite mobile ---- */
.ad_day_conflict { position: relative; }
.ad_conflict_badge {
    position: absolute;
    inset: 0;
    margin: auto;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: rgba(99, 102, 241, 0.15);
    border: 1.5px solid rgba(99, 102, 241, 0.5);
    color: #4f46e5;
    font-size: 0.65rem;
    font-weight: 700;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 2;
    pointer-events: all;
}
/* Popup confronto */
.ad_cmp_pista_label {
    font-size: 0.78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--color-text-muted, #6b7280);
    text-align: center;
}
.ad_cmp_grid {
    display: flex;
    align-items: stretch;
    gap: 12px;
    justify-content: center;
    width: 100%;
}
.ad_cmp_box {
    flex: 1;
    min-width: 110px;
    background: #f1f5f9;
    border: 1px solid var(--color-border, #e2e8f0);
    border-radius: 12px;
    padding: 18px 16px;
    text-align: center;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.ad_cmp_box_label {
    font-size: 0.72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--color-text-muted, #6b7280);
}
.ad_cmp_box_val {
    font-size: 1.8rem;
    font-weight: 700;
    color: var(--color-primary, #1d6fe8);
    line-height: 1;
}
.ad_cmp_box_unit {
    font-size: 0.72rem;
    color: var(--color-text-muted, #6b7280);
}
.ad_cmp_box_editable { cursor: text; border-color: var(--color-primary, #1d6fe8); border-style: dashed; }
.ad_cmp_box_editable #ad_cmp_edit_val:focus { outline: none; background: rgba(29,111,232,0.06); border-radius: 6px; }
.ad_cmp_box_editable .ad_cmp_box_val[contenteditable] { min-width: 60px; padding: 2px 4px; border-radius: 6px; transition: background 0.15s; }
.ad_cmp_arrow {
    color: #94a3b8;
    font-size: 1rem;
    flex-shrink: 0;
}
.ad_cmp_diff {
    text-align: center;
    font-size: 0.88rem;
    padding: 8px 14px;
    border-radius: 8px;
    background: #f8fafc;
}
.ad_cmp_pos { color: #16a34a; background: #f0fdf4; }
.ad_cmp_neg { color: #dc2626; background: #fef2f2; }

/* ---- Colonna azioni "..." nella tabella produzione ---- */
.ad_th_actions { width: 28px; padding: 0; }
.ad_actions_pista {
    width: 28px;
    padding: 0 2px;
    vertical-align: middle;
    white-space: nowrap;
}
/* Input inline nella cella pista per rename/aggiunta */
.ad_pista_new_row_inner {
    display: flex;
    align-items: center;
    gap: 4px;
}
.ad_pista_new_row_inner .ad_pista_new_inp,
.ad_pista_new_row_inner .ad_piste_input {
    font-size: 0.8rem;
    padding: 3px 6px;
    width: 100%;
    min-width: 80px;
}

/* ---- Card piste nella sidebar produzione ---- */
.ad_piste_card { margin-top: 0; }
.ad_piste_list {
    display: flex;
    flex-direction: column;
    gap: 2px;
    max-height: 280px;
    overflow-y: auto;
    padding: 4px 0;
}
.ad_pista_item {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 0.78rem;
    padding: 3px 4px 3px 8px;
    border-radius: 4px;
    color: var(--color-text-dark, #1f2937);
}
.ad_pista_item:hover { background: #f0f6ff; }
.ad_pista_nome {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
/* Bottone "..." */
.ad_pista_menu_wrap { position: relative; flex-shrink: 0; }
.ad_pista_menu_btn {
    background: none;
    border: none;
    cursor: pointer;
    color: #94a3b8;
    width: 22px;
    height: 22px;
    border-radius: 4px;
    font-size: 0.75rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background 0.13s, color 0.13s;
    visibility: hidden;
}
.ad_pista_item:hover .ad_pista_menu_btn,
tr:hover .ad_pista_menu_btn,
.ad_pista_menu_btn { visibility: visible; }
.ad_pista_menu_btn:hover { background: #dbeafe; color: var(--color-primary); }
/* Dropdown azioni — globale, appeso al body, position:fixed via JS */
.ad_pista_dropdown {
    background: #fff;
    border: 1px solid var(--color-border, #e2e8f0);
    border-radius: 7px;
    box-shadow: 0 4px 16px rgba(15,23,42,0.18);
    min-width: 130px;
    padding: 4px 0;
    display: flex;
    flex-direction: column;
}
.ad_pista_dropdown.hidden { display: none; }
.ad_pista_dropdown button {
    background: none;
    border: none;
    text-align: left;
    padding: 7px 14px;
    font-size: 0.82rem;
    cursor: pointer;
    color: #1e293b;
    display: flex;
    align-items: center;
    gap: 7px;
    transition: background 0.12s;
}
.ad_pista_dropdown button:hover { background: #f0f6ff; }
.ad_pista_dropdown .ad_pista_dd_del { color: #dc2626; }
.ad_pista_dropdown .ad_pista_dd_del:hover { background: #fee2e2; }
/* Bottone "Nuova voce" nell'header */
.ad_piste_add_inline_btn {
    margin-left: auto;
    background: var(--color-primary);
    border: none;
    cursor: pointer;
    color: #fff;
    padding: 3px 8px;
    border-radius: 5px;
    font-size: 0.72rem;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    transition: opacity 0.15s;
    white-space: nowrap;
}
.ad_piste_add_inline_btn:hover { opacity: 0.85; }
/* Input e azioni inline nella riga */
.ad_pista_inline_inp { font-size: 0.78rem; padding: 3px 6px; flex: 1; }
.ad_pista_inline_actions { display: flex; gap: 2px; flex-shrink: 0; }

/* ---- Overlay pannello gestione piste ---- */
.ad_piste_overlay {
    position: fixed;
    inset: 0;
    background: rgba(15,23,42,0.45);
    z-index: 10000;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 16px;
}
.ad_piste_overlay.hidden { display: none; }
.ad_piste_panel {
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 12px 40px rgba(15,23,42,0.25);
    width: 100%;
    max-width: 480px;
    max-height: 85vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
.ad_piste_panel_header {
    display: flex;
    align-items: center;
    padding: 14px 18px;
    background: linear-gradient(135deg, #0b66dd, #07e965);
    color: #fff;
    font-weight: 600;
    font-size: 0.95rem;
    gap: 8px;
    flex-shrink: 0;
}
.ad_piste_close_btn {
    margin-left: auto;
    background: rgba(255,255,255,0.2);
    border: none;
    color: #fff;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    cursor: pointer;
    font-size: 0.9rem;
    transition: background 0.15s;
}
.ad_piste_close_btn:hover { background: rgba(255,255,255,0.35); }
.ad_piste_panel_body {
    padding: 16px 18px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    overflow-y: auto;
}
.ad_piste_add_row {
    display: flex;
    gap: 8px;
    align-items: center;
}
.ad_piste_input {
    flex: 1;
    padding: 6px 10px;
    border: 1px solid var(--color-border, #e2e8f0);
    border-radius: 6px;
    font-size: 0.85rem;
    outline: none;
    transition: border-color 0.15s;
}
.ad_piste_input:focus { border-color: var(--color-primary); }
.ad_piste_sortable {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.ad_piste_row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 8px;
    border-radius: 6px;
    background: #f8fafc;
    border: 1px solid var(--color-border, #e2e8f0);
    transition: background 0.12s;
}
.ad_piste_row:hover { background: #f0f6ff; }
.ad_piste_row.ad_piste_dragging {
    opacity: 0.6;
    background: #dbeafe;
    border-color: var(--color-primary);
}
.ad_piste_drag_handle {
    cursor: grab;
    color: #94a3b8;
    font-size: 0.85rem;
    flex-shrink: 0;
    padding: 2px 2px;
}
.ad_piste_drag_handle:active { cursor: grabbing; }
.ad_piste_nome_text {
    flex: 1;
    font-size: 0.85rem;
    color: #1e293b;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.ad_piste_nome_input {
    flex: 1;
    font-size: 0.85rem;
}
.ad_piste_row_actions {
    display: flex;
    gap: 4px;
    flex-shrink: 0;
}
.ad_piste_btn {
    background: none;
    border: none;
    cursor: pointer;
    width: 26px;
    height: 26px;
    border-radius: 5px;
    font-size: 0.78rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background 0.13s;
}
.ad_piste_btn_edit  { color: #2563eb; }
.ad_piste_btn_edit:hover  { background: #dbeafe; }
.ad_piste_btn_ok    { color: #16a34a; }
.ad_piste_btn_ok:hover    { background: #dcfce7; }
.ad_piste_btn_cancel { color: #64748b; }
.ad_piste_btn_cancel:hover { background: #f1f5f9; }
.ad_piste_btn_del   { color: #dc2626; }
.ad_piste_btn_del:hover   { background: #fee2e2; }
.ad_piste_empty {
    text-align: center;
    color: #94a3b8;
    font-size: 0.85rem;
    padding: 16px 0;
}

/* ===== GARA120 ===== */
.g120_shell {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.g120_loader {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 14px;
    flex: 1;
    color: var(--color-text-muted);
    font-size: 0.9rem;
}
.g120_spinner {
    width: 32px; height: 32px;
    border: 3px solid #e5e7eb;
    border-top-color: var(--color-primary);
    border-radius: 50%;
    animation: spin 0.7s linear infinite;
}

.g120_content {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
    overflow: hidden;
    padding: 14px;
    gap: 12px;
}

/* Tab badge mese */
.g120_tab_badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #ef4444;
    color: #fff;
    font-size: 0.65rem;
    font-weight: 700;
    border-radius: 10px;
    padding: 1px 6px;
    margin-left: 4px;
}

/* Pane principale */
.g120_pane {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
    gap: 12px;
    padding: 14px;
    overflow: hidden;
}

/* Layout fisso: stats + tabella */
.g120_table_area {
    flex: 1;
    min-height: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}
.g120_table_area .g120_table_wrap { flex: 1; min-height: 0; }

/* Stat cards */
.g120_stats {
    display: flex;
    gap: 12px;
    flex-shrink: 0;
}
.g120_stat_card {
    flex: 1;
    background: #fff;
    border: 1px solid var(--color-border-light);
    border-radius: 10px;
    padding: 14px 18px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.04);
}
.g120_stat_label { font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--color-text-muted); }
.g120_stat_value { font-size: 1.6rem; font-weight: 800; color: var(--color-text-primary); }
.g120_stat_unsold .g120_stat_value { color: #f59e0b; }
.g120_stat_sold   .g120_stat_value { color: #16a34a; }

/* Store bar */
.g120_store_bar {
    display: flex;
    gap: 6px;
    flex-wrap: nowrap;
    overflow-x: auto;
    flex-shrink: 0;
    padding-bottom: 4px;
    scrollbar-width: none;
}
.g120_store_bar::-webkit-scrollbar { display: none; }
.g120_store_btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 14px;
    border-radius: 999px;
    border: 1.5px solid var(--color-border-light);
    background: #fff;
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--color-text-muted);
    cursor: pointer;
    white-space: nowrap;
    transition: all 0.15s;
    text-transform: uppercase;
}
.g120_store_btn:hover { border-color: var(--color-primary); color: var(--color-primary); }
.g120_store_btn.active { background: var(--color-primary); border-color: var(--color-primary); color: #fff; }

/* Tabella */
.g120_table_wrap {
    flex: 1;
    min-height: 0;
    overflow: auto;
    border-radius: 10px;
    border: 1px solid var(--color-border-light);
    background: #fff;
    scrollbar-width: thin;
    scrollbar-color: #d1d5db transparent;
}
.g120_table_wrap::-webkit-scrollbar { width: 5px; height: 5px; }
.g120_table_wrap::-webkit-scrollbar-thumb { background: #d1d5db; border-radius: 4px; }

.g120_table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.84rem;
    text-transform: none;
}
.g120_table thead { position: sticky; top: 0; z-index: 1; }
.g120_table thead th {
    background: var(--color-primary);
    color: #fff;
    font-weight: 700;
    font-size: 0.71rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding: 10px 12px;
    text-align: left;
    white-space: nowrap;
}
.g120_table thead th:first-child { border-top-left-radius: 10px; }
.g120_table thead th:last-child  { border-top-right-radius: 10px; }
.g120_table tbody td {
    padding: 9px 12px;
    border-bottom: 1px solid #f1f5f9;
    vertical-align: middle;
}
.g120_table tbody tr:last-child td { border-bottom: none; }
.g120_table tbody tr:hover { background: #f8fafc; }

/* Celle specifiche */
.g120_td_imei     { font-family: monospace; font-size: 0.8rem; color: var(--color-text-muted); }
.g120_td_model    { font-weight: 600; color: var(--color-text-primary); }
.g120_td_store    { color: var(--color-text-muted); white-space: nowrap; }
.g120_td_date     { white-space: nowrap; color: var(--color-text-muted); font-size: 0.82rem; }
.g120_td_days     { text-align: center; white-space: nowrap; }
.g120_td_cost     { text-align: left; white-space: nowrap; font-variant-numeric: tabular-nums; }
.g120_td_sale     { white-space: nowrap; color: var(--color-text-muted); font-size: 0.82rem; }
.g120_td_month    { white-space: nowrap; font-weight: 600; color: var(--color-text-muted); }
.g120_td_operator { color: var(--color-text-muted); }
.g120_td_saletype { font-size: 0.78rem; color: var(--color-text-muted); }
.g120_arrival_badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    margin-left: 8px;
    background: #7c3aed;
    color: #fff;
    font-size: 0.6rem;
    border-radius: 3px;
    cursor: pointer;
    vertical-align: middle;
    flex-shrink: 0;
    transition: background 0.15s;
}
.g120_arrival_badge:hover { background: #6d28d9; }
.g120_arrival_tip {
    position: absolute;
    z-index: 9999;
    background: #1e1b4b;
    color: #fff;
    font-size: 0.78rem;
    padding: 7px 12px;
    border-radius: 6px;
    max-width: 280px;
    line-height: 1.4;
    box-shadow: 0 4px 16px rgba(0,0,0,0.25);
    pointer-events: none;
}

/* Badge giorni giacenza */
.g120_gg {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    padding: 2px 8px;
    font-size: 0.75rem;
    font-weight: 700;
    white-space: nowrap;
}
.g120_gg_green  { background: #dcfce7; color: #16a34a; }
.g120_gg_yellow { background: #fef9c3; color: #ca8a04; }
.g120_gg_orange { background: #ffedd5; color: #ea580c; }
.g120_gg_red    { background: #fee2e2; color: #dc2626; }

/* Badge stato */
.g120_status_sold   { display: inline-flex; align-items: center; gap: 4px; font-size: 0.78rem; font-weight: 600; color: #16a34a; }
.g120_status_unsold { display: inline-flex; align-items: center; gap: 4px; font-size: 0.78rem; font-weight: 600; color: #f59e0b; }

/* Tab bar container: tab a sx, mese select a dx */
#section_tab_bar_container {
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.g120_tab_mese_wrap {
    display: flex;
    align-items: center;
    gap: 6px;
    padding-right: 8px;
    flex-shrink: 0;
}
.g120_tab_mese_icon { font-size: 0.8rem; color: var(--color-text-muted); }
.g120_comp_mese_sel {
    font-size: 0.82rem;
    padding: 4px 10px;
    border: 1px solid var(--color-border);
    border-radius: 6px;
    background: #fff;
    color: var(--color-text-primary);
    cursor: pointer;
}

/* Modelli — select visibilita' per modello */
.g120_modello_sel {
    font-size: 0.85rem;
    padding: 5px 10px;
    border: 1px solid var(--color-border);
    border-radius: 6px;
    background: #fff;
    color: var(--color-text-primary);
    cursor: pointer;
    min-width: 180px;
}
.g120_td_pag { white-space: nowrap; }

/* Compensi — layout verticale full width */
.g120_comp_full_layout {
    display: flex;
    flex-direction: column;
    flex: 1;
    overflow: hidden;
}

/* KPI bar orizzontale */
.g120_comp_kpi_bar {
    display: flex;
    gap: 10px;
    padding: 14px 16px;
    border-bottom: 1px solid var(--color-border);
    flex-shrink: 0;
    flex-wrap: wrap;
}
.g120_comp_kpi {
    display: flex;
    align-items: center;
    gap: 12px;
    border-radius: 10px;
    padding: 12px 16px;
    flex: 1;
    min-width: 130px;
    border: 1px solid transparent;
}
.g120_comp_kpi_neutral { background: #f8fafc; border-color: var(--color-border-light); }
.g120_comp_kpi_blue    { background: #eff6ff; border-color: #bfdbfe; }
.g120_comp_kpi_green   { background: #f0fdf4; border-color: #bbf7d0; }
.g120_comp_kpi_primary { background: #eff6ff; border-color: #93c5fd; }

.g120_comp_kpi_icon {
    font-size: 1.2rem;
    width: 36px;
    height: 36px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.g120_comp_kpi_neutral .g120_comp_kpi_icon { background: #e2e8f0; color: #64748b; }
.g120_comp_kpi_blue    .g120_comp_kpi_icon { background: #dbeafe; color: #0b66dd; }
.g120_comp_kpi_green   .g120_comp_kpi_icon { background: #dcfce7; color: #059669; }
.g120_comp_kpi_primary .g120_comp_kpi_icon { background: #bfdbfe; color: #1d4ed8; }

.g120_comp_kpi_body { display: flex; flex-direction: column; gap: 2px; }
.g120_comp_kpi_body span { font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.05em; font-weight: 600; }
.g120_comp_kpi_body strong { font-size: 1.1rem; font-weight: 700; }
.g120_comp_kpi_neutral .g120_comp_kpi_body span  { color: #64748b; }
.g120_comp_kpi_neutral .g120_comp_kpi_body strong { color: var(--color-text-darker); }
.g120_comp_kpi_blue    .g120_comp_kpi_body span  { color: #1d4ed8; }
.g120_comp_kpi_blue    .g120_comp_kpi_body strong { color: #0b66dd; }
.g120_comp_kpi_green   .g120_comp_kpi_body span  { color: #059669; }
.g120_comp_kpi_green   .g120_comp_kpi_body strong { color: #059669; }
.g120_comp_kpi_primary .g120_comp_kpi_body span  { color: #1d4ed8; }
.g120_comp_kpi_primary .g120_comp_kpi_body strong { color: var(--color-primary); }

/* Cards compensi */
.g120_comp_cards_wrap {
    flex: 1;
    overflow-y: auto;
    padding: 12px 16px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.g120_comp_card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    background: #fff;
    border: 1px solid var(--color-border-light);
    border-radius: 10px;
    border-left: 4px solid var(--color-border);
    transition: box-shadow 0.15s;
}
.g120_comp_card:hover { box-shadow: 0 2px 8px rgba(0,0,0,0.07); }
.g120_comp_card_gold   { border-left-color: #f59e0b; }
.g120_comp_card_silver { border-left-color: #94a3b8; }
.g120_comp_card_bronze { border-left-color: #cd7f32; }

.g120_comp_card_left {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
}
.g120_comp_pos {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    background: var(--color-bg-light);
    color: var(--color-text-muted);
    border-radius: 7px;
    font-size: 0.78rem;
    font-weight: 700;
    flex-shrink: 0;
}
.g120_comp_card_gold   .g120_comp_pos { background: #fef3c7; color: #92400e; }
.g120_comp_card_silver .g120_comp_pos { background: #f1f5f9; color: #475569; }
.g120_comp_card_bronze .g120_comp_pos { background: #fff7ed; color: #92400e; }
.g120_comp_card_info { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.g120_comp_name { font-size: 0.88rem; font-weight: 700; color: var(--color-text-dark); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.g120_comp_card_sub { font-size: 0.74rem; color: var(--color-text-muted); }

.g120_comp_card_right {
    display: flex;
    align-items: center;
    gap: 20px;
    flex-shrink: 0;
}
.g120_comp_card_kpi {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 1px;
}
.g120_comp_card_kpi span { font-size: 0.68rem; color: var(--color-text-muted); text-transform: uppercase; letter-spacing: 0.04em; }
.g120_comp_card_kpi strong { font-size: 0.88rem; }
.g120_comp_card_total strong { font-size: 1rem; font-weight: 700; color: var(--color-primary); }
.g120_comp_card_gold   .g120_comp_card_total strong { color: #d97706; }

.g120_comp_gettone { color: #0b66dd; }
.g120_comp_bonus   { color: #059669; }
.g120_comp_num { text-align: center; font-size: 0.88rem; }

.g120_comp_link_btn {
    background: none;
    border: none;
    cursor: pointer;
    color: var(--color-text-muted);
    font-size: 0.78rem;
    padding: 6px 8px;
    border-radius: 6px;
    transition: color 0.15s, background 0.15s;
}
.g120_comp_link_btn:hover { color: var(--color-primary); background: #eff6ff; }

/* Compensi — tabella interna */
.g120_comp_mese   { font-weight: 600; color: var(--color-text-primary) !important; }
.g120_comp_totale { font-weight: 700; color: var(--color-text-darker) !important; }
.g120_comp_gettone { color: #0b66dd !important; }
.g120_comp_bonus   { color: #059669 !important; }
.g120_comp_footer td {
    background: #f8fafc;
    border-top: 2px solid var(--color-border);
    padding: 11px 12px;
    font-size: 0.85rem;
}
.g120_comp_footer .g120_comp_totale { color: var(--color-primary) !important; font-size: 0.95rem; }

/* table_body con g120_shell */
.table_body:has(>.g120_shell) {
    flex: 1 !important;
    min-height: 0 !important;
    overflow: hidden !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
}

@media (max-width: 768px) {
    .g120_stats { flex-wrap: wrap; }
    .g120_stat_card { flex: 0 0 calc(50% - 6px); }
    .g120_table th, .g120_table td { padding: 6px 8px; font-size: 0.76rem; }
    .g120_pane { padding: 8px; gap: 8px; }
    .g120_comp_kpi { flex: 1 1 calc(50% - 6px); min-width: 0; }
    .g120_comp_bar_wrap { max-width: 120px; }
}
.g120_giorni_col { flex: 1; min-width: 0; }
.g120_giorni_ok { color: #16a34a; font-weight: 600; }
.g120_giorni_ko { color: #dc2626; font-weight: 600; }
.g120_modal_sub { font-size: .8rem; font-weight: 500; color: #6b7280; margin-left: 8px; }

/* === GARA120 — popup dettaglio vendita === */
.g120_clickable { cursor: pointer; }
.g120_clickable:hover { background: #eff6ff !important; }
.g120_detail_section { display: flex; flex-direction: column; gap: 2px; margin-bottom: 14px; }
.g120_detail_section:last-child { margin-bottom: 0; }
.g120_detail_section_title { font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--color-primary); padding-bottom: 6px; border-bottom: 1px solid var(--color-border-light); margin-bottom: 6px; }
.g120_detail_section_title i { margin-right: 5px; }
.g120_detail_row { display: flex; justify-content: space-between; align-items: center; padding: 5px 8px; border-radius: 6px; gap: 12px; }
.g120_detail_row.g120_detail_highlight { background: #f8fafc; }
.g120_detail_label { font-size: 0.75rem; font-weight: 600; color: var(--color-text-muted); text-transform: uppercase; letter-spacing: 0.04em; flex-shrink: 0; }
.g120_detail_value { font-size: 0.88rem; color: var(--color-text-primary); text-align: right; }
.g120_detail_value code { font-family: monospace; font-size: 0.82rem; color: var(--color-text-muted); background: #f1f5f9; padding: 1px 6px; border-radius: 4px; }

/* === GARA120 — toggle rateizzazione e badge === */
.g120_rat_toggle_wrap { display: flex; gap: 4px; margin-top: 2px; }
.g120_rat_btn {
    flex: 1;
    padding: 6px 8px;
    border: 1.5px solid var(--color-border, #e5e7eb);
    border-radius: 6px;
    background: #fff;
    font-size: 0.72rem;
    font-weight: 700;
    cursor: pointer;
    color: var(--color-text-muted);
    transition: all 0.15s;
    white-space: nowrap;
}
.g120_rat_btn:hover { border-color: var(--color-primary); color: var(--color-primary); }
.g120_rat_btn.active { background: var(--color-primary); border-color: var(--color-primary); color: #fff; }
.g120_rat_badge {
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 0.65rem; font-weight: 800; border-radius: 4px;
    padding: 1px 6px; white-space: nowrap; letter-spacing: 0.04em;
}
.g120_rat_badge_rat  { background: #ede9fe; color: #6d28d9; }
.g120_rat_badge_cash { background: #f0fdf4; color: #16a34a; }

/* === GARA120 — Fatture e Registro === */
.g120_row_pagata { background: #f0fdf4 !important; opacity: 0.85; }
.g120_row_pagata:hover { background: #dcfce7 !important; }

/* Badge colonna Pagabile */
.g120_badge_pagato {
    display: inline-flex; align-items: center; gap: 4px;
    font-size: 0.72rem; font-weight: 700; text-transform: uppercase;
    background: #dcfce7; color: #15803d; border-radius: 20px;
    padding: 2px 8px; white-space: nowrap;
}

/* Colonna Pagabile */
.g120_td_pagabile { width: 100px; text-align: center; padding: 6px 8px !important; }
.g120_th_pagabile { text-align: center; }
.g120_td_pagabile input[type="checkbox"] { width: 16px; height: 16px; cursor: pointer; accent-color: var(--color-primary, #2563eb); }

/* Stat card già in fattura */
.g120_stat_paid { border-left: 3px solid #15803d; }
.g120_stat_paid .g120_stat_label { color: #15803d; }

/* Riepilogo registro */
.g120_registro_summary {
    display: flex; flex-wrap: wrap; gap: 16px; align-items: center;
    padding: 10px 16px; background: #f8fafc; border-radius: 8px;
    margin-bottom: 12px; font-size: 0.85rem; color: var(--color-text-muted);
}
.g120_txt_warning { color: #d97706; }
.g120_txt_success { color: #15803d; }

/* Note "già in fattura" sopra i compensi */
.g120_pagati_note {
    display: inline-flex; align-items: center; gap: 6px;
    background: #dcfce7; color: #15803d; border-radius: 8px;
    padding: 6px 14px; font-size: 0.82rem; font-weight: 600;
    margin-bottom: 12px;
}

/* Badge stato fattura */
.g120_stato_badge {
    display: inline-flex; align-items: center; gap: 4px;
    font-size: 0.72rem; font-weight: 700; text-transform: uppercase;
    border-radius: 20px; padding: 3px 10px; white-space: nowrap;
}
.g120_stato_pagato    { background: #dcfce7; color: #15803d; }
.g120_stato_da_pagare { background: #fef9c3; color: #a16207; }

/* Lista IMEI nel registro */
.g120_td_imei_list { max-width: 280px; }
.g120_reg_imei {
    display: flex; align-items: center; gap: 6px;
    font-size: 0.78rem; padding: 1px 0; color: var(--color-text-muted);
}
.g120_reg_imei code { font-family: monospace; font-size: 0.75rem; background: #f1f5f9; padding: 1px 5px; border-radius: 4px; }
.g120_reg_imei span { color: var(--color-text-primary); }

/* Azioni registro */
.g120_td_actions { white-space: nowrap; text-align: right; }

.g120_act_btn {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 4px 10px; border-radius: 6px; font-size: 0.78rem;
    font-weight: 600; cursor: pointer; border: 1.5px solid transparent;
    transition: opacity .15s;
}
.g120_act_btn:hover { opacity: .8; }
.g120_act_paga { background: #16a34a; color: #fff; border-color: #15803d; }
.g120_act_undo { background: #f1f5f9; color: #475569; border-color: #cbd5e1; }
.g120_act_del  { background: transparent; color: #dc2626; border-color: #fca5a5; padding: 4px 7px; }

/* Riga totale nel popup compensi */
.g120_totale_row { background: #f0f9ff !important; }
.g120_totale_row td { border-top: 2px solid var(--color-border-light, #e5e7eb) !important; }

/* ==========================================================================
   Drilldown classifica — popup attivazioni operatore (layout split)
   ========================================================================== */

.classifica_item_clickable { cursor: pointer; }

#attiv_op_overlay,
#classifica_economica_overlay {
    position: fixed;
    top: 0; left: 0;
    width: 100vw; height: 100vh;
    z-index: 10000;
    background: rgba(0,0,0,0.55);
    display: flex;
    align-items: center;
    justify-content: center;
}

.attiv_op_popup {
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 20px 60px rgba(0,0,0,0.3);
    display: flex;
    flex-direction: column;
    width: 96vw;
    max-width: 1600px;
    max-height: 90vh;
    overflow: hidden;
}

.attiv_op_header {
    background: #10b981;
    color: #fff;
    padding: 14px 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-weight: 700;
    font-size: 14px;
    text-transform: uppercase;
    flex-shrink: 0;
    border-radius: 12px 12px 0 0;
    gap: 12px;
}

.attiv_op_title {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

.attiv_op_title #attiv_op_gruppo,
.attiv_op_title #attiv_op_nome_corrente {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.attiv_op_sep { opacity: 0.6; font-weight: 400; }

.attiv_op_period {
    font-size: 11px;
    font-weight: 400;
    opacity: 0.85;
    text-transform: none;
    flex-shrink: 0;
}

.classifica_fs_overlay_close {
    background: rgba(255,255,255,0.18);
    color: #fff;
    border: none;
    border-radius: 6px;
    padding: 7px 12px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
    transition: background 0.1s;
}
.classifica_fs_overlay_close:hover { background: rgba(255,255,255,0.3); }

.attiv_op_body_split {
    display: flex;
    flex-direction: row;
    flex: 1;
    overflow: hidden;
    padding: 12px;
    gap: 12px;
    background: #f5f6f8;
}

.attiv_op_sidebar {
    width: 280px;
    flex-shrink: 0;
    overflow-y: auto;
    overflow-x: hidden;
    border-radius: 8px;
    background: #fff;
    scrollbar-width: thin;
    box-shadow: 0 1px 4px rgba(0,0,0,0.07);
    padding: 8px;
}

.attiv_op_sidebar_item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 14px;
    cursor: pointer;
    border-bottom: 1px solid #f3f4f6;
    gap: 8px;
    transition: background 0.1s;
}
.attiv_op_sidebar_item:hover { background: #f0fdf4; }
.attiv_op_sidebar_item.active { background: #d1fae5; font-weight: 600; }

.attiv_op_sidebar_nome {
    font-size: 13px;
    color: #1f2937;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.attiv_op_sidebar_pz {
    font-size: 13px;
    color: #10b981;
    font-weight: 700;
    flex-shrink: 0;
}
.attiv_op_sidebar_pz small { font-weight: 400; color: #6b7280; font-size: 10px; }

.ce_sidebar_value {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    line-height: 1.15;
}

.ce_sidebar_value small { display: block; margin-top: 2px; }

.attiv_op_detail {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    border-radius: 8px;
    background: #fff;
    box-shadow: 0 1px 4px rgba(0,0,0,0.07);
    scrollbar-width: thin;
    padding: 0 8px 12px 8px;
}

.attiv_op_loading,
.attiv_op_empty {
    padding: 40px;
    text-align: center;
    color: #888;
    font-size: 14px;
}

.attiv_op_summary {
    padding: 12px 4px 8px 4px;
    font-size: 13px;
    color: #374151;
    position: sticky;
    top: 0;
    background: #fff;
    z-index: 2;
}
.attiv_op_summary strong { color: #059669; }

.ce_detail_summary {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 18px;
    min-height: 42px;
}

.ce_table_scroll {
    width: 100%;
    overflow-x: auto;
    overflow-y: visible;
    scrollbar-width: thin;
}

.ce_detail_summary span:first-child {
    margin-right: auto;
}

.attiv_op_table {
    width: 100%;
    min-width: 1100px;
}

.attiv_op_thead,
.attiv_op_tbody .attiv_op_row {
    display: grid;
    grid-template-columns: 90px 130px 150px 160px 1fr 130px 130px 160px 70px 130px;
}

.attiv_op_td.attiv_op_dbss { font-family: ui-monospace, monospace; font-size: 12px; }

.attiv_op_table_economica {
    min-width: 1860px;
}

.attiv_op_table_economica .attiv_op_thead,
.attiv_op_table_economica .attiv_op_tbody .attiv_op_row {
    grid-template-columns: 90px 115px 155px 165px 145px 165px 125px 125px 175px 115px 75px 85px 105px 110px 145px;
}

.attiv_op_table_economica.no_diagnostics .attiv_op_thead,
.attiv_op_table_economica.no_diagnostics .attiv_op_tbody .attiv_op_row {
    grid-template-columns: 90px 115px 155px 165px 145px 165px 125px 125px 175px 115px 75px 85px 105px 110px;
}

.attiv_op_table_economica .attiv_op_thead { top: 42px; }
.attiv_op_td.ce_numeric { justify-content: flex-end; white-space: nowrap; }

.attiv_op_thead {
    background: #fff;
    border-bottom: 2px solid #e5e7eb;
    position: sticky;
    top: 33px;
    z-index: 1;
}

.attiv_op_tbody .attiv_op_row {
    border-bottom: 1px solid #efefef;
    background: #fff;
}
.attiv_op_tbody .attiv_op_row:hover { background: #f0fdf4; }

.attiv_op_th {
    padding: 10px 12px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    color: #6b7280;
    letter-spacing: 0.03em;
}

.attiv_op_td {
    padding: 9px 12px;
    font-size: 13px;
    color: #374151;
    white-space: normal;
    overflow-wrap: anywhere;
    word-break: break-word;
    display: flex;
    align-items: center;
}

.status_badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 11px;
    font-weight: 600;
    padding: 2px 7px;
    border-radius: 5px;
    white-space: nowrap;
}
.status_accettato { color: #16a34a; background: #f0fdf4; border: 1px solid #86efac; }
.status_annullato { color: #dc2626; background: #fef2f2; border: 1px solid #fca5a5; }
.status_other { color: #6b7280; background: #f3f4f6; border: 1px solid #e5e7eb; }

.ce_excluded_total { color: #b45309; }
.ce_excluded_total strong { color: #b45309; }

.ce_diag_code {
    display: inline-flex;
    align-items: center;
    width: fit-content;
    padding: 3px 7px;
    border-radius: 5px;
    font: 700 10px/1.2 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    white-space: nowrap;
}
.ce_diag_ok { color: #047857; background: #d1fae5; border: 1px solid #6ee7b7; }
.ce_diag_skip { color: #b45309; background: #fffbeb; border: 1px solid #fcd34d; }

.ce_diagnostics {
    margin: 16px 4px 4px;
    border: 1px solid #fcd34d;
    border-radius: 8px;
    overflow: hidden;
    background: #fff;
}
.ce_diagnostics > summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 14px;
    color: #92400e;
    background: #fffbeb;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
}
.ce_diag_summary_codes { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px; }
.ce_diag_list { max-height: 320px; overflow: auto; }
.ce_diag_row {
    display: grid;
    grid-template-columns: minmax(360px, 1fr) minmax(280px, 1fr);
    gap: 18px;
    padding: 11px 14px;
    border-top: 1px solid #f3f4f6;
    font-size: 12px;
    color: #374151;
}
.ce_diag_row > div { display: flex; align-items: flex-start; gap: 9px; min-width: 0; }
.ce_diag_row small { display: block; color: #6b7280; }
.ce_diag_reason { flex-direction: column; gap: 2px !important; }

@media (max-width: 768px) {
    .attiv_op_body_split { flex-direction: column; }
    .attiv_op_sidebar { width: 100%; max-height: 140px; }
    .ce_detail_summary { gap: 10px; flex-wrap: wrap; }
    .ce_diag_row { grid-template-columns: 1fr; gap: 6px; }
    .ce_diagnostics > summary { align-items: flex-start; flex-direction: column; }
}

/* ============================================================
   Modale "Vendite gara120": centrata sotto l'header, corpo
   scrollabile. L'overlay globale e' position:absolute, quindi
   qui vincoliamo l'altezza del contenuto al viewport meno
   l'header cosi' non finisce sotto la navbar e la tabella
   scorre internamente. */
/* L'overlay si sovrappone anche all'header (parte da top:0), quindi
   centriamo il contenuto nello spazio tra header e fondo aggiungendo
   un padding-top pari all'altezza dell'header. */
.modal_overlay.active:has(.g120_vendite_modal) {
    align-items: center;
    padding-top: calc(var(--header-height) + 20px);
}
.modal_overlay.active .modal_content.g120_vendite_modal {
    height: calc(100vh - var(--header-height) - 60px);
    max-height: calc(100vh - var(--header-height) - 60px);
}
.g120_vendite_modal .g120_vendite_body {
    overflow: auto;
    min-height: 0;
    flex: 1;
    padding: 0 16px !important;
}
/* Header tabella fisso in alto durante lo scroll del corpo.
   top:0 lo aggancia al bordo del corpo scrollabile; il padding
   verticale e' 0 quindi non restano righe scoperte sopra/sotto. */
.g120_vendite_modal .g120_vendite_body .g120_table thead {
    position: sticky;
    top: 0;
    z-index: 3;
}
.g120_vendite_modal .g120_vendite_body .g120_table thead th {
    box-shadow: 0 1px 0 var(--color-primary);
}
/* Totale compenso fisso in basso durante lo scroll */
.g120_vendite_modal .g120_vendite_body .g120_table tfoot {
    position: sticky;
    bottom: 0;
    z-index: 3;
}
.g120_vendite_modal .g120_vendite_body .g120_table tfoot td {
    background: #eff6ff;
    border-top: 1px solid var(--color-border-light);
    box-shadow: 0 -1px 0 var(--color-border-light);
}

/* Classifica Economica: riepilogo mensile complessivo per addetto. */
.ce_fatturato_card .classifica_card_header {
    background: linear-gradient(135deg, #075985, #0369a1);
}
.ce_fatturato_card .classifica_card_header .header_left_info,
.ce_fatturato_card .classifica_card_header .toggle_chevron {
    color: #fff;
}
.ce_fatturato_popup { max-width: 820px; }
.ce_fatturato_detail { padding: 20px; overflow: auto; }
.ce_fatturato_total {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 18px 20px;
    margin-bottom: 14px;
    border-radius: 12px;
    color: #075985;
    background: #e0f2fe;
}
.ce_fatturato_total span { font-weight: 700; }
.ce_fatturato_total strong { font-size: 24px; }
.ce_fatturato_rows { border: 1px solid #e5e7eb; border-radius: 12px; overflow: hidden; }
.ce_fatturato_row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    padding: 12px 16px;
    border-bottom: 1px solid #e5e7eb;
}
.ce_fatturato_row:last-child { border-bottom: 0; }
.ce_fatturato_row > div { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.ce_fatturato_row > div strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ce_fatturato_row span { color: #64748b; font-size: 12px; }
.ce_fatturato_row > strong { color: #047857; white-space: nowrap; }

/* Barra Impostazioni intelligente: icone compatte, etichette su hover/focus. */
.settings_tabs_container .ed_tab_bar{overflow-x:visible;overflow-y:visible}
.settings_tabs_container .ed_tab{
    min-width:38px;
    justify-content:center;
    gap:0;
    padding-left:11px;
    padding-right:11px;
    transition:background-color .18s ease,color .18s ease,padding .2s ease;
}
.settings_tabs_container .ed_tab span,
.settings_tabs_container .settings_more_wrap>span{
    display:inline-block;
    max-width:0;
    margin-left:0;
    opacity:0;
    overflow:hidden;
    white-space:nowrap;
    transition:max-width .24s ease,opacity .18s ease,margin-left .2s ease;
}
.settings_tabs_container .ed_tab:hover span,
.settings_tabs_container .ed_tab:focus-visible span,
.settings_tabs_container .settings_more_wrap:hover>span,
.settings_tabs_container .settings_more_wrap:focus-within>span{
    max-width:180px;
    margin-left:7px;
    opacity:1;
}
.settings_tabs_container .settings_more_wrap{
    min-width:38px;
    justify-content:center;
    gap:0;
    padding-left:11px;
    padding-right:11px;
    transition:background-color .18s ease,color .18s ease;
}
.settings_tabs_container .settings_more_wrap select{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    opacity:0;
    cursor:pointer;
}
.settings_tabs_container .settings_more_wrap:after{display:none}
@media(max-width:900px){
    .settings_tabs_container{flex-direction:row;align-items:center}
    .settings_tabs_container .ed_tab_bar{width:auto;overflow-x:auto;overflow-y:hidden}
    .settings_tabs_container .settings_tab_actions{width:auto;justify-content:flex-end}
}