:root {
    --sd-primary: #1793D1;        /* SaleDesk-style vivid blue */
    --sd-primary-dark: #1279AE;
    --sd-sidebar: #0F1826;        /* flat very dark navy */
    --sd-body: #F1F4F8;
    --sd-ink: #16202C;
    --sd-muted: #8A94A6;
    --sd-border: #E7EBF0;
}
body {
    font-family: 'Inter', 'Segoe UI', Arial, sans-serif;
    background-color: var(--sd-body);
    color: var(--sd-ink);
}

/* ---------------- Sidebar ---------------- */
.sidebar {
    background: var(--sd-sidebar);
    box-shadow: none;
    border-right: 1px solid rgba(255,255,255,0.04);
}
.sidebar-header {
    border-bottom: 1px solid rgba(255,255,255,0.08);
}
.sidebar-link {
    color: #B9C2CC !important;
    border-radius: 8px;
    margin: 3px 10px;
    padding: 11px 16px;
    transition: all .15s ease;
    font-size: 14.5px;
}
.sidebar-link:hover {
    background-color: rgba(255,255,255,0.06);
    color: white !important;
}
.sidebar-link.active {
    background: var(--sd-primary) !important;
    color: white !important;
    font-weight: 600;
    box-shadow: none;
}
.sidebar-logout {
    color: #FF6B6B !important;
    font-weight: 600;
    font-size: 14px;
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 6px;
    border-radius: 8px;
    transition: background .15s;
}
.sidebar-logout:hover { background: rgba(255,107,107,0.1); color: #FF8787 !important; }
.sidebar-footer {
    border-top: 1px solid rgba(255,255,255,0.08);
}

/* ---------------- Layout ---------------- */
.page-title {
    font-size: 24px;
    font-weight: 700;
    color: #1B2631;
    letter-spacing: -0.02em;
}
.card-panel {
    background: white;
    border-radius: 14px;
    border: 1px solid #EAEDF1;
    padding: 22px;
    box-shadow: 0 2px 10px rgba(20,30,50,0.04);
}

/* ---------------- KPI Cards ---------------- */
.kpi-card {
    background: white;
    border-radius: 14px;
    border: 1px solid #EAEDF1;
    padding: 18px 20px;
    height: 100%;
    box-shadow: 0 2px 10px rgba(20,30,50,0.04);
    border-left: 4px solid #3498DB;
    transition: transform .15s ease;
}
.kpi-card:hover { transform: translateY(-2px); }
.kpi-card .kpi-title {
    font-size: 11.5px;
    color: #8A94A6;
    text-transform: uppercase;
    letter-spacing: .05em;
    font-weight: 600;
}
.kpi-card .kpi-value {
    font-size: 24px;
    font-weight: 800;
    margin-top: 4px;
    color: #1B2631;
}
.kpi-icon {
    font-size: 26px;
    opacity: .18;
}
.kpi-card.kpi-success { border-left-color: #27AE60; }
.kpi-card.kpi-warning { border-left-color: #E67E22; }
.kpi-card.kpi-dark    { border-left-color: #2C3E50; }
.kpi-card.kpi-primary { border-left-color: #2E86DE; }
.kpi-card.kpi-info    { border-left-color: #17A2B8; }
.kpi-card.kpi-danger  { border-left-color: #E74C3C; }
.kpi-card.kpi-purple  { border-left-color: #8E44AD; }

.kpi-clickable {
    cursor: pointer;
    transition: transform .15s ease, box-shadow .15s ease;
}
.kpi-clickable:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 20px rgba(20,30,50,0.12);
}
.kpi-cta {
    font-size: 11px;
    color: #8A94A6;
    margin-top: 10px;
    font-weight: 600;
    opacity: 0;
    transition: opacity .15s ease;
}
.kpi-clickable:hover .kpi-cta {
    opacity: 1;
    color: #2E86DE;
}

/* ---------------- Tables ---------------- */
table.table thead {
    background-color: #F7F9FC;
    color: var(--sd-muted);
}
table.table thead th {
    font-weight: 600;
    font-size: 11.5px;
    text-transform: uppercase;
    letter-spacing: .04em;
    border: none;
    border-bottom: 1px solid var(--sd-border);
    padding: 12px 14px;
    color: var(--sd-muted);
}
table.table tbody tr { border-bottom: 1px solid #F0F3F7; }
table.table tbody td {
    vertical-align: middle;
    padding: 11px 14px;
    font-size: 14px;
}
table.table-hover tbody tr:hover { background-color: #F7F9FB; }

/* ---------------- Buttons ---------------- */
.btn { border-radius: 9px; font-weight: 500; }
.btn-success { background-color: #27AE60; border-color: #27AE60; }
.btn-primary { background-color: var(--sd-primary); border-color: var(--sd-primary); }
.btn-primary:hover, .btn-primary:focus { background-color: var(--sd-primary-dark); border-color: var(--sd-primary-dark); }
.btn-outline-primary { color: var(--sd-primary); border-color: var(--sd-primary); }
.btn-outline-primary:hover { background-color: var(--sd-primary); border-color: var(--sd-primary); }
.btn-danger  { background-color: #E74C3C; border-color: #E74C3C; }
.badge { border-radius: 20px; font-weight: 600; padding: 5px 10px; }
.bg-primary, .nav-pills .nav-link.active { background-color: var(--sd-primary) !important; }
.text-primary { color: var(--sd-primary) !important; }
a { color: var(--sd-primary); }

/* ---------------- Login ---------------- */
.login-wrapper {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #0F1826 0%, #17293E 55%, #1793D1 160%);
}
.login-card {
    background: white;
    border-radius: 18px;
    padding: 44px 40px;
    width: 400px;
    box-shadow: 0 20px 60px rgba(0,0,0,0.35);
}
.login-card h3 { color: #16202C; }

/* ---------------- POS Sale Screen ---------------- */
.pos-product-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 14px;
}
.pos-tile {
    position: relative;
    background: #fff;
    border: 1px solid #EAEDF1;
    border-radius: 12px;
    padding: 0;
    text-align: left;
    cursor: pointer;
    transition: all .12s ease;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
.pos-tile:hover {
    border-color: var(--sd-primary);
    box-shadow: 0 6px 16px rgba(23,147,209,0.16);
    transform: translateY(-2px);
}
.pos-tile.out-of-stock {
    opacity: .45;
    cursor: not-allowed;
}
.pos-tile .tile-stock-badge {
    position: absolute;
    top: 8px; right: 8px;
    background: #FFF4DE;
    color: #E67E22;
    font-size: 11px;
    font-weight: 700;
    padding: 1px 8px;
    border-radius: 10px;
    z-index: 1;
}
.pos-tile .tile-img {
    height: 110px;
    background: #EEF4FB;
    display: flex; align-items: center; justify-content: center;
    font-size: 2.4rem;
    color: #7FA8D9;
    overflow: hidden;
}
.pos-tile .tile-img img {
    width: 100%; height: 100%;
    object-fit: cover;
}
.pos-tile .tile-body {
    padding: 10px 12px 12px;
}
.pos-tile .tile-name {
    font-size: 12.5px;
    font-weight: 700;
    color: #1B2631;
    line-height: 1.3;
    min-height: 32px;
}
.pos-tile .tile-price {
    font-size: 13.5px;
    color: #B7791F;
    font-weight: 700;
    margin-top: 6px;
}
/* POS action bar & chips */
.pos-action-btn {
    border-radius: 8px;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.pos-warn-btn {
    background: #FFFBEB;
    border: 1px solid #F2D58A;
    color: #92600A;
}
.pos-warn-btn:hover { background: #FDF3D7; border-color: #E9C25F; color: #7A4F06; }
.pos-kbd {
    background: #fff;
    border: 1px solid #E4D6AC;
    border-radius: 5px;
    color: #A07C1F;
    font-size: 10px;
    padding: 1px 5px;
}
.pos-chip {
    background: #F1F3F6;
    border: none;
    border-radius: 18px;
    padding: 6px 16px;
    font-size: 13px;
    font-weight: 600;
    color: #4A5568;
    transition: all .1s;
}
.pos-chip:hover { background: #E4E9F0; }
.pos-chip.active { background: var(--sd-primary); color: #fff; }
.pos-barcode-wrap {
    border: 1.5px solid var(--sd-primary);
    border-radius: 10px;
    background: #fff;
    width: 300px;
    padding: 0 10px;
    gap: 6px;
    height: 38px;
}
.pos-barcode-wrap .form-control {
    background: transparent;
    padding: 0;
    height: 34px;
    font-size: 13.5px;
}
.pos-barcode-wrap i { font-size: .95rem; }
.category-pill {
    border-radius: 20px !important;
    padding: 6px 16px !important;
    font-size: 13px;
}
.cart-panel {
    background: white;
    border-radius: 14px;
    border: 1px solid #EAEDF1;
    display: flex;
    flex-direction: column;
    height: 100%;
    box-shadow: 0 2px 10px rgba(20,30,50,0.04);
}
.pos-cart-sticky {
    position: sticky;
    top: 12px;
    height: calc(100vh - 24px);
    display: flex;
    flex-direction: column;
}
.pos-cart-sticky .cart-panel {
    height: 100%;
    max-height: none;
}
.pos-products-scroll {
    max-height: calc(100vh - 32px);
    overflow-y: auto;
    padding-right: 4px;
}
/* Items take whatever space is left, so the totals never fall below the fold */
.cart-items {
    flex: 1 1 auto;
    overflow-y: auto;
    min-height: 80px;
    max-height: none;
}
#checkoutForm {
    margin-top: auto;
}
.cart-line {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 16px;
    border-bottom: 1px solid #F2F4F7;
}
.cart-line .cart-name { font-size: 13.5px; font-weight: 600; }
.cart-line .cart-meta { font-size: 12px; color: #8A94A6; }
.cart-total-box {
    background: #16202C;
    color: white;
    border-radius: 0 0 14px 14px;
    padding: 18px 20px;
}
.cart-total-box .grand-total {
    font-size: 26px;
    font-weight: 800;
}

@media (max-width: 768px) {
    .sidebar {
        position: fixed;
        top: 0;
        left: 0;
        height: 100vh;
        z-index: 1040;
        transform: translateX(-100%);
        transition: transform .25s ease;
        width: 250px !important;
    }
    .sidebar.sidebar-open {
        transform: translateX(0);
    }
    .sidebar-link span.link-text { display: inline !important; }
    .mobile-topbar {
        display: flex;
        align-items: center;
        padding: 12px 16px;
        background: white;
        border-bottom: 1px solid #EAEDF1;
        position: sticky;
        top: 0;
        z-index: 900;
    }
}
@media (min-width: 769px) {
    .mobile-topbar { display: none !important; }
}
.desktop-topbar {
    align-items: center;
    gap: 12px;
    padding: 12px 24px;
    background: white;
    border-bottom: 1px solid #EAEDF1;
}
.sidebar-backdrop {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.4);
    z-index: 1030;
}
.sidebar-backdrop.show {
    display: block;
}

/* ---------------- Brand badge (sidebar) ---------------- */
.brand-badge {
    width: 34px; height: 34px;
    border-radius: 9px;
    background: var(--sd-primary);
    color: white;
    display: flex; align-items: center; justify-content: center;
    font-weight: 800;
    font-size: 16px;
    flex-shrink: 0;
}

/* ---------------- Entity cards (customers/suppliers) ---------------- */
.entity-card {
    background: white;
    border-radius: 14px;
    border: 1px solid #EAEDF1;
    padding: 18px;
    box-shadow: 0 2px 10px rgba(20,30,50,0.04);
    height: 100%;
}
.avatar-circle {
    width: 44px; height: 44px;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-weight: 700;
    font-size: 14px;
    flex-shrink: 0;
}
.avatar-blue   { background: #E8F1FC; color: #2E86DE; }
.avatar-orange { background: #FDF0E0; color: #E67E22; }

/* ---------------- Status pills ---------------- */
.status-pill {
    font-weight: 600;
    padding: 5px 12px;
    border-radius: 20px;
    font-size: 11.5px;
}
.status-in   { background: #E9F9EF; color: #1E8449; }
.status-low  { background: #FDF3E3; color: #B9770E; }
.status-out  { background: #FBEAEA; color: #C0392B; }

/* ---------------- Small tile icon (products table) ---------------- */
.tile-icon-sm {
    width: 34px; height: 34px;
    border-radius: 8px;
    background: linear-gradient(135deg, #2E86DE, #6C3483);
    color: white;
    display: flex; align-items: center; justify-content: center;
    font-weight: 700;
    font-size: 12px;
    flex-shrink: 0;
}

/* ---------------- Reports overview icon cards ---------------- */
.report-kpi {
    background: white;
    border-radius: 14px;
    border: 1px solid #EAEDF1;
    padding: 16px 18px;
    display: flex;
    align-items: center;
    gap: 14px;
    box-shadow: 0 2px 10px rgba(20,30,50,0.04);
}
.report-kpi .icon-box {
    width: 44px; height: 44px;
    border-radius: 10px;
    display: flex; align-items: center; justify-content: center;
    color: white;
    font-size: 18px;
    flex-shrink: 0;
}

/* ---------------- Settings mini-nav ---------------- */
.settings-nav-link {
    display: block;
    padding: 11px 14px;
    border-radius: 8px;
    color: #4A5568;
    text-decoration: none;
    font-size: 14px;
    font-weight: 500;
    margin-bottom: 2px;
}
.settings-nav-link:hover { background: #F2F4F7; color: #1B2631; }
.settings-nav-link.active { background: #E8F1FC; color: #2E86DE; font-weight: 700; }

/* ---------------- SaleDesk-style entity cards (customers/suppliers) ---------------- */
.entity-card {
    border-top: 4px solid var(--sd-primary);
    position: relative;
}
.entity-icon-box {
    width: 42px; height: 42px;
    border-radius: 10px;
    background: #E8F4FB;
    color: var(--sd-primary);
    display: flex; align-items: center; justify-content: center;
    font-size: 1.25rem;
    flex-shrink: 0;
}
.entity-name {
    font-weight: 700;
    font-size: 15px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 130px;
}
.entity-sub { font-size: 11.5px; color: var(--sd-muted); }
.card-pill-btn {
    font-size: 12px;
    font-weight: 600;
    border-radius: 8px;
    padding: 3px 10px;
    border: 1px solid transparent;
    display: inline-flex; align-items: center; gap: 4px;
    text-decoration: none;
    background: transparent;
}
.pill-ledger { color: var(--sd-primary); border-color: #CFE7F5; background: #F2F9FD; }
.pill-edit   { color: var(--sd-primary); border-color: #CFE7F5; background: #fff; }
.pill-delete { color: #E74C3C; border-color: #F8D3CE; background: #FDF3F2; }
.card-pill-btn:hover { filter: brightness(0.96); }

.stat-tile {
    border-radius: 10px;
    text-align: center;
    padding: 12px 6px;
    height: 100%;
}
.stat-tile .st-icon { font-size: 13px; margin-bottom: 2px; }
.stat-tile .st-value { font-weight: 800; font-size: 14.5px; line-height: 1.2; }
.stat-tile .st-label { font-size: 10.5px; color: #7A8699; margin-top: 2px; }
.stat-total   { background: #F5F9E8; }
.stat-total .st-icon, .stat-total .st-value { color: #4A7C1F; }
.stat-paid    { background: #F4F6F8; }
.stat-paid .st-icon, .stat-paid .st-value { color: #5A6675; }
.stat-advance { background: #EAF7EF; }
.stat-advance .st-icon, .stat-advance .st-value { color: #1E8449; }
.stat-out     { background: #FDEEEC; }
.stat-out .st-icon, .stat-out .st-value { color: #C0392B; }

.entity-progress { height: 6px; border-radius: 4px; background: #E9EDF2; overflow: hidden; }
.entity-progress .bar { height: 100%; background: var(--sd-primary); border-radius: 4px; }

.card-action-btn {
    font-size: 12.5px;
    font-weight: 600;
    border-radius: 9px;
    padding: 7px 8px;
    border: none;
    text-align: center;
    text-decoration: none;
    display: inline-flex; align-items: center; justify-content: center; gap: 5px;
    flex: 1 1 0;
    white-space: nowrap;
}
.act-green  { background: #E8F6EE; color: #1E8449; }
.act-blue   { background: #EAF4FB; color: var(--sd-primary); }
.act-indigo { background: #ECEFFB; color: #4C5FD5; }
.act-yellow { background: #FDF6E3; color: #B7791F; }
.card-action-btn:hover { filter: brightness(0.95); }

/* ---------------- Sidebar Reports submenu (reference-style) ---------------- */
.sidebar-chevron { font-size: 11px; transition: transform .2s; }
.sidebar-link[aria-expanded="true"] .sidebar-chevron { transform: rotate(180deg); }
.sidebar-sub {
    margin: 2px 10px 6px 26px;
    padding-left: 10px;
    border-left: 1px solid rgba(255,255,255,0.08);
    max-height: 320px;
    overflow-y: auto;
}
.sidebar-sub::-webkit-scrollbar { width: 4px; }
.sidebar-sub::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.15); border-radius: 4px; }
.sidebar-sub-group {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .07em;
    text-transform: uppercase;
    color: #5F6B7A;
    margin: 10px 0 3px 4px;
}
.sidebar-sub-link {
    display: block;
    font-size: 12.5px;
    color: #A7B1BE;
    text-decoration: none;
    padding: 5px 10px;
    border-radius: 7px;
    margin-bottom: 1px;
    line-height: 1.3;
}
.sidebar-sub-link:hover { background: rgba(255,255,255,0.06); color: #fff; }
.sidebar-sub-link.active { background: var(--sd-primary); color: #fff; font-weight: 600; }

/* Nested report groups in sidebar (reference-style) */
.sidebar-sub { max-height: 420px; }
.sidebar-sub-group-toggle {
    background: rgba(255,255,255,0.05);
    color: #DCE3EA;
    font-size: 12.5px;
    font-weight: 700;
    border-radius: 8px;
    padding: 7px 10px;
    margin: 8px 0 3px;
    text-decoration: none;
}
.sidebar-sub-group-toggle:hover { background: rgba(255,255,255,0.1); color: #fff; }
.sidebar-sub-group-toggle.open, .sidebar-sub-group-toggle[aria-expanded="true"] { background: rgba(255,255,255,0.09); color: #fff; }
.sidebar-sub-group-toggle .sidebar-chevron { transition: transform .2s; }
.sidebar-sub-group-toggle[aria-expanded="true"] .sidebar-chevron { transform: rotate(180deg); }
.sidebar-sub .collapse .sidebar-sub-link, .sidebar-sub .collapsing .sidebar-sub-link { margin-left: 6px; }

/* Desktop sidebar hide/show (reference-style) */
body.sidebar-hidden .sidebar { display: none !important; }
.sidebar-reopen-btn {
    position: fixed;
    top: 12px; left: 12px;
    z-index: 1040;
    width: 38px; height: 38px;
    border-radius: 9px;
    border: none;
    background: var(--sd-sidebar);
    color: #fff;
    font-size: 1.2rem;
    box-shadow: 0 4px 14px rgba(0,0,0,0.25);
}
.sidebar-reopen-btn:hover { background: var(--sd-primary); }

/* ================= POS reference-style upgrades ================= */
/* Full-height cart panel */
.pos-cart-sticky { position: sticky; top: 12px; }
.pos-cart-sticky .cart-panel {
    display: flex;
    flex-direction: column;
    height: calc(100vh - 24px);
    background: #fff;
    border: 1px solid var(--sd-border);
    border-radius: 14px;
    overflow: hidden;
}
.pos-cart-sticky .cart-items { flex: 1 1 auto; overflow-y: auto; min-height: 80px; }
.pos-cart-sticky #checkoutForm { flex-shrink: 0; margin-top: auto; }
.pos-cart-sticky .cust-picker { flex-shrink: 0; }

/* Cart line: reference layout */
.cart-line { padding: 10px 14px; border-bottom: 1px solid #F0F3F7; }
.cart-line .cart-name { font-weight: 700; font-size: 13px; color: var(--sd-ink); }
.qty-step-btn {
    width: 26px; height: 26px;
    border: 1px solid var(--sd-border);
    background: #fff;
    border-radius: 7px;
    font-weight: 700;
    line-height: 1;
    color: #4A5568;
}
.qty-step-btn:hover { background: #F1F4F8; }
.qty-input { width: 52px !important; height: 26px; padding: 2px 4px; }
.price-input { width: 78px !important; height: 26px; padding: 2px 6px; }

/* Bottom totals */
.cart-total-box { background: #fff; border-top: 1px solid var(--sd-border); padding: 12px 16px 14px; color: var(--sd-ink); }
.cart-total-box .grand-total { font-size: 20px; font-weight: 800; }
.cart-total-box .btn-outline-light { color: #4A5568; border-color: var(--sd-border); }
.cart-total-box .btn-outline-light:hover { background: #F1F4F8; color: var(--sd-ink); }
.cart-total-box .border-secondary { border-color: var(--sd-border) !important; }

/* Payment mode tiles */
.pay-mode-tile {
    border: 1.5px solid var(--sd-border);
    border-radius: 12px;
    padding: 12px 8px;
    text-align: center;
    cursor: pointer;
    font-weight: 600;
    font-size: 13.5px;
    color: #4A5568;
    position: relative;
}
.pay-mode-tile i { font-size: 1.2rem; display: block; margin-bottom: 3px; }
.pay-mode-tile input { position: absolute; opacity: 0; }
.pay-mode-tile:has(input:checked) {
    border-color: var(--sd-primary);
    background: #F2F9FD;
    color: var(--sd-primary);
}

/* Currency note buttons */
.note-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.note-btn {
    border: 1px solid transparent;
    border-radius: 9px;
    padding: 8px 4px;
    font-weight: 700;
    font-size: 13px;
}
.note-btn.wide { grid-column: 1 / -1; }
.n10   { background: #E8F6EE; color: #1E8449; }
.n20   { background: #FDF6E3; color: #B7791F; }
.n50   { background: #F3EFFB; color: #7D3C98; }
.n100  { background: #FDEEEC; color: #C0392B; }
.n500  { background: #E8F6EE; color: #1E8449; }
.n1000 { background: #EAF4FB; color: var(--sd-primary); }
.n5000 { background: #FDF6E3; color: #B7791F; }
.note-btn:hover { filter: brightness(0.95); }

/* Numpad */
.numpad-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.np-btn {
    border: 1px solid var(--sd-border);
    background: #F7F9FC;
    border-radius: 10px;
    padding: 12px 0;
    font-weight: 700;
    font-size: 16px;
    color: var(--sd-ink);
}
.np-btn:hover { background: #EDF1F6; }
.np-clear { background: #FDEEEC; color: #C0392B; border-color: #F8D3CE; }
.np-back  { background: #FDF6E3; color: #B7791F; border-color: #F0DFA8; }
.np-full  { grid-column: 2 / -1; background: var(--sd-primary); color: #fff; border-color: var(--sd-primary); font-size: 14px; }
.np-full:hover { background: var(--sd-primary-dark); }

/* Cash in Hand chip + checkout destination box */
.cash-chip {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    background: #E8F6EE;
    border: 1px solid #BFE6CE;
    color: #1E8449;
    border-radius: 9px;
    padding: 6px 12px;
    font-size: 12.5px;
    font-weight: 600;
    text-decoration: none;
}
.cash-chip strong { font-size: 13.5px; }
.cash-chip:hover { background: #DCF0E4; color: #166B39; }
.dest-box {
    border: 1px solid var(--sd-border);
    border-radius: 9px;
    background: #F7F9FC;
    padding: 6px 10px;
    font-size: 13px;
    font-weight: 600;
    color: var(--sd-ink);
}
.dest-box i { color: var(--sd-primary); margin-right: 4px; }

/* ==================== REPORTS v2 ==================== */
.rep-h1 { font-size: 27px; font-weight: 800; letter-spacing: -.03em; margin: 0; }
.rep-sub { color: var(--sd-muted); font-size: 14px; margin-top: 3px; }
.rep-crumb { font-size: 12.5px; color: var(--sd-muted); margin-bottom: 8px; }
.rep-crumb a { color: var(--sd-primary); text-decoration: none; font-weight: 600; }

.hub-search { position: relative; max-width: 420px; }
.hub-search input { border: 1px solid var(--sd-border); border-radius: 12px;
    padding: 11px 14px 11px 40px; width: 100%; font-size: 14px; background: #fff; }
.hub-search input:focus { outline: none; border-color: var(--sd-primary);
    box-shadow: 0 0 0 3px rgba(23,147,209,.12); }
.hub-search i { position: absolute; left: 14px; top: 11px; color: var(--sd-muted); }

.rep-chips { display: flex; gap: 8px; flex-wrap: wrap; margin: 18px 0 4px; }
.rep-chip { border: 1px solid var(--sd-border); background: #fff; border-radius: 999px;
    padding: 7px 16px; font-size: 13px; font-weight: 600; color: #46525F; }
.rep-chip:hover { border-color: var(--sd-primary); color: var(--sd-primary); }
.rep-chip.active { background: var(--sd-primary); border-color: var(--sd-primary); color: #fff; }
.rep-chip.active .text-warning { color: #fff !important; }

.rep-sec { font-size: 12px; font-weight: 800; letter-spacing: .09em; text-transform: uppercase;
    color: var(--sd-muted); margin: 26px 0 12px; }
.rep-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(255px, 1fr)); gap: 14px; }
.rep-card { background: #fff; border: 1px solid var(--sd-border); border-radius: 14px;
    padding: 16px; display: flex; gap: 13px; transition: .15s; position: relative; }
.rep-card:hover { border-color: var(--sd-primary); transform: translateY(-2px);
    box-shadow: 0 10px 26px rgba(23,147,209,.12); }
.rep-card-link { display: flex; gap: 13px; text-decoration: none; color: inherit; flex: 1; }
.rep-icon { width: 40px; height: 40px; border-radius: 11px; display: flex; align-items: center;
    justify-content: center; font-size: 1.15rem; flex-shrink: 0; }
.i-blue { background: #E8F4FC; color: var(--sd-primary); }
.i-green { background: #E6F6ED; color: #12A150; }
.i-amber { background: #FDF3E0; color: #D68910; }
.i-violet { background: #EFECFC; color: #6B4FD8; }
.i-red { background: #FDECEA; color: #E0483B; }
.rep-name { font-weight: 700; font-size: 14.5px; line-height: 1.25; }
.rep-desc { color: var(--sd-muted); font-size: 12.5px; margin-top: 3px; line-height: 1.4; }
.rep-star { border: 0; background: transparent; color: #D6DEE7; font-size: 15px; padding: 0 2px;
    align-self: flex-start; }
.rep-star.on, .rep-star:hover { color: #F4B740; }

.rep-toolbar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 16px 0; }
.rep-seg { display: inline-flex; background: #EDF1F6; border-radius: 11px; padding: 3px; }
.rep-seg button { border: 0; background: transparent; border-radius: 9px; padding: 7px 14px;
    font-size: 13px; font-weight: 600; color: #5A6674; }
.rep-seg button.on { background: #fff; color: var(--sd-ink); box-shadow: 0 1px 3px rgba(16,24,38,.12); }
.tool-btn { border: 1px solid var(--sd-border); background: #fff; border-radius: 10px;
    padding: 8px 13px; font-size: 13px; font-weight: 600; color: #46525F;
    display: inline-flex; align-items: center; gap: 6px; text-decoration: none; }
.tool-btn:hover { border-color: var(--sd-primary); color: var(--sd-primary); }
.tool-btn.primary { background: var(--sd-primary); border-color: var(--sd-primary); color: #fff; }
.tool-btn.primary:hover { background: var(--sd-primary-dark); color: #fff; }

.rep-note { background: #FFF8E1; border: 1px solid #F0DFA8; color: #7A5D0A; border-radius: 10px;
    padding: 9px 14px; font-size: 13px; margin-bottom: 14px; }

.kpi-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(185px, 1fr));
    gap: 13px; margin-bottom: 16px; }
.kpi-card { background: #fff; border: 1px solid var(--sd-border); border-radius: 14px; padding: 15px 17px; }
.kpi-card .k-lab { font-size: 12px; color: var(--sd-muted); font-weight: 600;
    display: flex; align-items: center; gap: 6px; }
.kpi-card .k-val { font-size: 23px; font-weight: 800; letter-spacing: -.02em; margin-top: 7px; }
.kpi-card .k-delta { font-size: 12px; font-weight: 700; margin-top: 5px; color: var(--sd-muted); }
.kpi-card .k-delta.up { color: #12A150; }
.kpi-card .k-delta.down { color: #E0483B; }
.kpi-card .k-spark { width: 100%; height: 26px; margin-top: 8px; color: var(--sd-primary); }

.rep-panel { background: #fff; border: 1px solid var(--sd-border); border-radius: 16px;
    box-shadow: 0 1px 2px rgba(16,24,38,.04), 0 8px 24px rgba(16,24,38,.04); }
.rep-panel-head { display: flex; align-items: center; justify-content: space-between;
    padding: 14px 18px; border-bottom: 1px solid var(--sd-border); }
.rep-panel-head h6 { margin: 0; font-weight: 700; font-size: 14.5px; }
.rep-table-wrap { overflow: auto; max-height: 620px; }
.rep-table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.rep-table thead th { background: #FAFCFE; color: var(--sd-muted); font-size: 11px; font-weight: 700;
    letter-spacing: .06em; text-transform: uppercase; text-align: left; padding: 12px 18px;
    border-bottom: 1px solid var(--sd-border); position: sticky; top: 0; z-index: 1; }
.rep-table th.num, .rep-table td.num { text-align: right; }
.rep-table td { padding: 13px 18px; border-bottom: 1px solid #F1F5F9; vertical-align: middle; }
.rep-table tbody tr:hover { background: #F8FBFE; }
.rep-cell-sub { font-size: 11px; color: var(--sd-muted); margin-top: 2px; }
.rep-avatar { width: 28px; height: 28px; border-radius: 8px; background: #EEF3F9; color: #5A6674;
    display: inline-flex; align-items: center; justify-content: center; font-size: 11px;
    font-weight: 800; margin-right: 9px; }
.rep-badge { border-radius: 999px; padding: 3px 10px; font-size: 11.5px; font-weight: 700; }
.b-green { background: #E6F6ED; color: #12A150; }
.b-amber { background: #FDF3E0; color: #D68910; }
.b-red { background: #FDECEA; color: #E0483B; }
.b-blue { background: #E8F4FC; color: var(--sd-primary); }
.rep-bar { display: inline-block; height: 6px; width: 80px; background: #EDF1F6;
    border-radius: 4px; overflow: hidden; }
.rep-bar-fill { display: block; height: 100%; background: var(--sd-primary); border-radius: 4px; }
.rep-foot { display: flex; justify-content: space-between; align-items: center;
    padding: 12px 18px; color: var(--sd-muted); font-size: 12.5px; flex-wrap: wrap; gap: 8px; }
.rep-pager { display: flex; gap: 8px; align-items: center; }
.rep-pager button { border: 1px solid var(--sd-border); background: #fff; border-radius: 8px;
    padding: 5px 12px; font-size: 12.5px; font-weight: 600; color: #46525F; }
.rep-pager button.primary { background: var(--sd-primary); border-color: var(--sd-primary); color: #fff; }
.rep-pager button:disabled { opacity: .45; }
@media print {
    .sidebar, .rep-toolbar, .rep-pager, .tool-btn { display: none !important; }
    .rep-table-wrap { max-height: none; }
}

/* Report popup — same shape and rhythm as the POS checkout dialog */
.rep-modal { border-radius: 16px; border: none; box-shadow: 0 24px 70px rgba(16,24,38,.28); }
.rep-modal .modal-header { border-bottom: 1px solid var(--sd-border); padding: 18px 24px; }
.rep-modal .modal-title { font-weight: 800; letter-spacing: -.02em; }
.rep-modal .modal-body { padding: 22px 24px; background: #fff; max-height: 74vh; overflow-y: auto; }
.rep-modal .modal-footer { border-top: 1px solid var(--sd-border); padding: 14px 24px; background: #fff;
    border-radius: 0 0 16px 16px; }
.rep-modal .rep-icon { width: 42px; height: 42px; font-size: 1.2rem; }
.rep-body-toolbar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 6px; }
#rmBody.rm-loading { opacity: .45; pointer-events: none; }
.rep-modal .rep-panel { box-shadow: none; }
.rep-modal .rep-table-wrap { max-height: 40vh; }
.rep-modal .kpi-card { background: #F9FBFD; }

/* POS customer picker (reference-style) */
.cust-picker { position: relative; padding: 10px 12px; }
.cust-current {
    width: 100%;
    display: flex; align-items: center; gap: 8px;
    background: #fff;
    border: 1px solid var(--sd-border);
    border-radius: 10px;
    padding: 9px 12px;
    font-size: 13.5px;
    color: var(--sd-ink);
    text-align: left;
}
.cust-current:hover { border-color: var(--sd-primary); }
.cust-current .cust-name { font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cust-current .badge { font-size: 10px; font-weight: 700; }
.cust-drop {
    position: absolute; z-index: 30; left: 12px; right: 12px; top: 100%;
    background: #fff; border: 1px solid var(--sd-border); border-radius: 12px;
    box-shadow: 0 14px 34px rgba(16,24,38,.16); overflow: hidden;
}
.cust-list { max-height: 240px; overflow-y: auto; }
.cust-item {
    width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 8px;
    background: #fff; border: 0; border-bottom: 1px solid #F1F5F9;
    padding: 9px 12px; font-size: 13px; text-align: left;
}
.cust-item:hover { background: #F5FAFE; }
.cust-item.active { background: #EAF4FB; }
.cust-item .cust-phone { display: block; font-size: 11px; color: var(--sd-muted); }
.cust-item .badge { font-size: 10px; font-weight: 700; flex-shrink: 0; }

/* Bank picker + logo marks */
.bank-logo {
    width: 30px; height: 30px;
    border-radius: 8px;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 9.5px; font-weight: 800; letter-spacing: .02em;
    flex-shrink: 0;
}
.bank-picker { position: relative; }
.bank-current {
    width: 100%;
    display: flex; align-items: center; gap: 10px;
    background: #fff; border: 1px solid var(--sd-border); border-radius: 10px;
    padding: 8px 12px; font-size: 13.5px; color: var(--sd-ink); text-align: left;
}
.bank-current:hover { border-color: var(--sd-primary); }
.bank-drop {
    position: absolute; z-index: 40; left: 0; right: 0; top: 100%;
    background: #fff; border: 1px solid var(--sd-border); border-radius: 12px;
    box-shadow: 0 14px 34px rgba(16,24,38,.16); overflow: hidden; margin-top: 4px;
}
.bank-list { max-height: 260px; overflow-y: auto; }
/* inside a modal the drop must not be clipped by the body's scroll area */
.modal-body { overflow: visible; }
.modal-body .bank-drop { max-height: 320px; }
.bank-item {
    width: 100%; display: flex; align-items: center; gap: 10px;
    background: #fff; border: 0; border-bottom: 1px solid #F1F5F9;
    padding: 9px 12px; font-size: 13px; text-align: left;
}
.bank-item:hover { background: #F5FAFE; }
.bank-logo-img {
    width: 30px; height: 30px;
    border-radius: 8px;
    object-fit: contain;
    background: #fff;
    border: 1px solid var(--sd-border);
    flex-shrink: 0;
}

/* ==================== DASHBOARD v3 ==================== */
.dash-head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 16px; }
.dash-h1 { font-size: 23px; font-weight: 800; letter-spacing: -.02em; margin: 0; }
.dash-sub { color: var(--sd-muted); font-size: 13px; margin-top: 2px; }
.btn-dash-primary {
    background: var(--sd-primary); border: none; color: #fff; font-weight: 700;
    border-radius: 10px; font-size: 13.5px; padding: 9px 16px;
    display: inline-flex; align-items: center; gap: 7px; text-decoration: none;
}
.btn-dash-primary:hover { background: var(--sd-primary-dark); color: #fff; }

/* compact KPI tiles */
.dash-kpis { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; margin-bottom: 12px; }
@media (max-width: 1150px) { .dash-kpis { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 680px)  { .dash-kpis { grid-template-columns: repeat(2, 1fr); } }
.dash-kpi {
    background: #fff; border: 1px solid var(--sd-border); border-radius: 12px;
    padding: 11px 13px; text-decoration: none; color: inherit; display: block; transition: .15s;
}
.dash-kpi:hover { border-color: var(--sd-primary); transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(23,147,209,.10); color: inherit; }
.dash-kpi .k-row { display: flex; align-items: center; gap: 7px; }
.dash-kpi .k-ic { width: 26px; height: 26px; border-radius: 8px; display: flex;
    align-items: center; justify-content: center; font-size: .82rem; flex-shrink: 0; }
.dash-kpi .k-lab { font-size: 10.5px; color: var(--sd-muted); font-weight: 700;
    letter-spacing: .04em; text-transform: uppercase; line-height: 1.2; }
.dash-kpi .k-val { font-size: 18px; font-weight: 800; letter-spacing: -.02em; margin-top: 7px; }
.dash-kpi .k-foot { font-size: 10.5px; margin-top: 3px; font-weight: 600; color: var(--sd-muted); }
.dash-kpi .k-foot.up { color: #12A150; }
.dash-kpi .k-foot.down { color: #E0483B; }
.dash-kpi .k-foot.mut { color: var(--sd-muted); font-weight: 500; }
.i-teal { background: #E4F6F6; color: #0FA3A3; }
.i-dark { background: #E9EDF3; color: #46525F; }

/* alerts */
.dash-alerts { display: flex; gap: 9px; flex-wrap: wrap; margin-bottom: 12px; }
.dash-alert { display: flex; align-items: center; gap: 8px; background: #fff;
    border: 1px solid var(--sd-border); border-left: 3px solid #F0A202; border-radius: 10px;
    padding: 8px 13px; font-size: 12.5px; text-decoration: none; color: inherit; }
.dash-alert:hover { box-shadow: 0 6px 16px rgba(14,23,38,.08); color: inherit; }
.dash-alert.red { border-left-color: #E0483B; }
.dash-alert.red i { color: #E0483B; }
.dash-alert.amber i { color: #F0A202; }
.dash-alert.green { border-left-color: #12A150; }
.dash-alert.green i { color: #12A150; }

/* quick actions */
.dash-actions { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 9px; margin-bottom: 14px; }
.dash-act { border-radius: 11px; padding: 10px 12px; display: flex; align-items: center; gap: 9px;
    text-decoration: none; border: 1px solid var(--sd-border); background: #fff; color: inherit; transition: .15s; }
.dash-act:hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(14,23,38,.09);
    border-color: var(--sd-primary); color: inherit; }
.dash-act .a-ic { width: 30px; height: 30px; border-radius: 9px; display: flex;
    align-items: center; justify-content: center; font-size: .9rem; flex-shrink: 0; }
.dash-act .a-t { font-weight: 700; font-size: 12.5px; }
.dash-act.primary { background: var(--sd-primary); border-color: var(--sd-primary); color: #fff; }
.dash-act.primary .a-ic { background: rgba(255,255,255,.2); color: #fff; }

/* layout grids */
.dash-g2 { display: grid; grid-template-columns: 2fr 1fr; gap: 12px; margin-bottom: 12px; }
.dash-g3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 12px; margin-bottom: 12px; }
@media (max-width: 980px) { .dash-g2, .dash-g3 { grid-template-columns: 1fr; } }

/* list rows */
.dash-row { display: flex; align-items: center; gap: 10px; padding: 9px 16px;
    border-bottom: 1px solid #F3F6FA; }
.dash-row:last-child { border-bottom: none; }
.dash-av { width: 29px; height: 29px; border-radius: 8px; background: #EEF3F9; color: #5A6674;
    display: flex; align-items: center; justify-content: center; font-size: 10.5px;
    font-weight: 800; flex-shrink: 0; }
.dash-nm { font-weight: 600; font-size: 13px; }
.dash-mt { font-size: 11px; color: var(--sd-muted); }
.dash-amt { margin-left: auto; font-weight: 700; font-size: 13px; white-space: nowrap; }
.dash-bar { height: 5px; background: #EDF1F6; border-radius: 4px; overflow: hidden; margin-top: 5px; }
.dash-bar > span { display: block; height: 100%; background: var(--sd-primary); border-radius: 4px; }
.dash-dot { display: inline-block; width: 10px; height: 10px; border-radius: 3px; }
.dash-legend { display: flex; flex-direction: column; gap: 7px; font-size: 12.5px; }
.dash-legend div { display: flex; align-items: center; gap: 7px; }

/* busy-hours heatmap */
.dash-heat { display: grid; grid-template-columns: repeat(12, 1fr); gap: 4px; padding: 8px 16px 4px; }
.dash-heat i { display: block; height: 22px; border-radius: 5px; }
.dash-heat-lbl { display: grid; grid-template-columns: repeat(12, 1fr); gap: 4px;
    padding: 0 16px 10px; font-size: 9.5px; color: var(--sd-muted); text-align: center; }

/* segmented control as links (dashboard trend range) */
.rep-seg a { border: 0; background: transparent; border-radius: 7px; padding: 5px 11px;
    font-size: 12px; font-weight: 600; color: #5A6674; text-decoration: none; }
.rep-seg a.on { background: #fff; color: var(--sd-ink); box-shadow: 0 1px 3px rgba(14,23,38,.12); }

/* Charts must live in a fixed-height box, otherwise Chart.js keeps growing
   the canvas on every resize tick and the page stretches forever. */
.chart-box { position: relative; height: 270px; width: 100%; }
.chart-box canvas { position: absolute; inset: 0; width: 100% !important; height: 100% !important; }
.chart-box-sm { height: 220px; }
@media (max-width: 680px) { .chart-box { height: 220px; } .chart-box-sm { height: 190px; } }

/* ---------- POS: view switcher (Detail / Grid / List) ---------- */
.view-switch { display: inline-flex; background: #EDF1F6; border-radius: 9px; padding: 3px; }
.view-switch button { border: 0; background: transparent; border-radius: 7px; padding: 6px 12px;
    font-size: 12.5px; font-weight: 600; color: #5A6674; }
.view-switch button.on { background: #fff; color: var(--sd-ink); box-shadow: 0 1px 3px rgba(14,23,38,.12); }

/* tile extras shared by the views */
.pos-tile-form { position: relative; }
.tile-star { position: absolute; top: 6px; left: 6px; z-index: 2; border: 0; background: rgba(255,255,255,.9);
    width: 26px; height: 26px; border-radius: 7px; color: #F0B429; font-size: 14px; line-height: 1; }
.tile-star:hover { color: #D69E2E; }
.tile-star.on { color: #F0B429; }
.pos-tile .tile-code, .pos-tile .tile-stock { display: none; font-size: 11px; color: var(--sd-muted); }

/* GRID (default) — unchanged look */
.pos-product-grid.view-grid { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); }

/* LIST — compact rows, no images */
.pos-product-grid.view-list { grid-template-columns: 1fr; gap: 0; }
.view-list .pos-tile-form { border-bottom: 1px solid #F0F3F7; }
.view-list .pos-tile:hover { transform: none; box-shadow: none; background: #F5FAFE; }
.view-list .tile-img { display: none; }
.view-list .tile-body { padding: 0; display: flex; align-items: center; gap: 12px; width: 100%; }
.view-list .tile-name { min-height: 0; font-size: 13px; flex: 1; }
.view-list .tile-code { display: block; color: var(--sd-muted); font-family: monospace; font-size: 11px; }
.view-list .tile-stock-badge { display: none; }

/* DETAIL — image thumb on the left, full info on the right */
.pos-product-grid.view-detail { grid-template-columns: 1fr; gap: 8px; }
.view-detail .pos-tile { flex-direction: row; align-items: center; padding: 10px; gap: 14px; }
.view-detail .tile-img { width: 62px; height: 62px; border-radius: 10px; flex-shrink: 0; font-size: 1.4rem; }
.view-detail .tile-body { padding: 0; flex: 1; }
.view-detail .tile-name { min-height: 0; font-size: 13.5px; }
.view-detail .tile-code { display: block; font-family: monospace; }
.view-detail .tile-price { font-size: 15px; }
.view-detail .tile-stock { display: block; }
.view-detail .tile-star { top: 10px; left: auto; right: 10px; background: transparent; }
.view-detail .tile-stock-badge { top: 10px; right: 40px; }

/* ---------- POS: favourites (mini product cards, reference style) ---------- */
.fav-strip { padding: 0; }
.fav-strip.collapsed .fav-items, .fav-strip.collapsed .fav-empty { display: none; }
.fav-head { font-size: 10.5px; font-weight: 700; letter-spacing: .07em; color: var(--sd-muted);
    margin-bottom: 6px; }
.fav-items { display: flex; gap: 10px; flex-wrap: wrap; }
.fav-empty { font-size: 11.5px; }
.fav-card {
    position: relative; width: 84px; padding: 8px 6px 7px;
    background: #fff; border: 1px solid var(--sd-border); border-radius: 10px;
    display: flex; flex-direction: column; align-items: center; gap: 3px; text-align: center;
}
.fav-card:hover { border-color: var(--sd-primary); box-shadow: 0 4px 12px rgba(23,147,209,.14); }
.fav-card .fc-star { position: absolute; top: 3px; right: 5px; color: #F4B740; font-size: 10px; }
.fav-card .fc-img {
    width: 100%; height: 42px; border-radius: 7px; background: #F1F4F8; color: #9AA6B2;
    display: flex; align-items: center; justify-content: center; overflow: hidden; font-size: 12px;
}
.fav-card .fc-img img { width: 100%; height: 100%; object-fit: cover; }
.fav-card .fc-name { font-size: 10px; font-weight: 600; line-height: 1.2;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.fav-card .fc-price { font-size: 10.5px; font-weight: 700; color: var(--sd-primary); }

/* ---------- Shortcuts modal ---------- */
.sc-group { font-size: 10.5px; font-weight: 800; letter-spacing: .07em; color: var(--sd-muted);
    margin: 14px 0 6px; }
.sc-group:first-child { margin-top: 0; }
.sc-row { display: flex; align-items: center; justify-content: space-between;
    padding: 7px 0; border-bottom: 1px solid #F3F6FA; font-size: 13px; }
.sc-row kbd { background: #F1F4F8; border: 1px solid var(--sd-border); color: #46525F;
    border-radius: 6px; padding: 2px 8px; font-size: 11.5px; }


/* ---------- POS toolbar (compact, SaleDesk layout) ---------- */
.pos-toolbar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.pos-toolbar .btn-primary { height: 38px; font-size: 13.5px; font-weight: 600; }
.pos-tool-btn {
    height: 38px; display: inline-flex; align-items: center; gap: 6px;
    font-size: 12.5px; font-weight: 600; border-radius: 9px; padding: 0 12px;
}
.pos-search { position: relative; width: 240px; }
.pos-search i {
    position: absolute; left: 11px; top: 50%; transform: translateY(-50%);
    color: var(--sd-muted); font-size: .9rem;
}
.pos-search input {
    width: 100%; height: 38px; border: 1px solid var(--sd-border); border-radius: 10px;
    padding: 0 12px 0 32px; font-size: 13.5px; background: #fff;
}
.pos-search input:focus {
    outline: none; border-color: var(--sd-primary);
    box-shadow: 0 0 0 3px rgba(23,147,209,.12);
}
.view-switch button { padding: 6px 13px; height: 32px; }

/* ---------- Category strip: scrolls sideways ---------- */
.cat-strip-wrap { position: relative; display: flex; align-items: center; }
.cat-strip {
    display: flex; gap: 8px; overflow-x: auto; scroll-behavior: smooth;
    padding: 2px 30px 6px; scrollbar-width: thin;
}
.cat-strip::-webkit-scrollbar { height: 5px; }
.cat-strip::-webkit-scrollbar-thumb { background: #D7DEE7; border-radius: 4px; }
.cat-strip .pos-chip {
    white-space: nowrap; flex-shrink: 0; background: #fff;
    border: 1px solid var(--sd-border); display: inline-flex; align-items: center; gap: 6px;
    padding: 7px 14px; font-size: 12.5px;
}
.cat-strip .pos-chip i { font-size: .85rem; color: var(--sd-muted); }
.cat-strip .pos-chip.active { background: var(--sd-primary); border-color: var(--sd-primary); color: #fff; }
.cat-strip .pos-chip.active i { color: #fff; }
.cat-arrow {
    position: absolute; z-index: 3; top: 50%; transform: translateY(-50%);
    width: 26px; height: 26px; border-radius: 50%; border: 1px solid var(--sd-border);
    background: #fff; color: #5A6674; font-size: .8rem; line-height: 1;
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 2px 6px rgba(14,23,38,.12);
}
.cat-arrow.left { left: 0; }
.cat-arrow.right { right: 0; }
.cat-arrow:hover { color: var(--sd-primary); border-color: var(--sd-primary); }

/* favourites strip: tighter, like the reference */
.fav-strip { padding: 8px 12px; }
.fav-empty { font-size: 11px; }
.pos-info-btn { background: #EAF4FB; border: 1px solid #C4E0F2; color: var(--sd-primary); }
.pos-info-btn:hover { background: #DBEDF9; color: var(--sd-primary-dark); }


/* Reference-matched toolbar bits */
.pos-plain-btn { background: #F1F4F8; border: 1px solid var(--sd-border); color: #4A5568; }
.pos-plain-btn:hover { background: #E7ECF3; color: var(--sd-ink); }
.cat-strip .pos-chip { background: #F1F3F6; border-color: transparent; }
.cat-strip .pos-chip:hover { background: #E4E9F0; }
.cat-strip { padding: 2px 34px 8px; }
.cat-strip::-webkit-scrollbar { height: 7px; }
.cat-strip::-webkit-scrollbar-track { background: #F1F3F6; border-radius: 4px; }
.cat-strip::-webkit-scrollbar-thumb { background: #C4CDD8; border-radius: 4px; }

/* ---------- Cart money bar (cash position above the cart) ---------- */
.cart-money-bar { display: flex; gap: 8px; align-items: center; margin-bottom: 8px; }
.cart-money-bar .cash-chip { flex: 1; justify-content: center; height: 34px; }
.cart-money-bar .pos-tool-btn { height: 34px; font-size: 12px; }

/* ---------- Repeat items toggle ---------- */
.repeat-toggle {
    display: inline-flex; align-items: center; gap: 7px;
    background: #fff; border: 1px solid var(--sd-border); border-radius: 9px;
    padding: 4px 8px; line-height: 1;
}
.repeat-toggle .rt-label {
    font-size: 8.5px; font-weight: 800; letter-spacing: .04em; color: var(--sd-muted);
    line-height: 1.15; text-align: left;
}
.repeat-toggle .rt-switch {
    width: 30px; height: 17px; border-radius: 999px; background: #D7DEE7;
    position: relative; transition: background .15s; flex-shrink: 0;
}
.repeat-toggle .rt-knob {
    position: absolute; top: 2px; left: 2px; width: 13px; height: 13px;
    border-radius: 50%; background: #fff; transition: left .15s;
    box-shadow: 0 1px 2px rgba(0,0,0,.2);
}
.repeat-toggle.on .rt-switch { background: var(--sd-primary); }
.repeat-toggle.on .rt-knob { left: 15px; }
.repeat-toggle.on .rt-label { color: var(--sd-primary); }

/* ---------- Compact cart lines (match the reference card size) ---------- */
.cart-line { padding: 8px 12px; }
.cart-line .cart-name { font-size: 12.5px; }
.qty-step-btn { width: 24px; height: 24px; font-size: 12px; }
.qty-input { width: 46px !important; height: 24px; font-size: 12px; }
.price-input { width: 72px !important; height: 24px; font-size: 12px; }
.cart-line .fw-bold { font-size: 13px !important; }

/* no divider line under the favourites area */
.fav-strip, .cat-strip-wrap { border: none !important; }
.pos-toolbar { border: none; }

/* ---------- List view: white row-cards like the reference ---------- */
.pos-product-grid.view-list { gap: 8px; }
.view-list .pos-tile-form { border-bottom: none; }
.view-list .pos-tile:hover { background: #fff; border-color: var(--sd-primary) !important;
    box-shadow: 0 4px 14px rgba(23,147,209,.10); }
.view-list .tile-name { font-size: 13.5px; font-weight: 700; text-transform: none; }
.view-list .tile-code { font-family: monospace; font-size: 11px; margin-top: 1px; }
.view-list .tile-body { flex-direction: column; align-items: flex-start; gap: 0; position: relative; }
/* small product icon on the left of each row */
.view-list .tile-img {
    display: flex; width: 34px; height: 34px; border-radius: 9px;
    font-size: 1rem; flex-shrink: 0;
}

/* compact cash chip for the POS action bar */
.cash-chip-sm { height: 30px; padding: 0 10px; font-size: 12px; gap: 5px; }
/* narrower cart column keeps its own comfortable minimum */
@media (min-width: 992px) { .pos-cart-sticky { min-width: 300px; } }

/* ==================== CART (reference size & spacing) ==================== */
/* Fits the screen without scrolling: the Pay button is always in view */
.pos-cart-sticky { height: calc(100vh - 130px); top: 10px; }
.pos-cart-sticky .cart-panel { height: 100%; }

.cart-head { padding: 10px 12px 8px; border-bottom: 1px solid var(--sd-border); }
.cart-title { font-weight: 800; font-size: 14px; line-height: 1.15; max-width: 92px; }
.cart-title i { color: var(--sd-ink); }
.cart-hint { font-size: 9.5px; color: var(--sd-muted); margin-top: 6px; line-height: 1.4; }
.cart-hint kbd { background: #F1F4F8; border: 1px solid var(--sd-border); color: #5A6674;
    border-radius: 4px; padding: 0 4px; font-size: 9px; margin: 0 1px; }

/* selected line gets the blue frame, like the reference */
.cart-line { padding: 8px 10px; outline: none; }
.cart-line:focus, .cart-line.selected {
    background: #F7FBFE; box-shadow: inset 0 0 0 2px var(--sd-primary); border-radius: 8px;
}
.cart-name-input {
    height: 28px; font-size: 12px; font-weight: 600; padding: 2px 8px;
    border-color: var(--sd-border);
}
.cart-del { border: 0; background: transparent; color: #E0483B; font-size: 13px; padding: 2px 4px; }
.cart-del:hover { color: #B32D22; }

/* totals + actions: compact, always pinned at the bottom */
.cart-total-box { padding: 10px 12px 12px; }
.cart-total-box .small { font-size: 11.5px; }
.cart-total-box .grand-total { font-size: 18px; }
.cart-total-box .btn { font-size: 12.5px; }
.cart-total-box .btn-primary { padding: 9px 10px; }
.cart-foot-note { font-size: 10px; color: var(--sd-muted); text-align: center; margin-top: 6px; }

/* narrower column: keep everything readable */
.pos-cart-sticky .cust-current { font-size: 12.5px; padding: 7px 10px; }
.pos-cart-sticky .cust-current .badge { font-size: 9px; }
.pos-cart-sticky .qty-step-btn { width: 22px; height: 22px; }
.pos-cart-sticky .qty-input { width: 40px !important; height: 22px; }
.pos-cart-sticky .price-input { width: 66px !important; height: 22px; }

/* Change to return: impossible to miss when money must go back */
#changeRow.change-live {
    background: #E6F6ED; border-radius: 8px; padding: 6px 10px; margin: 4px -4px 0;
}
#changeRow.change-live span { font-size: 15px !important; color: #0E7A3C !important; }


/* ==================== CASH BOOK ==================== */
.cb-kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 14px; }
@media (max-width: 780px) { .cb-kpis { grid-template-columns: repeat(2, 1fr); } }
.cb-kpi { background: #fff; border: 1px solid var(--sd-border); border-radius: 13px; padding: 14px 16px; }
.cb-kpi .lab { font-size: 10.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--sd-muted); }
.cb-kpi .val { font-size: 22px; font-weight: 800; letter-spacing: -.02em; margin-top: 6px; }
.cb-kpi.in .val { color: #12A150; }
.cb-kpi.out .val { color: #E0483B; }
.cb-kpi.close { background: #0E1726; border-color: #0E1726; }
.cb-kpi.close .lab { color: rgba(255,255,255,.6); }
.cb-kpi.close .val { color: #fff; }

.cb-filter { background: #fff; border: 1px solid var(--sd-border); border-radius: 13px;
    padding: 10px 14px; display: flex; gap: 12px; align-items: flex-end; flex-wrap: wrap; margin-bottom: 14px; }
.cb-filter label { font-size: 11px; font-weight: 600; color: var(--sd-muted); display: block; margin-bottom: 3px; }
.cb-filter input, .cb-filter select { border: 1px solid var(--sd-border); border-radius: 9px;
    height: 36px; padding: 0 10px; font-size: 13px; background: #fff; }
.cb-filter input:focus, .cb-filter select:focus { outline: none; border-color: var(--sd-primary);
    box-shadow: 0 0 0 3px rgba(23,147,209,.12); }

.cb-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.cb-table thead th { background: #FAFCFE; color: var(--sd-muted); font-size: 10.5px; font-weight: 700;
    letter-spacing: .05em; text-transform: uppercase; text-align: left; padding: 11px 16px;
    border-bottom: 1px solid var(--sd-border); }
.cb-table th.num, .cb-table td.num { text-align: right; }
.cb-table td { padding: 11px 16px; border-bottom: 1px solid #F3F6FA; }
.cb-table tbody tr { cursor: pointer; }
.cb-table tbody tr:hover { background: #F7FBFE; }
.cb-table tfoot td { padding: 12px 16px; background: #FAFCFE; font-weight: 800; border-top: 2px solid var(--sd-border); }
.cb-open td { background: #F7FBFE; font-weight: 700; color: #46525F; }
.cb-vch { font-family: monospace; font-size: 11.5px; color: var(--sd-primary); font-weight: 700; }
.cb-party { font-weight: 600; }
.cb-desc { font-size: 11px; color: var(--sd-muted); margin-top: 1px; }
.cb-in { color: #12A150; font-weight: 700; }
.cb-out { color: #E0483B; font-weight: 700; }
.cb-table .bal { font-weight: 800; }

/* entry popup */
.cb-amt { font-size: 26px; font-weight: 800; letter-spacing: -.02em; margin: 6px 0 10px; }
.cb-row { display: flex; justify-content: space-between; gap: 12px; padding: 8px 0;
    border-bottom: 1px solid #F3F6FA; font-size: 13.5px; }
.cb-row span { color: var(--sd-muted); }
.cb-row b { font-weight: 700; text-align: right; }

/* cash entry popup — richer detail */
.cb-tp { border-radius: 999px; padding: 2px 9px; font-size: 10.5px; font-weight: 800; }
.cb-tp.tp-in { background: #E6F6ED; color: #12A150; }
.cb-tp.tp-out { background: #FDECEA; color: #E0483B; }
.cb-tp.tp-ret { background: #FEF4E0; color: #B87803; }
.cb-sec { font-size: 10px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
    color: var(--sd-muted); margin: 15px 0 5px; display: flex; align-items: center; gap: 8px; }
.cb-sec::after { content: ""; flex: 1; height: 1px; background: var(--sd-border); }
.cb-grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 18px; }
@media (max-width: 520px) { .cb-grid2 { grid-template-columns: 1fr; } }
.cb-itab { width: 100%; border-collapse: collapse; font-size: 12px; }
.cb-itab th { background: #FAFCFE; color: var(--sd-muted); font-size: 9.5px; text-transform: uppercase;
    letter-spacing: .05em; padding: 6px 8px; text-align: left; border-bottom: 1px solid var(--sd-border); }
.cb-itab th.num, .cb-itab td.num { text-align: right; }
.cb-itab td { padding: 7px 8px; border-bottom: 1px solid #F5F8FB; }
.cb-itab tr.ret { background: #FEF7F6; }
.cb-flag { background: #FDECEA; color: #E0483B; border-radius: 4px; padding: 0 5px;
    font-size: 9.5px; font-weight: 800; margin-left: 4px; }
.cb-mini { font-size: 10px; color: var(--sd-muted); }
.cb-tl { display: flex; gap: 9px; padding: 7px 0; font-size: 12px; border-bottom: 1px solid #F3F6FA; }
.cb-tl i { color: var(--sd-primary); }
.cb-acct { display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; color: #46525F; white-space: nowrap; }
.cb-acct i { color: var(--sd-muted); }
.cb-who { display: flex; align-items: center; gap: 7px; }
.cb-av { width: 24px; height: 24px; border-radius: 7px; background: #EEF3F9; color: #5A6674;
    display: flex; align-items: center; justify-content: center; font-size: 9.5px; font-weight: 800; flex-shrink: 0; }
.cb-who .nm { font-size: 12px; font-weight: 600; display: block; line-height: 1.15; }
.cb-who .rl { font-size: 9.5px; color: var(--sd-muted); }

/* ============================================================
   READABILITY PASS — applies to the whole system.
   Everything below intentionally sits at the end of the file so it
   wins over the older, smaller sizes without editing 80 rules by hand.
   ============================================================ */
body { font-size: 15px; line-height: 1.5; }

/* ---- Tables: bigger text, roomier rows, everywhere ---- */
.rep-table, .cb-table, table.table { font-size: 14.5px; }
.rep-table thead th, .cb-table thead th, table.table thead th {
    font-size: 12px; letter-spacing: .04em; padding: 13px 16px;
}
.rep-table td, .cb-table td, table.table td { padding: 14px 16px; }
.rep-table tfoot td, .cb-table tfoot td { padding: 15px 16px; font-size: 15px; }
.rep-cell-sub, .cb-desc, .cb-mini, .dash-mt { font-size: 12.5px; }
.rep-badge, .cb-tp, .pill, .badge { font-size: 12px; padding: 3px 11px; }
.cb-flag { font-size: 11px; padding: 1px 7px; }
.cb-vch { font-size: 13px; }
.cb-party, .dash-nm, .rep-name { font-size: 14.5px; }
.cb-acct { font-size: 13px; }
.cb-who .nm { font-size: 13.5px; }
.cb-who .rl { font-size: 11.5px; }
.cb-av, .rep-avatar, .dash-av { width: 30px; height: 30px; font-size: 11.5px; }

/* ---- Cards / KPIs: larger numbers, more air ---- */
.cb-kpi { padding: 18px 20px; }
.cb-kpi .lab, .kpi-card .k-lab, .dash-kpi .k-lab { font-size: 12px; }
.cb-kpi .val { font-size: 28px; }
.kpi-card .k-val { font-size: 25px; }
.dash-kpi { padding: 14px 16px; }
.dash-kpi .k-val { font-size: 21px; }
.dash-kpi .k-foot, .kpi-card .k-delta { font-size: 12px; }
.card-panel, .rep-panel { padding: 18px; }
.rep-panel { padding: 0; }
.rep-panel-head { padding: 16px 20px; }
.rep-panel-head h6, .card-panel h6 { font-size: 16px; }

/* ---- Headings, buttons, forms ---- */
.dash-h1, .rep-h1, .page-title { font-size: 26px; }
.dash-sub, .rep-sub { font-size: 14px; }
.tool-btn, .btn, .btn-dash-primary { font-size: 14px; }
.btn-sm, .tool-btn.btn-sm { font-size: 13px; }
.form-control, .form-select { font-size: 14.5px; }
.form-label, .cb-filter label { font-size: 13px; }
.cb-filter input, .cb-filter select { height: 40px; font-size: 14.5px; }
.cb-row { font-size: 14.5px; padding: 9px 0; }
.cb-sec { font-size: 11.5px; }
.cb-itab { font-size: 13.5px; }
.cb-itab th { font-size: 11px; padding: 8px 10px; }
.cb-itab td { padding: 9px 10px; }
.cb-amt { font-size: 30px; }
.cb-tl { font-size: 13.5px; padding: 9px 0; }
.sidebar-link { font-size: 15px; }
.rep-desc { font-size: 13.5px; }
.rep-sec, .dash-alert { font-size: 13.5px; }

/* ---- Use the full width of the screen ---- */
main .container, main .container-fluid { max-width: 100%; }
.rep-table-wrap, .cb-table { width: 100%; }
/* cash book amounts should read at a glance */
.cb-table .cb-in, .cb-table .cb-out { font-size: 15.5px; }
.cb-table .bal { font-size: 15.5px; }

/* Give page content a bit more breathing room on large screens */
@media (min-width: 1400px) {
    main > .p-3.p-md-4 { padding: 28px 34px !important; }
}

/* ---- Customer / Supplier cards: reference-grade readability ---- */
.entity-card { padding: 18px; border-radius: 14px; }
.entity-icon-box { width: 44px; height: 44px; font-size: 1.3rem; border-radius: 11px; }
.entity-name { font-size: 16px; font-weight: 700; max-width: 190px; }
.entity-sub { font-size: 12.5px; }
.card-pill-btn { font-size: 12.5px; padding: 5px 12px; }

.stat-tile { padding: 14px 8px; border-radius: 11px; }
.stat-tile .st-icon { font-size: 15px; margin-bottom: 4px; }
.stat-tile .st-value { font-size: 17px; }
.stat-tile .st-label { font-size: 12px; margin-top: 4px; }

.entity-progress { height: 7px; }
.entity-card .text-muted.small,
.entity-card .fw-bold.small { font-size: 13px !important; }
.card-action-btn { font-size: 13.5px; padding: 9px 10px; border-radius: 10px; }

/* Cards should never squeeze below a readable width */
.row > [class*="col-"] > .entity-card { min-width: 0; }
@media (min-width: 1200px) {
    .entity-name { max-width: 220px; }
}

/* ---- Sidebar alert shortcuts (moved down from the removed topbar) ---- */
.sidebar-alerts { display: flex; gap: 8px; }
.sb-alert {
    flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 6px;
    background: rgba(255,255,255,.06); color: #B9C2CC; border-radius: 8px;
    padding: 7px 8px; font-size: 12px; font-weight: 600; text-decoration: none; position: relative;
}
.sb-alert:hover { background: rgba(255,255,255,.12); color: #fff; }
.sb-badge {
    background: #E0483B; color: #fff; border-radius: 999px;
    font-size: 10px; font-weight: 800; padding: 0 6px; min-width: 18px; text-align: center;
}
.sb-badge.amber { background: #F0A202; color: #16202C; }

/* ---- Content starts at the top now that the search bar is gone ---- */
main > .p-3.p-md-4 { padding-top: 22px !important; }
@media (min-width: 1400px) { main > .p-3.p-md-4 { padding: 24px 34px !important; } }

/* ---- SaleDesk-matched card typography ---- */
.entity-card { padding: 20px; }
.entity-name { font-size: 17px; font-weight: 700; }
.entity-sub { font-size: 13px; }
.stat-tile { padding: 16px 8px; }
.stat-tile .st-icon { font-size: 16px; margin-bottom: 5px; }
.stat-tile .st-value { font-size: 20px; font-weight: 800; }
.stat-tile .st-label { font-size: 13px; margin-top: 5px; color: #6B7684; }
.entity-card .text-muted.small,
.entity-card .fw-bold.small { font-size: 13.5px !important; }
.card-action-btn { font-size: 14px; padding: 10px; }
.card-pill-btn { font-size: 13px; padding: 6px 13px; }
.entity-icon-box { width: 46px; height: 46px; font-size: 1.35rem; }

/* ---- Cards: lighter, calmer typography (matches the reference) ---- */
.entity-name { font-weight: 600; letter-spacing: -.01em; }
.stat-tile .st-value { font-weight: 700; font-size: 19px; }
.stat-tile .st-icon { opacity: .75; }
.stat-tile.stat-total .st-value { color: #1B2631; }
.stat-tile.stat-paid .st-value { color: #1B2631; }
.stat-tile.stat-out .st-value { color: #C0392B; }
.stat-tile.stat-advance .st-value { color: #1E8449; }
.entity-card .fw-bold.small { font-weight: 600 !important; }

/* soft "Default" tag instead of a loud blue badge */
.tag-default {
    background: #EDF2F7; color: #5A6674; border-radius: 999px;
    padding: 2px 10px; font-size: 11.5px; font-weight: 600;
}

/* bulk-select checkbox stays available but stops shouting */
.entity-card .row-checkbox { opacity: .3; transition: opacity .15s; }
.entity-card:hover .row-checkbox, .entity-card .row-checkbox:checked { opacity: 1; }

/* ---- Popup toolbars (sale register / invoices) ---- */
.sr-toolbar { display: flex; align-items: flex-end; gap: 14px; flex-wrap: wrap;
    padding-bottom: 14px; margin-bottom: 14px; border-bottom: 1px solid var(--sd-border); }
.sr-label { font-size: 12px; font-weight: 600; color: var(--sd-muted); display: block; margin-bottom: 4px; }
.sr-toolbar .form-select { min-width: 170px; height: 38px; }
.sr-seg { display: inline-flex; background: #EDF1F6; border-radius: 9px; padding: 3px; }
.sr-seg button { border: 0; background: transparent; border-radius: 7px; padding: 7px 18px;
    font-size: 13px; font-weight: 600; color: #5A6674; }
.sr-seg button.on { background: #fff; color: var(--sd-ink); box-shadow: 0 1px 3px rgba(14,23,38,.12); }

/* ============================================================
   Customer / Supplier cards — wider and shorter, like the reference
   ============================================================ */
.entity-card { padding: 16px 18px; }
.entity-icon-box { width: 40px; height: 40px; font-size: 1.15rem; border-radius: 10px; }
.entity-name { font-size: 16px; }
.entity-sub { font-size: 12.5px; margin-top: 1px; }

/* header: name on the left, Default + Ledger/Edit/Delete grouped on the right */
.entity-card .card-pill-btn { font-size: 12.5px; padding: 4px 11px; }
.entity-card .tag-default { font-size: 11px; padding: 2px 9px; }

/* stat tiles: shorter, so the whole card loses height */
.stat-tile { padding: 11px 6px; border-radius: 10px; }
.stat-tile .st-icon { font-size: 13px; margin-bottom: 2px; }
.stat-tile .st-value { font-size: 18px; }
.stat-tile .st-label { font-size: 12px; margin-top: 2px; }
.entity-card .row.g-2.mt-3 { margin-top: 12px !important; }

/* progress + contact + actions: tighter spacing */
.entity-card .mt-3 { margin-top: 10px !important; }
.entity-card .pt-2 { padding-top: 8px !important; }
.entity-progress { height: 6px; }
.card-action-btn { font-size: 13px; padding: 8px 10px; }

/* wider columns: three per row on large screens, two on medium */
@media (min-width: 1600px) {
    .customer-grid > [class*="col-"] { flex: 0 0 auto; width: 33.333%; }
}
.entity-actions { margin-left: auto; }
/* cart shows it is working, without blanking out */
.cart-panel.cart-busy { opacity: .55; pointer-events: none; transition: opacity .1s; }

/* ==================== Flash notifications ==================== */
.np-toasts {
    position: fixed; top: 16px; left: 50%; transform: translateX(-50%);
    z-index: 1095; display: flex; flex-direction: column; gap: 8px;
    width: max-content; max-width: min(520px, calc(100vw - 24px));
}
.np-flash {
    display: flex; align-items: center; gap: 11px;
    background: #fff; border: 1px solid #D6F0DF; border-radius: 12px;
    padding: 12px 14px; box-shadow: 0 10px 30px rgba(14,23,38,.14);
    font-size: 14px; font-weight: 500; color: var(--sd-ink);
    animation: nfIn .28s cubic-bezier(.2,.9,.3,1.15);
}
.np-flash.leaving { animation: nfOut .22s ease forwards; }
@keyframes nfIn { from { opacity: 0; transform: translateY(-12px); } to { opacity: 1; transform: none; } }
@keyframes nfOut { to { opacity: 0; transform: translateY(-10px); } }
.np-flash i:first-child { font-size: 1.05rem; flex-shrink: 0; }
.np-flash .nf-text { flex: 1; line-height: 1.35; }
.np-flash .nf-close {
    border: 0; background: transparent; color: #A8B3BF; font-size: 1rem;
    padding: 0 2px; line-height: 1; flex-shrink: 0;
}
.np-flash .nf-close:hover { color: var(--sd-ink); }

.np-flash.success { border-color: #C9EAD7; }
.np-flash.success i:first-child { color: #12A150; }
.np-flash.info { border-color: #CDE7F7; }
.np-flash.info i:first-child { color: var(--sd-primary); }
.np-flash.warning { border-color: #F3E0B5; }
.np-flash.warning i:first-child { color: #D68910; }
.np-flash.danger { border-color: #F6D2CE; }
.np-flash.danger i:first-child { color: #E0483B; }

/* "how much is in this account" box, shown wherever cash/bank is chosen */
.avail-box {
    display: flex; align-items: center; justify-content: space-between; gap: 10px;
    background: #F2F9FD; border: 1px solid #CFE7F5; border-radius: 10px;
    padding: 10px 13px; font-size: 13.5px; margin-bottom: 10px; color: #34495E;
}
.avail-box strong { font-size: 15px; color: var(--sd-ink); }
.avail-box i { color: var(--sd-primary); }
/* credit entries: visible, but clearly not cash */
.cb-noncash td { background: #FCFDFE; }
.cb-noncash .cb-party { color: #5A6674; }
.cb-tp.tp-credit { background: #EFECFC; color: #6B4FD8; }

/* ---- Card header: the name leads, the actions stay out of its way ---- */
.entity-name {
    font-size: 17px; font-weight: 700; line-height: 1.2;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%;
}
.entity-sub { display: flex; align-items: center; gap: 7px; }

/* compact action pills (Ledger / Edit / Delete) */
.card-pill-btn {
    font-size: 11.5px; font-weight: 600; padding: 4px 9px; border-radius: 8px;
    display: inline-flex; align-items: center; gap: 4px; white-space: nowrap;
}
.card-pill-btn i { font-size: .82rem; }
.entity-card .tag-default { font-size: 10.5px; padding: 1px 8px; }
.entity-card .row-checkbox { width: 15px; height: 15px; flex-shrink: 0; }

/* on narrow cards the labels drop away, icons stay */
@media (max-width: 1500px) {
    .card-pill-btn .pill-label { display: none; }
    .card-pill-btn { padding: 5px 8px; }
}

/* ---- Accounts page ---- */
.acct-cash td { background: #F7FCF9; }
.acct-sub { font-size: 12px; color: var(--sd-muted); margin-top: 2px; }
.acct-bal { font-size: 17px; font-weight: 800; }
.tag-system { background: #EDF2F7; color: #5A6674; border-radius: 999px;
    padding: 1px 8px; font-size: 10px; font-weight: 800; margin-left: 4px; }
.tag-default { background: #E8F4FC; color: var(--sd-primary); }

/* ---- Dashboard live clock ---- */
.live-clock {
    background: #fff; border: 1px solid var(--sd-border); border-radius: 11px;
    padding: 7px 15px; text-align: right; line-height: 1.15; min-width: 152px;
}
.live-clock .lc-time { font-size: 18px; font-weight: 800; letter-spacing: -.01em; }
.live-clock .lc-sec { font-size: 13px; font-weight: 700; color: var(--sd-muted); }
.live-clock .lc-date { font-size: 11.5px; color: var(--sd-muted); font-weight: 600; }

/* ---- Cart line: fixed columns so nothing gets clipped ---- */
.cart-line-controls {
    display: grid;
    grid-template-columns: auto 1fr auto auto 1fr auto;
    align-items: center;
    gap: 5px;
    width: 100%;
}
.cart-line-controls .qty-step-btn { width: 24px; height: 26px; }
.cart-line-controls .qty-input {
    width: 100% !important; min-width: 38px; height: 26px;
    padding: 2px 4px; font-size: 12.5px;
}
.cart-line-controls .cl-unit {
    font-size: 11px; color: var(--sd-muted); white-space: nowrap; padding: 0 2px;
}
.cart-line-controls .price-input {
    width: 100% !important; min-width: 58px; height: 26px;
    padding: 2px 6px; font-size: 12.5px; text-align: right;
}
.cart-line-controls .cl-total {
    font-weight: 700; font-size: 13px; white-space: nowrap; text-align: right; padding-left: 4px;
}
.cart-name-input { width: 100%; }

/* ---- Product photo: always fits the tile, never crops badly ---- */
.pos-tile .tile-img {
    background: #fff;
    border: 1px solid #EEF2F7;
    padding: 8px;
    overflow: hidden;
}
.pos-tile .tile-img img {
    width: 100%; height: 100%;
    object-fit: contain;          /* whole logo/photo visible, no cropping */
    object-position: center;
}
.view-list .tile-img, .view-detail .tile-img { padding: 4px; }
.fav-card .fc-img img { object-fit: contain; padding: 3px; background: #fff; }

/* ============================================================
   POS product views — sized to match the reference
   ============================================================ */

/* --- no flash while the cart updates --- */
.cart-panel.cart-busy { opacity: 1; pointer-events: auto; }

/* --- "N in cart" marker --- */
.tile-incart { display: none; font-size: 11.5px; font-weight: 700; color: var(--sd-primary); margin-top: 2px; }
.tile-incart.on { display: block; }

/* --- the Add bar (Detail view only) --- */
.tile-add {
    display: none;
    margin-top: 10px; padding: 9px; border-radius: 9px;
    background: #EAF4FB; color: var(--sd-primary);
    font-size: 13.5px; font-weight: 700; text-align: center;
}
.pos-tile:hover .tile-add { background: #DBEDF9; }

/* ---------- GRID: image tile, name, price ---------- */
.pos-product-grid.view-grid { grid-template-columns: repeat(auto-fill, minmax(192px, 1fr)); gap: 14px; }
.view-grid .pos-tile { padding: 0; overflow: hidden; }
.view-grid .tile-img {
    height: 150px; border: none; border-radius: 0;
    background: #fff; border-bottom: 1px solid #EEF2F7; padding: 14px;
}
.view-grid .tile-img img { width: 100%; height: 100%; object-fit: contain; }
.view-grid .tile-img i { font-size: 2.1rem; color: #9EC5E8; }
.view-grid .tile-body { padding: 12px 13px 14px; }
.view-grid .tile-name {
    font-size: 14px; font-weight: 600; text-transform: none; min-height: 36px; line-height: 1.3;
}
.view-grid .tile-code, .view-grid .tile-stock, .view-grid .tile-add { display: none; }
.view-grid .tile-price { font-size: 15px; font-weight: 700; color: var(--sd-primary); margin-top: 7px; }
.view-grid .tile-stock-badge {
    top: 8px; right: 8px; background: #E6F6ED; color: #12A150; font-size: 11px; font-weight: 700;
}

/* ---------- DETAIL: card with an Add button ---------- */
.pos-product-grid.view-detail { grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 14px; }
.view-detail .pos-tile { flex-direction: column; align-items: stretch; padding: 14px; gap: 0; }
.view-detail .tile-img {
    width: 44px; height: 44px; border-radius: 10px; font-size: 1.2rem;
    position: absolute; top: 14px; left: 14px; background: #EAF3FB; border: none;
}
.view-detail .tile-body { padding: 0 0 0 58px; min-height: 46px; }
.view-detail .tile-name { font-size: 15px; font-weight: 700; text-transform: none; min-height: 0; }
.view-detail .tile-code { display: block; font-size: 12.5px; color: var(--sd-muted); margin-top: 2px; }
.view-detail .tile-price { display: none; }
.view-detail .tile-stock { display: none; }
.view-detail .tile-add { display: block; }
.view-detail .tile-stock-badge {
    top: 14px; right: 14px; background: #E6F6ED; color: #12A150; font-size: 11.5px; font-weight: 700;
}
.view-detail .tile-star { top: 46px; right: 14px; left: auto; background: transparent; }

/* ---------- LIST: one row per product ---------- */
.pos-product-grid.view-list { grid-template-columns: 1fr; gap: 10px; }
.view-list .tile-img {
    display: flex; width: 42px; height: 42px; border-radius: 10px;
    background: #EAF3FB; border: none; font-size: 1.15rem; position: static;
}
.view-list .tile-body { padding: 0; flex: 1; min-width: 0; }
.view-list .tile-name { font-size: 15px; font-weight: 600; text-transform: none; min-height: 0; }
.view-list .tile-code { display: block; font-family: monospace; font-size: 12px; margin-top: 2px; }
/* star sits level with the price, not floating in the middle */
.view-list .tile-add, .view-list .tile-stock-badge { display: none; }
.view-list .pos-tile-form { position: relative; }

/* ---------- POS uses a slim icon-only sidebar ---------- */
@media (min-width: 992px) {
    /* the width is set inline in the markup, so this needs !important to win */
    body.pos-screen .sidebar {
        width: 56px !important; min-width: 56px !important; overflow: hidden;
        transition: width .15s ease;
    }
    body.pos-screen .sidebar .brand-badge { margin: 0 auto; }
    body.pos-screen .sidebar .sidebar-link { margin: 2px 6px; border-radius: 9px; }
    body.pos-screen .sidebar .link-text,
    body.pos-screen .sidebar .brand-text,
    body.pos-screen .sidebar .sidebar-alerts,
    body.pos-screen .sidebar .sidebar-footer .user-meta { display: none; }
    body.pos-screen .sidebar .sidebar-link { justify-content: center; padding: 11px 0; margin: 3px 8px; }
    body.pos-screen .sidebar .sidebar-header { padding-left: 0 !important; padding-right: 0 !important;
        justify-content: center; }
    body.pos-screen .sidebar .btn-close { display: none; }
    body.pos-screen .sidebar .sidebar-link i { margin: 0 !important; font-size: 1.15rem; }
    body.pos-screen .sidebar:hover { width: 230px !important; min-width: 230px !important; }
    body.pos-screen .sidebar:hover .link-text,
    body.pos-screen .sidebar:hover .brand-text { display: inline; }
    body.pos-screen .sidebar:hover .sidebar-link { justify-content: flex-start; padding: 11px 14px; }
    body.pos-screen .sidebar:hover .sidebar-link i { margin-right: .5rem !important; }
}

@media (min-width: 992px) {
    body.pos-screen main { flex: 1 1 auto; min-width: 0; }
    body.pos-screen .sidebar .sidebar-footer { padding-left: 0 !important; padding-right: 0 !important; }
    body.pos-screen .sidebar:hover .sidebar-header { justify-content: flex-start; padding-left: 1rem !important; }
    body.pos-screen .sidebar:hover .btn-close { display: block; }
    body.pos-screen .sidebar:hover .sidebar-alerts { display: flex; }
}


/* the sidebar rail must not leak brand text or user name */
@media (min-width: 992px) {
    body.pos-screen .sidebar .brand-text { display: none; }
    body.pos-screen .sidebar:hover .brand-text { display: block; }
    body.pos-screen .sidebar .sidebar-header { gap: 0; }
}

/* Navigation progress bar — the page always looks alive */
.np-progress {
    position: fixed; top: 0; left: 0; height: 2px; width: 0;
    background: linear-gradient(90deg, var(--sd-primary), #5DC1F0);
    z-index: 2000; opacity: 0; transition: width .12s ease, opacity .2s;
}
.np-progress.on { opacity: 1; }


/* ============================================================
   POS list rows — a plain flex row: image | name | price column | star.
   Nothing is absolutely positioned, so the card always grows to fit
   whatever is inside it.
   ============================================================ */
.tile-right { display: none; }

.pos-product-grid.view-list { grid-template-columns: 1fr; gap: 10px; }
.view-list .pos-tile-form { position: relative; }
.view-list .pos-tile {
    display: flex; flex-direction: row; align-items: center; gap: 14px;
    background: #fff; border: 1px solid var(--sd-border) !important; border-radius: 12px;
    padding: 12px 44px 12px 14px; min-height: 0;
}
.view-list .pos-tile:hover {
    background: #fff; border-color: var(--sd-primary) !important;
    box-shadow: 0 4px 14px rgba(23,147,209,.10);
}
.view-list .tile-img {
    display: flex; width: 44px; height: 44px; border-radius: 10px;
    background: #fff; border: 1px solid #EEF2F7; padding: 4px; flex-shrink: 0; font-size: 1.15rem;
}
.view-list .tile-body { padding: 0; flex: 1; min-width: 0; text-align: left; }
.view-list .tile-name {
    font-size: 15px; font-weight: 600; text-transform: none; min-height: 0; line-height: 1.25;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.view-list .tile-code {
    display: block; font-family: ui-monospace, monospace; font-size: 12px;
    color: var(--sd-muted); margin-top: 2px;
}
.view-list .tile-right {
    display: flex; flex-direction: column; align-items: flex-end; gap: 4px; flex-shrink: 0;
}
.view-list .tile-price {
    display: block; font-size: 16px; font-weight: 600;   /* semi-bold, like the reference */
    color: var(--sd-primary); line-height: 1.1; margin: 0;
}
.view-list .tile-stock {
    display: block; background: #E6F6ED; color: #12A150; border-radius: 999px;
    padding: 3px 11px; font-size: 12px; font-weight: 600; white-space: nowrap; width: auto; text-align: center;
}
.view-list .tile-stock.low { background: #FDECEA; color: #E0483B; }
.view-list .tile-incart {
    display: none; font-size: 12px; font-weight: 600; color: var(--sd-primary);
}
.view-list .tile-incart.on { display: block; }
.view-list .tile-star {
    position: absolute; top: 50%; right: 12px; left: auto; transform: translateY(-50%);
    background: transparent; color: #F0B429; font-size: 18px; width: auto; height: auto;
}
.view-list .tile-add, .view-list .tile-stock-badge { display: none; }

/* Grid and Detail use the same markup, so tell them what to do with the
   new right-hand column. */
.view-grid .tile-right { display: block; text-align: left; padding: 0 13px 13px; }
.view-grid .tile-price {
    display: block; font-size: 15px; font-weight: 600; color: var(--sd-primary); margin: 0;
}
.view-grid .tile-stock, .view-grid .tile-incart { display: none; }
.view-grid .tile-body { padding: 12px 13px 6px; }

.view-detail .tile-right {
    display: flex; flex-direction: column; align-items: flex-end; gap: 4px;
    position: absolute; top: 14px; right: 14px;
}
.view-detail .tile-price {
    display: block; font-size: 16px; font-weight: 600; color: var(--sd-primary); margin: 0;
}
.view-detail .tile-stock {
    display: block; background: #E6F6ED; color: #12A150; border-radius: 999px;
    padding: 3px 11px; font-size: 12px; font-weight: 600; white-space: nowrap; width: auto;
}
.view-detail .tile-stock.low { background: #FDECEA; color: #E0483B; }
.view-detail .tile-incart { display: none; font-size: 12px; font-weight: 600; color: var(--sd-primary); }
.view-detail .tile-incart.on { display: block; }
.view-detail .tile-stock-badge { display: none; }
.view-detail .tile-star { top: auto; bottom: 60px; right: 14px; left: auto; background: transparent; }


/* ============================================================
   POS sidebar rail — icons centred in their own rounded squares
   ============================================================ */
@media (min-width: 992px) {
    body.pos-screen .sidebar { align-items: center; padding: 0 !important; }
    body.pos-screen .sidebar .sidebar-header {
        justify-content: center; padding: 10px 0 !important; width: 100%;
    }
    body.pos-screen .sidebar .brand-badge { margin: 0; }
    body.pos-screen .sidebar .nav { width: 100%; align-items: center; }
    body.pos-screen .sidebar .nav-item { width: 100%; display: flex; justify-content: center; }
    body.pos-screen .sidebar .sidebar-link {
        width: 40px; height: 40px; padding: 0 !important; margin: 2px 0;
        display: flex; align-items: center; justify-content: center; border-radius: 10px;
    }
    body.pos-screen .sidebar .sidebar-link i { margin: 0 !important; font-size: 1.1rem; }
    body.pos-screen .sidebar .sidebar-footer {
        width: 100%; display: flex; justify-content: center; padding: 8px 0 !important;
    }
    body.pos-screen .sidebar .sidebar-logout {
        width: 40px; height: 40px; padding: 0; display: flex;
        align-items: center; justify-content: center; border-radius: 10px;
    }
    body.pos-screen .sidebar .sidebar-logout .logout-text { display: none; }

    /* hovering restores the full menu exactly as before */
    body.pos-screen .sidebar:hover { align-items: stretch; }
    body.pos-screen .sidebar:hover .sidebar-link {
        width: auto; height: auto; padding: 11px 16px !important; margin: 3px 10px;
        justify-content: flex-start; border-radius: 8px;
    }
    body.pos-screen .sidebar:hover .sidebar-link i { margin-right: .5rem !important; }
    body.pos-screen .sidebar:hover .nav-item { justify-content: flex-start; }
    body.pos-screen .sidebar:hover .sidebar-footer { justify-content: flex-start; padding: 8px 12px !important; }
    body.pos-screen .sidebar:hover .sidebar-logout { width: auto; height: auto; padding: 6px 10px; }
    body.pos-screen .sidebar:hover .sidebar-logout .logout-text { display: inline; }
}

/* ============================================================
   Sidebar stays put while the page scrolls, and scrolls on its own
   when the menu is taller than the screen.
   ============================================================ */
@media (min-width: 992px) {
    .sidebar {
        position: sticky; top: 0; align-self: flex-start;
        height: 100vh; max-height: 100vh; overflow-y: auto; overflow-x: hidden;
        scrollbar-width: thin; scrollbar-color: rgba(255,255,255,.18) transparent;
    }
    .sidebar::-webkit-scrollbar { width: 6px; }
    .sidebar::-webkit-scrollbar-track { background: transparent; }
    .sidebar::-webkit-scrollbar-thumb { background: rgba(255,255,255,.18); border-radius: 4px; }
    .sidebar::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,.3); }
    /* logout stays reachable at the bottom of the menu */
    .sidebar .sidebar-footer { margin-top: auto; }
}

/* ---- Printer detection picker ---- */
.detect-box { background: #F7FAFD; border: 1px solid var(--sd-border); border-radius: 12px; padding: 14px 16px; }
.printer-pick {
    width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 10px;
    background: #fff; border: 1px solid var(--sd-border); border-radius: 10px;
    padding: 10px 13px; margin-bottom: 8px; text-align: left;
}
.printer-pick:hover { border-color: var(--sd-primary); box-shadow: 0 3px 10px rgba(23,147,209,.12); }
.printer-pick .pp-name { font-weight: 600; font-size: 14px; display: block; }
.printer-pick .pp-kind { font-size: 12px; color: var(--sd-muted); }
.printer-pick .pp-state { font-size: 11.5px; font-weight: 700; border-radius: 999px; padding: 2px 10px; }
.printer-pick .pp-state.ok { background: #E6F6ED; color: #12A150; }
.printer-pick .pp-state.no { background: #FDECEA; color: #E0483B; }

/* ============================================================
   Sign-in screen
   ============================================================ */
.auth-page { display: flex; min-height: 100vh; background: #fff; }
.auth-form-side {
    flex: 0 0 50%; display: flex; align-items: center; justify-content: center;
    padding: 40px 32px;
}
.auth-form-inner { width: 100%; max-width: 380px; }

.auth-brand { display: flex; align-items: center; gap: 11px; margin-bottom: 40px; }
.auth-logo {
    width: 42px; height: 42px; border-radius: 12px; background: var(--sd-primary); color: #fff;
    display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 20px;
}
.auth-brand-name { font-size: 19px; font-weight: 800; letter-spacing: -.02em; line-height: 1.1; }
.auth-brand-name span { color: var(--sd-primary); }
.auth-brand-sub { font-size: 12px; color: var(--sd-muted); }

.auth-title { font-size: 27px; font-weight: 800; letter-spacing: -.02em; margin: 0 0 4px; }
.auth-sub { color: var(--sd-muted); font-size: 14.5px; margin-bottom: 26px; }

.auth-field { margin-bottom: 16px; }
.auth-label { display: block; font-size: 13px; font-weight: 600; color: #46525F; margin-bottom: 6px; }
.auth-input {
    display: flex; align-items: center; gap: 9px;
    border: 1px solid var(--sd-border); border-radius: 11px; padding: 0 13px; height: 48px;
    background: #fff; transition: border-color .12s, box-shadow .12s;
}
.auth-input:focus-within { border-color: var(--sd-primary); box-shadow: 0 0 0 4px rgba(23,147,209,.12); }
.auth-input > i { color: var(--sd-muted); font-size: 1rem; }
.auth-input input {
    flex: 1; border: 0; outline: none; font-size: 15px; background: transparent; height: 100%;
}
.auth-eye { border: 0; background: transparent; color: var(--sd-muted); padding: 0 2px; }
.auth-eye:hover { color: var(--sd-ink); }

.auth-submit {
    width: 100%; height: 48px; border: 0; border-radius: 11px; margin-top: 8px;
    background: var(--sd-primary); color: #fff; font-size: 15.5px; font-weight: 700;
    display: flex; align-items: center; justify-content: center; gap: 8px;
}
.auth-submit:hover { background: var(--sd-primary-dark); }
.auth-submit:disabled { opacity: .75; }

.auth-foot {
    display: flex; justify-content: space-between; align-items: center; gap: 10px;
    margin-top: 30px; font-size: 12px; color: var(--sd-muted);
}

/* right-hand panel */
.auth-art-side {
    flex: 1; background: linear-gradient(155deg, #0E1726 0%, #14304A 55%, #10608F 100%);
    color: #fff; display: flex; align-items: center; padding: 48px; position: relative; overflow: hidden;
}
.auth-art-side::after {
    content: ""; position: absolute; width: 460px; height: 460px; right: -140px; top: -120px;
    background: radial-gradient(circle, rgba(23,147,209,.35), transparent 65%); border-radius: 50%;
}
.auth-art-inner { position: relative; max-width: 420px; }
.auth-art-inner h2 { font-size: 30px; font-weight: 800; letter-spacing: -.02em; line-height: 1.25; }
.auth-art-inner > p { color: rgba(255,255,255,.72); font-size: 15px; margin: 10px 0 30px; }
.auth-points { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 18px; }
.auth-points li { display: flex; gap: 13px; align-items: flex-start; }
.auth-points i {
    width: 38px; height: 38px; border-radius: 11px; background: rgba(255,255,255,.1);
    display: flex; align-items: center; justify-content: center; font-size: 1.05rem;
    color: #7FD0F5; flex-shrink: 0;
}
.auth-points span { font-size: 14px; color: rgba(255,255,255,.72); line-height: 1.45; }
.auth-points b { display: block; color: #fff; font-size: 15px; font-weight: 700; margin-bottom: 1px; }

@media (max-width: 991px) {
    .auth-art-side { display: none; }
    .auth-form-side { flex: 1 1 100%; }
}
.card-action-btn.act-green { background: #E9F8EF; color: #12A150; }
.card-action-btn.act-green:hover { background: #D7F2E3; color: #0E7A3C; }

/* message on the sign-in screen (wrong password, session expired, ...) */
.auth-alert {
    display: flex; align-items: flex-start; gap: 9px;
    border-radius: 10px; padding: 11px 13px; margin-bottom: 18px;
    font-size: 13.5px; line-height: 1.4;
    background: #EAF4FB; border: 1px solid #C4E0F2; color: #1B4F72;
}
.auth-alert i { font-size: 1rem; margin-top: 1px; }
.auth-alert.err { background: #FDECEA; border-color: #F6D2CE; color: #A93226; }
.auth-alert.warning { background: #FFF8E1; border-color: #F0DFA8; color: #7A5D0A; }
.auth-alert.success { background: #E9F8EF; border-color: #C9EAD7; color: #0E7A3C; }

/* ============================================================
   Sidebar — inset rows and a user block, matching the reference
   ============================================================ */
.sidebar-link {
    padding: 11px 14px !important;
    margin: 2px 12px !important;
    border-radius: 9px;
    font-size: 15px;
    display: flex; align-items: center; gap: 12px;
}
.sidebar-link i {
    font-size: 1.05rem; width: 20px; text-align: center; margin: 0 !important;
    opacity: .9;
}
.sidebar-link:hover { background: rgba(255,255,255,.07); color: #fff !important; }
.sidebar-link.active { background: var(--sd-primary) !important; color: #fff !important; }
.sidebar-link.active i { opacity: 1; }
.sidebar-header { padding: 16px 18px !important; }
.sidebar-alerts { padding-left: 12px !important; padding-right: 12px !important; }

/* user block at the bottom */
.sidebar-footer { padding: 10px 12px 12px !important; border-top: 1px solid rgba(255,255,255,.07); }
.sb-user {
    width: 100%; display: flex; align-items: center; gap: 11px;
    background: transparent; border: 0; border-radius: 10px; padding: 8px 10px; text-align: left;
}
.sb-user:hover { background: rgba(255,255,255,.07); }
.sb-avatar {
    width: 34px; height: 34px; border-radius: 50%; background: rgba(255,255,255,.12);
    color: #fff; font-weight: 700; font-size: 14px; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
}
.sb-user-meta { flex: 1; min-width: 0; }
.sb-user-name {
    display: block; color: #fff; font-size: 14px; font-weight: 600; line-height: 1.2;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.sb-user-role { display: block; color: rgba(255,255,255,.5); font-size: 11.5px; }
.sb-user-caret { color: rgba(255,255,255,.45); font-size: .8rem; }

/* in the POS rail only the avatar shows */
@media (min-width: 992px) {
    body.pos-screen .sidebar .sb-user { justify-content: center; padding: 8px 0; }
    body.pos-screen .sidebar .sb-user-meta,
    body.pos-screen .sidebar .sb-user-caret { display: none; }
    body.pos-screen .sidebar:hover .sb-user { justify-content: flex-start; padding: 8px 10px; }
    body.pos-screen .sidebar:hover .sb-user-meta,
    body.pos-screen .sidebar:hover .sb-user-caret { display: block; }
}