/* ══════════════════════════════════════════════════════════════════════════
   pos_ui.css — styling for the shared toast and dialogs in pos_ui.js.
   Load the pair together; neither is useful alone.
   ══════════════════════════════════════════════════════════════════════════ */

/* ══ TOAST ══════════════════════════════════════════════════════════════════
   Drops from the top centre. The old toast was fixed at top:20px right:20px,
   directly over the topbar's bell and theme switcher; the topbar is 64px tall,
   so this starts below it and covers nothing.

   One element, reused. A stack of them would need collision logic to say one
   sentence, and at a counter you only ever care about the newest. */
.pos-toast {
    position: fixed;
    top: 76px;
    left: 50%;
    z-index: 12500;
    display: flex;
    align-items: center;
    gap: 11px;
    max-width: min(520px, calc(100vw - 40px));
    padding: 13px 20px 13px 14px;
    border-radius: 15px;
    background: rgba(255, 255, 255, .92);
    backdrop-filter: blur(14px) saturate(160%);
    -webkit-backdrop-filter: blur(14px) saturate(160%);
    border: 1px solid rgba(255, 255, 255, .9);
    box-shadow: 0 2px 6px rgba(15, 42, 82, .10),
                0 18px 40px -12px rgba(15, 42, 82, .32);
    font-family: var(--font-ui, inherit);
    font-size: 14px;
    font-weight: 650;
    color: #143a6b;
    overflow: hidden;
    /* Parked ABOVE its resting place and invisible. transform carries both the
       slide and the centring, so the two never fight over `left`. */
    transform: translate(-50%, -22px) scale(.97);
    opacity: 0;
    pointer-events: none;
    transition: transform .34s cubic-bezier(.22, .8, .28, 1),
                opacity .26s ease;
}
.pos-toast.show { transform: translate(-50%, 0) scale(1); opacity: 1; }

.pos-toast-ico {
    flex: 0 0 auto;
    width: 26px; height: 26px;
    display: flex; align-items: center; justify-content: center;
    border-radius: 50%;
    background: linear-gradient(160deg, #34d399, #059669);
    color: #fff;
    box-shadow: 0 3px 8px rgba(5, 150, 105, .35);
}
.pos-toast-ico svg { width: 14px; height: 14px; display: block; }
.pos-toast-msg { line-height: 1.35; }

/* Says how long it has left, so it never just disappears mid-read. Driven by an
   animation rather than a transition — it has to restart on every toast, and
   re-adding .show is what replays it. */
.pos-toast-bar {
    position: absolute;
    left: 0; bottom: 0;
    height: 2px;
    width: 100%;
    background: linear-gradient(90deg, #34d399, #059669);
    transform-origin: left center;
    transform: scaleX(0);
}
.pos-toast.show .pos-toast-bar { animation: posToastBar 3.2s linear forwards; }
@keyframes posToastBar { from { transform: scaleX(1); } to { transform: scaleX(0); } }

/* The failure colourway. Same shape — only the mark changes, because the words
   are already doing the explaining. */
.pos-toast--bad { color: #7f1d1d; }
.pos-toast--bad .pos-toast-ico { background: linear-gradient(160deg, #f87171, #dc2626);
                                 box-shadow: 0 3px 8px rgba(220, 38, 38, .35); }
.pos-toast--bad .pos-toast-bar { background: linear-gradient(90deg, #f87171, #dc2626); }

/* ══ posConfirm() DIALOG ════════════════════════════════════════════════════
   Centred, which is the whole point — the browser's own confirm() is pinned to
   the top edge of the window, far from where you are looking. */
.pcf-overlay {
    position: fixed;
    inset: 0;
    z-index: 13000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    background: rgba(15, 23, 42, .42);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    opacity: 0;
    transition: opacity .2s ease;
}
.pcf-overlay.open { opacity: 1; }

.pcf-box {
    width: 100%;
    max-width: 380px;
    padding: 28px 26px 22px;
    border-radius: 22px;
    text-align: center;
    background: linear-gradient(180deg, #ffffff 0%, #f6f9fd 100%);
    border: 1px solid rgba(255, 255, 255, .9);
    box-shadow: 0 2px 8px rgba(13, 42, 82, .12),
                0 32px 70px -16px rgba(13, 42, 82, .38);
    font-family: var(--font-ui, inherit);
    /* Rises to meet you rather than appearing at full size — the small scale
       step is what stops a centred dialog feeling like it was already there. */
    transform: translateY(10px) scale(.96);
    transition: transform .26s cubic-bezier(.22, .8, .28, 1);
}
.pcf-overlay.open .pcf-box { transform: none; }

.pcf-ico {
    width: 52px; height: 52px;
    margin: 0 auto 14px;
    display: flex; align-items: center; justify-content: center;
    border-radius: 50%;
    background: linear-gradient(160deg, #eaf1fb 0%, #d7e4f6 100%);
    color: var(--brand-blue, #1a5fa8);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .95),
                0 4px 10px rgba(26, 95, 168, .14);
}
.pcf-ico svg { width: 24px; height: 24px; display: block; }
.pcf-ico:empty { display: none; }

.pcf-title { font-size: 18px; font-weight: 800; color: #0d2a52; letter-spacing: -.01em; }
.pcf-sub   { margin-top: 6px; font-size: 13.5px; font-weight: 500; color: #64748b; line-height: 1.45;
             /* Newlines in the sub render as line breaks. The text is set with
                textContent, so a caller that wants a short list writes plain
                "\n" rather than markup — and cannot inject HTML into a dialog. */
             white-space: pre-line; }
/* Set by posConfirm() when the sub has more than one line. inline-block so the
   list stays centred as a block while its text aligns left. */
.pcf-sub--list { display: inline-block; text-align: left; }

.pcf-acts { display: flex; gap: 10px; margin-top: 22px; }
.pcf-btn {
    flex: 1 1 0;
    padding: 12px 14px;
    border-radius: 999px;
    border: 1px solid transparent;
    font-family: inherit;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    transition: transform .14s ease, box-shadow .18s ease, background .18s ease;
}
.pcf-btn:active { transform: translateY(1px); }
.pcf-no {
    background: rgba(255, 255, 255, .8);
    border-color: rgba(120, 140, 170, .30);
    color: #475569;
}
.pcf-no:hover { background: #fff; border-color: rgba(120, 140, 170, .5); }
.pcf-yes {
    background: linear-gradient(160deg, #3579cc 0%, #1a5fa8 55%, #154c88 100%);
    color: #fff;
    box-shadow: 0 6px 14px rgba(26, 95, 168, .30),
                inset 0 1px 0 rgba(255, 255, 255, .34);
}
.pcf-yes:hover  { box-shadow: 0 8px 18px rgba(26, 95, 168, .38), inset 0 1px 0 rgba(255,255,255,.34); }
.pcf-yes:focus-visible { outline: 3px solid rgba(26, 95, 168, .35); outline-offset: 2px; }

/* ── Destructive variant: posConfirm({ danger: true }) ──────────────────────
   Same red as the error toast, so "something is wrong" and "something is about
   to be destroyed" read as one language. Scoped off the box at (0,2,0) so it
   outranks the plain .pcf-yes rules without needing !important. */
.pcf-box--danger .pcf-ico {
    background: linear-gradient(160deg, #fee2e2 0%, #fecaca 100%);
    color: #dc2626;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .95),
                0 4px 10px rgba(220, 38, 38, .16);
}
.pcf-box--danger .pcf-yes {
    background: linear-gradient(160deg, #ef4444 0%, #dc2626 55%, #b91c1c 100%);
    box-shadow: 0 6px 14px rgba(220, 38, 38, .30),
                inset 0 1px 0 rgba(255, 255, 255, .30);
}
.pcf-box--danger .pcf-yes:hover {
    box-shadow: 0 8px 18px rgba(220, 38, 38, .38), inset 0 1px 0 rgba(255,255,255,.30);
}
.pcf-box--danger .pcf-yes:focus-visible { outline: 3px solid rgba(220, 38, 38, .35); }

@media (prefers-reduced-motion: reduce) {
    .pos-toast, .pcf-overlay, .pcf-box, .pcf-btn { transition: none; }
    .pos-toast.show .pos-toast-bar { animation: none; transform: scaleX(1); }
}

/* ── Every dialog in the app, as frosted glass ─────────────────────────────
   The drawer's amount dialogs were rebuilt in glass and the difference is not
   decoration: a solid panel hides where you were, while a frosted one keeps
   the page readable behind it, so a confirm over a till still shows the till.
   Written once here, against the classes every dialog in the app uses, rather
   than page by page — pos_ui.css is loaded everywhere.

   The backdrop gets a heavier blur to compensate: glass over a sharp page
   reads as a smudge, glass over a softened one reads as glass. */
.pcf-overlay { background: rgba(15, 23, 42, 0.32) !important; backdrop-filter: blur(6px) !important; -webkit-backdrop-filter: blur(6px) !important; }
.pcf-box,
.dpin-card,
.seller-pin-card,
.ar-choice,
.ulk-modal {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.80) 0%, rgba(255, 255, 255, 0.62) 100%) !important;
    border: 1px solid rgba(255, 255, 255, 0.90) !important;
    backdrop-filter: blur(20px) saturate(1.5) !important;
    -webkit-backdrop-filter: blur(20px) saturate(1.5) !important;
    box-shadow: 0 26px 64px rgba(15, 23, 42, 0.30), inset 0 1px 0 rgba(255, 255, 255, 0.9) !important;
}
/* The pads' own overlays, matched to the one above. */
.dpin-overlay, .seller-pin-overlay, .ar-choice-overlay, .ulk-modal-overlay {
    background: rgba(15, 23, 42, 0.32) !important;
    backdrop-filter: blur(6px) !important; -webkit-backdrop-filter: blur(6px) !important;
}
/* The keys inside a pad: clear glass, so the pad does not become a white slab
   with glass edges. */
.dpin-pad button, .seller-pin-pad button {
    background: rgba(255, 255, 255, 0.55) !important;
    border: 1px solid rgba(255, 255, 255, 0.85) !important;
    box-shadow: 0 2px 8px rgba(15, 23, 42, 0.10), inset 0 1px 0 rgba(255, 255, 255, 0.9) !important;
}
.dpin-pad button:hover, .seller-pin-pad button:hover { background: rgba(255, 255, 255, 0.82) !important; }
.dpin-pad button:active, .seller-pin-pad button:active { background: rgba(255, 255, 255, 0.95) !important; transform: scale(0.96); }
/* A themed page paints these solid again; the theme sheets load after this
   one, so the glass is restated at a weight they cannot beat. */
body.neu-mode .pcf-box, body.neu-mode .dpin-card, body.neu-mode .seller-pin-card, body.neu-mode .ar-choice, body.neu-mode .ulk-modal,
body.aurora-mode .pcf-box, body.aurora-mode .dpin-card, body.aurora-mode .seller-pin-card, body.aurora-mode .ar-choice, body.aurora-mode .ulk-modal {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.80) 0%, rgba(255, 255, 255, 0.62) 100%) !important;
    box-shadow: 0 26px 64px rgba(15, 23, 42, 0.30), inset 0 1px 0 rgba(255, 255, 255, 0.9) !important;
}