/* ============================================
   RESPONSIVE — Media Queries Mobile-First
   ============================================ */

/* ── TABELA → CARDS (Mobile) ───────────────── */
@media (max-width: 768px) {

    /* Classe utilitária: aplicar na <table> */
    .table-to-cards thead {
        display: none;
    }

    .table-to-cards tbody tr {
        display: block;
        margin-bottom: 1rem;
        border-radius: var(--border-radius);
        box-shadow: var(--shadow-sm);
        padding: 1rem;
        background: var(--color-card-bg);
        border: 1px solid var(--color-border);
    }

    .table-to-cards tbody td {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 0.5rem 0;
        border: none;
        border-bottom: 1px solid var(--color-border-light);
    }

    .table-to-cards tbody td::before {
        content: attr(data-label);
        font-weight: 700;
        color: var(--color-text-muted);
        text-transform: uppercase;
        font-size: 0.7rem;
        flex-shrink: 0;
        margin-right: 1rem;
    }

    .table-to-cards tbody td:last-child {
        border-bottom: none;
    }

    /* Ajuste para coluna de ações */
    .table-to-cards tbody td[data-label="Ações"] {
        justify-content: flex-end;
    }

    /* ── GRID: Cards em 2 colunas no mobile ─── */
    .col-md-3 {
        flex: 0 0 50%;
        max-width: 50%;
    }

    /* ── NAVBAR: ocultar info de perfil ─────── */
    .navbar .d-none.d-md-block {
        display: none !important;
    }

    /* ── FORMULÁRIOS: full width no mobile ──── */
    .col-md-2,
    .col-md-3,
    .col-md-4,
    .col-md-5,
    .col-md-6,
    .col-md-7 {
        /* Bootstrap já lida com isso via col-12 default,
           mas forçamos aqui para formulários inline */
    }

    /* Botão Ponto: um pouco menor no mobile */
    .btn-ponto {
        width: 150px;
        height: 150px;
    }

    .relogio-digital {
        font-size: 2.5rem;
    }

    /* KPI footer: stack columns */
    .card-footer .row .col-md-6 {
        border-right: none !important;
        border-bottom: 1px solid var(--color-border);
        padding-bottom: 1rem;
        margin-bottom: 1rem;
    }

    .card-footer .row .col-md-6:last-child {
        border-bottom: none;
        padding-bottom: 0;
        margin-bottom: 0;
    }
}

/* ── TABLETS (768px - 991px) ───────────────── */
@media (min-width: 768px) and (max-width: 991.98px) {
    .table-to-cards thead {
        /* Mantém tabela em tablets */
    }
}

/* ── SMALL PHONES (< 576px) ────────────────── */
@media (max-width: 575.98px) {
    .container {
        padding-left: 1rem;
        padding-right: 1rem;
    }

    /* Cards: 1 coluna em telas muito pequenas */
    .row.g-4>[class*="col-"] {
        flex: 0 0 100%;
        max-width: 100%;
    }

    h3 {
        font-size: 1.25rem;
    }

    h4 {
        font-size: 1.1rem;
    }

    .btn-ponto {
        width: 130px;
        height: 130px;
    }

    .relogio-digital {
        font-size: 2rem;
    }
}