: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-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;
}

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

/* Scrollbar ultra-slim (Firefox + WebKit) */
* {
    scrollbar-width: thin;
    scrollbar-color: rgba(100, 116, 139, 0.45) transparent;
}

*::-webkit-scrollbar {
    width: 4px;
    height: 4px;
}

*::-webkit-scrollbar-track {
    background: transparent;
}

*::-webkit-scrollbar-thumb {
    background: rgba(100, 116, 139, 0.4);
    border-radius: 999px;
}

*::-webkit-scrollbar-thumb:hover {
    background: rgba(100, 116, 139, 0.65);
}

*::-webkit-scrollbar-corner {
    background: transparent;
}

/* ========================================= */
/* === 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: 18px;
    padding: 20px 24px;
}

.form_row {
    display: flex;
    gap: 20px;
    width: 100%;
}
.tel_app_row_inline {
    display: none;
    flex-direction: row;
    flex-wrap: nowrap;
    gap: 8px;
    width: 100%;
}
.tel_app_row_inline.visible {
    display: flex !important;
}
.form_operatori .section_form_scroll .tel_app_row_inline > .form_group {
    flex: 1 !important;
    min-width: 0 !important;
}
#btn_telefonate_delete {
    display: none;
}
#btn_telefonate_delete.visible {
    display: revert;
}

.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;
}
.required_star {
    color: #e53e3e;
    font-weight: 700;
}

.form_group input,
.form_group select,
.form_group textarea {
    padding: 11px 12px;
    border: 1px solid rgba(148, 163, 184, 0.7);
    border-radius: 10px;
    font-size: 0.92rem;
    width: 100%;
    background-color: #ffffff;
    transition: border-color 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease;
}

.form_group input:focus,
.form_group select:focus,
.form_group textarea:focus {
    outline: none;
    border-color: #2563eb;
    box-shadow: 0 0 0 1px rgba(37, 99, 235, 0.25);
    background-color: #f9fafb;
}

.modal_operatori .modal_body_scroll,
.modal_tariffe .modal_body_scroll {
    padding: 0;
}

.modal_operatori .settings_form,
.modal_tariffe .settings_form {
    padding: 20px 24px 22px;
}

/* Form Operatori */
.modal_content.modal_operatori {
    width: min(680px, calc(100vw - 32px));
}

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

.form_op_section {
    padding: 20px 24px;
    border-bottom: 1px solid #f1f5f9;
}

.form_op_section:last-child {
    border-bottom: none;
}

.form_op_section_title {
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #94a3b8;
    margin-bottom: 14px;
    display: flex;
    align-items: center;
    gap: 6px;
}

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

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

.form_op_row1 {
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
    margin-top: 12px;
}

.form_operatori .form_group {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.form_operatori .form_group label {
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #64748b;
}

.form_operatori .form_group input,
.form_operatori .form_group select {
    padding: 9px 12px;
    font-size: 0.88rem;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    background: #fff;
    color: #0f172a;
    transition: border-color 0.15s;
    outline: none;
}

.form_operatori .form_group input:focus,
.form_operatori .form_group select:focus {
    border-color: #3b82f6;
    box-shadow: 0 0 0 3px rgba(59,130,246,0.1);
}

.form_operatori .form_group input[readonly] {
    background: #f8fafc;
    color: #94a3b8;
    cursor: not-allowed;
}

.form_operatori .label_muted {
    font-weight: 400;
    color: #cbd5e1;
    text-transform: none;
    letter-spacing: 0;
}

.form_operatori .label_required {
    color: #ef4444;
    font-weight: 700;
}

.form_input_with_btn {
    display: flex;
    gap: 6px;
    align-items: center;
}

.form_input_with_btn input {
    flex: 1;
    min-width: 0;
}

@media (max-width: 560px) {
    .form_op_row3,
    .form_op_row2 {
        grid-template-columns: 1fr;
    }
}

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

/* 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: 60px !important;
    padding: 0 20px !important;
    border-bottom: 1px solid var(--color-border-light);
    display: flex !important;
}

.modal_overlay.active .modal_content.modal_large .modal_header i {
    top: 0 !important;
    right: 0 !important;
}

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

.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;
}

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

/* Template modal - Row 1: form fields in one row */
.tm_form_row_1 {
    display: flex;
    flex-wrap: wrap;
    gap: 12px 20px;
    align-items: flex-end;
    padding: 12px 0;
    border-bottom: 1px solid var(--color-border-light);
    margin-bottom: 12px;
}
.tm_form_row_1 .form_group {
    flex: 1;
    min-width: 120px;
}
.tm_form_row_1 .form_group.tm_target_period_group {
    max-width: 280px;
}
.tm_form_row_1 .form_group label {
    display: block;
    font-size: 0.7rem;
    font-weight: 700;
    color: var(--color-text-muted);
    margin-bottom: 4px;
}
.tm_form_row_1 .form_group input[type="text"],
.tm_form_row_1 .form_group input[type="number"] {
    width: 100%;
    padding: 6px 10px;
    border: 1px solid var(--color-border-light);
    border-radius: 6px;
    font-size: 0.85rem;
}
.tm_target_period_wrap {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 12px;
    max-height: 80px;
    overflow-y: auto;
}
.tm_target_cb_label {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.8rem;
    cursor: pointer;
    white-space: nowrap;
}

/* Template modal - Row 2: gruppi columns with piste */
.tm_form_row_2 {
    margin-bottom: 12px;
    flex: 1;
    min-height: 320px;
    display: flex;
    flex-direction: column;
    min-width: 0;
}
.tm_gruppi_grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 16px;
    flex: 1;
    min-height: 0;
    overflow: hidden;
    width: 100%;
    align-items: stretch;
}
.tm_gruppo_col {
    display: flex;
    flex-direction: column;
    height: 100%;
    border: 1px solid var(--color-border-light);
    border-radius: 8px;
    overflow: hidden;
    background: #fafafa;
    min-width: 0;
}
.tm_gruppo_col_header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    background: #f8fafc;
    border-bottom: 1px solid var(--color-border-light);
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--color-text-muted);
    flex-shrink: 0;
}
.tm_gruppo_col_header input[type="checkbox"] {
    cursor: pointer;
    flex-shrink: 0;
}
.tm_gruppo_col_body {
    flex: 1;
    overflow-y: auto;
    padding: 6px;
    min-height: 0;
}
.tm_pista_item {
    padding: 6px 10px;
    margin: 2px 0;
    border-radius: 4px;
    font-size: 0.82rem;
    cursor: pointer;
    transition: background 0.2s, color 0.2s;
}
.tm_pista_item:hover {
    background: #e0f2fe;
}
.tm_pista_item.selected {
    background: #0ea5e9;
    color: white;
    font-weight: 600;
}
.tm_gruppi_empty {
    padding: 12px;
    font-size: 0.8rem;
    color: var(--color-text-muted);
    text-align: center;
}

.tm_gruppo_col_target_commodity .tm_gruppo_subblock + .tm_gruppo_subblock {
    margin-top: 16px;
    padding-top: 12px;
    border-top: 1px solid #e5e7eb;
}

.tm_gruppo_col_product_name {
    min-width: 200px;
    max-width: 260px;
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
}

.tm_gruppo_col_product_name .tm_gruppo_subblock {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
}

.tm_gruppo_col_product_name .tm_gruppo_col_body {
    flex: 1;
    overflow-y: scroll;
    scrollbar-width: none;
}

.tm_gruppo_col_product_name .tm_gruppo_col_body::-webkit-scrollbar {
    display: none;
}

.tm_gruppo_col_product_name .tm_pista_item {
    font-size: 0.72rem;
    padding: 4px 8px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

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

.tm_tariffe_toggle_all {
    font-size: 0.68rem;
    padding: 2px 7px;
    border: 1px solid #0ea5e9;
    border-radius: 4px;
    background: transparent;
    color: #0ea5e9;
    cursor: pointer;
    white-space: nowrap;
    line-height: 1.4;
    flex-shrink: 0;
}

.tm_tariffe_toggle_all:hover {
    background: #0ea5e9;
    color: white;
}

.tm_tariffe_search {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 4px 6px;
    border-bottom: 1px solid var(--color-border-light);
    background: #f8fafc;
}

.tm_tariffe_input {
    flex: 1;
    min-width: 0;
    font-size: 0.75rem;
    padding: 4px 8px;
    border: 1px solid #d1d5db;
    border-radius: 4px;
    outline: none;
    box-sizing: border-box;
}

.tm_tariffe_input:focus {
    border-color: #0ea5e9;
}

.tm_tariffe_clear {
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    padding: 0;
    border: none;
    background: transparent;
    color: #9ca3af;
    cursor: pointer;
    font-size: 0.75rem;
    line-height: 1;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.tm_tariffe_clear:hover {
    background: #f3f4f6;
    color: #374151;
}

.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;
    max-height: 400px;
    overflow-y: auto;
}

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

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

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

.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-left: 20px;
    margin: 5px 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
    background: white;
}

.tree_micro_list.hidden {
    display: none;
}

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

.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 {
    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;
}

.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);
    z-index: 100;
}

.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;
}

/* Le voci di navigazione hanno la stessa veste dei tab di sezione: un solco
   grigio-azzurro che le contiene e quella attiva bianca in rilievo.
   Solo da 769px in su: sotto, questo contenitore diventa la sidebar a tutta
   pagina e un solco non avrebbe senso. */
@media (min-width: 769px) {
    .header_center {
        flex: 0 1 auto;
        gap: 2px;
        padding: 3px;
        height: auto;
        background: #eef1f6;
        border: 1px solid #e2e7ee;
        border-radius: 11px;
    }
    .header_center .section_item {
        height: auto;
        padding: 6px 13px;
        border-radius: 8px;
        color: #64748b;
        font-size: .74rem; font-weight: 650; letter-spacing: .01em;
        transition: color .16s ease, background-color .16s ease;
    }
    /* L'etichetta sta in un <text>, che ha corpo e peso propri piu' avanti
       nel foglio: senza queste due righe non eredita quelle del contenitore. */
    .header_center .section_item text {
        font-size: .74rem; font-weight: 650; letter-spacing: .01em;
    }
    .header_center .section_item.active text { font-weight: 700; }
    /* Su fondo grigio il bianco semitrasparente accenna il rilievo senza
       anticipare quello della voce attiva. */
    .header_center .section_item:hover {
        background-color: rgba(255, 255, 255, .55);
        color: #26364d;
    }
    .header_center .section_item.active {
        background: #fff;
        color: #0f172a;
        box-shadow: 0 1px 2px rgba(15, 23, 42, .1),
                    0 0 0 1px rgba(15, 23, 42, .05);
    }
    /* L'icona perde il riquadro azzurro: nel solco farebbe due rilievi uno
       dentro l'altro. Resta il colore a segnare la voce scelta. */
    .header_center .section_item .nav_icon {
        width: auto; height: auto;
        background: transparent;
    }
    .header_center .section_item.active .nav_icon {
        background: transparent;
        color: var(--color-primary);
    }
}

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

/* position: relative -> e' l'ancora del popup, che si apre sotto il pulsante */
.header_user_desktop {
    display: flex;
    align-items: center;
    gap: 20px;
    position: relative;
}

/* --- pulsante: iniziale + nome + freccia --- */
.user_trigger {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 4px 8px 4px 4px;
    border: 1px solid transparent;
    border-radius: 999px;
    background: transparent;
    font: inherit;
    cursor: pointer;
    transition: background .15s, border-color .15s;
}
.user_trigger:hover { background: #f1f5f9; border-color: #e2e8f0; }
.user_trigger[aria-expanded="true"] { background: #f1f5f9; border-color: #cbd5e1; }
.user_caret { color: #94a3b8; flex: 0 0 auto; }
.user_trigger[aria-expanded="true"] .user_caret { transform: rotate(180deg); }

.user_avatar {
    flex: 0 0 auto;
    width: 30px; height: 30px;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: 50%;
    background: #e2e8f0; color: #475569;
    font-size: .72rem; font-weight: 800; letter-spacing: .02em;
}
.user_avatar.grande { width: 38px; height: 38px; font-size: .84rem; }

.user_name_level {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    line-height: 1.2;
}

#desktop_username {
    font-weight: 800;
    font-size: 0.85rem;
    color: var(--color-text-darker);
}

#desktop_userlevel {
    font-size: 0.7rem;
    color: #6b7280;
    font-weight: 700;
}

/* --- popup dell'account --- */
.user_menu {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    z-index: 1200;
    min-width: 218px;
    padding: 6px;
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    box-shadow: 0 12px 28px rgba(15, 23, 42, .13);
    animation: user_menu_in .13s ease-out;
}
@keyframes user_menu_in {
    from { opacity: 0; transform: translateY(-4px); }
    to   { opacity: 1; transform: translateY(0); }
}
/* .hidden e' globale ma qui serve battere il display:flex del contenuto */
.user_menu.hidden { display: none; }

.user_menu_head {
    display: flex; align-items: center; gap: 10px;
    padding: 8px 10px 10px;
    border-bottom: 1px solid #f1f5f9;
    margin-bottom: 6px;
}
.user_menu_id { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; }
.user_menu_id strong {
    font-size: .82rem; font-weight: 800; color: var(--color-text-darker);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.user_menu_id small { font-size: .66rem; font-weight: 700; color: #94a3b8; }

.user_menu_voce {
    display: flex; align-items: center; gap: 10px;
    width: 100%;
    padding: 9px 10px;
    border: none; border-radius: 8px;
    background: transparent;
    font: inherit; font-size: .82rem; font-weight: 600;
    color: #334155; text-align: left;
    cursor: pointer;
    transition: background .13s, color .13s;
}
.user_menu_voce svg { flex: 0 0 auto; color: #94a3b8; }
.user_menu_voce:hover { background: #f1f5f9; }
.user_menu_voce:hover svg { color: #475569; }
/* L'uscita si distingue: e' l'unica voce da cui non si torna indietro. */
.user_menu_voce.esci { color: #e11d48; }
.user_menu_voce.esci svg { color: #fb7185; }
.user_menu_voce.esci:hover { background: #fff1f2; }
.user_menu_voce.esci:hover svg { color: #e11d48; }

.logout_btn_desktop {
    background: #fff1f2;
    color: #f43f5e;
    width: 32px;
    height: 32px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s;
    border: 1px solid #fecdd3;
}

.logout_btn_desktop:hover {
    background: #f43f5e;
    color: white;
}

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

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

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

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

.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;
        scrollbar-width: thin;
        scrollbar-color: rgba(0,0,0,0.12) transparent;
    }

    .header_center::-webkit-scrollbar {
        width: 2px;
    }

    .header_center::-webkit-scrollbar-track {
        background: transparent;
    }

    .header_center::-webkit-scrollbar-thumb {
        background: rgba(0,0,0,0.12);
        border-radius: 2px;
    }

    .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 */
    .body {
        padding-bottom: 72px;
    }
}


.main_content {
    display: flex;
    height: 100%;
    width: 100%;
    flex: 30;
    min-height: 0;
}

/* Icone inline SVG nel menu di navigazione */
.nav_icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: inherit;
}

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

.section_item {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    padding: 6px 12px;
    height: 100%;
    color: var(--color-text-darker);
    border-radius: 8px;
    transition: background 0.15s ease;
}

.section_item .nav_icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 7px;
    background: transparent;
    border: none;
    flex-shrink: 0;
}

.section_item .nav_icon svg,
.section_item .nav_icon i {
    width: 14px;
    height: 14px;
    font-size: 14px;
}

.section_item:hover {
    background-color: #f8fafc;
    cursor: pointer;
}

.section_item.active {
    color: var(--color-primary);
    font-weight: 600;
}

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

.main_table {
    display: flex;
    flex: 3;
    justify-content: space-between;
    align-items: flex-start;
    width: 100%;
    height: 100%;
    min-height: 0;
}

.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;
    scrollbar-width: none;
}

.report_table_card .table_body::-webkit-scrollbar {
    display: none;
}

.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;
    align-items: center;
    width: 100%;
    background: #fff;
    border-radius: var(--radius-md) var(--radius-md) 0 0;
    height: auto;
    border-bottom: 1px solid var(--color-border);
    box-sizing: border-box;
    gap: 10px;
    overflow: hidden;
    padding-bottom: 10px;
}

.settings_tab_selector {
    display: inline-flex;
    gap: 3px;
    padding: 3px;
    border-radius: 10px;
    background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
    overflow-x: auto;
    flex-shrink: 1;
    min-width: 0;
}

.settings_tab_selector::-webkit-scrollbar { display: none; }

.settings_tabs_container[data-tab="target_templates"] .settings_tab_selector,
.settings_tabs_container[data-tab="target_templates"] .settings_tab_actions .btn_filtro { background: linear-gradient(135deg, #0b66dd 0%, #1d4ed8 100%); }
.settings_tabs_container[data-tab="target_templates"] .settings_tab_btn.active           { color: #1d4ed8; }

.settings_tabs_container[data-tab="obiettivi"] .settings_tab_selector,
.settings_tabs_container[data-tab="obiettivi"] .settings_tab_actions .btn_filtro         { background: linear-gradient(135deg, #10b981 0%, #059669 100%); }
.settings_tabs_container[data-tab="obiettivi"] .settings_tab_btn.active                  { color: #059669; }

.settings_tabs_container[data-tab="persone"] .settings_tab_selector,
.settings_tabs_container[data-tab="persone"] .settings_tab_actions .btn_filtro           { background: linear-gradient(135deg, #8b5cf6 0%, #7c3aed 100%); }
.settings_tabs_container[data-tab="persone"] .settings_tab_btn.active                    { color: #7c3aed; }

.settings_tabs_container[data-tab="stores"] .settings_tab_selector,
.settings_tabs_container[data-tab="stores"] .settings_tab_actions .btn_filtro            { background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%); }
.settings_tabs_container[data-tab="stores"] .settings_tab_btn.active                     { color: #dc2626; }

.settings_tabs_container[data-tab="tariffe"] .settings_tab_selector,
.settings_tabs_container[data-tab="tariffe"] .settings_tab_actions .btn_filtro           { background: linear-gradient(135deg, #06b6d4 0%, #0891b2 100%); }
.settings_tabs_container[data-tab="tariffe"] .settings_tab_btn.active                    { color: #0891b2; }

.settings_tabs_container[data-tab="promo"] .settings_tab_selector,
.settings_tabs_container[data-tab="promo"] .settings_tab_actions .btn_filtro             { background: linear-gradient(135deg, #d946ef 0%, #a21caf 100%); }
.settings_tabs_container[data-tab="promo"] .settings_tab_btn.active                      { color: #a21caf; }

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

.settings_tab_actions .btn_filtro {
    height: 30px;
    padding: 0 13px;
    font-size: 11.5px;
    font-weight: 700;
    border-radius: 7px;
    border: none;
    color: #fff;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    white-space: nowrap;
    transition: opacity 0.15s;
}

.settings_tab_actions .btn_filtro:hover {
    opacity: 0.85;
    background: unset;
}

.settings_tab_btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 13px;
    font-size: 11.5px;
    font-weight: 700;
    border: none;
    border-radius: 7px;
    background: transparent;
    color: #fff;
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    white-space: nowrap;
}

.settings_tab_btn:hover {
    background: rgba(255,255,255,0.2);
}

.settings_tab_btn.active {
    background: #fff;
    color: var(--settings-tab-active-color, #2563eb);
}

/* === Persone: vista unificata operatori + utenti === */

.body_row.persone_row,
.header_row.persone_row {
    display: grid !important;
    grid-template-columns: 90px minmax(120px, 200px) minmax(150px, 250px) 130px 220px 130px 120px 130px 130px 1fr;
    justify-content: unset;
}

.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;
}

.persone_td_nome {
    font-weight: 600;
}

.body_row.persone_row[data-tipo="op_only"] {
    background: #fefce8;
}

.body_row.persone_row[data-tipo="user_only"] {
    background: #f0f9ff;
}

.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_op        { background: #fef9c3; color: #854d0e; }
.persone_badge_usr       { background: #dbeafe; color: #1e40af; }
.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; }

/* --- Modal Persona --- */
.modal_persona {
    max-width: 900px;
    width: 95vw;
    border-radius: 16px;
    overflow: hidden;
}

/* Header: titolo a sinistra, X a destra */
.modal_persona .modal_header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    border-bottom: 1px solid var(--color-border);
}

.modal_persona .modal_header h4 {
    margin: 0;
    font-size: 15px;
    font-weight: 700;
}

.modal_persona .modal_header .modal_close_x {
    cursor: pointer;
    font-size: 16px;
    color: #94a3b8;
    position: static;
    top: unset;
    right: unset;
}

.modal_persona .modal_header .modal_close_x:hover { color: #0f172a; }

/* Body scrollabile, flex per far crescere le colonne */
.modal_persona .modal_body_scroll {
    flex: 1;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.modal_persona .modal_body_scroll .settings_form {
    flex: 1;
    display: flex;
    flex-direction: column;
    padding: 20px 0;
    gap: 0;
    min-height: 0;
}

.modal_persona .persona_split {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0;
    flex: 1;
    min-height: 0;
}

.modal_persona .persona_split_col {
    padding: 0 20px;
    display: flex;
    flex-direction: column;
    min-height: 0;
}

.modal_persona .persona_split_col + .persona_split_col {
    border-left: 1px solid var(--color-border);
}

/* Titolo colonna */
.modal_persona .persona_col_title {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #64748b;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--color-border);
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    gap: 6px;
}

/* Stack campi colonna sinistra */
.modal_persona .persona_op_stack {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/* Uniforma form_group nella colonna sinistra */
.modal_persona .persona_op_stack .form_group {
    gap: 4px;
}

.modal_persona .persona_op_stack .form_group label {
    font-size: 12px;
    font-weight: 600;
    color: #374151;
    text-transform: none;
    letter-spacing: 0;
}

.modal_persona .persona_op_stack .form_group input,
.modal_persona .persona_op_stack .form_group select {
    height: 36px;
    padding: 0 10px;
    border-radius: 8px;
    border: 1px solid #d1d5db;
    font-size: 13px;
    box-sizing: border-box;
    width: 100%;
    background: #fff;
    outline: none;
}

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

/* Username readonly */
.modal_persona #persona_user_section #username[readonly] {
    background: #f3f4f6;
    color: #9ca3af;
    cursor: default;
}

/* user_form_grid e user_form_field nella colonna destra — unificate */
.modal_persona .persona_split_col {
    display: flex;
    flex-direction: column;
}
.modal_persona #persona_user_section { flex: 1; display: flex; flex-direction: column; }
.modal_persona #persona_user_section .user_form { flex: 1; display: flex; flex-direction: column; }
.modal_persona #persona_user_section .user_form_body { flex: 1; flex-direction: column; }
.modal_persona #persona_user_section .user_form_main,
.modal_persona #persona_user_section .user_form_stores { width: 100%; }
.modal_persona #persona_user_section .user_form_stores { flex: 1; display: flex; flex-direction: column; }
.modal_persona #persona_user_section .user_form_section { flex: 1; display: flex; flex-direction: column; min-height: 0; }
.modal_persona #persona_user_section .stores_clickable_list {
    flex: 1;
    max-height: none;
    overflow-y: auto;
    min-height: 0;
}

/* Header stores: label a sinistra, toolbar a destra sulla stessa riga */
.modal_persona #persona_user_section .user_form_section {
    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-rows: auto 1fr;
    align-items: center;
}

.modal_persona #persona_user_section .user_form_section > label {
    grid-column: 1;
    grid-row: 1;
}

.modal_persona #persona_user_section .stores_toolbar {
    grid-column: 2;
    grid-row: 1;
    display: flex;
    justify-content: flex-end;
}

.modal_persona #persona_user_section .stores_clickable_list {
    grid-column: 1 / -1;
    grid-row: 2;
}

.modal_persona #persona_user_section #stores_toggle_all_btn {
    font-size: 11px;
    padding: 2px 10px;
    height: 24px;
    border-radius: 6px;
    background: #f9fafb;
    color: #374151;
    cursor: pointer;
    font-weight: 600;
    white-space: nowrap;
}

.modal_persona #persona_user_section #stores_toggle_all_btn:hover{
    font-weight: 700;
}

.modal_persona #persona_user_section .user_form_grid {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.modal_persona #persona_user_section .user_form_field {
    gap: 4px;
}

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

.modal_persona #persona_user_section .user_form_field input,
.modal_persona #persona_user_section .user_form_field select {
    height: 36px;
    padding: 0 10px;
    border-radius: 8px;
    border: 1px solid #d1d5db;
    font-size: 13px;
    box-sizing: border-box;
    width: 100%;
}

/* Username + Password / Livello + Ruolo side by side */
.modal_persona .user_form_pair {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

/* Nascondi hint testo, mostra solo icona tooltip */
.modal_persona .user_form_hint { display: none; }

.modal_persona .persona_hint_icon {
    position: relative;
    display: inline-flex;
    align-items: center;
    margin-left: 4px;
    cursor: pointer;
    color: #9ca3af;
    font-size: 13px;
}

.modal_persona .persona_hint_icon .persona_hint_bubble {
    display: none;
    position: absolute;
    bottom: calc(100% + 6px);
    left: 0;
    background: #1e293b;
    color: #f1f5f9;
    font-size: 11px;
    font-weight: 400;
    padding: 6px 10px;
    border-radius: 6px;
    white-space: nowrap;
    z-index: 200;
    pointer-events: none;
    line-height: 1.4;
}

.modal_persona .persona_hint_icon:hover .persona_hint_bubble,
.modal_persona .persona_hint_icon:focus .persona_hint_bubble {
    display: block;
}

.modal_persona #persona_user_section .user_form_header.hidden,
.modal_persona #persona_user_section .user_form_footer.hidden { display: none; }

/* === Fine Persone === */

.classifica_layout {
    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);
}

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

.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;
}

.table_body:has(.section_layout) {
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.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;
    font-size: 14px;
    font-weight: 500;
}

.header_row {
    background: #1d4ed8 !important;
    color: #fff !important;
    border-radius: 6px 6px 0 0;
}

.header_row .th {
    color: #fff !important;
}

.header_row * {
    color: #fff !important;
}


.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;
}

/* Attivazioni: righe più compatte e testo più piccolo */
.body_row.attivazioni_card,
.header_row.attivazioni_card {
    height: 38px;
    min-height: 38px;
    max-height: 38px;
    padding: 0 8px;
    font-size: 12px;
    display: grid !important;
    grid-template-columns:
        minmax(0,88px) minmax(0,118px) minmax(0,128px) minmax(0,190px)
        minmax(0,138px) minmax(0,120px) minmax(0,148px) minmax(0,148px)
        minmax(0,102px) minmax(0,118px) minmax(0,150px) minmax(0,1fr)
        minmax(0,54px) minmax(0,58px) minmax(0,68px);
    justify-content: unset;
    align-items: center;
}

/* Tab Adesioni CER: 16 colonne (Data, Quote, Sportello, POD, Nominativo, Operatore,
   Azione, Fase, Status, StatoOrdine, Tariffa, CER, DaPagare, RichPag, Pagato, actions)
   — niente Origine. Sportello/POD più larghe, Tariffa prende lo spazio residuo,
   CER/DaPagare/RichPag/Pagato compresse e allineate a destra.
   Override del grid a 15 colonne sopra. */
.body_row.attivazioni_card.cer_card,
.header_row.attivazioni_card.cer_card {
    /* Tariffa = 1fr (adattiva); tutte le altre fisse. Funziona in modo deterministico
       SOLO perché la regola sotto forza min-width:0 + overflow:hidden su ogni cella,
       impedendo a qualsiasi contenuto di traboccare e rubare spazio alla 1fr in modo
       diverso tra header e body. */
    grid-template-columns:
        80px 100px 150px 190px 138px 120px 140px 118px 102px 118px minmax(0,1fr)
        70px 80px 80px 70px 36px !important;
}

/* Ogni cella del grid non deve MAI traboccare la sua traccia (altrimenti allarga
   la colonna e sfasa header/body): min-width:0 + overflow nascosto forzati. */
.body_row.attivazioni_card.cer_card .td,
.header_row.attivazioni_card.cer_card .th {
    min-width: 0 !important;
    max-width: 100% !important;
    overflow: hidden !important;
    white-space: nowrap;
    text-overflow: ellipsis;
}

/* Header delle 4 colonne flag (CER 12, Da Pagare 13, Rich.Pag 14, Pagato 15):
   centrati come i badge sottostanti, altrimenti il testo dell'header (allineato a
   sinistra) non coincide con il badge (centrato) e le colonne sembrano sfalsate. */
.header_row.attivazioni_card.cer_card .th:nth-child(12),
.header_row.attivazioni_card.cer_card .th:nth-child(13),
.header_row.attivazioni_card.cer_card .th:nth-child(14),
.header_row.attivazioni_card.cer_card .th:nth-child(15) {
    text-align: center;
    justify-content: center;
}

.body_row.attivazioni_card .td,
.header_row.attivazioni_card .th,
.body_row.settings_row .td,
.header_row.settings_row .th {
    font-size: 12px;
}

.body_row.settings_row,
.header_row.settings_row {
    height: 38px;
    min-height: 38px;
    max-height: 38px;
    padding: 0 8px;
    font-size: 12px;
    display: flex;
    justify-content: unset;
}

.body_row.settings_row .td,
.header_row.settings_row .th {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.body_row.settings_row .td[data-label="Azioni"],
.header_row.settings_row .th:last-child {
    flex: 0 0 auto;
    min-width: 80px;
}


.body_row.telefonate_row .td,
.header_row.telefonate_row .th {
    font-size: 12px;
    border-right: 1px solid rgba(148, 163, 184, 0.25);
}

.body_row.telefonate_row .td:last-child,
.header_row.telefonate_row .th:last-child {
    border-right: none;
}

/* Operatore nome con tooltip */
.op_nome_cell {
    cursor: default;
    border-bottom: 1px dashed #cbd5e1;
}

/* Opportunity badge */
.opp_badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 11px;
    font-weight: 600;
    padding: 2px 7px;
    border-radius: 5px;
    white-space: nowrap;
}

.opp_badge::before {
    content: '';
    display: inline-block;
    width: 9px;
    height: 9px;
    border-radius: 2px;
    flex-shrink: 0;
}

.opp_persa {
    color: #dc2626;
    background: #fef2f2;
    border: 1px solid #fca5a5;
}
.opp_persa::before {
    background: #dc2626;
    border: 1px solid #dc2626;
}

.opp_vinta {
    color: #16a34a;
    background: #f0fdf4;
    border: 1px solid #86efac;
}
.opp_vinta::before {
    background: #16a34a;
    border: 1px solid #16a34a;
}

.opp_other {
    color: #b45309;
    background: #fffbeb;
    border: 1px solid #fcd34d;
}
.opp_other::before {
    background: #f59e0b;
    border: 1px solid #f59e0b;
}

.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_badge::before {
    content: '';
    display: inline-block;
    width: 9px;
    height: 9px;
    border-radius: 2px;
    flex-shrink: 0;
}

.status_accettato {
    color: #16a34a;
    background: #f0fdf4;
    border: 1px solid #86efac;
}
.status_accettato::before {
    background: #16a34a;
    border: 1px solid #16a34a;
}

.status_annullato {
    color: #dc2626;
    background: #fef2f2;
    border: 1px solid #fca5a5;
}
.status_annullato::before {
    background: #dc2626;
    border: 1px solid #dc2626;
}

.status_other {
    color: #b45309;
    background: #fffbeb;
    border: 1px solid #fcd34d;
}
.status_other::before {
    background: #f59e0b;
    border: 1px solid #f59e0b;
}

/* Ordine stato badge */
.ordine_badge {
    display: inline-flex;
    align-items: center;
    font-size: 11px;
    font-weight: 600;
    padding: 2px 7px;
    border-radius: 5px;
    white-space: nowrap;
}
.ordine_attivato   { color: #16a34a; background: #f0fdf4; border: 1px solid #86efac; }
.ordine_in_attivazione { color: #0369a1; background: #e0f2fe; border: 1px solid #7dd3fc; }
.ordine_annullato  { color: #dc2626; background: #fef2f2; border: 1px solid #fca5a5; }
.ordine_altro      { color: #64748b; background: #f8fafc; border: 1px solid #e2e8f0; }

/* Pill Sì/No per flag CER/da_pagare */
.flag_pill_group {
    display: inline-flex;
    border-radius: 6px;
    overflow: hidden;
    border: 1px solid #e2e8f0;
}
.flag_pill {
    padding: 3px 12px;
    font-size: 0.75rem;
    font-weight: 600;
    border: none;
    background: #f8fafc;
    color: #94a3b8;
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
}
.flag_pill + .flag_pill { border-left: 1px solid #e2e8f0; }
.flag_pill_si.active  { background: #f0fdf4; color: #16a34a; }
.flag_pill_no.active  { background: #fef2f2; color: #dc2626; }
.flag_pill:not(.active):hover { background: #f1f5f9; color: #475569; }
.flag_pill:disabled { cursor: not-allowed; }

/* Popup CER bloccato (pratica pagata, utente lv < 3): righe in sola lettura, grigie */
.popup_cer_lock_note {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.72rem;
    font-weight: 600;
    color: #92400e;
    background: #fffbeb;
    border: 1px solid #fde68a;
    border-radius: 6px;
    padding: 6px 9px;
    margin-bottom: 2px;
}
.popup_cer_row_locked { opacity: 0.5; pointer-events: none; }
.popup_cer_row_locked .flag_pill:not(.active) { color: #cbd5e1; }
/* Lo step "Pagato" resta leggibile a piena opacità anche da bloccato (è l'esito) */
.popup_cer_locked .popup_cer_row_locked:has(#popup_cer_pagato_label) { opacity: 0.75; }

/* POD/PDR icons */
.pod_icon {
    width: 18px;
    height: 18px;
    padding: 2px;
    border-radius: 5px;
    margin-right: 5px;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.pod_box {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 2px 7px 2px 5px;
    border-radius: 5px;
    font-size: 11px;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}

.pod_box svg {
    width: 13px;
    height: 13px;
    flex-shrink: 0;
}

.pod_luce {
    background: #fefce8;
    border: 1px solid #fde68a;
    color: #92400e;
}

.pod_gas {
    background: #eff6ff;
    border: 1px solid #bfdbfe;
    color: #1e40af;
}

/* Settings: scroll container per le sezioni semplici */
.telefonate_list_table {
    display: flex;
    flex-direction: column;
    flex: 1;
    overflow-y: auto;
    min-height: 0;
}

.telefonate_list_table > .header_row,
.telefonate_list > .telefonate_list_table > .header_row {
    margin-top: 0;
    position: sticky;
    top: 0;
    z-index: 1;
}

.tel_tipo_toggle {
    display: flex;
    background: var(--color-primary, #1a56db);
    border-radius: 8px;
    padding: 3px;
    gap: 2px;
}

.tel_tipo_btn {
    flex: 1;
    padding: 6px 14px;
    border: none;
    border-radius: 6px;
    background: transparent;
    color: #fff;
    font-size: 0.78rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
}

.tel_tipo_btn.active {
    background: #fff;
    color: var(--color-primary, #1a56db);
}

.td_with_icon {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.tel_tipologia_badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: inherit;
    font-weight: inherit;
    letter-spacing: normal;
}

.tel_tipologia_icon {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
}

.tel_tipologia_icon_fa {
    width: 14px;
    font-size: 14px;
    line-height: 1;
    text-align: center;
    flex-shrink: 0;
    color: var(--color-primary, #1a56db);
}

.tel_quick_add_btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-left: 6px;
    width: 18px;
    height: 18px;
    box-sizing: border-box;
    padding: 0;
    border: none;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    color: var(--color-primary, #1a56db);
    font-size: 11px;
    font-weight: 600;
    line-height: 1;
    cursor: pointer;
    vertical-align: middle;
}

.tel_quick_add_btn i {
    pointer-events: none;
}

.tel_quick_add_svg {
    width: 12px;
    height: 12px;
    display: block;
}

.tel_app_link {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    cursor: pointer;
}

.tel_app_link:hover {
    text-decoration: underline;
}

.tel_esito_history_box {
    display: flex;
    flex-direction: column;
    gap: 6px;
    max-height: 160px;
    overflow-y: auto;
}

.tel_esito_history_row {
    display: grid;
    grid-template-columns: 140px 1fr 110px;
    gap: 8px;
    font-size: 12px;
    color: #334155;
    padding: 6px 8px;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    background: #f8fafc;
}

.tel_esito_history_when {
    color: #64748b;
    font-family: monospace;
}

.tel_esito_history_change {
    font-weight: 600;
}

.tel_esito_history_by {
    text-align: right;
    color: #0f172a;
}

.tel_esito_history_empty {
    font-size: 12px;
    color: #64748b;
}

.tel_esito_inline_select {
    width: 100%;
    min-width: 150px;
    height: 100%;
    min-height: 28px;
    border: none;
    border-radius: 0;
    padding: 0 18px 0 0;
    font-size: inherit;
    font-weight: inherit;
    color: inherit;
    text-transform: uppercase;
    background: transparent;
    outline: none;
    box-shadow: none;
    text-overflow: ellipsis;
    appearance: auto;
}

.tel_esito_inline_select:focus,
.tel_esito_inline_select:focus-visible {
    outline: none;
    box-shadow: none;
}

.td[data-col="esito_telefonata"] .td_with_icon {
    display: flex;
    align-items: stretch;
    width: 100%;
    min-height: 28px;
}

.tel_quick_add_btn:hover {
    background: transparent;
}

.tel_quick_add_btn:focus,
.tel_quick_add_btn:focus-visible {
    outline: none;
    box-shadow: none;
}

.td_icon {
    width: 12px;
    height: 12px;
    flex-shrink: 0;
    opacity: 0.55;
}

.tel_list_toolbar {
    display: flex;
    justify-content: flex-end;
    padding: 4px 0 2px;
}

.tel_btn_import {
    font-size: 0.75rem;
    padding: 4px 12px;
}

.modal_import_csv_box {
    width: min(900px, 95vw);
    max-width: 95vw;
    max-height: 80vh;
    display: flex;
    flex-direction: column;
    padding: 0;
    overflow: hidden;
}

.modal_import_csv_box .modal_header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    border-bottom: 1px solid var(--color-border, #e2e8f0);
    font-weight: 600;
}

.modal_import_csv_box .modal_title {
    font-size: 1rem;
    font-weight: 700;
}

.modal_import_csv_box .modal_close {
    background: none;
    border: none;
    cursor: pointer;
    font-size: 1rem;
    color: var(--color-text-muted);
    line-height: 1;
}

.modal_import_csv_box .modal_body {
    padding: 14px 16px;
    overflow-y: auto;
    overflow-x: hidden;
    flex: 1;
    min-width: 0;
}

.modal_import_csv_box .modal_footer {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    padding: 10px 16px;
    border-top: 1px solid var(--color-border, #e2e8f0);
}

.tel_csv_hint {
    font-size: 0.72rem;
    color: var(--color-text-muted);
    background: var(--color-bg-subtle, #f7fafc);
    border-radius: 6px;
    padding: 8px 10px;
    margin-bottom: 12px;
    line-height: 1.6;
}

.tel_csv_hint code {
    font-family: monospace;
    font-size: 0.7rem;
    word-break: break-all;
}

.tel_csv_count {
    font-size: 0.78rem;
    font-weight: 600;
    margin-bottom: 6px;
}

.tel_csv_ok {
    color: #38a169;
}

.tel_csv_warn {
    color: #e53e3e;
}

.tel_csv_cell_err {
    background: #fff5f5;
    color: #e53e3e;
    font-weight: 600;
}

.tel_csv_row_num {
    color: var(--color-text-muted);
    text-align: right;
    padding-right: 10px;
    font-weight: 600;
}

.tel_csv_error {
    color: #e53e3e;
    font-size: 0.8rem;
    margin-top: 8px;
}

.tel_csv_table_wrap {
    overflow-x: auto;
    overflow-y: auto;
    max-height: 240px;
    max-width: 100%;
    border: 1px solid var(--color-border, #e2e8f0);
    border-radius: 6px;
}

.tel_csv_table {
    width: max-content;
    min-width: 100%;
    border-collapse: collapse;
    font-size: 0.72rem;
}

.tel_csv_table th,
.tel_csv_table td {
    padding: 4px 8px;
    border-bottom: 1px solid var(--color-border, #e2e8f0);
    white-space: nowrap;
    text-align: left;
}

.tel_csv_table th {
    font-weight: 700;
    background: var(--color-bg-subtle, #f7fafc);
    position: sticky;
    top: 0;
}

/* Telefonate: stessa altezza e font delle attivazioni */
.body_row.telefonate_row,
.header_row.telefonate_row {
    height: 38px;
    min-height: 38px;
    max-height: 38px;
    padding: 0 8px;
    font-size: 12px;
    overflow: hidden;
}

.body_row.active {

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

.td,
.th {
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: center;
    overflow: hidden;
    padding-left: 5px;
    padding-right: 5px;
}

.td > *,
.th > * {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    min-width: 0;
    max-width: 100%;
}

/*.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 {
    transition: all 0.3s ease;
    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;
    padding: 10px;
    display: flex;
    flex-direction: column;
}

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

.col_body {
    display: flex;
    flex-direction: column;
    gap: 20px;
    flex: 18;
    min-height: 0;
    height: 100%;
    width: 100%;
    padding: 10px 0;
    overflow-y: auto;
}

.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);
}

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

.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;
}

.col_footer {
    display: flex;
    justify-content: space-around;
    align-items: center;
    gap: 10px;
    flex: 1;
    width: 100%;

    button {
        width: 100%;
        height: 40px;
        border-radius: var(--border-radius);
        border: 1px solid var(--color-border);
        background-color: var(--color-primary-hover);
        color: white;
        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);
        }
    }
}

.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;
    }

}

.btn_secondary {
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: white !important;
    color: var(--color-text-primary) !important;
    border: 1 solid var(--color-border);
}

/* ----------------------- USERS - Stores Picker ----------------------- */
.stores_clickable_list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    flex: 1;
    min-height: 0;
    max-height: 260px;
    overflow-y: auto;
    padding: 8px;
    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: 7px;
    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;
    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: 10px;
}

.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);
}

/* Password con occhietto nel form utente */
.user_pw_wrapper {
    position: relative;
    display: flex;
    align-items: center;
}
.user_pw_wrapper input {
    width: 100%;
    padding-right: 38px;
}
.user_pw_toggle {
    position: absolute;
    right: 6px;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    padding: 0;
    border: none;
    background: transparent;
    color: #6b7280;
    cursor: pointer;
}
.user_pw_toggle:hover { color: #2563eb; }
.user_pw_toggle svg { width: 18px; height: 18px; }
.user_pw_toggle .hidden { display: none; }

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

.user_form_section {
    display: flex;
    flex-direction: column;
    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;
}

.user_form_footer .btn_primary {
    background-color: var(--color-primary-hover);
    color: #ffffff;
}

.user_form_footer .btn_primary:hover {
    background-color: var(--color-primary);
}

.user_form_footer .btn_secondary {
    background-color: #ffffff;
    color: var(--color-text-primary);
}

.user_form_footer .btn_secondary:hover {
    background-color: #f3f4f6;
}

@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_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;
    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;
}

.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: flex-start;
    height: 100%;
    width: 400px;
    min-width: 400px;
    max-width: 400px;
    background-color: #f7f9fb;
    line-height: normal;
    padding: 0;
    overflow: hidden;
}

.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: space-between;
    align-items: center;
    color: var(--color-bg-white);
    font-weight: 500;
    padding: 0 12px;
    flex-shrink: 0;
}

.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%;
}

.tab_filter {
    width: 100%;

    height: 40px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.col1 {
    justify-content: flex-start;

    i {
        background-color: var(--color-bg-white);
        padding: 10px;
    }
}

.col2 {
    padding: 0;

    input {
        width: 100%;
        height: 100%;
        background-color: var(--color-bg-white);
        border: 1px solid var(--color-bg-light);
        outline: none;
        padding: 0 15px;
        border-radius: var(--border-radius);

    }
}

.col3 {
    justify-content: flex-end;
}

.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;
}


.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);
}


.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;
    height: 100%;
    overflow-y: auto;
    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;

}

.sezione_titolo {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: var(--color-bg-light);
    padding: 0 10px;
    border-radius: 10px;

    h3 {
        flex: 9;
    }

    i {
        flex: 1
    }

    i.active {
        transform: rotate(180deg);
    }
}

.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;
    padding: 0 10px;
    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;
}


.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;
}


.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;
}


.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;
}


.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;
}

/* ========================================= */
/* === Stili Filtri Attivazioni === */
/* ========================================= */

/* ========================================= */
/* === Filter Sidebar Drawer (Desktop) === */
/* ========================================= */

.filter_area {
    position: fixed;
    top: var(--header-height);
    right: 0;
    width: 100%;
    height: calc(100% - var(--header-height));
    background: rgba(0, 0, 0, 0);
    z-index: 900;
    visibility: hidden;
    transition: background 0.3s ease, visibility 0.3s;
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
    pointer-events: none;
}

.filter_area.active {
    visibility: visible;
    background: rgba(0, 0, 0, 0.35);
    pointer-events: all;
}

.filter_sheet {
    background: white;
    width: 360px;
    height: 100%;
    transform: translateX(100%);
    transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
    display: flex;
    flex-direction: column;
    box-shadow: none;
    border-radius: 0;
    overflow: hidden;
    pointer-events: all;
}

.filter_area.active .filter_sheet {
    transform: translateX(0);
}

.filter_drag_handle {
    display: none;
}

.filter_header_panel {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px 20px;
    border-bottom: 1px solid var(--color-border);
    flex-shrink: 0;
}

.filter_header_panel_left {
    display: flex;
    align-items: center;
    gap: 10px;
}

.filter_header_panel_left svg {
    width: 18px;
    height: 18px;
    stroke: #374151;
    flex-shrink: 0;
}

.filter_header_panel h3 {
    margin: 0;
    font-size: 13px;
    font-weight: 700;
    color: #374151;
    letter-spacing: 1.5px;
    text-transform: uppercase;
}

.filter_close_btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 6px;
    cursor: pointer;
    color: #6b7280;
    transition: background 0.15s, color 0.15s;
}

.filter_close_btn:hover {
    background: #f3f4f6;
    color: #111;
}

/* Pulsante "Filtri": solo testo, senza icona. Stessa altezza e stesso
   stile del pulsante impostazioni accanto; la larghezza segue la parola. */
.filters_btn_desktop {
    background: #f8faff;
    color: #2563eb;
    height: 36px;
    padding: 0 14px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.15s;
    border: 1px solid #d1d9f0;
    margin-right: 4px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.06);
    font-size: .8rem;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    white-space: nowrap;
    user-select: none;
}

.filters_btn_desktop:hover,
.filters_btn_desktop.active {
    background: #eff6ff;
    border-color: #93c5fd;
}

.filters_btn_desktop:focus-visible {
    outline: 2px solid #93c5fd;
    outline-offset: 2px;
}

.filtri_container {
    display: flex;
    flex-direction: column;
    gap: 0;
    padding: 0;
    overflow: hidden;
    flex: 1;
    background: none;
    border: none;
}

.filtri_inputs_body {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 20px 20px 10px;
    overflow-y: auto;
    flex: 1;
    min-height: 0;
    scrollbar-width: thin;
    scrollbar-color: rgba(0,0,0,0.15) transparent;
}

.filtri_inputs_body::-webkit-scrollbar {
    width: 3px;
}

.filtri_inputs_body::-webkit-scrollbar-track {
    background: transparent;
}

.filtri_inputs_body::-webkit-scrollbar-thumb {
    background: rgba(0,0,0,0.15);
    border-radius: 2px;
}

.filtri_inputs_body::-webkit-scrollbar-thumb:hover {
    background: rgba(0,0,0,0.3);
}

.filtri_date_group {
    display: flex;
    flex-direction: row;
    gap: 12px;
    width: 100%;
}

.filtri_date_group .filtro_gruppo {
    flex: 1;
}

/* Autocomplete sportello */
.filtro_autocomplete_wrapper {
    position: relative;
    width: 100%;
}

.filtro_input_clear_wrapper {
    position: relative;
    width: 100%;
    display: flex;
    align-items: center;
}

.filtro_input_clear_wrapper .filtro_input {
    padding-right: 32px;
}

.filtro_input_clear_btn {
    position: absolute;
    right: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    padding: 0;
    background: #e2e8f0;
    border: none;
    border-radius: 50%;
    cursor: pointer;
    color: #64748b;
    flex-shrink: 0;
}

.filtro_input_clear_btn:hover {
    background: #cbd5e1;
    color: #0f172a;
}

.filtro_input_clear_btn svg {
    width: 10px;
    height: 10px;
    pointer-events: none;
}

.filtro_autocomplete_list {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    background: #fff;
    border: 1px solid #7f8c8d;
    border-radius: 8px;
    max-height: 180px;
    overflow-y: auto;
    z-index: 100;
    list-style: none;
    margin: 0;
    padding: 4px 0;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

.filtro_autocomplete_list.hidden {
    display: none;
}

.filtro_autocomplete_list li {
    padding: 8px 12px;
    font-size: 13px;
    cursor: pointer;
    color: #333;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.filtro_autocomplete_list li:hover,
.filtro_autocomplete_list li.selected {
    background: #eff6ff;
    color: var(--color-primary);
}

/* Multiselect custom: input trigger + popup checkbox */
.filtro_multiselect_wrapper {
    position: relative;
    width: 100%;
}

.filtro_multiselect_trigger {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 42px;
    padding: 0 12px;
    border: 1px solid #7f8c8d;
    border-radius: 8px;
    font-size: 14px;
    background: #fff;
    cursor: pointer;
    user-select: none;
    box-sizing: border-box;
    gap: 8px;
    transition: border-color 0.2s, box-shadow 0.2s;
}

.filtro_multiselect_trigger.open,
.filtro_multiselect_trigger:focus-within {
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px rgba(11, 102, 221, 0.1);
}

.filtro_multiselect_label {
    flex: 1;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    color: #555;
}

.filtro_multiselect_label.has-value {
    color: #111;
    font-weight: 500;
}

.filtro_multiselect_arrow {
    flex-shrink: 0;
    color: #6b7280;
    transition: transform 0.2s;
}

.filtro_multiselect_trigger.open .filtro_multiselect_arrow {
    transform: rotate(180deg);
}

.filtro_multiselect_dropdown {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    background: #fff;
    border: 1px solid #7f8c8d;
    border-radius: 8px;
    z-index: 200;
    box-shadow: 0 4px 16px rgba(0,0,0,0.12);
    overflow: hidden;
    display: none;
}

.filtro_multiselect_dropdown.open {
    display: block;
}

.filtro_multiselect_search {
    display: block;
    width: 100%;
    padding: 8px 12px;
    border: none;
    border-bottom: 1px solid #e5e7eb;
    font-size: 13px;
    outline: none;
    box-sizing: border-box;
}

.filtro_multiselect_options {
    max-height: 200px;
    overflow-y: auto;
    list-style: none;
    margin: 0;
    padding: 4px 0;
}

.filtro_multiselect_options li {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 7px 12px;
    font-size: 13px;
    cursor: pointer;
    color: #333;
    transition: background 0.1s;
}

.filtro_multiselect_options li:hover {
    background: #f3f4f6;
}

.filtro_multiselect_options li input[type="checkbox"] {
    width: 15px;
    height: 15px;
    accent-color: var(--color-primary);
    cursor: pointer;
    flex-shrink: 0;
}

.filtro_multiselect_options li.checked {
    background: #eff6ff;
    color: var(--color-primary);
    font-weight: 500;
}

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

/* Filtri a intervallo (colli, peso): i due estremi sulla stessa riga. */
.filtro_range_campi {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
}
.filtro_range_campi .filtro_input {
    flex: 1 1 0;
    min-width: 0;
    /* le frecce dei number rubano spazio a campi gia' stretti */
    -moz-appearance: textfield;
}
.filtro_range_campi .filtro_input::-webkit-outer-spin-button,
.filtro_range_campi .filtro_input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
.filtro_range_sep {
    flex: 0 0 auto;
    color: #94a3b8;
    font-weight: 700;
}

.filtro_gruppo label {
    font-size: 12px;
    font-weight: 600;
    color: #333;
    text-transform: uppercase;
}

.filtro_date_wrapper {
    position: relative;
    display: flex;
    align-items: center;
    width: 100%;
}

.filtro_date_icon {
    position: absolute;
    left: 10px;
    width: 16px;
    height: 16px;
    color: #7f8c8d;
    stroke: #7f8c8d;
    pointer-events: none;
    flex-shrink: 0;
    z-index: 1;
}

.filtro_date_wrapper .filtro_input {
    padding-left: 32px;
}

.filtro_date_wrapper .filtro_input::-webkit-calendar-picker-indicator {
    opacity: 0;
    cursor: pointer;
}

.filtro_input,
.filtro_select {
    height: 42px;
    padding: 8px 12px;
    border: 1px solid #7f8c8d;
    border-radius: 8px;
    font-size: 14px;
    background-color: #fff;
    transition: all 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;
}

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

.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;
}

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

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

@media (max-width: 768px) {
    .filtri_date_group {
        width: 100%;
        gap: 10px;
    }
}

.report_filtri,
.global_filtri {
    display: flex;
    flex-direction: column;
    gap: 0;
    background: none;
    border: none;
    border-radius: 0;
    width: 100%;
}

.report_filtri .filtro_gruppo {
    flex-direction: column;
}

.filtro_buttons_right {
    display: flex !important;
    flex-direction: row !important;
    align-items: stretch;
    gap: 8px;
    padding: 12px 20px 12px;
    border-top: 1px solid var(--color-border);
    flex-shrink: 0;
}

.filter_import_btn_area {
    padding: 0 20px 20px;
    flex-shrink: 0;
}

.btn_import_provvigioni {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    height: 44px;
    background: #1e293b;
    color: #fff;
    border: none;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    letter-spacing: 0.03em;
    transition: background 0.15s;
}
.btn_import_provvigioni:hover {
    background: #0f172a;
}

.filtro_buttons_right .btn_filtro {
    flex: 1;
    height: 44px;
    font-size: 14px;
    font-weight: 700;
    border-radius: 8px;
}

.filtro_select_tipo {
    min-width: 130px !important;
    font-weight: 600;
    background: #fff;
    color: #333;
    border: 2px solid #10b981;
}

#report_filtro_target {
    width: 100%;
    min-width: 0;
}

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

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

.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;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    transition: all 0.2s ease;
}
.global_filtri #btn_users_nuovo.visible {
    display: flex !important;
}

.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: #16a34a;
    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: #16a34a;
}

.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: #0d9488;
    --bottone-green-dark: #0f766e;
    --bottone-green-light: #ccfbf1;
    --bottone-border: #e2e8f0;
    --bottone-bg-alt: #f8fafc;
    --bottone-label-bg: #f1f5f9;
    --bottone-text: #334155;
    --bottone-text-muted: #64748b;
    --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;
    padding: 24px;
    overflow-x: auto;
    max-width: 100%;
}

.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;
}

.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_trimestri_titolo {
    margin: 0 0 12px 0;
    font-size: 1rem;
    font-weight: 700;
    color: var(--bottone-green-dark);
}

.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;
}

.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_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: 6px;
}

.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(13, 148, 136, 0.2);
}

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

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

/* Riga selettore vista (Totale / All Around / Ditifet) al posto del titolo */
.bottone_selector_row {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 4px;
}

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

.bottone_selector_select {
    padding: 8px 14px;
    font-size: 1rem;
    font-weight: 600;
    color: var(--bottone-green-dark);
    background: var(--bottone-green-light);
    border: 1px solid rgba(13, 148, 136, 0.3);
    border-radius: 8px;
    cursor: pointer;
    min-width: 180px;
}

.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) */
.bottone_blocco_titolo {
    padding: 10px 14px;
    font-size: 12px;
    font-weight: 700;
    color: var(--bottone-green-dark);
    background: var(--bottone-green-light);
    border-bottom: 1px solid rgba(13, 148, 136, 0.2);
}

/* 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_item {
    display: flex;
    align-items: baseline;
    gap: 6px;
}

.bottone_summary_label {
    font-size: 11px;
    font-weight: 600;
    opacity: 0.95;
}

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

/* 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(13, 148, 136, 0.04);
}

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

.bottone_data_row:nth-child(even):hover {
    background-color: rgba(13, 148, 136, 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(13, 148, 136, 0.2);
}

.bottone_cell_input:hover {
    border-color: #94a3b8;
}

.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: max-content;
    min-width: 100%;
}

.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,
.body_area.report_table_scroll .header_row,
.body_area.report_table_scroll .body_row {
    min-width: max-content;
    flex-shrink: 0;
}

.body_area.report_table_scroll .report_header_row,
.body_area.report_table_scroll .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 {
    /* Rimosso lo spazio/linea verticale a sinistra delle piste */
    display: none;
}

.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 1.2fr 2fr;
    gap: 16px;
    width: 100%;
}

.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-bottom: 10px;
    border-bottom: 1px solid var(--color-border-light);
    margin-bottom: 10px;
}

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

.mm_col_header_total {
    font-size: 0.72rem;
    font-weight: 600;
    color: #dc2626;
    background: #fee2e2;
    border-radius: 5px;
    padding: 4px 9px;
    margin-left: 6px;
    letter-spacing: 0.01em;
}

.btn_compact {
    padding: 4px 10px;
    font-size: 0.75rem;
    line-height: 1.2;
}

.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_empty {
    padding: 12px 16px;
    font-size: 12px;
    color: #6b7280;
}

.stores_costi_saved_title {
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px dashed #cbd5e1;
    font-size: 11px;
    font-weight: 700;
    color: #64748b;
}

.stores_costo_row {
    cursor: default;
}

.stores_costo_main {
    font-weight: 700;
    font-size: 12px;
}

.stores_costo_row_auto {
    background: #f0f7ff;
    color: #1d4ed8;
}

.stores_costo_row_auto .stores_costo_main {
    color: #1d4ed8;
}

.stores_costo_sub {
    margin-top: 2px;
    font-size: 11px;
    color: #64748b;
}

.modal_content.modal_import_op_costi {
    width: min(calc(100vw - 32px), 1400px);
    max-width: calc(100vw - 32px);
    height: calc(100vh - 48px);
    max-height: calc(100vh - 48px);
    display: flex;
    flex-direction: column;
}

.modal_import_op_costi .modal_body_scroll {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 16px 20px;
    overflow: hidden;
}

.import_op_costi_top {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-shrink: 0;
}

.import_op_costi_file_label {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    background: #f8fafc;
    cursor: pointer;
    font-size: 0.85rem;
    color: #475569;
    white-space: nowrap;
    transition: border-color 0.15s;
}

.import_op_costi_file_label:hover {
    border-color: #3b82f6;
    color: #1d4ed8;
}

#operatori_costi_preview {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    overflow: hidden;
}

.csv_prev_scroll_x {
    overflow-x: auto;
    overflow-y: hidden;
    flex-shrink: 0;
    border-bottom: 1px solid #e2e8f0;
}

.csv_prev_head {
    display: grid;
    background: #f8fafc;
    min-width: max-content;
}

.csv_prev_th {
    padding: 7px 10px;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #64748b;
    border-right: 1px solid #e2e8f0;
    white-space: nowrap;
}

.csv_prev_body_wrap {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    overflow-x: auto;
}

.csv_prev_body {
    min-width: max-content;
}

.csv_prev_row {
    display: grid;
    border-bottom: 1px solid #f1f5f9;
}

.csv_prev_row:last-child {
    border-bottom: none;
}

.csv_prev_td {
    padding: 6px 10px;
    font-size: 0.82rem;
    color: #0f172a;
    border-right: 1px solid #f1f5f9;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 200px;
}

.csv_prev_scrollbar_x {
    overflow-x: auto;
    overflow-y: hidden;
    flex-shrink: 0;
    border-top: 1px solid #e2e8f0;
}

.csv_prev_scrollbar_x_inner {
    height: 1px;
}

.stores_costi_table {
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    overflow: hidden;
    margin-top: 8px;
}

.stores_table_actions_right {
    display: flex;
    justify-content: flex-end;
    margin-top: 8px;
}

.stores_costi_table_head,
.stores_costi_table_row {
    display: grid;
    grid-template-columns: 1.2fr 0.8fr 0.8fr 0.8fr;
    gap: 8px;
    padding: 8px 10px;
    font-size: 12px;
    align-items: center;
}

.stores_operatori_table .stores_costi_table_head,
.stores_operatori_table .stores_costi_table_row {
    grid-template-columns: 1.4fr 1fr 1fr;
}

.stores_costi_table_head_actions,
.stores_costi_table_row_actions {
    grid-template-columns: 1.2fr 0.8fr 0.8fr 0.8fr 64px;
}

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

.stores_costi_table_head {
    background: #f8fafc;
    color: #64748b;
    font-weight: 700;
    border-bottom: 1px solid #e2e8f0;
}

.stores_costi_table_row {
    border-bottom: 1px solid #eef2f7;
}

.stores_costi_table_row:last-child {
    border-bottom: none;
}

.modal_store_costi {
    width: min(480px, 92vw);
    border-radius: 16px;
}

.modal_store_costi_bulk {
    width: min(780px, 92vw) !important;
}

.sc_bulk_head,
.sc_bulk_row {
    display: grid;
    grid-template-columns: 1.6fr 1fr 1fr 1fr 28px;
    gap: 10px;
    align-items: center;
    padding: 8px 24px;
}

.sc_bulk_head {
    background: #f8fafc;
    border-bottom: 1px solid #e2e8f0;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #64748b;
    position: sticky;
    top: 0;
    z-index: 1;
}

.sc_bulk_row {
    border-bottom: 1px solid #f1f5f9;
}

.sc_bulk_row:last-child {
    border-bottom: none;
}

.sc_bulk_icon_wrap {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 7px;
    margin-right: 9px;
    flex-shrink: 0;
}

.sc_bulk_icon_wrap i {
    font-size: 0.85rem;
}

.sc_bulk_label {
    display: flex;
    align-items: center;
    font-size: 0.85rem;
    font-weight: 600;
    color: #0f172a;
}

.sc_bulk_row input[type="number"],
.sc_bulk_row input[type="date"] {
    padding: 7px 10px;
    font-size: 0.83rem;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    background: #fff;
    color: #0f172a;
    outline: none;
    width: 100%;
    transition: border-color 0.15s;
}

.sc_bulk_row input:focus {
    border-color: #3b82f6;
    box-shadow: 0 0 0 3px rgba(59,130,246,0.1);
}

.sc_bulk_row input[type="number"]::placeholder {
    color: #cbd5e1;
}

.sc_bulk_body {
    overflow-y: auto;
    max-height: calc(100vh - 240px);
}

.sc_bulk_row_del {
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.sc_bulk_add_row {
    padding: 8px 12px;
    border-top: 1px solid #e2e8f0;
}

.sc_bulk_row_custom .sc_bulk_tipologia_custom {
    font-size: 0.85rem;
    padding: 6px 8px;
    border: 1px solid #d1d5db;
    border-radius: 4px;
    width: 100%;
    box-sizing: border-box;
}

.sc_bulk_head_5col {
    /* already handled by the shared grid-template-columns */
}

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

.modal_store_costi_close {
    border: none;
    background: transparent;
    color: #0f172a;
    cursor: pointer;
    width: 28px;
    height: 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
}

.modal_store_costi_close:hover {
    background: #f1f5f9;
}

.modal_store_costi .settings_form {
    padding: 0;
    display: flex;
    flex-direction: column;
}

.modal_store_costi .settings_form .form_group {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.modal_store_costi .settings_form label {
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #64748b;
}

.modal_store_costi .settings_form input,
.modal_store_costi .settings_form select {
    padding: 9px 12px;
    font-size: 0.88rem;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    background: #fff;
    color: #0f172a;
    outline: none;
    transition: border-color 0.15s;
}

.modal_store_costi .settings_form input:focus,
.modal_store_costi .settings_form select:focus {
    border-color: #3b82f6;
    box-shadow: 0 0 0 3px rgba(59,130,246,0.1);
}

.modal_store_costi .settings_form input[readonly] {
    background: #f8fafc;
    color: #94a3b8;
    cursor: not-allowed;
}

.modal_store_costi .modal_body_scroll {
    padding: 0;
}

.modal_store_costi .form_section {
    padding: 16px 24px;
    border-bottom: 1px solid #f1f5f9;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.modal_store_costi .form_section:last-child {
    border-bottom: none;
}

.modal_content.modal_operatori_costi_full {
    width: min(3600px, calc(100vw - 8px)) !important;
    max-width: calc(100vw - 8px) !important;
    height: calc(100vh - 12px) !important;
    max-height: calc(100vh - 12px) !important;
}

.op_full_layout {
    display: grid;
    grid-template-columns: 0.75fr 3.25fr;
    gap: 12px;
    height: 100%;
    min-height: 0;
    max-height: calc(100vh - 90px);
}

.op_full_left,
.op_full_right {
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    background: #fff;
}

.op_full_left {
    overflow: hidden;
    display: flex;
    flex-direction: column;
    min-height: 0;
}

.op_full_left_head {
    padding: 8px 10px;
    background: #f8fafc;
    color: #64748b;
    font-weight: 700;
    font-size: 12px;
    border-bottom: 1px solid #e2e8f0;
}

.op_full_left_list {
    overflow: auto;
    min-height: 0;
}

.op_full_list_item {
    width: 100%;
    border: none;
    border-bottom: 1px solid #eef2f7;
    background: #fff;
    text-align: left;
    padding: 10px 10px;
    cursor: pointer;
    display: block;
}

.op_full_list_item:hover {
    background: #f8fafc;
}

.op_full_list_item.active {
    background: #eff6ff;
}

.op_full_list_nome {
    font-size: 12px;
    font-weight: 700;
    color: #0f172a;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.op_full_list_cf {
    font-size: 12px;
    color: #0f172a;
    font-weight: 700;
    white-space: nowrap;
}

.op_full_right {
    overflow: auto;
    padding: 10px;
    min-height: 0;
}

.op_full_detail_grid {
    column-count: 2;
    column-gap: 16px;
}

.op_full_detail_row {
    display: inline-grid;
    width: 100%;
    display: grid;
    grid-template-columns: minmax(160px, 240px) minmax(0, 1fr);
    gap: 10px;
    border-bottom: 1px solid #eef2f7;
    padding: 0 0 6px 0;
    margin: 0 0 6px 0;
    break-inside: avoid;
    page-break-inside: avoid;
}

.op_full_detail_key {
    font-size: 11px;
    color: #64748b;
    font-weight: 700;
}

.op_full_detail_val {
    font-size: 12px;
    color: #0f172a;
    white-space: normal;
    overflow-wrap: anywhere;
    word-break: break-word;
    line-height: 1.35;
}

@media (max-width: 900px) {
    .op_full_layout {
        grid-template-columns: 1fr;
    }
    .op_full_detail_grid {
        column-count: 1;
    }
    .op_full_detail_row {
        grid-template-columns: 1fr;
        gap: 4px;
    }
}

.store_costi_dates_row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

.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: 700;
}

.mm_cell_toggle {
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    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;
}

.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;
}

/* ── Performance tab bar ── */
#perf_tab_bar_container {
    flex-shrink: 0;
    width: 100%;
}

.perf_tab_bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;;
    background: #fff;
    width: 100%;
    box-sizing: border-box;
}

.perf_tab_title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 15px;
    font-weight: 700;
    color: #0f172a;
}

.perf_tab_title svg {
    color: var(--color-primary, #0b66dd);
}

.perf_tab_selector {
    display: inline-flex;
    gap: 4px;
    padding: 3px;
    border-radius: 10px;
    background: linear-gradient(135deg, #0b66dd 0%, #0857bc 100%);
}

.perf_tab_btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 14px;
    font-size: 12px;
    font-weight: 700;
    border: none;
    border-radius: 8px;
    background: transparent;
    color: #fff;
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
}

.perf_tab_btn.active {
    background: #fff;
    color: #0b66dd;
}

.perf_tab_selector.perf_src_report_operatori {
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
}
.perf_tab_selector.perf_src_report_operatori .perf_tab_btn.active {
    color: #10b981;
}

.perf_tab_selector.perf_src_report_stores {
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
}
.perf_tab_selector.perf_src_report_stores .perf_tab_btn.active {
    color: #f59e0b;
}

/* ── Attivazioni tab bar ── */
#attiv_tab_bar_container {
    flex-shrink: 0;
    width: 100%;
}

.attiv_tab_bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    background: #fff;
    width: 100%;
    box-sizing: border-box;
}

.attiv_tab_left {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
}

.attiv_tab_title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 15px;
    font-weight: 700;
    color: #0f172a;
    white-space: nowrap;
}

.attiv_tab_title svg {
    color: #8b5cf6;
}

/* Select competenza accanto al titolo (tab Provvigioni in Contabilità) */
.econ_provv_periodo {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 8px;
    min-width: 0;
}
.econ_provv_periodo label {
    font-size: 11px;
    font-weight: 700;
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    white-space: nowrap;
}
.econ_provv_periodo select {
    appearance: none;
    -webkit-appearance: none;
    min-width: 150px;
    padding: 7px 30px 7px 12px;
    font-size: 13px;
    font-weight: 600;
    color: #0f172a;
    background-color: #fff;
    border: 1px solid #cbd5e1;
    border-radius: 8px;
    cursor: pointer;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2.5' stroke-linecap='round'><polyline points='6 9 12 15 18 9'/></svg>");
    background-repeat: no-repeat;
    background-position: right 10px center;
    transition: border-color 0.15s, box-shadow 0.15s;
}
.econ_provv_periodo select:hover { border-color: #94a3b8; }
.econ_provv_periodo select:focus {
    outline: none;
    border-color: #8b5cf6;
    box-shadow: 0 0 0 2px rgba(139,92,246,0.18);
}

.attiv_tab_counts {
    display: flex;
    align-items: center;
    gap: 4px;
}

.attiv_tab_count {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 12px;
    font-weight: 500;
    color: #94a3b8;
    padding: 3px 10px;
    border-radius: 6px;
    white-space: nowrap;
    border: 1px solid transparent;
    letter-spacing: 0.01em;
}

.attiv_tab_count .atc_num {
    font-size: 13px;
    font-weight: 700;
    color: #1e293b;
}

.attiv_tab_count .atc_label {
    font-size: 11px;
    font-weight: 500;
    color: #94a3b8;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.attiv_tab_count .atc_dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    flex-shrink: 0;
}

.attiv_count_acq .atc_dot { background: #22c55e; }
.attiv_count_sto .atc_dot { background: #f97316; }
.attiv_count_non .atc_dot { background: #eab308; }
.attiv_count_vinte .atc_dot { background: #22c55e; }
.attiv_count_perse .atc_dot { background: #ef4444; }
.attiv_count_pratiche .atc_dot { background: #3b82f6; }

.attiv_count_pratiche .atc_num { color: #2563eb; }
.attiv_count_acq .atc_num { color: #16a34a; }
.attiv_count_sto .atc_num { color: #ea580c; }
.attiv_count_non .atc_num { color: #ca8a04; }

/* Filtro segmentato "Da Pagare" (tab Adesioni CER) */
.cer_pag_filter {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 2px;
    background: #f1f5f9;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
}
#group_cer_pagare .cer_pag_btn { flex: 1; text-align: center; }
.cer_pag_btn {
    border: 1px solid transparent;
    background: transparent;
    color: #475569;
    font-size: 12px;
    font-weight: 600;
    padding: 3px 10px;
    border-radius: 6px;
    cursor: pointer;
    transition: background 0.12s, color 0.12s, border-color 0.12s;
}
.cer_pag_btn:hover { background: #e2e8f0; }
.cer_pag_btn.active {
    background: #fff;
    color: #2563eb;
    border-color: #bfdbfe;
    box-shadow: 0 1px 2px rgba(0,0,0,0.06);
}

.attiv_count_clickable {
    cursor: pointer;
    transition: background 0.12s, border-color 0.12s;
}
.attiv_count_clickable:hover {
    background: #f8fafc;
    border-color: #e2e8f0;
}
.attiv_count_active {
    background: #f5f3ff;
    border-color: #c4b5fd;
}
.attiv_count_active .atc_num {
    color: #7c3aed;
}

.import_mesi_pills {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-wrap: wrap;
}

.attiv_mese_btn {
    padding: 3px 10px;
    font-size: 11px;
    font-weight: 600;
    border: 1px solid #e2e8f0;
    border-radius: 20px;
    background: #f8fafc;
    color: #64748b;
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.12s, border-color 0.12s, color 0.12s;
}

.attiv_mese_btn.active {
    background: #ede9fe;
    border-color: #a78bfa;
    color: #6d28d9;
}

.attiv_mese_btn:hover {
    border-color: #a78bfa;
    color: #6d28d9;
}

.attiv_tab_search {
    display: flex;
    align-items: center;
    gap: 6px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    padding: 4px 10px;
    flex: 1;
    max-width: 280px;
}

.attiv_tab_search svg {
    color: #94a3b8;
    flex-shrink: 0;
}

.attiv_tab_search input {
    border: none;
    background: transparent;
    outline: none;
    font-size: 13px;
    color: #334155;
    width: 100%;
}

.attiv_tab_search input::placeholder {
    color: #94a3b8;
}

.attiv_tab_search.hidden {
    visibility: hidden;
    pointer-events: none;
}

.attiv_tab_selector {
    display: inline-flex;
    gap: 4px;
    padding: 3px;
    border-radius: 10px;
    background: linear-gradient(135deg, #8b5cf6 0%, #7c3aed 100%);
    transition: background 0.25s;
}

/* Colori per tab attivo — attivazioni */
.attiv_tab_bar[data-tab="attivazioni"] .attiv_tab_selector { background: linear-gradient(135deg, #8b5cf6 0%, #7c3aed 100%); }
.attiv_tab_bar[data-tab="attivazioni"] .attiv_tab_btn.active { color: #7c3aed; }

.attiv_tab_bar[data-tab="pod_doppo"] .attiv_tab_selector { background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%); }
.attiv_tab_bar[data-tab="pod_doppo"] .attiv_tab_btn.active { color: #d97706; }

.attiv_tab_bar[data-tab="importazioni"] .attiv_tab_selector { background: linear-gradient(135deg, #0ea5e9 0%, #0284c7 100%); }
.attiv_tab_bar[data-tab="importazioni"] .attiv_tab_btn.active { color: #0284c7; }

.attiv_tab_bar[data-tab="costi"] .attiv_tab_selector { background: linear-gradient(135deg, #10b981 0%, #059669 100%); }
.attiv_tab_bar[data-tab="costi"] .attiv_tab_btn.active { color: #059669; }

/* Colori per tab attivo — contabilità */
.attiv_tab_bar[data-tab="provvigioni"] .attiv_tab_selector { background: linear-gradient(135deg, #0ea5e9 0%, #0284c7 100%); }
.attiv_tab_bar[data-tab="provvigioni"] .attiv_tab_btn.active { color: #0284c7; }

/* Colori per tab attivo — operatività */
.attiv_tab_bar[data-tab="telefonate"] .attiv_tab_selector { background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%); }
.attiv_tab_bar[data-tab="telefonate"] .attiv_tab_btn.active { color: #2563eb; }

.attiv_tab_bar[data-tab="calendario"] .attiv_tab_selector { background: linear-gradient(135deg, #f43f5e 0%, #e11d48 100%); }
.attiv_tab_bar[data-tab="calendario"] .attiv_tab_btn.active { color: #e11d48; }

.attiv_tab_bar[data-tab="efficienza"] .attiv_tab_selector { background: linear-gradient(135deg, #06b6d4 0%, #0891b2 100%); }
.attiv_tab_bar[data-tab="efficienza"] .attiv_tab_btn.active { color: #0891b2; }

.attiv_tab_btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 14px;
    font-size: 12px;
    font-weight: 700;
    border: none;
    border-radius: 8px;
    background: transparent;
    color: #fff;
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
}

.attiv_tab_btn.active {
    background: #fff;
    color: #8b5cf6;
}

/* ── Importazioni inline panel ── */
.attiv_import_wrap {
    display: flex;
    flex-direction: column;
    gap: 0;
    height: 100%;
}

.attiv_prog_wrap {
    border-bottom: 2px solid #e2e8f0;
    padding-bottom: 0;
}

.attiv_prog_title {
    font-size: 11px;
    font-weight: 700;
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 10px 12px 6px;
}

.attiv_prog_table_header {
    display: grid;
    grid-template-columns: 110px 60px 60px 70px 90px 90px 90px;
    gap: 0;
    padding: 6px 12px;
    background: #f8fafc;
    border-bottom: 1px solid #e2e8f0;
    border-top: 1px solid #e2e8f0;
    position: sticky;
    top: 0;
    z-index: 1;
}

.attiv_prog_table_body {
    overflow-y: auto;
    max-height: 220px;
}

.attiv_prog_row {
    display: grid;
    grid-template-columns: 110px 60px 60px 70px 90px 90px 90px;
    gap: 0;
    padding: 6px 12px;
    border-bottom: 1px solid #f1f5f9;
    align-items: center;
}

.attiv_prog_row:hover {
    background: #f8fafc;
}

.attiv_prog_cum {
    font-weight: 600;
    color: #6d28d9;
    font-size: 12px;
}

.attiv_import_table_header {
    display: grid;
    grid-template-columns: 110px 1fr 140px 150px 60px 60px 60px 100px;
    gap: 0;
    padding: 8px 12px;
    background: #f8fafc;
    border-bottom: 1px solid #e2e8f0;
    position: sticky;
    top: 0;
    z-index: 1;
}

.attiv_import_th {
    font-size: 11px;
    font-weight: 700;
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 0 4px;
}

.attiv_import_th_num {
    text-align: center;
}

.attiv_import_table_body {
    flex: 1;
    overflow-y: auto;
}

.attiv_import_row {
    display: grid;
    grid-template-columns: 110px 1fr 140px 150px 60px 60px 60px 100px;
    gap: 0;
    padding: 8px 12px;
    border-bottom: 1px solid #f1f5f9;
    align-items: center;
    cursor: pointer;
    transition: background 0.1s;
}

.attiv_import_row:hover {
    background: #f8fafc;
}

.attiv_import_row.selected {
    background: #eff6ff;
    border-left: 3px solid #8b5cf6;
}

.attiv_import_td {
    font-size: 13px;
    color: #334155;
    padding: 0 4px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.attiv_import_td_num {
    text-align: center;
}

.attiv_import_comp {
    font-weight: 700;
    color: #1e293b;
}

.attiv_import_file {
    color: #64748b;
    font-size: 12px;
}

.attiv_import_date {
    color: #64748b;
    font-size: 12px;
}

.attiv_import_badge {
    display: inline-block;
    padding: 2px 7px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 700;
}

.badge_acq { background: #d1fae5; color: #065f46; }
.badge_sto { background: #fee2e2; color: #991b1b; }
.badge_non { background: #fef3c7; color: #92400e; }

.attiv_import_view_btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 10px;
    font-size: 12px;
    font-weight: 600;
    background: #8b5cf6;
    color: #fff;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    transition: background 0.15s;
}
.attiv_import_view_btn:hover { background: #7c3aed; }

.attiv_import_loading,
.attiv_import_empty,
.attiv_import_error {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 48px 20px;
    color: #94a3b8;
    font-size: 14px;
    flex-direction: column;
}

.attiv_import_error { color: #ef4444; }

/* ── Dettaglio righe CSV ── */
.attiv_import_detail {
    border-top: 2px solid #e2e8f0;
    background: #fff;
    display: flex;
    flex-direction: column;
    min-height: 0;
    flex: 1;
}

.attiv_detail_header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 16px;
    background: #f8fafc;
    border-bottom: 1px solid #e2e8f0;
}

.attiv_detail_comp {
    font-size: 14px;
    font-weight: 700;
    color: #1e293b;
}

.attiv_detail_close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    background: transparent;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    cursor: pointer;
    color: #64748b;
    font-size: 14px;
}
.attiv_detail_close:hover { background: #f1f5f9; }

.attiv_detail_tabs {
    display: flex;
    gap: 4px;
    padding: 8px 16px;
    border-bottom: 1px solid #e2e8f0;
    background: #fff;
}

.attiv_detail_tab {
    padding: 4px 12px;
    font-size: 12px;
    font-weight: 600;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    background: #fff;
    color: #64748b;
    cursor: pointer;
    transition: all 0.15s;
}
.attiv_detail_tab.active {
    background: #8b5cf6;
    color: #fff;
    border-color: #8b5cf6;
}

.attiv_detail_stats {
    display: flex;
    gap: 16px;
    padding: 8px 16px;
    border-bottom: 1px solid #f1f5f9;
    flex-wrap: wrap;
}

.attiv_stat {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: #64748b;
}
.attiv_stat strong { color: #1e293b; }
.attiv_stat_dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }
.attiv_stat_tot { font-weight: 600; margin-left: auto; }

.attiv_detail_body {
    flex: 1;
    overflow-y: auto;
    min-height: 200px;
    max-height: 380px;
}

/* ── Righe CSV nel dettaglio ── */
.attiv_rows_header {
    display: grid;
    grid-template-columns: 1fr 80px 120px 100px 100px 110px 120px;
    gap: 0;
    padding: 8px 16px;
    background: #f8fafc;
    border-bottom: 1px solid #e2e8f0;
    position: sticky;
    top: 0;
    z-index: 1;
}

.attiv_rows_th {
    font-size: 11px;
    font-weight: 700;
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding: 0 4px;
}

.attiv_rows_th_num { text-align: right; }

.attiv_rows_row {
    display: grid;
    grid-template-columns: 1fr 80px 120px 100px 100px 110px 120px;
    gap: 0;
    padding: 7px 16px;
    border-bottom: 1px solid #f1f5f9;
    align-items: center;
}
.attiv_rows_row:hover { background: #f8fafc; }

.attiv_rows_td {
    font-size: 12px;
    color: #334155;
    padding: 0 4px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.attiv_rows_td_num { text-align: right; font-weight: 600; }

/* ─────────────────────────────────────── */

.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;
}

@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 {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.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_expand_btn {
    background: none;
    border: none;
    color: #fff;
    cursor: pointer;
    padding: 2px 4px;
    font-size: 14px;
    opacity: 0.8;
    line-height: 1;
    flex-shrink: 0;
}

.classifica_expand_btn:hover {
    opacity: 1;
}

#classifica_fs_overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: 9999;
    background: rgba(0,0,0,0.5);
    display: flex;
    align-items: center;
    justify-content: center;
}

.classifica_fs_popup {
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 20px 60px rgba(0,0,0,0.3);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    width: 90vw;
    max-width: 1400px;
    height: 85vh;
}

.classifica_fs_overlay_header {
    background: #10b981;
    color: #fff;
    padding: 14px 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-weight: 700;
    font-size: 15px;
    text-transform: uppercase;
    flex-shrink: 0;
    gap: 12px;
    border-radius: 12px 12px 0 0;
}

.classifica_fs_overlay_title {
    display: flex;
    align-items: center;
    gap: 10px;
}

.classifica_fs_overlay_close {
    background: rgba(255,255,255,0.2);
    border: 1px solid rgba(255,255,255,0.4);
    color: #fff;
    border-radius: 6px;
    padding: 5px 12px;
    cursor: pointer;
    font-size: 13px;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 6px;
}

.classifica_fs_overlay_close:hover {
    background: rgba(255,255,255,0.35);
}

.classifica_item_clickable {
    cursor: pointer;
}

.classifica_item_clickable:hover {
    filter: brightness(0.95);
}

#attiv_op_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_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;
}

.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_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;
}

.attiv_op_period {
    font-size: 11px;
    font-weight: 400;
    opacity: 0.85;
    text-transform: none;
}

.attiv_op_body {
    flex: 1;
    overflow: auto;
    padding: 0;
    background: #f5f6f8;
    scrollbar-width: thin;
}

.attiv_op_loading,
.attiv_op_empty {
    padding: 40px;
    text-align: center;
    color: #888;
    font-size: 14px;
}

.attiv_op_table {
    width: 100%;
    min-width: 1000px;
}

.attiv_op_thead {
    display: grid;
    grid-template-columns: 90px 120px 150px 150px 1fr 150px 130px 120px 200px;
    background: #fff;
    border-bottom: 2px solid #e5e7eb;
    position: sticky;
    top: 0;
    z-index: 1;
}

.attiv_op_tbody .attiv_op_row {
    display: grid;
    grid-template-columns: 90px 120px 150px 150px 1fr 150px 130px 120px 200px;
    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;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    display: flex;
    align-items: center;
}

.attiv_op_td:last-child,
.attiv_op_td:nth-last-child(2),
.attiv_op_td:nth-last-child(3),
.attiv_op_td:nth-last-child(4) {
    font-size: 11px;
    white-space: normal;
    word-break: break-word;
    line-height: 1.3;
}

.attiv_op_td:nth-last-child(3) .opp_badge,
.attiv_op_td:nth-last-child(2) .status_badge {
    white-space: normal;
    word-break: break-word;
    text-align: center;
}

.attiv_op_td:nth-last-child(3) .opp_badge::before,
.attiv_op_td:nth-last-child(2) .status_badge::before {
    display: none;
}

.classifica_fs_overlay_body {
    flex: 1;
    display: flex;
    flex-direction: row;
    overflow-x: auto;
    overflow-y: auto;
    align-items: flex-start;
    padding: 12px 12px 12px 12px;
    gap: 0;
    background: #f5f6f8;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.classifica_fs_overlay_body::-webkit-scrollbar {
    display: none;
}

.classifica_fs_col {
    display: flex;
    flex-direction: column;
    min-width: 220px;
    flex-shrink: 0;
    background: transparent;
    overflow: hidden;
}

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

.classifica_fs_col .classifica_item {
    padding: 6px 12px;
    border-bottom: 1px solid #efefef;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 6px;
    margin: 2px 6px;
}

.classifica_fs_col .classifica_item:last-child {
    border-bottom: 1px solid #e5e7eb;
}

.classifica_fs_col .classifica_bar_bg {
    display: none;
}

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

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

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

.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_wrap {
    flex: 1;
    min-width: 0;
    padding: 0 5px;
    display: flex;
    flex-direction: column;
    gap: 3px;
}
.classifica_operatore {
    font-size: 13px;
    font-weight: 500;
    color: #1f2937;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.classifica_bar_bg {
    display: none;
}
.classifica_bar_fill {
    height: 100%;
    border-radius: 2px;
    transition: width 0.4s ease;
    background: #10b981;
}
.classifica_bar_fill.gold { background: #10b981; }
.classifica_bar_fill.silver { background: #6b7280; }
.classifica_bar_fill.bronze { background: #d97706; }
.classifica_bar_fill.default { background: #93c5fd; }

.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;
}

/* Blocco classifica in Obiettivi (per raggruppamento selezionato) */
.obiettivi_classifica_block {
    margin-top: 20px;
    padding: 16px;
    background: #f9fafb;
    border-radius: 12px;
    border: 1px solid #e5e7eb;
}

.obiettivi_classifica_block.hidden {
    display: none;
}

.obiettivi_classifica_header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 12px;
    font-weight: 600;
    color: #1f2937;
}

.obiettivi_classifica_header i {
    color: #f59e0b;
}

.obiettivi_classifica_body .classifica_card {
    margin-bottom: 0;
}

.obiettivi_classifica_body .classifica_card_body {
    max-height: 280px;
}

/* Contenitore per raggruppamento: titolo "Raggruppamento: SWA" e dentro le card template */
.classifica_raggruppamenti_wrap {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 20px;
    align-items: stretch;
    padding: 16px;
    width: 100%;
}


.classifica_raggruppamento_container {
    padding: 20px;
    background: #f3f4f6;
    border-radius: 12px;
    border: 1px solid #e5e7eb;
    flex: 0 0 auto;
    width: fit-content;
    min-width: 300px;
    display: flex;
    flex-direction: column;
}

.classifica_raggruppamento_container .classifica_grid_inside {
    flex: 1;
    align-items: flex-start;
}

.classifica_raggruppamento_container .classifica_grid_inside .classifica_card .classifica_card_body {
    max-height: 520px;
    padding-bottom: 12px;
}

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

.classifica_raggruppamento_header {
    font-size: 1.1rem;
    font-weight: 700;
    color: #1f2937;
    margin-bottom: 16px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.classifica_raggruppamento_header i {
    color: #059669;
}

.classifica_grid_inside {
    margin-top: 0;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 16px;
    align-items: flex-start;
}
.classifica_grid_inside .classifica_card {
    flex: 0 0 auto;
    width: 340px;
    max-width: 100%;
}

/* Sezioni classifica (legacy / altri usi) */
.classifica_section {
    margin-bottom: 24px;
}

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

.classifica_section_title {
    font-size: 1rem;
    font-weight: 600;
    color: #374151;
    margin: 0 0 12px 0;
    display: flex;
    align-items: center;
    gap: 8px;
}

.classifica_section_title i {
    color: #6b7280;
}

.classifica_card_subtitle {
    display: block;
    width: 100%;
    font-size: 0.8rem;
    color: #6b7280;
    font-weight: 400;
    margin-top: 2px;
}

.classifica_card .header_left_info {
    flex-wrap: wrap;
}

/* ========================================= */
/* === GARE PERSONALI ADDETTI === */
/* ========================================= */

.gare_personali_container {
    display: flex;
    flex-direction: column;
    gap: 15px;
    width: 100%;
}

.rop_header_bar {
    display: flex;
    justify-content: flex-end;
    padding: 4px 0 2px 0;
}

.rop_fullscreen_btn {
    background: none;
    border: 1px solid #ccc;
    border-radius: 6px;
    padding: 4px 8px;
    cursor: pointer;
    color: #555;
    font-size: 14px;
    line-height: 1;
    transition: background 0.15s, color 0.15s;
}

.rop_fullscreen_btn:hover {
    background: #f0f0f0;
    color: #222;
}

.table_body.rop_fullscreen {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: 9999;
    background: #f5f5f5;
    overflow-y: auto;
    padding: 16px;
    box-sizing: border-box;
}

.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);
}

/* 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 {
    font-size: 18px;
    font-weight: 700;
    color: #1f2937;
    min-width: 0;
    max-width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: flex;
    align-items: center;
}

.operatore_categorie {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 10px;
    grid-column: 1 / -1;
    align-items: flex-start;
}



.macro_categoria {
    min-width: 0;
}

.macro_header {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 4px;
    gap: 6px;
}

.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: 13px;
    font-weight: 700;
    color: #1f2937;
    white-space: nowrap;
}

.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: #111827;
    font-size: 10px;
    font-weight: 600;
}

.macro_perc {
    font-size: 13px;
    font-weight: 800;
    color: var(--color-primary);
    white-space: nowrap;
    text-align: right;
}


.macro_telefonate {
    background: #f0f9ff;
    border: 1px solid #bae6fd;
    border-radius: 8px;
}
.macro_telefonate .macro_nome { color: #0369a1; }
.macro_telefonate .macro_valore { color: #0369a1; }
.macro_telefonate .proiezione_testo { color: #0c4a6e; }

.macro_group_card {
    flex: 1 1 200px;
    min-width: 180px;
    background: #f8fafc;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    overflow: hidden;
}
.macro_group_card_title {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    color: #6b7280;
    padding: 6px 10px 5px;
    border-bottom: 1px solid #e5e7eb;
    background: #f1f5f9;
}
.macro_group_card_title i {
    font-size: 10px;
    color: #94a3b8;
}
.macro_group_card_body {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    padding: 10px;
}
.macro_group_card_body .macro_categoria {
    flex: 1 1 0;
    min-width: 140px;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    padding: 8px 10px;
}

/* ============================================================
   TIMELINE
   ============================================================ */

/* ============================================================
   CALENDARIO
   ============================================================ */
.table_body.cal_body {
    flex: 1;
    min-height: 0;
    overflow: hidden;
    display: flex;
    align-items: stretch;
}

.cal_layout {
    display: flex;
    height: 100%;
    width: 100%;
    overflow: hidden;
    gap: 0;
}

.cal_main {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    padding: 16px;
    gap: 12px;
}

.cal_toolbar {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.cal_nav_btn {
    background: #f1f5f9;
    border: none;
    border-radius: 6px;
    width: 30px;
    height: 30px;
    cursor: pointer;
    color: #475569;
    font-size: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s;
}
.cal_nav_btn:hover { background: #e2e8f0; }

.cal_month_label {
    font-size: 16px;
    font-weight: 700;
    color: #0f172a;
    min-width: 160px;
    text-align: center;
}

.cal_today_btn {
    background: #0b66dd;
    color: #fff;
    border: none;
    border-radius: 6px;
    padding: 4px 12px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s;
}
.cal_today_btn:hover { background: #0952b3; }

/* Pulsante "Nuovo appuntamento" */
.cal_new_app_btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: #10b981;
    color: #fff;
    border: none;
    border-radius: 6px;
    padding: 4px 12px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s;
}
.cal_new_app_btn:hover { background: #059669; }
.cal_new_app_btn_panel { margin-top: 12px; }
.cal_new_app_btn_header {
    margin-left: auto;
    padding: 4px 9px;
    border-radius: 50%;
    width: 30px;
    height: 30px;
    justify-content: center;
}

/* Modal nuovo appuntamento */
.cal_modal {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.45);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 3000;
}
.cal_modal.active { display: flex; }
.cal_modal_box {
    background: #fff;
    border-radius: 12px;
    width: 380px;
    max-width: calc(100vw - 32px);
    max-height: calc(100vh - 48px);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    box-shadow: 0 20px 50px rgba(0,0,0,0.25);
}
.cal_modal_header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 16px;
    border-bottom: 1px solid #f1f5f9;
    font-weight: 700;
    color: #1e293b;
    font-size: 0.95rem;
}
.cal_modal_header i { color: #10b981; margin-right: 4px; }
.cal_modal_header button {
    background: none; border: none; cursor: pointer; color: #94a3b8;
    font-size: 1.1rem; padding: 2px; border-radius: 4px;
}
.cal_modal_header button:hover { color: #ef4444; background: #fef2f2; }
.cal_modal_body {
    padding: 14px 16px;
    display: flex;
    flex-direction: column;
    gap: 11px;
    overflow-y: auto;
}
.cal_modal_row { display: flex; gap: 10px; }
.cal_modal_row .cal_modal_field { flex: 1; }
.cal_modal_field { display: flex; flex-direction: column; gap: 4px; }
.cal_modal_field > span {
    font-size: 0.72rem;
    font-weight: 700;
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}
.cal_modal_field input,
.cal_modal_field select,
.cal_modal_field textarea {
    border: 1px solid #e2e8f0;
    border-radius: 7px;
    padding: 7px 9px;
    font-size: 0.85rem;
    font-family: inherit;
    color: #1e293b;
    background: #fff;
}
.cal_modal_field input:focus,
.cal_modal_field select:focus,
.cal_modal_field textarea:focus {
    outline: none;
    border-color: #10b981;
    box-shadow: 0 0 0 2px rgba(16,185,129,0.15);
}
.cal_modal_field textarea { resize: vertical; }
.cal_modal_err { color: #dc2626; font-size: 0.78rem; font-weight: 600; min-height: 1em; }
.cal_modal_footer {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    padding: 12px 16px;
    border-top: 1px solid #f1f5f9;
}
.cal_modal_cancel {
    background: #f1f5f9; color: #475569; border: none; border-radius: 7px;
    padding: 8px 14px; font-size: 0.85rem; font-weight: 600; cursor: pointer;
}
.cal_modal_cancel:hover { background: #e2e8f0; }
.cal_modal_save {
    background: #10b981; color: #fff; border: none; border-radius: 7px;
    padding: 8px 16px; font-size: 0.85rem; font-weight: 600; cursor: pointer;
    transition: background 0.15s;
}
.cal_modal_save:hover { background: #059669; }
.cal_modal_save:disabled { opacity: 0.6; cursor: wait; }

.cal_legend {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 11px;
    color: #64748b;
    margin-left: 8px;
}
.cal_legend_dot {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 3px;
}

.cal_stats {
    margin-left: auto;
    display: flex;
    gap: 10px;
    font-size: 11px;
    color: #64748b;
    font-weight: 600;
}
.cal_stat_app  { color: #10b981; }
.cal_stat_rich { color: #f59e0b; }

.cal_grid {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    overflow: hidden;
}

.cal_head_row {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    background: #1d4ed8;
}
.cal_head_cell {
    text-align: center;
    font-size: 11px;
    font-weight: 700;
    color: #fff;
    padding: 8px 4px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.cal_cells {
    flex: 1;
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    grid-auto-rows: 1fr;
    overflow-y: auto;
    min-height: 0;
}

.cal_cell {
    border-right: 1px solid #f1f5f9;
    border-bottom: 1px solid #f1f5f9;
    padding: 6px;
    min-height: 80px;
    display: flex;
    flex-direction: column;
    gap: 2px;
    background: #fff;
    transition: background 0.1s;
}
.cal_cell:hover { background: #f8fafc; }
.cal_cell_empty { background: #fafafa; }
.cal_today { background: #eff6ff; }
.cal_today .cal_day_num { color: #0b66dd; font-weight: 800; }

.cal_day_num {
    font-size: 12px;
    font-weight: 600;
    color: #475569;
    line-height: 1;
    margin-bottom: 2px;
}

.cal_event {
    font-size: 10px;
    font-weight: 600;
    border-radius: 4px;
    padding: 2px 5px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    cursor: pointer;
    transition: opacity 0.15s;
}
.cal_event:hover { opacity: 0.8; }
.cal_event.cal_selected { outline: 2px solid #0f172a; }

.cal_ev_app  { background: #d1fae5; color: #065f46; }
.cal_ev_rich { background: #fef3c7; color: #92400e; }

.cal_event_more {
    font-size: 10px;
    color: #94a3b8;
    padding-left: 4px;
}

.cal_detail_panel {
    width: 280px;
    min-width: 240px;
    flex-shrink: 0;
    border-left: 1px solid #e2e8f0;
    padding: 16px;
    height: 100%;
    overflow-y: auto;
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
}
.cal_detail_panel.has_detail {
    align-items: flex-start;
    justify-content: flex-start;
}

.cal_cell.cal_selected_day {
    background: #eff6ff;
    outline: 2px solid #0b66dd;
    outline-offset: -2px;
}

.cal_day_panel {
    display: flex;
    flex-direction: column;
    gap: 12px;
    width: 100%;
}

.cal_day_panel_header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding-bottom: 10px;
    border-bottom: 1px solid #e2e8f0;
}

.cal_day_panel_num {
    font-size: 32px;
    font-weight: 800;
    color: #0b66dd;
    line-height: 1;
}

.cal_day_panel_weekday {
    font-size: 13px;
    font-weight: 700;
    color: #0f172a;
    text-transform: capitalize;
}

.cal_day_panel_sub {
    font-size: 11px;
    color: #94a3b8;
}

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

.cal_day_ev_row {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 8px 10px;
    border-radius: 8px;
    background: #f8fafc;
    cursor: pointer;
    transition: background 0.15s;
}
.cal_day_ev_row:hover { filter: brightness(0.96); }
.cal_day_ev_row.cal_row_app  { background: #d1fae5; }
.cal_day_ev_row.cal_row_rich { background: #fef3c7; }
.cal_day_ev_row.cal_row_app.expanded  { background: #bbf7d0; }
.cal_day_ev_row.cal_row_rich.expanded { background: #fde68a; }

.cal_day_ev_ora {
    font-size: 12px;
    font-weight: 700;
    color: #0f172a;
    min-width: 32px;
    padding-top: 2px;
}

.cal_day_ev_info {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
    flex: 1;
}

.cal_day_ev_nome {
    font-size: 13px;
    font-weight: 600;
    color: #0f172a;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.cal_inline_detail {
    display: none;
    margin-top: 6px;
    padding-top: 6px;
    border-top: 1px solid #e2e8f0;
    flex-direction: column;
    gap: 2px;
}
.cal_inline_detail.open {
    display: flex;
}
.cal_inline_field {
    display: flex;
    gap: 6px;
    font-size: 11px;
    line-height: 1.5;
}
.cal_inline_label {
    color: #0f172a;
    min-width: 60px;
    flex-shrink: 0;
}
.cal_inline_value {
    color: #0f172a;
    word-break: break-word;
}
.cal_day_ev_chevron {
    color: #94a3b8;
    font-size: 11px;
    transition: transform 0.2s;
    flex-shrink: 0;
    padding-top: 2px;
}
.cal_day_ev_actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    margin-top: 4px;
    width: 100%;
}
.cal_followup_btn {
    border: 1px solid #cbd5e1;
    background: #fff;
    color: #334155;
    border-radius: 999px;
    font-size: 10px;
    font-weight: 700;
    padding: 2px 8px;
    cursor: pointer;
    line-height: 1.6;
}
.cal_followup_btn:hover {
    border-color: #93c5fd;
    background: #eff6ff;
    color: #1d4ed8;
}
.cal_followup_btn_detail {
    margin-top: 8px;
    margin-bottom: 8px;
}
.cal_day_ev_row.expanded .cal_day_ev_chevron {
    transform: rotate(180deg);
}
.cal_day_panel_empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    color: #94a3b8;
    font-size: 12px;
    text-align: center;
    padding: 20px 0;
}
.cal_day_panel_empty i { font-size: 24px; }

.cal_detail_empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    color: #94a3b8;
    font-size: 12px;
    text-align: center;
}
.cal_detail_empty i { font-size: 28px; }

@media (max-width: 768px) {
    .cal_detail_panel { display: none; }
    .cal_legend { display: none; }
}

.table_body.timeline_body {
    flex: 1;
    min-height: 0;
    overflow: hidden;
    align-items: stretch;
}

.timeline_layout {
    display: flex;
    gap: 16px;
    align-items: stretch;
    width: 100%;
    height: 100%;
    min-height: 0;
    overflow: hidden;
}
.timeline_container {
    flex: 1 1 0;
    min-width: 0;
    overflow-y: auto;
    height: 100%;
}
.timeline_feed {
    display: flex;
    flex-direction: column;
    gap: 0;
    padding: 12px 0;
}
.timeline_detail_panel {
    width: 300px;
    flex-shrink: 0;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    overflow-y: auto;
    height: 100%;
    padding: 16px;
}
.timeline_detail_panel.has_detail { padding: 0; }
.timeline_detail_empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    color: #9ca3af;
    font-size: 13px;
    padding: 24px 0;
}
.timeline_detail_empty i { font-size: 22px; }
.timeline_event { cursor: pointer; }
.timeline_event.tl_selected {
    background: #eff6ff;
    border-left-color: #2563eb;
}
/* Dettaglio */
.tl_detail_wrap { padding: 14px; }
.tl_detail_badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    padding: 4px 10px;
    border-radius: 20px;
    margin-bottom: 14px;
}
.tl_detail_badge.tel { background: #dbeafe; color: #1d4ed8; }
.tl_detail_badge.att { background: #d1fae5; color: #065f46; }
.tl_detail_fields { display: flex; flex-direction: column; gap: 8px; }
.tl_detail_field {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.tl_detail_label {
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    color: #9ca3af;
}
.tl_detail_value {
    font-size: 13px;
    color: #1f2937;
    word-break: break-word;
}
/* Modal mobile */
.timeline_modal_overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.4);
    z-index: 1000;
    align-items: flex-end;
    justify-content: center;
}
.timeline_modal_overlay.active { display: flex; }
.timeline_modal_content {
    background: #fff;
    border-radius: 16px 16px 0 0;
    width: 100%;
    max-height: 70vh;
    overflow-y: auto;
}
.timeline_modal_header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 16px;
    border-bottom: 1px solid #e5e7eb;
    font-weight: 600;
    font-size: 14px;
}
.timeline_modal_header button {
    background: none;
    border: none;
    font-size: 18px;
    color: #6b7280;
    cursor: pointer;
}
.timeline_modal_body { padding: 4px; }
.timeline_day {
    border-left: 3px solid #e5e7eb;
    margin-left: 16px;
    padding-left: 16px;
    margin-bottom: 24px;
    position: relative;
}
.timeline_day::before {
    content: '';
    position: absolute;
    left: -7px;
    top: 6px;
    width: 11px;
    height: 11px;
    border-radius: 50%;
    background: #0b66dd;
    border: 2px solid #fff;
    box-shadow: 0 0 0 2px #0b66dd;
}
.timeline_day_header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 10px;
}
.timeline_day_date {
    display: flex;
    align-items: center;
    gap: 8px;
}
.timeline_day_num {
    font-size: 22px;
    font-weight: 800;
    color: #0b66dd;
    line-height: 1;
}
.timeline_day_info {
    display: flex;
    flex-direction: column;
    line-height: 1.2;
}
.timeline_day_weekday {
    font-size: 12px;
    font-weight: 600;
    color: #374151;
    text-transform: capitalize;
}
.timeline_day_month {
    font-size: 11px;
    color: #9ca3af;
}
.timeline_day_summary {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}
.timeline_badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 11px;
    font-weight: 600;
    padding: 3px 8px;
    border-radius: 12px;
}
.timeline_badge.tel { background: #dbeafe; color: #1d4ed8; }
.timeline_badge.att { background: #d1fae5; color: #065f46; }
.timeline_badge.prev { background: #ede9fe; color: #6366f1; }
.timeline_badge.alleg { background: #fef3c7; color: #92400e; }
.timeline_badge.flag { background: #e2e8f0; color: #334155; }

.timeline_day_events {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.timeline_event {
    display: flex;
    gap: 10px;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    padding: 10px 12px;
    align-items: flex-start;
}
.timeline_event.tel { border-left: 3px solid #3b82f6; }
.timeline_event.att { border-left: 3px solid #10b981; }
.timeline_event.prev { border-left: 3px solid #6366f1; }
.timeline_event.alleg { border-left: 3px solid #f59e0b; }
.timeline_event.flag { border-left: 3px solid #64748b; }
.timeline_event_icon {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    flex-shrink: 0;
}
.timeline_event_icon.tel { background: #dbeafe; color: #1d4ed8; }
.timeline_event_icon.att { background: #d1fae5; color: #065f46; }
.timeline_event_icon.prev { background: #ede9fe; color: #6366f1; }
.timeline_event_icon.alleg { background: #fef3c7; color: #92400e; }
.timeline_event_icon.flag { background: #e2e8f0; color: #334155; }
.timeline_event_body { flex: 1; min-width: 0; }
.timeline_event_header {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    margin-bottom: 4px;
}
.timeline_event_type {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    color: #6b7280;
    letter-spacing: 0.5px;
}
.timeline_event_esito {
    font-size: 11px;
    font-weight: 600;
    padding: 1px 6px;
    border-radius: 10px;
}
.timeline_event_esito.tel { background: #dbeafe; color: #1d4ed8; }
.timeline_event_esito.att { background: #d1fae5; color: #065f46; }
.timeline_event_esito.prev { background: #ede9fe; color: #6366f1; }
.timeline_event_esito.alleg { background: #fef3c7; color: #92400e; }
.timeline_event_esito.flag { background: #e2e8f0; color: #334155; }
.timeline_event_ora {
    font-size: 11px;
    font-weight: 600;
    color: #64748b;
    font-variant-numeric: tabular-nums;
}
.timeline_event_store {
    font-size: 11px;
    color: #9ca3af;
    margin-left: auto;
}
.timeline_event_main {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    font-size: 12px;
    color: #374151;
}
.timeline_event_op, .timeline_event_cliente, .timeline_event_dettaglio {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}
.timeline_event_op i, .timeline_event_cliente i { color: #9ca3af; font-size: 10px; }
.timeline_event_note {
    margin-top: 4px;
    font-size: 11px;
    color: #6b7280;
    font-style: italic;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Dettaglio piste per operatore (sotto la card) */
.operatore_dettaglio {
    display: none;
    margin: 0 0 12px;
    padding: 8px 0px 0;
    border-top: 1px dashed #e5e7eb;
    grid-template-columns: repeat(5, minmax(0, 1fr));
}
.operatore_dettaglio.visible {
    display: block;
}

.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: 200px;
    overflow-y: auto;
    /* nascondi barra di scorrimento ma mantieni lo scroll */
    scrollbar-width: none;
    /* Firefox */
}

.operatore_dettaglio_lista::-webkit-scrollbar {
    width: 0;
    height: 0;
}

.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 {
    display: none;
    list-style: none;
    margin: 0 0 4px 12px;
    padding: 0;
    border-left: 2px solid #e5e7eb;
    padding-left: 8px;
}
.operatore_dettaglio_servizi.visible,
.pista_espansa + .operatore_dettaglio_servizi {
    display: block;
}

.operatore_dettaglio_riga.servizio {
    background: #fafafa;
    font-size: 0.9em;
}

.operatore_dettaglio_riga.servizio .pista_nome {
    font-weight: 500;
    color: #4b5563;
}

/* ========================================= */
/* === 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;
}

.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: 98vw;
    width: 1760px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    animation: modalSlideIn 0.2s ease;
}

@media (min-width: 769px) {
    .modal_dettaglio_content {
        overflow-y: auto;
        max-height: 96vh;
    }
}

@keyframes modalSlideIn {
    from {
        opacity: 0;
        transform: translateY(-20px);
    }

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

/* --- Hierarchical Template Column (Gestione Template) --- */
.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 {
    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 {
    margin-left: auto;
}

.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;
}

/* 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;
}

/* Modale operatori: codice sopra, nome sotto */
.assignment_box.assignment_box_operator {
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
}

.assignment_box.assignment_box_operator .assign_codice {
    font-weight: 700;
    font-size: 13px;
    color: #1f2937;
}

.assignment_box.assignment_box_operator .assign_nome {
    font-size: 12px;
    font-weight: normal;
    color: #0066cc;
    text-transform: uppercase;
}

/* Modale Assegna Operatori/Store: più altezza e area lista scrollabile */
.modal_assign_list {
    max-height: 80vh;
    min-height: 320px;
    overflow: hidden;
    padding: 20px 24px;
    display: flex;
    flex-direction: column;
}

.modal_assign_list #assignment_multiselect_list {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
}


.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;
    font-weight: 700;
}

.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_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: visible;
}

.modal_dettaglio_split {
    display: grid !important;
    grid-template-columns: 4fr 1fr;
    align-items: stretch;
    overflow: hidden;
}

.modal_split_left {
    min-width: 0;
    overflow-y: auto;
    border-right: 1px solid #e2e8f0;
    display: flex;
    flex-direction: column;
    max-height: calc(96vh - 60px);
}

.modal_split_right {
    min-width: 0;
    overflow-y: auto;
    position: relative;
    display: flex;
    flex-direction: column;
    background: #f8fafc;
    max-height: calc(96vh - 60px);
}

.modal_provv_panel_header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    font-size: 0.82rem;
    font-weight: 700;
    color: #1e293b;
    border-bottom: 1px solid #e2e8f0;
    background: #f1f5f9;
    position: sticky;
    top: 0;
    z-index: 1;
    gap: 8px;
}

/* --- ALLEGATI PRATICHE --- */
.modal_detail_section_allegati {
    height: auto !important;
    align-self: start;
}
.modal_detail_section_allegati .modal_allegati_slots {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-top: 2px;
}
.modal_detail_section_allegati .modal_allegato_slot {
    flex: 0 0 auto;
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    padding: 4px 6px;
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
}
.modal_detail_section_allegati .mas_label {
    font-size: 9px;
    gap: 4px;
}
.modal_detail_section_allegati .mas_file_info {
    gap: 6px;
}
.modal_detail_section_allegati .mas_file_icon {
    font-size: 1.1rem;
    margin-top: 0;
}
.modal_detail_section_allegati .mas_file_meta {
    gap: 0;
}
.modal_detail_section_allegati .mas_file_name {
    max-width: 100%;
    font-size: 0.72rem;
}
.modal_detail_section_allegati .mas_file_sub {
    font-size: 0.62rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.modal_detail_section_allegati .mas_actions {
    gap: 3px;
}
.modal_detail_section_allegati .btn_mas,
.modal_detail_section_allegati .btn_mas_upload,
.modal_detail_section_allegati .btn_mas_replace,
.modal_detail_section_allegati .btn_mas_open,
.modal_detail_section_allegati .btn_mas_download,
.modal_detail_section_allegati .btn_mas_delete {
    font-size: 11px;
    padding: 3px 7px;
    gap: 3px;
    line-height: 1.2;
    font-weight: 600;
}
.modal_detail_section_allegati .btn_mas i {
    font-size: 10px;
}
.modal_detail_section_allegati .mas_loading,
.modal_detail_section_allegati .mas_empty {
    font-size: 11px;
}
.modal_allegati_section {
    border-top: 1px solid #e2e8f0;
    padding: 16px 20px 20px;
    background: #f8fafc;
}
.modal_allegati_header {
    font-size: 0.82rem;
    font-weight: 700;
    color: #475569;
    text-transform: uppercase;
    letter-spacing: .04em;
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    gap: 6px;
}
.modal_allegati_slots {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}
.modal_allegato_slot {
    flex: 1 1 260px;
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    padding: 12px 14px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    min-width: 0;
}
.mas_label {
    font-size: 0.78rem;
    font-weight: 700;
    color: #334155;
    display: flex;
    align-items: center;
    gap: 6px;
}
.mas_body {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.mas_file_info {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    min-width: 0;
}
.mas_file_icon {
    font-size: 1.6rem;
    color: #ef4444;
    flex-shrink: 0;
    margin-top: 2px;
}
.mas_file_meta {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}
.mas_file_name {
    font-size: 0.82rem;
    font-weight: 600;
    color: #1e293b;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 220px;
}
.mas_file_name_clickable {
    cursor: pointer;
    transition: color .15s;
}
.mas_file_name_clickable:hover {
    color: #2563eb;
    text-decoration: underline;
}
.mas_file_sub {
    font-size: 0.72rem;
    color: #94a3b8;
}
.mas_actions {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}
.btn_mas {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 0.75rem;
    font-weight: 600;
    padding: 5px 10px;
    border-radius: 6px;
    border: none;
    cursor: pointer;
    text-decoration: none;
    transition: background .15s, color .15s;
    line-height: 1;
}
.btn_mas_upload, .btn_mas_replace {
    background: #eff6ff;
    color: #2563eb;
}
.btn_mas_upload:hover, .btn_mas_replace:hover {
    background: #dbeafe;
}
.btn_mas_open {
    background: #eff6ff;
    color: #2563eb;
}
.btn_mas_open:hover {
    background: #dbeafe;
}
.btn_mas_download {
    background: #f0fdf4;
    color: #16a34a;
}
.btn_mas_download:hover {
    background: #dcfce7;
}
.btn_mas_delete {
    background: #fff1f2;
    color: #ef4444;
    padding: 5px 8px;
}
.btn_mas_delete:hover {
    background: #ffe4e6;
}
.mas_loading, .mas_empty {
    font-size: 0.78rem;
    color: #94a3b8;
    font-style: italic;
}
.mas_error {
    font-size: 0.78rem;
    color: #ef4444;
}

@media (max-width: 768px) {
    .modal_dettaglio_split {
        flex-direction: column;
    }
    .modal_split_right {
        max-width: 100%;
        border-top: 1px solid #e2e8f0;
        max-height: 300px;
    }
    .modal_split_left {
        max-height: none;
        border-right: none;
    }
}

@media (max-width: 768px) {
    .modal_dettaglio_body {
        overflow-y: auto;
        max-height: calc(90vh - 70px);
    }
}

.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;
}

/* Layout per dettaglio ATTIVAZIONI: tabella 2 colonne in griglia */
.modal_dettaglio_table tbody {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px 18px;
    padding: 16px 20px 20px;
}

.modal_dettaglio_table tr {
    display: grid;
    grid-template-columns: 120px minmax(0, 1fr);
    background: #f9fafb;
    border-radius: 8px;
    overflow: hidden;
    border: 1px solid #e5e7eb;
}

.modal_dettaglio_table tr:nth-child(odd) {
    background: #ffffff;
}

.modal_dettaglio_table th {
    padding: 10px 12px;
    text-align: left;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    color: #6b7280;
    border-right: 1px solid #e5e7eb;
    background: #f3f4f6;
}

.modal_dettaglio_table td {
    padding: 10px 12px;
    font-size: 13px;
    color: #111827;
    word-break: break-word;
}

.modal_dettaglio_table tbody tr:hover {
    background-color: #ecfdf5;
    border-color: #a7f3d0;
}

/* Layout per dettaglio TELEFONATE: vera tabella (righe orizzontali, non card), */
/* con scroll verticale limitato al solo tbody (thead resta fisso in alto). */
.modal_dettaglio_table_flat {
    table-layout: fixed;
}

.modal_dettaglio_table_flat thead,
.modal_dettaglio_table_flat tbody {
    display: block;
}

.modal_dettaglio_table_flat tbody {
    padding: 0;
    gap: 0;
    max-height: calc(96vh - 130px);
    overflow-y: auto;
    overflow-x: hidden;
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* IE/Edge legacy */
}

.modal_dettaglio_table_flat tbody::-webkit-scrollbar {
    display: none; /* Chrome/Safari/Edge Chromium */
}

.modal_dettaglio_table_flat thead tr,
.modal_dettaglio_table_flat tbody tr {
    display: table;
    table-layout: fixed;
    width: 100%;
    background: none;
    border-radius: 0;
    overflow: visible;
    border: none;
    border-bottom: 1px solid #e5e7eb;
}

.modal_dettaglio_table_flat tbody tr:nth-child(odd) {
    background: #f9fafb;
}

.modal_dettaglio_table_flat th {
    border-right: none;
}

.modal_dettaglio_table_flat td {
    border-right: none;
}

/* Larghezze fisse e identiche tra thead e tbody (necessarie con table-layout:fixed
   quando le due sezioni sono display:block separati, altrimenti le colonne
   calcolano proporzioni leggermente diverse e header/righe si sfalsano). */
.modal_dettaglio_table_flat th:nth-child(1),
.modal_dettaglio_table_flat td:nth-child(1) { width: 11%; }
.modal_dettaglio_table_flat th:nth-child(2),
.modal_dettaglio_table_flat td:nth-child(2) { width: 18%; }
.modal_dettaglio_table_flat th:nth-child(3),
.modal_dettaglio_table_flat td:nth-child(3) { width: 15%; }
.modal_dettaglio_table_flat th:nth-child(4),
.modal_dettaglio_table_flat td:nth-child(4) { width: 20%; }
.modal_dettaglio_table_flat th:nth-child(5),
.modal_dettaglio_table_flat td:nth-child(5) { width: 13%; }
.modal_dettaglio_table_flat th:nth-child(6),
.modal_dettaglio_table_flat td:nth-child(6) { width: 23%; }

.modal_dettaglio_table_flat .td_note {
    position: relative;
    padding-right: 40px;
}

.modal_dettaglio_table_flat .td_note_text {
    display: block;
    max-width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.modal_dettaglio_table_flat .btn_dettaglio_riga {
    position: absolute;
    top: 50%;
    right: 10px;
    transform: translateY(-50%);
    border: 1px solid #d1d5db;
    background: #fff;
    color: #374151;
    border-radius: 6px;
    width: 28px;
    height: 28px;
    padding: 0;
    font-size: 13px;
    line-height: 1;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s, border-color 0.15s;
}

.modal_dettaglio_table_flat .btn_dettaglio_riga:hover {
    background: #ecfdf5;
    border-color: #a7f3d0;
}

/* Popup "Dettaglio telefonata": lista elegante a colonna singola (no card) */
.modal_dettaglio_content_sm {
    width: 480px;
}

.lista_dettaglio_tel {
    display: flex;
    flex-direction: column;
    padding: 8px 25px 20px;
}

.riga_dettaglio_tel {
    display: flex;
    align-items: baseline;
    gap: 16px;
    padding: 13px 0;
    border-bottom: 1px solid #f1f5f9;
}

.riga_dettaglio_tel:last-child {
    border-bottom: none;
}

.riga_dettaglio_tel_label {
    flex: 0 0 140px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    color: #9ca3af;
}

.riga_dettaglio_tel_val {
    flex: 1;
    font-size: 14px;
    color: #111827;
    word-break: break-word;
}

/* ========================================= */
/* === 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 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;
    }



    .filter_area {
        display: flex !important;
        top: 0 !important;
        height: 100% !important;
        flex-direction: column;
        justify-content: flex-end;
        pointer-events: none;
        z-index: 2000;
    }

    .filter_area.active {
        pointer-events: all;
        background: rgba(0, 0, 0, 0.4);
    }

    .filter_sheet {
        width: 100%;
        height: auto;
        max-height: 90vh;
        border-radius: 25px 25px 0 0;
        transform: translateY(100%);
        transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
        box-shadow: 0 -10px 40px rgba(0, 0, 0, 0.2);
    }

    .filter_drag_handle {
        display: block;
        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_panel {
        justify-content: center;
        padding: 5px 20px 15px;
        border-bottom: none;
    }

    .filter_header_panel_left {
        justify-content: center;
    }

    .filter_close_btn {
        display: none;
    }

    .filtro_ricerca {
        display: none !important;
    }

    .filtro_input,
    .filtro_select {
        height: 48px;
    }

    .filtro_buttons_right {
        flex-direction: row !important;
        align-items: stretch;
        border-top: none;
        padding: 0;
        margin: 10px 0 20px;
    }

    .filtro_buttons_right .btn_filtro {
        height: 48px;
        font-size: 15px;
        font-weight: 700;
        flex: 1;
    }

    .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);
        /* lascia spazio a icone top + bottom nav */
        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 {
        font-size: 16px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        flex: 1;
        min-width: 0;
    }

    .operatore_categorie {
        grid-template-columns: minmax(0, 1fr) !important;
        gap: 12px;
        width: 100% !important;
        max-width: 100%;
        min-width: 0;
    }

    .macro_group_card_body {
        flex-direction: column;
    }
    .macro_group_card_body .macro_categoria {
        flex: 1 1 100%;
        min-width: 0;
    }
    .macro_categoria {
        background: var(--color-bg-light);
        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 {
        padding: 10px;
    } */

    .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;
        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 {
        flex-direction: column !important;
        height: auto !important;
    }

    .bottone_sezioni_wrapper {
        width: 100% !important;
    }

    .bottone_trimestri_card {
        width: 100% !important;
        margin-top: 20px;
    }

    .bottone_blocco {
        margin-bottom: 20px;
    }

    .bottone_tabella_wrapper {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch;
        width: 100%;
    }

    .bottone_blocco_header,
    .bottone_col_header,
    .bottone_data_row {
        min-width: 600px;
        /* Force minimum width for horizontal scroll */
    }

    .bottone_trimestri_block {
        overflow-x: auto !important;
    }

    .bottone_trimestri_table {
        min-width: 600px;
    }
}

/* 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 --- */

/* Desktop: griglia a blocchi 4 colonne, tutto a schermo */
.modal_detail_container {
    padding: 10px;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 10px;
    align-items: start;
}


.modal_detail_section {
    display: flex;
    flex-direction: column;
    gap: 0;
    background: #f8fafc;
    border-radius: 8px;
    padding: 10px 12px;
    border: 1px solid #e2e8f0;
    height: 100%;
}

.modal_section_title {
    font-size: 10px;
    font-weight: 800;
    color: var(--color-primary);
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 6px;
    padding-bottom: 4px;
    border-bottom: 2px solid #eef2ff;
}

.modal_detail_item {
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: baseline;
    padding: 4px 0;
    border-bottom: 1px solid #f1f5f9;
    background: transparent;
    border-radius: 0;
    gap: 8px;
}

.modal_detail_item:last-child {
    border-bottom: none;
}

.modal_detail_label {
    font-size: 10px;
    font-weight: 700;
    color: #94a3b8;
    text-transform: uppercase;
    white-space: nowrap;
}

.modal_detail_value {
    font-size: 12px;
    font-weight: 600;
    color: #1e293b;
    text-align: right;
    word-break: break-word;
}

/* Mobile: lista verticale scorrevole */
@media (max-width: 768px) {
    .modal_detail_container {
        display: flex;
        flex-direction: column;
        padding: 15px;
        gap: 16px;
    }

    .modal_detail_item {
        grid-template-columns: 1fr;
        gap: 2px;
        padding: 8px 0;
    }

    .modal_detail_label {
        font-size: 10px;
    }

    .modal_detail_value {
        text-align: left;
        font-size: 14px;
    }
}

.th_actions,
.td_actions {
    flex: 0 0 40px;
    min-width: 40px;
    max-width: 40px;
    justify-content: center;
}

.btn_copy_quota {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    padding: 0;
    margin-left: 5px;
    background: transparent;
    border: 1px solid #cbd5e1;
    border-radius: 5px;
    cursor: pointer;
    color: #94a3b8;
    flex-shrink: 0;
}

.btn_copy_quota:hover {
    background: #f1f5f9;
    color: #475569;
}

.btn_copy_quota svg {
    width: 12px;
    height: 12px;
    pointer-events: none;
}

.btn_copy_quota .icon_check {
    display: none;
}

.btn_copy_quota.copied {
    background: #f0fdf4;
    border-color: #86efac;
    color: #16a34a;
}

.btn_copy_quota.copied .icon_copy {
    display: none;
}

.btn_copy_quota.copied .icon_check {
    display: block;
}

.td_badge_prov {
    display: flex !important;
    align-items: center;
    justify-content: center;
}

/* CER / Da Pagare / Rich.Pag / Pagato: badge centrato nella colonna, come l'header */
.td_cer,
.td_pagare {
    display: flex !important;
    align-items: center;
    justify-content: center;
}
.btn_cer_flag {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    font-size: 10px;
    font-weight: 600;
    padding: 2px 6px;
    border-radius: 5px;
    border: 1px solid #e2e8f0;
    background: #f8fafc;
    color: #94a3b8;
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.btn_cer_flag:hover { border-color: #cbd5e1; background: #f1f5f9; color: #64748b; }
.btn_cer_flag.cer_si { background: #f0fdf4; border-color: #86efac; color: #16a34a; }
.btn_cer_flag.cer_si:hover { background: #dcfce7; }

/* Da Pagare: stato "No" in rosso */
.td_pagare .btn_cer_flag:not(.cer_si) { background: #fef2f2; border-color: #fca5a5; color: #dc2626; }
.td_pagare .btn_cer_flag:not(.cer_si):hover { background: #fee2e2; border-color: #f87171; color: #dc2626; }

/* CER/Da Pagare disabilitati per POD/PDR non luce (non iniziano con IT) */
.btn_cer_flag.btn_cer_flag_disabled { opacity: 0.45; cursor: not-allowed; background: #f8fafc !important; border-color: #e2e8f0 !important; color: #cbd5e1 !important; }
.btn_cer_flag.btn_cer_flag_disabled:hover { background: #f8fafc !important; border-color: #e2e8f0 !important; color: #cbd5e1 !important; }

/* Pulsante allegati riga */
.td_allegati { display: flex; align-items: center; justify-content: center; }
.btn_allegati_flag {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 0 7px;
    height: 22px;
    border-radius: 5px;
    border: 1px solid #e2e8f0;
    background: #f8fafc;
    color: #94a3b8;
    font-size: 11px;
    cursor: pointer;
    transition: background .15s, border-color .15s, color .15s;
    white-space: nowrap;
}
.btn_allegati_flag:hover { background: #eff6ff; border-color: #bfdbfe; color: #2563eb; }
.btn_allegati_flag.has_allegati { background: #eff6ff; border-color: #93c5fd; color: #2563eb; }
.btn_allegati_badge {
    display: none;
    background: #2563eb;
    color: #fff;
    font-size: 9px;
    font-weight: 700;
    min-width: 14px;
    height: 14px;
    border-radius: 7px;
    align-items: center;
    justify-content: center;
    padding: 0 3px;
    line-height: 1;
}
.btn_allegati_flag.has_allegati .btn_allegati_badge {
    display: inline-flex;
}

/* Popup allegati */
.popup_allegati {
    position: absolute;
    z-index: 1200;
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    box-shadow: 0 8px 32px rgba(0,0,0,0.14);
    width: 300px;
    overflow: hidden;
}
.popup_allegati_header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 14px;
    background: #f8fafc;
    border-bottom: 1px solid #e2e8f0;
    font-size: 0.8rem;
    font-weight: 700;
    color: #1e293b;
}
.popup_allegati_body {
    padding: 10px 12px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.pa_slot {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    padding: 8px 10px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.pa_slot_label {
    font-size: 0.72rem;
    font-weight: 700;
    color: #475569;
    display: flex;
    align-items: center;
    gap: 5px;
}
.pa_slot_body { display: flex; flex-direction: column; gap: 5px; }
.pa_file_row {
    display: flex;
    align-items: flex-start;
    gap: 7px;
    min-width: 0;
}
.pa_file_icon { font-size: 1.3rem; color: #ef4444; flex-shrink: 0; }
.pa_file_meta { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.pa_file_name {
    font-size: 0.75rem;
    font-weight: 600;
    color: #1e293b;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 210px;
}
.pa_file_sub { font-size: 0.68rem; color: #94a3b8; }
.pa_actions { display: flex; gap: 5px; flex-wrap: wrap; }

/* Popup CER */
.popup_cer {
    position: absolute;
    z-index: 1200;
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    box-shadow: 0 8px 32px rgba(0,0,0,0.14);
    width: 260px;
    overflow: hidden;
}
.popup_cer_header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 14px 8px;
    font-size: 0.78rem;
    font-weight: 700;
    color: #1e293b;
    border-bottom: 1px solid #f1f5f9;
}
.popup_cer_close {
    background: none;
    border: none;
    cursor: pointer;
    color: #94a3b8;
    display: flex;
    align-items: center;
    padding: 2px;
    border-radius: 4px;
}
.popup_cer_close:hover { color: #ef4444; background: #fef2f2; }
.popup_cer_body { padding: 10px 14px 12px; display: flex; flex-direction: column; gap: 10px; }
.popup_cer_row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: default;
}
.popup_cer_label { font-size: 0.78rem; color: #64748b; font-weight: 500; }

.popup_cer_wide { width: 320px; }

.popup_cer_date_input {
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    padding: 4px 8px;
    font-size: 0.78rem;
    color: #334155;
    font-family: inherit;
    background: #f8fafc;
    cursor: pointer;
}
.popup_cer_date_input:focus { outline: none; border-color: #94a3b8; background: #fff; }

.popup_cer_divider { height: 1px; background: #f1f5f9; margin: 2px 0; }

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

.popup_cer_richieste_list {
    display: flex;
    flex-direction: column;
    gap: 4px;
    max-height: 140px;
    overflow-y: auto;
}
.popup_cer_richieste_empty,
.popup_cer_richieste_loading {
    font-size: 0.75rem;
    color: #94a3b8;
    padding: 8px 0;
    text-align: center;
}
.popup_cer_richiesta_item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 5px 8px;
    border-radius: 6px;
    background: #f8fafc;
    border: 1px solid #f1f5f9;
}
.popup_cer_richiesta_data {
    font-size: 0.76rem;
    font-weight: 600;
    color: #334155;
    flex-shrink: 0;
}
.popup_cer_richiesta_nota {
    font-size: 0.72rem;
    color: #64748b;
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.popup_cer_richiesta_del {
    background: none;
    border: none;
    cursor: pointer;
    color: #cbd5e1;
    display: flex;
    align-items: center;
    padding: 2px;
    border-radius: 4px;
    flex-shrink: 0;
}
.popup_cer_richiesta_del:hover { color: #ef4444; background: #fef2f2; }

.popup_cer_richieste_add {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding-top: 6px;
    border-top: 1px dashed #e2e8f0;
}
.popup_cer_note_input {
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    padding: 5px 8px;
    font-size: 0.78rem;
    color: #334155;
    font-family: inherit;
}
.popup_cer_note_input:focus { outline: none; border-color: #94a3b8; }
.popup_cer_add_btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    border: 1px solid #93c5fd;
    background: #eff6ff;
    color: #2563eb;
    border-radius: 6px;
    padding: 6px 10px;
    font-size: 0.78rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s;
}
.popup_cer_add_btn:hover { background: #dbeafe; }
.popup_cer_add_btn:disabled { opacity: 0.6; cursor: not-allowed; }

.btn_row_edit_origine {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    padding: 0;
    background: #f1f5f9;
    border: 1px solid #cbd5e1;
    border-radius: 6px;
    cursor: pointer;
    color: #475569;
    flex-shrink: 0;
}

.btn_row_edit_origine:hover {
    background: #e2e8f0;
    color: #0f172a;
}

.btn_row_edit_origine svg {
    width: 14px;
    height: 14px;
    pointer-events: none;
}

.modal_detail_actions {
    padding: 10px;
    border-top: 1px solid #e2e8f0;
}

.btn_edit_origine {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    background: var(--color-primary, #0d9488);
    color: #fff;
    border: none;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
}

.btn_edit_origine:hover {
    opacity: 0.9;
    filter: brightness(1.05);
}

.btn_edit_origine i {
    font-size: 14px;
}

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

.btn_edit_origine_inline {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    padding: 0;
    background: transparent;
    border: 1px solid #cbd5e1;
    border-radius: 4px;
    color: #64748b;
    cursor: pointer;
    font-size: 10px;
    flex-shrink: 0;
}

.btn_edit_origine_inline:hover {
    background: #f1f5f9;
    color: #1e293b;
    border-color: #94a3b8;
}

/* --- Origine Picker Popup --- */
.origine_picker_overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.45);
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(2px);
}

.origine_picker_popup {
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.25);
    width: 320px;
    overflow: hidden;
    animation: modalSlideIn 0.15s ease;
}

.origine_picker_header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 18px;
    background: var(--color-primary, #0d9488);
    color: #fff;
    font-size: 14px;
    font-weight: 700;
}

.origine_picker_close {
    background: none;
    border: none;
    color: #fff;
    font-size: 16px;
    cursor: pointer;
    opacity: 0.8;
    padding: 0;
    line-height: 1;
}

.origine_picker_close:hover {
    opacity: 1;
}

.origine_picker_list {
    display: flex;
    flex-direction: column;
    padding: 8px;
    gap: 4px;
}

.origine_picker_option {
    display: block;
    width: 100%;
    text-align: left;
    padding: 11px 14px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 500;
    color: #1e293b;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s;
}

.origine_picker_option:hover {
    background: #ecfdf5;
    border-color: #6ee7b7;
}

.origine_picker_option.active {
    background: #d1fae5;
    border-color: var(--color-primary, #0d9488);
    color: var(--color-primary, #0d9488);
    font-weight: 700;
}

/* --- Telefonate: icone azioni riga --- */
.tel_azioni_th,
.tel_azioni_td,
.prev_azioni_td,
.prev_azioni_th {
    flex: 0 0 96px !important;
    width: 96px !important;
    min-width: 96px !important;
    max-width: 96px !important;
    justify-content: center;
    gap: 6px;
    padding: 0 4px;
}

.tel_btn_edit,
.tel_btn_delete,
.tel_btn_pdf {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    font-size: 11px;
    transition: background 0.15s, color 0.15s;
}

.tel_btn_edit {
    background: #e0f2fe;
    color: #0369a1;
}

.tel_btn_edit:hover {
    background: #0369a1;
    color: #fff;
}

.tel_btn_delete {
    background: #fee2e2;
    color: #dc2626;
}

.tel_btn_delete:hover {
    background: #dc2626;
    color: #fff;
}

.tel_btn_pdf {
    background: #ede9fe;
    color: #6366f1;
}

.tel_btn_pdf:hover {
    background: #6366f1;
    color: #fff;
}

.tel_btn_save {
    background: #dcfce7;
    color: #16a34a;
}
.tel_btn_save:hover {
    background: #16a34a;
    color: #fff;
}
.tel_btn_cancel {
    background: #f3f4f6;
    color: #6b7280;
}
.tel_btn_cancel:hover {
    background: #6b7280;
    color: #fff;
}

.telefonate_row.editing .td {
    padding: 2px 4px;
}
.tel_inline_input {
    width: 100%;
    min-width: 60px;
    padding: 3px 6px;
    border: 1px solid #93c5fd;
    border-radius: 4px;
    font-size: 0.85rem;
    background: #fff;
    box-sizing: border-box;
}
.tel_inline_input:focus {
    outline: none;
    border-color: #3b82f6;
    box-shadow: 0 0 0 2px rgba(59,130,246,0.2);
}

/* Dettaglio telefonate: griglia 3 colonne (meno sezioni rispetto ad attivazioni) */
.tel_detail_container {
    grid-template-columns: repeat(3, 1fr) !important;
}

@media (max-width: 768px) {
    .tel_detail_container {
        grid-template-columns: 1fr !important;
    }
}

/* ===== POD DOPPO - raggruppamento per POD/PDR ===== */

/* Riga intestazione gruppo: sfondo leggermente distinto, cursore pointer */
.pd_group_row.pd_has_children {
    cursor: pointer;
    background: rgba(59, 130, 246, 0.06);
    border-left: 3px solid #3b82f6;
    position: relative;
}
.pd_group_row.pd_has_children:hover {
    background: rgba(59, 130, 246, 0.12);
}

/* Metadati gruppo (badge contatore + chevron) */
.pd_group_meta {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 0 8px;
    flex-shrink: 0;
}
.pd_count_badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 2px 7px;
    border-radius: 10px;
    background: #e2e8f0;
    color: #475569;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.03em;
    white-space: nowrap;
}
.pd_group_row.pd_has_children .pd_count_badge {
    background: #dbeafe;
    color: #1d4ed8;
}

.pd_group_badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 22px;
    height: 22px;
    padding: 0 6px;
    border-radius: 11px;
    background: #3b82f6;
    color: #fff;
    font-size: 0.72rem;
    font-weight: 700;
    line-height: 1;
}
.pd_chevron {
    width: 16px;
    height: 16px;
    transition: transform 0.2s ease;
    flex-shrink: 0;
}
.pd_group_row.pd_group_open .pd_chevron {
    transform: rotate(180deg);
}

/* Righe figlie */
.pd_child_row {
    background: rgba(241, 245, 249, 0.6);
    border-left: 3px solid #cbd5e1;
}
.pd_child_row:hover {
    background: rgba(226, 232, 240, 0.8);
}
.pd_child_hidden {
    display: none !important;
}

/* Indentazione visiva per le righe figlie */
.pd_child_indent {
    width: 20px;
    flex-shrink: 0;
    border-right: 2px solid #cbd5e1;
    align-self: stretch;
    margin-right: 2px;
}

/* Pulsante elimina nel modal telefonate */
.btn_delete_tel {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    background: #fee2e2;
    color: #dc2626;
    border: none;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
}

.btn_delete_tel:hover {
    background: #dc2626;
    color: #fff;
}

/* ========================================= */
/* === Layout Browser Classifiche (Main) === */
/* ========================================= */

.macro_micro_layout.classifica_layout {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
    gap: 20px;
    width: 100%;
}

.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;
}

.mm_item {
    padding: 10px;
    border-bottom: 1px solid var(--color-border-light);
    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;
}

.classifica_config_mini_table {
    display: flex;
    flex-direction: column;
    width: 100%;
}

.classifica_config_mini_table .mini_header {
    display: grid;
    grid-template-columns: 1fr 60px 40px;
    font-weight: 700;
    font-size: 0.75rem;
    color: var(--color-text-muted);
    margin-bottom: 5px;
    padding: 0 5px;
    border-bottom: 1px solid var(--color-border-light);
}

.classifica_config_mini_table .mini_row {
    display: grid;
    grid-template-columns: 1fr 60px 40px;
    padding: 8px 5px;
    border-bottom: 1px solid var(--color-border-light);
    align-items: center;
    font-size: 0.85rem;
}

.classifica_config_mini_table .mini_row:last-child {
    border-bottom: none;
}

.classifica_config_mini_table .servizio_name {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    padding-right: 10px;
    font-weight: 500;
}

.flex-gap {
    display: flex;
    gap: 8px;
    justify-content: flex-end;
}

/* Hierarchy Actions CSS */
.mm_item {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
}

.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);
}

.mm_item.active .hierarchy-actions i {
    color: #0066cc !important;
    opacity: 1;
}

.mm_item.active .hierarchy-actions .btn-edit:hover,
.mm_item.active .hierarchy-actions .btn-delete:hover {
    color: #fff !important;
    transform: scale(1.2);
}

.classifica_config_mini_table .mini_header.no-actions {
    grid-template-columns: 1fr 60px !important;
}

/* --- Responsive Helpers --- */
@media (max-width: 768px) {
    .hidden-mobile {
        display: none !important;
    }

    .body_row.attivazioni_card {
        padding: 12px 15px !important;
        gap: 6px !important;
        min-height: auto;
        display: flex !important;
        flex-direction: column !important;
        justify-content: flex-start !important;
    }

    .body_row.attivazioni_card .td {
        padding: 4px 0 !important;
        font-size: 13.5px !important;
        min-height: 24px;
    }

    .body_row.attivazioni_card .td::before {
        font-size: 10px;
    }

    /* --- Settings & Classifica Config Mobile --- */
    .settings_tabs_container {
        flex-direction: column;
        height: auto;
        padding: 10px;
        gap: 8px;
        align-items: flex-start;
        overflow: visible;
    }

    .settings_tab_selector {
        width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        flex-shrink: unset;
    }

    .settings_tab_btn {
        font-size: 10px;
        padding: 5px 10px;
    }

    .settings_tab_actions {
        width: 100%;
        justify-content: flex-start;
        margin-left: 0;
    }

    .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;
    }
}

/* ========================================= */
/* === TARGET STORE STYLES === */
/* ========================================= */

.target_store_container {
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding: 20px;
    width: 100%;
}

/* Editor Panel */
.target_store_editor {
    background: #fff;
    border-radius: 12px;
    border: 1px solid #e5e7eb;
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.editor_row {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
}

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

.editor_field label {
    font-size: 13px;
    font-weight: 600;
    color: #374151;
}

.editor_field_half {
    flex: 1;
}

.editor_actions {
    display: flex;
    gap: 10px;
    justify-content: flex-start;
}

/* 3-Column Layout */
.target_store_columns {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    min-height: 400px;
}

.ts_column {
    background: #f9fafb;
    border-radius: 10px;
    border: 1px solid #e5e7eb;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.ts_column_header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 16px;
    background: #fff;
    border-bottom: 1px solid #e5e7eb;
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    color: #4b5563;
}

.ts_counter {
    background: #2563eb;
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 12px;
    min-width: 24px;
    text-align: center;
}

.ts_column_body {
    flex: 1;
    overflow-y: auto;
    padding: 8px;
}

/* Store Items */
.ts_store_item {
    padding: 10px 12px;
    margin-bottom: 4px;
    background: #fff;
    border-radius: 6px;
    border: 1px solid #e5e7eb;
    cursor: pointer;
    transition: all 0.2s ease;
    font-size: 13px;
}

.ts_store_item:hover {
    background: #e5f9f4;
    border-color: #10b981;
}

.ts_store_item.selected {
    background: #d1fae5;
    border-color: #10b981;
    font-weight: 600;
}

/* Checkbox Items */
.ts_checkbox_item {
    padding: 8px 12px;
    margin-bottom: 4px;
    background: #fff;
    border-radius: 6px;
    border: 1px solid #e5e7eb;
    transition: all 0.2s ease;
}

.ts_checkbox_item:hover {
    background: #f3f4f6;
}

.ts_checkbox_item label {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    font-size: 13px;
    margin: 0;
}

.ts_checkbox_item input[type="checkbox"] {
    width: 16px;
    height: 16px;
    cursor: pointer;
}

.ts_checkbox_item span {
    flex: 1;
}

.ts_badge {
    background: #e5e7eb;
    color: #4b5563;
    font-size: 11px;
    font-weight: 600;
    padding: 2px 6px;
    border-radius: 10px;
    min-width: 20px;
    text-align: center;
}

/* Saved Configurations */
.target_store_saved {
    background: #fff;
    border-radius: 12px;
    border: 1px solid #e5e7eb;
    padding: 20px;
}

.saved_header h3 {
    font-size: 16px;
    font-weight: 700;
    color: #1f2937;
    margin: 0 0 16px 0;
}

.saved_body {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.saved_config_group {
    background: #f9fafb;
    border-radius: 8px;
    border: 1px solid #e5e7eb;
    padding: 12px;
}

.saved_config_header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
    padding-bottom: 8px;
    border-bottom: 1px solid #e5e7eb;
    font-size: 14px;
    font-weight: 600;
    color: #1f2937;
}

.btn_delete_small {
    background: #ef4444;
    color: #fff;
    border: none;
    padding: 4px 8px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 12px;
    transition: all 0.2s ease;
}

.btn_delete_small:hover {
    background: #dc2626;
}

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

.saved_config_item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 6px 10px;
    background: #fff;
    border-radius: 4px;
    font-size: 12px;
    color: #4b5563;
}

.saved_values {
    font-weight: 600;
    color: #2563eb;
}

/* Mobile Responsive */
@media (max-width: 768px) {
    .target_store_columns {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .editor_row {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .ts_column {
        min-height: 300px;
    }
}

/* --- Target Store Inline Inputs --- */
.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;
}

/* --- 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);
}

/* Fix Target Store / Target Operatori: colonne che 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;
}

/* Gruppi e Piste (3 colonne) e Config. Classifica (5 colonne): box che riempiono l'altezza */
.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;
}

/* Layout Impostazioni > Stores: colonna Stores + colonna Mappatura affiancate */
.stores_impostazioni_wrapper {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0 15px;
    align-items: stretch;
    width: 100%;
    height: calc(100vh - 175px);
    overflow: hidden;
    box-sizing: border-box;
}

/* Colonna Stores (sinistra): scroll interno */
.stores_impostazioni_wrapper .macro_micro_layout.macro_micro_layout_1col {
    height: 100% !important;
    min-height: 0 !important;
    grid-template-rows: auto !important;
    overflow: hidden;
    display: flex !important;
    flex-direction: column;
    padding: 0 16px 16px 16px;
    box-sizing: border-box;
}
.stores_impostazioni_wrapper .macro_micro_layout.macro_micro_layout_1col .mm_col {
    height: 100% !important;
    display: flex;
    flex-direction: column;
    min-height: 0;
}
.stores_impostazioni_wrapper .macro_micro_layout.macro_micro_layout_1col .mm_col_header {
    flex-shrink: 0;
    padding: 16px 0 10px 0;
}
.stores_impostazioni_wrapper .macro_micro_layout.macro_micro_layout_1col .mm_col_list {
    flex: 1;
    overflow-y: auto;
    min-height: 0 !important;
    max-height: none !important;
}

/* Colonna mappatura (destra): stesso stile di .mm_col, scroll solo sul body della tabella */
.stores_impostazioni_wrapper .store_map_section {
    height: 100%;
    overflow: hidden;
    margin-top: 0;
    border-top: none;
    border-left: none;
    padding: 15px;
    box-sizing: border-box;
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.05);
    border: 1px solid var(--color-border-light);
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* Compat: altre classi che potrebbero aver toccato layout 1col */
.table_body>.macro_micro_layout.classifica_layout.macro_micro_layout_1col,
.table_body>.macro_micro_layout.macro_micro_layout_1col {
    height: auto !important;
    grid-template-rows: auto !important;
    min-height: 0 !important;
}
.table_body>.macro_micro_layout.classifica_layout.macro_micro_layout_1col:not(.ts_6col) .mm_col,
.table_body>.macro_micro_layout.macro_micro_layout_1col .mm_col {
    height: auto !important;
    min-height: 120px !important;
}
.table_body>.macro_micro_layout.classifica_layout.macro_micro_layout_1col:not(.ts_6col) .mm_col_list,
.table_body>.macro_micro_layout.macro_micro_layout_1col .mm_col_list {
    max-height: 420px;
    overflow-y: auto;
    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;
    }
}

/* ========================================= */
/* === Dashboard Report ===               */
/* ========================================= */

.table_body .dash_outer {
    display: flex;
    align-items: flex-start;
    gap: 0;
    width: 100%;
    min-height: 100%;
}

.dash_sidebar {
    width: 240px;
    min-width: 200px;
    flex-shrink: 0;
    background: #fff;
    border-right: 1px solid #e2e8f0;
    padding: 20px 16px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    align-self: stretch;
}

.dash_ranking {
    display: flex;
    flex-direction: column;
    gap: 10px;
    overflow-y: auto;
}

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

.dash_rank_pos {
    font-size: 16px;
    width: 24px;
    text-align: center;
    flex-shrink: 0;
}

.dash_rank_num {
    font-size: 11px;
    font-weight: 700;
    color: #94a3b8;
}

.dash_rank_info {
    flex: 1;
    min-width: 0;
}

.dash_rank_name {
    font-size: 12px;
    font-weight: 600;
    color: #1e293b;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-bottom: 3px;
}

.dash_rank_bar_wrap {
    background: #f1f5f9;
    border-radius: 99px;
    height: 5px;
    width: 100%;
}

.dash_rank_bar {
    background: #0b66dd;
    border-radius: 99px;
    height: 5px;
    min-width: 4px;
    transition: width 0.4s ease;
}

.dash_rank_val {
    font-size: 13px;
    font-weight: 700;
    color: #0b66dd;
    width: 28px;
    text-align: right;
    flex-shrink: 0;
}

.dash_rank_empty {
    font-size: 12px;
    color: #94a3b8;
    text-align: center;
    padding: 20px 0;
}

.table_body .dash_container {
    display: flex;
    flex-direction: column;
    gap: 20px;
    width: 100%;
    box-sizing: border-box;
}

.dash_title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    font-size: 16px;
    font-weight: 700;
    color: #0f172a;
}

.dash_src_btn {
    padding: 5px 14px;
    font-size: 12px;
    font-weight: 700;
    border: none;
    border-radius: 8px;
    background: transparent;
    color: #fff;
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
}

.dash_src_btn.active {
    background: #fff;
    color: #0b66dd;
}

.dash_title svg {
    width: 20px;
    height: 20px;
    color: var(--color-primary);
}

/* KPI row */
.dash_kpi_row {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 14px;
}

.dash_kpi_card {
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 16px;
    display: flex;
    align-items: center;
    gap: 14px;
}

.dash_kpi_icon {
    width: 44px;
    height: 44px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.dash_kpi_icon svg {
    width: 20px;
    height: 20px;
}

.dash_kpi_blue   { background: #eff6ff; color: #0b66dd; }
.dash_kpi_green  { background: #f0fdf4; color: #10b981; }
.dash_kpi_purple { background: #f5f3ff; color: #8b5cf6; }
.dash_kpi_yellow { background: #fffbeb; color: #f59e0b; }

.dash_kpi_info {
    min-width: 0;
    flex: 1;
}

.dash_kpi_value {
    font-size: 22px;
    font-weight: 700;
    color: #0f172a;
    line-height: 1.2;
}

.dash_kpi_metodi {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin-bottom: 2px;
}

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

.dash_kpi_metodo_nome {
    font-size: 11px;
    font-weight: 700;
    color: #0f172a;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 110px;
}

.dash_kpi_metodo_pct {
    font-size: 14px;
    font-weight: 700;
    color: #8b5cf6;
    white-space: nowrap;
}

.dash_kpi_top {
    font-size: 13px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.dash_kpi_label {
    font-size: 11px;
    color: #94a3b8;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-top: 2px;
}

/* Charts grid */
.dash_charts_row {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 14px;
}

.dash_chart_card {
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 18px;
}

.dash_chart_title {
    font-size: 13px;
    font-weight: 600;
    color: #475569;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-bottom: 14px;
}

.dash_chart_wrap {
    height: 260px;
    position: relative;
}

.dash_chart_doughnut_wrap {
    height: 240px;
}

/* costi dipendenti per azienda (tab Costi) — 3 colonne con grafico + lista */
.dash_az_grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
}
@media (max-width: 1100px) {
    .dash_az_grid { grid-template-columns: 1fr; }
}
.dash_az_col {
    border: 1px solid #eef2f6;
    border-radius: 12px;
    padding: 14px;
    background: #fcfdfe;
    display: flex;
    flex-direction: column;
    min-width: 0;
}
.dash_az_header {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    margin-bottom: 8px;
}
.dash_az_name {
    font-size: 14px;
    font-weight: 700;
    color: #0f172a;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}
.dash_az_tot {
    font-size: 14px;
    font-weight: 700;
    color: #0b66dd;
    font-variant-numeric: tabular-nums;
}
.dash_az_chart_wrap {
    height: 200px;
    position: relative;
    margin: 4px 0 12px;
}
.dash_az_list {
    display: flex;
    flex-direction: column;
    max-height: 320px;
    overflow-y: auto;
}
.dash_az_item {
    display: grid;
    grid-template-columns: 12px 1fr auto auto;
    gap: 8px;
    align-items: center;
    padding: 6px 4px;
    border-bottom: 1px solid #f1f5f9;
    font-size: 12.5px;
    color: #1e293b;
    cursor: default;
    border-radius: 6px;
    transition: background 0.12s ease;
}
.dash_az_item.hl,
.dash_az_item:hover {
    background: #eef5ff;
}
.dash_az_dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    flex-shrink: 0;
}
.dash_az_nom {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.dash_az_pct {
    color: #94a3b8;
    font-variant-numeric: tabular-nums;
    font-size: 11px;
}
.dash_az_eur {
    text-align: right;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    font-weight: 600;
}

/* last bar chart full width */
.dash_container > .dash_chart_card .dash_chart_wrap {
    height: 180px;
}

@media (max-width: 900px) {
    .dash_outer {
        flex-direction: column;
    }
    .dash_sidebar {
        width: 100%;
        border-right: none;
        border-bottom: 1px solid #e2e8f0;
    }
    .dash_kpi_row {
        grid-template-columns: repeat(2, 1fr);
    }
    .dash_charts_row {
        grid-template-columns: 1fr;
    }
}

/* =====================================
   UTILITY CLASSES (migrated from inline JS styles)
   ===================================== */

/* Layout helpers */
.d_flex { display: flex; }
.d_flex_col { display: flex; flex-direction: column; }
.hidden_init { display: none; }

/* Telefonate / Preventivatore / Settings shared layout */
.section_layout {
    display: flex;
    gap: 20px;
    align-items: stretch;
    width: 100%;
    height: 100%;
    min-height: 0;
    overflow: hidden;
}
.section_list_col {
    flex: 4;
    min-width: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
.section_list_col_3 {
    flex: 3;
    min-width: 0;
}
.section_form_col {
    flex: 1;
    min-width: 260px;
    max-width: 360px;
    border-left: 1px solid rgba(148, 163, 184, 0.5);
    padding-left: 16px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
.section_form_inner {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
}
.section_form_scroll {
    flex: 1;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding-right: 4px;
}
.section_form_actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    padding-top: 12px;
    flex-shrink: 0;
}
.form_group_col {
    display: flex;
    flex-direction: column;
}

/* Form field helpers */
.field_required { color: #ef4444; }
.field_hint {
    color: var(--text-muted, #94a3b8);
    font-size: 0.75rem;
    margin-top: 4px;
}
.textarea_resize_v { resize: vertical; }
.form_title_muted {
    font-weight: 600;
    font-size: 0.9rem;
    color: var(--text-muted, #94a3b8);
}

/* Settings promo table */
.promo_th_nome { flex: 3; }
.promo_th_small { flex: 1; }
.promo_td_nome { flex: 3; }
.promo_td_small { flex: 1; }
.badge_attiva { color: #22c55e; font-weight: 600; }
.badge_disattiva { color: #94a3b8; }
.badge_warn { color: #f59e0b; font-weight: 600; }

/* Login Logs — layout a 2 colonne */
.login_logs_layout {
    display: flex;
    flex-direction: row;
    height: 100%;
    width: 100%;
    gap: 0;
    overflow: hidden;
}

/* Pannello sinistro: tabella scrollabile */
.login_logs_main {
    flex: 1 1 0;
    min-width: 0;
    overflow-y: auto;
    overflow-x: auto;
    padding: 0 12px 12px 0;
}

/* Pannello destro: filtri fissi */
.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;
}

/* Righe tabella */
.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); }

/* Badges azione */
.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; }

/* Badge entity type */
.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 */
.audit_row_clickable { cursor: pointer; transition: background .15s; }
.audit_row_clickable:hover { background: var(--color-bg-light, #f3f4f6) !important; }

/* Modal audit detail */
.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;
}

/* Colonna sinistra: modifiche */
.audit_modal_left {
    flex: 1 1 0; min-width: 0;
    padding: 20px;
    border-right: 1px solid var(--color-border, #d1d5db);
    overflow-y: auto;
}

/* Colonna destra: riepilogo */
.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; }

/* Righe modifiche (colonna sinistra) */
.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; }

/* Diff before → after */
.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; font-weight: 600; word-break: break-all; }

/* Dashboard title inner wrapper */
.dash_title_left {
    display: flex;
    align-items: center;
    gap: 8px;
}
.dash_source_selector {
    display: inline-flex;
    gap: 6px;
    padding: 3px;
    border-radius: 10px;
    background: #0b66dd;
}

.dash_source_selector.src-telefonate {
    background: #10b981;
}

.dash_source_selector.src-fwa {
    background: #f59e0b;
}

.dash_source_selector.src-efficienza {
    background: #d946ef;
}

.dash_source_selector.src-costi {
    background: #ef4444;
}

.dash_source_selector.src-telefonate .dash_src_btn.active {
    color: #10b981;
}

.dash_source_selector.src-fwa .dash_src_btn.active {
    color: #f59e0b;
}

.dash_source_selector.src-efficienza .dash_src_btn.active {
    color: #d946ef;
}

.dash_source_selector.src-costi .dash_src_btn.active {
    color: #ef4444;
}

.dash_source_selector.src-provvigioni {
    background: #7c3aed;
}

.dash_source_selector.src-provvigioni .dash_src_btn.active {
    color: #7c3aed;
}

/* Overview tab */
.dash_src_btn_overview {
    background: linear-gradient(135deg, rgba(11,102,221,0.25) 0%, rgba(124,58,237,0.25) 100%);
    border: 1px solid rgba(255,255,255,0.3);
}

.dash_source_selector.src-overview {
    background: linear-gradient(135deg, #0b66dd 0%, #7c3aed 100%);
}

.dash_source_selector.src-overview .dash_src_btn.dash_src_btn_overview.active {
    background: #fff;
    color: #4f46e5;
}

/* Overview KPI row */
.ov_kpi_row {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 12px;
    margin-bottom: 16px;
}

@media (max-width: 1400px) {
    .ov_kpi_row { grid-template-columns: repeat(4, 1fr); }
}

@media (max-width: 900px) {
    .ov_kpi_row { grid-template-columns: repeat(2, 1fr); }
}

.ov_kpi_card {
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 14px 16px;
    display: flex;
    align-items: center;
    gap: 12px;
}

.ov_kpi_icon {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.ov_kpi_icon svg { width: 18px; height: 18px; }

.ov_icon_blue   { background: #eff6ff; color: #0b66dd; }
.ov_icon_red    { background: #fef2f2; color: #ef4444; }
.ov_icon_purple { background: #f5f3ff; color: #7c3aed; }
.ov_icon_orange { background: #fff7ed; color: #f97316; }
.ov_icon_green  { background: #f0fdf4; color: #059669; }
.ov_icon_indigo { background: #eef2ff; color: #6366f1; }

.ov_metodo_row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
    line-height: 1.4;
}

.ov_metodo_nome {
    font-size: 11px;
    font-weight: 700;
    color: #0f172a;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 90px;
}

.ov_metodo_pct {
    font-size: 13px;
    font-weight: 700;
    color: #6366f1;
    white-space: nowrap;
}

.ov_kpi_body { min-width: 0; flex: 1; }

.ov_kpi_val {
    font-size: 18px;
    font-weight: 700;
    color: #0f172a;
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ov_kpi_lbl {
    font-size: 10px;
    color: #94a3b8;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-top: 2px;
}

.ov_kpi_pos { color: #059669; }
.ov_kpi_neg { color: #dc2626; }

.ov_kpi_sub {
    font-size: 10px;
    color: #059669;
    margin-top: 4px;
    font-weight: 500;
}

.ov_chart_op_wrap { height: 300px; }

.dash_kpi_value_small { font-size: 14px; }

/* Previsionale source tab */
.dash_source_selector.src-previsionale { background: #059669; }
.dash_source_selector.src-previsionale .dash_src_btn.active { color: #059669; }

/* Titolo sotto-sezione dentro overview (es. "Previsionale") */
.ov_section_title {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 13px;
    font-weight: 600;
    color: #374151;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin: 24px 0 12px;
    padding-bottom: 8px;
    border-bottom: 1px solid #e5e7eb;
}

/* Previsionale panel */
.prev_kpi_row {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
    margin-bottom: 20px;
}
@media (max-width: 1100px) { .prev_kpi_row { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px)  { .prev_kpi_row { grid-template-columns: 1fr; } }

.prev_kpi_card {
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 14px 16px;
    display: flex;
    align-items: center;
    gap: 12px;
}
.prev_kpi_confermate { border-left: 4px solid #059669; }
.prev_kpi_corso      { border-left: 4px solid #f59e0b; }
.prev_kpi_perse      { border-left: 4px solid #94a3b8; }
.prev_kpi_totale     { border-left: 4px solid #0b66dd; }
.prev_kpi_provv      { border-left: 4px solid #7c3aed; }
.prev_kpi_proiezione { border-left: 4px solid #0891b2; }

.prev_kpi_icon {
    width: 40px; height: 40px;
    border-radius: 10px;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
}
.prev_kpi_confermate .prev_kpi_icon { background: #f0fdf4; color: #059669; }
.prev_kpi_corso      .prev_kpi_icon { background: #fffbeb; color: #f59e0b; }
.prev_kpi_perse      .prev_kpi_icon { background: #f8fafc; color: #94a3b8; }
.prev_kpi_totale     .prev_kpi_icon { background: #eff6ff; color: #0b66dd; }
.prev_kpi_icon svg { width: 18px; height: 18px; }

.prev_kpi_body { min-width: 0; flex: 1; }
.prev_kpi_val {
    font-size: 18px; font-weight: 700; color: #0f172a;
    line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.prev_val_perse  { color: #94a3b8; }
.prev_val_totale { color: #0b66dd; }
.prev_val_provv      { color: #7c3aed; }
.prev_val_pos        { color: #059669; }
.prev_val_proiezione { color: #0891b2; }
.prev_kpi_icon_purple { background: #f5f3ff; color: #7c3aed; }
.prev_kpi_icon_teal   { background: #ecfeff; color: #0891b2; }
.prev_kpi_val_row {
    display: flex;
    align-items: baseline;
    gap: 8px;
    flex-wrap: wrap;
}
.prev_kpi_sub_eur {
    font-size: 18px; font-weight: 700;
    color: #0f172a;
    white-space: nowrap;
}
.prev_kpi_lbl {
    font-size: 10px; color: #94a3b8;
    text-transform: uppercase; letter-spacing: 0.04em; margin-top: 2px;
}
.prev_kpi_lbl_row {
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
}
.prev_info_details {
    position: relative;
    display: inline-flex;
    align-items: center;
}
.prev_info_btn {
    list-style: none;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    border: 1px solid #cbd5e1;
    color: #64748b;
    font-size: 10px;
    font-weight: 700;
    line-height: 14px;
    text-align: center;
    cursor: pointer;
    background: #f8fafc;
    user-select: none;
}
.prev_info_btn::-webkit-details-marker { display: none; }
.prev_info_btn:hover { border-color: #94a3b8; color: #334155; background: #f1f5f9; }
.prev_info_popover {
    position: absolute;
    bottom: calc(100% + 8px);
    right: 0;
    z-index: 40;
    width: 290px;
    max-width: min(75vw, 290px);
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    box-shadow: 0 10px 25px rgba(15, 23, 42, 0.15);
    padding: 10px 11px;
    text-transform: none;
    letter-spacing: normal;
}
.prev_info_popover::before {
    content: '';
    position: absolute;
    bottom: -6px;
    right: 8px;
    width: 10px;
    height: 10px;
    background: #ffffff;
    border-right: 1px solid #e2e8f0;
    border-bottom: 1px solid #e2e8f0;
    transform: rotate(45deg);
}
.prev_info_line {
    font-size: 12px;
    line-height: 1.35;
    color: #334155;
}
.prev_info_line + .prev_info_line { margin-top: 6px; }
.prev_info_line_note {
    font-size: 11px;
    color: #64748b;
}

.prev_tables_row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}
@media (max-width: 900px) { .prev_tables_row { grid-template-columns: 1fr; } }

.prev_table_card {
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    overflow: hidden;
}
.prev_table_title {
    display: flex; align-items: center; gap: 8px;
    font-size: 13px; font-weight: 600; color: #0f172a;
    padding: 12px 16px;
    border-bottom: 1px solid #f1f5f9;
    background: #f8fafc;
}
.prev_table_wrap { overflow-x: auto; }

.prev_table {
    width: 100%; border-collapse: collapse;
    font-size: 12px;
}
.prev_table th {
    padding: 8px 10px;
    text-align: right;
    font-size: 10px; font-weight: 700;
    text-transform: uppercase; letter-spacing: 0.04em;
    color: #64748b;
    background: #f8fafc;
    border-bottom: 1px solid #e2e8f0;
    white-space: nowrap;
}
.prev_th_name, .prev_table td.prev_td_name { text-align: left; }
.prev_thead_sub th { background: #f1f5f9; font-size: 9px; color: #94a3b8; padding: 4px 10px; }

.prev_col_confermate { color: #059669; }
.prev_col_corso      { color: #d97706; }
.prev_col_perse      { color: #94a3b8; }
.prev_col_totale     { color: #0b66dd; font-weight: 700; }

.prev_table tbody tr:hover { background: #f8fafc; }
.prev_table td {
    padding: 8px 10px;
    border-bottom: 1px solid #f1f5f9;
    text-align: right;
    white-space: nowrap;
}
.prev_td_eur { font-weight: 600; }
.prev_empty  { text-align: center; color: #94a3b8; padding: 20px; }

/* Report operatori / stores */
.macro_proiezione_mt { margin-top: 4px; }

/* Classifica empty state */
.classifica_hint {
    margin-top: 15px;
    font-size: 0.9rem;
    color: #6b7280;
}

/* Calendario event badge */
.cal_event_badge {
    font-size: 10px;
    padding: 1px 6px;
}

/* Timeline */
.tl_prev_link { margin-top: 12px; }
.tl_prev_btn {
    font-size: 0.8rem;
    padding: 6px 14px;
}

/* Target operatori / store action buttons */
.target_actions_row {
    display: flex;
    gap: 10px;
    align-items: center;
}
.btn_target_primary {
    background: #0066cc;
    color: white;
    border: none;
    padding: 8px 20px;
    border-radius: 12px;
    cursor: pointer;
    font-weight: 600;
    font-size: 13px;
    display: flex;
    align-items: center;
    gap: 8px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    transition: all 0.2s ease;
}
.btn_target_primary:hover { background: #0052a3; }
.btn_target_success {
    background: #28a745;
    color: white;
    border: none;
    padding: 8px 20px;
    border-radius: 12px;
    cursor: pointer;
    font-weight: 600;
    font-size: 13px;
    display: flex;
    align-items: center;
    gap: 8px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    transition: all 0.2s ease;
}
.btn_target_success:hover { background: #218838; }

/* Hierarchy action icons */
.icon_edit_blue { color: #0066cc; cursor: pointer; margin-right: 8px; }
.icon_sync_green { color: #28a745; cursor: pointer; margin-right: 8px; }

/* Disabled add button */
.btn_add_disabled { cursor: not-allowed; opacity: 0.3; }

/* mm_item small text */
.mm_item_label { font-size: 12px; }

/* Obiettivi 3-col layout override */
.macro_micro_layout_3col { grid-template-columns: repeat(3, 1fr) !important; }

/* Stores in Impostazioni: una sola colonna (Stores) — costi/operatori spostati in Contabilità */
.macro_micro_layout_1col { grid-template-columns: 1fr !important; max-width: 640px; }

/* Mappatura costi -> store (Impostazioni > Stores) */
.store_map_header {
    display: flex; flex-direction: column; gap: 2px;
    margin-bottom: 10px; padding-bottom: 10px;
    border-bottom: 1px solid var(--color-border-light);
}
.store_map_header > span:first-child {
    font-size: 13px; font-weight: 700; color: var(--color-text-muted);
    text-transform: uppercase; letter-spacing: 0.04em;
}
.store_map_hint { font-size: 12px; color: #94a3b8; }
.store_map_warn {
    flex-shrink: 0;
    margin-bottom: 0; padding: 7px 12px; border-radius: 8px;
    background: #fef3c7; color: #92400e; font-size: 12.5px; font-weight: 600;
}
.store_map_table {
    display: flex; flex-direction: column;
    border: 1px solid #eef2f6; border-radius: 10px;
    overflow: hidden;
    flex: 1 1 auto; min-height: 0;
}
.store_map_table_head_row { flex: 0 0 auto; background: #f8fafc; border-bottom: 1px solid #eef2f6; border-radius: 10px 10px 0 0; }
.store_map_table_body { flex: 1 1 auto; overflow-y: auto; min-height: 0; }
.store_map_row {
    display: grid;
    grid-template-columns: 220px 1fr;
    gap: 0;
    align-items: center;
    padding: 9px 14px;
    border-bottom: 1px solid #f1f5f9;
    font-size: 12.5px;
    color: #1e293b;
}
.store_map_row > span { padding: 0 8px; }
.store_map_row > span:first-child { padding-left: 0; }
.store_map_table_body .store_map_row:last-child { border-bottom: none; }
.store_map_row.store_map_head {
    font-size: 11px; font-weight: 600; color: #64748b;
    text-transform: uppercase; letter-spacing: 0.04em;
    padding-top: 10px; padding-bottom: 10px;
}
.store_map_row.mapped { background: #f0fdf4; }
.store_map_az { font-weight: 600; }
.store_map_aliases { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.store_alias_chip {
    display: inline-flex; align-items: center; gap: 6px;
    background: #e0ecff; color: #1e40af; border-radius: 14px;
    padding: 3px 10px; font-size: 12px; font-weight: 600;
}
.store_alias_chip i { cursor: pointer; opacity: 0.6; font-size: 11px; }
.store_alias_chip i:hover { opacity: 1; color: #dc2626; }
.store_alias_input {
    min-width: 110px; flex: 1; padding: 4px 8px;
    border: 1px dashed #cbd5e1; border-radius: 7px; font-size: 12px; background: #fff;
}
.store_alias_select {
    min-width: 160px; max-width: 280px; flex: 1; padding: 4px 8px;
    border: 1px dashed #cbd5e1; border-radius: 7px; font-size: 12px;
    background: #fff; color: #475569; cursor: pointer;
    appearance: auto;
}
.store_alias_select:focus { outline: 1px solid #3b82f6; border-color: #3b82f6; }

/* Target input full width */
.input_full { width: 100%; padding: 8px; }

/* Obiettivi modal header */
.modal_header_blue {
    background: linear-gradient(135deg, #0066cc 0%, #0052a3 100%);
    padding: 18px 24px;
}
.modal_header_blue h3 {
    margin: 0;
    color: #fff;
    font-size: 17px;
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 10px;
}
.modal_counter_badge {
    background: rgba(255, 255, 255, 0.2);
    color: #fff;
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
}
.modal_close_icon {
    color: #fff;
    cursor: pointer;
    font-size: 18px;
    margin-left: 8px;
}
.modal_footer_actions {
    padding: 14px 24px;
    border-top: 1px solid #e5e7eb;
    display: flex;
    justify-content: flex-end;
    gap: 10px;
}

/* Obiettivi search bar */
.modal_search_row {
    display: flex;
    gap: 10px;
    align-items: center;
    margin-bottom: 16px;
    flex-shrink: 0;
}
.modal_search_wrap {
    flex: 1;
    position: relative;
}
.modal_search_icon {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: #9ca3af;
    font-size: 13px;
}
.modal_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;
}

/* mm_group_header flex layout */
.mm_group_header_flex {
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 12px 15px;
}
.mm_group_actions {
    margin-left: auto;
    display: flex;
    gap: 8px;
}
.btn_quick_icon { font-size: 9px; }

/* mm_item inner row */
.mm_item_row {
    display: flex;
    align-items: center;
    width: 100%;
    gap: 8px;
}
.mm_item_body { flex: 1; min-width: 0; }
.mm_item_codice {
    font-size: 12px;
    color: #0066cc !important;
    font-weight: 700;
}
.mm_item_nome {
    font-size: 12px;
    color: #0066cc !important;
    font-weight: 700;
    margin-top: 2px;
}
.mm_item_store {
    font-size: 12px;
    color: #0066cc !important;
    font-weight: 700;
}
.mm_item_icon_mr { margin-right: 5px; }
.btn_remove_entity_icon {
    margin-left: auto;
    color: #1d4ed8;
    cursor: pointer;
    opacity: 0.7;
}
.metric_badge_small {
    font-size: 9px;
    padding: 1px 4px;
    border-radius: 3px;
    margin-left: auto;
    opacity: 0.8;
}
.mm_item_default { cursor: default; }

/* _target_templates.js classes */
.mm_group_header_between { justify-content: space-between; padding-right: 10px; }
.mm_group_actions_lg { display: flex; gap: 12px; align-items: center; }
.icon_action_md { font-size: 14px; cursor: pointer; }
.icon_danger { color: #e53e3e; opacity: 0.8; }
.mm_item_label { font-size: 12px; }

/* _settings.js classes */
.layout_1_2col { grid-template-columns: 1fr 2fr !important; }
.col_header_sub { font-weight: normal; opacity: 0.8; }
.mm_item_flex_between { flex-grow: 1; display: flex; justify-content: space-between; align-items: center; margin-right: 8px; }
.metric_badge_vivid.PT { background: #4caf50 !important; color: white !important; }
.metric_badge_vivid.PZ { background: #ff9800 !important; color: white !important; }
.modal_select_scroll { max-height: 150px; overflow-y: auto; }
.btn_metric_base { flex: 1; padding: 8px; border: 1px solid #ddd; background: #f9f9f9; color: #333; cursor: pointer; border-radius: 4px; font-weight: 600; }
.btn_metric_base.btn_metric_pt { background: #4caf50; color: white; }
.btn_metric_base.btn_metric_pz { background: #ff9800; color: white; }
.modal_target_label { display: flex; align-items: center; gap: 8px; padding: 4px 8px; cursor: pointer; }
.modal_target_name { font-size: 13px; }
.flex_1 { flex: 1; }
.td_full_empty { grid-column: 1/-1; text-align: center; color: #888; }
.text_muted { color: #888; }
.icon_action_blue { color: #2563eb; }
.icon_action_muted { color: #9ca3af; }
.inline_action.inline_action_label { width: auto; padding: 0 8px; gap: 5px; font-size: 11px; font-weight: 600; }
.label_sub { font-weight: normal; color: #666; }
.metric_selector_gap { gap: 10px; }
.mm_item_row_between { justify-content: space-between; }

/* Better contrast for active store rows */
.mm_item.active .mm_item_store {
    color: #ffffff !important;
}

.mm_item.active .inline_action {
    background-color: rgba(255, 255, 255, 0.18);
    border: 1px solid rgba(255, 255, 255, 0.35);
}

.mm_item.active .inline_action.edit {
    color: #ffffff;
}

.mm_item.active .inline_action.delete {
    color: #ffe2e2;
}
.modal_header_actions { gap: 10px; align-items: center; }
.input_error { border-color: #e53e3e !important; box-shadow: 0 0 0 2px rgba(229,62,62,0.15) !important; }
.field_hint_error { color: #e53e3e !important; font-weight: 600; }

/* ======================== */
/* Toast notifications      */
/* ======================== */
#toast_container { position: fixed; bottom: 24px; right: 24px; z-index: 9999; display: flex; flex-direction: column; gap: 10px; pointer-events: none; }
.toast { pointer-events: all; display: flex; flex-direction: column; border-radius: 8px; font-size: 14px; font-weight: 500; color: #fff; box-shadow: 0 4px 16px rgba(0,0,0,0.18); opacity: 0; transform: translateY(12px); transition: opacity 0.25s ease, transform 0.25s ease; cursor: pointer; max-width: 340px; overflow: hidden; }
.toast.toast_visible { opacity: 1; transform: translateY(0); }
.toast_success { background: #10b981; }
.toast_error { background: #ef4444; }
.toast_warning { background: #f59e0b; }
.toast_info { background: #3b82f6; }
.toast_body { display: flex; align-items: center; gap: 10px; padding: 12px 18px; }
.toast_msg { flex: 1; }
.toast_undo_btn { background: rgba(255,255,255,0.25); border: 1px solid rgba(255,255,255,0.5); color: #fff; border-radius: 5px; padding: 3px 10px; font-size: 13px; font-weight: 600; cursor: pointer; white-space: nowrap; }
.toast_undo_btn:hover { background: rgba(255,255,255,0.4); }
.toast_progress { height: 3px; background: rgba(255,255,255,0.4); width: 100%; transform-origin: left; }
@keyframes toast_shrink { from { transform: scaleX(1); } to { transform: scaleX(0); } }

/* ======================== */
/* Followup badge & modal   */
/* ======================== */
.followup_badge {
    display: inline-block;
    padding: 2px 10px;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.04em;
    cursor: pointer;
    user-select: none;
    transition: opacity 0.15s;
}
.followup_badge:hover { opacity: 0.8; }
.followup_badge.aperto   { background: #fef3c7; color: #92400e; border: 1px solid #f59e0b; }
.followup_badge.positivo { background: #d1fae5; color: #065f46; border: 1px solid #10b981; }
.followup_badge.negativo { background: #fee2e2; color: #991b1b; border: 1px solid #ef4444; }

.modal_followup_box {
    border-radius: 16px !important;
    overflow: hidden !important;
    padding: 0 !important;
}
.modal_followup_header {
    background: linear-gradient(135deg, #0066cc 0%, #0052a3 100%);
    padding: 12px 18px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.modal_followup_header h3 {
    margin: 0;
    color: #fff;
    font-size: 14px;
    font-weight: 700;
}
.modal_followup_header span {
    cursor: pointer;
    color: #fff;
    font-size: 20px;
    line-height: 1;
}
.modal_followup_body {
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}
.followup_esito_row {
    display: flex;
    gap: 12px;
}
.followup_esito_btn {
    flex: 1;
    padding: 12px;
    border-radius: 10px;
    border: 2px solid transparent;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.15s;
    background: #f3f4f6;
    color: #374151;
}
.followup_esito_btn:hover { opacity: 0.85; }
.followup_esito_btn.positivo { background: #d1fae5; color: #065f46; border-color: #10b981; }
.followup_esito_btn.negativo { background: #fee2e2; color: #991b1b; border-color: #ef4444; }
.followup_esito_btn.selected.positivo { background: #10b981; color: #fff; }
.followup_esito_btn.selected.negativo { background: #ef4444; color: #fff; }
.modal_followup_footer {
    display: flex;
    gap: 10px;
    padding: 14px 20px;
    border-top: 1px solid #e5e7eb;
}
.modal_followup_footer .btn_filtro {
    flex: 1;
    text-align: center;
}

/* ========================================= */
/* === Telefonate Features (1-6) === */
/* ========================================= */

/* Feature 1: Storico chiamate sul numero */
.tel_storico_dropdown {
    position: absolute;
    left: 0;
    right: 0;
    top: calc(100% - 2px);
    background: #ffffff;
    border: 1px solid #d1d5db;
    border-radius: 8px;
    box-shadow: 0 4px 16px rgba(0,0,0,0.10);
    z-index: 100;
    max-height: 200px;
    overflow-y: auto;
}
.tel_storico_dropdown:empty {
    display: none;
}
.tel_storico_item {
    padding: 8px 12px;
    cursor: pointer;
    font-size: 12px;
    border-bottom: 1px solid #f3f4f6;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.tel_storico_item:last-child {
    border-bottom: none;
}
.tel_storico_item:hover {
    background: #f9fafb;
}
.tel_storico_item_esito {
    font-weight: 600;
    color: #374151;
}
.tel_storico_item_meta {
    color: #9ca3af;
    font-size: 11px;
}

/* Feature 3: Contatore chiamate nella lista */
.tel_call_count_badge {
    display: inline-block;
    background: #dbeafe;
    color: #1d4ed8;
    border-radius: 20px;
    font-size: 10px;
    font-weight: 700;
    padding: 1px 6px;
    margin-left: 4px;
    vertical-align: middle;
}

/* Feature 4: Highlight righe per priorità */
.tel_row_urgent {
    background: #fff7ed !important;
    border-left: 3px solid #f97316 !important;
}
.tel_row_today {
    background: #f0fdf4 !important;
    border-left: 3px solid #22c55e !important;
}

/* Feature 6: Colonna giorni fa */
.tel_days_ago {
    font-size: 10px;
    color: #9ca3af;
    margin-left: 2px;
    display: block;
}

.filtro_checkbox_label {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    font-weight: 600;
    color: #374151;
    cursor: pointer;
    user-select: none;
}
.filtro_checkbox_label input[type="checkbox"] {
    width: 16px;
    height: 16px;
    cursor: pointer;
    accent-color: #0066cc;
}

/* ===================== ECONOMIA ===================== */

.econ_header_bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    width: 100%;
    flex-wrap: wrap;
}

.econ_date_bar {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

.econ_date_group {
    display: flex;
    align-items: center;
    gap: 4px;
}

.econ_date_label {
    font-size: 11px;
    font-weight: 600;
    color: #64748b;
    white-space: nowrap;
}

.econ_date_input {
    width: 130px;
    font-size: 12px;
    padding: 4px 6px;
    height: 30px;
}

.econ_ricalcola_btn {
    white-space: nowrap;
    flex-shrink: 0;
    background: #f1f5f9;
    color: #475569;
    border: 1px solid #e2e8f0;
}

.econ_ricalcola_btn:hover {
    background: #e2e8f0;
    color: #1e293b;
}

.econ_mese_bar {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    padding: 8px 4px;
    flex: 1;
}

.econ_mese_btn {
    padding: 5px 14px;
    font-size: 12px;
    font-weight: 700;
    border: none;
    border-radius: 20px;
    background: transparent;
    color: #94a3b8;
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
    letter-spacing: 0.02em;
    text-transform: uppercase;
}

.econ_mese_btn:hover {
    background: #e2e8f0;
    color: #334155;
}

.econ_mese_btn.active {
    background: #0b66dd;
    color: #fff;
}

.econ_mese_empty {
    font-size: 12px;
    color: #94a3b8;
    padding: 4px 0;
}

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

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

.econ_store_tot {
    font-size: 0.72rem;
    font-weight: 700;
    color: #dc2626;
    background: #fee2e2;
    border-radius: 5px;
    padding: 2px 7px;
    white-space: nowrap;
    flex-shrink: 0;
}

.econ_costi_list {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 6px 0;
}

.econ_costo_row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 7px 14px;
    border-radius: 7px;
    transition: background 0.12s;
}

.econ_costo_row:hover {
    background: #f8fafc;
}

.econ_costo_label {
    display: flex;
    align-items: center;
    gap: 0;
    font-size: 0.84rem;
    font-weight: 500;
    color: #1e293b;
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.econ_costo_importo {
    font-size: 0.84rem;
    font-weight: 700;
    color: #dc2626;
    white-space: nowrap;
    flex-shrink: 0;
}


/* Pod Doppi — raggruppamento */
.pd_child_hidden {
    display: none !important;
}

.pd_child_row {
    background: #f8fafc;
    border-left: 3px solid #c7d2fe;
}

.pd_child_indent {
    width: 24px;
    flex-shrink: 0;
}

.pd_group_row.pd_has_children {
    cursor: pointer;
}

.pd_group_row.pd_group_open {
    border-left: 3px solid #6366f1;
}

.body_row.attivazioni_card .td.td_actions,
.header_row.attivazioni_card .th.th_actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    min-width: 36px;
    flex-shrink: 0;
}

.pd_group_badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 20px;
    padding: 0 5px;
    border-radius: 10px;
    background: #3b82f6;
    color: #fff;
    font-size: 11px;
    font-weight: 700;
}

/* Override per grid attivazioni — in fondo per avere priorità su .td/.th flex:1 */
.header_row.attivazioni_card .th,
.body_row.attivazioni_card .td {
    flex: 1 !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Colonne compatte: Data(1), Quota(2) */
.header_row.attivazioni_card .th:nth-child(1),
.body_row.attivazioni_card .td:nth-child(1),
.header_row.attivazioni_card .th:nth-child(2),
.body_row.attivazioni_card .td:nth-child(2) { flex: 0.8 !important; }

/* Colonne allargate: Sportello(3), Nominativo(5), Operatore(6) */
.header_row.attivazioni_card .th:nth-child(3),
.body_row.attivazioni_card .td:nth-child(3),
.header_row.attivazioni_card .th:nth-child(5),
.body_row.attivazioni_card .td:nth-child(5),
.header_row.attivazioni_card .th:nth-child(6),
.body_row.attivazioni_card .td:nth-child(6) { flex: 1.4 !important; }

/* POD/PDR(4): allargata ulteriormente per fare spazio al pulsante copia */
.header_row.attivazioni_card .th:nth-child(4),
.body_row.attivazioni_card .td:nth-child(4) { flex: 2.4 !important; }

/* Colonne allargate: Azione comm.(7), Opportunity fase(8) */
.header_row.attivazioni_card .th:nth-child(7),
.body_row.attivazioni_card .td:nth-child(7),
.header_row.attivazioni_card .th:nth-child(8),
.body_row.attivazioni_card .td:nth-child(8) { flex: 1.3 !important; }

/* Status(9) e Stato Ordine(10): allargate */
.header_row.attivazioni_card .th:nth-child(9),
.body_row.attivazioni_card .td:nth-child(9),
.header_row.attivazioni_card .th:nth-child(10),
.body_row.attivazioni_card .td:nth-child(10) { flex: 1.1 !important; }

/* Tariffa(11): nome prodotto/tariffa del contratto, testo più lungo */
.header_row.attivazioni_card .th:nth-child(11),
.body_row.attivazioni_card .td:nth-child(11) { flex: 1.3 !important; }

/* vuota(12) */
.header_row.attivazioni_card .th:nth-child(12),
.body_row.attivazioni_card .td:nth-child(12) { flex: 0.9 !important; }

/* CER(13) e Allegati/Da Pagare(14, 15): piccoli */
.header_row.attivazioni_card .th:nth-child(13),
.body_row.attivazioni_card .td:nth-child(13),
.header_row.attivazioni_card .th:nth-child(14),
.body_row.attivazioni_card .td:nth-child(14),
.header_row.attivazioni_card .th:nth-child(15),
.body_row.attivazioni_card .td:nth-child(15) { flex: 0.6 !important; }

/* Tabella costi dipendenti: 8 colonne */
.body_row.costi_card,
.header_row.costi_card {
    height: 38px;
    min-height: 38px;
    max-height: 38px;
    padding: 0 8px;
    font-size: 12px;
    display: grid !important;
    grid-template-columns: 150px minmax(0,1.4fr) minmax(0,1fr) minmax(0,1fr) 130px 90px 95px 105px;
    justify-content: unset;
    align-items: center;
}
.header_row.costi_card { cursor: default; }
.body_row.costi_card:hover { background: #f0fdf4; }
.body_row.costi_card.selected { background: #d1fae5; border-left: 3px solid #059669; }
.costi_store_cell { padding: 0 4px; }
.costi_store_sel {
    width: 100%;
    height: 26px;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    font-size: 11px;
    color: #1e293b;
    background: #fff;
    padding: 0 4px;
    cursor: pointer;
}
.costi_store_sel:focus { outline: none; border-color: #059669; box-shadow: 0 0 0 2px rgba(5,150,105,0.15); }


/* Tabella importazioni provvigioni: 13 colonne */
.body_row.importazioni_card,
.header_row.importazioni_card {
    height: 38px;
    min-height: 38px;
    max-height: 38px;
    padding: 0 8px;
    font-size: 12px;
    display: grid !important;
    grid-template-columns: 76px 70px 96px minmax(0,1.8fr) minmax(0,1.4fr) 70px 120px 130px 110px 90px 90px 90px 110px;
    justify-content: unset;
    align-items: center;
    cursor: pointer;
}

.header_row.importazioni_card {
    cursor: default;
}

.body_row.importazioni_card:hover {
    background: #f0f4ff;
}

.body_row.importazioni_card.import_row_selected {
    background: #ede9fe;
    border-left: 3px solid #8b5cf6;
}

.header_row.importazioni_card .th,
.body_row.importazioni_card .td {
    flex: unset !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 12px;
}

.th.th_right,
.td.td_right {
    text-align: right;
}

.td.td_clickable {
    cursor: pointer;
    color: #4f46e5;
    text-decoration: underline;
    text-underline-offset: 2px;
}
.td.td_clickable:hover {
    color: #3730a3;
}

/* ── Pannello dettaglio riga importazione ── */
.import_detail_panel {
    position: fixed;
    top: 0;
    right: 0;
    width: 360px;
    height: 100vh;
    background: #fff;
    border-left: 1px solid #e2e8f0;
    box-shadow: -4px 0 24px rgba(0,0,0,0.10);
    display: flex;
    flex-direction: column;
    z-index: 300;
    transform: translateX(100%);
    transition: transform 0.22s cubic-bezier(.4,0,.2,1);
    overflow: hidden;
}

.import_detail_panel.open {
    transform: translateX(0);
}

.idp_header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 14px 16px;
    border-bottom: 1px solid #e2e8f0;
    background: #f8fafc;
    flex-shrink: 0;
}

.idp_header_left {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

.idp_title {
    font-size: 13px;
    font-weight: 700;
    color: #1e293b;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.idp_close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    flex-shrink: 0;
    background: transparent;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    cursor: pointer;
    color: #64748b;
    transition: background 0.15s;
}
.idp_close:hover { background: #f1f5f9; }

.idp_body {
    flex: 1;
    overflow-y: auto;
    padding: 12px 16px 24px;
}

.idp_section_title {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #94a3b8;
    margin: 16px 0 8px;
}
.idp_section_title:first-child { margin-top: 4px; }

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

.idp_field {
    display: flex;
    align-items: baseline;
    gap: 8px;
    font-size: 12px;
}

.idp_label {
    flex: 0 0 150px;
    color: #64748b;
    font-size: 11px;
}

.idp_value {
    color: #1e293b;
    font-weight: 500;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ============ MODALE PROFILO UTENTE ============ */
.modal_profilo {
    width: 860px;
    max-width: 96vw;
    border-radius: 12px;
    overflow: visible;
}

.modal_profilo .modal_header { display: none; }

.profilo_close_inline {
    position: absolute;
    top: -10px;
    right: -10px;
    background: #ef4444;
    border: none;
    font-size: 13px;
    color: #fff;
    cursor: pointer;
    width: 26px;
    height: 26px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    line-height: 1;
    z-index: 100;
    transition: background 0.15s;
    box-shadow: 0 2px 6px rgba(0,0,0,0.2);
}
.profilo_close_inline:hover { background: #dc2626; }

.modal_title_row {
    display: flex;
    align-items: center;
    gap: 10px;
}

.modal_title_row h3 {
    margin: 0;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.05em;
    color: white;
}

.modal_title_row .nav_icon svg {
    stroke: white;
}

.modal_close_btn {
    background: none;
    border: none;
    color: white;
    font-size: 16px;
    cursor: pointer;
    padding: 4px 8px;
    border-radius: 4px;
    line-height: 1;
    opacity: 0.7;
    transition: opacity 0.2s;
}
.modal_close_btn:hover { opacity: 1; }

.profilo_body {
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.profilo_avatar_row {
    display: flex;
    align-items: center;
    gap: 16px;
    position: relative;
}

.profilo_avatar {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: #1e293b;
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    font-weight: 700;
    flex-shrink: 0;
    letter-spacing: 0.05em;
}

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

.profilo_nome {
    font-size: 16px;
    font-weight: 700;
    color: #1e293b;
    letter-spacing: 0.03em;
}

.profilo_badge {
    display: inline-block;
    background: #e2e8f0;
    color: #475569;
    font-size: 11px;
    font-weight: 600;
    padding: 3px 10px;
    border-radius: 20px;
    letter-spacing: 0.05em;
}

.profilo_info_grid {
    display: flex;
    flex-direction: column;
    gap: 0;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    overflow: hidden;
}

.profilo_info_row {
    display: flex;
    align-items: flex-start;
    padding: 10px 14px;
    gap: 12px;
    border-bottom: 1px solid #f1f5f9;
}

.profilo_info_row:last-child { border-bottom: none; }

.profilo_label {
    flex: 0 0 130px;
    font-size: 11px;
    color: #94a3b8;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding-top: 2px;
}

.profilo_value {
    font-size: 13px;
    color: #1e293b;
    font-weight: 500;
    flex: 1;
    word-break: break-word;
}

.profilo_password_section {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.profilo_section_title {
    font-size: 11px;
    font-weight: 700;
    color: #94a3b8;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    padding-bottom: 8px;
    border-bottom: 1px solid #e2e8f0;
}

.profilo_pw_fields {
    display: flex;
    flex-direction: row;
    gap: 12px;
}

.profilo_pw_fields .form_group label {
    font-size: 0.72rem;
    font-weight: 700;
    color: #94a3b8;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.profilo_pw_fields .form_group input {
    padding: 10px 12px;
    border: 1px solid rgba(148, 163, 184, 0.7);
    border-radius: 8px;
    font-size: 0.9rem;
    width: 100%;
    background: #f8fafc;
    box-sizing: border-box;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.profilo_pw_fields .form_group input:focus {
    outline: none;
    border-color: #2563eb;
    box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.15);
    background: #fff;
}

.form_row_error {
    font-size: 12px;
    padding: 4px 2px;
    color: #ef4444;
}

.profilo_footer {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 10px;
    padding: 14px 20px;
    border-top: 1px solid #e2e8f0;
    background: #f8fafc;
}

.profilo_btn {
    height: 38px;
    min-width: 120px;
    border-radius: 8px;
    border: 1px solid transparent;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.18s ease;
    padding: 0 18px;
    letter-spacing: 0.02em;
}

.profilo_btn_cancel {
    background: #ffffff;
    color: #64748b;
    border-color: #cbd5e1;
}
.profilo_btn_cancel:hover {
    background: #f1f5f9;
    border-color: #94a3b8;
}

.profilo_btn_save {
    background: #1e293b;
    color: #ffffff;
    border-color: #1e293b;
}
.profilo_btn_save:hover {
    background: #334155;
    border-color: #334155;
}

.profilo_badges_row {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items: center;
}

.profilo_badge_stato.stato_attivo {
    background: #dcfce7;
    color: #16a34a;
}

.profilo_badge_stato.stato_sospeso {
    background: #fef3c7;
    color: #d97706;
}

.profilo_stores_list {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
}

.profilo_store_chip {
    display: inline-block;
    background: #f1f5f9;
    color: #475569;
    font-size: 11px;
    font-weight: 500;
    padding: 3px 9px;
    border-radius: 20px;
    border: 1px solid #e2e8f0;
    white-space: nowrap;
}

.profilo_btn_desktop {
    margin-right: 4px;
}

#modal_profilo_overlay {
    z-index: 2000;
}

/* Due colonne nel profilo */
.profilo_two_cols {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    overflow: hidden;
}

.profilo_col {
    display: flex;
    flex-direction: column;
}

.profilo_col:first-child {
    border-right: 1px solid #e2e8f0;
}

.profilo_col .profilo_section_title {
    padding: 0 14px;
    height: 38px;
    min-height: 38px;
    background: #f8fafc;
    border-bottom: 1px solid #e2e8f0;
    margin: 0;
    display: flex;
    align-items: center;
}

.profilo_col .profilo_info_grid {
    border: none;
    border-radius: 0;
    flex: 1;
}

.profilo_col .profilo_info_row {
    padding: 8px 14px;
}

.profilo_col .profilo_label {
    flex: 0 0 110px;
    font-size: 11px;
}

/* Bottone modifica operatore */
.profilo_op_edit_btn {
    background: none;
    border: none;
    padding: 2px 4px;
    font-size: 13px;
    font-weight: 400;
    color: #94a3b8;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    line-height: 1;
    transition: color 0.15s;
}
.profilo_op_edit_btn:hover { color: #3b82f6; }

/* Form edit operatore */
.profilo_op_form {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 10px 14px;
}

.profilo_op_field {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 8px;
    padding: 4px 0;
    border-bottom: 1px solid #f1f5f9;
}

.profilo_op_field label {
    flex: 0 0 110px;
    font-size: 10px;
    font-weight: 700;
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.profilo_op_field input {
    flex: 1;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    padding: 5px 8px;
    font-size: 12px;
    font-family: inherit;
    outline: none;
    transition: border-color 0.2s;
    background: #fff;
}

.profilo_op_field input:focus { border-color: #3b82f6; }

.profilo_op_form_actions {
    display: flex;
    gap: 8px;
    margin-top: 4px;
}

.profilo_op_form_msg {
    font-size: 12px;
    padding: 6px 10px;
    border-radius: 6px;
    margin-top: 2px;
}
.profilo_op_form_msg.is-ok  { background: #ecfdf5; color: #047857; border: 1px solid #6ee7b7; }
.profilo_op_form_msg.is-err { background: #fef2f2; color: #b91c1c; border: 1px solid #fca5a5; }

@media (max-width: 640px) {
    .profilo_two_cols { grid-template-columns: 1fr; }
    .profilo_col:first-child { border-right: none; border-bottom: 1px solid #e2e8f0; }
}

/* ============ PROFILO — SEZIONE 2FA ============ */
.profilo_2fa_status_row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
}

.profilo_2fa_status {
    font-size: 13px;
    color: #475569;
    flex: 1;
}

.profilo_2fa_on {
    color: #16a34a;
    font-weight: 700;
}

.profilo_2fa_off {
    color: #94a3b8;
    font-weight: 600;
}

.profilo_devices_list {
    display: flex;
    flex-direction: row;
    gap: 8px;
    margin-top: 8px;
    overflow-x: auto;
    padding-bottom: 4px;
}

.profilo_devices_list::-webkit-scrollbar { height: 4px; }
.profilo_devices_list::-webkit-scrollbar-track { background: transparent; }
.profilo_devices_list::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 2px; }

.profilo_devices_loading,
.profilo_devices_empty {
    font-size: 12px;
    color: #64748b;
    padding: 6px 0;
}

.profilo_device_row {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 10px 12px;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    background: #fff;
    flex: 0 0 220px;
    min-width: 220px;
}

.profilo_device_row.is_enrollment {
    border-color: #86efac;
    background: #f0fdf4;
}

.profilo_device_main { min-width: 0; }

.profilo_device_label {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 600;
    font-size: 13px;
    color: #1e293b;
    flex-wrap: wrap;
}

.profilo_device_label i { color: #475569; }
.profilo_device_row.is_enrollment .profilo_device_label i { color: #16a34a; }

.profilo_device_meta {
    font-size: 11px;
    color: #64748b;
    margin-top: 3px;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.profilo_device_badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px;
    border-radius: 5px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.02em;
    text-transform: uppercase;
}

.profilo_device_badge_enroll  { background: #dcfce7; color: #166534; }
.profilo_device_badge_current { background: #dbeafe; color: #1e40af; }

.profilo_btn_2fa {
    min-width: 110px;
    height: 34px;
    font-size: 12px;
    padding: 0 14px;
    border-radius: 7px;
    border: 1px solid transparent;
    cursor: pointer;
    font-weight: 600;
    transition: all 0.18s ease;
    white-space: nowrap;
}

.profilo_btn_2fa_on {
    background: #1e293b;
    color: white;
    border-color: #1e293b;
}
.profilo_btn_2fa_on:hover { background: #334155; }

.profilo_btn_2fa_off {
    background: #fff5f5;
    color: #dc2626;
    border-color: #fca5a5;
}
.profilo_btn_2fa_off:hover { background: #fee2e2; }

.profilo_2fa_setup,
.profilo_2fa_disable {
    display: flex;
    flex-direction: column;
    gap: 14px;
    margin-top: 4px;
    padding: 16px;
    background: #f8fafc;
    border-radius: 8px;
    border: 1px solid #e2e8f0;
}

.profilo_2fa_instructions {
    font-size: 13px;
    color: #475569;
    line-height: 1.8;
}

.profilo_2fa_instructions span {
    font-weight: 700;
    color: #1e293b;
}

.profilo_qr_wrapper {
    display: flex;
    justify-content: center;
    padding: 12px;
    background: white;
    border-radius: 8px;
    border: 1px solid #e2e8f0;
}

.profilo_qr_wrapper img {
    width: 180px;
    height: 180px;
    display: block;
}

.profilo_2fa_confirm_row {
    display: flex;
    align-items: flex-end;
    gap: 12px;
}

.profilo_2fa_confirm_row .form_group {
    flex: 1;
}

/* === UPLOAD DIRETTO ALLEGATI ATTIVAZIONI === */
.attiv_btn_upload_diretto{display:inline-flex;align-items:center;gap:6px;background:#eff6ff;color:#2563eb;border:1px solid #bfdbfe;border-radius:8px;padding:6px 12px;font-size:0.78rem;font-weight:600;cursor:pointer;transition:background .15s,border-color .15s;}
.attiv_btn_upload_diretto:hover{background:#dbeafe;border-color:#93c5fd;}
.attiv_btn_upload_diretto i{font-size:0.85rem;}

.attiv_upload_modal{position:fixed;inset:0;background:rgba(15,23,42,.55);display:flex;align-items:center;justify-content:center;z-index:9999;animation:auu_fade .12s ease-out;}
@keyframes auu_fade{from{opacity:0}to{opacity:1}}
.auu_content{background:#fff;border-radius:14px;border:1px solid #e2e8f0;width:min(440px,92vw);box-shadow:0 12px 40px rgba(15,23,42,.25);overflow:hidden;}
.auu_header{display:flex;align-items:center;justify-content:space-between;padding:14px 18px;background:#0f172a;color:#fff;font-weight:700;letter-spacing:.03em;}
.auu_header i{margin-right:6px;}
.auu_close{background:transparent;border:none;color:#fff;cursor:pointer;padding:4px;border-radius:4px;}
.auu_close:hover{background:rgba(255,255,255,.12);}
.auu_body{padding:18px;}
.auu_hint{margin:0 0 14px;font-size:13px;color:#475569;line-height:1.5;}
.auu_field{display:flex;flex-direction:column;gap:4px;margin-bottom:12px;}
.auu_field label{font-size:11px;font-weight:700;color:#0f172a;text-transform:uppercase;letter-spacing:.05em;}
.auu_field input,
.auu_field select{padding:8px 10px;border:1px solid #cbd5e1;border-radius:8px;font-size:13px;font-family:inherit;width:100%;box-sizing:border-box;background:#fff;}
.auu_field input:focus,
.auu_field select:focus{outline:none;border-color:#2563eb;box-shadow:0 0 0 3px rgba(37,99,235,.15);}
.auu_field input:disabled{background:#f1f5f9;color:#64748b;cursor:not-allowed;}
/* --- Form FWA: layout multicolonna a sezioni --- */
.auu_content_wide{width:min(720px,94vw);}
.fwa_form{max-height:calc(100vh - 200px);overflow-y:auto;}
.fwa_section{margin-bottom:18px;}
.fwa_section:last-of-type{margin-bottom:8px;}
.fwa_section_title{display:flex;align-items:center;gap:7px;font-size:11px;font-weight:800;color:#475569;text-transform:uppercase;letter-spacing:.06em;padding-bottom:6px;margin-bottom:12px;border-bottom:1px solid #e2e8f0;}
.fwa_section_title i{color:#2563eb;font-size:12px;}
.fwa_grid{display:grid;grid-template-columns:repeat(12,1fr);gap:10px 12px;}
.fwa_grid .auu_field{margin-bottom:0;min-width:0;}
.fwa_c3{grid-column:span 3;}
.fwa_c4{grid-column:span 4;}
.fwa_c6{grid-column:span 6;}
.fwa_c8{grid-column:span 8;}
.fwa_c12{grid-column:span 12;}
/* Campo compilato automaticamente (es. provincia dedotta dal CAP) */
.auu_field input.fwa_auto_filled{background:#eff6ff;border-color:#bfdbfe;color:#1d4ed8;font-weight:700;}
/* Anteprima indirizzo composto */
.fwa_preview{display:flex;align-items:baseline;gap:10px;margin-top:12px;padding:9px 12px;background:#f8fafc;border:1px dashed #cbd5e1;border-radius:8px;}
.fwa_preview_label{flex:0 0 auto;font-size:10px;font-weight:800;color:#64748b;text-transform:uppercase;letter-spacing:.05em;}
.fwa_preview_val{flex:1 1 auto;min-width:0;font-size:13px;font-weight:600;color:#0f172a;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.fwa_preview_val.fwa_preview_empty{color:#94a3b8;font-weight:400;font-style:italic;}
@media (max-width:640px){
  .fwa_c4,.fwa_c6,.fwa_c8{grid-column:span 12;}
  /* i campi corti restano affiancati anche su mobile */
  .fwa_c3{grid-column:span 6;}
  .fwa_half_sm{grid-column:span 8;}
  .fwa_short{grid-column:span 4;}
  .fwa_preview{flex-direction:column;gap:3px;}
  .fwa_preview_val{white-space:normal;}
}
.auu_actions{display:flex;gap:8px;justify-content:flex-end;margin-top:18px;}
.auu_btn{display:inline-flex;align-items:center;gap:6px;padding:8px 14px;font-size:13px;font-weight:600;border-radius:8px;cursor:pointer;border:1px solid transparent;transition:background .15s,border-color .15s;}
.auu_btn_secondary{background:#f1f5f9;color:#334155;border-color:#e2e8f0;}
.auu_btn_secondary:hover{background:#e2e8f0;}
.auu_btn_primary{background:#2563eb;color:#fff;}
.auu_btn_primary:hover{background:#1d4ed8;}

/* Upload diretto: slot file inline */
.auu_files_grid{display:flex;flex-direction:column;gap:8px;margin:8px 0 4px;}
.auu_quote_input{display:flex;align-items:stretch;border:1px solid #cbd5e1;border-radius:8px;overflow:hidden;background:#fff;transition:border-color .15s,box-shadow .15s;}
.auu_quote_input:focus-within{border-color:#2563eb;box-shadow:0 0 0 3px rgba(37,99,235,.15);}
.auu_quote_prefix{display:flex;align-items:center;padding:0 12px;background:#f1f5f9;color:#0f172a;font-weight:700;font-size:13px;border-right:1px solid #cbd5e1;letter-spacing:.05em;}
.auu_quote_input input{flex:1;border:none;outline:none;padding:8px 10px;font-size:13px;font-family:inherit;letter-spacing:.04em;}
.auu_slot{background:#f8fafc;border:1px solid #e2e8f0;border-radius:10px;padding:10px;display:flex;flex-direction:column;gap:8px;}
.auu_slot_head{font-size:11px;font-weight:700;color:#334155;text-transform:uppercase;letter-spacing:.04em;display:flex;align-items:center;gap:6px;}
.auu_slot_head i{color:#2563eb;font-size:13px;}
.auu_slot_body{min-height:48px;display:flex;}
.auu_slot_pick{flex:1;display:flex;align-items:center;justify-content:center;gap:8px;background:#fff;border:1px dashed #cbd5e1;color:#64748b;border-radius:8px;padding:10px;font-size:12px;font-weight:600;cursor:pointer;transition:border-color .15s,background .15s,color .15s;}
.auu_slot_pick:hover{border-color:#2563eb;background:#eff6ff;color:#2563eb;}
.auu_slot_file{flex:1;display:flex;align-items:center;gap:8px;background:#fff;border:1px solid #e2e8f0;border-radius:8px;padding:6px 8px;min-width:0;}
.auu_slot_file > i{color:#ef4444;font-size:1.3rem;flex-shrink:0;}
.auu_slot_meta{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px;}
.auu_slot_name{font-size:11px;font-weight:600;color:#1e293b;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.auu_slot_sub{font-size:10px;color:#94a3b8;}
.auu_slot_btns{display:flex;gap:3px;flex-shrink:0;}
.auu_slot_change,.auu_slot_del{background:transparent;border:none;cursor:pointer;padding:4px 6px;border-radius:4px;font-size:11px;}
.auu_slot_change{color:#2563eb;}
.auu_slot_change:hover{background:#eff6ff;}
.auu_slot_del{color:#ef4444;}
.auu_slot_del:hover{background:#fef2f2;}
.auu_status{margin-top:12px;padding:9px 11px;border-radius:8px;font-size:12px;display:flex;align-items:center;gap:6px;}
.auu_status:not(.auu_status_err):not(.auu_status_ok){background:#eff6ff;color:#1d4ed8;border:1px solid #bfdbfe;}
.auu_status_ok{background:#ecfdf5;color:#047857;border:1px solid #6ee7b7;}
.auu_status_err{background:#fef2f2;color:#b91c1c;border:1px solid #fca5a5;}
.auu_btn_primary:disabled{background:#94a3b8 !important;cursor:not-allowed;}

/* === TAB ALLEGATI ORFANI === */
.attiv_count_orfani .atc_dot{background:#f59e0b;}
.header_row.orfani_card,
.body_row.orfani_card{display:grid;grid-template-columns:130px 150px 1fr 120px 120px auto;gap:8px;align-items:center;height:38px;min-height:38px;max-height:38px;padding:0 8px;font-size:12px;}
.header_row.orfani_card .th,
.body_row.orfani_card .td{flex:unset !important;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;}
.header_row.orfani_card .th_actions,
.body_row.orfani_card .th_actions{display:flex;align-items:center;justify-content:flex-end;gap:4px;overflow:visible;white-space:nowrap;}
.orfani_tipo_badge{display:inline-flex;align-items:center;gap:4px;background:#fef3c7;color:#92400e;border:1px solid #fde68a;border-radius:6px;padding:2px 8px;font-size:11px;font-weight:600;margin-right:4px;}
.orfani_tipo_badge i{color:#ef4444;font-size:11px;}
.orfani_btn{background:transparent;border:1px solid transparent;border-radius:6px;padding:5px 8px;cursor:pointer;font-size:13px;transition:background .15s,border-color .15s;margin-right:3px;}
.orfani_btn_view{color:#2563eb;}
.orfani_btn_view:hover{background:#eff6ff;border-color:#bfdbfe;}
.orfani_btn_link{color:#059669;}
.orfani_btn_link:hover{background:#ecfdf5;border-color:#6ee7b7;}
.orfani_btn_edit{color:#7c3aed;}
.orfani_btn_edit:hover{background:#f5f3ff;border-color:#ddd6fe;}
.orfani_btn_del{color:#ef4444;}
.orfani_btn_del:hover{background:#fef2f2;border-color:#fecaca;}
@media (max-width:1024px){
  .header_row.orfani_card,
  .body_row.orfani_card{grid-template-columns:1fr;gap:4px;}
  .header_row.orfani_card{display:none;}
  .body_row.orfani_card .td{padding:4px 0;}
  .body_row.orfani_card .td:before{content:attr(data-label);display:block;font-size:10px;color:#94a3b8;text-transform:uppercase;font-weight:700;}
}

/* === TAB FWA === */
.header_row.fwa_row,
.body_row.fwa_row{display:grid;grid-template-columns:96px 90px 100px 132px 1fr 56px 105px 44px 88px 110px 98px 82px 128px;gap:6px;align-items:center;height:38px;min-height:38px;max-height:38px;padding:0 8px;font-size:12px;}
.header_row.fwa_row .th,
.body_row.fwa_row .td{flex:unset !important;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;}
.header_row.fwa_row .td_right,
.body_row.fwa_row .td_right{display:flex;align-items:center;justify-content:flex-end;gap:4px;overflow:visible;}
@media (max-width:1024px){
  .header_row.fwa_row,
  .body_row.fwa_row{grid-template-columns:1fr;gap:4px;height:auto;min-height:0;max-height:none;padding:8px;}
  .header_row.fwa_row{display:none;}
  .body_row.fwa_row .td{padding:4px 0;}
  .body_row.fwa_row .td:before{content:attr(data-label);display:block;font-size:10px;color:#94a3b8;text-transform:uppercase;font-weight:700;}
}

/* --- FWA: header fisso, scorre solo il corpo della tabella --- */
.report_table_card.fwa_table_card{display:flex;flex-direction:column;max-height:calc(100vh - 250px);min-height:0;overflow:hidden;}
/* padding a 0: l'altezza la definisce .header_row, come per le righe del body */
.report_table_card.fwa_table_card .table_header{flex:0 0 auto;position:sticky;top:0;z-index:5;padding:0;min-height:0;height:auto;}
.report_table_card.fwa_table_card .header_row.fwa_row{width:100%;}
.report_table_card.fwa_table_card .table_body{flex:1 1 auto;min-height:0;overflow-y:auto;overflow-x:hidden;}

/* --- FWA: pulsanti azioni quadrati, icona centrata --- */
.body_row.fwa_row .td_right{gap:3px;}
.body_row.fwa_row .orfani_btn{display:inline-flex;align-items:center;justify-content:center;
  width:28px;height:28px;padding:0;margin-right:0;flex:0 0 auto;line-height:1;}
.body_row.fwa_row .orfani_btn i{display:block;font-size:13px;line-height:1;}

/* --- FWA: badge stato email in tabella --- */
.fwa_mail_badge{display:inline-flex;align-items:center;gap:5px;padding:2px 8px;border-radius:6px;font-size:11px;font-weight:600;white-space:nowrap;}
.fwa_mail_ok{background:#ecfdf5;color:#047857;border:1px solid #a7f3d0;}
.fwa_mail_ko{background:#fef2f2;color:#b91c1c;border:1px solid #fecaca;}
.fwa_mail_none{background:#f1f5f9;color:#94a3b8;border:1px solid #e2e8f0;}
.body_row.fwa_row.fwa_row_selected{background:#eff6ff;box-shadow:inset 3px 0 0 #2563eb;}

/* --- FWA: popup dettaglio a tre colonne --- */
.fwa_detail_overlay{position:fixed;inset:0;background:rgba(15,23,42,.55);z-index:1200;
  display:flex;align-items:center;justify-content:center;padding:24px;
  opacity:0;transition:opacity .18s ease;}
.fwa_detail_overlay.open{opacity:1;}
.fwa_dp_modal{width:min(1100px,96vw);max-height:88vh;background:#fff;border-radius:14px;
  border:1px solid #e2e8f0;box-shadow:0 20px 60px rgba(15,23,42,.3);overflow:hidden;
  display:flex;flex-direction:column;transform:translateY(8px) scale(.99);transition:transform .18s ease;}
.fwa_detail_overlay.open .fwa_dp_modal{transform:translateY(0) scale(1);}
/* Tre colonne affiancate */
.fwa_dp_cols{display:grid;grid-template-columns:repeat(3,1fr);gap:0;align-items:start;}
.fwa_dp_col{padding:16px 18px;border-right:1px solid #e2e8f0;min-width:0;}
.fwa_dp_col:last-child{border-right:none;}
.fwa_dp_col .fwa_dp_sec_title{margin-bottom:8px;}
.fwa_dp_col .fwa_dp_row{padding:6px 0;}
.fwa_dp_col .fwa_dp_lbl{flex:0 0 38%;}
.fwa_col_flash{animation:fwaColFlash 1.2s ease;}
@keyframes fwaColFlash{0%,100%{background:transparent;}25%,60%{background:#eff6ff;}}
.fwa_dp_head{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:15px 18px;
  background:#0f172a;color:#fff;font-weight:700;font-size:14px;letter-spacing:.03em;flex:0 0 auto;}
.fwa_dp_close{background:transparent;border:none;color:#fff;cursor:pointer;padding:4px;border-radius:6px;opacity:.75;}
.fwa_dp_close:hover{opacity:1;background:rgba(255,255,255,.12);}
.fwa_dp_body{flex:1 1 auto;overflow-y:auto;padding:0;}
.fwa_dp_sec{margin-bottom:24px;}
.fwa_dp_sec:last-child{margin-bottom:8px;}
.fwa_dp_sec_title{display:flex;align-items:center;justify-content:space-between;gap:8px;font-size:11px;font-weight:800;
  color:#475569;text-transform:uppercase;letter-spacing:.06em;padding-bottom:7px;margin-bottom:10px;border-bottom:1px solid #e2e8f0;}
.fwa_dp_sec_title i{color:#2563eb;margin-right:6px;}
.fwa_dp_count{background:#e2e8f0;color:#475569;border-radius:20px;padding:1px 8px;font-size:11px;}
.fwa_dp_edit{display:inline-flex;align-items:center;gap:5px;background:#eff6ff;color:#1d4ed8;
  border:1px solid #bfdbfe;border-radius:6px;padding:3px 9px;font-size:10.5px;font-weight:700;
  font-family:inherit;cursor:pointer;text-transform:none;letter-spacing:0;transition:background .15s;}
.fwa_dp_edit:hover{background:#dbeafe;}
.fwa_dp_row{display:flex;gap:10px;padding:7px 0;border-bottom:1px solid #f1f5f9;font-size:13px;}
.fwa_dp_row:last-child{border-bottom:none;}
.fwa_dp_lbl{flex:0 0 42%;color:#94a3b8;font-size:11px;text-transform:uppercase;letter-spacing:.05em;font-weight:700;padding-top:1px;}
.fwa_dp_val{flex:1 1 auto;min-width:0;color:#1e293b;font-weight:600;word-break:break-word;}
.fwa_dp_empty{padding:16px;text-align:center;color:#94a3b8;font-size:13px;background:#f8fafc;border:1px dashed #cbd5e1;border-radius:8px;}
.fwa_dp_warn{display:flex;gap:10px;padding:12px 14px;background:#fffbeb;border:1px solid #fde68a;border-radius:8px;font-size:12.5px;color:#92400e;line-height:1.5;}
.fwa_dp_warn i{color:#f59e0b;margin-top:2px;}
.fwa_dp_warn strong{display:block;margin-bottom:2px;}
.fwa_dp_resend{display:flex;align-items:center;justify-content:center;gap:7px;width:100%;margin-bottom:12px;
  padding:9px 14px;background:#2563eb;color:#fff;border:none;border-radius:8px;font-size:13px;font-weight:600;
  font-family:inherit;cursor:pointer;transition:background .15s;}
.fwa_dp_resend:hover{background:#1d4ed8;}
.fwa_dp_resend:disabled{background:#93c5fd;cursor:not-allowed;}
/* Storico invii */
.fwa_inv_list{display:flex;flex-direction:column;gap:8px;}
.fwa_inv_item{display:flex;gap:10px;padding:10px 12px;border-radius:8px;border:1px solid #e2e8f0;background:#f8fafc;}
.fwa_inv_ok{border-color:#a7f3d0;background:#f0fdf4;}
.fwa_inv_ko{border-color:#fecaca;background:#fef2f2;}
.fwa_inv_ico{flex:0 0 auto;font-size:15px;padding-top:1px;}
.fwa_inv_ok .fwa_inv_ico{color:#059669;}
.fwa_inv_ko .fwa_inv_ico{color:#dc2626;}
.fwa_inv_main{flex:1 1 auto;min-width:0;}
.fwa_inv_top{display:flex;align-items:center;gap:8px;font-size:13px;color:#0f172a;margin-bottom:3px;}
.fwa_inv_tag{background:#e2e8f0;color:#475569;border-radius:5px;padding:1px 7px;font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;}
.fwa_inv_sub{font-size:11.5px;color:#64748b;line-height:1.5;word-break:break-word;}
.fwa_inv_err{margin-top:5px;padding:5px 8px;background:#fff;border:1px solid #fecaca;border-radius:6px;font-size:11px;color:#b91c1c;word-break:break-word;}
/* Sotto i 1000px le tre colonne si impilano (il popup diventa scrollabile) */
@media (max-width:1000px){
  .fwa_dp_cols{grid-template-columns:1fr;}
  .fwa_dp_col{border-right:none;border-bottom:1px solid #e2e8f0;}
  .fwa_dp_col:last-child{border-bottom:none;}
}
@media (max-width:640px){
  .fwa_detail_overlay{padding:10px;}
  .fwa_dp_modal{max-height:94vh;}
}

/* ===== Contabilità → Tariffe / mese ===== */
.tm_layout {
    display: grid;
    grid-template-columns: 280px 1fr;
    gap: 15px;
    height: calc(100vh - 175px);
    width: 100%;
    box-sizing: border-box;
    overflow: hidden;
}

/* Colonna sinistra: elenco tariffe */
.tm_left, .tm_right {
    background: #fff;
    border: 1px solid var(--color-border-light);
    border-radius: 8px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.05);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    min-height: 0;
}
.tm_left_header, .tm_right_header {
    flex: 0 0 auto;
    font-weight: 700; text-transform: uppercase;
    color: var(--color-text-muted);
    font-size: 12px; letter-spacing: 0.04em;
    padding: 14px 15px 10px 15px;
    border-bottom: 1px solid var(--color-border-light);
}
.tm_right_header { text-transform: none; color: #0f172a; font-size: 14px; }
.tm_left_list { flex: 1 1 auto; overflow-y: auto; min-height: 0; padding: 6px; }
.tm_left_item {
    padding: 9px 11px; border-radius: 7px; cursor: pointer;
    font-size: 12.5px; font-weight: 600; color: #1e293b;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    margin-bottom: 2px;
}
.tm_left_item:hover { background: #eef4ff; }
.tm_left_item.active { background: #1d4ed8; color: #fff; }

/* Colonna destra: griglia mesi */
.tm_grid_wrap { flex: 1 1 auto; overflow: auto; min-height: 0; padding: 12px 15px; }
.tm_grid {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(120px, 1fr);
    gap: 10px;
    min-width: min-content;
}
.tm_month_col {
    border: 1px solid #eef2f6; border-radius: 8px;
    overflow: hidden; display: flex; flex-direction: column;
}
.tm_month_head {
    background: #f8fafc; padding: 8px 10px;
    font-size: 11.5px; font-weight: 700; color: #64748b;
    text-transform: uppercase; letter-spacing: 0.03em;
    text-align: center; border-bottom: 1px solid #eef2f6;
}
.tm_month_body { padding: 8px; display: flex; flex-direction: column; gap: 6px; }
.tm_imp_row {
    display: flex; align-items: baseline; justify-content: space-between;
    gap: 8px; padding: 5px 8px;
    background: #f0fdf4; border-radius: 6px;
}
.tm_imp_val { font-weight: 700; font-size: 13px; color: #15803d; }
.tm_imp_n { font-size: 11px; font-weight: 600; color: #94a3b8; }
.tm_imp_empty { text-align: center; color: #cbd5e1; font-size: 13px; padding: 6px 0; }


/* =========================================================================
   GARA SET-DIC — pannello stato produzione settembre/dicembre
   ========================================================================= */

.dash_source_selector.src-garasetdic { background: #4f46e5; }
.dash_source_selector.src-garasetdic .dash_src_btn.active { color: #4f46e5; }
.dash_src_btn_gara { font-weight: 700; }

.gara_loading,
.gara_empty,
.gara_error {
    padding: 40px 20px;
    text-align: center;
    font-size: 0.95rem;
    color: #64748b;
}
.gara_error { color: #b91c1c; }

/* ---- testata ---- */
.gara_head {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 14px;
    margin-bottom: 18px;
}

.gara_title {
    margin: 0;
    font-size: 1.35rem;
    font-weight: 800;
    color: #0f172a;
}

.gara_sub {
    font-size: 0.82rem;
    color: #64748b;
    margin-top: 3px;
}

.gara_switch {
    display: flex;
    gap: 4px;
    background: #f1f5f9;
    padding: 4px;
    border-radius: 12px;
}

.gara_sw_btn {
    border: none;
    background: transparent;
    padding: 7px 14px;
    border-radius: 9px;
    font-family: inherit;
    font-size: 0.82rem;
    font-weight: 700;
    color: #64748b;
    cursor: pointer;
    transition: background-color .18s, color .18s;
}

.gara_sw_btn:hover { color: #0f172a; }

.gara_sw_btn.active {
    background: #fff;
    color: #4f46e5;
    box-shadow: 0 1px 4px rgba(15, 23, 42, .12);
}

/* ---- strip KPI ---- */
.gara_kpi_row {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 14px;
    margin-bottom: 18px;
}

.gara_kpi {
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 14px;
    padding: 14px 16px;
}

.gara_kpi_label {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: #94a3b8;
}

.gara_kpi_val {
    font-size: 1.7rem;
    font-weight: 800;
    color: #0f172a;
    line-height: 1.15;
    margin: 2px 0 8px;
}

.gara_kpi_target {
    font-size: 0.95rem;
    font-weight: 600;
    color: #94a3b8;
}

.gara_kpi_sub {
    font-size: 0.74rem;
    color: #64748b;
    margin-top: 7px;
}

/* ---- barra di avanzamento ---- */
.gara_bar {
    position: relative;
    height: 8px;
    border-radius: 5px;
    background: #eef1f5;
    overflow: visible;
}

.gara_bar_fill {
    display: block;
    height: 100%;
    border-radius: 5px;
    transition: width .4s ease;
}

.gara_bar_fill.is-low  { background: #f59e0b; }
.gara_bar_fill.is-mid  { background: #3b82f6; }
.gara_bar_fill.is-done { background: #10b981; }

/* trattino verticale: proiezione a fine periodo */
.gara_bar_proj {
    position: absolute;
    top: -3px;
    width: 2px;
    height: 14px;
    background: #0f172a;
    border-radius: 1px;
    transform: translateX(-1px);
}

/* ---- tabella ---- */
.gara_table_card {
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 14px;
    overflow-x: auto;
}

.gara_table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.84rem;
}

.gara_table thead th {
    position: sticky;
    top: 0;
    background: #f8fafc;
    padding: 11px 10px;
    text-align: center;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: #64748b;
    border-bottom: 1px solid #e2e8f0;
    white-space: nowrap;
}

.gara_th_nome { text-align: left !important; min-width: 170px; }
.gara_th_prog { text-align: left !important; min-width: 200px; }
.gara_th_mese.is-current { color: #4f46e5; }

.gara_table tbody tr { border-bottom: 1px solid #f1f5f9; }
.gara_table tbody tr:last-child { border-bottom: none; }
.gara_table tbody tr:hover { background: #fafbfc; }

.gara_table td {
    padding: 10px;
    vertical-align: middle;
}

.gara_td_nome { min-width: 170px; }

.gara_op_nome {
    font-weight: 700;
    color: #0f172a;
    line-height: 1.25;
}

.gara_op_store {
    font-size: 0.7rem;
    color: #94a3b8;
    margin-top: 1px;
}

.gara_td_prog { min-width: 200px; }

.gara_prog_top {
    font-size: 0.8rem;
    color: #475569;
    margin-bottom: 5px;
    display: flex;
    align-items: baseline;
    gap: 6px;
}

.gara_prog_top strong { color: #0f172a; font-size: 0.95rem; }

.gara_pct {
    margin-left: auto;
    font-size: 0.72rem;
    font-weight: 700;
    color: #94a3b8;
}

.gara_td_mese {
    text-align: center;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

.gara_mese_val { font-weight: 700; color: #0f172a; }
.gara_mese_tgt { font-size: 0.72rem; color: #cbd5e1; }
.gara_td_mese.is-done .gara_mese_val { color: #059669; }

.gara_td_num {
    text-align: center;
    font-weight: 700;
    color: #0f172a;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.gara_dim {
    font-size: 0.72rem;
    font-weight: 500;
    color: #cbd5e1;
}

.gara_td_proj.is-ok   { color: #059669; }
.gara_td_proj.is-warn { color: #d97706; }
.gara_td_rim          { color: #64748b; }

.gara_note {
    margin-top: 12px;
    font-size: 0.74rem;
    line-height: 1.5;
    color: #94a3b8;
}

/* ---- responsive ---- */
@media (max-width: 1100px) {
    .gara_kpi_row { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 640px) {
    .gara_kpi_row { grid-template-columns: 1fr; }
    .gara_head { flex-direction: column; align-items: stretch; }
    .gara_switch { overflow-x: auto; }
    .gara_table { font-size: 0.78rem; }
}

/* avviso in testata quando la gara non ha dati da mostrare */
.gara_avviso {
    background: #eef2ff;
    border: 1px solid #c7d2fe;
    color: #4338ca;
    border-radius: 10px;
    padding: 10px 14px;
    font-size: 0.82rem;
    line-height: 1.45;
    margin-bottom: 16px;
}

.gara_tr_empty td {
    text-align: center;
    padding: 28px 12px !important;
    color: #94a3b8;
    font-size: 0.84rem;
}

/* =======================================================================
   LOGO IN BARRA
   Il segno e' inline (non un <img>): eredita il colore col currentColor, si
   ridisegna nitido a ogni zoom e non costa una richiesta in piu'.
   ======================================================================= */
/* Il padding sinistro sta qui e non su .main_header, che ha 'padding: 10px 0'
   e serve tutta la barra: allargandolo si sarebbe spostato anche il blocco
   di destra. Prima il primo elemento era .header_left, nascosto su desktop,
   quindi nulla arrivava mai a toccare il bordo della finestra. */
.app_logo {
    display: flex;
    align-items: center;
    gap: 9px;
    padding-left: 20px;
    padding-right: 16px;
    margin-right: 2px;
    border-right: 1px solid #e2e8f0;
    color: #0f172a;
    user-select: none;
}
.app_logo_segno { flex: 0 0 auto; }
.app_logo_txt {
    font-size: .95rem;
    font-weight: 800;
    letter-spacing: -.02em;
    color: #0f172a;
    white-space: nowrap;
}
/* Sotto una certa larghezza resta il solo segno: il nome dell'app e' gia'
   nella scheda del browser, e in barra lo spazio serve alle sezioni. */
@media (max-width: 980px) {
    .app_logo_txt { display: none; }
    /* Resta il solo furgone: 20px di stacco dal bordo sarebbero troppi per
       un'icona sola, ma sotto i 14 tornerebbe ad apparire incollata. */
    .app_logo { padding-left: 14px; padding-right: 10px; }
}