/* =====================================================================
   Responsive.css - Centralized responsive layer (all pages)
   ---------------------------------------------------------------------
   Single mobile-first responsive layer for the whole application.
   Must be referenced LAST in the <head> (after Site.css and any
   page-level stylesheet) so it consistently wins the cascade.
   Follows the existing theme tokens (Site.css / --ch-* / --iv-* / --ivt-*).
   ===================================================================== */

/* ============ 1. Global media guard ============ */
@media screen {
    html, body { overflow-x: clip; }

    img, picture, video, audio, iframe, embed, object, svg { max-width: 100%; }
    img, picture, svg { height: auto; }
    table, code, pre { overflow-wrap: break-word; }
}

/* ============ 2. Forms, controls & touch targets ============ */
@media (pointer: coarse), (max-width: 767.98px) {
    .form-control,
    .modern-input,
    .btn-login,
    .ps-btn, .pd-btn, .sv-btn, .em-btn, .ch-btn, .ivt-btn, .iv-btn,
    .rv-export-btn, .btn-back, .tab-btn,
    .smart-card-btn {
        min-height: 40px;
        line-height: 1.3 !important;
    }

    .salon-badge-link {
        min-height: 40px;
        display: inline-flex;
        align-items: center;
    }
}

/* ============ 3. Data tables: deliberate in-card horizontal scroll ============ */
@media (max-width: 767.98px) {
    .data-grid-card .grid-view { min-width: 620px; }

    .top-products-table-wrap,
    .ts-data-scroll,
    .supplier-chart-wrapper,
    .emp-chart-wrapper {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
}

/* ============ 4. Invoice view (public sheets) on phones ============ */
@media (max-width: 520px) {
    .invoice-view-page { padding: 10px; }
    .iv-card { padding: 16px; border-radius: 14px; }

    .iv-brand { gap: 10px; }
    .iv-logo { max-height: 48px; max-width: 68px; }
    .iv-company-name { font-size: 16px; }
    .iv-doc-title h1 { font-size: 19px; margin-bottom: 6px; }

    .iv-service-row { grid-template-columns: 1fr 108px; gap: 4px 10px; }
    .iv-col-stylist { grid-column: 1 / -1; font-size: 12px; }

    .iv-ref-grid { grid-template-columns: 1fr; gap: 8px; }
    .iv-ref { padding: 9px 11px; }

    .iv-actions { flex-direction: column; align-items: stretch; }
    .iv-actions .iv-btn { justify-content: center; }

    .iv-company-add, .iv-doc-meta { font-size: 12px; }
    .iv-customer-card { padding: 12px 14px; }
    .iv-customer-name { font-size: 14.5px; }
    .iv-sum-row { padding: 10px 14px; font-size: 13px; }
    .iv-total { padding: 12px 14px; font-size: 13.5px; }
    .iv-total-amount { font-size: 16px; }
    .iv-state { padding: 40px 14px; }
    .iv-state-icon { width: 64px; height: 64px; font-size: 26px; }
}

/* ============ 5. Invoice token page ============ */
@media (max-width: 520px) {
    .invoice-token-page .ivt-actions { width: 100%; }
    .invoice-token-page .ivt-actions .ivt-btn { flex: 1 1 auto; justify-content: center; }
    .invoice-token-page .ivt-link-row { flex-direction: column; align-items: stretch; }
    .invoice-token-page .ivt-link-row .ivt-input { flex: 1 1 auto; width: 100%; }
    .invoice-token-page .ivt-preview-row strong { font-size: 12.5px; }
}

/* ============ 6. Client history small-screen polish ============ */
@media (max-width: 479.98px) {
    .client-history-page .ch-csum { gap: 8px; }
    .client-history-page .ch-filter-actions { flex-direction: column; align-items: stretch; }
    .client-history-page .ch-filter-actions .ch-btn { justify-content: center; }
    .client-history-page .ch-tabs { gap: 4px; }
    .client-history-page .ch-tab-btn { flex: 1 1 auto; text-align: center; }
}

/* ============ 6b. Expenses Summary Report responsive ============ */
@media (max-width: 767.98px) {
    .expenses-summary-report-page .esr-filter-grid { gap: 10px; }
    .expenses-summary-report-page .esr-field { flex: 1 1 45%; min-width: 0; }
    .expenses-summary-report-page .esr-actions { flex: 1 1 100%; }
    .expenses-summary-report-page .esr-summary { gap: 8px 14px; }
}
@media (max-width: 479.98px) {
    .expenses-summary-report-page .esr-field { flex: 1 1 100%; }
    .expenses-summary-report-page .esr-actions { flex-direction: row; flex-wrap: wrap; }
    .expenses-summary-report-page .esr-actions .pill { flex: 1 1 auto; text-align: center; }
    .expenses-summary-report-page .esr-total-line { flex-direction: row; }
}

/* ============ 7. Master-record modules (ps/pd/sv/em) small mobile ============ */
@media (max-width: 479.98px) {
    .customer-master-page .ps-header-right .ps-header-stat,
    .products-master-page .pd-header-right .pd-header-stat,
    .services-master-page .sv-header-right .sv-header-stat,
    .employees-master-page .em-header-right .em-header-stat {
        flex: 1 1 45%;
        min-width: 0;
    }

    .customer-master-page .ps-filter-actions,
    .products-master-page .pd-filter-actions,
    .services-master-page .sv-filter-actions,
    .employees-master-page .em-filter-actions {
        flex-direction: column;
        align-items: stretch;
    }
    .customer-master-page .ps-filter-actions .ps-btn,
    .products-master-page .pd-filter-actions .pd-btn,
    .services-master-page .sv-filter-actions .sv-btn,
    .employees-master-page .em-filter-actions .em-btn {
        justify-content: center;
    }

    .customer-master-page .ps-search-row,
    .products-master-page .pd-search-row,
    .services-master-page .sv-search-row,
    .employees-master-page .em-search-row {
        gap: 8px;
    }
}

/* ============ 8. Ultra-small (320-360px) ============ */
@media (max-width: 359.98px) {
    .stats-grid, .history-stats,
    .customer-master-page .ps-cards,
    .products-master-page .pd-cards,
    .services-master-page .sv-cards,
    .employees-master-page .em-cards,
    .client-history-page .ch-csum {
        gap: 8px;
    }

    .stat-card { padding: 8px; }
    .stat-value { font-size: 16px; }
    .stat-label { font-size: 9.5px; }

    .login-card .login-body-content { padding: 12px; }
    .login-header h2 { font-size: 18px; letter-spacing: -0.01em; }

    .page-header h1 { font-size: 18px; }

    .rv-export-bar { flex-direction: column; align-items: stretch; }
    .rv-export-bar .rv-export-btn { justify-content: center; }
    .rv-range-row { flex-direction: column; align-items: stretch; }
    .rv-custom-range .date-input { width: 100% !important; }

    .rp-toolbar-row .rp-search input { font-size: 13px; }

    .iv-btn { padding: 8px 12px; font-size: 12.5px; }
}

/* ============ 9. Landscape phones ============ */
@media (max-height: 500px) and (orientation: landscape) {
    .content-area { padding-top: 8px !important; padding-bottom: 20px !important; }
}