/* ==========================================================================
   UltimatePOS — POS Modern (Phase 1)
   Operator-screen component styling for the new 70/30 layout:
     - products pane (search + chips + grid) 70%
     - cart pane (customer + fields + rows + totals) 30%
   Every color reads var(--upos-*) from tokens.css / dark-theme.css, so a single
   stylesheet serves both light and dark themes automatically.
   Loaded AFTER dark-theme.css so it wins ties.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Panes
   -------------------------------------------------------------------------- */
.pos-pane {
    background: var(--upos-surface);
    border: 1px solid var(--upos-border);
    border-radius: 14px;
    box-shadow: var(--upos-shadow-card);
    overflow: hidden;
    height: 100%;
}

/* The products pane embeds the legacy .pos-sidebar-root card; flatten it so it
   reads as one seamless surface instead of a card-inside-a-card. */
.pos-pane-products .pos-sidebar-root {
    box-shadow: none !important;
    border: none !important;
    border-radius: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    height: 100%;
}

/* --------------------------------------------------------------------------
   Search row (top of products pane)
   -------------------------------------------------------------------------- */
.pos-search-row {
    padding: 10px 12px;
    background: var(--upos-surface);
    border-bottom: 1px solid var(--upos-border);
}
.pos-search-row .form-group { margin-bottom: 0; }
.pos-search-row .input-group {
    display: flex !important;
    align-items: center;
    gap: 6px;
    background: var(--upos-surface-2);
    border: 1px solid var(--upos-border-2);
    border-radius: 12px;
    padding: 4px 6px;
    box-shadow: none;
    transition: border-color var(--upos-dur) var(--upos-ease), box-shadow var(--upos-dur) var(--upos-ease);
}
.pos-search-row .input-group:focus-within {
    border-color: var(--upos-accent);
    box-shadow: 0 0 0 3px var(--upos-accent-soft);
}
.pos-search-row input#search_product,
.pos-search-row .input-group .form-control {
    /* basis 0 + grow: always fill exactly the space left after the fixed
       icon buttons, so the row never overflows on narrow screens */
    flex: 1 1 0%;
    min-width: 0;
    width: auto !important;
    height: 40px;
    border: none !important;
    box-shadow: none !important;
    background: transparent !important;
    color: var(--upos-text);
    font-size: 15px;
    font-weight: 500;
    padding: 0 8px;
    border-radius: 0 !important;
}
.pos-search-row input#search_product::placeholder { color: var(--upos-text-muted); }
.pos-search-row .input-group-btn {
    display: flex !important;
    align-items: center;
    gap: 4px;
    white-space: nowrap;
}
.pos-search-row .input-group-btn .btn {
    height: 40px;
    min-width: 40px;
    width: auto;
    border: none !important;
    border-radius: 10px !important;
    background: transparent !important;
    color: var(--upos-text-2) !important;
    box-shadow: none !important;
    padding: 0 12px !important;
    font-size: 16px;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    transition: background var(--upos-dur) var(--upos-ease), color var(--upos-dur) var(--upos-ease);
}
.pos-search-row .input-group-btn .btn:hover,
.pos-search-row .input-group-btn .btn:focus {
    background: var(--upos-accent-soft) !important;
    color: var(--upos-accent) !important;
}
.pos-search-row .input-group-btn .btn:disabled { opacity: 0.5; cursor: not-allowed; }

/* --------------------------------------------------------------------------
   Product grid (auto-fill) + tiles
   -------------------------------------------------------------------------- */
#product_list_body { scrollbar-width: thin; scrollbar-color: var(--upos-border-2) transparent; }
#product_list_items,
#featured_products_box {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 10px;
    padding: 4px 2px;
}
/* Bootstrap grid children become full grid items */
#product_list_items > [class*="col-"],
#featured_products_box > [class*="col-"] {
    width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
    float: none !important;
}
/* "No products" / empty-state rows span the full width */
#product_list_items > .col-md-12,
#featured_products_box > .col-md-12 {
    grid-column: 1 / -1;
}

/* Tile */
.product_box {
    background: var(--upos-surface) !important;
    border: 1px solid var(--upos-border) !important;
    border-radius: 12px !important;
    padding: 8px 8px 10px !important;
    box-shadow: var(--upos-shadow-card);
    transition: transform var(--upos-dur) var(--upos-ease),
                box-shadow var(--upos-dur) var(--upos-ease),
                border-color var(--upos-dur) var(--upos-ease);
}
.product_box:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 22px rgba(15, 23, 42, 0.12);
    border-color: var(--upos-border-2) !important;
}
html[data-theme="dark"] .product_box:hover {
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.55);
}
.product_box:active { transform: scale(0.98); }

/* Out of stock */
.product_box.product_out_of_stock,
.product_box.product_out_of_st { opacity: 0.6; }
.product_box.product_out_of_stock .product_price,
.product_box.product_out_of_st .product_price {
    color: var(--upos-text-muted) !important;
    text-decoration: line-through;
}

/* Featured tiles keep a subtle amber accent */
#featured_products_box .product_box {
    border-color: rgba(251, 191, 36, 0.5) !important;
}
#featured_products_box .product_box:hover { border-color: var(--upos-warning) !important; }

/* Image */
.product_box .image-container {
    height: 92px !important;
    margin: 0 auto 6px !important;
    background: var(--upos-surface-2);
    border-radius: 8px;
    overflow: hidden;
}
.product_box .image-container img { height: 100%; width: 100%; object-fit: contain; }

/* Text block */
.product_box .text_div { color: var(--upos-text-muted); }
.product_box .text_div small { font-size: 11px; line-height: 1.35; }
/* Product name (the small with .text) */
.product_box .text_div small.text {
    font-size: 13px !important;
    line-height: 1.3 !important;
    max-height: none !important;
    -webkit-line-clamp: 2 !important;
    color: var(--upos-text) !important;
    font-weight: 600;
}
/* Price */
.product_box .product_price {
    font-size: 14px !important;
    font-weight: 700 !important;
    color: var(--upos-success) !important;
    letter-spacing: -0.2px;
}

/* --------------------------------------------------------------------------
   Cart pane: inputs + table
   -------------------------------------------------------------------------- */
.pos-pane-cart .form-control {
    border-radius: 10px;
    border-color: var(--upos-border-2);
    background: var(--upos-surface-2);
    color: var(--upos-text);
}
.pos-pane-cart .form-control:focus {
    border-color: var(--upos-accent);
    box-shadow: 0 0 0 3px var(--upos-accent-soft);
}
.pos-pane-cart .input-group-addon {
    background: var(--upos-surface-3);
    border-color: var(--upos-border-2);
    color: var(--upos-text-2);
}

/* Table as a card list */
#pos_table {
    border-collapse: separate !important;
    border-spacing: 0 8px;
    width: 100%;
    margin: 0;
}
#pos_table thead th {
    position: sticky;
    top: 0;
    z-index: 10;
    background: var(--upos-surface) !important;
    color: var(--upos-text-muted) !important;
    border: none !important;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    padding: 4px 8px 8px;
    line-height: 1.2;
    vertical-align: middle;
    white-space: nowrap;
}
#pos_table tbody tr.product_row > td,
body.lockscreen #pos_table > tbody > tr.product_row > td {
    background: var(--upos-surface-2) !important;
    border-top: 1px solid var(--upos-border) !important;
    border-bottom: 1px solid var(--upos-border) !important;
    border-left: none !important;
    border-right: none !important;
    padding: 10px 10px !important;
    vertical-align: middle;
    font-size: 13px;
    line-height: 1.4;
}
#pos_table tbody tr.product_row > td:first-child {
    border-left: 1px solid var(--upos-border) !important;
    border-radius: 12px 0 0 12px !important;
}
#pos_table tbody tr.product_row > td:last-child {
    border-right: 1px solid var(--upos-border) !important;
    border-radius: 0 12px 12px 0 !important;
}
#pos_table tbody tr.product_row:hover > td {
    background: var(--upos-surface-3) !important;
}

/* Empty-state row: app.css paints striped rows white with !important
   (body.lockscreen #pos_table > tbody > tr:nth-child(odd) { background:#fff })
   which would leave the empty cart white in dark mode. */
#pos_table > tbody > tr.pos-empty-state-row,
body.lockscreen #pos_table > tbody > tr.pos-empty-state-row {
    background: transparent !important;
}

/* Quantity stepper */
#pos_table .input-number { display: inline-flex; align-items: center; width: 100%; }
#pos_table .input-number .form-control.pos_quantity,
body.lockscreen #pos_table .input-group .form-control.pos_quantity {
    height: 44px !important;
    width: 100% !important;
    min-width: 64px;
    text-align: center;
    font-weight: 700 !important;
    font-size: 14px;
    border-radius: 10px !important;
    border: 1px solid var(--upos-border-2) !important;
    background: var(--upos-surface) !important;
    color: var(--upos-text) !important;
    padding: 0 8px !important;
}
#pos_table .input-number .quantity-up,
#pos_table .input-number .quantity-down,
body.lockscreen #pos_table .input-group-btn .quantity-up,
body.lockscreen #pos_table .input-group-btn .quantity-down {
    height: 44px !important;
    line-height: normal !important;
    min-width: 38px;
    border-radius: 10px !important;
    border: 1px solid var(--upos-border-2) !important;
    background: var(--upos-surface) !important;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    padding: 0 10px !important;
    box-shadow: none !important;
    font-size: 13px;
    transition: background var(--upos-dur) var(--upos-ease), color var(--upos-dur) var(--upos-ease);
}
/* Semantic stepper colors (markup intent: green "+", red "-") */
#pos_table .input-number .quantity-up,
body.lockscreen #pos_table .input-group-btn .quantity-up { color: var(--upos-success) !important; }
#pos_table .input-number .quantity-down,
body.lockscreen #pos_table .input-group-btn .quantity-down { color: var(--upos-danger) !important; }
#pos_table .input-number .quantity-down:hover,
body.lockscreen #pos_table .input-group-btn .quantity-down:hover { background: var(--upos-danger-soft) !important; color: var(--upos-danger) !important; border-color: var(--upos-danger) !important; }
#pos_table .input-number .quantity-up:hover,
body.lockscreen #pos_table .input-group-btn .quantity-up:hover { background: var(--upos-success-soft) !important; color: var(--upos-success) !important; border-color: var(--upos-success) !important; }

/* Line price / subtotal inputs (body.lockscreen variants tie/beat the app.css group) */
#pos_table input.pos_unit_price,
#pos_table input.pos_unit_price_inc_tax,
#pos_table input.pos_line_total,
body.lockscreen #pos_table .form-control.pos_unit_price,
body.lockscreen #pos_table .input-group .form-control.pos_unit_price_inc_tax,
body.lockscreen #pos_table .form-control.pos_unit_price_inc_tax,
body.lockscreen #pos_table .form-control.pos_line_total {
    height: 44px !important;
    border-radius: 8px !important;
    border: 1px solid var(--upos-border-2) !important;
    background: var(--upos-surface) !important;
    color: var(--upos-text) !important;
    text-align: right;
    font-weight: 600 !important;
    padding: 8px 10px !important;
}
/* Round every table control (discount / tax / sub-unit selects) for consistency */
body.lockscreen #pos_table .form-control {
    border-radius: 8px !important;
}
#pos_table input.pos_line_total[readonly],
#pos_table input.pos_unit_price_inc_tax[readonly],
body.lockscreen #pos_table .form-control.pos_line_total[readonly] {
    background: transparent !important;
    border-color: transparent !important;
    font-weight: 700;
}

/* Subtotal text (app.css forces dark text for light mode) */
#pos_table .display_currency.pos_line_total_text,
body.lockscreen #pos_table .display_currency.pos_line_total_text {
    color: var(--upos-text) !important;
    font-weight: 700;
}

/* Remove-row button */
#pos_table .pos_remove_row {
    background: var(--upos-danger-soft) !important;
    color: var(--upos-danger) !important;
}
#pos_table .pos_remove_row:hover { background: var(--upos-danger) !important; color: #fff !important; }

/* --------------------------------------------------------------------------
   jQuery UI autocomplete (appended to <body>)
   -------------------------------------------------------------------------- */
.ui-autocomplete {
    background: var(--upos-surface) !important;
    border: 1px solid var(--upos-border-2) !important;
    border-radius: 12px !important;
    box-shadow: var(--upos-shadow-pop) !important;
    padding: 6px !important;
    margin-top: 4px !important;
    max-height: 340px;
    overflow-y: auto;
    z-index: 2100 !important;
    font-size: 13px;
    font-family: inherit;
}
.ui-autocomplete li {
    margin: 2px 0;
    padding: 0;
    border: none !important;
    background: transparent !important;
    border-radius: 8px;
}
.ui-autocomplete li a,
.ui-autocomplete li.ui-menu-item-wrapper {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    border-radius: 8px;
    color: var(--upos-text) !important;
    cursor: pointer;
    text-decoration: none;
    line-height: 1.3;
}
.ui-autocomplete li a img,
.ui-autocomplete li.ui-menu-item-wrapper img { border-radius: 6px; object-fit: contain; }
.ui-autocomplete li a:hover,
.ui-autocomplete li a:focus,
.ui-autocomplete li.ui-state-active a,
.ui-autocomplete li.ui-state-active.ui-menu-item-wrapper {
    background: var(--upos-accent-soft) !important;
    color: var(--upos-accent) !important;
    outline: none;
}

/* --------------------------------------------------------------------------
   Action bar (bottom)
   -------------------------------------------------------------------------- */
.pos-form-actions {
    background: var(--upos-surface) !important;
    border-top: 1px solid var(--upos-border) !important;
    box-shadow: 0 -6px 18px rgba(15, 23, 42, 0.08) !important;
    border-radius: 0 !important;
}
html[data-theme="dark"] .pos-form-actions {
    box-shadow: 0 -8px 24px rgba(0, 0, 0, 0.5) !important;
}
.pos-form-actions .pos-footer-divider { background: var(--upos-border-2); }

/* Cancel button (desktop + mobile variants) */
.pos-form-actions button.js-pos-cancel,
.pos-form-actions button.js-pos-delete {
    background: var(--upos-surface) !important;
    color: var(--upos-danger) !important;
    border: 2px solid var(--upos-danger) !important;
    border-radius: 10px !important;
    font-weight: 700;
}
.pos-form-actions button.js-pos-cancel:hover {
    background: var(--upos-danger) !important;
    color: #fff !important;
}
.pos-form-actions button.js-pos-delete {
    background: var(--upos-danger) !important;
    color: #fff !important;
}
.pos-form-actions button.js-pos-delete:hover { background: var(--upos-danger-soft) !important; color: var(--upos-danger) !important; }

/* Secondary icon buttons (draft / quotation / suspend / credit / card) */
.pos-form-actions .pos-footer-secondary > button:not([class*="tw-bg-"]) {
    color: var(--upos-text-2) !important;
    border-radius: 8px;
}
.pos-form-actions .pos-footer-secondary > button:not([class*="tw-bg-"]):hover {
    background: var(--upos-surface-2);
    color: var(--upos-text) !important;
}

/* --------------------------------------------------------------------------
   Slim scrollbars for the two scroll areas
   -------------------------------------------------------------------------- */
#product_list_body::-webkit-scrollbar,
.pos_product_div::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}
#product_list_body::-webkit-scrollbar-thumb,
.pos_product_div::-webkit-scrollbar-thumb {
    background: var(--upos-border-2);
    border-radius: 8px;
}
#product_list_body::-webkit-scrollbar-track,
.pos_product_div::-webkit-scrollbar-track { background: transparent; }

/* --------------------------------------------------------------------------
   Mobile product modal: reuse the same tile + grid look
   -------------------------------------------------------------------------- */
#mobile_product_suggestion_modal .pos-sidebar-root {
    background: transparent;
    box-shadow: none;
}

/* ==========================================================================
   Phase 3 — Polish
   Eased micro-interactions + the "no products" empty state.
   ========================================================================== */

/* Cart row hover: ease instead of snapping */
#pos_table tbody tr.product_row > td {
    transition: background-color var(--upos-dur) var(--upos-ease);
}

/* New cart rows ease in (runs once per inserted <tr>) */
@keyframes pos-row-in {
    from { opacity: 0; transform: translateY(5px); }
    to   { opacity: 1; transform: translateY(0); }
}
#pos_table tbody tr.product_row {
    animation: pos-row-in 180ms ease-out;
}

/* Action bar: every button gets the same press feedback as the rest of the app */
.pos-form-actions button {
    transition: background-color var(--upos-dur) var(--upos-ease),
                color var(--upos-dur) var(--upos-ease),
                border-color var(--upos-dur) var(--upos-ease),
                box-shadow var(--upos-dur) var(--upos-ease),
                transform 100ms ease;
}
.pos-form-actions button:active { transform: scale(0.985); }

/* "No products" empty state (product_list.blade.php @empty) */
.pos-no-products {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: 6px;
    padding: 48px 16px;
}
.pos-no-products__icon {
    width: 56px;
    height: 56px;
    border-radius: 999px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--upos-surface-2);
    border: 1px solid var(--upos-border);
    color: var(--upos-text-muted);
    margin-bottom: 6px;
}
.pos-no-products__icon svg { display: block; }
.pos-no-products__title {
    font-size: 15px;
    font-weight: 600;
    color: var(--upos-text-2);
}
.pos-no-products__hint {
    font-size: 13px;
    line-height: 1.5;
    color: var(--upos-text-muted);
    max-width: 300px;
}