/**
 * Portal Cloud 9 Pro — POS Terminal CSS v20.9.4
 * Creative redesign with theme colour adaptation
 */

/* ══════════════════════════════════════════════════════════════════
   THEME ISOLATION — neutralise any active WordPress theme's CSS
   that may override button/input appearance inside the POS terminal.
   All rules are scoped to #p9-pos-wrap and the modal overlays which
   live at the body level. Using !important is intentional here.
   ══════════════════════════════════════════════════════════════════ */
#p9-pos-wrap button,
#p9-pos-wrap input,
#p9-pos-wrap select,
#p9-pos-wrap textarea,
.p9-drawer-modal-overlay button,
.p9-drawer-modal-overlay input,
.p9-drawer-modal-overlay select,
.p9-drawer-modal-overlay textarea,
.p9-product-modal-overlay button,
.p9-product-modal-overlay input,
.p9-product-modal-overlay select,
.p9-product-modal-overlay textarea,
.p9-overlay button,
.p9-overlay input,
.p9-overlay select,
.p9-overlay textarea {
    box-sizing: border-box !important;
    -webkit-appearance: none !important;
    appearance: none !important;
    font-family: inherit !important;
}

/* ── Wrap ──────────────────────────────────────────────────────── */
.p9-pos-wrap {
    display:flex; flex-direction:column;
    /* Use 100dvh for mobile, subtract WP admin bar (32px on desktop for admins)
       plus a small breathing room. Non-fullscreen wraps sit inside the page. */
    height:calc(100dvh - 82px);
    overflow:hidden; background:var(--p9-bg,#f1f5f9);
    border-radius:16px; min-height:0}

/* When WP admin bar is shown (admin users on desktop) add extra offset */
.admin-bar .p9-pos-wrap:not(.p9-pos-fullscreen) {
    height:calc(100dvh - 82px - 32px) }

/* Cashier fullscreen: topbar is inside the pos-wrap, so use full height */
.p9-pos-wrap.p9-pos-fullscreen {
    position:fixed; inset:0; height:100vh;
    border-radius:0; z-index:9990}

/* ── Topbar ────────────────────────────────────────────────────── */
.p9-pos-topbar {
    display:flex; flex-direction:column; flex-shrink:0;
    background:linear-gradient(135deg,var(--p9-grad-start,#1e90ff) 0%,#000 100%)}

/* Row 1: brand + logout */
.p9-topbar-row {
    display:flex; align-items:center; justify-content:space-between;
    padding:0 14px}

.p9-topbar-row1 { height:46px }
.p9-topbar-row2 {
    height:36px;
    border-top:1px solid rgba(255,255,255,.1);
    padding-bottom:2px}

.p9-topbar-row1-right {
    display:flex; align-items:center; gap:8px}

.p9-pos-topbar-brand {
    display:flex; align-items:center; gap:8px}

.p9-pos-logo {
    height:26px; width:auto; object-fit:contain; border-radius:5px}

.p9-pos-store-name {
    font-size:.88rem; font-weight:700; color:#fff}

.p9-pos-session-pill {
    display:flex; align-items:center; gap:6px;
    background:rgba(255,255,255,.15); border-radius:999px;
    padding:3px 10px; font-size:.72rem; color:#fff; font-weight:500}

.p9-pos-tb-btn {
    display:inline-flex; align-items:center; gap:3px;
    padding:3px 9px; border-radius:999px !important; border:1px solid rgba(255,255,255,.3) !important;
    background:rgba(255,255,255,.1); color:#fff; font-size:.65rem;
    font-weight:600; cursor:pointer; transition:background .15s; text-decoration:none;
    white-space:nowrap; font-family:inherit !important;
    -webkit-appearance:none !important; appearance:none !important;
    box-sizing:border-box !important;
}

.p9-pos-tb-btn:hover { background:rgba(255,255,255,.22) }
.p9-tb-logout { color:rgba(255,255,255,.82) }
.p9-tb-close-btn { border-color:rgba(255,100,100,.5); background:rgba(255,50,50,.15) }

@media (max-width: 600px) {
    /* Logout collapses to an icon-only button on mobile to free up room
       in an already-tight toolbar. */
    .p9-tb-logout-label { display: none; }
    .p9-tb-logout { padding: 5px 8px !important; gap: 0; }

    /* The Switch button injected next to Logout (pos-biometric.js) is
       redundant on mobile — the same action already lives as "Switch
       Cashier" inside the ⋮ menu, so hide the toolbar copy entirely
       rather than squeeze both into the row. */
    #gradia-pos-switch-user-btn { display: none !important; }
}
.p9-tb-close-btn:hover { background:rgba(255,50,50,.3) }

.p9-pos-pulse-dot {
    width:6px; height:6px; border-radius:50%; background:#4ade80;
    animation:p9-pulse 2s infinite; flex-shrink:0}

@keyframes p9-pulse { 0%,100%{opacity:1} 50%{opacity:.35} }

/* ── Opening Float Screen ──────────────────────────────────────── */
.p9-pos-float-screen {
    flex:1; display:flex; align-items:center; justify-content:center;
    padding:2rem}

.p9-pos-float-card {
    background:var(--p9-panel,#fff);
    border:1px solid var(--p9-border,rgba(0,0,0,.08));
    border-radius:24px; padding:2.5rem 2rem;
    text-align:center; width:100%; max-width:420px;
    box-shadow:0 20px 60px rgba(0,0,0,.08)}

.p9-float-icon { font-size:3rem; margin-bottom:1rem }

.p9-pos-float-card h2 {
    font-size:1.4rem; font-weight:800;
    color:var(--p9-text,#1e293b); margin-bottom:.5rem}

.p9-pos-float-card p {
    font-size:.85rem; color:var(--p9-muted,#64748b);
    margin-bottom:1.5rem; line-height:1.6}

.p9-float-label {
    display:block; font-size:.75rem; font-weight:600;
    text-transform:uppercase; letter-spacing:.06em;
    color:var(--p9-muted,#64748b); margin-bottom:.5rem}

.p9-float-input-row {
    display:flex; align-items:center; gap:0;
    border:2px solid var(--p9-border,rgba(0,0,0,.12));
    border-radius:12px; overflow:hidden; margin-bottom:1.25rem;
    transition:border-color .15s}

.p9-float-input-row:focus-within {
    border-color:var(--p9-grad-start,#1e90ff)}

.p9-float-sym {
    padding:0 14px; background:var(--p9-bg,#f8fafc);
    font-size:1.1rem; font-weight:700; color:var(--p9-muted,#64748b);
    border-right:1px solid var(--p9-border,rgba(0,0,0,.08))}

.p9-float-input {
    flex:1; padding:14px 16px; border:none; outline:none;
    font-size:1.4rem; font-weight:700; color:var(--p9-text,#1e293b);
    background:transparent; text-align:right;
    -moz-appearance:textfield; appearance:textfield}

/* Remove native number spinner arrows in webkit browsers */
.p9-float-input::-webkit-outer-spin-button,
.p9-float-input::-webkit-inner-spin-button {
    -webkit-appearance:none; margin:0}

.p9-float-open-btn {
    width:100%; padding:14px;
    background:linear-gradient(135deg,var(--p9-grad-start,#1e90ff) 0%,#000 100%);
    color:#fff; border:none; border-radius:12px;
    font-size:1rem; font-weight:700; cursor:pointer;
    display:flex; align-items:center; justify-content:center; gap:8px;
    transition:opacity .2s, transform .15s}

.p9-float-open-btn:hover { opacity:.9; transform:translateY(-1px) }
.p9-float-open-btn:disabled {
    opacity:0.65; cursor:not-allowed; transform:none;
    pointer-events:none}

/* ── Mobile tabs ───────────────────────────────────────────────── */
.p9-pos-mobile-tabs {
    display:none; background:var(--p9-panel,#fff);
    border-bottom:1px solid var(--p9-border,rgba(0,0,0,.07));
    flex-shrink:0;
    justify-content:space-between}

.p9-mtab {
    flex:1; display:flex; align-items:center; gap:6px;
    padding:10px 18px; border:none; background:none;
    font-size:.82rem; font-weight:500; color:var(--p9-muted,#64748b);
    cursor:pointer; border-bottom:2px solid transparent;
    position:relative; transition:all .2s}

/* Products tab — left-aligned */
.p9-mtab[data-mtab="products"] { justify-content:flex-start }

/* Basket tab — right-aligned */
.p9-mtab[data-mtab="basket"]   { justify-content:flex-end }

/* Active tab: gradient pill background + white text — light AND dark mode */
.p9-mtab.active {
    background:linear-gradient(135deg,var(--p9-grad-start,#1e90ff) 0%,#000 100%);
    color:#fff;
    border-bottom-color:transparent;
    border-radius:0}

.p9-mob-badge {
    position:absolute; top:6px; right:calc(50% - 30px);
    background:var(--p9-grad-start,#1e90ff); color:#fff;
    border-radius:20px; font-size:10px; font-weight:700;
    padding:1px 5px; line-height:1.4}

/* ── Main layout ───────────────────────────────────────────────── */
.p9-pos-layout {
    display:grid;
    grid-template-columns:1fr 500px;
    flex:1; overflow:hidden; gap:0; min-height:0}

/* ── Left: Products ────────────────────────────────────────────── */
.p9-pos-left {
    display:flex; flex-direction:column; overflow:hidden;
    border-right:1px solid var(--p9-border,rgba(0,0,0,.08));
    background:var(--p9-bg,#f8fafc); min-height:0 }

.p9-pos-search-row {
    display:flex; gap:8px; padding:7px 12px;
    background:var(--p9-panel,#fff);
    border-bottom:1px solid var(--p9-border,rgba(0,0,0,.06));
    align-items:center; position:relative}

/* Dark/light toggle pill inside search row */
.p9-srch-theme-btn {
    flex-shrink:0;
    width:34px; height:34px; border-radius:50%;
    border:1.5px solid rgba(0,0,0,.1);
    background:var(--p9-bg,#f8fafc);
    display:flex; align-items:center; justify-content:center;
    cursor:pointer; font-size:15px;
    transition:border-color .2s, background .2s, transform .15s;
    box-shadow:0 1px 4px rgba(0,0,0,.06)}

.p9-srch-theme-btn:hover {
    border-color:var(--p9-grad-start,#1e90ff);
    transform:scale(1.08)}

body.gradia-pos-dark .p9-srch-theme-btn {
    border-color:rgba(255,255,255,.15);
    background:rgba(255,255,255,.08)}

.p9-pos-search-box {
    flex:1; display:flex; align-items:center;
    border:1.5px solid rgba(0,0,0,.1);
    border-radius:999px; background:var(--p9-bg,#f8fafc);
    box-shadow:0 1px 4px rgba(0,0,0,.06);
    transition:border-color .2s, box-shadow .2s;
    overflow:hidden}

.p9-pos-search-box:focus-within {
    border-color:var(--p9-grad-start,#1e90ff);
    box-shadow:0 2px 16px rgba(30,144,255,.15), 0 0 0 2px rgba(30,144,255,.12) }

.p9-srch-ico {
    flex-shrink:0; margin-left:14px; margin-right:2px;
    color:var(--p9-muted,#94a3b8); pointer-events:none;
    display:flex; align-items:center}

.p9-srch-input {
    flex:1; padding:10px 6px 10px 8px;
    border:none !important; border-radius:0;
    background:transparent;
    color:var(--p9-text,#1e293b); font-size:13px;
    outline:none !important; outline-offset:0; width:100%;
    -webkit-appearance:none; appearance:none;
    box-shadow:none !important;
    -webkit-focus-ring-color:transparent}

.p9-srch-input:focus,
.p9-srch-input:focus-visible {
    outline:none !important;
    outline-offset:0 !important;
    box-shadow:none !important;
    border:none !important}

/* Camera button inside pill — consistent right padding */
.p9-pos-search-box .p9-cam-btn { margin-right:5px; margin-left:2px }

/* Green tick flash overlay on successful scan — NO background, only the circle */
.p9-scan-tick {
    position:absolute; inset:0;
    display:flex; flex-direction:column; align-items:center; justify-content:center;
    gap:8px; background:transparent;
    pointer-events:none; z-index:30;
    animation:p9-tick-in .15s ease}

.p9-scan-tick-circle {
    width:68px; height:68px; border-radius:50%;
    background:#16a34a;
    display:flex; align-items:center; justify-content:center;
    border:3px solid rgba(255,255,255,.9);
    box-shadow:0 4px 24px rgba(22,163,74,.6), 0 0 0 6px rgba(22,163,74,.25)}

.p9-scan-tick-label {
    font-size:12px; font-weight:700; color:#fff;
    text-align:center; padding:3px 14px;
    max-width:200px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
    background:rgba(0,0,0,.45); border-radius:999px;
    text-shadow:0 1px 3px rgba(0,0,0,.5)}

.p9-scan-tick-out { opacity:0; transition:opacity .35s }

@keyframes p9-tick-in { from{opacity:0;transform:scale(.9)} to{opacity:1;transform:scale(1)} }

/* Camera scan button — flex item at the right end of the pill */
.p9-cam-btn {
    flex-shrink:0; margin-right:4px;
    width:34px; height:34px; border-radius:999px;
    border:none; cursor:pointer; padding:0;
    display:flex; align-items:center; justify-content:center;
    background:linear-gradient(135deg,var(--p9-grad-start,#1e90ff) 0%,#000 100%);
    color:#fff; transition:opacity .15s, transform .15s;
    box-shadow:0 2px 8px rgba(30,144,255,.3)}

.p9-cam-btn:hover { opacity:.88; transform:scale(1.06) }

.p9-pos-add-btn {
    display:inline-flex; align-items:center; gap:5px;
    padding:9px 16px; border-radius:999px; text-decoration:none; white-space:nowrap;
    background:linear-gradient(135deg,var(--p9-grad-start,#1e90ff) 0%,#000 100%);
    color:#fff; font-size:12px; font-weight:600; flex-shrink:0;
    transition:opacity .2s}

.p9-pos-add-btn:hover { opacity:.85 }

/* Camera panel */
.p9-camera-panel {
    background:#000; flex-shrink:0;
    max-width:320px; margin:10px auto 4px;
    border-radius:20px; overflow:hidden;
    box-shadow:0 16px 48px rgba(0,0,0,.4)}

/* ═══════════════════════════════════════════════════════════════
   SKU SCAN OVERLAY — sits above all other modals (z-index 10600)
   ═══════════════════════════════════════════════════════════════ */
#p9-sku-scan-overlay {
    position: fixed;
    inset: 0;
    z-index: 10600;                     /* above product modal (9995), QR modal (10500) */
    background: rgba(0,0,0,.72);
    backdrop-filter: blur(6px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px 16px;
    animation: p9DrawerFadeIn .18s ease;
}
.p9-sku-scan-card {
    background: #111;
    border-radius: 20px;
    width: 100%;
    max-width: 380px;
    overflow: hidden;
    box-shadow: 0 24px 64px rgba(0,0,0,.5);
    border: 1px solid rgba(255,255,255,.1);
}
.p9-sku-scan-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    background: linear-gradient(135deg, var(--p9-grad-start,#1e90ff) 0%, #000 100%);
    color: #fff;
    font-size: 13px;
    font-weight: 600;
    gap: 8px;
}
.p9-sku-scan-header span {
    display: flex;
    align-items: center;
    gap: 7px;
}
.p9-sku-scan-header button {
    background: rgba(255,255,255,.15) !important;
    border: 1px solid rgba(255,255,255,.3) !important;
    border-radius: 999px !important;
    color: #fff !important;
    font-size: 18px;
    line-height: 1;
    width: 30px;
    height: 30px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: background .15s;
    -webkit-appearance: none !important;
    appearance: none !important;
}
.p9-sku-scan-header button:hover {
    background: rgba(255,255,255,.28) !important;
}
#p9-sku-scan-view {
    width: 100%;
    height: 260px;
    background: #000;
    position: relative;
    overflow: hidden;   /* prevent any canvas/video from bleeding out */
}
/* Hide the html5-qrcode scanning canvas — same rule as #p9-cam-video-wrap */
#p9-sku-cam-video-wrap {
    position: absolute; inset: 0; overflow: hidden; z-index: 1;
}
#p9-sku-cam-video-wrap canvas { display: none !important }
#p9-sku-cam-video-wrap video  { width:100% !important; height:100% !important; object-fit:cover; display:block; }
@media (max-width: 480px) {
    .p9-sku-scan-card { max-width: 100%; border-radius: 16px; }
    #p9-sku-scan-view  { height: 220px; }
}



.p9-camera-header {
    display:flex; justify-content:space-between; align-items:center;
    padding:10px 14px;
    background:linear-gradient(135deg,var(--p9-grad-start,#1e90ff) 0%,#000 100%);
    color:#fff; font-size:12px; font-weight:600}

.p9-camera-header span { display:flex; align-items:center; gap:6px }

.p9-camera-header button {
    background:rgba(255,255,255,.18); border:none; color:#fff;
    border-radius:50%; width:24px; height:24px; cursor:pointer;
    font-size:14px; display:flex; align-items:center; justify-content:center;
    transition:background .15s; flex-shrink:0}

.p9-camera-header button:hover { background:rgba(255,255,255,.32) }

.p9-camera-view {
    position:relative; height:200px; overflow:hidden; background:#111}

#p9-cam-video-wrap {
    position:absolute; inset:0; width:100%; height:200px; overflow:hidden; z-index:1}
#p9-cam-video-wrap video { width:100% !important; height:200px !important; object-fit:cover; display:block }
#p9-cam-video-wrap canvas { display:none !important }

/* Scan frame overlay — must be ABOVE the video */
.p9-scan-frame {
    position:absolute; inset:0; display:flex;
    align-items:center; justify-content:center;
    pointer-events:none; z-index:20;
    background:radial-gradient(ellipse at center, transparent 35%, rgba(0,0,0,.5) 100%)}

.p9-scan-box {
    width:200px; height:110px; position:relative;
    overflow:hidden}  /* contain the laser so it can never escape the box */

.p9-scan-box::before,.p9-scan-box::after,
.p9-scan-c-bl,.p9-scan-c-br {
    content:''; position:absolute;
    width:20px; height:20px;
    border-color:var(--p9-grad-start,#1e90ff);
    border-style:solid}

.p9-scan-box::before { top:0; left:0; border-width:3px 0 0 3px; border-radius:3px 0 0 0 }
.p9-scan-box::after  { top:0; right:0; border-width:3px 3px 0 0; border-radius:0 3px 0 0 }
.p9-scan-c-bl { bottom:0; left:0; border-width:0 0 3px 3px; border-radius:0 0 0 3px }
.p9-scan-c-br { bottom:0; right:0; border-width:0 3px 3px 0; border-radius:0 0 3px 0 }

.p9-scan-laser {
    position:absolute; left:0; right:0; height:3px;
    background:linear-gradient(90deg,transparent 0%,var(--p9-grad-start,#1e90ff) 20%,#fff 50%,var(--p9-grad-start,#1e90ff) 80%,transparent 100%);
    box-shadow:0 0 10px 3px var(--p9-grad-start,#1e90ff), 0 0 4px 1px rgba(255,255,255,.6);
    animation:p9-laser 1.6s linear infinite; top:0; border-radius:2px}

@keyframes p9-laser { 0%{top:2px;opacity:1} 95%{top:calc(100% - 5px);opacity:1} 100%{top:calc(100% - 5px);opacity:0} }

.p9-scan-status {
    display:flex; align-items:center; justify-content:center; gap:6px;
    padding:8px 12px; font-size:11px; font-weight:500;
    color:rgba(255,255,255,.85); background:rgba(0,0,0,.92); margin:0;
    transition:background .3s}

.p9-scan-status[data-state="found"]   { background:rgba(22,163,74,.92) }
.p9-scan-status[data-state="error"]   { background:rgba(220,38,38,.88) }
.p9-scan-status[data-state="warn"]    { background:rgba(217,119,6,.92) }

.p9-scan-dot {
    width:6px; height:6px; border-radius:50%; flex-shrink:0;
    background:var(--p9-grad-start,#1e90ff); animation:p9-pulse 1.5s infinite}

.p9-scan-status[data-state="found"] .p9-scan-dot   { background:#4ade80; animation:none }
.p9-scan-status[data-state="error"] .p9-scan-dot   { background:#fca5a5; animation:none }
.p9-scan-status[data-state="warn"]  .p9-scan-dot   { background:#fcd34d; animation:none }

/* Manual fallback row inside the camera scan overlay */
.p9-scan-manual-wrap {
    background:#0a0a0a; padding:10px 12px 14px}

.p9-scan-manual-label {
    font-size:11px; color:rgba(255,255,255,.5); margin-bottom:6px}

.p9-scan-manual-row {
    display:flex; gap:8px; align-items:center}

.p9-scan-manual-input {
    flex:1; min-width:0; padding:9px 16px;
    border:1.5px solid rgba(255,255,255,.14); border-radius:999px;
    background:rgba(255,255,255,.06); color:#fff;
    font-size:13px; outline:none; transition:border-color .15s}

.p9-scan-manual-input::placeholder { color:rgba(255,255,255,.35) }
.p9-scan-manual-input:focus        { border-color:var(--p9-grad-start,#1e90ff) }

.p9-scan-manual-btn {
    flex-shrink:0; width:38px; height:38px; border-radius:999px; border:none;
    display:flex; align-items:center; justify-content:center;
    background:linear-gradient(135deg,var(--p9-grad-start,#1e90ff) 0%,#000 100%);
    color:#fff; cursor:pointer; transition:opacity .15s, transform .15s}

.p9-scan-manual-btn:hover  { opacity:.88; transform:translateY(-1px) }
.p9-scan-manual-btn:active { transform:translateY(0) }

/* Categories */
.p9-cats {
    display:flex; gap:6px; padding:8px 12px; overflow-x:auto;
    background:var(--p9-panel,#fff);
    border-bottom:1px solid var(--p9-border,rgba(0,0,0,.06));
    scrollbar-width:none}

.p9-cats::-webkit-scrollbar { display:none }

.p9-cat {
    padding:5px 16px; border-radius:999px; border:1.5px solid var(--p9-border);
    background:none; font-size:11px; font-weight:600; cursor:pointer;
    white-space:nowrap; color:var(--p9-muted,#64748b); transition:all .15s}

.p9-cat.active {
    background:linear-gradient(135deg,var(--p9-grad-start,#1e90ff) 0%,#000 100%);
    color:#fff; border-color:transparent}

/* Product grid */
.p9-grid {
    flex:1; overflow-y:auto; padding:10px; min-height:0;
    display:grid; grid-template-columns:repeat(auto-fill,minmax(130px,1fr));
    gap:8px; align-content:start; align-items:start}

/* Card is a fixed 4:6 (width:height) ratio box via the padding-top
   intrinsic-ratio technique. This makes card height a pure function of
   card width, never of its content or of how many products are in the
   grid — so raising "Products per page" just adds more rows for #p9-grid
   to scroll through, cards never shrink to make room. (Deliberately not
   using the `aspect-ratio` property here — see the note in
   templates/pos.php about its collapse bug inside auto-fill grid items.) */
.p9-prod-card {
    position:relative; width:100%; height:0;
    padding-top:calc(6 / 4 * 100%);
    border-radius:14px; border:1.5px solid transparent;
    background-image:
        linear-gradient(var(--p9-panel,#fff), var(--p9-panel,#fff)),
        linear-gradient(135deg, var(--p9-grad-start,#1e90ff) 0%, #000 100%);
    background-origin:border-box;
    background-clip:padding-box, border-box;
    cursor:pointer;
    transition:transform .15s, box-shadow .15s}

.p9-prod-card:hover:not(.p9-oos) {
    transform:translateY(-3px);
    box-shadow:0 8px 24px rgba(0,0,0,.1)}

.p9-prod-card.p9-in-basket {
    box-shadow:0 0 0 2px var(--p9-grad-start,#1e90ff)}

/* Actual card content sits absolutely inset inside the ratio box above */
.p9-prod-card-inner {
    position:absolute; inset:0; overflow:hidden; border-radius:12.5px;
    display:flex; flex-direction:column}

.p9-oos { cursor:not-allowed }

/* Image well: top section of the card, full width, 1:1 square. Split into
   an unfaded wrap (sizing + badges live here) and a fadeable inner
   .p9-card-img (the photo itself), so an out-of-stock card can dim the
   photo and body text while its badges — including the "Out of stock"
   badge — stay fully legible instead of fading along with everything
   else nested inside the same box. */
.p9-card-img-wrap {
    width:100%; height:0; padding-top:100%; position:relative; flex-shrink:0}

.p9-card-img {
    position:absolute; inset:0; background:var(--p9-bg,#f8fafc); overflow:hidden;
    transition:opacity .15s}

.p9-oos .p9-card-img,
.p9-oos .p9-card-body { opacity:.5 }

.p9-card-img img {
    position:absolute; inset:0; width:100%; height:100%; object-fit:cover}

@keyframes p9-shimmer {
    0%   { background-position: -200% 0 }
    100% { background-position: 200% 0 }
}
.p9-prod-image.p9-img-loading {
    background:linear-gradient(90deg, #e2e5ea 25%, #eef1f5 37%, #e2e5ea 63%);
    background-size:400% 100%;
    animation:p9-shimmer 1.4s ease infinite}
body.gradia-pos-dark .p9-prod-image.p9-img-loading {
    background:linear-gradient(90deg, #dde1e6 25%, #f2f4f7 37%, #dde1e6 63%) !important;
    background-size:400% 100% !important}

.p9-card-img-fallback {
    position:absolute; inset:0; width:100%; height:100%;
    display:flex; align-items:center; justify-content:center;
    font-size:32px; line-height:1}

.p9-badge {
    position:absolute; font-size:9px; font-weight:700;
    padding:2px 6px; border-radius:8px; z-index:1}

.p9-badge-added { background:var(--p9-grad-start,#1e90ff); color:#fff; top:4px; left:4px }
.p9-badge-var { background:rgba(139,92,246,.15); color:#8b5cf6; bottom:4px; right:4px }

/* Stock status badge — bottom left of the image. One slot, three states;
   a product is always exactly one of these, so "out of stock" is the red
   state here rather than a separate badge. Sits outside .p9-card-img, so
   the .p9-oos fade above never touches it. */
.p9-badge-stock {
    bottom:4px; left:4px; display:inline-flex; align-items:center; gap:4px;
    padding:3px 4px 3px 6px}
.p9-badge-stock-ok   { background:#16a34a; color:#fff }
.p9-badge-stock-low  { background:#f59e0b; color:#1e293b }
.p9-badge-stock-out  { background:#ef4444; color:#fff }

/* Edit control: circular badge, top right corner of the image. 2px border
   is the same diagonal accent-to-black gradient used on the card border
   (background-clip double-layer trick), red fill, white icon — one design
   that works unmodified in dark mode too, since the image well (and this
   badge sitting on it) stays light in both modes. */
.p9-card-edit-btn {
    position:absolute !important; top:6px !important; right:6px !important; z-index:2 !important;
    width:26px !important; height:26px !important; border-radius:50% !important; padding:0 !important; margin:0 !important;
    display:flex !important; align-items:center !important; justify-content:center !important;
    border:none !important;
    background:linear-gradient(135deg, #ef4444 0%, #000 100%) !important;
    color:#fff !important; cursor:pointer;
    transition:transform .15s, color .15s}

.p9-card-edit-btn svg { width:12px; height:12px; display:block; color:inherit !important; stroke:currentColor !important }

.p9-acct-bio-cred-del {
    color: #b91c1c !important;
    background: #fee2e2 !important;
}
.p9-acct-bio-cred-del svg {
    width: 12px !important;
    height: 12px !important;
    display: block !important;
    opacity: 1 !important;
    color: #b91c1c !important;
    stroke: #b91c1c !important;
    fill: none !important;
}
.p9-acct-bio-cred-del:hover { background: #fecaca !important; }

.p9-card-edit-btn:hover { transform:scale(1.08); color:#d1d5db !important }

/* Inventory row context — not absolutely positioned over an image well,
   sits inline at the right edge of the row instead */
.p9-inv-edit-btn {
    position:static; flex-shrink:0; margin:0 10px 0 0}

.p9-card-body { padding:7px 8px; flex:1; display:flex; flex-direction:column; min-height:0; transition:opacity .15s}

.p9-card-name {
    font-size:11px; font-weight:600; color:var(--p9-text,#1e293b);
    line-height:1.3; margin-bottom:2px;
    overflow:hidden; display:-webkit-box;
    -webkit-line-clamp:2; -webkit-box-orient:vertical}

.p9-card-sku { font-size:10px; color:var(--p9-muted,#94a3b8); margin-bottom:3px }

.p9-card-price {
    font-size:12px; font-weight:700; color:var(--p9-grad-start,#1e90ff)}

.p9-grid-loading, .p9-grid-empty {
    grid-column:1/-1; display:flex; flex-direction:column;
    align-items:center; justify-content:center; gap:8px;
    padding:2.5rem; color:var(--p9-muted,#94a3b8); font-size:13px}

/* Inline POS product form */
.p9-pos-product-form {
    background:var(--p9-panel,#fff);
    border-bottom:2px solid var(--p9-grad-start,#1e90ff);
    flex-shrink:0; max-height:50vh; overflow-y:auto}

.p9-ppf-header {
    display:flex; justify-content:space-between; align-items:center;
    padding:10px 14px;
    background:linear-gradient(135deg,var(--p9-grad-start,#1e90ff) 0%,#000 100%)}

.p9-ppf-title { font-size:.85rem; font-weight:700; color:#fff }

.p9-ppf-close { font-size:.75rem; color:rgba(255,255,255,.8); text-decoration:none }

.p9-ppf-body { padding:12px 14px }

.p9-ppf-grid {
    display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-bottom:12px}

.p9-ppf-full { grid-column:1/-1 }

.p9-ppf-field label {
    display:block; font-size:11px; font-weight:600;
    color:var(--p9-muted,#64748b); margin-bottom:4px;
    text-transform:uppercase; letter-spacing:.04em}

.p9-ppf-field input,
.p9-ppf-field textarea,
.p9-ppf-field select {
    width:100%; padding:7px 10px;
    border:1.5px solid var(--p9-border,rgba(0,0,0,.1));
    border-radius:999px; background:var(--p9-bg,#f8fafc);
    color:var(--p9-text,#1e293b); font-size:12px; outline:none;
    font-family:inherit;
    transition:border-color .15s, box-shadow .15s}
.p9-ppf-field textarea { border-radius:12px }

.p9-ppf-field input:focus,
.p9-ppf-field textarea:focus,
.p9-ppf-field select:focus {
    border-color:var(--p9-grad-start,#1e90ff);
    box-shadow: 0 0 0 3px rgba(30,144,255,.12);
}

.p9-ppf-sku-row { display:flex; gap:5px }

.p9-ppf-scan-btn {
    padding:7px 10px; border:1.5px solid var(--p9-border);
    border-radius:8px; background:var(--p9-bg); color:var(--p9-muted);
    cursor:pointer; transition:color .15s, border-color .15s}

.p9-ppf-scan-btn:hover { color:var(--p9-grad-start,#1e90ff); border-color:var(--p9-grad-start) }

.p9-ppf-actions { display:flex; gap:8px }

.p9-ppf-draft, .p9-ppf-publish {
    flex:1; padding:9px; border-radius:10px;
    font-size:12px; font-weight:600; cursor:pointer; border:none;
    transition:opacity .2s}

.p9-ppf-draft { background:var(--p9-bg,#f1f5f9); color:var(--p9-text,#1e293b); border:1.5px solid var(--p9-border) }

.p9-ppf-publish {
    background:linear-gradient(135deg,var(--p9-grad-start,#1e90ff) 0%,#000 100%);
    color:#fff}

.p9-ppf-status { font-size:12px; margin-top:8px; text-align:center }

/* POS product form — image picker */
.p9-ppf-img-wrap { display:flex; align-items:center; gap:10px }

.p9-ppf-img-preview {
    width:72px; height:72px; border-radius:10px; flex-shrink:0;
    border:2px dashed var(--p9-border,rgba(0,0,0,.12));
    background:#f8fafc center/cover no-repeat;
    display:flex; align-items:center; justify-content:center;
    overflow:hidden; transition:border-color .2s}

.p9-ppf-img-preview.has-image { border-style:solid; border-color:var(--p9-grad-start,#1e90ff) }

.p9-ppf-img-placeholder { font-size:28px; opacity:.35 }

.p9-ppf-img-btns { display:flex; flex-direction:column; gap:6px }

.p9-ppf-img-btn {
    padding:5px 12px; border-radius:7px; font-size:11px; font-weight:600;
    cursor:pointer; border:1.5px solid var(--p9-border,rgba(0,0,0,.1));
    background:var(--p9-bg,#f1f5f9); color:var(--p9-text,#374151);
    transition:border-color .15s, color .15s; white-space:nowrap}

.p9-ppf-img-btn:hover { border-color:var(--p9-grad-start,#1e90ff); color:var(--p9-grad-start,#1e90ff) }

.p9-ppf-img-remove { color:#dc2626 !important; border-color:rgba(220,38,38,.3) !important }
.p9-ppf-img-remove:hover { border-color:#dc2626 !important }

body.gradia-pos-dark .p9-ppf-img-preview { background-color:rgba(255,255,255,.06) }
body.gradia-pos-dark .p9-ppf-img-btn { background:rgba(255,255,255,.06); color:#e2e8f0; border-color:rgba(255,255,255,.1) }

/* Pagination */
.p9-pagination {
    display:flex; align-items:center; justify-content:center; gap:12px;
    padding:8px; background:var(--p9-panel,#fff);
    border-top:1px solid var(--p9-border,rgba(0,0,0,.06));
    font-size:12px; color:var(--p9-muted,#64748b)}

.p9-pg-btn {
    padding:4px 14px; border:1px solid var(--p9-border);
    border-radius:8px; background:none; font-size:12px;
    color:var(--p9-text,#1e293b); cursor:pointer; transition:all .15s}

.p9-pg-btn:disabled { opacity:.35; cursor:not-allowed }
.p9-pg-btn:hover:not(:disabled) { background:var(--p9-ring-05) }

/* ── Right: Basket + Payment — two sub-columns ──────────────────── */
.p9-pos-right {
    display:grid;
    grid-template-columns:1fr 1fr;
    overflow:hidden;
    background:var(--p9-panel,#fff);
    min-height:0; border-left:1px solid var(--p9-border,rgba(0,0,0,.08))}

/* LEFT sub-column: sticky search + scrollable basket + subtotal */
.p9-right-basket-col {
    display:flex; flex-direction:column; overflow:hidden; min-height:0;
    border-right:1px solid var(--p9-border,rgba(0,0,0,.08))}

/* Customer search sticky at top */
.p9-right-basket-col .p9-customer-wrap {
    flex-shrink:0}

/* Basket fills space and scrolls */
.p9-right-basket-col .p9-basket {
    flex:1; overflow-y:auto; padding:8px; min-height:60px}

/* Totals stay at bottom of basket col */
.p9-right-basket-col .p9-totals {
    flex-shrink:0}

/* RIGHT sub-column: sticky — payment + calculator + charge pill */
.p9-right-payment-col {
    display:flex; flex-direction:column; overflow:hidden; min-height:0;
    background:var(--p9-panel,#fff)}

/* Payment section: scroll if many methods */
.p9-right-payment-col .p9-payment-section {
    flex-shrink:0; overflow-y:auto; max-height:36%}

/* Calculator fills remaining space */
.p9-right-payment-col .p9-calc {
    flex:1; overflow:hidden; min-height:0}

/* Charge pill — always at bottom of payment col */
.p9-charge-wrap {
    flex-shrink:0; padding:10px 12px 14px;
    background:var(--p9-panel,#fff);
    border-top:1px solid var(--p9-border,rgba(0,0,0,.07));
    box-shadow:0 -4px 12px rgba(0,0,0,.06)}

/* Legacy compatibility — .p9-right-top and .p9-right-scroll still in DOM for JS refs */
.p9-right-top { display:contents }
.p9-right-scroll { display:contents }

.p9-basket-section { border-bottom:1px solid var(--p9-border,rgba(0,0,0,.06)) }

/* Customer */
.p9-customer-wrap { position:relative; padding:10px 12px }

.p9-customer-field {
    display:flex; align-items:center; gap:0;
    border:1.5px solid rgba(0,0,0,.1); border-radius:999px;
    overflow:hidden; background:var(--p9-bg,#f8fafc);
    box-shadow:0 1px 4px rgba(0,0,0,.06);
    transition:border-color .2s, box-shadow .2s}

.p9-customer-field:focus-within {
    border-color:var(--p9-grad-start,#1e90ff);
    box-shadow:0 2px 16px rgba(30,144,255,.15), 0 0 0 2px rgba(30,144,255,.12) }

.p9-customer-field > svg { margin:0 9px; color:var(--p9-muted,#94a3b8); flex-shrink:0 }

.p9-cust-input {
    flex:1; padding:8px 10px 8px 0;
    border:none !important; outline:none !important;
    outline-offset:0; box-shadow:none !important;
    -webkit-appearance:none; appearance:none;
    background:transparent; color:var(--p9-text,#1e293b); font-size:12px}

.p9-cust-input:focus,
.p9-cust-input:focus-visible {
    outline:none !important; box-shadow:none !important; border:none !important}

.p9-cust-dd {
    position:absolute; top:calc(100% - 4px); left:12px; right:12px;
    background:var(--p9-panel,#fff); border:1px solid var(--p9-border);
    border-radius:10px; z-index:999; overflow:hidden;
    max-height:180px; overflow-y:auto;
    box-shadow:0 8px 24px rgba(0,0,0,.12)}

.p9-cust-item {
    padding:8px 12px; cursor:pointer; font-size:12px;
    border-bottom:1px solid var(--p9-border,rgba(0,0,0,.05));
    transition:background .1s}

.p9-cust-item:hover { background:var(--p9-ring-05) }
.p9-cust-item:last-child { border-bottom:none }

/* Basket */
.p9-basket { overflow-y:auto; padding:8px }

.p9-basket-empty {
    display:flex; flex-direction:column; align-items:center;
    justify-content:center; gap:6px; padding:1.5rem;
    color:var(--p9-muted,#94a3b8); text-align:center}

.p9-basket-empty p { font-size:.85rem; font-weight:500; margin:0 }
.p9-basket-empty small { font-size:.72rem }

.p9-bitem {
    display:grid; grid-template-columns:40px 1fr auto auto;
    align-items:center; gap:8px; padding:7px 10px;
    border:1px solid var(--p9-border,rgba(0,0,0,.07));
    border-radius:12px; margin-bottom:5px;
    background:var(--p9-panel,#fff);
    box-shadow:0 1px 3px rgba(0,0,0,.04);
    transition:box-shadow .15s}

.p9-bitem:hover { box-shadow:0 2px 8px rgba(0,0,0,.08) }

.p9-bi-img {
    width:40px; height:40px; border-radius:8px; object-fit:cover;
    border:1px solid var(--p9-border,rgba(0,0,0,.06))}

.p9-bi-name { font-size:11.5px; font-weight:700; color:var(--p9-text,#1e293b); line-height:1.3; white-space:nowrap; overflow:hidden; text-overflow:ellipsis }
.p9-bi-sku  { font-size:10px; color:var(--p9-muted,#94a3b8); margin-top:1px }
.p9-bi-price{ font-size:10px; color:var(--p9-accent,#1e90ff); font-weight:600; margin-top:1px }

.p9-bi-ctrl { display:flex; align-items:center; gap:0 }

.p9-qty-btn {
    width:24px; height:24px; border:1.5px solid var(--p9-border,rgba(0,0,0,.12));
    background:var(--p9-bg,#f8fafc); font-size:15px; cursor:pointer;
    display:flex; align-items:center; justify-content:center;
    color:var(--p9-text,#1e293b); transition:background .1s, border-color .1s;
    font-weight:700; line-height:1}

.p9-qty-m { border-radius:6px 0 0 6px }
.p9-qty-p { border-radius:0 6px 6px 0 }
.p9-qty-btn:hover { background:var(--p9-ring-05); border-color:var(--p9-grad-start,#1e90ff); color:var(--p9-grad-start,#1e90ff) }

.p9-qty-n {
    min-width:30px; height:24px;
    border-top:1.5px solid var(--p9-border,rgba(0,0,0,.12));
    border-bottom:1.5px solid var(--p9-border,rgba(0,0,0,.12));
    display:flex; align-items:center; justify-content:center;
    font-size:12px; font-weight:700; color:var(--p9-text,#1e293b);
    background:var(--p9-panel,#fff)}

.p9-bi-right { display:flex; flex-direction:column; align-items:flex-end; gap:3px }

.p9-bi-line { font-size:12px; font-weight:800; color:var(--p9-text,#1e293b); white-space:nowrap }

.p9-bi-del {
    border:1px solid #fecaca; background:#fef2f2; color:#ef4444;
    font-size:10px; cursor:pointer; padding:3px 6px;
    border-radius:6px; transition:background .1s, border-color .1s;
    font-weight:700; line-height:1}

.p9-bi-del:hover { background:#fee2e2; border-color:#f87171 }

/* Extras (rewards + note/email), see the consolidated .p9-extra-btn and
   .p9-notes-group rules further down (search "v15.4.1 BUTTON FIXES") —
   this used to have its own earlier .p9-extra-btn/.p9-note-input rules
   that were entirely overridden by !important ones later in this file;
   removed rather than left as dead, overridden weight. */
.p9-extras-row { padding:8px 12px }

.p9-notes-group {
    margin: 0 12px 10px !important; border: 1px solid var(--p9-border, rgba(0,0,0,.08)) !important;
    border-radius: 14px !important; overflow: hidden; background: var(--p9-panel, #fff) !important;
}
.p9-note-row { display: flex !important; align-items: center; gap: 10px; padding: 9px 12px; }
.p9-note-row + .p9-note-row { border-top: 1px solid var(--p9-border, rgba(0,0,0,.06)) !important; }
.p9-note-row:focus-within { background: var(--p9-ring-10, rgba(30,144,255,.06)) !important; }
.p9-note-icon { font-size: 13px; flex-shrink: 0; }
.p9-note-input {
    flex: 1; min-width: 0; width: 100% !important; padding: 0 2px !important; border: none !important;
    border-radius: 0 !important; background: transparent !important; color: var(--p9-text,#1e293b) !important;
    font-size: 12.5px; outline: none !important; box-shadow: none !important; -webkit-appearance: none !important; appearance: none !important;
}

/* Totals */
.p9-totals { padding:8px 12px; border-top:1px solid var(--p9-border,rgba(0,0,0,.08)) }

.p9-total-row {
    display:flex; justify-content:space-between;
    font-size:12px; color:var(--p9-muted,#64748b); margin-bottom:3px}

.p9-total-grand {
    display:flex; justify-content:space-between; align-items:baseline;
    padding-top:6px; border-top:1px solid var(--p9-border,rgba(0,0,0,.07));
    margin-top:3px; font-size:.85rem; font-weight:600;
    color:var(--p9-text,#1e293b)}

.p9-grand-num { font-size:1.2rem; font-weight:800; color:var(--p9-grad-start,#1e90ff) }

/* Tax line breakdown rows */
.p9-tax-line-row {
    display:flex; justify-content:space-between; align-items:center;
    font-size:11px; color:var(--p9-muted,#64748b); margin-bottom:2px;
    padding:2px 0;}
.p9-tax-line-label { display:flex; align-items:center; gap:3px; font-weight:500 }
.p9-tax-rate { font-size:10px; opacity:.7; font-weight:400 }
.p9-tax-line-val { font-weight:600; color:var(--p9-text,#374151) }
body.gradia-pos-dark .p9-tax-line-row { color:rgba(255,255,255,.5) }
body.gradia-pos-dark .p9-tax-line-val { color:rgba(255,255,255,.75) }

/* Payment pills */
/* ── Card indicator badges (p9-ci) ─────────────────────────────── */
.p9-ci {
    display:inline-flex; align-items:center; justify-content:center;
    height:20px; min-width:28px; padding:0 5px;
    border-radius:4px; font-size:9px; font-weight:800;
    letter-spacing:.2px; text-transform:uppercase; vertical-align:middle; flex-shrink:0}
.p9-ci-visa    { background:#1a1f71; color:#fff; font-style:italic; font-family:Georgia,serif; font-size:10px; letter-spacing:0 }
.p9-ci-mc      { background:transparent; padding:0; width:30px; height:20px; position:relative; display:inline-block; min-width:30px }
.p9-ci-mc b    { position:absolute; width:16px; height:16px; border-radius:50%; top:2px }
.p9-ci-mc b:first-child { background:#eb001b; left:0 }
.p9-ci-mc b:last-child  { background:#f79e1b; right:0; opacity:.85 }
.p9-ci-amex    { background:#2e77bc; color:#fff }
.p9-ci-disc    { background:#f76f20; color:#fff }
.p9-ci-verve   { background:#006529; color:#fff }
.p9-ci-ap      { background:#000; color:#fff; font-size:10px }
.p9-ci-gp      { background:#fff; color:#4285f4; border:1px solid #dadce0 }
.p9-ci-pp      { background:#003087; color:#009cde; font-size:9px }
.p9-ci-mpesa   { background:#4caf50; color:#fff; font-size:8px }
.p9-ci-mtn     { background:#ffc000; color:#000; font-size:9px }
.p9-ci-airtel  { background:#e40000; color:#fff; font-size:9px }
.p9-ci-voda    { background:#e60000; color:#fff; font-size:9px }
.p9-ci-cash    { background:#16a34a; color:#fff }
.p9-ci-bank    { background:#374151; color:#fff }
.p9-ci-cheque  { background:#6b7280; color:#fff }
.p9-gw-rest-icon { height:20px; width:auto; border-radius:3px; object-fit:contain; vertical-align:middle }

/* ── Payment section ────────────────────────────────────────────── */
.p9-payment-section {
    padding:10px 12px 8px; border-top:1px solid var(--p9-border,rgba(0,0,0,.08));
    /* Allow unlimited payment methods — parent .p9-right-scroll scrolls */}

.p9-section-hdr {
    font-size:10px; font-weight:700; text-transform:uppercase;
    letter-spacing:.6px; color:var(--p9-muted,#94a3b8); margin-bottom:7px}

.p9-pay-methods { display:flex; flex-direction:column; gap:5px }

/* ── Payment method cards — compact minimalist design ──────────── */
.p9-pay-method {
    display:flex; align-items:center; gap:10px; padding:9px 12px;
    border:1.5px solid var(--p9-border,rgba(0,0,0,.09)); border-radius:12px;
    background:var(--p9-panel,#fff); cursor:pointer;
    transition:border-color .15s, box-shadow .15s;
    min-height:0; position:relative}

.p9-pay-method:hover {
    border-color:var(--p9-grad-start,#1e90ff);
    box-shadow:0 2px 8px rgba(30,144,255,.12)}

.p9-pay-method.active {
    border-color:var(--p9-grad-start,#1e90ff);
    background:rgba(30,144,255,.04);
    box-shadow:0 2px 10px rgba(30,144,255,.15)}

/* Radio dot */
.p9-pm-radio {
    width:15px; height:15px; border-radius:50%; flex-shrink:0;
    border:2px solid var(--p9-border,rgba(0,0,0,.2));
    display:flex; align-items:center; justify-content:center;
    transition:border-color .15s}
.p9-pm-radio-ep { border-color:rgba(0,0,0,.15) }
.p9-pay-method.active .p9-pm-radio { border-color:var(--p9-grad-start,#1e90ff) }
.p9-pm-dot { width:7px; height:7px; border-radius:50%; background:var(--p9-grad-start,#1e90ff); display:none }
.p9-pay-method.active .p9-pm-dot { display:block }

/* Icon circle */
.p9-pm-icon-wrap {
    width:32px; height:32px; border-radius:9px; flex-shrink:0;
    display:flex; align-items:center; justify-content:center}
.p9-pm-icon-cash { background:#f0fdf4; color:#16a34a; border:1px solid #bbf7d0 }
.p9-pm-icon-ep   { background:#eff6ff; color:#1e90ff; border:1px solid #bfdbfe }

/* Text body */
.p9-pm-body { flex:1; min-width:0 }
.p9-pay-method .p9-pm-title {
    font-size:12.5px; font-weight:700; color:var(--p9-text,#1e293b);
    display:block; line-height:1.2}
.p9-pay-method .p9-pm-desc {
    font-size:10px; color:var(--p9-muted,#94a3b8);
    display:block; margin-top:1px; line-height:1.3}
.p9-pay-method.active .p9-pm-title { color:var(--p9-grad-start,#1e90ff) }
.p9-pay-method.active .p9-pm-desc  { color:var(--p9-grad-start,#1e90ff); opacity:.7 }

/* Badge pill (CASH label) */
.p9-pm-badge {
    font-size:9px; font-weight:800; letter-spacing:.5px; padding:2px 7px;
    border-radius:999px; flex-shrink:0; text-transform:uppercase}
.p9-pm-badge-cash { background:#dcfce7; color:#16a34a; border:1px solid #bbf7d0 }

/* Electronic card overrides — keep it clean, no gradient */
.p9-pay-method.p9-ep {
    background:var(--p9-panel,#fff);
    border-color:var(--p9-border,rgba(0,0,0,.09))}
.p9-pay-method.p9-ep.active {
    background:rgba(30,144,255,.04);
    border-color:var(--p9-grad-start,#1e90ff)}
/* Remove old pseudo-element shimmer */
.p9-pay-method.p9-ep::before { display:none }

/* Dark mode */
body.gradia-pos-dark .p9-pay-method {
    background: linear-gradient(135deg, color-mix(in srgb, var(--p9-grad-start,#1e90ff) 40%, #0a0a0a) 0%, #0a0a0a 100%);
    border-color: color-mix(in srgb, var(--p9-grad-start,#1e90ff) 30%, rgba(255,255,255,.08));
}
body.gradia-pos-dark .p9-pay-method:hover {
    border-color: var(--p9-grad-start,#1e90ff);
    box-shadow: 0 2px 12px color-mix(in srgb, var(--p9-grad-start,#1e90ff) 25%, transparent);
}
body.gradia-pos-dark .p9-pay-method.active {
    background: linear-gradient(135deg, color-mix(in srgb, var(--p9-grad-start,#1e90ff) 65%, #000) 0%, #111 100%);
    border-color: var(--p9-grad-start,#1e90ff);
    box-shadow: 0 0 0 1px var(--p9-grad-start,#1e90ff), 0 4px 16px color-mix(in srgb, var(--p9-grad-start,#1e90ff) 30%, transparent);
}
body.gradia-pos-dark .p9-pay-method .p9-pm-title  { color:#e2e8f0 }
body.gradia-pos-dark .p9-pay-method .p9-pm-desc   { color:rgba(255,255,255,.45) }
body.gradia-pos-dark .p9-pm-icon-cash { background:rgba(22,163,74,.15); border-color:rgba(22,163,74,.3) }
body.gradia-pos-dark .p9-pm-icon-ep   { background:rgba(30,144,255,.15); border-color:rgba(30,144,255,.3) }
body.gradia-pos-dark .p9-pm-badge-cash { background:rgba(22,163,74,.2); color:#4ade80; border-color:rgba(22,163,74,.3) }

/* Legacy pill aliases — keep for any remaining references */
.p9-pay-pill { display:none }



/* Calculator */
.p9-calc {
    padding:8px 12px; border-top:1px solid var(--p9-border,rgba(0,0,0,.08))}

.p9-calc-display {
    display:flex; justify-content:space-between; align-items:center;
    background:var(--p9-bg,#f8fafc); border:1.5px solid var(--p9-border);
    border-radius:10px; padding:8px 12px; margin-bottom:8px}

.p9-calc-lbl { font-size:11px; color:var(--p9-muted,#94a3b8); font-weight:500 }

.p9-calc-val { font-size:1.3rem; font-weight:800; color:var(--p9-text,#1e293b) }

.p9-calc-quickrow { display:flex; gap:5px; margin-bottom:8px }

.p9-qk {
    flex:1; padding:6px 4px; border:1.5px solid var(--p9-border);
    border-radius:8px; background:var(--p9-bg); font-size:11px;
    font-weight:600; color:var(--p9-muted,#64748b); cursor:pointer;
    transition:all .12s; text-align:center}

.p9-qk:hover { border-color:var(--p9-grad-start); color:var(--p9-grad-start) }

.p9-numpad { display:grid; grid-template-columns:repeat(4,1fr); gap:5px }

.p9-nk {
    padding:11px 4px; border:1px solid var(--p9-border,rgba(0,0,0,.08));
    border-radius:9px; background:var(--p9-panel,#fff);
    font-size:16px; font-weight:600; color:var(--p9-text,#1e293b);
    cursor:pointer; transition:background .1s, transform .1s;
    text-align:center; line-height:1}

.p9-nk:active { transform:scale(.95) }
.p9-nk:hover  { background:var(--p9-ring-05) }

.p9-nk-fn { font-size:13px }

.p9-nk[data-k="⌫"] { background:#fef2f2; color:#ef4444; border-color:#fee2e2 }
.p9-nk[data-k="C"]  { background:#fef9c3; color:#92400e; border-color:#fde68a }
.p9-nk-enter { background:linear-gradient(135deg,var(--p9-grad-start,#1e90ff) 0%,#000 100%); color:#fff; border-color:transparent; font-size:1.2rem }

.p9-change-row {
    display:flex; justify-content:space-between; align-items:center;
    padding:7px 10px; background:var(--p9-bg); border-radius:8px;
    margin-top:8px; font-size:12px; color:var(--p9-muted,#64748b)}

.p9-change-val { font-size:.9rem; font-weight:700 }
.p9-change-ok  { color:#16a34a !important }

/* Charge button */
/* .p9-charge-wrap handled in .p9-pos-right zone system above */

.p9-charge-btn {
    width:100%; padding:14px;
    background:linear-gradient(135deg,var(--p9-grad-start,#1e90ff) 0%,#000 100%);
    color:#fff; border:none; border-radius:999px;
    font-size:15px; font-weight:700; cursor:pointer;
    display:flex; align-items:center; justify-content:center; gap:8px;
    transition:opacity .2s, transform .15s}

.p9-charge-btn:hover:not(:disabled):not(.p9-charge-disabled) { opacity:.88; transform:translateY(-1px) }
.p9-charge-btn:disabled, .p9-charge-btn.p9-charge-disabled { opacity:.35; cursor:not-allowed }

/* Overlays */
.p9-overlay {
    position:fixed; inset:0; background:rgba(0,0,0,.55);
    z-index:10000; display:flex; align-items:center; justify-content:center}

.p9-var-overlay { z-index:10001 }

.p9-success-card, .p9-var-card {
    background:var(--p9-panel,#fff); border-radius:20px;
    padding:2rem; text-align:center; max-width:320px;
    width:calc(100% - 2rem);
    box-shadow:0 24px 64px rgba(0,0,0,.22)}

.p9-success-tick {
    width:60px; height:60px; border-radius:50%;
    background:linear-gradient(135deg,var(--p9-grad-start,#1e90ff) 0%,#000 100%);
    color:#fff; font-size:1.8rem; line-height:60px;
    margin:0 auto 1rem; display:flex; align-items:center; justify-content:center}

.p9-success-card h3 {
    font-size:1.2rem; font-weight:700;
    color:var(--p9-text,#1e293b); margin-bottom:.75rem}

.p9-success-info { font-size:13px; color:var(--p9-muted,#64748b); margin-bottom:1.25rem }
.p9-si-row { margin-bottom:4px }

.p9-success-actions { display:flex; gap:8px }

.p9-suc-btn {
    flex:1; padding:10px; border-radius:10px; font-size:12px;
    font-weight:600; cursor:pointer;
    display:flex; align-items:center; justify-content:center; gap:5px;
    transition:opacity .2s}

.p9-suc-print { background:var(--p9-bg,#f1f5f9); border:1px solid var(--p9-border); color:var(--p9-text,#1e293b) }
.p9-suc-new   { background:linear-gradient(135deg,var(--p9-grad-start,#1e90ff) 0%,#000 100%); border:none; color:#fff }

.p9-var-card { text-align:left; padding:0; max-width:360px; max-height:70vh; overflow:hidden; display:flex; flex-direction:column }

.p9-var-header {
    display:flex; justify-content:space-between; align-items:center;
    padding:14px 16px; border-bottom:1px solid var(--p9-border);
    font-size:13px; font-weight:600; color:var(--p9-text,#1e293b)}

.p9-var-header button {
    background:none; border:none; font-size:16px; cursor:pointer; color:var(--p9-muted)}

.p9-var-list { overflow-y:auto; padding:8px; flex:1 }

/* ── Payment collection modal — gateway-adaptive ───────────────── */
.p9-pay-modal-card {
    background:var(--p9-panel,#fff);
    border-radius:24px; max-width:400px; width:calc(100% - 2rem);
    box-shadow:0 32px 80px rgba(0,0,0,.4);
    overflow:hidden; display:flex; flex-direction:column}

/* ── Gradient header ── */
.p9-pmc-header {
    padding:18px 18px 16px;
    background:linear-gradient(150deg,#1e90ff 0%,#040a1a 100%);
    position:relative; overflow:hidden}

/* Decorative circles */
.p9-pmc-header::before,
.p9-pmc-header::after {
    content:''; position:absolute; border-radius:50%; pointer-events:none}
.p9-pmc-header::before {
    width:180px; height:180px; top:-60px; right:-50px;
    background:rgba(255,255,255,.07)}
.p9-pmc-header::after {
    width:100px; height:100px; bottom:-40px; left:-20px;
    background:rgba(255,255,255,.05)}

.p9-pmc-close {
    position:absolute; top:14px; right:14px;
    background:rgba(255,255,255,.2); border:none;
    width:28px; height:28px; border-radius:50%; color:#fff;
    cursor:pointer; font-size:13px; display:flex; align-items:center;
    justify-content:center; transition:background .15s; z-index:1}
.p9-pmc-close:hover { background:rgba(255,255,255,.35) }

/* Big amount */
.p9-pmc-amount-wrap { text-align:center; margin:8px 0 14px; position:relative; z-index:1 }
.p9-pmc-amount-lbl { font-size:11px; color:rgba(255,255,255,.65); letter-spacing:.5px; margin-bottom:4px }
.p9-pmc-amount {
    font-size:2.6rem; font-weight:900; color:#fff;
    letter-spacing:-1px; line-height:1; text-shadow:0 2px 12px rgba(0,0,0,.3)}

/* Gateway identity row */
.p9-pmc-gw-row {
    display:flex; align-items:center; justify-content:center; gap:8px;
    margin-bottom:10px; position:relative; z-index:1}
.p9-pmc-emoji { font-size:1.4rem; line-height:1 }
.p9-pmc-gw-name {
    font-size:14px; font-weight:800; color:#fff; letter-spacing:.2px}

/* Logo strip */
.p9-pmc-logos {
    display:flex; align-items:center; justify-content:center;
    gap:5px; flex-wrap:wrap; position:relative; z-index:1}
.p9-pmc-logos .p9-ci {
    height:24px; min-width:34px; font-size:9px; border-radius:6px;
    box-shadow:0 2px 8px rgba(0,0,0,.4)}
.p9-pmc-logos .p9-ci-mc { width:36px; height:24px }
.p9-pmc-logos .p9-ci-mc b { width:19px; height:19px; top:2px }
.p9-pmc-logos .p9-gw-rest-icon { height:24px; border-radius:5px; box-shadow:0 2px 8px rgba(0,0,0,.4) }
.p9-pmc-logos:empty { display:none }

/* ── Instructions panel ── */
.p9-pmc-instructions {
    background:var(--p9-bg,#f1f5f9);
    border-bottom:1px solid var(--p9-border,rgba(0,0,0,.07));
    padding:12px 18px}
.p9-pmc-steps { display:flex; flex-direction:column; gap:7px }
.p9-pmc-step {
    display:flex; align-items:flex-start; gap:10px; font-size:12px;
    color:var(--p9-text,#1e293b); line-height:1.4}
.p9-pmc-step-num {
    width:20px; height:20px; border-radius:50%; flex-shrink:0;
    display:flex; align-items:center; justify-content:center;
    font-size:10px; font-weight:800; color:#fff;
    background:var(--p9-grad-start,#1e90ff)}
.p9-pmc-step-txt strong { display:block; font-weight:700; margin-bottom:1px }

/* Description */
.p9-pmc-desc {
    font-size:12px; color:var(--p9-muted,#64748b);
    padding:10px 18px 0; line-height:1.5}
.p9-pmc-desc:empty { display:none }

/* ── Form fields ── */
.p9-pmc-body { padding:0 }
.p9-pmi-field { padding:10px 18px 0 }

.p9-pmi-label {
    display:block; font-size:10px; font-weight:700; color:var(--p9-muted,#64748b);
    text-transform:uppercase; letter-spacing:.6px; margin-bottom:5px}
.p9-pmi-label small { font-weight:400; text-transform:none; letter-spacing:0 }

.p9-pmi-input-wrap { position:relative }
.p9-pmi-input-icon {
    position:absolute; left:11px; top:50%; transform:translateY(-50%);
    font-size:14px; pointer-events:none; z-index:1}
.p9-pmi-input {
    width:100%; padding:10px 12px;
    border:1.5px solid var(--p9-border,rgba(0,0,0,.12));
    border-radius:10px; font-size:13px; color:var(--p9-text,#1e293b);
    background:var(--p9-bg,#f8fafc); transition:border-color .15s; outline:none}
.p9-pmi-input.p9-pmi-input-icon-l { padding-left:34px }
.p9-pmi-input:focus { border-color:var(--p9-grad-start,#1e90ff); background:#fff }

/* Actions */
.p9-pmi-actions {
    display:flex; gap:10px; padding:14px 18px 16px; margin-top:10px}
.p9-pmi-cancel {
    flex:0 0 auto; padding:10px 18px; border-radius:10px;
    border:1.5px solid var(--p9-border,rgba(0,0,0,.12)); background:transparent;
    color:var(--p9-muted,#64748b); font-size:13px; font-weight:600;
    cursor:pointer; transition:opacity .15s}
.p9-pmi-confirm {
    flex:1; padding:11px 18px; border-radius:10px; border:none;
    background:var(--p9-confirm-grad,linear-gradient(135deg,#1e90ff 0%,#040a1a 100%));
    color:#fff; font-size:13px; font-weight:700; cursor:pointer;
    display:flex; align-items:center; justify-content:center; gap:6px;
    transition:opacity .15s; box-shadow:0 4px 14px rgba(30,144,255,.35)}
.p9-pmi-confirm:disabled, .p9-pmi-cancel:disabled { opacity:.5; cursor:not-allowed }
.p9-pmi-status {
    font-size:12px; text-align:center; color:#dc2626;
    padding:0 18px 12px; min-height:16px}

/* ── Dark mode ── */
.p9-tick-failed {
    background:linear-gradient(135deg,#dc2626,#7f1d1d) !important;
    color:#fff}
.p9-si-error {
    color:#dc2626; font-size:12px; font-weight:600; line-height:1.5}
body.gradia-pos-dark .p9-pay-modal-card { background:#0d1526 }

/* ── Spinner (used in loading states) ── */
.p9-mm-spinner {
    width:32px; height:32px; border-radius:50%;
    border:3px solid var(--p9-border,rgba(0,0,0,.1));
    border-top-color:var(--p9-grad-start,#1e90ff);
    animation:p9-spin .8s linear infinite}
@keyframes p9-spin { to{transform:rotate(360deg)} }

/* ── Card form (Stripe / generic card) ── */
.p9-card-preview {
    height:130px; border-radius:16px; margin:0 0 14px;
    background:linear-gradient(135deg,#1e3a5f 0%,#0d1b2a 100%);
    padding:18px 20px; position:relative; overflow:hidden;
    box-shadow:0 8px 28px rgba(0,0,0,.35); cursor:default;
    transition:transform .4s; transform-style:preserve-3d; perspective:600px}
.p9-card-preview[data-brand="visa"] { background:linear-gradient(135deg,#1a1f71 0%,#000428 100%) }
.p9-card-preview[data-brand="mc"] { background:linear-gradient(135deg,#333 0%,#000 100%) }
.p9-card-preview[data-brand="verve"] { background:linear-gradient(135deg,#006529 0%,#002210 100%) }
.p9-card-preview[data-brand="amex"] { background:linear-gradient(135deg,#2e77bc 0%,#0a2540 100%) }
.p9-card-preview.flipped { transform:rotateY(180deg) }
.p9-card-chip {
    width:32px; height:24px; border-radius:5px;
    background:linear-gradient(135deg,#d4a017,#a0780d);
    margin-bottom:16px; position:relative}
.p9-card-chip::before,.p9-card-chip::after {
    content:''; position:absolute; border:1px solid rgba(0,0,0,.25)}
.p9-card-chip::before { inset:4px 0; border-radius:0; border-left:0; border-right:0 }
.p9-card-chip::after { inset:0 4px; border-radius:0; border-top:0; border-bottom:0 }
.p9-card-num { font-family:'Courier New',monospace; font-size:16px; font-weight:700;
    color:#fff; letter-spacing:3px; margin-bottom:14px; text-shadow:0 1px 3px rgba(0,0,0,.4) }
.p9-card-row { display:flex; justify-content:space-between; align-items:flex-end }
.p9-card-lbl { font-size:8px; text-transform:uppercase; letter-spacing:.8px; color:rgba(255,255,255,.6); margin-bottom:2px }
.p9-card-val { font-size:11px; font-weight:700; color:#fff; letter-spacing:1px }
.p9-card-fields { padding:0 }
.p9-cf-input { transition:border-color .15s, box-shadow .15s }
.p9-cf-input:focus { box-shadow:0 0 0 3px rgba(30,144,255,.15) }

/* ── Mobile money UI — step-by-step ── */
.p9-mm-wrap { display:flex; flex-direction:column; gap:0; padding:2px 0 4px }

.p9-mm-step-block {
    display:flex; gap:12px; align-items:flex-start; padding:10px 0}

.p9-mm-step-num {
    width:24px; height:24px; border-radius:50%; flex-shrink:0; margin-top:1px;
    display:flex; align-items:center; justify-content:center;
    font-size:11px; font-weight:800; color:#fff}

.p9-mm-step-body { flex:1; min-width:0 }

.p9-mm-step-title {
    font-size:12px; font-weight:700; color:var(--p9-text,#1e293b);
    line-height:1.3; margin-bottom:2px}

.p9-mm-step-hint {
    font-size:11px; color:var(--p9-muted,#64748b); line-height:1.5; margin-bottom:0}

.p9-mm-arrow {
    text-align:center; font-size:16px; color:var(--p9-muted,#94a3b8);
    line-height:1; padding:0 0 0 36px; margin:-4px 0}

.p9-mm-waiting {
    background:var(--p9-bg,#f1f5f9); border-radius:10px;
    padding:10px 12px; margin-top:4px}

.p9-mm-waiting-inner {
    display:flex; align-items:center; gap:10px}

.p9-mm-waiting strong { color:var(--p9-text,#1e293b); font-size:12px }

.p9-mm-required {
    display:inline-block; font-size:9px; font-weight:800; text-transform:uppercase;
    letter-spacing:.4px; background:#dc2626; color:#fff;
    padding:1px 6px; border-radius:4px; margin-left:5px; vertical-align:middle}

.p9-mm-nocode {
    font-size:11px; color:var(--p9-muted,#94a3b8); margin-top:8px}

.p9-mm-skip-btn {
    background:none; border:none; color:var(--p9-grad-start,#1e90ff);
    font-size:11px; font-weight:600; cursor:pointer; padding:0;
    text-decoration:underline; text-underline-offset:2px}

.p9-mm-skip-btn:hover { opacity:.75 }

body.gradia-pos-dark .p9-mm-waiting { background:rgba(255,255,255,.05) }
body.gradia-pos-dark .p9-mm-step-title { color:#e2e8f0 }

/* ── Popup gateway UI ── */
.p9-popup-gw-wrap { display:flex; flex-direction:column; gap:10px; padding:4px 0 6px }
.p9-popup-gw-badge {
    display:flex; justify-content:center; align-items:center; gap:6px;
    padding:12px; background:var(--p9-bg,#f1f5f9); border-radius:12px; flex-wrap:wrap}
.p9-popup-gw-badge .p9-ci { height:26px; min-width:38px; font-size:10px; border-radius:6px }
.p9-popup-gw-badge .p9-ci-mc { width:38px; height:26px }
.p9-popup-gw-badge .p9-ci-mc b { width:20px; height:20px; top:3px }
.p9-popup-gw-hint { font-size:12px; color:var(--p9-muted,#64748b); text-align:center; line-height:1.5; margin:0 }
.p9-popup-ref-display {
    text-align:center; padding:10px 12px;
    background:rgba(16,185,129,.08); border:1px solid rgba(16,185,129,.2);
    border-radius:10px; margin-top:4px}
.p9-popup-success-badge { font-size:13px; font-weight:700; color:#059669; margin-bottom:4px }
.p9-popup-ref-code { font-size:11px; color:#6b7280; font-family:'Courier New',monospace }
body.gradia-pos-dark .p9-popup-gw-badge { background:rgba(255,255,255,.05) }

/* ── Bank transfer details ── */
.p9-bt-wrap { display:flex; flex-direction:column; gap:6px; padding:4px 0 8px }
.p9-bt-instructions {
    font-size:12px; color:var(--p9-muted,#64748b); line-height:1.5;
    background:var(--p9-bg,#f1f5f9); padding:10px 12px; border-radius:10px; margin:0}
.p9-bt-row {
    display:flex; justify-content:space-between; align-items:center;
    padding:8px 12px; background:var(--p9-bg,#f8fafc);
    border:1px solid var(--p9-border,rgba(0,0,0,.07)); border-radius:8px}
.p9-bt-row span { font-size:11px; color:var(--p9-muted,#64748b) }
.p9-bt-row strong { font-size:12px; color:var(--p9-text,#1e293b); font-family:'Courier New',monospace }
body.gradia-pos-dark .p9-bt-row { background:rgba(255,255,255,.04); border-color:rgba(255,255,255,.08) }
body.gradia-pos-dark .p9-bt-row strong { color:#e2e8f0 }
body.gradia-pos-dark .p9-pmc-instructions { background:#1a2540; border-color:rgba(255,255,255,.08) }
body.gradia-pos-dark .p9-pmc-step { color:#cbd5e1 }
body.gradia-pos-dark .p9-pmc-desc { color:#94a3b8 }
body.gradia-pos-dark .p9-pmi-input {
    background:#1e293b; border-color:rgba(255,255,255,.12); color:#e2e8f0}
body.gradia-pos-dark .p9-pmi-input:focus { background:#243046 }


.p9-var-item {
    display:flex; justify-content:space-between; align-items:center;
    padding:10px 12px; border:1px solid var(--p9-border);
    border-radius:10px; margin-bottom:6px; cursor:pointer;
    transition:all .12s}

.p9-var-item:hover { border-color:var(--p9-grad-start,#1e90ff); background:var(--p9-ring-05) }
.p9-var-name  { font-size:12px; font-weight:500; color:var(--p9-text,#1e293b) }
.p9-var-price { font-size:12px; font-weight:700; color:var(--p9-grad-start,#1e90ff) }

/* Spinners */
.p9-spinner {
    display:inline-block; width:22px; height:22px;
    border:2.5px solid var(--p9-border,rgba(0,0,0,.1));
    border-top-color:var(--p9-grad-start,#1e90ff);
    border-radius:50%; animation:p9-spin .7s linear infinite}

.p9-spinner-sm {
    display:inline-block; width:14px; height:14px;
    border:2px solid rgba(255,255,255,.3); border-top-color:#fff;
    border-radius:50%; animation:p9-spin .7s linear infinite; vertical-align:middle}

@keyframes p9-spin { to { transform:rotate(360deg) } }
@keyframes p9-btn-ping { 0%,100%{transform:scale(1)} 50%{transform:scale(1.18)} }

/* ── Dark mode ─────────────────────────────────────────────────── */

/* Diagonal gradient background: theme colour (top-left) → black (bottom-right) */
body.gradia-pos-dark .p9-pos-wrap {
    background: linear-gradient(135deg, var(--p9-grad-start, #1e90ff) 0%, #000000 100%) !important;
}

/* Left panel transparent so the wrap gradient shows through */
body.gradia-pos-dark .p9-pos-left {
    background: transparent !important;
    border-right-color: rgba(255,255,255,.08) !important;
}

/* Search row: frosted glass strip */
body.gradia-pos-dark .p9-pos-search-row {
    background: rgba(0,0,0,.35) !important;
    border-bottom-color: rgba(255,255,255,.07) !important;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

/* Right payment panel: matching gradient, slightly more opaque so numerals stay readable */
body.gradia-pos-dark .p9-pos-right {
    background: linear-gradient(135deg,
        color-mix(in srgb, var(--p9-grad-start, #1e90ff) 22%, #0a0a0a) 0%,
        #0a0a0a 100%
    ) !important;
    border-left: 1px solid color-mix(in srgb, var(--p9-grad-start, #1e90ff) 15%, transparent) !important;
}

/* Let the gradient on p9-pos-right show through all child panels */
body.gradia-pos-dark .p9-right-payment-col,
body.gradia-pos-dark .p9-right-basket-col,
body.gradia-pos-dark .p9-payment-section,
body.gradia-pos-dark .p9-calc,
body.gradia-pos-dark .p9-charge-wrap,
body.gradia-pos-dark .p9-basket,
body.gradia-pos-dark .p9-totals,
body.gradia-pos-dark .p9-customer-wrap {
    background: transparent !important;
}

body.gradia-pos-dark .p9-pos-float-card, body.gradia-pos-dark .p9-success-card, body.gradia-pos-dark .p9-var-card { background:#0f172a }
body.gradia-pos-dark .p9-pos-float-card h2, body.gradia-pos-dark .p9-success-card h3 { color:#e2e8f0 }

/* ── Product cards: solid grey → black diagonal gradient, no transparency ── */
body.gradia-pos-dark .p9-prod-card {
    background: linear-gradient(135deg, #6b7280 0%, #000000 100%) !important;
    border: 1px solid rgba(255,255,255,.15) !important;
    box-shadow: 0 4px 20px rgba(0,0,0,.6), 0 1px 4px rgba(0,0,0,.4) !important;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

body.gradia-pos-dark .p9-prod-card:hover:not(.p9-oos) {
    box-shadow: 0 10px 36px rgba(0,0,0,.7), 0 2px 8px rgba(0,0,0,.45) !important;
    border: none !important;
}

/* In-basket: glow ring using theme colour instead of border */
body.gradia-pos-dark .p9-prod-card.p9-in-basket {
    border: none !important;
    box-shadow: 0 0 0 2px var(--p9-grad-start, #1e90ff),
                0 6px 24px rgba(0,0,0,.6) !important;
}

/* Card text: crisp white */
body.gradia-pos-dark .p9-card-price   { color:#ffffff !important }
body.gradia-pos-dark .p9-card-name    { color:#ffffff !important }
body.gradia-pos-dark .p9-card-name, body.gradia-pos-dark .p9-grand-num, body.gradia-pos-dark .p9-total-grand { color:#ffffff }
body.gradia-pos-dark .p9-card-sku     { color:rgba(255,255,255,.5) !important }
body.gradia-pos-dark .p9-card-stock   { color:rgba(255,255,255,.5) !important }

/* Card image area: slightly tinted so product images pop */
body.gradia-pos-dark .p9-card-img     { background:#eef1f5 !important }

body.gradia-pos-dark .p9-srch-input, body.gradia-pos-dark .p9-cust-input { background:rgba(255,255,255,.06); color:#e2e8f0 }
body.gradia-pos-dark .p9-notes-group { background:rgba(255,255,255,.06); border-color:rgba(255,255,255,.12) }
body.gradia-pos-dark .p9-note-row + .p9-note-row { border-top-color:rgba(255,255,255,.08) }
body.gradia-pos-dark .p9-note-input { color:#e2e8f0 !important }
body.gradia-pos-dark .p9-pos-search-box { border-color:rgba(255,255,255,.12) }
body.gradia-pos-dark .p9-customer-field { border-color:rgba(255,255,255,.12) }
body.gradia-pos-dark .p9-pos-search-box:focus-within,
body.gradia-pos-dark .p9-customer-field:focus-within { border-color:var(--p9-grad-start,#1e90ff); box-shadow:0 0 0 2px rgba(30,144,255,.2) }
body.gradia-pos-dark .p9-nk           {
    background: linear-gradient(135deg,
        color-mix(in srgb, var(--p9-grad-start, #1e90ff) 12%, rgba(255,255,255,.04)) 0%,
        rgba(255,255,255,.04) 100%
    );
    border-color: color-mix(in srgb, var(--p9-grad-start, #1e90ff) 18%, rgba(255,255,255,.08));
    color: #e2e8f0;
}
body.gradia-pos-dark .p9-nk[data-k="⌫"] { background:rgba(239,68,68,.15); border-color:rgba(239,68,68,.2) }
body.gradia-pos-dark .p9-nk[data-k="C"]  { background:rgba(234,179,8,.12); border-color:rgba(234,179,8,.15) }
body.gradia-pos-dark .p9-bitem        {
    background: linear-gradient(135deg, color-mix(in srgb, var(--p9-grad-start,#1e90ff) 35%, #0a0a0a) 0%, #0a0a0a 100%);
    border-color: color-mix(in srgb, var(--p9-grad-start,#1e90ff) 25%, rgba(255,255,255,.06));
}

body.gradia-pos-dark .p9-calc-display {
    background: linear-gradient(135deg, color-mix(in srgb, var(--p9-grad-start,#1e90ff) 30%, #0a0a0a) 0%, #0a0a0a 100%);
    border-color: color-mix(in srgb, var(--p9-grad-start,#1e90ff) 25%, rgba(255,255,255,.08));
}

body.gradia-pos-dark .p9-qk {
    background: linear-gradient(135deg, color-mix(in srgb, var(--p9-grad-start,#1e90ff) 28%, #0a0a0a) 0%, #0a0a0a 100%);
    border-color: color-mix(in srgb, var(--p9-grad-start,#1e90ff) 22%, rgba(255,255,255,.08));
    color: rgba(255,255,255,.7);
}
body.gradia-pos-dark .p9-qk:hover {
    border-color: var(--p9-grad-start,#1e90ff);
    color: #fff;
    box-shadow: 0 0 8px color-mix(in srgb, var(--p9-grad-start,#1e90ff) 35%, transparent);
}

body.gradia-pos-dark .p9-change-row {
    background: linear-gradient(135deg, color-mix(in srgb, var(--p9-grad-start,#1e90ff) 28%, #0a0a0a) 0%, #0a0a0a 100%);
}
body.gradia-pos-dark .p9-bi-name      { color:#e2e8f0 }
body.gradia-pos-dark .p9-qty-btn      { background: transparent; border-color: color-mix(in srgb, var(--p9-grad-start,#1e90ff) 25%, rgba(255,255,255,.12)); color: #e2e8f0; }
body.gradia-pos-dark .p9-qty-n        { background: transparent; border-color: color-mix(in srgb, var(--p9-grad-start,#1e90ff) 25%, rgba(255,255,255,.12)); color: #fff; }
body.gradia-pos-dark .p9-var-header   { color:#e2e8f0; border-color:rgba(255,255,255,.08) }
body.gradia-pos-dark .p9-suc-print    { background:rgba(255,255,255,.06); border-color:rgba(255,255,255,.1); color:#e2e8f0 }
body.gradia-pos-dark .p9-ppf-body input,
body.gradia-pos-dark .p9-ppf-body textarea,
body.gradia-pos-dark .p9-ppf-body select {
    background: rgba(255,255,255,.06);
    color: #e2e8f0;
    border-color: rgba(255,255,255,.12);
    color-scheme: dark;
}
body.gradia-pos-dark .p9-ppf-body select option {
    background: #1e293b;
    color: #e2e8f0;
}
body.gradia-pos-dark .p9-cust-dd     { background:#0f172a; border-color:rgba(255,255,255,.1) }

/* ── Dark mode: category bar + grid + category pills ─────────── */

/* Category bar: frosted glass over the gradient */
body.gradia-pos-dark .p9-cats {
    background: rgba(0,0,0,.35) !important;
    border-bottom-color: rgba(255,255,255,.07) !important;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

/* Inactive category pills: semi-transparent with white text */
body.gradia-pos-dark .p9-cat {
    color: rgba(255,255,255,.65) !important;
    border-color: rgba(255,255,255,.15) !important;
}

/* Product grid background: transparent so wrap gradient shows through */
body.gradia-pos-dark .p9-grid {
    background: transparent !important;
}

/* Pagination bar: same gradient as the wrap */
body.gradia-pos-dark .p9-pagination {
    background: linear-gradient(135deg,
        color-mix(in srgb, var(--p9-grad-start,#1e90ff) 22%, #000) 0%,
        #000 100%
    ) !important;
    border-top-color: color-mix(in srgb, var(--p9-grad-start,#1e90ff) 20%, rgba(255,255,255,.06)) !important;
}
body.gradia-pos-dark .p9-pg-btn {
    color: rgba(255,255,255,.75);
    border-color: color-mix(in srgb, var(--p9-grad-start,#1e90ff) 25%, rgba(255,255,255,.1));
}
body.gradia-pos-dark .p9-pg-btn:hover:not(:disabled) {
    background: color-mix(in srgb, var(--p9-grad-start,#1e90ff) 20%, transparent);
    border-color: var(--p9-grad-start,#1e90ff);
    color: #fff;
}

/* ── Mobile responsive ─────────────────────────────────────────── */

/* Prevent zoom on input focus (iOS) — touch-action + font-size trick */
@media (max-width:900px) {
    .p9-srch-input,
    .p9-cust-input,
    .p9-note-input,
    .p9-float-input { font-size:16px !important } /* iOS won't zoom if font-size >= 16px */
}

/* Hide the portal dashboard topbar when POS is active on mobile */
@media (max-width:900px) {
    body.gradia-pos-pos-active .gradia-pos-mobile-topbar,
    body.gradia-pos-pos-active .gradia-pos-topbar-desktop { display:none !important }

    /* Cashier fullscreen: p9-pos-wrap covers everything */
    body.gradia-pos-pos-active .p9-pos-wrap.p9-pos-fullscreen {
        height:100dvh;
        border-radius:0}

    /* Non-cashier on mobile: topbar hidden so wrap can take full height */
    body.gradia-pos-pos-active .p9-pos-wrap:not(.p9-pos-fullscreen) {
        height:100dvh}
}

@media (max-width:900px) {

    /* Wrap: cashier fullscreen fills 100dvh; non-cashier accounts for 2-row topbar (~82px) */
    .p9-pos-wrap {
        height:calc(100dvh - var(--p9-topbar-h,76px));
        min-height:0}

    .p9-pos-wrap.p9-pos-fullscreen { height:100dvh }

    .p9-pos-mobile-tabs {
        display:flex;
        flex-shrink:0;
        position:relative;
        z-index:10;
        justify-content:space-between}

    /* Layout fills remaining space as a positioned container */
    .p9-pos-layout {
        grid-template-columns:1fr;
        flex:1;
        min-height:0;
        position:relative;
        overflow:hidden}



    /* Both panels fill the layout area and scroll their own content */
    .p9-pos-left,
    .p9-pos-right {
        position:absolute;
        inset:0;
        width:100%;
        height:100%;
        overflow-y:auto;
        overflow-x:hidden;
        -webkit-overflow-scrolling:touch;
        display:block}

    /* On mobile, right panel is single column (stacked) */
    .p9-pos-right {
        display:block;
        grid-template-columns:unset;
        opacity:0;
        pointer-events:none;
        transform:translateX(15px);
        overflow-y:auto;
        overflow-x:hidden}

    .p9-right-basket-col,
    .p9-right-payment-col {
        display:block;
        overflow:visible;
        height:auto}

    .p9-right-basket-col .p9-basket,
    .p9-right-basket-col .p9-totals {
        flex:none}

    .p9-mob-hidden { opacity:0; pointer-events:none; transform:translateX(15px); z-index:1 }
    .p9-mob-show   { opacity:1; pointer-events:auto;  transform:translateX(0);   z-index:2 }

    /* Product grid */
    .p9-grid {
        grid-template-columns:repeat(auto-fill,minmax(160px,1fr));
        flex:none}

    /* Basket: not flex:1 on mobile — let the panel scroll */
    .p9-basket {
        flex:none;
        overflow:visible;
        min-height:100px;
        padding:8px}

    /* Mobile right panel: stack vertically, charge button sticks to bottom */
    .p9-right-top .p9-basket { max-height:28vh }

    /* iOS home indicator clearance */
    .p9-charge-wrap {
        padding-bottom:calc(14px + env(safe-area-inset-bottom, 0px))}

    .p9-pay-methods { gap:4px }
    .p9-pay-method  { padding:8px 10px }
    .p9-pm-icons    { display:none }
    .p9-ppf-grid  { grid-template-columns:1fr }

    /* Pill roundness on mobile search */
    .p9-pos-search-row { padding:8px 10px; gap:6px }
    .p9-srch-input { padding:10px 46px 10px 34px }

}

@media (max-width:480px) {
    .p9-grid   { grid-template-columns:repeat(2,1fr) }
    .p9-numpad { gap:4px }
    .p9-nk     { padding:12px 4px; font-size:17px }
    .p9-camera-panel { max-width:100%; border-radius:0 0 16px 16px; margin:0 0 4px }
    /* Shorten "New Product" to "+ New" on very small screens */
    .p9-pos-add-btn { padding:9px 11px; font-size:11px }
}

/* ── Offline / Sync UI ─────────────────────────────────────────── */

/* Offline banner — slides down when connection is lost */
.p9-offline-banner {
    display:none; align-items:center; justify-content:center; gap:10px;
    padding:9px 16px; flex-shrink:0;
    background:linear-gradient(90deg,#b45309,#92400e);
    color:#fff; font-size:12px; font-weight:600}

.p9-offline-banner svg { flex-shrink:0; opacity:.9 }

.p9-offline-banner strong { font-size:13px }

.p9-offline-banner small {
    font-weight:400; opacity:.85;
    display:none}

@media(min-width:500px){ .p9-offline-banner small { display:inline } }

/* Queue badge in topbar */
#p9-queue-badge {
    display:none; align-items:center;
    background:rgba(251,191,36,.25); color:#fbbf24;
    border:1px solid rgba(251,191,36,.35);
    border-radius:20px; padding:3px 10px;
    font-size:11px; font-weight:700;
    animation:p9-pulse 2s infinite}

/* Sync banner — slides in at top of POS wrap */
.p9-sync-banner {
    display:flex; align-items:center; justify-content:center; gap:8px;
    padding:9px 16px; flex-shrink:0;
    background:linear-gradient(90deg,#0369a1,#0284c7);
    color:#fff; font-size:12px; font-weight:600}

.p9-sync-banner.p9-sync-done {
    background:linear-gradient(90deg,#15803d,#16a34a)}

/* Offline products placeholder */
.p9-grid-offline {
    grid-column:1/-1; display:flex; flex-direction:column;
    align-items:center; justify-content:center; gap:8px;
    padding:2.5rem; color:var(--p9-muted,#94a3b8); text-align:center}

.p9-grid-offline p { font-size:.85rem; font-weight:600; margin:0; color:var(--p9-text,#1e293b) }
.p9-grid-offline small { font-size:.75rem; max-width:280px; line-height:1.5 }

/* Transient offline notice (top of product panel) */
.p9-offline-notice {
    background:#fef3c7; color:#92400e;
    border-bottom:1px solid #fde68a;
    padding:7px 14px; font-size:12px; font-weight:500;
    text-align:center; flex-shrink:0}

/* Queued success state */
.p9-tick-queued {
    background:linear-gradient(135deg,#b45309,#92400e) !important;
    font-size:1.5rem !important}

.p9-queued-note {
    display:flex; align-items:center; justify-content:center; gap:5px;
    font-size:11px; color:var(--p9-muted,#64748b);
    background:var(--p9-bg,#f8fafc); border-radius:8px;
    padding:7px 10px; margin-top:4px; line-height:1.4}

/* ═══════════════════════════════════════════════════════════════
   Physical Terminal Modal
═══════════════════════════════════════════════════════════════ */

.p9-terminal-card {
    background:var(--p9-panel,#fff);
    border-radius:24px; max-width:400px; width:calc(100% - 2rem);
    box-shadow:0 32px 80px rgba(0,0,0,.4);
    overflow:hidden; display:flex; flex-direction:column}

/* Header */
.p9-terminal-header {
    padding:22px 20px 18px;
    background:linear-gradient(150deg,#635bff 0%,#0a0933 100%);
    position:relative; text-align:center}

.p9-terminal-header .p9-pmc-close {
    position:absolute; top:14px; right:14px}

.p9-terminal-hw-icon {
    font-size:2.8rem; margin-bottom:6px; display:block}

.p9-terminal-title {
    font-size:15px; font-weight:800; color:#fff; margin-bottom:4px}

.p9-terminal-amount {
    font-size:2rem; font-weight:900; color:#fff;
    letter-spacing:-1px; text-shadow:0 2px 8px rgba(0,0,0,.3)}

/* Body */
.p9-terminal-body {
    padding:20px 20px 8px; min-height:160px;
    display:flex; flex-direction:column; align-items:center; justify-content:center}

.p9-terminal-section-hdr {
    font-size:10px; font-weight:700; text-transform:uppercase;
    letter-spacing:.6px; color:var(--p9-muted,#94a3b8); margin-bottom:10px; width:100%}

/* Reader picker */
.p9-terminal-readers { width:100%; display:flex; flex-direction:column; gap:6px }

.p9-terminal-reader-row {
    display:flex; align-items:center; gap:12px; padding:10px 12px;
    border:1.5px solid var(--p9-border,rgba(0,0,0,.1)); border-radius:12px;
    cursor:pointer; transition:border-color .15s, background .15s}

.p9-terminal-reader-row:hover { border-color:var(--p9-grad-start,#1e90ff); background:rgba(30,144,255,.04) }

.p9-tr-icon { font-size:1.4rem }
.p9-tr-info { flex:1; min-width:0 }
.p9-tr-label { font-size:13px; font-weight:700; color:var(--p9-text,#1e293b) }
.p9-tr-sub   { font-size:11px; color:var(--p9-muted,#94a3b8) }
.p9-tr-status { font-size:11px; font-weight:700; flex-shrink:0 }
.p9-tr-status.online  { color:#16a34a }
.p9-tr-status.offline { color:#94a3b8 }

/* Status area */
.p9-terminal-status-wrap { text-align:center; padding:8px 0; width:100% }
.p9-terminal-status-title { font-size:14px; font-weight:700; color:var(--p9-text,#1e293b); margin:12px 0 4px }
.p9-terminal-status-msg   { font-size:12px; color:var(--p9-muted,#64748b); line-height:1.5 }

/* Animated rings (waiting state) */
.p9-term-ring {
    display:inline-block; position:relative; width:64px; height:64px}
.p9-term-ring div {
    position:absolute; border:4px solid transparent; border-radius:50%;
    animation:p9-term-ring 1.2s cubic-bezier(.5,0,.5,1) infinite}
.p9-term-ring div:nth-child(1) { border-top-color:#635bff; animation-delay:-.45s; inset:4px }
.p9-term-ring div:nth-child(2) { border-top-color:#635bff; animation-delay:-.3s; inset:12px }
.p9-term-ring div:nth-child(3) { border-top-color:#635bff; animation-delay:-.15s; inset:20px }
.p9-term-ring div:nth-child(4) { border-top-color:#635bff; inset:28px }
@keyframes p9-term-ring {
    0%{transform:rotate(0deg)} 100%{transform:rotate(360deg)}}

/* Pulse (processing) */
.p9-term-pulse {
    width:48px; height:48px; border-radius:50%;
    background:rgba(99,91,255,.25);
    animation:p9-term-pulse 1s ease-in-out infinite}
@keyframes p9-term-pulse {
    0%,100%{transform:scale(.9)} 50%{transform:scale(1.1)}}

/* Dots (idle) */
.p9-term-dots { display:flex; gap:6px; align-items:center; justify-content:center; height:48px }
.p9-term-dots span {
    width:10px; height:10px; border-radius:50%;
    background:var(--p9-grad-start,#1e90ff); display:block;
    animation:p9-term-dot 1s ease-in-out infinite}
.p9-term-dots span:nth-child(2) { animation-delay:.15s }
.p9-term-dots span:nth-child(3) { animation-delay:.3s }
@keyframes p9-term-dot {
    0%,80%,100%{transform:scale(.8);opacity:.5} 40%{transform:scale(1);opacity:1}}

/* Success */
.p9-terminal-success-tick {
    width:56px; height:56px; border-radius:50%;
    background:linear-gradient(135deg,#16a34a,#052e16);
    color:#fff; font-size:1.8rem; font-weight:900;
    display:flex; align-items:center; justify-content:center;
    margin:0 auto 10px; box-shadow:0 4px 16px rgba(22,163,74,.4)}
.p9-terminal-success-title {
    font-size:15px; font-weight:800; color:var(--p9-text,#1e293b);
    text-align:center; margin-bottom:10px}
.p9-terminal-success-detail { width:100% }
.p9-ts-row {
    display:flex; justify-content:space-between; padding:6px 12px;
    background:var(--p9-bg,#f8fafc); border-radius:8px; margin-bottom:4px}
.p9-ts-row span   { font-size:11px; color:var(--p9-muted,#94a3b8) }
.p9-ts-row strong { font-size:12px; font-family:'Courier New',monospace; color:var(--p9-text,#1e293b) }

/* Error */
.p9-terminal-error-icon {
    width:52px; height:52px; border-radius:50%;
    background:linear-gradient(135deg,#dc2626,#7f1d1d);
    color:#fff; font-size:1.6rem; font-weight:900;
    display:flex; align-items:center; justify-content:center;
    margin:0 auto 10px; box-shadow:0 4px 16px rgba(220,38,38,.4)}
.p9-terminal-error-msg {
    font-size:12px; color:var(--p9-muted,#64748b); text-align:center;
    line-height:1.5; margin-bottom:12px; white-space:pre-wrap}
.p9-terminal-retry-btn {
    padding:8px 20px; border-radius:10px; border:none;
    background:linear-gradient(135deg,#dc2626,#7f1d1d);
    color:#fff; font-size:12px; font-weight:700; cursor:pointer}

/* Footer */
.p9-terminal-footer {
    padding:12px 20px 16px; border-top:1px solid var(--p9-border,rgba(0,0,0,.07))}

.p9-terminal-cancel-btn {
    width:100%; padding:10px; border-radius:10px;
    border:1.5px solid var(--p9-border,rgba(0,0,0,.12)); background:transparent;
    color:var(--p9-muted,#64748b); font-size:13px; font-weight:600; cursor:pointer}

/* ── Large screens (>1400px): wider products, bigger cards ─── */
@media (min-width: 1400px) {
    .p9-pos-layout { grid-template-columns: 1fr 420px; }
    .p9-grid { grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); }
}
@media (min-width: 1800px) {
    .p9-pos-layout { grid-template-columns: 1fr 460px; }
    .p9-grid { grid-template-columns:repeat(auto-fill,minmax(160px,1fr)); }
}

/* Dark mode */
body.gradia-pos-dark .p9-terminal-card { background:#0d1526 }
body.gradia-pos-dark .p9-terminal-reader-row { border-color:rgba(255,255,255,.1); background:rgba(255,255,255,.03) }
body.gradia-pos-dark .p9-terminal-reader-row:hover { background:rgba(30,144,255,.1) }
body.gradia-pos-dark .p9-tr-label { color:#e2e8f0 }
body.gradia-pos-dark .p9-terminal-status-title { color:#e2e8f0 }
body.gradia-pos-dark .p9-ts-row { background:rgba(255,255,255,.05) }
body.gradia-pos-dark .p9-ts-row strong { color:#e2e8f0 }


/* =============================================================
   DR-2/DR-4/DR-5: Drawer / Float Modals
   ============================================================= */

.p9-drawer-modal-overlay {
    position: fixed;
    inset: 0;
    z-index: 9999;
    background: rgba(0,0,0,.65);
    backdrop-filter: blur(6px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    animation: p9DrawerFadeIn .2s ease;
}
@keyframes p9DrawerFadeIn { from{opacity:0} to{opacity:1} }

.p9-drawer-modal-card {
    background: var(--p9-panel, #fff);
    border-radius: 20px;
    padding: 36px 32px;
    width: 100%;
    max-width: 420px;
    box-shadow: 0 24px 80px rgba(0,0,0,.4);
    border: 1px solid var(--p9-border, rgba(0,0,0,.07));
    animation: p9DrawerSlideUp .25s ease;
    position: relative;
}
@keyframes p9DrawerSlideUp { from{opacity:0;transform:translateY(20px)} to{opacity:1;transform:none} }

.p9-drawer-icon { font-size: 42px; text-align: center; margin-bottom: 12px; }
.p9-drawer-title {
    font-size: 20px; font-weight: 700;
    color: var(--p9-text, #0f172a);
    text-align: center; margin-bottom: 6px;
}
.p9-drawer-sub {
    font-size: 13.5px; color: var(--p9-muted, #64748b);
    text-align: center; margin-bottom: 20px; line-height: 1.5;
}
.p9-drawer-note {
    font-size: 12px; color: var(--p9-muted, #64748b);
    text-align: center; margin: 10px 0 16px; line-height: 1.5;
}
.p9-drawer-label {
    display: block; font-size: 11px; font-weight: 600;
    color: var(--p9-muted, #64748b);
    text-transform: uppercase; letter-spacing: .4px;
    margin-bottom: 8px;
}
.p9-drawer-input-row {
    display: flex; align-items: center;
    border: 1.5px solid var(--p9-border, rgba(0,0,0,.1));
    border-radius: 12px;
    overflow: hidden;
    background: var(--p9-bg, #f8fafc);
    margin-bottom: 16px;
    transition: border-color .2s;
}
.p9-drawer-input-row:focus-within { border-color: var(--p9-grad-start, #1e90ff); }
.p9-drawer-sym {
    padding: 0 12px;
    font-size: 14px; font-weight: 600;
    color: var(--p9-muted, #64748b);
    background: var(--p9-border, rgba(0,0,0,.04));
    border-right: 1.5px solid var(--p9-border, rgba(0,0,0,.08));
    align-self: stretch; display: flex; align-items: center;
}
.p9-drawer-input {
    flex: 1; padding: 13px 14px;
    border: none; background: transparent;
    font-size: 18px; font-weight: 600;
    color: var(--p9-text, #0f172a);
    font-family: inherit; outline: none;
}

/* Carry-forward amount display */
.p9-drawer-carry-amount {
    font-size: 36px; font-weight: 800;
    color: var(--p9-grad-start, #1e90ff);
    text-align: center; margin: 12px 0 20px;
    letter-spacing: -1px;
}

/* Buttons */
.p9-drawer-carry-actions { display: flex; flex-direction: column; gap: 10px; }
.p9-drawer-btn {
    width: 100%; padding: 13px 16px;
    border: none; border-radius: 12px;
    font-size: 14px; font-weight: 600;
    font-family: inherit; cursor: pointer;
    display: flex; align-items: center; justify-content: center; gap: 8px;
    transition: opacity .2s, transform .15s;
}
.p9-drawer-btn:hover:not(:disabled) { opacity: .88; transform: translateY(-1px); }
.p9-drawer-btn:disabled { opacity: .5; cursor: not-allowed; transform: none; }
.p9-drawer-btn-primary {
    background: linear-gradient(135deg, var(--p9-grad-start, #1e90ff) 0%, #000 100%);
    color: #fff;
}
.p9-drawer-btn-secondary {
    background: var(--p9-bg, #f1f5f9);
    color: var(--p9-text, #334155);
    border: 1.5px solid var(--p9-border, rgba(0,0,0,.1));
}
.p9-drawer-btn-danger {
    background: rgba(239,68,68,.1);
    color: #ef4444;
    border: 1.5px solid rgba(239,68,68,.2);
}

/* Spinner inside modal */
.p9-drawer-spinner {
    display: flex; align-items: center; justify-content: center; gap: 10px;
    font-size: 13px; color: var(--p9-muted, #64748b);
    padding: 12px 0;
}
.p9-spin {
    width: 18px; height: 18px;
    border: 2.5px solid var(--p9-border, rgba(0,0,0,.1));
    border-top-color: var(--p9-grad-start, #1e90ff);
    border-radius: 50%;
    animation: p9Spin .7s linear infinite;
}
@keyframes p9Spin { to { transform: rotate(360deg); } }

/* Error message inside modal */
.p9-drawer-msg {
    padding: 10px 14px; border-radius: 8px; font-size: 13px;
    margin-top: 12px; line-height: 1.5;
    background: rgba(239,68,68,.1);
    border: 1px solid rgba(239,68,68,.2);
    color: #ef4444;
}

/* Mobile: full-width card */
@media (max-width: 480px) {
    .p9-drawer-modal-overlay { padding: 12px; align-items: flex-end; }
    .p9-drawer-modal-card {
        border-radius: 20px 20px 0 0;
        max-width: 100%;
        padding: 28px 20px 36px;
    }
}

/* ── Dark mode ────────────────────────────────────────────── */
/* --p9-text, --p9-bg, --p9-panel, --p9-border, --p9-muted are now real CSS
   custom properties defined in gradia-pos.php. var() calls in both static
   CSS and JS-generated inline HTML resolve correctly for both modes.
   These rules handle anything that needs explicit overrides beyond the vars. */

body.gradia-pos-dark .p9-drawer-modal-card {
    background: var(--p9-panel);
    border-color: var(--p9-border);
    box-shadow: 0 24px 80px rgba(0,0,0,.6);
}
body.gradia-pos-dark .p9-drawer-btn-secondary {
    background: rgba(255,255,255,.07);
    border-color: var(--p9-border);
}
body.gradia-pos-dark .p9-drawer-btn-danger {
    background: rgba(239,68,68,.15);
}
body.gradia-pos-dark .p9-spin {
    border-color: var(--p9-border);
    border-top-color: var(--p9-grad-start, #1e90ff);
}
body.gradia-pos-dark .p9-refund-order-row {
    border-bottom-color: var(--p9-border);
}
body.gradia-pos-dark .p9-split-row select,
body.gradia-pos-dark .p9-split-row .p9-drawer-input {
    background: rgba(255,255,255,.05);
    border-color: var(--p9-border);
}
body.gradia-pos-dark #p9-refund-reason {
    background: rgba(255,255,255,.05) !important;
    border-color: var(--p9-border) !important;
}

/* TF-1/TF-3: Order list rows inside drawer modals */
.p9-refund-order-row {
    display: flex; align-items: flex-start; justify-content: space-between;
    gap: 12px; padding: 13px 2px;
    border-bottom: 1px solid var(--p9-border, rgba(0,0,0,.07));
}
.p9-refund-order-row:last-child { border-bottom: none; }
.p9-refund-order-info { flex: 1; min-width: 0; }
.p9-rf-num { font-size: 13px; font-weight: 700; color: var(--p9-text, #0f172a); }
.p9-rf-date { font-size: 11px; color: var(--p9-muted, #94a3b8); margin-left: 6px; }
.p9-rf-meta { font-size: 12px; color: var(--p9-muted, #64748b); margin-top: 3px; line-height: 1.5; }
.p9-rf-badge {
    display: inline-flex; align-items: center; font-size: 10px; font-weight: 700;
    padding: 2px 8px; border-radius: 999px; margin-left: 6px; letter-spacing: .2px; vertical-align: 1px;
}
.p9-rf-badge-completed { background: rgba(22,163,74,.12); color: #16a34a; }
.p9-rf-badge-refunded  { background: rgba(217,119,6,.12); color: #d97706; }
.p9-rf-badge-cancelled { background: rgba(100,116,139,.12); color: #64748b; }
.p9-rf-right { text-align: right; flex-shrink: 0; }
.p9-rf-total { font-size: 13.5px; font-weight: 700; color: var(--p9-text, #0f172a); }
.p9-rf-actions { display: flex; gap: 6px; margin-top: 7px; justify-content: flex-end; }
.p9-rf-btn {
    font-size: 10.5px !important; padding: 3px 11px !important; border-radius: 999px !important; border: none !important;
    cursor: pointer; font-weight: 700; font-family: inherit;
    -webkit-appearance: none !important; appearance: none !important;
}
.p9-rf-btn-refund { background: rgba(239,68,68,.1) !important; color: #ef4444 !important; }
.p9-rf-btn-refund:hover { background: rgba(239,68,68,.18) !important; }
.p9-rf-btn-void { background: rgba(100,116,139,.1) !important; color: var(--p9-muted, #64748b) !important; }
.p9-rf-btn-void:hover { background: rgba(100,116,139,.18) !important; }
.p9-rf-noaction { font-size: 11px; color: var(--p9-muted, #94a3b8); font-style: italic; }
.p9-rf-links { display: flex; gap: 6px; margin-top: 6px; flex-wrap: wrap; }
.p9-rf-link {
    background: rgba(100,116,139,.14) !important; border: none !important;
    padding: 3px 10px !important; margin: 0; cursor: pointer;
    font-size: 10.5px !important; font-weight: 600; color: var(--p9-muted, #64748b) !important;
    font-family: inherit; border-radius: 999px !important; text-decoration: none !important;
    -webkit-appearance: none !important; appearance: none !important; box-sizing: border-box !important;
}
.p9-rf-link:hover { background: color-mix(in srgb, var(--p9-grad-start, #1e90ff) 30%, transparent) !important; color: var(--p9-grad-start, #1e90ff) !important; }
.p9-rf-items-panel {
    margin-top: 8px; padding: 8px 10px; border-radius: 10px;
    background: var(--p9-bg, #f8fafc); border: 1px solid var(--p9-border, rgba(0,0,0,.06));
}
.p9-rf-item-row {
    display: flex; justify-content: space-between; font-size: 12px;
    color: var(--p9-text, #334155); padding: 3px 0;
}

/* Void & Refund log — card list, replaces the old plain table so it
   reflows cleanly on mobile instead of needing horizontal scroll. */
.p9-vrl-list { display: flex; flex-direction: column; gap: 10px; }
.p9-vrl-card {
    border: 1px solid var(--p9-border, rgba(0,0,0,.08)); border-radius: 14px;
    padding: 12px 14px; background: var(--p9-panel, #fff);
}
.p9-vrl-card-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; }
.p9-vrl-order { font-size: 13px; font-weight: 700; color: var(--p9-text, #0f172a); margin-left: 4px; }
.p9-vrl-date { font-size: 11px; color: var(--p9-muted, #94a3b8); margin-top: 3px; }
.p9-vrl-saledate { font-size: 10.5px; color: var(--p9-muted, #94a3b8); margin-top: 1px; font-style: italic; }
.p9-vrl-amount { font-size: 14px; font-weight: 700; color: var(--p9-text, #0f172a); white-space: nowrap; }
.p9-vrl-total-sub { font-size: 10.5px; color: var(--p9-muted, #94a3b8); text-align: right; margin-top: 1px; }
.p9-vrl-customer { font-size: 11.5px; color: var(--p9-muted, #64748b); margin-top: 3px; }
.p9-req-order-row:hover { background: var(--p9-bg, #f8fafc); }

/* Sales Analytics tab */
.p9-an-chart-row { display: flex; align-items: flex-end; gap: 8px; height: 130px; margin-bottom: 6px; padding: 0 4px; }
.p9-an-bar-col { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; height: 100%; }
.p9-an-bar { width: 100%; min-height: 3px; border-radius: 6px 6px 0 0; background: linear-gradient(180deg, var(--p9-grad-start, #C40808) 0%, #5a0505 100%); }
.p9-an-bar-day { font-size: 10px; color: var(--p9-muted, #94a3b8); margin-top: 6px; }
.p9-an-caption { font-size: 11px; color: var(--p9-muted, #94a3b8); text-align: center; margin-bottom: 18px; }
.p9-an-sellers-title { font-size: 10px; font-weight: 700; letter-spacing: .3px; text-transform: uppercase; color: var(--p9-muted, #94a3b8); margin-bottom: 8px; }
.p9-an-seller-row { display: flex; justify-content: space-between; align-items: center; padding: 8px 0; border-bottom: 1px solid var(--p9-border, #f4f5f7); font-size: 12.5px; }
.p9-an-seller-row:last-child { border-bottom: none; }
.p9-an-seller-rank {
    width: 18px; height: 18px; border-radius: 50%; background: var(--p9-bg, #f1f5f9); color: var(--p9-muted, #64748b);
    font-size: 10px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; margin-right: 8px;
}
.p9-an-seller-amt { color: #16a34a; font-weight: 700; }
.p9-vrl-by {
    display: flex; align-items: center; gap: 5px; margin-top: 9px;
    font-size: 12px; color: var(--p9-text, #334155);
}
.p9-vrl-method {
    font-size: 10px; font-weight: 700; color: var(--p9-muted, #64748b);
    background: rgba(100,116,139,.12); padding: 1px 7px; border-radius: 999px; margin-left: 2px;
}
.p9-vrl-reason {
    font-size: 12px; font-style: italic; color: var(--p9-muted, #64748b);
    margin-top: 6px; line-height: 1.4;
}
.p9-vrl-card-actions { margin-top: 9px; }
body.gradia-pos-dark .p9-vrl-card { background: rgba(255,255,255,.03); border-color: var(--p9-border); }

/* TF-2: Split row amounts */
.p9-split-row .p9-drawer-input {
    border: 1.5px solid var(--p9-border, rgba(0,0,0,.1));
    border-radius: 10px; padding: 10px 12px;
    background: var(--p9-bg, #f8fafc);
    color: var(--p9-text, #0f172a);
    font-family: inherit; font-size: 14px; outline: none;
}
body.gradia-pos-dark .p9-refund-order-row { border-color: var(--p9-border); }
body.gradia-pos-dark .p9-split-row .p9-drawer-input { background: rgba(255,255,255,.05); border-color: var(--p9-border); }
body.gradia-pos-dark #p9-refund-reason { background: rgba(255,255,255,.05) !important; border-color: var(--p9-border) !important; }

/* =============================================================
   Image Upload: Drop Zone, Progress Bar, WebP Badge
   ============================================================= */

.p9-img-upload-area {
    position: relative;
    border: 2px dashed var(--p9-border);
    border-radius: 14px;
    background: var(--p9-bg);
    min-height: 130px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: border-color .2s, background .2s;
    overflow: hidden;
    margin-bottom: 10px;
}
.p9-img-upload-area:hover,
.p9-img-upload-area.p9-img-drag-over {
    border-color: var(--p9-grad-start, #1e90ff);
    background: rgba(30,144,255,.05);
}
.p9-img-drop-inner {
    text-align: center;
    pointer-events: none;
    padding: 16px;
}
.p9-img-drop-icon { font-size: 32px; margin-bottom: 8px; }
.p9-img-drop-text {
    font-size: 13.5px;
    color: var(--p9-text);
    margin-bottom: 4px;
}
.p9-img-link {
    color: var(--p9-grad-start, #1e90ff);
    text-decoration: underline;
    cursor: pointer;
}
.p9-img-drop-hint {
    font-size: 11.5px;
    color: var(--p9-muted);
}

/* Progress bar */
.p9-img-progress-wrap {
    margin-bottom: 10px;
    padding: 14px 16px;
    background: var(--p9-bg);
    border: 1.5px solid var(--p9-border);
    border-radius: 12px;
}
.p9-img-progress-track {
    height: 8px;
    background: var(--p9-border);
    border-radius: 99px;
    overflow: hidden;
    margin-bottom: 8px;
}
.p9-img-progress-bar {
    height: 100%;
    background: linear-gradient(90deg, var(--p9-grad-start, #1e90ff), #7c3aed);
    border-radius: 99px;
    transition: width .15s ease;
}
.p9-img-progress-label {
    font-size: 12px;
    font-weight: 600;
    color: var(--p9-muted);
    text-align: center;
}

/* Preview */
.p9-ppf-img-preview {
    width: 100%;
    min-height: 130px;
    border-radius: 16px;
    background-size: cover;
    background-position: center;
    background-color: var(--p9-bg);
    border: 1.5px solid var(--p9-border);
    position: relative;
    margin-bottom: 10px;
}
.p9-img-webp-badge {
    position: absolute;
    top: 8px; right: 8px;
    background: rgba(22,163,74,.92);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    padding: 3px 10px;
    border-radius: 999px;
    letter-spacing: .3px;
}

/* Error message */
.p9-img-error {
    font-size: 12.5px;
    color: #ef4444;
    background: rgba(239,68,68,.08);
    border: 1px solid rgba(239,68,68,.2);
    border-radius: 8px;
    padding: 8px 12px;
    margin-top: 6px;
}

/* Dark mode */
body.gradia-pos-dark .p9-img-upload-area  { border-color: var(--p9-border); background: var(--p9-surface); }
body.gradia-pos-dark .p9-img-progress-wrap { background: var(--p9-surface); border-color: var(--p9-border); }
body.gradia-pos-dark .p9-img-progress-track { background: rgba(255,255,255,.1); }
body.gradia-pos-dark .p9-ppf-img-preview  { background-color: var(--p9-surface); border-color: var(--p9-border); }

/* =============================================================
   TF-4: PIN Login Numpad
   ============================================================= */
.p9-pin-overlay {
    position: fixed; inset: 0; z-index: 9998;
    background: rgba(0,0,0,.75);
    backdrop-filter: blur(8px);
    display: flex; align-items: center; justify-content: center;
    padding: 20px;
}
.p9-pin-card {
    background: var(--p9-panel);
    border-radius: 24px;
    padding: 32px 28px 28px;
    width: 100%; max-width: 320px;
    box-shadow: 0 24px 80px rgba(0,0,0,.4);
    border: 1px solid var(--p9-border);
    text-align: center;
}
#p9-pin-icon {
    width: 48px; height: 48px; border-radius: 50%; margin: 0 auto 14px;
    display: flex; align-items: center; justify-content: center;
    background: linear-gradient(135deg, var(--p9-grad-start,#1e90ff) 0%, #000 100%);
    font-size: 20px; line-height: 1;
}
.p9-pin-title  { font-size: 18px; font-weight: 700; color: var(--p9-text); margin-bottom: 4px; }
.p9-pin-sub    { font-size: 13px; color: var(--p9-muted); margin-bottom: 18px; }

.p9-pin-auth-tabs {
    display: flex; background: var(--p9-bg); border-radius: 999px;
    padding: 3px; margin-bottom: 18px; gap: 2px;
}
.p9-pin-auth-tab {
    flex: 1; display: flex; align-items: center; justify-content: center; gap: 5px;
    padding: 8px 0; border: none; border-radius: 999px; cursor: pointer;
    background: none; color: var(--p9-muted); font-size: 12px; font-weight: 700;
    font-family: inherit; transition: background .15s, color .15s;
}
.p9-pin-auth-tab.active {
    background: var(--p9-panel); color: var(--p9-grad-start,#1e90ff);
    box-shadow: 0 1px 4px rgba(0,0,0,.1);
}

.p9-pin-dots   { display: flex; justify-content: center; gap: 10px; margin-bottom: 22px; }
.p9-pin-dot    {
    width: 12px; height: 12px; border-radius: 50%;
    background: var(--p9-bg);
    border: 2px solid var(--p9-border);
    transition: background .15s, border-color .15s, transform .15s;
}
.p9-pin-dot.filled {
    background: var(--p9-grad-start, #1e90ff); border-color: var(--p9-grad-start, #1e90ff);
    transform: scale(1.15);
}
.p9-pin-pad    { display: grid; grid-template-columns: repeat(3,1fr); gap: 10px; margin-bottom: 12px; }
.p9-pin-key    {
    aspect-ratio: 1/1; padding: 0; border-radius: 16px;
    background: var(--p9-bg);
    color: var(--p9-text);
    font-size: 18px; font-weight: 600; cursor: pointer;
    border: 1.5px solid var(--p9-border);
    transition: background .15s, transform .1s, border-color .15s;
    font-family: inherit;
    display: flex; align-items: center; justify-content: center;
}
.p9-pin-key:hover { border-color: var(--p9-grad-start,#1e90ff); background: rgba(30,144,255,.06); }
.p9-pin-key:active { transform: scale(.94); }
.p9-pin-key.del { font-size: 15px; color: var(--p9-muted); background: none; border-color: transparent; }
.p9-pin-key.del:hover { color: #ef4444; border-color: rgba(239,68,68,.2); background: rgba(239,68,68,.06); }
.p9-pin-key.enter {
    grid-column: span 3; aspect-ratio: auto; height: 40px; padding: 0;
    background: linear-gradient(135deg, var(--p9-grad-start,#1e90ff) 0%,#000 100%);
    color: #fff; border: none; font-size: 13px; font-weight: 700; border-radius: 999px;
    margin-top: 4px;
}
.p9-pin-error  { font-size: 12px; color: #ef4444; min-height: 18px; margin-top: 4px; }
body.gradia-pos-dark .p9-pin-card { background: var(--p9-panel); border-color: var(--p9-border); }
body.gradia-pos-dark .p9-pin-key  { background: rgba(255,255,255,.05); border-color: var(--p9-border); }
body.gradia-pos-dark .p9-pin-auth-tabs { background: rgba(255,255,255,.05); }
body.gradia-pos-dark .p9-pin-auth-tab.active { background: rgba(255,255,255,.1); }

/* =============================================================
   Return to Inventory? confirm modal
   ============================================================= */
.p9-return-inv-card {
    background: var(--p9-panel,#fff); border-radius: 20px;
    padding: 28px 26px; width: 100%; max-width: 280px;
    box-shadow: 0 24px 70px rgba(0,0,0,.35);
    text-align: center;
}
.p9-return-inv-icon {
    width: 46px; height: 46px; border-radius: 50%; margin: 0 auto 14px;
    display: flex; align-items: center; justify-content: center;
    background: linear-gradient(135deg, var(--p9-grad-start,#1e90ff) 0%, #000 100%);
}
.p9-return-inv-title { font-size: 15px; font-weight: 700; color: var(--p9-text,#1e293b); margin-bottom: 18px; }
.p9-return-inv-buttons { display: flex; gap: 10px }
.p9-return-inv-btn {
    flex: 1; padding: 10px 0; border-radius: 999px; border: none;
    font-size: 13px; font-weight: 700; cursor: pointer; font-family: inherit;
    transition: opacity .15s;
}
.p9-return-inv-btn:hover { opacity: .88 }
.p9-return-inv-yes { background: linear-gradient(135deg, var(--p9-grad-start,#1e90ff) 0%, #000 100%); color: #fff; }
.p9-return-inv-no  { background: var(--p9-bg,#f8fafc); color: var(--p9-text,#1e293b); border: 1.5px solid var(--p9-border,rgba(0,0,0,.1)); }
body.gradia-pos-dark .p9-return-inv-card { background: var(--p9-panel); }
body.gradia-pos-dark .p9-return-inv-no { background: rgba(255,255,255,.05); border-color: rgba(255,255,255,.12); color: #fff; }

/* =============================================================
   AD-1/AD-2/AD-3: Admin panel tabs (shared)
   ============================================================= */
.p9-admin-tab-content { display: none; }
.p9-admin-tab-content.active { display: block; }

/* AD-3: Inventory table */
.p9-inv-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.p9-inv-table th {
    text-align: left; padding: 8px 12px;
    color: var(--p9-muted); font-weight: 600; font-size: 11px;
    text-transform: uppercase; letter-spacing: .4px;
    border-bottom: 2px solid var(--p9-border);
}
.p9-inv-table td { padding: 10px 12px; border-bottom: 1px solid var(--p9-border); vertical-align: middle; }
.p9-inv-table tr:hover td { background: rgba(30,144,255,.04); }
.p9-stock-low  { color: #f59e0b; font-weight: 600; }
.p9-stock-out  { color: #ef4444; font-weight: 600; }
.p9-stock-ok   { color: #16a34a; font-weight: 600; }
body.gradia-pos-dark .p9-inv-table th { color: var(--p9-muted); border-color: var(--p9-border); }
body.gradia-pos-dark .p9-inv-table td { border-color: var(--p9-border); }

/* PIN shake animation */
@keyframes p9PinShake {
    0%,100%{transform:translateX(0)}
    20%{transform:translateX(-8px)}
    40%{transform:translateX(8px)}
    60%{transform:translateX(-6px)}
    80%{transform:translateX(6px)}
}

/* =============================================================
   TOPBAR ROW 2 — Desktop + Mobile Responsive Redesign
   ============================================================= */

.p9-topbar-row2 {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 0 12px 6px;
    flex-wrap: nowrap;
    min-height: 36px;
    position: relative;
}

/* Session pill — flex auto grows to fill available space */
.p9-pos-session-pill {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    font-weight: 500;
    color: var(--p9-muted);
    flex: 1;
    min-width: 0;
    overflow: hidden;
}
.p9-session-label {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.p9-session-sep { opacity: .4; margin: 0 2px; }

/* Action buttons container */
.p9-topbar-actions {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-shrink: 0;
}

/* Badge dot on Held button */
.p9-btn-badge-wrap { position: relative; }
.p9-parked-badge-dot {
    position: absolute;
    top: -6px; right: -6px;
    min-width: 18px; height: 18px;
    padding: 0 5px;
    background: #ef4444;
    border-radius: 999px;
    border: 2px solid var(--p9-topbar-bg, #1a0a0a);
    font-size: 10px; font-weight: 800; line-height: 14px;
    color: #fff; text-align: center;
    display: inline-flex; align-items: center; justify-content: center;
    box-shadow: 0 2px 6px rgba(239,68,68,.55);
    transition: transform .15s cubic-bezier(.34,1.56,.64,1), opacity .15s;
    pointer-events: none;
    box-sizing: border-box;
}
/* Pop animation when count changes */
@keyframes p9BadgePop {
    0%   { transform: scale(1); }
    40%  { transform: scale(1.35); }
    70%  { transform: scale(0.9); }
    100% { transform: scale(1); }
}
.p9-parked-badge-dot.p9-badge-pop {
    animation: p9BadgePop .38s cubic-bezier(.34,1.56,.64,1);
}

/* ⋮ more button — hidden on desktop */
.p9-topbar-more-btn { display: none !important; flex-shrink: 0; }

/* Dropdown menu */
.p9-topbar-dropdown {
    position: absolute;
    top: calc(100% + 4px);
    right: 8px;
    z-index: 9990;
    min-width: 200px;
    background: var(--p9-panel);
    border: 1px solid var(--p9-border);
    border-radius: 14px;
    box-shadow: 0 12px 40px rgba(0,0,0,.25);
    overflow: hidden;
    animation: p9DropIn .18s ease;
}
@keyframes p9DropIn {
    from { opacity: 0; transform: translateY(-6px) scale(.97); }
    to   { opacity: 1; transform: none; }
}
.p9-topbar-dropdown-inner { padding: 6px; }
.p9-td-item {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 11px 14px;
    background: none;
    border: none;
    border-radius: 10px;
    font-size: 13.5px;
    font-weight: 500;
    color: var(--p9-text);
    cursor: pointer;
    text-align: left;
    font-family: inherit;
    transition: background .15s;
    position: relative;
}
.p9-td-item:hover { background: rgba(30,144,255,.07); }
.p9-td-badge {
    margin-left: auto;
    background: #ef4444;
    color: #fff;
    border-radius: 20px;
    font-size: 10px;
    font-weight: 700;
    padding: 1px 6px;
}

/* ── Mobile breakpoint ──────────────────────────────────────── */
@media (max-width: 900px) {
    .p9-topbar-row2 { padding: 0 10px 8px; }

    /* Hide desktop action buttons entirely on mobile */
    .p9-topbar-actions { display: none !important; }

    /* Show ⋮ button */
    .p9-topbar-more-btn { display: flex !important; }

    /* Report & Inventory buttons hidden on mobile — in 3-dot menu */
    .p9-tb-report-btn,
    .p9-tb-inv-btn { display: none !important; }

    /* QR Analytics button: hide only on mobile, keep on tablet with full label */
    @media (max-width: 600px) {
        .p9-tb-qr-btn { display: none !important; }
    }
    @media (min-width: 601px) {
        /* Show QR Analytics with text on tablet — override the global span hide */
        .p9-tb-qr-btn              { display: inline-flex !important; }
        .p9-tb-qr-btn span         { display: inline !important; }
    }

    /* Session pill shorter on small screens */
    .p9-pos-session-pill { font-size: 11px; }
    .p9-session-sep { display: none; }

    /* Dropdown full-width on very small screens */
    @media (max-width: 400px) {
        .p9-topbar-dropdown { left: 8px; right: 8px; min-width: 0; }
    }
}

/* Dark mode */
body.gradia-pos-dark .p9-topbar-dropdown {
    background: var(--p9-panel);
    border-color: var(--p9-border);
    box-shadow: 0 12px 40px rgba(0,0,0,.5);
}

/* =============================================================
   PRODUCT MODAL — Full redesign: pill shapes, theme-aware
   ============================================================= */

.p9-product-modal-overlay {
    position: fixed;
    inset: 0;
    z-index: 9995;
    background: rgba(0,0,0,.6);
    backdrop-filter: blur(8px);
    display: flex;
    align-items: flex-end;     /* mobile: slide up from bottom */
    justify-content: center;
    padding: 0;
    animation: p9ProdOverlayIn .2s ease;
}
@keyframes p9ProdOverlayIn { from{opacity:0} to{opacity:1} }

/* The Award Points modal opens automatically right after checkout,
   at the same moment the "Payment Received!" success screen (#p9-success,
   z-index 10000) is shown. That success screen has no auto-dismiss and
   no backdrop-click-to-close, so without this override it silently sat
   on top of the Award modal — invisible-looking through its own
   translucent backdrop, but still swallowing every click meant for the
   search field or Skip underneath it. */
#p9-earn-modal { z-index: 10010 !important; }

.p9-product-modal-card {
    background: var(--p9-panel);
    width: 100%;
    max-width: 560px;
    max-height: 92dvh;
    border-radius: 24px 24px 0 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    box-shadow: 0 -8px 60px rgba(0,0,0,.3);
    animation: p9ProdCardUp .28s cubic-bezier(.22,.68,0,1.2);
}
@keyframes p9ProdCardUp {
    from { transform: translateY(40px); opacity: 0; }
    to   { transform: none; opacity: 1; }
}

/* Desktop: center in viewport */
@media (min-width: 640px) {
    .p9-product-modal-overlay { align-items: center; padding: 20px; }
    .p9-product-modal-card {
        border-radius: 24px;
        max-height: 90dvh;
    }
}

/* ── Header ──────────────────────────────────────────────────── */
.p9-pm-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px 20px 16px;
    background: linear-gradient(135deg, var(--p9-grad-start, #1e90ff) 0%, #000 100%);
    flex-shrink: 0;
}
.p9-pm-header-left {
    display: flex;
    align-items: center;
    gap: 12px;
}
.p9-pm-header-icon {
    font-size: 26px;
    line-height: 1;
}
.p9-pm-title {
    font-size: 16px;
    font-weight: 800;
    color: #fff;
    letter-spacing: -.3px;
}
.p9-pm-subtitle {
    font-size: 11.5px;
    color: rgba(255,255,255,.65);
    margin-top: 2px;
}
.p9-pm-close-btn {
    display: flex; align-items: center; gap: 6px;
    padding: 10px; min-width: 44px; min-height: 44px;
    justify-content: center;
    background: rgba(255,255,255,.15);
    border: 1.5px solid rgba(255,255,255,.25) !important;
    border-radius: 999px !important; cursor: pointer;
    color: rgba(255,255,255,.85); font-size: 14px; font-weight: 700;
    transition: background .15s;
    -webkit-appearance: none !important; appearance: none !important;
}
.p9-pm-close-btn:hover { background: rgba(255,255,255,.28); color: #fff; }
.p9-pm-close-btn:hover { background: rgba(255,255,255,.25); }

/* ── Body ────────────────────────────────────────────────────── */
.p9-pmod-body {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    padding: 20px;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
}

/* Sections */
.p9-pm-section {
    margin-bottom: 16px;
}
.p9-pm-section-label {
    font-size: 11px;
    font-weight: 700;
    color: var(--p9-muted);
    text-transform: uppercase;
    letter-spacing: .5px;
    margin-bottom: 7px;
}
.p9-pm-section-label small {
    font-weight: 400;
    text-transform: none;
    letter-spacing: 0;
    font-size: 10px;
}
.p9-pm-row-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-bottom: 0;
}
@media (max-width: 420px) {
    .p9-pm-row-2 { grid-template-columns: 1fr; }
}

/* Pill inputs */
.p9-pm-pill-input,
.p9-pm-pill-select {
    width: 100%;
    padding: 11px 18px;
    border: 1.5px solid var(--p9-border) !important;
    border-radius: 999px !important;
    background: var(--p9-bg);
    color: var(--p9-text);
    font-size: 14px;
    font-family: inherit !important;
    outline: none;
    transition: border-color .18s, box-shadow .18s;
    -webkit-appearance: none !important;
    appearance: none !important;
    box-sizing: border-box !important;
}
.p9-pm-pill-input::placeholder { color: var(--p9-muted); opacity: .7; }
.p9-pm-pill-input:focus,
.p9-pm-pill-select:focus {
    border-color: var(--p9-grad-start, #1e90ff);
    box-shadow: 0 0 0 3px rgba(30,144,255,.15);
}
/* Select arrow */
.p9-pm-pill-select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%2394a3b8' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 14px center;
    padding-right: 38px;
    cursor: pointer;
}
/* Multi-select — no pill (scrollable) */
.p9-pm-pill-select[multiple] {
    border-radius: 16px;
    padding: 8px 14px;
    background-image: none;
    padding-right: 14px;
}

/* Textarea — softer radius */
.p9-pm-textarea {
    width: 100%;
    padding: 12px 16px;
    border: 1.5px solid var(--p9-border);
    border-radius: 16px;
    background: var(--p9-bg);
    color: var(--p9-text);
    font-size: 13.5px;
    font-family: inherit;
    resize: vertical;
    outline: none;
    transition: border-color .18s, box-shadow .18s;
    min-height: 72px;
}
.p9-pm-textarea::placeholder { color: var(--p9-muted); opacity: .7; }
.p9-pm-textarea:focus {
    border-color: var(--p9-grad-start, #1e90ff);
    box-shadow: 0 0 0 3px rgba(30,144,255,.15);
}

/* SKU input+scan button row */
.p9-pm-pill-input-row {
    display: flex;
    gap: 6px;
    align-items: center;
}
.p9-pm-pill-input-row .p9-pm-pill-input { flex: 1; }
.p9-pm-scan-btn {
    flex-shrink: 0;
    width: 44px;
    height: 44px;
    border: 1.5px solid var(--p9-border) !important;
    border-radius: 999px !important;
    background: var(--p9-bg) !important;
    color: var(--p9-muted) !important;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all .15s;
}
.p9-pm-scan-btn:hover { color: #fff !important; border-color: var(--p9-grad-start, #1e90ff) !important; background: var(--p9-grad-start, #1e90ff) !important; }

/* Image actions */
.p9-pm-img-actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: 10px;
}

/* Status message */
.p9-pm-status-msg {
    padding: 12px 16px;
    border-radius: 14px;
    font-size: 13px;
    font-weight: 500;
    margin-top: 4px;
    text-align: center;
}
.p9-pm-status-msg.success {
    background: rgba(22,163,74,.1);
    border: 1px solid rgba(22,163,74,.25);
    color: #16a34a;
}
.p9-pm-status-msg.error {
    background: rgba(239,68,68,.1);
    border: 1px solid rgba(239,68,68,.25);
    color: #ef4444;
}

/* ── Footer ──────────────────────────────────────────────────── */
.p9-pm-footer {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    padding: 14px 20px;
    border-top: 1px solid var(--p9-border);
    background: var(--p9-panel);
    flex-shrink: 0;
}

/* ── Pill buttons (shared) ───────────────────────────────────── */
.p9-pm-pill-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding: 10px 22px;
    border-radius: 999px !important;
    font-size: 13.5px;
    font-weight: 700;
    font-family: inherit !important;
    cursor: pointer;
    border: none !important;
    transition: opacity .18s, transform .12s, box-shadow .18s;
    white-space: nowrap;
    -webkit-appearance: none !important;
    appearance: none !important;
    box-sizing: border-box !important;
}
.p9-pm-pill-btn:hover:not(:disabled) { opacity: .88; transform: translateY(-1px); }
.p9-pm-pill-btn:disabled { opacity: .5; cursor: not-allowed; transform: none; }
.p9-pm-pill-primary {
    background: linear-gradient(135deg, var(--p9-grad-start, #1e90ff) 0%, #000 100%);
    color: #fff;
    box-shadow: 0 4px 16px rgba(30,144,255,.3);
}
.p9-pm-pill-ghost {
    background: var(--p9-bg);
    color: var(--p9-text);
    border: 1.5px solid var(--p9-border) !important;
}
.p9-pm-pill-danger {
    background: rgba(239,68,68,.08);
    color: #ef4444;
    border: 1.5px solid rgba(239,68,68,.2) !important;
}

/* ── Image preview sizing (max 400px, centred) ───────────────── */
.p9-img-upload-area,
.p9-img-progress-wrap,
.p9-ppf-img-preview {
    max-width: 400px;
    width: 100%;
    margin-left: auto;
    margin-right: auto;
}
.p9-ppf-img-preview { min-height: 200px; }

/* ── Dark mode ──────────────────────────────────────────────── */
body.gradia-pos-dark .p9-pm-pill-input,
body.gradia-pos-dark .p9-pm-pill-select,
body.gradia-pos-dark .p9-pm-textarea {
    background: rgba(255,255,255,.06);
    border-color: rgba(255,255,255,.12);
    color: #e2e8f0;
    color-scheme: dark;
}
/* Select dropdown options — charcoal text on white native dropdown */
body.gradia-pos-dark .p9-pm-pill-select option {
    background: #1e293b;
    color: #e2e8f0;
}
/* ppf-body selects (local category, status) */
body.gradia-pos-dark .p9-ppf-body select {
    background: rgba(255,255,255,.06);
    border-color: rgba(255,255,255,.12);
    color: #e2e8f0;
    color-scheme: dark;
}
body.gradia-pos-dark .p9-ppf-body select option {
    background: #1e293b;
    color: #e2e8f0;
}
body.gradia-pos-dark .p9-pm-pill-ghost {
    background: rgba(255,255,255,.06);
    border-color: var(--p9-border);
}
body.gradia-pos-dark .p9-pm-scan-btn {
    background: rgba(255,255,255,.05) !important;
    border-color: var(--p9-border) !important;
}

/* =============================================================
   LOGIN PAGE — Fix input text colour (charcoal on light fill)
   ============================================================= */
.gpl-input {
    color: #1e293b !important;         /* charcoal — readable on white/light fill */
}
.gpl-input::placeholder { color: rgba(30,41,59,.4) !important; }

/* Fix browser autofill — forces charcoal text regardless of browser fill colour */
.gpl-input:-webkit-autofill,
.gpl-input:-webkit-autofill:hover,
.gpl-input:-webkit-autofill:focus {
    -webkit-text-fill-color: #1e293b !important;
    -webkit-box-shadow: 0 0 0 40px rgba(255,255,255,.12) inset !important;
    caret-color: #1e293b !important;
}
/* Non-webkit autofill */
.gpl-input:autofill {
    color: #1e293b !important;
}

/* =============================================================
   LIGHT vs DARK text correction — all form elements
   Light mode: charcoal (#1e293b) | Dark mode: white (#e2e8f0)
   Already handled by --p9-text variable, but explicit overrides
   for pill inputs inside the product modal keep things reliable.
   ============================================================= */
/* Light mode — charcoal */
.p9-pm-pill-input,
.p9-pm-pill-select,
.p9-pm-textarea {
    color: var(--p9-text); /* #0f172a in light, #e2e8f0 in dark */
}
/* Drawer modal inputs */
.p9-drawer-input { color: var(--p9-text); }

/* =============================================================
   v15.3.1 FIXES — All targeted overrides
   ============================================================= */

/* ── 1. Session pill (Float/Drawer) — always white text ────── */
/* The topbar gradient background means white text is always correct here */
.p9-topbar-row2 .p9-pos-session-pill,
.p9-topbar-row2 .p9-session-label,
.p9-topbar-row2 #p9-float-display,
.p9-topbar-row2 #p9-drawer-balance,
.p9-topbar-row2 .p9-session-sep {
    color: #fff !important;
    opacity: 1 !important;
}
.p9-topbar-row2 .p9-pos-pulse-dot { background: #4ade80; }

/* ── 2. EDIT button — superseded by the .p9-card-edit-btn icon badge on
   the product image (see the main product-card rules earlier in this
   file). Kept as a comment marker so the numbered fix history above
   still reads in order. ── */

/* ── 3. Payment method title — charcoal in light, white in dark ──
   Scoped to .p9-pay-method specifically: .p9-pm-title/.p9-pm-desc are
   also used for modal header titles (white-on-gradient, e.g. the
   sign-in setup nudge), and this rule's !important was leaking into
   those unrelated to the payment-method row, turning header titles
   unreadable on their colored gradient background. ── */
.p9-pay-method .p9-pm-title {
    color: var(--p9-text) !important;   /* #0f172a light / #e2e8f0 dark */
}
.p9-pay-method .p9-pm-desc {
    color: var(--p9-muted) !important;
}
.p9-pay-method { color: var(--p9-text); }

/* Ensure active payment title is always readable */
.p9-pay-method.active .p9-pm-title { color: var(--p9-grad-start, #1e90ff) !important; }
.p9-pay-method.active .p9-pm-desc  { color: var(--p9-grad-start, #1e90ff) !important; opacity: .8; }

/* ── 4. Product modal image preview — 150px desktop, full mobile ── */
.p9-img-upload-area,
.p9-img-progress-wrap,
.p9-ppf-img-preview {
    max-width: 150px !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}
.p9-ppf-img-preview { min-height: 130px !important; }

/* On mobile keep it comfortable */
@media (max-width: 480px) {
    .p9-img-upload-area,
    .p9-img-progress-wrap,
    .p9-ppf-img-preview {
        max-width: 100% !important;
        min-height: 110px !important;
    }
}

/* ── 5. Product modal buttons — smaller pill with white text ──── */
.p9-pm-pill-primary {
    background: linear-gradient(135deg, var(--p9-grad-start, #1e90ff) 0%, #000 100%) !important;
    color: #fff !important;
    padding: 9px 20px !important;
    font-size: 13px !important;
}
.p9-pm-pill-ghost {
    padding: 8px 16px !important;
    font-size: 12px !important;
    color: var(--p9-text) !important;
}
/* Image action buttons in modal — small pills */
.p9-pm-img-actions .p9-pm-pill-btn {
    padding: 6px 13px !important;
    font-size: 11.5px !important;
}
.p9-pm-img-actions .p9-pm-pill-primary {
    padding: 6px 13px !important;
    font-size: 11.5px !important;
}

/* ── 6. New Product button white font ────────────────────────── */
.p9-pos-add-btn {
    color: #fff !important;
}

/* ── 7. Remove duplicate new session pill rule (override with specificity) ── */
#p9-topbar-row2 .p9-pos-session-pill {
    color: #fff !important;
    background: rgba(255,255,255,.12) !important;
    font-size: 12px !important;
}

/* =============================================================
   LOGOUT MODAL — Enhanced option buttons
   ============================================================= */

.p9-logout-card { padding: 28px 24px 24px !important; }

/* Balance display at top */
.p9-logout-balance-wrap {
    text-align: center;
    background: linear-gradient(135deg, var(--p9-grad-start, #1e90ff) 0%, #000 100%);
    border-radius: 16px;
    padding: 16px 20px;
    margin-bottom: 20px;
}
.p9-logout-balance-label {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .5px;
    text-transform: uppercase;
    color: rgba(255,255,255,.7);
    margin-bottom: 4px;
}
.p9-logout-balance-amount {
    font-size: 32px;
    font-weight: 900;
    color: #fff;
    letter-spacing: -1px;
    line-height: 1;
}

/* Option buttons */
.p9-logout-options { display: flex; flex-direction: column; gap: 10px; margin-top: 16px; }

.p9-logout-option-btn {
    display: flex;
    align-items: center;
    gap: 14px;
    width: 100%;
    padding: 14px 16px;
    border: 1.5px solid var(--p9-border);
    border-radius: 14px;
    background: var(--p9-bg);
    cursor: pointer;
    font-family: inherit;
    text-align: left;
    transition: all .2s;
    position: relative;
    overflow: hidden;
}
.p9-logout-option-btn::before {
    content: '';
    position: absolute;
    inset: 0;
    opacity: 0;
    transition: opacity .2s;
}
.p9-logout-option-btn:hover::before { opacity: 1; }
.p9-logout-option-btn:hover { transform: translateY(-1px); box-shadow: 0 4px 20px rgba(0,0,0,.1); }

.p9-logout-carry-btn::before { background: rgba(30,144,255,.06); }
.p9-logout-carry-btn:hover   { border-color: var(--p9-grad-start, #1e90ff); }

.p9-logout-clear-btn::before { background: rgba(239,68,68,.05); }
.p9-logout-clear-btn:hover   { border-color: rgba(239,68,68,.4); }

.p9-logout-opt-icon {
    font-size: 22px;
    flex-shrink: 0;
    position: relative;
    z-index: 1;
}
.p9-logout-opt-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 2px;
    position: relative;
    z-index: 1;
}
.p9-logout-opt-title {
    font-size: 14px;
    font-weight: 700;
    color: var(--p9-text);
    line-height: 1.2;
}
.p9-logout-opt-desc {
    font-size: 11.5px;
    color: var(--p9-muted);
    line-height: 1.3;
}
.p9-logout-opt-arrow {
    flex-shrink: 0;
    color: var(--p9-muted);
    opacity: .5;
    position: relative;
    z-index: 1;
    transition: transform .2s, opacity .2s;
}
.p9-logout-option-btn:hover .p9-logout-opt-arrow {
    opacity: 1;
    transform: translateX(3px);
}

/* Loading state on option buttons */
.p9-logout-option-btn:disabled {
    opacity: .6;
    cursor: not-allowed;
    transform: none !important;
}

/* Dark mode */
body.gradia-pos-dark .p9-logout-option-btn {
    background: rgba(255,255,255,.04);
    border-color: var(--p9-border);
}

/* =============================================================
   LOGOUT PROGRESS OVERLAY — Full-screen instant feedback
   ============================================================= */

.p9-logout-progress-overlay {
    position: fixed;
    inset: 0;
    z-index: 99999;
    display: flex;
    align-items: center;
    justify-content: center;
    /* Beautiful gradient background using accent colour */
    background: linear-gradient(145deg,
        var(--p9-bg-dark, #0f172a) 0%,
        color-mix(in srgb, var(--p9-grad-start, #1e90ff) 25%, #0f172a) 50%,
        #000 100%
    );
    animation: p9LogoutOverlayIn .25s ease;
}
@keyframes p9LogoutOverlayIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}
/* Fallback for browsers without color-mix */
@supports not (background: color-mix(in srgb, red, blue)) {
    .p9-logout-progress-overlay {
        background: linear-gradient(145deg, #0f172a 0%, #1e3a5f 50%, #000 100%);
    }
}

.p9-logout-progress-card {
    text-align: center;
    max-width: 320px;
    width: 100%;
    padding: 0 20px;
    animation: p9LogoutCardIn .35s cubic-bezier(.22,.68,0,1.2);
}
@keyframes p9LogoutCardIn {
    from { opacity: 0; transform: translateY(24px) scale(.96); }
    to   { opacity: 1; transform: none; }
}

/* Logo */
.p9-logout-progress-logo {
    width: 80px;
    height: 80px;
    margin: 0 auto 16px;
    border-radius: 22px;
    background: rgba(255,255,255,.1);
    border: 1px solid rgba(255,255,255,.15);
    backdrop-filter: blur(8px);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}
.p9-logout-progress-logo img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    padding: 10px;
}
.p9-logout-progress-logo span { font-size: 36px; }

.p9-logout-progress-store {
    font-size: 20px;
    font-weight: 800;
    color: #fff;
    margin-bottom: 28px;
    letter-spacing: -.3px;
}

/* Progress bar */
.p9-logout-prog-track {
    height: 5px;
    background: rgba(255,255,255,.1);
    border-radius: 99px;
    overflow: hidden;
    margin-bottom: 10px;
}
.p9-logout-prog-bar {
    height: 100%;
    width: 0%;
    border-radius: 99px;
    background: linear-gradient(90deg, var(--p9-grad-start, #1e90ff), #7c3aed);
    transition: width .4s ease;
    position: relative;
}
/* Animated shimmer on the bar */
.p9-logout-prog-bar::after {
    content: '';
    position: absolute;
    top: 0; right: 0; bottom: 0;
    width: 60px;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,.4), transparent);
    animation: p9ProgShimmer 1.2s infinite;
}
@keyframes p9ProgShimmer {
    from { transform: translateX(-60px); }
    to   { transform: translateX(60px); }
}

.p9-logout-prog-label {
    font-size: 12.5px;
    color: rgba(255,255,255,.55);
    margin-bottom: 24px;
    min-height: 18px;
    transition: opacity .3s;
}

/* Step items */
.p9-logout-steps {
    display: flex;
    flex-direction: column;
    gap: 0;
    margin-bottom: 28px;
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 14px;
    overflow: hidden;
    background: rgba(255,255,255,.04);
}
.p9-logout-step {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    border-bottom: 1px solid rgba(255,255,255,.05);
    opacity: .35;
    transition: opacity .3s, background .3s;
}
.p9-logout-step:last-child { border-bottom: none; }
.p9-logout-step.active {
    opacity: 1;
    background: rgba(255,255,255,.04);
}
.p9-logout-step.done {
    opacity: 1;
}
.p9-step-icon { font-size: 18px; flex-shrink: 0; }
.p9-step-text {
    flex: 1;
    font-size: 13px;
    font-weight: 500;
    color: rgba(255,255,255,.8);
    text-align: left;
}
.p9-step-check {
    font-size: 13px;
    font-weight: 700;
    color: #4ade80;
    opacity: 0;
    transform: scale(.5);
    transition: opacity .25s, transform .25s;
}
.p9-logout-step.done .p9-step-check {
    opacity: 1;
    transform: scale(1);
}

/* Active step: pulsing dot instead of check */
.p9-logout-step.active:not(.done) .p9-step-check {
    opacity: 1;
    transform: scale(1);
    color: transparent;
    width: 8px;
    height: 8px;
    background: var(--p9-grad-start, #1e90ff);
    border-radius: 50%;
    display: inline-block;
    animation: p9StepPulse .8s infinite;
}
@keyframes p9StepPulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50%       { opacity: .5; transform: scale(.7); }
}

.p9-logout-goodbye {
    font-size: 13.5px;
    color: rgba(255,255,255,.5);
    font-style: italic;
}
.p9-logout-goodbye strong { color: rgba(255,255,255,.8); font-style: normal; }

/* Mobile */
@media (max-width: 480px) {
    .p9-logout-progress-card { padding: 0 16px; }
    .p9-logout-balance-amount { font-size: 26px; }
}

/* =============================================================
   v15.4.1 BUTTON FIXES
   ============================================================= */

/* Fix 2: Rewards button — proper padding so text doesn't touch edges.
   Merged into the consolidated .p9-extra-btn/.p9-rewards-btn rules below
   (search "extra-btn baseline") — this used to be split across two
   separate !important blocks with the base rule further down the file,
   consolidated into one so there's nothing left to override. */

/* Fix 3a: EDIT button — superseded by the .p9-card-edit-btn icon badge
   defined with the main product-card rules earlier in this file. */

/* Fix 3b: New Product button — pill, white text, theme gradient */
.p9-pos-add-btn {
    border-radius: 999px !important;
    color: #fff !important;
    padding: 9px 18px !important;
    font-size: 12px !important;
    font-weight: 700 !important;
}

/* Fix 3c: Product modal footer buttons — smaller pill with correct proportions */
.p9-pm-footer .p9-pm-pill-primary {
    padding: 10px 22px !important;
    font-size: 13px !important;
    border-radius: 999px !important;
    color: #fff !important;
}
.p9-pm-footer .p9-pm-pill-ghost {
    padding: 10px 18px !important;
    font-size: 12.5px !important;
    border-radius: 999px !important;
}

/* extra-btn baseline (Rewards + Award pending) — pill shaping.
   No earlier competing rule remains, so this no longer needs !important,
   but kept anyway since the active theme's own CSS can apply !important
   rules to generic button/input elements on this site. */
.p9-extra-btn {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 6px 14px !important; font-size: 12px; font-weight: 700;
    border-radius: 999px !important; border: 1px solid var(--p9-border, rgba(0,0,0,.08)) !important;
    background: var(--p9-panel, #fff) !important; color: var(--p9-text, #0f172a) !important;
    cursor: pointer; margin: 0 6px 6px 0;
    transition: border-color .15s, background .15s;
}
.p9-extra-btn-icon { font-size: 12px; line-height: 1; }
.p9-extra-btn:hover {
    border-color: var(--p9-grad-start, #1e90ff) !important;
    background: var(--p9-ring-10, rgba(30,144,255,.06)) !important;
}
.p9-rewards-btn {
    border-color: #f0d28a !important;
    background: linear-gradient(135deg, #fff8ea 0%, #fef3d9 100%) !important;
    color: #8a6412 !important;
}
.p9-rewards-btn:hover { border-color: #e0b955 !important; background: #fef3d9 !important; }
.p9-earn-pending-btn {
    border-color: #d97706 !important;
    background: #fffbeb !important;
    color: #92400e !important;
    animation: p9-earn-pulse 1.8s ease-in-out infinite;
}
.p9-earn-pending-btn:hover {
    border-color: #b45309 !important;
    background: #fef3c7 !important;
}
.p9-earn-pending-chip {
    display: inline-flex;
    margin-left: 4px;
    font-weight: 800;
}
.p9-earn-pending-dismiss {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 14px;
    height: 14px;
    margin-left: 4px;
    border-radius: 50%;
    color: #92400e;
    background: rgba(217,119,6,.15);
    font-size: 11px;
    line-height: 1;
    cursor: pointer;
}
.p9-earn-pending-dismiss:hover {
    background: rgba(217,119,6,.3);
}
@keyframes p9-earn-pulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(217,119,6,.35); }
    50%      { box-shadow: 0 0 0 4px rgba(217,119,6,0); }
}

/* Split amount inputs — pill shaped to match modal style */
.p9-split-amount {
    border-radius: 999px !important;
    padding: 9px 16px !important;
    text-align: center !important;
    border: 1.5px solid var(--p9-border) !important;
    background: var(--p9-bg) !important;
    color: var(--p9-text) !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    width: 110px !important;
    outline: none !important;
    transition: border-color .18s !important;
}
.p9-split-amount:focus {
    border-color: var(--p9-grad-start, #1e90ff) !important;
    box-shadow: 0 0 0 3px rgba(30,144,255,.12) !important;
}
/* Highlight when auto-filled */
.p9-split-amount.auto-filled {
    border-color: #16a34a !important;
    background: rgba(22,163,74,.05) !important;
}

/* ═══════════════════════════════════════════════════════════════
   QR Analytics Button (topbar)
═══════════════════════════════════════════════════════════════ */
.p9-tb-qr-btn {
    background: linear-gradient(135deg, #0d9488 0%, #0891b2 100%) !important;
    border: 1px solid rgba(13,148,136,.5) !important;
    color: #fff !important;
    box-shadow: 0 2px 8px rgba(13,148,136,.35);
}
.p9-tb-qr-btn:hover {
    background: linear-gradient(135deg, #14b8a6 0%, #06b6d4 100%) !important;
    box-shadow: 0 3px 12px rgba(13,148,136,.45);
}

/* ═══════════════════════════════════════════════════════════════
   Report Button (topbar)
═══════════════════════════════════════════════════════════════ */
.p9-tb-report-btn {
    background: linear-gradient(135deg, #635bff 0%, #1e90ff 100%) !important;
    border: 1px solid rgba(99,91,255,.5) !important;
    color: #fff !important;
    box-shadow: 0 2px 8px rgba(99,91,255,.35);
}
.p9-tb-report-btn:hover {
    background: linear-gradient(135deg, #7c75ff 0%, #3ea6ff 100%) !important;
    box-shadow: 0 3px 12px rgba(99,91,255,.45);
}

/* ═══════════════════════════════════════════════════════════════
   Sales Report Modal  (TF-6)
═══════════════════════════════════════════════════════════════ */
.p9-report-card {
    background: var(--p9-panel, #fff);
    border-radius: 24px;
    width: 100%;
    max-width: 760px;
    max-height: 88vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    box-shadow: 0 32px 80px rgba(0,0,0,.45);
    border: 1px solid var(--p9-border, rgba(0,0,0,.07));
    animation: p9DrawerFadeIn .2s ease;
}
/* Header */
.p9-report-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 22px 26px 18px;
    border-bottom: 1px solid var(--p9-border, rgba(0,0,0,.07));
    background: linear-gradient(135deg, #0f0c29 0%, #302b63 60%, #24243e 100%);
    border-radius: 24px 24px 0 0;
    flex-shrink: 0;
}
.p9-report-header-left { display: flex; align-items: center; gap: 14px; }
.p9-report-icon-wrap {
    width: 40px; height: 40px; border-radius: 12px;
    background: rgba(255,255,255,.15);
    display: flex; align-items: center; justify-content: center;
    color: #fff; flex-shrink: 0;
}
.p9-report-title { font-size: 16px; font-weight: 700; color: #fff; }
.p9-report-subtitle { font-size: 12px; color: rgba(255,255,255,.6); margin-top: 2px; }
.p9-report-header .p9-pm-close-btn { color: rgba(255,255,255,.7); }
.p9-report-header .p9-pm-close-btn:hover { color: #fff; background: rgba(255,255,255,.1); }

/* Date bar */
.p9-report-date-bar {
    display: flex; align-items: flex-end; gap: 10px;
    padding: 16px 22px; border-bottom: 1px solid var(--p9-border, rgba(0,0,0,.07));
    background: var(--p9-bg, #f8fafc); flex-shrink: 0; flex-wrap: wrap;
}
.p9-report-date-group { display: flex; flex-direction: column; gap: 4px; }
.p9-report-date-label { font-size: 11px; font-weight: 600; color: var(--p9-muted, #64748b); text-transform: uppercase; letter-spacing: .5px; }
.p9-report-date-input {
    padding: 7px 14px !important; border-radius: 999px !important; font-size: 12.5px !important;
    border: 1.5px solid var(--p9-border, rgba(0,0,0,.12)) !important;
    background: var(--p9-panel, #fff) !important; color: var(--p9-text, #1e293b) !important;
    outline: none !important; cursor: pointer; font-weight: 500;
    -webkit-appearance: none !important; appearance: none !important;
    box-sizing: border-box !important;
}
.p9-report-date-input:focus {
    border-color: var(--p9-grad-start, #1e90ff);
    box-shadow: 0 0 0 3px rgba(30,144,255,.12);
}
.p9-report-search-btn, .p9-report-back-btn {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 5px 11px; border-radius: 999px !important; border: none !important;
    font-size: 11px; font-weight: 700; cursor: pointer;
    transition: opacity .15s, box-shadow .15s; white-space: nowrap;
    -webkit-appearance: none !important; appearance: none !important;
    box-sizing: border-box !important;
}
.p9-report-search-btn svg, .p9-report-back-btn svg { width: 12px; height: 12px; }
.p9-report-search-btn {
    background: linear-gradient(135deg, var(--p9-grad-start, #1e90ff) 0%, #000 100%);
    color: #fff !important; box-shadow: 0 3px 10px rgba(30,144,255,.3);
}
.p9-report-search-btn:hover { opacity: .88; }
.p9-report-back-btn {
    background: var(--p9-bg, #f1f5f9);
    color: var(--p9-text, #1e293b);
    border: 1.5px solid var(--p9-border, rgba(0,0,0,.12)) !important;
}
.p9-report-back-btn:hover { background: var(--p9-border, rgba(0,0,0,.08)); }

/* Body */
.p9-report-body {
    flex: 1; overflow-y: auto; padding: 20px 22px;
}

/* Spinner */
.p9-report-spinner {
    display: flex; flex-direction: column;
    align-items: center; gap: 12px; padding: 40px 0;
    color: var(--p9-muted, #64748b); font-size: 13px;
}
.p9-report-spin-ring {
    width: 32px; height: 32px; border-radius: 50%;
    border: 3px solid var(--p9-border, rgba(0,0,0,.1));
    border-top-color: var(--p9-grad-start, #1e90ff);
    animation: p9RepSpin .7s linear infinite;
}
@keyframes p9RepSpin { to { transform: rotate(360deg); } }

/* Cashier summary cards */
.p9-rep-cashier-grid {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 14px;
}
.p9-rep-cashier-card {
    background: var(--p9-bg, #f8fafc);
    border: 1.5px solid var(--p9-border, rgba(0,0,0,.08));
    border-radius: 16px; padding: 16px; position: relative;
    transition: border-color .15s, box-shadow .15s;
}
.p9-rep-cashier-card:hover {
    border-color: var(--p9-grad-start, #1e90ff);
    box-shadow: 0 4px 18px rgba(30,144,255,.1);
}
.p9-rep-cashier-head { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.p9-rep-avatar {
    width: 38px; height: 38px; border-radius: 12px; flex-shrink: 0;
    background: linear-gradient(135deg, #302b63 0%, #1e90ff 100%);
    color: #fff; font-size: 13px; font-weight: 700;
    display: flex; align-items: center; justify-content: center;
}
.p9-rep-cashier-name { font-size: 13px; font-weight: 700; color: var(--p9-text, #1e293b); }
.p9-rep-cashier-role { font-size: 11px; color: var(--p9-muted, #64748b); }
.p9-rep-stat-row { display: flex; justify-content: space-between; margin-bottom: 6px; }
.p9-rep-stat-label { font-size: 11px; color: var(--p9-muted, #64748b); }
.p9-rep-stat-val { font-size: 12px; font-weight: 700; color: var(--p9-text, #1e293b); }
.p9-rep-stat-val.green { color: #16a34a; }
.p9-rep-stat-val.red { color: #ef4444; }
.p9-rep-view-btn {
    margin-top: 12px; width: 100%; padding: 9px 16px;
    border-radius: 999px; border: none; cursor: pointer;
    background: linear-gradient(135deg, #302b63 0%, #1e90ff 100%);
    color: #fff !important; font-size: 12px; font-weight: 700;
    display: flex; align-items: center; justify-content: center; gap: 5px;
    transition: opacity .15s; letter-spacing: .3px;
    box-shadow: 0 3px 10px rgba(48,43,99,.3);
}
.p9-rep-view-btn:hover { opacity: .88; }

/* Order list */
.p9-rep-orders-header {
    display: flex; align-items: center; gap: 12px; margin-bottom: 16px;
}
.p9-rep-orders-avatar {
    width: 44px; height: 44px; border-radius: 14px; flex-shrink: 0;
    background: linear-gradient(135deg, #302b63 0%, #1e90ff 100%);
    color: #fff; font-size: 15px; font-weight: 700;
    display: flex; align-items: center; justify-content: center;
}
.p9-rep-orders-name { font-size: 15px; font-weight: 700; color: var(--p9-text, #1e293b); }
.p9-rep-orders-meta { font-size: 12px; color: var(--p9-muted, #64748b); }

.p9-rep-summary-strip {
    display: flex; gap: 10px; flex-wrap: wrap;
    margin-bottom: 18px; padding: 14px 16px;
    background: linear-gradient(135deg, rgba(48,43,99,.08) 0%, rgba(30,144,255,.08) 100%);
    border-radius: 14px; border: 1px solid rgba(99,91,255,.12);
}
.p9-rep-summ-tile {
    flex: 1; min-width: 90px; text-align: center;
}
.p9-rep-summ-val { font-size: 16px; font-weight: 800; color: var(--p9-text, #1e293b); }
.p9-rep-summary-strip .p9-rep-summ-val { color: var(--p9-text, #1e293b); }
.p9-rep-summ-lbl { font-size: 10px; color: var(--p9-muted, #64748b); text-transform: uppercase; letter-spacing: .5px; margin-top: 2px; }

.p9-rep-order-card {
    border: 1.5px solid var(--p9-border, rgba(0,0,0,.08));
    border-radius: 14px; padding: 14px 16px; margin-bottom: 10px;
    background: var(--p9-bg, #f8fafc);
    transition: border-color .15s;
}
.p9-rep-order-card:hover { border-color: rgba(30,144,255,.3); }
.p9-rep-order-top {
    display: flex; justify-content: space-between; align-items: flex-start;
    margin-bottom: 8px; flex-wrap: wrap; gap: 6px;
}
.p9-rep-order-num { font-size: 13px; font-weight: 700; color: var(--p9-text, #1e293b); }
.p9-rep-order-date { font-size: 11px; color: var(--p9-muted, #64748b); }
.p9-rep-order-total { font-size: 15px; font-weight: 800; color: var(--p9-text, #1e293b); }
.p9-rep-order-meta {
    display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 8px;
}
.p9-rep-tag {
    padding: 2px 10px; border-radius: 999px; font-size: 11px; font-weight: 600;
}
.p9-rep-tag.cod     { background: rgba(22,163,74,.12);  color: #16a34a; }
.p9-rep-tag.epay    { background: rgba(30,144,255,.12); color: #1e90ff; }
.p9-rep-tag.refund  { background: rgba(239,68,68,.12);  color: #ef4444; }
.p9-rep-tag.cancel  { background: rgba(148,163,184,.15); color: #64748b; }
.p9-rep-tag.change  { background: rgba(245,158,11,.12); color: #b45309; }
.p9-rep-order-items { font-size: 12px; color: var(--p9-muted, #64748b); line-height: 1.6; }
.p9-rep-order-items span { font-weight: 600; color: var(--p9-text, #1e293b); }
.p9-rep-reprint-btn {
    margin-top: 10px; padding: 7px 16px; border-radius: 999px;
    border: 1.5px solid var(--p9-border, rgba(0,0,0,.12));
    background: none; color: var(--p9-muted, #64748b);
    font-size: 11px; font-weight: 700; cursor: pointer;
    display: inline-flex; align-items: center; gap: 5px;
    transition: border-color .15s, color .15s, background .15s;
    letter-spacing: .3px;
}
.p9-rep-reprint-btn:hover { border-color: var(--p9-grad-start, #1e90ff); color: var(--p9-grad-start, #1e90ff); }
.p9-rep-empty {
    text-align: center; padding: 48px 0;
    color: var(--p9-muted, #64748b); font-size: 14px;
}
.p9-rep-empty svg { margin: 0 auto 12px; display: block; opacity: .35; }

/* Stock Alerts report */
.p9-rep-summary-strip {
    display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px;
    margin-bottom: 18px;
}
.p9-rep-summary-stat {
    background: var(--p9-bg, #f8fafc); border-radius: 12px;
    padding: 14px 12px; text-align: center;
}
.p9-rep-summary-num { font-size: 22px; font-weight: 800; color: var(--p9-text, #1e293b); }
.p9-rep-summary-label { font-size: 11px; color: var(--p9-muted, #64748b); margin-top: 2px; }
.p9-rep-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.p9-rep-table th {
    text-align: left; padding: 10px 12px; font-size: 11px; font-weight: 700;
    text-transform: uppercase; letter-spacing: .3px; color: var(--p9-muted, #64748b);
    border-bottom: 1px solid var(--p9-border, rgba(0,0,0,.08));
}
.p9-rep-table td {
    padding: 10px 12px; border-bottom: 1px solid var(--p9-border, rgba(0,0,0,.05));
    color: var(--p9-text, #1e293b);
}
.p9-rep-status-pill {
    display: inline-block; padding: 3px 10px; border-radius: 999px;
    font-size: 11px; font-weight: 700;
}
.p9-rep-status-pill.resolved { background: rgba(22,163,74,.12); color: #16a34a; }
.p9-rep-status-pill.open { background: rgba(245,158,11,.15); color: #b45309; }
body.gradia-pos-dark .p9-rep-summary-stat { background: rgba(255,255,255,.05); }
body.gradia-pos-dark .p9-rep-summary-num { color: #fff; }
body.gradia-pos-dark .p9-rep-table td { color: #fff; border-color: rgba(255,255,255,.08); }
body.gradia-pos-dark .p9-rep-table th { border-color: rgba(255,255,255,.1); }
@media (max-width: 640px) {
    .p9-rep-summary-strip { grid-template-columns: repeat(2, 1fr); }
    .p9-rep-table { display: block; overflow-x: auto; white-space: nowrap; }
}

/* Stock Alerts report — dedicated filter bar, matching the confirmed mockup */
.p9-sa-filter-row { display: flex; gap: 8px; align-items: center; margin-bottom: 18px; flex-wrap: wrap; }
.p9-sa-pill-input {
    flex: 1; min-width: 180px; display: flex; align-items: center; gap: 8px;
    padding: 7px 14px !important; border-radius: 999px !important; border: 1.5px solid var(--p9-border, rgba(0,0,0,.1)) !important;
    background: var(--p9-panel, #fff) !important; box-sizing: border-box !important;
}
.p9-sa-pill-input input {
    border: none !important; outline: none !important; background: transparent !important; font-size: 12.5px;
    width: 100%; color: var(--p9-text, #1e293b) !important; font-family: inherit;
    -webkit-appearance: none !important; appearance: none !important; border-radius: 0 !important;
}
.p9-sa-date-pill {
    display: flex; align-items: center; gap: 6px; padding: 7px 12px !important; border-radius: 999px !important;
    border: 1.5px solid var(--p9-border, rgba(0,0,0,.1)) !important; background: var(--p9-panel, #fff) !important;
    font-size: 12.5px; color: var(--p9-text, #1e293b) !important; cursor: pointer; font-family: inherit;
    white-space: nowrap; -webkit-appearance: none !important; appearance: none !important;
    box-sizing: border-box !important;
}
.p9-sa-date-pill * { color: inherit !important; }
.p9-sa-date-pill:hover { border-color: var(--p9-grad-start, #1e90ff) !important; }
.p9-sa-search-btn {
    padding: 7px 16px !important; border-radius: 999px !important; border: none !important;
    background: linear-gradient(135deg, var(--p9-grad-start, #1e90ff) 0%, #000 100%) !important;
    color: #fff !important; font-size: 12.5px; font-weight: 700; cursor: pointer; font-family: inherit;
    display: inline-flex; align-items: center; gap: 6px; white-space: nowrap;
    -webkit-appearance: none !important; appearance: none !important; box-sizing: border-box !important;
}
.p9-sa-search-btn * { color: inherit !important; }
.p9-sa-search-btn:hover { opacity: .9; }
.p9-sa-clear-btn {
    width: 30px !important; height: 30px !important; flex-shrink: 0; padding: 0 !important; border-radius: 999px !important; border: none !important;
    background: var(--p9-bg, #f1f5f9) !important; color: var(--p9-muted, #64748b) !important; font-size: 13px;
    cursor: pointer; font-family: inherit; display: inline-flex; align-items: center; justify-content: center;
    -webkit-appearance: none !important; appearance: none !important; transition: background .15s, color .15s;
    box-sizing: border-box !important;
}
.p9-sa-clear-btn:hover { background: rgba(239,68,68,.12) !important; color: #ef4444 !important; }

.p9-sa-pagination { display: flex; align-items: center; justify-content: center; gap: 6px; margin-top: 16px; }
.p9-sa-pg-btn {
    min-width: 30px; height: 30px; padding: 0 6px; border-radius: 999px;
    border: 1.5px solid var(--p9-border, rgba(0,0,0,.1)); background: var(--p9-panel, #fff);
    font-size: 12px; font-weight: 700; color: var(--p9-text, #1e293b);
    display: flex; align-items: center; justify-content: center; cursor: pointer; font-family: inherit;
}
.p9-sa-pg-btn.active {
    background: linear-gradient(135deg, var(--p9-grad-start, #1e90ff) 0%, #000 100%);
    color: #fff; border: none;
}
.p9-sa-pg-btn:disabled { opacity: .4; cursor: default; }
.p9-rep-status-pill.remote { background: rgba(99,102,241,.12); color: #4f46e5; }
.p9-rep-status-pill.loss { background: rgba(239,68,68,.14); color: #dc2626; }
.p9-rep-status-pill.routine { background: rgba(100,116,139,.12); color: #475569; }

/* Custom rounded calendar popover */
.p9-sa-cal-pop {
    background: var(--p9-panel, #fff); border-radius: 16px;
    box-shadow: 0 16px 40px rgba(0,0,0,.18); padding: 14px; width: 260px; z-index: 10000;
}
.p9-sa-cal-hdr {
    display: flex; align-items: center; justify-content: space-between;
    margin-bottom: 10px; font-size: 13px; font-weight: 700; color: var(--p9-text, #1e293b);
}
.p9-sa-cal-nav {
    width: 22px !important; height: 22px !important; border-radius: 50% !important; border: none !important; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    background: var(--p9-bg, #f8fafc) !important; color: var(--p9-muted, #64748b) !important; font-size: 13px;
    -webkit-appearance: none !important; appearance: none !important; padding: 0 !important; box-sizing: border-box !important;
}
.p9-sa-cal-nav:hover { background: var(--p9-border, rgba(0,0,0,.1)) !important; }
.p9-sa-cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
.p9-sa-cal-dow { font-size: 10px; color: var(--p9-muted, #94a3b8) !important; text-align: center; font-weight: 700; padding: 4px 0; }
.p9-sa-cal-day {
    font-size: 12px; text-align: center; padding: 6px 0; border-radius: 8px;
    color: var(--p9-text, #1e293b) !important; cursor: pointer;
}
.p9-sa-cal-day:hover:not(.muted) { background: var(--p9-bg, #f8fafc); }
.p9-sa-cal-day.muted { color: #cbd5e1 !important; cursor: default; }
.p9-sa-cal-day.today { border: 1.5px solid var(--p9-grad-start, #1e90ff); }
.p9-sa-cal-day.in-range { background: rgba(30,144,255,.08); border-radius: 0; }
.p9-sa-cal-day.range-start, .p9-sa-cal-day.range-end {
    background: linear-gradient(135deg, var(--p9-grad-start, #1e90ff) 0%, #000 100%);
    color: #fff !important; border-radius: 8px;
}
.p9-sa-cal-actions { margin-top: 10px; display: flex; justify-content: flex-end; gap: 8px; }
.p9-sa-cal-cancel {
    padding: 7px 16px !important; border-radius: 999px !important; border: 1.5px solid var(--p9-border, rgba(0,0,0,.12)) !important;
    background: var(--p9-panel, #fff) !important; color: var(--p9-muted, #64748b) !important;
    font-size: 12px; font-weight: 700; cursor: pointer; font-family: inherit;
    -webkit-appearance: none !important; appearance: none !important; box-sizing: border-box !important;
}
.p9-sa-cal-cancel:hover { background: var(--p9-bg, #f1f5f9) !important; }
.p9-sa-cal-apply {
    padding: 7px 18px !important; border-radius: 999px !important; border: none !important;
    background: linear-gradient(135deg, var(--p9-grad-start, #1e90ff) 0%, #000 100%) !important;
    color: #fff !important; font-size: 12px; font-weight: 700; cursor: pointer; font-family: inherit;
    -webkit-appearance: none !important; appearance: none !important; box-sizing: border-box !important;
}
body.gradia-pos-dark .p9-sa-pill-input,
body.gradia-pos-dark .p9-sa-date-pill,
body.gradia-pos-dark .p9-sa-clear-btn,
body.gradia-pos-dark .p9-sa-pg-btn { background: rgba(255,255,255,.05); border-color: rgba(255,255,255,.1); color: #fff; }
body.gradia-pos-dark .p9-sa-cal-pop { background: #0d1526; }
body.gradia-pos-dark .p9-sa-cal-hdr,
body.gradia-pos-dark .p9-sa-cal-day { color: #fff; }
body.gradia-pos-dark .p9-sa-cal-nav { background: rgba(255,255,255,.06); }
body.gradia-pos-dark .p9-sa-cal-cancel { background: rgba(255,255,255,.05); border-color: rgba(255,255,255,.12); color: #fff; }
body.gradia-pos-dark .p9-sa-cal-day.muted { color: #475569; }

/* Dark mode */
body.gradia-pos-dark .p9-report-card { background: #0d1526; border-color: rgba(255,255,255,.07); }
body.gradia-pos-dark .p9-report-date-bar { background: rgba(255,255,255,.03); }
body.gradia-pos-dark .p9-report-date-input { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.1); color: #e2e8f0; }
body.gradia-pos-dark .p9-rep-cashier-card { background: rgba(255,255,255,.04); border-color: rgba(255,255,255,.08); }
body.gradia-pos-dark .p9-rep-cashier-card:hover { border-color: rgba(30,144,255,.4); }
body.gradia-pos-dark .p9-rep-order-card { background: rgba(255,255,255,.03); border-color: rgba(255,255,255,.07); }
body.gradia-pos-dark .p9-rep-cashier-name,
body.gradia-pos-dark .p9-rep-order-num,
body.gradia-pos-dark .p9-rep-order-total,
body.gradia-pos-dark .p9-rep-orders-name,
body.gradia-pos-dark .p9-rep-summ-val { color: #e2e8f0; }
body.gradia-pos-dark .p9-rep-back-btn { background: rgba(255,255,255,.06); color: #e2e8f0; border-color: rgba(255,255,255,.1); }
body.gradia-pos-dark .p9-report-back-btn { background: rgba(255,255,255,.06); color: #e2e8f0; border-color: rgba(255,255,255,.1); }

/* Mobile responsive */
@media (max-width: 600px) {
    .p9-report-card { max-height: 95vh; border-radius: 20px; }
    .p9-report-date-bar { gap: 8px; }
    .p9-rep-cashier-grid { grid-template-columns: 1fr 1fr; gap: 10px; }
    .p9-report-header { padding: 16px 18px 14px; }
    .p9-report-body { padding: 14px 14px; }
}
@media (max-width: 400px) {
    .p9-rep-cashier-grid { grid-template-columns: 1fr; }
}

/* ═══════════════════════════════════════════════════════════════
   Inventory button (topbar)
═══════════════════════════════════════════════════════════════ */
.p9-tb-inv-btn {
    background: linear-gradient(135deg, #059669 0%, #064e3b 100%) !important;
    border: 1px solid rgba(5,150,105,.5) !important;
    color: #fff !important;
    box-shadow: 0 2px 8px rgba(5,150,105,.35);
    position: relative;
}
.p9-tb-inv-btn:hover {
    background: linear-gradient(135deg, #10b981 0%, #065f46 100%) !important;
    box-shadow: 0 3px 12px rgba(5,150,105,.45);
}
.p9-inv-alert-dot {
    position: absolute; top: 2px; right: 2px;
    width: 7px; height: 7px; border-radius: 50%;
    background: #fbbf24; border: 1.5px solid var(--p9-bg,#f8fafc);
}

/* ═══════════════════════════════════════════════════════════════
   Stock alerts bell + panel
═══════════════════════════════════════════════════════════════ */
.p9-stock-bell-btn { padding:5px 8px !important }
.p9-stock-bell-count {
    position:absolute; top:-4px; right:-4px;
    min-width:15px; height:15px; padding:0 3px; border-radius:999px;
    background:#ef4444; color:#fff; font-size:9px; font-weight:700;
    display:flex; align-items:center; justify-content:center;
    border:1.5px solid var(--p9-grad-start,#1e90ff)}

.p9-stock-bell-panel {
    position:absolute; top:100%; right:12px; margin-top:8px;
    width:300px; max-width:92vw; max-height:70vh; overflow:hidden;
    display:flex; flex-direction:column;
    background:var(--p9-panel,#fff); border-radius:18px;
    border:1px solid var(--p9-border,rgba(0,0,0,.08));
    box-shadow:0 20px 50px rgba(0,0,0,.25); z-index:200}

.p9-sbp-header {
    display:flex; align-items:center; justify-content:space-between;
    padding:14px 14px 12px;
    background:var(--p9-gradient, linear-gradient(135deg,#1e90ff 0%,#000 100%));
    flex-shrink:0}
.p9-sbp-header-left { display:flex; align-items:center; gap:9px }
.p9-sbp-icon-wrap {
    width:28px; height:28px; border-radius:9px;
    background:rgba(255,255,255,.18); display:flex;
    align-items:center; justify-content:center; color:#fff; flex-shrink:0}
.p9-sbp-title { font-size:12px; font-weight:700; color:#fff }
.p9-sbp-subtitle { font-size:12px; color:rgba(255,255,255,.65); margin-top:1px }
.p9-sbp-close {
    width:20px !important; height:20px !important; border-radius:50% !important; padding:0 !important; border:none !important;
    background:rgba(255,255,255,.25) !important; color:#fff !important; font-size:12px !important; line-height:1 !important;
    cursor:pointer; display:flex !important; align-items:center !important; justify-content:center !important;
    transition:background .15s}
.p9-sbp-close:hover { background:rgba(255,255,255,.4) !important }

.p9-sbp-filter-bar {
    display:flex; align-items:center; justify-content:space-between; gap:8px;
    padding:10px 12px; flex-wrap:wrap;
    background:var(--p9-bg,#f8fafc);
    border-bottom:1px solid var(--p9-border,rgba(0,0,0,.06))}
.p9-sbp-tabs { display:flex; gap:5px }
.p9-sbp-tab {
    padding:3px 8px !important; border-radius:999px !important; border:1.5px solid var(--p9-border,rgba(0,0,0,.12));
    background:none; font-size:11px !important; font-weight:700; cursor:pointer;
    color:var(--p9-muted,#64748b); font-family:inherit; transition:all .15s}
.p9-sbp-tab:hover { border-color:var(--p9-grad-start,#1e90ff); color:var(--p9-grad-start,#1e90ff) }
.p9-sbp-tab.active { background:var(--p9-grad-start,#1e90ff); border-color:var(--p9-grad-start,#1e90ff); color:#fff }

.p9-sbp-inv-link {
    display:inline-flex; align-items:center; gap:3px;
    padding:3px 8px !important; border-radius:999px; border:none;
    background:linear-gradient(135deg, var(--p9-grad-start,#1e90ff) 0%, #000 100%);
    color:#fff; font-size:11px !important; font-weight:700; cursor:pointer; font-family:inherit;
    white-space:nowrap}
.p9-sbp-inv-link:hover { opacity:.9 }

.p9-sbp-body { overflow-y:auto; padding:6px; flex:1 }
.p9-sbp-empty {
    padding:2rem 1rem; text-align:center; color:var(--p9-muted,#94a3b8); font-size:12px}

.p9-sbp-row {
    display:flex; align-items:flex-start; gap:9px;
    padding:9px 8px; border-radius:12px; cursor:pointer}
.p9-sbp-row:hover { background:var(--p9-bg,#f8fafc) }
.p9-sbp-dot { width:8px; height:8px; border-radius:50%; margin-top:4px; flex-shrink:0 }
.p9-sbp-dot.low { background:#f59e0b }
.p9-sbp-dot.out { background:#ef4444 }
.p9-sbp-dot.resolved { background:#16a34a }
.p9-sbp-row-text { min-width:0 }
.p9-sbp-msg { font-size:12px; color:var(--p9-text,#1e293b); line-height:1.4 }
.p9-sbp-cashier { font-weight:700 }
.p9-sbp-time { font-size:12px; color:var(--p9-muted,#94a3b8); margin-top:2px }
.p9-req-notif-row {
    display:flex; align-items:flex-start; gap:9px;
    padding:9px 8px; border-radius:12px; cursor:pointer}
.p9-req-notif-row:hover { background:var(--p9-bg,#f8fafc) }

body.gradia-pos-dark .p9-stock-bell-panel { background:#0f172a !important; border-color:rgba(255,255,255,.1) !important }
body.gradia-pos-dark .p9-sbp-filter-bar { background:rgba(255,255,255,.03) !important; border-color:rgba(255,255,255,.08) !important }
body.gradia-pos-dark .p9-sbp-msg { color:#fff !important }
body.gradia-pos-dark .p9-sbp-row:hover { background:rgba(255,255,255,.06) !important }

@media (max-width:600px) {
    .p9-stock-bell-panel { position:fixed; top:auto; bottom:0; left:0; right:0; margin:0; width:100%; max-width:100%; max-height:80vh; border-radius:16px 16px 0 0 }
}

/* ═══════════════════════════════════════════════════════════════
   Report modal — tabs
═══════════════════════════════════════════════════════════════ */
.p9-rep-tabs {
    display: flex; gap: 4px; padding: 12px 22px 0;
    border-bottom: 1px solid var(--p9-border,rgba(0,0,0,.07));
    background: var(--p9-bg,#f8fafc); flex-shrink: 0;
}
.p9-rep-tab {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 8px 16px; border-radius: 10px 10px 0 0;
    border: none; background: none; cursor: pointer;
    font-size: 12px; font-weight: 600; font-family: inherit;
    color: var(--p9-muted,#64748b);
    transition: background .15s, color .15s;
    position: relative; bottom: -1px;
}
.p9-rep-tab:hover { background: rgba(30,144,255,.06); color: var(--p9-text,#1e293b); }
.p9-rep-tab.active {
    background: var(--p9-panel,#fff);
    color: #1e90ff;
    border: 1px solid var(--p9-border,rgba(0,0,0,.07));
    border-bottom-color: var(--p9-panel,#fff);
}
body.gradia-pos-dark .p9-rep-tabs { background: rgba(255,255,255,.03); }
body.gradia-pos-dark .p9-rep-tab.active { background: #0d1526; border-bottom-color: #0d1526; }

/* X/Z Report panel */
.p9-xz-report {
    padding: 4px 0;
}
.p9-xz-desc {
    font-size: 13px; color: var(--p9-muted,#64748b);
    margin-bottom: 18px; line-height: 1.6; padding: 12px 16px;
    background: var(--p9-bg,#f8fafc); border-radius: 12px;
    border: 1px solid var(--p9-border,rgba(0,0,0,.07));
}
.p9-xz-desc strong { color: var(--p9-text,#1e293b); }
.p9-xz-stat-grid {
    display: grid; grid-template-columns: repeat(auto-fill,minmax(160px,1fr));
    gap: 12px; margin-bottom: 18px;
}
.p9-xz-stat {
    background: var(--p9-bg,#f8fafc);
    border: 1.5px solid var(--p9-border,rgba(0,0,0,.08));
    border-radius: 14px; padding: 14px 16px; text-align: center;
    transition: border-color .15s;
}
.p9-xz-stat:hover { border-color: rgba(30,144,255,.3); }
.p9-xz-stat-val { font-size: 20px; font-weight: 800; color: var(--p9-text,#1e293b); }
.p9-xz-stat-val.green  { color: #16a34a; }
.p9-xz-stat-val.blue   { color: #1e90ff; }
.p9-xz-stat-val.amber  { color: #d97706; }
.p9-xz-stat-val.red    { color: #ef4444; }
.p9-xz-stat-lbl { font-size: 10px; text-transform: uppercase; letter-spacing: .5px; color: var(--p9-muted,#64748b); margin-top: 4px; }
.p9-xz-stat-hint { font-size: 10px; color: var(--p9-muted,#64748b); margin-top: 2px; opacity: .7; }
.p9-xz-cashier-breakdown {
    margin-top: 16px; border-top: 1px solid var(--p9-border,rgba(0,0,0,.07)); padding-top: 14px;
}
.p9-xz-cashier-row {
    display: flex; align-items: center; gap: 10px;
    padding: 10px 14px; border-radius: 10px;
    border: 1px solid var(--p9-border,rgba(0,0,0,.06));
    margin-bottom: 8px; background: var(--p9-bg,#f8fafc);
}
.p9-xz-cashier-row:hover { border-color: rgba(30,144,255,.2); }
.p9-xz-avatar {
    width: 34px; height: 34px; border-radius: 10px; flex-shrink: 0;
    background: linear-gradient(135deg,#302b63 0%,#1e90ff 100%);
    color: #fff; font-size: 12px; font-weight: 700;
    display: flex; align-items: center; justify-content: center;
}
.p9-xz-cashier-name { font-size: 13px; font-weight: 700; color: var(--p9-text,#1e293b); }
.p9-xz-cashier-sub  { font-size: 11px; color: var(--p9-muted,#64748b); }
.p9-xz-cashier-total { margin-left: auto; font-size: 14px; font-weight: 800; color: #16a34a; }

/* Z-Report confirmation step */
.p9-z-confirm {
    background: linear-gradient(135deg,rgba(124,58,237,.08) 0%,rgba(30,144,255,.08) 100%);
    border: 1.5px solid rgba(124,58,237,.2);
    border-radius: 16px; padding: 20px; margin-bottom: 16px; text-align: center;
}
.p9-z-confirm-icon { font-size: 36px; margin-bottom: 10px; }
.p9-z-confirm-title { font-size: 16px; font-weight: 800; color: var(--p9-text,#1e293b); margin-bottom: 6px; }
.p9-z-confirm-desc  { font-size: 13px; color: var(--p9-muted,#64748b); line-height: 1.6; }
.p9-z-confirm-btn {
    margin-top: 14px; padding: 10px 24px; border-radius: 999px; border: none; cursor: pointer;
    background: linear-gradient(135deg,#7c3aed 0%,#000 100%);
    color: #fff; font-size: 13px; font-weight: 700;
    box-shadow: 0 3px 12px rgba(124,58,237,.3);
    transition: opacity .15s;
}
.p9-z-confirm-btn:hover { opacity: .88; }
.p9-z-print-btn {
    margin-top: 8px; padding: 8px 20px; border-radius: 999px;
    border: 1.5px solid var(--p9-border,rgba(0,0,0,.12));
    background: none; color: var(--p9-muted,#64748b);
    font-size: 12px; font-weight: 700; cursor: pointer;
    display: inline-flex; align-items: center; gap: 6px;
    transition: border-color .15s, color .15s;
}
.p9-z-print-btn:hover { border-color: #7c3aed; color: #7c3aed; }
body.gradia-pos-dark .p9-xz-stat { background: rgba(255,255,255,.04); border-color: rgba(255,255,255,.08); }
body.gradia-pos-dark .p9-xz-cashier-row { background: rgba(255,255,255,.03); border-color: rgba(255,255,255,.06); }
body.gradia-pos-dark .p9-xz-stat-val { color: #e2e8f0; }
body.gradia-pos-dark .p9-xz-cashier-name { color: #e2e8f0; }

/* ═══════════════════════════════════════════════════════════════
   Inventory modal
═══════════════════════════════════════════════════════════════ */
.p9-inv-card {
    background: var(--p9-panel,#fff);
    border-radius: 24px; width: 100%; max-width: 820px;
    max-height: 90vh; display: flex; flex-direction: column;
    overflow: hidden; box-shadow: 0 32px 80px rgba(0,0,0,.45);
    border: 1px solid var(--p9-border,rgba(0,0,0,.07));
    animation: p9DrawerFadeIn .2s ease;
}
.p9-inv-header {
    display: flex; align-items: center; justify-content: space-between;
    padding: 22px 26px 18px;
    background: var(--p9-gradient, linear-gradient(135deg,#1e90ff 0%,#000 100%));
    border-radius: 24px 24px 0 0; flex-shrink: 0;
}
.p9-inv-header-left { display: flex; align-items: center; gap: 14px; }
.p9-inv-icon-wrap {
    width: 40px; height: 40px; border-radius: 12px;
    background: rgba(255,255,255,.18); display: flex;
    align-items: center; justify-content: center; color: #fff; flex-shrink: 0;
}
.p9-inv-title   { font-size: 16px; font-weight: 700; color: #fff; }
.p9-inv-subtitle { font-size: 12px; color: rgba(255,255,255,.65); margin-top: 2px; }
.p9-inv-header .p9-pm-close-btn { color: rgba(255,255,255,.7); }
.p9-inv-header .p9-pm-close-btn:hover { color: #fff; background: rgba(255,255,255,.12); }
.p9-inv-low-badge {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 4px 12px; border-radius: 999px;
    background: rgba(251,191,36,.2); color: #fbbf24;
    font-size: 11px; font-weight: 700; border: 1px solid rgba(251,191,36,.35);
}
.p9-inv-filter-bar {
    display: flex; align-items: center; gap: 10px; padding: 14px 22px;
    border-bottom: 1px solid var(--p9-border,rgba(0,0,0,.07));
    background: var(--p9-bg,#f8fafc); flex-shrink: 0; flex-wrap: wrap;
}
.p9-inv-search-wrap {
    flex: 1; min-width: 180px; display: flex; align-items: center; gap: 8px;
    padding: 6px 12px !important; border-radius: 999px !important;
    border: 1.5px solid var(--p9-border,rgba(0,0,0,.12));
    background: var(--p9-panel,#fff); color: var(--p9-muted,#64748b);
    transition: border-color .15s, box-shadow .15s;
}
.p9-inv-search-wrap:focus-within {
    border-color: #059669; box-shadow: 0 0 0 3px rgba(5,150,105,.12);
}
.p9-inv-search-input {
    border: none !important; outline: none !important; background: transparent !important;
    box-shadow: none !important; -webkit-appearance: none !important; appearance: none !important;
    border-radius: 0 !important; padding: 0 !important; margin: 0 !important;
    font-size: 13px; color: var(--p9-text,#1e293b); width: 100%;
    font-family: inherit;
}
.p9-inv-search-input:focus { outline: none !important; box-shadow: none !important; }
.p9-inv-filter-pills { display: flex; gap: 6px; flex-wrap: wrap; }
.p9-inv-fpill {
    padding: 6px 14px; border-radius: 999px; border: 1.5px solid var(--p9-border,rgba(0,0,0,.12));
    background: none; color: var(--p9-muted,#64748b);
    font-size: 12px; font-weight: 600; cursor: pointer; font-family: inherit;
    transition: all .15s;
}
.p9-inv-fpill:hover { border-color: #059669; color: #059669; }
.p9-inv-fpill.active { background: #059669; border-color: #059669; color: #fff; }
.p9-inv-body { flex: 1; overflow-y: auto; padding: 18px 22px; }
.p9-inv-grid { display: flex; flex-direction: column; gap: 10px; }
/* Product card */
.p9-inv-prod-card {
    background: var(--p9-bg,#f8fafc);
    border: 1.5px solid var(--p9-border,rgba(0,0,0,.08));
    border-radius: 14px; overflow: hidden; cursor: pointer;
    transition: border-color .15s, box-shadow .15s, transform .15s;
    position: relative;
    display: flex; flex-direction: row; align-items: center;
}
.p9-inv-prod-card:hover {
    border-color: #059669; box-shadow: 0 4px 18px rgba(5,150,105,.12);
    transform: translateY(-1px);
}
.p9-inv-prod-img {
    width: 72px; height: 72px; object-fit: cover; flex-shrink: 0;
    background: var(--p9-border,rgba(0,0,0,.05));
    border-radius: 10px; margin: 8px;
}
.p9-inv-prod-body { padding: 10px 12px 10px 4px; flex: 1; min-width: 0; }
.p9-inv-prod-name { font-size: 12px; font-weight: 700; color: var(--p9-text,#1e293b); margin-bottom: 2px; line-height: 1.4; }
.p9-inv-prod-sku  { font-size: 10px; color: var(--p9-muted,#64748b); margin-bottom: 6px; }
.p9-inv-prod-foot { display: flex; align-items: center; justify-content: space-between; }
.p9-inv-prod-price { font-size: 12px; font-weight: 700; color: var(--p9-text,#1e293b); }
/* Stock badge */
.p9-inv-stock-badge {
    padding: 2px 8px; border-radius: 999px; font-size: 10px; font-weight: 700;
}
.p9-inv-stock-badge.good   { background: rgba(22,163,74,.12);  color: #16a34a; }
.p9-inv-stock-badge.low    { background: rgba(245,158,11,.15); color: #d97706; }
.p9-inv-stock-badge.out    { background: rgba(239,68,68,.12);  color: #ef4444; }
.p9-inv-stock-badge.none   { background: rgba(148,163,184,.12); color: #64748b; }
/* Footer pagination */
.p9-inv-footer { display: flex; align-items: center; justify-content: center; gap: 12px; padding: 12px 22px; border-top: 1px solid var(--p9-border,rgba(0,0,0,.07)); flex-shrink: 0; }
.p9-inv-page-btn { width: 32px; height: 32px; border-radius: 999px; border: 1.5px solid var(--p9-border,rgba(0,0,0,.12)); background: var(--p9-bg,#f8fafc); color: var(--p9-text,#1e293b); cursor: pointer; display: flex; align-items: center; justify-content: center; transition: all .15s; }
.p9-inv-page-btn:hover:not(:disabled) { border-color: #059669; color: #059669; }
.p9-inv-page-btn:disabled { opacity: .35; cursor: not-allowed; }
/* Dark mode */
body.gradia-pos-dark .p9-inv-card { background: #0d1526; border-color: rgba(255,255,255,.07); }
body.gradia-pos-dark .p9-inv-filter-bar { background: rgba(255,255,255,.03); }
body.gradia-pos-dark .p9-inv-search-wrap { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.1); }
body.gradia-pos-dark .p9-inv-search-input { color: #e2e8f0; }
body.gradia-pos-dark .p9-inv-prod-card { background: rgba(255,255,255,.04); border-color: rgba(255,255,255,.07); }
body.gradia-pos-dark .p9-inv-prod-card:hover { border-color: rgba(5,150,105,.5); }
body.gradia-pos-dark .p9-inv-prod-name { color: #e2e8f0; }
@media (max-width:600px) {
    .p9-inv-card { max-height: 96vh; border-radius: 20px; }
    .p9-inv-grid { grid-template-columns: 1fr 1fr; }
    .p9-rep-tab span { display: none; }
    .p9-rep-tab { padding: 8px 12px; }
}
@media (max-width:380px) { .p9-inv-grid { grid-template-columns: 1fr; } }

/* ═══ Tablet & Mobile: ensure charge button always visible ══════ */
@media (max-width: 900px) {
    /* Right panel uses absolute positioning — charge wrap must not get clipped */
    .p9-pos-right {
        display: flex !important;
        flex-direction: column !important;
    }

    /* Mobile only (≤600px): basket col fills available space, payment col sits below */
    @media (max-width: 600px) {
        .p9-right-basket-col {
            flex: 1 1 auto !important;
            min-height: 0 !important;
            overflow-y: auto !important;
            display: flex !important;
            flex-direction: column !important;
        }
        .p9-right-basket-col .p9-basket {
            flex: 1 1 auto !important;
            overflow-y: auto !important;
            min-height: 0 !important;
        }
        .p9-right-payment-col {
            flex: 0 0 auto !important;
        }
    }

    .p9-charge-wrap {
        position: sticky;
        bottom: 0;
        z-index: 10;
        background: var(--p9-panel, #fff);
        border-top: 1px solid var(--p9-border, rgba(0,0,0,.07));
        box-shadow: 0 -4px 12px rgba(0,0,0,.08);
        padding: 10px 12px calc(14px + env(safe-area-inset-bottom, 0px));
    }
    /* On tablet (601–900px) show both panels side by side */
    @media (min-width: 601px) {
        /* Tabs: always hidden on tablet and desktop */
        .p9-pos-mobile-tabs { display: none !important; }
        .p9-pos-layout {
            display: grid !important;
            grid-template-columns: 1fr 340px !important;
            position: static !important;
            overflow: visible !important;
        }
        .p9-pos-left,
        .p9-pos-right {
            position: static !important;
            height: 100% !important;
            overflow-y: auto !important;
            opacity: 1 !important;
            pointer-events: auto !important;
            transform: none !important;
        }
        /* Hide tabs on tablet too — both panels visible */
        .p9-pos-mobile-tabs { display: none !important; }
        /* Product grid at tablet: larger cards for image visibility */
        .p9-grid {
            grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)) !important;
        }
        /* Report & Inventory buttons stay in topbar on tablet */
        .p9-topbar-actions { display: flex !important; }
        /* But slim them down */
        .p9-pos-tb-btn span { display: none; }
        .p9-pos-tb-btn { padding: 6px 8px; min-width: 32px; justify-content: center; }
        .p9-pos-tb-btn svg { display: block; }
    }
}


/* ═══ Account Button ═══════════════════════════════════════════ */
.p9-acct-btn {
    width: auto; height: 34px; border-radius: 999px;
    padding: 0 12px 0 4px;
    border: 2px solid rgba(255,255,255,.35);
    background: var(--p9-gradient, linear-gradient(135deg,#1e90ff 0%,#000 100%));
    display: flex; align-items: center; justify-content: center;
    cursor: pointer; flex-shrink: 0; overflow: hidden; padding: 0;
    transition: border-color .15s, box-shadow .15s;
}
.p9-acct-btn:hover { border-color: rgba(255,255,255,.7); box-shadow: 0 0 0 3px rgba(30,144,255,.3); }
.p9-acct-avatar-img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
.p9-acct-initials { color: #fff; font-size: 12px; font-weight: 700; }

/* ═══ Account Modal ════════════════════════════════════════════ */
.p9-acct-card {
    background: var(--p9-panel,#fff); border-radius: 24px;
    width: 100%; max-width: 520px; max-height: 90vh;
    display: flex; flex-direction: column; overflow: hidden;
    box-shadow: 0 32px 80px rgba(0,0,0,.45);
    border: 1px solid var(--p9-border,rgba(0,0,0,.07));
    animation: p9DrawerFadeIn .2s ease;
}
.p9-acct-header {
    display: flex; align-items: center; justify-content: space-between;
    padding: 22px 24px 18px;
    background: var(--p9-gradient, linear-gradient(135deg,#1e90ff 0%,#000 100%));
    border-radius: 24px 24px 0 0; flex-shrink: 0;
}
.p9-acct-header-left { display: flex; align-items: center; gap: 14px; }
.p9-acct-hdr-avatar {
    width: 52px; height: 52px; border-radius: 50%; flex-shrink: 0;
    background: var(--p9-gradient, linear-gradient(135deg,#1e90ff 0%,#000 100%));
    display: flex; align-items: center; justify-content: center;
    color: #fff; font-size: 16px; font-weight: 800;
    border: 2px solid rgba(255,255,255,.35); overflow: hidden;
    position: relative; cursor: pointer;
}
.p9-acct-avatar-upload-lbl {
    position: absolute; inset: 0; display: flex; align-items: center;
    justify-content: center; background: rgba(0,0,0,.45);
    opacity: 0; transition: opacity .2s; cursor: pointer;
    border-radius: 50%; color: #fff;
}
.p9-acct-hdr-avatar:hover .p9-acct-avatar-upload-lbl { opacity: 1; }
.p9-acct-display-name { font-size: 15px; font-weight: 700; color: #fff; margin-bottom: 4px; }
.p9-acct-role-pill { display: inline-block; padding: 2px 10px; border-radius: 999px; font-size: 11px; font-weight: 700; }
.p9-acct-header .p9-pm-close-btn { color: rgba(255,255,255,.7); }
.p9-acct-header .p9-pm-close-btn:hover { color: #fff; background: rgba(255,255,255,.12); }
.p9-acct-tabs {
    display: flex; gap: 4px; padding: 12px 20px 0;
    border-bottom: 1px solid var(--p9-border,rgba(0,0,0,.07));
    background: var(--p9-bg,#f8fafc); flex-shrink: 0;
}
.p9-acct-tab {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 8px 14px; border-radius: 10px 10px 0 0 !important;
    border: none !important; background: none; cursor: pointer;
    font-size: 12px; font-weight: 600; font-family: inherit !important;
    color: var(--p9-muted,#64748b); position: relative; bottom: -1px;
    transition: background .15s, color .15s;
    -webkit-appearance: none !important; appearance: none !important;
}
.p9-acct-tab:hover { background: rgba(30,144,255,.06); color: var(--p9-text,#1e293b); }
.p9-acct-tab.active {
    background: var(--p9-panel,#fff); color: #1e90ff;
    border: 1px solid var(--p9-border,rgba(0,0,0,.07));
    border-bottom-color: var(--p9-panel,#fff);
}
.p9-acct-body { flex: 1; overflow-y: auto; padding: 20px; }
.p9-acct-panel { display: block; }
.p9-acct-field-group { display: flex; flex-direction: column; gap: 14px; margin-bottom: 16px; }
.p9-acct-field { display: flex; flex-direction: column; gap: 5px; }

/* ── Password / PIN eye toggle ──────────────────────────────── */
.p9-pw-wrap {
    position: relative; display: flex; align-items: center;
}
.p9-pw-wrap .p9-acct-input {
    width: 100%; padding-right: 42px !important;
}
.p9-pw-eye {
    position: absolute; right: 12px;
    background: none !important; border: none !important;
    cursor: pointer; color: var(--p9-muted,#94a3b8);
    padding: 4px !important; line-height: 1;
    display: inline-flex; align-items: center; justify-content: center;
    transition: color .15s;
    -webkit-appearance: none !important; appearance: none !important;
}
.p9-pw-eye:hover { color: var(--p9-text,#1e293b); }
.p9-acct-label { font-size: 11px; font-weight: 700; color: var(--p9-muted,#64748b); text-transform: uppercase; letter-spacing: .5px; display: flex; align-items: center; gap: 4px; }
.p9-acct-hint { font-size: 10px; font-weight: 400; text-transform: none; color: var(--p9-muted,#94a3b8); }

/* Sign-in methods rows (Password, POS PIN, 2FA, Fingerprint) and the staff
   credential-management list */
.p9-acct-secmethod-row {
    display: flex; align-items: center; gap: 12px;
    padding: 13px 14px; margin-bottom: 10px;
    border: 1px solid var(--p9-border, rgba(0,0,0,.08)) !important; border-radius: 14px !important;
}
.p9-acct-secmethod-row > svg {
    width: 34px; height: 34px; padding: 8px; flex-shrink: 0;
    border-radius: 10px !important; box-sizing: border-box;
    background: var(--p9-ring-10, rgba(30,144,255,.1)) !important; color: var(--p9-grad-start, #1e90ff) !important;
}
.p9-acct-secmethod-info { flex: 1; min-width: 0; }
.p9-acct-secmethod-title { font-size: 13.5px; font-weight: 700; color: var(--p9-text, #0f172a) !important; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.p9-acct-secmethod-desc { font-size: 12px; color: var(--p9-muted, #64748b) !important; margin-top: 2px; }
.p9-acct-pin-badge {
    padding: 2px 8px; border-radius: 999px !important; background: var(--p9-surface, #f1f5f9) !important;
    color: var(--p9-muted, #64748b) !important; font-size: 10.5px; font-weight: 600; text-transform: none;
}
.p9-acct-secmethod-badge {
    padding: 2px 8px; border-radius: 999px !important;
    font-size: 10px; font-weight: 700; letter-spacing: .3px;
}
.p9-acct-secmethod-btn {
    flex-shrink: 0; font-size: 12px; font-weight: 700;
    padding: 7px 16px; line-height: 1.4; border-radius: 999px !important;
    border: 1.5px solid var(--p9-grad-start, #1e90ff) !important; background: var(--p9-panel, #fff) !important;
    color: var(--p9-grad-start, #1e90ff) !important; cursor: pointer;
}
.p9-acct-secmethod-btn:hover { background: var(--p9-ring-10, rgba(30,144,255,.1)) !important; }
.p9-acct-secmethod-btn.p9-acct-secmethod-btn-cta {
    border: none !important; color: #fff !important;
    background: linear-gradient(135deg, var(--p9-grad-start, #1e90ff) 0%, #000 100%) !important;
}
.p9-acct-secmethod-btn.p9-acct-secmethod-btn-cta:hover { opacity: .9; background: linear-gradient(135deg, var(--p9-grad-start, #1e90ff) 0%, #000 100%) !important; }
.p9-acct-secmethod-btn:disabled { opacity: .4; cursor: not-allowed; }
.p9-acct-secmethod-btn:disabled:hover { background: var(--p9-panel, #fff) !important; }

.p9-acct-bio-staff-row {
    display: flex; align-items: center; gap: 12px;
    padding: 11px 14px; border: 1px solid var(--p9-border, rgba(0,0,0,.08)) !important; border-radius: 14px !important;
}
.p9-acct-bio-staff-avatar {
    width: 32px; height: 32px; flex-shrink: 0; border-radius: 50% !important;
    background: var(--p9-surface, #f1f5f9) !important; color: var(--p9-muted, #64748b) !important;
    display: flex; align-items: center; justify-content: center;
    font-size: 12px; font-weight: 700;
}
.p9-acct-bio-staff-info { flex: 1; min-width: 0; }
.p9-acct-bio-staff-name { font-size: 13px; font-weight: 700; color: var(--p9-text, #0f172a) !important; }
.p9-acct-bio-staff-role { font-size: 11.5px; color: var(--p9-muted, #64748b) !important; margin-top: 1px; }
.p9-acct-sec-staff-item {
    display: flex; align-items: center; justify-content: space-between;
    padding: 10px 14px; border: 1px solid var(--p9-border, rgba(0,0,0,.08)) !important; border-radius: 14px !important;
    font-size: 12.5px; font-weight: 600; color: var(--p9-text, #0f172a) !important;
    margin-bottom: 8px;
}
.p9-acct-sec-staff-reset {
    font-size: 12px; font-weight: 700; padding: 7px 16px; line-height: 1.4;
    border-radius: 999px !important; border: none !important; cursor: pointer;
    background: #dc2626 !important; color: #fff !important;
}
.p9-acct-sec-staff-reset:hover { background: #b91c1c !important; }
.p9-acct-input {
    padding: 10px 16px; border-radius: 999px !important;
    border: 1.5px solid var(--p9-border,rgba(0,0,0,.12)) !important;
    background: var(--p9-bg,#f8fafc); color: var(--p9-text,#1e293b);
    font-size: 13px; font-family: inherit !important; outline: none;
    transition: border-color .15s, box-shadow .15s;
    -webkit-appearance: none !important; appearance: none !important;
    box-sizing: border-box !important;
}
.p9-acct-input:focus { border-color: var(--p9-grad-start, #1e90ff); box-shadow: 0 0 0 3px var(--p9-ring-10, rgba(30,144,255,.10)); }
.p9-acct-select {
    padding: 10px 16px; border-radius: 999px !important;
    border: 1.5px solid var(--p9-border,rgba(0,0,0,.12)) !important;
    background: var(--p9-bg,#f8fafc); color: var(--p9-text,#1e293b);
    font-size: 13px; font-family: inherit !important; outline: none; cursor: pointer;
    -webkit-appearance: none !important; appearance: none !important;
    box-sizing: border-box !important;
}
.p9-acct-select:focus { border-color: #1e90ff; }
.p9-acct-phone-row { display: flex; gap: 8px; }
.p9-acct-cc-sel { flex-shrink: 0; width: 110px; }
.p9-acct-phone-row .p9-acct-input { flex: 1; }
.p9-acct-save-btn {
    padding: 11px 24px; border-radius: 999px !important; border: none !important; cursor: pointer;
    background: var(--p9-gradient, linear-gradient(135deg,#1e90ff 0%,#000 100%));
    color: #fff; font-size: 13px; font-weight: 700; font-family: inherit !important;
    box-shadow: 0 3px 10px var(--p9-ring-30, rgba(30,144,255,.3)); transition: opacity .15s;
    -webkit-appearance: none !important; appearance: none !important;
    box-sizing: border-box !important;
}
.p9-acct-save-btn:hover { opacity: .88; }
.p9-acct-cancel-btn {
    padding: 11px 20px; border-radius: 999px !important;
    border: 1.5px solid var(--p9-border,rgba(0,0,0,.12)) !important;
    background: var(--p9-bg,#f1f5f9); color: var(--p9-text,#374151);
    font-size: 13px; font-weight: 600; cursor: pointer; font-family: inherit !important;
    -webkit-appearance: none !important; appearance: none !important;
    box-sizing: border-box !important;
}
.p9-acct-add-user-btn {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 8px 16px; border-radius: 999px !important; border: none !important; cursor: pointer;
    background: var(--p9-gradient, linear-gradient(135deg,#1e90ff 0%,#000 100%));
    color: #fff; font-size: 12px; font-weight: 700; font-family: inherit !important;
    -webkit-appearance: none !important; appearance: none !important;
    box-sizing: border-box !important;
}
/* Belt-and-suspenders — guarantees a full pill shape for the Roles tab's
   Add Role button specifically, in case a theme's own button CSS ever
   loads with enough specificity to blunt the corners of the shared class
   above. */
#p9-acct-add-role {
    border-radius: 999px !important;
    -webkit-border-radius: 999px !important;
}
.p9-acct-msg { padding: 10px 14px; border-radius: 10px; font-size: 12px; font-weight: 600; margin-bottom: 12px; }
.p9-acct-msg.ok  { background: rgba(22,163,74,.1);  color: #16a34a; }
.p9-acct-msg.err { background: rgba(239,68,68,.1);  color: #ef4444; }
.p9-acct-divider { border: none; border-top: 1px solid var(--p9-border,rgba(0,0,0,.08)); margin: 20px 0; }
.p9-acct-section-title { display: flex; align-items: center; gap: 7px; font-size: 13px; font-weight: 700; color: var(--p9-text,#1e293b); margin-bottom: 14px; }
.p9-acct-user-grid { display: flex; flex-direction: column; gap: 10px; }
.p9-acct-user-card { display: flex; align-items: center; gap: 12px; padding: 12px 14px; background: var(--p9-bg,#f8fafc); border: 1.5px solid var(--p9-border,rgba(0,0,0,.08)); border-radius: 14px; }
.p9-acct-user-av { width: 38px; height: 38px; border-radius: 12px; flex-shrink: 0; background: var(--p9-gradient, linear-gradient(135deg,#1e90ff 0%,#000 100%)); color: #fff; font-size: 13px; font-weight: 700; display: flex; align-items: center; justify-content: center; }
.p9-acct-user-name { font-size: 13px; font-weight: 700; color: var(--p9-text,#1e293b); }
.p9-acct-user-email { font-size: 11px; color: var(--p9-muted,#64748b); }
.p9-acct-user-actions { margin-left: auto; display: flex; gap: 6px; }
.p9-acct-user-act-btn {
    padding: 3px 10px; border-radius: 999px !important; font-size: 10px; font-weight: 700;
    cursor: pointer; font-family: inherit !important;
    border: 1.5px solid var(--p9-border, rgba(0,0,0,.12)) !important;
    background: var(--p9-bg, #f8fafc); color: var(--p9-text, #374151);
    transition: all .15s; display: inline-flex; align-items: center; justify-content: center;
    -webkit-appearance: none !important; appearance: none !important;
    box-sizing: border-box !important; line-height: 1;
}
.p9-acct-user-act-btn:hover {
    background: var(--p9-gradient, linear-gradient(135deg,#1e90ff,#000));
    color: #fff; border-color: transparent !important;
    box-shadow: 0 2px 8px var(--p9-ring-20, rgba(30,144,255,.2));
}
.p9-acct-user-act-btn.danger {
    padding: 3px 7px; border-color: rgba(239,68,68,.25) !important;
    color: #ef4444; background: rgba(239,68,68,.05); font-size: 13px;
}
.p9-acct-user-act-btn.danger:hover {
    background: linear-gradient(135deg,#ef4444,#b91c1c); color: #fff;
    border-color: transparent !important; box-shadow: 0 2px 8px rgba(239,68,68,.25);
}

body.gradia-pos-dark .p9-acct-card { background: #0d1526; border-color: rgba(255,255,255,.07); }
body.gradia-pos-dark .p9-acct-tabs { background: rgba(255,255,255,.03); }
body.gradia-pos-dark .p9-acct-tab.active { background: #0d1526; border-bottom-color: #0d1526; }
body.gradia-pos-dark .p9-acct-input { background: rgba(255,255,255,.06); color: #e2e8f0; border-color: rgba(255,255,255,.1); }
body.gradia-pos-dark .p9-acct-select { background: rgba(255,255,255,.06); color: #e2e8f0; border-color: rgba(255,255,255,.1); color-scheme: dark; }
body.gradia-pos-dark .p9-acct-user-card { background: rgba(255,255,255,.04); border-color: rgba(255,255,255,.07); }
body.gradia-pos-dark .p9-acct-user-name { color: #e2e8f0; }
body.gradia-pos-dark .p9-acct-display-name { color: #fff; }
body.gradia-pos-dark .p9-acct-section-title { color: #e2e8f0; }
@media (max-width: 600px) { .p9-acct-card { max-height: 96vh; border-radius: 20px; } }

/* Account button label — visible desktop/tablet, hidden mobile */
.p9-acct-btn-label {
    font-size: 12px; font-weight: 700; color: #fff;
    white-space: nowrap; letter-spacing: .2px;
}
.p9-acct-avatar-img,
.p9-acct-btn .p9-acct-initials {
    width: 26px; height: 26px; border-radius: 50%; flex-shrink: 0;
}
@media (max-width: 600px) {
    .p9-acct-btn { width: 34px; height: 34px; border-radius: 50%; padding: 0; }
    .p9-acct-btn-label { display: none; }
}

/* ═══ MOBILE SCROLL: Single scroll zone ════════════════════════════════════
   Structure: p9-pos-right scrolls as a whole.
   p9-customer-wrap sticks to top, p9-charge-wrap sticks to bottom.
   Everything between (basket + totals + payment + numpad) scrolls freely.
══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 600px) {

    /* The right panel IS the scroll container — keep absolute so tab switching works */
    .p9-pos-right {
        position: absolute !important;
        inset: 0 !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        -webkit-overflow-scrolling: touch;
        height: 100% !important;
        display: block !important;
    }

    /* Customer bar — sticks to top of the scroll container */
    .p9-customer-wrap {
        position: sticky !important;
        top: 0 !important;
        z-index: 10 !important;
        background: var(--p9-panel, #fff) !important;
        border-bottom: 1px solid var(--p9-border, rgba(0,0,0,.06));
        margin: 0 !important;
    }
    body.gradia-pos-dark .p9-customer-wrap {
        background: var(--p9-panel, #1e2a3a) !important;
    }

    /* Charge button — sticks to bottom of the scroll container */
    .p9-charge-wrap {
        position: sticky !important;
        bottom: 0 !important;
        z-index: 10 !important;
        background: var(--p9-panel, #fff) !important;
        border-top: 1px solid var(--p9-border, rgba(0,0,0,.07));
        box-shadow: 0 -4px 16px rgba(0,0,0,.12);
        padding-bottom: calc(8px + env(safe-area-inset-bottom, 0px));
        margin: 0 !important;
    }
    body.gradia-pos-dark .p9-charge-wrap {
        background: transparent !important;
    }

    /* Remove any height cap on basket — let it grow naturally */
    .p9-basket,
    .p9-right-top .p9-basket {
        max-height: none !important;
        overflow: visible !important;
    }

    /* right-basket-col and right-payment-col stack on mobile */
    .p9-right-basket-col,
    .p9-right-payment-col {
        display: block !important;
        overflow: visible !important;
        height: auto !important;
    }
    .p9-right-basket-col .p9-basket {
        max-height: none !important;
        overflow: visible !important;
    }
    /* Legacy class refs kept for JS compatibility */
    .p9-right-top,
    .p9-right-scroll {
        overflow: visible !important;
        position: static !important;
    }
}

/* Remove basket height cap at all mobile/tablet sizes */
@media (max-width: 900px) {
    .p9-right-top .p9-basket { max-height: none !important; }
}

/* ═══ FIX 4: Payment method text white in dark mode ═════════════ */
body.gradia-pos-dark .p9-pay-method .p9-pm-title { color: #fff !important; }
body.gradia-pos-dark .p9-pay-method .p9-pm-desc  { color: rgba(255,255,255,.7) !important; }
body.gradia-pos-dark .p9-pm-label { color: #fff !important; }
body.gradia-pos-dark .p9-section-hdr { color: rgba(255,255,255,.55); }

/* ═══ FIX 5: Price/cost white in dark mode ══════════════════════ */
body.gradia-pos-dark .p9-card-price { color: #fff !important; }
body.gradia-pos-dark .p9-total-grand,
body.gradia-pos-dark .p9-grand-num  { color: #fff !important; }

/* ═══ FIX 6: My Account label — desktop/tablet only ════════════ */
.p9-acct-btn {
    border-radius: 999px !important;
    padding: 0 14px 0 4px;
    gap: 8px;
    width: auto !important;
    min-height: 34px;
}
.p9-acct-btn-label {
    font-size: 12px;
    font-weight: 700;
    color: #fff;
    white-space: nowrap;
}
@media (max-width: 600px) {
    .p9-acct-btn {
        width: 34px !important;
        height: 34px !important;
        padding: 0 !important;
        border-radius: 50% !important;
    }
    .p9-acct-btn-label { display: none !important; }
}

/* ═══ FIX 10: Payment method cards less tall ════════════════════ */
/* padding handled above */
.p9-pay-methods { gap: 6px !important; }
@media (max-width: 600px) {
    .p9-pay-method { padding: 7px 10px !important; }
}

/* ═══ FIX 11: Product images visible on small screens ══════════ */
@media (max-width: 480px) {
    .p9-grid { grid-template-columns: repeat(2, 1fr) !important; }
    .p9-prod-card { font-size: 11px; }
}
@media (max-width: 360px) {
    .p9-grid { grid-template-columns: 1fr !important; }
}

/* ═══ FIX 13: Products/Basket tabs hidden on desktop+tablet ════ */
@media (min-width: 601px) {
    .p9-pos-mobile-tabs { display: none !important; }
}


/* ═══ Inventory Clerk Mode ══════════════════════════════════════ */
/* Hide selling sections when in inventory-clerk-only mode */
.p9-inv-clerk-mode .p9-pos-left          { display: none !important; }
.p9-inv-clerk-mode .p9-pos-right         { flex: 1 !important; }
.p9-inv-clerk-mode .p9-basket-section:not(.p9-customer-wrap) { display: none !important; }
.p9-inv-clerk-mode .p9-right-payment-col { display: none !important; }
.p9-inv-clerk-mode .p9-right-scroll      { display: none !important; }
.p9-inv-clerk-mode .p9-charge-wrap       { display: none !important; }
.p9-inv-clerk-mode .p9-pos-tb-btn[data-action="hold-order"],
.p9-inv-clerk-mode .p9-pos-tb-btn[data-action="split-payment"],
.p9-inv-clerk-mode .p9-pos-tb-btn[data-action="refund"],
.p9-inv-clerk-mode .p9-pos-tb-btn[data-action="parked-orders"],
.p9-inv-clerk-mode .p9-pos-tb-btn[data-action="report"],
.p9-inv-clerk-mode #p9-rewards-toggle,
/* Inventory clerk stock dashboard */
.p9-inv-clerk-dashboard {
    display: none;
    padding: 20px; display: flex; flex-direction: column; gap: 16px;
    flex: 1; overflow-y: auto;
}
.p9-inv-clerk-stats {
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px;
}
.p9-inv-clerk-stat {
    background: var(--p9-panel, #fff);
    border: 1.5px solid var(--p9-border, rgba(0,0,0,.08));
    border-radius: 16px; padding: 16px 12px; text-align: center;
    transition: border-color .15s;
}
.p9-inv-clerk-stat:hover { border-color: var(--p9-grad-start, #1e90ff); }
.p9-ics-number {
    font-size: 28px; font-weight: 800;
    color: var(--p9-grad-start, #1e90ff); line-height: 1;
    margin-bottom: 4px;
}
.p9-ics-label {
    font-size: 11px; font-weight: 600; color: var(--p9-muted, #64748b);
    text-transform: uppercase; letter-spacing: .5px;
}
.p9-inv-clerk-actions {
    display: flex; gap: 10px; flex-wrap: wrap;
}
.p9-inv-clerk-action-btn {
    flex: 1; min-width: 140px; padding: 14px 20px;
    border-radius: 14px; border: none; cursor: pointer;
    font-size: 13px; font-weight: 700; font-family: inherit;
    display: flex; align-items: center; justify-content: center; gap: 8px;
    transition: opacity .15s, transform .12s;
}
.p9-inv-clerk-action-btn:hover { opacity: .88; transform: translateY(-1px); }
.p9-ica-primary {
    background: var(--p9-gradient, linear-gradient(135deg,#1e90ff 0%,#000 100%));
    color: #fff; box-shadow: 0 3px 10px var(--p9-ring-30, rgba(30,144,255,.3));
}
.p9-ica-secondary {
    background: var(--p9-bg, #f1f5f9);
    color: var(--p9-text, #1e293b);
    border: 1.5px solid var(--p9-border, rgba(0,0,0,.1));
}

.p9-inv-clerk-mode .p9-inv-clerk-dashboard { display: flex !important; }

/* ── Remote deactivated banner ──────────────────────────────────── */
.p9-remote-off-banner {
    background: linear-gradient(90deg,#7c3aed,#4f46e5);
    color: #fff;
    font-size: 12px;
    font-weight: 600;
    padding: 10px 16px;
    flex-shrink: 0;
}

.p9-remote-off-top {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.p9-remote-off-top span { flex: 1; min-width: 0; }

.p9-remote-off-btns { display: flex; gap: 8px; flex-shrink: 0; }

.p9-remote-off-btn {
    padding: 5px 14px;
    border-radius: 6px;
    border: none;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
    transition: opacity .15s;
}
.p9-remote-off-btn:hover { opacity: .85; }

.p9-remote-off-btn-local  { background: rgba(255,255,255,.2); color: #fff; }
.p9-remote-off-btn-remote { background: #fff; color: #4f46e5; }

.p9-remote-off-detail {
    margin-top: 8px;
    padding: 10px 14px;
    background: rgba(0,0,0,.2);
    border-radius: 7px;
    font-size: 12px;
    font-weight: 400;
    line-height: 1.6;
}

.p9-remote-off-detail a {
    color: #c4b5fd;
    font-weight: 700;
    text-decoration: underline;
}

/* ── Cash tendered error ─────────────────────────────────────────── */
#p9-tendered-error {
    display: none;
    margin: 0 0 8px;
    padding: 8px 12px;
    background: #fef2f2;
    border: 1.5px solid #fca5a5;
    border-radius: 7px;
    color: #b91c1c;
    font-size: 12px;
    font-weight: 600;
    text-align: center;
    animation: p9-err-pop .15s ease;
}
@keyframes p9-err-pop {
    from { opacity: 0; transform: translateY(4px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ═══════════════════════════════════════════════════════════════════
   QR ANALYTICS MODAL  — Gradia POS Frontend
   Adapts to Light / Dark mode automatically
   ═══════════════════════════════════════════════════════════════════ */

/* ── Modal overlay ──────────────────────────────────────────────── */
#p9-qr-modal {
    position: fixed; inset: 0; z-index: 10500;
    background: rgba(0,0,0,.55); backdrop-filter: blur(3px);
    display: flex; align-items: center; justify-content: center;
    padding: 20px 16px;
}

/* ── Modal card — fixed height: header stays pinned, body scrolls ─ */
.p9-qr-card {
    background: var(--p9-surface, #fff);
    border-radius: 20px;
    width: 100%; max-width: 860px;
    height: 88vh;
    display: flex; flex-direction: column; overflow: hidden;
    box-shadow: 0 24px 64px rgba(0,0,0,.25);
    border: 1px solid var(--p9-border, rgba(0,0,0,.08));
}

/* ── Header — never scrolls, always visible ─────────────────────── */
.p9-qr-header {
    display: flex; align-items: center; justify-content: space-between;
    flex-wrap: wrap; gap: 12px;
    padding: 22px 24px 18px;
    background: linear-gradient(135deg, #0f172a 0%, #1a3254 50%, #1d4ed8 100%);
    border-radius: 20px 20px 0 0;
    position: relative; overflow: hidden;
    flex-shrink: 0; /* never squeeze — always fully visible */
}

/* ── Scrollable body — everything below the header ──────────────── */
.p9-qr-body {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    min-height: 0; /* required for flex children to scroll */
    -webkit-overflow-scrolling: touch;
}
.p9-qr-header::before {
    content: ""; position: absolute; top: -60px; right: -60px;
    width: 200px; height: 200px; border-radius: 50%;
    background: rgba(255,255,255,.04); pointer-events: none;
}
.p9-qr-header-left { display: flex; align-items: center; gap: 14px; }
.p9-qr-header-icon {
    font-size: 28px; width: 52px; height: 52px; flex-shrink: 0;
    background: rgba(255,255,255,.15); border-radius: 14px;
    display: flex; align-items: center; justify-content: center;
}
.p9-qr-title    { font-size: 20px; font-weight: 800; color: #fff; line-height: 1.2; }
.p9-qr-subtitle { font-size: 12px; color: rgba(255,255,255,.65); margin-top: 3px; }

.p9-qr-header-right { display: flex; align-items: center; gap: 12px; flex-shrink: 0; }
.p9-qr-live-badge {
    display: inline-flex; align-items: center; gap: 7px;
    background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.2);
    color: #fff; font-size: 11px; font-weight: 600;
    padding: 6px 14px; border-radius: 99px; white-space: nowrap;
}
.p9-qr-live-dot {
    width: 7px; height: 7px; border-radius: 50%; background: #4ade80;
    box-shadow: 0 0 0 3px rgba(74,222,128,.35);
    animation: p9-qr-pulse 2s infinite;
}
@keyframes p9-qr-pulse {
    0%, 100% { box-shadow: 0 0 0 3px rgba(74,222,128,.35); }
    50%       { box-shadow: 0 0 0 7px rgba(74,222,128,.08); }
}

/* ── Tracking disabled notice ───────────────────────────────────── */
.p9-qr-notice {
    display: flex; align-items: flex-start; gap: 10px;
    margin: 14px 20px 0;
    padding: 12px 16px; border-radius: 10px;
    background: #fffbeb; border: 1px solid #fcd34d;
    font-size: 13px; color: #92400e;
}
.p9-qr-notice-icon { font-size: 18px; flex-shrink: 0; }

/* ── Loading ────────────────────────────────────────────────────── */
.p9-qr-loading {
    display: flex; align-items: center; gap: 12px;
    padding: 40px 24px; justify-content: center;
    color: var(--p9-text-muted, #64748b); font-size: 14px;
}

/* ── Inner content wrapper ──────────────────────────────────────── */
.p9-qr-content { padding: 16px 20px 20px; }

/* ── KPI strip ──────────────────────────────────────────────────── */
.p9-qr-kpis {
    display: grid; grid-template-columns: repeat(4, 1fr);
    gap: 12px; margin-bottom: 16px;
}
.p9-qr-kpi {
    display: flex; align-items: center; gap: 12px;
    background: var(--p9-surface-2, #f8fafc);
    border: 1px solid var(--p9-border, #e2e8f0);
    border-radius: 14px; padding: 16px;
    box-shadow: 0 2px 8px rgba(0,0,0,.04);
    transition: transform .15s, box-shadow .15s;
}
.p9-qr-kpi:hover { transform: translateY(-2px); box-shadow: 0 6px 18px rgba(0,0,0,.08); }
.p9-qr-kpi-icon {
    width: 44px; height: 44px; border-radius: 12px; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center; font-size: 20px;
}
.p9-qr-blue   { background: #dbeafe; }
.p9-qr-green  { background: #dcfce7; }
.p9-qr-amber  { background: #fef3c7; }
.p9-qr-violet { background: #ede9fe; }
.p9-qr-kpi-val { font-size: 20px; font-weight: 800; color: var(--p9-text, #0f172a); line-height: 1.1; }
.p9-qr-kpi-lbl {
    font-size: 9px; font-weight: 700; color: #94a3b8;
    text-transform: uppercase; letter-spacing: .5px; margin-top: 2px;
}
.p9-qr-kpi-sub { font-size: 11px; color: var(--p9-text-muted, #64748b); margin-top: 2px; }

/* ── Channel panels ─────────────────────────────────────────────── */
.p9-qr-panels {
    display: grid; grid-template-columns: 1fr 1fr;
    gap: 14px; margin-bottom: 16px;
}
.p9-qr-panel {
    background: var(--p9-surface, #fff);
    border: 1px solid var(--p9-border, #e2e8f0);
    border-radius: 16px; overflow: hidden;
    box-shadow: 0 4px 16px rgba(0,0,0,.05);
    transition: transform .18s, box-shadow .18s;
}
.p9-qr-panel:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(0,0,0,.09); }
.p9-qr-panel-head {
    display: flex; align-items: center; gap: 12px;
    padding: 16px 18px;
}
.p9-qr-wa  { background: linear-gradient(135deg, #065f46, #10b981); }
.p9-qr-web { background: linear-gradient(135deg, #1e3a8a, #3b82f6); }
.p9-qr-panel-icon {
    width: 40px; height: 40px; border-radius: 10px; flex-shrink: 0;
    background: rgba(255,255,255,.2); display: flex;
    align-items: center; justify-content: center; font-size: 18px;
}
.p9-qr-panel-name { font-size: 14px; font-weight: 700; color: #fff; }
.p9-qr-panel-sub  { font-size: 11px; color: rgba(255,255,255,.7); margin-top: 2px; }

/* ── Mini stat grid ─────────────────────────────────────────────── */
.p9-qr-stats {
    display: grid; grid-template-columns: 1fr 1fr;
    gap: 8px; padding: 14px 14px 4px;
}
.p9-qr-stat {
    background: var(--p9-surface-2, #f8fafc);
    border: 1px solid var(--p9-border, #f1f5f9);
    border-radius: 10px; padding: 11px 10px; text-align: center;
    position: relative; overflow: hidden;
}
.p9-qr-stat::before {
    content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px;
}
.p9-qr-s-wa::before    { background: #10b981; }
.p9-qr-s-web::before   { background: #3b82f6; }
.p9-qr-s-amber::before { background: #f59e0b; }
.p9-qr-s-teal::before  { background: #14b8a6; }
.p9-qr-stat-num { font-size: 22px; font-weight: 800; line-height: 1.1; }
.p9-qr-wa-color     { color: #059669; }
.p9-qr-web-color    { color: #2563eb; }
.p9-qr-amber-color  { color: #d97706; }
.p9-qr-teal-color   { color: #0d9488; }
.p9-qr-stat-lbl {
    font-size: 9px; font-weight: 700; color: #94a3b8;
    text-transform: uppercase; letter-spacing: .5px; margin-top: 4px;
}

/* ── Mini chart ─────────────────────────────────────────────────── */
.p9-qr-chart-wrap { padding: 8px 14px 14px; }

/* ── 30-day trend card ──────────────────────────────────────────── */
.p9-qr-trend {
    background: var(--p9-surface, #fff);
    border: 1px solid var(--p9-border, #e2e8f0);
    border-radius: 16px; overflow: hidden;
    box-shadow: 0 4px 16px rgba(0,0,0,.05);
}
.p9-qr-trend-head {
    display: flex; align-items: center; justify-content: space-between;
    flex-wrap: wrap; gap: 10px;
    padding: 16px 20px; border-bottom: 1px solid var(--p9-border, #f1f5f9);
}
.p9-qr-trend-head-left { display: flex; align-items: center; gap: 12px; }
.p9-qr-trend-icon {
    width: 38px; height: 38px; border-radius: 10px;
    background: linear-gradient(135deg, #e0e7ff, #c7d2fe);
    display: flex; align-items: center; justify-content: center; font-size: 18px;
}
.p9-qr-trend-title { font-size: 14px; font-weight: 700; color: var(--p9-text, #0f172a); }
.p9-qr-trend-sub   { font-size: 11px; color: var(--p9-text-muted, #94a3b8); margin-top: 2px; }
.p9-qr-legend      { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.p9-qr-legend-item { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--p9-text-muted, #64748b); }
.p9-qr-legend-dot  { width: 9px; height: 9px; border-radius: 50%; }
.p9-qr-trend-body  { padding: 16px 20px 20px; }

/* ── Dark mode overrides ────────────────────────────────────────── */
[data-theme="dark"] .p9-qr-card,
.p9-dark .p9-qr-card {
    background: #1e293b;
    border-color: rgba(255,255,255,.08);
}
[data-theme="dark"] .p9-qr-kpi,
.p9-dark .p9-qr-kpi {
    background: #273348; border-color: rgba(255,255,255,.08);
}
[data-theme="dark"] .p9-qr-kpi-val,
.p9-dark .p9-qr-kpi-val { color: #f1f5f9; }
[data-theme="dark"] .p9-qr-panel,
.p9-dark .p9-qr-panel { background: #1e293b; border-color: rgba(255,255,255,.08); }
[data-theme="dark"] .p9-qr-stat,
.p9-dark .p9-qr-stat { background: #273348; border-color: rgba(255,255,255,.07); }
[data-theme="dark"] .p9-qr-trend,
.p9-dark .p9-qr-trend { background: #1e293b; border-color: rgba(255,255,255,.08); }
[data-theme="dark"] .p9-qr-trend-head,
.p9-dark .p9-qr-trend-head { border-bottom-color: rgba(255,255,255,.07); }
[data-theme="dark"] .p9-qr-trend-title,
.p9-dark .p9-qr-trend-title { color: #f1f5f9; }
[data-theme="dark"] .p9-qr-notice,
.p9-dark .p9-qr-notice { background: #2d2710; border-color: #78350f; color: #fcd34d; }
[data-theme="dark"] .p9-qr-blue   { background: rgba(219,234,254,.12); }
[data-theme="dark"] .p9-qr-green  { background: rgba(220,252,231,.10); }
[data-theme="dark"] .p9-qr-amber  { background: rgba(254,243,199,.10); }
[data-theme="dark"] .p9-qr-violet { background: rgba(237,233,254,.10); }
[data-theme="dark"] .p9-qr-trend-icon,
.p9-dark .p9-qr-trend-icon { background: linear-gradient(135deg, rgba(224,231,255,.15), rgba(199,210,254,.1)); }

/* ── Responsive ─────────────────────────────────────────────────── */
@media (max-width: 860px) {
    .p9-qr-kpis  { grid-template-columns: repeat(2, 1fr); }
    .p9-qr-panels { grid-template-columns: 1fr; }
}
@media (max-width: 520px) {
    .p9-qr-card   { height: 92vh; border-radius: 12px; }
    .p9-qr-kpis   { grid-template-columns: repeat(2, 1fr); gap: 8px; }
    .p9-qr-kpi    { padding: 12px; }
    .p9-qr-kpi-val { font-size: 17px; }
    .p9-qr-header { padding: 14px 14px 12px; border-radius: 12px 12px 0 0; }
    .p9-qr-title  { font-size: 16px; }
    .p9-qr-subtitle { font-size: 11px; }
    .p9-qr-content { padding: 10px 10px 14px; }
    .p9-qr-live-badge { display: none; }
    #p9-qr-modal  { padding: 10px 8px; }
}


/* ═══════════════════════════════════════════════════════════════════
   FIX A: Basket items — prevent horizontal overflow
   The 1fr grid cell needs min-width:0 so text-overflow ellipsis works
═══════════════════════════════════════════════════════════════════ */
.p9-bi-info {
    min-width: 0;
    overflow: hidden;
    flex: 1;
}
.p9-bi-name,
.p9-bi-sku,
.p9-bi-price {
    min-width: 0;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    display: block;
}
#p9-basket-items { min-width: 0; overflow: hidden; width: 100%; }
.p9-bitem        { min-width: 0; }


/* ═══════════════════════════════════════════════════════════════════
   FIX B: Payment Method Cards — Desktop + Tablet Redesign
   Applies at min-width 601px (tablet and up).
   Mobile (max-width 600px) styles are unchanged.
═══════════════════════════════════════════════════════════════════ */
@media (min-width: 601px) {

    /* 2-column card grid */
    .p9-pay-methods {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        gap: 7px !important;
    }

    /* Card base: column-stacked, centred icon + text */
    .p9-pay-method {
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        text-align: center !important;
        padding: 14px 10px 13px !important;
        gap: 7px !important;
        min-height: 86px !important;
        border-radius: 16px !important;
        border-width: 1.5px !important;
        transition: background .2s, border-color .2s, box-shadow .2s, transform .18s !important;
        overflow: hidden !important;
    }

    /* Hover lift — inactive cards only */
    .p9-pay-method:not(.active):hover {
        border-color: var(--p9-grad-start, #1e90ff) !important;
        transform: translateY(-2px) !important;
        box-shadow: 0 5px 16px rgba(30,144,255,.13) !important;
    }

    /* Active: Electronic Payment — brand gradient */
    .p9-pay-method.active,
    .p9-pay-method.p9-ep.active {
        background: linear-gradient(145deg, #1e90ff 0%, #0b1e4a 100%) !important;
        border-color: transparent !important;
        box-shadow: 0 6px 22px rgba(30,144,255,.38) !important;
        transform: translateY(-1px) !important;
    }

    .p9-pay-method.active .p9-pm-title,
    .p9-pay-method.p9-ep.active .p9-pm-title {
        color: #fff !important;
    }
    .p9-pay-method.active .p9-pm-desc,
    .p9-pay-method.p9-ep.active .p9-pm-desc {
        color: rgba(255,255,255,.72) !important;
        opacity: 1 !important;
    }
    .p9-pay-method.active .p9-pm-icon-ep,
    .p9-pay-method.p9-ep.active .p9-pm-icon-ep {
        background: rgba(255,255,255,.18) !important;
        border-color: rgba(255,255,255,.28) !important;
        color: #fff !important;
    }

    /* Active: COD — green gradient */
    .p9-pay-method.p9-pm-cod.active {
        background: linear-gradient(145deg, #22c55e 0%, #14532d 100%) !important;
        border-color: transparent !important;
        box-shadow: 0 6px 22px rgba(22,163,74,.38) !important;
    }
    .p9-pay-method.p9-pm-cod.active .p9-pm-title {
        color: #fff !important;
    }
    .p9-pay-method.p9-pm-cod.active .p9-pm-desc {
        color: rgba(255,255,255,.72) !important;
        opacity: 1 !important;
    }
    .p9-pay-method.p9-pm-cod.active .p9-pm-icon-cash {
        background: rgba(255,255,255,.18) !important;
        border-color: rgba(255,255,255,.28) !important;
        color: #fff !important;
    }
    .p9-pay-method.p9-pm-cod.active .p9-pm-badge-cash {
        background: rgba(255,255,255,.22) !important;
        color: #fff !important;
        border-color: rgba(255,255,255,.3) !important;
    }

    /* Hide radio button — card selection is shown via gradient */
    .p9-pm-radio { display: none !important; }

    /* Icon circle: slightly larger, centred */
    .p9-pm-icon-wrap {
        width: 38px !important;
        height: 38px !important;
        border-radius: 11px !important;
        flex-shrink: 0 !important;
        margin: 0 auto !important;
    }

    /* Text block: full width, centred */
    .p9-pm-body {
        flex: none !important;
        min-width: 0 !important;
        width: 100% !important;
        text-align: center !important;
    }
    .p9-pm-title {
        font-size: 11.5px !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        display: block !important;
    }
    .p9-pm-desc {
        font-size: 9.5px !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        display: block !important;
        margin-top: 2px !important;
    }

    /* CASH badge: float to top-right corner */
    .p9-pm-badge {
        position: absolute !important;
        top: 6px !important;
        right: 8px !important;
        font-size: 7.5px !important;
        padding: 1px 5px !important;
    }

    /* VISA chip: anchor to bottom-right */
    .p9-pay-method .p9-ci-visa {
        position: absolute !important;
        bottom: 8px !important;
        right: 8px !important;
        top: auto !important;
        left: auto !important;
    }
    .p9-pay-method.active .p9-ci-visa {
        background: rgba(255,255,255,.22) !important;
        color: #fff !important;
        border-color: rgba(255,255,255,.2) !important;
    }

    /* Dark mode overrides */
    body.gradia-pos-dark .p9-pay-method:not(.active) {
        background: linear-gradient(135deg, color-mix(in srgb, var(--p9-grad-start,#1e90ff) 40%, #0a0a0a) 0%, #0a0a0a 100%) !important;
    }
    body.gradia-pos-dark .p9-pay-method.p9-ep.active,
    body.gradia-pos-dark .p9-pay-method.active {
        background: linear-gradient(135deg, color-mix(in srgb, var(--p9-grad-start,#1e90ff) 65%, #000) 0%, #111 100%) !important;
        box-shadow: 0 0 0 1px var(--p9-grad-start,#1e90ff), 0 6px 22px color-mix(in srgb, var(--p9-grad-start,#1e90ff) 40%, transparent) !important;
    }
    body.gradia-pos-dark .p9-pay-method.p9-pm-cod.active {
        background: linear-gradient(145deg, #22c55e 0%, #052010 100%) !important;
    }
}


/* ═══════════════════════════════════════════════════════════════════
   FIX C: Basket item — product title wraps, cost font smaller
═══════════════════════════════════════════════════════════════════ */
.p9-bi-name {
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: unset !important;
    font-size: 10.5px !important;
    line-height: 1.35 !important;
    word-break: break-word !important;
}
.p9-bi-price {
    font-size: 9px !important;
}
.p9-bi-line {
    font-size: 11px !important;
}
/* Ensure the info column can shrink properly to allow wrapping */
.p9-bi-info {
    min-width: 0 !important;
    overflow: visible !important;
    flex: 1 !important;
    padding-right: 2px;
}
.p9-bitem {
    align-items: flex-start !important;
}
.p9-bi-img {
    margin-top: 3px;
}
.p9-bi-right {
    align-items: flex-end !important;
    margin-top: 3px;
}


/* ═══════════════════════════════════════════════════════════════════
   FIX D: Universal multi-card chips on Electronic Payment card
═══════════════════════════════════════════════════════════════════ */
.p9-pm-multi-cards {
    display: flex;
    gap: 2px;
    align-items: center;
    flex-shrink: 0;
}
.p9-pmc-chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 7.5px;
    font-weight: 900;
    letter-spacing: .3px;
    border-radius: 3px;
    width: 17px;
    height: 12px;
    border: 1px solid transparent;
}
.p9-pmc-chip-v    { background: #1434CB; color: #fff; }
.p9-pmc-chip-m    { background: #EB001B; color: #fff; border-color: #ff4d1e; }
.p9-pmc-chip-a    { background: #2E77BC; color: #fff; }
.p9-pmc-chip-more {
    background: var(--p9-bg, #f1f5f9);
    color: var(--p9-muted, #64748b);
    border-color: var(--p9-border, rgba(0,0,0,.12));
    font-size: 9px;
    width: 14px;
}

/* Active state — chips go white on gradient background */
.p9-pay-method.p9-ep.active .p9-pmc-chip-v,
.p9-pay-method.p9-ep.active .p9-pmc-chip-m,
.p9-pay-method.p9-ep.active .p9-pmc-chip-a {
    background: rgba(255,255,255,.25) !important;
    border-color: rgba(255,255,255,.2) !important;
}
.p9-pay-method.p9-ep.active .p9-pmc-chip-more {
    background: rgba(255,255,255,.18) !important;
    color: #fff !important;
    border-color: rgba(255,255,255,.2) !important;
}

/* On desktop 2-col grid, chips go to bottom-right corner */
@media (min-width: 601px) {
    .p9-pm-multi-cards {
        position: absolute !important;
        bottom: 7px !important;
        right: 7px !important;
        gap: 2px !important;
    }
}

/* Dark mode */
body.gradia-pos-dark .p9-pmc-chip-more {
    background: rgba(255,255,255,.08);
    color: rgba(255,255,255,.55);
    border-color: rgba(255,255,255,.12);
}

/* Mobile: hide chips to keep cards compact */
@media (max-width: 600px) {
    .p9-pm-multi-cards { display: none; }
}


/* ═══════════════════════════════════════════════════════════════════
   COD CONFIRMATION MODAL
   Completely separate from the EP payment modal.
═══════════════════════════════════════════════════════════════════ */

/* ── Card shell ─────────────────────────────────────────────────── */
.p9-cod-card {
    background: var(--p9-panel, #fff);
    border-radius: 24px;
    width: 100%;
    max-width: 360px;
    overflow: hidden;
    box-shadow: 0 28px 70px rgba(0,0,0,.35);
    animation: p9-cod-pop .22s cubic-bezier(.34,1.56,.64,1);
}

@keyframes p9-cod-pop {
    from { opacity:0; transform:scale(.88) translateY(10px); }
    to   { opacity:1; transform:scale(1)   translateY(0); }
}

/* ── Gradient header ────────────────────────────────────────────── */
.p9-cod-header {
    background: linear-gradient(140deg, #22c55e 0%, #064e20 100%);
    padding: 22px 20px 18px;
    display: flex;
    align-items: center;
    gap: 12px;
    position: relative;
    transition: background .4s ease;
}

.p9-cod-header.p9-cod-header-success {
    background: linear-gradient(140deg, #16a34a 0%, #041f10 100%);
}

.p9-cod-header-icon {
    width: 44px;
    height: 44px;
    flex-shrink: 0;
    filter: drop-shadow(0 2px 8px rgba(0,0,0,.25));
    transition: transform .3s ease;
}

.p9-cod-header-success .p9-cod-header-icon {
    animation: p9-cod-tick-pop .35s cubic-bezier(.34,1.56,.64,1);
}

@keyframes p9-cod-tick-pop {
    from { transform: scale(0.6); opacity:0; }
    to   { transform: scale(1);   opacity:1; }
}

.p9-cod-header-label {
    font-size: 17px;
    font-weight: 800;
    color: #fff;
    letter-spacing: -.3px;
    flex: 1;
}

.p9-cod-close {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: none;
    background: rgba(255,255,255,.18);
    color: #fff;
    font-size: 16px;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background .15s;
    flex-shrink: 0;
}
.p9-cod-close:hover { background: rgba(255,255,255,.32); }

/* ── 3-cell summary bar ─────────────────────────────────────────── */
.p9-cod-summary {
    display: flex;
    align-items: stretch;
    padding: 0;
    border-bottom: 1px solid var(--p9-border, rgba(0,0,0,.07));
}

.p9-cod-sum-cell {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 16px 10px 14px;
    text-align: center;
}

.p9-cod-sum-divider {
    width: 1px;
    background: var(--p9-border, rgba(0,0,0,.07));
    align-self: stretch;
    margin: 10px 0;
}

.p9-cod-sum-lbl {
    font-size: 9.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .6px;
    color: var(--p9-muted, #94a3b8);
    margin-bottom: 4px;
}

.p9-cod-sum-val {
    font-size: 15px;
    font-weight: 800;
    color: var(--p9-text, #1e293b);
    line-height: 1;
}

.p9-cod-total-val  { color: var(--p9-grad-start, #1e90ff); }
.p9-cod-change-val { color: var(--p9-muted, #94a3b8); }
.p9-cod-change-positive { color: #16a34a !important; }

/* ── Status / feedback strip ────────────────────────────────────── */
.p9-cod-status-area {
    padding: 10px 18px 0;
}

.p9-cod-status-msg {
    padding: 9px 14px;
    border-radius: 10px;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.4;
    text-align: center;
}

.p9-cod-status-info  { background: #eff6ff; color: #1e40af; }
.p9-cod-status-error { background: #fef2f2; border: 1px solid #fca5a5; color: #b91c1c; }

/* ── Action buttons ─────────────────────────────────────────────── */
.p9-cod-actions {
    display: flex;
    gap: 8px;
    padding: 14px 18px 18px;
}

.p9-cod-btn {
    flex: 1;
    padding: 13px 8px;
    border-radius: 12px;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    border: none;
    font-family: inherit;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    transition: opacity .15s, transform .15s;
}

.p9-cod-btn:disabled {
    opacity: .45;
    cursor: not-allowed;
    transform: none !important;
}

.p9-cod-btn-cancel {
    background: var(--p9-bg, #f1f5f9);
    color: var(--p9-muted, #64748b);
    flex: 0 0 auto;
    padding: 13px 18px;
}
.p9-cod-btn-cancel:hover:not(:disabled) { background: #e2e8f0; }

.p9-cod-btn-confirm {
    background: linear-gradient(135deg, #22c55e 0%, #064e20 100%);
    color: #fff;
    box-shadow: 0 4px 16px rgba(22,163,74,.32);
}
.p9-cod-btn-confirm:hover:not(:disabled) {
    opacity: .9;
    transform: translateY(-1px);
    box-shadow: 0 6px 20px rgba(22,163,74,.4);
}

/* ── Dark mode ──────────────────────────────────────────────────── */
body.gradia-pos-dark .p9-cod-card {
    background: #0d1526;
}
body.gradia-pos-dark .p9-cod-sum-lbl {
    color: rgba(255,255,255,.45);
}
body.gradia-pos-dark .p9-cod-sum-val {
    color: #e2e8f0;
}
body.gradia-pos-dark .p9-cod-btn-cancel {
    background: rgba(255,255,255,.07);
    color: rgba(255,255,255,.6);
}
body.gradia-pos-dark .p9-cod-btn-cancel:hover:not(:disabled) {
    background: rgba(255,255,255,.12);
}
body.gradia-pos-dark .p9-cod-status-info {
    background: rgba(30,144,255,.12);
    color: #93c5fd;
}
body.gradia-pos-dark .p9-cod-status-error {
    background: rgba(239,68,68,.1);
    border-color: rgba(239,68,68,.3);
    color: #fca5a5;
}
body.gradia-pos-dark .p9-cod-sum-divider {
    background: rgba(255,255,255,.07);
}
body.gradia-pos-dark .p9-cod-summary {
    border-bottom-color: rgba(255,255,255,.07);
}

/* ── Mobile ─────────────────────────────────────────────────────── */
@media (max-width: 480px) {
    .p9-cod-card { max-width: 96vw; border-radius: 20px; }
    .p9-cod-sum-val { font-size: 13px; }
    .p9-cod-btn { font-size: 12px; }
}


/* ═══════════════════════════════════════════════════════════════════
   BASKET ITEM — title-on-top layout
   .p9-bitem is now a flex column: title row, then image+info+ctrl+right row
═══════════════════════════════════════════════════════════════════ */
.p9-bitem {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 4px !important;
}

/* Full-width title spanning above the image row */
.p9-bi-title {
    font-size: 10.5px;
    font-weight: 700;
    color: var(--p9-text, #1e293b);
    line-height: 1.35;
    word-break: break-word;
    white-space: normal;
    overflow: visible;
    padding: 0 2px;
}

/* Inner row: image + info + qty controls + total/del */
.p9-bi-row {
    display: grid;
    grid-template-columns: 36px 1fr auto auto;
    align-items: center;
    gap: 7px;
    min-width: 0;
}

/* Shrink image slightly since title is now separate */
.p9-bi-row .p9-bi-img {
    width: 36px !important;
    height: 36px !important;
    margin-top: 0 !important;
}

/* Info col: sku + price each — no title needed here now */
.p9-bi-row .p9-bi-info {
    min-width: 0;
    overflow: hidden;
    flex: 1;
    padding-right: 2px;
}

.p9-bi-row .p9-bi-info .p9-bi-name {
    display: none !important; /* title is now in p9-bi-title above */
}

/* Dark mode */
body.gradia-pos-dark .p9-bi-title {
    color: #e2e8f0;
}


/* ════════════════════════════════════════════════════════════════════
   CART ITEM 3-ROW REDESIGN
   ════════════════════════════════════════════════════════════════════ */

.p9-bitem {
    display: flex;
    flex-direction: column;
    border: 1px solid var(--p9-border,rgba(0,0,0,.07));
    border-radius: 12px;
    margin-bottom: 5px;
    background: var(--p9-panel,#fff);
    box-shadow: 0 1px 3px rgba(0,0,0,.04);
    overflow: hidden;
    transition: box-shadow .15s;
}
.p9-bitem:hover { box-shadow: 0 2px 8px rgba(0,0,0,.09); }

/* Row 1: thumbnail + name + unit price */
.p9-bi-row1 {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 8px 10px;
    min-width: 0;
}
.p9-bi-img {
    width: 38px; height: 38px;
    border-radius: 8px; object-fit: cover;
    border: 1px solid var(--p9-border,rgba(0,0,0,.06));
    flex-shrink: 0;
}
.p9-bi-r1info { flex: 1; min-width: 0; }
.p9-bi-name {
    font-size: 12px; font-weight: 700;
    color: var(--p9-text,#1e293b);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.p9-bi-sku  { font-size: 10px; color: var(--p9-muted,#94a3b8); margin-bottom: 1px; }
.p9-bi-unit-price {
    font-size: 13px; font-weight: 700;
    color: var(--p9-text,#1e293b);
    white-space: nowrap; flex-shrink: 0;
}

/* Row 2: controls strip — uses theme accent or brownish-grey fallback */
.p9-bi-row2 {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 5px 8px;
    background: var(--p9-row-accent,#5c3d2e);
    flex-shrink: 0;
}
.p9-bi-qty-group { display: flex; align-items: center; }
.p9-bi-row2 .p9-qty-btn {
    width: 28px; height: 28px;
    background: rgba(255,255,255,.12);
    border: 1px solid rgba(255,255,255,.28);
    color: #fff; transform: none;
}
.p9-bi-row2 .p9-qty-btn:hover {
    background: rgba(255,255,255,.24);
    border-color: rgba(255,255,255,.5);
    color: #fff; transform: none;
}
.p9-bi-row2 .p9-qty-m { border-radius: 6px 0 0 6px; }
.p9-bi-row2 .p9-qty-p { border-radius: 0 6px 6px 0; }
.p9-bi-row2 .p9-qty-n {
    min-width: 28px; height: 28px;
    background: rgba(255,255,255,.08);
    border-top: 1px solid rgba(255,255,255,.2);
    border-bottom: 1px solid rgba(255,255,255,.2);
    color: #fff; font-size: 13px; font-weight: 700;
    display: flex; align-items: center; justify-content: center;
}
.p9-bi-row2-actions { display: flex; align-items: center; gap: 5px; }
.p9-bi-row2 .p9x-line-disc-toggle,
.p9-bi-row2 .p9x-line-note-btn {
    width: 28px; height: 28px;
    border: 1px solid rgba(255,255,255,.28);
    border-radius: 6px;
    background: rgba(255,255,255,.12);
    color: #fff; font-size: 12px;
    cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    touch-action: manipulation;
}
.p9-bi-row2 .p9x-line-disc-toggle.p9x-active,
.p9-bi-row2 .p9x-line-note-btn.p9x-active {
    background: rgba(255,255,255,.30);
    border-color: rgba(255,255,255,.6);
}
.p9-bi-row2 .p9-bi-del {
    width: 28px; height: 28px;
    border: 1px solid rgba(239,68,68,.45);
    border-radius: 6px;
    background: rgba(239,68,68,.14);
    color: #fca5a5; font-size: 11px; font-weight: 700;
    cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    touch-action: manipulation;
}
.p9-bi-row2 .p9-bi-del:hover { background: rgba(239,68,68,.28); }

/* Row 3: qty/discount summary + line total */
.p9-bi-row3 {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 5px 10px;
    background: var(--p9-bg,#f8fafc);
    border-top: 1px solid var(--p9-border,rgba(0,0,0,.05));
    min-width: 0;
}
.p9-bi-r3-summary {
    font-size: 11px;
    color: var(--p9-muted,#94a3b8);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    flex: 1; min-width: 0; margin-right: 8px;
}
.p9-bi-r3-disc { color: #22c55e; font-weight: 700; }
.p9x-bi-line-wrap { display: flex; align-items: center; gap: 5px; flex-shrink: 0; }
.p9x-bi-line-orig {
    font-size: 10px; color: var(--p9-muted,#94a3b8);
    text-decoration: line-through;
}
.p9-bi-line { font-size: 12px; font-weight: 800; color: var(--p9-text,#1e293b); white-space: nowrap; }

/* Dark mode overrides for 3-row items */
body.gradia-pos-dark .p9-bi-row3 { background: rgba(255,255,255,.03); }
body.gradia-pos-dark .p9-bi-row2 .p9-qty-n { border-color: rgba(255,255,255,.15); }

/* ════════════════════════════════════════════════════════════════════
   iOS DOUBLE-TAP ZOOM PREVENTION — touch-action on all tap targets
   ════════════════════════════════════════════════════════════════════ */

.p9-nk,
.p9-pin-key,
.p9-qty-btn,
.p9-bi-row2 button {
    touch-action: manipulation;
}

/* ════════════════════════════════════════════════════════════════════
   FULLSCREEN — iOS CSS fallback overlay
   ════════════════════════════════════════════════════════════════════ */

.p9-ios-fullscreen {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    z-index: 999999 !important;
    border-radius: 0 !important;
    overflow-y: auto !important;
}

/* ════════════════════════════════════════════════════════════════════
   LAYOUT REFINEMENT — wider basket column, smaller products panel,
   compact discount form. Applies desktop + tablet. Mobile untouched.
   ════════════════════════════════════════════════════════════════════ */

/* Desktop (>900px): right panel 500→540px, basket sub-col 55%  */
.p9-pos-layout {
    grid-template-columns: 1fr 540px;
}
.p9-pos-right {
    grid-template-columns: 55% 45%;
}

/* Large screens — scale right panel up proportionally */
@media (min-width: 1400px) {
    .p9-pos-layout { grid-template-columns: 1fr 460px; }
}
@media (min-width: 1800px) {
    .p9-pos-layout { grid-template-columns: 1fr 500px; }
}

/* Tablet (601–900px): wider right panel 340→370px.
   .p9-pos-right stays flex-column on tablet so basket uses full width. */
@media (max-width: 900px) and (min-width: 601px) {
    .p9-pos-layout {
        grid-template-columns: 1fr 370px !important;
    }
}

/* ── Compact inline discount form ─────────────────────────────── */
/* Allow wrapping on very narrow basket columns (tablet edge cases) */
.p9x-line-disc-wrap {
    flex-wrap: wrap !important;
    gap: 5px !important;
}
.p9x-line-disc-input {
    width: 65px !important;
}
.p9x-line-disc-apply {
    padding: 6px 8px !important;
}

/* ── Products panel — slightly smaller search font ────────────── */
.p9-srch-input {
    font-size: 12px;
}

/* ── Basket padding tightened slightly ────────────────────────── */
.p9-right-basket-col .p9-basket {
    padding: 6px;
}

/* ════════════════════════════════════════════════════════════════════
   GLOBAL OVERLAY FIX — always use position:absolute for overlays.
   All overlay elements live inside #p9-pos-wrap which is always
   position:fixed (cashier mode) or fills the viewport in fullscreen.
   position:absolute relative to that container = identical visual
   coverage, without the Chrome position:fixed-inside-overflow:hidden
   clipping quirk that hides overlays in native fullscreen.
   ════════════════════════════════════════════════════════════════════ */

/* Fix: large modals inside pos-wrap must use position:absolute to avoid
   Chrome's position:fixed-inside-overflow:hidden clipping in fullscreen.
   .p9-product-modal-overlay is intentionally excluded — its backdrop-filter
   requires position:fixed to render correctly. */
.p9-drawer-modal-overlay,
.p9-overlay,
.p9-var-overlay,
.p9-pin-overlay,
.p9-logout-progress-overlay,
.p9x-overlay,
#p9-qr-modal,
#p9-sku-scan-overlay {
    position: absolute !important;
}

/* ════════════════════════════════════════════════════════════════════
   CASH TENDERED DISPLAY — prevent overflow on narrow columns
   ════════════════════════════════════════════════════════════════════ */

.p9-calc-val {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    text-align: right;
    flex-shrink: 1;
}

/* ════════════════════════════════════════════════════════════════════
   MOBILE — hide fullscreen button from topbar, show in 3-dot menu
   ════════════════════════════════════════════════════════════════════ */

@media (max-width: 600px) {
    #p9-fullscreen-btn { display: none !important; }
    .p9-td-item[data-action="fullscreen"] { display: flex !important; }
}
@media (min-width: 601px) {
    .p9-td-item[data-action="fullscreen"] { display: none !important; }
}

/* ════════════════════════════════════════════════════════════════════
   CUSTOM MULTI-SELECT — Categories & Tags in product form
   ════════════════════════════════════════════════════════════════════ */

.p9-ms {
    position: relative;
}

.p9-ms-trigger {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 8px;
    min-height: 44px;
    padding: 8px 16px;
    border: 1.5px solid var(--p9-border, rgba(0,0,0,.12));
    border-radius: 999px;
    background: var(--p9-bg, #f8fafc);
    cursor: pointer;
    transition: border-color .15s, box-shadow .15s;
    user-select: none;
}
.p9-ms-trigger:hover  { border-color: var(--p9-grad-start, #1e90ff); }
.p9-ms.p9-ms-open .p9-ms-trigger {
    border-color: var(--p9-grad-start, #1e90ff);
    box-shadow: 0 0 0 3px rgba(30,144,255,.12);
}

.p9-ms-display {
    flex: 1;
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    align-items: center;
    min-height: 22px;
}

.p9-ms-placeholder {
    font-size: 12px;
    color: var(--p9-muted, #94a3b8);
}

.p9-ms-pill {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px;
    border-radius: 999px;
    background: var(--p9-grad-start, #1e90ff);
    color: #fff;
    font-size: 11px;
    font-weight: 600;
    line-height: 1.5;
    max-width: 140px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.p9-ms-pill-x {
    flex-shrink: 0;
    cursor: pointer;
    font-size: 13px;
    line-height: 1;
    opacity: .75;
    transition: opacity .15s;
}
.p9-ms-pill-x:hover { opacity: 1; }

.p9-ms-chevron {
    flex-shrink: 0;
    margin-top: 3px;
    color: var(--p9-muted, #94a3b8);
    transition: transform .2s;
}
.p9-ms.p9-ms-open .p9-ms-chevron { transform: rotate(180deg); }

.p9-ms-dropdown {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    z-index: 12000;
    background: var(--p9-panel, #fff);
    border: 1.5px solid var(--p9-border, rgba(0,0,0,.12));
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 8px 28px rgba(0,0,0,.14);
}

.p9-ms-filter {
    width: 100%;
    padding: 9px 14px;
    border: none;
    border-bottom: 1px solid var(--p9-border, rgba(0,0,0,.08));
    font-size: 12px;
    background: var(--p9-bg, #f8fafc);
    color: var(--p9-text, #1e293b);
    outline: none;
    box-sizing: border-box;
}

.p9-ms-items {
    max-height: 200px;
    overflow-y: auto;
    overscroll-behavior: contain;
}

.p9-ms-item {
    padding: 9px 14px;
    font-size: 12px;
    color: var(--p9-text, #1e293b);
    cursor: pointer;
    transition: background .1s;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}
.p9-ms-item:hover { background: var(--p9-bg, #f8fafc); }
.p9-ms-item.p9-ms-sel {
    background: rgba(30,144,255,.10);
    color: var(--p9-grad-start, #1e90ff);
    font-weight: 600;
}
.p9-ms-item.p9-ms-sel::after {
    content: '✓';
    font-size: 12px;
    color: var(--p9-grad-start, #1e90ff);
    flex-shrink: 0;
}
.p9-ms-item.p9-ms-hidden { display: none; }
.p9-ms-empty { padding: 10px 14px; font-size: 12px; color: var(--p9-muted, #94a3b8); }

/* Dark mode */
body.gradia-pos-dark .p9-ms-trigger {
    background: rgba(255,255,255,.06);
    border-color: rgba(255,255,255,.12);
}
body.gradia-pos-dark .p9-ms-dropdown {
    background: #1a1f2e;
    border-color: rgba(255,255,255,.12);
}
body.gradia-pos-dark .p9-ms-filter {
    background: rgba(255,255,255,.05);
    color: #e2e8f0;
    border-bottom-color: rgba(255,255,255,.08);
}
body.gradia-pos-dark .p9-ms-item { color: #e2e8f0; }
body.gradia-pos-dark .p9-ms-item:hover { background: rgba(255,255,255,.05); }
body.gradia-pos-dark .p9-ms-item.p9-ms-sel { background: rgba(30,144,255,.18); }

/* ══════════════════════════════════════════════════════════════════
   Custom Staff Roles — Roles tab (User Management ▸ Roles)
   Checkboxes are rendered as chip toggles rather than native inputs,
   since #p9-pos-wrap strips native input appearance globally and a
   bare native checkbox would render invisible inside this wrap.
   ══════════════════════════════════════════════════════════════════ */
.p9-cap-picker {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 8px;
}
.p9-cap-chip {
    position: relative;
    display: inline-flex;
    cursor: pointer;
}
.p9-cap-chip input[type="checkbox"] {
    position: absolute;
    inset: 0;
    opacity: 0;
    margin: 0;
    cursor: pointer;
}
.p9-cap-chip span {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    border-radius: 999px !important;
    border: 1.5px solid var(--p9-border, rgba(0,0,0,.12)) !important;
    background: #fff !important;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--p9-muted, #64748b);
    transition: background .15s, border-color .15s, color .15s, transform .1s;
    user-select: none;
}
.p9-cap-chip input:checked + span {
    background: #fee2e2 !important;
    border-color: #dc2626 !important;
    color: #b91c1c;
}
.p9-cap-chip:active span { transform: scale(.97); }
.p9-cap-chip input:focus-visible + span {
    outline: 2px solid #dc2626;
    outline-offset: 2px;
}

.p9-cap-chip-static {
    display: inline-flex;
    align-items: center;
    padding: 3px 10px;
    border-radius: 999px !important;
    background: #f1f5f9 !important;
    border: none !important;
    color: #475569;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: .01em;
}
.p9-cap-chip-static--muted {
    background: transparent !important;
    color: var(--p9-muted, #94a3b8);
    font-weight: 500;
    padding-left: 0;
}

.p9-role-card-grid {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.p9-acct-role-row {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 14px;
    border: 1.5px solid var(--p9-border, rgba(0,0,0,.08)) !important;
    border-radius: 16px !important;
    background: #fff !important;
    transition: border-color .15s, box-shadow .15s;
}
.p9-acct-role-row:hover {
    border-color: rgba(220,38,38,.35) !important;
    box-shadow: 0 2px 10px rgba(0,0,0,.05);
}
.p9-role-badge {
    flex-shrink: 0;
    width: 38px;
    height: 38px;
    border-radius: 12px !important;
    border: none !important;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    font-size: 15px;
}
.p9-role-info { flex: 1; min-width: 0; }
.p9-role-name {
    font-weight: 700;
    font-size: 13.5px;
    margin-bottom: 6px;
}
.p9-role-caps {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    margin-bottom: 6px;
}
.p9-role-count {
    font-size: 11px;
    color: var(--p9-muted, #94a3b8);
    font-weight: 600;
}
.p9-acct-role-delete-btn {
    flex-shrink: 0;
    font-size: 12px !important;
    padding: 6px 14px !important;
    line-height: 1.6 !important;
    border-radius: 999px !important;
    font-weight: 700 !important;
    color: #dc2626 !important;
    background: #fee2e2 !important;
    border: none !important;
    cursor: pointer;
    transition: background .15s;
    -webkit-appearance: none !important;
    appearance: none !important;
    box-sizing: border-box !important;
}
.p9-acct-role-delete-btn:hover { background: #fecaca !important; }

.p9-role-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 10px;
    padding: 36px 20px;
    color: var(--p9-muted, #94a3b8);
}
.p9-role-empty p {
    margin: 0;
    font-size: 13px;
    line-height: 1.5;
}