﻿/* ── Toolbar ── */
.bandi-toolbar {
    background: #00325D;
    padding: 1rem 1.5rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: .75rem;
}

    .bandi-toolbar h2 {
        font-family: 'Cormorant Garamond', serif;
        font-size: 1.5rem;
        font-weight: 300;
        color: #fff;
        margin: 0;
    }

.btn-bandi-switch {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    padding: .4rem 1rem;
    border: 1px solid rgba(163,197,233,.4);
    border-radius: 3px;
    background: transparent;
    color: #A3C5E9;
    font-size: .82rem;
    font-weight: 500;
    text-decoration: none;
    white-space: nowrap;
    transition: background .2s, color .2s;
}

    .btn-bandi-switch:hover {
        background: rgba(163,197,233,.15);
        color: #fff;
    }

/* ── Search bar ── */
.bandi-search-bar {
    background: #EEF4FB;
    border-bottom: 1px solid rgba(0,50,93,.12);
    padding: .85rem 1.5rem;
    display: flex;
    align-items: center;
    gap: .65rem;
    flex-wrap: wrap;
}

    .bandi-search-bar .search-icon {
        color: #3C5A73;
        flex-shrink: 0;
    }

    .bandi-search-bar input {
        flex: 1;
        min-width: 160px;
        border: 1px solid rgba(0,50,93,.2);
        border-radius: 3px;
        padding: .5rem .85rem;
        font-size: .88rem;
        color: #00325D;
        background: #fff;
        outline: none;
        transition: border-color .2s;
    }

        .bandi-search-bar input:focus {
            border-color: #00325D;
        }

.btn-cerca {
    background: #00325D;
    color: #fff;
    border: none;
    border-radius: 3px;
    padding: .5rem 1.1rem;
    font-size: .85rem;
    cursor: pointer;
    white-space: nowrap;
    transition: opacity .2s;
}

    .btn-cerca:hover {
        opacity: .85;
    }

.btn-reset {
    background: transparent;
    color: #3C5A73;
    border: 1px solid rgba(0,50,93,.2);
    border-radius: 3px;
    padding: .5rem .9rem;
    font-size: .85rem;
    cursor: pointer;
    white-space: nowrap;
    transition: background .2s;
}

    .btn-reset:hover {
        background: rgba(0,50,93,.06);
    }

/* ── Grid wrapper ── */
.bandi-grid-wrap {
    padding: 1.2rem 1.5rem;
    background: #fff;
    overflow-x: auto; /* scroll orizzontale su mobile */
    -webkit-overflow-scrolling: touch;
}

#wrapper {
    min-width: 320px;
}
/* evita collasso totale */

/* ── Override gridjs ── */
.gridjs-wrapper {
    border: none !important;
    box-shadow: none !important;
}

.gridjs-table {
    width: 100% !important;
}

.gridjs-th {
    background: #00325D !important;
    color: #A3C5E9 !important;
    font-size: .75rem;
    letter-spacing: .08em;
    text-transform: uppercase;
    font-weight: 500;
    border: none !important;
    padding: .75rem .85rem !important;
}

.gridjs-th-content {
    color: #A3C5E9 !important;
}

.gridjs-th-sort:hover {
    background: #004A8A !important;
}

.gridjs-td {
    padding: .75rem .85rem !important;
    font-size: .88rem;
    color: #1A3A52;
    border-bottom: 1px solid rgba(0,50,93,.08) !important;
    cursor: pointer;
    vertical-align: middle;
}

.gridjs-tr:hover .gridjs-td {
    background: #EEF4FB !important;
}

.gridjs-footer {
    border: none !important;
    padding: .75rem 0 0 !important;
}

.gridjs-pages button {
    border: 1px solid rgba(0,50,93,.2) !important;
    color: #00325D !important;
    background: #fff !important;
    border-radius: 3px !important;
    font-size: .8rem !important;
    min-width: 32px;
}

    .gridjs-pages button:hover,
    .gridjs-pages button[disabled] {
        background: #00325D !important;
        color: #fff !important;
    }

.gridjs-summary {
    font-size: .75rem;
    color: #3C5A73;
}

/* ── Footer bar ── */
.bandi-footer-bar {
    background: #EEF4FB;
    border-top: 1px solid rgba(0,50,93,.1);
    padding: .75rem 1.5rem;
    display: flex;
    justify-content: flex-end;
}

/* ── MOBILE ── */
@@media (max-width: 767px) {
    .bandi-toolbar {
        padding: .85rem 1rem;
    }

        .bandi-toolbar h2 {
            font-size: 1.2rem;
        }

    .bandi-search-bar {
        padding: .75rem 1rem;
        gap: .5rem;
    }

        .bandi-search-bar .search-icon {
            display: none;
        }
        /* nasconde icona su mobile per spazio */
        .bandi-search-bar input {
            min-width: 100%;
            order: 1;
        }
    /* input a riga piena */
    .btn-cerca {
        flex: 1;
        order: 2;
    }

    .btn-reset {
        flex: 1;
        order: 3;
    }

    .bandi-grid-wrap {
        padding: .75rem 1rem;
    }
    /* Su mobile la colonna Scadenza diventa più stretta */
    .gridjs-td, .gridjs-th {
        padding: .65rem .6rem !important;
        font-size: .8rem;
    }

    .bandi-footer-bar {
        padding: .65rem 1rem;
    }
}

@@media (max-width: 480px) {
    /* Nasconde la colonna Scadenza su schermi molto piccoli
           e la mostra nel titolo del bando come testo aggiuntivo.
           Gestito via JS sotto. */
    .gridjs-th:nth-child(2),
    .gridjs-td:nth-child(2) {
        display: none;
    }
}
