.slot-placeholder.message {display: none;}
.card{margin-bottom: 0;}
#tagsTable_wrapper .dt-length>label, .dt-search{
    display: flex;
    gap: 10px;
    align-items: center !important;
}
.fc-timegrid-body,.fc-col-header {width: 100%!important;}
.dt-search{
    margin-bottom: 15px;
}
.text-center iconify-icon{
    margin-left: auto!important;
    margin-right: auto!important;
}
.wrapper .page-content{padding-bottom:0!important}
.dt-length label[for="dt-length-0"]{
    display: flex;gap: 10px;    align-items: center !important;
}
.dt-length label[for="dt-length-0"] .form-select{
    max-width: 85px;
}
.text-blu{color: rgb(52, 179, 228)!important;}
p {
    margin-top: 0;
    margin-bottom: 0;
}
.fs-20{font-size: 20px!important;}
html[data-menu-size=condensed] .main-nav .navbar-nav > .nav-item .sub-navbar-nav, html[data-menu-size=condensed] .main-nav .navbar-nav .collapse, html[data-menu-size=condensed] .main-nav .navbar-nav > .nav-item:hover > .nav-link > .nav-text {
    border-radius: 0.35rem!important;
}
.auth-card .form-control::-webkit-input-placeholder {
  color: rgba(255,255,255,0.3);
  opacity: 1;
}
.auth-card .form-control::-moz-placeholder {
  color: rgba(255,255,255,0.3);
  opacity: 1;
}
.auth-card .form-control:-ms-input-placeholder {
  color: rgba(255,255,255,0.3);
  opacity: 1;
}
.auth-card .form-control::-ms-input-placeholder {
  color: rgba(255,255,255,0.3);
  opacity: 1;
}
.auth-card .form-control::placeholder {
  color: rgba(255,255,255,0.3);
  opacity: 1;
}
.auth-card .form-control , .reset-card .form-control {
    color: #ffffff;
    background-color:transparent;
    border: 1px solid rgba(255,255,255,0.4)!important;
}
table.dataTable.table-striped>tbody>tr:nth-of-type(2n+1)>* {
    box-shadow: inset 0 0 0 9999px rgba(var(--dt-row-stripe), 0.03);
}
.wrapper .main-nav .navbar-nav .nav-item .nav-link .nav-icon img{
    width: 15px;
}

/* .table-responsive{min-height: 400px;} */
.pagination{margin-bottom: 0;}
.table>thead th{
    color: var(--bs-body-color);
    background-color: rgba(var(--bs-light-rgb), .2);
}
th:not(.dt-orderable-none) .dt-column-order {
background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI0MDEuOTk4IiBoZWlnaHQ9IjQwMS45OTgiIHN0eWxlPSJlbmFibGUtYmFja2dyb3VuZDpuZXcgMCAwIDQwMS45OTggNDAxLjk5OCIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+PHBhdGggZD0iTTczLjA5MiAxNjQuNDUyaDI1NS44MTNjNC45NDkgMCA5LjIzMy0xLjgwNyAxMi44NDgtNS40MjQgMy42MTMtMy42MTYgNS40MjctNy44OTggNS40MjctMTIuODQ3cy0xLjgxMy05LjIyOS01LjQyNy0xMi44NUwyMTMuODQ2IDUuNDI0QzIxMC4yMzIgMS44MTIgMjA1Ljk1MSAwIDIwMC45OTkgMHMtOS4yMzMgMS44MTItMTIuODUgNS40MjRMNjAuMjQyIDEzMy4zMzFjLTMuNjE3IDMuNjE3LTUuNDI0IDcuOTAxLTUuNDI0IDEyLjg1IDAgNC45NDggMS44MDcgOS4yMzEgNS40MjQgMTIuODQ3IDMuNjIxIDMuNjE3IDcuOTAyIDUuNDI0IDEyLjg1IDUuNDI0ek0zMjguOTA1IDIzNy41NDlINzMuMDkyYy00Ljk1MiAwLTkuMjMzIDEuODA4LTEyLjg1IDUuNDIxLTMuNjE3IDMuNjE3LTUuNDI0IDcuODk4LTUuNDI0IDEyLjg0N3MxLjgwNyA5LjIzMyA1LjQyNCAxMi44NDhMMTg4LjE0OSAzOTYuNTdjMy42MjEgMy42MTcgNy45MDIgNS40MjggMTIuODUgNS40MjhzOS4yMzMtMS44MTEgMTIuODQ3LTUuNDI4bDEyNy45MDctMTI3LjkwNmMzLjYxMy0zLjYxNCA1LjQyNy03Ljg5OCA1LjQyNy0xMi44NDggMC00Ljk0OC0xLjgxMy05LjIyOS01LjQyNy0xMi44NDctMy42MTQtMy42MTYtNy44OTktNS40Mi0xMi44NDgtNS40MnoiLz48L3N2Zz4=);
background-position-y: center;
opacity: .2;
background-color: transparent;
background-position-x: center;
background-repeat: no-repeat;
background-size: contain;
border: none;
cursor: pointer;
float: right;
height: 24px;
margin: 0;
outline: none;
padding: 0;
width: 10px;
}

.tox-toolbar__overflow[aria-hidden="true"],.tox-statusbar__right-container {
    display: none !important;
}


table.dataTable.dtr-inline.collapsed>tbody>tr>td.dtr-control:before, table.dataTable.dtr-inline.collapsed>tbody>tr>th.dtr-control:before{display: none!important;}
table.dataTable.dtr-inline.collapsed>tbody>tr>td.dtr-control, table.dataTable.dtr-inline.collapsed>tbody>tr>th.dtr-control {
    position: relative;
    padding-left: 14px!important;
    cursor: pointer;
}
@media (max-width: 768px) {
  .btn-sm {
    --bs-btn-padding-y: 0.3rem;
    --bs-btn-padding-x: 0.3rem;
}
}

.view_mobile>td{padding: 0!important;}

.timeline-badge.bg-light{
    background-color: #AFB4B8!important;
}
.timeline-item {display: block!important;}
.timeline-badge {left: -43px!important;}




/* Timeline styles */
.timeline-vertical {
    position: relative;
    padding: 1rem;
    margin: 0 0 0 1.5rem;
    color: rgba(0,0,0,0.8);
    border-left: 1px solid rgba(0,0,0,0.1);
}
.timeline-item {
    position: relative;
    padding-bottom: 1.5rem;
}
.timeline-badge {
    position: absolute;
    top: 0;
    left: -39px;
    width: 25px;
    height: 25px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
}
.timeline-content {
    position: relative;
    margin-left: 1.5rem;
    padding: 0.75rem;
    background-color: #f8f9fa;
    border-radius: 0.25rem;
}
/* Colors for badges */
.bg-purple {
    background-color: #6f42c1;
}
.bg-blue {
    background-color: #007bff;
}
.bg-teal {
    background-color: #20c997;
}


.rounded-top{
    border-top-left-radius: var(--bs-border-radius) !important;
    border-top-right-radius: var(--bs-border-radius) !important;
}

.modal-body .card{box-shadow: none;border: 1px solid #eaedf1!important;}
/* Stili per l'editor di newsletter */
.newsletter-preview-wrapper {
    /* background-color: #f8f9fa;
    border-radius: 8px;
    padding: 20px; */
}

.newsletter-preview {
    max-width: 700px;
    margin: 0 auto;
    border-radius: 4px;
}

.newsletter-block-item {
    margin-bottom: 20px;
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);

}

.newsletter-block-controls {
    cursor: move;
    background-color: rgb(238,242,247);
}

.newsletter-block-content {
    background-color: #fff;
    min-height: 80px;
    display: grid;
}

.block-type-card {
    cursor: pointer;
    transition: all 0.2s ease;
}

.block-type-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.rich-editor {
    min-height: 150px;
}

.image-preview, .logo-preview {
    min-height: 20px;
}


.newsletter-preview-mobile {
    max-width: 375px !important;
    transition: max-width 0.3s ease;
}

.newsletter-preview {
    transition: max-width 0.3s ease;
}

/* Stile per il contenuto su mobile */
.newsletter-preview-mobile .newsletter-block-content [style*="display: flex"] {
    flex-direction: column !important;
}

.newsletter-preview-mobile .newsletter-block-content [style*="display: flex"] > div {
    width: 100% !important;
    flex: none !important;
    margin-bottom: 15px;
}

/* Stili per migliorare la visualizzazione mobile */
.newsletter-preview-mobile .image-text-block,
.newsletter-preview-mobile .two-columns-block {
    flex-direction: column !important;
}

.newsletter-preview-mobile .image-text-block > div,
.newsletter-preview-mobile .two-columns-block > div {
    flex: none !important;
    width: 100% !important;
    order: 0 !important; /* Reset del parametro order */
    margin-bottom: 15px;
}

/* Assicurati che le immagini si adattino alla larghezza del contenitore */
.newsletter-preview-mobile img {
    max-width: 100%;
    height: auto;
}


/* Stili per articoli in visualizzazione mobile */
.newsletter-preview-mobile .article-block {
    flex-direction: column !important;
}

.newsletter-preview-mobile .article-block > div {
    flex: none !important;
    width: 100% !important;
    max-width: 100% !important;
    margin-bottom: 15px;
}

.newsletter-preview-mobile .article-block h2 {
    font-size: 20px !important;
}






/* Allinea la paginazione a destra */
.dataTables_wrapper .dataTables_paginate {
    float: right !important;
}

/* Rimuovi il float della lunghezza per evitare sovrapposizioni su mobile */
@media (max-width: 767px) {
    .dataTables_wrapper .dataTables_length,
    .dataTables_wrapper .dataTables_paginate {
        float: none !important;
        text-align: center;
        margin-top: 10px;
    }
}




.step-indicator {
    margin-bottom: 30px;
}

.step {
    flex: 1;
    text-align: center;
    position: relative;
}

.step-icon {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: #e9ecef;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 10px;
    font-size: 24px;
    color: #6c757d;
    transition: all 0.3s ease;
}

.step.active .step-icon {
    background: #0066cc;
    color: white;
}

.step.completed .step-icon {
    background: #28a745;
    color: white;
}

.step-label {
    font-size: 14px;
    color: #6c757d;
}

.step.active .step-label {
    color: #0066cc;
    font-weight: 600;
}

.step-divider {
    flex: 0 0 60px;
    height: 2px;
    background: #e9ecef;
    margin-top: 30px;
}

.upload-area {
    border: 2px dashed #dee2e6;
    border-radius: 8px;
    padding: 60px 20px;
    text-align: center;
    cursor: pointer;
    transition: all 0.3s ease;
}

.upload-area:hover {
    border-color: #0066cc;
    background: #f8f9fa;
}

.upload-area.dragover {
    border-color: #0066cc;
    background: #e7f1ff;
}

.upload-area i {
    font-size: 60px;
    color: #6c757d;
    display: block;
    margin-bottom: 20px;
}

.log-success {
    color: #28a745;
}

.log-warning {
    color: #ffc107;
}

.log-error {
    color: #dc3545;
}

.import-step {
    min-height: 400px;
}

.validation-summary .card {
    transition: all 0.3s ease;
}

.validation-summary .card:hover {
    transform: translateY(-5px);
}




/* Sync log styles */
#syncLog {
    background-color: #f8f9fa;
    padding: 10px;
    border-radius: 4px;
    font-family: monospace;
}

#syncLog .info {
    color: #0066cc;
}

#syncLog .success {
    color: #28a745;
}

#syncLog .error {
    color: #dc3545;
}

#syncLog .warning {
    color: #ffc107;
}

#syncLog div {
    padding: 2px 0;
}





/* ========================================
   CUSTOM CSS - CLIENT ACCOUNTS TABLE
   ======================================== */

/* DataTable Responsive - Control column */
#accountsTable tbody td.dtr-control {
    cursor: pointer;
    position: relative;
}

#accountsTable tbody td.dtr-control:before {
    content: '+';
    display: inline-block;
    width: 24px;
    height: 24px;
    line-height: 22px;
    text-align: center;
    border: 0px;
    border-radius: 4px;
    color: #34b3e4;
    font-weight: bold;
    font-size: 18px;
    background-color: #fff;
    transition: all 0.2s ease;
}

#accountsTable tbody tr.parent td.dtr-control:before {
    content: '-';
    background-color: #34b3e4;
    color: #fff;
}

#accountsTable tbody td.dtr-control:hover:before {
    background-color: #34b3e4;
    color: #fff;
    transform: scale(1.1);
}

/* DataTable Responsive - Child row styling */
#accountsTable tbody tr.child {
    background-color: #f8fafc;
}

#accountsTable tbody tr.child ul.dtr-details {
    list-style: none;
    padding: 15px;
    margin: 0;
}

#accountsTable tbody tr.child ul.dtr-details > li {
    padding: 8px 0;
    border-bottom: 1px solid #e5e7eb;
}

#accountsTable tbody tr.child ul.dtr-details > li:last-child {
    border-bottom: none;
}

#accountsTable tbody tr.child ul.dtr-details > li .dtr-title {
    font-weight: 600;
    color: #64748b;
    display: inline-block;
    min-width: 150px;
}

#accountsTable tbody tr.child ul.dtr-details > li .dtr-data {
    color: #1e293b;
}

/* Avatar styling */
.avatar-sm {
    width: 40px;
    height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.avatar-sm img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
}

.avatar-xl {
    width: 80px;
    height: 80px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.avatar-xl img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}


/* Make sure responsive table doesn't break on small screens */
#accountsTable.dataTable.dtr-inline.collapsed > tbody > tr > td.dtr-control,
#accountsTable.dataTable.dtr-inline.collapsed > tbody > tr > th.dtr-control {
    padding-left: 30px;
}

/* Ensure badges don't wrap in responsive mode */
.badge {
    white-space: nowrap;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .avatar-sm {
        width: 32px;
        height: 32px;
    }

    .avatar-xl {
        width: 64px;
        height: 64px;
    }
}



/* ============================================
   PASSWORD FIELD STYLING
   ============================================ */

/* Password input group buttons */
.input-group .btn-outline-secondary,
.input-group .btn-outline-primary {
    border-color: #dee2e6;
}

/* .input-group .btn-outline-secondary:hover,
.input-group .btn-outline-primary:hover {
    background-color: #f8f9fa;
} */

/* Password visibility toggle icon */
.input-group .btn-outline-secondary .bx {
    font-size: 1.1rem;
}

/* Password generate button */
.input-group .btn-outline-primary .bx-refresh {
    font-size: 1.1rem;
}


/* ============================================
   RESET PASSWORD MODAL STYLING
   ============================================ */

#resetPasswordModal .modal-header.bg-warning {
    background-color: #ffc107 !important;
}

#resetPasswordModal .btn-close-white {
    filter: brightness(0) invert(1);
}

#resetPasswordModal .avatar-title.bg-soft-warning {
    background-color: rgba(255, 193, 7, 0.18);
    color: #ffc107;
}

#resetPasswordModal .alert-warning {
    background-color: rgba(255, 193, 7, 0.1);
    border-color: rgba(255, 193, 7, 0.2);
}


/* ============================================
   RESET PASSWORD PAGE STYLES
   ============================================ */

   .pos-rel{position: relative;}
/* Header della card */
.reset-header {
    color: white;
    padding: 30px;
    text-align: center;
}
.reset-header i{font-size: 40px;}

/* Body della card */
.reset-body {
    padding: 40px;
}
.reset-card .form-label{
    color: #ffffff;
}

/* Toggle password visibility */
.password-toggle {
cursor: pointer;
position: absolute;
right: 15px;
bottom: 0;
transform: translateY(-50%);
color: #6c757d;
z-index: 10;
padding: 0px;
}

.password-toggle:hover {
    color: #495057;
}

/* Lista requisiti password */
.password-requirements {
    font-size: 0.875rem;
    color: #6c757d;
    margin-top: 8px;
    padding-left: 20px;
    list-style: none;
}

.password-requirements li {
    margin-bottom: 4px;
    transition: all 0.3s ease;
}

.password-requirements li.valid {
    color: #28a745;
}

.password-requirements li.invalid {
    color: #dc3545;
}

.password-requirements li i {
    margin-right: 5px;
}

/* Input con icona */
.position-relative .form-control {
    padding-right: 40px;
}

/* Responsive */
@media (max-width: 576px) {
    .reset-card {
        margin: 20px;
    }

    .reset-header {
        padding: 20px;
    }

    .reset-header i {
        font-size: 36px;
    }

    .reset-body {
        padding: 30px 20px;
    }
}






/* ============================================
   CLIENTE LOGIN - TOGGLE PASSWORD STYLES
   ============================================ */

/* Toggle password visibility nella pagina login */
.password-toggle-login {
    cursor: pointer;
    position: absolute;
    right: 15px;
    top: 50%;
    transform: translateY(-50%);
    color: #6c757d;
    z-index: 10;
    padding: 5px 10px;
    transition: color 0.2s ease;
    font-size: 18px;
}

.password-toggle-login:hover {
    color: #495057;
}

.password-toggle-login i {
    pointer-events: none;
}

/* Assicura che l'input abbia spazio per l'icona */
.form-cliente-login .position-relative .form-control {
    padding-right: 45px !important;
}

/* Messaggi errore/successo */
.form-cliente-login .message {
    display: none;
}

.form-cliente-login .message.show {
    display: block;
}

/* Invalid feedback tooltip */
.form-cliente-login .invalid-tooltip {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 5;
    max-width: 100%;
    padding: 0.25rem 0.5rem;
    margin-top: 0.1rem;
    font-size: 0.875rem;
    color: #fff;
    background-color: rgba(220, 53, 69, 0.9);
    border-radius: 0.25rem;
}

.form-cliente-login .form-control.is-invalid ~ .invalid-tooltip {
    display: block;
}

/* Spinner nel pulsante */
.spinner-border-sm {
    width: 1rem;
    height: 1rem;
    border-width: 0.15em;
}

/* Stile link recupera password */
.form-cliente-login a {
    text-decoration: none;
    transition: opacity 0.2s ease;
}

.form-cliente-login a:hover {
    opacity: 0.8;
}

/* Responsive */
@media (max-width: 576px) {
    .password-toggle-login {
        right: 10px;
        font-size: 16px;
    }
}




/* Fix per form-label con password toggle */
.position-relative .form-label {
    display: block;
    margin-bottom: 0.5rem;
}

/* Spinner durante il caricamento */
.spinner-border-sm {
    width: 1rem;
    height: 1rem;
    border-width: 0.15em;
}



/* ============================================
   PIANI EDITORIALI - CUSTOM STYLES
   ============================================ */

/* ---- Badge e Stati ---- */
.plan-status-badge {
    font-size: 0.85rem;
    padding: 0.35rem 0.75rem;
    font-weight: 500;
}

.month-badge {
    display: inline-block;
    min-width: 60px;
    text-align: center;
}

/* ---- Sezione Filtri ---- */
.filter-section {
    background: #f8f9fa;
    border-radius: 8px;
    padding: 1.5rem;
    margin-bottom: 2rem;
}

/* ---- Cards Statistiche ---- */
.stats-card {
    border-left: 4px solid;
    transition: transform 0.2s, box-shadow 0.2s;
}

.stats-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

/* ---- Pulsanti Azione DataTable ---- */
.btn-group-sm > .btn {
    padding: 0.25rem 0.5rem;
    font-size: 0.875rem;
}

/* ---- Post Grid (per vista calendario) ---- */
.post-grid-item {
    border: 1px solid #dee2e6;
    border-radius: 8px;
    padding: 1rem;
    margin-bottom: 1rem;
    transition: all 0.2s;
    cursor: pointer;
}

.post-grid-item:hover {
    border-color: #0d6efd;
    box-shadow: 0 2px 8px rgba(13, 110, 253, 0.15);
    transform: translateY(-2px);
}

.post-grid-item.draft {
    border-left: 4px solid #6c757d;
}

.post-grid-item.copy_ready {
    border-left: 4px solid #0dcaf0;
}

.post-grid-item.design_ready {
    border-left: 4px solid #ffc107;
}

.post-grid-item.approved {
    border-left: 4px solid #198754;
}

/* ---- Channel Icons ---- */
.channel-icon {
    width: 24px;
    height: 24px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
    font-size: 0.875rem;
    margin-right: 0.25rem;
}

.channel-instagram { background: linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%); color: white; }
.channel-facebook { background: #1877f2; color: white; }
.channel-tiktok { background: #000000; color: white; }
.channel-linkedin { background: #0a66c2; color: white; }
.channel-youtube { background: #ff0000; color: white; }
.channel-blog { background: #6c757d; color: white; }
.channel-newsletter { background: #17a2b8; color: white; }

/* ---- Post Asset Preview ---- */
.asset-thumbnail {
    width: 60px;
    height: 60px;
    object-fit: cover;
    border-radius: 4px;
    border: 1px solid #dee2e6;
}

.asset-thumbnail-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(60px, 1fr));
    gap: 0.5rem;
}

/* ---- Timeline View ---- */
.timeline-item {
    position: relative;
    padding-left: 2rem;
    margin-bottom: 1.5rem;
}

.timeline-item::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: -1.5rem;
    width: 2px;
    background: #dee2e6;
}

.timeline-item:last-child::before {
    display: none;
}

.timeline-dot {
    position: absolute;
    left: -6px;
    top: 4px;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    border: 2px solid #fff;
    background: #0d6efd;
    box-shadow: 0 0 0 2px #dee2e6;
}


/* ---- Comments/Threads ---- */
.comment-item {
    padding: 1rem;
    border-left: 3px solid #e9ecef;
    margin-bottom: 1rem;
    border-radius: 4px;
    background: #f8f9fa;
}

.comment-item.internal {
    border-left-color: #0d6efd;
    background: #e7f1ff;
}

.comment-item.client {
    border-left-color: #ffc107;
    background: #fff3cd;
}

.comment-author {
    font-weight: 600;
    margin-bottom: 0.25rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.comment-time {
    font-size: 0.75rem;
    color: #6c757d;
}



/* ---- Approval Panel ---- */
.approval-panel {
    border: 2px solid #ffc107;
    border-radius: 8px;
    padding: 1.5rem;
    background: #fff3cd;
    margin-bottom: 2rem;
}

.approval-panel.approved {
    border-color: #198754;
    background: #d1e7dd;
}

.approval-panel.needs-changes {
    border-color: #dc3545;
    background: #f8d7da;
}

/* ---- UTM Builder ---- */
.utm-preview {
    background: #f8f9fa;
    border: 1px solid #dee2e6;
    border-radius: 4px;
    padding: 0.75rem;
    font-family: 'Courier New', monospace;
    font-size: 0.875rem;
    word-break: break-all;
}

/* ---- Loading States ---- */
.skeleton-loader {
    background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
    background-size: 200% 100%;
    animation: loading 1.5s ease-in-out infinite;
    border-radius: 4px;
}

@keyframes loading {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* ---- Responsive ---- */
@media (max-width: 768px) {
    .filter-section {
        padding: 1rem;
    }

    .stats-card {
        margin-bottom: 1rem;
    }

    .btn-group-sm > .btn {
        padding: 0.2rem 0.4rem;
    }
}

/* ---- Calendar View (IG Grid Style) ---- */
.ig-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 4px;
    max-width: 900px;
}

.ig-grid-item {
    aspect-ratio: 1;
    position: relative;
    overflow: hidden;
    border-radius: 4px;
    cursor: pointer;
    transition: transform 0.2s;
}

.ig-grid-item:hover {
    transform: scale(1.02);
    z-index: 1;
}

.ig-grid-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.ig-grid-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: linear-gradient(to top, rgba(0,0,0,0.7) 0%, transparent 100%);
    padding: 0.5rem;
    color: white;
    font-size: 0.75rem;
}

/* ---- Versioning Diff ---- */
.diff-added {
    background-color: #d1e7dd;
    padding: 2px 4px;
    border-radius: 2px;
}

.diff-removed {
    background-color: #f8d7da;
    padding: 2px 4px;
    border-radius: 2px;
    text-decoration: line-through;
}

/* ---- Priority Indicators ---- */
.priority-low { color: #6c757d; }
.priority-medium { color: #0dcaf0; }
.priority-high { color: #ffc107; }
.priority-urgent { color: #dc3545; }

/* ---- Animations ---- */
.fade-in {
    animation: fadeIn 0.3s ease-in;
}




/* ====================================
   UPLOADED ASSETS LIST
   ==================================== */

.uploaded-assets {
    display: block;
    /* grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); */
    gap: 15px;
}

.uploaded-assets .card {
    transition: all 0.3s ease;
    border: 1px solid #e3e6f0;
}

.uploaded-assets .card:hover {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    transform: translateY(-2px);
}

.uploaded-assets .card-img-top {
    border-bottom: 1px solid #e3e6f0;
}
/* Stile per le anteprime dei file caricati */
.uploaded-file-item {
    background: #f8f9fa;
    transition: all 0.3s ease;
}

.uploaded-file-item:hover {
    background: #e9ecef;
}

.image-preview-container img {
    border: 2px solid #dee2e6;
    border-radius: 4px;
    transition: transform 0.2s;
}

.image-preview-container img:hover {
    transform: scale(1.05);
    border-color: #0066cc;
}

.file-info {
    min-width: 0; /* Permette text-truncate di funzionare */
}

.asset-placeholder {
    width: 100%;
    height: 120px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #f9fafb;
}

.asset-placeholder iconify-icon {
    font-size: 48px;
    color: #98a2b3;
}

.asset-item-info {
    padding: 8px;
    background-color: #fff;
}

.asset-item-name {
    display: block;
    font-size: 11px;
    font-weight: 500;
    color: #344054;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-bottom: 2px;
}

.asset-item-size {
    display: block;
    font-size: 10px;
    color: #667085;
}

.asset-item-remove {
    position: absolute;
    top: 8px;
    right: 8px;
    background-color: rgba(255, 255, 255, 0.95);
    border: 1px solid #e4e7ec;
    border-radius: 50%;
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
    padding: 0;
    z-index: 10;
}

.asset-item-remove:hover {
    background-color: #dc3545;
    border-color: #dc3545;
    color: #fff;
    transform: scale(1.1);
}

.asset-item-remove iconify-icon {
    font-size: 16px;
}

/* ====================================
   PROGRESS BAR CUSTOM
   ==================================== */

.progress {
    border-radius: 8px;
    overflow: hidden;
}

.progress-bar {
    font-size: 13px;
    font-weight: 600;
    transition: width 0.3s ease;
}






/* ===================================
   PIANI EDITORIALI - CREATE PAGE
   =================================== */

/* Page Title Box con layout migliorato */
.page-title-box {
    padding: 0;
}

.page-title-box h4 {
    display: flex;
    align-items: center;
    margin-bottom: 0;
}

.page-title-box h4 i {
    font-size: 1.5rem;
}

/* Card styling per consistenza */
.card-header h5 {
    display: flex;
    align-items: center;
    margin-bottom: 0;
}

.card-header h5 i {
    font-size: 1.25rem;
    opacity: 0.8;
}

.card-header.bg-secondary h6, .card-header.bg-primary h6, .card-header.bg-info h6{
    color: #ffffff;
}

/* Info cards nella sidebar */
.bg-light.border-0 {
    background-color: #f8f9fa !important;
}

.bg-primary.bg-opacity-10 {
    background-color: rgba(13, 110, 253, 0.1) !important;
}

/* Warning card per piano esistente */
.border-warning {
    border-color: #ffc107 !important;
    border-width: 2px !important;
}

/* Select con badge colorato per clienti */
#client_id option {
    padding: 0.5rem 1rem;
}

/* Alert styling */
#alertContainer {
    position: relative;
    z-index: 1000;
    margin-bottom: 1rem;
}

#alertContainer .alert {
    display: flex;
    align-items: center;
    box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
}

#alertContainer .alert i {
    font-size: 1.25rem;
}

/* Loading state per bottone submit */
#submitBtn .bx-spin {
    animation: spin 1s linear infinite;
}


/* Form elements spacing */
.form-label {
    font-weight: 500;
    margin-bottom: 0.5rem;
}

.form-label .text-danger {
    font-weight: 700;
}

.form-control:focus,
.form-select:focus {
    border-color: #34b3e4;
    box-shadow: none;
}

/* Small text helper */
small.text-muted {
    font-size: 0.875rem;
    color: #6c757d !important;
}

/* Lista prossimi passi nella sidebar */
ol.small {
    margin-bottom: 0;
}

ol.small li {
    padding-left: 0.25rem;
    line-height: 1.8;
}

/* Card azioni footer con bottoni */
.card-body .d-flex {
    gap: 0.6rem;
}

/* Responsive adjustments */
@media (max-width: 991.98px) {
    .page-title-box {
        flex-direction: column;
        align-items: flex-start !important;
        gap: 1rem;
    }

    .page-title-box .btn {
        width: 100%;
        justify-content: center;
    }

    .card-body .d-flex {
        flex-direction: column;
    }

    .card-body .d-flex .btn {
        width: 100%;
        justify-content: center;
    }
}

/* Info box icons */
.bx-check-circle {
    font-size: 1rem;
    vertical-align: middle;
}

.bx-info-circle,
.bx-error {
    font-size: 1.25rem;
    vertical-align: middle;
}

/* Link esterni nei messaggi */
#existingPlanMessage a {
    color: #dc3545;
    text-decoration: none;
    font-weight: 500;
}

#existingPlanMessage a:hover {
    text-decoration: underline;
}

#existingPlanMessage a i {
    font-size: 0.9rem;
    vertical-align: middle;
}

/* Textarea autoexpanding behavior */
textarea.form-control {
    min-height: 100px;
    resize: vertical;
}

/* Disabled state per select */
select.form-select:disabled {
    background-color: #e9ecef;
    opacity: 0.7;
    cursor: not-allowed;
}

/* Card hover effect per info boxes */
.card.border-0:not(.bg-primary):not(.bg-light) {
    transition: box-shadow 0.3s ease;
}


/* Stats Cards */
.stats-card {
    transition: transform 0.2s;
}

.stats-card:hover {
    transform: translateY(-3px);
}

/* Modal personalizzazione */
#createPostModal .modal-dialog {
    max-width: 1480px;
}

#createPostModal .card {
    box-shadow: none;
    border: 1px solid #dee2e6;
}

#createPostModal .card-header {
    background-color: #f8f9fa;
    border-bottom: 1px solid #dee2e6;
}

/* Asset Preview nel modal */
#assetPreview img,
#assetPreview video {
    border-radius: 0.25rem;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .post-card {
        margin-bottom: 1rem;
    }

    #createPostModal .modal-dialog {
        max-width: 95%;
        margin: 0.5rem auto;
    }
}


/* Fix CSS per Post Modal */

/* Dropzone styling */
.dropzone-area {
    border: 2px dashed #dee2e6;
    border-radius: 8px;
    padding: 30px;
    text-align: center;
    background-color: #f8f9fa;
    transition: all 0.3s ease;
    cursor: pointer;
}

.dropzone-area:hover {
    background-color: #e9ecef;
    border-color: #adb5bd;
    transform: scale(1.01);
}

.dropzone-area.dragover {
    background-color: #e3f2fd !important;
    border-color: #2196f3 !important;
}

.dropzone-icon {
    font-size: 3rem;
    color: #6c757d;
    display: block;
    margin: 0 auto 5px auto;
}

.dropzone-text {
    font-size: 1.1rem;
    color: #495057;
    margin-bottom: 5px;
}

.dropzone-subtext {
    font-size: 0.9rem;
    color: #6c757d;
}

/* Quick date buttons */
.quick-date-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    margin-top: 10px;
}

.quick-date-btn {
    font-size: 0.875rem;
}

/* Uploaded files */
.uploaded-file {
    background-color: #f8f9fa;
    transition: background-color 0.2s;
}

.uploaded-file:hover {
    background-color: #e9ecef;
}

/* Character counter */
.char-counter {
    display: block;
    margin-top: 5px;
    font-size: 0.875rem;
}

/* Asset grid nel modal */
.post-modal-asset {
    position: relative;
}

.post-modal-asset img,
.post-modal-asset video {
    width: 100%;
    height: 150px;
    object-fit: cover;
    border-radius: 4px;
}

/* Checklist items */
.checklist-item {
    padding: 8px 12px;
    background-color: #f8f9fa;
    border-radius: 4px;
    margin-bottom: 5px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.checklist-item:hover {
    background-color: #e9ecef;
}

/* Modal scrollable content */
.modal-body {
    max-height: calc(100vh - 200px);
    overflow-y: auto;
}

/* Iconify icons fix */
iconify-icon {
    display: inline-flex;
    align-items: center;
    vertical-align: middle;
}

/* Channel checkboxes */
.form-check-label iconify-icon {
    margin-right: 5px;
}

/* Fix per i bottoni dei canali */
.form-check-inline {
    margin-right: 15px;
    margin-bottom: 10px;
}

.form-check-inline .form-check-label {
    display: flex;
    align-items: center;
    cursor: pointer;
    padding: 5px 10px!important;
    border-radius: 5px;
    transition: background-color 0.2s;
}

.form-check-inline.check-canali .form-check-label{gap:0!important;}

.check-canali{margin-right: 0!important;padding-left: 0!important;}
.check-canali>input{position: absolute;opacity: 0;}
.form-check-inline .form-check-label:hover {
    background-color: #f8f9fa;
}
.form-check-inline .form-check-input + .form-check-label {
    border: 1px solid var(--bs-border-color)
}
.form-check-inline .form-check-input:checked + .form-check-label {
    background-color: #e7f3ff;
    border: 1px solid #0dcaf0;
}


/* Alert in modal */
.modal-body .alert {
    margin-bottom: 15px;
}

/* Responsive fixes */
@media (max-width: 768px) {
    .modal-dialog {
        margin: 10px;
    }

    .quick-date-buttons {
        justify-content: center;
    }

    .dropzone-area {
        padding: 20px;
    }
}



.asset-placeholder {
    width: 100%;
    height: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f1f5f9;
    border-bottom: 1px solid #e2e8f0;
}

.asset-placeholder iconify-icon {
    font-size: 2rem;
    color: #94a3b8;
}

.asset-item-info {
    flex: 1;
    padding: 6px 8px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    overflow: hidden;
}

.asset-item-name {
    font-size: 0.75rem;
    font-weight: 500;
    color: #475569;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: block;
}

.asset-item-size {
    font-size: 0.7rem;
    color: #94a3b8;
    margin-top: 2px;
}

.asset-item-remove {
    position: absolute;
    top: 4px;
    right: 4px;
    width: 28px;
    height: 28px;
    border: none;
    background: rgba(239, 68, 68, 0.9);
    color: white;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: all 0.2s ease;
    padding: 0;
}

.asset-item:hover .asset-item-remove {
    opacity: 1;
}

.asset-item-remove:hover {
    background: rgba(220, 38, 38, 1);
    transform: scale(1.1);
}

.asset-item-remove iconify-icon {
    font-size: 1rem;
}

/* Progress Bar Custom */
#uploadProgress .progress-bar {
    font-size: 0.875rem;
    font-weight: 600;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Note Fields - Icons color coded */
.form-label iconify-icon {
    font-size: 1.1rem;
}

/* Empty state quando non ci sono asset */
.uploaded-assets:empty::after {
    content: '';
    display: none;
}





/* ============================================
   Modal Successo Post
   ============================================ */

.success-modal-content {
    border: none;
    border-radius: 20px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1);
    overflow: hidden;
}

.success-modal-content .modal-body {
    background: linear-gradient(135deg, #f8f9fa 0%, #ffffff 100%);
}

/* Checkmark Animation */
.success-checkmark {
    width: 100px;
    height: 100px;
    margin: 0 auto;
    position: relative;
}

.success-checkmark .check-icon {
    width: 100px;
    height: 100px;
    position: relative;
    border-radius: 50%;
    box-sizing: content-box;
    border: 4px solid #198754;
    background-color: #fff;
}

.success-checkmark .check-icon::before {
    top: 3px;
    left: -2px;
    width: 30px;
    transform-origin: 100% 50%;
    border-radius: 100px 0 0 100px;
}

.success-checkmark .check-icon::after {
    top: 0;
    left: 30px;
    width: 60px;
    transform-origin: 0 50%;
    border-radius: 0 100px 100px 0;
    animation: rotate-circle 4.25s ease-in;
}

.success-checkmark .icon-line {
    height: 5px;
    background-color: #198754;
    display: block;
    border-radius: 2px;
    position: absolute;
    z-index: 10;
}

.success-checkmark .icon-line.line-tip {
    top: 46px;
    left: 14px;
    width: 25px;
    transform: rotate(45deg);
    animation: icon-line-tip 0.75s;
}

.success-checkmark .icon-line.line-long {
    top: 38px;
    right: 8px;
    width: 47px;
    transform: rotate(-45deg);
    animation: icon-line-long 0.75s;
}

.success-checkmark .icon-circle {
    top: -4px;
    left: -4px;
    z-index: 10;
    width: 100px;
    height: 100px;
    border-radius: 50%;
    position: absolute;
    box-sizing: content-box;
    border: 4px solid rgba(25, 135, 84, 0.2);
}

.success-checkmark .icon-fix {
    top: 8px;
    width: 5px;
    left: 26px;
    z-index: 1;
    height: 85px;
    position: absolute;
    transform: rotate(-45deg);
    background-color: #fff;
}

/* Animazioni */
@keyframes rotate-circle {
    0% {
        transform: rotate(-45deg);
    }
    5% {
        transform: rotate(-45deg);
    }
    12% {
        transform: rotate(-405deg);
    }
    100% {
        transform: rotate(-405deg);
    }
}

@keyframes icon-line-tip {
    0% {
        width: 0;
        left: 1px;
        top: 19px;
    }
    54% {
        width: 0;
        left: 1px;
        top: 19px;
    }
    70% {
        width: 50px;
        left: -8px;
        top: 37px;
    }
    84% {
        width: 17px;
        left: 21px;
        top: 48px;
    }
    100% {
        width: 25px;
        left: 14px;
        top: 45px;
    }
}

@keyframes icon-line-long {
    0% {
        width: 0;
        right: 46px;
        top: 54px;
    }
    65% {
        width: 0;
        right: 46px;
        top: 54px;
    }
    84% {
        width: 55px;
        right: 0px;
        top: 35px;
    }
    100% {
        width: 47px;
        right: 8px;
        top: 38px;
    }
}

/* Effetto fade-in della modal */
#successPostModal.show .modal-content {
    animation: slideInDown 0.5s ease-out;
}

@keyframes slideInDown {
    from {
        opacity: 0;
        transform: translateY(-50px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Stile bottoni nella modal successo */
#successPostModal .btn {
    border-radius: 10px;
    padding: 12px 24px;
    font-weight: 500;
    transition: all 0.3s ease;
}

#successPostModal .btn-success {
    background: linear-gradient(135deg, #198754 0%, #157347 100%);
    border: none;
    box-shadow: 0 4px 15px rgba(25, 135, 84, 0.3);
}

#successPostModal .btn-success:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(25, 135, 84, 0.4);
}


/* ====================================
   SUCCESS MODAL STYLES
   ==================================== */

.success-modal-content {
    border: none;
    border-radius: 16px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15);
}

.success-checkmark {
    width: 100px;
    height: 100px;
    margin: 0 auto;
    background: linear-gradient(135deg, #d4edda 0%, #c3e6cb 100%);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    animation: scaleIn 0.5s ease-out;
}

.success-checkmark iconify-icon {
    font-size: 60px !important;
    color: #28a745 !important;
    animation: checkmarkPop 0.6s ease-out 0.3s both;
}

/* Animazioni */
@keyframes scaleIn {
    0% {
        transform: scale(0);
        opacity: 0;
    }
    50% {
        transform: scale(1.1);
    }
    100% {
        transform: scale(1);
        opacity: 1;
    }
}

@keyframes checkmarkPop {
    0% {
        transform: scale(0) rotate(-45deg);
        opacity: 0;
    }
    50% {
        transform: scale(1.2) rotate(0deg);
    }
    100% {
        transform: scale(1) rotate(0deg);
        opacity: 1;
    }
}

/* Stili bottoni modal successo */
.success-modal-content .btn {
    font-weight: 500;
    padding: 12px 24px;
    border-radius: 8px;
    transition: all 0.3s ease;
}

.success-modal-content .btn-primary {
    background: linear-gradient(135deg, #0d6efd 0%, #0a58ca 100%);
    border: none;
    box-shadow: 0 4px 12px rgba(13, 110, 253, 0.3);
}

.success-modal-content .btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(13, 110, 253, 0.4);
}

.success-modal-content .btn-outline-secondary:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

/* Responsive */
@media (max-width: 576px) {
    .success-modal-content .modal-body {
        padding: 2rem !important;
    }

    .success-checkmark {
        width: 80px;
        height: 80px;
    }

    .success-checkmark iconify-icon {
        font-size: 48px !important;
    }
}




/* ===================================
   POST ASSETS STYLES - DIGO STUDIO
   CSS per caroselli, video e immagini
   con proporzioni reali
   =================================== */

/* Wrapper principale degli asset */
.post-asset-wrapper {
    position: relative;
    background: #f8f9fa;
    min-height: 100px;
    overflow: hidden;
}



.post-single-image {
    width: 100%;
    height: auto;
    object-fit: contain; /* Mantiene proporzioni reali senza tagliare */
    display: block;
}

/* Carosello immagini */
.post-carousel {
    position: relative;
    min-height: 100px;
}



/* Controlli carosello - styling migliorato */
.post-carousel .carousel-control-prev,
.post-carousel .carousel-control-next {
    width: 40px;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.post-carousel:hover .carousel-control-prev,
.post-carousel:hover .carousel-control-next {
    opacity: 1;
}

.post-carousel .carousel-control-prev-icon,
.post-carousel .carousel-control-next-icon {
    width: 30px;
    height: 30px;
    background-color: rgba(0, 0, 0, 0.6);
    border-radius: 50%;
    padding: 8px;
    background-size: 14px;
}

/* Indicatori carosello */
.post-carousel .carousel-indicators {
    margin-bottom: 8px;
}

.post-carousel .carousel-indicators button {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    margin: 0 4px;
}

/* Contatore immagini carosello */
.post-carousel-counter {
    position: absolute;
    top: 10px;
    right: 10px;
    background: rgba(0, 0, 0, 0.7);
    color: white;
    padding: 4px 10px;
    border-radius: 20px;
    font-size: 0.85rem;
    font-weight: 500;
    z-index: 10;
    display: flex;
    align-items: center;
}

.post-carousel-counter iconify-icon {
    font-size: 1rem;
}

.post-image-container img{
    width: 100%;
}
/* Container Video */
.post-video-container {
    position: relative;
    width: 100%;
    max-height: 400px;
    background: #000;
    display: flex;
    align-items: center;
    justify-content: center;
}

.post-video {
    width: 100%;
    height: auto;
    max-height: 400px;
    display: block;
}

/* Placeholder quando non ci sono asset */
.post-image-placeholder {
    height: 200px;
    background: #e9ecef;
}

/* Badge indicatori (Allegati e ADV) */
.post-indicators {
    position: absolute;
    bottom: 10px;
    left: 10px;
    z-index: 10;
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}

.badge-indicator {
    font-size: 0.75rem;
    font-weight: 600;
    padding: 5px 10px;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.badge-indicator iconify-icon {
    font-size: 0.9rem;
}

/* Responsive Design */
@media (max-width: 768px) {
    .post-asset-wrapper {
        max-height: 300px;
    }






    .post-indicators {
        bottom: 5px;
        left: 5px;
    }

    .badge-indicator {
        font-size: 0.7rem;
        padding: 4px 8px;
    }
}

@media (max-width: 576px) {
    .post-asset-wrapper {
        max-height: 250px;
    }




    .post-carousel-counter {
        top: 8px;
        right: 8px;
        font-size: 0.75rem;
        padding: 3px 8px;
    }
}







/* ===================================
   LIGHTBOX STYLES
   =================================== */

/* Modal lightbox */
.lightbox-modal-content {
    background-color: rgba(0, 0, 0, 0.95);
    border: none;
    border-radius: 0;
}

.lightbox-modal-content .modal-header {
    background-color: transparent;
    padding: 1rem 1.5rem;
}

.lightbox-modal-content .modal-title {
    color: #fff;
    font-size: 1.1rem;
    font-weight: 500;
}

.lightbox-modal-content .btn-close-white {
    filter: brightness(0) invert(1);
}

/* Container immagine */
.lightbox-container {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 400px;
    height: 100vh;
    background-color: #000;
}

.lightbox-image {
    max-width: 100%;
    max-height: 70vh;
    width: auto;
    height: auto;
    object-fit: contain;
    display: block;
    margin: 0 auto;
}

/* Controlli navigazione */
.lightbox-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background-color: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.3);
    color: #fff;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
    z-index: 10;
    backdrop-filter: blur(5px);
}

.lightbox-nav:hover {
    background-color: rgba(255, 255, 255, 0.2);
    border-color: rgba(255, 255, 255, 0.5);
    transform: translateY(-50%) scale(1.1);
}

.lightbox-nav iconify-icon {
    font-size: 24px;
}

.lightbox-prev {
    left: 20px;
}

.lightbox-next {
    right: 20px;
}

/* Contatore immagini */
.lightbox-counter {
    position: absolute;
    bottom: 70px;
    left: 50%;
    transform: translateX(-50%);
    background-color: rgba(0, 0, 0, 0.7);
    color: #fff;
    padding: 8px 16px;
    border-radius: 20px;
    font-size: 0.9rem;
    font-weight: 500;
    z-index: 10;
    backdrop-filter: blur(5px);
}

/* Thumbnails */
.lightbox-thumbnails {
    display: flex;
    gap: 10px;
    padding: 15px;
    background-color: rgba(0, 0, 0, 0.8);
    overflow-x: auto;
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, 0.3) transparent;
}

.lightbox-thumbnails::-webkit-scrollbar {
    height: 6px;
}

.lightbox-thumbnails::-webkit-scrollbar-track {
    background: transparent;
}

.lightbox-thumbnails::-webkit-scrollbar-thumb {
    background-color: rgba(255, 255, 255, 0.3);
    border-radius: 3px;
}

.lightbox-thumbnail {
    flex-shrink: 0;
    width: 80px;
    height: 80px;
    border-radius: 8px;
    overflow: hidden;
    cursor: pointer;
    border: 2px solid transparent;
    transition: all 0.3s ease;
    opacity: 0.6;
}

.lightbox-thumbnail:hover {
    opacity: 1;
    transform: scale(1.05);
}

.lightbox-thumbnail.active {
    border-color: #fff;
    opacity: 1;
}

.lightbox-thumbnail img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}



.lightbox-image {
    animation: fadeIn 0.3s ease;
}

/* Responsive */
@media (max-width: 768px) {
    .lightbox-nav {
        width: 40px;
        height: 40px;
    }

    .lightbox-nav iconify-icon {
        font-size: 20px;
    }

    .lightbox-prev {
        left: 10px;
    }

    .lightbox-next {
        right: 10px;
    }

    .lightbox-thumbnail {
        width: 60px;
        height: 60px;
    }

    .lightbox-counter {
        font-size: 0.8rem;
        padding: 6px 12px;
    }
}






/* ====================================
   POST EDIT MODAL STYLES
   ==================================== */

/* Tabs styling */
#editPostTabs .nav-link {
    color: #6c757d;
    border: none;
    border-bottom: 2px solid transparent;
    transition: all 0.3s ease;
}

#editPostTabs .nav-link:hover {
    color: #0d6efd;
    border-bottom-color: #0d6efd;
}

#editPostTabs .nav-link.active {
    color: #0d6efd;
    border-bottom-color: #0d6efd;
    background-color: transparent;
}

/* Asset cards */
#assetContainer .card {
    transition: transform 0.2s, box-shadow 0.2s;
}

#assetContainer .card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}

#assetContainer .card-img-top {
    height: 200px;
    object-fit: cover;
}

/* Version table */
#versionsTable tbody tr:hover {
    background-color: #f8f9fa;
}

/* Diff modal */
#diffContent .diff-added {
    background-color: #d4edda;
    padding: 2px 4px;
    border-radius: 3px;
}

#diffContent .diff-removed {
    background-color: #f8d7da;
    padding: 2px 4px;
    border-radius: 3px;
    text-decoration: line-through;
}

#diffContent .diff-section {
    margin-bottom: 1.5rem;
    padding: 1rem;
    border: 1px solid #dee2e6;
    border-radius: 0.375rem;
}

#diffContent .diff-section-title {
    font-weight: 600;
    color: #495057;
    margin-bottom: 0.75rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid #e9ecef;
}

/* Character counter */
#charCount {
    font-weight: 500;
    color: #6c757d;
}

/* Labels checkboxes */
.form-check .badge {
    cursor: pointer;
    transition: opacity 0.2s;
}

.form-check-input:not(:checked) + .form-check-label .badge {
    opacity: 0.6;
}

.form-check-input:checked + .form-check-label .badge {
    opacity: 1;
    box-shadow: 0 0 0 3px rgba(13, 110, 253, 0.15);
}

/* Modal size adjustment */
.modal-xl {
    max-width: 1200px;
}

@media (max-width: 1200px) {
    .modal-xl {
        max-width: 95%;
    }
}

/* Responsive tabs */
@media (max-width: 768px) {
    #editPostTabs {
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    #editPostTabs .nav-item {
        flex-shrink: 0;
    }
}





/* ===== STILI PER POST E VERSIONI ===== */

/* Timeline versioni */
.timeline-container {
    position: relative;
    padding-left: 20px;
}

.timeline-container::before {
    content: '';
    position: absolute;
    left: 5px;
    top: 0;
    bottom: 0;
    width: 2px;
    background: linear-gradient(to bottom, #007bff, #6c757d);
}

.timeline-container .card {
    position: relative;
    margin-left: 10px;
}

.timeline-container .card::before {
    content: '';
    position: absolute;
    left: -15px;
    top: 20px;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #007bff;
    border: 2px solid #fff;
}

.timeline-container .card.border-warning::before {
    background: #ffc107;
}

/* Lightbox per immagini post */
.lightbox-thumbnails {
    display: flex;
    gap: 10px;
    padding: 15px;
    overflow-x: auto;
    background: rgba(0, 0, 0, 0.3);
}

.lightbox-thumbnail {
    flex-shrink: 0;
    width: 80px;
    height: 80px;
    cursor: pointer;
    border: 2px solid transparent;
    transition: all 0.3s;
    opacity: 0.7;
}

.lightbox-thumbnail:hover {
    opacity: 1;
    border-color: #fff;
}

.lightbox-thumbnail.active {
    opacity: 1;
    border-color: #007bff;
}

.lightbox-thumbnail img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Stili per i post cards */
.post-card {
    transition: transform 0.2s, box-shadow 0.2s;
    height: 100%;
}

.post-card:hover {
    /* transform: translateY(-3px); */
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
}

/* .post-image-container,
.post-video-container {
    position: relative;
    width: 100%;
    background: #f8f9fa;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 140px;
} */



.post-video {
    width: 100%;
}




/* Badge stati post */
.badge.post-status-draft {
    background-color: #6c757d;
}

.badge.post-status-copy_ready {
    background-color: #ffc107;
    color: #000;
}

.badge.post-status-design_ready {
    background-color: #17a2b8;
}

.badge.post-status-approved {
    background-color: #28a745;
}

.badge.post-status-published {
    background-color: #007bff;
}


/* Scrollbar personalizzata per timeline */
.timeline-container::-webkit-scrollbar {
    height: 8px;
    width: 8px;
}

.timeline-container::-webkit-scrollbar-track {
    background: #f1f1f1;
}

.timeline-container::-webkit-scrollbar-thumb {
    background: #888;
    border-radius: 4px;
}

.timeline-container::-webkit-scrollbar-thumb:hover {
    background: #555;
}

.post-card {
    animation: fadeIn 0.3s ease-out;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .post-card {
        margin-bottom: 1rem;
    }

    .timeline-container {
        padding-left: 10px;
    }

    .lightbox-thumbnail {
        width: 60px;
        height: 60px;
    }
}


/* Card per asset esistenti */
.card-body small.text-truncate {
    font-size: 0.85rem;
    max-width: 100%;
}

/* Migliora l'aspetto delle card asset */
#existingAssets .card {
    height: 100%;
}

#existingAssets .card-body {
    padding: 0.5rem !important;
}

#existingAssets .btn-sm {
    font-size: 0.85rem;
    padding: 0.25rem 0.5rem;
}



/* Quick date selection buttons */
.quick-date {
    font-size: 0.875rem;
    padding: 0.375rem 0.75rem;
    transition: all 0.2s ease;
}


.quick-date.active {
    background-color: var(--bs-primary);
    color: white;
    border-color: var(--bs-primary);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}




/* =================================================================
   3. ASSET MANAGEMENT
   ================================================================= */

/* Asset cards */
.asset-card {
    position: relative;
    transition: all 0.3s ease;
    border-radius: 0.5rem;
    overflow: hidden;
}

/* Animazione eliminazione asset */
[data-asset-id],
[id^="asset-"] {
    transition: opacity 0.3s ease, transform 0.3s ease;
}

[data-asset-id].removing,
[id^="asset-"].removing {
    opacity: 0;
    transform: scale(0.8);
}


/* =================================================================
   4. CHECKLIST STYLES
   ================================================================= */

.checklist-item {
    animation: slideInRight 0.3s ease;
}

@keyframes slideInRight {
    from {
        opacity: 0;
        transform: translateX(-20px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

.checklist-item .input-group-text {
    background-color: #f8f9fa;
    border-right: none;
}

.checklist-item input[type="text"] {
    border-left: none;
    border-right: none;
}

.checklist-item .btn-remove-checklist {
    border-left: none;
}

.checklist-item:hover {
    background-color: rgba(0, 123, 255, 0.03);
}
#addChecklistBtn {
    transition: all 0.2s ease;
}

#addChecklistBtn:hover {
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(0, 123, 255, 0.2);
}


/* =================================================================
   13. TOAST NOTIFICATIONS (optional)
   ================================================================= */

.toast-container {
    position: fixed;
    top: 1rem;
    right: 1rem;
    z-index: 1055;
}

.toast {
    min-width: 250px;
    animation: slideInRight 0.3s ease;
}

.toast.success {
    background-color: #d4edda;
    border-left: 4px solid #28a745;
}

.toast.error {
    background-color: #f8d7da;
    border-left: 4px solid #dc3545;
}

.toast.warning {
    background-color: #fff3cd;
    border-left: 4px solid #ffc107;
}




/* =================================================================
   15. LOADING STATE
   ================================================================= */

.loading-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(255, 255, 255, 0.9);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
}

.loading-spinner {
    width: 3rem;
    height: 3rem;
    border: 0.4rem solid #f3f3f3;
    border-top: 0.4rem solid var(--bs-primary);
    border-radius: 50%;
    animation: spin 1s linear infinite;
}




/* =================================================================
   STILI AGGIUNTIVI PER MODAL CONFERMA ELIMINAZIONE
   ================================================================= */

/* Modal di conferma eliminazione */
#deleteAssetModal .modal-header {
    background: linear-gradient(135deg, #dc3545 0%, #c82333 100%);
    border-bottom: none;
    padding: 1rem 1.5rem;
}

#deleteAssetModal .modal-header .modal-title {
    font-weight: 600;
    font-size: 1.1rem;
    display: flex;
    align-items: center;
}

#deleteAssetModal .modal-header .btn-close-white {
    filter: brightness(0) invert(1);
    opacity: 0.9;
}

#deleteAssetModal .modal-header .btn-close-white:hover {
    opacity: 1;
}

#deleteAssetModal .modal-body {
    padding: 1.5rem;
}

#deleteAssetModal .modal-body p {
    font-size: 1.05rem;
    margin-bottom: 1rem;
}

#deleteAssetModal .alert-warning {
    background-color: #fff3cd;
    border: 1px solid #ffc107;
    border-left-width: 4px;
    font-size: 0.95rem;
    margin-bottom: 0;
}

#deleteAssetModal .modal-footer {
    border-top: 1px solid #dee2e6;
    padding: 1rem 1.5rem;
}

/* Animazione modal */
#deleteAssetModal.fade .modal-dialog {
    transition: transform 0.3s ease-out;
    transform: scale(0.9);
}

#deleteAssetModal.show .modal-dialog {
    transform: scale(1);
}

/* Pulsanti nella modal */
#deleteAssetModal .btn {
    padding: 0.5rem 1rem;
    font-weight: 500;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

#deleteAssetModal .btn-danger {
    background: linear-gradient(135deg, #dc3545 0%, #c82333 100%);
    border: none;
}

#deleteAssetModal .btn-danger:hover {
    background: linear-gradient(135deg, #c82333 0%, #bd2130 100%);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(220, 53, 69, 0.3);
}

#deleteAssetModal .btn-secondary {
    background-color: #6c757d;
    border: none;
}

#deleteAssetModal .btn-secondary:hover {
    background-color: #5a6268;
}

/* Spinner durante eliminazione */
#confirmDeleteBtn:disabled {
    opacity: 0.65;
    cursor: not-allowed;
}

#confirmDeleteBtn .spinner-border-sm {
    width: 1rem;
    height: 1rem;
    border-width: 0.15em;
}


/* ===== CHANNEL ICONS ===== */
.form-check iconify-icon[icon*="instagram"] { color: #E4405F !important; }
.form-check iconify-icon[icon*="facebook"] { color: #1877F2 !important; }
.form-check iconify-icon[icon*="tiktok"] { color: #000000 !important; }
.form-check iconify-icon[icon*="linkedin"] { color: #0A66C2 !important; }
.form-check iconify-icon[icon*="youtube"] { color: #FF0000 !important; }
.form-check iconify-icon[icon*="pinterest"] { color: #E60023 !important; }







/**
 * DIGO Studio - Custom CSS
 * Stili personalizzati per la piattaforma
 */

/* ========================================
   1. SELEZIONE CANALI MIGLIORATA
   ======================================== */

/* Fix per rendere l'intera area del checkbox cliccabile */
.form-check.channel-selector {
    position: relative;
    padding: 10px 15px;
    border: 2px solid #e9ecef;
    border-radius: 8px;
    margin: 5px;
    transition: all 0.3s ease;
    cursor: pointer;
    background: white;
    min-width: 140px;
}

.form-check.channel-selector:hover {
    border-color: #0d6efd;
    background: #f8f9fa;
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}

.form-check.channel-selector input[type="checkbox"] {
    position: absolute;
    opacity: 0;
    cursor: pointer;
    height: 100%;
    width: 100%;
    z-index: 2;
    margin: 0;
}

.form-check.channel-selector.channel-selected {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border-color: #667eea;
}

.form-check.channel-selector.channel-selected .form-check-label {
    color: white !important;
}

.form-check.channel-selector.channel-selected iconify-icon {
    color: white !important;
}

.form-check.channel-selector .form-check-label {
    margin-bottom: 0;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-weight: 500;
    user-select: none;
    position: relative;
    z-index: 1;
    pointer-events: none;
}

.form-check.channel-selector iconify-icon {
    font-size: 1.5rem !important;
    transition: transform 0.3s ease;
}

.form-check.channel-selector:hover iconify-icon {
    transform: scale(1.1);
}

/* Checkmark overlay quando selezionato */
.form-check.channel-selector.channel-selected::after {
    content: '✓';
    position: absolute;
    top: 5px;
    right: 8px;
    background: white;
    color: #667eea;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    font-size: 12px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}

/* Container per i canali */
.channels-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    padding: 10px 0;
}

/* ========================================
   2. STILE DATATABLES PERSONALIZZATO
   ======================================== */

/* Tabella principale */
.dataTable {
    width: 100% !important;
    border-collapse: separate !important;
    border-spacing: 0 8px !important;
}

.dataTable thead th {
    /* background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white !important; */
    font-weight: 600;
    text-transform: uppercase;
    font-size: 0.85rem;
    letter-spacing: 0.5px;
    padding: 12px 15px !important;
    border: none !important;
    position: sticky;
    top: 0;
    z-index: 10;
}

.dataTable thead th:first-child {
    border-radius: 8px 0 0 8px;
}
table.dataTable.table-hover>tbody>tr:hover>*{
    box-shadow: none;
}
.dataTable thead th:last-child {
    border-radius: 0 8px 8px 0;
}
/* .modal-content .table-primary{background-color: #ffffff!important;} */
/* .dataTable tbody tr {
    background: white;
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
    transition: all 0.3s ease;
} */

/* .dataTable tbody tr:hover {
    transform: translateX(5px);
     box-shadow: 0 4px 12px rgba(0,0,0,0.1);
} */
/*
.dataTable tbody td {
    padding: 15px !important;
    vertical-align: middle !important;
    border-top: 1px solid #f0f0f0 !important;
    border-bottom: 1px solid #f0f0f0 !important;
}

.dataTable tbody td:first-child {
    border-left: 3px solid #667eea;
    border-radius: 8px 0 0 8px;
}

.dataTable tbody td:last-child {
    border-radius: 0 8px 8px 0;
} */

/* Search box personalizzato */
.dataTables_filter input {
    border: 2px solid #e9ecef !important;
    border-radius: 25px !important;
    padding: 8px 20px !important;
    transition: all 0.3s ease !important;
    width: 300px !important;
}

.dataTables_filter input:focus {
    border-color: #667eea !important;
    box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1) !important;
    outline: none !important;
}

.btn-action.btn-duplicate {
    background: #6c757d;
    color: white;
}

.btn-action.btn-duplicate:hover {
    background: #5a6268;
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(108, 117, 125, 0.3);
}

.btn-action.btn-approve {
    background: #28a745;
    color: white;
}

.btn-action.btn-approve:hover {
    background: #218838;
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(40, 167, 69, 0.3);
}

/* ========================================
   10. RESPONSIVE
   ======================================== */

@media (max-width: 768px) {
    .channels-grid {
        flex-direction: column;
    }

    .form-check.channel-selector {
        width: 100%;
        margin: 5px 0;
    }

    .dataTables_filter input {
        width: 100% !important;
    }
}

/* ========================================
   11. VERSIONING UI
   ======================================== */




/**
 * DIGO Studio - Plan Assignments Styles
 * Stili per la gestione delle assegnazioni a livello piano
 */

/* Sezione Team Assegnato nel form piano */
.plan-team-assignments {
    background: #f8f9fa;
    border-radius: 8px;
    padding: 1rem;
}

.plan-team-assignments .form-label {
    font-weight: 600;
    color: #495057;
    margin-bottom: 0.5rem;
    font-size: 0.875rem;
}

.plan-team-assignments select.form-select {
    border: 1px solid #dee2e6;
    border-radius: 6px;
    font-size: 0.9rem;
}

.plan-team-assignments select.form-select:focus {
    border-color: #4CAF50;
    box-shadow: 0 0 0 0.2rem rgba(76, 175, 80, 0.25);
}

/* Badge per visualizzazione membri team */
.team-member-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.75rem;
    background: #e9ecef;
    border-radius: 6px;
    font-size: 0.875rem;
    margin-right: 0.5rem;
    margin-bottom: 0.5rem;
}

.team-member-badge .role-label {
    font-weight: 600;
    color: #6c757d;
}

.team-member-badge .user-name {
    color: #212529;
}

.team-member-badge.role-copy {
    background: #e3f2fd;
    border-left: 3px solid #2196F3;
}

.team-member-badge.role-grafica {
    background: #f3e5f5;
    border-left: 3px solid #9C27B0;
}

.team-member-badge.role-smm {
    background: #fff3e0;
    border-left: 3px solid #FF9800;
}

.team-member-badge.role-pm {
    background: #e8f5e9;
    border-left: 3px solid #4CAF50;
}

/* Info box creatore/editor nel post */
.post-author-info {
    background: #f8f9fa;
    border-left: 3px solid #6c757d;
    padding: 0.75rem 1rem;
    border-radius: 4px;
    margin-bottom: 1rem;
}

.post-author-info .author-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
}

.post-author-info .author-row:last-child {
    margin-bottom: 0;
}

.post-author-info .author-label {
    font-weight: 600;
    color: #6c757d;
    min-width: 100px;
}

.post-author-info .author-name {
    color: #212529;
}

.post-author-info .author-date {
    color: #868e96;
    font-size: 0.85rem;
    margin-left: auto;
}

/* Sezione team nel sidebar piano */
.plan-team-sidebar {
    background: #ffffff;
    border: 1px solid #dee2e6;
    border-radius: 8px;
    padding: 1rem;
}

.plan-team-sidebar .team-title {
    font-weight: 600;
    color: #495057;
    margin-bottom: 1rem;
    font-size: 1rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.plan-team-sidebar .team-member-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.5rem 0;
    border-bottom: 1px solid #f1f3f5;
}

.plan-team-sidebar .team-member-item:last-child {
    border-bottom: none;
}

.plan-team-sidebar .member-role {
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    color: #868e96;
    min-width: 60px;
}

.plan-team-sidebar .member-name {
    font-size: 0.875rem;
    color: #212529;
    flex: 1;
}

/* Avatar placeholder per membri team */
.team-member-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-weight: 600;
    font-size: 0.75rem;
}

/* Icone ruolo colorate */
.role-icon {
    width: 24px;
    height: 24px;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.role-icon.copy {
    background: #e3f2fd;
    color: #2196F3;
}

.role-icon.grafica {
    background: #f3e5f5;
    color: #9C27B0;
}

.role-icon.smm {
    background: #fff3e0;
    color: #FF9800;
}

.role-icon.pm {
    background: #e8f5e9;
    color: #4CAF50;
}

/* Empty state per team non assegnato */
.team-empty-state {
    text-align: center;
    padding: 2rem 1rem;
    color: #868e96;
}

.team-empty-state iconify-icon {
    font-size: 3rem;
    opacity: 0.3;
    margin-bottom: 1rem;
}

.team-empty-state p {
    margin: 0;
    font-size: 0.875rem;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .team-member-badge {
        display: flex;
        width: 100%;
        margin-right: 0;
    }

    .post-author-info .author-row {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.25rem;
    }

    .post-author-info .author-date {
        margin-left: 0;
    }
}

/* Tooltip per info aggiuntive */
.team-info-tooltip {
    position: relative;
    cursor: help;
}

.team-info-tooltip:hover::after {
    content: attr(data-tooltip);
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    padding: 0.5rem;
    background: #212529;
    color: white;
    border-radius: 4px;
    font-size: 0.75rem;
    white-space: nowrap;
    z-index: 1000;
    margin-bottom: 0.5rem;
}





/* ============================================
   PIANO EDITORIALE - STATI MENSILI
   ============================================ */

/* Tabella post mensili */
#posts-table-tbody tr {
    transition: background-color 0.2s ease;
}

#posts-table-tbody tr:hover {
    background-color: rgba(var(--bs-primary-rgb), 0.05);
}

.badge.fs-6 {
    padding: 0.5rem 0.75rem;
}


/* Select multiplo destinatari */
#destinatari {
    min-height: 120px;
}

#destinatari option {
    padding: 8px;
    border-bottom: 1px solid #eee;
}

#destinatari option:hover {
    background-color: rgba(var(--bs-primary-rgb), 0.1);
}


.tab-pane.show {
    animation: fadeIn 0.3s ease;
}




/* Stili per il sistema di versioni */
.version-timeline {
    position: relative;
}

.version-timeline::before {
    content: '';
    position: absolute;
    left: 20px;
    top: 0;
    bottom: 0;
    width: 2px;
    background: #34b3e4;
}

.version-item {
    position: relative;
    margin-bottom: 20px;
    padding: 20px;
    background: #fff;
    border: 1px solid #dee2e6;
    border-radius: 8px;
    margin-left: 40px;
    transition: all 0.3s ease;
}

.version-item::before {
    content: '';
    position: absolute;
    left: -26px;
    top: 30px;
    width: 12px;
    height: 12px;
    background: #34b3e4;
    border: 3px solid #fff;
    border-radius: 50%;
    z-index: 1;
}

.version-item.current-version {
    border-color: #28a745;
    background: #f8fff9;
}

.version-item.current-version::before {
    background: #28a745;
    width: 16px;
    height: 16px;
    left: -28px;
}



.version-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;
    padding-bottom: 10px;
    border-bottom: 1px solid #e9ecef;
}

.version-number {
    font-size: 1.1rem;
    color: #495057;
}

.version-meta {
    background: #f8f9fa;
    border-radius: 6px;
    margin-bottom: 15px;
}

.version-meta-item {
    display: inline-flex;
    align-items: center;
    margin-right: 20px;
    margin-bottom: 10px;
    color: #6c757d;
}

.version-meta-item iconify-icon {
    font-size: 18px;
    margin-right: 5px;
}

.version-preview {
    background: #fff;
    padding: 15px;
    border-left: 3px solid #007bff;
    margin-bottom: 15px;
    border-radius: 4px;
}

.text-truncate-3 {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}

.version-actions {
    padding-top: 15px;
    border-top: 1px solid #e9ecef;
}

.change-type-badge {
    padding: 4px 10px;
    border-radius: 20px;
    font-size: 0.85rem;
    font-weight: 500;
    display: inline-flex;
    align-items: center;
}

.change-type-created {
    background: #d4edda;
    color: #155724;
}

.change-type-edited {
    background: #d1ecf1;
    color: #0c5460;
}

.change-type-auto-save {
    background: #fff3cd;
    color: #856404;
}

.change-type-restored {
    background: #f8d7da;
    color: #721c24;
}

.change-type-approved {
    background: #d4edda;
    color: #155724;
}

.change-type-rejected {
    background: #f8d7da;
    color: #721c24;
}

.change-type-before-restore {
    background: #e2e3e5;
    color: #383d41;
}

/* Modal dettagli versione */
#versionDetailsModal .card {
    border: none;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

#versionDetailsModal .card-header {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    border-radius: 8px 8px 0 0;
}

#versionDetailsModal .content-preview {
    white-space: pre-wrap;
    word-break: break-word;
    max-height: 400px;
    overflow-y: auto;
    padding: 15px;
    background: #f8f9fa;
    border-radius: 4px;
}

/* Animazioni */
@keyframes slideIn {
    from {
        opacity: 0;
        transform: translateX(-20px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

.version-item {
    animation: slideIn 0.3s ease-out;
}

/* Responsive */
@media (max-width: 768px) {
    .version-timeline::before {
        left: 10px;
    }

    .version-item {
        margin-left: 25px;
        padding: 15px;
    }

    .version-item::before {
        left: -20px;
    }

    .version-meta-item {
        display: block;
        margin-bottom: 8px;
    }
}



/* Stile per il pulsante di eliminazione versioni */
.version-actions .btn-outline-danger {
    border-color: #dc3545;
    color: #dc3545;
    transition: all 0.3s ease;
}

.version-actions .btn-outline-danger:hover {
    background-color: #dc3545;
    border-color: #dc3545;
    color: #fff;
    transform: translateY(-1px);
    box-shadow: 0 2px 4px rgba(220, 53, 69, 0.3);
}

.version-actions .btn-outline-danger:active {
    transform: translateY(0);
    box-shadow: 0 1px 2px rgba(220, 53, 69, 0.3);
}

/* Animazione per il pulsante elimina quando appare */
.version-actions .btn-outline-danger {
    animation: fadeInScale 0.3s ease;
}

@keyframes fadeInScale {
    from {
        opacity: 0;
        transform: scale(0.9);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

/* Stile speciale per super admin - indicatore visuale opzionale */
.version-item.super-admin-controls {
    border-left: 3px solid #dc3545;
}

/* Tooltip per il pulsante elimina */
.version-actions .btn-outline-danger:hover::after {
    content: "Solo Super Admin";
    position: absolute;
    bottom: -25px;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(0, 0, 0, 0.8);
    color: white;
    padding: 2px 8px;
    border-radius: 3px;
    font-size: 10px;
    white-space: nowrap;
    pointer-events: none;
    opacity: 0;
    animation: tooltipFade 0.3s ease 0.5s forwards;
}

@keyframes tooltipFade {
    to {
        opacity: 1;
    }
}




/* Filtri collassabili */
.filters-card .card-header {
    cursor: pointer;
    user-select: none;
    transition: background-color 0.2s;
}

/* .filters-card .card-header:hover {
    background-color: rgba(0,0,0,0.02);
} */

.filters-card .collapse-icon {
    transition: transform 0.3s ease;
    font-size: 1.2rem;
}

.filters-card .card-header[aria-expanded="true"] .collapse-icon {
    transform: rotate(180deg);
}

/* Badge per filtri attivi */
.active-filters-badge {
    background-color: var(--bs-primary);
    color: white;
    padding: 2px 8px;
    border-radius: 12px;
    font-size: 0.75rem;
    margin-left: 8px;
}



/* ========================================
   POSTS AJAX FILTER SYSTEM STYLES
   ======================================== */

/* Transizione per il container durante il caricamento */
#postsContainer {
    transition: opacity 0.3s ease;
}

/* Stile per lo spinner di caricamento */
#loadingSpinner {
    z-index: 9999;
}

/* Animazione hover per le card dei post */
.post-card {
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}


/* Hover shadow effect */
.hover-shadow-lg:hover {
    box-shadow: 0 1rem 3rem rgba(0,0,0,.175) !important;
}

/* Transizioni smooth */
.transition-all {
    transition: all 0.3s ease;
}

/* Indicatore di filtri attivi */
.filters-active {
    position: relative;
}

.filters-active::after {
    content: '';
    position: absolute;
    top: -5px;
    right: -5px;
    width: 10px;
    height: 10px;
    background-color: #dc3545;
    border-radius: 50%;
    animation: pulse 1.5s infinite;
}



/* Overlay di caricamento per select */
select.loading,
input.loading {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cstyle%3E.spinner_P7sC%7Btransform-origin:center;animation:spinner_svv2 .75s infinite linear%7D@keyframes spinner_svv2%7B100%25%7Btransform:rotate(360deg)%7D%7D%3C/style%3E%3Cpath d='M10.14,1.16a11,11,0,0,0-9,8.92A1.59,1.59,0,0,0,2.46,12,1.52,1.52,0,0,0,4.11,10.7a8,8,0,0,1,6.66-6.61A1.42,1.42,0,0,0,12,2.69h0A1.57,1.57,0,0,0,10.14,1.16Z' class='spinner_P7sC'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 10px center;
    background-size: 20px;
}



/* Badge contatore asset migliorato */
.badge.bg-dark.bg-opacity-75 {
    backdrop-filter: blur(4px);
}

/* Animazione fade-in per nuovi elementi */
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.fade-in {
    animation: fadeIn 0.3s ease forwards;
}

/* Messaggio di errore floating */
.alert.position-fixed {
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
    max-width: 500px;
}

/* Miglioramento visuale per i filtri */
.card-body .form-label {
    font-weight: 500;
    color: #6c757d;
    font-size: 0.875rem;
    margin-bottom: 0.25rem;
}

/* Bottone reset filtri animato */
.btn-secondary[href*="/admin/piani/posts/"]:hover iconify-icon {
    animation: rotate 0.5s ease;
}

@keyframes rotate {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(-360deg);
    }
}

/* Indicatore di caricamento inline per select */
.filter-loading {
    position: relative;
}

.filter-loading::after {
    content: '';
    position: absolute;
    right: 40px;
    top: 50%;
    transform: translateY(-50%);
    width: 16px;
    height: 16px;
    border: 2px solid #f3f3f3;
    border-top: 2px solid #0d6efd;
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    0% { transform: translateY(-50%) rotate(0deg); }
    100% { transform: translateY(-50%) rotate(360deg); }
}


/* Smooth scroll behavior */
html {
    scroll-behavior: smooth;
}


/* Stati di transizione per le card */
.post-card.updating {
    opacity: 0.6;
    pointer-events: none;
}

.post-card.updated {
    animation: highlightUpdate 1s ease;
}

@keyframes highlightUpdate {
    0% {
        background-color: rgba(25, 135, 84, 0.1);
    }
    100% {
        background-color: transparent;
    }
}



.elimina-assets{
    position: absolute;
    top: 10px;
    right: 10px;
}



/* ============================
   DIGO Post Modal - Stili per avviso file non salvati
   ============================ */

/* Indicatore visivo quando ci sono file non salvati */
.modal-content.has-unsaved-files {
    border: 2px solid #ffc107;
    box-shadow: 0 0 15px rgba(255, 193, 7, 0.3);
}

/* Badge di avviso nell'header della modal */
.unsaved-files-badge {
    background-color: #ffc107;
    color: #000;
    padding: 0.25rem 0.5rem;
    border-radius: 0.25rem;
    font-size: 0.75rem;
    font-weight: 600;
    margin-left: 0.5rem;
    animation: pulse 2s infinite;
}



/* Stile per la dropzone durante il drag */
.dropzone.drag-over {
    background-color: #e8f4fd !important;
    border-color: #0066cc !important;
    transition: all 0.3s ease;
}

/* Animazione per i file caricati */
.asset-preview,
.attachment-preview {
    animation: fadeInScale 0.3s ease-in-out;
}

@keyframes fadeInScale {
    0% {
        opacity: 0;
        transform: scale(0.9);
    }
    100% {
        opacity: 1;
        transform: scale(1);
    }
}

/* Stile per il pulsante di eliminazione file temporaneo */
.asset-preview .btn-danger {
    opacity: 0;
    transition: opacity 0.2s ease;
}

.asset-preview:hover .btn-danger {
    opacity: 1;
}

/* Spinner di caricamento migliorato */
.upload-spinner {
    background: rgba(255, 255, 255, 0.9);
    border-radius: 50%;
    padding: 0.5rem;
}

/* Alert personalizzati per messaggi */
.alert-custom {
    min-width: 300px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    animation: slideDown 0.3s ease-out;
}

/* Tooltip per avviso file non salvati */
.unsaved-files-tooltip {
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    background: #333;
    color: white;
    padding: 0.5rem 1rem;
    border-radius: 0.25rem;
    font-size: 0.875rem;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
}

.unsaved-files-tooltip::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: 5px solid transparent;
    border-top-color: #333;
}

.btn-close:hover .unsaved-files-tooltip {
    opacity: 1;
}

/* Evidenziazione area drop file */
.dropzone {
    position: relative;
    overflow: hidden;
}

.dropzone::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(45deg, transparent 30%, rgba(0, 102, 204, 0.05) 50%, transparent 70%);
    transform: translateX(-100%);
    transition: transform 0.6s ease;
    pointer-events: none;
}

.dropzone.drag-over::before {
    transform: translateX(100%);
}

/* Indicatore numero file caricati */
.files-count-indicator {
    position: absolute;
    top: -8px;
    right: -8px;
    background: #dc3545;
    color: white;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    font-weight: bold;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

/* Stile per i quick date buttons */
.quick-date-buttons .btn-group {
    flex-wrap: wrap;
}

.quick-date-buttons .btn {
    transition: all 0.2s ease;
}
/*
.quick-date-buttons .btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
} */

/* Migliora la visualizzazione degli asset caricati */
.asset-preview .card {
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    cursor: move;
}

.asset-preview .card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

/* Indicatore di file temporaneo */
.temp-file-indicator {
    position: absolute;
    top: 5px;
    left: 5px;
    background: #ffc107;
    color: #000;
    padding: 2px 6px;
    border-radius: 3px;
    font-size: 0.65rem;
    font-weight: 600;
    text-transform: uppercase;
}

/* Modal con backdrop personalizzato quando ci sono file non salvati */
.modal-backdrop.has-unsaved-files {
    background-color: rgba(255, 193, 7, 0.1);
}



/* ============================
   DIGO Post Modal - Overlay Personalizzato
   ============================ */

/* Overlay di conferma personalizzato */
.digo-confirm-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.7);
    z-index: 2000; /* Sopra la modal principale */
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.digo-confirm-overlay.show {
    opacity: 1;
}

.digo-confirm-box {
    background: white;
    border-radius: 0.5rem;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
    max-width: 500px;
    width: 90%;
    transform: scale(0.9);
    transition: transform 0.3s ease;
}

.digo-confirm-overlay.show .digo-confirm-box {
    transform: scale(1);
}

.digo-confirm-header {
    padding: 1.25rem;
    border-bottom: 1px solid #ffc107;
    background: #fff3cd;
    border-radius: 0.5rem 0.5rem 0 0;
    display: flex;
    align-items: center;
}

.digo-confirm-header h5 {
    color: #856404;
    margin: 0;
    font-weight: 600;
}

.digo-confirm-body {
    padding: 1.5rem;
}

.digo-confirm-footer {
    padding: 1rem 1.25rem;
    border-top: 1px solid #dee2e6;
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    background: #f8f9fa;
    border-radius: 0 0 0.5rem 0.5rem;
}

.digo-confirm-footer button {
    min-width: 140px;
}

/* Toast Container */
#toastContainer {
    z-index: 9999 !important;
}

#toastContainer .toast {
    min-width: 300px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    animation: slideInRight 0.3s ease-out;
}

@keyframes slideInRight {
    from {
        transform: translateX(100%);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}



/* Toast successo */
.toast.bg-success {
      background-color: #d4edda;
    border-left: 4px solid #28a745;
}

/* Toast errore */
.toast.bg-danger {
     background-color: #f8d7da;
    border-left: 4px solid #dc3545;
}

/* Indicatore file non salvati */
.modal-content.has-unsaved-files {
    border: 2px solid #ffc107;
    box-shadow: 0 0 20px rgba(255, 193, 7, 0.3);
}

/* Badge animato */
#unsaved-files-indicator {
    animation: pulse 2s infinite;
    vertical-align: middle;
}

@keyframes pulse {
    0% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.05);
    }
    100% {
        transform: scale(1);
    }
}



@keyframes move {
    0% {
        background-position: 0 0;
    }
    100% {
        background-position: 20px 20px;
    }
}

/* Badge TEMP */
.badge.bg-warning {
    font-size: 0.65rem;
    padding: 0.15rem 0.3rem;
    letter-spacing: 0.5px;
    font-weight: 600;
}

/* Bottone elimina hover */
.asset-preview .btn-danger {
    opacity: 0;
    transition: opacity 0.2s ease;
}

.asset-preview:hover .btn-danger {
    opacity: 1;
}

/* Card hover effect */
.asset-preview .card {
    transition: all 0.2s ease;
    border: 1px solid #dee2e6;
}

.asset-preview .card:hover {
    border-color: #0066cc;
    box-shadow: 0 4px 12px rgba(0, 102, 204, 0.15);
}

/* Quick date buttons */
.quick-date-buttons .btn {
    position: relative;
    overflow: hidden;
}

.quick-date-buttons .btn::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.5);
    transform: translate(-50%, -50%);
    transition: width 0.6s, height 0.6s;
}

.quick-date-buttons .btn:active::before {
    width: 300px;
    height: 300px;
}

/* Contatore caratteri */
#charCount {
    transition: color 0.3s ease;
    font-weight: 600;
}

#charCount.text-warning {
    animation: blink 2s ease-in-out infinite;
}

#charCount.text-danger {
    animation: blink 1s ease-in-out infinite;
}

@keyframes blink {
    0%, 100% {
        opacity: 1;
    }
    50% {
        opacity: 0.6;
    }
}

/* Lista allegati */
.list-group-item {
    transition: background-color 0.2s ease;
}

.list-group-item:hover {
    background-color: #f8f9fa;
}

/* Spinner migliorato */
.spinner-border {
    background: white;
    border-radius: 50%;
    padding: 3px;
}

/* Mobile responsive */
@media (max-width: 576px) {
    .digo-confirm-box {
        width: 95%;
        margin: 1rem;
    }

    .digo-confirm-footer {
        flex-direction: column;
    }

    .digo-confirm-footer button {
        width: 100%;
    }

    #toastContainer {
        top: auto !important;
        bottom: 0 !important;
        right: 0 !important;
        left: 0 !important;
        padding: 1rem !important;
    }

    #toastContainer .toast {
        width: 100%;
        margin-bottom: 0.5rem;
    }

    .quick-date-buttons .btn-group {
        flex-direction: column;
        width: 100%;
    }

    .quick-date-buttons .btn {
        width: 100%;
        border-radius: 0.25rem !important;
        margin-bottom: 0.25rem;
    }
}

/* Dark mode (opzionale) */
@media (prefers-color-scheme: dark) {
    .digo-confirm-box {
        background: #1C1C27;
        color: #f8f9fa;
    }

    .digo-confirm-header {
        background: #1C1C27;
        border-bottom-color: rgba(255, 255, 255, 0.2);
    }

    .digo-confirm-header h5 {
        color: rgb(var(--bs-warning-rgb));
    }

    .digo-confirm-body {
        color: #dee2e6;
    }

    .digo-confirm-footer {
        background: #1C1C27;
        border-top-color: rgba(255, 255, 255, 0.2);
    }

    .list-group-item:hover {
        background-color: #343a40;
    }
}

/* Fix per evitare scroll quando overlay è visibile */
body.overlay-open {
    overflow: hidden;
}

/* Animazione di shake per errori */
@keyframes shake {
    0%, 100% {
        transform: translateX(0);
    }
    10%, 30%, 50%, 70%, 90% {
        transform: translateX(-5px);
    }
    20%, 40%, 60%, 80% {
        transform: translateX(5px);
    }
}

.shake {
    animation: shake 0.5s ease-in-out;
}


/* ========================================
   POST VERSIONS MODAL - STYLES
   ======================================== */

/* Modal Nesting Support - Z-Index Management */
.modal {
    z-index: 1050;
}

.modal-backdrop {
    z-index: 1040;
}

/* Quando ci sono modal multiple, ogni backdrop successivo deve essere sopra la modal precedente */
.modal-backdrop.show ~ .modal-backdrop {
    z-index: 1060;
}

/* Assicura che le modal annidate siano sempre sopra */
.modal.show ~ .modal {
    z-index: 1070;
}

/* Previeni problemi di scroll con modal annidate */
body.modal-open {
    overflow: hidden;
}

/* Version Details Cards */
.version-details-container .detail-card {
    margin-bottom: 1.5rem;
}


/* Version Compare Table */
.version-compare-table {
    font-size: 0.9rem;
}

.version-compare-table thead th {
    position: sticky;
    top: 0;
    z-index: 10;
    background-color: #f8f9fa;
}

.version-compare-table tbody tr.table-warning {
    background-color: #fff3cd !important;
}

.version-compare-table tbody tr.table-warning td {
    border-left: 3px solid #ffc107;
}

/* DataTable Customizations */
#versionsTable.dataTable {
    font-size: 0.875rem;
}

#versionsTable.dataTable thead th {
    background-color: #f8f9fa;
    font-weight: 600;
    color: #495057;
    border-bottom: 2px solid #dee2e6;
    padding: 0.75rem 0.5rem;
    vertical-align: middle;
}

#versionsTable.dataTable tbody td {
    padding: 0.75rem 0.5rem;
    vertical-align: middle;
}

#versionsTable.dataTable tbody tr:hover {
    background-color: #f8f9fa;
}

/* Version Checkbox */
.version-checkbox {
    cursor: pointer;
    width: 18px;
    height: 18px;
}

#selectAllVersions {
    cursor: pointer;
    width: 18px;
    height: 18px;
}

/* Badge Styles in Table */
#versionsTable .badge {
    font-size: 0.75rem;
    padding: 0.35em 0.65em;
    font-weight: 500;
}

/* Action Buttons */
#versionsTable .btn-group-sm .btn {
    padding: 0.25rem 0.5rem;
    font-size: 0.875rem;
}

#versionsTable .btn-group-sm .btn iconify-icon {
    font-size: 1.1rem;
    vertical-align: middle;
}

/* Current Version Badge */
#versionsTable .badge.bg-success {
    animation: pulse 2s infinite;
}



/* Alert in Modal */
#postVersionsModal .alert {
    border-radius: 0.5rem;
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}

/* Compare Button */
#compareSelectedBtn:disabled {
    cursor: not-allowed;
    opacity: 0.5;
}

#compareSelectedBtn:not(:disabled) {
    animation: highlightButton 2s infinite;
}

@keyframes highlightButton {
    0%, 100% {
        box-shadow: 0 0 0 0 rgba(13, 110, 253, 0.4);
    }
    50% {
        box-shadow: 0 0 0 4px rgba(13, 110, 253, 0.2);
    }
}

/* Modal Size Adjustments */
.modal-fullscreen .modal-body {
    overflow-y: auto;
    max-height: calc(100vh - 120px);
}

#versionDetailsModal .modal-body {
    max-height: calc(100vh - 200px);
    overflow-y: auto;
}

#versionDiffModal .modal-body {
    max-height: calc(100vh - 160px);
    overflow-y: auto;
}

/* Loading State */
#versionsLoader {
    min-height: 300px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

/* No Versions State */
#noVersions {
    min-height: 300px;
}

#noVersions iconify-icon {
    display: block;
    margin: 0 auto 1rem;
    opacity: 0.5;
}

/* Responsive Adjustments */
@media (max-width: 1400px) {
    #versionsTable.dataTable {
        font-size: 0.8rem;
    }

    #versionsTable.dataTable tbody td,
    #versionsTable.dataTable thead th {
        padding: 0.5rem 0.3rem;
    }
}

@media (max-width: 768px) {
    .modal-fullscreen .modal-dialog {
        margin: 0;
        width: 100%;
        max-width: none;
    }

    #versionsTable.dataTable {
        font-size: 0.75rem;
    }

    #versionsTable .btn-group-sm .btn {
        padding: 0.2rem 0.4rem;
    }

    .version-details-container .detail-card {
        margin-bottom: 1rem;
    }

    .version-compare-table {
        font-size: 0.8rem;
    }
}

/* Text Truncation Utilities */
.text-truncate-2-lines {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Scrollbar Styling for Copy Content */
.copy-content::-webkit-scrollbar,
.compare-text::-webkit-scrollbar {
    width: 8px;
}

.copy-content::-webkit-scrollbar-track,
.compare-text::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 4px;
}

.copy-content::-webkit-scrollbar-thumb,
.compare-text::-webkit-scrollbar-thumb {
    background: #888;
    border-radius: 4px;
}

.copy-content::-webkit-scrollbar-thumb:hover,
.compare-text::-webkit-scrollbar-thumb:hover {
    background: #555;
}

/* Info Box Styling */
#currentPostInfo {
    border-left: 4px solid #0d6efd;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}

/* Detail Cards Hover Effect */
.version-details-container .detail-card {
    transition: transform 0.2s, box-shadow 0.2s;
}


/* Channel Pills */
.channel-pill {
    display: inline-block;
    padding: 0.2rem 0.5rem;
    margin: 0.1rem;
    border-radius: 1rem;
    font-size: 0.75rem;
    background-color: #e9ecef;
    color: #495057;
}

/* Empty State Styling */
.text-muted.fst-italic {
    opacity: 0.6;
}

/* Print Styles */
@media print {
    .modal-header,
    .modal-footer,
    #versionsTable_wrapper .dataTables_filter,
    #versionsTable_wrapper .dataTables_length,
    #versionsTable_wrapper .dataTables_paginate,
    .btn-group {
        display: none !important;
    }

    #versionsTable tbody tr.table-warning {
        background-color: #ffeb99 !important;
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }
}

/* Dark Mode Support (Optional)
@media (prefers-color-scheme: dark) {
    .detail-card {
        background-color: #1a1d20;
        border-color: #495057;
    }

    .copy-content,
    .compare-text {
        background-color: #212529;
        color: #e9ecef;
        border-color: #495057;
    }

    .version-compare-table tbody tr.table-warning {
        background-color: #5a4620 !important;
    }
} */


/* ========================================
   POST VERSIONS MODAL - STYLES
   ======================================== */

/* Toast Notifications */
.toast-container {
    z-index: 9999 !important;
}

.toast {
    min-width: 350px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    border-radius: 8px;
    font-size: 0.95rem;
}

.toast.showing {
    animation: slideInRight 0.3s ease-out;
}

.toast.hide {
    animation: slideOutRight 0.3s ease-out;
}

@keyframes slideInRight {
    from {
        transform: translateX(100%);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

@keyframes slideOutRight {
    from {
        transform: translateX(0);
        opacity: 1;
    }
    to {
        transform: translateX(100%);
        opacity: 0;
    }
}

.toast iconify-icon {
    font-size: 1.2rem;
    vertical-align: middle;
}

.toast .btn-close-white {
    filter: brightness(1.2);
}

/* Modal di conferma personalizzata */
#confirmModal .modal-header {
    border-bottom: 2px solid rgba(0,0,0,0.1);
}

#confirmModal .modal-body {
    padding: 1.5rem;
    font-size: 1rem;
}

#confirmModal .modal-footer {
    border-top: 2px solid rgba(0,0,0,0.1);
}

/* Modal Nesting Support - Z-Index Management */
.modal {
    z-index: 1050;
}

.modal-backdrop {
    z-index: 1040;
}

/* Quando ci sono modal multiple, ogni backdrop successivo deve essere sopra la modal precedente */
.modal-backdrop.show ~ .modal-backdrop {
    z-index: 1060;
}

/* Assicura che le modal annidate siano sempre sopra */
.modal.show ~ .modal {
    z-index: 1070;
}

/* Previeni problemi di scroll con modal annidate */
body.modal-open {
    overflow: hidden;
}


/* Version Compare Table */
.version-compare-table {
    font-size: 0.9rem;
}

.version-compare-table thead th {
    position: sticky;
    top: 0;
    z-index: 10;
    background-color: #f8f9fa;
}


.version-compare-table tbody tr.table-warning {
    background-color: #fff3cd !important;
}

.version-compare-table tbody tr.table-warning td {
    border-left: 3px solid #ffc107;
}

/* DataTable Customizations */
#versionsTable.dataTable {
    font-size: 0.875rem;
}

#versionsTable.dataTable thead th {
    background-color: #f8f9fa;
    font-weight: 600;
    color: #495057;
    border-bottom: 2px solid #dee2e6;
    padding: 0.75rem 0.5rem;
    vertical-align: middle;
}

#versionsTable.dataTable tbody td {
    padding: 0.75rem 0.5rem;
    vertical-align: middle;
}

#versionsTable.dataTable tbody tr:hover {
    background-color: #f8f9fa;
}

/* Version Checkbox */
.version-checkbox {
    cursor: pointer;
    width: 18px;
    height: 18px;
}

#selectAllVersions {
    cursor: pointer;
    width: 18px;
    height: 18px;
}

/* Badge Styles in Table */
#versionsTable .badge {
    font-size: 0.75rem;
    padding: 0.35em 0.65em;
    font-weight: 500;
}

/* Action Buttons */
#versionsTable .btn-group-sm .btn {
    padding: 0.25rem 0.5rem;
    font-size: 0.875rem;
}

#versionsTable .btn-group-sm .btn iconify-icon {
    font-size: 1.1rem;
    vertical-align: middle;
}

/* Current Version Badge */
#versionsTable .badge.bg-success {
    animation: pulse 2s infinite;
}


/* Alert in Modal */
#postVersionsModal .alert {
    border-radius: 0.5rem;
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}

/* Compare Button */
#compareSelectedBtn:disabled {
    cursor: not-allowed;
    opacity: 0.5;
}

#compareSelectedBtn:not(:disabled) {
    animation: highlightButton 2s infinite;
}

@keyframes highlightButton {
    0%, 100% {
        box-shadow: 0 0 0 0 rgba(13, 110, 253, 0.4);
    }
    50% {
        box-shadow: 0 0 0 4px rgba(13, 110, 253, 0.2);
    }
}

/* Modal Size Adjustments */
.modal-fullscreen .modal-body {
    overflow-y: auto;
    max-height: calc(100vh - 120px);
}

#versionDetailsModal .modal-body {
    max-height: calc(100vh - 200px);
    overflow-y: auto;
}

#versionDiffModal .modal-body {
    max-height: calc(100vh - 160px);
    overflow-y: auto;
}

/* Loading State */
#versionsLoader {
    min-height: 300px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

/* No Versions State */
#noVersions {
    min-height: 300px;
}

#noVersions iconify-icon {
    display: block;
    margin: 0 auto 1rem;
    opacity: 0.5;
}

/* Responsive Adjustments */
@media (max-width: 1400px) {
    #versionsTable.dataTable {
        font-size: 0.8rem;
    }

    #versionsTable.dataTable tbody td,
    #versionsTable.dataTable thead th {
        padding: 0.5rem 0.3rem;
    }
}

@media (max-width: 768px) {
    .modal-fullscreen .modal-dialog {
        margin: 0;
        width: 100%;
        max-width: none;
    }

    #versionsTable.dataTable {
        font-size: 0.75rem;
    }

    #versionsTable .btn-group-sm .btn {
        padding: 0.2rem 0.4rem;
    }

    .version-details-container .detail-card {
        margin-bottom: 1rem;
    }

    .version-compare-table {
        font-size: 0.8rem;
    }
}

/* Text Truncation Utilities */
.text-truncate-2-lines {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Scrollbar Styling for Copy Content */
.copy-content::-webkit-scrollbar,
.compare-text::-webkit-scrollbar {
    width: 8px;
}

.copy-content::-webkit-scrollbar-track,
.compare-text::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 4px;
}

.copy-content::-webkit-scrollbar-thumb,
.compare-text::-webkit-scrollbar-thumb {
    background: #888;
    border-radius: 4px;
}

.copy-content::-webkit-scrollbar-thumb:hover,
.compare-text::-webkit-scrollbar-thumb:hover {
    background: #555;
}


/* Channel Pills */
.channel-pill {
    display: inline-block;
    padding: 0.2rem 0.5rem;
    margin: 0.1rem;
    border-radius: 1rem;
    font-size: 0.75rem;
    background-color: #e9ecef;
    color: #495057;
}


/* Empty State Styling */
.text-muted.fst-italic {
    opacity: 0.6;
}



.bg-secondary .badge{background-color: #ffffff!important;color:rgba(var(--bs-secondary-rgb));}
.bg-primary .badge{background-color: #ffffff!important;color:rgba(var(--bs-primary-rgb));}
.bg-info .badge{background-color: #ffffff!important;color:rgba(var(--bs-info-rgb));}

/* ===== AI ASSISTANT STYLES (Bootstrap version) ===== */

#aiLimitsDisplay {
    font-size: 0.85rem;
    padding: 0.25rem 0.75rem;
    background: #f8f9fa;
    border-radius: 0.25rem;
    display: inline-block;
    border: 1px solid #dee2e6;
}

#aiLimitsDisplay.text-danger {
    background: #f8d7da;
    border-color: #f5c2c7;
    color: #842029 !important;
}

.ai-variant {
    background-color: #f8f9fa;
    transition: all 0.2s;
    cursor: pointer;
}

.ai-variant:hover {
    background-color: #e9ecef;
    border-color: #0d6efd !important;
}

.ai-variant.border-primary {
    background-color: #e7f3ff;
}

.ai-variant-content {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-size: 0.95rem;
    line-height: 1.6;
    color: #333;
    max-height: 300px;
    overflow-y: auto;
}

#aiLoader {
    z-index: 99999 !important;
}

#aiModal{
        z-index: 99999 !important;

}




/* Tabella invii */
#inviiTable tbody tr:hover {
    background-color: rgba(0, 123, 255, 0.05);
}

#inviiTable .btn-group-sm .btn {
    padding: 0.25rem 0.4rem;
}

/* Modal dettagli invio */
#modalDettagliInvio .modal-body {
    max-height: 70vh;
    overflow-y: auto;
}

#postsInvioTable {
    font-size: 0.875rem;
}

#postsInvioTable tbody tr:hover {
    background-color: rgba(0, 123, 255, 0.05);
}

/* Statistiche invio */
.stats-box {
    padding: 1rem;
    border-radius: 0.5rem;
    background-color: #f8f9fa;
}

.stats-box .h3 {
    font-weight: 600;
}


/* Responsive */
@media (max-width: 768px) {
    #inviiTable th:nth-child(3),
    #inviiTable td:nth-child(3),
    #inviiTable th:nth-child(4),
    #inviiTable td:nth-child(4) {
        display: none;
    }

    #modalDettagliInvio .modal-dialog {
        margin: 0.5rem;
    }

    #postsInvioTable th:nth-child(4),
    #postsInvioTable td:nth-child(4),
    #postsInvioTable th:nth-child(6),
    #postsInvioTable td:nth-child(6) {
        display: none;
    }
}

/* Animazione loading */
#dettagliInvioContent .spinner-border {
    width: 3rem;
    height: 3rem;
}




.flatpickr-calendar {
    box-shadow: 0 4px 20px rgba(0,0,0,0.15);
    border-radius: 8px;
}
.flatpickr-day.selected, .flatpickr-day.startRange, .flatpickr-day.endRange {
    background: var(--bs-primary, #0d6efd);
    border-color: var(--bs-primary, #0d6efd);
}
.flatpickr-day.inRange {
    background: rgba(var(--bs-primary-rgb, 13, 110, 253), 0.1);
    border-color: transparent;
}
.flatpickr-months .flatpickr-month {
    color: white;
    border-radius: 8px 8px 0 0;
}
.flatpickr-current-month .flatpickr-monthDropdown-months,
.flatpickr-current-month input.cur-year {
    color: white;
}
.flatpickr-weekdays {
    background: var(--bs-primary, #0d6efd);
}
.flatpickr-weekday {
    color: rgba(255,255,255,0.8);
}
.flatpickr-months .flatpickr-prev-month,
.flatpickr-months .flatpickr-next-month {
    color: white;
    fill: white;
}
.flatpickr-months .flatpickr-prev-month:hover,
.flatpickr-months .flatpickr-next-month:hover {
    color: rgba(255,255,255,0.8);
}
.flatpickr-months .flatpickr-prev-month:hover svg,
.flatpickr-months .flatpickr-next-month:hover svg {
    fill: rgba(255,255,255,0.8);
}



  /* Colonna controllo responsive - larghezza minima */
#notificationsTable th:first-child,
#notificationsTable td:first-child {
    width: 30px !important;
    min-width: 30px !important;
    max-width: 30px !important;
}

/* Colonna avatar */
#notificationsTable th:nth-child(2),
#notificationsTable td:nth-child(2) {
    width: 50px !important;
    min-width: 50px !important;
}


/* Migliora la visualizzazione delle righe espanse */
table.dataTable.dtr-inline.collapsed > tbody > tr > td.dtr-control,
table.dataTable.dtr-inline.collapsed > tbody > tr > th.dtr-control {
    cursor: pointer;
}

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

/* Responsive child rows styling */
table.dataTable > tbody > tr.child ul.dtr-details {
    display: block;
    list-style-type: none;
    margin: 0;
    padding: 0;
}

table.dataTable > tbody > tr.child ul.dtr-details > li {
    border-bottom: 1px solid #efefef;
    padding: 0.5em 0;
}

table.dataTable > tbody > tr.child span.dtr-title {
    display: inline-block;
    min-width: 75px;
    font-weight: bold;
}

/* Riga non letta */
tr.table-light.fw-medium {
    background-color: #f0f7ff !important;
}

.avatar-title {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Assicura che la colonna avatar sia sempre visibile */
#notificationsTable td:first-child,
#notificationsTable th:first-child {
    min-width: 50px;
}

.highlight {
     overflow: visible;
}
.card.highlight>.highlight-toolbar{min-height: 43px;border-radius: 0.6rem 0.6rem 0 0;}
.card.highlight>.highlight-toolbar.bg-secondary>small,.card.highlight>.highlight-toolbar.bg-primary>small,.card.highlight>.highlight-toolbar.bg-info>small{color: #ffffff;}

.choices__list--multiple .choices__item{border-radius: 0.2rem;}

#messaggioIcona{font-size: 50px;}


/* ============================
   NOTE CLIENTE - POST MODAL
   ============================ */

.client-notes-list {
    max-height: 400px;
    overflow-y: auto;
}

.client-note-item {
    padding: 12px;
    border-radius: 8px;
    margin-bottom: 10px;
    transition: all 0.3s ease;
}

.client-note-item:last-child {
    margin-bottom: 0;
}

.client-note-item.note-unread {
    background-color: #fff3cd;
    border-left: 4px solid #ffc107;
}

.client-note-item.note-read {
    background-color: #f8f9fa;
    border-left: 4px solid #28a745;
}

.client-note-item .note-checkbox {
    min-width: 40px;
    display: flex;
    align-items: flex-start;
    justify-content: center;
}

.client-note-item .note-content {
    flex: 1;
}

.client-note-item .note-header {
    font-size: 0.85rem;
}

.client-note-item .note-author {
    color: #495057;
}

.client-note-item .note-date {
    font-size: 0.75rem;
}



.client-note-item .note-read-info {
    padding-top: 8px;
    border-top: 1px dashed #dee2e6;
    margin-top: 8px;
}

.client-note-item.note-unread .note-text {
    font-weight: 500;
}

/* Animazione quando la nota viene segnata come letta */
.client-note-item.note-transitioning {
    animation: noteReadAnimation 0.5s ease;
}

@keyframes noteReadAnimation {
    0% {
        background-color: #fff3cd;
        transform: scale(1);
    }
    50% {
        background-color: #d4edda;
        transform: scale(1.02);
    }
    100% {
        background-color: #f8f9fa;
        transform: scale(1);
    }
}

/* Scrollbar personalizzata per la lista note */
.client-notes-list::-webkit-scrollbar {
    width: 6px;
}

.client-notes-list::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 3px;
}

.client-notes-list::-webkit-scrollbar-thumb {
    background: #c1c1c1;
    border-radius: 3px;
}

.client-notes-list::-webkit-scrollbar-thumb:hover {
    background: #a1a1a1;
}

/* Badge contatore note */
#unreadNotesCount {
    transition: all 0.3s ease;
}

/* Hover effect sul bottone segna come letta */
.mark-note-read-btn {
    transition: all 0.2s ease;
}

.mark-note-read-btn:hover {
    transform: scale(1.1);
}

/* Stile per il bottone "segna tutte come lette" */
#markAllNotesReadBtn {
    transition: all 0.2s ease;
}

#markAllNotesReadBtn:hover:not(:disabled) {
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(40, 167, 69, 0.3);
}

/* ============================
   FLATPICKR CUSTOM STYLES
   ============================ */

/* Flatpickr dentro il modal - fix z-index */
.flatpickr-modal {
    z-index: 1060 !important;
}

.flatpickr-calendar {
    font-family: inherit;
    border-radius: 8px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
    border: 1px solid #dee2e6;
}

.flatpickr-calendar.static {
    position: absolute;
}

/* Header del calendario */
.flatpickr-months {
    background: rgb(52, 179, 228);
    border-radius: 8px 8px 0 0;
    padding: 8px 0;
}

.flatpickr-months .flatpickr-month {
    color: #fff;
    fill: #fff;
}

.flatpickr-current-month {
    font-weight: 600;
    font-size: 1.1rem;
}

.flatpickr-current-month .flatpickr-monthDropdown-months,
.flatpickr-current-month input.cur-year {
    color: #fff;
    font-weight: 600;
}

.flatpickr-months .flatpickr-prev-month,
.flatpickr-months .flatpickr-next-month {
    fill: #fff;
    color: #fff;
}

.flatpickr-months .flatpickr-prev-month:hover,
.flatpickr-months .flatpickr-next-month:hover {
    background: rgba(255, 255, 255, 0.2);
    border-radius: 50%;
}

/* Giorni della settimana */
.flatpickr-weekdays {
    background: #f8f9fa;
}

.flatpickr-weekday {
    color: #6c757d;
    font-weight: 600;
    font-size: 0.85rem;
}

/* Giorni del mese */
.flatpickr-day {
    border-radius: 6px;
    font-weight: 500;
    transition: all 0.2s ease;
}

.flatpickr-day:hover {
    background: #e9ecef;
    border-color: #e9ecef;
}

.flatpickr-day.today {
    border-color: #667eea;
    color: #667eea;
    font-weight: 700;
}

.flatpickr-day.today:hover {
    background: #667eea;
    color: #fff;
}

.flatpickr-day.selected,
.flatpickr-day.selected:hover {
    background: rgb(52, 179, 228);
    border-color: rgb(52, 179, 228);
    color: #fff;
}

.flatpickr-day.disabled,
.flatpickr-day.disabled:hover {
    color: #ced4da;
    background: transparent;
}

.flatpickr-day.prevMonthDay,
.flatpickr-day.nextMonthDay {
    color: #ced4da;
}

/* Time picker */
.flatpickr-time {
    background: #f8f9fa;
    border-top: 1px solid #dee2e6;
    border-radius: 0 0 8px 8px;
}

.flatpickr-time input {
    font-weight: 600;
    font-size: 1.1rem;
}

.flatpickr-time .numInputWrapper:hover {
    background: #e9ecef;
}

.flatpickr-time .flatpickr-am-pm {
    font-weight: 600;
}

/* Input group con Flatpickr */
.input-group .flatpickr-datetime,
.input-group .flatpickr-datetime + .form-control {
    border-radius: 0 0.35rem 0.35rem 0;
}

.input-group > .input-group-text:first-child {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}

.input-group .clear-datetime-btn {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}

/* Quick date buttons (opzionale) */
.quick-date-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-top: 8px;
}

.quick-date-buttons .btn {
    font-size: 0.75rem;
    padding: 2px 8px;
}

/* Responsive */
@media (max-width: 576px) {
    .flatpickr-calendar {
        width: 100% !important;
    }

    .flatpickr-innerContainer {
        overflow-x: auto;
    }
}


.flatpickr-wrapper{
    width: calc(100% - 48px);
}

.status_post_badge{position: absolute;top: 10px;left: 10px;}



/* =====================================================
   DIGO STUDIO - TICKET MODULE STYLES
   ===================================================== */

/* -----------------------------------------------------
   Statistiche Dashboard
   ----------------------------------------------------- */
.ticket-stats-card {
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.ticket-stats-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.1) !important;
}

/* -----------------------------------------------------
   Priority Badges
   ----------------------------------------------------- */
.badge-priority-low {
    background-color: #6c757d !important;
}

.badge-priority-medium {
    background-color: #0dcaf0 !important;
}

.badge-priority-high {
    background-color: #ffc107 !important;
    color: #000 !important;
}

.badge-priority-urgent {
    background-color: #dc3545 !important;
    animation: pulse-urgent 2s infinite;
}

@keyframes pulse-urgent {
    0%, 100% {
        opacity: 1;
    }
    50% {
        opacity: 0.7;
    }
}

/* -----------------------------------------------------
   Status Badges
   ----------------------------------------------------- */
.badge-status-new {
    background-color: #0d6efd !important;
}

.badge-status-in_progress {
    background-color: #0dcaf0 !important;
}

.badge-status-waiting_client {
    background-color: #ffc107 !important;
    color: #000 !important;
}

.badge-status-waiting_internal {
    background-color: #6c757d !important;
}

.badge-status-resolved {
    background-color: #198754 !important;
}

.badge-status-closed {
    background-color: #212529 !important;
}

.badge-status-cancelled {
    background-color: #f8f9fa !important;
    color: #6c757d !important;
    border: 1px solid #dee2e6;
}

/* -----------------------------------------------------
   Table Styles
   ----------------------------------------------------- */
#ticketsTable tbody tr {
    transition: background-color 0.15s ease;
}

#ticketsTable tbody tr:hover {
    background-color: rgba(13, 110, 253, 0.05) !important;
}

/* Riga con escalation */
#ticketsTable tbody tr.table-warning {
    background-color: rgba(255, 193, 7, 0.1) !important;
    border-left: 3px solid #ffc107;
}

/* Riga con SLA violato */
#ticketsTable tbody tr.table-danger-subtle {
    background-color: rgba(220, 53, 69, 0.08) !important;
    border-left: 3px solid #dc3545;
}

/* Ticket overdue */
.ticket-overdue {
    background-color: rgba(220, 53, 69, 0.1) !important;
}

/* -----------------------------------------------------
   Ticket Number Link
   ----------------------------------------------------- */
.ticket-number-link {
    font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
    font-size: 0.85rem;
    font-weight: 600;
    text-decoration: none;
    transition: color 0.15s ease;
}

.ticket-number-link:hover {
    text-decoration: underline;
}

/* -----------------------------------------------------
   Labels/Tags
   ----------------------------------------------------- */
.ticket-labels {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
}

.ticket-label {
    font-size: 0.7rem;
    padding: 0.15rem 0.4rem;
    border-radius: 3px;
}

/* -----------------------------------------------------
   Due Date Styles
   ----------------------------------------------------- */
.due-date-overdue {
    color: #dc3545 !important;
    font-weight: 600;
}

.due-date-today {
    color: #ffc107 !important;
    font-weight: 600;
}

.due-date-soon {
    color: #fd7e14 !important;
}

/* -----------------------------------------------------
   Assignees
   ----------------------------------------------------- */
.assignee-avatar {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background-color: #e9ecef;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    font-weight: 600;
    color: #495057;
    margin-right: -8px;
    border: 2px solid #fff;
}

.assignee-avatar:last-child {
    margin-right: 0;
}

.assignee-avatar.primary {
    border-color: #0d6efd;
}

.unassigned-badge {
    color: #dc3545;
    font-size: 0.85rem;
}

/* -----------------------------------------------------
   Quick Actions
   ----------------------------------------------------- */
.btn-soft-primary {
    background-color: rgba(13, 110, 253, 0.1);
    color: #0d6efd;
    border: none;
}

.btn-soft-primary:hover {
    background-color: #0d6efd;
    color: #fff;
}

.btn-soft-info {
    background-color: rgba(13, 202, 240, 0.1);
    color: #0dcaf0;
    border: none;
}

.btn-soft-info:hover {
    background-color: #0dcaf0;
    color: #000;
}

.btn-soft-success {
    background-color: rgba(25, 135, 84, 0.1);
    color: #198754;
    border: none;
}

.btn-soft-success:hover {
    background-color: #198754;
    color: #fff;
}

.btn-soft-danger {
    background-color: rgba(220, 53, 69, 0.1);
    color: #dc3545;
    border: none;
}

.btn-soft-danger:hover {
    background-color: #dc3545;
    color: #fff;
}

.btn-soft-warning {
    background-color: rgba(255, 193, 7, 0.1);
    color: #997404;
    border: none;
}

.btn-soft-warning:hover {
    background-color: #ffc107;
    color: #000;
}

/* -----------------------------------------------------
   Filter Card
   ----------------------------------------------------- */
.card-header.cursor-pointer {
    cursor: pointer;
}

.card-header.cursor-pointer:hover {
    background-color: rgba(0, 0, 0, 0.02);
}

/* -----------------------------------------------------
   Empty State
   ----------------------------------------------------- */
.empty-state {
    padding: 3rem 1rem;
}

.empty-state i {
    font-size: 4rem;
    color: #dee2e6;
    margin-bottom: 1rem;
}

/* -----------------------------------------------------
   SLA Indicators
   ----------------------------------------------------- */
.sla-indicator {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    font-size: 0.75rem;
    padding: 0.2rem 0.5rem;
    border-radius: 3px;
}

.sla-ok {
    background-color: rgba(25, 135, 84, 0.1);
    color: #198754;
}

.sla-warning {
    background-color: rgba(255, 193, 7, 0.2);
    color: #997404;
}

.sla-breached {
    background-color: rgba(220, 53, 69, 0.1);
    color: #dc3545;
}

/* -----------------------------------------------------
   Ticket Detail View
   ----------------------------------------------------- */
.ticket-header {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: #fff;
    padding: 1.5rem;
    border-radius: 0.5rem 0.5rem 0 0;
}

.ticket-header h2 {
    margin: 0;
    font-weight: 600;
}

.ticket-header .ticket-number {
    font-family: monospace;
    opacity: 0.9;
}



.ticket-meta-item {
    display: flex;
    flex-direction: row;
}

.ticket-meta-item label {
    font-size: 0.75rem;
    text-transform: uppercase;
    color: #6c757d;
    margin-bottom: 0.25rem;
}

/* -----------------------------------------------------
   Comments Thread
   ----------------------------------------------------- */
.comment-thread {
    border-left: 2px solid #dee2e6;
    margin-left: 1rem;
    padding-left: 1.5rem;
}

.comment-item {
    position: relative;
    margin-bottom: 1.5rem;
    padding: 1rem;
    background-color: #fff;
    border-radius: 0.5rem;
    border: 1px solid #dee2e6;
}

.comment-item::before {
    content: '';
    position: absolute;
    left: -1.5rem;
    top: 1.25rem;
    width: 0.75rem;
    height: 0.75rem;
    background-color: #dee2e6;
    border-radius: 50%;
    margin-left: -0.375rem;
}

.comment-item.comment-internal {
    background-color: #fff3cd;
    border-color: #ffc107;
}

.comment-item.comment-internal::before {
    background-color: #ffc107;
}

.comment-item.comment-resolution {
    background-color: #d1e7dd;
    border-color: #198754;
}

.comment-item.comment-resolution::before {
    background-color: #198754;
}

.comment-item.comment-system {
    background-color: #e9ecef;
    border-color: #6c757d;
    font-style: italic;
}

.comment-item.comment-system::before {
    background-color: #6c757d;
}

.comment-author {
    font-weight: 600;
    color: #212529;
}

.comment-date {
    font-size: 0.8rem;
    color: #6c757d;
}

.comment-visibility {
    font-size: 0.7rem;
    padding: 0.1rem 0.4rem;
    border-radius: 3px;
}

/* -----------------------------------------------------
   Time Tracking
   ----------------------------------------------------- */
.time-log-entry {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.5rem;
    border-bottom: 1px solid #f0f0f0;
}

.time-log-entry:last-child {
    border-bottom: none;
}

.time-amount {
    font-family: monospace;
    font-weight: 600;
    font-size: 1.1rem;
}

.time-amount.billable {
    color: #198754;
}

.time-amount.non-billable {
    color: #6c757d;
}

/* -----------------------------------------------------
   Checklist
   ----------------------------------------------------- */
.checklist-item {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 0.5rem 0;
    border-bottom: 1px dashed #f0f0f0;
}

.checklist-item:last-child {
    border-bottom: none;
}

.checklist-item.completed {
    text-decoration: line-through;
    color: #6c757d;
}

.checklist-checkbox {
    width: 1.2rem;
    height: 1.2rem;
    flex-shrink: 0;
    margin-top: 0.1rem;
}

/* -----------------------------------------------------
   Responsive Adjustments
   ----------------------------------------------------- */
@media (max-width: 768px) {
    #ticketsTable th:nth-child(3),
    #ticketsTable td:nth-child(3),
    #ticketsTable th:nth-child(6),
    #ticketsTable td:nth-child(6),
    #ticketsTable th:nth-child(7),
    #ticketsTable td:nth-child(7) {
        display: none;
    }

    .ticket-stats-card {
        margin-bottom: 0.5rem;
    }

    .ticket-meta {
        flex-direction: column;
        gap: 0.75rem;
    }
}

@media (max-width: 576px) {
    .page-title-box {
        flex-direction: column;
        gap: 1rem;
    }

    .page-title-box .d-flex {
        width: 100%;
    }

    .page-title-box .btn {
        width: 100%;
    }
}

/* -----------------------------------------------------
   Print Styles
   ----------------------------------------------------- */
@media print {
    .card-header .btn-group,
    .btn-quick-status,
    .delete-ticket,
    .nav-tabs,
    #filterCollapse,
    .page-title-box .btn {
        display: none !important;
    }

    .card {
        border: 1px solid #000;
        box-shadow: none !important;
    }

    .badge {
        border: 1px solid #000;
        background-color: #fff !important;
        color: #000 !important;
    }
}


/* -----------------------------------------------------
   Relation Links
   ----------------------------------------------------- */
.ticket-relation {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem;
    background-color: #f8f9fa;
    border-radius: 0.25rem;
    margin-bottom: 0.5rem;
}

.ticket-relation .relation-type {
    font-size: 0.75rem;
    text-transform: uppercase;
    color: #6c757d;
}

.ticket-relation .relation-link {
    font-weight: 600;
}

.relation-duplicate {
    border-left: 3px solid #ffc107;
}

.relation-blocks {
    border-left: 3px solid #dc3545;
}

.relation-blocked-by {
    border-left: 3px solid #fd7e14;
}

.relation-related {
    border-left: 3px solid #0dcaf0;
}

.relation-parent,
.relation-child {
    border-left: 3px solid #198754;
}


/* Stile per il container degli assegnatari con pills/tags */
.assignees-tags-container {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    padding: 8px;
    border: 1px solid #dee2e6;
    border-radius: 6px;
    min-height: 42px;
    background: #fff;
}

.selected-assignees {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.assignee-tag {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    background: #e7f1ff;
    border: 1px solid #b6d4fe;
    border-radius: 0.2rem;
    font-size: 13px;
    color: #0d6efd;
    animation: fadeIn 0.2s ease;
}

.assignee-tag .remove-assignee {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: transparent;
    border: none;
    color: #0d6efd;
    cursor: pointer;
    padding: 0;
    font-size: 16px;
    line-height: 1;
    transition: all 0.2s;
}

.assignee-tag .remove-assignee:hover {
    background: #0d6efd;
    color: #fff;
}

#assigneesDropdown {
    max-height: 250px;
    overflow-y: auto;
}

#assigneesDropdown .dropdown-item {
    padding: 8px 16px;
    cursor: pointer;
}

#assigneesDropdown .dropdown-item:hover {
    background: #e7f1ff;
}

#assigneesDropdown .dropdown-item.already-selected {
    opacity: 0.5;
    pointer-events: none;
    text-decoration: line-through;
}

@keyframes fadeIn {
    from { opacity: 0; transform: scale(0.9); }
    to { opacity: 1; transform: scale(1); }
}


/* =================================================
   DROPZONE TICKETS - CSS
   Aggiungi questo al tuo custom.css
   ================================================= */

/* Preview file caricati */
.ticket-uploaded-files {
    margin-top: 15px;
}

.ticket-file-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 12px;
    background-color: #fff;
    border: 1px solid #dee2e6;
    border-radius: 6px;
    margin-bottom: 8px;
    transition: all 0.2s ease;
}

.ticket-file-item:hover {
    background-color: #f8f9fa;
    border-color: #adb5bd;
}

.ticket-file-item .file-info {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 1;
    min-width: 0;
}

.ticket-file-item .file-icon {
    font-size: 1.5rem;
    color: #6c757d;
    flex-shrink: 0;
}

.ticket-file-item .file-icon.image-icon { color: #198754; }
.ticket-file-item .file-icon.pdf-icon { color: #dc3545; }
.ticket-file-item .file-icon.doc-icon { color: #0d6efd; }
.ticket-file-item .file-icon.xls-icon { color: #198754; }
.ticket-file-item .file-icon.zip-icon { color: #ffc107; }

.ticket-file-item .file-details {
    flex: 1;
    min-width: 0;
}

.ticket-file-item .file-name {
    font-weight: 500;
    color: #212529;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: block;
}

.ticket-file-item .file-size {
    font-size: 0.8rem;
    color: #6c757d;
}

.ticket-file-item .file-status {
    display: flex;
    align-items: center;
    gap: 8px;
}

.ticket-file-item .btn-remove-file {
    padding: 4px 8px;
    font-size: 0.85rem;
}

/* Progress bar inline */
.ticket-file-item .upload-progress {
    width: 100px;
    height: 6px;
    background-color: #e9ecef;
    border-radius: 3px;
    overflow: hidden;
}

.ticket-file-item .upload-progress .progress-bar {
    height: 100%;
    background-color: #0d6efd;
    transition: width 0.3s ease;
}

/* Badge TEMP */
.ticket-file-item .badge-temp {
    font-size: 0.7rem;
    padding: 2px 6px;
}

/* Stato uploading */
.ticket-file-item.uploading {
    opacity: 0.7;
}

.ticket-file-item.uploading .btn-remove-file {
    display: none;
}

/* Stato errore */
.ticket-file-item.error {
    border-color: #dc3545;
    background-color: #fff5f5;
}

.ticket-file-item.error .file-name {
    color: #dc3545;
}

/* Preview immagini in thumbnail */
.ticket-file-item .file-thumbnail {
    width: 40px;
    height: 40px;
    object-fit: cover;
    border-radius: 4px;
    flex-shrink: 0;
}


/* ========================================
   TICKET VIEW - CHAT STYLE
   ======================================== */

.ticket-view-container {
    display: flex;
    height: calc(100vh - 200px);
    border-radius: 12px;
    box-shadow: 0 2px 12px rgba(0,0,0,0.08);
}

/* Sidebar sinistra - Lista ticket (opzionale) */
.ticket-sidebar-left {
    width: 320px;
    border-right: 1px solid #e9ecef;
    display: flex;
    flex-direction: column;
    background: #f8f9fa;
}

.ticket-sidebar-header {
    padding: 16px;
    border-bottom: 1px solid #e9ecef;
    background: #fff;
}

.ticket-sidebar-search {
    position: relative;
}

.ticket-sidebar-search input {
    width: 100%;
    padding: 10px 12px 10px 38px;
    border: 1px solid #dee2e6;
    border-radius: 8px;
    font-size: 14px;
}

.ticket-sidebar-search .search-icon {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: #6c757d;
}

.ticket-list {
    flex: 1;
    overflow-y: auto;
}

.ticket-list-item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 14px 16px;
    border-bottom: 1px solid #e9ecef;
    cursor: pointer;
    transition: background 0.2s;
}

.ticket-list-item:hover {
    background: #e9ecef;
}

.ticket-list-item.active {
    background: var(--bs-primary);
    color: #fff;
}

.ticket-list-item.active .ticket-list-preview,
.ticket-list-item.active .ticket-list-time {
    color: rgba(255,255,255,0.8);
}

.ticket-list-avatar {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--bs-primary);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: 14px;
    flex-shrink: 0;
}

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

.ticket-list-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 4px;
}

.ticket-list-name {
    font-weight: 600;
    font-size: 14px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ticket-list-time {
    font-size: 12px;
    color: #6c757d;
    white-space: nowrap;
}

.ticket-list-preview {
    font-size: 13px;
    color: #6c757d;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Area principale - Conversazione */
.ticket-main {
    border-radius: 15px;
    flex: 1;
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.ticket-main-header {
    border-radius: 15px 0 0 0;
    padding: 16px 20px;
    border-bottom: 1px solid #e9ecef;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: #fff;
}

.ticket-header-info {
    display: flex;
    align-items: center;
    gap: 16px;
}

.ticket-header-avatar {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: var(--bs-primary);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: 16px;
}

.ticket-header-details h5 {
    margin: 0;
    font-size: 15px;
    font-weight: 600;
}

.ticket-header-details .ticket-meta {
    font-size: 13px;
    color: #6c757d;
    margin-top: 2px;
}

.ticket-header-actions {
    display: flex;
    align-items: center;
    gap: 8px;
}

/* Area messaggi */
.ticket-messages {
    flex: 1;
    overflow-y: auto;
    padding: 20px;
    background: #f8f9fa;
}

.message-item {
    display: flex;
    gap: 12px;
    margin-bottom: 20px;
    max-width: 85%;
}

.message-item.outgoing {
    margin-left: auto;
    flex-direction: row-reverse;
}

.message-item.system {
    max-width: 100%;
    justify-content: center;
}

.message-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--bs-primary);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: 13px;
    flex-shrink: 0;
}

.message-avatar img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
}

.message-avatar.client {
    background: var(--bs-body-color);
}

.message-avatar.system {
    background: #6c757d;
    font-size: 16px;
}

.message-content {
    flex: 1;
}

.message-bubble {
    background: #fff;
    border-radius: 15px;
    padding: 12px 16px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.08);
    position: relative;
}

.message-item.outgoing .message-bubble {
    background: var(--bs-primary);
    color: #fff;
}

/* .message-item.internal .message-bubble {
    background: #fff3cd;
    border: 1px dashed #ffc107;
} */

.message-item.system .message-bubble {
    background: transparent;
    box-shadow: none;
    padding: 8px 16px;
    text-align: center;
}

.message-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 6px;
}

.message-author {
    font-weight: 600;
    font-size: 13px;
}

.message-item.outgoing .message-author {
    color: rgba(255,255,255,0.9);
}

.message-time {
    font-size: 11px;
    color: #6c757d;
}

.message-item.outgoing .message-time {
    color: rgba(255,255,255,0.7);
}

.message-text {
    font-size: 14px;
    line-height: 1.5;
    word-wrap: break-word;
}

.message-text p {
    margin: 0;
}

.message-text p + p {
    margin-top: 8px;
}

.message-badge {
    display: inline-block;
    font-size: 10px;
    padding: 2px 6px;
    border-radius: 4px;
    margin-left: 8px;
    vertical-align: middle;
}

.message-badge.internal {
    background: #ffc107;
    color: #000;
}

.message-badge.first-response {
    background: #28a745;
    color: #fff;
}

/* Allegati nel messaggio */
.message-attachments {
    margin-top: 12px;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.message-attachment-image {
    width: 120px;
    height: 80px;
    border-radius: 8px;
    object-fit: cover;
    cursor: pointer;
    transition: transform 0.2s;
}

.message-attachment-image:hover {
    transform: scale(1.05);
}

.message-attachment-file {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    background: rgba(0,0,0,0.05);
    border-radius: 8px;
    font-size: 13px;
    text-decoration: none;
    color: inherit;
    transition: background 0.2s;
}

.message-item.outgoing .message-attachment-file {
    background: rgba(255,255,255,0.2);
}

.message-attachment-file:hover {
    background: rgba(0,0,0,0.1);
}

.message-attachment-file .file-icon {
    font-size: 20px;
}

/* Ticket info iniziale */
.ticket-description-card {
    background: #fff;
    padding: 20px;
}

.ticket-description-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 16px;
}

.ticket-description-title {
    font-size: 18px;
    font-weight: 600;
    margin: 0;
}

.ticket-description-date {
    font-size: 13px;
    color: #6c757d;
}

.ticket-description-body {
    font-size: 14px;
    line-height: 1.6;
    color: #495057;
}

.ticket-description-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid #e9ecef;
}

.ticket-meta-item {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: #6c757d;
}

/* Area input messaggio */
.ticket-input-area {
    border-radius: 0 0 0 15px;
    padding: 16px 20px;
    border-top: 1px solid #e9ecef;
    background: #fff;
}

.ticket-input-container {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.ticket-input-options {
    display: flex;
    align-items: center;
    gap: 12px;
}

.ticket-input-options .form-check {
    margin: 0;
}

.ticket-input-wrapper {
    display: flex;
        gap: 0;
    align-items: flex-end;
    flex-direction: column;
}

.ticket-input-wrapper textarea {
    flex: 1;
    border: 1px solid #dee2e6;
    border-radius: 12px;
    padding: 12px 16px;
    font-size: 14px;
    resize: none;
    max-height: 120px;
}

.ticket-input-wrapper textarea:focus {
    outline: none;
    border-color: var(--bs-primary);
    box-shadow: 0 0 0 3px rgba(var(--bs-primary-rgb), 0.1);
}

.ticket-input-actions {
    margin-top: 10px;
    display: flex;
    gap: 8px;
}

.ticket-input-actions .btn {
    padding: 10px 16px;
}

/* Sidebar destra - Info ticket */
.ticket-sidebar-right {
    width: 420px;
    border-left: 1px solid #e9ecef;
    background: #fff;
    overflow-y: auto;
        border-radius: 0 0 15px 0;

}

.ticket-sidebar-section {
    border-radius: 0 15px 0 0;
    padding: 24px 16px;
    border-bottom: 1px solid #e9ecef;
}

.ticket-sidebar-section-title {
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    color: #6c757d;
    margin-bottom: 12px;
    display: none;
}

.ticket-info-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 3px 0;
}

.ticket-info-label {
    font-size: 13px;
    color: #6c757d;
}

.ticket-info-value {
    font-size: 13px;
    font-weight: 500;
}

/* Assignees */
.assignee-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 0;
}


.assignee-info {
    flex: 1;
}

.assignee-name {
    font-size: 13px;
    font-weight: 500;
}

.assignee-role {
    font-size: 11px;
    color: #6c757d;
}

/* Labels */
.ticket-labels {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.ticket-label {
    padding: 4px 10px;
    border-radius: 12px;
    font-size: 12px;
    font-weight: 500;
}

/* Activity log */
.activity-item {
    display: flex;
    gap: 10px;
    padding: 8px 0;
    font-size: 13px;
}

.activity-icon {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: #e9ecef;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    flex-shrink: 0;
}

.activity-content {
    flex: 1;
}

.activity-time {
    font-size: 11px;
    color: #6c757d;
    margin-top: 2px;
}

/* SLA Bar */
.sla-bar {
    margin-top: 8px;
}

.sla-progress {
    height: 6px;
    border-radius: 3px;
    background: #e9ecef;
    overflow: hidden;
}

.sla-progress-bar {
    height: 100%;
    border-radius: 3px;
    transition: width 0.3s;
}

.sla-progress-bar.on-track { background: #28a745; }
.sla-progress-bar.warning { background: #ffc107; }
.sla-progress-bar.breached { background: #dc3545; }

.sla-text {
    font-size: 11px;
    color: #6c757d;
    margin-top: 4px;
}

/* Responsive */
@media (max-width: 1200px) {
    .ticket-sidebar-left {
        display: none;
    }
}

@media (max-width: 992px) {
    .ticket-sidebar-right {
        display: none;
    }

    .ticket-view-container {
        height: auto;
        min-height: calc(100vh - 140px);
    }
}

@media (max-width: 768px) {
    .message-item {
        max-width: 95%;
    }

    .ticket-main-header {
        flex-direction: column;
        gap: 12px;
        align-items: flex-start;
    }
}


/* Stile Dropzone per allegati */
.attachment-dropzone {
    border: 2px dashed #dee2e6;
    border-radius: 12px;
    padding: 40px 20px;
    text-align: center;
    cursor: pointer;
    transition: all 0.3s ease;
    background: #f8f9fa;
}

.attachment-dropzone:hover,
.attachment-dropzone.drag-over {
    border-color: var(--bs-primary);
    background: #e8f4ff;
}

.attachment-dropzone .dropzone-icon {
    font-size: 48px;
    color: #6c757d;
    margin-bottom: 5px;
}

.attachment-dropzone:hover .dropzone-icon {
    color: var(--bs-primary);
}

.attachment-dropzone .dropzone-text {
    font-size: 16px;
    font-weight: 500;
    color: #495057;
    margin-bottom: 4px;
}

.attachment-dropzone .dropzone-subtext {
    font-size: 13px;
    color: #6c757d;
    margin: 0;
}

/* Preview lista file */
.attachment-preview-list {
    max-height: 200px;
    overflow-y: auto;
}

.attachment-preview-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 12px;
    background: #fff;
    border: 1px solid #dee2e6;
    border-radius: 8px;
    margin-bottom: 8px;
}

.attachment-preview-item .file-info {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 1;
    min-width: 0;
}

.attachment-preview-item .file-icon {
    font-size: 24px;
    color: #6c757d;
}

.attachment-preview-item .file-name {
    font-size: 14px;
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.attachment-preview-item .file-size {
    font-size: 12px;
    color: #6c757d;
}

.attachment-preview-item .btn-remove {
    padding: 4px 8px;
}

.attachment-preview-item.uploading {
    opacity: 0.6;
}

.attachment-preview-item .upload-progress {
    width: 60px;
    height: 4px;
    background: #e9ecef;
    border-radius: 2px;
    overflow: hidden;
}

.attachment-preview-item .upload-progress-bar {
    height: 100%;
    background: var(--bs-primary);
    transition: width 0.3s;
}


.attachment-dropzone { border: 2px dashed #dee2e6; border-radius: 12px; padding: 40px 20px; text-align: center; cursor: pointer; transition: all 0.3s ease; background: #f8f9fa; }
.attachment-dropzone:hover, .attachment-dropzone.drag-over { border-color: var(--bs-primary); background: #e8f4ff; }
.attachment-dropzone .dropzone-icon { font-size: 48px; color: #6c757d; margin-bottom: 12px; display: block; }
.attachment-dropzone:hover .dropzone-icon { color: var(--bs-primary); }
.attachment-dropzone .dropzone-text { font-size: 16px; font-weight: 500; color: #495057; margin-bottom: 4px; }
.attachment-dropzone .dropzone-subtext { font-size: 13px; color: #6c757d; margin: 0; }
.attachment-preview-list { max-height: 200px; overflow-y: auto; }
.attachment-preview-item { display: flex; align-items: center; justify-content: space-between; padding: 10px 12px; background: #fff; border: 1px solid #dee2e6; border-radius: 8px; margin-bottom: 8px; }
.attachment-preview-item .file-info { display: flex; align-items: center; gap: 10px; flex: 1; min-width: 0; }
.attachment-preview-item .file-icon { font-size: 24px; color: #6c757d; }
.attachment-preview-item .file-name { font-size: 14px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.attachment-preview-item .file-size { font-size: 12px; color: #6c757d; }



/* Ticket Reply Options */
.ticket-input-options {
    padding: 8px 12px;
    background: #f8f9fa;
    border-bottom: 1px solid #e9ecef;
    border-radius: 8px 8px 0 0;
}

.ticket-input-options .form-check {
    margin-bottom: 0;
}

.ticket-input-options .form-check-label {
    color: #6c757d;
    font-size: 13px;
    display: flex;
    align-items: center;
    gap: 4px;
}

.ticket-input-options .form-check-label i {
    font-size: 14px;
}

#sendEmailContainer {
    transition: opacity 0.2s ease;
}

/* Stile textarea quando è nota interna */
#replyContent[style*="background-color: rgb(255, 243, 205)"] {
    border-color: #ffc107;
}








/* ========================================
   ALLEGATI INLINE AL MESSAGGIO - TICKET
   ======================================== */

.inline-attachments-preview {
    background: #f8f9fa;
    border: 1px solid #e9ecef;
    border-radius: 8px;
    padding: 12px;
    margin-bottom: 12px;
}

.inline-attachments-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
    font-size: 13px;
    color: #6c757d;
}

.inline-attachments-header>span {
    display: flex;
    align-items: center;
    gap: 6px;
}

.inline-attachments-list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.inline-attachment-item {
    display: flex;
    align-items: center;
    gap: 8px;
    background: #fff;
    border: 1px solid #dee2e6;
    border-radius: 6px;
    padding: 6px 10px;
    font-size: 12px;
    max-width: 200px;
    transition: border-color 0.2s, box-shadow 0.2s;
}

.inline-attachment-item:hover {
    border-color: #adb5bd;
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}

.inline-attachment-thumb {
    width: 32px;
    height: 32px;
    border-radius: 4px;
    background-size: cover;
    background-position: center;
    background-color: #e9ecef;
    flex-shrink: 0;
}

.inline-attachment-icon {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #e9ecef;
    border-radius: 4px;
    flex-shrink: 0;
}

.inline-attachment-icon iconify-icon {
    font-size: 18px;
    color: #6c757d;
}

.inline-attachment-info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.inline-attachment-name {
    font-weight: 500;
    color: #333;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.inline-attachment-size {
    color: #999;
    font-size: 11px;
}

.inline-attachment-remove {
    background: none;
    border: none;
    color: #dc3545;
    padding: 2px;
    cursor: pointer;
    opacity: 0.6;
    transition: opacity 0.2s;
    flex-shrink: 0;
    font-size: 16px;
    line-height: 1;
}

.inline-attachment-remove:hover {
    opacity: 1;
}

/* Badge contatore allegati sul pulsante */
.attachment-count {
    position: absolute;
    top: -6px;
    right: -6px;
    background: #0d6efd;
    color: white;
    font-size: 10px;
    font-weight: 600;
    min-width: 18px;
    height: 18px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 4px;
}

/* Posiziona il pulsante allegati come relative per il badge */
#attachFileBtn {
    position: relative;
}

/* Responsive per mobile */
@media (max-width: 576px) {
    .inline-attachment-item {
        max-width: 100%;
        flex: 1 1 calc(50% - 4px);
    }

    .inline-attachments-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }
}

/* Stato loading durante upload */
.inline-attachment-item.uploading {
    opacity: 0.6;
    pointer-events: none;
}

.inline-attachment-item.uploading::after {
    content: '';
    position: absolute;
    top: 50%;
    right: 10px;
    width: 16px;
    height: 16px;
    border: 2px solid #dee2e6;
    border-top-color: #0d6efd;
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}


/* ========================================
   LIGHTBOX
   ======================================== */
.ticket-lightbox {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 9999;
    display: none;
}

.ticket-lightbox.active {
    display: block;
}

.lightbox-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.9);
    cursor: pointer;
}


.lightbox-close {
    position: absolute;
    top: 15px;
    right: 15px;
    width: 44px;
    height: 44px;
    border: none;
    background: rgba(255,255,255,0.1);
    color: white;
    font-size: 28px;
    cursor: pointer;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s;
    z-index: 10;
}

.lightbox-close:hover {
    background: rgba(255,255,255,0.2);
}


.lightbox-prev {
    left: 20px;
}

.lightbox-next {
    right: 20px;
}

.lightbox-content {
    max-width: 90%;
    max-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
}

.lightbox-content img {
    max-width: 100%;
    max-height: calc(100vh - 160px);
    object-fit: contain;
    border-radius: 4px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.5);
}

.lightbox-footer {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 15px 20px;
    background: rgba(0,0,0,0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
    color: white;
}

.lightbox-title {
    font-size: 14px;
    max-width: 50%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.lightbox-counter {
    font-size: 13px;
    color: rgba(255,255,255,0.7);
}

.lightbox-download {
    color: white;
    font-size: 20px;
    padding: 5px;
    transition: opacity 0.2s;
}

.lightbox-download:hover {
    color: white;
    opacity: 0.8;
}

/* ========================================
   SIDEBAR MEDIA GRID
   ======================================== */
.sidebar-media-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 6px;
}

.sidebar-media-item {
    position: relative;
    aspect-ratio: 1;
    border-radius: 6px;
    overflow: hidden;
    cursor: pointer;
}

.sidebar-media-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.2s;
}

.sidebar-media-item:hover img {
    transform: scale(1.05);
}

.sidebar-media-more {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.6);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    font-weight: 600;
}

/* ========================================
   GALLERIA MODAL
   ======================================== */
.gallery-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 16px;
}

.gallery-grid-images {
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
}

.gallery-item {
    background: #f8f9fa;
    border: 1px solid #e9ecef;
    border-radius: 8px;
    overflow: hidden;
    transition: box-shadow 0.2s, transform 0.2s;
}

.gallery-item:hover {
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
    transform: translateY(-2px);
}

.gallery-item-image {
    position: relative;
    aspect-ratio: 1;
    display: block;
    overflow: hidden;
    cursor: pointer;
}

.gallery-item-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s;
}

.gallery-item-image:hover img {
    transform: scale(1.05);
}

.gallery-item-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.4);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.2s;
    color: white;
    font-size: 32px;
}

.gallery-item-image:hover .gallery-item-overlay {
    opacity: 1;
}

.gallery-item-file {
    aspect-ratio: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
    color: #6c757d;
    text-decoration: none;
    gap: 8px;
    transition: background 0.2s;
}

.gallery-item-file:hover {
    background: linear-gradient(135deg, #e9ecef 0%, #dee2e6 100%);
    color: #495057;
}

.gallery-file-icon {
    font-size: 48px;
}

.gallery-file-ext {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    background: #dee2e6;
    padding: 2px 8px;
    border-radius: 4px;
}

.gallery-item-info {
    padding: 10px 12px;
    border-top: 1px solid #e9ecef;
}

.gallery-item-name {
    font-size: 13px;
    font-weight: 500;
    color: #333;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-bottom: 4px;
}

.gallery-item-meta {
    font-size: 11px;
    color: #999;
    display: flex;
    gap: 6px;
}

.gallery-item-actions {
    padding: 8px 12px;
    border-top: 1px solid #e9ecef;
    display: flex;
    gap: 6px;
}

/* Solo immagini grid */
.gallery-image-item {
    position: relative;
    aspect-ratio: 1;
    border-radius: 8px;
    overflow: hidden;
    cursor: pointer;
    display: block;
}

.gallery-image-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s;
}

.gallery-image-item:hover img {
    transform: scale(1.05);
}

.gallery-image-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.4);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.2s;
    color: white;
    font-size: 32px;
}

.gallery-image-item:hover .gallery-image-overlay {
    opacity: 1;
}

/* ========================================
   RESPONSIVE
   ======================================== */
@media (max-width: 768px) {


    .gallery-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .sidebar-media-grid {
        grid-template-columns: repeat(4, 1fr);
    }
}



/* ========================================
   TOOLBAR FORMATTAZIONE COMMENTI
   ======================================== */
.comment-toolbar {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 6px 10px;
    background: #f8f9fa;
    border: 1px solid #dee2e6;
    border-bottom: none;
    border-radius: 6px 6px 0 0;
}

.toolbar-btn {
    width: 32px;
    height: 32px;
    border: none;
    background: transparent;
    color: #6c757d;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.15s;
    font-size: 16px;
}

.toolbar-btn:hover {
    background: #e9ecef;
    color: #333;
}

.toolbar-btn:active {
    background: #dee2e6;
}

.toolbar-separator {
    width: 1px;
    height: 20px;
    background: #dee2e6;
    margin: 0 4px;
}

/* Textarea con toolbar */
.ticket-input-wrapper .form-control {
    border-radius: 0 0 6px 6px;
}

/* ========================================
   MESSAGE HEADER CON AZIONI
   ======================================== */
.message-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 10px;
}

.message-header-right {
    display: flex;
    align-items: center;
    gap: 8px;
}

.message-actions-dropdown .btn-link {
    font-size: 18px;
    line-height: 1;
    opacity: 0;
    transition: opacity 0.2s;
}
.outgoing .message-actions-dropdown .btn-link {
    color: #ffffff!important;
}
.message-bubble:hover .message-actions-dropdown .btn-link {
    opacity: 1;
}

/* .message-actions-dropdown .btn-link:hover {
    color: #6c757d;
} */

.message-actions-dropdown .dropdown-menu {
    min-width: 140px;
    font-size: 13px;
}

/* ========================================
   LISTE NEI COMMENTI
   ======================================== */
.message-text ul.comment-list,
.message-text ol.comment-list {
    margin: 8px 0;
    padding-left: 20px;
}

.message-text ul.comment-list li,
.message-text ol.comment-list li {
    margin-bottom: 4px;
}

.message-text a {
    color: #0d6efd;
    text-decoration: underline;
}

.message-text a:hover {
    color: #0a58ca;
}

/* ========================================
   DELETE COMMENT MODAL
   ======================================== */
.delete-icon-wrapper {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: #fee2e2;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto;
}

.delete-comment-preview {
    max-height: 80px;
    overflow-y: auto;
    font-style: italic;
}
.ql-container{height: 130px;}
.quill-editor-wrapper{width: 100%;min-height: 130px;border: 1px solid #e9ecef;    border-radius: 8px;}



/* Collapse icon rotation per filtri */
.collapse-icon {
    transition: transform 0.3s ease;
}

[aria-expanded="true"] .collapse-icon {
    transform: rotate(180deg);
}

/* Highlight toolbar clickable */
.highlight-toolbar a {
    display: flex;
    align-items: center;
}

.highlight-toolbar a:hover {
    color: var(--bs-primary) !important;
}


@media (min-width: 600px) {
    .dropdown-lg {
        width: 370px;
    }
}

.ql-bubble{border-radius: 0 0 0.35rem 0.35rem;border-top:0!important;border:0!important;}



/* ============================================
   SCHEDA CLIENTE - SERVIZI
   Aggiungi questo al tuo custom.css
   ============================================ */

/* ========================================
   SERVICE CARDS (Griglia servizi)
   ======================================== */

.service-card {
    border: 2px solid #e5e7eb;
    border-radius: 12px;
    padding: 1rem;
    cursor: pointer;
    transition: all 0.3s ease;
    background: #f9fafb;
    user-select: none;
}

.service-card:hover {
    border-color: var(--service-color, #6B7280);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.service-card.active {
    border-color: var(--service-color, #10B981);
    background: linear-gradient(135deg,
        color-mix(in srgb, var(--service-color, #10B981) 10%, white) 0%,
        white 100%);
    box-shadow: 0 4px 12px color-mix(in srgb, var(--service-color, #10B981) 20%, transparent);
}

.service-card-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    position: relative;
}

.service-icon {
    width: 50px;
    height: 50px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 0.5rem;
    background: #f3f4f6;
    transition: all 0.3s ease;
}

.service-card.active .service-icon {
    background: var(--service-color, #10B981);
    color: white;
}

.service-icon i {
    font-size: 24px;
    color: #6B7280;
    transition: color 0.3s ease;
}

.service-card.active .service-icon i {
    color: white;
}

.service-name {
    font-weight: 500;
    font-size: 0.875rem;
    color: #374151;
}

.service-status {
    position: absolute;
    top: -8px;
    right: -8px;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: #e5e7eb;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transform: scale(0.5);
    transition: all 0.3s ease;
}

.service-card.active .service-status {
    opacity: 1;
    transform: scale(1);
    background: var(--service-color, #10B981);
}

.service-status i {
    font-size: 14px;
    color: white;
}

/* ========================================
   ACCORDION SERVIZI CONFIG
   ======================================== */

.service-config-item .accordion-button {
    font-weight: 500;
    padding: 1rem 1.25rem;
}

.service-config-item .accordion-button.service-inactive {
    background-color: #f9fafb;
    color: #9ca3af;
}

.service-config-item .accordion-button.service-inactive .service-config-icon,
.service-config-item .accordion-button.service-inactive .service-config-name {
    opacity: 0.6;
}

.service-config-icon {
    font-size: 1.25rem;
}

.service-status-badge {
    font-size: 0.75rem;
    font-weight: 500;
}

/* Config content disabled state */
.service-config-content.config-disabled {
    opacity: 0.5;
    pointer-events: none;
    position: relative;
}
/*
.service-config-content.config-disabled::after {
    content: 'Attiva il servizio per configurarlo';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: rgba(0, 0, 0, 0.7);
    color: white;
    padding: 0.5rem 1rem;
    border-radius: 8px;
    font-size: 0.875rem;
    white-space: nowrap;
    z-index: 10;
} */

/* ========================================
   SOCIAL CHANNEL TOGGLES
   ======================================== */

.social-channel-toggle {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    border: 2px solid #e5e7eb;
    border-radius: 50px;
    cursor: pointer;
    transition: all 0.2s ease;
    background: white;
    user-select: none;
}

.social-channel-toggle:hover {
    border-color: var(--channel-color, #6B7280);
}

.social-channel-toggle.active {
    border-color: var(--channel-color, #10B981);
    background: var(--channel-color, #10B981);
    color: white;
}

.social-channel-toggle i {
    font-size: 1.25rem;
}

.social-channel-toggle span {
    font-size: 0.875rem;
    font-weight: 500;
}

/* ========================================
   FORM ELEMENTS ENHANCEMENTS
   ======================================== */

.service-config-content h6 {
    font-size: 0.875rem;
    font-weight: 600;
    margin-bottom: 0.75rem;
}

.service-config-content h6 i {
    margin-right: 0.25rem;
}

.service-config-content .form-check {
    padding-left: 0;
}

.service-config-content .form-check-input {
    margin-left: 0;
    margin-right: 0.5rem;
}

/* ADV Budget labels inline */
.service-config-content label .form-control-sm {
    vertical-align: middle;
}

/* ========================================
   CONTRACT STATUS BADGES
   ======================================== */

.badge.fs-6 {
    font-size: 0.875rem !important;
    padding: 0.5rem 0.75rem;
}

/* ========================================
   RESPONSIVE
   ======================================== */

@media (max-width: 768px) {
    .service-card {
        padding: 0.75rem;
    }

    .service-icon {
        width: 40px;
        height: 40px;
    }

    .service-icon i {
        font-size: 20px;
    }

    .service-name {
        font-size: 0.75rem;
    }

    .social-channel-toggle span {
        display: none;
    }

    .social-channel-toggle {
        padding: 0.5rem;
        border-radius: 50%;
    }
}

/* ========================================
   ANIMATION
   ======================================== */

@keyframes serviceActivate {
    0% { transform: scale(1); }
    50% { transform: scale(1.05); }
    100% { transform: scale(1); }
}

.service-card.active {
    animation: serviceActivate 0.3s ease;
}

/* ========================================
   PRINT STYLES
   ======================================== */

@media print {
    .service-card {
        break-inside: avoid;
        border: 1px solid #ccc !important;
    }

    .service-card:not(.active) {
        opacity: 0.5;
    }

    .accordion-button::after {
        display: none;
    }

    .accordion-collapse {
        display: block !important;
    }
}


/* ============================================
   VAULT - Cassaforte Credenziali
   Aggiungi questo al tuo custom.css
   ============================================ */


/* Input password vault readonly */
.vault-password {
    font-family: 'Courier New', monospace;
    letter-spacing: 2px;
}

/* Bottoni filtro vault */
.vault-filter.active {
    font-weight: 600;
}

/* Avatar title per stato vuoto */
.avatar-lg {
    width: 80px;
    height: 80px;
}

.avatar-lg .avatar-title {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Badge categoria con colore dinamico */
.vault-card .badge {
    font-weight: 500;
}

/* Animazione spinner reveal password */
.bx-spin {
    animation: spin 1s linear infinite;
}

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

/* Tooltip per copiato */
.vault-card .btn-outline-secondary:focus {
    box-shadow: none;
}

/* Log accessi tabella */
#vaultLogContent .table {
    font-size: 0.875rem;
}

#vaultLogContent .table th {
    background-color: #f8f9fa;
    font-weight: 600;
    border-bottom: 2px solid #dee2e6;
}

/* Alert sicurezza */
.tab-pane#vault .alert-warning {
    border-left: 4px solid #ffc107;
}

/* Responsive */
@media (max-width: 768px) {
    .vault-filter {
        padding: 0.25rem 0.5rem;
        font-size: 0.75rem;
    }

    .vault-filter .badge {
        display: none;
    }

    .vault-card .input-group {
        flex-wrap: nowrap;
    }

    .vault-card .input-group .form-control {
        min-width: 0;
    }
}



/* ============================================
   IMPOSTAZIONI - Stili Generali
   ============================================ */

/* Card sezioni impostazioni */
.settings-card {
    transition: all 0.3s ease;
    cursor: pointer;
    border-radius: 12px;
}

.settings-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 10px 40px rgba(0,0,0,0.1) !important;
}

.settings-card:hover .settings-icon {
    transform: scale(1.1);
}

.settings-card:hover .bx-chevron-right {
    transform: translateX(4px);
    color: #3b82f6;
}

.settings-icon {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    transition: transform 0.3s ease;
    flex-shrink: 0;
}

/* ============================================
   GESTIONE SERVIZI
   ============================================ */

/* Service Icons */
.service-icon {
    width: 60px;
    height: 60px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
    transition: transform 0.2s ease;
}

.service-icon-sm {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    flex-shrink: 0;
}

.service-icon-xs {
    width: 28px;
    height: 28px;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    flex-shrink: 0;
}

/* Service item card */
.service-item {
    transition: all 0.2s ease;
    border-radius: 12px;
}

.service-item:hover {
    border-color: #3b82f6 !important;
}

.service-item:hover .service-icon {
    transform: scale(1.1);
}

.service-item.service-disabled {
    opacity: 0.5;
}

.service-item.service-disabled .card-body {
    background: #f8f9fa;
}

.service-item.service-disabled:hover {
    border-color: #dee2e6 !important;
}

/* Color presets */
.color-presets {
    flex-wrap: wrap;
}

.color-preset {
    width: 20px;
    height: 20px;
    border-radius: 4px;
    cursor: pointer;
    border: 2px solid transparent;
    transition: all 0.2s ease;
}

.color-preset:hover {
    transform: scale(1.2);
    border-color: #fff;
    box-shadow: 0 0 0 1px rgba(0,0,0,0.2);
}

/* Drag handle */
.drag-handle {
    cursor: move !important;
    opacity: 0.5;
    transition: opacity 0.2s;
}

.drag-handle:hover {
    opacity: 1;
}

tr:hover .drag-handle {
    opacity: 0.8;
}

.cursor-move {
    cursor: move !important;
}

/* Sortable placeholder */
.sortable-ghost {
    opacity: 0.4;
    background: #e3f2fd !important;
}

.sortable-chosen {
    background: #fff;
    box-shadow: 0 4px 20px rgba(0,0,0,0.15);
}

/* Badge info subtle */
.bg-info-subtle {
    background-color: rgba(6, 182, 212, 0.1);
}

.bg-success-subtle {
    background-color: rgba(16, 185, 129, 0.1);
}

.bg-warning-subtle {
    background-color: rgba(245, 158, 11, 0.1);
}

.bg-danger-subtle {
    background-color: rgba(239, 68, 68, 0.1);
}

/* Form switches più piccoli */
.service-item .form-check-input {
    width: 2.5em;
    height: 1.25em;
}

/* ============================================
   TABELLA SERVIZI PERSONALIZZATI
   ============================================ */

#customServicesTable tbody tr {
    transition: background-color 0.2s;
}

#customServicesTable tbody tr:hover {
    background-color: #f8fafc;
}

#customServicesTable code {
    background: #f1f5f9;
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 12px;
}

/* ============================================
   MODAL SERVIZI
   ============================================ */

#addServiceModal .modal-body,
#editServiceModal .modal-body {
    max-height: 70vh;
    overflow-y: auto;
}

/* Preview servizio nel modal */
.service-preview {
    border-radius: 8px;
    background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
}

/* ============================================
   RESPONSIVE
   ============================================ */

@media (max-width: 768px) {
    .settings-icon {
        width: 40px;
        height: 40px;
        font-size: 20px;
    }

    .service-icon {
        width: 48px;
        height: 48px;
        font-size: 22px;
    }

    .service-item .card-body {
        padding: 1rem;
    }

    .color-presets {
        display: none;
    }

    #customServicesTable .drag-handle {
        display: none;
    }

    /* Stack buttons on mobile */
    .service-item .card-footer {
        padding: 0.5rem;
    }
}

@media (max-width: 576px) {
    .service-icon {
        width: 40px;
        height: 40px;
        font-size: 18px;
    }

    .service-item h6 {
        font-size: 13px;
    }
}



/* =====================================================
   SCADENZARIO - CSS Styles
   ===================================================== */

/* Dashboard Cards */
.scadenzario-card {
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.scadenzario-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

/* Status badges */
.badge-expired {
    background-color: #fee2e2;
    color: #dc2626;
}

.badge-expiring {
    background-color: #fef3c7;
    color: #d97706;
}

.badge-active {
    background-color: #d1fae5;
    color: #059669;
}

.badge-not-renewing {
    background-color: #e5e7eb;
    color: #6b7280;
}

/* Deadline row hover */
.deadline-row {
    cursor: pointer;
    transition: background-color 0.15s ease;
}

.deadline-row:hover {
    background-color: rgba(59, 130, 246, 0.05);
}

/* Type icon avatar */
.type-avatar {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 0.5rem;
}

/* Service items */
.service-item {
    background-color: #f8fafc;
    transition: box-shadow 0.2s ease;
}

.service-item:hover {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.service-item .btn-remove-service {
    opacity: 0.5;
    transition: opacity 0.2s ease;
}

.service-item:hover .btn-remove-service {
    opacity: 1;
}

/* Cost summary */
.cost-summary {
    background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
    border-radius: 0.5rem;
    padding: 1rem;
}

.cost-summary .total {
    font-size: 1.5rem;
    font-weight: 700;
    color: #3b82f6;
}

/* Days remaining indicators */
.days-badge {
    font-size: 0.75rem;
    padding: 0.25rem 0.5rem;
    border-radius: 9999px;
    font-weight: 600;
}

.days-badge.critical {
    background-color: #fecaca;
    color: #b91c1c;
    animation: pulse-critical 2s infinite;
}

.days-badge.warning {
    background-color: #fde68a;
    color: #92400e;
}

.days-badge.info {
    background-color: #bfdbfe;
    color: #1d4ed8;
}

.days-badge.success {
    background-color: #bbf7d0;
    color: #166534;
}

@keyframes pulse-critical {
    0%, 100% {
        opacity: 1;
    }
    50% {
        opacity: 0.7;
    }
}

/* History timeline */
.history-item {
    position: relative;
    padding-left: 1.5rem;
}

.history-item::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0.5rem;
    width: 8px;
    height: 8px;
    background-color: #e5e7eb;
    border-radius: 50%;
}

.history-item:not(:last-child)::after {
    content: '';
    position: absolute;
    left: 3px;
    top: 1rem;
    width: 2px;
    height: calc(100% - 0.5rem);
    background-color: #e5e7eb;
}

.history-item.action-created::before {
    background-color: #10b981;
}

.history-item.action-renewed::before {
    background-color: #3b82f6;
}

.history-item.action-updated::before {
    background-color: #f59e0b;
}

/* Provider logos (opzionale) */
.provider-logo {
    width: 24px;
    height: 24px;
    object-fit: contain;
}

/* Empty state */
.empty-state {
    padding: 3rem;
    text-align: center;
}

.empty-state-icon {
    font-size: 4rem;
    color: #d1d5db;
    margin-bottom: 1rem;
}

.empty-state-title {
    font-size: 1.25rem;
    font-weight: 600;
    color: #374151;
    margin-bottom: 0.5rem;
}

.empty-state-text {
    color: #6b7280;
    margin-bottom: 1.5rem;
}

/* Form improvements */
.form-label-required::after {
    content: ' *';
    color: #ef4444;
}

/* Alert scadenze */
.alert-deadline {
    border-left: 4px solid;
    border-radius: 0;
}

.alert-deadline.expired {
    border-left-color: #dc2626;
    background-color: #fef2f2;
}

.alert-deadline.urgent {
    border-left-color: #f59e0b;
    background-color: #fffbeb;
}

/* DataTables custom */
#deadlinesTable {
    font-size: 0.875rem;
}

#deadlinesTable .btn-group {
    flex-wrap: nowrap;
}

#deadlinesTable td {
    vertical-align: middle;
}

/* Responsive */
@media (max-width: 991.98px) {
    .dashboard-cards .col-xl-2 {
        flex: 0 0 50%;
        max-width: 50%;
    }
}

@media (max-width: 767.98px) {
    .dashboard-cards .col-xl-2 {
        flex: 0 0 100%;
        max-width: 100%;
    }

    .service-item .row > div {
        margin-bottom: 0.5rem;
    }

    #deadlinesTable {
        font-size: 0.8rem;
    }

    .btn-group-sm .btn {
        padding: 0.25rem 0.4rem;
    }
}




/**
 * Profilo Utente - Stili CSS
 * Aggiungi questo al file custom.css
 * Include stili per Cropper.js
 */

/* =====================================================
   PROFILO - CARD AVATAR
   ===================================================== */

.profile-card {
    border: none;
    border-radius: 12px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
}

.profile-avatar-wrapper {
    position: relative;
    display: inline-block;
}

.profile-avatar-container {
    position: relative;
    width: 150px;
    height: 150px;
    border-radius: 50%;
    overflow: hidden;
    margin: 0 auto;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}

.profile-avatar-container:hover {
    transform: scale(1.02);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
}

.profile-avatar {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.profile-avatar-placeholder {
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, var(--bs-primary) 0%, #7c3aed 100%);
    display: flex;
    align-items: center;
    justify-content: center;
}

.avatar-initials {
    font-size: 48px;
    font-weight: 600;
    color: #fff;
    text-transform: uppercase;
    letter-spacing: 2px;
}

.avatar-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.6);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: #fff;
    opacity: 0;
    transition: opacity 0.3s ease;
    border-radius: 50%;
}

.profile-avatar-container:hover .avatar-overlay {
    opacity: 1;
}

/* =====================================================
   PROFILO - INFO LIST
   ===================================================== */

.profile-info-list {
    padding: 0 10px;
}

.profile-info-list .border-bottom {
    border-color: rgba(0, 0, 0, 0.08) !important;
}

/* =====================================================
   PROFILO - CARD FORM
   ===================================================== */

.card {
    border: none;
    border-radius: 12px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
}

.card-header {
    background: transparent;
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}


.card-header .card-title iconify-icon {
    font-size: 1.25rem;
    color: var(--bs-primary);
}

/* =====================================================
   PROFILO - FORM INPUTS
   ===================================================== */

.profile-card .form-control,
.profile-card .form-select {
    border-radius: 8px;
    border: 1px solid #e5e7eb;
    padding: 0.625rem 1rem;
    transition: all 0.2s ease;
}

.profile-card .form-control:focus,
.profile-card .form-select:focus {
    border-color: var(--bs-primary);
    box-shadow: none!important;
}

.profile-card .form-control:read-only {
    background-color: #f9fafb;
    color: #6b7280;
}

/* =====================================================
   PROFILO - INPUT GROUP (PASSWORD)
   ===================================================== */

.profile-card .input-group .form-control {
    border-right: 0;
}

.profile-card .input-group .btn {
    border: 1px solid #e5e7eb;
    border-left: 0;
    border-radius: 0 8px 8px 0;
    background: #fff;
    color: #6b7280;
}

.profile-card .input-group .btn:hover {
    background: #f3f4f6;
    color: #374151;
}

/* =====================================================
   PROFILO - ALERT INFO
   ===================================================== */

.profile-card .alert-info {
    background: #eff6ff;
    border: 1px solid #bfdbfe;
    border-radius: 8px;
    color: #1e40af;
}

.profile-card .alert-info iconify-icon {
    font-size: 1.1rem;
}

/* =====================================================
   PROFILO - BADGES
   ===================================================== */

.profile-card .badge {
    font-weight: 500;
    padding: 0.4em 0.8em;
    border-radius: 6px;
}

/* =====================================================
   CROPPER - MODAL
   ===================================================== */

#cropAvatarModal .modal-content {
    border: none;
    border-radius: 16px;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
}

#cropAvatarModal .modal-header {
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
    padding: 1.25rem 1.5rem;
}

#cropAvatarModal .modal-title {
    display: flex;
    align-items: center;
    font-weight: 600;
    color: #374151;
}

#cropAvatarModal .modal-title iconify-icon {
    font-size: 1.5rem;
    color: var(--bs-primary);
}

#cropAvatarModal .modal-body {
    padding: 1.5rem;
}

#cropAvatarModal .modal-footer {
    border-top: 1px solid rgba(0, 0, 0, 0.1);
    padding: 1rem 1.5rem;
}

/* =====================================================
   CROPPER - CONTAINER
   ===================================================== */

.crop-container {
    max-height: 400px;
    background: #1f2937;
    border-radius: 12px;
    overflow: hidden;
}

.crop-container img {
    display: block;
    max-width: 100%;
}

/* Cropper.js customizations */
.cropper-container {
    border-radius: 12px;
}

.cropper-view-box,
.cropper-face {
    border-radius: 50%;
}

.cropper-view-box {
    outline: 2px solid var(--bs-primary);
    outline-offset: -2px;
}

.cropper-point {
    background-color: var(--bs-primary);
    width: 10px;
    height: 10px;
    opacity: 1;
}

.cropper-point.point-e,
.cropper-point.point-w {
    width: 6px;
    height: 20px;
    margin-top: -10px;
}

.cropper-point.point-n,
.cropper-point.point-s {
    width: 20px;
    height: 6px;
    margin-left: -10px;
}

.cropper-line {
    background-color: var(--bs-primary);
    opacity: 0.3;
}

.cropper-dashed {
    border-color: rgba(255, 255, 255, 0.5);
}

.cropper-modal {
    background-color: rgba(0, 0, 0, 0.7);
}

/* =====================================================
   CROPPER - INSTRUCTIONS
   ===================================================== */

.crop-instructions {
    background: #f0f9ff;
    border: 1px solid #bae6fd;
    border-radius: 8px;
    padding: 0.75rem 1rem;
}

.crop-instructions p {
    font-size: 0.875rem;
}

.crop-instructions iconify-icon {
    color: #0284c7;
}

/* =====================================================
   CROPPER - CONTROLS
   ===================================================== */

.crop-controls {
    padding: 1rem;
    background: #f9fafb;
    border-radius: 12px;
    margin-top: 1rem;
}

.crop-controls .btn {
    width: 38px;
    height: 38px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    transition: all 0.2s ease;
}

.crop-controls .btn:hover {
    background: var(--bs-primary);
    border-color: var(--bs-primary);
    color: #fff;
}

.crop-controls .btn:active {
    transform: scale(0.95);
}

/* Zoom Slider */
.crop-zoom-slider {
    width: 150px;
    height: 6px;
    cursor: pointer;
}

.crop-zoom-slider::-webkit-slider-thumb {
    appearance: none;
    width: 18px;
    height: 18px;
    background: var(--bs-primary);
    border-radius: 50%;
    cursor: pointer;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
}

.crop-zoom-slider::-moz-range-thumb {
    width: 18px;
    height: 18px;
    background: var(--bs-primary);
    border-radius: 50%;
    cursor: pointer;
    border: none;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
}

.crop-zoom-slider::-webkit-slider-runnable-track {
    background: #e5e7eb;
    border-radius: 3px;
    height: 6px;
}

.crop-zoom-slider::-moz-range-track {
    background: #e5e7eb;
    border-radius: 3px;
    height: 6px;
}

/* =====================================================
   CROPPER - PREVIEW
   ===================================================== */
/* Crop Preview - FIX centratura */
.crop-preview-section {
    padding-top: 15px;
    border-top: 1px solid #e5e7eb;
}

.crop-preview {
    overflow: hidden;
    border-radius: 50%;
    border: 0;
    background-color: #f9fafb;
    display: inline-block;
    box-sizing: border-box;
}

.crop-preview-lg {
    width: 100px;
    height: 100px;
}

.crop-preview-md {
    width: 60px;
    height: 60px;
}

.crop-preview-sm {
    width: 40px;
    height: 40px;
}

/* Fix per centrare l'immagine dentro la preview */
.crop-preview img {
    display: block;
    max-width: none !important;
}

/* =====================================================
   PROFILO - RESPONSIVE
   ===================================================== */

@media (max-width: 991.98px) {
    .profile-avatar-container {
        width: 120px;
        height: 120px;
    }

    .avatar-initials {
        font-size: 36px;
    }

    .crop-preview-lg {
        width: 80px;
        height: 80px;
    }

    .crop-preview-md {
        width: 50px;
        height: 50px;
    }

    .crop-preview-sm {
        width: 35px;
        height: 35px;
    }
}

@media (max-width: 575.98px) {
    .profile-avatar-container {
        width: 100px;
        height: 100px;
    }

    .avatar-initials {
        font-size: 28px;
    }

    .profile-card .card-body {
        padding: 1rem;
    }

    .crop-container {
        max-height: 300px;
    }

    .crop-zoom-slider {
        width: 100px;
    }

    .crop-controls .btn {
        width: 34px;
        height: 34px;
    }

    .crop-preview-lg {
        width: 60px;
        height: 60px;
    }

    .crop-preview-md {
        width: 40px;
        height: 40px;
    }

    .crop-preview-sm {
        width: 30px;
        height: 30px;
    }

    #cropAvatarModal .modal-dialog {
        margin: 0.5rem;
    }
}

/* =====================================================
   PROFILO - ANIMAZIONI
   ===================================================== */

@keyframes avatarPulse {
    0% {
        box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    }
    50% {
        box-shadow: 0 4px 25px rgba(var(--bs-primary-rgb), 0.3);
    }
    100% {
        box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    }
}

.profile-avatar-container.uploading {
    animation: avatarPulse 1.5s ease-in-out infinite;
}

/* Spinner per il caricamento */
@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}

.crop-loading {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 40px;
    height: 40px;
    border: 3px solid rgba(255, 255, 255, 0.3);
    border-top-color: var(--bs-primary);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}


/* ============================================
   USER AVATAR STYLES (users-edit.php)
   ============================================ */

/* Avatar Container */
.user-avatar-wrapper {
    position: relative;
}

.user-avatar-container {
    width: 120px;
    height: 120px;
    border-radius: 50%;
    overflow: hidden;
    cursor: pointer;
    position: relative;
    border: 3px solid #e5e7eb;
    transition: all 0.3s ease;
    background-color: #f3f4f6;
}

.user-avatar-container:hover {
    border-color: var(--bs-primary);
    transform: scale(1.02);
}

.user-avatar-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.user-avatar-placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--bs-primary), var(--bs-primary-dark, #4f46e5));
}

.user-avatar-placeholder .avatar-initials {
    font-size: 36px;
    font-weight: 600;
    color: #fff;
    text-transform: uppercase;
}

/* Avatar Overlay */
.avatar-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.3s ease;
    color: #fff;
    border-radius: 50%;
}

.user-avatar-container:hover .avatar-overlay {
    opacity: 1;
}

/* Avatar Actions */
.avatar-actions {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

/* ============================================
   CROP MODAL STYLES
   ============================================ */

.crop-modal-content {
    border-radius: 16px;
    overflow: hidden;
}

.crop-container {
    max-height: 400px;
    background-color: #1f2937;
    border-radius: 8px;
    overflow: hidden;
}

.crop-container img {
    max-width: 100%;
    display: block;
}

/* Cropper.js Customizations */
.cropper-view-box {
    border-radius: 50%;
    outline: 2px solid var(--bs-primary);
    outline-offset: -2px;
}

.cropper-face {
    border-radius: 50%;
}

.cropper-point {
    width: 10px;
    height: 10px;
    background-color: var(--bs-primary);
    border-radius: 50%;
}

.cropper-line {
    background-color: var(--bs-primary);
}

/* Crop Controls */
.crop-controls {
    padding: 10px 0;
}

.crop-control-btn {
    width: 38px;
    height: 38px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
}

.crop-control-btn:hover {
    background-color: var(--bs-primary);
    border-color: var(--bs-primary);
    color: #fff;
}

.crop-zoom-slider {
    width: 150px;
}


/* ============================================
   RESPONSIVE STYLES
   ============================================ */

@media (max-width: 991px) {
    .user-avatar-container {
        width: 100px;
        height: 100px;
    }

    .user-avatar-placeholder .avatar-initials {
        font-size: 28px;
    }
}

@media (max-width: 575px) {
    .user-avatar-container {
        width: 80px;
        height: 80px;
    }

    .user-avatar-placeholder .avatar-initials {
        font-size: 24px;
    }

    .crop-container {
        max-height: 300px;
    }

    .crop-preview-lg {
        width: 70px;
        height: 70px;
    }

    .crop-preview-md {
        width: 50px;
        height: 50px;
    }

    .crop-preview-sm {
        width: 35px;
        height: 35px;
    }

    .crop-zoom-slider {
        width: 100px;
    }
}


/* Topbar Avatar Initials */
.topbar-avatar-initials {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--bs-primary), #4f46e5);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
}



/* Avatar piccolo per tabelle */
.user-avatar-sm {
    width: 36px;
    height: 36px;
    min-width: 36px;
    object-fit: cover;
    border: 2px solid #e9ecef;
}

/* Avatar con iniziali (fallback) */
.user-avatar-initials {
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: #fff;
    font-weight: 600;
    font-size: 13px;
    letter-spacing: 0.5px;
}

/* Varianti colori per avatar iniziali basate sul ruolo */
.user-avatar-initials.role-admin {
    background: linear-gradient(135deg, #dc3545 0%, #c82333 100%);
}

.user-avatar-initials.role-agenzia {
    background: linear-gradient(135deg, #0d6efd 0%, #0a58ca 100%);
}

.user-avatar-initials.role-utente {
    background: linear-gradient(135deg, #0dcaf0 0%, #0aa2c0 100%);
}

.user-avatar-initials.role-cliente {
    background: linear-gradient(135deg, #198754 0%, #146c43 100%);
}

/* Avatar medio per card/profili */
.user-avatar-md {
    width: 48px;
    height: 48px;
    min-width: 48px;
    object-fit: cover;
    border: 2px solid #e9ecef;
}

.user-avatar-md.user-avatar-initials {
    font-size: 16px;
}

/* Avatar grande per pagine profilo */
.user-avatar-lg {
    width: 80px;
    height: 80px;
    min-width: 80px;
    object-fit: cover;
    border: 3px solid #e9ecef;
}

.user-avatar-lg.user-avatar-initials {
    font-size: 24px;
}

/* Avatar extra large */
.user-avatar-xl {
    width: 120px;
    height: 120px;
    min-width: 120px;
    object-fit: cover;
    border: 4px solid #e9ecef;
}

.user-avatar-xl.user-avatar-initials {
    font-size: 36px;
}

/* Hover effect per avatar cliccabili */
a .user-avatar-sm,
a .user-avatar-md,
a .user-avatar-lg,
button .user-avatar-sm {
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

a:hover .user-avatar-sm,
a:hover .user-avatar-md,
a:hover .user-avatar-lg,
button:hover .user-avatar-sm {
    transform: scale(1.05);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

/* Stato online/offline indicator */
.user-avatar-wrapper {
    position: relative;
    display: inline-block;
}

.user-avatar-status {
    position: absolute;
    bottom: 0;
    right: 0;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    border: 2px solid #fff;
}

.user-avatar-status.online {
    background-color: #198754;
}

.user-avatar-status.offline {
    background-color: #6c757d;
}

.user-avatar-status.busy {
    background-color: #dc3545;
}

.user-avatar-status.away {
    background-color: #ffc107;
}


/* ========================================
   CLIENT LOGO UPLOAD STYLES WITH CROPPER
   Da aggiungere a custom.css
======================================== */

/* Container principale */
.client-logo-upload-container {
    display: flex;
    align-items: flex-start;
    gap: 20px;
}

/* Wrapper dell'anteprima */
.client-logo-preview-wrapper {
    flex-shrink: 0;
}

/* Container logo cliccabile */
.client-logo-container {
    width: 150px;
    height: 150px;
    border: 2px dashed #dee2e6;
    border-radius: 8px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    background-color: #f8f9fa;
    position: relative;
    cursor: pointer;
    transition: all 0.3s ease;
}

.client-logo-container:hover {
    border-color: #0d6efd;
    background-color: #e8f4ff;
}

/* Placeholder quando non c'è logo */
.client-logo-placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: #adb5bd;
    width: 100%;
    height: 100%;
}
.client-logo-placeholder.rounded{border-radius: 60px!important;}

.client-logo-placeholder i {
    font-size: 2.5rem;
    margin-bottom: 5px;
}

.client-logo-placeholder span {
    font-size: 0.75rem;
    text-align: center;
}

/* Immagine logo */
.client-logo-img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    padding: 8px;
}

/* Overlay hover */
.logo-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.6);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.3s ease;
    color: #fff;
}

.client-logo-container:hover .logo-overlay {
    opacity: 1;
}

.logo-overlay i {
    font-size: 2rem;
    margin-bottom: 5px;
}

.logo-overlay span {
    font-size: 0.75rem;
}

/* Azioni di upload */
.client-logo-upload-actions {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

/* Crop Modal Styles */
.crop-container {
    max-height: 400px;
    background-color: #f8f9fa;
    border-radius: 8px;
    overflow: hidden;
}

.crop-container img {
    display: block;
    max-width: 100%;
}

.crop-zoom-slider {
    width: 200px;
}

.crop-controls .btn {
    width: 40px;
    height: 40px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Logo Crop Preview */
.logo-crop-preview {
    overflow: hidden;
    background-color: #f8f9fa;
    border: 1px solid #dee2e6;
    border-radius: 4px;
}

.logo-crop-preview-lg {
    width: 100px;
    height: 100px;
}

.logo-crop-preview-md {
    width: 60px;
    height: 60px;
}

.logo-crop-preview-sm {
    width: 40px;
    height: 40px;
}

/* Responsive */
@media (max-width: 576px) {
    .client-logo-upload-container {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }

    .client-logo-upload-actions {
        align-items: center;
    }

    .client-logo-container {
        width: 120px;
        height: 120px;
    }
}


/* =============================================
   TICKET CHAT - Avatar & Logo Styles
   Da aggiungere a custom.css
   ============================================= */

/* Avatar immagine nell'header del ticket */
.ticket-header-avatar {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: 16px;
    color: #fff;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    flex-shrink: 0;
    overflow: hidden;
}

.ticket-header-avatar.client {
    background: linear-gradient(135deg, #11998e 0%, #38ef7d 100%);
}

.ticket-header-avatar .ticket-avatar-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
}

/* Avatar immagine nei messaggi */
.message-avatar {
    width: 36px;
    height: 36px;
    min-width: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: 13px;
    color: #fff;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    flex-shrink: 0;
    overflow: hidden;
}

.message-avatar.client {
    background: linear-gradient(135deg, #11998e 0%, #38ef7d 100%);
}

.message-avatar.system {
    background: #6c757d;
}

.message-avatar .message-avatar-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
}

/* Stile per i messaggi outgoing (propri) */
.message-item.outgoing .message-avatar {
    background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%);
}

/* Avatar negli assegnatari sidebar */
.assignee-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: 11px;
    color: #fff;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    flex-shrink: 0;
    overflow: hidden;
}

.assignee-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
}


/* ========================================
   DROPZONE AREA
   ======================================== */
.ticket-dropzone {
    position: relative;
    border: 2px dashed #dee2e6;
    border-radius: 0 0 8px 8px;
    padding: 24px;
    text-align: center;
    cursor: pointer;
    transition: all 0.2s ease;
    background: #fafbfc;
    margin-bottom: 12px;
}

.ticket-dropzone:hover {
    border-color: var(--bs-primary);
    background: rgba(var(--bs-primary-rgb), 0.02);
}

.ticket-dropzone.dragover {
    border-color: var(--bs-primary);
    background: rgba(var(--bs-primary-rgb), 0.05);
    border-style: solid;
}

.ticket-dropzone.dragover .dropzone-drag-overlay {
    display: flex;
}

.ticket-dropzone input[type="file"] {
    display: none;
}

.dropzone-content {
    pointer-events: none;
}

.dropzone-icon {
    font-size: 36px;
    color: #adb5bd;
    margin-bottom: 8px;
}

.dropzone-icon i {
    display: block;
}

.dropzone-text {
    margin-bottom: 4px;
}

.dropzone-main-text {
    display: block;
    font-weight: 500;
    color: #495057;
    margin-bottom: 2px;
}

.dropzone-sub-text {
    font-size: 0.875rem;
    color: #6c757d;
}

.dropzone-browse {
    color: var(--bs-primary);
    text-decoration: underline;
    cursor: pointer;
}

.dropzone-hint {
    font-size: 0.75rem;
    color: #adb5bd;
    margin-top: 4px;
}

.dropzone-drag-overlay {
    display: none;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(var(--bs-primary-rgb), 0.1);
    border-radius: 6px;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: var(--bs-primary);
    font-weight: 500;
    pointer-events: none;
}

.dropzone-drag-overlay * {
    pointer-events: none;
}

.dropzone-drag-overlay i {
    font-size: 32px;
    margin-bottom: 8px;
}

/* ========================================
   INLINE ATTACHMENTS PREVIEW
   ======================================== */
.inline-attachments-preview {
    border: 1px solid #e9ecef;
    border-radius: 8px;
    overflow: hidden;
    margin-bottom: 12px;
}

.inline-attachments-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 12px;
    background: #f8f9fa;
    border-bottom: 1px solid #e9ecef;
    font-size: 0.875rem;
    color: #495057;
}

.inline-attachments-list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 12px;
    max-height: 200px;
    overflow-y: auto;
}

.inline-attachment-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 10px;
    background: #f8f9fa;
    border: 1px solid #e9ecef;
    border-radius: 6px;
    font-size: 0.8125rem;
    max-width: 220px;
}

.inline-attachment-thumb {
    width: 36px;
    height: 36px;
    border-radius: 4px;
    background-size: cover;
    background-position: center;
    background-color: #e9ecef;
    flex-shrink: 0;
}

.inline-attachment-icon {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #e9ecef;
    border-radius: 4px;
    flex-shrink: 0;
}

.inline-attachment-icon iconify-icon {
    font-size: 20px;
    color: #6c757d;
}

.inline-attachment-icon.video {
    background: #e3f2fd;
}

.inline-attachment-icon.video iconify-icon {
    color: #1976d2;
}

.inline-attachment-info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.inline-attachment-name {
    font-weight: 500;
    color: #212529;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.inline-attachment-size {
    font-size: 0.75rem;
    color: #6c757d;
}

.inline-attachment-remove {
    background: none;
    border: none;
    padding: 2px;
    cursor: pointer;
    color: #adb5bd;
    border-radius: 4px;
    transition: all 0.2s;
    flex-shrink: 0;
}

.inline-attachment-remove:hover {
    background: #fee2e2;
    color: #dc3545;
}

.inline-attachment-remove i {
    font-size: 18px;
}

/* ========================================
   UPLOAD PROGRESS
   ======================================== */
.upload-progress-container {
    padding: 12px;
    background: #f0f9ff;
    border: 1px solid #bae6fd;
    border-radius: 8px;
    margin-bottom: 12px;
}

.upload-progress-info {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
    font-size: 0.875rem;
}

.upload-progress-info span:first-child {
    color: #0369a1;
}

.upload-progress-info span:last-child {
    font-weight: 600;
    color: #0284c7;
}

.upload-progress-bar {
    height: 6px;
    background: #e0f2fe;
    border-radius: 3px;
    overflow: hidden;
}

.upload-progress-fill {
    height: 100%;
    background: linear-gradient(90deg, #0ea5e9, #0284c7);
    border-radius: 3px;
    transition: width 0.3s ease;
}

.upload-progress-details {
    font-size: 0.75rem;
    color: #0369a1;
    margin-top: 6px;
    text-align: center;
}

/* ========================================
   REPLY TO BOX
   ======================================== */
.reply-to-box {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 12px;
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
    border-left: 3px solid var(--bs-primary);
    border-radius: 4px;
    font-size: 0.875rem;
    margin-bottom: 12px;
}

.reply-to-content {
    display: flex;
    align-items: center;
    gap: 4px;
    color: #6c757d;
    overflow: hidden;
}

.reply-to-content i {
    color: var(--bs-primary);
}

.reply-to-preview-text {
    color: #495057;
    margin-left: 8px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 300px;
}

.reply-to-close {
    background: none;
    border: none;
    padding: 4px;
    cursor: pointer;
    color: #6c757d;
    border-radius: 4px;
    transition: all 0.2s;
}

.reply-to-close:hover {
    background: rgba(0,0,0,0.1);
    color: #dc3545;
}

/* ========================================
   MESSAGE REPLY REFERENCE (nei commenti)
   ======================================== */
.message-reply-reference {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 10px;
    background: rgba(0,0,0,0.04);
    border-radius: 8px;
    font-size: 0.8rem;
    color: #6c757d;
    cursor: pointer;
    transition: background 0.2s;
    margin-bottom: 8px;
    max-width: 100%;
}

.message-reply-reference:hover {
    background: rgba(0,0,0,0.08);
}

.message-reply-reference i {
    color: var(--bs-primary);
    flex-shrink: 0;
}

.message-reply-reference .reply-to-author {
    font-weight: 600;
    color: var(--bs-primary);
    flex-shrink: 0;
}

.message-reply-reference .reply-to-preview {
    color: #868e96;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Message highlight animation */
.message-item.message-highlight {
    animation: messageHighlightFade 2s ease-out;
}

@keyframes messageHighlightFade {
    0% { background-color: rgba(var(--bs-primary-rgb), 0.15); }
    100% { background-color: transparent; }
}
/* ===========================================
   FIX DROPZONE FLICKERING
   =========================================== */

/* L'overlay non deve intercettare gli eventi del mouse/drag */
.ticket-dropzone .dropzone-drag-overlay {
    pointer-events: none;
}

/* Assicurati che anche i figli dell'overlay non intercettino */
.ticket-dropzone .dropzone-drag-overlay * {
    pointer-events: none;
}

/* Stile quando si sta trascinando */
.ticket-dropzone.dragover {
    border-color: var(--bs-primary) !important;
    background-color: rgba(var(--bs-primary-rgb), 0.05) !important;
}

.ticket-dropzone.dragover .dropzone-drag-overlay {
    opacity: 1;
    visibility: visible;
}

/* Nascondi l'overlay di default */
.ticket-dropzone .dropzone-drag-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: rgba(var(--bs-primary-rgb), 0.1);
    border: 2px dashed var(--bs-primary);
    border-radius: inherit;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s, visibility 0.2s;
    z-index: 10;
}

.ticket-dropzone .dropzone-drag-overlay i {
    font-size: 2rem;
    color: var(--bs-primary);
    margin-bottom: 0.5rem;
}

.ticket-dropzone .dropzone-drag-overlay span {
    font-weight: 500;
    color: var(--bs-primary);
}

/* Assicurati che il contenuto normale sia cliccabile */
.ticket-dropzone .dropzone-content {
    position: relative;
    z-index: 1;
}

/* ===========================================
   HIGHLIGHT COMMENTO (per scroll to reply)
   =========================================== */
.conversation-item.comment-highlight {
    animation: highlightPulse 2s ease-out;
}

@keyframes highlightPulse {
    0% {
        background-color: rgba(var(--bs-primary-rgb), 0.2);
    }
    100% {
        background-color: transparent;
    }
}
.dropzone-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.dropzone-main-text {
    font-size: 14px;
    font-weight: 500;
    color: #495057;
}

.dropzone-sub-text {
    font-size: 13px;
    color: #6c757d;
}

.dropzone-browse {
    color: #34b3e4;
    font-weight: 500;
    text-decoration: underline;
}

.dropzone-hint {
    font-size: 11px;
    color: #adb5bd;
    margin-top: 5px;
}

/* Overlay durante il drag */
.dropzone-drag-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(13, 110, 253, 0.1);
    border-radius: 10px;
    display: none;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    z-index: 3;
    pointer-events: none;
}
.dropzone-drag-overlay * {
    pointer-events: none;
}
.dropzone-drag-overlay i {
    font-size: 32px;
    color: #0d6efd;
}

.dropzone-drag-overlay span {
    font-size: 14px;
    font-weight: 500;
    color: #0d6efd;
}

.ticket-dropzone.dragover .dropzone-drag-overlay {
    display: flex;
}

.ticket-dropzone.dragover .dropzone-content {
    opacity: 0.3;
}

/* ========================================
   PREVIEW ALLEGATI INLINE
   ======================================== */
.inline-attachments-preview {
    background: #f8f9fa;
    border: 1px solid #e9ecef;
    border-radius: 8px;
    padding: 10px 12px;
    margin-bottom: 12px;
}

.inline-attachments-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
    padding-bottom: 8px;
    border-bottom: 1px solid #e9ecef;
}

.inline-attachments-header > span {
    font-size: 13px;
    font-weight: 500;
    color: #495057;
    display: flex;
    align-items: center;
    gap: 6px;
}

.inline-attachments-header > span i {
    font-size: 16px;
}

.inline-attachments-list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.inline-attachment-item {
    display: flex;
    align-items: center;
    gap: 8px;
    background: #fff;
    border: 1px solid #dee2e6;
    border-radius: 6px;
    padding: 6px 8px;
    max-width: 200px;
    transition: all 0.15s ease;
}

.inline-attachment-item:hover {
    border-color: #0d6efd;
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}

.inline-attachment-thumb {
    width: 36px;
    height: 36px;
    border-radius: 4px;
    background-size: cover;
    background-position: center;
    background-color: #e9ecef;
    flex-shrink: 0;
}

.inline-attachment-icon {
    width: 36px;
    height: 36px;
    border-radius: 4px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.inline-attachment-icon iconify-icon {
    font-size: 20px;
    color: #fff;
}

.inline-attachment-info {
    display: flex;
    flex-direction: column;
    min-width: 0;
    flex: 1;
}

.inline-attachment-name {
    font-size: 12px;
    font-weight: 500;
    color: #212529;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 120px;
}

.inline-attachment-size {
    font-size: 10px;
    color: #6c757d;
}

.inline-attachment-remove {
    background: none;
    border: none;
    color: #adb5bd;
    cursor: pointer;
    padding: 4px;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.15s ease;
    flex-shrink: 0;
}

.inline-attachment-remove:hover {
    background: #fee2e2;
    color: #dc3545;
}

.inline-attachment-remove i {
    font-size: 16px;
}

/* ========================================
   RESPONSIVE
   ======================================== */
@media (max-width: 768px) {
    .ticket-dropzone {
        padding: 20px 12px;
    }

    .dropzone-icon {
        font-size: 28px;
    }

    .dropzone-main-text {
        font-size: 13px;
    }

    .inline-attachment-item {
        max-width: 100%;
        flex: 1 1 calc(50% - 4px);
    }

    .inline-attachment-name {
        max-width: 100px;
    }
}

@media (max-width: 576px) {
    .inline-attachments-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }

    .inline-attachment-item {
        flex: 1 1 100%;
    }
}

/* ========================================
   VERSIONE COMPATTA (quando già ci sono file)
   ======================================== */
.ticket-dropzone.compact {
    padding: 12px;
    border-style: solid;
    border-color: #e9ecef;
    background: #fff;
}

.ticket-dropzone.compact .dropzone-icon {
    font-size: 24px;
    margin-bottom: 0px;
}

.ticket-dropzone.compact .dropzone-text {
    flex-direction: row;
    gap: 4px;
}

.ticket-dropzone.compact .dropzone-hint {
    display: none;
}




/**
 * Ticket Enhancements CSS
 * File: /public/admin/css/ticket-enhancements.css
 *
 * Contiene:
 * - Reply to comment box
 * - Upload progress bar
 * - Video attachments in comments
 * - Video gallery tab
 * - Message reply reference
 */

/* ========================================
   REPLY TO BOX (sopra l'editor)
   ======================================== */


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

.reply-to-content {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 1;
    min-width: 0;
    font-size: 13px;
    color: #1565c0;
}

.reply-to-content i {
    font-size: 18px;
    flex-shrink: 0;
}

.reply-to-content strong {
    font-weight: 600;
}

.reply-to-preview-text {
    color: #5e35b1;
    font-style: italic;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 300px;
}

.reply-to-close {
    background: transparent;
    border: none;
    color: #9e9e9e;
    cursor: pointer;
    padding: 4px;
    border-radius: 4px;
    transition: all 0.15s ease;
    flex-shrink: 0;
}

.reply-to-close:hover {
    background: rgba(0, 0, 0, 0.1);
    color: #f44336;
}

.reply-to-close i {
    font-size: 18px;
}

/* ========================================
   UPLOAD PROGRESS BAR
   ======================================== */
.upload-progress-container {
    background: #f8f9fa;
    border: 1px solid #e9ecef;
    border-radius: 8px;
    padding: 12px 16px;
    margin-bottom: 12px;
}

.upload-progress-info {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
}

#uploadProgressText {
    font-size: 13px;
    font-weight: 500;
    color: #495057;
}

#uploadProgressPercent {
    font-size: 14px;
    font-weight: 600;
    color: #34b3e4;
}

.upload-progress-bar {
    height: 8px;
    background: #e9ecef;
    border-radius: 4px;
    overflow: hidden;
}

.upload-progress-fill {
    height: 100%;
    background: #34b3e4;
    border-radius: 4px;
    transition: width 0.15s ease;
}

.upload-progress-details {
    font-size: 11px;
    color: #6c757d;
    margin-top: 6px;
    text-align: center;
}

/* ========================================
   MESSAGE REPLY REFERENCE
   ======================================== */
.message-reply-reference {
    display: flex;
    align-items: center;
    gap: 6px;
    background: rgba(0, 0, 0, 0.04);
    border-left: 3px solid #6c757d;
    border-radius: 15px;
    padding: 6px 10px;
    margin-bottom: 10px;
    font-size: 12px;
    color: #6c757d;
    cursor: pointer;
    transition: all 0.15s ease;
}

.message-reply-reference:hover {
    background: rgba(0, 0, 0, 0.06);
    border-left-color: #0d6efd;
}

.message-reply-reference i {
    font-size: 14px;
    transform: scaleX(-1);
}

.reply-to-author {
    font-weight: 600;
    color: #495057;
}

.reply-to-preview {
    color: #868e96;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 200px;
}

/* Outgoing message reply reference */
.message-item.outgoing .message-reply-reference {
    background: rgba(255, 255, 255, 0.2);
    border: 0;
}

.message-item.outgoing .message-reply-reference:hover {
    background: rgba(255, 255, 255, 0.3);
}

.message-item.outgoing .reply-to-author,
.message-item.outgoing .reply-to-preview {
    color: rgba(255, 255, 255, 0.9);
}

/* ========================================
   VIDEO ATTACHMENTS IN COMMENTS
   ======================================== */
.message-attachment-video {
    position: relative;
    display: inline-block;
    border-radius: 8px;
    overflow: hidden;
    background: #000;
    width: 180px;
    height: 120px;
}

.message-attachment-video-thumb {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.message-attachment-video-placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #2c3e50 0%, #34495e 100%);
}

.message-attachment-video-placeholder iconify-icon {
    font-size: 40px;
    color: rgba(255, 255, 255, 0.5);
}

.message-attachment-video-play {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 48px;
    height: 48px;
    background: rgba(255, 255, 255, 0.95);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    transition: all 0.2s ease;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.message-attachment-video-play:hover {
    background: #fff;
    transform: translate(-50%, -50%) scale(1.1);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.4);
}

.message-attachment-video-play i {
    font-size: 24px;
    color: #0d6efd;
    margin-left: 3px;
}

.message-attachment-video-label {
    position: absolute;
    bottom: 6px;
    right: 6px;
    background: rgba(0, 0, 0, 0.7);
    color: #fff;
    font-size: 10px;
    font-weight: 600;
    padding: 2px 6px;
    border-radius: 4px;
}

/* ========================================
   VIDEO GALLERY TAB
   ======================================== */
.gallery-grid-videos {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 16px;
}

.gallery-video-item {
    background: #fff;
    border: 1px solid #e9ecef;
    border-radius: 8px;
    overflow: hidden;
    transition: all 0.2s ease;
}

.gallery-video-item:hover {
    border-color: #0d6efd;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.gallery-video-preview {
    position: relative;
    width: 100%;
    height: 140px;
    background: #000;
    overflow: hidden;
}

.gallery-video-preview img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.gallery-video-placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #2c3e50 0%, #34495e 100%);
}

.gallery-video-placeholder iconify-icon {
    font-size: 48px;
    color: rgba(255, 255, 255, 0.4);
}

.gallery-video-play {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 56px;
    height: 56px;
    background: rgba(255, 255, 255, 0.95);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    transition: all 0.2s ease;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.gallery-video-play:hover {
    background: #fff;
    transform: translate(-50%, -50%) scale(1.1);
}

.gallery-video-play i {
    font-size: 28px;
    color: #0d6efd;
    margin-left: 3px;
}

.gallery-video-duration {
    position: absolute;
    bottom: 8px;
    right: 8px;
    background: rgba(0, 0, 0, 0.75);
    color: #fff;
    font-size: 11px;
    font-weight: 600;
    padding: 3px 8px;
    border-radius: 4px;
}

.gallery-video-item .gallery-item-info {
    padding: 12px;
}

.gallery-video-item .gallery-item-actions {
    padding: 0 12px 12px;
}

/* ========================================
   RESPONSIVE
   ======================================== */
@media (max-width: 768px) {
    .reply-to-box {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }

    .reply-to-content {
        width: 100%;
    }

    .reply-to-preview-text {
        max-width: 200px;
    }

    .reply-to-close {
        position: absolute;
        top: 8px;
        right: 8px;
    }

    .message-attachment-video {
        width: 140px;
        height: 100px;
    }

    .gallery-grid-videos {
        grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    }

    .gallery-video-preview {
        height: 100px;
    }
}


/**
 * ticket-priority-buttons.css
 * Stili per i bottoni priorità e highlight messaggi
 */

/* ========================================
   PRIORITY BUTTONS
   ======================================== */

.priority-buttons-group {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}

.priority-btn {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 6px 10px;
    border: 1px solid #dee2e6;
    border-radius: 6px;
    background: #fff;
    cursor: pointer;
    transition: all 0.15s ease;
    font-size: 12px;
    color: #495057;
}

.priority-btn:hover {
    border-color: #adb5bd;
    background: #f8f9fa;
}

.priority-btn .priority-icon {
    font-size: 14px;
    line-height: 1;
}

.priority-btn .priority-label {
    font-weight: 500;
}

/* Stati attivi per ogni priorità */
.priority-btn[data-priority="low"].active {
    background: linear-gradient(135deg, #d1fae5 0%, #a7f3d0 100%);
    border-color: #10b981;
    color: #047857;
}

.priority-btn[data-priority="medium"].active {
    background: linear-gradient(135deg, #dbeafe 0%, #bfdbfe 100%);
    border-color: #3b82f6;
    color: #1d4ed8;
}

.priority-btn[data-priority="high"].active {
    background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
    border-color: #f59e0b;
    color: #b45309;
}

.priority-btn[data-priority="urgent"].active {
    background: linear-gradient(135deg, #fee2e2 0%, #fecaca 100%);
    border-color: #ef4444;
    color: #b91c1c;
}

/* Hover su bottoni attivi */
.priority-btn[data-priority="low"].active:hover {
    background: linear-gradient(135deg, #a7f3d0 0%, #6ee7b7 100%);
}

.priority-btn[data-priority="medium"].active:hover {
    background: linear-gradient(135deg, #bfdbfe 0%, #93c5fd 100%);
}

.priority-btn[data-priority="high"].active:hover {
    background: linear-gradient(135deg, #fde68a 0%, #fcd34d 100%);
}

.priority-btn[data-priority="urgent"].active:hover {
    background: linear-gradient(135deg, #fecaca 0%, #fca5a5 100%);
}

/* ========================================
   MESSAGE HIGHLIGHT (per scroll a reply)
   ======================================== */

.message-item.message-highlight {
    animation: highlightPulse 2s ease-out;
}

@keyframes highlightPulse {
    0% {
        background-color: rgba(59, 130, 246, 0.3);
        box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.2);
    }
    50% {
        background-color: rgba(59, 130, 246, 0.15);
        box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.1);
    }
    100% {
        background-color: transparent;
        box-shadow: none;
    }
}

/* Cursor pointer su reply reference per indicare clickabilità */
.message-reply-reference {
    cursor: pointer;
    transition: all 0.15s ease;
}

.message-reply-reference:hover {
    background: rgba(0, 0, 0, 0.08) !important;
    transform: translateX(2px);
}

/* ========================================
   RESPONSIVE
   ======================================== */

@media (max-width: 576px) {
    .priority-buttons-group {
        gap: 4px;
    }

    .priority-btn {
        padding: 5px 8px;
        font-size: 11px;
    }

    .priority-btn .priority-label {
        display: none;
    }

    .priority-btn .priority-icon {
        font-size: 16px;
    }
}


/* ============================================
   USERNAME VALIDATION FEEDBACK
   Aggiungi questo a custom.css
   ============================================ */

/* Mostra i feedback quando l'input ha le classi di validazione */
.form-control.is-valid ~ .valid-feedback,
.form-control.is-valid ~ .invalid-feedback {
    display: block;
}

.form-control.is-invalid ~ .valid-feedback,
.form-control.is-invalid ~ .invalid-feedback {
    display: block;
}

/* Stile per il feedback di successo */
#usernameSuccess {
    color: #198754;
    font-size: 0.875em;
    margin-top: 0.25rem;
}

/* Stile per il feedback di errore */
#usernameError {
    color: #dc3545;
    font-size: 0.875em;
    margin-top: 0.25rem;
}

/* Assicura che i feedback siano visibili anche senza was-validated */
.is-valid ~ .valid-feedback {
    display: block !important;
}

.is-invalid ~ .invalid-feedback {
    display: block !important;
}

/* Animazione per lo spinner */
.input-group-text .bx-spin {
    animation: spin 1s linear infinite;
}

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

/* Colori per le icone nel gruppo input */
.input-group-text .bx-check.text-success {
    color: #198754 !important;
    font-size: 1.25rem;
}

.input-group-text .bx-x.text-danger {
    color: #dc3545 !important;
    font-size: 1.25rem;
}

.input-group-text .bx-loader-alt {
    color: #6c757d;
    font-size: 1.25rem;
}

/* Bordo colorato per l'input group */
.input-group:has(.form-control.is-valid) .input-group-text {
    border-color: #198754;
}

.input-group:has(.form-control.is-invalid) .input-group-text {
    border-color: #dc3545;
}


/* ==========================================================================
   NOTIFICHE - MODAL CONFERMA STYLES
   Da aggiungere a custom.css
   ========================================================================== */

/* Modal Conferma - Avatar Icon */
#deleteNotificationModal .avatar-lg,
#markAllReadModal .avatar-lg,
#deleteReadModal .avatar-lg,
#confirmModal .avatar-lg {
    width: 80px;
    height: 80px;
}

#deleteNotificationModal .avatar-title,
#markAllReadModal .avatar-title,
#deleteReadModal .avatar-title,
#confirmModal .avatar-title {
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Header colorati */
#deleteNotificationModal .modal-header.bg-danger,
#deleteReadModal .modal-header.bg-danger {
    border-bottom: none;
    border-radius: calc(var(--bs-modal-border-radius) - 1px) calc(var(--bs-modal-border-radius) - 1px) 0 0;
}

#markAllReadModal .modal-header.bg-primary {
    border-bottom: none;
    border-radius: calc(var(--bs-modal-border-radius) - 1px) calc(var(--bs-modal-border-radius) - 1px) 0 0;
}

/* Soft backgrounds per icone */
.bg-soft-danger {
    background-color: rgba(220, 53, 69, 0.1) !important;
}

.bg-soft-primary {
    background-color: rgba(13, 110, 253, 0.1) !important;
}

.bg-soft-success {
    background-color: rgba(25, 135, 84, 0.1) !important;
}

.bg-soft-warning {
    background-color: rgba(255, 193, 7, 0.1) !important;
}

.bg-soft-info {
    background-color: rgba(13, 202, 240, 0.1) !important;
}

.bg-soft-secondary {
    background-color: rgba(108, 117, 125, 0.1) !important;
}

/* Modal centrata animazione */
#deleteNotificationModal .modal-dialog,
#markAllReadModal .modal-dialog,
#deleteReadModal .modal-dialog,
#confirmModal .modal-dialog {
    transition: transform 0.3s ease-out;
}

/* Spinner nei pulsanti */
#deleteNotificationModal .spinner-border-sm,
#markAllReadModal .spinner-border-sm,
#deleteReadModal .spinner-border-sm,
#confirmModal .spinner-border-sm {
    width: 1rem;
    height: 1rem;
    border-width: 0.15em;
}

/* Alert nelle modal */
#deleteNotificationModal .alert,
#markAllReadModal .alert,
#deleteReadModal .alert,
#confirmModal .alert {
    margin-bottom: 0;
}

/* Footer pulsanti */
#deleteNotificationModal .modal-footer,
#markAllReadModal .modal-footer,
#deleteReadModal .modal-footer,
#confirmModal .modal-footer {
    border-top: 1px solid var(--bs-border-color);
    padding: 1rem 1.5rem;
}

/* Responsive modal su mobile */
@media (max-width: 576px) {
    #deleteNotificationModal .modal-dialog,
    #markAllReadModal .modal-dialog,
    #deleteReadModal .modal-dialog,
    #confirmModal .modal-dialog {
        margin: 0.5rem;
    }
    
    #deleteNotificationModal .modal-footer,
    #markAllReadModal .modal-footer,
    #deleteReadModal .modal-footer,
    #confirmModal .modal-footer {
        flex-direction: column;
        gap: 0.5rem;
    }
    
    #deleteNotificationModal .modal-footer .btn,
    #markAllReadModal .modal-footer .btn,
    #deleteReadModal .modal-footer .btn,
    #confirmModal .modal-footer .btn {
        width: 100%;
    }
    
    #deleteNotificationModal .avatar-lg,
    #markAllReadModal .avatar-lg,
    #deleteReadModal .avatar-lg,
    #confirmModal .avatar-lg {
        width: 60px;
        height: 60px;
    }
    
    #deleteNotificationModal .avatar-title .fs-1,
    #markAllReadModal .avatar-title .fs-1,
    #deleteReadModal .avatar-title .fs-1,
    #confirmModal .avatar-title .fs-1 {
        font-size: 1.5rem !important;
    }
}



/* ==========================================================================
   PROFILO - LOGO AGENZIA STYLES
   Da aggiungere a custom.css
   ========================================================================== */

/* Logo Upload Container */
.logo-upload-wrapper {
    position: relative;
    display: inline-block;
}

.logo-preview-container {
    position: relative;
    width: 100%;
    max-width: 300px;
    min-height: 100px;
    margin: 0 auto;
    border: 2px dashed var(--bs-border-color);
    border-radius: 8px;
    overflow: hidden;
    cursor: pointer;
    transition: all 0.3s ease;
    background-color: var(--bs-light);
}

.logo-preview-container:hover {
    border-color: var(--bs-primary);
    background-color: rgba(var(--bs-primary-rgb), 0.05);
}

.agency-logo-preview {
    width: 100%;
    max-height: 150px;
    object-fit: contain;
    padding: 15px;
}

.logo-placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 30px 20px;
}

.logo-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.6);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: white;
    opacity: 0;
    transition: opacity 0.3s ease;
    cursor: pointer;
}

.logo-preview-container:hover .logo-overlay {
    opacity: 1;
}

/* Avatar Large per modal conferma */
.avatar-lg {
    width: 80px;
    height: 80px;
}

.avatar-lg .avatar-title {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
}

/* Soft backgrounds */
.bg-soft-danger {
    background-color: rgba(220, 53, 69, 0.1) !important;
}

.bg-soft-primary {
    background-color: rgba(13, 110, 253, 0.1) !important;
}

/* Responsive */
@media (max-width: 576px) {
    .logo-preview-container {
        max-width: 100%;
    }
    
    .agency-logo-preview {
        max-height: 120px;
    }
}

.flatpickr-months .flatpickr-next-month, .flatpickr-months .flatpickr-prev-month {    top: 9px;
 height: auto;
    padding: 5px 10px;}
/* ============================================
   TICKET CHECKLIST STYLES - Multi Assignees
   Prefisso: tcl- (ticket checklist)
   ============================================ */

/* Container principale */
.tcl-section {
    max-height: 450px;
    overflow-y: auto;
}

.tcl-section::-webkit-scrollbar {
    width: 4px;
}

.tcl-section::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 2px;
}

.tcl-section::-webkit-scrollbar-thumb {
    background: #c1c1c1;
    border-radius: 2px;
}

.tcl-section::-webkit-scrollbar-thumb:hover {
    background: #a8a8a8;
}

/* Progress globale */
.tcl-global-progress {
    font-size: 11px;
    font-weight: 500;
    color: var(--bs-secondary);
}

.tcl-global-progress .progress-text {
    background: var(--bs-light);
    padding: 2px 6px;
    border-radius: 10px;
}

/* Singola checklist */
.tcl-checklist {
    background: var(--bs-light);
    border-radius: 8px;
    margin-bottom: 8px;
    overflow: hidden;
}

.tcl-header {
    display: flex;
    align-items: center;
    padding: 8px 10px;
    cursor: pointer;
    user-select: none;
    gap: 8px;
    transition: background 0.15s ease;
}

.tcl-header:hover {
    background: rgba(0,0,0,0.03);
}

.tcl-collapse-icon {
    color: var(--bs-secondary);
    font-size: 16px;
    transition: transform 0.2s ease;
    flex-shrink: 0;
}

.tcl-checklist.collapsed .tcl-collapse-icon {
    transform: rotate(-90deg);
}

.tcl-title {
    flex: 1;
    font-size: 13px;
    font-weight: 600;
    color: var(--bs-dark);
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.tcl-title-input {
    flex: 1;
    font-size: 13px;
    font-weight: 600;
    border: 1px solid var(--bs-primary);
    border-radius: 4px;
    padding: 2px 6px;
    outline: none;
}

.tcl-progress {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
}

.tcl-progress-bar {
    width: 40px;
    height: 4px;
    background: rgba(0,0,0,0.1);
    border-radius: 2px;
    overflow: hidden;
}

.tcl-progress-fill {
    height: 100%;
    background: var(--bs-success);
    transition: width 0.3s ease;
    border-radius: 2px;
}

.tcl-progress-text {
    font-size: 11px;
    color: var(--bs-secondary);
    min-width: 32px;
    text-align: right;
}

.tcl-actions {
    display: flex;
    gap: 2px;
    opacity: 0;
    transition: opacity 0.15s ease;
}

.tcl-header:hover .tcl-actions {
    opacity: 1;
}

.tcl-actions .btn {
    padding: 2px 4px;
    font-size: 14px;
    line-height: 1;
}

/* Lista items */
.tcl-items-list {
    padding: 0 10px 10px;
    list-style: none;
    margin: 0;
}

.tcl-checklist.collapsed .tcl-items-list,
.tcl-checklist.collapsed .tcl-add-item {
    display: none;
}

/* Singolo item */
.tcl-item {
    display: flex;
    align-items: flex-start;
    padding: 6px 0;
    gap: 8px;
    border-bottom: 1px solid rgba(0,0,0,0.05);
    cursor: grab;
}

.tcl-item:last-child {
    border-bottom: none;
}

.tcl-item.dragging {
    opacity: 0.5;
    background: var(--bs-primary-bg-subtle);
    cursor: grabbing;
}

.tcl-item.drag-over {
    border-top: 2px solid var(--bs-primary);
}

.tcl-item-drag {
    color: var(--bs-secondary);
    opacity: 0;
    cursor: grab;
    font-size: 14px;
    padding-top: 2px;
    transition: opacity 0.15s ease;
}

.tcl-item:hover .tcl-item-drag {
    opacity: 0.5;
}

.tcl-item-checkbox {
    flex-shrink: 0;
    padding-top: 2px;
}

.tcl-item-checkbox input[type="checkbox"] {
    width: 16px;
    height: 16px;
    cursor: pointer;
    accent-color: var(--bs-success);
}

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

.tcl-item-text {
    font-size: 12px;
    color: var(--bs-dark);
    word-break: break-word;
    line-height: 1.4;
}

.tcl-item.checked .tcl-item-text {
    text-decoration: line-through;
    color: var(--bs-secondary);
}

.tcl-item-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 4px;
    align-items: center;
}

/* Multi-assignees container */
.tcl-item-assignees {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}

/* Singolo assegnatario */
.tcl-item-assignee {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 10px;
    color: var(--bs-secondary);
    background: rgba(0,0,0,0.05);
    padding: 2px 4px 2px 6px;
    border-radius: 12px;
    transition: background 0.15s ease;
}

.tcl-item-assignee:hover {
    background: rgba(0,0,0,0.1);
}

.tcl-item-assignee img {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    object-fit: cover;
}

.tcl-item-assignee .assignee-initials {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: var(--bs-secondary);
    color: white;
    font-size: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
}

.tcl-item-assignee .assignee-name {
    max-width: 60px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Pulsante rimuovi assegnatario */
.tcl-item-assignee .assignee-remove {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 14px;
    height: 14px;
    padding: 0;
    border: none;
    background: transparent;
    color: var(--bs-secondary);
    cursor: pointer;
    border-radius: 50%;
    opacity: 0;
    transition: all 0.15s ease;
    font-size: 12px;
}

.tcl-item-assignee:hover .assignee-remove {
    opacity: 1;
}

.tcl-item-assignee .assignee-remove:hover {
    background: var(--bs-danger);
    color: white;
}

/* Pulsante aggiungi assegnatario */
.tcl-add-assignee-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    padding: 0;
    border: 1px dashed var(--bs-border-color);
    background: transparent;
    color: var(--bs-secondary);
    cursor: pointer;
    border-radius: 50%;
    font-size: 12px;
    transition: all 0.15s ease;
    opacity: 0.6;
}

.tcl-add-assignee-btn:hover {
    border-color: var(--bs-primary);
    color: var(--bs-primary);
    opacity: 1;
}

.tcl-item-due {
    font-size: 10px;
    padding: 2px 6px;
    border-radius: 10px;
}

.tcl-item-due.overdue {
    background: var(--bs-danger-bg-subtle);
    color: var(--bs-danger);
}

.tcl-item-due.today {
    background: var(--bs-warning-bg-subtle);
    color: var(--bs-warning-text-emphasis);
}

.tcl-item-due.upcoming {
    background: var(--bs-info-bg-subtle);
    color: var(--bs-info-text-emphasis);
}

.tcl-item-checked-info {
    font-size: 10px;
    color: var(--bs-success);
    font-style: italic;
}

.tcl-item-actions {
    display: flex;
    gap: 2px;
    opacity: 0;
    transition: opacity 0.15s ease;
    flex-shrink: 0;
}

.tcl-item:hover .tcl-item-actions {
    opacity: 1;
}

.tcl-item-actions .btn {
    padding: 2px 4px;
    font-size: 12px;
    line-height: 1;
}

/* Form aggiunta item */
.tcl-add-item {
    padding: 6px 0;
}

.tcl-add-item-input {
    display: flex;
    gap: 6px;
}

.tcl-add-item-input input {
    flex: 1;
    font-size: 12px;
    padding: 4px 8px;
    border: 1px dashed var(--bs-border-color);
    border-radius: 4px;
    background: transparent;
}

.tcl-add-item-input input:focus {
    border-style: solid;
    border-color: var(--bs-primary);
    outline: none;
}

.tcl-add-item-input input::placeholder {
    color: var(--bs-secondary);
    font-style: italic;
}

.tcl-add-item-btn {
    padding: 4px 8px;
    font-size: 12px;
}

/* Form aggiunta checklist */
.tcl-add-form {
    margin-top: 8px;
}

.tcl-add-form .input-group {
    flex-wrap: nowrap;
}

.tcl-add-form input {
    font-size: 12px;
}

.tcl-add-form .btn {
    padding: 4px 8px;
}

/* Empty state */
.tcl-empty {
    text-align: center;
    padding: 16px;
    color: var(--bs-secondary);
}

.tcl-empty-icon {
    font-size: 32px;
    opacity: 0.5;
    margin-bottom: 8px;
}

.tcl-empty-text {
    font-size: 12px;
}

/* Loading state */
.tcl-loading {
    color: var(--bs-secondary);
}

/* Responsive adjustments */
@media (max-width: 992px) {
    .tcl-section {
        max-height: 350px;
    }
    
    .tcl-item-assignee .assignee-name {
        display: none;
    }
}

/* Dark mode support */
[data-bs-theme="dark"] .tcl-checklist {
    background: rgba(255,255,255,0.05);
}

[data-bs-theme="dark"] .tcl-header:hover {
    background: rgba(255,255,255,0.05);
}

[data-bs-theme="dark"] .tcl-item {
    border-bottom-color: rgba(255,255,255,0.05);
}

[data-bs-theme="dark"] .tcl-add-item-input input {
    border-color: rgba(255,255,255,0.1);
}

[data-bs-theme="dark"] .tcl-item-assignee {
    background: rgba(255,255,255,0.1);
}

/* Animazioni */
@keyframes tclItemAdded {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.tcl-item.just-added {
    animation: tclItemAdded 0.3s ease;
}

@keyframes tclChecklistAdded {
    from {
        opacity: 0;
        transform: scale(0.95);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

.tcl-checklist.just-added {
    animation: tclChecklistAdded 0.3s ease;
}


/* =====================================================
   TIMESHEET STYLES
   Aggiungi questo codice al file custom.css
   ===================================================== */

/* Select2 Custom Styles for Timesheet */
.select2-container--bootstrap-5 .select2-selection {
    min-height: 38px;
}

.select2-container--bootstrap-5 .select2-selection--single .select2-selection__rendered {
    padding: 0.375rem 0.75rem;
    line-height: 1.5;
}

/* Fix Select2 in modal */
.modal .select2-container {
    width: 100% !important;
}

.select2-container--bootstrap-5 .select2-dropdown {
    border-color: #dee2e6;
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
}

.select2-container--bootstrap-5 .select2-results__option--highlighted[aria-selected] {
    background-color: #0d6efd;
}


/* ========================================
   TIMESHEET STYLES - DIGO STUDIO
   ======================================== */

/* === STAT ICONS === */
.stat-icon {
    width: 40px;
    height: 40px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
}

/* === QUICK ADD BAR === */
.quick-add-bar .card {
    border-radius: 10px;
}

.quick-add-bar input[type="time"] {
    font-family: monospace;
}

.quick-time-group {
    background: #f8fafc;
    padding: 0 8px;
    border-radius: 6px;
    border: 1px solid #e5e7eb;
}

.quick-time-group select {
    border: none;
    background: white;
}

.quick-time-group .badge {
    font-family: 'SF Mono', 'Monaco', 'Roboto Mono', monospace;
    font-size: 13px;
    font-weight: 600;
}

#quickActivity {
    transition: border-color 0.2s, box-shadow 0.2s;
}

#quickActivity:focus {
    box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.25);
}

/* Timer Blink Animation */
@keyframes blink {
    0%, 50% { opacity: 1; }
    51%, 100% { opacity: 0.3; }
}

.blink {
    animation: blink 1s infinite;
}

.timer-big {
    font-family: 'SF Mono', 'Monaco', 'Inconsolata', 'Roboto Mono', monospace;
}

/* === TIMESHEET GRID (VISTA GIORNALIERA) === */
.timesheet-grid {
    border-top: 1px solid #e5e7eb;
}

.timesheet-slot {
    display: flex;
    align-items: stretch;
    border-bottom: 1px solid #e5e7eb;
    min-height: 50px;
    transition: all 0.15s ease;
    position: relative;
    cursor: pointer;
}

.timesheet-slot:hover:not(.has-entry) {
    background-color: #f8fafc;
}

.timesheet-slot.has-entry {
    cursor: default;
}

.timesheet-slot.entry-start {
    cursor: pointer;
}

.timesheet-slot.entry-continuation {
    border-top: none;
    min-height: 30px;
}

.slot-time {
    padding: 5px 12px;
    font-size: 12px;
    font-weight: 500;
    display: flex;
    align-items: center;
}

.slot-content {
    padding: 8px 12px;
    display: flex;
    align-items: center;
    min-width: 0;
}

.slot-placeholder {
    font-size: 13px;
    color: #9ca3af!important;
}

.slot-placeholder i {
    margin-right: 4px;
}

.entry-info {
    min-width: 0;
}

.entry-client {
    font-size: 14px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}


.slot-actions {
    display: flex;
    align-items: center;
    gap: 4px;
    padding-right: 8px;
    opacity: 0;
    transition: opacity 0.15s;
}

.timesheet-slot:hover .slot-actions {
    opacity: 1;
}

.slot-actions .btn {
    padding: 4px 8px;
}

/* === RESIZE HANDLE === */
.resize-handle {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 8px;
    background: linear-gradient(to bottom, transparent, rgba(0,0,0,0.08));
    cursor: ns-resize;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.2s;
}

.resize-handle i {
    font-size: 10px;
    color: #6b7280;
}

.timesheet-slot:hover .resize-handle,
.resize-handle:hover {
    opacity: 1;
}

/* Durante il resize */
body.is-resizing {
    cursor: ns-resize !important;
    user-select: none !important;
}

body.is-resizing * {
    cursor: ns-resize !important;
}

.timesheet-slot.drag-target {
    background-color: rgba(59, 130, 246, 0.15) !important;
    border: 2px dashed #3b82f6 !important;
    box-shadow: inset 0 0 10px rgba(59, 130, 246, 0.1);
}

/* === DRAG & DROP OVER === */
.timesheet-slot.drag-over,
.week-cell.drag-over {
    background-color: rgba(16, 185, 129, 0.15) !important;
    border: 2px dashed #10b981 !important;
}

/* === WEEK GRID (VISTA SETTIMANALE) === */
.week-grid {
    overflow-x: auto;
}

.week-header {
    display: flex;
    border-bottom: 2px solid #e5e7eb;
    position: sticky;
    top: 0;
    background: white;
    z-index: 10;
}

.week-time-col {
    width: 60px;
    min-width: 60px;
    padding: 8px;
    font-size: 11px;
    color: #6b7280;
    background: #f9fafb;
    border-right: 1px solid #e5e7eb;
    text-align: center;
}

.week-day-col {
    flex: 1;
    min-width: 100px;
    padding: 10px;
    text-align: center;
    border-right: 1px solid #e5e7eb;
}

.week-day-col:last-child {
    border-right: none;
}

.week-day-col.today {
    background-color: #eff6ff;
}
.sidebar_timesheet .card-header .card-title{gap: 5px;}
.week-day-col .day-name {
    font-size: 11px;
    text-transform: uppercase;
    color: #6b7280;
    font-weight: 600;
}

.week-day-col .day-number {
    font-size: 16px;
    font-weight: 600;
}
.week-day-col .day-number.bg-primary{
    color: #ffffff;
}
.week-body {
    max-height: calc(100vh - 400px);
    overflow-y: auto;
}

.week-row {
    display: flex;
    border-bottom: 1px solid #f3f4f6;
}

.week-row:hover {
    background-color: #fafafa;
}

.week-cell {
    flex: 1;
    min-width: 100px;
    min-height: 30px;
    border-right: 1px solid #f3f4f6;
    cursor: pointer;
    transition: background-color 0.15s;
    position: relative;
}

.week-cell:last-child {
    border-right: none;
}

.week-cell:hover:not(.has-entry) {
    background-color: #f0f9ff;
}

.week-cell.has-entry.entry-start {
    cursor: pointer;
}

.week-cell.entry-continuation {
    border-top: none;
}

.week-entry-info {
    font-size: 12px;
    padding: 2px 4px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.week-entry-info i {
    font-size: 11px;
}

/* === DRAGGABLE ITEMS (SIDEBAR) === */
.draggable-items {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.draggable-item {
    display: flex;
    align-items: center;
    padding: 8px 10px;
    background: white;
    border: 1px solid #e5e7eb;
    border-radius: 6px;
    cursor: grab;
    transition: all 0.15s;
    font-size: 13px;
}

.draggable-item:hover {
    border-color: #3b82f6;
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}

.draggable-item:active,
.draggable-item.dragging {
    cursor: grabbing;
    opacity: 0.6;
    transform: scale(0.98);
}

.draggable-item.template {
    padding: 6px 8px;
}

.template-icon {
    width: 28px;
    height: 28px;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    flex-shrink: 0;
}

/* === ACTIVITY BUTTONS === */
.activity-buttons {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 6px;
}

.btn-activity-quick {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 10px;
    background: white;
    border: 1px solid #e5e7eb;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.15s;
    font-size: 12px;
    text-align: left;
}

.btn-activity-quick:hover {
    border-color: var(--activity-color);
    background-color: color-mix(in srgb, var(--activity-color) 10%, white);
}

.btn-activity-quick i {
    color: var(--activity-color);
    font-size: 14px;
}

.btn-activity-quick span {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* === ACTIVITY TYPE GRID (MODAL) === */
.activity-type-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 8px;
}

.activity-type-item {
    margin: 0;
    padding: 0;
}

.activity-type-item .form-check-input {
    display: none;
}

.activity-type-item .form-check-label {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
    border: 2px solid #e5e7eb;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.15s;
    background: white;
}

.activity-type-item .form-check-label i {
    font-size: 18px;
    color: var(--activity-color);
}

.activity-type-item .form-check-label span {
    font-size: 13px;
    font-weight: 500;
}

.activity-type-item .form-check-input:checked + .form-check-label {
    border-color: var(--activity-color);
    background-color: color-mix(in srgb, var(--activity-color) 10%, white);
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--activity-color) 20%, white);
}

.activity-type-item .form-check-label:hover {
    border-color: var(--activity-color);
}

/* === SHORTCUTS BADGES === */
.badge kbd {
    background: #e5e7eb;
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 10px;
    font-weight: 600;
    margin-right: 4px;
}

/* === RESPONSIVE === */
@media (max-width: 991px) {
    .quick-add-bar form {
        flex-direction: column;
        align-items: stretch !important;
    }
    
    .quick-add-bar select,
    .quick-add-bar input {
        width: 100% !important;
    }
    
    .week-cell {
        min-width: 80px;
    }
    
    .week-entry-info span {
        display: none !important;
    }
    
    .stat-icon {
        width: 32px;
        height: 32px;
        font-size: 14px;
    }
}

@media (max-width: 767px) {
    .slot-time {
        width: 50px;
        font-size: 10px;
        padding: 8px 4px;
    }
    
    .entry-client {
        font-size: 12px;
    }
    

    .week-time-col {
        width: 40px;
        min-width: 40px;
        font-size: 10px;
    }
    
    .week-cell {
        min-width: 60px;
    }
    
    .activity-buttons {
        grid-template-columns: 1fr;
    }
}

/* === PAGE TITLE BOX === */
.page-title-box {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
}

/* === PROGRESS BAR COLORS === */
.progress-bar.bg-primary {
    background-color: #3b82f6 !important;
}

.progress-bar.bg-info {
    background-color: #06b6d4 !important;
}

/* === CARD HEADERS === */
.card-header.bg-primary-subtle {
    background-color: #eff6ff !important;
    border-bottom: 1px solid #dbeafe;
}

.card-header.bg-success-subtle {
    background-color: #ecfdf5 !important;
    border-bottom: 1px solid #d1fae5;
}

/* === UTILITIES === */
.min-w-0 {
    min-width: 0;
}

.font-32 {
    font-size: 32px;
}


#quickAddForm .choices{width: 240px;margin-bottom: 0;}






/**
 * DIGO Studio - Stili Calendario Ferie/Permessi/Malattia
 * Aggiungere a custom.css
 */

/* =====================================================
   CALENDARIO FULLCALENDAR
   ===================================================== */

/* Container principale */
#calendar {
    min-height: 700px;
    max-height: 100%;
}

/* Header toolbar */
.fc .fc-toolbar-title {
    font-size: 1.25rem;
    font-weight: 600;
    text-transform: capitalize;
}

.fc .fc-button {
    padding: 0.375rem 0.75rem;
    font-size: 0.875rem;
    border-radius: 0.375rem;
}

.fc .fc-button-primary {
    background-color: var(--bs-primary);
    border-color: var(--bs-primary);
}

.fc .fc-button-primary:not(:disabled).fc-button-active,
.fc .fc-button-primary:not(:disabled):active {
    background-color: var(--bs-primary);
    border-color: var(--bs-primary);
    opacity: 0.85;
}

.fc .fc-button-primary:hover {
    background-color: var(--bs-primary);
    border-color: var(--bs-primary);
    opacity: 0.9;
}

/* Celle del calendario */
.fc .fc-daygrid-day {
    cursor: pointer;
    transition: background-color 0.15s ease;
}

.fc .fc-daygrid-day:hover {
    background-color: rgba(var(--bs-primary-rgb), 0.05);
}

.fc .fc-daygrid-day.fc-day-today {
    background-color: rgba(var(--bs-primary-rgb), 0.1);
}

.fc .fc-daygrid-day-number {
    font-weight: 500;
    padding: 8px;
}

/* Weekend */
.fc .fc-day-sat,
.fc .fc-day-sun {
    background-color: rgba(0, 0, 0, 0.02);
}

.fc .fc-day-sat .fc-daygrid-day-number,
.fc .fc-day-sun .fc-daygrid-day-number {
    color: #6c757d;
}

/* =====================================================
   EVENTI
   ===================================================== */

/* Stile base eventi */
.fc-event {
    border-radius: 4px;
    padding: 2px 6px;
    font-size: 0.8rem;
    font-weight: 500;
    cursor: pointer;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.fc-event:hover {
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

/* Eventi in attesa - bordo giallo */
.fc-event.event-pending {
    border-width: 2px;
    border-style: dashed;
    animation: pulse-border 2s infinite;
}

@keyframes pulse-border {
    0%, 100% {
        border-color: #ffc107;
    }
    50% {
        border-color: #ff9800;
    }
}

/* Eventi collaboratore - più trasparenti */
.fc-event.event-collaboratore {
    opacity: 0.7;
}

/* Eventi rifiutati - barrati */
.fc-event.event-rejected {
    text-decoration: line-through;
    opacity: 0.6;
}

/* Dot view (quando troppi eventi) */
.fc-daygrid-event-dot {
    border-width: 6px;
}

/* =====================================================
   SIDEBAR STATISTICHE
   ===================================================== */

/* Progress bar ferie */
.progress {
    border-radius: 0.5rem;
    overflow: hidden;
}

/* Statistiche box */
.col-4 .p-2 {
    border-radius: 0.5rem;
}

.col-4 h4 {
    font-size: 1.5rem;
    line-height: 1;
}

.col-4 small {
    font-size: 0.7rem;
}

/* =====================================================
   LEGENDA
   ===================================================== */

.card-body .d-flex.align-items-center span:first-child {
    flex-shrink: 0;
}

/* =====================================================
   MODAL RICHIESTA
   ===================================================== */

/* Form elementi */
#richiestaAssenzaModal .form-label {
    font-weight: 500;
    margin-bottom: 0.35rem;
}

/* Hint sotto i campi */
.tipo-hint {
    font-size: 0.8rem;
    display: block;
    margin-top: 0.25rem;
}

/* Riepilogo giorni */
#riepilogoGiorni {
    background-color: #f8f9fa;
    border-radius: 0.5rem;
}

#riepilogoGiorni .text-danger {
    font-weight: 600;
}

/* =====================================================
   OFFCANVAS RICHIESTE PENDENTI
   ===================================================== */

#pendingRequestsOffcanvas .card {
    border: 1px solid rgba(0, 0, 0, 0.1);
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

#pendingRequestsOffcanvas .card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

#pendingRequestsOffcanvas .btn-sm {
    padding: 0.25rem 0.5rem;
    font-size: 0.8rem;
}

/* =====================================================
   MODAL DETTAGLI
   ===================================================== */

#dettaglioRichiestaModal .table th {
    font-weight: 500;
    color: #6c757d;
    white-space: nowrap;
}

#dettaglioRichiestaModal .table td {
    vertical-align: middle;
}

/* =====================================================
   FILTRI
   ===================================================== */

.filter-tipo,
.filter-stato,
.filter-tipo-utente {
    cursor: pointer;
}

.form-check-label .badge {
    font-size: 0.75rem;
    padding: 0.25rem 0.5rem;
}

@media (max-width: 767.98px) {
    /* Calendario più compatto */
    #calendar {
        min-height: 400px;
    }
    
    .fc .fc-toolbar {
        flex-direction: column;
        gap: 0.5rem;
    }
    
    .fc .fc-toolbar-title {
        font-size: 1.1rem;
    }
    
    .fc-event {
        font-size: 0.7rem;
        padding: 1px 4px;
    }
    
    /* Offcanvas più largo */
    #pendingRequestsOffcanvas {
        width: 100% !important;
        max-width: 100%;
    }
}


/* =====================================================
   ANIMAZIONI
   ===================================================== */

/* Fade in per eventi caricati */
.fc-event {
    animation: fadeIn 0.3s ease;
}

/* Spinner caricamento */
.spinner-border {
    width: 2rem;
    height: 2rem;
}


/**
 * calendar-custom.css
 * Stili personalizzati per il modulo Calendario - V2
 * Da aggiungere al file custom.css principale
 */

/* ===================================
   CALENDARIO - STILI GENERALI
   =================================== */

#calendar {
    font-family: inherit;
}

/* Header toolbar */
.fc .fc-toolbar {
    flex-wrap: wrap;
    gap: 10px;
}

.fc .fc-toolbar-title {
    font-size: 1.25rem;
    font-weight: 600;
}

/* Pulsanti toolbar */
.fc .fc-button {
    padding: 0.4rem 0.75rem;
    font-size: 0.875rem;
    border-radius: 0.375rem;
    font-weight: 500;
    text-transform: capitalize;
}

.fc .fc-button-primary {
    background-color: var(--bs-primary, #3b82f6);
    border-color: var(--bs-primary, #3b82f6);
}

.fc .fc-button-primary:hover {
    background-color: var(--bs-primary, #2563eb);
    border-color: var(--bs-primary, #2563eb);
}

.fc .fc-button-primary:disabled {
    background-color: var(--bs-primary, #3b82f6);
    border-color: var(--bs-primary, #3b82f6);
    opacity: 0.65;
}

.fc .fc-button-primary:not(:disabled).fc-button-active,
.fc .fc-button-primary:not(:disabled):active {
    background-color: var(--bs-primary, #1d4ed8);
    border-color: var(--bs-primary, #1d4ed8);
}

/* Celle del calendario */
.fc .fc-daygrid-day {
    transition: background-color 0.15s ease;
}

.fc .fc-daygrid-day:hover {
    background-color: rgba(59, 130, 246, 0.05);
}

.fc .fc-daygrid-day.fc-day-today {
    background-color: rgba(59, 130, 246, 0.1) !important;
}

.fc .fc-daygrid-day-number {
    padding: 8px;
    font-weight: 500;
}

/* Eventi */
.fc-event {
    cursor: pointer;
    border-radius: 4px;
    padding: 2px 6px;
    font-size: 0.8125rem;
    border: none !important;
    text-align: left;
    transition: transform 0.1s ease, box-shadow 0.1s ease;
}

.fc-event:hover {
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

.fc-event .fc-event-title {
    font-weight: 500;
    display: flex;
    align-items: center;
}

.fc-event .fc-event-time {
    font-weight: 400;
    opacity: 0.9;
}

/* Vista lista/agenda */
.fc-list-event {
    cursor: pointer;
}

.fc-list-event:hover td {
    background-color: rgba(59, 130, 246, 0.05);
}

.fc-list-day-cushion {
    background-color: var(--bs-light, #f8f9fa) !important;
}

/* Responsive */
@media (max-width: 768px) {
    .fc .fc-toolbar {
        flex-direction: column;
        align-items: stretch;
    }
    
    .fc .fc-toolbar-chunk {
        display: flex;
        justify-content: center;
        margin-bottom: 8px;
    }
    
    .fc .fc-toolbar-title {
        font-size: 1.1rem;
    }
}

/* ===================================
   COLOR PICKER
   =================================== */

.color-option {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
    border: 2px solid transparent;
}

.color-option:hover {
    transform: scale(1.15);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

.color-option.selected {
    border-color: #1a1a1a;
    transform: scale(1.15);
}

.color-option .check-icon {
    color: white;
    font-size: 14px;
    display: none;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

.color-option.selected .check-icon {
    display: block;
}

/* ===================================
   FILTRI ACCORDION
   =================================== */

.filters-card .filters-header {
    cursor: pointer;
    transition: background-color 0.15s ease;
}

.filters-card .filters-header:hover {
    background-color: rgba(0, 0, 0, 0.02);
}

.filters-card .collapse-icon {
    transition: transform 0.3s ease;
}

.filters-card .collapse-icon.rotated {
    transform: rotate(180deg);
}

/* ===================================
   MODAL EVENTO
   =================================== */

#eventModal .modal-header {
    border-bottom: 1px solid var(--bs-border-color, #dee2e6);
}

#eventModal .modal-footer {
    border-top: 1px solid var(--bs-border-color, #dee2e6);
}

#eventDescription {
    resize: vertical;
    min-height: 80px;
}

.time-fields {
    transition: opacity 0.2s ease, max-height 0.2s ease;
}

/* ===================================
   SELECT2 CUSTOMIZATION
   =================================== */

.select2-container--bootstrap-5 .select2-selection {
    min-height: 38px;
}

.select2-container--bootstrap-5 .select2-selection--multiple .select2-selection__choice {
    background-color: var(--bs-primary, #3b82f6);
    border: none;
    color: white;
    padding: 2px 8px;
    border-radius: 4px;
    margin: 3px 3px 3px 0;
}

.select2-container--bootstrap-5 .select2-selection--multiple .select2-selection__choice__remove {
    color: white;
    opacity: 0.7;
    margin-right: 5px;
}

.select2-container--bootstrap-5 .select2-selection--multiple .select2-selection__choice__remove:hover {
    opacity: 1;
    color: white;
}

/* Fix Select2 dentro modal */
.select2-container--open {
    z-index: 9999 !important;
}

/* ===================================
   LEGENDA
   =================================== */

.card-body.py-2 {
    padding-top: 0.5rem !important;
    padding-bottom: 0.5rem !important;
}

.card-body.py-2 .badge {
    font-size: 0.75rem;
    padding: 0.25rem 0.5rem;
}

/* ===================================
   STATI EVENTI
   =================================== */

/* Evento completato - stile barrato/opacity */
.fc-event[data-status="completed"] {
    opacity: 0.6;
}

.fc-event[data-status="completed"] .fc-event-title {
    text-decoration: line-through;
}

/* ===================================
   DARK MODE SUPPORT
   =================================== */

[data-bs-theme="dark"] .fc .fc-daygrid-day:hover {
    background-color: rgba(255, 255, 255, 0.05);
}

[data-bs-theme="dark"] .fc .fc-daygrid-day.fc-day-today {
    background-color: rgba(59, 130, 246, 0.2) !important;
}

[data-bs-theme="dark"] .fc-list-day-cushion {
    background-color: var(--bs-dark, #212529) !important;
}

[data-bs-theme="dark"] .color-option.selected {
    border-color: #ffffff;
}

[data-bs-theme="dark"] .select2-container--bootstrap-5 .select2-dropdown {
    background-color: var(--bs-dark, #212529);
    border-color: var(--bs-border-color, #495057);
}

[data-bs-theme="dark"] .select2-container--bootstrap-5 .select2-results__option {
    color: var(--bs-body-color, #dee2e6);
}

[data-bs-theme="dark"] .select2-container--bootstrap-5 .select2-results__option--highlighted {
    background-color: var(--bs-primary, #3b82f6);
}


/* ===================================
   RESPONSIVE MODAL
   =================================== */

@media (max-width: 768px) {
    #eventModal .modal-dialog {
        margin: 0.5rem;
    }
    
    #eventModal .row > [class*="col-md-"] {
        margin-bottom: 0;
    }
    
    #eventModal .col-md-6:first-child {
        border-bottom: 1px solid var(--bs-border-color, #dee2e6);
        padding-bottom: 1rem;
        margin-bottom: 1rem;
    }
}

.select2-container--default .select2-selection--single .select2-selection__arrow{
    display: none;
}
.select2-container--default .select2-selection--single {
background-color: var(--bs-secondary-bg);
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%2336404a' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right 1rem center;
    background-size: 14px 10px;
    background-color: #fff;
    border: 0!important;
    border-radius: 0!important;
    height: auto!important;
}
.select2-dropdown{
 border: 1px solid var(--bs-border-color)!important;   
}
.select2-container--default .select2-selection--single .select2-selection__clear{height: auto!important;margin-right: 0!important;}
.select2-container--default .select2-selection--single .select2-selection__rendered, .select2-container--default .select2-selection--multiple{
    display: block;
    width: 100%;
    padding: 0.5rem 2.5rem 0.5rem 1rem!important;
    font-size: 0.875rem!important;
    font-weight: 400;
    line-height: 1.5!important;
    color: var(--bs-body-color);
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    
    border: var(--bs-border-width) solid var(--bs-border-color)!important;
    border-radius: 0.35rem;
    -webkit-transition: border-color 0.15s 
ease-in-out, -webkit-box-shadow 0.15s 
ease-in-out;
    transition: border-color 0.15s 
ease-in-out, -webkit-box-shadow 0.15s 
ease-in-out;
    transition: border-color 0.15s 
ease-in-out, box-shadow 0.15s 
ease-in-out;
    transition: border-color 0.15s 
ease-in-out, box-shadow 0.15s 
ease-in-out, -webkit-box-shadow 0.15s 
ease-in-out;
}

.select2-container--default .select2-selection--multiple .select2-selection__choice{
    border:1px solid var(--bs-border-color)!important;
    background-color: var(--bs-border-color)!important;
    padding-right: 5px!important;
}
.select2-container--default .select2-selection--multiple .select2-selection__choice__remove{border-right: 0!important;}



/* ============================================
   CALENDARIO - STILI CUSTOM
   calendar-custom.css
   ============================================ */

/* Layout principale con sidebar */
.calendar-layout {
    display: flex;
    gap: 1.5rem;
    align-items: flex-start;
}

.calendar-main {
    flex: 1;
    min-width: 0;
}

.calendar-sidebar {
    width: 320px;
    flex-shrink: 0;
    position: sticky;
    top: 1rem;
    max-height: calc(100vh - 2rem);
    display: flex;
    flex-direction: column;
    transition: width 0.3s ease;
}

.calendar-sidebar.collapsed {
    width: 48px;
}

.calendar-sidebar.collapsed .sidebar-card {
    padding: 0;
}

.calendar-sidebar.collapsed .sidebar-header {
    padding: 0.75rem;
    justify-content: center;
}

.calendar-sidebar.collapsed .sidebar-header h3 {
    display: none;
}

.calendar-sidebar.collapsed .sidebar-content {
    display: none;
}

.calendar-sidebar.collapsed .sidebar-footer {
    display: none;
}

.calendar-sidebar.collapsed .sidebar-toggle {
    margin: 0;
}

.calendar-sidebar.collapsed .sidebar-toggle-icon {
    transform: rotate(180deg);
}

/* Header del calendario */
.calendar-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.5rem;
}

.calendar-title-section h2 {
    font-size: 1.75rem;
    font-weight: 700;
    color: #1f2937;
    margin: 0;
}

.calendar-title-section .subtitle {
    font-size: 0.875rem;
    color: #6b7280;
    font-weight: 500;
}

/* View Toggle Buttons */
.view-toggle {
    display: inline-flex;
    background: #f3f4f6;
    border-radius: 10px;
    padding: 4px;
    gap: 4px;
}

.view-toggle-btn {
    padding: 8px 16px;
    border: none;
    background: transparent;
    border-radius: 8px;
    font-size: 0.875rem;
    font-weight: 500;
    color: #6b7280;
    cursor: pointer;
    transition: all 0.2s ease;
}

.view-toggle-btn:hover {
    color: #374151;
}

.view-toggle-btn.active {
    background: white;
    color: #1f2937;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}

/* Quick Filters */
.quick-filters {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    align-items: center;
}

.quick-filter-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    border-radius: 20px;
    font-size: 0.8125rem;
    font-weight: 500;
    border: 1px solid #e5e7eb;
    background: white;
    color: #374151;
    cursor: pointer;
    transition: all 0.2s ease;
}

.quick-filter-btn:hover {
    border-color: #3b82f6;
    color: #3b82f6;
}

.quick-filter-btn.active {
    background: #3b82f6;
    border-color: #3b82f6;
    color: white;
}

.quick-filter-btn .dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
}

/* ============================================
   SIDEBAR SCADENZE
   ============================================ */

.sidebar-card {
    background: white;
    border-radius: 16px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    height: 100%;
}

.sidebar-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 1.25rem;
    border-bottom: 1px solid #f3f4f6;
    flex-shrink: 0;
}

.sidebar-header h3 {
    font-size: 1rem;
    font-weight: 600;
    color: #1f2937;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 8px;
}

.sidebar-header .badge {
    background: #3b82f6;
    color: white;
    font-size: 0.75rem;
    padding: 2px 8px;
    border-radius: 10px;
    font-weight: 600;
}

.sidebar-toggle {
    background: none;
    border: none;
    padding: 6px;
    cursor: pointer;
    color: #6b7280;
    border-radius: 6px;
    transition: all 0.2s;
}

.sidebar-toggle:hover {
    background: #f3f4f6;
    color: #374151;
}

.sidebar-toggle-icon {
    transition: transform 0.3s ease;
}

.sidebar-content {
    flex: 1;
    overflow-y: auto;
    padding: 0.5rem 0;
}

.sidebar-content::-webkit-scrollbar {
    width: 6px;
}

.sidebar-content::-webkit-scrollbar-track {
    background: transparent;
}

.sidebar-content::-webkit-scrollbar-thumb {
    background: #e5e7eb;
    border-radius: 3px;
}

.sidebar-content::-webkit-scrollbar-thumb:hover {
    background: #d1d5db;
}

/* Gruppi scadenze */
.upcoming-group {
    margin-bottom: 0.5rem;
}

.upcoming-group-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.5rem 1.25rem;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #6b7280;
    cursor: pointer;
    user-select: none;
    transition: background 0.2s;
}

.upcoming-group-header:hover {
    background: #f9fafb;
}

.upcoming-group-header .count {
    background: #f3f4f6;
    color: #374151;
    font-size: 0.6875rem;
    padding: 2px 6px;
    border-radius: 6px;
}

.upcoming-group-header.overdue {
    color: #dc2626;
}

.upcoming-group-header.overdue .count {
    background: #fef2f2;
    color: #dc2626;
}

.upcoming-group-header.today {
    color: #2563eb;
}

.upcoming-group-header.today .count {
    background: #eff6ff;
    color: #2563eb;
}

.upcoming-group-items {
    padding: 0 0.75rem;
}

/* Item scadenza */
.upcoming-item {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 10px 12px;
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.2s ease;
    margin-bottom: 4px;
    border-left: 3px solid transparent;
}

.upcoming-item:hover {
    background: #f9fafb;
}

.upcoming-item:last-child {
    margin-bottom: 0;
}

.upcoming-item-color {
    width: 4px;
    height: 100%;
    min-height: 36px;
    border-radius: 2px;
    flex-shrink: 0;
}

.upcoming-item-icon {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 1rem;
}

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

.upcoming-item-title {
    font-size: 0.875rem;
    font-weight: 500;
    color: #1f2937;
    line-height: 1.3;
    margin-bottom: 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.upcoming-item-meta {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.75rem;
    color: #6b7280;
}

.upcoming-item-meta iconify-icon {
    font-size: 0.875rem;
}

.upcoming-item-time {
    display: inline-flex;
    align-items: center;
    gap: 3px;
}

.upcoming-item-client {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    max-width: 120px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.upcoming-item-actions {
    opacity: 0;
    transition: opacity 0.2s;
}

.upcoming-item:hover .upcoming-item-actions {
    opacity: 1;
}

.upcoming-item-action {
    background: none;
    border: none;
    padding: 4px;
    cursor: pointer;
    color: #9ca3af;
    border-radius: 4px;
    transition: all 0.2s;
}

.upcoming-item-action:hover {
    background: #e5e7eb;
    color: #374151;
}

.upcoming-item-action.complete:hover {
    background: #dcfce7;
    color: #16a34a;
}

/* Overdue items */
.upcoming-item.is-overdue {
    background: #fef2f2;
}

.upcoming-item.is-overdue:hover {
    background: #fee2e2;
}

.upcoming-item.is-overdue .upcoming-item-title {
    color: #991b1b;
}

.overdue-days {
    color: #dc2626;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 3px;
}

.overdue-days::before {
    content: '';
    width: 6px;
    height: 6px;
    background: #dc2626;
    border-radius: 50%;
    animation: pulse-dot 1.5s ease-in-out infinite;
}

@keyframes pulse-dot {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.4; }
}

/* Empty state */
.upcoming-empty {
    text-align: center;
    padding: 2rem 1.5rem;
    color: #9ca3af;
}

.upcoming-empty iconify-icon {
    font-size: 2.5rem;
    margin-bottom: 0.75rem;
    opacity: 0.5;
}

.upcoming-empty p {
    font-size: 0.875rem;
    margin: 0;
}

/* Loading state */
.upcoming-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem;
}

.upcoming-loading .spinner {
    width: 24px;
    height: 24px;
    border: 2px solid #e5e7eb;
    border-top-color: #3b82f6;
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

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

/* Sidebar footer */
.sidebar-footer {
    padding: 0.75rem 1.25rem;
    border-top: 1px solid #f3f4f6;
    flex-shrink: 0;
}

.sidebar-footer a {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    font-size: 0.8125rem;
    font-weight: 500;
    color: #3b82f6;
    text-decoration: none;
    padding: 8px;
    border-radius: 8px;
    transition: background 0.2s;
}

.sidebar-footer a:hover {
    background: #eff6ff;
}

/* ============================================
   FULLCALENDAR OVERRIDES
   ============================================ */

.fc {
    --fc-border-color: #e5e7eb;
    --fc-today-bg-color: rgba(59, 130, 246, 0.08);
    font-family: inherit;
}

.fc .fc-toolbar {
    margin-bottom: 1rem;
}

.fc .fc-toolbar-title {
    font-size: 1.25rem;
    font-weight: 600;
}

.fc .fc-button {
    padding: 8px 14px;
    font-size: 0.875rem;
    font-weight: 500;
    border-radius: 8px;
    text-transform: capitalize;
}

.fc .fc-button-primary {
    background-color: var(--bs-primary);
    border-color: var(--bs-primary);
}

.fc .fc-button-primary:not(:disabled).fc-button-active,
.fc .fc-button-primary:not(:disabled):active {
    background-color: var(--bs-primary);
    border-color: var(--bs-primary);
}

/* Column Headers */
.fc .fc-col-header-cell {
    padding: 12px 0;
    background: #f9fafb;
    font-weight: 600;
}

.fc .fc-col-header-cell-cushion {
    color: #374151;
    text-decoration: none;
}

.fc-day-today .fc-col-header-cell-cushion {
    background: #3b82f6;
    color: white;
    border-radius: 20px;
    padding: 4px 12px;
}

/* Time Grid */
.fc .fc-timegrid-slot {
    height: 3.5em;
}

.fc .fc-timegrid-slot-label-cushion {
    font-size: 0.75rem;
    color: #6b7280;
}

.fc .fc-timegrid-now-indicator-line {
    border-color: #3b82f6;
    border-width: 2px;
}

.fc .fc-timegrid-now-indicator-arrow {
    border-color: #3b82f6;
    border-top-color: transparent;
    border-bottom-color: transparent;
}

/* Event Card Styles */
.fc-event {
    border: none !important;
    border-radius: 8px !important;
    margin: 2px 4px !important;
    cursor: pointer;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
    overflow: hidden;
    border-left: 4px solid rgba(0,0,0,0.2) !important;
    box-shadow: 0 1px 3px rgba(0,0,0,0.08);
    position: relative;
}
.fc-list-table  .fc-event{border-radius: 0!important;}
/* .fc-event::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(255, 255, 255, 0.5);
    pointer-events: none;
    z-index: 0;
} */
.fc-list-table  .fc-event-client{
color:var(--bs-secondary-color) !important ;
}
.fc-event .fc-event-main {
    position: relative;
    z-index: 1;
}

/* Badge completato in alto a destra */
.fc-event-completed-badge {
    position: absolute;
    top: 3px;
    right: 0px;
    width: 20px;
    height: 20px;
    background: #22c55e;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 18px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
    z-index: 2;
}

.fc-event-completed-badge iconify-icon {
    width: 14px;
    height: 14px;
}
.fc-list-table .fc-event-completed-badge{
top: 7px;
    right: 7px;
}
/* Padding extra a destra per eventi completati per non sovrapporre il badge */
.fc-event-inner.status-completed {
    padding-right: 28px;
}


.fc-event:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    z-index: 100 !important;
}

/* .fc-event:hover::before {
    background: rgba(255, 255, 255, 0.3);
} */

.fc-timegrid-event .fc-event-main {
    padding: 6px 8px;
}

/* Custom Event Content */
.event-card {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 50px;
    position: relative;
    z-index: 1;
}

.event-card .event-header {
    display: flex;
    align-items: flex-start;
    gap: 6px;
}

.event-card .event-status-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
    margin-top: 4px;
    box-shadow: 0 0 0 2px rgba(255,255,255,0.8);
}

/* Stati con animazione per in_progress */
.event-card[data-status="in_progress"] .event-status-dot {
    animation: pulse-status 2s ease-in-out infinite;
}

@keyframes pulse-status {
    0%, 100% { 
        box-shadow: 0 0 0 2px rgba(255,255,255,0.8);
    }
    50% { 
        box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.3);
    }
}

/* Completati con opacità ridotta */
.event-card[data-status="completed"] {
    opacity: 0.7;
}

.event-card[data-status="completed"] .event-title {
    text-decoration: line-through;
    text-decoration-color: rgba(0,0,0,0.3);
}

.event-card .event-title {
    flex: 1;
    text-align: left;
    font-weight: 600;
    font-size: 0.8125rem;
    line-height: 1.3;
    color: #1f2937;
}

.event-card .event-time {
    text-align:left;
    font-size: 0.7rem;
    color: #4b5563;
    margin-bottom: 2px;
}

.event-card .event-client {
    font-size: 0.675rem;
    color: #6b7280;
    font-weight: 500;
    margin-bottom: auto;
    display: flex;
    align-items: center;
    gap: 3px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.event-card .event-footer {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    margin-top: auto;
    padding-top: 6px;
}

/* Avatar Stack */
.avatar-stack {
    display: flex;
    align-items: center;
}

.avatar-item {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    border: 2px solid white;
    margin-left: -8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.625rem;
    font-weight: 600;
    color: white;
    box-shadow: 0 1px 3px rgba(0,0,0,0.2);
    overflow: hidden;
}

.avatar-item:first-child {
    margin-left: 0;
}

.avatar-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.avatar-item.avatar-more {
    background: #6b7280;
    font-size: 0.625rem;
}


/* Opzione stato (stesso stile del tipo evento) */
.event-status-option {
    cursor: pointer;
    display: inline-block;
}

.event-status-option input[type="radio"] {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.event-status-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    border-radius: 8px;
    font-size: 0.875rem;
    font-weight: 500;
    border: 2px solid transparent;
    transition: all 0.2s ease;
}

.event-status-badge iconify-icon {
    font-size: 1.1rem;
}

/* Hover */
.event-status-option:hover .event-status-badge {
    filter: brightness(0.95);
    transform: translateY(-1px);
}

/* Selezionato */
.event-status-option input[type="radio"]:checked + .event-status-badge {
    border-color: currentColor;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
    transform: translateY(-1px);
}

/* Focus per accessibilità */
.event-status-option input[type="radio"]:focus + .event-status-badge {
    outline: 2px solid var(--bs-primary);
    outline-offset: 2px;
}

/* ============================================
   CALENDARIO MODAL - Selettore Tipo (fix se mancante)
   ============================================ */

.event-type-option {
    cursor: pointer;
    display: inline-block;
}

.event-type-option input[type="radio"] {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.event-type-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    border-radius: 8px;
    font-size: 0.875rem;
    font-weight: 500;
    border: 2px solid transparent;
    transition: all 0.2s ease;
}


/* ============================================
   SIDEBAR - AVATAR ASSEGNATARI
   ============================================ */

.upcoming-item-assignees {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0;
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px solid rgba(0, 0, 0, 0.05);
}

.upcoming-assignee-avatar {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background-size: cover;
    background-position: center;
    background-color: #e5e7eb;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    font-weight: 600;
    color: #fff;
    border: 2px solid #fff;
    margin-left: -8px;
    position: relative;
    cursor: default;
    transition: transform 0.15s ease, z-index 0.15s ease;
}

.upcoming-assignee-avatar:first-child {
    margin-left: 0;
}

.upcoming-assignee-avatar:hover {
    transform: scale(1.15);
    z-index: 10;
}

/* Colori avatar */
.upcoming-assignee-avatar.avatar-1 { background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); }
.upcoming-assignee-avatar.avatar-2 { background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%); }
.upcoming-assignee-avatar.avatar-3 { background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%); }
.upcoming-assignee-avatar.avatar-4 { background: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%); }
.upcoming-assignee-avatar.avatar-5 { background: linear-gradient(135deg, #fa709a 0%, #fee140 100%); }

.upcoming-assignee-more {
    background: #6b7280 !important;
    font-size: 9px;
    color: #fff;
}

/* Tooltip migliorato */
.upcoming-assignee-avatar[title] {
    position: relative;
}

.upcoming-assignee-avatar[title]:hover::after {
    content: attr(title);
    position: absolute;
    bottom: calc(100% + 6px);
    left: 50%;
    transform: translateX(-50%);
    background: #1f2937;
    color: #fff;
    padding: 4px 8px;
    border-radius: 6px;
    font-size: 11px;
    font-weight: 500;
    white-space: nowrap;
    z-index: 100;
    pointer-events: none;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

.upcoming-assignee-avatar[title]:hover::before {
    content: '';
    position: absolute;
    bottom: calc(100% + 2px);
    left: 50%;
    transform: translateX(-50%);
    border: 4px solid transparent;
    border-top-color: #1f2937;
    z-index: 100;
}


/* Transizione smooth per il campo assegnatari */
#assigneesWrapper {
    transition: opacity 0.2s ease, max-height 0.3s ease;
    overflow: hidden;
}

#assigneesWrapper.hiding {
    opacity: 0;
    max-height: 0;
    margin-bottom: 0 !important;
}
.event-type-badge iconify-icon {
    font-size: 1.1rem;
}

.event-type-option:hover .event-type-badge {
    filter: brightness(0.95);
    transform: translateY(-1px);
}

.event-type-option input[type="radio"]:checked + .event-type-badge {
    border-color: currentColor;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
    transform: translateY(-1px);
}

.event-type-option input[type="radio"]:focus + .event-type-badge {
    outline: 2px solid var(--bs-primary);
    outline-offset: 2px;
}


/* Avatar colors */
.avatar-1 { background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); }
.avatar-2 { background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%); }
.avatar-3 { background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%); }
.avatar-4 { background: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%); }
.avatar-5 { background: linear-gradient(135deg, #fa709a 0%, #fee140 100%); }

/* Day Grid Events */
.fc-daygrid-event {
    padding: 4px 8px !important;
}

.fc-daygrid-event .event-card {
    flex-direction: row;
    align-items: center;
    gap: 8px;
    min-height: auto;
}

.fc-daygrid-event .event-footer,
.fc-daygrid-event .event-client {
    display: none;
}

/* Modal Styles */
#eventModal .modal-content {
    border: none;
    border-radius: 16px;
}

#eventModal .modal-header {
    border-bottom: none;
}

#eventModal .modal-footer {
    border-top: none;
    padding-top: 0;
}

/* Event Type Radio Buttons */
.event-type-option input {
    display: none;
}

.event-type-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    border-radius: 20px;
    font-size: 0.8125rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    border: 2px solid transparent;
}

.event-type-option input:checked + .event-type-badge {
    border-color: currentColor;
}

/* Color Picker */
.color-picker-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 10px;
}

.color-option {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
    border: 3px solid transparent;
    box-shadow: inset 0 0 0 1px rgba(0,0,0,0.1);
}

.color-option:hover {
    transform: scale(1.1);
}

.color-option.selected {
    border-color: #374151;
}

.color-option .check-icon {
    color: #374151;
    font-size: 18px;
    display: none;
}

.color-option.selected .check-icon {
    display: block;
}

/* Delete Confirm Modal */
#deleteConfirmModal .modal-content {
    border-radius: 16px;
}

/* Responsive */
@media (max-width: 1200px) {
    .calendar-sidebar {
        width: 280px;
    }
}

@media (max-width: 992px) {
    .calendar-layout {
        flex-direction: column;
    }
    
    .calendar-sidebar {
        width: 100%;
        position: static;
        max-height: none;
        order: -1;
    }
    
    .sidebar-content {
        max-height: 300px;
    }
}

@media (max-width: 768px) {
    .calendar-header {
        flex-direction: column;
        gap: 1rem;
        align-items: flex-start;
    }
    
    .view-toggle {
        width: 100%;
        justify-content: center;
    }
    
    .fc .fc-toolbar {
        flex-direction: column;
        gap: 0.5rem;
    }
}




/* ============================================
   MY WORK - STILI CUSTOM
   my-work.css
   ============================================ */

/* Header */
.mywork-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.5rem;
}

.mywork-header h2 {
    font-size: 1.75rem;
    font-weight: 700;
    color: #1f2937;
    margin: 0;
}

.mywork-header .subtitle {
    font-size: 0.875rem;
    color: #6b7280;
    font-weight: 500;
}

.header-date {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.9375rem;
    color: #6b7280;
    background: #f3f4f6;
    padding: 8px 16px;
    border-radius: 10px;
}

.header-date iconify-icon {
    font-size: 1.125rem;
    color: #3b82f6;
}

/* Stats Grid */
.stats-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.stat-card {
    background: white;
    border-radius: 12px;
    padding: 1.25rem;
    display: flex;
    align-items: center;
    gap: 1rem;
    box-shadow: 0 1px 3px rgba(0,0,0,0.08);
    transition: transform 0.2s, box-shadow 0.2s;
}

.stat-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

.stat-icon {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
}

.stat-overdue .stat-icon {
    background: #fef2f2;
    color: #dc2626;
}

.stat-today .stat-icon {
    background: #eff6ff;
    color: #2563eb;
}

.stat-week .stat-icon {
    background: #f0fdf4;
    color: #16a34a;
}

.stat-tickets .stat-icon {
    background: #faf5ff;
    color: #9333ea;
}

.stat-value {
    font-size: 1.75rem;
    font-weight: 700;
    color: #1f2937;
    line-height: 1;
}

.stat-label {
    font-size: 0.8125rem;
    color: #6b7280;
    margin-top: 2px;
}

/* Main Grid */
.mywork-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
    align-items: start;
}

.mywork-column {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

/* Cards */
.mywork-grid .card {
    border: none;
    border-radius: 16px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.08);
    overflow: hidden;
}

.mywork-grid .card-header {
    background: white;
    border-bottom: 1px solid #f3f4f6;
    padding: 1rem 1.25rem;
}

.mywork-grid .card-header h5 {
    font-size: 1rem;
    font-weight: 600;
    color: #1f2937;
    display: flex;
    align-items: center;
}

.mywork-grid .card-header h5 iconify-icon {
    font-size: 1.25rem;
    color: #6b7280;
}

/* Empty State */
.empty-state {
    text-align: center;
    padding: 3rem 1.5rem;
    color: #9ca3af;
}

.empty-state iconify-icon {
    font-size: 3rem;
    margin-bottom: 1rem;
    opacity: 0.5;
}

.empty-state p {
    font-size: 0.9375rem;
    margin: 0;
}

/* Events List */
.events-list {
    padding: 0.5rem 0;
}

.events-group-header {
    padding: 0.5rem 1.25rem;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #6b7280;
    background: #f9fafb;
}

.events-group-header.overdue {
    color: #dc2626;
    background: #fef2f2;
}

.events-group-header.today {
    color: #2563eb;
    background: #eff6ff;
}

.event-item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 12px 1.25rem;
    cursor: pointer;
    transition: background 0.2s;
    border-left: 3px solid transparent;
}

.event-item:hover {
    background: #f9fafb;
}

.event-item.is-overdue {
    background: #fef2f2;
    border-left-color: #ef4444 !important;
}

.event-item.is-overdue:hover {
    background: #fee2e2;
}

.event-icon {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.event-icon iconify-icon {
    font-size: 1.125rem;
}

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

.event-title {
    font-size: 0.9375rem;
    font-weight: 500;
    color: #1f2937;
    margin-bottom: 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.event-item.is-overdue .event-title {
    color: #991b1b;
}

.event-meta {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 0.8125rem;
    color: #6b7280;
}

.event-meta iconify-icon {
    font-size: 0.875rem;
    margin-right: 2px;
}

.overdue-badge {
    color: #dc2626;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.overdue-badge::before {
    content: '';
    width: 6px;
    height: 6px;
    background: #dc2626;
    border-radius: 50%;
    animation: pulse-dot 1.5s ease-in-out infinite;
}

@keyframes pulse-dot {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.4; }
}

.event-actions {
    opacity: 0;
    transition: opacity 0.2s;
}

.event-item:hover .event-actions {
    opacity: 1;
}

.btn-action {
    background: none;
    border: none;
    padding: 6px;
    cursor: pointer;
    color: #9ca3af;
    border-radius: 6px;
    transition: all 0.2s;
}

.btn-action:hover {
    background: #e5e7eb;
    color: #374151;
}

.btn-complete:hover {
    background: #dcfce7;
    color: #16a34a;
}

/* Tickets List */
.tickets-list {
    padding: 0.5rem 0;
}

.ticket-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 1.25rem;
    text-decoration: none;
    color: inherit;
    transition: background 0.2s;
}

.ticket-item:hover {
    background: #f9fafb;
}

.ticket-priority {
    padding: 4px 10px;
    border-radius: 6px;
    font-size: 0.75rem;
    font-weight: 600;
    white-space: nowrap;
}

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

.ticket-title {
    font-size: 0.9375rem;
    font-weight: 500;
    color: #1f2937;
    margin-bottom: 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ticket-meta {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 0.8125rem;
    color: #6b7280;
}

.ticket-meta iconify-icon {
    font-size: 0.875rem;
    margin-right: 2px;
}

.ticket-status {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-weight: 500;
}

.ticket-arrow {
    color: #9ca3af;
    font-size: 1.125rem;
    transition: transform 0.2s;
}

.ticket-item:hover .ticket-arrow {
    transform: translateX(4px);
    color: #3b82f6;
}

/* Posts List */
.posts-list {
    padding: 0.5rem 0;
}

.post-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 1.25rem;
    transition: background 0.2s;
}

.post-item:hover {
    background: #f9fafb;
}

.post-status {
    padding: 4px 10px;
    border-radius: 6px;
    font-size: 0.75rem;
    font-weight: 600;
    white-space: nowrap;
}

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

.post-title {
    font-size: 0.9375rem;
    font-weight: 500;
    color: #1f2937;
    margin-bottom: 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.post-meta {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 0.8125rem;
    color: #6b7280;
}

.post-meta iconify-icon {
    font-size: 0.875rem;
    margin-right: 2px;
}

/* Responsive */
@media (max-width: 1200px) {
    .stats-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 992px) {
    .mywork-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 768px) {
    .mywork-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 1rem;
    }
    
    .stats-grid {
        grid-template-columns: 1fr 1fr;
    }
    
    .stat-card {
        padding: 1rem;
    }
    
    .stat-icon {
        width: 40px;
        height: 40px;
        font-size: 1.25rem;
    }
    
    .stat-value {
        font-size: 1.5rem;
    }
}

@media (max-width: 576px) {
    .stats-grid {
        grid-template-columns: 1fr;
    }
}


/**
 * Workspace Concurrency Styles
 * Stili per presence indicators e conflict resolution
 */

/* =====================================================
   PRESENCE AVATARS
   ===================================================== */

.card-presence {
    display: flex;
    align-items: center;
    gap: 4px;
    position: absolute;
    top: -8px;
    right: -4px;
    z-index: 10;
}

.presence-avatar {
    position: relative;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    overflow: visible;
    cursor: default;
}

.presence-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border: 2px solid #fff;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
}

.presence-avatar .avatar-initials {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    background: #6366f1;
    color: #fff;
    font-size: 10px;
    font-weight: 600;
    border: 2px solid #fff;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
    border-radius: 50%;
}

/* Viewing state */
.presence-avatar.viewing img,
.presence-avatar.viewing .avatar-initials {
    border-color: #10b981;
}

/* Editing state */
.presence-avatar.editing {
    animation: pulse-editing 1.5s ease-in-out infinite;
}

.presence-avatar.editing img,
.presence-avatar.editing .avatar-initials {
    border-color: #ef4444;
    border-width: 2px;
}

.presence-avatar .editing-indicator {
    position: absolute;
    bottom: -2px;
    right: -2px;
    width: 10px;
    height: 10px;
    background: #ef4444;
    border: 2px solid #fff;
    border-radius: 50%;
    animation: pulse-dot 1s ease-in-out infinite;
}

@keyframes pulse-editing {
    0%, 100% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.1);
    }
}

@keyframes pulse-dot {
    0%, 100% {
        opacity: 1;
    }
    50% {
        opacity: 0.5;
    }
}

.presence-more {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    background: #64748b;
    color: #fff;
    font-size: 9px;
    font-weight: 600;
    border-radius: 50%;
    border: 2px solid #fff;
}


/* =====================================================
   LOCK INDICATOR
   ===================================================== */

.card-locked-overlay {
    position: absolute;
    inset: 0;
    background: rgba(239, 68, 68, 0.05);
    border: 2px dashed #ef4444;
    border-radius: inherit;
    pointer-events: none;
    z-index: 5;
}

.card-locked-badge {
    position: absolute;
    bottom: 8px;
    left: 8px;
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 4px 8px;
    background: #ef4444;
    color: #fff;
    font-size: 11px;
    font-weight: 500;
    border-radius: 4px;
    z-index: 6;
}

.card-locked-badge i {
    font-size: 12px;
}


/* =====================================================
   CONFLICT MODAL
   ===================================================== */

#conflictModal .modal-header {
    border-bottom: 2px solid #fbbf24;
}

#conflictModal .changes-list {
    max-height: 300px;
    overflow-y: auto;
    padding: 12px;
    background: #f8fafc;
    border-radius: 8px;
}

#conflictModal .change-item {
    padding: 8px 0;
    border-bottom: 1px solid #e2e8f0;
}

#conflictModal .change-item:last-child {
    border-bottom: none;
}

#conflictModal .modal-footer {
    gap: 8px;
}

#conflictModal .modal-footer .btn {
    width: 100%;
    text-align: left;
    display: flex;
    align-items: center;
}


/* =====================================================
   EDITING STATE ON CARD
   ===================================================== */

.workspace-card.is-editing {
    box-shadow: 0 0 0 2px #6366f1, 0 4px 12px rgba(99, 102, 241, 0.25);
}

.workspace-card.is-locked-by-other {
    opacity: 0.7;
    cursor: not-allowed;
}

.workspace-card.is-locked-by-other::after {
    content: '';
    position: absolute;
    inset: 0;
    background: repeating-linear-gradient(
        45deg,
        transparent,
        transparent 10px,
        rgba(239, 68, 68, 0.03) 10px,
        rgba(239, 68, 68, 0.03) 20px
    );
    pointer-events: none;
}


/* =====================================================
   VERSION INDICATOR
   ===================================================== */

.version-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 6px;
    background: #e2e8f0;
    color: #64748b;
    font-size: 10px;
    font-weight: 500;
    border-radius: 4px;
}

.version-badge.updated {
    background: #dcfce7;
    color: #16a34a;
    animation: flash-update 0.5s ease-out;
}

@keyframes flash-update {
    0% {
        background: #86efac;
    }
    100% {
        background: #dcfce7;
    }
}


/* =====================================================
   BOARD PRESENCE BAR
   ===================================================== */

.board-presence-bar {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    background: #f1f5f9;
    border-radius: 8px;
    margin-bottom: 16px;
}

.board-presence-bar .presence-label {
    font-size: 13px;
    color: #64748b;
    white-space: nowrap;
}

.board-presence-bar .presence-avatars {
    display: flex;
    gap: 4px;
    flex-wrap: wrap;
}

.board-presence-bar .presence-avatar {
    width: 28px;
    height: 28px;
}

.board-presence-bar .presence-avatar .avatar-initials {
    font-size: 11px;
}


/* =====================================================
   SYNC STATUS INDICATOR
   ===================================================== */

.sync-status {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: #64748b;
}

.sync-status .dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #10b981;
}

.sync-status.syncing .dot {
    background: #fbbf24;
    animation: pulse-sync 1s ease-in-out infinite;
}

.sync-status.offline .dot {
    background: #ef4444;
}

.sync-status.error .dot {
    background: #ef4444;
}

@keyframes pulse-sync {
    0%, 100% {
        opacity: 1;
        transform: scale(1);
    }
    50% {
        opacity: 0.5;
        transform: scale(0.8);
    }
}


/* =====================================================
   TOAST FOR UPDATES
   ===================================================== */

.update-toast {
    position: fixed;
    bottom: 24px;
    right: 24px;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    background: #1e293b;
    color: #fff;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    z-index: 1050;
    animation: slide-in-toast 0.3s ease-out;
}

.update-toast.hiding {
    animation: slide-out-toast 0.3s ease-in forwards;
}

@keyframes slide-in-toast {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes slide-out-toast {
    from {
        opacity: 1;
        transform: translateY(0);
    }
    to {
        opacity: 0;
        transform: translateY(20px);
    }
}

.update-toast .toast-icon {
    font-size: 18px;
}

.update-toast .toast-message {
    font-size: 13px;
}

.update-toast .toast-action {
    margin-left: auto;
    padding: 4px 12px;
    background: rgba(255, 255, 255, 0.2);
    color: #fff;
    font-size: 12px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    transition: background 0.2s;
}

.update-toast .toast-action:hover {
    background: rgba(255, 255, 255, 0.3);
}


/* =====================================================
   FIELD CONFLICT HIGHLIGHT
   ===================================================== */

.field-conflict {
    position: relative;
    border: 2px solid #fbbf24 !important;
    background: #fffbeb !important;
}

.field-conflict::before {
    content: '⚠️';
    position: absolute;
    top: -10px;
    right: -10px;
    font-size: 16px;
}

.conflict-choices {
    display: flex;
    gap: 8px;
    margin-top: 8px;
}

.conflict-choice {
    flex: 1;
    padding: 8px;
    border: 2px solid #e2e8f0;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s;
}

.conflict-choice:hover {
    border-color: #6366f1;
    background: #f5f3ff;
}

.conflict-choice.selected {
    border-color: #6366f1;
    background: #eef2ff;
}

.conflict-choice-label {
    font-size: 11px;
    color: #64748b;
    margin-bottom: 4px;
}

.conflict-choice-value {
    font-size: 13px;
    color: #1e293b;
}



/* ===========================================
   CALENDARIO - QUICK FILTERS TIPO EVENTO
   =========================================== */

/* Wrapper filtri */
.quick-filters-wrapper {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1rem;
}

/* Separatore verticale tra gruppi filtri */
.quick-filters-divider {
    width: 1px;
    height: 28px;
    background: #e5e7eb;
    margin: 0 0.5rem;
}

/* Badge mini per tipo nei quick filters */
.type-badge-mini {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    border-radius: 5px;
    font-size: 12px;
    margin-right: 4px;
    flex-shrink: 0;
}

.type-badge-mini iconify-icon {
    font-size: 12px;
}

/* Quick filter buttons - miglioramenti */
.quick-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    align-items: center;
}

.quick-filter-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.375rem 0.75rem;
    font-size: 0.8125rem;
    font-weight: 500;
    color: #6b7280;
    background: #f9fafb;
    border: 1px solid #e5e7eb;
    border-radius: 9999px;
    cursor: pointer;
    transition: all 0.15s ease;
    white-space: nowrap;
}

.quick-filter-btn:hover {
    background: #f3f4f6;
    border-color: #d1d5db;
    color: #374151;
}

.quick-filter-btn.active {
    background: #1f2937;
    border-color: #1f2937;
    color: #fff;
}

.quick-filter-btn.active .type-badge-mini {
    background: rgba(255, 255, 255, 0.2) !important;
    color: #fff !important;
}

.quick-filter-btn.active .dot {
    background: #fff !important;
}

.quick-filter-btn .dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}

.quick-filter-btn iconify-icon {
    font-size: 14px;
}

/* Responsive */
@media (max-width: 991.98px) {
    .quick-filters-wrapper {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.75rem;
    }
    
    .quick-filters-divider {
        display: none;
    }
    
    .quick-filters {
        width: 100%;
    }
}

@media (max-width: 767.98px) {
    .quick-filter-btn {
        padding: 0.3rem 0.6rem;
        font-size: 0.75rem;
    }
    
    .type-badge-mini {
        width: 18px;
        height: 18px;
    }
    
    .type-badge-mini iconify-icon {
        font-size: 11px;
    }
}



.select2-container--bootstrap-5.select2-container--focus .select2-selection, .select2-container--bootstrap-5.select2-container--open .select2-selection, .select2-container--bootstrap-5 .select2-dropdown .select2-search .select2-search__field:focus{
    box-shadow: none!important;
}

.select2-container--bootstrap-5 .select2-selection{border: var(--bs-border-width) solid #eaedf1!important;}