/*
 * FOGLIO DI STILE ...: admin-custom.css
 * DESCRIZIONE .......: Stili personalizzati per il backoffice e componenti condivisi
 * Data creazione ....: 02-2026
 * Versione .........: 1.0
 *
 * NOTE:
 * - Caricato da entrambi i layout (admin e sponsor)
 * - Contiene stili per: upload, galleria, icon picker, sortable
 */


/* ============================================
   U P L O A D   D R O P   Z O N E
   ============================================ */

.upload-drop-zone {
    border-color: #dee2e6 !important;
    transition: all 0.2s ease;
    cursor: pointer;
}

.upload-drop-zone:hover,
.upload-drop-zone.dragover {
    border-color: var(--bs-primary) !important;
    background-color: rgba(var(--bs-primary-rgb), 0.05);
}


/* ============================================
   G A L L E R I A   I M M A G I N I
   ============================================ */

.galleria-item {
    position: relative;
    aspect-ratio: 1;
    overflow: hidden;
    border-radius: 0.375rem;
    cursor: grab;
}

.galleria-item:active {
    cursor: grabbing;
}

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

.galleria-item .galleria-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    opacity: 0;
    transition: opacity 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
}

.galleria-item:hover .galleria-overlay {
    opacity: 1;
}

.galleria-item.dragging {
    opacity: 0.5;
}

.galleria-item.drag-over {
    border: 2px dashed var(--bs-primary);
}


/* ============================================
   I C O N   P I C K E R   (categorie)
   ============================================ */

.btn-icon-pick {
    width: 38px;
    height: 38px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
}

.btn-icon-pick:hover {
    background-color: var(--bs-primary);
    border-color: var(--bs-primary);
    color: #fff;
}

.icon-picker {
    background-color: var(--bs-gray-100);
}


/* ============================================
   S O R T A B L E   (riordinamento categorie)
   ============================================ */

.cursor-grab {
    cursor: grab;
}

.cursor-grab:active {
    cursor: grabbing;
}

.handle {
    opacity: 0.5;
    transition: opacity 0.2s;
}

tr:hover .handle {
    opacity: 1;
}

.sortable-ghost {
    opacity: 0.4;
    background-color: #e3f2fd;
}

.sortable-chosen {
    background-color: #fff;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}


/* ============================================
   C A L E N D A R I O   M A R K E T I N G
   ============================================ */

/* Filtro canale: bottoni cliccabili */
.filtro-canale {
    font-size: 0.8rem;
    padding: 0.25rem 0.65rem;
    transition: all 0.15s ease;
}

.filtro-canale.active {
    background-color: var(--bs-primary);
    border-color: var(--bs-primary);
    color: #fff;
}

/* --- FullCalendar: stile elegante --- */

/* Toolbar header */
.fc .fc-toolbar-title {
    font-size: 1.35rem;
    font-weight: 600;
    color: #49BEBB;
}

.fc .fc-button {
    border-radius: 20px !important;
    padding: 0.35rem 0.85rem;
    font-size: 0.82rem;
    font-weight: 500;
    text-transform: none;
    border: 1px solid #dee2e6;
    background-color: #fff;
    color: #495057;
    box-shadow: none !important;
}

.fc .fc-button:hover {
    background-color: #f8f9fa;
    border-color: #ced4da;
    color: #212529;
}

.fc .fc-button-active,
.fc .fc-button:active {
    background-color: #3a4a5b !important;
    border-color: #3a4a5b !important;
    color: #fff !important;
}

/* Frecce navigazione prev/next */
.fc .fc-prev-button,
.fc .fc-next-button {
    padding: 0.35rem 0.55rem;
}

.fc .fc-button-group {
    gap: 0;
}

.fc .fc-button-group > .fc-button {
    border-radius: 0 !important;
}

.fc .fc-button-group > .fc-button:first-child {
    border-top-left-radius: 20px !important;
    border-bottom-left-radius: 20px !important;
}

.fc .fc-button-group > .fc-button:last-child {
    border-top-right-radius: 20px !important;
    border-bottom-right-radius: 20px !important;
}

/* Intestazione giorni della settimana */
.fc .fc-col-header-cell {
    background-color: #f0f2f5;
    border-color: #e9ecef;
    padding: 0.5rem 0;
    font-size: 0.82rem;
    font-weight: 600;
    color: #6c757d;
    text-transform: uppercase;
}

/* Griglia celle */
.fc .fc-daygrid-day {
    border-color: #e9ecef;
}

/* Numero giorno */
.fc .fc-daygrid-day-number {
    font-size: 0.85rem;
    font-weight: 500;
    color: #6c757d;
    padding: 6px 8px;
}

/* Oggi: evidenziazione teal */
.fc .fc-day-today {
    background-color: rgba(73, 190, 187, 0.04) !important;
}

.fc .fc-day-today .fc-daygrid-day-number {
    font-weight: 700;
    color: #49BEBB;
}

/* Weekend: sfondo leggero */
.fc .fc-day-sat,
.fc .fc-day-sun {
    background-color: #f8f9fb;
}

/* --- Eventi: bordo sinistro colorato + sfondo pastello --- */
.fc .fc-daygrid-event {
    border: none !important;
    border-left: 3px solid var(--fc-event-border-color, #6c757d) !important;
    border-radius: 4px !important;
    padding: 2px 6px;
    font-size: 0.78rem;
    font-weight: 500;
    margin-bottom: 2px;
    cursor: pointer;
    transition: box-shadow 0.15s ease;
}

.fc .fc-daygrid-event:hover {
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.12);
}

/* Pallino colorato per eventi con orario */
.fc .fc-daygrid-event .fc-event-time {
    font-weight: 600;
    font-size: 0.72rem;
}

.fc .fc-daygrid-dot-event .fc-daygrid-event-dot {
    border-color: var(--fc-event-border-color, #6c757d);
}

/* Icona sponsor negli eventi */
.fc .fc-event .fc-event-sponsor-icon {
    font-size: 0.7rem;
    opacity: 0.8;
    margin-right: 2px;
}

/* Badge conteggio task negli eventi calendario */
.fc .fc-event .fc-event-task-badge {
    display: inline-block;
    font-size: 0.6rem;
    font-weight: 600;
    background: rgba(0, 0, 0, 0.15);
    color: inherit;
    padding: 0 4px;
    border-radius: 3px;
    margin-left: 4px;
    vertical-align: middle;
    line-height: 1.4;
}

/* Vista lista: stile pulito */
.fc .fc-list-event-dot {
    border-color: var(--fc-event-border-color, #6c757d);
}

/* Vista settimana/giorno: eventi time-grid */
.fc .fc-timegrid-event {
    border: none !important;
    border-left: 3px solid var(--fc-event-border-color, #6c757d) !important;
    border-radius: 4px !important;
    font-size: 0.78rem;
}

/* Rimuovi il bordo inferiore della toolbar */
.fc .fc-toolbar {
    margin-bottom: 1rem;
}


/* ============================================
   K A N B A N   B O A R D
   ============================================ */

/* Contenitore principale: layout flex orizzontale con scroll */
.kanban-board {
    display: flex;
    gap: 1rem;
    overflow-x: auto;
    padding-bottom: 1rem;
}

/* Colonna: larghezza equa, sfondo neutro */
.kanban-column {
    flex: 1 1 0;
    min-width: 280px;
    background-color: #f8f9fb;
    border-radius: 0.5rem;
    padding: 0.75rem;
    min-height: 400px;
}

/* Colori colonne per stato */
.kanban-column[data-stato="da_fare"] {
    background-color: #f5f6f8;
}

.kanban-column[data-stato="in_corso"] {
    background-color: #eef3ff;
}

.kanban-column[data-stato="in_revisione"] {
    background-color: #fff8ec;
}

.kanban-column[data-stato="completato"] {
    background-color: #ecfdf5;
}

/* Header colonna: separatore inferiore */
.kanban-column-header {
    padding-bottom: 0.75rem;
    margin-bottom: 0.5rem;
    border-bottom: 1px solid #e9ecef;
}

/* Body colonna: area di drop per card */
.kanban-column-body {
    min-height: 200px;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

/* Card task: elevazione leggera, cursore drag */
.kanban-card {
    background-color: #fff;
    border-radius: 0.5rem;
    padding: 1rem;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
    cursor: grab;
    transition: box-shadow 0.2s ease;
}

.kanban-card:hover {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
}

.kanban-card:active {
    cursor: grabbing;
}

/* Card trascinata (ghost Sortable.js) */
.kanban-card.sortable-ghost {
    opacity: 0.4;
    background-color: #e3f2fd;
}

/* Card selezionata per il drag (chosen Sortable.js) */
.kanban-card.sortable-chosen {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    cursor: grabbing;
}

/* Titolo card */
.kanban-card-title {
    font-size: 0.88rem;
    line-height: 1.4;
}

/* Footer card: metadati e icone */
.kanban-card-footer {
    font-size: 0.78rem;
}

/* Modal calendario: transizione fluida al cambio tab */
#modalCalendario .tab-content {
    overflow: hidden;
}

/* Lista task nel modal calendario */
.calendario-task-item {
    padding: 0.5rem 0.65rem;
    border-radius: 0.375rem;
    background-color: #f8f9fb;
    margin-bottom: 0.35rem;
    font-size: 0.82rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    transition: background-color 0.15s ease;
}

.calendario-task-item:hover {
    background-color: #eef0f4;
}

.calendario-task-item.task-completato {
    opacity: 0.6;
    text-decoration: line-through;
}

/* --- Responsive: schermi piccoli --- */
@media (max-width: 767.98px) {
    .kanban-column {
        min-width: 260px;
    }
}


/* ============================================
   A C C R E D I T A M E N T O   P A R T I T E
   ============================================ */

/* Badge hospitality: colore dorato ben visibile */
.badge-hospitality {
    background-color: #f59f00 !important;
    color: #fff !important;
    font-weight: 600;
}

/* Input prezzi settore: stato default (bordo tratteggiato) */
.input-prezzo-settore {
    border-style: dashed;
    border-color: #ced4da;
    transition: border-color 0.2s ease, border-style 0.2s ease;
}

/* Input prezzi settore: valore personalizzato (bordo arancione solido) */
.input-prezzo-settore.prezzo-custom {
    border-style: solid;
    border-color: #f59f00;
    background-color: rgba(245, 159, 0, 0.04);
}

/* Bottone reset prezzo al default */
.btn-reset-prezzo {
    opacity: 0;
    transition: opacity 0.2s ease;
}

tr:hover .btn-reset-prezzo.prezzo-custom {
    opacity: 1;
}

/* PIN check-in: stile monospace */
.input-pin-checkin {
    font-family: 'Courier New', monospace;
    font-size: 1.2rem;
    font-weight: 700;
    letter-spacing: 0.3em;
    text-align: center;
}


/* ============================================
   H E A D E R   E   S I D E B A R   M O B I L E
   ============================================ */

/* Logo sidebar: a 220px sfora i 222px utili della sidebar (270px meno i
   24px di padding per lato) e finisce sotto la X di chiusura */
@media (max-width: 1199.98px) {
    .left-sidebar .brand-logo {
        min-height: 76px;
    }

    .left-sidebar .brand-logo .full-logo {
        width: 170px;
        height: auto;
    }
}

/* Logo nell'header mobile: stesso file della sidebar e dell'area sponsor */
.topbar .header-logo-mobile {
    max-height: 34px;
    width: auto;
}

/* Centrato rispetto alla topbar (che e' fixed, quindi fa da riferimento):
   in flusso resterebbe incollato al pulsante di apertura sidebar */
@media (max-width: 991.98px) {
    .topbar .header-logo-wrap {
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        z-index: 1;
    }
}

@media (max-width: 991.98px) {
    /* Niente collapse intermedio (i tre puntini): l'avatar utente resta
       sempre in linea e il menu utente si apre con un solo click */
    .topbar .navbar > .navbar-toggler {
        display: none !important;
    }

    .topbar .navbar #navbarNav {
        display: flex !important;
        flex-basis: auto;
        width: auto;
        margin-left: auto;
        border-top: 0;
    }
}

@media (max-width: 991.98px) {
    /* L'ombra del tema e' troppo tenue: a tutta larghezza il dropdown si
       confonde con il contenuto sottostante */
    .topbar .navbar .dropdown-menu {
        border: 1px solid var(--bs-border-color);
        box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
    }
}


/* ============================================
   S E L E C T   C O N   R I C E R C A
   Raccordo fra Tom Select e il tema Bootstrap
   ============================================ */

/* Allinea il controllo all'altezza delle altre form-select */
.ts-wrapper .ts-control {
    min-height: calc(1.5em + 0.75rem + 2px);
    padding: 0.375rem 0.75rem;
    border-color: var(--bs-border-color);
    border-radius: var(--bs-border-radius);
}

.ts-wrapper.focus .ts-control {
    border-color: var(--bs-primary);
    box-shadow: 0 0 0 0.2rem rgba(var(--bs-primary-rgb), 0.15);
}

/* La select nativa e' nascosta: lo stato di errore va portato sul controllo */
.is-invalid + .ts-wrapper .ts-control,
.ts-wrapper.is-invalid .ts-control {
    border-color: var(--bs-danger);
}

/* Voci del menu: lasciano spazio a categoria e descrizione su due righe */
.ts-dropdown .option {
    padding: 0.5rem 0.75rem;
    border-bottom: 1px solid var(--bs-border-color);
}

.ts-dropdown .option:last-child {
    border-bottom: 0;
}

/* Il testo che coincide con la ricerca resta riconoscibile */
.ts-dropdown .highlight {
    background-color: rgba(var(--bs-warning-rgb), 0.35);
    border-radius: 2px;
}

/* Dentro i modal il menu deve stare sopra il contenuto */
.modal .ts-dropdown {
    z-index: 1056;
}

/* Pulsante di svuotamento: il tema lo mostra solo al passaggio del mouse e usa
   il carattere \00d7, che risulta piccolo e otticamente basso rispetto al centro.
   Lo sostituiamo con un'icona disegnata, centrata con precisione. */
.ts-wrapper .clear-button {
    opacity: 1 !important;
    width: 24px;
    height: 24px;
    top: 50% !important;
    transform: translateY(-50%) !important;
    right: calc(max(var(--ts-pr-caret), 0.75rem) + 6px);
    font-size: 0 !important;
    border-radius: 50%;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236c757d' stroke-width='2.5' stroke-linecap='round'%3E%3Cpath d='M18 6 6 18M6 6l12 12'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    background-size: 13px 13px !important;
    transition: background-color 0.15s;
}

.ts-wrapper .clear-button:hover {
    background-color: rgba(var(--bs-danger-rgb), 0.12) !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23e04545' stroke-width='2.5' stroke-linecap='round'%3E%3Cpath d='M18 6 6 18M6 6l12 12'/%3E%3C/svg%3E") !important;
}

/* Spazio a destra sufficiente per svuotamento e freccia */
.ts-wrapper.plugin-clear_button.has-items .ts-control {
    padding-right: 3.75rem !important;
}

/* Senza selezione non serve mostrarlo */
.ts-wrapper:not(.has-items) .clear-button {
    display: none;
}

/* ============================================
   T I N T A   N A V Y   P E R   I   B A D G E
   Usata da categorie servizi, tipo contratto
   "Altro" e stato contratto "Annullato"
   ============================================ */

/* Il tema definisce --bs-dark-bg-subtle come fondo scuro pieno (#2a3547),
   quindi bg-dark-subtle + text-dark rende il badge illeggibile: qui il
   navy viene ricostruito come tinta chiara, coerente con gli altri badge */
.bg-navy-subtle {
    background-color: rgba(42, 53, 71, 0.1) !important;
}

.text-navy {
    color: #2a3547 !important;
}

/* In tema scuro il navy sparirebbe sul fondo: si passa a una tinta chiara */
[data-bs-theme="dark"] .bg-navy-subtle {
    background-color: rgba(255, 255, 255, 0.1) !important;
}

[data-bs-theme="dark"] .text-navy {
    color: #dfe5ef !important;
}


/* ============================================
   C H E C K L I S T   S E R V I Z I
   Selezione servizi nelle trattative
   ============================================ */

/* Intestazione di categoria: si comporta da pulsante ma senza sembrarlo */
.categoria-blocco > button {
    background: var(--bs-tertiary-bg);
    border: 0;
    border-radius: inherit;
}

.categoria-blocco > button:hover {
    background: var(--bs-secondary-bg);
}

.categoria-blocco > button::after {
    content: "\ea5f";
    font-family: "tabler-icons";
    margin-left: 0.5rem;
    transition: transform 0.2s;
}

.categoria-blocco > button.collapsed::after {
    transform: rotate(-90deg);
}

.servizio-riga:last-child {
    border-bottom: 0 !important;
}

/* La riga scelta si distingue a colpo d'occhio dal resto del catalogo */
.servizio-riga:has(.chk-servizio:checked) {
    background-color: rgba(var(--bs-primary-rgb), 0.04);
}

.servizio-riga:hover {
    background-color: var(--bs-tertiary-bg);
}

/* I campi delle righe non selezionate restano leggibili ma in secondo piano */
.servizio-riga .campo-servizio:disabled {
    background-color: transparent;
    opacity: 0.45;
}

/* Descrizione su una riga sola: a catalogo sono spesso lunghe e righe di
   altezza diversa rendono l'elenco poco leggibile. Il testo intero resta
   disponibile passando il mouse */
.servizio-riga .descrizione-servizio {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 400px;
}

/* Spazio riservato all'esito del salvataggio, per non far ballare la riga */
.servizio-riga .stato-salvataggio {
    display: inline-block;
    width: 18px;
}

/* ============================================
   T I N T E   B A D G E   T I P I   C O N T R A T T O
   ============================================
   Title, Jersey e Official hanno bisogno di tre tinte non ancora usate
   dagli altri tipi: purple, pink e indigo non esistono come utility nel
   tema, quindi si definiscono qui come gia' fatto per navy */
.bg-purple-subtle { background-color: rgba(142, 68, 173, 0.12) !important; }
.text-purple      { color: #8e44ad !important; }
.bg-pink-subtle   { background-color: rgba(232, 62, 140, 0.12) !important; }
.text-pink        { color: #e83e8c !important; }
.bg-indigo-subtle { background-color: rgba(76, 63, 224, 0.12) !important; }
.text-indigo      { color: #4c3fe0 !important; }

/* In tema scuro il testo si schiarisce per restare leggibile sul fondo */
[data-bs-theme="dark"] .bg-purple-subtle { background-color: rgba(142, 68, 173, 0.25) !important; }
[data-bs-theme="dark"] .text-purple      { color: #c39bd3 !important; }
[data-bs-theme="dark"] .bg-pink-subtle   { background-color: rgba(232, 62, 140, 0.25) !important; }
[data-bs-theme="dark"] .text-pink        { color: #f3a0c6 !important; }
[data-bs-theme="dark"] .bg-indigo-subtle { background-color: rgba(76, 63, 224, 0.25) !important; }
[data-bs-theme="dark"] .text-indigo      { color: #a89ff0 !important; }

/* ============================================
   M A T E R I A L E   S E R V I Z I   (vista contratto / contratti)
   Pillola di riepilogo + lista dei file sotto il servizio
   ============================================ */

/* Pillola di riepilogo nella colonna Materiale */
.materiale-toggle {
    display: inline-flex;
    align-items: center;
    gap: .375rem;
    padding: .25rem .625rem;
    border: 1px solid transparent;
    border-radius: 50rem;
    background: transparent;
    font-size: .8125rem;
    font-weight: 500;
    white-space: nowrap;
}
.materiale-toggle:hover { filter: brightness(.95); }
.materiale-toggle:focus-visible { outline: 2px solid var(--bs-primary); outline-offset: 2px; }
.materiale-toggle__chevron { opacity: .6; transition: transform .15s ease; }
.materiale-toggle[aria-expanded="true"] .materiale-toggle__chevron { transform: rotate(180deg); }
.materiale-toggle[data-stato="azione"] {
    background: var(--bs-warning-bg-subtle);
    border-color: var(--bs-warning-border-subtle);
    color: var(--bs-warning-text-emphasis);
    font-weight: 600;
}
.materiale-toggle[data-stato="attesa"] { background: var(--bs-danger-bg-subtle); color: var(--bs-danger-text-emphasis); }
.materiale-toggle[data-stato="ok"] { color: var(--bs-success); }
.materiale-toggle[data-stato="vuoto"] { background: var(--bs-secondary-bg); color: var(--bs-secondary-color); }
.materiale-toggle[data-stato="revisione"] { background: var(--bs-info-bg-subtle); color: var(--bs-info-text-emphasis); }
.materiale-vuoto { font-size: .8125rem; color: var(--bs-secondary-color); }

/* Riga dei file: fondo tenue, niente riquadro interno */
.riga-materiale > td { padding: 0 !important; border-bottom-width: 0; background: var(--bs-tertiary-bg); }
.materiale-pannello {
    margin-left: 1.25rem;
    padding: .5rem 1rem .75rem 1rem;
    border-left: 2px solid var(--bs-border-color);
}
.materiale-lista { list-style: none; margin: 0; padding: 0; }

/* Singolo file: icona | nome e meta | esito | azioni secondarie */
.materiale-file {
    display: grid;
    grid-template-columns: 1.5rem minmax(0, 1fr) auto auto;
    align-items: center;
    column-gap: .75rem;
    padding: .5rem .75rem;
    border-bottom: 1px solid var(--bs-border-color-translucent);
}
.materiale-file:last-child { border-bottom: 0; }
.materiale-file[data-stato="ricevuto"] {
    background: var(--bs-warning-bg-subtle);
    border-radius: .375rem;
    box-shadow: inset 3px 0 0 var(--bs-warning);
    border-bottom-color: transparent;
    margin-bottom: 2px;
}
.materiale-file__icona { font-size: 1.25rem; color: var(--bs-secondary-color); }
.materiale-file__nome { font-weight: 500; color: var(--bs-body-color); word-break: break-word; }
a.materiale-file__nome:hover { color: var(--bs-primary); }
.materiale-file__meta { font-size: .75rem; color: var(--bs-secondary-color); }
.materiale-file__nota { font-size: .75rem; font-style: italic; color: var(--bs-danger); margin-top: .125rem; }
.materiale-file__esito { display: flex; gap: .375rem; font-size: .8125rem; white-space: nowrap; }
.materiale-file__azioni { display: flex; }
.materiale-file__azioni .btn { padding: .125rem .375rem; border: 0; color: var(--bs-secondary-color); }
.materiale-file__azioni .btn:hover { background: var(--bs-secondary-bg); color: var(--bs-body-color); }
.materiale-file__azioni .btn-elimina-asset-admin:hover,
.materiale-file__azioni .btn-elimina-asset:hover { color: var(--bs-danger); }

.materiale-pannello__footer {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem;
    padding: .5rem .75rem 0;
    font-size: .8125rem;
}

/* Mobile: esito e azioni vanno sotto il nome */
@media (max-width: 767.98px) {
    .materiale-file { grid-template-columns: 1.5rem minmax(0, 1fr); row-gap: .375rem; }
    .materiale-file__esito, .materiale-file__azioni { grid-column: 2; }
    .materiale-pannello { margin-left: .5rem; }
}

/* ============================================
   C O N T A T O R I   M A T E R I A L E   (mappa servizi)
   ============================================
   Pill morbide come i badge della tabella: sfondo tenue, numero in evidenza;
   il contatore attivo (filtro applicato) diventa pieno */
.contatore-materiale {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    border: 0;
    border-radius: 50rem;
    padding: .35rem .9rem;
    font-size: .8125rem;
    font-weight: 500;
    line-height: 1.2;
    transition: background-color .15s, color .15s;
}
.contatore-materiale strong {
    font-weight: 700;
    font-size: .9375rem;
}
/* Testo con il colore base: le variabili *-text-emphasis del tema contengono
   una funzione SCSS non compilata e non sono utilizzabili */
.contatore-materiale[data-colore="danger"]  { background: var(--bs-danger-bg-subtle);  color: var(--bs-danger); }
.contatore-materiale[data-colore="warning"] { background: var(--bs-warning-bg-subtle); color: var(--bs-warning); }
.contatore-materiale:hover { filter: brightness(.95); }
.contatore-materiale.active[data-colore="danger"]  { background: var(--bs-danger);  color: #fff; }
.contatore-materiale.active[data-colore="warning"] { background: var(--bs-warning); color: #fff; }

/* ============================================
   D A S H B O A R D   M A R K E T I N G
   Colori con un significato: arancio = da fare, rosso = attesa sponsor
   ============================================ */

/* Card dei numeri "Senza file": grigio neutro (il secondary del tema tende al blu) */
.kpi-neutro { background: var(--bs-tertiary-bg); border-left-color: #98a2b3 !important; }
.kpi-neutro .kpi-neutro__icona { background: #98a2b3; color: #fff; }

/* File da approvare: solo il bordo sinistro arancione, senza fondo ne' altri bordi */
.riga-da-approvare {
    border-left: 3px solid var(--bs-warning);
    padding: .5rem .75rem;
    margin-bottom: .5rem;
}

/* Agenda: il gruppo "Oggi" in evidenza */
.agenda-oggi {
    background: var(--bs-primary-bg-subtle);
    border-radius: .375rem;
    padding: .25rem .75rem .5rem;
    margin: .5rem 0;
}
.agenda-oggi > div:last-child { border-bottom: 0 !important; }

/* ============================================
   D I S P O N I B I L I T A '   S E R V I Z I
   Barra venduti (verde) / in trattativa (arancio) / liberi (grigio)
   ============================================ */
.disp-barra {
    display: flex;
    height: 6px;
    min-width: 110px;
    border-radius: 3px;
    background: var(--bs-secondary-bg);
    overflow: hidden;
}
.disp-barra__venduti { background: var(--bs-success); }
.disp-barra__trattativa { background: var(--bs-warning); }

/* Catalogo servizi: descrizione su una riga */
.servizio-descrizione {
    max-width: 440px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Pulsante freccia delle righe espandibili: ruota quando la riga e' aperta */
.btn-chevron .ti { transition: transform .15s ease; }
.btn-chevron[aria-expanded="true"] .ti { transform: rotate(180deg); }