/* ═══════════════════════════════════════════════
   responsive.css — Mobile-first responsive styles
   Included globally via navi.php
   ═══════════════════════════════════════════════ */

/* ── General Mobile Fixes ── */
@media (max-width: 767.98px) {
    .page-header {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 10px !important;
    }
    .page-header h1 { font-size: 1.25rem !important; }

    .filter-bar {
        flex-wrap: wrap !important;
        gap: 6px !important;
    }
    .filter-btn { font-size: .72rem !important; padding: 5px 10px !important; }

    .filter-date-group {
        width: 100% !important;
        margin-left: 0 !important;
        margin-top: 6px;
    }

    .content-card, .info-grid-card, .card-section {
        border-radius: 10px !important;
    }

    .info-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 8px !important;
    }

    .modal-dialog {
        margin: 8px !important;
    }
    .modal-dialog.modal-lg { max-width: 100% !important; }

    /* Stats cards */
    .stats-grid {
        grid-template-columns: 1fr 1fr !important;
        gap: 10px !important;
    }
}

@media (max-width: 479.98px) {
    .info-grid {
        grid-template-columns: 1fr !important;
    }
    .stats-grid {
        grid-template-columns: 1fr !important;
    }
}


/* ══════════════════════════════════════════
   DataTables → Mobile Card Layout
   On screens ≤768px, tables go from rows
   to stacked cards with label:value pairs.
   ══════════════════════════════════════════ */
@media (max-width: 767.98px) {

    /* Hide the DataTables header row */
    .dataTables_wrapper table.dataTable thead {
        display: none !important;
    }

    /* Each tr becomes a card */
    .dataTables_wrapper table.dataTable tbody tr {
        display: block !important;
        background: #fff;
        border: 1px solid #e2e8f0;
        border-radius: 12px;
        padding: 14px 16px;
        margin-bottom: 10px;
        box-shadow: 0 1px 4px rgba(0,0,0,.04);
    }

    .dataTables_wrapper table.dataTable tbody tr:hover {
        box-shadow: 0 4px 12px rgba(0,0,0,.08);
    }

    /* Each td becomes a row inside the card */
    .dataTables_wrapper table.dataTable tbody td {
        display: flex !important;
        align-items: center;
        justify-content: space-between;
        padding: 5px 0 !important;
        border: none !important;
        border-bottom: 1px solid #f1f5f9;
        font-size: .85rem;
        text-align: right !important;
        gap: 8px;
    }

    .dataTables_wrapper table.dataTable tbody td:last-child {
        border-bottom: none;
    }

    /* Add field labels from data-label attribute via JS */
    .dataTables_wrapper table.dataTable tbody td::before {
        content: attr(data-label);
        font-weight: 600;
        color: #475569;
        font-size: .78rem;
        text-align: left;
        text-transform: uppercase;
        letter-spacing: .03em;
        flex-shrink: 0;
        min-width: 90px;
    }

    /* DataTables controls */
    .dataTables_wrapper .dataTables_length,
    .dataTables_wrapper .dataTables_filter {
        text-align: center !important;
        margin-bottom: 10px;
    }

    .dataTables_wrapper .dataTables_filter input {
        width: 100% !important;
        max-width: 100% !important;
    }

    .dataTables_wrapper .dataTables_info,
    .dataTables_wrapper .dataTables_paginate {
        text-align: center !important;
        margin-top: 10px;
    }

    /* Non-DataTable tables (rx-table, etc) */
    .rx-table { font-size: .78rem !important; }
    .rx-table th, .rx-table td { padding: 4px 6px !important; }

    /* Receta cards */
    .receta-card { padding: 14px !important; }
    .receta-header { flex-direction: column !important; align-items: flex-start !important; gap: 6px !important; }

    /* Photo grid */
    .fotos-grid { gap: 6px !important; }
    .foto-thumb { width: 70px !important; height: 70px !important; }

    /* Button sizes */
    .btn-primary-custom { font-size: .8rem !important; padding: 7px 14px !important; }
}

/* ── Tablet adjustments ── */
@media (min-width: 768px) and (max-width: 991.98px) {
    .info-grid {
        grid-template-columns: repeat(3, 1fr) !important;
    }
}