/* core/static/core/css/custom.css */

/* ============================================================
   DESIGN SYSTEM — classi globali (non ripetere nei template)
   ============================================================ */

/* Header negozio nelle logistica views */
.store-header {
    background-color: var(--bs-primary);
    color: white;
}

/* Bottone logistica (installer dashboard) */
.btn-logistica {
    background-color: var(--bs-primary);
    border-color: var(--bs-primary);
    color: white;
}
.btn-logistica:hover,
.btn-logistica:focus,
.btn-logistica:active {
    background-color: var(--bs-primary-hover);
    border-color: var(--bs-primary-hover);
    color: white !important;
}

/* ============================================================
   BADGE STATI APPUNTAMENTO (use: class="badge badge-state-xxx")
   ============================================================ */
.badge-state-requested   { background-color: var(--brand-orange); color: #000; }
.badge-state-booked      { background-color: var(--bs-primary); color: #fff; }
.badge-state-in_progress { background-color: #0dcaf0; color: #000; }
.badge-state-completed   { background-color: #198754; color: #fff; }

/* ============================================================ */
.custom-table {
    width: 100%;
    border-collapse: collapse;
}
.custom-table th,
.custom-table td {
    padding: 0.75rem;
    border: 1px solid #dee2e6;
}
.custom-table th {
    background-color: #f8f9fa;
    text-align: left;
}
.custom-table tr:nth-child(even) {
    background-color: rgba(248, 249, 250, 0.5); /* Alternanza leggera */
}

.select2-container .select2-selection--single {
    height: calc(1.5em + 0.75rem + 2px);
    padding: 0.375rem 0.75rem;
    font-size: 1rem;
    line-height: 1.5;
    border: 1px solid #ced4da;
    border-radius: 0.25rem;
}
.select2-container--default .select2-selection--single .select2-selection__arrow {
    height: calc(1.5em + 0.75rem);
}
.select2-container--default .select2-selection--single .select2-selection__rendered {
    line-height: calc(1.5em + 0.75rem);
}

/* ============================================================
   BARRA SEZIONI ADMIN PERSISTENTE (base.html / _admin_nav.html)
   Stile "tab sottolineate": banda bianca a tutta larghezza con bordo
   netto sotto, etichette in maiuscoletto, sezione attiva con underline.
   ============================================================ */
.admin-subnav {
    background-color: #fff;
    border-top: 1px solid #e9ecef;
    border-bottom: 2px solid #dee2e6;
}
.admin-subnav .nav {
    justify-content: center;
    gap: .25rem;
    flex-wrap: wrap;
}
.admin-subnav .nav-link {
    --bs-nav-link-color: #6c757d;
    color: #6c757d;
    font-size: .8rem;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
    padding: .75rem .95rem;
    border: 0;
    border-bottom: 3px solid transparent;
    border-radius: 0;
    margin-bottom: -2px;                 /* si sovrappone al bordo della banda */
    transition: color .12s ease, border-color .12s ease;
}
.admin-subnav .nav-link i {
    font-size: .95rem;
    opacity: .75;
}
.admin-subnav .nav-link:hover,
.admin-subnav .nav-link:focus {
    color: #212529;
    border-bottom-color: var(--bs-primary-border-subtle);
}
.admin-subnav .nav-link.active {
    color: #212529;
    border-bottom-color: var(--bs-primary);
}
.admin-subnav .nav-link.active i {
    opacity: 1;
    color: var(--bs-primary);
}
.admin-subnav .nav-link .badge {
    background-color: var(--bs-primary) !important;
    color: #fff !important;
    font-size: .68rem;
    font-weight: 700;
    vertical-align: .08em;
}

/* Pulsante che apre il menu a tendina (visibile solo su telefono, vedi
   sotto) e contenitore del menu stesso: di default (tablet/desktop) il
   menu resta la barra orizzontale di sempre, senza il bottone. */
.admin-subnav-dropdown {
    position: relative;
}
.admin-subnav-toggle {
    display: none;
}
.admin-subnav-menu {
    display: flex;
    justify-content: center;
    gap: .25rem;
    flex-wrap: wrap;
    position: static;
    width: auto;
    margin: 0;
    padding: 0;
    border: 0;
    box-shadow: none;
    background: none;
}

/* Su telefono i 7 link andrebbero a capo su 3-4 righe (flex-wrap sopra),
   mangiando spazio verticale prezioso: sotto questa larghezza il menu
   diventa un dropdown aperto dal bottone, invece di scorrere in
   orizzontale. */
@media (max-width: 575.98px) {
    .admin-subnav .container {
        padding-top: .4rem;
        padding-bottom: .4rem;
    }
    .admin-subnav-toggle {
        display: flex;
        align-items: center;
        width: 100%;
        color: #212529;
        font-size: .8rem;
        font-weight: 600;
        letter-spacing: .04em;
        text-transform: uppercase;
        background-color: #f8f9fa;
        border: 1px solid #dee2e6;
        border-radius: .375rem;
        padding: .55rem .75rem;
    }
    .admin-subnav-menu {
        display: none;
        position: absolute;
        inset-inline: 0;
        top: 100%;
        z-index: 1030;
        flex-direction: column;
        flex-wrap: nowrap;
        gap: 0;
        margin-top: .25rem;
        padding: .25rem;
        background-color: #fff;
        border: 1px solid #dee2e6;
        border-radius: .375rem;
        box-shadow: 0 .5rem 1rem rgba(0, 0, 0, .15);
    }
    .admin-subnav-menu.show {
        display: flex;
    }
    .admin-subnav-menu .nav-item {
        width: 100%;
    }
    .admin-subnav-menu .nav-link {
        width: 100%;
        margin-bottom: 0;
        border-bottom: 0;
        border-radius: .25rem;
    }
    .admin-subnav-menu .nav-link.active {
        background-color: var(--bs-primary-bg-subtle, #e7f1ff);
    }
}

/* ============================================================
   TABELLE → CARD SU MOBILE (sotto il breakpoint "md" di Bootstrap)
   Uso: aggiungere class="table-mobile-cards" alla <table> e, su ogni
   <td>, l'attributo data-label="Etichetta colonna" (l'intestazione
   corrispondente). Sulla cella delle azioni (bottoni/form), usare la
   classe "table-mobile-cards-actions" invece dell'attributo data-label:
   i bottoni vengono impilati a piena larghezza invece del pattern
   etichetta/valore. Sopra il breakpoint la tabella resta invariata.
   Pensata per le tabelle usate sul campo (dashboard installatore,
   dashboard commesso, logistica installatore) — non tocca le altre.
   ============================================================ */
@media (max-width: 767.98px) {
    .table-mobile-cards,
    .table-mobile-cards tbody,
    .table-mobile-cards tr,
    .table-mobile-cards td {
        display: block;
        width: 100%;
    }
    .table-mobile-cards thead {
        display: none;
    }
    .table-mobile-cards tbody tr {
        background: #fff;
        border: 1px solid #dee2e6;
        border-radius: .5rem;
        margin-bottom: .75rem;
        padding: .25rem .9rem;
        box-shadow: 0 1px 3px rgba(0, 0, 0, .06);
    }
    .table-mobile-cards.table-striped tbody tr:nth-child(even),
    .table-mobile-cards.table-hover tbody tr:hover {
        background: #fff; /* lo zebra/hover a righe non ha senso su una card singola */
    }
    .table-mobile-cards tbody tr:last-child {
        margin-bottom: 0;
    }
    .table-mobile-cards td {
        display: grid;
        grid-template-columns: minmax(84px, 38%) 1fr;
        align-items: baseline;
        gap: .5rem .75rem;
        border: 0;
        border-bottom: 1px solid #f1f1f3;
        padding: .45rem 0;
        text-align: right;
    }
    .table-mobile-cards td:last-of-type {
        border-bottom: 0;
    }
    .table-mobile-cards td::before {
        content: attr(data-label);
        font-size: .72rem;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: .02em;
        color: #6c757d;
        text-align: left;
    }
    /* Cella senza data-label (es. pallino colore negozio, ridondante col
       nome negozio già visibile altrove): non ha senso su mobile. */
    .table-mobile-cards td:not([data-label]):not(.table-mobile-cards-actions):not(.table-mobile-cards-empty) {
        display: none;
    }
    /* Riga "nessun risultato" (colspan su tutta la larghezza): va mostrata
       come semplice messaggio centrato, non come coppia etichetta/valore. */
    .table-mobile-cards td.table-mobile-cards-empty {
        display: block;
        text-align: center;
        padding: 1rem 0;
    }
    .table-mobile-cards td.table-mobile-cards-empty::before {
        content: none;
    }
    .table-mobile-cards tbody tr:has(td.table-mobile-cards-empty) {
        border: 0;
        box-shadow: none;
        background: transparent;
    }
    .table-mobile-cards td.table-mobile-cards-actions {
        display: flex;
        flex-direction: column;
        gap: .5rem;
        text-align: left;
        padding-top: .6rem;
    }
    .table-mobile-cards td.table-mobile-cards-actions::before {
        content: none;
    }
    .table-mobile-cards-actions form.d-inline {
        display: block !important; /* vince sull'utility Bootstrap .d-inline */
        width: 100%;
    }
    /* Qualsiasi figlio diretto (bottone, link, form, .btn-group) a piena
       larghezza — più facile da toccare di una fila di bottoni piccoli. */
    .table-mobile-cards-actions > * {
        width: 100%;
    }
    .table-mobile-cards-actions .btn {
        width: 100%;
    }
}

/* ============================================================
   HEADER CON CAMPO DI RICERCA (dashboard admin, ecc.)
   Il campo di ricerca aveva una larghezza fissa in px e l'header non
   andava a capo: su telefono il titolo + input + bottoni traboccavano.
   Uso: aggiungere "flex-wrap" all'header e "search-field-flex" al
   campo di ricerca invece di style="width: NNNpx".
   ============================================================ */
.search-field-flex {
    flex: 1 1 220px; /* stessa larghezza di partenza di prima, ma può restringersi */
    min-width: 0;    /* indispensabile perché un flex item si restringa sotto il suo contenuto */
}

/* ============================================================
   MAPPE LEAFLET A ALTEZZA RESPONSIVE
   Altezza fissa in px (420-520px) su telefono occupa quasi un intero
   schermo prima di arrivare al contenuto utile sotto la mappa. Usare
   queste classi al posto di style="height:NNNpx" (niente inline style
   da sovrascrivere: eviterebbe la media query sotto per specificità).
   ============================================================ */
.leaflet-map-420 { height: 420px; }
.leaflet-map-520 { height: 520px; }
@media (max-width: 767.98px) {
    .leaflet-map-420,
    .leaflet-map-520 {
        height: clamp(220px, 45vh, 420px);
    }
}