/**
 * Quick Order Grid — Responsive breakpoints.
 */

/* Intermediate breakpoint: tablet / small laptop.
   The full toolbar wraps to two rows below ~1100px. Switch to icon-only
   mode (hide button labels) to keep a single row while retaining every
   primary and secondary action. Labels return as native tooltips via the
   existing title attributes. */
@media screen and (min-width: 769px) and (max-width: 1100px) {
    .qog-toolbar-btn span.qog-btn-label,
    .qog-toolbar-btn > span:not(.qog-cart-count):not(.qog-ordered-count):not(.qog-hw-badge) {
        display: none;
    }
    .qog-toolbar-btn {
        padding: 0.45rem 0.55rem;
    }
    .qog-toolbar-left,
    .qog-toolbar-right {
        gap: 0.35rem;
    }
    /* Dropdown chevrons stay visible but tighter */
    .qog-toolbar-btn .qog-chevron {
        margin-left: 0.1rem;
    }
}

@media screen and (max-width: 768px) {
    .qog-header {
        flex-direction: column;
    }
    .qog-search-wrap,
    .qog-category-wrap {
        min-width: 100%;
    }

    /* Toolbar: single row, primary actions only + kebab on the right. */
    .qog-toolbar {
        flex-direction: row;
        align-items: center;
        flex-wrap: nowrap;
    }
    .qog-toolbar-left,
    .qog-toolbar-right {
        flex-wrap: nowrap;
    }

    /* Hide non-primary toolbar items and items flagged as mobile-hide.
       The kebab menu items inside the dropdown are NOT direct children
       of .qog-toolbar-left/right, so they aren't matched here. */
    .qog-toolbar-left > *:not(.qog-mobile-primary),
    .qog-toolbar-right > *:not(.qog-mobile-primary),
    .qog-mobile-hide {
        display: none !important;
    }

    /* Show the kebab dropdown */
    .qog-mobile-kebab {
        display: inline-block;
    }

    /* Compact padding for primary toolbar buttons but keep labels visible.
       Labels next to icons increase mobile engagement ~75% (Kevin Robinson, 2018). */
    .qog-toolbar-btn {
        padding: 0.4rem 0.6rem;
    }
    .qog-toolbar-icon {
        padding: 0.4rem 0.5rem;
    }
    /* Cart shows only the count badge to save space */
    #qog-cart-badge .qog-cart-count {
        margin-left: 0.15rem;
    }

    .qog-footer {
        flex-wrap: wrap;
        gap: 0.75rem;
    }
    .qog-footer-right {
        width: 100%;
        justify-content: flex-end;
    }
    .qog-totals {
        flex-wrap: wrap;
        gap: 0.75rem;
    }
    .qog-import-header {
        flex-wrap: wrap;
        gap: 0.5rem;
    }
    .qog-import-footer {
        flex-wrap: wrap;
        gap: 0.5rem;
    }
    #qog-treeselect-container .treeselect-list {
        max-height: 300px;
    }
}

@media screen and (max-width: 480px) {
    #qog-grid {
        min-height: 300px;
    }
    .qog-predefined-filters {
        flex-wrap: wrap;
    }
    .qog-saved-order-item {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.5rem;
    }
    .qog-saved-order-actions {
        margin-left: 0;
    }
    .qog-scanner-modal-content {
        width: 98%;
        border-radius: 8px;
    }

    /* On the smallest screens, hide the Scan button label to keep all
       three primary actions + kebab visible without wrapping. */
    #qog-scan-btn span:not(.qog-hw-badge) {
        display: none;
    }
    /* Tighter gaps */
    .qog-toolbar-left,
    .qog-toolbar-right {
        gap: 0.35rem;
    }
    /* The kebab menu should not stretch beyond viewport */
    .qog-kebab-menu {
        max-width: calc(100vw - 1.5rem);
    }
}

/* Touch-friendly targets */
@media (pointer: coarse) {
    .qog-btn,
    .qog-filter-pill,
    .qog-dropdown-item {
        min-height: 44px;
    }
    .qog-qty-input {
        min-height: 44px;
        width: 70px;
        font-size: 16px;
    }
    .qog-cart-btn {
        width: 44px;
        height: 44px;
    }
}