/* ========================================
   FIX CARDS E DATATABLES - BOOTSTRAP 5
   ======================================== */

/* Card con icona e titolo (es. Impersonifica Utenti) */
.card {
    display: inline-block;
    position: relative;
    width: 100%;
    margin: 25px 0;
    box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.14);
    border-radius: 6px;
    color: rgba(0, 0, 0, 0.87);
    background: #fff;
}

    .card .card-header {
        padding: 15px;
        margin: -20px 15px 0;
        border-radius: 3px;
        background: #007BC0;
        box-shadow: 0 4px 20px 0px rgba(0, 0, 0, 0.14), 0 7px 10px -5px rgba(0, 123, 192, 0.4);
        color: #ffffff;
        align-items: center;
        justify-content: center;
        height: 70px;
        min-width: 70px;
        min-height: 70px;
        display: inline-flex;
    }

.card-header-tabs {
    display: flex !important;
    background-color: transparent;
    border: 0 !important;
    text-align: left !important;
    justify-content: start !important;
}

    .card-header-tabs > a {
        color: #FFFFFF !important;
        font-weight: 500;
        border-radius: 3px;
        line-height: 24px;
        text-transform: uppercase;
        font-size: 12px;
    }

.card-header-page {
    height: 50px !important;
    min-height: 50px !important;
    font-size: 14px !important;
}

.card .card-header img.menu-icon {
    width: 40px;
    height: 40px;
    margin: 0;
    object-fit: contain;
}

.card .card-header.card-header-icon {
    float: left;
}

.card .card-header.bg-primary {
    background: linear-gradient(60deg, #007BC0, #005A8C) !important;
    box-shadow: 0 4px 20px 0px rgba(0, 0, 0, 0.14), 0 7px 10px -5px rgba(0, 123, 192, 0.4) !important;
}

.card .card-header-info {
    background: linear-gradient(60deg, #26c6da, #00acc1);
    box-shadow: 0 4px 20px 0px rgba(0, 0, 0, 0.14), 0 7px 10px -5px rgba(0, 188, 212, 0.4);
}

.card .card-content {
    padding: 15px 30px;
    position: relative;
    padding-top: 15px;
}

.card .card-body {
    padding: 15px 30px;
}

.card .card-title:not(.card-calendar, .card-title) {
    margin-top: 0;
    margin-bottom: 5px;
    font-size: 18px;
    font-weight: 400;
    line-height: 1.4em;
    min-height: 40px;
}

.card .card-title {
    margin-top: 0;
    margin-bottom: 3px;
}

.marginzero {
    margin: 0 !important;
}

/* Row contenitore */
.row {
    margin-right: -15px;
    margin-left: -15px;
}

/* Material datatables container */
.material-datatables {
    clear: both;
    padding-top: 10px;
}

/* Pulsanti */
.btn {
    position: relative;
    padding: 12px 30px;
    margin: 10px 1px;
    font-size: 12px;
    font-weight: 400;
    line-height: 1.42857143;
    text-decoration: none;
    text-transform: uppercase;
    letter-spacing: 0;
    border: 0;
    border-radius: 3px;
    outline: 0;
    transition: box-shadow 0.2s cubic-bezier(0.4, 0, 1, 1), background-color 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    will-change: box-shadow, transform;
    cursor: pointer;
}

    .btn:hover {
        box-shadow: 0 14px 26px -12px rgba(0, 0, 0, 0.42), 0 4px 23px 0px rgba(0, 0, 0, 0.12), 0 8px 10px -5px rgba(0, 0, 0, 0.2);
    }

.btn-success {
    color: #fff;
    background-color: #4caf50;
    box-shadow: 0 2px 2px 0 rgba(76, 175, 80, 0.14), 0 3px 1px -2px rgba(76, 175, 80, 0.2), 0 1px 5px 0 rgba(76, 175, 80, 0.12);
}

    .btn-success:hover {
        background-color: #449d48;
        box-shadow: 0 14px 26px -12px rgba(76, 175, 80, 0.42), 0 4px 23px 0px rgba(0, 0, 0, 0.12), 0 8px 10px -5px rgba(76, 175, 80, 0.2);
    }

.btn-info {
    color: #fff;
    background-color: #00acc1;
    box-shadow: 0 2px 2px 0 rgba(0, 172, 193, 0.14), 0 3px 1px -2px rgba(0, 172, 193, 0.2), 0 1px 5px 0 rgba(0, 172, 193, 0.12);
}

    .btn-info:hover {
        background-color: #00838f;
        box-shadow: 0 14px 26px -12px rgba(0, 172, 193, 0.42), 0 4px 23px 0px rgba(0, 0, 0, 0.12), 0 8px 10px -5px rgba(0, 172, 193, 0.2);
    }

.btn i {
    font-size: 17px;
}

/* ========================================
   DATATABLES - STILE TABELLA
   ======================================== */

.table {
    max-width: 100% !important;
    margin-bottom: 1rem !important;
    background-color: transparent !important;
    border-collapse: collapse !important;
}

    .table thead th {
        padding: 15px 10px !important;
        border-bottom: 1px solid #ddd !important;
        font-size: 17px !important;
        font-weight: 300 !important;
        background-color: transparent !important;
        vertical-align: middle !important;
        text-align: left !important;
    }

    .table tbody td {
        padding: 15px 10px !important;
        border-bottom: 1px solid #ddd !important;
        font-size: 0.9375rem !important;
        font-weight: 300 !important;
        vertical-align: middle !important;
        line-height: 1.5 !important;
    }

.table-striped tbody tr:nth-of-type(odd) {
    background-color: rgba(0, 0, 0, 0.02) !important;
}

.table-bordered {
    border: 1px solid #ddd !important;
}

    .table-bordered th,
    .table-bordered td {
        border: 1px solid #ddd !important;
    }

.table-hover tbody tr:hover {
    background-color: rgba(0, 0, 0, 0.04) !important;
}

.dt-scroll-body table tbody td {
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}

/* Celle testo troncato */
table.dataTable thead th,
table.dataTable tbody td {
    box-sizing: border-box !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    /*white-space: nowrap;*/ /* Impedisce al testo di andare a capo e allargare la cella */
    min-width: 0 !important; /* Rimuove ogni limite minimo di sistema */
}

    /* Colonne azioni — non troncare */
    table.dataTable tbody td.nowrap {
        max-width: none !important;
        overflow: visible !important;
    }

/* ========================================
   DATATABLES - LAYOUT SCROLL
   ======================================== */

.dt-scroll,
.dt-search {
    position: relative;
    z-index: 1;
}

.dt-scroll {
    max-width: 100% !important;
}

.dt-scroll-head table,
.dt-scroll-body table {
    width: 100% !important;
}

.dt-scroll-body {
    height: calc(56vh - 10px) !important;
    max-height: none !important;
    box-sizing: border-box;
    overflow-x: auto !important;
    -ms-overflow-style: auto !important;
    scrollbar-width: auto !important;
    overflow-y: auto !important;
}
.dt-scroll-body::-webkit-scrollbar {
    height: 6px !important;
    width: 6px !important;
}

.dt-scroll-body::-webkit-scrollbar-thumb {
    background: #ccc;
    border-radius: 3px;
}

.dt-scroll-body::-webkit-scrollbar-thumb:hover {
    background: #999;
}

.dt-scroll-body::-webkit-scrollbar-track {
    background: transparent;
}

.dataTables_wrapper .dataTables_scrollBody {
    overflow-y: auto !important;
    min-height: 500px !important;
}

/* ========================================
   DATATABLES - SEARCH BOX E CONTROLS
   ======================================== */

.dataTables_wrapper .dataTables_filter {
    float: right !important;
    text-align: right !important;
}

    .dataTables_wrapper .dataTables_filter label {
        font-weight: 300 !important;
        color: #999 !important;
        font-size: 12px !important;
    }

    .dataTables_wrapper .dataTables_filter input {
        border: 0 !important;
        border-bottom: 1px solid #D2D2D2 !important;
        border-radius: 0 !important;
        padding: 7px 0 !important;
        margin-left: 10px !important;
        background-color: transparent !important;
        font-size: 14px !important;
        outline: none !important;
        box-shadow: none !important;
        width: 200px !important;
    }

/* DT v2 - dt-search */
.dataTables_wrapper .dt-search {
    float: right !important;
    text-align: right !important;
    position: relative !important;
    display: inline-block !important;
}

    .dataTables_wrapper .dt-search label {
        font-weight: 300 !important;
        color: #999 !important;
        font-size: 12px !important;
        display: inline-block !important;
        margin-left: 10px !important;
        position: absolute !important;
        right: 5px !important;
        top: 50% !important;
        transform: translateY(-50%) !important;
        pointer-events: none !important;
    }

    .dataTables_wrapper .dt-search input {
        border: 0 !important;
        border-bottom: 1px solid #D2D2D2 !important;
        border-radius: 0 !important;
        padding: 10px 35px 10px 5px !important;
        background-color: transparent !important;
        background-image: none !important;
        font-size: 14px !important;
        outline: none !important;
        box-shadow: none !important;
        width: 350px !important;
        display: inline-block !important;
        height: auto !important;
        line-height: 1.42857143 !important;
    }

        .dataTables_wrapper .dt-search input:focus {
            border: 0 !important;
            box-shadow: none !important;
            outline: none !important;
        }

.dt-search input {
    padding-right: 35px !important;
    padding-left: 10px !important;
}

.dt-search label {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    margin: 0;
    pointer-events: none;
    color: #6c757d;
}

/* DT v1 - dataTables_length */
.dataTables_wrapper .dataTables_length {
    float: left !important;
}

    .dataTables_wrapper .dataTables_length label {
        font-weight: 400 !important;
        color: #999 !important;
        font-size: 12px !important;
    }

    .dataTables_wrapper .dataTables_length select {
        border: 0 !important;
        border-bottom: 1px solid #D2D2D2 !important;
        border-radius: 0 !important;
        padding: 7px 0 !important;
        margin: 0 10px !important;
        background-color: transparent !important;
        font-size: 14px !important;
        outline: none !important;
    }

/* DT v2 - dt-length */
.dataTables_wrapper .dt-length {
    float: left !important;
}

    .dataTables_wrapper .dt-length label {
        font-weight: 400 !important;
        color: #999 !important;
        font-size: 12px !important;
        display: inline-block !important;
    }

    .dataTables_wrapper .dt-length select {
        border: 0 !important;
        border-bottom: 1px solid #D2D2D2 !important;
        border-radius: 0 !important;
        padding: 7px 0 !important;
        margin: 0 10px !important;
        background-color: transparent !important;
        font-size: 14px !important;
        outline: none !important;
    }

/* Input ricerca per colonna */
.dataTables_wrapper input[type="search"],
.dataTables_wrapper thead input[type="search"],
.dataTables_wrapper thead input.form-control,
table thead input[type="search"],
table thead input.form-control {
    border: 1px solid #D2D2D2 !important;
    border-radius: 4px !important;
    padding: 7px 10px !important;
    background-color: #fff !important;
    font-size: 14px !important;
    width: 100% !important;
}

input.search-field,
.search-field,
thead input.search-field,
table thead input.search-field {
    border: 1px solid #D2D2D2 !important;
    border-radius: 4px !important;
    padding: 7px 10px !important;
    background-color: #fff !important;
    font-size: 14px !important;
    width: 100% !important;
}

/* ========================================
   DATATABLES - BUTTONS
   ======================================== */

.dt-buttons {
    margin-bottom: 15px;
    float: left;
    background: transparent !important;
    padding: 0 !important;
    border: 0 !important;
    position: relative;
    z-index: 100 !important;
}

.dt-button {
    border: 0 !important;
    background: transparent !important;
    padding: 0 !important;
    margin: 0 !important;
    box-shadow: none !important;
}

    .dt-button:hover,
    .dt-button:focus,
    .dt-button:active {
        background: transparent !important;
        box-shadow: none !important;
        border: 0 !important;
        outline: none !important;
    }

.btnHeaderDT {
    display: inline-flex !important;
    align-items: center;
    padding: 12px 30px !important;
    margin: 10px 5px !important;
    font-size: 12px;
    font-weight: 400;
    line-height: 1.42857143;
    text-decoration: none !important;
    text-transform: uppercase;
    letter-spacing: 0;
    border: 0 !important;
    border-radius: 3px;
    cursor: pointer;
    transition: box-shadow 0.2s cubic-bezier(0.4, 0, 1, 1), background-color 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    white-space: nowrap;
}

    .btnHeaderDT.excel {
        color: #fff !important;
        background-color: #00884a !important;
        background-image: none !important;
        box-shadow: 0 2px 2px 0 rgba(102, 187, 106, 0.14), 0 3px 1px -2px rgba(102, 187, 106, 0.2), 0 1px 5px 0 rgba(102, 187, 106, 0.12) !important;
    }

        .btnHeaderDT.excel:hover {
            background-color: #00884a !important;
            background-image: none !important;
            box-shadow: 0 14px 26px -12px rgba(102, 187, 106, 0.42), 0 4px 23px 0px rgba(0, 0, 0, 0.12), 0 8px 10px -5px rgba(102, 187, 106, 0.2) !important;
        }

    .btnHeaderDT i.fa {
        margin-right: 8px !important;
        font-size: 17px !important;
    }

.file-excel-icon {
    color: #fff !important;
}

.dt-button .btnHeaderDT {
    margin: 0 !important;
}

.dt-buttons.btn-group,
.dt-buttons .btn-group {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
}

.dt-buttons .btn {
    position: relative;
    z-index: 999999999 !important;
}

/* ========================================
   DATATABLES - INFO E PAGING
   ======================================== */

.dataTables_wrapper .dataTables_info,
.dataTables_wrapper .dt-info {
    padding-top: 8px !important;
    font-size: 12px !important;
    color: #999 !important;
    font-weight: 300 !important;
}

.dataTables_wrapper .dataTables_paginate,
.dataTables_wrapper .dt-paging {
    padding-top: 8px !important;
    float: right !important;
}

    .dataTables_wrapper .dataTables_paginate .paginate_button,
    .dataTables_wrapper .dt-paging .dt-paging-button {
        padding: 4px 10px !important;
        margin: 0 2px !important;
        border: 0 !important;
        border-radius: 3px !important;
        background-color: transparent !important;
        color: #999 !important;
        cursor: pointer !important;
        font-size: 12px !important;
        font-weight: 400 !important;
        text-decoration: none !important;
        display: inline-block !important;
    }

        .dataTables_wrapper .dataTables_paginate .paginate_button:hover,
        .dataTables_wrapper .dt-paging .dt-paging-button:hover {
            background-color: rgba(153, 153, 153, 0.2) !important;
            color: #3C4858 !important;
        }

        .dataTables_wrapper .dataTables_paginate .paginate_button.current,
        .dataTables_wrapper .dt-paging .dt-paging-button.current {
            background-color: transparent !important;
            color: #9c27b0 !important;
            font-weight: 500 !important;
        }

        .dataTables_wrapper .dataTables_paginate .paginate_button.disabled,
        .dataTables_wrapper .dt-paging .dt-paging-button.disabled {
            color: #ddd !important;
            cursor: default !important;
        }

            .dataTables_wrapper .dataTables_paginate .paginate_button.disabled:hover,
            .dataTables_wrapper .dt-paging .dt-paging-button.disabled:hover {
                background-color: transparent !important;
                color: #ddd !important;
            }

/* ========================================
   DATATABLES - CLESSIDRA (dt-loading-icon)
   ======================================== */

[id$="_processing"] {
    display: none !important;
}

.dt-loading-icon {
    display: none;
    width: 25px;
    text-align: center;
    vertical-align: middle;
}

    .dt-loading-icon .hourglass {
        font-size: 22px;
        vertical-align: middle;
        color: black;
    }

div.dt-info-wrapper {
    display: inline-flex !important;
    align-items: center;
    gap: 6px;
    width: auto !important;
}

    div.dt-info-wrapper .dt-info {
        display: inline !important;
        width: auto !important;
        flex: none;
    }

.dt-container > div:has(> .dt-info) {
    display: flex !important;
    align-items: center;
    gap: 6px;
}

/* ========================================
   DATATABLES - PROCESSING
   ======================================== */

.dt-processing {
    z-index: 99999999 !important;
}

/*========================================
DATATABLES - RESPONSIVE (dtr-inline)
========================================*/

table.dataTable.dtr-inline.collapsed > tbody > tr > td.dtr-control,
table.dataTable.dtr-inline.collapsed > tbody > tr > th.dtr-control {
    position: relative;
    cursor: pointer;
    padding-left: 45px !important; 
    vertical-align: middle !important;
}

    /* Assicura che il testo all'interno della cella dtr-control 
   rispetti il padding e non collida con il pulsante */
    table.dataTable.dtr-inline.collapsed > tbody > tr > td.dtr-control::after {
        content: "";
        display: inline-block;
        width: 0;
    }

    table.dataTable.dtr-inline.collapsed > tbody > tr > td.dtr-control:before,
    table.dataTable.dtr-inline.collapsed > tbody > tr > th.dtr-control:before {
        width: 20px !important;
        height: 20px !important;
        min-width: 20px !important;
        min-height: 20px !important;
        border-radius: 50% !important;
        top: 50% !important;
        left: 10px !important;
        margin-top: -10px !important;
        position: absolute;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        box-sizing: border-box !important;
        padding: 0 !important;
        text-indent: 0 !important;
        background-color: #007bff !important;
        color: white !important;
        border: 2px solid white !important;
        box-shadow: 0 1px 3px rgba(0,0,0,0.3);
        font-family: 'Courier New', Courier, monospace !important;
        font-size: 16px !important;
        font-weight: bold !important;
        content: '+' !important;
    }

table.dataTable.dtr-inline.collapsed > tbody > tr.parent > td.dtr-control:before,
table.dataTable.dtr-inline.collapsed > tbody > tr.parent > th.dtr-control:before,
table.dataTable.dtr-inline.collapsed > tbody > tr.dt-hasChild > td.dtr-control:before,
table.dataTable.dtr-inline.collapsed > tbody > tr.dt-hasChild > th.dtr-control:before {
    content: '-' !important;
    background-color: #d33333 !important;
}

table.dataTable.dtr-inline.collapsed > tbody > tr > td.dtr-control:before {
    box-sizing: content-box !important;
}

table.dataTable > tbody > tr.child ul.dtr-details {
    display: block !important;
    list-style: none !important;
    padding: 10px !important;
    margin: 0 !important;
}

    table.dataTable > tbody > tr.child ul.dtr-details > li {
        padding: 5px 0 !important;
        border-bottom: 1px solid #eee !important;
    }

table.dataTable > tbody > tr.child span.dtr-title {
    font-weight: bold !important;
    color: #3C4858 !important;
    display: inline-block !important;
    min-width: 120px !important;
}

table.dataTable > tbody > tr.child span.dtr-data {
    color: #666 !important;
}

 ========================================
   DATATABLES - AZIONI E UTILITIES
   ======================================== 

.td-actions {
    text-align: right;
    white-space: nowrap;
}

    .td-actions .btn {
        padding: 8px;
        margin: 2px;
        min-width: auto;
    }

        .td-actions .btn i {
            font-size: 20px;
        }

.text-end {
    text-align: right;
}

.nowrap {
    white-space: nowrap;
}

.dt-select-checkbox {
    transform: scale(1.3) !important;
    cursor: pointer !important;
    margin: 0 auto !important;
    display: block !important;
}

td.dt-select {
    vertical-align: middle !important;
    text-align: center !important;
}

.btn.processing::after {
    display: none !important;
}

.placeholder {
    background-color: unset !important;
}

/* ========================================
   INPUT - STILE MATERIAL DESIGN
   ======================================== */

input[type="text"],
input[type="password"],
input[type="email"],
input[type="number"],
input[type="tel"],
input[type="url"],
input[type="date"],
input[type="datetime-local"],
input[type="month"],
input[type="time"],
input[type="week"],
select {
    border: 0 !important;
    border-bottom: 1px solid #D2D2D2 !important;
    border-radius: 0 !important;
    background-color: transparent !important;
    padding: 7px 0 !important;
    outline: none !important;
    box-shadow: none !important;
}

    input[type="text"]:focus,
    input[type="password"]:focus,
    input[type="email"]:focus,
    input[type="number"]:focus,
    input[type="tel"]:focus,
    input[type="url"]:focus,
    input[type="date"]:focus,
    input[type="datetime-local"]:focus,
    input[type="month"]:focus,
    input[type="time"]:focus,
    input[type="week"]:focus,
    textarea:focus,
    select:focus {
        box-shadow: none !important;
    }

    .form-control,
    .form-control-sm,
    input.form-control,
    input.form-control-sm,
    select.form-control,
    select.form-control-sm {
        border: 0 !important;
        border-radius: 0 !important;
        background-color: transparent !important;
        padding: 7px 0 !important;
        outline: none !important;
        box-shadow: none !important;
        height: auto !important;
        line-height: normal !important;
    }

textarea.form-control {
    border: 0 !important;
    border-radius: 0 !important;
    background-color: transparent !important;
    padding: 7px 0 !important;
    outline: none !important;
    box-shadow: none !important;
    height: auto !important;
    line-height: normal !important;
}

    .form-control:focus,
    .form-control-sm:focus,
    input.form-control:focus,
    input.form-control-sm:focus,
    select.form-control:focus,
    select.form-control-sm:focus,
    textarea.form-control:focus {
        border: 0 !important;
        box-shadow: none !important;
        background-color: transparent !important;
    }

/* ========================================
   RESPONSIVE MEDIA QUERY
   ======================================== */

@media (max-width: 768px) {
    /* Solo tabelle statiche NON gestite da DataTables */
    .table:not(.dataTable) thead {
        display: none;
    }

    .table:not(.dataTable) tbody td {
        display: block;
        text-align: right;
        padding-left: 50%;
        position: relative;
    }

        .table:not(.dataTable) tbody td:before {
            content: attr(data-label);
            position: absolute;
            left: 10px;
            font-weight: bold;
        }
}

.dataTables_scrollHeadInner,
.dataTables_scrollHeadInner > table,
.dataTables_scrollBody > table {
    width: 100% !important; /* Oppure la larghezza calcolata */
    table-layout: fixed !important;
}

/* Indicatore resize colonna durante il drag */
.dt-colresizable-hover {
    cursor: col-resize !important;
    position: relative;
}

.dt-colresizable-hover::after {
    content: '';
    position: absolute;
    right: 0;
    top: 0;
    height: 100%;
    width: 3px;
    background-color: #007BC0;
    opacity: 0.8;
}

/* Forza il wrap dopo circa 40-45 caratteri */
.cell-wrap {
    max-width: 40ch !important;
    white-space: normal !important; /* Sovrascrive il nowrap che abbiamo messo prima */
    word-break: break-word; /* Spezza le parole lunghe se necessario */
    line-height: 1.2;
}