/* ============================================================
   RESPONSIVE.CSS — Ajustes responsivos unificados
   ============================================================ */


/* =====================  MOBILE FIRST  ===================== */

@media (max-width: 480px) {

    /* Card */
    .card-time {
        width: 100%;
        font-size: 1.15em;
    }

    .card-header-second {
        padding: 6px 8px;
        font-size: 1.2em;
    }

    .card-time table td,
    .reservas-panel table td {
        padding: 3px 4px;
    }

    .card-time img,
    .reservas-panel img {
        max-height: 18px;
    }

    .card-time td:nth-child(3),
    .reservas-panel td:nth-child(3) {
        max-width: 120px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .abrir-reservas {
        width: 28px;
        height: 28px;
    }

    .morph-icon {
        width: 16px;
        height: 16px;
    }

    /* Modal */
    .modal-dialog {
        margin-top: 70px;
    }

    /* Grid dos times no modal */
    .times-grid {
        grid-template-columns: 1fr 1fr;
    }

    /* Navbar */
    nav.navbar img {
        width: 26px;
        height: 26px;
        margin-right: 6px;
    }

    /* Espaço extra abaixo da navbar */
    main {
        padding-top: 90px;
    }
}


/* =====================  TABLETS  ===================== */

@media (min-width: 481px) and (max-width: 768px) {

    .card-time {
        width: 22rem;
        font-size: 1.25em;
    }

    .card-header-second {
        padding: 8px 10px;
        font-size: 1.28em;
    }

    .card-time table td,
    .reservas-panel table td {
        padding: 5px 6px;
    }

    .card-time img,
    .reservas-panel img {
        max-height: 20px;
    }

    .card-time td:nth-child(3),
    .reservas-panel td:nth-child(3) {
        max-width: 150px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .abrir-reservas {
        width: 26px;
        height: 26px;
    }

    .morph-icon {
        width: 16px;
        height: 16px;
    }

    .modal-dialog {
        margin-top: 70px;
    }
}


/* =====================  TELAS GRANDES (LAPTOPS)  ===================== */

@media (min-width: 1024px) and (max-width: 1366px) {

    .card-time {
        width: 20rem;
        font-size: 1.28em;
    }

    .card-header-second {
        padding: 10px 12px;
        font-size: 1.30em;
    }

    .card-time table td,
    .reservas-panel table td {
        padding: 5px 7px;
    }

    .card-time img,
    .reservas-panel img {
        max-height: 22px;
    }

    .card-time td:nth-child(3),
    .reservas-panel td:nth-child(3) {
        max-width: 180px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .abrir-reservas {
        width: 26px;
        height: 26px;
    }

    .morph-icon {
        width: 16px;
        height: 16px;
    }
}


/* =====================  NAVBAR — AJUSTES GERAIS  ===================== */

nav.navbar img {
    width: 28px;
    height: 28px;
    margin-right: 8px;
}

/* Espaço padrão abaixo da navbar */
main {
    padding-top: 70px;
}