/* ============================================================
   responsive.css — shared mobile/tablet retrofit (additive only)
   Every rule lives inside a screen-width media query, so
   browser-print and PDF output are never affected.
   Load AFTER all other stylesheets (just before </head>).
   ============================================================ */

/* ---------- <=768px: phones & small tablets ---------- */
@media screen and (max-width: 768px) {

    /* --- data tables: swipe sideways instead of clipping --- */
    .table-container,
    #customerTableBody,
    .card-body {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch;
    }
    .table-container .data-table,
    .card-body .data-table { min-width: 640px; }
    #customerTableBody .customers-table { min-width: 780px; }

    /* keep table rows from wrapping into mush while swiping */
    .data-table td, .data-table th,
    .customers-table td, .customers-table th {
        white-space: nowrap;
    }

    /* --- stats cards: 2-up on phones --- */
    .stats-row,
    .stats-grid {
        grid-template-columns: 1fr 1fr !important;
        gap: 12px !important;
    }

    /* --- forms: single column, tighter padding --- */
    .form-grid,
    .form-row {
        grid-template-columns: 1fr !important;
        gap: 14px !important;
    }
    .form-section { padding: 18px 16px !important; }
    .form-card { padding: 20px 16px !important; }

    /* --- page shell breathing room --- */
    body.has-sidebar .main-content-wrapper { padding: 16px !important; }
    .page-container { padding: 12px !important; }

    /* --- page header stacks above its action button --- */
    .page-header {
        flex-direction: column;
        align-items: flex-start !important;
        gap: 12px;
    }

    /* --- search / filter bars become fluid --- */
    .search-box input { width: 100% !important; max-width: none !important; }
    .search-bar { flex-direction: column; align-items: stretch; }
    .search-bar input, .search-bar select { width: 100% !important; }
    .filters-bar { flex-direction: column; align-items: stretch; }

    /* --- customer view: stack profile card over details --- */
    .customer-profile { flex-direction: column; }
    .profile-card { flex: 0 0 auto !important; width: 100%; }
    .info-grid { grid-template-columns: 1fr !important; }
    .info-full { grid-column: span 1 !important; }

    /* --- payment view: label-above-value rows --- */
    .detail-row { flex-direction: column; gap: 4px; }
    .detail-label { width: auto; }

    /* --- invoice / quotation view pages --- */
    .invoice-details {
        grid-template-columns: 1fr !important;
        gap: 20px !important;
        padding: 20px !important;
    }
    .invoice-footer { grid-template-columns: 1fr !important; gap: 10px; }
    .footer-section { border-right: none !important; border-bottom: 1px solid #dee2e6; }
    .footer-section:last-child { border-bottom: none; }

    /* --- modals never exceed viewport --- */
    .modal-content,
    .delete-modal-content {
        width: 92% !important;
        max-width: 92vw !important;
    }
}

/* ---------- <=480px: small phones ---------- */
@media screen and (max-width: 480px) {

    /* stat cards go single-file so numbers never squeeze */
    .stats-row,
    .stats-grid { grid-template-columns: 1fr !important; }

    /* full-width action buttons are easier to hit */
    .page-header .btn,
    .page-header button {
        width: 100%;
        justify-content: center;
    }
}

/* ============================================================
   Tier 2 — dashboard shell, products, reports, settings,
   admin, HR module (employees/attendance/leaves/payroll/advances)
   ============================================================ */

/* ---------- <=768px ---------- */
@media screen and (max-width: 768px) {

    /* --- HR list cards wrap the same swipe pattern --- */
    .table-card {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch;
    }
    #payTableBody { overflow-x: auto !important; -webkit-overflow-scrolling: touch; }

    .emp-table   { min-width: 680px; }
    .leave-table { min-width: 760px; }
    .pay-table   { min-width: 760px; }
    .adv-table   { min-width: 640px; }
    .att-table,
    .report-table { min-width: 640px; }

    /* --- admin panel --- */
    .tabs { flex-wrap: wrap; }

    /* --- HR summary strips (attendance / payroll / advances) --- */
    .summary-row { grid-template-columns: 1fr 1fr !important; gap: 12px !important; }
}

/* ---------- <=480px ---------- */
@media screen and (max-width: 480px) {
    .summary-row { grid-template-columns: 1fr !important; }
}