/* ==========================================================================
   Kasir POS — Cashier terminal
   A full-height, three-pane till: category rail, product grid, cart.
   Built for touch first, with keyboard shortcuts for speed.
   ========================================================================== */

.pos {
    height: 100vh;
    height: 100dvh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background: var(--bg);
}

/* --- Terminal header ----------------------------------------------------- */

.pos-top {
    height: 62px;
    flex: 0 0 62px;
    display: flex; align-items: center; gap: 14px;
    padding: 0 18px;
    background: var(--bg-elevated);
    border-bottom: 1px solid var(--border);
    z-index: 20;
}

.pos-top__store { display: flex; align-items: center; gap: 11px; min-width: 0; }
.pos-top__name { font-weight: 660; font-size: 14.5px; letter-spacing: -.01em; }
.pos-top__meta { font-size: 11.5px; color: var(--text-subtle); }

.pos-clock {
    font-variant-numeric: tabular-nums;
    font-size: 13px; font-weight: 600;
    color: var(--text-muted);
    padding: 5px 11px;
    background: var(--bg-sunken);
    border-radius: var(--r-sm);
}

.pos-shift-chip {
    display: flex; align-items: center; gap: 8px;
    padding: 5px 12px 5px 10px;
    background: var(--ok-50);
    color: var(--ok-700);
    border-radius: var(--r-full);
    font-size: 12px; font-weight: 600;
}

/* --- Body ---------------------------------------------------------------- */

.pos-body { flex: 1; display: flex; min-height: 0; }

/* Category rail */
.pos-rail {
    width: 132px; flex: 0 0 132px;
    background: var(--bg-elevated);
    border-right: 1px solid var(--border);
    overflow-y: auto;
    padding: 10px 8px;
}

.pos-cat {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
    width: 100%; padding: 13px 8px;
    margin-bottom: 6px;
    border: 1px solid transparent;
    border-radius: var(--r-md);
    background: transparent;
    color: var(--text-muted);
    font-size: 12px; font-weight: 580;
    cursor: pointer;
    text-align: center;
    transition: background .13s ease, color .13s ease, border-color .13s ease;
}
.pos-cat:hover { background: var(--surface-hover); color: var(--text); }
.pos-cat.is-active { background: var(--brand-600); color: #fff; border-color: var(--brand-600); box-shadow: var(--sh-brand); }

.pos-cat__swatch { width: 11px; height: 11px; border-radius: 50%; }
.pos-cat.is-active .pos-cat__swatch { background: rgba(255,255,255,.85) !important; }
.pos-cat__count { font-size: 10.5px; opacity: .7; }

/* Product area */
.pos-catalogue { flex: 1; display: flex; flex-direction: column; min-width: 0; }

.pos-search {
    padding: 12px 16px;
    background: var(--bg-elevated);
    border-bottom: 1px solid var(--border);
    display: flex; gap: 10px; align-items: center;
}

/* The scan field is the primary input — a hardware scanner types into it
   and submits with Enter, so it keeps focus whenever nothing else needs it. */
.pos-scan {
    position: relative;
    flex: 1;
}
.pos-scan .input {
    padding-left: 40px;
    height: 42px;
    font-size: 14.5px;
    border-radius: var(--r-md);
}
/* Both decorations sit on top of the field, so they must be transparent to
   the pointer. Without this a tap on the icon or the F2 badge lands on the
   decoration instead of the input — and on a touch screen the on-screen
   keyboard then never opens. */
.pos-scan__icon {
    position: absolute; left: 13px; top: 50%;
    transform: translateY(-50%);
    color: var(--brand-600);
    pointer-events: none;
}
.pos-scan__hint {
    position: absolute; right: 12px; top: 50%;
    transform: translateY(-50%);
    pointer-events: none;
}

.pos-grid {
    flex: 1;
    overflow-y: auto;
    padding: 14px 16px 20px;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(158px, 1fr));
    gap: 11px;
    align-content: start;
}

/* Product tiles sit proud of the grid: a soft wash of the category colour
   fading down into the surface, a hairline highlight along the top edge,
   and a layered shadow beneath. The colour variables are set inline per
   card by pos.js from the category's own hex value. */
.pos-item {
    position: relative;
    display: flex; flex-direction: column;
    background:
        linear-gradient(180deg, var(--cat-soft, transparent) 0%, transparent 46%),
        var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    padding: 13px 12px 12px;
    cursor: pointer;
    text-align: left;
    overflow: hidden;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .9),
        inset 0 -1px 0 rgba(15, 23, 42, .04),
        0 1px 2px rgba(15, 23, 42, .06),
        0 10px 20px -10px rgba(15, 23, 42, .28);
    transition: transform .16s cubic-bezier(.16, 1, .3, 1),
                box-shadow .16s ease,
                border-color .16s ease;
}

.pos-item:hover {
    transform: translateY(-3px);
    border-color: var(--cat-line, var(--brand-400));
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .9),
        0 2px 4px rgba(15, 23, 42, .06),
        0 18px 30px -12px var(--cat-glow, rgba(15, 23, 42, .3));
}

.pos-item:active { transform: translateY(0) scale(.982); }
.pos-item:focus-visible { outline: none; box-shadow: var(--ring); }

/* Dark mode gets a faint top highlight instead of a white one, otherwise
   the tiles look like cut-outs. */
[data-theme="dark"] .pos-item {
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .07),
        0 1px 2px rgba(0, 0, 0, .4),
        0 8px 20px -10px rgba(0, 0, 0, .6);
}
[data-theme="dark"] .pos-item:hover {
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .1),
        0 2px 6px rgba(0, 0, 0, .45),
        0 20px 34px -14px var(--cat-glow, rgba(0, 0, 0, .7));
}

/* Category colour as a top accent, fading out to the right. */
.pos-item__accent {
    position: absolute; inset: 0 0 auto 0; height: 3px;
    opacity: .9;
}

.pos-item__name {
    font-size: 13px; font-weight: 600; line-height: 1.35;
    margin-top: 4px;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
    overflow: hidden;
    min-height: 35px;
}
.pos-item__price { font-size: 14.5px; font-weight: 680; margin-top: 8px; font-variant-numeric: tabular-nums; }
.pos-item__meta { font-size: 11px; color: var(--text-subtle); margin-top: 3px; display: flex; justify-content: space-between; gap: 6px; }

.pos-item.is-out { opacity: .5; cursor: not-allowed; }
.pos-item.is-out:hover { border-color: var(--border); box-shadow: none; }

.pos-item__flag {
    position: absolute; top: 9px; right: 9px;
    font-size: 10px; font-weight: 650;
    padding: 1px 6px; border-radius: var(--r-full);
}
.pos-item__flag--low { background: var(--warn-50); color: var(--warn-700); }
.pos-item__flag--out { background: var(--bad-50); color: var(--bad-700); }
.pos-item__flag--fav { background: var(--brand-50); color: var(--brand-700); }

/* --- Cart ---------------------------------------------------------------- */

.pos-cart {
    width: 408px; flex: 0 0 408px;
    background: var(--bg-elevated);
    border-left: 1px solid var(--border);
    display: flex; flex-direction: column;
    min-height: 0;
}

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

.pos-cart__customer {
    padding: 9px 16px;
    border-bottom: 1px solid var(--border);
    background: var(--bg-sunken);
    display: flex; align-items: center; gap: 9px;
    font-size: 12.5px;
}

.pos-cart__lines { flex: 1; overflow-y: auto; padding: 8px 10px; min-height: 0; }

.cart-line {
    display: flex; gap: 10px;
    padding: 10px;
    border-radius: var(--r-md);
    transition: background .12s ease;
}
.cart-line:hover { background: var(--surface-hover); }
.cart-line + .cart-line { border-top: 1px solid var(--border); }

.cart-line__main { flex: 1; min-width: 0; }
.cart-line__name { font-size: 13px; font-weight: 600; line-height: 1.35; }
.cart-line__meta { font-size: 11.5px; color: var(--text-subtle); margin-top: 2px; font-variant-numeric: tabular-nums; }
.cart-line__total { font-size: 13.5px; font-weight: 660; text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.cart-line__discount { font-size: 11px; color: var(--ok-600); font-weight: 600; }

.qty-stepper {
    display: inline-flex; align-items: center;
    border: 1px solid var(--border-strong);
    border-radius: var(--r-sm);
    overflow: hidden;
    background: var(--surface);
}
.qty-stepper button {
    width: 27px; height: 27px;
    border: 0; background: transparent;
    color: var(--text-muted);
    font-size: 15px; font-weight: 600;
    cursor: pointer;
    display: flex; align-items: center; justify-content: center;
}
.qty-stepper button:hover { background: var(--surface-hover); color: var(--text); }
.qty-stepper input {
    width: 42px; height: 27px;
    border: 0; border-left: 1px solid var(--border); border-right: 1px solid var(--border);
    background: transparent;
    text-align: center;
    font-size: 12.5px; font-weight: 650;
    font-variant-numeric: tabular-nums;
    -moz-appearance: textfield;
}
.qty-stepper input::-webkit-outer-spin-button,
.qty-stepper input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.qty-stepper input:focus { outline: none; background: var(--brand-50); }

/* Totals block */
.pos-cart__totals { padding: 13px 16px; border-top: 1px solid var(--border); background: var(--bg-sunken); }

.total-row { display: flex; justify-content: space-between; align-items: center; font-size: 12.5px; padding: 3px 0; color: var(--text-muted); }
.total-row span:last-child { font-variant-numeric: tabular-nums; font-weight: 600; color: var(--text); }
.total-row--grand {
    margin-top: 9px; padding-top: 11px;
    border-top: 1px dashed var(--border-strong);
    font-size: 15px; font-weight: 650; color: var(--text);
}
.total-row--grand span:last-child { font-size: 22px; font-weight: 700; letter-spacing: -.025em; }
.total-row--discount span:last-child { color: var(--ok-600); }

.pos-cart__actions { padding: 12px 16px 16px; display: flex; flex-direction: column; gap: 9px; }
.pos-cart__actions-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }

/* --- Payment modal ------------------------------------------------------- */

/* The payment dialog is sized to clear a 768px-tall laptop screen without
   scrolling: a cashier taking money should never have to reach for a
   scrollbar. Every measurement below is part of that budget. */
#payment-modal .modal__panel { max-width: 920px; max-height: calc(100dvh - 16px); }
#payment-modal .keypad button { padding: 9px 0; font-size: 17px; }
#payment-modal .modal__head { padding: 14px 22px 10px; }
#payment-modal .modal__body { padding: 14px 22px; }
#payment-modal .modal__foot { padding: 11px 22px; }

.pay-grid { display: grid; grid-template-columns: 1.06fr 1fr; gap: 20px; }

.pay-due {
    background: linear-gradient(150deg, var(--brand-600), var(--brand-800));
    color: #fff;
    border-radius: var(--r-lg);
    padding: 13px 16px;
    box-shadow: var(--sh-brand);
}
.pay-due__label { font-size: 11px; text-transform: uppercase; letter-spacing: .08em; opacity: .8; font-weight: 600; }
.pay-due__value { font-size: 29px; font-weight: 720; letter-spacing: -.03em; margin-top: 3px; font-variant-numeric: tabular-nums; }
.pay-due__rest { font-size: 11.5px; opacity: .84; margin-top: 4px; }

/* Amount field with its own clear key, which keeps the keypad to four rows. */
.pay-amount-row { display: flex; gap: 8px; align-items: stretch; }

.pay-clear {
    flex: 0 0 54px;
    border: 1px solid var(--bad-200);
    border-radius: var(--r-md);
    background: var(--bad-50);
    color: var(--bad-600);
    font-size: 15px; font-weight: 680;
    cursor: pointer;
    transition: background .12s ease;
}
.pay-clear:hover { background: var(--bad-200); color: var(--bad-700); }

.pay-side { display: flex; flex-direction: column; }

/* Split payments add a row each; capping the list keeps the dialog inside
   the screen no matter how many tenders an operator stacks up. */
#payment-modal [data-tenders] { max-height: 108px; overflow-y: auto; }

.method-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 7px; }

.method {
    display: flex; flex-direction: column; align-items: center; gap: 5px;
    padding: 10px 6px;
    border: 1px solid var(--border-strong);
    border-radius: var(--r-md);
    background: var(--surface);
    font-size: 12px; font-weight: 590;
    color: var(--text-muted);
    cursor: pointer;
    transition: all .13s ease;
}
.method:hover { border-color: var(--brand-400); color: var(--text); }
.method.is-active { background: var(--brand-600); border-color: var(--brand-600); color: #fff; box-shadow: var(--sh-brand); }

/* Cash keypad */
.keypad { display: grid; grid-template-columns: repeat(3, 1fr); gap: 7px; }
.keypad button {
    padding: 12px 0;
    border: 1px solid var(--border-strong);
    border-radius: var(--r-md);
    background: var(--surface);
    font-size: 18px; font-weight: 620;
    font-variant-numeric: tabular-nums;
    cursor: pointer;
    transition: background .1s ease, transform .06s ease;
}
.keypad button:hover { background: var(--surface-hover); }
.keypad button:active { transform: scale(.95); }
.keypad button.is-wide { grid-column: span 2; }
.keypad button.is-clear { background: var(--bad-50); color: var(--bad-600); border-color: var(--bad-200); }

.quick-cash { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.quick-cash button {
    padding: 7px 4px;
    border: 1px solid var(--border-strong);
    border-radius: var(--r-sm);
    background: var(--bg-sunken);
    font-size: 12.5px; font-weight: 620;
    font-variant-numeric: tabular-nums;
    cursor: pointer;
}
.quick-cash button:hover { background: var(--brand-50); border-color: var(--brand-400); color: var(--brand-700); }

.pay-amount {
    flex: 1 1 auto;
    min-width: 0;
    padding: 10px 14px;
    border: 2px solid var(--brand-500);
    border-radius: var(--r-md);
    background: var(--surface);
    font-size: 23px; font-weight: 690;
    text-align: right;
    font-variant-numeric: tabular-nums;
    letter-spacing: -.02em;
}
.pay-amount:focus { outline: none; box-shadow: var(--ring); }

.change-box {
    padding: 11px 14px;
    border-radius: var(--r-md);
    background: var(--ok-50);
    border: 1px solid var(--ok-200);
    display: flex; justify-content: space-between; align-items: center;
}
.change-box--short { background: var(--bad-50); border-color: var(--bad-200); }
.change-box__label { font-size: 11.5px; font-weight: 620; color: var(--ok-700); text-transform: uppercase; letter-spacing: .06em; }
.change-box--short .change-box__label { color: var(--bad-700); }
.change-box__value { font-size: 21px; font-weight: 700; color: var(--ok-700); font-variant-numeric: tabular-nums; }
.change-box--short .change-box__value { color: var(--bad-700); }

/* Split payment rows */
.tender-row {
    display: flex; align-items: center; gap: 8px;
    padding: 8px 10px;
    background: var(--bg-sunken);
    border-radius: var(--r-sm);
    font-size: 12.5px;
}

/* --- Success screen ------------------------------------------------------ */

.done {
    text-align: center;
    padding: 12px 0 4px;
}
.done__check {
    width: 74px; height: 74px; margin: 0 auto 16px;
    border-radius: 50%;
    background: var(--ok-50);
    color: var(--ok-600);
    display: flex; align-items: center; justify-content: center;
    animation: pop-in .38s cubic-bezier(.16, 1, .3, 1);
}
@keyframes pop-in { from { transform: scale(.5); opacity: 0; } }

.done__change {
    margin: 18px 0;
    padding: 18px;
    background: var(--bg-sunken);
    border-radius: var(--r-lg);
}
.done__change-value { font-size: 32px; font-weight: 720; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }

/* --- Sign-in / shift screens --------------------------------------------- */

/* The sign-in screen is designed to sit inside one viewport with no page
   scrolling — an operator at a counter should never have to scroll to
   reach the keypad. Spacing below is deliberately tight for that reason. */
.pos-auth {
    min-height: 100vh;
    min-height: 100dvh;
    display: flex; align-items: center; justify-content: center;
    padding: 16px;
    background:
        radial-gradient(1100px 620px at 12% -8%, rgba(99, 102, 241, .16), transparent 60%),
        radial-gradient(900px 520px at 105% 110%, rgba(16, 185, 129, .12), transparent 55%),
        var(--bg);
}

.pos-auth__card {
    width: 100%; max-width: 900px;
    max-height: calc(100dvh - 32px);
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-2xl);
    box-shadow: var(--sh-xl);
    overflow: hidden;
    display: grid;
    grid-template-columns: 1.02fr 1fr;
}

.pos-auth__aside {
    padding: 30px 32px;
    background: linear-gradient(155deg, var(--brand-700), var(--brand-800) 55%, #1e1b4b);
    color: #fff;
    display: flex; flex-direction: column; justify-content: space-between; gap: 20px;
}
.pos-auth__aside h2 { font-size: 26px; letter-spacing: -.03em; }
.pos-auth__aside p { opacity: .78; font-size: 13.5px; margin-top: 9px; line-height: 1.6; }

/* Store name, given a restrained luxury treatment: wide tracking, small
   caps weight, and a hairline that fades out at both ends. */
.store-name {
    margin-top: 18px;
    font-size: 15px;
    font-weight: 500;
    letter-spacing: .24em;
    text-transform: uppercase;
    line-height: 1.5;
    color: rgba(255, 255, 255, .94);
}

.store-name__rule {
    display: block;
    width: 52px; height: 1px;
    margin: 13px auto 0;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .6), transparent);
}

.pos-auth__feature { display: flex; gap: 11px; align-items: flex-start; margin-top: 13px; font-size: 13px; }
.pos-auth__feature-icon {
    width: 30px; height: 30px; flex: 0 0 30px;
    border-radius: var(--r-sm);
    background: rgba(255,255,255,.14);
    display: flex; align-items: center; justify-content: center;
}

.pos-auth__form {
    padding: 28px 32px;
    /* Only engages on unusually short viewports; the layout is tuned so a
       normal screen never triggers it. */
    overflow-y: auto;
}

/* The lockup lives in the branded panel on wide screens; the copy inside
   the form only appears once that panel is dropped on small screens. */
.aldef-lockup--mobile { display: none; }

/* PIN keypad on the sign-in screen */
.pin-display {
    display: flex; justify-content: center; gap: 12px;
    margin: 14px 0 10px;
}
.pin-dot {
    width: 15px; height: 15px;
    border-radius: 50%;
    border: 2px solid var(--border-strong);
    transition: background .14s ease, border-color .14s ease, transform .14s ease;
}
.pin-dot.is-filled { background: var(--brand-600); border-color: var(--brand-600); transform: scale(1.14); }

/* Tightened rhythm so the whole card clears a laptop viewport. */
.pos-auth__form .divider { margin: 14px 0; }
.pos-auth__form .alert { margin-bottom: 12px; }
.pos-auth__aside .aldef-lockup { max-width: 168px; }

.operator-strip {
    display: flex; gap: 9px;
    overflow-x: auto;
    padding-bottom: 4px;
    /* "safe" keeps the first card reachable when the row does overflow;
       the plain value is the fallback for browsers without it. */
    justify-content: center;
    justify-content: safe center;
}

.operator {
    flex: 0 0 auto;
    display: flex; flex-direction: column; align-items: center; gap: 6px;
    padding: 10px 14px;
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    background: var(--surface);
    cursor: pointer;
    min-width: 90px;
    transition: all .13s ease;
}
.operator:hover { border-color: var(--brand-400); }
.operator.is-active { border-color: var(--brand-600); background: var(--brand-50); box-shadow: var(--sh-sm); }
.operator__name { font-size: 11.5px; font-weight: 620; text-align: center; line-height: 1.3; }

/* --- Responsive ---------------------------------------------------------- */

@media (max-width: 1180px) {
    .pos-cart { width: 350px; flex-basis: 350px; }
    .pos-grid { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
}

@media (max-width: 960px) {
    .pay-grid { grid-template-columns: 1fr; gap: 16px; }
    .pos-auth__card { grid-template-columns: 1fr; max-width: 460px; }
    .pos-auth__aside { display: none; }
    .aldef-lockup--mobile { display: block; margin-inline: auto; }
}

@media (max-width: 860px) {
    .pos-rail {
        width: 100%; flex: 0 0 auto;
        display: flex; gap: 7px;
        overflow-x: auto; overflow-y: hidden;
        border-right: 0; border-bottom: 1px solid var(--border);
        padding: 9px 12px;
    }
    .pos-cat { flex: 0 0 auto; flex-direction: row; padding: 8px 14px; margin-bottom: 0; white-space: nowrap; }

    .pos-body { flex-direction: column; }

    /* The cart becomes a slide-up sheet so the grid keeps full width. */
    .pos-cart {
        position: fixed; inset: auto 0 0 0;
        width: 100%; flex-basis: auto;
        height: 78dvh;
        border-left: 0;
        border-top: 1px solid var(--border);
        border-radius: var(--r-xl) var(--r-xl) 0 0;
        box-shadow: var(--sh-xl);
        transform: translateY(calc(100% - 66px));
        transition: transform .26s cubic-bezier(.4, 0, .2, 1);
        z-index: 50;
    }
    .pos-cart.is-open { transform: translateY(0); }

    .pos-cart__handle {
        display: flex !important;
        align-items: center; justify-content: space-between;
        padding: 14px 18px;
        cursor: pointer;
        border-bottom: 1px solid var(--border);
    }

    .pos-grid { padding-bottom: 88px; }
}

/* The drag handle only exists in the mobile sheet layout. */
.pos-cart__handle { display: none; }

@media (max-width: 560px) {
    .pos-top { padding: 0 12px; gap: 9px; }
    .pos-top__meta, .pos-clock { display: none; }
    .pos-grid { grid-template-columns: repeat(auto-fill, minmax(126px, 1fr)); gap: 9px; padding: 11px 12px 88px; }
    .keypad button { padding: 13px 0; font-size: 16px; }
    .pos-auth__form { padding: 28px 22px; }
}