/* POS System Styles */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

:root {
    --primary: #2196F3;
    --primary-dark: #1976D2;
    --secondary: #6c757d;
    --success: #4CAF50;
    --danger: #dc3545;
    --warning: #ff9800;
    --dark: #212529;
    --light: #f8f9fa;
    --border: #dee2e6;
    --shadow: 0 2px 4px rgba(0,0,0,0.1);
}

body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    background: #1a1a2e;
    color: #fff;
    /* iPad Safari fix (2026-05-10): 100vh measures the FULL viewport including
       browser chrome that's actually visible (URL bar, bottom toolbar), so on
       iPad 10.9" landscape the lower buttons get pushed below the visible area.
       Dynamic viewport height (dvh) accounts for current chrome size; falls
       back to vh on older browsers. svh is the conservative pre-Safari-15.4
       hint. */
    height: 100vh;
    height: 100svh;
    height: 100dvh;
    overflow: hidden;
}

/* Container */
.pos-container {
    display: flex;
    flex-direction: column;
    height: 100vh;
    height: 100svh;
    height: 100dvh;
    /* Hard width clamp — nothing inside should ever push the container past
       the viewport. Pairs with body{overflow:hidden} and .pos-main grid to
       guarantee the right pane stays inside the visible area. */
    width: 100%;
    max-width: 100vw;
    overflow-x: hidden;
}

/* Header */
.pos-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 20px;
    background: #16213e;
    border-bottom: 1px solid #0f3460;
}

.header-left {
    display: flex;
    align-items: center;
    gap: 16px;
}

.header-left h1 {
    font-size: 20px;
    font-weight: 600;
    color: #fff;
}

.header-left .current-time {
    font-size: 14px;
    color: #aaa;
    margin-left: 20px;
}

.header-right {
    display: flex;
    align-items: center;
    gap: 15px;
}

.cashier-name {
    font-size: 14px;
    color: #aaa;
}

.btn-icon {
    background: transparent;
    border: none;
    color: #aaa;
    cursor: pointer;
    padding: 8px;
    border-radius: 4px;
    transition: all 0.2s;
}

.btn-icon:hover {
    background: rgba(255,255,255,0.1);
    color: #fff;
}

/* Main Layout */
.pos-main {
    display: flex;
    flex: 1;
    overflow: hidden;
    min-height: 0;
}

/* Left Panel */
.pos-left {
    flex: 1;
    /* min-width:0 lets the flex child shrink below its content's intrinsic
       width — without this, wide content (lagoon rows, calendar) pushes
       the parent past viewport and carries .pos-right off the right edge. */
    min-width: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    background: #1a1a2e;
    border-right: 1px solid #0f3460;
}

/* Category Tabs */
.category-tabs {
    display: flex;
    padding: 10px;
    gap: 8px;
    background: #16213e;
    border-bottom: 1px solid #0f3460;
    overflow-x: auto;
}

.tab-btn {
    padding: 10px 20px;
    border: none;
    background: transparent;
    color: #aaa;
    font-size: 14px;
    font-weight: 500;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s;
    white-space: nowrap;
}

.tab-btn:hover {
    background: rgba(255,255,255,0.1);
    color: #fff;
}

.tab-btn.active {
    background: var(--primary);
    color: #fff;
}

/* Quick Keys */
.quick-keys-container {
    flex: 1;
    overflow-y: auto;
    padding: 15px;
}

.quick-keys {
    display: grid;
    /* Bumped min from 140 → 160 so the session-type label, price, and
       direction info all fit on one row without crowding. */
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 12px;
}

.quick-key {
    /* Tile touch floor — was ~88-108px tall depending on content; pin
       the minimum so every tile reads at the same touch grade. */
    min-height: 88px;
    background: #16213e;
    border: 2px solid #0f3460;
    border-radius: 8px;
    padding: 16px 14px;
    text-align: center;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s, transform 0.15s, box-shadow 0.15s;
}

.quick-key:hover {
    background: #1f2b4a;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.3);
}

.quick-key.session { border-left: 4px solid var(--primary); }
.quick-key.rental { border-left: 4px solid var(--success); }
.quick-key.pass { border-left: 4px solid var(--warning); }
.quick-key.cabana { border-left: 4px solid #e91e63; }
.quick-key.retail { border-left: 4px solid #9c27b0; }

.quick-key-name {
    font-weight: 700;
    font-size: 15px;
    margin-bottom: 6px;
    color: #fff;
    line-height: 1.25;
}

.quick-key-price {
    /* Price was 16px — too quiet for the most important data on the tile. */
    font-size: 18px;
    font-weight: 700;
    color: var(--success);
}

.quick-key-info {
    /* Direction (Left/Right/Center) was 11px — at touch distance on a
       1024px terminal that's borderline unreadable. Bumped to 13px. */
    font-size: 13px;
    color: #aaa;
    margin-top: 6px;
}

.quick-key-spec {
    font-size: 12px;
    color: #6b7280;
    margin-top: 4px;
    line-height: 1.3;
}

/* POS Sessions picker — accordion behavior (2026-05-22).
   The lagoon + time panels collapse into a header-only chip after the
   operator picks a value, and the next step auto-expands. Tapping a
   collapsed header re-expands that step. The header always stays
   visible so the operator can jump back. Only ONE panel body is
   expanded at a time. */

/* All three accordion panels (Steps 1 / 2 / 3) share the same chrome —
   bg, padding, top divider, panel-level flex behavior. Per-section rules
   used to set background/padding individually and drifted; AutoQA 2026-05-24
   found 3 visual defects from that drift. Single source of truth here. */
.pos-acc-panel {
    background-color: #16213e;
    border-top: 1px solid #0f3460;
    /* Defect 4 fix: Steps 1 + 2 are content-sized chips. Step 3 overrides
       this back to flex:1 immediately below — same selector specificity
       wouldn't win (source order would prefer the .quick-keys-container
       rule earlier in this file), so the override uses a compound selector
       that bumps specificity to 0,2,0. */
    flex: 0 0 auto;
}

.pos-acc-panel.quick-keys-container {
    /* Step 3 is the destination tile grid — must claim remaining vertical
       space so the grid + lesson-toggle sit at the right anchor. Stays
       flex:1 even though the shared .pos-acc-panel rule wants 0 0 auto. */
    flex: 1 1 0%;
}

/* Defect 2 fix — collapsed strip height. With base padding 15px and no
   body content, the collapsed strip rendered ~51px tall (vs an expanded
   header strip's ~36px). Drop vertical padding when collapsed; horizontal
   padding stays so chevron + summary keep their right-edge anchor. */
.pos-acc-panel.acc-collapsed {
    padding-block: 8px;
}

.pos-acc-panel .pos-acc-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    cursor: pointer;
    user-select: none;
    padding: 0;
}

.pos-acc-panel .pos-acc-header h3 {
    /* Override the inherited `.session-selector h3 { margin-bottom: 10px }`
       and the .step-heading rule — the 10px below the h3 sneaks past the
       flex layout (cross-axis margin) and makes the collapsed chip 10px
       taller than its content, which read as a gap. */
    margin: 0 !important;
    flex: 0 0 auto;
}

.pos-acc-panel .pos-acc-header::after {
    content: '▾';
    font-size: 16px;
    color: #888;
    transition: transform 0.18s;
    margin-left: auto;
}

.pos-acc-panel.acc-collapsed .pos-acc-header::after {
    transform: rotate(-90deg);
}

.pos-acc-panel .acc-summary {
    flex: 1 1 auto;
    text-align: right;
    color: var(--primary, #4361ee);
    font-weight: 700;
    font-size: 14px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.pos-acc-panel .pos-acc-body {
    margin-top: 12px;
    transition: opacity 0.18s;
}

.pos-acc-panel.acc-collapsed .pos-acc-body {
    display: none;
}

/* AUTO-Admi-POS-PICKER-HEADER-NORMALIZE-STEP3-ACCORDION (2026-05-24):
   The earlier `padding: 10px 15px` override on collapsed panels made
   Step 2's chip tighter than Step 1/3's expanded body, creating an
   asymmetric look. WO author wants uniform `padding: 15px` across all
   three panels regardless of collapsed/expanded state — the chevron
   rotation + the chip's smaller content height already telegraph the
   collapsed state without a padding shift. */

/* When a panel collapses, the next sibling should sit closer to it — the
   default 15px-top padding combined with the collapsed chip's bottom
   padding reads as a gap. After the 2026-05-24 hoist of #sessionSelector
   out of #posSessionsPicker, all three picker steps are direct siblings,
   so a single + selector catches every adjacency. */
.pos-acc-panel.acc-collapsed + .pos-acc-panel {
    /* No double border between adjacent collapsed chips. */
    border-top-color: transparent;
}

/* AUTO-Admi-035: Sessions-tab guided picker — Lagoon selector (step 1).
   Background + border-top now live on .pos-acc-panel (single source of
   truth). Only padding stays here as the shared base size. */
.lagoon-selector {
    padding: 15px;
}

.lagoon-selector h3,
.session-selector h3,
.step-heading {
    font-size: 14px;
    /* margin removed (was 0 0 10px). The header lives inside .pos-acc-header
       which already zeroes h3 margins; the body's margin-top:12px handles
       spacing below. Bottom margin here was redundant and made the
       collapsed chip taller than the chevron column. */
    margin: 0;
    color: #aaa;
    font-weight: 700;
}

.lagoon-buttons {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.lagoon-btn {
    flex: 1;
    min-width: 120px;
    /* Touch-target floor per Apple HIG (44pt ≈ 58px). Was 41.5px tall. */
    min-height: 58px;
    padding: 14px 18px;
    background: #1a1a2e;
    color: #fff;
    border: 2px solid #0f3460;
    border-radius: 8px;
    font-weight: 600;
    font-size: 15px;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s, box-shadow 0.15s;
}

.lagoon-btn:hover {
    background: #233057;
}

.lagoon-btn.active {
    background: var(--primary, #4361ee);
    border-color: var(--primary, #4361ee);
    /* Stronger selected-state contrast — the old version only changed
       background, which was easy to miss on the dark theme. */
    box-shadow: 0 0 0 3px rgba(67, 97, 238, 0.25);
}

/* Lesson attach (step 4) */
.lesson-toggle {
    background: #16213e;
    padding: 12px 15px;
    border-top: 1px solid #0f3460;
}

.lesson-toggle label {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #fff;
    font-weight: 600;
    cursor: pointer;
    font-size: 14px;
}

.lesson-toggle small {
    display: block;
    color: #888;
    font-size: 11px;
    margin-top: 4px;
    margin-left: 24px;
}

/* Session Selector — background + border-top now on .pos-acc-panel. */
.session-selector {
    padding: 15px;
}

.session-selector h3 {
    font-size: 14px;
    margin-bottom: 10px;
    color: #aaa;
}

.date-picker {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 15px;
}

.date-picker input[type="date"] {
    flex: 1;
    /* Match touch-target floor with the arrows. Was 33.5px tall. */
    min-height: 58px;
    padding: 14px 16px;
    background: #1a1a2e;
    border: 2px solid #0f3460;
    border-radius: 8px;
    color: #fff;
    font-size: 15px;
    font-weight: 600;
}

.date-nav {
    /* Square 58×58 button — was ~33×33.5. */
    min-width: 58px;
    min-height: 58px;
    padding: 14px 18px;
    background: #1a1a2e;
    border: 2px solid #0f3460;
    border-radius: 8px;
    color: #fff;
    font-size: 18px;
    font-weight: 700;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s;
}

.date-nav:hover {
    background: #0f3460;
    border-color: var(--primary, #4361ee);
}

.session-times {
    display: grid;
    /* Bumped min from 100 → 120 so each slot has touch-room.
       Removed max-height/overflow-y so all 13 hourly slots wrap into rows
       and stay visible without a vertical scroll inside the panel. */
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    gap: 10px;
}

.session-time {
    /* Touch-target floor 58px (was ~68px which was ok, but padding bump
       gives more breathing room around the time + availability rows). */
    min-height: 64px;
    padding: 14px 12px;
    background: #1a1a2e;
    border: 2px solid #0f3460;
    border-radius: 8px;
    text-align: center;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s, box-shadow 0.15s;
}

.session-time:hover {
    background: #0f3460;
    border-color: var(--primary, #4361ee);
}

.session-time.selected {
    background: var(--primary);
    border-color: var(--primary);
    /* Match lagoon-btn.active ring so selected-state reads consistently. */
    box-shadow: 0 0 0 3px rgba(67, 97, 238, 0.25);
}

.session-time.full {
    opacity: 0.4;
    cursor: not-allowed;
    background: #2d2d2d;
    border-color: #5a2a2a;
}

.session-time .time {
    font-weight: 700;
    font-size: 16px;
}

.session-time .availability {
    font-size: 12px;
    color: #aaa;
    margin-top: 4px;
}

.session-time.selected .availability {
    color: rgba(255,255,255,0.8);
}

/* Right Panel */
.pos-right {
    width: 400px;
    /* flex-shrink:0 pins the right pane at 400px so .pos-left absorbs all
       viewport shrinkage. Pair with min-width:0 on .pos-left above. */
    flex-shrink: 0;
    min-width: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    background: #16213e;
}

/* Customer Section */
.customer-section {
    padding: 15px;
    border-bottom: 1px solid #0f3460;
}

.customer-search {
    display: flex;
    gap: 10px;
}

.customer-search input {
    flex: 1;
    padding: 10px 12px;
    background: #1a1a2e;
    border: 1px solid #0f3460;
    border-radius: 4px;
    color: #fff;
    font-size: 14px;
}

.customer-search input::placeholder {
    color: #666;
}

.btn-small {
    padding: 10px 15px;
    background: var(--primary);
    border: none;
    border-radius: 4px;
    color: #fff;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
}

.btn-small:hover {
    background: var(--primary-dark);
}

.customer-info {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 10px;
    padding: 10px;
    background: #1a1a2e;
    border-radius: 6px;
}

.customer-details {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.customer-details strong {
    font-size: 14px;
}

.customer-details span {
    font-size: 12px;
    color: #888;
}

.membership-badge {
    display: inline-block;
    padding: 2px 8px;
    background: linear-gradient(135deg, #ffd700, #ff9800);
    color: #000;
    border-radius: 10px;
    font-size: 10px;
    font-weight: 600;
    margin-top: 3px;
}

.btn-text {
    background: none;
    border: none;
    color: var(--primary);
    font-size: 13px;
    cursor: pointer;
}

.btn-text:hover {
    text-decoration: underline;
}

.customer-results {
    margin-top: 10px;
    max-height: 200px;
    overflow-y: auto;
    background: #1a1a2e;
    border-radius: 6px;
}

.customer-result {
    padding: 10px;
    border-bottom: 1px solid #0f3460;
    cursor: pointer;
    transition: all 0.2s;
}

.customer-result:hover {
    background: #0f3460;
}

.customer-result:last-child {
    border-bottom: none;
}

/* Cart Section */
.cart-section {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.cart-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 15px;
    background: #0f3460;
}

.cart-header span {
    font-weight: 600;
    font-size: 14px;
}

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

.empty-cart {
    text-align: center;
    color: #666;
    padding: 40px;
    font-size: 14px;
}

.cart-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px;
    background: #1a1a2e;
    border-radius: 6px;
    margin-bottom: 8px;
}

.cart-item-info {
    flex: 1;
}

.cart-item-name {
    font-weight: 500;
    font-size: 14px;
    margin-bottom: 3px;
}

.cart-item-details {
    font-size: 12px;
    color: #888;
}

.cart-item-qty {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 15px;
}

.qty-btn {
    width: 28px;
    height: 28px;
    background: #0f3460;
    border: none;
    border-radius: 4px;
    color: #fff;
    font-size: 16px;
    cursor: pointer;
    transition: all 0.2s;
}

.qty-btn:hover {
    background: var(--primary);
}

.cart-item-qty span {
    min-width: 20px;
    text-align: center;
    font-weight: 600;
}

.cart-item-price {
    font-weight: 600;
    font-size: 14px;
    color: var(--success);
    min-width: 70px;
    text-align: right;
}

.cart-item-remove {
    background: none;
    border: none;
    color: #666;
    cursor: pointer;
    padding: 5px;
    margin-left: 10px;
}

.cart-item-remove:hover {
    color: var(--danger);
}

/* Totals Section */
.totals-section {
    padding: 15px;
    background: #0f3460;
}

.total-row {
    display: flex;
    justify-content: space-between;
    padding: 8px 0;
    font-size: 14px;
    color: #aaa;
}

.total-grand {
    font-size: 20px;
    font-weight: 700;
    color: #fff;
    padding-top: 12px;
    margin-top: 8px;
    border-top: 1px solid #1a1a2e;
}

/* Action Buttons */
.action-buttons {
    padding: 15px;
    background: #16213e;
}

.secondary-actions {
    display: grid;
    /* 2 columns is the right density for the 320-400px right pane:
       7 buttons × 2 cols = 4 rows (last row has 1 button). Each button
       is ~180px wide at the 400px pane — comfortable for "Tax Exempt"
       / "Find Sale" labels on one line. Earlier 4-column layout was a
       relic from a wider pane and made buttons cramped at every size. */
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    margin-bottom: 10px;
}
.secondary-actions > .btn-secondary {
    min-width: 0;
    /* Truncate with ellipsis if a label is ever too long — better than
       growing the button vertically. */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.btn-secondary {
    padding: 12px;
    background: #1a1a2e;
    border: 1px solid #0f3460;
    border-radius: 6px;
    color: #fff;
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
}

.btn-secondary:hover {
    background: #0f3460;
}

.primary-actions {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 10px;
}
/* Same min-width:0 guard as .secondary-actions so the Cash / Card / COMP
   buttons can shrink (rather than force the parent wider) when the pane
   is narrow. */
.primary-actions > .btn-pay { min-width: 0; }

.btn-pay {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 5px;
    padding: 20px;
    border: none;
    border-radius: 8px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
}

.btn-pay.cash {
    background: linear-gradient(135deg, #4CAF50, #2e7d32);
    color: #fff;
}

.btn-pay.card {
    background: linear-gradient(135deg, #2196F3, #1565c0);
    color: #fff;
}

.btn-pay:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.3);
}

.pay-icon {
    font-size: 24px;
}

/* Modals */
.modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.7);
    z-index: 1000;
    align-items: center;
    justify-content: center;
}

.modal.active {
    display: flex;
}

.modal-content {
    background: #16213e;
    border-radius: 12px;
    width: 90%;
    max-width: 500px;
    max-height: 90vh;
    overflow-y: auto;
}

.modal-content.modal-small {
    max-width: 400px;
}

.modal-content.modal-large {
    max-width: 600px;
}

.modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px;
    border-bottom: 1px solid #0f3460;
}

.modal-header h2 {
    font-size: 18px;
    font-weight: 600;
}

.modal-close {
    background: none;
    border: none;
    color: #888;
    font-size: 24px;
    cursor: pointer;
}

.modal-close:hover {
    color: #fff;
}

.modal-body {
    padding: 20px;
}

.modal-footer {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    padding: 20px;
    border-top: 1px solid #0f3460;
}

.btn-primary {
    padding: 12px 24px;
    background: var(--primary);
    border: none;
    border-radius: 6px;
    color: #fff;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
}

.btn-primary:hover {
    background: var(--primary-dark);
}

/* Form Elements */
.form-group {
    margin-bottom: 15px;
}

.form-group label {
    display: block;
    margin-bottom: 5px;
    font-size: 13px;
    color: #aaa;
}

.form-group input,
.form-group select {
    width: 100%;
    padding: 10px 12px;
    background: #1a1a2e;
    border: 1px solid #0f3460;
    border-radius: 4px;
    color: #fff;
    font-size: 14px;
}

.form-group input:focus,
.form-group select:focus {
    outline: none;
    border-color: var(--primary);
}

.form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 15px;
}

/* Payment Modal Specific */
.payment-amount {
    text-align: center;
    padding: 20px;
    background: #1a1a2e;
    border-radius: 8px;
    margin-bottom: 20px;
}

.payment-amount span:first-child {
    display: block;
    font-size: 14px;
    color: #888;
    margin-bottom: 5px;
}

.payment-amount .amount {
    font-size: 36px;
    font-weight: 700;
    color: var(--success);
}

.quick-cash-buttons {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
    margin-top: 15px;
}

.quick-cash-buttons button {
    padding: 12px;
    background: #1a1a2e;
    border: 1px solid #0f3460;
    border-radius: 6px;
    color: #fff;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
}

.quick-cash-buttons button:hover {
    background: #0f3460;
}

.change-due {
    display: flex;
    justify-content: space-between;
    padding: 15px;
    background: var(--success);
    border-radius: 8px;
    margin-top: 20px;
    font-size: 18px;
    font-weight: 600;
}

.card-terminal-status {
    text-align: center;
    padding: 30px;
}

.terminal-icon {
    margin-bottom: 15px;
    color: var(--primary);
}

.terminal-waiting {
    color: #888;
    font-size: 14px;
    animation: pulse 2s infinite;
}

@keyframes pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}

/* Discount Modal */
.discount-type-toggle {
    display: flex;
    gap: 10px;
    margin-bottom: 20px;
}

.toggle-btn {
    flex: 1;
    padding: 12px;
    background: #1a1a2e;
    border: 1px solid #0f3460;
    border-radius: 6px;
    color: #fff;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.2s;
}

.toggle-btn.active {
    background: var(--primary);
    border-color: var(--primary);
}

/* Tip Modal */
.tip-buttons {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
}

.tip-btn {
    padding: 20px;
    background: #1a1a2e;
    border: 1px solid #0f3460;
    border-radius: 8px;
    color: #fff;
    font-size: 18px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
}

.tip-btn:hover {
    background: var(--warning);
    border-color: var(--warning);
}

/* Receipt Modal */
.receipt-success {
    text-align: center;
    padding: 30px;
}

.success-icon {
    width: 60px;
    height: 60px;
    background: var(--success);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 30px;
    margin: 0 auto 15px;
}

.receipt-success h3 {
    font-size: 20px;
    margin-bottom: 5px;
}

.receipt-options {
    display: flex;
    justify-content: center;
    gap: 15px;
    margin-top: 20px;
}

.receipt-options button {
    display: flex;
    align-items: center;
    gap: 8px;
}

/* Parked Sales */
.parked-sales-list {
    max-height: 400px;
    overflow-y: auto;
}

.parked-sale-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px;
    background: #1a1a2e;
    border-radius: 8px;
    margin-bottom: 10px;
    cursor: pointer;
    transition: all 0.2s;
}

.parked-sale-item:hover {
    background: #0f3460;
}

.parked-sale-info h4 {
    font-size: 14px;
    margin-bottom: 5px;
}

.parked-sale-info p {
    font-size: 12px;
    color: #888;
}

.parked-sale-total {
    font-size: 16px;
    font-weight: 600;
    color: var(--success);
}

.empty-message {
    text-align: center;
    color: #666;
    padding: 40px;
}

/* Scrollbar */
::-webkit-scrollbar {
    width: 6px;
}

::-webkit-scrollbar-track {
    background: #1a1a2e;
}

::-webkit-scrollbar-thumb {
    background: #0f3460;
    border-radius: 3px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--primary);
}

/* Responsive */
@media (max-width: 1024px) {
    .pos-main {
        flex-direction: column;
    }
    .pos-left {
        flex: none;
        height: 50%;
    }
    .pos-right {
        width: 100%;
        flex: 1;
        flex-shrink: 1;
    }
}