/* ============================================================================
   RESPONSIVE.CSS — Comprehensive Breakpoint System
   Supports: 320px 375px 425px 576px 768px 992px 1200px 1440px 1600px 1920px
   
   RULE: Only the table scrolls horizontally — the page NEVER scrolls horizontally.
   ============================================================================ */

/* Prevent horizontal page scroll at all sizes */
html, body { overflow-x: hidden; max-width: 100%; }
.main-content { overflow-x: hidden; min-width: 0; }
.page-container { min-width: 0; overflow-x: hidden; }

/* ─── WIDESCREEN 1920px+ ─── */
@media (min-width: 1920px) {
    :root { --content-padding: 3rem; --sidebar-width: 260px; }
    .kpi-grid { grid-template-columns: repeat(5, 1fr); }
}

/* ─── WIDE DESKTOP 1600–1919px ─── */
@media (min-width: 1600px) and (max-width: 1919px) {
    :root { --content-padding: 2.5rem; }
    .kpi-grid { grid-template-columns: repeat(5, 1fr); }
}

/* ─── LARGE DESKTOP 1440–1599px ─── */
@media (min-width: 1440px) and (max-width: 1599px) {
    :root { --content-padding: 2.25rem; }
    .kpi-grid { grid-template-columns: repeat(4, 1fr); }
}

/* ─── STANDARD DESKTOP 1200–1439px ─── */
@media (min-width: 1200px) and (max-width: 1439px) {
    :root { --content-padding: 2rem; }
    .kpi-grid { grid-template-columns: repeat(4, 1fr); }
}

/* ─── SMALL DESKTOP 992–1199px ─── */
@media (min-width: 992px) and (max-width: 1199px) {
    .kpi-grid   { grid-template-columns: repeat(3, 1fr); }
    .stats-grid { grid-template-columns: repeat(3, 1fr); }
}

/* ─── TABLET LANDSCAPE max-991px ─── */
@media (max-width: 991px) {
    .sidebar-toggle { display: flex !important; }
    .kpi-grid       { grid-template-columns: repeat(2, 1fr); }
    .stats-grid     { grid-template-columns: repeat(2, 1fr); }
}

/* ─── TABLET PORTRAIT 768–991px ─── */
@media (min-width: 768px) and (max-width: 991px) {
    :root { --content-padding: 1.5rem; }
    .card { padding: var(--space-5); }
    .table-toolbar { flex-wrap: wrap; gap: var(--space-3); }
    .search-wrapper { max-width: none; flex: 1 1 200px; }
}

/* ─── MOBILE max-767px ─── */
@media (max-width: 767px) {
    :root { --content-padding: 1.25rem; }
    .sidebar-toggle { display: flex !important; }
    .kpi-grid   { grid-template-columns: repeat(2, 1fr); gap: var(--space-3); }
    .stats-grid { grid-template-columns: repeat(2, 1fr); gap: var(--space-3); }
    .page-header { flex-direction: column; align-items: flex-start; gap: var(--space-3); margin-bottom: var(--space-5); }
    .page-header-actions { width: 100%; flex-wrap: wrap; gap: var(--space-2); justify-content: flex-start; }
    .card { padding: var(--space-4); border-radius: var(--radius-lg); }
    .table-container { border-radius: var(--radius-lg); }
    table th, table td { padding: var(--space-2) var(--space-3); }
    .table-toolbar { padding: var(--space-3) var(--space-4); }
    .table-footer  { padding: var(--space-3) var(--space-4); }
    .header { padding: 0 var(--space-4); }
    .breadcrumb { display: none; }
}

/* ─── LARGE PHONE max-575px ─── */
@media (max-width: 575px) {
    :root { --content-padding: 1rem; }
    .kpi-grid   { grid-template-columns: repeat(2, 1fr); gap: var(--space-2); }
    .stats-grid { grid-template-columns: repeat(2, 1fr); }
    .page-header h1, .page-header-info h1 { font-size: var(--font-size-xl); }
    .table-toolbar { flex-direction: column; align-items: stretch; padding: var(--space-3); gap: var(--space-2); }
    .toolbar-left  { flex-direction: column; }
    .toolbar-right { flex-wrap: wrap; gap: var(--space-2); }
    .search-wrapper { max-width: none; }
    .modal { padding: var(--space-2); align-items: flex-end; }
    .modal-content { max-height: 94vh; border-radius: var(--radius-xl) var(--radius-xl) 0 0; }
    .modal-footer { flex-direction: column; }
    .modal-footer .btn { width: 100%; justify-content: center; }
    .page-header-actions .btn { flex: 1; justify-content: center; min-width: 0; }
    .table-footer { flex-direction: column; align-items: flex-start; gap: var(--space-3); }
    .table-pagination-controls { width: 100%; flex-direction: column; align-items: flex-start; }
    .pagination { flex-wrap: wrap; }
}

/* ─── SMALL PHONE max-424px ─── */
@media (max-width: 424px) {
    :root { --content-padding: 0.75rem; --header-height: 56px; }
    .kpi-grid   { grid-template-columns: 1fr 1fr; gap: var(--space-2); }
    .stats-grid { grid-template-columns: 1fr; }
    .kpi-card   { padding: var(--space-3); }
    .kpi-value  { font-size: 1.375rem; }
    table th, table td { padding: var(--space-2); font-size: var(--font-size-xs); }
    .btn    { height: 32px; padding: 0 var(--space-3); font-size: var(--font-size-xs); }
    .btn-sm { height: 28px; padding: 0 var(--space-2); }
}

/* ─── SMALLEST PHONE max-374px ─── */
@media (max-width: 374px) {
    :root { --content-padding: 0.625rem; }
    .kpi-grid { grid-template-columns: 1fr; }
    .header-center { display: none !important; }
    .table-toolbar { gap: var(--space-2); padding: var(--space-2); }
    .search-input  { font-size: var(--font-size-xs); }
}

/* ─── HEADER RESPONSIVE ─── */
@media (max-width: 640px) {
    .header { padding: 0 var(--space-4); gap: var(--space-3); }
    .header-center { display: none; }
    .global-search-kbd { display: none; }
    .main-content { padding: var(--space-4); }
    .page-header h1, .page-header-info h1 { font-size: var(--font-size-xl); }
}

@media (max-width: 480px) {
    :root { --header-height: 56px; --content-padding: var(--space-4); }
}

/* ─── SIDEBAR ─── */
@media (max-width: 767px) {
    .sidebar-collapse-btn { display: none !important; }
    .sidebar-toggle       { display: flex !important; }
}

/* ─── TABLE RESPONSIVE — only table scrolls ─── */
.card { overflow: hidden; }
.um-table-panel, .table-panel, [class*="-table-panel"] { overflow: visible; }

/* ─── PRINT ─── */
@media print {
    .sidebar, .header, .sidebar-toggle, .toast-container,
    .no-print, .table-toolbar, .table-footer, .table-bulk-bar,
    .pagination { display: none !important; }
    .main-wrapper { margin-left: 0 !important; }
    .main-content { padding: 0; background: white; }
    .table-wrapper { overflow: visible; }
    table { font-size: 11px; }
}

/* ─── REDUCED MOTION ─── */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        transition-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
    }
}

/* Custom Settings Sections grid stack */
@media (max-width: 991px) {
    #security-section-container > div[style*="grid-template-columns"],
    #payment-section-container > div[style*="grid-template-columns"],
    #scanning-section-container > div[style*="grid-template-columns"] {
        grid-template-columns: 1fr !important;
        gap: 16px !important;
    }
}