/* ════════════════════════════════════════════════════════════════════════
   POS terminal — a dedicated commercial point-of-sale UI. Deliberately does
   not look like the admin panel: own top bar, image product grid, app canvas.
   ════════════════════════════════════════════════════════════════════════ */
[x-cloak] { display: none !important; }

/* Full-screen takeover: hide ALL panel chrome so only the terminal shows. */
body.fi-pos-active { overflow: hidden; }
body.fi-pos-active .fi-sidebar,
body.fi-pos-active .fi-topbar,
body.fi-pos-active .fi-header,
body.fi-pos-active .fi-breadcrumbs,
body.fi-pos-active .fi-page-header { display: none !important; }
body.fi-pos-active .fi-main-ctn,
body.fi-pos-active .fi-main { padding: 0 !important; max-width: 100% !important; }
body.fi-pos-active .fi-page { gap: 0 !important; padding: 0 !important; height: 100%; }
body.fi-pos-active .fi-pos-page { padding: 0 !important; }

:root {
    --pos-canvas: #eef0f4;
    --pos-surface: #ffffff;
    --pos-line: #e8eaee;
    --pos-ink: #1a1d23;
    --pos-muted: #8b90a0;
    --pos-accent: var(--primary-600, #ea580c);
    --pos-accent-soft: var(--primary-50, #fff5ee);
}
.dark {
    --pos-canvas: #0c0e13;
    --pos-surface: #15181f;
    --pos-line: rgb(255 255 255 / .07);
    --pos-ink: #f3f4f6;
    --pos-muted: #6b7280;
    --pos-accent-soft: rgb(234 88 12 / .14);
}

.pos {
    height: 100dvh; display: flex; flex-direction: column;
    background: var(--pos-canvas); color: var(--pos-ink);
    font-feature-settings: "tnum" 1; -webkit-font-smoothing: antialiased;
}

/* ── Top bar ─────────────────────────────────────────────────────────── */
.pos-topbar {
    display: flex; align-items: center; justify-content: space-between;
    height: 56px; padding: 0 1.1rem; background: var(--pos-surface);
    border-bottom: 1px solid var(--pos-line); flex: none;
}
.pos-brand { display: flex; align-items: center; gap: .65rem; }
.pos-brand img { height: 26px; width: auto; }
.pos-brand span { font-weight: 700; letter-spacing: -.01em; color: var(--pos-ink); }
.pos-topbar-meta { display: flex; align-items: center; gap: .6rem; }
.pos-chip {
    display: inline-flex; align-items: center; gap: .35rem; padding: .35rem .65rem;
    border-radius: 999px; font-size: .8rem; font-weight: 600; color: var(--pos-ink);
    background: var(--pos-canvas);
}
.pos-clock { font-variant-numeric: tabular-nums; font-weight: 700; font-size: .9rem; color: var(--pos-muted); padding: 0 .35rem; }
.pos-exit {
    display: grid; place-items: center; width: 38px; height: 38px; border-radius: 10px;
    color: var(--pos-muted); background: var(--pos-canvas);
}
.pos-exit:hover { color: var(--danger-600, #dc2626); background: var(--danger-50, #fef2f2); }

/* ── Body grid ───────────────────────────────────────────────────────── */
.pos-body { flex: 1; display: grid; grid-template-columns: 1fr 420px; min-height: 0; }

/* ── Catalogue ───────────────────────────────────────────────────────── */
.pos-catalogue { display: flex; flex-direction: column; min-height: 0; padding: 1rem 1.1rem; gap: 1rem; }
.pos-toolbar { display: flex; gap: .85rem; align-items: stretch; }
.pos-searchbar {
    flex: 1; display: flex; align-items: center; gap: .65rem; padding: 0 1.1rem; height: 52px;
    border-radius: 14px; background: var(--pos-surface); box-shadow: 0 1px 2px rgb(0 0 0 / .04);
}
.pos-search-icon { color: var(--pos-muted); }
.pos-search-input { flex: 1; background: transparent; border: 0; outline: 0; font-size: 1rem; color: var(--pos-ink); }
.pos-search-input::placeholder { color: var(--pos-muted); }
.pos-stats { display: flex; gap: .6rem; }
.pos-stat {
    display: flex; flex-direction: column; justify-content: center; padding: 0 1rem; min-width: 92px;
    border-radius: 14px; background: var(--pos-surface); box-shadow: 0 1px 2px rgb(0 0 0 / .04);
}
.pos-stat span { font-size: .68rem; font-weight: 600; color: var(--pos-muted); text-transform: uppercase; letter-spacing: .03em; }
.pos-stat strong { font-size: 1rem; font-weight: 700; color: var(--pos-ink); }

.pos-grid {
    flex: 1; overflow-y: auto; display: grid; gap: .75rem; align-content: start;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); padding-right: .25rem;
}
.pos-card {
    display: flex; flex-direction: column; text-align: start; overflow: hidden;
    border-radius: 16px; background: var(--pos-surface); cursor: pointer;
    box-shadow: 0 1px 2px rgb(0 0 0 / .05); border: 1px solid transparent;
    transition: transform .12s ease, box-shadow .15s ease, border-color .15s ease;
}
.pos-card:hover { transform: translateY(-3px); box-shadow: 0 12px 24px -12px rgb(0 0 0 / .28); border-color: var(--pos-accent); }
.pos-card:active { transform: translateY(-1px); }
.pos-card-img {
    position: relative; aspect-ratio: 4 / 3; display: grid; place-items: center; overflow: hidden;
    background: linear-gradient(135deg, var(--pos-canvas), var(--pos-surface));
}
.pos-card-img img { width: 100%; height: 100%; object-fit: cover; }
.pos-card-ph { font-size: 2rem; font-weight: 800; color: var(--pos-muted); opacity: .5; }
.pos-card-tag {
    position: absolute; top: .5rem; right: .5rem; padding: .15rem .5rem; border-radius: 999px;
    font-size: .68rem; font-weight: 700; background: rgb(255 255 255 / .9); color: var(--pos-ink); backdrop-filter: blur(4px);
}
.pos-card-tag.is-out { background: var(--danger-500, #ef4444); color: #fff; }
.pos-card-body { display: flex; flex-direction: column; gap: .15rem; padding: .6rem .7rem .7rem; }
.pos-card-name { font-weight: 600; font-size: .82rem; line-height: 1.25; color: var(--pos-ink);
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.pos-card-price { font-weight: 800; font-size: .92rem; color: var(--pos-accent); }

.pos-empty, .pos-lines-empty { grid-column: 1 / -1; text-align: center; color: var(--pos-muted); padding: 3rem 1rem; }

/* ── Ticket ──────────────────────────────────────────────────────────── */
.pos-ticket {
    display: flex; flex-direction: column; min-height: 0;
    background: var(--pos-surface); border-left: 1px solid var(--pos-line);
}
.pos-ticket-head { display: flex; align-items: center; justify-content: space-between; padding: 1.1rem 1.2rem .7rem; }
.pos-ticket-title { font-weight: 800; font-size: 1.05rem; letter-spacing: -.01em; color: var(--pos-ink); }
.pos-ticket-sub { font-size: .75rem; color: var(--pos-muted); }
.pos-ticket-actions { display: flex; align-items: center; gap: .4rem; }
.pos-icon-btn { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 9px; color: var(--pos-muted); }
.pos-icon-btn:hover { background: var(--danger-50, #fef2f2); color: var(--danger-600, #dc2626); }
.pos-held-badge {
    display: inline-flex; align-items: center; gap: .25rem; padding: .3rem .6rem; border-radius: 999px;
    font-weight: 700; font-size: .78rem; color: var(--warning-700, #b45309); background: var(--warning-50, #fffbeb);
}

/* Customer */
.pos-customer { padding: 0 1.2rem .6rem; }
.pos-customer-add {
    width: 100%; display: flex; align-items: center; justify-content: center; gap: .4rem; padding: .65rem;
    border-radius: 12px; font-size: .82rem; font-weight: 500; color: var(--pos-muted);
    border: 1.5px dashed var(--pos-line);
}
.pos-customer-add:hover { color: var(--pos-accent); border-color: var(--pos-accent); }
.pos-customer-chip {
    display: flex; align-items: center; gap: .45rem; padding: .55rem .75rem; border-radius: 12px;
    background: var(--pos-accent-soft); color: var(--pos-accent); font-size: .85rem; font-weight: 600;
}
.pos-customer-chip button { margin-left: auto; }
.pos-customer-search { margin-top: .5rem; }
.pos-customer-search ul { margin-top: .25rem; max-height: 320px; overflow-y: auto; }
.pos-customer-search li button { width: 100%; display: flex; flex-direction: column; text-align: start; padding: .5rem .65rem; border-radius: 10px; font-size: .85rem; }
.pos-customer-search li button:hover,
.pos-customer-search li button.is-active { background: var(--pos-accent-soft); }
.pos-customer-search li button.is-active span:first-child { color: var(--pos-accent); font-weight: 600; }
.pos-customer-search li button small { font-size: .72rem; color: var(--pos-muted); font-family: ui-monospace, monospace; }
.pos-customer-none { padding: .6rem .65rem; font-size: .82rem; color: var(--pos-muted); }

/* Lines */
.pos-lines { flex: 1; overflow-y: auto; padding: .25rem 1.2rem; display: flex; flex-direction: column; gap: .5rem; }
.pos-line { display: flex; gap: .65rem; padding: .55rem; border-radius: 14px; background: var(--pos-canvas); }
.pos-line-thumb {
    flex: none; width: 44px; height: 44px; border-radius: 10px; overflow: hidden; display: grid; place-items: center;
    background: var(--pos-surface); font-weight: 800; color: var(--pos-muted);
}
.pos-line-thumb img { width: 100%; height: 100%; object-fit: cover; }
.pos-line-info { flex: 1; min-width: 0; }
.pos-line-top { display: flex; align-items: baseline; justify-content: space-between; gap: .5rem; }
.pos-line-name { font-weight: 600; font-size: .85rem; color: var(--pos-ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pos-line-total { font-weight: 800; font-size: .9rem; color: var(--pos-ink); white-space: nowrap; }
.pos-line-controls { display: flex; align-items: center; gap: .5rem; margin-top: .4rem; }
.pos-stepper { display: flex; align-items: center; gap: .1rem; }
.pos-stepper button { width: 1.6rem; height: 1.6rem; border-radius: 8px; font-weight: 700; line-height: 1; background: var(--pos-surface); color: var(--pos-ink); box-shadow: 0 1px 1px rgb(0 0 0 / .05); }
.pos-stepper button:hover { background: var(--pos-accent); color: #fff; }
.pos-stepper span { min-width: 1.8rem; text-align: center; font-weight: 700; font-size: .82rem; }
.pos-line-unit { font-size: .72rem; color: var(--pos-muted); }
.pos-disc { display: flex; align-items: center; gap: .05rem; padding: .15rem .4rem; border-radius: 8px; background: var(--pos-surface); margin-left: auto; }
.pos-disc input { width: 2rem; background: transparent; border: 0; outline: 0; text-align: right; font-size: .72rem; font-weight: 700; color: var(--pos-ink); }
.pos-disc span { font-size: .68rem; color: var(--pos-muted); }
.pos-line-x { color: var(--pos-muted); padding: .15rem; }
.pos-line-x:hover { color: var(--danger-500, #ef4444); }

/* Summary */
.pos-summary { padding: 1rem 1.2rem calc(2.25rem + env(safe-area-inset-bottom, 0px)); border-top: 1px solid var(--pos-line); }
.pos-summary-rows { display: flex; flex-direction: column; gap: .15rem; }
.pos-summary-rows > div { display: flex; justify-content: space-between; font-size: .85rem; color: var(--pos-muted); }
.pos-summary-rows .is-discount { color: var(--success-600, #16a34a); }
.pos-grand { display: flex; align-items: baseline; justify-content: space-between; margin: .55rem 0 .9rem; }
.pos-grand span:first-child { font-weight: 700; font-size: 1rem; color: var(--pos-ink); }
.pos-grand span:last-child { font-weight: 800; font-size: 1.7rem; letter-spacing: -.02em; color: var(--pos-ink); }

.pos-actions { display: flex; gap: .6rem; }
.pos-btn-hold {
    display: flex; align-items: center; gap: .35rem; padding: .85rem 1.1rem; border-radius: 14px;
    font-weight: 700; font-size: .85rem; color: var(--pos-ink); background: var(--pos-canvas);
}
.pos-btn-hold:hover:not(:disabled) { background: var(--pos-line); }
.pos-btn-hold:disabled, .pos-btn-charge:disabled { opacity: .4; cursor: not-allowed; }
.pos-btn-charge {
    flex: 1; display: flex; align-items: center; gap: .6rem; padding: .85rem 1.25rem; border-radius: 14px;
    color: #fff; background: var(--pos-accent); box-shadow: 0 10px 22px -10px var(--pos-accent);
    transition: filter .12s, transform .08s;
}
.pos-btn-charge:hover:not(:disabled) { filter: brightness(1.07); }
.pos-btn-charge:active:not(:disabled) { transform: scale(.99); }
.pos-charge-lbl { font-weight: 700; white-space: nowrap; }
.pos-charge-lbl small { opacity: .85; font-weight: 600; }
.pos-charge-amt { margin-left: auto; font-weight: 800; font-size: 1.1rem; white-space: nowrap; }

/* ── Open register ───────────────────────────────────────────────────── */
.pos-open { height: 100dvh; display: grid; place-items: center; background: var(--pos-canvas); }
.pos-open-card { width: 100%; max-width: 380px; padding: 2.25rem; text-align: center; border-radius: 22px; background: var(--pos-surface); box-shadow: 0 24px 60px -20px rgb(0 0 0 / .25); }
.pos-open-logo { height: 44px; margin: 0 auto 1.25rem; }
.pos-open-card h2 { font-size: 1.2rem; font-weight: 800; color: var(--pos-ink); }
.pos-open-card p { font-size: .85rem; color: var(--pos-muted); margin-bottom: 1.25rem; }
.pos-field-label { display: block; text-align: start; font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; color: var(--pos-muted); margin: .75rem 0 .35rem; }
.pos-open-btn { width: 100%; margin-top: 1.25rem; }

/* ── Inputs / buttons ────────────────────────────────────────────────── */
.pos-input { width: 100%; padding: .7rem .85rem; border-radius: 12px; font-size: .92rem; background: var(--pos-canvas); color: var(--pos-ink); border: 1px solid transparent; outline: 0; }
.pos-input:focus { border-color: var(--pos-accent); }
.pos-btn-primary { padding: .8rem 1rem; border-radius: 12px; font-weight: 700; color: #fff; background: var(--pos-accent); }
.pos-btn-primary:hover { filter: brightness(1.07); }

/* ── Overlays / modal ────────────────────────────────────────────────── */
.pos-overlay { position: fixed; inset: 0; z-index: 50; display: grid; place-items: center; padding: 1rem; background: rgb(10 12 18 / .55); backdrop-filter: blur(2px); }
.pos-modal { width: 100%; max-width: 440px; padding: 1.4rem; border-radius: 22px; background: var(--pos-surface); box-shadow: 0 30px 70px -20px rgb(0 0 0 / .5); }
.pos-modal-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1.1rem; }
.pos-modal-head h3 { font-size: 1.15rem; font-weight: 800; color: var(--pos-ink); }
.pos-modal-head button { color: var(--pos-muted); }
.pos-due { display: flex; align-items: baseline; justify-content: space-between; padding: 1rem 1.1rem; border-radius: 16px; background: var(--pos-accent-soft); margin-bottom: 1.1rem; }
.pos-due span { font-size: .8rem; font-weight: 600; color: var(--pos-accent); }
.pos-due strong { font-size: 1.6rem; font-weight: 800; color: var(--pos-accent); }
.pos-denoms { display: grid; grid-template-columns: repeat(3, 1fr); gap: .5rem; margin-bottom: .85rem; }
.pos-denom { padding: .7rem .35rem; border-radius: 12px; font-weight: 700; font-size: .82rem; background: var(--pos-canvas); color: var(--pos-ink); white-space: nowrap; }
.pos-denom:hover { background: var(--pos-line); }
.pos-denom.is-exact { background: var(--success-50, #f0fdf4); color: var(--success-700, #15803d); }
.dark .pos-denom.is-exact { background: rgb(34 197 94 / .14); color: var(--success-300, #86efac); }
.pos-denom.is-nav { background: var(--pos-accent-soft); color: var(--pos-accent); box-shadow: inset 0 0 0 2px var(--pos-accent); transform: scale(1.05); }
.pos-confirm.is-nav { outline: 3px solid #fff; outline-offset: -4px; box-shadow: 0 0 0 4px var(--pos-accent); }
.pos-kbd-hint { text-align: center; font-size: .72rem; color: var(--pos-muted); margin: -.35rem 0 .85rem; }
.pos-methods { display: grid; grid-template-columns: repeat(2, 1fr); gap: .5rem; margin-bottom: .9rem; }
.pos-method { padding: .75rem; border-radius: 12px; font-weight: 600; font-size: .85rem; background: var(--pos-canvas); color: var(--pos-ink); border: 2px solid transparent; }
.pos-method.is-active { background: var(--pos-accent-soft); color: var(--pos-accent); border-color: var(--pos-accent); }
.pos-method.is-nav { box-shadow: 0 0 0 3px var(--pos-accent); }
.pos-amount-row { display: flex; gap: .5rem; margin-bottom: .9rem; }
.pos-amount-field { flex: 1; display: flex; align-items: center; gap: .5rem; padding: .65rem .9rem; border-radius: 12px; background: var(--pos-canvas); border: 2px solid transparent; }
.pos-amount-field:focus-within { border-color: var(--pos-accent); }
.pos-amount-field span { color: var(--pos-muted); font-weight: 700; }
.pos-amount-input { flex: 1; background: transparent; border: 0; outline: 0; text-align: right; font-size: 1.2rem; font-weight: 800; color: var(--pos-ink); }
.pos-pay-list { display: flex; flex-direction: column; gap: .4rem; margin-bottom: .9rem; }
.pos-pay-list li { display: flex; align-items: center; gap: .5rem; padding: .5rem .75rem; border-radius: 11px; background: var(--pos-canvas); font-size: .85rem; }
.pos-pay-list li span:nth-child(2) { margin-left: auto; font-weight: 700; }
.pos-pay-list li button { color: var(--pos-muted); }
.pos-pay-list li button:hover { color: var(--danger-500, #ef4444); }
.pos-pay-summary { display: flex; justify-content: space-between; padding: .4rem 0 1rem; }
.pos-pay-summary div { display: flex; flex-direction: column; }
.pos-pay-summary span { font-size: .72rem; color: var(--pos-muted); }
.pos-pay-summary strong { font-size: 1.1rem; font-weight: 800; color: var(--pos-ink); }
.pos-pay-summary .is-change strong { color: var(--success-600, #16a34a); }
.pos-confirm { width: 100%; padding: 1rem; font-size: 1.02rem; }

/* Held list */
.pos-held-list { display: flex; flex-direction: column; gap: .45rem; max-height: 62vh; overflow-y: auto; }
.pos-held-item { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: .75rem; padding: .8rem .9rem; border-radius: 14px; text-align: start; background: var(--pos-canvas); border: 1px solid transparent; }
.pos-held-item:hover { border-color: var(--pos-accent); }
.pos-held-ref { display: block; font-weight: 700; font-size: .88rem; color: var(--pos-ink); }
.pos-held-meta { display: block; font-size: .72rem; color: var(--pos-muted); }
.pos-held-total { font-weight: 800; color: var(--pos-accent); }

/* ── Responsive ──────────────────────────────────────────────────────── */
@media (max-width: 1024px) {
    .pos-body { grid-template-columns: 1fr; }
    .pos-ticket { border-left: 0; border-top: 1px solid var(--pos-line); }
    body.fi-pos-active { overflow: auto; }
    .pos { height: auto; min-height: 100dvh; }
}