/* ═══════════════════════════════════════════════════════════════════════════════
   POS Terminal — CSS Foundation
   EN: Styles for POS front-of-house pages (Quick Sale, Payment, Reports)
   VI: Styles cho trang POS tuyến trước (Bán nhanh, Thanh toán, Báo cáo)
   Based on: pencil-design/src/pages/tPOS/pos/ tokens
   ═══════════════════════════════════════════════════════════════════════════════ */

/* ═════════════════════════════════════════════════════════════════════════
   1. POS DESIGN TOKENS
   ═════════════════════════════════════════════════════════════════════════ */
:root {
    /* EN: POS background colors / VI: Màu nền POS */
    --pos-bg-page: #0A0A0B;
    --pos-bg-elevated: #1A1A1D;
    --pos-bg-interactive: #2A2A2E;

    /* EN: POS text colors / VI: Màu chữ POS */
    --pos-text-primary: #FFFFFF;
    --pos-text-secondary: #ADADB0;
    --pos-text-tertiary: #8B8B90;

    /* EN: POS border colors / VI: Màu viền POS */
    --pos-border-default: #2A2A2E;
    --pos-border-subtle: #1F1F23;

    /* EN: POS brand & status colors / VI: Màu thương hiệu & trạng thái POS */
    --pos-orange-primary: #FF5C00;
    --pos-success: #22C55E;
    --pos-warning: #F59E0B;
    --pos-danger: #EF4444;
    --pos-info: #3B82F6;

    /* EN: POS spacing / VI: Khoảng cách POS */
    --pos-status-bar-height: 48px;
    --pos-footer-height: 64px;
    --pos-product-grid-gap: 12px;
    --pos-radius: 12px;

    /* EN: POS font / VI: Font POS */
    --pos-font: 'Roboto', 'Inter', sans-serif;
}

/* ═════════════════════════════════════════════════════════════════════════
   2. POS LAYOUT — Full-screen terminal
   ═════════════════════════════════════════════════════════════════════════ */

.pos-layout {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100vh;
    background-color: var(--pos-bg-page);
    font-family: var(--pos-font);
    color: var(--pos-text-primary);
    overflow: hidden;
}

/* EN: POS status bar / VI: Thanh trạng thái POS */
.pos-status-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: var(--pos-status-bar-height);
    padding: 0 16px;
    background-color: var(--pos-bg-elevated);
    border-bottom: 1px solid var(--pos-border-subtle);
    flex-shrink: 0;
}

.pos-status-bar__left {
    display: flex;
    align-items: center;
    gap: 12px;
}

.pos-status-bar__right {
    display: flex;
    align-items: center;
    gap: 8px;
}

.pos-status-bar__logo {
    font-size: 15px;
    font-weight: 700;
    color: var(--pos-orange-primary);
}

.pos-status-bar__store {
    font-size: 13px;
    color: var(--pos-text-secondary);
}

.pos-status-bar__indicator {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    border-radius: 6px;
    font-size: 11px;
    font-weight: 600;
}

.pos-status-bar__indicator--online {
    background-color: rgba(34, 197, 94, 0.125);
    color: var(--pos-success);
}

.pos-status-bar__indicator--offline {
    background-color: rgba(239, 68, 68, 0.125);
    color: var(--pos-danger);
}

/* EN: POS main content area / VI: Vùng nội dung chính POS */
.pos-main {
    flex: 1;
    display: flex;
    overflow: hidden;
}

/* EN: POS product panel (left) / VI: Panel sản phẩm (trái) */
.pos-product-panel {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

/* EN: POS cart panel (right) / VI: Panel giỏ hàng (phải) */
.pos-cart-panel {
    width: 380px;
    min-width: 380px;
    display: flex;
    flex-direction: column;
    background-color: var(--pos-bg-elevated);
    border-left: 1px solid var(--pos-border-subtle);
}

/* EN: Category tabs / VI: Tab danh mục */
.pos-category-tabs {
    display: flex;
    gap: 8px;
    padding: 12px 16px;
    overflow-x: auto;
    flex-shrink: 0;
}

.pos-category-tab {
    padding: 8px 16px;
    border-radius: var(--pos-radius);
    font-size: 13px;
    font-weight: 500;
    white-space: nowrap;
    border: none;
    cursor: pointer;
    transition: all 0.2s ease;
    background-color: var(--pos-bg-interactive);
    color: var(--pos-text-secondary);
}

.pos-category-tab--active {
    background-color: var(--pos-orange-primary);
    color: #FFFFFF;
    font-weight: 600;
}

/* EN: Product grid / VI: Lưới sản phẩm */
.pos-product-grid {
    flex: 1;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: var(--pos-product-grid-gap);
    padding: 16px;
    overflow-y: auto;
    align-content: start;
}

.pos-product-card {
    background-color: var(--pos-bg-elevated);
    border-radius: var(--pos-radius);
    padding: 12px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
    border: 1px solid transparent;
}

.pos-product-card:hover {
    border-color: var(--pos-orange-primary);
    transform: translateY(-2px);
}

.pos-product-card__image {
    width: 100%;
    aspect-ratio: 1;
    border-radius: 8px;
    background-color: var(--pos-bg-interactive);
    overflow: hidden;
}

.pos-product-card__name {
    font-size: 13px;
    font-weight: 600;
    color: var(--pos-text-primary);
}

.pos-product-card__price {
    font-size: 14px;
    font-weight: 700;
    color: var(--pos-orange-primary);
}

/* EN: Cart items / VI: Mục giỏ hàng */
.pos-cart-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 16px;
    border-bottom: 1px solid var(--pos-border-subtle);
}

.pos-cart-header__title {
    font-size: 15px;
    font-weight: 600;
}

.pos-cart-items {
    flex: 1;
    overflow-y: auto;
    padding: 8px;
}

.pos-cart-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px;
    border-radius: var(--pos-radius);
    transition: background-color 0.2s ease;
}

.pos-cart-item:hover {
    background-color: var(--pos-bg-interactive);
}

.pos-cart-item__info {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.pos-cart-item__name {
    font-size: 13px;
    font-weight: 500;
}

.pos-cart-item__price {
    font-size: 12px;
    color: var(--pos-text-tertiary);
}

.pos-cart-item__qty {
    display: flex;
    align-items: center;
    gap: 8px;
}

.pos-cart-item__qty button {
    width: 28px;
    height: 28px;
    border-radius: 8px;
    border: 1px solid var(--pos-border-default);
    background: transparent;
    color: var(--pos-text-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

/* EN: Cart footer / VI: Footer giỏ hàng */
.pos-cart-footer {
    padding: 16px;
    border-top: 1px solid var(--pos-border-subtle);
}

.pos-cart-total {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
}

.pos-cart-total__label {
    font-size: 14px;
    color: var(--pos-text-secondary);
}

.pos-cart-total__value {
    font-size: 22px;
    font-weight: 700;
    color: var(--pos-orange-primary);
}

.pos-btn-checkout {
    width: 100%;
    height: 48px;
    background-color: var(--pos-orange-primary);
    color: #FFFFFF;
    border: none;
    border-radius: var(--pos-radius);
    font-size: 15px;
    font-weight: 600;
    font-family: var(--pos-font);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: all 0.2s ease;
}

.pos-btn-checkout:hover {
    background-color: #E05200;
}

/* EN: POS dialog overlay / VI: Overlay dialog POS */
.pos-dialog-overlay {
    position: fixed;
    inset: 0;
    background-color: rgba(0, 0, 0, 0.6);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 300;
}

.pos-dialog {
    background-color: var(--pos-bg-elevated);
    border-radius: 16px;
    width: 90%;
    max-width: 480px;
    max-height: 90vh;
    overflow-y: auto;
    box-shadow: 0 24px 48px rgba(0, 0, 0, 0.4);
}

/* ═════════════════════════════════════════════════════════════════════════
   7. POS BOTTOM NAVIGATION — Tab bar for Sale / History / Dashboard
   ═════════════════════════════════════════════════════════════════════════ */

/* EN: POS vertical sidebar navigation (right side)
   VI: POS sidebar dọc (bên phải) */
.pos-bottom-nav {
    display: flex;
    flex-direction: column;
    width: 64px;
    background-color: var(--pos-bg-elevated);
    border-left: 1px solid var(--pos-border-subtle);
    flex-shrink: 0;
    padding: 8px 0;
    gap: 2px;
}

.pos-bottom-nav__tab {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    border: none;
    background: transparent;
    color: var(--pos-text-tertiary);
    cursor: pointer;
    font-family: var(--pos-font);
    font-size: 10px;
    font-weight: 500;
    transition: color 0.2s ease, background 0.2s ease;
    position: relative;
    padding: 10px 4px;
    border-radius: 8px;
    margin: 0 6px;
}

.pos-bottom-nav__tab:hover {
    color: var(--pos-text-secondary);
    background: rgba(255, 255, 255, 0.04);
}

.pos-bottom-nav__tab--active {
    color: var(--pos-orange-primary);
    background: rgba(255, 92, 0, 0.08);
}

.pos-bottom-nav__tab--active::before {
    content: '';
    position: absolute;
    left: 0;
    top: 20%;
    bottom: 20%;
    width: 3px;
    background: var(--pos-orange-primary);
    border-radius: 0 3px 3px 0;
}

.pos-bottom-nav__icon {
    width: 20px;
    height: 20px;
}

/* ═════════════════════════════════════════════════════════════════════════
   8. POS PAYMENT INLINE — Cart panel transforms to payment mode
   ═════════════════════════════════════════════════════════════════════════ */

.pos-payment-panel {
    display: flex;
    flex-direction: column;
    height: 100%;
    animation: posFadeIn 0.25s ease-out;
}

.pos-payment-header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 16px;
    border-bottom: 1px solid var(--pos-border-subtle);
}

.pos-payment-header__back {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    border: 1px solid var(--pos-border-default);
    background: transparent;
    color: var(--pos-text-secondary);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

.pos-payment-methods {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    padding: 16px;
}

.pos-payment-method-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 20px 12px;
    border-radius: var(--pos-radius);
    border: 2px solid var(--pos-border-default);
    background: var(--pos-bg-page);
    color: var(--pos-text-primary);
    cursor: pointer;
    transition: border-color 0.2s, background-color 0.2s;
    font-family: var(--pos-font);
}

.pos-payment-method-btn:hover {
    border-color: var(--pos-orange-primary);
    background: rgba(255, 92, 0, 0.05);
}

.pos-payment-method-btn--selected {
    border-color: var(--pos-orange-primary);
    background: rgba(255, 92, 0, 0.1);
}

.pos-payment-method-btn__icon {
    font-size: 28px;
}

.pos-payment-method-btn__label {
    font-size: 13px;
    font-weight: 600;
}

.pos-payment-amount-section {
    padding: 16px;
    flex: 1;
    overflow-y: auto;
}

.pos-payment-quick-amounts {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    margin-bottom: 16px;
}

.pos-payment-quick-btn {
    padding: 12px 8px;
    border-radius: var(--pos-radius);
    border: 2px solid var(--pos-border-default);
    background: var(--pos-bg-page);
    color: var(--pos-text-primary);
    cursor: pointer;
    font-size: 13px;
    font-weight: 600;
    font-family: var(--pos-font);
    text-align: center;
    transition: border-color 0.2s;
}

.pos-payment-quick-btn:hover,
.pos-payment-quick-btn--selected {
    border-color: var(--pos-orange-primary);
    background: rgba(255, 92, 0, 0.1);
}

.pos-payment-input {
    width: 100%;
    padding: 12px 14px;
    border-radius: var(--pos-radius);
    border: 1px solid var(--pos-border-default);
    background: var(--pos-bg-page);
    color: var(--pos-text-primary);
    font-size: 15px;
    font-family: var(--pos-font);
    outline: none;
    margin-bottom: 16px;
}

.pos-payment-input:focus {
    border-color: var(--pos-orange-primary);
}

.pos-payment-change {
    background: var(--pos-bg-page);
    border-radius: var(--pos-radius);
    padding: 14px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.pos-payment-change__row {
    display: flex;
    justify-content: space-between;
    font-size: 13px;
}

/* Payment success animation */
.pos-payment-success {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    gap: 16px;
    animation: posFadeIn 0.3s ease-out;
}

.pos-payment-success__circle {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: rgba(34, 197, 94, 0.15);
    display: flex;
    align-items: center;
    justify-content: center;
    animation: posScaleIn 0.4s ease-out;
}

.pos-payment-success__inner {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: var(--pos-success);
    display: flex;
    align-items: center;
    justify-content: center;
}

@keyframes posFadeIn {
    from {
        opacity: 0;
        transform: translateY(8px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes posScaleIn {
    from {
        transform: scale(0);
    }

    to {
        transform: scale(1);
    }
}

/* ═════════════════════════════════════════════════════════════════════════
   9. POS ORDER HISTORY
   ═════════════════════════════════════════════════════════════════════════ */

.pos-history {
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
}

.pos-history__toolbar {
    display: flex;
    gap: 10px;
    padding: 14px 16px;
    border-bottom: 1px solid var(--pos-border-subtle);
    flex-shrink: 0;
    align-items: center;
}

.pos-history__search {
    flex: 1;
    padding: 10px 14px;
    border-radius: var(--pos-radius);
    border: 1px solid var(--pos-border-default);
    background: var(--pos-bg-elevated);
    color: var(--pos-text-primary);
    font-size: 13px;
    font-family: var(--pos-font);
    outline: none;
}

.pos-history__search:focus {
    border-color: var(--pos-orange-primary);
}

.pos-history__filter-btn {
    padding: 10px 14px;
    border-radius: var(--pos-radius);
    border: 1px solid var(--pos-border-default);
    background: transparent;
    color: var(--pos-text-secondary);
    cursor: pointer;
    font-size: 12px;
    font-weight: 600;
    font-family: var(--pos-font);
    white-space: nowrap;
}

.pos-history__filter-btn--active {
    border-color: var(--pos-orange-primary);
    background: rgba(255, 92, 0, 0.1);
    color: var(--pos-orange-primary);
}

.pos-history__list {
    flex: 1;
    overflow-y: auto;
    padding: 8px 16px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.pos-history__card {
    background: var(--pos-bg-elevated);
    border-radius: var(--pos-radius);
    padding: 14px 16px;
    cursor: pointer;
    border: 1px solid transparent;
    transition: border-color 0.2s;
}

.pos-history__card:hover {
    border-color: var(--pos-border-default);
}

.pos-history__card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
}

.pos-history__order-id {
    font-size: 13px;
    font-weight: 700;
    color: var(--pos-text-primary);
}

.pos-history__status {
    padding: 3px 10px;
    border-radius: 6px;
    font-size: 11px;
    font-weight: 600;
}

.pos-history__status--completed {
    background: rgba(34, 197, 94, 0.15);
    color: var(--pos-success);
}

.pos-history__status--refunded {
    background: rgba(239, 68, 68, 0.15);
    color: var(--pos-danger);
}

.pos-history__card-body {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
}

.pos-history__items-preview {
    font-size: 12px;
    color: var(--pos-text-tertiary);
    max-width: 60%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.pos-history__card-meta {
    text-align: right;
}

.pos-history__total {
    font-size: 15px;
    font-weight: 700;
    color: var(--pos-orange-primary);
}

.pos-history__time {
    font-size: 11px;
    color: var(--pos-text-tertiary);
    margin-top: 2px;
}

.pos-history__method {
    font-size: 11px;
    color: var(--pos-text-tertiary);
}

/* ═════════════════════════════════════════════════════════════════════════
   10. POS DASHBOARD
   ═════════════════════════════════════════════════════════════════════════ */

.pos-dashboard {
    padding: 20px;
    overflow-y: auto;
    height: 100%;
}

.pos-dashboard__header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}

.pos-dashboard__title {
    font-size: 20px;
    font-weight: 700;
}

.pos-dashboard__subtitle {
    font-size: 12px;
    color: var(--pos-text-tertiary);
    margin-top: 2px;
}

.pos-dashboard__stats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
    margin-bottom: 20px;
}

.pos-dashboard__stat-card {
    background: var(--pos-bg-elevated);
    border-radius: var(--pos-radius);
    padding: 16px;
}

.pos-dashboard__stat-label {
    font-size: 11px;
    color: var(--pos-text-tertiary);
    margin-bottom: 6px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.pos-dashboard__stat-value {
    font-size: 22px;
    font-weight: 700;
}

.pos-dashboard__stat-sub {
    font-size: 11px;
    color: var(--pos-text-tertiary);
    margin-top: 4px;
}

.pos-dashboard__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

.pos-dashboard__section {
    background: var(--pos-bg-elevated);
    border-radius: var(--pos-radius);
    padding: 16px;
}

.pos-dashboard__section-title {
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 14px;
}

.pos-dashboard__popular-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 0;
    border-bottom: 1px solid var(--pos-border-subtle);
}

.pos-dashboard__popular-item:last-child {
    border-bottom: none;
}

.pos-dashboard__hourly-chart {
    display: flex;
    align-items: flex-end;
    gap: 4px;
    height: 100px;
    margin-top: 8px;
}

.pos-dashboard__hourly-bar {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
}

.pos-dashboard__hourly-fill {
    width: 100%;
    background: var(--pos-orange-primary);
    border-radius: 3px 3px 0 0;
    min-height: 2px;
    transition: height 0.3s ease;
}

.pos-dashboard__hourly-label {
    font-size: 9px;
    color: var(--pos-text-tertiary);
}

/* Payment method progress bar */
.pos-dashboard__payment-row {
    margin-bottom: 12px;
}

.pos-dashboard__payment-header {
    display: flex;
    justify-content: space-between;
    margin-bottom: 4px;
    font-size: 12px;
}

.pos-dashboard__payment-bar {
    height: 5px;
    border-radius: 3px;
    background: var(--pos-bg-interactive);
}

.pos-dashboard__payment-fill {
    height: 100%;
    border-radius: 3px;
}

/* ═════════════════════════════════════════════════════════════════════════
   11. POS MAIN LAYOUT — adjusted for bottom nav
   ═════════════════════════════════════════════════════════════════════════ */

.pos-content-area {
    flex: 1;
    display: flex;
    overflow: hidden;
}

/* Dimmed product panel during payment */
.pos-product-panel--dimmed {
    opacity: 0.4;
    pointer-events: none;
}

/* Toggle switch */
.pos-toggle {
    position: relative;
    width: 40px;
    height: 22px;
    border-radius: 11px;
    border: none;
    background: var(--pos-border-default, #444);
    cursor: pointer;
    transition: background 0.2s;
    padding: 0;
}
.pos-toggle--on { background: var(--pos-orange-primary, #ff5c00); }
.pos-toggle__knob {
    position: absolute;
    top: 2px;
    left: 2px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #fff;
    transition: transform 0.2s;
}
.pos-toggle--on .pos-toggle__knob { transform: translateX(18px); }

/* Settings input */
.pos-settings-input {
    width: 100%;
    padding: 10px 12px;
    border-radius: var(--pos-radius, 8px);
    border: 1px solid var(--pos-border-subtle, #333);
    background: var(--pos-bg-interactive, #1a1a2e);
    color: var(--pos-text-primary, #fff);
    font-size: 13px;
    outline: none;
}
.pos-settings-input:focus {
    border-color: var(--pos-orange-primary, #ff5c00);
}

/* ═════════════════════════════════════════════════════════════════════════
   12. POS RESPONSIVE — Mobile hamburger, sidebar, order drawer
   EN: Responsive elements for tablet/mobile POS usage.
   VI: Các phần tử responsive cho POS trên tablet/mobile.
   ═════════════════════════════════════════════════════════════════════════ */

/* EN: Mobile hamburger toggle — hidden on desktop / VI: Nút hamburger — ẩn trên desktop */
.pos-mobile-toggle {
    display: none;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 8px;
    border: none;
    background: transparent;
    color: var(--pos-text-primary);
    cursor: pointer;
    transition: background 0.2s ease;
    flex-shrink: 0;
}

.pos-mobile-toggle:hover {
    background-color: var(--pos-bg-interactive);
}

/* EN: Order panel toggle — hidden on desktop / VI: Nút toggle panel đơn hàng — ẩn trên desktop */
.pos-order-toggle {
    display: none;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 8px;
    border: none;
    background: transparent;
    color: var(--pos-text-primary);
    cursor: pointer;
    transition: background 0.2s ease;
    position: relative;
    flex-shrink: 0;
}

.pos-order-toggle:hover {
    background-color: var(--pos-bg-interactive);
}

.pos-order-toggle__badge {
    position: absolute;
    top: 2px;
    right: 2px;
    min-width: 16px;
    height: 16px;
    border-radius: 8px;
    background: var(--pos-orange-primary);
    color: #FFFFFF;
    font-size: 10px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 4px;
}

/* EN: Admin button — always visible / VI: Nút admin — luôn hiện */
.pos-admin-btn {
    flex-shrink: 0;
}

/* EN: Status bar time / VI: Thời gian thanh trạng thái */
.pos-status-bar__time {
    font-size: 13px;
    color: var(--pos-text-secondary);
}

/* EN: Sidebar navigation — hidden on desktop (desktop uses page-level nav)
   VI: Sidebar điều hướng — ẩn trên desktop (desktop dùng nav cấp trang) */
.pos-sidebar {
    display: none;
    position: fixed;
    top: 0;
    left: -280px;
    width: 280px;
    height: 100vh;
    background-color: var(--pos-bg-elevated);
    border-right: 1px solid var(--pos-border-subtle);
    z-index: 200;
    flex-direction: column;
    transition: left 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.pos-sidebar--open {
    left: 0;
}

.pos-sidebar__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px;
    border-bottom: 1px solid var(--pos-border-subtle);
}

.pos-sidebar__close {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    border: none;
    background: transparent;
    color: var(--pos-text-secondary);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

.pos-sidebar__close:hover {
    background-color: var(--pos-bg-interactive);
}

.pos-sidebar__nav {
    flex: 1;
    padding: 8px;
    overflow-y: auto;
}

.pos-sidebar__footer {
    padding: 8px;
    border-top: 1px solid var(--pos-border-subtle);
}

.pos-sidebar__link {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 12px;
    border-radius: var(--pos-radius);
    color: var(--pos-text-secondary);
    text-decoration: none;
    font-size: 14px;
    font-weight: 500;
    transition: all 0.2s ease;
}

.pos-sidebar__link:hover {
    background-color: var(--pos-bg-interactive);
    color: var(--pos-text-primary);
}

/* EN: Sidebar overlay — click to close / VI: Overlay sidebar — click để đóng */
.pos-sidebar-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 190;
}

/* EN: Desktop-only cart panel modifier — shown inline on desktop, hidden on tablet/mobile
   VI: Modifier cart panel chi desktop — hiện inline trên desktop, ẩn trên tablet/mobile */
.pos-cart-panel--desktop {
    display: flex;
}

/* EN: Page content wrapper — enables flex child behavior
   VI: Wrapper nội dung trang — cho phép behavior flex child */
.pos-page-content {
    flex: 1;
    display: flex;
    overflow: hidden;
    min-width: 0;
}

/* EN: Order panel drawer — slides from right, hidden on desktop
   VI: Drawer panel đơn hàng — trượt từ phải, ẩn trên desktop */
.pos-order-drawer {
    display: none;
    position: fixed;
    top: 0;
    right: -400px;
    width: 380px;
    max-width: 100vw;
    height: 100vh;
    background-color: var(--pos-bg-elevated);
    border-left: 1px solid var(--pos-border-subtle);
    z-index: 200;
    flex-direction: column;
    transition: right 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.pos-order-drawer--open {
    right: 0;
}

.pos-order-drawer__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px;
    border-bottom: 1px solid var(--pos-border-subtle);
    flex-shrink: 0;
}

.pos-order-drawer__close {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    border: none;
    background: transparent;
    color: var(--pos-text-secondary);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

.pos-order-drawer__close:hover {
    background-color: var(--pos-bg-interactive);
}

.pos-order-drawer__content {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
}

/* EN: Order panel overlay — click to close / VI: Overlay panel đơn hàng — click để đóng */
.pos-order-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 190;
}

/* ═════════════════════════════════════════════════════════════════════════
   13. RESPONSIVE BREAKPOINTS
   EN: Tablet (max-width: 1024px) and Mobile (max-width: 600px) adaptations.
   VI: Tablet (max-width: 1024px) và Mobile (max-width: 600px) tùy chỉnh.
   ═════════════════════════════════════════════════════════════════════════ */

/* ── TABLET: <= 1024px ── */
@media (max-width: 1024px) {
    /* EN: Show hamburger and order toggle / VI: Hiện hamburger và toggle đơn hàng */
    .pos-mobile-toggle {
        display: flex;
    }

    .pos-order-toggle {
        display: flex;
    }

    /* EN: Enable sidebar as overlay / VI: Bật sidebar dạng overlay */
    .pos-sidebar {
        display: flex;
    }

    .pos-sidebar-overlay {
        display: block;
    }

    /* EN: Enable order drawer as overlay / VI: Bật order drawer dạng overlay */
    .pos-order-drawer {
        display: flex;
    }

    .pos-order-overlay {
        display: block;
    }

    /* EN: Cart panel becomes hidden on tablet — use drawer instead
       VI: Cart panel ẩn trên tablet — dùng drawer thay thế */
    .pos-cart-panel,
    .pos-cart-panel--desktop {
        display: none !important;
    }

    /* EN: Product panel takes full width / VI: Panel sản phẩm chiếm hết chiều rộng */
    .pos-product-panel {
        flex: 1;
        width: 100%;
    }

    /* EN: Content area fills available space / VI: Vùng nội dung chiếm hết không gian */
    .pos-content-area {
        flex-direction: column;
    }

    /* EN: Adjust product grid for tablet / VI: Điều chỉnh lưới sản phẩm cho tablet */
    .pos-product-grid {
        grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
        gap: 10px;
        padding: 12px;
    }

    /* EN: Dashboard stats 2 columns on tablet / VI: Thống kê dashboard 2 cột trên tablet */
    .pos-dashboard__stats {
        grid-template-columns: repeat(2, 1fr);
    }

    /* EN: Dashboard grid single column / VI: Lưới dashboard 1 cột */
    .pos-dashboard__grid {
        grid-template-columns: 1fr;
    }

    /* EN: History toolbar wrap / VI: Thanh công cụ lịch sử wrap */
    .pos-history__toolbar {
        flex-wrap: wrap;
    }

    /* EN: Touch-friendly category tabs / VI: Tab danh mục thân thiện cảm ứng */
    .pos-category-tab {
        padding: 10px 18px;
        font-size: 14px;
        min-height: 44px;
    }

    /* EN: Touch-friendly buttons / VI: Nút thân thiện cảm ứng */
    .pos-btn-checkout {
        min-height: 52px;
        font-size: 16px;
    }

    /* EN: Touch-friendly cart items / VI: Mục giỏ hàng thân thiện cảm ứng */
    .pos-cart-item {
        padding: 12px;
        min-height: 48px;
    }

    .pos-cart-item__qty button {
        width: 36px;
        height: 36px;
    }

    /* EN: Payment methods larger touch targets / VI: Phương thức thanh toán vùng chạm lớn hơn */
    .pos-payment-method-btn {
        padding: 24px 16px;
        min-height: 80px;
    }

    .pos-payment-quick-btn {
        padding: 14px 10px;
        min-height: 48px;
    }
}

/* ── MOBILE: <= 600px ── */
@media (max-width: 600px) {
    /* EN: Compact status bar / VI: Thanh trạng thái thu gọn */
    .pos-status-bar {
        height: 44px;
        padding: 0 8px;
    }

    .pos-status-bar__logo {
        font-size: 13px;
    }

    .pos-status-bar__store {
        font-size: 11px;
        max-width: 100px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .pos-status-bar__time {
        display: none;
    }

    .pos-status-bar__indicator span:last-child {
        display: none;
    }

    .pos-status-bar__left {
        gap: 8px;
    }

    .pos-status-bar__right {
        gap: 4px;
    }

    /* EN: Adjust status bar height token / VI: Điều chỉnh token chiều cao thanh trạng thái */
    .pos-layout {
        --pos-status-bar-height: 44px;
    }

    /* EN: Order drawer full width on mobile / VI: Drawer đơn hàng full chiều rộng trên mobile */
    .pos-order-drawer {
        width: 100vw;
        right: -100vw;
    }

    /* EN: Product grid single/double column / VI: Lưới sản phẩm 1-2 cột */
    .pos-product-grid {
        grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
        gap: 8px;
        padding: 8px;
    }

    /* EN: Smaller product cards / VI: Card sản phẩm nhỏ hơn */
    .pos-product-card {
        padding: 10px;
        gap: 6px;
    }

    .pos-product-card__name {
        font-size: 12px;
    }

    .pos-product-card__price {
        font-size: 13px;
    }

    /* EN: Category tabs scrollable with momentum / VI: Tab danh mục cuộn với momentum */
    .pos-category-tabs {
        padding: 8px 8px;
        gap: 6px;
        -webkit-overflow-scrolling: touch;
    }

    .pos-category-tab {
        padding: 10px 14px;
        font-size: 13px;
        min-height: 44px;
    }

    /* EN: Cart footer compact / VI: Footer giỏ hàng thu gọn */
    .pos-cart-footer {
        padding: 12px;
    }

    .pos-cart-total__value {
        font-size: 18px;
    }

    /* EN: Dashboard stats single column / VI: Thống kê dashboard 1 cột */
    .pos-dashboard__stats {
        grid-template-columns: 1fr 1fr;
        gap: 8px;
    }

    .pos-dashboard {
        padding: 12px;
    }

    .pos-dashboard__title {
        font-size: 16px;
    }

    .pos-dashboard__stat-value {
        font-size: 18px;
    }

    /* EN: Payment quick amounts 2 columns / VI: Số tiền nhanh 2 cột */
    .pos-payment-quick-amounts {
        grid-template-columns: repeat(2, 1fr);
    }

    /* EN: Sidebar nav — compact on small screens / VI: Sidebar nav — thu gọn trên màn nhỏ */
    .pos-bottom-nav {
        width: 52px;
        padding: 4px 0;
    }

    .pos-bottom-nav__tab {
        font-size: 9px;
        padding: 8px 2px;
        margin: 0 4px;
    }

    /* EN: History list compact / VI: Danh sách lịch sử thu gọn */
    .pos-history__list {
        padding: 8px;
    }

    .pos-history__card {
        padding: 12px;
    }

    .pos-history__items-preview {
        max-width: 50%;
        font-size: 11px;
    }

    /* EN: Dialog full width on mobile / VI: Dialog full chiều rộng trên mobile */
    .pos-dialog {
        width: 100%;
        max-width: 100%;
        border-radius: 16px 16px 0 0;
        max-height: 85vh;
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
    }
}

/* ── LARGE DESKTOP: >= 1280px ── */
@media (min-width: 1280px) {
    /* EN: Wider cart panel on large screens / VI: Panel giỏ hàng rộng hơn trên màn hình lớn */
    .pos-cart-panel {
        width: 400px;
        min-width: 400px;
    }

    /* EN: Larger product grid items / VI: Mục lưới sản phẩm lớn hơn */
    .pos-product-grid {
        grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
        gap: 14px;
    }

    /* EN: Dashboard stats 4 columns / VI: Thống kê dashboard 4 cột */
    .pos-dashboard__stats {
        grid-template-columns: repeat(4, 1fr);
    }
}

/* ═════════════════════════════════════════════════════════════════════════
   14. TOUCH UTILITIES
   EN: Touch-friendly utilities for POS on touch devices.
   VI: Tiện ích thân thiện cảm ứng cho POS trên thiết bị cảm ứng.
   ═════════════════════════════════════════════════════════════════════════ */

/* EN: Prevent text selection on touch targets / VI: Ngăn chọn văn bản trên vùng chạm */
.pos-btn-checkout,
.pos-category-tab,
.pos-product-card,
.pos-payment-method-btn,
.pos-payment-quick-btn,
.pos-bottom-nav__tab,
.pos-mobile-toggle,
.pos-order-toggle,
.pos-sidebar__link {
    -webkit-user-select: none;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
}

/* EN: Safe area insets for notched devices / VI: Vùng an toàn cho thiết bị có tai thỏ */
@supports (padding-bottom: env(safe-area-inset-bottom)) {
    .pos-bottom-nav {
        padding-bottom: env(safe-area-inset-bottom);
    }

    .pos-cart-footer {
        padding-bottom: calc(16px + env(safe-area-inset-bottom));
    }

    .pos-order-drawer .pos-cart-footer {
        padding-bottom: calc(16px + env(safe-area-inset-bottom));
    }
}