/* _content/MiniMartBlazorPOS/Components/Layout/MainLayout.razor.rz.scp.css */
/* ── Chat notification bell button ────────────────────────────────────────── */
.lyt-bell-btn[b-c2wiawx18a] {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    padding: 0;
    border: none;
    border-radius: 8px;
    background: transparent;
    color: var(--bar-sub);
    cursor: pointer;
    transition: background .15s, color .15s;
}

.lyt-bell-btn:hover[b-c2wiawx18a] {
    background: var(--sb-hover-bg);
    color: var(--bar-text);
}

.lyt-bell-badge[b-c2wiawx18a] {
    position: absolute;
    top: 2px;
    right: 2px;
    min-width: 17px;
    height: 17px;
    border-radius: 999px;
    background: #ef4444;
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 4px;
    line-height: 1;
    pointer-events: none;
    animation: lyt-badge-pop-b-c2wiawx18a .2s cubic-bezier(.36,.07,.19,.97);
}

@keyframes lyt-badge-pop-b-c2wiawx18a {
    0%   { transform: scale(0); }
    70%  { transform: scale(1.2); }
    100% { transform: scale(1); }
}

/* ── Notification dropdown ─────────────────────────────────────────────────── */
.lyt-notif-dropdown[b-c2wiawx18a] {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    width: 320px;
    max-height: 420px;
    background: var(--bar-bg);
    border: 1px solid var(--bar-border);
    border-radius: 18px;
    box-shadow: 0 16px 40px rgba(0,0,0,.22), 0 4px 12px rgba(0,0,0,.12);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    animation: lyt-dd-in-b-c2wiawx18a .15s ease-out;
}

@keyframes lyt-dd-in-b-c2wiawx18a {
    from { opacity: 0; transform: translateY(-6px) scale(.98); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}

.lyt-notif-header[b-c2wiawx18a] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 16px 10px;
    border-bottom: 1px solid var(--bar-border);
    flex-shrink: 0;
}

.lyt-notif-title[b-c2wiawx18a] {
    font-size: 14px;
    font-weight: 700;
    color: var(--bar-text);
}

.lyt-notif-count[b-c2wiawx18a] {
    font-size: 11px;
    font-weight: 700;
    background: rgb(var(--b600));
    color: #fff;
    padding: 2px 8px;
    border-radius: 999px;
}

/* Empty state */
.lyt-notif-empty[b-c2wiawx18a] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 32px 16px;
    color: var(--bar-sub);
    font-size: 13px;
}

/* Incoming call row */
.lyt-notif-call-row[b-c2wiawx18a] {
    position: relative;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 14px;
    background: rgba(96,165,250,.08);
    border-bottom: 1px solid var(--bar-border);
    overflow: hidden;
}

.lyt-notif-call-pulse[b-c2wiawx18a] {
    position: absolute;
    inset: 0;
    border: 1px solid rgba(96,165,250,.35);
    animation: lyt-pulse-ring-b-c2wiawx18a 1.8s ease-out infinite;
    pointer-events: none;
}

@keyframes lyt-pulse-ring-b-c2wiawx18a {
    0%   { opacity: .5; transform: scale(1); }
    100% { opacity: 0; transform: scale(1.03); }
}

.lyt-notif-call-icon[b-c2wiawx18a] {
    font-size: 22px;
    color: #60a5fa;
    flex-shrink: 0;
    animation: lyt-ring-b-c2wiawx18a 1.2s ease-in-out infinite;
}

@keyframes lyt-ring-b-c2wiawx18a {
    0%, 100% { transform: rotate(0deg); }
    20%  { transform: rotate(-15deg); }
    40%  { transform: rotate(15deg); }
    60%  { transform: rotate(-10deg); }
    80%  { transform: rotate(10deg); }
}

.lyt-notif-call-text[b-c2wiawx18a] {
    display: flex;
    flex-direction: column;
    gap: 1px;
    flex: 1;
    min-width: 0;
}

.lyt-notif-call-title[b-c2wiawx18a] {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: #60a5fa;
}

.lyt-notif-call-from[b-c2wiawx18a] {
    font-size: 13px;
    font-weight: 500;
    color: var(--bar-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.lyt-notif-call-join[b-c2wiawx18a] {
    display: inline-flex;
    align-items: center;
    padding: 5px 12px;
    border-radius: 8px;
    background: #22c55e;
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    text-decoration: none;
    flex-shrink: 0;
    transition: background .15s;
}

.lyt-notif-call-join:hover[b-c2wiawx18a] { background: #16a34a; }

.lyt-notif-call-dismiss[b-c2wiawx18a] {
    width: 26px;
    height: 26px;
    border-radius: 6px;
    background: transparent;
    border: none;
    color: var(--bar-sub);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: background .15s;
}

.lyt-notif-call-dismiss:hover[b-c2wiawx18a] {
    background: var(--sb-hover-bg);
    color: var(--bar-text);
}

/* Message notification rows */
.lyt-notif-msg-row[b-c2wiawx18a] {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 10px 14px;
    border-bottom: 1px solid var(--bar-border);
    transition: background .12s;
}

.lyt-notif-msg-row:last-of-type[b-c2wiawx18a] {
    border-bottom: none;
}

.lyt-notif-msg-row:hover[b-c2wiawx18a] {
    background: var(--sb-hover-bg);
}

.lyt-notif-avatar[b-c2wiawx18a] {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: rgb(var(--b600));
    color: #fff;
    font-size: 13px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.lyt-notif-msg-body[b-c2wiawx18a] {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.lyt-notif-msg-sender[b-c2wiawx18a] {
    font-size: 12px;
    font-weight: 700;
    color: var(--bar-text);
}

.lyt-notif-msg-text[b-c2wiawx18a] {
    font-size: 12px;
    color: var(--bar-sub);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.lyt-notif-msg-time[b-c2wiawx18a] {
    font-size: 10.5px;
    color: var(--bar-sub);
    flex-shrink: 0;
    white-space: nowrap;
}

/* Footer */
/* Payment notification row */
.lyt-notif-payment-row[b-c2wiawx18a] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    border-bottom: 1px solid var(--bar-border);
    transition: background .12s;
}
.lyt-notif-payment-row:hover[b-c2wiawx18a] {
    background: rgba(245,158,11,.06);
}
.lyt-notif-payment-icon[b-c2wiawx18a] {
    width: 32px;
    height: 32px;
    border-radius: 9px;
    background: rgba(245,158,11,.15);
    color: #f59e0b;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.lyt-notif-footer[b-c2wiawx18a] {
    padding: 10px 14px;
    border-top: 1px solid var(--bar-border);
    display: flex;
    justify-content: center;
    gap: 8px;
    flex-shrink: 0;
}

.lyt-notif-open-chat[b-c2wiawx18a] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    font-weight: 600;
    color: rgb(var(--b600));
    text-decoration: none;
    padding: 6px 16px;
    border-radius: 8px;
    transition: background .15s;
}

.lyt-notif-open-chat:hover[b-c2wiawx18a] {
    background: rgb(var(--b50) / .8);
}

/* ── Incoming call banner (top of screen) ──────────────────────────────────── */
.lyt-call-banner[b-c2wiawx18a] {
    position: fixed;
    top: 16px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 1100;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 18px;
    border-radius: 16px;
    background: #0f172a;
    border: 1px solid rgba(96,165,250,.3);
    box-shadow: 0 8px 32px rgba(0,0,0,.45);
    animation: lyt-banner-in-b-c2wiawx18a .25s cubic-bezier(.34,1.56,.64,1);
    min-width: 340px;
    max-width: 90vw;
}

@keyframes lyt-banner-in-b-c2wiawx18a {
    0%   { opacity: 0; transform: translateX(-50%) translateY(-12px); }
    100% { opacity: 1; transform: translateX(-50%) translateY(0); }
}

.lyt-call-icon[b-c2wiawx18a] {
    font-size: 24px;
    color: #60a5fa;
    flex-shrink: 0;
    animation: lyt-ring-b-c2wiawx18a 1.2s ease-in-out infinite;
}

.lyt-call-text[b-c2wiawx18a] {
    display: flex;
    flex-direction: column;
    gap: 1px;
    flex: 1;
    min-width: 0;
}

.lyt-call-title[b-c2wiawx18a]  { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: #60a5fa; }
.lyt-call-from[b-c2wiawx18a]   { font-size: 14px; font-weight: 500; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.lyt-call-join[b-c2wiawx18a] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 7px 14px;
    border-radius: 10px;
    background: #22c55e;
    color: #fff;
    font-size: 13px;
    font-weight: 700;
    text-decoration: none;
    flex-shrink: 0;
    transition: background .15s;
}

.lyt-call-join:hover[b-c2wiawx18a] { background: #16a34a; }

.lyt-call-dismiss[b-c2wiawx18a] {
    width: 30px;
    height: 30px;
    border-radius: 8px;
    background: rgba(255,255,255,.08);
    border: none;
    color: rgba(255,255,255,.5);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: background .15s, color .15s;
}

.lyt-call-dismiss:hover[b-c2wiawx18a] { background: rgba(255,255,255,.15); color: #fff; }

/* ── Store switcher dropdown ───────────────────────────────────────────────── */
.lyt-store-dropdown[b-c2wiawx18a] {
    position: fixed;
    top: 56px;
    right: 8px;
    width: min(320px, calc(100vw - 16px));
    z-index: 201;
    background: var(--bar-bg);
    border: 1px solid var(--bar-border);
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 16px 40px rgba(0,0,0,.22);
}

/* ── Hamburger (mobile only) ───────────────────────────────────────────────── */
.lyt-hamburger[b-c2wiawx18a] {
    display: none;
    align-items: center;
    justify-content: center;
    gap: 6px;
    height: 34px;
    padding: 0 10px 0 8px;
    border: 1px solid var(--bar-border);
    border-radius: 10px;
    background: var(--sb-hover-bg);
    color: var(--bar-text);
    cursor: pointer;
    flex-shrink: 0;
    transition: background .15s, border-color .15s, color .15s;
}

.lyt-hamburger-label[b-c2wiawx18a] {
    font-size: 13px;
    font-weight: 600;
    white-space: nowrap;
}

.lyt-hamburger:hover[b-c2wiawx18a] {
    background: rgb(var(--b600) / .12);
    border-color: rgb(var(--b500) / .45);
    color: rgb(var(--b500));
}

.lyt-hamburger:active[b-c2wiawx18a] {
    transform: scale(.96);
}

/* ── Mobile responsive layout ──────────────────────────────────────────────── */
@media (max-width: 639px) {

    /* Show hamburger */
    .lyt-hamburger[b-c2wiawx18a] { display: flex; }

    /* Sidebar: fixed overlay, hidden off-screen by default */
    .lyt-sidebar[b-c2wiawx18a] {
        position: fixed !important;
        top: 0;
        left: 0;
        height: 100dvh !important;
        z-index: 500;
        width: 256px !important;
        transform: translateX(-100%);
        transition: transform .25s ease, box-shadow .25s ease;
    }

    /* Sidebar open state */
    .lyt-sidebar.lyt-sidebar-open[b-c2wiawx18a] {
        transform: translateX(0);
        box-shadow: 4px 0 32px rgba(0,0,0,.35);
    }

    /* Mobile backdrop */
    .lyt-mobile-backdrop[b-c2wiawx18a] {
        position: fixed;
        inset: 0;
        z-index: 499;
        background: rgba(0,0,0,.45);
        backdrop-filter: blur(2px);
        -webkit-backdrop-filter: blur(2px);
        animation: lyt-fade-b-c2wiawx18a .2s ease-out;
    }

    /* Tighter header padding */
    .lyt-topbar[b-c2wiawx18a] { padding-left: 12px !important; padding-right: 12px !important; }

    /* Store name truncation in topbar */
    .lyt-store-chip-name[b-c2wiawx18a] { max-width: 110px !important; }

    /* Notification dropdown: full-width on mobile */
    .lyt-notif-dropdown[b-c2wiawx18a] {
        position: fixed !important;
        top: 56px;
        left: 8px;
        right: 8px;
        width: auto;
    }

    /* Store switcher dropdown: full-width on mobile */
    .lyt-store-dropdown[b-c2wiawx18a] {
        left: 8px;
        right: 8px;
        width: auto;
    }
}

@keyframes lyt-fade-b-c2wiawx18a {
    from { opacity: 0; }
    to   { opacity: 1; }
}
/* _content/MiniMartBlazorPOS/Components/Pages/Admin/AuditTrail.razor.rz.scp.css */
/* ── User avatar initial badge ────────────────────────────────────────── */
.audit-avatar[b-nll2wetbhj] {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: linear-gradient(135deg, #6366f1 0%, #818cf8 100%);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    letter-spacing: 0;
}

/* ── Module badges ────────────────────────────────────────────────────── */
.audit-module-badge[b-nll2wetbhj] {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    border-radius: 6px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .3px;
    white-space: nowrap;
}

/* Auth */
.audit-module-auth[b-nll2wetbhj] {
    background: rgba(99,102,241,.12);
    color: #818cf8;
}

/* Products */
.audit-module-products[b-nll2wetbhj] {
    background: rgba(16,185,129,.1);
    color: #10b981;
}

/* Brands */
.audit-module-brands[b-nll2wetbhj] {
    background: rgba(245,158,11,.1);
    color: #f59e0b;
}

/* Categories */
.audit-module-categories[b-nll2wetbhj] {
    background: rgba(236,72,153,.1);
    color: #ec4899;
}

/* Units */
.audit-module-units[b-nll2wetbhj] {
    background: rgba(14,165,233,.1);
    color: #0ea5e9;
}

/* Vendors */
.audit-module-vendors[b-nll2wetbhj] {
    background: rgba(168,85,247,.1);
    color: #a855f7;
}

/* Customers */
.audit-module-customers[b-nll2wetbhj] {
    background: rgba(20,184,166,.1);
    color: #14b8a6;
}

/* StockIn */
.audit-module-stockin[b-nll2wetbhj] {
    background: rgba(249,115,22,.1);
    color: #f97316;
}

/* Adjustments */
.audit-module-adjustments[b-nll2wetbhj] {
    background: rgba(234,179,8,.1);
    color: #eab308;
}

/* POS */
.audit-module-pos[b-nll2wetbhj] {
    background: rgba(239,68,68,.1);
    color: #ef4444;
}

/* ── Action badges ────────────────────────────────────────────────────── */
.audit-action-badge[b-nll2wetbhj] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px;
    border-radius: 6px;
    font-size: 11px;
    font-weight: 600;
    white-space: nowrap;
}

/* Signed In */
.audit-action-signed-in[b-nll2wetbhj] {
    background: rgba(99,102,241,.1);
    color: #818cf8;
}

/* Signed Out */
.audit-action-signed-out[b-nll2wetbhj] {
    background: rgba(148,163,184,.1);
    color: #94a3b8;
}

/* Created */
.audit-action-created[b-nll2wetbhj] {
    background: rgba(16,185,129,.1);
    color: #10b981;
}

/* Updated */
.audit-action-updated[b-nll2wetbhj] {
    background: rgba(59,130,246,.1);
    color: #3b82f6;
}

/* Deleted */
.audit-action-deleted[b-nll2wetbhj] {
    background: rgba(239,68,68,.1);
    color: #ef4444;
}

/* Imported */
.audit-action-imported[b-nll2wetbhj] {
    background: rgba(168,85,247,.1);
    color: #a855f7;
}

/* Confirmed */
.audit-action-confirmed[b-nll2wetbhj] {
    background: rgba(16,185,129,.12);
    color: #059669;
}

/* Voided */
.audit-action-voided[b-nll2wetbhj] {
    background: rgba(239,68,68,.12);
    color: #dc2626;
}

/* Adjustment */
.audit-action-adjustment[b-nll2wetbhj] {
    background: rgba(234,179,8,.1);
    color: #ca8a04;
}

/* Sale */
.audit-action-sale[b-nll2wetbhj] {
    background: rgba(249,115,22,.1);
    color: #ea580c;
}

/* Activated */
.audit-action-activated[b-nll2wetbhj] {
    background: rgba(20,184,166,.1);
    color: #0d9488;
}

/* Deactivated */
.audit-action-deactivated[b-nll2wetbhj] {
    background: rgba(148,163,184,.1);
    color: #64748b;
}
/* _content/MiniMartBlazorPOS/Components/Pages/Admin/DatabaseTools.razor.rz.scp.css */
/* ══════════════════════════════════════════════════════════════════════════════
   DatabaseTools.razor.css  –  scoped styles (dbt- prefix)
   ══════════════════════════════════════════════════════════════════════════════ */

/* ── Keyframes ────────────────────────────────────────────────────────────── */

@keyframes dbt-slideInUp-b-1madgnzdhc {
    from { opacity: 0; transform: translateY(18px); }
    to   { opacity: 1; transform: translateY(0);    }
}

@keyframes dbt-fadeIn-b-1madgnzdhc {
    from { opacity: 0; }
    to   { opacity: 1; }
}

@keyframes dbt-shimmer-b-1madgnzdhc {
    0%   { background-position: -400px 0; }
    100% { background-position:  400px 0; }
}

@keyframes dbt-spin-b-1madgnzdhc {
    from { transform: rotate(0deg);   }
    to   { transform: rotate(360deg); }
}

/* ── Page header ──────────────────────────────────────────────────────────── */

.dbt-header[b-1madgnzdhc] {
    animation: dbt-fadeIn-b-1madgnzdhc .35s ease both;
}

.dbt-header-icon[b-1madgnzdhc] {
    width: 48px;
    height: 48px;
    border-radius: 14px;
    background: rgb(var(--b500) / .12);
    color: rgb(var(--b500));
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

/* ── Refresh button ───────────────────────────────────────────────────────── */

.dbt-btn-refresh[b-1madgnzdhc] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    border-radius: 10px;
    font-size: .82rem;
    font-weight: 600;
    border: 1px solid var(--bar-border);
    background: var(--bar-bg);
    color: var(--bar-text);
    cursor: pointer;
    transition: background .18s, border-color .18s, opacity .18s;
    white-space: nowrap;
}

.dbt-btn-refresh:hover:not(:disabled)[b-1madgnzdhc] {
    background: rgb(var(--b500) / .08);
    border-color: rgb(var(--b500) / .4);
}

.dbt-btn-refresh:disabled[b-1madgnzdhc] {
    opacity: .55;
    cursor: not-allowed;
}

/* ── Spin modifier for icon ───────────────────────────────────────────────── */

.dbt-spin[b-1madgnzdhc] {
    animation: dbt-spin-b-1madgnzdhc .7s linear infinite;
    display: inline-block;
}

/* ── Skeleton loader ──────────────────────────────────────────────────────── */

.dbt-skeleton-card[b-1madgnzdhc] {
    height: 130px;
    border-radius: 16px;
    background: linear-gradient(
        90deg,
        var(--bar-border) 25%,
        rgb(var(--b500) / .06) 50%,
        var(--bar-border) 75%
    );
    background-size: 800px 100%;
    animation: dbt-shimmer-b-1madgnzdhc 1.4s infinite linear;
}

/* ── KPI card base ────────────────────────────────────────────────────────── */

.dbt-kpi[b-1madgnzdhc] {
    padding: 18px 16px 16px;
    border-radius: 16px;
    border: 1px solid var(--bar-border);
    background: var(--bar-bg);
    display: flex;
    flex-direction: column;
    gap: 6px;
    animation: dbt-slideInUp-b-1madgnzdhc .4s cubic-bezier(.16,1,.3,1) both;
    transition: transform .2s, box-shadow .2s;
}

.dbt-kpi:hover[b-1madgnzdhc] {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(0,0,0,.12);
}

/* ── KPI color accents (left border stripe) ───────────────────────────────── */

.dbt-kpi-blue[b-1madgnzdhc]   { border-left: 3px solid #3b82f6; }
.dbt-kpi-emerald[b-1madgnzdhc]{ border-left: 3px solid #10b981; }
.dbt-kpi-purple[b-1madgnzdhc] { border-left: 3px solid #a855f7; }
.dbt-kpi-amber[b-1madgnzdhc]  { border-left: 3px solid #f59e0b; }
.dbt-kpi-teal[b-1madgnzdhc]   { border-left: 3px solid #14b8a6; }

/* ── KPI icon circle ──────────────────────────────────────────────────────── */

.dbt-kpi-icon[b-1madgnzdhc] {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    margin-bottom: 2px;
}

.dbt-icon-blue[b-1madgnzdhc]    { background: rgba(59,130,246,.12);  color: #3b82f6; }
.dbt-icon-emerald[b-1madgnzdhc] { background: rgba(16,185,129,.12);  color: #10b981; }
.dbt-icon-purple[b-1madgnzdhc]  { background: rgba(168,85,247,.12);  color: #a855f7; }
.dbt-icon-amber[b-1madgnzdhc]   { background: rgba(245,158,11,.12);  color: #f59e0b; }
.dbt-icon-teal[b-1madgnzdhc]    { background: rgba(20,184,166,.12);  color: #14b8a6; }

/* ── KPI typography ───────────────────────────────────────────────────────── */

.dbt-kpi-value[b-1madgnzdhc] {
    font-size: 1.75rem;
    font-weight: 800;
    line-height: 1.1;
    color: var(--bar-text);
    letter-spacing: -.5px;
}

.dbt-kpi-unit[b-1madgnzdhc] {
    font-size: .95rem;
    font-weight: 600;
    margin-left: 2px;
    opacity: .7;
}

.dbt-kpi-label[b-1madgnzdhc] {
    font-size: .8rem;
    font-weight: 700;
    color: var(--bar-text);
    letter-spacing: .2px;
}

.dbt-kpi-sub[b-1madgnzdhc] {
    font-size: .72rem;
    color: var(--bar-sub);
    line-height: 1.3;
}

/* ── Generic card ─────────────────────────────────────────────────────────── */

.dbt-card[b-1madgnzdhc] {
    padding: 20px 22px;
    border-radius: 16px;
    border: 1px solid var(--bar-border);
    background: var(--bar-bg);
}

.dbt-card-header[b-1madgnzdhc] {
    display: flex;
    align-items: center;
    gap: 10px;
}

.dbt-card-icon[b-1madgnzdhc] {
    font-size: 22px !important;
    flex-shrink: 0;
}

.dbt-card-title[b-1madgnzdhc] {
    font-size: .95rem;
    font-weight: 700;
    color: var(--bar-text);
}

/* ── Slide-up entrance for cards ──────────────────────────────────────────── */

.dbt-slide-up[b-1madgnzdhc] {
    animation: dbt-slideInUp-b-1madgnzdhc .45s cubic-bezier(.16,1,.3,1) both;
}

/* ── Server info grid ─────────────────────────────────────────────────────── */

.dbt-info-grid[b-1madgnzdhc] {
    display: flex;
    flex-direction: column;
    gap: 0;
    margin-top: 14px;
}

.dbt-info-row[b-1madgnzdhc] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 9px 0;
    border-bottom: 1px solid var(--bar-border);
}

.dbt-info-row:last-child[b-1madgnzdhc] {
    border-bottom: none;
    padding-bottom: 0;
}

.dbt-info-label[b-1madgnzdhc] {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: .78rem;
    font-weight: 600;
    color: var(--bar-sub);
    white-space: nowrap;
    flex-shrink: 0;
}

.dbt-info-value[b-1madgnzdhc] {
    font-size: .82rem;
    font-weight: 600;
    color: var(--bar-text);
    text-align: right;
    word-break: break-all;
}

.dbt-mono[b-1madgnzdhc] {
    font-family: 'JetBrains Mono', 'Fira Code', 'Cascadia Code', ui-monospace, monospace;
    letter-spacing: -.2px;
}

/* ── Donut chart wrapper ──────────────────────────────────────────────────── */

.dbt-donut-wrap[b-1madgnzdhc] {
    position: relative;
    width: 140px;
    height: 140px;
    flex-shrink: 0;
}

.dbt-donut-center[b-1madgnzdhc] {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    pointer-events: none;
}

.dbt-donut-pct[b-1madgnzdhc] {
    font-size: 1.6rem;
    font-weight: 900;
    line-height: 1;
    letter-spacing: -1px;
    transition: color .5s ease;
}

.dbt-donut-sub[b-1madgnzdhc] {
    font-size: .68rem;
    font-weight: 600;
    color: var(--bar-sub);
    margin-top: 2px;
    letter-spacing: .5px;
    text-transform: uppercase;
}

/* ── Legend items ─────────────────────────────────────────────────────────── */

.dbt-legend-item[b-1madgnzdhc] {
    display: flex;
    align-items: center;
    gap: 10px;
}

.dbt-legend-dot[b-1madgnzdhc] {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    flex-shrink: 0;
    transition: background .5s ease;
}

.dbt-legend-val[b-1madgnzdhc] {
    font-size: .82rem;
    font-weight: 700;
    color: var(--bar-text);
    line-height: 1.2;
}

.dbt-legend-lbl[b-1madgnzdhc] {
    font-size: .7rem;
    color: var(--bar-sub);
    font-weight: 500;
}

/* ── Maintenance action buttons ───────────────────────────────────────────── */

.dbt-action-btn[b-1madgnzdhc] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    padding: 16px 16px 14px;
    border-radius: 14px;
    border: 1.5px solid transparent;
    cursor: pointer;
    text-align: left;
    transition: transform .18s, box-shadow .18s, background .18s, border-color .18s, opacity .18s;
    width: 100%;
}

.dbt-action-btn:hover:not(:disabled)[b-1madgnzdhc] {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0,0,0,.14);
}

.dbt-action-btn:active:not(:disabled)[b-1madgnzdhc] {
    transform: translateY(0);
}

.dbt-action-btn:disabled[b-1madgnzdhc] {
    opacity: .5;
    cursor: not-allowed;
}

/* Blue – Backup */
.dbt-action-blue[b-1madgnzdhc] {
    background: rgba(59,130,246,.08);
    border-color: rgba(59,130,246,.22);
    color: #3b82f6;
}
.dbt-action-blue:hover:not(:disabled)[b-1madgnzdhc] {
    background: rgba(59,130,246,.14);
    border-color: rgba(59,130,246,.4);
}

/* Purple – Shrink */
.dbt-action-purple[b-1madgnzdhc] {
    background: rgba(168,85,247,.08);
    border-color: rgba(168,85,247,.22);
    color: #a855f7;
}
.dbt-action-purple:hover:not(:disabled)[b-1madgnzdhc] {
    background: rgba(168,85,247,.14);
    border-color: rgba(168,85,247,.4);
}

/* Emerald – Rebuild Indexes */
.dbt-action-emerald[b-1madgnzdhc] {
    background: rgba(16,185,129,.08);
    border-color: rgba(16,185,129,.22);
    color: #10b981;
}
.dbt-action-emerald:hover:not(:disabled)[b-1madgnzdhc] {
    background: rgba(16,185,129,.14);
    border-color: rgba(16,185,129,.4);
}

/* Amber – Update Statistics */
.dbt-action-amber[b-1madgnzdhc] {
    background: rgba(245,158,11,.08);
    border-color: rgba(245,158,11,.22);
    color: #f59e0b;
}
.dbt-action-amber:hover:not(:disabled)[b-1madgnzdhc] {
    background: rgba(245,158,11,.14);
    border-color: rgba(245,158,11,.4);
}

/* Red – Check Integrity */
.dbt-action-red[b-1madgnzdhc] {
    background: rgba(239,68,68,.08);
    border-color: rgba(239,68,68,.22);
    color: #ef4444;
}
.dbt-action-red:hover:not(:disabled)[b-1madgnzdhc] {
    background: rgba(239,68,68,.14);
    border-color: rgba(239,68,68,.4);
}

/* ── Action button inner elements ─────────────────────────────────────────── */

.dbt-action-icon[b-1madgnzdhc] {
    font-size: 22px !important;
    margin-bottom: 6px;
}

.dbt-action-label[b-1madgnzdhc] {
    font-size: .82rem;
    font-weight: 700;
    line-height: 1.2;
    color: inherit;
}

.dbt-action-desc[b-1madgnzdhc] {
    font-size: .7rem;
    font-weight: 500;
    color: var(--bar-sub);
    line-height: 1.3;
}

/* ── Table matrix ─────────────────────────────────────────────────────────── */

.dbt-table-icon[b-1madgnzdhc] {
    width: 28px;
    height: 28px;
    border-radius: 8px;
    background: rgb(var(--b500) / .1);
    color: rgb(var(--b500));
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.dbt-th[b-1madgnzdhc] {
    padding: 9px 12px;
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .4px;
    text-transform: uppercase;
    color: var(--bar-sub);
    border-bottom: 1px solid var(--bar-border);
    white-space: nowrap;
    text-align: left;
}

.dbt-td[b-1madgnzdhc] {
    padding: 10px 12px;
    font-size: .82rem;
    border-bottom: 1px solid var(--bar-border);
    vertical-align: middle;
}

.dbt-tr:last-child .dbt-td[b-1madgnzdhc] {
    border-bottom: none;
}

.dbt-tr[b-1madgnzdhc] {
    transition: background .15s;
}

.dbt-tr:hover[b-1madgnzdhc] {
    background: rgb(var(--b500) / .04);
}

/* ── Row distribution bar ─────────────────────────────────────────────────── */

.dbt-bar-track[b-1madgnzdhc] {
    height: 7px;
    border-radius: 999px;
    background: var(--bar-border);
    overflow: hidden;
    min-width: 80px;
}

.dbt-bar-fill[b-1madgnzdhc] {
    height: 100%;
    border-radius: 999px;
    transition: width 1.1s cubic-bezier(.16,1,.3,1);
}

.dbt-bar-brand[b-1madgnzdhc] {
    background: linear-gradient(90deg, rgb(var(--b500)), rgb(var(--b500) / .65));
}
/* _content/MiniMartBlazorPOS/Components/Pages/Admin/DeviceManagement.razor.rz.scp.css */
/* ── Table ────────────────────────────────────────────────────────────── */
.dm-th[b-iis82h3zkc] {
    padding: 10px 16px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--bar-sub);
    text-align: left;
    white-space: nowrap;
}

.dm-th-center[b-iis82h3zkc] { text-align: center; }

.dm-td[b-iis82h3zkc] {
    padding: 12px 16px;
    font-size: 13px;
    color: var(--bar-sub);
    border-top: 1px solid var(--bar-border);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.dm-td-center[b-iis82h3zkc] { text-align: center; }

.dm-tr[b-iis82h3zkc] { transition: background .1s; }
.dm-tr:hover td[b-iis82h3zkc] { background: var(--sb-hover-bg); }

/* ── Plan badges ──────────────────────────────────────────────────────── */
.dm-plan-badge[b-iis82h3zkc] {
    display: inline-flex;
    align-items: center;
    padding: 2px 10px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .03em;
}

.dm-plan-trial[b-iis82h3zkc]        { background: rgba(148,163,184,.15); color: #64748b; border: 1px solid rgba(148,163,184,.3); }
.dm-plan-inventoryonly[b-iis82h3zkc]{ background: rgba(139,92,246,.1);   color: #7c3aed; border: 1px solid rgba(139,92,246,.2); }
.dm-plan-starter[b-iis82h3zkc]      { background: rgb(var(--b500)/.1);   color: rgb(var(--b700)); border: 1px solid rgb(var(--b500)/.2); }
.dm-plan-business[b-iis82h3zkc]     { background: rgba(16,185,129,.1);   color: #047857; border: 1px solid rgba(16,185,129,.2); }
.dm-plan-enterprise[b-iis82h3zkc]   { background: rgba(245,158,11,.12);  color: #b45309; border: 1px solid rgba(245,158,11,.25); }

/* ── Active sessions ───────────────────────────────────────────────── */
.dm-session-count[b-iis82h3zkc] {
    display: inline-flex;
    align-items: center;
    padding: 3px 12px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 700;
    background: rgba(22,163,74,.1);
    color: #16a34a;
    border: 1px solid rgba(22,163,74,.2);
}

.dm-session-store-count[b-iis82h3zkc] {
    display: inline-flex;
    align-items: center;
    padding: 1px 8px;
    border-radius: 999px;
    font-size: 10px;
    font-weight: 700;
    background: rgba(148,163,184,.15);
    color: #64748b;
    border: 1px solid rgba(148,163,184,.25);
}

.dm-session-grid[b-iis82h3zkc] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 8px;
}

.dm-session-card[b-iis82h3zkc] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border-radius: 12px;
    border: 1px solid var(--bar-border);
    background: var(--page-bg);
    transition: border-color .15s;
}

.dm-session-card:hover[b-iis82h3zkc] {
    border-color: rgba(22,163,74,.3);
}

.dm-session-dot[b-iis82h3zkc] {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #16a34a;
    flex-shrink: 0;
    box-shadow: 0 0 0 3px rgba(22,163,74,.2);
    animation: dm-pulse-b-iis82h3zkc 2s infinite;
}

@keyframes dm-pulse-b-iis82h3zkc {
    0%, 100% { box-shadow: 0 0 0 3px rgba(22,163,74,.2); }
    50%       { box-shadow: 0 0 0 5px rgba(22,163,74,.05); }
}

.dm-role-badge[b-iis82h3zkc] {
    display: inline-flex;
    align-items: center;
    padding: 1px 7px;
    border-radius: 999px;
    font-size: 10px;
    font-weight: 600;
    background: rgb(var(--b500)/.1);
    color: rgb(var(--b600));
    border: 1px solid rgb(var(--b500)/.2);
    white-space: nowrap;
}
/* _content/MiniMartBlazorPOS/Components/Pages/Admin/ManageProfile.razor.rz.scp.css */
/* ── Role badges ─────────────────────────────────────────────────────────── */
.mp-role-badge[b-fflgs923yf] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 12px;
    border-radius: 100px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .03em;
}

.mp-badge-super[b-fflgs923yf] {
    background: rgba(245,158,11,.12);
    color: #b45309; 
    border: 1px solid rgba(245,158,11,.3);
}
.mp-badge-admin[b-fflgs923yf] {
    background: rgb(var(--b600) / .12);
    color: rgb(var(--b600));
    border: 1px solid rgb(var(--b500) / .25);
}
.mp-badge-basic[b-fflgs923yf] { 
    background: rgba(148,163,184,.15); 
    color: #64748b; 
    border: 1px solid rgba(148,163,184,.3); 
}

/* ── Crop wrapper ────────────────────────────────────────────────────────── */
.mp-crop-wrap[b-fflgs923yf] {
    border-radius: 12px;
    overflow: hidden;
    background: #111;
    max-height: 320px;
}

/* ── Crop action buttons ─────────────────────────────────────────────────── */
.mp-btn-apply[b-fflgs923yf] {
    flex: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 7px 14px;
    border-radius: 10px;
    font-size: 13px;
    font-weight: 600;
    background: #059669;
    color: #fff;
    border: none;
    cursor: pointer;
    transition: background .15s, transform .1s;
}

.mp-btn-apply:hover:not(:disabled)[b-fflgs923yf]  { background: #047857; }
.mp-btn-apply:active:not(:disabled)[b-fflgs923yf] { transform: scale(.97); }
.mp-btn-apply:disabled[b-fflgs923yf]              { opacity: .55; cursor: not-allowed; }

.mp-btn-cancel[b-fflgs923yf] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 7px 14px;
    border-radius: 10px;
    font-size: 13px;
    font-weight: 600;
    background: var(--page-bg);
    color: var(--bar-sub);
    border: 1px solid var(--bar-border);
    cursor: pointer;
    transition: all .15s;
}

.mp-btn-cancel:hover:not(:disabled)[b-fflgs923yf] { border-color: rgb(var(--b400)); color: rgb(var(--b600)); }
.mp-btn-cancel:disabled[b-fflgs923yf]             { opacity: .55; cursor: not-allowed; }

/* ── Error input border ──────────────────────────────────────────────────── */
.mp-input-error[b-fflgs923yf] {
    border-color: rgba(239,68,68,.6) !important;
}

.mp-input-error:focus[b-fflgs923yf] {
    border-color: #ef4444 !important;
}
/* _content/MiniMartBlazorPOS/Components/Pages/Admin/RolePermissions.razor.rz.scp.css */
/* ── Sticky header ── */
.perm-th[b-ukj0fv2yj8] {
    position: sticky;
    top: 0;
    z-index: 2;
    background: var(--bar-bg);
    border-bottom: 2px solid var(--bar-border);
}

thead th:first-child[b-ukj0fv2yj8] { border-top-left-radius:  1rem; }
thead th:last-child[b-ukj0fv2yj8]  { border-top-right-radius: 1rem; }

/* ── Info pills ── */
.perm-pill[b-ukj0fv2yj8] {
    display: inline-flex;
    align-items: center;
    padding: 1px 7px;
    border-radius: 99px;
    font-size: 11px;
    font-weight: 600;
}

.perm-pill-on[b-ukj0fv2yj8] {
    background: rgba(74,222,128,.18);
    color: #4ade80;
}

.perm-pill-off[b-ukj0fv2yj8] {
    background: rgba(248,113,113,.18);
    color: #f87171;
}

/* ── Quick Select group ── */
.quick-group[b-ukj0fv2yj8] {
    display: inline-flex;
    align-items: center;
    border-radius: 10px;
    overflow: hidden;
    border: 1px solid var(--bar-border);
}

.quick-group-label[b-ukj0fv2yj8] {
    padding: 5px 10px;
    font-size: 11px;
    font-weight: 700;
    color: #e2e8f0;
    background: var(--sb-hover-bg);
    border-right: 1px solid var(--bar-border);
    white-space: nowrap;
}

.quick-btn[b-ukj0fv2yj8] {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 5px 10px;
    font-size: 11px;
    font-weight: 600;
    cursor: pointer;
    transition: background .15s;
    border: none;
    white-space: nowrap;
}

.quick-btn-all[b-ukj0fv2yj8] {
    background: rgba(74,222,128,.1);
    color: #4ade80;
    border-right: 1px solid var(--bar-border);
}

    .quick-btn-all:hover[b-ukj0fv2yj8] {
        background: rgba(74,222,128,.22);
    }

.quick-btn-none[b-ukj0fv2yj8] {
    background: rgba(248,113,113,.1);
    color: #f87171;
}

    .quick-btn-none:hover[b-ukj0fv2yj8] {
        background: rgba(248,113,113,.22);
    }

/* ── Section header ── */
.section-hdr[b-ukj0fv2yj8] {
    background: rgb(var(--b500) / .05);
    border-top: 1px solid var(--bar-border);
}

.section-dot[b-ukj0fv2yj8] {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: rgb(var(--b500));
    flex-shrink: 0;
}

/* ── Page row ── */
.perm-row[b-ukj0fv2yj8] {
    border-top: 1px solid var(--bar-border);
    transition: background .12s;
}

    .perm-row:hover[b-ukj0fv2yj8] {
        background: var(--sb-hover-bg);
    }

.page-icon-wrap[b-ukj0fv2yj8] {
    width: 28px;
    height: 28px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    background: rgb(var(--b500) / .1);
    color: rgb(var(--b400));
}

/* ── Toggle switch ── */
.toggle-switch[b-ukj0fv2yj8] {
    position: relative;
    display: inline-flex;
    align-items: center;
    width: 42px;
    height: 24px;
    border-radius: 99px;
    border: none;
    cursor: pointer;
    transition: background .2s, box-shadow .2s;
    flex-shrink: 0;
}

.toggle-on[b-ukj0fv2yj8] {
    background: #22c55e;
    box-shadow: 0 0 0 0px rgba(34,197,94,0);
}

    .toggle-on:hover[b-ukj0fv2yj8] {
        box-shadow: 0 0 0 3px rgba(34,197,94,.25);
    }

.toggle-off[b-ukj0fv2yj8] {
    background: #ef4444;
    box-shadow: 0 0 0 0px rgba(239,68,68,0);
}

    .toggle-off:hover[b-ukj0fv2yj8] {
        box-shadow: 0 0 0 3px rgba(239,68,68,.25);
    }

.toggle-thumb[b-ukj0fv2yj8] {
    position: absolute;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 1px 4px rgba(0,0,0,.25);
    transition: left .2s cubic-bezier(.4,0,.2,1);
}

.toggle-on .toggle-thumb[b-ukj0fv2yj8] {
    left: 21px;
}

.toggle-off .toggle-thumb[b-ukj0fv2yj8] {
    left: 3px;
}
/* _content/MiniMartBlazorPOS/Components/Pages/Admin/Stores.razor.rz.scp.css */
/* ── Table cells ──────────────────────────────────────────────────────── */
.stores-th[b-liw8vyb439] {
    padding: 10px 16px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .5px;
    text-align: left;
    color: var(--bar-sub);
    white-space: nowrap;
}

.stores-td[b-liw8vyb439] {
    padding: 12px 16px;
    font-size: 13px;
    color: var(--bar-text);
    vertical-align: middle;
}

/* ── Active row sticky cell tint ──────────────────────────────────────── */
.stores-row-active .sticky-col-td[b-liw8vyb439] { background: rgb(var(--b600) / .04); }
.stores-row-active:hover .sticky-col-td[b-liw8vyb439] { background: rgb(var(--b600) / .08); }

/* ── Row hover ────────────────────────────────────────────────────────── */
.stores-row[b-liw8vyb439] {
    transition: background 120ms;
}

.stores-row:hover[b-liw8vyb439] {
    background: var(--sb-hover-bg);
}

/* ── Active row ───────────────────────────────────────────────────────── */
.stores-row-active[b-liw8vyb439] {
    background: rgb(var(--b600) / .04);
}

.stores-row-active:hover[b-liw8vyb439] {
    background: rgb(var(--b600) / .08);
}

/* ── Inactive row ─────────────────────────────────────────────────────── */
.stores-row-inactive[b-liw8vyb439] {
    opacity: .55;
}

.stores-row-inactive:hover[b-liw8vyb439] {
    opacity: .75;
}

/* ── Address cell truncate ────────────────────────────────────────────── */
.stores-addr[b-liw8vyb439] {
    display: block;
    max-width: 220px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ── Mobile tweaks ────────────────────────────────────────────────────── */
@media (max-width: 639px) {
    .stores-th[b-liw8vyb439],
    .stores-td[b-liw8vyb439] { padding: 10px 10px; }

    .sticky-col-th[b-liw8vyb439],
    .sticky-col-td[b-liw8vyb439] { padding-right: 10px; }
}

/* ── Modal slide-in ───────────────────────────────────────────────────── */
.modal-in[b-liw8vyb439] {
    animation: modalIn-b-liw8vyb439 160ms cubic-bezier(.22,.68,0,1.2);
}

@keyframes modalIn-b-liw8vyb439 {
    from { opacity: 0; transform: scale(.96) translateY(8px); }
    to   { opacity: 1; transform: scale(1)   translateY(0); }
}
/* _content/MiniMartBlazorPOS/Components/Pages/Admin/StoreSettings.razor.rz.scp.css */
/* ── Plan badges ─────────────────────────────────────────────────────────── */
.ss-plan-badge[b-ziimxbjh18] {
    display: inline-flex;
    align-items: center;
    padding: 3px 12px;
    border-radius: 100px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .03em;
}

.ss-plan-starter[b-ziimxbjh18]    { background: rgba(148,163,184,.15); color: #64748b; border: 1px solid rgba(148,163,184,.3); }
.ss-plan-business[b-ziimxbjh18]   { background: rgb(var(--b500) / .12); color: rgb(var(--b600)); border: 1px solid rgb(var(--b500) / .25); }
.ss-plan-enterprise[b-ziimxbjh18] { background: rgba(245,158,11,.12);  color: #b45309; border: 1px solid rgba(245,158,11,.3); }

/* ── Status badges ───────────────────────────────────────────────────────── */
.ss-status-badge[b-ziimxbjh18] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 10px;
    border-radius: 100px;
    font-size: 11px;
    font-weight: 700;
}

.ss-status-expiring[b-ziimxbjh18]  { background: rgba(245,158,11,.12); color: #b45309; border: 1px solid rgba(245,158,11,.3);  }
.ss-status-expired[b-ziimxbjh18]   { background: rgba(239,68,68,.12);  color: #dc2626; border: 1px solid rgba(239,68,68,.25);  }
.ss-status-suspended[b-ziimxbjh18] { background: rgba(139,92,246,.12); color: #7c3aed; border: 1px solid rgba(139,92,246,.25); }

/* ── Payment badges ──────────────────────────────────────────────────────── */
.ss-paid-badge[b-ziimxbjh18], .ss-free-badge[b-ziimxbjh18] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 10px;
    border-radius: 100px;
    font-size: 11px;
    font-weight: 700;
    background: rgba(16,185,129,.12);
    color: #059669;
    border: 1px solid rgba(16,185,129,.25);
}

.ss-unpaid-badge[b-ziimxbjh18] {
    display: inline-block;
    padding: 2px 10px;
    border-radius: 100px;
    font-size: 11px;
    font-weight: 700;
    background: rgba(239,68,68,.12);
    color: #dc2626;
    border: 1px solid rgba(239,68,68,.25);
}

/* ── Detail grid cells ───────────────────────────────────────────────────── */
.ss-detail-cell[b-ziimxbjh18] {
    padding: 12px 14px;
    border-radius: 12px;
    background: var(--page-bg);
    border: 1px solid var(--bar-border);
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.ss-detail-label[b-ziimxbjh18] {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--bar-sub);
}

.ss-detail-val[b-ziimxbjh18] {
    font-size: 13px;
    font-weight: 600;
    color: var(--bar-text);
}

/* ── Days-remaining row ──────────────────────────────────────────────────── */
.ss-days-row[b-ziimxbjh18] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    border-radius: 12px;
    background: var(--page-bg);
    border: 1px solid var(--bar-border);
    color: var(--bar-sub);
}

/* ── Days pill ───────────────────────────────────────────────────────────── */
.ss-days-pill[b-ziimxbjh18] {
    display: inline-flex;
    align-items: center;
    padding: 3px 12px;
    border-radius: 100px;
    font-size: 12px;
    font-weight: 700;
}

.ss-days-ok[b-ziimxbjh18]       { background: rgba(16,185,129,.12); color: #059669; border: 1px solid rgba(16,185,129,.25); }
.ss-days-expiring[b-ziimxbjh18] { background: rgba(245,158,11,.12); color: #b45309; border: 1px solid rgba(245,158,11,.3); }
.ss-days-expired[b-ziimxbjh18]  { background: rgba(239,68,68,.12);  color: #dc2626; border: 1px solid rgba(239,68,68,.25); }

/* ── Pay Now section ─────────────────────────────────────────────────────── */
.ss-pay-section[b-ziimxbjh18] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 14px;
    border-radius: 14px;
    border: 1px solid var(--bar-border);
    background: var(--page-bg);
}

.ss-pay-label[b-ziimxbjh18] {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--bar-sub);
}

/* ── Method picker buttons ───────────────────────────────────────────────── */
.ss-pay-methods[b-ziimxbjh18] {
    display: flex;
    gap: 10px;
}

.ss-pay-method-btn[b-ziimxbjh18] {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px 14px;
    border-radius: 12px;
    border: 2px solid var(--bar-border);
    background: var(--bar-bg);
    cursor: pointer;
    transition: all .15s;
}

.ss-pay-method-logo[b-ziimxbjh18] {
    width: 28px;
    height: 28px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    font-weight: 900;
    flex-shrink: 0;
}

.ss-gcash-text[b-ziimxbjh18]   { background: rgba(0,85,213,.12);  color: #0055D5; border: 1px solid rgba(0,85,213,.2); }
.ss-paymaya-text[b-ziimxbjh18] { background: rgba(95,37,159,.12); color: #5F259F; border: 1px solid rgba(95,37,159,.2); }

.ss-pay-method-name[b-ziimxbjh18] {
    font-size: 13px;
    font-weight: 700;
    color: var(--bar-text);
    flex: 1;
    text-align: left;
}

.ss-pay-check[b-ziimxbjh18] {
    font-size: 16px;
    flex-shrink: 0;
}

.ss-pay-gcash-active[b-ziimxbjh18]   { border-color: #0055D5; background: rgba(0,85,213,.05); }
.ss-pay-paymaya-active[b-ziimxbjh18] { border-color: #5F259F; background: rgba(95,37,159,.05); }

.ss-pay-gcash-active   .ss-pay-check[b-ziimxbjh18] { color: #0055D5; }
.ss-pay-paymaya-active .ss-pay-check[b-ziimxbjh18] { color: #5F259F; }

.ss-pay-method-btn:hover:not(.ss-pay-gcash-active):not(.ss-pay-paymaya-active)[b-ziimxbjh18] {
    border-color: rgb(var(--b400));
    background: var(--sb-hover-bg);
}

/* ── Account details row ─────────────────────────────────────────────────── */
.ss-pay-account[b-ziimxbjh18] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    padding: 10px 12px;
    border-radius: 10px;
    font-size: 13px;
    background: var(--bar-bg);
    border: 1px solid var(--bar-border);
    color: var(--bar-text);
}

/* ── Reference input ─────────────────────────────────────────────────────── */
.ss-pay-ref-input[b-ziimxbjh18] {
    width: 100%;
    border: 1px solid var(--bar-border);
    border-radius: 10px;
    background: var(--bar-bg);
    color: var(--bar-text);
    font-size: 13px;
    padding: 8px 12px;
    outline: none;
    transition: border-color .15s;
}

.ss-pay-ref-input:focus[b-ziimxbjh18]                { border-color: rgb(var(--b400)); }
.ss-pay-ref-input:disabled[b-ziimxbjh18]             { opacity: .6; cursor: not-allowed; }
.ss-pay-ref-input--error[b-ziimxbjh18]               { border-color: rgba(239,68,68,.6) !important; }
.ss-pay-ref-input--error:focus[b-ziimxbjh18]         { border-color: #ef4444 !important; }

.ss-ref-error[b-ziimxbjh18] {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 11px;
    font-weight: 600;
    color: #dc2626;
}

.ss-ref-ok[b-ziimxbjh18] {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 11px;
    font-weight: 600;
    color: #059669;
}

/* ── Filled icon utility ─────────────────────────────────────────────────── */
.icon-fill[b-ziimxbjh18] { font-variation-settings: 'FILL' 1; }

/* ── Submit button ───────────────────────────────────────────────────────── */
.ss-pay-submit-btn[b-ziimxbjh18] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    border-radius: 10px;
    font-size: 13px;
    font-weight: 600;
    background: rgb(var(--b600));
    color: #fff;
    border: none;
    cursor: pointer;
    transition: background .15s, transform .1s;
    white-space: nowrap;
    align-self: flex-end;
}

.ss-pay-submit-btn:hover:not(:disabled)[b-ziimxbjh18]  { background: rgb(var(--b700)); }
.ss-pay-submit-btn:active:not(:disabled)[b-ziimxbjh18] { transform: scale(.97); }
.ss-pay-submit-btn:disabled[b-ziimxbjh18]              { opacity: .55; cursor: not-allowed; }

/* ── Receipt upload / crop / preview ────────────────────────────────────── */
.ss-receipt-zone[b-ziimxbjh18] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 24px 16px;
    border: 2px dashed var(--bar-border);
    border-radius: 14px;
    background: var(--page-bg);
    transition: border-color .15s, background .15s;
}

.ss-receipt-zone:hover[b-ziimxbjh18] {
    border-color: rgb(var(--b400));
    background: rgb(var(--b50) / .6);
}

.ss-receipt-zone-icon[b-ziimxbjh18] {
    font-size: 32px;
    color: var(--bar-sub);
    font-variation-settings: 'FILL' 0;
}

.ss-receipt-zone-title[b-ziimxbjh18] {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: var(--bar-text);
}

.ss-receipt-zone-hint[b-ziimxbjh18] {
    display: block;
    font-size: 11px;
    color: var(--bar-sub);
}

.ss-receipt-crop-wrap[b-ziimxbjh18] {
    border-radius: 12px;
    overflow: hidden;
    background: #111;
    max-height: 320px;
}

.ss-receipt-btn-apply[b-ziimxbjh18] {
    flex: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 7px 14px;
    border-radius: 10px;
    font-size: 13px;
    font-weight: 600;
    background: #059669;
    color: #fff;
    border: none;
    cursor: pointer;
    transition: background .15s, transform .1s;
}

.ss-receipt-btn-apply:hover:not(:disabled)[b-ziimxbjh18]  { background: #047857; }
.ss-receipt-btn-apply:active:not(:disabled)[b-ziimxbjh18] { transform: scale(.97); }
.ss-receipt-btn-apply:disabled[b-ziimxbjh18]              { opacity: .55; cursor: not-allowed; }

.ss-receipt-btn-cancel[b-ziimxbjh18] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 7px 14px;
    border-radius: 10px;
    font-size: 13px;
    font-weight: 600;
    background: var(--page-bg);
    color: var(--bar-sub);
    border: 1px solid var(--bar-border);
    cursor: pointer;
    transition: all .15s;
}

.ss-receipt-btn-cancel:hover:not(:disabled)[b-ziimxbjh18] { border-color: rgb(var(--b400)); color: rgb(var(--b600)); }
.ss-receipt-btn-cancel:disabled[b-ziimxbjh18]             { opacity: .55; cursor: not-allowed; }

.ss-receipt-preview[b-ziimxbjh18] {
    position: relative;
    border-radius: 12px;
    overflow: hidden;
    background: #111;
}

.ss-receipt-preview-img[b-ziimxbjh18] {
    width: 100%;
    display: block;
    max-height: 220px;
    object-fit: contain;
    background: #111;
}

.ss-receipt-preview-overlay[b-ziimxbjh18] {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: space-between;
    padding: 8px;
    background: linear-gradient(to bottom, rgba(0,0,0,.45) 0%, transparent 40%, transparent 60%, rgba(0,0,0,.5) 100%);
}

.ss-icon-filled[b-ziimxbjh18] { font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 20; }

.ss-receipt-ready-badge[b-ziimxbjh18] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 8px;
    border-radius: 100px;
    font-size: 11px;
    font-weight: 700;
    background: rgba(16,185,129,.25);
    color: #6ee7b7;
    border: 1px solid rgba(16,185,129,.4);
    backdrop-filter: blur(4px);
}

.ss-receipt-change-btn[b-ziimxbjh18] {
    align-self: flex-end;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    border-radius: 8px;
    font-size: 11px;
    font-weight: 600;
    background: rgba(0,0,0,.45);
    color: #fff;
    border: none;
    cursor: pointer;
    backdrop-filter: blur(4px);
    transition: background .15s;
}

.ss-receipt-change-btn:hover[b-ziimxbjh18] { background: rgba(0,0,0,.65); }
/* _content/MiniMartBlazorPOS/Components/Pages/Admin/Subscriptions.razor.rz.scp.css */
/* ── KPI row ─────────────────────────────────────────────────────────────── */
.sub-kpi-row[b-34d6oyv7eh] {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 20px;
}

.sub-kpi-card[b-34d6oyv7eh] {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px 20px;
    border-radius: 14px;
    border: 1px solid var(--bar-border);
    background: var(--bar-bg);
    flex: 1;
    min-width: 160px;
    max-width: 280px;
    transition: box-shadow .15s, transform .15s;
}

.sub-kpi-card:hover[b-34d6oyv7eh] {
    box-shadow: 0 4px 16px rgba(0,0,0,.08);
    transform: translateY(-1px);
}

.sub-kpi-icon-box[b-34d6oyv7eh] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 12px;
    flex-shrink: 0;
}

.sr-kpi-card[b-34d6oyv7eh] {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px 20px;
    background: var(--bar-bg);
    border: 1px solid var(--bar-border);
    border-radius: 14px;
    flex: 1;
    min-width: 200px;
    box-shadow: 0 1px 4px rgba(0, 0, 0, .06);
    transition: box-shadow .15s, transform .15s;
}

.sr-kpi-card:hover[b-34d6oyv7eh] {
    box-shadow: 0 4px 14px rgba(0, 0, 0, .1);
    transform: translateY(-1px);
}

.sr-kpi-icon-box[b-34d6oyv7eh] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    border-radius: 12px;
    flex-shrink: 0;
}

.sr-kpi-icon-box .material-symbols-outlined[b-34d6oyv7eh] {
    font-size: 40px;
}

.sr-kpi-icon-brand[b-34d6oyv7eh] {
    background: rgb(var(--b500)/.12);
    color: rgb(var(--b600));
}

.sr-kpi-icon-emerald[b-34d6oyv7eh] {
    background: rgba(16, 185, 129, .12);
    color: #10b981;
}

.sr-kpi-icon-violet[b-34d6oyv7eh] {
    background: rgba(139, 92, 246, .12);
    color: #8b5cf6;
}

.sr-kpi-content[b-34d6oyv7eh] {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.sr-kpi-num[b-34d6oyv7eh] {
    font-size: 22px;
    font-weight: 800;
    line-height: 1;
    color: var(--bar-text);
    font-variant-numeric: tabular-nums;
}

.sr-kpi-lbl[b-34d6oyv7eh] {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--bar-sub);
}

.sub-kpi-icon-box .material-symbols-outlined[b-34d6oyv7eh] {
    font-size: 20px;
}

.sub-kpi-icon-green[b-34d6oyv7eh]  { background: rgba(16,185,129,.12); border: 1px solid rgba(16,185,129,.25); color: #10b981; }
.sub-kpi-icon-amber[b-34d6oyv7eh]  { background: rgba(245,158,11,.12); border: 1px solid rgba(245,158,11,.25); color: #f59e0b; }
.sub-kpi-icon-red[b-34d6oyv7eh]    { background: rgba(239,68,68,.12);  border: 1px solid rgba(239,68,68,.25);  color: #ef4444; }
.sub-kpi-icon-purple[b-34d6oyv7eh] { background: rgba(139,92,246,.12); border: 1px solid rgba(139,92,246,.25); color: #7c3aed; }

.sub-kpi-content[b-34d6oyv7eh] { display: flex; flex-direction: column; gap: 2px; }

.sub-kpi-num[b-34d6oyv7eh] {
    font-size: 24px;
    font-weight: 800;
    line-height: 1;
    color: var(--bar-text);
    font-variant-numeric: tabular-nums;
}

.sub-kpi-num-warn[b-34d6oyv7eh]      { color: #f59e0b; }
.sub-kpi-num-expired[b-34d6oyv7eh]   { color: #ef4444; }
.sub-kpi-num-suspended[b-34d6oyv7eh] { color: #7c3aed; }

.sub-kpi-lbl[b-34d6oyv7eh] {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--bar-sub);
}

/* ── Filter controls ─────────────────────────────────────────────────────── */
.sub-label[b-34d6oyv7eh] {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--bar-sub);
}

.sub-select[b-34d6oyv7eh] {
    border: 1px solid var(--bar-border);
    border-radius: 10px;
    background: var(--page-bg);
    color: var(--bar-text);
    font-size: 13px;
    font-weight: 500;
    padding: 0 12px;
    height: 36px;
    outline: none;
    cursor: pointer;
    transition: border-color .15s;
}

.sub-select:focus[b-34d6oyv7eh] { border-color: rgb(var(--b400)); }

/* ── Buttons ─────────────────────────────────────────────────────────────── */
.sub-btn-primary[b-34d6oyv7eh] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 18px;
    border-radius: 10px;
    font-size: 13px;
    font-weight: 600;
    background: rgb(var(--b600));
    color: #fff;
    border: none;
    cursor: pointer;
    transition: background .15s, transform .1s;
    white-space: nowrap;
}

.sub-btn-primary:hover:not(:disabled)[b-34d6oyv7eh]  { background: rgb(var(--b700)); }
.sub-btn-primary:active:not(:disabled)[b-34d6oyv7eh] { transform: scale(.97); }
.sub-btn-primary:disabled[b-34d6oyv7eh]              { opacity: .55; cursor: not-allowed; }

.sub-btn-ghost[b-34d6oyv7eh] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    border-radius: 10px;
    font-size: 13px;
    font-weight: 600;
    background: var(--page-bg);
    color: var(--bar-sub);
    border: 1px solid var(--bar-border);
    cursor: pointer;
    transition: all .15s;
    white-space: nowrap;
}

.sub-btn-ghost:hover:not(:disabled)[b-34d6oyv7eh]  { border-color: rgb(var(--b400)); color: rgb(var(--b600)); background: rgb(var(--b50)/1); }
.sub-btn-ghost:active:not(:disabled)[b-34d6oyv7eh] { transform: scale(.97); }
.sub-btn-ghost:disabled[b-34d6oyv7eh]              { opacity: .55; cursor: not-allowed; }

.sub-btn-settle[b-34d6oyv7eh] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 10px;
    border-radius: 8px;
    font-size: 12px;
    font-weight: 600;
    background: rgba(16,185,129,.12);
    color: #10b981;
    border: 1px solid rgba(16,185,129,.3);
    cursor: pointer;
    transition: background .15s;
    white-space: nowrap;
}

.sub-btn-settle:hover[b-34d6oyv7eh] { background: rgba(16,185,129,.22); }

.sub-btn-delete[b-34d6oyv7eh] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 8px;
    background: transparent;
    color: var(--bar-sub);
    border: 1px solid var(--bar-border);
    cursor: pointer;
    transition: all .15s;
}

.sub-btn-delete:hover[b-34d6oyv7eh] { background: rgba(239,68,68,.1); border-color: rgba(239,68,68,.35); color: #ef4444; }

.sub-btn-edit[b-34d6oyv7eh] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 8px;
    background: transparent;
    color: var(--bar-sub);
    border: 1px solid var(--bar-border);
    cursor: pointer;
    transition: all .15s;
}

.sub-btn-edit:hover[b-34d6oyv7eh] { background: rgb(var(--b500)/.1); border-color: rgb(var(--b500)/.35); color: rgb(var(--b600)); }

.sub-btn-suspend[b-34d6oyv7eh] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 10px;
    border-radius: 8px;
    font-size: 12px;
    font-weight: 600;
    background: rgba(239,68,68,.10);
    color: #dc2626;
    border: 1px solid rgba(239,68,68,.25);
    cursor: pointer;
    transition: background .15s;
    white-space: nowrap;
}

.sub-btn-suspend:hover[b-34d6oyv7eh] { background: rgba(239,68,68,.20); }

.sub-btn-resume[b-34d6oyv7eh] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 10px;
    border-radius: 8px;
    font-size: 12px;
    font-weight: 600;
    background: rgba(139,92,246,.10);
    color: #7c3aed;
    border: 1px solid rgba(139,92,246,.25);
    cursor: pointer;
    transition: background .15s;
    white-space: nowrap;
}

.sub-btn-resume:hover[b-34d6oyv7eh] { background: rgba(139,92,246,.20); }

/* ── Table ───────────────────────────────────────────────────────────────── */
.sub-table[b-34d6oyv7eh] { border-collapse: collapse; }

.sub-thead-row[b-34d6oyv7eh] {
    background: var(--page-bg);
    border-bottom: 2px solid var(--bar-border);
}

.sub-th[b-34d6oyv7eh] {
    padding: 10px 14px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--bar-sub);
    white-space: nowrap;
    text-align: left;
}

.sub-th-center[b-34d6oyv7eh] { text-align: center; }
.sub-th-right[b-34d6oyv7eh]  { text-align: right; }

.sub-td[b-34d6oyv7eh] {
    padding: 11px 14px;
    font-size: 13px;
    color: var(--bar-sub);
    border-top: 1px solid var(--bar-border);
    white-space: nowrap;
}

.sub-td-center[b-34d6oyv7eh] { text-align: center; }
.sub-td-right[b-34d6oyv7eh]  { text-align: right; }

.sub-tr[b-34d6oyv7eh] { transition: background .1s; }
.sub-tr:hover td[b-34d6oyv7eh] { background: var(--sb-hover-bg); }

/* ── Plan badges ─────────────────────────────────────────────────────────── */
.sub-plan-badge[b-34d6oyv7eh] {
    display: inline-flex;
    align-items: center;
    padding: 2px 10px;
    border-radius: 100px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .03em;
}

.sub-plan-starter[b-34d6oyv7eh]    { background: rgba(148,163,184,.15); color: #64748b; border: 1px solid rgba(148,163,184,.3); }
.sub-plan-business[b-34d6oyv7eh]   { background: rgb(var(--b500)/.12); color: rgb(var(--b600)); border: 1px solid rgb(var(--b500)/.25); }
.sub-plan-enterprise[b-34d6oyv7eh] { background: rgba(245,158,11,.12); color: #b45309; border: 1px solid rgba(245,158,11,.3); }

/* ── Days-remaining pill ─────────────────────────────────────────────────── */
.sub-days-pill[b-34d6oyv7eh] {
    display: inline-flex;
    align-items: center;
    padding: 3px 10px;
    border-radius: 100px;
    font-size: 11px;
    font-weight: 700;
}

.sub-days-ok[b-34d6oyv7eh]        { background: rgba(16,185,129,.12); color: #059669; border: 1px solid rgba(16,185,129,.25); }
.sub-days-expiring[b-34d6oyv7eh]  { background: rgba(245,158,11,.12); color: #b45309; border: 1px solid rgba(245,158,11,.3); }
.sub-days-expired[b-34d6oyv7eh]   { background: rgba(239,68,68,.12);  color: #dc2626; border: 1px solid rgba(239,68,68,.25); }
.sub-days-suspended[b-34d6oyv7eh] { background: rgba(139,92,246,.12); color: #7c3aed; border: 1px solid rgba(139,92,246,.25); }

/* ── Payment badges ──────────────────────────────────────────────────────── */
.sub-paid-badge[b-34d6oyv7eh] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 10px;
    border-radius: 100px;
    font-size: 11px;
    font-weight: 700;
    background: rgba(16,185,129,.12);
    color: #059669;
    border: 1px solid rgba(16,185,129,.25);
}

.sub-unpaid-badge[b-34d6oyv7eh] {
    display: inline-block;
    padding: 2px 10px;
    border-radius: 100px;
    font-size: 11px;
    font-weight: 700;
    background: rgba(239,68,68,.12);
    color: #dc2626;
    border: 1px solid rgba(239,68,68,.25);
}

/* ── Form inputs ─────────────────────────────────────────────────────────── */
.sub-input[b-34d6oyv7eh] {
    width: 100%;
    border: 1px solid var(--bar-border);
    border-radius: 10px;
    background: var(--page-bg);
    color: var(--bar-text);
    font-size: 13px;
    padding: 8px 12px;
    outline: none;
    transition: border-color .15s;
    resize: none;
}

.sub-input:focus[b-34d6oyv7eh] { border-color: rgb(var(--b400)); }

.sub-input-readonly[b-34d6oyv7eh] {
    display: flex;
    align-items: center;
    gap: 6px;
    width: 100%;
    border: 1px solid var(--bar-border);
    border-radius: 10px;
    background: var(--sb-hover-bg);
    color: var(--bar-text);
    font-size: 13px;
    font-weight: 500;
    padding: 8px 12px;
    min-height: 38px;
}

/* ── Settle modal info cell ──────────────────────────────────────────────── */
.sub-settle-info-cell[b-34d6oyv7eh] {
    padding: 10px 12px;
    border-radius: 10px;
    background: var(--page-bg);
    border: 1px solid var(--bar-border);
}

/* ── Modal shake ─────────────────────────────────────────────────────────── */
@keyframes sub-shake-kf-b-34d6oyv7eh {
    0%,100% { transform: translateX(0); }
    15%     { transform: translateX(-7px); }
    30%     { transform: translateX(7px); }
    45%     { transform: translateX(-5px); }
    60%     { transform: translateX(5px); }
    75%     { transform: translateX(-3px); }
    90%     { transform: translateX(3px); }
}

.sub-shake[b-34d6oyv7eh] {
    animation: sub-shake-kf-b-34d6oyv7eh 0.45s ease;
}

/* ── Filterable store dropdown ───────────────────────────────────────────── */
.sub-store-item[b-34d6oyv7eh] {
    background: transparent;
    border: none;
    cursor: pointer;
    transition: background .1s;
    width: 100%;
}

.sub-store-item:hover[b-34d6oyv7eh] {
    background: var(--sb-hover-bg);
}

.sub-store-item--selected[b-34d6oyv7eh] {
    background: rgb(var(--b500)/.1);
}

.sub-store-item--selected:hover[b-34d6oyv7eh] {
    background: rgb(var(--b500)/.16);
}

/* ── Mark-unpaid button ──────────────────────────────────────────────────── */
.sub-btn-unsettle[b-34d6oyv7eh] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 10px;
    border-radius: 8px;
    font-size: 12px;
    font-weight: 600;
    background: rgba(239,68,68,.10);
    color: #dc2626;
    border: 1px solid rgba(239,68,68,.25);
    cursor: pointer;
    transition: background .15s;
    white-space: nowrap;
}

.sub-btn-unsettle:hover[b-34d6oyv7eh] { background: rgba(239,68,68,.20); }

/* ── Confirm / submit button (used in modals) ────────────────────────────── */
.sub-btn-confirm[b-34d6oyv7eh] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 18px;
    border-radius: 10px;
    font-size: 13px;
    font-weight: 600;
    background: #4f46e5;
    color: #fff;
    border: none;
    cursor: pointer;
    transition: background .15s, transform .1s;
    white-space: nowrap;
}

.sub-btn-confirm:hover:not(:disabled)[b-34d6oyv7eh]  { background: #4338ca; }
.sub-btn-confirm:active:not(:disabled)[b-34d6oyv7eh] { transform: scale(.97); }
.sub-btn-confirm:disabled[b-34d6oyv7eh]              { opacity: .55; cursor: not-allowed; }

/* ── Renewal request button ──────────────────────────────────────────────── */
.sub-btn-renew[b-34d6oyv7eh] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 10px;
    border-radius: 8px;
    font-size: 12px;
    font-weight: 600;
    background: rgba(99,102,241,.10);
    color: #4f46e5;
    border: 1px solid rgba(99,102,241,.25);
    cursor: pointer;
    transition: background .15s;
    white-space: nowrap;
}

.sub-btn-renew:hover[b-34d6oyv7eh] { background: rgba(99,102,241,.20); }

/* ── Icon filled utility ─────────────────────────────────────────────────── */
.sub-icon-filled[b-34d6oyv7eh] { font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 20; }

/* ── Payment history button ──────────────────────────────────────────────── */
.sub-btn-history[b-34d6oyv7eh] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 3px;
    width: 30px;
    height: 30px;
    border-radius: 8px;
    background: transparent;
    color: var(--bar-sub);
    border: 1px solid var(--bar-border);
    cursor: pointer;
    transition: all .15s;
    position: relative;
}

.sub-btn-history:hover[b-34d6oyv7eh] { background: rgb(var(--b500)/.1); border-color: rgb(var(--b500)/.35); color: rgb(var(--b600)); }

.sub-history-badge[b-34d6oyv7eh] {
    position: absolute;
    top: -5px;
    right: -5px;
    min-width: 16px;
    height: 16px;
    padding: 0 3px;
    border-radius: 100px;
    font-size: 9px;
    font-weight: 800;
    background: rgb(var(--b600));
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}

/* ── Payment history modal ───────────────────────────────────────────────── */
.sub-history-modal[b-34d6oyv7eh] {
    background: var(--bar-bg);
    border: 1px solid var(--bar-border);
    border-radius: 18px;
    overflow: hidden;
    box-shadow: 0 32px 80px rgba(0,0,0,.5);
    width: min(720px, calc(100vw - 32px));
    max-height: 85vh;
    display: flex;
    flex-direction: column;
}

.sub-history-body[b-34d6oyv7eh] {
    max-height: calc(85vh - 60px);
    overflow-y: auto;
}

/* ── Payment method badges (inside history table) ────────────────────────── */
.sub-method-badge[b-34d6oyv7eh] {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    border-radius: 100px;
    font-size: 10px;
    font-weight: 700;
}

.sub-method-gcash[b-34d6oyv7eh]   { background: rgb(var(--b500)/.12); color: rgb(var(--b600)); border: 1px solid rgb(var(--b500)/.25); }
.sub-method-paymaya[b-34d6oyv7eh] { background: rgba(139,92,246,.12);  color: #7c3aed;          border: 1px solid rgba(139,92,246,.25); }

/* ── Receipt viewer button ───────────────────────────────────────────────── */
.sub-btn-receipt[b-34d6oyv7eh] {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 2px 8px;
    border-radius: 100px;
    font-size: 10px;
    font-weight: 700;
    background: rgba(16,185,129,.1);
    color: #059669;
    border: 1px solid rgba(16,185,129,.25);
    cursor: pointer;
    transition: background .15s;
    white-space: nowrap;
}

.sub-btn-receipt:hover[b-34d6oyv7eh] { background: rgba(16,185,129,.2); }

/* ── Receipt viewer modal ────────────────────────────────────────────────── */
.sub-receipt-modal[b-34d6oyv7eh] {
    background: var(--bar-bg);
    border: 1px solid var(--bar-border);
    border-radius: 18px;
    overflow: hidden;
    box-shadow: 0 32px 80px rgba(0,0,0,.5);
    width: min(460px, calc(100vw - 32px));
    max-height: 90vh;
    display: flex;
    flex-direction: column;
}

.sub-receipt-body[b-34d6oyv7eh] {
    max-height: calc(90vh - 60px);
    background: #0a0a0a;
}

.sub-receipt-img[b-34d6oyv7eh] {
    width: 100%;
    display: block;
    object-fit: contain;
}

/* ── Mobile ──────────────────────────────────────────────────────────────── */
@media (max-width: 639px) {
    .sub-kpi-card[b-34d6oyv7eh] { flex: 0 0 100%; max-width: 100%; }
}
/* _content/MiniMartBlazorPOS/Components/Pages/Catalog/BulkProductDialog.razor.rz.scp.css */
/* ═══════════════════════════════════════════════════════════════════════
   BulkProductDialog — scoped component styles
   All colors use the app's CSS variable system so light/dark/accent all work.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── Card (main dialog) ───────────────────────────────────────────────── */
.bpd-card[b-n06uj3nrmg] {
    position: relative;
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: 72rem;
    height: 88vh;
    max-height: 840px;
    background: var(--bar-bg);
    border: 1px solid var(--bar-border);
    border-radius: 1.25rem;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.3), 0 0 0 1px rgba(0,0,0,0.04);
    overflow: hidden;
}

/* ── Header ───────────────────────────────────────────────────────────── */
.bpd-header[b-n06uj3nrmg] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 1.5rem;
    border-bottom: 1px solid var(--bar-border);
    flex-shrink: 0;
}

.bpd-header-icon-wrap[b-n06uj3nrmg] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 0.625rem;
    background: rgb(var(--b50));
    color: rgb(var(--b600));
    flex-shrink: 0;
}

html.dark .bpd-header-icon-wrap[b-n06uj3nrmg] {
    background: rgb(var(--b900) / 0.3);
    color: rgb(var(--b400));
}

/* ── Count badge ──────────────────────────────────────────────────────── */
.bpd-count-badge[b-n06uj3nrmg] {
    display: inline-flex;
    align-items: center;
    padding: 0.25rem 0.75rem;
    background: rgb(var(--b50));
    color: rgb(var(--b600));
    border: 1px solid rgb(var(--b200));
    border-radius: 9999px;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.01em;
    animation: bpd-pop-b-n06uj3nrmg 0.18s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

html.dark .bpd-count-badge[b-n06uj3nrmg] {
    background: rgb(var(--b900) / 0.25);
    color: rgb(var(--b400));
    border-color: rgb(var(--b800) / 0.5);
}

@keyframes bpd-pop-b-n06uj3nrmg {
    from { transform: scale(0.75); opacity: 0; }
    to   { transform: scale(1);   opacity: 1; }
}

/* ── Input section ────────────────────────────────────────────────────── */
.bpd-input-section[b-n06uj3nrmg] {
    padding: 0.875rem 1.5rem;
    background: var(--page-bg);
    border-top: 1px solid var(--bar-border);
    flex-shrink: 0;
}

.bpd-input-row[b-n06uj3nrmg] {
    display: flex;
    align-items: flex-end;
    gap: 0.625rem;
    flex-wrap: wrap;
}

.bpd-field[b-n06uj3nrmg] {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    min-width: 0;
}

.bpd-field--lg[b-n06uj3nrmg]  { flex: 3;   min-width: 160px; }
.bpd-field--md[b-n06uj3nrmg]  { flex: 2;   min-width: 110px; }
.bpd-field--sm[b-n06uj3nrmg]  { flex: 1.5; min-width: 105px; }
.bpd-field--xs[b-n06uj3nrmg]  { flex: 1;   min-width: 68px;  }
.bpd-field--btn[b-n06uj3nrmg] { flex: 0 0 auto; }

.bpd-label[b-n06uj3nrmg] {
    font-size: 0.6875rem;
    font-weight: 600;
    color: var(--bar-sub);
    white-space: nowrap;
}

.bpd-input[b-n06uj3nrmg] {
    width: 100%;
    padding: 9px 0.75rem;
    border: 1px solid var(--bar-border);
    border-radius: 0.625rem;
    font-size: 0.8125rem;
    color: var(--bar-text);
    background: var(--bar-bg);
    transition: border-color 0.15s, box-shadow 0.15s;
    min-width: 0;
}

/* dark inputs are handled globally by app.css html.dark input rule */

.bpd-input:focus[b-n06uj3nrmg] {
    outline: none;
    border-color: rgb(var(--b600));
    box-shadow: 0 0 0 3px rgb(var(--b600) / 0.12);
}

.bpd-input:disabled[b-n06uj3nrmg] {
    opacity: 0.5;
    background: var(--page-bg);
    cursor: not-allowed;
}

.bpd-add-btn[b-n06uj3nrmg] {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 9px 1rem;
    background: #16a34a;
    color: #ffffff;
    border: none;
    border-radius: 0.625rem;
    font-size: 0.8125rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s, transform 0.1s, box-shadow 0.15s;
    white-space: nowrap;
    box-shadow: 0 1px 4px rgba(22, 163, 74, 0.3);
}

.bpd-add-btn:hover:not(:disabled)[b-n06uj3nrmg]  { background: #15803d; box-shadow: 0 2px 8px rgba(22, 163, 74, 0.35); }
.bpd-add-btn:active:not(:disabled)[b-n06uj3nrmg] { transform: scale(0.96); }
.bpd-add-btn:disabled[b-n06uj3nrmg]              { opacity: 0.5; cursor: not-allowed; }

/* ── Queue grid (scrollable) ─────────────────────────────────────────── */
.bpd-grid-section[b-n06uj3nrmg] {
    flex: 1;
    overflow-y: auto;
    min-height: 0;
}

/* ── Empty state ─────────────────────────────────────────────────────── */
.bpd-empty[b-n06uj3nrmg] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    padding: 3rem;
    text-align: center;
}

.bpd-empty-icon[b-n06uj3nrmg] {
    font-size: 3rem !important;
    color: var(--bar-border);
    display: block;
    margin-bottom: 0.75rem;
}

.bpd-empty-title[b-n06uj3nrmg] {
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--bar-sub);
    margin-bottom: 0.25rem;
}

.bpd-empty-sub[b-n06uj3nrmg] {
    font-size: 0.8125rem;
    color: var(--bar-border);
}

html.dark .bpd-empty-sub[b-n06uj3nrmg] {
    color: var(--bar-sub);
}

/* ── Queue table ─────────────────────────────────────────────────────── */
.bpd-table[b-n06uj3nrmg] {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.8125rem;
}

.bpd-th[b-n06uj3nrmg] {
    position: sticky;
    top: 0;
    z-index: 1;
    padding: 0.5625rem 1rem;
    text-align: left;
    font-size: 0.6875rem;
    font-weight: 600;
    color: var(--bar-sub);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    background: var(--page-bg);
    border-bottom: 1px solid var(--bar-border);
    white-space: nowrap;
}

.bpd-th--right[b-n06uj3nrmg]  { text-align: right; }
.bpd-th--center[b-n06uj3nrmg] { text-align: center; }

.bpd-row[b-n06uj3nrmg] {
    border-bottom: 1px solid var(--bar-border);
    transition: background 0.1s;
    animation: bpd-row-in-b-n06uj3nrmg 0.18s ease both;
}

@keyframes bpd-row-in-b-n06uj3nrmg {
    from { opacity: 0; transform: translateY(-3px); }
    to   { opacity: 1; transform: translateY(0); }
}

.bpd-row:hover[b-n06uj3nrmg] { background: rgba(0, 0, 0, 0.025); }
html.dark .bpd-row:hover[b-n06uj3nrmg] { background: rgba(255, 255, 255, 0.04); }

.bpd-td[b-n06uj3nrmg] {
    padding: 0.5625rem 1rem;
    color: var(--bar-sub);
    vertical-align: middle;
}

.bpd-td--num[b-n06uj3nrmg]    { color: var(--bar-sub); font-size: 0.75rem; font-weight: 700; width: 2.5rem; opacity: 0.6; }
.bpd-td--right[b-n06uj3nrmg]  { text-align: right; }
.bpd-td--center[b-n06uj3nrmg] { text-align: center; }

.bpd-remove-btn[b-n06uj3nrmg] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border: none;
    border-radius: 0.5rem;
    background: transparent;
    color: var(--bar-sub);
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
}

.bpd-remove-btn:hover:not(:disabled)[b-n06uj3nrmg]  { background: rgba(239, 68, 68, 0.12); color: #ef4444; }
html.dark .bpd-remove-btn:hover:not(:disabled)[b-n06uj3nrmg] { background: rgba(239, 68, 68, 0.18); color: #fb7185; }
.bpd-remove-btn:active:not(:disabled)[b-n06uj3nrmg] { transform: scale(0.93); }
.bpd-remove-btn:disabled[b-n06uj3nrmg]              { opacity: 0.4; cursor: not-allowed; }

/* ── Footer ──────────────────────────────────────────────────────────── */
.bpd-footer[b-n06uj3nrmg] {
    display: flex;
    align-items: center;
    padding: 0.875rem 1.5rem;
    border-top: 1px solid var(--bar-border);
    background: var(--bar-bg);
    flex-shrink: 0;
    gap: 0.75rem;
}

.bpd-save-btn[b-n06uj3nrmg] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1.25rem;
    background: rgb(var(--b600));
    color: #ffffff;
    border: none;
    border-radius: 0.75rem;
    font-size: 0.875rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s, transform 0.1s, opacity 0.15s, box-shadow 0.15s;
    box-shadow: 0 2px 8px rgb(var(--b600) / 0.3);
    white-space: nowrap;
}

.bpd-save-btn:hover:not(:disabled)[b-n06uj3nrmg]  { background: rgb(var(--b700)); box-shadow: 0 4px 14px rgb(var(--b600) / 0.35); }
.bpd-save-btn:active:not(:disabled)[b-n06uj3nrmg] { transform: scale(0.97); }
.bpd-save-btn:disabled[b-n06uj3nrmg]              { opacity: 0.5; cursor: not-allowed; box-shadow: none; }

/* ═══════════════════════════════════════════════════════════════════════
   Processing Overlay
   ═══════════════════════════════════════════════════════════════════════ */
.bpd-processing-overlay[b-n06uj3nrmg] {
    position: absolute;
    inset: 0;
    z-index: 20;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(248, 250, 252, 0.9);
    backdrop-filter: blur(10px);
    border-radius: 1.25rem;
    animation: bpd-fade-in-b-n06uj3nrmg 0.2s ease both;
}

html.dark .bpd-processing-overlay[b-n06uj3nrmg] {
    background: rgba(15, 23, 42, 0.92);
}

@keyframes bpd-fade-in-b-n06uj3nrmg {
    from { opacity: 0; }
    to   { opacity: 1; }
}

.bpd-processing-card[b-n06uj3nrmg] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.125rem;
    padding: 2.5rem 3.5rem;
    background: var(--bar-bg);
    border: 1px solid var(--bar-border);
    border-radius: 1.5rem;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.2), 0 0 0 1px rgba(0,0,0,0.04);
    text-align: center;
    animation: bpd-card-in-b-n06uj3nrmg 0.3s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

@keyframes bpd-card-in-b-n06uj3nrmg {
    from { transform: scale(0.9); opacity: 0; }
    to   { transform: scale(1);   opacity: 1; }
}

.bpd-processing-title[b-n06uj3nrmg] {
    font-size: 1.0625rem;
    font-weight: 700;
    color: var(--bar-text);
    margin: 0;
}

.bpd-processing-sub[b-n06uj3nrmg] {
    font-size: 0.8125rem;
    color: var(--bar-sub);
    margin: 0;
}

/* ── Ring spinner (uses brand accent color) ───────────────────────────── */
.bpd-ring[b-n06uj3nrmg] {
    display: inline-block;
    position: relative;
    width: 68px;
    height: 68px;
}

.bpd-ring div[b-n06uj3nrmg] {
    box-sizing: border-box;
    display: block;
    position: absolute;
    width: 54px;
    height: 54px;
    margin: 7px;
    border: 5px solid transparent;
    border-radius: 50%;
    animation: bpd-ring-spin-b-n06uj3nrmg 1.25s cubic-bezier(0.5, 0, 0.5, 1) infinite;
}

.bpd-ring div:nth-child(1)[b-n06uj3nrmg] { border-top-color: rgb(var(--b600)); animation-delay: -0.45s; }
.bpd-ring div:nth-child(2)[b-n06uj3nrmg] { border-top-color: rgb(var(--b500)); animation-delay: -0.3s;  }
.bpd-ring div:nth-child(3)[b-n06uj3nrmg] { border-top-color: rgb(var(--b400)); animation-delay: -0.15s; }
.bpd-ring div:nth-child(4)[b-n06uj3nrmg] { border-top-color: rgb(var(--b300)); }

@keyframes bpd-ring-spin-b-n06uj3nrmg {
    0%   { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* ── Bouncing dots (uses brand accent color) ──────────────────────────── */
.bpd-dots[b-n06uj3nrmg] {
    display: flex;
    gap: 0.4rem;
}

.bpd-dots span[b-n06uj3nrmg] {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: rgb(var(--b600));
    animation: bpd-dot-bounce-b-n06uj3nrmg 1.4s infinite ease-in-out both;
}

.bpd-dots span:nth-child(1)[b-n06uj3nrmg] { animation-delay: -0.32s; }
.bpd-dots span:nth-child(2)[b-n06uj3nrmg] { animation-delay: -0.16s; }
.bpd-dots span:nth-child(3)[b-n06uj3nrmg] { animation-delay: 0s;     }

@keyframes bpd-dot-bounce-b-n06uj3nrmg {
    0%, 80%, 100% { transform: scale(0);   opacity: 0.3; }
    40%           { transform: scale(1.1); opacity: 1;   }
}
/* _content/MiniMartBlazorPOS/Components/Pages/Chat/Chat.razor.rz.scp.css */
/* ── Root layout ───────────────────────────────────────────────────────────── */
.ct-root[b-m8iqydskt1] {
    display: flex;
    gap: 0;
    height: calc(100vh - 178px);
    min-height: 420px;
    background: var(--bar-bg);
    border: 1px solid var(--bar-border);
    border-radius: 20px;
    overflow: hidden;
}

/* ── Sidebar ──────────────────────────────────────────────────────────────── */
.ct-sidebar[b-m8iqydskt1] {
    width: 260px;
    flex-shrink: 0;
    border-right: 1px solid var(--bar-border);
    display: flex;
    flex-direction: column;
    background: var(--sb-bg);
    overflow-y: auto;
    overflow-x: hidden;
}

/* New Chat button area */
.ct-sidebar-actions[b-m8iqydskt1] {
    padding: 12px 12px 8px;
    flex-shrink: 0;
}

.ct-new-chat-btn[b-m8iqydskt1] {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    border-radius: 10px;
    border: 1px dashed var(--bar-border);
    background: transparent;
    color: rgb(var(--b600));
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: background .15s, border-color .15s;
}

.ct-new-chat-btn:hover[b-m8iqydskt1] {
    background: rgb(var(--b50) / .8);
    border-color: rgb(var(--b400));
}

/* Section headers */
.ct-conv-section-header[b-m8iqydskt1] {
    padding: 8px 14px 4px;
    font-size: 10.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .07em;
    color: var(--bar-sub);
    flex-shrink: 0;
}

.ct-conv-empty[b-m8iqydskt1] {
    padding: 6px 14px 8px;
    font-size: 12px;
    color: var(--bar-sub);
    font-style: italic;
}

/* Conversation items */
.ct-conv-item[b-m8iqydskt1] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    width: 100%;
    border: none;
    background: transparent;
    cursor: pointer;
    text-align: left;
    transition: background .12s;
    border-radius: 0;
    position: relative;
}

.ct-conv-item:hover[b-m8iqydskt1] {
    background: var(--sb-hover-bg);
}

.ct-conv-active[b-m8iqydskt1] {
    background: rgb(var(--b600) / .1) !important;
    border-left: 3px solid rgb(var(--b600));
    padding-left: 9px;
}

/* Avatars */
.ct-conv-avatar[b-m8iqydskt1] {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: rgb(var(--b600));
    color: #fff;
    font-size: 14px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    position: relative;
}

.ct-conv-avatar-group[b-m8iqydskt1] {
    background: rgb(var(--b100) / 1);
    color: rgb(var(--b700));
    border-radius: 10px;
}

/* Online dot */
.ct-online-dot[b-m8iqydskt1] {
    position: absolute;
    bottom: 0;
    right: 0;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: #22c55e;
    border: 2px solid var(--sb-bg);
}

.ct-online-dot-lg[b-m8iqydskt1] {
    width: 11px;
    height: 11px;
    border-width: 2px;
}

/* Conversation info */
.ct-conv-info[b-m8iqydskt1] {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.ct-conv-name[b-m8iqydskt1] {
    font-size: 13px;
    font-weight: 600;
    color: var(--bar-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ct-conv-preview[b-m8iqydskt1] {
    font-size: 11.5px;
    color: var(--bar-sub);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Unread badge */
.ct-conv-badge[b-m8iqydskt1] {
    flex-shrink: 0;
    background: rgb(var(--b600));
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    border-radius: 999px;
    padding: 1px 6px;
    min-width: 18px;
    text-align: center;
}

/* Info button on group items */
.ct-conv-info-btn[b-m8iqydskt1] {
    width: 22px;
    height: 22px;
    border-radius: 6px;
    border: none;
    background: transparent;
    color: var(--bar-sub);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    opacity: 0;
    transition: opacity .15s, background .15s, color .15s;
}

.ct-conv-item:hover .ct-conv-info-btn[b-m8iqydskt1],
.ct-conv-active .ct-conv-info-btn[b-m8iqydskt1] {
    opacity: 1;
}

.ct-conv-info-btn:hover[b-m8iqydskt1] {
    background: rgba(0, 0, 0, .08);
    color: rgb(var(--b600));
}

/* ── Group info overlay + panel ───────────────────────────────────────────── */
.ct-gi-overlay[b-m8iqydskt1] {
    position: fixed;
    inset: 0;
    z-index: 500;
    background: rgba(0, 0, 0, .45);
    backdrop-filter: blur(4px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
}

.ct-gi-panel[b-m8iqydskt1] {
    background: var(--bar-bg);
    border: 1px solid var(--bar-border);
    border-radius: 20px;
    width: 100%;
    max-width: 360px;
    max-height: 80vh;
    display: flex;
    flex-direction: column;
    box-shadow: 0 24px 64px rgba(0,0,0,.35);
    overflow: hidden;
    animation: modalIn-b-m8iqydskt1 .15s ease-out;
}

.ct-gi-panel-header[b-m8iqydskt1] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px 12px;
    border-bottom: 1px solid var(--bar-border);
    flex-shrink: 0;
}

.ct-gi-panel-title[b-m8iqydskt1] {
    font-size: 16px;
    font-weight: 700;
    color: var(--bar-text);
}

/* Hero section */
.ct-gi-hero[b-m8iqydskt1] {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 24px 20px 18px;
    border-bottom: 1px solid var(--bar-border);
    flex-shrink: 0;
}


.ct-gi-avatar[b-m8iqydskt1] {
    width: 64px;
    height: 64px;
    border-radius: 18px;
    background: rgb(var(--b100) / 1);
    color: rgb(var(--b700));
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 12px;
}

.ct-gi-name[b-m8iqydskt1] {
    font-size: 18px;
    font-weight: 700;
    color: var(--bar-text);
    text-align: center;
}

.ct-gi-count[b-m8iqydskt1] {
    font-size: 13px;
    color: var(--bar-sub);
    margin-top: 3px;
}

/* Edit name row */
.ct-gi-name-row[b-m8iqydskt1] {
    display: flex;
    align-items: center;
    gap: 6px;
}

.ct-gi-edit-name-btn[b-m8iqydskt1] {
    width: 26px;
    height: 26px;
    border-radius: 7px;
    border: none;
    background: transparent;
    color: var(--bar-sub);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background .15s, color .15s;
}

.ct-gi-edit-name-btn:hover[b-m8iqydskt1] {
    background: var(--sb-hover-bg);
    color: rgb(var(--b600));
}

.ct-gi-name-edit-row[b-m8iqydskt1] {
    display: flex;
    align-items: center;
    gap: 6px;
    width: 100%;
    padding: 0 16px;
    box-sizing: border-box;
}

.ct-gi-name-input[b-m8iqydskt1] {
    flex: 1;
    padding: 6px 10px;
    border-radius: 8px;
    border: 1px solid rgb(var(--b500));
    background: var(--sb-hover-bg);
    color: var(--bar-text);
    font-size: 15px;
    font-weight: 700;
    text-align: center;
    outline: none;
    box-shadow: 0 0 0 3px rgb(var(--b100) / .5);
}

.ct-gi-name-save-btn[b-m8iqydskt1],
.ct-gi-name-cancel-btn[b-m8iqydskt1] {
    width: 30px;
    height: 30px;
    border-radius: 8px;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: background .15s;
}

.ct-gi-name-save-btn[b-m8iqydskt1] {
    background: rgb(var(--b600));
    color: #fff;
}

.ct-gi-name-save-btn:hover[b-m8iqydskt1]  { background: rgb(var(--b700)); }

.ct-gi-name-cancel-btn[b-m8iqydskt1] {
    background: var(--sb-hover-bg);
    color: var(--bar-sub);
    border: 1px solid var(--bar-border);
}

.ct-gi-name-cancel-btn:hover[b-m8iqydskt1] { background: var(--bar-border); color: var(--bar-text); }

/* Remove member button */
.ct-gi-remove-member-btn[b-m8iqydskt1] {
    width: 24px;
    height: 24px;
    border-radius: 6px;
    border: none;
    background: transparent;
    color: var(--bar-sub);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    opacity: 0;
    transition: opacity .15s, background .15s, color .15s;
}

.ct-gi-member-row:hover .ct-gi-remove-member-btn[b-m8iqydskt1] { opacity: 1; }

.ct-gi-remove-member-btn:hover[b-m8iqydskt1] {
    background: rgba(239, 68, 68, .1);
    color: #ef4444;
}

/* Footer: delete group */
.ct-gi-footer[b-m8iqydskt1] {
    padding: 12px 16px;
    border-top: 1px solid var(--bar-border);
    flex-shrink: 0;
}

.ct-gi-delete-btn[b-m8iqydskt1] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: 100%;
    padding: 8px 14px;
    border-radius: 10px;
    border: 1px solid rgba(239, 68, 68, .35);
    background: transparent;
    color: #ef4444;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: background .15s, border-color .15s;
}

.ct-gi-delete-btn:hover[b-m8iqydskt1] {
    background: rgba(239, 68, 68, .08);
    border-color: #ef4444;
}

/* Inline delete confirmation */
.ct-gi-confirm[b-m8iqydskt1] {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.ct-gi-confirm-text[b-m8iqydskt1] {
    font-size: 13px;
    color: var(--bar-text);
    text-align: center;
    line-height: 1.4;
}

.ct-gi-confirm-btns[b-m8iqydskt1] {
    display: flex;
    gap: 8px;
}

.ct-gi-confirm-cancel[b-m8iqydskt1] {
    flex: 1;
    padding: 8px;
    border-radius: 9px;
    border: 1px solid var(--bar-border);
    background: transparent;
    color: var(--bar-sub);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: background .15s, color .15s;
}

.ct-gi-confirm-cancel:hover[b-m8iqydskt1]  { background: var(--sb-hover-bg); color: var(--bar-text); }

.ct-gi-confirm-delete[b-m8iqydskt1] {
    flex: 1;
    padding: 8px;
    border-radius: 9px;
    border: none;
    background: #ef4444;
    color: #fff;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    transition: background .15s;
}

.ct-gi-confirm-delete:hover[b-m8iqydskt1]  { background: #dc2626; }

/* Members list */
.ct-gi-body[b-m8iqydskt1] {
    flex: 1;
    overflow-y: auto;
    padding: 12px 8px;
}

.ct-gi-section-label[b-m8iqydskt1] {
    font-size: 10.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .07em;
    color: var(--bar-sub);
    padding: 0 6px 8px;
}

.ct-gi-member-row[b-m8iqydskt1] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 7px 10px;
    border-radius: 10px;
    transition: background .12s;
}

.ct-gi-member-row:hover[b-m8iqydskt1] { background: var(--sb-hover-bg); }

.ct-gi-member-name[b-m8iqydskt1] {
    flex: 1;
    font-size: 13px;
    font-weight: 500;
    color: var(--bar-text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ct-gi-badges[b-m8iqydskt1] {
    display: flex;
    gap: 4px;
    flex-shrink: 0;
}

.ct-gi-badge[b-m8iqydskt1] {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    font-size: 10px;
    font-weight: 700;
    padding: 2px 7px;
    border-radius: 999px;
    line-height: 1.5;
}

.ct-gi-badge-org[b-m8iqydskt1] {
    background: rgba(234, 179, 8, .15);
    color: #a16207;
}

.ct-gi-badge-you[b-m8iqydskt1] {
    background: rgb(var(--b600) / .12);
    color: rgb(var(--b700));
}

/* ── Main area ─────────────────────────────────────────────────────────────── */
.ct-main[b-m8iqydskt1] {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

/* No conversation selected */
.ct-no-conv[b-m8iqydskt1] {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0;
}

.ct-no-conv-icon[b-m8iqydskt1] {
    color: var(--bar-sub);
    opacity: .45;
    margin-bottom: 16px;
}

.ct-no-conv-title[b-m8iqydskt1] {
    font-size: 15px;
    font-weight: 500;
    color: var(--bar-text);
    opacity: .7;
}

.ct-no-conv-link[b-m8iqydskt1] {
    margin-top: 6px;
    font-size: 13px;
    font-weight: 600;
    color: rgb(var(--b500));
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    transition: color .15s, text-decoration .15s;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.ct-no-conv-link:hover[b-m8iqydskt1] { color: rgb(var(--b600)); }

/* Animated typing dots on the SVG */
.ct-dot-1[b-m8iqydskt1] { animation: ct-dot-bounce-b-m8iqydskt1 .9s ease-in-out -.2s infinite; }
.ct-dot-2[b-m8iqydskt1] { animation: ct-dot-bounce-b-m8iqydskt1 .9s ease-in-out     0s infinite; }
.ct-dot-3[b-m8iqydskt1] { animation: ct-dot-bounce-b-m8iqydskt1 .9s ease-in-out  .2s infinite; }

@keyframes ct-dot-bounce-b-m8iqydskt1 {
    0%, 60%, 100% { transform: translateY(0);   opacity: .35; }
    30%            { transform: translateY(-5px); opacity: 1;   }
}

/* ── Conversation header ───────────────────────────────────────────────────── */
.ct-chat-header[b-m8iqydskt1] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    border-bottom: 1px solid var(--bar-border);
    background: var(--bar-bg);
    flex-shrink: 0;
}

.ct-chat-header-avatar[b-m8iqydskt1] {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: rgb(var(--b600));
    color: #fff;
    font-size: 15px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    position: relative;
}

.ct-chat-header-avatar.ct-conv-avatar-group[b-m8iqydskt1] {
    border-radius: 11px;
}

.ct-chat-header-info[b-m8iqydskt1] {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.ct-chat-header-name[b-m8iqydskt1] {
    font-size: 15px;
    font-weight: 700;
    color: var(--bar-text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ct-chat-header-sub[b-m8iqydskt1] {
    font-size: 11.5px;
    color: var(--bar-sub);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ── Messages ─────────────────────────────────────────────────────────────── */
.ct-messages[b-m8iqydskt1] {
    flex: 1;
    overflow-y: auto;
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.ct-loading[b-m8iqydskt1],
.ct-empty[b-m8iqydskt1] {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    color: var(--bar-sub);
    font-size: 14px;
}

/* ── Message rows ─────────────────────────────────────────────────────────── */
.ct-msg-row[b-m8iqydskt1] {
    display: flex;
    align-items: flex-end;
    gap: 8px;
}

.ct-msg-row-me[b-m8iqydskt1] {
    flex-direction: row-reverse;
}

.ct-msg-avatar[b-m8iqydskt1] {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: var(--sb-hover-bg);
    color: var(--bar-text);
    font-size: 12px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    border: 1px solid var(--bar-border);
}

.ct-msg-body[b-m8iqydskt1] {
    display: flex;
    flex-direction: column;
    max-width: 65%;
}

.ct-msg-row-me .ct-msg-body[b-m8iqydskt1] {
    align-items: flex-end;
}

.ct-msg-sender[b-m8iqydskt1] {
    font-size: 11px;
    font-weight: 600;
    color: var(--bar-sub);
    margin-bottom: 3px;
    padding-left: 4px;
}

.ct-bubble[b-m8iqydskt1] {
    padding: 8px 12px;
    border-radius: 14px;
    font-size: 14px;
    line-height: 1.45;
    word-break: break-word;
}

.ct-bubble-me[b-m8iqydskt1] {
    background: rgb(var(--b600));
    color: #fff;
    border-bottom-right-radius: 4px;
}

.ct-bubble-other[b-m8iqydskt1] {
    background: var(--sb-hover-bg);
    color: var(--bar-text);
    border: 1px solid var(--bar-border);
    border-bottom-left-radius: 4px;
}

.ct-msg-time[b-m8iqydskt1] {
    font-size: 10px;
    color: var(--bar-sub);
    margin-top: 3px;
    padding: 0 4px;
}

/* ── Input bar ────────────────────────────────────────────────────────────── */
.ct-input-row[b-m8iqydskt1] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 16px;
    border-top: 1px solid var(--bar-border);
    background: var(--bar-bg);
    flex-shrink: 0;
}

.ct-input[b-m8iqydskt1] {
    flex: 1;
    padding: 9px 14px;
    border-radius: 999px;
    border: 1px solid var(--bar-border);
    background: var(--sb-hover-bg);
    color: var(--bar-text);
    font-size: 14px;
    outline: none;
    transition: border-color .2s, box-shadow .2s;
}

.ct-input:focus[b-m8iqydskt1] {
    border-color: rgb(var(--b500));
    box-shadow: 0 0 0 3px rgb(var(--b100) / .5);
}

.ct-input[b-m8iqydskt1]::placeholder {
    color: var(--bar-sub);
}

.ct-send-btn[b-m8iqydskt1] {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: rgb(var(--b600));
    color: #fff;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: background .2s, transform .1s;
}

.ct-send-btn:hover:not(:disabled)[b-m8iqydskt1] { background: rgb(var(--b700)); }
.ct-send-btn:active:not(:disabled)[b-m8iqydskt1] { transform: scale(.92); }
.ct-send-btn:disabled[b-m8iqydskt1] { opacity: .4; cursor: not-allowed; }

/* ── Call button ──────────────────────────────────────────────────────────── */
.ct-call-btn[b-m8iqydskt1] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 16px;
    border-radius: 10px;
    border: none;
    background: rgb(var(--b600));
    color: #fff;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: background .2s, transform .1s;
    flex-shrink: 0;
}

.ct-call-btn:hover:not(:disabled)[b-m8iqydskt1] { background: rgb(var(--b700)); }
.ct-call-btn:active:not(:disabled)[b-m8iqydskt1] { transform: scale(.96); }
.ct-call-btn:disabled[b-m8iqydskt1] { opacity: .45; cursor: not-allowed; }

/* Clear-chat icon button in the conversation header */
.ct-icon-btn[b-m8iqydskt1] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border: none;
    border-radius: 8px;
    background: transparent;
    color: var(--bar-sub);
    cursor: pointer;
    transition: background .15s, color .15s;
    flex-shrink: 0;
}
.ct-icon-btn:hover[b-m8iqydskt1] { background: rgba(239,68,68,.1); color: rgb(239,68,68); }

/* Per-message delete button — hidden by default, revealed on row hover */
.ct-delete-btn[b-m8iqydskt1] {
    display: none;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border: none;
    border-radius: 50%;
    background: transparent;
    color: var(--bar-sub);
    cursor: pointer;
    transition: background .15s, color .15s;
    padding: 0;
    align-self: center;
    flex-shrink: 0;
}
.ct-delete-btn .material-symbols-outlined[b-m8iqydskt1] { font-size: 16px; }
.ct-delete-btn:hover[b-m8iqydskt1] { background: rgba(239,68,68,.12); color: rgb(239,68,68); }

/* Show on wrapper hover */
.ct-msg-wrapper:hover .ct-delete-btn[b-m8iqydskt1] { display: flex; }

/* ── Camera/mic error banner ─────────────────────────────────────────────── */
.ct-call-error-banner[b-m8iqydskt1] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    background: rgba(239,68,68,.1);
    border-bottom: 1px solid rgba(239,68,68,.25);
    color: rgb(220,50,50);
    font-size: 13px;
    line-height: 1.4;
}
.ct-call-error-close[b-m8iqydskt1] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    cursor: pointer;
    color: inherit;
    opacity: .7;
    padding: 2px;
    flex-shrink: 0;
}
.ct-call-error-close:hover[b-m8iqydskt1] { opacity: 1; }

/* ── Modal ────────────────────────────────────────────────────────────────── */
.ct-modal-overlay[b-m8iqydskt1] {
    position: fixed;
    inset: 0;
    z-index: 400;
    background: rgba(0, 0, 0, .45);
    backdrop-filter: blur(4px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
}

.ct-modal[b-m8iqydskt1] {
    background: var(--bar-bg);
    border: 1px solid var(--bar-border);
    border-radius: 20px;
    width: 100%;
    max-width: 420px;
    max-height: 80vh;
    display: flex;
    flex-direction: column;
    box-shadow: 0 24px 64px rgba(0,0,0,.35);
    overflow: hidden;
    animation: modalIn-b-m8iqydskt1 .15s ease-out;
}

@keyframes modalIn-b-m8iqydskt1 {
    from { opacity: 0; transform: scale(.96) translateY(8px); }
    to   { opacity: 1; transform: scale(1) translateY(0); }
}

.ct-modal-header[b-m8iqydskt1] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px 12px;
    border-bottom: 1px solid var(--bar-border);
    flex-shrink: 0;
}

.ct-modal-title[b-m8iqydskt1] {
    font-size: 16px;
    font-weight: 700;
    color: var(--bar-text);
}

.ct-modal-close[b-m8iqydskt1] {
    width: 30px;
    height: 30px;
    border-radius: 8px;
    border: none;
    background: transparent;
    color: var(--bar-sub);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background .15s;
}

.ct-modal-close:hover[b-m8iqydskt1] { background: var(--sb-hover-bg); }

/* Tabs */
.ct-modal-tabs[b-m8iqydskt1] {
    display: flex;
    gap: 4px;
    padding: 10px 16px 0;
    flex-shrink: 0;
    border-bottom: 1px solid var(--bar-border);
}

.ct-modal-tab[b-m8iqydskt1] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 7px 14px 9px;
    border: none;
    background: transparent;
    color: var(--bar-sub);
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    transition: color .15s, border-color .15s;
}

.ct-modal-tab:hover[b-m8iqydskt1] { color: var(--bar-text); }

.ct-modal-tab-active[b-m8iqydskt1] {
    color: rgb(var(--b600)) !important;
    border-bottom-color: rgb(var(--b600)) !important;
    font-weight: 600;
}

/* Body */
.ct-modal-body[b-m8iqydskt1] {
    flex: 1;
    overflow-y: auto;
    padding: 12px 8px;
}

/* User select rows */
.ct-user-select-row[b-m8iqydskt1] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 12px;
    width: 100%;
    border: none;
    background: transparent;
    cursor: pointer;
    text-align: left;
    border-radius: 10px;
    transition: background .12s;
}

.ct-user-select-row:hover[b-m8iqydskt1] { background: var(--sb-hover-bg); }

.ct-user-select-active[b-m8iqydskt1] {
    background: rgb(var(--b600) / .08) !important;
}

.ct-form-label[b-m8iqydskt1] {
    font-size: 11.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--bar-sub);
    display: block;
}

/* Footer */
.ct-modal-footer[b-m8iqydskt1] {
    padding: 12px 16px;
    border-top: 1px solid var(--bar-border);
    flex-shrink: 0;
}

/* ── Emoji input picker ───────────────────────────────────────────────────── */
.ct-emoji-wrap[b-m8iqydskt1] {
    position: relative;
    flex-shrink: 0;
}

.ct-emoji-trigger[b-m8iqydskt1] {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: none;
    background: transparent;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background .15s, transform .1s;
    flex-shrink: 0;
}

.ct-emoji-trigger:hover[b-m8iqydskt1]     { background: var(--sb-hover-bg); transform: scale(1.15); }
.ct-emoji-trigger:active[b-m8iqydskt1]    { transform: scale(.92); }
.ct-emoji-trigger-active[b-m8iqydskt1]    { background: rgb(var(--b50) / .8); }

.ct-emoji-panel[b-m8iqydskt1] {
    position: absolute;
    bottom: calc(100% + 8px);
    left: 0;
    width: 240px;
    background: var(--bar-bg);
    border: 1px solid var(--bar-border);
    border-radius: 14px;
    box-shadow: 0 8px 24px rgba(0,0,0,.2);
    padding: 8px;
    display: grid;
    grid-template-columns: repeat(8, 1fr);
    gap: 2px;
    z-index: 41;
    animation: ct-panel-in-b-m8iqydskt1 .12s ease-out;
}

@keyframes ct-panel-in-b-m8iqydskt1 {
    from { opacity: 0; transform: translateY(4px) scale(.97); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}

.ct-emoji-btn[b-m8iqydskt1] {
    width: 28px;
    height: 28px;
    border: none;
    background: transparent;
    border-radius: 6px;
    cursor: pointer;
    font-size: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background .1s, transform .1s;
}

.ct-emoji-btn:hover[b-m8iqydskt1]  { background: var(--sb-hover-bg); transform: scale(1.2); }
.ct-emoji-btn:active[b-m8iqydskt1] { transform: scale(.9); }

/* ── Message wrapper + reaction trigger ───────────────────────────────────── */
.ct-msg-wrapper[b-m8iqydskt1] {
    position: relative;
    display: inline-flex;
    align-items: flex-end;
    gap: 4px;
    max-width: 100%;
}

.ct-reaction-trigger[b-m8iqydskt1] {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    border: 1px solid var(--bar-border);
    background: var(--bar-bg);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    flex-shrink: 0;
    align-self: flex-end;
    opacity: 0;
    transition: opacity .15s, transform .1s, background .15s;
    z-index: 1;
}

.ct-msg-wrapper:hover .ct-reaction-trigger[b-m8iqydskt1],
.ct-reaction-trigger-open[b-m8iqydskt1] {
    opacity: 1 !important;
}

.ct-reaction-trigger:hover[b-m8iqydskt1]  { background: var(--sb-hover-bg); transform: scale(1.1); }
.ct-reaction-trigger:active[b-m8iqydskt1] { transform: scale(.9); }

/* Reaction picker panel */
.ct-reaction-picker[b-m8iqydskt1] {
    position: absolute;
    bottom: calc(100% + 6px);
    left: 0;
    display: flex;
    gap: 3px;
    padding: 6px 8px;
    background: var(--bar-bg);
    border: 1px solid var(--bar-border);
    border-radius: 999px;
    box-shadow: 0 4px 16px rgba(0,0,0,.18);
    z-index: 41;
    animation: ct-panel-in-b-m8iqydskt1 .12s ease-out;
    white-space: nowrap;
}

.ct-reaction-picker-me[b-m8iqydskt1] {
    left: auto;
    right: 0;
}

.ct-reaction-emoji-btn[b-m8iqydskt1] {
    width: 32px;
    height: 32px;
    border: none;
    background: transparent;
    border-radius: 50%;
    cursor: pointer;
    font-size: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background .1s, transform .15s;
}

.ct-reaction-emoji-btn:hover[b-m8iqydskt1]  { background: var(--sb-hover-bg); transform: scale(1.3); }
.ct-reaction-emoji-btn:active[b-m8iqydskt1] { transform: scale(.9); }

/* Reactions bar (below message bubble) */
.ct-reaction-bar[b-m8iqydskt1] {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-top: 4px;
}

.ct-reaction-chip[b-m8iqydskt1] {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 2px 8px;
    border-radius: 999px;
    border: 1px solid var(--bar-border);
    background: var(--sb-hover-bg);
    cursor: pointer;
    font-size: 13px;
    transition: background .12s, border-color .12s, transform .1s;
}

.ct-reaction-chip:hover[b-m8iqydskt1]  { background: rgb(var(--b50) / .8); border-color: rgb(var(--b300)); }
.ct-reaction-chip:active[b-m8iqydskt1] { transform: scale(.94); }

.ct-reaction-chip-mine[b-m8iqydskt1] {
    background: rgb(var(--b600) / .12) !important;
    border-color: rgb(var(--b400)) !important;
}

.ct-reaction-count[b-m8iqydskt1] {
    font-size: 11px;
    font-weight: 700;
    color: var(--bar-sub);
}

.ct-reaction-chip-mine .ct-reaction-count[b-m8iqydskt1] {
    color: rgb(var(--b600));
}

/* ── Call overlay ─────────────────────────────────────────────────────────── */
.ct-call-overlay[b-m8iqydskt1] {
    position: fixed;
    inset: 0;
    z-index: 1000;
    background: #090e1a;
    display: flex;
    flex-direction: column;
}

.ct-call-header[b-m8iqydskt1] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 20px;
    flex-shrink: 0;
    width: 100%;
    border-bottom: 1px solid rgba(255,255,255,.07);
    background: rgba(255,255,255,.03);
}

.ct-call-header-icon[b-m8iqydskt1]  { color: #60a5fa; font-size: 20px; }
.ct-call-header-title[b-m8iqydskt1] { color: #fff; font-size: 15px; font-weight: 700; }
.ct-call-header-sub[b-m8iqydskt1]   { color: rgba(255,255,255,.4); font-size: 12px; margin-left: 4px; }

/* ── Video area fills the space between header and controls ────────────────── */
.ct-video-grid[b-m8iqydskt1] {
    flex: 1;
    position: relative;
    width: 100%;
    min-height: 0;          /* allow flex shrink */
    overflow: hidden;
    background: #090e1a;
}

/* Remote peers fill the entire video area.
   Uses flex-wrap so 1 peer = full screen, 2 peers = side by side, etc.
   Tiles stretch to fill the cross-axis height automatically. */
.ct-remote-container[b-m8iqydskt1] {
    position: absolute;
    inset: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 3px;
    background: #090e1a;
    align-content: stretch;  /* rows fill available height evenly */
}

/* Each remote tile — ::deep so JS-created elements receive the style
   (Blazor scoped CSS adds [b-xxxx] only to Blazor-rendered nodes;
    chat.js creates these tiles via createElement, so they never get
    the scope attribute and normal scoped rules miss them entirely.) */
.ct-remote-container[b-m8iqydskt1]  .ct-video-tile {
    position: relative;
    flex: 1 1 320px;         /* basis 320 → 1 peer fills width, 2+ share */
    min-width: 0;
    min-height: 160px;
    background: #131b2e;
    overflow: hidden;
}

/* Remote video: ::deep + absolute fill bypasses Tailwind `video { height: auto }` */
.ct-remote-container[b-m8iqydskt1]  .ct-remote-video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Local video — Picture-in-Picture in the bottom-left corner */
.ct-video-tile-local[b-m8iqydskt1] {
    position: absolute !important;
    bottom: 20px;
    left: 20px;
    width: 190px;
    height: 142px;
    flex: none !important;   /* never participate in remote flex layout */
    z-index: 20;
    border-radius: 14px;
    border: 2px solid rgba(255,255,255,.22);
    box-shadow: 0 8px 32px rgba(0,0,0,.65);
    background: #131b2e;
    overflow: hidden;
}

.ct-local-video[b-m8iqydskt1] {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Username label — ::deep for the same JS-created-element reason */
.ct-remote-container[b-m8iqydskt1]  .ct-video-label {
    position: absolute;
    bottom: 10px;
    left: 12px;
    font-size: 12px;
    font-weight: 600;
    color: #fff;
    background: rgba(0,0,0,.6);
    padding: 3px 10px;
    border-radius: 999px;
    pointer-events: none;
    backdrop-filter: blur(4px);
    letter-spacing: .01em;
}

/* Cam-off placeholder inside a tile */
.ct-cam-off-overlay[b-m8iqydskt1] {
    position: absolute;
    inset: 0;
    background: #131b2e;
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(255,255,255,.25);
}

/* ── Call controls bar ─────────────────────────────────────────────────────── */
.ct-call-controls[b-m8iqydskt1] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    padding: 16px 0 20px;
    flex-shrink: 0;
    border-top: 1px solid rgba(255,255,255,.07);
    background: rgba(255,255,255,.02);
}

.ct-ctrl-btn[b-m8iqydskt1] {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    border: none;
    background: rgba(255,255,255,.12);
    color: #fff;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    transition: background .2s, transform .1s;
}

.ct-ctrl-btn:hover[b-m8iqydskt1]  { background: rgba(255,255,255,.2); }
.ct-ctrl-btn:active[b-m8iqydskt1] { transform: scale(.92); }

.ct-ctrl-active[b-m8iqydskt1] {
    background: rgba(239,68,68,.25) !important;
    color: #fca5a5 !important;
}

.ct-ctrl-end[b-m8iqydskt1] {
    background: #ef4444 !important;
    width: 60px;
    height: 60px;
    font-size: 26px;
}

/* ── System event message (missed call, etc.) ──────────────────────────────── */
.ct-system-event[b-m8iqydskt1] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 6px 16px;
    margin: 8px auto;
    max-width: 360px;
    background: var(--sb-hover-bg);
    border: 1px solid var(--bar-border);
    border-radius: 20px;
    font-size: 12px;
    color: var(--bar-sub);
    text-align: center;
}

.ct-system-event-time[b-m8iqydskt1] {
    font-size: 11px;
    opacity: .65;
    white-space: nowrap;
}

/* ── Incoming call modal ────────────────────────────────────────────────────── */
.ct-incoming-overlay[b-m8iqydskt1] {
    position: fixed;
    inset: 0;
    z-index: 200;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0,0,0,.55);
    backdrop-filter: blur(4px);
    animation: ct-fade-in-b-m8iqydskt1 .2s ease-out;
}

@keyframes ct-fade-in-b-m8iqydskt1 {
    from { opacity: 0; }
    to   { opacity: 1; }
}

.ct-incoming-modal[b-m8iqydskt1] {
    background: var(--bar-bg);
    border: 1px solid var(--bar-border);
    border-radius: 24px;
    padding: 36px 40px 32px;
    width: 320px;
    display: flex;
    flex-direction: column;
    align-items: center;
    box-shadow: 0 24px 60px rgba(0,0,0,.35);
    animation: ct-modal-pop-b-m8iqydskt1 .25s cubic-bezier(.34,1.56,.64,1);
}

@keyframes ct-modal-pop-b-m8iqydskt1 {
    from { transform: scale(.88); opacity: 0; }
    to   { transform: scale(1);   opacity: 1; }
}

.ct-incoming-ring-wrap[b-m8iqydskt1] {
    position: relative;
    width: 88px;
    height: 88px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 18px;
}

.ct-incoming-ripple[b-m8iqydskt1] {
    position: absolute;
    inset: -12px;
    border-radius: 50%;
    border: 2px solid rgb(var(--b400) / .5);
    animation: ct-ripple-b-m8iqydskt1 2s ease-out infinite;
}

.ct-ripple-delay[b-m8iqydskt1] { animation-delay: 1s; }

@keyframes ct-ripple-b-m8iqydskt1 {
    0%   { transform: scale(.85); opacity: .7; }
    100% { transform: scale(1.5); opacity: 0;  }
}

.ct-incoming-avatar[b-m8iqydskt1] {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    background: rgb(var(--b600));
    color: #fff;
    font-size: 28px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    z-index: 1;
    flex-shrink: 0;
}

.ct-incoming-caller[b-m8iqydskt1] {
    font-size: 20px;
    font-weight: 700;
    color: var(--bar-text);
    margin: 0 0 4px;
    text-align: center;
}

.ct-incoming-sub[b-m8iqydskt1] {
    font-size: 13px;
    color: var(--bar-sub);
    margin: 0 0 20px;
    text-align: center;
}

.ct-incoming-timer[b-m8iqydskt1] {
    position: relative;
    width: 44px;
    height: 44px;
    margin-bottom: 28px;
}

.ct-timer-svg[b-m8iqydskt1] { width: 44px; height: 44px; }

.ct-timer-num[b-m8iqydskt1] {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    font-weight: 700;
    color: rgb(var(--b600));
}

.ct-incoming-actions[b-m8iqydskt1] {
    display: flex;
    align-items: flex-start;
    gap: 48px;
}

.ct-incoming-action-wrap[b-m8iqydskt1] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}

.ct-incoming-btn[b-m8iqydskt1] {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    transition: transform .12s, box-shadow .12s;
}

.ct-incoming-btn:active[b-m8iqydskt1] { transform: scale(.92); }

.ct-btn-decline[b-m8iqydskt1] {
    background: #ef4444;
    color: #fff;
    box-shadow: 0 4px 16px rgba(239,68,68,.4);
}

.ct-btn-decline:hover[b-m8iqydskt1] { box-shadow: 0 6px 20px rgba(239,68,68,.55); }

.ct-btn-accept[b-m8iqydskt1] {
    background: #22c55e;
    color: #fff;
    box-shadow: 0 4px 16px rgba(34,197,94,.4);
}

.ct-btn-accept:hover[b-m8iqydskt1] { box-shadow: 0 6px 20px rgba(34,197,94,.55); }

.ct-incoming-action-label[b-m8iqydskt1] {
    font-size: 12px;
    color: var(--bar-sub);
}

/* ── Typing indicator ──────────────────────────────────────────────────────── */
.ct-typing-bar[b-m8iqydskt1] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 4px 16px 8px;
    flex-shrink: 0;
    animation: ct-typing-slide-in-b-m8iqydskt1 .15s ease-out;
}

@keyframes ct-typing-slide-in-b-m8iqydskt1 {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: translateY(0);   }
}

.ct-typing-dots[b-m8iqydskt1] {
    display: flex;
    align-items: center;
    gap: 3px;
    background: var(--sb-hover-bg);
    border: 1px solid var(--bar-border);
    border-radius: 12px;
    padding: 6px 10px;
    flex-shrink: 0;
}

.ct-typing-dot[b-m8iqydskt1] {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--bar-sub);
    animation: ct-typing-bounce-b-m8iqydskt1 .9s ease-in-out infinite;
}

.ct-typing-dot:nth-child(1)[b-m8iqydskt1] { animation-delay: 0s;    }
.ct-typing-dot:nth-child(2)[b-m8iqydskt1] { animation-delay: .18s;  }
.ct-typing-dot:nth-child(3)[b-m8iqydskt1] { animation-delay: .36s;  }

@keyframes ct-typing-bounce-b-m8iqydskt1 {
    0%,  60%, 100% { transform: translateY(0);    opacity: .35; }
    30%            { transform: translateY(-4px); opacity: 1;   }
}

.ct-typing-label[b-m8iqydskt1] {
    font-size: 12px;
    color: var(--bar-sub);
    font-style: italic;
}

.ct-ctrl-end:hover[b-m8iqydskt1] { background: #dc2626 !important; }

/* ── Back button (mobile only) ───────────────────────────────────────────── */
/* Mobile "View Conversations" button in empty state */
.ct-show-convs-btn[b-m8iqydskt1] {
    display: none;
    align-items: center;
    gap: 8px;
    padding: 10px 22px;
    margin-bottom: 20px;
    border-radius: 12px;
    background: rgb(var(--b600));
    color: #fff;
    border: none;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: background .15s, transform .1s;
    letter-spacing: .01em;
}
.ct-show-convs-btn:hover[b-m8iqydskt1]  { background: rgb(var(--b700)); }
.ct-show-convs-btn:active[b-m8iqydskt1] { transform: scale(.97); }

.ct-back-btn[b-m8iqydskt1] {
    display: none;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border: none;
    border-radius: 8px;
    background: transparent;
    color: var(--bar-sub);
    cursor: pointer;
    flex-shrink: 0;
    transition: background .15s, color .15s;
}
.ct-back-btn:hover[b-m8iqydskt1] { background: var(--sb-hover-bg); color: var(--bar-text); }

/* ── Mobile responsive ───────────────────────────────────────────────────── */
@media (max-width: 640px) {
    .ct-root[b-m8iqydskt1] {
        height: calc(100vh - 120px);
        border-radius: 12px;
        min-height: 0;
    }

    /* Sidebar hidden by default on mobile */
    .ct-sidebar[b-m8iqydskt1] {
        display: none;
        width: 100%;
        border-right: none;
    }

    /* Sidebar visible when toggled open — covers the main area */
    .ct-root.ct-sidebar-open .ct-sidebar[b-m8iqydskt1] {
        display: flex;
        flex-direction: column;
    }

    /* Hide main when sidebar is open on mobile */
    .ct-root.ct-sidebar-open .ct-main[b-m8iqydskt1] { display: none; }

    /* Show back button on mobile */
    .ct-back-btn[b-m8iqydskt1] { display: flex; }

    /* Show "View Conversations" button in empty state on mobile */
    .ct-show-convs-btn[b-m8iqydskt1] { display: flex; }

    /* Tighter message bubbles */
    .ct-msg-body[b-m8iqydskt1] { max-width: 82%; }

    /* Full-width emoji panel */
    .ct-emoji-panel[b-m8iqydskt1] {
        position: fixed;
        bottom: 80px;
        left: 8px;
        right: 8px;
        width: auto;
    }
}
/* _content/MiniMartBlazorPOS/Components/Pages/Dashboard.razor.rz.scp.css */
/* ── Skeleton shimmer ─────────────────────────────────────────────────── */
.skel-pulse[b-rqpezblfoj] {
    background: var(--sb-hover-bg);
    background-image: linear-gradient(
        90deg,
        var(--sb-hover-bg) 0%,
        var(--skel-shine) 40%,
        var(--sb-hover-bg) 80%
    );
    background-size: 400px 100%;
    animation: skel-shimmer-b-rqpezblfoj 1.4s ease-in-out infinite;
}

@keyframes skel-shimmer-b-rqpezblfoj {
    0%   { background-position: -400px 0; }
    100% { background-position:  600px 0; }
}

/* ── KPI card entry animation ─────────────────────────────────────────── */
.dash-card[b-rqpezblfoj] {
    animation: dash-fadein-b-rqpezblfoj .35s ease both;
}

@keyframes dash-fadein-b-rqpezblfoj {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0);   }
}
/* _content/MiniMartBlazorPOS/Components/Pages/Home.razor.rz.scp.css */
/* ── Root ─────────────────────────────────────────────────────────────── */
.lp-root[b-ipco9b1h7q] {
    min-height: 100vh;
    background: #0a0d14;
    color: #e2e8f0;
    font-family: inherit;
    overflow-x: hidden;
}

/* ── Nav ──────────────────────────────────────────────────────────────── */
.lp-nav[b-ipco9b1h7q] {
    position: sticky;
    top: 0;
    z-index: 50;
    backdrop-filter: blur(12px);
    background: rgba(10, 13, 20, 0.85);
    border-bottom: 1px solid rgba(255,255,255,.07);
}
.lp-nav-inner[b-ipco9b1h7q] {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 24px;
    height: 60px;
    display: flex;
    align-items: center;
    gap: 32px;
}
.lp-brand[b-ipco9b1h7q] {
    display: flex;
    align-items: center;
    gap: 8px;
    text-decoration: none;
}
.lp-brand-icon[b-ipco9b1h7q] {
    font-size: 22px !important;
    color: #60a5fa;
}
.lp-brand-name[b-ipco9b1h7q] {
    font-size: 16px;
    font-weight: 700;
    color: #f1f5f9;
    letter-spacing: .3px;
}
.lp-brand-accent[b-ipco9b1h7q] {
    color: #60a5fa;
}
.lp-nav-links[b-ipco9b1h7q] {
    display: flex;
    gap: 6px;
    margin-left: auto;
}
.lp-nav-link[b-ipco9b1h7q] {
    padding: 6px 14px;
    border-radius: 8px;
    font-size: 13.5px;
    font-weight: 500;
    color: #94a3b8;
    text-decoration: none;
    transition: color .15s, background .15s;
}
.lp-nav-link:hover[b-ipco9b1h7q] {
    color: #e2e8f0;
    background: rgba(255,255,255,.06);
}
.lp-cta-btn[b-ipco9b1h7q] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 16px;
    border-radius: 10px;
    background: #3b82f6;
    color: #fff;
    font-size: 13.5px;
    font-weight: 600;
    text-decoration: none;
    transition: background .15s, transform .1s;
}
.lp-cta-btn:hover[b-ipco9b1h7q] {
    background: #2563eb;
    transform: translateY(-1px);
}

/* ── Hero ─────────────────────────────────────────────────────────────── */
.lp-hero[b-ipco9b1h7q] {
    position: relative;
    max-width: 1200px;
    margin: 0 auto;
    padding: 80px 24px 100px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 64px;
    align-items: center;
    overflow: hidden;
}
.lp-hero-glow[b-ipco9b1h7q] {
    position: absolute;
    border-radius: 50%;
    filter: blur(80px);
    pointer-events: none;
}
.lp-hero-glow-1[b-ipco9b1h7q] {
    width: 500px; height: 500px;
    background: radial-gradient(circle, rgba(59,130,246,.18) 0%, transparent 70%);
    top: -100px; left: -100px;
}
.lp-hero-glow-2[b-ipco9b1h7q] {
    width: 400px; height: 400px;
    background: radial-gradient(circle, rgba(139,92,246,.12) 0%, transparent 70%);
    bottom: 0; right: 0;
}
.lp-hero-content[b-ipco9b1h7q] {
    position: relative;
    z-index: 1;
}
.lp-badge[b-ipco9b1h7q] {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 5px 12px;
    border-radius: 999px;
    background: rgba(59,130,246,.12);
    border: 1px solid rgba(59,130,246,.25);
    color: #93c5fd;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .3px;
    margin-bottom: 20px;
}
.lp-badge-dot[b-ipco9b1h7q] {
    width: 6px; height: 6px;
    border-radius: 50%;
    background: #3b82f6;
    animation: lp-pulse-b-ipco9b1h7q 2s ease-in-out infinite;
}
@keyframes lp-pulse-b-ipco9b1h7q {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: .5; transform: scale(1.3); }
}
.lp-hero-title[b-ipco9b1h7q] {
    font-size: clamp(32px, 4vw, 52px);
    font-weight: 800;
    line-height: 1.15;
    color: #f1f5f9;
    margin-bottom: 18px;
    letter-spacing: -.5px;
}
.lp-hero-highlight[b-ipco9b1h7q] {
    background: linear-gradient(135deg, #60a5fa 0%, #a78bfa 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}
.lp-hero-sub[b-ipco9b1h7q] {
    font-size: 16px;
    line-height: 1.7;
    color: #94a3b8;
    margin-bottom: 32px;
    max-width: 440px;
}
.lp-hero-actions[b-ipco9b1h7q] {
    display: flex;
    gap: 14px;
    flex-wrap: wrap;
    margin-bottom: 40px;
}
.lp-btn-primary[b-ipco9b1h7q] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 11px 22px;
    border-radius: 12px;
    background: linear-gradient(135deg, #3b82f6 0%, #6366f1 100%);
    color: #fff;
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    transition: opacity .15s, transform .1s, box-shadow .15s;
    box-shadow: 0 4px 20px rgba(59,130,246,.35);
}
.lp-btn-primary:hover[b-ipco9b1h7q] {
    opacity: .92;
    transform: translateY(-2px);
    box-shadow: 0 6px 28px rgba(59,130,246,.45);
}
.lp-btn-lg[b-ipco9b1h7q] {
    padding: 14px 28px;
    font-size: 15px;
    border-radius: 14px;
}
.lp-btn-ghost[b-ipco9b1h7q] {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 11px 20px;
    border-radius: 12px;
    border: 1px solid rgba(255,255,255,.12);
    color: #94a3b8;
    font-size: 14px;
    font-weight: 500;
    text-decoration: none;
    transition: color .15s, border-color .15s, background .15s;
}
.lp-btn-ghost:hover[b-ipco9b1h7q] {
    color: #e2e8f0;
    border-color: rgba(255,255,255,.22);
    background: rgba(255,255,255,.05);
}
.lp-stats[b-ipco9b1h7q] {
    display: flex;
    align-items: center;
    gap: 20px;
    flex-wrap: wrap;
}
.lp-stat[b-ipco9b1h7q] {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.lp-stat-num[b-ipco9b1h7q] {
    font-size: 18px;
    font-weight: 700;
    color: #f1f5f9;
    line-height: 1;
}
.lp-stat-lbl[b-ipco9b1h7q] {
    font-size: 11.5px;
    color: #64748b;
}
.lp-stat-div[b-ipco9b1h7q] {
    width: 1px;
    height: 32px;
    background: rgba(255,255,255,.1);
}

/* ── POS Mockup ───────────────────────────────────────────────────────── */
.lp-hero-visual[b-ipco9b1h7q] {
    position: relative;
    z-index: 1;
}
.lp-pos-mockup[b-ipco9b1h7q] {
    background: #111827;
    border: 1px solid rgba(255,255,255,.1);
    border-radius: 18px;
    overflow: hidden;
    box-shadow: 0 24px 80px rgba(0,0,0,.5), 0 0 0 1px rgba(255,255,255,.05);
    transform: perspective(800px) rotateY(-6deg) rotateX(2deg);
    transition: transform .3s;
}
.lp-pos-mockup:hover[b-ipco9b1h7q] {
    transform: perspective(800px) rotateY(-2deg) rotateX(1deg);
}
.lp-mock-bar[b-ipco9b1h7q] {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 12px 16px;
    background: #1a2032;
    border-bottom: 1px solid rgba(255,255,255,.07);
}
.lp-mock-dot[b-ipco9b1h7q] {
    width: 10px; height: 10px;
    border-radius: 50%;
    display: inline-block;
}
.lp-mock-title[b-ipco9b1h7q] {
    font-size: 11.5px;
    font-weight: 600;
    color: #64748b;
    margin-left: 6px;
}
.lp-mock-body[b-ipco9b1h7q] {
    padding: 16px;
}
.lp-mock-cart[b-ipco9b1h7q] {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 16px;
}
.lp-mock-item[b-ipco9b1h7q] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border-radius: 10px;
    background: rgba(255,255,255,.04);
    border: 1px solid rgba(255,255,255,.06);
}
.lp-mock-item-icon[b-ipco9b1h7q] {
    width: 30px; height: 30px;
    border-radius: 8px;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
}
.lp-mock-item-info[b-ipco9b1h7q] {
    flex: 1;
    min-width: 0;
}
.lp-mock-item-name[b-ipco9b1h7q] {
    display: block;
    font-size: 12.5px;
    font-weight: 600;
    color: #e2e8f0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.lp-mock-item-price[b-ipco9b1h7q] {
    display: block;
    font-size: 11px;
    color: #64748b;
}
.lp-mock-qty[b-ipco9b1h7q] {
    font-size: 12px;
    font-weight: 700;
    color: #60a5fa;
    background: rgba(59,130,246,.12);
    padding: 2px 8px;
    border-radius: 6px;
}
.lp-mock-total[b-ipco9b1h7q] {
    border-top: 1px solid rgba(255,255,255,.07);
    padding-top: 14px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.lp-mock-total-row[b-ipco9b1h7q] {
    display: flex;
    justify-content: space-between;
    font-size: 12.5px;
    color: #64748b;
}
.lp-mock-grand[b-ipco9b1h7q] {
    font-size: 14px;
    font-weight: 700;
    color: #f1f5f9;
}
.lp-mock-pay-btn[b-ipco9b1h7q] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding: 11px;
    border-radius: 10px;
    background: linear-gradient(135deg, #3b82f6, #6366f1);
    color: #fff;
    font-size: 13px;
    font-weight: 700;
    margin-top: 4px;
    cursor: default;
}

/* ── Section base ─────────────────────────────────────────────────────── */
.lp-section[b-ipco9b1h7q] {
    padding: 90px 0;
}
.lp-section-alt[b-ipco9b1h7q] {
    background: rgba(255,255,255,.025);
    border-top: 1px solid rgba(255,255,255,.05);
    border-bottom: 1px solid rgba(255,255,255,.05);
}
.lp-section-inner[b-ipco9b1h7q] {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 24px;
}
.lp-section-hdr[b-ipco9b1h7q] {
    text-align: center;
    margin-bottom: 56px;
}
.lp-section-tag[b-ipco9b1h7q] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 16px;
    border-radius: 999px;
    background: rgba(59,130,246,.12);
    border: 1px solid rgba(59,130,246,.28);
    color: #93c5fd;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .4px;
    text-transform: uppercase;
    margin-bottom: 16px;
    box-shadow: 0 0 16px rgba(59,130,246,.12);
}
.lp-section-title[b-ipco9b1h7q] {
    font-size: clamp(26px, 3vw, 40px);
    font-weight: 800;
    color: #f1f5f9;
    line-height: 1.2;
    letter-spacing: -.3px;
    margin-bottom: 14px;
}
.lp-section-sub[b-ipco9b1h7q] {
    font-size: 15px;
    color: #94a3b8;
    max-width: 520px;
    margin: 0 auto;
    line-height: 1.7;
}

/* ── Features grid ────────────────────────────────────────────────────── */
.lp-features-grid[b-ipco9b1h7q] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
}
.lp-feat-card[b-ipco9b1h7q] {
    padding: 28px 24px;
    border-radius: 18px;
    background: rgba(255,255,255,.035);
    border: 1px solid rgba(255,255,255,.07);
    transition: border-color .2s, transform .2s, box-shadow .2s;
}
.lp-feat-card:hover[b-ipco9b1h7q] {
    border-color: rgba(255,255,255,.14);
    transform: translateY(-3px);
    box-shadow: 0 12px 40px rgba(0,0,0,.25);
}
.lp-feat-primary[b-ipco9b1h7q] {
    grid-column: span 1;
    background: linear-gradient(135deg, rgba(59,130,246,.08) 0%, rgba(99,102,241,.08) 100%);
    border-color: rgba(59,130,246,.2);
}
.lp-feat-icon[b-ipco9b1h7q] {
    width: 44px; height: 44px;
    border-radius: 12px;
    display: flex; align-items: center; justify-content: center;
    margin-bottom: 16px;
    font-size: 22px;
}
.lp-feat-icon .material-symbols-outlined[b-ipco9b1h7q] {
    font-size: 22px !important;
}
.lp-feat-title[b-ipco9b1h7q] {
    font-size: 15px;
    font-weight: 700;
    color: #e2e8f0;
    margin-bottom: 8px;
}
.lp-feat-desc[b-ipco9b1h7q] {
    font-size: 13.5px;
    color: #94a3b8;
    line-height: 1.65;
}

/* ── Why section ──────────────────────────────────────────────────────── */
.lp-why-grid[b-ipco9b1h7q] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 64px;
    align-items: center;
}
.lp-why-desc[b-ipco9b1h7q] {
    font-size: 15px;
    color: #94a3b8;
    line-height: 1.75;
    margin: 18px 0 24px;
}
.lp-why-list[b-ipco9b1h7q] {
    list-style: none;
    margin: 0 0 24px;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.lp-why-item[b-ipco9b1h7q] {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 14px;
    color: #cbd5e1;
    font-weight: 500;
}
.lp-why-check[b-ipco9b1h7q] {
    width: 22px; height: 22px;
    border-radius: 50%;
    background: rgba(16,185,129,.15);
    color: #10b981;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
}

/* ── Dashboard Mockup ─────────────────────────────────────────────────── */
.lp-dash-mockup[b-ipco9b1h7q] {
    background: #111827;
    border: 1px solid rgba(255,255,255,.1);
    border-radius: 16px;
    overflow: hidden;
    padding: 20px;
    box-shadow: 0 20px 60px rgba(0,0,0,.4);
}
.lp-dash-hdr[b-ipco9b1h7q] {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 16px;
    color: #94a3b8;
}
.lp-kpi-row[b-ipco9b1h7q] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    margin-bottom: 20px;
}
.lp-kpi[b-ipco9b1h7q] {
    padding: 12px;
    border-radius: 10px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.lp-kpi-blue[b-ipco9b1h7q]  { background: rgba(59,130,246,.12);  border: 1px solid rgba(59,130,246,.2); }
.lp-kpi-green[b-ipco9b1h7q] { background: rgba(16,185,129,.12);  border: 1px solid rgba(16,185,129,.2); }
.lp-kpi-violet[b-ipco9b1h7q]{ background: rgba(139,92,246,.12);  border: 1px solid rgba(139,92,246,.2); }
.lp-kpi-icon[b-ipco9b1h7q] { font-size: 13px; color: #64748b; }
.lp-kpi-val[b-ipco9b1h7q]  { font-size: 15px; font-weight: 700; color: #f1f5f9; line-height: 1; }
.lp-kpi-lbl[b-ipco9b1h7q]  { font-size: 10px; color: #64748b; }
.lp-chart-bars[b-ipco9b1h7q] {
    display: flex;
    align-items: flex-end;
    gap: 6px;
    height: 100px;
    padding: 0 4px 0;
    margin-bottom: 8px;
}
.lp-bar-wrap[b-ipco9b1h7q] {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    height: 100%;
}
.lp-bar[b-ipco9b1h7q] {
    width: 100%;
    background: rgba(59,130,246,.35);
    border-radius: 4px 4px 0 0;
    transition: background .2s;
    flex-shrink: 0;
    align-self: flex-end;
}
.lp-bar-active[b-ipco9b1h7q] {
    background: rgba(59,130,246,.8);
}
.lp-bar-lbl[b-ipco9b1h7q] {
    font-size: 9px;
    color: #475569;
}
.lp-dash-label[b-ipco9b1h7q] {
    font-size: 10.5px;
    color: #475569;
    text-align: center;
    margin-top: 4px;
}

/* ── CTA ──────────────────────────────────────────────────────────────── */
.lp-cta-section[b-ipco9b1h7q] {
    position: relative;
    padding: 100px 24px;
    text-align: center;
    overflow: hidden;
}
.lp-cta-glow[b-ipco9b1h7q] {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    width: 600px; height: 400px;
    background: radial-gradient(ellipse, rgba(59,130,246,.15) 0%, transparent 70%);
    pointer-events: none;
}
.lp-cta-content[b-ipco9b1h7q] {
    position: relative;
    z-index: 1;
    max-width: 560px;
    margin: 0 auto;
}
.lp-cta-title[b-ipco9b1h7q] {
    font-size: clamp(28px, 3vw, 40px);
    font-weight: 800;
    color: #f1f5f9;
    letter-spacing: -.3px;
    margin-bottom: 14px;
}
.lp-cta-sub[b-ipco9b1h7q] {
    font-size: 15px;
    color: #94a3b8;
    margin-bottom: 32px;
}

/* ── Footer ───────────────────────────────────────────────────────────── */
.lp-footer[b-ipco9b1h7q] {
    border-top: 1px solid rgba(255,255,255,.06);
    padding: 24px 24px;
}
.lp-footer-inner[b-ipco9b1h7q] {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}
.lp-footer-copy[b-ipco9b1h7q] {
    font-size: 12.5px;
    color: #475569;
}

/* ── Pricing ──────────────────────────────────────────────────────────── */
.lp-pricing-grid[b-ipco9b1h7q] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    align-items: center;
}

/* Base card */
.lp-pc[b-ipco9b1h7q] {
    position: relative;
    padding: 32px 28px 28px;
    border-radius: 22px;
    background: rgba(255,255,255,.035);
    border: 1px solid rgba(255,255,255,.08);
    transition: transform .3s cubic-bezier(0.16,1,0.3,1), box-shadow .3s, border-color .3s;
    overflow: hidden;
}
.lp-pc-1[b-ipco9b1h7q] { animation: lp-pc-in-b-ipco9b1h7q .55s cubic-bezier(0.16,1,0.3,1) .05s both; }
.lp-pc-2[b-ipco9b1h7q] { animation: lp-pc-in-up-b-ipco9b1h7q .55s cubic-bezier(0.16,1,0.3,1) .15s both; }
.lp-pc-3[b-ipco9b1h7q] { animation: lp-pc-in-b-ipco9b1h7q .55s cubic-bezier(0.16,1,0.3,1) .25s both; }

@keyframes lp-pc-in-b-ipco9b1h7q {
    from { opacity: 0; transform: translateY(28px) scale(.97); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes lp-pc-in-up-b-ipco9b1h7q {
    from { opacity: 0; transform: translateY(28px) scale(.97); }
    to   { opacity: 1; transform: translateY(-10px) scale(1.03); }
}

/* Non-featured hover */
.lp-pc:not(.lp-pc-featured):hover[b-ipco9b1h7q] {
    transform: translateY(-7px) scale(1);
    box-shadow: 0 20px 50px rgba(0,0,0,.3);
    border-color: rgba(255,255,255,.15);
}

/* ── Featured card ── */
.lp-pc-featured[b-ipco9b1h7q] {
    background: linear-gradient(160deg, rgba(59,130,246,.1) 0%, rgba(99,102,241,.08) 100%);
    border-color: rgba(59,130,246,.38);
    box-shadow: 0 0 50px rgba(59,130,246,.14), 0 14px 40px rgba(0,0,0,.28);
    transform: translateY(-10px) scale(1.03);
}
.lp-pc-featured:hover[b-ipco9b1h7q] {
    transform: translateY(-18px) scale(1.03);
    box-shadow: 0 0 70px rgba(59,130,246,.26), 0 28px 60px rgba(0,0,0,.38);
    border-color: rgba(59,130,246,.6);
}

/* Shimmer sweep on featured */
.lp-pc-featured[b-ipco9b1h7q]::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 22px;
    background: linear-gradient(
        105deg,
        transparent 30%,
        rgba(255,255,255,.055) 50%,
        transparent 70%
    );
    background-size: 250% 100%;
    animation: lp-shimmer-b-ipco9b1h7q 4s ease-in-out infinite;
    pointer-events: none;
    z-index: 0;
}
@keyframes lp-shimmer-b-ipco9b1h7q {
    0%   { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* "Most Popular" badge */
.lp-pc-popular[b-ipco9b1h7q] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    position: absolute;
    top: -18px;
    left: 50%;
    transform: translateX(-50%);
    padding: 5px 16px;
    border-radius: 999px;
    background: linear-gradient(135deg, #3b82f6, #6366f1);
    color: #fff;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .6px;
    text-transform: uppercase;
    white-space: nowrap;
    box-shadow: 0 4px 20px rgba(59,130,246,.45);
    animation: lp-badge-glow-b-ipco9b1h7q 2.5s ease-in-out infinite;
}
@keyframes lp-badge-glow-b-ipco9b1h7q {
    0%, 100% { box-shadow: 0 4px 20px rgba(59,130,246,.4); }
    50%       { box-shadow: 0 4px 30px rgba(99,102,241,.7); }
}

/* Card content (above shimmer layer) */
.lp-pc > *[b-ipco9b1h7q] { position: relative; z-index: 1; }

.lp-pc-icon[b-ipco9b1h7q] {
    width: 48px; height: 48px;
    border-radius: 14px;
    display: flex; align-items: center; justify-content: center;
    margin-bottom: 16px;
    margin-top: 14px;
}
.lp-pc-icon .material-symbols-outlined[b-ipco9b1h7q] { font-size: 22px !important; }

.lp-pc-name[b-ipco9b1h7q] {
    font-size: 21px;
    font-weight: 800;
    color: #f1f5f9;
    margin-bottom: 6px;
}
.lp-pc-desc[b-ipco9b1h7q] {
    font-size: 13px;
    color: #64748b;
    line-height: 1.6;
    min-height: 40px;
}
.lp-pc-price[b-ipco9b1h7q] {
    display: flex;
    align-items: baseline;
    gap: 3px;
    margin: 22px 0;
    padding: 18px 0;
    border-top: 1px solid rgba(255,255,255,.07);
    border-bottom: 1px solid rgba(255,255,255,.07);
}
.lp-pc-cur[b-ipco9b1h7q] {
    font-size: 18px;
    font-weight: 700;
    color: #94a3b8;
    line-height: 1;
    align-self: flex-start;
    margin-top: 6px;
}
.lp-pc-num[b-ipco9b1h7q] {
    font-size: 48px;
    font-weight: 800;
    color: #f1f5f9;
    line-height: 1;
    letter-spacing: -2px;
}
.lp-pc-per[b-ipco9b1h7q] {
    font-size: 14px;
    color: #64748b;
    margin-left: 2px;
}

.lp-pc-feats[b-ipco9b1h7q] {
    list-style: none;
    padding: 0;
    margin: 0 0 28px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.lp-pc-feats li[b-ipco9b1h7q] {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 13.5px;
    color: #cbd5e1;
    font-weight: 500;
}
.lp-pci[b-ipco9b1h7q] {
    width: 20px; height: 20px;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
}
.lp-pci-green[b-ipco9b1h7q]  { background: rgba(16,185,129,.15);  color: #10b981; }
.lp-pci-blue[b-ipco9b1h7q]   { background: rgba(59,130,246,.15);   color: #60a5fa; }
.lp-pci-violet[b-ipco9b1h7q] { background: rgba(139,92,246,.15);   color: #a78bfa; }
.lp-pci-dim[b-ipco9b1h7q]    { background: rgba(255,255,255,.05);  color: #475569; }
.lp-pci-off[b-ipco9b1h7q]    { color: #475569 !important; }

.lp-pc-btn[b-ipco9b1h7q] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: 13px;
    border-radius: 13px;
    font-size: 14px;
    font-weight: 700;
    text-decoration: none;
    transition: all .2s;
}
.lp-pc-btn-primary[b-ipco9b1h7q] {
    background: linear-gradient(135deg, #3b82f6, #6366f1);
    color: #fff;
    box-shadow: 0 4px 20px rgba(59,130,246,.4);
}
.lp-pc-btn-primary:hover[b-ipco9b1h7q] {
    opacity: .92;
    transform: translateY(-2px);
    box-shadow: 0 8px 28px rgba(59,130,246,.55);
}
.lp-pc-btn-ghost[b-ipco9b1h7q] {
    border: 1px solid rgba(255,255,255,.12);
    color: #94a3b8;
}
.lp-pc-btn-ghost:hover[b-ipco9b1h7q] {
    border-color: rgba(255,255,255,.25);
    color: #e2e8f0;
    background: rgba(255,255,255,.05);
}

/* ── Responsive ───────────────────────────────────────────────────────── */
@media (max-width: 900px) {
    .lp-hero[b-ipco9b1h7q] {
        grid-template-columns: 1fr;
        padding: 60px 20px 70px;
        gap: 48px;
    }
    .lp-pos-mockup[b-ipco9b1h7q] {
        transform: none;
        max-width: 400px;
        margin: 0 auto;
    }
    .lp-features-grid[b-ipco9b1h7q] {
        grid-template-columns: 1fr 1fr;
    }
    .lp-why-grid[b-ipco9b1h7q] {
        grid-template-columns: 1fr;
        gap: 40px;
    }
    .lp-nav-links[b-ipco9b1h7q] {
        display: none;
    }
    .lp-cta-btn[b-ipco9b1h7q] {
        margin-left: auto;
    }
    .lp-pricing-grid[b-ipco9b1h7q] {
        grid-template-columns: 1fr;
        max-width: 420px;
        margin: 0 auto;
    }
    .lp-pc-featured[b-ipco9b1h7q],
    .lp-pc-featured:hover[b-ipco9b1h7q] {
        transform: none;
    }
    .lp-pc:not(.lp-pc-featured):hover[b-ipco9b1h7q] {
        transform: translateY(-5px);
    }
    .lp-pc-2[b-ipco9b1h7q] {
        animation-name: lp-pc-in-b-ipco9b1h7q;
    }
}
/* ── Scroll-to-top button ──────────────────────────────────────────────── */
.lp-scroll-top[b-ipco9b1h7q] {
    position: fixed;
    bottom: 100px;
    right: 28px;
    z-index: 800;
    width: 42px;
    height: 42px;
    border-radius: 12px;
    border: 1px solid rgba(99,102,241,.25);
    background: rgba(15,23,42,.85);
    backdrop-filter: blur(10px);
    color: #818cf8;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    opacity: 0;
    transform: translateY(12px);
    pointer-events: none;
    transition: opacity .25s, transform .25s, background .15s, border-color .15s;
}
.lp-scroll-top.lp-scroll-top-visible[b-ipco9b1h7q] {
    opacity: 1;
    transform: translateY(0);
    pointer-events: all;
}
.lp-scroll-top:hover[b-ipco9b1h7q] {
    background: rgba(99,102,241,.15);
    border-color: rgba(99,102,241,.4);
    color: #a5b4fc;
}

/* ── Chatbot ───────────────────────────────────────────────────────────── */
/* FAB */
.lp-fab[b-ipco9b1h7q] {
    position: fixed;
    bottom: 28px;
    right: 28px;
    z-index: 900;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    border: none;
    cursor: pointer;
    background: linear-gradient(135deg, #3b82f6 0%, #6366f1 100%);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 20px rgba(99,102,241,.5);
    transition: transform .2s, box-shadow .2s;
    animation: lp-fab-pulse-b-ipco9b1h7q 2.8s ease-in-out infinite;
}
.lp-fab:hover[b-ipco9b1h7q] {
    transform: scale(1.08);
    box-shadow: 0 6px 28px rgba(99,102,241,.65), 0 0 0 8px rgba(99,102,241,.1);
    animation: none;
}
.lp-fab-active[b-ipco9b1h7q] {
    animation: none;
}
.lp-fab-active:hover[b-ipco9b1h7q] {
    transform: scale(1.08) rotate(90deg);
}
@keyframes lp-fab-pulse-b-ipco9b1h7q {
    0%,100% { box-shadow: 0 4px 20px rgba(99,102,241,.5), 0 0 0 0 rgba(99,102,241,.35); }
    50%      { box-shadow: 0 4px 20px rgba(99,102,241,.5), 0 0 0 10px rgba(99,102,241,0); }
}

/* Chat panel */
.lp-chat[b-ipco9b1h7q] {
    position: fixed;
    bottom: 96px;
    right: 28px;
    z-index: 901;
    width: 360px;
    max-height: 540px;
    display: flex;
    flex-direction: column;
    background: #0f1729;
    border: 1px solid rgba(99,102,241,.18);
    border-radius: 20px;
    box-shadow: 0 24px 60px rgba(0,0,0,.6), 0 0 0 1px rgba(255,255,255,.04);
    overflow: hidden;
    opacity: 0;
    transform: translateY(16px) scale(.97);
    pointer-events: none;
    transition: opacity .25s cubic-bezier(.22,1,.36,1), transform .25s cubic-bezier(.22,1,.36,1);
}
.lp-chat-open[b-ipco9b1h7q] {
    opacity: 1;
    transform: translateY(0) scale(1);
    pointer-events: all;
}

/* Header */
.lp-chat-hdr[b-ipco9b1h7q] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 15px 18px;
    background: linear-gradient(135deg, #1a2d5a 0%, #1e2562 100%);
    border-bottom: 1px solid rgba(99,102,241,.15);
    flex-shrink: 0;
}
.lp-chat-bot-av[b-ipco9b1h7q] {
    width: 40px;
    height: 40px;
    border-radius: 12px;
    background: linear-gradient(135deg, #3b82f6 0%, #6366f1 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    flex-shrink: 0;
    box-shadow: 0 4px 12px rgba(99,102,241,.4);
}
.lp-chat-hdr-name[b-ipco9b1h7q] {
    font-size: 13.5px;
    font-weight: 700;
    color: #fff;
}
.lp-chat-hdr-sub[b-ipco9b1h7q] {
    font-size: 11px;
    color: rgba(165,180,252,.7);
    display: flex;
    align-items: center;
    gap: 5px;
    margin-top: 2px;
}
.lp-chat-online[b-ipco9b1h7q] {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #34d399;
    flex-shrink: 0;
    box-shadow: 0 0 6px rgba(52,211,153,.7);
}

/* Messages */
.lp-chat-msgs[b-ipco9b1h7q] {
    flex: 1;
    overflow-y: auto;
    padding: 14px 12px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    scrollbar-width: thin;
    scrollbar-color: rgba(99,102,241,.3) transparent;
}
.lp-cmsg[b-ipco9b1h7q] {
    display: flex;
    align-items: flex-end;
    gap: 7px;
    max-width: 100%;
}
.lp-cmsg-bot[b-ipco9b1h7q]  { justify-content: flex-start; }
.lp-cmsg-user[b-ipco9b1h7q] { justify-content: flex-end; }

.lp-cmsg-av[b-ipco9b1h7q] {
    width: 26px;
    height: 26px;
    border-radius: 8px;
    background: linear-gradient(135deg, #3b82f6 0%, #6366f1 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    flex-shrink: 0;
}
.lp-cmsg-bbl[b-ipco9b1h7q] {
    max-width: 78%;
    padding: 9px 13px;
    border-radius: 16px;
    font-size: 12.5px;
    line-height: 1.55;
    white-space: pre-wrap;
}
.lp-cmsg-bot .lp-cmsg-bbl[b-ipco9b1h7q] {
    background: rgba(255,255,255,.07);
    border: 1px solid rgba(255,255,255,.08);
    color: rgba(226,232,240,.9);
    border-bottom-left-radius: 4px;
}
.lp-cmsg-user .lp-cmsg-bbl[b-ipco9b1h7q] {
    background: linear-gradient(135deg, #3b82f6 0%, #6366f1 100%);
    color: #fff;
    border-bottom-right-radius: 4px;
    box-shadow: 0 4px 12px rgba(99,102,241,.35);
}

/* Typing indicator */
.lp-cmsg-typing[b-ipco9b1h7q] {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 12px 16px !important;
    min-width: 56px;
}
.lp-cmsg-typing span[b-ipco9b1h7q] {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: rgba(165,180,252,.6);
    animation: lp-typing-b-ipco9b1h7q 1.2s ease-in-out infinite;
}
.lp-cmsg-typing span:nth-child(2)[b-ipco9b1h7q] { animation-delay: .2s; }
.lp-cmsg-typing span:nth-child(3)[b-ipco9b1h7q] { animation-delay: .4s; }
@keyframes lp-typing-b-ipco9b1h7q {
    0%,80%,100% { transform: scale(.8); opacity: .5; }
    40%          { transform: scale(1.1); opacity: 1; }
}

/* Quick replies */
.lp-chat-quick[b-ipco9b1h7q] {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    padding: 8px 12px;
    border-top: 1px solid rgba(255,255,255,.05);
    flex-shrink: 0;
}
.lp-qr[b-ipco9b1h7q] {
    padding: 6px 12px;
    border-radius: 999px;
    background: rgba(59,130,246,.1);
    border: 1px solid rgba(99,102,241,.3);
    color: #93c5fd;
    font-size: 11.5px;
    font-weight: 600;
    cursor: pointer;
    transition: background .15s, border-color .15s, color .15s;
    white-space: nowrap;
}
.lp-qr:hover[b-ipco9b1h7q] {
    background: rgba(99,102,241,.25);
    border-color: rgba(99,102,241,.5);
    color: #c7d2fe;
}

/* Input area */
.lp-chat-foot[b-ipco9b1h7q] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 11px 12px;
    border-top: 1px solid rgba(255,255,255,.06);
    background: rgba(255,255,255,.02);
    flex-shrink: 0;
}
.lp-chat-inp[b-ipco9b1h7q] {
    flex: 1;
    padding: 9px 13px;
    background: rgba(255,255,255,.06);
    border: 1px solid rgba(99,102,241,.2);
    border-radius: 12px;
    font-size: 12.5px;
    color: #e2e8f0;
    outline: none;
    transition: border-color .2s, background .2s;
}
.lp-chat-inp[b-ipco9b1h7q]::placeholder { color: rgba(148,163,184,.45); }
.lp-chat-inp:focus[b-ipco9b1h7q] {
    border-color: rgba(99,102,241,.5);
    background: rgba(99,102,241,.08);
}
.lp-chat-inp:disabled[b-ipco9b1h7q] { opacity: .5; }
.lp-chat-send[b-ipco9b1h7q] {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    border: none;
    background: linear-gradient(135deg, #3b82f6 0%, #6366f1 100%);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: opacity .15s, transform .1s;
    flex-shrink: 0;
}
.lp-chat-send:hover:not(:disabled)[b-ipco9b1h7q] { opacity: .85; }
.lp-chat-send:disabled[b-ipco9b1h7q] { opacity: .35; cursor: not-allowed; }

@media (max-width: 480px) {
    .lp-chat[b-ipco9b1h7q] { width: calc(100vw - 32px); right: 16px; }
    .lp-fab[b-ipco9b1h7q]  { right: 16px; bottom: 20px; }
    .lp-scroll-top[b-ipco9b1h7q] { right: 16px; }
}

@media (max-width: 600px) {
    .lp-features-grid[b-ipco9b1h7q] {
        grid-template-columns: 1fr;
    }
    .lp-hero-actions[b-ipco9b1h7q] {
        flex-direction: column;
        align-items: flex-start;
    }
    .lp-stats[b-ipco9b1h7q] {
        gap: 14px;
    }
}

/* ═══════════════════════════════════════════════════════════════════════════
   Feature card — clickable state
   ═══════════════════════════════════════════════════════════════════════════ */
.lp-feat-clickable[b-ipco9b1h7q] { cursor: pointer; }
.lp-feat-more[b-ipco9b1h7q] {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    font-size: 11.5px;
    font-weight: 600;
    margin-top: 12px;
    color: rgba(255,255,255,.25);
    transition: color .15s, gap .15s;
    letter-spacing: .01em;
}
.lp-feat-clickable:hover .lp-feat-more[b-ipco9b1h7q] {
    color: rgba(255,255,255,.65);
    gap: 6px;
}

/* ═══════════════════════════════════════════════════════════════════════════
   Feature Showcase Modal
   ═══════════════════════════════════════════════════════════════════════════ */
.lp-sc-overlay[b-ipco9b1h7q] {
    position: fixed;
    inset: 0;
    z-index: 300;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    background: rgba(4, 7, 20, .8);
    backdrop-filter: blur(10px);
    animation: lp-sc-backdrop-in-b-ipco9b1h7q .2s ease;
}
@keyframes lp-sc-backdrop-in-b-ipco9b1h7q {
    from { opacity: 0; }
    to   { opacity: 1; }
}

.lp-sc-modal[b-ipco9b1h7q] {
    position: relative;
    display: flex;
    width: 100%;
    max-width: 940px;
    height: 530px;
    border-radius: 22px;
    overflow: hidden;
    border: 1px solid rgba(255,255,255,.09);
    box-shadow: 0 40px 100px rgba(0,0,0,.6), 0 0 0 1px rgba(255,255,255,.04);
    animation: lp-sc-in-b-ipco9b1h7q .28s cubic-bezier(.22,.68,0,1.15);
    transition: opacity .12s ease;
}
.lp-sc-out[b-ipco9b1h7q] { opacity: 0; transform: translateY(5px); }

@keyframes lp-sc-in-b-ipco9b1h7q {
    from { opacity: 0; transform: translateY(22px) scale(.96); }
    to   { opacity: 1; transform: none; }
}

/* ── Info panel (left) ─────────────────────────────────────────────────── */
.lp-sc-info[b-ipco9b1h7q] {
    position: relative;
    flex: 0 0 50%;
    padding: 34px 30px 26px;
    background: #080c18;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
}

.lp-sc-close[b-ipco9b1h7q] {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255,255,255,.05);
    border: 1px solid rgba(255,255,255,.1);
    color: rgba(255,255,255,.4);
    cursor: pointer;
    transition: all .15s;
}
.lp-sc-close:hover[b-ipco9b1h7q] { background: rgba(255,255,255,.12); color: #fff; }

.lp-sc-icon[b-ipco9b1h7q] {
    width: 42px;
    height: 42px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 10px;
    flex-shrink: 0;
}
.lp-sc-counter[b-ipco9b1h7q] {
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    margin-bottom: 5px;
}
.lp-sc-title[b-ipco9b1h7q] {
    font-size: 21px;
    font-weight: 800;
    color: #fff;
    margin-bottom: 3px;
    line-height: 1.2;
}
.lp-sc-sub[b-ipco9b1h7q] {
    font-size: 13px;
    font-weight: 500;
    color: rgba(255,255,255,.5);
    margin-bottom: 10px;
}
.lp-sc-desc[b-ipco9b1h7q] {
    font-size: 12.5px;
    line-height: 1.65;
    color: rgba(255,255,255,.5);
    margin-bottom: 14px;
}

/* Bullets */
.lp-sc-bullets[b-ipco9b1h7q] {
    list-style: none;
    padding: 0;
    margin: 0 0 auto;
    display: flex;
    flex-direction: column;
    gap: 7px;
}
.lp-sc-bullets li[b-ipco9b1h7q] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    color: rgba(255,255,255,.68);
}
.lp-sc-check[b-ipco9b1h7q] {
    font-size: 15px !important;
    flex-shrink: 0;
}

/* Footer */
.lp-sc-footer[b-ipco9b1h7q] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 16px;
    padding-top: 13px;
    border-top: 1px solid rgba(255,255,255,.07);
}
.lp-sc-dots[b-ipco9b1h7q] {
    display: flex;
    gap: 5px;
    align-items: center;
}
.lp-sc-dot[b-ipco9b1h7q] {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: rgba(255,255,255,.18);
    border: none;
    cursor: pointer;
    transition: all .18s;
    padding: 0;
}
.lp-sc-dot.lp-sc-dot-on[b-ipco9b1h7q] {
    width: 20px;
    border-radius: 3px;
}
.lp-sc-dot:not(.lp-sc-dot-on):hover[b-ipco9b1h7q] { background: rgba(255,255,255,.4); }

.lp-sc-nav[b-ipco9b1h7q] { display: flex; gap: 6px; }
.lp-sc-nav-btn[b-ipco9b1h7q] {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255,255,255,.06);
    border: 1px solid rgba(255,255,255,.1);
    color: rgba(255,255,255,.55);
    cursor: pointer;
    transition: all .15s;
}
.lp-sc-nav-btn:hover[b-ipco9b1h7q] { background: rgba(255,255,255,.12); color: #fff; }
.lp-sc-nav-primary[b-ipco9b1h7q] { border: none !important; color: #fff !important; }
.lp-sc-nav-primary:hover[b-ipco9b1h7q] { filter: brightness(1.12); }

/* ── Visual panel (right) ──────────────────────────────────────────────── */
.lp-sc-visual[b-ipco9b1h7q] {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 28px 24px;
    transition: background .15s ease;
}

/* ── Fake window mockup ────────────────────────────────────────────────── */
.lp-scm-win[b-ipco9b1h7q] {
    width: 100%;
    max-width: 310px;
    border-radius: 11px;
    overflow: hidden;
    background: rgba(8, 12, 26, .92);
    border: 1px solid rgba(255,255,255,.1);
    box-shadow: 0 20px 48px rgba(0,0,0,.45);
}
.lp-scm-chrome[b-ipco9b1h7q] {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 7px 11px;
    background: rgba(255,255,255,.04);
    border-bottom: 1px solid rgba(255,255,255,.07);
}
.lp-scm-dot-r[b-ipco9b1h7q] { width: 7px; height: 7px; border-radius: 50%; background: #ff5f57; flex-shrink: 0; }
.lp-scm-dot-y[b-ipco9b1h7q] { width: 7px; height: 7px; border-radius: 50%; background: #febc2e; flex-shrink: 0; }
.lp-scm-dot-g[b-ipco9b1h7q] { width: 7px; height: 7px; border-radius: 50%; background: #28c840; flex-shrink: 0; }
.lp-scm-ttl[b-ipco9b1h7q] {
    font-size: 9.5px;
    font-weight: 600;
    color: rgba(255,255,255,.35);
    margin: 0 auto;
    letter-spacing: .03em;
}
.lp-scm-body[b-ipco9b1h7q] {
    padding: 11px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

/* Shared row */
.lp-scm-row[b-ipco9b1h7q] {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 5px 7px;
    border-radius: 6px;
    background: rgba(255,255,255,.03);
    font-size: 11px;
}
.lp-scm-ico[b-ipco9b1h7q]   { font-size: 7px; flex-shrink: 0; }
.lp-scm-name[b-ipco9b1h7q]  { flex: 1; color: rgba(255,255,255,.72); font-size: 10.5px; }
.lp-scm-qty[b-ipco9b1h7q]   { color: rgba(255,255,255,.32); font-size: 10px; flex-shrink: 0; }
.lp-scm-price[b-ipco9b1h7q] { color: rgba(255,255,255,.82); font-size: 11px; font-weight: 600; font-family: monospace; flex-shrink: 0; }

/* POS total */
.lp-scm-total-row[b-ipco9b1h7q] {
    display: flex;
    justify-content: space-between;
    padding: 5px 7px;
    border-top: 1px solid rgba(255,255,255,.08);
    font-size: 11px;
    font-weight: 700;
    color: rgba(255,255,255,.85);
    margin-top: 1px;
}
.lp-scm-paybtn[b-ipco9b1h7q] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    padding: 7px;
    border-radius: 7px;
    color: #fff;
    font-size: 11px;
    font-weight: 600;
}

/* Status badges */
.lp-scm-badge[b-ipco9b1h7q] {
    font-size: 9px;
    font-weight: 700;
    padding: 2px 6px;
    border-radius: 4px;
    flex-shrink: 0;
}
.lp-scm-ok[b-ipco9b1h7q]   { background: rgba(16,185,129,.14); color: #10b981; }
.lp-scm-low[b-ipco9b1h7q]  { background: rgba(245,158,11,.14);  color: #f59e0b; }
.lp-scm-crit[b-ipco9b1h7q] { background: rgba(239,68,68,.14);   color: #ef4444; }

/* Action button */
.lp-scm-action-btn[b-ipco9b1h7q] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 6px;
    border-radius: 6px;
    font-size: 10.5px;
    font-weight: 600;
    border: 1px solid;
    margin-top: 1px;
}

/* Sales KPI + chart */
.lp-scm-kpis[b-ipco9b1h7q] { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; margin-bottom: 8px; }
.lp-scm-kpi[b-ipco9b1h7q] { padding: 8px 9px; border-radius: 7px; border-left: 2px solid; background: rgba(255,255,255,.03); }
.lp-scm-kpi-val[b-ipco9b1h7q] { font-size: 14px; font-weight: 700; font-family: monospace; }
.lp-scm-kpi-lbl[b-ipco9b1h7q] { font-size: 9px; color: rgba(255,255,255,.35); margin-top: 2px; }
.lp-scm-chart[b-ipco9b1h7q] {
    display: flex;
    align-items: flex-end;
    gap: 3px;
    height: 55px;
    padding: 0 2px;
}
.lp-scm-chart-bar[b-ipco9b1h7q] {
    flex: 1;
    height: var(--bh, 50%);
    background: rgba(139,92,246,.28);
    border-radius: 3px 3px 0 0;
}
.lp-scm-chart-bar-hi[b-ipco9b1h7q] { background: #8b5cf6; }
.lp-scm-chart-lbl[b-ipco9b1h7q] { font-size: 9px; color: rgba(255,255,255,.28); text-align: center; margin-top: 4px; }

/* User rows */
.lp-scm-user[b-ipco9b1h7q] {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 7px;
    border-radius: 7px;
    background: rgba(255,255,255,.03);
}
.lp-scm-av[b-ipco9b1h7q] {
    width: 28px;
    height: 28px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    font-weight: 700;
    flex-shrink: 0;
}
.lp-scm-av-lg[b-ipco9b1h7q] { width: 36px; height: 36px; font-size: 12px; border-radius: 10px; }
.lp-scm-uname[b-ipco9b1h7q] { font-size: 11px; font-weight: 600; color: rgba(255,255,255,.78); }
.lp-scm-role-badge[b-ipco9b1h7q] {
    display: inline-block;
    font-size: 9px;
    font-weight: 700;
    padding: 1px 6px;
    border-radius: 4px;
    margin-top: 2px;
}

/* Transaction rows */
.lp-scm-txn[b-ipco9b1h7q] {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 5px 7px;
    border-radius: 6px;
    background: rgba(255,255,255,.03);
}
.lp-scm-txn-no[b-ipco9b1h7q]   { color: rgba(255,255,255,.42); font-family: monospace; flex: 1; font-size: 9.5px; }
.lp-scm-txn-date[b-ipco9b1h7q] { color: rgba(255,255,255,.32); font-size: 10px; flex-shrink: 0; }
.lp-scm-txn-amt[b-ipco9b1h7q]  { color: rgba(255,255,255,.8); font-weight: 600; font-family: monospace; font-size: 10.5px; flex-shrink: 0; }

/* PO flow */
.lp-scm-flow[b-ipco9b1h7q] {
    display: flex;
    align-items: center;
    gap: 5px;
    margin-bottom: 9px;
    padding: 8px 10px;
    background: rgba(255,255,255,.03);
    border-radius: 7px;
}
.lp-scm-flow-done[b-ipco9b1h7q] {
    font-size: 9.5px;
    font-weight: 700;
    padding: 3px 8px;
    border-radius: 5px;
    border: 1px solid rgba(16,185,129,.4);
    color: #10b981;
    background: rgba(16,185,129,.08);
}
.lp-scm-flow-active[b-ipco9b1h7q] {
    font-size: 9.5px;
    font-weight: 700;
    padding: 3px 8px;
    border-radius: 5px;
    border: 1px solid;
}
.lp-scm-flow-arrow[b-ipco9b1h7q] { color: rgba(255,255,255,.2); font-size: 11px; }

.lp-scm-po-card[b-ipco9b1h7q] {
    padding: 10px 11px;
    border-radius: 8px;
    background: rgba(255,255,255,.03);
    border-left: 3px solid rgba(249,115,22,.5);
}
.lp-scm-po-num[b-ipco9b1h7q] { font-size: 10px; font-family: monospace; color: #f97316; font-weight: 700; margin-bottom: 3px; }
.lp-scm-po-vendor[b-ipco9b1h7q] { font-size: 10.5px; color: rgba(255,255,255,.65); margin-bottom: 6px; }
.lp-scm-po-row[b-ipco9b1h7q] { display: flex; align-items: center; justify-content: space-between; font-size: 10px; color: rgba(255,255,255,.4); }

/* Customer stats */
.lp-scm-cust-hdr[b-ipco9b1h7q] {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 9px;
    padding-bottom: 9px;
    border-bottom: 1px solid rgba(255,255,255,.07);
}
.lp-scm-cust-stats[b-ipco9b1h7q] { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; margin-bottom: 8px; }
.lp-scm-stat[b-ipco9b1h7q] { padding: 8px 9px; border-radius: 7px; background: rgba(255,255,255,.03); }
.lp-scm-stat-val[b-ipco9b1h7q] { font-size: 14px; font-weight: 700; font-family: monospace; }
.lp-scm-stat-lbl[b-ipco9b1h7q] { font-size: 9px; color: rgba(255,255,255,.32); margin-top: 2px; }

/* Devices grid */
.lp-scm-devices[b-ipco9b1h7q] { display: flex; gap: 10px; justify-content: center; width: 100%; max-width: 320px; }
.lp-scm-dev[b-ipco9b1h7q] {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 16px 10px;
    border-radius: 12px;
    border: 1px solid;
    background: rgba(255,255,255,.03);
    gap: 5px;
    text-align: center;
}
.lp-scm-dev-lbl[b-ipco9b1h7q] { font-size: 10.5px; font-weight: 600; color: rgba(255,255,255,.65); }
.lp-scm-dev-sub[b-ipco9b1h7q] { font-size: 9px; color: rgba(255,255,255,.32); }

/* ── Responsive ─────────────────────────────────────────────────────────── */
@media (max-width: 700px) {
    .lp-sc-modal[b-ipco9b1h7q] { flex-direction: column; height: auto; max-height: 92vh; border-radius: 18px; }
    .lp-sc-info[b-ipco9b1h7q]  { flex: none; padding: 24px 20px 20px; }
    .lp-sc-visual[b-ipco9b1h7q] { min-height: 200px; padding: 20px; }
    .lp-scm-win[b-ipco9b1h7q]  { max-width: 100%; }
}
/* _content/MiniMartBlazorPOS/Components/Pages/Inventory/PurchaseOrderDetail.razor.rz.scp.css */
/* ── Info card ───────────────────────────────────────────────────────────── */
.pod-info-card[b-iii78iy70o] {
    background: var(--bar-bg);
    border: 1px solid var(--bar-border);
    box-shadow: 0 1px 3px rgba(0,0,0,.04);
}

.pod-info-grid[b-iii78iy70o] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px 24px;
}

@media (max-width: 900px) {
    .pod-info-grid[b-iii78iy70o] { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 600px) {
    .pod-info-grid[b-iii78iy70o] { grid-template-columns: 1fr; }
}

.pod-info-label[b-iii78iy70o] {
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--bar-sub);
    margin-bottom: 3px;
}

.pod-info-value[b-iii78iy70o] {
    font-size: 14px;
    font-weight: 500;
    color: var(--bar-text);
    line-height: 1.4;
}

/* ── Type badges ─────────────────────────────────────────────────────────── */
.pod-type-badge[b-iii78iy70o] {
    display: inline-flex;
    align-items: center;
    padding: 2px 10px;
    border-radius: 100px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .03em;
}

.pod-type-standard[b-iii78iy70o] {
    background: rgb(var(--b500)/.1);
    color: rgb(var(--b700));
    border: 1px solid rgb(var(--b500)/.2);
}

.pod-type-blanket[b-iii78iy70o] {
    background: rgba(139,92,246,.1);
    color: #7c3aed;
    border: 1px solid rgba(139,92,246,.2);
}

/* ── Status badges ───────────────────────────────────────────────────────── */
.pod-status-badge[b-iii78iy70o] {
    display: inline-flex;
    align-items: center;
    padding: 3px 10px;
    border-radius: 100px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .03em;
    white-space: nowrap;
}

.pod-status-draft[b-iii78iy70o]            { background: rgba(148,163,184,.15); color: #475569; border: 1px solid rgba(148,163,184,.3); }
.pod-status-open[b-iii78iy70o]             { background: rgb(var(--b500)/.1);  color: rgb(var(--b700)); border: 1px solid rgb(var(--b500)/.2); }
.pod-status-partiallyreceived[b-iii78iy70o]{ background: rgba(245,158,11,.12);  color: #b45309; border: 1px solid rgba(245,158,11,.25); }
.pod-status-fullyreceived[b-iii78iy70o]    { background: rgba(16,185,129,.1);   color: #047857; border: 1px solid rgba(16,185,129,.2); }
.pod-status-closed[b-iii78iy70o]           { background: rgba(100,116,139,.1);  color: #475569; border: 1px solid rgba(100,116,139,.2); }
.pod-status-cancelled[b-iii78iy70o]        { background: rgba(239,68,68,.1);    color: #dc2626; border: 1px solid rgba(239,68,68,.2); }

/* ── Tab bar ─────────────────────────────────────────────────────────────── */
.pod-tab-bar[b-iii78iy70o] {
    display: flex;
    gap: 2px;
    border-bottom: 1px solid var(--bar-border);
    padding-bottom: 0;
}

.pod-tab[b-iii78iy70o] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 9px 16px;
    border-radius: 10px 10px 0 0;
    border: 1px solid transparent;
    border-bottom: none;
    font-size: 13px;
    font-weight: 500;
    color: var(--bar-sub);
    cursor: pointer;
    background: transparent;
    transition: color .15s, background .15s;
    white-space: nowrap;
    position: relative;
    bottom: -1px;
}

.pod-tab:hover[b-iii78iy70o] {
    color: var(--bar-text);
    background: var(--bar-bg);
}

.pod-tab-active[b-iii78iy70o] {
    color: rgb(var(--b600));
    background: var(--bar-bg);
    border-color: var(--bar-border);
    border-bottom-color: var(--bar-bg);
    font-weight: 600;
}

.pod-tab-count[b-iii78iy70o] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: 100px;
    font-size: 10px;
    font-weight: 700;
    background: rgba(148,163,184,.2);
    color: var(--bar-sub);
}

.pod-tab-active .pod-tab-count[b-iii78iy70o] {
    background: rgb(var(--b500)/.15);
    color: rgb(var(--b600));
}

/* ── Action buttons ──────────────────────────────────────────────────────── */
.pod-btn-send[b-iii78iy70o] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    border-radius: 10px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: all .15s;
    border: none;
    background: rgb(var(--b500));
    color: #fff;
}

.pod-btn-send:hover[b-iii78iy70o] {
    background: rgb(var(--b600));
    box-shadow: 0 2px 8px rgb(var(--b500)/.35);
}

.pod-btn-receive[b-iii78iy70o] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    border-radius: 10px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: all .15s;
    border: none;
    background: #059669;
    color: #fff;
}

.pod-btn-receive:hover[b-iii78iy70o] {
    background: #047857;
    box-shadow: 0 2px 8px rgba(5,150,105,.35);
}

.pod-btn-close[b-iii78iy70o] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    border-radius: 10px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: all .15s;
    border: 1px solid var(--bar-border);
    background: var(--bar-bg);
    color: var(--bar-text);
}

.pod-btn-close:hover[b-iii78iy70o] {
    background: var(--page-bg);
    border-color: rgba(148,163,184,.5);
}

.pod-btn-cancel-po[b-iii78iy70o] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    border-radius: 10px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: all .15s;
    border: 1px solid rgba(239,68,68,.3);
    background: rgba(239,68,68,.06);
    color: #dc2626;
}

.pod-btn-cancel-po:hover[b-iii78iy70o] {
    background: rgba(239,68,68,.12);
    border-color: rgba(239,68,68,.45);
}

/* ── Bill status badges ──────────────────────────────────────────────────── */
.pod-bill-badge[b-iii78iy70o] {
    display: inline-flex;
    align-items: center;
    padding: 2px 9px;
    border-radius: 100px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .03em;
}

.pod-bill-unpaid[b-iii78iy70o]       { background: rgba(239,68,68,.1);    color: #dc2626; border: 1px solid rgba(239,68,68,.2); }
.pod-bill-paid[b-iii78iy70o]         { background: rgba(16,185,129,.1);   color: #047857; border: 1px solid rgba(16,185,129,.2); }
.pod-bill-partiallypaid[b-iii78iy70o]{ background: rgba(245,158,11,.12);  color: #b45309; border: 1px solid rgba(245,158,11,.25); }

/* ── 3-Way Match status ──────────────────────────────────────────────────── */
.pod-match-ok[b-iii78iy70o] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 12px;
    font-weight: 600;
    color: #059669;
}

.pod-match-warn[b-iii78iy70o] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 12px;
    font-weight: 600;
    color: #d97706;
}

.pod-match-none[b-iii78iy70o] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 12px;
    font-weight: 500;
    color: var(--bar-sub);
}

/* ── Table theme ─────────────────────────────────────────────────────────── */
.pod-thead-row[b-iii78iy70o] { background: var(--page-bg); }
.pod-tfoot-row[b-iii78iy70o] { background: var(--page-bg); }

/* ── Sticky right columns (Qty to Receive + Unit Cost) ───────────────────── */
.pod-sticky-col[b-iii78iy70o] {
    position: sticky;
    background: var(--bar-bg);
    z-index: 1;
}

.pod-tr-hover:hover .pod-sticky-col[b-iii78iy70o] {
    background: var(--page-bg);
}

.pod-thead-row .pod-sticky-col[b-iii78iy70o] {
    background: var(--page-bg);
    z-index: 2;
}

/* right-0 for last col, right-[108px] (w-24 input + px-3*2) for second-to-last */
.pod-sticky-col-2[b-iii78iy70o] { right: 0; }
.pod-sticky-col-1[b-iii78iy70o] { right: 108px; border-right: 1px solid var(--bar-border); }

.pod-tr-hover:hover[b-iii78iy70o] { background: var(--page-bg); }

.pod-sub-thead-row[b-iii78iy70o] {
    background: var(--page-bg);
    border-bottom: 1px solid var(--bar-border);
}

/* Themed row divider — replaces divide-y divide-slate-50 */
.pod-tbody > tr + tr[b-iii78iy70o] {
    border-top: 1px solid var(--bar-border);
}

/* ── Info summary cell (settle bill) ─────────────────────────────────────── */
.pod-info-cell[b-iii78iy70o] {
    padding: 12px;
    border-radius: 12px;
    background: var(--page-bg);
    border: 1px solid var(--bar-border);
}

/* ── Form controls ───────────────────────────────────────────────────────── */
.pod-label[b-iii78iy70o] {
    display: block;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--bar-sub);
    margin-bottom: 5px;
}

.pod-input[b-iii78iy70o] {
    padding: 8px 12px;
    border-radius: 10px;
    border: 1px solid var(--bar-border);
    background: var(--page-bg);
    color: var(--bar-text);
    font-size: 13px;
    transition: border-color .15s, box-shadow .15s;
}

.pod-input:focus[b-iii78iy70o] {
    outline: none;
    border-color: rgb(var(--b500));
    box-shadow: 0 0 0 3px rgb(var(--b500)/.12);
}

textarea.pod-input[b-iii78iy70o] {
    resize: vertical;
    min-height: 64px;
}
/* _content/MiniMartBlazorPOS/Components/Pages/Inventory/PurchaseOrders.razor.rz.scp.css */
/* ── Full-width DatePicker override ─────────────────────────────────────── */
.po-date-full[b-77w6kauf1d]  .dp-wrap {
    display: flex;
    width: 100%;
}

/* ── KPI Row ─────────────────────────────────────────────────────────────── */
.po-kpi-row[b-77w6kauf1d] {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 12px;
}

@media (max-width: 900px) {
    .po-kpi-row[b-77w6kauf1d] { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 600px) {
    .po-kpi-row[b-77w6kauf1d] { grid-template-columns: repeat(2, 1fr); }
}

.po-kpi-card[b-77w6kauf1d] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    border-radius: 16px;
    background: var(--bar-bg);
    border: 1px solid var(--bar-border);
    box-shadow: 0 1px 3px rgba(0,0,0,.04);
}

.po-kpi-icon[b-77w6kauf1d] {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.po-kpi-icon .material-symbols-outlined[b-77w6kauf1d] { font-size: 20px; }

.po-kpi-icon-slate[b-77w6kauf1d]  { background: rgba(148,163,184,.15); color: #64748b; }
.po-kpi-icon-blue[b-77w6kauf1d]   { background: rgba(59,130,246,.12);  color: #2563eb; }
.po-kpi-icon-red[b-77w6kauf1d]    { background: rgba(239,68,68,.12);   color: #dc2626; }
.po-kpi-icon-green[b-77w6kauf1d]  { background: rgba(16,185,129,.12);  color: #059669; }
.po-kpi-icon-amber[b-77w6kauf1d]  { background: rgba(245,158,11,.12);  color: #d97706; }

.po-kpi-body[b-77w6kauf1d] { flex: 1; min-width: 0; }

.po-kpi-num[b-77w6kauf1d] {
    font-size: 22px;
    font-weight: 700;
    line-height: 1.1;
    color: var(--bar-text);
}

.po-kpi-num-blue[b-77w6kauf1d]  { color: #2563eb; }
.po-kpi-num-red[b-77w6kauf1d]   { color: #dc2626; }
.po-kpi-num-green[b-77w6kauf1d] { color: #059669; }

.po-kpi-lbl[b-77w6kauf1d] {
    font-size: 11px;
    font-weight: 500;
    color: var(--bar-sub);
    margin-top: 2px;
}

/* ── Form controls ───────────────────────────────────────────────────────── */
.po-label[b-77w6kauf1d] {
    display: block;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--bar-sub);
    margin-bottom: 5px;
}

.po-input[b-77w6kauf1d] {
    width: 100%;
    padding: 8px 12px;
    border-radius: 10px;
    border: 1px solid var(--bar-border);
    background: var(--page-bg);
    color: var(--bar-text);
    font-size: 13px;
    transition: border-color .15s, box-shadow .15s;
}

.po-input:focus[b-77w6kauf1d] {
    outline: none;
    border-color: rgb(var(--b500));
    box-shadow: 0 0 0 3px rgb(var(--b500)/.12);
}

.po-select[b-77w6kauf1d] {
    padding: 8px 12px;
    border-radius: 10px;
    border: 1px solid var(--bar-border);
    background: var(--page-bg);
    color: var(--bar-text);
    font-size: 13px;
    transition: border-color .15s;
    cursor: pointer;
}

.po-select:focus[b-77w6kauf1d] {
    outline: none;
    border-color: rgb(var(--b500));
    box-shadow: 0 0 0 3px rgb(var(--b500)/.12);
}

/* ── Type badges ─────────────────────────────────────────────────────────── */
.po-type-badge[b-77w6kauf1d] {
    display: inline-flex;
    align-items: center;
    padding: 2px 10px;
    border-radius: 100px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .03em;
}

.po-type-standard[b-77w6kauf1d] {
    background: rgb(var(--b500)/.1);
    color: rgb(var(--b700));
    border: 1px solid rgb(var(--b500)/.2);
}

.po-type-blanket[b-77w6kauf1d] {
    background: rgba(139,92,246,.1);
    color: #7c3aed;
    border: 1px solid rgba(139,92,246,.2);
}

/* ── Status badges ───────────────────────────────────────────────────────── */
.po-status-badge[b-77w6kauf1d] {
    display: inline-flex;
    align-items: center;
    padding: 3px 10px;
    border-radius: 100px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .03em;
}

.po-status-draft[b-77w6kauf1d]            { background: rgba(148,163,184,.15); color: #475569; border: 1px solid rgba(148,163,184,.3); }
.po-status-open[b-77w6kauf1d]             { background: rgb(var(--b500)/.1);  color: rgb(var(--b700)); border: 1px solid rgb(var(--b500)/.2); }
.po-status-partiallyreceived[b-77w6kauf1d]{ background: rgba(245,158,11,.12);  color: #b45309; border: 1px solid rgba(245,158,11,.25); }
.po-status-fullyreceived[b-77w6kauf1d]    { background: rgba(16,185,129,.1);   color: #047857; border: 1px solid rgba(16,185,129,.2); }
.po-status-received[b-77w6kauf1d]         { background: rgba(16,185,129,.1);   color: #047857; border: 1px solid rgba(16,185,129,.2); }
.po-status-closed[b-77w6kauf1d]           { background: rgba(100,116,139,.1);  color: #475569; border: 1px solid rgba(100,116,139,.2); }
.po-status-cancelled[b-77w6kauf1d]        { background: rgba(239,68,68,.1);    color: #dc2626; border: 1px solid rgba(239,68,68,.2); }

/* ── PO type pill toggle ─────────────────────────────────────────────────── */
.po-type-toggle[b-77w6kauf1d] {
    display: inline-flex;
    gap: 4px;
    padding: 4px;
    border-radius: 12px;
    border: 1px solid var(--bar-border);
    background: var(--page-bg);
}

.po-type-btn[b-77w6kauf1d] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 34px;
    padding: 0 18px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 500;
    color: var(--bar-sub);
    background: transparent;
    border: none;
    cursor: pointer;
    transition: background .15s, color .15s;
}

.po-type-btn:hover[b-77w6kauf1d] {
    color: var(--bar-text);
    background: rgb(var(--b500)/.06);
}

.po-type-btn-active[b-77w6kauf1d] {
    background: rgb(var(--b600));
    color: #fff;
    font-weight: 600;
}

.po-type-btn-blanket.po-type-btn-active[b-77w6kauf1d] {
    background: #7c3aed;
}

/* ── Radio cards (PO type selector) ─────────────────────────────────────── */
.po-radio-card[b-77w6kauf1d] {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 12px 10px;
    border-radius: 12px;
    border: 2px solid var(--bar-border);
    background: var(--page-bg);
    cursor: pointer;
    transition: all .15s;
    color: var(--bar-sub);
    text-align: center;
}

.po-radio-card:hover[b-77w6kauf1d] {
    border-color: rgb(var(--b400)/.5);
}

.po-radio-active[b-77w6kauf1d] {
    border-color: rgb(var(--b500));
    background: rgb(var(--b500)/.06);
    color: rgb(var(--b700));
}

/* ── Shake animation ─────────────────────────────────────────────────────── */
@keyframes po-shake-kf-b-77w6kauf1d {
    0%,100% { transform: translateX(0); }
    15%     { transform: translateX(-6px); }
    30%     { transform: translateX(6px); }
    45%     { transform: translateX(-4px); }
    60%     { transform: translateX(4px); }
    75%     { transform: translateX(-2px); }
    90%     { transform: translateX(2px); }
}

.po-shake[b-77w6kauf1d] { animation: po-shake-kf-b-77w6kauf1d 0.45s ease; }

/* ── Reorder Suggestions table ───────────────────────────────────────────── */
.ro-thead[b-77w6kauf1d] {
    position: sticky;
    top: 0;
    z-index: 1;
    background: var(--page-bg);
    border-bottom: 2px solid var(--bar-border);
}

.ro-th[b-77w6kauf1d] {
    padding: 10px 14px;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .07em;
    color: var(--bar-sub);
    white-space: nowrap;
    text-align: left;
    vertical-align: middle;
    background: var(--page-bg);
}

.ro-th-center[b-77w6kauf1d] { text-align: center; }
.ro-th-right[b-77w6kauf1d]  { text-align: right; }

.ro-td[b-77w6kauf1d] {
    padding: 10px 14px;
    font-size: 13px;
    color: var(--bar-sub);
    border-top: 1px solid var(--bar-border);
    vertical-align: middle;
}

.ro-td-center[b-77w6kauf1d] { text-align: center; }
.ro-td-right[b-77w6kauf1d]  { text-align: right; }

.ro-tr[b-77w6kauf1d] { transition: background .1s; }
.ro-tr:hover .ro-td[b-77w6kauf1d] { background: var(--sb-hover-bg); }
.ro-tr-dim[b-77w6kauf1d] { opacity: .4; }
.ro-tr-dim:hover[b-77w6kauf1d] { opacity: .65; }

.ro-input[b-77w6kauf1d] {
    padding: 5px 8px;
    border-radius: 8px;
    border: 1px solid var(--bar-border);
    background: var(--bar-bg);
    color: var(--bar-text);
    font-size: 13px;
    transition: border-color .15s, box-shadow .15s;
}

.ro-input:focus[b-77w6kauf1d] {
    outline: none;
    border-color: rgb(var(--b500));
    box-shadow: 0 0 0 3px rgb(var(--b500)/.12);
}

.ro-tfoot[b-77w6kauf1d] {
    background: var(--page-bg);
    border-top: 2px solid var(--bar-border);
}

.ro-tfoot .ro-td[b-77w6kauf1d] {
    border-top: none;
    padding-top: 12px;
    padding-bottom: 12px;
}
/* _content/MiniMartBlazorPOS/Components/Pages/Inventory/StockCount.razor.rz.scp.css */
/* ── Table ────────────────────────────────────────────────────────────────── */
.inv-table[b-arivcxmf7p] {
    border-collapse: collapse;
    table-layout: fixed;
}

.inv-th[b-arivcxmf7p] {
    padding: 11px 16px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--bar-sub);
    white-space: nowrap;
    text-align: left;
    vertical-align: bottom;
}

.inv-th-center[b-arivcxmf7p] { text-align: center; }
.inv-th-right[b-arivcxmf7p]  { text-align: right; }

.inv-td[b-arivcxmf7p] {
    padding: 13px 16px;
    font-size: 13px;
    color: var(--bar-sub);
    border-top: 1px solid var(--bar-border);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.inv-td-center[b-arivcxmf7p] { text-align: center; overflow: visible; }
.inv-td-right[b-arivcxmf7p]  { text-align: right; }
.inv-td-mono[b-arivcxmf7p]   { font-family: monospace; font-size: 12px; color: var(--bar-text); font-weight: 600; }

/* Row number badge */
.inv-row-num[b-arivcxmf7p] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 22px; height: 22px;
    padding: 0 5px;
    border-radius: 11px;
    font-size: 11px;
    font-weight: 700;
    background: var(--sb-hover-bg);
    color: var(--bar-sub);
}

.inv-tr[b-arivcxmf7p] { transition: background .1s; }
.inv-tr:hover td[b-arivcxmf7p] { background: var(--sb-hover-bg); }

/* Editing row highlight */
.sc-editing-row td[b-arivcxmf7p] { background: rgb(var(--b50)/.5) !important; }
html.dark .sc-editing-row td[b-arivcxmf7p] { background: rgb(var(--b900)/.18) !important; }

/* ── Pagination ───────────────────────────────────────────────────────────── */
.inv-page-btn[b-arivcxmf7p] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 32px; height: 32px;
    padding: 0 6px;
    border-radius: 8px;
    border: 1px solid var(--bar-border);
    background: var(--page-bg);
    color: var(--bar-sub);
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: all .15s;
}

.inv-page-btn:hover:not(:disabled)[b-arivcxmf7p] {
    border-color: rgb(var(--b400));
    color: rgb(var(--b600));
    background: rgb(var(--b50) / 1);
}

.inv-page-btn:disabled[b-arivcxmf7p] { opacity: .4; cursor: not-allowed; }

.inv-page-btn-active[b-arivcxmf7p] {
    background: rgb(var(--b600)) !important;
    color: #fff !important;
    border-color: rgb(var(--b600)) !important;
    font-weight: 700;
}
/* _content/MiniMartBlazorPOS/Components/Pages/Login.razor.rz.scp.css */
/* ── Root: full-screen deep blue-black, no scroll ─────────────────────── */
.login-root[b-qnz7ldl9a0] {
    position: relative;
    display: flex;
    width: 100vw;
    height: 100vh;
    overflow: hidden;
    background: #080c1e;
}

/* ── Ambient glow layers ──────────────────────────────────────────────── */
.login-glow[b-qnz7ldl9a0] {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    z-index: 0;
}
.login-glow-tr[b-qnz7ldl9a0] {
    width: 700px;
    height: 700px;
    background: radial-gradient(circle, rgba(99,102,241,.16) 0%, transparent 65%);
    top: -200px;
    right: -100px;
}
.login-glow-bl[b-qnz7ldl9a0] {
    width: 500px;
    height: 500px;
    background: radial-gradient(circle, rgba(59,130,246,.12) 0%, transparent 65%);
    bottom: -150px;
    left: -100px;
}

/* ── Left panel ───────────────────────────────────────────────────────── */
.login-left[b-qnz7ldl9a0] {
    position: relative;
    z-index: 1;
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40px;
    background: linear-gradient(145deg, #0b1030 0%, #0f153d 55%, #131a4a 100%);
    overflow: hidden;
}

/* Grid squares on left panel */
.login-left[b-qnz7ldl9a0]::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background-image:
        linear-gradient(rgba(99,102,241,.06) 1px, transparent 1px),
        linear-gradient(90deg, rgba(99,102,241,.06) 1px, transparent 1px);
    background-size: 48px 48px;
    mask-image: radial-gradient(ellipse 85% 85% at 50% 50%, black 20%, transparent 100%);
    -webkit-mask-image: radial-gradient(ellipse 85% 85% at 50% 50%, black 20%, transparent 100%);
}

/* ── Floating glow orbs (left panel) ─────────────────────────────────── */
.login-orb[b-qnz7ldl9a0] {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    z-index: 0;
}
.login-orb-1[b-qnz7ldl9a0] {
    width: 380px; height: 380px;
    top: -60px; right: 60px;
    background: radial-gradient(circle, rgba(99,102,241,.2) 0%, transparent 70%);
    animation: login-float1-b-qnz7ldl9a0 7s ease-in-out infinite;
}
.login-orb-2[b-qnz7ldl9a0] {
    width: 440px; height: 440px;
    bottom: -60px; left: -60px;
    background: radial-gradient(circle, rgba(59,130,246,.15) 0%, transparent 70%);
    animation: login-float2-b-qnz7ldl9a0 9s ease-in-out infinite;
}
.login-orb-3[b-qnz7ldl9a0] {
    width: 260px; height: 260px;
    top: 50%; left: 50%;
    background: radial-gradient(circle, rgba(129,140,248,.1) 0%, transparent 70%);
    transform: translate(-50%, -50%);
    animation: login-float3-b-qnz7ldl9a0 11s ease-in-out infinite;
}

@keyframes login-float1-b-qnz7ldl9a0 {
    0%,100% { transform: translate(0,0); }
    50%      { transform: translate(18px,-28px); }
}
@keyframes login-float2-b-qnz7ldl9a0 {
    0%,100% { transform: translate(0,0); }
    50%      { transform: translate(-14px,22px); }
}
@keyframes login-float3-b-qnz7ldl9a0 {
    0%,100% { transform: translate(-50%,-50%); }
    33%      { transform: translate(calc(-50% + 10px), calc(-50% - 18px)); }
    66%      { transform: translate(calc(-50% - 8px), calc(-50% + 10px)); }
}

.login-brand[b-qnz7ldl9a0] {
    position: relative;
    z-index: 1;
    text-align: center;
    max-width: 340px;
}

/* ── Pulse rings container ────────────────────────────────────────────── */
.login-rings[b-qnz7ldl9a0] {
    position: relative;
    width: 80px;
    height: 80px;
    margin: 0 auto 24px;
}

/* Pulse rings */
.login-ring[b-qnz7ldl9a0] {
    position: absolute;
    border-radius: 50%;
    border: 1.5px solid rgba(99,102,241,.35);
    top: 50%; left: 50%;
    transform: translate(-50%, -50%) scale(1);
    animation: login-ring-pulse-b-qnz7ldl9a0 2s ease-out infinite;
    opacity: 0;
}
.login-ring-1[b-qnz7ldl9a0] { width: 128px; height: 128px; animation-delay: 0s; }
.login-ring-2[b-qnz7ldl9a0] { width: 128px; height: 128px; animation-delay: 0.9s; border-color: rgba(99,102,241,.18); }

@keyframes login-ring-pulse-b-qnz7ldl9a0 {
    0%   { transform: translate(-50%, -50%) scale(.95); opacity: .5; }
    100% { transform: translate(-50%, -50%) scale(1.5);  opacity: 0; }
}

/* Spinning dashed ring */
.login-spin-ring[b-qnz7ldl9a0] {
    position: absolute;
    width: 176px;
    height: 176px;
    border-radius: 50%;
    border: 1px dashed rgba(129,140,248,.1);
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    animation: login-spin-slow-b-qnz7ldl9a0 20s linear infinite;
}

@keyframes login-spin-slow-b-qnz7ldl9a0 {
    from { transform: translate(-50%, -50%) rotate(0deg); }
    to   { transform: translate(-50%, -50%) rotate(360deg); }
}

/* Logo icon */
.login-logo[b-qnz7ldl9a0] {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    width: 80px;
    height: 80px;
    border-radius: 22px;
    background: linear-gradient(135deg, #3b82f6 0%, #6366f1 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 0 0 8px rgba(99,102,241,.12), 0 8px 32px rgba(99,102,241,.4);
}

.login-brand-name[b-qnz7ldl9a0] {
    font-size: 28px;
    font-weight: 800;
    color: #fff;
    letter-spacing: -.3px;
    margin-bottom: 10px;
}

.login-brand-desc[b-qnz7ldl9a0] {
    font-size: 13px;
    color: rgba(165,180,252,.6);
    line-height: 1.6;
    margin-bottom: 36px;
}

/* Feature rows */
.login-features[b-qnz7ldl9a0] {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.login-feat[b-qnz7ldl9a0] {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 13px 16px;
    border-radius: 12px;
    background: rgba(99,102,241,.06);
    border: 1px solid rgba(99,102,241,.14);
    font-size: 13px;
    color: rgba(165,180,252,.75);
    font-weight: 500;
    text-align: left;
    transition: background .15s, border-color .15s;
}
.login-feat:hover[b-qnz7ldl9a0] {
    background: rgba(99,102,241,.12);
    border-color: rgba(99,102,241,.24);
}

.login-feat-icon[b-qnz7ldl9a0] {
    width: 32px;
    height: 32px;
    border-radius: 9px;
    background: rgba(99,102,241,.2);
    color: #a5b4fc;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

/* ── Right panel ──────────────────────────────────────────────────────── */
.login-right[b-qnz7ldl9a0] {
    position: relative;
    z-index: 1;
    width: 440px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40px 48px;
    background: #080c1e;
    border-left: 1px solid rgba(99,102,241,.09);
}

.login-form-wrap[b-qnz7ldl9a0] {
    width: 100%;
}

.login-title[b-qnz7ldl9a0] {
    font-size: 24px;
    font-weight: 700;
    color: #fff;
    margin-bottom: 4px;
}
.login-subtitle[b-qnz7ldl9a0] {
    font-size: 13px;
    color: rgba(148,163,184,.6);
    margin-bottom: 28px;
}

/* Fields */
.login-field[b-qnz7ldl9a0] {
    margin-bottom: 18px;
}
.login-label[b-qnz7ldl9a0] {
    display: block;
    font-size: 10.5px;
    font-weight: 700;
    color: rgba(165,180,252,.7);
    text-transform: uppercase;
    letter-spacing: .7px;
    margin-bottom: 8px;
}
.login-input-wrap[b-qnz7ldl9a0] {
    position: relative;
}
.login-input-icon[b-qnz7ldl9a0] {
    position: absolute;
    left: 13px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 17px !important;
    color: #818cf8;
    pointer-events: none;
}
.login-input[b-qnz7ldl9a0] {
    width: 100%;
    padding: 12px 12px 12px 40px;
    background: rgba(99,102,241,.06);
    border: 1px solid rgba(99,102,241,.16);
    border-radius: 12px;
    font-size: 13.5px;
    color: #e2e8f0;
    outline: none;
    transition: border-color .2s, background .2s;
    box-sizing: border-box;
}
.login-input[b-qnz7ldl9a0]::placeholder {
    color: rgba(165,180,252,.3);
}
.login-input:focus[b-qnz7ldl9a0] {
    background: rgba(99,102,241,.1);
    border-color: #818cf8;
}
.login-input:disabled[b-qnz7ldl9a0] {
    opacity: .5;
    cursor: not-allowed;
}
.login-input-pwd[b-qnz7ldl9a0] {
    padding-right: 42px;
}
.login-pwd-toggle[b-qnz7ldl9a0] {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    padding: 2px;
    cursor: pointer;
    color: #818cf8;
    display: flex;
    align-items: center;
    transition: color .15s;
}
.login-pwd-toggle:hover[b-qnz7ldl9a0] {
    color: #a5b4fc;
}

/* Error */
.login-error[b-qnz7ldl9a0] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 13px;
    border-radius: 12px;
    background: rgba(239,68,68,.1);
    border: 1px solid rgba(239,68,68,.22);
    color: #fca5a5;
    font-size: 12.5px;
    margin-bottom: 18px;
}

/* Lockout variant — amber */
.login-error--locked[b-qnz7ldl9a0] {
    background: rgba(245,158,11,.1);
    border-color: rgba(245,158,11,.28);
    color: #fcd34d;
}

/* Submit */
.login-btn[b-qnz7ldl9a0] {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 13px 20px;
    background: linear-gradient(135deg, #3b82f6 0%, #6366f1 100%);
    color: #fff;
    font-size: 13.5px;
    font-weight: 600;
    border: none;
    border-radius: 12px;
    cursor: pointer;
    transition: opacity .15s, transform .1s, box-shadow .15s;
    box-shadow: 0 4px 24px rgba(99,102,241,.45);
    margin-top: 8px;
}
.login-btn:hover:not(:disabled)[b-qnz7ldl9a0] {
    opacity: .9;
    transform: translateY(-1px);
    box-shadow: 0 6px 30px rgba(99,102,241,.55);
}
.login-btn:active:not(:disabled)[b-qnz7ldl9a0] {
    opacity: .75;
    transform: translateY(0);
}
.login-btn:disabled[b-qnz7ldl9a0] {
    opacity: .4;
    cursor: not-allowed;
}
.login-spin[b-qnz7ldl9a0] {
    width: 16px;
    height: 16px;
    animation: login-spin-b-qnz7ldl9a0 .7s linear infinite;
}
@keyframes login-spin-b-qnz7ldl9a0 {
    to { transform: rotate(360deg); }
}

/* Pay Now button (subscription error shortcut) */
.login-pay-btn[b-qnz7ldl9a0] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    padding: 12px 20px;
    background: rgba(245,158,11,.12);
    border: 1px solid rgba(245,158,11,.35);
    color: #fbbf24;
    font-size: 13.5px;
    font-weight: 600;
    border-radius: 12px;
    text-decoration: none;
    margin-bottom: 10px;
    transition: background .15s, border-color .15s;
}
.login-pay-btn:hover[b-qnz7ldl9a0] {
    background: rgba(245,158,11,.2);
    border-color: rgba(245,158,11,.5);
    color: #fcd34d;
}

/* Copyright */
.login-copy[b-qnz7ldl9a0] {
    text-align: center;
    font-size: 11px;
    color: rgba(165,180,252,.4);
    margin-top: 28px;
}

/* ── FadeUp entry animations ──────────────────────────────────────────── */
.au[b-qnz7ldl9a0]  { animation: login-fadeup-b-qnz7ldl9a0 .55s cubic-bezier(.22,1,.36,1) both; }
.au1[b-qnz7ldl9a0] { animation: login-fadeup-b-qnz7ldl9a0 .55s .08s cubic-bezier(.22,1,.36,1) both; }
.au2[b-qnz7ldl9a0] { animation: login-fadeup-b-qnz7ldl9a0 .55s .16s cubic-bezier(.22,1,.36,1) both; }
.au3[b-qnz7ldl9a0] { animation: login-fadeup-b-qnz7ldl9a0 .55s .24s cubic-bezier(.22,1,.36,1) both; }
.au4[b-qnz7ldl9a0] { animation: login-fadeup-b-qnz7ldl9a0 .55s .40s cubic-bezier(.22,1,.36,1) both; }

@keyframes login-fadeup-b-qnz7ldl9a0 {
    from { opacity: 0; transform: translateY(18px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ── Responsive ───────────────────────────────────────────────────────── */
@media (max-width: 768px) {
    .login-left[b-qnz7ldl9a0] { display: none; }
    .login-right[b-qnz7ldl9a0] {
        width: 100%;
        border-left: none;
        background: #080c1e;
        padding: 40px 28px;
    }
}
/* _content/MiniMartBlazorPOS/Components/Pages/Pay.razor.rz.scp.css */
/* ── Root ─────────────────────────────────────────────────────────────── */
.pay-root[b-5qgrzssde0] {
    position: relative;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40px 16px;
    background: #080c1e;
    overflow: hidden;
}

/* Grid background */
.pay-grid[b-5qgrzssde0] {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background-image:
        linear-gradient(rgba(99,102,241,.05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(99,102,241,.05) 1px, transparent 1px);
    background-size: 48px 48px;
}

/* Ambient glows */
.pay-glow[b-5qgrzssde0] {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
}
.pay-glow-tr[b-5qgrzssde0] {
    width: 600px; height: 600px;
    background: radial-gradient(circle, rgba(99,102,241,.14) 0%, transparent 65%);
    top: -200px; right: -100px;
}
.pay-glow-bl[b-5qgrzssde0] {
    width: 400px; height: 400px;
    background: radial-gradient(circle, rgba(245,158,11,.10) 0%, transparent 65%);
    bottom: -150px; left: -100px;
}

/* ── Card wrap ────────────────────────────────────────────────────────── */
.pay-card-wrap[b-5qgrzssde0] {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 480px;
}

.pay-back-link[b-5qgrzssde0] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12.5px;
    font-weight: 500;
    color: rgba(165,180,252,.6);
    text-decoration: none;
    margin-bottom: 16px;
    transition: color .15s;
}
.pay-back-link:hover[b-5qgrzssde0] { color: rgba(165,180,252,.9); }

/* ── Card ─────────────────────────────────────────────────────────────── */
.pay-card[b-5qgrzssde0] {
    background: #0e1228;
    border: 1px solid rgba(99,102,241,.18);
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 20px 60px rgba(0,0,0,.5);
}

/* Header */
.pay-card-header[b-5qgrzssde0] {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 22px 24px 20px;
    border-bottom: 1px solid rgba(99,102,241,.14);
    background: linear-gradient(135deg, rgba(99,102,241,.08), rgba(245,158,11,.06));
}
.pay-header-icon[b-5qgrzssde0] {
    width: 52px;
    height: 52px;
    border-radius: 14px;
    background: linear-gradient(135deg, #f59e0b, #d97706);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    box-shadow: 0 4px 16px rgba(245,158,11,.35);
}
.pay-card-title[b-5qgrzssde0] {
    font-size: 18px;
    font-weight: 700;
    color: #f1f5f9;
    margin: 0 0 3px;
}
.pay-card-sub[b-5qgrzssde0] {
    font-size: 12.5px;
    color: rgba(148,163,184,.6);
    margin: 0;
}

/* ── Skeleton ─────────────────────────────────────────────────────────── */
.pay-skeleton-wrap[b-5qgrzssde0] {
    padding: 24px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.pay-skeleton[b-5qgrzssde0] {
    background: rgba(99,102,241,.08);
    border-radius: 10px;
    height: 20px;
    animation: pay-pulse-b-5qgrzssde0 1.5s ease-in-out infinite;
}
.pay-skeleton-full[b-5qgrzssde0]  { width: 100%; }
.pay-skeleton-half[b-5qgrzssde0]  { width: 55%; }

@keyframes pay-pulse-b-5qgrzssde0 {
    0%,100% { opacity: .5; }
    50%      { opacity: 1; }
}

/* ── Empty / error state ──────────────────────────────────────────────── */
.pay-empty[b-5qgrzssde0] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 40px 24px;
    color: rgba(148,163,184,.5);
    text-align: center;
}
.pay-empty-title[b-5qgrzssde0] {
    font-size: 15px;
    font-weight: 600;
    color: rgba(148,163,184,.7);
    margin: 0;
}
.pay-empty-sub[b-5qgrzssde0] {
    font-size: 12.5px;
    margin: 0;
}

/* ── Success state ────────────────────────────────────────────────────── */
.pay-success[b-5qgrzssde0] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    padding: 36px 24px;
    text-align: center;
}
.pay-success-icon[b-5qgrzssde0] {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    background: rgba(16,185,129,.1);
    border: 1px solid rgba(16,185,129,.3);
    display: flex;
    align-items: center;
    justify-content: center;
}
.pay-success-title[b-5qgrzssde0] {
    font-size: 18px;
    font-weight: 700;
    color: #f1f5f9;
    margin: 0;
}
.pay-success-msg[b-5qgrzssde0] {
    font-size: 13px;
    color: rgba(148,163,184,.7);
    line-height: 1.6;
    margin: 0;
    max-width: 320px;
}

/* Back / CTA button */
.pay-back-btn[b-5qgrzssde0] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 4px;
    padding: 10px 24px;
    background: linear-gradient(135deg, #3b82f6, #6366f1);
    color: #fff;
    font-size: 13.5px;
    font-weight: 600;
    border-radius: 12px;
    text-decoration: none;
    box-shadow: 0 4px 20px rgba(99,102,241,.4);
    transition: opacity .15s;
}
.pay-back-btn:hover[b-5qgrzssde0] { opacity: .88; }

/* ── Form body area ───────────────────────────────────────────────────── */
.pay-plan-card[b-5qgrzssde0] {
    margin: 20px 24px 0;
    padding: 14px 16px;
    border-radius: 14px;
    background: rgba(99,102,241,.06);
    border: 1px solid rgba(99,102,241,.14);
}
.pay-plan-row[b-5qgrzssde0] {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 10px;
}
.pay-plan-info[b-5qgrzssde0] {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 1;
}
.pay-plan-sep[b-5qgrzssde0] {
    font-size: 11px;
    color: rgba(148,163,184,.4);
}
.pay-plan-period[b-5qgrzssde0] {
    font-size: 12px;
    color: rgba(148,163,184,.6);
    font-weight: 500;
}
.pay-plan-amount[b-5qgrzssde0] {
    font-size: 17px;
    font-weight: 700;
    color: #f1f5f9;
}
.pay-plan-dates[b-5qgrzssde0] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}
.pay-plan-date-cell[b-5qgrzssde0] {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.pay-plan-date-label[b-5qgrzssde0] {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .6px;
    color: rgba(148,163,184,.5);
}
.pay-plan-date-val[b-5qgrzssde0] {
    font-size: 12.5px;
    font-weight: 600;
    color: rgba(226,232,240,.85);
}
.pay-plan-warning[b-5qgrzssde0] {
    display: flex;
    align-items: flex-start;
    gap: 6px;
    margin-top: 10px;
    padding: 8px 10px;
    border-radius: 8px;
    font-size: 11.5px;
    background: rgba(245,158,11,.1);
    border: 1px solid rgba(245,158,11,.25);
    color: #fbbf24;
}

/* Plan badges */
.pay-badge-starter[b-5qgrzssde0]   { display:inline-flex;align-items:center;padding:3px 9px;border-radius:999px;font-size:11px;font-weight:700;background:rgba(99,102,241,.18);color:#a5b4fc; }
.pay-badge-business[b-5qgrzssde0]  { display:inline-flex;align-items:center;padding:3px 9px;border-radius:999px;font-size:11px;font-weight:700;background:rgba(59,130,246,.18);color:#93c5fd; }
.pay-badge-enterprise[b-5qgrzssde0]{ display:inline-flex;align-items:center;padding:3px 9px;border-radius:999px;font-size:11px;font-weight:700;background:rgba(245,158,11,.18);color:#fcd34d; }

/* Section label */
.pay-section-label[b-5qgrzssde0] {
    font-size: 10.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .7px;
    color: rgba(148,163,184,.5);
    padding: 18px 24px 8px;
}

/* ── Method buttons ───────────────────────────────────────────────────── */
.pay-methods[b-5qgrzssde0] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    padding: 0 20px 15px
}
.pay-method-btn[b-5qgrzssde0] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 14px;
    border-radius: 12px;
    background: rgba(255,255,255,.04);
    border: 1.5px solid rgba(255,255,255,.1);
    cursor: pointer;
    transition: background .15s, border-color .15s;
    color: rgba(226,232,240,.8);
    font-size: 13.5px;
    font-weight: 600;
}
.pay-method-btn:hover[b-5qgrzssde0] {
    background: rgba(255,255,255,.08);
    border-color: rgba(255,255,255,.2);
}
.pay-method-active-gcash[b-5qgrzssde0] {
    background: rgba(59,130,246,.12);
    border-color: rgba(59,130,246,.45);
    color: #93c5fd;
}
.pay-method-active-maya[b-5qgrzssde0] {
    background: rgba(124,58,237,.12);
    border-color: rgba(124,58,237,.45);
    color: #c4b5fd;
}
.pay-method-logo[b-5qgrzssde0] {
    width: 28px;
    height: 28px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    font-size: 15px;
    flex-shrink: 0;
}
.pay-gcash-logo[b-5qgrzssde0] { background: linear-gradient(135deg, #1d6ff3, #3b82f6); color: #fff; }
.pay-maya-logo[b-5qgrzssde0]  { background: linear-gradient(135deg, #7c3aed, #9333ea); color: #fff; }
.pay-method-name[b-5qgrzssde0] { flex: 1; }
.pay-method-check[b-5qgrzssde0] { margin-left: auto; color: currentColor; }

/* Account row */
.pay-account-row[b-5qgrzssde0] {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12.5px;
    color: rgba(148,163,184,.7);
    padding: 10px 24px 0;
    flex-wrap: wrap;
}
.pay-account-sep[b-5qgrzssde0] { opacity: .3; }
.pay-account-name[b-5qgrzssde0] { font-weight: 500; }

/* ── Field ────────────────────────────────────────────────────────────── */
.pay-field[b-5qgrzssde0] {
    padding: 14px 24px 0;
}
.pay-field-label[b-5qgrzssde0] {
    display: block;
    font-size: 10.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .6px;
    color: rgba(148,163,184,.5);
    margin-bottom: 7px;
}
.pay-ref-input[b-5qgrzssde0] {
    width: 100%;
    padding: 11px 14px;
    background: rgba(255,255,255,.04);
    border: 1.5px solid rgba(99,102,241,.2);
    border-radius: 12px;
    font-size: 13.5px;
    color: #e2e8f0;
    outline: none;
    font-family: ui-monospace, monospace;
    letter-spacing: .5px;
    box-sizing: border-box;
    transition: border-color .2s, background .2s;
}
.pay-ref-input[b-5qgrzssde0]::placeholder { color: rgba(165,180,252,.25); }
.pay-ref-input:focus[b-5qgrzssde0] { border-color: #818cf8; background: rgba(99,102,241,.08); }
.pay-ref-input--error[b-5qgrzssde0] { border-color: rgba(239,68,68,.5); }
.pay-ref-input:disabled[b-5qgrzssde0] { opacity: .5; }

.pay-ref-msg[b-5qgrzssde0] {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 11.5px;
    font-weight: 500;
    margin-top: 5px;
}
.pay-ref-error[b-5qgrzssde0] { color: #fca5a5; }
.pay-ref-ok[b-5qgrzssde0]    { color: #6ee7b7; }

/* ── Receipt upload ───────────────────────────────────────────────────── */
.pay-drop-zone[b-5qgrzssde0] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 24px 16px;
    border: 1.5px dashed rgba(99,102,241,.25);
    border-radius: 14px;
    background: rgba(99,102,241,.04);
    transition: border-color .15s, background .15s;
    text-align: center;
}
.pay-drop-zone:hover[b-5qgrzssde0] {
    border-color: rgba(99,102,241,.45);
    background: rgba(99,102,241,.08);
}
.pay-drop-icon[b-5qgrzssde0] {
    font-size: 30px;
    color: rgba(165,180,252,.4);
}
.pay-drop-title[b-5qgrzssde0] {
    font-size: 13px;
    font-weight: 600;
    color: rgba(226,232,240,.7);
}
.pay-drop-hint[b-5qgrzssde0] {
    font-size: 11px;
    color: rgba(148,163,184,.45);
}

/* Crop wrapper */
.pay-crop-wrap[b-5qgrzssde0] {
    border-radius: 12px;
    overflow: hidden;
    background: #000;
    max-height: 320px;
}
.pay-crop-actions[b-5qgrzssde0] {
    display: flex;
    gap: 8px;
    margin-top: 10px;
}
.pay-btn-apply[b-5qgrzssde0] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    background: rgba(99,102,241,.2);
    border: 1px solid rgba(99,102,241,.4);
    color: #a5b4fc;
    font-size: 13px;
    font-weight: 600;
    border-radius: 10px;
    cursor: pointer;
    transition: background .15s;
}
.pay-btn-apply:hover[b-5qgrzssde0] { background: rgba(99,102,241,.3); }
.pay-btn-apply:disabled[b-5qgrzssde0] { opacity: .5; cursor: not-allowed; }
.pay-btn-cancel[b-5qgrzssde0] {
    padding: 8px 16px;
    background: rgba(239,68,68,.1);
    border: 1px solid rgba(239,68,68,.25);
    color: #fca5a5;
    font-size: 13px;
    font-weight: 600;
    border-radius: 10px;
    cursor: pointer;
    transition: background .15s;
}
.pay-btn-cancel:hover[b-5qgrzssde0] { background: rgba(239,68,68,.18); }
.pay-btn-cancel:disabled[b-5qgrzssde0] { opacity: .5; cursor: not-allowed; }

/* Receipt preview */
.pay-receipt-preview[b-5qgrzssde0] {
    position: relative;
    border-radius: 12px;
    overflow: hidden;
    border: 1.5px solid rgba(99,102,241,.2);
}
.pay-receipt-img[b-5qgrzssde0] {
    display: block;
    width: 100%;
    max-height: 220px;
    object-fit: cover;
}
.pay-receipt-overlay[b-5qgrzssde0] {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,.45);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 12px;
}
.pay-receipt-ready[b-5qgrzssde0] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 11.5px;
    font-weight: 700;
    color: #6ee7b7;
    background: rgba(16,185,129,.15);
    border: 1px solid rgba(16,185,129,.3);
    padding: 4px 10px;
    border-radius: 999px;
}
.pay-receipt-change[b-5qgrzssde0] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 11.5px;
    font-weight: 600;
    color: #e2e8f0;
    background: rgba(255,255,255,.1);
    border: 1px solid rgba(255,255,255,.2);
    padding: 4px 10px;
    border-radius: 999px;
    cursor: pointer;
    transition: background .15s;
}
.pay-receipt-change:hover[b-5qgrzssde0] { background: rgba(255,255,255,.18); }

/* ── Submit button ────────────────────────────────────────────────────── */
.pay-submit-btn[b-5qgrzssde0] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: calc(100% - 48px);
    margin: 20px 24px 24px;
    padding: 13px 20px;
    background: linear-gradient(135deg, #f59e0b, #d97706);
    color: #fff;
    font-size: 13.5px;
    font-weight: 700;
    border: none;
    border-radius: 12px;
    cursor: pointer;
    transition: opacity .15s, transform .1s;
    box-shadow: 0 4px 20px rgba(245,158,11,.4);
}
.pay-submit-btn:hover:not(:disabled)[b-5qgrzssde0] {
    opacity: .9;
    transform: translateY(-1px);
}
.pay-submit-btn:disabled[b-5qgrzssde0] {
    opacity: .4;
    cursor: not-allowed;
}
/* _content/MiniMartBlazorPOS/Components/Pages/POS/Pos.razor.rz.scp.css */
/* ═══════════════════════════════════════════════════════════════════════════
   Pos.razor.css  —  Scoped styles for the POS page
   (Extracted from inline style= attributes to keep the razor template clean)
   ══════════════════════════════════════════════════════════════════════════ */

/* ── Material Symbols helpers (replaces inline font-variation-settings + color/size) */
.ss-fill[b-1ct6y5cubq]         { font-variation-settings: 'FILL' 1; }
.ss-fill-wght500[b-1ct6y5cubq] { font-variation-settings: 'FILL' 1, 'wght' 500, 'GRAD' 0, 'opsz' 24; }
.ss-fill-wght600[b-1ct6y5cubq] { font-variation-settings: 'FILL' 1, 'wght' 600, 'GRAD' 0, 'opsz' 24; }
.ss-icon-sm[b-1ct6y5cubq]      { font-size: 13px; }
.ss-icon-md[b-1ct6y5cubq]      { font-size: 14px; }
.ss-icon-lg[b-1ct6y5cubq]      { font-size: 15px; }
.ss-icon-xl[b-1ct6y5cubq]      { font-size: 16px; }
.ss-icon-white[b-1ct6y5cubq]   { color: white; }
.ss-icon-blue[b-1ct6y5cubq]    { color: #3b82f6; }
.ss-icon-red[b-1ct6y5cubq]     { color: #f87171; }
.ss-icon-amber[b-1ct6y5cubq]   { color: #fbbf24; }
.ss-icon-muted[b-1ct6y5cubq]   { color: var(--pos-tx1); }

/* ── Root / Main Layout ──────────────────────────────────────────────────── */
.pos-root[b-1ct6y5cubq] {
    display: flex;
    height: 100vh;
    width: 100vw;
    overflow: hidden;
    font-family: Inter, ui-sans-serif, system-ui;
}

/* ── Left Sidebar ────────────────────────────────────────────────────────── */
.pos-left[b-1ct6y5cubq] {
    width: 236px;
    flex-shrink: 0;
    border-right: 1px solid var(--pos-bd);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.pos-brand-hdr[b-1ct6y5cubq] {
    padding: 18px 14px 14px;
    border-bottom: 1px solid var(--pos-bd);
    flex-shrink: 0;
}
.pos-brand-row[b-1ct6y5cubq] {
    display: flex;
    align-items: center;
    gap: 10px;
}
.pos-brand-logo[b-1ct6y5cubq] {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: rgb(var(--b600));
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.pos-brand-logo .material-symbols-outlined[b-1ct6y5cubq] {
    font-size: 18px;
    color: white;
}
.pos-brand-text[b-1ct6y5cubq] {
    overflow: hidden;
    min-width: 0;
}
.pos-brand-name[b-1ct6y5cubq] {
    font-size: 11px;
    font-weight: 700;
    color: var(--pos-tx5);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.pos-brand-sub[b-1ct6y5cubq] {
    font-size: 10px;
    color: var(--pos-tx2);
}
.pos-fn-scroll[b-1ct6y5cubq] {
    flex: 1;
    overflow-y: auto;
    padding: 8px 0 4px;
}
.pos-bottom-controls[b-1ct6y5cubq] {
    border-top: 1px solid var(--pos-bd);
    flex-shrink: 0;
    position: relative;
}

/* ── Appearance Popup ────────────────────────────────────────────────────── */
.pos-ap-popup[b-1ct6y5cubq] {
    position: fixed;
    bottom: 124px;
    left: 8px;
    width: 220px;
    background: var(--pos-bg2);
    border: 1px solid var(--pos-bd);
    border-radius: 14px;
    box-shadow: 0 16px 40px rgba(0,0,0,.35);
    z-index: 1100;
    overflow: visible;
}
.pos-ap-popup-hdr[b-1ct6y5cubq] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 16px;
    border-bottom: 1px solid var(--pos-bd);
}
.pos-ap-popup-icon[b-1ct6y5cubq] {
    width: 34px;
    height: 34px;
    border-radius: 9px;
    background: rgba(251,191,36,.15);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.pos-ap-popup-icon .material-symbols-outlined[b-1ct6y5cubq] {
    font-size: 18px;
    color: #fbbf24;
}
.pos-ap-popup-title[b-1ct6y5cubq] {
    font-size: 13px;
    font-weight: 700;
    color: var(--pos-tx5);
}
.pos-ap-popup-sub[b-1ct6y5cubq] {
    font-size: 10px;
    color: var(--pos-tx2);
}
.pos-ap-popup-body[b-1ct6y5cubq]  { padding: 14px 16px 12px; }
.pos-ap-popup-clr[b-1ct6y5cubq]   { padding: 0 16px 16px; }
.pos-ap-mode-row[b-1ct6y5cubq] {
    display: flex;
    gap: 4px;
    background: var(--pos-bg1);
    border-radius: 9px;
    padding: 3px;
    border: 1px solid var(--pos-bd);
}

/* Bottom-btn sub-elements */
.pos-bottom-btn-ver[b-1ct6y5cubq]  { font-size: 11px; }
.pos-bottom-btn-mode[b-1ct6y5cubq] { font-size: 9px; color: var(--pos-tx1); }
.pos-logout-key[b-1ct6y5cubq] {
    font-size: 10px;
    background: rgba(239,68,68,.2);
    color: #ef4444;
    padding: 1px 5px;
    border-radius: 4px;
    font-family: monospace;
}

/* ── Center Panel ────────────────────────────────────────────────────────── */
.pos-center[b-1ct6y5cubq] {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    min-width: 0;
}
.pos-txn-bar[b-1ct6y5cubq] {
    border-bottom: 1px solid var(--pos-bd);
    padding: 14px 22px;
    display: flex;
    align-items: center;
    gap: 18px;
    flex-shrink: 0;
}
.pos-txn-no-wrap[b-1ct6y5cubq] { flex-shrink: 0; }
.pos-txn-label[b-1ct6y5cubq] {
    font-size: 11px;
    color: var(--pos-tx1);
    font-weight: 600;
    letter-spacing: .07em;
    text-transform: uppercase;
    line-height: 1.2;
}
.pos-txn-val[b-1ct6y5cubq] {
    font-size: 16px;
    font-weight: 700;
    color: rgb(var(--b500));
    font-family: monospace;
    letter-spacing: .04em;
    line-height: 1.4;
}
.pos-barcode-wrap[b-1ct6y5cubq] {
    flex: 1;
    max-width: 520px;
    position: relative;
}
.pos-barcode-icon[b-1ct6y5cubq] {
    position: absolute;
    left: 13px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 20px;
    color: var(--pos-tx1);
    pointer-events: none;
}
.pos-barcode-input[b-1ct6y5cubq] {
    width: 100%;
    padding: 11px 38px 11px 40px;
    border-radius: 10px;
    border: 1px solid var(--pos-bd2);
    background: var(--pos-inp);
    color: var(--pos-tx5);
    font-size: 14px;
    outline: none;
    box-sizing: border-box;
    transition: border-color .15s;
}
.pos-barcode-spinner[b-1ct6y5cubq] {
    position: absolute;
    right: 13px;
    top: 50%;
    transform: translateY(-50%);
}
.pos-barcode-spinner svg[b-1ct6y5cubq] { width: 16px; height: 16px; color: rgb(var(--b500)); }

.pos-camera-btn[b-1ct6y5cubq] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 8px;
    border: 1px solid var(--pos-bd2);
    border-radius: 10px;
    background: transparent;
    color: var(--pos-tx2);
    cursor: pointer;
    transition: background .15s, color .15s, border-color .15s;
}
.pos-camera-btn:hover[b-1ct6y5cubq] {
    background: rgb(var(--b500)/.08);
    color: rgb(var(--b500));
    border-color: rgb(var(--b500)/.3);
}
.pos-camera-btn:active[b-1ct6y5cubq] { transform: scale(.96); }

.pos-clock[b-1ct6y5cubq] { margin-left: auto; text-align: right; flex-shrink: 0; }
.pos-clock-date[b-1ct6y5cubq] { font-size: 11px; color: var(--pos-tx1); }
.pos-clock-time[b-1ct6y5cubq] {
    font-size: 18px;
    font-weight: 700;
    color: var(--pos-tx3);
    font-family: monospace;
    line-height: 1.3;
}

/* ── Cart ────────────────────────────────────────────────────────────────── */
.pos-cart-scroll[b-1ct6y5cubq] { flex: 1; overflow-y: auto; }

.pos-cart-empty[b-1ct6y5cubq] {
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    user-select: none;
}
.pos-cart-empty-icon[b-1ct6y5cubq]  { font-size: 72px; color: var(--pos-bd); }
.pos-cart-empty-title[b-1ct6y5cubq] { font-size: 15px; font-weight: 600; color: var(--pos-tx1); }
.pos-cart-empty-hint[b-1ct6y5cubq]  { font-size: 12px; color: var(--pos-bd2); }

.pos-kbd[b-1ct6y5cubq] {
    background: var(--pos-bd);
    border: 1px solid var(--pos-bd2);
    border-radius: 4px;
    padding: 1px 6px;
    font-size: 11px;
    color: var(--pos-tx2);
    font-family: monospace;
}

.pos-cart-table[b-1ct6y5cubq] { width: 100%; border-collapse: collapse; }
.pos-th-row[b-1ct6y5cubq] {
    background: var(--pos-bg3);
    position: sticky;
    top: 0;
    z-index: 5;
    border-bottom: 2px solid var(--pos-bd);
}
.pos-th[b-1ct6y5cubq] {
    padding: 9px 12px;
    font-size: 10px;
    color: var(--pos-tx1);
    font-weight: 600;
    letter-spacing: .07em;
    text-transform: uppercase;
}
.pos-td-num[b-1ct6y5cubq]  { padding: 11px 12px; text-align: center; font-size: 12px; color: var(--pos-tx1); font-weight: 500; }
.pos-td-desc[b-1ct6y5cubq] { padding: 11px 12px; }
.pos-td-item-name[b-1ct6y5cubq] { font-size: 13px; font-weight: 600; color: var(--pos-tx4); }
.pos-td-item-sub[b-1ct6y5cubq]  { font-size: 11px; color: var(--pos-tx1); margin-top: 1px; }
.pos-td-price[b-1ct6y5cubq] {
    padding: 11px 12px;
    text-align: right;
    font-size: 13px;
    color: var(--pos-tx3);
    white-space: nowrap;
}
.pos-td-price-unit[b-1ct6y5cubq] { font-size: 10px; color: var(--pos-tx1); margin-left: 2px; }
.pos-td-qty[b-1ct6y5cubq]        { padding: 7px 12px; text-align: center; }
.pos-td-qty-row[b-1ct6y5cubq]    { display: inline-flex; align-items: center; gap: 5px; }
.pos-td-qty-val[b-1ct6y5cubq]    { font-size: 14px; font-weight: 700; color: var(--pos-tx5); min-width: 30px; text-align: center; }
.pos-td-action[b-1ct6y5cubq]     { padding: 7px 6px; text-align: center; }

/* ── Status / Shortcut Bar ───────────────────────────────────────────────── */
.pos-status-bar[b-1ct6y5cubq] {
    border-top: 1px solid var(--pos-bd);
    padding: 6px 18px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-shrink: 0;
}
.pos-shortcut-list[b-1ct6y5cubq] { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.pos-shortcut[b-1ct6y5cubq]      { font-size: 11px; color: var(--pos-tx1); }
.pos-shortcut-kbd[b-1ct6y5cubq]  {
    background: var(--pos-bg3);
    border: 1px solid var(--pos-bd2);
    border-radius: 3px;
    padding: 1px 5px;
    font-size: 10px;
    color: var(--pos-tx2);
    font-family: monospace;
}
.pos-user-info[b-1ct6y5cubq] { display: flex; align-items: center; gap: 12px; }
.pos-user-chip[b-1ct6y5cubq] { font-size: 11px; color: var(--pos-tx1); }
.pos-user-chip .material-symbols-outlined[b-1ct6y5cubq] { font-size: 13px; vertical-align: middle; }

/* ── Right Panel ─────────────────────────────────────────────────────────── */
.pos-right[b-1ct6y5cubq] {
    width: 268px;
    flex-shrink: 0;
    border-left: 1px solid var(--pos-bd);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
.pos-totals-hdr[b-1ct6y5cubq] {
    padding: 20px 18px 14px;
    border-bottom: 1px solid var(--pos-bd);
    text-align: center;
    flex-shrink: 0;
}
.pos-cart-icon-wrap[b-1ct6y5cubq] { position: relative; display: inline-block; margin-bottom: 6px; }
.pos-cart-icon[b-1ct6y5cubq]      { font-size: 42px; color: var(--pos-bd); }
.pos-cart-count-badge[b-1ct6y5cubq] {
    position: absolute;
    top: -4px;
    right: -10px;
    background: rgb(var(--b600));
    color: white;
    border-radius: 999px;
    font-size: 10px;
    font-weight: 700;
    min-width: 18px;
    height: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 4px;
}
.pos-grand-total[b-1ct6y5cubq] {
    font-size: 30px;
    font-weight: 900;
    color: var(--pos-tx5);
    letter-spacing: -.02em;
    font-family: monospace;
    line-height: 1.1;
}
.pos-cart-meta[b-1ct6y5cubq] { font-size: 13px; font-weight: 500; color: var(--pos-tx3); margin-top: 4px; letter-spacing: .01em; }
.pos-breakdown[b-1ct6y5cubq] {
    padding: 14px 18px;
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 9px;
    overflow-y: auto;
}
.pos-breakdown-row[b-1ct6y5cubq]  { display: flex; justify-content: space-between; }
.pos-breakdown-lbl[b-1ct6y5cubq]  { font-size: 12px; color: var(--pos-tx2); }
.pos-breakdown-val[b-1ct6y5cubq]  { font-size: 13px; font-weight: 600; color: var(--pos-tx3); font-family: monospace; }
.pos-breakdown-lbl-dim[b-1ct6y5cubq] { font-size: 12px; color: var(--pos-tx1); }
.pos-breakdown-val-dim[b-1ct6y5cubq] { font-size: 12px; color: var(--pos-tx1); font-family: monospace; }
.pos-divider[b-1ct6y5cubq] { height: 1px; background: var(--pos-bd); margin: 2px 0; }
.pos-tin[b-1ct6y5cubq]     { font-size: 10px; color: var(--pos-tx1); text-align: center; }
.pos-actions[b-1ct6y5cubq] {
    padding: 14px 18px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    border-top: 1px solid var(--pos-bd);
    flex-shrink: 0;
}
.pos-settle-kbd[b-1ct6y5cubq] {
    background: rgba(255,255,255,.2);
    border-radius: 4px;
    padding: 1px 5px;
    font-size: 10px;
    font-family: monospace;
    border: none;
}
.pos-clear-kbd[b-1ct6y5cubq] {
    background: var(--pos-bg3);
    border: 1px solid var(--pos-bd2);
    border-radius: 3px;
    padding: 1px 5px;
    font-size: 10px;
    color: var(--pos-tx2);
    font-family: monospace;
}

/* ── Modal shared ────────────────────────────────────────────────────────── */
.pos-modal-hdr[b-1ct6y5cubq] {
    padding: 18px 22px;
    border-bottom: 1px solid var(--pos-bd);
    display: flex;
    align-items: center;
    gap: 12px;
}
.pos-modal-hdr-sm[b-1ct6y5cubq] {
    padding: 16px 22px;
    border-bottom: 1px solid var(--pos-bd);
    display: flex;
    align-items: center;
    gap: 10px;
}
.pos-modal-icon[b-1ct6y5cubq] {
    width: 38px;
    height: 38px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.pos-modal-icon--green[b-1ct6y5cubq] { background: rgba(34,197,94,.15); }
.pos-modal-icon--green .material-symbols-outlined[b-1ct6y5cubq] { font-size: 20px; color: #22c55e; }
.pos-modal-hdr-text[b-1ct6y5cubq] { flex: 1; }
.pos-modal-hdr-title[b-1ct6y5cubq] { font-size: 14px; font-weight: 700; color: var(--pos-tx5); }
.pos-modal-hdr-sub[b-1ct6y5cubq]   { font-size: 11px; color: var(--pos-tx2); }
.pos-close-btn[b-1ct6y5cubq] { background: transparent; border: none; cursor: pointer; color: var(--pos-tx1); display: flex; }
.pos-close-btn .material-symbols-outlined[b-1ct6y5cubq] { font-size: 20px; }

/* ── Settle Payment Modal ────────────────────────────────────────────────── */
.pos-settle-body[b-1ct6y5cubq] { padding: 22px; }
.pos-amount-box[b-1ct6y5cubq]  {
    background: var(--pos-bg1);
    border-radius: 12px;
    padding: 18px;
    text-align: center;
    margin-bottom: 18px;
}
.pos-amount-label[b-1ct6y5cubq] {
    font-size: 11px;
    color: var(--pos-tx2);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .07em;
    margin-bottom: 4px;
}
.pos-amount-due[b-1ct6y5cubq]  { font-size: 34px; font-weight: 900; color: var(--pos-tx5); font-family: monospace; }
.pos-amount-meta[b-1ct6y5cubq] { font-size: 11px; color: var(--pos-tx1); margin-top: 4px; }
.pos-field-label[b-1ct6y5cubq] {
    display: block;
    font-size: 10px;
    font-weight: 600;
    color: var(--pos-tx2);
    text-transform: uppercase;
    letter-spacing: .07em;
    margin-bottom: 6px;
}
.pos-cash-wrap[b-1ct6y5cubq]   { position: relative; margin-bottom: 14px; }
.pos-cash-symbol[b-1ct6y5cubq] {
    position: absolute;
    left: 13px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 17px;
    font-weight: 700;
    color: rgb(var(--b400));
    pointer-events: none;
}
.pos-cash-input[b-1ct6y5cubq] {
    width: 100%;
    padding: 13px 13px 13px 30px;
    border-radius: 10px;
    border: 1px solid var(--pos-bd2);
    background: var(--pos-bg1);
    color: var(--pos-tx5);
    font-size: 22px;
    font-weight: 700;
    font-family: monospace;
    outline: none;
    box-sizing: border-box;
}
.pos-quick-amounts[b-1ct6y5cubq] { display: flex; gap: 6px; margin-bottom: 14px; flex-wrap: wrap; }
.pos-quick-btn[b-1ct6y5cubq] {
    padding: 5px 10px;
    border-radius: 7px;
    border: 1px solid var(--pos-bd2);
    background: var(--pos-bg3);
    color: var(--pos-tx3);
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    font-family: monospace;
    transition: background .1s;
}
.pos-change-box[b-1ct6y5cubq] {
    border: 1px solid;
    border-radius: 10px;
    padding: 12px 16px;
    margin-bottom: 14px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.pos-change-lbl[b-1ct6y5cubq] { font-size: 13px; font-weight: 600; }
.pos-change-val[b-1ct6y5cubq] { font-size: 22px; font-weight: 900; font-family: monospace; }
.pos-settle-error[b-1ct6y5cubq] {
    background: rgba(239,68,68,.1);
    border: 1px solid rgba(239,68,68,.25);
    border-radius: 8px;
    padding: 10px 14px;
    margin-bottom: 14px;
    font-size: 12px;
    color: #f87171;
}
.pos-process-btn[b-1ct6y5cubq] {
    width: 100%;
    padding: 13px;
    border-radius: 12px;
    border: none;
    cursor: pointer;
    font-size: 14px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: all .15s;
}
.pos-process-btn .material-symbols-outlined[b-1ct6y5cubq] { font-size: 18px; }

/* ── Void Modal ──────────────────────────────────────────────────────────── */
.pos-void-hdr[b-1ct6y5cubq] { padding: 16px 22px; border-bottom: 1px solid var(--pos-bd); display: flex; align-items: center; gap: 10px; }
.pos-void-hdr .material-symbols-outlined[b-1ct6y5cubq] { font-size: 20px; color: #ef4444; }
.pos-void-hdr-title[b-1ct6y5cubq] { font-size: 14px; font-weight: 700; color: var(--pos-tx5); flex: 1; }
.pos-void-close-btn[b-1ct6y5cubq] { background: transparent; border: none; cursor: pointer; color: var(--pos-tx1); display: flex; }
.pos-void-close-btn .material-symbols-outlined[b-1ct6y5cubq] { font-size: 20px; }
.pos-void-body[b-1ct6y5cubq] { padding: 20px 22px; display: flex; flex-direction: column; gap: 14px; }
.pos-void-warn[b-1ct6y5cubq] {
    background: rgba(239,68,68,.08);
    border: 1px solid rgba(239,68,68,.25);
    border-radius: 10px;
    padding: 10px 14px;
    display: flex;
    align-items: center;
    gap: 10px;
}
.pos-void-warn .material-symbols-outlined[b-1ct6y5cubq] { font-size: 16px; color: #ef4444; flex-shrink: 0; }
.pos-void-warn-title[b-1ct6y5cubq] { font-size: 12px; font-weight: 600; color: #ef4444; }
.pos-void-warn-trans[b-1ct6y5cubq] { font-size: 11px; color: var(--pos-tx2); font-family: monospace; margin-top: 2px; }
.pos-void-field-label[b-1ct6y5cubq] {
    display: block;
    font-size: 10px;
    font-weight: 600;
    color: var(--pos-tx2);
    text-transform: uppercase;
    letter-spacing: .07em;
    margin-bottom: 5px;
}
.pos-void-input[b-1ct6y5cubq] {
    width: 100%;
    padding: 9px 12px;
    border-radius: 8px;
    border: 1px solid var(--pos-bd2);
    background: var(--pos-bg1);
    color: var(--pos-tx5);
    font-size: 13px;
    outline: none;
    box-sizing: border-box;
}
.pos-void-auth[b-1ct6y5cubq]         { border-top: 1px solid var(--pos-bd); padding-top: 14px; }
.pos-void-auth-label[b-1ct6y5cubq]   { font-size: 10px; font-weight: 700; color: var(--pos-tx2); text-transform: uppercase; letter-spacing: .07em; margin-bottom: 10px; }
.pos-void-auth-fields[b-1ct6y5cubq]  { display: flex; flex-direction: column; gap: 8px; }
.pos-void-error-box[b-1ct6y5cubq]    { background: rgba(239,68,68,.1); border: 1px solid rgba(239,68,68,.3); border-radius: 8px; padding: 8px 12px; display: flex; align-items: center; gap: 8px; }
.pos-void-error-box .material-symbols-outlined[b-1ct6y5cubq] { font-size: 15px; color: #ef4444; flex-shrink: 0; }
.pos-void-error-msg[b-1ct6y5cubq]    { font-size: 12px; color: #ef4444; }
.pos-void-footer[b-1ct6y5cubq]       { padding: 14px 22px; border-top: 1px solid var(--pos-bd); display: flex; gap: 8px; justify-content: flex-end; }
.pos-void-cancel-btn[b-1ct6y5cubq]   { padding: 9px 18px; border-radius: 9px; border: 1px solid var(--pos-bd2); background: transparent; color: var(--pos-tx2); font-size: 13px; font-weight: 600; cursor: pointer; }
.pos-void-confirm-btn[b-1ct6y5cubq]  {
    padding: 9px 20px;
    border-radius: 9px;
    border: none;
    cursor: pointer;
    font-size: 13px;
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 7px;
    background: linear-gradient(135deg,#ef4444,#dc2626);
    color: white;
    box-shadow: 0 3px 12px rgba(239,68,68,.3);
    transition: opacity .15s;
}
.pos-void-confirm-btn .material-symbols-outlined[b-1ct6y5cubq] { font-size: 15px; }

/* ── Receipt Modal ───────────────────────────────────────────────────────── */
.pos-receipt-close[b-1ct6y5cubq] {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 10;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: none;
    cursor: pointer;
    background: rgba(255,255,255,.2);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background .15s;
}
.pos-receipt-close:hover[b-1ct6y5cubq] { background: rgba(255,255,255,.35); }
.pos-receipt-close .material-symbols-outlined[b-1ct6y5cubq] { font-size: 16px; }
.pos-receipt-banner[b-1ct6y5cubq] { background: linear-gradient(135deg,#22c55e,#16a34a); padding: 28px; text-align: center; }
.pos-receipt-icon-wrap[b-1ct6y5cubq] {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: rgba(255,255,255,.2);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 10px;
}
.pos-receipt-icon-wrap .material-symbols-outlined[b-1ct6y5cubq] { font-size: 26px; color: white; }
.pos-receipt-title[b-1ct6y5cubq]  { font-size: 17px; font-weight: 800; color: white; margin-bottom: 4px; }
.pos-receipt-trans[b-1ct6y5cubq]  { font-size: 11px; color: rgba(255,255,255,.75); }
.pos-receipt-body[b-1ct6y5cubq]   { padding: 20px 22px; }
.pos-receipt-row[b-1ct6y5cubq]    { display: flex; justify-content: space-between; margin-bottom: 8px; }
.pos-receipt-lbl[b-1ct6y5cubq]    { font-size: 12px; color: var(--pos-tx2); }
.pos-receipt-val[b-1ct6y5cubq]    { font-size: 13px; font-weight: 700; color: var(--pos-tx5); font-family: monospace; }
.pos-receipt-change-row[b-1ct6y5cubq] {
    display: flex;
    justify-content: space-between;
    margin-bottom: 20px;
    padding-top: 10px;
    border-top: 1px solid var(--pos-bd);
}
.pos-receipt-change-lbl[b-1ct6y5cubq] { font-size: 14px; font-weight: 700; color: #4ade80; }
.pos-receipt-change-val[b-1ct6y5cubq] { font-size: 22px; font-weight: 900; color: #4ade80; font-family: monospace; }
.pos-receipt-actions[b-1ct6y5cubq] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.pos-print-receipt-btn[b-1ct6y5cubq] {
    width: 100%;
    padding: 11px;
    border-radius: 12px;
    border: 1px solid rgba(99,102,241,.35);
    background: rgba(99,102,241,.1);
    color: #818cf8;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: background .15s, border-color .15s;
}
.pos-print-receipt-btn:hover[b-1ct6y5cubq] {
    background: rgba(99,102,241,.2);
    border-color: rgba(99,102,241,.6);
}
.pos-print-receipt-btn .material-symbols-outlined[b-1ct6y5cubq] { font-size: 17px; }
.pos-new-tx-btn[b-1ct6y5cubq] {
    width: 100%;
    padding: 12px;
    border-radius: 12px;
    border: none;
    background: linear-gradient(135deg,rgb(var(--b600)),rgb(var(--b700)));
    color: white;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}
.pos-new-tx-btn .material-symbols-outlined[b-1ct6y5cubq] { font-size: 18px; }

/* ── Search Modal ────────────────────────────────────────────────────────── */
.pos-search-hdr[b-1ct6y5cubq] {
    padding: 16px 22px;
    border-bottom: 1px solid var(--pos-bd);
    display: flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
}
.pos-search-hdr .material-symbols-outlined[b-1ct6y5cubq] { font-size: 18px; color: #34d399; }
.pos-search-title[b-1ct6y5cubq]  { font-size: 14px; font-weight: 700; color: var(--pos-tx5); flex: 1; }
.pos-search-inp-wrap[b-1ct6y5cubq] { padding: 14px 22px; border-bottom: 1px solid var(--pos-bd); flex-shrink: 0; }
.pos-search-inp-inner[b-1ct6y5cubq] { position: relative; }
.pos-search-inp-icon[b-1ct6y5cubq] {
    position: absolute;
    left: 11px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 17px;
    color: var(--pos-tx1);
    pointer-events: none;
}
.pos-search-input[b-1ct6y5cubq] {
    width: 100%;
    padding: 9px 44px 9px 36px;
    border-radius: 9px;
    border: 1px solid var(--pos-bd2);
    background: var(--pos-bg1);
    color: var(--pos-tx5);
    font-size: 13px;
    outline: none;
    box-sizing: border-box;
}
/* Scan loyalty card button inside search field */
.pos-customer-scan-btn[b-1ct6y5cubq] {
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(167, 139, 250, .12);
    border: 1px solid rgba(167, 139, 250, .3);
    border-radius: 7px;
    width: 30px;
    height: 26px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: #a78bfa;
    transition: background .15s, border-color .15s;
    padding: 0;
}
.pos-customer-scan-btn:hover[b-1ct6y5cubq] {
    background: rgba(167, 139, 250, .22);
    border-color: rgba(167, 139, 250, .55);
}
.pos-customer-scan-error[b-1ct6y5cubq] {
    display: flex;
    align-items: center;
    gap: 5px;
    margin-top: 6px;
    font-size: 11px;
    color: #f87171;
    padding: 0 2px;
}
.pos-search-list[b-1ct6y5cubq]    { flex: 1; overflow-y: auto; min-height: 0; }
.pos-search-loading[b-1ct6y5cubq] { padding: 36px; text-align: center; }
.pos-search-loading svg[b-1ct6y5cubq] { width: 22px; height: 22px; color: rgb(var(--b500)); margin: 0 auto; }
.pos-search-empty[b-1ct6y5cubq]   { padding: 36px; text-align: center; color: var(--pos-tx1); }
.pos-search-empty .material-symbols-outlined[b-1ct6y5cubq] { font-size: 38px; display: block; margin-bottom: 8px; }
.pos-search-empty-msg[b-1ct6y5cubq] { font-size: 13px; }
.pos-search-row-info[b-1ct6y5cubq] { flex: 1; overflow: hidden; min-width: 0; }
.pos-search-meta[b-1ct6y5cubq] { display: flex; align-items: center; gap: 7px; margin-top: 2px; flex-wrap: wrap; }
.pos-search-code[b-1ct6y5cubq] {
    font-size: 10px;
    color: var(--pos-tx2);
    font-family: monospace;
    background: var(--pos-bg3);
    border-radius: 4px;
    padding: 1px 5px;
}
.pos-search-barcode[b-1ct6y5cubq] { font-size: 10px; color: var(--pos-tx1); font-family: monospace; }
.pos-search-unit[b-1ct6y5cubq]    { font-size: 10px; color: var(--pos-tx1); }
.pos-search-oos-badge[b-1ct6y5cubq]  { font-size: 10px; font-weight: 700; color: #ef4444; background: rgba(239,68,68,.15); border-radius: 4px; padding: 1px 6px; letter-spacing: .03em; }
.pos-search-max-badge[b-1ct6y5cubq]  { font-size: 10px; font-weight: 700; color: #f97316; background: rgba(249,115,22,.15); border-radius: 4px; padding: 1px 6px; letter-spacing: .03em; }
.pos-search-cart-badge[b-1ct6y5cubq] { font-size: 10px; font-weight: 600; color: #4ade80; background: rgba(74,222,128,.12); border-radius: 4px; padding: 1px 6px; }
.pos-search-price-wrap[b-1ct6y5cubq] { text-align: right; flex-shrink: 0; }
.pos-search-decr-btn[b-1ct6y5cubq] {
    display: inline-flex;
    align-items: center;
    padding: 1px 7px;
    border-radius: 4px;
    border: 1px solid rgba(239,68,68,.4);
    background: rgba(239,68,68,.1);
    color: #ef4444;
    font-size: 11px;
    font-weight: 700;
    cursor: pointer;
    line-height: 1.4;
    transition: background .1s, border-color .1s;
}
.pos-search-decr-btn:hover[b-1ct6y5cubq] {
    background: rgba(239,68,68,.22);
    border-color: rgba(239,68,68,.7);
}

/* ── Pagination ──────────────────────────────────────────────────────────── */
.pos-pagination[b-1ct6y5cubq] {
    border-top: 1px solid var(--pos-bd);
    padding: 7px 22px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    gap: 16px;
    background: var(--pos-bg2);
}
.pos-page-size-wrap[b-1ct6y5cubq]  { display: flex; align-items: center; gap: 5px; }
.pos-page-size-label[b-1ct6y5cubq] { font-size: 11px; color: var(--pos-tx1); margin-right: 2px; }
.pos-page-info[b-1ct6y5cubq]       { font-size: 11px; color: var(--pos-tx1); flex: 1; text-align: center; }
.pos-page-nav[b-1ct6y5cubq]        { display: flex; align-items: center; gap: 3px; }
.pos-page-btn[b-1ct6y5cubq]        { padding: 2px 7px; border-radius: 5px; font-size: 12px; cursor: pointer; border: 1px solid var(--pos-bd); background: transparent; color: var(--pos-tx2); }

/* ── Search Footer ───────────────────────────────────────────────────────── */
.pos-search-footer[b-1ct6y5cubq] {
    border-top: 1px solid var(--pos-bd);
    padding: 12px 22px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: var(--pos-bg2);
}
.pos-search-cart-lbl[b-1ct6y5cubq]    { font-size: 12px; color: var(--pos-tx1); }
.pos-search-cart-active[b-1ct6y5cubq] { color: #4ade80; font-weight: 600; }
.pos-search-done-btn[b-1ct6y5cubq] {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 9px 20px;
    border-radius: 10px;
    border: none;
    cursor: pointer;
    background: linear-gradient(135deg,#22c55e,#16a34a);
    color: white;
    font-size: 13px;
    font-weight: 700;
    box-shadow: 0 2px 10px rgba(34,197,94,.35);
    transition: opacity .15s;
}
.pos-search-done-btn:hover[b-1ct6y5cubq] { opacity: .88; }
.pos-search-done-btn .material-symbols-outlined[b-1ct6y5cubq] { font-size: 17px; }

/* ── Discount Modal ──────────────────────────────────────────────────────── */
.pos-disc-body[b-1ct6y5cubq]  { padding: 22px; }
.pos-disc-hdr[b-1ct6y5cubq]   { display: flex; align-items: center; gap: 10px; margin-bottom: 18px; }
.pos-disc-hdr .material-symbols-outlined[b-1ct6y5cubq] { font-size: 18px; color: #a78bfa; }
.pos-disc-title[b-1ct6y5cubq] { font-size: 14px; font-weight: 700; color: var(--pos-tx5); flex: 1; }
.pos-disc-msg[b-1ct6y5cubq]   { font-size: 13px; color: var(--pos-tx2); margin-bottom: 18px; }
.pos-disc-no-sel-btn[b-1ct6y5cubq] {
    width: 100%;
    padding: 10px;
    border-radius: 10px;
    border: 1px solid var(--pos-bd2);
    background: transparent;
    color: var(--pos-tx3);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
}
.pos-disc-item-lbl[b-1ct6y5cubq]  { font-size: 12px; color: var(--pos-tx2); margin-bottom: 2px; }
.pos-disc-item-name[b-1ct6y5cubq] { color: var(--pos-tx4); font-weight: 600; }
.pos-disc-total-lbl[b-1ct6y5cubq] { font-size: 12px; color: var(--pos-tx2); margin-bottom: 16px; }
.pos-disc-total-val[b-1ct6y5cubq] { color: rgb(var(--b400)); font-weight: 700; font-family: monospace; }
.pos-disc-input[b-1ct6y5cubq] {
    width: 100%;
    padding: 11px;
    border-radius: 9px;
    border: 1px solid var(--pos-bd2);
    background: var(--pos-bg1);
    color: var(--pos-tx5);
    font-size: 18px;
    font-weight: 700;
    font-family: monospace;
    outline: none;
    box-sizing: border-box;
    margin-bottom: 16px;
}
.pos-disc-actions[b-1ct6y5cubq]    { display: flex; gap: 8px; }
.pos-disc-cancel-btn[b-1ct6y5cubq] { flex: 1; padding: 10px; border-radius: 9px; border: 1px solid var(--pos-bd2); background: transparent; color: var(--pos-tx3); font-size: 13px; font-weight: 600; cursor: pointer; }
.pos-disc-apply-btn[b-1ct6y5cubq]  { flex: 1; padding: 10px; border-radius: 9px; border: none; background: linear-gradient(135deg,#a78bfa,#7c3aed); color: white; font-size: 13px; font-weight: 600; cursor: pointer; }

/* ── Daily Sales Bottom Sheet ────────────────────────────────────────────── */
.pos-ds-backdrop[b-1ct6y5cubq] {
    position: fixed;
    inset: 0;
    z-index: 999;
    background: rgba(0,0,0,.65);
    backdrop-filter: blur(4px);
}
.pos-ds-sheet[b-1ct6y5cubq] {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    height: 72vh;
    background: var(--pos-bg2);
    border-top-left-radius: 20px;
    border-top-right-radius: 20px;
    border-top:   1px solid var(--pos-bd);
    border-left:  1px solid var(--pos-bd);
    border-right: 1px solid var(--pos-bd);
    box-shadow: 0 -12px 48px rgba(0,0,0,.6);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
.pos-ds-handle-wrap[b-1ct6y5cubq] { display: flex; justify-content: center; padding: 10px 0 0; flex-shrink: 0; }
.pos-ds-handle[b-1ct6y5cubq] { width: 36px; height: 4px; border-radius: 2px; background: var(--pos-bd2); }
.pos-ds-hdr[b-1ct6y5cubq] {
    padding: 14px 24px 12px;
    border-bottom: 1px solid var(--pos-bd);
    display: flex;
    align-items: center;
    gap: 14px;
    flex-shrink: 0;
}
.pos-ds-hdr-icon[b-1ct6y5cubq] {
    width: 40px;
    height: 40px;
    border-radius: 11px;
    background: rgba(129,140,248,.15);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.pos-ds-hdr-icon .material-symbols-outlined[b-1ct6y5cubq] { font-size: 20px; color: #818cf8; }
.pos-ds-hdr-text[b-1ct6y5cubq]  { flex: 1; min-width: 0; }
.pos-ds-hdr-title[b-1ct6y5cubq] { font-size: 15px; font-weight: 700; color: var(--pos-tx5); }
.pos-ds-hdr-sub[b-1ct6y5cubq]   { font-size: 11px; color: var(--pos-tx1); }
.pos-ds-hdr-sub .material-symbols-outlined[b-1ct6y5cubq] { font-size: 11px; vertical-align: middle; }
.pos-ds-chip-tx[b-1ct6y5cubq] {
    padding: 4px 11px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 600;
    background: rgba(129,140,248,.15);
    color: #818cf8;
    border: 1px solid rgba(129,140,248,.28);
    white-space: nowrap;
    flex-shrink: 0;
}
.pos-ds-chip-total[b-1ct6y5cubq] {
    padding: 4px 11px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 600;
    background: rgba(74,222,128,.12);
    color: #4ade80;
    border: 1px solid rgba(74,222,128,.22);
    font-family: monospace;
    white-space: nowrap;
    flex-shrink: 0;
}
.pos-ds-refresh-btn[b-1ct6y5cubq] {
    display: flex; align-items: center; justify-content: center;
    width: 34px; height: 34px; border-radius: 9px;
    background: transparent; border: 1px solid var(--pos-bd2);
    cursor: pointer; color: var(--pos-tx1); transition: all .15s; flex-shrink: 0;
}
.pos-ds-refresh-btn .material-symbols-outlined[b-1ct6y5cubq] { font-size: 16px; }
.pos-ds-close-btn[b-1ct6y5cubq] {
    display: flex; align-items: center; justify-content: center;
    width: 34px; height: 34px; border-radius: 9px;
    background: transparent; border: none;
    cursor: pointer; color: var(--pos-tx1); transition: color .15s; flex-shrink: 0;
}
.pos-ds-close-btn .material-symbols-outlined[b-1ct6y5cubq] { font-size: 20px; }
.pos-ds-content[b-1ct6y5cubq] { flex: 1; overflow-y: auto; }
.pos-ds-loading[b-1ct6y5cubq] { height: 100%; display: flex; align-items: center; justify-content: center; gap: 12px; }
.pos-ds-loading svg[b-1ct6y5cubq] { width: 20px; height: 20px; color: #818cf8; }
.pos-ds-loading-txt[b-1ct6y5cubq] { font-size: 13px; color: var(--pos-tx2); }
.pos-ds-empty[b-1ct6y5cubq] { height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; user-select: none; }
.pos-ds-empty-icon[b-1ct6y5cubq]  { font-size: 60px; color: var(--pos-bd); }
.pos-ds-empty-title[b-1ct6y5cubq] { font-size: 14px; font-weight: 600; color: var(--pos-tx1); }
.pos-ds-empty-hint[b-1ct6y5cubq]  { font-size: 12px; color: var(--pos-bd); }
.pos-ds-table[b-1ct6y5cubq] { width: 100%; border-collapse: collapse; }
.pos-ds-th-row[b-1ct6y5cubq] { background: var(--pos-bg3); position: sticky; top: 0; z-index: 5; border-bottom: 2px solid var(--pos-bd); }
.pos-ds-th[b-1ct6y5cubq]     { padding: 10px 20px; font-size: 10px; color: var(--pos-tx1); font-weight: 600; letter-spacing: .07em; text-transform: uppercase; }

/* DS table cells */
.pos-ds-td-actions[b-1ct6y5cubq]  { padding: 6px 10px 6px 16px; text-align: center; white-space: nowrap; }
.pos-ds-td-transno[b-1ct6y5cubq]  { padding: 13px 20px; }
.pos-ds-transno[b-1ct6y5cubq]     { font-size: 13px; font-weight: 700; color: #818cf8; font-family: monospace; letter-spacing: .04em; }
.pos-ds-td-time[b-1ct6y5cubq]     { padding: 13px 20px; text-align: center; font-size: 12px; color: var(--pos-tx2); font-family: monospace; }
.pos-ds-td-items[b-1ct6y5cubq]    { padding: 13px 20px; text-align: center; }
.pos-ds-items-badge[b-1ct6y5cubq] { display: inline-block; font-size: 12px; font-weight: 600; background: var(--pos-bg3); color: var(--pos-tx3); border-radius: 6px; padding: 2px 10px; }
.pos-ds-td-qty[b-1ct6y5cubq]      { padding: 13px 20px; text-align: center; font-size: 13px; font-weight: 700; color: var(--pos-tx5); font-family: monospace; }
.pos-ds-td-total[b-1ct6y5cubq]    { padding: 13px 20px; text-align: right; font-size: 14px; font-weight: 700; color: #4ade80; font-family: monospace; }

/* DS expand detail */
.pos-ds-detail-loading[b-1ct6y5cubq] { display: flex; align-items: center; gap: 10px; padding: 16px 24px 16px 60px; }
.pos-ds-detail-loading svg[b-1ct6y5cubq] { width: 16px; height: 16px; color: #818cf8; }
.pos-ds-detail-loading-txt[b-1ct6y5cubq] { font-size: 12px; color: var(--pos-tx2); }
.pos-ds-detail-hdr[b-1ct6y5cubq]  { display: flex; padding: 7px 24px 7px 60px; gap: 12px; border-bottom: 1px solid var(--pos-bd); }
.pos-ds-col-base[b-1ct6y5cubq]    { font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: .07em; color: var(--pos-tx1); }
.pos-ds-col-desc[b-1ct6y5cubq]    { flex: 1; }
.pos-ds-col-price[b-1ct6y5cubq]   { width: 80px;  text-align: right; }
.pos-ds-col-qty[b-1ct6y5cubq]     { width: 60px;  text-align: center; }
.pos-ds-col-disc[b-1ct6y5cubq]    { width: 90px;  text-align: right; }
.pos-ds-col-total[b-1ct6y5cubq]   { width: 100px; text-align: right; }
.pos-ds-item-name[b-1ct6y5cubq]   { font-size: 12px; font-weight: 600; color: var(--pos-tx4); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pos-ds-item-sub[b-1ct6y5cubq]    { font-size: 10px; color: var(--pos-tx1); margin-top: 1px; }
.pos-ds-item-price[b-1ct6y5cubq]  { width: 80px;  font-size: 12px; color: var(--pos-tx3); font-family: monospace; text-align: right; flex-shrink: 0; }
.pos-ds-item-qty[b-1ct6y5cubq]    { width: 60px;  font-size: 13px; font-weight: 700; color: var(--pos-tx5); text-align: center; flex-shrink: 0; }
.pos-ds-item-total[b-1ct6y5cubq]  { width: 100px; font-size: 13px; font-weight: 700; color: #4ade80; font-family: monospace; text-align: right; flex-shrink: 0; }
.pos-ds-subtotals[b-1ct6y5cubq]   { display: flex; align-items: center; padding: 9px 24px 9px 60px; gap: 12px; border-top: 2px solid var(--pos-bd); background: var(--pos-bg3); }
.pos-ds-subtotal-lbl[b-1ct6y5cubq]   { flex: 1; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .07em; color: var(--pos-tx2); }
.pos-ds-subtotal-qty[b-1ct6y5cubq]   { width: 60px;  font-size: 13px; font-weight: 800; color: var(--pos-tx5); text-align: center; flex-shrink: 0; font-family: monospace; }
.pos-ds-subtotal-total[b-1ct6y5cubq] { width: 100px; font-size: 14px; font-weight: 800; color: #4ade80; font-family: monospace; text-align: right; flex-shrink: 0; }

/* DS footer */
.pos-ds-footer[b-1ct6y5cubq] {
    border-top: 2px solid var(--pos-bd2);
    padding: 13px 24px;
    flex-shrink: 0;
    background: var(--pos-bg3);
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.pos-ds-footer-left[b-1ct6y5cubq] { display: flex; align-items: center; gap: 8px; }
.pos-ds-footer-left .material-symbols-outlined[b-1ct6y5cubq] { font-size: 16px; color: var(--pos-tx1); }
.pos-ds-footer-lbl[b-1ct6y5cubq]  { font-size: 13px; font-weight: 600; color: var(--pos-tx2); }
.pos-ds-footer-right[b-1ct6y5cubq] { display: flex; align-items: center; gap: 24px; }
.pos-ds-discount-wrap[b-1ct6y5cubq] { text-align: right; }
.pos-ds-discount-lbl[b-1ct6y5cubq]  { font-size: 10px; color: var(--pos-tx1); font-weight: 600; text-transform: uppercase; letter-spacing: .07em; margin-bottom: 1px; }
.pos-ds-discount-val[b-1ct6y5cubq]  { font-size: 16px; font-weight: 700; color: #f87171; font-family: monospace; }
.pos-ds-revenue-wrap[b-1ct6y5cubq]  { text-align: right; }
.pos-ds-revenue-lbl[b-1ct6y5cubq]   { font-size: 10px; color: var(--pos-tx1); font-weight: 600; text-transform: uppercase; letter-spacing: .07em; margin-bottom: 1px; }
.pos-ds-revenue-val[b-1ct6y5cubq]   { font-size: 24px; font-weight: 900; color: #4ade80; font-family: monospace; letter-spacing: -.01em; }

/* ── Logout Confirm Modal ────────────────────────────────────────────────── */
.pos-logout-body[b-1ct6y5cubq]    { padding: 24px; }
.pos-logout-title[b-1ct6y5cubq]   { font-size: 16px; font-weight: 700; color: var(--pos-tx5); margin-bottom: 8px; }
.pos-logout-msg[b-1ct6y5cubq]     { font-size: 13px; color: var(--pos-tx2); margin-bottom: 20px; }
.pos-logout-actions[b-1ct6y5cubq] { display: flex; gap: 8px; }
.pos-logout-cancel[b-1ct6y5cubq]  { flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 10px; border-radius: 10px; border: 1px solid var(--pos-bd2); background: transparent; color: var(--pos-tx3); font-size: 13px; font-weight: 600; cursor: pointer; }
.pos-logout-confirm[b-1ct6y5cubq] { flex: 1; padding: 10px; border-radius: 10px; border: none; background: #ef4444; color: white; font-size: 13px; font-weight: 600; cursor: pointer; }

/* ── Mobile-only elements (hidden on desktop) ────────────────────────────── */
.pos-mobile-menu-btn[b-1ct6y5cubq]  { display: none; }
.pos-mobile-total[b-1ct6y5cubq]     { display: none; }
.pos-mobile-del-btn[b-1ct6y5cubq]   { display: none; }
.pos-mobile-close-btn[b-1ct6y5cubq] {
    display: none;
    margin-left: auto;
    flex-shrink: 0;
    background: transparent;
    border: none;
    color: var(--pos-tx2);
    cursor: pointer;
    width: 32px; height: 32px;
    border-radius: 8px;
    align-items: center;
    justify-content: center;
    transition: background .15s;
}
.pos-mobile-close-btn:hover[b-1ct6y5cubq] { background: var(--pos-bg3); color: var(--pos-tx5); }

/* ── Mobile layout ───────────────────────────────────────────────────────── */
@media (max-width: 639px) {

    /* Root: column stack */
    .pos-root[b-1ct6y5cubq] { flex-direction: column; }

    /* Left panel → slide-in drawer from left */
    .pos-left[b-1ct6y5cubq] {
        position: fixed;
        top: 0; left: 0; bottom: 0;
        width: min(300px, 85vw);
        z-index: 600;
        transform: translateX(-100%);
        transition: transform .25s cubic-bezier(.22,.68,0,1.2);
        box-shadow: none;
    }
    .pos-left.pos-left-open[b-1ct6y5cubq] {
        transform: translateX(0);
        box-shadow: 8px 0 40px rgba(0,0,0,.55);
    }

    /* Backdrop behind drawer */
    .pos-left-backdrop[b-1ct6y5cubq] {
        position: fixed;
        inset: 0;
        z-index: 599;
        background: rgba(0,0,0,.55);
        backdrop-filter: blur(3px);
        -webkit-backdrop-filter: blur(3px);
        animation: pos-bd-in-b-1ct6y5cubq .2s ease-out;
    }
    @keyframes pos-bd-in-b-1ct6y5cubq {
        from { opacity: 0; }
        to   { opacity: 1; }
    }

    /* Center: full width, leave room for footer bar */
    .pos-center[b-1ct6y5cubq] { width: 100%; padding-bottom: 76px; }

    /* Compact txn bar */
    .pos-txn-bar[b-1ct6y5cubq]    { padding: 10px 12px; gap: 10px; }
    .pos-clock[b-1ct6y5cubq]      { display: none; }
    .pos-barcode-wrap[b-1ct6y5cubq] { max-width: none; }
    .pos-txn-no-wrap[b-1ct6y5cubq]  { display: none; }

    /* Right panel → sticky 76px footer bar */
    .pos-right[b-1ct6y5cubq] {
        position: fixed;
        bottom: 0; left: 0; right: 0;
        width: 100%; height: 76px;
        flex-direction: row;
        align-items: center;
        padding: 0 12px;
        gap: 10px;
        border-left: none;
        border-top: 2px solid var(--pos-bd);
        z-index: 100;
    }
    .pos-totals-hdr[b-1ct6y5cubq] { display: none; }
    .pos-breakdown[b-1ct6y5cubq]  { display: none; }
    .pos-tin[b-1ct6y5cubq]        { display: none; }
    .pos-actions[b-1ct6y5cubq] {
        flex-direction: row;
        border-top: none;
        padding: 0;
        flex: 1;
        gap: 8px;
        align-items: center;
    }

    /* Show mobile-only elements */
    .pos-mobile-menu-btn[b-1ct6y5cubq]  { display: inline-flex !important; }
    .pos-mobile-total[b-1ct6y5cubq]     { display: flex !important; flex-direction: column; flex-shrink: 0; }
    .pos-mobile-close-btn[b-1ct6y5cubq] { display: flex !important; }

    /* Mobile total label + value */
    .pos-mobile-total-val[b-1ct6y5cubq] {
        font-size: 20px;
        font-weight: 900;
        color: var(--pos-tx5);
        font-family: monospace;
        line-height: 1.1;
        letter-spacing: -.01em;
    }
    .pos-mobile-total-lbl[b-1ct6y5cubq] {
        font-size: 9px;
        color: var(--pos-tx1);
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: .06em;
    }

    /* Hide Fx key badges — save space on mobile */
    .pos-fn-key[b-1ct6y5cubq] { display: none; }

    /* Bigger touch targets for function buttons */
    .pos-fn-btn[b-1ct6y5cubq] {
        padding: 15px 14px;
    }

    /* Hide keyboard shortcut hints in status bar */
    .pos-shortcut-list[b-1ct6y5cubq] { display: none; }

    /* Settle / Clear buttons: single-line, compact padding, hide kbd badges */
    .pos-settle-btn[b-1ct6y5cubq],
    .pos-clear-btn[b-1ct6y5cubq] {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        padding: 10px 12px;
        font-size: 13px;
    }
    .pos-settle-kbd[b-1ct6y5cubq],
    .pos-clear-kbd[b-1ct6y5cubq] { display: none; }

    /* Appearance popup repositioned */
    .pos-ap-popup[b-1ct6y5cubq] { left: 0; right: 0; width: auto; bottom: 76px; }

    /* #-column: show delete icon, hide row number */
    .pos-mobile-del-btn[b-1ct6y5cubq] { display: flex !important; }
    .pos-num-txt[b-1ct6y5cubq]        { display: none; }

    /* Unsettled modal: hide standalone action column, show inline buttons */
    .pos-utx-actions-col[b-1ct6y5cubq] { display: none !important; }
    .pos-utx-saved-btns[b-1ct6y5cubq]  { display: flex !important; }
}

/* ── Customer Row (right panel) ─────────────────────────────────────────── */
.pos-customer-row[b-1ct6y5cubq] {
    padding: 8px 12px;
    border-bottom: 1px solid var(--pos-bd);
}

.pos-customer-add-btn[b-1ct6y5cubq] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 14px;
    border-radius: 10px;
    border: 1px solid rgba(99, 102, 241, .5);
    background: rgba(99, 102, 241, .08);
    color: #818cf8;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    width: 100%;
    justify-content: center;
    transition: background .2s, border-color .2s, color .2s, box-shadow .2s;
    animation: pos-add-customer-pulse-b-1ct6y5cubq 2.8s ease-in-out infinite;
}
@keyframes pos-add-customer-pulse-b-1ct6y5cubq {
    0%, 100% { box-shadow: 0 0 0 0 rgba(99, 102, 241, 0); }
    50%       { box-shadow: 0 0 14px 3px rgba(99, 102, 241, .28); }
}
.pos-customer-add-btn:hover[b-1ct6y5cubq] {
    background: rgba(99, 102, 241, .18);
    border-color: rgba(99, 102, 241, .75);
    color: #a5b4fc;
    box-shadow: 0 0 18px 4px rgba(99, 102, 241, .35);
    animation: none;
}

.pos-customer-chip[b-1ct6y5cubq] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 8px;
    border-radius: 10px;
    background: rgba(167, 139, 250, .10);
    border: 1px solid rgba(167, 139, 250, .25);
}
.pos-customer-chip-avatar[b-1ct6y5cubq] {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: rgba(167, 139, 250, .2);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: #a78bfa;
}
.pos-customer-chip-info[b-1ct6y5cubq] {
    flex: 1;
    min-width: 0;
}
.pos-customer-chip-name[b-1ct6y5cubq] {
    display: block;
    font-size: 12px;
    font-weight: 600;
    color: var(--pos-tx4);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.pos-customer-chip-pts[b-1ct6y5cubq] {
    display: block;
    font-size: 10px;
    color: #a78bfa;
    font-weight: 600;
    margin-top: 1px;
}
.pos-customer-chip-remove[b-1ct6y5cubq] {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    border: none;
    background: transparent;
    color: var(--pos-tx1);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: background .15s;
}
.pos-customer-chip-remove:hover[b-1ct6y5cubq] { background: rgba(239, 68, 68, .12); color: #f87171; }

/* ── Points Section (settle modal) ─────────────────────────────────────── */
.pos-points-section[b-1ct6y5cubq] {
    background: rgba(167, 139, 250, .07);
    border: 1px solid rgba(167, 139, 250, .2);
    border-radius: 10px;
    padding: 10px 12px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 10px;
}
.pos-points-customer[b-1ct6y5cubq] {
    display: flex;
    align-items: center;
    gap: 6px;
}
.pos-points-name[b-1ct6y5cubq] {
    flex: 1;
    font-size: 12px;
    font-weight: 600;
    color: var(--pos-tx4);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.pos-points-balance-chip[b-1ct6y5cubq] {
    font-size: 11px;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 999px;
    background: rgba(167, 139, 250, .18);
    color: #a78bfa;
    white-space: nowrap;
}
/* ── Redeem toggle card ─────────────────────────────────────────────────── */
.pos-redeem-card[b-1ct6y5cubq] {
    background: rgba(251, 191, 36, .07);
    border: 1px solid rgba(251, 191, 36, .32);
    border-radius: 10px;
    padding: 10px 12px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    transition: background .2s, border-color .2s;
}
.pos-redeem-card--on[b-1ct6y5cubq] {
    background: rgba(167, 139, 250, .1);
    border-color: rgba(167, 139, 250, .45);
}
.pos-redeem-chk[b-1ct6y5cubq] {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
    pointer-events: none;
}
.pos-redeem-card-label[b-1ct6y5cubq] {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    user-select: none;
}
.pos-redeem-icon[b-1ct6y5cubq] {
    font-size: 20px;
    color: #fbbf24;
    transition: color .2s;
    flex-shrink: 0;
}
.pos-redeem-card--on .pos-redeem-icon[b-1ct6y5cubq] { color: #a78bfa; }
.pos-redeem-text[b-1ct6y5cubq] {
    flex: 1;
    font-size: 13px;
    font-weight: 700;
    color: #fbbf24;
    transition: color .2s;
    letter-spacing: .2px;
}
.pos-redeem-card--on .pos-redeem-text[b-1ct6y5cubq] { color: #c4b5fd; }
/* iOS-style toggle switch */
.pos-redeem-switch[b-1ct6y5cubq] {
    width: 40px;
    height: 22px;
    background: rgba(251, 191, 36, .2);
    border: 1px solid rgba(251, 191, 36, .4);
    border-radius: 999px;
    position: relative;
    flex-shrink: 0;
    transition: background .2s, border-color .2s;
}
.pos-redeem-card--on .pos-redeem-switch[b-1ct6y5cubq] {
    background: #a78bfa;
    border-color: #a78bfa;
}
.pos-redeem-switch-thumb[b-1ct6y5cubq] {
    position: absolute;
    top: 3px;
    left: 3px;
    width: 14px;
    height: 14px;
    background: white;
    border-radius: 50%;
    transition: transform .2s;
    box-shadow: 0 1px 4px rgba(0, 0, 0, .35);
}
.pos-redeem-card--on .pos-redeem-switch-thumb[b-1ct6y5cubq] { transform: translateX(18px); }
.pos-points-redeem-input-row[b-1ct6y5cubq] {
    display: flex;
    align-items: center;
    gap: 6px;
    flex: 1;
}
.pos-points-input[b-1ct6y5cubq] {
    width: 70px;
    padding: 4px 8px;
    border-radius: 6px;
    border: 1px solid rgba(167, 139, 250, .35);
    background: var(--pos-bg2);
    color: var(--pos-tx4);
    font-size: 12px;
    font-weight: 600;
    text-align: center;
    outline: none;
}
.pos-points-input:focus[b-1ct6y5cubq] { border-color: #a78bfa; }
.pos-points-eq[b-1ct6y5cubq] {
    font-size: 11px;
    font-weight: 600;
    color: #a78bfa;
    white-space: nowrap;
}

/* ── Receipt points section ─────────────────────────────────────────────── */
.pos-receipt-pts-section[b-1ct6y5cubq] {
    border-top: 1px solid rgba(255,255,255,.12);
    padding-top: 8px;
    margin-top: 4px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.pos-receipt-pts-row[b-1ct6y5cubq] {
    display: flex;
    justify-content: space-between;
    font-size: 12px;
}
/* _content/MiniMartBlazorPOS/Components/Pages/Reports/AccountLedger.razor.rz.scp.css */
/* ── Skeleton shimmer ─────────────────────────────────────────────────────── */
.al-skel[b-dkt7lffkzu] {
    background: var(--sb-hover-bg);
    background-image: linear-gradient(
        90deg,
        var(--sb-hover-bg) 0%,
        var(--skel-shine)  40%,
        var(--sb-hover-bg) 80%
    );
    background-size: 400px 100%;
    animation: al-shimmer-b-dkt7lffkzu 1.4s ease-in-out infinite;
}

@keyframes al-shimmer-b-dkt7lffkzu {
    0%   { background-position: -400px 0; }
    100% { background-position:  600px 0; }
}

/* ── Theme tokens ─────────────────────────────────────────────────────────── */
.al-text[b-dkt7lffkzu] { color: var(--bar-text); }
.al-sub[b-dkt7lffkzu]  { color: var(--bar-sub); }

/* ── Header icon ──────────────────────────────────────────────────────────── */
.al-header-icon-wrap[b-dkt7lffkzu] {
    background: rgb(var(--b50) / 1);
    border: 1px solid rgb(var(--b200) / 1);
}

.al-header-icon[b-dkt7lffkzu] {
    font-size: 22px;
    color: rgb(var(--b600));
}

.al-badge-pill[b-dkt7lffkzu] {
    color: var(--bar-sub);
    background: var(--bar-bg);
    border: 1px solid var(--bar-border);
}

/* ── Filter bar ───────────────────────────────────────────────────────────── */
.al-filter-bar[b-dkt7lffkzu] {
    background: var(--bar-bg);
    border-color: var(--bar-border);
}

/* ── Period toggle group ──────────────────────────────────────────────────── */
.al-period-toggle[b-dkt7lffkzu] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px;
    border-radius: 12px;
    border: 1px solid var(--bar-border);
    background: var(--page-bg);
}

.al-period-btn[b-dkt7lffkzu] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 30px;
    padding: 0 14px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 500;
    color: var(--bar-sub);
    background: transparent;
    border: none;
    cursor: pointer;
    transition: background .15s, color .15s;
    white-space: nowrap;
}

.al-period-btn:hover:not(.al-period-btn-active)[b-dkt7lffkzu] {
    background: var(--sb-hover-bg);
    color: var(--bar-text);
}

.al-period-btn-active[b-dkt7lffkzu] {
    background: rgb(var(--b600));
    color: #fff;
    font-weight: 600;
}

.al-period-btn-active .material-symbols-outlined[b-dkt7lffkzu] {
    color: #fff;
}

.al-custom-dates[b-dkt7lffkzu] {
    animation: al-slide-in-b-dkt7lffkzu .18s ease;
}

@keyframes al-slide-in-b-dkt7lffkzu {
    from { opacity: 0; transform: translateY(-4px); }
    to   { opacity: 1; transform: translateY(0); }
}

.al-label[b-dkt7lffkzu] {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--bar-sub);
}

.al-select[b-dkt7lffkzu] {
    border: 1px solid var(--bar-border);
    border-radius: 10px;
    background: var(--page-bg);
    color: var(--bar-text);
    font-size: 13px;
    font-weight: 500;
    padding: 0 12px;
    height: 38px;
    outline: none;
    cursor: pointer;
    transition: border-color .15s;
}

.al-select:focus[b-dkt7lffkzu] { border-color: rgb(var(--b400)); }

/* ── Action buttons ───────────────────────────────────────────────────────── */
.al-btn-primary[b-dkt7lffkzu] {
    display: inline-flex;
    align-items: center;
    padding: 8px 18px;
    border-radius: 10px;
    font-size: 13px;
    font-weight: 600;
    background: rgb(var(--b600));
    color: #fff;
    border: none;
    cursor: pointer;
    transition: background .15s, transform .1s;
    white-space: nowrap;
    gap: 6px;
}

.al-btn-primary:hover:not(:disabled)[b-dkt7lffkzu]  { background: rgb(var(--b700)); }
.al-btn-primary:active:not(:disabled)[b-dkt7lffkzu] { transform: scale(.97); }
.al-btn-primary:disabled[b-dkt7lffkzu]              { opacity: .55; cursor: not-allowed; }

.al-btn-ghost[b-dkt7lffkzu] {
    display: inline-flex;
    align-items: center;
    padding: 8px 18px;
    border-radius: 10px;
    font-size: 13px;
    font-weight: 600;
    background: var(--page-bg);
    color: var(--bar-sub);
    border: 1px solid var(--bar-border);
    cursor: pointer;
    transition: all .15s;
    white-space: nowrap;
    gap: 6px;
}

.al-btn-ghost:hover:not(:disabled)[b-dkt7lffkzu]  { border-color: rgb(var(--b400)); color: rgb(var(--b600)); background: rgb(var(--b50)/1); }
.al-btn-ghost:active:not(:disabled)[b-dkt7lffkzu] { transform: scale(.97); }
.al-btn-ghost:disabled[b-dkt7lffkzu]              { opacity: .55; cursor: not-allowed; }

/* ── Error banner ─────────────────────────────────────────────────────────── */
.al-error-banner[b-dkt7lffkzu] {
    background: #fef2f2;
    border: 1px solid #fecaca;
    color: #b91c1c;
}

/* ── KPI Cards ─────────────────────────────────────────────────────────────── */
.al-kpi-row[b-dkt7lffkzu] {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 20px;
}

.al-kpi-card[b-dkt7lffkzu] {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px 20px;
    border-radius: 14px;
    border: 1px solid var(--bar-border);
    background: var(--bar-bg);
    flex: 1;
    min-width: 200px;
    max-width: 340px;
    transition: box-shadow .15s, transform .15s;
}

.al-kpi-card:hover[b-dkt7lffkzu] {
    box-shadow: 0 4px 16px rgba(0,0,0,.08);
    transform: translateY(-1px);
}

.al-kpi-icon-box[b-dkt7lffkzu] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    border-radius: 12px;
    flex-shrink: 0;
}

.al-kpi-icon-box .material-symbols-outlined[b-dkt7lffkzu] { font-size: 22px; }

.al-kpi-icon-emerald[b-dkt7lffkzu] {
    background: rgba(16, 185, 129, .12);
    border: 1px solid rgba(16, 185, 129, .25);
    color: #10b981;
}

.al-kpi-icon-brand[b-dkt7lffkzu] {
    background: rgb(var(--b50) / 1);
    border: 1px solid rgb(var(--b200) / 1);
    color: rgb(var(--b600));
}

.al-kpi-icon-red[b-dkt7lffkzu] {
    background: rgba(239, 68, 68, .12);
    border: 1px solid rgba(239, 68, 68, .25);
    color: #ef4444;
}

.al-kpi-content[b-dkt7lffkzu] {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.al-kpi-num[b-dkt7lffkzu] {
    font-size: 22px;
    font-weight: 800;
    line-height: 1.1;
    color: var(--bar-text);
}

.al-kpi-lbl[b-dkt7lffkzu] {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--bar-sub);
}

/* ── Card container ───────────────────────────────────────────────────────── */
.al-card[b-dkt7lffkzu] {
    background: var(--bar-bg);
    border-color: var(--bar-border);
    overflow: hidden;
}

/* ── Section header inside card ───────────────────────────────────────────── */
.al-section-header[b-dkt7lffkzu] {
    border-color: var(--bar-border);
    background: var(--page-bg);
}

.al-section-icon-box[b-dkt7lffkzu] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 8px;
    background: rgb(var(--b50) / 1);
    border: 1px solid rgb(var(--b200) / 1);
    color: rgb(var(--b600));
    flex-shrink: 0;
}

.al-date-range-pill[b-dkt7lffkzu] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 13px;
    border-radius: 100px;
    font-size: 12px;
    font-weight: 600;
    background: rgb(var(--b50) / 1);
    border: 1px solid rgb(var(--b200) / 1);
    color: rgb(var(--b600));
    white-space: nowrap;
}

.al-date-arrow[b-dkt7lffkzu] {
    color: rgb(var(--b400));
    font-size: 14px;
    line-height: 1;
    font-weight: 400;
}

/* ── Table ────────────────────────────────────────────────────────────────── */
.al-table[b-dkt7lffkzu] {
    border-collapse: collapse;
    table-layout: fixed;
}

.al-thead-row[b-dkt7lffkzu] {
    background: var(--page-bg);
    border-bottom: 2px solid var(--bar-border);
}

.al-th[b-dkt7lffkzu] {
    padding: 10px 14px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--bar-sub);
    white-space: normal;
    word-break: break-word;
    text-align: left;
    vertical-align: bottom;
}

.al-th-center[b-dkt7lffkzu] { text-align: center; }
.al-th-right[b-dkt7lffkzu]  { text-align: right; }

.al-td[b-dkt7lffkzu] {
    padding: 10px 14px;
    font-size: 13px;
    color: var(--bar-sub);
    border-top: 1px solid var(--bar-border);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.al-td-center[b-dkt7lffkzu] { text-align: center; overflow: visible; }
.al-td-right[b-dkt7lffkzu]  { text-align: right; }
.al-td-mono[b-dkt7lffkzu]   { font-family: monospace; font-size: 12px; color: var(--bar-text); font-weight: 600; }

/* Value colour helpers */
.al-cost[b-dkt7lffkzu]   { color: rgb(var(--b600)); font-weight: 700; }
.al-net[b-dkt7lffkzu]    { color: #10b981; font-weight: 700; }
.al-profit[b-dkt7lffkzu] { color: #10b981; font-weight: 700; }
.al-disc[b-dkt7lffkzu]   { color: #ef4444; font-weight: 600; }

/* Profit KPI icon */
.al-kpi-icon-profit[b-dkt7lffkzu] {
    background: rgba(16, 185, 129, .12);
    border: 1px solid rgba(16, 185, 129, .25);
    color: #10b981;
}

/* (+/-) % badges */
.al-pct-badge[b-dkt7lffkzu] {
    display: inline-block;
    padding: 2px 7px;
    border-radius: 100px;
    font-size: 10px;
    font-weight: 700;
    background: rgba(16, 185, 129, .12);
    color: #059669;
}

.al-pct-badge-neg[b-dkt7lffkzu] {
    display: inline-block;
    padding: 2px 7px;
    border-radius: 100px;
    font-size: 10px;
    font-weight: 700;
    background: #fee2e2;
    color: #dc2626;
}

/* Row states */
.al-tr[b-dkt7lffkzu]           { transition: background .1s; }
.al-tr:hover td[b-dkt7lffkzu]  { background: var(--sb-hover-bg); }
.al-tr-first td[b-dkt7lffkzu]  { border-top: none; }

/* Row number badge */
.al-row-num[b-dkt7lffkzu] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 22px; height: 22px;
    padding: 0 5px;
    border-radius: 11px;
    font-size: 11px;
    font-weight: 700;
    background: var(--sb-hover-bg);
    color: var(--bar-sub);
}

/* ── Footer / Totals row ──────────────────────────────────────────────────── */
.al-foot-row td[b-dkt7lffkzu] {
    background: var(--page-bg);
    border-top: 2px solid var(--bar-border);
}

.al-foot-label[b-dkt7lffkzu] {
    font-size: 12px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--bar-text);
}

.al-foot-val[b-dkt7lffkzu] {
    font-weight: 800;
    color: var(--bar-text);
}

/* ── Pagination ───────────────────────────────────────────────────────────── */
.al-pagination[b-dkt7lffkzu] {
    border-color: var(--bar-border);
}

.al-page-btn[b-dkt7lffkzu] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 32px; height: 32px;
    padding: 0 6px;
    border-radius: 8px;
    border: 1px solid var(--bar-border);
    background: var(--page-bg);
    color: var(--bar-sub);
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: all .15s;
}

.al-page-btn:hover:not(:disabled)[b-dkt7lffkzu] {
    border-color: rgb(var(--b400));
    color: rgb(var(--b600));
    background: rgb(var(--b50) / 1);
}

.al-page-btn:disabled[b-dkt7lffkzu] { opacity: .4; cursor: not-allowed; }

.al-page-btn-active[b-dkt7lffkzu] {
    background: rgb(var(--b600)) !important;
    color: #fff !important;
    border-color: rgb(var(--b600)) !important;
    font-weight: 700;
}

/* ── Mobile ───────────────────────────────────────────────────────────────── */
@media (max-width: 639px) {
    /* KPI cards: full width */
    .al-kpi-card[b-dkt7lffkzu] { flex: 0 0 100%; max-width: 100%; }

    /* Period toggle: wrap buttons */
    .al-period-toggle[b-dkt7lffkzu] { flex-wrap: wrap; width: 100%; }
    .al-period-btn[b-dkt7lffkzu]    { flex: 1; justify-content: center; }

    /* Table: let browser size columns naturally so Description gets real width */
    .al-table[b-dkt7lffkzu] { table-layout: auto; }
    .al-th[b-dkt7lffkzu]    { white-space: nowrap; word-break: normal; }
}
/* _content/MiniMartBlazorPOS/Components/Pages/Reports/CancelledOrders.razor.rz.scp.css */
/* ── Skeleton shimmer ─────────────────────────────────────────────────────── */
.co-skel[b-il2v9wzqp4] {
    background: var(--sb-hover-bg);
    background-image: linear-gradient(
        90deg,
        var(--sb-hover-bg) 0%,
        var(--skel-shine)  40%,
        var(--sb-hover-bg) 80%
    );
    background-size: 400px 100%;
    animation: co-shimmer-b-il2v9wzqp4 1.4s ease-in-out infinite;
}

@keyframes co-shimmer-b-il2v9wzqp4 {
    0%   { background-position: -400px 0; }
    100% { background-position:  600px 0; }
}

/* ── Theme tokens ─────────────────────────────────────────────────────────── */
.co-text[b-il2v9wzqp4]       { color: var(--bar-text); }
.co-sub[b-il2v9wzqp4]        { color: var(--bar-sub); }
.co-text-dimmed[b-il2v9wzqp4] { opacity: .6; }

/* ── Icon sizes ───────────────────────────────────────────────────────────── */
.co-icon-xs[b-il2v9wzqp4]  { font-size: 14px; }
.co-icon-sm[b-il2v9wzqp4]  { font-size: 17px; }
.co-icon-md[b-il2v9wzqp4]  { font-size: 20px; }
.co-icon-nav[b-il2v9wzqp4] { font-size: 16px; }

/* ── Header icon ──────────────────────────────────────────────────────────── */
.co-header-icon-wrap[b-il2v9wzqp4] {
    background: rgba(220, 38, 38, .1);
    border: 1px solid rgba(220, 38, 38, .25);
}

.co-header-icon[b-il2v9wzqp4] {
    font-size: 22px;
    color: #dc2626;
}

.co-badge-pill[b-il2v9wzqp4] {
    color: var(--bar-sub);
    background: var(--bar-bg);
    border: 1px solid var(--bar-border);
}

/* ── Filter bar ───────────────────────────────────────────────────────────── */
.co-filter-bar[b-il2v9wzqp4] {
    background: var(--bar-bg);
    border-color: var(--bar-border);
}

.co-label[b-il2v9wzqp4] {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--bar-sub);
}

/* ── Error banner ─────────────────────────────────────────────────────────── */
.co-error-banner[b-il2v9wzqp4] {
    background: #fef2f2;
    border: 1px solid #fecaca;
    color: #b91c1c;
}

/* ── KPI cards ────────────────────────────────────────────────────────────── */
.co-kpi-row[b-il2v9wzqp4] {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 20px;
}

.co-kpi-card[b-il2v9wzqp4] {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px 20px;
    background: var(--bar-bg);
    border: 1px solid var(--bar-border);
    border-radius: 14px;
    flex: 1;
    min-width: 200px;
    max-width: 320px;
    box-shadow: 0 1px 4px rgba(0, 0, 0, .06);
    transition: box-shadow .15s, transform .15s;
}

.co-kpi-card:hover[b-il2v9wzqp4] {
    box-shadow: 0 4px 14px rgba(0, 0, 0, .1);
    transform: translateY(-1px);
}

.co-kpi-card-warn[b-il2v9wzqp4] {
    border-color: rgba(239, 68, 68, .35);
}

.co-kpi-icon-box[b-il2v9wzqp4] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    border-radius: 12px;
    flex-shrink: 0;
}

.co-kpi-icon-box .material-symbols-outlined[b-il2v9wzqp4] { font-size: 22px; }

.co-kpi-icon-red[b-il2v9wzqp4]    { background: rgba(220, 38, 38, .12); color: #dc2626; }
.co-kpi-icon-orange[b-il2v9wzqp4] { background: rgba(239, 68, 68, .12); color: #ef4444; }

.co-kpi-content[b-il2v9wzqp4] {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.co-kpi-num[b-il2v9wzqp4] {
    font-size: 24px;
    font-weight: 800;
    line-height: 1;
    color: var(--bar-text);
    font-variant-numeric: tabular-nums;
}

.co-kpi-num-warn[b-il2v9wzqp4] { color: #ef4444; }

.co-kpi-lbl[b-il2v9wzqp4] {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--bar-sub);
}

/* ── Action buttons ───────────────────────────────────────────────────────── */
.co-btn-primary[b-il2v9wzqp4] {
    display: inline-flex;
    align-items: center;
    padding: 8px 18px;
    border-radius: 10px;
    font-size: 13px;
    font-weight: 600;
    background: #dc2626;
    color: #fff;
    border: none;
    cursor: pointer;
    transition: background .15s, transform .1s;
    white-space: nowrap;
    gap: 6px;
}

.co-btn-primary:hover:not(:disabled)[b-il2v9wzqp4]  { background: #b91c1c; }
.co-btn-primary:active:not(:disabled)[b-il2v9wzqp4] { transform: scale(.97); }
.co-btn-primary:disabled[b-il2v9wzqp4]              { opacity: .55; cursor: not-allowed; }

.co-btn-secondary[b-il2v9wzqp4] {
    display: inline-flex;
    align-items: center;
    padding: 8px 18px;
    border-radius: 10px;
    font-size: 13px;
    font-weight: 600;
    background: var(--page-bg);
    color: var(--bar-sub);
    border: 1px solid var(--bar-border);
    cursor: pointer;
    transition: all .15s;
    white-space: nowrap;
    gap: 6px;
}

.co-btn-secondary:hover:not(:disabled)[b-il2v9wzqp4]  { border-color: #ef4444; color: #dc2626; background: rgba(254, 242, 242, .5); }
.co-btn-secondary:active:not(:disabled)[b-il2v9wzqp4] { transform: scale(.97); }
.co-btn-secondary:disabled[b-il2v9wzqp4]              { opacity: .55; cursor: not-allowed; }

.co-btn-normalize[b-il2v9wzqp4] {
    display: inline-flex;
    align-items: center;
    padding: 8px 18px;
    border-radius: 10px;
    font-size: 13px;
    font-weight: 600;
    background: #16a34a;
    color: #fff;
    border: none;
    cursor: pointer;
    transition: background .15s, transform .1s;
    white-space: nowrap;
    gap: 6px;
}

.co-btn-normalize:hover:not(:disabled)[b-il2v9wzqp4]  { background: #15803d; }
.co-btn-normalize:active:not(:disabled)[b-il2v9wzqp4] { transform: scale(.97); }
.co-btn-normalize:disabled[b-il2v9wzqp4]              { opacity: .55; cursor: not-allowed; }

/* ── Table wrapper ────────────────────────────────────────────────────────── */
.co-table-wrap[b-il2v9wzqp4] { overflow-x: auto; }

/* ── Skeleton widths ──────────────────────────────────────────────────────── */
.co-skel-num[b-il2v9wzqp4]    { width: 40px; }
.co-skel-transno[b-il2v9wzqp4]{ width: 140px; }
.co-skel-grow[b-il2v9wzqp4]   { flex: 1; }
.co-skel-price[b-il2v9wzqp4]  { width: 80px; }
.co-skel-total[b-il2v9wzqp4]  { width: 100px; }

/* ── Column widths ────────────────────────────────────────────────────────── */
.co-col-num[b-il2v9wzqp4]     { width: 50px; }
.co-col-transno[b-il2v9wzqp4] { width: 150px; }
.co-col-qty[b-il2v9wzqp4]     { width: 70px; }
.co-col-amount[b-il2v9wzqp4]  { width: 120px; }
.co-col-date[b-il2v9wzqp4]    { width: 100px; }
.co-col-voidby[b-il2v9wzqp4]  { width: 100px; }
.co-col-cancelby[b-il2v9wzqp4]{ width: 110px; }
.co-col-reason[b-il2v9wzqp4]  { width: 140px; }
.co-col-inv[b-il2v9wzqp4]     { width: 110px; }
.co-col-expand[b-il2v9wzqp4]  { width: 56px; }

/* ── Card ─────────────────────────────────────────────────────────────────── */
.co-card[b-il2v9wzqp4] {
    background: var(--bar-bg);
    border-color: var(--bar-border);
    overflow: hidden;
}

/* ── Table ────────────────────────────────────────────────────────────────── */
.co-table[b-il2v9wzqp4] {
    border-collapse: collapse;
    table-layout: auto;
}

.co-th[b-il2v9wzqp4] {
    padding: 10px 14px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--bar-sub);
    white-space: nowrap;
    text-align: left;
    vertical-align: bottom;
    background: var(--page-bg);
    border-bottom: 2px solid var(--bar-border);
}

.co-th-center[b-il2v9wzqp4] { text-align: center; }
.co-th-right[b-il2v9wzqp4]  { text-align: right; }
.co-th-inv[b-il2v9wzqp4] {
    background: rgba(220, 38, 38, .06);
    color: #b91c1c;
    border-bottom-color: #fca5a5;
}

/* ── Sticky Details column ────────────────────────────────────────────────── */
.co-th-sticky[b-il2v9wzqp4],
.co-td-sticky[b-il2v9wzqp4] {
    position: sticky;
    right: 0;
    z-index: 2;
}

.co-th-sticky[b-il2v9wzqp4] { background: var(--page-bg); }
.co-td-sticky[b-il2v9wzqp4] { background: var(--bar-bg); }

.co-tr:hover .co-td-sticky[b-il2v9wzqp4] { background: var(--sb-hover-bg); }

.co-td[b-il2v9wzqp4] {
    padding: 10px 14px;
    font-size: 13px;
    color: var(--bar-sub);
    border-top: 1px solid var(--bar-border);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.co-td-center[b-il2v9wzqp4] { text-align: center; overflow: visible; }
.co-td-right[b-il2v9wzqp4]  { text-align: right; }
.co-td-mono[b-il2v9wzqp4]    { font-family: monospace; font-size: 12px; color: var(--bar-text); font-weight: 600; }
.co-td-desc[b-il2v9wzqp4]   { color: var(--bar-text); font-weight: 500; max-width: 0; }
.co-td-date[b-il2v9wzqp4]   { font-size: 12px; color: var(--bar-sub); font-variant-numeric: tabular-nums; }

/* Column-specific colouring */
.co-price[b-il2v9wzqp4] { color: rgb(var(--b600)); font-weight: 700; font-size: 12px; }
.co-qty[b-il2v9wzqp4]   { color: var(--bar-text); font-weight: 700; }
.co-total[b-il2v9wzqp4] { color: var(--bar-text); font-weight: 700; font-size: 12px; }
.co-reason[b-il2v9wzqp4] { font-size: 12px; font-style: italic; }

/* ── Row number badge ─────────────────────────────────────────────────────── */
.co-row-num[b-il2v9wzqp4] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 22px; height: 22px;
    padding: 0 5px;
    border-radius: 11px;
    font-size: 11px;
    font-weight: 700;
    background: var(--sb-hover-bg);
    color: var(--bar-sub);
}

.co-tr[b-il2v9wzqp4] { transition: background .1s; }
.co-tr:hover td[b-il2v9wzqp4] { background: var(--sb-hover-bg); }
.co-tr-first td[b-il2v9wzqp4] { border-top: none; }

/* ── YES / NO / MIXED badges ──────────────────────────────────────────────── */
.co-yes-badge[b-il2v9wzqp4] {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 100px;
    font-size: 10px;
    font-weight: 800;
    background: #dcfce7;
    color: #15803d;
    letter-spacing: .04em;
}

.co-no-badge[b-il2v9wzqp4] {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 100px;
    font-size: 10px;
    font-weight: 800;
    background: #fee2e2;
    color: #dc2626;
    letter-spacing: .04em;
}

.co-mixed-badge[b-il2v9wzqp4] {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 100px;
    font-size: 10px;
    font-weight: 800;
    background: #fef3c7;
    color: #d97706;
    letter-spacing: .04em;
}

/* ── Expand button ────────────────────────────────────────────────────────── */
.co-expand-btn[b-il2v9wzqp4] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px; height: 28px;
    border-radius: 8px;
    border: 1px solid var(--bar-border);
    background: transparent;
    color: var(--bar-sub);
    cursor: pointer;
    transition: all .15s;
}

.co-expand-btn:hover[b-il2v9wzqp4] {
    background: var(--sb-hover-bg);
    color: var(--bar-text);
    border-color: #ef4444;
}

.co-expand-btn-active[b-il2v9wzqp4] {
    background: rgba(220, 38, 38, .08);
    color: #dc2626;
    border-color: rgba(220, 38, 38, .35);
}

/* ── Expandable row ───────────────────────────────────────────────────────── */
.co-expand-row[b-il2v9wzqp4] {
    background: var(--page-bg);
}

.co-expand-td[b-il2v9wzqp4] {
    padding: 0;
}

.co-expand-body[b-il2v9wzqp4] {
    padding: 12px 16px 16px 40px;
    border-top: 1px solid var(--bar-border);
    border-bottom: 2px solid var(--bar-border);
}

/* ── Inner line-items table ───────────────────────────────────────────────── */
.co-inner-table[b-il2v9wzqp4] {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
    font-size: 12px;
    border: 1px solid var(--bar-border);
    border-radius: 10px;
    overflow: hidden;
}

.co-inner-th[b-il2v9wzqp4] {
    padding: 8px 12px;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--bar-sub);
    background: var(--bar-bg);
    border-bottom: 1px solid var(--bar-border);
    text-align: left;
    white-space: nowrap;
}

.co-inner-td[b-il2v9wzqp4] {
    padding: 7px 12px;
    color: var(--bar-sub);
    border-top: 1px solid var(--bar-border);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.co-inner-tr:hover td[b-il2v9wzqp4] {
    background: var(--sb-hover-bg);
}

.co-inner-foot td[b-il2v9wzqp4] {
    background: var(--bar-bg);
    border-top: 2px solid var(--bar-border);
}

/* ── Empty state ──────────────────────────────────────────────────────────── */
.co-empty-icon[b-il2v9wzqp4] {
    font-size: 48px;
    color: var(--bar-sub);
    opacity: .25;
}

/* ── Mobile ───────────────────────────────────────────────────────────────── */
@media (max-width: 639px) {
    /* KPI cards: full width */
    .co-kpi-card[b-il2v9wzqp4] { flex: 0 0 100%; max-width: 100%; }
}
/* _content/MiniMartBlazorPOS/Components/Pages/Reports/CriticalStocks.razor.rz.scp.css */
/* ── Skeleton shimmer ─────────────────────────────────────────────────────── */
.cs-skel[b-dt0wmj171w] {
    background: var(--sb-hover-bg);
    background-image: linear-gradient(
        90deg,
        var(--sb-hover-bg) 0%,
        var(--skel-shine)  40%,
        var(--sb-hover-bg) 80%
    );
    background-size: 400px 100%;
    animation: cs-shimmer-b-dt0wmj171w 1.4s ease-in-out infinite;
}

@keyframes cs-shimmer-b-dt0wmj171w {
    0%   { background-position: -400px 0; }
    100% { background-position:  600px 0; }
}

/* ── Theme tokens ─────────────────────────────────────────────────────────── */
.cs-text[b-dt0wmj171w]    { color: var(--bar-text); }
.cs-sub[b-dt0wmj171w]     { color: var(--bar-sub); }

/* ── Header icon ──────────────────────────────────────────────────────────── */
.cs-header-icon-wrap[b-dt0wmj171w] {
    background: rgba(239, 68, 68, .1);
    border: 1px solid rgba(239, 68, 68, .25);
}

.cs-header-icon[b-dt0wmj171w] {
    font-size: 22px;
    color: #ef4444;
}

.cs-badge-pill[b-dt0wmj171w] {
    color: var(--bar-sub);
    background: var(--bar-bg);
    border: 1px solid var(--bar-border);
}

/* ── Filter bar ───────────────────────────────────────────────────────────── */
.cs-filter-bar[b-dt0wmj171w] {
    background: var(--bar-bg);
    border-color: var(--bar-border);
}

.cs-filter-search-wrap[b-dt0wmj171w] {
    flex: 1;
    min-width: 200px;
    max-width: 320px;
}

.cs-label[b-dt0wmj171w] {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--bar-sub);
}

.cs-search-wrap[b-dt0wmj171w] {
    display: inline-flex;
    align-items: center;
    border: 1px solid var(--bar-border);
    border-radius: 10px;
    background: var(--page-bg);
    height: 38px;
    width: 100%;
    overflow: hidden;
    transition: border-color .15s, box-shadow .15s;
}

.cs-search-wrap:focus-within[b-dt0wmj171w] {
    border-color: #ef4444;
    box-shadow: 0 0 0 3px rgba(239, 68, 68, .15);
}

.cs-search-icon[b-dt0wmj171w] {
    font-size: 17px;
    color: var(--bar-sub);
    padding: 0 8px 0 10px;
    flex-shrink: 0;
    pointer-events: none;
}

.cs-search-input[b-dt0wmj171w] {
    border: none !important;
    background: transparent !important;
    color: var(--bar-text) !important;
    font-size: 13px;
    font-weight: 500;
    padding: 0 8px;
    outline: none;
    flex: 1;
    min-width: 0;
}

.cs-select[b-dt0wmj171w] {
    border: 1px solid var(--bar-border);
    border-radius: 10px;
    background: var(--page-bg);
    color: var(--bar-text);
    font-size: 13px;
    font-weight: 500;
    padding: 0 32px 0 12px;
    height: 38px;
    outline: none;
    appearance: auto;
    cursor: pointer;
    transition: border-color .15s;
}

.cs-select:focus[b-dt0wmj171w] { border-color: #ef4444; }

.cs-sortdir-btn[b-dt0wmj171w] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 38px;
    padding: 0 14px;
    border: 1px solid var(--bar-border);
    border-radius: 10px;
    background: var(--page-bg);
    color: var(--bar-text);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: all .15s;
    min-width: 96px;
}

.cs-sortdir-btn:hover[b-dt0wmj171w] {
    border-color: #ef4444;
    background: rgba(239, 68, 68, .06);
    color: #ef4444;
}

/* ── Action buttons ───────────────────────────────────────────────────────── */
.cs-btn-primary[b-dt0wmj171w] {
    display: inline-flex;
    align-items: center;
    padding: 8px 18px;
    border-radius: 10px;
    font-size: 13px;
    font-weight: 600;
    background: #ef4444;
    color: #fff;
    border: none;
    cursor: pointer;
    transition: background .15s, transform .1s;
    white-space: nowrap;
    gap: 6px;
}

.cs-btn-primary:hover:not(:disabled)[b-dt0wmj171w]  { background: #dc2626; }
.cs-btn-primary:active:not(:disabled)[b-dt0wmj171w] { transform: scale(.97); }
.cs-btn-primary:disabled[b-dt0wmj171w]              { opacity: .55; cursor: not-allowed; }

.cs-btn-secondary[b-dt0wmj171w] {
    display: inline-flex;
    align-items: center;
    padding: 8px 18px;
    border-radius: 10px;
    font-size: 13px;
    font-weight: 600;
    background: var(--page-bg);
    color: var(--bar-sub);
    border: 1px solid var(--bar-border);
    cursor: pointer;
    transition: all .15s;
    white-space: nowrap;
    gap: 6px;
}

.cs-btn-secondary:hover:not(:disabled)[b-dt0wmj171w]  { border-color: #ef4444; color: #ef4444; background: rgba(239,68,68,.06); }
.cs-btn-secondary:active:not(:disabled)[b-dt0wmj171w] { transform: scale(.97); }
.cs-btn-secondary:disabled[b-dt0wmj171w]              { opacity: .55; cursor: not-allowed; }

/* ── Error banner ─────────────────────────────────────────────────────────── */
.cs-error-banner[b-dt0wmj171w] {
    background: #fef2f2;
    border: 1px solid #fecaca;
    color: #b91c1c;
}

/* ── KPI Cards ─────────────────────────────────────────────────────────────── */
.cs-kpi-row[b-dt0wmj171w] {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 20px;
}

.cs-kpi-card[b-dt0wmj171w] {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px 20px;
    border-radius: 14px;
    border: 1px solid var(--bar-border);
    background: var(--bar-bg);
    flex: 1;
    min-width: 200px;
    max-width: 340px;
    transition: box-shadow .15s, transform .15s;
}

.cs-kpi-card:hover[b-dt0wmj171w] {
    box-shadow: 0 4px 16px rgba(0,0,0,.08);
    transform: translateY(-1px);
}

.cs-kpi-icon-box[b-dt0wmj171w] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    border-radius: 12px;
    flex-shrink: 0;
}

.cs-kpi-icon-box .material-symbols-outlined[b-dt0wmj171w] { font-size: 22px; }

.cs-kpi-icon-red[b-dt0wmj171w] {
    background: rgba(239, 68, 68, .12);
    border: 1px solid rgba(239, 68, 68, .25);
    color: #ef4444;
}

.cs-kpi-icon-out[b-dt0wmj171w] {
    background: rgba(220, 38, 38, .12);
    border: 1px solid rgba(220, 38, 38, .25);
    color: #dc2626;
}

.cs-kpi-icon-low[b-dt0wmj171w] {
    background: rgba(245, 158, 11, .12);
    border: 1px solid rgba(245, 158, 11, .25);
    color: #d97706;
}

.cs-kpi-content[b-dt0wmj171w] {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.cs-kpi-num[b-dt0wmj171w] {
    font-size: 22px;
    font-weight: 800;
    line-height: 1.1;
    color: var(--bar-text);
}

.cs-kpi-lbl[b-dt0wmj171w] {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--bar-sub);
}

/* ── Card ─────────────────────────────────────────────────────────────────── */
.cs-card[b-dt0wmj171w] {
    background: var(--bar-bg);
    border-color: var(--bar-border);
    overflow: hidden;
}

/* ── Table ────────────────────────────────────────────────────────────────── */
.cs-table[b-dt0wmj171w] {
    border-collapse: collapse;
    table-layout: fixed;
}

.cs-th[b-dt0wmj171w] {
    padding: 10px 14px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--bar-sub);
    white-space: normal;
    word-break: break-word;
    text-align: left;
    vertical-align: bottom;
}

.cs-th-center[b-dt0wmj171w] { text-align: center; }
.cs-th-right[b-dt0wmj171w]  { text-align: right; }

/* Stock On-Hand header — amber highlight matching old system */
.cs-th-stock[b-dt0wmj171w] {
    background: rgba(245, 158, 11, .12);
    color: #b45309;
    border-bottom: 2px solid #f59e0b;
}

.cs-td[b-dt0wmj171w] {
    padding: 10px 14px;
    font-size: 13px;
    color: var(--bar-sub);
    border-top: 1px solid var(--bar-border);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.cs-td-center[b-dt0wmj171w] { text-align: center; overflow: visible; }
.cs-td-right[b-dt0wmj171w]  { text-align: right; }
.cs-td-mono[b-dt0wmj171w]   { font-family: monospace; font-size: 12px; color: var(--bar-text); font-weight: 600; }
.cs-td-desc[b-dt0wmj171w]   { color: var(--bar-text); font-weight: 500; }

.cs-price[b-dt0wmj171w]   { color: rgb(var(--b600)); font-weight: 700; font-size: 12px; }
.cs-reorder[b-dt0wmj171w] { color: var(--bar-sub); font-weight: 600; }

/* Stock On-Hand values — 3-tier */
.cs-deficit-stock[b-dt0wmj171w] { color: #7c3aed; font-weight: 700; }   /* DEFICIT — purple */
.cs-stock-low[b-dt0wmj171w]     { color: #d97706; font-weight: 700; }   /* LOW     — amber  */

/* DEFICIT badge — purple */
.cs-deficit-badge[b-dt0wmj171w] {
    display: inline-block;
    margin-left: 4px;
    padding: 2px 7px;
    border-radius: 100px;
    font-size: 9px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .05em;
    background: #ede9fe;
    color: #7c3aed;
}

/* OUT OF STOCK badge — red */
.cs-out-badge[b-dt0wmj171w] {
    display: inline-block;
    padding: 2px 7px;
    border-radius: 100px;
    font-size: 9px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .05em;
    background: #fee2e2;
    color: #dc2626;
}

/* LOW badge — amber */
.cs-low-badge[b-dt0wmj171w] {
    display: inline-block;
    margin-left: 4px;
    padding: 2px 7px;
    border-radius: 100px;
    font-size: 9px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .05em;
    background: #fef3c7;
    color: #b45309;
}

/* Row number badge */
.cs-row-num[b-dt0wmj171w] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 22px; height: 22px;
    padding: 0 5px;
    border-radius: 11px;
    font-size: 11px;
    font-weight: 700;
    background: var(--sb-hover-bg);
    color: var(--bar-sub);
}

.cs-tr[b-dt0wmj171w] { transition: background .1s; }
.cs-tr:hover td[b-dt0wmj171w] { background: var(--sb-hover-bg); }
.cs-tr-first td[b-dt0wmj171w] { border-top: none; }

/* ── Pagination ───────────────────────────────────────────────────────────── */
.cs-pagination[b-dt0wmj171w] {
    border-color: var(--bar-border);
}

.cs-page-btn[b-dt0wmj171w] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 32px; height: 32px;
    padding: 0 6px;
    border-radius: 8px;
    border: 1px solid var(--bar-border);
    background: var(--page-bg);
    color: var(--bar-sub);
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: all .15s;
}

.cs-page-btn:hover:not(:disabled)[b-dt0wmj171w] {
    border-color: #ef4444;
    color: #ef4444;
    background: rgba(239, 68, 68, .06);
}

.cs-page-btn:disabled[b-dt0wmj171w] { opacity: .4; cursor: not-allowed; }

.cs-page-btn-active[b-dt0wmj171w] {
    background: #ef4444 !important;
    color: #fff !important;
    border-color: #ef4444 !important;
    font-weight: 700;
}

/* ── Empty state ──────────────────────────────────────────────────────────── */
.cs-empty-icon[b-dt0wmj171w] {
    font-size: 52px;
    color: #22c55e;
    opacity: .4;
}

/* ── Mobile ───────────────────────────────────────────────────────────────── */
@media (max-width: 639px) {
    /* KPI cards: full width */
    .cs-kpi-card[b-dt0wmj171w] { flex: 0 0 100%; max-width: 100%; }
}
/* _content/MiniMartBlazorPOS/Components/Pages/Reports/InventoryItems.razor.rz.scp.css */
/* ── Skeleton shimmer ─────────────────────────────────────────────────────── */
.inv-skel[b-o8ucjd4o1r] {
    background: var(--sb-hover-bg);
    background-image: linear-gradient(
        90deg,
        var(--sb-hover-bg) 0%,
        var(--skel-shine)  40%,
        var(--sb-hover-bg) 80%
    );
    background-size: 400px 100%;
    animation: inv-shimmer-b-o8ucjd4o1r 1.4s ease-in-out infinite;
}

@keyframes inv-shimmer-b-o8ucjd4o1r {
    0%   { background-position: -400px 0; }
    100% { background-position:  600px 0; }
}

@keyframes spin-b-o8ucjd4o1r {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}

/* ── KPI Cards ─────────────────────────────────────────────────────────────── */
.inv-kpi-row[b-o8ucjd4o1r] {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 20px;
}

.inv-kpi-card[b-o8ucjd4o1r] {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px 20px;
    border-radius: 14px;
    border: 1px solid var(--bar-border);
    background: var(--bar-bg);
    flex: 1;
    min-width: 200px;
    max-width: 340px;
    transition: box-shadow .15s, transform .15s;
}

.inv-kpi-card:hover[b-o8ucjd4o1r] {
    box-shadow: 0 4px 16px rgba(0,0,0,.08);
    transform: translateY(-1px);
}

.inv-kpi-icon-box[b-o8ucjd4o1r] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    border-radius: 12px;
    flex-shrink: 0;
}

.inv-kpi-icon-box .material-symbols-outlined[b-o8ucjd4o1r] { font-size: 22px; }

.inv-kpi-icon-brand[b-o8ucjd4o1r] {
    background: rgb(var(--b50) / 1);
    border: 1px solid rgb(var(--b200) / 1);
    color: rgb(var(--b600));
}

.inv-kpi-icon-emerald[b-o8ucjd4o1r] {
    background: rgba(16, 185, 129, .12);
    border: 1px solid rgba(16, 185, 129, .25);
    color: #10b981;
}

.inv-kpi-icon-violet[b-o8ucjd4o1r] {
    background: rgba(139, 92, 246, .12);
    border: 1px solid rgba(139, 92, 246, .25);
    color: #8b5cf6;
}

.inv-kpi-content[b-o8ucjd4o1r] {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.inv-kpi-num[b-o8ucjd4o1r] {
    font-size: 22px;
    font-weight: 800;
    line-height: 1.1;
    color: var(--bar-text);
}

.inv-kpi-lbl[b-o8ucjd4o1r] {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--bar-sub);
}

/* ── Card ─────────────────────────────────────────────────────────────────── */
.inv-card[b-o8ucjd4o1r] {
    overflow: hidden;
}

/* ── Table ────────────────────────────────────────────────────────────────── */
.inv-table[b-o8ucjd4o1r] {
    border-collapse: collapse;
    table-layout: fixed;
}

.inv-th[b-o8ucjd4o1r] {
    padding: 10px 14px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--bar-sub);
    white-space: normal;
    text-align: left;
    vertical-align: bottom;
}

.inv-th-center[b-o8ucjd4o1r] { text-align: center; }
.inv-th-right[b-o8ucjd4o1r]  { text-align: right; }

/* ── Sticky History column ────────────────────────────────────────────── */
.inv-th-sticky[b-o8ucjd4o1r],
.inv-td-sticky[b-o8ucjd4o1r] {
    position: sticky;
    right: 0;
    z-index: 2;
}

.inv-th-sticky[b-o8ucjd4o1r] { background: var(--page-bg); }
.inv-td-sticky[b-o8ucjd4o1r] { background: var(--page-bg); }

.inv-tr:hover .inv-td-sticky[b-o8ucjd4o1r] { background: var(--sb-hover-bg); }

.inv-td[b-o8ucjd4o1r] {
    padding: 10px 14px;
    font-size: 13px;
    color: var(--bar-sub);
    border-top: 1px solid var(--bar-border);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.inv-td-center[b-o8ucjd4o1r] { text-align: center; overflow: visible; }
.inv-td-right[b-o8ucjd4o1r]  { text-align: right; }
.inv-td-stock[b-o8ucjd4o1r]  { overflow: visible; }
.inv-td-mono[b-o8ucjd4o1r]   { font-family: monospace; font-size: 12px; color: var(--bar-text); font-weight: 600; }

/* Price / stock colouring */
.inv-price[b-o8ucjd4o1r]         { color: rgb(var(--b600)); font-weight: 700; font-size: 12px; }
.inv-stock[b-o8ucjd4o1r]         { color: #16a34a; font-weight: 700; }   /* GOOD  — green  */
.inv-low-stock[b-o8ucjd4o1r]     { color: #ef4444; font-weight: 700; }   /* OUT / LOW — red  */
.inv-deficit-stock[b-o8ucjd4o1r] { color: #7c3aed; font-weight: 700; }   /* DEFICIT — purple */

/* OUT OF STOCK badge — red */
.inv-out-badge[b-o8ucjd4o1r] {
    display: inline-block;
    margin-left: 4px;
    padding: 1px 5px;
    border-radius: 4px;
    font-size: 9px;
    font-weight: 800;
    background: #fee2e2;
    color: #ef4444;
    vertical-align: middle;
}

/* LOW badge — amber */
.inv-low-badge[b-o8ucjd4o1r] {
    display: inline-block;
    margin-left: 4px;
    padding: 1px 5px;
    border-radius: 4px;
    font-size: 9px;
    font-weight: 800;
    background: #fef3c7;
    color: #b45309;
    vertical-align: middle;
}

.inv-deficit-badge[b-o8ucjd4o1r] {
    display: inline-block;
    margin-left: 4px;
    padding: 1px 5px;
    border-radius: 4px;
    font-size: 9px;
    font-weight: 800;
    background: #ede9fe;
    color: #7c3aed;
    vertical-align: middle;
}

/* Row number badge */
.inv-row-num[b-o8ucjd4o1r] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 22px; height: 22px;
    padding: 0 5px;
    border-radius: 11px;
    font-size: 11px;
    font-weight: 700;
    background: var(--sb-hover-bg);
    color: var(--bar-sub);
}

.inv-tr[b-o8ucjd4o1r] { transition: background .1s; }
.inv-tr:hover td[b-o8ucjd4o1r] { background: var(--sb-hover-bg); }
.inv-tr-first td[b-o8ucjd4o1r] { border-top: none; }

/* ── History button ───────────────────────────────────────────────────────── */
.inv-history-btn[b-o8ucjd4o1r] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px; height: 28px;
    border-radius: 8px;
    border: 1px solid var(--bar-border);
    background: transparent;
    color: var(--bar-sub);
    cursor: pointer;
    transition: all .15s;
}

.inv-history-btn:hover[b-o8ucjd4o1r] {
    background: rgb(var(--b50) / 1);
    color: rgb(var(--b600));
    border-color: rgb(var(--b300) / 1);
}

/* ── Filter controls ──────────────────────────────────────────────────────── */
.inv-label[b-o8ucjd4o1r] {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--bar-sub);
}

.inv-search-wrap[b-o8ucjd4o1r] {
    display: inline-flex;
    align-items: center;
    border: 1px solid var(--bar-border);
    border-radius: 10px;
    background: var(--page-bg);
    height: 38px;
    width: 100%;
    overflow: hidden;
    transition: border-color .15s, box-shadow .15s;
}

.inv-search-wrap:focus-within[b-o8ucjd4o1r] {
    border-color: rgb(var(--b400));
    box-shadow: 0 0 0 3px rgb(var(--b500) / .15);
}

.inv-search-icon[b-o8ucjd4o1r] {
    font-size: 17px;
    color: var(--bar-sub);
    padding: 0 8px 0 10px;
    flex-shrink: 0;
    pointer-events: none;
}

.inv-search-input[b-o8ucjd4o1r] {
    border: none !important;
    background: transparent !important;
    color: var(--bar-text) !important;
    font-size: 13px;
    font-weight: 500;
    padding: 0 8px;
    outline: none;
    flex: 1;
    min-width: 0;
}

.inv-select[b-o8ucjd4o1r] {
    border: 1px solid var(--bar-border);
    border-radius: 10px;
    background: var(--page-bg);
    color: var(--bar-text);
    font-size: 13px;
    font-weight: 500;
    padding: 0 32px 0 12px;
    height: 38px;
    outline: none;
    appearance: auto;
    cursor: pointer;
    transition: border-color .15s;
}

.inv-select:focus[b-o8ucjd4o1r] { border-color: rgb(var(--b400)); }

.inv-sortdir-btn[b-o8ucjd4o1r] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 38px;
    padding: 0 14px;
    border: 1px solid var(--bar-border);
    border-radius: 10px;
    background: var(--page-bg);
    color: var(--bar-text);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: all .15s;
    min-width: 96px;
}

.inv-sortdir-btn:hover[b-o8ucjd4o1r] {
    border-color: rgb(var(--b400));
    background: rgb(var(--b50) / 1);
    color: rgb(var(--b600));
}

/* ── Action buttons ───────────────────────────────────────────────────────── */
.inv-btn-icon[b-o8ucjd4o1r] {
    font-size: 18px;
    margin-right: 6px;
}

.inv-btn-primary[b-o8ucjd4o1r] {
    display: inline-flex;
    align-items: center;
    padding: 8px 18px;
    border-radius: 10px;
    font-size: 13px;
    font-weight: 600;
    background: rgb(var(--b600));
    color: #fff;
    border: none;
    cursor: pointer;
    transition: background .15s, transform .1s;
    white-space: nowrap;
}

.inv-btn-primary:hover:not(:disabled)[b-o8ucjd4o1r]  { background: rgb(var(--b700)); }
.inv-btn-primary:active:not(:disabled)[b-o8ucjd4o1r] { transform: scale(.97); }
.inv-btn-primary:disabled[b-o8ucjd4o1r]              { opacity: .55; cursor: not-allowed; }

.inv-btn-secondary[b-o8ucjd4o1r] {
    display: inline-flex;
    align-items: center;
    padding: 8px 18px;
    border-radius: 10px;
    font-size: 13px;
    font-weight: 600;
    background: var(--page-bg);
    color: var(--bar-sub);
    border: 1px solid var(--bar-border);
    cursor: pointer;
    transition: all .15s;
    white-space: nowrap;
    gap: 6px;
}

.inv-btn-secondary:hover:not(:disabled)[b-o8ucjd4o1r]  { border-color: rgb(var(--b400)); color: rgb(var(--b600)); background: rgb(var(--b50)/1); }
.inv-btn-secondary:active:not(:disabled)[b-o8ucjd4o1r] { transform: scale(.97); }
.inv-btn-secondary:disabled[b-o8ucjd4o1r]              { opacity: .55; cursor: not-allowed; }

/* ── Pagination ───────────────────────────────────────────────────────────── */
.inv-page-btn[b-o8ucjd4o1r] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 32px; height: 32px;
    padding: 0 6px;
    border-radius: 8px;
    border: 1px solid var(--bar-border);
    background: var(--page-bg);
    color: var(--bar-sub);
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: all .15s;
}

.inv-page-btn:hover:not(:disabled)[b-o8ucjd4o1r] {
    border-color: rgb(var(--b400));
    color: rgb(var(--b600));
    background: rgb(var(--b50) / 1);
}

.inv-page-btn:disabled[b-o8ucjd4o1r] { opacity: .4; cursor: not-allowed; }

.inv-page-btn-active[b-o8ucjd4o1r] {
    background: rgb(var(--b600)) !important;
    color: #fff !important;
    border-color: rgb(var(--b600)) !important;
    font-weight: 700;
}

/* ── Modal overlay ────────────────────────────────────────────────────────── */
.inv-modal-overlay[b-o8ucjd4o1r] {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, .55);
    z-index: 1000;
    display: flex;
    align-items: stretch;
    justify-content: center;
    padding: 16px;
}

.inv-modal[b-o8ucjd4o1r] {
    background: var(--bar-bg);
    border: 1px solid var(--bar-border);
    border-radius: 20px;
    width: min(50vw, calc(100vw - 32px));
    min-width: 620px;
    height: calc(100vh - 32px);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    box-shadow: 0 24px 64px rgba(0, 0, 0, .35);
}

.inv-modal-header[b-o8ucjd4o1r] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    padding: 18px 24px 14px;
    border-bottom: 1px solid var(--bar-border);
    flex-shrink: 0;
}

.inv-modal-footer[b-o8ucjd4o1r] {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    padding: 14px 24px;
    border-top: 1px solid var(--bar-border);
    flex-shrink: 0;
    background: var(--bar-bg);
}

.inv-modal-close[b-o8ucjd4o1r] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px; height: 32px;
    border-radius: 8px;
    border: 1px solid var(--bar-border);
    background: transparent;
    color: var(--bar-sub);
    cursor: pointer;
    transition: all .15s;
    flex-shrink: 0;
}

.inv-modal-close:hover[b-o8ucjd4o1r] { background: var(--sb-hover-bg); color: var(--bar-text); }

.inv-modal-body[b-o8ucjd4o1r] {
    flex: 1;
    min-height: 0;
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    overflow: hidden;
}

/* ── History sections ─────────────────────────────────────────────────────── */
.inv-section[b-o8ucjd4o1r] {
    min-width: 0;
    border: 1px solid var(--bar-border);
    border-radius: 12px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.inv-section-expanded[b-o8ucjd4o1r] {
    flex: 1;
    min-height: 180px;
}

.inv-section-collapsed[b-o8ucjd4o1r] {
    flex: none;
}

.inv-section-body[b-o8ucjd4o1r] {
    flex: 1;
    overflow: auto;
}

.inv-section-toggleable[b-o8ucjd4o1r] {
    cursor: pointer;
    user-select: none;
}

.inv-section-toggleable:hover[b-o8ucjd4o1r] {
    filter: brightness(1.1);
}

.inv-section-chevron[b-o8ucjd4o1r] {
    font-size: 18px;
    opacity: .85;
    flex-shrink: 0;
}

.inv-section-head[b-o8ucjd4o1r] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .08em;
    color: #fff;
}

.inv-section-head-blue[b-o8ucjd4o1r]   { background: #1d4ed8; }
.inv-section-head-green[b-o8ucjd4o1r]  { background: #16a34a; }
.inv-section-head-yellow[b-o8ucjd4o1r] { background: #d97706; }

.inv-section-count[b-o8ucjd4o1r] {
    margin-left: auto;
    background: rgba(255, 255, 255, .25);
    border-radius: 100px;
    padding: 1px 8px;
    font-size: 10px;
    font-weight: 700;
}

.inv-empty[b-o8ucjd4o1r] {
    padding: 14px 16px;
    font-size: 13px;
    color: var(--bar-sub);
    font-style: italic;
}

.inv-empty-state[b-o8ucjd4o1r] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 48px 24px;
    height: 100%;
    min-height: 160px;
}

.inv-empty-icon[b-o8ucjd4o1r] {
    font-size: 48px;
    opacity: .25;
}

.inv-empty-title[b-o8ucjd4o1r] {
    font-size: 14px;
    font-weight: 700;
    color: var(--bar-sub);
}

.inv-empty-sub[b-o8ucjd4o1r] {
    font-size: 12px;
    color: var(--bar-sub);
    opacity: .6;
    text-align: center;
}

/* ── Modal table ──────────────────────────────────────────────────────────── */
.inv-modal-table[b-o8ucjd4o1r] {
    width: 100%;
    min-width: 680px;
    border-collapse: collapse;
    font-size: 12px;
}

.inv-mth[b-o8ucjd4o1r] {
    padding: 8px 12px;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--bar-sub);
    background: var(--page-bg);
    border-bottom: 1px solid var(--bar-border);
    text-align: left;
    white-space: nowrap;
}

.inv-mth-center[b-o8ucjd4o1r] { text-align: center; }
.inv-mth-right[b-o8ucjd4o1r]  { text-align: right; }

.inv-mtd[b-o8ucjd4o1r] {
    padding: 7px 12px;
    color: var(--bar-sub);
    border-top: 1px solid var(--bar-border);
    white-space: nowrap;
}

.inv-mtd-center[b-o8ucjd4o1r] { text-align: center; }
.inv-mtd-right[b-o8ucjd4o1r]  { text-align: right; }
.inv-mtd-mono[b-o8ucjd4o1r]   { font-family: monospace; font-size: 11px; color: var(--bar-text); font-weight: 600; }
.inv-mtd-sub[b-o8ucjd4o1r]    { color: var(--bar-sub); font-size: 11px; }

.inv-mtr:hover td[b-o8ucjd4o1r] { background: var(--sb-hover-bg); }

.inv-mfoot td[b-o8ucjd4o1r] {
    background: var(--page-bg);
    border-top: 2px solid var(--bar-border);
}

/* ── Colour utilities ─────────────────────────────────────────────────────── */
.inv-green-text[b-o8ucjd4o1r]    { color: #16a34a; }
.inv-red-text[b-o8ucjd4o1r]      { color: #ef4444; }
.inv-bal-positive[b-o8ucjd4o1r]  { color: var(--bar-text); }
.inv-bal-zero[b-o8ucjd4o1r]      { color: #ef4444; }
.inv-bal-negative[b-o8ucjd4o1r]  { color: #7c3aed; }

/* ── Status badges ────────────────────────────────────────────────────────── */
.inv-status-badge[b-o8ucjd4o1r] {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 100px;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .05em;
}

.inv-badge-green[b-o8ucjd4o1r]  { background: #dcfce7; color: #15803d; }
.inv-badge-yellow[b-o8ucjd4o1r] { background: #fef9c3; color: #a16207; }
.inv-badge-red[b-o8ucjd4o1r]    { background: #fee2e2; color: #dc2626; }

/* ── Mobile ───────────────────────────────────────────────────────────────── */
@media (max-width: 639px) {
    /* KPI cards: full width, stacked */
    .inv-kpi-card[b-o8ucjd4o1r] { flex: 0 0 100%; max-width: 100%; }
}
/* _content/MiniMartBlazorPOS/Components/Pages/Reports/SalesRecords.razor.rz.scp.css */
/* ── Skeleton shimmer ─────────────────────────────────────────────────────── */
.skel-pulse[b-kdnrptdpma] {
    background: var(--sb-hover-bg);
    background-image: linear-gradient(
        90deg,
        var(--sb-hover-bg) 0%,
        var(--skel-shine)  40%,
        var(--sb-hover-bg) 80%
    );
    background-size: 400px 100%;
    animation: skel-shimmer-b-kdnrptdpma 1.4s ease-in-out infinite;
}

@keyframes skel-shimmer-b-kdnrptdpma {
    0%   { background-position: -400px 0; }
    100% { background-position:  600px 0; }
}

/* ── KPI cards ────────────────────────────────────────────────────────────── */
.sr-kpi-row[b-kdnrptdpma] {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 20px;
}

.sr-kpi-card[b-kdnrptdpma] {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px 20px;
    background: var(--bar-bg);
    border: 1px solid var(--bar-border);
    border-radius: 14px;
    flex: 1;
    min-width: 200px;
    max-width: 340px;
    box-shadow: 0 1px 4px rgba(0, 0, 0, .06);
    transition: box-shadow .15s, transform .15s;
}

.sr-kpi-card:hover[b-kdnrptdpma] {
    box-shadow: 0 4px 14px rgba(0, 0, 0, .1);
    transform: translateY(-1px);
}

.sr-kpi-icon-box[b-kdnrptdpma] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    border-radius: 12px;
    flex-shrink: 0;
}

.sr-kpi-icon-box .material-symbols-outlined[b-kdnrptdpma] { font-size: 22px; }

.sr-kpi-icon-brand[b-kdnrptdpma]   { background: rgb(var(--b500) / .12); color: rgb(var(--b600)); }
.sr-kpi-icon-emerald[b-kdnrptdpma] { background: rgba(16, 185, 129, .12); color: #10b981; }
.sr-kpi-icon-violet[b-kdnrptdpma]  { background: rgba(139, 92, 246, .12); color: #8b5cf6; }

.sr-kpi-content[b-kdnrptdpma] {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.sr-kpi-num[b-kdnrptdpma] {
    font-size: 22px;
    font-weight: 800;
    line-height: 1;
    color: var(--bar-text);
    font-variant-numeric: tabular-nums;
}

.sr-kpi-lbl[b-kdnrptdpma] {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--bar-sub);
}

/* ── Card ─────────────────────────────────────────────────────────────────── */
.sr-card[b-kdnrptdpma] {
    overflow: hidden;
}

/* ── Table ────────────────────────────────────────────────────────────────── */
.sr-table[b-kdnrptdpma] {
    border-collapse: collapse;
    table-layout: fixed;
}

.sr-th[b-kdnrptdpma] {
    padding: 10px 14px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--bar-sub);
    white-space: nowrap;
    text-align: left;
    vertical-align: bottom;
}

/* ── Sticky Details column ────────────────────────────────────────────── */
.sr-th-sticky[b-kdnrptdpma],
.sr-td-sticky[b-kdnrptdpma] {
    position: sticky;
    right: 0;
    z-index: 2;
}

.sr-th-sticky[b-kdnrptdpma] { background: var(--sb-hover-bg); }
.sr-td-sticky[b-kdnrptdpma] { background: var(--bar-bg); }

.sr-tr:hover .sr-td-sticky[b-kdnrptdpma] { background: var(--sb-hover-bg); }

.sr-th-center[b-kdnrptdpma] { text-align: center; }
.sr-th-right[b-kdnrptdpma]  { text-align: right; }

.sr-td[b-kdnrptdpma] {
    padding: 10px 14px;
    font-size: 13px;
    color: var(--bar-sub);
    border-top: 1px solid var(--bar-border);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sr-td-center[b-kdnrptdpma]  { text-align: center; overflow: visible; }
.sr-td-right[b-kdnrptdpma]   { text-align: right; }
.sr-td-mono[b-kdnrptdpma]    { font-family: monospace; font-size: 12px; color: var(--bar-text); font-weight: 600; }
.sr-td-entries[b-kdnrptdpma] { color: var(--bar-text); }
.sr-td-prices[b-kdnrptdpma]  { color: var(--bar-sub); font-size: 12px; }

.sr-net[b-kdnrptdpma]  { color: rgb(var(--b600)); font-weight: 700; }
.sr-date[b-kdnrptdpma] { color: var(--bar-sub); font-size: 12px; }

/* Row number badge */
.sr-row-num[b-kdnrptdpma] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px; height: 22px;
    border-radius: 50%;
    font-size: 11px;
    font-weight: 700;
    background: var(--sb-hover-bg);
    color: var(--bar-sub);
}

/* Main transaction row */
.sr-tr[b-kdnrptdpma] {
    transition: background .1s;
}

.sr-tr:hover td[b-kdnrptdpma] {
    background: var(--sb-hover-bg);
}

.sr-tr-first td[b-kdnrptdpma] {
    border-top: none;
}

/* ── Expand button ────────────────────────────────────────────────────────── */
.sr-expand-btn[b-kdnrptdpma] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px; height: 28px;
    border-radius: 8px;
    border: 1px solid var(--bar-border);
    background: transparent;
    color: var(--bar-sub);
    cursor: pointer;
    transition: all .15s;
}

.sr-expand-btn:hover[b-kdnrptdpma] {
    background: var(--sb-hover-bg);
    color: var(--bar-text);
    border-color: rgb(var(--b400));
}

.sr-expand-btn-active[b-kdnrptdpma] {
    background: rgb(var(--b50) / 1);
    color: rgb(var(--b600));
    border-color: rgb(var(--b300) / 1);
}

/* ── Expandable row ───────────────────────────────────────────────────────── */
.sr-expand-row[b-kdnrptdpma] {
    background: var(--page-bg);
}

.sr-expand-td[b-kdnrptdpma] {
    padding: 0;
}

.sr-expand-body[b-kdnrptdpma] {
    padding: 12px 16px 16px 40px;
    border-top: 1px solid var(--bar-border);
    border-bottom: 2px solid var(--bar-border);
}

/* ── Inner line-items table ───────────────────────────────────────────────── */
.sr-inner-table[b-kdnrptdpma] {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
    font-size: 12px;
    border: 1px solid var(--bar-border);
    border-radius: 10px;
    overflow: hidden;
}

.sr-inner-th[b-kdnrptdpma] {
    padding: 8px 12px;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--bar-sub);
    background: var(--bar-bg);
    border-bottom: 1px solid var(--bar-border);
    text-align: left;
    white-space: nowrap;
}

.sr-inner-td[b-kdnrptdpma] {
    padding: 7px 12px;
    color: var(--bar-sub);
    border-top: 1px solid var(--bar-border);
    white-space: nowrap;
}

.sr-inner-tr:hover td[b-kdnrptdpma] {
    background: var(--sb-hover-bg);
}

.sr-inner-foot td[b-kdnrptdpma] {
    background: var(--bar-bg);
    border-top: 2px solid var(--bar-border);
}

/* ── Date range picker ────────────────────────────────────────────────────── */
.sr-label[b-kdnrptdpma] {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--bar-sub);
}

.sr-daterange[b-kdnrptdpma] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.sr-daterange-sep[b-kdnrptdpma] {
    display: flex;
    align-items: center;
    color: var(--bar-sub);
    flex-shrink: 0;
}

.sr-sep-icon[b-kdnrptdpma] { font-size: 16px; }

/* ── Action buttons ───────────────────────────────────────────────────────── */
.sr-btn-primary[b-kdnrptdpma] {
    display: inline-flex;
    align-items: center;
    padding: 8px 18px;
    border-radius: 10px;
    font-size: 13px;
    font-weight: 600;
    background: rgb(var(--b600));
    color: #fff;
    border: none;
    cursor: pointer;
    transition: background .15s, transform .1s;
    white-space: nowrap;
}

.sr-btn-primary:hover:not(:disabled)[b-kdnrptdpma]  { background: rgb(var(--b700)); }
.sr-btn-primary:active:not(:disabled)[b-kdnrptdpma] { transform: scale(.97); }
.sr-btn-primary:disabled[b-kdnrptdpma]              { opacity: .55; cursor: not-allowed; }

.sr-btn-ghost[b-kdnrptdpma] {
    display: inline-flex;
    align-items: center;
    padding: 8px 16px;
    border-radius: 10px;
    font-size: 13px;
    font-weight: 600;
    background: transparent;
    color: var(--bar-sub);
    border: 1px solid var(--bar-border);
    cursor: pointer;
    transition: all .15s;
    white-space: nowrap;
}

.sr-btn-ghost:hover:not(:disabled)[b-kdnrptdpma]  { background: var(--sb-hover-bg); color: var(--bar-text); }
.sr-btn-ghost:active:not(:disabled)[b-kdnrptdpma] { transform: scale(.97); }
.sr-btn-ghost:disabled[b-kdnrptdpma]              { opacity: .45; cursor: not-allowed; }

/* ── Mobile ───────────────────────────────────────────────────────────────── */
@media (max-width: 639px) {
    /* KPI cards: full width */
    .sr-kpi-card[b-kdnrptdpma] { flex: 0 0 100%; max-width: 100%; }

    /* Date range: side-by-side, full width */
    .sr-daterange[b-kdnrptdpma] { display: flex; width: 100%; }
    .sr-daterange > *[b-kdnrptdpma] { flex: 1; min-width: 0; }
    .sr-daterange-sep[b-kdnrptdpma] { display: none; }
}

/* ── Print ────────────────────────────────────────────────────────────────── */
@media print {
    .sr-btn-primary[b-kdnrptdpma],
    .sr-btn-ghost[b-kdnrptdpma] { display: none !important; }
}
/* _content/MiniMartBlazorPOS/Components/Pages/Reports/TopSellings.razor.rz.scp.css */
/* ── Two-column responsive grid ──────────────────────────────────────────── */
.ts-grid[b-wauxww2b7b] {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.25rem;
}

@media (min-width: 1024px) {
    .ts-grid[b-wauxww2b7b] {
        grid-template-columns: 1fr 1fr;
    }
}

/* ── Card fade-in ─────────────────────────────────────────────────────────── */
.ts-card[b-wauxww2b7b] {
    animation: ts-fadein-b-wauxww2b7b .35s ease both;
}

@keyframes ts-fadein-b-wauxww2b7b {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ── Skeleton shimmer ─────────────────────────────────────────────────────── */
.skel-pulse[b-wauxww2b7b] {
    background: var(--sb-hover-bg);
    background-image: linear-gradient(
        90deg,
        var(--sb-hover-bg) 0%,
        var(--skel-shine)  40%,
        var(--sb-hover-bg) 80%
    );
    background-size: 400px 100%;
    animation: skel-shimmer-b-wauxww2b7b 1.4s ease-in-out infinite;
}

@keyframes skel-shimmer-b-wauxww2b7b {
    0%   { background-position: -400px 0; }
    100% { background-position:  600px 0; }
}

/* ── Chart card stretches to match table height ───────────────────────────── */
.ts-chart-card[b-wauxww2b7b] {
    display: flex;
    flex-direction: column;
}

.ts-chart-body[b-wauxww2b7b] {
    flex: 1;
    padding: 16px;
    display: flex;
    flex-direction: column;
}

.ts-chart-body > div[b-wauxww2b7b] {
    flex: 1;
}

/* ── Table ────────────────────────────────────────────────────────────────── */
.ts-th[b-wauxww2b7b] {
    padding: 10px 14px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--bar-sub);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ts-td[b-wauxww2b7b] {
    padding: 10px 14px;
    font-size: 13px;
    color: var(--bar-sub);
    border-top: 1px solid var(--bar-border);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Rank cell — no ellipsis, always centered */
.ts-td-rank[b-wauxww2b7b] {
    padding: 10px 8px;
    text-align: center;
    border-top: 1px solid var(--bar-border);
    white-space: nowrap;
}

.ts-tr:hover td[b-wauxww2b7b] { background: var(--sb-hover-bg); }
.ts-tr:hover .ts-td-rank[b-wauxww2b7b] { background: var(--sb-hover-bg); }

/* Top 3 row highlights */
.ts-tr-gold   td[b-wauxww2b7b] { background: rgba(251,191,36,.06); }
.ts-tr-silver td[b-wauxww2b7b] { background: rgba(148,163,184,.06); }
.ts-tr-bronze td[b-wauxww2b7b] { background: rgba(217,119,6,.05); }

.ts-tr-gold:hover   td[b-wauxww2b7b] { background: rgba(251,191,36,.12) !important; }
.ts-tr-silver:hover td[b-wauxww2b7b] { background: rgba(148,163,184,.12) !important; }
.ts-tr-bronze:hover td[b-wauxww2b7b] { background: rgba(217,119,6,.10) !important; }

/* Rank badges */
.ts-rank-badge[b-wauxww2b7b] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px; height: 22px;
    border-radius: 50%;
    font-size: 11px;
    font-weight: 800;
}

.ts-rank-1[b-wauxww2b7b] { background: #fbbf24; color: #78350f; }
.ts-rank-2[b-wauxww2b7b] { background: #94a3b8; color: #0f172a; }
.ts-rank-3[b-wauxww2b7b] { background: #c2773a; color: #fff; }

/* ── Date range picker ────────────────────────────────────────────────────── */
.ts-label[b-wauxww2b7b] {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--bar-sub);
}

.ts-daterange[b-wauxww2b7b] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.ts-daterange-sep[b-wauxww2b7b] {
    display: flex;
    align-items: center;
    color: var(--bar-sub);
    flex-shrink: 0;
}

.ts-sep-icon[b-wauxww2b7b] { font-size: 16px; }

/* ── Filter bar buttons ───────────────────────────────────────────────────── */
.ts-btn-primary[b-wauxww2b7b] {
    display: inline-flex;
    align-items: center;
    padding: 8px 18px;
    border-radius: 10px;
    font-size: 13px;
    font-weight: 600;
    background: rgb(var(--b600));
    color: #fff;
    border: none;
    cursor: pointer;
    transition: background .15s, transform .1s;
    white-space: nowrap;
}

.ts-btn-primary:hover:not(:disabled)[b-wauxww2b7b]  { background: rgb(var(--b700)); }
.ts-btn-primary:active:not(:disabled)[b-wauxww2b7b] { transform: scale(.97); }
.ts-btn-primary:disabled[b-wauxww2b7b]              { opacity: .55; cursor: not-allowed; }

.ts-btn-ghost[b-wauxww2b7b] {
    display: inline-flex;
    align-items: center;
    padding: 8px 16px;
    border-radius: 10px;
    font-size: 13px;
    font-weight: 600;
    background: transparent;
    color: var(--bar-sub);
    border: 1px solid var(--bar-border);
    cursor: pointer;
    transition: all .15s;
    white-space: nowrap;
}

.ts-btn-ghost:hover:not(:disabled)[b-wauxww2b7b]  { background: var(--sb-hover-bg); color: var(--bar-text); }
.ts-btn-ghost:active:not(:disabled)[b-wauxww2b7b] { transform: scale(.97); }
.ts-btn-ghost:disabled[b-wauxww2b7b]              { opacity: .45; cursor: not-allowed; }

/* ── Mobile ───────────────────────────────────────────────────────────────── */
@media (max-width: 639px) {
    /* Date range: side-by-side, full width */
    .ts-daterange[b-wauxww2b7b] { display: flex; width: 100%; }
    .ts-daterange > *[b-wauxww2b7b] { flex: 1; min-width: 0; }
    .ts-daterange-sep[b-wauxww2b7b] { display: none; }
}

/* ── Print ────────────────────────────────────────────────────────────────── */
@media print {
    /* hide filters, chart card; show only the table */
    .ts-btn-primary[b-wauxww2b7b],
    .ts-btn-ghost[b-wauxww2b7b],
    #chart-top-sellings[b-wauxww2b7b] { display: none !important; }
}
/* _content/MiniMartBlazorPOS/Components/Shared/DatePicker.razor.rz.scp.css */
/* ── Date Picker wrapper ───────────────────────────────────────────────────── */
.dp-wrap[b-s3cmqx4cvm] {
    position: relative;
    display: inline-flex;
    align-items: center;
    height: 38px;
    border: 1px solid var(--bar-border);
    border-radius: 10px;
    background: var(--page-bg);
    transition: border-color .15s, box-shadow .15s;
    cursor: pointer;
    min-width: 155px;
}

.dp-wrap:focus-within[b-s3cmqx4cvm] {
    border-color: rgb(var(--b500));
    box-shadow: 0 0 0 3px rgb(var(--b500)/.15);
}

.dp-cal-icon[b-s3cmqx4cvm] {
    font-size: 16px;
    color: var(--bar-sub);
    padding-left: 10px;
    pointer-events: none;
    flex-shrink: 0;
}

.dp-input[b-s3cmqx4cvm] {
    flex: 1;
    height: 100%;
    padding: 0 6px 0 8px;
    background: transparent;
    border: none;
    outline: none;
    font-size: 13px;
    font-weight: 500;
    color: var(--bar-text);
    cursor: pointer;
    min-width: 0;
}

.dp-input[b-s3cmqx4cvm]::placeholder {
    color: var(--bar-sub);
    font-weight: 400;
}

.dp-chevron[b-s3cmqx4cvm] {
    font-size: 18px;
    color: var(--bar-sub);
    padding-right: 6px;
    pointer-events: none;
    flex-shrink: 0;
    transition: color .15s;
}

.dp-wrap:focus-within .dp-chevron[b-s3cmqx4cvm] {
    color: rgb(var(--b500));
}
/* _content/MiniMartBlazorPOS/Components/Shared/UnauthorizedAccess.razor.rz.scp.css */
.unauth-wrap[b-icoud3cpgm] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 60vh;
    padding: 3rem 1.5rem;
    position: relative;
    overflow: hidden;
    text-align: center;
}

/* ── Animated rings ── */
.unauth-rings[b-icoud3cpgm] {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
}

.unauth-ring[b-icoud3cpgm] {
    position: absolute;
    border-radius: 50%;
    border: 1px solid rgba(239,68,68,.15);
    animation: unauth-pulse-b-icoud3cpgm 3s ease-out infinite;
}

.ring-1[b-icoud3cpgm] {
    width: 200px;
    height: 200px;
    animation-delay: 0s;
}

.ring-2[b-icoud3cpgm] {
    width: 320px;
    height: 320px;
    animation-delay: .6s;
}

.ring-3[b-icoud3cpgm] {
    width: 440px;
    height: 440px;
    animation-delay: 1.2s;
}

@keyframes unauth-pulse-b-icoud3cpgm {
    0% {
        opacity: .6;
        transform: scale(.95);
    }

    60% {
        opacity: .15;
    }

    100% {
        opacity: 0;
        transform: scale(1.05);
    }
}

/* ── Icon badge ── */
.unauth-badge[b-icoud3cpgm] {
    position: relative;
    width: 88px;
    height: 88px;
    border-radius: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1.75rem;
    background: linear-gradient(135deg, rgba(239,68,68,.18), rgba(239,68,68,.06));
    border: 1.5px solid rgba(239,68,68,.3);
    box-shadow: 0 8px 32px rgba(239,68,68,.18), 0 0 0 8px rgba(239,68,68,.06);
}

.unauth-icon[b-icoud3cpgm] {
    font-size: 40px;
    color: #f87171;
}

/* ── Body ── */
.unauth-body[b-icoud3cpgm] {
    position: relative;
    max-width: 400px;
}

.unauth-title[b-icoud3cpgm] {
    font-size: 1.75rem;
    font-weight: 800;
    letter-spacing: -.03em;
    color: #f1f5f9;
    margin-bottom: .5rem;
}

.unauth-sub[b-icoud3cpgm] {
    font-size: .9rem;
    line-height: 1.6;
    color: #94a3b8;
    margin-bottom: 1.25rem;
}

    .unauth-sub strong[b-icoud3cpgm] {
        color: #cbd5e1;
    }

/* ── Error code chip ── */
.unauth-code[b-icoud3cpgm] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 12px;
    border-radius: 99px;
    font-size: 11px;
    font-weight: 700;
    font-family: monospace;
    letter-spacing: .04em;
    color: #f87171;
    background: rgba(239,68,68,.1);
    border: 1px solid rgba(239,68,68,.2);
    margin-bottom: 1.75rem;
}

/* ── Buttons ── */
.unauth-actions[b-icoud3cpgm] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .75rem;
    flex-wrap: wrap;
}

.unauth-btn-primary[b-icoud3cpgm] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 10px 20px;
    border-radius: 12px;
    font-size: .875rem;
    font-weight: 600;
    color: #fff;
    background: rgb(var(--b600));
    box-shadow: 0 4px 14px rgb(var(--b600)/.3);
    text-decoration: none;
    transition: background .15s, transform .1s;
}

    .unauth-btn-primary:hover[b-icoud3cpgm] {
        background: rgb(var(--b700));
        transform: translateY(-1px);
    }

    .unauth-btn-primary:active[b-icoud3cpgm] {
        transform: scale(.97);
    }

.unauth-btn-ghost[b-icoud3cpgm] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 10px 20px;
    border-radius: 12px;
    font-size: .875rem;
    font-weight: 600;
    color: #94a3b8;
    background: transparent;
    border: 1.5px solid var(--bar-border, rgba(255,255,255,.1));
    cursor: pointer;
    transition: color .15s, border-color .15s, transform .1s;
}

    .unauth-btn-ghost:hover[b-icoud3cpgm] {
        color: #e2e8f0;
        border-color: rgba(255,255,255,.25);
        transform: translateY(-1px);
    }

    .unauth-btn-ghost:active[b-icoud3cpgm] {
        transform: scale(.97);
    }