/* ============================================================
   responsive.css — Breakpoints & Accessibility Media Queries
   YLS B2B ERP · Laravel 12

   Breakpoints:  ≤1200  ≤900  ≤600  ≤400
============================================================ */

/* ── ≤ 1200px  LARGE TABLET ───────────────────────────────── */
@media (max-width: 1200px) {

    /* Stats: 2 columns */
    .stats-grid { grid-template-columns: repeat(2, 1fr); }

    /* Quick actions: 2 columns */
    .quick-actions-grid { grid-template-columns: repeat(2, 1fr); }

    /* Sidebar panel: stack below orders */
    .section-grid-2 { grid-template-columns: 1fr; }
    .section-grid-3 { grid-template-columns: 1fr; }

    /* Products: 2 columns (dashboard widget) */
    .products-grid { grid-template-columns: repeat(2, 1fr); }

    /* Search narrower */
    .search-box input { width: 180px; }
    .search-box input:focus { width: 210px; }
}

/* ── ≤ 900px  TABLET ───────────────────────────────────────── */
@media (max-width: 900px) {

    /* Show hamburger, hide desktop nav */
    .navbar__nav  { display: none; }
    .hamburger    { display: flex; }
    .mobile-nav   { display: flex; }

    /* Collapse user text */
    .user-info  { display: none; }
    .user-caret { display: none; }

    /* Tighter main padding */
    .main-content { padding: 20px 16px 32px; }

    /* Stack page header */
    .page-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
    }

    /* Narrower greeting */
    .greet-text__title { font-size: 1.15rem; }

    /* Stats: 2 col */
    .stats-grid { grid-template-columns: repeat(2, 1fr); gap: 14px; }

    /* Customer stats: 2 col */
    .customer-stats { grid-template-columns: repeat(2, 1fr); }
}

/* ── ≤ 600px  MOBILE ───────────────────────────────────────── */
@media (max-width: 600px) {

    /* Navbar */
    .navbar { padding: 0 14px; gap: 8px; }
    .brand-name { font-size: .9375rem; }

    /* Hide search */
    .search-box { display: none; }

    /* Main */
    .main-content { padding: 14px 12px 28px; }

    /* Hide date badge */
    .page-header__actions .date-badge { display: none; }

    /* Stats: 2 col compact */
    .stats-grid { grid-template-columns: 1fr 1fr; gap: 10px; }
    .stat-card  { padding: 16px 14px 12px; }
    .stat-card__value { font-size: 1.4rem; }

    /* Quick actions: 2 col */
    .quick-actions-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
    .quick-action-card  { padding: 16px 12px; }

    /* Products: 1 col */
    .products-grid { grid-template-columns: 1fr; }

    /* Filter bar: stack */
    .filter-bar {
        flex-direction: column;
        align-items: flex-start;
    }

    .filter-bar__search { max-width: 100%; width: 100%; }
    .filter-bar__right  { width: 100%; flex-wrap: wrap; }
    .filter-bar__select,
    .filter-bar__date   { flex: 1; min-width: 120px; }

    /* Status tabs: scroll */
    .status-tabs { flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; padding-bottom: 4px; }
    .status-tab  { flex-shrink: 0; }

    /* Customer stats: 2 col */
    .customer-stats { grid-template-columns: 1fr 1fr; gap: 10px; }

    /* Footer: stack */
    .footer__inner { flex-direction: column; gap: 8px; align-items: flex-start; }
    .footer__nav   { flex-wrap: wrap; gap: 12px; }
}

/* ── ≤ 400px  EXTRA SMALL ──────────────────────────────────── */
@media (max-width: 400px) {

    /* Stats: 1 col */
    .stats-grid { grid-template-columns: 1fr; }

    /* Quick actions: 2 col */
    .quick-actions-grid { grid-template-columns: 1fr 1fr; }

    /* Customer stats: 1 col */
    .customer-stats { grid-template-columns: 1fr; }
}

/* ── TOUCH DEVICES ─────────────────────────────────────────── */
@media (pointer: coarse) {
    .btn, .btn-link, .btn-detail, .btn-outline, .btn-primary {
        min-height: 44px;
    }

    .icon-btn { width: 44px; height: 44px; }

    .nav-link    { padding: 10px 14px; }
    .action-btn  { width: 40px; height: 40px; }
    .notif-item  { padding-top: 14px; padding-bottom: 14px; }
    .status-tab  { padding: 10px 14px; }

    .dropdown-item { padding: 12px 16px; }
    .checkbox { width: 18px; height: 18px; }
}

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

    .animate-fade-up, .animate-fade-in {
        opacity: 1 !important;
        transform: none !important;
    }

    .live-dot::before { animation: none; }
}