/* ============================================================
   AfriERP — POS (Retail Checkout)
   Clean, modern, Radzen-compatible · Line icons throughout
   ============================================================ */

:root {
    --pos-brand: #1d4ed8;
    --pos-brand-dk: #1e40af;
    --pos-brand-lt: #eff6ff;
    --pos-brand-bdr: #bfdbfe;
    --pos-ink: #0f172a;
    --pos-text: #334155;
    --pos-muted: #64748b;
    --pos-faint: #94a3b8;
    --pos-bg: #f5f7fa;
    --pos-surface: #ffffff;
    --pos-surface-2: #f8fafc;
    --pos-bdr: #e2e8f0;
    --pos-bdr-lt: #f1f5f9;
    --pos-success: #16a34a;
    --pos-success-bg: #e6f4ea;
    --pos-danger: #dc2626;
    --pos-danger-bg: #fef2f2;
    --pos-warn: #b45309;
    --pos-warn-bg: #fff8e1;
    --pos-radius: 10px;
    --pos-radius-sm: 8px;
    --pos-radius-pill: 20px;
    --pos-transition: 180ms cubic-bezier(.4, 0, .2, 1);
}

/* ── SHELL ─────────────────────────────────────────────────── */
.pos-shell {
    display: flex;
    gap: 14px;
    padding: 14px;
    background: var(--pos-bg);
    min-height: calc(100vh - var(--topbar-h, 56px));
    outline: none;
    font-family: 'Segoe UI', system-ui, sans-serif;
    color: var(--pos-ink);
}

/* ── SIDEBAR ───────────────────────────────────────────────── */
.pos-sidebar {
    width: 60px;
    background: var(--pos-surface);
    border: 1px solid var(--pos-bdr);
    border-radius: var(--pos-radius);
    padding: 10px 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    flex-shrink: 0;
}

.pos-side-btn {
    position: relative;
    width: 42px;
    height: 42px;
    border: none;
    background: transparent;
    border-radius: var(--pos-radius-sm);
    color: var(--pos-muted);
    font-size: 17px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all var(--pos-transition);
}

    .pos-side-btn:hover {
        background: var(--pos-bdr-lt);
        color: var(--pos-ink);
    }

    .pos-side-btn.is-active {
        background: var(--pos-brand-lt);
        color: var(--pos-brand);
    }

        .pos-side-btn.is-active::before {
            content: "";
            position: absolute;
            left: -13px;
            top: 50%;
            transform: translateY(-50%);
            width: 3px;
            height: 22px;
            background: var(--pos-brand);
            border-radius: 0 2px 2px 0;
        }

.pos-side-spacer {
    flex: 1;
}

/* ── MAIN COLUMN ───────────────────────────────────────────── */
.pos-main {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 12px;
    min-width: 0;
}

/* ── TOP BAR ───────────────────────────────────────────────── */
.pos-topbar {
    background: var(--pos-surface);
    border: 1px solid var(--pos-bdr);
    border-radius: var(--pos-radius);
    padding: 12px 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.pos-cust {
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    padding: 4px 10px 4px 4px;
    border-radius: var(--pos-radius-sm);
    transition: background var(--pos-transition);
    flex: 1;
    min-width: 0;
}

    .pos-cust:hover {
        background: var(--pos-surface-2);
    }

.pos-cust-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--pos-brand-lt);
    color: var(--pos-brand);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    font-weight: 600;
    flex-shrink: 0;
}

    .pos-cust-avatar.empty {
        background: var(--pos-bdr-lt);
        color: var(--pos-muted);
    }

.pos-cust-info {
    flex: 1;
    min-width: 0;
}

.pos-cust-name {
    font-size: 13px;
    font-weight: 600;
    color: var(--pos-ink);
    line-height: 1.2;
}

.pos-cust-meta {
    font-size: 11.5px;
    color: var(--pos-muted);
    margin-top: 2px;
    display: flex;
    align-items: center;
    gap: 5px;
    flex-wrap: wrap;
}

    .pos-cust-meta i {
        font-size: 11px;
        margin-right: 2px;
    }

    .pos-cust-meta .dot {
        opacity: .4;
    }

.pos-cust-chev {
    color: var(--pos-faint);
    font-size: 11px;
    margin-left: 6px;
}

.pos-total-wrap {
    text-align: right;
    flex-shrink: 0;
}

.pos-total-label {
    font-size: 11px;
    font-weight: 600;
    color: var(--pos-muted);
    text-transform: uppercase;
    letter-spacing: .5px;
}

.pos-total-val {
    font-size: 24px;
    font-weight: 700;
    color: var(--pos-brand);
    font-variant-numeric: tabular-nums;
    line-height: 1.1;
    margin-top: 2px;
}

/* ── PRODUCT INPUT ─────────────────────────────────────────── */
.pos-prod-bar {
    background: var(--pos-surface);
    border: 1px solid var(--pos-bdr);
    border-radius: var(--pos-radius);
    padding: 10px;
    display: flex;
    gap: 8px;
    position: relative;
}

.pos-input-wrap {
    flex: 1;
    position: relative;
}

    .pos-input-wrap.small {
        flex: 1;
    }

.pos-input-icon {
    position: absolute;
    left: 11px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--pos-faint);
    font-size: 13px;
    pointer-events: none;
    z-index: 2;
}

/* Style RadzenTextBox to look native */
.pos-field.rz-textbox {
    width: 100%;
    height: 38px !important;
    padding: 0 11px 0 32px !important;
    border: 1px solid #cbd5e1 !important;
    border-radius: var(--pos-radius-sm) !important;
    font-size: 13px !important;
    color: var(--pos-ink) !important;
    outline: none !important;
    font-family: inherit !important;
    background: var(--pos-surface) !important;
    box-shadow: none !important;
    transition: border-color var(--pos-transition), box-shadow var(--pos-transition);
}

    .pos-field.rz-textbox:focus,
    .pos-field.rz-textbox:focus-within {
        border-color: var(--pos-brand) !important;
        box-shadow: 0 0 0 3px rgba(29, 78, 216, .1) !important;
    }

/* Qty input */
.pos-qty-input.rz-numeric {
    height: 38px;
}

    .pos-qty-input.rz-numeric .rz-spinbutton,
    .pos-qty-input.rz-numeric input {
        height: 38px !important;
        border: 1px solid #cbd5e1 !important;
        border-radius: var(--pos-radius-sm) !important;
        font-size: 13px !important;
        text-align: center !important;
    }

/* Add button */
.pos-add-btn {
    height: 38px;
    padding: 0 16px;
    border: none;
    background: var(--pos-brand);
    color: #fff;
    border-radius: var(--pos-radius-sm);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 6px;
    transition: background var(--pos-transition);
    white-space: nowrap;
}

    .pos-add-btn:hover {
        background: var(--pos-brand-dk);
    }

    .pos-add-btn i {
        font-size: 12px;
    }

/* ── SUGGESTION LIST ───────────────────────────────────────── */
.pos-sugg {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    background: var(--pos-surface);
    border: 1px solid #cbd5e1;
    border-radius: var(--pos-radius-sm);
    box-shadow: 0 8px 24px rgba(15, 23, 42, .12);
    z-index: 50;
    padding: 4px;
    max-height: 280px;
    overflow-y: auto;
}

.pos-sugg-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    border-radius: 6px;
    font-size: 12.5px;
    cursor: pointer;
    color: var(--pos-ink);
    transition: background var(--pos-transition);
}

    .pos-sugg-item:hover,
    .pos-sugg-item.is-active {
        background: var(--pos-brand-lt);
        color: var(--pos-brand);
    }

.pos-sugg-img {
    width: 28px;
    height: 28px;
    border-radius: 5px;
    background: var(--pos-bdr-lt);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--pos-faint);
    font-size: 12px;
    flex-shrink: 0;
    overflow: hidden;
}

    .pos-sugg-img img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

.pos-sugg-name {
    flex: 1;
}

.pos-sugg-stock {
    font-size: 11px;
    background: var(--pos-bdr-lt);
    color: var(--pos-muted);
    padding: 2px 8px;
    border-radius: var(--pos-radius-pill);
    font-weight: 500;
}

/* ── CART AREA ─────────────────────────────────────────────── */
.pos-cart-area {
    display: flex;
    gap: 12px;
    flex: 1;
    min-height: 0;
}

.pos-cart {
    flex: 1;
    background: var(--pos-surface);
    border: 1px solid var(--pos-bdr);
    border-radius: var(--pos-radius);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    min-width: 0;
}

/* Empty state */
.pos-cart-empty {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 60px 20px;
    color: var(--pos-faint);
    text-align: center;
}

    .pos-cart-empty i {
        font-size: 38px;
        opacity: .35;
    }

    .pos-cart-empty p {
        font-size: 14px;
        font-weight: 500;
        color: var(--pos-muted);
        margin: 0;
    }

    .pos-cart-empty span {
        font-size: 12px;
    }

/* Cart table */
.pos-cart-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 12.5px;
}

    .pos-cart-table thead {
        background: var(--pos-surface-2);
        position: sticky;
        top: 0;
        z-index: 1;
    }

    .pos-cart-table th {
        text-align: left;
        padding: 9px 12px;
        font-size: 11px;
        font-weight: 600;
        color: var(--pos-muted);
        text-transform: uppercase;
        letter-spacing: .5px;
        border-bottom: 1px solid var(--pos-bdr);
        white-space: nowrap;
    }

        .pos-cart-table th.r {
            text-align: right;
        }

        .pos-cart-table th.c {
            text-align: center;
        }

    .pos-cart-table td {
        padding: 9px 12px;
        border-bottom: 1px solid var(--pos-bdr-lt);
        color: var(--pos-ink);
        vertical-align: middle;
    }

        .pos-cart-table td.r {
            text-align: right;
        }

        .pos-cart-table td.c {
            text-align: center;
        }

    .pos-cart-table tr:last-child td {
        border-bottom: none;
    }

    .pos-cart-table tbody tr:hover td {
        background: var(--pos-surface-2);
    }

.pos-item-name {
    font-weight: 500;
    color: var(--pos-ink);
}

.pos-item-sub {
    font-size: 11px;
    color: var(--pos-faint);
    margin-top: 2px;
}

.pos-cell-num {
    font-variant-numeric: tabular-nums;
}

    .pos-cell-num.strong {
        font-weight: 600;
    }

.pos-tag {
    display: inline-block;
    padding: 2px 8px;
    border-radius: var(--pos-radius-pill);
    font-size: 11px;
    font-weight: 500;
    background: var(--pos-bdr-lt);
    color: var(--pos-muted);
}

/* Qty stepper inside cart row */
.pos-qty-stepper {
    display: inline-flex;
    align-items: center;
    border: 1px solid var(--pos-bdr);
    border-radius: 6px;
    height: 28px;
    overflow: hidden;
    background: var(--pos-surface);
}

    .pos-qty-stepper button {
        border: none;
        background: transparent;
        width: 24px;
        height: 26px;
        color: var(--pos-muted);
        cursor: pointer;
        font-size: 11px;
        display: flex;
        align-items: center;
        justify-content: center;
        transition: all var(--pos-transition);
    }

        .pos-qty-stepper button:hover {
            background: var(--pos-brand-lt);
            color: var(--pos-brand);
        }

    .pos-qty-stepper input {
        border: none;
        width: 36px;
        text-align: center;
        font-size: 12.5px;
        outline: none;
        color: var(--pos-ink);
        font-variant-numeric: tabular-nums;
        background: transparent;
        font-family: inherit;
    }

/* Price selector in cart row */
.pos-price-sel {
    height: 28px;
    border: 1px solid var(--pos-bdr);
    border-radius: 6px;
    font-size: 12px;
    padding: 0 8px;
    background: var(--pos-surface);
    color: var(--pos-ink);
    outline: none;
    cursor: pointer;
    font-family: inherit;
}

    .pos-price-sel:focus {
        border-color: var(--pos-brand);
    }

/* Row remove */
.pos-row-rm {
    border: none;
    background: transparent;
    color: var(--pos-faint);
    width: 26px;
    height: 26px;
    border-radius: 5px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    transition: all var(--pos-transition);
}

    .pos-row-rm:hover {
        background: var(--pos-danger-bg);
        color: var(--pos-danger);
    }

/* ── SIDE COLUMN (voucher, summary, payments) ──────────────── */
.pos-side-col {
    width: 320px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    flex-shrink: 0;
}

.pos-panel {
    background: var(--pos-surface);
    border: 1px solid var(--pos-bdr);
    border-radius: var(--pos-radius);
    padding: 14px;
}

.pos-panel-title {
    font-size: 11px;
    font-weight: 600;
    color: var(--pos-muted);
    text-transform: uppercase;
    letter-spacing: .5px;
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    gap: 6px;
}

    .pos-panel-title i {
        font-size: 12px;
        color: var(--pos-brand);
    }

/* Voucher */
.pos-voucher-row {
    display: flex;
    gap: 6px;
}

.pos-btn-apply {
    height: 38px;
    padding: 0 14px;
    background: var(--pos-surface);
    color: var(--pos-brand);
    border: 1px solid var(--pos-brand-bdr);
    border-radius: var(--pos-radius-sm);
    font-size: 12.5px;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    transition: background var(--pos-transition);
    white-space: nowrap;
}

    .pos-btn-apply:hover {
        background: var(--pos-brand-lt);
    }

/* Summary */
.pos-sum-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 12.5px;
    color: var(--pos-muted);
    padding: 5px 0;
    font-variant-numeric: tabular-nums;
}

    .pos-sum-row strong {
        color: var(--pos-ink);
        font-weight: 500;
    }

        .pos-sum-row strong.neg {
            color: var(--pos-danger);
        }

    .pos-sum-row.total {
        border-top: 1px solid var(--pos-bdr);
        margin-top: 8px;
        padding-top: 10px;
        font-size: 14px;
    }

        .pos-sum-row.total strong {
            color: var(--pos-brand);
            font-weight: 700;
            font-size: 18px;
        }

/* ── PAYMENT BUTTONS ───────────────────────────────────────── */
.pos-pay-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px;
}

.pos-pay-btn {
    height: 50px;
    padding: 0 11px;
    background: var(--pos-surface);
    border: 1px solid var(--pos-bdr);
    border-radius: var(--pos-radius-sm);
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
    transition: all var(--pos-transition);
    text-align: left;
    overflow: hidden;
}

    .pos-pay-btn:hover {
        background: var(--pos-surface-2);
        border-color: #cbd5e1;
        transform: translateX(2px);
    }

.pos-pay-icon {
    width: 28px;
    height: 28px;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    flex-shrink: 0;
}

.pos-pay-body {
    flex: 1;
    min-width: 0;
    overflow: hidden;
}

.pos-pay-name {
    font-size: 12px;
    font-weight: 600;
    color: var(--pos-ink);
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.pos-pay-acc {
    font-size: 11px;
    color: var(--pos-faint);
    line-height: 1.2;
    margin-top: 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Payment method color accents (icon tile only — keeps surface clean) */
.pos-pay-btn.cash .pos-pay-icon {
    background: #e6f4ea;
    color: #1a7f37;
}

.pos-pay-btn.card .pos-pay-icon {
    background: var(--pos-brand-lt);
    color: var(--pos-brand);
}

.pos-pay-btn.mpesa .pos-pay-icon {
    background: #e6f4ea;
    color: #16a34a;
}

.pos-pay-btn.bank .pos-pay-icon {
    background: var(--pos-bdr-lt);
    color: #475569;
}

.pos-pay-btn.loyalty .pos-pay-icon {
    background: #fef9c3;
    color: #a16207;
}

.pos-pay-btn.voucher-p .pos-pay-icon {
    background: var(--pos-danger-bg);
    color: var(--pos-danger);
}

.pos-pay-btn.orange .pos-pay-icon {
    background: #ffedd5;
    color: #ea580c;
}

.pos-pay-btn.moov .pos-pay-icon {
    background: #dbeafe;
    color: #2563eb;
}

.pos-pay-btn.wave .pos-pay-icon {
    background: #cffafe;
    color: #0891b2;
}

/* ── SELECTED PAYMENTS LIST ─────────────────────────────────── */
.pos-pay-list {
    margin-top: 10px;
    display: flex;
    flex-direction: column;
    gap: 5px;
    max-height: 160px;
    overflow-y: auto;
    padding-top: 10px;
    border-top: 1px solid var(--pos-bdr);
}

.pos-pay-list-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    background: var(--pos-surface-2);
    border-radius: 7px;
    font-size: 12px;
}

    .pos-pay-list-item > i:first-child {
        color: var(--pos-success);
        font-size: 13px;
    }

    .pos-pay-list-item .pli-name {
        flex: 1;
        font-weight: 600;
        color: var(--pos-ink);
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .pos-pay-list-item .pli-ref {
        color: var(--pos-faint);
        font-weight: 400;
        margin-left: 4px;
    }

    .pos-pay-list-item .pli-amt {
        font-variant-numeric: tabular-nums;
        color: var(--pos-success);
        font-weight: 600;
    }

    .pos-pay-list-item .pli-rm {
        border: none;
        background: transparent;
        color: var(--pos-faint);
        cursor: pointer;
        font-size: 11px;
        padding: 2px 5px;
        border-radius: 4px;
    }

        .pos-pay-list-item .pli-rm:hover {
            background: var(--pos-danger-bg);
            color: var(--pos-danger);
        }

/* ── ALERTS ────────────────────────────────────────────────── */
.pos-alert {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    border-radius: var(--pos-radius-sm);
    font-size: 13px;
    font-weight: 500;
}

    .pos-alert.success {
        background: var(--pos-success-bg);
        color: #1a7f37;
        border: 1px solid #c3e6cb;
    }

    .pos-alert.error {
        background: var(--pos-danger-bg);
        color: var(--pos-danger);
        border: 1px solid #f5c6c6;
    }

    .pos-alert i {
        font-size: 15px;
    }

/* ── BOTTOM ACTIONS ────────────────────────────────────────── */
.pos-bottom-actions {
    background: var(--pos-surface);
    border: 1px solid var(--pos-bdr);
    border-radius: var(--pos-radius);
    padding: 10px;
    display: flex;
    gap: 8px;
}

.pos-btn-hold {
    flex: 1;
    height: 46px;
    padding: 0 16px;
    background: var(--pos-surface);
    border: 1px solid #fecaca;
    border-radius: var(--pos-radius-sm);
    font-size: 13px;
    font-weight: 600;
    color: var(--pos-danger);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    transition: all var(--pos-transition);
}

    .pos-btn-hold:hover {
        background: var(--pos-danger-bg);
    }

    .pos-btn-hold i {
        font-size: 14px;
    }

.pos-btn-checkout {
    flex: 2;
    height: 46px;
    padding: 0 18px;
    background: var(--pos-success);
    border: none;
    border-radius: var(--pos-radius-sm);
    font-size: 14px;
    font-weight: 700;
    color: #fff;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: background var(--pos-transition);
    font-variant-numeric: tabular-nums;
}

    .pos-btn-checkout:hover:not(:disabled) {
        background: #15803d;
    }

    .pos-btn-checkout:disabled {
        opacity: .5;
        cursor: not-allowed;
    }

    .pos-btn-checkout i {
        font-size: 16px;
    }

/* ── RESPONSIVE ────────────────────────────────────────────── */
@media (max-width: 1100px) {
    .pos-cart-area {
        flex-direction: column;
    }

    .pos-side-col {
        width: 100%;
        flex-direction: row;
        flex-wrap: wrap;
    }

        .pos-side-col .pos-panel {
            flex: 1;
            min-width: 240px;
        }
}

@media (max-width: 768px) {
    .pos-shell {
        padding: 8px;
        gap: 8px;
    }

    .pos-sidebar {
        width: 52px;
    }

    .pos-side-col {
        flex-direction: column;
    }

        .pos-side-col .pos-panel {
            min-width: 0;
        }
}