/**
 * Quick Order Grid — Main styles.
 * Ported from PrestaShop quickordergrid module front.css.
 * Class names adapted for WooCommerce (no Bootstrap dependency).
 */

/* ── Storefront theme fix ───────────────────────────── */

/* Storefront sets overflow:hidden auto on #page, breaking sticky footer.
   .qog-page body class is added by PHP as fallback for browsers without :has(). */
body.page-template-default:has(#qog-wrapper) #page,
body.qog-page #page {
    overflow: visible;
}

/* AG Grid theme overrides.
   Maps QOG styling settings (--qog-*) to AG Grid Alpine theme variables (--ag-*)
   so admin-configured colors / font-size / padding actually apply to the
   frontend grid. Fallbacks match the previous hardcoded values so the grid
   still looks correct when a setting is unset. */
/* Spacing scale. Every inset, gap and rhythm in the plugin's own chrome comes
   from these four steps, so a heading, its content and the dialog edge line up
   instead of each carrying a hand-picked number. */
#qog-wrapper,
.qog-modal-overlay {
    --qog-space-xs: 4px;
    --qog-space-sm: 8px;
    --qog-space-md: 12px;
    --qog-space-lg: 16px;
    --qog-space-xl: 24px;
}

#qog-grid {
    --ag-wrapper-border-radius: 0;
    --ag-border-color: transparent;
    --ag-row-border-color: var(--qog-border-color, #e5e7eb);
    --ag-header-border-color: var(--qog-border-color, #e5e7eb);
    --ag-background-color: var(--qog-row-bg, #fff);
    --ag-odd-row-background-color: var(--qog-row-alt-bg, #f9f9f9);
    --ag-header-background-color: var(--qog-header-bg, #f0f0f1);
    --ag-header-foreground-color: var(--qog-text-color, #181d1f);
    --ag-foreground-color: var(--qog-text-color, #181d1f);
    --ag-font-size: var(--qog-font-size, 14px);
    --ag-cell-horizontal-padding: var(--qog-grid-padding, 17px);
}
#qog-grid .ag-root-wrapper {
    border: none;
}
#qog-grid > div {
    border: 1px solid #e5e7eb !important;
}

/* Reduce Storefront breadcrumb spacing on QOG page */
body:has(#qog-wrapper) .storefront-breadcrumb,
body.qog-page .storefront-breadcrumb {
    padding: 8px 0;
    margin-bottom: 8px;
}

/* Hide page title visually but keep for screen readers / SEO */
body:has(#qog-wrapper) .entry-header,
body.qog-page .entry-header {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* ── Cart button in grid ────────────────────────────── */

.qog-cart-btn {
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    margin: 0;
    border-radius: 50%;
    color: white;
    border: none;
    background: var(--qog-primary, #2271b1);
    cursor: pointer;
    transition: all 0.15s ease;
    min-width: auto;
}
.qog-cart-btn:hover {
    opacity: 0.85;
}
.qog-cart-btn--disabled {
    background: #ddd;
    color: #999;
    cursor: not-allowed;
}
.qog-cart-btn--loading {
    opacity: 0.6;
    pointer-events: none;
}
.qog-cart-btn svg {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
}

/* ── Toolbar ─────────────────────────────────────────── */

.qog-toolbar {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: 0.4rem;
    padding: 0.4rem 0;
    margin-bottom: 0.25rem;
}
.qog-toolbar-left {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--qog-button-margin, 0.5rem);
}
.qog-toolbar-right {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--qog-button-margin, 0.5rem);
}
#qog-wrapper .qog-toolbar-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-size: var(--qog-font-size, 0.8125rem);
    padding: var(--qog-button-padding, 0.35rem) var(--qog-button-padding, 0.75rem);
    border-radius: var(--qog-border-radius, 4px);
    border: 1px solid var(--qog-border-color, #dcdcde);
    color: var(--qog-text-color, #333);
    background: #fff;
    white-space: nowrap;
    line-height: 1.4;
    cursor: pointer;
    font-family: inherit;
    text-decoration: none;
    transition: all 0.15s ease;
}
#qog-wrapper .qog-toolbar-btn svg {
    flex-shrink: 0;
}
#qog-wrapper .qog-toolbar-icon {
    padding: 0.35rem 0.5rem;
}
#qog-wrapper .qog-toolbar-btn:hover:not(:disabled) {
    background-color: var(--qog-button-hover-bg, #f8f9fa);
    color: var(--qog-text-color, #333);
    border-color: var(--qog-border-color, #bbc0c7);
}
#qog-wrapper .qog-toolbar-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Primary outline button variant */
#qog-wrapper .qog-btn-primary-outline {
    border-color: var(--qog-primary, #2271b1);
    color: var(--qog-primary, #2271b1);
}
#qog-wrapper .qog-btn-primary-outline:hover {
    background: color-mix(in srgb, var(--qog-primary, #2271b1) 10%, white);
}

/* Base button shape. The variants below are single classes too, so this has to
   come first for them to win. Without it .qog-btn, .qog-btn-light and
   .qog-btn-outline carried no declarations at all and the active theme styled
   them, which put buttons of two different heights next to each other. */
.qog-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-family: inherit;
    font-size: var(--qog-font-size, 0.8125rem);
    font-weight: 400;
    line-height: 1.4;
    padding: 0.35rem 0.75rem;
    border: 1px solid var(--qog-border-color, #dcdcde);
    border-radius: var(--qog-border-radius, 4px);
    background: #fff;
    color: var(--qog-text-color, #333);
    white-space: nowrap;
    cursor: pointer;
    text-decoration: none;
    transition: all 0.15s ease;
}
.qog-btn:hover:not(:disabled) {
    background-color: var(--qog-button-hover-bg, #f8f9fa);
    border-color: var(--qog-border-color, #bbc0c7);
}
.qog-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.qog-btn-outline {
    background: #fff;
    border-color: var(--qog-border-color, #dcdcde);
    color: var(--qog-text-color, #333);
}

.qog-btn-light {
    background: var(--qog-button-hover-bg, #f1f3f5);
    border-color: var(--qog-border-color, #dcdcde);
    color: var(--qog-text-color, #333);
}
.qog-btn-light:hover:not(:disabled) {
    background: #e9ecef;
}

/* Primary filled button */
.qog-btn-primary {
    background: var(--qog-primary, #2271b1);
    border-color: var(--qog-primary, #2271b1);
    color: #fff;
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-size: var(--qog-font-size, 0.8125rem);
    padding: 0.35rem 0.75rem;
    border-radius: 4px;
    border: 1px solid transparent;
    cursor: pointer;
    white-space: nowrap;
    line-height: 1.4;
    transition: all 0.15s ease;
    font-family: inherit;
}
.qog-btn-primary:hover {
    opacity: 0.9;
}
.qog-btn-primary:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Other button variants */
.qog-btn-success {
    background: #198754;
    border-color: #198754;
    color: #fff;
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-size: var(--qog-font-size, 0.8125rem);
    padding: 0.35rem 0.75rem;
    border-radius: 4px;
    border: 1px solid transparent;
    cursor: pointer;
    white-space: nowrap;
    line-height: 1.4;
    font-family: inherit;
}
.qog-btn-success:hover {
    background: #157347;
}

.qog-btn-danger {
    background: #dc3545;
    border-color: #dc3545;
    color: #fff;
}
.qog-btn-danger:hover {
    background: #bb2d3b;
}

.qog-btn-sm {
    padding: 0.25rem 0.5rem;
    font-size: 0.75rem;
}

/* ── Dropdown (no Bootstrap dependency) ──────────────── */

.qog-dropdown {
    position: relative;
}
.qog-dropdown-toggle .qog-chevron {
    margin-left: 0.1rem;
}
.qog-dropdown-menu {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 100;
    min-width: 10rem;
    margin-top: 0.25rem;
    padding: 0.25rem 0;
    background: white;
    border: 1px solid #ddd;
    border-radius: 4px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.12);
}
.qog-dropdown-menu.open {
    display: block;
}
.qog-dropdown-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    width: 100%;
    padding: 0.4rem 0.75rem;
    border: none;
    background: none;
    font-size: 0.8125rem;
    color: #333;
    cursor: pointer;
    text-align: left;
    font-family: inherit;
}
.qog-dropdown-item:hover {
    background-color: #f5f5f5;
}
.qog-dropdown-item:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}
.qog-dropdown-menu--right {
    left: auto;
    right: 0;
}
.qog-dropdown-columns {
    max-height: 70vh;
    overflow-y: auto;
}
.qog-dropdown-header {
    display: block;
    padding: 0.3rem 0.75rem 0.15rem;
    font-size: 0.7rem;
    font-weight: 600;
    color: #999;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
.qog-dropdown-divider {
    height: 1px;
    margin: 0.25rem 0;
    background-color: #e5e5e5;
}

/* Destructive menu item (e.g. Empty cart in kebab) */
.qog-dropdown-item--danger {
    color: #d63638;
}
.qog-dropdown-item--danger:hover {
    background-color: #fdecec;
    color: #b32d2e;
}
.qog-dropdown-item--danger svg {
    color: currentColor;
}

/* Mobile overflow kebab — hidden by default, shown <768px via responsive.css */
.qog-mobile-kebab {
    display: none;
}
.qog-kebab-menu {
    min-width: 13rem;
    max-height: 80vh;
    overflow-y: auto;
}
.qog-kebab-menu .qog-dropdown-item svg {
    flex-shrink: 0;
    color: #5e6267;
}

/* ── Cart badge ──────────────────────────────────────── */

.qog-cart-badge {
    text-decoration: none;
}
.qog-cart-count {
    font-weight: 600;
    font-size: 0.8125rem;
    min-width: 1.25rem;
    text-align: center;
}

/* ── Fullscreen mode (CSS-based, from PrestaShop) ────── */

#qog-wrapper.qog-fullscreen {
    position: fixed;
    inset: 0;
    z-index: 9998;
    background: white;
    padding: 1rem 1.5rem;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
#qog-wrapper.qog-fullscreen .qog-grid-container {
    flex: 1;
    height: auto !important;
    min-height: 0;
}
#qog-wrapper.qog-fullscreen #qog-grid {
    min-height: 0;
}
#qog-wrapper.qog-fullscreen .qog-header {
    margin-bottom: 0.5rem;
}
#qog-wrapper.qog-fullscreen .qog-toolbar {
    margin-bottom: 0.15rem;
}

/* ── Grid container ──────────────────────────────────── */

/* Flexbox container for full height grid — height set dynamically by JS */
.qog-grid-container {
    display: flex;
    flex-direction: column;
    min-height: 500px;
}

/* Grid takes remaining space */
#qog-grid {
    flex: 1;
    width: 100%;
    min-height: 400px;
}

/* My order as an invoice: the grid takes the height of its rows (the add-line core switches
   it to autoHeight), so the catalogue's minimum heights would leave an empty gap. */
#qog-wrapper.qog-order-mode:not(.qog-fullscreen) .qog-grid-container {
    min-height: 0 !important;
    height: auto !important;
}
#qog-wrapper.qog-order-mode:not(.qog-fullscreen) #qog-grid {
    flex: none;
    min-height: 0;
}
#qog-grid + .qog-add-row-btn {
    align-self: flex-start;
    margin-bottom: 8px;
}

/* Grid CSS variables — required for correct virtualised layout.
   Prevents theme CSS conflicts (e.g. Storefront) from breaking header/row sizing. */
#qog-grid.ag-theme-alpine {
    --ag-header-height: 48px;
    --ag-row-height: 56px;
}

/* Sticky footer for button + totals */
.qog-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1.5rem;
    padding: 1rem 0;
    background: white;
    position: sticky;
    bottom: 0;
    z-index: 10;
    border-top: 1px solid #e0e0e0;
}

.qog-footer-right {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    margin-left: auto;
}

.qog-reset-btn {
    font-size: 0.8125rem;
    padding: 0.35rem 0.75rem;
    display: flex;
    align-items: center;
    gap: 0.35rem;
    white-space: nowrap;
}

.qog-totals {
    display: flex;
    align-items: center;
    gap: 1.25rem;
}

.qog-total-item {
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.qog-total-label {
    font-size: 0.875rem;
    color: #666;
}

.qog-total-value {
    font-size: 1rem;
    font-weight: 600;
    color: #222;
}

#qog-bulk-add-to-cart {
    margin: 0;
}

@media screen and (max-width: 576px) {
    .qog-footer {
        flex-wrap: wrap;
        gap: 0.75rem;
    }
    .qog-reset-btn {
        order: 2;
    }
    .qog-footer-right {
        width: 100%;
        justify-content: flex-end;
        order: 1;
    }
}

/* ── Search + Category header ────────────────────────── */

.qog-header {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    margin-bottom: 0.75rem;
}
.qog-search-wrap,
.qog-category-wrap {
    flex: 1;
    min-width: 200px;
    position: relative;
}
/* The search box and the category select sit side by side, so they share one
   height. Themes style bare inputs harder than a class can (Storefront reaches
   them through input[type]), which is why this is scoped by the wrapper id the
   same way the TreeselectJS overrides below are. */
#qog-wrapper .qog-search-input {
    width: 100%;
    height: var(--qog-control-height, 42px);
    margin: 0;
    padding: 0 0.75rem;
    border: 1px solid var(--qog-border-color, #bbc0c7);
    border-radius: var(--qog-border-radius, 4px);
    font-size: 1em;
    line-height: normal;
    color: var(--qog-text-color, #181d1f);
    background: #fff;
    box-shadow: none;
    transition: border-color 0.15s ease;
    box-sizing: border-box;
    -webkit-appearance: none;
    appearance: none;
}
#qog-wrapper .qog-search-input:focus {
    outline: none;
    border-color: var(--qog-primary, #2271b1);
    box-shadow: 0 0 0 1px var(--qog-primary, #2271b1);
}
#qog-wrapper .qog-search-input::placeholder {
    color: #7a828a;
    opacity: 1;
}
/* Only the grid search carries the magnifier, so only it keeps room for one. */
#qog-wrapper .qog-search-wrap .qog-search-input {
    padding-right: 2.5rem;
}
.qog-search-icon {
    position: absolute;
    right: 0.75rem;
    top: 50%;
    transform: translateY(-50%);
    color: #7a828a;
    pointer-events: none;
}

/* ── Grid custom styles ──────────────────────────────── */

.ag-cell-centered {
    display: flex !important;
    align-items: center;
    justify-content: center;
    height: 100% !important;
}
#qog-grid .ag-header-cell {
    text-align: center;
}
#qog-grid .ag-header-cell .ag-header-cell-label {
    justify-content: center;
}
/* Name column — left-aligned, vertically centered */
.qog-cell-name {
    display: flex !important;
    align-items: center;
    height: 100% !important;
}
#qog-grid [col-id="name"] .ag-header-cell-label {
    justify-content: flex-start;
}
/* Price / Sum columns — right-aligned (accounting convention) */
.qog-cell-price {
    display: flex !important;
    align-items: center;
    justify-content: flex-end;
    height: 100% !important;
    text-align: right;
}
#qog-grid [col-id="price_tax_excl"] .ag-header-cell-label,
#qog-grid [col-id="price_tax_incl"] .ag-header-cell-label,
#qog-grid [col-id="rowSum"] .ag-header-cell-label,
#qog-grid [col-id="rowSumTax"] .ag-header-cell-label {
    justify-content: flex-end;
}

/* Cell text truncation with ellipsis */
#qog-grid .ag-cell-wrapper {
    overflow: hidden;
    min-width: 0;
}
#qog-grid .ag-cell-value {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
}

/* Image cell — prevent overflow ellipsis and fit image to row */
#qog-grid .ag-cell img {
    object-fit: contain;
    max-height: 100%;
}
#qog-grid [col-id="image"] .ag-cell-wrapper,
#qog-grid [col-id="addToCartBtn"] .ag-cell-wrapper {
    overflow: visible;
}
#qog-grid [col-id="addToCartBtn"] {
    padding: 0;
}
/* Qty column — editable indicator */
#qog-grid .ag-cell.qog-cell-qty {
    background-color: rgba(34, 113, 177, 0.06);
}
#qog-grid .ag-header-cell.qog-header-qty {
    background-color: rgba(34, 113, 177, 0.08);
}
/* Sum columns — calculated value indicator */
#qog-grid .ag-cell.qog-cell-sum {
    background-color: rgba(25, 135, 84, 0.06);
}
#qog-grid .ag-header-cell.qog-header-sum {
    background-color: rgba(25, 135, 84, 0.08);
}

#qog-grid input[type="number"] {
    -webkit-appearance: auto;
    -moz-appearance: auto;
    appearance: auto;
}

/* ── Column toggle switch ────────────────────────────── */
.qog-column-toggle {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 6px 12px;
    border: none;
    background: none;
    cursor: pointer;
    text-align: left;
    font-size: 0.8125rem;
}
.qog-column-toggle:hover {
    background-color: #f0f0f1;
}
.qog-toggle-switch {
    position: relative;
    width: 34px;
    height: 18px;
    background: #ccc;
    border-radius: 9px;
    flex-shrink: 0;
    transition: background-color 0.2s;
}
.qog-toggle-knob {
    position: absolute;
    top: 2px;
    left: 2px;
    width: 14px;
    height: 14px;
    background: #fff;
    border-radius: 50%;
    transition: transform 0.2s;
}
.qog-column-toggle[aria-checked="true"] .qog-toggle-switch {
    background: var(--qog-primary, #2271b1);
}
.qog-column-toggle[aria-checked="true"] .qog-toggle-knob {
    transform: translateX(16px);
}
.qog-toggle-label {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ── Flash success (cart add feedback) ────────────────── */
.qog-flash-success {
    background-color: rgba(40, 167, 69, 0.15);
    transition: background-color 0.8s ease;
}

/* ── "My Order" toggle button ────────────────────────── */
.qog-ordered-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    border-radius: 10px;
    background: var(--qog-primary, #2271b1);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    line-height: 1;
    margin-left: 4px;
}
#qog-show-ordered.qog-ordered-active {
    background: var(--qog-primary, #2271b1);
    color: #fff;
    border-color: var(--qog-primary, #2271b1);
}
#qog-show-ordered.qog-ordered-active .qog-ordered-count {
    background: #fff;
    color: var(--qog-primary, #2271b1);
}
#qog-show-ordered.qog-ordered-active:hover {
    background: color-mix(in srgb, var(--qog-primary, #2271b1) 85%, #000);
}

/* ── Stock dot indicators ────────────────────────────── */
.qog-stock-dot {
    display: inline-block;
    width: 12px;
    height: 12px;
    border-radius: 50%;
}
.qog-stock-green { background-color: #28a745; }
.qog-stock-orange { background-color: #fd7e14; }
.qog-stock-red { background-color: #dc3545; }

/* ── Qty editor ──────────────────────────────────────── */
.qog-qty-editor {
    width: 100%;
    height: 100%;
}
.qog-qty-editor-input {
    width: 100%;
    height: 100%;
    text-align: center;
    border: 2px solid var(--qog-primary, #2271b1);
    font-size: inherit;
    outline: none;
    box-sizing: border-box;
    -webkit-appearance: auto;
    -moz-appearance: auto;
    appearance: auto;
}
.qog-qty-editor-input.qog-qty-input-warn {
    border-color: #dc3545;
    background: rgba(220, 53, 69, 0.08);
    color: #dc3545;
    font-weight: 700;
}

/* ── Qty over-stock warning ──────────────────────────── */
.qog-qty-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    line-height: 1.2;
    height: 100%;
}
.qog-qty-zero {
    opacity: 0.35;
}
.qog-qty-max {
    font-size: 10px;
    color: #dc3545;
    font-weight: 700;
}

/* ── Out-of-stock row dimming ────────────────────────── */
#qog-grid .qog-row-oos {
    opacity: 0.45;
}

/* ── Predefined filter pills ─────────────────────────── */

.qog-predefined-filters {
    display: flex;
    gap: 5px;
    margin-bottom: 6px;
    align-items: center;
}
.qog-filter-pill {
    background: #f0f1f3;
    border: 1px solid var(--qog-border-color, #d5d8dc);
    border-radius: var(--qog-border-radius, 20px);
    padding: var(--qog-button-padding, 3px) 12px;
    font-size: var(--qog-font-size, 0.8125rem);
    font-weight: 500;
    color: var(--qog-text-color, #555);
    cursor: pointer;
    transition: all 0.15s ease;
    white-space: nowrap;
    line-height: 1.4;
}
.qog-filter-pill:hover {
    background: var(--qog-button-hover-bg, #e4e6ea);
    border-color: var(--qog-border-color, #bfc3c9);
}
.qog-filter-pill.active {
    background: var(--qog-filter-active-bg, var(--qog-primary, #2271b1));
    border-color: var(--qog-filter-active-bg, var(--qog-primary, #2271b1));
    color: #fff;
}

/* Clear filters icon */
.qog-clear-filters {
    background: none;
    border: none;
    padding: 4px;
    cursor: pointer;
    color: #7a828a;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: all 0.2s ease;
    margin-left: 4px;
}
.qog-clear-filters:hover {
    background: #f0f1f3;
    color: #d32f2f;
}
.qog-clear-filters svg {
    display: block;
}

/* ── Price display ───────────────────────────────────── */

/* Discount price display — stacked: new price on top, old price below */
.qog-price-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    line-height: 1.25;
    padding: 2px 0;
}
.qog-price-line {
    white-space: nowrap;
}
.qog-price-new {
    color: #dc3545;
    font-weight: 600;
}
.qog-price-old {
    text-decoration: line-through;
    color: #999;
    font-size: 0.8em;
}

/* Product name cell with badges — above title */
.qog-name-cell {
    width: 100%;
}
.qog-name-badges {
    display: flex;
    gap: 3px;
    margin-bottom: 1px;
    line-height: 1;
}
.qog-name-badge {
    font-size: 9px;
    font-weight: 700;
    padding: 0 4px;
    border-radius: 2px;
    line-height: 1.5;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}
.qog-badge-new {
    background: #198754;
    color: #fff;
}
.qog-badge-onsale {
    background: var(--qog-sale-badge-bg, #dc3545);
    color: var(--qog-sale-badge-text, #fff);
}

/* Stock status */
.qog-stock--in { color: #198754; }
.qog-stock--low { color: #f39c12; }
.qog-stock--out { color: #dc3545; }
.qog-stock--na { color: #999; }

/* Rating */
.qog-rating {
    color: #f39c12;
}

/* ── TreeselectJS overrides ──────────────────────────── */

#qog-treeselect-container {
    width: 100%;
}
#qog-treeselect-container .treeselect-input {
    border: 1px solid var(--qog-border-color, #bbc0c7);
    border-radius: var(--qog-border-radius, 4px);
    font-size: 1em;
    min-height: var(--qog-control-height, 42px);
    padding: 0 40px 0 0.75rem;
    background-color: white;
    display: flex;
    align-items: center;
    transition: border-color 0.15s ease;
}
#qog-treeselect-container .treeselect-input:hover,
#qog-treeselect-container .treeselect-input--focused {
    border-color: var(--qog-primary, #2271b1);
}
#qog-treeselect-container .treeselect-input__edit::placeholder {
    color: #7a828a;
}
#qog-treeselect-container .treeselect-list {
    max-height: 350px;
    border-color: #bbc0c7;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    z-index: 1000;
}
#qog-treeselect-container .treeselect-list__item:hover {
    background-color: #f8f9fa;
}
#qog-treeselect-container .treeselect-list__item--selected {
    background-color: #e7f3ff;
}

/* ── Image modal (theme-agnostic, no Bootstrap dependency) ── */

.qog-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.7);
    z-index: 99999;
    display: flex;
    align-items: center;
    justify-content: center;
}
.qog-modal-content {
    background: white;
    border-radius: 8px;
    max-width: 90vw;
    max-height: 90vh;
    overflow: auto;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
}
.qog-modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--qog-space-md, 12px);
    padding: var(--qog-space-md, 12px) var(--qog-space-lg, 16px);
    border-bottom: 1px solid #e0e0e0;
}

/* The footer carried no padding at all, so its buttons and the validity line sat
   flush against the dialog edge while the body above them was inset. It shares
   the header's inset now, which is what makes the three align down the edge. */
.qog-modal-footer {
    display: flex;
    align-items: center;
    gap: var(--qog-space-sm, 8px);
    padding: var(--qog-space-md, 12px) var(--qog-space-lg, 16px);
}
.qog-modal-title {
    margin: 0;
    font-size: 1.1rem;
    font-weight: 600;
}
.qog-modal-close {
    background: none;
    border: none;
    font-size: 1.5rem;
    cursor: pointer;
    padding: 0.25rem 0.5rem;
    line-height: 1;
    color: #666;
}
.qog-modal-close:hover {
    color: #000;
}
.qog-modal-body {
    padding: var(--qog-space-lg, 16px);
    text-align: center;
}
.qog-modal-body img {
    max-width: 100%;
    max-height: 80vh;
    height: auto;
}

/* ── Import CSV modal ────────────────────────────────── */

.qog-import-modal-content {
    background: white;
    border-radius: 8px;
    width: calc(100vw - 2rem);
    max-height: calc(100vh - 2rem);
    display: flex;
    flex-direction: column;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
    overflow: hidden;
}
.qog-import-header {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    padding: 0.65rem 1rem;
    border-bottom: 1px solid #e0e0e0;
    background: #f8f9fa;
    flex-shrink: 0;
}
.qog-import-header .qog-modal-title {
    margin: 0;
    font-size: 1rem;
    font-weight: 600;
    white-space: nowrap;
}
.qog-import-header .qog-modal-close {
    margin-left: auto;
}
.qog-import-settings {
    display: flex;
    align-items: center;
    gap: 1.25rem;
}
.qog-import-settings label {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.8125rem;
    margin: 0;
    cursor: pointer;
    white-space: nowrap;
}
.qog-import-settings select {
    padding: 0.2rem 0.4rem;
    border: 1px solid #bbc0c7;
    border-radius: 3px;
    font-size: 0.8125rem;
}
/* Scrollable table area */
.qog-import-table-wrap {
    flex: 1;
    overflow: auto;
    min-height: 0;
}
#qog-import-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.8125rem;
}
#qog-import-table thead th {
    padding: 0.4rem 0.6rem;
    background: #edf0f5;
    position: sticky;
    top: 0;
    z-index: 2;
    text-align: left;
    font-size: 0.75rem;
    font-weight: 600;
    color: #555;
    white-space: nowrap;
}
#qog-import-table thead th small {
    display: block;
    font-size: 0.75rem;
    color: #666;
    font-weight: normal;
}
.qog-import-mapping,
.qog-import-map-select {
    width: 100%;
    padding: 0.3rem 0.4rem;
    border: 1px solid #bbc0c7;
    border-radius: 3px;
    font-size: 0.8125rem;
    background: white;
}
#qog-import-table tbody td {
    padding: 0.4rem 0.6rem;
    border-bottom: 1px solid #eee;
    white-space: nowrap;
    max-width: 280px;
    overflow: hidden;
    text-overflow: ellipsis;
    color: #333;
}
#qog-import-table tbody tr:nth-child(even) {
    background: #f8f9fa;
}
#qog-import-table tbody tr:hover {
    background: #e9ecef;
}
/* Footer */
.qog-import-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.6rem 1rem;
    border-top: 1px solid #e0e0e0;
    background: #f8f9fa;
    flex-shrink: 0;
}
.qog-import-footer-left {
    display: flex;
    align-items: center;
    gap: 1rem;
}
.qog-import-row-count {
    font-size: 0.8125rem;
    color: #888;
}
.qog-import-validation {
    font-size: 0.8125rem;
}
.qog-import-validation--error { color: #dc3545; }
.qog-import-validation--warning { color: #f39c12; }
.qog-import-validation--ok { color: #198754; }
.qog-import-actions {
    display: flex;
    gap: 0.5rem;
}
@media screen and (max-width: 600px) {
    .qog-import-header {
        flex-wrap: wrap;
        gap: 0.5rem;
    }
    .qog-import-footer {
        flex-wrap: wrap;
        gap: 0.5rem;
    }
}

/* ── Toastr overrides ────────────────────────────────── */

#toast-container > .toast {
    opacity: 1 !important;
}
#toast-container > .toast-success {
    background-color: #198754;
}
#toast-container > .toast-error {
    background-color: #dc3545;
}
#toast-container > .toast-info {
    background-color: #0dcaf0;
}
#toast-container > .toast-warning {
    background-color: #ffc107;
    color: #333;
}

/* ── Save Order modal ────────────────────────────────── */

.qog-save-order-modal-content {
    background: #fff;
    border-radius: 8px;
    width: 100%;
    max-width: 420px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
}
.qog-save-order-modal-content .qog-modal-body {
    padding: 1rem 1.25rem;
    text-align: left;
}
.qog-save-order-modal-content label {
    display: block;
    font-size: 0.8125rem;
    font-weight: 600;
    margin-bottom: 0.35rem;
    color: #333;
}
.qog-input {
    width: 100%;
    padding: 0.5rem 0.75rem;
    border: 1px solid #bbc0c7;
    border-radius: 4px;
    font-size: 0.9rem;
    box-sizing: border-box;
}
.qog-input:focus {
    outline: none;
    border-color: var(--qog-primary, #2271b1);
    box-shadow: 0 0 0 1px var(--qog-primary, #2271b1);
}
.qog-save-order-footer {
    display: flex;
    justify-content: flex-end;
    gap: 0.5rem;
    padding: 0.75rem 1.25rem;
    border-top: 1px solid #e0e0e0;
}

/* ── Saved orders list modal ─────────────────────────── */

.qog-saved-orders-modal-content {
    background: #fff;
    border-radius: 8px;
    width: 100%;
    max-width: 520px;
    max-height: 80vh;
    display: flex;
    flex-direction: column;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
}
.qog-saved-orders-body {
    flex: 1;
    overflow-y: auto;
    min-height: 0;
    padding: 0.5rem 0;
}
.qog-saved-orders-loading,
.qog-saved-orders-empty {
    padding: 2rem 1rem;
    text-align: center;
    color: #888;
    font-size: 0.875rem;
}
.qog-saved-order-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.6rem 1.25rem;
    border-bottom: 1px solid #f0f0f0;
    transition: background-color 0.15s;
}
.qog-saved-order-item:last-child {
    border-bottom: none;
}
.qog-saved-order-item:hover {
    background-color: #f8f9fa;
}
.qog-saved-order-info {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    min-width: 0;
    flex: 1;
}
.qog-saved-order-name {
    font-size: 0.875rem;
    font-weight: 500;
    color: #222;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.qog-saved-order-meta {
    font-size: 0.75rem;
    color: #888;
}
.qog-saved-order-badge-local {
    display: inline-block;
    font-size: 0.65rem;
    font-weight: 600;
    color: #7c6f1b;
    background: #fef3c7;
    padding: 1px 6px;
    border-radius: 9px;
    margin-left: 6px;
    vertical-align: middle;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}
.qog-saved-order-actions {
    display: flex;
    gap: 0.35rem;
    flex-shrink: 0;
    margin-left: 0.75rem;
}

/* ── Barcode Scanner ─────────────────────────────────── */

/* Hardware scanner badge (green pulsing dot) */
.qog-hw-badge {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #22c55e;
    margin-left: 4px;
    animation: qog-pulse 1.5s infinite;
}
@keyframes qog-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.4; }
}

.qog-hw-status {
    font-size: 0.7rem;
    color: #22c55e;
    margin-left: auto;
    padding-left: 0.5rem;
}

/* Scanner modal — dark theme */
.qog-scanner-modal-content {
    background: #111;
    color: #fff;
    border-radius: 12px;
    width: 90%;
    max-width: 540px;
    overflow: hidden;
    box-shadow: 0 20px 60px rgba(0,0,0,0.6);
}
.qog-scanner-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.75rem 1rem;
    border-bottom: 1px solid #333;
}
.qog-scanner-header .qog-modal-title {
    color: #fff;
    font-size: 1rem;
    margin: 0;
}
.qog-scanner-header .qog-modal-close {
    color: #999;
    background: none;
    border: none;
    font-size: 1.5rem;
    cursor: pointer;
    line-height: 1;
}
.qog-scanner-header .qog-modal-close:hover {
    color: #fff;
}

/* Camera viewport */
.qog-scanner-viewport-wrap {
    position: relative;
    width: 100%;
    aspect-ratio: 4 / 3;
    background: #000;
    overflow: hidden;
}
#qog-scanner-viewport {
    width: 100%;
    height: 100%;
}
#qog-scanner-viewport video,
#qog-scanner-viewport canvas {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Scan target overlay */
.qog-scanner-target {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 70%;
    height: 30%;
    border: 2px solid rgba(255, 255, 255, 0.7);
    border-radius: 8px;
    box-shadow: 0 0 0 9999px rgba(0, 0, 0, 0.35);
    pointer-events: none;
}

/* Scanner footer */
.qog-scanner-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.6rem 1rem;
    border-top: 1px solid #333;
    font-size: 0.8rem;
    min-height: 38px;
}
.qog-scanner-status {
    color: #aaa;
}
.qog-scanner-last {
    color: #22c55e;
    font-family: monospace;
    font-size: 0.85rem;
}

/* Row flash — pulsing green for ~3s (barcode scan, import, paste) */
.ag-row.qog-row-flash {
    animation: qog-row-flash 0.8s ease-in-out 3;
}
@keyframes qog-row-flash {
    0%, 100% { background-color: transparent; }
    50% { background-color: rgba(34, 197, 94, 0.3); }
}

/* ── Image magnify preview on hover ─────────────────── */

.qog-magnify {
    position: fixed;
    z-index: 10000;
    pointer-events: none;
    background: white;
    border: 1px solid #ddd;
    border-radius: 4px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
    padding: 4px;
    display: none;
}
.qog-magnify img {
    display: block;
    max-width: 200px;
    max-height: 200px;
    object-fit: contain;
}

/* ── Alert ───────────────────────────────────────────── */

.qog-alert {
    padding: 0.75rem 1rem;
    border-radius: 4px;
    margin-bottom: 1rem;
    font-size: 0.875rem;
}
.qog-alert-info {
    background: #e7f3ff;
    border: 1px solid #b6d7ff;
    color: #0a58ca;
}

/* ── Access denied ───────────────────────────────────── */

.qog-access-denied {
    text-align: center;
    padding: 3rem 1rem;
    color: #666;
}

/* ── Quick Paste AG Grid ─────────────────────────────── */

#qog-quick-paste-grid {
    border: 1px solid #ddd;
    border-radius: 4px;
    overflow: hidden;
}
#qog-quick-paste-grid .ag-root-wrapper {
    border: none;
}
#qog-quick-paste-grid .ag-header {
    border-bottom: 1px solid #ddd;
}

#qog-quick-paste-summary {
    font-size: 13px;
    line-height: 1.6;
}

#qog-quick-paste-notfound {
    padding: 6px 8px;
    background: #fef2f2;
    border: 1px solid #fecaca;
    border-radius: 4px;
    word-break: break-all;
}

/* ── Quick Paste Identifier Treeselect ────────────────── */

#qog-quick-paste-identifier {
    width: 100%;
}

#qog-quick-paste-identifier .treeselect-input {
    border: 1px solid #bbc0c7;
    border-radius: 4px;
    font-size: 1em;
    min-height: 40px;
    max-height: 40px;
    height: 40px;
    padding: 0 40px 0 1rem;
    background-color: white;
    line-height: 1.5;
    display: flex;
    align-items: center;
    transition: border-color 0.15s ease;
    cursor: pointer;
}

#qog-quick-paste-identifier .treeselect-input:hover,
#qog-quick-paste-identifier .treeselect-input--focused {
    border-color: #333;
}

#qog-quick-paste-identifier .treeselect-input__arrow {
    color: #7a828a;
}

#qog-quick-paste-identifier .treeselect-list {
    max-height: 250px;
    border-color: #bbc0c7;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    z-index: 10001;
}

#qog-quick-paste-identifier .treeselect-list__item:hover {
    background-color: #f8f9fa;
}

#qog-quick-paste-identifier .treeselect-list__item--selected {
    background-color: #e7f3ff;
}

/* ── Accessibility — focus styles ────────────────────── */

.qog-toolbar-btn:focus-visible,
.qog-btn-primary:focus-visible,
.qog-btn-success:focus-visible,
.qog-btn-danger:focus-visible,
.qog-btn-outline:focus-visible,
.qog-btn-light:focus-visible,
.qog-filter-pill:focus-visible,
.qog-dropdown-item:focus-visible,
.qog-column-toggle:focus-visible,
.qog-modal-close:focus-visible,
.qog-cart-btn:focus-visible,
.qog-clear-filters:focus-visible,
.qog-saved-order-item button:focus-visible {
    outline: 2px solid var(--qog-primary, #2271b1);
    outline-offset: 2px;
}

.qog-search-input:focus-visible,
.qog-input:focus-visible {
    outline: 2px solid var(--qog-primary, #2271b1);
    outline-offset: -1px;
}

/* ── Accessibility — color contrast fixes ───────────── */

.qog-dropdown-header { color: #5e6267; }
.qog-stock--low { color: #b06d0a; }
.qog-stock--na { color: #5e6267; }
.qog-stock-dot { position: relative; }
.qog-stock-dot::after {
    content: attr(title);
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
}
.qog-saved-order-meta { color: #5e6267; }
.qog-import-row-count { color: #5e6267; }

/* ── Mobile responsive ───────────────────────────────── */

@media (max-width: 576px) {
    .qog-scanner-modal-content {
        width: 98%;
        border-radius: 8px;
    }
}

/* Message shown inside the grid container when products cannot be loaded (access denied, plugin disabled). */
#qog-grid.qog-grid-message {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 120px;
    padding: 24px;
    text-align: center;
    color: var(--qog-text-color, inherit);
}